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
Design Foundational Data Engineering Observability
sucitw
3
210
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
Ruby Parser progress report 2025
yui_knk
1
460
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
Kiroで始めるAI-DLC
kaonash
2
630
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Testing Trophyは叫ばない
toms74209200
0
890
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
110
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Applications with DynamoDB
mza
96
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
We Have a Design System, Now What?
morganepeng
53
7.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Embracing the Ebb and Flow
colly
87
4.8k
Documentation Writing (for coders)
carmenintech
74
5k
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