Tomcat 7.0.52でWebSocketを使ってみた

以前、「Tomcat7でWebSocketを使ってみた」というエントリーを書いたのですが、内容が古くなっていたので現時点で最新のTomcat 7.0.52で動作するWebSocketのサンプルを作ってみました。 アノテーションを使っているので、web.xmlはありません。

事前準備として、

  • [Tomcatインストールディレクトリ]/lib/websocket-api.jar

にBuildパスを通しておいてください。

Objective-Cにおけるselfとsuperの挙動

Objective-Cでは、selfとsuperの挙動に注意が必要です。

  • self:実行中のオブジェクトそのもの
  • super:親クラスに定義されているメソッドやインスタンス

コードを見ます。

  • ParentClassは、
    • methodという名前のメソッドを持っています。
  • MyClassは、
    • ParentClassをスーパークラスに持ちます。
    • ParentClassで定義されたmethodをオーバーライドしています。
    • selfとsuperのそれぞれを元にmethodを実行するメソッドを持っています。
  • ChildClassは、
    • MyClassをスーパークラスに持ちます。
    • MyClass(ParentClass)で定義されたmethodを更にオーバーライドしています。

この状態で、main.m内でMyClassとChildClassをインスタンス化し、selfとsuperを元にmethodを実行しているそれぞれのメソッドを実行します。

特にsuperの挙動(どちらもHello ParentClass!が出力されている)に注目ください。

Titanium Alloyはじめました(4)-タブを作ってみる

さて、今回はタブを作ってみます。

viewを作る

まずは、viewです。タブを作るときには、<TabGroup>内に<Tab>を作ってタブを定義します。TitaniumのcreateTabGroup()とcreateTab()のような感じです。

  • views/index.xml
<Alloy>
    <TabGroup>
        <Tab id="tab1">
            <Window id="win1">
                <Label>I am Tab1.</Label>
            </Window>
        </Tab>
        <Tab id="tab2">
            <Window id="win2">
                <Label>I am Tab2.</Label>
            </Window>
        </Tab>
        <Require src="win3" />
    </TabGroup>
</Alloy>

ここではtab1とtab2を定義して、それぞれのタブにウィンドウとラベルを定義して、I am Tab1.とI am Tab2.を表示します。下から3行目に<Require>があります。<Require>は、src属性で定義したxmlファイルの内容をインポートします。ここでは、src="win3"としていますので、win3.xmlを読み込みます。win3.xmlは次のようにしました。

  • views/win3.xml
<Alloy>
    <Tab id="tab3">
        <Window id="win3">
            <Label>I am Tab3.</Label>
        </Window>
    </Tab>
</Alloy>

win3.xmlでtab3を定義しています。このように<Require>を使うとviewを適当なところでファイル分割してくれるようなので、ファイルサイズが大きくなるときには分割した方が見やすそうです。さて、次はスタイルです。

styleを作る

先ほど定義したコンポーネントに装飾をします。ビューをindex.xmlとwin3.xmlのふたつに分割したので、スタイルも同じように分割します。

  • styles/index.tss
"#win1": {
    backgroundColor: "gray",
    title: "win1"
},
"#win2": {
    backgroundColor: "blue",
    title: "win2"
},
"#tab1": {
    title: "Tab1"
},
"#tab2": {
    title: "Tab2"
},
"Label": {
    color: "#fff"
}
  • styles/win3.tss
"#win3": {
    backgroundColor: "red",
    title: "win3"
},
"#tab3": {
    title: "Tab3"
},
"Label": {
    color: "#000"
}

特に新しいことは何もしていません。タブを切り替えたときに分かりやすいようにタブごとにウィンドウの色を変えてみました。次はコントローラです。

controllerを作る

コントローラはこれだけです。

  • controllers/index.js
$.index.open();

今回はタブを表示するだけなので、indexをopen()するだけです。さて、実行してみましょう。

実行してみる

alt tab1 alt tab2 alt tab3

実行できました。今回はタブを表示するだけですが、タブ内で何か動作させたい場合は、タブごとにコントローラを作ってあげれば良いのだと思います。

この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。

Titanium Alloyはじめました(3)-ボタンを作ってみる

前回は、自動生成されたコードを見ましたので、今回は少し変更してみたいと思います。

ボタンを作ってみる

今回は、ここのBinding Eventsを参考にボタンを作って押すとアラートが出るようにしてみます。

まずは、views/index.xmlを変更します。

  • views/index.xml
<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
        <Button id="button">Click me!</Button>
    </Window>
</Alloy>

4行目を追加しました。<Label>と同じ感じで定義します。これでボタンができます。次にこのボタンの装飾を定義します。

  • styles/index.tss
".container": {
    backgroundColor:"white"
},
"#label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
},
"#button": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    top: 50   
}

下から5行を追加しました。Ti.UI.SIZEとするとなるべく小さくなるように自動生成してくれます。最後にコントローラ部分です。

  • controllers/index.js
function doClick(e) {  
    alert($.label.text);
}

$.button.addEventListener('click', function(e){
    alert("Clicked me!");
});

$.index.open();

ボタンが押されたときの動作をおなじみのaddEventListener()で定義します。

動作確認

では、実行してみましょう。

alt Button1 alt Button2

うまく動きました。Alloyを使わないTitaniumのときは、これらの処理をごちゃまぜで書きましたが、Alloyを適用するとコンポーネント定義と装飾と動作の部分を分けて書くことができ、見やすくなりました。

この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。

Titanium Alloyはじめました(2)-自動生成されたファイルを見てみる

さて、前回は、Alloyプロジェクトを作り、実行するところまでいきましたので、今回は自動生成されたコードを見ていくことにします。

MVCモデル

ただ、その前にMVCモデルについて少し復習をしておきます。AppceleratorのAlloy Conceptsを見るとMVCモデルのModels, Views, Controllersについて次のように書かれています。

  • Models provide the business logic, containing the rules, data and state of the application.

  • Views provide the GUI components to the user, either presenting data or allowing the user to interact with the model data.

  • Controllers provide the glue between the model and view components in the form of application logic.

「モデルはビジネスロジックやルール、アプリケーションのデータや状態を提供し、ビューはそれらのデータを利用者へGUIコンポーネントとして表示する。コントローラはモデルとビューを繋ぐもの。」という感じだと思います。もう少し踏み込むと細かい話が出てきそうですが、それはまた次の機会に調べることにします。

自動生成されたファイルを見てみる

では、いよいよ自動生成されたファイルを見ることにします。app/配下にalloy.js, config.json、controllers/配下にindex.js、styles/配下にindex.tss、views/配下にindex.xmlが見えます。models/配下にはファイルがないので、Hello Worldするだけならモデルはいらないということでしょう。

alt HelloWorld

コントローラはJavaScript、ビューはxmlで書くようですが、styles/配下のtssファイルが良く分からないので、Alloy Quick Startを見ます。

The style file formats and styles the components in the view file.

CSSみたいな感じでしょうか。画面の構造をxmlで作って、TSSでそれを修飾するという感じですね。

自動生成されたコードを見てみる

次に自動生成されたコードを見ることにします。

  • views/index.xml
<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>

まず、views/index.xmlを見ます。一番外側に<Alloy>があり、<Window>があります。その内側に<Label>があります。Windowを作成してその上にLabelを置くというイメージでしょう。<Label>にonClickがありdoClickが指定されています。これがコントローラのdoClick()に関連付けられているようです。

  • styles/index.tss
".container": {
    backgroundColor:"white"
},
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
} 

次にstyles/index.tssを見ます。ビューファイル内のclass属性や要素に対して位置や装飾等の見た目を定義します。ところで、このサンプルでは<Window>はclass属性を使用してドット「.」で指定していますが、ラベルは<Label>を指定して装飾をしています。Alloy Quick Startを見ると、id属性で指定したいときは「#」が付いているのでこちらの指定の方法でも良さそうです。同じように<Window>にclass="container"がないときには、Windowと指定することもできるのですね。指定する値はAlloyを使わないTitaniumとほぼ同じですので、迷うことはないでしょう。

  • controllers/index.js
function doClick(e) {  
    alert($.label.text);
}

$.index.open();

最後にcontrollers/index.jsです。ビューで指定したonClick属性の値であるdoClick()を定義します。「$」が分からないので、Alloy Controllersを見ます。

All UI elements which have an id attribute in a view are automatically defined and available as a property prefixed by the special variable $ in the controller. The $ is a reference to the controller.

「$」を使うと、コントローラからビューのid属性にアクセスできるようです。2行目では、ラベルのテキストを取得し、最終行ではビューをオープンしています。

ということで、ビュー / スタイル / コントローラを見ることで、大まかな役割分担を確認することができました。ここにモデルがどのように絡んでくるのかに興味がありますが、とりあえずはここまでにしておきたいと思います。

次回はこのサンプルを少し手直ししていきたいと思っています。

この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。

Titanium Alloyはじめました(1)-とりあえず実行してみる

「Alloy1.0がでたら本気を出す!」と言ったような言っていないような気がしますが、無事に1.0が出たのでとりあえず始めてみることにします。

現在の私は、Alloyを使わないTitanium(clasic?)はある程度知ってるけど、Alloyはほとんど知らないという状況です。

ここからスタートします。さてさて、どうなるでしょうか…

Alloyを知ることから始めます

まずは、Alloyを知ることから始めます。「titanium alloy」というキーワードでググって、出てきたページを手当たり次第に読んでいきます。

Alloyは登場して間もないので、ガシガシ仕様が変わっています。古い情報が山のように出てきますが、気にしません。出てきた情報を整理すると次のようになりました。

Alloyとはなにか

  1. Appcelerator社が提供しているTitanium Mobile向けMVCフレームワーク
  2. npmで配布されているためnode.jsの環境が必要
  3. ソースコードgithubで公開
  4. 2013年2月時点の最新バージョンは、1.0.0
  5. Titanium3.0から対応
  6. 公式ドキュメントはこちら

環境構築

先ほどググって出てきたページの中に環境構築についての記載もあったと思いますので、その辺りを参考に環境構築をします。次のものを追加で用意しました。

  1. node.js
  2. Alloy
  3. Titanium CLI

それぞれにパスが通っていることも確認しておきます。

とりあえず動かしてみます

コマンドラインでもできますが、始めは素直にStudioを使ってみます。いつも通り、StudioからTitanium Projectを作ると最初にテンプレートを選択しますが、ここにAlloyが出てきます。Default Alloy Projectを選択してプロジェクトを作ります。

プロジェクトツリーをみると、viewsやcontrollersという見慣れないフォルダができていますが、中身を見るのは後にします。とりあえず、実行してみます。

alt HelloWorld

個人的にはHello Alloyと表示された方が良いのではないかと思いますが、無事に実行することができました。

今回はここまでです。次回はファイルの中身を見て行きたいと思います。

この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。

Firefox18でgetUserMediaしてみた

Firefox18でWebRTCがサポートされたので、getUserMediaでカメラの情報を取得してみました。
実行するときには、about:configからmedia.navigator.enabledをtrueに変更してください。
chromeより若干ですがもっさりしている感じはありますが、気にならない程度ですし、もしかしたら私の環境に依存しているかもしれません。