ionic4:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
ionic4:index.html [2018/12/24] – [Windows10で新規Ionic4アプリを作成] adash333 | ionic4:index.html [2019/02/10] – [Ionic3のお勧めの本] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ===== スマホ用ホームページ& | + | ====== スマホ用ホームページ& |
- | IonicというJavascriptフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。 | + | IonicというJavascript+CSSフレームワークを用いると、スマホ用サイト、スマホアプリを比較的容易に作成することができるようになります。(Ionicはパソコン用サイト作成には向きません。) |
- | 2019年1月にVersion3から、Version4へ移行する予定ですので、すぐにアプリを作成するならIonic3ですが、将来性を考えるのであれば、Ionic4が良いと思います。 | + | 2019年1月にVersion4がリリースされました。 |
+ | ===== Ionic4 メニュー ===== | ||
+ | |||
+ | |||
+ | ===== Ionic4のメリット ===== | ||
Ionic4のメリットとしては、以下のことが挙げられます。 | Ionic4のメリットとしては、以下のことが挙げられます。 | ||
-スマホ用WEBページが作りやすい | -スマホ用WEBページが作りやすい | ||
行 12: | 行 16: | ||
このサイトでは、Ionic4について勉強したことを順次記載していきたいと思います。 | このサイトでは、Ionic4について勉強したことを順次記載していきたいと思います。 | ||
+ | |||
+ | ===== Ionicと他のJavascriptフレームワークの比較 ===== | ||
+ | 2018年現在、Javascriptフロントエンドフレームワークと言えば、 | ||
+ | -Angular | ||
+ | -React | ||
+ | -Vue | ||
+ | の3つが有名です。Ionicは基本的にはAngularをスマホアプリ作成をしやすく改変したものになります。 | ||
+ | <wrap hi> | ||
+ | <wrap hi> | ||
+ | <wrap hi> | ||
+ | |||
+ | なお、上記3つのフレームワークは、https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 25: | 行 41: | ||
Ubuntu18.04 | Ubuntu18.04 | ||
VisualStudioCodeのターミナル画面をWSLのBashに設定 | VisualStudioCodeのターミナル画面をWSLのBashに設定 | ||
+ | git 2.17.1 | ||
anyenv | anyenv | ||
nodenv 1.1.2-69-gced0e70 | nodenv 1.1.2-69-gced0e70 | ||
行 37: | 行 54: | ||
UbuntuのBashを利用するときの注意点 | UbuntuのBashを利用するときの注意点 | ||
- | 何かをnpm installなどした直後は、必ず、いかを入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを李利用することができません。 | + | 何かをnpm installなどした直後は、必ず、<wrap hi>exec $SHELL -l</ |
< | < | ||
exec $SHELL -l | exec $SHELL -l | ||
行 66: | 行 83: | ||
{{: | {{: | ||
- | ===== Windows10で新規Ionic4アプリを作成 ===== | + | ===== Windows10で新規Ionic4アプリmyAppを作成 ===== |
*ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。 | *ターミナル画面で以下を入力し、新規Ionic4アプリを作成します。 | ||
(私の場合は、c:/ | (私の場合は、c:/ | ||
行 91: | 行 108: | ||
*サーバを停止するには、Ctrl+Cを押します。 | *サーバを停止するには、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 をクリック | ||
+ | {{: | ||
+ | *次のような画面になるので、数分待ちます | ||
+ | {{: | ||
+ | *デプロイが成功すると、以下のようにデプロイ先のアドレスが表示されるので、そのアドレスをクリック | ||
+ | {{: | ||
+ | *次のように表示されます。スマホ用サイトなので、パソコンで見るときは、縦長にする感じになります。。。 | ||
+ | {{: | ||
+ | |||
+ | 以上で、Ionic4アプリの新規作成とNetlifyへのデプロイをすることができました。 | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | https:// | ||
+ | |||
行 123: | 行 205: | ||
2018年12月20日に投稿 | 2018年12月20日に投稿 | ||
Ionic 4 / Angular で PWA | Ionic 4 / Angular で PWA | ||
+ | |||
+ | https:// | ||
+ | Your First Ionic App - Framework v4 | ||
===== Ionic3のお勧めの本 ===== | ===== Ionic3のお勧めの本 ===== | ||
行 129: | 行 214: | ||
<iframe style=" | <iframe style=" | ||
</ | </ | ||
+ | |||
+ | ===== リンク ===== | ||
+ | 目次: | ||
+ | |||
+ | 次: | ||