【Geminiと一緒🤖】創作大賞2026 検索ツールを作ってみた

2026年5月22日 15:03

■作者＆作品一覧のGoogleスプシ

創作大賞2026のタイトルに関するルールがムズいぜ！　と言う記事を先日書いたのですが

これに合わせてGoogleスプレッドシートをGoogleアカウント持ってる人向けに公開しております。

※こちらのスプレッドシート、エンタメ原作部門のリストが恋愛小説部門になってました💦　修正しました🙇

以前は作者様と作品に対するリンクを付けてなかったのですが、クリックしてユーザーページなり作品ページ飛べると嬉しいかな、と思ってリンク付けてみました。

しかし、ですね。12ジャンルある作品の中から、特定の作品探すなんてはっきり言って無理ゲーだし、自分の作品だけ見たいんじゃ〜！　って方もきっと多いはず。PCのブラウザなら検索で比較的簡単に探せそうですが、スマホでページスクロールして……とかやるのは、特にエッセイのリストでは結構大変な作業ですよね。

■出来たもの（Webアプリ）

こちらが出来上がったアプリ。Googleアカウントを持っていれば使用可能です。

自分の投稿を検索！　私の場合はTalesの2作品を登録するための記事しか書いてないのでこんな感じです。お友達のお名前で検索してみましたが、ちゃんとヒットしてる！

ただし、Googleスプレッドシートは5/18時点の作品集なので、それ以降のものは反映されてません。あと高速化についてもちょろっとGeminiお願いしてやってもらいましたが、全ジャンルを検索するのでスピードは「そこそこ」です😅　日々作品を収集はしてますが、プログラムでやっていても完全ではないことは悪しからずご了承ください。

■Webアプリを作ろう！（お願いGemini）

ってことで、Webアプリでも作ってみようか！　と思い立ちまして。幸いGoogleスプシの場合はGoogle App Script(GAS)が使えますし、こんなのGeminiさんの得意分野じゃん！　早速Geminiにお願いしてみます。

😺：googleスプレッドシートと連携するWebアプリをGASで作って、最終的にWebアプリとして公開したいと考えています。協力してもらえますか？

🤖：はい、喜んで協力させていただきます！Google Apps Script（GAS）を使ったスプレッドシート連携のWebアプリケーション開発は、サーバーの準備が不要で、非常にスピーディに構築できる素晴らしいアプローチです。

まずは全体のイメージを共有し、どのように進めていくか決定しましょう。

気前のいい返事だ！😆　では仕様を書きますよ〜。比較的簡単で、Googleスプシの列を見て、検索されたユーザー名かアカウント名を検索し、一覧を表示するだけ

😺：note_sousaku_list_2026と言うスプレッドシートがあり、このスプレッドシートにはエンタメ、ミステリー、ホラー、恋愛、仕事、ファンタジー、エッセイ、マンガ、コミック、フード、ビジネス、オールカテ、の全12シートが含まれています。

各シートは同じ構造をしていて、Cが作者のアカウント名、D列が作者名、E列が作品名（D,E列はURLリンク付き）です。

このスプレッドシートに対して操作をするWebアプリを作りたいと考えています。WebアプリはPC用とスマホ等モバイル用のレスポンシブルな構成で、仕様は以下の通りです。

・アカウント名か作者名を選択して入力するエリアがある
・入力された値をキーとして、このスプレッドシートの全12シートから作者名（URLリンク付き）と、その作者の作品名（URLリンク付き）を検索し、ジャンルごとにリストアップする。
・ジャンルはシート名（エンタメ、ミステリーなど）とする
・検索した結果、作者、作品が見つからなければその旨を表示する

このスクリプトを書いてもらえますか？

🤖：ご提示いただいた条件に沿って、Google Apps Script (GAS) で動作するレスポンシブな検索Webアプリのソースコードを作成しました。

このシステムは、GASのバックエンド処理を行う Code.gs と、ブラウザ側の表示・UIを担当する Index.html の2つのファイルで構成されます。

PCとスマートフォンの両方で快適に操作できるよう、CSSフレームワーク（Pico.CSSまたはTailwind CSSのような軽量なモダンデザインを模したカスタムCSS）を組み込み、シンプルで美しいレスポンシブデザインに仕上げています。

以下の手順で、Google Apps Scriptに2つのファイルを配置してください。

1. バックエンド側：Code.gs

スプレッドシートの「拡張機能」＞「Apps Script」を開き、もともとあるコード.gs の内容をすべて消去して、以下のコードを貼り付けてください。

2. フロントエンド側：Index.html

GASエディタの画面左上にある「＋（ファイルを追加）」ボタンを押し、「HTML」を選択してファイル名を Index（拡張子の .html は自動で付くので不要）にしてください。中身を以下のコードにすべて差し替えます。

3. Webアプリとして公開（デプロイ）する手順

コードを貼り付け終えたら、以下の手順でWebアプリを公開します。

プロジェクトの保存
- エディタ上部にある「プログラミング用のディスク型アイコン（保存）」を押し、スクリプトを保存します。
最初のデプロイ
- 画面右上にある青い「デプロイ」ボタン＞「新しいデプロイ」をクリックします。
- 種類の選択（歯車マーク）で 「Webアプリ」 を選択します。
- 各設定項目を次のように指定します：
  - 説明: 任意（例: v1.0 検索アプリ初期化）
  - 次のユーザーとして実行: 「自分」（あなたのアカウント権限でスプレッドシートを読み込みます）
  - アクセスできるユーザー: 用途に合わせて選択してください。
    - 自分だけで使う場合：「自分のみ」
    - 他の特定メンバーや不特定多数に公開する場合：「全員」（Googleアカウントを持たない人でも検索できるようになります）
承認手続き（最初の一回のみ）
- 「デプロイ」をクリックすると、スプレッドシートへのアクセス許可を求められます。
- 「アクセスを承認」をクリックし、ご自身のアカウントを選択します。
- 「Google hasn't verified this app（このアプリは確認されていません）」という警告画面が出た場合は、左下の小文字の 「Advanced（詳細）」 をクリック＞ 「Go to note_sousaku_list_2026 (unsafe) /（安全ではないページに移動）」 をクリック＞最後の画面で 「Allow（許可）」 を押します。
URLの取得
- デプロイが完了すると、画面に「Webアプリ」の URL が表示されます。これが作成した検索システムのリンクです。これをPCやスマホのブラウザに入力すれば、いつでもどこからでも高速な横断検索が行えます！

省略してますが、途中にちゃんとソースコードも示してくれて、それをコピーするだけ。1回めはバグありでしたが、これも相談したらちゃんと修正してくれました😃　Geminiさん、素敵😍

この記事が参加している募集

やってみた

12万件