差分

このページの2つのバージョン間の差分を表示します。

--- ionic4:index.html [2018/12/24] – [Ionic4アプリmyAppをGitHubにアップロード（push）] adash333
+++ ionic4:index.html [2019/02/10] – [Ionic4 メニュー] adash333
@@ 行 1: / 行 1: @@
-===== スマホ用ホームページ&スマホアプリ作成ソフトIonic4 =====
+====== スマホ用ホームページ&スマホアプリ作成ソフトIonic4 ======
-IonicというJavascriptフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。
+IonicというJavascript+CSSフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。（Ionicはパソコン用サイト作成には向きません。）
-年1月にVersion3から、Version4へ移行する予定ですので、すぐにアプリを作成するならIonic3ですが、将来性を考えるのであれば、Ionic4が良いと思います。
+年1月にVersion4がリリースされました。
+===== Ionic4 メニュー =====
+[[00.Ionic4:index.html|00.Ionic4:index.html]]
+===== Ionic4のメリット =====
 Ionic4のメリットとしては、以下のことが挙げられます。
   -スマホ用WEBページが作りやすい
@@ 行 12: / 行 16: @@
 このサイトでは、Ionic4について勉強したことを順次記載していきたいと思います。
+===== Ionicと他のJavascriptフレームワークの比較 =====
+年現在、Javascriptフロントエンドフレームワークと言えば、
+  -Angular
+  -React
+  -Vue
+の3つが有名です。Ionicは基本的にはAngularをスマホアプリ作成をしやすく改変したものになります。
+<wrap hi>Angular</wrap>はフルスタックフレームワークと呼ばれ、インストールなどにはやや時間がかかりますが、最初から何でもそろっている感じで、Ruby on Railsに雰囲気が似ていると思います。
+<wrap hi>React</wrap>はよくわかりませんが、JSXという、Javascriptの中にHTMLを混ぜたような記載方法が特徴的で、日本ではかなり人気があるようです。Reduxという仕組みが私には難しすぎて挫折したので、正直よくわかりませんが、初心者には難しいかもしれません。
+<wrap hi>Vue</wrap>は、最初は最低限の構成で、必要に応じてルーティングやHttp通信などの機能を追加していく形になります。また、2018年8月にbeta版が公開された[[https://qiita.com/kai_kou/items/8fcabc7a8445c1be8a30|Vue ui]]なども含め、上記3つの中では初心者に一番やさしいのではないかと思われます。
+なお、上記3つのフレームワークは、https://codesandbox.io 上で、2クリックで、すぐに無料で開発を始めることができます。
 ===== 開発環境 =====
@@ 行 38: / 行 54: @@
 UbuntuのBashを利用するときの注意点
-何かをnpm installなどした直後は、必ず、いかを入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを李利用することができません。
+何かをnpm installなどした直後は、必ず、<wrap hi>exec $SHELL -l</wrap>を入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを利用することができません。
 <code>
 exec $SHELL -l
@@ 行 140: / 行 156: @@
   *一瞬、Authorized画面が出て、その後、以下のような画面が出てくるので、先ほどGitHubにアップロード（push）したリポジトリを選択します
 {{:ionic4:pasted:20181224-182405.png}}
-  *
+  *以下のように設定して、Deploy site をクリック
-{{:ionic4:pasted:20181224-182436.png}}
+{{:ionic4:pasted:20181224-184311.png}}
+  *次のような画面になるので、数分待ちます
+{{:ionic4:pasted:20181224-184348.png}}
+  *デプロイが成功すると、以下のようにデプロイ先のアドレスが表示されるので、そのアドレスをクリック
+{{:ionic4:pasted:20181224-184519.png}}
+  *次のように表示されます。スマホ用サイトなので、パソコンで見るときは、縦長にする感じになります。。。
+{{:ionic4:pasted:20181224-184644.png}}
+以上で、Ionic4アプリの新規作成とNetlifyへのデプロイをすることができました。
+ソースコード
+https://github.com/adash333/Ionic4-myApp
+できたもの
+https://cranky-yonath-8cd1dd.netlify.com
@@ 行 177: / 行 205: @@
 年12月20日に投稿
 Ionic 4 / Angular で PWA
+https://ionicframework.com/docs/developer-resources/guides/first-app-v4/intro/
+Your First Ionic App - Framework v4
 ===== Ionic3のお勧めの本 =====
@@ 行 183: / 行 214: @@
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B0792PKGZ1&linkId=d4a1911ab8d266dfec617256f5603011"></iframe>
 </html>
+===== リンク =====
+目次：
+次：