<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE document PUBLIC "-//CNX//DTD CNXML 0.5 plus MathML//EN" "http://cnx.rice.edu/cnxml/0.5/DTD/cnxml_mathml.dtd">
<document xmlns="http://cnx.rice.edu/cnxml" xmlns:md="http://cnx.rice.edu/mdml/0.4" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:bib="http://bibtexml.sf.net/" id="None">
  <name>Adding Multimedia to Your Connexions Content (日本語 - Japanese)</name>
  <metadata>
  <md:version>1.4</md:version>
  <md:created>2005/08/22 12:21:06 GMT-5</md:created>
  <md:revised>2005/11/16 18:37:31.388 US/Central</md:revised>
  <md:authorlist>
      <md:author id="jago">
      <md:firstname>Adan</md:firstname>
      
      <md:surname>Galvan</md:surname>
      <md:email>jago@rice.edu</md:email>
    </md:author>
      <md:author id="mhusband">
      <md:firstname>Mark</md:firstname>
      <md:othername>S.</md:othername>
      <md:surname>Husband</md:surname>
      <md:email>mhusband@rice.edu</md:email>
    </md:author>
      <md:author id="takaryo">
      <md:firstname>Hironori</md:firstname>
      
      <md:surname>Takaryo</md:surname>
      <md:email>s043105@ishikawa-nct.ac.jp</md:email>
    </md:author>
  </md:authorlist>

  <md:maintainerlist>
    <md:maintainer id="takaryo">
      <md:firstname>Hironori</md:firstname>
      
      <md:surname>Takaryo</md:surname>
      <md:email>s043105@ishikawa-nct.ac.jp</md:email>
    </md:maintainer>
  </md:maintainerlist>
  
  <md:keywordlist>
    <md:keyword>alternate</md:keyword>
    <md:keyword>audio</md:keyword>
    <md:keyword>flash</md:keyword>
    <md:keyword>image</md:keyword>
    <md:keyword>java applet</md:keyword>
    <md:keyword>movie</md:keyword>
    <md:keyword>mpeg</md:keyword>
    <md:keyword>multimedia</md:keyword>
    <md:keyword>multimedia object</md:keyword>
    <md:keyword>music</md:keyword>
    <md:keyword>quicktime</md:keyword>
    <md:keyword>real audio</md:keyword>
    <md:keyword>sounds</md:keyword>
  </md:keywordlist>

  <md:abstract>An explanation of how to add various types of multimedia objects to your Connexions content. Examples of some of the more common multimedia objects are included.</md:abstract>
</metadata>

  <content>
    <section id="intro">
      <name>概要</name>
      <para id="intropara1">　Connexionsのモジュールには、様々なタイプのマルチメディアファイルを組み込むことができます。このドキュメントでは、以下に示すタイプのマルチメディアファイルをモジュールに組み込む方法を説明していきます。

	<list id="l1">
	<item><cnxn target="images">画像</cnxn></item>
	<item><cnxn target="flash">Flash</cnxn></item>
	<item><cnxn target="movies">動画</cnxn></item>
	<item><cnxn target="java">Javaアプレット</cnxn></item>
	<item><cnxn target="audiofiles">音声ファイル</cnxn>
	</item>
	<item><cnxn target="labview">LabVIEW demonstrations</cnxn></item>
</list>
</para>
      <para id="intropara2">　CNXMLの<code>media</code>タグを使用することで、様々なタイプのマルチメディアファイルを、ConnexionsモジュールのWebページに組み込むことができます。<link src="http://cnx.rice.edu/technology/cnxml/0.5/spec/#media">media</link>タグについての解説は<cite>CNXML Language Specification</cite>を参照してください。ただしファイルに有効なMIME(Multipurpose Internet Mail Extension)がなくてはなりません。MIMEはASCIIフォーマットに翻訳されることなく、インターネット上で音声や動画ファイルの転送を可能にするプロトコルです。詳しくは<link src="http://www.ietf.org/rfc/rfc1341.txt?number=1341">MIME
	Types</link>を参照してください。以降では、各マルチメディアファイルを組み込むためのCNXMLの入力例とその表示結果例を述べていきます。
      </para>
      
    <section id="importnotes">
       <name>マルチメディアファイル追加の際の注意点</name>
       	<para id="importpara1">　マルチメディアファイルをモジュールに組み込む場合、以下の事に注意してください。

       	  <list id="importlist">
	<item>
このモジュールで示されているCNXML例は特定のメディアを表示するためのものでるので、もしこれらをコピーしてあなたのモジュールに入れるのなら、あなたの環境に合うようにCNXMLを編集してください。</item>
	<!-- <item>All material within Connexions
       	  is licensed under the <link
       	  src="http://creativecommons.org/licenses/by/2.0/">Creative
       	  Commons Attribution license</link>. Any multimedia objects
       	  you add to your module must be in the public domain or under
       	  the Creative Commons Attribution license.</item> -->
	<item>
モジュールで表示したいメディアファイルのために、属性<code>タイプ</code>はMIMEタイプとマッチしなくてはなりません。例えば、もし画像ファイルをPNG形式でモジュールに追加しようとするなら、属性タイプは<code>image/png</code>でなければなりません。入力は以下のように行ってください。

	  	<code type="block">
			<![CDATA[
	  	    <media type="image/png" src="mypicture.png"/>
	  	]]>
		</code>
	</item>
	<item>
有効なMIMEタイプがあるならば、どのようなタイプのメディアファイルも使用することができます。
</item>
	<item>マルチメディアファイル追加のサポートを必要とするか、このモジュールに記載されている以外のファイルに関する質問がありましたら、<link src="mailto:techsupport@cnx.rice.edu">techsupport@cnx.rice.edu</link>に連絡してください。       	  </item>
	<item>
		<cnxn target="paramsect">param</cnxn>タグで、オプションやパラメタを制御することができます。</item>
</list>
</para>
      </section>
    </section>
    
    <section id="images">
      <name>画像</name>
      <para id="imagepara1">　画像ファイルの種類とConnexionsモジュールで使用されるMIMEタイプは以下の通りです。
	<list id="l4">
		<item>eps - media type="application/postscript"</item>
		<item>png - media type="image/png" </item>
		<item>jpeg - media type="image/jpeg"</item>
		<item>gif - media type="image/gif"</item>
	</list>
　上記がすべてではありません。有効な<link src="http://www.duke.edu/websrv/file-extensions.html">MIMEタイプ</link>がある画像なら使用することができます。
      </para>
      <para id="imagepara2">　モジュールに画像を埋め込むには、以下のようにCNXMLを入力してください。
	<code type="block">
		<![CDATA[
	  <figure id="figure-01">
	    <name>Example Figure</name>
	    <media type="image/png" src="envelope-taller.png"/>
	    <caption>A graphic image displayed as a figure.</caption>
	  </figure> 
	]]>
	</code>
</para>
      
      <para id="imagepara3">　mediaタグの<code>src</code>属性には、モジュールで表示したい画像を、場所かソースで指定します。画像がアップロードするか、インターネット上のほかの場所に保存されたイメージの完全なURLを持っている場合、この属性はファイル名のみになる場合があります。</para>
      
      <para id="imagepara3a">　<cnxn target="figure-01">実際の画面</cnxn>は以下のようになります。	 <figure id="figure-01">
		<name>Example Figure</name>
		<media type="image/png" src="envelope-taller.png"/>
		<caption>A graphic image displayed as a figure.</caption>
	</figure>
</para>
       
       <para id="imagepara4">　<code>subfigure</code>タグを使用することで、あなたは1つの図の中に2つの画像を置くことができます。これは、画像を左右や上下に並べて表示したい場合に役に立ちます。2つの画像を1つの図の中に表示するには、以下のようにCNXMLを入力してください。


	<code type="block">
		<![CDATA[
     <figure id="figure-2" orient="horizontal">
        <subfigure id="subfigure-1">
          <name>Tall Icon and Envelope</name>
          <media type="image/png" src="envelope-taller.png"/>
          <caption>
          Subfigure 1.
          </caption>
        </subfigure>
        <subfigure id="subfigure-2">
          <name>Small Icon and Envelope</name>
          <media type="image/png" src="envelope.png"/>
          <caption>
            Subfigure 2.            
          </caption>
        </subfigure>
 	<caption>Two images displayed horizontally in one figure.</caption>
     </figure>
	  ]]>
	</code>
</para>
      
      <para id="imagepara5">　<cnxn target="figure-02">実際の画面</cnxn>は以下のようになります。

	<figure id="figure-2" orient="horizontal">
		<subfigure id="subfigure-1">
			<name>Tall Icon and Envelope</name>
			<media type="image/png" src="envelope-taller.png"/>
			<caption>
          Subfigure 1.
          </caption>
		</subfigure>
		<subfigure id="subfigure-2">
			<name>Small Icon and Envelope</name>
			<media type="image/png" src="envelope.png"/>
			<caption>
            Subfigure 2.            
          </caption>
		</subfigure>
		<caption>Two images displayed horizontally in one figure.</caption>
	</figure>
</para>
      
      <para id="imagepara6">　<code>orient</code>属性は<code>horizontal</code>か<code>vertical</code>という値を持つことができます。それにより画像がどのように配置されるか指定することができます。
      </para>

      <section id="print">
	<name>オンライン・印刷の両バージョンでの画像の使用</name>
	<para id="printp">　オンラインで画像を閲覧するときは適切なサイズで表示されるが、印刷時に大きくなってしまう場合、印刷バージョンのための画像ファイルの追加ができます。<code>eps</code>形式でフォーマットされた画像ファイルは印刷に適しています。同じ画像の<code>eps</code>形式ファイルと<code>png</code>形式ファイルがモジュール内にある場合、Connexionsは印刷時のPDFファイル生成には<code>eps</code>形式を、オンラインでモジュールを表示するには<code>png</code>形式を使用します。
	</para>  
	<para id="printp2">　印刷バージョンのための追加画像ファイルの追加方法は以下のようになります。

	  <list id="printlist" type="enumerated">
		<item>画像ファイルの<code>eps</code>形式バージョンを作成してください。そして適切なサイズにしてください。</item>
		<item>
			<code>eps</code>画像ファイルの<code>メディアタイプ</code>入力を、index.cnxml内に挿入してください。画像ファイルは同じ名前を持たなくてはなりません。例えば"image1.png"(オンライン)であれば、"image1.eps"(印刷)となります。
</item>
		<item><code>eps</code>画像ファイルをモジュールに追加してください。</item>
	</list>
	  　CNXMLコードの例です。	  <code type="block">
		<![CDATA[
	    <figure id='printimage'>
	     <media type='application/postscript' src='image.eps'>
	      <media type='image/png' src='image.png'/>
             </media>
            </figure>
	    ]]>
	</code>
	<note>印刷画像(<code>eps</code>）の入力は、オンライン画像(<code>png</code>)の入力の上に現れなくてはなりません。オンライン画像の入力はインデントされ、入れ子にされていなければなりません。
	  </note>
</para>
      </section>
      
      <section id="clickable">
	<name>大きいサイズへのリンクを持った画像の作成</name>
	<para id="linked">　画像をクリックすると、画像を大きなサイズで見ることができます。以下がその方法です。

	  <list id="tlist" type="enumerated">
		<item>画像ファイルのサムネイルサイズバージョンを作成してください。</item>
		<item>以下の例で示されているように、フルサイズとサムネイルサイズの<code>メディアタイプ</code>入力を挿入してください。</item>
		<item>フルサイズとサムネイルサイズの画像をモジュールに追加してください。</item>
	</list>
	  　CNXMLコードの例です。	  <code type="block">
		<![CDATA[
	    <figure id='thumbnail'>
	     <media type='image/png' src='TajMahal_medium.jpg'>
	      <param name='thumbnail' value='TajMahal_Thumb.jpg'/>
             </media>
            </figure>
	    ]]>
	</code>
	　<cnxn target="thumbnail">実際の画面</cnxn>は以下のようになります。
	   <figure id="thumbnail">
		<media type="image/jpeg" src="TajMahal_medium.jpg">
			<param name="thumbnail" value="TajMahal_Thumb.jpg"/>
		</media>
		<caption>Photograph of the Taj Mahal taken by <link src="http://www.flickr.com/photos/babasteve/">Steve
	  Evans</link>.  It is licensed for public use under the
	  Creative Commons Attribution License.</caption>
	</figure>
</para>
      </section>
    </section>

    <section id="flash">
      <name>Flash</name>
      <para id="flpara">　Flashをモジュールに挿入することができます。CNXMLコードの例です。

	<code type="block">
		<![CDATA[
         <figure id='flashfig'>
	  <media type="application/x-shockwave-flash" src="flash.swf">
	    <param name='height' value='250'/>
            <param name='width'  value='250'/>
          </media>
	  <caption>"Welcome to Connexions" example Flash object.</caption>
         </figure>
	  ]]>
	</code>
	　<cnxn target="flashfig">Flash</cnxn>は画像や動画が表示されるのと同じように、モジュール内で表示されます。

          <figure id="flashfig">
		<media type="application/x-shockwave-flash" src="flash2.swf">
			<param name="height" value="250"/>
			<param name="width" value="250"/>
		</media>
		<caption>"Welcome to Connexions" example Flash object.</caption>
	</figure>
</para>
	<note>上記の例は説明のため、<code>figure</code>タグ内に記述されています。<code>figure</code>タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。</note>
    </section>

    <section id="movies">
      <name>動画</name>
      <para id="movieslist">　以下のリストはモジュールに含めることができる動画形式のリストです。これらのタイプと、Webページに挿入できる他のタイプの動画を埋め込むことができます。
      <list id="l2">
		<item>quicktime</item>
		<item>mpeg</item>
	</list>
</para>
      <para id="moviep">　以下のようなコードによって、動画をモジュールに追加することができます。
	<code type="block">
		<![CDATA[
	<figure id='moviefig2'>
	  <media type="video/mpeg" src="Building_on_the_Past.mpg">
	    <param name="width" value="450"/>
	    <param name="height" value="400"/>
	    <param name="autoplay" value="false"/>
	  </media>
	  <caption>The Creative Commons movie: "Building on the Past". 
	 Click the Play button to start the movie.</caption>
	</figure>
	  ]]>
	</code>
	　<cnxn target="moviefig2">実際の画面</cnxn>は以下のようになります。
	<figure id="moviefig2">
		<media type="video/mpeg" src="Building_on_the_Past.mpg">
			<param name="width" value="450"/>
			<param name="height" value="400"/>
			<param name="autoplay" value="false"/>
		</media>
		<caption>The Creative Commons movie: "Building on the Past". 
	    Click the Play button to start the movie.</caption>
	</figure>
</para>
	<note>上記の例は説明目的のため、<code>figure</code>タグ内に記述されています。<code>figure</code>タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。</note>
    </section>

    <section id="java">
      <name>Javaアプレット</name>
      <para id="javap">　以下のようなコードによって、Javaアプレットをモジュールに追加することができます。
	<code type="block">
		<![CDATA[
	<figure id="javafig">
          <media type="application/x-java-applet" src="PhasorDemo.class">
            <param name="width" value="430"/>
            <param name="height" value="500"/>
	  </media>
          <caption>3D Animation of a Complex Sinusoid. Click the Run button 
           to start the animation.</caption>
        </figure>
	  ]]>
	</code>
　<cnxn target="moviefig2">実際の画面</cnxn>は以下のようになります。
	<figure id="javafig">
		<media type="application/x-java-applet" src="PhasorDemo.class">
			<param name="width" value="430"/>
			<param name="height" value="500"/>
		</media>
		<caption>3D Animation of a Complex Sinusoid. Click the Run button 
	    to start the animation.</caption>
	</figure>

　グラフィックがうまく表示されないなら、コンピュータにJavaプラグインをインストールするか、またはアップグレードさせる必要があります。<link src="http://java.com">java.com</link>にアクセスし、最新版のJavaプラグインをダウンロードしてください。
      </para>
	<note>上記の例は説明目的のため、<code>figure</code>タグ内に記述されています。<code>figure</code>タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。</note>
    </section>

    <section id="audiofiles">
      <name>音声ファイル</name>
      <para id="audiop">　MP3、リアルオーディオ、WAVファイルなどの音声ファイルを簡単にモジュールに入れることができます。モジュールに音声ファイルを入れるには、対応する音声ファイルをアップロードしてください。そして以下のようなコードをindex.cnxmlに入力してください。
	<code type="block">
		<![CDATA[
      	 <figure id='musicscale'>
      	  <media type="audio/x-wav" src="chromatic_slurred.wav"/>
      	  <caption>A chromatic scale performed on clarinet by Michael Lawrence.</caption>
         </figure>
	  ]]>
	</code>
</para>
      <para id="parascale">　<cnxn target="moviefig2">実際の画面</cnxn>は以下のようになります。
      	 <figure id="musicscale">
		<media type="audio/x-wav" src="chromatic_slurred.wav"/>
		<caption>A chromatic scale performed on clarinet by Michael Lawrence.</caption>
	</figure>
</para>
	<note>上記の例は説明目的のため、<code>figure</code>タグ内に記述されています。<code>figure</code>タグは、モジュール内でこれらのメディアファイルを含めるのに必要ではありません。</note>
    </section>

    <section id="labview">
      <name>LabVIEW Demonstrations</name>
      <para id="labviewp">　モジュールにLabVIEW demonstrationsを含めることについての情報は、<cnxn document="m11601">Creating LabVIEW demonstrations for Connexions</cnxn>を参照してください。


      </para>
    </section>
    
    <section id="paramsect">
      <name>メディアタイプパラメタ</name>
      <para id="parampara1">　いくつかのマルチメディアファイルが適切に表示されるには、オプションかパラメタを必要とします。<code>param</code>タグでこの情報をマルチメディアファイルに与えることができます。このタグは<code>media</code>タグに含まれていて、<code>media</code>タグの変更を必要としません。<link src="http://cnx.rice.edu/technology/cnxml/0.5/spec/#param">param</link>タグの解説は<emphasis>CNXML Language Specification</emphasis>を見てください。
</para>
      
      <para id="parampara2">　動画ファイル(mpg)の<code>param</code>タグ入力の例です。

      	<code type="block">
		<![CDATA[
      	 <media type="video/mpeg" src="testmovie.mpg">
       	   <param name="width" value="300"/>
      	   <param name="height" value="300"/>
      	 </media>
      	  ]]>
	</code>
	<note>動画、Flash、Javaアプレットすべてに対して、オンライン上で表示される高さと幅のパラメタを含める必要があります。ディフォルトの単位はピクセルです。前の例では動画は300x300ピクセルで表示しています。
      	</note>
</para>
      
      <para id="parampara3">　異なったタイプのマルチメディアファイルは、異なったタイプのパラメタに対してサポート、応答を行います。異なったタイプのマルチメディアファイルのパラメタの例です。

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

      </note>
</para>
      
      <section id="paramsect2">
	<name>Params and Alternate Images</name>
      <para id="parampara4">　オンラインバージョンで表示される動画を、印刷バージョンでは静止画として表示したい場合は、以下のように記述してください。

      	<code type="block">
		<![CDATA[
         <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> 
      	  ]]>
	</code>
</para>
      </section>
    </section>
    
  </content>
  
</document>
