読者です 読者をやめる 読者になる 読者になる

Macでアプリ開発ブログ

MacによるiPhone&Androidアプリの開発・作成に関するブログ。Macの設定からアプリ開発環境構築、おすすめのツールなど

Ionicのフォルダ構成

スポンサード リンク

前回は「Ionicの使い方(入門編)」と題して、Ionicのインストールからエミュレータ起動までを行いました。

mac-docs.hatenablog.com

今回はIonicのインストール後、デフォルトの状態のフォルダ構成を見ていきたいと思います。

/hooks/

/hooks/には任意のタイミングで実行させたいscriptを格納します。

例えば「ビルド後に特定のファイルを消したい」という場合、ビルド後に毎回手動で特定のファイルを削除するのは大変ですし、ミスも発生しやすくなります。

そこで、/hooks/の中に/after_build/(ビルド後)というフォルダを作ります。そして/after_build/内に特定のファイルを削除するためのscriptを置けば、ビルド後に自動でそのscriptが実行されます。

詳細に関しては/hooks/README.mdに記載されています。

/platforms/

/platforms/には各プラットフォームごとにビルドされたファイルが格納されます。

最終的にはこの中のファイルをパッケージ化してアプリを各ストア(AppStoreやGooglePlay)にアップロードすることになります。

/plugins/

/plugins/にはCordovaやIonicのプラグインが格納されます。基本的にはこの中のファイルを直接変更することはないと思います。

なお、/plugins/.gitignoreでgitの除外フォルダに指定されています。gitでcloneした後に/plugins/の中身をインストールしたい場合はionic state restoreを実行することで、package.jsonにあるcordovaPluginsがインストールされます。

/scss/

/scss/にはIonicのsassのベース(ionic.app.scss)が格納されています。

/www/

/www/にはアプリを作成するためのHTML、CSS、JavaScriptを格納します。Ionicでアプリを開発する上で、メインとなるディレクトリになります。

.bowerrc

.bowerrcではbower実行時のインストール先ディレクトリを指定します。デフォルトでは/www/lib/が指定されています。特に変更することはないと思います。

. editorconfig

.editorconfigに対応したエディタを利用する場合にコーディング規約を記述します。

.gitignore

.gitignoreではgitの除外フォルダ&ファイルを指定します。

デフォルトでは、

node_modules/
platforms/
plugins/

となっています。

bower.json

bower.jsonではbowerでインストールするパッケージを指定します。

Ionicの更新(ionic lib update)を実行すると、このbower.jsonを元に/www/lib/ionic/の中身が更新されます。

config.xml

config.xmlはアプリの設定用ファイルです。アプリ名や利用するCordovaのプラグインを記述します。

gulpfile.js

gulpfile.jsはGulpの実行ファイルです。

ionic.project

ionic.projectはIonicの設定ファイルです。ionic serve時に実行したいGulpのタスクや、LiveReloadで監視するファイルを指定します。

package.json

package.jsonはnpmでインストールするパッケージを指定するためのファイルです。