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

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

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

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

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

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

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


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

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

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プロジェクトを作成

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

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

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


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


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

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

Androidの開発環境

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がおすすめ

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

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



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

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

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

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

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

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でディスプレイの情報を取得する

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