Develogger

Gmailの外観を変える

2008-06-26T21:39:00.005+09:00

先日参加したGoogle Developer Day 2008の基調講演のとき、私の前にGoogleの社員が座っていてノートパソコンを使っていました。

そのGoogle社員のパソコンの画面には、おしゃれな外観のGmailが表示されていて大変びっくりしました。

最初はGmailにテーマを変える機能があると思い、設定を見渡してもそのような項目はなかったのでWebで検索してみると、Gmailにはテーマを変える機能がなく、Firefoxのプラグインを使ってスタイルを変更するようです。

私は「Stylish」というFirefoxのプラグインを使用して、ここのテーマを適用してみました（ちなみにGoogle社員が使っていたテーマは見つけることができませんでした)。

標準のGmailは見やすいのですが、何年も使っていると見飽きてしまいます。
外観を変えるだけで、いつもより少しだけですが新鮮に感じますよね。

上記のテーマの他にもいろいろあるようなので、興味のある方は試してください。

Google Developer Day 2008

2008-06-12T21:04:00.003+09:00

2008年6月10日に開催されたGoogle Developer Day 2008に参加しました。
開催された場所は「パシフィコ横浜」です。

私が参加したセッションは

1. 基調講演
2. OpenSocial
3. Androidアプリケーションの構築
4. Android Dalvik VMの内側
5. Google Maps API for Flash
6. Googleのソフトウェアエンジニアの日常

です。

基調講演では、偶然にもGoogle社員のすぐ後ろの席でした。
生でGoogleの鵜飼さんを見られて大変びっくりしました（鵜飼さんが監訳した書籍はほとんど持っています)。

ちなみにGoogleの社員はほとんどMacを使用しており、GMailやDiggなどを見ていたようです。

一番面白かったセッションは「Googleのソフトウェアエンジニアの日常」です。
書籍やWebなどである程度知っていたのですが、中には知らない情報もあり大変興味深く聞くことができました。

セッション中、辺りを見渡すとMac Bookを使っているユーザが多くて驚きました。
他にはThink Pad、Eee PC、Let's Noteが多かったように感じます。

やはり、他のユーザがどのようなノートパソコンを使っているのか興味がありますよね。

初めてGoogle Developer Dayに参加しましたが、大変有意義に過ごせたと思います。
機会があれば、ぜひ来年も参加したいです。

PyAWSでAmzonの商品を検索

2008-06-01T20:19:00.006+09:00

PythonをからAmazon ECSを使ってAmazonの商品情報を検索する場合、PyAWSを使えば簡単に商品情報を取得することができます。

・PyAWS

下記にサンプルを掲載いたします。


#!/usr/bin/env python
# -*- coding: utf-8 -*-

import sys
import codecs

from pyaws import ecs

sys.stdout = codecs.getwriter('cp932')(sys.stdout)

ACCESS_KEY = "XXXXXXXXXXXXXXXXXXXXX"
LOCALE = "jp"

ecs.setLicenseKey(ACCESS_KEY)
ecs.setLocale(LOCALE)

bags = ecs.ItemSearch(
 'Python',
 SearchIndex='Books',
 ItemPage=0,
 ResponseGroup='Request,Small,Images'
)

for bag in bags:
 print bag.Title

Amazon ECSを利用するためにはAccess Key IDを取得する必要があります。
Access Key IDの取得方法は下記を参照ください。

Access Key IDの取得

Office2007

2008-05-13T22:17:00.006+09:00

会社のパソコンにはOffice2007がインストールされています。
最初はOffice2007になってUIが変わったので、珍しい・新鮮な気持ちで使っていました。

しかし、時間がたつにつれて珍しい・新鮮な気持ちがなくなり、残ったのは
今までの機能がどこにあるかわからない状態の不便さだけです。

しばらく使っていれば慣れて新しいUIの方が良いと感じるかもしれませんが、安くないパッケージ料金と再学習コストまで払って使う価値があるのでしょうか？

せめて以前のバージョンのUIに切り替えられる機能を標準で提供してくれていたら良かったのですけれどね。

Office2007は使いたくないけれど、やむなく理由があって使わなければならない方には下記のソフトがいいかもしれません。

BackTo2003

有償のソフトウェアですがOffice2007でOffice2003みたいな操作が可能になるようです。

ハイパフォーマンスWebサイト

2008-04-29T20:43:00.005+09:00

先日、Amazonで注文していた「ハイパフォーマンスWebサイト」が届きました。

通常、Webサイトのパフォーマンスを上げる場合、データベースやプログラム(Web側)などのバックエンドで対策をすることが多いと思います。

しかし、この本によるとフロントエンド(JavaScript,CSS,HTML)の問題が全体の80%を占めるとのことです。

CSSをHTMLの先頭の方に、JavaScriptをHTMLの末尾に記述するとパフォーマンスが上がるなど、私の知らなかったことがたくさん掲載されていました。

また、アメリカのトップ10サイトのデータが掲載されているので、大変興味深く読むことができました。

値段も安く、文章も読みやすいのでおすすめです。

※この本はフロントエンドに関するルールが14個記述されています。
　バックエンドに関するルールは掲載されていません。

AIRでWindowsのシステムトレイにアイコンを表示

2008-03-22T21:15:00.004+09:00

Airではデスクトップアプリケーションのようにシステムトレイにアイコンを表示することができます。

簡単なサンプルを作成したので掲載します。



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteHandle()">

 <mx:Script>
     <![CDATA[
         import mx.controls.Alert;

         private function applicationCompleteHandle():void {

             /* システムトレイがサポートされているか判定 */
             if (NativeApplication.supportsSystemTrayIcon) {
             
                 var images:Array = new Array();
                 images.push(new BitmapData(16, 16, false, 0xFFFFFF));
                 nativeApplication.icon.bitmaps = images;

                 var systemTrayIcon:SystemTrayIcon
                     = (nativeApplication.icon as SystemTrayIcon);

                 /* ツールチップを表示 */
                 systemTrayIcon.tooltip = "RiverStone";

                 var nativeMenu:NativeMenu = new NativeMenu();
                 nativeMenu.addItem(new NativeMenuItem("メニュー1"));
                 nativeMenu.addItem(new NativeMenuItem("メニュー2"));
                 nativeMenu.addItem(new NativeMenuItem("メニュー3"));
                 nativeMenu.addItem(new NativeMenuItem("メニュー4"));
                 systemTrayIcon.menu = nativeMenu;

                 /* クリックイベント */
                 systemTrayIcon.addEventListener(MouseEvent.CLICK, systemTrayIconClickEventHandle);

             }
         }

         private function systemTrayIconClickEventHandle(event:MouseEvent):void {
             Alert.show("システムトレイアイコンをクリック", "アラート");
         }

     ]]>
 </mx:Script>
</mx:WindowedApplication>

上記のプログラムを実行するとシステムトレイに白いアイコンが表示されます。

システムトレイをクリックするとアラートが表示されます。

システムトレイに表示されているアイコンを右クリックするとメニューが表示されます。

EclipseでAndroidプロジェクトを作成

2008-03-17T21:38:00.003+09:00

前回の投稿でAndroidの開発環境を構築したので、今回はAndroidプロジェクトを作成します。

■ 手順1
プロジェクトエクスプローラ上で右クリックして「新規→プロジェクト」を選択。

■ 手順2
新規プロジェクトダイアログのカテゴリー「Android」を展開して「Androidプロジェクト」を選択して「次へ」ボタンをクリック。

■ 手順3
プロジェクト名・パッケージ名・アクティビティー名・アプリケーション名を入力して「終了」ボタンをクリック

■ 手順4
これでAndroidのプロジェクトが作成されました。最後に作成したプロジェクトを実行してエミュレータを表示します。

プロジェクトを右クリックして「実行→Androidアプリケーション」を選択します。

Androidの開発環境

2008-03-16T22:01:00.004+09:00

Androidの開発環境を構築したのでメモします。

1. JDKのインストール
2. Eclipse3.3のインストール
3. Android SDKのインストール
4. ADT Plugin for Eclipseのインストール

■JDKのインストール
Androidの開発にはJDK5.0以上が必要になるので、最新のJDK6.0をインストール。

■Eclipse3.3のインストール
Pleiades All in One を使えば簡単です。

■Android SDKのインストール
ここから各OS用のアーカイブをダウンロードできます。ダウンロードした後に任意の場所に解凍して、環境変数「ANDROID_HOME」に解凍したフォルダへのパスを設定し、環境変数「PATH」の最後に「;%ANDROID_HOME/tools」を追加します。

■ADT Plugin for Eclipseのインストール
Eclipseを起動して「ヘルプ→ソフトウェア更新→検索およびインストール」を選択すると「インストール/更新」ダイアログが表示されます。
ここでは「インストールする新規フィーチャーを検索」を選択して「次へ」ボタンをクリック。

右側に表示される「新規更新リモート・サイト」をクリックして

名前: Android
URL: https://dl-ssl.google.com/android/eclipse/

を入力して「OK」ボタンをクリックする。

Androidにチェックが付いていることを確認して「終了」ボタンをクリック。

更新ダイアログに表示される「Android」をチェックしてから「次へ」ボタンをクリック。

使用条件に同意して、「次へ」ボタンをクリック。

「終了」ボタンをクリック（インストールするのに少し時間がかかります）。

Eclipseを再起動して、「ウィンドウ→設定→Android」を開きSDKロケーションを設定。

これでAndroidのプロジェクトを作成できるようになります。

PDFの閲覧にはFoxit READERがおすすめ

2008-03-14T21:12:00.006+09:00

最近までPDFのドキュメントを見るのにAdobe Readerを使用していました。しかし、あまりにも起動に時間がかるのと、リソースをたくさん使うのに嫌気がさしてきました。(私の使用しているマシンは低スペックではありません)

Webで他のPDFを閲覧するソフトウェア探して、試してみたところ･･･
Foxit READERというソフトウェアに落ち着きました。

これは起動も高速で閲覧するのにまったくストレスを感じません。

12MBのPDFをAdobe ReaderとFoxit READERで開いてみたところ、Adobe Readerが12秒、Foxit READERが3秒ぐらいでした。(スクロールもFoxit READERの方が圧倒的にスムーズです)

私にとっては高機能で遅いソフトウェアよりも、それなりの機能で早いソフトウェアの方が魅力的です。

Adobe Readerにストレスを感じているかたは、是非おためしください。

AIRに画像ファイルをドラッグ&ドロップして表示

2008-03-12T21:42:00.002+09:00

AIRで作成したアプリケーションに画像ファイルをドラッグ＆ドロップして表示するサンプルを作成しましたので掲載します。

AIRで作成したアプリケーション外からドラッグ＆ドロップするには「NativeDragEvent」に定義してある「NATIVE_DRAG_ENTER」と「NATIVE_DRAG_DROP」のイベント処理を行います。

ポイントは

1.
NATIVE_DRAG_ENTERイベントにて「NativeDragManager.acceptDragDrop」を呼び出しドラッグ&ドロップを許可する

2.
NATIVE_DRAG_DROPイベントにてイベントクラスのプロパティ「Clipboard」からデータを取得して処理する

となっています。
詳細は下記のサンプルをご覧ください。


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteEventHandle()">

 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.managers.DragManager;

   var loader:Loader;

   private function applicationCompleteEventHandle():void {
    
    canvas.addEventListener(
     NativeDragEvent.NATIVE_DRAG_ENTER, nativeDragEnterEventHandler);

    canvas.addEventListener(
     NativeDragEvent.NATIVE_DRAG_DROP, nativeDragDropEventHandler);
   }

   private function nativeDragEnterEventHandler(event:NativeDragEvent):void {

    if (event.clipboard.hasFormat(
     ClipboardFormats.FILE_LIST_FORMAT)) {
     NativeDragManager.acceptDragDrop(canvas);
    }
   }

   private function nativeDragDropEventHandler(event:NativeDragEvent):void {
    
    var fileList:Array
     = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

    if (fileList.length > 1) {
     return;
    }

    var file:File = fileList[0];
    var fileStream:FileStream = new FileStream();
    fileStream.open(file, FileMode.READ);

    var byteArray:ByteArray = new ByteArray();

    fileStream.readBytes(byteArray, 0, fileStream.bytesAvailable);
    
    loader = new Loader();

    loader.contentLoaderInfo
     .addEventListener(Event.COMPLETE, completeEventHandle);

    loader.contentLoaderInfo
     .addEventListener(IOErrorEvent.IO_ERROR, ioErrorEventHandler);

    loader.loadBytes(byteArray);
   }

   private function completeEventHandle(event:Event):void {

    if (loader.content is Bitmap) {
     image.data = loader.content;
    }
   }

   private function ioErrorEventHandler():void {
    Alert.show("画像を読み込めませんでした。");
   }

  ]]>
 </mx:Script>

 <mx:Canvas id="canvas" x="0" y="0" width="100%" height="100%" backgroundColor="#FFFFFF">
  <mx:Image id="image" horizontalCenter="0" verticalCenter="0"/>
 </mx:Canvas>
 
</mx:WindowedApplication>

■実行結果

AIRでディスプレイの情報を取得する

2008-03-10T21:11:00.007+09:00

AIRでディスプレイの幅・高さ・色深度を取得するには「flash.display.Screen」クラスを使用します。Screenクラスに定義されている静的フィールド「screens」・「mainScreen」からScreenクラスのインスタンスを取得してフィールドにアクセスします。

screensには「Screen」クラスのインスタンスを格納した「Array」が、mainScreentはメインとなるディスプレイのScreenクラスのインスタンスが設定されています。

下記にサンプルを掲載します。


var screenArray:Array = Screen.screens;

for (var i:int = 0; i < screenArray.length; i++) {

 var screen:Screen = screenArray[i] as Screen;
 trace(screen.colorDepth);
 trace(screen.bounds.width);
 trace(screen.bounds.height);
}

■実行結果


色深度: 32
幅: 1440
高さ: 900

AIRからSQLiteを使用する

2008-03-08T18:45:00.006+09:00

AIRでは「flash.data」パッケージのクラスを使用するとSQLiteというデータベースを使用することができます。

JavaのJDBCを使用した経験があれば、すぐに理解できると思います。(非同期なことを除けば)

簡単なサンプルを作成したので掲載します。このサンプルではSQLiteのデータベースにアクセスしてテーブルのデータを取得し、グリッドコンポーネントに表示しています。


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteEventHandle()">

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;

   private var conn:SQLConnection;
   private var stmt:SQLStatement;

   private function applicationCompleteEventHandle():void {

    var dbFile:File
     = File.applicationStorageDirectory.resolvePath("local.db");

    conn = new SQLConnection();

    conn.addEventListener(SQLEvent.OPEN, databaseOpenEventHandle);
    conn.addEventListener(SQLErrorEvent.ERROR, databaseOpenErrorEventHandle);

    conn.open(dbFile);
   }

   private function closeEventHandle():void {

    if (conn != null) {
     conn.close();
    }
   }

   private function databaseOpenEventHandle(event:SQLEvent):void {
    readCustomerData();
   }

   private function databaseOpenErrorEventHandle(event:SQLErrorEvent):void {
    Alert.show("データベースに接続できませんでした。", "データベース");
   }

   private function readCustomerData():void {

    stmt = new SQLStatement();
    stmt.sqlConnection = conn;
    stmt.text = "SELECT ID, NAME, ADDRESS FROM CUSTOMERS";

    stmt.addEventListener(SQLEvent.RESULT, queryExecuteResultEventHandle);
    stmt.addEventListener(SQLErrorEvent.ERROR, queryExecuteErrorEventHandle);

    stmt.execute();
   }

   private function queryExecuteResultEventHandle(event:SQLEvent):void {

    var result:SQLResult = stmt.getResult();

    var dataSource:ArrayCollection = new ArrayCollection();

    for (var i:int = 0; i < result.data.length; i++) {

     var obj:Object = new Object();
     obj["id"] = result.data[i]["ID"];
     obj["name"] = result.data[i]["NAME"];
     obj["address"] = result.data[i]["ADDRESS"];
     dataSource.addItem(obj);
    }

    customersGrid.dataProvider = dataSource;
   }

   private function queryExecuteErrorEventHandle(event:SQLErrorEvent):void {
    Alert.show("SQL実行時にエラーが発生しました。", "データベース");
   }

  ]]>
 </mx:Script>
 <mx:VBox y="0" height="100%" width="100%" x="0" verticalGap="0">
  <mx:Canvas width="100%" height="100%">
   <mx:DataGrid id="customersGrid" width="95%" height="95%" horizontalCenter="0" verticalCenter="0">
    <mx:columns>
     <mx:DataGridColumn headerText="顧客番号" dataField="id"/>
     <mx:DataGridColumn headerText="顧客名" dataField="name"/>
     <mx:DataGridColumn headerText="住所" dataField="address"/>
    </mx:columns>
   </mx:DataGrid>
  </mx:Canvas>
 </mx:VBox>

</mx:WindowedApplication>

■実行結果

SQLiteのデータベースファイルを指定する際に「File.applicationStorageDirectory」を使用しています。これはWindowsXPでは「Documents And Settings/ユーザ名/ApplicationData/アプリケーション名/Local Data」を指しているようです。

そのうちAdobe AIR用のO/Rマッピングソフトが流行りそうですね。(もう存在するのでしょうか？)

AIRでWebサイトを表示する

2008-03-07T22:18:00.002+09:00

AIRではHTMLクラスを使えば簡単に任意のWebサイトを表示することができます。
Flex2ではいろいろ細工をすれば表示できましたがAIRでは驚くほど簡単にできます。

下記がサンプルです。


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="RiverStone">

   <mx:Script>
       <![CDATA[

           private function addressKeyDownEventHandle(event:KeyboardEvent):void {

               if (event.keyCode == Keyboard.ENTER) {
                   browser.location = address.text;
               }
           }

       ]]>
   </mx:Script>

   <mx:VBox x="0" y="0" height="100%" width="100%" verticalGap="2">
       <mx:HBox width="100%" height="50" verticalAlign="middle" horizontalGap="2" paddingLeft="5" paddingRight="5">
           <mx:Button id="backButton" width="45" height="40" click="{browser.historyBack()}" label="戻る"/>
           <mx:Button id="forwardButton" label="進む" width="45" height="40" click="{browser.historyForward()}"/>
           <mx:Button id="stopButton" label="中止" width="45" height="40" click="{browser.cancelLoad()}"/>
           <mx:TextInput id="address" width="100%" keyDown="addressKeyDownEventHandle(event)"/>
       </mx:HBox>
       <mx:HTML id="browser" width="100%" height="100%" location="http://www.r-stone.net/"/>
   </mx:VBox>

</mx:WindowedApplication>

■実行結果

HTMLクラスの「historyBackメソッド」でブラウザの戻る、「historyForwardメソッド」でブラウザの進む、「cancelLoadメソッド」でブラウザの中止と同様の処理を行うことができます。

その他にも履歴情報を取得できたり、HTMLコントロールで表示しているHTMLのDOM情報にもアクセスできるようです。

AIRのFileSystemDataGridを使ってみました

2008-03-06T22:23:00.003+09:00

Flex3の「FileSystemDataGrid」クラスを使用すれば、ローカルにあるディレクトリの中身を表示することができます。

簡単ですがサンプルを作成しました。


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.events.FileEvent;

   private function fileChooseEventHandle(event:FileEvent):void {
    Alert.show(event.file.nativePath);
   }   

  ]]>
 </mx:Script>

 <mx:FileSystemDataGrid id="grid" horizontalCenter="0" width="90%" height="80%" directory="{File.documentsDirectory}" fileChoose="fileChooseEventHandle(event)" verticalCenter="0"/>
 <mx:Button x="45" y="10" label="上へ" enabled="{grid.canNavigateUp}" click="{grid.navigateUp()}"/>
 <mx:Button x="99" y="10" label="下へ" enabled="{grid.canNavigateDown}" click="{grid.navigateDown()}"/>
 <mx:Button x="153" y="10" label="戻る" enabled="{grid.canNavigateBack}" click="{grid.navigateBack()}"/>
 <mx:Button x="207" y="10" label="進む" enabled="{grid.canNavigateForward}" click="{grid.navigateForward()}"/>
 
</mx:WindowedApplication>

■実行結果

「FileSystemDataGrid」クラスには上下のディレクトリに移動するメソッドや、ブラウザの戻る・進むボタンのような動きをするメソッドもあります。

他にも表示する内容をフィルタリングできたり、ソートすることもできます。

なかなか高機能ですよね。

ActionScript3のE4Xでハイフンを含む属性の扱い

2008-03-05T22:45:00.001+09:00

ActionScript3のE4Xでハイフンを含む属性の値を取得する場合、通常のように@属性名ではコンパイルエラーとなってしまいます。

E4Xでハイフンを含む属性値を取得する場合は、下記のようにすれば取得することができます。


var customers:XML =
    <customers>
        <customer customer-id="001">佐藤工業</customer>
        <customer customer-id="002">田中建築</customer>
    </customers>;
                trace(customers.customer[0].@["customer-id"]);

「@」の後ろを角かっこで囲み、角かっこの中に属性名を文字列型で指定します。
E4Xを使い始めた当初は、この方法がわからず小一時間ほど調べました。

Adobe AIRのNativeWindowクラス

2008-03-02T19:02:00.006+09:00

Adobe AIRでネイティブのデスクトップウィンドウを作成するには「flash.display.NativeWindow」クラスを使用します。

NativeWindowを作成する初期化オプション「flash.display.NativeWindowInitOptions」をNativeWindowのコンストラクタ渡してNativeWindowの「activateメソッド」を呼び出せばウィンドウが表示されます。

NativeWindowInitOptionsクラスの「type」プロパティに、NativeWindowTypeに定義してある定数を設定すればウィンドウの種別を変更できるようです。

下記にサンプルを掲載します。


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 <mx:Script>
  <![CDATA[
   import mx.core.Window;

   private function newWindowButton1ClickHandle():void {

    var options:NativeWindowInitOptions = new NativeWindowInitOptions();
    options.type = NativeWindowType.NORMAL;

    var win:NativeWindow = new NativeWindow(options);
    win.title = "NORMAL";
    win.width = 200;
    win.height = 200;
    win.stage.addChild(createTextField("サンプル"));

    win.activate();

   }

   private function newWindowButton2ClickHandle():void {

    var options:NativeWindowInitOptions = new NativeWindowInitOptions();
    options.type = NativeWindowType.LIGHTWEIGHT;

    /* NativeWindowTypeがLIGHTWEIGHTの場合はsystemChromeをNONEにする */
    options.systemChrome = NativeWindowSystemChrome.NONE;

    var win:NativeWindow = new NativeWindow(options);
    win.title = "LIGHTWEIGHT";
    win.width = 200;
    win.height = 200;
    win.stage.addChild(createTextField("サンプル"));
    win.activate();

   }

   private function newWindowButton3ClickHandle():void {

    var options:NativeWindowInitOptions = new NativeWindowInitOptions();
    options.type = NativeWindowType.UTILITY;

    var win:NativeWindow = new NativeWindow(options);
    win.title = "UTILITY";
    win.width = 200;
    win.height = 200;
    win.stage.addChild(createTextField("サンプル"));
    win.activate();
   }

   private function createTextField(text:String):TextField {

    var button:TextField = new TextField();
    button.text = text;
    button.width = 100;
    button.height = 20;
    return button;
   }

  ]]>
 </mx:Script>

 <mx:Canvas x="0" y="0" width="100%" height="100%" backgroundColor="#FFFFFF">
  <mx:Button id="newWindowButton1" x="10" y="10" label="新しいウィンドウ1" click="newWindowButton1ClickHandle()"/>
  <mx:Button id="newWindowButton2" x="10" y="40" label="新しいウィンドウ2" click="newWindowButton2ClickHandle()"/>
  <mx:Button id="newWindowButton3" x="10" y="70" label="新しいウィンドウ3" click="newWindowButton3ClickHandle()"/>
 </mx:Canvas>

</mx:WindowedApplication>

■上記のプログラムを実行すると表示されるウィンドウ

■NativeWindowType.NORMALのウィンドウ

■NativeWindowType.LIGHTWEIGHTのウィンドウ

■NativeWindowType.UTILITYのウィンドウ

Flex2ではコンテナにコンポーネントを追加する場合、コンテナの「addChild」メソッドを呼び出してコンポーネントを追加していましたが、NativeWindowクラスではNativeWindowのプロパティ「stage」に対して「addChild」を呼び出し追加するようです。

しかし、私の環境ではFlexのコンポーネントをNativeWindowに追加することができませんでした。これはベータ版のときの制約だったようですが、正式にリリースされたバージョンでも対応していないようです。

Flex Scheduling Framework

2008-02-29T23:11:00.006+09:00

Adobe Labsにスケジュールコンポーネント用のフレームワーク「Flex Scheduling Framework」が公開されています。

簡単ですがサンプルを作成したので掲載します。


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="flexlib.scheduling.*" applicationComplete="applicationCompleteHandle()" backgroundGradientColors="[#c0c0c0, #c0c0c0]">

 <mx:Script>
  <![CDATA[

   import mx.collections.ArrayCollection;
   import mx.collections.IList;
   import flexlib.scheduling.scheduleClasses.ColoredScheduleEntry; 
   import flexlib.scheduling.scheduleClasses.SimpleScheduleEntry;

   [Bindable]
   private var start:Date;

   [Bindable]
   private var end:Date;

   [Bindable]
   private var dataProvider:ArrayCollection;

   private function applicationCompleteHandle():void {

    start = new Date(2008, 0, 1, 9, 0, 0);
    end = new Date(2008, 0, 1, 17, 59, 59);

    var entries:ArrayCollection = new ArrayCollection();

    var row1:IList = new ArrayCollection();    
    var entry1:ColoredScheduleEntry = new ColoredScheduleEntry();
    entry1.startDate = new Date(2008, 0, 1, 9, 30, 0);
    entry1.endDate = new Date(2008, 0, 1, 11, 59, 59);
    entry1.label = "会議";
    entry1.backgroundColor = 0x663333;
    row1.addItem(entry1);

    var row2:IList = new ArrayCollection();
    var entry2:ColoredScheduleEntry = new ColoredScheduleEntry();
    entry2.startDate = new Date(2008, 0, 1, 13, 0, 0);
    entry2.endDate = new Date(2008, 0, 1, 15, 59, 59);
    entry2.label = "プログラミング";
    entry2.backgroundColor = 0x336633;

    row2.addItem(entry2);

    entries.addItem(row1);
    entries.addItem(row2);

    dataProvider = entries;
   }

  ]]>
 </mx:Script>

 <mx:VBox x="0" y="0" height="100%" width="100%" verticalGap="0">
  <ns1:Timeline id="timeline" width="800" height="20" startDate="{start}" endDate="{end}"/>
  <ns1:ScheduleViewer id="scheduleViewer" width="800" height="300" startDate="{start}" endDate="{end}" dataProvider="{dataProvider}" entryLayout="flexlib.scheduling.scheduleClasses.layout.SimpleLayout" entryRenderer="flexlib.scheduling.scheduleClasses.renderers.ColoredSolidScheduleEntryRenderer" x="53" y="143"/>
 </mx:VBox>
 
</mx:Application>

下記の画像が実行結果

タイムラインを表示するコンポーネントとスケジュールを表示するコンポーネントは分かれているようです。

タイムラインを表示するには「flexlib.scheduling.Timeline」クラスを使用し、スケジュールを表示するには「flexlib.scheduling.ScheduleViewer」クラスを使用します。

スケジュールをドラッグ&ドロップで移動できるといいのですが、軽くドキュメントを見た限りでは見つかりませんでした。対応しているのでしょうか？

FlexBuilder3を使ってみて

2008-02-28T21:22:00.003+09:00

FlexBuilder3が正式にリリースされたので使ってみました。
私の感想ですがFlexBuilder2と比べて格段に良くなったと感じました。

一番嬉しいのはリファクタリングの名前の変更ができるようになったことです。
今まではこの機能がなかったので、クラスの名前を変更したい場合は大変でした。

FlexBuilder3ではFlex2のアプリケーションを開発できないと思っていましたが･･･
FlexBuilder3からEclipseのJDTがJDKを変更できるのと同じように、FlexのSDKを変更できます。

他にも、UIをデザインする画面で拡大できるようになったり、UIコンポーネントの背景色を選択するカラーピッカーが使いやすくなったりと、細かいところもいろいろ変更されているようです。

私はまだ使用していませんが、プロファイリング機能が追加されたのでパフォーマンスチューニングも楽になりそうですね。

Flex2のnavigateToURL

2008-02-27T22:03:00.004+09:00

Flex2から任意のURLを新しいブラウザで開きたい場合は「flash.net.navigateToURL」関数を使用すると簡単にできます。

navigateToURLの第一引数には「URLRequest」のインスタンスを、第二引数にはリクエスト結果を表示するウィンドウを指定します。

リクエストメソッドとして「POST」を使用したい場合は「URLRequest」の「method」プロパティに「URLRequestMethod.POST」を設定します。

第二引数はHTMLのAタグに指定する「target」属性のようなもので新しいブラウザを開きたい場合は「_blank」、現在のウィンドウで開きたい場合は「_self」を指定します。

下記にサンプルを掲載します。


var request:URLRequest = new URLRequest("http://www.google.com/");
request.method = URLRequestMethod.POST;
navigateToURL(request, "_blank");

これを実行すると新しいブラウザが開き、GoogleのWebサイトが表示されます。

Flex2でXMLオブジェクトに変数の値を埋め込む

2008-02-25T20:35:00.004+09:00

Flex2ではXMLオブジェクトにXMLデータをリテラルで設定する際に、変数の値を埋め込むことができます。

変数を埋め込むにはスコープ上に存在する変数名を「{}」で囲みます。
例えば変数「name」を埋め込む場合は「{name}」となります。

これはXMLの構造が変化しないデータを扱うときに大変便利です。
下記に簡単ですがサンプルを掲載いたします。


var id:int = 100;
var name:String = "山田太郎";

var xml:XML =
 <employees>
  <employee id={id}>{name}</employee>
 </employees>;

trace(xml.toXMLString());

このプログラムを実行するとコンソールに下記のメッセージが表示されます。


<employees>
  <employee id="100">山田太郎</employee>
</employees>

Python2.5のwith文

2008-02-24T17:14:00.005+09:00

Python2.5からwith文が導入されました。with文を使用すればtry文のfinally節で行っていた後処理が明快に記述できます。

例えばファイルを開いてデータを読み出してからクローズする場合は下記のようになります。


#!/usr/bin/env python
# -*- coding: utf-8 -*-

from __future__ import with_statement

# try finallyを使用
try:
 file = open(r"C:\test.txt", "r")
 for line in file:
  print line
finally:
 file.close()

# withを使用
with open(r"C:\test.txt", "r") as file:
 for line in file:
  print line

今回、MySQLに接続してクエリを実行してから接続を閉じる処理をwith文で作成してみたので掲載したいと思います。


#!/usr/bin/env python
# -*- coding: utf-8 -*-

from __future__ import with_statement

import MySQLdb

class MySQLConnector(object):

 def __init__(self, username, password):
  self.username = username
  self.password = password

 def __enter__(self):
  self.connection = MySQLdb.connect(db="test", host="localhost", port=3306, user=self.username, passwd=self.password)
  self.cursor = self.connection.cursor()
  print "called __enter__"
  return self.cursor

 def __exit__(self, type, value, tb):
  self.cursor.close()
  self.connection.close()
  print "called __exit__"


if __name__ == '__main__':

 with MySQLConnector("testuser", "testpassword") as cursor:
  cursor.execute("select * from testdata")
  for row in cursor.fetchall():
   print row

上記のサンプルを説明すると、with文は最初に「__enter__」メソッドを呼び出し、with文から抜け出すときに「__exit__」メソッドを呼び出します。
「__enter__」メソッドの戻り値がwith文の変数(上記のサンプルでは「as cursor」の部分です)に代入されるようです。

※with文の中で例外が発生した場合でも「__exit__」メソッドが呼び出されます。

SQLiteのデータを操作するツール

2008-02-23T18:27:00.006+09:00

SQLiteのデータをコマンドから操作するのが面倒になり、データを操作する便利なツールがないかWebで捜したところ･･･

2つありました。「SQLiteCC」と「SQLite Database Browser」という名前のツールです。
両方使ってみた結果、私としては「SQLite Database Browser」の方が使いやすく感じました。

SQLiteCCはデータを更新すると強制終了されるのと、テーブルを作成できないので最近は使用していません。

なので、最近は「SQLite Data Browser」を使用しています。
ちょっとしたデータを格納するのにSQLiteは手軽で便利ですよね。

SQLiteについては下記の書籍が一番まとまっています。

mx.controls.textClasses.TextRangeクラス

2008-02-22T21:10:00.004+09:00

以前から気になっていたFlex2のTextRangeクラスを使ってみました。このクラスを使用すれば「TextInput」や「TextArea」に表示されている文字のスタイルを変更することができます。

例えば「editor」というidの「TextArea」に表示されている文字の選択部分を太字にしたい場合は･･･


var textRange:TextRange = new TextRange(editor, true);
textRange.fontWeight = "bold";

とすればOKです。
TextRangeクラスのコンストラクタの第一引数には「TextInput」や「TextArea」などのインスタンスを、第２引数はtrueを設定します（詳細はリファレンスを参照ください)。

文字を太字にする以外にも、下記のようにたくさんのスタイルを設定できるようです。
　・文字の色
　・文字の書体
　・文字の大きさ
　・カーニング
　・文字間
　・文字の整列
　・斜体
　・文字にリンクを設定

正規表現の書籍

2008-02-21T21:25:00.001+09:00

仕事で正規表現を使う機会は割と多いと思います。正規表現について一番体系的にまとまっているのはオライリーの「詳説正規表現」ですよね。（来月に第3版がでるようです）

この本は詳しい情報が掲載されているのですが、手軽に手早く調べるのには向いていません。（じっくり精読するタイプです）

持ち運びやすく、手軽に手早く調べるには下記の書籍がおすすめです。

対応処理系も掲載されていて、持ち運びやすく大変重宝しています。

BeautifulSoupである属性が存在する要素を抽出

2008-02-20T21:41:00.005+09:00

BeautifulSoupである属性が存在する要素を抽出するには、findAllメソッドにキーワード引数を渡して使用するようです。具体的にはキーワード引数名に捜したい属性名を、値にTrueを設定してfindAllメソッドを呼び出します。

例えば「href属性」が存在する要素を取得する場合は下記のようになります。


soup.findAll(href=True)

となります。
簡単ですが、サンプルを作成したので掲載します。


#!/usr/bin/env python
# -*- coding: utf-8 -*-

import sys
import codecs
import re

from BeautifulSoup import BeautifulSoup
from BeautifulSoup import NavigableString
from BeautifulSoup import Tag

sys.stdout = codecs.getwriter('cp932')(sys.stdout)

html = """
<div>
 <a href="http://www.google.com/" onclick="testMethod1">Google</a>
 <a href="http://www.yahoo.co.jp/" onclick="testMethod2">Yahoo! Japan</a>
 <a href="http://www.r-stone.net/" onblur="testMethod3">RiverStone</a>
</div>

"""

soup = BeautifulSoup(html)

for tag in soup.findAll(onclick=True):
 print tag

上記のプログラムを実行すると、コンソールに下記のメッセージが表示されます。


<a href="http://www.google.com/" onclick="testMethod1">Google</a>
<a href="http://www.yahoo.co.jp/" onclick="testMethod2">Yahoo! Japan</a>