IT資格の学習アプリを自作｜情報処理安全確保支援士とAWSソリューションアーキテクト、記述式はタブレット横画面で解く

IT資格の勉強アプリを、自分で作りました。

情報処理安全確保支援士試験と、AWS Certified Solutions Architect – Associate(AWS認定ソリューションアーキテクト アソシエイト)。この2つの資格に向けた、学習アプリです。

作ってみると、思いもよらない発見がたくさんありました。タブレットで記述式をどう解くか、ホーム画面に追加するだけでアプリになる便利さ、そして「なぜかAIが、いちばん欲しかった問題だけ載せてくれなかった」という謎。

今日は、その制作の裏側を、苦労話もまじえて全部書きます。

作ったのは、2つの資格に向けた3本のアプリです

一覧

作ったのは、次のアプリです。

• 情報処理安全確保支援士の午前Ⅰ対策アプリ(270問)

• 情報処理安全確保支援士の午後Ⅰ・Ⅱ向けの、記述式の回答練習アプリ

• AWS Certified Solutions Architect – Associate(AWS認定ソリューションアーキテクト アソシエイト。試験コードはSAA-C03)の対策アプリ

資格は2つで、アプリは3本です。情報処理安全確保支援士だけ、午前と午後で別のアプリに分けました。

2つの資格を、ひとことで言うと

名前だけでは、どんな資格か分かりにくいので、先に整理しておきます。

• 情報処理安全確保支援士試験：セキュリティ分野の国家資格の試験です。難易度の高い「高度試験」に分類されます。午前Ⅰ・午前Ⅱ・午後Ⅰ・午後Ⅱがあります

• AWS Certified Solutions Architect – Associate:AWS(クラウド)の認定資格で、クラウドの設計力を問われます。AWS認定には基礎、アソシエイト、プロフェッショナルなどのレベルがあり、アソシエイトは中級に当たります。末尾の「C03」は、試験のバージョンを表すコードです

どれもブラウザで動きます

どのアプリも、インストールは必要ありません。ブラウザで開けば、そのまま使えます。

作りは、画面のファイルを置いておくだけの静的な配信と、必要なときだけ動くサーバーレスの仕組みです。常にサーバーを立てておく必要がないので、維持費をぐっと抑えられます。

もちろん、バイブコーディング(AIに指示を出しながらアプリを作っていく開発スタイル)です。マンチーが書いたコードは、ほぼゼロ。ClaudeとAWSの力で、ここまで形になりました。

AWS認定アプリ：問題は、Claudeが書いてくれました

4つの分野から出題

AWS Certified Solutions Architect – Associateは、出題が4つの分野に分かれています。アプリでも、次の4つに分けました。

• 回復性の高いアーキテクチャ設計

• 高パフォーマンスアーキテクチャ設計

• セキュアなアーキテクチャ設計

• コスト最適化アーキテクチャ設計

問題数は65問です。分野ごとに絞って練習できます。

問題は、頼んだらClaudeが書いてくれた

AWSの問題は、Claudeにお願いしたら、その場でClaudeが書いてくれました。勝手に、さらさらと出てきました。

もちろん、AIが書いた問題なので、間違いが混じる可能性はあります。正解や解説は、AWSの公式ドキュメントでも確認しながら使うのが安心です。

解説に、用語の説明を付けた

AWSの学習で厄介なのは、サービス名や専門用語の多さです。そこで、解説の冒頭に「用語」の説明を付けました。たとえば、鍵の保護に使う専用機器やサービスなら、それが何かを短く解説したうえで、なぜその選択肢が正解なのかを説明します。

間違いの選択肢にも、「なぜ違うのか」を一つずつ書いています。

弱点を集中的に

AWSのアプリには、「弱点集中5問」というモードがあります。間違えた問題や、苦手な分野の問題を、まとめて出してくれます。得意な問題を何度解いても、力はつきません。苦手を潰すのが、近道です。

