since 2007.8 by K-ichi

 

bloggerでも使われているXHTMLでは、基本的に装飾の類はcssを使うように、とされている。
IE6は、XHTMLと宣言されていても、記述の些細な違いで「後方互換モード」で表示してしまうため、この記事もその環境で動作確認したものになる。レイアウトが崩壊してしまうものもあり、勧められる記述ではない。
ちなみにIE8などでは互換表示機能があり、それによって「かつての正しくない環境」をある程度再現し見ることもできる。

2010/12/7 追記



bloggerに画像を貼り付けるように、動画も貼り付けたい。
blogger自身にもアップロードする機能があるが、比較的新しい機能のようで、まだ削除など管理はできない状態。ヘルプにはGoogleVideoでホストされているような記述(English(US)表示時)もあるが、画像とPicasaのような関係は、映像とGoogleVideoにはないようだ。

ともかく、いくつかの方法を試してみる。


bloggerから直にアップロードする

bloggerの編集ページからアップロードすると、サーバ側でflvに変換され、このような再生環境になる。ただし以下のようなテキスト回り込みは、裏技を使わないとできない。


この映像はクリボウの写真日記から勝手に拝借した。
ページのソースから、objectタグ、embedタグを丸々コピペすれば流用できてしまう。ただし、1900バイト近い非常に長大なものになる。IEなら、objectタグ、もしくはembedタグの片方だけでも問題ない。各タグには、テキスト回り込みのためのalign="left"を追加してある。

タグをすっきりさせたい場合は、コピペのあと、いったん「作成」タブを経由させる。すると、blogger上からアップロードした時点の、objectタグだけの簡素なものに変換される。変換といっても大層なことはしておらず、objectタグにclass、id、height、width、contentidの各属性を入れただけ。contentidは、idの後半16バイトの16進数そのもので、他は公開後と同一。

この簡素版タグ場合、align="left"を追加しても、回り込みは有効にならない。これは、公開時には長大なタグに自動変換され、その際に属性設定が削除されてしまうため。
つまり、blogger上からアップロードしてテキストの回り込みをさせるには、いったん公開して長大なタグを得て、それに属性設定を追加したものを使う必要がある。ちなみに、長大なタグに含まれるURLパラメータの一部(secureurlなど)は公開ごとに変化するが、そのまま使って問題はないようだ。

標準では、width=320、height=266となるが、コントロールボタン部は27ドットある。したがって、映像部の大きさは320×239になっている。ここでは4:3にすべく、height=267としてみた。

この方法でアップロードしたファイルは、一覧を確認したり削除したり、といった操作は、いまのところできない。bloggerにはその機能はなく、ホストしているというGoogleVideo上にも現れないため、アクセスのしようがない。ブログ記事を削除すると、画像なら同時に削除するかどうかの問い合わせが表示されるがそれもない。

<object align="left" width="320" height="267" class="BLOG_video_class" id="BLOG_video-9a8bc8620f81651c" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="movie" value="http://www.blogger.com/img/videoplayer.swf?videoUrl=(ものすごく長いので略)">
<param name="bgcolor" value="#FFFFFF"> <embed align="left" width="320" height="267" src="http://www.blogger.com/img/videoplayer.swf?videoUrl=(ものすごく長いので略)" type="application/x-shockwave-flash">
</embed>
</object>

(alignが効かない、アップロード時の簡素版タグ)
<object class="BLOG_video_class" id="BLOG_video-9a8bc8620f81651c" height="266" width="320" contentid="9a8bc8620f81651c"></object>


GoogleVideoでいく

Google系列で映像を扱えるサービスに、その名もズバリのGoogle Videoがある。投稿、削除、一覧など、基本的な機能は揃っている。すべて英語なのはつらい。Googleアカウントで利用ができる。


この動画も他人の褌。

水中から、アフターバーナーを焚いてロケットのように発射するF15。
エンジン2機で20万馬力ほどあり、これは翼の揚力が無くても飛んでいけるパワーなのだとか。
アップロードする際には、アクセス設定を「非公開-ビデオは検索結果に含まれません。」にしておけば、Google Videoでの検索にかからない設定にできる。アップロード後なら、右端のActions欄のEdit Video Infoから非公開にできる。

Google Videoの再生ページ内の「詳細」タブに「ビデオ埋め込み」があり、そこをクリックするとembedタグが表示される。ここでは、このタグにもalign="left"を追加している。
標準では400×326となる。bloggerと同じくコントロール部は27ドットあるため、映像部は400×299。4:3とするならば1ドット少ない。また他とのつり合いを考えて320×267と書き換えることにした。

blogger(公開後)やYoutubeでの映像埋め込みは、objectタグにembedタグがネストされている。これは、今後はobjectに統一される方向であり互換のためにembedも記述、という形なのだが、Google Videoではembedのみ。おそらく将来もブラウザの対応は大丈夫なのだろうが、少し気にはなる。

<embed align="left" id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=3694726567769452138&hl=ja&fs=true" style="width:320px;height:267px" allowFullScreen="true" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>


Picasaを使う

通常は特に意識することなくIEのプラグインだけで処理が行えるので、この項以外では「Picasaウェブアルバム」を単に「Picasa」と表記している。

bloggerから画像をアップロードすると、Picasaウェブアルバム上に専用フォルダが作られて、そこでさまざまな管理ができる。ウェブアルバムへアップロードしておき、あとからリンクを張ることも当然できる。

Picasaウェブアルバムへのアップロード方法として、IEのプラグインによってブラウザからアップロードする方法と、Picasa(アプリケーション)を使ってする方法がある。後者では、映像ファイルもアップロードが可能。
操作方法は難しくないが、いきなりファイルスキャンが強制的に行われるのには面食らう。落ち着いて読み進めれば判ることだが、同様に感じた人も多いようで、それに関するヘルプも存在する。

アップロードしたファイルは、サーバ側でflvに変換され、GoogleVideoのプレイヤによって再生される。リンクや埋め込みタグも表示されるが、これは「サムネイル画像+プレイヤが表示されるページへのリンク」になる。プレイヤそのものに対するリンクではないので、埋め込みには使えない。
GoogleVideoのプレイヤが使われるが、GoogleVideoからはアクセスできない。あくまでウェブアルバムからアクセスする。そのうちbloggerからアップロードした映像ファイルも、ここで一括管理されるようになるんだろうか。

余談だが、アップロードしたJPEGファイルも適当に圧縮されている。微妙な色合いの画像では問題になることもある。


Youtubeを使う

Googleが買収し系列になったYoutubeにアップロードし、そのリンクを埋め込むこともできる。
アカウントを取る必要があるが、Googleアカウントと連携できるようになったようだ。また、十分日本語化されているので、使用法などで困ることはない。アップロード時に、公開オプションを非公開にできる。アップロード後に変更も可。


「test」で検索してみたら、こんな懐かしいものが……
Youtubeサイトに表示されているタグをblogger編集窓へコピペした後、「作成」タブには行ってはいけない。objectタグが一掃され、embedタグだけになってしまう。

bloggerから直にアップロードした際の変換の関係か、GoogleVideoに見られるようにembedタグのみでいくスタンスなのか、そのへんは定かではない。

標準では425×344と、ここで取り上げた中で最も大きい。再生後の再生候補リスト表示などとの関係で大きくしているのだろう。コントロール部は24ドットあり、映像部は425×320。4:3で計算すると、他とは逆に1ドット強縦が長い。つり合いのこともあり、ここでは320×264とした。

<object align="left" width="320" height="264">
<param name="movie" value="http://www.youtube.com/v/2Ir9kr02uCs&hl=ja&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed align="left" src="http://www.youtube.com/v/2Ir9kr02uCs&hl=ja&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="320" height="264"></embed>
</object>


よそのサーバにアップロードする(RealMedia、MPEGなど)

