Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@anzienne

モバイルWebアプリを作りたくなった

Posted at

お手本にした記事

開発環境構築

Ionicの環境構築は下記をお手本に。

Javaのバージョンを確認

$ java --version
java 13.0.2 2020-01-14
Java(TM) SE Runtime Environment (build 13.0.2+8)
Java HotSpot(TM) 64-Bit Server VM (build 13.0.2+8, mixed mode, sharing)

Android Studioのバージョンを確認

Android Studio 4.1.2
Build #AI-201.8743.12.41.7042882, built on December 20, 2020
Runtime version: 1.8.0_242-release-1644-b3-6915495 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.15.7
GC: ParNew, ConcurrentMarkSweep
Memory: 1981M
Cores: 8
Registry: ide.new.welcome.screen.force=true, external.system.auto.import.disabled=true
Non-Bundled Plugins: org.jetbrains.kotlin

Node.jsを更新

頼った記事↓

:warning: sudoでやらなきゃいけない部分があった

$ node -v
v13.8.0

cordovaをインストール

$ npm install -g cordova
（中略）
$ cordova -v
10.0.0

ionicをインストール

$ npm install -g ionic
（中略）
$ ionic -v
5.4.16

パッケージ追加

Android StudioのSDK Managerから以下を追加。

  • SDK Platform
  • Android 11.0 (R)
  • Android 10.0 (Q)
  • Android 9.0 (Pie)
  • Android 8.1 (Oreo)
  • Android 8.0 (Oreo)
  • SDK Tools
  • Google USB Driver

:warning: Google USB Driverは見当たらなかった

環境変数設定

私の場合はMacなので下記記事のMacのところを参考に。

ionicでプロジェクトを作成

$ ionic start <project_name> sidemenu --cordova --no-link

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: Angular

最初に下記どっちのフレームワークを使うかを聞かれた。お手本の構成はAngularっぽかったし、Reactを外した的なことが書いてあったから、Angularを選択した。

  • Angular
  • React

gitもAutoで作ってくれるみたい。すごい。
作成し終えると、最後にこんなことが書いてあった。2021年2月現在、そう変わったのかもしれない。アップデートすることにする。

  ────────────────────────────────────────────────────────────

          Ionic CLI update available: 5.4.16 → 6.12.4
                                
     The package name has changed from ionic to @ionic/cli!
                                
             To update, run: npm uninstall -g ionic
                 Then run: npm i -g @ionic/cli

  ────────────────────────────────────────────────────────────

update ionic to @ionic/cli

$ npm uninstall -g ionic
removed 225 packages in 1.479s
$ npm i -g @ionic/cli

このタイミングでgitにpush

これが覚えられないのでこちらを参考に。

  1. Githubで Create a new repository する
  2. ここにpushしたいので
$ git remote add origin https://github.com/<git_account>/<project_name>.git
$ git push -u origin main

実は、gitのデフォルトブランチが master から main に変わっていたことを知らなかったので、面倒なことに。。


これを読む羽目に。（でも結局修正できなかった）

https://qiita.com/fk_chang/items/a4839a595fef9a2c3724

まず、Macの中のgitをアップデート

https://qiita.com/MochiMochiChip/items/d91c12e40cd0de84b804

同じ目にあっている人がいたので、こちらと同じ手順を。

https://qiita.com/shu-illy/items/98e0e3470b9ebd1aef4b

ダメだ、、うまく行く気がしないので、今なら最初からやり直せると思い、初めてgitにpushするところに戻る。

## Androidアプリ設定を追加

### アプリ情報を追加
Android, iOSのアプリやでってことかな。

#### Android

```Terminal
$ ionic cordova platform add android --save

しょっぱなで下記のように www が作られ？処理が続く。

✔ Creating ./www directory for you in 1.78ms
> cordova platform add android

でも最後に下記 warning が出て、またオレを悩ます。

[WARN] cordova-res was not found on your PATH. Please install it globally:
       
       npm i -g cordova-res
       
[WARN] Cannot generate resources without cordova-res installed.
       
       Once installed, you can generate resources with the following command:
       
       ionic cordova resources android --force

お手本では特に言及されてなさそうなので、自力でトライしてみることにする。

$ npm i -g cordova-res
（中略）
+ cordova-res@0.15.3
added 86 packages from 197 contributors in 13.772s

たぶん、入ったっぽい。
次、

$ ionic cordova resources android --force
> cordova-res android
[cordova-res] Generated 18 resources for Android
[cordova-res] Wrote to config.xml

たぶん、行けたっぽい。
ただ、ここでまた Ionic CLI のアップデートを求められた（実は2ヶ月ぶりに続きをやっている）ので、上でもやったようにもう一度アップデートをかけることにする。

iOS

$ ionic cordova platform add ios --save
> cordova platform add ios
（中略）
> ionic cordova resources ios --force
> cordova-res ios
[cordova-res] Generated 47 resources for iOS
[cordova-res] Wrote to config.xml

Androidの時に resources 系の何かは対応したので、今度はエラーなし。

署名関連のビルド設定

開発証明書的なやつかな、、ここからまた時間かかりそう。。

Android

  • デバッグ用の署名 keys/android/(dev-keystore_name).keystore
  • リリース用の署名 keys/android/(keystore_name).keystore

を用意する。参考にしたのは下記の記事。

$ keytool -genkey -v -keystore <dev-keystore_name>.keystore -alias <alias_name> -keyalg RSA -keysize 2048 -validity 10000

「10000」は有効期限で「10000日」らしい。
すると、質問が続くので答えていく。（もしくしたら空欄のままEnterでも良いかもしれない）

Enter keystore password:（新規パスワード）  
Re-enter new password:（もう一度新規パスワード） 
What is your first and last name?
  Unknown]:  （姓名）
What is the name of your organizational unit?
  Unknown]:  （組織単位名）
What is the name of your organization?
  Unknown]:  （組織名）
What is the name of your City or Locality?
  Unknown]:  （都市名または地域名）
What is the name of your State or Province?
  Unknown]:  （都道府県名または州名）
What is the two-letter country code for this unit?
  Unknown]:  （国コードを2文字で）
Is CN=（姓名）, OU=（組織単位名）, O=（組織名）, L=（都市名または地域名）, ST=（都道府県名または州名）, C=（2文字の国コード） correct?
  no]:  y

できたっぽい。全く同じ手順でリリース用も作ってみたけど良かったのかな。。

iOS

iOS は、App Store Connect からゴニョゴニョする必要があるように感じたので、ここで一旦休憩。ここまでを Git に上げよう。

さて、自身の Apple Developer の状態を確認するところからか。ちょっと古いけど参考にしたのは下記の記事。

以前に登録したことがある記憶だったが、Apple Developer Program へ行ってみると「Enroll」のボタンしかなかったので押してみる。

やっぱり期限切れになっていたようで、新たにメンバーシップになるには ¥12,980- 払えと言われたので、今回はまだ見送ることにした。ただテストしたいだけなので、しばらくは Android だけを進めることにする。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?