チーム「ライブコーディング」メンターによる成果物紹介jig.jpサマーインターンシップ2024
こんにちは！
配信サービス『ふわっち』のサーバー/イベント実装を担当しております、
にばと申します。
昨年2023年のサマーインターンでもメンターを担当し、2024年度も引き続き担当させていただきました。
担当したのは、チーム『ライブコーディング』
Web担当のだいちゃんさん、サーバー担当のたっかーさん、プロダクトオーナーにうめさんを据えたチームでした。
チーム名はメンターを担当した私、にばが昨年のインターンシップでライブコーディングを担当したことから流れで決定されました（エンジニアっぽいチーム名で良さそうですね）
それでは、早速振り返っていこうと思います！
アプリについて
開発したアプリケーションの名前は『技術書どんぶらこ』です。
このアプリケーションを開くと、昨今流行りのショート動画のように技術記事が次々と表示されます。これによって、ただ待っているだけで気になる記事を見つけることができるのです。
ターゲット層は空き時間についついSNSやショート動画を見てしまう学生や社会人の皆さん。
「能動的にキャッチアップするのは面倒だけど、やっぱり勉強もしないとな……」
「QiitaやZennのタイムラインをスクロールするのも億劫だ……」
そんな貴方におすすめのアプリケーションとなっております。
先に書いたように、使い方はとってもシンプル。
アプリを開くだけで、全自動でQiitaやZennの記事が収集され、次々と流れてきます。
さながら桃のように、どんぶらこ、どんぶらこと。
>技術記事はQiita, Zennに加え、弊社創業者 福野の一日一創ブログからも取得しております。
加えて、右上のおばあちゃんをタップすると、検索画面を開くことができます。Pythonを勉強中ならPythonの情報だけを、JavaScriptならJavaScriptだけを勉強することもできるようになっています。特定のサイトからだけ取得することもできますよ。
>「これがほんとの洗濯画面ってね😉」 人事のしゅんぴさんより
また、お気に入りの記事だけが流れてくる特別な「川」を作る機能も存在し、左上のボタンから使用することができます。
技術記事の流れる川を眺めて爽やかな気分に浸り、シェアしたくなったら新しい「川」を作ってシェアしてしまいましょう！
使用技術
開発に使用した技術は以下の通りです。
フロントエンド：SCSS, gsap
バックエンド：Deno, rss
データベース：Deno KV
互いにコードレビューができるよう、チームメンバー間で技術レベルが合致するDenoをベースに選出し、後は各々の担当箇所を得意なもので実装していただきました。
フロントエンドのスタイリングはVanilla CSSに近いSCSSを、どんぶらこと記事が流れる様子を演出するためにアニメーション制作用JSライブラリgsapを利用しています。
バックエンドは記事の取得に注力し、Qiita/Zenn/一日一創ブログからAPIやRSSを駆使して記事を抽出しています。
> どんぶらことは、「重みのある物などが、水に浮き沈みしながら漂うさま」を示す言葉だそうですよ
開発秘話
フロントエンド
フロントエンドの実装はうめさんとだいちゃんさんに担当していただきました。
アニメーションと画像の用意はうめさんが、CSSによるスタイリングや全体的なロジックの実装などはだいちゃんさんが担当する、という分担です。
序盤の開発の進め方で失敗してしまい、アニメーション処理の繋ぎ込み等に苦労していましたが、何とか実装を終わらせることができました。カードのデザインも綺麗に作っていただけましたし、アニメーションも桃が流れるような動きになっていて良かったと思います。
一点、私のフロントエンド開発の知識が浅く、CSSの調整やgsapの設定等をスムーズに指導できなかったのが少々心残りでした。この点は個人でWeb開発等を行い、技術力の向上を図りたいと思います。
バックエンド
バックエンドの実装はたっかーさんに担当していただきました。
全体的にスムーズに進行していた印象で、開発が滞った場合でも少し教えればすぐに理解して、実装に取り入れていただけて良かったです。
しかし、バックエンドの実装時には個人的に特に印象的だったシーンがありました。最終日に発生した、DOMParserのエラーです。
ブラウザ上のコンソールでは何度テストしても動作するはずのRSSのパースが、何故かDeno上では全く動作しない不具合が発生し、急ぎ修正していました。
調査の結果、原因はDeno上のDOMParserはブラウザに搭載されているものとは異なる実装になっており、mimeType が "text/html" のものしか受け付けない……という問題でした。
https://deno.land/x/deno_dom@v0.1.47/src/dom/dom-parser.ts?source=#L19
OSSのようでしたので、実装してコミットしてみるのも良いかもしれません。
最後に
紆余曲折ありながらも、無事にアプリを完成させられて良かったです！
また、インターン全体の雰囲気がよく、休日にチームメンバー同士で予定を合わせて観光に行くなど、開発力だけでなく他校の学生との交流も楽しんでいただけたのではないかと思います。
今後勉強会などで顔を合わせることがあれば、よろしくお願いします。