GitHub Copilotと作ったiOSアプリ「gif4n」をApp Storeに公開しました

スマホアプリを公開したことがない。

でも、自分の中には、ずっと
「これ、あったら助かるのに」
と思っているものがある。

今回は、そのひとつを実際に形にした。

作ったのは、gif4n というiOSアプリ。

動画を選ぶだけで、noteに貼れるGIFを一発で出力する。
高解像度すぎる動画は解像度を下げ、動画が長ければFPSを調整し、最終的に10MB以下になるように自動で変換する。

要するに、
“noteに貼れる状態のGIF”まで一発で持っていくアプリだ。

実際にリリースしたものはこちら。

この記事では、このgif4nを作るまでにやったことを、企画、仕様設計、GitHub Copilotへの指示、実装、完成まで順番にまとめた。

これは、ただ「アプリを作りました」という話ではない。

AIにコードを書かせながら、ひとつのスマホアプリを完成させ、公開できるところまで持っていくための実務ログだ。

なぜgif4nを作ろうと思ったのか

きっかけは、かなり小さい不便だった。

AIツールで作った短い動画を、noteの記事にそのまま貼りたい。

ただ、それだけ。

でも、実際にやろうとすると少し面倒だった。

AIで動画を作ると、多くの場合はMP4形式で出力される。

でも、noteの記事本文に動画ファイルをそのまま貼ることはできない。
記事内で動きを見せるなら、GIFにする必要がある。

つまり、MP4を、noteに貼れるサイズのGIFへ変換しなければならない。

ここで出てくるのが、10MBの壁だった。

動画をGIFにすると、ファイルサイズは思ったよりすぐ大きくなる。

少し長い。
少し解像度が高い。
少しフレーム数が多い。

それだけで、あっという間に10MBを超える。

最初は、既存の変換ツールで何とかしようとした。

動画を選ぶ。
必要な長さに切る。
GIFに変換する。
ファイルサイズを確認する。
重すぎたら、解像度を下げる。
それでも重ければ、FPSを下げる。
もう一度変換する。

これを毎回やる。

そう。
本当の問題は、GIF変換そのものではなかった。

noteに貼れる状態まで調整すること。

しかも、PCの前に座って腰を据えて作業するほどの話でもない。

スマホで完結したい。
動画を選んだら、あとは勝手に調整してほしい。
最終的に、noteに貼れるGIFだけ出てきてほしい。

そのときに思った。

これ、毎回人間が頑張る必要ある？

欲しかったのは、高機能な動画編集ソフトではない。

noteに貼れる条件に合わせて、必要なところだけ自動で判断してくれる道具だった。

既存ツールでは足りなかったもの

既存のGIF変換ツールが悪いわけではない。

実際、変換そのものはできるものが多い。

ただ、欲しかったのは「GIFを作れること」ではなかった。

noteに貼れるGIFを、迷わず一発で作れること。

ここが結構違った。

いくつか触ってみて、足りないと感じたのは主にこのあたりだった。

・noteの10MB制限を前提にしていない
・サイズを超えたときの再調整が手作業になる
・スマホだけで完結しにくい
・作ったあと、そのまま保存や共有までつながりにくい

一般的な変換ツールには「変換機能」はある。

でも、noteに載せるまでの最後のひと押しまでは面倒を見てくれない。

ここが大きかった。

書き出し設定を細かく変えられるツールはある。
でもそれは、裏を返すと、毎回自分で考える必要があるということでもある。

解像度をどうするか。
FPSをどうするか。
長さをどこまで削るか。

この判断を外すと、すぐ10MBを超える。

そして、超えたらやり直し。

この「調整のための調整」が積み重なると、かなり消耗する。

しかも、やりたかったのはGIF変換を極めることではない。

noteに載せる素材を、さっと用意することだった。

だから必要だったのは、多機能さではなく、用途への一致だった。

もうひとつ、地味に大きかったのが、オンデバイスで完結したいということ。

動画やGIFを、その都度どこかのサーバーに上げる運用は、正直あまりやりたくなかった。

待ち時間がある。
通信も使う。
プライバシー的にも少し気になる。

このあたりを全部まとめると、作るべきものはかなりはっきりした。

GIF変換ツールではなく、noteにGIFを持っていくための専用導線。

gif4nで作りたかったのは、そこだった。

ユーザーが決めるのは「動画」と「範囲」だけ

完成イメージもシンプルだった。

欲しかったのは、機能が多いアプリではない。

1回も迷わず、最短でnoteに貼れるGIFまで着地できるアプリ。

だから、画面の流れはできるだけ絞ることにした。

・動画を選ぶ
・必要な範囲だけ切る
・変換中は待つ
・できたものを保存、または共有する

本当にこれだけ。

ホームで動画を選ぶ。
トリミング画面で必要な範囲だけ決める。
変換中は進捗だけ見せる。
終わったらGIFをプレビューして、そのまま保存か共有する。

この流れなら、アプリを初めて開いた人でも迷いにくい。

逆に、この流れから外れる画面はなるべく増やしたくなかった。

設定項目を増やす。
確認画面を増やす。
細かいオプションを並べる。

こういうことをやり始めると、一気に「使える道具」から「設定を理解しないと使えないアプリ」になる。

それは避けたかった。

今回の用途で、ユーザーに毎回考えてほしいことは少ない。

どの動画を使うか。
どこを切り出すか。

この2つだけでいい。

それ以外は、アプリ側が持つべき責任だと思った。

10MBを超えないこと。
どの解像度から試すか。
FPSをどこまで落とすか。
変換後に保存と共有までつなげること。

このあたりを毎回ユーザーに判断させると、結局また手作業に戻ってしまう。

だからgif4nの完成イメージは、
高機能な編集アプリではなく、
変換に必要な判断を肩代わりするアプリ
になった。

ユーザーがやるのは、素材を選ぶこと。
アプリがやるのは、noteに貼れる状態まで持っていくこと。

ここまで決まると、次に考えることも自然に決まった。

この体験を、何を使って作るのか。

まずは道具選びから始めた。

今回使った道具

完成イメージが見えたところで、次にやったのは道具選びだった。

ここを曖昧にすると、あとで全部しんどくなる。

なので先に、今回使ったものをまとめておく。

【React Native + Expo】

スマホアプリを作るための土台として使った。
まずはiOSアプリとして公開したが、将来的にAndroidへ広げることも考えやすい。

【TypeScript】

GIF変換まわりは、条件分岐が多くなる。

動画の長さ。
解像度。
FPS。
ファイルサイズ。

このあたりを扱うので、型で事故を減らしたかった。

【React Navigation】

画面遷移を組むために使った。

gif4nの画面構成は、かなりシンプルにした。

Home
Trim
Converting
Result

この流れを素直につなぐための選択だった。

【expo-media-library / expo-document-picker / expo-sharing / expo-video】

動画を選ぶ。
プレビューする。
できたGIFを保存する。
必要なら共有する。

このあたりを、スマホの自然な体験としてつなぐために使った。

【ネイティブ側のGIF変換処理】

ここは、JavaScriptだけで無理にやるより、端末側でしっかり処理した方が現実的だった。

GIF変換は、見た目以上に重い。特に今回は、10MB以下に収まるまで、解像度やFPSを調整する必要がある。

だから、変換のコア部分はネイティブ側に寄せることにした。

【Jest】

自動調整ロジックは、後から壊れやすい。

たとえば、動画が長いとき。
解像度が高いとき。
一度の変換で10MBを超えたとき。

このあたりの条件を毎回手で確認するのはきつい。

なので、最初からテスト前提で進めた。

【GitHub Copilot】

今回かなり重要だった相棒。

実装のたたき台を作る。
処理を分解する。
コードを整理する。
テストを追加する。
詰まったところの原因を探る。

このあたりでかなり助けられた。

ただし、全部をCopilotに丸投げしたわけではない。

どの機能を作るか。
どこまで自動化するか。
どの処理をネイティブ側に寄せるか。
どの画面を削るか。

この判断は、人間側で持つ必要があった。

流行りの技術を並べたわけではない

今回の道具選びは、流行っている技術を並べたわけではない。

全部、
noteに貼れるGIFを、スマホで一発変換する
という目的に合わせて選んだ。

たとえば、このアプリは「オフラインで完結する形」にした。

これは、シンプルにその方が使いやすいと思ったからだ。

やりたいことは、動画をどこかのサーバーに送って処理することではない。

スマホの中で完結した方が速い。
通信も使わない。動画を外に出さなくていい。
使う側の気持ちも軽い。

だから、gif4nは、動画の選択からGIF変換、保存や共有までを、できるだけスマホの中で完結させる設計にした。

一方で、GIF変換のコア部分は、無理にJavaScriptだけで処理しないことにした。

ここを「全部JavaScriptでいけるでしょ」と考えると、たぶん早い段階で苦しくなる。

重い処理は、端末側の得意な仕組みに任せる。
アプリの流れや画面まわりは、React Nativeで組む。
Copilotには、実装のたたき台や整理を手伝ってもらう。
最後の判断は、自分で持つ。

個人開発でも、結局ここがかなり大事だった。

何を自分で決めるか。
何を既存の仕組みに任せるか。
何をCopilotに任せるか。

ここまでで、作りたいものと、使う道具は決まった。
次にやったのは、GitHub Copilotに最初の指示を投げることだった。

ここが、今回の開発のスタート地点になる。

この記事を読むと得られること

この記事では、gif4nを作るまでに実際に使った手順を、そのままの流れで公開する。

読める内容は、主に以下です。

・スマホアプリの個人開発を、AIとの役割分担で進める型
・GitHub Copilotに「それっぽい完成形」を出させるための指示設計
・最初に何を投げたのか、実際の指示の考え方
・要件定義書と仕様書を先に作ると、何が変わるのか
・TDD指示が、品質管理だけでなく「会話のズレを防ぐ翻訳装置」として効く理由
・GIFの自動サイズ調整ロジックと、品質を段階的に落とす判断基準
・正常系ばかり見ていると完成した気になる罠と、その潰し方
・うまくいかなかった実装と、そこからどう直したか
・実際のソースコード

こんな方におすすめです

・AIを使って個人開発を始めたいが、どこから手をつければいいかわからない
・「とりあえず作って」と投げて、思ったものと違うものが出てきたことがある
・スマホアプリを公開したことはないが、1本出してみたい
・GitHub Copilotを使っているが、指示の出し方に自信がない
・AIに任せる部分と、人間が判断する部分の切り分けを知りたい

こんな方にはおすすめしません

・すでにAIとの共同開発フローが確立している
・React Nativeやネイティブ実装の細かい内部仕様だけを知りたい
・完成されたベストプラクティスだけを学びたい
・失敗や試行錯誤より、きれいに整理された教科書を読みたい

価格について

この記事は、初回公開価格として 1,980円 に設定した。

gif4nの開発手順、GitHub Copilotへの指示、要件定義書・仕様書の作り方、失敗した実装、自動調整ロジック、実際のソースコードまでまとめた。

今後、追記やサンプル追加、内容のアップデートに合わせて価格を見直す予定です。

この記事は、完璧な設計論ではない。

あくまで、
AIと一緒にスマホアプリを1本作り、App Storeに出すところまで進めた実例
だ。

「AIに任せれば全部できる」と思っていた時期が、正直、僕にもあった。

でも実際には、任せる前の設計と、出てきたものを触って詰める観察力が、完成度をかなり左右していた。

ここから先では、gif4nを完成させるまでに実際に使った指示、設計、失敗、修正、ソースコードを順番に公開します。