プログラミングシステム「ソックサーガ」を作ってみた

　この記事では、新しい中学校プログラミング教育に対応するシステム「ソックサーガ」を紹介します。ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作りました。ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステムをめざしました。未履修問題の解決に役立つかどうか、お確かめください。

⇒ お急ぎの方はこちらへ

中学校プログラミング教育は未履修問題が心配！？

　2021年度から中学校プログラミング教育が大きく変わりました。従来の「ディジタル作品づくり」から、「ネットワークを利用した双方向性のあるコンテンツのプログラミングによる問題の解決」となったのです。

　ネットワークがらみのプログラミングは、環境構築の困難さに加え、通信の遅れを考慮した非同期処理・競合解決、セキュリティ対策、OS・ブラウザ・言語の多様性への対応も必要となり、かなりハードルが高くなります。一般的にPHPなどの専用言語を用いたサーバーサイドプログラミングも必要になります。

→ 🔗 「ネットワーク」に「双方向」!?　倍増するプログラミングの学習内容に中学校の現場はどう対応するのか

　これに対応する教材はたいへん少ないのが現状です。

双方向性のあるコンテンツとは？

　双方向性のあるコンテンツとは、「入力に応答する、人間にとって意味のある情報の内容」です。ロボットを動かす情報はコンテンツではないし、プレゼンや動画などは双方向性のないコンテンツです。さらにコンテンツには、「デジタル化された文字，音声，静止画，動画などのデータを複合化」することが求められています。

　現代、作品・製品の多くがクリエーターとエンジニアの協力によって生まれています。どちらかといえば、双方向性はエンジニアの比重が、コンテンツはクリエーターの比重が大きいと言えます。もし両者の敷居を低くすることができれば、作品の質は飛躍的に向上するはずです。

技術の教科書が抱える深刻な問題

　技術の教科書には５つの実習例が出ていますが、どれも深刻な問題を抱えています。

• 『チャット』・『タイピング練習』は、コンテンツが利用者まかせで貧弱であり、作り手から提供される情報がない。
• 『ルート検索』・『英単語の発音チェック』は、魅力的なコンテンツではあるが、外部プログラムを呼び出して使っているだけであり、ほぼ何もプログラミングしていない。つまり、問題解決にプログラムを使っているが作ってはいない。
• 『防災地図』は、魅力的なコンテンツを双方向的に操作できる可能性があるという点ですばらしい。ただ、望む動作をさせようとした場合、直接 scriptタグ内を正確に書き換える必要がある。数時間の実習で理解して完成させるのは、生徒も教師も不可能に近い。
  

　『防災地図』以外の4つのアプリは、Scratch の利用を前提としています。小学生のプログラミング体験にはよくても、本格的な問題解決には向きません。本命は、高速・柔軟で共有・再利用できるテキストプログラミングです。いずれにせよ、「アイディアを形にするプロセス」が難しすぎたり、簡単でも制約が多すぎたりすれば、どの生徒の作品も同じようなものになり、評価が困難になるでしょう。

　このように、技術の教科書にある5つの実習例は、どれも深刻な問題を抱え、実施も評価も困難です。高い理想に現実が追い付かず、このままでは、ほとんどの中学校で「未履修問題」が発生してしまいます。ITエンジニアからも「教えられる先生はいるのか？という課題」が指摘されました。

→ 🔗 中学校の技術科の教科書(情報分野)が進歩していた件

プログラミングシステム「ソックサーガ」で解決

ネットワークプログラミングは、クラウド統合開発環境で解決

　ネットワークを利用したプログラミングをしようとすると、テキストエディタで編集→ローカルファイルとして保存→アップロード→ブラウザで確認という手順が必要となり、セキュリティの問題もからみ、煩雑でした。それを解決するのが 🔗Replit（リプリット） などの「クラウド統合開発環境」です。

　Replit の上でWebアプリを動かすことで、ビジュアルに複合コンテンツを作り、最小限のコードで双方向性を持たせるシステムを作ってみました。それが SocSaga です。即、サーガ（冒険物語）にいざなう…との願いをこめました。

　SocSaga を使えば、ローカルファイルを管理する必要がなく、環境構築の手間なしに直接Web上のファイルを編集でき、作品の中身と動作のロジックに集中することができます。　

コンテンツ作りは、ビジュアルHTMLエディタで解決

　HTMLの文法をマスターするには、相当の時間がかかります。ビジュアルHTMLエディタSocPadの出番です。

　ソックサーガ用SocPadは、ソックリッカー用SocPadを流用したものです。簡易ワープロ「ワードパッド」に似た操作で簡単です。見たとおりにHTML編集ができます。画像をReplitにアップロードして挿入したり、リンクを挿入したりできるので、メディアを複合化したホームページとして使えます。

