福野泰介の一日一創

「プログラミング言語比較」src on GitHub
チェックボックス（input-checkbox HTMLElement）を使って、言語ごとの表示、非表示に対応。より比較しやすくなりました。

IchigoJam BASICとPython、よく似てます。Pythonは変数の宣言が不要なところが、バグの元でもありますが、短くて敷居が低いのはいいですね。

実は3モードあるJavaScript。普段使っているのは右側、モジュール対応のJavaScriptですが、何も宣言せず "use strict" も設定しなければ、変数宣言不要で使えます。

<script> a = [5, 3, 1] n = 0 for (m of a) { n += m } alert(n) </script> これを書いてHTMLとして保存すればちゃんと動きます！

IchigoJam BASICからJavaScript、まずは変数宣言不要で、打つ文字が少なく、エラーが出にくい easy JavaScriptから入ってもらうのも良いですね。

プログラミングにある程度慣れてきて、複数ファイルにまたがるような大規模開発に取り掛かるころに、モジュール対応のJavaScriptに移行する感じでいきましょう。

実験したところ、ESモジュールとの組み合わせもできたので、いろいろなライブラリとの組み合わせも使えそう！（モジュール対応 type="module" との共存例）
<div id=svg></div> <script type="module"> import SVG from "https://code4fukui.github.io/svg-es/SVG@2.7.1.js"; import moyo from "https://code4fukui.github.io/moyo/penrose.js"; moyo(SVG); </script> <script> onload = () => { draw = SVG("svg").size(600, 500); draw.penrose(600, { type: "rhombus", inflation: 6, rim: "clip" }, { fill: "hsl(0 80% 40%)" }, { fill: "hsl(45 80% 40%)" }); }; </script>

「SVG.js animation demo」
うにょうにょ動くのがかわいいデモをESモジュールで書いてみました。ES-Jamでサクッと動かせます。いろいろ文字を変えたり値を変えたり遊んでみましょう。

SVG.jsは、Starが10.3kと人気なライブラリ。何に使われているかnpmの依存関係で辿って見つけた、「moyo」を動かしてみました。

「moyo - demo」src on GitHub
どんな模様なのか？CoffeeScriptで書かれたプログラムをcoffeeコマンドでJavaScriptに変換し、ESモジュールになるように変更。requireで読み込んでいた tinycolor は、ESモジュール化されたコード mod.js がGitHub Pagesで公開されていたのでそのまま使用。SVG.jsのバージョンが合わなかったので、SVG ver 2.7.1のコードをESモジュール対応した svg-es を作成して表示できました！コンストラクタのattrsが渡されていないバグを修正し、オプション指定にも対応。

「moyo on ES-Jam」
ES-Jamで動かした様子。2色を自由に指定できます。拡大縮小してもキレイなグラフィック、SVG、いろいろ遊んでみましょう。

「C3.js | D3-based reusable chart library」
公式サイトもステキでいい感じ。最終更新が2020年8月とそこそこ新しい。GitHubを見るとStar9,300となかなかの人気！依存ライブラリはD3.jsのみと構成もシンプルでいい。

プログラムはTypeScriptで書かれており、ESモジュールとして生成された c3.esm.js は、そのままブラウザからインポートしても動かず。windowオブジェクトの SVGPathElement などを使っていることが分かったので、初期化メソッドinitC3で囲み、ついでにCSSも読み込む形に後処理で生成するDeno用JavaScriptプログラム make_c3-es.js を追加して対応。D3は最新のv7ではなく、v5で作られている。

下記のようなHTMLを書くだけで、グラフ表示できるようになりました。 <div id="chart"></div> <script type="module"> import { initC3 } from "https://code4fukui.github.io/c3-es/c3-es.js"; const c3 = initC3(window); const chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); </script> デモサイトでも確認できます。

「demo - c3-es forked C3.js」

「c3-es forked C3.js src on GitHub」
使い方は、C3.jsそのままです。多数のサンプルや、公式リファレンスを参考に、いろんなデータをビジュアライズしてみましょう！

APIがあればそれを使うのが一番ですが、無いなら無いなりになんとかします。

人に替わってマウスやキーボード操作をしてくれる機能、Javaで言う所のjava.awt.Robotクラスなどを使ってなんとかすることをRPAと言います。JavaScriptのランタイム、Denoで実現するライブラリを探すもいいものが見つからず。そこで、Windows/Mac両方で使える、Python用のライブラリ pyautogui を Flask でWebサーバー経由で操るようにして、Denoでアクセスするライブラリ Robot.js を作りました。

「deno_robot」
PythonとDenoをダウンロードし、Pythonのインストーラーpipを使って、Webアプリケーションサーバーflaskと、GUI操作ライブラリpyautoguiをインストール。あとはpythonでサーバーを動かしつつ、Denoのライブラリで下記のように使ってください。 import { Robot } from "https://code4fukui.github.io/deno_robot/Robot.js"; const endpoint = "http://localhost/"; const r = new Robot(endpoint); // about this mac await r.mouseMove(10, 10); await r.mouseClick(); await r.keyPress("down"); await r.keyPress("enter"); 遠隔から操作したい場合、endpointを書き換え、server.pyが読み込むallow_networksで許可IPアドレスなどを編集しましょう。

マウス位置を確認したいときは deno run -A poswatch.js が便利です。

こちら、ビュッフェご飯がステキなホテル八木の夜食メロン！ようこそ、福井へ！