2010年12月27日月曜日

「HTML5 Pack for Dreamweaver CS3 and CS4」をDW3に入れてみた

普段はCS3を主に使用しているんですが、コーディングはもっはらDWさんに頑張ってもらってます。
んで今回、DWさんにもうちょっと活躍してほしいので、「HTML5 Pack for Dreamweaver CS3 and CS4」を入れてみました。

□入手先
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2188522

これをAdobeの「Extension Manager」で拡張機能をインストール。

どんなことができるかというと、

  • タグライブラリにHTML5の新しいタグを追加
  • HTML4のライブラリにも新しい属性や値を追加
  • ベンダー特異のコードを含むCSS3のコードヒント
って上記の3つは以下のサイトに記述されていたので引用。

 『効率的なサイト制作のためのDreamweaverの教科書』サポートブログ
http://dreamweaver.cc/blog/archives/post_72.html


□タグライブラリに追加
メニュー「編集」→「タグライブラリ」で確認。
この拡張で新規作成→HTML5は無理なんですが、そこらへんはDWのスニペット化していればいいと思います。
個人的にコードヒントはよく使うので、HTML5のコードヒント追加は嬉しい。


□ベンダー特異のコードを含むCSS3のコードヒント
 「moz-」やら「-webkit-」やらここらへんも統一してくれるとありがたいんですが、今んとこ”個性”と受け取ってます。
ここらへんのコードヒントがでるのもめさめさ嬉しいです。
接頭語に「-(ハイフン)」を入れると、上図のようにベンダーごとの”個性的”なコードヒントも!
入力がスゲー面倒だったのでこいつは嬉しいです。


まぁこれで、HTML5の勉強するインフラ整備はあらかたできたんじゃないかしら。
稀有で親切心が旺盛な方、何かもっと良いインフラ整備あるならご教授よろしくお願いします。

2010年12月24日金曜日

videoタグでビデオ再生

いろいろなサイトを参考にvideoタグでビデオを再生してみた。

□参考サイト
・CSS Nite LP 9.2(reprise)フォローアップ|ヨモツネット
http://www.yomotsu.net/wp/?p=578
・<video>タグで動画を埋め込むーそろそろHTML5|HTMLクイックリファレンス
http://www.htmq.com/html5/004.shtml

□コード
<video id="videos" controls autoplay>
      <source src='movie/test.webm' />
      <source src='movie/test.mp4' />
      <source src='movie/test.ogv' />
      <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

とりあえずローカルでプレビュー。
確認したブラウザは
  • FireFox 3.6
  • Safari 5.0.3
  • Google Chrome 8

いずれもOSはMac OS X。

まず僕のデフォルトブラウザであるFireFox先生ですが

表示されない。まぁまだまだだしね。これは仕方ない。
また後日調査しよう。

次はSafari君。


なぜ表示されない!?


まぁいいや、次はGoogle先生の子、Chromeさん。
ばっちし。

んーSafari先生が表示できなかったかわかんなかった。
試しに、<source>タグの位置を入れ替えると、、、

<video id="videos" controls autoplay>
      <source src='movie/test.mp4' />
      <source src='movie/test.ogv' />
      <source src='movie/test.webm' />
      <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

safariで表示された。。。

どうやら読み込む順番に問題があったみたい。
先に、「〜〜.mp4」を読んでおいたほうがsafariはいいみたいね。
webmはまだ見れないからわかんないけど、コーデック問題はどうにかしてほしい。
というか、逆にいろんなコーデックをサポートしておけば問題ないと思うんだが。

個人的な感想ではmp4はファイルが重いイメージがあるんだよね。
ogvがマイナーでね、圧縮率=品質だからこちらもどうかと思うんですけど。

でもXHTMLみたいにObjectタグでゴチャゴチャと記述しないでシンプルでいいわvideoタグ。

2010年12月22日水曜日

ブログをやってみる。

遅ればせながら、実に何年ぶりのブログ投稿。
続けられるように努力してみることにする。

一応Web屋なので関連事から、関係ないエロまで幅広く掲載できれば。
至極真面目なブログにしますよ。
ええ。

contributeで投稿してみたテスト

とりあえずク○重いなww
改行するだけで10秒くらいかかるってどんだけだよ!金払うってレベルじゃねーぞって感じです。

さて、MP3やらFLVやらの貼り付けができるか以下でテストです。あ、久々にブログやらのメディアを立ち上げたのに挨拶もなしですが、すみません。すみません。すみません。FLVだめぽい。

ついでにmp3を添付してもダメだ。。。

追記:
ブログだと、メニューから「添付ファイル」→「マイコンピュータから」→mp3ファイルを選択と、ヘルプも確認しつつmp3ファイルを投稿する手順までは可能だけど、エントリを投稿する段階でエラーが出る。
FLVも同様だな。

そこがわかったので収穫。

まぁ今後はcontributeで投稿なぞせんが、後学のために。自らの備忘録的に。