web-dev-qa-db-ja.com

「画像のアップロード」はレスポンシブデザイン環境でどのように動作しますか?

つまり、「CTAのアップロード」は通常、デスクトップデバイスでOSベースのファイル選択インターフェースを起動します。ユーザーがモバイルブラウザーを使用している場合、レスポンシブデザイン環境でこれはどのように機能しますか。それは/ユーザーが写真を選択できるようにネイティブの写真アプリに直接入ることができますか?それともまったく機能しませんか?

7
Van

最初に質問の最後の部分に答えるには、画像のアップロードがさまざまなデバイスでどのように機能するかは、ファイルAPIやファイルフォーム入力フィールドなどのHTML5機能のサポートと実装に大きく依存します。たとえばiOSでは、カメラで写真を撮るか、既存のファイルをアップロードするかを尋ねるプロンプトが表示されます( このスクリーンショット を参照)。

あなたの質問のより興味深い部分は、デザインをそれらの機能に適切に対応させる方法です応答。デバイスがデバイスのアップロードをまったくサポートしていない場合はどうなりますか? 1つの解決策は、画像をアップロードする別の方法をユーザーに提供することです。たとえば、多くの写真共有サイトでは、メールで画像を投稿できます。画像がすでに別の場所にアップロードされている場合は、ユーザーがDropbox、Googleドライブなどの画像を取得できるようにすることをお勧めします。実際、filepicker.ioと呼ばれる、あなたのためにこれをすべて実行しようとする製品があります(私はそれらとは関係ありませんが、私はそれらについて良いことを聞きました)。多分これはあなたのためのオプションです。

設計している内容によっては、コンテキストに応答することもできます。おそらく、画像のアップロードは現在のタスクを完了するために重要ではないので、ユーザーがファイルをアップロードできるデバイスを使用している場合でも、ファイルを手元に持っていないか気にならないので、今のところそのステップをスキップすることができます。小さな画面でそれを行う(特に複数のファイルをアップロードする必要がある場合)。結局のところ、モバイルデバイスのユーザーが移動している可能性があります。その場合、ユーザーがそのステップをスキップして、別の時間や別のデバイスで完了することを許可するのが適切な場合があります。

これらのことはすべて、Webであるカラフルな混乱のために設計するときに重要であり、何をしようとしているのかに応じて、おそらくもっとたくさんあります。

7
Michel Jansen

operaブラウザでhtml5のgetusermedia機能を介してサポートされています

http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/

ユーザーがデータをフェッチしてアプリケーションに戻るためにアプリを離れる必要がある場合、特に繰り返し実行する必要がある場合は、良いエクスペリエンスが得られません。

1
ripu1581

これは、デバイスとそのOSの古さ、および使用されているブラウザーに大きく依存します。ユーザーがアップロードできません何かデバイスを使用しているシナリオを必ず検討してください。

ユーザーがアップロードできる場合、デスクトップデバイスのフローと同様のフローで頻繁に発生します。ブラウザはメディアの選択を可能にするダイアログを開き、アイテムが選択されるとユーザーをフォームに戻します。一部のデバイスでは、メディアを作成して一度に選択することもできます。

アップロードでは、orientationも問題になります。一部のデバイスは、正しい方向で画像を保存しません。 iOSでは、すべてのカメラ画像は横向きで保存され、メタデータが縦向きの画像として表示する必要があると示唆したときに回転します。このため、ポートレート画像をアップロードすると、画像は45度回転します。サーバー側のロジックは、目的の方向を抽出し、それに応じて画像を回転させる必要があります。

すべてのデバイスにアップロードするための優れたUXを提供することは簡単な作業ではありません。

1
Martin