グラフィカルに URL を編集できるサービスを作った

PWA Night vol.16

Transcript

1. グラフィカルに URL を編集できるサービスを作った 2020/05/20 PWA Night vol.16 ⼩原 ⼀哉
2. ⾃⼰紹介 ⼩原 ⼀哉 (こはら かず や) ウェブエンジニア フェンリル株式会社 @KoharaKazuya 2 2
3. 発表の経緯 以前に グラフィカルに URL を編集できるサービスを作った という記事を Qiita に書いた URL Editor という PWA を作った話 その記事に中津川さんからコメントもらったので LT する 今⽇話すことは記事と似ているが内容を少し変えている 3 3
4. 作ったものの紹介 (デモ) URL Editor https://url-editor.koharakazuya.net/ 4 4
5. 作った背景・動機 (PWA Night はプログラマーに限らない参加を募っているとい うことで、技術的でない話からする) 5 5
6. オフライン利⽤できる Web サービス だからこそ嬉しいものを作りたい！ 6 6
7. PWA でネイティブアプリっぽいことができるようになった！ という話は聞くが、こうも考えてしまう 「ネイティブアプリ使ってればいいじゃん」 ※ あくまでエンドユーザーとしての視点。開発コストなどの開 発者視点はあえて無視している 7 7
8. だって、ネイティブアプリの⽅がサクサク動くし、 オフラインでも使えるし…… Web でアプリっぽいものを作る価値って何？ ということを改めて考えた。 8 8
9. (PWA に限らない) Web の良さとは ※ ネイティブアプリと⽐較して エンゲージメント: ユーザーがサービスを知ってからインス トールの⼿間と⼤きなギャップをスキップできる ほとんどのスマートデバイスで動く ハイパーリンクで参照できる 9 9
10. この「良さ」を表してるサービスを作ろう！ → 作った 10 10
11. PWA が適してるサービス 今回は URL Editor というものを作ったが、他のサービスも 「インストールするほど欲しくないかもしれないが、すぐに試 せて便利なら使いたい、気に⼊ったらインストールしたい」 みたいなものは PWA だと嬉しい、と感じた。 11 11
12. 作ってわかったこと (ここから技術的な話) 12 12
13. URL Editor のアーキテクチャー 13 13
14. URL Editor のアーキテクチャー HTML, CSS, JavaScript を初回にダウンロードしてきて実 ⾏するだけ Web API サーバーなどは存在しない 真の SPA (笑) ファーストビューが全て 14 14
15. URL Editor の特⻑ 状態は URL に保持する リンクを共有するとほぼ同じ状態を復元できる インストール可能 オフライン利⽤可能 15 15
16. Preact Preact: ⼩さい (3 KB) の React の代替 私はよく使う。サイズが⼩さいので⼩さなアプリを作るときに 適している。細かい点で React とは異なる。 16 16
17. Preact CLI Preact CLI: Webpack, Babel などのビルド周りの設定を肩代 わりしてくれる 公式に PWA を簡単に作れると謳っているので使った。 17 17
18. Preact CLI がやってくれること Workbox が組み込まれていて Service Worker + CacheStorage によるオフライン対応が簡単にできる Pre-rendering: SSG とかビルド時レンダリングとか⾔われ るやつ (その他効率的なロードのための機能がいろいろ) (その他開発しやすくするための機能がいろいろ) 18 18
19. ⼊⼒に⾊を付ける技術 <span style="color: green">http</span>:// のように部分的なハイライトをリアルタイムでしたい HTML の contenteditable しか思いつかなかった contenteditable はハマりどころが多いと聞いていた 実際難しかった、でも アプリっぽくしたい PWA には頻出か も 19 19
20. contenteditable の難しい点 . HTML を書き換えるとカーソル位置が破棄される . HTML を書き換えると IME 変換中状態が破棄される . ブラウザによってカーソル移動が⽂字単位にならない 20 20
21. カーソル位置が破棄される ユーザー⼊⼒によって http:// が http// に変わった 瞬間、 <span> などが消える http が scheme 判定ではなくなるため フォーカスが外れる、カーソルがジャンプするなど 対策: HTML の書き換え前後でカーソル位置を保存、復元した 21 21
22. IME 変換中状態が破棄される 前述のフォーカスが外れる、という現象と同じ 変換中に HTML が書き換わるとターゲットを失うので IME が中断する URL は英数字なので関係ないと思いきや、 Android ではデフォルトで IME が動作する 単語の予測⼊⼒などに使う 対策: IME 変換中には HTML 書き換えをしない (リアルタイムの⾊付けを諦める) 22 22
23. カーソル移動が⽂字単位にならない <span>http</span> などの⽂字以外の HTML タグに反 応したカーソル移動みたいな挙動をする 対策: 何もできそうになかったので諦めた 23 23
24. まとめ 「オフライン利⽤できる Web サービス」だからこそ嬉しい ものは何か考えた URL Editor という PWA を作った 作ってわかった技術的な知識を紹介した 24 24