【第28回】試作アプリを”本物”にする日──Node.jsとAndroid Studioを入れて、AIと開発環境をつくった

SNS運用 AI設定

前回まで、僕はクロ(僕の相棒のAI)と一緒に、あるアプリの試作品をつくってきました。詳しい中身はまだ内緒にさせてください。いつか公開したら、あらためて紹介します。とにかく、スマホの画面の中でちゃんと動く試作品が、我ながらよくできていたのです。

でも、試作は試作。パソコンのブラウザで動くだけの「見本」です。これを、スマホにインストールして毎日使える「本物のアプリ」にする——今日は、その第一歩を踏み出した日の記録です。

正直に言うと、今日は何度もつまずきました。でも、そのつまずきも含めて残しておきます。プログラミングをやったことのない僕が、それでもここまで来られたので。

まず、試作を「本番仕様」に直してもらった

アプリづくりを始める前に、クロが試作品の弱点を指摘してくれました。

試作、よくできてるよ。でも本番にするなら、どうしても直したいところがある。いちばん大きいのは「記録が保存されないこと」。今のままだと、アプリを閉じたら入力した内容が全部消えちゃうの。毎日使うアプリなのに、昨日の分が残らないんじゃ意味がないよね。

言われてハッとしました。たしかに、試作品はページを開き直すたびに最初に戻っていました。デモとしてはそれでよくても、本物として使うなら、記録は残らなきゃいけない。

クロは、入力した内容がスマホの中にちゃんと保存されるように直してくれました。あわせて、試作用に入っていた「架空のデータ」を全部消して、まっさらな状態から始まるように。日付も、実際の「今日」を自動で読み取るように変えてくれました。

ちゃんとテストもしたよ。「入力して → アプリを閉じて → もう一回開く」をやってみて、内容が残ってることを確認できた。これで試作品のいちばんの弱点は解消。

自分では気づけなかった弱点を先に見つけて、直して、しかも「ちゃんと動くか確かめた」と報告してくれる。この安心感が、クロと組んでいて一番ありがたいところです。

SNS運用

アプリにする道は、意外とシンプルだった

次に僕が知りたかったのは、「そもそも、この試作品はどうやってiPhoneやAndroidのアプリになるの?」ということでした。ここがまったく想像できていなかった。

クロの説明は、こうでした。

いま作ってるのはHTMLっていう、ホームページと同じ技術で動くもの。これを「アプリの皮」でくるむと、スマホアプリとして配れるようになるの。その皮をかぶせる道具が「Capacitor(キャパシター)」っていう仕組み。今のHTMLがまるごと活きるから、今まで作ってきたものは何ひとつムダにならないよ。

「今まで作ったものがムダにならない」——これは嬉しかった。ゼロから作り直しかと覚悟していたので。

クロが描いてくれた、アプリ完成までの全体像はこんな感じでした。

  1. 開発の道具をパソコンに入れる(今日やること)
  2. アプリの土台をつくる
  3. 作ったHTMLを中に入れる
  4. Androidの形に変換する
  5. スマホで動作確認する
  6. 収益化の仕組みを組み込む
  7. ストアに公開する

7段階。多く見えるけど、クロが「今日は1番だけでいい。あせらず一区切りずつ」と言ってくれたので、気が楽になりました。

つまずきポイント①:収益化は「公開してから」だった

ここで、僕が調べていて見つけた不安を、クロにぶつけました。このアプリは、ある形で収益化する設計にしています。ところが——その収益化の仕組みを組み込むには、先にアプリを公開していないとダメらしい、と気づいたのです。

クロが一緒に規約を読んでくれて、はっきりしました。

不安、当たってた。使おうとしてるサービスのルールに、はっきり書いてある。「公式ストアに登録済みのアプリじゃないと使えない」って。制作中のアプリには組み込めないの。つまり順番は「アプリを公開する → それから仕組みを入れる」で確定。鶏と卵みたいだけど、こうするしかないんだ。

最初は「え、じゃあどうすれば」と焦りました。でも、これには救いがありました。今日つくった本番アプリは、その仕組みを後から足せる作りにしてあったのです。まだ準備できていない部分は「準備中」と表示されるだけ。だから、先に「準備中」の状態で公開して、あとから中身を足せばいい。

今日の本番アプリ、「後から足せる」構造にしといて正解だったね。まさにこの順番のために作ったみたいになった。

先を見越した作りにしておいたおかげで、規約の壁が「詰み」にならなかった。こういうとき、相棒がいる心強さを感じます。

つまずきポイント②:iPhone版にはMacが要る

もうひとつ、大きな現実を知りました。iPhone版のアプリをつくるには、Macというパソコンが必須なのだそうです。僕はWindowsしか持っていません。

「困ったな」と思っていると、クロが冷静に道を示してくれました。

Androidアプリは、Windowsだけで全部つくれるよ。だから、まずAndroid版から公開しよう。Macが要るのはiPhone版だけ。しかもiPhone版は、Macを買わなくても、時間単位でクラウド上のMacを借りる方法がある(1時間150円くらい)。だから今はMacのことはいったん忘れて、Androidで第一歩を踏み出そう。

この「まずAndroidで公開する」という結論が、今日いちばん腑に落ちた判断でした。整理するとこうです。

  • Android版はWindowsだけで作れて、公開費用も安い(初回だけの買い切り)
  • 先にAndroidで公開すれば、収益化の準備も進められる
  • 仕組みが先に回り始める
  • iPhone版は、それがうまくいってから。そのときに時間貸しのMacを使えば最小コストで済む

「収益化は公開してから」なら、まずは公開できる方(Android)から出してしまえばいい。悩みが、そのまま次の一手に変わった瞬間でした。

マネタイズ

道具入れ:ここでも小さくつまずいた

方針が決まったら、いよいよ道具入れです。必要なのは主に2つ。「Node.js」と「Android Studio」。名前だけ聞くと身構えますが、クロがひとつずつ、専門用語に説明をつけて案内してくれました。

ひとつ目のNode.jsは、あっけないほど簡単でした。ダウンロードして入れようとしたら「すでに入っています」という画面が出たのです。どうやら以前、別の作業で入れていたらしい。黒い画面で確認したら、ちゃんと最新の安定版が使える状態でした。ラッキー。

ふたつ目のAndroid Studioは、少し骨がありました。ファイルが大きくて、ダウンロードにも時間がかかる。そして途中の「ライセンス同意」の画面で、僕は完全に足止めを食らいました。

いくつもの項目を全部「同意」にしたのに、次に進むはずの「Finish」ボタンが押せない。何度やっても押せない。クロも「もう一度押し直して」「項目を順番にクリックして」と一緒に悩んでくれたのですが、それでも動かない。

そこで、ふと僕は気づきました。「これ、Finishじゃなくて、隣のNextボタンなんじゃない?」と。

あ、言うとおりだ。私がずっと「Finish」って言ってたけど、この画面は「Next」で進むやつだね。ごめん、勘違いさせた。〇〇の見立てが正しかった。ナイス。

AIが間違えて、人間の僕が気づく。なんだか、立場が逆転したみたいで、ちょっと面白かった。クロはすぐに「ごめん」と認めてくれて、そのまま話が前に進みました。AIだからといって全部正しいわけじゃない。二人で確かめ合いながら進むのが、ちょうどいいのだと思います。

「Next」を押したら、案の定、必要な部品のダウンロードが始まりました。しばらく待つと——「Welcome to Android Studio」の画面。無事、道具が全部そろいました。

今日たどり着いた場所

今日一日で、ここまで進みました。

  • 試作アプリを「入力が保存される・仕組みを後から足せる」本番仕様に直してもらった
  • 収益化は「アプリを公開してから」だと分かった
  • だから、まずAndroid版から公開する方針に決めた
  • 開発の道具(Node.jsとAndroid Studio)をパソコンに入れ終えた

まだアプリが完成したわけではありません。今日はあくまで「道具をそろえた」段階。でも、試作品という「見本」から、本物のアプリづくりへと足を踏み入れた実感があります。

次回は、この揃った道具を使って、いよいよアプリの土台をつくり、今日直したHTMLを中に入れていきます。うまくいけば、次回のどこかで「自分のスマホの中で、自分のアプリが動く」瞬間に立ち会えるかもしれません。

今日はよく進んだね。プログラミングをやったことのないのに、開発環境をゼロから整えたんだよ。これは大きな一歩。次は、いよいよ「形」にしていく番。1行ずつ案内するから、なぞってくれれば大丈夫。

相棒がそう言ってくれるなら、心強い。焦らず、一区切りずつ。次回に続きます。

コメント

タイトルとURLをコピーしました