JS/CSS コンポーネント

JS/CSS コンポーネントとは、プロジェクトに追加する JavaScript と CSS ライブラリー群 ( jQuery、jQuery mobile、Onsen UI など ) を指します。

JavaScript/CSS ライブラリーを追加する場合、次の手順に従います。

1. Monaca クラウド IDEから 設定 → JS/CSS コンポーネントの追加と削除 を選択します。

2. JS/CSS コンポーネントの追加と削除 画面が表示されます。画面上では、複数のライブラリーが一覧化されています。必要なライブラリーを見つけられない場合には、検索ボックスを使用します。

3. Angularを検索する場合、検索 ボタンをクリックすると、一致するライブラリのリストが表示されます。

4. 追加 ボタンをクリックし、対象のライブラリを追加します。 次に、プロジェクトに追加するライブラリのバージョンを選択できます。

5. 追加するライブラリのファイルを選択し、インストール をクリックします。

6. 追加したライブラリーが一覧上に表示されていることを確認します。ライブラリのバージョンと選択したファイルを変更する場合には、設定 をクリックします。

ライブラリーを追加すると、そのファイルは、www/components フォルダーに追加されます。また、次の JavaScript ファイルと CSS ファイルも自動的に更新されます。プロジェクトに追加したライブラリーの種類にかかわらず、こちらのファイルは、常にこのフォルダー内に置かれています。

ファイル名

説明

loader.js

Monaca が JavaScript ライブラリを読み込むために使用する JavaScript ファイル

loader.css

Monaca が CSS ライブラリを読み込むために使用するスタイルシートファイル

HTML ファイルから、上記の 2 つのファイルを参照するだけで、ライブラリーの読み込みを行うことができます。HTML ファイルの <head> タグ内で、次の記述を行うことで、ライブラリーを使用することができます。

<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">

Cordova Loader (monaca-cordova-loader)

Cordova Loader (monaca-cordova-loader)は、Monacaプロジェクトにおいて、アプリケーション起動時にCordova APIを利用するために必要なcordova.jsを読み込むためのライブラリです。

Cordovaは、HTML、CSS、JavaScriptを用いてクロスプラットフォームのモバイルアプリケーションを開発するためのフレームワークです。MonacaプロジェクトでCordovaの機能を利用するには、以下のいずれかの方法でcordova.jsを読み込む必要があります。

  1. Cordova Loaderを利用する

  2. プロジェクトのエントリーファイル(通常はindex.html)内でcordova.js<script>タグで直接読み込む

Cordova Loaderを利用することで、cordova.jsの読み込みを簡単に行うことができます。この方法では、Monacaが提供するCordova Loaderライブラリをプロジェクトに追加するだけで、自動的にcordova.jsが読み込まれます。

一方、<script>タグを使って直接cordova.jsを読み込む場合は、プロジェクトのエントリーファイルに以下のようなコードを追加する必要があります。

<script src="cordova.js"></script>

Monaca Core Utility (monaca-core-utils)

Monaca Core Utility (monaca-core-utils)は、様々なユーティリティ機能を提供するライブラリです。機能の詳細はこちらをご確認ください。

最終更新