アプリ開発に挑戦したいけれど、どこから手をつけたら良いか分からない…。新しい技術に戸惑うことも多いですが、アイデア次第で誰でも大きな一歩を踏み出せます。特に、最新の生成AI「Gemini」を使った開発は、今後のアプリ開発において革命的なものとなる可能性を秘めています。
この記事では、55歳のITエンジニアが「Gemini」を使って地図と物語が連動するWebアプリを開発する過程を紹介し、その過程で得られる実践的な知識や開発のヒントをお伝えします。
アプリ開発における最初の壁AI技術とWeb開発の未知の領域

AIのイメージ
アプリ開発を決意したものの、最初に立ちはだかるのは、技術の選定とその理解です。多くの開発者が通る道ですが、特に初心者や数年ぶりに開発に戻ってきた人にとっては、どこから手をつけていいのか悩むものです。
今回は、生成AI「Gemini」を開発のパートナーとして選びました。Geminiは、膨大な情報をもとに開発のヒントをくれるだけでなく、技術の選定にも優れた提案をしてくれる心強い相棒です。しかし、そこで使用される技術には、新たな挑戦が待ち受けていました。
ReactとNext.jsの選定理由
まず最初に提案された技術の一つが、ReactとそのフレームワークであるNext.jsです。これらは、ユーザーインターフェース(UI)の構築に優れたツールです。Reactはコンポーネント指向で、UIの再利用が容易になり、開発効率が高まります。Next.jsは、SEO対策にも優れており、サーバーサイドレンダリング(SSR)機能でより早くページを表示できます。
これらの技術が選ばれた理由は、将来的にスマホアプリに対応する可能性があるからです。Reactのコードをそのまま活かして、React Nativeを使ってスマホアプリへの移行がスムーズにできるため、開発の柔軟性が増します。
ヘッドレスCMS(microCMS)の導入理由
次に提案されたのがヘッドレスCMSです。microCMSは、コンテンツ管理を外部のシステムで行い、必要なデータをAPIで取り出せるツールです。これにより、開発者はUI部分の構築に集中でき、データベース管理や管理画面の開発を省けるという利点があります。
これが特に魅力的だった点は、過去の経験から、データ入力や管理画面を作る手間を省けるという点でした。プログラミングの難しさを感じている人にとっては、非常に効率的で、開発スピードを大幅に向上させる選択肢となります。
アプリ開発に必要な道具と技術選定の結果
開発を進めるにあたって、最初に選定した技術を基に、どのようにアプリを作っていくのか、具体的にどう進めていくのかを見ていきましょう。
データ管理と地図機能の組み合わせ
アプリの主な要素は「地図」と「物語」です。地図を使って物語の中の登場人物や出来事を表示し、ユーザーがその情報をもとに物語を深く理解できるようにします。そのために必要だったのが、地図ライブラリとしてのMapboxまたはLeafletの選定です。これらのツールは、カスタマイズ性が高く、自由なデザインや機能追加が可能です。
さらに、位置情報を管理するために、PostgreSQL(PostGIS拡張)が選ばれました。PostGISは、地図データを効率よく扱えるため、緯度・経度などの位置情報を正確に管理できます。
データの連携とインタラクション
アプリ内のデータは、人物やストーリー、エピソードといった情報を効率よく連携させ、ユーザーが検索機能を使ってデータを簡単にアクセスできるようにします。ユーザーは地図を操作しながら、同時に年代スライダーや人物選択アイコンを使って物語の中の出来事や人物を絞り込むことができます。これにより、物語の中でどこで何が起きたのか、具体的な地図とともに確認できる楽しさが生まれます。
Geminiアプリ開発に関する疑問解決
アプリ開発の際に抱えがちな疑問をいくつか取り上げ、実践的な回答を示します。
「Next.jsを使う理由は?」
Next.jsは、SEO対策が強化され、サーバーサイドでページがレンダリングされるため、検索エンジンにとって優れたツールです。さらに、Reactベースで開発されているため、UIの構築が効率的であり、将来的にスマホアプリに移行する際にも、そのコードを活用できるメリットがあります。
「microCMSを使う利点は?」
microCMSは、コンテンツ管理の専門ツールであり、管理画面を自分で作成する手間を省きます。また、APIが自動で提供されるため、開発者はデータを操作する部分に集中でき、コンテンツ制作に必要な時間を大幅に短縮できます。これにより、コンテンツの作成に集中できる点が大きな魅力です。
「地図機能を活かすにはどうすれば良い?」
地図機能を活かすためには、地図データを適切に扱えるライブラリ(MapboxやLeafletなど)を使用することが重要です。これらを使うことで、ユーザーが物語を視覚的に楽しみながら、簡単に目的の情報にアクセスできるようになります。
まとめ
Geminiを使ったアプリ開発は、単なる技術選定にとどまらず、アイデアを実現するための強力なツールとなります。初心者でも手を出しやすい技術が提案され、物語と地図の連携という独自のアイデアを具現化する手助けとなりました。あなたも、自分のアイデアを形にするために、どんな技術を選べばいいのか、どのように進めれば良いのか、この開発日誌を参考にして一歩踏み出してみてください。
次回は、バックエンドの構築に関するつまずきやデータ投入作業の記録をお届けします。どんな問題が待ち受けているのか、引き続きお楽しみに!
コメント