私のところには、たまに知人から「拡張機能ってどうやって入れるの」と聞かれることがあります。Web系の仕事をしている人にとっては当たり前すぎる作業ですが、普段Chromeをただのブラウザとして使っている方には、Chromeウェブストアという入り口の存在自体がよく分からない、というのが本音だと思います。
私の家でも、妻が最初に拡張を入れるとき、「これって安全なの」「設定とかいっぱい出てきたらどうしよう」とちょっと身構えていました。実際にやってみると、Chromeウェブストアを開いて、青いボタンを押して、ピン留めするだけで終わる作業です。所要時間でいえば、コーヒーを淹れている間に終わる。今日はその「コーヒー1杯ぶんの導入手順」を、私が開発・運営しているChrome拡張「プライスチェッカー(Chrome拡張)」を例に、開発者本人の視点で解説しますね。結論から言うと、3ステップでインストール、1ステップで動作確認、合計5分以内で完了します。
まず確認したい2点と、なぜスマホでは動かないのかという話
インストールに入る前に、2点だけ確認してください。1つ目は、PC(WindowsかMacかLinux)のChromeを使っていること。2つ目は、ブラウザを最新版に更新しておくこと。バージョン確認は「設定→Chromeについて」から数秒でできます。
ここで多くの方がつまずくのが、スマホ版Chromeでは動かない、という事実です。スマホ版で開いてChromeウェブストアにアクセスしても、「Chromeに追加」のボタンが出てこない。なぜかというと、Chrome拡張という仕組みは仕様としてモバイル非対応だからです。これは個別の拡張がサボっているわけではなく、ブラウザ側のアーキテクチャがそうなっている。なのでお使いのデバイスがスマホやタブレットだけの場合は、家族のPCを借りるなりして、ノートPCかデスクトップPCのChromeで開く必要があります。
ここを最初に明示しておかないと、スマホで何度も「Chromeに追加」を探して見つからず諦める、という悲しい体験になります。私のところに届く問い合わせの3割くらいは、実はこのスマホ問題でした。だから記事の冒頭で先に書いておきます。
ブラウザのバージョンが古すぎる場合、稀に拡張が動作しないことがあります。Chromeは半自動でアップデートされますが、長期間PCを起動していなかったり、終了時にうまく更新が走っていなかったりすると、数バージョン古いまま使い続けているケースがあります。設定画面のChromeについてのところで、「Chromeは最新です」と表示されていることだけ、念のため確認してください。
3ステップのインストールと、ピン留めという地味だけど大事な手順
ここから本番です。Chromeを立ち上げて、Chromeウェブストア上のプライスチェッカーのページを開きます。Chromeウェブストアの検索窓で「プライスチェッカー」と入れても出てきますが、同名の他拡張があるので、URLからアクセスする方が確実です。「プライスチェッカー」のページが開いて、アイコン、説明文、スクリーンショットが表示されていれば、開けています。
次にページ右上の青いボタン「Chromeに追加」を押すと、ポップアップで権限の確認が出ます。「拡張機能を追加」をクリックすれば、数秒でインストール完了。ここで権限について不安に思う方もいると思うので、開発者として補足しておきます。プライスチェッカーが要求している権限は、価格比較対象の26サイトのページから価格情報を読み取るために必要な最小限に絞ってあります。閲覧履歴を勝手に送信したり、購入履歴を抜き出したりする処理は一切ありません。会員情報・購入履歴・閲覧履歴は取得していません。公開ページの価格と送料と在庫の情報だけを参照しています。これは設計の最初から決めている、変えるつもりのない方針です。
そして3つ目のステップが、地味だけど大事なピン留めです。これは任意の手順なんですが、強くおすすめします。Chromeの右上にあるパズルピースのアイコンをクリックすると、インストール済み拡張の一覧が出ます。プライスチェッカーの行にあるピンマークをクリックすれば、ツールバーに固定される。これをやっておくと、セールティッカーの赤や黄色のドットがすぐ見えるようになるし、拡張のポップアップ画面に1クリックでアクセスできるようになる。逆にピン留めしないと、ツールバーに表示されないままで、せっかくインストールしたのに「拡張入れたのにアイコン出てこない」と問い合わせをいただくケースになります。私のところに届く問い合わせのもうひとつのよくあるパターンが、まさにこの「ピン留めし忘れ」でした。
ここまでで、所要時間は2〜3分。コーヒーがまだ熱いうちに、もうインストールは終わっています。
動作確認は「Amazonで適当な家電を開く」だけでいいという話
設定画面を開く必要はありません。試しにAmazonで適当な家電の商品ページを開いてみてください。たとえばケーブル1本、イヤホン1つ、何でもいい。数秒すると、ページ内に他サイトの価格比較パネルが表示されます。楽天、Yahoo!ショッピング、ヨドバシなど、対応サイトの最安値が並ぶ。ポイント還元込みの実質価格で並べ替え可能。これで動作確認は完了です。
何も設定していないのに、もう仕事をしてくれている、という体験ができれば成功です。これが、開発者として一番こだわった部分でした。開発初期、私は「機能を増やすほどユーザーは喜ぶはず」と思って、設定項目をたくさん用意していました。家族にテストで使ってもらった結果、設定画面を見た瞬間に閉じる、という現実を突きつけられた。妻も子供も誰一人、設定をいじろうとしなかったんです。それで全面的に設計を変えて、インストール直後に設定不要で動く、必要な人だけがセールティッカーや表示順をカスタマイズできる、一般ユーザーは設定画面を一度も開かなくてよい、という方針に切り替えました。「使い方を覚えなくても使える」が、開発者として一番こだわっている部分です。
それでもつまずく方がいるとすれば、典型的なのは3パターン。まずスマホで開いている、これは冒頭で書いたとおりChrome拡張は仕様としてスマホ非対応なのでPCでアクセスし直してください。次に、会社のセキュリティポリシーで拡張がブロックされているケース。業務用PCでは、会社の情報システム部門が拡張機能のインストールをブロックしている場合があります。これは個人PCでお試しいただくしかありません。最後に「アイコンが表示されない」というケース、これは前述のとおりピン留めをしていないだけなので、パズルピースのアイコンからピンを刺してください。
注意点も書いておきます。PC版Chrome専用でスマホ版は動作しません。価格表示はあくまで参考値で、最終的な購入時はカートでの金額表示が正です、決済前に必ず確認してください。会員情報・購入履歴・閲覧履歴は取得していません、価格情報のみを公開ページから読み取っています。各ECサイトの利用規約とrobots.txtの範囲で動作しています。
ここまで読んで、「思ったより簡単やな」と感じてもらえたら、その感覚で正解です。Chromeウェブストアから「Chromeに追加」を押して、ピン留めして、Amazonの商品ページを開く。それで完了。慣れていない方でも5分かかりません。マニュアルを読み込まないと使えないツールにはしたくなかった、というのは、開発者としての一貫した信念です。実際にインストールしてみて、商品ページを開いて、26サイトの価格が並ぶ瞬間を、ぜひ体験してみてください。
著者プロフィール
パンゲア — Price Checker（Chrome拡張）開発者・USJ年パス勢パパブロガー。大阪市在住、高校生兄弟2人と妻の4人家族。Web エンジニアから独立し、ECサイト横断の価格比較拡張を運営しています。
- ブログ: price-checker.jp
- Chrome拡張「プライスチェッカー」: Chromeウェブストアで見る
コメント