スポンサー リンク
スポンサー リンク


ネイティブアプリではなく、Webアプリを開発するためのフレームワークです。

（ネイティブアプリについては、AIR・PhoneGapやOpenCVのところではJava + Cでやる予定）
ここでは、２つご紹介します。

Sencha Touch

jQuery Mobile

付録
  Sencha TouchのページにGoogle AdSenseを表示する

動作確認用実機：Experia acro SO-02C(docomo)
スペック



トップページ| サイトマップ|

Sencha Touch

●Sencha Touchのインストール


   まず、Webサーバーを調達
     レンタルするなり、自前で立てるなりしてご用意ください。

   次に、Sencha Touchをこちらからダウンロード
   注！商用版ではなく、オープンソース版の方をダウンロード
   ダウンロードして解凍したフォルダーを、例えば「sencha-touch」というふうに改名して、
   サーバーのルートにコピー。

   サンプルは、sencha-touch/examples/index.htmlで観ることができますが、
   その際は、Webkitブラウザー（Google Chrome、Safariなど）でご覧ください。
   IEなどは、Webkitのレンダリングエンジンに対応していないので、見ることができません。


   ルートに開発プロジェクト用の雛形フォルダーを作って、そこにベースとなる
   HTMLファイル(index.html)を作っておきます。これをコピーして使いまわします。
   Sencha Touchを使う場合のソースコードの雛形はこんな感じ。このコードはデバッグ用。 

<!DOCTYLE HTML>

<html>
<head>
<title>
    Sencha Touch Base
</title>

<link rel="stylesheet" type="text/css" href="../sencha-touch/resources/css/sencha-touch.css" />
<script type="text/javascript" src="../sencha-touch/sencha-touch-debug.js"></script>

</head>

<body>

</body>
</html>


デプロイして使う場合は、sencha-touch-debug.jsをsencha-touch.jsに変更。





●動作確認



   この雛形を使って、Sencha Touch風にHelloWorldしてみましょう。Javascriptを追加します。
   こんな感じ。 

<script type="text/javascript">
    Ext.setup( {
        onReady: function() {
            new Ext.Panel({
                fullscreen: true,
                html: "Sencha Touch サンプル"
            });
        }
    });
</script>
   こういう風になります。





   で、Google Mapsを表示するサンプルを作ってみました。

   HTML5のgetLocationを使っています、マーカーと吹き出しも出してみました。

   スマートフォンの場合は、下のＱＲコードを読んでください。

   ＰＣの場合は、リンクをクリック（ブラウザーは、ChromeやSafariのようなWebkitブラウザー
   を使ってください）。

QRcode Google Maps by Sencha Touch
   こんな感じ。

   赤いマーカーを軽くタップすると吹き出しが表示されます。

   ただし、タッチが非常に「微妙」ですのでご注意ください。





●エミュレーターを使ってみる


   Android SDKをインストール

   under construction

TOP

jQuery Mobile



●ダウンロードしたものをご自分のサイトに置いて、そこから読み込む場合

    対象ファイルは以下の２つ
      jQuery Script    jQuery Mobile



●Content Delivery Networkから直接読み込む場合
   ソースはこんな感じ。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
    jQuery Mobile Sample
</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>
<body>


</body>
</html>


   under construction

TOP

Sencha TouchのページにGoogle AdSenseを表示する



ここでは、AdSenseとして、モバイルコンテンツ向けのコードを使用します(AdMobじゃありません)。

body要素に以下のコードを貼り付ける

xxやyyの部分は、自前のものを使ってください 

<div id="bottom" style="display:none">
    <div id="adsense">
        <script type="text/javascript">
        window.googleAfmcRequest = {
        client: 'xx-xx-xx-xxxxxxxxx',
        format: '320x50_mb',
        output: 'html',
        slotname: 'yyyyyyy',
        };
        </script>
        <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
    </div>
</div>




Sencha　TouchのPanelに以下のコードを追加 

dockedItems : [
                {
                     xtype: 'component',
                     contentEl : 'adsense',
                     dock : 'bottom',
                     height: 50
                 }   
                ]



これで、ページの一番下にAdSenseが表示されます

TOP



スポンサー リンク