Home > JavaScript

JavaScript Archive

[PR]

2024-05-20 (Mon)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments (Close):
TrackBack (Close):

変換確定前の入力文字を取得する方法（googleサジェストとかみたいに）

2008-09-21 (Sun)
JavaScript

ついに正式リリースされたgoogleサジェスト。
日常的に使うようになるとやっぱ便利ですね。

そこでやはり気になるのは変換確定前の文字を取得して候補を出してくるところ。

なんかAjaxブームの時に調べた気もするけど、改めて調べてみた。

結果、一瞬で見つかった。

なんと、input要素のvalueで普通に取れちゃう。

[サンプル]

[ソース]

html

<p>
<input type="text" id="keyword" size="40" />
<textarea cols="20" rows="10" style="vertical-align: top;" id="suggest"></textarea>
</p>

js

$(function() {
	var last = '';
	setTimeout(function() {
		var keyword = $('#keyword').val();
		if(keyword != last) {
			$('#suggest').val($('#suggest').val() + '\n' + keyword);
			last = keyword;	
		}
		setTimeout(arguments.callee, 100);
	}, 100);
});

JSで簡単にできることなのに、IMEを触ってるのか？とか思わせるのはgoogleのすごいところですね！？
（まぁ僕の無知のせいなんですけど…^^;）

[余談]

labsのsuggestや、サジェスト用のページ（？）から検索すると、
検索結果ページにもsuggestionが出るのに、
Google本家から検索すると検索結果には出ない。

&complete=1をつければ出るようになるっぽいけど…。
なんでこういう方針にしてるんだろ？

あ、あと、全然関係なんですけど、Webの知識がない人にとっては、
オートコンプリートと見分けがつかず、そんなにインパクトはないのかもしれませんね。
実際、僕の周りの人達は全然気にしてなかったです…。

以上、今さらでした。

追記（2008/09/23 08:55）

clearボタン追加。

document.getElementById('suggest').value = '';

Comments: 0
TrackBack:

IEでinput要素をappendChildする際の注意

2008-08-19 (Tue)
JavaScript

皆さんご存知でしょうが…。

consoletを作ってるときに遭遇したので一応メモ。
（そういえば、どっかで読んだ気がするなぁ）

IEでは、「createElementしたinput要素」に、「type属性を指定しない」で、「appendChildする」とエラーになります。

文章にするとわかりづらいですねぇ^^;

つまり、

/**
 * ダメ
 */
var input=document.createElement('input');
document.body.appendChild(input); // 怒られる！
input.type='button';
input.value='test';

/**
 * よい
 */
var input=document.createElement('input');
input.type='button';
document.body.appendChild(input); // だいじょぶ！
input.value='test';

ということです。

ブックマークレット作ってる時なんかは特に、
コードを短くしようと思って、

/**
 * これもダメ
 */
var input=document.body.appendChild(document.createElement('input')); // 怒られる！
input.type='button';
input.value='test';

とかやっちゃいがちなので注意！

以上でーす。
結局consoletで3エントリ稼いじゃいました(>_<)

Comments: 0
TrackBack:

ブログのトップページにWassrの発言を表示するようにした（Wassrバッジ？）

2008-07-06 (Sun)
JavaScript

っというわけで、TwitterからWassrに乗り換えてみました。

まぁTwitter自体全然使ってないですけどねー。
（そもそもSNSっていうかコミュニケーションが苦手っていう…）

で、せっかくAPIも公開されてることなので、今までTwitterの発言を表示してた部分にWassrの発言を表示するようにしました。

興味のある人はどうぞー。

[html, css]

今回は（面倒なので）html、cssに変更を加えないのがテーマ（？）だったため、

<div id="twitter_div"><dl><dt><a href="http://wassr.jp/user/tnantoka/" id="twitter-link"><img src="http://blog.cnobi.jp/v1/blog/user/09dc80a1f21051be5f72fa57333824ae/1215330082" alt="Wassr: Do you follow me?" /></a></dt><dd><ul id="twitter_update_list"></ul></dd></dl></div>

