クリック座標をフラグメント識別子にして検索できるChrome拡張を開発した

投稿日:2019/05/19

はじめに

どうもこんにちは!
4回生になり,卒論テーマ決めで慌ただしくなっていますw
そんな中で趣味開発しました!(何やってんの)

さて本題ですが,皆さんはURI,すなわちURLを他の人に共有したりすると思います.
その際フラグメント識別子という,URLの最後に「#」から始まる文字列があることを見かけると思います.
これはWebページのレイアウトを描写するHTMLにおけるタグの属性の1つである「id」属性に紐付けられています.
したがってフラグメント識別子付きのURLで検索すると,フラグメント識別子と一致するidを持つHTMLタグのところまでそのWebページ内をスクロールしてくれる,ということになります.
一部のサイトでは「Anchor(アンカー)」として鎖のようなアイコンでそれを選択できるものがあります.

しかし,最近のサイトにはそのid属性を使用しているところが少なくなっています.
そのためページ内の特定の位置に跳べる手段が少なくなっています.

そこで私は,上記で述べたid属性以外のフラグメント識別子を使えるようにChrome拡張アプリを開発しました.
以下リンクからそのChrome拡張をインストールして使えます.
CoordinateHopper | Chromeウェブストア

DEMO

DEMO.gif
クリックで拡大表示されます。

どんなの?

GIFのデモ映像(DEMO.gif)を載せているので,そちらも参考にしてください.
DEMO.gifでは,下記のように示しています.
(1)本アプリ「CoordinateHopper」を一度見せています.
(2)記事内の「どんなの?」チャプターにスクロールし,右クリックのコンテキストメニュー操作.
(3)CoordinateHopperを開き,生成されたURLをコピー.
(4)GitHubのページでCoordinateHopperを開き,コピーしたURLを貼り付けて「Go」.
(5)すると(2)で操作した位置に自動で跳んだことが確認できる.
(6)さらに,モード「新規タブで開く」を起動して再度「Go」.
(7)すると新規タブが開かれ,そこで(5)と同様の動作を確認できる.

つまり,このChrome拡張アプリには2つの大きな機能があります.
①マウスクリック座標からURL生成 
上記の(2)でマウスの右クリックした位置の座標を取得しています.
そしてバックグラウンドでその座標データを基にフラグメント識別子を発行し,開いていたサイトのURLと合成してChrome拡張のポップアップに表示((3)のところ)するようにしています.

②URLを取得して指定座標に跳ぶ 
(4)で「Go」していましたが,これで入力したURLのページに普通に遷移できます.
更に座標情報からなるフラグメント識別子も解析するので,その位置までスクロールもしてくれます.
ただ,クリックした位置と結構ズレてしまうこともたまにあり,原因解明中ではあります….

課題点

いっぱいあります….
①Googleホームページから遷移できない 
なんかできないですね~….
普通のWebページではないと思っていましたが.Chromeのデスクトップアプリ風な部分もあるのかなぁ?
*******2019/05/21更新*******
上記について,解決しました.

②サイトによって座標のズレが激しい 
これは本アプリにとっては大打撃.
前章の「②URLを取得して指定座標に跳ぶ」で,実はもう1つ,『指定座標の部分に横長の蛍光マーカーを一時点滅させる』機能も実装していました.
しかし座標がズレすぎて望む位置にマーカーの描写ができなかったので,一旦コメントアウト(実装してあるけど実行していない)しています.

③サイトによってフラグメント識別子を付与できない 
Googleドライブがそうでした.他にもあるかもしれません….
そもそもフラグメント識別子を付与できないので,本アプリが機能しないということです.

最後に

本アプリはTypeScriptとReactで実装しました.
開発時間は5日間約50時間でした!

今回は急ぎで開発したので,ストレージ部分とかをRxJSやReduxでできたりするのかな~と,余裕があったら替えてみようと思います.

GitHubにもあげていますので,課題点も含め,何かアドバイスがありましたらIssueお願いします!(・∀・)
github.com/KagenoMoheji/CoordinateHopper

バージョン情報

●v1.2 
・Googleのホームページからのリダイレクトが可能になりました.
・「新規タブで開く」・「現在のタブで移動する」の選択ができるボタンを追加しました.

●v1.1 
・フラグメント識別子がheightもしくはwidthのいずれかが付与されたURLで「Go」した場合,heightのみに限りスクロールするように修正しました.

タグ:

Comment

コメントはありません。
There's no comment.