アトム-サイト
[ アトム-サイト ] - 管理人さんのページです。
feed-icon RSS2.0   feed-icon Atom
amazonベストセラーランキング
管理人さんのブログ 2012-10-10 14:00:17
amazonベストセラーランキング

『Ama-Rank(アマランク)』というamazonベストセラーランキングサイトを作ってみました。
http://ama-rank.e-onlineservice.com <-コチラで動いてます。
amazonが提供しているカテゴリー情報を見やすくディレクトリ表示にして、それぞれのカテゴリー内のベストセラーをランキングするというサイトです。
見たいカテゴリーを探して、クリックしていくだけの簡単操作にしてみました(結構、キチンと作れた気がする)。
基本はjavascriptですが、PHPやデータベース・XML等色々駆使しているので、Ajaxのサイトですね。
およそ2ヶ月で完成。6地区対応(日本・アメリカ・イギリス・カナダ・ドイツ・フランス)。

このサイト経由->amazonで買い物すると、紹介料が入る仕組みにしてあるんですが…。
GoogleのAdwordsに登録して100人程利用してもらったところ、買い物まで行った人は0。
※Adwordsの広告料分マイナスですよ(結構高いんですよね、Adwordsの広告料って)。
『頑張って作ったのに…』って気分ですよ(何とかならないですかねぇ?)。


画像検索
管理人さんのブログ 2010-04-21 14:02:20
画像検索

『イメージサーチ』という画像検索サイトを作ってみました。
実験的にやっていたのを、段々と現実化させてます。
http://imgsearch.e-onlineservice.com ←ココで動いてます(日々更新中)。

3D空間内を漂う好きな画像(映像は重過ぎだろうな…)をクリックすると移動してくれる感じ(まだまだその先のアイデアはある!)。
とりあえず、自作したブログシステムに記憶されている適当な画像をDB化してみて、Ajaxで通信して表示させてみた。

もう少し軽くならないかなぁ~。

~~~~

http://imgsearch.e-onlineservice.com このページでとりあえず申し込んでおいた『Google Adsense』が承認された。
今現在はただの画像のリンクなのに、承認くれるなんて…。
ちなみに、ココのブログシステムで申し込んだ時にはGoogleの記事が書かれてるからという理由で駄目でした。

Google繋がりで…。
この『イメージサーチ』がどうGoogle検索で扱われるのか調べる為、ウェブマスターツールへ登録。
確認ボタンを押したところ…。
====
確認ステータス: 未確認
2008/03/27 に最終試行: お客様のサイトのドメイン名のルックアップ中にエラーが発生しました。
====
なんだこれ?
調べるとGoogleに問題あるから待てばいいらしいが…。
追記:3日後に確認してみたら、OKでした。
…数日後。
Googleがクロールさえしてくれない。
そりゃ、javascriptでサイト組み立ててるので素の状態では何も情報ないからなぁ~(ソースを表示してみると分かるけどdivが2つあるくらい)。
なので、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の画像検索(動画検索)は8件までだが、Yahoo!は最大50件(1日のアクセス総数制限がある)。
タダでさえ描画が重いのに50件だと検索かけた途端画像だらけで苦しくなるので、Googleと同じ8件に限定しておいた。

ついでに『Amazon Web Services』も組み込みました。
これもYahoo!Web検索サービスと仕組みは同じでした(XMLの項目を合わせるだけで実装終了)。


3D空間
管理人さんのブログ 2010-04-21 14:00:25
3D空間

カッコいい画像検索みたいのを作りたくて、javascriptを使ってやってみた。
http://imgsearch.e-onlineservice.com/test/3dimg.php <- ココで動きます(度々更新してます)。

↓キャプチャした画面はこんな感じ。
やっぱり重いです。
32枚くらいの画像を動かすので精一杯な感じ。
3D空間に画像が浮かんでて「クリック」するとそのページへ飛べる検索みたいなイメージだったのだが、とにかく重過ぎ…。
困ったなぁ~。コレくらいでこの重さではなぁ~。
違う見せ方でないとダメなのかなぁ~。
通信レースゲームみたいなやり方(点を滑らかに結ぶ)でやってみるかな…。
…と、調べてみると、空間計算に時間取られてるのではなく、描画時間がネックだった。数多いだけで重くなる。これは対処しようがないなぁ。

~~~~

どうやら、半透明処理が重い様子。
・最初から半透明を使わなければ4倍くらい早い(感覚的に…)。
・100%をセットしても重くなる(IE)。これで2倍くらいに落ちる。
・最初だけにしても、毎回セットする様にしても、同じ。
・値は100%でも何でも同じだが、個々で別々の値だと激重になる。
どうしようか考えたが、それぞれの画像に半透明値を与えない事にはどうにもならないので、やり様がないかなという感じ。
空間の表現は半透明が最適だし『範囲を狭める』という対策しかないかな。
新しくしました。
http://imgsearch.e-onlineservice.com/test/3dimg.php <- ココで動きますよ。

