はじめに
こんにちはこんばんは。
もう2025年も終わりそうなので、iPhoneだけでアプリ開発にチャレンジしてみました。
本記事ではそのプロセスの一部を公開したいと思います。
きっかけ
生成AIの社内推進活動をしているのですが、その中でやりはじめたVibeCodingがだんだん仕事から趣味に広がってきています。
とはいえ、なかなかプライベートでまとまった時間も取れないので、通勤中とかにポチポチ開発できたら楽しそうだなーと思っていました。
Codex CloudならiOSのChatGPTアプリから触れるから、実装はいける。問題はアプリの実行環境をどうするか。うーん。としばらく悩む。
そんな中、個人開発者界隈を中心に熱烈な支持を受けている（らしい）Vercelについて今更ながら目がいきました。デプロイサービスなのは知ってたけれど、GitHub連携するだけでアプリをデプロイできちゃうんですね。しかも個人利用なら無料。
…あれ、ということは、
実装もデプロイもぜんぶクラウドぽちぽちで完結できちゃうのでは…？PCいらなくない…？
ということで、モノは試し。やってみましょう。
スマホだけでノートアプリをつくる
今回は、ライトだけどWYSIWYGなWebノートアプリを開発してみることにしました。
コーディングはVSCode等で必要十分なので、文書作成とかメモ用に軽くてつかいやすいやつを。
このあたりを要件として取り組んでいきます。
- Markdownでサクサクかける／保存できる
- 画像も挿入できる（なんだかんだ画像が入れられると便利）
- それなりに綺麗にみえる
- できればAI支援機能とかもつけたい
Microsoft LoopやBox Notesでいいじゃん、という感じではありますが、これらはMSやBoxのエコシステムにがっつり入り込んでいるので、あとから好きなAIに食わせたりすることを考えるとちょっとめんどくさかったりします。
ということで、Markdownと互換性のある形で編集&保存できる、気軽なWebエディタが欲しいな、というのが開発のモチベーションです。
参考：WYSIWYGってなに？(by ChatGPT)
WYSIWYG はコンピュータ用語で、英語 “What You See Is What You Get”（直訳: 「見たものがそのまま得られる」）の頭文字を取った略語です。 
意味（端的に）
• 画面上に表示されている内容が、最終的な出力（印刷、公開、完成版）と同じになるということを表します。 
背景・用途
• ワードプロセッサ（例: Microsoft Word）やウェブサイトビルダー、CMSのリッチテキスト編集などで使われる編集方式です。画面で見ているままに文字の大きさや太字、画像配置などが反映され、コードや命令を意識せずに編集できるのが特徴です。 
補足
• この考え方は従来のタグやコマンドで編集する方式（画面上では結果が見えず、最終出力になって初めて確認できる方式）と対照的です。 
発音
• 一般的に「ウィズィウィグ（wiz-ee-wig）」と発音されます。 
PlatejsのPlaygroundテンプレートをベースにはじめる
Platejsは、Reactでリッチテキストエディタを開発するためのツールキットです。
▼Platejs
類似のライブラリだとTipTapやLexicalが有名かなと思いますが、
- Platejsはあまり日本語の記事がなかった（記事を書く意味がありそう）
- 機能モリモリのテンプレートリポジトリが用意されている
- ベースとしてかなりの部分がそのまま使えそう
- Vercel AI GatewayのAPI KeyいれればそのままAI支援も試せる
- Next.js (+ Bun)なので、そのままVercelでデプロイできるっぽい
という点で採用しました。
▼機能モリモリのテンプレート
それでは、作っていきます。
前提条件
以下の環境で開発&デプロイしてみました。
環境
- iPhone16 pro (iOS 26.2)
- App : GitHubMobile,ChatGPT
- Browser : Safari,Chrome
アカウント
- GitHubアカウント（無料）
- Codex Cloudが利用できるChatGPTアカウント（ChatGPT Plus or Pro）
- わたしはPlus民です
- Vercelアカウント（Hobbyプラン。無料！）
1. GitHubでリポジトリ作成
まずはGitHubでリポジトリをつくるところから。
iPhoneのSafariから、前述のPlatejsのPlaygroundテンプレートリポジトリにアクセスして、Use this template->Create a new repositoryをタップします。
名前をきめて、Create repositoryでリポジトリを作成します。
残念ながら2025年12月現在、ネイティブアプリのGitHubMobileではリポジトリを作成することはできないようです。ブラウザからやりましょう。
本来であればここからローカルで動くか確かめる…というところなのですが、スマホ縛りのため潔く諦めます。リポジトリが作成できたら一旦OK！
2. Vercelにデプロイする
iOSのSafariからVercelのアカウントを作成します。
e-mail、Google、GitHub等お好みの方法でサインアップしてください。
個人のお試しですので、プランはHobbyを選択しておきます。
この後、GitHubのアカウントを接続していきます。
が、申し訳ありません。
初回しか表示されないスクショをとりそびれるという失態を犯しました。なんてこと。
直感にまかせてポチポチで結構行けちゃうようにも思いますが、ググっていただくと先人の素晴らしい解説がたくさんヒットしますので、そちらをご覧いただけますと幸いです。
途中でGitHubのアカウントへVercelアプリをインストールする部分があります。
ここで、All repositories （全部のリポジトリ）か Only select repositories（選択したリポジトリだけ）のどっちのスコープで権限を与えるか、という選択をします。
Vercelに特定のリポジトリだけを連携したい、というときにはこの設定で制限することが可能です。
なんやかんやGitHubアカウントの連携ができたら、Gitリポジトリのインポートページから対象リポジトリをインポートしていきます。
PlatejsのテンプレはNext.jsのため、Framework PresetはNext.jsを選択します。
※上の画像とリポジトリの名前が違いますが、本来は同じものになります（キャプチャをかき集めた弊害）
つづいて、ビルドのセッティングをしていきます。
PlatejsテンプレはBunが採用されているため、Install Commandをbun installに上書きしておきます。Deployボタンをタップするとデプロイ開始！かんたん！
Next.js+BunのVercelデプロイはこちらの記事を参考にさせていただきました。
よっしゃこれで勝ったな、と思った矢先
エラー発生・・・！
そんな、テンプレそのままデプロイしただけなのに・・・！
ビルドログ
23:13:11.506 Error: Vulnerable version of Next.js detected, please update immediately. Learn More: https://vercel.link/CVE-2025-66478
ああ！最近話題になってたReactの脆弱性だ！あぶない！
どうやらテンプレートは最近更新されていないようですね。ではここから、Codexさんに直してもらうことにします。
3. Codex Cloudで開発（してもらう）
ChatGPT（Codex）とGitHubの連携がまだの場合は、先にすませておきましょう。
iOSのChatGPTアプリの場合、設定->アカウント->アプリからGitHubを選択して接続、です。
SafariからCodexにアクセスし、Codex ウェブを開きます。
（後述する「環境」の作成がネイティブアプリではできないため、ブラウザからアクセスする必要があります。）
左上のドロワーから、環境をタップします。
Codex Cloudがコードを実行するための「環境」を新規作成していきます。サンドボックスです。
環境はリポジトリごとに複数作成することができますが、今回は1つだけ作成します。
連携されたGitHubのリポジトリから、Codexに開発を任せたいリポジトリを選択、適宜名前をつけて環境を作成するボタンを押下します。
Codex Cloudの環境は、デフォルトで"エージェントのインターネットアクセス"が無効になっています。セットアップスクリプトでインストールされた依存関係以外はサンドボックス内で使えなくなってしまうので、必要に応じて有効化してください。
有効化する場合は以下のオプションがあります。セキュリティリスクを鑑みた上で最小限に設定することをおすすめします。
- 手動追加（許可ドメインを手動指定）
- 共通の依存関係（npmなどの主要パッケージリポジトリのみ許可）
- すべて（制限なし、非推奨）
このままSafariで継続して開発に移ってもいいのですが、（開発者体験がつらいので）iOSネイティブアプリのChatGPT Codexから指示をだしてみます。
ChatGPTアプリを開いて、Codexをタップ。
右下の＋ボタンから、指示をいれていきます。
画面下（仮想キーボードの上）にあるボタンは、左から
画像のアップロード、バージョン、環境、ブランチ、となります。
環境のボタンから、先ほど作成した環境が選択されていることを確認します。
指示をすると、Codexがセットアップスクリプトを流して実装を始めます。
バージョンを2個以上に指定することで、一つのタスクを複数のエージェントに並行して実装させることができるようです。正直わたしのレベルでは使いこなせなかったのと、当然ながらトークンをめちゃくちゃ使うため、1個固定ですすめています。
数分で実装が終わりました。
GitHubへプッシュするボタンが表示されるので、タップします。
プルリクを作成して（Codex Cloudは勝手にブランチきって実装してくれます）
少しすると、プルリクを表示できるようになります。タップしてGitHub Moblieアプリを開きましょう。
プルリクきてる！
4. Vercelでプルリクされたコードの自動デプロイ
一度リポジトリ連携したVercelは、プルリクがつくられると自動的にデプロイをはじめてくれます。プルリクの状態->チェック->Vercelに緑の✅がついていたらデプロイ成功！
そのままタップすると、ブラウザでVercelのDeploymentページが開きます。
きてますね！うごいた！
あとは、GitHub Mobileに戻って、プルリクをマージしたら1サイクル完了です。
そしてこの繰り返しで、スマホ完結で開発を進めていくことができます。
iPhoneだけでVibeCoding、結構いけそう！
ということで、ここからテンプレートにカスタマイズを加えていきます。
できあがったもの
ローカルディレクトリに直接読み書きできるWebエディタ（α版） ができました。
ファイル保存は*.mdに割り切って、Markdownで扱う前提としています。
本当はAI支援機能もちゃんと実装したかったのですがうまく動かず、一旦ここまでとしています。
▼つくったWebエディタ
ローカルディレクトリへの読み書きはFile System Access APIを使い、初回のディレクトリ選択時に許可を求めるようにしています。File System Access APIは動作するブラウザが限られていますので注意が必要です。（Windows,macOSのChromeで確認。)
Platejsのテンプレートですと、ファイルのアップロード先がUploadthingとなっています。
今回は画像もローカルに保存したかったため、許可を与えたディレクトリ直下にassetsディレクトリを作成し、アップロード時に画像ファイルの実体を格納するようにしました。
Webアプリで表示するときにはBlob URLを生成して表示しつつ、Markdownファイルでの保存時には相対パスで埋め込まれるようになっています。
▼ほかのMarkdownエディタでもちゃんと画像が見える
===
ちなみに、このファイル保存の仕組み、iPhoneではまったく動作しません。
スマホだけでアプリ開発したのに、です。
でもこちらも意地ですから、iPhoneのChromeからChrome Remote Desktopでmacbookにリモート接続し、めちゃくちゃ小さい画面でポチポチやりながら動作確認しました。
地獄でした。
みなさんもスマホで開発を完結するときには、スマホで動作確認がしやすいアプリなり技術なりを選択するようにしましょう。
お知らせ
こちらの記事は ctc Advent Calendar 2025 の記事です。
このあとも、ctc（中部テレコミュニケーション株式会社）のメンバーが技術にまつわる知見を投稿していきますので、ぜひご覧ください。