I’m with ＜(=｀ω´=)＞

いま見ているページを認証不要でTwitterに投稿するブックマークレット
http://www.msng.info/archives/2008/09/twitter_bookmarklet.php

こちらのサイトのスクリプトを拝借し、カスタマイズしてみた。
自分的には、はてぶのブックマークレットに慣れているので、別Windowで表示するようにしてみた。ついでに先頭に” | “がデフォルトで入るよう追加。
人によって色々スタイルがあると思いますので気に入った人は使っていただければと。

このページをtwitterに
右クリック→「このリンクをブックマーク」、もしくはブックマークエリアにドラッグ＆ドロップで追加できます。

ps,
Firefox3でしか確認していません。
あとポップアップブロックが出るブラウザだと使えないかも、です。

Wilq32.RotateImageというjQueryのプラグインを使うと、簡単に画像の傾斜・回転が可能。

以下、使い方の覚え書き。

用意するもの
・jQuery(今回使用したのはver.1.3.2)
・jQueryRotate.js(ここからダウンロード)

ファイルを読み込む。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>

body上部に以下の記述を追加。

<script type="text/javascript">
$(function() {
	$(element).rotate(45);
});
</script>

これだけだとIEでうまく動作しないので、以下の記述をbody下部に追加。

<!-- Include the VML behavior -->
<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>
<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

ここまでで動作が確認できればＯＫ。

パラメーターを設定する場合は、以下のように記述。

$(element).rotate({
	angle:45, //回転角度の設定
	animateAngle:45, //アニメーションを用いた回転角度の設定
	maxAngle:85, //右回りの最大回転角度
	minAngle:-35, //左回りの最大回転角度
	callback:callbackFunc, //コールバック関数
	bind:[ //イベントハンドラの設定
		{'mouseover':function(){ //マウスオーバー時の処理
			mouseoverFunc();
		}},{'mouseout':function(){ //マウスアウト時の処理
			mouseOutFunc();
		}}
	]
});

ここで実際に画像を描画しているのはjavascript自身ではなく、<canvas>やVMLであり、jQueryRotate.jsを使うと、このへんのめんどうな処理をラップし、ヨロシクやってくれる、ということになります。

作ったデモはここに。

Bing API使ってみました。Bing Developer CenterでAppIDを作成する必要あり。
Documentはこのへんを参考に。
jQueryはjquery-1.3.2.min.jsを使用。

HTML

<form id="form">
	<input type="text" value="" id="inputText" />
	<button type="submit" id="button">Search</button>
</form>
<ul id="output"></ul>

$.ajax使うとWeb.Offseとか、ドットの部分でコケるので、とりあえず連結。
Javascript(jQuery)

$AppId = ""; // Please set your AppID

function Search($value){
	$.ajax({
		url : 'http://api.search.live.net/json.aspx?Web.Count=20&Web.Offse=0&Web.Options=DisableHostCollapsing+DisableQueryAlterations',
		data : {
			AppId : $AppId,
			Query : $value,
			Sources : 'Web',
			Version : '2.0',
			Market : 'en-us',
			Adult : 'Moderate',
			Options : 'EnableHighlighting',
			JsonType : 'callback',
			JsonCallback : 'SearchCompleted'
		},
		dataType : 'jsonp'
	});
}

function SearchCompleted($response){
	$errors = $response.SearchResponse.Errors;
	if($errors != null){
		DisplayErrors($errors);
	}else{
		DisplayResults($response);
	}
}

function DisplayErrors(errors){
	var output = document.getElementById("output");
	var errorsHeader = document.createElement("h4");
	var errorsList = document.createElement("ul");
	output.appendChild(errorsHeader);
	output.appendChild(errorsList);

	// Iterate over the list of errors and display error details.
	errorsHeader.innerHTML = "Errors:";
	var errorsListItem = null;
	for (var i = 0; i < errors.length; ++i){
		errorsListItem = document.createElement("li");
		errorsList.appendChild(errorsListItem);
		errorsListItem.innerHTML = "";
		for (var errorDetail in errors[i]){
			errorsListItem.innerHTML += errorDetail + ": " + errors[i][errorDetail] + "<br />";
		}
		errorsListItem.innerHTML += "<br />";
	}
}

function DisplayResults($response){
	$results = $response.SearchResponse.Web.Results;
	$("#output").empty();

	if ($response.SearchResponse.Web.Total > 0) {
		jQuery.each($results, function(i){
			$Url = $results[i].Url;
			$Title = $results[i].Title;
			$Description = $results[i].Description;
			$DateTime = $results[i].DateTime;

			$HTML = '<li><a href="' + $Url + '" target="_blank">' + $Title + '</a><br />' + $Description + '<br />' + $Url + '</li>';
			$HTML = ReplaceHighlightingCharacters($HTML, "<strong>", "</strong>");

			$("#output").append($HTML);
		});
	}else{
			$HTML = '<li>Did not match any pages.</li>';
			$("#output").append($HTML);
	}

}

function ReplaceHighlightingCharacters(text, beginStr, endStr){
	$regexBegin = new RegExp("\uE000", "g");
	$regexEnd = new RegExp("\uE001", "g");
	return text.replace($regexBegin, beginStr).replace($regexEnd, endStr);
}

$(function() {
	$("#form").submit(function(){
		$value = $("#inputText").attr("value");
		Search($value);
		return false;
	});
});

いい加減なデモがここにあります。
Bingの場合、動画Verを作ったほうが面白そうですね・・・

すんなりできると考えていた方法が、なぜかFirefox以外でうまく動かず、1時間くらいハマってしまったのでメモ。

やりたかったことは(1)チェックボックスをトリガーにし、ターゲットのinput type=”file”のvalueを削除 → (2)disabledでフタをかぶせる → (3)チェックボックスのチェックを外したらinput type=”file”を再度アクティブに。（※valueは空）

要は、画像管理ツールで上書きと削除のアクションが同時にできないから、javascriptでわかりやすく制御したかったのです。（そもそもvalueを削除する必要があるのかっていう気はしないでもない）

そのvalueを空にする部分がうまくできなかったんだけど、色々調べて解決。うまいこと考える人がいるもんだなー。

簡単に言うと、valueを書き換えるのではなくinnerHTML使って、「inputごと格納 → 吐き出し」というやりかた。これだとvalueが空になって戻ってくるし、IE、Opera、Safariでも問題なく動いた。

通常のvalue操作ならこんなイケてない処理はしなくていいはずなんだけど、input type=”file”は例外のようで・・・セキュリティー的な問題かな？

HTML

<p class="photoBox">
	<img src="hoge.jpg" width="100" />
</p>
<label class="deleteFlag">
	<input type="checkbox" value="foo" class="checkBox" />この写真を削除する
</label>
<p class="fileBox">
	<input type="file" value="" class="fileFlag" />
</p>

JavaScript（jquery）

$(document).ready(function(){

	$(".deleteFlag").click(function(){
		$fileBox = $(".fileBox", $(this).parent());
		$flag = $(".checkBox", $(this))[0].checked;
		if($flag){
			$fileBox.html($fileBox.html());
			$(".fileFlag", $(this).parent()).attr({disabled:"disabled"});
		}else{
			$(".fileFlag", $(this).parent()).removeAttr("disabled");
		}
	});

});

jqueryはもう少しうまく書けそうな気がする。（ドキュメントちゃんと読んでないし）