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

by KoharaKazuya

Slide 1

Slide 1 text

グラフィカルに URL を編集できるサービスを作った 2020/05/20 PWA Night vol.16 ⼩原⼀哉

Slide 2

Slide 2 text

⾃⼰紹介⼩原⼀哉 (こはらかずや) ウェブエンジニアフェンリル株式会社 @KoharaKazuya 2 2

Slide 3

Slide 3 text

発表の経緯以前にグラフィカルに URL を編集できるサービスを作ったという記事を Qiita に書いた URL Editor という PWA を作った話その記事に中津川さんからコメントもらったので LT する今⽇話すことは記事と似ているが内容を少し変えている 3 3

Slide 4

Slide 4 text

作ったものの紹介 (デモ) URL Editor https://url-editor.koharakazuya.net/ 4 4

Slide 5

Slide 5 text

作った背景・動機 (PWA Night はプログラマーに限らない参加を募っているということで、技術的でない話からする) 5 5

Slide 6

Slide 6 text

オフライン利⽤できる Web サービスだからこそ嬉しいものを作りたい！ 6 6

Slide 7

Slide 7 text

PWA でネイティブアプリっぽいことができるようになった！という話は聞くが、こうも考えてしまう「ネイティブアプリ使ってればいいじゃん」 ※ あくまでエンドユーザーとしての視点。開発コストなどの開発者視点はあえて無視している 7 7

Slide 8

Slide 8 text

だって、ネイティブアプリの⽅がサクサク動くし、オフラインでも使えるし…… Web でアプリっぽいものを作る価値って何？ということを改めて考えた。 8 8

Slide 9

Slide 9 text

(PWA に限らない) Web の良さとは ※ ネイティブアプリと⽐較してエンゲージメント: ユーザーがサービスを知ってからインストールの⼿間と⼤きなギャップをスキップできるほとんどのスマートデバイスで動くハイパーリンクで参照できる 9 9

Slide 10

Slide 10 text

この「良さ」を表してるサービスを作ろう！ → 作った 10 10

Slide 11

Slide 11 text

PWA が適してるサービス今回は URL Editor というものを作ったが、他のサービスも「インストールするほど欲しくないかもしれないが、すぐに試せて便利なら使いたい、気に⼊ったらインストールしたい」みたいなものは PWA だと嬉しい、と感じた。 11 11

Slide 12

Slide 12 text

作ってわかったこと (ここから技術的な話) 12 12

Slide 13

Slide 13 text

URL Editor のアーキテクチャー 13 13

Slide 14

Slide 14 text

URL Editor のアーキテクチャー HTML, CSS, JavaScript を初回にダウンロードしてきて実⾏するだけ Web API サーバーなどは存在しない真の SPA (笑) ファーストビューが全て 14 14

Slide 15

Slide 15 text

URL Editor の特⻑状態は URL に保持するリンクを共有するとほぼ同じ状態を復元できるインストール可能オフライン利⽤可能 15 15

Slide 16

Slide 16 text

Preact Preact: ⼩さい (3 KB) の React の代替私はよく使う。サイズが⼩さいので⼩さなアプリを作るときに適している。細かい点で React とは異なる。 16 16

Slide 17

Slide 17 text

Preact CLI Preact CLI: Webpack, Babel などのビルド周りの設定を肩代わりしてくれる公式に PWA を簡単に作れると謳っているので使った。 17 17

Slide 18

Slide 18 text

Preact CLI がやってくれること Workbox が組み込まれていて Service Worker + CacheStorage によるオフライン対応が簡単にできる Pre-rendering: SSG とかビルド時レンダリングとか⾔われるやつ (その他効率的なロードのための機能がいろいろ) (その他開発しやすくするための機能がいろいろ) 18 18

Slide 19

Slide 19 text

⼊⼒に⾊を付ける技術 http:// のように部分的なハイライトをリアルタイムでしたい HTML の contenteditable しか思いつかなかった contenteditable はハマりどころが多いと聞いていた実際難しかった、でもアプリっぽくしたい PWA には頻出かも 19 19

Slide 20

Slide 20 text

contenteditable の難しい点 . HTML を書き換えるとカーソル位置が破棄される . HTML を書き換えると IME 変換中状態が破棄される . ブラウザによってカーソル移動が⽂字単位にならない 20 20

Slide 21

Slide 21 text

カーソル位置が破棄されるユーザー⼊⼒によって http:// が http// に変わった瞬間、などが消える http が scheme 判定ではなくなるためフォーカスが外れる、カーソルがジャンプするなど対策: HTML の書き換え前後でカーソル位置を保存、復元した 21 21

Slide 22

Slide 22 text

IME 変換中状態が破棄される前述のフォーカスが外れる、という現象と同じ変換中に HTML が書き換わるとターゲットを失うので IME が中断する URL は英数字なので関係ないと思いきや、 Android ではデフォルトで IME が動作する単語の予測⼊⼒などに使う対策: IME 変換中には HTML 書き換えをしない (リアルタイムの⾊付けを諦める) 22 22

Slide 23

Slide 23 text

カーソル移動が⽂字単位にならない http などの⽂字以外の HTML タグに反応したカーソル移動みたいな挙動をする対策: 何もできそうになかったので諦めた 23 23

Slide 24

Slide 24 text

まとめ「オフライン利⽤できる Web サービス」だからこそ嬉しいものは何か考えた URL Editor という PWA を作った作ってわかった技術的な知識を紹介した 24 24