へんこつ日誌

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

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

おみさんの日記で試してみたら、IE、Firefox、Opera、Safari、Chromeの５つではちゃんと表示も出来ていた。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