八角研究所 : JavaScript使いのためのAIR入門（5） - AIRとjQueryで作る簡単プレゼンツール

JavaScript使いのためのAIR入門（5） - AIRとjQueryで作る簡単プレゼンツール

JavaScriptでデスクトップアプリケーションを作ることができるAIRを紹介しています。5回目の今回は、JavaScriptのライブラリとして人気の jQuery を使って、AIR アプリケーションを作ってみます。

前回までのおさらい

1回目では、AIRのインストールと簡単なテストの方法を紹介しました。2回目では、作ったアプリケーションに署名して、AIRの配布パッケージを作成する方法を紹介しました。3回目では、AIR APIを使ってファイルを操作する方法を紹介しました。AIR APIを利用することで、WebブラウザのJavaScriptでは実現できないこともいろいろできます。

そして、前回(4回目)は、オンラインとオフラインの切り替えを判定してオフラインで使える掲示板を作りました。オフラインの時も、閲覧や書き込みができて、オンラインになったときに、これまで貯めていた書き込みを送信する仕組みを実現しました。

JavaScript使いのためのAIR入門(4)～オフラインで動かすオンラインアプリ
http://www.hakkaku.net/articles/20080108-131
JavaScript使いのためのAIR入門(3)～AIR APIを使ってみる
http://www.hakkaku.net/articles/20071228-130
JavaScript使いのためのAIR入門(2)～開発から配布まで
http://www.hakkaku.net/articles/20071225-123
JavaScript使いのためのAIR入門(1)～実行してみる
http://www.hakkaku.net/articles/20071219-120

今回は、JavaScript のライブラリを利用して、AIR アプリケーションを作ってみます。

AIR 製作ツールの中で JavaScript が優れている理由

これまで何度も紹介していますが、AIR アプリを作るのには、JavaScript 以外にも、Flash や Flex を使った方法が用意されています。FlashやFlexを使わず、JavaScriptを利用して、AIR を作ることには、いろいろなメリットがあります。

以下に Flash/Flex/JavaScript の中で JavaScript で作ることの利点を列挙してみました。

実行するのにコンパイル不要
インタプリタである、eval が使える
お気に入りのエディタやHTMLツールがそのまま使える
既存の JavaScript ライブラリがそのまま使える
これから始める場合も、JavaScript なので習得が容易である

まず、インタプリタなのでコンパイルが不要なことや、すぐ実行が行われることは大きなことです。いろいろ試したいときに、実行されるまでに時間がかかったとしたら、ストレスが溜まります。Flash や Flex で実行する場合には、SWF形式へのコンパイルが必要になります。

また、既存の JavaScript のライブラリが使えることは非常に大きいでしょう。これまでに習得した技術を利用して AIR アプリが作れるのは大きいです。加えて、お気に入りのエディタがそのまま使えるというのは、嬉しいことです。

AIR + jQuery で作るプレゼンツール

それでは、JavaScript のライブラリの中で、軽量・お手軽で人気の jQuery を利用してプレゼンツールを作ってみようと思います。AIR の JavaScript では、Ext JS がよく使われるようです。しかし、他のライブラリも問題なく使えるということを試すために、敢えて jQuery で作ってみることにしました。

以下が適当に作ってみたプレゼンツールです。

→プレゼンツールをダウンロード

普通の Web ブラウザでも動きますが、デスクトップアプリになっている分、間違って [F11]キーなどを押してしまったときでも、誤動作をおこすことがありませんし、起動も非常に軽快です。

プレゼンツールの使い方

プレゼンデータを記述する場合は、data.txt というファイルに、テキストを書いていくだけです。ページを変えるときは「—-」と区切り線を書きます。そして行の一文字目に「*」を書くとタイトルで、「-」を書くとリスト、「@」を書くと画像を挿入するという単純なものです。

jQuery の基本を確認

それでは、jQuery の簡単な使い方を確認してみます。jQuery は、Ajax で有名な prototype.js よりも、軽量で手軽に利用できるライブラリです。以下のサイトよりダウンロードできます。

http://jquery.com/

