2023-06-05
以前まとめた「IchigoJamからのステップアップ」を見やすく改定。


「プログラミング言語比較」
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>

2023-06-04
C3.jsSVG(Scalable Vector Graphics)に触れたので、ライブラリを探してみて発見、SVG.jsインストール方法を見るとESモジュール(esm)の文字!うれしい!


「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、いろいろ遊んでみましょう。

2023-06-03
データをいい感じに表示するオープンソースなライブラリ探索。「Comparison of JavaScript charting libraries - Wikipedia」で見つけた、C3.js。


「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そのままです。多数のサンプルや、公式リファレンスを参考に、いろんなデータをビジュアライズしてみましょう!

2023-06-02
面倒な操作の繰り返し?そんな時は、レッツプログラム!

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 が便利です。


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

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS