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
1k
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
230
dissolute fat
shinoharata
0
96
20240520_toranoana_lab.pdf
shinoharata
0
91
民主的なSNSは日本を救う
shinoharata
0
180
Nostr x Gorilla Vim Collaboration
shinoharata
0
280
press_on_nostr_book
shinoharata
0
230
abc2023_slide_upload.pdf
shinoharata
0
210
LNBits で始める 家電Hack
shinoharata
0
160
NIP-78 nostr relay storage
shinoharata
0
170
Other Decks in Technology
See All in Technology
初めましてが多いチームの形成期にEMが取り組んだ事
shoheimitani
1
120
障害対応を楽しむ7つのコツ
ryuichi1208
7
4k
プロダクト拡大フェーズでプロダクト検証サイクル効率化を目指す過程で見えたもの / Streamlining Product Validation in Growth Phase
kakehashi
5
5.2k
Oracle Modern Data Platform Reference Architecture (MySQL HeatWave Lakehouse編)
oracle4engineer
PRO
2
290
健常者から見たAndroidのアクセシビリティ機能
takamichie
PRO
0
190
やさしいITを目指すために
ishity__
0
330
ANDPAD and Ruby
andpad
1
310
RAG構築におけるKendraとPineconeの使い分け
sonoda_mj
2
260
120リポジトリを1つのMonorepoに統合した理由
disc99
1
430
CentOS 7サポート終了直前!次はどうする?
koedoyoshida
1
220
生成AIを使った業務効率化〜実践的なプロンプトと活用例の紹介〜
yoshi8__
0
410
タクシーアプリ『GO』におけるプラットフォームエンジニアリングの実践
mot_techtalk
12
6.4k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
273
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
8
320
WebSockets: Embracing the real-time Web
robhawkes
59
7.1k
YesSQL, Process and Tooling at Scale
rocio
165
14k
Art, The Web, and Tiny UX
lynnandtonic
290
20k
BBQ
matthewcrist
80
8.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
128
32k
The Power of CSS Pseudo Elements
geoffreycrofte
63
5.1k
Become a Pro
speakerdeck
PRO
14
4.7k
Designing Experiences People Love
moore
136
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: