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