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.3k
2023/03/17 BS/WEBクライアント作ってみた
Takuma Shinohara
March 17, 2023
Tweet
Share
More Decks by Takuma Shinohara
See All by Takuma Shinohara
What's is Bluesky
shinoharata
0
1.2k
dissolute fat
shinoharata
0
200
20240520_toranoana_lab.pdf
shinoharata
0
190
民主的なSNSは日本を救う
shinoharata
0
330
Nostr x Gorilla Vim Collaboration
shinoharata
0
420
press_on_nostr_book
shinoharata
0
280
abc2023_slide_upload.pdf
shinoharata
0
330
LNBits で始める 家電Hack
shinoharata
0
200
NIP-78 nostr relay storage
shinoharata
0
240
Other Decks in Technology
See All in Technology
kernelvm-brain-net
raspython3
0
620
本当に必要なのは「QAという技術」だった!試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
ar_tama
9
4.7k
Google Cloud Next 2025 Recap アプリケーション開発を加速する機能アップデート / Application development-related features of Google Cloud
ryokotmng
0
280
地に足の付いた現実的な技術選定から魔力のある体験を得る『AIレシート読み取り機能』のケーススタディ / From Grounded Tech Choices to Magical UX: A Case Study of AI Receipt Scanning
moznion
5
1.8k
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
24
5.8k
VitePress & MCPでアプリ仕様のオープン化に挑戦する
hal_spidernight
0
120
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
140
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
810
Previewでもここまで追える! Azure AI Foundryで始めるLLMトレース
tomodo_ysys
2
720
ホワイトボックス& SONiC アーキテクチャ(全体像) - SONiC Workshop Japan 2025
ebiken
PRO
1
110
Cursorをチョッパヤインタビューライターにチューニングする方法 / how to tuning cursor for interview write
shuzon
2
250
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
1
400
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
How to train your dragon (web standard)
notwaldorf
91
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
179
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Experiences People Love
moore
142
24k
4 Signs Your Business is Dying
shpigford
183
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Facilitating Awesome Meetings
lara
54
6.4k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Embracing the Ebb and Flow
colly
85
4.7k
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: