diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/ja/dom | |
parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip |
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/ja/dom')
-rw-r--r-- | files/ja/dom/using_the_camera_api/index.html | 225 |
1 files changed, 0 insertions, 225 deletions
diff --git a/files/ja/dom/using_the_camera_api/index.html b/files/ja/dom/using_the_camera_api/index.html deleted file mode 100644 index 342fb92134..0000000000 --- a/files/ja/dom/using_the_camera_api/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: Camera API の利用 -slug: DOM/Using_the_Camera_API -tags: - - DOM - - Gecko DOM Reference - - Media - - camera -translation_of: Archive/B2G_OS/API/Camera_API/Introduction ---- -<p><a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">Camera API</a> によってデバイスのカメラで写真を撮影して、その写真を現在表示している Web ページへアップロードすることができます。これは、<code>type="file"</code> および画像を受け入れることを宣言する <code>accept</code> 属性を持つ <code>input</code> 要素によって実現します。以下のような HTML です:</p> -<pre class="brush: html"><input type="file" id="take-picture" accept="image/*"> -</pre> -<p>ユーザがこの HTML 要素をアクティブにするとファイル選択の選択肢が表示され、そのひとつとしてデバイスのカメラがあります。ユーザがカメラを選択すると、写真撮影モードに移行します。写真が撮影されると、ユーザに対してその写真を決定するか破棄するかの選択肢が現れます。決定した場合は写真が <code><input type="file"></code> 要素へ送られ、その要素の <code>onchange</code> イベントが発生します。</p> -<h2 id="Get_a_reference_to_the_taken_picture" name="Get_a_reference_to_the_taken_picture">撮影された写真への参照の取得</h2> -<p><a href="/ja/docs/Using_files_from_web_applications" title="ja/docs/Using_files_from_web_applications">File API</a> の助けを借りて、撮影された写真または選択されたファイルにアクセスできます:</p> -<pre class="brush: js">var takePicture = document.querySelector("#take-picture"); -takePicture.onchange = function (event) { - // 撮影された写真または選択された画像への参照を取得 - var files = event.target.files, - file; - if (files && files.length > 0) { - file = files[0]; - } -}; -</pre> -<h2 id="Presenting_the_picture_in_the_web_page" name="Presenting_the_picture_in_the_web_page">Web ページへの画像の提供</h2> -<p>撮影された写真 (すなわちファイル) への参照を取得すると、{{ domxref("window.URL.createObjectURL()") }} を使用してその写真を参照する URL を作成して、画像の <code>src</code> として設定できます:</p> -<pre class="brush: js">// 参照の作成 -var showPicture = document.querySelector("#show-picture"); - -// window.URL オブジェクトを取得 -var URL = window.URL || window.webkitURL; - -// ObjectURL を作成 -var imgURL = URL.createObjectURL(file); - -// ObjectURL を img の src に設定 -showPicture.src = imgURL; - -// パフォーマンス上の理由により、使用済みの ObjectURL を破棄 -URL.revokeObjectURL(imgURL); -</pre> -<p><code>createObjectURL()</code> がサポートされていない場合は、代替策として {{ domxref("FileReader") }} にフォールバックします:</p> -<pre class="brush: js">// createObjectURL がサポートされていない場合にフォールバック -var fileReader = new FileReader(); -fileReader.onload = function (event) { - showPicture.src = event.target.result; -}; -fileReader.readAsDataURL(file); -</pre> -<h2 id="Complete_example" name="Complete_example">サンプル一式</h2> -<p>動作を確認したい場合は、<a class="external" href="http://robnyman.github.com/camera-api/">Camera API の実動サンプル</a> をご覧ください。</p> -<p>以下は上記のデモで使用したコードです:</p> -<h3 id="HTML_page" name="HTML_page">HTML ページ</h3> -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Camera API</title> - <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> - </head> - - <body> - - <div class="container"> - <h1>Camera API</h1> - - <section class="main-content"> - <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p> - - <p> - <input type="file" id="take-picture" accept="image/*"> - </p> - - <h2>Preview:</h2> - <p> - <img src="about:blank" alt="" id="show-picture"> - </p> - - <p id="error"></p> - - </section> - - <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p> - </div> - - - <script src="js/base.js"></script> - - - </body> -</html> -</pre> -<h3 id="JavaScript_file" name="JavaScript_file">JavaScript ファイル</h3> -<pre class="brush: js">(function () { - var takePicture = document.querySelector("#take-picture"), - showPicture = document.querySelector("#show-picture"); - - if (takePicture && showPicture) { - // イベントを設定 - takePicture.onchange = function (event) { - // 撮影された写真または選択された画像への参照を取得 - var files = event.target.files, - file; - if (files && files.length > 0) { - file = files[0]; - try { - // window.URL オブジェクトを取得 - var URL = window.URL || window.webkitURL; - - // ObjectURL を作成 - var imgURL = URL.createObjectURL(file); - - // ObjectURL を img の src に設定 - showPicture.src = imgURL; - - // ObjectURL を破棄 - URL.revokeObjectURL(imgURL); - } - catch (e) { - try { - // createObjectURL がサポートされていない場合にフォールバック - var fileReader = new FileReader(); - fileReader.onload = function (event) { - showPicture.src = event.target.result; - }; - fileReader.readAsDataURL(file); - } - catch (e) { - // - var error = document.querySelector("#error"); - if (error) { - error.innerHTML = "Neither createObjectURL or FileReader are supported"; - } - } - } - } - }; - } -})(); -</pre> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Camera API</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><a href="/ja/docs/DOM/window.URL.createObjectURL" title="/ja/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td> - <td>16</td> - <td>{{CompatGeckoDesktop("8.0")}}</td> - <td>10+</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - </tr> - <tr> - <td>{{domxref("FileReader")}}</td> - <td>16</td> - <td>{{CompatGeckoDesktop("1.9.2")}}</td> - <td>10+</td> - <td>11.6+</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Camera API</td> - <td>3.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoMobile("10.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><a href="/ja/docs/DOM/window.URL.createObjectURL" title="/ja/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td> - <td>4</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("10.0")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - </tr> - <tr> - <td>{{domxref("FileReader")}}</td> - <td>3</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("10.0")}}</td> - <td>{{CompatNo()}}</td> - <td>11.1</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> - </table> -</div> -<p> </p> |