表示はしたくないけどSelectタグの機能(ドラムロール)を使いたい場合

Androidのことも踏まえ追記しました

例えばiPhoneなどで独自Selectorを作りたい場合があると思います。
そういうときどうしたらいいかを考えてみました。

フォーカスを当てるには以下の条件をクリアする必要があります。

  • 表示されている状態(display:"")であること
  • なおかつユーザーのイベントにフックしなければいけない
    • ex. clickイベント

ここから追記

どうも上記方法ではAndroidでは対応できない。
大変困った…が

hiroki先生に「透明にしてみればいいじゃん」と言われたのでやってみた。

できた！
うまくしたのボタン的な要素の上に来るようにCSSを頑張れば怖い物無しになりそうだ。

「世界初！NFCを使ったプロポーズ」を見てきた

mixiのイベント後の懇親会でサプライズが！
http://twitter.com/#!/search/%23mixi_engineers

結ばれた@kyoro353さん@monja415さんおめでとうございます！
見守る側もどきどきすぎてやばかったです。

二人が付き合う前からいろいろあったことを知っている身としてはとても嬉しく思っています。
是非、２人してイイ物を作っていってください！

http://www.ustream.tv/recorded/13060057

お祝いはNFCでいいんだろうか。

Titaniumで簡単にmixi Graph APIを使う方法

mixiGraphAPIって？

iPhoneやAndroidといった外部環境からOAuth認証をへてmixiの機能を利用することができるようになるものです。
例えばボイスの一覧の取得・投稿、フォトの投稿・閲覧といった機能を利用したアプリケーションを構築できます。

http://developer.mixi.co.jp/connect/mixi_graph_api

個人開発者でも利用可能になったみたい！

http://developer.mixi.co.jp/news/news_platform/12028

用意するもの

  • Developer登録とアプリケーションの設定
    • ConsumerKey
    • ConsumerSecret
    • RedirectURI

https://sap.mixi.jp/connect_consumer.pl

利用したいスコープを調べる

利用したい権限を絞る、選択することが出来ます。
ボイスの一覧をとりたければ「r_voice」
http://developer.mixi.co.jp/connect/mixi_graph_api/api_auth

app.jsのサンプル

以下の部分を埋めて試してみたください

var CONSUMER_KEY = "";
var CONSUMER_SECRET = "";
var REDIRECT_URL = "";

認証が終わると、_access_tokenにアクセストークンが入ってくるのでそれを使って色々試せると思います！
初期ではTab2でボイスのタイムラインを取得して表示させています。
UIまわりとか適当でごめんなさい。

もし使用したいスコープを変えるのであれば以下のように複数のスコープを設定できます

var SCOPE = "r_voice w_voice";

https://gist.github.com/750866

やっていること

個人開発者がmixi Graph APIのOAuth認証をするためには現状Web Server Flowを利用するのでWebUIViewを利用し、ブラウザのイベントをListenしてうまいことやっています。

JavaScriptのドキュメントフォーマットにはどんなものがあるの？

ちょっと必要そうなので簡単に調べてみた。

JSDoc(Perl)

JsDocToolkit(Rhino on Java)

JSDocはやめたほうがよさそう

  • prototypeベースのコードを解釈(+ 手動によるClassとメンバーの紐付けも)できないかも
    • うそ、できた
  • おそらくアノテーションできない
    • @typeの表現がJsDocToolkitと違う

JsDocToolkit使った方が良さそう

JsDocToolkit

  • ドキュメント記述形式はJavaDocベース
  • コアの構文解析機能とテンプレート機能が別になっているので出力するもののデザインを変更することができる
  • Rhino上で解釈できるJSコードであれば最小限の記述だけでドキュメントが生成できる

ドキュメントを生成するまでの簡単な流れ

  • ドキュメントを書く
  • 生成する
    • @win java -jar jsrun.jar app\run.js c:\example\js\ -t=templates\jsdoc -d=c:\out\example -a
    • @linux java -jar jsrun.jar app/run.js test.js -t=templates/jsdoc -d=sample -a
  • ブラウザで見る

ライブラリを使っている場合

疑問

  • Prototypeで書かれたものってClosureCompilerでちゃんとアノテーションされるの？？

[JavaScript]Geolocation APIのおさらい

どんな情報が取れるのか？

latitude　緯度
longitude　経度
altitude　高度
accuracy　緯度経度の精度
altitudeAccuracy　高度の精度
heading　方角
speed　速度

使用可能かのチェック

if(navigator.geolocation){
/** available **/
}else{
/** not support **/
}

getCurrentPosition

navigator.geolocation.getCurrentPosition(function(position){
    console.log("緯度:" + position.coords.latitude);
    console.log("経度:" + position.coords.longitude);
    console.log("緯度経度の精度:" + position.coords.accuracy);
});

watchPosition, clearWatch

var watchID = navigator.geolocation.watchPosition(function(position){
    console.log("緯度:" + position.coords.latitude);
    console.log("経度:" + position.coords.longitude);
    console.log("緯度経度の精度:" + position.coords.accuracy);
});

document.querySelector('#cancelLocationWatch').addEventlistener(function(e){
    navigator.geolocation.clearWatch(watchID);
});

取得する位置情報の精度をあげる

navigator.geolocation.getCurrentPosition(function(position){
    console.log("緯度:" + position.coords.latitude);
    console.log("経度:" + position.coords.longitude);
    console.log("緯度経度の精度:" + position.coords.accuracy);
},function(e){
    console.log("error");
},{enableHighAccuracy=true});

結構誤差が少なくなるみたい。
https://www.gunjou.co.jp/2010/08/22/google-maps-api-with-gps-navi-7.html

端末によって取得できる情報に差異がある

要調査