6/16、MSXという規格が誕生した日!
西さんVS 孫さん!? MSXの誕生秘話をちょっと語るぞ!:MSX30周年 - 週刊アスキー

MSX30周年記念がきっかけで誕生したIchigoJam。図書館で本を借りたり、カセットを買ったり、雑誌を見て打ち込んだりのあの感覚、だいぶ再現できてきました。

IchigoDake&IchigoDyhookで学べる タイピング・算数・英語学習セット | ...
カセット差し込み即起動、余計な時間はかかりません! IchigoDyhookの開発元、I-O DATAさんのご協力による新製品!学校のちょっとした時間に、算数、英語、タイピングが自学できます。 (三種のカセットを動かすロング版動画 on YouTube)


ハコの中身はプログラムが書かれた紙・・・ではなく、書き込み禁止ファームを使ったプログラム入りIchigoDake! プログラムを止めて、LISTを見て、いろいろいたずらできますが、保存はできない安心仕様。


KAZUATE.md
プログラミングに少し慣れたこどもには、プログラミングを使った学習をオススメします。 IchigoJamプリント、もっと作りやすくMarkdownで書いてみるテスト第一弾です。CSSを加えてIchigoJamプリント化や、PDF出力など発展させたい。


1行1行、入力して、プログラムを組んでいく感じを体験できます。オンライン学習にも使える「IchigoJam web」と合わせてお試しください。

いい具合にこどもたちに伝えていきたいです、ネットで無限に学習できる現代。
インターネットが無い頃、TAKERUでソフトが買えたのはありがたかった!

おめでとう&ありがとう、MSX38周年

子供の安全を守る、越前市国高地区の地域安全マップづくりで協力、シビックテック!

越前市 国高地区 地域安全マップ」(src on GitHub)
危険箇所が一目瞭然!メイキングをご紹介します。


まずは、国高地区内の各町の方から提案された紙をデジタル化!


ひとまずシンプルにCSV(コンマ区切りデータ)としてGitHubに各町ごとのファイルを作って、データ化します。


GitHubのアカウントがあれば、どなたでも自分のものとしてコピーして編集して使えます(Fork)。編集は鉛筆アイコン!いい感じになったら、ぜひ本プロジェクトへ変更提案(プルリク)お送りください。 ご質問は「Issue」へお気軽にどうぞ!


場所情報は、緯度経度地図からGeo3x3をコピーしてください。わからなければ空欄でもOKですが、地図上のアイコンには載りません。


横断歩道が欲しいという箇所、ドローンによる空撮写真で見てみました。確かにここを歩くのであればほしいですね。


勝山市の教育アドバイザーにも就任した、松田さんところでは、中学校の先生が集まり、JavaScriptでオリジナルWeb教材づくり勉強会。さすが教育先進県、福井の先生!
情報通信技術を教育現場に活用 勝山市で教育アドバイザー委嘱|NHK 福井県のニュース
中高生の授業でプログラミングをするなら、すぐに社会に役立つ感を合わせて伝えたいですね!JavaScriptとHTMLは歴史が長く、古くてまどろっこしい教材が多いので注意したいところ。

JavaScript、こんな教材は古い!
- document.write を使っている(不推奨です。console.log / alert / textContentなどで)
- document.getElementById を使っている(idはそのままでOK。減らそう無駄タイプ)
- 変数宣言に var を使っている(const / let を使いましょう。varは巻き上げがバグの元)
- <script> を使っている(<script type=module> importで構造的に作りましょう)
- 抽象化に prototype を使っている(現代JavaScriptにはちゃんと class があります)
- function を多用している(「=>」を使った方がタイプ量が少なく、巻き上げもなく安全)
- then を多用している(async / await を使って分かりやすく書きましょう)
- HTMLが <!DOCTYPE html> で始まっていない(HTML Living Standard で必須です)
- JavaScriptやCSSがインデントしていない(みやすさ大事です)
- 演算子の前後などに空白がない、あったりなかったりする(気持ちよさ大事です)


Hana道場では、IchigoJamとJavaScriptのプログラミング!


いきなり実践に取り組む、IchigoJamをマスターした中学生。
キーボードで打って動かすIchigoJam BASICのテキストプログラミングで順番に実行、分岐、繰り返し、変数、抽象化の基本を学んだら、JavaScriptへサラッと移行できますよ。

プログラミング、まずは気軽に楽しく始めましょう!

