h19e

今日は、忘れずにカメラを持って行ってきました。

かき氷のお店　埜庵。




チョー寒い日だったのですが、お客さんがたくさん。

ただ、専用の待合室があって中は暖かいので、寒い中外で待つことはないのでご心配なくｗ

昔はGWでも天気が悪いと人がいなかったねーとか店主と思い出話をしつつ店内へ。

注文したのは、

かまくら



そして、抹茶金時



なんかやっぱりいつもこの2つを頼んでしまいます。

他にも今はこんなメニューやってます。



しょうが、白酒なんていう変わった氷も。

さすが、冬でも人気のかき氷専門店。普通は絶対にお目にかかれませんね。


ちなみに店内はこんな感じです。



やっぱ、かき氷は夏でしょっていう方、ぜひ冬に食べてみてください。

冬も結構いけるんですよ。

GoogleMapsAPI を使って位置情報系のサービスを作ってる人って結構いると思うのですが、そのサービスにYOLPのローカルサーチを使用して付加情報を追加したいって時に、そのままGoogleMapsAPIにYOLPのローカルサーチの情報を追加するパターンと、地図自体をYOLPに変えてしまうという二通りの方法が考えられると思います。


今回はそんなときの参考に、二通りのパターンでWEBサービスを実装してみました。
以下が、そのサービスです。

赤ちゃんとおでかけ

このサービスを簡単に説明すると、赤ちゃんとおでかけするときに必要な、授乳室情報とおむつ替えできるスペースの情報を投稿、検索できるサービスになります。

そこに、YOLPを使用して、スマイリーマム の子供といけるレストランの情報を付加情報としてサービスに追加しました。

YOLPのローカルサーチの使用方法についての詳細は、下記エントリーを参考にしてください。

YOLP(Yahoo! Open Local Platform) で周辺検索

YOLP(Yahoo! Open Local Platform) 自作の検索APIの情報も地図にプロット

このサービスは、パソコン版とスマートフォン版を作っていて、パソコン版の方は、GoogleMapsAPIを使用していて、スマートフォン版はYOLPを使用して実装しています。
同一URLで、UA（ユーザエージェント）によって出しわけをしているのですが、ページの下の方に、パソコン版とスマートフォン版のリンクを用意してあるのでどちらも確認できると思います。
まあ表示はおかしくなっちゃいますが。。。


YOLPは、自分のサービスで使用する場合、アプリケーションIDをとる必要があります。アプリケーションIDの取得は、特に審査とかもなくYahooのアカウントを持っていればすぐに取得できるのですが、GoogleMapsAPIの場合はこのアプリケーションIDが必要なく、いきなりサービスに組み込むことができるため、とりあえず作ってみようかなという時の敷居が低いのもあり、そのまま使い続けることが多いのではないかと思います。

あとは、やはり使っている人も多い分、使い方を説明しているブログも多いですね。ただ、GoogleMapsAPIは現在V3なんですが、V2の解説が結構多かったり、V2では使えた機能がV3ではなかったりするのがちょっと困りますね。。。

やはりYOLPのローカルサーチを使用する場合、YOLPで統一したほうが良いと思うのですが、すでにGoogleMapsAPIで実装済みだとちょっと面倒になってしまいますよね。

そこで、二つの地図サービスを比較しながらGoogleMapsAPIからYOLPに切り替えるにあたってポイントとなる部分を解説していこうと思います。


----------------------------------------------------------------------------------------------------

では、切り替えのための機能ごとのソースコードを記述していきます。
対象の部分だけを記述してあるので、全体のソースは実際のサイトで確認してください。

-  赤ちゃんとおでかけ


地図を実際に表示する個所のHTML

GoogleMapsAPI

<div id="map_canvas" style="height:480px;width:100%;"></div>

YOLP

<div id="map" style="width:100%;height:240px;"></div>

id とか、高さの指定は変えてますが一緒ですね。

-------------------------------------------------------------------------------------

緯度経度の変換

GoogleMapsAPI

var latlng = new google.maps.LatLng(lat,lon);

YOLP

var latlng = new Y.LatLng(lat,lon);

お互い各機能のの指定方法が違いますが、使い方は一緒ですね。
YOLP は、Y.
GoogleMapsAPI　は google.maps で共通です。

-------------------------------------------------------------------------------------

地図の表示

GoogleMapsAPI

var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google,maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

YOLP

var ymap = new Y.Map("map");

ymap.drawMap(latlng,16,Y.LayerSetId.NORMAL);


GoogleMapsAPIは、地図オブジェクトを生成するときにオプション情報のセットと描画をしていて、YOLPは地図オブジェクトを生成して、オプション情報をセットして描画っていう感じの記述の違いはありますが、基本的には同じですね。

地図を表示する個所のidの指定。
中心点の指定。
ズームサイズの指定。
地図のタイプ指定。
って感じのことをやってますね。

ズームレベルに関しては微妙な違いがあるので、詳しくはこちらで確認してください。

GoogleMapのズームレベル

YOLPのズームレベル

----------------------------------------------------------------------------------------------

地図へのコントロールの追加

GoogleMapsAPI

var myOption = {
    zoomControl: true,
    scaleControl:true,


YOLP

ymap.addControl(new Y.SliderZoomControlVertical());
ymap.addControl(new Y.ScaleControl());


GoogleMapsAPIは、オプション配列に、コントロールのオン、オフの情報を事前に準備しておき、地図を描画する際にその配列を使う感じですね。
YOLPは、地図オブジェクトに追加したいコントロールをaddControlで追加していく感じですね。

それぞれ追加できコントロールには違いがあるので詳しくは下記を参照ください。

GoogleMapのコントロール

YOLPのコントロール

-----------------------------------------------------------------------------------------------

オリジナルアイコンでのマーカーの追加

GoogleMapsAPI

var icon = 'http://support-map.geo.jp/images/icon_r.png";
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icon
});

YOLP

var icon = new Y.Icon('http://support-map.geo.jp/images/icon_r.png");
var marker = new Y.Marker(latlng,{icon:icon});
ymap.addFeature(marker);


GoogleMapsAPIは地図の描画の際と同様に、マーカーオブジェクトを生成する際に地図への追加と、アイコン画像の指定を行います。
YOLPは、まずアイコンオブジェクトを生成。そしてそのアイコンオブジェクトを指定してマーカーオブジェクトを生成。最後に地図オブジェクトへマーカーを追加する感じになります。

この辺の書き方は好みが出そうですね。

-----------------------------------------------------------------------------------------------

イベントの指定 - 地図を動かしたときのアクション指定

GoogleMapsAPI

google.maps.event.addListener(map, 'dragend',function(){
    //地図のドラッグが終わったらなにかの処理
});

YOLP   

ymap.bind('moveend',function(){
    //地図のドラッグが終わったらなにかの処理
});

GoogleMapsAPIは、イベントリスナーに対象（この場合地図）と、イベント（ドラッグの終了）、その際のアクションを指定する感じです。
YOLPは、地図オブジェクトに、イベント（ドラッグの終了）とその際のアクションを指定する感じですね。

-------------------------------------------------------------------------------------------------

イベントの指定 - マーカーをクリックしたときのアクション指定

GoogleMapsAPI

google.maps.event.addListener(marker, 'click',function(){
    //マーカーをクリックしたらなにかの処理
});

YOLP

marker.bind('click',function(){
    //マーカーをクリックしたらなにかの処理
});

地図への指定と同様、
GoogleMapsAPIは、イベントリスナーに対象（この場合マーカー）と、イベント（クリック）、その際のアクションを指定する感じです。
YOLPは、マーカーオブジェクトに、イベント（クリック）とその際のアクションを指定する感じですね。

イベントの種類と内容に関しては以下を参照ください

GoogleMapのイベント

YOLPのイベント

------------------------------------------------------------------------------------------------

中心点の取得

GoogleMapsAPI

var latlng = map.getCenter();

YOLP

var latlng = ymap.getCenter();

これは同じですね。

------------------------------------------------------------------------------------------------

地図の4隅の取得

GoogleMapsAPI

var bounds = map.getBounds();
var max_lat = bounds.getNorthEast().lat();
var min_lat = bounds.getSouthWest().lat();
var max_lon = bounds.getNorthEast().lng();
var min_lon = bounds.getSouthWest().lng();

YOLP

var bounds = ymap.getBounds();
var max_lat = bounds.getNorthEast().lat();
var min_lat = bounds.getSouthWest().lat();
var max_lon = bounds.getNorthEast().lng();
var min_lon = bounds.getSouthWest().lng();

こちらも同じですね。

--------------------------------------------------------------------------------------------------

ざっと基本的な部分の比較をしてみましたが、基本的な機能はほぼ同じものがそろっていて、記述方法の違いもそこまで切り替えをする際に戸惑うこともないかなという感じかと思います。

結構長くなってしまったので一旦ここまでにして、次回は残りの部分の解説を行おうと思います。


関連
YOLPで周辺検索 - coding note

 またちょっと実験的なWEBサービスを作ってみました。

Custom Page

facebookのコメントプラグインはよくできてるなぁと感心して、

これで、自分自身でデータを持たなくてもなんか作れそうだなーと思い作ってみました。

使いどころがいまいちないんですが、右側のテキストフォームになんか適当な文字列を入力すると、入力した文字のページが出来上がります。

そこに、facebookのコメントプラグインをはめ込んでいる感じです。

こんな感じ↓
便利なPHPライブラリ一覧


そして、ページにコメントを書き込むと、facebookにも同時にポストされて、ページがシェアされます。

そのリンクを踏んだ人がテーマにそってコメントを書き込んでいくと、そのテーマに沿ったコメントのまとめページが出来上がりますって感じです。

匿名じゃない2ch みたいな感じになるのかな。。

なんか色々使えそうで使えないので、なんかうまい使い方をしてくれると嬉しいです（笑）

 Twigを使ってて、改行コードを<br />に変換したいことってありますよね。

なんとなく、{{ value|nl2br }} でいけんじゃないかとも思うわけですよ。

しかし、残念ながら標準でそんなFilterはないと。。。

で、方法としては自作Filterっていうのがあるんですが、まあとりあえずここだけ何とかしたいって時にはちょっと大変ですよね。

で、Twigには標準で replaceっていうFilterがあるんで、これを使って

{{ value|replace({'¥n'}:'<br />'}) }}

とかやってみると、まあ　<br />はエスケープされて出力されるので失敗みたいな。

というわけで、

エスケープをしてからreplaceのFilterをかければいっかというわけで、こんな感じでOKかな。

{% autoescape false %}{{ value|escape|replace({'¥n':'<br />'}) }}{% endautoescape %}

まあちょっと長いんだけどねｗ

なんかいきなり、ネットにつながらなくなって久々にもーいやってなりました。。
また、起りそうなんでメモ。

症状：
起動したら普通にネットにつながるはずなのに、なぜかつながらない。
ルーター経由で、iPadとか、macは無線LANで問題なくつながってる。

じたばた：
ケーブルがおかしいのかと思ったが、macに有線で接続しても問題なし。
で、トラブルシューティングとか色々調べてみると、ネットワークアダプタがないみたい。。
特に、変わったこともしてないんだけどな。。
コンピュータを復元しようとするが、失敗。
ただ、直前にWindowsUpdateが行われたことを確認。。これが原因なのかな？

解決：
コントロールパネル　＞　デバイスマネージャー
を見てみると、なんかその他のデバイスでエラーっぽくなってる。
で、ネットワークアダプターの項目もなくなってる。
で、そっからデバイスの更新で、ネットワークアダプタを選んで更新。
ドライバがどこにあるのかわからず、苦戦。。
dell¥drivers 以下を参照して検索してみたら、なんかあってそうなのを発見してくれた。
それを指定したら無事ネットにつながりました。

 以前、CodeIgniter+Twig+jQueryMobile+YOLP+GoogleMapsAPI3　の組み合わせで作ったサンプルWEBサービス

ちかくのコンビニ

のソースコードを bitbucketで公開してみました。

https://bitbucket.org/h19e/shopnavi/src


解説入れないと、あんまりわかりやすいコードじゃないんですが時間とれなかったんでとりあえず公開だけしてみました。

なにかの参考にでもなれば。

多分やらないとは思いますが、実際に動かしてみるときは、
Yahoo!のAppIdの部分は、 APPID_APPID_APPID に置き換えてますんでご注意を。
googleの広告は抜いてあります。


