初心者がMonacaでiPhoneのアプリを作ってみた

注意

• 本記事は「いのべこ 夏休みアドベントカレンダー 2021」の9日目の記事です。記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

はじめに

私はスマホアプリの開発経験がなく、以前から何かスマホ上で動くようなアプリを開発してみたいと思っていました。
しかし、iPhoneで使用できるアプリを作るにはMacが必要で、Windowsしか持っていない私が軽い気持ちでやってみるにはハードルが高く、なかなかチャレンジする機会がありませんでした。
今回アドベントカレンダーに記事を載せるにあたってWindowsでiPhoneアプリを作る方法を調べたところ、Monacaという開発プラットフォームでクロスプラットフォームアプリを開発することができる（つまりiPhoneで動くアプリが作れる！）ということが分かったのでやってみよう！というのがこの記事の内容です。
初心者のチャレンジ記事ですので、温かい目で見ていただけるとうれしいです。

今回の目標

• Monacaを使ってアプリを作り、iPhoneで動作確認をする
• アプリからiPhoneのカメラ機能を使用できるようにする

Monacaってなに？

• Monacaは日本発のクロスプラットフォームアプリ開発プラットフォームです。クラウド上に開発環境を用意してくれるので環境構築が必要ありません。

Monacaにログインする

• まずはMonacaの会員登録をします。Githubアカウントが使用できるので、今回はそれで登録しました。
• 続いてMonacaの利用プランを選択します。14日間使用できる無料プランもあります。
• 登録の完了後にログインするとMonacaのダッシュボードが表示されます。

Monacaで開発をする

• 以下は写真アプリを開発する手順です
• まず、Monacaのダッシュボードから「新しいプロジェクトを作る」を選択します

• 次に、テンプレートの種類から最小限のテンプレートを選択します
  

• このとき、フレームワーク テンプレートを選択するとreact.jsやvue.jsで開発することもできます
  

• プロジェクト名と説明を入力して「作成」を選択します
  

• ダッシュボードに新規プロジェクトが作成されます
  

• プロジェクトを選択して、「クラウドIDEで開く」を選択します
  

• 以下のような画面が表示されます
  

• 今回は写真を撮りたいため、カメラ操作プラグインをインストールします。設定→Monaca IDE→Cordovaプラグインの管理から、カメラ操作プラグインを有効にします
  

• iOSはプライバシーに関連するデータにアクセスする場合は、info.plistに使用の説明を設定することが必須です。そのため、config.xmlのedit-configタグにユーザーのカメラや写真アプリにアクセスする理由を記述します

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>テスト用に写真を使用します</string>
</edit-config>

<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
    <string>テスト用にライブラリを使用します</string>
</edit-config>

<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
    <string>テスト用に写真を保存します</string>
</edit-config>

• Monacaの公式ドキュメントを参考に、以下のように動くアプリを作りました

  • Photoボタンを押すと写真が撮影される
  • 写真の撮影後、写真を使用ボタンが押下されると画面に表示される

• いい感じにCSSをいじります。今回はコンポーネントの追加から、Onsen UI(Monaca Version)バージョン2.10.10を追加しています

動作確認

• 開発が終わったら実際にiPhone上で動作確認をします。iPhoneにMonaca Debuggerをインストールします。

• 導入方法はMonaca公式ガイドを参考にしました。

• 確認ツールの方にもPCで登録したメールアドレスとパスワードでログインします。
  

• Monaca.ioプロジェクトに表示されている、先ほど作成したアプリを選択します。
  

• アプリが表示されました。
  

• Photoボタンを押して写真が撮れるか確認します。
  

• カメラ機能が立ち上がり、写真を撮影できました。ちなみに写真は昨年のいのべこアドベントカレンダーの表紙です。
  

• ということで、アプリが完成しました！今回は使っていませんが画面右下にある操作メニューからは、スクリーンショットやログの確認ができるようです。

• アプリを作っていると、表示された写真に落書きをする機能や写真を保存する機能など追加機能の開発をしたくなりますが、目標は達成できたので今回はここで完成とします！

さいごに

• Monacaは操作が直感的なので初心者でも割とさくさくできます。今回のアプリくらいの簡単なものであれば、2~3時間くらいで完成しました。
• iPhoneアプリはMacを使ってSwiftを勉強した状態でないと開発できないと思っていましたが、今回WindowsでMonacaを使い、HTMLとjavascriptでアプリを作ることができました。これでスマホアプリ開発をちょっと試してみたい人にはチャレンジのハードルが下がったのではないでしょうか。
• とはいえMacを使ったSwiftでのアプリ開発もやってみたいので、いつかMacのPCを買ったら挑戦してみたいです。