Skip to content Skip to navigation Skip to collection information

OpenStax_CNX

You are here: Home » Content » Connexions Tutorial and Reference (Japanese version) » コンテンツへのマルチメディアファイルの追加

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

コンテンツへのマルチメディアファイルの追加

Module by: Adan Galvan, Mark Husband, Hironori Takaryo, Connexions. E-mail the authors

Based on: Adding Multimedia to Your Connexions Content by Adan Galvan, Mark Husband

Summary: 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.

Warning:

This module contains Connexions documentation which is out-of-date. The contents of this module are provided here for historical purposes only and should not be considered accurate for the current version of the Connexions website. The current (English-language) version of this module can be located at http://cnx.org/content/m12660/latest/. If you have any additional questions or cannot find the answer to your question, please contact techsupport@cnx.org and we will be happy to assist in any way we can.

If you would like to assist Connexions by helping us update this module with an appropriate translation from the current English version, please contact us at cnx@cnx.org as we would appreciate your help with improving our support for non-English-speaking users.

概要

 Connexionsのモジュールには、様々なタイプのマルチメディアファイルを組み込むことができます。このドキュメントでは、以下に示すタイプのマルチメディアファイルをモジュールに組み込む方法を説明していきます。

 CNXMLのmediaタグを使用することで、様々なタイプのマルチメディアファイルを、ConnexionsモジュールのWebページに組み込むことができます。mediaタグについての解説はCNXML Language Specificationを参照してください。ただしファイルに有効なMIME(Multipurpose Internet Mail Extension)がなくてはなりません。MIMEはASCIIフォーマットに翻訳されることなく、インターネット上で音声や動画ファイルの転送を可能にするプロトコルです。詳しくはMIME Typesを参照してください。以降では、各マルチメディアファイルを組み込むためのCNXMLの入力例とその表示結果例を述べていきます。

マルチメディアファイル追加の際の注意点

 マルチメディアファイルをモジュールに組み込む場合、以下の事に注意してください。

  • このモジュールで示されているCNXML例は特定のメディアを表示するためのものでるので、もしこれらをコピーしてあなたのモジュールに入れるのなら、あなたの環境に合うようにCNXMLを編集してください。
  • モジュールで表示したいメディアファイルのために、属性タイプはMIMEタイプとマッチしなくてはなりません。例えば、もし画像ファイルをPNG形式でモジュールに追加しようとするなら、属性タイプはimage/pngでなければなりません。入力は以下のように行ってください。
    
    			
    	  	    <media type="image/png" src="mypicture.png"/>
    	  	
    		
  • 有効なMIMEタイプがあるならば、どのようなタイプのメディアファイルも使用することができます。
  • マルチメディアファイル追加のサポートを必要とするか、このモジュールに記載されている以外のファイルに関する質問がありましたら、techsupport@cnx.rice.eduに連絡してください。
  • paramタグで、オプションやパラメタを制御することができます。

画像

 画像ファイルの種類とConnexionsモジュールで使用されるMIMEタイプは以下の通りです。

  • eps - mime-type="application/postscript"
  • png - mime-type="image/png"
  • jpeg - mime-type="image/jpeg"
  • gif - mime-type="image/gif"
 上記がすべてではありません。有効なMIMEタイプがある画像なら使用することができます。

 モジュールに画像を埋め込むには、以下のようにCNXMLを入力してください。


	  <figure id="figure-01" orient="horizontal" display="block">
	    <name>Example Figure</name>
	    <media id="envimg" alt="An envelope w/ tall text.>
              <image type="image/png" src="envelope-taller.png"/>
	    </media>
	    <caption>A graphic image displayed as a figure.</caption>
	  </figure> 
	
	

 mediaタグのsrc属性には、モジュールで表示したい画像を、場所かソースで指定します。画像がアップロードするか、インターネット上のほかの場所に保存されたイメージの完全なURLを持っている場合、この属性はファイル名のみになる場合があります。

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

Figure 1: A graphic image displayed as a figure.
Example Figure
Example Figure (envelope-taller.png)

 subfigureタグを使用することで、あなたは1つの図の中に2つの画像を置くことができます。これは、画像を左右や上下に並べて表示したい場合に役に立ちます。2つの画像を1つの図の中に表示するには、以下のようにCNXMLを入力してください。


     <figure id="figure-2" orient="horizontal" display="block">
        <subfigure id="subfigure-1">
          <title>Tall Icon and Envelope</title>
          <media id="tallenv" alt="An envelope w/ tall writing.">
            <image mime-type="image/png" src="envelope-taller.png"/>
          </media>
          <caption>
          Subfigure 1.
          </caption>
        </subfigure>
        <subfigure id="subfigure-2">
          <name>Small Icon and Envelope</name>
          <media id="smallenv" alt="An envelope/ small writing.">
            <image mime-type="image/png" src="envelope.png"/>
          </media>
          <caption>
            Subfigure 2.            
          </caption>
        </subfigure>
 	<caption>Two images displayed horizontally in one figure.</caption>
     </figure>
	  
	

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

Figure 2: Two images displayed horizontally in one figure.
Tall Icon and EnvelopeSmall Icon and Envelope
(a) Subfigure 1. (b) Subfigure 2.
Tall Icon and Envelope (envelope-taller.png)Small Icon and Envelope (envelope.png)

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

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

 オンラインで画像を閲覧するときは適切なサイズで表示されるが、印刷時に大きくなってしまう場合、印刷バージョンのための画像ファイルの追加ができます。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>
	    
	

Note:

印刷画像(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>
	    
	
 実際の画面は以下のようになります。
Figure 3: Photograph of the Taj Mahal taken by Steve Evans. It is licensed for public use under the Creative Commons Attribution License.
Figure 3 (TajMahal_medium.jpg)

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は画像や動画が表示されるのと同じように、モジュール内で表示されます。
Figure 4: "Welcome to Connexions" example Flash object.

Note:

上記の例は説明のため、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>
	  
	
 実際の画面は以下のようになります。
Figure 5: The Creative Commons movie: "Building on the Past". Click the Play button to start the movie.

Note:

上記の例は説明目的のため、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>
	  
	
 実際の画面は以下のようになります。
Figure 6: 3D Animation of a Complex Sinusoid. Click the Run button to start the animation.
 グラフィックがうまく表示されないなら、コンピュータにJavaプラグインをインストールするか、またはアップグレードさせる必要があります。java.comにアクセスし、最新版のJavaプラグインをダウンロードしてください。

Note:

上記の例は説明目的のため、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>
	  
	

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

Figure 7: A chromatic scale performed on clarinet by Michael Lawrence.
Audio File: chromatic_slurred.wav

Note:

上記の例は説明目的のため、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>
      	  
	

Note:

動画、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.)

Note:

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> 
      	  
	

Collection Navigation

Content actions

Download:

Collection as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add:

Collection to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks

Module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks