Kinopyo Blog
プログラマとしてRuby, Rails, iPhone, iPad,Macなどなどと向き合う日々のログポース
Archive for the ‘Webサービス’ Category
d.me メール送るだけでDeliciousにブックマークできるようになった
2011年11月14日
Gmailを常に全員返信に設定
2011年07月29日
ビジネスでもWeb版のGmailを使えるようになりましたが、しょっちゅう「全員に返信」を忘れてしまいます。
それを防ぐために常に全員返信するように設定しておきましょう。Gmail右上の設定-> Labs-> 常に全員に返信 を有効にする で完了。
自分がLikeした画像が見れるInstagram Web App – Inkstagram
2011年05月30日
Inkstagram is also a web app for browsing Instagram photos. You can view photos in small, medium or full sizes while browsing your feed, popular photos or your own photos.
We especially appreciate the “My Likes” view which showcases all of the photos that you’ve liked on Instagram.
目玉機能というえばこの”My Likes”ですね！自分が”Like”した画像が一覧で見れます！ちょっとこういうの欲しかったー！
他にも写真へのコメントや、Like、Popular Feedの表示など、写真アップロードを除いて全部できます。
サイトはこちら：http://inkstagram.com/
Gavatar – グローバルなアバターウェブサービス
2009年12月17日
Gravatar とは、ブログに投稿したりコメントしたりした時に、
どのサイトでもあなたの名前の横に表示される画像です。
Gravatarはメールアドレスをキーとしたアバター管理Webサービスです。
自分のアバターをGravatarに登録すれば他のサイトでも汎用的に使えるんです。
サイトごとにアバターをアップロードする手間がなくなるので結構便利です。
例えばこのブログでもGravatarが使えるので、
コメントの際にメールアドレスを入力すればGravatarで登録したアバターが表示されます。
公式サイト
一回登録し、アバターをアップロードしてください。
複数のアバターをアップロードした場合はどのアバターを使うか選択できます。
良かったらGravatarに登録し、ここにコメントを入れてみてください。
メールアドレスが同じであればGravatarに登録したアバターが表示されるはずです。
Same-Originポリシー勉強メモ
2009年11月23日
gihyoサイトの「ここが危ない！Web2.0のセキュリティ」連載の第2回：「Same-Originポリシーと迂回技術」の勉強メモです。
定義
他のドメインのサイトへはリクエストを送信できない制限のことをSame-Originポリシーと呼びます。同じドメインであってもポート番号やプロトコル（HTTPとHTTPSなど）が異なれば，異なるサイト（クロスドメイン）とみなされアクセスできません。クロスドメインアクセスは機能として実装されていないのではなく，セキュリティ上の理由から禁止されているそうです。
必要性
俺があの黒の攻撃者とし、攻撃目標がユーザのメールアカウント情報だとします。もしクロスドメインにアクセスする制限がなければ、事前に用意したスクリプトで(urlをメールサーバに設定)メールアカウントの情報が取得できるようになってしまいます。(この辺りはCookieの話が出てきます)
ウェブの基本ルール
Ajaxだけではなく、フレームやサブウインドウの情報にアクセスする場合などにも存在する
クロスドメインでデータを取得する方法
* リバースPorxy
* SCRIPTタグ（JSONP）
* Flash
* 画像
* スタイルシート
リバースProxy
データ提供サーバにとってユーザの身元は隠れているため、攻撃者に利用しやすい
ユーザの身元を確認しようとすると、ユーザ情報を扱わなければならない
ユーザ情報–>サーバ–>データ提供サーバ
JSONPの動作原理、jQueryでJSONPを利用
2009年11月21日
前回の記事の続きとしてJSONPを勉強しました。
XMLHttpRequestはセキュリティ上の制限により、
クロスドメインの通信ができないです。
でもウェブサービスのようなどうしてもクロスドメインで通信したい場合があります。
その時の手段してあげられるのがこのScriptタグです。
(他の手段としてiframeやflashとリバースプロキシがあるそうです)
JSONPとは
これを一番分かりやすく説明してくれたのははてなキーワードだと思います。
JSON with paddingの略
Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。
一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用のAPIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数(callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。
ただし、Same-Originポリシーが存在しないため、機密情報をAPIに含める際には十分な注意が必要である。
動作原理
やはりソースコードで読むほうが早いだと思います。
以下gihyo.netからのサンプルコードです。
クライアント側
<html> <body> <script> function callback(x){ // コールバック関数を定義 alert(x["name"]); } </script> <script src="http://mail.example.com/json.dat"></script> </body> </html>
データ提供サーバ側が用意したJSON
json.datの中身
callback( { "name" : "Fukumori" } );
簡単まとめ
要はクライアント側で先にデータを扱うコールバック関数を定義
その名はデータの提供側とのコールバック関数名と一致する必要がある
scriptタグでデータ提供サーバのデータをインポート
すると先に用意したコールバック関数が走ってデータを処理する
もっと詳しい動作原理とセキュリティはgihyoの特集を参照してください。
とても分かりやすいです。おすすめ！
ここが危ない！Web2.0のセキュリティ：第3回 JSONPでのクロスドメインアクセス｜gihyo.jp … 技術評論社
jQueryでJSONPを使う
jQueryのAjaxメソッドには$.getJSONがあります。
このメソッドはjQuery1.2からJSONPも対応したようです。
As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback.
利用方法はurlの最後に”?”付きのコールバックパラメータを追加することです。
例えば”example.com?callback=?”こんな感じです。
callbackの値は指定しなくてもよいみたい、
jQueryが自動で変換してくれます。
ただしコールバックのパラメータ名はデータ提供側によって異なるかもしれません。
例えばヤフーPipesは”_callback=?”を要求してるそうです。
MozillaのGoogle Wave : Raindrop
2009年10月30日
Mozilla Foundationで「Raindrop」という実験を始めたとの記事がありました。オープンなWeb技術を利用して、電子メール、SNS、「Twitter」、友人のブログなどのメッセージを管理するものです。
コミュニケーションを容易にするという、Google Waveとよく似てる意味で、Googleに対抗する存在とも言われてます。
Raindrop は、小規模の Web サーバーを使って異なるソース (Eメール、Twitter、RSS フィード) からユーザーのメッセージを取り込み、インテリジェンス処理で重要な部分を抜き出し、ユーザーが自分の好きな近代的な Web ブラウザでメッセージ操作を行なえるようにする。
こんな興味深い内容で、私はRaindropの公式サイトを訪ねることになりました。
英語の資料だけなんですが、Vimeoでの動画があるので、
一応それで直感的にRaindropが何か少しはわかるでしょう。
この動画で紹介したのはRaindropのデザイン・イテレーション1です。
画面の左側がメッセージの表示で、
右側がメニューみたいな感じです。
このレイアウトはまだ確定してなく、正式リリース時の変更はあり得るといってました。
便利な操作性がこの動画で表現されました。
上下のキーボードでメッセージの切り替えと、
左右のキーボードで返信や取り消しが自由にできます。
続いてデザイン・イテレーション2を見てみましょう。
デザイン1ではメッセージが1カラムになってることに対し、
デザイン2では最初3カラムで表示されてます。
それと幅の調整でメッセージのレイアウトもかわってきます。
もっと詳しい情報はRaindropの公式サイトをお訪ねください。
読書を記録、管理：読書メーター
2009年10月28日
今回紹介するのは読書メーターです。
簡単にいうと、読書を記録、管理するサイトです。
FC2のブログアプリケーションにも似た感じの読書カレンダーがありますが、
比較してみて、やはり読書メーターのほうが機能も充実し、面白いと思います。
まずユーザ登録はFC2や、はてな、そしてmixiのIDでそのままログインできます。
そして自分が読んだ本をどんどん登録すると、面白いグラフができてますよ。
本の追加は以下の4種類あり、自分が今までの「実績」がすぐわかります。
- 読んだ本に追加
- 読んでる本に追加
- 積読本に追加 ※持っているけど読んでいない本など
- 読みたい本に追加 ※持っていない読みたい本など
コメントはもちろん入力でき、さらに本を読んでる、読んだ人の人数まで数えてくれます。
本の追加、コメントする時は自動でTwitterにも投稿できます。
本はページ数まで把握して、グラフで自分がどれほどのページを読み終わったかも見れます。
私はログインしてから一気に全部の本を追加しました。
ほかにも読友、相性、職本、お気に入り、コミュニティ、ブログパーツなどの
機能が充実してます。
相性や職本などのジャンルはなかなかアイディアのいい機能じゃないですか。
ぜひ試してみてください。