Ajax 技術を使って Web プレゼンテーション・アプリケーションを構築する: 第 1 回 Web UI の開発

Google Docs では、あれほど驚異的な機能を Web アプリケーションに組み込むための手段として Web 2.0 技術を利用しています。Web 2.0 技術では、比較的単純なコードで堅牢な機能を実現することができます。この記事を読んで、Ajax (Asynchronous JavaScript and XML) 技術によってスライドショー・プレゼンテーションを作成する Web アプリケーションの構築方法を学んでください。

Zhi Bo Zuo, Software Engineer, IBM  

Photo of Zhi Bo ZuoZhi Bo Zuo は、中国・北京にある Lotus Notes/Domino Core チームのソフトウェア・エンジニアです。現在は、ソフトウェア・グローバリゼーションと Web 2.0 技術を専門に取り組んでいます。



Xin Rang Wang, Staff Software Engineer, IBM  

Photo of Xin Rang WangXin Rang Wang は、中国・北京にある Lotus Notes/Domino Core チームのソフトウェア・エンジニアです。現在、彼女が専念しているのは、ドメイン・ベースの技術と Web 2.0 技術です。



Wei Dong Xue, Intern

Wei Dong Xue は、中国・北京にある Lotus Notes/Domino Core チームのインターンです。彼は Web 2.0 技術に興味を持っています。



Ming Zhao, Intern, IBM  

Ming Zhao は、中国・北京にある Lotus Notes/Domino Core チームのインターンです。彼は Web 2.0 技術に興味を持っています。



2009年 7月 28日

はじめに

Web 2.0 技術が企業のファイアウォールの背後でその実力を示し始めている今、より多くの企業が Web 2.0 を利用して真のビジネス価値を実現しようとしています。私たちは、Google Docs を初めて目にしたときショックを受けました。あれほど複雑なアプリケーションを、Web であれほど見事に実現できるとは驚きです。そこで、この 3 回の連載では Ajax 技術を使用して Google Docs のような Web アプリケーションを構築する方法を説明します。一般的なオフィス文書には、テキスト、スプレッド・シート、プレゼンテーションの 3 種類がありますが、この連載で焦点とするのはプレゼンテーションの形式です。

第 1 回では、ユーザー・インターフェース (UI) の設計に目を向けます。UI は、オンライン・アプリケーションでは最も重要な側面の 1 つです。ユーザーは使い慣れたソフトウェアを使いたがるものなので、洗練されていてしかも馴染みのあるプレゼンテーション GUI を Web 上に作成することが、このアプリケーションに対するユーザーの受け取り方に大きく影響します。今回の記事の中では、こうした素晴らしいインターフェースを構成する主要な要素に重点を置きながら、インターフェースを使えるようにします。

第 2 回では、プレゼンテーション・アプリケーションに編集機能を追加する作業に取り組みます。具体的にはフォント・スタイルの変更、プレゼンテーションへの画像のドラッグ・アンド・ドロップ、テキスト・コンテンツの修正です。これらのすべての編集機能を追加する方法について、第 2 回で説明します。

最終回の第 3 回では、永続化が焦点となります。私たちの理念では、Web アプリケーションは既存のアプリケーションと互換するものでなければなりません。そこで以下の 3 点に注目しながら、このシステムでプレゼンテーション・ファイルのエクスポート、または他のプレゼンテーション・ファイルのインポートを行います。

  • どのようにして、ファイルのタイプを変換するのか?
  • どのようにして現行の作業を保存し、ユーザーが後で使用できるようにするのか?
  • どのようにして、他の人々とプレゼンテーションを共有するのか?

それでは早速、ユーザー・インターフェースの開発に取り掛かりましょう。


Web UI の開発

このサンプル・アプリケーションのデザインは、図 1 の画面のようになります。LeftFrame は、Power Point や OpenOffice.org と同じく、プレゼンテーションのすべてのスライドを表示するための miniFrame です。中央のウィンドウは mainFrame で、ここではユーザーがスライドの内容を表示して編集することができます。右側のフレームには、mainFrame で選択された要素の設定が表示されます。

図 1. デザイン・レイアウト

クリックして大きなイメージを見る

図 1. デザイン・レイアウト

DIV オブジェクトとサンプル・アプリケーション・フレームワーク

このプロジェクトでは、ビューのフォーマットを設定するために DHTML オブジェクトの DIV を利用します。DIV オブジェクトはテキスト・スタイルを変更するのに便利なコマンドを実行できるだけでなく、コンテンツのズームイン、ズームアウト機能も備えています。これはプレゼンテーションで最も重要な要素であり、コードの約半分が DIV オブジェクトを扱います。

図 2 を見るとわかるように、このフレームワークには 4 つの主要な DIV オブジェクトがあります。ToolBarLeftFrame は比較的簡単に実装できるため、この記事では miniFramemainFrame の実装に重点を置きます。

図 2. インターフェース・ゾーン

クリックして大きなイメージを見る

図 2. インターフェース・ゾーン


miniFrame

miniFrame には、現在のプレゼンテーションのスライドがすべて表示されます。このウィンドウには 2 つの重要な機能があります。その 1 つは、スライドの追加と削除を含め、すべてのスライドを管理することです。もう 1 つは、ユーザーが mainFrame のコンテンツを変更したときに、それに対応する変更を miniFrame にも反映するという機能です。これは、ユーザーがデスクトップ・アプリケーションで当然期待するようになっている機能なので、Web 上でも同じ機能を提供する必要があります。

スライドの管理 – miniFrame のデザイン

miniFrame はコンテナーであることから、miniFrame を構成するオブジェクトとしては DIV オブジェクトが最適です。DIV オブジェクトには、DHTML の他のあらゆる要素を含めることができるからです。さらに、各スライドも DIV オブジェクトによって表示されます。図 3 に、miniFrame 内のオブジェクトと mainFrame 内のオブジェクトとの関係を示します。ここでは、miniFrame 全体を占める大きなスライドのコンテナーを Outside-DIV と呼び、このコンテナー内に含まれる異なる多数の小さな DIV スライドを Inside-DIV と呼ぶことにします。

図 3. Inside-DIV コンテナーと Outside-DIV コンテナー
Inside-DIV コンテナーと Outside-DIV コンテナー

リスト 1 は、miniFrame を作成するコードです。

リスト 1. miniFrame の DIV 定義
<DIV id=miniFrame SCROLLING=NO>
   <div id='slide1' style="POSITION: absolute; SCROLLING="NO">\
   </div>
   <div id='slide2' style="POSITION: absolute; SCROLLING="NO">\ 
   </div>
</DIV>

スライドの管理 – 機能の追加

当然のことながら、スライドを管理するには、スライドを作成できなければなりません。そこで、次はスライドを追加および削除するための機能を作成します。そのためには、Outside-DIV を操作して、Outside-DIV に含まれるスライドを割り当て直す必要があります。「追加」操作の場合は、DHTML の innerHTML 関数を使えば新しいスライドのコードを Outside-DIV に追加することができます。既存のスライドがそれぞれの状態を確実に維持できるようにするため、各スライドには一意に決まる独自の ID と順序のインジケーターを設定します。そして SlideIndex という変数を設定して、個々のスライドを示します。このコードを、リスト 2 に記載します。

リスト 2. NewSlide()
function NewSlide(SlideIndex) { 
   window.document.getElementById("Minileft").innerHTML = 
      window.document.getElementById("Minileft").innerHTML +
   "<div " + " style='position:absolute; top: "+(SlideIndex)*175+" px;'" + 
        "id='slide"+SlideIndex+
   "</div>";
}

「削除」操作については、もう少し複雑になってきます。現状ではユーザーがどのスライドを削除したいのかがわからないため、delSlideIndex という変数を使用してこれに対処します。スライドを削除する際には、各スライドの位置を再調整する必要もあります。そのためのコードをリスト 3 に記載します。

リスト 3. DelSlide()
function DelSlide(delSlideIndex) {
      var slides=window.document.getElementById("Minileft").all.tags('DIV');
      slides[delSlideIndex].removeNode(true);
      for(var no=delSlideIndex+1;no<slides .length;no+){
         slides[no].style.top=parseInt(slides[no].style.top)- 175;
      }
}

動的プレビュー

PowerPoint や他のプレゼンテーション・アプリケーションでのように、ユーザーが mainFrame でコンテンツを変更したときに、関連するミニ・スライドも同時に変更されるようでなければなりません。デスクトップ・バージョンでの表示はこのような動作をするので、このアプリケーションでもこれと同じような機能にして、ユーザーに違和感を与えないようにしたいというわけです。図 4 に、この効果の例を示します。

図 4. ミニ・スライドと編集ウィンドウの同期
ミニ・スライドと編集ウィンドウの同期

この機能を実装するには、mainFrame でのコンテンツ変更イベントを検出する必要があります。DHTMLには、そのために使用できる 2 つのイベントとして、onkeyup() および onmouseup() があります。そこで、この 2 つのイベントを取り込む関数を onPageLoad() で起動します。このコードは、リスト 4 のとおりです。

リスト 4. onPageLoad()
function onPageLoad()
{
   slideFrame.document.onmouseup = updataMainFrame;;
   sildeWindow.document.onkeyup = updataMainFrame;
   }

updateMainFrame() 関数は、mainFrame の現在のコンテンツを単に対応するミニ・スライドにコピーするにすぎません。どのスライドにフォーカスが置かれているかは、CurrentSlide 変数が示します。このコードをリスト 5 に記載します。

リスト 5. updateMainFrame()
function updateMainFrame(CurrentSlide)
{
   window.document.getElementById("slide"+CurrentSlide).innerHTML=
     window.document.getElementById("MainFrame").innerHTML;
}

mainFrame

中央のウィンドウは、プレゼンテーションに含まれる編集可能なコンテンツを表示するための mainFrame です。ユーザーはこのウィンドウ内で画像とテキスト・オブジェクトを編集します。mainFrame の実装には DIV 要素を使用します。というのも DIV オブジェクトには、他のあらゆるオブジェクト (DIV オブジェクト自体を含む) を含めることができるからです。DIV オブジェクトには編集可能モードがあります。このモードをオンにすると、DIV に含まれるすべてのオブジェクトが変更できるようになるため、このオンライン・プレゼンテーションを実装するためのかなりの作業を省くことができます。図 5 に mainFrame の部分を明確に示します。

図 5. mainFrame
mainFrame

編集可能な DIV を作成するには、以下のコードを HTML に追加すればよいだけです。

<div id="mainFrame" contentEditable='true' SCROLLING=NO
               style="overflow:hidden;" frameBorder="0" ></div>

ここで重要な点は、contentEditable 属性を true に設定することです。mainFrame に含まれる DIV 要素の contentEditable が true に設定されている場合、オブジェクトをクリックすると、図 6 のように編集モードでオブジェクトが表示されます。

図 6. 編集モードでの DIV 要素
編集モードでの DIV 要素

スライドショー

皆さんは Web サイト上にスライドショーを実装するのは極めて難しいことだと思っているかもしれませんが、実際には DHTML が強力なツールを提供してくれるので、それほどでもありません。このプロジェクトの場合には、スライドごとにスライドショーで表現される効果を検討する必要があるため、スライドを大きなサイズで表示する必要があります。

スライドショーを実現するには、まずスライドショーの進行を制御する時間を設定します。Javascript を使用すれば、リスト 6 のコードのように容易に設定することができます。

リスト 6. スライドショーの設定
function SetTime()
{
   TimeOutID = window.setInterval('doIt();',1000);
}

setInterval() は重要な関数です。TimeOutID はこの関数の戻り値で、この値を使ってタイマーを終了します。doIt() は、インターバルが完了するごとに実行する必要があるプロシージャーです。インターバルは値 1000 によって 1000 ミリ秒に設定されています。

次に、スライドを 1 枚 1 枚表示する全画面表示のウィンドウを作成し、関連するコンテンツをそこに取り込みます。リスト 7 では、EndIndex 変数を使用して、最後のスライドまで表示し終わったかどうかを判断しています。ShowIndex には現在表示されているスライドのインデックスが記録されています。そしてビューを全画面表示するためには、単に mainFrame を適切なサイズに設定しているだけです。このすべてを doIt() 関数で行います。

リスト 7. 全画面表示ビューの作成
function doIt()
{
 if(ShowIndex==EndIndex){
 ShowIndex=0;
 clearInterval(TimeOutID);
 window.document.getElementById("MainFrame").style.zoom="100%";
 return; 
}

MainFrame.document.body.innerHTML=
   window.document.getElementById("slide"+
     ShowIndex).contentWindow.document.body.innerHTML;
 if(ShowIndex==0)
 {
 window.document.getElementById("MainFrame").style.zoom="150%";
 }
 ShowIndex++;
 }

ユーザーは通常、スライドショー・モードでスライドを表示する一方で、手動でもスライドを制御できることを期待します。そのために必要なコントロール・バーは、以下の要件を満たさなければなりません。

  • スライドショー・モードでのみ表示されること
  • 各スライドのインデックスを示すこと
  • わかりやすいコントロールを提供すること

コントロールの例を図 7 に示します。

図 7. スライド表示コントロール

クリックして大きなイメージを見る

図 7. スライド表示コントロール

リスト 8 に、このコントロール・パネルを作成するために必要な HTML コードを記載します。リスト 9 には、対応する JavaScript コードを記載します。

リスト 8. スライドショー・コントロール・パネルの HTML コード
<div id=controlbar style="color: blue; position:absolute; width:1300;height:500; 
     left:7px; top:695px;z-index: 5; visibility:hidden;">
  <table border="0" width="1045" cellspacing="0" bordercolor="#EEEEEE" 
       cellpadding="0" 
     bordercolor="#EEEEEE" bgcolor="#C0C0C0" height="34">
    <tr>
     <td width="100%" height="34">
      <table border="0" width="550" cellspacing="0" bordercolor="#EEEEEE" 
       cellpadding="0" >
         <tr>
          <td width="97">&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="&lt;&lt;" name="B3" 
               onclick="myforword()">
          </td>
          <td width="150">
            page:<input type="text" style="border:0px;" name="T1" size="5" value="0">
          </td>
          <td width="72">
           <input type="button" value="&gt;&gt;" name="B1" 
              onclick="myback()">
          </td>
          <td width="45"> 
           <input type="button" id="B2" size="10" value="Auto" 
              onclick="myauto()">
          </td>
          <td width="61">
           <input type="button" id="B4" size="10" value="Cancel" 
              onclick="mycancel()">
          </td>
         </tr>
      </table>
     </td>
    </tr>
  </table>
</div>
リスト 9. スライドショー・コントロール・パネルの JavaScript コード
function myforword()
{
   slideindex--;
   doIt();
}

function myauto()
{
   window.document.getElementById("B4").disabled=false;
   window.document.getElementById("B2").disabled=true;
   TimeOutID = window.setInterval('autodoit();', 1000);
}

function mycancel()
{
   slideindex=-1;
   doIt();
}

function myback()
{
   slideindex++;
   doIt();
}

function autodoit()
{
   slideindex++;
   doIt();
   }

まとめ

DHTML と DIV オブジェクトを CSS (Cascading StyleSheets) と併せて使用することで、Web バージョンのプレゼンテーション・アプリケーションを比較的容易に作成することができます。この記事のサンプル・コードには、JavaScript DOM を使って CSS を操作する方法も示されています。この全容については、第 2 回で機能を追加するときに説明します。

参考文献

  • JavaScript and the Document Object Model」(developerWorks、2002年7月) では、JavaScript で DOM を使用する方法に目を向け、ユーザーがメモを追加し、メモの内容を編集できる Web ページの作成手順を説明しています。
  • Understanding DOM」(developerWorks、2003年7月) では、DOM 文書の構造を解説し、Java 技術を使用して XML ファイルから文書を作成し、その文書に変更を加え、出力を取得する方法を説明しています。
  • JavaScript Tutorial は、JavaScript プログラミング入門として役立ちます。
  • DojoCampus.org に、Dojo トレーニング、オンライン・レッスン・チュートリアルが用意されています。
  • CSS (Cascading Style Sheets) に関するこのチュートリアルを利用して、Web ページのスタイルとレイアウトを制御してください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=424645
ArticleTitle=Ajax 技術を使って Web プレゼンテーション・アプリケーションを構築する: 第 1 回 Web UI の開発
publish-date=07282009