Columbus Blog

新発見日記。ただし発見の意味は広義・・・感想・愚痴もときどき・・・

文法チェック2

2010.02.04 Thursday 06:34

さて、メインサイト89と姉妹サイト115の合計204のhtmlページのチェックをして、
すべて100点にした。
しかも<よくできました>の100点マークも減点対象とならないエラーを含むので、
それらエラーもすべて解決した<たいへんよくできました>マーク獲得までがんばってみた。
 ちなみに100点未満だと<ふつうです>とかそんなのが表示される。
よくできましたたいへんよくできました
もちろん、なかにはどうやっても解決不能という項目がある。
たとえば、リンクを貼ったURLの文字などはかなりの点数で減点されてしまうのだが、
これは文法チェックシステム自体の不備なので変えようがない。

そんな場合でも、邪道だがこの部分を外部ファイルにすると解決できたりする。
外部ファイルまでは、チェックシステムでは読み込まれないのだ。
今回はどうせならということで最高マークにこだわってみたというわけだ。
そういう意味ではすべての内容をJavascriptで読み込むようにすれば
どんなひどい内容でも満点はとれるのだが、
まあ、これはどうしようもないチェック機構の不備なところだけを、
ということで自主規制(笑)をした。

ということで、今回は、そのURLが含まれているというだけでなく、
やたら文法的には不備なソースを吐き出す、Flashのコードについて。

問題のFlashは、もはや年代もののMacromedia Flash MX
もしくはMX 2004で作成したものであり、
当時はまだCSSやW3C等の基準があまり浸透していない時期でもあった。
そのためソフトのほうが基本的にいい加減なコードを吐き出していたものと思われる。
ただ、ダメコードでもFlash自体はちゃんと現在でも読み込んで作動するわけだから、
こだわらない人にはどうでもいい話だ。
また、MacromediaではないAdobeの最新ソフトでは
ちゃんと正しいコードをはきだしているのかどうかは持っていないのでわからない。

そんなわけで、いまから5年前に作成しソフトから出力したFlashのコードの例。
あのときはただただコピーペーストするしかなかったなあ。

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0"
 WIDTH="140" HEIGHT="170" id="hogehoge" ALIGN="">
 <PARAM NAME=movie VALUE="hogehoge.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="hogehoge.swf"
quality=high wmode=transparent bgcolor=#FFFFFF  WIDTH="140" HEIGHT="170" NAME="hogehoge" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED></OBJECT>

いまから見るとなんとまあ、きたならしいコード。
quality=high wmode〜のあたりなんか""マークで囲ってないし、
半角スペースが2つ続いていたりする。

 これを試しにチェックすると、以下のようになる。<がんばりましょう>である。
厳しい採点で、吐き出したファイルそのものは -209点とすごいマイナス点数となっている。
ちなみに、筆頭の数値は、少ない数字はエラーが軽く、9 になるほど致命的。
がんばりましょう
7: <OBJECT> の ALIGN の属性値に空の値を指定することはできません。
3: <OBJECT> には等価な内容を書くようにしましょう。
8: <PARAM> の VALUE の属性値 `#FFFFFF` は引用符で囲まなければなりません。
7: <EMBED> は他のHTML用のタグです。
8: <EMBED> の BGCOLOR の属性値 `#FFFFFF` は引用符で囲まなければなりません。 
7: </EMBED> は他のHTML用のタグです。

さて、これをどう修正すればいいのかだが・・・。
ALIGN の属性値は入れてもあまり意味がないのでこれはそのままカットしてしまう。
引用符で囲むべきところは囲む。
問題は、「<OBJECT> には等価な内容を書くようにしましょう」と
「<EMBED> は他のHTML用のタグです」の意味。

等価な内容とは、<OBJECT>と</OBJECT>の間に説明タイトルを付けろ、
というようなことらしいが、ここにそれを入れ込むと、
こんどはFlash自体が作動しなくなってしまう。
このままでは解決のしようがない。

また、「<EMBED> は他のHTML用のタグです」とは、なんのこっちゃ?
よくわからないが、使っちゃいけないらしい。ちゃんとFlashが作動するのに。
だからといってこの部分を単純に削除するとやはり作動しなくなる。

ここは、検索して先人に対応方法を教えてもらうしかない。
なかには誤った対処方法を紹介しているサイトもあったが、
いろいろ不備な情報を試行錯誤して行き着いたのが以下。

<object type="application/x-shockwave-flash" data="hogehoge.swf" width="170" height="140"><param name="movie" value="hogehoge.swf" valuetype="ref" type="application/x-shockwave-flash"><param name="loop" value="false"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="bgcolor" value="#ffffff">ほげほげのフラッシュ</object>

これならまったく減点されない。<EMBED>もALIGNも使用しないだけでなく、
よくわからない「clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase=" http://download.macr omedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0"」も要らないし、「PLUGINSPAGE=" http://www.macromedia.com/go/getflashplayer"」もばっさり!
だいたい http://www.macromedia.com/ は現在は http://adobe.com/ だからね。

要点は、上記修正コードの赤字のところを差し替えればいいだけ。
loopのfalseは、Flashをループさせるのならtrueをいれればいい。
これはswfファイルがあれば、すべて上記の様式で満点はとれるので便利。

さて、これで解決、と思ったが、
それでは昨今はやりのYouTubeの埋め込みはどうなるだろう。
YouTubeサイトで提供している埋め込みコードは以下のような感じ。

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/9e-mInaBkFQ&hl=ja_JP&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9e-mInaBkFQ&hl=ja_JP&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

これをチェックしてみると、-284点で、やはり<がんばりましょう>となる。
-284点って、100点満点に400点近くも足りないわけ?

3: `&hl` は不明な実体参照です。
3: `&fs` は不明な実体参照です。
5: メタ文字 `&` は `&amp;` と書かなければなりません。
7: <PARAM> には終了タグ </PARAM> はありません。
7: <PARAM> には終了タグ </PARAM> はありません。
7: <PARAM> には終了タグ </PARAM> はありません。
7: <EMBED> は他のHTML用のタグです。
7: </EMBED> は他のHTML用のタグです。
3: <OBJECT> には等価な内容を書くようにしましょう。

ちゃんとFlashは機能するけど、採点は厳しいのである。
やはり「<EMBED>〜」や「<OBJECT>〜」とか出てくる。

さらに当惑するのが、「`&hl` `&fs` は不明な実体参照です」 や
「メタ文字 `&` は `&amp;` と書かなければなりません」。
こんなん、変えたらURLが機能しなくなりますで!

これは結局、URLを除いては以下がベストの回答。とてもシンプルだ。

<object width="425" height="344" data="http://www.youtube.com/v/9e-mInaBkFQ&hl=ja_JP&fs=1&" type="application/x-shockwave-flash"><param name="movie" value="http://www.youtube.com/v/9e-mInaBkFQ&hl=ja_JP&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always">ちっちゃな時から</object>

赤字だけが差し替え部分でこれは手軽に利用できる。
もとのURLを2ヵ所に移し変えし、widthなどサイズは425:344の比率で自由に。
あと曲名など「等価な内容」とやらを適当に書き込むだけでOK。

ただ、これを記したhtml文書は、文法チェックを受けると、
さきほどより点数もマイナスの半分200点くらいは回復するが、
200点ほど減点され、-100点前後になってしまう(ほかのコードの量でも変化する)

このことは、正しいコードかどうかにはなんの問題でもないことだが、
URLを隠すと、一気に100点満点とすることができる。
<たいへんよくできました>マークがほしい人はURLだけJavascriptで読み込むしかないね。

WEB関連 | comments(0) | trackbacks(0) | - | - |

コメント

コメントする










この記事のトラックバックURL

http://columbusblog.tanuki-bayashi.com/trackback/935476

トラックバック