と、ほぼ前のままでOKです。
（画像とリンクをWassrにしただけ。cssは変更なし）

[js]

WassrはJSONPに対応してるので、

<script type="text/javascript" stc="http://api.wassr.jp/statuses/show.json?id=tnantoka&amp;callback=wassrCallback"></script>

とかやれば、

wassrCallback([{
	"link":"http://wassr.jp/user/tnantoka/statuses/e6wr6C1Ebz",
	"epoch":1215324666,
	"user_login_id":"tnantoka",
	"areacode":null,
	"rid":"e6wr6C1Ebz",
	"photo_url":null,
	"reply_message":null,
	"photo_thumbnail_url":null,
	"reply_user_nick":null,
	"html":"テスト",
	"reply_status_url":null,
	"text":"テスト",
	"user":{"screen_name":"t*"},
	"slurl":null,
	"areaname":null
}]);

ってな感じに、発言のオブジェクトをコールバック関数に渡して呼び出してくれます。

あとはTwitterのjs等を参考に、

function wassrCallback(wassrs) {
	document.getElementById('twitter_update_list').innerHTML = '<li><span>'+wassrs[0].text+'</span> <a style="font-size:85%" href="'+wassrs[0].link+'">'+parseEpoch(wassrs[0].epoch)+'</a></li>' + '<li style="text-align: right; margin-top: 5px; font-size: 85%;"><a href="http://twitter.com/tnantoka">Twitter\u306F\u3053\u3061\u3089</a></li>';
}

function parseEpoch(epoch) {
	var pass = new Date / 1000 - epoch;
	var s;
	if (pass < 60) {
		s = 'less than a minute ago';
	} else if (pass < (60 * 2)) {
		s = 'about a minute ago';
	} else if (pass < (60 * 60)) {
		s = 'about ' + parseInt(pass / 60) + ' minutes ago';
	} else if (pass < (120 * 60)) {
		s = 'about an hour ago';
	} else if (pass < (24 * 60 * 60)) {
		s = 'about ' + parseInt(pass / (60 * 60)) + ' hours ago';
	} else if (pass < (48 * 60 * 60)) {
		s = '1 day ago';
	} else {
		s = parseInt(pass / (24 * 60 * 60)) + ' days ago';
	}
	return s;
}

みたいな関数を用意しておけばいいだけです。
（画像、js、htmlをTwitterのバッジからそのまま流用しちゃってるので、一応Twitterへのリンクを入れておきました^^）

[まとめ]

以上でーす。
テストとか全然してないので不具合とかあったらごめんなさい(>_<)

Comments: 0
TrackBack:

最高のローディングアイコン！？Fastladderの棒人間だけを抜き出してみた

2008-06-25 (Wed)
JavaScript

Fastladder(or livedoor Reader）を使ってる人にはおなじみの棒人間ローダ。
かわいいですよねー。

で、せっかくオープンソースなんだから、ということでやってみました。

これです↓

[やったこと]

ダウンロード

まずは、Fastladderのソースを取ってきます。

Subversion(svn)が必要です。（※）
Trac Lightningなら、pythonまでついて来ていいですよ。
（これでハッカーの仲間入り！？）

svnさえ入れちゃえばあとは簡単です。

コマンドプロンプトを起動して、保存したいディレクトリに移動。

cd ディレクトリパス

ですね。（知ってるって？いや、一応ね…）

そして、fastladder - Google Codeにしたがって、

svn checkout http://fastladder.googlecode.com/svn/trunk/ fastladder-read-only

と入力&Enterすれば、自動的にダウンロード（チェックアウト）されます。
（-read-onlyは書かなくてもいいっぽいですね）

※ と思ってたらFastladder Open Source / Free DownloadからUnix版をダウンロードすればいいだけでした^^;
　　まぁ最新のソースはsvnがないとダメってことで（笑）

ソースを見る

ソースは無事手に入れましたが、どうやって棒人間を操ってるのかイマイチわかりません…ということにします。
ここで役に立つのがWeb Developer。
「枠表示」→「マウスカーソルの個所を枠で囲う」とやれば、棒人間の情報を教えてくれます。

こんな風に。

というわけで、棒人間はloadiconというid(#)を持つらしいことがわかりました。

ここまでくれば楽勝です。

Devas等で、*.jsファイル内の"loadicon"を検索すれば、わんさかヒットします。

とまぁ、なんだかんだで見つけ出して、ごにょごにょしたソースがこちら。

/**
 * original: http://fastladder.org/
 *
 * fastladder/public/js/reader_main.js
 * 3272～
 */

var LoadEffect = {
//	ICON_PATH : "/img/icon/",
	ICON_PATH : "http://file.blog.bornneet.com/",
	LOADICON_NUM : 1,
	RESTICON_NUM : 3,
	Start : function(){
		var L = LoadEffect;
		var path = L.ICON_PATH;
		if(L.LOADICON_NUM > 1){
//			var n = 1 + Math.floor(Math.rand(L.LOADICON_NUM));
			var n = 1 + Math.floor(Math.random() * L.LOADICON_NUM);
			path += "loading" + n + ".gif";
		} else {
			path += "loading.gif";
		}
//		$("loadicon").src = path;
		document.getElementById("loadicon").src = path;
//		setStyle("loading",{visibility:"visible"})
//		document.getElementById("loadicon").style.visibility = 'Visible';
	},
	Stop : function(){
		var L = LoadEffect;
		var path = L.ICON_PATH;
		if(L.RESTICON_NUM > 1){
//			var n = 1 + Math.floor(Math.rand(L.RESTICON_NUM));
			var n = 1 + Math.floor(Math.random() * L.RESTICON_NUM);
			path += "rest" + n + ".gif";
		} else {
			path += "rest.gif";
		}
//		$("loadicon").src = path;
		document.getElementById("loadicon").src = path;
	}
};

fastladder/public/js/reader_main.jsの3272行目～ほぼそのままです。
(fl_aio.jsにもありますが、そっちは全ソースをまとめてあるだけのファイルっぽいのでreader_main.jsから引用してます)

Fastladder内の関数に依存する部分は変更しました。
（$、setStyle、Math.randの3つです。setStyle部分は特に（僕は）いらなかったので変更後のソースもコメントアウトしてます）

あと、pathは自分が画像ファイルを置くパスに変更する必要があります。

画像を探す

最後に、画像をどうにかすれば完了です。

Firefoxなら画像上で右クリックすると、「画像の表示」とか「URLのコピー」があるので、URLを知ることができます。
その方法でバテている棒人間（上の画面キャプチャで表示されています）を調べると、「rest1.gif」という画像名でした。

そして、fastladderフォルダ内を"rest1.gif"で検索すると、public/img/iconに格納されていることがわかりました。

さらに、ソースと見比べつつ画像を物色した結果、どうやら、

の4種類が使われているようです。

これらを、pathに設定したところに置けば無事動くはずです。

お疲れ様でした！

[ブログに使う]

…これだけで終わるとホントに「抜き出し」ただけなのでなんかやってみましょう。

ということで、このブログに張ってみました。
（右上のキーボードアイコンの左横です。わかりにくい説明…）

これまでの手順よりさらに簡単ですので、皆さんのブログにもどうですか？
やり方は以下のとおりです。

予め、上の4種類の画像をアップロードしておきます。

次に、

<img id="loadicon" src="http://blog.cnobi.jp/v1/blog/user/09dc80a1f21051be5f72fa57333824ae/1214387280" />

とかいうimgタグをiconを表示したいところに書きます。

そして、下のような手抜きスクリプト

var stopLoadIcon = function(id) {
	var path = 'http://file.blog.bornneet.com/';
	var RESTICON_NUM = 3
	var n = Math.ceil(Math.random() * RESTICON_NUM);
	var src = path + "rest" + n + ".gif";
	document.getElementById(id).src = src;
}

をどこかで読み込んで or 書いておきます。

さらに、ページで実行されるjsの最後っぽいところで、

stopLoadIcon('loadicon');

と呼び出せばOKです。

これでローディング中の読者のイライラが少しは軽減されるかもしれません。
いつも重くてすいませんm(_ _)m

[心配ごと]

いくらオープンソースとはいえ、画像のみ（ほぼそう言えるでしょう）を抽出して使っちゃっていいものか。
まぁ、OSSライセンスの中でも特に緩い部類に入る（と僕は理解している）MITだし、大丈夫！
…なはず(>_<)

[忘れたこと]

あっ！吹き出し系の処理も一緒に抜き出そうと思って忘れてた…。
えーと…いつかやるかもです。

Comments: 0
TrackBack:

クロージャに再挑戦してみませんか？

2008-06-13 (Fri)
JavaScript

っぽいタイトルにしてみました。
釣りと言われたら否定できませんm(_ _)m

では、本題。

昨日の記事を書くために改めてクロージャについて調べてみたんですが、
昨年後半からかなりの数の記事が書かれてることに今さら気づきました。

2007～8年はクロージャ入門記事が豊作だったようですね。
何かありましたっけ？
やっぱり、JavaScript 第5版の出版の影響で理解できた人が増えたりしてるんでしょうか。

何はともあれ、僕が悩みまくって「これはひどい」な記事を書いてた頃より、さらに学びやすくなってると思います。
（この時はなぜか今回あげた記事を全て見逃していました…）

ってことで一度断念した人も、

Cでいうならポインタ！
ギターでいうならF!!
（初心者にとって大きな壁になるという意味でね）

なJavaScriptのクロージャに再挑戦してみませんか。

以下ただのまとめです。
（2007年以降の記事に絞ってみました…つもりです、古いのまざってたらごめんなさい）

Core JavaScript 1.5 Guide:Working with Closures - MDC
基本的にこれで十分だと思います。
さすが（唯一といってもいい）まともなJSリファレンスを提供してくれてるMDC。

こんなの読んでもわからない？
そうですか、そうですよね。

ならお次は、@ITなんてどうですか？
第3回　変数の宣言とスコープ－＠IT

まだまだあります。
nothing but ordinary - JavaScript はじめてのクロージャ入門
クロージャを利用しながらひとつのプログラムを作っていく感じがステキです。

JavaScriptでのクロージャの使い方
ループで犯すミスをわかりやすく解説。

JavaScript クロージャとレキシカルスコープ - Backstage of theater.js
説明が丁寧です。

さっきから何か小難しいんですけど!!
すいません…。

ならこの辺はどうですか？
短いし読みやすいですよ。

あるＳＥのつぶやき: JavaScriptのクロージャー
 Haida's weblog: クロージャ

なんとなくわかってきた気もするけど…。
やっぱ動きがないとイメージ湧かないですよね。
僕もそうです。

この辺は実行できるサンプルがありますよ。
func09 ≫ JavaScript、クロージャをおさらいしてみる
 [ヅラド] [JavaScript]クロージャとイベントのサンプル 3種類 5パターン
 Bugle Diary: [javascript]クロージャについて

動画もあります。
Web/JavaScript 講習会 part.7 (this, スコープと環境、クロージャ）

スライドも。
JavaScript勉強会

っていうか文系だからわかんないって!?
奇遇ですね、僕もド文型です。

では、読み物風のこちらをどうぞ。
Life is beautiful: Javascriptの黒魔術＝クロージャを宮沢賢治風に説明してみる

クイズもあります。
Life is beautiful: Javascriptクイズ（中級者向け）：無名関数と実行効率の話
 Life is beautiful: Javascript、クロージャを使ったプライベート関数の隠蔽について

以上、ふざけ半分でまとめてみました。

ここにあげたのはごく一部で、まだまだあります。
軽く検索しただけでも30件以上はありました。

JavaScript クロージャ - Google 検索
 Yahoo!検索 - JavaScript クロージャ

で探してみてください。

かなりの数の記事がひしめき合ってますので、フィーリングにあう記事が見つかるかもしれませんよ。