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
グラフィカルに URL を編集できるサービスを作った
Search
KoharaKazuya
May 20, 2020
Programming
1
16k
グラフィカルに URL を編集できるサービスを作った
PWA Night vol.16
KoharaKazuya
May 20, 2020
Tweet
Share
More Decks by KoharaKazuya
See All by KoharaKazuya
Native File System API の紹介と Zip を作る Web サービスを作った話
koharakazuya
0
170
Go でのエラー生成パターン
koharakazuya
0
16k
pickpatch を作った話と仕組みの解説
koharakazuya
0
51
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Improving my own Ruby thereafter
sisshiki1969
1
160
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
120
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
AIでLINEスタンプを作ってみた
eycjur
1
230
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
230
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
460
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Code Reviewing Like a Champion
maltzj
525
40k
Agile that works and the tools we love
rasmusluckow
330
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Transcript
グラフィカルに URL を編集できるサービスを作った 2020/05/20 PWA Night vol.16 ⼩原 ⼀哉
⾃⼰紹介 ⼩原 ⼀哉 (こはら かず や) ウェブエンジニア フェンリル株式会社 @KoharaKazuya 2
2
発表の経緯 以前に グラフィカルに URL を編集できるサービスを作った という記事を Qiita に書いた URL Editor
という PWA を作った話 その記事に中津川さんからコメントもらったので LT する 今⽇話すことは記事と似ているが内容を少し変えている 3 3
作ったものの紹介 (デモ) URL Editor https://url-editor.koharakazuya.net/ 4 4
作った背景・動機 (PWA Night はプログラマーに限らない参加を募っているとい うことで、技術的でない話からする) 5 5
オフライン利⽤できる Web サービス だからこそ嬉しいものを作りたい! 6 6
PWA でネイティブアプリっぽいことができるようになった! という話は聞くが、こうも考えてしまう 「ネイティブアプリ使ってればいいじゃん」 ※ あくまでエンドユーザーとしての視点。開発コストなどの開 発者視点はあえて無視している 7 7
だって、ネイティブアプリの⽅がサクサク動くし、 オフラインでも使えるし…… Web でアプリっぽいものを作る価値って何? ということを改めて考えた。 8 8
(PWA に限らない) Web の良さとは ※ ネイティブアプリと⽐較して エンゲージメント: ユーザーがサービスを知ってからインス トールの⼿間と⼤きなギャップをスキップできる ほとんどのスマートデバイスで動く
ハイパーリンクで参照できる 9 9
この「良さ」を表してるサービスを作ろう! → 作った 10 10
PWA が適してるサービス 今回は URL Editor というものを作ったが、他のサービスも 「インストールするほど欲しくないかもしれないが、すぐに試 せて便利なら使いたい、気に⼊ったらインストールしたい」 みたいなものは PWA
だと嬉しい、と感じた。 11 11
作ってわかったこと (ここから技術的な話) 12 12
URL Editor のアーキテクチャー 13 13
URL Editor のアーキテクチャー HTML, CSS, JavaScript を初回にダウンロードしてきて実 ⾏するだけ Web API
サーバーなどは存在しない 真の SPA (笑) ファーストビューが全て 14 14
URL Editor の特⻑ 状態は URL に保持する リンクを共有するとほぼ同じ状態を復元できる インストール可能 オフライン利⽤可能 15
15
Preact Preact: ⼩さい (3 KB) の React の代替 私はよく使う。サイズが⼩さいので⼩さなアプリを作るときに 適している。細かい点で
React とは異なる。 16 16
Preact CLI Preact CLI: Webpack, Babel などのビルド周りの設定を肩代 わりしてくれる 公式に PWA
を簡単に作れると謳っているので使った。 17 17
Preact CLI がやってくれること Workbox が組み込まれていて Service Worker + CacheStorage によるオフライン対応が簡単にできる
Pre-rendering: SSG とかビルド時レンダリングとか⾔われ るやつ (その他効率的なロードのための機能がいろいろ) (その他開発しやすくするための機能がいろいろ) 18 18
⼊⼒に⾊を付ける技術 <span style="color: green">http</span>:// のように部分的なハイライトをリアルタイムでしたい HTML の contenteditable しか思いつかなかった contenteditable
はハマりどころが多いと聞いていた 実際難しかった、でも アプリっぽくしたい PWA には頻出か も 19 19
contenteditable の難しい点 . HTML を書き換えるとカーソル位置が破棄される . HTML を書き換えると IME 変換中状態が破棄される
. ブラウザによってカーソル移動が⽂字単位にならない 20 20
カーソル位置が破棄される ユーザー⼊⼒によって http:// が http// に変わった 瞬間、 <span> などが消える http
が scheme 判定ではなくなるため フォーカスが外れる、カーソルがジャンプするなど 対策: HTML の書き換え前後でカーソル位置を保存、復元した 21 21
IME 変換中状態が破棄される 前述のフォーカスが外れる、という現象と同じ 変換中に HTML が書き換わるとターゲットを失うので IME が中断する URL は英数字なので関係ないと思いきや、
Android ではデフォルトで IME が動作する 単語の予測⼊⼒などに使う 対策: IME 変換中には HTML 書き換えをしない (リアルタイムの⾊付けを諦める) 22 22
カーソル移動が⽂字単位にならない <span>http</span> などの⽂字以外の HTML タグに反 応したカーソル移動みたいな挙動をする 対策: 何もできそうになかったので諦めた 23 23
まとめ 「オフライン利⽤できる Web サービス」だからこそ嬉しい ものは何か考えた URL Editor という PWA を作った
作ってわかった技術的な知識を紹介した 24 24