2021-11-18
#js 
情報処理学会の会報「情報処理 2021-12」の巻頭コラムを書きました。
歴代のコラムと合わせて、どなたでも読むことができます。

アルゴリズムとコンピューターとの組み合わせはすばらしく。再現性100%のプログラムがあれば、解決するための道具ではなく解決そのものが手に入ります。 幅広くその知恵を共有するオープンソース文化によって、ひとりの力は、かつて無いほど高まっています。 つまり、プログラミングをするか、しないかの差は開く一方です。


p5.js example
学会誌内の記事「ジェンダーインクルーシブなプログラミング教材の開発 -視覚化を通してデータを感じるプログラミング-」におもしろそうなビジュアライズがありました。 SNSのシェアの変遷を動く光の点で表しています。このデータソースとなっている「Social Media Stats Worldwide | Statcounter Global Stats」を借りて「sns-stat on GitHub」を作り、円グラフコンポーネント(ChartPie)を使って描画してみたものです。 物理エンジンや、流体シミュレーションなど、自然な動きを採り入れたコンピューターグラフィックスは確かにジェンダーフリーで楽しめそうです。


Webプログラミング 道場 v1.0
ログイン不要、オフラインでも使えるブラウザ上の開発環境を使って、日本のソーシャルシェアCSVデータを読み込み、円グラフ表示するプログラムです。 小学生での作文より短いです。もちろん裏側には膨大なプログラムありますが、巨人に肩車してもらって、どんどん高いところ行きましょう。

<script type="module"> import { ChartPie } from "https://code4fukui.github.io/chart-pie/chart-pie.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; const url = "https://code4fukui.github.io/sns-stat/jp.csv"; const data = CSV.toJSON(await CSV.fetch(url)); const chart = new ChartPie(data.find(d => d?.Date == "2021-10")); document.body.appendChild(chart); </script>


円グラフを書くだけなら、インポート文と命令をいくつか使うだけ!今ある便利機能にちょっと足すことでひとまずシンプルに「できること」増やしましょう。 ステキコンポーネント増やす、Code for FUKUIへの参画、お待ちしてます! <script type="module"> import { ChartPie } from "https://code4fukui.github.io/chart-pie/chart-pie.js"; const data = { "A": 30, "B": 20, "C": 70, }; const chart = new ChartPie(data); document.body.appendChild(chart); </script> JavaScriptやってみたい方、こちらからスグ、体験できます!
→ 「シンプル開発環境「Webプログラミング 道場」へ2つの改善提案(プルリク) / JavaScript

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