はじめに
はじめまして！クラウドエンジニアのkazuma57jpです。
今回、Qiitaに初めて投稿させていただきます。
現在、Oracle Cloud Infrastructure (OCI) Architect Professional 認定試験の合格を目指して学習中なのですが、自分の学習進捗を管理したり、隙間時間で効率よく問題を解いたりできるツールが欲しくなり、Google Apps Script (GAS) を使って模擬試験アプリを自作しました。
なお、今回の開発には AI コーディングアシスタントの Antigravity をフル活用し、いわゆる 「バイブコーディング（Vibe Coding）」 スタイルで爆速で実装を進めました。AI と対話しながら、自分のやりたいことをどんどん形にしていく過程は非常にエキサイティングでした！
作ったもの
OCI模擬試験アプリ
GASとGoogleスプレッドシートを組み合わせて作成した、Webベースの試験対策ツールです。
-
主な機能
- 全25問のランダム出題（単一選択/複数選択対応）
- 画像付き問題の表示（構成図や診断結果の確認が可能）
- 解答後すぐの解説表示（ON/OFF切り替え可能）
- 学習履歴の自動保存（スプレッドシート連携）
- 学習状況の可視化（正答率や所要時間の推移グラフ）
技術スタック
- バックエンド: Google Apps Script
- フロントエンド: HTML / CSS / JavaScript
- データベース: Google Spreadsheet
- グラフ描画: Chart.js v3.9.1
- 開発支援: Python (画像データ流し込み用)
工夫したポイント
1. 学習履歴の見える化
ただ問題を解くだけでなく、「前回よりも正答率が上がったか」「解答スピードが早くなったか」を一目で確認できるようにしました。Chart.jsを使って、直近10回分の成績をグラフ化しています。
2. デザインの洗練とナビゲーションの改善
初期はシンプルなデザインでしたが、ダークモードを基調としたモダンなUIにリファクタリングしました。
また、GASのWebアプリ特有の「iframe内での遷移エラー（403 Forbidden）」を回避するため、ナビゲーションには window.top.location.href を使用するなどの工夫をしています。
3. スプレッドシートによる問題管理
問題の追加や修正をコードを触らずに行えるよう、スプレッドシートをデータベースとして活用しました。これにより、新しい問題を思いついた時にスマホからでも簡単に更新できます。
開発中に苦労したこと
1. 学習状況画面が表示されない...！
スプレッドシートからデータを取得する非同期処理と、Chart.jsの初期化のタイミングが合わずに画面が真っ白になる問題がありました。プロミスやコールバックを使い、データ取得完了後に描画を開始するよう制御することで解決しました。
2. 文字数制限との戦い：Base64による画像埋め込み
OCIの試験は「構成図を見て答える」問題が多いため、アプリでも画像を表示させる必要がありました。
GASで画像を扱うため、画像をBase64形式に変換してスクリプト内に直接埋め込む手法をとりましたが、ここでGASの1セルあたりの文字数制限やエディタの動作が重くなる問題に直面しました。
-
解決策:
- Pythonスクリプトを作成し、画像をBase64エンコードして
SetupQuestions.gsの適切な箇所に自動挿入する仕組みを構築。 - 大容量のデータ流し込みによるトークン制限やエディタのフリーズを回避しながら、スムーズに画像付き問題を実装できました。
- Pythonスクリプトを作成し、画像をBase64エンコードして
おわりに
初めてのツール制作と、初めてのQiita投稿でした。
自分の欲しかったものを形にする楽しさを改めて実感しました。
特に、GASの制約をどう工夫して乗り越えるかというプロセスは、非常に勉強になりました。
今後は、Gemini APIなどと連携して「弱点解析とAIによる個別アドバイス機能」なども追加していきたいと考えています。
最後まで読んでいただきありがとうございました！
もしよろしければ、いいねやコメントをいただけると励みになります。
参考にしたドキュメントなど