2011年7月25日月曜日

OAuth認証時にTwitter側で表示される画面が変わった。ユーザーのクリック数は減ったものの分かりづらくなった印象。

TwitterのOAuth認証時に呼び出すAuthentication URLで表示される画面デザインが、いつの間にか変わっていた。

<Before>

今年2月の時点では、ユーザーがログインしていなければ、まずはログインが要求され、


続いて、アプリ連携が許可されていなければ、許可を確認する画面が表示されるという流れだった。



<After>

しかし、今年7月の時点では、「ログイン=ログイン&アプリ連携許可」という設計に変わっている。


画面上では「ログイン」となっているが、ログインすると、同時にアプリ連携も許可される。

確かに、二度の確認が一度で済むようになり、簡略化されたともいえるが、個人的には、今何が行われているのかが分かりにくくなったように感じる。


Twitterへログイン済みの場合は、以下の画面になる。


Twitterへログイン済みなのに、ボタンのラベル名は「ログイン」。う~ん、わかりづらい。


上記画面で「キャンセル」をクリックすると、こんな画面が表示される。
アプリ連携をキャンセルしたのに、「ログインしていません」と表示されるのはいかがなものか。



ちなみに、YfrogやTwitpicで実装されている「Log on(Sign in) with Twitter」ボタン。


Twitterログイン済みで、これをクリックした場合は、「ログイン」ではなく「連携アプリを認証」というボタンラベルになる。


しかも、既にアプリ連携を許可していたとしても、何度も「連携アプリを認証」を求められる。

ふむぅ、全般的に動作が分かりづらくなった印象。

MobypictureでAPIキーを取得して自サイトから画像をアップロードする

Mobypictureへサイトをを登録し、APIキーを取得する。取得したAPIキーを使うと、自サイトからMobypictureへ画像をアップロードできる。

まずは、Mobypictureの登録ページから、自サイトを登録する。



登録が完了すると、マイページにデベロッパーキー情報が表示されている。画像アップロード時は、そのキー情報を共に送る。



Twitter4Jを使った場合は以下のようなコードになる。
private String upload(twitter4j.auth.AccessToken accessToken, String photoStorage) throws twitter4j.TwitterException, ServletException{

  String url = "";
  try {

    中略

    //アップロードする画像ファイルを取得する
    java.io.File imgFile = new java.io.File(imgFilePath);

    //Confifgを設定する
    twitter4j.conf.ConfigurationBuilder cb = new twitter4j.conf.ConfigurationBuilder();
    cb.setOAuthAccessToken(accessToken.getToken());
    cb.setOAuthAccessTokenSecret(accessToken.getTokenSecret());
   
    if(photoStorage != null ){
      if(photoStorage.equals("mobypicture")){
        //アップロード先にMobypictureを指定しAPIキーを設定する
        cb.setMediaProvider("MOBYPICTURE");
        cb.setMediaProviderAPIKey(MobypictureのAPIキー);
      }else if(){

        中略

      }
    }
    twitter4j.conf.Configuration conf = cb.build();
    twitter4j.media.ImageUpload imageUpload = new twitter4j.media.ImageUploadFactory(conf).getInstance();

    //アップロードを実行しURLを取得する
    url = imageUpload .upload(imgFile);

  } catch (java.io.IOException e) {
    //エラー処理
  }
  return url;
}

LockerzでAPIキーを取得して自サイトから画像をアップロードする

Lockerz(旧Plixi)へサイトをを登録し、APIキーを取得する。取得したAPIキーを使うと、自サイトからLockerzへ画像をアップロードできる。

まずは、LockerzのAdmin Siteから、自サイトを登録する。



登録完了ページ内に「API Key」が表示されている。画像アップロード時は、そのキー情報を共に送る。



Twitter4Jを使った場合は以下のようなコードになる。
private String upload(twitter4j.auth.AccessToken accessToken, String photoStorage) throws twitter4j.TwitterException, ServletException{

  String url = "";
  try {

    中略

    //アップロードする画像ファイルを取得する
    java.io.File imgFile = new java.io.File(imgFilePath);

    //Confifgを設定する
    twitter4j.conf.ConfigurationBuilder cb = new twitter4j.conf.ConfigurationBuilder();
    cb.setOAuthAccessToken(accessToken.getToken());
    cb.setOAuthAccessTokenSecret(accessToken.getTokenSecret());
   
    if(photoStorage != null ){
      if(photoStorage.equals("lockerz")){
        //アップロード先にLockerzを指定しAPIキーを設定する
        cb.setMediaProvider("LOCKERZ");
        cb.setMediaProviderAPIKey(LockerzのAPIキー);
      }else if(){

        中略

      }
    }
    twitter4j.conf.Configuration conf = cb.build();
    twitter4j.media.ImageUpload imageUpload = new twitter4j.media.ImageUploadFactory(conf).getInstance();

    //アップロードを実行しURLを取得する
    url = imageUpload .upload(imgFile);

  } catch (java.io.IOException e) {
    //エラー処理
  }
  return url;
}