diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index ebd4d9920ed2a7..e36a8c85738c3d 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -589,7 +589,7 @@ /ja/docs/DOM/DOM_Storage /ja/docs/Web/API/Web_Storage_API /ja/docs/DOM/DOM_event_reference/compositionend /ja/docs/Web/API/Element/compositionend_event /ja/docs/DOM/DOM_event_reference/compositionstart /ja/docs/Web/API/Element/compositionstart_event -/ja/docs/DOM/DOM_event_reference/input /ja/docs/Web/API/HTMLElement/input_event +/ja/docs/DOM/DOM_event_reference/input /ja/docs/Web/API/Element/input_event /ja/docs/DOM/Document.querySelector /ja/docs/Web/API/Document/querySelector /ja/docs/DOM/Document.scripts /ja/docs/Web/API/Document/scripts /ja/docs/DOM/Element.hasAttributes /ja/docs/Web/API/Element/hasAttributes @@ -640,7 +640,7 @@ /ja/docs/DOM/MediaQueryList /ja/docs/Web/API/MediaQueryList /ja/docs/DOM/Mozilla_event_reference/compositionend /ja/docs/Web/API/Element/compositionend_event /ja/docs/DOM/Mozilla_event_reference/compositionstart /ja/docs/Web/API/Element/compositionstart_event -/ja/docs/DOM/Mozilla_event_reference/input /ja/docs/Web/API/HTMLElement/input_event +/ja/docs/DOM/Mozilla_event_reference/input /ja/docs/Web/API/Element/input_event /ja/docs/DOM/MutationObserver /ja/docs/Web/API/MutationObserver /ja/docs/DOM/Node /ja/docs/Web/API/Node /ja/docs/DOM/Node.appendChild /ja/docs/Web/API/Node/appendChild @@ -2681,6 +2681,7 @@ /ja/docs/Web/API/Document/inputEncoding /ja/docs/Web/API/Document/characterSet /ja/docs/Web/API/Document/keydown_event /ja/docs/Web/API/Element/keydown_event /ja/docs/Web/API/Document/keyup_event /ja/docs/Web/API/Element/keyup_event +/ja/docs/Web/API/Document/lostpointercapture_event /ja/docs/conflicting/Web/API/Element/lostpointercapture_event /ja/docs/Web/API/Document/onafterscriptexecute /ja/docs/Web/API/Document/afterscriptexecute_event /ja/docs/Web/API/Document/onbeforescriptexecute /ja/docs/Web/API/Document/beforescriptexecute_event /ja/docs/Web/API/Document/onfullscreenchange /ja/docs/Web/API/Document/fullscreenchange_event @@ -2781,7 +2782,7 @@ /ja/docs/Web/API/GlobalEventHandlers/onfocus /ja/docs/Web/API/Window/focus_event /ja/docs/Web/API/GlobalEventHandlers/onformdata /ja/docs/Web/API/HTMLFormElement/formdata_event /ja/docs/Web/API/GlobalEventHandlers/ongotpointercapture /ja/docs/Web/API/Element/gotpointercapture_event -/ja/docs/Web/API/GlobalEventHandlers/oninput /ja/docs/Web/API/HTMLElement/input_event +/ja/docs/Web/API/GlobalEventHandlers/oninput /ja/docs/Web/API/Element/input_event /ja/docs/Web/API/GlobalEventHandlers/oninvalid /ja/docs/Web/API/HTMLInputElement/invalid_event /ja/docs/Web/API/GlobalEventHandlers/onkeydown /ja/docs/Web/API/Element/keydown_event /ja/docs/Web/API/GlobalEventHandlers/onkeypress /ja/docs/Web/API/Element/keypress_event @@ -2824,8 +2825,10 @@ /ja/docs/Web/API/HTMLElement/animationend_event /ja/docs/Web/API/Element/animationend_event /ja/docs/Web/API/HTMLElement/animationiteration_event /ja/docs/Web/API/Element/animationiteration_event /ja/docs/Web/API/HTMLElement/animationstart_event /ja/docs/Web/API/Element/animationstart_event +/ja/docs/Web/API/HTMLElement/beforeinput_event /ja/docs/Web/API/Element/beforeinput_event /ja/docs/Web/API/HTMLElement/contextMenu /ja/docs/orphaned/Web/API/HTMLElement/contextMenu /ja/docs/Web/API/HTMLElement/gotpointercapture_event /ja/docs/Web/API/Element/gotpointercapture_event +/ja/docs/Web/API/HTMLElement/input_event /ja/docs/Web/API/Element/input_event /ja/docs/Web/API/HTMLElement/lostpointercapture_event /ja/docs/Web/API/Element/lostpointercapture_event /ja/docs/Web/API/HTMLElement/oncopy /ja/docs/Web/API/HTMLElement/copy_event /ja/docs/Web/API/HTMLElement/oncut /ja/docs/Web/API/HTMLElement/cut_event @@ -3840,7 +3843,7 @@ /ja/docs/Web/Events/fullscreenerror /ja/docs/Web/API/Document/fullscreenerror_event /ja/docs/Web/Events/gamepadconnected /ja/docs/Web/API/Window/gamepadconnected_event /ja/docs/Web/Events/gamepaddisconnected /ja/docs/Web/API/Window/gamepaddisconnected_event -/ja/docs/Web/Events/input /ja/docs/Web/API/HTMLElement/input_event +/ja/docs/Web/Events/input /ja/docs/Web/API/Element/input_event /ja/docs/Web/Events/install /ja/docs/Web/API/Window/appinstalled_event /ja/docs/Web/Events/load /ja/docs/Web/API/Window/load_event /ja/docs/Web/Events/loadeddata /ja/docs/Web/API/HTMLMediaElement/loadeddata_event @@ -3966,6 +3969,9 @@ /ja/docs/Web/Guide/Index /ja/docs/Web/Guide /ja/docs/Web/Guide/Introduction_to_Web_development /ja/docs/Learn /ja/docs/Web/Guide/Localizations_and_character_encodings /ja/docs/orphaned/Web/Guide/Localizations_and_character_encodings +/ja/docs/Web/Guide/Mobile /ja/docs/Learn/CSS/CSS_layout/Responsive_Design +/ja/docs/Web/Guide/Mobile/A_hybrid_approach /ja/docs/Learn/CSS/CSS_layout/Responsive_Design +/ja/docs/Web/Guide/Mobile/Mobile-friendliness /ja/docs/Learn/CSS/CSS_layout/Responsive_Design /ja/docs/Web/Guide/Mobile/Separate_sites /ja/docs/Web/Progressive_web_apps /ja/docs/Web/Guide/Parsing_and_serializing_XML /ja/docs/Web/XML/Parsing_and_serializing_XML /ja/docs/Web/Guide/Performance /ja/docs/Web/Performance @@ -4504,7 +4510,7 @@ /ja/docs/Web/Reference/Events/fullscreenerror /ja/docs/Web/API/Document/fullscreenerror_event /ja/docs/Web/Reference/Events/gamepadconnected /ja/docs/Web/API/Window/gamepadconnected_event /ja/docs/Web/Reference/Events/gamepaddisconnected /ja/docs/Web/API/Window/gamepaddisconnected_event -/ja/docs/Web/Reference/Events/input /ja/docs/Web/API/HTMLElement/input_event +/ja/docs/Web/Reference/Events/input /ja/docs/Web/API/Element/input_event /ja/docs/Web/Reference/Events/install /ja/docs/Web/API/Window/appinstalled_event /ja/docs/Web/Reference/Events/load /ja/docs/Web/API/Window/load_event /ja/docs/Web/Reference/Events/mousedown /ja/docs/Web/API/Element/mousedown_event @@ -4617,7 +4623,7 @@ /ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters /ja/docs/Web/API/XSLTProcessor /ja/docs/Web2/Reference/Events/compositionend /ja/docs/Web/API/Element/compositionend_event /ja/docs/Web2/Reference/Events/compositionstart /ja/docs/Web/API/Element/compositionstart_event -/ja/docs/Web2/Reference/Events/input /ja/docs/Web/API/HTMLElement/input_event +/ja/docs/Web2/Reference/Events/input /ja/docs/Web/API/Element/input_event /ja/docs/WebAPI /ja/docs/Web/API /ja/docs/WebAPI/Battery_Status /ja/docs/Web/API/Battery_Status_API /ja/docs/WebAPI/Managing_screen_orientation /ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation @@ -4655,7 +4661,7 @@ /ja/docs/Web_Development /ja/docs/Web/Guide /ja/docs/Web_Development/Historical_artifacts_to_avoid /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/Web_Development/Introduction_to_Web_development /ja/docs/Learn -/ja/docs/Web_Development/Mobile /ja/docs/Web/Guide/Mobile +/ja/docs/Web_Development/Mobile /ja/docs/Learn/CSS/CSS_layout/Responsive_Design /ja/docs/Web_Development/Mobile/Responsive_design /ja/docs/Web/Progressive_web_apps /ja/docs/Web_Development/Writing_forward-compatible_websites /ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript /ja/docs/Whitespace_in_the_DOM /ja/docs/Web/API/Document_Object_Model/Whitespace diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 59551977e6a9b0..a9ed5d43621e69 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -7268,10 +7268,6 @@ "modified": "2020-10-15T21:21:49.768Z", "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank"] }, - "Web/API/Document/lostpointercapture_event": { - "modified": "2020-10-15T22:16:22.873Z", - "contributors": ["mfuji09"] - }, "Web/API/Document/open": { "modified": "2020-10-15T21:15:48.961Z", "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank", "Potappo"] @@ -7618,6 +7614,10 @@ "modified": "2020-10-17T03:58:22.731Z", "contributors": ["Potappo", "Shirasu"] }, + "Web/API/Element/beforeinput_event": { + "modified": "2020-12-09T10:48:15.929Z", + "contributors": ["mfuji09", "Wind1808"] + }, "Web/API/Element/blur_event": { "modified": "2020-10-15T21:58:39.988Z", "contributors": ["mfuji09", "fscholz", "TNKSoftware"] @@ -7878,6 +7878,10 @@ "Hfjapancom" ] }, + "Web/API/Element/input_event": { + "modified": "2020-10-15T22:22:03.393Z", + "contributors": ["mfuji09"] + }, "Web/API/Element/insertAdjacentHTML": { "modified": "2019-03-23T23:38:38.922Z", "contributors": [ @@ -9041,10 +9045,6 @@ "modified": "2020-10-15T22:02:47.537Z", "contributors": ["dskmori", "8845musign"] }, - "Web/API/HTMLElement/beforeinput_event": { - "modified": "2020-12-09T10:48:15.929Z", - "contributors": ["mfuji09", "Wind1808"] - }, "Web/API/HTMLElement/blur": { "modified": "2020-10-15T21:21:43.979Z", "contributors": ["mfuji09", "Wind1808", "fscholz", "ethertank"] @@ -9108,10 +9108,6 @@ "modified": "2020-10-15T21:43:21.632Z", "contributors": ["genzai", "mfuji09", "momdo", "j5a"] }, - "Web/API/HTMLElement/input_event": { - "modified": "2020-10-15T22:22:03.393Z", - "contributors": ["mfuji09"] - }, "Web/API/HTMLElement/isContentEditable": { "modified": "2020-10-15T21:21:11.925Z", "contributors": ["mfuji09", "fscholz", "AshfaqHossain", "ethertank"] @@ -20299,18 +20295,6 @@ "modified": "2020-07-24T06:19:03.585Z", "contributors": ["Wind1808"] }, - "Web/Guide/Mobile": { - "modified": "2020-03-07T14:24:28.388Z", - "contributors": ["mfuji09", "silverskyvicto"] - }, - "Web/Guide/Mobile/A_hybrid_approach": { - "modified": "2019-04-11T09:38:06.495Z", - "contributors": ["Wind1808"] - }, - "Web/Guide/Mobile/Mobile-friendliness": { - "modified": "2019-04-16T23:59:54.980Z", - "contributors": ["Uemmra3", "Wind1808"] - }, "Web/HTML": { "modified": "2020-12-14T11:33:50.265Z", "contributors": [ @@ -30166,6 +30150,10 @@ "modified": "2020-10-15T21:21:07.088Z", "contributors": ["mfuji09", "fscholz", "AshfaqHossain", "ethertank"] }, + "conflicting/Web/API/Element/lostpointercapture_event": { + "modified": "2020-10-15T22:16:22.873Z", + "contributors": ["mfuji09"] + }, "conflicting/Web/API/Element/touchcancel_event": { "modified": "2020-10-15T22:15:27.879Z", "contributors": ["mfuji09"] diff --git a/files/ja/web/api/document/lostpointercapture_event/index.md b/files/ja/conflicting/web/api/element/lostpointercapture_event/index.md similarity index 95% rename from files/ja/web/api/document/lostpointercapture_event/index.md rename to files/ja/conflicting/web/api/element/lostpointercapture_event/index.md index e1f0ae25fa65a6..9b0f79e1e1fb06 100644 --- a/files/ja/web/api/document/lostpointercapture_event/index.md +++ b/files/ja/conflicting/web/api/element/lostpointercapture_event/index.md @@ -1,6 +1,7 @@ --- title: "Document: lostpointercapture イベント" -slug: Web/API/Document/lostpointercapture_event +slug: conflicting/Web/API/Element/lostpointercapture_event +original_slug: Web/API/Document/lostpointercapture_event --- {{APIRef}} diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.md b/files/ja/web/api/element/beforeinput_event/index.md similarity index 97% rename from files/ja/web/api/htmlelement/beforeinput_event/index.md rename to files/ja/web/api/element/beforeinput_event/index.md index 17ef3896ee2960..7a30331a0d02a1 100644 --- a/files/ja/web/api/htmlelement/beforeinput_event/index.md +++ b/files/ja/web/api/element/beforeinput_event/index.md @@ -1,8 +1,7 @@ --- title: "HTMLElement: beforeinput イベント" -slug: Web/API/HTMLElement/beforeinput_event -l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 +slug: Web/API/Element/beforeinput_event +original_slug: Web/API/HTMLElement/beforeinput_event --- {{APIRef}} diff --git a/files/ja/web/api/htmlelement/input_event/index.md b/files/ja/web/api/element/input_event/index.md similarity index 96% rename from files/ja/web/api/htmlelement/input_event/index.md rename to files/ja/web/api/element/input_event/index.md index b107df604347f4..2fa7f7cd1fff76 100644 --- a/files/ja/web/api/htmlelement/input_event/index.md +++ b/files/ja/web/api/element/input_event/index.md @@ -1,8 +1,7 @@ --- title: "HTMLElement: input イベント" -slug: Web/API/HTMLElement/input_event -l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 +slug: Web/API/Element/input_event +original_slug: Web/API/HTMLElement/input_event --- {{APIRef}} diff --git a/files/ja/web/guide/mobile/a_hybrid_approach/index.md b/files/ja/web/guide/mobile/a_hybrid_approach/index.md deleted file mode 100644 index 4bb1da27886f11..00000000000000 --- a/files/ja/web/guide/mobile/a_hybrid_approach/index.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: ハイブリッドアプローチ -slug: Web/Guide/Mobile/A_hybrid_approach -l10n: - sourceCommit: c07e10915553888f8c33d4284e2ced107cd9c55c ---- - -{{QuickLinksWithSubPages("/ja/docs/Web/Guide/Mobile")}} - -銀の弾丸はウェブ開発で見つけるのが難しいです — 状況に応じてさまざまなテクニックを最大限に活用する戦略に出くわす可能性が高くなります。 これは第 3 のアプローチです。 これは、サイトを分けることと[レスポンシブデザイン](/ja/docs/Web/Progressive_web_apps)のアプローチの欠点のいくつかを、組み合わせることで回避することを目的としています。 - -このハイブリッドアプローチは、モバイル開発を [3 つの目標](/ja/docs/Web/Guide/Mobile/Mobile-friendliness)に分割し、次に各目標に個別に取り組むために利用可能な最善のテクニックを適用することを中心としています。 この記事では、ここでは例としてテクニックの潜在的な組み合わせの 1 つを紹介しますが、さまざまな状況ではさまざまな組み合わせが適切になります。 覚えておくべき最も重要な概念は、サーバー側とクライアント側のテクニックをあなたの状況に合うように組み合わせることができるということです。 - -## 長所 - -レスポンシブウェブデザインは素晴らしいものです — 今のところそれはさまざまな状況でレイアウトをできるだけ良く見せるために利用可能な最良のテクニックです。 モバイルとデスクトップのユースケースが十分に似ている場合、これはレイアウト変更のための間違いなく好ましい選択肢です。 ただし、サイトのコンテンツをユーザーのコンテキストに合うように変えるためにクライアント側のテクニックを使用するのは面倒です。 - -幸いなことに、ここではクライアント側のテクニックを使用することに技術的に制限されていません。もう 1 つの選択肢は、サーバー側のユーザーエージェント検出を使用してユーザーに正しいコンテンツを表示することです。 これにより、サーバー側でコンテンツを変えるという複雑さが保たれますが、それでも私たちのレイアウトはレスポンシブデザインの柔軟性と将来の備えから利益を得ることができます。 - -レイアウトではなくコンテンツのためにユーザーエージェント検出を使用すると、コンテンツごとに 1 つの URL を設定して、コンテンツのレイアウトをユーザーのブラウザーに合わせることもできます。 これは一般的に[良いこと](https://www.w3.org/TR/mobile-bp/#OneWeb)（英語）だと考えられています。 まったく異なる 2 つのサイトを管理するのではなく、ユーザーが気になるコンテンツのページに転送するだけです。 そしてデザインはレスポンシブなので、各ページはユーザーの画面上で可能な限り見栄えがよいことがわかります。 - -また、サーバー側のテクニックを取り入れることで、レスポンシブデザインのパフォーマンスの問題に対処することもできます。 例えば、レスポンシブウェブデザインに関してよく批判されている点は、フル解像度の画像が、常に縮小された画像を表示する携帯電話を含むすべての端末に送信されることです。 この問題に対処するためのそのような[テクニックの 1 つ](https://www.scientiamobile.com/capabilities/?search=image)は、 [WURFL](http://wurfl.sourceforge.net/) 端末能力ライブラリーと一緒にサーバー側のユーザーエージェント検出を使用して、ユーザーの端末用に適切なサイズの画像を送信することです。 これをサービスとして提供する様々な[製品](https://www.sencha.com/platform/)（英語）も登場しています。 もちろん、このテクニックには、ユーザーエージェント検出に関連したすべての欠点があります。 それでもうまくいかなくても、[fluid images](https://unstoppablerobotninja.com/entry/fluid-images/)（利用可能なスペースに応じて拡大縮小する柔軟な画像）を使用するよりもパフォーマンスに関しては悪くありません。 - -上記のテクニックを組み合わせることで、純粋な別々のサイトよりも柔軟で、純粋なレスポンシブデザインよりも優れたパフォーマンスを持つ、モバイルウェブ開発戦略を得ることができます。 - -## 短所 - -混合アプローチの 1 つの欠点は、クライアント側とサーバー側の両方でコードパスの数が増加する可能性があることです。 これにより、他のアプローチよりも開発に時間がかかります。 しかし、適切に計画すれば、コードを保守可能な方法で整理することができます。 もう 1 つの欠点は、このアプローチはレスポンシブデザインに依存しているため、通常、レトロフィットとしてではなく、新しいプロジェクトまたは既存のフレキシブルレイアウトを持つプロジェクトに最も適していることです。 同様に、ユーザーエージェント検出を使用しているため、時間が経つにつれて検出ルールを更新する必要があります。 - -## この選択肢を選ぶのが正しい場合 - -サーバー側とクライアント側のテクニックを組み合わせることは、常に考慮に値するものです。 非常に多くの選択肢があるので、採用した個々のテクニックの長所と短所を比較検討する必要があります。 - -多くの場合、ハイブリッドアプローチの複雑さが増すことは必然ではありません。 例えば、ユーザーが実際に使用しているデバイスに基づいてコンテンツを調整する必要すらないかもしれません — ブラウザーに機能があるかどうかを知るだけで十分な場合があります。 これは、[Modernizr](https://modernizr.com/docs/#s2) の JavaScript 機能検出または [Detect It](https://github.com/rafgraph/detect-it) を使用して、クライアント側で識別できる可能性があるものです。 実際に自分のコンテンツを調整しようとしている軸を掘り下げて自問するのは害になることはありません。 - -サーバー側のテクニックをレスポンシブデザインに取り入れることについて説明しましたが、モバイルとデスクトップのユースケースが大きく異なる場合は、ハイブリッドアプローチを使用する方法もあります。 例えば、メディアクエリとフレキシブルレイアウトを組み合わせることで、別々のサイトのデザインの柔軟性を高めることができます。 あなたもモバイルサイトのデザインをタブレットにも快適に拡張するのに十分適応可能にすることができるかもしれません。 - -## 例 - -![webowonder_mobile_and_desktop-300x225.jpg](webowonder_mobile_and_desktop-300x225.jpg)Mozilla の Web O Wonder デモサイトでは、ハイブリッドアプローチの基本バージョンを試してみましたが、良い結果が得られました。 レスポンシブウェブデザインのいくつかの要素を使用して、サイトにモバイルレイアウトを設定したり、ユーザーエージェント検出を使用してモバイル向けの動画を提供したり、ユーザーが携帯電話の場合はデモを並べ替えたりします。 [GitHub](https://github.com/mozilla/webowonder/) でソースコードをチェックしてください。 - -私達はまたこのアプローチを含むもっと多くの開発をすぐにやることができます！ 実際、次のようなメインの Mozilla サイトへの 1 つの可能性のある道筋は、上の「長所」セクションで概説されています。 - -- ユーザーエージェント検出を使用して、訪問者を自分のデバイス用の Firefox バージョンのランディングページに転送します。 -- サイト上のすべてのページは、レスポンシブデザインを念頭に置いて作成されており、さまざまな解像度で見栄えがよいはずです。 -- 今後の計画では、ユーザーエージェントに基づいて画像を提供することを検討します。 - -物事はまだ開発段階にあるので、これまでのところモバイルについてはそれほど多くはありませんが、新しい mozilla.org が [GitHub](https://github.com/mozilla/bedrock) で成長するのをいつでも見ることができます。 私たちの進歩についての最新情報は [Mozilla Webdev](https://blog.mozilla.org/webdev/) ブログを購読してください。 - -## まとめ - -万能の解決策はありません。 モバイルユーザーのコンテンツやユーザーフローを大幅に変更したいウェブアプリケーションは、おそらく別のモバイルサイトに移動する必要があります。 モバイルユーザー向けにコンテンツを変更する必要がないコンテンツ指向のページは、レスポンシブデザインで満足するでしょう。 モバイルユーザー向けのサイトのメッセージを少し変える必要があるが、レスポンシブデザインのメリットを享受したい場合は、ハイブリッドアプローチが最善の策です。 このような決定は、モバイルウェブ開発の中核をなすものです。 達成したいことについて具体的に考え、妥協点を認識しながら実用的なアプローチを選択することです。 がんばろう！ - -## モバイルウェブ開発への取り組み - -モバイルプラットフォーム向けに開発するための背景やその他のアプローチについては、以下の記事を参照してください。 - -- [モバイルフレンドリーとは](/ja/docs/Web/Guide/Mobile/Mobile-friendliness) -- [レスポンシブデザイン](/ja/docs/Web/Progressive_web_apps) - -### 原典情報 - -この記事は、もともと 2011 年 6 月 27 日に Mozilla Webdev ブログで「[モバイルウェブ開発へのアプローチ 第 4 回 – ハイブリッドアプローチ](https://blog.mozilla.org/webdev/2011/06/27/approaches-to-mobile-web-development-part-4-%E2%80%93-a-hybrid-approach/)」として Jason Grlicky によって公開されました。（英語） diff --git a/files/ja/web/guide/mobile/index.md b/files/ja/web/guide/mobile/index.md deleted file mode 100644 index 1c4bdd9106cf9c..00000000000000 --- a/files/ja/web/guide/mobile/index.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: モバイルウェブ開発 -slug: Web/Guide/Mobile -l10n: - sourceCommit: 1f3cb2a075350c2e85fbe59a5594180590e30ebf ---- - - - -このページでは、モバイル端末で適切に機能するウェブサイトを設計するために必要となる、主要な一部のテクニックの概要を説明します。 Mozilla の Firefox OS プロジェクトに関する情報を探している場合は、 [Firefox OS](/ja/docs/Mozilla/Firefox_OS) のページを参照してください。または、 [Android 版 Firefox](/ja/docs/Mozilla/Firefox_for_Android) に興味があるかもしれません。 - -[モバイル端末向けの設計](#designing_for_mobile_devices)と[ブラウザー間の互換性](#cross-browser_development)の 2 つの節に整理しました。また、 Jason Grlicky によるウェブ開発者向けの[モバイルへの親和性](/ja/docs/Web/Guide/Mobile/Mobile-friendliness)のガイドも参照してください。 - -## モバイル端末向けの設計 - -モバイル端末は、デスクトップパソコンやノートパソコンと比較して、ハードウェアの特性がまったく異なります。画面は通常、明らかに小さくなりますが、ユーザーが端末を回転させると、画面の向きがポートレートモードとランドスケープモードの間で自動的に切り替わります。通常、ユーザー入力用のタッチスクリーンがあります。位置情報や画面の向きなどの API は、デスクトップでは未対応であったりあまり有用でなかったりしますので、これらの API はモバイルユーザーに、サイトと対話するための新しい方法を提供します。 - -### 小さな画面での作業 - -[レスポンシブウェブデザイン](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)は、ウェブサイトのレイアウトを表示する環境 — 特に、大きさと画面の向き — の変化に合わせることができる一連の技術を表す用語です。これには次のような技術が含まれています。 - -- 流動的 CSS レイアウトにより、ブラウザーの大きさが変化したときにページを円滑に合わせる -- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries)を使用して、端末の画面の[幅](/ja/docs/Web/CSS/@media/width)と[高さ](/ja/docs/Web/CSS/@media/height)にふさわしい CSS の規則を条件付きで含める - -[viewport メタタグ](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design#the_viewport_meta_tag)で、ブラウザーに対してユーザーの端末の適切な表示倍率でサイトを表示するよう指示します。 - -### タッチ画面での操作 - -タッチ画面を使うには、 [DOM タッチイベント](/ja/docs/Web/API/Touch_events)の作業をする必要があります。 CSS の {{cssxref(":hover")}} 擬似クラスを使用することはできないでしょうし、指はマウスポインターより太いという事実を考慮して、クリック可能なアイテムをボタンのようにデザインする必要があるでしょう。この記事、 [designing for touch screens](https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/) を参照してください。 - -[pointer](/ja/docs/Web/CSS/@media/pointer) または [any-pointer](/ja/docs/Web/CSS/@media/any-pointer) メディアクエリーを使用して、タッチ可能な端末で異なる CSS を読み込むことができます。 - -### 画像の最適化 - -端末の帯域幅が低かったり高価だったりするユーザーを支援するために、デバイスの画面サイズと解像度に適した画像をロードして画像を最適化することができます。 CSS でこれを行うには、画面の[高さ](/ja/docs/Web/CSS/@media/height)、[幅](/ja/docs/Web/CSS/@media/width)、[ピクセル比](/ja/docs/Web/CSS/@media/resolution)でクエリーを行います。 - -CSS プロパティを使用して、画像を使用せずに[グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)や[影](/ja/docs/Web/CSS/box-shadow)などの視覚効果を実装することもできます。 - -### モバイル API - -最後に、[端末の向き](/ja/docs/Web/API/Device_orientation_events/Detecting_device_orientation)や[位置情報](/ja/docs/Web/API/Geolocation_API)など、モバイル端末が提供する新しい可能性の利点を活用することができます。 - -## クロスブラウザー開発 - -### クロスブラウザーコードを書く - -様々なモバイル端末で受け入れられ動作するウェブサイトを作成するには、以下のことが必要です。 - -- ベンダー接頭辞のついた CSS プロパティなど、ブラウザーに依存した機能を使用することを避けるようにしてください。 -- これらの機能に対応していないブラウザーでは、コンテンツが使用できる限り、ベンダー接頭辞付きの代替手段を提供しないでください。`-webkit-border-radius` のようなベンダー接頭辞つきプロパティは、現代の標準に対応していない古いブラウザーではパフォーマンスに悪影響を及ぼします。 -- パフォーマンスを損なわないように代替手段を用いて新機能を使用するには、現在のブラウザーを対象としたスタイルを設定し、 [`@supports`](/ja/docs/Web/CSS/@supports) 機能クエリーを使用して、最新の CSS を対応するブラウザーのために使用するようにしましょう。 - -この [Gecko 固有のプロパティの一覧](/ja/docs/Web/CSS/Mozilla_Extensions)と、この [WebKit 固有のプロパティの一覧](/ja/docs/Web/CSS/WebKit_Extensions)、そして Peter Beverloo の [table of vendor-specific properties](https://peter.sh/experiments/vendor-prefixed-css-property-overview/) を確認してください。 - -### ユーザーエージェントの推測に注意 - -以上のような手法を使用して、ウェブサイトが画面の大きさやタッチ画面などといった特定の端末特性を検出し、それに適応することが望ましい形です。しかし、これは非現実的である場合があり、ウェブサイトがブラウザーのユーザーエージェント文字列を解析して、デスクトップ、タブレット、携帯電話を区別し、端末ごとに異なるコンテンツを提供することに手を出しがちです。 - -これを行う場合は、アルゴリズムが正しく、特定のブラウザーのユーザーエージェント文字列を理解していないために、間違った種類のコンテンツをデバイスに提供していないことを確認してください。[ユーザーエージェント文字列を使用して端末の種類を決定するガイド](/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent#モバイルか、タブレットか、デスクトップか)を参照してください。 - -### 複数のブラウザーでのテスト - -ウェブサイトを複数のブラウザーでテストしてください。これは複数のプラットフォームでテストをするということです。 — 少なくとも iOS と Android です。 - -- iPhone のモバイル Safari をテストするには、 [iOS シミュレーター](https://developer.apple.com/devcenter/ios/index.action)を使用します -- Opera や Firefox は [Android SDK](https://developer.android.com/studio#command-tools) でテストします。これらの詳しい操作方法は、 [running Firefox for Android using the Android emulator](https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator) を参照してください。 diff --git a/files/ja/web/guide/mobile/mobile-friendliness/index.md b/files/ja/web/guide/mobile/mobile-friendliness/index.md deleted file mode 100644 index a774c804e054c0..00000000000000 --- a/files/ja/web/guide/mobile/mobile-friendliness/index.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: モバイルフレンドリー -slug: Web/Guide/Mobile/Mobile-friendliness -l10n: - sourceCommit: c07e10915553888f8c33d4284e2ced107cd9c55c ---- - -{{QuickLinksWithSubPages("/ja/docs/Web/Guide/Mobile")}} - -## モバイルフレンドリーとは？ - -モバイルフレンドリー (mobile friendliness) は、相手によってさまざまな意味を持つことがあります。サイトの使い勝手を向上させるための 3 つの目標（プレゼンテーション、コンテンツ、パフォーマンス）の観点から考えると便利です。 - -### 目標 1（プレゼンテーション） - -**さまざまな画面サイズで適切に機能するウェブサイトを作成しましょう。** - -最近では、携帯電話、タブレット、電子ブックリーダーなど、さまざまな形状の端末でウェブにアクセスできます。言うまでもありませんが、複雑な JavaScript アニメーションとマウスオーバー効果でいっぱいの固定幅で 3 段組みのレイアウトは、2 インチ幅の画面と小型のプロセッサーを搭載した携帯電話では見た目も感じ方もよくありません。[タッチ画面に合わせた](https://www.lukew.com/ff/entry.asp?1085)（英語）、すっきりとまっすぐ並んだページレイアウトの方が、はるかに適切です。最初の目標が、モバイル端末のユーザーの生活を楽にするような方法でコンテンツを提示することにあるのはこのためです。 - -### 目標 2（コンテンツ） - -**モバイルユーザー向けにコンテンツを調整しましょう。** -![左のアラスカ航空のデスクトップサイトの画面と、同じページのモバイル版を示す iPhone の画面](alaska_air_mobile_and_desktop-300x225.png) - -ユーザーが携帯電話を使っている場合、ユーザーがあなたのサイトで何をしたいのかを考えてみましょう。その好例が、[アラスカエアのウェブサイト](http://www.alaskaair.com/)（英語）です。彼らのデスクトップサイトは訪問者に旅行を予約させることに焦点を合わせています。ところが、モバイルユーザーは、フライトのチェックインや、フライトが遅れるかどうかを確認することに関心があります。これを反映するようにサイトのコンテンツを調整し、モバイルユーザーのニーズを満たしています。 - -### 目標 3（パフォーマンス） - -**遅い接続でも、ユーザーにスムーズな操作を提供しましょう。** - -近年状況は良くなってきていますが、無線データ接続を介してインターネットを閲覧することは依然としてかなりつらいこともあります。そのため、実際に必要なものだけをユーザーに送信するという、[優れたパフォーマンスの実践](https://developer.yahoo.com/performance/rules.html)（英語）を実践することがこれまで以上に重要になります。 - -### 閲覧者を知る - -厳密にはモバイルフレンドリーの定義の一部ではありませんが、対象閲覧者が誰であるかを定義することで、これらの目標はより具体的になります。例えば、モバイル戦略を選択するときに、どのブラウザーと端末を対象にするかを念頭に置くことが絶対に重要です。閲覧者がアーリーアダプターでいっぱいであるならば、標準に適したブラウザーが搭載されたタブレットとスマートフォンに集中することができます。一方で、サイトのユーザーの多くが機能が低いブラウザーの端末を使用している場合は、実行可能な選択肢として特定の戦略が排除される可能性があります。 - -## モバイルウェブ開発へのアプローチ - -以下のアプローチは、さまざまな手段でこれらの各目標を達成することを目的としています。 - -- [レスポンシブデザイン](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design) -- [ハイブリッドアプローチ](/ja/docs/Web/Guide/Mobile/A_hybrid_approach) - -### 出典情報 - -原本は、2011 年 5 月 4 日に Mozilla Webdev ブログに「[モバイルウェブ開発へのアプローチ 第 1 部 - モバイルフレンドリーは？](https://blog.mozilla.org/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/)」として Jason Grlicky が公開したものです。