~~~~

ジンバルロック発生!
真上&真下を向くとカメラベクトルが急激に変化する。
オイラー角制御だからなぁ~。
回避するにはクォータニオンか…。
ゲームライブラリとかDirectXとかOpenGLなら、あらかじめ関数用意されてるけど、javascriptなので自分で理解して組むしかない…。
段々辛くなってきた…。

ココ↓を参考にしたら呆気なく出来た!
http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20040321
これで『アポロ13号』も苦しんだジンバルロックから解放。
さて、次、移動処理(クォータニオンだと移動に癖があるんだっけ?)。

移動も完成。
マウスホィールで前後動きます。
手間取った…。
よくよく考えてみれば、変換行列は求まってるんだからスクリーンの奥の位置をその逆行列と掛け合わせて実際の座標を求めるだけ(クォータニオンをどうにかして座標に変換しようとしていた)。

それにしても、この得体の知れないクォータニオンという数、誰が考えたのかなぁ?と調べてみたら『ハミルトン』という人だった。
こんなの思い付くなんて凄い。調べるとやっぱり神童として知られて図抜けた才能の持ち主だったらしい。
でも、晩年にはアルコール中毒に溺れて、死んだ時の部屋には『酒と肉汁にまみれた二百数十冊のノートで埋め尽くされていた』とか…。
何もかもが凄い数学者だな。
『ジンバルロック』でふと思い出した。中学生の頃PC-6001で円を描画した時にXからYを求めて円を書いたが、実は「角度からXYを求めた方がいいんだなぁ~」と思った同じ感覚だな。

ZERO3でも動くのかやってみた。
マウスのホィールが無いので移動は出来ないけど、動くぞ!
激重だけど…。

~~~~

↓実際にこの3Dを使って公開しているサイトはコチラです。
http://imgsearch.e-onlineservice.com
使ってみてくださいね。


GoogleMaps風
管理人さんのブログ 2010-04-21 13:57:56
GoogleMaps風

ココのブログシステムの改良もネタ(やる事)が無くなってきた。
新しいサイトのイメージとかアイデアとか湧いてきているので、この本(Amazonのリンク)に載っていたサンプルを改良してjavascriptの実験をしてみた。
ここからドンドンと発展させていこうかと…。

応用が利くような具体的なプログラムが載っていたりと、数冊読んだAjaxの本の中では一番良かったですので読んでみてください(Amazonはここをクリック)。

GoogleMaps風のドラッグして動かすプログラムです。
全ウィンドウに対応したりとか、div要素のプライオリティや透過がどうなるのか…とか、下記のURLで色々テスト。
IE/FireFox/Operaに対応(Safariも動くはずですが、持って無いので未確認です。誰かチャンと動くのか教えてください←Safariでも動作確認しました)。
※ついでに、canvasタグを使って3Dの描画もテスト。IEにはcanvasがないので『excanvas.jp』を使ってます。この辺も面白い使い方できそうだけど、もう少し後で…。

ココで動きます(↓)。
http://imgsearch.e-onlineservice.com/test/googlemaps.php

通信してるわけじゃないので「Ajax」ではありません。
ただの普通のjavascriptです。

divタグの使い方把握したので、次は違う見せ方で…。

~~~~

IE8(β版)でテストしてみたところ、『excanvas.jp』部分が描画されない…。
実験サイトでもexcanvasを使ってたりするので、困った( http://jp.link.e-onlineservice.com )。
調べてみると…。
DOCTYPE宣言を取ればいいみたい(ま、いいでしょ)。
…という事で、IE8でもcanvas系表示されました(よかった)。
他には、<meta http-equiv="X-UA-Compatible" content="IE=7">というmetaタグを入れるやり方も有り(ココに書いてあります)。

~~~~

javascriptの隠蔽化という事をやってみた。
クライアント側にダウンロードして実行させる物なので基本的には隠せないのだが、単純には見れない様にしてみた。
ココのコメントスパム対策(記事)した時と少し似てるやり方で対処(…と、プラスして2つの方法で対策)。
実際には隠蔽化したjavascriptがある方法では簡単に見れてしまって「アレレ?」という感じなのだが、まぁこれで精一杯ってとこかな(クライアントが実行するプログラムなので完全に隠すのは絶対無理)。


連想検索
管理人さんのブログ 2010-04-21 13:54:28
連想検索

『連想検索 3D』というサイトを作ってみた。
http://jp.link.e-onlineservice.com
↑ココで動いてます。

使い方は単純。
気になる画像にマウスを合わせて、次々と関連する画像を表示させていくだけです。
調べたいキーワードで検索も出来ます。
マウスホイールとドラッグで視点移動、クリックで詳細画面ですね。

原理は、Amazonの『この商品を買った人はこんな商品も買っています』の情報をSOAPで引っ張ってきて、ゴリゴリと表示。

結構マシンパワーを使いますので、なるべく最新のPCで見た方がいいです(以前作った画像検索サイトよりはマシですが…)。
皆さん、使ってみてくださいね~。
よろしくお願いします。

~~~~

それぞれのリンクに、バネ(ゴム)っぽい動きのプログラム追加。
心地よいプヨヨンという感触が出来ました。

~~~~

「日本」「アメリカ」「イギリス」「フランス」「ドイツ」「カナダ」の6カ国対応してみた。
これで、海外の人も使えるわけだけど、さて、どうやってこのサイトの存在を知らせればいいのやら…。
文章があるサイトではないので、検索エンジン頼みにはできないんだよなぁ(何処か海外の有名サイトが紹介してくれないだろうか…)。

~~~~

なんだか、あまり使われてないようですが…。

見た目を少しだけ修正しました。
これでもうやる事も無くなった感じ。

…という事で、このサイトは完成という事にしよう!


formでのENTERキーと多重送信
管理人さんのブログ 2010-04-21 13:53:10

 とても不思議な現象…。
====
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を使って色々やりつつあります。
他の記事もどうぞ…。


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;
}
}
}


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) {
………
………
(以降、通信処理)

何故だか前の通信が終わらないと、次の通信が始まらない。
「そんな馬鹿な!」と思いつつ調べるが、そういう現象の事はどこにも書かれていない。

色んな事試して、悩む事3日。原因分かりました。
問題は、サーバ側で使ってるセッション。
session_start();
していると、きっちり処理終わらないと次の通信を受け付けない様です。
セッションの処理終わったら
session_write_close();
を呼ぶと、きっちり非同期&多重通信する様になりました。

この1行追加を探し出すのに3日か…。
まぁハマッた時なんて、こんなものだ。


Ajax suggest
管理人さんのブログ 2008-02-09 15:18:26
Ajax suggest

前々からやりたかった、カテゴリ入力を支援してくれるような仕組みを作ろうかとAjaxを使って候補を出してみた。
うまく行っている。
…が、実はjavascriptってブラウザによって挙動の違いが大きいので、色々粗は有ったりする。
まぁ、普通に使う分には問題ないレベルまで持ってこれたので、ヨシとするか(多く使ってるカテゴリ候補をSQL文で上位に持ってくるとか色々手を加えた)。

ちなみにお手本はこの本(↓)
こういう実践的なプログラム載ってる本っていいわ。


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;
}
}
}

このブログの記事を書き込む部分で実際に使ってるプログラムです。


<< 2018年1月
2018年1月18日(木)
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

 最近の書き込み

SMTP
  <2016-04-06 12:03:21>
S.M.A.R.T.
  <2015-05-07 08:03:36>
POP
  <2015-04-21 11:33:37>
Linuxコマンド
  <2015-04-21 11:03:04>
アルバートオデッセイ
  <2014-08-04 23:12:12>
トイレ
  <2014-01-31 08:58:16>
(*)調光スイッチ
  <2013-09-30 10:46:11>
(*)調光スイッチ
  <2013-09-20 01:26:34>
(*)調光スイッチ
  <2013-09-17 12:21:11>
(*)調光スイッチ
  <2013-09-15 20:13:59>


 カテゴリー

おでかけ(83)
サッカー(45)
旅(45)
DIY(43)
食べ物(39)
映画(36)
家(35)
季節(34)
健康(32)
地元(29)
本(29)
家族(29)
モバイル(23)
生物(23)
学校(22)
家電(21)
ドラマ(21)
風景(18)
Web(18)
PCハード(17)
通勤(16)
ゲーム(16)
Winアプリ(15)
ブログ(14)
Linux(13)
飲み物(13)
自転車(13)
ゴルフ(11)
ブラウザ(11)
ネットワーク(10)
javascript(10)
 ・ amazonベストセラーランキング
 ・ 画像検索
 ・ 3D空間
 ・ GoogleMaps風
 ・ 連想検索
 ・ formでのENTERキーと多重送信
 ・ GETリクエストを得る
 ・ Ajax多重通信
 ・ Ajax suggest
 ・ textarea カーソル位置文字列挿入
足技(9)
php(9)
会社(8)
感銘映像(8)
税金(6)
空想(5)
VMware(5)
Ruby(4)
データベース(3)
perl(1)