2
1

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 5 years have passed since last update.

ionic viewを使ってデバイスでアプリを確認する

Posted at

ionic view

USBでデバイスを繋いで、ビルドしたアプリをコピーして、デバイスで確認する方法もありますが、ionic viewを使えば、
Ionicサーバからアプリケーションをダウンロードして、スマホで確認することができます。
サーバからアプリケーションをダウンロードして確認することができるので、他の人にも気軽に確認してもらうことができます。

最初のデザインモックなど動く紙芝居を確認してもらったりとか便利です。

ionic viewの設定

アカウントを作成します

Sign up - Ionic.io: the hybrid app platform.

アプリ側の設定

ログイン


 $ ionic login
? Email:xxxx@xxxxxxxx
? Password: [hidden]
[OK] You are logged in!

アプリの選択、新規作成する

新規作成を選択した場合、ブラウザで、ionic viewの画面が立ち上がるので、新しいアプリを作成する


$ ionic link
✔ Looking up your apps - done!
? Which app would you like to link Create a new app
[INFO] Rerun ionic link to link to the new app.
xcodeproj.png

アプリの名前を入力

My Apps

リンクさせる

先ほど作成したアプリとの紐付けを行う


 $ ionic link
✔ Looking up your apps - done!
? Which app would you like to link app-test (xxxxxxx)
> ionic config set app_id ea25b23a
[OK] app_id set to ea25b23a in ./ionic.config.json!
[OK] Project linked with app xxxxxxx!

テストするプラットフォームを追加する


ionic cordova  platform add ios
ionic cordova  platform add android

アップロード


 $ ionic upload
Running app-scripts build:

[15:23:24]  build dev started ...
[15:23:24]  clean started ...
[15:23:24]  clean finished in 3 ms
[15:23:24]  copy started ...
[15:23:24]  transpile started ...
[15:23:26]  transpile finished in 1.86 s
[15:23:26]  preprocess started ...
[15:23:26]  deeplinks started ...
[15:23:26]  deeplinks finished in 7 ms
[15:23:26]  preprocess finished in 8 ms
[15:23:26]  webpack started ...
[15:23:26]  copy finished in 2.00 s
[15:23:32]  webpack finished in 5.86 s
[15:23:32]  sass started ...
[15:23:33]  sass finished in 865 ms
[15:23:33]  postprocess started ...
[15:23:33]  postprocess finished in 4 ms
[15:23:33]  lint started ...
[15:23:33]  build dev finished in 8.63 s
> ionic cordova prepare
> cordova prepare
✔ Running command - done!

[15:23:35]  lint finished in 2.06 s
✔ Requesting snapshot upload - done!
✔ Uploading snapshot - done!
[OK] Uploaded snapshot 2d047ab8-70fe-402d-9217-40f0e2d21fb2!

デバイス側の設定

ストアにアプリがあるので、インストールしてきましょう。

ionicview.PNG

上記のionic-viewのアカウントでログイン

自分がアップロードしたアプリが見れます

IMG_1481.png

アプリを見ます

IMG_1482.png

三本指の操作で、アプリのプレビューを終了したり、画面毎にフィードバックを記入して返すことができます。

IMG_1483.png

適材適所で使うと良いかもです。

2
1
1

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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?