Adobe AIR - タイトルバーのないウィンドウを移動する

AIRでは、通常のウィンドウと同様にタイトルバーが存在するシステムクロムとタイトルバーが存在しないカスタムクロムと呼ばれるウィンドウがあります。

ウィンドウには、ウィンドウの種類(Type)や透明度(Transparent)を指定することが出来ます。

独自デザインのウィンドウを作成する場合、カスタムクロムでウィンドウを作成します。

ここでは、HTMLベースのAIRでタイトルバーが存在しないウィンドウを作成しマウスでウィンドウを動かせるようにします。

カスタムクロムのイメージ

カスタムクロムでウィンドウを作成する

カスタムクロムでウィンドウを作成するには、アプリケーション記述ファイルのsystemChromeへ noneを指定します。

また、透過するようにするにはtransparentにtrueを指定します。

ここでは、次のようなアプリケーション記述ファイルを作成しました。

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
    <id>net.bnote.custom</id>
    <filename>custom</filename>
    <name>custom</name>
    <version>0.1</version>
    <copyright>bnote</copyright>
    <initialWindow>
        <content>main.html</content>
        <systemChrome>none</systemChrome>
        <transparent>true</transparent>
        <visible>true</visible>
        <width>120</width>
        <height>80</height>
        <x>0</x>
        <y>0</y>
    </initialWindow>
</application>

HTMLとスタイルシートを作成

JavaScriptの指定とスタイルシートを指定した単純なHTMLを作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script src="./lib/air/AIRAliases.js" type="text/javascript"></script>
<script src="./lib/air/AIRIntrospector.js" type="text/javascript"></script>
<script src="./js/main.js" type="text/javascript"></script>
<title>loading sample</title>
</head>
<body id="background" onLoad="initialize()">
</body>
</html>

スタイルシートを次のように作成します。

スタイルシートにpositionをfixedで指定することがポイントになるようです。

* {
    margin: 0;
    padding: 0;
}
#background {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image:url('../img/bk.png');
}

ここでは、アプリケーション記述ファイルに指定したウィンドウサイズと同じ大きさの画像を用意し、背景に指定しています。また、透明度を指定した画像を用意し背景を透過するようにしています。

タイトルバーのないウィンドウの移動(main.js)

カスタムクロムでウィンドウを移動するには、NativeWindowのstartMoveメソッドを使います。

startMoveメソッドは、mouseDownで移動シーケンスを開始し、mouseUpイベントが発生するまで移動を続行します。HTMLのbodyでmousedownイベントを受けstartMoveメソッドで移動するように JavaScriptを作成します。

function initialize(){
    var bk = document.getElementById("background");
    bk.addEventListener("mousedown",onMove,true);
}
var onMove = function(event){
    nativeWindow.startMove();
}

[サンプル]