総合 ゲーム 画像動画

【開発日誌】Hyper Drag (Firefox用アドオン)

Hyper Drag

https://addons.mozilla.org/ja/firefox/addon/hyper-drag/

 


 

説明

検索補助用のアドオンです。

テキストをドラッグドロップすることで簡単にテキスト検索が行えます。

画像をドラッグドロップすると画像のパスを開いたり、画像を保存したり、グーグル画像検索にかけたりできます。

 

ドラッグする対象によって違う動作をします。

  • テキスト(文字):グーグル検索、ツイート検索、クリップボードへコピー。
  • テキスト(URL):URLを開きます。
  • リンク:テキストの検索、URLの検索、URLを開く。
  • 画像:画像のパスを開く、保存する、グーグルで画像検索する。

 

テキスト(URL)は「http」「https」「ttp」「ttps」「ドメイン」から始まる、
URLとして利用できる文字列を判別してURLとしてタブを開きます。

 


 

現在確認されているバグ

報告を受け付けています。

 


 

更新履歴

1.0.0

WebExtensionsに対応。

1.1.0

テキストのコピー、ツイート検索を追加。
ドラッグする各方向に対する動作を設定できるように変更。
ドラッグ最低距離の最小値を20から10へ変更。

1.2.0

リンクのURLコピーを追加。
コピーしたことを通知領域(右下)に通知するように変更。

1.2.1

プレーンテキストのURL判定を変更。
末尾スペース、改行に対応。テスト用テキストを用意しました。

1.3.0

プレーンテキストのURL判定を変更。
先頭の空白、改行に対応。テスト用テキストを用意しました。
Firefox 58との互換性。

1.3.1

バグを修正。

1.3.2

設定画面の表示を修正。

1.3.3

タブフォーカスの設定を追加

1.3.4

プレーンテキストのURL判定を変更。
Ctrlキーを押している間はURLでもプレーンテキストとして検索するように変更。

1.4.0

検索エンジンを指定できるように変更。

1.4.1

画像をドラッグした時にリンクを開くアクションを追加。

1.4.2

プレーンテキスト(URL)の判定を変更。

1.4.3

画像の簡易保存アクションを追加。

1.5.0

それぞれのアクションに「タブの位置」と「タブの状態」の設定を追加。

 


 

機能修正・追加予定

グーグル以外の検索サイトを設定したりドラッグする方向で検索サイトを変えたりするのは容易なのですが、その機能はまだ付けていません。

設定や機能を増やすことでユーザビリティが低下することもあるので要望があれば、という感じで実装を先送りにしました。

 


 

コード解説

全て書くと量が多く解説も難しいのでロジックと詰まりそうなポイントを解説。

 

APIはタブとストレージとダウンロードを使っています。

“permissions”: [“tabs”,”storage”,”downloads”]

 

ドラッグすると○○という処理はJavaScriptのドラッグイベントを使っています。

この8つの内dragstart,dragend,dragover,dropを使用しています。

DOM上のドラッグイベントは”content_scripts”に書いています。

 

コンテンツスクリプとバックグラウンドスクリプトの間のやり取りはメッセージで行っています。 browser.runtime.sendMessage()

コンテンツスクリプだけでもURL移動などは簡単にできるのですが、タブの操作は”tabs”のAPIが必要です。コンテンツスクリプには”tabs”を使用できる権限がないので、バックグラウンドスクリプトに渡す必要があります。

 

画像の保存に使っている”download”のAPIも同様です。

コンテンツスクリプト内でHTML5のdownload属性を持つ<a>リンクをクリックする方法では画像保存が上手く機能しません。


ver 1.1.0 (2017/12/25-)

クリップボードへテキストをコピーする為に”clipboardWrite”のパーミッションを追加しました。アドオンを追加更新する際にはクリップボードへの書き込みの許可を求めます。

“permissions”: [“tabs”,”storage”,”downloads”,”clipboardWrite”]

将来的には”clipboard”のAPIに移行する予定ですが、現時点では画像のコピーのみ対応していてテキストやHTMLのコピーはできません。
https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/clipboard

クリップボードへのコピーには現時点では素JavaScriptのdocument.execCommand(‘copy’)
を使っています。execCommandのコピーはユーザーのアクション(主にクリック操作)がなければ使用できません。Firefoxでは「ユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。」というエラーがでると思います。

セキュリティの都合上そうなっているのですが、ドラッグドロップ操作でも同様に弾かれるので”clipboardWrite”のパーミッションを使いましょう。


ver 1.2.0 (2018/01/06-)

クリップボードへコピーしたときに成功したか分かりにくかったので通知領域に表示するようにしました。通知機能を使う為に”notifications”のパーミッションを追加しました。アドオンを追加更新する際に通知領域へ通知の許可を求めます。

“permissions”: [“tabs”,”storage”,”downloads”,”clipboardWrite”,”notifications”]

リンクのURLコピーにはexecCommandを使用しています。一時的にページに要素を追加し選択後コピーしているので、ページの表示が崩れる可能性があります。

コードはJavaScriptでクリップボードに文字をコピーする(ブラウザ)を参考にさせてもらいました。将来的には”clipboard”のAPIに移行する予定です。


ver 1.2.1 (2018/01/06-)

プレーンテキストのURL判定を変更して、末尾にスペースや改行があってもURLだと判定するようにしました。スペースは1文字までURLだと判定します。

先頭は「http」「https」「ttp」「ttps」「ドメイン」から始まる必要があります。

確認用テキスト(URL)

https://addons.mozilla.org/ja/firefox/addon/hyper-drag/
https://addons.mozilla.org/ja/firefox/addon/hyper-drag/
http://addons.mozilla.org/ja/firefox/addon/hyper-drag/ ahttps://addons.mozilla.org/ja/firefox/addon/hyper-drag/a https://addons.mozilla.org/ja/firefox/addon/hyper-drag/ a


ver 1.3.0(2018/01/25-)

プレーンテキストのURL判定を変更しました。先頭の空白や改行に対応しました。これで一行のテキストをダブルクリックで選択したときにURLと認識できる精度が上がったと思います。

Firefox 58との互換も確認しました。バグなどあれば報告を受け付けています。


ver 1.3.1(2018/01/26-)

ドロップ方向:上下に対応するアクションが使えなかったバグを修正。


ver 1.3.2(2018/02/13-)

設定画面の表示崩れを修正。


ver 1.3.3(2018/08/03-)

タブフォーカスの設定を追加。

テキスト、リンク、画像でタブの動作をそれぞれ設定できるようにしました。


ver 1.4.0(2019/03/18)

検索エンジンを指定できるように変更。

この検索エンジンはFirefoxのアドレスバーや検索バーで使用されている検索エンジンを利用しています。自分で新たに追加することもできます。

Firefoxのオプションの検索で設定できます。追加できる検索エンジンはこちらから検索できます。https://addons.mozilla.org/ja/firefox/search-tools/

検索エンジンを利用するにあたって新しくsearch APIの権限を追加しました。これに伴いサポートするバージョンはFirefox 63.0以上になりました。

 

search APIの使い方を少しだけ解説。

現時点では2つしかメソッドがなく最小限の機能しかありません。

  • search.get() 登録されている検索エンジンを取得します。名前を取得しましょう。
  • search.search() 検索ワードと検索エンジンを指定して検索します。

タブの指定で機能が足りていないので少し工夫が必要です。何も指定しない場合は最後列にアクティブで開きます。指定する場合は{tabId: integer}で指定します。

