videoタグとコーデックのお話し

html5には動画を文書に埋め込むための<video>タグがありますね!
html5も2012年12月17日にW3Cが策定完了の発表を行ったり、2013年1月6日には全国のコワーキングスペースなどで新春!!HTML5KARUTA大会が行われるなど、話題にも事欠きませんが、流行のiPad、iPad miniなどiOS系ではFlashなどの技術が基本的には使えないなど、動画の世界もhtml5を利用した技術へとシフトしてきた感があります。

当方も今までFlashやWMVで提供していた動画を、各種スマートフォンやタブレットなどでも再生ができるように<video>タグによる動画再生へと変更することにしました。が!これが意外と面倒でしたよっと…技術的な覚え書きを残しておきます。

まずはhtml5のコードですね。
一応、現在作成中のサイトはIE7以下をばっさり切り落として作成しているので、IE8以降と一部の有名ブラウザ程度をカバーする程度の内容でございます。元々存在していたFlash動画をIE8用に再生できる仕様にはしていますが、完全ではございませんのでご注意ください。

<video poster="/img/movie/movie.jpg" preload="metadata" controls="controls">
  <source src="/img/movie/webm/movie.webm" type="video/webm" />
  <source src="/img/movie/mp4/movie.mp4" type="video/mp4" />
  <object id="movie" data="/img/movie/flash/movie.swf" type="application/x-shockwave-flash" width="356" height="200">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="/img/movie/flash/movie.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="scale" value="showall" />
      Movie
  </object>
</video>

<video>タグについての詳しい説明は省きますが、posterは動画再生前の静止画を指定できます。
preloadをmetadataにしているのは、モバイル端末などで自動再生されると相当な容量のデータをページを開いただけでダウンロードさせることになるので、動画の情報だけを取得するようにしています。
controlsは指定しておけば再生などのインターフェースを表示できます。

sourceは様々なブラウザでも再生できるよに複数のコーデックを使い分けができるように別表記しています。このソースではその下にobjectタグでFlashを指定していますが、一応<video>タグに対応していないIE8などのために入れてあります。通常は<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>などのように指定しておけばいいようです。

動画のコーデックに関しては、Wikiなどを見ると各ブラウザで迷走中のようですが、IE9~10、Firefox、Chromeなど各最新版のブラウザをターゲットにするならmp4とWebMがあれば十分対応できると思います。

さてこれで指定した場所に動画のファイルがあれば再生されるはずなんですが…

「ローカルで再生するのにサーバーにアップロードすると再生しないじゃんか!」

なんてことが起こります。まあ、多分ほとんどこのケースのようです。そんな時にも慌てず騒がず.htaccessに以下の記述をしましょう。

AddType video/mp4 .mp4
AddType audio/webm .webm

サーバーがmp4やwebmの形式を認識できていない事が原因のようですのでほとんどの場合これで解決します。

さて、mp4とWebMコーデックの準備なんですが、最初はWebMのエンコードに手間取りました。最初はMiro Video Converterなるフリーソフトで変換してみましたが、Firefoxできれいに再生されませんでした。
最終的にはFree Studioというさまざまな動画変換をパックにしたフリーソフトで対応しました(Macの方は別のソフトをお探しくださいorz)

WebMに関してはこれで変換するだけで問題なく再生されると思います。

mp4ですが、これもややはまりました。同じくFree Studioで変換をしたのですが、IE9で再生されませんでした。IE9でmp4が再生されない時の調査方法は、[F12]で開発者ツールを開いてネットワークタブを開きます。

photo_20101118_0038
この状態で[F5]ないしページの更新を行えばページで使われているファイルが取得される様子が分かります。ここで先ほどソースに書いたsourceのsrcに書かれている/img/movie/mp4/movie.mp4がちゃんと読まれているのか確認できます。
アップロードしたmp4ファイルの種類がvideo/mp4になっていなかったら前述した.htaccessなどでファイルタイプを指定していないとそのサーバーでは再生できません。すぐに指定しましょう。(できないサーバーもあると思います)

しかし、ここが間違っていなくてもIE9で再生できない場合があります。私はそうでした。
これは、拡張子mp4のコーデックには2種類あり、MPEG4形式のものとH.264形式のものがあって、IE9ではH.264形式のものがサポートされているということだそうです。
前で紹介したFree Studioでmp4形式に変換できますが、デフォルトではH.264でサイズフリーのもの(変換元の動画のサイズを変換しないもののこと)がプルダウンにありませんでした。でも自分で設定できるので、

photo_20101118_0039
などのように適当に作成して変換してしまいましょう。

これでIPad、IE9、Firefox18、Chrome24で再生を確認できました。
html5が使えるブラウザが増えてきて<video>タグなども気軽に使えるようになってきましたが、サーバーの設定やコーデックなど、ソースコードだけではどうにもならないものもありますので、みなさんの参考になればいいなー

写真部で勉強したことを仕事に生かす

先日2012年5月27日にFacebookの写真を撮りに行こうグループで開催した「写真撮影 初心者勉強会」にて優太郎君がプレゼンしてくれた3分割構図をさっそく仕事でも役立ててみようと思いました。

もともとは写真を撮影する際にある程度構図を考えながら撮影すると良い写真が撮れますよっていう内容なのですが、仕事で写真を編集してWeb用のパーツ等を作る際にも活用できます。

まずはPhotoshopで3分割構図の作業をするために役に立つグリッドを入れてみます。(メニュー等はCS5.5 Windows版)

[編集(E)]から[環境設定(N)]を選択し、[ガイド・グリッド・スライス(S)]を選んで下記のように設定します。グリッド設定

次に[表示(V)]から[表示・非表示(H)]から[グリッド(G)]にチェックを入れれば表示されます。

3分割グリッド表示こんな感じですかね?

ここに写真部で撮影した画像を乗せてみます。

写真を配置

一応グリッドを意識してスカイツリー部分をグリッド配置してみました。写真そのものは縦で撮ったため右側が空いているのとスカイツリーが斜めってますね。少し補正をかけてみます。

斜めを垂直に補正

スカイツリーは垂直になりました。ものさしツールで測ってから修正すると角度が分かって楽に補正できます。

でもまだ右側に画像の足りない部分がありますねぇ。なんとかしたいところです。

編集したい部分を範囲選択

修正したい部分を適当に範囲選択して…[編集(E)]から[塗りつぶし(L)]したいところですが…できませんね。まずは取り込んだ写真のレイヤーを右クリックして、レイヤーをラスタライズしてしまいましょう。

これで塗りつぶしが使えるようになりました。そしてやっぱりこれですね!

コンテンツに応じた塗り

え?そんな項目ない?新しいPhotoshop買ってくださいヽ(´ー`)ノ

完成!

ほうら、簡単。これで今日の仕事は終わりです(ぉ

優太郎くん、次の構図勉強待ってますよ~

いろいろなCSSの記述方法(メモ)

HTML5+CSS3で新サイトを構築していたら、CSSの特にセレクタ周りでいろいろとできるな~と思ったので忘れないうちにメモしておきます。ちなみにCSS3からのセレクタもありますが、CSS2.1でもセレクタはたくさんありました。それらも含めて使ったものの紹介なので、CSS3に特化したものではないことにご注意ください。

まずはよくある「最初だけ」とか「最後だけ」とか「偶数・奇数」などなど。

htmlコード

<section id="contents">

  <h1>title</h1>

  <article>
    <h2>sub_title1</h2>
    <p>contents1</p>
  </article>

  <article>
    <h2>sub_title2</h2>
    <p>contents2</p>
  </article>

  <article>
    <h2>sub_title3</h2>
    <p>contents3</p>
  </article>

  <article>
    <h2>sub_title4</h2>
    <p>contents4</p>
  </article>

</section>

例えばこのようなソースがあったとします。この時以下のことをやるには…

1.最初のコンテンツだけ枠をつけたい
CSSコード

#contents article:first-child {
  border:1px solid;
}

2.最後のコンテンツだけ枠をつけたい
CSSコード

#contents article:last-child {
  border:1px solid;
}

3.偶数のコンテンツだけ枠をつけたい
CSSコード

#contents article:nth-child(even) {
  border:1px solid;
}

4.奇数のコンテンツだけ枠をつけたい
CSSコード

#contents article:nth-child(odd) {
  border:1px solid;
}

まあ、このあたりはgoogle先生でCSSセレクタで探すと普通に書いてありますね。
さらに…

5.最初のコンテンツ以外に枠をつけたい
CSSコード

#contents article:not(:first-child) {
  border:1px solid;
}

上記5の書き方で他に、
・特定のclassが描かれているコンテンツを省く
CSSコード

#contents article:not([class="hoge"]) {
  border:1px solid;
}

などもできますね!

これらは組み合わせることもできるので、例えば
CSSコード

section:not(:last-child) article:ntn-child(odd) {
  border:1px solid;
}

とかすると、最後のセクション以外の奇数のアーティクルに枠をつけるなんてこともできますね。

もっと変態な書きかたをすれば…

#contents article:not(:first-child):not(:last-child) {
  border:1px solid;
}

なんて書けば最初と最後のアーティクル以外に枠をつけます。

いやぁ、深いですねぇ。

レスポンシブWebデザインの時に考えるhtaccess

最近はレスポンシブWebデザインでホームページを作ることも増えてきましたよね。

ただ、気をつけなくてはいけないのが、スマートフォンなどの携帯ブラウザで見たときも同じサイズの画像が表示されるってことです。(基本的にはですけどね)

CSSの書き方にもよるのでしょうけど、@media screen and (max-width: 569px)なんて書き方で分岐していても、CSSで読まれていないはずの場所の画像が実は読まれているなんてことはよく耳にします。FireMobileSimulatorなどを導入してFirebugなどで調べれば実際に読み込まれているか調査できますのでご自身のサイトで確認してみるといいですよ。

で、media screenなどの分岐ではなく、画像はそのまま表示しちゃいましょうとなると、やはり気になるのは画像サイズですね。

PCブラウザ用に作られた画像は、例えば文字の乗って入るバナーのような画像とか、ファイルサイズ的にはそんなに大きくなくても、スマートフォンの小さな画面に縮小されてしまうと文字が読めなくなるなどの弊害も考えられます。

今回、管理サイトのリニューアルに際し、サイトのWidthが大きくなることになりました。そしていくつかのランディングページ的な役割のファーストビュー部分をインパクトを持たせるためにサイドバーなしの大きな画像で表現することになってしまったため、その大きな画像をスマートフォンに読ませないために色々工夫することになりました。

そこで思いついたのがスマートフォン用の画像を別に用意してhtaccessで分岐させてしまおうという方法です。

ただし、すべての画像をスマートフォン用に用意するのは嫌なので、スマートフォン用の画像が用意されている場合はそちらを読み込み、それ以外はPC用の画像をそのまま使用するという方法で行うことにしました。

しかし、タブレット(iPadやAndroidタブレット)ではPC用の表示を行いたいためスマフォ用画像は使わない(タブレットを省く)設定にしなくてはいけません。

で、行き着いた先のhtaccessがこちらです。

# スマートフォンでアクセスがあった場合に画像フォルダを変更
RewriteEngine on
RewriteBase /img/

RewriteCond %{REQUEST_URI} !mobile/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|BlackBerry|Windows\ Phone|Windows\ CE) [NC]
RewriteCond %{REQUEST_URI} ^/img/(.*)$
RewriteCond %{DOCUMENT_ROOT}/img/mobile/$1 -f
RewriteRule (.*) /img/mobile/$1 [R,L]

ルートにimgのフォルダがあります。その中に普通にページごとにフォルダ分けされており、/img/hoge/fuga.jpgなどのように置かれています。

スマートフォン用の画像はimgの下にmobileフォルダを作り、PC用画像のフォルダと同じ構成で/img/mobile/hoge/fuga.jpgなどのように置いています。

まず{REQUEST_URI}でmobileフォルダの場合はリライトを無効にします。

次に{HTTP_USER_AGENT}でスマートフォンを抜き出しますが、Androidには携帯とタブレットの両方があります。iPadはUserAgentがはっきり分かれていますが、Androidはどちらもほぼ同じです。しかし、Android携帯の場合UserAgentにmobileという記述が入ってくるらしいので、これが入っていないものはタブレット(もしくはAndroidOS搭載のPC?)とみなしてリライトしません。(Windows系の記述はどっかからの丸コピで実際に試していませんのでご注意)

そして次の行でimg以下のURLを取得し、RewriteCond %{DOCUMENT_ROOT}/img/mobile/$1 -fでmobileフォルダ配下に画像が存在しているかどうかを-fのフラグでチェックしています。この「リライト先に画像があるのかないのか?」の判定をhtaccess上で行うのがちょっと苦労しました。Neo Inspirationさんの.htaccess で RewriteCond の後方参照がとても参考になりましたのでご紹介しておきます。

iPhone4S、iPad、Android携帯での実機検証もしていますが、何か不具合や問題点の指摘などがありましたら教えてください。自力だとこれが限界です(汗)ソーシャルの力を信じましょうw

年末年始休暇中にウェブサービスをひとつ作る!

と、言うことで、本日からちょっと頑張ってます。

でも、ブログを書きながら作業はできない(そんなに器用じゃない)ので、ブログは参考にしたサイトのメモをとりあえず書きながら、あとでまとめようと思います。

まずドメイン取得しました。もともとムームードメインを使っているので、そこでさくっと。でも.comなどで取るべきか、安い.usとかで名前を工夫して取ろうかとか、色々考えましたけど、XOOPSの酒井さんやWordPressの星野さんなどの助言をFacebookで得て決めました。

ムームードメインだと.comで年間950円ですね。サーバーはとりあえず現状のものを使うとして、動くかどうかも分からないウェブサービス作るのに多大なお金はかけられないので、1000円弱ならまあスタートとしてはいいでしょう。

登録型のウェブサービスを作ろうとすると、ユーザーが使うURLが気になるところ。個人的にはexample.com/hoge/とかはなんか好きになれないので、hoge.example.comなどのようにユーザー名のサブドメインが使えるといーなーと思います。

と、言うことで、DNSはムームーじゃ駄目だということがわかります。(ワイルドカードが使えないって意味で)なので、子育て家族のための会員制ブログ-ころぐ( http://colog.jp/ )を作っている西川さんがお勧めしていたDozens( http://dozens.jp )を使うことにしました。

まずDozensの設定方法は、
・DNSサービス”Dozens”でのドメイン運用開始の流れ | DocumentaryONE( http://do-one.jp/blog/web-service/dozens/ )で基本的なことを学習し、

Dozensのワイルドカードの設定方法は、
・ムームーDNSでワイルドカードを使う | mutter( http://nplll.com/archives/2011/04/dns.php )で設定しました。

ワイルドカードの設定については、設定後nslookupもうまくいかなかったので、
・無料のネームサーバ「Dozens.jp」を使ってみる | 某氏のたわごと NEXT( http://blog2.k05.biz/2011/06/dozensjp.html )の追記で解決しました。

が、しかし、肝心のロリポップ側でDozensのDNSを認識してくれません。新規ドメインの設定でDNSをlolipopに設定しろと言われてしまいます。nslookupをしてもIPアドレスが返ってくるし、pingも通るのでDNSの設定は問題なさそう…

そこで、一旦ムームードメインのDNS設定をDozensからロリポップに変更。しばらく待ったらロリポップ側でドメインの設定ができました。すかさずムームードメインのDNS設定をDozensに変更。少し時間を置いてもアクセスできるので問題なさそうです。

WordPressのマルチサイト化は、以前にもやったことがありましたが、まったく覚えていなかったので(ヲイ
・[058] ロリポップでWordPress &lt;2&gt;マルチサイト化 | WordPress Experiment( http://experiment.street-square.com/2010/12/06/lolipop-multisite-subdomain/ )で設定しました。

とりあえず、マルチインストールでのWordPressの表示は完了。ネットワーク管理者でユーザーの作成などができる状況に。テスト用のユーザーを作成するも、テスト用ユーザーの管理画面からはサイトが作れない…

ここでめげていてもしょうがないので、管理者でサイトを作成。sample.example.comのアドレスが生成されたところまで確認できましたが、やはりロリポップの管理画面で設定をしないとサイトが表示されません…

ってことで、どうっすっかなw

いちおう、WordPress日本語Codex-レンタルサーバ情報/マルチサイト対応( http://wpdocs.sourceforge.jp/レンタルサーバ情報/マルチサイト対応 )ではCORESERVERにWEB サーバのワイルドカードサブドメイン(ServerAlias)の設定方法ってのがあるので、もしかしたらできるっぽい?

と、ここまでで夜も更けてきたのでお休みなさい…