カワリモノ息子の技術メモ的な~

カワリモノ息子とその母の技術メモ的な〜

学校が苦手な息子くんの作品とその母の作品、はたまた日常などいろいろを在宅エンジニア母が綴る

MENU

中2息子くんとハッカソンに参加して作品を作りました

「ツクってアソぶハッカソン」に参加しました。

 人生初「ハッカソン」というものに参加しました。

 ハッカソンとは、限られた時間内に開発を行うイベントです。

 今回参加したハッカソンは「ツクってアソぶハッカソン」というものでした。
ツクってアソぶハッカソン
f:id:toriko0413:20220220222432p:plain

 息子くんと2人チームで「インコーズ」というチーム名で参加登録をしました。
 2/17(木)夜にお題が発表されて2/19(土)夜が〆切、この間の48時間が制限時間でした。

 普段はあまり「テーマに沿って何か作る」というのはあまり好きではない息子くんだったのですが、誘ってみると今回は乗り気でした。
 とはいえ当日までに気が変わるかもしれないなと思って一人で作ることも想定していましたが、今回は気が変わることなく参加できました。

 2/17(木)にハッカソンのお題が発表、というか3つのお題が出た中で参加者投票の上今回のお題が決定しました。
 テーマ:『時から開放されるサービス』
 
 Zoomの配信を一緒に見ていた息子くんもそのテーマがいいなって言ってたのでそれに決まって良かったです。
 でも、時から開放・・ざっくりしてるな~

【1日目】

早速会議

 テーマが決まったことなので早速何を作るか話し合い開始です。

 「時から開放」→「時間を忘れられる楽しいこと」
 というイメージから、どういう時が時間を忘れるかを考えました。

 息子くんが時間を忘れるのは
 ・アニメを観ているとき
 ・YouTubeとかで笑える動画をみているとき
 ということで、
 時間を忘れられるような面白動画を見るサービスを作りたいということになりました。

 わたしとしては、夜お布団に入ってあと寝るだけという時になってからスマホをゆっくり見るのが時間を忘れるくつろぎタイムのように感じています。
 なのでそれにプラス極力操作しなくて何も考えずぼーっとみていられるようなものが作りたい、という要素を加えました。
 (そのほかにも意見をいろいろ出したのですが私の意見はほとんど却下されましたw)

 息子くんはおもしろくて何も考えずにずっと見ていられるような動画だったらRedditという海外のソーシャルサイトの動画がまさにそれだと。調べてみるとRedditから動画を取得するためのAPIも準備されているとのことでした。

参考:Reddit

 https://www.reddit.com/
f:id:toriko0413:20220220222955p:plain
 動画だけでなく文章や画像が投稿できるサイトです。アメリカを中心に流行っているそうです。

画面イメージを考える

 ざっくりどういうのを作るかノートに書いてイメージのすり合わせをしました。ブラウザで表示できるものを想定しました。

f:id:toriko0413:20220220223245j:plain
f:id:toriko0413:20220219232009j:plain

 汚い字、そして連絡帳なのはご愛嬌w

ポイント

  • 人気動画が再生される
  • 動画の再生が終わったら次の動画に自動スクロールする

作業分担

 作りたいもののイメージが固まったらもう作りたくてしょうがない息子くん。すぐに作業にとりかかりました。
 私は補佐的ポジションとなり息子くんから指示のある作業(基本的にCSSによる画面のレイアウト調整)をやることになりました。

 1日目の夜は、息子くんが見つけてきたイメージに合うサイトのテンプレート(HTML、CSS、JavaScript)を今回の表示に合うように若干調整したあと私は寝ることにしました。

【2日目】

 朝起きると徹夜した息子くんがもうだいぶ作りこんでいて、RedditのAPIで動画を取得してはめこんで表示できていました。

 進捗を確認した後、バトンタッチで息子くん就寝。
 その後息子くんからやっといてほしいと指示のあったレイアウト崩れの部分(レスポンシブ対応)を私が調整しました。

 その日の夕方、息子くん起床。
 生活時間がずれているからなかなか一緒に作業できる時間が無いですw

 そして息子くんから提案がありました。
 「動画に投稿されているコメントも出したい。ニコニコ動画みたいに動画上にコメントを流したいからやっといて。」
 という難易度高い指示!

 調べてみたらCSSとJavaScriptで実現できるんですね。
 というわけで軽くコメント1行だけ表示するところまで実装したら、その後は息子くんが引き継いで複数のコメントを複数行で散らばせて出すようにしてました。本当びっくりするほど作業が早いです。いや私が遅いのか・・?と自信がなくなりました。このへんは私の本業の範囲のハズなんですけどね(苦笑)

 また夜は私だけ就寝、息子くんは夜通し。明日の朝またお会いしましょう。

【3日目】

 朝また再会して実装を再開。
 この日寝るとハッカソンの20時の締め切りまでにいつ起きれるかわからないということで、この日息子くんが寝る時間=遅くて昼までが私たちのチームの制作終了ということにしました。

 実装できてない事項や潰せてないバグを抜き出して、どれをやる・やらないを決めました。
 そしてやると決めた事項をばたばたと実装。
 なかなかいい感じに仕上がりました!

 作品名は「ノンビリ動画TockTubeddit」という名前になりました!
 息子くんの作成したロゴがコチラ ▼
f:id:toriko0413:20220221001148p:plain

 そしてこの日のお昼に制作終了にしました。
 お疲れ様でした!おやすみなさい!

ProtoPediaに作品情報登録

 私はそのあとハッカソン作品を応募するとともに、ProtoPediaに作品情報を書いてみました。
protopedia.net

 無事に応募を終えてほっとし、やり切った感が爽快でした!
 これは・・くせになりそう・・!

作品見て!

 下記リンク▼から今回作ったサイトを見ることが出来ます。
nonbiri-douga-viewer.herokuapp.com

 最初に「LOAD」ボタンを押してくださいね(その他の使い方は上記のProtoPediaに記載しています)

f:id:toriko0413:20220221000140p:plain

 英語に苦手意識のある方はPCでGoogle翻訳した状態で見ると良いかもです。流れるコメントも翻訳されます。

今後の予定

 ハッカソンを終えホームページを見てみると、応募した作品一覧が23作品登録されていました。
 この中から審査員による審査がありファイナリスト選出され、ファイナリストがプレゼンして相互投票して賞が決まるそうです。

 ファイナリストに選出されるといいなと思いつつ、もうこれだけでも大満足の母でした。