OpenStreetMap と YOLP

OpenStreetMap が Google Map の一部有料化ののち
注目を浴びつつあります
チェックインサービスとして有名なFoursquare、
iOS端末用の写真編集アプリiPhoto
などで利用されています
OpenStreetMap がオープンソースというのも
人気の理由かもしれません
最近話題のOpenStreetMapがYOLPで利用可能に!
に具体的な使い方が載っていたので
実際に使って試してみようと思います
また、
OpenStreetMap#01 入門
という動画もありましたので、こちらも参考にしてみました
実際にこのAPIを使いAndroid アプリを作られたかたもいました
Android と OpenStreetMap と HexRinger
に詳細が掲載され、ソースコード
野良アプリともに公開されています
私も Android アプリ作成の勉強していますので
参考にさせていただいています

CSSで重なり順を決める zindex

CSS では、重なり順を zindex という番号で管理しています
デフォルトは0(auto)

番号が大きくなるほど前面に表示されます
同じ番号だと、後ろの要素が前面に表示されます
これを使えば、マウスが要素に重なった時点で
その要素の zindex の値を一番大きくすれば
最前面に表示することができます
これを行うには
var zindex = 1;
というように値を初期化
次に、
.mouseover() の内部で
$(this).css({“zIndex”: ++zindex});
というようにカウントアップすればOKです

jQuery UI でドラッグ処理

ドラッグで移動出きるようにする処理は
jQuery のプラグインである
jQuey UI を使うと便利です
ドラッグ処理をするには
Draggable というモジュールを使います
ちなみに、jQuey UI を使う場合
Javascript のライブラリと レイアウトを行うCSSファイルの両方が必要になります
やり方は自分のサーバーにダウンロードして読み込むか
もしくは
CDNから読み込むようにします
CDNから読み込む場合は
ライブラリなら
<script type=”text/javascript” src=”http://code.jquery.com/
ui/1.8.16/jquery-ui.min.js”
></script>
レイアウトを行うCSSなら
<link rel=”stylesheet” href=”http://code.jquery.com/
ui/1.8.13/themes/base/jquery-ui.css”
>
というように
URLの指定を行います
これで、準備OKです
あとは、要素をドラッグできるように
.draggable()
を追記すればOKです

javascript で検索アルゴリズム

まず、ready() を作成し
検索ボタンがクリックされたら
テキストフィールをの値を引数にして検索を実行
クリアボタンがクリックされたら、div エレメントの内容をクリアするというもの
まず
ready() の中身から
search属性のボタンがクリックされたら
val() でテキストフィールドの値を取り出して
それを引数にして searcyh() を呼び出し
ちなみに。search() は自作関数
続いて、クリアボタンがクリックされたら、
empty() を使って
display 属性のついている内容をクリア
さらに
title 属性のついているテキストもクリアする
コードにすると

$(funcrion(){
//検索を実行
$("#search").click(function(){
search($("keyword").val());
});
//検索結果をクリア
$("#clear").click(funcrion(){
$("#display").empty();
$("#title").text("");
});
});

