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.2k
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
750
dissolute fat
shinoharata
0
170
20240520_toranoana_lab.pdf
shinoharata
0
160
民主的なSNSは日本を救う
shinoharata
0
290
Nostr x Gorilla Vim Collaboration
shinoharata
0
380
press_on_nostr_book
shinoharata
0
260
abc2023_slide_upload.pdf
shinoharata
0
290
LNBits で始める 家電Hack
shinoharata
0
180
NIP-78 nostr relay storage
shinoharata
0
190
Other Decks in Technology
See All in Technology
SpiderPlus & Co. エンジニア向け会社紹介資料
spiderplus_cb
0
680
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
1.1k
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
0
140
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.7k
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
480
comilioとCloudflare、そして未来へと向けて
oliver_diary
5
380
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.5k
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
140
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
110
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
3
600
OPENLOGI Company Profile for engineer
hr01
1
18k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Music & Morning Musume
bryan
46
6.3k
How STYLIGHT went responsive
nonsquared
96
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Agile that works and the tools we love
rasmusluckow
328
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
950
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
How to Ace a Technical Interview
jacobian
276
23k
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: