WeChat ミニプログラムを作りたいと思っても、最初にたくさんの壁にぶつかるかもしれません。WeChat デベロッパーツール、プロジェクトディレクトリ、AppID、クラウド開発環境、データベース、アップロード、バックエンドのバージョン管理…。
これらは一体何なのでしょうか？ コードを 1 行も書いていないのに、もうこんな技術的な細かいことに足を取られています。
大丈夫です。コードを書いたことがない人、ミニプログラムを作ったことがない人、AppID が何かも知らない人でも、この記事はそのためのものです。
半日で作りきる体験とは？
この記事を読み終えると、以下のことができるようになります：
- WeChat デベロッパーツールにコードをインポートする（事前に AppID を登録する必要なし）
- 自分のスマホで開く
- QR コードを生成して友達に送ってテストしてもらう
- 審査に提出して公開し、検索可能にする
まず、私が作った完成品を見てください。
なかなか見栄えがするでしょう？ それでは始めましょう。
I. 始める前の 10 分間
WorkBuddy を開いて、エキスパート、スキル、コネクタの欄から「WeChat ミニプログラム開発者」エキスパートを見つけて、召喚しましょう。
そして、「ミニプログラムを作って」とだけ言うのはやめましょう。
1自分用の毎日の習慣トラッキングミニプログラムを作りたいです。2最初のステップとして、何を伝えればいいですか？ まだコードは書かずに、まず相談させてください。
「毎日の習慣トラッキング」の部分を自分のアイデアに置き換えてください。
すると、データの保存方法、最初のバージョンの完成度、使いたい開発方法、毎日のリマインダーの要不要、習慣の種類、リマインダーの時間の細かさ、ビジュアルスタイルの好みなどを聞かれます。最後に、分類の軸、アーカイブ・削除、統計サイクルの微調整も求められます。
まだ考えていなかったさまざまな疑問を整理してくれ、方向性を決めてくれます。
最初から完璧を目指さず、まず 1.0 バージョンを作らせましょう。基本の枠組みができてから、ゆっくり調整・修正していけばいいのです。方向性が決まったら、作業を開始させましょう。
コードを書いている間に、WeChat デベロッパーツールをインストールしておきましょう。
これは WeChat 公式のツールです。ミニプログラムの実行、プレビュー、アップロードは最終的にここから行うことになります。公式ダウンロードページで「WeChat デベロッパーツール」を検索し、安定版（Stable Version）を選んで、案内に従ってインストールし、QR コードをスキャンしてログインします。起動するとこんな画面です：
いくつか注意点があります：
💡 最初は機能を 1〜2 つに絞りましょう。 機能が増えるほど生成するページも増え、エラーが出る可能性も高まります。まずは核となる部分を完成させましょう。
💡 モデルは自動ではなく HY3 に切り替えましょう。 現在、期間限定で無料・無制限で使えます。（これを読んでいる時にプロモーションがまだ有効かどうかはバックエンドで確認してください。）
⚠️ メニュー名がこの記事と異なることはよくあります。 こうしたツールは頻繁にアップデートされます。問題があれば、スクリーンショットを WorkBuddy に送れば、どこをクリックすればいいか教えてくれます。
コードが完成すると、プロジェクトフォルダのパスが提示されます。このパスは次のステップで必要になるので、覚えておいてください。 通常はインポート手順も一緒に案内されますが、もし無ければ「コードができました。WeChat デベロッパーツールにどうやってインポートすればいいですか？」と聞いてみましょう。
これで手に入ったもの：ミニプログラムのコード一式と、インストール済みの WeChat デベロッパーツール。
準備はすべて整いました。半完成品をプレビューしてみましょう。
II. 半完成品を確認する
ダウンロードした WeChat デベロッパーツールを開き、QR コードをスキャンしてログインし、+ ボタンをクリックします。
次の 3 項目を入力します：
- プロジェクト名：自分で見て分かれば、何でも構いません。
- ディレクトリ：前のステップでコピーしたパスを貼り付けます。
- AppID：赤く表示されるかもしれませんが、問題ありません。「テストアカウント」をクリックすればそのまま進めます。
バックエンドサービスは「クラウドサービスを使用しない」を選択します。「作成」をクリックし、「信頼して実行」をクリックします。ツールが自動的にビルドを開始します。
⚠️ 正式な AppID に切り替える必要があるとき：WeChat クラウド開発を使いたい場合、アップロードしたい場合、または他の人に使ってもらいたい場合は、メールアドレスで無料の AppID を登録しましょう。詳しくは第 6 章で説明します。
⚠️ また、登録前にカテゴリをよく考えてください。ミニゲームかそれ以外かを選ぶことになり、後から変更することはできません。
うまくいけば、ツールの中にミニプログラムが表示されます。左側がシミュレーター、右側がコードです。
これで手に入ったもの：パソコン上で動くミニプログラム。
あるいは、画面が赤いエラー文字で埋め尽くされるかもしれません。慌てる必要はありません。簡単に直せます。
III. 赤文字だらけ？ 作者に直してもらいましょう
最初のビルドでエラーが出るのは普通のことです。
解決策は簡単です。書いた本人に直してもらいましょう。 😂
具体的には：
- WeChat デベロッパーツールのデバッガーパネルを開きます。赤いエラーはすべてここに表示されます。
- エラーメッセージ全体をコピーします—一部分だけのスクリーンショットや、自分の言葉で要約したものではダメです。
- それを WorkBuddy に送ります。何も言わなくても大丈夫。勝手に修正してくれます。
分析後、コードを直接修正してくれるか、必要な設定を案内してくれます。
注意点が 2 つあります：
⚠️ 「エラー」のように見えて実はエラーではないもの：ミニプログラムには、Web 向けのコーディング（特定のセレクタやホバーエフェクトなど）に対応していないものがあります。パソコン上で見た目がおかしいのは、ミニプログラム側が対応していないからです。「このエフェクトはミニプログラムではサポートされていないので、別の方法で実装してください」と AI に伝えましょう。
⚠️ もう 1 つは「偽物」のエラー：変更が反映されない場合です。AI を疑う前に、右上の「通常コンパイル」の隣にある「コンパイル」更新ボタンをクリックしてみましょう。大抵はそれで直ります。
これで手に入ったもの：白画面も問題もなく、スムーズに動くミニプログラム。
パソコンのシミュレーターではきれいに見えても、実際のスマホではそうとは限りません。
IV. PC ではきれいでも、スマホでは違うかも
シミュレーターでは問題なくても、実機ではスタイルが崩れたり、ボタンが押せなかったりすることはよくあります。画面サイズも違えば、マウスとタッチ操作の違いもあります。
スマホで確認するには、1 つのボタンをクリックするだけ：「プレビュー」です。
ツールが QR コードを生成します。WeChat でスキャンすると、スマホでミニプログラムが開きます。
ここでよく混乱するのが、プレビュー、実機テスト、リモートデバッグはどれも QR コードを生成するということ。いったい何が違うのでしょうか？
操作 | 得られるもの | 使うタイミング |
|---|---|---|
プレビュー | スマホで直接開いて見た目を確認できる | 軽い変更後のクイックチェック |
実機テスト | 本番と同じプロセスを実行。Android / iOS を選択可能 | スマホの機種によって動作が変わるか確認したいとき |
リモートデバッグ | スマホで実行しつつ、PC 側でログを確認できる | スマホでのみ発生するバグを調査したいとき |
⚠️ 最終確認にプレビューを使わないでください。 プレビューはあくまで簡単な見た目確認用で、すべてが正常に動くという意味ではありません。確認は実機テストで行いましょう。
⚠️ もう 1 つ：開発をしやすくするために、ツール内では一部のチェックが無効になっていますが、実機では依然として有効です。PC では動くのにスマホでは失敗することがあります。
これで手に入ったもの：自分のスマホで開けるミニプログラム。
早く友達にコードを送りたくなっているでしょう。ちょっと待って。まずこの 5 つをチェックしないと、バグだらけかもしれません！ 😂
V. 友達にバグのテストをさせないで
所要時間は 5 分。自分で次の 5 項目をチェックしましょう：
- 追加：新しい項目を追加したら、リストに表示されるか？
- ステータス：完了と未完了を切り替えられるか？
- 再入場：ミニプログラムを閉じて再度開いたとき、追加したデータは残っているか？
- 削除：項目を削除したら、更新しても消えたままか？
- 空の値：何も入力せずに追加をクリックしたら、プロンプトが表示され、空のレコードが作成されないか？
項目 3 と 5 は、意識してテストしないと見落としがちです。
1 つ直したら、5 つ全部をやり直しましょう。 A を直したら B が壊れることはよくあります。
⚠️ 5 つを通過したからといって、すぐにクラッシュしないというだけのことです。ここからは、変な問題を見つけたり、新しいアイデアが湧いてきたりする調整のプロセスです。やがて納得できるバージョンにたどり着きます。
これで手に入ったもの：磨き上げた、自分で納得できるミニプログラム。
あとは友達に送るために必要なものが 1 つだけ残っています。それは「正式な身分」です。
VI. 友達がスキャンできるコードを送る
他の人にスキャンしてもらうには、正式な AppID が必要です。登録方法は次の通り：
- WeChat 公式アカウントプラットフォームを開き、登録フローに従います。 種類は、公式アカウント、ミニプログラム、ミニゲームなどがあります。「ミニプログラム」を選びましょう。 ⚠️ 間違えて選ぶと変更できず、削除してやり直すことになります。
- 使っていないメールアドレスを使用します。 メールアドレスを入力し、アクティベートをクリックし、受信トレイに届いた確認コードを入力して、パスワードを設定します。
- 主体（サブジェクト）を選択します。 個人利用の場合は「個人」を選びます。身分証明書の認証と WeChat のスキャンが必要ですが、無料です。
- バックエンドに入り、「開発管理」の中から AppID を見つけます。 「wx」で始まる文字列なので、それをコピーします。
AppID を取得したら、これを WorkBuddy に送ります：
1プロジェクト内の AppID を私の AppID に変更してください: [あなたの wx... の文字列]
そして WeChat デベロッパーツールに戻り、右上の「アップロード」をクリックします。
バージョン番号と備考を求められます。初回は 0.0.1 にしましょう。アップロード後、WeChat バックエンドの「バージョン管理」ページに移動します。バージョンが表示されるので、下向き矢印をクリックして「体験版」を見つけます。設定すると、体験版の QR コードが発行されます。
これで友達にミニプログラムを自慢できます！ 公開や正式な審査を通過しなくても、友達は QR コードをスキャンするだけで使えます。
注意点が 2 つあります：
1 つ目：アップロードは公開ではない。 アップロードは開発バージョンをバックエンドに置くだけで、まだ検索には出てきません。コードを知っている人だけが入れます。
2 つ目：体験版には有効期限がある。 通常は 7 日間です。再度アップロードすれば新しいコードが発行されます。デモや数人の友達と共有するにはぴったりです。
⚠️ 多くの人にとって、これで十分です。 個人利用や友達との共有だけなら、体験版で問題ありません。認証と備案については後の章で説明します。
これで手に入ったもの：友達に送れる体験版の QR コード。
実際に動くミニプログラムができました。でも、友達がデータを追加してアプリを閉じると、データが消えてしまいます。どうやってデータを保存すればいいのでしょうか？
VII. 閉じてもデータを失わない
データの保存先について、まだ解決していませんね。
データがスマホのローカルにしか存在しないと、機種変更やデータ共有のときに失われてしまいます。バックエンドが必要です。しかし、自分でバックエンドを構築するには、サーバー、データベース、ドメイン、HTTPS、備案などが必要です。面倒なので、ここはクラウド開発を使いましょう。データベースとロジックがクラウドにあり、ミニプログラムから直接呼び出せます。
- ツール上部の「クラウド開発」をクリック → アクティベート → 環境 ID をメモします。
アクティベートをクリックすると、月額 19.9 元と表示されるかもしれません。でも待ってください。無料の開発環境に自動的に案内されるはずです。
- 環境 ID をコピーして WorkBuddy に送り、
globalData.envの ID を設定してもらいます。
- クラウド開発コンソール → データベース →
categories/habits/checkinsなどのコレクションを作成します。権限は「作成者のみ読み書き可能」に設定します。どのコレクションを作成すればいいかは WorkBuddy が教えてくれます。
cloudfunctions/loginを右クリック → アップロードしてデプロイ：クラウド依存関係をインストール を選択します。これでクラウド関数が必要なパッケージを見つけられるようになります。
ワンポイント：プロジェクト内に cloudfunctions が見つからない場合、インポートしたフォルダが間違っている可能性があります。親フォルダに変更してみましょう。
データの保存先が準備できたら、プロジェクトをリロードします。AppID とクラウド環境 ID を求められます。
⚠️ ここではテストアカウントは使えません。正式な AppID が必要です。
⚠️ クラウド開発には新規ユーザー向けのキャンペーンがあることもありますが、期間限定です。
データ保存対応版をインポートし直し、AppID を貼り付け、バックエンドサービスに「WeChat クラウド開発」を選択します。これでデータがつながりました。
データ保存は完了です。見知らぬ人に見つけてもらいたい場合や、商用利用を考えている場合は、ここからが本当の挑戦です。
VIII. 見知らぬ人に見つけてもらう
体験版を通過することと、正式な審査を通過することは別物です。
まず、次の 6 つのセルフチェックを行いましょう：
- AppID は正式なものか？ テストアカウントでは公開できません。
- すべてのページをクリックする。 白画面やクラッシュがないか確認します。
- サーバードメインを設定する。 アプリが外部データを取得する場合、そのドメインをバックエンド（開発 → 開発設定）で設定する必要があります。許可されるのは HTTPS と WSS のみで、ドメインは ICP 備案済みである必要があります。 IP アドレスは許可されません。
- デベロッパーツールの「リクエストドメインを検証しない...」のチェックを外す。 これはツール内だけで有効な設定で、実機では引き続き検証されます。チェックを外して再度テストしましょう。
- ユーザープライバシー保護ガイドを記入する。 アプリがアバター、位置情報、連絡先などを読み取る場合は、その旨を申告する必要があります。申告しないと、これらの API が利用できなくなります。ユーザー情報を扱わない場合はスキップして構いません。
- バックエンドで名前、アイコン、紹介文、カテゴリを入力する。 カテゴリの選択ミスは審査落ちのよくある原因です。
💡 クラウド開発を使っている場合や、インターネットを利用しない場合は、手順 3 と 4 はスキップして構いません。
🔴 これは私が用意したものなので、そのまま WorkBuddy に送ってください：
1WeChat ミニプログラムの審査を提出します。このプロジェクトを以下の項目に沿ってチェックするのを手伝ってください。2修正できるところは修正し、手動で入力が必要な項目も教えてください。3project.config.json の appid がテストアカウントかどうか確認してください。4app.json のすべてのページパスをリストアップして、白画面がないか確認できるようにしてください。5プロジェクト内の wx.request、wx.uploadFile、wx.downloadFile、wx.connectSocket を検索してください。6すべてのドメインを抽出し、次の 4 つのカテゴリに分類してください。7https/wss で始まらないものや IP アドレスを使用しているものにマークを付けて、バックエンドで設定できるようにしてください。8project.config.json の urlCheck が false なら true に変更してください。9ユーザー情報 API（アバター、位置情報、連絡先など）を検索し、どのファイルのどの行で使用されているかリストアップしてください。10プライバシー保護ガイドに使うためです。11残っている console.log のデバッグコードがないか確認してください。12最後に、「チェック項目」「現在のステータス」「次のステップ」のサマリーテーブルを出してください。
⚠️ 手順 2 をスキップしないでください。 正式な審査では完全なプロダクトであることが求められます。「機能が不完全」という理由で却下されるのはよくあることです。
提出前には、さらに 4 つのハードルがあります：
1️⃣ ミニプログラム情報
- 名前：一目で分かる名前（例：「習慣トラッカー」）。個人アカウントでは「公式」や「WeChat」は使えません。
- アイコン：1024x1024 の PNG。
- 紹介文：機能を説明する 1 文。
- サービス範囲：「ツール > 効率化」または「生活サービス」を選択。
2️⃣ カテゴリ
個人アカウントで選べるカテゴリは限られています。おすすめは「ツール > 効率化」または「メモ帳」です。カテゴリによって使える API が決まります。
3️⃣ 備案（ICP）
2024 年現在、すべてのミニプログラムに ICP 備案が必須です。身分証明書の写真と顔認証が必要で、1〜3 営業日かかります。
4️⃣ WeChat 認証（任意ですが推奨）
個人アカウントでも年間 300 元で認証を受けられます。支払いたくない場合はスキップしても構いません。公開自体はできますが、検索には引っかからなくなります。
よくある却下理由は、医療・金融関連の資格不足、ライブ配信の権限不足、機能の不完全さなどです。審査には通常 1〜7 日かかります。
ほら、できたでしょ
AI に話しかけたら、コードが現れた。
パスを入力したら、ページが表示された。
赤いエラー文字を送り返したら、勝手に直った。
QR コードをスキャンしたら、スマホで動いた。
アップロードをクリックしたら、友達がスキャンできた。
最初から最後まで、コーディングの知識は一切不要。
今夜は、たった 1 つだけやりましょう。WeChat デベロッパーツールをインストールすることです。10 分で終わります。
インストールが終われば、何かを放り込んで動かしてみたくてうずうずするはず。その時点で、あなたはもう始まっています。
ミニプログラムを作りたいけどまだ始めていない知り合いがいたら、この記事を送ってあげてください。週末の丸ごと 1 日を節約できます。
私は Song Song です。これからも役立つコンテンツを発信していきます。
