プログラミングLT2018@東京・品川 2018/10/14

1. 荒川 奏良 (Sora Arakawa)
プログラミングLT2018@品川

2. ↑「HG創英角ﾎﾟｯﾌﾟ体」じゃないぞ！！
（DFP POP1体）

3. 荒川 奏良
(Sora Arakawa)
－ 2001年4月11日生まれ
－ 愛知県岡崎市在住
－ 高校2年生

4. 岡崎市能見町「中田屋」さんのかりんとうです。
「八丁ねぎ味噌」「シナモン」の２種類を用意しました。
是非食べてみてください。

5. ・2016年のプロ生@名古屋から使い始めた題名
・You&Iさん（プロ生名古屋支部長）のオマージュ
・ローカルルール「名古屋式LT」知ってますか？
→ 時間区切りでの強制終了が無い

6. ・10分って短くね？
→ 45分セッションに慣れると逆に大変
その代わりスピード感は出る
・界隈で「高認取って退学したい」が氾濫していますが、
今回は学校ネタでやります。許して。

7. 荒川 奏良 (Sora Arakawa)
プログラミングLT2018@品川

8. 荒川 奏良
(Sora Arakawa)
－ 2001年4月11日生まれ
－ 愛知県岡崎市在住
－ 高校2年生
－ それなりの学力
－ 平凡な体力

9. まず質問です

10. 高校の一大イベントと言えば？

11. 文化祭！
(※諸説あります)

12. ・愛知県三河地方にある公立高校（3学期制）
・文化祭は9月中旬に開催
→ 数年前から体育祭と同時開催している

13. ・ホームルーム教室を改造して展示会場にする
・テーマは自由（生徒指導部の審査有り）←ココ重要

14. ・男子生徒Mが担任教師にさらわれたから助ける
・ミニゲーム3つ（クイズ、モグラ叩きなど）をクリアし、
貰えるパスワードを使うと男子生徒Mを救出できる
・ミニゲームは全てアナログ式。パソコン不要

15. ・スマホやタブレットでも映像編集できる時代。
映像を展示に取り入れるクラスも結構多い
ただし、問題点は多い

16. ・プロジェクターの問題
実用的な大きさで黒板に投影するには
ある程度の距離が必要（およそ2～3m）
→ 展示の構造に制約が出る

17. 8月下旬に設置

18. ・エプソン製「EB-710UT」
・黒板に至近距離から映写可能
・天井吊り下げ式なので邪魔にならない
・ケーブル接続やモード変更は黒板の下にある
コントロールボックスで

19. ・解像度はWXGA（1920×1200）
・スクリーンは巻き取り式。
マグネットで黒板に貼り付ける
・プロジェクター単体で40万円する

20. ・タッチペンも使える
座標取得はプロジェクターとペンを同期して行う

21. ・ループ再生にして放置
→ やかましい
→ 再生する映像の変更ができない
・必要に応じて担当生徒がPCを操作
→ 機材トラブルのリスク
→ 担当の人が教室から出られない

22. こんな時はプログラムで解決。
プログラマの基本ですよね？

23. ・先述のタッチペンで操作できるメニュー画面を作る
・好きな時に映像を再生できる（VOD的な）
・映像を複数収録できる
・他の機能も必要に応じて実装可能

24. ・男子生徒Mが担任教師にさらわれたから助ける
・ミニゲーム3つ（クイズ、モグラ叩きなど）をクリアし、
貰えるパスワードを使うと男子生徒Mを救出できる
・ミニゲームは全てアナログ式。パソコン不要

25. ・男子生徒Mが担任教師にさらわれたから助ける
・ミニゲーム3つ（クイズ、モグラ叩きなど）をクリアし、
貰えるパスワードを使うと男子生徒Mを救出できる
↑パスワード認証の部分はソフトウェア実装できる
・ミニゲームは全てアナログ式。パソコン不要

26. 一番楽なのはパスワードを固定する方法ですが...
→ パスワードを他の誰かがバラしたらシステムが崩壊する
そこで、アルゴリズムを自作してソフトウェアで
パスワード認証を実装することに 条件としては...
・手計算でもパスワードを作成可能
・それなりに強固＋楽に入力できる桁数
・５時間しか使わないプログラムなので多少は適当でもOK

27. そこで考案した方法「時間認証」
① 時計を基に６桁のパスワードを作成して来客に教える
② パスワードをソフトウェアに入力してもらう
③ ソフトウェアがパスワードの正誤を判断し、
正解ならグッドエンド、不正解ならバッドエンドの
映像を再生する 制限時間は①から５分

28. そこで考案した方法「時間認証」
① 時計を基に６桁のパスワードを作成して来客に教える
↑ ３つのゲームをクリアして基準点を満たしていれば
正解パスワードをその場で作って教える。
(時計を見る→アルゴリズムを参考にして暗算)
満たしていなければ間違った数字に変えて教える

29. 103042
10時30分に発行したパスワードならこんな感じ
①最初の２文字：パスワード発行時間の「時」
②次の２文字 ：パスワード発行時間の「分」
③最後の２文字：①＋②＋２ （10時台の場合）

30. 要求した仕様：
・高スペックを要さないシステム（モバイルノートで稼働）
・万が一に備え、開発環境無しで直接修正できるようにしたい
・MP4形式で映像を再生できる
・透過PNGが扱える（←HSPの標準命令で使えない）
・フルスクリーンで稼働できる
・開発が容易

31. 開発言語 ：HTML / JavaScript
動画ファイル形式：mp4（1280×720px）
フレームレート ：30fps → 20fps

32. ・準備期間は2学期始業式からの約2週間
1日あたりの作業時間は30分～1時間程度
・ソフトウェア制作は自宅で出来るから問題無し。
ただ、機材のチェックに使える時間が短い
(流石に自宅に電子黒板は無い)

33. ・学校内にパソコンできる人材が少ないので、
当然他の仕事もある（映像編集、ポスター作成など）
・そして私は写真部の部長
→ 部活関係の作業もある
圧倒的時間不足

34. 時間が無いので、仕様は妥協します
・自分のパソコンで稼働させることを前提に、
画面解像度は1366×768ピクセルで固定
・メインループのコードは１つの関数に全部書いて
setIntervalで回す
・Canvas以外のHTML要素を一切廃し、CSSは必要最小限。
コードは文献の多いPureなJavaScriptで書く

35. ・JavaScriptでも縁取りなど文字効果は作れますが、
面倒なのでIllustratorで文字画像を作成しました
HTML5 Canvasは透過PNGが使えるので良い

36. JavaScriptコードは全部で364行
愛用のテキストエディタはNotepad++です

39. ・処理落ちが頻発した
最初は30fpsで開発していたが、当日20fpsに落とした
フリーズはしなかった。連続稼働には耐えた。
・バグを１つ見落としていた
開始時刻ギリギリで修正。アブナイ。

40. ・タッチペンの感度が悪かった
マウスイベントの実装に問題があったかもしれない

41. ・言語の選定は適切だったと思う。
ただ、実装手法が良くなかった
・短納期は良くない
・電子黒板サイコー！
・次のプログラミングLTは是非、岡崎市で

42. おしまい