レスポンシブ表示を確認する場面が増えたので個人的に主要ブラウザと考えている、Safari・GoogleChrome・Firefoxで確認する方法を紹介します。

デフォルト機能で確認はできますが、拡張機能を使用した方が使い勝手が良い時もあったので、併せて拡張機能の紹介もしていきます。

Safari

Safariは比較的手早く表示確認ができます。

Safari起動後、上部メニューバーの開発➡︎レスポンシブ・デザイン・モードにするを選択します。
もしくは⌃ control+⌘ command+Rでも大丈夫です。

すると下記のようにiPhoneやiPadなどの表示が確認できます。

結構直感的に確認できるので簡単に操作方法を説明します。

注釈でも説明していますが、アイコンを選択すると、それぞれのデバイスでの表示を確認できます。
アイコンを再度クリックするとデバイスの向きを変更できます。

右上のリストメニューを選択するとブラウザの変更が行えます。
前まではIEなども選択できましたが、現在はMicrosoftEdgeになっています。Windows用ブラウザも選べるところに優しさを感じます。

確認してみましたが、Safariにはレスポンシブ表示用の機能拡張も用意されていないようで、デフォルトの機能で確認するのみのようです。

比較的操作方法が簡単なのがSafariの良いところではありますが、確認できるデバイスがApple製品のみなのが少しデメリットですね。

GoogleChrome

GoogleChromeの場合は操作ステップが多いです。

GoogleChrome起動後、下記のいずれかの方法でデベロッパーツールを起動します。

デベロッパーツール起動

下記のようにデベロッパーツールが表示されます。
左側アイコン を選択すると、レスポンシブモードに切り替わります。
また、そのままだと視認性が悪いので右側の拡大しているメニューボタン「⋮」を選択し、DockSideの項目よりツールの表示場所を変更します。

レスポンシブモードはツールを左右どちらかに表示させると視認性が良いと思います。

下記にGoogleChromeレスポンシブモードで使用できる機能を簡単に説明します。

検証するデバイスを選択

上部メニュー➡︎ドロップダウンリストメニューより検証するデバイスを選択できます。

特定のデバイスを指定したり、「Responsive」を選ぶことでサイスを変更することができます。

検証するデバイスを追加

上部メニュー➡︎ドロップダウンリストメニュー➡︎Edit...を選択するとデフォルトで表示されている主要デバイス以外のデバイスを追加できます。

追加できるデバイスの種類は豊富です。

指定サイズデバイスを追加

検証デバイス追加画面の「Add custom device...」を選択すると、自分で指定したサイズのデバイスを追加できます。

デバイスサイズを変更（検証デバイスResponsiveを選択している時のみ）

検証デバイス「Responsive」を選択しているときは、上部メニューよりデバイスサイズを素早く変更できます。

数字を指定するだけでなく、上部バーより規定サイズを選んで素早くサイズを変更できるのも便利です。

デバイスの向きを変更

上部メニューのアイコン をクリックすると、表示しているデバイスの向きを変更できます。

デバイスタイプを変更（検証デバイスResponsiveを選択している時のみ）

検証デバイス「Responsive」を選択しているときに、上部メニューボタン「⋮」を選択し「Add device type」を選択すると、上部メニューにデバイスタイプ変更メニューが表示され、スクリーンタッチ式かそうではないデバイスなどの変更ができます。

メディアクエリを表示

上部メニューボタン「⋮」を選択し「Show media queries」を選択するとCSSで指定しているメディアクエリを色分けして表示できます。

それぞれの色の意味は下記のようになっています。

メディアクエリを指定しているCSS内コードを表示

メディアクエリバーを右クリック➡︎Reveal in Source Codeより、該当するメディアクエリを指定しているCSS内のコードを表示することができます。

コードを探す手間が省けるのでとても便利な機能です。

該当するメディアクエリのサイズへ検証デバイスサイズを変更（検証デバイスResponsiveを選択している時のみ）

メディアクエリバーをクリックすると、指定されているメディアクエリのサイズへ検証デバイスのサイズを変更できます。

定規を表示

上部メニューボタン「⋮」を選択し「Show rulers」を選択すると定規が表示されます。

正確なサイズが確認できるので結構便利です。

デバイスのフレームを表示

上部メニューボタン「⋮」を選択し「Show device frame」を選択すると、デバイスのフレームが表示されます。

動作検証の際にイメージが湧きやすいですね。

スクリーンショットを撮影

上部メニューボタン「⋮」を選択し「Capture screenshot」を選択とスクリーンショットを撮影できます。

GoogleChromeについては以上です。GoogleChromeの機能の豊富さに驚きます。操作ステップは多いですが無料とは思えないほどの機能かと思います。

今回説明した内容よりもっと深掘りして検証する機能が用意されていますので、詳細な情報はGoogleサイトを確認してみてください。

参照サイトTools for Web Developers

素早く表示できる拡張機能「mobile browser emulator」

既に説明した通り、GoogleChromeにはデフォルトでレスポンシブ動作を検証する機能は、十分揃っていますが表示させるまでのステップが少し多く、唯一の難点と言えるのかなと考えています。

「mobile browser emulator」だと少ないクリックでレスポンシブ表示を確認できるので素早く確認したいときには便利です。

拡張機能mobile browser emulator

操作はとても簡単でインストールしたら、上部メニューより追加されたボタンを選択し、4種類のサイズから選ぶだけです。

拡張機能が更新されていなく、対応しているデバイスも少ないのでしっかりと検証するには不足感はありますが、手早く表示させることはできるので紹介しました。

Firefox

GoogleChrome程ではないですが、Firefoxでもレスポンシブ表示を確認する機能が豊富に用意されています。

Firefoxの場合は下記の方法でレスポンシブモードに変更できます。

Firefoxでは開発ツールを起動しなくても直接レスポンシブモードに変更できます。ショートカットを使用すればより素早くレスポンシブ表示を確認できます。

開発ツール右上のメニューボタン「⋯」を選択すると表示位置を変更できます。
GoogleChromeと同様に開発ツールは左右どちらかに表示させた方が使いやすいと思います。

GoogleChromeと重複する箇所はありますが、下記にFirefoxのレスポンシブデザインモードで使用できる機能を簡単に説明します。

検証するデバイスを選択

上部メニュー➡︎ドロップダウンリストより検証するデバイスを選択できます。

検証するデバイスを追加

上部メニュー➡︎ドロップダウンリスト➡︎リストを編集...を選択すると、検証するデバイスを追加できます。

主要のデバイスは網羅されています。

指定サイズデバイスを追加

検証デバイス追加画面の「カスタム端末を追加...」を選択すると、指定サイズのデバイスを追加できます。

デバイスサイズを変更

上部メニュー➡︎テキストボックスへ数字を入力すると検証しているデバイスサイズを素早く変更できます。

デバイスの向きを変更

上部メニューのアイコンをクリックすると表示しているデバイスの向きを変更できます。

タッチイベント・マウスイベントの切り替え

上部メニューのアイコンをクリックするとタッチイベント⇆マウスイベントの切り替えができます。

スクリーンショットを撮影

上部メニューのアイコンをクリックすると、スクリーンショットが撮影できます。

Firefoxについては以上となります。GoogleChromeほど多機能ではないですが、操作性は優れているように感じます。

より詳細な情報を知りたい場合は下記公式サイトをご確認ください。

参照サイトレスポンシブデザインモード

色々なデバイスの表示確認ができるブラウザ「BLISK」

番外編としてWeb開発に特化したブラウザ「BLISK」では、レスポンシブ表示の検証がとても簡単に行えるようになっています。

このブラウザは有料です。無料でも使用することはできますが、一回30分までと制限があります。30分を過ぎたら12時間後に再度使用可能になります。

ダウンロードサイトBLISK

詳しい説明は割愛しますが、Web開発に特化しているだけあって、検証などといった作業がとても捗るブラウザです。

対応しているデバイスは豊富にあり、左側から1クリックで変更できます。（フレーム付き）また、レスポンシブ画面とPC画面を同時に検証できるといったことも可能です。

値段は日本円で約月1000円ほど（記事公開時）です。年間契約すると少し安くなります。
ブラウザへ支払うには、少々値が張るのでWeb開発をガシガシ行わない限りは、手は出しづらいかなと思います。

レスポンシブ表示を確認できるサイト

最後にブラウザではなく、レスポンシブ表示を確認できるサイトを簡単に紹介します。

ブラウザのように細かな確認はできませんが、ブックマークなどに登録しておけばかなり手軽にレスポンシブ表示確認ができますね。

レスポンシブ表示確認サイトResponsinator

レスポンシブ表示確認サイトDemonstrating Responsive Design

レスポンシブ表示確認サイトレスポンシブWebデザインチェックツール

以上となります。
それぞれのブラウザに特徴がありますが、機能的に言うとGoogleChromeが圧倒しているように感じます。それぞれの用途でブラウザを使い分けたり、サイトを利用しても良いかもしれませんね。

しかし、時には知りたいのはこの情報じゃないんだけどなぁっとなるときもしばしばありますね。
そんな時に知っておきたいのが検索するときの条件を絞る方法です。
また、単純なキーワード検索機能だけではなく天気やフライト、画像などなど多方向からの検索も可能です。

今回は普段検索する上で知っておくと便利な検索方法や、その他意外な便利機能を紹介したいと思います。
とても長くなるので迷いそうになったら目次を活用くださいませ。

キーワード検索をより便利・正確にする方法

普段検索しているキーワードに少し修正を加えると、自分が探している情報をより正確に導き出せます。
便利な検索を行うのには主に下記3つあります。

下記に上から順に使用方法を説明します。

知っておきたい基本検索ツール

Googleにはキーワード検索をする際にどのカテゴリで検索するか条件を絞ることができるツールが用意されています。

このツールを使用するだけでも普段の検索がとても便利になるので知っておくと良いと思います。

画像を検索

キーワードを検索して上部にある「画像」を選択すると、キーワードに関する画像を検索できます。

上記だと「コーヒー豆」のイメージを確認できます。
また右端の「ツール」ボタンからサイズ、色、ライセンス許可の有無、画像の種類、掲載時期などの条件を絞って検索もできます。

商品・価格を検索（ショッピング検索）

キーワードを検索して上部にある「ショッピング」を選択すると、キーワードに関する商品を検索できます。
左側の絞り込み機能から、価格帯や販売しているショップなどの条件を絞ることもできます。

価格相場を調べるのにもとても便利です。

動画を検索

キーワードを検索して上部にある「動画」を選択すると、キーワードに関する動画を検索できます。

上記の例だとコーヒーの焙煎方法とか表示されます。そう行った内容は記事で読むより動画の方がわかりやすいですよね。
また右端の「ツール」ボタンから再生時間、掲載時期、画質、字幕の有無、動画サイトなどの条件を絞って検索もできます。

ニュースを検索

キーワードを検索して上部にある「ニュース」を選択すると、キーワードに関するニュースを検索できます。

上記だとコーヒー豆に関する最新情報が確認できます。注目している項目の最新情報を確認するのに便利です。
また右端の「ツール」ボタンからブログのみ、掲載時期などの条件を絞って検索もできます。

書籍を検索

キーワードを検索して上部にある「書籍」を選択すると、キーワードに関する書籍を検索できます。

上記だとコーヒー豆に関する書籍が確認できます。
また右端の「ツール」ボタンからeBook、書籍の種類（本、雑誌、新聞など）、出版時期などの条件を絞って検索もできます。

期間を指定して検索

キーワードを指定して上部の「ツール」➡︎「期間指定なし」を選択すると、ドロップダウンリストが表示され、情報が公開された期間を絞って検索することができます。

フライトを検索

キーワード検索とは少し違いますが、上部の「もっと見る」➡︎「フライト」を選択すると、フライトを検索することができます。

目的地と日付を指定して検索すると、フライトチケットの価格比較もできるので便利です。

航空会社とフライトナンバーで検索することで対象フライトの運行状況も確認できます。

検索オプションで検索

キーワードを検索して「設定」➡︎「検索オプション」と進めば限定的ではありますが複数の検索条件を指定して検索することができます。手軽に複数条件を指定できるので検索ツールで満足できる結果が得られない時には有用な方法です。

使用方法は見ればわかる内容が多いのでここでは割愛します。

