JS/CSSコンポーネントとloader.jsについて
新しいJS/CSSコンポーネント
6/28に行われたMonacaのアップデートにより、以前は
<script src="plugins/plugin-loader.js"></script>
<link rel="stylesheet" href="plugins/plugin-loader.css">
のように記述してきた部分が
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
のように変わりました。
これは、単純に記載方法が変更されたのではなく、仕組みそのものが大幅に変更されたためです。
アップデート前のplugin-loader.jsも、アップデート後のloader.jsも、どちらも、IDEで設定したプラグイン・JS/CSSコンポーネントのJavaScriptファイルを、一度に読み込むという機能を持っています。
その違いについて、説明させていただきます。
プラグインとJS/CSSコンポーネントの機能の分離
まず、6/28のリニューアルに伴い、これまで「プラグイン設定」として用意されていた機能が、「JS/CSSコンポーネントの追加と削除」「Cordovaプラグインの管理」の２つの機能に分離しました。
「JS/CSSコンポーネント」とは、JavascriptやCSSだけで記述されたコンポーネント（モジュール）で、例えば、jQueryやOnsen UIなどです。以前は、予め用意された10数個プラグインからしか選べませんでしたが、新しい「JS/CSSコンポーネント」では、後述するように、Bowerリポジトリに登録されているJavascript/CSSを自由に組み込むことが出来ます。
「Cordovaプラグイン」の方は、BarcodeScannerやChildBrowser、あるいはそれ以外のカスタムCordovaプラグインなど、HTML5だけでは実現出来ない機能を、ネイティブコード(iOSならObjective-C,AndroidならJava)で作り、ハイブリッドアプリから利用出来るようにしたものです。こちらは、現在のところ以前と同様に最初から用意されている8個から選ぶしかありませんが、（Professionalプラン以上であればカスタムプラグインを導入することが出来ます）今後は、より便利にしていく予定です。
Bowerの導入
JS/CSSコンポーネントの追加と削除では、Bowerフロントエンドパッケージマネージャと連動するようになりました。
Bowerとは、Twitter社が作ったJavaScriptやCSSモジュールのパッケージマネージャです。node.jsでいうnpm、RHELでいうyumと同様の機能を持っています。これにより、MonacaはBowerリポジトリに登録されている大量のモジュールの中から、自由に好きなモジュールを選んで組み込むことが出来るようになりました。
この組み込みを簡単にする新しい仕組みが、loader.jsになり ます。
自動読み込みと手動読み込み
今までのplugin-loader.jsは、設定したプラグインのjsファイルをすべて自動で組み込むようになっていました。
一方、loader.jsは「IDEでローダー設定したファイルだけを読み込む」ようになっています。
Monaca用のいくつかのJS/CSSコンポーネント、例えば、jQuery (Monaca Version)の場合は、IDEから設定を行うと、自動的にloader.jsにも組み込まれます。
しかしながら、BowerライブラリからjQueryを組み込む場合は、loader.jsに入れるかどうかは、ユーザーが自分で決定することが出来ます。操作の流れとしては、まず、JS/CSS Componentsの画面の検索ボックスからjqueryで検索を行い、検索結果から組み込みたいコンポーネントを選択します。
次にバージョンを設定し、loader.jsに組み込むかどうかを設定します。
loader.jsに組み込んだ場合は、index.htmlファイル上は、何もしなくてもすでにjqueryが使えるようになっています。
一方、loader.jsに組み込まない場合は、index.htmlファイル上で自分で
<script src="components/jquery/dist/jquery.js"></script>
のような記述をする必要があります。
基本的にはどちらの書き方でも良いのですが、利用するjavascriptが変更になる度に、scriptタグをたくさん記述するのは冗長なため、loader.jsを利用した方が簡単です。
新しいMonacaでは、Bowerに登録されているJS/CSSコンポーネントを自由に組み込んで使えるようになったため、中には、loader.jsに組み込んでしまうと、他のjsコードと競合してうまく動作しないものもあるかも知れません。(例えば、内部でstrict宣言をしているなど) その場合は、loader.jsを使わずに、scriptタグを記述して読み込むようにして下さい。
いずれにしても、loader.jsを使う ／使わないことをユーザー側で選択出来るようになったので、開発初期はloader.jsで素早く作り、実装後半のチューニング的な段階になったら、きめ細かくscriptタグでの記述に変える、といったことが出来ます。
ユーザーによる編集が可能
また、loader.jsは、plugin-loader.jsと違って、中身を修正出来ます。削除も出来ます。
初心者にはお勧めではありませんが、loader.jsは、IDEから直接編集が可能です。
このため、デバッグ時にJS/CSSコンポーネント内で何か起こっているけど、分からないのでログを出したい、、といった場合、直接loader.jsを変更して、対応することが可能です。
例えば、jqueryのajaxで、リクエストヘッダーを生成する部分
// Caches the header
setRequestHeader: function( name, value ) {
var lname = name.toLowerCase();
if ( !state ) {
name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
requestHeaders[ name ] = value;
}
return this;
},
に、ログ出力を組み込んで
// Caches the header
setRequestHeader: function( name, value ) {
console.log( name + ":" + value ); // For Debug
var lname = name.toLowerCase();
if ( !state ) {
name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
requestHeaders[ name ] = value;
}
return this;
},
のようにすれば、ajaxがうまく動作していないときに、ヘッダ情報を確認することが出来ます。
ただし、IDEからローダーの再設定をすると、編集した箇所は元に戻ってしまうので、loader.jsの修正は、あくまでデバッグコードなど一時的な変更のみにとどめておいて下さい。また、loader.jsが壊れてしまうと、アプリが正常に動作しなくなりますので、編集には十分注意して下さい。
上記のようにjQueryの部分だけを変更した場合、JS/CSSコンポーネントの設定から、jQueryの部分だけ再度、ローダー設定を行えば、loader.jsはもとの状態に戻ります。
loader.jsを編集したことで、うまく動作しなくなってしまって戻せなくなってしまった場合は、loader.jsを削除して、再度、作り直す必要があります。まず、IDEのファイルツリーから、直接loader.jsを削除して下さい。その後、JS/CSSコンポーネントの追加と削除から、必要なコンポーネントを全て選択して「ローダー設定」をやり直して下さい。
Monaca IDEは、loader.jsの中身を解析して、現在ローダー設定されているJS/CSSコンポーネントを判定しています。
loader.jsを削除した場合、JS/CSSコンポーネントから設定を確認すると、すべてのローダー設定が空になっているのが分かります。
自動でローダーに組み込まれるMonaca用のコンポーネントもすべてなくなった状態なので、設定画面からすべてのJS/CSSコンポーネントを再設定して下さい。特にCordova (PhoneGap) LoaderとMonaca Core Utilityは、必須なので、かならず設定し直して下さい。
loader.jsには、システム側が付与した以下のようなコメント文がありますが、これは削除しないで下さい。ローダー設定されているコンポーネントの判別に利用しています。
/*** <Start:monaca-onsenui> ***/
/*** <Start:monaca-onsenui LoadJs:"components/monaca-onsenui/js/onsenui_all.js"> ***/
...
/*** <End:monaca-onsenui LoadJs:"components/monaca-onsenui/js/onsenui_all.js"> ***/
/*** <End:monaca-onsenui> ***/
まとめ
loader.jsの導入は、BowerによるいろいろなJS/CSSコンポーネントをMonacaで利用出来るようにするために必要な変更でした。これは、この後、Cordova 3.5への対応にもつながっています。
Monacaは、次のリリースでいよいよCordova 3.5への対応を予定しています。楽しみにお待ち下さい。
