iPhoneの位置情報とmixiアプリを連携してみた

iPhone OS 3.0からsafariのGeoLocationAPIがサポートされました。このAPIを使用するとjavascriptからiPhoneGPS機能を使用することが出来ます。

今回はそのGeoLocationAPIを使ったサンプルをmixiアプリ上で動かしてみます。

以下がサンプルになります。

■サンプル(実際に動くやつ)

http://platform001.mixi.jp/view_appli.pl?id=3520
iPhoneで見てください

mixiアプリは現在オープンβなのである手順を踏まないと使用できません。
http://developer.mixi.co.jp/hello-social-world
http://journal.mycom.co.jp/news/2009/04/28/048/index.html

■GeoLocationAPIの使い方

watchPositionメソッドに成功時に実行されるcallbackと、エラー時に実行されるhandleErrorを引数に渡してあげます。

navigator.geolocation.watchPosition(callback, handleError);

■GoogleMap APIv3

先日のGoogleDevelopersDayで発表されたGoogleMapAPIv3を使ってGoogleMapを表示させています。
http://code.google.com/intl/ja/apis/maps/documentation/v3/

APIの呼び出し
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
緯度経度の設定
var latlng = new google.maps.LatLng(lat, lng);
地図の作成とオプションの設定
var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map,
    title:"You are here!"
});

■サンプルコード(全体)

Opensocial-jqueryの機能まったく使ってなくてごめんなさい。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="dokoiru">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javascript" src="http://exmaple.com/opensocial/js/opensocial-jquery/opensocial-jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javacript">
jQuery(function($) {
    var GeoLocation = function(){
    };
    GeoLocation.prototype = {
        watch: function(){
            navigator.geolocation.watchPosition(this.callback, this.handleError)
        },
        callback: function(location){
            //location.coords.latitude
            //location.coords.longitude
            //location.coords.accuracy
            var record = {latitude: location.coords.latitude, longitude: location.coords.longitude, accuracy: location.coords.accuracy },

            // googlemap api v3
            // API keyがいらないとか素敵
            // http://code.google.com/intl/ja/apis/maps/documentation/v3/
            var latlng = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
            var myOptions = {
                zoom: 14,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                position: latlng, 
                map: map,
                title:"You are here!"
            });   
        },
        handleError: function(e){
            console.log(e.code);
        }
    };

    var geolocation = new GeoLocation();
    // startボタン
    $("#start").click(function(){
        geolocation.watch();
        return false;
    });
});
</script>
<div id="map_canvas" style="width:300px; height:200px"><a href="#" id="start">位置情報の取得を開始する(データは保存されません)</a></div>
  ]]>
  </Content>
</Module>

GeoLocationAPIを動かしているだけなのでソーシャル的な機能はまったく使っていません(誰か作って

iPhoneGPS×mixiアプリで面白そうなアプリを作れそうな気がしています。
自分が思いついているアイデアはしょぼすぎるので公開しておきます。

  • マイミクの今いる位置が分かる
  • 今いる位置を共有しつつ、近くなったら相手のプロフィールが見れるようになる(あんまソーシャルじゃないけど)

mixiアプリでマイミク情報を取得するサンプルコードまとめ(1)

iPhoneからもdeveloper登録ができるようにったmixiアプリ
@ITの記事で丁寧にmixi アプリ(Opensocialアプリ)の作り方を説明しているエントリーが盛り上がっていたので便乗してみます。

スパイスラボ神部(id:ryuzi_kambe)さんが先日書いた記事のブクマで「サンプルコード付きのもっとスマートなまとめがあってもいい気がしますが…」と書かれてたのでまとめてみました。

mixi アプリで何が取得出来るのか?のまとめ ( ラボブログ )
http://blog.spicebox.jp/labs/2009/06/mixi_23.html?utm_source=labblogrss&utm_medium=rss

javascriptは普段書かないので(言い訳)おかしなところあったらご指摘御願いします。

基本的な概念のおさらい

アプリでユーザーデータを扱うときは「VIEWER」と「OWNER」を意識する

mixiアプリは各ユーザーにインストール(ローカルにインストールじゃないですよ)されて初めて使用できるようになります。
アプリをインストールしたユーザー(アプリ保持者)のことをOWNERと呼び、例えば友達のアプリを見ている(利用している)人はVIEWERと区別されます。

プロフィール情報

下記の情報を取得できます。
ただし、公開範囲に「全体公開」が設定されているものしか取得できません!

  • ID
  • ニックネーム
  • プロフィール写真
  • プロフィールURL
  • 現住所(県のみ)
  • 年齢
  • 生年月日
  • 性別
  • 血液型

詳しくは下記のURLをご参照あれ。
http://developer.mixi.co.jp/appli/pc/lets_enjoy_making_mixiapp/get_mymixi_info

サンプルコード(公式のものを拝借しつつちょっと変更)
<?xml version="1.0" encoding="UTF-8"?>

<Module>
  <ModulePrefs title="getViewerProfile">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html"><![CDATA[
<div>Hello, <span id="target"></span>!</div>
<script type="text/javascript">
function init() {
    var p = {};
    p[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
        opensocial.Person.Field.PROFILE_URL,
        opensocial.Person.Field.ADDRESSES,
        opensocial.Person.Field.GENDER,
        mixi.PersonField.BloodType
    ];
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER, p), "viewer");
    req.send(function(data) {
        // [注意]全体公開にしている情報しか取得できない!!
        var viewer = data.get("viewer").getData();
        var id = viewer.getId();
        var displayName = viewer.getDisplayName();
        var thumbnailUrl = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
        var profileUrl = viewer.getField(opensocial.Person.Field.PROFILE_URL);
        var address = viewer.getField(opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED);
        var name = viewer.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.UNSTRUCTURED);
        var nickName = viewer.getField(opensocial.Person.Field.NICKNAME);
        var gender = viewer.getField(opensocial.Person.Field.GENDER).getDisplayValue();
        var boodType = viewer.getField(mixi.PersonField.BloodType);
        document.getElementById("target").innerHTML = displayName;
    });
}
gadgets.util.registerOnLoadHandler(init);
</script>

  ]]></Content>
</Module>

マイミク情報の取得

マイミクの情報が取得できます。

サンプルコード(id:amachangさんのコードを参考に)
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="getFriendList">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javacript">
    var req = opensocial.newDataRequest();
    // OWNERのマイミクを取得
    req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: 'OWNER', groupId: 'FRIENDS' }), { max: 1000 }), 'friends');
    // VIEWERのマイミクを取得取得したい場合、
    // req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: 'VIEWER', groupId: 'FRIENDS' }), { max: 1000 }), 'friends');
    req.send(function(data) {
        var friendsObject = data.get('friends').getData();
        // asArray() ? -> http://code.google.com/intl/ja/apis/opensocial/docs/0.8/reference/#opensocial.Collection.asArray
        var friendsArray = friendsObject.asArray();
        var friends = friendsArray.map(function(friend) {
            return friend.getDisplayName();
        }); 
        document.body.innerHTML = friends;
        // 上の6行を1行で書くと
        // document.body.innerHTML = data.get('friends').getData().asArray().map(function(friend){ return friend.getDisplayName()});
    });
</script>
  ]]>
  </Content>
</Module>

OpenSocialアプリ盛り上がるといいな。

もっと知りたい人はここ読むといいと思います。

OpenSocial API リファレンス(OpenSocial API v0.8.1)
http://code.google.com/intl/ja/apis/opensocial/docs/0.8/reference/

gooホームガジェット - goo Developer's Kitchen
http://developer.home.goo.ne.jp/document/goo%E3%83%9B%E3%83%BC%E3%83%A0%E3%82%AC%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88

「Web2.0 中の人ナイト」に行ってきた(まとめ)

本日、お台場の東京カルチャーカルチャーで行われた「Web2.0 中の人ナイト」に行ってきたのでそのまとめ。
http://tcc.nifty.com/cs/catalog/tcc_schedule/catalog_090225201886_1.htm

※遅刻してしまったので途中からかも?

(追記)
他の参加者の方がブログに雰囲気を書いてくださっているので、そちらも見たらいいかも。

Web2.0 中の人ナイト」ってのに行ってきたよ - まにまにらいだー
http://d.hatena.ne.jp/eiei19/20090330/1238368707

Web2.0 中の人ナイトへ行ってきた - ただの独り言なんだからねっ!
http://d.hatena.ne.jp/ruuipon/20090329

しがないSEの勉強記:Web2.0中の人ナイトに行って来た - livedoor Blog(ブログ)
http://sg.livedoor.biz/archives/541064.html

WEBサービストークライブ(各社代表エンジニア)

(追記)

Livedoorhttp://livedoor.jp/

このLTが見れてなかったみたい。。
ごめんなさい。

クックパッドhttp://cookpad.com/
  • 600万UU
  • かなり少ないエンジニアで回している
  • このライブの打ち合わせのとき料理が振る舞われたらしい。(すげぇ

ばたばたしててあまりめもれなかったorz
でも、クックパッドにとても興味を持った。
ぜひ遊びに行ってみたい!!!

mixihttp://mixi.jp
  • 萌え巫女バイナリアン、性癖をgoogleにあばかれた男
  • ODF(Googleの20%ルールみたいなもの)を使って「オンラインコーヒーメーカー萌香」を開発
    • 光センサーを使ってコーヒーメーカーが出来上がったランプをキャッチして、その通知をtwitterIRCになげる
    • 詳しくは、オンラインコーヒーメーカー「萌香たん」とはじめるドキドキ☆コーヒーブレイク(http://alpha.mixi.co.jp/blog/?p=386
    • このODFの裏テーマとして「上場企業でどれだけ無茶なことができるか」があった
    • 上司は背中を押してくれて、出すことができた。

最後のCMはあほかとw

@niftyhttp://www.nifty.com/
  • 120%という制度との付き合い方
  • プロフィール
  • 業務
    • ポータル編成部 通常業務+おもちゃ開発
  • 120%ルールとは?
    • 100%したら20%していい
    • だめなのところ
    • まったくの新規案件は20%として認められない
      • 趣味の領域
  • 作ったもの CheckList
    • 要件
      • 一連の手続きを含むチェックリストを簡単に作成
    • デザイン当ててもらえなかったorz
    • 結構使えてもらっている
    • 目指すのは生々しいAllAbout
    • ソーシャルな知識はたまると使える
    • 予想外な使い方をする人はいる

おもちゃ作り万歳!
社内政治とか頑張ってWEB事業やってるんだなって伝わってきました。

GREE
  • プロフィール
    • フロントエンドエンジニア
    • 中国で携帯サイトを2,3本
    • 教授にだまされ博士課程に
    • 教授とけんかしてドロップアウト
    • 家も決まらないままGREE入社
  • 博士課程
    • 人のためでなく自分のための論文を書く日々
    • 面白くなかった
  • 利用者に楽しんでもらいたい
  • GREESNS
    • モバイルゲームを展開
    • Not モバゲー!!
    • 間違えないでね
  • TVCMがんばってる
  • 毎週イベントしている(サービス上での話だと思う
  • 単純作業は小人に任せる
  • 便利なものは使っちゃえ
  • サボれるところはサボる
  • 80%の力で100%の作業をできるように
  • 楽しむ余裕を作る
  • 裏技を作ったり
  • ユーザーと一緒に楽しむ会社 GREE

イベントを毎週しているって言うのは知りませんでした。
どんなイベントなんだろう?
自分のクリノッペはサナギになってます。ちゃんとお世話しなきゃ。。

パネルディスカッション

GREEmixiクックパッド(前半)
  • 【お題】さーびすの予想外の使われ方
    • mixi
      • 基本的にサービス自体に幅があり、結構予想外な使われ方をしている
      • 一番話されている話題とは?
        • しりとりトピック
    • GREE
      • イデアは思いつくけど、手が追いつかないときがある
      • ユーザーがどんどん思いついて、議論してくれる
        • ハコニワ+くりのっぺのようなイメージを2次創作してくれる
    • クックパッド
      • レシピが基本だけど料理という幅でコミットしてくれるユーザーがいる
      • ストローを使ってかにかまを作る
  • 【お題】個人的に今注目のサービス

司会者のクックパッドさんへの扱いがひどかったw

  • 【お題】俺2.0
    • mixi(2名)
      • 「時間、時系列」を軸にデータの活用を見いだしたい
      • wifiでつながりたい」(これが強烈すぎて何したいか覚えてない)
@nifty + 楽天 + yahoo + livedoor
  • 【お題】うれしかったゆーざーさん
    • livedoor
      • スタッフのことばっかみているユーザーがいる
    • yahoo
      • 動画サービスをリリースした
      • ユーザーが使ってくれているのがうれしかった
    • 楽天
      • 経営が上向いた!といってくれるユーザがいた
    • @nifty
      • まったくよめない、数字でしかつたわってこない
  • 【お題】サービス予想外の使われ方
    • livedoor
      • クリップ
      • クリップのページに広告をつけられる(ユーザー)
      • ついてる広告のページをクリップして広告でコミュニケーションをしていた

あまりメモれなかったorz
この組み合わせも珍しくおもしろかった。

まとめ

  • これだけいろんな企業が集まったのはすごい
  • 参加している企業の空気が伝わってきた。
  • お酒飲みながらLTっていいね。
  • 出演者のお酒の量はほどほどに。
  • 設備はしっかりしてた。
  • 会場に行くのに迷子になったorz
  • 内容的にはWEB業界を目指している人とかが面白かったと思う

第2回も楽しみにしています!!

iPhoneからネットプリント(セブンで印刷できるサービス)を利用できるようにする『NP4i』を公開しました

http://d.hatena.ne.jp/takimo/20081230/1230636631

先日のエントリーで検証していた「 iPhoneからネットプリント(セブンで印刷できるサービス)を利用できるようにしてみた」というエントリーに沢山の反響をいただき「使いたい」という声があったので他の方が利用できるような形で公開してみることにしました。
いろんな意見をいただきながら改善して行くつもりですが、野良ツールなので突如提供を停止する可能性があることはご理解ください。

NP4i
http://takimo.net/np4i/
iPhoneからネットプリントを利用できるようにする
ブックマークレットを押してから登録には数十秒(20−30秒)ほどかかります。

いくつか注意(問題)があるのでそこをふまえた上で利用してください。

テストが不十分

他の人の印刷物が自分の中に紛れ込む…なんてものはないとは思うのですが多人数で利用した時などのテストができていません。(PC版safariではやりましたが
これはテスターを募集してやろうかと思ったのですが、公開して最初はテストみたいな使い方をしてもらえるだろうと甘い考えをしています。
(実機を使ったテストとか大変なのがよくわかりました><

自分も使いたいツールなので改善していく所存です、最初はテストのつもりで利用していただければ幸いです。
使えたら「使えたよ!」ってコメントしていただけると嬉しいです。

サーバーの機能的にセキュアに提供できない

仕組み的にユーザーから印刷したいページのURLを教えてもらうのはもちろんのことですが、その他にネットプリントにユーザーの代わりにジョブを登録しなければ行けないのでネットプリントのユーザーIDとパスワード、予約番号を通知してほしいメールアドレスを毎回サーバーに渡すことになります。(本当はOAuthとかあるとうれしい…

そのユーザーとサーバーとのやり取りを本来ならSSL通信を使って行うのがセキュアだと思うのですが、サーバーの機能的(レンタルプラン)にSSLを利用することができません。*1

なので、Wifi等の公衆無線LAN経由での使用はせず、3G回線を利用したほうがセキュアだと思います。*2

ブックマークレットにIDとパスワードとメールアドレスが記載される

iPhoneでログインを簡単にするブックマークレットとか出回ってますが、あれらと同じような感じです。
この方法の問題点としてiPhoneを紛失するとIDとパスワードメールアドレスがばれてしまう可能性があります。

これのiPhone版だと思って作ってます。
http://www.hirax.net/dekirukana8/7_11print/index.html

*1:SSLの使えるプランにしろよバカ!というのは最もなのですがいかんせん5千円ぐらいしてしまうのでちょっと手が出せません。。。ごめんなさい。
めちゃくちゃいろんな人が利用するというのであれば考えものかなと思ってます。

*2:公衆無線LANは暗号化されていなかったら簡単に通信内容を盗聴できます

iPhoneからネットプリント(セブンで印刷できるサービス)を利用できるようにしてみた

公開しました。
iPhoneからネットプリントを利用できるようにする『NP4i』を公開しました
http://d.hatena.ne.jp/takimo/20090104/1231036140

これで何が出来るかって?

外出先でブラウジングしていて気になったサイト(ドキュメント)をその場で印刷できる

これは結構便利。iPhoneで出来るとこが結構重要。

ネットプリントって?

インターネットを介してネットプリントセンターに登録した文書ファイルが、全国のセブンイレブン店頭のコピー機からプリントできるサービス。
https://www.printing.ne.jp/

仕組み

※ かなり勢いで作ってみたので(検証目的だった)とても恥ずかしいコードになっているからコードはまだ公開しない。

動画で撮ったんだけどYoutubeにあげるとなぜか4秒までしか再生できないorz

試しに印刷したiPhoneiPod touch ラボ


予約番号を入れて印刷確認画面


印刷して出てきたところ


印刷物

120円で印刷できた(カラー2枚)!!

展望/希望

許されるなら、他の人も使えるように実装して行くつもり。
本当は本家(ネットプリント)がそのようなインターフェースを作ってほしい。

mixiの絵文字でメリークリスマス

触発されて置き換えてみただけ!

Skype
http://labs.cybozu.co.jp/blog/takesako/2008/12/skype-merry-christmas.html

[m:184][m:66][m:184][m:184][m:29][m:150][m:150][m:29][m:184][m:184][m:66][m:184]
[m:66][m:184][m:66][m:29][m:150][m:150][m:150][m:150][m:29][m:66][m:184][m:66]
[m:184][m:46][m:29][m:150][m:150][m:77][m:150][m:150][m:150][m:29][m:46][m:184]
[m:46][m:29][m:150][m:150][m:150][m:150][m:150][m:150][m:77][m:150][m:29][m:46]
[m:29][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:29]
[m:46][m:48][m:46][m:48][m:46][m:150][m:150][m:46][m:48][m:46][m:48][m:46]
[m:48][m:46][m:48][m:46][m:150][m:150][m:150][m:150][m:46][m:48][m:46][m:48]
[m:46][m:48][m:46][m:150][m:77][m:150][m:150][m:77][m:150][m:46][m:48][m:46]
[m:48][m:46][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:48][m:46]
[m:46][m:150][m:150][m:77][m:150][m:150][m:77][m:150][m:150][m:77][m:150][m:46]
[m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150]
[m:46][m:48][m:46][m:48][m:46][m:150][m:150][m:46][m:48][m:46][m:48][m:46]
[m:48][m:46][m:48][m:46][m:150][m:150][m:77][m:150][m:46][m:48][m:46][m:48]
[m:46][m:48][m:46][m:150][m:150][m:150][m:150][m:150][m:150][m:46][m:48][m:46]
[m:48][m:46][m:150][m:150][m:77][m:150][m:150][m:150][m:150][m:150][m:48][m:46]
[m:46][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:77][m:150][m:150][m:46]
[m:150][m:150][m:77][m:150][m:150][m:77][m:150][m:150][m:150][m:150][m:150][m:150]
[m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:150][m:77][m:150]
[m:150][m:150][m:150][m:150][m:24][m:24][m:24][m:24][m:150][m:150][m:150][m:150]
[m:19][m:119][m:119][m:119][m:24][m:24][m:24][m:24][m:119][m:119][m:119][m:19]
[m:119][m:19][m:119][m:119][m:24][m:24][m:24][m:24][m:119][m:119][m:19][m:119]
[m:119][m:119][m:19][m:119][m:24][m:24][m:24][m:24][m:119][m:19][m:119][m:119]
[m:119][m:119][m:119][m:19][m:24][m:24][m:24][m:24][m:19][m:119][m:119][m:119]
[m:230][m:230][m:230][m:230][m:24][m:24][m:24][m:24][m:230][m:230][m:230][m:230]

FlashPlayer10がもっと評価されるべき5つの理由

Kitasando.asにこっそり参加していたtakimoです。
タイトルはホットエントリーメーカーで作りました。ごめんなさい。ごめんなさい。ごめんなさい。
5個も理由書きません。


さてさて、ryo_katsumaさんのエントリーのFlashP2P通信ができるという話でもりあがってますね!
(ファイル共有はメモリやその他の問題で実装されるか不明ですが

Flash Player上でP2P通信ができるRTMFPについて
http://blog.katsuma.tv/2008/12/about_rtmfp.html

そのブクマの中でセキュリティを気にされている方がおり、自分もても気になったので調べてみました。

※自分だけで調べたので鵜呑みにしないでください!!!!
間違っている部分がありましたらご指摘していただければ幸いです。

大前提:FlashPlayer10でP2P機能が使える

FlashPlayerをアップデートしてない人は使えません。
2008/10/15日から配布が開始されています。

セキュリティの向上を図ったFlashPlayer10

Adobe Flash Player10.0 では、様々な新機能や拡張機能が提供されるほかに、Flash Playerの従来からの動作が一部変更されます。この変更に伴って、セキュリティルールがより厳格になり、そのルールに準拠するために既存のコンテンツの更新が必要になる場合があります。また、セキュリティルールの変更に伴って、以前は使用できなかった機能や制限されていた機能にアクセスできる場合もあります。
http://www.adobe.com/jp/devnet/flashplayer/articles/fplayer10_security_changes.html

新機能で注目なのは3D表現、テキスト(音楽)エンジン、とP2Pですかね?(あまり自分はわかってない、、、)
機能を追加したので、安全に使えるようにセキュリティ対策が施されたということですね。

ファイルアップロードはユーザーのイベントなしでは出来ない

Flash Player 9では、ActionScriptによってアップロードとダウンロードをいつでも行うことができました。Flash Player 10では、FileReference.browse操作とFileReference.download操作は、ユーザ操作によってトリガされたActionScriptを通じてのみ開始できます。これには、マウスのクリックやキーボード入力などの操作が含まれます。
http://www.adobe.com/jp/devnet/flashplayer/articles/fplayer10_security_changes_02.html#head3

これがあるということは簡単にファイル共有が出来るようではなさそうですね(セキュリティポリシー的に)


この他にもセキュリティ周りはユーザーのアクションなしにFlashPlayerが動くことがなくなるようになっているものもあります。