top of page
MSL

AIと二人三脚!日曜プログラマーがWebサイトに「今日は何の日?」機能を追加した話

こんにちは!このBlog(所長Blog)を作成してMIKEです。 今回は、私が運営するWebサイト「マーケティングサイエンスラボ」に、AIと協力して新しい機能を追加した際の全記録を、備忘録も兼ねてご紹介したいと思います。

プログラミングの経験はほとんどありませんでしたが、「こんな機能があったら面白いな」というアイデアを、GoogleのAI(Gemini)とGoogleの無料ツール「GAS」を駆使して形にすることができました。この記事が、「プログラムは専門家だけのもの」と思っている方の背中を少しでも押せたら嬉しいです。


きっかけは「自分のサイトに『今日は何の日?』コーナーが欲しい!」


私のサイト「マーケティングサイエンスラボ」を訪れてくれた人が、何か新しい発見をして楽しめるようなコンテンツを追加したいと、常々考えていました。そこで思いついたのが、多くの情報サイトで目にする「今日は何の日?」というコーナーです。

ただ、よくある記念日を表示するだけでは物足りないと感じ、以下の3つのテーマを組み合わせることにしました。

  1. 記念日・年中行事

  2. 有名人の誕生日

  3. NFL(アメフト)の過去のイベント

これを毎日手動で更新するのは現実的ではありません。そこで、「毎日自動で情報を集め、その日の情報をランダムに表示する」というプログラム開発に、AIを相棒として挑戦することにしたのです。

マーケティングサイエンスラボ」の『今日は何の日?』コーナー
マーケティングサイエンスラボ」の『今日は何の日?』コーナー

AIは思考を整理し、エラーを解決する「最強の相棒」


「AIに頼めば、全自動でコードを書いてくれる」と考える人もいるかもしれませんが、今回の私の経験は少し違いました。AIは、魔法の杖ではなく、思考を整理し、未知の道を照らし、壁にぶつかった時に解決策を提示してくれる「最強の相棒」でした。

開発プロセスは、常に二人三脚です。

  • : 「こんなことを実現したい」という目標と、最終的なゴール(Wixサイトへの埋め込み)を提示する。

  • AI: 目標達成までの具体的なステップ(データ収集→Webアプリ化)を提案し、各ステップのコードを作成・解説してくれる。

  • : 提案されたコードを実行し、結果を報告する。

  • AI: 発生したエラーの原因を特定し、的確な修正案を提示してくれる。

特に、Webサイトから情報を取得する「スクレイピング」では、サイト側の仕様変更やボット対策により、何度もエラーが発生しました。自分一人では原因不明で諦めていたであろうエラーも、AIがログを分析し、「URLの形式が変わっています」「サイトの内部構造が変更されています」「これはボット対策なので、別の方法に切り替えましょう」と、まるで経験豊富なエンジニアのように的確なアドバイスをくれました。

私がプロジェクトの「艦長」として進むべき方向を決め、AIが「航海士」として技術的な問題を解決していく。この共同作業こそが、今回の成功の最大の要因でした。


GASで実現する「Web情報の自動データ化」


今回のプロジェクトの心臓部となったのが、Google Apps Script (GAS) です。これは、GoogleスプレッドシートやGmailなど、Googleの各種サービスを自動化できるプログラミング言語で、無料で利用できます。

GASのすごいところは、Web上の情報を簡単に取得し、馴染みのあるスプレッドシートにデータとして蓄積できる点です。

当初はWebサイトの情報を直接抜き出す「スクレイピング」を試みましたが、サイト側の防御が固く、難航しました。しかし、Wikipediaのようなサイトは、開発者のためにAPIという公式なデータの出入り口を用意してくれています。AIに教えられ、このAPIを利用する方法に切り替えたことで、安定的かつ確実に「記念日」や「誕生日」の情報を取得できるようになりました。

UrlFetchAppというGASの命令一つで、まるでWebサイトに「この情報をください」とお願いするようにデータを取得し、それをスプレッドシートに1行ずつ整理していく。この「Web情報のデータ化」が、特別なサーバーや難しい設定なしに実現できるのは、GASの大きな魅力です。

記念日を収集した実際のスプレッドシート
記念日を収集した実際のスプレッドシート

サーバーいらず?GASだけでWebページまで作れてしまう衝撃


GASの能力は、データの収集だけにとどまりませんでした。プロジェクトの最終段階では、収集したデータを表示するためのWebページそのものをGASで作成しました。

doGet()という特殊な関数を記述するだけで、GASはWebサーバーのように振る舞い、アクセスがあるたびにプログラムを実行して動的なHTMLを生成してくれます。

今回のWebアプリの処理の流れは以下の通りです。

  1. ページが読み込まれると、doGet()が起動。

  2. スプレッドシートから今日の出来事を全て取得。

  3. 各カテゴリからランダムに3件を選出。

  4. 選び出した情報で見栄えの良いHTMLを組み立てて表示。

さらに、表示速度を改善するために「キャッシュ」という技術も導入しました。これは、一度生成したページを一時的に保管しておき、2回目以降のアクセスでは保管したページを瞬時に返す仕組みです。これにより、毎回スプレッドシートの全データを読み込む負荷をなくし、高速表示を実現できました。

完成したWebアプリは、専用のURLが発行されます。あとはそのURLをWixの「HTML iframe」に貼り付けるだけで、自作のプログラムを自分のサイトに埋め込むことができました。

GAS(Google Apps Script)の画面
GAS(Google Apps Script)の画面

まとめ:アイデアは、AIとツールがあれば形になる


今回の挑戦を通して、プログラミングはもはや一部の専門家だけのものではないと、身をもって感じました。

「こんなものがあったら面白いな」というアイデアさえあれば、AIという優秀な相棒が思考の整理と技術的な課題解決を手伝ってくれます。そして、GASのような無料で高機能なツールが、そのアイデアを形にするための具体的な手段を提供してくれます。

もちろん、エラーの解決には根気が必要でしたが、そのプロセス自体が大きな学びになりました。もしあなたが何か作りたいもののアイデアを持っているなら、ぜひAIに話しかけるところから始めてみてはいかがでしょうか。きっと、想像以上の面白い冒険が待っているはずです。

コメント


(C) 株式会社マーケティングサイエンスラボ

(C) MSL,2020-2025

bottom of page