• [保存] ボタンでFirebaseのデータベースに保存するかわりに、[ソース] ボタンを使い、指示に従って直接HTMLファイル内に貼り付ける。HTMLの文法を知らなくても、見たとおりにHTML編集ができる。
• <section></section> を追加すれば、新規スライドが追加される。
• sectionタグ内（<section> と </section> の間の部分）にソースを貼り付けると、スライドが保存される。
• 別のスライドを編集したいときは、 ～id="henshu">（番号）</span><!--　編集するスライド番号を入れる　-->　の番号部分を書き換え、スライド編集エリアの上の ↻ ボタンで更新する。更新すると、編集中のものは消えるので、ソースを貼り付けたか必ず確認すること。心配であれば、メモ帳などにもソースを貼り付けておくとよい。

…以上を繰り返して、スライドを１枚１枚作ってゆきます。

　スライドを作ったら、「編集エリア」の下の「実行エリア」でボタンを押してスライドを切り換えてみます。切り換え動作の設定は、次の『双方向性は、4色ボタン操作で解決』を見てください。

　すべてのスライドの内容・動作が完成したら、スライド番号部分に ０ を入れます。「実行エリア」だけが表示されるようになるので、URLを公開して人に見せることができます。

※ ソックリッカーでは、Firebase の Realtime Database にHTMLを保存し、Storage に画像をアップロードしました。ソックサーガでは、Firebase は使いません。授業配信アプリでは、ユーザーにソースコードや画像素材等を見せる必要はありません。しかし、プログラミング学習では、Replit上ではっきり見える形で取り扱わせる方がよいと考えました。sectionタグ内にソースをはりつけさせるのは、そのためなのです。

※ ソックサーガは、「生徒にWebアプリを作らせる」Webアプリです。コンテンツ編集・アプリ実行のためのJavaScriptは、ルートのssscript.jsにまとめて、生徒にさわらせないようにしています。編集モードから実行モードへの切り替えを「スライド番号部分に 0 を入れる」方法にしたのは、評価や指導をやりやすくするためです。

双方向性は、4色ボタン操作で解決

　ソックリッカーでは、TVのリモコンと同じ4色ボタンで投票します。ソックサーガも4色ボタンで操作することにしました。

　①動作は4色のボタンに割り当て、②飛び先は class属性で指定し、③必要に応じて動作を拡張する という ローコードプログラミング の手法で行います。 「順 次・分岐・反復」のスライド移動の基本命令は、 xgo(数); という関数で、数によって動作を変えるようにしています。

• sectionタグには、デフォルト(規定値)で、

data-nav="nav0:xp+'／'+xpsum; nav1:↑;xgo(-8); nav2:←;xgo(-1); nav3:→;xgo(1);nav4:↓;xgo(8);"

というカスタムデータ属性が設定されている。

• <section data-nav="nav1:先頭へ;xgo(-9);">

とすれば、青色のボタン1 だけ、先頭スライドへ移動するよう変更され、他のボタンはデフォルトのままとなる。nav数 のあとに コロン(:)、ボタン文字 のあとセミコロン(;)、そのあとは 命令1;命令2;命令3;…のように各命令のあとにセミコロンを付ける。二重引用符の中で引用符を使うときは、"nav0:xp+'／'+～" のように単一引用符を使うこと。

• 各章の始まりのスライドのsectionタグに class="hp" を入れておけば、デフォルトのままでも「プレゼンテーション」は十分可能。class属性を複数指定する場合は、class="hp bk3" のように半角スペースをはさむこと。
• Replitのコードエディタは、行番号の右の ▼ をクリックすることで折りたたむことができる。<section の行を折りたたんでスライドの中身を隠すと、属性の指定がやりやすい。

　ソックサーガは、Web標準技術に基づいたテキストプログラミングで主要な機能をラップすることで、入口が広く奥が深い学習を実現しました。将来にわたり役立つ情報活用能力が培われるでしょう。

※ ソックサーガは、プロトタイプを jQuery + Firebase Storage + Mery マクロ で作りました。2年間実際に授業してみて、問題点を洗い出し、Vue.js で書き直しました。「可能な限りWeb標準に従う」ことが大切と痛感しました。そのため、Vueのコンポーネントのかわりに「カスタムデータ属性」を使っています。data-***=""のような形式で、制作者が自由に指定できる属性です。独自のデータを入力したり、JavaScriptで処理したりできます。HTMLで定義されているグローバル属性なので、将来的に無駄になりません。

発展的な ソックサーガ の使い方（※ 余裕ができたら……）

① スライドの背景を指定する

• sectionタグのカスタムデータ属性に画像ファイルURLを指定。URLは、jisshu/img フォルダ内の画像一覧の画像を右クリックし、[画像アドレスをコピー]で。

