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
80
BlueskyMeetup in Fukuoka アイデアソン結果発表
shinoharata
1
66
いまのBlueskyってどうなの
shinoharata
0
120
四谷ラボとは ※2025/05/31
shinoharata
0
100
What's is Bluesky
shinoharata
0
1.4k
dissolute fat
shinoharata
0
210
20240520_toranoana_lab.pdf
shinoharata
0
210
民主的なSNSは日本を救う
shinoharata
0
360
Nostr x Gorilla Vim Collaboration
shinoharata
0
440
Other Decks in Technology
See All in Technology
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
470
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
2025年夏 コーディングエージェントを統べる者
nwiizo
0
160
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
190
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
440
AWSで始める実践Dagster入門
kitagawaz
1
610
20250913_JAWS_sysad_kobe
takuyay0ne
2
190
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
410
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
テストを軸にした生き残り術
kworkdev
PRO
0
200
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
160
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Scaling GitHub
holman
463
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Making Projects Easy
brettharned
117
6.4k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
We Have a Design System, Now What?
morganepeng
53
7.8k
Embracing the Ebb and Flow
colly
87
4.8k
Building Applications with DynamoDB
mza
96
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.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: