Facebook のプロフィール写真をウェブカメラを経由でアップロードしてみた。ウェブカメラから multipart/form-data で静止画をアップロードできるライブラリを探しています。

こんにちは。Nobuhiro Nakajima です。

Facebook のプロフィール写真は、ウェブカメラを経由してウェブブラウザからアップロードできるらしいので試してみました。

手持ちのウェブカメラは マイクロソフト ウェブカメラ LifeCam VX-800 JSD-00006 です。↓これ。今なら 1,000 円くらいで入手できます。



プロフィール写真の設定ページから写真を撮るボタンをクリックすると、ポップアップが開きます。許可をクリックすると、ウェブカメラの映像が移り出すので、カメラボタンをクリックして、写真を撮ります。



すると、次のとおり、ウェブカメラで撮影した静止画がプロフィール写真として掲載されます。



ウェブカメラからの写真の撮影は Flash で実現されています。Flash 内で、ウェブカメラのストリームを扱い撮影のタイミングで静止画にして、サーバにアップロードするという仕組みのようです。

同じことをやってみたくて、ライブラリなどを探していると、いくつか発見できました。例えば、これとか。

jQuery webcam plugin - Website and Application Intelligence

This plugin provides three different modes to access a webcam through a small API directly with JavaScript - or more precisely jQuery.

ただ、今まで見つけたライブラリは、静止画のデータを HTTP POST の raw データとしてアップロードするものでした。これだと AppEngine の Blob Storage に直接アップロードできないのです。

ということで multipart/form-data でウェブカメラから静止画をアップロードできるライブラリを探しています。もしも、ご存じでしたらぜひ教えてください。

3arrows アップデート！ 無料プラン、独自ドメイン／専用環境プラン、OEM プランを追加しました。

3 月 1 日 （火）、企業やチーム向けのプライベートマイクロブログ、3arrows の料金表を改定しました。改定の主な内容は次の通りです。

無料プランの追加

3arrows を無料で利用できるプランを追加しました。今後、ユーザー数が 5 人以内の場合、3arrows は無料で利用できます。

独自ドメイン／専用環境プランの追加

3arrows を独自ドメイン、専用環境で利用できるプランを追加しました。セキュリティポリシー上、共用環境での利用が難しかったお客様でも、今後は独自ドメイン、専用環境で 3arrows を利用できます。（有料になります。）

OEM プランの追加

3arrows を OEM として、お客様のブランドで提供したり、お客様のサービスに組み込んで提供できるプランを追加しました。3arrows は柔軟で堅牢なアーキテクチャーの元で実装されているため、デザイン、機能ともにフルカスタマイズした上で提供することが可能です。

3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Google Apps Script の UrlFetch Services は 2Legged OAuth に対応してないっぽいので自前でやってみた

こんにちは。なかじまんです。

Google Apps Script の UrlFetch Services は 2Legged OAuth に対応してないっぽいので自前でやってみた。ちなみに 3Legged OAuth は標準でできるみたいです。

はじめに JavaScript の OAuth ライブラリ の内sha1.js と oauth.jp oauth.js を貼り付けます。そして、次のようにリクエストを署名して、UrlFetch Services でエンドポイントを叩きます。

以下の例では、Google Friend Connect の People API を呼び出して、Viewer (xoauth_requestor_id) のプロフィールを取得して、ニックネームを表示しています。

function myFunction() {

  var action = 'http://www.google.com/friendconnect/api/people/@me/@self';
  var accessor = { consumerSecret: '{consumerSecret}' };
  var message = { method: 'GET', action: action, parameters: {}, };

  OAuth.setParameter(message, 'oauth_consumer_key', '{oauth_consumer_key}');
  OAuth.setParameter(message, 'oauth_version', '1.0');
  OAuth.setParameter(message, 'oauth_timestamp', OAuth.timestamp());
  OAuth.setParameter(message, 'oauth_nonce', OAuth.nonce(6));
  OAuth.setParameter(message, 'xoauth_requestor_id', '18200614986198926446');

  OAuth.SignatureMethod.sign(message, accessor);

  var url = OAuth.addToURL(action, message.parameters);

  var response = UrlFetchApp.fetch(url, {method: message.method });
  if (response.getResponseCode() == 200) {
    var res = JSON.parse(response.getContentText());
    Browser.msgBox(res.entry.displayName);
  }
}

今回は Query String で試しましたが Authorization Header でも大丈夫なはず。

ということで Google Apps Script から 2Legged OAuth できちゃいました。

3arrows アップデート！ お気に入り機能とダイジェストメール機能を追加しました。

2 月 25 日 （金）、企業やチーム向けのプライベートマイクロブログ、3arrows をアップデートしました。アップデートの主な内容は次の通りです。

お気に入り機能の追加

マイクロブログの各ステータスをお気に入りに追加できるようになりました。

各ステータスの返信、削除と並ぶ 「お気に入り」 メニューをクリックすると、そのステータスをお気に入りに追加できます。また、自分以外のユーザーがステータスをお気に入りに追加した場合、ステータスの下部にお気に入りの合計人数を表示するようになりました。


なお、追加したお気に入りは上部メニューの 「お気に入り」 から一覧できます。


ダイジェストメール機能の追加

1 日 1 回、マイクロブログ上のコミュニケーションのダイジェストを、メールで配信するようになりました。今後、みなさまのご利用状況を踏まえ、オプション化等も検討していきます。


不具合の修正

マイクロブログの返信機能の不具合や Picasa Web Albums の https への対応等、いくつかの改修を実施しました。

全てのアプリケーションの更新をお願いします！

管理者の方は、コントロールパネルのアプリケーションタブから、全てのアプリケーションを更新してください。「更新する」 リンクをクリックすると、アプリケーションを更新できます。「最新」 と表示されれば更新の完了です。


3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Firefox の location.hash は自動デコードにも関わらず、制御コードはデコードしないとか知ってました?

こんばんは。なかじまんです。

Firefox の location.hash は、他のブラウザと異なり、URI デコードした結果を表すのは、よく知られていると思いますが、なんど制御コードに限ってデコードしない例外があるようです。試しているのは Firefox 3.6 です。

例えば、改行入りのテキストを location.hash で状態を保持しようとすると、改行コードは CR/LF にデコードされず、%0D%0A のままとなってしまいます。なんじゃこれ。何か勘違いしているのかなぁ。

試しに ASCII コードをぜんぶ試してみたところ、

for (var i = 0x0; i <= 0x7f; i++) {
  var hex = Number(i).toString(16);
  var ch = String.fromCharCode(i);
  location.href = '#' + encodeURIComponent(ch);
  console.log('0x' + hex + ': ' + location.hash);
}

制御コードは、デコードされないことを知りました。HTML や DOM の仕様にそぐわないからだろうか。それとも、脆弱性に関するものだろうか。

0x0: #%00
0x1: #%01
0x2: #%02
0x3: #%03
0x4: #%04
0x5: #%05
0x6: #%06
0x7: #%07
0x8: #%08
0x9: #%09
0xa: #%0A
0xb: #%0B
0xc: #%0C
0xd: #%0D
0xe: #%0E
0xf: #%0F
0x10: #%10
0x11: #%11
0x12: #%12
0x13: #%13
0x14: #%14
0x15: #%15
0x16: #%16
0x17: #%17
0x18: #%18
0x19: #%19
0x1a: #%1A
0x1b: #%1B
0x1c: #%1C
0x1d: #%1D
0x1e: #%1E
0x1f: #%1F
0x20: #
0x21: #!
0x22: #"
0x23: ##
0x24: #$
0x25: #%
0x26: #&
0x27: #'
0x28: #(
0x29: #)
0x2a: #*
0x2b: #+
0x2c: #,
0x2d: #-
0x2e: #.
0x2f: #/
0x30: #0
0x31: #1
0x32: #2
0x33: #3
0x34: #4
0x35: #5
0x36: #6
0x37: #7
0x38: #8
0x39: #9
0x3a: #:
0x3b: #;
0x3c: #<
0x3d: #=
0x3e: #>
0x3f: #?
0x40: #@
0x41: #A
0x42: #B
0x43: #C
0x44: #D
0x45: #E
0x46: #F
0x47: #G
0x48: #H
0x49: #I
0x4a: #J
0x4b: #K
0x4c: #L
0x4d: #M
0x4e: #N
0x4f: #O
0x50: #P
0x51: #Q
0x52: #R
0x53: #S
0x54: #T
0x55: #U
0x56: #V
0x57: #W
0x58: #X
0x59: #Y
0x5a: #Z
0x5b: #[
0x5c: #\
0x5d: #]
0x5e: #^
0x5f: #_
0x60: #`
0x61: #a
0x62: #b
0x63: #c
0x64: #d
0x65: #e
0x66: #f
0x67: #g
0x68: #h
0x69: #i
0x6a: #j
0x6b: #k
0x6c: #l
0x6d: #m
0x6e: #n
0x6f: #o
0x70: #p
0x71: #q
0x72: #r
0x73: #s
0x74: #t
0x75: #u
0x76: #v
0x77: #w
0x78: #x
0x79: #y
0x7a: #z
0x7b: #{
0x7c: #|
0x7d: #}
0x7e: #~
0x7f: #%7F

ただ、今日のウェブアプリの作り方からすると、タブや改行コードも含めて状態を保持して欲しいところでもあり、次のように location.href から hash を取り出せば解決しそうな気がするのですが、このようなアプローチをとっている解説が見つからないのはなぜだろう？

window.onhashchange = function() {
  var hash = firefox
    ? (location.href.split('#')[1] || '')
    : location.hash;  
}

参考にした情報などどなど。ただ、Firefox の仕様はどうなっているのかは分かりませんでした。

• window.location - MDC Doc Center
• Bug 483304 – location.hash getter returns the hash value unescaped ("%7C" turns into "|")

3arrows アップデート! カレンダーを利用できるようになりました。

2月16日(水)、企業やチーム向けのプライベートマイクロブログ、3arrows をアップデートしました。アップデートの主な内容は次の通りです。

カレンダーの追加

新しい標準アプリケーションとして、カレンダーを追加しました。

カレンダーの表示画面では、自分のカレンダーの他、フォローしている他のユーザーのカレンダーもまとめて閲覧することができます。


個々のスケジュールの表示画面では、スケジュールの詳細情報を閲覧することができます。スケジュールの詳細情報にはマイクロブログと連携するハッシュタグや、@ 記法によりユーザーへのリンクを含めることもできます。また、スケジュールにはコメントを付けることもできますので、この機能により会議の参加者をコメントで募ったり、会議の議事録をコメントで付けることもできます。（日報のアプリケーションでも同様にハッシュタグや @ 記法を利用することができます。）


また、既に Google カレンダーを利用されている場合には、Google カレンダーをインポートすることもできます。（最大 5 つのカレンダーまで）


次の画像は 「IT 勉強会」 の Google カレンダーをインポートした例です。


なお、日報のアプリケーションと同様に、カレンダーにおけるスケジュールの作成やスケジュールへのコメント等は、全てマイクロブログに通知されます。そのため、ユーザーはマイクロブログを通じてスケジュールを確認したり、また、マイクロブログを起点として、スケジュールについてのコミュニケーションを取ることができるようになっています。

メニューの整理

アプリケーションの右上のメニューを整理しました。今後もタスク管理やファイル共有等のアプリケーション、マイクロブログの検索機能等の追加を見込んでいますので、段階的にメニューの整理を続けていきます。


全てのアプリケーションの更新をお願いします！

管理者の方は、コントロールパネルのアプリケーションタブから、全てのアプリケーションを更新してください。「更新する」 リンクをクリックすると、アプリケーションを更新できます。「最新」 と表示されれば更新の完了です。


3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Amazon S3 でウェブサイトがホストできるようになったので移転してみた

こんにちは。なかじまんです。

ずっととある VPS を利用していて、料金がもったいないなぁと思いつつも、過去に作ったコンテンツを破棄するのもなんだしなーと放置していたウェブサイトがあったのですが、なんと Amazon S3 でウェブサイトがホストできるようになったので、さっそく移転してみました。

移転元のサイト

Postal Search APIs & Solutions
http://developmentor.lrlab.to/postal/

移転で捨てたこと

Perl5 による CGI がいくつかあったのですが、この機会に削除しました。また、Apache 固有の .ht ファイルも削除しました(もちろん不可視であるべきファイルも削除しました)。ので、正しく表示されないページやデッドリンクがありますが、そこはご愛敬で。

バケットの作成と設定

developmentor.lrlab.to という新バケットを作りました。バケット名は CNAME と同じにしないとダメです。ここは今までと同じ。

バケットの設定

AWS Management Console からバケットのプロパティを開くと、Website タブが追加されています。ここで Enable のチェックを ON する。そんで Index Document: index.html、Error Document: 404.html とした。

Index Document には / や /foo/ や /foo/bar/ のときに表示するファイルを指定する。今までは XML が表示されてしまったが、これでウェブサイトっぽくなる。ちなみに /foo/bar など末尾の / を省略したとき bar がフォルダのときは、302 でリダイレクトするあたりもウェブサイトと同じ。

Error Document には、HTTP ステータスコードが 4xx のときに表示するファイルを指定する。指定したファイルはルートに置いておけばよい。Amazon S3 の仕様上は、400, 403, 404 が起こりうるが、ファイルは1つしか指定できない。ちょっと Amazon の手抜きっぽい気はするが、実質は 404 Not Found を表すファイルを追いておけば不自由ない。

ファイルのアップロード

移転元のサイトのファイルをアップロードしました。ここも今までと同じ。

移転先のサイト

Amazon S3 のエンドポイントは、今までと同じ↓と思いきや、これが違うのです。このエンドポイントは、いわゆる S3 として振る舞うもので、Website とは関係ないようです。

http://developmentor.lrlab.to.s3.amazonaws.com/postal/

構成上、そりゃそうかとも思えるし、いっしょにしてよとも思えるし。それで WebSite のエンドポイントは、特別に用意されたものがあり↓、今までと異なりました。しかも、選択した地域によって URL が違います。ありゃりゃ。

http://developmentor.lrlab.to.s3-website-us-east-1.amazonaws.com/postal/

DNS の設定

CNAME developmentor.lrlab.to
    developmentor.lrlab.to.s3-website-us-east-1.amazonaws.com

とすれば、おけ。

さようなら VPS

というわけで、次の更新のときには VPS を解約します。元々のアクセスはそれなりにありますが Amazon S3 の単価のほうが安いでしょう。また、気持ち的に管理主体が、自分から Amazon に移った気持ちになれるので、そこが気楽でいいかな。どうがんばったって第三者が悪さできることもないしね。

ちょう適当メモですが、参考になれば幸いです。