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
14k
グラフィカルに 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
130
Go でのエラー生成パターン
koharakazuya
0
14k
pickpatch を作った話と仕組みの解説
koharakazuya
0
45
Other Decks in Programming
See All in Programming
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
What We Can Learn From OSS
inouehi
0
400
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
Semantic search with Django and pgvector
pauloxnet
0
240
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
Elm Form Validation
bkuhlmann
0
510
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
470
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Site Reliability Engineering for GMO
pyama86
6
960
Git Rebase
bkuhlmann
11
1.6k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
49k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Visualization
eitanlees
135
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Become a Pro
speakerdeck
PRO
10
4.5k
Bash Introduction
62gerente
604
210k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Web Components: a chance to create the future
zenorocha
305
41k
Side Projects
sachag
451
41k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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