手順(5) PNGファイルをプロジェクトフォルダにコピーする

冒頭で用意したウィンドウの背景画像「back.png」をプロジェクトのフォルダにコピーします。エクスプローラーから、画面左のProjectパネルで「TodoMemo」の上にドラッグ&ドロップすることでコピーできます。

ドラッグ&ドロップで素材をプロジェクトにコピーできます

手順(6) プログラムの実行

あとは、画面上部の実行ボタンをクリックすれば完成です。吹き出し型のTODOメモの完成です。

TODOメモの完成です

プログラムの解説～ウィンドウを不定形にする

このプログラムの肝は、ウィンドウを不定形にする部分でしょう。ウィンドウの形を吹き出し型にしたことで、見栄えを良くすることができています。

このためには、Aptanaの設定で、ウィンドウを不定形にする設定を行うこと、そして、背景画像のPNGファイルの背景を透明に設定することの2点が必須条件となります。

次に、標準のウィンドウにあるようなタイトルバーや終了ボタンをなくしてしまうので、このためのコードを記述する必要があります。上記のプログラム中では、jQuery を使っていますので、少し見慣れない形になっているかもしれませんが、BODYタグに次のようなコードを書くことでも対応できます。

<body
  onmousedown="window.nativeWindow.startMove()"
  ondblclick="window.close()">

他にも、AIRの機能を利用して、入力したテキストを、ローカルファイルへ保存する処理を行っています。