Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

高校の文化祭でデジタルサイネージを作ってみた

145 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

高校の文化祭でデジタルサイネージを作ってみた

  1. 1. 荒川 奏良 (Sora Arakawa) プログラミングLT2018@品川
  2. 2. ↑「HG創英角ポップ体」じゃないぞ!! (DFP POP1体)
  3. 3. 荒川 奏良 (Sora Arakawa) - 2001年4月11日生まれ - 愛知県岡崎市在住 - 高校2年生
  4. 4. 岡崎市能見町「中田屋」さんのかりんとうです。 「八丁ねぎ味噌」「シナモン」の2種類を用意しました。 是非食べてみてください。
  5. 5. ・2016年のプロ生@名古屋から使い始めた題名 ・You&Iさん(プロ生名古屋支部長)のオマージュ ・ローカルルール「名古屋式LT」知ってますか?  → 時間区切りでの強制終了が無い
  6. 6. ・10分って短くね?  → 45分セッションに慣れると逆に大変    その代わりスピード感は出る ・界隈で「高認取って退学したい」が氾濫していますが、  今回は学校ネタでやります。許して。
  7. 7. 荒川 奏良 (Sora Arakawa) プログラミングLT2018@品川
  8. 8. 荒川 奏良 (Sora Arakawa) - 2001年4月11日生まれ - 愛知県岡崎市在住 - 高校2年生 - それなりの学力 - 平凡な体力
  9. 9. まず質問です
  10. 10. 高校の一大イベントと言えば?
  11. 11. 文化祭! (※諸説あります)
  12. 12. ・愛知県三河地方にある公立高校(3学期制) ・文化祭は9月中旬に開催  → 数年前から体育祭と同時開催している
  13. 13. ・ホームルーム教室を改造して展示会場にする ・テーマは自由(生徒指導部の審査有り)←ココ重要
  14. 14. ・男子生徒Mが担任教師にさらわれたから助ける ・ミニゲーム3つ(クイズ、モグラ叩きなど)をクリアし、  貰えるパスワードを使うと男子生徒Mを救出できる ・ミニゲームは全てアナログ式。パソコン不要
  15. 15. ・スマホやタブレットでも映像編集できる時代。  映像を展示に取り入れるクラスも結構多い ただし、問題点は多い
  16. 16. ・プロジェクターの問題  実用的な大きさで黒板に投影するには  ある程度の距離が必要(およそ2~3m)  → 展示の構造に制約が出る
  17. 17. 8月下旬に設置
  18. 18. ・エプソン製「EB-710UT」 ・黒板に至近距離から映写可能 ・天井吊り下げ式なので邪魔にならない ・ケーブル接続やモード変更は黒板の下にある  コントロールボックスで
  19. 19. ・解像度はWXGA(1920×1200) ・スクリーンは巻き取り式。  マグネットで黒板に貼り付ける ・プロジェクター単体で40万円する
  20. 20. ・タッチペンも使える  座標取得はプロジェクターとペンを同期して行う 
  21. 21. ・ループ再生にして放置  → やかましい  → 再生する映像の変更ができない ・必要に応じて担当生徒がPCを操作  → 機材トラブルのリスク  → 担当の人が教室から出られない
  22. 22. こんな時はプログラムで解決。 プログラマの基本ですよね?
  23. 23. ・先述のタッチペンで操作できるメニュー画面を作る ・好きな時に映像を再生できる(VOD的な) ・映像を複数収録できる ・他の機能も必要に応じて実装可能
  24. 24. ・男子生徒Mが担任教師にさらわれたから助ける ・ミニゲーム3つ(クイズ、モグラ叩きなど)をクリアし、  貰えるパスワードを使うと男子生徒Mを救出できる ・ミニゲームは全てアナログ式。パソコン不要
  25. 25. ・男子生徒Mが担任教師にさらわれたから助ける ・ミニゲーム3つ(クイズ、モグラ叩きなど)をクリアし、  貰えるパスワードを使うと男子生徒Mを救出できる  ↑パスワード認証の部分はソフトウェア実装できる ・ミニゲームは全てアナログ式。パソコン不要
  26. 26. 一番楽なのはパスワードを固定する方法ですが... → パスワードを他の誰かがバラしたらシステムが崩壊する そこで、アルゴリズムを自作してソフトウェアで パスワード認証を実装することに  条件としては... ・手計算でもパスワードを作成可能 ・それなりに強固+楽に入力できる桁数 ・5時間しか使わないプログラムなので多少は適当でもOK
  27. 27. そこで考案した方法「時間認証」 ① 時計を基に6桁のパスワードを作成して来客に教える ② パスワードをソフトウェアに入力してもらう ③ ソフトウェアがパスワードの正誤を判断し、   正解ならグッドエンド、不正解ならバッドエンドの   映像を再生する   制限時間は①から5分
  28. 28. そこで考案した方法「時間認証」 ① 時計を基に6桁のパスワードを作成して来客に教える ↑ 3つのゲームをクリアして基準点を満たしていれば   正解パスワードをその場で作って教える。   (時計を見る→アルゴリズムを参考にして暗算)   満たしていなければ間違った数字に変えて教える
  29. 29. 103042 10時30分に発行したパスワードならこんな感じ ①最初の2文字:パスワード発行時間の「時」 ②次の2文字 :パスワード発行時間の「分」 ③最後の2文字:①+②+2 (10時台の場合)
  30. 30. 要求した仕様: ・高スペックを要さないシステム(モバイルノートで稼働) ・万が一に備え、開発環境無しで直接修正できるようにしたい ・MP4形式で映像を再生できる ・透過PNGが扱える(←HSPの標準命令で使えない) ・フルスクリーンで稼働できる ・開発が容易
  31. 31. 開発言語    :HTML / JavaScript 動画ファイル形式:mp4(1280×720px) フレームレート :30fps → 20fps
  32. 32. ・準備期間は2学期始業式からの約2週間  1日あたりの作業時間は30分~1時間程度  ・ソフトウェア制作は自宅で出来るから問題無し。 ただ、機材のチェックに使える時間が短い (流石に自宅に電子黒板は無い)
  33. 33. ・学校内にパソコンできる人材が少ないので、  当然他の仕事もある(映像編集、ポスター作成など) ・そして私は写真部の部長  → 部活関係の作業もある 圧倒的時間不足
  34. 34. 時間が無いので、仕様は妥協します ・自分のパソコンで稼働させることを前提に、  画面解像度は1366×768ピクセルで固定 ・メインループのコードは1つの関数に全部書いて  setIntervalで回す ・Canvas以外のHTML要素を一切廃し、CSSは必要最小限。  コードは文献の多いPureなJavaScriptで書く
  35. 35. ・JavaScriptでも縁取りなど文字効果は作れますが、  面倒なのでIllustratorで文字画像を作成しました  HTML5 Canvasは透過PNGが使えるので良い
  36. 36. JavaScriptコードは全部で364行 愛用のテキストエディタはNotepad++です
  37. 37. ・処理落ちが頻発した   最初は30fpsで開発していたが、当日20fpsに落とした   フリーズはしなかった。連続稼働には耐えた。 ・バグを1つ見落としていた   開始時刻ギリギリで修正。アブナイ。
  38. 38. ・タッチペンの感度が悪かった   マウスイベントの実装に問題があったかもしれない
  39. 39. ・言語の選定は適切だったと思う。  ただ、実装手法が良くなかった ・短納期は良くない ・電子黒板サイコー! ・次のプログラミングLTは是非、岡崎市で
  40. 40. おしまい

×