こんばんはFlowlightです。休日いかがお過ごしだったでしょうか？本日は、タイトルにもあるとおりHTML5のお話です。最初に、私はHTMLはほとんど読めません。まして一人で書けといわれたらまったく書けないと思います。最近は、ネットにすばらしいチュートリアルがたくさんあるので、それを参考にして少しずつ自分のところのＨＰを改装しております。最近、すごく気になっていたFlashの対応終了の問題が、いよいよ現実に障害になりだしたので、少しずつFlashをHTML5に置換していかなければなりません。数年前から、特にスマフォ上では気になっていたのですが、なかなか手がつかずそのままになっておりましたが、だいぶん参考のサイトも見つかったので、少しずつ進めてまいります。
まず、私のサイトで主に使っているのは、Flash音楽プレイヤーです。それをHTML5のプレイヤーに置き換えていく作業です。結構、大量に使っているので、かなり大変な作業です。もう、過去のものはそのままにして、これから作るものに適応していこうとも思っております。で、まず既存のFlash音楽プレイヤーです。
これだとPCではまだ大丈夫だと思いますが、スマフォだともう表示できないですね。そこで、HTML5の＜audio＞タグで書いてやります！そうするとこうなります。
これですべてのデバイスで再生できるようになったはずです。つい最近まで、このタグのエディットの仕方がいまひとつわからなくて、、、。style=ってのが理解できてなかったです。CSSをあんまり書かないので、こういう配置とか配色とかデフォルトでやってましたが、もう少しこだわっていこうかと思います。しかし、このタグはブラウザ毎で表示が違うので、そればまた悩ましいところです。しかも、MP3に対応していないものもあるようで、OGGファイルを別に用意しないといけなくなるので、また難しいですね。道のりが長そうです。このような、基本的なソースはこの辺りに書いてありました。
ほんっとにはじめての HTML5 [66] 音声をプラグイン無しで組み込もう
基本的なところはここで押さえて、ここからはJavaScriptを組み合わせてさらに見栄えをよくしたものです。なんだかいろいろと使えそうなものがあって助かりますね。「HTML5音楽プレイヤー」で検索したら結構出てきました。
HTML5 Audioで作るiTunes風音楽プレイヤー
Vesper – 格好良いデザインのHTML5音楽プレイヤー
HTML5プレーヤーのWeb埋め込み jQueryプラグイン「jPlayer」の使い方
この辺りを使ってみるとほんとにFlashプラグインと変らないですね。
とにかく、HTML5でソースを書き換えていこうかと思います。こんな感じで自分メモ用にＨＰ改装のヒントを書いておきます。
詳しい方がいたらぜひ色々と教えてください！！HPの見栄えをもっとよくして行きたいです！また更新したら随時ブログでご報告していきたいと思います。今日はこの辺で失礼致します。