2026年6月18日木曜日

AI によるスマホアプリ(Webアプリ)とWindows用アプリの作り方

(執筆、修正中の文章です 26/06/18)

スマホ用のアプリを作るのはなかなかハードルが高いです。
基本的には言語を習得し、Apple や Google にお金を払い、ストアに並べる必要があります。

しかし昨今のAIの進化により言語を深く知らなくてもプログラムは作れるようになりました。
ブラウザ上で動作させるアプリであればAppleやGoogleに申請しなくても簡単にリリースすることができます。

↑ウェブアプリとしてリリースしたキーボードアプリです
MKYBD
これの作り方を通してウェブアプリの作り方を説明していきます。


注意
・有名キャラクターをそのまま使ったり、市販のゲームをそのまま再現したり、法律上問題になる可能性が高いアプリ、作品を作るのはやめましょう
・自分のPCの中をAI に勝手に覗かれることは基本ないですが、何でも「承認」してしまうと大切なデータが共有される可能性があるので注意しましょう。
・この記事によって損害が発生しても一切責任は負いません。

■ 概要

パソコンとスマホがあればOKです。
使用するサービスは全て無料のものです。
パソコンだけで動くゲームを作りたいならスマホも必要ありません。
(ただしUnityの使用はストレージをたくさん使うのでSSD、HDDには十分な余裕が必要です。50GByteくらいの空きはあったほうがいいです)

スマホアプリ(ウェブアプリ)作りの手順をざっくり言うと
AIでアプリを作り、サーバーに置いてブラウザで遊べるようにします。
具体的に言いかえると
Antigravityを使いAIでUnityのアプリを作り、
Git、GitHubを使ってアプリをリリースします。


色んな単語が出てきましたが以下それぞれを「雑に」説明します。
(ちなみにソフトを作ってPCで実行したいだけならUnityとAntigravityのインストールだけでOKです)

Unity

ゲームが作れる有名なソフト。市販のスマホゲームもかなりの割合Unityで作られている。
C#という言語を使ってプログラムを作りますが、AIが作ってくれるため細かく覚える必要はありません。
ただUnityのどこをさわったら何が起こるのかは知っておいた方がいいので超初心者向けのYoutubeや本で簡単なゲームを作っておいた方がいいです。ブロック崩しとかね。

Antigravity

Google が作った AI 用のプログラミングツール。
Claude CodeというAIソフトを使っている人が多いようですが個人的に使い慣れているのでAntigravity を使いました。
AntigravityはAIを扱うためのツールでAIではありません。Antigravity からAI(Gemini、Claude、GPT-OSS)を呼び出して使います。

Git

 バージョン管理アプリ。
作ったプログラムを1つ前のバージョンに戻したり、複数人で開発したプログラムをくっつけたりできる。
 
初心者プログラマーにGitでのプログラミングコードの管理は必要ないけど、今回はアプリをブラウザで動かすのに GitHub を使いたいのでGitも使います。
 
もしゲームデータをアップして動作するサーバサービス、ホームページを持っているならここから説明するGit関連は使う必要がありません。  

GitHub

Gitをインターネット上で使うためのサイト。
要するにプログラムをインターネット上に置ける。
GitHub の Pages というサービスを使えば GitHub に置いた index.html を公開ウェブページにすることができて、そこからWebアプリを起動することができる。

GitHub Desktop

GitHub をウィンドウアプリ(GUI)で操作できるツール。


上記5つをそれぞれインストールしてください。
各インストールについてはそれぞれサイトやYoutubeを見つけて行ってください。

 GitHubに登録する名前はゲームを公開するURLの一部になるので本名のフルネームは使わずニックネームにしましょう(後からでも変えられますが全ゲームのURLが変わってしまいます)。

Antigravityのインストールの際、「入力した内容をAIの学習に使う事を許可しますか?」のような質問もあるので何でも「Yes」を押さないように注意してください。


■ ゲーム開発の流れ

・アプリ名を決める

アプリ名がフォルダやデータの名前になるので後から変えるのは大変です。 
アプリ名を先にちゃんと決めておきましょう。

・Unity Hubで新しくプロジェクトを作る

