2008-03-15

ページ内検索

Javascript

Javascriptでページ内検索機能を。
ブラウザには元々ページ内検索はあるし、サンプルも転がってる、
もっとうまいやり方があるだろうけど、まぁ、なんかに使えるかもしれないので一応メモとして保存しておく。

ページ全体のテキストを検索し、マッチした部分をspanでマークする。

サンプル
※ マークするだけ。見つかった場所にジャンプしたりはしない^^;

2008-03-08

IPで規制している携帯サイトをPCで。

ブラウザ

question:1204801403
IPで規制しているといっても、検索エンジンのロボットは許しているかも、って事。

まずはgoogleのキャッシュからmixiモバイルのトップを見る事が出来ました。
＞googleでmixiモバイルを検索、「キャッシュ」を閲覧。

その後、「The Proxomitron」でUserAgentを
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
としてGooglebotのフリをしてみると、ブラウザで直接アクセスする事ができました。
さすがにログインはできませんでしたが。

携帯サイトクローラーのフリをするとか、色々試してみればIPで規制している携帯サイトにもPCからアクセスできるかも。

2008-03-03

WikipediaAPI

Javascript

WikipediaAPI - ウィキペディア情報をサイトで利用できる
API

ちょいと前から興味があったので
question:1204275464
と、絡めて動作サンプルを組んでみた。
http://c-man.s21.xrea.com/mars/wikitest/
※ 手ぇ抜いたんで日本語検索非対応！
※ IEだと互換モードになっちゃってレイアウト崩れる…Xreaの広告レスの申し込みサボってるからなぁ

WikipediaAPIの開発元の今後の予定にもあるけど、「wiki記述形式による問題」って奴で今のところはちょっと…って感じだけどオモロォ！

2008-02-21

DOM上の改行ノード

javascript

question:1203511355
こちらを見て試しにスクリプトを書いた。（後から気付いたけど回答権なしでしたが(笑)）

で、思ったのがIE以外で取得できる要素間のレンダリングされないテキストノードを除外するのは結構大変・・・
というかメゲタ。
単なる空白だから後で無視できればいいんだろうけど、IEとの差分が埋められないのがちょっと残念。

ちなみに書いたscriptは以下。

// テキストノードのnodeValueを配列で得る
//  引数：Object(element)/String(elementId)
//  返値：Array
function getTextArray(targetElement){
	var result = new Array();
	var anlzTree = function(parent){
		for(var obj=parent.firstChild;obj;obj=obj.nextSibling){
			if(obj.nodeName == '#text') {
				result.push(obj.nodeValue.replace(/\n/g,''));
			} else if(obj.hasChildNodes()){
				anlzTree(obj);
			}
		}
	}

	anlzTree(
		(typeof(targetElement)=='string')?
		document.getElementById(targetElement):
		targetElement
	);
	return result;
}

2007-11-09

連動プルダウン(select)

javascript

選択子を絞りこむ為に多段連動するドロップダウンリストのJavascript。

→ サンプル

ポイントは…
optgroupでグルーピングしておくこと。

使い方

ライブラリ（ConnectedSelect.js）の読み込み

<script type="text/javascript" src="ConnectedSelect.js"></script>

連動するselectにidを付ける。
親にあたるoptionのvalueと
子にあたるoptgroupのlabelを対応させておく。

<select id="SEL1">
	<option value="XXX">XXX</option>
	<option value="YYY">YYY</option>
</select>
<select id="SEL2">
  <optgroup label="XXX">
	<option value="x1">x1</option>
	<option value="x2">x2</option>
  </optgroup>
  <optgroup label="YYY">
	<option value="y1">y1</option>
	<option value="y2">y2</option>
  </optgroup>
</select>
以下略

連動させるselectを初期化する。

<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3']);
</script>

2007-11-02

type=”file”のクリア

javascript

question:1193930047 より

<script type="text/javascript">
function sample(oId){
	var obj = document.getElementById(oId);
	var stO = obj.innerHTML;
	obj.innerHTML = stO;
}
</script>

<span id="XYZ"><input type="file" name="file" size="10"></span>
<input type="button" value="←" onclick="sample('XYZ')">

一見、無意味な書き戻しをしているようだが、
<input type="file"> の場合、valueへのアクセスが禁じられているのでvalue=""と同じ効果が得られる。
DOMで削除した後、生成するというのも考えられるけど、<input>のcreateElementはIEが怪しいのでinnerHTMLを使う事を選んだ。

2007-06-29

画像サムネイル→フルサイズ

javascript

タブブラウザが登場してからwindow.openによるポップアップは使いづらくなってきて、代わりに最近ではwindow.jsとか便利なライブラリも登場している。
まぁ、そこまでじゃなくても、アルバムのようなページで
サムネイルからフルサイズの画像を表示するページの仕組みを作ってみた。
構成なんかはアレンジが効くけどとりあえずのサンプルは

<dt>タイトル</dt>: <dd>サムネイル画像</dd>; <dd>コメント</dd>

こういったリスト構造を解析し、サムネイルのリンクでウィンドウ内にフルサイズの画像（タイトル・コメント付き）を表示。
リストの前後の要素への移動ボタンも付ける。
→ サンプル