2012/02/03  JavascriptでのYOLPの使い方の説明を書きました。

YOLP (Yahoo! Open Local Platform) で周辺検索

ソースコード管理するのに、githubを使おうかなと思ったのですが、privateでソースコード管理したいなぁと思い、別の探しました。

で、bitbucketっていうサービスがprivateでソースコード管理できそうなので使ってみました。

レンタルサーバ：coreserver

mercurialのインストール　（まあgitみたいなもんです）
mkdir ~/local
mkdir ~/tmp
cd ~/tmp
wget http://www.selenic.com/mercurial/release/mercurial-1.9.2.tar.gz
tar xvzf mercurial-1.9.2.tar.gz
cd mercurial-1.9.2/
cd
vim .bashrc
-------------------------------------
export PATH=$PATH:$HOME/local/bin
export PYTHONPATH=$HOME/local/lib/python
-------------------------------------
source .bashrc
cd tmp/mercurial-1.9.2/
python setup.py install --home=$HOME/local

これで一応mercurialは使えるようになるはず。
hg version
で確認

次にbitbucket

https://bitbucket.org/

ここで、signup します。
とりあえずはアカウントと、メールアドレスを設定するぐらいですね。

登録すると、マイページのような感じになるので、

Repositories -> create new repository
で、リポジトリを適当に作ります。

次に、SSHのkeyを登録します。

AccountメニューのSSHKeysってなってるところで、公開鍵をアップロードします。

公開鍵に関しては、
gitHubにリポジトリを作成するまでのメモ
のエントリーを参照ください。

ここまでやったら、自分の環境に戻って、

hg clone ssh://hg@bitbucket.org/(アカウント)/(リポジトリ）
で、リポジトリのcloneを作成できます。

で、リモートのリポジトリにアクセスする際にユーザ名が必要みたいなので、

cd
vim .hgrc
-----------------------------------------------
username = (アカウント)
-----------------------------------------------


あとは、
hg status で確認したり、
hg add (ファイル名)でファイル追加したり、
hg commit でコミットしたりなど、gitとほぼ同じ。
hg push でbitbucketにソースを反映。

こういうのやるとき、だいたい変なとこではまるんだけど意外とすんなり。

mkdir local
cd ~/tmp
wget http://ftp.de.debian.org/debian/pool/main/g/git/git_1.7.2.5.orig.tar.gz
tar xvzf git_1.7.2.5.orig.tar.gz
cd git-1.7.2.5/
./configure --prefix=$HOME/local
gmake
gmake install

cd
vim .bashrc
-----------------------------------
export PATH=$PATH:$HOME/local/bin

 
画像のサムネイル用正方形画像の生成方法の単なるメモです。

今更かもですが、このライブラリが抜群に使いやすかったです。

WideImage


100px × 100px の正方形のサムネイル画像を作るとき。
-------------------------------------------------------------

require_once "path-to/WideImage.php";

//対象画像のロード
$image = WideImage::load('path-to/original.jpg');

//一旦リサイズ
// outsideを指定することで、短い方が100pxになります。
$resized = $image->resize(100,100,'outside');

//画像の切り抜き
//中央から、100px × 100px
$cropped = $resized->crop('center','center',100,100);

//画像の保存
$cropped->saveToFile('path-to/thumb.jpg');

-------------------------------------------------------------

CodeIgniterにも画像のリサイズのライブラリはあるんですが、切り抜きの仕様が微妙なので探してたら、よいのがありました。
こういうのを求めてたよ。

最近、リリースまでに時間のかかるものを作っていると、途中で飽きちゃってペンディングのパターンが多かったので、とりあえず勉強がてら作ってみて、ぱっとリリースして興味がわいたらブラッシュアップしていく方法に切り替えました。

で、とりあえず

Temporary Message っていうサイトをまたリリースしました。

簡単に言うと、時間制限つきのメッセージを生成するサイトです。

まあ前回同様、たいしたサービスではないんですけどね。

今回は暗号化処理と、goo.gl　のshortUrl 生成API を組み合わせて、データ保存を行わないで、メッセージの表示時間を制御する仕組みを作りました。

とりあえず今回は単純なメッセージ表示部分だけを作りましたが、こっからちょっとずつ進化させていければなぁと思ってます。

じゃあまた。