差分

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

--- 00.ionic4:index.html [2019/02/10] – [Ionic4 メニュー] adash333
+++ 00.ionic4:index.html [2019/08/28] (現在) – [Ionic4 メニュー] adash333
@@ 行 4: / 行 4: @@
 HTML、CSS、Javascriptと、Ionic特有の使い方を学べば、無料で動的ホームページ、Androidアプリ、iPhoneアプリを比較的簡単に作成することができます。
-iPhoneアプリ作成にはMacパソコンが必要です。私は現時点ではMacは持っていないので、このサイトでは、Windowsパソコンを用いて、WEBサイトを作成する経過のメモを記載させていただきたいと思います。
+iPhoneアプリ作成にはMacパソコンが必要です。私は現時点ではMacは持っていないので、このサイトでは、Windowsパソコンを用いて、WEBサイト（PWA化すればそのままAndroidアプリになります）を作成する経過のメモを記載させていただきたいと思います。
 ===== Ionic4 メニュー =====
@@ 行 12: / 行 12: @@
 [[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]
-[[00.ionic4:02.Ionic4で計算アプリ]]
+[[00.ionic4:03.ionic4で計算アプリ|Ionic4で計算アプリ]]
+[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]
+[[00.ionic4:99.Ionic4リンク集|00.ionic4:99.Ionic4リンク集]]
+[[00.ionic4:10.Ionic4とCapacitorでGPS取得|10.Ionic4とCapacitorでGPS取得]]
 <wrap hi>[[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic.html|姉妹サイトのIonic3とIonic4のリンク集]]</wrap>
@@ 行 63: / 行 69: @@
 Ubuntuの  /mnt/c/Users/a/a/
 </code>
-また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]</wrap>にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。
+また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]</wrap>（<wrap em><wrap hi>Ctrl+Shit+P</wrap></wrap>で、Terminal select default shellをクリック）にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。
 UbuntuのBashを利用するときの注意点
@@ 行 77: / 行 83: @@
   -VisualStudioCodeを開き、Ctrl+@でターミナル画面を開く
   -<wrap hi>npm install -g ionic cordova</wrap>
-後は、以下の、「Windows10で新規Ionic4アプリmyAppを作成」をご覧いただき、Ionic4アプリ作成へと続いてください。
+後は、以下の、[[#Windows10で新規Ionic4アプリmyAppを作成]]をご覧いただき、Ionic4アプリ作成へと続いてください。
 ===== 今回構築する環境 =====
 <code>
@@ 行 102: / 行 108: @@
 {{:ionic4:pasted:20181224-150806.png}}
-===== Windows10で新規Ionic4アプリmyAppを作成 =====
+===== Windows10で新規Ionic4アプリIonic4-PWAを作成 =====
   *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。
 （私の場合は、c:/Users/a/a/ionic/　フォルダ内でこのコマンドを入力しました。）
@@ 行 110: / 行 116: @@
 インストールに数分かかります。なお、
   -<wrap hi>myApp</wrap>がアプリの名前
-  -<wrap hi>tabs</wrap>が画面下に3個のタブが作成されるテンプレートを利用
+  -<wrap hi>tabs</wrap>が３つのタブが作成されるテンプレートを利用
-  -<wrap hi>--type=angular</wrap>がAngularを利用
+  -''%%--type=angular%%''がAngularを利用
-を表しています。--typeは、今後、vueやreactが実装されるのかもしれません。
+を表しています。''%%--type%%''は、今後、vueやreactが実装されるのかもしれません。
-{{:ionic4:pasted:20181224-153030.png}}
+{{:00.ionic4:pasted:20190213-070535.png}}
-{{:ionic4:pasted:20181224-153123.png}}
+{{:00.ionic4:pasted:20190213-070547.png}}
   *途中、? Install the free Ionic Appflow SDK and connect your app? と聞かれるので、n + Enterを入力します。
 {{:ionic4:pasted:20181224-153209.png}}
-  *次に作成したmyAppフォルダに移動して、ionic serveで開発用サーバを起動します。
+  *次に作成したIonic4-pwaフォルダに移動して、ionic serveで開発用サーバを起動します。
 <code>
-cd myApp
+cd Ionic4-pwa
 ionic serve
 </code>
@@ 行 125: / 行 132: @@
 {{:ionic4:pasted:20181224-154005.png}}
 {{:ionic4:pasted:20181224-154100.png}}
-  *サーバを停止するには、Ctrl+Cを押します。
+  *サーバを停止するには、Ctrl+Cを押します（Windowsであれば、さらに、y + Enter）。
 {{:ionic4:pasted:20181224-164801.png}}
@@ 行 132: / 行 139: @@
 GitHubはフリープランではシークレットレポジトリが1個しか作れないので、慣れたらBitbucket(フリープランでもシークレットリポジトリがたくさん作れます)でやるのがよいかもしれません。
-GitHubアカウント作成済みとします。（無料です。）
+GitHubアカウントは作成済みとします。（無料です。）
 GitHubにログインして、"Ionic4-myApp"リポジトリを新規作成します。
@@ 行 194: / 行 201: @@
-===== リンク20181224時点 =====
+===== リンク =====
 https://qiita.com/kon_shou/items/de4c6ded5f47df9b8ba3
@@ 行 231: / 行 240: @@
 http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic.html
+===== Ionic4のお勧めの本 =====
+年2月現在、Ionic4の本は以下の一冊のみです。初めての人でも、パスワード制限つき掲示板を作れるように、丁寧に解説されていてお勧めです。腰をすえてやるのなら、ぜひ、次にご紹介するIonic3の本も一緒に読んでいただくことをお勧めします。
+<html>
+<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=B07MFYD3DP&linkId=7c0c64f292f6e1928470fc07628db1e0"></iframe>
+</html>
@@ 行 240: / 行 257: @@
 ===== リンク =====
-目次：
+目次：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]]
-次：
+次：[[00.ionic4:01.windowsでionicを始める方法|WindowsでIonicを始める方法]]