しらぎくモバイルシステムが画像以外に取扱えるメディア。

しらぎくモバイルシステムで利用出来る画像以外のメディアについて解説します。

しらぎくモバイルシステムが画像以外に取扱えるメディア・目次。

フラッシュの扱いについて。

第3.190版(平成17年 9月11日)から、PC及びフラッシュ対応実機に対して、インライン表示のフラッシュを扱えるようになりました。

加えて、第3.750版(平成18年 4月11日)から、ｉモード準拠のインタラクティヴ表示のフラッシュを扱えるようになりました。

フラッシュを埋め込むための記述方法。

しらぎくモバイルシステムが取扱うHTML文書にフラッシュを埋め込む場合、携帯端末向けの<object>要素またはPC向けの<embed>要素のいずれでも記述出来ます。

ご利用に関して以下の点にご留意下さい。

インタラクティヴ表示のフラッシュ。

第3.750版(平成18年 4月11日)から、従来のインライン表示のフラッシュに加えてｉモード準拠のインタラクティヴ表示のフラッシュを扱えるようになりました。

この場合、以下のように記述します。

<object>要素を用いた記述(推奨)。

記述が複雑になりますが、<object>要素を用いた記述を推奨します。

具体的には、<object>要素でインタラクティヴ表示させたいフラッシュを設定し、<a>要素の特別な属性で当該フラッシュを表示させるアンカーを生成します。

このためには、以下のように記述して下さい。

<object>要素

<object>要素には必ず以下の属性を附記して下さい。

type="application/x-shockwave-flash"属性
記述が無い場合は<object>要素を無効とします。
declare属性

属性値のみの記述で有効です。

この属性の記述が無い場合は、自動的にインライン表示と認識します。

id属性
記述が無い場合は、インタラクティヴ表示をさせる事が出来ません。

また、<object>要素内には、フラッシュが使えない端末向けのコンテンツを記述する事が出来ます。

この記述は、フラッシュ対応端末では出力されません。

<a>要素

インタラクティヴ表示が指定されている(すなわちdeclare属性がついている<object>要素で指定されたフラッシュ)フラッシュは<a>要素によるリンクによって開かれます。

フラッシュを開くための<a>要素は以下の属性を用います。

iswf属性

属性値としては、「#」に続けて表示させたいフラッシュを指定した<object>要素内のid属性値です。

この属性が無い場合、普通の<a>要素リンクと見なされます。

href属性

この属性で、フラッシュに対応していない端末での代替ページを指定します。

必須ではありませんが、この属性が無い場合、フラッシュ非対応端末では当該<a>要素の内容とも削除されます(すなわち、href属性が無い場合、フラッシュ対応環境でしか表示されなくなります)。

直接フラッシュへリンクする。

<a>要素のhref属性で直接フラッシュを参照する事で、インタラクティヴに表示させる事も可能です。

但しその場合、フラッシュに対応していない環境でもアンカーとしては有効になってしまいます。

このため、しらぎくモバイルシステムでは標準準拠の判別属性をサポートしております。

具体的には、フラッシュへリンクする<a>要素に対して、以下のように「type="application/x-shockwave-flash"」属性を附与する事で、フラッシュに対応していない環境では当該要素を非表示にします。

<a type="application/x-shockwave-flash" href="Sample.swf">アンカー文字列</a>

逆に、フラッシュに対応していない環境でのみ表示させるには、「type="application/x-shockwave-flash"」属性をもち、且つdata属性の無い<object>要素内に記述する事で実現します。

  1. しらぎくモバイルシステムでは、「type="application/x-shockwave-flash"」属性でフラッシュ関連の要素と判断し、非対応環境では要素の内容が有効であるものとします。
  2. 更に当該<object>要素にdata属性が無い場合はフラッシュ対応環境には無効とします。

具体的には、以下のように記述します。

<object type="application/x-shockwave-flash"> (フラッシュ非対応環境でのみ有効なコンテンツ) </object>

注意事項。

インタラクティヴ表示のフラッシュを利用する場合、以下の点にご留意下さい。

インタラクティヴ表示のフラッシュは<embed>要素では記述出来ません。
必ず<object>要素で記述して下さい。
PCに対しても、インタラクティヴ表示のフラッシュはリンクで実現します。
このため、PCでは画面一杯にフラッシュが描かれるため、携帯端末では適切に表示されているように見えても拡大されて見映えが良くない場合がございます。

インタラクティヴ表示フラッシュの代替コンテンツ。(平成19年 2月18日)

インタラクティヴ表示フラッシュの代替コンテンツとして、HTMLで記述したコンテンツを用意する場合、当該コンテンツの冒頭に<!-- noflash -->宣言を記述する事で、フラッシュに対応する環境では指定されたフラッシュにリダイレクト出来るようになります。

この場合、他のHTML文書からはこの代替コンテンツにリンクするようにするだけで、当該コンテンツにアクセスした際にフラッシュ対応か否かを判断してフラッシュか当該コンテンツかを振り分けるようになります。

例えば、フラッシュのURIがhttp://www.uso800.uso/flash/sample.swfならば、代替コンテンツには以下のように<!-- noflash -->宣言を記述します。

<!-- noflash www.uso800.uso/flash/sample.swf -->

フラッシュ埋め込みの記述例。

実際に、しらぎくモバイルシステム向けの文書でフラッシュを埋め込む場合について具体例を挙げておきます。

インライン表示を実現するための記述例。

フラッシュに対応している環境ではフラッシュ「Example.swf」を、非対応環境にはページ内にGIF画像「Example.GIF」を端末に合わせて表示させる場合。
<div>
    <object type="application/x-shockwave-flash" data="Example.swf">
        <img alt="" src="Example.GIF">
        </object>
    </div>

インタラクティヴ表示を実現するための記述例。

インタラクティヴ表示を実現する場合には、自動振分を可能にした代替HTMLコンテンツを用意してそれにリンクするのが最も簡単な方法ですが、以下のようにする事も出来ます。

フラッシュに対応している環境ではインタラクティヴフラッシュ「Example.swf」を、非対応環境にはページ内にGIF画像「Example.GIF」を端末に合わせて表示させる場合。
<div>
    <object declare id="Flash1" type="application/x-shockwave-flash" data="Example.swf">
        <img alt="" src="Example.GIF">
        </object>
    <a iswf="#Flash1">サンプル</a>
    </div>
<div>
    <a type="application/x-shockwave-flash" href="Sample.swf">サンプル</a>
    <noembed>
        <img alt="" src="Example.GIF">
        </noembed>
    </div>

この場合、フラッシュ非対応環境では「サンプル」と言うアンカーは表示さえされません。

フラッシュに対応している環境ではインタラクティヴフラッシュ「Example.swf」を、非対応環境にはGIF画像「Example.GIF」を同じアンカーで表示させる場合。
<div>
    <object declare id="Flash1" type="application/x-shockwave-flash" data="Example.swf">
        </object>
    <a iswf="#Flash1" href="Example.GIF">サンプル</a>
    </div>
<div>
    <a type="application/x-shockwave-flash" href="Example.swf">サンプル</a>
    <noembed>
        <a href="Example.GIF">サンプル</a>
        </noembed>
    </div>

この場合、フラッシュの対応に拘らず「サンプル」と言うアンカーが表示されますが、

アンカーとなります。

フラッシュに対応している環境ではインタラクティヴフラッシュ「Example.swf」を、非対応環境にはGIF画像「Example.GIF」を異なるアンカーで表示させる場合。
<div>
    <object declare id="Flash1" type="application/x-shockwave-flash" data="Example.swf">
        <a href="Example.GIF">サンプル(静止画像)</a>
        </object>
    <a iswf="#Flash1">サンプル(フラッシュ)</a>
    </div>
<div>
    <a type="application/x-shockwave-flash" href="Example.swf">サンプル(フラッシュ)</a>
    <noembed>
        <a href="Example.GIF">サンプル(静止画像)</a>
        </noembed>
    </div>

この場合、

それぞれ表示されます。

その他のｉモード独自メディアの扱いについて。(平成18年12月17日)

その他のｉモード独自メディアについては、以下のものをサポートしております。

これらの独自メディアに関しては、<object>要素にdeclare属性, id属性, メディアごとに指定された値のtype属性で実体を宣言した後で、<a>要素にて当該要素にリンク出来ます。

このように記述した場合、ｉモード以外の端末では無効なリンクと見なされてアンカーを生成しなくなります。

また、<object>要素を用いずに直接リンクする場合には、<a>要素にtype属性を与える事で、その値がフラッシュに対するもの(application/x-shockwave-flash), 画像に対するもの(image/〜)またはHTMLに関するもので無い限り、ｉモード以外では要素そのものが削除となります。

ページ外へのご案内。

本文書でのCSSは正当です。 本文書はXHTML 1.1準拠です。
Copyright (c)平成18年-平成20年　さいたま・しらぎくさいと 　版権所有 marguerite.site@gmail.com