<< Chapter < Page Chapter >> Page >

  実際の画面 は以下のようになります。

Tall icon and envelope

Subfigure 1.

Small icon and envelope

Subfigure 2.
Two images displayed horizontally in one figure.

  orient 属性は horizontal vertical という値を持つことができます。それにより画像がどのように配置されるか指定することができます。

オンライン・印刷の両バージョンでの画像の使用

 オンラインで画像を閲覧するときは適切なサイズで表示されるが、印刷時に大きくなってしまう場合、印刷バージョンのための画像ファイルの追加ができます。 eps 形式でフォーマットされた画像ファイルは印刷に適しています。同じ画像の eps 形式ファイルと png 形式ファイルがモジュール内にある場合、Connexionsは印刷時のPDFファイル生成には eps 形式を、オンラインでモジュールを表示するには png 形式を使用します。

 印刷バージョンのための追加画像ファイルの追加方法は以下のようになります。

  1. 画像ファイルの eps 形式バージョンを作成してください。そして適切なサイズにしてください。
  2. eps 画像ファイルの メディアタイプ 入力を、index.cnxml内に挿入してください。画像ファイルは同じ名前を持たなくてはなりません。例えば"image1.png"(オンライン)であれば、"image1.eps"(印刷)となります。
  3. eps 画像ファイルをモジュールに追加してください。
 CNXMLコードの例です。 <figure id='printimage'><media type='application/postscript' src='image.eps'><media type='image/png' src='image.png'/></media></figure>
印刷画像( eps )の入力は、オンライン画像( png )の入力の上に現れなくてはなりません。オンライン画像の入力はインデントされ、入れ子にされていなければなりません。

大きいサイズへのリンクを持った画像の作成

 画像をクリックすると、画像を大きなサイズで見ることができます。以下がその方法です。

  1. 画像ファイルのサムネイルサイズバージョンを作成してください。
  2. 以下の例で示されているように、フルサイズとサムネイルサイズの メディアタイプ 入力を挿入してください。
  3. フルサイズとサムネイルサイズの画像をモジュールに追加してください。
 CNXMLコードの例です。 <figure id='thumbnail' orient="horizontal" display="block"><media id="taj" alt="An image of the Taj Mahal"/><image type='image/png' src='TajMahal_medium.jpg' thumbnail='TajMahal_Thumb.jpg'/></media></figure>   実際の画面 は以下のようになります。
Photograph of the Taj Mahal taken by Steve Evans . It is licensed for public use under the Creative Commons Attribution License.

Flash

 Flashをモジュールに挿入することができます。CNXMLコードの例です。 <figure id='flashfig' display='block' orient='horizontal'><media><flash mime-type="application/x-shockwave-flash" src="flash.swf" height='250' width='250'/></media><caption>"Welcome to Connexions" example Flash object.</caption></figure>   Flash は画像や動画が表示されるのと同じように、モジュール内で表示されます。

"Welcome to Connexions" example Flash object.

上記の例は説明のため、 figure タグ内に記述されています。 figure タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。

動画

 以下のリストはモジュールに含めることができる動画形式のリストです。これらのタイプと、Webページに挿入できる他のタイプの動画を埋め込むことができます。

  • quicktime
  • mpeg

 以下のようなコードによって、動画をモジュールに追加することができます。 <figure id='moviefig2'><media id="pastvid" alt="A video clip about building on the past."><video mime-type="video/mpeg" src="Building_on_the_Past.mpg" width='450' height='400' autoplay='false'></media><caption>The Creative Commons movie: "Building on the Past". Click the Play button to start the movie.</caption></figure>   実際の画面 は以下のようになります。

The Creative Commons movie: "Building on the Past". Click the Play button to start the movie.

上記の例は説明目的のため、 figure タグ内に記述されています。 figure タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。

Javaアプレット

 以下のようなコードによって、Javaアプレットをモジュールに追加することができます。 <figure id="javafig"><media id="javapiece" alt="An animated java applet."><java-applet mime-type="application/x-java-applet" src="PhasorDemo.class" width='430' value='500'/></media><caption>3D Animation of a Complex Sinusoid. Click the Run button to start the animation.</caption></figure>   実際の画面 は以下のようになります。

3D Animation of a Complex Sinusoid. Click the Run button to start the animation.
 グラフィックがうまく表示されないなら、コンピュータにJavaプラグインをインストールするか、またはアップグレードさせる必要があります。 java.com にアクセスし、最新版のJavaプラグインをダウンロードしてください。

上記の例は説明目的のため、 figure タグ内に記述されています。 figure タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。

音声ファイル

 MP3、リアルオーディオ、WAVファイルなどの音声ファイルを簡単にモジュールに入れることができます。モジュールに音声ファイルを入れるには、対応する音声ファイルをアップロードしてください。そして以下のようなコードをindex.cnxmlに入力してください。 <figure id='musicscale'><media id="soundbite" alt="A small sound snippet of a chromatic scale."><audio mime-type="audio/x-wav" src="chromatic_slurred.wav"/></media><caption>A chromatic scale performed on clarinet by Michael Lawrence.</caption></figure>

  実際の画面 は以下のようになります。

A chromatic scale performed on clarinet by Michael Lawrence.

上記の例は説明目的のため、 figure タグ内に記述されています。 figure タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。

Labview demonstrations

 モジュールにLabVIEW demonstrationsを含めることについての情報は、 Creating LabVIEW demonstrations for Connexions を参照してください。

メディアタイプパラメタ

 いくつかのマルチメディアファイルが適切に表示されるには、オプションかパラメタを必要とします。 param タグでこの情報をマルチメディアファイルに与えることができます。このタグは media タグに含まれていて、 media タグの変更を必要としません。 param タグの解説は CNXML Language Specification を見てください。

 動画ファイル(mpg)の param タグ入力の例です。 <media type="video/mpeg" src="testmovie.mpg"><param name="width" value="300"/><param name="height" value="300"/></media>

動画、Flash、Javaアプレットすべてに対して、オンライン上で表示される高さと幅のパラメタを含める必要があります。ディフォルトの単位はピクセルです。前の例では動画は300x300ピクセルで表示しています。

 異なったタイプのマルチメディアファイルは、異なったタイプのパラメタに対してサポート、応答を行います。異なったタイプのマルチメディアファイルのパラメタの例です。

  • Images (image/*): height, width, title, alt
  • Flash (application/x-shockwave-flash): height, width, base
  • Video (video/*): height, width, classid, codebase, autostart
  • Java Applets (application/x-java-applet): height, width, code, codebase, archive
  • Audio (audio/*): title, volume
  • LabVIEW (application/x-labview): viinfo (See Creating LabVIEW demonstrations for Connexions for more information.)
param タグで、XHTMLドキュメントに挿入されたファイルのランタイム設定を指定することができます。

Params and alternate images

 オンラインバージョンで表示される動画を、印刷バージョンでは静止画として表示したい場合は、以下のように記述してください。 <media type="video/mov" src="howto.mov"><param name="height" value="250" /><param name="width" value="250" /><media type="image/png" src="novideo.png /></media>

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Connexions tutorial and reference (japanese version). OpenStax CNX. Aug 26, 2005 Download for free at http://cnx.org/content/col10298/1.9
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Connexions tutorial and reference (japanese version)' conversation and receive update notifications?

Ask