遊んで学べる「Experiments with Google」（第28回）

「新規タブ」に好きな画像を表示したい！　Chrome拡張機能をノーコードで自作　公式ツールを使ってみた（2/2 ページ）

拡張機能を作ってみる　新しいタブで記事を紹介する仕様に挑戦

　それでは、拡張機能を試作してみる。せっかくなので、新しいタブを開くと本連載の記事を紹介する拡張機能を作ることにした。具体的な手順を以下でレポートしていくが、Tab MakerアプリとGoogleスプレッドシートを行き来するので、混乱しないよう注意されたい。

ステップ1：新規タブのテンプレートを選ぶ

　まずは解説ページのMAKE YOUR OWNをクリックしてTab Makerアプリを開く。11種類のテンプレートがあり、今回は画像を1つだけ表示するシンプルな「Template 3」を選んでみた。

　「NEXT」をクリックして進んだ次の画面では、表示する画像を自分で選ぶので「ADD YOUR OWN CONTENT」をクリックする。

ステップ2：コンテンツ管理用シートに情報を入力する

　ここからしばらく、Googleスプレッドシート上での作業が続く。最初に表示されたシートはあくまでも「ひな型」なので、指示に従ってコピーした上で、コピー版のシートに情報を入力していく。ここでは「GoogleExperimentsOnITmedia」というコンテンツ管理用シートを作り、「Google Drive」の「マイドライブ」に保存した。

　このシートの「Block 1」に表示させたい画像のURLを、「Block 1 link」に画像をクリックしたときに移動させたいURLを1つずつ入力していく。この場合は、連載各記事のメイン画像をBlock 1に、記事のURLをBlock 1 linkに入力した。背景画像を指定する「Background Image」は、Googleが最初から用意している画像をそのまま使った。

　コンテンツ管理用シートへの入力が済んだら、拡張機能にした際にデータを参照できるよう公開する。指示に従って、「ファイル」→「共有」→「ウェブに公開」とメニューを操作し、ドロップダウンリスト「ドキュメント全体」で「step 2: add content to this sheet」を選び、さらに「ウェブページ」から「カンマ区切り形式（.csv）」を選んで「公開」をクリックすると、公開用URLを取得できる。

ステップ3：デザインの微調整をして完成

　ここからはTab Makerアプリに戻って、作業を続ける。

　Tab Makerアプリに、先ほど取得したコンテンツ管理用シートの公開用URLを入力し、この拡張機能で表示する新規タブのデザインを調整したり、名称や説明文、アイコンの設定をしたりしよう。そうして出来上がった拡張機能のZIPファイルをダウンロードすれば良い。

ステップ4：拡張機能をChromeに読み込ませる

　ダウンロードしたZIPファイルを展開したら、Chromeで「chrome://extensions」を開き、拡張機能のメニューを出す。ここで「デベロッパー モード」をオンにして、展開後に生成したZIPファイル「extension」を「パッケージ化されていない拡張機能を読み込む」から読み込ませる。これで準備は完了した。

　早速タブを新たに開いたところ、見事に画像が表示され、クリックすると記事ページに飛べた。大成功だ。

後から画像を追加してもOK　簡単に登録可能

　ここまでの作業は意図した通りに動くか確かめる目的だったので、記事3本分の情報しか入力していない。残りの情報を追加して、拡張機能を完成させよう。

　その追加作業も至って簡単で、コンテンツ管理用シートに情報を書き加えるだけだ。ZIPファイルを作り直す必要はない。複数人で表示コンテンツを管理する場合には、このシートを共同で編集することになる。

毎日使われるChromeがマーケティングツールになる

　世界中の人が使うChromeの新規タブに、自分の作品や製品を表示できれば効果絶大なマーケティングツールになる。ただし、そのような拡張機能を作るにはプログラミングの知識が欠かせない。

　Googleはこのハードルを下げるために、Tab Makerを開発して公開した。Tab Makerなら誰でも手軽に拡張機能を作れるので、Chromeを情報発信メディアやギャラリーとして活用する人も増えるだろう。Googleは、こうしたChromeを取り巻くエコシステムの活性化を狙っている。

　では、作った拡張機能を多くの人に使ってもらうには、どうしたら良いのだろう。一番簡単なのは、ZIPファイルを相手に渡してChromeに読み込んでもらう方法だ。しかし、マーケティング目的で不特定多数に広めようとしたら、現実的なやり方ではない。

　そこで、Chrome用のアプリや拡張機能を配信している「Chromeウェブストア」を使う方法がある。Googleにデベロッパー登録する必要があるので最初に5ドル（約643円）必要だ。

　必要事項を入力して、ZIPファイルをアップロードすれば、全世界のユーザーに使ってもらえる。ペット自慢をしても良し、自作イラストを披露しても良し、ためになる格言を広めても良し。活用方法はいくらでも思い付く。Chromeが情報発信メディアになるのだ。

遊んで学べる「Experiments with Google」

AIやVRなど最新技術の実験的な応用例を紹介するGoogleのショーケース「Experiments with Google」を実際に試して遊んでレポートする。専門知識がない人でも楽しくIT技術の魅力に気付き、その可能性を学んでいけるようキュレーションする。

この連載の記事をもっと見る

この記事の著者

関連記事

• 

  閉じたタブを一発で戻すには「Ctrl＋○＋○」

• 

  プログラミングせずAIをDIY！　Webブラウザで動くGoogleの機械学習サービスを試す　AIの出来栄えは？

• 

  AIに頼れば、絵心ゼロでもマンガのキャラクターを描けるのか？　Googleの「Giga Manga」を試してみる

• 

  今日から君もラッパーに！　カメラで写した猫も楽器もAIでラップ化　「Giorgio Cam」でテンションUPだ

• 

  Chromeの「恐竜ゲーム」をオンラインでプレイするには「chrome://〇」にアクセス