Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

155 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

  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. おしまい

×