|
|
|
連想検索
|
|
管理人さんのブログ 2008-10-10 09:54:13
|
『連想検索 3D』というサイトを作ってみた。
http://jp.link.hobby-site.com
↑ココで動いてます。
使い方は単純。
気になる画像にマウスを合わせて、次々と関連する画像を表示させていくだけです。
調べたいキーワードで検索も出来ます。
マウスホイールとドラッグで視点移動、クリックで詳細画面ですね。
原理は、Amazonの『この商品を買った人はこんな商品も買っています』の情報をSOAPで引っ張ってきて、ゴリゴリと表示。
結構マシンパワーを使いますので、なるべく最新のPCで見た方がいいです（以前作った画像検索サイトよりはマシですが…）。
皆さん、使ってみてくださいね～。
よろしくお願いします。
~~~~
それぞれのリンクに、バネ（ゴム）っぽい動きのプログラム追加。
心地よいプヨヨンという感触が出来ました。
~~~~
「日本」「アメリカ」「イギリス」「フランス」「ドイツ」「カナダ」の６カ国対応してみた。
これで、海外の人も使えるわけだけど、さて、どうやってこのサイトの存在を知らせればいいのやら…。
文章があるサイトではないので、検索エンジン頼みにはできないんだよなぁ（何処か海外の有名サイトが紹介してくれないだろうか…）。
~~~~
なんだか、あまり使われてないようですが…。
見た目を少しだけ修正しました。
これでもうやる事も無くなった感じ。
…という事で、このサイトは完成という事にしよう！
コメント(2)
|
|
|
|
GoogleMaps風
|
|
管理人さんのブログ 2008-08-28 08:10:11
|
ココのブログシステムの改良もネタ（やる事）が無くなってきた。
新しいサイトのイメージとかアイデアとか湧いてきているので、この本（Amazonのリンク）に載っていたサンプルを改良してjavascriptの実験をしてみた。
ここからドンドンと発展させていこうかと…。
応用が利くような具体的なプログラムが載っていたりと、数冊読んだAjaxの本の中では一番良かったですので読んでみてください（Amazonはここをクリック）。
GoogleMaps風のドラッグして動かすプログラムです。
全ウィンドウに対応したりとか、div要素のプライオリティや透過がどうなるのか…とか、下記のURLで色々テスト。
IE/FireFox/Operaに対応（Safariも動くはずですが、持って無いので未確認です。誰かチャンと動くのか教えてください←Safariでも動作確認しました）。
※ついでに、canvasタグを使って3Dの描画もテスト。IEにはcanvasがないので『excanvas.jp』を使ってます。この辺も面白い使い方できそうだけど、もう少し後で…。
ココで動きます（↓）。
http://imgsearch.selfip.com/test/googlemaps.php
通信してるわけじゃないので「Ajax」ではありません。
ただの普通のjavascriptです。
divタグの使い方把握したので、次は違う見せ方で…。
~~~~
IE8（β版）でテストしてみたところ、『excanvas.jp』部分が描画されない…。
実験サイトでもexcanvasを使ってたりするので、困った（ http://jp.link.hobby-site.com ）。
調べてみると…。
DOCTYPE宣言を取ればいいみたい（ま、いいでしょ）。
…という事で、IE8でもcanvas系表示されました（よかった）。
他には、<meta http-equiv="X-UA-Compatible" content="IE=7">というmetaタグを入れるやり方も有り（ココに書いてあります）。
~~~~
javascriptの隠蔽化という事をやってみた。
クライアント側にダウンロードして実行させる物なので基本的には隠せないのだが、単純には見れない様にしてみた。
ココのコメントスパム対策（記事）した時と少し似てるやり方で対処（…と、プラスして２つの方法で対策）。
実際には隠蔽化したjavascriptがある方法では簡単に見れてしまって「アレレ？」という感じなのだが、まぁこれで精一杯ってとこかな（クライアントが実行するプログラムなので完全に隠すのは絶対無理）。
コメント(0)
|
|
|
|
GETリクエストを得る
|
|
管理人さんのブログ 2008-05-02 18:02:37
|
|
他のページからのGETリクエストでjavascriptの挙動を変化させたい（ページ内部だけなら静的変数で済むのだが…）。
…あれ？どうするんでしょう？（いつもサーバ側でしか使わなかったし…）
調べました。
window.location.search.substring(1)に入ってくるらしいですね。
これを『＆』と『＝』で分解して配列に収納すればOK。
↓こんな感じです。
var getrequest = new Array(); //GETリクエスト収納
//GETリクエストを配列に収納
function httpRetrieveGETRequest() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for(var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
getrequest[key] = val;
}
}
}
コメント(0)
|
|
|
|
Ajax多重通信
|
|
管理人さんのブログ 2008-04-16 12:43:05
|
|
Ajaxの強みは何と言っても非同期通信。
自由なタイミングで通信開始できるので『多重』にもできる。
ここでハマりました。
こんな感じの関数作って、いつでも呼べる様にしたのだが…。
function httpRequest(get_or_post, target_url, funcitonReference, post_str) {
var httpObj = false;
try {
httpObj = new ActiveXObject("Msxml2.XMLHTTP");
MSXMLHTTP = true;
} catch (e) {
try {
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
MSXMLHTTP = true;
} catch (E) {
httpObj = false;
}
}
if(!httpObj && typeof XMLHttpRequest != 'undefined') {
httpObj = new XMLHttpRequest();
}
if(httpObj) {
………
………
（以降、通信処理）
何故だか前の通信が終わらないと、次の通信が始まらない。
「そんな馬鹿な！」と思いつつ調べるが、そういう現象の事はどこにも書かれていない。
色んな事試して、悩む事３日。原因分かりました。
問題は、サーバ側で使ってるセッション。
session_start();
していると、きっちり処理終わらないと次の通信を受け付けない様です。
セッションの処理終わったら
session_write_close();
を呼ぶと、きっちり非同期＆多重通信する様になりました。
この１行追加を探し出すのに３日か…。
まぁハマッた時なんて、こんなものだ。
コメント(0)
|
|
|
|
画像検索
|
|
管理人さんのブログ 2008-04-09 17:08:24
|
『イメージサーチ』という画像検索サイトを作ってみました。
実験的にやっていたのを、段々と現実化させてます。
http://imgsearch.selfip.com ←ココで動いてます（日々更新中）。
3D空間内を漂う好きな画像（映像は重過ぎだろうな…）をクリックすると移動してくれる感じ（まだまだその先のアイデアはある！）。
とりあえず、自作したブログシステムに記憶されている適当な画像をDB化してみて、Ajaxで通信して表示させてみた。
もう少し軽くならないかなぁ～。
~~~~
http://imgsearch.selfip.com このページでとりあえず申し込んでおいた『Google Adsense』が承認された。
今現在はただの画像のリンクなのに、承認くれるなんて…。
ちなみに、ココのブログシステムで申し込んだ時にはGoogleの記事が書かれてるからという理由で駄目でした。
Google繋がりで…。
この『イメージサーチ』がどうGoogle検索で扱われるのか調べる為、ウェブマスターツールへ登録。
確認ボタンを押したところ…。
＝＝＝＝
確認ステータス: 未確認
2008/03/27 に最終試行: お客様のサイトのドメイン名のルックアップ中にエラーが発生しました。
＝＝＝＝
なんだこれ？
調べるとGoogleに問題あるから待てばいいらしいが…。
追記：３日後に確認してみたら、OKでした。
…数日後。
Googleがクロールさえしてくれない。
そりゃ、javascriptでサイト組み立ててるので素の状態では何も情報ないからなぁ～（ソースを表示してみると分かるけどdivが２つあるくらい）。
なので、metaタグにkeywords,descriptionを埋め込んで置いた。
最近ではどちらも検索には関係しないらしいけど「何も無いよりはマシかな」と思って…。
それと、Ajaxといえば通信はXML…という事でやってみた。
遅いじゃん！一瞬待つ感じがイヤ（Firefox以外は遅くならないが…）。
別にXMLにする意味はないので、速さをとって『responseXML』→『responseText』へ戻しておこう。
~~~~
『Google AJAX Search API』を組み込んだ。
なんか一気に世界と繋がってきたゾ。
根本部分はこんな感じでまだまだアイデアはあったりする。情報同士をグリグリコネコネしたい（…んだけど、実現する為の作る時間ってのが必要なのよねぇ）。
それと「描画を何とか早くしたいなぁ」という事で、ゲームでよくやっている『遠くの物は粗くする』処理を実装。
何故かIEとFirefoxで指定したimgタグのsrc通りに表示してくれない。
先読みでnew Image();してもダメ（画像数が多いから？）。
まぁ、粗い画像を頑張って使ってもそんなに描画速度が改善されるわけではないのが分かったので、元に戻しておいた（作ったプログラムが無駄になったが…）。
~~~~
『Yahoo! Web検索サービス』も組み込みました。
こちらは、GETでURLにパラメータを付けて送信、結果がXMLで返ってくる形。
自分のjavascriptからはYahoo!へリクエストできない（javascriptの仕様）ので、ブラウザ->サーバ->Yahoo->サーバ->ブラウザという処理にして実装完了（どの道、コンテンツの管理はサーバなので、これで良し）。
Googleの画像検索（動画検索）は８件までだが、Yahoo!は最大５０件（１日のアクセス総数制限がある）。
タダでさえ描画が重いのに５０件だと検索かけた途端画像だらけで苦しくなるので、Googleと同じ８件に限定しておいた。
ついでに『Amazon Web Services』も組み込みました。
これもYahoo!Web検索サービスと仕組みは同じでした（XMLの項目を合わせるだけで実装終了）。
コメント(0)
|
|
|
|
3D空間
|
|
管理人さんのブログ 2008-03-27 09:41:41
|
カッコいい画像検索みたいのを作りたくて、javascriptを使ってやってみた。
http://imgsearch.selfip.com/test/3dimg.php <- ココで動きます（度々更新してます）。
↓キャプチャした画面はこんな感じ。
やっぱり重いです。
３２枚くらいの画像を動かすので精一杯な感じ。
3D空間に画像が浮かんでて「クリック」するとそのページへ飛べる検索みたいなイメージだったのだが、とにかく重過ぎ…。
困ったなぁ～。コレくらいでこの重さではなぁ～。
違う見せ方でないとダメなのかなぁ～。
通信レースゲームみたいなやり方（点を滑らかに結ぶ）でやってみるかな…。
…と、調べてみると、空間計算に時間取られてるのではなく、描画時間がネックだった。数多いだけで重くなる。これは対処しようがないなぁ。
~~~~
どうやら、半透明処理が重い様子。
・最初から半透明を使わなければ４倍くらい早い（感覚的に…）。
・１００％をセットしても重くなる（IE）。これで２倍くらいに落ちる。
・最初だけにしても、毎回セットする様にしても、同じ。
・値は１００％でも何でも同じだが、個々で別々の値だと激重になる。
どうしようか考えたが、それぞれの画像に半透明値を与えない事にはどうにもならないので、やり様がないかなという感じ。
空間の表現は半透明が最適だし『範囲を狭める』という対策しかないかな。
新しくしました。
http://imgsearch.selfip.com/test/3dimg.php <- ココで動きますよ。
~~~~
ジンバルロック発生！
真上＆真下を向くとカメラベクトルが急激に変化する。
オイラー角制御だからなぁ～。
回避するにはクォータニオンか…。
ゲームライブラリとかDirectXとかOpenGLなら、あらかじめ関数用意されてるけど、javascriptなので自分で理解して組むしかない…。
段々辛くなってきた…。
ココ↓を参考にしたら呆気なく出来た！
http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20040321
これで『アポロ１３号』も苦しんだジンバルロックから解放。
さて、次、移動処理（クォータニオンだと移動に癖があるんだっけ？）。
移動も完成。
マウスホィールで前後動きます。
手間取った…。
よくよく考えてみれば、変換行列は求まってるんだからスクリーンの奥の位置をその逆行列と掛け合わせて実際の座標を求めるだけ（クォータニオンをどうにかして座標に変換しようとしていた）。
それにしても、この得体の知れないクォータニオンという数、誰が考えたのかなぁ？と調べてみたら『ハミルトン』という人だった。
こんなの思い付くなんて凄い。調べるとやっぱり神童として知られて図抜けた才能の持ち主だったらしい。
でも、晩年にはアルコール中毒に溺れて、死んだ時の部屋には『酒と肉汁にまみれた二百数十冊のノートで埋め尽くされていた』とか…。
何もかもが凄い数学者だな。
『ジンバルロック』でふと思い出した。中学生の頃PC-6001で円を描画した時にXからYを求めて円を書いたが、実は「角度からXYを求めた方がいいんだなぁ～」と思った同じ感覚だな。
ZERO3でも動くのかやってみた。
マウスのホィールが無いので移動は出来ないけど、動くぞ！
激重だけど…。
~~~~
↓実際にこの3Dを使って公開しているサイトはコチラです。
http://imgsearch.selfip.com
使ってみてくださいね。
コメント(0)
|
|
|
|
formでのENTERキーと多重送信
|
|
管理人さんのブログ 2008-02-29 12:58:35
|
|
とても不思議な現象…。
＝＝＝＝
print "<form action="addcomment.html" method="post">n";
print "<input type="text" />n";
print "<input type="button" value="test" onclick="this.disabled=true;this.form.submit();" />n";
print "</form>n";
＝＝＝＝
これで<input type="text"のとこでのエンターキーがsubmitされてしまう。
（しかも、どのブラウザでも同じ挙動）
実はこれ、<input type="text"の次に
<input type="text" />をもう一つ書いてやると起こらない…。
（passwordでもよかった。ボタン系やtextareaではダメ）
今までいくつかの入力があったから気付かなかった。
（一つの入力の場合はformが勝手にsubmitするのかな？）
で、解決方法は、
＝＝＝＝
print "<script LANGUAGE=JavaScript>n";
print "<!--n";
print "var clicked=false;n";
print "// --></script>";
print "<form action="addcomment.html" method="post" onSubmit="return clicked;">n";
print "<input type="text" />n";
print "<input type="reset" />n";
print "<input type="button" value="test" onclick="clicked=true;this.form.submit();" />n";
print "</form>n";
＝＝＝＝
↑「エンターキー無効」とかで調べると、こんなのが検索して出てきた…。
フォームがsubmitしないようにして、ボタンクリックした時だけだから、こうかな？
＝＝＝＝
print "<form action="addcomment.html" method="post" onsubmit="return false;">n";
print "<input type="text" />n";
print "<input type="reset" />n";
print "<input type="button" value="test" onclick="this.disabled=true;this.form.submit();" />n";
print "</form>n";
＝＝＝＝
よし、キチンと動いた。
ポイントは
・formタグに、onsubmit="return false;"を入れて通常のsubmitを無効化
・inputタグのtypeがsubmitでなくてbutton
・this.disabled=true;はクリックされた瞬間無効にして多重送信をさせない
あと、確認ダイアログを入れるのはonclickの所で、
if(window.confirm('よろしい？')){Cal.disabled=true;Cal.form.submit();}
とするだけ。
ちなみにこの方法では、
<input type="button" name="hoge" id="hoge"での『hoge』がPOSTされないので、数種類のボタンを使ってる場合には注意。
~~~~
javascriptを使って色々やりつつあります。
他の記事もどうぞ…。
コメント(0)
|
|
|
|
Ajax suggest
|
|
管理人さんのブログ 2008-02-09 15:18:26
|
前々からやりたかった、カテゴリ入力を支援してくれるような仕組みを作ろうかとAjaxを使って候補を出してみた。
うまく行っている。
…が、実はjavascriptってブラウザによって挙動の違いが大きいので、色々粗は有ったりする。
まぁ、普通に使う分には問題ないレベルまで持ってこれたので、ヨシとするか（多く使ってるカテゴリ候補をSQL文で上位に持ってくるとか色々手を加えた）。
ちなみにお手本はこの本（↓）。
こういう実践的なプログラム載ってる本っていいわ。
コメント(0)
|
|
|
|
textarea カーソル位置文字列挿入
|
|
管理人さんのブログ 2007-04-01 16:13:14
|
|
javascriptで、textareaのカーソル位置に文字列を挿入したい。
で、結局書いた関数がこれ。
operaとfiresoxでは出来たけど、IEでは最後に挿入しかできなかった…（とりあえず今はこれしきの事であんまりゴタゴタさせるのも何なので、IE対応は後回し）。
//文字列を追加
function addTextArea(targetElement, addstr)
{
var objid=document.getElementById(targetElement);
if((objid.value.indexOf(addstr, 0)) == -1)
{
var cursor_pos = objid.selectionStart;
if((cursor_pos == null) || (cursor_pos == 0)) //WILLCOMのoperaは0になる
{
//カーソル位置取れない時は単に後ろに追加（複雑処理必要なので…）
objid.value = objid.value + "\n" + addstr + "\n";
}
else
{
var text_length = objid.value.length;
var before_text = objid.value.substr(0, cursor_pos);
var after_text = objid.value.substr(cursor_pos, text_length);
objid.value = before_text + "\n" + addstr + "\n" + after_text;
}
}
}
このブログの記事を書き込む部分で実際に使ってるプログラムです。
コメント(1)
|
|
|
RSS2.0