mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について

はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。

さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。

なにこれ?

以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。

百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。

動画では下記を説明しています。

  • 従来のアップロード方法からドラッグ&ドロップに画面を切替えられる
  • ファイルエクスプローラから複数の画像ファイルをドラッグ&ドロップで追加できる
  • アップロード中にファイルを足すこともできる
  • その他の機能は従来のアップロードと変わりなし

本機能の対応ブラウザはFirefox 3.6以上、Google Chrome 9以上、Safari 5以上という要件があります。この要件になった背景については後述しますが、mixiアカウントをお持ちで且つ対応ブラウザをご利用の方は、ぜひ実際に利用してみてください。アップロードページは、PC版のフォト → (「写真をアップロード 」 or 「アルバムを作る」)になります。 http://photo.mixi.jp/home.pl

なにがよくなったのか

従来のWebでファイルのアップロードといえばファイル選択ダイアログでした。 formの中にinput要素(<input type="file">みたいな形式)を書いておくと、ブラウザがローカルボリュームを探索するファイル選択ダイアログを開いて、ユーザはそこからアップロードしたいファイルを選択するというものです。

従来のフォトのアップロード機能も上記と同様の手順ですが、実は一つだけ大きな違いがありました。それは複数ファイルの選択ができること。ユーザは複数の写真を一気にアップロードすることもある(例: 旅行の記録、 パーティーの様子など)と考え、FlashのFileReferenceListによるファイル選択ダイアログを呼び出して複数選択可能なファイル選択ダイアログを実現しました。

本機能はよりPCの直感にあったアップロード機能を提供するものといえます。PCユーザはファイルの移動でドラッグ&ドロップに慣れており、日頃ファイル整理に活用していると思います。わざわざファイルコピーのためにダイアログが開くようなアプリは使われないでしょう。Webブラウザ上のアップローダがドラッグ&ドロップに対応したことで、ユーザはあたかも「mixiフォト」というフォルダにファイルをコピーすることで写真を公開できるようなユーザ体験を得ることができるようになります。

すぐに使えるこれからの技術: File API

ローカルボリュームのファイルにアクセスする手段には大きな制約がつきまとっていました。前述の通りinput要素を用いたファイルのアップロードは可能ですが、これは単一のinput要素に対して1つのファイルをアップロードできるのみであること、JavaScriptからファイル自体の属性値や内容に触れることが許されないなどの制約がありました。JavaScriptで制御できないとなると、XMLHttpRequestを用いて裏側でファイルをアップロードするにも一苦労です。

HTML5の仕様として始まり、現在では独立してW3Cで策定されているFile APIはこの問題を解決するものです。
http://dev.w3.org/2006/webapi/FileAPI/
HTML5の諸機能と共に多くの開発者から注目を集めている仕様ですが、昨今のWebブラウザ開発競争において急激に対応が進み、すぐにでも使えるAPIとなりました。
今回は、マウスイベントに紐付いてデータを受け渡しできるDataTransferオブジェクトのFile API対応を利用して、ドラッグ&ドロップによるアップロード機能を加えました。

あと、これは計測していない体感値ではありますが、File APIから写真をアップロードするほうが従来のFlash版よりも速度が出ているような気がします。Flash版はJSとの接続にExternalInterfaceを介していることによる遅れか、もしくはFile API版の方では昨今のJavaScriptの高速化が優位に働いているのかもしれません。

気になる開発裏話

ファイル操作の標準仕様として策定されているFile APIなので、仕様に従えばどのWebブラウザでも同じように動く!...と思いきや、もちろん現実はそう甘くありません。

今回の機能については、開発当時はまさにFile APIに準拠すべくブラウザの実装が進んでいた段階で、ブラウザ毎に実装度合いが異なりました。ブラウザがAPIを正しく実装しているか把握するためにブラウザのソースコードも追うことになりました。なかなか大変でしたが、これは非常に勉強になりました。APIの裏側の実装を少しでも覗いているとAPIの気持ちが見えてきます。

もっとも早くにFile APIの機能を備えたのはFirefoxでした。プロトタイプ実装の時にはFirefoxでしか動かないものでしたが、その後すごい勢いでChrome, SafariなどWebKit系の実装が進み、リリース時には3ブラウザ対応となりました。これが決まったのは2月に入ってからのことでした。

だがIEで動かない: それでもリリースしたかった

序章でも説明しましたが、本機能は実はIEで動きません※2。ユーザインパクトを考えると、mixiユーザの大多数がIEユーザですので本機能の恩恵を受けられるパイは小さいと言わざるを得ません。IEユーザの皆様には申し訳なく思っています。

しかし、たとえパイが小さくなったとしても、mixiは先端技術を用いてより良いユーザ体験を提供していきたい。本機能にはそういった狙いがあります。もともと本機能のプロトタイプは、エンジニア発でいろんなアイディアを実現したり開発できる制度から生まれてきたものです。制度の助けもあり、世界的に見てもFile API対応のプロダクトは未だ数が少ない中で開発およびリリースの日を迎えることができました。

余談: フォトの他の機能と技術をご紹介

mixiフォトは他にも便利な機能をいくつか持っています。リリース時から好評を博しているフォトビューモードや、先日リリースしたフォトの並べ替えが好例です。下の動画は、そのフォト並べ替えのプロモーション動画になります。

フォトビューモードは全画面で写真を閲覧したいユーザに向けてFlashで開発されており、スムーズなフォトの切替えや拡大・縮小を実現しています。

フォト並べ替えはscript.aclo.usを採用しました。写真をアップロードする時と、アルバム編集時に対応しています。マウスでフォトのサムネイルをドラッグすることで写真を並べ替えられるのは直感的で、まるでデスクトップのアイコンを好きな配置に並べ替えるようです。ドラッグ&ドロップによるアップロードとの相性も抜群です。

その他、フォトアップロード時に写真を回転させる機能はCanvasを利用しています(IEだけはCanvasが使えないためDXTransformで代用...)。今回のフォトドラッグ&ドロップ画面の切替え機能では、切替えた状態を保存するためにlocalStorageを採用しました。

このように、mixiフォトでは様々なWeb技術を用いてユーザに快適なサービスを提供すべく開発を進めています。

まとめ

本記事ではHTML5 File APIを用いたドラッグ&ドロップ機能について紹介しました。今回は概要をさらりと流しましたが、機会があれば実装の詳細についてもお話できればと思っています。

今後もmixiフォトでは先端の実装を用いてユーザ体験の向上を目指していきます。どうぞよろしくお願いいたします。

※1 現在はHTML5としてではなく、独立した仕様策定が進んでいます
※2 本稿執筆時点ではIEのバージョンは8が最新、9がベータ版です