Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2023/03/17 BS/WEBクライアント作ってみた
Search
Takuma Shinohara
March 17, 2023
Technology
0
1.4k
2023/03/17 BS/WEBクライアント作ってみた
Takuma Shinohara
March 17, 2023
Tweet
Share
More Decks by Takuma Shinohara
See All by Takuma Shinohara
BlueskyMeetup in Fukuoka アイデアソン
shinoharata
1
83
BlueskyMeetup in Fukuoka アイデアソン結果発表
shinoharata
1
70
いまのBlueskyってどうなの
shinoharata
0
130
四谷ラボとは ※2025/05/31
shinoharata
0
110
What's is Bluesky
shinoharata
0
1.5k
dissolute fat
shinoharata
0
220
20240520_toranoana_lab.pdf
shinoharata
0
210
民主的なSNSは日本を救う
shinoharata
0
370
Nostr x Gorilla Vim Collaboration
shinoharata
0
450
Other Decks in Technology
See All in Technology
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
460
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
280
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
140
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
3
830
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
730
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
390
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
560
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
320
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
370
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Navigating Team Friction
lara
190
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Practical Orchestrator
shlominoach
190
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Scaling GitHub
holman
463
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Transcript
Webクライアント作ってみた The Blue ~君とみた青空の先は
なぜ作ろうとおもった?
なぜ作ろうとおもった? Skylightが あったから
システム構成 Firebase Hosting User Cloudflare
プログラムの構成 Vue 2系 Nuxt 2系
プログラムの構成
プログラムの構成 https://github.com/penpenpng/skylight/blob/main/src/lib/atp.ts
突然ですが
突然ですが
できた
でも...
None
None
None
ノーテストで公開 ダメ絶対!! :wakaru: :seyana: :otsu:
その後は一旦、公開停止
ネーミングどうしよう
None
ゲーム
None
あまり実装できてない
理由
確定申告 Ah 冗談じゃあないないわ コトシノ・カクテイィ・シンコク その時が来たって如何にもならないぜ
目指すとこ • きれい、使いやすい ◦ シンプルで誇張しないデザイン ◦ 純粋なキー操作 ◦ 最小限のアクションボタン等 •
デスクトップでも使いたい ◦ タイムラインと通知同時 ◦ リプ等を含めたスレッド ◦ 詳細はモーダルで開くなど • 多言語化対応 ◦ 日本語 ◦ 英語
実装のポイント • APIアクション中の表示 ◦ 多重投稿を防ぐ • ふぁぼ、リポストの連打対応 ◦ ローディングアニメーションと、ボタン比活性 ◦
公式アプリ、公式WEBこれ出来てないよ! • ロード中のロードアクション ◦ 同上 • タイムラインの管理 ◦ LocalStorageに積む? ◦ 通知の未読・既読管理
実装のポイント • POSTのバリデーション ◦ 本文前の改行、文末の改行・空白の削除 ◦ 連続する空白・改行の replace処理 ◦ 試してみると公式アプリは投稿時に実行している
• POSTの表示 ◦ 連続の改行・空白の処理 ◦ 公式アプリは表示時もおこなっていた • XSS対策 ◦ 対策をした上で、 必要なタグをreplace
目指すとこ(本音) • 廃人仕様 ◦ 投稿フォームの常時表示 ◦ タイムラインの自動更新・流し ◦ クソデカリポストボタン ◦
クソデカふぁぼボタン ◦ キーコンフィグ対応 ◦ :otsu:や:aza:、:is_all_scam:などカスタム絵文字対応 ※リアクションは無理だわ。。。
目指すとこ(本音) • 多言語化対応 ◦ 厨二病 ◦ 関西弁 ◦ ツンデレ ◦
ねこ
青空は もっと自由で あっていい!! :wakaru: :seyana: :is_all_scam: