HOME > NOTEBOOK > PC > Mac > [macOS]各ブラウザ間でのページ共有方法およびショートカット設定方法

NOTEBOOK

[macOS]各ブラウザ間でのページ共有方法およびショートカット設定方法

投稿日：

Webページの制作を行う際、一つのページを複数のブラウザで確認することがよくあります。

表示崩れやプログラムの不具合などが無いか、見比べて確認しなくてはなりません。

また、プライベートでブラウザを利用する際も
「このサイトは別のブラウザでアクセスしなければいけない……」
といった場面に遭遇することもあるかと思います。

しかし、その度に「URLをコピーし、他のブラウザの新しいタブを開き、URLをペーストしてエンターを押す」という手順を踏むのは非常に不便です。

そこで、「ブラウザ間でのページ共有（現在開いているページを他のブラウザでも表示させる）」方法、およびキーボードショートカットの設定方法をご紹介します。

ブラウザについて

今回設定するブラウザは以下の3つです。

  • Google Chrome（以下、Chrome）
  • Firefox
  • Safari

ChromeとFirefoxでは拡張機能を使用しますが、Safariには同じ拡張機能はありません。

ですが、後述する自動化ツール（Automator）を利用することで同じ動作を再現することができます。

注意点

  • この記事ではmacOS版のみを取り扱います。
  • Windows版でも設定することができますが、macOS版とは主に以下の点が違います。
    • Pythonが標準でインストールされていないため、手動でインストールする必要がある（Pythonについては後述）
    • Internet Explorer 11 (IE11)版とMicrosoft Edge版の拡張機能がない
    • Safariがない（提供が終了している）

なお、ショートカットは各ブラウザごとにそれぞれ設定しなければならないのでご注意ください。

Chrome, Firefoxの設定

ChromeとFirefoxでの設定手順は以下になります。

  1.  拡張機能（アドオン）をブラウザにインストールする
    1. Open Withをインストールする
    2. Pythonファイルをインストールする
  2. Open Withの設定画面よりキーボードショートカットを設定する

拡張機能（アドオン）のインストール

Open Withについて

「このページを別のアプリで開く」機能を追加するにあたって、「Open With」という拡張機能を利用します。

Open Withを利用すると、画面右上のアイコンや右クリックから呼び出せるコンテキストメニューから、現在閲覧中のページを他ブラウザにコピーすることができるようになります。
加えて、Open With内でキーボードショートカットを設定することができます。

Open Withのインストール

Chrome
ストアページにアクセスして「Chromeに追加」をクリック
Firefox
ストアページにアクセスして「Firefoxへ追加」をクリック

インストールが完了すると、画像の様にブラウザの画面右上にOpen Withのアイコンが新たに追加されます。

Open Withのインストールが完了し、アドレスバーの右側にアイコンが追加された
アドレスバーの右側に追加されたアイコン

続けて、設定画面へ移動します。

設定画面への移動方法

  1. ブラウザ右上のアイコンをクリックする
    （    Chrome・Firefox共に同じ位置）
  2. 「Open Withオプション…」をクリックする
Open Withのアイコンをクリックし、設定画面へと進む
ブラウザの登録については後述します

また、アイコンを右クリック→「オプション」からでも設定画面を開くことができます。

設定画面を開いたら、次にPythonファイルのインストールを行います。

Pythonファイルのインストール

Pythonについて

Python自体はmacOSに標準でインストールされているプログラミング言語のひとつで、PythonファイルはPythonで書かれたプログラムです。Open Withを利用するには、ファイルをPCにインストールする必要があります。

インストール方法

※ファイルの保存場所は一例です。任意の場所に保存して構いません。

  1. 「ダウンロードするにはここをクリック」からファイルをダウンロードする
  2. ダウンロードしたファイルを任意の場所に保存する
    • インストール後にファイルを別の場所に移動させてしまうと、再びインストール作業を行わなければなりません。
      ですので、移動や変更のないフォルダに置くようにします。
    • 今回は/Users/ユーザー名に新しくopen_withフォルダを作成し、そこにファイルを移します。
  1. 移動が完了したら、ターミナルを起動する
    • ターミナルは/Applications/Utilitiesにあります。
  2. ターミナル上でファイルを保存したディレクトリに移動する
    cd /Users/ユーザー名/open_with
  3. ファイルに「実行」権限を付与するためのコマンドを実行する
    chmod u+x open_with_mac.py
  4. コマンドを実行してインストールする
    ./open_with_mac.py install
  5. 最後に、Open Withの画面に戻り「インストールのテスト」を押す
    • チェックマークと共に
      バージョン ◯◯◯ が/​Users/​ユーザー名/​open_with/​open_with_mac.py で見つかりました。
      と表示されれば、インストール作業は完了です。

      設定ページの「インストールのテスト」により、Pythonファイルのインストールが正常に完了したことが確認できた
      このような表示が出ればインストール成功です

これでOpen Withを利用できるようになりました。

なお、PythonファイルはPCにインストールされ、一度インストールすればChromeとFirefoxのどちらでも利用できるようになります。

引き続き、ブラウザの設定をしていきます。

ブラウザの登録

Open Withに、「現在設定しているブラウザ」以外のブラウザを登録します。
つまり、Chrome側のOpen WithにChrome自身を登録する必要はありません。

  1. インストール手順の下にある「ブラウザを探す」ボタンを押す
    • 自動的にブラウザをリストアップします。
    • 登録できなかったブラウザが無ければ、作業は終了です。
      次の手順は飛ばして構いません。
    • ブラウザを削除する場合は、右側にある「削除」ボタンを押します。
  2. 検知されなかったブラウザは「ブラウザを追加」から手動で追加する
    • 「名前」はブラウザ名を入力します。
    • 「コマンド」にはブラウザのパスを入力します。パスはダブルクォーテーション（”）で括ってください。
      ブラウザのパスは、以下の手順で入力できます。
      1. Dockにあるブラウザを右クリックして「オプション」→「Finderに表示」を選択
      2. ブラウザが選択された状態でアプリが保存されているフォルダが開くので、それを再び右クリック
      3. optionキーを押し続ける。その間、メニュー内の「”◯◯◯”をコピー」が「“◯◯◯”のパス名をコピー」に変化するので、それを選択
      4. クリップボードにコピーされるので、Open Withの設定画面に戻り、「ブラウザ」に貼り付ける
    • 入力できたら、「追加」ボタンを押します。
自動的に判別、または手動で追加してOpen Withにブラウザを認識させる
ブラウザのリストアップ

ブラウザの登録後、再び右上のアイコンをクリックすると、登録されたブラウザが表示されます。
ここから共有したいブラウザを選択すると、正常に動作していることが確認できます。

ブラウザの登録後のアイコンメニュー
ページの共有先が表示されます

この手順をChromeとFirefoxの両方で行います。

これでブラウザの登録ができました。
その後、機能をキーボードショートカットに割り当てていきます。

ショートカットの設定

  1. 設定したいブラウザの右側にある「編集」ボタンを押します。
  2. 「ショートカットキー」のプルダウンメニューからショートカットを割り当てる
    • このとき、ショートカットとブラウザの組み合わせを統一するようにしてください。
    •  割り当てることができるショートカットは以下の3種類です。
      • option (Alt) + shift + I
      • option (Alt) + shift + O
      • option (Alt) + shift + P
    • 今回は
      option (Alt) + shift + IにFirefoxを、
      option (Alt) + shift + OにChromeを、
      option (Alt) + shift + PにSafari
      を設定しました。
  3. 割り当てたら「更新」ボタンを押す
    • 各ブラウザも同様に設定していきます。
  4. ショートカットが正しく機能しているかの確認をする

この手順をChromeとFirefoxの両方で行います。

以上で設定がすべて完了しました。
次はSafariの設定を行っていきます。

Safariの設定

Safariでは、自動化ツールの「Automator」で作成した機能をショートカットに割り当てることで、Open Withと同じ機能を再現することができます。

Automatorについて

Automatorは、OSに標準でインストールされているアプリです。
「検索」や「ファイルのコピー」などの操作（アクション）を繋げて一連の流れにし、一つの機能（ワークフロー）として自動化することができます。

