2011年2月 :: Archives

昨年後半くらいから人気がじわじわと出てきた「Instagram」という名のiPhone用カメラアプリ。
その公式APIが出るという噂を聞いたのが先月くらい。

そして、今月中旬にデベロッパー登録の受付が始まりいつになったら使えるのかと待ちわびていたのですが、先日たまたまデベロッパー用ページにアクセスしたら既にアプリ登録が出来るようになっていたので早速試しに作ってみました。
※注意 2011/2/26現在まだプライベートベータ版です。


この地図のマーカーをクリックするとその場所で投稿された写真をスライドショーで眺めることができます。
地図を移動させれば世界中の写真を観ることも可能です。
（写真をクリックするとInstagramの個別ページに飛びます。）

このウェブアプリを作るためにどのようなことをやったかというと

1.Instagram APIのデベロッパー管理画面でアプリを登録しクライアントキー等を取得
2.サーバサイドのスクリプトでOAuth認証をクリアしてアクセストークンを取得
3.LOCATIONS APIを使って、経度緯度から半径1000m以内で登録された位置情報IDを取得。
4.位置情報から地図のマーカーをセット。
5.マーカーがクリックされた時、位置情報IDからその場所から投稿された写真データを取得。
6.写真データをスライド表示。

みたいな感じです。

OAuthに関してはcurl使ってごにょごにょやったら突破出来ました。
Twitterで使っているOAuth1.0と比べるとInstagram APIのOAuth2.0はシンプルで使いやすい感じがします。

Instagramみたいに写真ありきでここまで流行ったアプリのAPIってあまりまだ無い気もするのでこれから色々出来そうですね。
まだサーバもちょっと重い気がするので、今後の機能拡張も含め期待してます。
（APIの制限は勘弁ですが。。）
※API制限ありました。1アクセストークンまたは1クライアントIDにつき、1時間5000アクセスまでとのこと。ただしメールでの申請により許可されれば制限をゆるくできるらしい。（2011/2/25現在）

ちなみにこの素敵なスライドショーは弊社フロントエンドエンジニアの@keiskey氏によるものです。

また何か良いアイデアを思いついたら紹介したいと思います。

というわけで、ちょっとだけ使いやすくしました。
まだ付けたい機能があるので、おいおい追加していきます。

使い方は以前の記事「jQueryプラグインなスライダー slider.js」を参考ください。

基本的には、以下のような感じで使えるお手軽仕様です。

	<div class="slideFrame" id="slide-00">
		<ul class="slideGuide">
			<li class="slideCell">セル</li>
			<li class="slideCell">セル</li>
		</ul>
	</div>

	<script>
		$("#slide-00").slider();
	</script>

"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。
･･･最近のブラウザは。

rgba()に対応してないブラウザ、まぁ主にアレですが･･･にもオリジナルな素晴らしい機能filter: alpha()があります。
filter: alpha(opacity=50)とやると要素の不透明度が50％になるというやつです。
0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。

しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。
とても面倒見が良いです。

しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。

これを使って背景にグラデーションしないグラデーションを適用してやるのです。

filter: progid:DXImageTransform.Microsoft.Gradient()
progidのコロンの後に空白を入れないように注意！

引数は以下の通り

• Enabled = 0 / 1
  1(true)でグラデーション機能の有効化。デフォルトは1。
• GradientType = 0 / 1
  グラデーションの方向。0は縦方向。1は横方向。
• StartColorStr = #00000000～#FFFFFFFF
  なんかちょっと長いここが今回のポイント！
  グラデーションの開始の透明度＋色をaRGB形式で指定します。aは00(透明)～FF(不透明)
• EndColorStr = #00000000～#FFFFFFFF
  グラデーションの終了の透明度＋色。

// 白の半透明
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
background-color: rgba(255, 255, 255, 0.5);

IEはrgba()の指定を無視するので、これで「背景だけに透過」が適用されます。めでたしめでたし。

Android 1.6（アップデートしていないExperia等）において、CSS Spriteで設定した画像の表示がボヤーッとボケたようになる現象を確認しました。
結論から言うと、これは背景に指定した画像の縦横サイズが一定以上の大きさになった際に起こります。つまり、縦横が大きすぎる背景画像は正しくロードされないよ、ということです。
検証のためにデモを作成しました。（CSS Spriteではありませんが）

Android 1.6で大きな画像を正しくロードできないデモ

デモでは以下の4つのサイズのJPEG画像を背景に指定してみました。

• 768×480px
• 1024×640px
• 1280×800px
• 1680×1050px

EXPERIAのスクリーンショットで分かるように、1680×1050pxではかなり画像が乱れています。仕様書を確認できたわけではないので詳細な仕様は分かりませんが、どうやら縦1000pxを超えた辺りから怪しくなるようです。また雰囲気的に、ファイルサイズは関係ないように思います。

もうお気づきかと思いますが対策はシンプルで、画像の縦横サイズを小さくするだけです。CSS Sprite画像の場合は2つに分割するなどして、ファイル1つ辺りの縦横サイズを小さくします。
EXPERIAなどはAndroid 2.1へのアップデートが公開されていますので、Android 1.6のデバイスはこれから減少していくとは思いますが、auのIS01などは依然Android 1.6のままですのでこれからも検証の際にこのような現象にでくわす機会があるかもしれません。

最近ようやくSassを使い始めたわけですが、いちいちコマンドラインでオプションを設定するのがめんどくさい・・・と思い、デフォルトのオプションを変更する方法を試行錯誤してみた結果、できました。

例えば、オプション --style のデフォルトは nested ですが、これを --expanded に変更してみます。
まずディレクトリ C:\Ruby\lib\ruby\gems\1.9.1\gems\haml-3.0.25\lib\sass\plugin にある configuration.rb をテキストエディタで開きます。ディレクトリについてはRubyをインストールしたディレクトリに合わせて各自読み替えてください。

configuration.rb の末尾に以下のようにオプションを追加し、保存します。

Sass::Plugin.options[:style] = :expanded

既にコマンドラインでSassを使っている状況でしたら、一旦シェルを閉じて、再起動しましょう。もうこれで、デフォルトのオプションが変更されています。

以下、参考リンクです。
Windows環境でのSassの導入については@hamashunさんの記事が大変参考になります。

• hamashun.me : Windows PC に Ruby と Sass を導入する方法
• File: SASS_REFERENCE - Options
• File: SASS_REFERENCE - Output Style