上記動画を見ながらIchigoJam実機か「IchigoJam web」でゲームづくりと改造を体験したら、「IchigoJamプリント」であれこれ遊んで感覚を掴んでからのJavaScriptチャレンジがオススメです。 → 古くない、JavaScript教材の例「JSはじめのいっぽ

高校の情報Iのプログラミング教材をJavaScriptで実装したものがこちら。
2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート
教科書が正しいとは限らないと学ぶための教材としていいかも?

コンパクトなオープンソースを改造するのもおすすめです。

読み上げてくれる英単語タイピングゲーム「TypingGame
JavaScriptのプログラムもシンプルなので、改造も簡単!(index.html on GitHub

自分で簡単に検証できる手段、それがコンピューターとプログラミングの醍醐味です。

日本語字幕で学べるコンピューターサイエンス、ハーバード大学の講座 CS50.jp が公開!
CS50 2020 - Lecture 0 - Scratch (日本語字幕付き) - YouTube
プログラミングは問題解決手段。文字や画像、音声などをデジタル化することで社会とコンピューターをつなぎます。コンピューターの力を紹介していないのがちょっともったいない。


電話帳から自分の名前を探すことを例に、アルゴリズムの解説。運動会のプログラムと同様、ステップに番号を振るのは一般社会でも使いますね。

1. 電話帳を開く
2. 電話帳の真ん中を開く
3. ページを見る
4. もし(IF)目的の人が載っていたら
5.   電話する
6. でなければ(ELSE)、もし(IF)五十音順でもっと前なら
7.   前半分の中の真ん中を開く
8.   3へ戻る(GOTO 3)
9. でなければ(ELSE)、もし(IF)五十音順でもっと後ろなら
10.  後半分の中の真ん中を開く
11.  3へ戻る(GOTO 3)

探し方は上の方法だけではありません。次の方法とどう違うでしょう?

1. 電話帳を開く
2. 電話帳の最初のページを開く
3. ページを見る
4. もし(IF)目的の人が載っていたら
5.   電話する
6. でなければ(ELSE)
7.   次のページを開く
8.   3へ戻る(GOTO 3)

行番号を付けての解説、この流れでBASIC!?


と思ったら、最初に登場したプログラミング言語は「C言語」(ただし、return 0; が抜けているイマイチなコード)
よく使われるプログラミング言語だけでも数十はある中、はじめてプログラミングをする学生に対して、わざわざややこしいC言語を比較対象にするのはフェアではないですね。


いろいろなプログラミング言語で hello, world 比較。ScratchはたしかにC言語より複雑ですが、CS50の6週目にやる予定のPythonより複雑です。

アニメーションづくりを目指すならともかく、テキストコーディングにすぐ進むなら、BASICがいいでしょう。

1 LED1 2 WAIT 60 3 LED 0 4 WAIT 60 5 GOTO 1

IchigoJam BASICで作った、信号機のように繰り返し点滅するプログラム。社会に組み込まれたコンピューターを体感しましょう。


こちら、1兆台のコンピューターがネットワークでつながる、IoT/マルチコア時代に注目される関数型プログラミング言語のひとつ、Clojureとそのファミリーです。

ClojureはJavaと同じ環境で動くJava言語で書かれたプログラミング言語。Java言語を知っている人はClojureの改良作業に加われるでしょう。 そのClojureを使って、ブラウザなどJavaScriptで動かせるClojureScriptが生まれ、インスパイアされてネイティブ環境で動きC言語で実装されたJanet、PHPで実装されPHPで動くPhelが誕生しました。

この表には抜けがたくさんあります。C言語で実装したJavaScriptで動くもの、JavaScriptで実装したJavaScriptで動くもの、Java言語で実装したネイティブで動くものなどが欲しいところですがありません。 そう、なければ創ればいいのです。Clojureファミリーはすべてオープンソースなので、近いものを使って改良し、新たな名前を付ける。こうして、新しいプログラミング言語は誕生します。


Janetの影響で誕生したPhelGeo3x3を実装してみました。文法はClojure、使える関数が違うので、少しの手直しをしてできあがり!(src on GitHub)

(ns geo3x3\geo3x3) (defn- encode_fn [code level i lat lng unit] (if (>= i level) code (encode_fn (str code (+ 1 (php/floor (/ lng unit)) (* (php/floor (/ lat unit)) 3))) level (+ i 1) (- lat (* (php/floor (/ lat unit)) unit)) (- lng (* (php/floor (/ lng unit)) unit)) (/ unit 3.0) ) ) ) (defn encode [lat lng level] (if (< level 1) nil (encode_fn (if (>= lng 0.0) "E" "W") level 1 (+ lat 90.0) (if (>= lng 0.0) lng (+ lng 180.0)) (/ 180.0 3.0) ) ) )

php/floor など、PHPの関数を使うのでPHPに慣れている人に便利そうですね!
78のプログラミング言語に対応したジオコードシステム「Geo3x3

座学より、つくって学ぼう、プログラミング!


プログラミング教材「IchigoJam(イチゴジャム)」の使い方とデモンストレーション(教師、大人向け) - YouTube
英語字幕もいれよう!

小学校で昨年度から必修化されたプログラミング。興味を持ったこどもたちがチャレンジする場のひとつ。越前がにロボコン、今年も越前蟹解禁日の2021年11月7日、開催決定です!

広く福井県内のこどもたちにチャンスを届けるためにはまだまだ大人の協力が欠かせません。企業版地域ICTクラブである「こどもプログラミング実業団」の説明会を開催しました。
こどもプログラミング実業団 募集! - 福井県こどもプログラミング協議会
こどもプログラミング協議会、越前がにロボコン実行委員が集まって、応援してくれている福井県庁の方と共にナチュラルスタイル社からのオンライン開催。

越前がにロボコンとは、小中学生が自分で作ったロボットとプログラミングで、地球を飛び出し惑星に子孫を残し、レアメタルをゲットして返ってくるまでの自律コントロールを競う大会です。 デジタル技術を使った競技なので、実質eスポーツ!

こちら、福井県こどもプログラミング協議会長、松田さんによるデモ走行! 使っているのは、こどもプログラミング実業団のはじめのいっぽにオススメ、PCN三重発のやさしいロボキット。


さばえカニロボを含む、ロボット達!


1996年に経団連が発表した「創造的な人材の育成に向けて


すばらしい提案から25年、個別最適化された学び「GIGAスクール」として教育DXが始まってます!


こどもプログラミング実業団の3つのメリット
こどもへのIT教育貢献、社員のDX人材化、応援する社員も含めた一体感(前回実業団参加したアフレル社長小林さん談)

そうはいっても難しそう?大丈夫です!スイッチを入れたら前進して、センサーが反応したら止まるロボットプログラムはわずか3行!

1 OUT 33 2 IF ANA(2)<500 CONT 3 OUT 0

1. OUTでモーター制御して前進
2. IF(もし)とIN2につないだアナログ(ANA)センサーの値が500より小さければ、もういっかい(CONT)
3. OUTでモーター制御して停止

まずは見様見真似でOKです。プログラムの通り動くロボットを目の当たりにすると、大人も感動できるんです。 こればっかりはテキストでも動画でもVRでも伝わらないので、ぜひ一度、ご体験ください!


こどもプログラミング実業団 募集!説明会動画 - 福井県こどもプログラミング協議会
個人での応募ももちろん歓迎です。未来と社内のDX人材育成にご興味ある企業や学校、自治体など組織の方、お気軽にご相談ください!

福井県こどもプログラミング協議会へメールする → fkpc@kani-robocon.com>

コンピューター言語」を使ってコンピューターとはなそう!
キーボードが気に入った1歳児でも使えるBASICよりも更に優しく、音のフィードバックが楽しい MML(エムエムエル)がオススメです。

10 CLS 20 INPUT S 30 PLAY #901 40 IF SOUND() CONT ELSE RUN RUN

IchigoJam BASICで4行プログラムして、実行。入力待ちとなるので、CDE と入力してエンター。ドレミと鳴ります!(RUN on IchigoJam web)

CDE2CDE2GEDCDED2

チューリップ(基本は4分音符、数字を付けると長さが変わる)

T200CDE

テンポ200で速く!(標準はT120)

CDE>CDE<CDE

オクターブアップとオクターブダウン
IchigoJamで音楽づくり PSG単音での音遊びから、MIDIキーボード&MIDI音源をつないだ本格DTMまで

MMLは解釈できない文字で停止するので、デタラメ入れても壊れにくいので安心。おもちゃにどうぞ!


IchigoJam BASIC 1.5b07 ファームウェア (RISC-V版 IchigoJam R用)
- IchigoJam 1.5β7
シリアル通信のポートをプルアップに変更
(書き換えには IJUtilities が便利です)

ゲームライブラリ整備計画、egcanvas.js に続き、サンプルゲーム用のステキ素材を発見!

egcharmaker
ぴぽや倉庫さんのモンタージュ合成可能なキャラクターを使ったwebアプリを作り始めました。 まだまだ荒削りですが、パーツを選んで、いろんなキャラクターを作れます!(ちゃんと作成するには、chracter.xmlのorderに従った並び順の調整が必要ですが、未対応)

ドット絵ならではのかわいさがありますね!

営利利用も加工もOK、素材としての販売だけは禁止という、オープンデータに近いライセンス体系。 参考に新たなキャラクターを描くのも楽しいかもしれませんね! (素材利用規約 - ぴぽやblog

ディレクトリ(フォルダ)構造の素材データをjson化するDeno用ライブラリ dir2json.js を使った makejson.js によって作成する res.json を使ったwebアプリ。 RPGを作りたい小中学生向けに協力したい方、大募集!(src on GitHub

小中学生の実装力を鍛える、PCNこどもプロコン2021のふりかえりと次の計画ミーティング。 今回もたくさんのステキな作品あつまりました。

IchigoJam BASICや、Scrtachからのステップアップにイチオシはプログラミング言語は、JavaScript。
- 創った作品を簡単に公開でき、パソコンでもスマホでも動く
- 機械学習(AI)を気軽に使える(Tensorflow.jsはじめのいっぽ
- サーバーサイドでも使える(Denoはじめのいっぽ
- オープンソース共有サイト GitHub で最も使われているプログラミング言語(GitHut考察

とはいえ、最新の言語は変化も激しいので、陳腐化してしまった古い教材が多いのが問題です。
ということで、小中学生のプログラミング言語ステップアップ用に新たなゲームライブラリ整備計画をスタート!


egcanvas demo 1 - touch

小中学生憧れのスマホ、PCゲームづくり。まずはスタンダードな2Dゲームをサクッと作成できるライブラリ egcanvas.js として公開。 ダウンロードして、HTMLを開くだけでブラウザで動き、改造し、試せます。
egcanvas.js 1.0.0(200KB)」

はじめのいっぽ、文字を真ん中に出すプログラム

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>egcanvas.js demo</title> </head> <body> <script type="module"> import { createEgCanvas } from "https://js.sabae.cc/egcanvas.js"; const c = createEgCanvas(); c.draw = (g, cw, ch) => { // cw ch は画面の幅高さ、gを使って描画 // 線を引く g.setColor(255, 0, 0); g.drawLine(0, 0, cw, ch); // 画面中央に文字 g.setFontSize(cw / 20); g.setColorHSL(90, .6, 0.5); g.fillTextCenter("hello egcanvas.js", cw / 2, ch / 2); }; // ひとまず最初に描く c.redraw(); </script> </body> </html>

import / export を使った、ピュアなJavaScriptのESモジュールを使っているので、ライブラリを辿るのも簡単です。

import { createFullCanvas } from "./createFullCanvas.js"; import { extendGraphics } from "./extendGraphics.js"; import { extendUI } from "./extendUI.js"; const createEgCanvas = () => { const c = createFullCanvas(); extendGraphics(c.g); extendUI(c); return c; } export { createEgCanvas };

フルスクリーンのCanvasを作成して、CanvasAPIベースのグラフィックとUIを拡張しています。extendGraphics.js を見ると、どんな描画ができるか確認できます。

何かステキな名前をつけて、コンパクトで優しく楽しく学べるプログラミング環境を作っていきます!


egcanvas.js on GitHub
どなたでもお気軽にコントリビュートください!

これを機にwebアプリにチャレンジしたい、高専生、オンライン勉強会やりますよ!
【オンライン開催】jig.jp勉強会&会社説明会 ~募集のお知らせ~

祝!福井高専、ディープラーニングコンテスト、優勝!
福井高専がディープラーニングコンテスト優勝しました!

4/15、イチゴの日。IchigoJam 1.5系ではなく、Arm LPC1114の1.4系のファームウェアのちょっとバージョンアップ。
- IchigoJam 1.4β27 - ファイル3書き込み不可バージョン
ファイル3を書き込み禁止に(ファイル0〜ファイル2が使用可能)
(ichigojam.bin ユーザーファイルなし、ichigojam-withexchg.bin ファイル3にキーボード日本語英語切り替えプログラム付き、ユーザーファイルを上書きします)
起動時にNTSCビデオ信号出力するまで少し待つ処理を追加


今回のファームウェア改造は、キーボードをいろいろ入れ替えながら使う、IchigoJamを使ったプログラミング教室からのご要望でした。 容量カツカツのArm向けでは難しいですが、RISC-V版ではファイルごとの書き込み禁止実装はアリですね。 ぜひ細かなご要望、お寄せください。

コンピューターをフルに使い切るプログラミングを低レイヤー開発と言います。楽な言語でwebアプリづくりをサクサク楽しめるのも、低レイヤーあってこそ!

低レイヤー、高レイヤー、どちらも楽しい、プログラミング!

PanCake webIchigoJam web とつながりました。
IchigoJam web + PanCake」誕生!

まずはかわいい背景画像の変更から。数は 00 から 07 まで対応しています。

?"PC IMAGE 01

下記のような簡単なプログラムで、カラフルな絵を描けます。

10 ?"PC IMAGE 00" 20 ?"PC LINE ";HEX$(RND(80),2);" ";HEX$(RND(45),2);" 28 16 ";HEX$(RND(16),2) 30 GOTO 20

HEX$は、マシン語講座などで必須な数を16進法表記にするコマンド。2つ目のパラメータで、桁数を指定しています。

?HEX$(15) F ?HEX$(15,2) 0F ?HEX$(15,4) 000F

スプライトもOK!

IchigoJamのコンソール(IchigoJam REPL)でいろいろ遊んでみましょう

(コマンドは PanCake公式リファレンス へ)

複数のスプライトを登場させて、競争させる風のプログラム。

5 ?"PC SPRITE START 04" 10 FORI=0TO4:LET[I*2],80,I*9:NEXT 20 FORI=0TO4:?"PC SPRITE MOVE ";HEX$(I,2);" ";HEX$([I*2],2);" ";HEX$([I*2+1],2):[I*2]=[I*2]+1 25 IF[I*2]>80 [I*2]=-RND(20):?"PC SPRITE CREATE ";HEX$(I,2);" ";HEX$(RND(#30),2) 30 NEXT 40 GOTO 20

IchigoJam + PanCake の練習や、教材づくりにどうぞ!

PanCakeのもうひとつの機能、サウンド機能も PC SOUND1 対応!(Thanks @yrm__

?"PC SOUND1 00 03 40 ?"PC SOUND1 00 03 FF

ボーっと音が鳴ります。

links
- IchigoJam web + PanCake
- PanCake

沖縄市に熱いスポット誕生、4/3にオープンHanaわらび


こどもも大人も、楽しく学ぼう、コンピューターを仲間に未来を切り拓く力!


なんと年長さんの頃、はんだづけワークショップにも参加したという男の子、自分で探求する姿が頼もしい。 パソコン、スマホ、タブレットで楽しめる「IchigoJam web」と動画で思う存分やってみよう! はんだづけして自分だけのパソコンづくりもオススメ。


IchigoJam はじめのいっぽ (slide on GitHub)」のコツと、その次講座。腕試しの「PCNこどもプロコン」に向けた、Hanaわらびでのミニハッカソン&発表の練習「プログラミング大喜利」をオススメ。 その場で5分、みんなで「おきなわ」をテーマにやってみました!

オススメコマンド

CLS LC 10,10:?"OKINAWA" WAIT 60 GOTO 10 VIDEO 3 VIDEO 4 BEEP RND(20)

まずは、シンプルに画面をあやつるところからスタート。初心者から上級者まで、熟練度に応じて楽しめます。


IchigoJamのたのしみかた」(slide on GitHub)
こちら、講師向けの資料、オープンデータとして公開。
大人も楽しいコンピューターは、子供にとってはヤバいくらい楽しい。


Hanaわらび発のいろいろ、お楽しみに!


PanCake web
ついにスプライト対応!反転や回転、ユーザー定義スプライトにも対応したので、次はいよいよ IchigoJam web との接続にチャレンジします。


想像力を掻き立てるモノクロ表現で練習したら、16色カラーを使った表現にチャレンジするのもいいですよ!
小説、俳句、キャッチコピーの感動と、気合の入ったフルCG映画での感動、データ量は桁違い違いますが、感動する度合いは創る人、受ける人次第。

links
- 祝、沖縄市にオープン、Hanaわらび!すべての世代に可能性を! IchigoJamレベルメーターとMSX BASIC入門

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