情報処理安全確保支援士の午前Ⅰ：270問の対策アプリ

9回分、270問

午前Ⅰは、令和2年秋期から令和6年秋期までの9回分、270問を収録しています。1回分が30問で、9回ぶんです。

出題の分野は、テクノロジ系、マネジメント系、ストラテジ系。そのうちテクノロジ系が約8割(221問)を占めます。基礎理論や計算問題が多いのは、この分野です。

図つきの問題も、載せています

午前Ⅰには、図や表を見ないと解けない問題があります。文字だけに直してしまうと、問題の意味が変わってしまうものもあります。

そこで、令和5年春期から令和6年秋期までの4回分では、問題に付いている図を画像にして、24問に載せました。問題を開くと、問題文の上に図が表示されます。

文字だけの問題より、手間がかかります。画像を一枚ずつ用意して、問題の番号と対応させなければいけないからです。でも、図が見えないと解けない問題を、図なしで出すわけにはいきません。ここは、マンチーのこだわりです。

4つの学習モード

次の4つのモードを用意しました。

• 全範囲からランダム出題

• 正答率の低い問題から出題

• ドメイン(分野)を選んで学習

• 素早く確認

「正答率の低い問題から」は、自分の弱点を自動で拾ってくれる、お気に入りのモードです。

記述式の問題を、タブレットでどう解くか

次は、いちばん苦戦した話です。

情報処理安全確保支援士の午後は、記述式です

情報処理安全確保支援士の午後Ⅰ・Ⅱは、選択肢から選ぶ形ではありません。長い問題文を読んで、自分の言葉で文章を書いて答える、記述式です。

これを、アプリにどう入れ込むか。ここで、かなり悩みました。

問題文が長くて、画面に収まらない

問題文は、とにかく長いです。図や表も入っています。選択問題のように「問題、選択肢、ボタン」を1画面に並べるだけでは、成り立ちません。

回答を書きながら、問題文を何度も見返したい。でも、画面を切り替えるたびに、読んでいた場所を見失います。

答えは、タブレットの横画面で

そこで、タブレットで使うことを前提にしました。 横向きにすると、画面が左右に分かれます。

• 左半分：問題文(IPAの公式PDF)

• 右半分：回答を書く欄(文字数カウント付き)

問題を読みながら、すぐ隣に回答を書けます。実際の試験でも、問題冊子を見ながら解答用紙に書くので、感覚が近くなりました。

境目は、指で動かせます

左右の境目は、ドラッグして動かせます。問題文をじっくり読みたいときは、左を広げる。書くことに集中したいときは、右を広げる。

さらに、境目をダブルタップすると、あらかじめ決めた3つの幅(30%、58%、75%)に、順番に切り替わります。ドラッグが面倒なときは、これで一瞬です。

動かした位置は覚えていて、次に開いたときも、同じ幅で表示されます。

もちろん、全画面でも読めます

「長い問題文は、全画面でどっしり読みたい」という場面もあります。そのために、問題文だけを別のタブで開いて、全画面で読めるようにしました。縦向きにした場合も、問題文は別画面で開く形です。

「午前Ⅰ」だけが、なかなか載らなかった理由

ここで、ひとつ謎の話をさせてください。

いちばんやりたかった問題

マンチーがいちばん取り組みたかったのは、午前Ⅰの問題でした。計算問題が多く、情報工学の学問的な要素が出てきます。基礎知識と計算力が試される、いわば「地力」の問題です。

ところが、Claudeに頼むと、なぜか午前Ⅱの問題ばかりを載せてきました。午前Ⅱは、セキュリティの専門知識を問う問題です。

「違う、午前Ⅰをやりたいんだ」。

なぜなのか、調べてみました

当時のやり取りの記録には、理由は残っていません。そこで、IPAの公式サイトの掲載のされ方を調べてみました。すると、気になる点が見つかりました。

IPAのページでは、令和6年度の情報処理安全確保支援士試験の問題が、次のファイル名で並んでいます。

• 午前Ⅰ：`koudo_am1`(高度試験共通)

• 午前Ⅱ：`sc_am2`(情報処理安全確保支援士の専門)

• 午後：`sc_pm`(情報処理安全確保支援士の専門)

午前Ⅱと午後は、ファイル名に「sc」(情報処理安全確保支援士の略)が入っています。ところが、午前Ⅰだけは「koudo」(高度)になっていて、他の試験区分の午前Ⅰと同じファイルを共有する形です。

あくまで、推測です

ここからは、確かな記録はなく、あくまで推測です。

• ファイル名に「sc」が付いたものを探すと、午前Ⅰは出てこない

• 午前Ⅰのファイルは、午前Ⅱよりサイズが大きく(令和6年度の例で約2.2MBと約1.6MB)、図や計算式が多そう

• 図や計算式の多い問題は、文字に起こすのが大変

こうした理由が重なった、というのが、マンチーの見立てです。AIにも、探しやすいものと、探しにくいものがあるのかもしれません。

結局、PDFを渡して解決しました

解決は、シンプルでした。午前Ⅰの問題PDFをフォルダに入れて、それをもとに作ってもらったのです。

出来上がったのが、先ほどご紹介した、270問の午前Ⅰ対策アプリです。

「なぜか載らない」ときは、探しに行く場所が間違っている可能性があります。AIに丸投げしないで、資料そのものを渡す。これが、いちばん確実でした。

意外に便利だった、ブラウザの「ホーム画面に追加」

ここからが本題です。まず、作ってみて「これは便利だ」と思った機能の話をさせてください。

アプリのように使えます

マンチーはブラウザベースのアプリを作ることが多いのですが、実は、アプリ用のアイコンを、わざわざ作り込まなくても済むことに気づきました。

ブラウザの「ホーム画面に追加」を使うと、2〜3回のタップだけで、ホーム画面にアプリのアイコンが並びます。タップすると、ブラウザのアドレスバーなどが消えて、まるで単独のアプリのように、画面いっぱいに開きます。

iPhoneとiPad(Safari)の場合

手順は、こうです。

1. 画面の共有ボタンを押す

2. 「ホーム画面に追加」を押す

3. 名前を確認して、「追加」を押す

これだけです。ホーム画面に、アイコンができます。

Androidの場合

Androidでは、Chromeのメニューに「インストール」や「ホーム画面に追加」といった項目が出ます。表示される文言は、機種やブラウザによって少しだけ違います。

開発者向けの解説によると、条件が合えばChromeはアプリとして登録してくれて、そうでない場合は、ウェブサイトへのショートカットを作る形になるとされています。

仕組みは、実は難しくありません

この機能は、PWA(プログレッシブウェブアプリ)と呼ばれる仕組みの一部です。簡単に言うと、「ウェブサイトを、アプリっぽく見せるための設定」です。

必要なのは、主に次のものです。

• アプリの名前や、開いたときの見た目を書いた設定ファイル(マニフェストと呼びます)

• 192ピクセルと512ピクセルのアイコン画像

• HTTPSで配信されていること(暗号化された安全な通信)

オフライン対応などに使うサービスワーカーというプログラムは、MDNの解説では、インストールするために必須ではないとされています。

マンチーの情報処理安全確保支援士とAWSのアプリには、アイコンと設定ファイルを用意してあります。

注意：iPhoneでは、ブラウザ版と別物になります

ひとつだけ、ハマりそうな点があります。iPhoneでホーム画面から開くアプリは、ブラウザとは別の入れ物で動くと説明されています。そのため、保存されるデータが、ブラウザで使っていたときと別になる場合があります。

「ホーム画面から開いたら、さっきまでの記録が消えている」と焦らないように、先に書いておきます。

古い画面が出続けることもあります

もうひとつ、注意点です。ホーム画面から開くアプリは、画面のファイルを手元に保存して使い回します。つまり、アプリを直しても、古い画面が表示され続けることがあるのです。

記述式のアプリには、保存データを消す専用のボタンを付けました。保存の世代を示す番号も、「8」まで上がっています。それだけ、直しては試して、を繰り返しました。

ログインすると、ランキングにも参加できます

アプリによっては、Googleアカウントでログインすると、スコアが保存されます。ランキングにも参加できるので、仲間内で競い合う使い方もできます。ゲストのままでも、問題を解くことはできます。

ランキングやスコアの保存は、必要なときだけ動くサーバーレスの仕組みで作っています。使われない時間は、ほとんど費用がかかりません。個人開発で、維持費を意識しながら作るには、ちょうどいい構成でした。

落とし穴：勝手に別のアカウントでログインされた

作っている途中で、ログインのボタンを押すと、自分の別のGoogleアカウントで勝手にログインされてしまう、という不具合にぶつかりました。

アプリには「このメールアドレスでログインしたい」という指定を付けていました。ところが、ログインの仲介をするAWSの仕組み(Cognito)が、その指定をGoogleまで渡していないようでした。すると、Googleはブラウザに残っているアカウントを、そのまま選んでしまいます。

しかも、勝手に選ばれたのは、利用期限が切れたテスト用のアカウントでした。そのため「利用期限切れ」として弾かれていました。

原因に気づけたのは、AWS側の記録(ログ)を見たからです。ボタンを押した本人は通っているのに、別のアカウントが何度も拒否されている。そのずれから、アカウントの取り違えだと分かりました。

直し方は、ログインのたびに、指定したアカウントで強制的にログインし直す形にしました。

ここでの学びは、複数のアカウントを持っているなら、「どのアカウントで入ったか」を確かめる習慣が要る、ということです。「指定したつもり」と「実際に通ったアカウント」は、別物でした。

正直に書いておく、限界

いいことばかり書くのは、フェアではないので、限界も書いておきます。

• 問題数は、まだ多くありません。AWSのアプリは65問です。もっと増やしていきたいと思っています

• 午前Ⅰの図つき問題は、令和5年春期以降の24問です。令和2年秋期から令和4年春期までの5回分は、まだ図を付けられていません

• AWSの問題はAIが書いたもので、公式の問題集の代わりにはなりません

• 午後の記述式は、採点を自分で行う形です

• 本番の試験に合格できるかどうかは、このアプリでは保証できません

それでも、自分で作ったアプリで勉強する、というのは、思った以上に楽しいものです。使いにくいところは、すぐに直せます。

まとめ：作ってみて、初めて見えたこと

最後に、まとめます。

• 情報処理安全確保支援士とAWS認定の2つの資格で、3本の学習アプリを作った

• 記述式の問題は、タブレットの横画面を分割すると、問題文と回答欄を同時に見られる

• ブラウザの「ホーム画面に追加」を使えば、2〜3タップで、アプリのように使える

• 「なぜかAIが載せてくれない」ときは、資料そのものを渡すと確実

• 解説は、答えだけでなく、用語の説明まで書くと、学習効果が上がる

アプリを作るのは、AIのおかげで、驚くほど簡単になりました。次は、問題数を増やして、使い勝手をもっと磨いていきます。

【この記事が興味深かった方は、以下記事もおすすめです】

＜おすすめ記事①＞
「問題づくり」もその一つ。面倒な作業を、自分で自動化してきた7つの仕組みを知りたい方はこちら。

＜おすすめ記事②＞
同じ個人開発の自作ツールとして、設計書を自動で作るツールの話はこちら。

＜おすすめ記事③＞
資格のテーマと同じ、セキュリティの話。ふさいだはずの穴が、直しても戻っていた記事はこちら。

#IT資格 #情報処理安全確保支援士 #AWS認定 #学習アプリ #PWA #バイブコーディング #個人開発 #資格勉強 #munchie #マンチー