明日に向かって昇龍拳: 2011/02

2011年2月18日金曜日

Chromeのβバージョンが10へ。Flashでの日本語入力、ファイルブラウザへのアクセス、ともに問題なし。

Windows版Chromeのβバージョンが10へアップグレードした。

現在のバージョンは、
「Chrome 10.0.648.82 FP 10,2,154,12」
となっている。

10へ上がって、Chrome9で解決されたFlashの2つの大きな問題、

FileReferenceを使った操作が失敗する
Flash内のテキストボックスで日本語が入力できない

これらが再発していないか心配だった。

しかし大丈夫。どちらも問題なく、操作できた。

良かった(*´О｀*)。

2011年2月15日火曜日

Chrome9のFlashで日本語が入力できるようになった。でもWindowsだけ。MacユーザーはIssue72810へVoteしよう。

Chrome9になってから、バンドルされているFlash Playerには、2つの大きな不具合があった。

1つ目は、ファイルブラウザを開くためにFileReferenceを使っている部分が全て、エラーコードが吐かれて失敗する問題。ファイルブラウザを開いてファイルをアップロードすることなどが全くできないでいた。

でも、これは正式リリース前のバージョン「9.0.597.67（FP 10,1,103,22）」で解決されたので良かった。

しかし2つ目の、Flash内のテキストボックスで日本語が入力できないという不具合は正式リリース後もずっと解消されずに残っていた。

2011年1月13日以降のChromeのアップデートと、上記不具合の改善の履歴は以下にまとめている。
明日に向かって昇龍拳: Chrome9にバンドルされているFlash Playerの不具合

ところが、ここにきてようやく、最新のバージョン「9.0.597.98（FP 10,2,154,12）」で、日本語が入力できるようになり、不具合が解消された(=^▽^=)！

しかし、これは残念ながら、あくまでもWindowsだけの話。
WindowsのChromeでは、バージョン8までは日本語が入力できていたが、9で入力できなくなった。その問題が解決されただけのこと。

Mac版Chromeでは、少なくとも2009年12月から、Flash内のテキストボックスで日本語が入力できないでいる。入力が全て英数半角になってしまうのだ。これは、現在の最新バージョン「9.0.597.102（FP 10,2,154,13）」でも解決されていない。

Chromeを利用するMacユーザーは増えているのに、この問題がずっと解決されないのは問題だ。
解決を願うには、地道だが、声を上げることが一番だ。

