ミニコデの使い方

本ページではミニコデの使い方を説明します。

スマホでプログラミング「ミニコデ」とは？

ミニコデ（MiniCode）は、生成AIの出力したJavaScriptのプログラムを貼付して利用することに特化した開発ツールです。

スマホでプログラミングしやすいように最適化された軽量コードエディターです。

• HTML / CSS / JavaScript を同時編集
• プレビューで即確認
• Debugタブで console.log が見られる
• 画像の読み込み（擬似imgフォルダ）
• ZIPでプロジェクトを書き出し
• 自動保存（AutoSave）
• PWA対応でアプリ化できる

AIとスマホだけで作品が作れる「ミニ開発スタジオ」として設計されています。

ミニコデに生成AIの機能は搭載されていません。

画面全体の構成

ミニコデは6つのタブで構成されています。

スマホでも編集しやすいように、タブ間をワンタップで移動できます。

ミニコデの超基本の使い方

ミニコデの超基本的な使い方を動画で解説します。

HTML / CSS / JS の基本操作

◆ 編集方法

• 各タブでコードを入力すると自動保存されます
• 行番号は自動で更新されます
• ↑Undo/Redo や 全コピー📋、全ペースト📝、全削除などもできます。

◆ 検索

エディタ下にある検索欄からキーワード検索・前後移動 ができます。

該当キーワード数が表示され、◀▶ボタンで次や前の該当キーワードにジャンプすることができます。

プログラムを組んでいると重宝する機能です。

◆ ハイライト

✨ ボタンを押すとコードがハイライト表示になります。

✨をクリックすると、プログラムにハイライトをつけてくれます。

ハイライトはプログラムが見やすくさせる目的で使います。ミニコデではそれと同時にhtmlタグの崩れやかっこの閉じ忘れなどの簡易的なチェックもしてくれます。

右上の青枠部分が「OK」なら、崩れがないというのがわかります。

画像の追加と img フォルダの使い方

◆ 画像の追加方法

📂ボタンから選択して画像をセットすることができます。パソコンでミニコデを利用する場合はドラッグアンドドロップで画像を置くだけでセットできます。

画像をセットすると、「img/ファイル名」で参照できるようになります。

◆ HTMLで使う場合

<img src="img/photo.png">

◆ CSSで使う場合

background-image: url("img/photo.png");

ミニコデ内部で dataURL に変換されるため、
プレビューにそのまま反映されます。

プレビューの見方・更新方法

• ↻ ボタンを押すと即更新
• プレビュータブを開いている場合は 自動保存のたびに自動更新
• ⛶ ボタンでフルスクリーン表示も可能

スマホで作品を全画面プレビューできるため、UIの確認に非常に便利です。

Debugタブでログ確認

Debugタブに console.log() やエラーメッセージが表示されるので、バグの原因を探すのに役立ちます。

エラーメッセージやログをコピーするボタンもあるので、発生したエラーをそのまま生成AIに貼り付けて、原因究明してもらうこともできます。

手のひらツールとは？

🖐 ボタンを押すとコードをスクロールしやすくするモードに切り替わります。

• タップでカーソル移動したくない時
• 長文のコードを読むとき
• 誤タップ防止したいとき

に便利です。

ZIP書き出し（プロジェクト保存）

⬇️ ボタンを押すとHTML/CSS/JS/画像をまとめたZIPをダウンロードできます。

フォルダ内のファイル構造は以下のようになります。

index_YYYYMMDD.html
style_YYYYMMDD.css
main_YYYYMMDD.js
img/
   └ image.png
   └ photo.jpg

そのままPCに持っていって続きもできますよ。

PWAインストール（アプリ化）

ミニコデは PWA に対応しています。Chrome の「ホーム画面に追加」でスマホアプリとして使えます。

• ネット環境がなくても動作（オフライン対応）
• アイコンから一発起動
• 画面がより広く使える

快適度が段違いです。

生成AI呼び出しショートカットボタン

Ver1.4.1からの新機能です。ミニコデからChatGPT、Claude、Geminiを呼び出すことができます。

スマホだと、Geminiの呼び出しがうまくいかないことがあります。検証中です。

トラブルシュート

■ プレビューが動かない

• <script> 内に文法エラーがある
• Debugタブにエラーが表示されます

■ 画像が表示されない

• パスは必ず img/ファイル名
• 日本語や記号が入ったファイル名は _ に変換されることがあります

■ 編集内容が消えた

• 設定アプリ → ブラウザ → 「サイトデータ削除」「閲覧データ削除」「キャッシュクリア」された可能性あります。

この場合はデータが消えてしまっているので復旧できません。できるだけこまめにバックアップを取りましょう。

よくある質問

スマホだけで本当に作品を作れますか？

はい。HTML/CSS/JSで完結するアプリやゲームなら可能です。

パソコンでもミニコデを利用することはできますか？

ブラウザがあれば、スマホ、タブレットだけではなくパソコンでも動作します。AndroidであればChrome、iPhoneであればSafari、WindowsであればEdge、Chromeで動作確認がされています。

ミニコデに生成AI機能は搭載されていますか？

いいえ、搭載されていません。生成AIサービスは別途ご用意いただく必要があります。

バージョンアップ時にデータは消えますか？

基本的には消えません。（ブラウザのローカル保存されています。ただし、閲覧履歴の削除（キャッシュクリア）などを行うと保存されているデータが消えてしまうため、こまめにファイルのバックアップをとることをオススメします。

ミニコデ　バージョン履歴

実はミニコデはちょこちょこバージョンアップしています。備忘録としてミニコデのバージョン履歴を掲載しておきます。

なお、自分の使っているミニコデのバージョンが古いと思った方は一度ブラウザキャッシュクリアして、読み込み直しをするか、「☁」ボタンをタップすると最新版へアップデートしてくれます。

いのっち

ブラウザキャッシュを消す前に、プログラムはダウンロードしておいてね！

では、素敵なスマホでプログラミングライフを！