プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド
  2. 570 view

Ionic開発環境構築【Ionic DevAppでの実機確認まで】

最終更新日:2018/09/22

angularさえできれば、Ionicで秒速でアプリとか作れるらしいよ???卍
という噂を聞いたのでIonicについて少しまとめ+tutorial+実機確認をやってみました。

Ionicとは

開発にはIonic CLIを用いる
HTML5を用いたハイブリッドアプリができる。
iOS・Android・windowsのクロスプラットフォーム開発が可能
ベースはangularとCordova
Cordova上で使うUIフレームワークとしても有名?

ハイブリッドアプリとは?

Ionicでアプリを作るために必要な技術

angular
typescript
html
css

つまりはangularさえできればOK!

早速チュートリアルをやってみよう!

1 IonicとCordova CLIのインストール

sudo npm install -g ionic cordova

2 Ionicアプリの作成

ionic start helloWorld blank

3 Ionicアプリの表示

cd helloWorld
ionic serve

ionic serveをすると、
The world is your oysterと表示されました。

元ネタはシェイクスピアで、世界は君の思うがままという意味だそうです (^〜^)

ionicで気軽に開発できるということがわかったところで、今度は違うアプリを作ってみましょう。

4 アプリの作成

ionic start MyIonicProject tutorial

startでアプリが作成されます。
MyIonicProjectの所には好きなプロジェクト名を入力してください。
最後の部分に記載されているtutorialというのはスターターテンプレートで、今回使用するtutorial以外にも様々なものが用意されています。(省略不可)

スターターテンプレート一覧

tabs 下にタブがついていて、アプリっぽさではこれが一番か、
sidemenu サイドにスワイプできるメニューがついている
super  14ページoverで使えるデザイン付きのテンプレート
tutorial ガイド付きのスターターテンプレート
blank 最初に作成したアプリで使用したもの。特に何も用意されていない。

アプリの表示

cd MyIonicProject
ionic serve

様々なテンプレートが一瞬で作れることがわかったところで実機確認にうつりましょう。

IonicDevAppによる実機確認

実機確認してみましょう。
IonicDevAppは、iphone,ipad,androidでもなんでも、同一のwifiに繋いでさえいれば実機確認ができ、リアルタイムで変更が反映される優れものです。

1 IonicDevAppをIphone等にインストール、登録

2 同じwifiに接続

開発しているpcと同じ名前のwifiに、実機確認したいデバイスを接続してください。(複数台可)

3 いつもと同様の手順でionicを起動(pc)

ionic serve -c

4 IonicDevApp上に表示されたプロジェクトをクリック

プロジェクト名をクリックすると、開発環境側での変更がリアルタイムで実機にも反映されます。

これで、iphoneアプリが簡単に作れちゃうぞ〜
嬉しいな〜

seeya

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP