[mootools]ボタンでスタイルシートを切り替える

mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

スタイルの違うファイルを3種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。

“[mootools]ボタンでスタイルシートを切り替える” の続きを読む

GoogleMap IEだけ出るエラーの原因

GoogleMapを入れたページをブラウザで確認したとき、FireFoxやSafari、IE7などではエラーが出ないのに何故かIE6系のブラウザだけエラーを吐くことがある。

主なものは

  • ‘GMap’は宣言されていません
  • ‘G●●’は宣言されていません
  • ‘}’がありません
  • オブジェクトを指定してください
  • ‘return’ステートメントが関数の外側にあります

IE6以下で起きるこれらのエラーは、GoogleMapsを表示してるページの文字コードがShift-jisやEUCだと出ます。
これは表示するファイルの文字コードだけでなく、外部jsファイルの場合も当てはまるので外部jsファイルにgooglemapの関数を作ったときなんかも、文字コードをUTF8にする必要がある。

どうしてもUTF-8に出来ないという場合は、GoogleMapだけ入れたページを別のHTMLファイルに作成して、それをiframeで表示するのが手っ取り早いと思う。

文字コードをUTF8にしてもまだエラーになる。
他のブラウザでは見れるのに…なんて時は、次のポイントをチェックしてみてください。

  • 変数やオブジェクトの名前にエラーを引き起こす名称(classなど)が含まれていないか
    →適当なプレフィック(myClass)を付けたりクォーテーションで囲ったりして変更
  • オブジェクトや配列の最後の要素にカンマ付いていないか
    { 'key' : 'value', } や [ 0, 1, 2, ] は 『識別子、文字列または数がありません。』というエラーになります

※最近エラーに関する検索が多いようなので補足

GoogleMaps API V3はFirefox2やIE6などのレガシーブラウザをサポート対象外としているので、どうしてもエラーが消えない場合はV2を使う方が建設的です。

‘document.body’ は Null またはオブジェクトではありません。というエラーについてはこっちに書いてますが、scriptタグをbody閉じタグ前に移すと直るようです。

スクリプトの書き方が悪くてエラーを引き起こす場合もあります。こちらのGoogle JavaScript Style Guide(和訳)がとても参考になります。

※IEでマップを開くと「インターネットサイトhttp://maps.google.co.jp/を開けません。操作は中断されました」が出る件について補足

2010/10/15くらいから突如出始めたエラーのようです。(世界的に)
エラーが出たり出なかったりしているところを見ると、APIよりもIE側に問題があるように見受けられます。
このセキュリティ更新プログラムを当てたら直ったという報告がフォーラムにあったので引用しておきます。

英語版のフォーラムに情報がありました。
http://www.google.com/support/forum/p/maps/thread?tid=1a59afc1bb60d0c6&hl=en

以下のセキュリティパッチをインストールすると問題が改善されるようです。
MS10-071
http://www.microsoft.com/japan/technet/security/bulletin/MS10-071.mspx

ただし、上記のパッチは、WinXP SP3 用となっているので、 SP2 の人はインストールできないように見えます。
加えて、英語版フォーラムの情報によれば、このパッチのインストール後、いくつかのwebcomponent
(具体的にどんなものかはわかりませんが・・・)が動かなくなったと報告が挙がっています。
言うまでもありませんが、会社のPCに導入する際には動作検証など行なった上で導入してください。

[mootools]ランダムスタイルシート

mootoolsでアクセスするたびにスタイルシートを変えるサンプル。
(ダウンロード時にRemoteのAssetsが必須)
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

読み込みが始まってからランダムを実行するので、スタイルが適用されるまで数秒のタイムラグが発生する。
レイアウトのスタイルをlinkしといて、このランダムで上書きするのが妥当かも。

window.addEvent('domready', function(){
var style = ['style-a.css','css/style-b.css','css/style-c.css'];
var src = style.getRandom();
new Asset.css(src, {id: 'base'});
});

アクセス初回だけという制限も出来ると思うが、そもそもCSSをランダムにする必要があるのかは疑問。
どうせやるならボタン切り替えの方がいいと思うが、どっちにしても押し付けがましい気がして個人的にはあまり好きではない。

[mootools]TOPへ戻るリンク

mootoolsで長いページにあると便利なTOPへ戻るリンクを自動挿入するサンプル。
Dreamweaverだとアセットとかテンプレートとかあるのでそっち使ってもいいけど。

※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも
“[mootools]TOPへ戻るリンク” の続きを読む

[mootools]メールリンク自動挿入

直接HTMLにメールアドレスを記載していると、ロボット収集されてスパムの標的にされてしまう。
それを防ぐ為の方法として

  • mailto:を使わない
  • メールアドレスを画像にする
  • メールアドレスの@を別の文字にする
  • Flashテキスト(ボタン)を使う
  • Javascriptで記述

以上がよく使われる手段だろうか。
Javascriptではヘッダに記載してたらまったく意味がないので注意。

Ajaxライブラリmootoolsを使ってメールリンク自動挿入をする方法を考えてみた。

※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも
“[mootools]メールリンク自動挿入” の続きを読む

[mootools]パンくずリンク自動記入

mootoolsでいちいち面倒くさいパンクズリンクを自動挿入するサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

でもこれだとHTMLソースにはリンクやテキストが書き込まれないから、SEO対策という面からしたら微妙。スゴイ楽なんだけど。

“[mootools]パンくずリンク自動記入” の続きを読む

[mootools]validな別窓リンク

mootoolsで別窓表示させる方法。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

日本だと、別サイト=別窓という認識が一般的なので、法人サイトなんかで別のサイトを表示させるリンクが別窓じゃないと「何でこれ別窓じゃないの?」とか言われてしまうこともしばしば。
でも別窓表示の target=”_blank”は、XHTMLだと非推奨要素なのでjavascriptを使う。
普通に書くと色々面倒だからmootoolsというライブラリを使用する。

“[mootools]validな別窓リンク” の続きを読む