<< 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>

Questions & Answers

Biology is a branch of Natural science which deals/About living Organism.
Ahmedin Reply
what is phylogeny
Odigie Reply
evolutionary history and relationship of an organism or group of organisms
AI-Robot
ok
Deng
what is biology
Hajah Reply
cell is the smallest unit of the humanity biologically
Abraham
what is biology
Victoria Reply
what is biology
Abraham
HOW CAN MAN ORGAN FUNCTION
Alfred Reply
the diagram of the digestive system
Assiatu Reply
allimentary cannel
Ogenrwot
How does twins formed
William Reply
They formed in two ways first when one sperm and one egg are splited by mitosis or two sperm and two eggs join together
Oluwatobi
what is genetics
Josephine Reply
Genetics is the study of heredity
Misack
how does twins formed?
Misack
What is manual
Hassan Reply
discuss biological phenomenon and provide pieces of evidence to show that it was responsible for the formation of eukaryotic organelles
Joseph Reply
what is biology
Yousuf Reply
the study of living organisms and their interactions with one another and their environment.
Wine
discuss the biological phenomenon and provide pieces of evidence to show that it was responsible for the formation of eukaryotic organelles in an essay form
Joseph Reply
what is the blood cells
Shaker Reply
list any five characteristics of the blood cells
Shaker
lack electricity and its more savely than electronic microscope because its naturally by using of light
Abdullahi Reply
advantage of electronic microscope is easily and clearly while disadvantage is dangerous because its electronic. advantage of light microscope is savely and naturally by sun while disadvantage is not easily,means its not sharp and not clear
Abdullahi
cell theory state that every organisms composed of one or more cell,cell is the basic unit of life
Abdullahi
is like gone fail us
DENG
cells is the basic structure and functions of all living things
Ramadan
What is classification
ISCONT Reply
is organisms that are similar into groups called tara
Yamosa
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

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
Danielrosenberger
Start Quiz
Jesenia Wofford
Start Quiz
Brooke Delaney
Start Exam
Heather McAvoy
Start Quiz