はじめに
こんにちは。普段は社内ヘルプデスクとして、PCのキッティングやアカウント管理、社員からの問い合わせ対応をしている非エンジニアの @ishikura_nagi です。
コードは書けません。GASやHTMLが限界です。
そんな私が、今回 Google Gemini という最強のパートナー（家庭教師であり、先輩エンジニア）とタッグを組み、Vue.js と Google Apps Script (GAS) を使った完全内製の社内ポータルを開発・展開（TENKAI）を進めています。
この記事では、「技術力ゼロの人間が、AIの力を借りてどうやってモダンなWebアプリを構築し、スキルを展開させたか」、そして 「なぜあえてこの技術構成を選んだのか」 という泥臭いプロセスを共有します。
問い合わせ地獄からの脱却
私たちのチームは常に「情報の迷子」に悩まされていました。
マニュアルはあるのに見つからない。結果、ヘルプデスクに同じ質問が何度も来る。
「探させない、迷わせない、待たせない」
「まるで優秀な専属アシスタントがいるかのような体験」
これをコンセプトに掲げましたが、実行できるリソースや予算もありません。
あるのは、Google Workspaceのアカウントと、「なんとかしたい」という情熱、そしてGeminiだけでした。
TENKAI 1：技術選定の「壁」をAIと超える
最初にぶつかったのは「どうやって作るか」です。Geminiに相談すると、驚くべき提案が返ってきました。
Gemini:
Googleサイトに Vue.js で作ったアプリを埋め込みましょう。バックエンドは GAS、データベースは スプレッドシート です。これならサーバー代は0円です。
「Vue.js？ GAS？ ……美味しいの？」
非エンジニアの私にとって、それは宇宙語でした。しかし、ここからGeminiとの「ペアプログラミング」という名の 「異文化翻訳」 が始まりました。
採用したシステム構成（サーバーレス）
エンジニアの方なら 「Googleサイトの中にVue.jsをマウントする」 という構成に驚くかもしれません。
しかし、これによって 「サーバー管理不要」「認証はGoogleにお任せ」 という、非エンジニアにとって夢のような環境が手に入ります。
実際の構成図がこちらです。
TENKAI 2：スプレッドシートを「最強のCMS」にする
私が最もこだわったのは、 「スプレッドシートで何ができるか」 をとことん追求した点です。
エンジニアであれば専用の管理画面を作るところですが、
私は 「スプレッドシート自体を管理画面にする」 という設計にしました。
単なるテキストデータの羅列ではありません。
Geminiに依頼して、 「セルの入力値でアプリの挙動が変わる仕組み」 を組み込みました。
① 実装した「スプレッドシート機能」の例
-
条件分岐リンク:
「URL列」が空欄なら自動的にその単語で検索を実行し、
URLがあれば外部サイトへ飛ぶ、というロジックを実装。 -
リッチなFAQ表示:
image_url 列に画像のリンクを貼れば、回答の中に画像が展開されます。 -
見た目の制御:
セル内での「改行」は、
そのままWeb上の表示にも反映されるようにしました。
② 運用フローの革命
この設計の最大のメリットは、管理コストの劇的な低下です。
-
更新作業:
スプレッドシートを開いて、Excel感覚で修正するだけ。 -
即時反映:
「保存」ボタンすら不要。シートを修正すれば、
ユーザーが次にアクセスした瞬間に最新情報が表示されます。 -
教育コストゼロ:
スプレッドシートを使えない社員はいません。
私以外のメンバーも、初日から「ポータル管理者」になれました。
「高度な管理画面」を作らずとも、「使い慣れたツールをDBにする」 ことで、持続可能な運用体制を展開（TENKAI）できたのです。
TENKAI 3：最大の難関「GASの制限」との戦い
開発中、Geminiが深刻な顔（テキストですが）で警告してきました。
Gemini:
GASには「1日の実行時間」や「API呼び出し回数」に厳しい制限があります。普通に作ると、社員全員がアクセスした瞬間にダウンします。
ここで私たちは作戦会議を開きました。そして導き出した答えがこれです。
「APIを叩くのは1回だけ。あとは全部フロントエンド（ブラウザ）でやる」
-
ユーザーがアクセスしたら、GASは getDataRange().getValues() でスプレッドシートの全データを1回だけ取得する。
-
取得したデータをJSONとしてVue.jsに渡す。
-
その後の「検索」や「絞り込み」は、すべてユーザーのブラウザ上のJavaScriptで処理する。
この設計により、
「高速な体感速度」 、「GASの制限回避」 を両立させることができました。
非エンジニアの私が、「APIのリクエスト数」や「O(n)の計算量」を気にするようになるとは……
これぞまさにスキルの 展開（TENKAI） です。
TENKAI 4：検索エンジンへの異常なこだわり（ロジック編）
バックエンドを軽量化した分、フロントエンド（Vue.js）には全精力を注ぎました。
「GASは遅い」という定説を覆すための、こだわり抜いたロジックです。
① 「遅さ」を感じさせないキャッシュ戦略
GASのWebアプリは、初回読み込みに数秒かかるのが弱点です。
そこで、ローカルストレージを使ったキャッシュ機能を実装しました。
-
初回アクセス時はGASからデータを取得し、ローカルストレージに保存。
-
2回目以降は、API通信を待たずにキャッシュを一瞬で表示。
-
裏側で最新データを取得し、差分があれば更新。
これにより、ユーザーは 待たされている と感じることなく、
ネイティブアプリのようなサクサク感を体験できます。
② Enterキーを排除したインクリメンタルサーチ
ユーザーに 検索ボタンを押す という1アクションすらさせません。
文字を入力した瞬間、0.1秒の遅延もなく不要な情報が画面から消え去ります。
これは、最初に全データをブラウザのメモリに乗せているからこそ実現できる挙動です。
③ 「ただの検索」ではない！高度なスコアリング
単に文字が含まれている記事を出すだけではありません。
どこに含まれているか で点数付け（スコアリング）を行い、関連度が高い順に並べ替えています。
| 名前 | 説明 |
|---|---|
| カテゴリ名の一致 | +10点 |
| 質問文の一 | +3点 |
| 回答文の一致 | +1点 |
例えば「経費」と検索した時、たまたま回答文に「経費」が含まれる記事よりも、
「経費」カテゴリの記事が上位に来るようになっています。
AIの力を借りて、Google検索のような「賢さ」を実装しました。
TENKAI 5：AIと作り込んだ「UX」のディテール（UI編）
ロジックだけでなく、「ユーザーを迷わせない」ための優しさ（UX）も徹底的に作り込みました。
① 検索結果ゼロでも見捨てない「もしかして」提案
検索して何もヒットしなかった場合、ただ「ありません」と突き放すのは不親切です。
入力された言葉に近いタグを自動で探し、 「もしかして: #PC交換」 のように提案を表示する機能を実装しました。
言葉選びに迷ったユーザーを、システム側が優しくアシストします。
② 画像表示への執念
FAQにおいて画像のわかりやすさは命ですが、読み込みによるレイアウト崩れはストレスの元です。
ここでもAIとペアプロして、以下の制御を組み込みました。
-
事前読み込みとスピナー:
画像が読み込まれるまでは「くるくる回るローディング」を表示し、完了後にフワッと表示。 -
アスペクト比の自動判定:
画像の縦横比を計算し、スマホのスクショ（縦長）なら見切れないように自動でスタイルを調整。
③ 「自己解決」を拡散するシェア機能
ヘルプデスクとして一番やりたかったのがこれです。
検索結果の状態をURLパラメータとして保持し、ワンボタンでコピーできる機能をつけました。
「その件についてはここを見て！」とURLを送るだけで、相手がその検索結果画面を一発で開けます。
「URLを貼るだけでサポート完了」 という運用フローまで設計に落とし込みました。
成果：検索体験の爆速化
完成した社内ポータルでは、下記の検索体験を実現しました。
-
リアルタイム検索:
文字を打つたびにFAQがバシバシ絞り込まれる快感。 -
動的FAQ:
検索時は「質問」だけがリスト化され、クリックで「回答」が開くUI。
何より嬉しかったのは、
いろんな方から 「これ、GASで動いてるの？ 嘘でしょ？」 と驚かれたことです。
おわりに
AI技術（Gemini）を活用することで、非エンジニアの私でも 「自分の業務課題を、自分の手で技術的に解決する」 ことが可能になりました。
「コードが書けないから」と諦めていたアイデアがある方。
ぜひAIというパートナーと一緒に、そのアイデアを展開してみてください。
きっと、想像以上のものが作れるはずです。
🌺 沖縄から「21世紀を代表する会社」を創る仲間を募集
シーエー・アドバンスは、「沖縄のインターネット産業の未来を創る」をビジョンに掲げ、サイバーエージェントグループの一員として、ABEMAやAmebaを支える社内システムを開発しています。 勤務地は沖縄・那覇市 おもろまち。 Next.js 、React、Ruby on Rails、AWS などモダンな技術で、東京・ベトナムのエンジニアと協業。若手が裁量権を持って挑戦できる環境です。
失敗を恐れず挑戦できる文化。一緒にアドバンス(進歩)しませんか?