こんにちは、たねやつです。
今回から勉強がてら作成したスマホアプリののことについて書いていこうと思います。10回ちょいぐらいのシリーズ記事になると思います。
対象
- JavaScript, HTML, CSSを勉強したい人
- スマホ用アプリを作ってみたいけどJavaとかSwiftとか面倒な人
- Cordova, OnsenUIを使ってみたい人
あたりでしょうか？ Progateなどで各言語の基本的な部分は1週しておくとよりすんなりと進めることができると思います ^^) _旦~~
こんな感じ
アプリ本体
https://drive.google.com/open?id=1qmDCJRyjDxvFi_h_PRvaynXX-QU14O9m
ここに置いてありますので参考用に使用してください。アイコンはデフォルトのままです。動作はAndroid 8.1(仮想端末)、Android 9(Pixel)で確認しています。
Googleプレイストア以外からのアプリをインストールするための権限設定などについては以下の記事を参考にしてください。
前提
iOS用のアプリを作成することもできますが、今回のシリーズではAndroid向けアプリを作成する方向で進めていきます。
また、Windows機を使用している前提での解説となります。 アプリのインストール方法が少し異なるぐらいで大きな問題は出ないと思います。
最後に、開発に使用するPCのメモリは8GB以上必要となります。。。(笑) 必ずしも必要ではないのですがAndroidの仮想端末を動かそうとすると8GB未満だと全体的な動作が超重くなりますので、非常にストレスが溜まります( ;∀;)
開発環境の作成
- Visual Studio Code
- Cordova Tools
- Android Studio
- Node.js
- Cordova
- (Chrome)
がとりあえず最低限必要なソフト(?)達です。
Android Studioはパソコン上でAndroid OS端末を仮想的に動かしてデバッグするために必要です。 実機デバッグしかしない、iOS用のアプリを作るという方は不要かと思います。
Chromeがあるとより細かいデバッグができるので(実際の画面をHTMLのソースコードで確認できる)、便利ですがあまり必要性は高くないです。
Visual Studio Code
コードを書くために使用します。あのMicrosoftが作っています。(どうせならWindows 10に標準で入れてくれれば、、(笑))
結構動作が軽く、Atomなどの高機能テキストエディタの代わりにも使えそうです。 割と秀丸が一番好きなのですが、現代的なエディタも使ってみたいと思い、しばらくはテキストエディタとしても使っていこうと思います(笑)
以下のリンクから最新のvscodeをインストール。
ページ自体は英語となっていますが、インストール時に言語を選択できます。
Cordova Tools
vscodeのインストールが完了したら、Cordova Toolsを導入します。これがないとアプリのビルド(スマホで動くファイルの作成)やデバッグができません。
インストールした直後であれば、VSCodeの画面上の左のバーに虫と駐車禁止マークみたいなのが表示されていると思います。その下にある四角いマークをクリックすると拡張機能の検索・管理画面になります。
検索部分にcordova toolsと入力して、同名のエクステンションをインストール・再起動すれば完了です。
Node.js
node.jsとは、javascriptで動くサーバーを作ることのできるなにかです。あまり深くは理解していないですし、理解する必要も今回はないです。('ω')
以下のURLから最新版をダウンロードしてインストールしてください。LTS版のほうが安定していますがどちらでも構いません！
node.jsをインストールすると、一緒にnpmというコマンドもインストールされます。これはnode.jsで使用できるモジュールを管理するためのものです。Linuxを触ったことのある方であればapt-getやyumコマンドのようなものを想像すれば理解しやすいかと思います。
これでコマンドプロンプトからnode, npmコマンドが実行できるようになりました。
Cordova
Cordovaはいわゆるフレームワークと呼ばれるもので、こいつのおかげでHTML/CSS/JSだけでAndroidで動くいい感じのアプリを作ることができます。
以下のnpmコマンドを実行するとインストールできます。Windowsの場合コマンドプロンプトを起動してそこから実行します。
コマンドプロンプトの簡単な起動の仕方は、[Windowsキー] + Rで、出てきた入力ボックスにcmdと入力すると出てきます。ipconfigとか入力してハッカーになった気分になれるあれですね(笑)
$ npm install -g cordova
-gオプションをつけることで、グローバルインストールとなり、コマンドプロンプトからパスを指定しなくても実行できるようになります。
後々-gをつけないインストールも出てきますがとりあえずは無視...
これでコマンドプロンプトからcordovaコマンドが使えるようになります。
とりあえずこれで開発に必要なツールは一通りそろいました！！
