最近、文系出身の友人の多くが Codex を使って自分たちのプロダクトを開発しようと試みています。
前の2つの記事では Codex の使い方を紹介しましたが、今回は実践編です。Codex を使って WeChat ミニプログラムを構築する方法を解説します。
まずは成果を見てみましょう。今回は「One Page」という読書チェックイン用のミニプログラムを作成しました。以下は WeChat 開発者ツールでの実行画面です。
アイデアから使えるミニプログラムに仕上げるまでのプロセスは、以下のステップに分けられます。
Figma プロトタイプデザイン → Codex コード生成 → 開発者ツールでシミュレーション → モバイルプレビュー → 審査提出 & 公開
Figma はページの見た目やボタンの遷移先を決める役割を担い、Codex はそのデザインをコードに変換します。WeChat 開発者ツールはミニプログラムの実行、確認、スマートフォンでのプレビュー送信に使用します。自身のミニプログラムアカウントを準備したら、WeChat バックエンドを通じて審査提出と公開を行います。
1. Figma とは？なぜ最初に使うのか？
Figma はインターフェースデザインとコラボレーションツールで、アプリ、ウェブサイト、ミニプログラムのページデザインによく使われます。デザイナーはレイアウト、色、ボタンを設定し、プロダクトマネージャーは操作フローを検討し、開発者はデザインの寸法、間隔、アセットを確認してページを実装します。
また、クリック可能なプロトタイプを作成することもできます。例えば、ホームページのボタンを別のページにリンクさせ、クリックで遷移するようにすることで、操作感を事前にテストできます。
今回の目的もまさにこれです。コードを書く前に、複数のページを一覧で確認し、ボタンの配置や画面の混雑具合を議論できます。
以前はこのデザイン案を開発者に渡すのが一般的でしたが、今では確定したデザイン案を Codex に渡してコードを書かせることができます。デザイナーは慣れた Figma から始められ、すでに Codex を使っている人は、まず Codex にドラフトを生成させ、それを Figma で調整することもできます。
「One Page」もこのようにして作られました。まず「本棚」「記録」「統計」の3つの主要ページを決定し、カラースキームとレイアウトを統一しました。
これがデザインのショーケースです。背景にはクリームホワイト、テキストとメインボタンにはダークブルー、現在の操作を強調するためにライトグリーンを使用しています。ホームページでは現在読んでいる本を最も目立つ位置に配置し、統計情報は別のページに分けて、開いたときに数字が多すぎないようにしています。
このステップでは全体の効果を確認します。色、フォントサイズ、ページの配置に満足したら、次のステップに進みます。
2. Codex にドラフトを生成させ、Figma でプロトタイプを完成させる
インターフェースを描けなくても、明確な要件から始められます。例えば今回は、余白が多く、読んでいる本を確認でき、進捗を簡単に記録でき、読書履歴を振り返られる読書日記が欲しいと考えました。
Codex に要件とビジュアルの方向性を一緒に伝えます。
1読書チェックイン用の WeChat ミニプログラム「One Page」を作りたいです。2まず3つのページをデザインしてください：本棚ホームページ、読書記録、読書統計。機能コードはまだ書かないでください。34ビジュアルスタイルは静かな読書日記のように：5クリームホワイトの背景、ダークブルーのテキスト、ライトグリーンのキーエリア、十分な余白。6ホームページでは読書中の本と記録への入り口を強調してください。他のページも同じビジュアルスタイルを維持してください。7ブックカバーにはオリジナルの幾何学図形を使用し、サンプル本には架空のコンテンツを使用してください。89まず、3つのページを横に並べたプレビュー画像を提供してください。10また、3つの独立した 390×844 SVG ファイルを出力し、テキスト、グラフィック、ボタングループをそのまま保持して、Figma でさらに調整できるようにしてください。メインボタンには個別に名前を付けてください。
SVG 出力をリクエストすることで、デザインを Figma に取り込めます。SVG はベクターグラフィック形式で、この場合インポートするとテキスト、グラフィック、グループが個別に選択・調整可能な状態で提供されます。
ドラフトを取得したら、満足するまで修正します。フィードバックはできるだけ具体的に、「ホームページのタイトルを少し縮める」「メインボタンをダークブルーに統一する」「ブックカバーを大きくする」などと伝えます。3つのページすべてが満足のいく状態になったら、プロトタイプのインタラクションを処理します。
デザインを Figma に取り込む
Figma デザインファイルを開き、左側の「Pages」の横にある「+」をクリックして新しいページを作成します。
この例では、SVG コンテンツをコピーして Figma キャンバスに貼り付けることでインポートを完了します。3つのアートボードに「01-本棚ホームページ」「02-読書記録」「03-読書統計」と名前を付け、横に並べます。アートボードを選択したら、右側の「Design」パネルで幅と高さを確認します。
Figma を初めて開く場合は、以下のエリアを把握してください。左側のレイヤーリスト、中央のキャンバス、右側の外観用「Design」パネル、インタラクション設定用の「Prototype」です。テキストやボタンを変更するには、まずレイヤーリストで選択します。
インポート後はフォントを確認することを忘れないでください。環境によってフォントが置き換えられ、タイトルの折り返しやテキスト幅が変わることがあります。今回もデザイン案とミニプログラムでフォントレンダリングが異なったため、個別に確認する必要がありました。
ボタンにジャンプを追加する
ホームページの「続きを読む」カードを例にします。それを選択し、右上の「Prototype」に切り替え、「Interactions」の横の「+」をクリックします。
表示された「Interaction」パネルで、以下の3つのオプションを設定します。
- Trigger：「On click」を選択
- Action：「Navigate to」を選択
- Destination：「02-読書記録」（ターゲットアートボード）を選択
記録ページの保存ボタンはホームページにリンクし、ホームページの統計アイコンは統計ページにリンクします。以下の画像は統計エントリの設定です。
右上の三角形の「Present」アイコンをクリックしてプロトタイプデモを開きます。ホームページからクリックして遷移し、ページ間のルートをテストします。
Figma プロトタイプはジャンプをデモンストレーションします。実際の入力、保存、データ更新は次のステップでミニプログラムコードが実装します。
3. デザインができたら、MCP はどこで使うのか？
MCP は Figma デザインを Codex に渡すステップで使用します。接続すると、Codex は選択したアートボードのデザイン構造、スタイル、アセットを読み取り、デザイン案に基づいて実装を続行できます。
すでに Figma の使い方を知っていてドラフトが準備できている場合は、ここから直接始められます。実装したいアートボードを選択し、そのアートボードのノード情報を含むリンクをコピーし、Figma 接続を有効にして Codex に送信します。
1Figma MCP を介して、このアートボードのデザインコンテキストとスクリーンショットを読み取ってください。2まず、読み取ったページ構造、フォントサイズ、色、間隔、アセットを説明してください。3読み取れない部分があれば明確に伝えてください。推測しないでください。45次に、WXML、WXSS、JavaScript、JSON を使用してネイティブ WeChat ミニプログラムを作成します。6このテクノロジースタックに従って実装し、プロジェクトの既存のスタイルとアセットを再利用してください。7最初にホームページを完成させ、確認後に他のページに進んでください。
「ネイティブ WeChat ミニプログラム」と必ず指定してください。Figma が提供するデザイン情報はターゲットプラットフォームに従って実装する必要があり、ミニプログラムにウェブコードをそのまま使うことはできません。
この例では、デザインは SVG 経由で Figma にインポートされ、コードも同じデザインファイルとアセットに従っています。MCP は既存の Figma デザイン案がある場合にギャップを埋める方法です。どの方法であっても、Codex に渡すのは確定したデザインであるべきです。
4. デザインをミニプログラムに書き込む
Codex でプロジェクトフォルダを開き、デザインファイルとブックカバーアセットを配置すれば、実装を開始できます。
このステップでは、テクノロジーを指定するだけでなく、受け取りたいものを明確に伝える必要があります。それは、WeChat 開発者ツールに直接インポートできるプロジェクトです。
1確定した「One Page」デザインに基づいて、ネイティブ WeChat ミニプログラムを完成させてください。23WXML、WXSS、JavaScript、JSON を使用してください。4コードを miniprogram フォルダに配置し、app.json と project.config.json を提供して、WeChat 開発者ツールに直接インポートできるようにしてください。56本棚、読書記録、統計、本を追加の各ページを実装してください。7確定したカラースキーム、レイアウト、オリジナルのブックカバーアセットに従ってください。8データは当面 wx.setStorageSync を使用してローカルに保存し、再開時に読み取ってください。9入力検証、空の状態、保存失敗のプロンプトを追加してください。1011完了したらコードを確認し、どのディレクトリをインポートしてどのようにコンパイルするかを教えてください。12設定が必要な項目があれば、別途リストアップしてください。
Codex が生成したプロジェクトでは、WXML がページ構造、WXSS がスタイル、JavaScript がクリックと保存、JSON がページパスを設定します。各ファイルの役割を認識すれば、提供されたディレクトリを理解できます。
ここで圧倒されないでください。Codex に任せれば大丈夫です。コードを理解する必要はなく、プロンプトをコピーしてデザイン案を入れ、自分の名前に変更するだけです。
5. WeChat 開発者ツールに入れて実行確認
WeChat 開発者ツールをインストールしてログインした後、「プロジェクト」メニューから「プロジェクトをインポート」を選択し、Codex が生成した miniprogram フォルダを見つけます。
プロジェクト名は自由に設定できます。AppID はこのミニプログラムの ID です。ローカル学習用にツールが提供するテストアカウントを使用できますが、公開準備時には自身のミニプログラム AppID に切り替える必要があります。この例では、バックエンドに「クラウドサービスを使用しない」を選択します。
「作成」をクリックしてプロジェクトに入り、コンパイルが完了するのを待ちます。右側のシミュレーターにページが表示されたら、マウスで直接操作できます。Codex がコードを修正した後、再コンパイルして結果を確認します。
ここでは主に3つのことを確認します。ページの配置がずれていないか、ボタンが正しいページに遷移するか、入力した内容が保存されるかです。また、シミュレーターの画面サイズを切り替えて、長いタイトル、入力ボックス、下部ナビゲーションが窮屈でないか確認します。
問題が発生した場合は、エラーテキストまたはスクリーンショットを、行った操作と期待した結果とともに Codex に送信します。例えば：
1これは WeChat 開発者ツールのエラースクリーンショットです。2ホームページから記録ページに入ると、ブックカバーが表示されません。3画像パスとページ読み込みタイミングを確認してください。既存のレイアウトを変更せずに修正してください。
このケースでは、実際に画像読み込みの問題が発生しました。コードがページデータの準備ができる前に画像アドレスを結合し始めたため、パスにブックカバー名が欠落していました。データの準備ができてから画像を表示するようにコードに指示することで問題は解決しました。
同様の問題では、コードをゼロから勉強する必要はありませんが、どこで発生しているかを明確に伝える必要があります。修正後、シミュレーターに戻り、操作を繰り返して正常に戻ったことを確認します。
6. コンピューターシミュレーターからモバイルプレビュー、公開へ
コンピューターで動作確認ができたら、スマートフォンでも確認します。
適切な権限を持つ AppID を使用し、開発者ツール上部の「プレビュー」をクリックし、QR コードが生成されるのを待って、許可された WeChat アカウントでスキャンします。スマートフォンでのフォントサイズ、キーボードが表示されたときに入力エリアを隠さないか、下部ボタンが押しやすいかに注目します。
この例ではデータはローカルに保存されるため、シミュレーターの記録は自動的にスマートフォンに同期されません。スマートフォンでテストコンテンツを再入力する必要があります。将来的にデバイス間でデータを保持したい場合は、クラウド同期やバックアップ機能を追加できます。
友達に試してもらう準備ができたら、開発者ツール上部の「アップロード」をクリックし、WeChat 公式アカウントプラットフォームのミニプログラムバックエンドに移動します。「バージョン管理」に入り、対応する開発バージョンを見つけて「体験版」に設定し、体験メンバーを追加します。体験メンバーは適切な権限が必要です。
使用可能であることが確認できたら、バックエンドで審査を提出し、承認後に公開します。バックエンドの指示に従ってアカウント情報とサービスカテゴリを入力します。これらのアカウント操作を Codex に完了させる必要はありません。
この例では、開発者ツールで実行可能な段階に達しています。読者は自身のミニプログラムアカウントを使用して、モバイルプレビュー、アップロード、審査提出を進めることができます。
プロセス全体をつなぐ
まず Figma を使用してページとボタンのジャンプを決定し、デザインに満足するまで調整します。次に、デザインファイルまたはアートボードリンクを Codex に渡して WeChat ミニプログラムに書き込みます。その後、開発者ツールにインポートしてシミュレーション、実行、エラーチェックを行います。最後にスマートフォンでプレビューし、確認後にアップロード、審査、公開を行います。
今後、チェックインツール、レシピアプリ、その他の小さなユーティリティを作る場合でも、このワークフローに従うことができます。デザインに満足できない場合は Figma に戻って調整し、機能に問題がある場合は具体的な操作とエラーを Codex に渡し、開発者ツールで修正結果を確認します。
私は Miles です。大手テクノロジー企業から FDE に転身した AI アルゴリズムの専門家です。アルゴリズムの研究開発、最適化、デプロイ、そして企業研修に携わってきました。私をフォローしてください @miles_mazy 一緒に成長し、一緒に稼ぎましょう。
