開発の覚書

以前に書いた記事 「boolean型の値は false=0，true=1 になっている」 で記載した内容に関して、一部誤りが発覚しましたので、こちらにその検証の続きを記載します。

解釈が誤っていた点

★ false=0 / true=1 ではなくて、 0=false / 0以外の値は true となる

下記のソースで検証します。
if文の条件に true/false ではなく、0, 1, 255 という数字を使用して評価します。評価対象になった場合には、VBoxコンテナの中にLabelを追加してメッセージを表示するつくりになっています。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" creationComplete="onCreationComplete()">

<mx:Script>
    <![CDATA[
        import mx.controls.Label;
        
        private function onCreationComplete():void
        {
            if (0) {
                 addLabel("0");
                 trace(0 as Boolean);
            }
            
            // 評価される →　as演算子でキャストした結果は「true」
            if (!0) {
                addLabel("!0");
                trace(!0 as Boolean);
            }
            
            // 評価される →　as演算子でキャストした結果は「null」
            if (1) {
                addLabel("1");
                trace(1 as Boolean);
            }
            
            if (!1) {
                addLabel("!1");
                trace(!1 as Boolean);
            }
            
            // 評価される →　as演算子でキャストした結果は「null」
            if (255) {
                addLabel("255");
                trace(255 as Boolean);
            }
            
            if (!255) {
                addLabel("!255");
                trace(!255 as Boolean);
            }     
        }
        
        private function addLabel(msg:String):void
        {
            var lbl:Label = new Label();
            lbl.text = "「" + msg + "」 は評価されました";
            showList.addChild(lbl);
        }
        
    ]]>
</mx:Script>

    <mx:VBox id="showList" horizontalAlign="center" fontSize="15" fontWeight="bold" />

</mx:Application>

【実行結果】

実行結果としてわかったことは、

• 「0」という数字は false として評価される
• false の否定である 「!0」 は true として評価される （当たり前ですが…）
• 「0」以外の数字は、条件式ですべて true として評価される
• 「0」以外の数字は as演算子でキャストすると null になっている　(Booleanでキャストできていない)

ソースにはありませんが、if("あああ")  などの様に文字列を使用した場合にも、必ず true として評価されていました。

つまり、 boolean型の true/false の代替としては、0 を false の代わりに使うことはできるが、0 以外の値はすべて true と評価されてしまうので使用することができないことがわかりました。

画面上のコンポーネントに対しカーソルが当たっている状態で、Tabキーを押下した際に、 次のコンポーネントにフォーカスを移動させることができます。

VBox、HBox、Canvasコンテナにコンポーネントを配置したときに、Tabキーを押下した場合の遷移をそれぞれ検証してみました。

VBoxの場合

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:VBox height="100%">
  <mx:TextArea text="1"/>
  <mx:TextArea text="2"/>
  <mx:TextArea text="3"/>
  <mx:TextArea text="4"/>
  <mx:TextArea text="5"/>
 </mx:VBox>
</mx:Application>

サンプルのFlash

Vboxコンテナの場合は、上から下へ順に移動することが確認できます。
また、MXML上の配置と画面上の配置が同じためMXMLで配置した順＝Tabキー押下時にフォーカスが移動する順番になるようです。

HBoxの場合

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:HBox width="100%">
  <mx:TextArea text="1"/>
  <mx:TextArea text="2"/>
  <mx:TextArea text="3"/>
  <mx:TextArea text="4"/>
  <mx:TextArea text="5"/>
 </mx:HBox>
</mx:Application>

サンプルのFlash

Hboxコンテナの場合は、左から右へ順に移動することが確認できます。
また、MXML上の配置と画面上の配置が同じためMXMLで配置した順＝Tabキー押下時にフォーカスが移動する順番になるようです。

Canvasの場合

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Canvas width="60" height="60">
  <mx:TextArea x="0" y="0" width="20" height="20" text="1"/>
  <mx:TextArea x="20" y="0" width="20" height="20" text="2"/>
  <mx:TextArea x="40" y="0" width="20" height="20" text="3"/>
  <mx:TextArea x="0" y="20" width="20" height="20" text="4"/>
  <mx:TextArea x="20" y="20" width="20" height="20" text="5"/>
  <mx:TextArea x="40" y="20" width="20" height="20" text="6"/>
  <mx:TextArea x="0" y="40" width="20" height="20" text="7"/>
  <mx:TextArea x="20" y="40" width="20" height="20" text="8"/>
  <mx:TextArea x="40" y="40" width="20" height="20" text="9"/>
 </mx:Canvas>
 <mx:Canvas width="60" height="60">
  <mx:TextArea x="40" y="40" width="20" height="20" text="1"/>
  <mx:TextArea x="20" y="40" width="20" height="20" text="2"/>
  <mx:TextArea x="0" y="40" width="20" height="20" text="3"/>
  <mx:TextArea x="40" y="20" width="20" height="20" text="4"/>
  <mx:TextArea x="20" y="20" width="20" height="20" text="5"/>
  <mx:TextArea x="0" y="20" width="20" height="20" text="6"/>
  <mx:TextArea x="40" y="0" width="20" height="20" text="7"/>
  <mx:TextArea x="20" y="0" width="20" height="20" text="8"/>
  <mx:TextArea x="0" y="0" width="20" height="20" text="9"/>
 </mx:Canvas>
</mx:Application>

サンプルのFlash

１つ目のCanvasは、左上から右下へ移動することが確認でき、２つ目のCanvasは、右下から左上へ移動することが確認できます。

２つ目のCanvasも画面上の見た目のコンポーネント配置は１つ目のCanvasとまったく同じですが、２つ目のCanvasは、MXMLのソースコード上では逆から並べているため、Tabキー移動で左下から右上に移動しています。

上記検証から、Tabキーの移動順序は、デフォルトでは MXMLソースファイル上での記述順で決定されているようです。

ボタンにフォーカスがある時、スペースキー（IMEオフのとき限定）を押下した際に、ボタンのクリックイベントが呼ばれます。

これをEnterキーでも押下できるようにしたいと考え、Buttonクラスを拡張して以下のCstmButtonクラスを作成してみました。

CstmButton.asファイル

package
{
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	
	import mx.controls.Button;

	public class CstmButton extends Button
	{
		public function CstmButton()
		{
			super();
		}
		
		override protected function keyDownHandler(event:KeyboardEvent):void
		{
	        if (event.keyCode == Keyboard.ENTER)
                event.keyCode = Keyboard.SPACE;
			super.keyDownHandler(event);
		}
	    override protected function keyUpHandler(event:KeyboardEvent):void
	    {
	        if (event.keyCode == Keyboard.ENTER)
                event.keyCode = Keyboard.SPACE;
            
            super.keyUpHandler(event);
	    }
		
	}
}

ソースコードを読んでもらえばわかるとは思いますが、この方法はかなりお手軽な方法（手抜き）です。
CstmButtonクラスの中身は、キーが押されたときに呼ばれているクラス(KeyboardEvent)内で、Enterキーが押されたときに呼ばれるメソッド（keyDownHandler）、離されたときに呼ばれるメソッド（keyUpHandler)をそれぞれオーバーライドして、パラメータで渡されたイベントクラス内の押されたキーの情報（keyCode）を、EnterキーからSpaceキーのKeyCodeに置き換えてからsuper()を呼んでます。

CstmButtonクラスの継承元であるButtonクラスのkeyDownHandlerメソッド、keyUpHandlerメソッドでは、押されたキー(keyCode)をみてSpaceキーの場合に処理が動いているので、Enterキー押下時にSpaceキーに置き換えることで、Enterキーでもボタンが押せるようになります。

以下、上記クラスを検証するためのサンプルソースです。

 .mxmlファイル

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" horizontalAlign="left">
	<mx:Script>
	<[CDATA[
		import mx.controls.Alert;
		
		private function checkClicked():void{
			Alert.show("反応！");
		}
	]]>
	</mx:Script>

	<local:CstmButton label="カスタム" click="checkClicked()"/>
	<mx:Button label="普通" click="checkClicked()"/>
</mx:Application>

※ サンプルソースでは、ボタンが押されたという反応を確認するため、clickイベントを追加してます

前回の記事で、GAEを開発するための準備を整えました。
さっそくGAEで"Hello World."を出力するアプリケーションを開発してみることにします。
GAEで "Hello World."の記事ですが、大きくなるので3回に分けています。
第2回目は、『Google App Engine SDK for Python』のプロジェクト作成⇒ローカルでのテストまでの作業です。

eclipseでGAE for Python用プロジェクトを作成

１．パッケージエクスプローラー上で、マウスを右クリックし「新規 > プロジェクト」を選択します。
メニュー「ファイル > 新規 > プロジェクト」でも同じです。

２．「Pydev Google App Engine Project」を選択し、[次へ]ボタンをクリックします。

３．プロジェクト名、文法バージョン、インタープリターを選択し、[次へ]ボタンをクリックします。