それをmacOSの「サービス」として登録することで、キーボードショートカットを実現することができます。

それではAutomatorでワークフローを作成していきます。

ワークフローの作成方法

最初にAutomatorを起動します。
アプリは/Applicationsにあります。

  1. 「クイックアクション」を選ぶ
  2. 「選択」ボタンをクリック
ワークフロー新規作成時の種類の選択
クイックアクションにすることで「サービス」として登録できます
事前準備

画面上部のプルダウンメニューを以下の様に変更します。

ワークフローが受け取る現在の項目：入力なし
検索対象：Safari.app

ワークフローの設定
イメージとカラーは任意に選択して構いません

続けて、ワークフローの作成を行っていきます。

1．Safariで現在表示しているタブのURLを取得する

画面左側にサイドバーが表示されていない場合は、画面左上の「ライブラリ」ボタンを押して表示させてください。

  1. 「アクション」のライブラリから、「インターネット」を選択する
  2. 「Safariの現在のWebページを取得」をダブルクリック、もしくは右側のワークフローパネルにドラッグ&ドロップして追加する

「Safariの現在のWebページを取得」アクションの追加

このアクションはこれで追加完了です。
次に、「指定したブラウザを起動させるコマンド」のアクションを設定します。

2．取得したURLでブラウザを起動もしくは新規タブを作成する
  1. 「アクション」のライブラリから、「ユーティリティ」を選択する
  2. 「シェルスクリプトを実行」をダブルクリック、もしくは右側のワークフローパネルのドラッグ&ドロップして追加する
    • 「Safariの現在のWebページを取得」の下に繋げる様にしてドラッグ&ドロップしてください。
      「Safariの現在のWebページを取得」の下側に「シェルスクリプトを実行」をドラッグ&ドロップする
      こうすることで、アクションは上から順番に実行されていきます
  3. 追加されたアクションの「入力の引き渡し方法」を「引数として」に変更する
  4. 自動的にコマンドが入力されるが、すべて削除して以下のコマンドを入力する
    • Chromeの場合
      open -a Google\ Chrome "$1"
    • Firefoxの場合
      open -a Firefox "$1"
  5. 画面右上の「実行」ボタンを押して動作を確認する
    • Safariが起動していて、選択しているタブがWebページを表示している必要があります。 

動作の確認ができましたら、作成したワークフローを保存します。

ワークフローの保存

メニューの「ファイル」から「保存」を選択します。

この時、ワークフローの名前（ファイルの名前）はそのままサービスの名前となりますので、機能や共有先のブラウザがわかる名前をつけます。
今回は、「SafariのページをChrome（Firefox）で開く」という名前で、ChromeとFirefox、それぞれのワークフローを保存します。

これで、Automatorによるサービスの作成は完了です。

最後に、作成したサービスにキーボードショートカットを割り当てます。

ショートカットの設定

  1. macの「システム環境設定」を開き、「キーボード」の項目を選択
  2. 「ショートカット」タブを選択し、左側の一覧から「サービス」を選択
  3. 下にスクロールしていき、「一般」に今回保存したサービスが追加されているのを確認する
  4. サービスの左側のチェックボックスにチェックを入れる
  5. サービスの右側の箇所をクリックして、任意のショートカットを割り当てる
    • ブラウザーとショートカットの組み合わせを統一します。
      Open Withの設定同様、
      option (Alt) + shift + IにFirefoxを、
      option (Alt) + shift + OにChromeを設定します。

キーボードショートカット割り当ての説明

最後に、Safari上でショートカットを使用し、正しくページが共有されることが確認できれば、Safariの設定作業はすべて完了です。

なお、起動直後のSafariは、サービス自体はメニューから利用できてもショートカットを認識できていない可能性があります。

もしショートカットが反応しない場合は、メニューバーから「サービス」の一覧を表示させてから、もう一度ショートカットを試してください。

長くなりましたが、以上がページ共有機能と、それをキーボードショートカットに設定する方法の紹介でした。

拡張機能のインストールやファイルの作成など、多少の手間はかかりますが、一度設定してしまえば効率よくWebサイトの検証やブラウジングができるようになるはずです。ぜひお試しください。

参考

Shimizu.