読書記録サービス yondako をつくった

Transcript

1. 読書記録サービス yondakoをつくった arrow2nd / #さくらのマイクロコミュニティ （Webサービス開発者の会） #15
2. arrow2nd といいます あろーって読むことが多いです ちょっと株式会社でフロントエンドエンジニア として働いています 自己紹介
3. はなすこと 50 サービス概 20 開# %0 デザイ 30 やってよかったこÉ Ç0 今後やりたいこと
4. サービス概要
5. yondakoって？ よんだことをわすれないための読書記録サー ビス コミュニティ機能や感想などの機能はなく、 読書状況の記録のみに特化
6. なんでつくったの？ G 積読しがち E G 読みかけで日にちが経って、どの本を読んでたか忘れ G 既存の読書記録サービスは機能が多い 「今読んでる本」をシンプルに管理したい！
7. デモ！ https://yondako.com/
8. 開発
9. 開発期間 & 2024/5 ... 開発開# & 2024/7 ... HonoX → Next.js 移行 & 2024/8 ... リリース → 約3ヶ月。7〜8月の間にガッと作った
10. 使用技術 フロントエンド Node.jsの代わり データベース Cloudflare D1 インフラ Cloudflare Pages Cloudflare Access 認証 Auth.js テスト Playwright
11. 書籍API https://ndlsearch.ndl.go.jp/help/api 検索用API (OpenSearch) → 書籍の情報源 書影API → 書籍の書影
12. 書籍API https://ndlsearch.ndl.go.jp/help/api R 無2 R リクエストの制限が厳しくな8 R 書籍の収録数が豊富。同人誌までカバー R 新刊の反映に時間がかかs R レスポンスが XMb R 商用利用の場合申請が必要 良いところ 気になるところ
13. 書籍API 記事も書いた https://zenn.dev/chot/articles/24ea6186c029b0
14. デザイン
15. 実装までの流れ É 手書き É Figma "É 実装
16. 感じたこと ' 先にデザインを固めた方が開発効率が良 ' Storybookがあると細かい調整がしやすい → けど、最初からこれをするのは難しい…
17. ブラッシュアップ: Before
18. ブラッシュアップ: After
19. ブラッシュアップ: 書籍カード 読んでない 読みたい 読んだ コミック ARIA完全版 [ARIA The MASTERPIECE] 3巻 天野こずえ | マッグガーデン カバーイラスト＆カラー扉は描き下ろし！雑誌連載当時の カラーページを再現！全巻300ページオーバーの大ボリュー ム！ s 文字を減らしてすっきりさせた s カードにすることで、並べた際の一覧性が上がった 背表紙くらいの情報量に
20. ブラッシュアップ: その他UI 選択中の表現を統一 背景色はメインカラー (茶) / アイコンはfilled 「読」をひらがなに 画数が多くて固い印象がした ライブラリ キーワードで探す 読む本 読んだ本 すきな本
21. スマホ対応  アプリっぽい雰囲気に  なるべく下部にボタン類を配置 ボトムバーやドロワーを使う 片手で操作しやすいように
22. やってよかったこと
23. 記事を書いたこと https://zenn.dev/arrow2nd/articles/4367a3be5cbdb6
24. 記事を書いたこと 意外と読まれた ユーザーも増えた！
25. 日報で作業ログを残したこと E エラーの解決など、忘れたころに また遭遇しがA E 記事を書く時の材料にも → 時系列で残るので経緯が分かって 　 ふり返りやすい
26. 今後やりたいこと
27. 新刊をすぐ登録できるように 国立国会図書館に納入される必要があるので、 数日前に発売された書籍が登録できない → 出版情報登録センターの情報を使うなどを検討中
28. 検索ページが寂しい あまりにも何もない…… 新着書籍とか並べたいかも
29. バーコード検索の安定性向上 スマホを機種変したら動かなくなった S Pixel 8 なら動いて3 S iPhone 持ってないので検証不足 InitError NotReadableError: Could not start video source
30. https://github.com/yondako/yondako GitHubで公開しています
31. ご静聴ありがとうございました！