画面消失トラブルを乗り越えてフロントエンド完成！ ようやくスマホでの動作確認までこぎつけた ［第3回］脱“張りぼて”へ、フロントエンドを作り込む

バイブコーディング連載の第3回は、フロントエンドの作り込みとスマートフォンでの動作確認までを扱います。UIの調整中に画面が真っ黒になるトラブルが起き、Google AI Studioの「Open version history」から以前の状態にレストアして復旧しました。ボトルのラベルを大きく表示する機能は、固定位置を切り出す方式では不安定だったため、Geminiに座標を推定させる方式へ変更し、APIの利用コストが発生する点も確認しています。

アプリはアイラ島とAIをかけて「AiLA」と命名し、iPhoneのSafariでの動作にも成功しました。共有リンクで他人にテストしてもらう際は、コードも見えるためAPIキーを含めないよう注意が必要です。最後にGitHubへの同期を試みたものの連携が完了せず、Googleのフォーラムでも同様の報告があったため、修正を待つことになりました。

この要約は生成AIで作成しました。

記事はこちら

画面消失トラブルを乗り越えてフロントエンド完成！ ようやくスマホでの動作確認までこぎつけた ［第3回］脱“張りぼて”へ、フロントエンドを作り込む

柳谷智宣

ITライター

FacebookContact

1972年生まれ、東京育ち。ITやビジネスといったカテゴリーで執筆しているライターです。キャリアは27年目で、雑紙やムック、単行本、新聞といった紙媒体から、ウェブ記事、メールマガジン、プレスリリースなども手掛けています。現在は、執筆だけでなく、企画提案から執筆・編集までを行っております。主に一般ビジネスユーザーをターゲットに、易しく解説する記事が多いですが、エンタープライズ向けの記事やメーカーや企業のウェブサイトのコンテンツ制作も請け負っています。可能な限り、様々な案件に対応できますので、まずは打診いただけると幸いです。