iPhoneの位置情報とmixiアプリを連携してみた
iPhone OS 3.0からsafariのGeoLocationAPIがサポートされました。このAPIを使用するとjavascriptからiPhoneのGPS機能を使用することが出来ます。
今回はその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/1238368707Web2.0 中の人ナイトへ行ってきた - ただの独り言なんだからねっ!
http://d.hatena.ne.jp/ruuipon/20090329しがないSEの勉強記:Web2.0中の人ナイトに行って来た - livedoor Blog(ブログ)
http://sg.livedoor.biz/archives/541064.html
WEBサービストークライブ(各社代表エンジニア)
(追記)
Livedoor(http://livedoor.jp/)
このLTが見れてなかったみたい。。
ごめんなさい。
クックパッド(http://cookpad.com/)
- 600万UU
- かなり少ないエンジニアで回している
- このライブの打ち合わせのとき料理が振る舞われたらしい。(すげぇ
ばたばたしててあまりめもれなかったorz
でも、クックパッドにとても興味を持った。
ぜひ遊びに行ってみたい!!!
mixi(http://mixi.jp)
- 萌え巫女バイナリアン、性癖をgoogleにあばかれた男
- ODF(Googleの20%ルールみたいなもの)を使って「オンラインコーヒーメーカー萌香」を開発
- 光センサーを使ってコーヒーメーカーが出来上がったランプをキャッチして、その通知をtwitterやIRCになげる
- 詳しくは、オンラインコーヒーメーカー「萌香たん」とはじめるドキドキ☆コーヒーブレイク(http://alpha.mixi.co.jp/blog/?p=386)
- このODFの裏テーマとして「上場企業でどれだけ無茶なことができるか」があった
- 上司は背中を押してくれて、出すことができた。
最後のCMはあほかとw
@nifty(http://www.nifty.com/)
- 120%という制度との付き合い方
- プロフィール
- ニューラルネットを研究
- 業務
- ポータル編成部 通常業務+おもちゃ開発
- 120%ルールとは?
- 100%したら20%していい
- だめなのところ
- まったくの新規案件は20%として認められない
- 趣味の領域
- 作ったもの CheckList
- 要件
- 一連の手続きを含むチェックリストを簡単に作成
- デザイン当ててもらえなかったorz
- 結構使えてもらっている
- 目指すのは生々しいAllAbout
- ソーシャルな知識はたまると使える
- 予想外な使い方をする人はいる
- 要件
おもちゃ作り万歳!
社内政治とか頑張ってWEB事業やってるんだなって伝わってきました。
GREE
- プロフィール
- 博士課程
- 人のためでなく自分のための論文を書く日々
- 面白くなかった
- 利用者に楽しんでもらいたい
- 教授とけんかしてドロップアウト
- GREEはSNS
- モバイルゲームを展開
- Not モバゲー!!
- 間違えないでね
- TVCMがんばってる
- 毎週イベントしている(サービス上での話だと思う
- 単純作業は小人に任せる
- 便利なものは使っちゃえ
- サボれるところはサボる
- 80%の力で100%の作業をできるように
- 楽しむ余裕を作る
裏技を作ったり- ユーザーと一緒に楽しむ会社 GREE!
イベントを毎週しているって言うのは知りませんでした。
どんなイベントなんだろう?
自分のクリノッペはサナギになってます。ちゃんとお世話しなきゃ。。
まとめ
- これだけいろんな企業が集まったのはすごい
- 参加している企業の空気が伝わってきた。
- お酒飲みながら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
iPhoneからネットプリント(セブンで印刷できるサービス)を利用できるようにしてみた
公開しました。
iPhoneからネットプリントを利用できるようにする『NP4i』を公開しました
http://d.hatena.ne.jp/takimo/20090104/1231036140
ネットプリントって?
インターネットを介してネットプリントセンターに登録した文書ファイルが、全国のセブンイレブン店頭のコピー機からプリントできるサービス。
https://www.printing.ne.jp/
仕組み
※ かなり勢いで作ってみたので(検証目的だった)とても恥ずかしいコードになっているからコードはまだ公開しない。
- ユーザー側は今見ているページを専用のブックマークレットを起動するだけで、ネットプリントのジョブに登録されて、予約番号がかかれたメール(これはネットプリント側の標準機能)が届いくので、それをセブンのコピー機で入力して印刷するような利用の仕方を想定
- 裏側ではサイトのサムネイルをPDFで提供していただいているHeartRails Capture(http://capture.heartrails.com/)のAPIを利用し、ユーザーから指定されたページをPDF化して、WWW::Mechanaizeを使ってネットプリントのジョブに登録
動画で撮ったんだけどYoutubeにあげるとなぜか4秒までしか再生できないorz
試しに印刷したiPhone・iPod touch ラボ
展望/希望
許されるなら、他の人も使えるように実装して行くつもり。
本当は本家(ネットプリント)がそのようなインターフェースを作ってほしい。
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さんのエントリーのFlashでP2P通信ができるという話でもりあがってますね!
(ファイル共有はメモリやその他の問題で実装されるか不明ですが
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が動くことがなくなるようになっているものもあります。