はじまりました、Code for Japan Summit 2021！今年は9/18-19の2日間

「Code for Japan Summit 2021」アーカイブ、見られます。


音楽とプログラミングについて講演されたおんがくふぁくとりー、さかいりょうたさんの「作曲から考える子どものプログラミング思考について」にて、紹介されていた「俳句のうたの作り方」、音の周波数を12音階に分けた平均律から、更に5音だけ使うペンタトニックというテクニック。


サイコロを使ってメロディを入れる方法がおもしろい！


「障がい者とプログラミング　そしてシビックテック(動画アーカイブ)
イトナブ、古山さん！ITを学ぶ、遊ぶ、営む、イノベーションからイトナブ、ステキな名前！


IchigoJamを使って、早速ペンタトニックを鳴らしてみました。（IchigoJam webの場合、「AUDIO ON」ボタンを押して音を出します）
CDEFGAB = ドレミファソラシ、に対応するので、CDEGA（ドレミソラ）がペンタトニック。


「PENTATONIC DICE on IchigoJam web」
ボタンを押す毎にランダム(RND)にペンタトニックを鳴らすプログラム、おー、作曲がちょー簡単！（IchigoJam webでは、画面タップでボタンを押したことになります。）


「ペンタトニックダイス - pentatonic-dice」src on GitHub
iPhone/iPad/PC用のウェブアプリとして、JavaScriptでも作ってみました。
俳句に合わせて、自分の名前に合わせて、ボタンを押すだけで、誰でもかんたんに作詞作曲を楽しめます。

JavaScriptでのプログラムもIchigoJamプログラマーならそんなに難しくありません。核になるプログラムはこれだけ！ <!-- レイアウト --> <h1>ペンタトニックダイス<div>pentatonic-dice</div></h1> <button id="play">ならす</button> <!-- ロジック --> <script type="module"> import { Tone } from "https://taisukef.github.io/Tone.js/Tone.mjs"; // https://tonejs.github.io/ import { rnd } from "https://js.sabae.cc/rnd.js"; const evt = play.ontouchstart ? "ontouchstart" : "onmousedown"; play[evt] = () => { const tone = "CDEGA"[rnd(5)]; const synth = new Tone.Synth().toMaster(); synth.triggerAttackRelease(tone + "4", "4n"); play.innerHTML = "ならす<br>" + tone; }; </script> 動き（レイアウトとロジック）ができたら、あとはCSSを使って伝えたい相手に合わせてスタイルを決めるだけ！
何色にする？文字の大きさはどのくらい？主に使うのはiPhone？iPad？縦？横？まずは使う人やデバイスを1つに絞って調整するのがオススメです。


はじめてのプログラミングから、エンジニアチームと一緒のガチ開発まで幅広くサポートするイトナブ。 そのはじめのいっぽ的位置づけ「ナブかつLAB Seeds | プログラミング教育を子どもたちに。」ではIchigoJamが使われています。 IchigoJamでプログラミングのおもしろさにはまったら、JavaScriptでスマホアプリづくりへGO!


小学4年生の女の子、IchigoJamを使って好きなアイドルの曲を作ってお母さんに聞かせてあげたそう！

自分で作れる喜び、それによって広がる未来に向けたワクワク、どんどん広げていきましょう！
Let's code for!

二日目、9/19日14:30-、Code for FUKUI、森田さん、登壇です！
「場学実「お寺でのステューデンテックから始める、シビックテックへの挑戦」 | Code for Japan Summit 2021」 links
- Code for Japan Summit 2021

今年2回目の地域ICTクラブ全国ネットワーク交流会、基調講演は、CoderDojo 宮島さん！

ポケモンなど企業との連携による取り組みがおもしろいCoderDojoは、7〜17才のこども達が無料で学べる「子どものためのプログラミング道場」。Railsで作られGitHubでオープンソースになっているウェブサイト、「近日開催の道場まとめ - CoderDojo Japan」から地域別で開催日が確認できてステキです！

「CodeDojo Kata」で紹介されていた「まよえるニンジャのためのやりたいことさがし」がステキだったので、オリジナル版を作ってみました。

「プログラミングガイド」src on GitHub
「ゲームはすき？」で始まり「はい」か「いいえ」で答えるだけで、プログラミングの世界へといざなうイメージで作ったものです。

「prog-guide/data.yesno.csv at main · IchigoJam/prog-guide」
質問文と遷移先を記述したシンプルなCSVデータ(yesno.csvデータ)を読み込んで動くウェブアプリなので、GitHubでforkしていろいろと派生版づくりの元ネタにもお使いください。

ウェブアプリもシンプルなHTML1ファイル構成。前半がJavaScriptによるプログラミング部分、後半のデザイン部分は画面構成を記述するHTMLと見た目を変更するCSS。 特別なツールなしに、誰でも気軽にチャレンジできます！ <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>プログラミングガイド</title> <!-- プログラム --> <script type="module"> import { CSV } from "https://js.sabae.cc/CSV.js"; import { waitClick } from "https://js.sabae.cc/waitClick.js"; const reload = async () => { await waitClick(retry); document.location.reload(); }; onload = async () => { reload(); const data = CSV.toJSON(await CSV.fetch("data.yesno.csv")); let cur = data[0]; for (;;) { if (cur.no == "-") { no.style.display = "none"; yes.textContent = "つぎへ"; if (cur.yes == "-") { yes.style.display = "none"; } } else { no.style.display = "inline"; yes.textContent = "はい"; } if (cur.url) { q.innerHTML = `<a href=${cur.url}>${cur.label}</a>`; } else { q.textContent = cur.label; } const ans = await waitClick([yes, no]); if (ans == 0) { cur = data.find(d => d.id == cur.yes); } else { cur = data.find(d => d.id == cur.no); } } }; </script> <!-- デザイン --> <link rel="stylesheet" href="https://code4fukui.github.io/neomo.css/neomo.css"> <style> body { text-align: center; padding: 0 40px; } h1 { font-size: min(7vw, 65px); } body { max-width: 800px; } #q { font-size: min(5vw, 40px); margin: 1em; height: 4em; } button { font-size: min(5vw, 40px); margin: 1em; } </style> </head><body> <h1>プログラミングガイド</h1> <section><section><section> <div id=q></div> <button id=yes>はい</button> <button id=no>いいえ</button> </section></section></section> <br> <button id=retry>リトライ</button> <hr><a href=https://github.com/ichigojam/prog-guide/>prog-guide on GitHub</a><br> </body><html> 楽しもう、広げよう、プログラミングの輪！

キーボードが得意になるはじめのいっぽのA-Zタイピングゲームほこちら

1 ?"AｶﾗZﾏﾃﾞ ﾊﾔｸｵｽ!" 20 CLT:C=ASC("A") 30 ?CHR$(C); 40 IF INKEY()!=C CONT 50 C=C+1:IF C<=ASC("Z") GOTO30 60 T=TICK():?:?"TIME:";T/60;".";T/6%10 70 ?"SPACEﾃﾞ ﾓｳｲﾁﾄﾞ" 80 IF INKEY()!=SPACE CONT 90 RUN

データ活用に欠かせないのはつなぐこと。複数のデータを比較し、組み合わせて、新たな知見を生まれます。

その足かせとなるのはデータ形式の不一致。数と一言で言っても半角全角、カンマ区切りの有無、小数を含むかどうか、万など漢数字表記の有無など、個性豊かな様々なデータ達・・・。

もちろんコンピューターなので、様々な表記方法を想定して対応することは可能ですが、網羅性を保証できず、膨大なデータ量に対する処理では何十倍ものコストとして跳ね返ります。 同じ手間ならデータを作る際にかけるのが効率的です。

どうデータ形式の定義するか？ベストはリソース記述フレームワーク(RDF)の語彙を使うことでしょう。 Googleの検索エンジン他で使用されるスキーマオルグ(schema.org)や、Facebookが提唱し一般化したオープングラフプロトコル(OGP)、日本政府が提唱する共通語彙基盤もその一種です。

語彙でつながるオープンデータを、LOD(エルオーディー/Linked Open Data)、5つ星オープンデータと呼びます。

5つ星オープンデータ/LOD 3基準

1. リソースとデータ項目(語彙)をURLで表現する
IDではなくURL。アクセス可能なURLを使用する。
自分のリソースのURLは、自分で編集可能なドメインを用いる。

2. 共通の語彙の利用
語彙は正しく、できるだけ既存の語彙を使う。（schma.org/url）

3. 外部リンク
できるだけ外部リソースへのリンクを含める。（SNSやWikidataへのリンク）

ただ、まだまだRDFへの理解が浸透していないため、まだちゃんとしたデータは多くはありません。よりシンプルに作りやすくするためのツール整備を進めました。


「NQuads.js」
語彙を含んだLODのJSON表現、JSON-LDを扱うライブラリjsonld-esを、Node.js用のライブラリjsonld.jsから移植。 依存ライブラリを次々と全部ESモジュール化して、GitHub Pagesとして公開。 require表記をgithub.ioを使ったURL importに書き換えたので、全ソース、ブラウザでも使用可能になりました。ESモジュールはDenoモジュールとしても使えるので、Denoでサクサク活用可能です！

NQuads.jsは、LODのテキスト表現「N-Quads」をJSONLD.jsを使って作成。 import { JSONLD } from "https://taisukef.github.io/jsonld-es/JSONLD.js"; class NQuads { static async parse(s) { return JSONLD.fromRDF(s, { format: "application/n-quads" }); } static async stringify(json) { return JSONLD.toRDF(json, { format: "application/n-quads" }); } } export { NQuads }; コアはこれだけ。JSONLDをimportして使うだけのライブラリなのでとってもシンプル！
ちゃんとしたオープンデータを増やしましょう！


データ活用はじめのいっぽ、コンピューターとプログラミングへの入り口、IchigoJamのファームウェアの不具合修正
- ichigojam-1.4b29.zip
OUT11,0が効かない不具合修正（OUT11、IN4を出力に切り替えて使う場合の番号です）


福井県独自の緊急事態宣言最終日、ランチは通常営業だった鯖江駅前商店会「惣」でタコライス！

先日会ったアフリカ人、ict4eへのインターン生ビドさんが、IchigoJamプリントのフランス語版、作ってくれました！

「IchigoJamプリント - フランス語版」
IchigoJamプリントは、その名の通り紙として印刷も想定した教材（もちろん、PC、タブレット、スマホでもどうぞ）。 印刷用のPDFへの変換にヘッドレスChromeとPDF結合ツールnode用の「PDFManager」を使っていました。中身はJavaでできたApache PDFBoxだったので、Denoに移植。

「taisukef/easy-pdf-merge-deno: A module to merge PDFs for Deno」
本家がメンテナンス終了していましたが、deno版として勝手に引き継ぐ形としました。結合だけでなく、PDF関係でいろいろ使えそうです。

ヘッドレスChromeのフロントエンド、deno-puppeteer、Macでも普通に使えました！
「Denoでpuppeteerを使う (windows) - Qiita」
これで巨大なnode_modulesと付き合う機会が減りますね。


「make deno version · IchigoJam/print@2ffd20c」
揃ったので、NodeからDenoへ変換してできあがり！

deno run -A --unstable makepdf.js

Denoを使って、IchigoJamプリントの全ページを自動でブラウジングしながらPDFへ一括変換できます。


「【レポート】アフリカ人留学生のインターンシップを実施しました | ict4e」
ベナン共和国からはるばる日本へ来てくれているビドセスィ エマニュエル アゴス（Bidossessi Emmanuel AGOSSOU）さん！


ビドさん、フランス語版、ありがとう！
コンピューターの楽しさ、アフリカのこどもたちにも伝えよう！PCNこどもプロコンでは、世界中のこども達からの作品、お待ちしてます！


「IchigoJam web でプログラミング体験！ - YouTube」
コロナでリアルイベントがなかなかしづらい状況が続きますが、IchigoJamはブラウザだけあれば無料で体験できます。 IchigoJam web を使ったはじめてのプログラミングから、ゲームづくりまでの30分動画（jigインターン生向けに実施＆収録）。 ぜひ自分で打ち込みながらご覧ください！（高専生向けスピードなので、追いつけなければ一時停止、遅すぎであれば再生スピードを速くするなどでどうぞ！）

今年はオンライン開催となった政府によるこども向けイベント、夏休み恒例「こども霞が関見学デー」。 文科省のプログラムに、動画で疑似体験するIchigoJamとして参加しています。小さくてもスゴイ、コンピューターのパワーは、実機を触って試してもらうのが一番ですが、その片鱗を動画やエミュレーターでその片鱗に触れてみましょう。


「☆令和３年度　「こども霞が関見学デー」　8月18日・19日　土曜学習応援団プログラム☆ - 学校と地域でつくる学びの未来」
企業から提供されている就学前、小学生、中学生、高校生向けのプログラムが紹介されています。


「プログラミング教材「IchigoJam（イチゴジャム）」の使い方とデモンストレーション - YouTube」
動画と合わせて学ぶ、はじめてのプログラミング、ブラウザで、IchigoJam web を開き、一緒に動かしながらご覧ください。 大人の方もぜひどうぞ！


jigインターンも折り返しの3日目。夕方16時からの30分、気分転換としてお届けしたIchigoJam webを使ったプログラミング教育体験会。 ゲームづくり、学生にも楽しんでもらえました。（「⭐jigintern diary⭐」3日目）

BASICのいいところ
1. アルファベット小文字は知らなくてOK！（キーボードは基本大文字）
2. コマンドが短く、打つ文字数が少ない！（慣れてないと打つのが大変）
3. 覚えることが少ない！（BASICは対話ターミナルの祖！）

なんと、今年のインターン生のあろーから、任天堂SWITCHで動くBASIC、プチコン4のSmileBASIC版Geo3x3のプルリクが届きました！

BASICから派生したSmileBASICで実装された、Geo3x3の緯度経度のコード化アルゴリズム。


別ファイル呼び出しで関数を読み込んでいます。（プチコン3号とプチコン4でちょっと違う）


動作、完璧！対応82言語目としてマージしました！

せっかくなので、BASICの日として、MSXでお世話になったマイクロソフト製のVisualBASICとは別系譜のBASIC、Small Basic版Geo3x3の実装してみました。

「Microsoft Small Basic Ever Kids Can Code」
Small Basicにも、IchigoJam web 的な、オンライン開発環境があります。


「Small Basic」
Windowsであれば実行ファイルをコンパイルしてくれるソフトもダウンロードできます。ループ脱出に使ったGOTO用ラベルがオンライン版だと重複OKだったものが、ネイティブ版だとNGという違いがありましたが、両対応完了です。 (src on GitHub)

Small Basicは、元祖BASICとVisualBasicの間で、VisualBasic寄りな感じです。 変数はすべてグローバル、関数的なものはパラメータが付けられないサブルーチンのみなので、IchigoJam BASIC同様、小規模プログラム向け。 ただし、組み込み関数の名前はVisualBasic並かそれより長めで、打つ文字は長くなり勝ち。エディタ上で常時エラー検出していて、動かす前に間違いが分かるのは新設でいい感じ。

Let's begin program from basic!

福井高専主催、ものづくりを通して将来の研究者（ドクター）を発掘・育成するための小中学生向けプロジェクト「クラフテックラボ」30のプログラムのひとつ「はじめてのプログラミング」講座を開催。
福井県内の「ものづくり好き小中学生」大集合！


LEDを自分の思うようにつけたり消したり、繰り返したりするプログラミングを通じて学ぶ、コンピューターの本質。 とんでもなく速い計算力と記憶力を持つコンピューターくん。使用教材にこどもパソコンIchigoJam。 アルゴリズムや、アプリづくりの要を学ぶテレビゲームづくりも大盛況。


「メモリになってみよう」src on GitHub
今回の講座で触れた、コンピューターの記憶、メモリの秘密を体験できるアプリを作ってみました。 オセロのコマように裏か表か、0か1かで記憶するのがコンピューターのメモリ。16コ使うと0から65535の65536通りの数を表せます。 この1つを1bitと呼び、この16bitはIchigoJamの変数と一緒です。LED65536で消えるヒミツ、分かったかな？

今回使ったプログラミング言語、IchigoJam BASICで慣れたら広がる、本格プログラミングの世界。このゲームはJavaScriptという言語でできています。 ゲームのコアの部分を見てみましょう。(index.html) // main let bk = 0; for (let i = 0; i < 10; i++) { const max = i < 2 ? 9 : i < 5 ? 99: i < 7 ? 999: i < 9 ? 9999 : 65535; const n = rnd(max) + 1; if (n == bk) { // 前回と被ったらやりなおし i--; continue; } bk = n; qdiv.textContent = n + "をおぼえてね"; while (n != await waitChanged()); qdiv.textContent = n + "、おぼえた！"; await sleep(1500); } qdiv.textContent = "ぜんぶできた！"; 近いもの、感じませんか？


「はじめてのプログラミング with IchigoJam - スライドPDF」
福井高専電子情報工学科棟の隣、専攻科棟の3Fと4Fに分かれた会場、オンラインでつなぎつつ、両方の教室を見て回るスタイル。「IchigoJam web」と合わせて、自宅でもトライ！


こども達に大人気だった、セグウェイドリフトもコンピューターを使った応用例。


みんなが好きな「ものづくり」にプログラミングをプラス！

小中学生向けのチャレンジ、PCNこどもプロコン、越前がにロボコンもどうぞ！

情報発信のいいところは、良い情報が得られること。

SNS用画像生成に関して、@imabarizineさんに教えていただいたpuppeteerが良い感じでした！ 情報のご提供、ありがとうございます！

夏休み、鯖江のHana道場ではこどもパソコンIchigoJamのはんだづけワークショップが開催されてました。

楽しくヤバイ、自分だけのパソコンをゲットしたら、ちょっと突っ込んで遊ぶためのIchigoJamプリントもオススメのひとつ。 puppeteerを使ってPDFまとめも作りました！

「IchigoJamプリント」
PDFダウンロードに対応！スマホや、タブレットで見るときはHTML版でOKですが、印刷にはPDF版が便利です。


日本語(80枚)、英語(36枚)、ルワンダ語(35枚)、スワヒリ語(34枚)、4ヶ国語で学べる、IchigoJamプリント！

IchigoJam BASICで、プログラミングに慣れたら挑戦しよう、いろいろ作れるJavaScript。指定URLのリンクをたどって全ページPDFにするプログラムのコアはこちら。 const makePDF = async (browser, url, dstfn) => { const html = await (await fetch(url)).text(); const dom = HTMLParser.parse(html); const links = dom.querySelectorAll("a").map((a) => a.attributes.href).filter((a) => a.endsWith(".html")); const format = "a5"; const page = await browser.newPage(); const pdfs = []; for (const link of links) { await page.goto(url + link); const path = "temp/" + link.substring(0, link.length - 4) + "pdf"; pdfs.push(path); await page.pdf({ path, format }); } await mergeAsync(pdfs, dstfn); }; fetch(フェッチ、データの取得)して、parse(パース、文字解析)してリンク(links)を抽出して、リンクの数だけブラウザでその開いてPDF保存を繰り返し(for (const of links))しています。

IchigoJam BASICも、JavaScriptも同じコンピューターとのお話なので基本は一緒。まずはシンプルな言語でタイピングとプログラミングに慣れちゃいましょう！

SDGS、一番最初の目標「貧困をなくそう」を達成するにはどのような社会にするといいのでしょう？
「富の分布のシミュレーション」
平等にコインを持った状態でスタートし、1日に1度、ランダムに出会って2人が五分五分で1枚だけコインを交換するものを繰り返すと、富が大きく偏ります。 1枚ではなく、所持コインの10%、20%などと大きくするほどに、偏りがでる速度が増します。100%、つまり総取りにするとあっと言う間に世界で1人だけが全部持っていってしまうので、すべてはその中間ということです。

「じゃんけんゲームシミュレーション」src on GitHub
JavaScriptで作ったかんたんなシミュレーションツールです。

