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

Slide 1

Slide 1 text

読書記録サービス yondakoをつくった arrow2nd / #さくらのマイクロコミュニティ（Webサービス開発者の会） #15

Slide 2

Slide 2 text

arrow2nd といいますあろーって読むことが多いですちょっと株式会社でフロントエンドエンジニアとして働いています自己紹介

Slide 3

Slide 3 text

はなすこと 50 サービス概 20 開# %0 デザイ 30 やってよかったこÉ Ç0 今後やりたいこと

Slide 4

Slide 4 text

サービス概要

Slide 5

Slide 5 text

yondakoって？よんだことをわすれないための読書記録サービスコミュニティ機能や感想などの機能はなく、読書状況の記録のみに特化

Slide 6

Slide 6 text

なんでつくったの？ G 積読しがち E G 読みかけで日にちが経って、どの本を読んでたか忘れ G 既存の読書記録サービスは機能が多い「今読んでる本」をシンプルに管理したい！

Slide 7

Slide 7 text

デモ！ https://yondako.com/

Slide 8

Slide 8 text

開発

Slide 9

Slide 9 text

開発期間 & 2024/5 ... 開発開# & 2024/7 ... HonoX → Next.js 移行 & 2024/8 ... リリース → 約3ヶ月。7〜8月の間にガッと作った

Slide 10

Slide 10 text

使用技術フロントエンド Node.jsの代わりデータベース Cloudflare D1 インフラ Cloudflare Pages Cloudflare Access 認証 Auth.js テスト Playwright

Slide 11

Slide 11 text

書籍API https://ndlsearch.ndl.go.jp/help/api 検索用API (OpenSearch) → 書籍の情報源書影API → 書籍の書影

Slide 12

Slide 12 text

書籍API https://ndlsearch.ndl.go.jp/help/api R 無2 R リクエストの制限が厳しくな8 R 書籍の収録数が豊富。同人誌までカバー R 新刊の反映に時間がかかs R レスポンスが XMb R 商用利用の場合申請が必要良いところ気になるところ

Slide 13

Slide 13 text

書籍API 記事も書いた https://zenn.dev/chot/articles/24ea6186c029b0

Slide 14

Slide 14 text

デザイン

Slide 15

Slide 15 text

実装までの流れ É 手書き É Figma "É 実装

Slide 16

Slide 16 text

感じたこと ' 先にデザインを固めた方が開発効率が良 ' Storybookがあると細かい調整がしやすい → けど、最初からこれをするのは難しい…

Slide 17

Slide 17 text

ブラッシュアップ: Before

Slide 18

Slide 18 text

ブラッシュアップ: After

Slide 19

Slide 19 text

ブラッシュアップ: 書籍カード読んでない読みたい読んだコミック ARIA完全版 [ARIA The MASTERPIECE] 3巻天野こずえ | マッグガーデンカバーイラスト＆カラー扉は描き下ろし！雑誌連載当時のカラーページを再現！全巻300ページオーバーの大ボリューム！ s 文字を減らしてすっきりさせた s カードにすることで、並べた際の一覧性が上がった背表紙くらいの情報量に

Slide 20

Slide 20 text

ブラッシュアップ: その他UI 選択中の表現を統一背景色はメインカラー (茶) / アイコンはfilled 「読」をひらがなに画数が多くて固い印象がしたライブラリキーワードで探す読む本読んだ本すきな本

Slide 21

Slide 21 text

スマホ対応アプリっぽい雰囲気になるべく下部にボタン類を配置ボトムバーやドロワーを使う片手で操作しやすいように

Slide 22

Slide 22 text

やってよかったこと

Slide 23

Slide 23 text

記事を書いたこと https://zenn.dev/arrow2nd/articles/4367a3be5cbdb6

Slide 24

Slide 24 text

記事を書いたこと意外と読まれたユーザーも増えた！

Slide 25

Slide 25 text

日報で作業ログを残したこと E エラーの解決など、忘れたころにまた遭遇しがA E 記事を書く時の材料にも → 時系列で残るので経緯が分かって　ふり返りやすい

Slide 26

Slide 26 text

今後やりたいこと

Slide 27

Slide 27 text

新刊をすぐ登録できるように国立国会図書館に納入される必要があるので、数日前に発売された書籍が登録できない → 出版情報登録センターの情報を使うなどを検討中

Slide 28

Slide 28 text

検索ページが寂しいあまりにも何もない…… 新着書籍とか並べたいかも

Slide 29

Slide 29 text

バーコード検索の安定性向上スマホを機種変したら動かなくなった S Pixel 8 なら動いて3 S iPhone 持ってないので検証不足 InitError NotReadableError: Could not start video source