jQuery では、HTMLのDOM要素の選択が非常に簡単です。IDの取得は「$(’#id’)」のようになります。以下は、id の HTML をダイアログに表示します。

alert( $('#id').html() );

div タグの menu クラスを選択する場合は、次のようになります。

alert( $('div.menu').html() );

また、要素を選択すると、jQuery オブジェクトが返ってきます。そして、メソッドに値を設定すると、さらに、jQuery オブジェクトが返ってくるので、それに対して、さらに別のメソッドを指定することができます。

次の特徴として、メソッドチェーンを利用して、メソッドを次々と記述していくことができます。以下は、id が title である要素をスライドして閉じて、「test」と書き込んで、開くのをスライド表示させる例です。

$('#title')
   .slideUp("fast")
   .html("test")
   .slideDown("slow");

イベントの記述も簡単です。以下は、source クラスを持つタグをクリックするとその内容を alert で表示するものです。

$('.source').click(function(){
  alert($(this).html());
});

プレゼンツールの製作

それでは、jQuery でプレゼンツールを作ってみます。まずは、必要となるファイルを用意しましょう。

はじめに、AIR のアプリケーションの設定ファイル（XML形式の設定ファイル）を作ります。これは、以下のようなもので、「slide.xml」という名前で保存します。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">

 <id>com.kujirahand.test.slide</id>
 <version>0.1</version>
 <filename>Slide</filename>
 <initialWindow>

  <content>slide.html</content>
  <visible>true</visible>
  <width>1024</width>
  <height>768</height>

 </initialWindow>
</application>

次に、アプリケーションの本体であるHTMLファイル「slide.html」を作ります。これは、上記の slide.xml の initialWindow の content で指定します。まずは、雛形を示します、以下のような内容にします。

<html>
<head>
<title>Slide</title>
<link rel="stylesheet" type="text/css" href="slide.css" />

<!-- includes -->
<script type="text/javascript" src="AIRAliases.js"></script>
<script src="jquery-1.2.1.js"></script>
<script type="text/javascript">
</script>

</head>
<body>
<div id="head">
  <div class="msg"><div id="msg"></div></div>
  <div class="title"><div id="title"></div></div>

</div>
<div id="disp"></div>
</body>
</html>

このHTMLファイルから取り込まれるファイルは以下のものです。次のファイルを用意します。

AIRAliases.js
jquery-1.2.1.js
slide.css

「AIRAliases.js」は前回も紹介しましたが、AIRの機能を使うのに便利なエイリアスを定義したファイルで、SDKのframeworkディレクトリにあります。これをプロジェクトのファイルへコピーしておきます。

次に、jQuery を利用するので、「jquery-x.x.x.js」 (xはバージョン番号)のファイルを jQuery のサイトから、そして、プレゼン用に「slide.css」というCSSファイル、

それから、手軽にテスト実行できるように、Windowsのバッチファイルを作っておきます。AIR SDK のフォルダにパスが通っていれば、以下のように書くだけで十分でしょう。

adl slide.xml

ちなみに、日本語プログラミング言語「なでしこ」を利用することで、さらに手軽にテストを実行できるようになります。以下はなでしこのプログラムですが、これを「簡単実行.nako」という名前で、プロジェクトのフォルダに保存します。（この時、プログラムの５行目にある、AIR SDK のパスを正しく設定してください。）

そしてダブルクリックで実行しておきます。そして、「Ctrl+Shift+S」というホットキーを押すことで、AIR のプログラムが実行されるようになります。これは、Windows のホットキーを利用したテクニックですが、なでしこを利用することで手軽にバッチ処理を記述することができます。

# -------------------------
# AIR を手軽にテスト実行
# -------------------------
# 設定
SDK=「C:\air_sdk_b3\bin\」
母艦を最小化。
「Ctrl+Shift+S」に「実行処理」をホットキー登録。
●実行処理
　　「"{SDK}adl.exe" "{母艦パス}slide.xml"」を起動。

以下、プレゼンツールの肝となる部分を短く紹介します。

プレゼンデータのロード

プレゼンデータをロードするには、次のように書くだけでした。これは、jQuery の素晴らしい機能のおかげです。ちなみに、AIR のプロジェクトフォルダにある data.txt をロードします。

$(function(){
  // データのロード
  $('<p>').load('data.txt', function(str){
    // ロード完了時の処理
    // str をパースして配列に保存
  });
  //...
}

ページめくり処理

Enterキーやカーソルキーに応じて、プレゼンのページをめくる処理は、keydown イベントを設定します。こちらは、ページめくりの全プログラムです。ポイントとなるのは、$(document).keydown にキーを押した時のイベント関数を指定することです。この時、引数の e.keyCode でキーコードを得ることが出来ます。

  $(document).keydown(function(e){
    var code = e.keyCode;
    if ( code == 39 || code == 13 ) { // next - enter
      slide.page++;
      if (slide.data.length <= slide.page) slide.page = 0;
      slide.show();
      return false;
    }
    if ( code == 37 || code == 8 ) { // prev - back
      slide.page--;
      if (slide.page < 0) slide.page = slide.data.length - 1;
      slide.show();
      return false;
    }
    return true;
  });

まとめ

以上、簡単でしたが、簡単なプレゼンツールを作ってみました。JavaScriptのライブラリ jQuery を使うことで、本当に簡単にプログラムを作ることができました。しかも、AIR にばっちり対応していることも確認できました。

これで、プレゼン本番では、AIR版を利用し、プレゼン後の資料配布用としては、Web版をなんの苦労もなく配布できるようになりました。

Series Navigation«オフラインで動かすオンラインアプリ

Posted by クジラ飛行机 | 2008年01月22日 08:36 | permalink

このサイトについて

株式会社八角研究所のWEBサイトですよー。いろんなものを創り出すことのできる環境をコツコツ構築中。いったい、いつになったらできるのか。この技術情報サイトもそのための活動の一環のつもり。

執筆者紹介

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

サイト内検索

執筆者一覧

syndicate this site