Yandex.Mailのすべての部分がすべてのユーザーに等しく機能するように努めています。今日は、添付ファイルを追加するためにブロックを完全に書き直した方法と理由について説明します。この記事では、フラッシュを拒否し、最新のブラウザーの機能をサポートし、その結果、ファイルのダウンロードの速度と信頼性を向上させることについて説明します。

問題

以前は、Yandex.Mailのオーディエンス全体を、フラッシュを使用するユーザーと使用しないユーザーに分割しました。

最初は、すべてがシンプルでした。フラッシュをインストールしたユーザーは、フラッシュダウンローダーを介してメッセージにファイルを添付しました。一度に複数のファイルをダウンロードし、サイズを決定して、ダウンロードプロセスを制御することができました。

しかし、フラッシュのないユーザー（毎日の視聴者の8〜10％）の場合、それはより困難でした。 />

使用して、通常のフォームからファイルをアップロードすることをお勧めします。それからのファイルは、手紙自体の内容とともにiframeを介して送信され、これには多くの時間がかかりました。「送信」ボタンをクリックすることにより、ユーザーはファイルがアップロードされるまで長時間待機しました。

そして、小さなファイル（最大25 MB）が特定の問題を引き起こさなかった場合、大きなファイルは新しい問題を作成しました：ファイルサイズが許容限度を超えた場合、Yandex.Narodサービスを使用してからYandex.Diskを使用する必要がありました（新しい添付ファイルでファイルストレージを変更しました） *。

*送信ファイルのサイズの制限は、Yandex.Mailの技術的な制限ではなく、サードパーティのメールサーバーの問題によって説明されています。 すべての人が大きな手紙を受け取って保管する準備ができているわけではありません。 そのような手紙が宛先に届くように、Yandex.Diskに25 MBを超える添付ファイルを保存し、手紙にリンクを追加します。

フラッシュなしのユーザーのファイルサイズを決定するために、次のように機能する内部サービスを発生させました。クライアントは、リクエストを含むPOSTファイルを特別なURLに送信し、サーバーはリクエストのContent-Lengthヘッダーを読み取り、接続を閉じました。

すべてのブラウザでのファイルアップロードの実装は、ファイルを完全に送信するまでサーバーからの応答を期待しないように設計されています。したがって、サーバーはすぐにファイルサイズを報告できません。この問題を解決するために、サーバーがダウンロードしたファイルのサイズに等しいContent-Lengthヘッダー値をクライアントに渡す2回目のGET要求を行いました。

電子メールにファイルを添付する際の問題は、両方のカテゴリのユーザーで発生する可能性があります。たとえば、フラッシュローダーでは、複数のファイルを選択してサイズを決定できますが、次のようになります。

ユーザーのコンピューターにインストールする必要があるサードパーティのプラグインであり、他のプラグインまたは拡張機能によってブロックされる可能性があります。
SSL接続とセキュリティに問題があります。
ファイルをダウンロードする際の問題やエラーを解決するのが難しい。

通常の/>

では、少なくともマルチアタッチはありません。

もちろん、私たちはこの状況に満足しておらず、これらの問題の効果的な解決策を探すことを止めませんでした。

機会

過去1年間、すべてのブラウザーは、ファイルを使用して作業を個別に整理する方法を学習しました（サードパーティのプラグインを接続することなく）。 Mozilla Developer Network Webサイトの記事で、それらの最新機能のすべてを詳しく見ることができます。

HTML5の開発に伴った新しい機能は次のとおりです。

-入力タグの複数の属性（Chrome 4、Firefox 3.6、IE 10、Opera 11、Safari 5以降）;

- ドラッグアンドドロップAPI （Chrome 4、Firefox 3.5、IE 5.5、Opera 12、Safari 3）;

-FormData （Chrome 7、Firefox 4、IE 10、Opera 12、Safari 5）;

-XMLHttpRequestレベル2 + CORS + 進捗イベント（Chrome 7、Firefox 4、IE 10、Opera 12、Safari 5）。

理論的には、1年半前に実装できましたが、変更はChromeとFirefoxにのみ影響します。これらのブラウザは全体でかなりの割合を占めていましたが、独占者ではありませんでした。 OperaとIEはまだこれらの機能をサポートしていません。したがって、聴衆の半分はまだフラッシュに残されている必要があります。

それで待った。そして、必要な技術を導入できるOpera 12の6月のリリースが近づく前に、開発を開始しました。

IE10に関しては、近いうちにリリースされる予定です。

実装

前述のように、ファイルを大小に分離する必要があります。たとえば、ユーザーがメールに10個のファイルを添付しようとしていますが、そのうち9個は許容限度に収まり、10個目は残りの2倍の大きさです。ファイルを個別にアップロードする機能がなければ、10個のファイルすべてがYandex.Diskに保存されます。ただし、これは合理的ではないようです。最後の1つのファイルのみをディスクに送信し、残りをレターにアップロードすることをお勧めします。そこで、各ファイルを個別にダウンロードすることにしました。

通常、ファイルは標準形式でアップロードされます。

 <form action="/upload" method="post"> <input type="file" multiple="true"/> <input type="submit"/> </form>

非表示のiframeでフォームを送信するとします。この場合、ブラウザは選択されたすべてのファイルを入力から読み取り（ファイルが多数ある場合でも）、POST要求でアップロード/アップロードします。しかし、ここではファイルはすべて一緒にロードされますが、これは私たちには適していません。

AJAXがどのように役立つかを見てみましょう。 AJAX経由でファイルを送信するには、FormDataサポートが必要です。これがないと、入力のファイルを読み取ってリクエストに追加できません。これを試してみましょう：

 var formElement = document.getElementById("myFormElement"); var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload", true); xhr.send(new FormData(formElement));

ただし、この場合、すべてのファイルは入力から送信されます。各ファイルを個別に取得し、ダウンロードする場所（ディスクまたはレター）を決定する、つまり、個別に処理する必要があることがわかりました。

 for (var i = 0, j = input.files.length; i < j; i++) { upload(input.files[i]); } function upload(file) { var url = ""; if (file.size > MESSAGE_LIMIT) { url = "uploader.disk.yandex.ru"; } else { url = "uploader.mail.yandex.ru"; } var data = new FormData(); data.append("attachment", file); var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.send(data); }

1つのファイルをロードする際のエラーが他のファイルに干渉しないため、ファイルを個別にアップロードすることも便利です。

すべての一般的なブラウザをサポートしていますが、すべてが最新のテクノロジーをサポートしているわけではありません。機能検出ポリシーに従って、新しい機能を有効にするために4つのチェックを追加しました。

FormDataのサポートなし-> iframeを使用します。
FormDataのサポートがあります-> AJAXを使用します。
Drag-n-DropおよびFormDataのサポートがあり、ファイルマネージャーからファイルをドラッグアンドドロップする機能が有効になります。たとえば、IEには最初のものがありますが、2番目のものはないため、ドラッグされたファイルを送信することはできません。
複数の入力とFormDataのサポートがあります->多くのファイルを選択する機能を有効にします。たとえば、Opera 11.6では複数の入力がありますが、それぞれFormDataはありません。ファイルを1つずつ送信することはできません。

3番目と4番目のチェックの結果、 Modernizrのテストが行われました。

 Modernizr .addTest('draganddrop-files', function() { return !!(Modernizr['draganddrop'] && window['FormData'] && window['FileReader']); }) .addTest('input-multiple', function() { return !!(Modernizr['input']['multiple'] && window['FormData'] && window['FileReader']); });

Safari 5.1 for Windowsでは、バグがすぐに見つかりました。複数のファイルを選択すると、すべてのファイルのサイズがゼロになり、サーバーに送信されました。このブラウザでは、すべての新機能をオフにする必要がありました。

AJAXトランスポートに加えて、 Progressイベントを使用して美しいプログレスバーをレンダリングし始めました。

次のように使用します。

 var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); if (xhr.upload) { xhr.upload.addEventListener('progress', processProgressEvent, false); } else { drawCommonProgressbar() }

データをサーバーにロードするとき、イベントハンドラーはxhr.uploadプロパティでハングし、サーバーからデータをロードするときはxhr自体でハングする必要があることに注意してください。

File APIをサポートするブラウザーでは、ファイルオブジェクトからファイルサイズを確認できます。仕様の古いバージョンでは、プロパティはfileSizeと呼ばれ、現在は単なるサイズです。

File APIをサポートしていないブラウザー（およびそれよりも少ないブラウザー）では、内部ファイルサイズ変更サービスの使用に低下しています。

ところで、新しい技術への移行により、添付ファイルをドラッグアンドドロップで読み込むという長年のアイデアを実現することができました。ドラッグアンドドロップAPIは非常に一般的です。これはファイルだけでなく、ページ上のオブジェクトのドラッグにも適用されます。したがって、絶対にすべてをファイル領域に移動できます。

この問題を解決する必要がありました。ファイルをダウンロードする機能のみをメールに残す方法は？

ブラウザ自体は多くのことを行いますが、すべてではありません。もちろん、event.dataTransfer.filesプロパティのドロップイベントでは、ファイルシステムからのオブジェクトのみが存在します。ただし、これらのオブジェクトはフォルダーとファイルの両方にすることができます。フォルダのダウンロードを禁止するには（すべてのブラウザがフォルダからファイルをロードできるわけではありません-Chrome 21が最初で、Firefox は原則としてこれを拒否しました）、FileReaderを使用します。このAPIを使用すると、ディスクからファイルを読み取り、JavaScriptで操作できます。オブジェクトが読み取られる場合、これはファイルです。このメソッドを実装する小さな関数はGitHubで見ることができます。

 function isRegularFile(file, callback) { //   ,  4,     if (file.size > 4096) { callback(true); return; } if (!window['FileReader']) { //   callback(null); } else { try { var reader = new FileReader(); reader.onerror = function() { reader.onloadend = reader.onprogress = reader.onerror = null; // Chrome (Linux/Win), Firefox (Linux/Mac), Opera 12.01 (Linux/Mac/Win) callback(false); }; reader.onloadend = reader.onprogress = function() { reader.onloadend = reader.onprogress = reader.onerror = null; //   abort     if (e.type != 'loadend') { //      reader.abort(); } callback(true); }; reader.readAsDataURL(file); } catch(e) { // Firefox/Win callback(false); } } }

ただし、このチェックはすべてのブラウザーに必要なわけではありません。Chromefor MacおよびIE10 for Windows 8はフォルダー自体を除外します。

FileReaderは、特に安定して動作しないChromeで特に注意して処理する必要があります。21版までは、数百メガバイトのファイルを読み込むとタブがドロップし、21日に小さなファイルに分類され始めました。このブラウザでFileReaderの使用を放棄する必要さえありました。

とりわけ、ファイルをドラッグアンドドロップするための領域の外観のロジックをわずかに改善しました。ここでも問題が発生しました。ユーザーがラベルを文字にドラッグするか、たとえば、誤ってインターフェイスから画像をドラッグし始めることがあります。

dragoverハンドラーとdragenterハンドラーでこの問題を解決するために、次のチェックを行いました。

 var types = event.dataTransfer.types; if (types) { for (var i = 0, j = types.length; i < j; i++) { if (types[i] == 'Files') { showDragArea(); return false; } } }

「ファイル」タイプは、ドラッグされたオブジェクトに実際のファイルがあることを意味し、「falseを返す」がドラッグアンドドロッププロセスの始まりです。このチェックはすべてのブラウザーで機能するわけではありませんが、インターフェースがわずかに改善されます。

また、イベントdragenter、dragover、dragleaveは、ドキュメントにハングした場合、mouseover、mouseoutと同じ問題の影響を受けることが判明しました。DOMノード間を移動するたびにスローされます。

この問題は、これらのイベントを処理するタイムアウトによって解決されました。

 var processTimer = null; $(document).on({ 'dragover dragenter': function() { window.clearTimeout(processTimer); showDragArea(); }. 'dragleave': function() { processTimer = window.setTimeout(function() { hideDragArea(); }, 50); } });

クロスドメインリクエスト

ディスクにアップロードするには、クロスドメインクエリのサポートが必要でした。これは次のように確認できます。

 window['XMLHttpRequest'] && 'withCredentials' in new XMLHttpRequest()

トランスポートを定義するためのポリシーは同じままです。

クロスドメインリクエストの場合、「プリフライト」OPTIONSリクエストを正しく処理する必要があります。これらのリクエストでは、ブラウザはリモートサーバーに現在のドメインからアクセスできるかどうかを尋ねます。これらは次のようになります。

 OPTIONS /upload HTTP/1.1 Host: disk-storage42.mail.yandex.net Origin: https://mail.yandex.ru Access-Control-Request-Method: POST Access-Control-Request-Headers: origin, content-type

サーバーは、たとえば次のようにヘッダーを解決してこれに応答する必要があります。

 Access-Control-Allow-Origin: https://mail.yandex.ru Allow: POST, PUT, TRACE, OPTIONS

そのような要求は常に発生するわけではありませんが、正しく処理されることを覚えて検証する必要があります。

ブラウザがクロスドメインリクエストの許可を受け取らない場合、リクエストはステータス= 0で終了します（これはonreadystatechangeで処理できます）。また、ユーザーまたはサーバーによって要求が中断されたことも意味します。いずれにせよ、iframeの読み込みでフォールバックを行う必要があります。

Yandex.Diskにファイルをアップロードするプロセスは次のようになります：最初に、ドライブのバックエンドが、ファイルをリポジトリにアップロードするURL、および操作のステータスを要求できるoid（操作ID）を返す要求が行われます。ダウンロードは同期操作ではありません。クライアントからのファイル送信の終了は、サーバー上でファイルの準備が整ったことを意味するものではありません。適切な場所に保存し、ウイルス対策プログラムによってチェックし、データベースに書き込む必要があります。

進行状況イベントのサポートがある場合、ファイルがダウンロードされるまで操作のステータスは要求されず、ブラウザを使用して進行状況バーが描画されます。これにより、サーバーの負荷を大幅に削減し、よりスムーズな進捗を実現できます。

進行イベントがサポートされていない場合、サーバーがファイルの準備が完了したと言うまで、1〜2秒ごとにダウンロードステータスを要求します。

成功

私たちの意見では、ゲームはろうそくの価値がありました。現在のソリューションは、フラッシュの利点を失うことなく、多くの問題を解決したためなど、完全に私たちに合っています。

「水中ノック」を排除-手紙の送信と添付ファイルのダウンロードに関するユーザーの問題。
フラッシュの使用を拒否しました。
主観的に-ユーザーが添付ファイル付きの電子メールの送信に費やす時間を短縮しました。
ディスクへのファイルのダウンロード数がPeopleに比べて倍増しました。

Yandex.Mailの新しい添付ファイル

問題

機会

実装

クロスドメインリクエスト

成功

More articles: