増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

【実装編】MovableTypeのData APIで簡易画像アップローダをつくってみた

      2015/05/07

久しぶりのブログ!

今日はMovableTypeのData APIを使ってみたの実装編として続きを書くと言っておいて、書かないじゃん!と言われたので書いてみることにしました。

最近結構身近な人にもブログ読んだよって言ってもらえるようになって、嬉しいやら恥ずかしいやら。でも役に立ったと言ってもらえるようなるべく書いて行こうと思っております(努力目標)

この前の記事を書いたすぐ後にMovableTypeの6.1がリリースされまして、DataAPIもv1からv2に変わりました。

そこで、読み込むjsをv1からv2にしても動かなくなりました。そのあたりも含めて、ご説明していきます。

では、アップロードするときに呼び出しているメソッドの内容はこちら。

function upload_asset() {
  // アップロードするファイル
  var files = document.getElementById("file").files;
  // アップロードしたファイルを回す
  for (var i = 0; i< files.length; i++){
    // アップロードするためのパラメータ作成
    var data = {
      file: files[i], // アップロードするFile object
      path: "", // アップロードpath
      autoRenameIfExists: true, // 同名ファイルがあった場合リネームを許可するか
      normalizeOrientation: true, // Exif情報を使って画像の向きを修正するか
      site_id: "2"
    };
    api.uploadAsset(data, function(response) {
      if (response.error) {
        // エラー処理
        return;
      }
      // 正常にアップロードされた場合
      // ここでassetのデータが扱えます。
      // response.filenameとか
    });
  }
}

ほとんど自分で作りながらコメント書いちゃったから、あまり解説するところがない。。。

まずinput fileにmultiple=“multiple”という要素をつけておくとファイルが複数選択できます。ってここはどちらもでOKです。

複数選択されたら、for文の中がファイル数分実行されるので、アップロードするためのパラメータを作ります。

必要なのは下記です。

file アップロードするファイルオブジェクト
path アップロードするpath
autoRenameIfExists 同名ファイルがある場合、リネームするか、エラーにするか。falseだとリネームせず、エラーが返ってくる
normalizeOrientation Exif情報を使って画像の向きを修正するか(未検証だけどとりあえずtrue投げてる)
site_id アップロードするブログID

はい!ここでMovableType DataAPI v1を使っていた方は、もしかするとあれ?って思うかもしれません。v1のドキュメントにはsite_idは渡すデータとしてではなく、引数に渡す形でした。
data api assets upload · movabletype/Documentation Wiki
ここがまずv1からv2に変更するときに迷った部分です。

そのあとのアップロードを行う部分も変更箇所です。

api.uploadAsset(data, function(response) {

v1のときには下記ソースで書いてありました。

api.uploadAsset(2, data, function(response) {

uploadAssetの第一引数がサイトID(ブログID)でした。v1からv2に変更してすぐに動かないときには、メソッドの引数が変更になったことをチェックしてみるといいかもしれません。

はい、ここまでくれば、あとは返ってきたデータをごちゃごちゃするだけです。

なんらかのエラーが発生した場合には、下記のようなデータが返ってきます。

response.error.code // エラーコード
response.error.message // エラーメッセージ

ちなみにautoRenameIfExistsがfalseでsite_idに指定したサイト(ブログ)に同名ファイルが存在する場合にはこのようなデータが返されます。

エラーコード 409
エラーメッセージ A file named ファイル名 already exists.

アップロードに成功した場合、responseの中にアップロードしたassetの情報を持っています。

返ってくるデータは下記ドキュメントの通りです。
Data api resource assets · movabletype/Documentation Wiki

response.filenameなどとすることで、アップロードされたファイルの名称が取れたり、response.urlとすることでアップロードされたファイルのURLが取得できるので、これをimgタグのsrc要素に放り込むと、見事アップロードが完了した画像が表示されます。

 

だいぶ端折って書きましたが、DataAPIでファイルをアップロードするのに最低限必要な情報を書いておきました。

これ以外にログイン処理なども必要となりますが、これも数行です。

  var api = new MT.DataAPI({
      clientId: 'dataapi', // cookieなどで使われるID
      baseUrl:  'http://'+document.domain+'/cgi-bin/mt/mt-data-api.cgi', // DataApiのURLです
    });
    // ログイン確認
    api.getToken(function(response) {
      if (response.error) {
        // エラー(未ログインの場合)

  // ログイン画面にリダイレクト
        location.href = api.getAuthorizationUrl(location.href);
      }
    });

最初にDataAPIオブジェクトを作ってあげます。引数はclientIdとbaseUrl。clientIdってなんだ?ってなるけど、cookieとかで使うみたいだけど、テストであればなんでも良いです。日本語とかじゃなきゃね。

んで、ログイン処理ですが、ここはやり方がいろいろあるかと思いましたが、getTokenでアクセストークンを取得し、取得できなかった場合はログイン処理をするという方法で落ち着きました。

ログイン処理ですが、getAuthorizationUrlというメソッドにパラメータとして戻り先URL(この場合今のページ)を渡すと、ログイン画面のURLが返ってきます。そのURLにリダイレクトしてやるだけで、見慣れたMovableTypeのログイン画面が表示されます。

ここでログインが行えれば、指定したURLにリダイレクトが行われます。

ログイン認証も含めて20行くらいJavaScript書けば、複数ファイルアップロードできちゃいます。

ま、実際の案件に使うとしたら色々と考慮することはありそうですが。。。

 

次回は。。。何書こうか決まってません。

そういえば、このブログ、ひっそりと野望があって、「増子良太」という本名でGoogle検索で1位を取ることだったんですが、どうしても日体大出身の野球選手「増子良太」さんに勝てませんでした。

しかーし、本日検索したところ、相変わらず強いLinkdin、高校野球資料館のページを抜いて、「吉祥寺.pm (kichijojipm) #2に参加してきました」が1位を取っていました!おめでとう俺!!

これで今年の野望は一つかなったぜ
(ちっっっっっっっっっっっさ!)

 - movabletype(mt)