中2息子くんとハッカソンに参加して作品を作りました - カワリモノ息子とその母の技術メモ的な〜

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

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

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

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

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

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

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

【１日目】

早速会議

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

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

　息子くんが時間を忘れるのは
　・アニメを観ているとき
　・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による画面のレイアウト調整）をやることになりました。

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

息子と二人組のチームで参加してますが息子氏にかなり主導権握られててわたしはアシスタントです。
私のアイデアは即却下されるし、
作業が遅いとか言われるし、
パワハラ！！！
ブラック！！！
— とり子 (@siroitori0413) 2022年2月17日

【２日目】

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

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

いざもくもくと作り始めると私の役割分担が少ないのでわりとゆっくり過ごしてますw
— とり子 (@siroitori0413) 2022年2月17日

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

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

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

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

だいぶ形になってきたぞー！
明日までにどこまでできてるかな🤔#ツクアソ
— とり子 (@siroitori0413) 2022年2月18日

【３日目】

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

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

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

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

ProtoPediaに作品情報登録

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

夜通し頑張ってた息子氏寝ちゃったし、もうこれで完成にするぞー！
こんなの作ったよー！
Protopediaにも書きました^^#ツクアソ

作品名「ノンビリ動画TockTubeddit」
by @siroitori0413 memetan
https://t.co/evquQr1irJ
— とり子 (@siroitori0413) 2022年2月19日

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