静的リソースの読み込み方

Winter'15時点でできる静的リソースの読み込み方を説明します。12/4のa_kurataniさんの記事にもろかぶりしました・・・。3/4くらい同じです。いや、4/5ほど・・・。

0.準備

以下の構成で静的リソースを登録します。

静的リソース

静的リソース名：adventResource
以下の構成でSalesforceにアップロードします。

staticResource
	-js
		-jquery-2.1.1.min.js
	-style
		-bootstrap.min.css

Jquery BootStrapSF1

1.appで静的リソースを読み込む場合

ソースの構成

・AdventCalendarApp.app

通常通りのリソースの読込です。現時点では$Resourceは使えません。

AdventCalendarApp.app

<aura:application>
    <link href="/resource/adventResource/staticResource/style/bootstrap.min.css " rel="stylesheet"/>
    <script src="/resource/adventResource/staticResource/js/jquery-2.1.1.min.js"/>
</aura:application>

2.cmpで静的リソースを読み込む場合（これだとうまく動かない）

素直にcmpに、<script>タグを記述すると・・・
保存時にエラーが発生して、スクリプトタグが埋め込めない。

FIELD_INTEGITY_EXCEPTION
Failed to save undefined: markup://TLP:AdventCalendarCmp:3,83: script tags only allowed in templates:

3.上記2のWorkAround

上記2の方法だと、エラーが発生してjavascriptが読み込めないので、コsンポーネントのinit時に、動的に<script>タグを埋込み、埋め込みが完了後、イベントを発生させる。

ソースの構成

・AdventCalendarApp.app
・AdventCalendarCmp.cmp
・AdventCalendarCmpController.js
・JsLoaded.evt

AdventCalendarCmp.cmp

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="TLP:JsLoaded" action="{!c.doOnload}"/>
	<link href="/resource/adventResource/staticResource/style/bootstrap.min.css " rel="stylesheet"/>
</aura:component>

JsLoaded.evt

<aura:event type="APPLICATION" description="This event is fired when Jquery is loaded" />

AdventCalendarCmpController.js

({
	doInit : function(component, event, helper) {
        	var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.src = '/resource/adventResource/staticResource/js/jquery-2.1.1.min.js';
            script.type = 'text/javascript';
            script.id = "script_" + component.getGlobalId();
            script.onload = function scriptLoaded(){
                var evt = $A.get("e.TLP:JsLoaded");
		        evt.fire();
            };
        head.appendChild(script);
	},
    
    doOnload : function(component, event, helper){
        $(document).ready(function(){
        	console.log('Jqueryが読み込まれました');    
        });
    }
})

これでコンポーネントでjavascriptを読み込むことが可能になるため、Salesforce1アプリケーションに、コンポーネントを組み込むことができるようになります。
（かなり強引なやり方なので、今後にSalesforceの機能追加に期待です。）

注意点）１つのアプリケーション内で複数のコンポーネントを読み込む際には、重複してリソースを読み込まないように注意すること。

参考）より高度なRequireJsを使った、静的リソースの取得にはこちらもどうぞ
Appirioテックブログ RequireJSを用いたLightningコンポーネントの読み込み
Appirioテックブログ JavaScriptエンジニアのためのLightning コンポーネント開発ガイド