======スマホアプリ作成ソフトIonic====== =====Ionic3目次===== -[[ionic.html|Ionicって何？]] -[[Ionicの歴史と今後]] -[[WindowsでIonicを始める方法]] -[[おすすめのIonic3入門書2017年版|おすすめのIonic3入門書2018年版]] -[[GitHub上のionic3アプリのインストール]] -[[ionic3で計算アプリ]] -[[ionic3でタイマーアプリ]] -[[Ionic3でTodoアプリ]] -[[Ionic3でクイズアプリ]] -[[IonicウェブアプリをNetlifyで簡単デプロイ]] -[[Ionicウェブアプリをfirebaseにデプロイ]] -[[Ionic3でJson]] -[[ionic3でfirebase利用]] -[[Ionic3とfirebaseでTodoアプリ]] -[[Ionicとfirebaseでチャットアプリ]] -[[Ionic3とfirebaseでパスワード制限]] -[[Rails5サーバとIonic3で通信]] -[[Rails5APIとIonic3でTodoアプリ]] -[[Ionicでフォーム作成]] -[[Ionicでページ遷移]] -[[Ionic3でテキスト表示切り換え]] -[[Ionicのルーティング]] -[[Ionicでhttp接続|Ionicでhttp接続(v3で変更)]] -[[IonicでRxJS非同期通信]] -[[Ionicでデータ保存]] -[[Ionic3でfirebaseに画像保存]] -[[クリック操作(click)]] -[[*ngForの使い方]] -[[ステータスバーに日付表示]] -[[pwa.html|PWAって何？]] -[[Angularfire2Version5の変更点]] -[[]] -[[Ionic4での変更点]] -[[RxJS6(Ionic4-Angular6)での変更点]] -[[Windows8でGitHub]] -[[Ionic3でAndroidアプリ作成の実際]] -[[Ionic3でCameraプラグイン]] -[[]] =====Ionic4目次===== -[[WindowsでIonic4を始める方法]] -[[Ionic4での変更点]] -[[RxJS6(Ionic4-Angular6)での変更点]] -[[Ionic4とDialogflow(V1)でチャットボットアプリ]] -[[Ionic4とfirebaseでチャットアプリ]] -[[Ionic4とFirestoreでCRUD]] -[[Capacitorプラグイン]] -[[Ionic4でのAndroidアプリ開発環境]] -[[Ionic4:Ionic4でルーティング|Ionic4でルーティング]] -[[Vue.jsでIonic4]] -[[]] -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:index.html|windowsでionic4を始める方法]] -http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:02.%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AEionic%E5%85%A5%E9%96%80%E6%9B%B82019%E5%B9%B4%E7%89%88 ===Ionicのためのjavascript tips=== -[[条件(三項)演算子ハテナセミコロン]] -[[Javascriptの歴史]] -[[連想配列の並び替え]] -[[2018年時点Javascript記法]] -[[]] -[[]] ===== Ionicとは ===== Ionicは、Drifty社による、スマホアプリ作成のためのフレームワークです。 https://ionicframework.com/\\ {{:pasted:20170604-203311.png}} HTML、CSS、Javascriptと、Ionic特有の使い方を学べば、無料で動的ホームページ、Androidアプリ、iPhoneアプリを比較的簡単に作成することができます。 iPhoneアプリ作成にはMacパソコンが必要です。私は現時点ではMacは持っていないので、このサイトでは、Windowsパソコンを用いて、Androidアプリを作成する経過のメモを記載させていただきたいと思います。 =====なぜIonicを使うのか？===== スマホアプリ作成といえば、iPhoneなら[[https://www.apple.com/jp/swift/|Swift]]という言語、androidなら[[https://www.java.com/ja/|Java]]という言語で作成するのがスタンダードであり、それらの言語を用いて作成した方が、アプリの容量も小さく、スピードも速いです。 統合開発環境としても、[[https://developer.android.com/studio/index.html?hl=ja|Android Studio]]という使いやすい無料ソフトもあります。 しかし、ド素人の私がAndroid StudioでJavaのコードを見たときは、その複雑さに一瞬でやる気を失いました。たしかに、JavaScriptのコードを見ても、最初のうちは「気持ち悪い」と思っていたのですが、動的サイト作成のためにはJavaScriptの勉強は避けて通れません。スマホアプリ（Androidアプリ）作成のためには、JavaとJavascriptのどちらかは使わなければならないとなったとき、Webサイト作成にも応用が効くJavaScriptを選ぶことにしました。 私がスマホアプリを作ってみたいなと思ったのは2017年3月頃でした。JavaScriptを用いたスマホアプリを作成ソフトは複数あり、いくつか試してみたのですが、\\ *Windowsパソコンで環境構築が簡単で、 *あらかじめ[[http://getbootstrap.com/|Bootstrap]]のようなデザイン機能がついている Ionic2を選んでみました。デメリットとしては、 *日本語の解説がほとんど無い（これはまずい。。。） *なんと6カ月おきにVersion変更があり、ついていくのがむちゃくちゃ面倒 *Javaでandroidアプリを作成するより、おそらく、アプリの容量が大きくなったり、スピードが遅くなってしまう といったところはあると思います。 その他、スマホアプリ作成ソフトとしてお勧めは、[[http://japan.unity3d.com/|Unity]]があります。スマホゲームを作成するのであれば、C#（シーシャープ）というプログラミング言語を用いてのUnityで作成するのがお勧めです。蛇足ですが、Unity入門でお勧めの本は、[[http://amzn.to/2ss49QV|Unity5の教科書（Amazonへのリンク）]]です。 ===== Ionic3でお勧めの本 ===== 2018年2月現在、Ionicの日本語の本は以下の一つのみだと思います。Mac OSでの説明になりますが、Windowsでもほぼ同じです。非常に分かりやすく、お勧めです。 =====Ionicのバージョンについて===== 2015年5月 Ionic1.0.0(AngularJS1対応) 2017年1月 Ionic2.0.0(Angular2対応) 2017年4月 Ionic3.0.0(Angular4対応) 2019年1月 Ionic4.0.0(Angular7対応) のようにリリースされています。元ネタであるAngularは、2012年6月にバージョン1.0.0が、2016年9月にはアーキテクチャを一新したバージョン2.0がリリースされています。Ionic1とIonic2は全く互換性が無い別物ですので、2016年6月以前のIonic情報は参考にしない方が良いと思います。Ionic3とIonic2は、劇的な変化は無いので、小さな違いはありますが、基本的には同じです。 (参考) [[ionic4での変更点|Ionic3からIonic4への変更点]] https://yukiyuriweb.com/migrate-ionic2-app-to-ionic3/ Ionic 2.x.xからIonic 3.0.xへ移行する方法とIonic 3.0.0での変更点のまとめ 2018年5月25日更新 http://tech.pjin.jp/blog/2017/05/23/ionic3-cli/ ionicのCLIコマンド変更メモ 2017/5/23 nakaji ===== その他のリンク ===== https://developer.medley.jp/entry/2017/11/24/120000\\ 20171124 フロントエンドエンジニアがIonicを触ってみた〜メドレーTechLunch〜 =====スマホアプリ作成ソフトIonic3===== -[[ionic.html|Ionicって何？]] -[[Ionicの歴史と今後]] -[[WindowsでIonicを始める方法]] -[[おすすめのIonic3入門書2017年版|おすすめのIonic3入門書2018年版]] -[[GitHub上のionic3アプリのインストール]] -[[ionic3で計算アプリ]] -[[ionic3でタイマーアプリ]] -[[Ionic3でTodoアプリ]] -[[Ionic3でクイズアプリ]] -[[IonicウェブアプリをNetlifyで簡単デプロイ]] -[[Ionicウェブアプリをfirebaseにデプロイ]] -[[Ionic3でJson]] -[[ionic3でfirebase利用]] -[[Ionic3とfirebaseでTodoアプリ]] -[[Ionicとfirebaseでチャットアプリ]] -[[Ionic3とfirebaseでパスワード制限]] -[[Rails5サーバとIonic3で通信]] -[[Rails5APIとIonic3でTodoアプリ]] -[[Ionicでフォーム作成]] -[[Ionicでページ遷移]] -[[Ionic3でテキスト表示切り換え]] -[[Ionicのルーティング]] -[[Ionicでhttp接続|Ionicでhttp接続(v3で変更)]] -[[IonicでRxJS非同期通信]] -[[Ionicでデータ保存]] -[[Ionic3でfirebaseに画像保存]] -[[クリック操作(click)]] -[[*ngForの使い方]] -[[ステータスバーに日付表示]] -[[pwa.html|PWAって何？]] -[[Angularfire2Version5の変更点]] -[[]] -[[Ionic4での変更点]] -[[RxJS6(Ionic4-Angular6)での変更点]] -[[Windows8でGitHub]] -[[Ionic3でAndroidアプリ作成の実際]] -[[Ionic3でCameraプラグイン]] -[[]] =====スマホアプリ作成ソフトIonic4===== -[[WindowsでIonic4を始める方法]] -[[Ionic4での変更点]] -[[RxJS6(Ionic4-Angular6)での変更点]] -[[Ionic4とDialogflow(V1)でチャットボットアプリ]] -[[Ionic4とfirebaseでチャットアプリ]] -[[Ionic4とFirestoreでCRUD]] -[[Capacitorプラグイン]] -[[Ionic4でのAndroidアプリ開発環境]] -[[Ionic4:Ionic4でルーティング|Ionic4でルーティング]] -[[Vue.jsでIonic4]] -[[]] ===Ionicのためのjavascript tips=== -[[条件(三項)演算子ハテナセミコロン]] -[[Javascriptの歴史]] -[[連想配列の並び替え]] -[[2018年時点Javascript記法]] -[[]] -[[]] =====リンク===== [[sidebar|目次]]\\ 次： [[WindowsでIonicを始める方法]]