[google] Google AJAX Search API でサイト内検索結果をページ内に表示する

Googleのカスタム検索エンジンの検索ボックスと検索結果をページ内に埋め込む方法(オーバーレイではない)について。
Mapと同じくSearchもAPIで色々することが出来ます。

GoogleSearchAPI

サイト内検索の検索ボックスをサイトに埋め込むのは、登録した時に作成されるコードを埋め込むだけなので簡単ですが
APIを利用する場合はJavascriptとAPIの仕様が分かってないとややこしいので、分からない人向けに説明を書いてみた。
この記事では、サイト内検索の検索ボックスと検索結果をAPIを利用して既存ページに埋め込む初歩についてまとめてます。
更に詳しいカスタマイズ方法 についてはDeveloper’s Guideなどを参照してください。

続きを読む

[mootools] ロールオーバープラグイン

ロールオーバースクリプト(画像名のOn/Offで判別)マウスオーバーでリンク画像の透明度とか変更を足してクラスにしてみた。

指定エリア以下のaタグ拾ってマウスイベントでロールオーバーする。
画像名に指定した文字列があれば置換、なければ透過処理。
ロールオーバーさせない指定はclass名の有無(imgタグ内)で判断する。

続きを読む

[IE] Internet Explorer 8 ドキュメント互換性モードの指定について

IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。
でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、
IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに
新しくMETA要素の X-UA-Compatible により操作が可能に。

簡単にまとめると

IE8だと表示が崩れる…IE7なら崩れないのに…orz

METAタグでIE7モードで表示するよう指示

IE8がその指示に従ってIE7っぽくレンダリング

ウマー(゚д゚)

ということらしい。

その場合のMETAタグは次のようになる(Emulate IE7 互換性モードを指定)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

このメタタグはヘッダーの一番上(titleや他のmetaよりも上)に置かなければならない。

その他のcontent 属性値

  • IE=EmulateIE5 → Internet Explorer 5 の動作を模倣
  • IE=edge → 使用できる最高のモードを使用
  • IE=EmulateIE8も使用可能
<meta http-equiv="X-UA-Compatible" content="IE=4"/>   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"/> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"/>   <!-- IE5 mode --> 

各モードをセミコロンで区切って複数のドキュメント モードを指定することも可能らしい。
特定の互換性モードを除外する使い方も可能だが、推奨はされていない。

例:IE7 モードを除外

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

一見便利そうだけど…用途がわからん……

※公式ドキュメントはこちら

でもやっぱりメインで確認するのはIE6なんだろうな、っていう。

続きを読む

[javascript] URIからドメインだけ正規表現で取得する

正規表現によるマッチング。location.hrefにmach()使ってドメイン部分を取り出す。

  • http://www.google.co.jp/ → www.google.co.jp
  • http://example.com/ → example.com
  • file:///D:/→ D
  • http://localhost/hoge/index.html → localhost
  • http://127.0.0.1:8000/ → 127.0.0.1 

※表示の都合上、全角の「?」が混じっているので注意

var str = "http://www.google.co.jp/";
var domain = str.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):?[0-9]*?\//i)[1];
alert(domain);

変数domainは配列になり、domain[0]にはプロトコルからドメイン後ろのスラッシュまで、
domain[1]にはドメイン部分のみが格納されます。
変数strをlocation.hrefにすると、表示しているページのURIがマッチング対象になる。

続きを読む

[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone

必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方

適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。

やってる事は大体同じ

  1. 透過する画像を取得
  2. 画像の属性を取得(width,height,alt,src,class,id等)
  3. 新しい要素を作成(このクラスではspan)
  4. 作成した要素に画像の属性を当てる
  5. Style属性で作った要素をスタイリング(AlphaImageLoaderはここ)
  6. img要素を削除またはdisplay:noneにして作成した要素を挿入

続きを読む

[mootools&PHP] Ajax.Request でファイルの読み書きをする

mootoolsのRequestクラスを使うとXMLHttpRequestが簡単に行えます。
jQueryやprototype.jsもやり方は大体同じです。(クラスの名前からして似てる)
公式サイトのDemoにAjax.Requestのサンプルがいくつかありますが、
送受信だけでは面白くないので、簡単にファイルの読み書きをして掲示板っぽいものを作ってみようー。


直接見る »

▼用意するもの(カッコ内は説明とzipで使ってるサンプルの名前)

  • HTMLファイル(index.html)
    この記事にコピペ用ソースがあります
  • PHPファイル(sample.php)
    <?php ?>が書いてあればいい
  • テキストファイル(data.txt)
    空ファイル。拡張子はなんでもいい
  • mootools ver1.2のコアファイル(mootools.js)
    圧縮したのでもなんでもいい。moreはいらない

※文字コードは全てUTF-8にすること。

Step-by-Step形式で書いています。(全10ステップで2ページ分割)

続きを読む

[mootools]カイジっぽく「ざわ…ざわ…」を表示する…

何となく思いつきだけで作ってみたっ…!
このプラグインは、ページに「ざわ…」を延々表示し続ける…たったそれだけの機能しかない…!


直接見る »

おっと……忘れるところだった………
一度しか言わない…… このプラグインはmootools ver1.2 が必要だ…
jQueryとprototype.jsでの作成は検討していない…が、要望があったら作る…かもしれないっ…

続きを読む