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.1k
dissolute fat
shinoharata
0
190
20240520_toranoana_lab.pdf
shinoharata
0
180
民主的なSNSは日本を救う
shinoharata
0
330
Nostr x Gorilla Vim Collaboration
shinoharata
0
410
press_on_nostr_book
shinoharata
0
270
abc2023_slide_upload.pdf
shinoharata
0
320
LNBits で始める 家電Hack
shinoharata
0
200
NIP-78 nostr relay storage
shinoharata
0
230
Other Decks in Technology
See All in Technology
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
240
Dynamic Reteaming And Self Organization
miholovesq
3
580
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
700
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
170
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
710
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
750
ドキュメント管理の理想と現実
kazuhe
1
210
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
280
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
150
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
320
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
210
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
420
Featured
See All Featured
Building an army of robots
kneath
304
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Facilitating Awesome Meetings
lara
54
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for Performance
lara
608
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Navigating Team Friction
lara
184
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
GraphQLとの向き合い方2022年版
quramy
46
14k
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: