aboutsummaryrefslogtreecommitdiff
path: root/files/ja/dom
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/ja/dom
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-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.html225
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">&lt;input type="file" id="take-picture" accept="image/*"&gt;
-</pre>
-<p>ユーザがこの HTML 要素をアクティブにするとファイル選択の選択肢が表示され、そのひとつとしてデバイスのカメラがあります。ユーザがカメラを選択すると、写真撮影モードに移行します。写真が撮影されると、ユーザに対してその写真を決定するか破棄するかの選択肢が現れます。決定した場合は写真が <code>&lt;input type="file"&gt;</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 &amp;&amp; files.length &gt; 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">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
- &lt;head&gt;
- &lt;meta charset="utf-8"&gt;
- &lt;title&gt;Camera API&lt;/title&gt;
- &lt;link rel="stylesheet" href="css/base.css" type="text/css" media="screen"&gt;
- &lt;/head&gt;
-
- &lt;body&gt;
-
- &lt;div class="container"&gt;
- &lt;h1&gt;Camera API&lt;/h1&gt;
-
- &lt;section class="main-content"&gt;
- &lt;p&gt;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).&lt;/p&gt;
-
- &lt;p&gt;
- &lt;input type="file" id="take-picture" accept="image/*"&gt;
- &lt;/p&gt;
-
- &lt;h2&gt;Preview:&lt;/h2&gt;
- &lt;p&gt;
- &lt;img src="about:blank" alt="" id="show-picture"&gt;
- &lt;/p&gt;
-
- &lt;p id="error"&gt;&lt;/p&gt;
-
- &lt;/section&gt;
-
- &lt;p class="footer"&gt;All the code is available in the &lt;a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api"&gt;Camera API repository on GitHub&lt;/a&gt;.&lt;/p&gt;
- &lt;/div&gt;
-
-
- &lt;script src="js/base.js"&gt;&lt;/script&gt;
-
-
- &lt;/body&gt;
-&lt;/html&gt;
-</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 &amp;&amp; showPicture) {
- // イベントを設定
- takePicture.onchange = function (event) {
- // 撮影された写真または選択された画像への参照を取得
- var files = event.target.files,
- file;
- if (files &amp;&amp; files.length &gt; 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>