しかし指定できる検索条件は限定されているので、より詳細な条件に絞った検索を行いたい場合は、これから説明する検索演算子を使用した検索方法を覚えておくと良いかと思います。

検索演算子で行う検索方法

ここまででお伝えしたツール機能を使用すれば、求めている結果を手に入れることはできるかと思います。
これから以下に説明する内容は、検索演算子を利用して検索条件を絞る方法をお伝えします。

検索演算子を利用すると下記のような利点があります。

覚える手間は必要になりますが、抑えておくとより効率的に情報を集めることができます。

AND、OR検索

普段検索をする際にほとんどの人が使用しているのは「スペース」でキーワードを区切る方法かと思います。
この方法は「AND検索」と呼び、基本的に区切ったキーワード全ての条件に合致した検索結果が表示されます。

AND検索

A B C

上記だと「A、B、C」全てのキーワードが含まれる検索結果が表示されます。
大体の場合はこの「AND検索」で十分な情報を得られる場合が多いのですが、より検索範囲を広げたかったり、一度の検索で目指している情報にたどり着きたい場合はもう一つの方法を知っておいた方がより効率的になります。

OR検索

A OR B

上記だと「A」もしくは「B」のキーワードが含まれる検索結果が表示されます。
よってより多くの検索結果が表示されるので情報を絞りづらく普段使用する上ではあまり便利ではないかもしれません。

しかし、例えばどこかに旅行に行ったり、何か商品を購入するときはより多くの情報を精査する必要があるので、「OR検索」が便利になる場合もあります。

OR検索を使用する検索例

山 OR 海 OR 川 景勝地

上記のように検索すると「山か海か川の景勝地」を一度の検索で表示させることができます。

キーワードの意味を調べる検索

キーワードの前に「define:」または後に「とは」や「意味」を入力すると、キーワードの意味を検索できます。

意味検索

define:□□□□
□□□□ とは
□□□□ 意味

個人的にはこの意味を調べる検索を一番多用している気がします。わからないことがあれば一発検索すれば世界で培った叡智をすぐに確認できるなんて便利な時代になりましたね。

この「ANDとOR」と「意味を調べる」検索方法は普段検索する上で一番使用頻度が高いかなと思います。

完全に一致するキーワードで検索

キーワードをダブルクオーテーション「""」で囲むと検索したキーワードに完全一致したフレーズだけを検索できます。

完全一致検索

"□□□□"

例えば「コクのあるコーヒー豆」と検索すると「コーヒー」というキーワードにも反応しているため、喫茶店やコーヒーの種類など内容がバラバラの結果が表示されます。

完全一致で検索すると、コクのあるコーヒー豆を販売、紹介するサイトが多く表示されます。

歌詞やセリフを検索するときも役立ちます。

あいまいなキーワードを含めて検索

わからない部分をアスタリスク「*」にすることでよく覚えていないキーワードを補完して検索できます。
これはセリフや歌詞などの内容を覚えていない時などに有用です。

あいまいなキーワード検索

□□*□□

下記のように内容を覚えていない部分を「*」にすることで補完した結果を検索できます。

完全一致検索と併用すると結構効果を発揮します。

特定のキーワードを含めて・除外して検索

キーワードの前にプラス「+」を入れると含める検索、マイナス「-」を入れて検索すると、指定したキーワードを除外して検索できます。

含める検索

+□□□□

除外検索

-□□□□

「コクのあるコーヒー豆」を完全一致で検索すると販売サイト（楽天市場）が多くヒットします。
キリマンジャロを含め、楽天市場を除外して検索すると、品種が「キリマンジャロ」で「コクのあるコーヒー豆」を説明するサイト、ランキングを紹介しているサイトや楽天以外で販売しているサイトが多数ヒットします。

タイトルから検索

検索するキーワードの前に「intitle:」や「allintitle:」を入力するとタイトルから検索できます。

単一のキーワードをタイトルから検索

intitle:□□□□

複数のキーワードをタイトルから検索

allintitle:□□□□ □□□□

本文から検索

検索するキーワードの前に「intext:」や「allintext:」を入力すると本文中から検索できます。

単一のキーワードを本文から検索

intext:□□□□

複数のキーワードを本文から検索

allintext:□□□□ □□□□

類義語で検索

検索するキーワードの前にチルダ「~」を入力するとキーワードに似ている意味合い（類義語）で検索できます。

類義語検索

~□□□□

下記のように検索すると「コクのあるコーヒー豆」をギフト・プレゼント用に紹介しているページが多く表示されます。

数値の範囲を指定して検索

2つの数値の間にピリオド2つを入力して検索すると、2つの数値範囲内での検索が可能です。
使用方法としては価格帯・期間・重量や容量等で使用すると便利になります。

数値範囲を指定検索

□□□□　数値単位..数値単位

購入したい商品の価格帯で絞って検索する場合は下記の様になります。

期間を絞りたい場合は下記の様になります。

ファイルを検索

検索したいキーワードの前後に「filetaype:ファイルの拡張子」を入力すると、キーワードに関連するファイルを検索できます。申請書などの公式文書などを検索する際に役立ちます。

ファイル検索

filetype:ファイル拡張子　□□□□

Wordファイルを検索したい場合は「doc」、Excelファイルの場合は「xls」等での検索もできます。

指定した場所・地域発信の情報を検索

検索したいキーワードの前後に「location:場所や地域」を入力するとその場所から発信されている情報を検索できます。
キーワードの地域での知名度や最新情報を確認するのに便利です。

場所・地域を指定検索

□□□□　location:場所や地域

キーワードを指定サイト内で検索

検索したいキーワードの前後に「site:サイトアドレス」を入力すると指定サイト内で検索できます。

サイト内検索

□□□□ site:□□□□

「コクのあるコーヒー豆」というキーワードをアマゾンで検索したい場合は下記のようになります。

キーワードを含むURLを検索

検索したいキーワードの前に「allinurl:」を入力すると指定したキーワードを含むURLを検索できます。

URL検索

allinurl:□□□□ □□□□

URLに「richness」や「coffee」が含まれたサイトを検索したい場合は下記になります。

類似サイトを検索

指定したサイトURLの前に「related:」を入力すると、指定したサイトに似ているサイトを検索できます。

類似サイト検索

related:□□□□

コーヒーショップサイトを類似検索すると下記のようになります。

情報の比較としても使えたり状況によっては便利な検索機能です。

指定したサイトのリンクを検索

指定したサイトURLの前に「link:」を入力すると、指定したサイトのリンクが貼られているページを検索できます。

サイトリンク元検索

link:□□□□

指定サイトが宣伝情報やイベント情報を確認するのに便利です。

指定したサイトのキャッシュを検索

指定したサイトURLの前に「cache:」を入力すると、指定したサイトのキャッシュを見ることができます。

サイトキャッシュ検索

cache:□□□□

既に見られなくなったサイトを表示するときなどに役立ちます。（Googleにファイルが残っていればですが）

その他便利機能

キーワード検索を正確・効率的にする以外にも便利な機能がありますので下記に紹介します。

市外局番から地域を検索

市外局番を入力して検索するとどの地域の番号なのかすぐわかります。

郵便番号を検索

住所で検索すれば郵便番号が分かります。

地名の前後に「郵便番号」と入力して検索することでも、対象地域の郵便番号を確認できます。

郵便番号検索

郵便番号　□□□□

大体の住所を検索

郵便番号を検索すれば大体の住所が確認できます。

翻訳を行う

「翻訳」と入力して検索すると、ツールが表示されるので、素早く翻訳が行えます。

翻訳対象言語も簡単に変更できるので結構便利です。

株価を検索

社名の前後に「株価」を入力すると株価を即時に確認できます。

株価検索

株価　□□□□

天気を検索

検索したい場所名の前に「weather:」を入力すると、指定場所の天気を確認できます。

天気検索

weather:□□□□
天気　□□□□

因みに「天気」と入力しても同様の結果を確認できます。

日の出・日没時間を検索

場所・地域名の前後に「日の出・日没」と入力して検索すると、指定地域の日の出・日没時間を確認できます。

日の出・日没時間検索

日の出　□□□□
日没　□□□□

海外の現地時間を検索

場所・地域名の前後に「時間」と入力して検索すると、指定地域の現地時間を確認できます。