タブの位置指定とアクティブの指定は”tabs API“と組み合わせることで再現できます。

  1. search.search()する前に全タブのidを取得 tabs.query()
  2. tabs.create()で最終的に再現したい状態でタブを作成
  3. URLは”about:blank”を使用
  4. もう一度全タブのidを取得して1.で取得したid郡と比較してsearch.search()で置き換えるタブのidを探しておく
  5. search.search()を実行、tabIdには4.で取得したidを指定する

スマートではありませんがsearch APIが変更されるまではこうしておきます。


ver 1.4.2 – 1.4.3(2019/04/13)

プレーンテキストに含まれているURLの判定を調整。より補足しやすいように変更しました。

画像の簡易保存アクションを追加しました。保存設定はブラウザのファイル保存設定に従うのでファイル名の変更や保存場所の指定はできません。指定したい場合は通常の画像保存アクションを使ってください。


ver 1.5.0(2019/05/14)

全てのアクションで「タブの位置」と「タブの状態」を変更できるようにしました。

少し複雑になりましたがこれで思い通りのアクションを設定できると思います。

コードを大きく変更したので旧バージョンの設定が上手く引き継げない場合があるかもしれません。その他バグも見つけたらコメントしておいてください。

 

この記事へのコメント

  1. 名前:名無しさん 2017/12/20(水) 16:42:36返信する

    必要な機能に焦点を絞りユーザビリティを重視した良いアドオンだと思います。

    要望なのですが、
    ・画像検索のオンオフ切り替えを追加
    ・ドラッグ最低距離に10を追加
    して頂けると幸いです。

    • 名前:hyper_T 2017/12/22(金) 14:59:53返信する

      両方とも次回の更新で追加させて頂きますね。
      12月末から1月の中頃までに配信予定ですので更新をお願いします。

  2. 名前:名無しさん 2018/01/04(木) 11:45:03返信する

    57で動作しなくなったDragItの代替を探して色々試してたどり着きました

    指定サイトでの検索の機能は実装可能であれば是非お願いしたいです
    あと、リンクへのドラッグにリンクURLをコピーというアクションがあればとも思います

    • 名前:hyper_T 2018/01/04(木) 13:20:39返信する

      指定サイトでの検索機能とは、
      自分でURLを指定したり、好きな検索サイトを追加したいということでしょうか?
      パラメータを自分で作成する方法は実装を考えたのですが、
      セキュリティの都合上難しく危険があります。
      リリースする場合は公式の審査を通さないようなものになるかもしれません。
       
      リンクのドラッグURLコピーは何故思いつかなかったのか、素晴らしいアイデアをありがとうございます。
      次回のアップデートで実装させてもらいます。
      早ければ今週中に、間に合わなければFirefox58リリース(予定日の1月23日)以降に合わせて更新します。

  3. 名前:名無しさん 2018/02/13(火) 11:55:51返信する

    大変便利な拡張で助かっております。
    設定画面で”テキスト”のみ、説明文がズレて下方向ドラッグの設定にかぶってます。
    クリックで選択できないので、Tabキーと方向キーで設定しました。
    Windows10 1709、Firefox 58.0.2、Hyper Drag 1.3.1

    • 名前:hyper_T 2018/02/13(火) 12:58:35返信する

      報告ありがとうございます。
      環境によってはそのようなことが起こるのを想定していませんでした。
      今週中には修正させて頂きますね。報告感謝します。

  4. 名前:名無しさん 2018/04/14(土) 22:08:58返信する

    求めていたもの。
    もっと有名になってほしい

    • 名前:hyper_T 2018/04/15(日) 00:54:49返信する

      役に立っているなら幸いです。
      作った甲斐がありました、うれしいです。

  5. 名前:名無しさん 2019/02/21(木) 08:43:08返信する

    リンクのテキスト検索ができるアドオンをさがしていました。
    DragIt以外のアドオンではどうしてもリンクを開くしかできなかったので、それができたDragItも更新を終えてしまいました。
    このアドオンを見つけたときはうれしかったです。

  6. 名前:名無しさん 2019/03/17(日) 15:55:49返信する

    検索エンジンの指定はできませんか?
    後、斜め方向のジェスチャもあれば良いのですが
    ダメ元でリクエストしておきます

  7. 名前:hyper_T 2019/03/17(日) 17:20:45返信する

    >>6
    検索エンジンはFirefoxに登録されている物の中から選べるようにするAPIが整ったので近い内に実装しますね。アドオンの自動更新を有効にしておいてください。
    これに伴いFirefox 63より低いバージョンはサポート対象外になります。
     
    斜めのアクションは精度が低くなるので実装予定は無いです。
    上下左右の4方向をいくつか組み合わせて行うジェスチャーが代替案ですが、こちらもすぐに実装する予定はありません。
    他にもこういう機能が欲しいというのがあれば参考にするので教えてくださいね。

  8. 名前:名無しさん 2019/04/03(水) 06:15:18返信する

    いつも大変便利に使わせていただいております。
    ありがとうございます。

    画像のコマンドに「リンクを開く」があると、
    リンクされた画像をドラッグする時にとても助かります。
    実装できそうでしたらよろしくお願いします。

  9. 名前:hyper_T 2019/04/03(水) 12:24:01返信する

    >>8
    こちらこそありがとうございます。
    実装は可能ですが、マウスの中クリックでは解決できませんか?

  10. 名前:名無しさん 2019/04/03(水) 22:55:49返信する

    >>9
    実は以前使っていたドラッグ&ドロップ操作のレガシーアドオンEasy DragToGo++にリンク付きの画像をドラッグしてリンクを開くというアクションがありまして、
    ついつい癖でリンクを開こうとして文字列だけでなく画像もドラッグしてしまうのです。
    中クリックでもリンクは開けるのですが、
    できれば画像のドラッグでもリンクを開けたら嬉しいなと。

  11. 名前:hyper_T 2019/04/03(水) 23:30:34返信する

    >>10
    分かりました。近日中に実装して更新するので自動で更新確認するようにアドオンを設定しておいてください。

  12. 名前:名無しさん 2019/04/03(水) 23:57:45返信する

    >>11
    ありがとうございます!
    Hyper Dragを見つけたことでQuantumに乗り換える決心がついたと言っても過言ではないので嬉しいです。
    更新が届く日を楽しみにしております。

  13. 名前:hyper_T 2019/04/04(木) 00:11:39返信する

    >>12
    私もQuantumの壁を超える決心はなかなかつかなかったので役に立てたのなら幸いです。

  14. 名前:名無しさん 2019/04/06(土) 09:48:58返信する

    >>13
    おかげさまで希望通りの操作ができるようになりました。
    更新ありがとうございます!

  15. 名前:名無しさん 2019/09/14(土) 01:32:21返信する

    毎日便利に使わせていただいております。
    ありがとうございます。

    今夜から急に動作がおかしくなりました。
    リンクや画像をドラッグして新しいタブで開こうとしても、
    Googleで検索されてしまいます…。

  16. 名前:hyper_T 2019/09/14(土) 06:09:13返信する

    >>15
    報告ありがとうございます。安定版69.0から先行したバージョン70.0b6までで問題が確認できていなかったので、別のアドオンと干渉しているのかもしれません。
     
    まずはアドオンをHyper Dragのみ有効にして上手く動作するか確認してみてください。
    それでも上手く動作しない場合はHyper Dragも一度無効にしてから再度有効にして確認してみてください。
    干渉しているアドオンが判明した場合はそちらも教えていただければ、対応できる範囲で検証してみます。

  17. 名前:名無しさん 2019/09/14(土) 08:17:12返信する

    返信ありがとうございます。
    今朝firefoxを起動したら、
    いつも通り使用できました。
    お騒がせしてすみませんでした!

  18. 名前:hyper_T 2019/09/14(土) 08:19:17返信する

    >>17
    了解です。報告ありがとうございました。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。