タグ：PHP

Google Latitudeの代わりを作ってみた

📅 2013 年 11 月 16 日 ☏ コメントはありません

2013年8月9日をもって、Google Latitudeのサービスが終了しました。

今までは、このサービスを使って、自分がどこにいるのかブログパーツで知らせていました。
GPS内蔵の携帯やスマホを通じて(セキュリティ上から手動で)現在地を更新し、ブログパーツ化したGoogleマップの上にその現在地(最終更新地)が表示されるので、非常に便利でした。
しかし、利用者が少なかったのか、儲からないであろうこの事業からは手を引いたようです。

そこで、何とか代替品を作るべく、とりあえずiPhoneで動く(現在地更新ができる)ことを目標に、立ち上がりました。

まず現在地を取得する方法ですが、最近のブラウザは標準で現在地(つまり緯度・経度など)を取得できるようです。
これはHTML5のGeolocation APIという仕様によるものらしく、パソコンだとIPアドレスなどから取得するので不正確ですが、iPhoneなどではGPSからなので、かなり正確な現在地を取得してくれます。
つまり、iPhoneでブラウザからスクリプトにアクセスすることで、現在地が簡単に取得できます。

後は取得した緯度と経度をGoogleマップに渡してやれば現在地の表示は比較的簡単にできるはず。
表示させると同時に、自分のサーバーに位置情報を書き込む。
ブログパーツではその位置情報を読み込み、毎回Googleマップに渡して表示すれば・・と頭の中で仕様が大体出来上がりました。

それでは早速作ってみましょう。

1.JavaScriptで現在地を取得
現在地取得コードを書きます。

<script type="text/javascript">
//現在地情報を取得
function cont_get_current_gps(){
if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; }
navigator.geolocation.getCurrentPosition(
function(position){
var ido = position.coords.latitude;
var keido = position.coords.longitude;
document.idokeido.lati.value = ido;
document.idokeido.long.value = keido;
} ,
function(){
alert('Error!');
}
);
}
</script>

//現在地情報を取得

function cont_get_current_gps(){

if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; }

navigator.geolocation.getCurrentPosition(

function(position){

var ido = position.coords.latitude;

var keido = position.coords.longitude;

document.idokeido.lati.value = ido;

document.idokeido.long.value = keido;

} ,

function(){

alert('Error!');

}

);

}

</script>

<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();">

1	<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();">

2.フォームに現在値を渡す
取得した10進数の緯度と経度は、フォームに渡されます。
普通のフォームなので、手動でも位置情報が書けるようになっています。

<form method="post" action="" name="idokeido">
緯度<input type="text" name="lati" size="10"><br>
経度<input type="text" name="long" size="10"><br>
<input type="submit" value="送信">
</form>

緯度<input type="text" name="lati" size="10"><br>

経度<input type="text" name="long" size="10"><br>

</form>

3.データを保存する
フォームに入った緯度と経度は、PHPによりサーバーに保存されます。
今回は簡単なテキストにしましたが、KML形式で出力するとより良いでしょう。

<?php
$lati = $_POST['lati'];
$long = $_POST['long'];
if ($lati &amp;&amp; $long) {
$fp = fopen('here.txt', 'w');
fwrite($fp, "{$lati},{$long}");
fclose($fp);
echo  <<< EOM
<iframe id="disp" src="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z=13&output=embed" width="100%"></iframe>
EOM;
}
?>

<?php

$lati = $_POST['lati'];

$long = $_POST['long'];

if ($lati && $long) {

$fp = fopen('here.txt', 'w');

fwrite($fp, "{$lati},{$long}");

fclose($fp);

echo <<< EOM

EOM;

}

4.データを読み込んで現在地を表示する
表示用PHPが位置情報のテキストを読み込み、マップを開きます。
あとはiframeなどでブログに貼りつければブログパーツとしても使えます。

<?php
$width = $_GET["width"];
if(!$width){
$width = "100%";
}
$height = $_GET["height"];
if(!$height){
$height = "100%";
}
$z = $_GET["z"];
if(!$z){
$z = "13";
}
$fp = fopen('here.txt', 'r');
$lines = fgets($fp);
$arr = explode(",",$lines);
$lati = $arr[0];
$long = $arr[1];
fclose($fp);
echo  <<< EOM
<iframe src="http://maps.google.co.jp/maps?ll={$lati},{$long}&z={$z}&output=embed" width="{$width}" height="{$height}" frameborder="0"></iframe><br>
<a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z={$z}">大きな地図で見る</a>
EOM;
?>

<?php

$width = $_GET["width"];

if(!$width){

$width = "100%";

}

$height = $_GET["height"];

if(!$height){

$height = "100%";

}

$z = $_GET["z"];

if(!$z){

$z = "13";

}

$fp = fopen('here.txt', 'r');

$lines = fgets($fp);

$arr = explode(",",$lines);

$lati = $arr[0];

$long = $arr[1];

fclose($fp);

echo <<< EOM

<a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z={$z}">大きな地図で見る</a>

EOM;

上記のまとめはこちらです。
これらのファイルをサーバーの同じ場所に置いてアクセスして下さい。

参考サイト:
http://www.pxt.jp/ja/diary/article/254/index.html
http://ascii.jp/elem/000/000/433/433470/index-3.html
http://blog.fonland.net/2010/06/javascript-iphone-gps.html
http://d.hatena.ne.jp/yatt/20130208/1360316179
http://www.shurey.com/html/googlemaps.html
http://www.phpbook.jp/func/file/index4.html
http://ponk.jp/php/file/write
http://www.php-ref.com/b2api/04_fgets.html
http://phpspot.net/php/man/php/function.explode.html
http://libro.tuyano.com/index3?id=410001&page=3
http://www.geocities.jp/eijispace/2012/0220.html
http://d.hatena.ne.jp/takaxi/20111211/1323575933

Enjoy!

追記：
改造したWebアプリ版をひっそり公開。
iPhoneなどで自分の場所を取得し、その情報を短縮URL化します。
これを使えば、iMessageなどで自分の場所を友達と共有できます。
iframe対応のブラウザでご覧ください。

▣ カテゴリー: ウェブサイト構築 ◇ タグ: Google Latitude, Google Maps, GPS, iPhone, JavaScript, PHP, 地図

中国のPM2.5をJSONで取得する

📅 2013 年 3 月 4 日 ☏ コメントはありません

中国の改革開放では「富めよ栄えよ」が強調され、環境破壊が顧みられることはありませんでした。
資源を大量消費し、汚染物質を垂れ流す様は、まるで「生命を金に換える」行為です。

そして、近年、その影響が日本にも「越境汚染」という形で及んで来ています。
今年に入ってからは、九州を中心にPM2.5の飛来が騒がれているのは記憶に新しいところです。

九州各地ではPM2.5の数値が公表されています。
データは自治体ごとにバラバラですが、有志が現在値を調べられる地図や飛散量のJSON形式ファイルを公開して下さっています。

さて、PM2.5の多くは中国から海を越えて飛来して来ていると考えるのが自然です。
とするなら、中国の汚染状況を察知すれば、(数日のタイムラグはあるにせよ)日本にもいずれその影響が及ぶことが予想されます。
中国のPM2.5のデータは、ウェブ上でも散見できるのですが、再利用が容易なJSONやXMLは見つけることができませんでした。
本来であれば、中国の当局か有志が作ってくれればいいのですが、残念ながら中国人にそんなことは期待できません。

そこで、中国各地のPM2.5の最新状況を表示するJSONを公開します(1時間に1回自動更新しています)。
今のところ、北京(Beijing)、上海(Shanghai)、杭州(Hangzhou)、広州(Guangzhou)、深圳(Shenzhen)、東莞(Dongguan)、大連(Dalian)、青島(Qingdao)、西安(Xian)、成都(Chengdu)、香港(HongKong)のデータになります。必要な都市があったら増やしますのでご連絡下さい。
iframe対応のブラウザでご覧ください。
お役に立てればと思います。あくまで自己責任の元、お使い下さい。

それと重要なことですが、この数値はAQI(Air Quality Index)と呼ばれる、主にアメリカで使われている大気汚染指数です。
日本で一般に使われている「立方マイクログラム(μg/m³)」表記とは異なりますのでご注意下さい。
AQIでは、0-500の指数で表され、数値が高くなると汚染が進んでいるということになり、100を超えたら要注意です。
AQIは500までしかないにも関わらず、北京では何と900を超えた日もあったんだそうです。
AQIについては北京の在中国日本国大使館が詳しく説明しています。

なお、元データはここから取得しています。
アジア全域の大気汚染地図もあるので、普通に汚染具合をチェックするには最適です。

追記(2015/01/06):
中国各地のPM2.5の最新状況を表示するJSONを利用した、シンプルなブログパーツ例です。
iframe対応のブラウザでご覧ください。

追記2(2016/11/05):
諸事情によりサポートを止めます。申し訳ございません。

▣ カテゴリー: 中国生活向上委員会 ◇ タグ: JSON, PHP, PM2.5, 中国, 越境汚染

誰でもすぐデキる一番簡単なiPhone対応サイトの作り方

📅 2013 年 2 月 5 日 ☏ コメントはありません

シンプルなウェブページであれば、ヘッダー部分でmetaタグのviewportを指定すれば、簡易的なiPhoneやAndroidなどのスマホに対応したページにすることできます。
そこで、JavaScriptとPHPの二通りの方法でUserAgentを判別し、iPhoneやAndroid(タブレットは除く)であれば、viewportを書き出すソースを書いてみます。
自分で指定したUserAgentの端末のみviewportが書き出されますので、例えばiPadなどにはviewportは書き出されず、シンプルな一種の振り分けとなります。

JavaScript

<script type="text/javascript">
var d = window.document;
if(navigator.userAgent.indexOf('iPhone') > -1){
d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');
}else if(navigator.userAgent.indexOf('iPod') > -1){
d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');
}else if(navigator.userAgent.indexOf('Android') > -1 &amp;&amp; navigator.userAgent.indexOf('Mobile') > -1){
d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');
}else if(navigator.userAgent.indexOf('Windows Phone') > -1){
d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');
}
</script>

var d = window.document;

if(navigator.userAgent.indexOf('iPhone') > -1){

d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');

}else if(navigator.userAgent.indexOf('iPod') > -1){

d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');

}else if(navigator.userAgent.indexOf('Android') > -1 && navigator.userAgent.indexOf('Mobile') > -1){

d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');

}else if(navigator.userAgent.indexOf('Windows Phone') > -1){

d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />');

}

</script>

PHP

<?php
$ua = $_SERVER["HTTP_USER_AGENT"];
if (mb_ereg("iPhone|iPod|Android.*Mobile|Windows.*Phone|blackberry|webOS", $ua)) {
$viewport = "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0\" />";
echo $viewport;
}
?>

<?php

$ua = $_SERVER["HTTP_USER_AGENT"];

if (mb_ereg("iPhone|iPod|Android.*Mobile|Windows.*Phone|blackberry|webOS", $ua)) {

$viewport = "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0\" />";

echo $viewport;

}

どちらもの間の上の方に書くといいと思います。
今回はあくまでviewportの書き出しでしたが、UserAgentの判定によるページ振り分けは色々と応用方法があると思います。

▣ カテゴリー: ウェブサイト構築 ◇ タグ: Android, iPhone, JavaScript, PHP

[ブログパーツ] YouTubeの動画をブログに貼りつけよう

📅 2013 年 2 月 3 日 ☏ コメントはありません

お気に入りのYouTube動画のリストを自分のブログに簡単に貼りつけられるブログパーツを作りました。
iPhoneにも対応しています。

例えば「猫かわいい」の動画なら、以下のようになります。
iframe対応のブラウザでご覧ください。

上のブログパーツはiframeタグで貼りつけています。
ソースはこんな感じです。

<iframe src="https://wtpmj.com/tube/?keyword=%E7%8C%AB%20%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84&width=320&height=180" width="400" height="400" frameborder="0">iframe対応のブラウザでご覧ください。</iframe>

1	<iframe src="https://wtpmj.com/tube/?keyword=%E7%8C%AB%20%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84&width=320&height=180" width="400" height="400" frameborder="0">iframe対応のブラウザでご覧ください。</iframe>

表示したい動画の検索キーワードは、keyword=の後ろに、UTF-8でURLエンコードした物を入れて下さい。
例:猫かわいい → %E7%8C%AB%20%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84
ちなみに、検索キーワードがない場合は、おすすめ動画が表示されます。
また、お分かりかと思いますが、動画サイズはwidthとheightのクエリで指定可能ですので、サイトのデザインに合わせることも可能になっています。

このブログパーツでは、各動画のタイトル、インライン再生できる動画、動画の説明、再生時間、再生回数、★で表した人気度などがシンプルに表示されます。
1ページに10個の動画が表示される仕様です。

このブログパーツは予告なく変更、終了する可能性があります。
予めご了承下さい。

なお、iframeで貼りつけたくない、もうちょっと仕様を変えたいという方には、PHP版の提供も可能です。
こちらは別途ご相談となりますので、コメントでご連絡下さい(コメントは表示されませんのでご安心下さい)。
PHP版は広告なしで、ご要望に沿った形にカスタマイズした上で販売いたします。販売価格は7800円です。

これを使うことでコンテンツのないブログにも簡単にコンテンツ、しかも人気の高い動画コンテンツを導入できますよ!

追記(2015/05/16):
YouTube APIの仕様がv3に完全移行しちまって、使えなくなりました・・
バージョンアップはしたいと思いますが、やる気が出ません。応援コメントあれば・・

▣ カテゴリー: ウェブサイト構築 ◇ タグ: iPhone, PHP, YouTube

weibo(微博)のAPIを使ってbotを作ってみた

📅 2012 年 12 月 6 日 ☏ コメントはありません

weibo(微博)とは、中国の主に若いホワイトカラー層で近年流行している、Twitterに似たウェブサービスの名称です。
日本語的発音では「ウェイボー」と読みます。
中国ではTwitterへのアクセスが禁止されていますが、その代わりに色々な会社がTwitter模倣サイトを運営しています。
その中でもsinaが作った「新浪微博」が最も利用者が多く、日本のマスコミなどでも「中国版ツイッター」などと呼ばれて紹介されることが最近増えています。

その新浪微博でも、本家Twitterと同じようにいわゆるAPIが公開されています。
そのAPIを使い、アプリ(bot)を作ることも可能です。
今回はweiboでPHP動作のアプリを作るまでの手順を簡単にご紹介したいと思います。

ただし、細かい部分の説明は端折ってますので、botの仕組みを理解されており、かつ中国語の読解力がある方が対象です。予めご了承下さい。
また、事前にweiboのアカウントを取得しておいて下さい。

1.開発者登録

まず開発者登録をします。
微博にログインした状態で、http://open.weibo.comにアクセスし、右上の编辑开发者信息から各必要事項を入力、送信します。

2.アプリ登録

続いてこれから作るアプリの登録です。
管理中心→创建应用→创建应用→网页应用にアクセスし、各必要事項を入力、送信します。

3.App KeyとApp Secretの確認

管理中心→アプリ名→应用信息→基本信息→应用状态ページに移動します。
ここにアプリのApp KeyとApp Secretが書かれているので確認しておきます。5で必要になります。

4.PHP SDKのダウンロード

次に、http://open.t.sina.com.cn/wiki/index.php/SDKにアクセスし、PHP SDKをダウンロード、解凍しましょう。

5.SDKの修正とアップロード

4のフォルダのconfig.phpをテキストエディタで開きます。
define( “WB_AKEY” , ‘xxxxxxxxxx’ );
define( “WB_SKEY” , ‘xxxxxxxxxxxxxxxxxxxxxxxxx’ );
define( “WB_CALLBACK_URL” , ‘http://xxxxxxxxxxxx/callback.php’ );
上記のxxx部分を、3で確認した自分のものに修正し、上書き保存します。
1番上がApp Key、2番目がApp Secret、3番目がファイルをアップロードするURLとなります。
そして、4の全てのファイルをPHPが動くサーバにアップロードします。

6.戻りURLの指定

今度は、作るアプリの管理ページへ戻りましょう。
管理中心→アプリ名→应用信息→高级信息→OAuth2.0 授权设置→编辑から戻りURLを指定します。
5のhttp://xxxxxxxxxxxx/callback.phpと同じにします(授权回调页/取消授权回调页の両方とも同じ)。

7.アプリへの許可

5でアップロードしたindex.phpにアクセスします。
用微博帐号登录のボタンを押し、自分のweiboアカウントで使用許可を与えます。

8.PHPを書く

これで準備が整ったので、APIや4に付属のweibolist.phpを参考にPHPを作り、アップロードします。
そのPHPに、cronなどで定期的にアクセスすれば、自動で投稿されるようになります(同じ内容の連続投稿は恐らく規制されていると思います)。
例えば下記のようなPHPを書くといいでしょう。

<?php
session_start();

include_once( 'config.php' );
include_once( 'saetv2.ex.class.php' );

$c = new SaeTClientV2( WB_AKEY , WB_SKEY , $_SESSION['token']['access_token'] );

$txt = "你好! これはテストです。";

$ret = $c->update( $txt );
if ( isset($ret['error_code']) && $ret['error_code'] > 0 ) {
echo "<p>NG:{$ret['error_code']}:{$ret['error']}</p>";
} else {
echo "<p>OK</p>";
}

?>

<?php

session_start();

include_once( 'config.php' );

include_once( 'saetv2.ex.class.php' );

$c = new SaeTClientV2( WB_AKEY , WB_SKEY , $_SESSION['token']['access_token'] );

$txt = "你好! これはテストです。";

$ret = $c->update( $txt );

if ( isset($ret['error_code']) && $ret['error_code'] > 0 ) {

echo "<p>NG:{$ret['error_code']}:{$ret['error']}</p>";

} else {

echo "<p>OK</p>";

}

9.最後に

なお、ここまでは簡易登録でしたので、アプリの認証はすぐに切れてしまいます。
認証が切れたらまた認証をする必要があります。これでは面倒です。
ちゃんと登録するには実名などで申請する必要があるようですね。
これ以上はご自身で色々試されて下さい。

以上全て自己責任の元、興味のある方はご参考にされて下さい。

参考URL

http://blog.lilyx.net/2011/01/22/how-to-use-sina-weibo-chinese-twitter-api
http://blog.30c.org/2374.html
http://www.oschina.net/code/snippet_245787_8966
http://www.xiaojinke.com/637.html

▣ カテゴリー: 中国生活向上委員会 ◇ タグ: API, bot, PHP, Twitter, weibo, 微博