diff options
Diffstat (limited to 'files/ja/dom')
| -rw-r--r-- | files/ja/dom/about_the_document_object_model/index.html | 15 | ||||
| -rw-r--r-- | files/ja/dom/dispatchevent_example/index.html | 27 | ||||
| -rw-r--r-- | files/ja/dom/storage/index.html | 13 | ||||
| -rw-r--r-- | files/ja/dom/using_the_camera_api/index.html | 225 |
4 files changed, 280 insertions, 0 deletions
diff --git a/files/ja/dom/about_the_document_object_model/index.html b/files/ja/dom/about_the_document_object_model/index.html new file mode 100644 index 0000000000..15b751be6e --- /dev/null +++ b/files/ja/dom/about_the_document_object_model/index.html @@ -0,0 +1,15 @@ +--- +title: DOM (Document Object Model) について +slug: DOM/About_the_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +--- +<h2 id="What_is_the_DOM.3F" name="What_is_the_DOM.3F">DOM とは何か?</h2> +<p><a href="/ja/docs/DOM">Document Object Model</a> は <a href="/ja/docs/HTML">HTML</a> と <a href="/ja/docs/XML">XML</a> ドキュメントへの API です。これは、ドキュメントの構造的な表現、その内容を変更可能にすること、そして視覚的なプレゼンテーションを提供します。本質的には、ウェブページをスクリプト又はプログラミング言語と結合します。</p> +<p>ウェブ開発者がウェブページを操作及び作成するのに役立つ全てのプロパティ、メソッド、そしてイベントは、<a href="/ja/docs/Gecko_DOM_Reference">objects</a> に組込まれています。(例えば、document オブジェクトはドキュメントそのもの、table オブジェクトは HTML テーブル要素を表すなど)。これらのオブジェクトは最新のウェブブラウザのスクリプティング言語を通してアクセス可能です。</p> +<p>DOM は <a href="/ja/docs/JavaScript">JavaScript</a> との関連において最も頻繁に使われます。JavaScript で書かれたコードは、しかしウェブページとその要素にアクセスするのには DOM を使う為です。しかしながら、 DOM はあらゆる個々のプログラミング言語から独立して設計され、ドキュメントの構造的な表現の作成が、単独で、一貫した API により利用できます。当サイトでは終始 JavaScript に焦点を置きますが、DOM の実装は<a href="http://www.w3.org/DOM/Bindings">あらゆる言語</a> でビルドする事が出来ます。</p> +<p><a href="http://www.w3.org/">World Wide Web Consortium</a> は W3C DOM と呼ばれる <a href="http://www.w3.org/DOM/">DOM 標準</a>を設けました。今こそ、有力なブラウザは正しくこれを実装し、強力なクロスブラウザアプリケーションを可能にすべきです。</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">何故 Mozilla が DOM をサポートすることが重要か</h2> +<p>"Dynamic HTML" (<a href="/ja/docs/DHTML">DHTML</a>) は、あるベンダーが、HTML、スタイルシート、及びドキュメントを活発にするスクリプトの組み合わせを表現するのに使われる一方言です。 W3C DOM ワーキンググループは、必ずや相互実行可能且つ言語的に中立なソリューションが合意に至るよう熱心に努めています(<a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a> も見てください)。Mozilla が "ウェブアプリケーションプラットフォーム" を標榜するならば、DOM のサポートは最も求められる機能の一つであり、もし Mozilla が他のブラウザの代替として成功したいのなら、欠かせないものです。</p> +<p>さらにより重要なことは、Mozilla (Firefox や Thunderbird も然り) のユーザインタフェースが XUL -- XML User interface Language でビルドされているという事実です。故に Mozilla は<a href="/ja/docs/Dynamically_modifying_XUL-based_user_interface">自身の UI を操作する</a>為に DOM を使います。</p> diff --git a/files/ja/dom/dispatchevent_example/index.html b/files/ja/dom/dispatchevent_example/index.html new file mode 100644 index 0000000000..88587c3f3f --- /dev/null +++ b/files/ja/dom/dispatchevent_example/index.html @@ -0,0 +1,27 @@ +--- +title: dispatchEvent example +slug: DOM/dispatchEvent_example +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +<div class="noinclude"> + {{ApiRef}}</div> +<p>次の例では DOM メソッドを使用してチェックボックスのクリックをシミュレート（※スクリプトでクリックイベントを生成）しています。</p> +<pre>function simulateClick() { + var evt = <a href="/ja/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a>("MouseEvents"); + evt.<a href="/ja/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a>("click", true, true, window, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + var cb = document.getElementById("checkbox"); + var canceled = !cb.<a href="/ja/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">dispatchEvent</a>(evt); + if(canceled) { + // A handler called preventDefault + alert("canceled"); + } else { + // None of the handlers called preventDefault + alert("not canceled"); + } +}</pre> +<p><a class="button liveSample external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">実際の表示を確認</a></p> diff --git a/files/ja/dom/storage/index.html b/files/ja/dom/storage/index.html new file mode 100644 index 0000000000..c75098e6ce --- /dev/null +++ b/files/ja/dom/storage/index.html @@ -0,0 +1,13 @@ +--- +title: DOM Storage +slug: DOM/Storage +tags: + - DOM + - Gecko + - HTML5 + - JavaScript + - Offline web applications + - 要更新 +translation_of: Web/API/Web_Storage_API +--- +<p>REDIRECT <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API">Web Storage API</a></p> diff --git a/files/ja/dom/using_the_camera_api/index.html b/files/ja/dom/using_the_camera_api/index.html new file mode 100644 index 0000000000..342fb92134 --- /dev/null +++ b/files/ja/dom/using_the_camera_api/index.html @@ -0,0 +1,225 @@ +--- +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> |