blogger、Google Video、Picasa、Youtube、いずれもアップロードしたものがサーバ側でflvに変換されて保存、公開される。そして、各々が用意したプレイヤによって再生される。
画質やプレイヤが気に入らない場合は、映像ファイルを作成し、別のサーバにアップロードし、そこへembedタグなどで埋め込みリンクさせる方法をとる。


これは、今はなきNASDAにあったrmファイル。

現在運用中のH-IIAロケットのメインエンジン、LE-7Aの技術データ取得試験映像。H-IIAは1号機が2001年8月に打ち上げられていて、ちょうどその頃に公開されたらしい映像。

NASDAはJAXAに統合されたため、サイトは現在終了している。
Internet Archiveに保存されている2004年取得の最終更新版のほか、WARPでも2003年9月のものがアーカイブされている。前者はWebすべてを対象に、後者は国立国会図書館運営で選択的に保存を行っている。
このファイルは、Real Player用の形式なので、煩雑だがそれ用にタグを書く。また、objectタグにembedタグをネストしておいたので、さらに輪をかけている。

Real Playerは、再生画面にコントロールボタンが付いていないため、再生画面とコントロールボタンの2つのブロック要素を記述する。2つのブロック要素にテキストを回り込ませることはできないので、tableタグを使って1つのブロック要素にまとめる。そしてtableタグに、align="left"を記述する。
この記述は、Real Playerプラグインを使った埋め込み再生のサイトを参考にした。

Real Player以外の映像ファイルも、同様にアップロードして埋め込むことができる。objectタグに必要なclassid属性やembedタグのtype属性などは、ググれば一覧がいくつもかかる。

埋め込む際には、再生アプリケーションを強制すべきか、ファイル形式で表して各々の環境に任せるべきかで悩む。
たとえばMPEGファイルをembedタグで埋め込むとき、type="application/x-mplayer2"とすれば、再生アプリケーションが強制されてしまう。type="video/mpeg"のように書けば、環境に合ったプレイヤで再生されるはずだが、うまくない。WindowsMediaPlayerがMPEGに関連付けられていれば正常に見られるが、RealPlayerではボタンしか表示されず、QuickTimeの場合はなぜかWMPが埋め込まれる、などという、訳が解らない状況になる。

ちなみにRealPlayerのコントロール部は、以下のとおり36ドット、WindowsMediaPlayerでは45ドットある。

<table align="left" border=0> <tr>
<object id=id0123456789 classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=320 height=240>
<param name="controls" value="ImageWindow">
<param name="console" value="con0123456789">
<param name="src" value="http://web.archive.org/web/20040417141447/http://www.nasda.go.jp/lib/movie_lib/movie_file/h2a/h2a_le-7a_tashiro.rm">
<embed nojava="true" src="http://web.archive.org/web/20040417141447/http://www.nasda.go.jp/lib/movie_lib/movie_file/h2a/h2a_le-7a_tashiro.rm" type="audio/x-pn-realaudio-plugin" console="con0123456789" controls="ImageWindow" width=320 height=240></embed>
</object>
</tr>
<tr>
<object id=id0123456789 classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=320 height=36>
<param name="controls" value="ControlPanel">
<param name="console" value="con0123456789">
<embed nojava="true" type="audio/x-pn-realaudio-plugin" console="con0123456789" controls="ControlPanel" width=320 height=36>
</embed>
</object>
</tr>
</table>


よそのサーバにアップロードする(flv)

世の中のストリーミング動画は、flv形式が標準となった感がある。変換も通常はサーバが行ってくれるが、ファイルは手元で処理、管理したいという場合は、自前のflvファイルを埋め込む方法もある。


SkyDriveにアップロードしたものを埋め込んでみた。
映像ファイルはFLV Playerの埋め込み (デジタル移民の冒険)のページからの借り物。いったんローカルにダウンロードし、それを改名、アップロードした。
ブラウザには普通、フラッシュ(swf)用のプラグインが入っている。ブラウザは、swfファイルは再生できるが、flvファイルは再生できない。
flvを再生するには、flvをswfファイルに埋め込み一体化する方法、swfでできたプレイヤによってストリーミング再生をする方法、のいずれかになる。ここでは後者を試す。
FLV Playerの埋め込み (デジタル移民の冒険)のページが詳しい。

プレイヤはEmbedding Flashの、ページ中ほどにあるFLV Media Playerからダウンロードできる。zipファイルで、展開後にできたplayer.swfがそのファイルになる。

アップロードするための「よそのサーバ」は、プロバイダのWebスペースなど別途用意する。無料のオンラインストレージなどもある。

用意したサーバに、任意のflvファイル(こるぁ2.flv)と上記のplayer.swfをアップロードしておく。埋め込みタグは以下のようになる。objectとネストするべきだろうが、面倒になったのでembedだけ。
コントロール部は20ドットなので、320×260としてある。

<embed align="left" src="http://9oye2q.bay.livefilestore.com/y1pxaCEbiMS1xSaPvPY5gZk3ZPz8vVMUAgp6Zl4Ws3vwQuNgYAwzX0dz8FyX4thB1twhYN7QRkKjQc/player.swf?file=http://9oye2q.bay.livefilestore.com/y1pHRhTkQEgmxOyIEE18E3x2K4FlFxoIRLQ4j2sHR_N_Cw_kioHp8ceHfnrKR6P7OibzAJzit6LSdY/%E3%81%93%E3%82%8B%E3%81%812.flv" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>


その他参考など

 

船井電機が新しい反射型ディスプレイを開発した、と日経新聞(2008-11-18朝刊13面)が報じた。ところが船井電機からのリリースがない。調べていくと、どうも子会社の船井電機新応用技術研究所によるもののよう。プレスリリースは以下のサイトなどで読める。
この新反射型表示デバイスは、ダイナミックECD(Dynamic ElectroChromic Display)という。
感熱紙は、ロイコ染料と顕色剤が使われ、熱を加えることで両者が融合、化学変化を起こして発色する。今回のディスプレイは、この染料の溶液に通電することで発色させる。また逆方向の通電で元に戻る。
染料溶液は十分狭い間隔(50μm程度)の透明電極シートで挟み、TFTを使わない独自の方法でマトリックス駆動する。染料の特性から、高速(0.1ms)に発色し、コントラストが高く、見た目も紙に近く目に優しい。また、TFTを使わないため安価に製造できる。
新聞報道によれば、消費電力は0.16mW/cm2。価格は液晶の1/3程度。来年中に製品化し年商2億円を目指す、とのこと。

温度特性や書き換え寿命、紫外線ほかの環境耐性などの記述がないが、どんなもんなんだろう。

電子ペーパーは、すでにマーケットも立ち上がりつつあり、方式もいくつか存在する。

歴史があり、もっとも幅を利かせているのが、E Inkのマイクロカプセル型電気泳動方式。
カラー化などで凸版印刷と提携しており、解りやすい説明ページがある。各社の電子ブックリーダなどはこの方式。

馴染みのある液晶を使うのは、富士通研究所コレステリック液晶によるデバイスを開発、広告板などで試験運用中の模様。比較的鮮やかな表示が得意だとか。

ブリヂストンは独自に電子粉流体によるデバイスを開発。
日立などとともに広告版などで試験運用中の模様。商品タグでの販売実績もある。

異色なのは、富士ゼロックス
一般に電子ペーパーは、外部から電気的に表示や消去が行われるが、これは電気と光によって記録する。
マイクロカプセル化したコレステリック液晶に有機光導電材を組み合わせた構造。光導電材は、当てられた光の強度で電気的特性が変わる。パルス電圧をかけて光を当てると、光の強度によって変化した光導電材と液晶とで「分圧」された状態になり、結果、光の強さが液晶に記録される、というもの。
1秒程度で書き換えができ、1万回程度の寿命があるとのこと。

電子ペーパーコンソーシアムによれば、さらに多様な方式、メーカがあるらしい。

ブラウン管を駆逐した、液晶とプラズマの天下に割って入ろうという有機EL。そんな動画パネル界のような派手さはないものの、静止画パネルも各社静かに熱い戦いが続いている。

 

bloggerには画像や映像のアップロード機能はあるが、それ以外のファイルを置いておくことはできない。インプラントJPEGのような裏技的手法をとれば、事実上なんでもアップロードできるが、独自の動画ファイルを置いておいてそのまま再生させる、ような用途には使えない。置いておくためのサーバは、どうしても別途必要。

一般にプロバイダ契約には、Webスペース貸与も含まれる。そこを利用すれば、おそらく契約継続している限りは最も安全。逆に言えば、他社に乗り換えた際には、再アップロードやらリンク元の書き換えやらの手間を強いられる。またプロバイダによっては、URLからメールアドレスがバレてしまったりする。

そういったしがらみのない、Webスペースやオンラインストレージもある。
無料オンラインストレージとしては、NTTcomのShareStageやYahoo!Briefcaseあたりがまず思い浮かぶ。前者はいつの間にか有料サービスのみとなり、後者もこの12月より有料化されるとのこと。他にも探せばいくつか見つかるが、無料で無期限保存のネット上のファイル置き場としては、Google系のGoogleSitesと、Microsoft系のWindowsLive SkyDriveが良さそう。


まずはGoogleSites
Webスペースとして100MBが提供されている。Webページとして公開する必要はなく、単にオンラインストレージとして利用可能。Google系列であり、共通のアカウントで利用できる。
「ホーム」や「新しいページを作成」で作ったページ(フォルダ的な感覚)上にアップロードし、そのファイルのアイコンを右クリックして「ショートカットのコピー」でURLを得る。新しいページを作成する際は、「ファイルキャビネット」形式を選ぶと、ストレージとして扱いやすい。

http://sites.google.com/site/<ユーザ名>/<フォルダ名>/<ファイル名>?attredirects=0

クエスチョンマーク以降のURLパラメータ部分を削除すれば、直リンクとして使える。
ファイルをアクセス可能にするために、「サイトの設定」→「このサイトを共有」→「ネットで誰でも閲覧できるようにこのサイトを公開する (公開する)」にチェックが必要。

日本語のファイル名には完全には対応していない。アップロードはでき、ブラウザでのアクセスもできるが、ダウンロード時にはファイル名が変わってしまう。また上記直リンクURLでのアクセスもできない。ダウンロード時に表示されるファイル名を使ってもダメ。
また、実行形式のファイルはアップロードできない。exe、com、bat、cmd、wsh、wsf、vbs、vbe、js、jseあたりは拒否されてしまう。
他にも細かな問題はあるようで、さすがに拡張されるであろう100MB制限を除いても、なかなか縛りがきつい印象。


そしてWindowsLive SkyDrive
オンラインストレージで、全体で5GB、ファイルあたり50MBの容量が提供される。MicrosoftではWindowsLiveと称して、Hotmail(メール)やSpaces(ブログ)など様々なサービスを提供しており、その中のひとつ。アカウントはHotmailなどと共用できる。

サインインしたページの「公開フォルダ」内にアップロードする。この中に別のフォルダを作ることもできる。日本語のファイル名も問題なし。
当該ファイルのあるフォルダを開くと、そのフォルダ内の一覧が表示される。目的のファイルのアイコンをクリックすると、そのファイル専用のページが開く。ここでファイルのアイコンを右クリックし「ショートカットのコピー」でURLを得る。右下の方に表示されるURLや埋め込みタグは、いま表示しているページに関するもので、目的のものではない。

http://<ユーザ通しID?>.bay.livefilestore.com/<長い長い暗号文字列>/<ファイル名>?download

URLパラメータを削除すれば、直リンクとして使える。日本語のファイル名の場合は、URLエンコードされているが問題はない。また暗号文字列の部分は、ダウンロードする日によって変化するようだが、古いURLを使っても問題ないようだ。


現状で無料のオンラインストレージとしては、SkyDriveがベストチョイスか。
であれば、WindowsLiveで統一してしまっても……

関連記事


この記事へのリンク by 関連記事、被リンク記事をリストアップする」記事

ブログ アーカイブ