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

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

ユーザ用ツール

サイト用ツール

現在位置: index.html » ionic4
トレース:
ionic4:index.html


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
最新のリビジョン両方とも次のリビジョン
ionic4:index.html [2018/12/24] – [Windows10で新規Ionic4アプリを作成] adash333ionic4:index.html [2019/02/10] – [スマホ用ホームページ&スマホアプリ作成ソフトIonic4] adash333
行 1: 行 1:
-===== スマホ用ホームページ&スマホアプリ作成ソフトIonic4 ===== 
-IonicというJavascriptフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。 
-2019年1月にVersion3から、Version4へ移行する予定ですので、すぐにアプリを作成するならIonic3ですが、将来性を考えるのであれば、Ionic4が良いと思います。 
  
-Ionic4のメリットとしては、以下のことが挙げられます。 
-  -スマホ用WEBページが作りやすい 
-  -スマホ用アプリが作りやすい（ReactやVueとの最大の違い） 
-  -Capacitorというプラグイン（？）を用いて、スマホのカメラなどの操作がしやすい 
-  -PWA対応（WEBページがそのままスマホアプリになる） 
  
-Ionic3については、<wrap hi>[[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic4%E3%81%A7%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9#%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E3%82%BD%E3%83%95%E3%83%88ionic3|こちらのサイト]]</wrap>にいくつかサンプルを記載させていただきました。+====== Ionic4　目次 ======
  
-このサイトでは、Ionic4について勉強したことを順次記載していきたいと思います。 +[[00.Ionic4:index.html|00.Ionic4:index.html]]
- +
-===== 開発環境 ===== +
-2018年12月現在、残念ながら、CodeSandboxではIonicを利用することはできません。 +
-Angular、ReactやVue.jsと異なり、自分のパソコンで環境構築をする必要があります。 +
-当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。 +
-<code> +
-Panasonic CF-RZ6 +
-Windows10 Pro (1803) +
-VisualStudioCode  +
- +
-Windows Subsystem for Linux (WSL) +
-Ubuntu18.04 +
-VisualStudioCodeのターミナル画面をWSLのBashに設定 +
-git 2.17.1 +
-anyenv  +
-nodenv 1.1.2-69-gced0e70 +
-node 10.14.2 +
-</code> +
-私の場合、以下のようにフォルダ共有しています。 +
-<code> +
-Windowsの C:/Users/a/a/ +
-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画面に設定しています。 +
- +
-UbuntuのBashを利用するときの注意点 +
-何かをnpm installなどした直後は、必ず、いかを入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを李利用することができません。 +
-<code> +
-exec $SHELL -l +
-</code> +
- +
-===== 今回構築する環境 ===== +
-<code> +
-Ionic CLI 4.6.0 +
-</code> +
-===== Windows10にIonic4をインストール ===== +
-実際は、Windows10内の、仮想マシンWSL(Ubuntu 18.04) にIonic CLIとcordovaをインストールしていることになります。 +
- +
-   *C:/Users/a/a/フォルダ（C:/Users/（Windowsのユーザ名）/（任意のフォルダ名）/）を、VisualStudioCodeで開き、Ctrl+@ でターミナル画面を開く。 +
-(WSL（Ubuntu）のBash画面なので、(Ubuntuのユーザ名)@desktop-xxxxxx:mnt/c/Users/（Windowsのユーザ名）/（任意のフォルダ名）/と記載されています。) +
-{{:ionic4:pasted:20181224-141424.png}} +
-   *以下を入力して、Ionic CLIとcordovaをインストール +
-<code> +
-npm install -g ionic cordova +
-exec $SHELL -l +
-</code> +
-{{:ionic4:pasted:20181224-145055.png}} +
- +
-{{:ionic4:pasted:20181224-150729.png}} +
-   *以下を入力して、Ionic CLIがインストールされていることを確認します +
-<code> +
-ionic -v +
-</code> +
-{{:ionic4:pasted:20181224-150806.png}} +
- +
-===== Windows10で新規Ionic4アプリmyAppを作成 ===== +
-  *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。 +
-（私の場合は、c:/Users/a/a/ionic/　フォルダ内でこのコマンドを入力しました。） +
-<code> +
-ionic start myApp tabs --type=angular +
-</code> +
-インストールに数分かかります。なお、 +
-  -<wrap hi>myApp</wrap>がアプリの名前 +
-  -<wrap hi>tabs</wrap>が画面下に3個のタブが作成されるテンプレートを利用 +
-  -<wrap hi>--type=angular</wrap>がAngularを利用 +
-を表しています。--typeは、今後、vueやreactが実装されるのかもしれません。 +
-{{:ionic4:pasted:20181224-153030.png}} +
-{{:ionic4:pasted:20181224-153123.png}} +
-  *途中、? Install the free Ionic Appflow SDK and connect your app? と聞かれるので、n + Enterを入力します。 +
-{{:ionic4:pasted:20181224-153209.png}} +
-  *次に作成したmyAppフォルダに移動して、ionic serveで開発用サーバを起動します。 +
-<code> +
-cd myApp +
-ionic serve +
-</code> +
-  *すると、数分で自動的にWEBブラウザ（Chromeがお勧めです）が開いて、割といい感じの画面が表示されます。 +
-{{:ionic4:pasted:20181224-154005.png}} +
-{{:ionic4:pasted:20181224-154100.png}} +
-  *サーバを停止するには、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"と入力して、Create repositoryをクリック +
-{{:ionic4:pasted:20181224-180559.png}} +
-  *次の画面で、図のhttps://github.com/(ユーザ名)/(リポジトリ名).gitの部分をコピーして、メモ帳などに張り付けておきます。 +
-{{:ionic4:pasted:20181224-180708.png}} +
- +
- +
- +
- +
- +
- +
-===== リンク20181224時点 ===== +
- +
-https://qiita.com/kon_shou/items/de4c6ded5f47df9b8ba3 +
-@kon_shou +
-2018年12月08日に更新 +
-OPENLOGI8日目 +
-@ionic/vueでハイブリッドアプリを作ってみた +
- +
-https://qiita.com/xiaca/items/8cedc310d59ea014c983 +
-@xiaca +
-2018年12月02日に更新 +
-Ionic2日目 +
-Ionic 4(PWA Toolkit) + Capacitorでカメラを動かして顔認識してみる +
- +
-https://qiita.com/daiki7nohe/items/ce85f1b10c7012f79d95 +
-@daiki7nohe +
-2018年12月15日に投稿 +
-Fusic15日目 +
-@ionic/vue + Capacitorでクロスプラットフォームの未来を覗いてみる +
- +
-https://qiita.com/rdlabo/items/c76e0321096318489513 +
-@rdlabo +
-2018年12月11日に更新 +
-Ionic11日目 +
-新しいHTML5 APPプラットフォーム「Capacitor」を試してみた +
- +
-https://qiita.com/kponda/items/b06d350cb616458d33cd +
-@kponda +
-2018年12月20日に投稿 +
-Ionic 4 / Angular で PWA+
  
 ===== Ionic3のお勧めの本 ===== ===== Ionic3のお勧めの本 =====
行 152: 行 10:
 <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> <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> </html>
 +
 +===== リンク =====
 +目次：
 +
 +次：
  
  
  
  


Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki