Code for KOSEN チーム開発で進む高専プロコン競技部門予定だった「囲みマス」のシステムづくり、APIサーバーの第一弾が動き出し、AIプログラムづくりに取り組む準備ができました!

Deno TypeScript APIサーバー、JavaScriptで作ったKakomimasuコアを使っています。

GitHubのKakomimasuリポジトリをcloneまたはダウンロードして、APIサーバーの使い方記載の手順で動かすと、PC上でAPIサーバーが起動し、テストのAIプレイヤー2人の試合をブラウザで見ることができます。

JavaScriptで、AIを作ってみましょう。(src on GitHub

import { Action, sleep, match, getGameInfo, setAction, diffTime } from "./client_util.js"; const [ playerid, roomid] = await match(`高専太郎`, "ポンコツ"); let gameInfo; do { gameInfo = await getGameInfo(roomid); await sleep(100); } while (gameInfo.startedAtUnixTime === null); console.log(gameInfo); console.log( "ゲーム開始時間:", new Date(gameInfo.startedAtUnixTime / 1000).toLocaleString("ja-JP"), ); await sleep((diffTime(gameInfo.startedAtUnixTime) + 1) * 1000); // ターン1 setAction( roomid, playerid, [new Action(0, "PUT", 1, 1), new Action(1, "PUT", 3, 3)], ); await sleep((diffTime(gameInfo.nextTurnUnixTime) + 3 + 1) * 1000);

APIサーバーへのアクセス用の関数群(client_util.js)をimportして、プレイヤー登録し、ゲーム開始を待って、ターン毎にアクションを送ります。

getGameInfo で、フィールドの状態、自分や相手の状態、点数を把握できます。 まずはシンプルに高得点から順に押さえるだけのAIから作ってみることから始めてみましょう!

TypeScript版もあるので、お好きな言語でどうぞ!(client_test1.ts on GitHub

週1でオンラインで集まってます。
次回は、7/16(木)20:00-22:00内、ご興味ある方、ぜひどうぞ!
Code for KOSEN Slack

links
- 中止になった高専プロコン競技部門はオンラインで遊ぼう! 競技システムのDeno/Node.js用コアモジュールのオープンソース公開

東京小金井市前原小学校でも活躍しているIchigoJam、手軽に実用マシンにできるのもウリのひとつ。 時計付き温度計はんだづけなし版)に、ネコゴハンマシンに活躍している、そこそこ正確な時刻を提供してくれる部品、リアルタイムクロック(RTC)。 アラーム機能を使って1時間に1回起動する省エネマシンを作りました。

10 BEEP 20 WAIT 60*60*60 30 GOTO 10

まずは、IchigoJamだけでできること。WAITは60で1秒なので、60倍して1分、さらに60倍して1時間。これで1時間おきにBEEPが鳴る?実はそうはなりません。なぜでしょう。

60*60は3600、もう10倍もするとIchigoJamの変数で扱える最大値32767を超えてしまいます。5分は収まるので12回繰り返して、1時間待ってもらいましょう。

20 FOR I=1 TO 12:WAIT 60*60*5:NEXT

WAITコマンドは指定の数だけ待ちますが、CPUは全力で動いています。これを休ませて、省エネにするのが、WAITの二番目のパラメーター。

20 FOR I=1 TO 12:WAIT 60*60*5,0:NEXT

コンマ0を付けると、画面が停止し、5分後に復帰し、また続きを実行して、また停止を繰り返します。停止している間、メモリなど極僅かに電気を使う状態になるのでぐっと省エネ、電池の持ちが良くなります。

ただ問題は、CPU付属のタイマーの精度が高くないことです。ぴったり1時間にはならず、ちょっとずつずれていきます。ずれる時間を計測して調整するのもありですが、個体差があるので、たくさん作る時には一工夫必要です。

そこで登場、RTC(リアルタイムクロック)モジュール!
(245円 at aitendo, 3コで960円 at Amazon)

IchigoJamとRTC、VCC/GND/SCL/SDA(IN3)を接続。SQWピンはアラーム割り込みピンとしても設定でき、BTN端子に接続して、1時間毎に起動と設定して、SLEEPコマンドを使っておくと、もっと省エネ。もっと正確に1時間置き実行が実現できます。 (SLEEPコマンドからの復帰は、RESETしてFILE0の自動起動となるので、ピンのI/O設定や、実行中の変数の値は消えることに注意!)

DS3231のデータシートを見て、アラーム設定。指定時間になったらSQW(INT)ピンが0になります。もう一度アラームがくるように、アラームフラグを0に戻しておく必要ありです。

100 POKE#700,0,0,#80,#80:?I2CW(#68,#7,#700,4) 110 POKE#700,`101:?I2CW(#68,#E,#700,1) GOTO 100 10 BEEP 20 POKE#700,0:?I2CW(#68,#F,#700,1) 30 SLEEP SAVE0 SLEEP

100行、110行が初期設定。一度実行すれば、RTCにアラーム設定が書き込まれます。 1時間置きをテストするのは時間がかかるので、1分置きにする場合は、100行を下記のように設定します。

100 POKE#700,0,#80,#80,#80:?I2CW(#68,#7,#700,4)

保存しSLEEPコマンド実行で眠ります。うまく設定できていれば、アラームで起動し、BEEPを鳴らし、20行でアラームフラグをリセットしてて再びSLEEPで眠ります。

100行のアラーム設定には、秒、分、時間、日時や曜日の設定できるので、現在時刻を設定して、オリジナルなスケジュールアラームづくりもいいですね! 非常ベルをつなげば、気づく確率アップ!
この2032電池を接続できるRTCモジュール、充電回路がついているとのことで、充電電池ではない電池を使う場合、この抵抗をニッパーでカットするなど、充電回路を遮断しておく方が安全そうです。(3.3Vで使う分にはリスクは低いらしい?)

links
- 「IchigoJamBASIC」「Lチカ」「カムロボ」「ドローン」……前原小学校が実践したプログラミング授業の全容公開! - バレッドプレス(VALED PRESS)

総務省オープンデータ研修の地域メンターでの連絡会、鯖江でも、世界中どこからでもサクッと集まれるオンライン新習慣がありがたいです。 イベント表紙に使われていた、フリー素材で地域の特産をPRしている宮崎県小林市のお肉画像 oniku-images


肉サイコロ_焼き_3|お肉のフリー素材サイト oniku images|宮崎県小林市
かわいいお肉画像、発見!サイコロステーキでつくったサイコロの目、6画像。 高校プログラミング情報Iのサイコロ確率シミュレーションに関連した補助教材として、サイコロを作ってみました。

フリー素材(オープンデータと違って利用制限があるので、利用規約を要確認)、ダウンロードして、シンプルに開いた瞬間、1〜6、いずれかランダムに目が出るプログラムから作ってみましょう。

<img id="img"> <script type="module"> const n = Math.floor(Math.random() * 6 + 1); img.src = `img/onikuimages-dice-${n}.jpg`; </script>

グラフのアプリで使ったcanvasタグの代わりに、画像タグ(img)を用意します。 0以上1未満の乱数を返す関数 Math.random を6倍して、1以上7未満の数にしたものを小数点以下を切り捨てる関数 Math.floor で、1〜6のランダムな値を作って、定数(const) n に入れる。 この n を使って、画像のファイル名とすれば、できあがり!

このプログラムを dice.html として保存し、img フォルダに、onikuimages-dice-1.jpg など6ファイル用意しておけばパソコン上で動きます。 リロードする度に目が変わります。

画像をクリックしたらもう一度振るsetTimeoutを使ってアニメーションするなど改造もどうぞ!

このくらいのシンプルなプログラムを作って活用するために必要なスキルを書き出してみます。

プログラミングに関するスキル
- 変数、関数の使用、条件分岐、繰り返し、関数の作成

パソコン利用に関するスキル
- マウス操作、キーボード操作、アプリ起動、アプリ切り替え、ファイル種別のリスク有無判定、ファイルダウンロード、テキストファイル作成、ファイル管理(ディレクトリ、削除、移動、コピー)

プログラミングより、パソコンのハードルの方が地味に高そうです。 スマホ普及により、高校生によってはほとんどパソコンを使ったことないという例も多くなるでしょう。

ブラウザ上で完結する環境は広がっていますが、補助輪付き自転車と同様、パソコンを最大限に活かすことはできません。 ただ無理にやっても、地味で大変な思いをしたのに、できることはたったこれだけか・・・とプログラミング嫌い以前に、パソコン嫌いが増える要因にもなりかねません。

今回のお肉サイコロを作ろう教材だけで、ぐっとくる生徒は少ないはずです。「JavaScript 50行で作るで作るVRマイクラ風」並のインパクトをどうコンパクト実現するかが悩ましいところです。 パソコンがなくても、また、プログラミングしなくてもできることは拡大し続けるので、それを常に上回る教材を提供し続ける必要があります。(実際、高校の情報II機械学習の項目は、SonyのAI開発ツール「Neural Network Console」の紹介になってしまっています)

パソコン自体をシンプルにした、IchigoJamというアプローチ。スマホより簡単なパソコンで、スマホでは難しいリアルの制御、LEDの点灯を自分で自在に操れるようになるまでが45分。 ネットワークが不要なので、OSのセキュリティアップデートは不要、教材は陳腐化することがありません(しません)。 F1ドライバーも、カートレースから。F1カーは毎年のように最新技術が投入されますが、カートの構造はほぼ変わりません。

どんどんおもしろくなるコンピューター、はじめのいっぽは大事です。

EBPM(イービーピーエム)、聞いたことありますか?
証拠に基づく政策立案(Evidence-based Policy Making)の略で、2018年の総務省資料がヒットするなど比較的新しい言葉のようです。(何に基づいていたのだろう?)

レジ袋が有料化。ゴミの削減は大事な問題ですが、なぜレジ袋だったのでしょう?

ポリ袋は実はエコなんです。
脱プラ、脱ポリ、紙袋へ切り替えをご検討のお客様へ|1958年創業のポリ袋製造業|清水化学工業
検証してみましょう。証拠として挙げられているデータ「ポリ袋は漂着ごみの重量で0.4%にすぎない」の出典をたどります。


環境省「中央環境審議会循環型社会部会プラスチック資源循環戦略小委員会(第3回) 議事次第・配付資料」の参考資料1「プラスチックを取り巻く国内外の状況<第3回資料集>


P78にありました。2016年、環境省による全国10地点で調査された漂流ごみの調査結果。


補助教材、漂流ごみの分類」(src on GitHub)
PDFからのCSV化は手作業で手間がかかります。テキストデータをテキストエディタにコピーして、タブ区切り化して、Excelに貼り付け、整形、確認、CSVデータとして保存します。 あとは、Chart.jsを使って、円グラフにして完成!

ポリ袋は、ごみ全体からの重量比で0.4%分しかありません。飲料用ペットボトルで7.3%、その他プラボトル類で5.3%あるので、この対策を先に考えた方が良さそうです。 そもそもなぜ捨てるのか・・・。減らないようであれば、ペットボトル税、プラボトル税をかけて、それを財源に対策するのも手なのかも。 また、大きな割合を占める、漁業由来のごみは大きく削減する鍵。

なぜ割合としては小さい「ポリ袋」が選ばれたのか?

根拠としての記述は見つけてられていませんが、P65に下記の記載がありました。

進めていくべき・協力できると思う取組を確認したところ「スーパーのレジ袋有料化」が50%以上と最も高く
確かに福井のスーパーではマイバッグがずいぶん定着してますが、コンビニを含む、あらゆるお店のレジ袋で協力できるかと言えば別かもしれません。 また、上記、ごみ削減に向けた、効果あるという証拠が弱いと知っていたら回答も違ったかもしれません。(* 福井県敦賀市 マイバッグ持参率88%|環境ニュース[国内]|EICネット


P51にプラスチックくずの輸出量の記載があります。日本はプラごみを輸出し、他国に処理を押し付けていることを知ったのはごく最近です。 「財務省貿易統計 Trade Statistics of Japan」からCSVデータをダウンロードし解析することができます(最新データは2020年5月分)。

レジ袋有料化によって、どのような変化がでるか?
未来に向けたKPI、適切に設定し、チェックし、見直し、改善するために知恵を絞って、行動していきましょう!

遂に、厚労省がCSVオープンデータ公開スタート!
オープンデータ|厚生労働省
検査数、患者数、退院数、死亡者数などが、CSVオープンデータとして公開されました。(都道府県別や、病床数はまだの様子)
高校プログラミング「情報I」の範囲で補助教材として使えるように、シンプルにまずは活用例をつくってみました。


補助教材、CSVオープンデータをダウンロードしグラフ化、2軸」(src on GitHub)
早速 Chart.js を使ってグラフ化!2軸にして、検査数と発生数を比較できるようにしました。


補助教材、PCR 検査陽性者数(日別)」(src on GitHub)
まずはシンプルに日別の陽性者数のみ表示からいじり始めるといいです。

<body style="margin:0;text-align:center;"> <canvas id="chart"></canvas> データ出典:<a href=https://www.mhlw.go.jp/stf/covid-19/open-data.html>オープンデータ|厚生労働省</a>(新型コロナウイルス感染症について)<br> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; import util from "https://taisukef.github.io/util/util.mjs"; const main = async () => { // const url = "https://www.stopcovid19.jp/data/mhlw_go_jp/opendata/covid19.csv"; const url = "https://www.stopcovid19.jp/data/mhlw_go_jp/opendata/pcr_positive_daily.csv"; const json = await util.fetchCSVtoJSON(url); console.log(json); const date = []; const data1 = []; for (const d of json) { date.push(d["日付"]); data1.push(d["PCR 検査陽性者数"]); } const config = { type: "line", data: { labels: date, datasets: [ { data: data1, borderColor: 'rgb(255, 99, 132)', fill: false, lineTension: 0 }, ] }, options: { title: { display: true, text: "COVID-19 日本のPCR検査陽性者数" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "日付" } }], yAxes: [{ scaleLabel: { display: true, labelString: "PCR 検査陽性者数" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); }; main(); </script>


厚労省ページからダイレクトに取得はできないので、GitHub pagesに自動的に上げる形にしています。


BOM付きUTF-8エンコードCSVなのでExcelでもOK!


オープンデータ|厚生労働省」活用しましょう!


新型コロナウイルス関係 CSVオープンデータ|厚生労働省
日付付きのさまざまなデータをひとまとめにしたCSVオープンデータを作成するプログラムも作ってみました。(src on GitHub)

links
- 厚生労働省の方へ、CSVオープンデータ化で効率化しましょう! 新型コロナウイルス国内事例における都道府県別の患者報告数表示アプリ
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

Code for Sabae主催、もくもく会 at SCC。

ステキテーブルで、もくもく、それぞれ何かをつくります。
時に相談、時に雑談。最初に今日やることを宣言し、終了30分前にミニ発表。


その場で実装、AからZまで早押しゲーム on IchigoDyhook、未就学児の子でもアルファベットとキーボードは親しみやすい!


ブラウザ上で動く、ファミコンゲームがC言語で作れる開発環境「8bitworkshop」で作ったブロック崩しゲーム!


Flutterと機械学習を使って物体認識をさせてみたい(途中)、まだちょっと苦労する様子。


Pythonの課題できた!(おめでとう!)


Discordのボットでソシャゲ支援!


英文を読めるようになるためのChrome拡張をつくってみたい。Chrome拡張、おもしろそう!


「faxinizer」
作ってみました、初Chrome拡張。できることがすごすぎて危険ですw。
以下、2ファイルでOK、超簡単Chrome拡張の作り方。
content.js を作成

document.body.style.filter = "blur(0.2px) grayscale(100%) contrast(10000%)";

manifest.json を作成

{ "name": "faxinizer", "version": "1.0.0", "manifest_version": 2, "description": "web like a fax", "content_scripts": [{ "matches": ["*://*/*"], "js": ["content.js"] }] }

Chromeで「Chrome拡張」を開き、「Load unpacked」で上記作成したフォルダを選択。以上。
以後、開いたページ、すべてがFAX風になります。

自分で作って使う分には超強力ですが、知らない人が作ったChrome拡張を使うのは避けましょう。 (参考、ブラウザ拡張の権限でどこまで(悪いことを)できるのか?とその対策【デモあり】 - Qiita


大きな明るいプロジェクター、あります!(有償レンタル可)


カフェコーナーではスムージーや、コーヒー。近くに自販機もあり。
こちらランチで食べたスープオムライス with Oculus Quest、AmabieDakeと、IchigoJamのCPUより2560倍速い京のコンピューター(88,128万分の1)


鯖江、鯖江商工会議所1FのSCC、11時〜20時まで、ふらっとお立ち寄りください。次回のもくもく会は8/8(土)と決定!

コンピューターへのコミュニケーションに欠かせないキーボード。 打ち心地や、キー配列など、毎日使うものだから、こだわりたい。 社内のキーボード自作ブームに乗って、まずは有名な赤軸青軸、それぞれ1キーずつ買って、レンダ性能を確認してみます。


さて、最速はどの軸か!? (軸仕入れ元「遊舎工房」、「軸の本」なるものも!)


裏面には端子がふたつ。そう、回路的にはただのスイッチです。なので、キーとキーキャップの1組から、IchigoJamなどに気軽につなげて遊べます。


モデルづくりはBlender。14mm x 14mm の穴を空けておけば、いい感じです。3つ入るキーも設計中。配線用の穴も空けておきましょう。


テスト用1キーバージョン。薄くつくりすぎて、若干びよびよと出ていますが、隠れるので問題なし。(配線穴ないので自分で開けてね版、3Dプリンター用 stlファイル


ちょうどいい小さな基板があったので、1枚使用。


10kΩでプルアップ(信号線を大きめの抵抗を経由して電源にもつないでおくこと)
IN2は、アナログにも使用するためプルアップなし。
IN3は、I2C用端子との共有な関係で外部プルアップが必要です。
IN1、IN4は、コンピューター内部でプルアップ設定してあるので、直接接続でOKです。


裏面、抵抗の切れ端を使って配線。


ひとまず1つ挿してみた。かわいい。


IN2とIN3をプルアップする入力デバイスのできあがり!


赤軸を装着。


裏面。


1行プログラムで動作確認。軽快です!

1 ?IN(1);:CONT

こちら、100レンダする時間を表示する IchigoJam BASIC のプログラム。フレームで待っているわけではないので、PCで計測するより正確です。

100 VIDEO5 110 FOR I=3 TO 1 STEP -1 120 CLS:?I:WAIT30 130 NEXT 140 CLS:?"GO!":CLT 150 FOR I=100 TO 1 STEP -1 160 ?I 170 IF IN(1) CONT 180 IF !IN(1) CONT 190 NEXT 200 T=TICK() 210 ?T/60;".";T%60/6;"ビョウ"


ギリギリ10秒を切れた。レンダ、意外と大変です。仮に16連射すると、タイムは6.2秒。名人、すごい!

オリジナルのゲームコントローラーなど、制御パネルづくりにも良いですね!
コンピューターと人との接点、ぴったりな軸、探してみましょう。

links
- 遊舎工房 | 自作キーボード&レーザーカット&UVプリント(はんだづけコーナー、あり)
- 軸の本 Mechanical Switch Data Book EARLY ACCESS - Romly Shop - BOOTH
- 軸の本2 Mechanical Switch Data Book 2 - Romly Shop - BOOTH
- メカニカルキーボードの「軸」ってどれがいいの?【違いを解説】 | けしろぐ

プログラミングの必修化、2020年から小学校、2021年から中学校、2022年から高校でスタート。 高校では「情報I」という必修と、選択の「情報II」にてプログラミングが登場します。 教員研修用教材が公開されたので貢献できるところを探してみました。


高等学校情報科「情報Ⅰ」「情報II」教員研修用教材
一番気になるのは「高等学校情報科「情報Ⅰ」教員研修用教材(本編)」の「第3章コンピュータとプログラミング」。 Python版を基本に、他のプログラミング言語版として、 JavaScript版VBA版ドリトル版 Swift版の5つのプログラミング言語を教員が選ぶスタイルになっている。

まず一番気になったのは、他言語版として用意されたものに、API・グラフ描画・ハードウェア制御の実習が省略されていること。

さらにこの数式モデルの計算結果をわかりやすく評価するため,グラフで表示することが可能なプログラミング 言語もある。
※ JavaScript では実行が難しいため,本書においては割愛する。
高等学校情報科「情報I」教員研修用教材 JavaScript版 (第3章のみ) P43
世界中にある多種多様なライブラリがあり、ブラウザのみで動作するJavaScript、グラフ表示も簡単です。オープンソースな実装と共に実習例を紹介する。

学習16で登場する福利計算。まずは下記は10年分の預金残高を表示するプログラム。model1.html というファイル名で、テキスト形式(utf-8)で保存し、ブラウザで開くだけで動く。

<script type="module"> let yokin = 100000; const riritsu = 0.05; for (let i = 0; i < 10; i++) { const risoku = yokin * riritsu; yokin += risoku; alert(`${i + 1} 年目 : ${yokin}`); } </script>


document.write や、type="module" ではない古いJavaScript(クラシックスクリプト)は2022年に教える内容としてはふさわしくないので要修正(*)。


学習16 預金複利計算のグラフ」(src on GitHub)

<body style="margin:0"> <canvas id="chart"></canvas> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; const riritsu = 0.05; const yokin = [100000]; const labels = []; for (let i = 0; i < 10; i++) { const risoku = Math.floor(yokin[i] * riritsu); yokin.push(yokin[i] + risoku); labels[i] = i + 1; } const config = { type: "line", data: { labels: labels, datasets: [{ data: yokin, borderColor: 'rgb(255, 99, 132)', fill: false, lineTension: 0 }] }, options: { title: { display: true, text: "FUKURI KEISAN" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "Year" } }], yAxes: [{ scaleLabel: { display: true, labelString: "Yokin[YEN]" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); </script>

グラフ化するライブラリとして、東京都の新型コロナウイルス対策サイトでも使われた「Chart.js」のモジュールスクリプト版「Chart.mjs」を使用。 こちらも graph1.html として保存して、ブラウザで開くだけで動作する。


5%10年では複利の効きが分かりづらいので、50年に変更した図がこちら。for文、繰り返しの回数をいろいろ変更してみるとおもしろい。

続いて、サイコロの確率のグラフ化。

学習16 サイコロの出目確率のグラフ」(src on GitHub)
type: "bar" で棒グラフにできます。 試行回数がたかだか100回だと期待値から大きく外れることがわかります。ブラウザを何度かリロードしてみましょう。

<body style="margin:0"> <canvas id="chart"></canvas> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; const deme = [0, 0, 0, 0, 0, 0] // 出目の数を数える配列 for (let i = 0; i < 100; i++) { const saikoro = Math.floor(Math.random() * 6 + 1); deme[saikoro - 1]++; } const left = [1, 2, 3, 4, 5, 6] // グラフの左方向の値指定用 const config = { type: "bar", data: { labels: left, datasets: [{ data: deme, backgroundColor: 'rgb(255, 99, 132)' }] }, options: { title: { display: true, text: "SAIKORO SIMULATION" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "ME" } }], yAxes: [{ scaleLabel: { display: true, labelString: "KAISUU" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); </script>

グラフの細かい設定は、Chart.jsのドキュメントを案内するといいでしょう。 まずは色を変えてみるとか、簡単なところ試行錯誤するのが楽しく学習するポイントです。


こちらもfor文内の繰り返し回数を増やすと確率のばらつきが収まっていく様子がわかります。 600回、6000回、60000回と増やしていくと分かりやすいです。


学習16 モンテカルロで円周率」(src on GitHub)
乱数を使った円周率の求め方、モンテカルロ法。点の数を増やすほどに精度が高くなることがわかります。グラフのtypeは、bubbleを使用。

<body style="margin:0"> <canvas id="chart" width="100" height="100"></canvas> 円周率: <span id="pi"></span> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; const red = []; const blue = []; const totalcount = 2000; // ランダムに打つ点の総数 let incount = 0; // 円に入った点の数 for (let i = 0; i < totalcount; i++) { const x = Math.random(); // 0-1 の範囲の値 const y = Math.random(); // 0-1 の範囲の値 if (x ** 2 + y ** 2 < 1.0) { // 単位円の中に入ったら incount++; // 入ったらカウンターに1を加える red.push({ x, y }); // 赤色でプロット準備 } else { blue.push({ x, y }); // 青色でプロット準備 } } pi.textContent = incount * 4.0 / totalcount; // 求まった円周率 const config = { type: 'bubble', data: { datasets: [ { data: red, backgroundColor: 'rgb(255, 99, 132)' }, { data: blue, backgroundColor: 'rgb(132, 99, 255)' } ] }, options: { animation: { duration: 0 }, title: { display: true, text: "Monte Carlo method" }, legend: { display: false } } }; new Chart.Chart(chart, config); </script>

JavaScriptを使ってもプログラミング実習できることを示しました。API編、ハードウェア編も別途書いて、GitHubへ追記しようと思います。
高等学校情報科「情報I」教育研修用教材プログラム集

もし、上記内容が難しく感じたとしたら、コンピューターやパソコンに関する基礎的な学習、タイピングや操作に対するある程度の慣れが必要です。

要修正、補足
* document.writeは、alert、console.log、DOM操作に置き換える。(w3.org document.write: Warning! This method has very idiosyncratic behavior.Document.write() - Web API | MDN
* 変数スコープが分かりやすく動作する strict mode を基本にする。(* Strict モード - JavaScript | MDNJavaScript モジュール - JavaScript | MDN

神山まるごと高専の技術教育統括ディレクター候補として、情報技術やプログラミングに関する教材のオープンデータ化を推進中です。 こんな教材がほしい、ここが分かりづらかった、一緒に教材を作りたいなど、協力したいという情報系高専生、ぜひご一報を!(夏のインターンプログラムも受付中 2020-07-10まで

ITの楽しさ伝える、福井県立科学技術高校、2年生全員向け講演。

体育館に掲げられている「技」と「創」が良い!


情報技術に関してとリクエストいただいたので「情報技術の活かし方・遊び方・学び方」と題したプレゼンテーション、IchigoJamゲームのライブコーディング、質疑応答の50分。


IchigoJamのCPU、凄い!という感想。作った私も凄いと思ったほどです。100円なのにね。スライドの16:9化に伴い、京と富岳を並べる形にアップグレード。 同じ予算なのに性能100倍!世界一のスパコン「富岳」の活躍、これからも楽しみです。


こちら、引退したスパコン「京」で、実際動いてたコンピューター。かっこいい!
7億6000万個のトランジスタでできているこのコンピューターを、88,128個つないで動かしていたのがスパコン京。 CPUの動作周波数は2GHzとみなさんのスマホと同等です。IchigoJamの48MHzともたかだか40倍しか変わりません。

計算が速い=時間の創出=社会が豊かになる

IchigoJamで三平方の定理を使った斜めの距離計算をやってみましょう。

10 ?"CALC LEN" 20 INPUT "X?",X 30 INPUT "Y?",Y 40 N=X*X+Y*Y 50 ?"X*X+Y*Y=";N

横(X)と縦(Y)の長さを入れてもらって、それぞれ自乗したものを足した数(N)。これのルートをとれば斜めの距離がでます。 ルートを計算するコマンドはないので、ひとまずシンプルに愚直に繰り返して求めてみましょう。

60 L=0 70 L=L+1 80 IF L*L<=N GOTO 70 90 L=L-1 100 ?"SQRT(";N;")=";L

長さ(L)を1足しながら自乗した値が先程計算したNを超えたら、1戻して表示するプログラム。 X=3、Y=4で結果Lが5とでました!

30, 40 だと、50。100,100だと144。数が大きくなると遅くなります。IchigoJam BASIC は、1コマンド1文字ずつ間違いがないか確認しながら丁寧に実行するので、間違っても安心な楽ちん言語ですが、その分速度が犠牲になっています。

そんな時は「マシン語」、コンピューターの能力をフルに引き出してみましょう。 BASICに似たマシン語生成用プログラミング言語 asm15 を使ったルートの計算はこちら。

R1=0 @LOOP R1+=1 R2=R1 R2*=R2 R0-R2 IF GE GOTO @LOOP R0=R1-1 RET

変数の代わりにコンピューター内部にある最も高速なメモリ、レジスタ(R0〜)を使います。IF GE GOTO は、もし、直前の計算結果が0以上だったらを意味する(GE)を使って、ループしています。 やってることはほぼ同じですね。

C言語と同様、これをマシン語に変換します。asm15 assemblerを使ってできたマシン語をメモリに書き込み、USR関数を使って呼び出しましょう。

POKE#700,0,33,1,49,10,70,82,67,144,66,250,218,72,30,112,71 ?USR(#700,25) 5 ?USR(#700,10000) 144

計算できました!大きな値でも一瞬ですね!
IchigoJamは1秒間5000万回、富岳は100京回、マシン語を使うとコンピューターの性能をフルに引き出せます。

汎用的に使えるC言語(IchigoJam BASICもC言語で作っています)、スマホやPC、サーバーでも気軽に動かせるJavaScript、並列処理に便利なC言語に似たGLSLなど、用途に合わせたいろんな言語も最終的にはそれぞれのコンピューターに合わせたマシン語となって動いています。

コンピューターと人間はステキな補完関係、うまく付き合っていきましょう!


HTMLはじめのいっぽ
30分でOK、HTMLからはじめる、自分だけのアプリづくり入門。CSSでデザインに凝るもよし、JavaScriptで動きに凝るも良し。


科学技術高校生による福井県てぬぐいがステキです!オリジナルスマホアプリづくりにもぜひチャレンジしたくなったら、どうぞお声がけください!


ハードウェア好きなら、栃木県立栃木工業高校による「SkyBerryJAM」のように、IchigoJamをベースにした、オリジナルハードづくり、楽しいかも?


講演資料「情報技術の活かし方・遊び方・学び方
CC BY のオープンデータです。ご活用ください!

福井県立科学技術高校のみなさん、楽しい時間、ありがとうございました!

機械学習(AI)で活用されるGPU(ジーピーユー)とは、小さなタスクを多数のプロセッサで並行してこなすコンピューター。 C言語に似たプログラミング言語、GLSLを使って、ブラウザ上でも遊べます。


cloud」(GLSLを使ったアニメーションを背景にプログラムを確認できます)
ほぼサンプルのままですが、色を変え、縦横比を合わせて、ゆっくり拡大縮小させてみました。1ピクセル毎の処理 main が並列して走ることが特徴です。 普通のプログラムだと繰り返しが多くなるほどに遅くなりますが、並列実行はそれがありません。ちょっと変わったお絵かき方法が楽しめます。

参考になったのが、こちら「The Book of Shaders」、原著は英語ですが、日本語で前半が翻訳されています。 動き、自分でいじれるサンプルが豊富に含まれているので、気軽に楽しめます。(前提知識、何かプログラミング言語の経験とベクトルの知識)

きっかけは、csv-tableで始めたWebComponents。Twitterのハッシュタグで検索して発見した、shader-doodleタグ。 シェーディング言語をHTML内のscriptタグで埋め込むだけで使えて便利!

目指せ、技術のわらしべ長者!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS