別のブラウザで表示すると、JavaScriptによってこのドキュメントの表示形式が変わる場合があります。ただしドキュメントの内容に影響はありません。

UIX開発者ガイド Go to Table of Contents
目次
Go to previous page
前へ
Go to next page
次へ

17. メディア

このトピックでは、UIXを使用してWebアプリケーション内の様々な種類のメディアを表示する方法を説明します。特に、メディア・コンテンツをデータベースに格納するOracle interMediaおよびBC4Jバインドの使用方法を中心に説明します。ここでは、次の項目について説明します。

メディア・コンテンツの表示

静的メディアをuiXMLページに表示する方法については理解していることを前提とします。静的メディアはほとんどがコンテンツに挿入されたイメージで構成され、UIX <image>コンポーネントを使用して簡単に表示できます。しかし、アプリケーションでオーディオまたはビデオなどの動的データをユーザーに表示する場合は、<media>コンポーネントを使用することが必要になります。

<media>コンポーネントの目的は、開発者が使用できる様々なメディア・タイプの構成を簡略化することにあります。たとえば、ビデオ用のQuicktime、RealおよびWindows形式はそれぞれ、サイズ指定やコントロールだけでなく、ブラウザのレンダリング・メカニズムも異なります。<media>コンポーネントは、開発者にとって便利な2つの機能を実行します。1つは、あるユーザーにとって最適なメディア・プレーヤを選択できること、もう1つは、開発者の構成APIに差異を抽象化できることです。

最適なプレーヤの選択

<media>コンポーネントは、適切な出力をレンダリングして、使用するメディア・プレーヤをユーザーのデバイスに指示します。場合によっては、開発者が選択したコンテンツのタイプが1種類のプレーヤでしかサポートされず、メディア・プレーヤの種類を選択できないこともあります。たとえば、Quicktime形式でエンコードされたビデオ・ファイルの場合は、ユーザーのデバイスにQuicktimeプレーヤが存在していることが必要です。次に、trailer.movという名前のムービーをQuicktimeプレーヤで再生するように指定する例を示します。

  <media source="trailer.mov" player="quicktime"/>

しかし、.mp3形式でエンコードされたオーディオは、複数のプレーヤで再生できます。開発者が特定のプレーヤを指定しない場合、UIXは最適なプレーヤの選択を試行します。たとえばUIXで次のように検出されたとします。

  <media source="newSong.mp3"/>
UIXでは、一連のルールを使用して、各ユーザーが使用するメディア・プレーヤを判断します。
  1. メディア・タグでcontentType属性が指定されている場合、UIXはこの属性を、ユーザーのリクエストの一部として自動的に送られた情報とともに利用して、使用するメディア・プレーヤを判断します。ユーザーのリクエストからこの情報を判断できない場合は、player属性もオーバーライドされます。
  2. ユーザーのリクエストからユーザーの持つプレーヤを判断できる場合、UIXでは、そのプレーヤの中から、示されたメディアのタイプを表示するのに最も適したプレーヤを選択します。
  3. プレーヤ選択の次の方法として、UIXでは、ユーザーのデバイス・タイプで最優先されるプレーヤを使用します(最優先プレーヤを判別できる場合)。
  4. どのルールを適用しても使用するプレーヤを判断できない場合、UIXは、出力内にリンクをレンダリングし、ユーザーがそのリンク先に移動すればユーザーのデバイスによってプレーヤが選択されるようにします。

開発者は、メディアを表示するメカニズムとして<link>要素をいつでも使用できるので注意してください。つまりこの場合、メディアはインラインでレンダリングするのではなく、ユーザーがそのメディアを表示するリンクをクリックすることに依存します。ユーザーのデバイスの接続が遅い場合やメモリーが少ない場合は、メディアのロードで問題が発生する可能性があるため、この方法を使用すると特に便利です。

メディア表示のカスタマイズ

メディア・プレーヤの選択は最初のステップにすぎず、開発者はより高度な表示オプションを選択することもできます。UIXはこれらの選択内容を、様々なプレーヤにわたって機能するAPIに抽象化します。これらのオプションの多くはヒントであり、プレーヤによっては使用できないものもあるので注意してください。

サイズ指定では、widthおよびheight属性を使用して、ユーザーに表示されるときのコンテンツのサイズを指定できます。ただし、各種のプレーヤでは、メディア・クリップの周囲にコントロール・ボタンや境界線などの追加コンテンツが表示されます。このため、この2つの属性を使用する場合、プレーヤによっては領域が不足することがあります。各プレーヤによってコントロールが異なるため、必要なサイズを予測することは困難です。

このような理由から、UIXにはinnerWidthおよびinnerHeight属性が用意されています。開発者がこの2つの属性を実際のメディア・コンテンツのサイズに設定した場合、UIXでは、使用されるプレーヤのコントロールに合せて適量のパディングをこのサイズに追加します。通常はこの方法を使用します。次に例を示します。

  <media src="trailer.mov" innerWidth="320" innerHeight="240"/>

この場合、表示されるムービー・トレーラは幅320ピクセルで高さ24ピクセルです。UIXにより、プレーヤのコントロールに合せてユーザーのデバイスに追加領域が割り当てられます。

UIXにはさらに高度な設定のための属性も用意されています。この設定には、ユーザー・アクションなしで再生を開始するかどうか、コンテンツをリピートする回数、プレーヤに表示するコントロールのタイプ、コンテンツのダウンロード中にユーザーに表示するメッセージなどがあります。これらの高度な設定の詳細は、プログラミング・リファレンスを参照してください。

UIXアプリケーションにおけるメディアの表示方法の説明が終了したので、次にそのメディア・コンテンツを格納および更新する方法を示します。これについてOracleではinterMediaというテクノロジが用意されています。

Oracle interMediaの紹介

Oracle interMediaを使用すると、Oracleデータベースは、イメージ、オーディオ、ビデオおよびその他のデジタル・メディアなどのマルチメディア・コンテンツを、エンタープライズ情報と統合された方式で管理できます。つまり、Oracleデータベースによって、従来のリレーショナル・データと同じ方式で複雑なマルチメディア・データを格納、取得および操作できるということです。

このトピックの以降の部分を活用するには、データベース記憶域に関する基礎を理解していることが必要です。また、Business Components for Java(BC4J)フレームワークとUIXバインドの知識も必要です。

interMediaの概要

Oracleデータベースのオブジェクト・リレーショナル拡張機能に基づいて、interMediaでは、マルチメディア・データの記述に(JavaクラスやC++クラスと同様に)データベース・オブジェクト・タイプを使用します。Oracle8iでは、interMediaオブジェクト・タイプは、インストール時にデータベース・ユーザーORDSYSの下にパッケージとして作成され、デジタル・オーディオを表すORDAudio、デジタル・イメージを表すORDImage、およびデジタル・ビデオを表すORDVideoで構成されます。Oracle9iでは、汎用メディア・コンテンツを記述するためのオブジェクト・タイプORDDocが追加されています。これらのオブジェクト型のインスタンスは、メタデータとメディア・データを含む属性、およびメソッドで構成されます。メディア・データが実際のオーディオ、イメージまたはビデオであるのに対し、メタデータは、メディアの長さ、圧縮タイプ、形式などのメディア関連情報です。メソッドは、setProperties、process、getDataInFileなど、メディアに対して実行可能なプロシージャです。

interMediaでは、JDBCを使用するJava開発者に対して、interMediaデータベース・オブジェクトからのメディア・コンテンツの取得と、interMediaデータベース・オブジェクトへのメディア・コンテンツのアップロードをサポートする、interMedia Javaクラス・ライブラリが用意されています。また、様々なメディア関連操作を実行するためのinterMediaデータベース・オブジェクト・メソッドの起動もサポートされています。JDBCを使用してinterMediaにアクセスする方法の詳細は、データベースに付属するinterMediaドキュメントを参照してください。

interMediaでは、BC4J開発者に対して、interMedia Javaクラスに基づいたinterMedia BC4Jドメイン・クラス・ライブラリが用意されています。BC4Jフレームワークを使用すると、開発者は、データベース・オブジェクト・タイプとドメイン・クラスの間の自動マッピングを利用できます。BC4J開発者は、interMedia BC4Jドメイン・クラスを使用して、Oracleデータベースからコンテンツを取得したり、Oracleデータベースにコンテンツをアップロードできます。また、これらのドメイン・クラスでは、様々なメディア関連操作を実行するためのinterMediaデータベース・オブジェクト・メソッドの起動もサポートされています。

interMediaとUIXとの統合

UIX BC4Jバインドでは、UIXとinterMediaの統合のための基盤も用意されています。interMedia BC4Jドメイン・クラスの使用時、BC4Jフレームワークでは、VARCHAR2などの他のデータベース・タイプと同じ方式でinterMediaデータベース・オブジェクト・タイプを取り扱います。BC4Jフレームワークでは、VARCHAR2値にStringオブジェクトを作成するのとまったく同じように、interMediaデータベース・オブジェクトにinterMediaドメイン・オブジェクトを作成します。interMedia BC4Jドメイン・クラスは、BC4Jフレームワーク内でRowViewObjectApplicationModuleおよびその他のBC4Jドメイン・クラスとともにシームレスに機能します。

<image>、<media>、<link>を含むいくつかの既存のUIXユーザー・インタフェース・コンポーネントは、マルチメディア・コンテンツを表すために使用できます。interMedia UIX統合では、これらのBeanを使用して、interMediaに格納されたメディア・コンテンツを表示します。また、interMediaデータベース・タイプをこれらのコンポーネントにバインドするための新しいuiXML要素もいくつか作成されました。interMediaの新しいuiXML要素は、<bc4j:image>、<bc4j:media>および<bc4j:link>です。

メディア・コンテンツのアップロードに対しては、ファイル・アップロード・フォーム・フィールドを生成するために、<bc4j:fileUpload>および<bc4j:messageFileUpload>という2つの新しいuiXML要素が用意されています。

interMediaのサポートを拡張するために、いくつかの既存のuiXML要素が改良されています。これらは、<bc4j:input>および<bc4j:messageInput>です。

ユーザーは、uiXMLアプリケーションの新しい開発方法を学ぶ必要はありません。UIXでinterMediaを使用することは、使い慣れたBC4J uiXMLアプリケーションで新しいuiXML要素を使用するようなものです。

interMediaコンテンツの取得と表示

たとえば、(「Business Components for Javaの統合」で説明されている)EMP表に、タイプORDSYS.ORDIMAGEのEmpPicという追加の列があるとします。EmpPic列は、従業員の写真を格納するために使用されます。次の例では、この新しいEMP表を使用します。

次のSQLコードは、interMedia ORDSYS.ORDIMAGE列を持つデータベース表を作成する方法を示しています。

create table MediaEmp (EMPNO number(4) primary key,
                       ENAME varchar2(10),
                       HIREDATE date,
                       SAL   number(7,2),
                       EMPPIC ordsys.ordimage);

uiXML BC4Jバインドでは、現在、ユーザー・インタフェース・コンポーネントのデータ・タイプを明示的に指定するか、フレームワークでコンポーネントのタイプが自動的に判断されるようにするかを開発者が選択できます。前者を手動モードと呼び、後者を自動モードと呼びます。

自動モード

自動モードでは、<bc4j:keyStamp>および<bc4j:columnStamp>要素が自動的にinterMedia列を選択します。<bc4j:input>要素は、レンダリングのために自動的に<image>をinterMedia属性に割り当てます。このため、従業員の写真をブラウザに表示するために「Business Components for Javaの統合」のサンプル・コードを変更する必要はありません。

<bc4j:rootAppModuleScope name="EmpAppModule">
 <contents>
  <bc4j:viewObjectScope name="CurrentDeptEmpsVO">
   <contents>
    <bc4j:table name="emps" automatic="true">
     <bc4j:keyStamp>
      <bc4j:rowKey name="key" />
     </bc4j:keyStamp>
     <bc4j:columnStamp>
      <bc4j:column>
       <columnHeader>
        <bc4j:sortableHeader />
       </columnHeader>
       <contents>
        <bc4j:input readOnly="true" />
       </contents>
      </bc4j:column>
     </bc4j:columnStamp>
    </bc4j:table>
   </contents>
  </bc4j:viewObjectScope>
 </contents>
</bc4j:rootAppModuleScope>

手動モード

手動モードでは、レンダリングする属性をユーザーが明示的に指定する必要があります。ユーザーは、ユーザー・インタフェース・コンポーネントと属性タイプの間の関連も手動で指定する必要があります。

<bc4j:rootAppModuleScope name="EmpAppModule">
 <contents>
  <bc4j:viewObjectScope name="CurrentDeptEmpsVO">
   <contents>
    <bc4j:table name="emps" automatic="false">
     <bc4j:keyStamp>
      <bc4j:rowKey name="key" />
     </bc4j:keyStamp>

     <contents>
      <bc4j:column attrName="Empno">
       <columnHeader>
        <bc4j:sortableHeader />
       </columnHeader>
       <contents>
        <bc4j:textInput readOnly="true" />
       </contents>
      </bc4j:column>

      <!-- other columns -->

      <bc4j:column attrName="Emppic">
       <columnHeader>
        <bc4j:sortableHeader />
       </columnHeader>
       <contents>
        <bc4j:image readOnly="true" />
       </contents>
      </bc4j:column>
     </contents>

    </bc4j:table>
   </contents>
  </bc4j:viewObjectScope>
 </contents>
</bc4j:rootAppModuleScope>

interMediaへのメディア・コンテンツのアップロード

実行時、ユーザーがメディア・コンテンツをデータベースにアップロードできるようにしておくと便利です。ブラウザを介してコンテンツをアップロードする場合、HTMLのファイル・アップロード・フォーム・フィールドを使用することで、サーバーにアップロードするローカル・コンピュータ上のメディア・ファイルをユーザーが選択できます。サーバーに送信されるHTTP POSTリクエスト内にファイル・コンテンツが適切にエンコードされるように、(GETメソッドではなく)POSTメソッドおよびenctype="multipart/form-data"を使用するようにHTMLフォーム要素を構成する必要があります。たとえば、uiXML <form>要素と、それをサポートするイベント・ハンドラは、次のように指定します。

<form method="post" usesUpload="true">

自動モード

...
<form name="updateForm" usesUpload="true" method="post">
 <contents>
  <formParameter name="event"/>
  <!-- layout the fields in two columns -->
  <tableLayout>
   <contents>
    <bc4j:rootAppModuleScope name="EmpAppModule">
     <contents>
      <bc4j:viewObjectScope name="CurrentDeptEmpsVO">
       <contents>
        <bc4j:rowScope name="UpdateEmp">
         <contents>
          <bc4j:region automatic="true">
           <bc4j:attrStamp>
            <bc4j:messageInput/>
           </bc4j:attrStamp>
          </bc4j:region>
         </contents>
        </bc4j:rowScope>
       </contents>
      </bc4j:viewObjectScope>
     </contents>
    </bc4j:rootAppModuleScope>
   </contents>
  </tableLayout>
 </contents>
</form>
...

<handlers>
 <event name="apply">
  <bc4j:findRootAppModule name="EmpAppModule">
   <!-- establish the ViewObject scope -->
   <bc4j:findViewObject name="CurrentDeptEmpsVO">
    <!-- find the row by key, falling back on a new default
            row if the key is not found -->
    <bc4j:findRow name="UpdateEmp">
     <bc4j:setRegion automatic="true"/>
     <bc4j:commit/>
     <bc4j:executeQuery/>
     <!-- forward to the summary page -->
     <ctrl:go name="showEmp" redirect="true"/>
    </bc4j:findRow>
   </bc4j:findViewObject>
  </bc4j:findRootAppModule>
 </event>
</handlers>

手動モード

...

<form name="updateForm" usesUpload="true" method="post">
 <contents>
  <formParameter name="event"/>
  <!-- layout the fields in two columns -->
  <tableLayout>
   <contents>
    <bc4j:rootAppModuleScope name="EmpAppModule">
     <contents>
      <bc4j:viewObjectScope name="CurrentDeptEmpsVO">
       <contents>
        <bc4j:rowScope name="UpdateEmp">
         <contents>
          <bc4j:messageInput attrName="Empno"/>
          <bc4j:messageInput attrName="Ename"/>
          <!-- other attributes -->
          <bc4j:messageFileUpload attrName="Emppic"/>
         </contents>
        </bc4j:rowScope>
       </contents>
      </bc4j:viewObjectScope>
     </contents>
    </bc4j:rootAppModuleScope>
   </contents>
  </tableLayout>
 </contents>
</form>

...

<handlers>
 <event name="apply">
  <bc4j:findRootAppModule name="EmpAppModule">
   <!-- establish the ViewObject scope -->
   <bc4j:findViewObject name="CurrentDeptEmpsVO">
    <!-- find the row by key, falling back on a new default
         row if the key is not found -->
    <bc4j:findRow name="UpdateEmp">
     <bc4j:setAttribute name="Empno" paramName="Empno"/>
     <bc4j:setAttribute name="Ename" paramName="Ename"/>
     <!-- other attributes -->
     <bc4j:setAttribute name="Emppic" paramName="Emppic"/>
     <bc4j:commit/>
     <bc4j:executeQuery/>
     <!-- forward to the summary page -->
     <ctrl:go name="showEmp" redirect="true"/>
    </bc4j:findRow>
   </bc4j:findViewObject>
  </bc4j:findRootAppModule>
 </event>
</handlers>

interMedia用のUIXプロジェクトの構成

web.xml内の必須エントリ

uiXMLアプリケーションでinterMediaコンテンツを表示する場合、J2EEコンテナが正しく動作するように、そのアプリケーションのweb.xmlファイルには次のような構成エントリを含める必要があります。

<servlet>
  <servlet-name>ordDeliverMedia</servlet-name>
  <servlet-class>oracle.ord.html.OrdPlayMediaServlet</servlet-class>
  <init-param>
    <param-name>releaseMode</param-name>
    <param-value>Stateful</param-value>
  </init-param>
</servlet>
<servlet-mapping>
  <servlet-name>ordDeliverMedia</servlet-name>
  <url-pattern>/ordDeliverMedia</url-pattern>
</servlet-mapping>

oracle.ord.html.OrdPlayMediaServletは事前提供されているJavaサーブレットで、データベースからブラウザにinterMediaコンテンツを送ります。ordDeliverMediaはそのデフォルトのサーブレット名であり、サーブレット・マッピングです。サーブレットのリリース・モードの指定には、releaseModeパラメータが使用されます。このパラメータの値は、Stateful、StatelessまたはReservedになります。リリース・モードの詳細は、BC4Jのドキュメントを参照してください。

uiXMLアプリケーションで、データベース内のinterMediaオブジェクトを更新するためファイルのアップロードが必要な場合、web.xmlには、次のようなoracle.cabo.servlet.BajaServlet用の追加エントリを含める必要があります。

<init-param>
  <param-name>oracle.cabo.servlet.io.FileUploadManager</param-name>
  <param-value>oracle.cabo.data.jbo.servlet.io.OrdFileUploadManager</param-value>
</init-param>

oracle.cabo.servlet.io.FileUploadManagerパラメータは、HTTP POSTファイル・アップロードを取り扱うカスタム・クラスを指定するために使用されます。 oracle.cabo.data.jbo.servlet.io.OrdFileUploadManagerは、HTTP POSTファイル・アップロード・ハンドラのinterMedia実装です。これは、マルチパート・ストリームを解析し、ブラウザからアップロードされるファイルをinterMediaオブジェクトに設定します。

web.xml内のオプション・エントリ

コンテンツをアップロードする際は、ブラウザのファイル・アップロードに対するWebサーバーのメモリー使用量と、アップロード時にサーバーでメディア・コンテンツのキャッシュに使用される一時ディレクトリの両方を管理することが重要です。これは、メディア・ファイルが非常に大きくなることが多く、サーバーがファイルの取扱い方法を制御する必要があるからです。

ブラウザからアップロードされたコンテンツは、メモリー制限に達するまでサーバーのメモリーにキャッシュされます。メモリー制限に達した時点で、コンテンツは一時ファイルに書き込まれます。これらのメモリーおよびファイル・リソースは、アップロード操作(すなわちHTTPリクエスト)の終了時に解放されます。

メモリー制限とこれらの一時ファイルのディレクトリを指定する、oracle.cabo.data.jbo.servlet.ord.HttpMaxMemoryおよびoracle.cabo.data.jbo.servlet.ord.HttpTempDirという2つのサーブレットinitパラメータがあります。どちらのパラメータも、 oracle.cabo.servlet.BajaServletに属します。この2つのパラメータはオプションです。oracle.cabo.data.jbo.servlet.ord.HttpMaxMemoryのデフォルト値は102400バイトです。oracle.cabo.data.jbo.servlet.ord.HttpTempDirのデフォルト値は、java.io.tmpdirのシステム・プロパティ値です。

次に例を示します。

<init-param>
  <param-name>oracle.cabo.data.jbo.servlet.ord.HttpMaxMemory</param-name>
  <param-value>1024</param-value>
</init-param>
<init-param>
  <param-name>oracle.cabo.data.jbo.servlet.ord.HttpTempDir</param-name>
  <param-value>D:/temp/ord</param-value>
</init-param>

この例では、アップロードされてきたコンテンツが1024バイトを超える場合は、D:/temp/ordディレクトリに一時ファイルとして格納するように指定しています。

完全なweb.xmlの例

適切に構成されたUIX interMediaアプリケーションの完全なサンプルを次に示します。

<web-app>
  <description>Empty web.xml file for Web Application</description>

  <servlet>
    <servlet-name>uix</servlet-name>
    <servlet-class>oracle.cabo.servlet.BajaServlet</servlet-class>
    <init-param>
      <param-name>oracle.cabo.servlet.pageBroker</param-name>
      <param-value>oracle.cabo.servlet.xml.UIXPageBroker</param-value>
    </init-param>
    <init-param>
      <param-name>oracle.cabo.servlet.io.FileUploadManager</param-name>
      <param-value>oracle.cabo.data.jbo.servlet.io.OrdFileUploadManager</param-value>
    </init-param>
    <init-param>
      <param-name>oracle.cabo.ui.UIExtensions</param-name>
      <param-value>oracle.cabo.data.jbo.ui.JboUIExtension</param-value>
    </init-param>
    <init-param>
     <param-name>oracle.cabo.data.jbo.servlet.ord.HttpMaxMemory</param-name>
     <param-value>1024</param-value>
    </init-param>
    <init-param>
     <param-name>oracle.cabo.data.jbo.servlet.ord.HttpTempDir</param-name>
     <param-value>D:/temp/ord</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet>
    <servlet-name>ordDeliverMedia</servlet-name>
    <servlet-class>oracle.ord.html.OrdPlayMediaServlet</servlet-class>
    <init-param>
      <param-name>releaseMode</param-name>
      <param-value>Stateful</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>ordDeliverMedia</servlet-name>
    <url-pattern>/ordDeliverMedia</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>uix</servlet-name>
    <url-pattern>*.uix</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>uix</servlet-name>
    <url-pattern>/uix/*</url-pattern>
  </servlet-mapping>

  <session-config>
    <session-timeout>30</session-timeout>
  </session-config>

  <mime-mapping>
    <extension>html</extension>
    <mime-type>text/html</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>txt</extension>
    <mime-type>text/plain</mime-type>
  </mime-mapping>

  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>