data-bg="https://socsaga.hadano3.repl.co/jisshu/img/venndiag.svg"

② x関数・x変数でボタン動作を拡張する

• メッセージ表示：xmsg('メッセージ','入力文'); 入力文を省略したら alert 、'OK'なら confirm 、それ以外は prompt と同じ動作をする。戻り値はxmに代入される。
• 乱数：xran(数); 1～数 までのランダムな自然数を作る。数を省略したら 6 がはいりサイコロに使える。戻り値は、xr に。
• 待機：xwait(数); 数秒間待機してから次の命令を実行する。
• x変数：xc【クリックしたボタン番号】、xe【エネルギー】、xf【ファイル名】、xg【移動後のスライドナンバー】、xp【現在のスライドナンバー】、 xpsum【スライド総数】、xs【スコア】、xt【ターン数】、xu【ユーザーデータ】、xuu[数]【ユーザーデータ配列】…状態フラグとして使うのに便利な関数がある｛xuuon(数); フラグオン、xuuoff(数); フラグオフ、xuutog(数); フラグ反転｝、xcc[数]【ボタン無効化配列】…xuuと同様な関数でxcc[0]とxcc[番]をオンでボタン無効化、xccreset(); ですべて有効化。
• JavaScriptの命令がほぼ使えるが、コード量節約のため、ショートハンドを使うとよい。 if文のかわりに→三項演算子…など。
• テストボタンの data-test = “命令文” を書き換えて、ボタン動作のテストができる。

③ アニメーションで画面に躍動感を与える

• x関数の xanim(オブジェクト); でスライドの中の要素を時間を追って変化させることができる。アニメーションオブジェクトの書式は、anime.js に従う。戻り値は、xa に。
• Wick Editor というフリーのWebアプリで手軽に Gifアニメ を作ることができる。軽量化して使うとよい。

④ 同じフォルダのSocSagaファイルを x関数で呼び出し、クラス全員で共同制作する

• game03.html のスライド10番で xborrow(game05); を実行すると、game05.htmlが呼び出され、xback(); で game03.html のスライド11番に戻る。xbuy(game07); を実行すると、game07.htmlに接続する（戻ってこない）。
• xborrow、xback、xbuy で他のファイルを呼び出すとき、次の x変数の値は引き継がれる。→ xs　xe　xt　xu　xuu[]

⑤ HTMLファイル本体をカスタマイズ（html・css・JavaScript を書き換え）する

• 文字の大きさ→ --fontvw: 1.5vw;　、methods: に新しい x関数 を追加…など。
• スライド内容の一時的な変更は、x関数の xdisp(元の語,置換語,回数); で可能。
• SocPad以外で作ったHTMLは、原則SocPadでの編集はできないが、sectionタグ内に貼り付けることは可能。セキュリティ上の問題がなければ、iframeタグを使って他サイトのコンテンツを埋め込むことができる。--framewidthと--frameheightで幅と高さを指定できる。
• 無料ソフトでもCG作成ができる。Blender で3Dモデルを、Effekseer でビジュアルエフェクトを、Unity でアニメやゲームを作ることができる。Sketchfab などの CGコンテンツ共有サイトを利用することで、登録・公開ができる。

このような発展的な使い方により

　プレゼンだけでなく、クイズ・アドベンチャーゲーム・脱出ゲーム・すごろくなども作れます。

【まとめ】 ソックサーガ で 双方向性のあるコンテンツのプログラミング はバッチリ！

　ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作ったのが ソックサーガです。ローコードなので専門知識不要、「ディジタル作品づくり」＋α で取り組めます。５つの実習例とは違い、個性が出せるので評価しやすく、共同制作もできます。

　他教科や行事のまとめ・発表を兼ねたテーマにすれば、時間数不足も解消されます。無料で、自校運用できて安心で、かゆいところに手が届くシステムは、そうそうないと自負しています。

※ ページが表示されなければ、リロード（↻更新）してください。

※【注意】Internet Explorer 以外のモダンブラウザー（Chrome,Firefox,Safari,…）で、横置き画面で見ること！

• → 🔗 ソックサーガで作った、「ソックサーガの紹介Webアプリ」
• → 🔗 ソックサーガの紹介（印刷用）
• → 🔗 「英単語の発音チェックアプリ+AI作曲」

JavaScriptコードレシピ集 スグに使えるテクニック278　[ 池田泰延 ]

※ Web標準技術は時代とともに進歩しています。
ハダノは、jQueryからVue.jsに移行したとき、「イマドキのJavaScriptはこう書くんだ！」とカルチャーショックを受けました。
この本は、実践的な最新テクニックを網羅的に学ぶのに役立ちます。

楽天

Amazon

Yahoo!

次へ→　ソックサーガの始め方【自校運用】