へんこつ日誌

Oral_Top_Anchor
トップ «前の日記(2011年03月06日(日)) 最新 次の日記(2011年03月08日(火))»
RSS feed


ここから本文

2011年03月07日(月) [長年日記]

§1 youtube.rbを少しValidに書き換えてみた

おみさんがYoutubeのファイルをアップロードするようになって、一気にHTMLの正当性に翳りが見えたので、コレは大変とちょっと勉強してみた。youtube.rbも進化していて、今のバージョンはiframeを使うようになっていたが、コレでもやっぱりバリデーターではエラー続出なのでobjectでナントカしようと試みる。色んなところを参考にしてパクリの集大成が出来た。代替テキストも入れたのでアクセシビリティも何とかクリアかな。

おみさんの日記で試してみたら、IE、Firefox、Opera、Safari、Chromeの5つではちゃんと表示も出来ていた。youtube.rbのPCに掛かる部分だけの書き換えなのでmobile部分やSMARTPhoneの部分は何がValidなのか解らないので、手つかずです。Validを維持するのと便利さの享受を両立するというのはなかなか難しいことですね。

def youtube( video_id )
       if @conf.mobile_agent? or feed? then
               %Q|<div class="youtube"><a href="http://www.youtube.com/watch?v=#{video_id}">YouTube (#{video_id})</a></div>|
       elsif defined?( :smartphone? ) and @conf.smartphone?
               size = [240, 194]
               <<-TAG
               <iframe class="youtube-player" type="text/html" width="#{size[0]}" height="#{size[1]}" src="http://www.youtube.com/embed/#{video_id}" frameborder="0">
               </iframe>
               <div class="youtube"><a href="http://www.youtube.com/watch?v=#{video_id}">YouTube (#{video_id})</a></div>
               TAG
       else
               <<-TAG
               <object data="http://www.youtube.com/v/#{video_id}" type="application/x-shockwave-flash" width="425" height="350">
               <param name="movie" value="http://www.youtube.com/v/#{video_id}">
               <param name="wmode" value="transparent">
               <!--Substitute contents -->
               <div>
                       <h4>Flashプラグインがないユーザへの代替</h4>
                       <p>代替テキスト:YouTubeのムービーです。</p>
                       <p>ムービーをご覧になるにはFlash Playerのインストールが必要です。</p>
                       <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" height="31" width="88"></a></p>
               </div>
               <!--Substitute contents -->
               </object>
               TAG
       end
end