タグ : ionic

Apache Cordova 入門に参考になった記事まとめ

Ionic framework を使い始めて Apache Cordova の理解も必要と思い、Cordova の記事を読み漁ったのでオススメできる記事をご紹介させていただきます。

Apache Cordova

1つ目は CodeZine の記事です。数年前に流行った Titanium Mobile と Cordova を利用した PhoneGap や Ionic framework との違いが分かりやすく解説されています。まずはこの記事から読み始めるのがおすすめです。

2つ目は HTML5Experts.jp の記事です。Cordova の最新状況と基本が紹介されています。

あとは、開発していて困ったことが出てきたら Stack Overflow や Qiita の記事を頼ることになりそうです。

最後は、言うまでもないですが Cordova の公式ドキュメントですね。日本語のドキュメントも充実してるので、まず公式ドキュメントを読んで、それでも分からなかったら Stack Overflow や Qiita を調べるといいのではないでしょうか。

Ionic Framework のバージョン (version) 確認方法

Ionic Framework の version は本体と CLI で異なるということを教えてもらったので、バージョンを確認する方法をご紹介します。

Ionic Framework

Ionic のバージョンを確認したくなった経緯

Ionic 3.0 has Arrived! の記事を読んで Ionic 3.0 を使ってみようかなと思ったのがきっかけでした。

Ionic CLI のバージョン確認方法

npm install 前の確認方法

npm info で dist-tags や versions が確認できます。

dist-tags: latest: ‘2.2.2’ なのでバージョン指定しないで npm install すると ionic cli はバージョン 2.2.2 がインストールされます。

npm info ionic
 
{ name: 'ionic',
  description: 'A tool for creating and developing Ionic Framework mobile apps.',
  'dist-tags': 
   { latest: '2.2.2',
     unzip: '1.3.1-1.alpha.0',
     serve: '1.3.12',
     server: '1.3.1-3.beta.4',
     link: '1.3.14-beta.1',
     readline: '1.3.15-beta.4',
     resources: '1.3.1-7.beta.4',
     nohooks: '1.3.18-beta.3',
     docs: '1.3.19-beta.2',
     extlib: '1.4.0-beta.7',
     'hook-hotfix': '1.3.21-beta.1',
     beta: '3.0.0-beta7',
     testing: '1.7.15-beta.3',
     livereload: '2.0.0-alpha.11',
     generate: '2.0.0-alpha.15',
     bundle: '2.0.0-alpha.17',
     quickstart: '2.0.0-alpha.20',
     'beta-test': '2.0.0-beta.20',
     test: '2.1.18',
     nightly: '2.1.18-201701110338',
     canary: '3.0.0-beta.5-alpha.c9d454fd' },
  versions: 
   [ '0.9.6',
     '0.9.8',
// 途中省略
     '1.2.9',
     '1.2.10',
     ... 292 more items ],

余談ですがバージョンを指定してインストールしたい場合は、

npm install -g ionic@beta

npm install -g ionic@3.0.0-beta7

のように @バージョン番号 を指定して npm install できます。

npm install 後の確認方法

npm install した後にインストールされている ionic cli をバージョンを確認するには ionic コマンドのバージョンをターミナルで確認できます。

$ ionic --version
2.2.2

Ionic 本体のバージョン確認方法

npm install -g ionic してから ionic start で作成される package.json に記載されている ionic-angular の version が本体のバージョンということを教えてもらいました。

(例) ionic start myApp –v2 した場合

package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    /* 省略 */
    "ionic-angular": "3.0.1",
    /* 省略 */

この例だと “ionic-angular”: “3.0.1” なので Ionic Framework のバージョンは 3.0.1 を使っているということが分かります。

まとめ

Ionic 本体と CLI のバージョンを勘違いしてしまうと、自分が使っているバージョンが何なのか分からなくなって混乱しそうですよね。

公式ドキュメントを確認するときに自分の使っている Ionic Framework のバージョンを正しく把握しておくことは必須だと思うので、参考になれば幸いです。

Ionic Framework でアイコンフォント Ionicons を利用する

Ionic Framework からデフォルトで利用できる icon フォント Ionicons の使い方を調べたメモ。

公式サイト http://ionicons.com/ から icon フォントを検索することができます。下記の画像は money というキーワードに近しい icon フォントの検索結果です。

ionicons

利用したい icon フォントが決まったら、肝心の使い方ですが、

<i class="icon ion-cash"></i>

というように icon クラスと ion-cash クラスを付与することで、アイコンを表示できます。

Ionic Framework の公式ドキュメントにもう少しだけ詳しい説明があるので読んでみるといいかもしれません。

いい感じのアイコンがあれば Ionicons をそのまま使うと楽でよさそうですね。