TopJavaScript > 2007年8月
2007年8月23日

Google マップの貼り付け用 HTML を valid にする

August 23,2007 1:23 AM
Tag:[, ]
Permalink

Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。

1.埋め込み HTML の利用方法

埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします(スクリーンショット右上)。

リンクをクリックすると、HTMLコードがすぐ下に表示されます(下)ので、

「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、

<iframe width="425" height="350" ~

のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。

2.問題点

埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHTML1.1 では廃止されていることと、以下に示す問題のため、この HTML をブログに埋め込むと not Valid になる可能性があります。

  • & が実体参照(&amp;)されていない
  • br 要素の"/"の前に空白がない

3.変換スクリプト

ということで、埋め込み用 HTML を valid にするスクリプトを作成してみました。

上のテキストエリアに Google マップ埋め込み用 HTML を貼り付けて、 object または iframe + object のボタンをクリックすると下のテキストエリアに valid な HTML が表示されますので、それをブログ等に貼り付けてください。

object 要素だけではどうもクロスブラウザにならないようです(IE で正常に表示されない等)ので、現状では iframe + object(条件付きコメント利用)を推奨します。


Windows XP + IE6/IE7/FireFox2/Opera9/Safari3で動作確認し、Markup Validation Service で valid になることを確認していますが、不具合等ございましたらご連絡ください。

参考までに、このスクリプトでは下記の変換を行っています。

  • iframe 要素を object 要素に変更
  • src 属性を data 属性に変更
  • object 要素で不要な属性(frameborder/scrolling/marginheight/marginwidth)を削除
  • object 要素に type="text/html" を追加
  • object 要素の「要素の内容」に「non data」を挿入
  • & を &amp; に置換(object要素内のみ)
  • br 要素に半角空白を付与

4.関連・参考

2008.09.29 Google の出力コードが変更されていたので、ツールを修正しました(frameborder/scrolling/marginheight/marginwidthが削除されない不具合の対処、&の変換削除など)。 2009.02.07 IEでGoogle マップ以降が表示されなくなる不具合を修正しました。
Comments [7] | Trackbacks [11]
2007年8月14日

Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する

August 14,2007 1:55 AM
Tag:[, , ]
Permalink

デフォルトテンプレートで新しく表示されている Movable Type 4 のロゴは透過PNGのため、IE6以下のブラウザでは透過されず、2色で表示されてしまいます(下)。

Movable Type 4 ロゴ

ここでは pngfix.js を利用して透過する方法を紹介します。

他にも透過PNGライブラリは色々出回ってます。

1.スクリプトのダウンロード・アップロード

PNG in Windows IE: How To Use の中間辺りにある pngfix.js のリンクをクリックして、pngfix.js をダウンロード。
ダウンロードした pngfix.js をサーバのブログ・ディレクトリ(index.html があるディレクトリ)にアップロード。

2.テンプレート修正

ブログ管理ページより「デザイン」→「テンプレートモジュール」→「ヘッダ」を選択し、head 終了タグの直前に下記を追加。
MT3以前のテンプレート構成を利用している場合(で新しいロゴを使っている場合)は、各テンプレートの head 終了タグの前に下記を追加。

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<$MTBlogURL$>pngfix.js"></script>
<![endif]-->

これで再構築をすれば下記のように透過されます。この設定は他の透過PNGにも有効です。

Movable Type 4 ロゴ(修正後)

Comments [2] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3