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
15k
グラフィカルに 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
160
Go でのエラー生成パターン
koharakazuya
0
16k
pickpatch を作った話と仕組みの解説
koharakazuya
0
50
Other Decks in Programming
See All in Programming
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
C++20 射影変換
faithandbrave
0
550
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
510
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
260
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
Code Reviewing Like a Champion
maltzj
524
40k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Faster Mobile Websites
deanohume
307
31k
Balancing Empowerment & Direction
lara
1
380
A Tale of Four Properties
chriscoyier
160
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
KATA
mclloyd
30
14k
Into the Great Unknown - MozCon
thekraken
39
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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