となります
続いて
検索する search() という関数の自作
function search(keyword){
//ローディング中
$(“#title”).text(“Loading …..”);
$.ajax({
dataType:”jsonp”,
data:{
“term”:keyword,
“country”:”jp”,
“media”:”music”,
“entity”:”album”,
“limit”:”10″
},
url: “http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch”,
success: funcrion(data){
$(“#title”).text(“”);
$.each(data.results,function(i, item){
$(““)
.attr(“href”, item.collectionViewUrl)
.appnd(““)
.mouseover(function(){
$(“#title”).text(item.collectionName);
})
.appendTo(“#display”);
});
}
});
}
$(“#title”).text(“Loading …..”);
は読み込み中の時に表示する文字列です
ネット速度が早いとでないかも…
data:{
“term”:keyword,
“country”:”jp”,
“media”:”music”,
“entity”:”album”,
“limit”:”10″
},

iTunes Store Web API に送信するパラメータの指定です
ちなみに、
term はキーワードですが、これを
keyword という変数にしておくことで
検索キーワードで調べることが可能になっています
このkeyword は
<input type=”text” id=”keyword”>
で得たデータになっています
ちなみに、jsoncallback は指定していないけど
自動的に設定されるので問題無し
url: “http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch”,

Web API のURLとなります
最後の
success: funcrion(data){
$(“#title”).text(“”);
$.each(data.results,function(i, item){
$(“
“)
.attr(“href”, item.collectionViewUrl)
.appnd(““)
.mouseover(function(){
$(“#title”).text(item.collectionName);
})
.appendTo(“#display”);
});
はデータ取得成功のときの処理で
.attr(“href”, item.collectionViewUrl)
はhref 属性を web API へ
.mouseover(function(){
$(“#title”).text(item.collectionName);
はマウスを乗せたときの処理で
これにより 画像にマウスを乗せると
アルバム名が表示されます
ちなみに、iTunes の Web API を使っているため
アルバム画像をクリックすると
iTunes の画面に飛びます
これとアフィリエイトと組み合わせるといろいろとおもしろいことができそうです
iTunes Store Web Service Search API アフィリエイト
と検索すると、ヒントなどがでてきます

iTunes Store Web Service Search API その2

Web API へのリクエストはこのURLに続いて ? を記述
その後に
パラメータ=値 のペアを & で接続して記述して送信します
構文にすると
http://アドレス?パラメータ1=値1&パラメータ2=値2&パラメータ3=値3
というように書きましたが
さすがにこれだけだとわかりにくいので
実際にパラメータをつけてみました
まず、パラメータの解説です
term
キーワード
country
国コード(jp)
media
(音楽なら music)
entity
(種類 音楽アルバムならalbum)
limit
最大データ数
となります
検索結果はJSON形式なので
これをJSONPにするには
callback=関数名を最後に加えます
ちょっと長いので、数行にわけましたが
実際には1行になります
http://ax.phobos.apple.com.edgesuite.net/
WebObjects/MZStoreServices.woa/wa/
wsSearch
?term=autumn
&limit=5
&country=jp
&media=music
&entity=album
&callback=myFunc
このURLをブラウザでアクセスするとJSONPデータがそのまま表示されます

iTunes Store Web Service Search API

マッシュアップサイト作成のため、勉強中です
今回の参考書籍は JavaScript & jQueryレッスンブック―最新jQuery対応

今回、使用するのは iTunes Sore内の製品を検索することのできる
iTunes Store Web Service Search API
です
URLは
http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch
Web API へのリクエストはこのURLに続いて ? を記述
その後に
パラメータ=値 のペアを & で接続して記述して送信します
構文にすると
http://アドレス?パラメータ1=値1&パラメータ2=値2&パラメータ3=値3
というようになります
この API は
WAFL でも紹介されています
http://wafl.net/apis/iTunes+Store+Web+Service+Search+API
iTunes Store Web Service Search API
で検索するといろいろとでてきます
また、 wafl では、マッシュアップサイトも紹介されていますので
スキルアップのためにいろいろと調べるのもおもしろいと思います
例えば、今回の場合ですと
iPhoneアプリ人気ランキング&使い方
では使用しているAPI、サイトURLが掲載されています
機能ごとのAPIでも検索できます

ajax()について

Java Script だけでJSONPのデータを受け取って処理するには
script 属性を動的に生成する必要があるので、面倒ですが
ajax()を使うと簡単に記述できます
ということで、構文の解説です
$.ajax(
{
dataType:’jsonp’,
data:{ }.
url: ‘Web API の URL’,
jsonpCallback: ‘コールバック関数’,
success: function (data){ },
}
)
となります
これだけではわかりにくいので、もう少し解説です
dataType はデータタイプですので
jsonp を指定しています
data: {} には
もし、Web API に渡すデータがあるなら
キーと値のペアで指定します
なければ省略します
url にはそのままの意味です
Web API のURL指定です
jsonpCallback:’コールバック関数’
ですが
これは一般的なWeb API だと
jQuery が Web API とやりとりして関数名をランダム設定しますので
ほとんど不要です
success: function(data){}
ではデータ取得が完了したら行う処理を記述します

コールバック関数について

JSONP について
で外部ファイル sample.js を作成し
これを読み込むことで myFunc() を呼び出し
JSONデータを処理するようにしました
このように、呼び出して処理するような関数を
コールバック関数といいます
まぁそのままのネーミングですが…
この方法はマッシュアップとか WEB API 活用などで
多く使われます
Web API の場合
<script> の src= の後にweb API のURLを指定します
ただし、JSONPを使うにあたって、
関数を知っておく必要があります
プログラミングをおこなうときに、ある程度は関数を知っていないと
プログラムがつくれないように、web API を使う場合にも
関数を知っておく必要があります
次回は、ajax() について書こうと思います

JSONP について

java script だけでは
web APIは使えません
理由は
Java Scriptはクロスドメイン制約で
webベージをロードしたドメイン以外の
サーバとは通信できないから
解決策は
phpで中継プログラムを作成する
もしくは
jsonpを使う
ということになります
jsonp は json with padding のこと
ただし jsonp を使うなら
web APIが jsonp形式でレスポンスを返すことが条件です
以下は
JSONデータから jsonpへの変換です
まずjson形式について
{“name” : “田中一郎”,
“mail”;”ichiro@example.com”}
これを jsonp形式にすると
myFunc(
{“name” : “田中一郎”,
“mail” : “ichiro@example.com”
})
これをみてわかるように
myFunc() の中に
json データを記述しただけです
これを.js拡張子で保存し
<script>で呼び出せば使えるようになります
ちなみに
使うときには
java scriptのプログラムで
function myFunc(data){
処理内容
}
とすればok
要領としては
PHP C java の外部ファイル呼び出しとか
ソースファイル分割と同じ要領です

AmazonEC2 へ iPod touch と IS04 でアクセス

AmazonEC2 でサーバ構築をしていますが
さすがに最初から何度も構築するのはかなり面倒です
イメージを保存して、そこから再度行えばいいのですが
テスト環境を構築するときには
やはり最初から作り直すこともあります
そんなときに、シェルスクリプトで設定できるようにしておき
そしてこれを scp で転送すれば
かなり効率的に作業できます
通常、クライアントとしている ubuntu からなら
公開鍵認証で 端末から簡単にアクセスできるうえ
ファイル転送も scp コマンドで転送できるのですが
電車の中とか、とっさのときにノートパソコンを開ける状況とはかぎりません
念のため、Android 携帯とか、 iPod touch などで
アクセスしたり管理できるようにしておきます
まず、いくつか必要なアプリをいれます
ssh はパスワードではなく、公開鍵認証に対応した
SSHクライアントが必要になります
まず、ipod touch もしくは iPhone なら
Prompt
Android なら
ConnectBot
が使いやすいと思います
次に、ファイル転送ですが、残念ながら
公開鍵認証対応の scp が使えるものは
Android の AndFTP Pro
ぐらいで
ipod touch のほうではみつかりませんでした
SFTP とか対応はあるのですが、公開鍵認証でファイル転送だとまだみつかりません
とりあえず、これでサーバー管理が少しは楽になります