Sencha Touch を使ってモバイル Web アプリケーションを作成する

WebKit ブラウザーのための HTML5 モバイル JavaScript フレームワーク

Sencha Touch はモバイル Web アプリケーション・フレームワークであり、HTML5、CSS3、JavaScript 言語を使って構築されています。この記事では、皆さんの現在の Web 開発スキルをモバイル Web 開発に活用する方法を学びます。Sencha Touch をダウンロードしてセットアップし、サンプル・アプリケーションを使って Sencha Touch の基本を詳しく探ることで、Sencha Touch フレームワークを使って作業を開始するために必要なすべてを学びましょう。

Brice Mason, Senior Web Developer, Equip For Quality

Brice MasonBrice Mason はニューヨーク州アップステート地域に住んでおり、夫でもあり、父でもあります。彼は EQUIP For Quality の開発者でもあり、そこで長期療養医療業界用の次世代ヘルスケア分析ソフトウェアの開発チームに所属しています。彼は http://www.bricemason.com という個人的なサイトを持っています。



2011年 2月 22日

概要

ソフトウェア開発の世界では、モバイル・アプリケーション開発、そして HTML5 標準に基づく Web 開発という 2 つのトレンドがますます重要になりつつあります。どちらのタイプの開発も、学習曲線は急峻です。ネイティブ・モバイル・アプリケーションを開発する場合、特定のプラットフォームに関する知識とスキルが要求される場合がよくあります (例えば iPhone の場合には Objective-C が、Android の場合には Java™ が必要ですが、これらは数あるプラットフォームのなかの代表的な 2 つにすぎません)。最近では HTML5 による開発が増えていますが、それは標準に基づいているためです。ベンダーは、こうした新しく登場する仕様に対応して、これらの仕様の採用と仕様への準拠を急速に進めていますが、HTML5 はまだまだ未完成です。

最近リリースされた Sencha Touch 1.0 では、モバイル・アプリケーション開発と HTML5 Web 開発という 2 つの最先端の世界を融合し、モバイル Web アプリケーション構築のための単純で利用しやすいフレームワークを構成しています。この記事では、Sencha Touch フレームワークを使って作業を開始するために必要なすべてを学びます。


Sencha Touch

モバイル・アプリケーションの作成方法の習得は簡単ではありません。Web 開発者の観点から学ぶ場合にはなおさらです。プラットフォームの選択肢は広く、学ばなければならない技術にはさまざまなものがあります。HTML5 のサポートは急速に普及しつつありますが、まだ複雑な Web アプリケーションに使用できるほど完全ではなく、特に業務アプリケーションにはとても使用できる状態ではありません。

よく使われる頭文字語

>Ajax: Asynchronous JavaScript + XML
API: Application Programming Interface
CSS: Cascading Style Sheets
HTML: HyperText Markup Language
JSON: JavaScript Object Notation
SDK: Software Development Kit
UI: User Interface

Sencha Touch は HTML5 開発とモバイル Web アプリケーション開発のリッチなプラットフォームを組み合わせ、実用的なメカニズムを構成しています。Sencha Touch フレームワークは開発者が使いやすいように作られており、使い方は Ext JS JavaScript フレームワークと似ています。従って JavaScript の使用経験がそれなりに、もしくは豊富にある人にとって、Sencha Touch は取りかかりやすいフレームワークです。開発者として JavaScript および CSS のスキルを既に持っている人であれば、Sencha Touch を使うことでモバイル・アプリケーション開発者に早変わりすることができます。

Sencha は商用製品を中心に提供している企業ですが、オープンソース・ソフトウェアもサポートしています。Sencha Touch 1.0 は個人で使用する場合も、商用で使用する場合も無料です。

プラットフォームのサポート

Sencha Touch は現在、よく使われている Apple iOS プラットフォームや Google Android プラットフォームなどの WebKit ブラウザーに対応しています。しかし、この程度のサポートでは不十分であり、真剣な検討対象となるためには Sencha Touch がすべてのプラットフォームをサポートする必要がある、と言う人がいるかもしれません。モバイル Web 開発にフレームワークを採用する際、賢明な選択を行うためには対応しているプラットフォームの豊富さと、機能の豊富さという 2 点に注目する必要があります。望ましいフレームワークとは、開発者にとって使いやすい形で HTML5/CSS3 の大半を抽象化しており、広範なプラットフォームおよび機能をサポートしているフレームワークです。この点で、Sencha は賢明なことに、最もよく使われる 2 つのプラットフォームをサポートしており、この 2 つのプラットフォームのリソースを活用することによってリッチで使いやすい機能を開発者に提供しています。

必要な予備知識

Sencha Touch を使い始めるために必要なものは、JavaScript 言語と CSS に関する実用的な知識のみです。先ほど触れたように、Sencha Touch フレームワークでは、通常はゼロの状態から組み立てが必要な多くの機能やスタイルが抽象化されています。

Sencha Touch を掘り下げて、独自のカスタム・コンポーネントを作成したり、独自のブランド用にスタイルを変更したりしたい場合には、HTML5 と CSS3 に関する深い知識が必要です。詳細については「参考文献」セクションを参照してください。

最初のステップ

Sencha Touch を使い始めるための手順は以下のとおりです。

  1. Sencha のサイトから Sencha Touch フレームワークをダウンロードします (「参考文献」を参照)。
  2. ダウンロードした内容を、開発用の Web サイトのルートに解凍します。

    解凍されたフォルダーの名前を sencha-touch などの汎用的な名前に変更することを検討してください。そうすれば、この同じフォルダー名を Sencha Touch フレームワークの今後のバージョンでも使用することができ、そのフォルダー名を参照する他のファイルも変更する必要がありません。

  3. Google Chrome などの WebKit ブラウザーを使用して、http://localhost/sencha-touch/examples/ にあるサンプル・ページを開きます。皆さんの環境では少し画面が異なるかもしれませんが、図 1 のような画面が表示されるはずです。
図 1. Sencha Touch の例
Sencha Touch のサンプル・ページのスクリーンショット

Sencha Touch フレームワークの機能を調べるために、以下のようにして Sencha Touch アプリケーションを作成します。

  1. index.html という新しい HTML ファイルをサイトのルートに作成します。このファイルのソース・コードをリスト 1 に示します。
    リスト 1. サンプルの HTML5 文書
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Touch Test</title>
    </head>
    
    <body>
    </body>
    </html>

    この 1 つのファイルを作成したら、もう皆さんは正式な HTML5 開発者です。先頭にある <!DOCTYPE HTML> という doctype が重要です。この <!DOCTYPE HTML> により、この文書は必ず HTML5 として解釈されます。

  2. リスト 1 のコードをリスト 2 のように変更します。
    リスト 2. Sencha Touch のスクリプトとスタイルをインストールする
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Touch Test</title>
    
    <!-- sencha touch css -->
    <link rel="stylesheet" type="text/css"
               href="sencha-touch/resources/css/sencha-touch-debug.css" />
    
    <!-- sencha touch javascript -->
    <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
    
    </head>
    
    <body>
    </body>
    </html>

    上記のコードにより、Sencha Touch フレームワーク用の CSS ファイルと JavaScript ファイルが追加されます。ここではデバッグ用の CSS ファイルと JavaScript ファイルを読み込んでいますが、開発時にはこの方法を採ることをお薦めします。こうすることで適切なエラー・メッセージが得られるからです。デプロイする際には、単純にデバッグ用のファイルを縮小化したファイルで置き換えます。また、独自のカスタム CSS ファイルと JavaScript ファイルを追加してアプリケーションを作成することもできます。

  3. 例を簡単にするために、JavaScript コードを多少追加します。まず、リスト 3 のようにコードを変更します。
    リスト 3. 最も単純な Sencha Touch アプリケーション
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Touch Test</title>
    
    <!-- sencha touch css -->
    <link rel="stylesheet" type="text/css"
               href="sencha-touch/resources/css/sencha-touch-debug.css" />
    
    <!-- sencha touch javascript -->
    <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
    
    <!-- application script -->
    <script type="text/javascript">
        Ext.setup( {
            onReady: function() {
                // create the root panel
                new Ext.Panel({
                    fullscreen: true,
                    html: "Sencha Touch is ready!"
                });
            }
        });
    </script>
    
    </head>
    
    <body>
    </body>
    </html>
  4. このページを Google Chrome で実行すると、図 2 のようなものが表示されるはずです。
    図 2. 最も単純な Sencha Touch アプリケーション
    リスト 3 のコードを実行した出力として、「Sencha Touch is ready!」と表示されています。

Ext.setup

Ext.setup 関数には他にも便利な構成オプションがあります。詳細については、インストールした Sencha Touch の中にある docs フォルダー内の API ドキュメントを見てください。

リスト 3 のコードには JavaScript のコード・ブロックが追加されています。リスト 3 のコードは、Sencha Touch フレームワークの機能を調べるために、記事を通じて繰り返し使われます。Ext JS を使った経験のある人には、このコードはおなじみかもしれません。Ext.setup 関数は Sencha Touch アプリケーションを作成する場合の出発点です。この関数は、構成オプションがいくつも設定されたオブジェクトを受け付けます。この例では onReady オプションを使用します。onReady オプションは引数として、文書の準備ができたかどうか評価する関数をとります。onReady 関数によってアプリケーションのルート・パネルを作成します。fullscreen オプションと html オプションを使用することで、ルート・パネルには利用可能なすべてのスペースが使用され、単純なストリングが含まれます。

Android エミュレーターでアプリケーションを実行する

ここまでは Google Chrome ブラウザーを使用して開発の手順を説明してきました。Google Chrome を使用したのは妥当な選択ですが、特に JavaScript や CSS のバグを扱おうとする場合に適したブラウザーです。今度はデバイス・エミュレーターを使ってアプリケーションのテストを行います。このセクションでは Android エミュレーターのインストール方法を説明します。

  1. 皆さんのオペレーティング・システム・プラットフォーム用の最新の Android SDK をダウンロードし、ディスク上に解凍します。

    Android SDK には、エミュレーターを立ち上げて実行可能な状態にする上で必要なユーティリティーがすべて含まれていますが、さらにいくつかのステップが必要です。

  2. Android エミュレーターでは、AVD (Android Virtual Device) を作成する必要があります。AVD は基本的に、Android を搭載した実際の機器をモデリングするための構成手段です。AVD を作成するためには、Android SDK の tools フォルダーで android ユーティリティーを実行します。

    Android SDK and AVD Manager が開き、図 3 のように表示されるはずです。

    図 3. Android SDK and AVD Manager
    Android SDK and AVD Manager のスクリーンショット。Android SDK and AVD Manager はアドオン・パッケージのインストールや仮想デバイスの管理に使用されます。

この時点で、「New… (新規…)」ボタンを使って新しい仮想デバイスを作成しようとすると、「Target (ターゲット)」というラベルの付いた重要なフィールドが無効になっていることに気付きます。新しい仮想デバイスを作成する前に、アドオンを SDK にダウンロードする必要があります。

  1. 左側のメニューから「Available Packages (利用可能なパッケージ)」を選択します。
  2. https://dl-ssl.google.com/android/repository/repository.xml」というラベルの付いたサイト名 (もしくは「Android Repository」) を展開すると、インストール可能なパッケージの一覧が表示されます。
  3. 最新の SDK プラットフォームを選択し (図 4)、「Install Selected (選択したものをインストール)」をクリックします。
    図 4. Android SDK で利用可能なパッケージ
    Android SDK で利用可能なパッケージの一覧が表示されています。これらのパッケージは Android SDK and AVD Manager でインストールすることができます。
  4. 次のウィンドウで「Insutall (インストール)」ボタンをクリックし、インストールに同意します。
  5. ダウンロードとインストールが完了したら、「Close (閉じる)」をクリックします。

これで、これから皆さんが作成する任意の AVD のターゲットとなり得るものをインストールできました。このターゲットは Android バージョン 2.2 を実行する Android 機器です。次のステップとして AVD を作成します。

  1. AVD Manager の左側のメニューから「Virtual Devices (仮想機器)」を選択し、「New… (新規…)」をクリックします。
  2. Name (名前)」に「sencha-avd」と入力し、上記でインストールした Android 2.2 ターゲットを「Target (ターゲット)」として選択します。他はすべてデフォルトのままにしておきます。
  3. Create AVD (AVD を作成)」をクリックします。

    確認用のウィンドウで「OK」をクリックしたら、AVD Manager を閉じます。

これで、エミュレーターの実行に必要なすべてのものがローカル開発環境に用意できました。エミュレーターを実行するには、ターミナル・ウィンドウを開き、Android SDK をインストールした場所のルートにディレクトリーを変更し、リスト 4 のコマンドを入力します。

リスト 4. Android エミュレーターを呼び出す
tools/emulator -avd sencha-avd

Android エミュレーターの Web ブラウザーを使って http://localhost/ にあるテスト・アプリケーションまでブラウズすることはできますが、「404」と大きく表示されます。これは、エミュレーターで localhost つまり 127.0.0.1 を参照する場合、実際にはエミュレーター自体のコンテキスト内で参照しているからです。ローカル開発環境を参照するためには、アドレスとして 10.0.2.2 を使用します。すると図 5 の画面が表示されるはずです。

図 5. Android エミュレーターで実行中のサンプル・アプリケーション
リスト 3 で定義されたサンプル・アプリケーションを Android エミュレーターで実行しているときのスクリーンショット。画面には「Sencha Touch is ready!」と表示されています。

Sencha Touch の UI コンポーネント

これで基本部分を理解できたので、このセクションでは Sencha Touch の UI コンポーネントをいくつか説明します。

ボタン

ほんのいくつかの構成オプションを使用することで、ボタン・スタイルをいくつも作成することができます。リスト 5 のコードは利用可能なボタンをすべて作成し、それらのボタンを縦に並べて表示します。サンプル・アプリケーションは拡張され、ルート・パネルに追加される一連の項目が含まれています。この場合のルート・パネルは、さまざまなボタンが縦に並んだ 1 つのパネルです。

これらのボタンは ui 構成オプションに基づいてスタイル設定されています。サポートされているボタンのタイプは、normalbackroundactionforward です。

リスト 5. ボタン
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          // this will contain a vertical layout of buttons
          { 
            xtype: "panel",
            layout: "vbox",
            items: [
              {
                xtype: "button",
                ui: "normal",
                text: "Normal"  
              },
              {
                xtype: "button",
                ui: "back",
                text: "Back"  
              },
              {
                xtype: "button",
                ui: "round",
                text: "Round"  
              },
              {
                xtype: "button",
                ui: "action",
                text: "Action"  
              },
              {
                xtype: "button",
                ui: "forward",
                text: "Forward"  
              }
            ]  
          }
        ]
      });
    }
  });
</script>

図 6 はリスト 5 の結果を示しています。

図 6. Sencha Touch で利用可能なボタン・スタイル
リスト 5 のコードを実行した場合のスクリーンショットとして、利用可能なボタン・スタイルがすべて縦に並べて表示されています。

フォーム

フォーム・スイートには、フォームで通常使用されるすべての要素、そしてそれ以上のものが含まれています。当然のことですが、フォーム・スイートでは HTML5 特有の機能が扱われており、また組み込まれています。一例としては、HTML5 のフィールド・タイプ (E メール、Web アドレス、デート・ピッカーなど) や属性 (プレースホルダー・テキストなど) がサポートされており、Sencha Touch ではそれらを容易に使えるようになっています。リスト 6 はそうしたフォーム機能の一部を示しています。

リスト 6. フォーム・コントロールの例
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          { 
            xtype: "form",
            items: [
              {
                xtype: "textfield",
                name: "name",
                label: "Name",
                placeHolder: "your name here"  
              },
              {
                xtype: "emailfield",
                name: "email",
                label: "Email",
                placeHolder: "you@example.com"  
              },
              {
                xtype: "urlfield",
                name: "url",
                label: "Url",
                placeHolder: "http://www.example.com"  
              },
              {
                xtype: "datepickerfield",
                name: "date",
                label: "Date",
                picker: { yearFrom: 2010 }  
              }
            ]  
          }
        ]
      });
    }
  });
</script>

リスト 6 のコードを実行すると、図 7 のような画面が表示されます。Date フィールドにフォーカスがあり、デート・ピッカー・コントロールが画面の下端に表示されています。

図 7. 利用可能なフォーム・フィールドの例
利用可能なフォーム・フィールドの例を示すスクリーンショット

リスト

モバイル Web アプリケーションを作成する場合、表示面積が限られています。そのため、リスト・ベースの UI コンポーネントのサポートが重要になります。Sencha Touch はさまざまなタイプのリストをサポートしています (単純なリスト、グループ化リスト、ネストされたリストなど)。図 8 は Sencha Touch フレームワークのダウンロードに含まれている Kitchen Sink デモから引用したものですが、この図にはグループ化リストが表示されています。リストの右側に縦一列に並んでいる文字は、リストの特定の部分にジャンプするための便利な手段となります。

図 8. Kitchen Sink デモから引用したグループ化リスト
Kitchen Sink デモから引用したグループ化リストのスクリーンショット

アイコンとツールバー

Sencha Touch には、そのまま使える状態で組み込まれたアイコンが大量に含まれています。これらのアイコンを使用するには、使用するアイコンの CSS クラスを表すストリングを指定するだけでよいのです。リスト 7 は 2 種類のツールバーの作成方法を示しています。1 つのツールバーはルート・パネルの一番上に表示され、もう 1 つのツールバーはルート・パネルの一番下に表示されます。それぞれのツールバーは、そのまま使用できる状態で用意された小さなアイコン・サンプルを使用して構成されています。

これら以外にも、使用することができるアイコンは数多くあります。詳細については API のドキュメントとサンプルを参照してください。

リスト 7. ツールバーにアイコンを使用する
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        dockedItems: [
          {
            xtype: "toolbar",
            dock: "top",
            items: [
              {
                iconMask: true,
                ui: "plain",
                iconCls: "add"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "delete"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "star"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "home"
              }
            ]
          },
          {
            xtype: "toolbar",
            dock: "bottom",
            items: [
              {
                iconMask: true,
                iconCls: "download"
              },
              {
                iconMask: true,
                iconCls: "favorites"
              },
              {
                iconMask: true,
                iconCls: "search"
              },
              {
                iconMask: true,
                iconCls: "user"
              }
            ]  
          }
        ]
      });
    }
  });
</script>

リスト 7 のコードを実行すると、図 9 のような画面が表示されるはずです。

図 9. アイコンとスタイルの例
そのまま使用できる状態で Sencha Touch フレームワークに用意されたアイコンとスタイルの例を示すスクリーンショット。

カルーセルとタブ

カルーセルとタブは、これまで説明してきたコーディング・パターンを使って容易に実装することができます。リスト 8 はタブ・インターフェースとカルーセルを示しています。

リスト 8. カルーセルとタブを作成する
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.TabPanel({
        fullscreen: true,
        items: [
          {
            title: "Tab 1",
            html: "First tab"  
          },
          {
            title: "Tab 2",
            html: "Second tab"  
          },
          {
            title: "Tab 3",
            html: "Third tab"  
          }
        ]
      });
    }
  });
</script>

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Carousel({
        fullscreen: true,
        items: [
          {
            html: "First item"  
          },
          {
            html: "Second item"  
          },
          {
            html: "Third item"  
          }
        ]
      });
    }
  });
</script>

カルーセルとタブはコードと機能が似ています。カルーセルはカード間を移動します。そのためには、横方向にスライド操作を実行するか、画面の一番下にある円形のアイコンの 1 つをクリックします。デフォルトで、カルーセルもタブもカード間を遷移する際にはスライド・アプリケーションが使われます。

図 10 はタブ・インターフェースを示しています。

図 10. タブ・インターフェースの例
リスト 8 で定義されたタブ・インターフェースのスクリーンショット

図 11 はカルーセル・インターフェースを示しています。

図 11. カルーセル・インターフェースの例
リスト 8 で定義されたカルーセル・インターフェースの例を示すスクリーンショット

オーバーレイ

いくつかのオーバーレイ・コントロールを使用することができます。オーバーレイ・コントロールの選択肢としては、単純なモーダル・コントロールの他に、アラート、確認、プロンプトなどのコントロールがあります。

地図

モバイル Web アプリケーション開発でよく使われるコンポーネントの 1 つが地図です。Sencha Touch では、Ext.Map コンポーネントを使ってとても簡単にアプリケーションに地図を含められるようになっています。リスト 9 はサンプル・アプリケーションに地図を含める方法を示しています。この例が動作するためには Google Maps API 用のJavaScript ファイルを含める必要があることを忘れないでください。

リスト 9. 地図を使用する
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

<!-- sencha touch css -->
<link rel="stylesheet" type="text/css"
         href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- Google Maps API -->
<script type="text/javascript"
              src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- application script -->
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          {
            xtype: "map"  
          }
        ]
      });
    }
  });
</script>

</head>

<body>
</body>
</html>

リスト 9 の地図が表示されたウィンドウを図 12 に示します。

図 12. 地図コントロールの例
リスト 9 のコードを使用した地図ウィンドウの例を示すスクリーンショット

イベントとデータ・アクセス

Sencha Touch はモバイル・アプリケーションで想定されるいくつかの重要なイベントをサポートしています。サポートしているイベントの例としては、タッチの開始/終了、スクロールの開始/終了、タップ、ダブル・タップ、スワイプ、ピンチなどがあります。データ・アクセスに関しては、これまでに Ext JS を使った経験のある人にとってはおなじみの作業のはずです。

Sencha Touch フレームワークは、JSONP (JSON with padding)、YQL (Yahoo! Query Language)、Ajax リクエストをサポートしています。それらを Sencha Touch のデータ・パッケージと組み合わせると、UI コンポーネントにデータをバインドするための柔軟なメカニズムとなります。

スタイルとデザイン

独自のテーマを作成しようとすると、その作業は簡単ではありません。Sencha Touch フレームワークには、デフォルトのスタイルやデザインをとても簡単に変更できる重要な機能があります。

Sencha Touch フレームワークは CSS3 の拡張である Sass (Syntactically Awesome Stylesheets) を使用しています。Sass の特徴は何と言っても、変数とセレクターの継承を使用して容易にテーマを作成できることです。実際、1 つの変数を変更するだけでテーマ全体を変更することができるほど容易なのです。

この記事では新しいテーマの作成方法については、説明しません。「参考文献」には、テーマを作成するにあたって役立つ資料へのリンクを記載してあります。

まとめ

この記事では、HTML5、CSS3、JavaScript を使って構築されたモバイル Web アプリケーション・フレームワークである、Sencha Touch を紹介しました。そして簡単な Sencha Touch アプリケーションを作成する方法と、そのアプリケーションをデバイス・エミュレーターでテストする方法を学びました。また、いくつかの UI コンポーネントについて調べました。

この記事は単に Sencha Touch フレームワークを紹介したにすぎません。この記事で基本を理解できたはずなので、以下の「参考文献」を利用して Sencha Touch フレームワークのさまざまな概念を深く掘り下げてみてください。

参考文献

学ぶために

  • Sencha のすべてについて学んでください。API のドキュメントを読む、ブログやフォーラムを調べる、デモをダウンロードする、等々の方法があります。
  • Mark Pilgrim による「Dive into HTML5」を読み、今すぐ HTML5 開発を開始してください。
  • Android について学んでください。Android 開発者用のガイドには、参考情報や、一般的なタスクのための順を追った解説が用意されています。
  • developerWorks の Web development ゾーンには、Web ベースの多様なソリューションを解説した記事が豊富に用意されています。

製品や技術を入手するために

  • Sencha Touch をダウンロードしてください。
  • 最新バージョンの Google Chrome ブラウザーをダウンロードしてください。
  • 最新の Android SDK を入手してください。
  • Sass をダウンロードし、Sass について学んでください。
  • 皆さんの目的に最適な方法で IBM 製品を評価してください。製品の試用版をダウンロードする方法、オンラインで製品を試す方法、クラウド環境で製品を使う方法、あるいは SOA Sandbox で数時間を費やし、サービス指向アーキテクチャーの効率的な実装方法を学ぶ方法などがあります。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source, Industries
ArticleID=642267
ArticleTitle=Sencha Touch を使ってモバイル Web アプリケーションを作成する
publish-date=02222011