文法バージョン、インタープリターについては、過去の記事「eclipseでPython開発を行ってみる」を参照してください。
　現在Python3については未検証です。

４．[参照]ボタンをクリックします。

５．前回の記事でインストールした、「Google App Engine SDK for Python」をインストールしたフォルダーを指定します。

６．[次へ]ボタンをクリックします。

７．プロジェクト名、テンプレートを指定して[完了]ボタンをクリックします。

プロジェクト名は「helloworld」です。（理由は「設定ファイルの編集」で後述しています）
テンプレート名は目的次第ですが、今回は「Hello World」を選択します。

下記のようにGAE for Python用のプロジェクトが作成されます。

リクエストハンドラの編集

「eclipseでGAE for Python用プロジェクトを作成」で作成された helloworld.py を編集し、リクエストに応答し「Hello world」と出力するCGIプログラムを作成します。
といっても、最低限のソースコードはテンプレートで自動的に作成してくれていますので、中身を確認するだけです。
helloworld.py は下記内容になっています。

print 'Content-Type: text/plain'
print ''
print 'Hello, world!'

設定ファイルの編集

「eclipseでGAE for Python用プロジェクトを作成」で作成された app.yaml を編集します。
このファイルも既にテンプレートが作成してくれていますので、中身だけ確認します。
app.yaml は下記内容になっています。

application: helloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  script: helloworld.py

※application と script で指定する名前は同じにしないとうまく動作しないようです。

設定ファイルの詳細は下記URLを参照してください。
http://code.google.com/intl/ja/appengine/docs/python/config/appconfig.html

動作確認

まずはローカルで動作確認を行います。
コマンドプロンプトで下記のコマンドを入力します。

> dev_appserver.py helloworld/

※実行時は、Pythonインタープリター、Google App Engine SDK for Python のパスを確認してください。
※helloworld/ の部分は、実際に開発を行っている helloworld.py が存在するフォルダー名を指定します。
　私の環境はWindowsで、eclipseのworkspace をCドライブ直下に作成していますので「C:\workspace\HelloWorld\src」でした。
　この場合のコマンドは dev_appserver.py C:\workspace\HelloWorld\src となりました。

テスト用Webサーバーが起動したら下記のURLで実際に「Hello World」が出力されることを確認します。
http://localhost:8080/

※使用するポートの変更などを行いたい場合、下記URLに詳細が記述してありますので参照してみてください。
http://code.google.com/intl/ja/appengine/docs/python/tools/devserver.html

次回の記事で実際に、GAE上で"Hello world."を出力するところまで行ってみています。そちらも参照してみてください。

GAEで "Hello World." その３

前回迄の記事で、eclipseでPythonの開発環境を整え、実際に簡単なプログラムを作ってみました。
現在の野望としては、せっかくPythonを使っているので、Webで簡単システムを作ってみたいな～と考えています。
ちょっと調べてみると、「Google App Engine」がPythonを開発言語に採用していますので、GAEにて自作のPythonプログラムを動かしてみたいと思っています。
この辺の手順は、Googleで調べると既にいろいろなブログで紹介されていますが、まずは自分で実践ということで私自身の体験としてここのブログでも紹介しようと思います。
まずは、定番「Hello World」出力までの手順です。

記事が大きくなるので、記事を3回に分けました。
第1回目は、『Google App Engine SDK for Python』のダウンロード⇒インストールまでの作業です。

尚この手順は、Google CODEにスタートガイドがあります。
http://code.google.com/intl/ja/appengine/docs/python/gettingstarted/

Google App Engine SDK for Pythonのインストール

【インストール環境】

• OS：WindowsXP SP3

１．Google App Engine のホームページを開きます。

http://code.google.com/intl/ja/appengine/downloads.html

２．「Google App Engine SDK for Python」をダウンロードします。

３．ダウンロードした実行ファイルを実行します。

４．『Google App Engine SDK for Python』のインストール画面が表示されるので、[Next]ボタンをクリックします。

５．「I accept the terms in the License Agreement」をチェックし、[Next]ボタンをクリックします。

６．インストールするフォルダー、インストール時のオプションのチェックを設定して、[Next]ボタンをクリックします。

７．[Install]ボタンをクリックします。

 インストールが開始されます。（しばらく待ちます）

８．インストールが完了するので、[Finish]ボタンをクリックします。

以上で、Google App Engine SDK for Python のインストールは完了です。

次回は実際に、ローカル上で"Hello world."を出力するところまで行っています。

GAEで "Hello World." その2

※記事の本数を2回⇒3回に修正しました。（2010/09/05）