ionic4:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ionic4:index.html [2018/12/24] – [開発環境] adash333 | ionic4:index.html [2019/02/20] (現在) – 削除 adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ===== スマホ用ホームページ& | ||
- | IonicというJavascript+CSSフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。(Ionicはパソコン用サイト作成には向きません。) | ||
- | 2019年1月にVersion3から、Version4へ移行する予定ですので、すぐにアプリを作成するならIonic3ですが、将来性を考えるのであれば、Ionic4が良いと思います。 | ||
- | |||
- | Ionic4のメリットとしては、以下のことが挙げられます。 | ||
- | -スマホ用WEBページが作りやすい | ||
- | -スマホ用アプリが作りやすい(ReactやVueとの最大の違い) | ||
- | -Capacitorというプラグイン(?)を用いて、スマホのカメラなどの操作がしやすい | ||
- | -PWA対応(WEBページがそのままスマホアプリになる) | ||
- | |||
- | Ionic3については、< | ||
- | |||
- | このサイトでは、Ionic4について勉強したことを順次記載していきたいと思います。 | ||
- | |||
- | ==== Ionicと他のJavascriptフレームワークの比較 ==== | ||
- | 2018年現在、Javascriptフロントエンドフレームワークと言えば、 | ||
- | -Angular | ||
- | -React | ||
- | -Vue | ||
- | の3つが有名です。Ionicは基本的にはAngularをスマホアプリ作成をしやすく改変したものになります。 | ||
- | <wrap hi> | ||
- | <wrap hi> | ||
- | <wrap hi> | ||
- | |||
- | なお、上記3つのフレームワークは、https:// | ||
- | |||
- | ===== 開発環境 ===== | ||
- | 2018年12月現在、残念ながら、CodeSandboxではIonicを利用することはできません。 | ||
- | Angular、ReactやVue.jsと異なり、自分のパソコンで環境構築をする必要があります。 | ||
- | 当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、< | ||
- | < | ||
- | 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 | ||
- | </ | ||
- | 私の場合、以下のようにフォルダ共有しています。 | ||
- | < | ||
- | Windowsの C:/ | ||
- | Ubuntuの | ||
- | </ | ||
- | また、Windows10のVisualStudioCodeでC:/ | ||
- | |||
- | UbuntuのBashを利用するときの注意点 | ||
- | 何かをnpm installなどした直後は、必ず、< | ||
- | < | ||
- | exec $SHELL -l | ||
- | </ | ||
- | |||
- | ===== 今回構築する環境 ===== | ||
- | < | ||
- | Ionic CLI 4.6.0 | ||
- | </ | ||
- | ===== Windows10にIonic4をインストール ===== | ||
- | 実際は、Windows10内の、仮想マシンWSL(Ubuntu 18.04) にIonic CLIとcordovaをインストールしていることになります。 | ||
- | |||
- | | ||
- | (WSL(Ubuntu)のBash画面なので、(Ubuntuのユーザ名)@desktop-xxxxxx: | ||
- | {{: | ||
- | | ||
- | < | ||
- | npm install -g ionic cordova | ||
- | exec $SHELL -l | ||
- | </ | ||
- | {{: | ||
- | |||
- | {{: | ||
- | | ||
- | < | ||
- | ionic -v | ||
- | </ | ||
- | {{: | ||
- | |||
- | ===== Windows10で新規Ionic4アプリmyAppを作成 ===== | ||
- | *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。 | ||
- | (私の場合は、c:/ | ||
- | < | ||
- | ionic start myApp tabs --type=angular | ||
- | </ | ||
- | インストールに数分かかります。なお、 | ||
- | -<wrap hi> | ||
- | -<wrap hi> | ||
- | -<wrap hi> | ||
- | を表しています。--typeは、今後、vueやreactが実装されるのかもしれません。 | ||
- | {{: | ||
- | {{: | ||
- | *途中、? Install the free Ionic Appflow SDK and connect your app? と聞かれるので、n + Enterを入力します。 | ||
- | {{: | ||
- | *次に作成したmyAppフォルダに移動して、ionic serveで開発用サーバを起動します。 | ||
- | < | ||
- | cd myApp | ||
- | ionic serve | ||
- | </ | ||
- | *すると、数分で自動的にWEBブラウザ(Chromeがお勧めです)が開いて、割といい感じの画面が表示されます。 | ||
- | {{: | ||
- | {{: | ||
- | *サーバを停止するには、Ctrl+Cを押します。 | ||
- | {{: | ||
- | |||
- | ===== Ionic4アプリmyAppをGitHubにアップロード(push) ===== | ||
- | 作成したデフォルトアプリをNetlifyにデプロイ(公開)するために、まずは、GitHubにpushします。 | ||
- | GitHubはフリープランではシークレットレポジトリが1個しか作れないので、慣れたらBitbucket(フリープランでもシークレットリポジトリがたくさん作れます)でやるのがよいかもしれません。 | ||
- | |||
- | GitHubアカウント作成済みとします。(無料です。) | ||
- | GitHubにログインして、" | ||
- | |||
- | *https:// | ||
- | {{: | ||
- | *画面右上の、" | ||
- | {{: | ||
- | *New Repositoryをクリック | ||
- | {{: | ||
- | *Repository Nameのところに、" | ||
- | {{: | ||
- | *次の画面で、図のhttps:// | ||
- | {{: | ||
- | *この画面を参考にしつつ、VisualStudioCodeのターミナル画面(UbuntuのBash画面)に、以下を順に入力していきます。 | ||
- | < | ||
- | echo "# Ionic4-myApp" | ||
- | git add README.md | ||
- | git commit -m "first commit" | ||
- | git remote add origin https:// | ||
- | git push -u origin master | ||
- | </ | ||
- | {{: | ||
- | {{: | ||
- | *最初だけ、GitHubのusernameとPasswordを聞かれるので、それぞれ入力して、Enterを押します。 | ||
- | {{: | ||
- | *うまくいくと、GitHubの画面を更新すると、以下のように、自分のパソコンの中のIonic4アプリが、GitHubにアップロードされたことがわかります。 | ||
- | {{: | ||
- | |||
- | ===== Ionic4アプリmyAppをGitHub経由でNetlifyにデプロイ ===== | ||
- | |||
- | Netlifyという無料でIonic4アプリをデプロイ(公開)してくれるサイトがあります。今回は、これを利用します。GitHubアカウントがあれば、すぐに利用できます。 | ||
- | |||
- | *以下のページへ行き、ログインをクリック | ||
- | https:// | ||
- | {{: | ||
- | *GitHubをクリック | ||
- | {{: | ||
- | *画面右上のNew site from Git をクリック | ||
- | {{: | ||
- | *GitHub をクリック | ||
- | {{: | ||
- | *一瞬、Authorized画面が出て、その後、以下のような画面が出てくるので、先ほどGitHubにアップロード(push)したリポジトリを選択します | ||
- | {{: | ||
- | *以下のように設定して、Deploy site をクリック | ||
- | {{: | ||
- | *次のような画面になるので、数分待ちます | ||
- | {{: | ||
- | *デプロイが成功すると、以下のようにデプロイ先のアドレスが表示されるので、そのアドレスをクリック | ||
- | {{: | ||
- | *次のように表示されます。スマホ用サイトなので、パソコンで見るときは、縦長にする感じになります。。。 | ||
- | {{: | ||
- | |||
- | |||
- | ===== リンク20181224時点 ===== | ||
- | |||
- | https:// | ||
- | @kon_shou | ||
- | 2018年12月08日に更新 | ||
- | OPENLOGI8日目 | ||
- | @ionic/ | ||
- | |||
- | https:// | ||
- | @xiaca | ||
- | 2018年12月02日に更新 | ||
- | Ionic2日目 | ||
- | Ionic 4(PWA Toolkit) + Capacitorでカメラを動かして顔認識してみる | ||
- | |||
- | https:// | ||
- | @daiki7nohe | ||
- | 2018年12月15日に投稿 | ||
- | Fusic15日目 | ||
- | @ionic/vue + Capacitorでクロスプラットフォームの未来を覗いてみる | ||
- | |||
- | https:// | ||
- | @rdlabo | ||
- | 2018年12月11日に更新 | ||
- | Ionic11日目 | ||
- | 新しいHTML5 APPプラットフォーム「Capacitor」を試してみた | ||
- | |||
- | https:// | ||
- | @kponda | ||
- | 2018年12月20日に投稿 | ||
- | Ionic 4 / Angular で PWA | ||
- | |||
- | ===== Ionic3のお勧めの本 ===== | ||
- | Ionic4の本は未出版ですが、大まかな内容は、Ionic3とIonic4(Angularを用いた場合)は大きな違いはないので、Ionic4をやろうとしている場合でも、以下の本を読んでIonic3アプリを何個か作成してみるのが、非常にお勧めです。 | ||
- | < | ||
- | <iframe style=" | ||
- | </ | ||
- | |||
- | |||
- | |||
ionic4/index.html.1545686821.txt.gz · 最終更新: 2018/12/24 by adash333