レポート

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

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

WebSocketで始めるPython

kyoto.py代表の稲田さん@naoinaによる,WebSocketPythonのセッションです。WebSocketはWebブラウザーで使える通信規格です。APIはW3C,プロトコルはIETFによって規格の策定を行い,草稿の段階です。各Webブラウザーベンダーで先行して実装がなされ,今すぐに利用できます。

プロトコル

WebScoketのメリットとして,双方向通信が可能であること,リアルタイム性があることがあげられます。また,HTTPと比べ,ヘッダー情報を毎回送受信する必要がなく,専用のプロトコルによって通信を行います。

プロトコルは,複数のバージョンが存在し,互換性はありません。また,各ブラウザーでの実装状況も異なります。プロトコルの内容については,次の通りです。

  • TCPで通信(UDPは使用できない)
  • 80または443番ポートを使用
  • 文字列およびバイナリーの送受信が可能
  • 通常のソケットとしては使えない(WebScoket専用のサーバーにのみ接続できる)

サンプルコード

セッションで登場するWebSocketのサンプルコードは,クライアント(Webブラウザー)側をJavaScriptで記述し,サーバー側をPythonで記述しています。サーバー側はTornadoというWebサーバー向けのライブラリーを使用しています。

クライアント側

var ws = new WebSocket('ws://127.0.0.1:8080/chat');

ws.onopen = function() {
        console.log("open");
}

ws.onmessage = function(msg) {
        console.log("message received: " + msg.data);
}

ws.onclose = function() {
        console.log("closed");
}

ws.onerror = function() {
        console.log("error");
}

ws.send("ぐだぽよ");

サーバー側

import tornado.ioloop

from tornado.web import Application
from tornado.websocket import WebSocketHandler

class Handler(WebSocketHandler):
    def open(self):
        ...

    def on_message(self, msg):
        ...
        self.write_message(msg)

    def on_close(self):
        ...

app = Application([
    (r"/chat", Handler),
    ])

if __name__ == '__main__':
    app.listen(8080)
    tornado.ioloop.IOLoop.instance().start()

以上のように,簡単にWebScoketによる通信が可能です。

ニコ生コメントビューワー

さらに,WebScoketを利用したサンプルアプリとして,ニコニコ生放送のコメントの取得と投稿を行うアプリを作られています。コードは,GitHubに公開されていますので,セッション動画とあわせてご覧ください。ニコニコ生放送関連のライブラリーも一緒に公開されています。

WebSocket で始める Python HTML5 プロ生勉強会 #pronama

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

資料公開場所:
HTML5-pronama-study

Sencha Touchをさわってみた

楽しいアプリ制作の会代表のTWorksさん@tworksによるSencha TouchというJavaScriptライブラリーについてのセッションです。Sencha Touchは,無償(GPL v3)または有償(商用)で使えるスマートフォン向けのWebアプリ開発フレームワークで,HTML5に対応しています。

Sencha Touch

Sencha Touchを利用すると次のことを実現・利用できると紹介しています。

  • タッチ処理
  • iOS,Androidのネイティブアプリに似たUI/UXの表現
  • UIレイアウト機能
  • iOS向けの機能
  • JavaScriptデバッグ機能
  • ストレージ機能(オフラインキャッシュ)

UI/UXは,公式のサイトよりデモアプリを操作して確認できますKitchen Sink)⁠デモはGoogle ChromeなどWebKitを使用したブラウザーで閲覧する必要があります。実際に操作してみると,ネイティブアプリのように動作することがわかります。

UIのレイアウトの仕方は,HTMLの<div>要素の中に<div>要素を入れ子に記述するような同様のイメージで,コンテナー要素を入れ子に記述します。コンテナーは,追加する要素の表示方向の指定などができます。たとえば図3のように画面に縦にボタンを3個並べるコードは以下のようになります。

図3 UIのレイアウト

図3 UIのレイアウト

Ext.setup({
 onReady: function() {
 var panel = new Ext.Panel({
   fullscreen: true,
   layout: 'vbox',
   items: [{
    xtype: 'button',
    ui: 'normal',
    text: button1'
    }, {
    xtype: 'button',
    ui: 'normal',
    text: button2'
    }, {
    xtype: 'button',
    ui: 'normal',
    text: button3'
    },
});

Sencha Touchでは,基本的にJavaScriptのコードを記述してデザインを実現し,HTMLファイルには特に記述しません。そのため,デザインと処理が一体化し,デザイナーとの分業が難しそうとのことでした。ただし,コードの記述に慣れるのが早く簡単に使えそうでもあるとのことです。

iOS向けの機能では,スタートアップスクリーンの記述と光沢のあるアイコンの作成について紹介しています。そして最後に,どのようなフレームワークでも少し手間がかかる例としてデータのリスト表示を,Sencha Touchでの実現方法を説明しています。

Sencha Touch をさわってみた HTML5 プロ生勉強会 #pronama

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

実際に利用した感想として,HTML5の表現力を活かしたWebアプリのフレームワークで,JavaScriptコードを少し書くだけでそれなりのものをすぐ作れてお手軽とのことでした。また,便利な使い方としてモック作成での利用をあげています。

資料公開場所:
Sencha Touchをさわってみた