2023/03/17 BS/WEBクライアント作ってみた

Transcript

1. Webクライアント作ってみた The Blue ～君とみた青空の先は
2. なぜ作ろうとおもった？
3. なぜ作ろうとおもった？ Skylightが あったから
4. システム構成 Firebase Hosting User Cloudflare
5. プログラムの構成 Vue 2系 Nuxt 2系
6. プログラムの構成
7. プログラムの構成 https://github.com/penpenpng/skylight/blob/main/src/lib/atp.ts
8. 突然ですが
9. 突然ですが
10. できた
11. でも...
15. ノーテストで公開 ダメ絶対！！ :wakaru:　:seyana:　:otsu:
16. その後は一旦、公開停止
17. ネーミングどうしよう
19. ゲーム
21. あまり実装できてない
22. 理由
23. 確定申告 Ah 冗談じゃあないないわ コトシノ・カクテイィ・シンコク その時が来たって如何にもならないぜ
24. 目指すとこ • きれい、使いやすい ◦ シンプルで誇張しないデザイン ◦ 純粋なキー操作 ◦ 最小限のアクションボタン等 • デスクトップでも使いたい ◦ タイムラインと通知同時 ◦ リプ等を含めたスレッド ◦ 詳細はモーダルで開くなど • 多言語化対応 ◦ 日本語 ◦ 英語
25. 実装のポイント • APIアクション中の表示 ◦ 多重投稿を防ぐ • ふぁぼ、リポストの連打対応 ◦ ローディングアニメーションと、ボタン比活性 ◦ 公式アプリ、公式WEBこれ出来てないよ！ • ロード中のロードアクション ◦ 同上 • タイムラインの管理 ◦ LocalStorageに積む？ ◦ 通知の未読・既読管理
26. 実装のポイント • POSTのバリデーション ◦ 本文前の改行、文末の改行・空白の削除 ◦ 連続する空白・改行の replace処理 ◦ 試してみると公式アプリは投稿時に実行している • POSTの表示 ◦ 連続の改行・空白の処理 ◦ 公式アプリは表示時もおこなっていた • XSS対策 ◦ 対策をした上で、 必要なタグをreplace
27. 目指すとこ（本音） • 廃人仕様 ◦ 投稿フォームの常時表示 ◦ タイムラインの自動更新・流し ◦ クソデカリポストボタン ◦ クソデカふぁぼボタン ◦ キーコンフィグ対応 ◦ :otsu:や:aza:、:is_all_scam:などカスタム絵文字対応 ※リアクションは無理だわ。。。
28. 目指すとこ（本音） • 多言語化対応 ◦ 厨二病 ◦ 関西弁 ◦ ツンデレ ◦ ねこ
29. 青空は もっと自由で あっていい！！ :wakaru:　:seyana:　:is_all_scam: