モバイルWebアプリケーション向けのフレームワーク
このレッスンでは HTML5 を使って モバイルウェブ アプリケーションを 作る時に便利な フレームワークについて学びます HTML5 の登場と その急速な普及の背景にある 主な要因の一つに挙げられるものが モバイルプラットフォームの存在です HTML5 に組み込まれている 技術的な機能の多くは モバイルアプリケーションに最適です 例えば 位置情報 マルチスレッド ローカルストレージ オフライン作業 ウェブソケット オーディオ ビデオ といった具合です HTML5 を使って モバイルウェブアプリケーションを作成する際 便利なフレームワークがあります ここでいくつかの例をご紹介しましょう ウェブサイトをご覧ください 順に jQuery Mobile Sencha Touch Kendo UI をご紹介します これらのフレームワークを 機能の一部を紹介しながら見ていきます 他にも様々なフレームワークが 存在していますが これらは比較的広く利用されているものです 始めに jQuery Mobile です これは人気の高い JavaScript ライブラリである jQuery と jQuery UI に基づいて作られています iOS Android BlackBerry Windows Phone Tizen など かなり幅広いモバイルプラットフォームを サポートしています また JavaScript と CSS HTML5 で作られており 非常に直感的で使いやすい フレームワークです 次に Sencha Touch です サポートしているプラットフォームは iOS Android Windows Phone BlackBerry Tizen です また Apache Cordova の API をサポートしており ネイティブなハードウェア機能を 利用することもできます そして最後に Kendo UI です サポート OS は iOS Android BlackBerry Windows Phone です こちらも jQuery ベースの フレームワークで 豊富な UI ウィジェット を持っています ここで jQuery Mobile を使って アプリケーションを構築する例として 簡単なサンプルをご覧いただきましょう Chrome で新しいタグを開き サンプルアプリケーションを開きます こちらがサンプルアプリケーションです 現在は index.html を開いているところです 動作に必要なすべてのファイルは サンプルファイルに含まれています こちらがそのファイルです index.html は ユーザー インターフェースを定義しています ユーザー インターフェースの裏側にある ロジックは JavaScript によって 実装されています 例えば data.js は ローカルストレージに データを格納するためのものです ブラウザに戻りましょう このサンプルアプリケーションは プログラミング言語のトレーニングコースの 一覧を提供するアプリケーションです これらのコースのそれぞれについて 詳細を確認するには リンクをクリックします 例えば HTML5 のリンクを クリックしてみると それについての詳細が表示されます これらはウェブページ上の p 要素 段落を使って表示されており その実体 データは JavaScript で制御されています そのためそれぞれのコースは それぞれ ID 期間 そしてこのコースが 認定につながるかどうかを示すフラグを データとして持っています 元のコースに戻り 新しいコースを作成してみましょう 例えば C++ のコースを作成するとします テキストボックスに C++ と入力し そして期間は 5 日間 認定は No のままで 保存ボタンをクリックします コースの一覧に C++ のコースが追加されました jQuery Mobile を使うと このようなモバイルアプリケーションを HTML と JavaScript で 構築することができます このレッスンでは HTML5 を使って モバイルウェブ アプリケーションを 作る時に便利な フレームワークについて学びました
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。