差分

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

--- ionic4:index.html [2018/12/24] – [Windows10で新規Ionic4アプリを作成] 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クリックで、すぐに無料で開発を始めることができます。
 ===== 開発環境 =====
@@ 行 25: / 行 41: @@
 Ubuntu18.04
 VisualStudioCodeのターミナル画面をWSLのBashに設定
+git 2.17.1
 anyenv
 nodenv 1.1.2-69-gced0e70
@@ 行 37: / 行 54: @@
 UbuntuのBashを利用するときの注意点
-何かをnpm installなどした直後は、必ず、いかを入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを李利用することができません。
+何かをnpm installなどした直後は、必ず、<wrap hi>exec $SHELL -l</wrap>を入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを利用することができません。
 <code>
 exec $SHELL -l
@@ 行 66: / 行 83: @@
 {{:ionic4:pasted:20181224-150806.png}}
-===== Windows10で新規Ionic4アプリを作成 =====
+===== Windows10で新規Ionic4アプリmyAppを作成 =====
   *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。
 （私の場合は、c:/Users/a/a/ionic/　フォルダ内でこのコマンドを入力しました。）
@@ 行 91: / 行 108: @@
   *サーバを停止するには、Ctrl+Cを押します。
 {{:ionic4:pasted:20181224-164801.png}}
+===== Ionic4アプリmyAppをGitHubにアップロード（push） =====
+作成したデフォルトアプリをNetlifyにデプロイ（公開）するために、まずは、GitHubにpushします。
+GitHubはフリープランではシークレットレポジトリが1個しか作れないので、慣れたらBitbucket(フリープランでもシークレットリポジトリがたくさん作れます)でやるのがよいかもしれません。
+GitHubアカウント作成済みとします。（無料です。）
+GitHubにログインして、"Ionic4-myApp"リポジトリを新規作成します。
+  *https://github.com/loginへ移動し、ログイン
+{{:ionic4:pasted:20181224-180304.png}}
+  *画面右上の、"+"をクリック
+{{:ionic4:pasted:20181224-180346.png}}
+  *New Repositoryをクリック
+{{:ionic4:pasted:20181224-180458.png}}
+  *Repository Nameのところに、"Ionic4-myApp"と入力（今回、諸事情でmyAppにしていませんが、本来は、同じ名前にした方がわかりやすいです）して、Create repositoryをクリック
+{{:ionic4:pasted:20181224-180559.png}}
+  *次の画面で、図のhttps://github.com/(ユーザ名)/(リポジトリ名).gitの部分をコピーして、メモ帳などに張り付けておきます。
+{{:ionic4:pasted:20181224-180708.png}}
+  *この画面を参考にしつつ、VisualStudioCodeのターミナル画面（UbuntuのBash画面）に、以下を順に入力していきます。
+<code>
+echo "# Ionic4-myApp" >> README.md
+git add README.md
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/Ionic4-myApp.git
+git push -u origin master
+</code>
+{{:ionic4:pasted:20181224-181213.png}}
+{{:ionic4:pasted:20181224-181310.png}}
+  *最初だけ、GitHubのusernameとPasswordを聞かれるので、それぞれ入力して、Enterを押します。
+{{:ionic4:pasted:20181224-181447.png}}
+  *うまくいくと、GitHubの画面を更新すると、以下のように、自分のパソコンの中のIonic4アプリが、GitHubにアップロードされたことがわかります。
+{{:ionic4:pasted:20181224-181801.png}}
+===== Ionic4アプリmyAppをGitHub経由でNetlifyにデプロイ =====
+Netlifyという無料でIonic4アプリをデプロイ（公開）してくれるサイトがあります。今回は、これを利用します。GitHubアカウントがあれば、すぐに利用できます。
+  *以下のページへ行き、ログインをクリック
+https://www.netlify.com/
+{{:ionic4:pasted:20181224-182050.png}}
+  *GitHubをクリック
+{{:ionic4:pasted:20181224-182124.png}}
+  *画面右上のNew site from Git をクリック
+{{:ionic4:pasted:20181224-182228.png}}
+  *GitHub をクリック
+{{:ionic4:pasted:20181224-182250.png}}
+  *一瞬、Authorized画面が出て、その後、以下のような画面が出てくるので、先ほどGitHubにアップロード（push）したリポジトリを選択します
+{{:ionic4:pasted:20181224-182405.png}}
+  *以下のように設定して、Deploy site をクリック
+{{: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
@@ 行 123: / 行 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のお勧めの本 =====
@@ 行 129: / 行 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>
+===== リンク =====
+目次：
+次：