- 勝敗がランダムではなく実力で決まるとしたらどうなるでしょう？
- お金持ちから税金を徴収し、所持金0になった人に分けるとどうでしょう？
- 勝負に参加しない人がいるとどうなるでしょう？
- 1日に1勝負ではなく1秒に1勝負発生するとしたらどうなるでしょう？
- 定期的にリセットしてみてはどうでしょう？

こどもパソコンIchigoJamでもシミュレーション可能です。

100 FORI=0TO99:[I]=100:NEXT 110 T=0 120 FORN=0TO99 130 M=RND(100) 140 IF N=M GOTO130 150 IF N<M B=[N]/10 ELSE B=[M]/10 160 R=RND(2) 170 IF!R [N]=[N]-B:[M]=[M]+B 180 IF R [M]=[M]-B:[N]=[N]+B 190 NEXT 200 T=T+1 210 ?T 220 FORI=0TO99:?[I];",";:NEXT 230 GOTO120

社会を形作るルールを作るのは私達。
理想のルール、探りましょう！

links
- 成功を決めるのは「才能」でなく「運」　驚きの研究結果発表 | Forbes JAPAN（フォーブス ジャパン）
- 富の分布のシミュレーション
- ｢格差は不当｣と憤る人が気づいてない過酷な摂理 | リーダーシップ・教養・資格・スキル | 東洋経済オンライン | 社会をよくする経済ニュース

感動的に短いテトロミノ落ち物パズルゲームの知恵、IchigoJamでのゲームづくりに応用してみましょう。

まずは、下記JavaScriptで作られたテトロミノを生成部をIchigoJam BASICの配列を使って再現してみます。 B=[[-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2] IchigoJam BASICで書くとこんな感じです

10 W=32:LET[4],-W+1,-W*2,2,W+1,-W-1,-1,-1 20 T=0 30 LET[0],0,1,[4+T],(2+W)*(T=6)-W 40 CLS:FORI=0TO3:POKE#A2C+[I],1:NEXT 50 WAIT30 60 T=(T+1)%7:GOTO30

全7パターンのテトロミノが表示できました！(RUN on IchigoJam web)

使いやすいようにサブルーチンとしてまとめます

100 @INIT 110 W=32:LET[4],-W+1,-W*2,2,W+1,-W-1,-1,-1:RTN 120 @SET:'T 130 LET[0],0,1,[4+T],(2+W)*(T=6)-W:RTN 140 @PUT:'X,Y 150 FORI=0TO3:POKE#900+X+Y*W+[I],T%4+1:NEXT:RTN

このサブルーチンを使った単純表示するプログラムはこちら

10 CLS:GSB@INIT 20 T=0:X=15:Y=10 30 GSB@SET:CLS:GSB@PUT:WAIT30 40 T=(T+1)%7:GOTO30

回転する機能を追加します（2つの条件処理がいまいちですが・・・）

160 @ROT 170 FORI=0TO3:A=[I]%W:A=A+2*A*(A>15):[I]=A*W-[I]/W 180 IF[I]=-992[I]=33 190 IF[I]=2976[I]=-33 200 NEXT:RTN

回転を加えた表示プログラム差分

30 GSB@SET:FORR=0TO3:CLS:GSB@PUT:WAIT30:GSB@ROT:NEXT

何か作れそうな気がしてきましたね！

ひとまずテトロミノをランダム表示するスクリーンセイバーを作ってみました。

10 CLS:GSB@INIT 20 T=0:GSB@SET 30 X=RND(28)+2:Y=RND(19)+2:GSB@PUT 40 IF RND(4) T=(T+1)%7:GSB@SET ELSE GSB@ROT 50 GOTO30


重なり判定があればパズルゲームなどにできそうですね！
腕だめしに実装してみましょう！

この6行のHTML/JavaScriptは、何のプログラムでしょう？ <body onload='onkeydown=e=>K=parseInt(e.key[5]||6,28)/3-8;Z=X=[B=A=12];Y=_=>{ for(C=[q=c=i=4];f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0: K+6?h+=K:B=C;i=K=q--;f+=Z[A+p])X[p=h+B[q]]=1;h+=A;if(f|B)for(Z=X,X=[l=228],B=[[ -7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[l]:(P++, c=l+=A);--c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228)?i% A?"■":"■<br>":"　");D.innerHTML=S+P;setTimeout(Y,i-P)};Y(h=K=t=P=0)'id=D> なんとこの1ファイルだけで動く有名某ゲーム！

「6lines (src on GitHub」（遊ぶにはキーボードが必要です）
左右キーで移動、スペースで回転、1行揃えると消え点数加算。リトライはリロード（他のキーを押すとおかしなことになるのはご愛嬌、下キーとか押さないで！）
信じがたいですが、ちゃんとゲームとしての一通りが揃っています。

初出は2002年、その後いろいろと改良されてきているようです。
「たった7行でテトリスを実装「七行プログラミング」とは - Qiita」

改めて見るとHTMLやJavaScriptの書き方が古いので、改善します。

関数宣言をモダンに変えて5文字削減！
function Y(){
↓
Y=_=>(){

問題はキー入力処理、keyCodeは非推奨なので、今後も動く保証がないので、keyを使って無理やり0,1,-1,-6を返す互換式を作成。ArrowRightの6文字目Rを28進数として数値化！
onKeyDown=K=event.keyCode-38
↓
onkeydown=e=>K=parseInt(e.key[5]||6,28)/3-8
でも、15文字も増えてしまいました。

ゲームとして保ったまま削れる部分を探して、下記の処理を省略して79文字6行達成！
- 2x2のテトロミノの場合回転しない処理
- 一度に消した際の点数ボーナス計算処理
- 詰まったらループを止める処理

感動的なのはテトロミノを生成する部分、0-6で7種類のテトロミノを表す長さ4の配列で表現しています。数は1次元化したフィールドの相対位置。IchigoJamでも使えそうなテクです！ B=[[-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2] 真ん中と右隣はどのブロックも共通なので0,1、4つ一直線のもの以外はそのもうひとつ右も共通。4つ目のブロック位置を相対位置で表してできあがり。 マイナスが付くことによる文字数増加を防ぐため、共通で-4する工夫と。ブロック出現ポイントを表す変数hに17をついでに入れているのもニクイ！

JavaScriptなので、1行にもできます。たった、464文字(470byte)しかありません。IchigoJamの1ファイル上限、約1,000文字より短い！ <body onload='onkeydown=e=>K=parseInt(e.key[5]||6,28)/3-8;Z=X=[B=A=12];Y=_=>{for(C=[q=c=i=4];f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h+=K:B=C;i=K=q--;f+=Z[A+p])X[p=h+B[q]]=1;h+=A;if(f|B)for(Z=X,X=[l=228],B=[[-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[l]:(P++,c=l+=A);--c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228)?i%A?"■":"■<br>":"　");D.innerHTML=S+P;setTimeout(Y,i-P)};Y(h=K=t=P=0)'id=D> コピペして、適当なHTMLファイルとして保存し、ブラウザで開くだけ。ぜひ自分のパソコン上で動かしてご確認ください。

こうしたプログラムを工夫するテクニックはMSX譲り。こどもの頃のMSXとの出会いに感謝！
「MSXユーザーのためのIchigoJam入門 - MSX Advent Calendar 2015」


先日開催された「高専インカレチャレンジ」
Nikko Open Innovation Labの磯野さん、鈴木さんと福井高専ご訪問。報告と今後についてご相談。 高専生たちが変わるきっかけになったことがうれしい！もっと実装力が上がるときっともっとスゴイ。 開発力を上げたい高専生「jigインターン」へどうぞ！


未来の創る人を創ろう「すべてのこどもたちにプログラミングを」の「PCN」年1のおまつり「PCNサミット」は、今年もひとまずオンライン開催。 全国のいろんなチャレンジと想いを持ったつながりが熱い！今年は日を分けて3日程開催、全国の地域ICTクラブとの交流も楽しみ！


本日の装備、いちごマスク別バージョン。
鯖江の呉服屋さん、まるよさんが創ってつくれました！

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