既に、Issueを立ち上げている方がいる。MacのChromeだとFlashで日本語が入力できないじゃないかヽ(`Д´)ﾉと言う方は、是非IssueにVoteを！解決の優先度を上げてもらいましょう。
Issue 72810 - chromium - [Mac] Can't input japanese text in flash input field using IME - Project Hosting on Google Code

2011年2月14日月曜日

TwitterでOAuth認証。後編：OAuth認証を経由してTwitpicへ画像をアップロードする。

「TwitterでOAuth認証。前編：デベロッパーページでアプリケーションを登録する。」の続き。

Twitter APIへのライブラリとして、Twitter4Jを使わせていただいた。まずは、Twitter4Jの環境を設定する。

3.Twitter4Jの環境設定

Twitter4J - A Java library for the Twitter API

2011年2月14日段階で最新のバイナリは2.1.11。圧縮ファイルをダウンロードして展開する。展開後、libフォルダ内にある以下2つのjarを、Webアプリケーションのライブラリパスに設定する。

twitter4j-core-2.1.11.jar
twitter4j-media-support-2.1.11.jar

Twitter4Jでは設定ファイルを作成することが出来る。クラスパスが通っている場所へ、Twitter4Jの設定ファイル「twitter4j.properties」を作成。中身には、Twitterへのアプリケーション登録後に発行された、

Consumer key
Consumer secret

を設定する（※）。
※ twitter4j.propertiesには、TwitpicのAPI Keyも設定可能なようだが、自分の場合は、設定しても有効にならなかった(・・;。

4.TwitterでOAuth認証

はじめに、TwitterのOAuth認証の流れを軽くおさえておくとよい。以下のTwitterのページでは、比較的分かりやすくOAuth認証の流れが説明されている。オススメ。

Overview of "Sign in with Twitter" | dev.twitter.com

4.1 Authentication URLへリダイレクト

OAuth認証の第一段階。

＜ポイント＞
1. 認証リクエスト時には毎回ユニークなRequest Tokenを作成し、TwitterのAuthentication URLへ認証のリクエストを発行する。

以下、サンプルコード。

StringBuffer callbackURL = request.getRequestURL();
int index = callbackURL.lastIndexOf("/");
callbackURL.replace(index, callbackURL.length(), "").append("/twitterCallback.jsp");

twitter4j.Twitter twitter = new twitter4j.TwitterFactory().getInstance();
twitter4j.http.RequestToken requestToken = twitter.getOAuthRequestToken(callbackURL.toString());
request.getSession().setAttribute("twitter", twitter);
request.getSession().setAttribute("requestToken", requestToken);

response.sendRedirect(requestToken.getAuthenticationURL());

ここから先はTwitter側の処理となる。

4.2 ユーザーによるログイン＆接続許可

ユーザーがログインしていなければ、まずはログインが要求される。

続いて、自分のアプリケーションからTwitterアカウントへ、ユーザーが初めて接続する場合は、接続を許可するかどうか確認する画面が表示される。ユーザーが「許可する」をクリックすると、Callback URLとして指定したページへ、Twitter側からレスポンスが返ってくる。

ログインをキャンセルしたり、アプリケーションの接続を拒否したら、アクセスを許否したメッセージがユーザーへ表示される。

4.3 Callback処理

TwitterからCallback URLへレスポンスが返ってくる時には、「oauth_verifier」というパラメーターが含まれている。このVerifierをTwitterオブジェクトに与えて、認証情報を設定する。

＜ポイント＞
1. Authentication URLへ渡したRequest TokenとVerifierを引数に、twitter4j.TwitterクラスのgetOAuthAccessTokenメソッドを実行する。
2. Request Tokenは今後必要なくなるので、削除する。

以下、サンプルコード。

twitter4j.Twitter twitter = (twitter4j.Twitter) session.getAttribute("twitter");
twitter4j.http.RequestToken requestToken = (twitter4j.http.RequestToken) session.getAttribute("requestToken");
String verifier = request.getParameter("oauth_verifier");
if(verifier == null){
  //エラー処理
}else{
  twitter.getOAuthAccessToken(requestToken, verifier);
  session.removeAttribute("requestToken");
  response.sendRedirect(request.getContextPath()+ "/twitter.jsp");
}

4.4 Twitpicへ画像をアップロード

いよいよTwitpicへ画像をアップロードする。
なお、Twitterユーザーが、Twitpicを連携アプリとして許可する必要はない。

また、画像のバイト数によってはアップロードに時間がかかる場合があるため、アップロード処理は非同期処理で実装したほうがいい。

＜ポイント＞
1. Access Token及びAccess Token Secretをコンフィグへ含める。
2. 画像のアップロードサイトとしてTwitpicを指定し、TwitpicのAPI Keyをコンフィグへ含める。

以下、サンプルコード。

twitter4j.Twitter twitter = (twitter4j.Twitter) session.getAttribute("twitter");
twitter4j.http.AccessToken accessToken = null;
try{
  accessToken = twitter.getOAuthAccessToken();
  twitter4j.conf.ConfigurationBuilder cb = new twitter4j.conf.ConfigurationBuilder();
  cb.setOAuthAccessToken(accessToken.getToken());
  cb.setOAuthAccessTokenSecret(accessToken.getTokenSecret());       
  cb.setMediaProvider("TWITPIC");
  cb.setMediaProviderAPIKey("TwitpicのAPI Key");       
  twitter4j.conf.Configuration conf = cb.build();
  twitter4j.media.ImageUpload upload = new twitter4j.media.ImageUploaderFactory(conf).getInstance();

  url = upload.upload(画像のjava.io.Fileオブジェクト);

}catch(twitter4j.TwitterException te){
  //エラー処理
}

アップロードに成功すれば、uploadメソッドの戻り値として、画像のURLが返ってくる。

さらに、ユーザーが画像URLを含んだツイートを出来るようにするには、ツイート文字列を引数にして、twitter4j.TwitterクラスのupdateStatusメソッドを実行すればよい。

twitter4j.Twitter twitter = (twitter4j.Twitter) session.getAttribute("twitter");
twitter4j.Status  status = twitter.updateStatus(text);

TwitterでOAuth認証。前編：デベロッパーページでアプリケーションを登録する。

TwitterのOAuth認証を使ってTwitpicへ画像をアップしてみた。

まずは、自分のアプリケーションをTwitterへ登録して、API KeyやConsumer Keyを取得する。

1.Twitter API Key/Consumer Key/Consumer Secret の取得

Twitterデベロッパーページへサインインし、ページ上部にある「Your apps」をクリックするとTwitter Applicationsページへ遷移する。ページ右側の「新しいアプリケーションを登録する」リンクをクリックして、アプリケーションを登録する。

TOSが表示されるので、「I Accept」で合意。

アプリケーション情報を登録する。ページ下部の「アプリケーションを登録する」ボタンをクリックすると、登録終了。

・アプリケーション名:: 必須。アプリケーションの名前。TL上で「from ～」に表示される。日本語OK。
・アプリケーションの説明:: 必須。アプリケーションの概要。Twitterユーザーの設定画面にある「連携アプリ」内にアプリケーションの説明として表示される。日本語OK。
・アプリケーションのウェブサイトURL:: 必須。アプリケーションのホームページのURLを入力。TL上のfrom～のリンク先として使用される。
・所属会社／団体:: 会社名等。 OAuth認証のプロセスで、「○○が開発した×××というアプリケーションがTwitter上のデータにアクセスしようとしています」という確認ダイアログ表示時に利用される。また、Twitterユーザーの設定画面にある「連携アプリ」内の作者名としても利用されるので、入力しておいたほうがベター。
・アプリケーションの種類:: Webアプリケーションの場合は「クライアントアプリケーション」を選択。
・コールバックURL※1:: Webアプリケーションの場合は必須。アプリケーション登録後でも編集可能。
・標準のアクセスタイプ:: 「 Read & Write」を選択。
・アプリケーションのアイコン:: アプリのアイコン。無くてもOKだが設定しておいた方がベター。

※1
・Webアプリケーションの場合、Callback URLを指定しておかないと、TwitterでOAuth認証が終了した後で、自作アプリケーション側へレスポンスが返ってきたときに受け止める窓口がないので、エラーになる。その場合、以下のメッセージが表示される。
"Desktop applications only support the oauth_callback value 'oob'"

登録後、Twitterデベロッパーページの「Your apps」リンクをクリックすると、登録したアプリケーションの情報が表示される。