[ionic入門] ionicって何?サンプルプロジェクトを動かしてみた!

Angularをやっているとやたら目に入る ionic!

でもなんやかんや名前やロゴのインパクトが弱かったので素通りして、NativeScriptやReactNativeなんかをやっていました。

しかし!、よく調べてみると一番あらゆるプラットフォームに対応してそうだったので、今回 ionic の超基本的なところをみていこうと思います。

概ね、公式サイト通りに進めていきます。

(画像は公式動画より)

一言で言うと何?

どのプラットフォームでも、Webを使って1つのコードベースですばらしいアプリケーションを構築できます。 Ionicは、Web開発者がこれまで以上に簡単にクロスプラットフォームのアプリケーションを構築、テスト、デプロイ、および監視できるようにします。

とのこと。(公式トップページより)

今の所は有料プランがあることが気になります。

Ionic Pro pricing

Get Started

まず初めに、ionicの紹介動画をみるように促されます。

気になったシーンをピックアップ

各素材をドラックアンドドロップで実装できるとか。。

スマホで確認できるアプリがあるとのことですが、現在AppleStoreから削除されました。。。

環境構築

先ほどの動画の、2.5mから環境構築について解説が始まります。

動画は少し古いせいかテキスト化されているものとは少し異なるようです。

こちらの新しいテキストを基に進めていきます。

node

当たり前ですがnode.jsが必要になります。

安定板が導入されていればOK!

Ionic

本体をグローバルに導入しましよう!

npm install -g ionic

yarn派⬇️

yarn global add ionic

公式では丁寧にコマンドラインを使ったことがない人に向けての説明も載せています。

上記のコマンドの意味がわからなければご覧あれ。

New to the Command Line?

プロジェクトを作ってみよう!

簡単な環境構築が済んだので最初のionicプロジェクトを作成してみましょう!

Yarn派の設定(任意)

ionic config set -g npmClient yarn

yarnにこだわらなければ実行しなくてOK!

ionic start myApp tabs

上のコマンドをプロジェクトを作りたいディレクトリで実行します。

  • ionic start::ionicのプロジェクト作成コマンド
  • myApp:プロジェクト名(アプリ名)任意の名前
  • tabs:tabがすでに実装されているサンプルプロジェクト

実行するといくつか質問されます。

Cordova

Integrate your new app with Cordova to target native iOS and Android? (y/N)

ネイティブiOSとAndroidをターゲットにして、新しいアプリをCordovaに統合しますか? (y / N)

これはiosやandroid向けに作る場合、yを入力します。

Ionic Pro

Install the free Ionic Pro SDK and connect your app? (Y/n)

無料のIonic Pro SDKをインストールしてアプリを接続しますか?

とりあえず試したいだけなので、nを入力。

プロがなんだか気になる方は下の動画をどうぞ。

– ランタイムエラーをリアルタイムで追跡し、元のTypeScriptに戻す
– リモート更新をプッシュし、App Storeキューをスキップする

など、開発する上で便利なことが用意されているようです。

動かしてみよう!

プロジェクトの作成が終わったら動かしてみましょう!

どうな風になるか楽しみですね!

ディレクトリを移動し、

cd myApp

仮想サーバーを立ち上げましょう!

ionic serve

PCでスマホのような画面が自動的に開くはずです!

tabのサンプルプロジェクトなので、上にようになります。

上の英語はこんな意味

このスタータープロジェクトには、タブベースの簡単なレイアウトのアプリケーションが付属しています。主にタブ付きのUIを使用するプロジェクトです。

タブを追加または変更するにはsrc / pages /ディレクトリを見てください。
既存のページを更新するか、新しいページを作成します。

ソースをみてみる

tap要素を設定しているソースは次のようになっています。

<ion-tabs>

<ion-tab [root]=”tab1Root” tabTitle=”Home” tabIcon=”home”></ion-tab>
<ion-tab [root]=”tab2Root” tabTitle=”About” tabIcon=”information-circle”></ion-tab>
<ion-tab [root]=”tab3Root” tabTitle=”Contact” tabIcon=”contacts”></ion-tab>
</ion-tabs>

編集して好みのタブにするのは簡単そうですね。

具体的な編集方法は下のリンクで詳しく説明されています。

Ionicハンズオン資料 – Qiita

便利開発モード

上の画像のような各デバイスをシミュレートできます。

http://localhost:8100/ionic-lab

でみれます!(ionic serveしている状態で)

これは開発欲をかき立たされますね🌟

左サイドばーに必要な情報はすべてありそうです。

ionic lab

コマンドから上の画面を開く方法もあるようです。

ionic lab

とコマンド入力するだけです。

Install @ionic/lab? と聞かれるので y を入力すれば自動的に開くようにしてくれます。

プロジェクト構成

ionicはAngularでできていると聞いていたけど、まるっきり同じじゃないのね💦

みたことない構成になっているので構成をスクショしておきます。参考まで、

ルートフォルダ

src

  • app内は初期表示用
  • page内は各コンポーネント

と言う感じ。

下のサイトで詳しく説明しています。

Ionic入門[ファイル構造解説, ページ追加~画面遷移まで] – Diaki’s blog

www

なぞ、、

ウェブサーバーにコピペしたら動きそう。。。

Angularがわかっていればとっつきやすいと思っていましたが、どうやらそうではないようです。。。

Summary

ionicはまんまAngularじゃない!

一つのフレームワーク!

でも、便利そうなのは確か!

全体的に説明が細かく、丁寧でエンジニア向けではなく一般的な人にもわかるように書かれているような気がします。(英語がわかればですが。。。)

おまけ

エラーの時、わかりやすい!

同じようにならなかったのでプロ向けなのかも。。。

Get Startedの動画はかなり詳しく丁寧に教えてくれているのでわかりやすいです。

英語ですけど、自動で日本語翻訳にすればなんとなくわかりますよ!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする