サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.ionic4:index.html


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.ionic4:index.html [2019/02/12]
adash333 [Windows10で新規Ionic4アプリmyAppを作成]
00.ionic4:index.html [2019/08/28] (現在)
adash333 [Ionic4 メニュー]
行 16: 行 16:
 [[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]] [[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> <wrap hi>[[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic.html|姉妹サイトのIonic3とIonic4のリンク集]]</wrap>
行 67: 行 69:
 Ubuntuの  /mnt/c/Users/a/a/ Ubuntuの  /mnt/c/Users/a/a/
 </code> </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を利用するときの注意点 UbuntuのBashを利用するときの注意点
行 106: 行 108:
 {{:ionic4:pasted:20181224-150806.png}} {{:ionic4:pasted:20181224-150806.png}}
  
-===== Windows10で新規Ionic4アプリmyAppを作成 =====+===== Windows10で新規Ionic4アプリIonic4-PWAを作成 =====
   *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。   *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。
 (私の場合は、c:/Users/a/a/ionic/ フォルダ内でこのコマンドを入力しました。) (私の場合は、c:/Users/a/a/ionic/ フォルダ内でこのコマンドを入力しました。)
行 114: 行 116:
 インストールに数分かかります。なお、 インストールに数分かかります。なお、
   -<wrap hi>myApp</wrap>がアプリの名前   -<wrap hi>myApp</wrap>がアプリの名前
-  -<wrap hi>tabs</wrap>画面下に3個のタブが作成されるテンプレートを利用+  -<wrap hi>tabs</wrap>3つのタブが作成されるテンプレートを利用
   -''%%--type=angular%%''が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を入力します。   *途中、? Install the free Ionic Appflow SDK and connect your app? と聞かれるので、n + Enterを入力します。
 {{:ionic4:pasted:20181224-153209.png}} {{:ionic4:pasted:20181224-153209.png}}
-  *次に作成したmyAppフォルダに移動して、ionic serveで開発用サーバを起動します。+  *次に作成したIonic4-pwaフォルダに移動して、ionic serveで開発用サーバを起動します。
 <code> <code>
-cd myApp+cd Ionic4-pwa
 ionic serve ionic serve
 </code> </code>
行 136: 行 139:
 GitHubはフリープランではシークレットレポジトリが1個しか作れないので、慣れたらBitbucket(フリープランでもシークレットリポジトリがたくさん作れます)でやるのがよいかもしれません。 GitHubはフリープランではシークレットレポジトリが1個しか作れないので、慣れたらBitbucket(フリープランでもシークレットリポジトリがたくさん作れます)でやるのがよいかもしれません。
  
-GitHubアカウント作成済みとします。(無料です。)+GitHubアカウント作成済みとします。(無料です。)
 GitHubにログインして、"Ionic4-myApp"リポジトリを新規作成します。 GitHubにログインして、"Ionic4-myApp"リポジトリを新規作成します。
  
行 198: 行 201:
  
  
-===== リンク20181224時点 =====+===== リンク ===== 
 + 
  
 https://qiita.com/kon_shou/items/de4c6ded5f47df9b8ba3 https://qiita.com/kon_shou/items/de4c6ded5f47df9b8ba3
行 235: 行 240:
 http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic.html http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic.html
  
 +
 +
 +===== Ionic4のお勧めの本 =====
 +2019年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>
  
  


00.ionic4/index.html.1549952306.txt.gz · 最終更新: 2019/02/12 by adash333