レポート

HTML5 プログラミング生放送勉強会 第11回@大阪 レポート

この記事を読むのに必要な時間:およそ 5.5 分

HTML5 プログラミング生放送勉強会 第11回@大阪

2011年11月19日(土)に日本マイクロソフト関西支社のセミナールームで,コミュニティ「プログラミング生放送」によるIT・開発系イベント,プログラミング生放送勉強会を開催しました。その模様をお届けします。

今回は,HTML5をテーマに勉強会を開催し,スピーカーの皆さんにはHTML5に関連するセッションをして頂きました。Windows 8でHTML5による開発,モダンなWebアプリ開発について,WebSocketとPython,HTML5ライブラリーによるモバイルアプリ開発,最新のHTML5開発環境の情報やInternet Explorer 10など,多彩な内容になっています。今回の勉強会は40名の参加があり,約3分の1は学生でした。どのセッションも好評でしたので,ぜひご覧ください。

図1 会場の様子

図1 会場の様子

今回のセッションの動画は,このレポートのページから視聴いただけます。ニコニコ動画のユーザーであれば,プログラミング生放送勉強会 2011年で一覧を参照できます(要ログイン)⁠

プログラミング生放送勉強会

プログラミング生放送勉強会は,特定の分野に興味のある人たちの交流の場として開催しているIT・開発系の勉強会です。コミュニティプログラミング生放送が主催しています。勉強会当日は,ニコニコ生放送(ユーザー生放送)や,Ustreamを利用して勉強会を中継しています。

また,ニコニコ生放送やTwitterからの視聴者のコメントはスクリーン上に反映され,オンラインからも参加できるのが特徴です。コメント表示はプレゼンツールのMISAOを使用しています。

プログラミング生放送勉強会は,楽しい雰囲気の勉強会ですのでお近くで開催された場合は,参加してみてください。勉強会がはじめての方も歓迎です。

Windows 8とHTML5でアプリ開発プレビュー

それでは,各セッション内容を簡単に紹介します。最初は,プログラミング生放送 5zj@jz5のセッションです。Windows 8ではHTML5やCSS3,JavaScriptを利用してWindowsのアプリ作成ができます。その内容を現在ダウンロードできるWindows 8 Developer Previewと開発ツールを使って紹介しています。

Windows 8とMetro styleアプリ

Windows 8では,Metro styleという新しいタイプのアプリが登場し,従来のアプリはデスクトップアプリと呼び,区別しています。Metro styleアプリの特徴は,全画面表示され,アプリのサスペンドや終了はOSによって行われます。HTML5を使って開発できるアプリは,このMetro styleアプリになります。

HTML5によるMetro styleアプリの開発

Metro styleアプリの開発は,Windows Runtimeという共通のAPIを利用します。Windows Runtimeは,C++,C#やVisual Basic,そしてJavaScriptから利用できます。HTML5のスキルのある開発者であれば,HTML5/JavaScriptを利用してMetro styleアプリの開発が可能です。

デモでは,Visual Studioを使って,CSS3のデモページをMetro styleアプリへ移植する内容と,Windows Runtime APIを利用したWebカメラの操作を行っています図2)⁠

図2 Webカメラ操作のデモ

図2 Webカメラ操作のデモ

デザイナー向けのツール,Expression Blendを使用したデモでは,デザイナー画面でJavaScriptが実行され,jQuery UIで描画されたUIを確認しながらCSSの編集できることを紹介しています。ただし,Metro styleアプリらしいUIは,Windows Library for JavaScript(WinJS)というライブラリーが用意されています。WinJSによってコントロールの描画やテンプレート機能が利用可能です。

おわりに,HTML5によるWebアプリとMetro styleアプリは別物ですが,Metro styleアプリへの移植やコードの共通化を考える準備として,次の3点をあげています。

  • シングルページを基本としコンテンツを動的に作成する
  • JavaScriptのコードはモジュール化する
  • サーバーとのデータ取得はXMLHttpRqeustとJSONを使用する

Windows 8 と HTML5 でアプリ開発 プレビュー HTML5 プロ生勉強会 #pronama

ニコニコ動画:http://www.nicovideo.jp/watch/sm16221937

セッションを観て,実際に開発を試した頂いた方もいたようです。現在利用できるWindows 8は,Developer Previewという開発者向けのプレベータ版です。今後大きく内容が変更される場合もありますので,注意してください。

資料公開場所:
Windows 8 と HTML5 でアプリ開発 プレビュー

モダンな Web アプリ開発ガイドライン の紹介

SQLWorld代表の織田さん@shinsukeodaによる,Webアプリ開発ガイドラインの紹介セッションです。Microsoft patterns & practicesという設計・開発・実装のリファレンス集から,Project Silkについて紹介して頂きました。

Project Silk

Project Silkは,モダンなWebアプリを構築するためのガイドラインです。クロスブラウザーやリッチなUIが考慮されています。また,リッチなUIはJavaScriptを多用するため,メンテナンスしやすい実装方法が説明されています。セッションでは,ガイドラインのチャプター1〜14のうち,チャプター2までの内容を扱っています。

ガイドラインでは,Mileage StatsというWebアプリを用いて説明がなされています。Mileage Statsは,CodePlexからダウンロードでき,デモのビデオなどへリンクもあります。Mileage Statusでは,車の燃料購入履歴などを管理できるドライバー向けのアプリで,ドラッグ&ドロップ操作やチャートの表示などが可能です。技術的には,HTML5およびjQueryなどのライブラリーなどが使われています。

導入

チャプター1は,導入です。今日のWebアプリの種類を,静的サイト,サーバーレンダラ―,ハイブリッドデザイン,シングルページインターフェースの4種類に分類しています。Mileage Statusは,ハイブリッドデザインにあたるWebアプリです。

また,モダンなWebアプリの特徴について次の項目をあげています。

  • 標準に焦点をあてていること
  • 対話的であること
  • ページ全体のリロードを控えていること
  • 非同期であること
  • データの管理を行うこと

そのほかにもチャプター1では,アプリ構築時に考慮すべき事項が述べられています。

アーキテクチャー

チャプター2は,アーキテクチャーについてです。次の項目について解説されています。

  • 構造
  • モジュール方式
  • 通信
  • ナビゲーション
  • データ

構造に関しては,最新のブラウザーではJavaScriptを利用し魅力的なUXを実現し,古いブラウザーでは表示可能であるようにアプリを作成します。サーバー側ではHTMLを生成し,クライアント側でブラウザーが対応していた場合リッチなUXを実現する考えを,Progressive Enhancementと呼びます。

セッションでは,上記のアーキテクチャーの内容を一通り紹介しています。

モダンな Web アプリ開発ガイドライン の紹介 HTML5 プロ生勉強会 #pronama

ニコニコ動画:http://www.nicovideo.jp/watch/sm16222251

Project Silkを読んだ感想としてHTMLのWebアプリでどのようなことができるか,JavaScriptやライブラリーの使い方が,勉強できそうとのことでした。また,紹介している内容は,ガイドラインの最初の部分のみです。少しずつですが日本語訳の公開を織田さんがされていますので,参照するとよいでしょうお だ のスペース Wiki)⁠

資料公開場所:
HTML5 プログラミング生放送勉強会 第11回@大阪 で「〜初心者がこれから Web アプリの開発をするために〜」という題で話しました

コメント

  • HTMLプログラミング

    HTML5はマークアップ言語ですよね。プログラミングと言われるとなんかしっくりこないのは僕だけでしょうか。

    Commented : #1  ko (2011/11/28, 12:52)

コメントの記入