Unityをインストールするとアプリ達を管理するUnityHubもインストールされます。
UnityHubを起動し、ウィンドウの右上あたりにある「+ New Project」ボタンを押します。


Universal 2D か Universal 3D を選んでください。1作目は2Dのゲーム、アプリを作ることをおすすめします。
Locationにゲームを作成する親のパスを指定します。
Locationで指定したパスの下にゲーム名のディレクトリができるのでパス名にゲーム名は入れません。
Project Name に作るソフトの名前を入れます。
名前を後から変えるのは大変なのでよく考えて名前を付けましょう。
 
「+ Create Project」を押してプロジェクトを作ります。
Unityが必要なファイルをごっそりコピーするので数分待ちます。

・Antigravityを起動し準備する

Unityを立ち上げたままでAntigravityも起動します。 

AIは使用量の上限が決まっているのでなるべく使用量(トークン)を消費しないように設定しておきます。
C:\Users\(ユーザ名)\.gemini\GEMINI.md
をテキストエディタで開き、例えば以下のように書いて上書き保存しておきます。

日本語で質問して日本語で返す。
結果の返信は最低限の報告だけでいいです。敬語不要。

上記内容は
Antigravity>左下にあるSetting>Customizations>Rules
から確認できます。

・AntigravityでUnityのプロジェクトのフォルダを指定する

Antigravityのメニュー>File> Create Project

を選択し、「+ Add Folder」ボタンを押してUnityで作ったプロジェクトのフォルダ「~~/Unity/(アプリ名)」を指定します。

これで開発するアプリのフォルダをAIに操作してもらうことができるようになりました。
UnityとAntigravityの間で通信するわけではなく、AntigravityがUnityのアプリのフォルダ内を(勝手に)書き換え、書き換えが終わったらUnity側で実行するイメージです。  
 

・簡単に仕様書とレイアウトを作る

AIに基本的な仕様と何を作るかを教えてあげます。
最初から細かく指示するよりざっくりしたものを作って、そこからさらに指示を出して後から色々追加する方が作りやすいです。
例えは今回のアプリでは以下のように文章と画像を入力しました。
 
UNITYのプロジェクトです。Unityのバージョンは6000。
画面サイズは 844 × 452
画面をタッチして入力するキーボードアプリです
WebGLで動作します
添付した画像を元に作成してください。
文字をクリック(タッチ)すると上のエリアに文字列を表示していきます。
上のエリアには5行分の文字(文字列)を表示します

 

こんな感じで「Ask anuthing」と書いてあるエリアに入力して ➡ ボタンを押します。


画像はAntigravity内にエクスプローラからドラッグ&ドロップしたり、Ctrl+Vで貼り付けるだけで送ることができます。
上記ではAIに画像を送りましたが、画像の解析はAIの使用量(トークン)を大きく消費するので頻繁にはしない方がいいです。

ちなみにどのAIを使うかはその下の+の右の文字をクリックすると選べます。 
僕は 「Claude sonnet」か「Gemini 3.5 Flash (Medium)」をよく使ってます。
AIの使用残量は Setting > Models から確認できます。
(有料プランも高くないので契約しちゃえば快適ですよ)


AIからの返信で、
UnityのメニューからSetup~~Sceneを選択してから実行してください
的な事を言われるのでUnity側でそれに従ってから▶ボタンを押すとうまくいけば実行できます。

初回はだいたいエラーがたくさん出ます。
Unityのコンソールに出力されるエラーメッセージをまとめて選択するとその下にまとめて表示されてるので、エラーメッセージの内容を選択してコピーし、Antigravityに貼り付けて送ります。
これだけでエラーを修正してくれます。

これを繰り返せばゲームが完成します。
 
実行できる状態になったら、Antigravityに
Web アプリとして実行できる形式にしてください
と入力するとUnityのメニューに「Build WebGL」というメニューを作ってくれます。
Build WebGL を選択し、数十秒から数分待つとWebで実行できる形式のファイルがアプリフォルダの下の「Build」フォルダの下にできます。 

 実行形式(.exe)のゲームを作るのであればAntigravityに「.exeにしてください」と言えば作ってくれるのでここで完成です。


・GitHubにアップロードするためのフォルダを作る


~~/Unity/アプリ名フォルダ
のサイズは3ギガバイトを超えています。
これを全部GitHubにアップするわけではなく、基本的には
~~/Unity/アプリ名フォルダ/Build
をアップロードするだけでOKです。
ただアップする際のフォルダ名はプロジェクト名(アプリ名)である必要があるので
Buildフォルダの下にあるWebGLフォルダを複製コピーして、アプリ名のフォルダ名に変えます。
 
以降、Unityが実行ファイルを出力するのはWebGLフォルダの中、
GitHubにアップするのはアプリ名フォルダの中になるので、Unityでビルドをしたら毎回WebGLフォルダの中身をアプリ名フォルダにコピーしてください。


・GitHub Desktop でプロジェクト設定(リポジトリ設定)

GitHubデスクトップを起動し
メインメニュー > File > New repository
を選択します。
 
リポジトリはプロジェクト名です。アプリ名と同じでOKです。 
 

LocalPathの「Choose」ボタンを押し、Buildフォルダを指定します。
Nameにアプリ名(Buildの下のアプリフォルダ名)を指定します。
下の「CreateRepository」を押してください。

これで~~/Build/アプリ名フォルダ以下のファイルを Git でのバージョン管理の対象として扱います。 


・GitHub Desktop でアップロード

Gitはバージョン管理ソフトなので、アップロードするときに今回のバージョンでの修正点を記入します。
更新内容のタイトルをSummary、詳細をDescriptionに記入します。
今回はバージョン管理はしないのでSummaryに「0」と入れるだけでいいです。
入力が終わったら下の「Commit to main」ボタンを押してください。
そのあと右の「Publish repository」ボタンを押してください。
 
2回目からはは「Push origin」ボタンを押してください。 


main、Commit、Push 
 
これらの単語を知らなくても作業はできますが知っておいた方が問題が起きた時に対応できます。
Git はアプリのバージョン管理ができると言いましたが、開発を枝分かれさせたり統合したりすることもできます。
あるアプリを作っていて開発メンバーの一人が 修正案Bをメインを元に作成する。
その修正案Bが採用され、main に新規機能として統合する。
これをGitでは「mainからブランチ B を作成、開発して採用されたらmainにマージする」と言います。
今回はブランチ(枝分かれ)がないので main だけになります。
Commitはプログラムのセーブポイントを作るイメージです。あとでそのセーブポイント(バージョン)まで戻ることもできます。
Commit しないと修正が終わってないことになるので注意。 
 
ここまでは自分のPCの中だけの処理です。
「Push ~」を押すと、GitHubサーバーにデータをアップロードします。 

・GitHub でPagesを設定する


github.com を開きます。
さっき Push したアプリ(リポジトリ)が左のリポジトリ一覧にあるのでクリックします。
 

 
ページが切り替わったらメニュー右端の「Setting」をクリックします。
GitHubはグループ内でプログラムの作成を共有するツールなので最初は「公開」設定にはなっていません。
左の「General」が選択されていることを確認し、下の方に行くと「Danger Zone」という領域があります。
「Change Visiblity」ボタンを押して「Change to public(一般公開)」に設定しましょう。

仕事で使っている場合、社内のプログラムを世界に公開してしまう可能性があるので何度も承認を聞かれます。
承認し gmail などに届くverify code も入力しましょう。



左のSetting項目から「Branch」を選択し、Branch の「None▼」をクリックして「main」に切り替えて右の「Save」ボタンを押します。
3分くらい待ってブラウザをリロードすると表示が変わり「Visite site」ボタンが表れます。
クリックするとうまくいけば作成したアプリが起動します。
何かしらエラーが出たらまたAntigravityのチャット欄に貼ってください。
AIがUnityのコードを修正してくれます



・WebGLでの実行について

Unity上でうまく動くなら .exe にしてもたいていちゃんと動きます。
しかしブラウザ上(WebGL)で動作させると音が出なかったり表示がおかしかったりすることが多いです。
音楽は音楽ファイルにしてもらうようにAntigravity経由でAIにお願いしたほうがいいです。


・iPhone で使用する場合

iPhone の場合はアドレスバーがじゃまなので「ホーム画面に追加」を使用します。
Safari のシェアボタンを押してホーム画面に追加を選択してください。
  
アドレスバーなしでタッチで操作できるようになります。 

起動時に携帯をしっかり横に向けてから起動しないとタッチの位置がずれてしまう場合があります 。
 

2026年6月17日水曜日

okudesu (web game)

3Dのブロック落ちものゲーム

以下のURLを開けばブラウザで遊べます。
PCでもスマホでもOK

https://daisuqe.github.io/okudesu/

コントローラー対応

PC+キーボード で操作する場合は
W,A,S,Dで移動
8,4,6,2で上左右下回転、7,9で時計回り
5,1,3,0で視点回転
スペースでFAST FALL
E で SWAP

テンキーが無いキーボードは I,J,K,Lで回転、U,Oで時計回り

 ■  iPhone で使用する場合

iPhone の場合はアドレスバーがじゃまなので「ホーム画面に追加」を使用します。
Safari のシェアボタンを押してホーム画面に追加を選択してください。
  
タッチで操作できます。 

起動時に携帯をしっかり横に向けてから起動しないとタッチの位置がずれてしまうバグがあります 


難易度やBGMは調整中です。週末には正式リリース予定です。

2026年6月13日土曜日

MKYBD (ウェブアプリ)

スマホ用のテキストエディタを作りました。

スマホで以下のURLを開けば使用できます。

https://daisuqe.github.io/MKYBD/ 


■ 使い方 
・通常は小文字ですが、左下のオレンジのキーを押しながら文字を押すと大文字が出力されます。
・左下のオレンジのキーを上、右、右上にフリックすると他のキーボード「大文字キーボード」「数字キーボード」「記号キーボード」に切りわかります。
・上の枠内をタップするとカーソルの移動ができます。
・記号キーボード右上にあるMenuボタンから3つの機能が呼び出せます。
  Paste:他のアプリでコピーしたテキストをPasteできます
  Save:テキストデータをGoogleDriveなどで保存できます 
  Clear:入力したテキストの全消去

 ■  iPhone で使用する場合

iPhone の場合はアドレスバーがじゃまなので「ホーム画面に追加」を使用します。
Safari のシェアボタンを押してホーム画面に追加を選択してください。

アプリと並んでショートカットが追加されます。
ここから開くとアドレスバーは表示されません。 


 ■  追記

・Unity + Gemini で作成しています。
・再起動しても内容が保持されているはずなのでメモ帳的に使えます。
・現状英語しか使えません。 
・バグがあれば報告ください。


2026年6月7日日曜日

鎌倉街道 上道(ゆめが丘から鶴岡八幡宮)

 前回、南町田からゆめが丘まで歩いたのでその続き。


GoogleMap (鎌倉街道 上道)


ゆめが丘駅近くの
この左の道から再開。いざ鎌倉。

(資料を元に個人の考察で歩いています)


左馬神社の道祖神。かわいい。
このあたりの道祖神の顔が似てる。同じ人が作ったのかもね。

野生のリス。ここは横浜市、駅近。左の茂みにもう1匹いた。

相鉄と市営地下鉄。

富士塚城址。昔お城だったらしいけど今は公園。
源頼朝を助けた武将 飯田五郎家義を讃える碑がある。頼朝がお礼にこの辺の土地をあげたらしい。なのでこのあたりの地名は飯田。


遊水地から脇道へ



鎌倉街道沿いはなぜか公衆電話が多い



このあたりに来るといつも気になる高層ビル神社みたいな謎の建物。
これは2002年まであった遊園地「横浜ドリームランド」に隣接された高級ホテル「ホテルエンパイア」だった建物。
今は横浜薬科大学 図書館
1965年に完成したらしく日本初の高層ビルだったらしい。


ちょっと遠回りして上俣野神社
すきな雰囲気。




とその鳥居
さっきの八坂神社の参道なのに鳥居の前後は車道に吸収されてしまってい
る。
車道にあった鳥居を移動したのか、参道が車道になったのか、もとからこういうものなのか。

庚申塔。このへんのお地蔵さん三猿が彫られている事が多い。

いい感じの工場。

庚申塚。鎌倉街道の庚申塚ってより交差している旧東海道?のためのものっぽい。

国道1号を越えて旧東海道(県道30号)方面へ。

鉄砲宿の交差点を曲がって藤沢515号線。
このあたりから横浜市→藤沢市。左の竹やぶは鎌倉市。

マンホールだらけ。
旧モーガン邸のあたり。

このあたりは再開発されているので鎌倉街道が曖昧。
緑の道沿いに道祖神がいくつかあるのでモーガンさん家のあたりも道があったのかも。
青い道は村岡城跡まで続くので古くからある道。


一旦 緑のルートへ。
夫婦道祖神のあたりの緑の道。旧道のにおいがする。

夫婦道祖神


小袋谷藤沢線から青色ルートとの接続点へ。旧道のかおりがするぐねり。

左の小道の先が一つ前の画像の交差点方面に続いてる。どうみても旧道跡地。

平氏の祖先と言われる鎌倉権五郎景政の城と言われている村岡城跡地

宮前避溢橋りょうから東海道本線をくぐる。

ピンクの点のあたりの雑木林に「鎌倉古道(上の道)」の看板が立っている。
線路と看板の間は私有地なので南に遠回りして兜松方面(右下)から逆に向かう。

線路からの道のつきあたりを右に入った道。先に進めます。

界隈では有名なその看板

この先、線路沿いまで私有地になっています。

奥の坂から後ろへの道が鎌倉街道。後ろには兜松。

かなりかっこいい。敷地内なので金網越しに拝見。

この近くにある神戸製鋼前のバス停は本数が多いので2日に分けるならここで一旦帰るのがおすすめ。

柏尾川を渡って藤沢市から鎌倉市へ。
泉光院の裏の鎌倉らしい崖。テンション上がる。
横穴もいくつか作られているが安全のため塞いである。


立ち入り禁止エリアになってしまったためGoogleMapにも載っていないがたぶんここ
左にちょっとだけそれっぽいものが見える。
少し前までは反対側がスポーツ広場として入れて正面から見れたみたい。
洲崎の合戦の戦死者を供養するために建てられたと考えられている。


鎌倉幕府終焉の戦いの一つ、新田軍対政府軍の戦い、須崎の戦いが行われた場所。

上には湘南モノレール

馬頭観音

YY



階段を上ると駒形神社

駒形神社の脇の階段を上った富士浅間神社の石塔
景色が良くここから富士山を望むことができたらしい。
真の上にある富士山の絵がかわいい。


深沢中学校の裏の道に戻り鎌倉方面へ。

鎌倉市街地の近くとは思えない道が続く。
右は崖、左は山。

ここから頼朝像に行く途中右に曲がるとすぐ銭洗弁財天 宇賀福神社です。

地図
GoogleMapだと葛原岡神社から源頼朝像まで道が書いてありませんが普通に道があります

源頼朝像

化粧坂切通の入り口
仮粧坂とも書き、けわいさかと読むらしい。けしょうざかじゃなかった。

化粧坂切通
普通に登山道で飛び降りながら進むような濡れた岩肌のような道もあって危ない。老人は無理。あと蚊がたくさん。
こんな道?でも鎌倉に続く7つの道の一つだったらしく、現代は電車でも車でも行けるので実感が無いが鎌倉が如何に難攻不落な場所だったかがわかる。
通ったのは19時前だったのでまじで怖かった。
このあたりの街並み美しい

ただの踏切りも鎌倉というだけで特別感ある


ほたる祭りやってた


中央階段は祭りのため通れず。


鶴岡八幡宮本殿に到着~


歩行距離19キロ。
鎌倉が近くなると須崎古戦場や頼朝像があったり興味深い景色が増えてきたりでたのしい。
写真を撮ったり遠回りが必要だったりでかなり時間がかかってしまった。

次は北上していこうかな。さすがに群馬まで歩くことは無いけど埼玉まで行けたらいいな。
町田の北のあたりは古道が残っている箇所があるらしいので楽しみです。


参考サイト

【注意】旧サイトにアクセスしないでください

うっかりしていてドメインが消えてしまいました。 旧ドメインはフィッシングサイトに誘導されることがあるようです。 お気を付けください。