Windows10MobileのEdgeでローカルファイル保存するときにハマったこと

    こんにちは。漢鷹です。

    今回のテーマは去年くらいから導入した、国内初のWindowsPhone
    「MouseComputer MADOSMA」で、「MicrosoftEdge」Mobileブラウザを
    使ったテキスト変換アプリをjavascriptのみで作ったときの備忘録です。
    モバイルがメインです。

    今回作りたかったアプリは

    • Windowsのコマンドで「tree /f > hoge.txt」で出力したファイル一覧を入力とする
    • javascriptでファイルを読み込んで、タブ区切りテキストに変換して、変換後のテキストを表示
    • 変換後のテキスト情報をBlobオブジェクトでURIを発行し、ローカルでファイル保存を行う

    というものでした。

    これらの機能のうち、2番目の「変換後のテキストを表示する」ところまでは、以前から作成できていたのですが、Blobオブジェクトを生成してURIを発行し、ローカルでファイルを保存する部分が今回の実装のミソでした。

    で、この手のオブジェクト生成に関して調べてみると、MicrosoftEdgeだけなにやら独自関数を使わねばならないと書いてありました。
    以下のMSDNの公式ページですね。
    Blob と msSaveBlob を使ってファイルをローカルに保存する
    ここのページに掲載されている通りに、webページを実装して、MADOSMAの「MicrosoftEdge」で動かしてみたところ、ダウンロードが始まりません。。。

    あらゆる調査を行ってみました。
    そのメソッドは以下の通りです。

    1. 「new Blob(value, option)」で生成されたオブジェクトが正しいか
    2. 「window.navigator.msSaveBlob」が実装されているか
    3. 「window.navigator.msSaveOrOpenBlob」が実装されているか
    4. 「window.navigator.msSaveBlob」の戻り値が返ってこないか
    5. 「window.navigator.msSaveOrOpenBlob」の戻り値が返ってこないか
    6. 「window.navigator.msSaveBlob」など独自関数を使わず、Chromeなどと同じような手順でダウンロードさせる処理にしたらどういう動きをするか

    上記調査を行って、最後の項目で、ダウンロードの挙動をすることがつかめましたが、果たして本当なのかどうかわかりません。
    ということで、追加の調査を
    「try-catchで処理をくくって、エラーハンドルしたときに何かエラーメッセージが返ってこないか」
    という観点で実施したところ大当たりでした。

    以下のようなコードを記述し、スクリーンショットを取得できました。

    スクリーンショットは以下です。コードと照らし合わせながら画像を見ていただければ、きっと理解が進むと思います。

    EdgeMobileの場合、独自関数でBlobのURL発行から保存を行うと、このように「Error: Not Implemented」と表示されてしまう。
    EdgeMobileの場合、独自関数でBlobオブジェクトの保存を行うと、このように「Error: Not Implemented」と表示されてしまう。

    このような原因がわかったので、今回のMicrosoftEdgeMobile対策まとめです。

    1. Blobオブジェクトの生成やURI発行の取り扱いはChromeやFirefox、Safariなどのモダンブラウザと変わらない
    2. Blobオブジェクトからファイルを生成するときはMSDNの公式解説に掲載されている独自関数は利用しない
    3. webサイトがPC/SP両方対象になる場合は、PC版Edgeと条件分岐をわけるようにする
    4. webサイトがPC/SP両方対象になる場合で、PC版Edgeと条件分岐を分けられないときは「try-catch」で独自関数の処理をくくる実装を行い、MicrosoftEdgeMobileは通常のモダンブラウザと同じ処理を実行させるように処理を書く

    この問題を解決するのにかかった時間:およそ3時間・・・(ムダムダムダァ~!!)

    最後に一言:「マイクロソフトさん!PC版Edgeとモバイル版Edgeはちゃんとすみ分けした解説を掲載してくださいw」

    以上です。

    似たカテゴリーの投稿