#MobileMondays その9 headタグ内を変えられなくてもdojox.mobile

今日はこれまでと直接関係ないTipsをご紹介

Dojoを使うときの一般的なお作法として、dojo.jsをhtmlコードのheadタグ内で読み込ませて云々・・・ というのがありますが、それができない環境やシーンがないわけではありません。ブログのエントリーで使いたいけどテンプレートはいじれないなどの制約がある時などがまさにそれです。そんな時でも、もしもbody内のどこかでscriptタグ埋め込むことが許されているならばdojoをつかうことができます。以下、そのようにしてdojox.mobileを使う例です。

<HTML>
<HEAD>
<TITLE>テスト</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
(function() {
 djConfig={
 //↓大事な一行
 afterOnLoad: true,
 
 require:['dojox.mobile.parser','dojox.mobile'],
 addOnLoad: function() {
 console.log("addOnLoad");
 dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
 
 //dojoをロードした後に、dojox.mobileを使って書いたコンテンツを明示的パースさせる
 //処理したいコンテンツのある場所にラベル(id)をつけ、それをここで指定しているので、
 //このラベルが一致しないと動かない
 dojox.mobile.parser.parse(dojo.byId("contentroot"),null);
 }
 };
 
 //dojoの読み込み:
 //ここでは外部(GoogleのCDN)でホストされているdojo1.5のXD(クロスドメイン版)をロード
 var e=document.createElement("script");
 e.type="text/javascript";
 e.src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js";
 document.getElementsByTagName("head")[0].appendChild(e);
 
 

 //テーマのCSSの読み込み:
 //ブラウザのユーザーエージェントを判別してロードすることで
 //AndroidであればAndroid用、それ以外はiPhone用のテーマとしている

 var agent=navigator.userAgent;

 var e2=document.createElement("link");
 e2.rel="stylesheet";
 if(agent.indexOf('Android') != -1){
 e2.href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/mobile/themes/android/android.css";
 }else{
 e2.href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/mobile/themes/iphone/iphone.css";
 }
 document.getElementsByTagName("head")[0].appendChild(e2);



 //以下2つはおまけ: ホーム画面にショートカットを作成したときのアイコンの指定
 
 var e3=document.createElement("link");
 e3.rel="apple-touch-icon";
 e3.href="http://dojoxmobile.appspot.com/dojo/dojox/mobile/tests/images/icon-1.png";
 document.getElementsByTagName("head")[0].appendChild(e3);

 var e4=document.createElement("link");
 e4.rel="icon";
 e4.type="image/png";
 e4.href="http://dojoxmobile.appspot.com/dojo/dojox/mobile/tests/images/icon-1.png";
 document.getElementsByTagName("head")[0].appendChild(e4);

 

})();
</script>
<!-- 以下のcontentrootというidのdiv内のdojo/dojox.mobileを使ったコードを入れる-->
<div id="contentroot">
 <!-- ここでは試しにdojox.mobile付属のtest_iPhone-ResultList.htmlの内容をコピペ-->
 <div id="foo" dojoType="dojox.mobile.View" selected="true">
 <h1 dojoType="dojox.mobile.Heading">Search Result</h1>
 <ul dojoType="dojox.mobile.RoundRectList">
 <li dojoType="dojox.mobile.ListItem" style="font-size:10px">
 1. <a href="#">Dojo: Traditional Karate-do Spirit</a><br>
 Sarah Connor Hardcover<br>
 Eligible for FREE Super Saver Shipping<br>
 <font color="red">$14.50 (50%)</font> In Stock<br>
 # (531)
 </li>
 <li dojoType="dojox.mobile.ListItem" style="font-size:10px">
 2. <a href="#">Japanese Martial Arts Dojo</a><br>
 Martin Parker Hardcover<br>
 <font color="red">$14.00 (60%)</font> In Stock<br>
 # (173)
 </li>
 <li dojoType="dojox.mobile.ListItem" style="font-size:10px">
 3. <a href="#">Total Solar Eclipse</a><br>
 Steven Young Hardcover<br>
 Get it by Mar. 2 if you order in the next <font color="green"><b>16 hours</b></font><br>
 Eligible for FREE Super Saver Shipping<br>
 <font color="red">$9.50 (62%)</font> In Stock<br>
 # (1199)
 </li>
 <li dojoType="dojox.mobile.ListItem" style="font-size:10px">
 4. <a href="#">The History of Java Coffee</a><br>
 Marco Rodriguez Hardcover<br>
 <font color="blue">Not Available</font>
 </li>
 <li dojoType="dojox.mobile.ListItem" style="font-size:10px">
 5. <a href="#">The Principles of Spider's Web</a><br>
 Melissa Morgan Hardcover<br>
 Eligible for FREE Super Saver Shipping<br>
 <font color="red">$12.00 (60%)</font> In Stock<br>
 # (1847)
 </li>
 </ul>
 </div>
</div>
</BODY>
</HTML>

是非お試しください


シリーズの過去の投稿

naoyam について

Used to be living in the edge of Tokyo, now in Singapore. Dad of two girls. Likes skiing, diving. (though not doing them often enough these years...)
カテゴリー: mobile タグ: , , , パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中