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

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

公開 2023年01月21日 09時01分

[ITmedia]

印刷する連載新着通知を受け取る Googleで優先するソースとして追加

　「Experiments with Google」は、Googleが人工知能（AI）や拡張現実（AR）といった最新技術の可能性を示すために、実験的な応用例を紹介するショーケースだ。膨大なコンテンツを公開しており、その多くはスマートフォンやPCで試せる。

　この連載では、多種多様な応用例の中から興味深いものをピックアップ。実際に遊んだ体験レポートを通して、裏側にあるテクノロジーや技術の活用方法、その目的を解説する。

　読者の皆さんも、ぜひ自分の手で試しながらその仕組みを学んでもらえたらうれしい。きっと、最新技術の魅力に気付くはずだ。

Chromeの「新規タブ」を自分好みにアレンジ　拡張機能を自作しよう

　連載28回目の今回は、Webブラウザ「Google Chrome」の「新規タブ」をアレンジする専用の拡張機能を自作できるツール「Tab Maker」を取り上げる。

Chrome用の拡張機能をTab Makerで自作（出典：Google）

　Chromeを使っていると、1日にたくさんのタブを使う。現在、Chromeで新規タブを開くと頻繁にアクセスするWebサイトへのリンクや自身で選んだショートカットが表示される。指定したWebサイトに自動で遷移するように設定も可能だ。

　日々利用するタブなので、自分好みにアレンジできたら作業も楽しくなるのではないか。好きな画像や動画を表示できたらうれしいだろう。そんな願いをかなえるのが、Tab Makerで作るChrome用の拡張機能だ。Tab Makerで作った拡張機能を読み込むと、あらかじめ用意しておいたテキストや画像、動画、リンクを新規タブに表示できる。

　Tab Makerの解説ページには拡張機能のサンプルが掲載されている。新しいタブを開くたびに犬と猫の画像が表示されるもの、ニューヨーク近代美術館（MoMA）の収蔵作品が表示されるもの、地域の店舗などを紹介するものなど多彩な拡張機能がある。

新規タブが作品紹介やペット自慢の場になる

MoMAの拡張機能がお気に入り

　サンプル拡張機能のうち、MoMAのものは「New Tab with MoMA」として公開されており、誰でも使える。

　試しにインストールしてみたら、新しいタブにいつもすてきな作品やプロダクトが表示されて心が躍る。画像をクリックするとMoMAの作品紹介ページに飛べるので、次々と開いて解説を読んでしまう。これは、理屈抜きで楽しめる。

新しいタブを開くたびに、MoMAの収蔵作品に出会える（New Tab with MoMAで開いたタブ）

自分だけの拡張機能を作る　プログラミングの知識はいらない！

　Tab Makerが優れているのは、ノーコードで自分だけの拡張機能を作れるからだ。解説ページの手順に従えば、プログラミングの知識がない人でも簡単にできてしまう。

　拡張機能の作成作業は、大きく3つの段階に分かれる。専用のソフトウェアなども不要だ。順に紹介していこう。

　最初に、Tab MakerのWebアプリ（以降「Tab Makerアプリ」という）で新規タブの全体的なレイアウトを決める。用意されているテンプレートから目的に合ったものを選ぶだけだ。

　続いて、Googleのオンライン表計算ソフト「Googleスプレッドシート」を使って、コンテンツ管理ファイルを作る。自動でシートが生成されるので、新規タブに表示させたい画像や遷移先のURLなどを登録していく。上限はないので、いくつでも記入可能だ。この作業も、表内のセルに必要な情報を入れていくだけ。難しいことはない。

　最後に、コンテンツ管理ファイルの公開用URLをTab Makerアプリに入力し、細かなデザインを調整して完成だ。出来上がった拡張機能はZIPファイルとしてまとめられるので、これをダウンロードしてChromeに読み込ませると、すぐに使える。

　それでは、解説ページの「MAKE YOUR OWN」（自分で作ってみよう）をクリックして、作り始めよう。次のページで詳しい作り方を説明する。