現地時間検索

時間　□□□□

計算結果を表示

計算したい内容を入力して検索すると答えが表示されます。

また、「電卓」と検索すると電卓が表示されるので、電卓を使用して計算を行うこともできます。

単位を変換

単位を変換したい数字と単位を入力して検索すると、ツールが表示され単位変換が容易に行えます。

対象単位も簡単に変更できるのでそういった計算が必要な時はとても便利です。
また、「単位変換」と入力してもツールが表示されます。

外貨を円に変換

変換したい通貨を入力して検索すると、日本円に現在のレートで変換できます。

指定したチームの試合日程や戦績を検索

チーム名を検索すると指定したチームの試合日程や戦績を確認できます。

チーム名を入力しても表示されない場合は、チーム名の前後に成績や結果と入力することでも確認ができます。

チームの試合日程・成績検索

成績・結果　□□□□

経路を検索

「出発地から目的地」と検索すると経路を検索できます。

経路検索

□□□□から□□□□

アイコンをクリックすれば車、電車、徒歩、自転車などでの移動手段を確認できます。
手早く移動距離・時間。乗り換え情報などが確認できるので便利です。

昔の新聞からアーカイブ検索

下記サイトより昔の新聞記事から情報を検索することができます。

参照サイトアーカイブ検索（英語）

英語での新聞になりますが、かなり古い情報も検索できます。

英語でキーワードを指定して「Search Archive」を選択すると過去記事より検索が行えます。

通信速度を確認

「スピードテスト」と検索し、「速度テストを実行」を選択すると現在接続しているインターネットの通信速度を確認できます。

さくっと確認できるので通信が遅いと感じた時は便利ですね。

宅配便を追跡

業者からもらえる伝票番号を入力して検索すると、主だった宅配業者での指定した伝票の追跡が行えます。

カロリーを確認

食品名の前後に「カロリー」と入力して検索すると、大体のカロリーを確認することができます。

カロリー検索

カロリー　□□□□

画像検索

画像を元に検索することもできます。検索対象に似ている画像がヒットしたり、対象画像の名称が判別できる場合はその関連サイトが結果に表示されます。
方法は下記の2通りあります。

下記にそれぞれ方法を説明します。

所有している画像を検索

Googleホーム画面右上にある「画像」を選択します。

Googleロゴ右下に「画像検索」と表示されます。
画面に自分が所有している画像をドラッグ＆ドロップします。

結果には類似画像か名称が分かる場合はそちらも表示されます。

写真を持っているけど対象物がわからなかったり、似た景色の場所を探している時などは便利ですね。

インターネット上にある画像を検索

対象画像で右クリック➡︎Googleで画像を検索を選択すると対象画像で検索が行えます。

商品購入時に検討するときなどには役立ちます。

とても長くなりましたが、以上になります。

普段はスペースでの検索ばかりかと思いますが、全てを覚えておく必要はなく「あんな検索方法あったなぁ」となんとなく覚えておくだけで、必要な時に調べてできるかと思います。

今回説明した内容を組み合わせて使用することでより効率的な情報収集を行っていただければと思います。

また今回説明した検索演算子はGmailでも使用することでとても素早くメール検索が行えます。
興味がある方は御確認ください。

関連記事Gmailの検索演算子を利用して必要なメールを一発で検索する方法

続きを読む...

Gmailの検索機能は汎用性が高く、簡単な検索機能はもちろん検索演算子を組み合わせてより複雑な検索条件を指定してメールを検索することができます。 今回は基本的な検索演算子のまとめや検索演算子を応用する方法などを紹介したいと思います。 とても長くなるので目次を活用くださいませ。 検索演算子一覧 先ずは...

Webページを開発していたり、ブラウザごとに使用用途が違う場合は重宝します。

Safari

Safariの場合はデフォルトの機能で行えるのでとても簡単です。
下記の手順でSafariの設定を変更します。

Mac・Windowsの場所は下図になります。

メニュー内の「開発」➡︎「ページをこのアプリケーションで開く」へ進み、表示させたいブラウザを選択します。

Mac・Windowsの場所は下図になります。

デフォルト機能で簡単に他のブラウザへ移動できるので手軽に試せます。

GoogleChrome・Firefox（拡張機能Open With使用）

GoogleChrome・Firefoxの場合は拡張機能をインストールする必要があります。
両方ともに導入方法は同じなので画面はGoogleChromeを使用していきますのでよろしくお願いします。

下記よりそれぞれの拡張機能をインストールします。

GoogleChrome拡張機能Open With

Firefox拡張機能Open With

Open Withの設定を行う

OpenWithはインストール後スクリプトを実行して設定を行う必要があります。
スクリプトと言っても難しい作業ではないので順を追って説明します。

インストールしたOpenWithを起動し、「Open Withオプション...」を開きます。

下図の画面が表示され、手順も記載されています。

Macの手順は下記のようになります。

Windowsの手順は下記のようになります。

それではMac・Windowsそれぞれの設定方法をお伝えします。

Mac

Macの設定方法

MacにはPythonがデフォルトで入っているのでOpenWithオプション画面のリンクよりファイルをダウンロードしたら、そのままターミナルを起動して実行権限を付与します。
ターミナルがよくわからない場合は下記記事で基本情報をまとめていますので御一読ください。

関連記事Macターミナルの覚えておきたい基本情報・ショートカット・コマンドまとめ

続きを読む...

忘れやすいのでターミナルの基本情報をまとめたいと思います。 普通にMacを使用していたらあまり使う機会はないかもしれませんが、ターミナルでのみ出来る機能もありますので覚えておくとよいかと思います。環境はbashになります。 ターミナルとは CUI(Character User Interface)を...

権限付与コマンドについては下記記事で詳細を説明していますので興味があれば御覧ください。

関連記事Macターミナルコマンド「chmod」の使い方

続きを読む...

ここではターミナルコマンドchmod(change mode)の使い方を説明します。 ターミナルの基本的な情報を確認したい場合は下のページを御覧ください。 chmodはパーミッションの設定を変更するコマンドです。 パーミッションとは「ファイルやディレクトリに対してユーザーやグループが持つ権限」もしく...

下記コマンドを実行します。

OpenWithファイルへ実行権限付与

chmod u+x open_with_mac.py

実行権限を付与したら、下記コマンドでOpenWithファイルを実行します。

OpenWithファイルを実行

./open_with_mac.py install

　上記のコマンドはダウンロードしたファイルと同じ場所にいないと効かないので御注意ください。

実行したら、OpenWithオプション画面の「インストールのテスト」を選択して正常に起動しているか確認を行います。

うまくいかない場合はファイルを移動していないか、正常にファイルが実行できているかを確認して、再度上記手順をやり直してみましょう。

正常起動を確認できたら、「ブラウザを探す」を選択すると現在インストールされているブラウザを検知して自動で登録されます。

GoogleChrome、MicrosoftEdge、Firefox、Safari、Opera等は「ブラウザを探す」で検知して登録してくれます。(使用しているブラウザは「隠す」にしています。)
後はOpenWithのロゴをクリックすればとても簡単に他のブラウザで現在ページを開くことが可能です。

下記に「ブラウザを探す」で自動登録されないブラウザを手動で登録する方法をお伝えします。

ブラウザを手動で登録（Mac）

自動登録されないブラウザは対応していないわけではなく、手動で登録すれば同じく簡単に使用することができます。
下記に方法をお伝えします。

OpenWithオプション画面の「ブラウザを追加」を選択します。

すると「ブラウザを追加」画面が起動するので、登録したいブラウザ名、アイコンとブラウザアプリがあるパスを入力します。

因みにアプリを右クリック➡︎⌥ optionを押すと簡単にパスをコピーできます。

関連記事Macでファイルフルパスを簡単にコピーする方法

続きを読む...

El Capitanからファイルのフルパスをコピーするのがさらに簡単にできるようになりました。 今まではタイトルバーのアイコンをドラッグ＆ドロップすることでコピーが可能でしたが、El Capitanからは右クリックから簡単にフルパスがコピーできます。 Finderでフルパスコピー 方法は至極簡単です...

一度登録してしまえば簡単に使用できるようになります。

py open_with_windows.py install

以上になります。作業内容によってはとても便利な機能だと思います。