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

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

ユーザ用ツール

サイト用ツール

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


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
最新のリビジョン両方とも次のリビジョン
ionic4:index.html [2019/02/10] – [スマホ用ホームページ&スマホアプリ作成ソフトIonic4] adash333ionic4:index.html [2019/02/10] – [スマホ用ホームページ&スマホアプリ作成ソフトIonic4] adash333
行 1: 行 1:
-====== スマホ用ホームページ&スマホアプリ作成ソフトIonic4 ====== 
-IonicというJavascript+CSSフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。（Ionicはパソコン用サイト作成には向きません。） 
-2019年1月にVersion4がリリースされました。 
  
-===== Ionic4 メニュー ===== 
  
 +====== Ionic4　目次 ======
  
-===== Ionic4のメリット ===== +[[00.Ionic4:index.html|00.Ionic4:index.html]]
-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について勉強したことを順次記載していきたいと思います。 +
- +
-===== Ionicと他のJavascriptフレームワークの比較 ===== +
-2018年現在、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クリックで、すぐに無料で開発を始めることができます。 +
- +
-===== 開発環境 ===== +
-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などした直後は、必ず、<wrap hi>exec $SHELL -l</wrap>を入力します。これをやらないと、インストール直後の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"と入力（今回、諸事情で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 +
- +
- +
- +
-===== リンク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 +
- +
-https://ionicframework.com/docs/developer-resources/guides/first-app-v4/intro/ +
-Your First Ionic App - Framework v4+
  
 ===== Ionic3のお勧めの本 ===== ===== Ionic3のお勧めの本 =====
行 214: 行 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