From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../archive/add-ons/developing_add-ons/index.html | 50 + files/zh-tw/archive/add-ons/index.html | 8 + .../index.html | 51 + .../working_with_multiprocess_firefox/index.html | 235 ++ .../zh-tw/archive/apps/advanced_topics/index.html | 76 + files/zh-tw/archive/apps/index.html | 8 + .../contacts/index.html | 71 + .../device_storage/index.html | 111 + .../geolocation/index.html | 20 + .../3rd_party_app_developer_guide/index.html | 90 + .../web_activity/index.html | 116 + .../index.html" | 70 + .../index.html" | 78 + files/zh-tw/archive/b2g_os/add-ons/index.html | 282 ++ files/zh-tw/archive/b2g_os/api/fmradio/index.html | 110 + files/zh-tw/archive/b2g_os/api/index.html | 156 + files/zh-tw/archive/b2g_os/apps/index.html | 45 + .../apps/writing_a_web_app_for_b2g/index.html | 25 + files/zh-tw/archive/b2g_os/architecture/index.html | 717 ++++ .../gaia_ui_tests_run_tests/index.html | 111 + .../automated_testing/gaia-ui-tests/index.html | 69 + .../archive/b2g_os/automated_testing/index.html | 77 + files/zh-tw/archive/b2g_os/building/index.html | 124 + .../firefox_os_build_process_summary/index.html | 108 + .../building_and_installing_firefox_os/index.html | 65 + .../choosing_how_to_run_gaia_or_b2g/index.html | 59 + files/zh-tw/archive/b2g_os/debugging/index.html | 21 + .../firefox_os_build_prerequisites/index.html | 606 ++++ files/zh-tw/archive/b2g_os/index.html | 222 ++ .../index.html | 53 + files/zh-tw/archive/b2g_os/introduction/index.html | 86 + .../archive/b2g_os/phone_guide/flame/index.html | 50 + files/zh-tw/archive/b2g_os/phone_guide/index.html | 6 + .../archive/b2g_os/phone_guide/zte_open/index.html | 287 ++ .../b2g_os/platform/apps_architecture/index.html | 24 + .../b2g_os/platform/gaia/gaia_apps/index.html | 78 + .../zh-tw/archive/b2g_os/platform/gaia/index.html | 68 + .../platform/gaia/introduction_to_gaia/index.html | 13 + .../zh-tw/archive/b2g_os/platform/gonk/index.html | 22 + files/zh-tw/archive/b2g_os/platform/index.html | 75 + .../index.html | 53 + .../preparing_for_your_first_b2g_build/index.html | 138 + .../archive/b2g_os/quickstart/app_tools/index.html | 28 + files/zh-tw/archive/b2g_os/quickstart/index.html | 51 + .../b2g_os/quickstart/your_first_app/index.html | 265 ++ files/zh-tw/archive/b2g_os/releases/1.2/index.html | 465 +++ files/zh-tw/archive/b2g_os/releases/index.html | 24 + .../index.html | 43 + .../index.html | 208 ++ .../security/application_security/index.html | 124 + files/zh-tw/archive/b2g_os/security/index.html | 70 + .../b2g_os/security/security_model/index.html | 299 ++ .../b2g_os/security/system_security/index.html | 376 ++ files/zh-tw/archive/b2g_os/simulator/index.html | 90 + .../simulator/simulator_walkthrough/index.html | 268 ++ .../b2g_os/using_the_app_manager/index.html | 259 ++ .../b2g_os/using_the_b2g_desktop_client/index.html | 180 + .../b2g_os/using_the_b2g_emulators/index.html | 69 + .../archive/b2g_os/web_telephony_api/index.html | 25 + .../writing_apps_for_boot_to_gecko/index.html | 12 + files/zh-tw/archive/css3/index.html | 584 ++++ files/zh-tw/archive/index.html | 21 + files/zh-tw/archive/mdn/index.html | 18 + .../zh-tw/archive/mdn/persona_sign-ins/index.html | 28 + .../archive/meta_docs/custom_classes/index.html | 189 + files/zh-tw/archive/meta_docs/index.html | 12 + .../creating_a_web_based_tone_generator/index.html | 91 + files/zh-tw/archive/misc_top_level/index.html | 8 + .../index.html | 18 + .../mozilla/creating_a_microsummary/index.html | 214 ++ .../zh-tw/archive/mozilla/drag_and_drop/index.html | 142 + files/zh-tw/archive/mozilla/firefox/index.html | 8 + .../mozilla/firefox/using_microformats/index.html | 78 + files/zh-tw/archive/mozilla/index.html | 10 + .../archive/mozilla/marketplace/apis/index.html | 36 + .../archive/mozilla/marketplace/faq/index.html | 154 + files/zh-tw/archive/mozilla/marketplace/index.html | 159 + .../marketplace/marketplace_apis/index.html | 69 + .../monetization/app_payments_guide/index.html | 48 + .../monetization/app_pricing/index.html | 3698 ++++++++++++++++++++ .../monetization/in-app_payments/index.html | 332 ++ .../mozilla/marketplace/monetization/index.html | 80 + .../introduction_monetization/index.html | 77 + .../monetization/payments_status/index.html | 30 + .../profiting_from_your_app/index.html | 95 + .../monetization/validating_a_receipt/index.html | 132 + .../marketplace/options/hosted_apps/index.html | 69 + .../publishing/adding_a_subdomain/index.html | 40 + .../publishing/creating_a_store/index.html | 22 + .../mozilla/marketplace/publishing/index.html | 9 + .../marketplace/publishing/introduction/index.html | 87 + .../managing_your_apps/app_statistics/index.html | 66 + .../marketplace_screenshot_criteria/index.html | 80 + .../publishing/packaged_apps/index.html | 75 + .../publishing/policies_and_guidelines/index.html | 10 + .../introduction/index.html | 39 + .../publishing/pricing/introduction/index.html | 57 + .../publishing/pricing/payment_accounts/index.html | 61 + .../promote_as_upgrade_to_free_version/index.html | 26 + .../publishing/privacy_policies/index.html | 28 + .../publishing/publish_options/index.html | 145 + .../publishing/submission_checklist/index.html | 72 + .../submit/enter_your_apps_details/index.html | 129 + .../marketplace/publishing/submit/index.html | 10 + .../publishing/submit/load_your_app/index.html | 134 + .../publishing/submit/next_steps/index.html | 16 + .../publishing/submit/overview/index.html | 128 + .../sign-in_to_your_developer_account/index.html | 52 + .../publishing/updating_apps/index.html | 27 + .../mozilla/marketplace/submission/index.html | 9 + .../marketplace_review_criteria/index.html | 80 + .../submission/pre-submission_checklist/index.html | 36 + .../submission/rating_your_content/index.html | 117 + .../index.html | 1070 ++++++ .../archive/mozilla/persona/branding/index.html | 42 + files/zh-tw/archive/mozilla/persona/index.html | 125 + .../persona/internationalization/index.html | 51 + .../archive/mozilla/persona/quick_setup/index.html | 137 + .../persona/remote_verification_api/index.html | 171 + .../archive/mozilla/persona/why_persona/index.html | 30 + files/zh-tw/archive/mozilla/xpinstall/index.html | 65 + .../xpinstall/scripting_by_example/index.html | 244 ++ files/zh-tw/archive/mozilla/xul/index.html | 99 + .../archive/mozilla/xul/template_guide/index.html | 5 + .../archive/mozilla/xul/the_joy_of_xul/index.html | 49 + .../archive/mozilla/xul/xul_reference/index.html | 344 ++ files/zh-tw/archive/mozilla/xulrunner/index.html | 88 + .../mozilla/xulrunner/xulrunner_tips/index.html | 213 ++ files/zh-tw/archive/themes/index.html | 11 + files/zh-tw/archive/web/e4x/index.html | 6 + .../web/e4x/processing_xml_with_e4x/index.html | 229 ++ files/zh-tw/archive/web/index.html | 12 + files/zh-tw/archive/web_standards/index.html | 76 + .../rdf_in_fifty_words_or_less/index.html | 85 + 134 files changed, 18697 insertions(+) create mode 100644 files/zh-tw/archive/add-ons/developing_add-ons/index.html create mode 100644 files/zh-tw/archive/add-ons/index.html create mode 100644 files/zh-tw/archive/add-ons/supporting_search_suggestions_in_search_plugins/index.html create mode 100644 files/zh-tw/archive/add-ons/working_with_multiprocess_firefox/index.html create mode 100644 files/zh-tw/archive/apps/advanced_topics/index.html create mode 100644 files/zh-tw/archive/apps/index.html create mode 100644 files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/contacts/index.html create mode 100644 files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/device_storage/index.html create mode 100644 files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/geolocation/index.html create mode 100644 files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/index.html create mode 100644 files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/web_activity/index.html create mode 100644 "files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\345\260\201\345\214\205\345\274\217_(packaged)_app/index.html" create mode 100644 "files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\346\211\230\347\256\241\346\233\264\346\226\260\344\275\234\346\245\255_(hosting_updates)_/index.html" create mode 100644 files/zh-tw/archive/b2g_os/add-ons/index.html create mode 100644 files/zh-tw/archive/b2g_os/api/fmradio/index.html create mode 100644 files/zh-tw/archive/b2g_os/api/index.html create mode 100644 files/zh-tw/archive/b2g_os/apps/index.html create mode 100644 files/zh-tw/archive/b2g_os/apps/writing_a_web_app_for_b2g/index.html create mode 100644 files/zh-tw/archive/b2g_os/architecture/index.html create mode 100644 files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/gaia_ui_tests_run_tests/index.html create mode 100644 files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/index.html create mode 100644 files/zh-tw/archive/b2g_os/automated_testing/index.html create mode 100644 files/zh-tw/archive/b2g_os/building/index.html create mode 100644 files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_process_summary/index.html create mode 100644 files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/zh-tw/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html create mode 100644 files/zh-tw/archive/b2g_os/debugging/index.html create mode 100644 files/zh-tw/archive/b2g_os/firefox_os_build_prerequisites/index.html create mode 100644 files/zh-tw/archive/b2g_os/index.html create mode 100644 files/zh-tw/archive/b2g_os/installing_boot_to_gecko_on_a_mobile_device/index.html create mode 100644 files/zh-tw/archive/b2g_os/introduction/index.html create mode 100644 files/zh-tw/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/zh-tw/archive/b2g_os/phone_guide/index.html create mode 100644 files/zh-tw/archive/b2g_os/phone_guide/zte_open/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/apps_architecture/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/gaia/gaia_apps/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/gaia/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/gonk/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/index.html create mode 100644 files/zh-tw/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html create mode 100644 files/zh-tw/archive/b2g_os/preparing_for_your_first_b2g_build/index.html create mode 100644 files/zh-tw/archive/b2g_os/quickstart/app_tools/index.html create mode 100644 files/zh-tw/archive/b2g_os/quickstart/index.html create mode 100644 files/zh-tw/archive/b2g_os/quickstart/your_first_app/index.html create mode 100644 files/zh-tw/archive/b2g_os/releases/1.2/index.html create mode 100644 files/zh-tw/archive/b2g_os/releases/index.html create mode 100644 files/zh-tw/archive/b2g_os/running_custom_builds_in_the_app_manager/index.html create mode 100644 files/zh-tw/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html create mode 100644 files/zh-tw/archive/b2g_os/security/application_security/index.html create mode 100644 files/zh-tw/archive/b2g_os/security/index.html create mode 100644 files/zh-tw/archive/b2g_os/security/security_model/index.html create mode 100644 files/zh-tw/archive/b2g_os/security/system_security/index.html create mode 100644 files/zh-tw/archive/b2g_os/simulator/index.html create mode 100644 files/zh-tw/archive/b2g_os/simulator/simulator_walkthrough/index.html create mode 100644 files/zh-tw/archive/b2g_os/using_the_app_manager/index.html create mode 100644 files/zh-tw/archive/b2g_os/using_the_b2g_desktop_client/index.html create mode 100644 files/zh-tw/archive/b2g_os/using_the_b2g_emulators/index.html create mode 100644 files/zh-tw/archive/b2g_os/web_telephony_api/index.html create mode 100644 files/zh-tw/archive/b2g_os/writing_apps_for_boot_to_gecko/index.html create mode 100644 files/zh-tw/archive/css3/index.html create mode 100644 files/zh-tw/archive/index.html create mode 100644 files/zh-tw/archive/mdn/index.html create mode 100644 files/zh-tw/archive/mdn/persona_sign-ins/index.html create mode 100644 files/zh-tw/archive/meta_docs/custom_classes/index.html create mode 100644 files/zh-tw/archive/meta_docs/index.html create mode 100644 files/zh-tw/archive/misc_top_level/creating_a_web_based_tone_generator/index.html create mode 100644 files/zh-tw/archive/misc_top_level/index.html create mode 100644 files/zh-tw/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html create mode 100644 files/zh-tw/archive/mozilla/creating_a_microsummary/index.html create mode 100644 files/zh-tw/archive/mozilla/drag_and_drop/index.html create mode 100644 files/zh-tw/archive/mozilla/firefox/index.html create mode 100644 files/zh-tw/archive/mozilla/firefox/using_microformats/index.html create mode 100644 files/zh-tw/archive/mozilla/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/apis/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/faq/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/marketplace_apis/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/app_payments_guide/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/app_pricing/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/in-app_payments/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/introduction_monetization/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/payments_status/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/profiting_from_your_app/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/monetization/validating_a_receipt/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/options/hosted_apps/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/adding_a_subdomain/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/creating_a_store/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/introduction/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/managing_your_apps/app_statistics/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/packaged_apps/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/introduction/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/pricing/introduction/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/pricing/payment_accounts/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/pricing/promote_as_upgrade_to_free_version/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/privacy_policies/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/publish_options/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submission_checklist/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submit/enter_your_apps_details/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submit/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submit/load_your_app/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submit/next_steps/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submit/overview/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/submit/sign-in_to_your_developer_account/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/publishing/updating_apps/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/submission/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html create mode 100644 files/zh-tw/archive/mozilla/marketplace/submission/rating_your_content/index.html create mode 100644 files/zh-tw/archive/mozilla/migrate_apps_from_internet_explorer_to_mozilla/index.html create mode 100644 files/zh-tw/archive/mozilla/persona/branding/index.html create mode 100644 files/zh-tw/archive/mozilla/persona/index.html create mode 100644 files/zh-tw/archive/mozilla/persona/internationalization/index.html create mode 100644 files/zh-tw/archive/mozilla/persona/quick_setup/index.html create mode 100644 files/zh-tw/archive/mozilla/persona/remote_verification_api/index.html create mode 100644 files/zh-tw/archive/mozilla/persona/why_persona/index.html create mode 100644 files/zh-tw/archive/mozilla/xpinstall/index.html create mode 100644 files/zh-tw/archive/mozilla/xpinstall/scripting_by_example/index.html create mode 100644 files/zh-tw/archive/mozilla/xul/index.html create mode 100644 files/zh-tw/archive/mozilla/xul/template_guide/index.html create mode 100644 files/zh-tw/archive/mozilla/xul/the_joy_of_xul/index.html create mode 100644 files/zh-tw/archive/mozilla/xul/xul_reference/index.html create mode 100644 files/zh-tw/archive/mozilla/xulrunner/index.html create mode 100644 files/zh-tw/archive/mozilla/xulrunner/xulrunner_tips/index.html create mode 100644 files/zh-tw/archive/themes/index.html create mode 100644 files/zh-tw/archive/web/e4x/index.html create mode 100644 files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html create mode 100644 files/zh-tw/archive/web/index.html create mode 100644 files/zh-tw/archive/web_standards/index.html create mode 100644 files/zh-tw/archive/web_standards/rdf_in_fifty_words_or_less/index.html (limited to 'files/zh-tw/archive') diff --git a/files/zh-tw/archive/add-ons/developing_add-ons/index.html b/files/zh-tw/archive/add-ons/developing_add-ons/index.html new file mode 100644 index 0000000000..048ba6dd7e --- /dev/null +++ b/files/zh-tw/archive/add-ons/developing_add-ons/index.html @@ -0,0 +1,50 @@ +--- +title: 開發附加元件 +slug: Archive/Add-ons/Developing_add-ons +translation_of: Archive/Add-ons/Developing_add-ons +--- +

大多數的 Mozilla　所開發的軟件，主要是透過「附加元件」來擴充其工能。 「附加元件」主要分成三大類：「擴充套件（Extensions）」 、「外掛程式（Plugin-ins）」及「佈景主題（Themes）」。本文的主要目的，是去指導及提供你所需的資訊用來去製作　Firefox　、　Thunderbird　．．．等等的　Mozilla　的軟體上的「附加元件」，以及提交及發佈你所製作的「附加元件」的方法。

+ + + + + + + + + + +
+

附加元件主題

+
+
+
+ 提交附加元件至 AMO
+
+ Provides helpful information for add-on developers to help them properly package and deliver their add-ons.  This includes information about addons.mozilla.org, Mozilla's add-on distribution web site.
+
+ 擴充套件
+
+ Extensions add new functionality to Mozilla applications such as Firefox, SeaMonkey and Thunderbird. They can add anything from a toolbar button to a completely new feature.
+
+ 外掛程式
+
+ Information about how to create plug-ins, which are binary components that let Mozilla based software display content they can't handle natively.
+
+ 		+
+
+ 佈景主題
+
+ Themes let users customize the appearance of the user interface presented by Mozilla-based applications.
+
+ 搜尋引擎外掛
+
+ Firefox supports search engine plug-ins, which enable the search box to support different search engines.
+
+ Mozilla 平台
+
+ Information about the Mozilla platform, including all of its APIs and technologies, as well as how to use them in your own projects.
+
+
+

 

diff --git a/files/zh-tw/archive/add-ons/index.html b/files/zh-tw/archive/add-ons/index.html new file mode 100644 index 0000000000..caac45ae4c --- /dev/null +++ b/files/zh-tw/archive/add-ons/index.html @@ -0,0 +1,8 @@ +--- +title: Add-ons +slug: Archive/Add-ons +translation_of: Archive/Add-ons +--- +

In progress. Archived add-ons documentation.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/zh-tw/archive/add-ons/supporting_search_suggestions_in_search_plugins/index.html b/files/zh-tw/archive/add-ons/supporting_search_suggestions_in_search_plugins/index.html new file mode 100644 index 0000000000..451d3dc91c --- /dev/null +++ b/files/zh-tw/archive/add-ons/supporting_search_suggestions_in_search_plugins/index.html @@ -0,0 +1,51 @@ +--- +title: 讓搜尋模組支援搜尋建議 +slug: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins +tags: + - 搜尋模組 +translation_of: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins +--- +

MozSearch 格式的搜尋模組可以支援搜尋建議，當使用者在搜尋欄中逐字鍵入關鍵詞時，Firefox 2 將依據搜尋模組內指定的 URL 送出查詢並取回結果。 +

取回結果之後，Firefox 將其顯示為一個下拉選單，讓使用者從中挑選搜尋引擎建議的關鍵詞。如果使用者繼續輸入關鍵詞，則會重新取回結果並更新選單。 +

Firefox 2 中內建的 Yahoo! 與 Google 搜尋模組都支援搜尋建議功能。 +

+

搜尋模組的工作

+

搜尋模組必須額外定義一個 <Url> 元素以便支援搜尋建議功能，此元素之 type 屬性需設定為 "application/x-suggestions+json"。支援搜尋建議功能的模組都會有兩個 <Url> 元素，另一個元素指定主要的 code>text/html</code> 搜尋 URL。 +

舉例來說，Yahoo! 搜尋模組的 <Url> 長得像這樣： +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchTerms}"/>
+
+

如果使用者在搜尋欄中輸入「fir」，則 Firefox 會將此 URL 的 {searchTerms} 代換為「fir」後送出搜尋： +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/>
+
+

搜尋回來的結果將構成建議詞清單。 +

製作搜尋模組的方法可以參考製作 MozSearch 搜尋模組一文。 +

+

伺服器端的工作

+

搜尋建議功能的重點在伺服端的程式，如果你是網站設計師而想支援搜尋建議功能，則必須實做出依據搜尋字串給予進一步搜尋建議詞彙、並以 JSON 格式傳回的功能。 +

當瀏覽器想取回搜尋字串時，會對 <Url> 元素指定的 URL 送出 HTTP GET 要求；此時伺服器則需依據字串決定相關字詞為何，並以 JSON 傳回 2 到 4 個建議字詞，如下： +

+
查詢字串 +
JSON 的第一個元素是原始查詢字串，這樣 Firefox 可以得知傳回值是否與目前查閱的字詞相符。 +
+
建議字詞列表 +
建議字詞的陣列，此陣列需以「{{ mediawiki.external('」及「') }}」括起，例如 <tt>{{ mediawiki.external('\"建議詞 1\", \"建議詞 2\", \"建議詞 3\", \"建議詞 4\"') }}</tt> +
+
說明 +
此元素為選用，亦為一個陣列，分別針對每個「建議字詞列表」的建議詞設定說明，其中可以是任何搜尋引擎想提供瀏覽器顯示的資訊，例如此建議詞有多少搜尋結果等等。 +
+
Firefox 2 尚不支援「說明」功能，會忽略此傳回值。
+
查詢網址 +
此元素為選用，還是一個陣列，內容是各建議詞的替代網址。打個比方：如果除搜尋結果頁面之外還想直接提供建議詞的地圖連結，那就可以將地圖的網址列在此陣列裡。 +
+
若沒有額外指定此元素，則將依據搜尋模組 XML 中的 <Url> 元素決定查詢網址。 +
+
Firefox 2 尚不支援「查詢網址」功能，會忽略此傳回值。
+

也就是說，若搜尋詞為「fir」且不傳回說明及查詢網址，則傳回的 JSON 應該是長這樣： +

+
["fir", ["firefox", "first choice", "mozilla firefox"]]
+
+

在此範例中只涵括查詢字串及建議字詞列表兩元素，其他選用的都不列入。 +

雖然建議的字詞想放多少就可以放多少，但由於每次使用者多打一個字都會查詢一次，所以還是有所限度比較穩當。至於怎麼依據使用者的要求提出建議，就全交給你自己決定了。 +

{{ languages( { "ca": "ca/Implementaci\u00f3_de_suggeriments_en_els_connectors_de_cerca", "en": "en/Supporting_search_suggestions_in_search_plugins", "es": "es/Permitir_sugerencias_en_los_plugins_de_b\u00fasqueda", "fr": "fr/Gestion_de_suggestions_dans_les_plugins_de_recherche", "it": "it/Supportare_i_suggerimenti_nei_plugin_di_ricerca", "ja": "ja/Supporting_search_suggestions_in_search_plugins", "pl": "pl/Wsparcie_dla_podpowiedzi_wyszukiwania_w_wyszukiwarkach" } ) }} diff --git a/files/zh-tw/archive/add-ons/working_with_multiprocess_firefox/index.html b/files/zh-tw/archive/add-ons/working_with_multiprocess_firefox/index.html new file mode 100644 index 0000000000..8b685c379e --- /dev/null +++ b/files/zh-tw/archive/add-ons/working_with_multiprocess_firefox/index.html @@ -0,0 +1,235 @@ +--- +title: Working with multiprocess Firefox +slug: Archive/Add-ons/Working_with_multiprocess_Firefox +translation_of: Archive/Add-ons/Working_with_multiprocess_Firefox +--- +
+

這篇文章提供給 Firefox 擴充套件開發者；文中概述了如何讓擴充套件可以執行於多行程的 Firefox.

+
+

在多行程的 Firefox 之前的版本, chrome code (including code inserted by extensions) 和 content 執行於同一作業系統行程中，所以擴充套件可以直接存取 content:

+
gBrowser.selectedBrowser.contentDocument.body.innerHTML = "replaced by chrome code";
+

然而，在多行程的 Firefox (也稱為 Electrolysis 或 E10S)，套件的程式碼與 content 將執行於不同的行程中，因此不再可能直接地存取。

+

取而代之地, the extension will need to factor code that touches content into separate scripts that are called frame scripts. Frame scripts 執行在 content 行程，並可以直接存取 content. Frame scripts 藉由 message-passing API 和套件其餘的部份通訊。

+

當套件程式碼（執行於 chrome 行程中）向套件的 frame script（執行於 content 行程中） 傳訊時，必須使用非同步訊息。

+

content 行程允許向 chrome 行程傳遞同步或非同步訊息，但是，非同步通訊是較好的選擇。

+

For more details on using the message manager and content scripts, refer to the message manager guide. The rest of this article explains how to work out if you're affected or not, provides an overview of the sorts of changes that are needed, then walks through the process of porting some simple extension patterns so they work properly with multiprocess Firefox.

+

確認你是否受到相容性影響

+

As a rule:

+ +

To know for sure, you need to test it, and setting that up is a two-step process:

+ +

Now you'll be able to test your extension in multiprocess Firefox, with no compatibility shims. At the moment you can't actually install extensions in multiprocess Firefox, so you have to install the extension, then switch on multiprocess support. This is being tracked as bug 1055808.

+

Updating your code

+

The general approach to updating your code is:

+ +

There are more details on this in the message manager documentation.

+

Backwards compatibility of the new APIs

+

With multiprocess support turned off, the e10s messaging APIs are still available and functional. They have been available in one form or another since Firefox 4; however, the original APIs are different than the current ones. Some known differences:

+ +

You should test your changes not only in nightlies with multiprocess support turned on, but also in releases you intend to support with multiprocess support turned off.

+

Examples

+

This section walks through the process of porting a few different sorts of extension. The extensions are all extremely simple, and are intended to represent fundamental extension patterns that require different handling in multiprocess Firefox.

+

You can find all the source code for these examples in the e10s-example-addons GitHub repository.

+

Run a script in all pages

+
+

See the code for this example.

+
+

The first extension runs some code on every page load. The code doesn't need to interact with any other part of the extension: it just makes some predetermined modification to the page. In this case it adds a border to the document's body.

+

It does this by attaching to a XUL overlay a version of the "On page load" code snippet:

+
var myExtension = {
+    init: function() {
+        // The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
+        if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
+    },
+    onPageLoad: function(aEvent) {
+        var doc = aEvent.originalTarget; // doc is document that triggered the event
+        if (doc.nodeName != "#document") return; // only documents
+        // make whatever modifications you want to doc
+        doc.body.style.border = "5px solid blue";
+    }
+}
+
+window.addEventListener("load", function load(event){
+    window.removeEventListener("load", load, false); //remove listener, no longer needed
+    myExtension.init();
+},false);
+

Because this code accesses web content directly, it won't work in multiprocess Firefox.
+

+

Porting to the message manager

+

To port this example using the message manager, we can put all the meat of the add-on in a frame script:

+
// frame-script.js
+// will run in the content process
+
+addEventListener("DOMContentLoaded", function(event) {
+  var doc = event.originalTarget;
+  if (doc.nodeName != "#document") return; // only documents
+  doc.body.style.border = "5px solid red";
+});
+
+

We'll register a chrome:// URL for the frame script:

+
// chrome.manifest
+
+content    modify-all-pages    chrome/content/
+
+

The main script, that we attach to the XUL overlay, is just a stub that uses the global message manager to load the frame script into each tab:

+
// chrome script
+// will run in the chrome process
+
+var globalMM = Cc["@mozilla.org/globalmessagemanager;1"]
+  .getService(Ci.nsIMessageListenerManager);
+
+globalMM.loadFrameScript("chrome://modify-all-pages/content/frame-script.js", true);
+

+

Porting to the Add-on SDK

+

A good alternative for an extension like this is to port to the Add-on SDK. The Add-on SDK includes a module called page-mod which is designed to load scripts into web pages. The Add-on SDK calls these scripts content scripts.

+

In this case the main extension code creates a page-mod to load a content script into every page loaded by the user:

+
// main.js
+
+var pageMod = require("sdk/page-mod");
+var self = require("sdk/self");
+
+pageMod.PageMod({
+  include: "*",
+  contentScriptFile: self.data.url("modify-all-pages.js")
+});
+

The content script can modify the page directly:

+
// modify-all-pages.js - content script
+
+document.body.style.border = "5px solid green";
+

Run a script in the active tab

+
+

See the code for this example.

+
+

The example demonstrates how an extension can:

+ +

The example is a restartless extension that adds a button using the CustomizableUI module. When the user clicks the button, the extension runs some code that modifies the current tab. The basic infrastructure is taken from the Australis "Hello World" extension written by Jorge Villalobos.
+
+ What the code actually does is: find any <img> elements and replace their src with a link to a silly GIF randomly chosen from a list hardcoded into the extension. The silly gifs are taken from the list in the Whimsy extension.

+

The first version accesses the page directly, so it's not multiprocess compatible:

+
// bootstrap.js
+
+let Gifinate = {
+  init : function() {
+    let io =
+      Cc["@mozilla.org/network/io-service;1"].
+        getService(Ci.nsIIOService);
+
+    // the 'style' directive isn't supported in chrome.manifest for bootstrapped
+    // extensions, so this is the manual way of doing the same.
+    this._ss =
+      Cc["@mozilla.org/content/style-sheet-service;1"].
+        getService(Ci.nsIStyleSheetService);
+    this._uri = io.newURI("chrome://gifinate/skin/toolbar.css", null, null);
+    this._ss.loadAndRegisterSheet(this._uri, this._ss.USER_SHEET);
+
+    // create widget and add it to the main toolbar.
+    CustomizableUI.createWidget(
+      { id : "gifinate-button",
+        defaultArea : CustomizableUI.AREA_NAVBAR,
+        label : "Gifinate",
+        tooltiptext : "Gifinate!",
+        onCommand : function(aEvent) {
+          Gifinate.replaceImages(aEvent.target.ownerDocument.defaultView.content.document);
+        }
+      });
+  },
+
+  replaceImages : function(contentDocument) {
+      let images = contentDocument.getElementsByTagName("img");
+      for (var i = 0; i < images.length; ++i) {
+        let gif = this.gifs[Math.floor(Math.random() * this.gifs.length)];
+        images[i].src = gif;
+      }
+    },
+

+

Porting to the message manager

+

To port this example to the message manager we'll make onCommand load a frame script into the current <browser>, then listen for "request-gifs" messages from the frame script. The "request-gifs" message is expected to contain the number of GIFs we need for this page: the message listener retrieves and returns that many GIFs.

+
// bootstrap.js
+// will run in the chrome process
+
+let Gifinate = {
+  init : function() {
+    let io =
+      Cc["@mozilla.org/network/io-service;1"].
+        getService(Ci.nsIIOService);
+
+    // the 'style' directive isn't supported in chrome.manifest for bootstrapped
+    // extensions, so this is the manual way of doing the same.
+    this._ss =
+      Cc["@mozilla.org/content/style-sheet-service;1"].
+        getService(Ci.nsIStyleSheetService);
+    this._uri = io.newURI("chrome://gifinate/skin/toolbar.css", null, null);
+    this._ss.loadAndRegisterSheet(this._uri, this._ss.USER_SHEET);
+
+    // create widget and add it to the main toolbar.
+    CustomizableUI.createWidget(
+      { id : "gifinate-button",
+        defaultArea : CustomizableUI.AREA_NAVBAR,
+        label : "Gifinate Button",
+        tooltiptext : "Gifinate!",
+        onCommand : function(aEvent) {
+          Gifinate.replaceImages(aEvent.target.ownerDocument);
+        }
+      });
+  },
+
+  replaceImages : function(xulDocument) {
+    var browserMM = xulDocument.defaultView.gBrowser.selectedBrowser.messageManager;
+    browserMM.loadFrameScript("chrome://gifinate/content/frame-script.js", false);
+    browserMM.addMessageListener("request-gifs", Gifinate.getGifs);
+  },
+
+  getGifs : function(message) {
+    var gifsToReturn = new Array(message.data);
+    for (var i = 0; i < gifsToReturn.length; i++) {
+      let gif = this.gifs[Math.floor(Math.random() * this.gifs.length)];
+      gifsToReturn[i] = gif;
+    }
+    return gifsToReturn;
+  },
+
+

Again, we need to register a chrome:// URL for the frame script:

+
// chrome.manifest
+
+content gifinate frame-script.js
+

In the frame script, we get all the <img> elements and send the "request-gifs" message to the main add-on code. Because this is a frame script we can make it a synchronous message, and update the src attributes with the value it returns:

+
// frame-script.js
+// will run in the content process
+
+var images = content.document.getElementsByTagName("img");
+var response = sendSyncMessage("request-gifs", images.length);
+var gifs = response[0];
+
+for (var i = 0; i < images.length; ++i) {
+  images[i].src = gifs[i];
+}
+

The overall flow of the add-on now looks like this:
+

+

Known bugs

+

This is a list of open bugs likely to affect add-on developers migrating to multiprocess Firefox:

+ diff --git a/files/zh-tw/archive/apps/advanced_topics/index.html b/files/zh-tw/archive/apps/advanced_topics/index.html new file mode 100644 index 0000000000..1c0c5a0820 --- /dev/null +++ b/files/zh-tw/archive/apps/advanced_topics/index.html @@ -0,0 +1,76 @@ +--- +title: 進階主題 +slug: Archive/Apps/Advanced_topics +translation_of: Archive/Apps/Advanced_topics +--- +

這些文章提供了額外的資訊，關於更進階的開放網頁程式主題。

+
+
+

Apps 架構文件

+
+
+ 應用程式的架構
+
+ 大致介紹開放網頁程式計畫的設計和實作之下的架構。
+
+ 在不同平台安裝 app 的細節
+
+ 有關應用程式在特定裝置或系統上安裝或執行時有些微的差異；這篇文章會幫您了解這段差異。
+
+ Android上的開放網路應用程式
+
+ 有關開發及測試在Android上運作的開放網路應用程式的事。
+
+ App runtime release notes
+
+ 不同的平台上，網頁 app 執行時的 release notes。
+
+

其他文件

+
+
+ 建立商店
+
+ 如果您要建立自己的商店來販售及發佈開放網頁程式，這些資訊可能可以幫助您。
+
+

View All...

+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/zh-tw/archive/apps/index.html b/files/zh-tw/archive/apps/index.html new file mode 100644 index 0000000000..89e9dac3d6 --- /dev/null +++ b/files/zh-tw/archive/apps/index.html @@ -0,0 +1,8 @@ +--- +title: Apps +slug: Archive/Apps +translation_of: Archive/Apps +--- +

In progress. This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/contacts/index.html b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/contacts/index.html new file mode 100644 index 0000000000..431f85c5f6 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/contacts/index.html @@ -0,0 +1,71 @@ +--- +title: 聯絡人資訊 +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide/Contacts +--- +

聯絡人資訊 (contacts)

+

Contacts API 讓您可以取得使用者手機中所儲存的聯絡人列表、聯絡人姓名、電話、… 等資訊。
+ 由於它牽涉到使用者私密資訊，目前僅開放審查通過的應用(privileged/certified)能夠使用這個 API。您的應用必須提出使用這個 API 的聲明，並且通過審查方可使用。
+
+ 權限宣告：分為 "readonly", "readwrite", "readcreate" 三種級別，分別代表「只讀取」、「讀取與修改」、「讀取與新增」。您可依照應用需求作適當的權限宣告。

+
"permissions": {
+  "contacts":{ "access": "readonly" }
+}
+

1. 讀取聯絡人列表

+
    var options = {
+      sortBy: 'familyName',
+      sortOrder: 'ascending'
+    };
+    var request = navigator.mozContacts.find(options);
+    request.onsuccess = function findSuccess() {
+      var firstContact = request.result[0];
+      console.log('name' + firstContact.name);
+      console.log('tel number' + firstContact.tel[0].value);
+      console.log('update time' + new Date(firstContact.updated));
+    };
+
+    request.onerror = function findError() {
+      console.warn('Error: cannot find any contacts - ' + request.error.name);
+    };
+

2. 新增聯絡人

+
    var myContact = {
+      'name': 'Alice Wang',
+      'givenName': 'Alice',
+      'familyName': 'Wang',
+      'tel': [{'value': '0912345678'}]
+    };
+    var contact = new mozContact();
+    contact.init(myContact);
+    var request = navigator.mozContacts.save(contact);
+    request.onerror = function onerror() {
+      console.warn('Error: save contact - ' + request.error.name);
+    };
+

3. 修改聯絡人資訊

+
    var options = {
+      filterBy: ['tel', 'givenName', 'familyName'],
+      filterOp: 'contains',
+      filterValue: 'Alice'
+    };
+    var request = navigator.mozContacts.find(options);
+    request.onsuccess = function findSuccess() {
+      var contact = req.result[0];
+      contact.tel[0].value = '0987654321';
+      var requestUpdate = navigator.mozContacts.save(contact);
+      requestUpdate.onerror = function onerror() {
+        console.warn('Error: update contact - ' + requestUpdate.error.name);
+      };
+    };
+

4. 刪除聯絡人

+
    var options = {
+      filterBy: ['id'],
+      filterOp: 'equals',
+      filterValue: '0987654321'
+    };
+    var request = navigator.mozContacts.find(options);
+    request.onsuccess = function findSuccess() {
+      var contact = req.result[0];
+      var requestRemove = navigator.mozContacts.remove(contact);
+      requestRemove.onerror = function onerror() {
+        console.warn('Error: remove contact - ' + requestRemove.error.name);
+      };
+    };
+

 

diff --git a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/device_storage/index.html b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/device_storage/index.html new file mode 100644 index 0000000000..d8c6fd2916 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/device_storage/index.html @@ -0,0 +1,111 @@ +--- +title: 儲存裝置資訊 +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide/Device_Storage +--- +

儲存裝置資訊 (Device Storage)

+

DeviceStorage API 提供 SD 記憶卡內的資料存取介面，可讀取圖片檔、聲音檔、影片檔，與 SD 記憶卡的其他檔案，並檢視 SD 記憶卡空間的使用率。
+ 由於牽涉到使用者的儲存裝置資訊，目前僅開放 Privileged/Certified App 能夠使用此 API。你的 App 必須提出「使用此 API」的聲明，並且通過審查方可使用。
+
+ 權限宣告：依照檔案類型 (圖片、影片、聲音、其他) 而有不同宣告方式，這種宣告另分為「readonly」、「readwrite」、「readcreate」共 3 種級別，分別代表「唯讀」、「讀取與修改」、「讀取與創建」。你可依照 App 需求作適當的權限宣告。

+
"permissions": {
+  "device-storage:pictures": { "access": "readonly" },
+  "device-storage:music": { "access": "readcreate" },
+  "device-storage:videos": { "access": "readwrite" },
+  "device-storage:sdcard": { "access": "readonly" }
+}
+

1. 音樂檔案列表

+ +
    var type = 'music';
+    var deviceStorage = navigator.getDeviceStorage(type);
+    if (!deviceStorage) {
+      console.warn('Error: cannot get DeviceStorage for ' + type);
+      return;
+    }
+    var request = deviceStorage.enumerate();
+    request.onsuccess = function(e) {
+      var file = request.result;
+      console.log('file name ' + file.name);
+      console.log('file size ' + file.size);
+      console.log('file type ' + file.type);
+      console.log('file last Modified Date ' + file.lastModifiedDate);
+      request.continue();
+    };
+    request.onerror = function() {
+      console.warn('Error: cannot list files in SD card - ' + request.error.name);
+    };
+

2. 讀取某個 SD 卡檔案

+ +
    var type = 'pictures';
+    var deviceStorage = navigator.getDeviceStorage(type);
+    if (!deviceStorage) {
+      console.warn('Error: cannot get DeviceStorage for ' + type);
+      return;
+    }
+    var filename = 'downloads/DSC02798.JPG';
+    var request = deviceStorage.get(filename);
+    request.onsuccess = function(e) {
+      var file = request.result;
+      var url = URL.createObjectURL(file);
+      var myImage = document.getElementById('profilePhoto');
+      myImage.src = url;
+    };
+    request.onerror = function() {
+      console.warn('Error: get file from SD card - ' + request.error.name);
+    };
+

3. 寫入檔案到 SD 卡

+ +
    var type = 'sdcard';
+    var deviceStorage = navigator.getDeviceStorage(type);
+    if (!deviceStorage) {
+      console.warn('Error: cannot get DeviceStorage for ' + type);
+      return;
+    }
+    var filename = 'test-' + Math.random().toString() + '.txt';
+    var pathname = 'test-tmp/' + filename;
+    console.log('file path: ' + pathname);
+    var blob = new Blob(['hello', 'world'], {type: 'text/plain'});
+    var request = deviceStorage.addNamed(blob, pathname);
+    request.onsuccess = function(e) {
+     // try to get the file
+      var readRequest = deviceStorage.get(pathname);
+      readRequest.onsuccess = function() {
+        var file = readRequest.result;
+        var reader = new FileReader();
+        reader.onload = function(e) {
+          console.log('file content ' + e.target.result);
+        };
+        reader.readAsText(file);
+      };
+      readRequest.onerror = function() {
+        console.warn("Error: read file failure - " + request.error.name);
+      };
+    };
+    request.onerror = function() {
+      console.warn('Error: write file failure - ' + request.error.name);
+    };
+

4. SD 卡空間使用率

+ +
    var type = 'sdcard';
+    var deviceStorage = navigator.getDeviceStorage(type);
+    if (!deviceStorage) {
+      console.warn('Error: cannot get DeviceStorage for ' + type);
+      return;
+    }
+    var request = deviceStorage.stat();
+    request.onsuccess = function(e) {
+      var totalSize = e.target.result.totalBytes;
+      var freeBytes = e.target.result.freeBytes;
+      console.log('totalSize ' + totalSize + ', freeBytes ' + freeBytes);
+    };
+    request.onerror = function() {
+      console.warn('Error: cannot get stat of SD card - ' + request.error.name);
+    };
+

 

diff --git a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/geolocation/index.html b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/geolocation/index.html new file mode 100644 index 0000000000..575d719313 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/geolocation/index.html @@ -0,0 +1,20 @@ +--- +title: 位置資訊 +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide/Geolocation +--- +

位置資訊 (geolocation)

+

Geolocation API 讓您可以取得使用者目前所在的地理位置資訊，雖然現今它已是一個 Web 開放標準的 API，但在 Firefox OS 中您必須做權限宣告才可使用。
+ 但當您使用這個 API 企圖存取使用者位置時，系統會出現一個視窗詢問使用者是否願意透露位置訊息給您的應用，並且提供一個默認選項記住使用者的選擇。
+
+ 權限宣告：需要

+
"permissions": {
+  "geolocation": {}
+}
+

範例：

+
navigator.geolocation.getCurrentPosition(function(position) {
+  console.log('latitude ' + position.coords.latitude);
+  console.log('longitude ' + position.coords.longitude);
+}, function() {
+  console.warn('Error: cannot fetch location');
+});
+
diff --git a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/index.html b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/index.html new file mode 100644 index 0000000000..d258c076d5 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/index.html @@ -0,0 +1,90 @@ +--- +title: 第三方應用開發者指南 +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide +--- +

基本章節

+

快速入門

+

API 說明

+ +

其他技術細節

+ +

除錯與預覽

+ +

測試

+ +

應用上架

+ +

進階章節

+

樣式參考與範本

+ +

調校技巧

+ +

Gaia 系統應用 (System App) 細節

+ +

其他 Open Web 技術

+ diff --git a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/web_activity/index.html b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/web_activity/index.html new file mode 100644 index 0000000000..8b9e1e52ad --- /dev/null +++ b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/web_activity/index.html @@ -0,0 +1,116 @@ +--- +title: Web Activity +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide/Web_Activity +--- +

Web Activity

+

許多手機上常見的功能例如：選取聯絡人、撥打電話、照相是您的 App 會需要用到的功能。您可以不必重新發明輪子，而利用「Web Activity」的技術呼叫其他的 App 來完成任務。Web Activity 可以實作兩個 App 間的切換，例如從「相機」切換到「圖片集」，或者是「簡訊」使用「聯絡人」選取一個簡訊發送對象。
+
+ 在您的 App 中只需要描述所需的操作，系統會幫您檢查手機中有哪些 App 提供這些操作。以下是一個具體的例子。這是在「相機」中的一段程式碼，用來切換到別的 App 瀏覽相片。

+
  var act = new MozActivity({
+    name: 'browse',
+    data: {
+      type: 'photos'
+    }
+  });
+  act.onerror = function(e) {
+    if (act.error.name === 'NO_PROVIDER') {
+      console.warn('Error: no activity provider');
+    }
+    else {
+      console.warn('Error: unknown activity - ' + act.error.name);
+    }
+  };
+

在這段程式碼中，「相機」新增了一個 MozActivity 物件並在參數物件中聲明該 activity 是「瀏覽(browse)」的動作，瀏覽的資料是「相片(photos)」。請注意它並非直接指定要切換到「圖片集」 ，而是由系統決定哪個 App 提供這樣的行為，若有多個 App 同時提供一樣的行為時，系統會產生一個選單讓使用者選取。
+ 參數物件的 'data' 欄位可以提供額外所需的資料內容，讓承接 activity 任務的 App 決定是否根據資料內容做其他處理。
+
+ 讓我們來看看提供 Web Activity 的 App 該如何聲明它的 activity 及相關設定。

+
"activities": {
+  "browse": {
+    "filters": {
+      "type": "photos"
+     },
+    "disposition": "window"
+  }
+}
+


+ 像「圖片集」這樣的 App 可以在它的 manifest.webapp 檔案中聲明它提供瀏覽相片的 activity，如上所示。它提供一個「瀏覽(browse)」動作的 activity，瀏覽的資料是「相片(photos)」作為篩選條件。這樣的 activity 聲明宣告，便能與上面的 MozActivity 呼叫匹配，成為能承接這個 activity 的對象之一。若手機中只有這一個 App 有這樣的 activity 宣告，那系統預設就會將這個 App 開啓，但若有多個 App 都能夠執行這個任務，系統會產生一個選單讓使用者選取。

+

"disposition": "window"

+

依照不同 App 的需求，目前在 Firefox OS 中有兩種形式的 Web Activity ，一種為「視窗切換」(window disposition) 、一種為「畫面滑入」(inline disposition)。前者視覺上是 App 之間的切換，後者則是承接 activity 的 App 會由下方滑入，覆蓋在目前 App 之上。除了視覺上的效果不同之外，「畫面滑入」的 Web Activity 在 activity 處理結束畫面關閉之後(例如選擇了一張圖片)，會回到原本的 App ，而「視窗切換」的 Web Activity 則需要使用者自己手動回到主畫面 (homescreen) 或者 App 列表，才能夠切換回原本的 App 。提供 Web Activity 的 App 可以自行決定提供哪種形式讓其他 App 呼叫。
+
+ 除了在 manifest.webapp 宣告 Web Activity 之外，程式碼中當然也要有具體的實作。如下所示是「圖片集」 App 的實作程式碼：

+
  navigator.mozSetMessageHandler('activity', function activityHandler(a) {
+    var activityName = a.source.name;
+    if ( activityName === 'browse') {
+      // If this was a cold start, then the db needs to be initialized.
+      if (!photodb)
+        initDB(true);  // Initialize both the photo and video databases
+      // Always switch to the list of thumbnails.
+      setView(thumbnailListView);
+    }
+  });
+
+

當有 MozActivity 的呼叫發生時，會以系統訊息的方式通知將要被開啓的 App 。因此這個 App 必須要註冊 'activity' 的系統訊息，提供對應的回呼函示 (callback function)，明白表示當 MozActivity 的呼叫發生時， App 被開啓後將如何處理這個 activity。這邊「圖片集」 App 執行初始化圖庫、以縮圖方式列出圖庫內的相片。
+ 「圖片集」 App 在 manifest.webapp 的聲明中使用 window disposition 的方式處理 activity，表示使用者並不會在完成什麼動作之後回到「相機」 App 。「圖片集」 App 就如同是被使用者手動在主畫面(homescreen)點選開啟一般，由使用者自行決定何時離開。

+

"disposition": "inline"

+

我們來看另一種形式的  Web Activity。同樣以「圖片集」 App 為例，它可以提供一個  Web Activity 供其他 App 挑選照片。挑選照片的 actvity 必須要把被挑選到的相片名稱、路徑…等等的資訊傳回給呼叫方(caller)，並且在挑選動作完成後回到呼叫方的 App 。這個情況下，使用 inline disposition 的形式來實作。
+ manifest.webapp 的宣告是這樣的：

+
"activities": {
+  "pick": {
+    "filters": {
+      "type": ["image/jpeg", "image/png"]
+    },
+    "disposition": "inline",
+    "returnValue": true,
+    "href": "/index.html#pick"
+  }
+}
+


+ 它提供一個「挑選(pick)」動作的 activity，挑選的資料形態以一個陣列作為篩選條件，提供挑選 "image/jpeg" 或 "image/png" 圖檔，並且會回傳挑選的值。
+ 由於 inline disposition 的 Web Activity 是以單一畫面滑入的形式被開啓，不同於 window disposition 是整個 App 被開啓，這裡我們可以多指派一個聲明表示要處理這個  Web Activity 的頁面位置 ("href": "/index.html#pick")。
+
+ 這個頁面會有具體的程式碼實作如下：

+
  navigator.mozSetMessageHandler('activity', function activityHandler(activityRequest) {
+    var activityName = activityRequest.source.name;
+    if (activityName === 'pick') {
+      var pickType = activityRequest.source.data.type;
+      var width = activityRequest.source.data.width;
+      var height = activityRequest.source.data.height;
+      var blob = startPick(pickType, width, height);
+      if (blob) {
+        activityRequest.postResult({type: pickType, blob: blob});
+      } else {
+        activityRequest.postError('pick cancelled');
+      }
+    }
+  });
+


+ 當有 MozActivity 的呼叫發生時，「圖片集」 App 收到 'activity' 的系統訊息，回呼函示 (callback function)會被運行，它可以讀取請求此 activity 的 App 所提供的數據，例如所需的圖片類型、寬度、高度… 等，作為陳列圖片清單的參考。當使用者成功選取了一張圖片，呼叫 activityRequest.postResult 傳回挑選結果。這個結果是個物件，讓呼叫 MozActivity 的 App 能夠知道圖片相關的資訊。
+
+ 在「設定」 App 中希望能讓使用者選取一張圖片做為桌布，只需要呼叫 activity 來完成。

+
  var activityRequest = new MozActivity({
+     name: 'pick',
+     data: {
+        type: 'image/jpeg',
+        width: 320,
+        height: 480
+      }
+  });
+  activityRequest.onsuccess = function onPickSuccess() {
+    if (!activityRequest.result.blob)
+      return;
+
+    var reader = new FileReader();
+    reader.readAsDataURL(activityRequest.result.blob);
+    reader.onload = function() {
+       navigator.mozSettings.createLock().set({
+          'wallpaper.image': reader.result
+       });
+       displayImgae(reader.result);
+    };
+  };
+  activityRequest.onerror = function onPickError() {
+     console.warn('pick failed!');
+  };
+
+

在這段程式碼中，「設定」呼叫了一個 MozActivity 並在參數物件中聲明該 activity 是「挑選(pick)」的動作，挑選的是「image/jpeg」檔案，限定寬度與高度為 320 x 480。同樣的，「設定」 App 不知道實際上哪個 App 會被呼叫，它只在意當挑選動作完成時，它的 onsuccess 回呼函示會被執行，取得 blob 內容，並且畫面焦點將回到它身上，讓它可以顯示選取的圖片。系統將決定哪個 App 提供這樣的行為，若有多個 App 同時提供一樣的行為時，系統會產生一個選單讓使用者選取。
+  

diff --git "a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\345\260\201\345\214\205\345\274\217_(packaged)_app/index.html" "b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\345\260\201\345\214\205\345\274\217_(packaged)_app/index.html" new file mode 100644 index 0000000000..80a905ab88 --- /dev/null +++ "b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\345\260\201\345\214\205\345\274\217_(packaged)_app/index.html" @@ -0,0 +1,70 @@ +--- +title: 封包式 (Packaged) App +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide/封包式_(Packaged)_App +--- +
+

原文出處：https://marketplace.firefox.com/developers/docs/packaged

+
+

封包式 (Packaged) App 屬於 Open Web App，即以 ZIP 壓縮檔納入其 HTML、CSS、JavaScript、app manifest 等所有資源；取代「將資源置於 Web 伺服器之上」的方式。封包式 App 的 ZIP 壓縮檔另將 app manifest 置於其根目錄之下，且此 manifest 檔案必須命名為 manifest.webapp。

+
+

注意：截至 2013 年 1 月為止，Firefox Marketplace 上所提供的封包式 App 限定為 Firefox OS App。

+
+

 

+

封包式 App 之用途

+

若 App 會存取裝置上的 Sensitive API，則最好能透過封包式 App 而達到安全性的需求。App 均必須經過上架商城 (如 Firefox OS Marketplace) 認證方可販售。這些商城將審核 App，確認其是否可行，再以其自有金鑰完成加密簽核。再審核過安全性、隱私性、功能性等的可能問題之後，可為 App 的使用者更多添一份保障。

+

 

+

封包式 App 的類型

+

封包式 App 可分為 3 類：

+

Privileged app

+

Privileged App 是由 Firefox OS Marketplace 以特殊程序核准之後發出。如果任一 App 要存取裝置上的特定 Sensitive API，則可為使用者提供更高的安全性。此種 App 即等同 iOS 或 Android 平台上的 Native App，並具備下列特性：

+ +
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
+ +

Certified app

+

Certified App 將用於重要的系統功能，如智慧型手機上預設的撥號鍵盤，或系統設定用 App；當然亦可用於 Firefox OS 手機上的重要功能。Certified App 並不會用於第三方 App，所以大多數的 App 開發人員可略過此類 App 不管。除了所有的裝置許可均為隱式許可 (Implicit permission，意即不需要外部的使用者許可) 之外，Certified App 與 Privileged App 大部分均屬於相似的封包式 App。而 Certified App 必須取得 OEM 裝置或電信服務供應商裝置的許可，才能讓此隱式 App 使用重要 API。下列即為 Certified App 的 CSP (與 Privileged App 的 CSP 略有不同)：

+
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+

若與 Certified App 相較，Privileged App 則針對 inline CSP 的影響而稍微放寬了限制。進一步了解其原因，可參閱預設 CSP 與 Bug 768029。

+

Plain packaged app

+

當然也可讓一般 App 封裝為 ZIP 壓縮檔。在 Marketplace 簽署之後，並不會執行如 Privileged/Certified App 所需的特殊授權程序。且 Plain Packaged App 並不會使用特定的 Sensitive Web API；同時也不屬於 Privileged/Certified App 所用 CSP 管轄所及。

+

 

+

與托管式 (Hosted) App 的差異

+

封包式 App 的功能，其實與一般網站型態的 Open Web App (即所謂托管式 Hosted App) 功能相同。但封包式 App 的差異在於：

+ +
app://550e8400-e29b-41d4-a716-446655440000/index.html
+ +

與一般的托管式 App 相同，封包式 App 仍可存取 Web 伺服器上的資料庫。

+

 

+

使用 Sensitive Web API

+

現在有許多惡意 Web API，因此應謹慎存取 Web API。針對 App 所要存取的所有 Sensitive API，你應該在 manifest 檔案的 permissions 欄位中新增輸入項。

+

一般托管式 App 亦可存取某些 Sensitive API，但其他 API 就限定封包式 (Privileged 或 Certified) App 才可存取。可參閱 App 許可找到相關需求的表格。

+

 

+

封包式 App 與 Firefox Marketplace

+

與托管式 App 相較，Firefox Marketplace 處理封包式 App 的方式較為不同。一旦提交自己的封包式 App 之後，其 ZIP 壓縮檔即儲存於 Marketplace 的伺服器上，且 Marketplace 隨即根據該 ZIP 壓縮檔中的 manifest 檔案，產生新的 manifest 檔案並命名為「mini-manifest」。只要使用者想安裝此 App，就會將 mini-manifest 檔案傳送至 installPackage() 函式以安裝該 App。此 mini-manifest 檔案僅用於安裝與更新作業，與 App 的執行作業無關。

+

 

+

測試封包式 App 的安裝作業

+

透過 Firefox OS 模擬器 (Firefox OS Simulator)，即可輕鬆安裝封包式 App。目前 Firefox OS 模擬器亦針對各個平台而提供 Windows、OSX、Linux 等不同版本。

+

安裝模擬器時，將於 Firefox 的「網頁開發者 (Web Developer)」功能表中新增「Firefox OS Simulator」項目。在開啟附加元件之後，即可透過「Add Directory」而指定本端 webapp.manifest 檔案的位置。模擬器另可將該 App 封包 (即壓縮該資料夾)，再透過剛封包完畢的 App 開啟模擬器。

+

針對 Linux 與 Windows 的使用者，還需要其他步驟才能設定 Android Debug Bridge (adb)，以溝通實際裝置。請參閱步驟 3：設定系統以偵測自己的裝置。

+

在實際裝置上，可點選 Settings > Device Information > More Information > Developer > Remote Debugging，進而啟動遠端除錯功能。

+

任何時間點均可連上受支援的裝置。一旦連上裝置，模擬器即可偵測並顯示所接上的裝置。而在 App 列表的旁邊，可看到「push」的新按鈕。按下「push」即可將剛封包完畢的 App 傳送至裝置上。

+

 

+

更新封包式 App

+

若要進一步了解更新作業，請參閱更新 App。

+

 

diff --git "a/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\346\211\230\347\256\241\346\233\264\346\226\260\344\275\234\346\245\255_(hosting_updates)_/index.html" "b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\346\211\230\347\256\241\346\233\264\346\226\260\344\275\234\346\245\255_(hosting_updates)_/index.html" new file mode 100644 index 0000000000..ea5b41073b --- /dev/null +++ "b/files/zh-tw/archive/b2g_os/3rd_party_app_developer_guide/\346\211\230\347\256\241\346\233\264\346\226\260\344\275\234\346\245\255_(hosting_updates)_/index.html" @@ -0,0 +1,78 @@ +--- +title: 托管更新作業 (Hosting Updates) +slug: Archive/B2G_OS/3rd_Party_App_Developer_Guide/托管更新作業_(Hosting_Updates)_ +--- +
+

本文節錄自 B2G/Updating

+
+

托管更新作業 (Hosting Updates)

+

其實亦可解釋為：用戶端針對更新檔案所進行的輪詢作業。

+

B2G 用戶端針對更新所執行的輪詢 (Poll)，即針對 update manifest 檔案進行提取 (Fetching) 與剖析 (Parsing)。此檔案即稱為「update.xml」。

+

B2G 用戶端均已完成「輪詢特定伺服器上的更新」的設定，亦將查詢伺服器上特別架構而成的路徑。而我們建議透過 HTTPS 協定 (當然 HTTP 亦支援)，讓用戶端查詢伺服器。若現有用戶端更改了輪詢程式碼，則只要將一筆更新傳送至此用戶端，即可針對「用戶端所輪詢過的路徑與伺服器」進行變更。

+

在下列範例中，我們假設將更新作業托管 (Hosting) 給 updates.b2g.com 伺服器。

+

則由用戶端所輪詢的 URL，主要可用下列參數呈現：

+ + + + + + + + + + + + + + + + + + + +
+

PRODUCT_MODEL

+ 		+

裝置型號的名稱。此為 B2G 屬性資料庫中的 ro.product.model 數值。

+
+

CHANNEL

+ 		+

更新「頻道」，有助於測試作業。舉例來說，我們可設定伺服器托管「nightly」、「beta」、「release」等頻道。

+
+

VERSION

+ 		+

此為用戶端的軟體版本，此以「18.0.2」為例。

+
+

BUILD_ID

+ 		+

專屬 ID，如針對特定軟體版本 (Build) 所設的時間戳記。

+
+

當然另有許多數值，可為查詢作業建構出更新用的 URL。

+

B2G 用戶端隨後將整合「本身已設定的更新主機」的數值，搭配上述的相關數值，進而建構出 URL，以於執行期間執行輪詢作業。

+

此 URL 範例可為：

+
https://updates.b2g.com/release/unagi1/18.0/20121203123456/update.xml
+
+

 

+

針對用戶端的請求，若伺服器回傳「404 Not Found」，即代表目前並無可用的更新；若回傳「200」與 manifest 檔案，則代表可能有更新。該 manifest 檔案將描述可用的新版本，亦即用戶端目前應該更新的版本。此 manifest 檔案範例為：

+
<?xml version="1.0"?>
+<updates>
+  <update type="major" appVersion="19.0" version="19.0" extensionVersion="19.0" buildID="20121210123456"
+          licenseURL="http://www.mozilla.com/test/sample-eula.html"
+          detailsURL="http://www.mozilla.com/test/sample-details.html">
+    <patch type="partial" URL="https://updates.b2g.com/release/unagi1/18.0/20121203123456/update.mar"
+           hashFunction="SHA512" hashValue="5111e033875752b7d9b32b4795152dea5ef954cb8a9d4a602dd19a923b464c43521287dcb5781faf3af76e6dc5e8a3dd9c13edea18c1f2c8f3bd89e17d103d6f"
+           size="41901319"/>
+  </update>
+</updates>
+
+

而 manifest 檔案中的欄位則描述了：

+ +

當然，使用者或用戶端裝置可能會拒絕更新作業。

+

透過這些機制，伺服器將可托管更新封裝，以利舊版用戶端的更新作業。或可僅托管「線性更新歷史紀錄 (Linear update history)」，讓用戶端必須透過單一路徑完成升級。

+

針對「版本 (Build) 伺服器」和「更新主機」之間的互動細節，仍與作業環境息息相關。本文尚不足以詳細解說完畢。

+

 

diff --git a/files/zh-tw/archive/b2g_os/add-ons/index.html b/files/zh-tw/archive/b2g_os/add-ons/index.html new file mode 100644 index 0000000000..13f42518cd --- /dev/null +++ b/files/zh-tw/archive/b2g_os/add-ons/index.html @@ -0,0 +1,282 @@ +--- +title: Firefox OS 附加元件 +slug: Archive/B2G_OS/Add-ons +translation_of: Archive/B2G_OS/Add-ons +--- +
+

重要: 僅 Firefox OS 2.5+ 支援附加元件功能。

+
+ +

「附加元件」的概念在 Web 瀏覽器的世界中眾人皆知，而我們也將這個概念帶進 Firefox OS。Firefox OS 的附加元件可以僅僅作用於單一 App 上，也可以指定作用於多個、甚至所有 App 上。本文帶您一步步撰寫自己的 Firefox OS 附加元件，同時提供一些秘訣及其他應該了解的資訊。

+ +
+

附註：本文僅重點概略翻譯。

+
+ +
+

附註：Firefox OS 附加元件採用 WebExtensions 擴充模式。此模式大部份源自於 Chrome/Blink 擴充套件機制，讓附加元件在開發時能擁有許多互通性與功能上的優勢。詳情可見持續編寫中的 WebExtensions 文件集。

+
+ +

開發附加元件

+ +

Firefox OS 附加元件其實也是個內含 JavaScript / CSS / 其他必備檔案的 App，但不是拿來獨立運作，而是在描述檔中增加特別的說明來定義要在哪些 App 中使用這個附加元件。When apps are launched on a Firefox OS device that has an add-on installed, the add-on is injected into any app that matches the pattern specifed in the filter.

+ +

Firefox OS add-ons use the same syntax and structure for their code as the new school of Firefox add-ons developed using the WebExtensions API, which is itself based on the Chrome extensions model.

+ +

簡單範例

+ +

以下我們以一個簡單的例子說明 Firefox OS 附加元件的程式基礎。這個附加元件會在 system app 放上一塊看板，使用者可以點擊關閉。

+ +

firefox os screenshot showing add-on banner

+ +

這個附加元件很簡單，但用來作為入門倒是相當足夠了。你可以在 GitHub 上下載範例程式，而後用 WebIDE 裝到你的 Firefox OS 裝置上（參考 {{anch("Testing your add-on using WebIDE")}} 一節）。往後你也可以透過 Firefox Marketplace 來發表自己的附加元件。

+ +

Be aware that Firefox OS add-ons can do a lot more than what we've got listed here. The WebExtensions documentation will have more information added as time goes on.

+ +

解析 Firefox OS add-on

+ +

In this section we'll walkthrough the contents of the sample add-on repo, explaining each piece of content. 目錄結構看起來像這樣：

+ + + +

manifest.json

+ +

你應該發現了：在這個範例附加元件目錄中，有兩種類似的描述檔。第一個「manifest.json」的結構類似 Chrome 擴充套件，與 CSS、JavaScript 及其他檔案一起放在 {{anch("extensions.zip")}} 當中。It can contain a large variety of instructions (see Chrome Manifest File Format), but for now we're just going to concentrate on a simple subset:

+ +
{
+  "manifest_version": 1,
+  "name": "Add-on banner",
+  "description": "Firefox OS add-on example",
+  "version": "1.0",
+  "author": "Chris Mills",
+  "content_scripts": [{
+    "matches": ["app://system.gaiamobile.org/index.html"],
+    "css": ["css/style.css"],
+    "js": ["js/index.js"]
+  }],
+  "icons": {
+    "128": "/icons/128.png"
+  }
+}
+ +

Most of these fields are pretty self-explanatory, but we'll cover the last few.

+ +

首先以 content_scripts 指定要植入 app 的檔案 — 你可以看到這邊以 css 及 js 兩欄分別指定 CSS 樣式檔及 JavaScript 程式檔。matches 欄位則是用以指定該把檔案放入哪些 app 裡，這個欄位的內容形式很多元（參考 Chrome Match Patterns），但我們先簡單指定為 app://system.gaiamobile.org/index.html，讓附加元件僅影響 system app。若想影響所有 app，可以將此欄位寫為 app://*/* 。

+ +
+

Note: You can reference multiple scripts and stylesheets by simply including multiple items in the arrays, for example "css": ["css/style.css", "css/more.css"].

+
+ +
+

Note: Firefox OS does not currently support the Chrome <all_urls> keyword.

+
+ +

At the bottom of the manifest we've included the icons field; see the next section for more info on this.

+ +

update.webapp

+ +

update.webapp 則是 Firefox OS 式的描述檔，基本上就是跟打包 app 時用的描述檔格式相同。（參考 Self-publishing packaged apps。）

+ +

Our update.webapp file looks like so:

+ +
{
+  "name" : "Add-on banner",
+  "description": "Firefox OS add-on example",
+  "developer": { "name": "Chris Mills" },
+  "package_path": "extension.zip",
+  "icons": {
+    "128": "/icons/128.png"
+  }
+}
+ +

Again, most of this is fairly self-explanatory.

+ +

這邊最重要的欄位該是 package_path，用以指定內含附加元件程式的包裝檔位置。

+ +

You'll notice that the icons field is included here, the same as it is in {{anch("manifest.json")}} — update.webapp is the only place you need to have the icons information at the moment, but we'd recommend you include it in both places for now, just in case things change. The icons field points to the add-on icon so it can be used inside the Gaia Settings app, and the Firefox Marketplace when it starts to host add-ons.

+ +

指定圖示

+ +

你必須在描述檔中至少指定一個圖示，否則描述檔無效。詳情可參考 Manifest 參考文件：圖示 一節。

+ +

CSS

+ +

There is nothing special about the CSS included in the example. The only thing to bear in mind is that you should make sure your add-on classnames and selectors do not conflict with any of the existing CSS in the app(s) it is applied to.

+ +

For example, we wrapped our example banner in a {{htmlelement("div")}} with class fxos-banner. But you could even consider using some kind of unique code for your classname.

+ +

JavaScript

+ +

Again, the JavaScript file that powers the add-on doesn't have any special functionality inside it (see the JavaScript source on Github.) It is injected into the apps it is applied to along with any CSS specified in the {{anch("manifest.json")}} file.

+ +
+

Note: Add-on code is injected every time an app is launched and the match specified in manifest.json pattern matches that app. It is also injected whenever add-ons are enabled. When an add-on is injected into an app because the app is launching, all add-on files are injected into the app before anything in the app is initialized, including the DOM. It is up to the add-on developer to handle the different launch cases cases (immediate injection vs. injection on launch); there is more info on this below.

+
+ +

Other main things to note are covered below.

+ +

The window object

+ +

Add-ons only share a proxied version of the content window. As a result, anything that is written to the window object from an add-on is unavailable to the app code. However, anything on the window object that is set by app code is available to add-ons. Similarly, the DOM is accessible as usual.

+ +

Injecting code at the correct time

+ +

You must be careful to properly handle cases where an add-on is injected into an app after the app has been loaded. Such a scenario can occur when an app is already running and an add-on that targets it is enabled.

+ +

in such a case, a window.onload handler won't work because the DOMContentLoaded event has already occured.

+ +

There's no good solution to this problem right now. In the interim, we recommend to check whether or not the DOM has been loaded before setting a DOMContentLoaded callback. This pattern is used in the demo:

+ +
// If injecting into an app that was already running at the time
+// the app was enabled, simply initialize it.
+if (document.documentElement) {
+  initialize();
+}
+
+// Otherwise, we need to wait for the DOM to be ready before
+// starting initialization since add-ons are usually (always?)
+// injected *before* `document.documentElement` is defined.
+else {
+  window.addEventListener('DOMContentLoaded', initialize);
+}
+
+function initialize() {
+  // ...
+}
+ +

避免重複植入

+ +

為避免附加元件的程式碼多次重複植入到同一 App 中，您必須檢查附加元件是否曾經植入過，例如這樣

+ +

you should check whether your add-on is already present, like this:

+ +
function initialize() {
+  if (document.querySelector('.fxos-banner')) {
+    // Already injected, abort.
+    return;
+  } else {
+    var body = document.querySelector('body');
+    var fxosBanner = document.createElement('div');
+    fxosBanner.classList.add('fxos-banner');
+    var bannerText = document.createElement('p');
+    var closeBtn = document.createElement('button');
+
+    fxosBanner.appendChild(bannerText);
+    fxosBanner.appendChild(closeBtn);
+    body.appendChild(fxosBanner);
+
+    closeBtn.textContent = 'X';
+    bannerText.textContent = 'Wow, you have an extension installed!';
+
+    closeBtn.onclick = function() {
+      fxosBanner.parentNode.removeChild(fxosBanner);
+    }
+  }
+}
+ +

So here we are using if (document.querySelector('.fxos-banner')) to check whether the example banner already exists. If so, then we return out of the function. If not, then the querySelector() method returns null, and we run the code block that creates the banner.

+ +

App management functions in add-ons

+ +

All Apps and Mgmt functions work on add-ons just like they do on apps. Be aware however that the latter are only available to add-ons when they are injected into a certified app that has the webapps-manager permission specified in the manifest.

+ +

In addition to these functions, an onenabledstatechange callback is exposed for add-ons being enabled and disabled. This event is fired for all add-ons, so you will have to check which add-on was enabled/disabled before performing initialization or cleanup.

+ +
navigator.mozApps.mgmt.onenabledstatechange = function(event) {
+  var app = event.application;
+  if (app.manifestURL === 'https://origin.of.manifest/manifest.webapp') {
+    var wasEnabled = app.enabled;
+    // do something with this information
+  }
+};
+ +

extension.zip

+ +
+

Note: The extension.zip file has been left in the demo repo mainly for illustrative purposes, so it is clear how the system works. You actually don't need to include the zip in your directory, as WebIDE will generate it for you when you install the add-on. The Firefox Marketplace is likely to do the same when it starts to list add-ons.

+
+ +

The extension.zip archive contains the code for the extension, and is referenced in the {{anch("update.webapp")}} package_path field — This is how Gecko finds the code to be installed. Archived inside you'll find:

+ + + +

So the manifest.json file sits inside the archive, and serves to reference the files to be injected and specify which apps to affect.

+ +

Testing your add-on using WebIDE

+ +

Mozilla's WebIDE tool is available in Firefox desktop by default. To use it for installing add-ons on your phone, follow the steps listed below:

+ +
    +
  1. Make sure you have Firefox 43 or above installed (this was Nightly at the time of writing), as add-ons are not supported in WebIDE below this version.
    2. +
  2. Open your browser and open the WebIDE tool (press the WebIDE button, or choose Tools > Web Developer > WebIDE from the menu.)
    3. +
  3. Make sure your phone has remote debugging enabled (Settings App > Developer > Set the "Debugging via USB " selection to "ADB and DevTools".)
    4. +
  4. Connect your phone to your computer via a USB cable. Make sure you don't have other phones connected at the same time.
    5. +
  5. In the WebIDE UI, press the Select Runtime option, and select your phone, which should be listed under USB Devices.
    6. +
  6. At this point, your phone should be showing an Allow USB debugging connection? prompt. Choose Allow.
    7. +
  7. Select the Open App option, then choose Open Packaged App...
    8. +
  8. In the resulting file chooser, navigate to the directory that contains your update.webapp manifest file, and press Open.
    9. +
  9. Providing there are no warnings or errors reported, you can install your add-on on the device using the "Play" button in the center (Install and Run.)
    10. +
  10. To see the add-on in action, enable it by choosing Settings app > Add-ons > Add-on example > toggle the checkbox at the top.
    11. +
+ +

Add-on settings

+ +

You can control the add-ons on your phone by going to Settings app > Add-ons; in here you'll find a list of your installed add-ons, and you can tap each entry to see more information about each add-on.

+ +

firefox os screenshot showing a list of installed add-ons in the settings appinformation screen for an individual addon, with a list of apps this add-on affects, and controls to disable and delete the add-on

+ +

Enabling/disabling and deleting add-ons

+ +

By default, add-ons will be enabled after installation when they are installed form the Firefox Marketplace. When installed via WebIDE however they will be disabled by default.

+ +

You can manually enable/disable add-ons via the checkbox at the top of each individual add-on's page (found under Settings app > Add-ons), or programmatically using the navigator.mozApps.mgmt.setEnabled() function (see this setEnabled() usage example on Github.)

+ +

You can delete an add-on entirely by tapping the Delete button found on individual app pages.

+ +

Apps affected by add-ons

+ +

You'll also notice that in the page for each individual add-on there is a section that lists which apps are affected by that add-on. Currently this doesn't seem to work (it always lists This add-on does not affect any installed apps.) This should be fixed soon (see {{Bug(1196386)}} for progress.)

+ +

權限

+ +

附加元件的權限繼承自其所植入的 App，在描述檔中想多要一點權限是行不通的，也無法以此方式增加其植入對象的權限。

diff --git a/files/zh-tw/archive/b2g_os/api/fmradio/index.html b/files/zh-tw/archive/b2g_os/api/fmradio/index.html new file mode 100644 index 0000000000..ec662a0029 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/api/fmradio/index.html @@ -0,0 +1,110 @@ +--- +title: WebFM +slug: Archive/B2G_OS/API/FMRadio +translation_of: Archive/B2G_OS/API/FMRadio +--- +

WebFM API 可存取裝置上的 FM 收音機功能。此介面可開啟/關閉 FM 收音機，亦可搜尋各個電台。

+

進入點 (Entry point)

+
if (navigator.mozFMRadio)
+  navigator.mozFMRadio.enable();
+
+

API

+
interface FM : EventTarget {
+   readonly attribute boolean enabled;
+   readonly attribute boolean antennaAvailable;
+   readonly attribute double frequency;
+   readonly attribute double frequencyUpperBound;
+   readonly attribute double frequencyLowerBound;
+   readonly attribute double channelWidth;
+
+   attribute Function onantennaavailablechange;
+   attribute Function onfrequencychange;
+   attribute Function onenabled;
+   attribute Function ondisabled;
+
+   DOMRequest enable(double frequency);
+   DOMRequest disable();
+   DOMRequest setFrequency(double frequency);
+   DOMRequest seekUp();
+   DOMRequest seekDown();
+   DOMRequest cancelSeek();
+}
+

屬性 (Attribute)

+
+
+ enabled
+
+ 表示目前是否開啟收音機
+
+ antennaAvailable
+
+ 表示是否已插上天線並可使用天線
+
+ frequency
+
+ 目前的收音機頻率
+
+ frequencyUpperBound
+
+ 以 seek 函式搜尋收音機電台的最高頻率
+
+ frequencyLowerBound
+
+ 以 seek 函式搜尋收音機電台的最低頻率
+
+ channelWidth
+
+ 頻率範圍內的頻寬，以「MHz」為單位。常用數值為 0.05、0.1 (預設)、0.2 其中之一。
+
+ 指定了某一頻率之後，就會四捨五入到 channelWidth 所指定的最接近頻率。舉例來說，若 100 Mz 為有效頻率，且 channelWidth 為 0.2，則 100.2 與 99.8 將成為有效頻率。但若是 100.15 將四捨五入為 100.2。
+
+

函式 (Method)

+
+
+ enable(frequency)
+
+ 開啟收音機並轉為指定頻率。若沒有參數 (Argument) 就呼叫此函式，將隨即丟出錯誤。作業成功或錯誤均將回傳 DOMRequest。
+
+ disable()
+
+ 關閉收音機。若回傳成功的 DOMRequest，則代表已正確關閉收音機。
+
+ setFrenquecy(frequency)
+
+ 非同步變更收音機的頻率。此數值必須位於 frequencyLowerBound 與 frequencyUpperBound 之間。若嘗試設定此範圍之外，將導致錯誤。
+
+ 若回傳成功的 DOMRequest，則代表已正確變更頻率。
+
+ seekUp()
+
+ 要求收音機尋找新的頻率 (一般搜尋較目前頻率更高的頻率)。若成功搜尋到新的頻率，將隨即啟動 frequencychange 事件。若回傳成功的 DOMRequest，則代表已開始搜尋作業。一旦達到最高頻率，將回到較低頻率開始搜尋。
+
+ seekDown()
+
+ 與上方函式的功能相同，但將搜尋較目前頻率更低的頻率。一旦達到最低頻率，將回到較高頻率開始搜尋。
+
+ cancelSeek()
+
+ 取消目前的搜尋作業。若回傳成功的 DOMRequest，則代表已取消搜尋作業。
+
+

事件 (Event)

+
+
+ enabled
+
+ 開啟收音機時觸發此事件
+
+ disabled
+
+ 關閉收音機時觸發此事件
+
+ antennaavailablechange
+
+ 插上/拔除天線時觸發此事件
+
+ frequencychange
+
+ 只要變更收音機頻率，均將觸發此事件
+
+

另請參閱

+

Gaia radio app

diff --git a/files/zh-tw/archive/b2g_os/api/index.html b/files/zh-tw/archive/b2g_os/api/index.html new file mode 100644 index 0000000000..706080ff54 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/api/index.html @@ -0,0 +1,156 @@ +--- +title: B2G OS APIs +slug: Archive/B2G_OS/API +tags: + - API + - B2G API + - NeedsTranslation + - TopicStub + - b2g os api's +translation_of: Archive/B2G_OS/API +--- +

List of B2G OS APIs 

+ +

+A +B +C +D + + +F + + +H + + + + + + + + +M +N + + +P + + + + +S +T +U + + +W + + + + + + + +

diff --git a/files/zh-tw/archive/b2g_os/apps/index.html b/files/zh-tw/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..7c848f3df1 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/apps/index.html @@ -0,0 +1,45 @@ +--- +title: 製作 Firefox OS 的 apps +slug: Archive/B2G_OS/Apps +translation_of: Web/Apps/Fundamentals +--- +

Firefox OS 裝置的應用程式其實只是開啟網頁上的Web應用；它們完全由各種開放的Web技術所組成，如 JavaScript, HTML, 和 CSS。雖然我們寫給 apps 的主要文件幾乎涵蓋了您所需要知道的所有事情，這裡列了一些特別著重於開發及測試 Firefox OS的文件。

+
+
+

文件及入門教材

+
+
+ 寫一個 Firefox OS 的 Web app
+
+ 一份教您製作您的第一個 Firefox OS web 應用程式的入門指南。
+
+ 撇步及技巧
+
+ 一份我們開發者建議您的撇步及技巧集(像是對於問題的替代方案)。
+
+

全部文章...

+
+
+

尋求社群協助

+

您在 app 相關問題上需要幫助、且無法在文件中找到解法嗎？

+
    +
  • 在 layout 論壇中請教，, 其中涵蓋 CSS 和 HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }} +
      +
    • 在 Mozilla IRC channel 裡面提出你的問題: #openwebapps
      • +
    +
    • +
+

請遵守網路禮節...

+

工具

+ +

View All...

+ + +
+
+

 

diff --git a/files/zh-tw/archive/b2g_os/apps/writing_a_web_app_for_b2g/index.html b/files/zh-tw/archive/b2g_os/apps/writing_a_web_app_for_b2g/index.html new file mode 100644 index 0000000000..4e612e8a87 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/apps/writing_a_web_app_for_b2g/index.html @@ -0,0 +1,25 @@ +--- +title: 寫一個 Firefox OS 的 Web app +slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_B2G +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

B2G apps 只是用 HTML、CSS、和 Javascript 寫的 Web apps。在網頁上發佈 Web apps 就跟發佈一般的網站一樣。為了讓網站可以像 Web app 一樣可以被安裝在行動裝置上，你只需要加上一個 manifest 以及掛上一個安裝按鈕，如以下說明。

+

建議您從下面的文章著手：

+ +

當然，您也可以無拘無束地 沉浸在 Open Web Apps 的深處！

+

安裝 Web app

+

在網頁上發佈 app 和 manifest 之後，接著要讓 Gecko 知道這個訊息。像是在安裝時，Gecko 查詢 manifest 並將必須的項目加入到 home 的畫面，等等。

+

安裝 app 需要呼叫 navigator.mozApps.install() API。這裡有個安裝按鈕的範例，當您將 app 置於自己管理的位置時，這個範例可以讓您將按鈕嵌入於您自己的網頁：

+
<script>
+var manifest_url = "http://my.webapp.com/manifest.json";
+</script>
+
+<button onclick="navigator.mozApps.install(manifest_url); return false;">
+  Install this awesome app on your homescreen!
+</button>
+
+

注意：這個安裝按鈕也可以被置於像是 Mozilla Marketplace 的 app market，然而一般而言，在您自己的主要頁面上面也放一個「安裝 web app」的按鈕是非常貼心的。

+

現在請用 B2G 瀏覽器 app 瀏覽您的網站，並且點選安裝按鈕吧。

diff --git a/files/zh-tw/archive/b2g_os/architecture/index.html b/files/zh-tw/archive/b2g_os/architecture/index.html new file mode 100644 index 0000000000..a0a649e4f9 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/architecture/index.html @@ -0,0 +1,717 @@ +--- +title: Firefox OS 架構 +slug: Archive/B2G_OS/Architecture +translation_of: Archive/B2G_OS/Architecture +--- +
+

本文件是 Firefox OS 平台架構的初步概要介紹，將會簡單地向您介紹 Firefox OS 的重要概念，並解釋元件間如何互動。

+
+ +
+

注意：Firefox OS 仍算是開發中的產品。本文說明的架構仍非最後確定的架構，隨時可能修改。

+
+ +

Firefox OS 術語

+ +

在閱讀 Firefox OS 技術文件之前，建議先了解以下的詞彙:

+ +
+
B2G
+
Boot to Gecko 的縮寫。
+
Boot to Gecko
+
Firefox OS 作業系統的工程代號。此代號常常用以代表 Firefox OS。因為在本專案還未定下正式名稱之前，此代號已經用了很長的一段時間，因此常常用以代表 Firefox OS。
+
Firefox OS
+
Firefox OS 即是將 Mozilla (及其 OEM 夥伴) 的品牌與服務，套用至 Boot to Gecko 的基礎之上開發而得的最終產品。
+
Gaia
+
Firefox OS 平台的使用者介面 (UI)。 在啟動 Firefox OS 之後，都是透過 Gaia 層產出螢幕上的任何東西。Gaia 建構出鎖定畫面、主畫面，以及大家預期智慧型手機所應提供的其他標準 App。Gaia 完全使用 HTML、CSS、JavaScript 實作而成。透過實作在 Gecko 層的開放 Web API，與其底層的作業系統溝通。第三方 App 均可安裝於 Gaia 層。
+
Gecko
+
Firefox OS App 的執行環境 (Runtime)，也就是本層可支援所有的開放標準：HTML、CSS、JavaScript。本層另必須確保這些 API 可正確運作於 Gecko 支援的所有 OS。意即 Gecko 另包含了網路連線堆疊、圖形堆疊、配置引擎、JavaScript 虛擬機器、移植層。
+
Gonk
+
Gonk 是 Firefox OS 平台的底層作業系統，是由 Linux 核心 (以 Android Open Source Project 為架構)，與使用者空間的硬體抽象層 (Hardware abstraction layer，HAL) 所組成。核心以及許多使用者空間的函式庫，均來自常見的開放源碼專案，如 Linux、libusb、bluez 等。HAL 的某些部分是與 AOSP 共享，如 GPS 或相機。你可將 Gonk 當成是簡單的 Linux 分支版本。Gonk 又是 Gecko 的移植目標；意即有一套 Gecko 可在 Gonk 上執行，就像是 Gecko 也有 Mac OS X、Windows、Android 等版本。因為 Firefox OS 可完整控制 Gonk，所以某些不能開放給其他 OS 用的介面，還是可開發給 Gecko 使用。舉例來說，Gecko 可直接存取 Gonk 的完整電話功能堆疊，並於 Gonk 上顯示緩衝區 (Frame buffer)，但是其他 OS 不能進行類似的存取。
+
Jank
+
此一詞彙常見於行動 App 領域，指在 APP 中執行了緩慢或沒有效率的程式碼，進而阻礙了 UI 更新並發商系統延遲或無回應的情形。Gaia 開發者使用不同的最佳化方法，要儘力避免此狀況發生。
+
+ +

整體架構示意圖

+ +

下圖比較了專利平台與 Firefox OS 之間的架構。

+ +

on the left is a native mobile architecture stack, on the right is the Firefox OS architecture. they are similarm except that the native stack is all proprietary device functionality, and the Firefox OS stack is all done with open source and web technologies.

+ +

Firefox OS 即減去了 OS 與 App 層之間的原生 API 層。這種統合式的設計可減輕平台負擔並簡化安全機制，卻又不致犧牲效能，也不會影響智慧型手機的使用體驗。

+ +
    +
  1. Gaia 作為裝置的核心 Web App 與 UI 層，並全以 HTML5、CSS、JavaScript 撰寫而成，並有許多 API 可供 UI 程式碼存取手機硬體與 Gecko 功能。
    2. +
  2. Gecko 即為 Firefox OS 的 Web 引擎與表現層 (Presentation layer)，作為 Web 內容與底層裝置的之間介面，進而將硬體接上 HTML。Gecko 亦提供 HTML5 剖析 (Parsing) 與繪圖引擎，並透過程式設計的方式，以安全的 Web API 存取硬體功能、更新作業，以及其他核心服務。
    3. +
  3. Gonk 是 Firefox OS 堆疊中的核心層級元件，作為 Gecko 與底層硬體之間的介面。Gonk 可控制底層硬體，並將硬體功能告知 Gecko 中建構的 Web API。Gonk 可視為「黑盒子」，暗自進行所有複雜又零碎的背景作業，以於硬體層制定請求，進而控制行動裝置。
    4. +
  4. 行動裝置，就是執行 Firefox OS 的行動電話硬體。OEM 廠商則負責提供行動裝置。
    5. +
+ +

特殊 Firefox OS 架構

+ +

Firefox OS Architecture

+ +

Firefox OS 開機流程

+ +

本段將說明 Firefox OS 的開機流程，包含整個流程所牽涉的部份，以及相關部分在系統裡的位置。流程順序大致如下：最先從核心空間裡的開機載入器 (Bootloader) 開始，到原生程式碼中開始程序，進入 B2G 再到使用者空間的 Gecko，最後到 Gecko 裡的系統 App、視窗管理器、主畫面 App。而其他 App 也同樣依照上述程序執行。

+ +

+ +

開機程序

+ +

在首次啟動 Firefox OS 裝置時，就會於主要的開機載入器 (bootloader) 中開始作業。自此，就如同一般作業系統程序，更高一階的開機相關載入器會載入執行，然後往上更高一階的載入器又會被接續執行，如此下去形成一串開機載入流程鏈，直到最後程序就會將執行權交到 Linux 核心。

+ +

關於開機程序有幾點需要注意：

+ + + +

Linux 核心

+ +

Gonk 使用 Linux 核心的版本，與 Android 開放源碼專案 (Android Open Source Project，AOSP) 所衍生使用的版本非常相似，但是並未沿用幾項 AOSP 所進行的修改。除外，雖然 Lunix 基本上已經相當穩定，但仍有些製造商會自行修改。

+ +

Linux 的啟動程序已經可在網路上找到相當詳盡的文件說明，所以在此不再贅述。

+ +

Linux 核心會啟動一些基本的程序 (Process)。在執行 init.rc 中定義的程序後，會再執行 init.b2g.rc 以啟動基本核心程序，如 b2g (Firefox OS 基礎程序，內含 Gecko) 以及 rild (通話功能的相關程序，各晶片組多有不同)，請見下方所述細節。和大部分的 Unix 作業系統一樣，最後會啟動使用者空間 (Userspace) 程序。

+ +

在啟動 init 程序之後，Linux 核心就會處理由使用者空間傳來的系統呼叫，並中斷來自於硬體裝置的類似呼叫。許多硬體功能均透過 sysfs 揭露給使用者空間，以下便是 Gecko 讀取電池狀態的程式碼片段：

+ +
FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &capacity);
+  fclose(capacityFile);
+}
+ +

更多有關 init 程序

+ +

Gonk 中的 init 程序，將處理必要的檔案系統並產生系統服務，之後就如同程序管理一般繼續待命，並將編譯指令碼 (也就是 init*.rc 檔案)；指令碼內的指令則說明在啟動不同服務時所應進行的作業。

+ +

init 程序必須處理一個相當關鍵的作業，即啟動 b2g 程序；這也是 Firefox OS 的核心。

+ +

以下為 init.rc 中用以啟動 b2g 的程式碼：

+ +
service b2g /system/bin/b2g.sh
+    class main
+    onrestart restart media
+ +
+

注意：Firefox OS 與 Android 的 init.rc 之間的差異，將各款裝置而有所不同。有時候只是附加 init.b2g.rc，但有時修改的幅度甚大。

+
+ +

使用者空間 (Userspace) 的程序架構

+ +

現在讓我們來看看高階一點的部分，到底Firefox OS的各個元件之間是如何運作互動的。下圖所描述的是Firefox OS的主要使用者空間程序。

+ +

接著可進一步了解 Firefox OS 不同元件是如何運作互動。下圖呈現 Firefox OS 的主要使用者空間程序。

+ +

Userspace diagram

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +
+

注意：由於 Firefox OS 尚處於開發階段，所以此示意圖可能隨時修改而非完全正確。

+
+ +

b2g 程序是主要的系統程序，能以高權限存取大部分的硬體；b2g 可溝通數據機、畫出顯示緩衝區 (Framebuffer)，並與 GPS 或相機等硬體溝通。在系統內部，b2g 則執行 Gecko 層 (即以 libxul.so 所實作)。另可參考 Gecko 以了解 Gecko 層的運作方式，以及 b2g 與 Gecko 層溝通的方法。

+ +

b2g

+ +

b2g 程序會生成許多低權限的內容程序 (Content process)，並透過這些程序來載入 Web 的 App 與內容。這些程序會再透過訊息傳遞系統「IPDL」溝通 Gecko 伺服器。

+ +

b2g 程序所執行的 libxul，即參照 b2g/app/b2g.js 取得預設偏好設定。透過偏好設定，程序將開啟上述的 HTML 檔案「b2g/chrome/content/shell.html」，即於 omni.ja 檔案中編譯而得。而 shell.html 則包含了 b2g/chrome/content/shell.js 檔案，將觸發 Gaia 的「system」這個 App。

+ +

rild

+ +

rild 為銜接數據機處理器的介面，也是用以建構無線介面層 (Radio Interface Layer，RIL) 的常駐程式 (Daemon)。往往是由硬體製造商所撰寫的專屬程式碼，以溝通自家的數據機硬體。rild 可讓用戶端程式碼連接 rild 本身綁定的 Unix-domain socket。可經由以下類似的 init 指令碼啟動之：

+ +
service ril-daemon /system/bin/rild
+    socket rild stream 660 root radio
+ +

rilproxy

+ +

在 Firefox OS 中，rild 用戶端即屬於 rilproxy 程序，作為 rild 與 b2g 之間不具功能的傳送代理dumb forwarding proxy。為何需要此代理伺服器，就必須從實作細節來說明了。但簡單來說，proxy 確實有其存在的必要。可到 GitHub 上找到 rilproxy 原始碼。

+ +

mediaserver

+ +

mediaserver 程序用以控制音訊與視訊的播放作業。Gecko 透過 Android 的遠端程序呼叫 (Remote Procedure Call，RPC) 和其溝通。某些可由 Gecko 撥放的媒體檔案 (如 OGG Vorbis 音訊、OGG Theora 視訊、WebM 視訊等)，均是由 Gecko 解碼後直接傳送給 mediaserver 程序。其他的媒體檔案則是交由 libstagefright 解碼。libstagefright 可存取特定編碼與硬體編碼器 (Hardware encoder)。

+ +
+

注意：mediaserver 程序為 Firefox OS 的「暫時性」元件，主要是協助早期的開發作業。預計最快在 Firefox OS 2.0 階段就會移除。

+
+ +

netd

+ +

netd 程序可用來設定網路介面。

+ +

wpa_supplicant

+ +

wpa_supplicant 程序為標準 UNIX 樣式常駐程式，可處理 WiFi 存取點的連線作業。

+ +

dbus-daemon

+ +

dbus-daemon 用以建構 D-Bus 訊息匯流系統，可供 Firefox OS 進行藍牙通訊作業。

+ +

Gecko

+ +

如前所述，Gecko 即由 Web 標準 (HTML、CSS、JavaScript) 建構而成，並用以打造 Firefox OS 上所顯示的一切，另可控制手機硬體。Web App 則透過安全且受控制的 Web API (同樣以 Gecko 所建構而得) 來將 HTML5 連上硬體。Web API 可透過程式設計的方式，存取底層行動裝置硬體 (如電池或振動) 的功能，或取得儲存的資料 (如行事曆或聯絡資訊)。Web 內容亦可透過content invokes the accessible Web APIs within HTML5.

+ +

App 是由相關 HTML5 網頁內容所組成。如果要撰寫 Web App 並於 Firefox OS 行動裝置上執行，則開發者也只要組合、封包、發佈此網頁內容即可。而在執行期間，即交由瀏覽器轉譯、編譯、換至此網頁內容。可參閱應用程式中心 (App Center) 進一步了解。

+ +
+

注意：如果要搜尋 Gecko 的 Codebase，則可前往 http://dxr.mozilla.org，功能比較炫、參照功能不錯，但 Repo 較有限。亦可使用傳統的 http://mxr.mozilla.org，內含較多的 Mozilla 專案。

+
+ +

Gecko 架構圖

+ +

+ + + +

和 Firefox OS 相關的 Gecko 檔案

+ +

b2g/

+ +

b2g 資料夾主要包含 Firefox OS 相關功能。

+ +
b2g/chrome/content
+ +

內含於系統 App 上運行的 Javascript 檔。

+ +
b2g/chrome/content/shell.html
+ +

Gaia 的進入點。如前所述，shell.html 會拉進 shell.js 與 settings.js。用於系統 App 的 HTML。

+ +
<script type="application/javascript;version=1.8" src="chrome://browser/content/settings.js"> </script>
+<script type="application/javascript;version=1.8" src="chrome://browser/content/shell.js"> </script>
+ +

settings.js 裡面是系統預設的設定參數。

+ +
b2g/chrome/content/shell.js
+ +

shell.js 是載入 Gaia「system」App 的第一個指令碼。

+ +

shell.js 將匯入所有必要的模組、註冊關鍵的監聽器、定義 sendCustomEvent 與 sendChromeEvent 以溝通 Gaia、提供 webapp 安裝輔助程式：indexedDB 配額、遠端除錯器、鍵盤助手、螢幕截圖工具。

+ +

不過 shell.js 最重要的功能，則是啟動 Gaia 的「system」App，然後將整體系統相關的管理作業交給該「system」App。

+ +
let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);
+ +
b2g/app/b2g.js
+ +

此指令碼包含預先定義的設定，就像是瀏覽器的 about:config，以及 Gaia 的 pref.js。這些設定值另可透過「設定 (Settings)」App 變更，也可用 Gaia 建置指令碼中的 Gaia’s user.js 覆寫之。

+ +

/dom/{API}

+ +

新實作的 API (post-b2g) 會位於 dom/ 資料夾。舊 API 位於 dom/base，例如navigator.cpp。

+ +
/dom/apps
+ +

將載入 .jsm。而 .js API 實作即如 webapp.js 安裝、getSelf 等。

+ +
dom/apps/PermissionsTable.jsm
+ +

所有的存取權限都定義在 PermissionsTable.jsm 之中。

+ +

/dom/webidl

+ +

WebIDL是用以定義 Web API 的語言，請參閱 WebIDL_bindings 了解所支援的屬性。

+ +

/hal/gonk

+ +

此目錄包含 gonk 銜接層 (Port layer) 的相關檔案。

+ +

所產生的檔案

+ +
module/libpref/src/init/all.js
+ +

內有全部的設定檔。

+ +
/system/b2g/ omni.ja and omni.js
+ +

內有裝置內資源所適用的樣式。

+ +

處理輸入事件

+ +

Gecko 內絕大多數的行動，都是由使用者的行動所觸發，可用輸入事件為代表 (如按下按鈕、觸碰裝置的螢幕等)。這些事件必須透過 nsIAppShell 的 Gonk implementation (為 Gecko 介面之一，作為 Gecko App 的主要進入點)，進入到Gecko。也就是說，輸入裝置驅動程式將呼叫 nsAppShell 物件 (代表 Gecko 子系統) 上的函式，來將事件發送到使用者介面。

+ +

例如：

+ +
void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell->NotifyNativeEvent();
+}
+ +

這些事件來自於Linux標準input_event系統. Firefox OS在其上添加了一層簡單的抽象層，提供了一些像是事件過濾等不錯的功能。產生事件的程式碼在widget/gonk/libui/EventHub.cpp裡的EventHub::getEvents()方法。

+ +

Gecko接收到事件後，這些事件會透過nsAppShell發送到DOM:

+ +
static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+
+ +

之後，事件有可能被Gecko處理掉或是當作DOM事件被發送到網頁應用程式做進一步處裡。

+ +

影像繪圖

+ +

在最底層，Gecko利用 OpenGL ES 2.0 向包有硬體影格緩衝區(frame buffers)的GL context物件繪圖，這是由Gonk所實作的nsWindow完成:

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

FramebufferNativeWindow類別(class)是直接從Android而來，請見FramebufferNativeWindow.cpp；使用了gralloc API存取繪圖驅動，好配對影格緩衝裝置的緩衝到記憶體之中。

+ +

Gecko透過圖層(Layers)系統合成螢幕上的影像，大體而言如下:

+ +
    +
  1. Gecko將不同部分的記憶體分頁(pages)畫入記憶體緩衝，有時後這些緩衝存在系統記憶體，有時候因為Gecko會直接畫入視訊記憶體(video memory)，所以這些緩衝也可能會是配對在Gecko定址空間的材質(textures) ，以上的工作主要是由BasicThebesLayer::PaintThebes()方法完成。
    2. +
  2. Gecko利用OpenGL命令將這些材質合成起來，合成工作由ThebesLayerOGL::RenderTo()方法執行。
    3. +
+ +

因為有關Gecko如何處理影像繪圖的作法已經超出本文範圍，所以本文不再做進一步討論了。

+ +

硬體抽象層(Hardware Abstraction Layer, HAL)

+ +

Gecko HAL是Gecko接口層之一，它使用高階層Gecko能取用的C++ API存取跨平台間的底層系統介面，這些API以每個平台為基礎實作在Gecko HAL之內。Gecko的Javacsript程式碼並不能看到這個HAL層。

+ +

HAL如何運作

+ +

讓我們先來看看Vibration API。這個Gecko HAL API被定義在hal/Hal.h，基本上你可以看到如下函式(為了說明需要，經過函式簽名(function signature)簡化):

+ +
void Vibrate(const nsTArray<uint32> &pattern);
+ +

Gecko呼叫這個函式來根據某個特定型態開啟震動(另外有一個對應的函式用來關閉震動)。Gonk對這個函式的實作在hal/gonk/GonkHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+
+ +

下面以VibratorRunnable::Run()實作的程式碼發送震動開啟請求到另一個執行緒，其中主要的迴圈部分如下:

+ +
while (!mShuttingDown) {
+  if (mIndex < mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+
+ +

vibrator_on()便是打開震動馬達的Gonk HAL API，這個函式透過sysfs向內部核心驅動程式送出訊息，寫入值到核心物件之中。

+ +

HAL API退回替代(Fallback)實作

+ +

Gecko HAL API 跨平台支援。當為沒有震動馬達的平台(如桌上型電腦)建置Gecko，則另一個HAL退回替代API會被使用，這個替代API實作於hal/fallback/FallbackVibration.cpp:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+}
+ +

沙箱(Sandbox)實作

+ +

因為大多數的網頁內容都是在低權限的內容程序運行，所以我們無法確保這些程序有權限去，例如，打開震動馬達，除此之外，為了避免出現程序爭相啟動震動的狀況出現，採用中央控制的作法較為理想。在Gecko HAL，透過sandbox作法可以達到中央控制的目標；其實sandbox也就是一個由內容程序發出到Gecko"伺服器"的代理請求，這個代理請求式透過IPDL送出。

+ +

以震動為例，這是由hal/sandbox/SandboxHal.cpp所實作的Vibrate()完成:

+ +
void Vibrate(const nsTArray<uint32_t>& pattern, const WindowIdentifier &id) {
+  AutoInfallibleTArray<uint32_t, 8> p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()->SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}
+ +

這會發送一個 PHal 介面定義的訊息，亦即IPDL的hal/sandbox/PHal.ipdl內所描述的。其中呼叫的函式大致如下:

+ +
Vibrate(uint32_t[] pattern);
+ +

訊息的接收端是HalParent::RecvVibrate()函式，這個函式定義在hal/sandbox/SandboxHal.cpp裡面，大致如下:

+ +
virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern,
+            const InfallibleTArray<uint64_t> &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

本段範例雖然有省略一些相關性不高的部分，不過確實的說明訊息傳遞是如何由Gecko到Gonk，再到Gonk HAL實作Vibrate()，最後到震動馬達驅動程式。

+ +

DOM APIs

+ +

DOM介面是網頁根本上和Gecko溝通的方法，如果想知道更多這方面的細節，請參考關於DOM。 DOM介面是用IDL定義的，其中包括了外部函式介面(foreign function interface, FFI)以及介於javascript和C++的物件模型(object model, OM) 。

+ +

像是vibration API便是透過IDL讓網頁內容使用，這部分程式碼定義在nsIDOMNavigator.idl:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

mozVibrate(冠有廠商前綴的函式，這個函式背後的震動規格尚未定案)接受jsval型態的參數，也就是Javascript的值。IDL編譯器，xpidl，會產生C++的介面，這個介面會由Navigator.cpp內的Navigator類別實作之。

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

這個函式最關鍵的部分在於呼叫 hal::Vibreate() 將控制權由DOM移交給Gecko HAL，自此我們便會如前所述地進入HAL層，最後到達驅動程式。在上層的 DOM 並不在意現在是在哪個平台上執行(Gonk, WIndows, Mac OS X等等)，DOM 也不在意現在是內容程序的程式碼在跑或是Gecko伺服器的在跑，所有的一切都交由底層系統處理。

+ +

vibration API相對單純，適合用於說明，而SMS API 便是比較複雜的API，它用到自己的"遠端"層將內容程序和伺服器連接起來。

+ +

無線介面層(Radio Interface Layer, RIL)

+ +

The userspace process architecture段落已經提過RIL，這邊我們將更進一步檢視各個元件是如何互動運作。

+ +

和RIL有關的元件有:

+ +
+
rild
+
和特定數據機韌體溝通的背景程序(daemon)。
+
rilproxy
+
rild和Gecko b2g程序之間訊息傳遞的代理背景程序(daemon)。rilproxy的存在解決了無法和rild直接溝通的問題，因為rild只可以在radio群組內溝通。
+
b2g
+
實作Gecko的程序，又稱為chrome process。其中和RIL相關的部分有dom/system/gonk/ril_worker.js(這是一個worker執行緒，會透過rilproxy和rild溝通，並且實作了無線狀態機(radio state machine))以及nsIRadioInterfaceLayer介面(是主執行緒的XPCOM服務，主要是作為ril_worker.js和Gecko各元件，包括Gecko內容程序，之間的訊息傳遞)。
+
Gecko's content process
+
nsIRILContentHelper介面會提供XPCOM服務，有了這個服務，Gecko內容程序會使用到的DOM API，例如Telephony與SMS API，便能夠和Chrome程序的無線介面溝通。
+
+ +

範例: Example: Communicating from rild to the DOM

+ +

讓我們來看看一段例子，看一下系統底層是如何和DOM程式碼溝通。當數據機接收到來電時，它會透過專屬機制通知rild，rild接著按照ril.h內定義的"open"協定發送訊息到rild客戶端，以來電通話為例，RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED 訊息會被rild發送至rilporxy。

+ +

實作在rilproxy.c的rilproxy會透過以下程式碼，和rild建立連線:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

一旦從rild那裏取回訊息後，訊息便會經由連接rilproxy和Gecko的socket傳給Gecko，Gecko是藉由IPC thread接收訊息:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+
+ +

訊息的接收端是SystemWorkerManager，然後訊息又會被重新打包發送到{source("dom/system/gonk/ril_worker.js", "ril_worker.js")}}執行緒，這個ril_worker.js實做了RIL狀態機(RIL state machine); 這其中的過程是透過 RILReceiver::MessageReceived()函式完成:

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

訊息傳遞到ril_worker.js執行緒後，onRILMessage()函數接著會被呼叫。其中呼叫方法是利用Javascript API函式JS_CallFunctionName():

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage()定義在dom/system/gonk/ril_worker.js中；然後訊息會被切割成包裹，之後每一個包裹會被送給適當的處理函式:

+ +
handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+
+ +

ril_worker.js對每一個請求類型有實作一個同名的處理函式，所以程式碼能夠簡單地取得請求類型名稱，然後再比對是否有對應的函式存在，如果有便呼叫對應函式起來處理。

+ +

以RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED為例，下面的處理函式會被呼叫:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

當收到訊息通知後，通話狀態也跟著改變，所以狀態機接著呼叫getCurrentCall()取得目前通話狀態:

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

這樣會回傳一個請求給rild，要求目前所有進行中通話的狀態。這個請求會沿著RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED 訊息之前所行進過的路走，只不過方向相反(從 ril_worker.js 到 SystemWorkerManager 、到 Ril.cpp、再到rilproxy，最後是 rild socket)。 rild 然後會回應請求，再回到ril_worker.js的REQUEST_GET_CURRENT_CALLS訊息處理器，整個過程是雙向溝通。

+ +

通話狀態然後會被處理，和之前的狀態比較，如果狀態有變更，ril_worker.js 會再通知在主執行緒上的nsIRadioInterfaceLayer服務:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

nsIRadioInterfaceLayer實作在dom/system/gonk/RadioInterfaceLayer.js，而訊息是透過onmessage()收到:

+ +
 onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+
+ +

之後訊息會透過父程序訊息管理器(Parent Process Message Manager, PPMM)送到內容程序:

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

內容程序透過nsIRILContentHelper 服務的receiveMessage()從子程序訊息管理器(Child Process Message Manager, CPMM)那裡接受訊息:

+ +
receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;
+ +

接著，每一個電話callback物件的nsIRILTelephonyCallback.callStateChanged()方法會被呼叫；每一個有存取window.navigator.mozTelephony API的網頁應用程式會註冊這樣一個callback物件，這個callback物件會發送事件到網頁應用程式，如現階段通話物件狀態改變或有新通話來電事件。

+ +
NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString& aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall->ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr<TelephonyCall> call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr<CallEvent> event = CallEvent::Create(call);
+  nsresult rv = event->Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}
+ +

應用程式收到事件後可以跟著進行更新使用者介面等等:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

更進一步的範例請見撥號應用程式的handleEvent()。

+ +

3G data

+ +

有一個 RIL 訊息會向電信服務(cellular service)發起數據請求(data call)，這會啟動數據機的數據傳輸狀態。數據請求會開啟 Linux 核心的Point-to-Point Protocol (PPP) 介面裝置，這個裝置能夠透過使用者介面設定。

+ +

相關DOM APIs

+ +

以下是和 RIL 溝通相關的DOM APIs:

+ + + +

WiFi

+ +

Firefox OS 的 WiFi 後端使用 wpa_supplicant 處裡大部份工作。所以說WiFi 後端的主要工作是管理請求者(supplicant)，還有輔助一些任務，例如載入 WiFi 驅動程式和開關網路介面；從根本上來看，WiFi 後端就是一個狀態機(state machine)，而其狀態會跟隨請求者狀態。

+ +
+

Note: 許多 WiFi 有關的有趣東西都和 wpa_supplicant 程序可能的狀態變更息息相關。

+
+ +

WiFi 元件的實作可以分成兩份檔案:

+ +
+
dom/wifi/DOMWifiManager.js
+
實作網頁內容所看到的API；定義在 nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
實作狀態機和驅動請求者的程式碼。
+
+ +

這兩份檔案利用訊息管理員(message manager) 溝通。 後端聆聽請求訊息，比如說"連接"，然後回應訊息當請求行動完成後；DOM 端聆聽回應以及狀態改變和資訊更新的訊息。

+ +
+

Note: 任何同步 DOM API 都會藉由快取資料來實作，同步訊息會盡量避免。

+
+ +

WifiWorker.js

+ +

這份檔案實作了 WiFi 介面背後的主要邏輯，由 SystemWorkerManager 喚起，然後運行在 chrome 程序裡(對多執行緒版本來說)。 WifiWorker.js 可以切成兩塊: 一個巨大無名函式與 WifiWorker；無名函式會產出 WifiManager，為本地提供 API，包含和請求者連線以及可取得的掃描結果等事件通知，它會回應請求的資訊，控管和請求者連線的細節，遵照 API 使用客戶的指示行動。

+ +

WifiManager 和 DOM 中間是 WifiWorker 物件。WifiWorker 根據事件行動並且轉傳事件給 DOM，反過來，它也會收到 DOM 傳過來的請求，並且對請求者(supplicant)採取適當的動作，WifiWorker 也會維護請求者的狀態資訊和下不步行動的資訊。

+ +

DOMWifiManager.js

+ +

實作 DOM API，負責在呼叫方和 WiFi worker 之間傳遞訊息。

+ +
+

Note: 為了避免和 chrome 程序之間同步訊息，WiFi Manager 需要根據收到的事件快取狀態。

+
+ +

有一個同步訊息，那就是當 DOM API 初始化時為了取得請求者(supplicant)當下的狀態。

+ +

DHCP

+ +

DHCP 和 DNS 由標準 Linux DHCP 客戶端，dhcpcd，負責。當網路連線中斷後，因為無法運作，Firefox OS 會終止 dhcpcd，直到又重新連上網路，dhcpcd 會被再重啟。dhcpcd 也負責設定預設路徑(route)。

+ +

Network Manager

+ +

Network Manager 負責設定 3G 數據和 WiFi 元件的網路介面。

+ +

程序與執行緒

+ +

Firefox OS 採用 POSIX threads 實現所有應用程式的執行緒，這包括了應用成程式主執行緒、Web Worker 和輔助執行緒。Nice值決定了程序和執行緒的執行優先順序，然後再依賴 Linux 核心排程器先後執行；根據程序不同的狀態會有不同的Nice值。目前有7種Nice層級:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
程序執行優先順序
優先順序Nice用於
MASTER0主 b2g process
FOREGROUND_HIGH0持有 CPU wakelock 的程式
FOREGROUND1前景(foreground)程式
FOREGROUND_KEYBOARD1鍵盤程式
BACKGROUND_PERCEIVABLE7音樂播放背景(background)程式
BACKGROUND_HOMESCREEN18主畫面程式
BACKGROUND18其他背景程式
+ +

有些層級的 Nice 值雖然一樣，不過記憶體不足時的終止行為不一樣。所有的優先順序可以在建置時調整，相關的程式碼請見b2g/app/b2g.js。

+ +

一個程序(process)之內，主執行緒繼承了該程序的 Nice 值，而 Web Worker 執行緒所得到的 Nice 值為主執行緒的加一點，所以優先權較低，這麼做是為了避免耗費 CPU 資源的worker 拖慢的主執行續的運作。程序優先順趣會因為事件發生而變化，比如說當一個程式由前景轉到背景時、一個新的程式啟動、現存程式取得 CPU wakelock，一旦程序的執行優先權變動，旗下所屬的執行緒的執行優先權也會跟著變動。

+ +
+

Note: cgroups 目前沒有在資源管理用上，因為在某些裝置和核心上並不可靠。

+
+ +

 

diff --git a/files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/gaia_ui_tests_run_tests/index.html b/files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/gaia_ui_tests_run_tests/index.html new file mode 100644 index 0000000000..3924fbf5a6 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/gaia_ui_tests_run_tests/index.html @@ -0,0 +1,111 @@ +--- +title: Gaia UI Tests Run Tests +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Gaia_UI_Tests_Run_Tests +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Gaia_UI_Tests_Run_Tests +--- +
+

這個頁面尚未完成。請有志一同的夥伴幫忙補充。
+ 有任何意見都可以寄到 gaia-ui-automation@mozilla.org。

+
+

Running Tests

+

    Basically, we can run gaia-ui-tests on a device with marionette server, emulators, and desktop B2G. However, please notice again that you should choose the right branch of gaia-ui-tests describing your B2G the best as we talked on previous section.

+

Testing on Devices

+

    First of all, connect your device through USB to computer, and then forward the package from the phone to computer port:

+
adb forward tcp:2828 tcp:2828
+
+

    You might get weird error, such as "no permission", from the command above. In that case, you could try to do the commands below:

+
adb kill-server
+sudo adb devices
+adb forward tcp:2828 tcp:2828
+
+

    It's almost all done before you start to run your tests! Before you start to run the test, read through this warning in order to start gaia-ui-tests correctly.
+     Now, you can send this command to execute all gaiatests:

+
gaiatest <gaia_ui_tests folder>/tests/ --address=localhost:2828 --type=b2g-xfail <your manifest file location>
+
+

    Or, if you want to run solely one file, just do:

+
gaiatest <file> --address=localhost:2828 --type=b2g-xfail <your manifest file location>
+
+

    After the test, you will see all the result on pass/fail. And, for each individual test, it might have more information that you can go through. Here are some common examples you might be able to see:

+ + + + + + + + + + + + + + + + + + + + + + + +
Error Message Corresponding Actions
error: [Errno 111] Connection refusedreissue adb forward command
Element ... not visible before timeoutmake sure the element would display on the app you test
TimeoutException: Condition timed outmake sure the condition on the app is the same as your expectations
broken pipmostly bad marionette server issue
+

 

+

Testing on Emulator

+

Automatically launched emulator

+
+

TODO

+
+

Mannually launched emulator

+
+

TODO

+
+

Testing on Desktop B2G

+

    After you downloaded the Gaia UI test from GitHub, you also can use desktop build to run the tests. The Firefox OS desktop client, also called the B2G desktop client,  lets you run Gaia and Web apps in a Gecko-based environment somewhat  similar to an actual device. It doesn't emulate device hardware, so it's  not adequate for testing device APIs, and isn't a replacement for  testing on actual hardware. However, it does have a several APIs enabled  that aren't available on Firefox such as the Contacts and Settings  APIs. It can therefore be useful during the development of your  application, or while working on the Gaia user interface itself.

+

    You can download the latest build of the desktop client from this location, but make sure you download the appropriate file for your operating system.

+ +
+

Note 1: Unfortunately, due to Bug 832469 the nightly desktop builds do not currently work on Windows, so you will need either Mac or Linux to continue :

+

Note 2: If you do not have the required operating systems installed on your machine, a virtual machine is fine as well.

+
+

    Once downloaded, you will need to extract the contents to a local folder. For the purposes of the rest of this guide, I’ll refer to this location as $B2G_HOME.
+ Add the following line to your gaia/profile/user.js file,

+
user_pref('marionette.force-local', true)
+

which on :

+ +

    Because we’re running against the desktop client we must filter out all tests that are unsuitable. To run the tests, use the following command:

+
gaiatest --address=localhost:2828 --type=b2g-antenna-bluetooth-carrier-camera-sdcard-wifi-xfail <your manifest file location>
+
+

Test Variables

+

    There is one warning previously mentioned here. Please do read the warning before you setup your json test variables file.

+

    We use the --testvars option to pass in local variables, particularly those that cannot be checked into the repository. For example in gaia-ui-tests these variables can be your private login credentials, phone number or details of your WiFi connection.

+

    To use it, copy testvars_template.json to a different filename but add it into .gitignore so you don't check it into your repository.

+

    When running your tests add the argument: --testvars=(filename).json

+

Variables

+

this_phone_number (string) The phone number of the SIM card in your device. Prefix the number with '+' and your international dialing code.

+

remote_phone_number (string) A phone number that your device can call during the tests (try not to be a nuisance!). Prefix the number with '+' and your international dialing code.

+

wifi.ssid (string) This is the SSID/name of your WiFi connection. Currently this supports WPA/WEP/etc. You can add WiFi networks by doing the following (remember to replace "KeyManagement" and "wep" with the value your network supports) :

+

"wifi": { "ssid": "MyNetwork", "keyManagement": "WEP", "wep": "MyPassword" }

+

WPA-PSK: "wifi": { "ssid": "MyNetwork", "keyManagement": "WPA-PSK", "psk": "MyPassword" }

+

Marketplace: "marketplace": { "username": "MyUsername", "password": "MyPassword" }

+
+

Due to Bug 775499, WiFi connections via WPA-EAP are not capable at this time.

+
+

 

+

Test Parameters

+

    As you see in the last command we gave out on previous sections, there are many test variables for you to know. You can do this to get more information:

+
gaiatest --help
+

 

+

Test Data Prerequisites

+

Occasionally a test will need data on the hardware that cannot be set during the test setUp. The following tests need data set up before they can be run successfully:

+

test_ftu Requires a single record/contact saved onto the SIM card to test the SIM contact import

+

 

+

Go to "Writing Tests" section

+

 

diff --git a/files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/index.html b/files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/index.html new file mode 100644 index 0000000000..2c11cea761 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/automated_testing/gaia-ui-tests/index.html @@ -0,0 +1,69 @@ +--- +title: Gaia UI Tests Guidelines +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests +--- +
+

Gaia-ui-tests 是 Mozilla 的一套用於自動測試 Gaia UI 的架構。所有的測試都是以 Python 撰寫，佐以少數的 Javascript 來與 Firefox OS 的 API 溝通。此一系列的教學文章將會描述如何設定環境、撰寫及執行測試。

+
+

Gaia-ui-tests uses Gaiatest, a Python package based around Marionette. Gaiatest is designed to wrap HTML locators, Marionette calls and API calls together for interoperble communication and functionality. Marionette is based on the W3C standard developed for the Selenium WebDriver a programming interface for browser automation. If you have used WebDriver and page/app objects before then you will find using Marionette and gaiatest easy.

+

Getting started with Gaia UI tests

+

For those keen to get started with automated testing on Gaia/Firefox OS we have a tutorial series that will help you go from nothing to writing your own tests. Once you've completed this tutorial you'll have enough knowledge of testing, Firefox OS and Marionette to get started as a Mozilla tests contributor. It is highly recommended that you complete this tutorial if you wish to become a contributor.

+
+
+ Part 1: Getting started with Marionette and Firefox OS
+
+ This article covers installing the tools you need to get started with running tests, such as B2G Desktop, Python and Marionette.
+
+ Part 2: Basic interactions with Firefox OS using Marionette
+
+ An overview of the basic commands you will use to manipulate Firefox OS via Marionette.
+
+ Part 3: Upgrading our code into a reusable test
+
+ Moving on, in this article we will assemble some basic commands into a simple test inside a Python file so they can all be run as a single entity.
+
+ Part 4: Re-using commands to set up Firefox OS
+
+ Here we look at moving some of the commands into Python methods to promote code reuse.
+
+ Part 5: Introducing a test runner
+
+ A test runner is a central feature of any good test suite, allowing you to run multiple tests and report and aggregate results. In this article we will explore the basics of Python's unittest runner.
+
+ Part 6: Using tuples, and Marionette's By class
+
+ This time around we explain how to further reduce duplication of code, by storing repeated locators in tuples and simplifying the syntax with Marionette's By class.
+
+ Part 7: Writing your own tests
+
+ Now the basics and behind you, and it is time to start to writing your own tests! Here we give you some tool recommendations to make the work easier, and suggest some tests to try your hand at writing.
+
+ Part 8: Using a base class
+
+ In its current state, our test file contains all the test runner code. This is ok for now, but as soon as you start to run many test files it will mean a lot of duplication. Here we solve this problem by abstracting the test runner code into a separate Python class.
+
+ Part 9: Reducing duplication with app objects
+
+ As a final improvement to the code's maintainability, in this article we explore abstracting code that handles interaction with specific Firefox OS apps out into Python app objects.
+
+

Advanced topics

+

One you've got the basics of writing and running tests under your belt, you way want to move on to some more involved or advanced work, such as running the full gaia-ui-tests tests suite, or logging power draw as the result of a test.

+
+
+ Running the gaia-ui-tests
+
+ Guides to running the gaia-ui-tests suite against real Firefox OS devices and B2G Desktop in a variety of configurations.
+
+ Gathering Power Draw
+
+ How to use gaiatest to log power draw while a test is running.
+
+

See also

+

Gaia-ui-tests main repository

+

Questions/Comments/Concerns

+

This project is at a fairly early stage, and your feedback would be greatly appreciated:

+ diff --git a/files/zh-tw/archive/b2g_os/automated_testing/index.html b/files/zh-tw/archive/b2g_os/automated_testing/index.html new file mode 100644 index 0000000000..66f4eb520d --- /dev/null +++ b/files/zh-tw/archive/b2g_os/automated_testing/index.html @@ -0,0 +1,77 @@ +--- +title: 測試 Boot to Gecko +slug: Archive/B2G_OS/Automated_testing +translation_of: Archive/B2G_OS/Automated_testing +--- +

因為 Boot to Gecko 還在開發中，不久的將來即將有對新硬體的支援，因此如何做測試就是很重要的事情。這個頁面提供了從多種方面測試 Boot to Gecko 的文章及資訊。

+ + + + + + + +
+

Unit testing

+ +
+
+

Miscellaneous testing topics

+
+
+ Debugging OpenGL
+
+ How to debug OpenGL code on Boot to Gecko.
+
+ Feature support chart
+
+ A chart of what features are supported by the different builds of Boot to Gecko.
+
+

Marionette for Boot to Gecko

+ +

Gaia Unit Tests

+ +

Marionette Tutorials

+ +

Writing Tests For Marionette

+ +

View All...

+ 		+

Getting help from the community

+

If you're working with Boot to Gecko, or developing applications you'd like to run on Boot to Gecko based devices, there are community resources to help you!

+ +
    +
  • Ask your question on the Mozilla IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +
+

 

diff --git a/files/zh-tw/archive/b2g_os/building/index.html b/files/zh-tw/archive/b2g_os/building/index.html new file mode 100644 index 0000000000..9e5c54202c --- /dev/null +++ b/files/zh-tw/archive/b2g_os/building/index.html @@ -0,0 +1,124 @@ +--- +title: 建置 Boot to Gecko +slug: Archive/B2G_OS/Building +translation_of: Archive/B2G_OS/Building +--- +
+
+

當您已經建立好編譯的系統、第一次成功地抓了程式碼以及設定好程式碼，您就可以編譯 Boot to Gecko。

+

更新程式碼

+

如果您不是第一次編譯B2G，您需要在編譯之前先抓取最新的程式碼。您可以執行以下指令來更新B2G工具及相依套件：

+
git pull
+./repo sync
+
+

您可以藉由指定名稱來更新某部分的倉儲：

+
./repo sync gaia
+
+

repo指令也有其他您可能會有興趣的選項可用；您可執行 repo help 指令來獲取有用的資訊。

+

編譯

+
+

注意：在編譯前，您可以設置一個 .userconfig 檔案來訂製這次編譯。使用 .userconfig 檔案來客製 有更多詳細資訊。

+
+

執行 build.sh 就可以開始編譯 Boot to Gecko：

+
cd B2G
+./build.sh
+
+

是時候該再喝杯咖啡，或小睡一下了(尤其是第一次編譯)。

+

專程編譯某些模組

+

如果您只想要編譯某個模組，例如 Gecko，您可以指定名稱：

+
./build.sh gecko
+
+

您也可以用這個指令來取得您編譯的模組的列表：

+
./build.sh modules
+
+

設定要使用的處理器數目

+

B2G 的編譯 scripts 預設使用系統的 cores 數量加二作為平行工作的數量。您可以再執行 build.sh 的時候指定 -j 參數來改變這個預設值。如果您想要把編譯工作丟到背景、並且減輕 CPU 負載來做其他事情的話，這對您就很方便。當您面臨到編譯問題時，如果您一次就只執行一個編譯工作的話、設定處理器數目也可以讓您更容易讀取編譯的錯誤輸出，真的很方便。

+

舉例來說，設定同時只會有兩個工作來編譯：

+
./build.sh -j2
+
+

對於此對常見的使用案例就是防止不要平行編譯。這會讓編譯的輸出更加容易閱讀，更容易釐清編譯的問題。執行下面指令：

+
./build.sh -j1
+
+

多語系編譯

+

建立多語系的編譯版本：

+

Gaia

+
    +
  1. 決定要用哪個 Gaia 語系檔。這邊我們用 locales/languages_dev.json 和 locales/languages_all.json 當做我們 Gaia 的語系檔。
    2. +
  2. Clone the appropriate locales
    3. +
  3. 從 http://hg.mozilla.org/gaia-l10n 複製適當的語系到目錄下；這裡我們放於 gaia-l10n/ 下。接著您會需要將列於語系檔之內的美個語系的倉儲(repo)都複製下來。
    4. +
  4. 您需要將上面步驟二目錄的絕對路徑設定在 LOCALE_BASEDIR 環境變數中。也要把步驟一中檔案的絕對路徑設定在 LOCALES_FILE 環境變數中。
    5. +
+

如例：

+
export LOCALE_BASEDIR=$PWD/gaia-l10n
+export LOCALES_FILE=$PWD/gecko/gaia/shared/resources/languages-dev.json
+
+

Gecko

+
    +
  1. 決定要用哪個 Gecko 語系檔。這邊我們用 b2g/locales/all-locales 當做我們的 Gecko 語系檔。
    2. +
  2. 複製適當的語系到目錄下；像是 gecko-l10n/ 。 + +
    3. +
  3. 複製 compare-locales.
    4. +
  4. +

    將步驟二目錄的絕對路徑設定在 L10NBASEDIR 環境變數中。將步驟一中的語系以空白分隔方式設定在 MOZ_CHROME_MULTILOCALE 環境變數中。

    +
    5. +
  5. +

    將 compare-locales/scripts 目錄加入到 PATH 變數、 compare-locales/lib 加入到 PYTHONPATH 變數中.

    + 如例： + 
    export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+
    +

    當您完成這些設定之後，就可以執行 build.sh 了。

    +

    看起來您也可以用 .userconfig 來做這些事情。

    +

    當我們整理好之後，可能會修改這些指令。

    +
    6. +
+

已知的錯誤

+ +

當您的 gcc 版本太新的時候會出現這個錯誤。請安裝 gcc/g++/g++-multilib 4.6.x 版本.

+

設置您的編譯環境 有更多資訊。

+
+

社群上的提醒: 用 4.7.x 加上修改一些 B2G 程式碼可能可以 (gcc 會告訴你要改哪些地方) 但是這邊就沒人能幫你了！但是不改就不會碰到這些問題。

+
+ +

如果看到這個訊息，通常是代表記憶體不夠。在執行 ./build.sh 之前請確認有足夠的記憶體，如果您的系統記憶體有4G的話，應該可以跑的很順利。

+ +

有時候(尤其是在作業系統或是編譯工具更新後)您在編譯系統執行編譯後測試時，會碰到一些靈異現象就像下面這樣：

+
Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2
+

這種情況下試著刪除 gaia/xulrunner-sdk 目錄然後再重新抓程式碼：

+
rm -r gaia/xulrunner-sdk
+
+

這樣會刪掉由編譯系統自動抓取、預先編譯的 XULRunner；在下一次編譯的時候，XULRunner 會再被自動抓取一份。

+

接著的步驟

+

在編譯後，下個步驟就取決於您編譯的 Boot to Gecko 是給模擬器還是給實體手機；細節請參考下列文章：

+ diff --git a/files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_process_summary/index.html b/files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_process_summary/index.html new file mode 100644 index 0000000000..0dc0cd18b7 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_process_summary/index.html @@ -0,0 +1,108 @@ +--- +title: Firefox OS 建置程序摘要 +slug: >- + Archive/B2G_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_process_summary +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary +--- +
+

建置和安裝Firefox OS需要大量的時間，網路頻寬和電腦計算能力。不幸的是，一路上事情很容易出問題，所以此頁面列出了建置的目標和步驟，希望可以在用戶建置的過程中幫上忙。至於每一步驟的細節，會在其他文件討論。

+
+
+

注：Firefox OS建置過程會提及到“B2G”或“Boot2Gecko”。“Boot2Gecko”是Firefox OS專案的原始代號名稱。

+
+

建置目標：4個“映像”檔

+

建置的目標是建立4個可以被複製到Firefox OS設備的映像檔。

+ + + + + + + + + + + + + + + + + + + +
boot.imgLinux核心和根檔案系統映像檔(root filesystem image)，後者提供一套可用的基本Unix工具。
system.imgFirefox的操作系統核心，包括部分的Gonk，Gecko的接口，可執行b2g檔。
userdata.img +

使用者的Gecko profile以及Gaia網頁應用程式。

+
recovery.imgLinux核心和根檔案系統映像檔，另外還有簡單的工具，好讓使用戶能夠從問題中修復。
+

一旦四個映像檔產生好後，它們可以被轉移到一個裝置。

+

Firefox OS是建立在Android開源專案上(Android Open Source Project, AOSP)。AOSP的ADB和fastboot工具提供了十分好用的方法來存取和操作設備。值得一提的是adb reboot-bootloader命令可以讓已經連接上的裝置重開機，並且暫停至bootloader早期階段，在這個早期階段中可以下fastboot flash $partition $image命令，把映像檔複製到裝置之上。

+

開機映像檔(The Boot image)

+

boot.img(開機映像檔)包含Linux核心和初始根磁碟分區，boot.img提供核心軟體工具和初始化腳本。為了效率考量，初始根磁碟分區會被複製到記憶體之中，因此被稱為“ramdisk”。boot.img將被複製到設備上的“啟動”(boot)分區，而在裝置的檔案系統運作時，ramdisk的內容是可以在根目錄底下看見，比如說下adb shell指令。

+

boot.img還在根目錄下的default.prop文件裡建立了root用戶的權限。

+

另外也可以通過檔案檢查，分割檔案到核心和ramdisk映像檔，修改從ramdisk映像抓出來的內容，並重新組裝ramdisk映像檔，然後重新建置boot.img，這樣來修改現存的開機映像檔 。例如請參考Alcatel One Touch Fire Hacking (Mini)指南。

+

可以在安裝開機映像檔前測試開機映像檔。首先讓裝置開機後暫停於bootloader，然後下fastboot boot /some/path/to/boot.img命令來開機進入尚未安裝的boot.img。

+

系統映像

+

系統映像檔（system.img）是Firefox OS的核心：

+ +
+

有關於平台架構的更多資訊，請見Firefox OS平台指南。

+
+

system.img會被複製到system分區，而在檔案系統運作時會在/system/目錄底下。

+
+

注：system.img提供了許多裝置會用到的二進位大型物件(BLOB)，特別是RIL（Radio Interface Layer）的blob控制了設備上的蜂巢式行動網路(cellular radio network)。

+
+

用戶資料映像檔

+

用戶資料應像檔（userdata.img）提供了運行中載入的各種Gaia應用程式。

+

userdata.img會被複製到裝置的userdata分區，然後檔案系統運作時會在/data/目錄底下。值得一提的是/data/b2g/目錄含有使用者的Gecko profile，而/data/local/webapps/目錄則含有使用者實際可以用的網頁應用程式。

+

復原映像檔

+

復原映像檔（recovery.img）包含了和boot.img相同的核心和類似的ramdisk。然而，recovery.img採用不同的初始化腳本，所以使用者會被導引到另一個介面，這個介面會有可以透過裝置實體按鍵來操作的復原指令。

+

recovery.img會被複製到recovery分區，檔案系統運作時並不會掛載復原映像檔。

+

構建過程：準備，設定，建置，安裝

+

建置和安裝Firefox OS的整個過程包括四個步驟：

+ + + + + + + + + + + + + + + + + + + +
準備取得建置需要的程式和檔案，如正確的編譯器和函式庫。
配置下載原始碼，並創建.configure檔定義環境變數，例如路徑等。
建置 +

建置使用者的Gaia個人檔案和Gaia網頁應用程式。

+
安裝在設備上安裝檔案。
+

 

+

準備

+

一開始需要準備好建置需要的程式和檔案，如正確的編譯器和函式庫。

+

這個步驟可以通過手動執行或使用腳本來完成。詳情將在建置Firefox OS的先決條件頁面討論。

+
+

注：在UNIX和類UNIX的機器，我們可以利用which指令，搭配需要的程式名稱當作變數，來檢查這些需要的工具是否存在。

+
+

設定

+

接著我們需要複製一份Firefox OS(B2G)的原始碼，通常可以透過git從B2G專案那裡複製一份，另外我們也需要產生一份.config檔，這個檔案會定義建置用的變數。

+

設定會執行config.sh腳本。詳情請見準備進行首次B2G建置頁面。

+

configure腳本需要一個參數，指定建置的裝置種類。建置名稱是和CPU架構而非裝置相關的代碼名稱，目前可取得的代碼名稱請見這裡。

+

設定步驟也將使用Android開源專案的repo工具，來下載(或更新)建置的原始碼到/repo/project目錄下。這個步驟會下載大量的檔案並且花費不少時間。

+

建置

+

建置步驟實際上將編譯所有的原始碼，並且生成的映像檔。

+

建置會執行build.sh腳本。詳情請見建置Firefox OS頁面。

+

基本上建置十分單調，這個步驟就是從AOSP工具、到Linux核心、到Gaia網頁應用程式把一切都建置起來，而且有時候很不好判斷是那一個環節出錯導致建置失敗。

+

我們可以只建置全部的某一部份，例如執行建置腳本時只帶入gecko參數，就會只建置Gecko系統，相同地，只帶入gaia參數，就只會建置Gaia。這些分別建置的部份可以分別地被安裝到裝置上。

+

另外，也可以建置之前所討論的映像檔，例如建置系統映像檔可以這樣建置./build.sh out/platform/$target/system.img，其中$target參數和設定步驟中所提供的參數相同。

+

安裝

+

安裝的步驟會將新編譯的程式碼放置到設備上。這個步驟會執行flash.sh腳本。

+

如果只要安裝那些在建置步驟中分別被建置的部份，我們可以通過在執行falsh.sh時多帶入一個參數，例如./falsj.sh gaia就只會安裝Gaia網頁應用程式。

diff --git a/files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..f01f67100c --- /dev/null +++ b/files/zh-tw/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,65 @@ +--- +title: 建置並安裝 Firefox OS +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

由於 Firefox OS 現正積極開發中，而且仍處於預先發佈的階段。如果要確保自己安裝的是最新版本，最好能自己動手建置並安裝。透過此頁面所整理的文章，你可在模擬器或相容裝置上建置並安裝 Firefox OS，或於 Firefox 瀏覽器上安裝 Gaia 使用者介面。

+

+ + + + + + + +
+

取得並建置 Firefox OS

+
+
+ Firefox OS 必備建置條件
+
+ 首次建置 Firefox OS 時的必要步驟。
+
+ 準備首次建置 Firefox OS
+
+ 在建置 Firefox OS 之前，必須先複製 Firefox OS 的 Repo 並完成細部設定。本篇文章將解釋相關細節。
+
+ 建置 Firefox OS
+
+ 建置 Firefox OS 的方法。
+
+ 匯入 Firefox OS
+
+ 將 Firefox OS 匯入新裝置的相關資訊。
+
+

全部文章...

+ 		+

安裝 Firefox OS 及/或 Gaia

+
+
+ 選擇 Gaia 或 Firefox OS 的執行方式
+
+ 可於 Firefox 中執行 Gaia；亦可於行動裝置或桌面版模擬器中執行 Firefox OS。本篇指南將協助你根據自己需要，找出最適合的方式。
+
+ 在 Firefox 中執行 Gaia
+
+ 於 Firefox 桌面版瀏覽器中執行 Gaia。
+
+ 使用 Firefox OS 桌面用戶端
+
+ 執行並使用 Firefox OS 桌面用戶端；即是在桌面版應用程式中模擬 Gaia 環境。相較於 Firefox 中執行 Gaia，此種方式雖然更精確，但仍不如模擬器所達的精確度。
+
+ 使用 Firefox OS 模擬器
+
+ 本指南將說名 Firefox OS 模擬器的建置與使用方式，及使用何種模擬器的適當時機。
+
+ 於行動裝置上安裝 Firefox OS
+
+ 在實際的行動裝置上安裝 Firefox OS。
+
+ 在 SGS2 上的 Firefox OS 與 Android 雙重開機
+
+ 於 Samsung Galaxy S2 上建立 Firefox OS/Android 雙重開機環境的方法。
+
+
+

 

diff --git a/files/zh-tw/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html b/files/zh-tw/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html new file mode 100644 index 0000000000..20566a839b --- /dev/null +++ b/files/zh-tw/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html @@ -0,0 +1,59 @@ +--- +title: 選擇如何運作 Gaia 或 B2G +slug: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G +translation_of: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G +--- +

根據各別的需求，當您以 Boot to GEcko 或是 Gaia 使用者介面時、您會思考各種選項及組合。您可以挑出接著列出的這些選項；每個選項都需要考慮其優缺點，有些會比其他的更具延展性。

+

在 Firefox 中運作 Gaia

+

如果您很清楚您在做什麼的話，您可以複製 Gaia 的 repository 並且 在 Firefox 15 或以上版本中運作 Gaia.

+

優點

+ +

缺點

+ +

為什麼要在 Firefox 中運作 Gaia

+

有兩個很重要的理由會讓您不在行動裝置或模擬器、而是在 Firefox 上運作 Gaia；容易開始著手開發和運作、也可以使用 Firefox 中優秀的開發者工具。如同要了解 Gaia 的 hackers 一般，開發者一開始測試 apps 的 UI 和基本功能的時候會享受到這極大的好處。

+
+ Note: 在開始配送 app 之前，您絕對會需要在實體的行動裝置上做測試。
+

在桌面環境中運作 B2G (模擬器)

+

可以自己建置一個 Boot to Gecko 模擬器，並且在上面運作 Gaia。這個軟體雖然是以 Firefox 為基礎，但和行動裝置上的 Boot to Gecko 的行為非常類似。現在 Mozilla 提供 nightly 版本的模擬器給開發者，且這項工作在 bug 744008 裡持續追蹤著。如果您熟悉建置 Firefox code-base 或是 C++ 專案的話，您可以 依循這些步驟 自己建置這個應用程式。

+

優點

+ +

缺點

+ +

為什麼要運作 B2G 模擬器

+

這是一個不錯且折衷的測試和開發解決方案。對於將您的 app 或是其他程式碼放在近似行動裝置的環境中、卻不用再每次測試時都燒進手機而言，是一個不錯的方案。

+
+ Note: 在開始配送 app 之前，您絕對會需要在實體的行動裝置上做測試。
+

在行動裝置上運作 B2G

+

對於測試 B2G 或 Gaia 環境、或是您的 web app 而言，最徹底的方式是建置並將 Boot to Gecko 安裝在實體的行動裝置上。同時這也是最複雜的處理程序。

+

優點

+ +

缺點

+ +

為什麼要在行動裝置上運作 B2G

+

對於在 B2G 或 Gaia 上測試任何程式或網頁專案而言，這毫無疑問地是最精準的方式。經由在實際的行動裝置硬體上執行，您可以確認您的專案表現及顯示都相當良好，並且都可以正確地使用所有的行動裝置 APIs。另外，在您開始配送任何程式之前，您應該一定要在實體行動裝置上測試；沒這樣做的話，一定會不幸地發生一些難以預測的影響。

diff --git a/files/zh-tw/archive/b2g_os/debugging/index.html b/files/zh-tw/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..1084a2f201 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/debugging/index.html @@ -0,0 +1,21 @@ +--- +title: 在 Boot to Gecko 上除錯 +slug: Archive/B2G_OS/Debugging +translation_of: Archive/B2G_OS/Debugging +--- +

基本上，在 B2G 有兩種除錯的方法。開發者可以在電腦上藉由 Firefox 15 以上的版本來 執行 Gaia (以及很多相容於 B2G 的 web apps )來進行高階的除錯。這樣會讓開發者可以利用 Firefox 裡面優秀的 開發工具 開發工具來幫忙除錯，就像是在抓 web app 的 bug 一樣。

+

開發者也可以在 gdb 除錯器的控制之下，使用自己的行動裝置來執行 B2G。

+

使用 Firefox 除錯 Gaia 和 web apps

+

<快馬加鞭中，請耐心等待>

+

使用 gdb 除錯 B2G

+

用 gdb 來對 Boot to Gecko 除錯很簡單。只要用 run-gdb.sh 這個 script 指令，就會重新啟動 B2G 並在 gdb 的控制之下執行：

+
./run-gdb.sh
+
+

如果 B2G 已經在執行了，而現在只想要 attach，就要執行下面這個 script 指令：

+
./run-gdb.sh attach
+
+

OOP

+

首先，用「MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh」啟動 b2g，接著當啟動 OOP app 的時候，會顯示 plugin-container 的 PID。使用<./run-gdb.sh attach PID>啟動第二個 gdb instance。

+

必須在很短的時間之內啟動除錯器的第二個 instance，且在啟動的短時間之內，就要按 c 繼續。

+

更多...

+

我們需要在這裡添加更多內容。

diff --git a/files/zh-tw/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/zh-tw/archive/b2g_os/firefox_os_build_prerequisites/index.html new file mode 100644 index 0000000000..dd2fd2efb5 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/firefox_os_build_prerequisites/index.html @@ -0,0 +1,606 @@ +--- +title: Firefox OS build prerequisites +slug: Archive/B2G_OS/Firefox_OS_build_prerequisites +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +
+

在您開始取得程式碼並建立您的Firefox OS作業系統以前，需要一個設定正確的編譯環境，請參考build system這個頁面，裡面有詳細的說明。這裡簡單的提一下，您可以在64位元的Linux以及OS X上面作編譯。

+
+ +
+

註: 若您計畫編譯一個Firefox OS並裝載在一隻手機上，請確認該手機在編譯動作開始時"並未"跟您的電腦連接，正確的連結時機會在詳細步驟中說明。

+
+ +

支援的裝置或模擬器

+ +

您需要一個目標來裝載您建立的Firefox OS，他可以是一個真實的裝置或是一個模擬器。我們支援數種裝置但一個裝製常常有多種的版本，這樣的情況我們只支援特定的版本。另外不同的裝置我們的支援程度也稍有不同。

+ +
+

註：Mozilla的B2G source code是一個B2G的參考實現，而手機製造商是可以自由的為他們的手機做出patch以及修改的。舉例來說，您在市場上購買的Alcatel One Touch這隻手機裡面的B2G就是一個製造商的版本。這樣B2G版本的差異安裝在上面的應用程式是沒有差異的，不過在平台這一層是有一些差別的。由於Nexus 4的版本是直接由Mozilla維護的，因此跟其他第三級支援裝置比較起來我們各版本的Gecko應該更能直接在Nexus 4上直接無問題的使用。

+
+ +

第一級支援裝置

+ +

第一級支援裝置是一些主要開發用的裝置，因此一般來說能得最快的新功能與新的bug fixes。

+ +
+
Keon
+
Keon 即為 Geeksphone Keon 裝置, 也是最初的開發機種中的一個。 請注意這個裝置上的Forefox OS是由 Geeksphone提供.
+
Inari
+
Inari 是另外一個測試裝置. 在您建立Firefox OS給ZTE Open的裝置時請使用這個configuration （configuration的細節後面會提到）。注意: 較新版本的Firefox版本可能會無法在ZTE Open手機的default boot partition中開機成功。
+
Flame
+
Flame 是 Mozilla 最新的 Firefox OS 標準參考開發裝置，除了Flame這隻手機以外，在您建立給 ZTE Open C 這個裝置的Firefox OS時請也在configuration 中選用Flame（configuration 的細節後面會提到）。 兩隻手機都用一樣的設定原因是他們都是基於 Android jellybean。
+
模擬器 (ARM 與 x86)
+
有兩種模擬器，一種是模擬ARM code，另外一種直接用x86 code執行所有的功能. 更多相關資訊請參考Learn more about installing and using the emulators.
+
請注意基本上您應該不要使用 x86 模擬器 — 這個模擬器安裝不易而且支援的程度不是很理想。
+
桌面 client 程式
+
您也可以建立一個桌面版本的Firefox OS; 這個版本是讓 Gecko 跑在一個 XULRunner 程式裡面讓您可以使用 Gaia 提供的使用者界面.
+
Flatfish
+
Flatfist 是第一隻 Firefox OS 平板版本，雖然某些功能像是Web Telephony 沒有辦法使用。在編譯 Flatfish 時，會需要一些額外的設定。
+
+ +

另外雖然可能很顯而易見，還是提一下您在建立 桌面 client 程式 或任意一個 模擬器 時是不需要手機的。

+ +

第二級支援裝置

+ +

一般來說，Firefox的功能在第二級支援裝置上都是可用的，這一些裝置被許多開發者使用（特別是應用程式開發者），因此並不需要太過即時的得到Firefox OS上新的改變。

+ +
+
Samsung Nexus S
+
已知的 Nexus S 支援型號為 GT-I9020A 以及 GT-I9023，其他的型號可能可以支援
+
Samsung Nexus S 4G
+
SPH-D720 這個型號被當作第二級的支援裝置
+
+ +

第三級支援裝置

+ +

給這一些裝置的Firefox OS是可以被建立的，不過工程師並不會時常用這一些裝置做開發，因此穩定度與功能上面會明顯的比前兩級的支援裝置要不足。

+ +
+
Samsung Galaxy S2
+
只有i9100這個型號是被正式支援的。(i9100P 應該也可以支援因為差異只在 NFC 晶片)
+
Samsung Galaxy Nexus
+
現在看起來所有的型號都可以支援
+
Nexus 4
+
有一些在 IRC 上的使用者測試並成功過。 如果機器本身是 Android 4.4 也許需要降回 4.3 (Android images available from Google)
+
Nexus 5
+
一些在 IRC 上的使用者測試並成功過。
+
Tara
+
Tara 是另一之測試裝置. Tara 的 manifest 只在 master branch. 取得 Tara 的 script 為 "BRANCH=master ./config.sh tara"。
+
Unagi
+
Unagi 用來當作中低階智慧型手機的測試與開發裝置。很多 Firefox OS的開發者使用 Unagi 作開發。
+
Pandaboard
+
Pandaboard 是一片基於 OMAP 4 架構的開發板，作為在各種不同行動平台的開發使用。
+
+ +
重要: 只有基於 Android 4 (aka Ice Cream Sandwich) 以上的裝置才被支援。若您手上的裝置是上面提到的其中之一但 Android 的版本比較舊，請務必在做任何動作前先將它升級。
+ +
+

註: 第二級與第三級支援裝置沒有硬體的 Home 按鈕，不過會有一個軟體的 Home 按鈕

+ +

所有第一級支援裝置都有一個硬體的 Home 按鈕，這個按鈕可以讓使用者直接回到 Home screen。現在市面上大多數基於 ICS 的 Android 裝置使用在螢幕上的觸碰按鍵。我們現在提供一個虛擬的 Home 按鈕給這一些缺少硬體按鍵的裝置。若您發現這個虛擬的 Home 按鈕沒出現，請打開 Setting 程式，然後到 Developer settings 並選取 Enable software home button。

+ +

在 Firefox OS 1.4 版有另外一個 developer option 叫做 "Home gesture enabled"; 開啟這的選項表示虛擬的 Home 按鈕將消失，取而代之的是一個由螢幕下方向上滑動的手勢。

+
+ +

使用 GNU/Linux 的需求

+ +
+

重要: 即使您沒有要編譯自己的 Boot 2 Gecko，而只有要使用到 Gaia's make system,  您仍需要正確版本的 Python 與 Node.js。

+
+ +

在 Linux 建立 Firefox OS, 您需要:

+ + + +

這其實比最低需求要高不過常常在建立 Firefox OS 的過程出現問題只是因為資源不太夠。一個常見的例子為 "arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)".

+ +

下面列出個工具也必須被安裝:

+ + + +

64 位元安裝需求

+ +

這個部份列出了一些在不同的Linux發行版本中你必須執行的指令, 以利於安裝所有的需求來建構 Firefox OS.

+ +

Ubuntu 12.04 / Linux Mint 13 / Debian 6

+ +

在終端機中執行下列指令:

+ +
sudo apt-get update
+sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libasound-dev libgconf2-dev libgl1-mesa-dev libx11-dev lzop make zip
+ +

如果您將建構 "Flame" reference device 或是 Nexus 5, 請在終端機執行以下指令:

+ +
sudo apt-get install libxml2-utils
+ +

您可以透過這個ppa來安裝 jdk。

+ +

And see the above comments about emulator build issues!

+ +

Ubuntu 12.10 / Debian 7

+ +

在終端機中執行下列指令:

+ +
sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+ +

In addition to the emulator build issues discussed above, the compiler will default to gcc-4.7, which will fail to build with an error along the following lines:

+ +

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+ +

To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+ +

In a fresh Ubuntu 12.10 install, you'll get an error about unmet dependencies for ia32-libs. The following commands fix it:

+ +
sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs
+ +

Ubuntu 13.04

+ +

Run the following command in Terminal:

+ +
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip
+ +

In addition to the emulator build issues discussed above, the compiler will default to gcc-4.7, which will fail to build with an error along the following lines:

+ +

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+ +

To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+ +

Ubuntu 13.10

+ +

With Ubuntu 13.10, multi-arch packages are now the main way to support multiple architectures (e.g. 32-bit on a 64-bit install).  You must tell your Ubuntu system that you want to support 32-bit packages as well:
+  

+ +
sudo dpkg --add-architecture i386
+sudo apt-get update
+ +

Once you've completed that, then you can install the necessary packages:

+ +
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip libxml2-utils
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 1
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 2
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 1
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 2
+
+sudo update-alternatives --set gcc "/usr/bin/gcc-4.6"
+
+sudo update-alternatives --set g++ "/usr/bin/g++-4.6"
+ +

Ubuntu 14.04

+ +

Follow the instructions given for Ubuntu 13.10.

+ +

Fedora 17/18/19/20

+ +

Run the following command in Terminal:

+ +
sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip perl-Digest-SHA wget
+ +

In addition to the above you will need GCC 4.6.x in order to compile the project:

+ + + +

Download the right version for your Fedora installation, then install it to /opt, with the following command on Fedora 17/18:

+ +
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc18.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc18.tar.xz
+
+ +

And with the following command for Fedora 19/20:

+ +
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc19.tar.xz
+
+ +

You will need to specify GCC 4.6.x as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+ +

If build fails with the compiler complaining about not finding libmpc.so.2, install the package compat-libmpc

+ +

Arch Linux

+ +

Run the following command in Terminal:

+ +
sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wget wireless_tools yasm zip lib32-mesa lib32-mesa-libgl lib32-ncurses lib32-readline lib32-zlib
+ +

To install the lib32-* packages you need to have the multilib repository enabled.

+ +

B2G can only be compiled with gcc4.6.4, and because Arch Linux always has bleeding edge software you will need to install gcc46-multilib from AUR. Note that you will have to edit the PKGBUILD and add staticlibs to the options array, or gcc will be unable to compile B2G and give you a cannot find -lgcc error when compiling. You will also need to add the following to your .userconfig file:

+ +
export CC=gcc-4.6.4
+export CXX=g++-4.6.4
+ +

By default, Arch Linux uses Python3. You'll have to force it to use the old python2. You can do that by linking the python2 executable to python but this is discouraged and considered error-prone. This will also break python 3 if it is installed on your system. A better way is to use virtualenv/virtualenvwrapper:

+ +
sudo pacman -S python-virtualenvwrapper
+source /usr/bin/virtualenvwrapper.sh
+mkvirtualenv -p `which python2` firefoxos
+workon firefoxos
+
+ +

Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download make 3.81 from AUR.  This will install the make-3.81 binary on your path, you need to create a symlink named make to a location earlier in the PATH variable for the build to use the correct version.

+ +
mkdir -p ~/bin
+ln -s `which make-3.81` ~/bin/make
+export PATH=~/bin:$PATH
+
+ +

Android also needs the Java6 SDK and Arch only has Java7.  Unfortunately the aur build is broken, but you can still download the Java 6 SDK and install it manually.  You will then need to put it in your path.

+ +
cp ~/Downloads/jdk-6u45-linux-x64.bin /opt
+su
+cd /opt
+chmod +x jdk-6u45-linux-x64.bin
+./jdk-6u45-linux-x64.bin
+exit
+ln -s /opt/jdk1.6.0_45/bin/java ~/bin/java
+
+
+ +

Gentoo Linux

+ +
Installing ccache
+ +

You will need to install ccache, a tool for caching partial builds.

+ +
# emerge -av ccache
+
+ +

Because ccache is known to frequently cause support issues, Gentoo encourages you to use it explicitly and sparingly.

+ +

To enable the required use of ccache, on the subsequent step of this guide where the ./build.sh script is called, Gentoo users should instead run the command with an explicitly extended path, ie.

+ +
PATH=/usr/lib64/ccache/bin:$PATH ./build.sh
+
+ +
Generating Partition Images
+ +

If you are building B2G for actual physical hardware, then you may at some point also wish to generate some partition images for upload to your device. (For example, to restore backed up files to the device via the fastboot utility)

+ +

The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) yaffs2-utils userland package in portage. (Note: You will also need kernel patches if you want to mount YAFFS2 images, but this is not really required since you can deconstruct and rebuild them instead.)

+ +
# emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils
+ +

In order to generate such an image, simply change to the parent directory of the partition filesystem tree you wish to package, and issue a command like this:

+ +
mkyaffs2image system/ system.img
+ +

使用 Mac OS X 的需求

+ +

要在Mac OS X 上建構 Firefox OS, 您必須遵循一些步驟, 以下將會詳細說明. 我們也會提出一些您可能在特殊情況下會遇到的錯誤, 以及他們的解決方法.

+ +
+

Note: Configuring and Building B2G for Keon WON'T WORK on a Mac. You'll need to use Linux to build B2G for this device.

+
+ +

版本相容性

+ +

XCode 4.2 以下的版本與 Mac OS X 10.9 (a.k.a. "Mavericks") 並不相容, 所以您可能會很驚訝地發現Firefox OS會建構錯誤. 基本上您無法在 Mac OS X 10.9 以上的版本建構 ICS emulator, 並且 flatfish 在XCode 5.x系列會無法建構.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mac OS X 10.9.x 的版本相容性
 emulator (ICS)flatfish (JB-4.2)emulator-jb (JB-4.3)emulator-kk (KitKat-4.4)
XCode 4.3.3XXXX
XCode 4.4.1XO[1]OO
XCode 4.5.2XO[1]OO
XCode 4.6.3XO[1]OO
XCode 5.0.2XXOO
XCode 5.1.1XXOO
+ +
    +
  1. 您必須將設定環境變數 BUILD_MAC_SDK_EXPERIMENTAL=1 並將其 export  以建構 flatfish.
    2. +
+ +

安裝 XCode Command Line Utilities

+ +

您必須安裝 Xcode's Command Line Utilities. 您可以只下載 Command Line Utilities, 只需要在 Apple's developer downloads page 挑選您的 OS X 版本, 然而如果您想要完整的 Xcode suite, 你可以在 Mac App Store 安裝他們. 

+ +

Xcode 4.3.1 (OS X 10.7 "Lion") 以及其他較新的版本如 4.4.1+ (也就是 Mac OS X 10.8 "Mountain Lion"), 並不會自動包含我們所需的 Command Line Utilities. 當您安裝 Xcode 時, 請確認進入 Preferences, then the Downloads panel, and install the Command Line Utilities. 另外, 請確認您至少有 20 GB 的硬碟空間.

+ +

Screenshot of Xcode Downloads Command Line Tools

+ +
+

Note: The Firefox OS 模擬器 需要 Core 2 Duo processor 或較新的處理器; 也就是, 一個相容於Mac OS X 10.7 "Lion"的作業系統. 您的作業系統不一定要是OS X Lion, 您只需要與其相容. 也就是您當然可以建構Firefox OS 在較舊版本的Mac 上.

+
+ +
+

Note: XCode 4.2.x or older is not compatible with Mac OS X 10.9 or above, and XCode 4.3.x has no platform SDK for 10.8. Please install a newer version. If you're also working on flatfish, please make sure any of XCode 4.4, 4.5, and 4.6 is available.

+
+ +

Run Firefox OS Mac Bootstrap

+ +

Next, open a terminal and run the following command:

+ +
curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash
+ +

This will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing, and provide warnings and suggested fixes to problems. The script will check for and install the following items:

+ + + +

Xcode wrangling

+ +

If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:

+ +
xcode-select -print-path
+ +

If it still points to /Developer you can update the path with:

+ +
sudo xcode-select -switch /Applications/Xcode.app
+ +

Making the Mac OS X 10.6 SDK available

+ +

You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at

+ +
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+ +

If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:

+ +
    +
  1. Download the XCode 4.3 .dmg file from the Apple Developer portal (you'll need an Apple Developer account).
    2. +
  2. Download the utility Pacifist and use it to extract the 10.6 SDK from the XCode 4.3 .dmg file. Click on the "Extract Package" button, find the SDK by searching for 10.6 in the search box, then Ctrl + click on the MacOSX10.6.sdk directory and Extract it to a suitable location.
    3. +
  3. Add a symlink from the 10.6 SDK location to the /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/ directory. For example, if you put the 10.6 SDK on your desktop, the comment would be
    4. +
+ +
ln -s /Users/<yourusername>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+ +
+

Note: This is not necessary for Mac OS X 10.9 or above, because 10.6 SDK is for ICS and ICS doesn't supports Mac OS X 10.9.

+
+ +

Be aware of Mac file system case sensitivity

+ +

By default, Mac OS X ships with a case-insensitive file system.  This is problematic because the Linux kernel has a number of files with the same name, but different case.  For example, see the header files xt_CONNMARK.h and xt_connmark.h.  This results in a number of files appearing to be modified in /kernel after a fresh ./config.sh.

+ +

In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:

+ +
ERROR: You have uncommited changes in kernel
+You may force overwriting these changes
+with |source build/envsetup.sh force|
+
+ERROR: Patching of kernel/ failed.
+ +

Please see bug 867259 for more discussion and possible fixes for this problem.

+ +

Alternatively, it will always be safest to build on a case sensitive file system.  The easiest way to do this is to create a separate, mountable disk image with case-sensitivity enabled.  You can do this using Apple's Disk Utility application or from the command line:

+ +
hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage
+ +

Mount the drive with:

+ +
open ~/firefoxos.sparseimage
+ +

Change into the mounted drive with:

+ +
cd /Volumes/firefoxos/
+ +

You can then check out the code and compile from this location without worrying about case-sensitivity problems.

+ +

Mountain Lion homebrew gotcha

+ +
+
If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:
+
+ +
+
clang: error: unable to execute command: Segmentation fault: 11
+... try reinstalling the dependency manually adding the --use-gcc flag, for example: + +
brew install mpfr --use-gcc
+
+ +

Follow Samsung Galaxy S2 extra steps

+ +

If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See {{ anch("Installing heimdall") }} for details. This is not done for you by the bootstrap script!

+ +
Note: If you have installed the Samsung Kies tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing will not work if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder ~/Library/Application Support/.FUS, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.
+ +

Fix libmpc dependency if broken

+ +

gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:

+ +
cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib
+ +

Optional: Install HAX

+ +

Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can download and install it. It's not required, but it can improve emulation performance and stability.  

+ +

Before you install HAX you will need to install the Android SDK.

+ +

Install adb

+ +

The build process needs to pull binary blobs from the Android installation on the phone before building B2G (unless you're building the emulator, of course).  For this, you will need adb, the Android Debug Bridge. Our Installing ADB article explains how to get adb installed.

+ +
+

Note for future when you start to use adb: adb needs the phone's lock screen to be unlocked in order to see your phone (at least in later versions of Firefox OS). You'll probably want to disable the lock screen (we'll get to how later in the build instructions).

+
+ +

Install heimdall

+ +

Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is not needed for any other device. For other devices, we build and use the fastboot utility instead.

+ +
Note: Again, it's important to note that this is only required for installing Firefox OS on the Samsung Galaxy S2.
+ +

There are two ways to install heimdall:

+ + + +

Configure ccache

+ +

The B2G build process uses ccache. The default cache size for ccache is 1GB, but the B2G build easily saturates this; around 3GB is recommended. You can configure your cache by running the following command inside terminal:

+ +
$ ccache --max-size 3GB
+ +

For Linux: configure the udev rule for your phone

+ +
+

Note: This section is specific to Linux; Mac OS X has the necessary device permissions set up already.

+
+ +

Next, you need to confingure the udev rule for your phone,

+ +

You can get the USB vendor ID by running lsusb with your phone plugged in, but typically it's Google 18d1, Samsung 04e8, ZTE 19d2, Geeksphone/Qualcomm 05c6. Add this line in your /etc/udev/rules.d/android.rules file (replacing XXXX with the ID for your device):

+ +

相容的

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"
+ +

Take ZTE for example, the content in android.rules will be

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"
+ +
+

If the file doesn't exist, create it. The rules.d directory is usually read only by default, so you may have to use chmod to make the directory writeable, or the file, or both.

+
+ +

Once you've saved the file, and closed it,  make the file readable:

+ +
sudo chmod a+r /etc/udev/rules.d/android.rules
+
+ +

Now that the udev rules have been updated, restart the udev daemon.

+ +

Ubuntu

+ +
sudo service udev restart
+ +

Fedora 20

+ +
sudo systemctl restart systemd-udevd.service
+ +

Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.

+ +

Enable remote debugging

+ +

Before you plug your phone back into your USB port, put it USB developer mode. This allows you to debug and flash the phone. To enable developer mode, on your phone enable Remote Debugging in Developer settings (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.

+ +

At this point, connect your phone to your computer via a USB cable (if you created the udev rule before, this will trigger udev to detect the phone and create the device node with the right permissions). Now you can check if you can list your device via the adb devices command (remember that adb can only see your phone when the lock screen is unlocked). If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):

+ +
$ adb devices
+List of devices attached
+full_keon       device
+ +

If the device did not list as expect, check the file name and the script are all correct (see previous section), then restart the computer and retype the command again. Note also that if your device uses fastboot, the bootloader may identify itself with a different vendor ID than the one you see when the device boots normally.

+ +

Backup the phone system partition

+ +
+

Note: You have to do this before you build your device if you do not have an existing system backup, because some libraries will be referenced in build time. These library might be proprietary so we can't provide in our code base.

+
+ +

It is recommended that you back up the entire Android system partition on your phone.

+ +

You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:

+ +
adb pull /system <backup target dir>/system
+
+ +

 Depending on the phone, you may also need to pull the /data and/or /vendor directories:

+ +
adb pull /data <backup target dir>/data
+adb pull /vendor <backup target dir>/vendor
+
+ +

If the pull commands fail with an "insufficient permission" message, try the following:

+ + + +

On to the next step

+ +

At this point, you should be ready to fetch the Firefox OS code!

diff --git a/files/zh-tw/archive/b2g_os/index.html b/files/zh-tw/archive/b2g_os/index.html new file mode 100644 index 0000000000..7c258aaeea --- /dev/null +++ b/files/zh-tw/archive/b2g_os/index.html @@ -0,0 +1,222 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +translation_of: Archive/B2G_OS +--- +
+

由 Mozilla 所開發的 Firefox OS 全新行動作業系統，即是以 Linux 與 Firefox 的核心 (Gecko 引擎) 為其架構。

+
+ +
+

開放源碼的 Firefox OS 不受任何專利技術的限制，同樣能讓 App 開發者享受 Web 的功能與靈活度，打造出絕佳的消費性 App。

+ +

對 Web 開發者而言，首要應先理解「整個使用者介面就是 Web App」，且該 Web App 又能顯示並啟動其他的 Web App。不論是專為 Firefox OS 撰寫的 App，或是對使用者介面所進行的任何修正，都能算是以 HTML、CSS、JavaScript 所建構的 Web App，且亦能存取行動裝置的硬體和服務。

+ +

從產品的角度來看，Firefox OS 即是 Mozilla 與其 OEM 夥伴，在 Boot to Gecko (B2G) 技術上所套用的品牌及支援服務。B2G 為作業系統在工程設計時所用的代號，即透過 Mozilla 與其廣大 Mozilla/開放源碼社群的貢獻者所開發。

+
+ +
+

開發 Firefox OS

+ +

專屬的 App

+ +

此為我們的 App 中心，內含資訊可協助開發者撰寫 Open Web App，並安裝於 Firefox OS 之上。

+
+ +
+
+

平台指南

+ +

平台開發者可了解 Firefox OS 平台的各個元件如何搭配及運作。

+ + +
+ +
+

建構與安裝

+ +

說明應如何於模擬器、相容裝置、桌機版模擬器上建構＼安裝 Firefox OS。

+ + +
+ +
+

開發者手機

+ +

關於特定開發者手機的調整、更新、復原、購買等資訊。

+ + +
+
+ +
+
+

Firefox OS 書籍

+ +

有許多已出版與編寫中的書籍，涵蓋了 Firefox OS 多樣的開發面相。可參閱 Firefox OS 書籍。

+
+ +
+

其他專頁

+ + +
+
+ +
+

注意：我們將透過〈Firefox OS 說明文件狀態〉頁面，持續更新 Firefox OS 相關文件。如果你也想貢獻 Firefox OS 說明文件，請參閱此頁面並看看有哪些需要調整的內容！

+
+ + + +
    +
  1. 介紹
    2. +
  2. 平台指南 +
      +
    1. 平台指南概述
      2. +
    2. 架構概述
      3. +
    3. App 架構
      4. +
    4. Gonk
      5. +
    5. Gecko
      6. +
    6. Gaia
      7. +
    7. Gaia App 指南
      8. +
    8. 安全性 +
        +
      1. Firefox OS 安全模型
        2. +
      2. 系統安全
        3. +
      3. Firefox OS 中的 App 安全
        4. +
      4. 安全的安裝＼更新 App
        5. +
      +
      9. +
    9. Firefox OS 記憶體耗盡時的管理
      10. +
    10. 支援功能表
      11. +
    11. 設定清單
      12. +
    +
    3. +
  3. 建構並安裝 +
      +
    1. 建構與安裝概述
      2. +
    2. Firefox OS 建構程序摘要
      3. +
    3. 必要建構條件
      4. +
    4. 準備第一次編譯
      5. +
    5. 建構 Firefox OS
      6. +
    6. 於 OSX 上為「Flame」建構適用的 Firefox OS
      7. +
    7. 選擇 Gaia 或 Firefox OS 的執行方式
      8. +
    8. 建構 B2G 桌機用戶端
      9. +
    9. 使用 Firefox OS 模擬器
      10. +
    10. 於行動裝置上安裝 Firefox OS
      11. +
    11. 建構並套用 Firefox OS 更新封包
      12. +
    12. 執行環境 (Runtime) 工具
      13. +
    +
    4. +
  4. 開發 Firefox OS +
      +
    1. Firefox OS 開發概述
      2. +
    2. 提報 Firefox OS 的錯誤
      3. +
    3. 修改主機端的檔案
      4. +
    4. 以 .userconfig 檔案進行自訂
      5. +
    5. 自訂 b2g.sh 指令碼
      6. +
    6. 移植 Firefox OS
      7. +
    +
    5. +
  5. 開發 Gaia +
      +
    1. Gaia 開發概述
      2. +
    2. 執行 Gaia 的 Codebase
      3. +
    3. 了解 Gaia 的 Codebase
      4. +
    4. 更改 Gaia 程式碼
      5. +
    5. 測試更改過的 Gaia 程式碼
      6. +
    6. 提交 Gaia 修正檔
      7. +
    7. Gaia 版本系統入門
      8. +
    8. 自訂「建構時間」App
      9. +
    9. 市場自訂指南
      10. +
    10. 自訂 Firefox OS App 中的鍵盤
      11. +
    11. 本地化 Firefox OS
      12. +
    12. 本地化最佳實例
      13. +
    13. 「make」選擇參考
      14. +
    14. Gaia 工具參考
      15. +
    +
    6. +
  6. Firefox OS 手機指南 +
      +
    1. Firefox OS 手機指南概述
      2. +
    2. 手機與相關裝置的規格
      3. +
    3. Geeksphone
      4. +
    4. ZTE OPEN
      5. +
    5. ZTE OPEN C
      6. +
    6. Flame
      7. +
    7. 一般裝置功能
      8. +
    8. 疑難排解
      9. +
    9. 開放參考裝置的最佳實例
      10. +
    +
    7. +
  7. Firefox OS 版本說明 +
      +
    1. Firefox OS 版本說明概述
      2. +
    2. Firefox OS 2.1 for developers
      3. +
    3. Firefox OS 2.0 for developers
      4. +
    4. Firefox OS 1.4 for developers
      5. +
    5. Firefox OS 1.3 for developers
      6. +
    6. Firefox OS 1.2 for developers
      7. +
    7. Firefox OS 1.1 for developers
      8. +
    8. Firefox OS 1.0.1 for developers
      9. +
    +
    8. +
  8. 自動化測試 +
      +
    1. Firefox OS 自動化測試概述
      2. +
    2. 於 Firefox OS 執行測試作業：開發者指南
      3. +
    3. Gaia UI 測試
      4. +
    4. Gaia 整合測試
      5. +
    5. Gaia 單元測試
      6. +
    6. Gaia 效能測試
      7. +
    7. Mochitests
      8. +
    8. Reftests
      9. +
    9. WebAPI 測試
      10. +
    10. xpcshell 測試
      11. +
    11. 耐久測試
      12. +
    12. MTBF 測試
      13. +
    13. Marionette
      14. +
    14. Treeherder
      15. +
    15. Jenkins
      16. +
    +
    9. +
  9. 除錯 +
      +
    1. Firefox OS 除錯概述
      2. +
    2. Firefox OS 的開發者設定
      3. +
    3. 將 Firefox OS 裝置連上桌機
      4. +
    4. 以 Firefox 開發者工具設定 Firefox OS 的除錯作業
      5. +
    5. 裝置上的 console 記錄
      6. +
    6. 安裝並使用 ADB
      7. +
    7. 螢幕截圖
      8. +
    8. 使用 WebIDE
      9. +
    9. 使用「應用程式管理員 (App Manager)」
      10. +
    10. Firefox OS 當機回報
      11. +
    11. Firefox OS 記憶體耗盡的除錯
      12. +
    12. Firefox OS 安全性測試與除錯
      13. +
    13. 使用 gdb 為 B2G 除錯
      14. +
    14. 使用 Valgrind 為 B2G 除錯
      15. +
    +
    10. +
diff --git a/files/zh-tw/archive/b2g_os/installing_boot_to_gecko_on_a_mobile_device/index.html b/files/zh-tw/archive/b2g_os/installing_boot_to_gecko_on_a_mobile_device/index.html new file mode 100644 index 0000000000..7605d27e06 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/installing_boot_to_gecko_on_a_mobile_device/index.html @@ -0,0 +1,53 @@ +--- +title: 將 Boot to Gecko 安裝於行動裝置 +slug: Archive/B2G_OS/Installing_Boot_to_Gecko_on_a_mobile_device +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +

如果您編譯給行動裝置的 Boot to Gecko 之後，您就將他安裝在行動裝置上。這篇文章會引導您進行這個動作。

+
+ Note: 第一次把 B2G 寫入手機時，手機必須安裝 Androidd 4.0 (Ice Cream Sandwich) 版本。否則這個動作就不會正常的運作。而一旦您完成第一次 B2G 的安裝之後，您就可以熟練的更新了。
+

燒錄手機

+

您只要將您的手機連結到電腦上、並打下列指令，就可以燒任何東西到手機上：

+
./flash.sh
+
+

就這樣。您編譯好的 B2G 就會被燒錄到您的行動裝置上。

+

為您的行動裝置設定 udev 規則

+

在 Linux，如果您看到這個訊息，

+
< waiting for device >
+

那或許意味著這個 fastboot 裝置和提供給 adb 裝置的不同，而那個裝置沒有被加入 udev 規則。您現在可以藉由執行 lsusb 來取得 USB 廠商的 ID，但是它會是 Google 的 ID：18d1，所以將下面這一行加入 /etc/udev/rules.d/51-android.rules 這個檔案，然後就會正常運作了：

+
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+
+ Note: 如果您在 Linux 上碰到一個非常有幫助的 libusb 錯誤 "-3"的話，這意味著手機需要被 root 來取得 USB 裝置的權限。請使用 sudo 再執行一次這個 script。
+

Samsung Galaxy S2 要特別注意的地方

+

如果您的手機是 Galaxy S2 且使用 heimdall 1.3.2 (最新版；可以用 heimdall version 指令檢查版本) 的話，您可能會看到一個警告訊息「FACTORYFS upload failed!」、後面接著「Heimdall flashing failed」和一些額外的資訊。實際上這是一個成功的狀況，所以您可以忽略這個建議。

+

為了要擺脫這個奇怪的行為，您可以去抓 heidmall 的 複製的原始碼、並且降級到 1.3.1 release 版 ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06")，接著根據 README 編譯、然後安裝，這樣就不會再看到這個錯誤訊息了。然而，這並不是必須的 (看起來比較爽就是了)。

+

heimdall 的所有版本都無法燒錄超過 100MB 的 system.img。執行下列指令：

+
ls -l ./out/target/product/galaxys2/system.img
+
+

就可以看到您的 system.img 有多大。如果太大的話，先到 IRC 找人問問求救；有幾種方法可以分兩階段來燒錄。

+

Samsung Galaxy S2 額外的步驟

+

如果您正在燒錄到 Galaxy S2 的話，需要遵守一個額外的步驟。因為使用 flash.sh script 不會自動將 Gaia 燒錄上去；您需要也打下列指令：

+
./flash.sh gaia
+
+

燒錄某個分割區(partitions)到具備 fastboot 的手機

+

您可以燒錄某個分割區 (partitions)到 fastboot 的手機 (也就是說，除了 Samsung Galaxy S2 之外的任何其他手機)。指令如下：

+
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+

更新某個模組

+

在燒錄的時候，您可以藉由指名元件名稱來更新某個 B2G 的元件。如下：

+
./flash.sh gaia
+./flash.sh gecko
+
+

接著，下一步

+

此時，您的手機應該正在運作 Boot to Gecko！是時候該體驗、寫些程式、 測試、或是 除些錯 了！

+
+ Note: 一個有用的技巧：如果您的 B2G 版本啟動的時候有螢幕鎖且需要密碼才能解鎖的話，預設的解鎖密碼是 0000。
+

Troubleshooting

+

如果行動裝置在安裝或更新 B2G 到新版本後不會正常運作的話，這裡還有一些技巧可以參考。

+

如果使用者介面 (Gaia) 沒有啟動

+

如果您更新您的手機導致使用者介面不會啟動的話，您可以重置手機來清除一些過期的設定或是之類的東西。這樣做可能會讓它回過魂來繼續運作。參考及使用下列指令：

+
cd gaia
+make reset-gaia
+
diff --git a/files/zh-tw/archive/b2g_os/introduction/index.html b/files/zh-tw/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..5b0319863d --- /dev/null +++ b/files/zh-tw/archive/b2g_os/introduction/index.html @@ -0,0 +1,86 @@ +--- +title: Firefox OS 簡介 +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +
+

Firefox OS 正將無限開拓 Web 的行動界線，且要讓擁有第一支智慧型手機的使用者，能獲得全新的網路體驗。此開放源碼的行動作業系統，即以 Linux、Open Web 標準、Mozilla 的 Gecko 技術為基礎，勢將重新定義「行動平台」。

+ +

在導入 WebAPI 以存取硬體功能，並提供直覺且豐富的智慧型手機體驗之後，Mozilla 相信 Web 必將成為開發者的絕佳機會，讓更多消費者能觸及有趣且多樣的產品。

+
+ +

目標客戶

+ +

此一系列說明文件，主要將讓 Web＼平台開發者能夠進一步了解 Firefox OS 的運作方式、貢獻專案的方法，並打造自己的客製化軟體版本以利安裝於裝置之上。若是想建立並發佈自己的 Web App，亦可透過 「應用程式中心 (App Center)」與 Marketplace 的「專區 (Zone)」輕鬆達成。

+ +

Firefox OS 的基本承諾

+ +

對 Web＼平台開發者來說，所應了解的最重要部分就是：整個使用者介面 (UI) 就是 Web App，且此 Web App 又能夠顯示並啟動其他的 Web App。不論是修改 UI、撰寫 Firefox OS 上執行的 App，甚至是存取行動裝置硬體與服務，都是透過標準的 Web 技術進行。

+ +

從產品面來看，Firefox OS 已是 Mozilla 的品牌名稱，透過 Boot to Gecko (B2G，為作業系統產品的設計代號) 而提供相關服務。Firefox OS 的 UI 稱為 Gaia，並包含了 OS 的預設 App 與系統功能。

+ +

若要進一步了解平台架構，可參閱《平台指南》。

+ +

目前與未來的規劃

+ +

現正開發 Firefox OS 2.0 版，且 1.3/1.4 版已經趨於穩定。目前市面上已有多款手機，消費者或開發者所適用的型號均有。若要進一步了解，可參閱：

+ + + +

版本週期

+ +

從 Firefox OS 1.2 開始，Firefox OS 版本週期即已儘量同步於 Gecko 與 Firefox 桌面版的版本週期 (即 6 週)。現每 3 個月即釋出新版本 Firefox OS，因此每 2 個 Gecko (Firefox 瀏覽器核心) 版本週期就會釋出 1 次新版本 Firefox OS。

+ +

舉例來說，Gecko 30 即與 Firefox OS 1.4 一同釋出 (跨過 Gecko 29)；Gecko 32 即與 Firefox OS 2.0 (本為 1.5) 一同釋出 (跨過 Gecko 31)。

+ +
+

注意：可參閱我們的版本釋出排程，確認 Firefox OS 與 Gecko＼桌面版 Firefox 之間的對應版本，另可參閱 Firefox OS Release Milestones 進一步了解版本管理的相關細節。

+
+ +

社群

+ +

Boot to Gecko 與 Gaia 均是由 Mozilla 內部的工程師團隊開發而得，另加上 Mozilla 外部與開放源碼社群的一同貢獻。如果你想聯繫 Firefox OS 或 Gaia 開發的社群，則可利用下列的郵件群組與 IRC 頻道。

+ +

同樣的，可使用 Bugzilla 系統提報 Firefox OS 元件的任何問題。如果你不確定哪些元件應該提報問題，歡迎隨時發問。

+ +
+

注意：如果你對 B2G/Gaia 原始碼的特定部分 (例如特定的 Gaia App) 有任何問題或意見，則可在 Firefox Modules 頁面上找到特定聯絡細節。

+
+ +

打造作業系統

+ +

B2G 作業系統是以 Mozilla 的 Gecko 繪圖引擎為基礎，並從 Linux kernel 以及稱為 Gonk 的硬體抽象層 (Hardware Abstraction Layer，HAL) 延伸。這裡所說的 Gecko，基本上就是 Firefox for Android 或 Windows 或 Mac OS X 所用的相同 Gecko。而 Gonk 就是 Gecko 所衍生的另項系統。

+ +

若要進一步打造並安裝 Firefox OS，可參閱《建立並安裝 Firefox OS》。你也可以到 Github 找到 B2G 的原始碼。

+ +

貢獻 Gaia

+ +

若想為 Gaia 貢獻，其實並不需要深入了解 Web 的開發概念。如果要入門 Gaia 並執行，可參閱《入門開發 Gaia》。

+ +

還有許多有用的工具，可讓你針對 Gaia 與 Firefox OS 的 Web App 進行除錯。若要進一步了解，亦可參閱《Hacking Gaia》。

+ +

開發 Firefox OS 的 App

+ +

Firefox OS App 同樣是以標準的 Web 技術 (如 HTML、CSS、JavaScript 等等) 所打造而成。如果你本來就是 Web 開發者，就已經具備了大部分的技術。另必須知道數個特定的 JavaScript API，以利存取裝置的硬體與重要功能 (如相機、陀螺儀、光線感測器、聯絡人資訊、系統警示＼通知......)。這些也同樣能參閱應用程式中心與 Web 平台頁面獲得更多資訊。

+ +
+

注意：如果你剛開始打造 Open Web/Firefox OS App，或想要初步了解 Web App 與傳統網頁之間的差異，可參閱《App 迅速入門指南》。

+
+ +

支援 Firefox OS 的多個版本

+ +

在開發 Firefox OS 的 App 時，必須留意消費者手上的裝置到底搭載了哪個版本 (可參閱目前可用手機表)。另請注意，更新手機平台軟體，可不像更新桌面版軟體一樣簡單。消費者往往受制於網路服務供應商。因此開發者應該讓 App 能夠支援不同的版本。舉例來說，multiline 的「Flexbox」就無法在 Firefox OS 1.3 以下的版本中執行。你可能必須使用較簡單的配置函式，或退而使用較舊的版本。

+ +

隨著有越來越多消費性的 Firefox OS 裝置上市，並搭載更高版本的 Firefox OS，這個問題很快就能解決。

+ +
+

我們目前建議能針對 Firefox OS 1.1 版本的特性來開發 App。

+
+ +
+

注意：MDN 上的《Web 平台參考頁面》，包含瀏覽器＼平台的支援資訊。另可到《Apps API Reference》找到特定 App 技術的相關資訊。

+
diff --git a/files/zh-tw/archive/b2g_os/phone_guide/flame/index.html b/files/zh-tw/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..60b3a7ad8f --- /dev/null +++ b/files/zh-tw/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,50 @@ +--- +title: Firefox OS 參考平台手機「Flame」 +slug: Archive/B2G_OS/Phone_guide/Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +
+

Flame 的更新檔案：我們建議你加入下方的郵件群組，即可收到軟體版本定期更新檔案，以及其他可影響 Flame 效能的檔案：https://mail.mozilla.org/listinfo/flamenews

+
+

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.

+

Available to order

+

專為開發者所設計的「Flame」參考平台手機，是 Firefox OS 相關裝置的里程碑。Flame 的硬體規格均為一時之選，包含 FWVGA 顯示功能與雙核心處理器，可協助開發者打造絕佳的內容與經驗。且單一硬體平台同樣適合測試人員，可更輕鬆的測試並找出軟體問題，不必擔心裝置型號既有的特定問題。

+

如果你手上有 Flame，也打算開始把玩、開發＼發佈 App，或為 Firefox 平台有所貢獻，則應先參閱下列連結：

+ +

如果你想進一步了解作業系統的更新程序、探索手機的其他部分、將 App 送入手機，或觀看手機本身的規格，則可從下列 2 篇文章中找到相關資訊：

+ +

購買 Flame

+

Flame 銷售已經告一段落。但我們仍為 Mozilla 貢獻者保留了許多機會要免費送出手機，包含第二輪的 Foxtrot 方案。如果你想免費獲得手機，請儘速聯絡 IRC 上的 Asa Dotzler。

+

連線網路與裝置的規格

+

連線網路：

+ +

硬體：請透過手機與裝置的規格頁面找到更多硬體特色。

+

其他特色包含：

+ +

另請參閱

+ diff --git a/files/zh-tw/archive/b2g_os/phone_guide/index.html b/files/zh-tw/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..7e301af2de --- /dev/null +++ b/files/zh-tw/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,6 @@ +--- +title: Boot to Gecko 開發者手機指南 +slug: Archive/B2G_OS/Phone_guide +translation_of: Archive/B2G_OS/Phone_guide +--- +

如果您已經從 Mozilla 收到了可以運作 B2G 的開發者手機，或是已經有人幫您將 B2G 安裝好在您的手機上的話，這裡有一份 關於手機運作的基礎指南。我們正在改善這個部分，也希望可以快一點放更有效率的指令放上 MSN。如果您對建置/燒錄有興趣，請看 '設定和建置 Boot to Gecko' 章節，裡面有更細節的資訊。

diff --git a/files/zh-tw/archive/b2g_os/phone_guide/zte_open/index.html b/files/zh-tw/archive/b2g_os/phone_guide/zte_open/index.html new file mode 100644 index 0000000000..36ababcb56 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/phone_guide/zte_open/index.html @@ -0,0 +1,287 @@ +--- +title: The Firefox OS ZTE OPEN +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN +--- +
+

Mozilla 與 ZTE 共同合作開發了 ZTE Open。ZTE Open 是一款為開發者和早期接受者所開發的 Firefox OS 裝置，它已解鎖、開放用於測試和實驗。

+
+ +
+

Note: 本指南不適用於 ZTE Open C 裝置，針對 ZTE Open C 請參考 ZTE Open C 頁面。

+
+ +

購買裝置

+ +

請連至 ZTE 美國、歐洲或香港 ebay 商店購買。

+ + + +

升級 Firefox OS

+ +

接下來我們將提供升級 ZTE Open 的說明指示:

+ +

一般

+ +

一般 Firefox OS 的建置、更新和測試都是透過用 USB 連接電腦和手機後，利用 ADB (Android Debugging Bridge) 以及 Fastboot 發送指令進行操作，所以我們需要安裝 ADB 以及 fastboot 到電腦上 (可至 Android Developer Toolkit 取得) ，並不需要安裝整個 Android 開發工具包，adb 以及 fastboot 可以到 /platform-tools/ 資料夾找到。

+ +

然後，請打開手機的遠端除錯選項，enable remote debugging。

+ +

Firefox OS 1.1

+ +

2013/12/10，ZTE 發佈了 ZTE Open 的 Firefox OS 1.1 更新包，這個更新開啟了 fastboot, 解決了前一個發佈版本這方面的問題。

+ +

在升級到 v1.2 前，最好先升級到 v1.1。升級 v1.1 首先先到 OPEN (American Standard 或 OPEN (European Standard) 下載升級包，請注意我們需要下載對應 OS 版本，所以從 v1.0 升級的人請下載 "V1.1.0B02(for V1.0)"，下載檔案中同時也含有說明文件。接下來請解開下載檔案按照以下步驟升級你的 ZTE Open。

+ +
+

Note: 使用者資料會在 microSD 卡升級過程中被刪除，請先備份你的資料 。

+
+ +

以下是透過 microSD 卡升級步驟:

+ +
    +
  1. 關機、打開背蓋、取下電池背後的 microSD 記憶卡。
    2. +
  2. 將 SD 卡插入電腦。
    3. +
  3. 把下載的 US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip 或 EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (看你下載的版本) 複製到 microSD 卡的 root 底下，請不要解開 zip 檔。
    4. +
  4. 卸除 SD 卡、裝回到手機上。
    5. +
  5. 同時按下音量向上鍵和電源鍵。音量向上鍵位於手機左側長條型按鍵的上半部。兩顆鍵同時按下後會進入 Firefox OS recovery 模式 (注意 Firefox logo 會先出現一陣子再進入 recovery 模式)。
    6. +
  6. 按音量上下鍵再選項間移動，請選擇 “apply update from external storage.”
    7. +
  7. 按電源鍵確認選項後會看見 microSD 卡裡的檔案列表。
    8. +
  8. 再用音量上下鍵選擇你剛剛複製過來的軔體檔 US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip 或 EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip，然後按電源鍵確認。
    9. +
+ +

如果一切順利的話，你會看到一連串訊息，當你看到 “Install from sdcard complete.” 那就代表升級完成，請選擇 “reboot system now” 重新開機，重新開機後你將會看到手機第一次啟動的設定頁面。

+ +

Firefox OS 1.2

+ +

2014, 1月，ZTE 發佈了一版 Firefox OS v1.2 beta 版 (fastboot 開啟、擁有 root 權限)，此 beta 版本基本上是由 v1.1 baseline + v1.2 Gecko 與 Gaia, 而且不需要把檔案放在 microSD 卡中。

+ +

請先確認 v1.1 已經上面說明安裝完成，接著打開 terminal 然後輸入以下指令確認連線建立成功:

+ +
adb devices -l
+
+ +

如果連線成功，你會看到類似 "roamer2    device usb:2-1.2" 的回應訊息。

+ +

請前往 ZTE 建立的 Dropbox 帳戶下載對應 OS: US 版 或 UK 版，，Windows 使用者可以去下載特殊說明還有升級工具來協助安裝新版本。底下的說明指示無需特殊工具、適用於所有作業系統 – Linux, OS X, 和 Windows。

+ +

請解開下載好的檔案，開啟 terminal 進入到解開後的檔案資料夾。請注意以下步驟會刪除個人資料，所以請先備份好你的資料，接著輸入下列指令:

+ +
adb reboot bootloader
+ +

這個指令會讓裝置重開機，由於 fastboot 只在重開機過程中有效，請在重開機中輸入以下指令:

+ +
sudo fastboot devices
+
+ +

如果看到 "< waiting for device >" 訊息，請按下 Ctrl-C 並且再次輸入指令直到看見 "ROAMER2    fastboot" 之類的訊息回應。

+ +

接著請快速在重開機當中輸入下面指令:

+ +
fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot flash recovery recovery.img
+fastboot erase cache
+fastboot reboot
+ +
+

Note: 如果一直看到 "< waiting for device >" 訊息，請嘗試在指令開頭前加上 sudo ，例如 "sudo falshboot flash boot boot.img"。

+
+ +

如果來不及輸入完指令，請從 "adb reboot bootloader" 指令開始再試一次。

+ +

一切順利的話，重開機後又會看到第一次手機啟用頁面，ZTE Open 此刻已經升級到 v1.2，進入系統後會看到許多測試 app ，請隨意自由自由刪除。

+ +
+

Note: Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled) 由 Frédéric Harper 所撰寫的文章也提供了有用的安裝步驟說明。

+
+ +
+

Note: ZTE Open 的 v1.2 版有一個通知欄無法展開的問題，這個問題可以藉由燒錄最新的 Firefox OS 1.2 工程版解決，請確認 ADB 安裝好了 還有 遠端除錯 開啟，然後在 terminal 輸入下面指令:
+
+ git clone -b v1.2 https://github.com/mozilla-b2g/gaia.git gaia_v1.2
+ cd gaia_v1.2
+ make reset-gaia

+
+ +

Firefox OS 1.3 and beyond

+ +

ZTE currently haven't released builds for Firefox OS 1.3 and beyond. To get these on your ZTE open you'll have to manually build and install a new Firefox OS/B2G build on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration). You can recover your phone if necessary, using the procedure cited in the {{ anch("I bricked my phone") }} section.

+ +

Phone features

+ + + +
+

Note: the Hong Kong phones also support tri-band 3G Networks — HSDPA 850/1900/2100 (850/1900 for US, CA, 850/1900/2100 for Asia, AU, and 900/2100 for EU.)

+
+ +

Wireless carriers

+ +
+

Pricing information is for reference only and may not be accurate. Visit the associated link for official information.

+
+ +

US carriers

+ +

AT&T

+ + + +
Sampling of prepaid AT&T plans
+ +

Prepaid GoPhone®, Smartphone Plans

+ + + +

Aio

+ + + +
Sampling of prepaid Aio plans
+ + + +

Good2GO

+ + + +
Sampling of prepaid Good2GO plans
+ + + +

Other {{ anch("AT&T") }} MVNOs

+ +

These carriers do not offer additional 3G data.

+ + + +

T-Mobile

+ + + +

Canadian carriers

+ +

The US version of the ZTE Open also work in Canada on carriers that use the Bell/Telus network, or the Rogers network. Some regional carriers like Sasktel or MTS that have UMTS should work too.

+ +

It will not work on carriers that do not use UMTS or GSM, like Public Mobile, nor on the carriers that use the AWS band like WIND Mobile, Mobilicity, Videotron or Eastlink.

+ +

Memory card

+ +

File system

+ +

In order to be recognized by the phone, the MicroSD card must be formatted as a FAT32 file system. If a card is new or has never been reformatted, it should work as is.

+ +

Device revisions

+ +

Revision 01

+ +

Phones produced before 09/27/2013 do not have fastboot enabled and must be updated. Normally, this would be handled by Software Updates, but since some users have reported trouble with this method, ZTE have made SD card packages available to enable fastboot on earlier devices. Flash images for:

+ + + +

The zip file is linked under Downloads.  Note that you need to download the version with your OS revision in it (that is, download the "V1.1.0B02(for V1.0)" if you are upgrading from V1.0).  Once the file is downloaded and unzipped, follow the instructions in the bundled PDF to flash the package to your phone.

+ +

Related Support Forum Questions:

+ + + +

Revision 02

+ +

Phones produced on or after 09/27/2013 are fastboot enabled by default. This includes the Hong Kong phones.

+ +
+

Note: If you are unsure of your phone's revision, check it in Settings > Device Information > Software. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.

+ + +
+ +

Device support

+ +

Once your phone has {{ anch("Device revisions","fastboot enabled") }}, you will then be able to build and install new Firefox OS/B2G builds on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration), and recover your phone if necessary, using the procedure cited in the {{ anch("I bricked my phone") }} section.

+ +

If you encounter errors about setting the system time while flashing a custom build, you may need to download a modified boot image.

+ +

I bricked my phone

+ +

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with the following simple procedure.

+ +

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume up button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the SD package files described above (it is worth checking for an update to the SD package before you do this):

+ +
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+ +

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+ +

Headphones not working?

+ +

We found that the headset jack is designed by a Chinese manufacturer that has compatibility problems with other brands of headsets that include microphones. You may have voice mute problems when you try to use headsets made by Apple, Samsung, HTC, and others. You can buy a 3.5 mm headset adapter that reverses the microphone and ground pins to avoid this problem. For more information, see {{ Bug("812607") }}.

+ +

Other support notes

+ +

Some customers have come across an Issue of FOTA updates failing to enable fastboot; this is still under investigation, and we are assisting ZTE to analyze every scenario. We will post more information as it is available.

+ +

If your phone was unfortunately damaged during the FOTA update because of ZTE providing false or wrong update files, you can attempt to restore it to factory settings using the appropriate SD image and instructions referenced in {{ anch("Revision 01") }}. Otherwise, send your phone back to the eBay store you purchased it from in exchange for a new one. You may contact the store owner directly via an eBay message.

+ +

See also

+ +

Official Dev Phone page on Firefox Marketplace

+ +

Draft User Manual [en-US] - PDF

diff --git a/files/zh-tw/archive/b2g_os/platform/apps_architecture/index.html b/files/zh-tw/archive/b2g_os/platform/apps_architecture/index.html new file mode 100644 index 0000000000..2524c81d0b --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/apps_architecture/index.html @@ -0,0 +1,24 @@ +--- +title: Firefox OS apps 架構 +slug: Archive/B2G_OS/Platform/Apps_architecture +translation_of: Archive/B2G_OS/Platform/Apps_architecture +--- +
+

本文旨在說明 Firefox OS 內部如何管理和啟動應用程式，主要是針對 Firefox OS 平台開發者以及正在移植 Firefox OS 到新硬體裝置上的開發者，如果你只是一個單純 App 開發者並不會需要知道，不過有興趣的話還是可以看看了解 Firefox OS。

+
+

App 啟動程序

+

當 app 被啟動時，主畫面 app (Home screen app) 會透過 {{domxref("App")}} API 取得 app 的參照，然後呼叫 {{domxref("App.launch()")}} 方法來啟動 app。

+

Gecko 收到相關請求後會發送一個含有 app 詳細資訊的 {{domxref("mozChromeEvent")}} 到系統 app (System app)，系統 app 接著會將一個 {{HTMLElement("iframe")}} 加入 DOM 樹(DOM tree)中，然後將 app 載入該 {{HTMLElement("iframe")}} 裡，直到 app 終止前這個 iframe 就是 app 的家。

+

每一支 app 都需要一個描述該 app 的 manifest 檔，app 包也需要遵照特定檔案階層，詳情請見 App manifest。

+

和 Gecko 溝通

+

Gecko 和 Gaia' 系統 app 之間的溝通是經由 {{domxref("mozChromeEvent")}} 以及 {{domxref("mozContentEvent")}} 完成。 mozChromeEvents 是從 chrome 廣播到內容，而 mozContentEvents 是從內容廣播到 chrome，這些溝通主要在控管受信任 UI 的創建與終止，還有在為通知和其他任務，包括通知系統 app 啟動某個 app，提供必要的功能。

+
+

Note: 請參考 System app 文件 以取得更多有關這些事件如何運作的細節，同時也可以參考相關的原始碼 {{source("b2g/chrome/content/shell.js")}}。

+
+

延伸閱讀

+ diff --git a/files/zh-tw/archive/b2g_os/platform/gaia/gaia_apps/index.html b/files/zh-tw/archive/b2g_os/platform/gaia/gaia_apps/index.html new file mode 100644 index 0000000000..4a284db78e --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/gaia/gaia_apps/index.html @@ -0,0 +1,78 @@ +--- +title: Gaia apps +slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps +--- +
+

Gaia 位在 Firefox OS 的上層，其中包含系統管理功能以及一系列 Firefox OS 內建 apps。所有 Gaia 的原始碼 — 即便系統和鍵盤輸入法 — 都是由 HTML5 (HTML + CSS + JavaScript) 和 Open WebAPIs 技術所建構而成的，本文旨在說明 Gaia 內建的 apps 是如何運作之。

+
+

Gaia 功能類別

+

Gaia 內不同的 apps 大致上可以分成以下幾類。

+
+

Note: 許多 app 運作說明都會連結到 Gaia Github repo 上的 README 頁面，那是因為很多 app 都還在快速開發迭代階段，常常會有更動，所以一直更新 MDN 相當不切實際，如果想要進一步獲取最新的資訊，請再參考各 README 頁面。

+
+

平台類

+

包括系統、設定、螢幕鎖定、建置腳本和藍芽 apps。

+

+

平台類 apps:

+
+
+ 系統 (System)
+
+ System app 是第一個在 Firefox OS 開機程序 中被 Gecko 載入的web app，它負責處理許許多多系統運行工作，所以不算是在一般個別 web app 的範疇內。
+
+ 瀏覽器 (Browser)
+
+ Browser app (現在算是 System 一部分) 當有相關需求時，如網頁瀏覽、搜尋或書籤標記，提供瀏覽器類的功能。
+
+ 視窗管理 (Window Management)
+
+ Firefox OS 視窗管理功能 — 包括 app 生命週期和互動、通知、動畫等等 — 由 System app 特定一塊負責。
+
+ 設定 (Settings)
+
+ Settings app 讓使用者設定裝置、回應當前活動呼叫 (帶有 configure 名稱的 Web 活動)，讓其他 app 可以跳轉到 Settings app 其中的設定面板處理需要的設定任務 (例如說顯示 wifi 設定面板當數據傳輸無法使用時)。
+
+

通訊類

+

包括 Dialer, Contact, SMS apps 與 FTU apps.

+

+

生產力類

+

包括 Email, Calendar, 與 Clock apps.

+

+

生產力類 apps:

+
+
+ 日歷 (Calendar)
+
+ Firefox OS 內建 calendar app.
+
+ 時鐘 (Clock)
+
+ Firefox OS 預設 Clock app，具備鬧鈴、計時等功能
+
+ Email
+
+ Gaia e-mail app.
+
+

媒體類

+

包括 Camera, Gallery, Music, 和 Video apps 等等媒體相關功能，如桌布和轉送 DRM 鎖。

+

+

媒體類 apps:

+
+
+ 影音 (Video)
+
+ Video 是影音媒體撥放器。
+
+ 相機 (Camera)
+
+ Firefox OS 使用者透過相機照相、錄影，它也會回應 type 為pick 的 Web 活動，讓其他想使用相機功能的 app 使用相機。
+
+

其他 Gaia 特色功能

+

除了上述功能，Gaia 還有其他功能如 browser, homescreen, marketplace, test framework, PDF viewer, 和 app manager 等。

+
+
+ pdf.js
+
+ pdf.js 是 HTML5 基礎的 PDF 瀏覽器，Gaia 用其來瀏覽 PDF，請注意 pdf.js 的程式碼庫 (repo) 和 Gaia 是分開來的。
+
diff --git a/files/zh-tw/archive/b2g_os/platform/gaia/index.html b/files/zh-tw/archive/b2g_os/platform/gaia/index.html new file mode 100644 index 0000000000..d2a4886cf1 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/gaia/index.html @@ -0,0 +1,68 @@ +--- +title: Gaia +slug: Archive/B2G_OS/Platform/Gaia +tags: + - B2G + - Gaia + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform/Gaia +--- +

Gaia is the user interface level of Firefox OS. Everything that appears on the screen after Firefox OS starts up is drawn by Gaia, including the lock screen, home screen, dialer, and other applications. Gaia is written entirely in HTML, CSS, and JavaScript. Its only interface to the underlying operating system and hardware is through standard Web APIs, which are implemented by Gecko.

+

Because of this design, not only can Gaia be run on Firefox OS devices, but also on other operating systems and in other web browsers (Albeit with potentially degraded functionality depending on the capabilities of the browser).

+

Third party applications onto the device installed alongside Gaia can be launched by Gaia.

+ + + + + + + +
+

Documentation about Gaia

+
+
+ Introduction to Gaia
+
+ Gaia is the user interface application for Firefox OS devices; it's simply a Web application running atop the Firefox OS software stack. This guide introduces Gaia at a high level.
+
+ Gaia hacking guide
+
+ A guide to hacking and modifying the Gaia interface.
+
+ Gaia Build System Primer
+
+ Most of the meaniful work for the build steps are performed by the scripts that live inside the build/ subdirectory of Gaia.
+
+ Gaia Hacking Tips And FAQ
+
+ A list of helpful tips and frequently asked questions around hacking on Gaia.
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Gaia, or developing Gaia applications, there are community resources to help you!

+
    +
  • Consult the Boot to Gecko project forum: {{ DiscussionList("dev-gaia", "mozilla.dev.gaia") }}
    • +
+

 

+
+ + +

Resources

+ +
+

 

diff --git a/files/zh-tw/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html b/files/zh-tw/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html new file mode 100644 index 0000000000..27c9ea5ea4 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html @@ -0,0 +1,13 @@ +--- +title: Gaia 簡介 +slug: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia +translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia +--- +

Gaia 是 Boot to Gecko (B2G) 的使用者介面；它只是在 B2G 裝置、模擬器、桌上型電腦版本、或是 Firefox 版本上運作的一個網頁應用程式 (Web application)。如果想要在 Gaia 上添加 apps 程式或是做一些改變的話，所有你需要了解的就是網頁科技 (Web Technologies)，例如 JavaScript、 HTML、和 CSS。

+

Gaia 的鎖定畫面

+

鎖定畫面預設是啟動的，而預設解鎖密碼 (PIN) 是「0000」。隨著這個功能會隨著時間愈趨完整。

+

預設的 Gaia 介面

+

Gaia 的預設介面跟大家所見最典型的智慧型手機相仿，如這邊所看到的圖。

+

screenshot.png這是張 prerelease 版本作業系統的圖，有一些暫時使用的圖示(和一些測試的程式)。頂端的狀態條顯示手機正在使用哪個行動網路 (如果行動裝置沒有網路的話，會顯示「No SIM card」)、行動網路強度、WiFi 訊號強度、電池使用狀態、和現在的時間。

+

畫面的中間區域顯示應用程式的圖示；透過螢幕的圖示切換左右頁。

+

在螢幕的底部是一個底座，可以放四個最常用的應用程式。現在底座還不能修改，且被預設顯示播號 (Dialer)、訊息 (Messages)、市集 (Market)、和瀏覽器 (Browser)的程式。

diff --git a/files/zh-tw/archive/b2g_os/platform/gonk/index.html b/files/zh-tw/archive/b2g_os/platform/gonk/index.html new file mode 100644 index 0000000000..71d064ac30 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/gonk/index.html @@ -0,0 +1,22 @@ +--- +title: Gonk +slug: Archive/B2G_OS/Platform/Gonk +translation_of: Archive/B2G_OS/Platform/Gonk +--- +

{{draft()}}

+
+

Gonk是Firefox OS的底層系統，包含基於Android Open Source Project (AOSP)的Linux核心以及硬體抽象層(hardware abstraction layer, HAL)。本文旨在說明Gonk的組成，更多有關FireFox OS架構以及Gonk是如何配置在其中的細節，請參考Firefox OS架構指南。

+
+

Gonk 概觀

+

在Gecko原始碼中，有一個b2g/資料夾，這個資料夾含有Gonk接口，它為網頁開啟了行動裝置的硬體能力。這其中包含了Linux核心、HAL和其他OEM特定的函式庫(library)。好機個Gonk函式庫是開放原始碼專案，如libusb, bluez等，有些HAL部分則是和Android專案共享，如GPS, camera等。

+

Gonk是裝置接口層，介於硬體和Gecko之間的配接器。Gonk是一個相對簡單的Linux發布版本，可以視為Gecko的配接目標，就像是Gecko和OS X, Windows和Android的接口。

+
+

Note: 由於不同的行動裝置有不同的晶片組與硬體規格，所以可能會有不同的Gonk發布版本。

+
+

Firefox OS專案擁有Gonk百分之百的控制權，所以能夠提供Gecko那些原本在其他作業系統上無法看到的介面，例如，Gecko可以直接存取電話系統框架和Gonk的顯示frame buffer。

+

Gonk 原始碼

+

B2G repo on Github 上有多種裝置的官方Gonk支援移植，可以視為Gonk的檔案庫。至於裝置支援列表，請見B2G/config.sh。

+

大部分Gonk相關的日常工作包括了移植Gonk到不同硬體上，還有確保Gecko能在不同硬體上順利運行。

+
+
+

 

diff --git a/files/zh-tw/archive/b2g_os/platform/index.html b/files/zh-tw/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..fe9474eed5 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox OS 平台 +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +

Firefox OS 平台是由多樣的元件所組成。如果你只是要撰寫能在 Firefox OS 上執行的 App，其實不太需要通盤了解其架構。但如果你從事平台開發、平台移植，甚或只是單純好奇的話，也許會對以下說明文件感興趣。

+ + + + + + + + +
+

關於 Firefox OS 平台的說明文件

+ +
+
Firefox OS 架構概述
+
簡單概述 Firefox OS 的內部架構，可供平台開發或移植工程師初步了解 Firefox OS。
+
 
+
Firefox OS 的 App 架構
+
概述 Firefox OS 的 App 模型。
+
Gaia
+
Gaia 是 Firefox OS 裝置的使用者介面 (UI) App，也是在 Firefox OS 軟體堆疊上執行的 Web App。
+
Gonk
+
Gonk 的說明文件。Gonk 屬於 Gaia 之下的作業系統層，包含 Linux kernel 硬體抽象層 (Hardware abstraction layer)，且由 Gecko 負責之間的溝通。
+
Gecko
+
Gecko 即為 Firefox、Thunderbird，以及其他許多 App 所使用的相同 Open Web 標準實作。
+
安全性
+
Firefox OS 的安全性說明文件，包含各個面相的裝置安全，適合 App 開發者、裝置整合商等參考。
+
Firefox OS 記憶體耗盡時的管理作業
+
本文將解釋 Firefox OS 記憶體不足時的管理方式，可透過記憶體清理與記憶體不足通知等功能。
+
功能支援表
+
各個 Firefox OS 版本所支援的各項功能特色。
+
Firefox OS 設定清單
+
常見的設定名稱清單，可搭配 Settings API。
+
+ +

全部文章...

+ 		+

尋求社群協助

+ +

如果你正在開發 Firefox OS，或是可於 Firefox OS 裝置上執行的 App，則能參閱以下社群資源！

+ +
    +
  • Boot to Gecko 論壇：{{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+ +
    +
  • 在「Boot to Gecko」的 IRC 頻道上提問：#b2g
    • +
+ +

請遵守網路禮節...

+ + + + + + +

相關資源

+ + +
+ +

 

diff --git a/files/zh-tw/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html b/files/zh-tw/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html new file mode 100644 index 0000000000..5b7f2045cc --- /dev/null +++ b/files/zh-tw/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html @@ -0,0 +1,53 @@ +--- +title: Firefox OS 記憶體管理 +slug: Archive/B2G_OS/Platform/Out_of_memory_management_on_Firefox_OS +translation_of: Archive/B2G_OS/Platform/Out_of_memory_management_on_Firefox_OS +--- +
+

Firefox OS 會運行在一些記憶體容量不大的裝置上，當程序用盡了記憶體，系統核心就必須關閉其他程序好釋放出記憶體使用。本文旨在描述記憶體關閉和記憶體不足通知如何運作、如何控制關閉那些程序，以確保當記憶體不夠時，主系統還是可以運作。

+
+

記憶體不足時會有兩個系統介入管理: Low memory killer (LMK) 與 Low memory notifications.

+

Low memory killer

+

LMK 是 Android 核心的次系統，這個次系統負責關閉程序好騰出記憶體使用。為了決定程序關閉優先順序，每一個程序都會透過 /proc/<pid>/oom_adj or /proc/<pid>/oom_score_adj files 被賦予一個優先值，這個優先值為調整分數(adjustment score 或 oom_adj)。

+

一般來說 oom_adj 值越大，程序越容易被刪除，LMK 提供多個層級，每個層級對應到一定容量的可用記憶體以及最小 oom_adj 值。當可用記憶體掉到某一個層級，所有 oom_adj 值大於該層級 oom_adj 值的程序都有可能被關閉，LMK 會從占用最多記憶體的程序開始一個一個關閉，直到可用記憶體回復到安全層級為止。

+
+

Note: 被 LMK 關閉的背景 app 仍然以 "殭屍 app" 的形式存在在程序管理員 (task manager)，下次再回到該 app，app 會被重新喚醒。目前最大殭屍 app 的數量是 10。

+
+
+

Note: 為了記憶體不足被關閉的 app 不一定就是造成記憶體不足的原因。

+
+

程序關閉優先順序

+

Firefox OS 關閉 app 的優先順序是由每個 app 給定的優先層級和相關聯的 OOM 調整分數所決定 (現有值都存在 pref):

+
    +
  1. 最先關閉的 app 是背景 app，最近最少使用的。
    2. +
  2. 第二是 homescreen app。
    3. +
  3. 接下來是使用者可察覺的背景 app (例如，在背景撥放音樂的程式，或高優先 (high-priority)、或持有 cpu wakelock 並且註冊有系統訊息處理器(system messages handler) 的 app)。
    4. +
  4. 第四是鍵盤程式。
    5. +
  5. 前景 (Foreground) app 則是第五順位被關閉的 app。
    6. +
  6. 最後則是前景高優先 (high-priority)、或持有 cpu wakelock 的前景 app。
    7. +
+
+

Note: 大部分在前景的子程序持有為 2 的oom_adj，背景子程序則持有 3 ~ 6 的 oom_adj，背景子程序到底會持有多大 oom_adj 值取決於許多因素，比如說是否撥放音月或是否屬於 homescreen app。

+
+

下面是例外:

+ +

記憶體過低通知

+

第二個釋放記憶體的機制是記憶體過低通知。當可用記憶體量低過一定的門檻值，LMK 便會向使用者空間 (userspace) 發出記憶體過低通知，系統 app 和一般使用者 app 都會等待這個通知，然後透過觀察器服務 (observer service) 發出 memory-pressure 事件回應之；這個事件 app 不會直接看見，只有 C++ 和 Chrome JS 程式碼會看到，在 Gecko 裡我們從這個事件中會盡一切可能釋放記憶體 — 通常是刪除內部快取 (images, DNS, sqlite, 等等)，拋棄可以回復的物件 (比如 WebGL contexts) 還有執行垃圾回收機制。
+
+ 當碰到記憶體過低狀況時，第一個發出的 memory-pressure 事件會有 low-memory 負載，倘若經過預定的5秒後我們依然處於記憶體過低狀態，另一個 memory-pressure 事件會發出，不過這一次是帶著 low-memory-ongoing 負載，這個時候我們持續處於記憶體過低狀態，很明顯地像一些垃圾回收機制等大動作的作法也不夠了，所以其他一些更低階的記憶體釋放作法會被採行。

+

LMK 和記憶體過低通知如何協同運作

+

目前記憶體過低門檻介於 LMK 的背景 app 層級(大於)和 homescreen 層級(小於)之間，所以整體記憶體不足的反應機制如下:

+
    +
  1. 關閉最近最不常用的背景 app。
    2. +
  2. 當記憶體依然不足，發出 memory-pressure 事件通知給所有的 app。
    3. +
  3. 當記憶體依然不足，每5秒發出 memory-pressure 事件，但標記為 ongoing 讓垃圾回收機制不要回應。
    4. +
  4. 關閉 homescreen.
    5. +
  5. 關閉使用者可察覺或高優先值的背景 app。
    6. +
  6. 關閉運作中的鍵盤 app。
    7. +
  7. 關閉前景 app。
    8. +
  8. 關閉高優先值的前景 app。
    9. +
  9. 關閉 preallocated 程序。
    10. +
diff --git a/files/zh-tw/archive/b2g_os/preparing_for_your_first_b2g_build/index.html b/files/zh-tw/archive/b2g_os/preparing_for_your_first_b2g_build/index.html new file mode 100644 index 0000000000..1d165926a1 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/preparing_for_your_first_b2g_build/index.html @@ -0,0 +1,138 @@ +--- +title: 準備第一次建置 B2G +slug: Archive/B2G_OS/Preparing_for_your_first_B2G_build +translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build +--- +

在開始建置 B2G 前，要先複製整個倉儲 (repository)並且作編譯的設定。這篇文章說明要怎麼做。

+ +

複製 B2G 倉儲(repository)

+ +

在第一次編譯前，要做的第一步就是複製 B2G 的倉儲(repository)。這個步驟將不會把所有東西抓下來！相反地，他會抓 B2G 建置系統和安裝工具。B2G 大部分的程式碼都在主要的 Mozilla Mercurial 倉儲。

+ +

用 git 來複製倉儲：

+ +
git clone git://github.com/mozilla-b2g/B2G.git
+ +

複製了之後(應該會花個幾分鐘)，cd 到 B2G 的目錄：

+ +
cd B2G
+
+ +

複製 B2G 樹(tree)到一台新機器

+ +

當您有一台新電腦時(超幸運的！)，您會覺得把 B2G tree 從一台電腦轉移到另一台電腦的話，生活會簡單很多。

+ +

將您就電腦的磁碟掛上(mount)到新的電腦，然後敲入下面的指令，就可以做到：

+ +
rsync -a source/ dest/
+
+ +

source 是整個原始碼樹(source tree)的完整路徑 (包括後面的斜線)，而 dest 是您要複製的目的位置 (同樣也包含後面的斜線，它很重要！)。

+ +

這樣做之後，您可以跳過這篇文章剩下的部份，然後直接跳到的「建置」部份。

+ +

設定專屬於您的行動裝置的 B2G

+ +
重要：請注意只支援 Android 4 (aka. Ice Cream Sandwich) 的行動裝置。請確認您的手機運作的真的是 ICS，否則這個步驟很可能會失敗於某些非 Nexus 裝置的驅動程式。另外，如果您必須要將行動裝置燒成 ICS，請留意有些 USB hubs 和燒錄工具不相容，因此您可能需要將行動裝置連接到內建的 USB port。
+ +

擷取了核心的 B2G 建置系統之後，您需要為了要安裝的行動裝置作設定。您可以使用 config.sh 工具來擷取支援的行動裝置列表，如下：

+ +
./config.sh
+
+ +

這會顯示支援的行動裝置列表；舉例來說：

+ +
Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-4-kk
+- nexus-5
+- nexus-5-l
+- nexus-s
+- nexus-s-4g
+- flo (Nexus 7 2013)
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- hamachi
+- helix
+- tarako
+- dolphin
+- dolphin-512
+- pandaboard
+- vixen
+- flatfish
+- flame
+- flame-kk
+- flame-l
+- rpi (Revision B)
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-l
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+- emulator-x86-l
+> Sony Xperia devices
+- aries (Z3 Compact KK)
+- aries-l (Z3 Compact L)
+- leo-kk (Z3 KK)
+- leo-l (Z3 L)
+- scorpion-l (Z3 Tablet Compact L)
+- sirius-l (Z2 L)
+- tianchi-l (T2U L)
+- flamingo-l (E3 L)
+ +

如果您的行動裝置沒被列出，您應該馬上停止來幫忙將 B2G 移植到您的行動裝置，或是等到某個人移植完之後再安裝。我們當然比較希望您可以幫忙移植！

+ +
注意：如果因為任何原因您想要編譯某個版本的 Gecko，請在您著手之前先看 Building against a custom Gecko。
+ +

設定給行動裝置

+ +

首先，連接您的裝置；設定的過程會需要存取它。

+ +

如果您的裝置有被列出，您可以再執行一次 config.sh 來開始設定的程序，這次需要指名您的行動裝置的名字。舉例來說，如果要編譯給 Samsung Google Nexus S的話，您要打：

+ +
./config.sh nexus-s
+
+ +

在設定一開始的附近您可能會需要設定使用顏色的選項，而在這之後設定程序會繼續下去。接著可以去喝個咖啡休息一下，因為這個時候您會第一次把建置 Boot to Gecko 中所有需要的程式碼都抓下來。

+ +

如果您的手機不再使用 Android 且 B2G tree 還沒裝到手機上，而您又有遵照前幾頁所說、聰明地作了一份 /system 磁區的備份的話，您可以這樣使用它：

+ +
ANDROIDFS_DIR=<absolute path to parent dir of system dir> ./config.sh <target>
+
+ +

設定來建置模擬器

+ +

如果您要編譯模擬器的話，就需要指定 "emulator" 來使用 ARM 的模擬器，或是 "emulator-x86" 來編譯 x86 模擬器。後者比較快，但也因此在表現實際行動裝置上較不準確。
+
+ 舉例來說，您要像下面這樣設定來編譯 ARM 模擬器：

+ +
./config.sh emulator
+
+ +

在設定一開始的附近您可能會需要設定使用顏色的選項，而在這之後設定程序會繼續下去。接著可以去喝個咖啡休息一下，因為這個時候您會第一次把建置 Boot to Gecko 中所有需要的程式碼都抓下來。

+ +

編譯客製的 Gecko

+ +

可能您會想要或需要以好幾種版本的 Gecko 來編譯 Boot to Gecko (manifest 中預設是一種)。您可以在您抓倉儲 (在上述的 config.sh 之前)，藉由編輯 .userconfig 來做到這件事情。舉例來說，如果您要根據 mozilla-central 來編譯：

+ +
GECKO_PATH=/path/to/mozilla-central
+GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+
+ +
+

注意： 如果是在 Mac OS X 下客製化編譯的話，檔案系統本身會注意 mozilla-central 的大小寫。

+
+ +

您可以參考 客製化 .userconfig 設定檔 來客製化更多東西。

+ +

接著，開始編譯

diff --git a/files/zh-tw/archive/b2g_os/quickstart/app_tools/index.html b/files/zh-tw/archive/b2g_os/quickstart/app_tools/index.html new file mode 100644 index 0000000000..bc539adefa --- /dev/null +++ b/files/zh-tw/archive/b2g_os/quickstart/app_tools/index.html @@ -0,0 +1,28 @@ +--- +title: App tools +slug: Archive/B2G_OS/Quickstart/App_tools +translation_of: Archive/B2G_OS/Quickstart/App_tools +--- +
+

您用什麼來建立開放式Web應用程序?答案是，"你通常會用它來建立網絡'。以下是工具和資源的清單，可以幫助您開始做開放式Web應用程序。他們可以很容易地成您現有的Web開發工作流程，如果你有一個，或者你可以將它們周圍建立為一個新的工作流程。

+
+

應用程序驗證程序

+

您的應用程序以準備好進入Firefox市場？應用程序驗證器會檢查你的清單，並會顯示任何錯誤，它也有可能會顯示你沒有考慮過的警告。

+

火狐系統模擬器

+

安裝和使用火狐系統模擬器是開始和令你的應用程序運行的最簡單的方法。安裝後的模擬器,通過 工具-> Web開發 -> 火狐系統模擬器菜單。啟動後, 便會有JavaScript控制台，以便您可以從模擬器中測試應用程序的啟動和刪除錯誤！

+

應用程序管理器

+
+
+  
+
+

新的測試工具被稱為應用程序管理器。這個工具可以讓你通過USB以火狐來連接至兼容的設備（或一個火狐系統模擬器）把應用程序直接存在設備上，驗證的應用程序，並在設備上刪除錯誤。

+

Firefox的開發者工具

+
+
+
+
+ 火狐現在提供了一套開發工具，確保了極大的發展經驗，既好用，又高效率。欲了解更多有關這些工具如何運作，看看還有什麼的Mozilla所提供的，請到我們的工具區域。
+
+
+
+

 

diff --git a/files/zh-tw/archive/b2g_os/quickstart/index.html b/files/zh-tw/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..a5bb4fa406 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/quickstart/index.html @@ -0,0 +1,51 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - Apps + - NeedsTranslation + - Quickstart + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Quickstart information on coding open web apps.

+
+
+
+ Introduction to open web apps
+
+ What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
+
+ Your first app
+
+ This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
+
+ Introduction to Firefox OS
+
+ An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
+
+ Introduction to manifests
+
+ An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
+
+ App development for web developers
+
+ If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
+
+ App development for mobile developers
+
+ If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
+
+ Developing app functionality
+
+ This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
+
+ Payments
+
+ How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
+
+ App tools
+
+ Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
+
diff --git a/files/zh-tw/archive/b2g_os/quickstart/your_first_app/index.html b/files/zh-tw/archive/b2g_os/quickstart/your_first_app/index.html new file mode 100644 index 0000000000..d40315b16c --- /dev/null +++ b/files/zh-tw/archive/b2g_os/quickstart/your_first_app/index.html @@ -0,0 +1,265 @@ +--- +title: Your first app +slug: Archive/B2G_OS/Quickstart/Your_first_app +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+

Note: 快速入門這段章節已經取代先前舊的快速入門章節，更新為最新的及更專注於Firefox OS app essentials 文章。我們希望你將發現這份是比舊文更有用和更快學習經驗的文章。

+
+ +
+
+

開放式Web應用讓開發人員實現了期盼多年的夙願：通過Firefox OS這一首款開放式Web應用平台，可以僅僅使用HTML、CSS和JavaScript在跨平台的環境中生成可部署的應用。本手冊包含了基本的架構和應用構建指南，你能夠迅速掌握這些內容並開始創造自己的下一個偉大的應用！

+
+ +

如果你想按照本指南開發，你可以下載我們的quick start app template.  或可以藉由參閱我們的Apps template 指南，找到更多有關的內容。

+ +

App 結構

+ +

打包型 Apps VS. 托管型 Apps

+ +

開放網絡應用有兩種類型：打包型和托管型。打包型apps本質上來說就是一個包含各種HTML、CSS、JavaScript、圖像、表單等應用資源的zip文件。托管型apps在一個給定域名的服務器上運行，就像是一個獨立的網站。兩種應用都需要有有效的表單。到了要在火狐市場中列出你的app，你要上傳app zip文件或提供托管app所在的URL。

+ +
+

{{EmbedYouTube("Q7x-B13y33Q")}}

+ +
+

用Treehouse為製作夥伴: Check them out!

+
+
+ +

本指南的目的，會讓你將創建一個於本機（localhost）地址上的托管型app。一旦你的app準備好進入火狐市場，你可以選擇把它作為打包app或作為托管app啓動。

+ +

App 表單

+ +

每一個火狐app都需要一個位於根目錄下的manifest.webapp文件， 這個manifest.webapp 文件提供app有關的重要信息，如：版本、名稱、描述、圖標位址、本地字符串、指明app可以從哪兒被安裝等等。只有名稱和描述是必須的。app模板中的簡單表單如下所示：

+ +
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Your new awesome Open Web App",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Your Name",
+    "url": "http://yourawesomeapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "La tua nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "en"
+}
+ +
+

{{EmbedYouTube("dgAUgHQOm8M")}}

+ +
+

Made in partnership with Treehouse: Check them out!

+
+
+ +

 

+ +

一個基本的表單是你所需要最先上手的地方。關於表單的更多細節，見App Manifest.

+ +

App 佈局 & 設計

+ +

隨著不同設備上屏幕解析度標準的增多，響應式設計已經變得越來越重要。即使你app的主要目標平台是移動平台比如Firefox OS，其他設備很有可能也會訪問它。CSS media queries 使你可以根據設備調整佈局，如下的CSS樣例中所示的結構：

+ +
/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}
+ +

有許多JavaScript和CSS的框架可以用於協助響應式設計和移動app發展（Bootstrap等），選擇最適合你的app和開發樣式的框架即可。

+ +

Web APIs

+ +

JavaScript APIs正隨著設備快速開發，同時地被創造和增強。Mozilla的WebAPI 致力於為JavaScript APIs引入成打的標準移動端特性。設備支援和狀況列表可以在WebAPI 頁面中查看。在下面這個例子中，JavaScript 特徵偵測仍然是最好的例子：

+ +
// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}
+ +

在下面這個例子中，<div>的顯示樣式會根據設備的電池狀態的改變而改變：

+ +
// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();
+ +

在上面的示例代碼中，一旦你確定設備支持Battery API，你就可以為chargingchange 和 levelchange添加 event listeners 來更新元素的樣式。試試添加下面的指令到快速入門模板，你會看到你的工作效果。

+ +

時常檢查WebAPI 頁面以確保更新設備API的狀態。

+ +

Install API 功能

+ +

在我們的快速入門應用模板範例中，我們已經實現了一個安裝按鈕，可以在你把應用當作一個標準網頁來瀏覽時可以單擊它來把那個網站當作一個應用安裝在Firefox OS上。按鈕標籤並沒有什麼特別的：

+ +
<button id="install-btn">Install app</button>
+ +

按鈕的功能由Install API實現（見install.js）：

+ +
var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+
+ +

我們來簡要的看一下發生了什麼：

+ +

1. 我們得到一個安裝按鈕的引用並把它儲存在button變量中。
+ 2. 我們使用navigator.mozApps.checkInstalled 來檢查這個由http://people.mozilla.com  /~cmills/location-finder/manifest.webapp 這個表單來定義的應用是否已經安裝在設備上。這個測試結果被儲存在installCheck這個變量中。
+  3. 當測試被成功完成時，它的成功會完成事件被觸發，因此installCheck.onsuccess = function() { ... }會被執行。
+  4. 然後我們用一個if語句判斷installCheck.result是否存在？如果存在，以為著app已經被安裝了，我們就隱藏安裝按鈕。在應用已經被安裝的情況下不需要安裝按鈕。
+  5. 如果app沒有被安裝，為按鈕添加一個單擊事件監聽器。所以在按鈕被單擊的時候，install()函數會被執行。
+  6. 當單擊按鈕並且install()函數執行時，我們把表單檔案位置保存在一個叫manifest_url的變量中，然後利用navigator.mozApps.install(manifest_url)來安裝app，用一個installLocFind變量來儲存對那個安裝的app參考資訊。你會注意到安裝也會觸發success和error事件，所以你可以根據應用是否成功安裝來執行不同的動作。

+ +

第一次遇到可安裝web apps時，你可能想要覈實implementation state of the API 的執行狀態。

+ +

注意：可安裝開放web apps有一個「每個來源（origin，感覺就是URL的意思）就是一個app」的安全策略；基本上， 你不可以在一個來源上托管多個可安裝apps。這會讓檢測變得有一點複雜，但是仍有很多辦法解決這個問題，比如為應用創建多個子域名、用Firefox OS模擬器測試應用、或者在Firefox Aurora/Nightly上安裝測試功能，通過這種方式你可以在桌面環境上安裝開發web app。關於來源的跟多信息詳見FAQs about apps manifests。

+ + +

WebRT APIs (基於權限的 APIs)

+ +

有些WebAPI雖然可以使用但是需要特定的功能開啓才具有使用的權限。應用可能會像下面這樣在manifest.webapp中記錄權限請求：

+ +
// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}
+ +

權限分為下面三個等級:

+ +
    +
  1. +

    一般權限——不需要任何特定訪問權限的API。

    +
    2. +
  2. +

    特殊權限——只要開發者在app表單文件中設置了訪問權限就可以在應用中利用並通過可信任來源進行分發的API。

    +
    3. +
  3. +

    認證權限——控制力設備上關鍵功能的API，比如打電話和發短信的服務。這些一般不允許第三方開發者使用。

    + +

    關於應用權限等級的更多信息，請閱讀Types of packaged apps。你可以在應用權限中找到更多關於API要求權限和需要什麼樣的App permissions.。

    +
    4. +
+ +
+

有一點需要注意的很重要就是不是所有的Web API都可以在Firefox OS模擬器中執行。

+
+ +

工具 & 測試

+ +

測試在對移動應用的支持中是至關重要的。測試可安裝的開放web app有多種方式。

+ +

WebIDE 和 Firefox OS 模擬器

+ +

安裝和使用Firefox OS模擬器是啓動和運行你的應用最簡單的方式。在你安裝模擬器之後，可以通過工具->web開發者->Firefox OS模擬器菜單來啓動。模擬器啓動時會有一個Javascript控制台，這樣你就可以在模擬器中調試你的應用。

+ +

測試工具的新寵兒被稱為app管理器WebIDE。這個工具允許你通過USB鏈接桌面火狐瀏覽器和一個可兼容性設備（或者一個Firefox OS模擬器），直接將app推送到設備上，驗證app並且像運行在設備上一樣的調試。

+ +

單元測試

+ +

當在測試不同設備和版本時，單元測試就會非常有價值。jQuery的QUnit 是一個流行的客戶端測試工具，當然你也可以使用任何你喜歡的測試工具。

+ +

在設備上安裝Firefox OS

+ +

既然Firefox OS是一個開源平台，代碼和工具都可以用於在你自己的設備上構建和安裝Firefox OS。構建和安裝指南以及什麼設備可以安裝的注意事項可以在MDN上發現。

+ +

特定的Firefox OS開發者預覽版設備可以在Developer preview phone page找到更多信息。
+ 應用。

+ +

App 提交和分發

+ +

一旦你的app完成，你可以像標準網站或app一樣托管它（更多信息請閱讀Self-publishing apps ），或者可以submitted到Firefox Marketplace。你的app表單將被驗證並且你可以選擇你的應用將支持的設備（比如：Firefox OS、桌面版火狐瀏覽器、移動版火狐瀏覽器、平板火狐瀏覽器）。一旦驗證通過，你可以為你的app添加更多細節（截屏、描述、價格等）並且正式在火狐市場中提交app列表。提交成功後，你的應用可以被任何人購買和安裝。

+ +

更多商場 & 上市信息

+ +

    1. 向Firefox OS商場中提交應用 Submitting an App to the Firefox OS Marketplace
+     2. 市場審查標準 Marketplace Review Criteria
+     3. 應用提交演練視頻 App Submission Video Walkthrough

+
diff --git a/files/zh-tw/archive/b2g_os/releases/1.2/index.html b/files/zh-tw/archive/b2g_os/releases/1.2/index.html new file mode 100644 index 0000000000..bc8f785f6b --- /dev/null +++ b/files/zh-tw/archive/b2g_os/releases/1.2/index.html @@ -0,0 +1,465 @@ +--- +title: Firefox OS 1.2 for developers +slug: Archive/B2G_OS/Releases/1.2 +translation_of: Archive/B2G_OS/Releases/1.2 +--- +
+

Firefox OS 1.2 is at a pre-release stage right now. Its Gecko component is based on Firefox 26 (encompassing all Gecko additions between Firefox 19 and Firefox 26; see Firefox 26 release notes for developers for the latest.) This page details the developer features newly implemented in Firefox OS 1.2.

+
+ +

Developer Tools

+ + + +

HTML

+ +

General Gecko:

+ + + +

CSS

+ +

General Gecko:

+ + + +

JavaScript

+ +

General Gecko:

+ +

EcmaScript 6 (Harmony) implementation continues!

+ + + +

Telephony-specific additions (mostly API-related)

+ + + +

DOM/API

+ +

Firefox OS-specific:

+ + + +
New WebGL 1 extensions supported in Firefox OS 1.2:
+ + + +
+
Note: availability of these extensions depends on device capabilities; not all extensions will be available on all devices.
+
+ +

General Gecko:

+ + + +

SVG

+ +

General Gecko:

+ + + +

MathML

+ +

General Gecko:

+ + + +

Network

+ +

General Gecko:

+ + + +

Worker

+ +

General Gecko:

+ + + +

Security

+ +

General Gecko:

+ + + +

XForms

+ +

General Gecko:

+ +

Support for XForms has been removed in Firefox 19.

+ +

See also

+ + + +

Older versions

+ +

+ +

+ +

+ +

Share this article: http://mzl.la/1av9ZRr

diff --git a/files/zh-tw/archive/b2g_os/releases/index.html b/files/zh-tw/archive/b2g_os/releases/index.html new file mode 100644 index 0000000000..3edbcd4c75 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/releases/index.html @@ -0,0 +1,24 @@ +--- +title: Firefox OS developer release notes +slug: Archive/B2G_OS/Releases +tags: + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Releases +--- +

Firefox OS release notes by version

+

This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.

+
+ {{ListSubpages("",1,0,1)}}
+

Other supporting information

+
+
+ Firefox OS API support table
+
+ Lists the different APIs available, and what versions of Firefox have support for them.
+
+ App permissions
+
+ Lists hosted, privileged and certified APIs, along with information on the permissions they need to have set in the App Manifest of your installable apps, such as the manifest permission name, app type required, description, access property, and default permission.
+
diff --git a/files/zh-tw/archive/b2g_os/running_custom_builds_in_the_app_manager/index.html b/files/zh-tw/archive/b2g_os/running_custom_builds_in_the_app_manager/index.html new file mode 100644 index 0000000000..be4fefd747 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/running_custom_builds_in_the_app_manager/index.html @@ -0,0 +1,43 @@ +--- +title: 在 WebIDE 中執行 Firefox OS/Gaia 自訂版本 +slug: Archive/B2G_OS/Running_custom_builds_in_the_App_Manager +translation_of: Archive/B2G_OS/Developing_Gaia/Running_custom_builds_in_WebIDE +--- +
+

Firefox OS 模擬器 (Firefox OS Simulator) 已於 2014 年 2 月新增功能，可執行自訂的 B2G 執行環境及/或 Gaia 設定檔 (Profile)。本文將說明相關設定方式，並透過 WebIDE 執行模擬器。

+
+
+

注意：在本文發表之時，滑鼠事件尚未能正確對應觸控事件。例如回到主畫面鈕並無法回應滑鼠點擊的動作。但只要使用 B2G Desktop 鍵盤指令，即可解決此問題。可參閱「Using the B2G Desktop client」。

+
+
+

注意：如果你能提交 Try 版本，則可在各個 B2G 桌面平台的版本路徑中產生模擬器附加元件。如此可讓模擬器搭配自訂的 Gecko，或搭配對 Gaia 上進行的修改。在某些使用條件下可選用此較簡易的方式。

+
+

必要條件

+

要在模擬器內執行自訂版本，必須齊備相關工具。

+
    +
  1. 安裝 Firefox 並確定其內有 WebIDE (工具 > 網頁開發者 > WebIDE)。
    2. +
  2. 安裝最新版 B2G Desktop Nightly，或建構自己的版本。
    3. +
  3. 安裝最新版 Firefox OS 模擬器套件，即 7.0pre7.20140113 或更高版本。或可將 FXOS_SIMULATOR=1 添增到自己的 mozconfig，並使用 ./mach build && ./mach package，從自己的 B2G Desktop 原始碼來建構。
    4. +
  4. 用 SIMULATOR=1 flag 建立 Gaia 設定檔。舉例來說，你可在自己的 Gaia 路徑中執行 make SIMULATOR=1 PROFILE_FOLDER=profile-b2g profile-b2g 指令 (請參閱 Hacking Gaia 進一步了解)。
    5. +
+

設定自己的模擬器

+

你必須完成某些設定，才能讓模擬器找到你的 B2G Desktop 與自訂的 Gaia。

+
    +
  1. 打開附加元件管理分頁 (工具 > 附加元件；或在網址列中輸入 about:addons)。
    2. +
  2. 點擊「擴充套件 (Extensions)」分頁，可列出現已安裝的套件。
    3. +
  3. 在清單中找到新的 Firefox OS 模擬器擴充套件。應該會顯示如 Firefox OS 1.3 Simulator 7.0pre.7.20140113。
    4. +
  4. 點擊此擴充套件內的「選項 (Preferences)」按鈕。
    + the Firefox OS simulator preferences: Preferences, disable and remove.
    5. +
  5. 如果你要使用自訂的可執行檔 (最新的 B2G Desktop 版本)，以利於 WebIDE 中執行 Firefox OS，則點擊「Select a custom runtime executable」旁邊的「Browse...」按鈕，在檔案選擇介面中找到自己的 B2G Desktop 可執行檔。如果是 Windows/Linux 環境就很好找；而在 Mac 環境中，只要安裝於 Applications 路徑下，就可於 /Applications/B2G.app/Contents/MacOS/b2g 找到。
    6. +
  6. 你也能在 WebIDE 中執行自訂的 Gaia 設定檔。同樣點擊「Select a custom Gaia profile directory」旁邊的「Browse...」按鈕，找到自訂的設定檔路徑 (應該是 gaia/profile-b2g)。
    7. +
  7. 如果要回到非自訂的模擬器，只要重新設定組態值即可。但不能單純的刪除再重新安裝模擬器附加元件。你必須開啟新的分頁，在網址列中輸入「about:config」，繼續在該頁的搜尋欄位中輸入「fxos」或「simulator」，找到如「extensions.fxos_2_0_simulator@mozilla.org.customRuntime」，或「extensions.fxos_2_0_simulator@mozilla.org.gaiaProfile」。這時按下滑鼠右鍵並點選「Reset」。最後重新啟動模擬器版本，就能使用非自訂版本的模擬器。
    8. +
+

使用自訂的模擬器

+

最後說明該如何使用自訂的模擬器。

+
    +
  1. 啟動 WebIDE (工具 > 網頁開發者 > WebIDE)；或可按下「Shift + F8」。
    2. +
  2. 點擊右上方的按鈕，開啟「Runtime」選單。
    3. +
  3. 點擊「Firefox OS 1.3」按鈕 (或你安裝的任何最新版本)。即使你的 B2G desktop/Gaia 版本比較新，仍建議點選 Firefox OS 1.3 版。
    4. +
  4. 接著就會啟動模擬器，將載入 B2G Desktop 並執行你的 B2G Nightly 版本與自訂 Gaia！
    5. +
+

a screenshot of the b2g desktop simulator

diff --git a/files/zh-tw/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html b/files/zh-tw/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html new file mode 100644 index 0000000000..ae38c355ea --- /dev/null +++ b/files/zh-tw/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html @@ -0,0 +1,208 @@ +--- +title: 系列影片：Firefox OS App 開發入門 +slug: 'Archive/B2G_OS/Screencast_series:_App_Basics_for_Firefox_OS' +translation_of: 'Archive/B2G_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS' +--- +
+

Firefox OS 這款作業系統，就是要將 Web 帶入行動裝置所設計。Firefox OS 不是以新技術或新開發環境所建構的全新 OS；而是以行之有年的標準化 Web 技術所打造而成。如果你本身就是 Web 開發者且想建構行動 App，那麼 Firefox OS 就能提供最適合的工具，且不會要求你改變自己以熟悉的工作流程，也不需再重新學習另一套開發環境。此系列短片是由 Mozilla 與 Telenor 在挪威共同錄製而成，將引領你入門 Firefox OS App 的開發作業。

+
+ +

你可透過本系列影片了解：

+ + + +
+

注意：每部短片均極為精簡扼要，讓你短暫休息時也能欣賞。一口氣看完整個系列也不會超過一個小時。

+
+ +

程式碼與開發環境

+ +

除了短片之外，你也能從 GitHub 下載程式碼範例。如果你想自己測試程式碼範例，就必須先設定簡易的開發環境。必備條件如下：

+ + + +

系列影片介紹

+ +

此系列短片是由 Telenor Digital 的 Jan Jongboom (@janjongboom) 與 Sergi Mansilla (@sergimansilla)，以及 Mozilla 的 Chris Heilmann (@codepo8) 於 2014 年 2 月所錄製。地點位於挪威首都奧斯陸的 Telenor Digital 辦公室內。

+ +

這三位接下來將為大家簡短介紹系列影片：

+ +

{{EmbedYouTube("835Z2RTPdQk")}}

+ +

Section 1：建構並發佈

+ +

自己的第一款 Firefox OS App

+ +

接下來 5 支短片將說明如何建構 Firefox OS App、如何在電腦和實體裝置上測試 App 並除錯、如何將 App 發佈至 Firefox Marketplace 中。這看起來好像很複雜，但其實只要你已經知道怎麼寫網站，就等於能完成 90% 的 App。

+ +

不只是網站

+ +

Firefox OS App 就是 HTML5 App；其所使用的技術本質上也與網站技術相同。你可以先寫個網站，再提供 manifest 檔案 (可參閱《App manifest》進一步了解) 即可將網站轉為 App。這個動作就等於告知 Firefox OS 你在撰寫 App，並可讓你：

+ + + +

HTML5 App 其實是透過網站強化其功能，也同樣遵循相同的規則，如：

+ + + +

若要將網頁轉為絕佳的 App，其中的差異就在於開發者就必須考量到行動裝置使用者。也代表 App 首先必須要能：

+ + + +

在大多數的情況下，開發者必須稍微讓網頁「瘦身」並簡化介面。而使用者也確實能因此獲得更好的經驗。

+ +

{{EmbedYouTube("oUbOw2cQC4k")}}

+ +
+

注意：若要進一步設計出絕佳的 HTML5 App，可參閱 MDN 上的《應用程式中心》一文。

+
+ +

App 的 Manifest 檔案

+ +

Firefox OS App 的 manifest 檔案 (你會在「應用程式管理員 App Manager」看到中文翻譯為「安裝資訊檔」)，屬於簡易的 JSON 檔案，將告知作業系統該 App 的相關訊息；另外也可將網頁轉為 Open Web App。開發者可於 manifest 定義 App 不同語系的名稱，也可要求作業系統存取不同的服務與硬體。當然亦可定義該 App 適合的方向 (直幅或橫幅)，亦能依需要而鎖定畫面。

+ +

{{EmbedYouTube("UTXIVg6sYtA")}}

+ +

進一步了解 manifest 檔案與相關工具：

+ + + +

應用程式管理員 (App Manager)

+ +

要想開始入門 Firefox OS，最簡單的方法就是使用「應用程式管理員 (App Manager)」。應用程式管理員也是桌面版 Firefox 的開發者工具之一，可在電腦上模擬 Firefox OS 裝置。開發者可盡情把玩 Firefox OS，也可像在實際裝置上安裝並測試 App。此外，你也能離線或上線編輯 App，進而體驗 App 並進行除錯，在模擬裝置中即時看到修改之後的結果。

+ +

{{EmbedYouTube("oyAlYjpK-PE")}}

+ +

若要進一步了解應用程式管理員：

+ + + +

在實體裝置上測試

+ +

在模擬器上測試 App 當然不錯，但畢竟會受限於模擬的環境。如果想測試 App 互動時的效能或畫面呈現方向，就需要實體裝置。實機同樣可搭配既有的開發者工具，以及「應用程式管理員 (App Manager)」。在實機上使用 App 時，可透過上述 2 種工具進一步了解 App 所發生的作業。而且 App 不必更新，也不必解除安裝，即可即時看到 App 的變化。

+ +

{{EmbedYouTube("T8sr9SHKDHE")}}

+ +

發佈至 Marketplace

+ +

Firefox Marketplace 可供開發者提交 App，並讓消費者能夠接觸到自己的作品。Marketplace 亦可發佈如 Firefox 桌面版與行動版所適用的 App。而消費者只需要簡單的幾個步驟，就能對 App 評分、提出反饋意見、購買自己所需的 App。要發佈自己的 App 真的很簡單：

+ + + +

{{EmbedYouTube("kk3gYALtE0Q")}}

+ +

App 在提交到 Marketplace 之後，均會由 Mozilla 審查團隊進行審閱，並在幾天內就會通知審查結果。如果 App 有任何問題，在提交期間就會收到相關的檢驗訊息。開發者也有可能收到詳細的問題說明，並獲得修復問題的方法。

+ +

Section 2：Firefox OS 進階說明

+ +

引言

+ +

在前幾支影片中，我們談了 Firefox OS 的基礎概念、打造自己第一個 App 的步驟、在桌機與 Firefox OS 實體裝置上進行 App 除錯，最後把自己的 App 提交到 Marketplace 上。

+ +

而接下來的影片會再進一步說明 Firefox OS App 的技術；也會談談存取功能，讓開發者能妥善利用平板電腦與智慧型手機。但這些技術目前僅適用於 Firefox OS，還未能擴及其他平台。Firefox OS 內的所有程式，都是針對標準化與開放源碼的目標所設計。也就是說，我們很快就能在其他裝置或平台上看到 Firefox OS App 的蹤跡。

+ +

Web API

+ +

智慧型手機具備 GPS、相機、加速規等的多樣高階功能。但問題是 Web 技術並無法碰觸到這些功能技術。如果要存取這些功能，就必須撰寫原生應用程式。為了克服這個問題，Mozilla 與合作夥伴定義了一系列 API，可讓開發者以安全的方式，透過 JavaScript 存取行動裝置所搭載的硬體。這些開放的 API 即所謂的 Web API，同樣也提供給他人建構更多功能。Firefox OS 也是第一個使用 Web API 的平台。開發者不需另外撰寫原生的應用程式，即可存取智慧型手機上所需的功能。

+ +

{{EmbedYouTube("QkpH_qugrPk")}}

+ +

若要進一步了解 Web API：

+ + + +

Web Activities

+ +

Web Activities 可視為 Web API 的替代方案，同樣可存取某些特定裝置的硬體。相較於 API 直接與裝置溝通，Web Activities 則是在裝置上建立所有 App 的生態系統，讓 App 彼此相互溝通。舉例來說，App 不會存取相機而是要求圖片，讓使用者可透過自己最愛用的 App 取得圖片。也就是說，App 不要求使用者存取硬體 (偏安全性的考量)，而是讓使用者所信賴的 App 去取得圖片。此外，你也可以註冊特定 App 負責處理 OS 中的特定作業。Web Activities 其實就像對桌機裡的檔案按下滑鼠右鍵，你能在右鍵選單中看到有多種 App 可開啟檔案。而使用者可要求 OS 預設特定 App 開啟此一類型的檔案。Web Activities 可讓裝置上的 App 相互溝通，而不需再透過伺服器作為媒介。App 之間傳送的資料均已為最終資料。

+ +

{{EmbedYouTube("RQbCyDd9ejE")}}

+ +

進一步了解 Web Actitivies：

+ + + +

推播通知

+ +

使用 SimplePush WebAPI 的推播通知 (Push notification) 功能，可在裝置接收到特定訊息時喚醒 App。如此可在省電狀態下讓 App 保持待機，再隨時根據需求喚醒 App；此功能對行動裝置 App 格外重要。用這種方式所傳送的通知也有其優點：這種通知不會攜帶任何資料，Mozilla 不會取得 App 的資訊，而惡意攻擊者也無法監聽。

+ +

{{EmbedYouTube("F5UF4dKojzw")}}

+ +

若要進一步了解 SimplePush 所推播的通知：

+ + + +

離線功能

+ +

如果 App 無法離線作業，那可用性就會大大降低。有部分使用者也因為這個理由，比較喜歡安裝 App 之後只要開啟瀏覽器，就能在裝置的瀏覽器上查看所需的內容。其實「Web App」這個詞看起來會有「需要網路連線才能運作」的感覺。但使用者總是有無法上網的時候：飛機上必須關機、地底下收不到訊號，甚或手機內沒留任何資料。開發者應該要確保自己的 App 能離線運作。而 HTML5 即具備幾項離線作業的技術，主要就是 AppCache 與 DOMStorage。

+ +

{{EmbedYouTube("Q_WmkCzEKho")}}

+ +

進一步了解離線功能：

+ + + +

深入了解

+ +

我們希望這一系列的影片，能夠順利帶領開發者建構出自己的第一款 Open Web App。如果你很感興趣也想了解更多細節，也有許多其他資源與管道可供你利用：

+ +

{{EmbedYouTube("UVf2EVrLpl8")}}

+ + + +

歡迎大家多多交流

+ +

影片錄製人：Chris、Sergi、Jan

diff --git a/files/zh-tw/archive/b2g_os/security/application_security/index.html b/files/zh-tw/archive/b2g_os/security/application_security/index.html new file mode 100644 index 0000000000..3e8f8d576e --- /dev/null +++ b/files/zh-tw/archive/b2g_os/security/application_security/index.html @@ -0,0 +1,124 @@ +--- +title: 應用程式安全 +slug: Archive/B2G_OS/Security/Application_security +translation_of: Archive/B2G_OS/Security/Application_security +--- +
+

本文涵蓋 Firefox OS 應用程式安全模型細節內容。

+
+

Firefox OS Web app 核心安全控制如下：

+ +

App 類別

+

Firefox OS 支援: "web", "privileged" 和 internal ("certified") 三種類別的 Web app，app 的類別宣告在 manifest 裡 (另外使用權限也在裡面) 。

+ +
+

Note: 關於 App 類別，詳細說明請見 App Manifest。

+
+

App 下載

+

Firefox OS 共有兩種 App 下載機制：hosted 以及 packaged。一般 web app 兩種方式都能適用，但 privileged 和 certified apps 只能走 packaged 的方式。

+

Hosted(託管式) apps

+

Hosted app 只包含開發者網站伺服器上的 application manifest 檔案，Manifest 檔案裏面有 app 開啟時的啟動頁面路徑。從安全性角度來看 hosted app 和網頁差不多，當打開 hosted app ，載入頁面的 URL 就是網頁在伺服器上的一般 URL，如果之前有 appcache 存檔的話則會從裝置上載入。

+

Packaged(封裝式) apps

+

Packaged app 將所有的資源 (HTML, CSS, JavaScript, app manifest 等等) 包在一份 zip 檔中，而非網頁伺服器，細節請見 Packaged apps. 

+

App 來源

+

對於 hosted app，application manifest 檔案所在地就是其來源。

+

至於 packaged apps，其來源就是安裝當下決定的應用程式識別，而 Privileged 和 Internal apps 另外可以在 applications manifest 檔案裡用 origin 參數請求使用特定來源。

+

App 安裝

+

App 透過 Apps JavaScript API 安裝:

+ +

App manifest 和 App 來源必須一致，這樣避免了未知的第三方冒用 App；另外為了避免網站被不小心或故意被偽裝成有 app manifest，manifest 檔必須以特定 mime-type，application/x-web-app-manifest+json， 發送。

+

更新

+

更新程序請見更新 apps。

+

權限

+

App 能夠被授予比一般網頁更多的權限。基本上 app 擁有和網頁同等的權限，如果 app 需要更多額外權限，那麼 app 便需要在 manifest 檔裡明白列出需要的額外權限。

+

Manifest 宣告

+

在 manifest 裡，每一個需要的額外權限必須加入供人閱讀的描述說明為何需要此額外權限，例如 app 想要 navigator.geolocation API 使用權限，manifest 裡就必須如此宣告:

+
"permissions": {
+  "geolocation":{
+    "description": "Required for autocompletion in the share screen",
+  }
+},
+
+

這樣 app 便可以如同網頁一般提示使用者來請求地理位置存取權限。更多細節請見 App manifest。

+
+

Note: 目前權限使用目的並不會呈現給使用者看 — 見 bug 823385.

+
+

權限授予

+

當權限需求在 manifest 中宣告後，依據權限不同，可能會直接被同意，但也可能需要在第一次相關 API 被存取時提示使用者徵詢其同意。一般來說會影響到使用者隱私的權限會需要額外徵詢使用者同意，而且這種情況下使用者也有理由知道甚麼權限被請求使用，例如存取通訊錄前會需要徵詢，但存取 TCP 連線則不需要。權限直接同意會經過 Marketplace 安全審核程序以確保安全性。

+

權限駁回

+

使用者可以在任何時候從設定駁回先前授予的權限，但這不包括那些直接同意的權限。

+

Web App Sandbox

+

App 資料獨立

+

每一個 app 都運行在 sandbox 之中，所以所有資料都和其他 app 隔離開來，這涵蓋了 cookie、localStorage、indexedDB 以及網站權限。

+

A diagram showing three Firefox OS apps all open is separate sandboxes, so none of them can affect each other.

+

所以說即使 App A 和 App B 都開啟了指向同一來源 (如 http://www.mozilla.org) 的 {{ htmlelement("iframe") }}，但他們兩者的 cookie 資料還是會不同。結果就是當用  App A 登入 Facebook 帳號，開啟了 App B 前往 Facebook 時，因為 App B 無法存取 App A 的 cookie，所以 App B 還是必須要再執行登入作業，如此一來變確保了 App 之間不互相影響、資料安全。

+

Apps 無法啟動彼此

+

App 不能利用 <iframe> 開啟另一個 App，如果 App A 開啟了一個指向 App B URL 的 iframe，這並不會啟動 App B，相反地這只會前往那個 URL 指向的網頁，任何 App B 的 cookie 都無法被存取，這就和 App B 沒有被安裝的情況一樣。

+

就算是 App A 嘗試開啟透過 packaged 式 App B 的 app:// URL，來將 App B 載入到 <iframe> 裡啟動，也會失敗，而且不論 App B 有沒有被安裝，失敗訊息都會一樣，所以說 App A 也無法推敲 App B 的安裝狀態。

+

當 App A 上層的 frame 前往 App B 所在的 URL，結果依然相同。我們永遠知道是哪個 frame 開啟哪個 app，所以說透過上層 frame 開啟其他 app 就和前述一樣會失敗，App 之間資料絕對獨立、無法被盜取。

+

動機

+

資料獨立的做法有好有壞，壞處是使用者必須每開一個 app 都要登錄一次同一個網站，或者是網站有存放一些資料於本地端，每個 app 都會儲存一份資料，同樣的資料可能被重複儲存，如果資料剛好又不小的話，將會相當佔儲存空間。

+

好處是這是比較安全的做法，app 之間不能透過第三方網站互相影響進而導致未預期的行為，或是一個 App A 移除後，另一個 App B 不會因為依賴 App B 的資料或功能而無法運作。更重要的是，資料獨立確保了惡意 app 難以利用漏洞竊取其他網站的資料。

+

最後資料獨立也確保了 app 無法得知使用者是否有裝甚麼其他 app、其他 app 的資料，保護了使用者隱私。

+

權限 Sandbox

+

如同資料在 snadbox 下是獨立隔離開來的，權限亦然。App A 打開了 http://maps.google.com 網頁，而使用者也准許永遠允許 http://maps.google.com 使用地理位置服務，但這也只限於 App A，改天換 App B 打開 http://maps.google.com 網頁，地理位置服務使用權限還是得再徵詢使用者同意。

+

如同一般網頁，每個來源的權限同樣獨立，App A 取得地理位置服務使用權限，但這不代表所有 App A 開啟的網頁都有權使用地理位置服務，如果說 App A 開啟 http://maps.google.com，http://maps.google.com 照樣需要取得使用者同意才能使用地理位置服務。

+

瀏覽器 API Sandbox

+

對於會開啟大量 URL 的應用程式，如瀏覽器，我們引進了一個 browserContent 旗標來強化安全性，這個 browserContent 讓 app 可以有兩個 sandbox，一個供 app 本身使用，另一個給開啟的網頁使用，例如說:

+

有一個 MyBrowser app 自 https://mybrowser.com 載入，所以程式碼和資源都隸屬於這個網域。

+

當這個 app 建立一個 <iframe mozbrowser>，另一個 sandbox 便會產生，所以說 <iframe mozbrowser> 裡的 cookie、IndexedDB、localStorage 資料都會獨立隔離開來，兩者間不會互相影響。

+

從另一方面來看，如果 MyBrowser app 想要整合 Google Map 的地理位置功能，那麼從一般 <iframe> 裡載入 http://maps.google.com，便可以存取 Google Map 網站的 cookie 資料；但若是從 <iframe mozbrowser> 裡載入的話，便無法取得 Google Map 的 cookie 資料了。

+

假設另一個情況，有一個類似 Yelp、會造訪餐廳網站的 app，這個 app 只要利用 <iframe mozbrowser> 來打開餐廳網站，就可以確保餐廳網站不能含有指回這個 app 的 <iframe> (例如指回 http://yelp.com)，如果有的話，該餐廳網站將只能收到 Yelp 網站的資料，而非此 Yelp app，所以該餐廳網站便無法和 Yelp app 共享資料和權限，進而攻擊 Yelp app。

+

App 安全性總結

+

下表總結各類 Firefox OS App 的格式、安裝、更新特性:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Web App 類型
類型發布權限安裝更新
WebHosted 或 Packaged較不敏感的權限，既使未驗證的網站取得也沒關係。可以從各種來源安裝依據安裝來源和發布機制可以背景更新或透過 marketplace 更新。
PrivilegedPackaged 和 Signed需要驗證和審核才可以取得特殊權限 API。從可信任的 marketplace 安裝從可信任的 marketplace 更新，需要使用者同意更新。
InternalPackaged第三方 app 無法存取高度敏感 API裝置預裝跟隨系統層級類別更新。
+
+

Note: 版本 1.0 的 Firefox OS，privileged app 只能從 Mozilla Marketplace 安裝，至於其他多種安全 marketplace 的支援尚未底定。

+
+

 

diff --git a/files/zh-tw/archive/b2g_os/security/index.html b/files/zh-tw/archive/b2g_os/security/index.html new file mode 100644 index 0000000000..468bab0472 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/security/index.html @@ -0,0 +1,70 @@ +--- +title: Firefox OS security +slug: Archive/B2G_OS/Security +tags: + - B2G + - Firefox OS + - Mobile + - NeedsTranslation + - Security + - TopicStub +translation_of: Archive/B2G_OS/Security +--- +

The following articles cover security-related topics about Firefox OS. This includes overall security features as well as application security and how the install process is kept secure.

+ + + + + + + +
+

Firefox OS security documentation

+
+
+ The Firefox OS security model
+
+ An overview of the Firefox OS security model.
+
+ System security
+
+ Details of security controls built-in to the FirefoxOS runtime.
+
+ Application security in Firefox OS
+
+ An overview of how applications are made secure on Firefox OS.
+
+ Securely installing and updating applications
+
+ How Firefox OS securely installs and updates applications.
+
+ Software permissions in Firefox OS
+
+ A guide to what types of software have permission to perform various tasks on Firefox OS.
+
+  Debugging and security testing with Firefox OS
+
+ This guide shows you the basic security testing steps, from opening a remote JavaScript debugger to setting up an intercepting HTTP(S) proxy against a desktop version of Firefox OS
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+
    +
  • Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +
+

 

+
+
+ Firefox OS
diff --git a/files/zh-tw/archive/b2g_os/security/security_model/index.html b/files/zh-tw/archive/b2g_os/security/security_model/index.html new file mode 100644 index 0000000000..d71380833f --- /dev/null +++ b/files/zh-tw/archive/b2g_os/security/security_model/index.html @@ -0,0 +1,299 @@ +--- +title: Firefox OS 安全性概述 +slug: Archive/B2G_OS/Security/Security_model +translation_of: Archive/B2G_OS/Security/Security_model +--- +

此篇文章將概述 Firefox OS 的安全架構，可阻絕 App、平台、資料所挾帶的惡意威脅，進而保護行動裝置。Mozilla 建構了完整且多層次的安全模式，為行動電話提供絕佳的防護效果。

+

 

+

平台安全性

+

Firefox OS 平台具備多層次安全模式，可將各層次的開發風險降至最低。第一線的保護機制更整合了深度防禦 (Defense-in-depth) 策略，進而達到完整的防護機制。

+

 

+

安全架構

+

Firefox OS 將銜接網路架構的應用與其底層硬體，而其整合式技術囊括了下列層級：

+

+

行動裝置 (Mobile device) 即是執行 Firefox OS 的智慧型手機。Gonk 則包含 Linux kernel、韌體、系統函式庫、裝置驅動程式。Gecko 屬於應用程式的執行時間層，為 App提供執行框架，另建構 Web API 以存取行動裝置的功能。Gaia 則是網頁 App (包含 HTML5、CSS、JavaScript、圖片、媒體等) 套件，可隨時改善使用者經驗。

+

Gecko 扮演守門人的角色，可強制執行安全策略，避免行動裝置遭到誤用；並可作為網頁 App (位於 Gaia) 之間的中介層 (Intermediary)。Gonk 則可將行動電話底層的硬體功能，直接提供予 Gecko 使用。只有在 Gecko 放行存取請求時，網頁 App 才能透過 Web API 而存取行動電話的功能；而不會有直接存取或「走後門」的情況發生。Gecko 將強制執行許可，並阻擋未經授權的請求。

+

 

+

佈署安全系統

+

手機上的 Firefox OS 系統映像檔 (System image) 是由受信任的來源 (一般為該裝置的 OEM 廠商) 所提供，這些受信任的系統映像檔提供者負責發布檔案的組建、建置、測試以及數位簽章作業。

+

整個技術層均需經過安全驗證。由Linux 的存取控制清單 (ACL) 執行檔案系統的權限控制。系統 App 則安裝於唯讀 (僅於更新期間才暫時轉為可讀寫) 媒體之中；若是使用者相關內容的區域，則可能為讀寫性質。裝置硬體中的不同元件，均已內建了業界標準的防護機制。舉例來說，晶片製造商會加入安全防護技巧來提高安全性，我們同樣強化了核心平台 (Gecko 與 Gonk)，以阻絕潛在的可能威脅，亦提升了相關編譯器的功能。可參閱執行期間的安全性進一步了解細節。

+

 

+

更新安全系統

+

Firefox OS 平台的後續升級與修正，將透過安全的 Mozilla 程序完成佈署，並確保行動電話上的系統映像保有其完整性。同樣由已知且受信任的來源 (一般為該裝置的 OEM 廠商) 提供更新作業，並負責更新封裝的組裝、建構、測試、數位簽章等作業。

+

系統更新可能牽涉 Firefox OS 部分或所有的層級。若更新作業必須變更 Gonk，則安裝作業將使用 FOTA (Firmware Over the Air)。FOTA 更新作業亦可能包含 Firefox OS 的其他層級，如 Gaia、Gecko、安全更新、裝置管理 (FOTA/韌體/驅動程式)、設定管理 (Firefox OS 的設定)，還有更多修正檔。

+

若更新作業並未牽涉 Gonk，則僅需 Mozilla 系統更新公用程式 (System Update Utility) 即可完成。Firefox OS 所使用之更新架構、程序、Mozilla ARchive (MAR) 格式 (用於更新封裝)，與 Firefox 桌面版產品完全相同。可參閱 https://wiki.mozilla.org/Software_Update 以進一步了解。

+

而行動電話所內建的更新服務 (亦可能由 OEM 廠商提供)，將定期檢查是否有系統更新。一旦發佈系統封裝，更新服務隨即將偵測到該封裝，並提醒使用者完成安裝作業。在行動裝置安裝更新檔案之前，另將檢查裝置的儲存容量是否足夠，且將驗證下列分配空間：

+ +

更新期間應注意下列要點：

+ +

請確實完成相關檢查，讓行動電話確實完成更新作業。

+

 

+

App 的安全性

+

Firefox OS 使用深度防禦 (Defense-in-depth) 策略，可保護行動電話免受惡意應用程式的攻擊。此策略必須佈署多種機制，如根據 App 信任模式 (Trust model) 所建構的隱式許可 (Implicit permission) 層級；執行期間的沙箱執行作業 (Sandboxed execution)；僅限 API 存取行動電話的底層硬體；健全的許可模型 (Permission model)；安全的安裝與更新程序。若要進一步了解相關技術，可參閱應用程式安全性。

+

在 Firefox OS 中的所有應用程式，均為 Web App ─ 即以 HTML5、JavaScript、CSS、媒體、其他開放式 Web 技術 (可於瀏覽器中執行的網頁，並不屬於本文所提的 Web App) 所撰寫的程式。由於這些 Web App 並非二進制 ─ 即所謂的「原生 (Native)」─ 應用，因此將由 Web API居中嚴格協調所有的系統存取作業。甚至檔案系統存取都只能透過 Web API 與後端的 SQLite 資料庫， App 不能直接存取 SD 記憶卡上的檔案。

+

Firefox OS 可限制 App 所能存取/使用的資源規模，同時又可針對多樣的 App 而支援不同的許可層級。Mozilla 嚴格控制各類 App 所能存取的 API。舉例來說，僅有 Certified App (隨手機出貨) 可存取 Telephony API。另外，Dialer App 必須存取 Telephony API 才能撥打電話，而非所有 Certified App 均可存取此 API。如此可避免安裝了任何第三方 App 之後，撥打出國際/長途電話而讓帳單金額暴增。但針對其他 OEM App，仍可選擇是否給予 Telephony API 存取權。舉例來說，電信服務商可提供系統管理應用程式，讓客戶能管理自己的帳戶，甚至能直接以電話送出電信服務帳單或支援辦公室作業。

+

 

+

受信任 (Trusted) 與未信任 (Untrusted) 的 App

+

Firefox OS 將 App 分為下列類型：

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

類型

+ 		+

受信任層級

+ 		+

說明

+
+

Certified

+ 		+

受高度信任

+ 		+

這類系統 App 經過電信服務商或 OEM (起因於裝置毀損或重要功能所產生的風險) 所核可。但僅限系統 App 與相關服務，並無第三方 App。
+ 此信任層級僅用於極少部分的重要 App，例如 SMS、藍牙、相機、電話、系統時鐘、預設的電話播號鍵盤 (為了可確實用於緊急電話)。

+
+

Privileged

+ 		+

受信任

+ 		+

由授權的商城審視、核可、數位簽章過的第三方 App。

+
+

Web (與其他 App)

+ 		+

未受信任

+ 		+

屬於一般網頁內容。包含安裝式 App (儲存於行動電話中) 與托管式 (Hosted，儲存於遠端，僅有 manifest 檔案儲存於行動裝置中) App。另外也可以從 Marketplace 取得托管式 App 的  manifest 檔案。

+
+

App 的受信任層級，某種程度上將決定其所能取用的行動電話功能。

+ +

某些作業 (如網路存取) 均先假設為所有 App 的隱式許可。一般來說，越是高敏感性的作業 (如撥打電話號碼或取得通訊錄內容)，就僅有更高信任度的 App 才能執行。

+

最小權限原則 (Principle of Least Permissions)

+

針對 Web App，Firefox OS 安全架構則以《最小權限原則 (principle of least permissions)》為架構：先給予最低權限，僅在必要或合理的情況下，才選擇性的提高權限。依預設值，任一 App 均具備最低權限，以因應未受信任的網頁內容。如果 App 所呼叫的 Web API 需要額外權限，則其 manifest 檔案 (本文稍後將敘述) 必須先列舉這些額外權限。而僅在 App 的 manifest 檔案明確要求 App 授權時，Gecko 才會給予 Web API 的存取權。此外，只有在 Web App 的類型 (即上述的 Certified 或 Trusted 或 Web 分類) 符合其存取層級，Gecko 才會給予必要的授權。

+

Marketplace 對 Privileged App 的審核程序

+

若要達到 Privileged App，則 App 開發/供應商必須將之提交予經過授權的 Marketplace。而 Marketplace 隨即開始嚴格的程式碼審核程序：檢視其完整性與穩定性、審查其索取的授權是否符合其載明的用途、確認其隱式許可是否使用合宜、審核「Privileged App 的內容」與「未授權的外部內容」之間的介面，是否具備合適的緩衝，以避免權限提升 (Elevation of privilege) 的影響。Marketplace 另需負責確保 Web App 不會對其給予的權限進行惡意動作。

+

在 App 通過審核之後即許可使用，且 Marketplace 亦將以數位方式簽署其 manifest 檔案，以供行動裝置的使用者下載之。一旦 Marketplace 遭駭，數位簽章可確保駭客無法將任意內容或惡意程式碼，安裝於使用者的行動電話上。也基於此審查程序，Firefox OS 從 Marketplace 取得的 Privileged App，其可信任度亦高於一般的 (未受信任的) 網頁內容。

+

 

+

封裝式 (Packaged) 與托管式 (Hosted) App

+

Firefox OS 可用封裝式 (儲存於行動電話中) 或托管式 (儲存於遠端伺服器中，僅有 manifest 檔案儲存於行動電話中) App。而此 2 種 App 的安全管理方式亦有所不同。封裝式與托管式 App 同可作為應用程式的封閉沙箱，本文稍後將說明。

+

封裝式 (Packaged) App

+

封裝式 App 是以 ZIP 壓縮檔所構成，內含應用程式的相關資源 (HTML5、CSS、JavaScript、影像、媒體)，另以 manifest 檔案提供上述資源的清單，與其對應的 雜湊值 (Hash)。由於 Certified 與 Privileged App 的 manifest 檔案均需完成數位簽章，因此Certified/Privileged App 必為封裝式 App。只要使用者取得封裝式 App，就會將 ZIP 檔案下載至行動電話中，另從 ZIP 檔案內的已知位置讀取 manifest 檔案。系統將在安裝過程中驗證 App 的資源，其他則儲存於本端的封裝內。執行期間將請求所有的顯式許可 (Explicit permission)、顯示使用者 App 的資料儲存目標，最後依預設值完成保存。

+

若要清楚指明封裝式 App 中的資源，則 URL 應以 App 開頭並使用下列格式：

+
+

app://identifier/path_within_zipfile/file.html

+
+

這裡的「app://」代表 ZIP 檔案的掛載點 (Mount point)。於行動電話上安裝 App 時，隨即產生「identifier」作為 UUID。如此可確保以 :app 的 URL 指向了特定資源，且已納入於 ZIP 檔案中。而 app: 中的路徑為相對路徑，因此可於 ZIP 檔案中允許資源的相對鏈結。

+

封裝式 App 主要用於 Certified 與 Privileged App，不過一般的 Web App 亦可作為封裝式。但這些 Web App 不會因為封裝格式，就自動提高其信任度或存取權限。

+

托管式 (Hosted) App

+

托管式 App 均儲存於網頁伺服器上，或需透過 HTTP 載入。僅有其 manifest 檔案儲存於行動電話中；其他所有檔案均儲存於遠端。僅 Privileged 與 Certified App 才能使用特定 API，以因應數位簽章作業而必須將 App 封裝。因此，即使 Web API 作業需要 Privileged/Certified App 的狀態，托管式 App 亦不需存取任何 Web API 作業。

+

從安全性的觀點來說，托管式 App 的作業方式比較像一般網頁。在該網頁伺服器上，必須以寫死 (Hard-coded) 的完整 URL 指向 App 根目錄中的起始頁面，才能載入托管式 App。一旦載入托管式 App 之後，行動電話將根據網頁瀏覽時的 URL，跟著連至相同頁面。

+

 

+

App 的 Manifest 檔案

+

Open Web App 的 manifest 檔案，將提供瀏覽器與 App 互動時的必要資訊。而 manifest 即為 JSON 檔案，至少均具備 App 的名稱與描述。可參閱 App 的 manifest 檔案常見問題以進一步了解。

+

Manifest 範例

+

下列程式碼則具備基礎設定的 manifest 範例：

+ + + + + + + +
+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+

10

+

11

+

12

+

13

+ 		+

{

+

  "name": "My App",

+

  "description": "My elevator pitch goes here",

+

  "launch_path": "/",

+

  "icons": {

+

    "128": "/img/icon-128.png"

+

  },

+

  "developer": {

+

    "name": "Your name or organization",

+

    "url": "http://your-homepage-here.org"

+

  },

+

  "default_locale": "en"

+

}

+
+

Manifest 檔案的安全性設定

+

manifest 檔案亦可具備其他設定，如下列的安全性設定：

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

欄位

+ 		+

說明

+
+

permissions

+ 		+

App 的必要許可。任何 App 需列出所要使用的 Web API，以取得使用者的許可。Privileged/Certified App 可識別大多數的許可，但托管式 App 不適用。API 必具備的屬性：

+
    +
  • description ─ 在請求使用此 API 時，此字串將指定其背後的目的地。必填。
    • +
  • access ─ 此字串將指定許可所需的存取類型。安裝時即給予隱式許可 (Implicit permission)。僅數種 API  為必填欄位。僅接受：read、readwrite、readcreate、createonly 等數值。
    • +
+
+

installs_allowed_from

+ 		+

App 的來源。而構成來源的陣列 (scheme+unique hostname) 則可觸發此 App 的安裝作業。另可讓 App 廠商限制僅授權過的 Marketplace (如 https://marketplace.firefox.com/) 才可安裝 App。

+
+

csp

+ 		+

內容安全政策 (Content Security Policy)，將套用至 App 所載入的所有頁面。可強化 App 而避免遭惡意插入任何程式碼。若未指定 CSP，則 Privileged 與 Certified App 均已預設了系統定義值，其語法為：
+ https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp

+

另請注意，此指令僅能增加所套用的 CSP。舉例來說，此指令並無法減少 Privileged App 所套用的 CSP。

+
+

type

+ 		+

App 的類型，即 Web、Privileged、Certified 等類型。

+
+

Firefox OS 要求 manifest 檔案必須為特定的 mime-type 格式 ("application/x-web-app-manifest+json")，而且必須與該 App 為相同來源的完整主機名稱 (即來源)。若「App 的 manifest 檔案」與「要求安裝 App 的頁面」兩者的來源相同，則將放寬此限制。此機制可確保不能偽裝網站並托管 App 的 manifest 檔案。

+

 

+

隔離式 (Sandboxed) 執行作業

+

本章節將說明 App 與執行作業的沙箱隔離區 (Sandbox)。

+

App 隔離區

+

Firefox OS 的安全架構，即是將隔離區作為深度防禦 (Defense-in-depth，DID) 策略，以減少風險並保護資料、平台、行動電話。在執行期間，隔離區可為 App 產生邊界與限制。各個 App 僅於自己的工作空間 (Working space) 內執行，另僅經過授權可存取的 Web API 與資料，才能存取；工作空間相關的資訊 (IndexedDB 資料庫、Cookies、離線儲存等) 亦然。請參閱 https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model 以進一步了解。

+

下圖則簡略說明了安全模型：

+

+

在隔離各個 App 之後，所產生的影響亦僅限於其工作空間之內，而不會受到工作空間之外的干擾 (如其他 App 或資料)。

+

執行作業隔離區

+

B2G (Gecko) 在一個高授權度的系統程序 (可存取行動電話中的硬體功能) 中執行。在執行期間，各個執行環境裡的 App 皆是 B2G 系統程序的子程序。而各個子程序又具備嚴格的 OS 授權。舉例來說，子程序並無法直接讀寫檔案系統中的任意檔案。必須由 Web API 提供相關存取權限；且該權限又由 B2G 母程序所居中協調。在子程序要求授權過的 API 時，母程序將確認子程序具備必要的許可，以執行相關動作。

+

App 僅能透過 B2G 核心程序 (非其他程序或 App) 而相互溝通。App 無法於 B2G 之外獨立執行；各 App 亦無法互相開放。App 之間僅能間接「溝通」─ 例如接收器 (Listener) 程序偵測到其他程序所產生的事件，且必須由 B2G 程序居中協調。

+

僅透過 Web API 才能存取硬體

+

Web App 若要存取行動電話的功能，唯一管道只有以 Gecko 所建構的 Firefox OS Web API 。Gecko 是行動裝置與底層服務的單一出口，因此必須讓 Web API 進行呼叫作業，才能存取裝置的硬體功能。絕對沒有「原生 (Native)」的 API 或其他途徑可繞過此機制，而直接存取硬體或滲透至初階的軟體層。

+

 

+

安全架構

+

下圖則為安全架構的元件：

+

+ +

 

+

許可的管理與強化

+

針對 Web App 所需的許可 (Permission)，Firefox OS 安全機制將進一步驗證並強化。
+ 僅當內容 (Content) 請求特殊許可，或當內容具備 manifest 所要求的適當許可時，系統才會發出特定許可至 App。若需要使用者進一步的授權，則某些許可亦將提出請求 (例如 App 要存取使用者目前的位置)。與傳統「角色為中心 (Role-centric)」的方式 (各個獨立角色將獲得一系列的許可)相較，這種「應用為中心 (app-centric)」的架構更能嚴密控管許可。

+

現有的 Web API 集合了一系列動作 (Action) 與接收器 (Listener)。各個 Web API 則具備必須的許可層級。每次只要呼叫 Web API，則 Gecko 檢查許可 (角色查找) 的基準為：

+ +

若該請求並不符合許可的準則，則 Gecko 隨即拒絕該請求。舉例來說，只要是受信任 App 所保留的 Web API，未受信任的 App 均無法執行。

+

 

+

要求使用者給予許可

+

除了與 Web App 隱性關連 (Implicitly associated) 的許可之外，在執行特定作業之前需要使用者給予顯式許可。針對這些作業，Web App 必須在 manifest 檔案中表示索取許可的理由 (Justification)。這種「資料使用意圖 (Data usage intention)」，可讓使用者在給予許可之後，知道 Web App 處理資料的方式，亦將了解可能的風險，進而能做出決定並控管自己的資料。

+

 

+

安全的 App 更新程序

+

+

針對 Privileged app 的升級與修正，開發/供應商必須將更新封裝提交至授權過的 Marketplace，以供 Marketplace 進一步審查。而在核准之後，隨即完成數位簽章並提供予使用者。在搭載 Firefox OS 的裝置上，亦可透過 App 更新公用程式 (暫譯 App Update Utility) 定期檢查 App 是否有可用的更新。若發現可用的更新，系統隨即會詢問使用者是否安裝。在行動裝置安裝更新檔案之前，必將驗證封裝的：

+ +

透過適當且嚴格的檢查，可確保行動電話已正確套用了更新。
+ 在開始更新程序之前，必須先下載完整的更新封裝至特定且安全的位置。安裝作業並不會覆寫任何使用者資料。

+

 

+

裝置安全性 (硬體)

+

行動裝置硬體的安全機制，一般均由 OEM 廠商所決定。舉例來說，OEM 廠商可能提供 SIM (Subscriber Identity Module) 卡的鎖定機制，另搭配 PUK (PIN Unlock Key) 密碼，以用於輸入錯誤 PIN 而遭鎖定的 SIM 卡。這部份需聯絡 OEM 廠商以了解細節。Firefox OS 則可讓使用者設定密碼與待機畫面，將於稍後說明。

+

 

+

資料安全性

+

使用者可將個人資料儲存於手機中，並可設定其隱私性，包含聯絡資訊、金融資訊 (銀行與信用卡細節)、密碼、行事曆等。Firefox OS 則針對惡意 App (竊取、挖掘、破壞私密資料) 而設計了防護機制。

+

 

+

密碼與待機畫面

+

Firefox OS 可供使用者設定行動電話的密碼，往後必須輸入正確密碼才能使用該行動電話。Firefox OS 另提供待機畫面的功能。只要設定特定時間內未使用行動電話，隨即顯示待機畫面。此時必須輸入密碼授權才能繼續使用手機。

+

 

+

隔離式 (Sandboxed) 資料

+

如之前所述，執行期間的 App 均進入隔離狀態。如此可避免 App 相互存取其內的資料；除非該筆資料已設為共享資料，且其他 App 擁有夠高的許可層級可存取之。

+

 

+

序列化 (Serialized) 資料

+

Web App 並無法直接讀寫檔案系統。相反的，僅能透過 Web API 而存取儲存媒體。Web API 另將透過 SQLite 資料庫居中協調，才能進一步讀取、寫入儲存媒體。不會直接以 I/O 進行存取作業。各個 App 均擁有自己的資料儲存媒體，將經過資料庫而序列化至磁碟中。

+

 

+

資料銷毀

+

一旦使用者取消安裝 App，則將刪除該 App 所有的相關資料，如 cookies、localStorage、Indexeddb 等。

+

 

+

隱私性

+

根據隱私權原則 (https://www.mozilla.org/privacy/)，Mozilla 致力保護使用者隱私與資料，同時可參閱 Mozilla Manifesto (https://www.mozilla.org/about/manifesto.html)。而 Mozilla 的 Firefox Privacy Policy 則說明 Mozilla 將如何蒐集、利用 Mozilla Firefox 瀏覽器的使用者資訊，包含 Firefox 所傳送至網頁的資料、Mozilla 的資料保護方式、Mozilla 資料實務情況等。若要進一步了解相關細節，可參閱：

+ +

在擬定 Firefox OS 的原則時，均將使用者資料的控制權交付給使用者本身。而使用者必須自己決定個人資訊的運用方法。Firefox OS 將提供下列功能：

+ diff --git a/files/zh-tw/archive/b2g_os/security/system_security/index.html b/files/zh-tw/archive/b2g_os/security/system_security/index.html new file mode 100644 index 0000000000..edb0e64697 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/security/system_security/index.html @@ -0,0 +1,376 @@ +--- +title: 系統安全 +slug: Archive/B2G_OS/Security/System_security +translation_of: Archive/B2G_OS/Security/System_security +--- +
+

本文旨在提供 Firefox OS 系統安全模型概觀，說明系統是如何保持安全性與實施權限管理。

+
+

名詞解釋

+

在開始之前，有幾個名詞需要了解一下。

+
+
+ 網頁應用程式 (Web application)
+
+ 網頁應用程式 (web application, web app, open web app, moz app, application) 是運行在 Firefox OS (或其他支援平台)、用 HTML, JavaScript, 以及其他開源網頁技術所寫成的應用程式。所有 B2G 上使用者使用的應用程式都是網頁應用程式，例如撥號程式是一個 web app，但顯示在瀏覽中的網頁並不屬於網頁應用程式的範疇。
+
+ b2g 程序 (b2g process)
+
+ Firefox OS b2g process 通常會被叫做 "b2g" 或 "Gecko"。b2g 實際上是一個高權限 (root 權限) 應用程式，控制了所有 web app 對資源和硬體的存取。
+
+ 內容程序 (Content process)
+
+ b2g 產生的子程序，會和 b2g 溝通，代表了 web app。它擁有的權限較低 (一般使用者權限；受限的作業系統資源存取)，透過 inter-process communication (IPC) 和 OS 核心溝通。
+
+ IPDL
+
+ Intercommunication Protocol Definition Language, 請參照 IPDL.
+
+ AOSP
+
+ Android Open Source Project.
+
+ System call
+
+ 一個介於使用者空間 (user space) 和核心 (kernel) 的溝通介面，使用者空間只能透過這個介面和核心溝通。
+
+ DAC, MAC
+
+ 使用者可設定的自主存取控制 (Discretionary Access Control) 和 系統強制的強制存取控制 (Mandatory Access Control)。
+
+ FOTA
+
+ 自動韌體更新機制 (Firmware Over The Air)，透過無線網路"空中"更新韌體。
+
+ MSU (Mozilla System Updater), MAR (Mozilla ARchive)
+
+ 和 Firefox 桌面產品一樣的更新機制和檔案格式。
+
+

Firefox 作業系統安全模型目標與範疇

+

Firefox OS 安全模型的設計目標：

+ +

下面將說明每一個目標以及 Firefox OS 如何達成個目標。

+

權限強制

+

應用程式安全模型描述了使用者如何直接或透過受信任第三方來授予應用程式權限，這些強制加諸於內容程序 (content process) 的權限是透過限制資源存取必須經過和核心程序 (core process) 之間的 IPC call。

+ +

內容程序初始化

+

所有的 web app 都運行在低權限、分開的內容程序。當 web app 載入到一個特別的 {{HTMLElement("iframe")}} 型態: <iframe mozapp> 時 b2g 程序會啟動內容程序，這樣會將 web app 和其他內容隔離開來，而且和 web app 的 manifest 高度相關 (請參照 應用程式安全模型)，內容程序會在一個稱為 "out of process" (OOP) 的容器裡啟動，這個 OOP 即是 plugin-container 程序，並且和桌面 Firefox 所用的 plugin-container 程序有著相似的原始碼。

+

風險

+ +

實作

+

在 b2g 程序裡啟動

+

順序如下：

+
    +
  1. fork()
    2. +
  2. setuid(new, different, unused user id|nobody) (無特權的使用者)
    3. +
  3. chrdir('/')
    4. +
  4. execve('plugin-container')
    5. +
+

這邊的啟動順序確保 OOP 程序運行在隔離的記憶體空間，同時只是低權限使用者，無法提高到 b2g 的高權限。

+

File descriptor (檔案描述子) 管理

+

File descriptors 的管理方法是白名單；一份受允許的 file descriptors (FDs) 清單儲存在 mFileMap 物件，在呼叫 fork() 後 (FDs 複製前) 和呼叫 execve()前 (新 web app 開始運行)，LaunchApp() 函數會強制關閉不在白名單上的 FD。

+

不同於傳統的黑名單作法 (close-on-exec flag: CLOEXEC)，這種做法確保不會有多餘的開啟 FD，比較可靠。

+

Content process sandboxing (沙箱，低權限內容程序)

+

風險

+ +

下表為 sandbox 開啟下可能的威脅列表，附帶前述的可能風險。

+
+

範疇: 當攻擊者以內容程序執行意外執行碼時，會出現下面的威脅，也就是說，攻擊者發現了 Gecko 的安全漏洞。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
威脅潛在衝擊可能性因子建議對應作法
+

惡意內容程序利用核心安全漏洞

+

"2 steps attack".

+ 		嚴重:整個裝置都將受到控制低: 內容程序只有有限的方法呼叫系統。 +
    +
  • 減少允許的系統呼叫數量到最低需要量。
    • +
  • 用預防性修正檔保護核心，例如 PaX (Protection Against eXecution).
    • +
+
+

提升到父程序權限

+

惡意內容程序利用和父程序之間的 IPDL 安全漏洞

+

"2 steps attack".

+ 		高: 許多敏感的系統呼叫都可以被執行 (資料損失、相機存取、網路存取等等)中: 父程序大量的程式碼代表大範圍的可能攻擊點。少量的 IPDL 資料消毒，例如傳送指標。 +
    +
  • 以非 root / 非特權使用者執行父程序
    • +
  • 盡可能以 sandbox 方法執行父程序
    • +
+
+

惡意內容程序利用父程序攻擊核心安全漏洞

+

"3 steps attack".

+ 		嚴重:整個裝置都將受到控制 +

低: 需要父程序有可以透過 IPDL 攻擊的 bug。

+

需要核心和父程序之間的系統呼叫可利用的漏洞 (相較內容程序，父程序有更多可行的系統呼叫)

+ 		+
    +
  • 以非 root / 非特權使用者執行父程序
    • +
  • 盡可能以 sandbox 方法執行父程序
    • +
  • 用預防性修正檔保護核心，例如 PaX (Protection Against eXecution)
    • +
+
+

惡意內容程序、父程序、web app 利用硬體裝置的 bug

+

"1 and 2 steps attack".

+ 		+

高: 可以執行特別權限的作業 (如撥號、傳 SMS 簡訊等)

+

嚴重:整個裝置都將受到控制或執行硬體程式碼。

+ 		低: 需要硬體 bug 以及 IPDL 或系統呼叫授予的硬體溝通管道 +
    +
  • 對硬體裝置實施模糊測試 (Fuzz testing)
    • +
  • 利用核心或父程序 API 修正檔避開問題 (關閉不安全的硬體功能、消毒資料等等)
    • +
+
+
+

Note:

+

* PaX (Protection Against eXecution) 是一個由 GrSecurity (docs) 所發佈的核心修正檔，實作了 PaX 以及額外的保護措施，如 UDEREF 和 SMAP。

+

* 未列出的安全性漏洞代表已被 snadbox 解決掉了。

+
+

實作內容

+

Process Model Sandbox

+
+

Note: 內容程序 (Content Processes) 就是運行中的 web app，也會被限制在 sandbox 環境。

+
+

Gecko APIs 實作

+

內容程序可見的 APIs 絕不應該直接存取檔案系統，取而代的是應該透過 IPDL，所以說會需要存取資源的 API 都需要在父程序中有一個對應的元件代表 API 存取資源。

+

實作相關部分時要特別小心，所有送到父程序的輸入都應該要先消毒，不可以相信內容程序以及來自內容程序的 IPDL 訊息。

+
+

Warning: 任何內容程序取得的受信任授權都可以被用來繞過 sandbox 所加諸的限制。

+
+

何謂 seccomp

+

Seccomp 代表 secure computing mode (安全電腦模式)，目前有兩種版本：

+
    +
  1. +

    seccomp, 可見於 Linux kernel 2.6.12 以上版本:

    +
      +
    • +

      開啟 seccomp 會將程序的系統呼叫 (System call) 限制在 read, write, sigreturn, 和 exit

      +
      • +
    • +

      使用 prctl() system call

      +
      • +
    • +

      可以在指定地方、程序初始化後啟動

      +
      • +
    +
    2. +
  2. +

    seccomp-bpf, 又稱為 seccomp mode filter 或 mode 2, 可見於 Linux kernel 3.5 以上版本：

    +
      +
    • +

      如同 seccomp，但多了 BPF 過濾系統呼叫

      +
      • +
    • +

      可以使用系統呼叫白名單和啟動時傳入參數，而非單單預先寫死的作法

      +
      • +
    • +

      更有彈性，可以有"較多自由的 sandbox"，對限制性較低的 sandbox 來說很有用，而且也可以移轉到限制性較高的 sandbox

      +
      • +
    • +

      多了一個安全性旗幟避免程序和子程序推翻既有權限限制

      +
      • +
    +
    3. +
+
+

Note: 基於 seccomp-bpf 更有彈性，所以我們決定採用，並且替版本低於3.5 的 kernel (涵蓋了目前大部分的 Android kernel)提供向下相容移植。目前已經有不會造成衝突、可供使用的移植包 (請見 bug 790923).

+
+

Seccomp-bpf 效能

+

seccomp-bpf 會對每一次系統呼叫造成效能負擔，目前沒有一定的效能標竿準則，但我們預估大約最高 1% 的系統呼叫負擔會產生。

+

由於我們的程序模型減少許多系統呼叫，所以實際上我們預估效能負擔將會趨近於無。

+

不過因實作細節而異， IPDL 呼叫卻可能造成效能負擔以及增加延遲，建議對於資源需求密集的 API，如 OpenGL 呼叫，可以看一下 Chromium的實作細節。和 seccomp-bpf 一樣，我們能夠最少化 IPDL 呼叫次數來最小化效能負擔。

+

實作內容

+

seccomp 在 Gecko 以 --enable-content-sandbox 開啟。.

+

預設上系統呼叫拒絕資訊不會被回報，我們可以透過 --enable-content-sandbox-reporter 打開回報機制。

+

程式碼放在 gecko/security/sandbox，白名單放在 gecko/security/sandbox/seccomp_filter.h。

+

檔案系統安全強化

+

風險

+ +

實作內容

+

原則上只有使用者內容區域可以讀寫 (除非 OS 未來要求新的讀寫區域)，而且一定要包含 nodev、nosuid 和 noexec 選項。標準檔案系統掛載點限制如下：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
掛載點檔案系統選項
/rootfsread-only
/devtmpfsread-write, nosuid, noexec, mode=0755
/dev/ptsptsfsread-write, nosuid, noexec, mode=0600
/procprocread-write, nosuid, nodev, noexec
/syssysfsread-write, nosuid, nodev, noexec
/cacheyaffs2 or ext4read-write, nosuid, nodev, noexec
/efsyaffs2 or ext4read-write, nosuid, nodev, noexec
/systemext4read-only, nodev
/dataext4read-write, nosuid, nodev, noexec
/mnt/sdcardext4 or vfatread-write, nosuid, nodev, noexec, uid=1000, fmask=0702, dmask=0702
/acctcgroupread-write, nosuid, nodev, noexec
/dev/cpuctlcgroupread-write, nosuid, nodev, noexec
+
+

Note: 實際的掛載點可能有所變更

+
+

Linux DAC

+

Linux DAC represents 是一個有名的 Linux 檔案系統權限模型。

+
+

Note: 這是傳統的 user/group/others 權限模型，而非 Linux POSIX 1.e ACLs.

+
+ +

安全系統更新

+

風險

+ +

實作內容

+

Firefox OS 的更新機制使用安全的 Mozilla 程序，更新檔是由受信任，通常是 OEM 廠商，組建、測試、簽署數位簽章。

+

FOTA (Firmware over the air) 更新

+

系統更新可能涵蓋全部或部分 Firefox OS，如果更新涵蓋到 Gonk，那麼 FOTA (Firmware Over the Air) 安裝程序會被採用。FOTA 也可涵蓋到 OS 其他部分，例如裝置管理 (FOTA, firmware / drivers)、設定管理 (Firefox OS settings)、安全更新、Gaia、Gecko 等等。

+

MSU/MAR 更新

+

不牽涉到 Gonk 的更新可以透過 Mozilla 系統更新工具。Firefox OS 使用和桌面 FIrefox 一樣的更新架構、程序 Mozilla ARchive (MAR) 格式 (用於更新包)。

+

更新服務

+
+

Note: 更新服務能由 OEM 廠商提供。

+
+

手機內建的更新系統會定期檢查更新，一但發現新更新，會提示使用者安裝更新，另外安裝前也會檢查手機儲存空間以及驗證發行者身分：

+ +

下列安全性作法會用在更新程序：

+ +

縝密的更新檢查確保正常地安裝更新。

+
+

Note: 更多有關更新資訊，請見 Creating and applying Firefox OS update packages.

+
+

 

diff --git a/files/zh-tw/archive/b2g_os/simulator/index.html b/files/zh-tw/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..3b5677a518 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/simulator/index.html @@ -0,0 +1,90 @@ +--- +title: Firefox OS 模擬器 +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+

本文將針對 Firefox OS 1.2 或更高版本，說明 Firefox OS 模擬器 (Firefox OS Simulator) 相關使用方式。如果開發者目前正開發 Firefox OS 1.1 的 App，則請參閱 Firefox OS 1.1 Simulator 的相關文章。

+
+ +

Firefox OS 模擬器可於桌機中模擬 Firefox OS 裝置。開發者不用真的弄到實際設備就能夠測試 App 並進行除錯。模擬器會在視窗中以 Firefox OS 裝置的實際尺寸執行，亦包含 Firefox OS 使用者介面與已內建的 App，進而模擬多樣的 Firefox OS 裝置 API。

+ +

Firefox OS 模擬器是以 Firefox 附加元件的格式發佈，可下載並安裝於 Firefox 瀏覽器之上，接著可透過應用程式管理員 (App Manager) 來執行模擬器、將 App 送入模擬器、搭配其他開發者工具。

+ +

安裝

+ +

直接點擊下方按鈕即可安裝模擬器。現有多個版本可供安裝。我們也建議開發者能安裝所有版本，以達最佳開發靈活度。

+ +

安裝 Firefox OS Simulator

+ +

另請參閱《應用程式管理員》中的說明來啟動模擬器。一旦模擬器開始執行，開發者即可將 App 送入應用程式管理員進行除錯；就如同使用實際裝置一樣。

+ +
+

注意：模擬器 (1.2 與 1.3 版) 目前正回報 1 組錯誤的 Gecko user agent 字串：請參閱 {{ Bug("964598") }} 進一步了解。

+
+ +

模擬器的使用者介面 (UI)

+ +

模擬器將另外顯示獨立的視窗，且模擬畫面則為 320x480 像素。若要模擬觸控事件，則可按下滑鼠按鈕不放並拖曳。只要在主畫面上按下滑鼠不放並從右向左拖曳，即可看到已內建的 App，還有開發者剛送入的 App：

+ +

+ +

在模擬器視窗底部的工具列共有 2 個按鈕：

+ + + +

模擬器的限制

+ +

請注意，Firefox OS 模擬器仍無法提供完美的模擬作業。

+ +

硬體限制

+ +

模擬器除了螢幕尺寸的限制之外，也無法模擬 Firefox OS 裝置的硬體 (例如 CPU 速度或可用的記憶體容量)。

+ +

音訊/視訊編碼

+ +

下列編碼 (Codecs) 因硬體加速解碼而有所不同，因此尚未支援：

+ + + +

也就是說，若 App 或網站 (如 Youtube) 使用這些編碼，則模擬器將無法測試其中的視訊回播功能。

+ +

未支援的 API

+ +

一般來說，因為桌上型電腦無法使用支援硬體，所以可於裝置上運作的特定 API，可能無法用於模擬器之上。我們另外針對某些 API (例如 Geolocation 地理位置定位) 建構了模擬功能，未來版本亦將新增更多模擬 API。但目前仍尚未支援下列 API。如果使用了這些 API，也只會得到錯誤的報告或結果：

+ + + +

獲得協助

+ +

如果有任何問題，請透過 dev-developer-tools 郵件群組或到 #devtools on irc.mozilla.org 上發問。

+ +

啟動詳細資訊 (verbose) 記錄的方法

+ +

開發者可到網頁主控台 (Web Console) 觀看 App 的記錄訊息，並透過應用程式管理員將記錄附加到 App 上。如果想知道 App 啟動時的早期訊息，甚至早於主控台連線並開始作業的訊息，則開發者可啟動模擬器中的詳細資訊記錄功能。

+ +

可透過 about:config 並建立新的 preference 設定。依照模擬器的版本，preference 的名稱也有所差異：

+ + + +

針對「附加元件管理員 (Add-on Manager)」中的附加元件，可將字串值設為「all」、停用，再啟用。目前有關模擬器作業的額外訊息，均將出現於瀏覽器主控台 (Browser Console) 中。

diff --git a/files/zh-tw/archive/b2g_os/simulator/simulator_walkthrough/index.html b/files/zh-tw/archive/b2g_os/simulator/simulator_walkthrough/index.html new file mode 100644 index 0000000000..9e7fba8c07 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/simulator/simulator_walkthrough/index.html @@ -0,0 +1,268 @@ +--- +title: Firefox OS 模擬器簡易攻略 +slug: Archive/B2G_OS/Simulator/Simulator_Walkthrough +translation_of: Archive/B2G_OS/Simulator/Simulator_Walkthrough +--- +

這裡將透過 Firefox OS 模擬器 (Firefox OS Simulator) 對 Web Apps 進行很簡單的除錯 (但要找的 bug 有點多)。

+

整個簡易攻略分成 6 個部分，各自使用不同的診斷/除錯工具，包含 manifest 檢驗功能、網頁主控台 (Web Console)、JavaScript 除錯器 (JavaScript Debugger)、網路監測器 (Network Monitor)、樣式編輯器 (Style Editor)、收據 (Receipts) 測試。

+

這 6 個部分各自獨立。就算你只挑其中幾段來看，應該也能看得懂而不會有銜接上的問題。

+

manifest 檢驗功能

+
+

GitHub 上的 firefoxos-simulator-walkthrough 現有不同版本的 App。如果你想從第一段開始了解 App 的修正程序，可從 App 的 whereami-1 版本著手，逐步完成此攻略。

+

這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。

+

此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)，並開啟了 Dashboard。

+
+

首先我們點選「Add Directory」，將 App 新增至 Dashboard 中，再選擇 manifest 檔案。畫面如下：

+


+
+ 點選「(2 errors and 0 warnings)」就會看到：

+


+ 畫面將清楚顯示錯誤訊息。此時看到「manifest.webapp」就會發現少了 1 組「name」：

+
{
+  "description": "A simple web app",
+  "launch_path": "/index.html",
+  "icons": {
+    "128": "/style/icons/earth.png"
+  }
+}
+


+ 我們把「name」欄位加入 manifest 檔案之後儲存，再點選 Dashboard 中的「Refresh」：

+
{
+  "name": "Where am I?",
+  "description": "A simple web app",
+  "launch_path": "/index.html",
+  "icons": {
+    "128": "/style/icons/earth.png"
+  }
+}
+


+ 此時 Dashboard 應該會告知沒有錯誤，也就能執行 App：

+

+

但這時就算你按下按鈕，模擬器也不會有任何動作。我們會在下一段中使用 WebConsole 診斷此問題。

+

使用網頁主控台 (Web Console)

+
+

如果你要從這裡開始研讀攻略：

+

這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，對很簡單的 Web App 進行除錯。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-2 版本著手，逐步完成此攻略。

+

這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。

+

但此版本的 App 不會執行任何作業。本段透過 WebConsole 診斷出問題。

+ 此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。
+

這裡必須按下 Dashboard 上的「Connect」按鈕：

+

+

隨即自動開啟模擬器視窗並執行 App。而 Dashboard 分頁另將出現網頁主控台 (WebConsole)。

+

主控台的輸出結果會提示幾項錯誤、警告、訊息。但請注意最後一項：
+
+
+
+ 看來是 App 的程式碼「whereami.js」明顯出了問題。這裡列出程式碼的前幾行：

+
var whereami = document.getElementById('whereami');
+
+whereami.onclick = function() {
+  navigator.geolocation.getCurrentPosition(getMap, error);
+};
+


+ 若與 App 的「index.html」相較，則問題明顯是：

+
<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset='utf-8'>
+    <script src="http://open.mapquestap.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+
+  </head>
+
+  <body>
+    <button id ="where-am-i">Where am I?</button>
+    <div id="map"></div>
+    <script src="scripts/whereami.js"></script>
+    <link media="all" href="style/style.css" type="text/css" rel="stylesheet">
+  </body>
+
+</html>
+


+ 在 HTML 中的按鈕 ID 是「where-am-i」，而不是我們在前面 JavaScript 中所使用的「whereami」。所以我們修改為：

+
var whereami = document.getElementById('where-am-i');
+
+whereami.onclick = function() {
+  navigator.geolocation.getCurrentPosition(getMap, error);
+};
+

接著啟動 App 時雖然沒有問題，但仍未顯示地圖。這時主控台又出現新的訊息：

+

+

此訊息是由「whereami.js」程式碼所記錄，指出 Geolocation API 回傳了錯誤，卻沒有說明是哪種錯誤。接著我們可用 JavaScript 除錯器 (JavaScript Debugger) 找出錯誤類型。

+

使用 JavaScript 除錯器 (JavaScript Debugger)

+
+

如果你要從這裡開始研讀攻略：

+

這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，對很簡單的 Web App 進行除錯。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-3 版本著手，逐步完成此攻略。

+

這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。

+

此版本 App 的 Geolocation API 將回傳錯誤。所以本段將透過 JavaScript 除錯器 (JavaScript Debugger) 找出到底是哪種問題。

+

此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。

+
+

在連上 App 的網頁主控台 (WebConsole) 中，點選 Geolocation 錯誤記錄的右側鏈結：

+


+ 按下「whereami.js:8」鏈結之後，JavaScript 除錯器隨即自動載入相關檔案並跳到有問題的行數。

+

根據這篇 Geolocation API 參考所述，這裡將由錯誤處理器 (Error handler) 的 error() 屬性送入 code 物件，而我們再透過 error 物件的 code 屬性獲知此特定錯誤的詳細資訊。所以我們點選左側行數為 8 的那一行，即可於 error() 之內設定中斷點：

+

+

在 App 之內點選「Where am I?」之後，執行作業就會停在中斷點：

+

+

此時只要按下「Add watch expression」的地方並鍵入「error.code」，就會立刻看到其值為「1」：

+


+ 同樣根據 Geolocation API 參考文件所述，「1」即代表「權限已遭否決」。如果 Web Apps 尚未請求 Geolocation 權限，或使用者尚未許可該權限，都會發生這種錯誤。
+
+ 這時來看「manifest.webapp」檔案，就會看到我們尚未要求權限：

+
{
+  "name": "Where am I?",
+  "description": "A simple web app",
+  "launch_path": "/index.html",
+  "icons": {
+    "128": "/style/icons/earth.png"
+  }
+}
+


+ 接著修復如下：

+
{
+  "name": "Where am I?",
+  "description": "A simple web app",
+  "launch_path": "/index.html",
+  "icons": {
+    "128": "/style/icons/earth.png"
+  },
+  "permissions": {
+    "geolocation": {
+      "description": "Needed to tell the user where they are"
+      }
+  }
+}
+


+ 儲存「manifest.webapp」之後，再按下 Dashboard 中的「Refresh」。這裡記得要在除錯器停在中斷點時，才能繼續除錯。而當你點選「Where am I?」，App 隨即會要求你分享你的位置。而你允許分享之後仍看不到地圖，接著又在 WebConsole 中找到新的訊息：

+

+

此訊息指出 MapQuest API (在 App 中以 script 標籤所指定) 並未正確載入。接著可使用網路監測器 (Network Monitor) 找出問題。

+

使用網路監測器 (Network Monitor)

+
+

如果你要從這裡開始研讀攻略：

+

這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，對很簡單的 Web App 進行除錯。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-4 版本著手，逐步完成此攻略。

+

這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。

+

此版本 App 的網頁主控台 (WebConsole) 將顯示「MQA is not defined」錯誤。所以本段將透過網路監測器 (Network Monitor) 找出未載入 MapQuest API 的原因。

+

此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。

+
+
+

警告：需 Firefox 23.0 或更高版本才具備網路監測器功能。

+
+

在連上 App 的開發者工具中，點選「Network」分頁就會看到下列面板。可以看到「open.mapquestap.com」網域針對「mqa.toolkit.js」資源所發出的請求，從未完全成功過：

+

+

成功的請求均標記為綠色。如果我們點選「open.mapquestap.com」網域 (深灰色) 的請求之一，點選「Timings」的細節面板，就會看到 DNS 解析 (DNS resolution) 並未成功，因此該請求從未達到「Connecting」的狀態。

+

再看到「index.html」檔案，會發現 script 標籤指向錯誤網域。

+

這裡變更 script 標籤以使用正確的網域：open.mapquestapi.com (於網域名稱內加入缺少的「i」) 之後，即可修復此錯誤。

+
<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset='utf-8'>
+    <script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+
+  </head>
+
+  <body>
+    <button id ="where-am-i">Where am I?</button>
+    <div id="map"></div>
+    <script src="scripts/whereami.js"></script>
+    <link media="all" href="style/style.css" type="text/css" rel="stylesheet">
+  </body>
+
+</html>
+

儲存「index.html」並點選 Dashboard 中的「Refresh」。在 App 執行時按下「Where am I?」，系統就會要求你分享你的位置。在你允許分享之後，App 終於顯示地圖：
+

+

使用樣式編輯器 (Style Editor)

+
+

如果你要從這裡開始研讀攻略：

+

這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator) 客製化 App 的樣式表 (Stylesheets)。 GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-5 版本著手，逐步完成此攻略。

+

這個 App 只會顯示 1 個「Where am I?」按鈕。只要使用者點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。

+

此版本的 App 已修復前述的所有錯誤。接著我們將透過樣式編輯器 (Style Editor)，為執行中的 App 即時變更樣式並儲存之。

+

此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。

+
+
+

警告：必須 Firefox 23.0 或更高版本才具備網路監測器 (目前 Firefox Beta 試用版才是 23.0 版)

+
+

在連上 App 的開發者工具中，點選「Style Editor」分頁就會看到下列面板：

+

+

點選左側樣式表清單中的「style/style.css」，並修改 CSS 規則。新的規則會立刻套用至已連線的 App 上：

+

+

現在點選樣式表「style/style.css」正下方的「Save」，即可將之儲存回專案中。

+

使用收據 (Receipts) 測試功能

+
+

如果你要從這裡開始研讀攻略：

+

這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，為 Web App 新增付款收據驗證碼。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-6 版本著手，逐步完成此攻略。

+

這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。

+

我們要把此版本 App 變更為付費 Web App。

+

此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。

+
+

目前你已經將 App 修改為無錯誤的 App，並已擁有合適的樣式。現在可新增付款收據驗證 (Payment Receipt Validation) 功能，確保使用者必須購買此 App。

+

Mozilla 另已提供小型的 JavaScript 函式庫，可協助 Apps 檢查自己的收據：http://github.com/mozilla/receiptverifier。

+

為 App 新增 receiptverifier (把新的 script 標籤加入「index.html」檔案中)：

+
<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset='utf-8'>
+    <script src="https://raw.github.com/mozilla/receiptverifier/master/receiptverifier.js"></script>
+    <script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+
+  </head>
+
+  <body>
+    <button id ="where-am-i">Where am I?</button>
+    <div id="map"></div>
+    <script src="scripts/whereami.js"></script>
+    <link media="all" href="style/style.css" type="text/css" rel="stylesheet">
+  </body>
+
+</html>
+

接著再以「mozmarket.receipts.Verifier」API 檢查「scripts/whereami.js」中的收據 (將於按下按鈕，或於載入 App 時檢查收據)：

+
...
+
+var verifier = new mozmarket.receipts.Verifier({
+  installs_allowed_from: '*',
+  typsAllowed: 'test-receipt',
+  logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
+  onlog: mozmarket.receipts.Verifier.consoleLogger
+});
+verifier.clearCache();
+
+function verifyPaymentReceipts(cb) {
+  verifier.verify(function (verifier) {
+    if (verifier.state instanceof verifier.states.OK) {
+      cb(null); // valid payment
+    } else {
+      cb("invalid-payment"); // invalid payment
+    }
+  });
+  setTimeout(function checkNoReceipts() {
+    if (verifier.state instanceof verifier.states.NoReceipts) {
+      cb("no-receipts");
+    }
+  }, 2000);
+}
+
+whereami.onclick = function() {
+  verifyPaymentReceipts(function (err) {
+    if (err) {
+      alert("Invalid Payment Receipt.");
+    } else {
+      navigator.geolocation.getCurrentPosition(getMap, error);
+    }
+  });
+};
+
+

正常情況需透過 Marketplace 與 Payment 服務，以加密方式簽署收據。但目前可先用模擬器 App 項目中的「Receipts」選單，點選所要安裝的收據類型 (預設為「None」)，即可為 App 安裝測試收據。

+

+

現在即可測試 App 具備「Valid」、「Invalid」、「Refunded」收據，或無收據時的行為。另可於網頁主控台觀看「receiptverifier」函式庫所產生的記錄，藉以了解相關結果：

+

+

+
+

注意：whereami-7 版本即為最終完成的 App。

+
+

 

diff --git a/files/zh-tw/archive/b2g_os/using_the_app_manager/index.html b/files/zh-tw/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..8486eeb959 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,259 @@ +--- +title: 應用程式管理員 (App Manager) +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

「應用程式管理員 (App Manager)」為 Firefox 桌面版的新工具，具備多樣的有效工具，可透過開發者的瀏覽器，直接於 Firefox OS 手機與 Firefox OS 模擬器 (Firefox OS Simulator) 中進行 HTML5 Web App 的測試、佈署、除錯等作業。

+ +

應用程式管理員適用於 Firefox OS 1.2 或更高版本。如果你正為 Firefox OS 1.1 開發 App，則請參閱《Firefox OS 1.1 Simulator》一文。

+
+ +

{{EmbedYouTube("z1Bxg1UJVf0")}}

+ +

應用程式管理員具備下列元件：

+ + + +

快速設定：

+ +

本段將協助開發者儘快設定並執行應用程式管理員。如果你需要進一步詳細資訊，則請略過本段文章而直接觀看下一段《裝置與系統設定》。若發生任何問題，亦可參閱本文最後一段《疑難排解》。

+ +
    +
  1. 確認已安裝桌面版 Firefox 26 或更高版本
    2. +
  2. 開啟應用程式管理員 (可於網址列中鍵入 about:app-manager)
    3. +
  3. 若你手上並沒有實際的 Firefox OS 裝置： +
      +
    1. 先安裝 Firefox OS 模擬器 (Firefox OS Simulator)
      2. +
    2. 在應用程式管理員底部的工具列中，點選 Start Simulator 再點選已安裝的模擬器名稱 (已安裝的模擬器均應出現)。
      3. +
    +
    4. +
  4. 若你擁有 Firefox OS 實體裝置： +
      +
    1. 確認目前為 Firefox OS 1.2 或更高版本
      2. +
    2. 確認已在視窗系統中安裝該款手機的驅動程式
      3. +
    3. 進入裝置的「Settings」，停用「Screen Lock (Settings > Screen Lock)」並啟用「Remote Debugging (Settings > Device information > More information > Developer)」
      4. +
    4. 另為 Firefox 桌面版安裝 ADB Helper 附加元件
      5. +
    5. 使用 USB 纜線銜接裝置與電腦
      6. +
    6. 接著應可於應用程式管理員的底部看到裝置名稱，點選該裝置
      7. +
    +
    5. +
  5. 底部應顯示「Connected to: xxx」
    6. +
  6. 點選 Apps panel 並新增 App；封裝式 (Packaged) 或托管式 (Hosted) App 均可
    7. +
  7. Refresh 按鈕將驗證該 App 並安裝於裝置/模擬器中
    8. +
  8. Debug 按鈕則銜接開發者工具與執行中的 App
    9. +
  9. 若遇上任何錯誤，可參閱〈疑難排解〉章節
    10. +
+ +

裝置與系統設定

+ +

使用應用程式管理員前的第一件事，就是必須正確設定現有的系統與手機。本段將逐步說明各個步驟。

+ +

需要 Firefox 1.2 或更高版本

+ +

確認裝置目前為 Firefox OS 1.2/Boot2Gecko 1.2 或更高版本。若要檢查目前 Firefox OS 版本，可點選 Settings > Device Information > Software。

+ +

如果尚未安裝必要的 Firefox OS 版本，則根據手機型號的不同，你可能必須安裝 Firefox 1.2 或更高的 nightly 版本，或自行透過原始碼進行設定與建置 (Build)。

+ +

目前可用的建置：

+ + + +

若要建構自己的 Firefox OS 1.2 或更高版本，請參閱 Building and installing Firefox OS 說明，並從 Firefox OS build prerequisites 著手開始。

+ +

遠端除錯 (Remote debugging)

+ +

接著必須啟動 Firefox OS 中的遠端除錯 (Remote debugging) 功能。點選Settings > Device information > More information > Developer，最後勾選 Remote Debugging 方塊即可。

+ +

ADB 或 ADB helper

+ +

透過 Android Debug Bridge (ADB) 處理裝置與電腦之間的連線作業。現有 2 種 ADB 執行方式：

+ + + +
+

注意：只要安裝 ADB Helper 附加元件，就不需執行此指令。

+
+ +

將裝置連上應用程式管理員

+ +

完成所有設定之後，就可將裝置連上電腦並啟動應用程式管理員：

+ +
    +
  1. 以 USB 纜線銜接裝置與電腦。
    2. +
  2. 進入 Settings > Screen Lock 並取消勾選 Lock Screen，以停用裝置的螢幕鎖定功能。一旦螢幕鎖定之後，手機與電腦的連線將隨之中斷，也就無法進行除錯作業。因此最好先停用此功能。
    3. +
  3. 啟動應用程式管理員 — 到 Firefox 桌面版中點選「工具 (Tools)」>「網頁開發者 (Web Developer)」>「應用程式管理員 (App Manager)」選單；或於網址列中鍵入 about:app-manager。
    4. +
  4. 應用程式管理員分頁的底部可看到連線狀態顯示列 (如下圖所示)。只要點選「Connect to localhost:6000」按鈕即可連線裝置。
    5. +
  5. 若連線成功，裝置畫面隨即出現「An incoming request to permit remote debugging connection was detected. Allow connection?」對話框。按下「OK」鈕 (你可能必須按下手機的電源鍵，才會看到該對話框)。接著應會更新連線狀態列並顯示「Connected to B2G」。此時也將出現「Disconnect」按鈕，以利隨時中斷連線。
    6. +
+ +

+ +
+

另請注意，位於連線狀態列中的其他控制鈕，可讓你銜接模擬器與應用程式管理員 (將於下一段中說明)，並更改連線所使用的通訊埠。若要更改通訊埠，則必須啟動該通訊埠的「轉發通訊埠 (Port forwarding)」功能。可參閱上述的啟動轉發通訊埠。

+
+ +

使用 Firefox OS Simulator 附加元件

+ +

如果你手上還沒有實際的 Firefox OS 裝置可搭配 App Manager，也能透過 Firefox OS 模擬器 (Firefox OS Simulator) 附加元件體驗應用程式管理員。請先為自己的作業系統安裝合適的模擬器：

+ +

安裝 Firefox OS 模擬器

+ +
+

注意：目前僅有 Firefox OS 1.2 模擬器。未來將提供更多版本選擇。

+
+ +

安裝模擬器之後，請透過 about:app-manager 找到應用程式管理員分頁底部的連線狀態列，點選「Start simulator」按鈕。接著將出現至少 3 組按鈕：

+ + + +
+

注意：模擬器 (1.2 與 1.3 版) 目前回報 1 組錯誤的 Gecko user agent 字串：可參閱 {{ Bug("964598") }} 進一步了解。

+
+ +

「Apps」面板

+ +

所有要件設定完畢之後，就從「Apps」面板開始了解應用程式管理員的功能吧。先透過 Apps 面板將現有 App 送入裝置中並進行除錯：

+ + + +

視窗右側隨即顯示 App 的相關資訊，如下圖所示：

+ +

+ +

Manifest 檔案編輯器 (Manifest Editor)

+ +

從 Firefox 28 開始，「Apps」面板即包含編輯器功能，可用於 App 的 manifest 檔案：

+ +

+ +

除錯

+ +

此時點選「Update」就會更新 (或安裝) 裝置上的 App。點選「Debug」則會連上工具箱，以利直接對程式碼進行除錯：

+ +

+ +
+

注意：你可能會玩工具箱玩到上癮 — 快試著修改 DOM、CSS 等。接著就能看到裝置即時反應出更新的效果。相關更新均將儲存於已安裝的 App 程式碼中，下次再開啟裝置中的 App 就能一目了然。

+
+ +

若是 Firefox 28 之前的版本，這些工具將顯示於另一個獨立視窗中。從 Firefox 28 開始，這些工具均顯示於應用程式管理員之內的獨立分頁中；就接在「Apps」與「Device」分頁之下。此分頁將顯示目前 App 的圖示，因此極容易辨識：

+ +

+ +

錯誤

+ +

如果新增 App 失敗 (可能是 URL 錯誤，或選到了封裝式 App 的資料夾)，則該頁仍會顯示所新增的 App 項目，也會包含錯誤資訊。

+ +

+ +

另外只要將滑鼠游標移至視窗左邊的 App 名稱/說明之上，在「X」按鈕出現時按下，即可在此畫面中刪除該 App。請注意此動作並不會刪除裝置中的 App。必須從裝置上手動移除 App，才會真正刪除裝置中的 App。

+ +

「Device」面板

+ +

「Device」面板將顯示已連線裝置的相關資訊。另可透過「Installed Apps」視窗中開啟裝置上的 App 並進行除錯。

+ +

+ +
+

注意：依預設值，此處並不會顯示 Certified App。可參閱 Certified App 的除錯方式。

+
+ +

「Permissions」視窗將針對目前裝置上的不同 Web API，顯示必要的權限。

+ +

+ +

最後可按下「Screenshot」按鈕，即可對目前裝置的顯示項目拍下截圖。此截圖將以 Firefox 的新分頁開啟，讓你決定是否要儲存該圖。

+ +

Certified App 的除錯

+ +

目前僅限搭載 Firefox OS 1.2 開發版本的裝置，才能進行 Certified Apps 的除錯。若你手上的裝置正執行開發版本，則可將設定檔中的「 devtools.debugger.forbid-certified-apps」變更為「false」，即可開始 Certified App 的除錯。可參閱下列步驟：

+ +
    +
  1. +

    在電腦的終端/主控台上輸入下列指令，以進入裝置的 filesystem：

    + + 
    adb shell
    + +

    接著命令列提示將轉為 root@android。

    +
    2. +
  2. +

    接著以下列指令暫停執行 B2G：

    + + 
    stop b2g
    +
    3. +
  3. +

    進入以下目錄：

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    以下列指令更改 prefs.js 檔案：

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    在完成編輯並儲存檔案之後，再以下列指令重新啟動 B2G：

    + + 
    start b2g
    +
    6. +
  6. +

    輸入 exit 指令以退出 Android 的 filesystem 之後，就會回到正常的終端畫面。

    +
    7. +
  7. +

    最後再次連回應用程式管理員，就能看到 Certified App 出現，即可進行除錯。

    +
    8. +
+ +
+

注意：如果你想把這個偏好設定加入自己的 Gaia 版本，則可執行 DEVICE_DEBUG=1 reset-gaia

+
+ +

在應用程式管理員中執行自訂的版本

+ +

只要透過 Firefox OS 模擬器，即可於應用程式管理員中執行自訂的 B2G Desktop 與 Gaia 版本。可參閱《Running custom Firefox OS/Gaia builds in the App Manager》進一步了解。

+ +

疑難排解

+ +

如果系統無法辨認裝置：

+ + + +

還是無法讓自己的裝置連上應用程式管理員或啟動模擬器嗎？快讓我們知道或到 bugzilla 回報錯誤。

diff --git a/files/zh-tw/archive/b2g_os/using_the_b2g_desktop_client/index.html b/files/zh-tw/archive/b2g_os/using_the_b2g_desktop_client/index.html new file mode 100644 index 0000000000..46fc57a972 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/using_the_b2g_desktop_client/index.html @@ -0,0 +1,180 @@ +--- +title: 使用 Firefox OS 的電腦桌面 client 程式 +slug: Archive/B2G_OS/Using_the_B2G_desktop_client +translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator +--- +

Firefox OS 的 desktop client，也被稱為 B2G desktop client，讓您可以在一個以 Gecko 為基礎的環境－有點類似實際行動裝置的環境下執行 Gaia 和 web apps。它不會模擬行動裝置的硬體，因此它並不適合拿來測試行動裝置的 API，也不能取代在實際硬體上的測試。然而，它的確擁有一些 Firefox 上所沒有 APIs，像是聯絡人(Contacts)和設定(Settings)的 Apis。因此，當我們在開發應用程式、或是在操作 Gaia 使用者介面上可以派上用場。

+ +

這篇文章不但涵蓋下載或是建置 Firefox desktop client，也包含了如何使用它。

+ +

下載 nightly 版本

+ +

如同 Firefox Nightlies 一般，Firefox OS 的 desktop client 每天都會用最新的原始碼編譯出一個版本。最新的版本將 可以從 Mozilla FTP 伺服器取得。請確定挑到最新的版本和對的封存給您的作業系統。

+ +

我們現在可以略過下面內容，直接到「執行 desktop client」。

+ +

建置 desktop client

+ +

我們需要做的地一件事情是架起 Mozilla 的標準建置環境。一旦我們有了這個環境，我們可以降低我們所需要的原始碼，並且設定建置 Firefox OS 的 desktop client。

+ +

第一次下載原始碼

+ +

在我們要放置程式碼的目錄(資料夾)中，讓我們將包含所有 Gecko 的 mozilla-central 倉儲 (repository)給複製下來。

+ +
 hg clone http://hg.mozilla.org/mozilla-central
+
+ +

更新程式碼

+ +

當我們之後編譯後來的版本時，我們要確定我們有最新的原始碼。下列就是如何拉到最新的更新的指令：

+ +
cd mozilla-central
+hg pull -u
+
+ +

建立 mozconfig

+ +

接著，我們要在 mozilla-central 目錄下新增一個檔案 mozconfig 來設定建置系統去編譯 Boot to Gecko client 程式而不是 Firefox：

+ +
mk_add_options MOZ_OBJDIR=../build
+mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
+
+ac_add_options --enable-application=b2g
+ac_add_options --disable-libjpeg-turbo
+
+# This option is required if you want to be able to run Gaia's tests
+ac_add_options --enable-tests
+
+# turn on mozTelephony/mozSms interfaces
+# Only turn this line on if you actually have a dev phone
+# you want to forward to. If you get crashes at startup,
+# make sure this line is commented.
+#ac_add_options --enable-b2g-ril
+ +

建置(編譯)

+ +

現在我們已經準備好要在目錄 mozilla-central 裡面、透過下面的指令來編譯 desktop client。

+ +
./mach build
+ +

編譯好的 client 會被放在 ../build/dist 目錄下 (基本上是依照 mozconfig 檔案裡面的 MOZ_OBJDIR 參數所指定的值)。

+ +

執行 desktop client

+ +

預設 desktop client 會顯示空的畫面，因為它並不知道一開始要載入哪個 web app 來當做系統 app。系統 apps 和 Firefox OS 中預設會有的 apps 就被稱為 Gaia。

+ +

下載 Gaia

+ +

第一次下載 Gaia、讓我們從 GitHub 上複製原始碼的倉儲 (repository)：

+ +
 git clone https://github.com/mozilla-b2g/gaia
+ +

為了更新成 Gaia 的一個已存在的版本，我們可以從 GitHub 拉最新的更新：

+ +
cd gaia
+git pull
+
+ +

產生 profile

+ +

接著我們需要設定 desktop client 中 Gaia 的 apps。這包括包裝行動裝置上也有的 Gaia apps，以及設定系統 apps 的權限。我們透過產生一個 profile 來做這些事情。接著的指令會做這些事情：新的 profile 包含一個客製的擴充以及其他 B2G 正常運作所需的設定。所以在 gaia 目錄裡執行下面的指令：

+ +
cd gaia
+make
+
+ +

這應該會在 gaia 目錄下面建立一個 profile 目錄。

+ +

在 Linux 上執行

+ +

只要在啟動 b2g 執行檔的時候加上 profile 參數，就可以使用我們剛剛產生的 profile 來啟動 desktop client 。如果是自己編譯的話，執行檔的位置會在早先下載下來的 tarball 裡面，如果是自己編譯的話，就會在 ../build/dist/bin 的目錄裡。

+ +
.../b2g -profile gaia/profile
+
+ +

您可能會碰到惱人的 rendering 問題。只要在 gaia/profile/prefs.js 裡面加上下面這行就可以避開這個問題：

+ +
user_pref("layers.acceleration.disabled", true);
+
+ +

在 Mac 上執行

+ +

在 Mac 上，b2g 執行檔的位置和需要指定 profile 的絕對路徑，因此指令比較複雜：

+ +
.../B2G.app/Contents/MacOS/b2g -profile /full/path/to/gaia/profile
+
+ +

指令的選項(或參數)

+ +

在使用 desktop client 時，你可以使用一些指令的參數來調校執行時的體驗。您可以用 -help 這個參數來列出參數的列表。這一節涵蓋一些特別的參數。

+ +

明確指定螢幕大小

+ +

您可以用 --screen 來指定您想要模擬的行動裝置的螢幕大小：

+ +
b2g --screen=<width>x<height>[@<dpi>]
+ +

<width>, <height>, and <dpi> 都是相當不用解釋的參數：行動裝置以 pixels 為單位的長和寬以及 DPI 解析度。舉例來說：

+ +
b2g --screen=320x480
+b2g --screen=320x480@160
+
+ +

或者，您可以使用某些行動裝置的名字來模擬他們的螢幕大小和解析度：

+ + + +

開啟 JavaScript console

+ +

在您開啟 B2G 的 desktop client 時，您可以藉由加上 -jsconsole 這個記號來開啟
+ JavaSCript console。在編譯之後，只要：

+ +
.../b2g -jsconsole -profile /path/to/your/profile
+ +

如果您已經在 Mac 上安裝了 nightly 版本的話，您可以照著下面的指令：

+ +
/Applications/B2G.app/Contents/MacOS/b2g -jsconsole -profile /path/to/your/profile
+ +

在 B2G 啟動時，指定開啟一個應用程式

+ +

您現在可以指定一個應用程式在 b2g desktop client 開始運作時，自動執行起來。這會在其他系統程式被掛載起來之後，馬上讓指定的應用程式被執行起來。只要加上 --runapp 這個參數、後面在加上要執行應用程式的名字，就可以做到了。如下：

+ +
 .../b2g -profile /path/to/your/gaia/profile --runapp email
+ +

在尋找要執行的 app 之前，指定的名字要被正規化為全部小寫、且不能帶有 - 和空白的符號。接著這個正規化過的名字會被拿來和 app 的 manifest 的名字做比較。

+ +

舉例來說，現在 email app 的名字是「E-mail」，但是因為正規化的效果， --runapp email 這個參數是 ok 且可以執行的。

+ +

如果您加了 --runapp 參數但是卻沒有帶後面的 app 名字、或是帶了空的名字的話，b2g client 會列出一串列表，其中包括已知的應用程式和簡短的使用訊息。

+ +
+

Note: 用 --runapp 參數會有關閉螢幕鎖的副作用，且不會再度啟用螢幕鎖。這是假設您不會用這個指令加上 profile 來測試螢幕鎖，否則您會重新打開這個選項。如果這個行為會造成問題的話，也歡迎提供 patch 來改變這個它。

+
+ +

Usage tips

+ +

這一節提供一些在使用 B2G desktop client 時，有幫助的技巧。

+ + + +

Next steps

+ +

現在您有一個執行 Boot to Gecko 的 desktop 版本了，您可以在上面測試、開發以及做其他事情：

+ + diff --git a/files/zh-tw/archive/b2g_os/using_the_b2g_emulators/index.html b/files/zh-tw/archive/b2g_os/using_the_b2g_emulators/index.html new file mode 100644 index 0000000000..6dccacbe06 --- /dev/null +++ b/files/zh-tw/archive/b2g_os/using_the_b2g_emulators/index.html @@ -0,0 +1,69 @@ +--- +title: 使用 B2G 模擬器 +slug: Archive/B2G_OS/Using_the_B2G_emulators +translation_of: Archive/B2G_OS/Using_the_B2G_emulators +--- +

這篇文章提供簡潔的指南，包括使用 Boot to Gecko 模擬器時需要知道的一些重要的事情。這不意味著這是一個完整的使用手冊；相反地，它只告訴您一些有用的事情，讓您不必自己去學。

+

這篇指南假設您已經編譯了一個模擬器；如果您還沒編譯的話，請跳回「建置和安裝 Boot to Gecko」！

+

關於 B2G 模擬器

+

有兩種 B2G 模擬器。第一種是 x86 行動裝置的模擬器，使用 "emulator-x86" 設定以 config.sh 編譯而成。雖然這遠比模擬 ARM 處理器快多了，但是它執行的沒有那麼接近一個實體行動裝置的結果。而第二種則是 ARM 行動裝置的模擬器，使用 "emulator" 的設定編譯。

+

一旦你選擇、設定及編譯模擬器，就使用者而言，剩下來要做的事情都是一樣的，所以這篇導覽剩下的共同部分是兩種模擬器都適用的。

+
+ Note: 在 Mac OS X 上，B2G 模擬器需要 Core 2 Duo 或更快 CPU；也就是說，一個相容於 Mac OS X 10.7 "Lion" 的系統。你不必一定得使用 Lion，只是要在和 Lion 相容的系統上面執行就可以了。
+

啟動模擬器

+

執行下列指令，就可以打開 B2G 模擬器了：

+
./run-emulator.sh
+
+

這個指令將會會您操作所有模擬器的起始作業。現在就耐心等模擬器啟動以及 Boot to Gecko 在上面開始運作起來。啟動會花好幾分鐘，所以請耐心等候。

+

當模擬器掛了

+

有時候模擬器會啟動失敗。歡迎來到尖端科技的前緣。這裡有一些派的上用場的技巧，可用來解決問題。

+

確定 adb server 是不是還活著

+

adb server 處理與模擬的行動裝置之間的互動，而這裡常常出問題的原因是 adb server 不是沒在執行就是故障。

+
+

Note: 舉例來說，如果您使用 B2G 版本所編譯出的 adb 的話，它的位置會在 $B2G/out/host/<platform>/bin 目錄裡。在 Mac 上的話，則是在 $B2G/out/host/darwin-x86/bin 目錄下。

+
+

使用下列指令來看 adb 是否還在運作中：

+
ps aux | grep adb
+
+

If it's there, do this to kill it, because it's probably not working correctly.

+
adb kill-server
+
+

If it's not there, do this:

+
adb start-server
+
+

接著試試看再執行模擬器一次看看。如果還是沒辦法運作的話， 就是時候到 irc.mozilla.org 使用 #b2g 搜尋尋求幫助了。

+

抹掉 configuration 設定值

+

有時候，在模擬的行動裝置上使用過期的設定檔的設定值也會讓它暴走。你可以砍掉 indexedDB 資料庫來解決這個問題，如下：

+
    +
  1. 確定 adb 在執行中，如同 Make sure the adb server is running 中所描述的一般。
    2. +
  2. 啟動模擬器。
    3. +
  3. 先打開電腦裡的 terminal，然後切換到編譯模擬器的主目錄 (root code build directory)，接著打：「out/host/<platform>/bin/adb -e shell」；在 Mac 上使用「out/host/darwin-x86/bin/adb -e shell」。
    4. +
  4. 現在你已經在 adb 的 shell 裡面、且可以直接在模擬器的行動 裝置上執行 shell 指令 (commands)了。讓我們使用「stop b2g」來停止裝置上的 B2G。
    5. +
  5. 刪除 indexedDB 資料庫：rm -rf /data/local/indexedDB。
    6. +
  6. 在模擬的行動裝置上重新啟動 B2G：start b2g。
    7. +
+

希望此時您所打開 Gaia 介面一切都恢復正常。

+

設定模擬器

+

如果您想要調整模擬器更接近您想要模擬的裝置的話，有幾個選項可以改改看。這一節提供一些關於「如何調校」的基本資訊。您可以編輯 run-emulator.sh (觀念上還是複製一份來編輯)這個 script 來調校模擬器的設定。這裡指會討論到一些最常用到的參數；您可以 連到 qemu 網站 來看其他部分的細節。

+
+ Tip: 您可以為每個想要模擬的裝置建立一個 run-emulator.sh 的複製版本；這會您比較容易以不同的設定啟動模擬器。
+

改變外觀

+

模擬器預設會以 HVGA 模式啟動；VGA 的一半、也就是 320x480 pixels 的外觀。在啟動時，我們可以給模擬器加上 -skin 的參數來指定外觀。您可以編輯 run-emulator.sh 來切換成不同的顯示模式來執行模擬器。可以使用的外觀列表如下：

+ +

外觀的存放位置在 B2G/development/tools/emulator/skins 目錄。外觀的格式很簡單；如果您打開來看的話，他們只是一些資料夾，裝著一些使用者介面物件的 PNG 檔案以及一個描述使用者介面的配置及螢幕區域的文字檔 layout。如果需要建立客製化的外觀的話，是還蠻簡單的。

+

改變記憶體的大小

+

另一個您可能想要/需要改變的選項就是行動裝置的記憶體大小。預設是 512MB；然而，如果您要模擬的行動裝置的記憶體比較大或小的話，或許對您而言，將記憶體調整成一樣的大小是很重要的，這樣才能確定您的 app 會在您想要執行的基礎裝置上執行。您可以將 -memory 參數的數值修改成您需要的數字(以 MB 為單位)，就可以改變執行時的記憶體大小。除了預設的 512MB 之外，您可能會想要以 256MB 和 1024MB 來做測試。

+

而如果想要改變模擬裝置的儲存容量大小的話 (就是 local 資料的儲存空間，像是行動電話的內建快閃記憶體或是電腦的硬碟)，可以改變 -partition-size 參數的數值。預設是 512MB，但是您可以改成任何大小 (以 MB 為單位)來模擬想要測試的行動裝置。

+

網路連線

+

如果因為某些原因，您沒辦法將您的模擬器連上網際網路 (internet)的話，您可以從命令提示字元來執行下面的指令 (commandline)：

+
adb shell setprop net.dns1 10.0.2.3
diff --git a/files/zh-tw/archive/b2g_os/web_telephony_api/index.html b/files/zh-tw/archive/b2g_os/web_telephony_api/index.html new file mode 100644 index 0000000000..c9e0c9516b --- /dev/null +++ b/files/zh-tw/archive/b2g_os/web_telephony_api/index.html @@ -0,0 +1,25 @@ +--- +title: Web Telephony +slug: Archive/B2G_OS/Web_Telephony_API +translation_of: Archive/B2G_OS/Web_Telephony_API +--- +

WebTelephony API 可透過 JavaScript 程式碼，讓網頁內容處理一般音訊電話。

+

透過 window.navigator.mozTelephony 即可存取此 API。另請參閱下列的完整介面列表：

+

DOM 介面

+ +

範例程式碼與介紹

+
+ +
+

另可參閱

+ diff --git a/files/zh-tw/archive/b2g_os/writing_apps_for_boot_to_gecko/index.html b/files/zh-tw/archive/b2g_os/writing_apps_for_boot_to_gecko/index.html new file mode 100644 index 0000000000..a38efda16e --- /dev/null +++ b/files/zh-tw/archive/b2g_os/writing_apps_for_boot_to_gecko/index.html @@ -0,0 +1,12 @@ +--- +title: 寫 Boot to Gecko 的 apps +slug: Archive/B2G_OS/Writing_apps_for_Boot_to_Gecko +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

B2G apps 不外乎是安裝於 B2G 手機的 Open Web apps。

+ +
+ Note: B2G 現在和 Fennec 用相同的 UA (User Agent) 來分辨。例如："Mozilla/5.0 (Android; Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1".
diff --git a/files/zh-tw/archive/css3/index.html b/files/zh-tw/archive/css3/index.html new file mode 100644 index 0000000000..85374e3a65 --- /dev/null +++ b/files/zh-tw/archive/css3/index.html @@ -0,0 +1,584 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +

CSS3 是層疊樣式表語言的最新版且目標是為了延伸 CSS2.1。它有許多久違的新東西，像是圓角、陰影、漸層、或是動畫, 還有像是多列, 有彈性的盒子或是網格佈局之類的。 實驗的部分會有供應商前綴且應該在生產環境中盡可能地避免，使用那些未來可能會改變的語法或語義都要格外小心。

+ +

模組及標準化程序

+ +

CSS Level 2 需要 9 年(2002年八月~2011年六月)，以達到建議的狀態。 This was due to the fact that a few secondary features hold back the whole specification. In order to accelerate the standardization of non-problematic features, the CSS Working Group of the W3C, in a decision referred as the Beijing doctrine , divided CSS in smaller components called modules . Each of these modules is now an independent part of the language and moves towards standardization at its own pace. While some modules are already W3C Recommendations, other still are early Working Drafts. New modules are also added when new needs are identified.

+ +

CSS Modules and Snapshots as defined since CSS3 Formally, there is no CSS3 standard per se . Each module being standardized independently, the standard CSS consists of CSS2.1 amended and extended by the completed modules, not necessary all with the same level number. At each point of time, a snapshot of the CSS standard can be defined, listing CSS2.1 and the mature modules.

+ +

The W3 consortium periodically publishes such snapshots, like in 2007 or 2010.

+ +

Though today no module with a level greater than 3 is standardized, this will change in the future. Some modules, like Selectors 4 or CSS Borders and Backgrounds Level 4 already have an Editor's Draft, though they haven't yet reached the First Published Working Draft status.

+ +

CSS 模組狀態

+ +

穩定模組

+ +

A few CSS modules are already fairly stable and have reached one of the three recommendation level of the CSSWG: Candidate Recommendation, Proposed Recommendation or Recommendation. These can be used without prefixed and are pretty stable, though a few features can still be dropped at the Candidate Recommendation stage.

+ +

These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }}  自 2011 年 6 月 7 號起
+

增加 {{ cssxref("opacity") }} 屬性，還有 hsl(), hsla(), rgba() 和 rgb() 函式來創造 {{cssxref("<color>")}} 值。它也定義了關鍵字 currentColor 唯有效的顏色。

+ +

現在透明色是一個真實的顏色（因為支援了 alpha 通道）。若想要使用透明度，請使用 rgba(0,0,0,0.0)。

+ +

關鍵字 system-color 不應該繼續使用，因為他已經被棄用。

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} 自 2011 年 9 月 29 號起
+

Adds:

+ +
    +
  • Substring matching attribute selectors, E[attribute^="value"] , E[attribute$="value"] , E[attribute*="value"] .
    • +
  • New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
    • +
  • Pseudo-elements are now characterized by two colons rather then one: :after becomes {{ cssxref("::after") }}, :before becomes {{ cssxref("::before") }}, :first-letter becomes {{ cssxref("::first-letter") }}, and :first-line becomes {{ cssxref("::first-line") }}.
    • +
  • The new general sibling combinator ( h1~pre ).
    • +
+
+ +

The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Namespaces", "", "") }} +

{{ Spec2("CSS3 Namespaces") }} 自 2011 年 9 月 29 日起

+
+

Adds the support for the XML Namespaces by defining the notion of CSS qualified name , using the ' | ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} 自 2012 年 6 月 19 日起
+

Extends the former media type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) .

+ +

Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.

+
+ +

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} 自 2013 年 11 月 7 日起
Formally defines the syntax of the content of the HTML style global attribute.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
+

Adds:

+ +
    +
  • Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for uri() defined ones.
    • +
  • Support for multiple background images.
    • +
  • The {{ cssxref("background-repeat") }} space and round values, and for the 2-value syntax of this CSS property.
    • +
  • The {{ cssxref("background-attachment") }} local value.
    • +
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.
    • +
  • Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.
    • +
  • Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.
    • +
  • Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.
    • +
+
+ +

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).

+ + + + + + + + + + + +
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
+

Defines the {{cssxref("<image>")}} data type.

+ +

Extends the url() syntax to support image slices using media fragments.

+ +

Adds:

+ +
    +
  • The dppx unit to the {{cssxref("<resolution>")}} data type.
    • +
  • The image() function as a more flexible alternative to url() to define an image from an url.
    + At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
    • +
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
    • +
  • The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to the next iteration of this module .
    • +
  • The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to the next iteration of this module .
    • +
+
+ +

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
+

Makes initial and inherit keywords usable on any CSS property.

+ +

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

+ +

Adds:

+ +
    +
  • Definition for new font-relative length units: rem and ch .
    • +
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
    • +
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
    • +
  • Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.
    • +
  • Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.
    • +
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    + At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.
    • +
+
+ +

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text-decoration", "", "") }}{{ Spec2("CSS3 Text-decoration") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • +
+ +

Adds:

+ +
    +
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • +
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • +
+ +

Precises:

+ +
    +
  • The paint order of the decorations.
    • +
+ +

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
+

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

+ +

Adds:

+ +
    +
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • +
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • +
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • +
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • +
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • +
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.
    • +
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Syntax", "", "") }}{{ Spec2("CSS3 Syntax") }}
Precises how charsets are determined; minor changes in parsing and tokenization algorithms.
+ +

Modules in the refining phase

+ +

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
+

Adds:

+ +
    +
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    + At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • +
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    + At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • +
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • +
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • +
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • +
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    + At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • +
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • +
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    + At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • +
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • +
+
+ +

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
+

Adds:

+ +
    +
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • +
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX() ,rotateY(), rotateZ(), and perspective().
    • +
+ +

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. +

Adds:

+ +
    +
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • +
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • +
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • +
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • +
+ +

Adds:

+ +
    +
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • +
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • +
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • +
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • +
+
+ +

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

+ + + + + + + + + + + +
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
+ +

Modules in the revising phase

+ +

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
+ +

Modules in the exploring phase

+ + + + + + + + + + + +
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
+

Extends:

+ +
    +
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • +
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • +
+ +

Adds:

+ +
    +
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • +
  • the element() functional notation allowing the use of part of the page as image.
    • +
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • +
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • +
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
Add a grid layout to the CSS display property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}{{ Spec2("CSS3 Exclusions and Shapes") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
+ +

 

diff --git a/files/zh-tw/archive/index.html b/files/zh-tw/archive/index.html new file mode 100644 index 0000000000..6766a22f6e --- /dev/null +++ b/files/zh-tw/archive/index.html @@ -0,0 +1,21 @@ +--- +title: 過時內容的存檔 +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +

在 MDN，我們盡量避免直接刪除內容，因為那些內容可能對要找出遺留平台、作業系統、瀏覽器相關資料的人而言很有用：也許你的目標人群在用很老舊的硬體、使他們的瀏覽器無法升級到最新版本；或著因為某些「原因」，你的公司要用非常老舊的軟體、而你建置的網路內容需要在那個軟體上運行；也可能是你對過時的功能或 API 歷史與運行方法感到興趣。

+ +

出於很多原因，老文件非常有用。因此，我們開闢了這個地方，用以保存老文件。這裡的內容不該用作建置面向現代瀏覽器的新網站或 apps 參考。這裡存在的目的，只有作為歷史參考。

+ +
+

給編者的筆記：我們要盡可能維持子頁面的組織化、而不該把所有東西都丟到一個大資料夾。試著給內容歸類。另外，只把非常老舊的內容移到這裡。若可能有人切實需要還在使用的軟體資訊，就不該移這裡。在你把任何內容移動到這裡以前，最好在 MDN Web Docs 頻道討論。

+
+ +

{{SubpagesWithSummaries}}

+ +

子頁面

+ +

{{ListSubpages("/zh-TW/docs/Archive", 2, 0, 1)}}

diff --git a/files/zh-tw/archive/mdn/index.html b/files/zh-tw/archive/mdn/index.html new file mode 100644 index 0000000000..f99cd4e169 --- /dev/null +++ b/files/zh-tw/archive/mdn/index.html @@ -0,0 +1,18 @@ +--- +title: MDN Archive +slug: Archive/MDN +tags: + - Archive + - MDN +translation_of: Archive/MDN +--- +

{{MDNSidebar}}

+ +
+

Obsolete
+ 此文件已過時。

+
+ +

The documentation listed below is archived, obsolete material about MDN itself.

+ +

{{LandingPageListSubpages}}

diff --git a/files/zh-tw/archive/mdn/persona_sign-ins/index.html b/files/zh-tw/archive/mdn/persona_sign-ins/index.html new file mode 100644 index 0000000000..7c65870878 --- /dev/null +++ b/files/zh-tw/archive/mdn/persona_sign-ins/index.html @@ -0,0 +1,28 @@ +--- +title: MDN and Persona sign-ins +slug: Archive/MDN/Persona_sign-ins +tags: + - '3081911' +translation_of: Archive/MDN/Persona_sign-ins +--- +
{{MDNSidebar}}
+

Please link your GitHub account to your MDN profile now so you can continue to sign in to MDN.

+
+ +

Currently, MDN lets contributors sign in using two different authentication providers: Mozilla Persona and GitHub. Starting on November 1, 2016, we will remove Persona as an option for logging in. Therefore, you must enable Github authentication on your profile to avoid losing login access to MDN.

+ +

We recognize that this is an inconvenience, and we do apologize for it. Unfortunately, this is out of our control.

+ +

Why is Persona being removed?

+ +

Mozilla has shut down the Persona project, and its servers will be turned off in November, 2016. You can learn more about Mozilla's decision to shut down Persona on the Mozilla wiki.

+ +

When will Persona be removed?

+ +

We will disable Persona as an authentication provider on November 1, 2016; in other words, the last day you'll be able to sign in to MDN using Persona will be October 31, 2016. We will be issuing increasingly frequent and increasingly urgent notifications to add a GitHub account to your MDN profile starting now. Please do this as soon as you can, in order to avoid any risk of losing access to your MDN account.

+ +

Will MDN offer another authentication provider?

+ +

We would very much like to do so, but have not yet identified another provider which meets our requirements; in addition, we don't currently have the developer resources to integrate another provider. For the time being, your only option to keep contributor access to MDN is to link your MDN profile to your GitHub account.

+ +

Keep in mind, of course, that you don't need to sign in to MDN in order to read our content. But if you have an account for contributing, and wish to be able to contribute at any time in the future, be sure to add a GitHub account to your profile as soon as you can, before October 31, 2016.

diff --git a/files/zh-tw/archive/meta_docs/custom_classes/index.html b/files/zh-tw/archive/meta_docs/custom_classes/index.html new file mode 100644 index 0000000000..0aa624f2fd --- /dev/null +++ b/files/zh-tw/archive/meta_docs/custom_classes/index.html @@ -0,0 +1,189 @@ +--- +title: 自訂 CSS 類別 +slug: Archive/Meta_docs/Custom_classes +tags: + - MDC_專案 +translation_of: Archive/Meta_docs/Custom_classes +--- +

 以下是 MDC Wiki 上自行定義的樣式類別，若你也想新增類別，請聯絡 Dria。

+ +

現有 CSS 類別

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
樣式使用結果
div.tip顯示網頁內容中的小技巧文字。
div.bug顯示網頁內容中的程式錯誤文字。
.float-left製作向左浮動的元素（通常是圖片）。
.float-right製作向右浮動的元素（通常是圖片）。
.figure這個樣式目前還沒有實際作用，是為日後使用準備的。
.standard-table標準的表格樣式。
.standard-table td.header標準表格的標題樣式。
.fullwidth-table寬度設定為 100% 的表格（就像現在這個表格一樣）。
.fullwidth-table td.header寬度設為 100% 之表格的標題樣式。
div.breadcrumbs頁面導覽的樣式。
div.breadcrumbs a.breadcrumbs頁面導覽字串中連結部分的樣式。
div.breadcrumbs span.breadcrumbs頁面導覽字串中目前頁面標題的樣式。
div.side-note-left div.side-note-right用以建立文章內的邊欄。此區域之寬度將佔其母元素（通常就是文件本體）的 50%。若要建立邊欄請使用這個樣式，以確保內容顯示上容易閱讀。
div.highlight在區段左側放上 3 個像素寬的藍色邊框。/td>
.highlightred將文字改以紅色顯示。
.highlightblue將文字改以藍色顯示。
.highlightgreen將文字改以綠色顯示。
+ +

範例

+ +

標示部分程式碼

+ +

通常我們會讓程式碼以特別的區塊顯示，這可以利用 span 搭配 MediaWiki 系統「行前空一格就自動縮排」的功能。須注意的是在 <pre> 區段中不能用 span 元素，因為此時 MediaWiki 會直接把 span 元素當成要顯示的內容而輸出。

+ +
<span class="highlightred">這樣是沒用的</span>
+
+ +

這種狀況下就應該將程式碼縮排，然後在其中使用 span 元素。如果程式中有空白行，該行也必須縮排，否則系統會認為空白行的前後為分開的兩個區段。

+ +
像這樣，
+   程式碼的空白行並沒有縮排，
+
+ +
   所以就顯示成兩個區段了。
+
+ +

顯然這樣跟我們想要的有所差異，所以你應該這麼做：

+ +
像這樣，
+   空白行前也加了個空白字元以示縮排，
+
+   這樣系統就將其顯示為同一個區段。
+
+ +

導覽

+ +

 

+ + + +

table.standard-table

+ +

<tr> <td>此為</td> <td>table.standard-table</td> <td>的範例</td> </tr> </table>

+ +

table.fullwidth-table

+ + + + + + + +
表格標題 1</td> +

<th>表格標題 2</td> <th>表格標題 3</td>

+
+ +

<tr> <td>此為</td> <td>table.fullwidth-table</td> <td>的範例</td> </tr> </table>

+ +

DIV 區段

+ +
小技巧
+ +

小技巧區段以 div class="note" 標示，例如：

+ +
這就是個小技巧
+ +
程式錯誤
+ +

已知的程式錯誤可用 div class="bug" 標示參照，內含 bugzilla 上的對應資訊連結，例如：

+ +
Bug 176320：彈出視窗 innerWidth 及 innerHeight 的最小值
+ +
警告
+ +

請使用 div class="warning" 來標示文件中的警告文字，很快我們會為此樣式加上圖示等特殊效果。

+ +
此段為警告文字
+ +
注釋
+ +

請使用 div class="note" 來標示文件中的注釋文字。

+ +
這是注釋，雖然沒什麼意思但還是個注釋。
+ +
標示區段
+ +

以下為 div class="highlight" 的範例：

+ +
+

此為以 CSS 標示區段的範例，您可用這個方法讓某個程式碼區段更加顯眼。這個樣式最先是為 XUL 教學而加進 MDC 的。

+ +
而這是
+   標示之區段中
+   文字預先格式化的
+      範例
+
+
+ + + + + + + +
表格標題 1</td> +

<th>表格標題 2</td> <th>表格標題 3</td>

+
diff --git a/files/zh-tw/archive/meta_docs/index.html b/files/zh-tw/archive/meta_docs/index.html new file mode 100644 index 0000000000..52de2c8447 --- /dev/null +++ b/files/zh-tw/archive/meta_docs/index.html @@ -0,0 +1,12 @@ +--- +title: MDN "meta-documentation" archive +slug: Archive/Meta_docs +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs +--- +

Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.

+

{{LandingPageListSubpages}}

diff --git a/files/zh-tw/archive/misc_top_level/creating_a_web_based_tone_generator/index.html b/files/zh-tw/archive/misc_top_level/creating_a_web_based_tone_generator/index.html new file mode 100644 index 0000000000..590a003de0 --- /dev/null +++ b/files/zh-tw/archive/misc_top_level/creating_a_web_based_tone_generator/index.html @@ -0,0 +1,91 @@ +--- +title: 製作一個 Web 上的音調產生器 +slug: Archive/Misc_top_level/Creating_a_Web_based_tone_generator +translation_of: Archive/Misc_top_level/Creating_a_Web_based_tone_generator +--- +

這是一個簡單的音調產生器的範例。requestSoundData() 是產生音頻樣本的函式，這個函式在經過某個特定的時間間隔會透過 setInterval() 被呼叫。mozWriteAudio() 是在被呼叫時，把樣本寫入音頻串流的函式。為了確保總是有可以播放的樣本，這個範例設置了一個 500 ms 的緩衝。mozCurrentSampleOffset() 是一個用來知道正在被播放的樣本所在位置的函式，這的函式被這個範例用來確保我們填進緩衝的總是正在被播放後的 500 ms。

+
<!DOCTYPE html>
+<html>
+  <head>
+    <title>JavaScript 音頻寫入範例</title>
+  </head>
+  <body>
+    <input type="text" size="4" id="freq" value="440"><label for="hz">Hz</label>
+    <button onclick="start()">play</button>
+    <button onclick="stop()">stop</button>
+
+    <script type="text/javascript">
+      function AudioDataDestination(sampleRate, readFn) {
+        // 音頻輸出的初使化
+        var audio = new Audio();
+        audio.mozSetup(1, sampleRate);
+
+        var currentWritePosition = 0;
+        var prebufferSize = sampleRate / 2; // 緩衝 500ms
+        var tail = null;
+
+        // 這個函數會被定期呼叫以填充音頻輸出緩衝
+        setInterval(function() {
+          var written;
+          // 看看之前也沒有留下未被寫入的資料
+          if(tail) {
+            written = audio.mozWriteAudio(tail);
+            currentWritePosition += written;
+            if(written < tail.length) {
+              // 並非所有資料都被寫入了，把剩下的存下來...
+              tail = tail.slice(written);
+              return; // ... 並結束這個函式
+            }
+            tail = null;
+          }
+
+          // 看看是不是有需要再加新資料至音頻輸出
+          var currentPosition = audio.mozCurrentSampleOffset();
+          var available = currentPosition + prebufferSize - currentWritePosition;
+          if(available > 0) {
+            // 從回撥函式（callback）要一些音效資料
+            var soundData = new Float32Array(parseFloat(available));
+            readFn(soundData);
+
+            // 寫這些資料
+            written = audio.mozWriteAudio(soundData);
+            if(written < soundData.length) {
+              // 不是所有資料都被寫入了，存下剩下的部份。
+              tail = soundData.slice(written);
+            }
+            currentWritePosition += written;
+          }
+        }, 100);
+      }
+
+      // 控制並製造聲音
+
+      var frequency = 0, currentSoundSample;
+      var sampleRate = 44100;
+
+      function requestSoundData(soundData) {
+        if (!frequency) {
+          return; // 已被靜音
+        }
+
+        var k = 2* Math.PI * frequency / sampleRate;
+        for (var i=0, size=soundData.length; i<size; i++) {
+          soundData[i] = Math.sin(k * currentSoundSample++);
+        }
+      }
+
+      var audioDestination = new AudioDataDestination(sampleRate, requestSoundData);
+
+      function start() {
+        currentSoundSample = 0;
+        frequency = parseFloat(document.getElementById("freq").value);
+      }
+
+      function stop() {
+        frequency = 0;
+      }
+  </script>
+  </body>
+</html>
+
+

{{ languages( { "en": "en/Creating_a_Web_based_tone_generator"} ) }}

diff --git a/files/zh-tw/archive/misc_top_level/index.html b/files/zh-tw/archive/misc_top_level/index.html new file mode 100644 index 0000000000..0959a3b10b --- /dev/null +++ b/files/zh-tw/archive/misc_top_level/index.html @@ -0,0 +1,8 @@ +--- +title: Misc top level +slug: Archive/Misc_top_level +translation_of: Archive/Misc_top_level +--- +

In progress. These pages were moved from the top level of MDN in a spate of furious reorganization.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/zh-tw/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html b/files/zh-tw/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html new file mode 100644 index 0000000000..b0fd952355 --- /dev/null +++ b/files/zh-tw/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html @@ -0,0 +1,18 @@ +--- +title: '檔案同源政策 (Same-origin policy for file: URIs)' +slug: 'Archive/Misc_top_level/Same-origin_policy_for_file:_URIs' +translation_of: 'Archive/Misc_top_level/Same-origin_policy_for_file:_URIs' +--- +

在 Gecko 1.8 之前，任兩份檔案都會被視為同源(same-origin)，換句話說本機端的任一份HTML檔可以讀取任一份檔案。

+ +

自 Gacko 1.9 起，檔案讀取檔案開始受到限制：唯有當主檔案父資料夾是被讀取檔案的祖先資料夾 (ancestor directory) 的情況之下，檔案讀取才會被允許，但資料夾載入並非以此規範。

+ +

舉例來說，我們從 index.html 進入同一層資料夾的另一個 foo.html 檔，而這個 foo.html 檔想要讀取 bar.html 檔，只有當 bar.html 存放於 index.html 所在資料夾或是 index.html 所在資料夾底下的子資料夾中，foo.html 才能讀取 bar.html。

+ +

檔案同源政策會影響到包括 XMLHttpRequest, XSLT, 與 XBL 等同源政策的檢查。

+ +

至於跨 window 的 DOM 存取，基本上各檔案都被視為不同源，除了以下例外：若是檔案 B 被另一個檔案 A 載入(例如透過 iframe 或 window.open())，而檔案 A、B 遵照此份檔案同源政策可以被判定屬於同源，那麼當發生跨 window 的 DOM 存取時，也可以視為同源。

+ +

比如說 /home/user/subdir/foo.html 是一個 frameset，而它下嵌了 另一個 /home/user/subdir/subdir2/bar.html 的 frame, 那麼 foo.html 和 bar.html 可以視為同源，但如果 bar.html 的位置變成 /home/user/bar.html，那麼 foo.html 和 bar.html 便不可以視為同源。

+ +

另外當使用者想要關閉這些檔案同源政策檢查，可以變更 security.fileuri.strict_origin_policy 偏好設定為從預設 true 到 false。

diff --git a/files/zh-tw/archive/mozilla/creating_a_microsummary/index.html b/files/zh-tw/archive/mozilla/creating_a_microsummary/index.html new file mode 100644 index 0000000000..40afef30b6 --- /dev/null +++ b/files/zh-tw/archive/mozilla/creating_a_microsummary/index.html @@ -0,0 +1,214 @@ +--- +title: 製作即時摘要 +slug: Archive/Mozilla/Creating_a_microsummary +tags: + - 即時摘要 +translation_of: Archive/Mozilla/Creating_a_microsummary +--- +

+ 即時摘要來源（microsummary generator）內含一組從網頁中製出即時摘要的指令，而網頁能在 <head> 元素中放入 <link rel="microsummary"> 以指定適用的摘要來源。即時摘要來源檔案中如含有適用頁面列表，則也可以獨立安裝。

+

+ 在這份教學文件中，我們將建立 Spread Firefox 首頁的即時摘要來源，藉以顯示目前 Firefox 的總下載數。 (例： Fx 下載數: 174475447)。

+

+ 接下來我們會用一份 XSLT 樣式表將該網頁轉換為即時摘要、指定此摘要來源的適用頁面並了解摘要來源傳佈方式，讓使用者能下載及安裝。在這份文件中每階段新增的程式碼會以粗體顯示，方便您辨識。

+

+ 開始

+

+ 摘要來源是 XML 文件的一種，而其根元素為 <generator>、名稱空間 (namespace) 需指定為 http://www.mozilla.org/microsummaries/0.1，所以要建立一份摘要來源就先得在空的純文字檔中放入 XML 宣告及空的 <generator> 標籤：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1">
+</generator>
+
+

+ 命名

+

+ 每個即時摘要來源都必須有個名字，該名稱以 name 屬性記載、明確說明此摘要來源所建立的摘要主題。由於我們要建立的摘要來源將顯示 Firefox 總下載數，所以便命名為「Firefox 下載計數」：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+</generator>
+
+

+ 加上 XSLT 樣式表

+

+ 即時摘要來源檔案中必須含有一份 XSLT 樣式表，以便將網頁依樣式表設定轉換為即時摘要。同一份資料碰上不同的 XSLT 樣式便能轉換為「相貌」不同的文件，這便是 XSLT 威力所在。

+

+ 以下示範以 <template> 元素在摘要來源中添加 XSLT 樣式表：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+    </transform>
+  </template>
+</generator>
+
+

+ 即時摘要來源中可以放任何形式的 XSLT，設定為產生超文件也行，但 Firefox 目前只會顯示純文字內容。

+

+ 設定輸出格式

+

+ 由於 XSLT 樣式表會產岀文字摘要，所以 XSLT 的 <output> 元素需設定如下：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+    </transform>
+  </template>
+</generator>
+
+

+ 使用 XSLT <template>

+

+ XSLT 處理器會分別比對 XSLT 樣式表中每組 <template> 元素及文件中的節點。當 <template> 的 match 屬性設定與節點相符，處理器便依設定轉換文件。

+

+ 這種處理方式可以循序檢查網頁中每個節點，依據設定條件顯示內容，非常有用。不過本例只是要顯示 Spread Firefox 網站上的即時摘要，僅用一個 <template> 元素來找一回根元素下的內容即可：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ 加上下載次數

+

+ 若想將下載次數放到 XSLT 輸出的文件中，我們得在 XSLT 中的 template 元素加上 <value-of> 元素，而此 template 元素的 select 屬性中指定的 XPath 必須指向涵括計數器的節點。

+

+ XPath 是用來指定 HTML/XML 文件節點的語言，也有基本的節點內容處理函式。要得知能指向此節點的 XPath 陳述式，最輕鬆的方法就是使用 XPath Checker 擴充套件。

+

+ 安裝 XPath Checker 並重新啟動 Firefox 之後，先到 Spread Firefox 首頁去，找到 Firefox 下載次數（網頁右邊欄最下方的數字)，在上頭按下右鍵，於快捷選單中選擇 View XPath。此時 XPath Checker 會開啟一個新視窗，其中 XPath 欄位包含方才所選節點的 XPath 陳述式： id('download-count') 。

+

+ 在 XSLT 的 <template> 元素中加上一個 <value-of> 元素，其中 select 屬性便設為此 XPath 陳述式，如下：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ 加上文字

+

+ 為了在即時摘要中加上 Fx 下載數: 這段文字，我們必須將 <text> 元素放到 <template> 元素中文字該出現的地方。以下範例便放進一個內容為 Fx 下載數: 的 <text> 元素：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <text>Fx 下載數: </text>
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ 此處須留心 XSLT 標籤之間的空白字元並不會出現在輸出結果中，不像 HTML 會合併顯示為一個空格，所以要在字串後多加上一個空白以便區隔下載次數及字串。

+

+ 這麼一來，這個轉換 Spread Firefox 首頁為即時摘要的 XSLT 樣式便完成了。

+

+ 指定摘要來源的適用範圍

+

+ 摘要來源的轉換樣式已大工告成，接下來要指定此樣式適用的網頁。如果我們是 Spread Firefox 的網站管理員，可以在網頁上的 <head> 元素中直接加入 <link rel="microsummary"> 標籤，以便指定此網頁對應的摘要來源：

+
<head>
+  ...
+  <link rel="microsummary" href="path/to/our/generator.xml">
+</head>
+
+

+ 不過，由於我們並非該站網管，所以就得在檔案中規定此摘要來源的適用網頁，然後把摘要來源檔放到網路上供人下載。為了要指定適用網頁範圍，我們在 <generator> 元素中放上 <pages> 元素：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <text>Fx 下載數: </text>
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+  <pages>
+  </pages>
+</generator>
+
+

+ <pages> 元素中可以放進多個 <include> 及 <exclude> 元素。元素正如其名，<include> 元素能以規則運算式(regular expression)指定適用網頁，而 <exclude> 元素則以規則運算式指定不適用網頁。

+

+ 若無另加規定，則摘要來源預設不適用所有網頁。也就是說，你必須明確指定摘要來源之適用範圍，但如無必要可不必以 <exclude> 排除其他網頁。

+

+ 此處加上個 <include> 元素指定 Spread Firefox 首頁為適用範圍：

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Firefox 下載計數">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <text>Fx 下載數: </text>
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+  <pages>
+    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+  </pages>
+</generator>
+
+

+ 不熟悉規則運算式的話，可以參考建立即時摘要的規則運算式一文。

+

+ 安裝即時摘要來源

+

+ 現在萬事俱備，只差讓人能下載此摘要來源的機制。我們得先將摘要來源檔上傳到網路，接著再以一段 JavaScript 連結呼叫 Firefox 的 window.sidebar.addMicrosummaryGenerator() 方法以便下載安裝。

+

+ 舉例而言，如果摘要來源檔的位置在 http://people.mozilla.com/~myk/micro...-generator.xml，而我們希望使用者能從 http://people.mozilla.com/~myk/micro...ial/index.html 上下載安裝，就應該在 index.html 網頁上加上此段程式碼：

+
 <button onclick="window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">安裝 SpreadFirefox 首頁即時摘要來源！</button>
+
+

+ 不過，如果是不支援即時摘要的瀏覽器，按下此按鈕之後會產生 JavaScript 錯誤，所以我們應該幫使用者點忙、檢查他們的瀏覽器是否支援即時摘要，若不支援則顯示說明訊息：

+
<script>
+  const warning = "不好意思ㄋㄟ，你得用支援即時摘要的瀏覽器 (如 Firefox 2.0) 才能安裝這玩意喔！";
+  function addGenerator(url) {
+    if (typeof window.sidebar == "object" &&
+        typeof window.sidebar.addMicrosummaryGenerator == "function")
+      window.sidebar.addMicrosummaryGenerator(url);
+    else
+     alert(warning);
+  }
+</script>
+<button onclick="addGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">安裝 SpreadFirefox 首頁即時摘要來源！</button>
+
+

+ 附帶一提：

+ +

+ 結語

+

+ 現在你應該瞭解怎麼製作能顯示 Firefox 下載次數的即時摘要了。試著將 Spread Firefox 首頁存為書籤，然後在新增書籤對話方塊中按下名稱下拉式選單、選擇即時標題之後的項目即可。

+

+ 其他關於即時摘要的相關資訊，可以參考 Microsummaries 主題頁。

diff --git a/files/zh-tw/archive/mozilla/drag_and_drop/index.html b/files/zh-tw/archive/mozilla/drag_and_drop/index.html new file mode 100644 index 0000000000..b963b08118 --- /dev/null +++ b/files/zh-tw/archive/mozilla/drag_and_drop/index.html @@ -0,0 +1,142 @@ +--- +title: Drag and Drop +slug: Archive/Mozilla/Drag_and_drop +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/Drag_and_drop +--- +

{{ Next("Drag and Drop JavaScript Wrapper") }}

+

{{ deprecated_header("gecko1.9.1") }}

+
+ As of Gecko 1.9.1 (Firefox 3.5), these APIs are officially deprecated the newer, simpler, portable API should be used in their place.
+

This section describes how to implement objects that can be dragged around and dropped onto other objects.

+

The Drag and Drop Interface

+

Many user interfaces allow one to drag particular objects around within the interface. For example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. Mozilla and XUL provide a number of events that can handle when the user attempts to drag objects around.

+

A user can start dragging by holding down the mouse button and moving the mouse. The drag stops when the user releases the mouse. Event handlers are called when the user starts and ends dragging, and at various points in-between.

+

Mozilla implements dragging by using a drag session. When a user requests to drag something that can be dragged, a drag session should be started. The drag session handles updating the mouse cursor and where the object should be dropped. If something cannot be dragged, it should not start a drag session. Because the user generally has only one mouse, only one drag session is in use at a time.

+

Note that drag sessions can be created from within Mozilla itself or from other applications. Mozilla will translate the data being dragged as needed.

+

The list below describes the event handlers that can be called, which may be placed on any element. You only need to put values for the handlers where you need to do something when the event occurs.

+
+
+ ondrag {{ Fx_minversion_inline(3) }}
+
+ Called periodically throughout the drag and drop operation.
+
+ ondraggesture 
+
+ Called when the user starts dragging the element, which normally happens when the user holds down the mouse button and moves the mouse. The script in this handler should set up a drag session.
+
+ ondragstart {{ Fx_minversion_inline(3) }} 
+
+ An alias for ondraggesture; this is the HTML 5 spec name for the event and may be used in HTML or XUL; however, for backward compatibility with older versions of Firefox, you may wish to continue using ondraggesture in XUL.
+
+ ondragover 
+
+ This event handler is called for an element when something is being dragged over top of it. If the object can be dropped on the element, the drag session should be notified.
+
+ ondragenter 
+
+ Called for an element when the mouse pointer first moves over the element while something is being dragged. This might be used to change the appearance of the element to indicate to the user that the object can be dropped on it.
+
+ ondragexit 
+
+ Called for an element when the mouse pointer moves out of an element while something is being dragged. The is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication.
+
+ ondragdrop 
+
+ This event handler is called for an element when something is dropped on the element. At this point, the user has already released the mouse button. The element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself.
+
+ ondragend {{ Fx_minversion_inline(3) }} 
+
+ Called when the drag operation is finished.
+
+

There are two ways that drag and drop events can be handled. This first involves using the drag and drop XPCOM interfaces directly. The second is to use a JavaScript wrapper object that handles some of this for you. The code for this wrapper can be found in a file named {{ Source("toolkit/content/nsDragAndDrop.js nsDragAndDrop.js") }} which is contained in the widget-toolkit (or global) package.

+

XPCOM Drag and Drop interfaces

+

Two interfaces are used to support drag and drop. The first is a drag service, nsIDragService and the second is the drag session, nsIDragSession.

+

The nsIDragService is responsible for creating drag sessions when a drag starts, and removing the drag session when the drag is complete. The function invokeDragSession should be called to start a drag inside an ondraggesture event handler. Once this function is called, a drag has started.

+

The function invokeDragSession takes four parameters, as described below:

+
invokeDragSession(element,transferableArray,region,actions)
+
+
+
+ element 
+
+ A reference to the element that is being dragged. This can be retrieved by getting the property event.target during the event handler.
+
+ transferableArray 
+
+ An array of nsITransferable objects, one for each item being dragged. An array is used because you might want to drag several objects at once, such as a set of files.
+
+ region 
+
+ A region used for feedback indication. This should usually be set to null.
+
+ actions 
+
+ The actions that the drag uses. This should be set to one of the following constants, or several added together. The action can be changed during the drag depending on what is being dragged over.
+
+
+
+ nsIDragService.DRAGDROP_ACTION_NONE 
+
+
+
+ Used to indicate that no drag is valid.
+
+ nsIDragService.DRAGDROP_ACTION_COPY 
+
+ The item being dragged should be copied to its dropped location.
+
+ nsIDragService.DRAGDROP_ACTION_MOVE 
+
+ The item being dragged should be moved to its dropped location.
+
+ nsIDragService.DRAGDROP_ACTION_LINK 
+
+ A link (or shortcut or alias) to the item being dragged should be created in the dropped location.
+
+
+
+

The interface {{ interface("nsIDragService") }} also provides the function getCurrentSession which can be called from within the drag event handlers to get and modify the state of the drag. The function returns an object that implements {{ interface("nsIDragSession") }}.

+

The interface nsIDragSession is used to get and set properties of the drag that is currently occuring. The following properties and methods are available:

+
+
+ canDrop 
+
+ Set this property to true if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. Set the value to false if it doesn't make sense to drop the object on it. This should be changed in the ondragover and ondragenter event handlers.
+
+ dragAction 
+
+ Set to the current action to be performed, which should be one or more of the constants described earlier. This can be used to provide extra feedback to the user.
+
+ numDropItems 
+
+ The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.
+
+ getData(transfer,index) 
+
+ Get the data being dragged. The first argument should be an nsITransferable object to hold the data. The second argument, index, should be the index of the item to return.
+
+ sourceDocument 
+
+ The document where the drag started.
+
+ sourceNode 
+
+ The DOM node where the drag started.
+
+ isDataFlavorSupported(flavor) 
+
+ Returns true if the data being dragged contains data of the specified flavor.
+
+

{{ Next("Drag and Drop JavaScript Wrapper") }}

+
+

Original Document Information

+ +
diff --git a/files/zh-tw/archive/mozilla/firefox/index.html b/files/zh-tw/archive/mozilla/firefox/index.html new file mode 100644 index 0000000000..c87802d82f --- /dev/null +++ b/files/zh-tw/archive/mozilla/firefox/index.html @@ -0,0 +1,8 @@ +--- +title: Firefox +slug: Archive/Mozilla/Firefox +translation_of: Archive/Mozilla/Firefox +--- +

In progress. Out-of-date information about the Firefox project.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/zh-tw/archive/mozilla/firefox/using_microformats/index.html b/files/zh-tw/archive/mozilla/firefox/using_microformats/index.html new file mode 100644 index 0000000000..6e7260a691 --- /dev/null +++ b/files/zh-tw/archive/mozilla/firefox/using_microformats/index.html @@ -0,0 +1,78 @@ +--- +title: Firefox 3 Using Microformat +slug: Archive/Mozilla/Firefox/Using_microformats +translation_of: Archive/Mozilla/Firefox/Using_microformats +--- +

Microfotmats 讓網站可以提供語意化的資料給瀏覽器，這是為了讓瀏覽器不需知道如何剖析(parse)文件就可以呈現網頁資訊的摘要。Firefox 3 實做了一個全域的 microformats 物件(global microformats object) 以提供 microformats 的存取。這個物件與其 API 簡化了尋找、讀取 microfotmats 的工作。

+

載入 microformats API

+

Microformats 物件是用 Firefox 3 新加入的 JavaScript script loader 建立的。要使用這個 API，你首先需要載入這個物件：

+
Components.utils.import("resource://gre/modules/Microformats.js");
+

一旦載入了這個 microformats API，你就可以使用列在這裡的方式來管理 microformats，詳見 Parsing microformats in JavaScript。

+

預先定義好的 microformats

+

Firefox 3 實做了好幾種常見的 microformats，以下是其定義：

+
+
+ adr
+
+ 代表住址 (例如一條街或郵寄住址)。
+
+ geo
+
+ 代表使用緯度、經度表示的地理位置。
+
+ hCard
+
+ 代表個人的聯絡方式。
+
+ hCalendar
+
+ 代表行事曆上的一個約會。
+
+ tag
+
+ 用於新增標籤給其他 microformats。 +

方式

+

add()

+

新增一個 microformat 到一個 microformat module。

+

如果指定的名稱和現存的 microformat 相同，這個原來存在的 microformat 會被新增的所取代。

+ 
add(name, definition);
+
Parameters
+

 

+
+
+ name
+
+ 新增到 microformat module 的 microformat 名稱。
+
+ definition
+
+ 描述 microformat 的 JavaScript 結構，詳見 Describing microformats in JavaScript
+
+

count()

+

計算文件中符合我們指定的類型的 microformats 的數量

+ 
numMicroformats = Microformats.count(name, rootElement, recurseFrames)
+
Parameters
+

 

+
+
+ name
+
+ 要計算的 microformat 名稱。
+
+ rootElement
+
+ 可加可不加。代表由此開始搜尋的 DOM 元素，預設是 content.document (換句話說，也就是整份文件)。
+
+ recurseFrames
+
+ 可加可不加。如果是 true，搜尋時會連 child frames 一起搜尋，預設是 true
+
+
回傳值 (Return value)
+

是一個整數值，代表符合指定類型的 microformats 數量。

+

debug()

+

get()

+

getNamesFromNode()

+

getParent()

+

isMicroformat()

+
+
diff --git a/files/zh-tw/archive/mozilla/index.html b/files/zh-tw/archive/mozilla/index.html new file mode 100644 index 0000000000..0acec76e6d --- /dev/null +++ b/files/zh-tw/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +

These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+

{{SubpagesWithSummaries}}

diff --git a/files/zh-tw/archive/mozilla/marketplace/apis/index.html b/files/zh-tw/archive/mozilla/marketplace/apis/index.html new file mode 100644 index 0000000000..ead011ed63 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/apis/index.html @@ -0,0 +1,36 @@ +--- +title: 公用程式函式庫與 API +slug: Archive/Mozilla/Marketplace/APIs +translation_of: Archive/Mozilla/Marketplace/APIs +--- +
+

如果要將 Firefox Marketplace 的功能寫進 App 與 Web 頁面之中，就必須透過 Marketplace Utility Libraries、Web API、Marketplace API。本文將說明上述方式、使用時機，並提供進一步的說明文件連結。

+
+ +

Marketplace Utility Library

+ +

Marketplace Utility Library 可讓開發者避開複雜的 Web API 與 Marketplace API，進而簡化每天的程式撰寫作業。目前雖然只有 1 組函式庫，但隨著 Marketplace 功能不斷擴充，將會陸續提供其他函式庫：

+ + + +

Web API

+ +

Marketplace App 必須透過 Web API 才能提供特定功能：

+ + + +

Marketplace API

+ +

針對大多數的一般 App 撰寫需要，其實並用不到 Marketplace API。但某些 Activities (如設立自己的 App 商店) 就需要此 API。但根據開發者自己的需求，也許 Marketplace Utility Library 還是比較好用。

+ +

Marketplace API 的相關說明文件，均已置於 readthedocs.org 的這個網址上。如果你需要進一步了解這些 API，亦可加入 dev-marketplace 郵件群組。

+ +
+

Marketplace API 說明文件，均記錄了正在開發中的 Marketplace API。所以內含的 API 細節尚未公開於 Marketplace 之上。

+
+ +

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/faq/index.html b/files/zh-tw/archive/mozilla/marketplace/faq/index.html new file mode 100644 index 0000000000..ba8aa7493a --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/faq/index.html @@ -0,0 +1,154 @@ +--- +title: Firefox Marketplace 常見問題 +slug: Archive/Mozilla/Marketplace/FAQ +translation_of: Archive/Mozilla/Marketplace/FAQ +--- +
+

本篇文章將解答 Firefox Marketplace 多個常見的發佈問題。

+
+ +

帳戶管理

+ +

我該如何變更開發者帳戶的資訊？

+ +

進入 Firefox Marketplace 並登入自己的帳戶，將滑鼠游標置於齒輪圖示 (即設定選單) 之上，點選「Edit Account Settings」即可。

+ +

我該如何變更開發者付款的資訊？

+ +

進入 Firefox Marketplace 並登入自己的帳戶，將滑鼠游標置於齒輪圖示 (即設定選單) 之上。點選「My Apps」之後，找到你想變更付款資訊的 App，再點擊「Set Up Payments」即可。

+ +

我該到哪找到自己的銷售報表與對帳資訊？

+ +

進入 Firefox Marketplace 並登入自己的帳戶，將滑鼠游標置於齒輪圖示 (即設定選單) 之上。點選「My Apps」之後，找到你需要相關資料的 App 即可。

+ +

如果我們是多人組成的開發團隊或公司，該如何管理帳戶資訊？

+ +

進入 Firefox Marketplace 並登入自己的帳戶，將滑鼠游標置於齒輪圖示 (即設定選單) 之上。點選「My Apps」之後，找到你想變更團隊細節的 App 即可。

+ +

我該如何重新命名 App？

+ +

如果你想在 Marketplace 審查之後變更 App 的名稱，就必須再次提交 App 通過審查才行。請參閱更新 App 以進一步了解。

+ +

我該如何進入 Firefox Marketplace 除錯設定？

+ +

登入之後進入 Firefox Marketplace，在搜尋列中輸入「:debug」。

+ +

接著你就會看到自己 Marketplace 帳戶的除錯畫面。你可在此畫面中清除 Marketplace 網站、提交記錄、檢視設定、活動記錄等等相關的 cookies 與 localStorage。

+ +

如果我把 App 提交到自己目前所在地以外的地方，我該如何檢視這些 App？

+ +

如果你自己目前所在之處或擁有手機 SIM 卡的地區，和你 App 發佈地區並不相同，則可透過下列步驟檢視該 App：

+ +
    +
  1. 進入 Firefox Marketplace 除錯設定 (可參閱上一題)。
    2. +
  2. 透過「Region Override」與「Carrier Override」選項，選出自己的所在地區或營運商 (只要選完就會立刻更新這些設定)。
    3. +
  3. 重新整理/載入 Marketplace。
    4. +
+ +

你可以先試著為 App 隨便選個分類，確認系統更新過了相關設定。

+ +

App 提交與審查程序

+ +

我該如何提交新的 App？

+ +

可參閱《將 App 提交至 Firefox Marketplace》中的詳細步驟。

+ +

App 核准程序為何？

+ +

請參閱《Marketplace 審查準則》以了解審查程序的相關準則。

+ +

是否有快速審查程序？所採用的準則是否不同？

+ +

如果開發者正好有絕佳的商機需求，或必須儘快釋出重要修復檔案，即可申請快速審查 App。若需 Marketplace 進行快速審查，可寄發電子郵件到 mozilla.appreview，或加入 irc.mozilla.org 中的「#app-reviewers」IRC 頻道。我們會儘快完成快速審查，但不保證審查人員能配合任何特定時間。

+ +
+

注意：對 App 審查團隊來說，「App 快速審查」也算是額外的工作之一。若你有興趣協助我們的審查作業，歡迎透過 Firefox App 審查者申請表申請。

+
+ +

我的 App 需要遵守內容政策嗎？

+ +

當然！請參閱《Marketplace 審查準則》中的〈內容〉一章，了解 Mozilla 的內容政策。

+ +

如果 App 遭退回或移除，我該如何上訴？

+ +

如果想為遭退回的 App 上訴，則可直接回覆 App 退回通知的電子郵件 (所有 Marketplace 通知郵件的末端，均告知開發者可直接回覆該電子郵件以提出問題)；或可透過 irc.mozilla.org 上的「#app-reviewers」IRC 頻道向我們溝通。

+ +

付款

+ +

Firefox Marketplace 如何運作付款作業？

+ +

Mozilla 提供多種付款方式，包含付費 App、免費增值 (Freemium) App、App 內部付費機制 (In-app payments)。若需進一步資訊，可參閱《Marketplace Payments guide》。

+ +

開發者收益的拆帳方式為何？

+ +

開發者將收到預扣增值稅 (Value Added Tax，VAT) 與費用之後金額的 70%。我們先假設美金訂價 $.99 (Tier 10)，歐元訂價則為 €.89；而增值稅率為 20% (根據英國標準增值稅率) 為例，則預扣增值稅之後的價格為 €.74，亦約為 $.99 (有時匯兌之後的價格點數可能變高，有時也會變低)。開發者最後將收到 €.74 的七成金額。

+ +

若需價格點數與訂價的相關資訊，可參閱《制定 App 的價格》。

+ +

Mozilla 也會拆得一部分的帳嗎？

+ +

會。為了維持 Firefox Marketplace 的運作、持續強化 App 平台、支付每次購買行為所產生的交易費用。Mozilla 將收取預扣增值稅後金額的三成，再拆分給 Mozilla、行動網路營運商、付款服務供應商 (如 Bango) 共三方收取。

+ +

我一定要使用 Firefox Marketplace 的付款系統嗎？

+ +

若要讓消費者從 Firefox Marketplace 下載付費 App，就必須使用 Firefox Marketplace 付款系統。我們不會要求 In-app payments 也同樣使用 Marketplace 付款系統，但目前 Firefox OS 中僅建構了 navigator.mozPay() 函式 (用於 In-app payments)，而該函式就採用 Firefox Marketplace 付款系統。我們以後會讓開發者針對 In-app payments 選用任何付款系統。

+ +

將自己的 App 放上 Firefox Marketplace 後的交易費用？

+ +

需支付預扣稅額訂價的 30%。換句話說，因為 Marketplace 提供的含稅價格點數已經納入了增值稅 (針對需課增值稅的地區)，所以在完成交易之後隨即扣除增值稅，讓開發者取得訂價金額的 70%。

+ +

我需要自行設定銷售稅或增值稅率嗎？

+ +

不用。針對需課稅的地區，Marketplace 的價格點數均已包含了增值稅。而銷售稅的部分，均另由付款服務供應商列入帳單之中。

+ +

我該如何分開付款？

+ +

Firefox Marketplace 目前尚未提供分開付款的功能。

+ +

我能提交免費 App 嗎？會向我收費嗎？

+ +

當然。歡迎開發者在 Firefox Marketplace 中提交免費 App，且 Mozilla 不會對免費 App 收取任何費用。

+ +

付費 App 還能搭配 In-app payments 嗎？

+ +

可以。

+ +

退款程序為何？

+ +

根據付款方式的不同，退款程序可能由電信營運商、信用卡公司，或付款服務供應商 (如 Bango) 進行。若消費者選用電信帳單代繳的方式，則依照電信營運商的退款政策處理。目前尚無營運商提供退款服務。Bango 則是針對信用卡提供前端支援服務。任何退款均將從開發者的收益之中扣除。

+ +

服務條款與開發者協議均提供了退款政策。一般來說，Marketplace 不會支付退款，但會要求 Bango 進行退款程序。若消費者選用電信帳單代繳的方式，就必須要求電信營運商退款並修正電信帳單。

+ +

如何處理詐騙的購買行為？

+ +

尚待完善討論。

+ +

Marketplace 如何處理多樣的幣別？

+ +

根據消費者所選的所在地區，即顯示該地區的預設幣別。另針對付款作業，若消費者目前身處於原本設定的地區之外，就會根據他們收取帳單的地區 (即 SIM 卡所在地)，或根據其所在位置收款。如此可避免詐欺行為。

+ +

付款時程為何？開發者多久能收到銷售 App 的應得款項？

+ +

根據付款服務供應商而有所不同；而目前仍由 Bango 負責所有地區的付款作業。開發者可直接與 Bango 洽詢，且每個月均會收到自行對帳用的發票。因為行動服務營運商必須向消費者收取並匯出相關款項，所以支付日期也各有差異。各個國家又會有所不同。而消費者如果採用信用卡付款，都能讓開發者迅速收取款項。若選用電信帳單代繳方式，可能需時 30 ~ 90 天不等。

+ +

開發者應如何處理退款？

+ +

請參閱《Marketplace payments》中的〈Refunds〉一章。

+ +

Firefox Marketplace 可進行臨時銷售或變更訂價嗎？

+ +

我們正規劃價格點數的變更功能，讓開發者能針對「試用期」或「正式銷售」而設定不同的價格。

+ +

開發者能銷售 Firefox 的附加元件 (add-ons) 嗎？

+ +

目前 Firefox Marketplace 僅供銷售 App。我們希望很快就能提供其他內容的銷售服務。

+ +

技術問題

+ +

誰將可托管 App？

+ +

開發者可在自己的伺服器上托管 App 的所有檔案。但將 App 提交到 Firefox Marketplace 之後，就必須提供 App 的 manifest 檔案網址，以利 Marketplace 進行讀取並檢驗。開發者另可上傳圖示、截圖等元素，以能順利在 Firefox Marketplace 推銷自己的 App。可參閱《將 App 提交至 Firefox Marketplace》進一步了解。

+ +

如何從 App 直接啟動 Marketplace？

+ +

開發者可透過 Web Activities，從自己的 App 或網站啟動 Marketplace。而 Marketplace 所支援的 activities 均記錄於 Github 之上。

diff --git a/files/zh-tw/archive/mozilla/marketplace/index.html b/files/zh-tw/archive/mozilla/marketplace/index.html new file mode 100644 index 0000000000..5ce3b790b0 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/index.html @@ -0,0 +1,159 @@ +--- +title: Firefox Marketplace +slug: Archive/Mozilla/Marketplace +tags: + - Apps + - B2G + - Firefox OS + - Marketplace + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace +--- +
Firefox Marketplace 為開放且非專利的線上商城，針對以 HTML5 所撰寫的 Web App 所建構。若開發者準備在 Firefox Marketplace 上發佈 App，均可於此專區中找到相關資訊。另有其他指南可帶領你成功打造 App、提供其他選項、將自己的心血轉為實質收益、發佈＼更新 App，更有函式庫與 API 可確實發揮 Marketplace 的特色。
+ +
+
+

透過標準的 Web 技術、語言、工具，Firefox Marketplace 可供你發佈免費＼付費的 Open Web App。這些可為封裝式 (Packaged) App，於 Firefox 中執行；或可為托管＼架設式 (Hosted) App，置於你自己的伺服器之上。已上架的 App 則可用於 Firefox 桌機版、Android 裝置、Firefox OS 手機。而使用者可透過 App 的精選、分類、搜尋等區塊，輕鬆找到自己喜愛的 App。接著就能立刻安裝免費 App，或透過目前持續成長中的信用卡付款＼電信帳單代收的功能，購買付費 App。

+ +
+
+

準備發佈 App

+ +
+
不論你撰寫 App 是純粹好玩或想創造收益，你都會希望有許多人發現、使用、享受你的作品。本章節將解釋該如何拓展能見度，並建立消費者社群。
+
+ +

App 發佈選項

+ +
+
到底要用封裝式或托管＼架設式 App？了解應如何發表自己 App 的內容。且除了 Firefox OS 之外，亦可讓 App 躍上 Android 裝置與桌上型電腦。
+
建立自己的 App 商城
+
你不一定要透過 Firefox Marketplace 發佈自己的 App。了解應如何建立自己的 App 商城，或為其他開發者的 App 建立商城。
+
+ +

轉為實質收益

+ +
+
如果你負責撰寫 App，則可透過本章節了解 Open Web App 與 Firefox Marketplace 所提供的收益選項。另亦提供 App 內付款 (In-app payments) 的詳細資訊。
+
+
+ +
+

發佈 App

+ +
+
快向世界發佈你的 App。了解應如何讓 Firefox Marketplace 發佈 App，包含 App 提交程序、審查程序、更新程序、了解上架後的效益，並觀看消費者的反應意見。
+
+ +

App 開發工具

+ +
+
Firefox Marketplace 函式庫與 API
+
概略了解目前可用的函式庫與 API，為自己在 Marketplace 上的 App 添增功能。
+
Firefox OS 的「應用程式管理員 (App Manager)」
+
從桌上型電腦為 Open Web App 測試、佈署、除錯的主要工具。
+
App 開發工具
+
完整工具清單，可供你有效率的開發 Open Web App 並樂在其中。
+
+
+
+
+
+ + + +
    +
  1. 準備發佈 App + +
      +
    1. 介紹
      2. +
    2. 決定所要撰寫的東西
      3. +
    3. 了解目標消費者
      4. +
    4. 選擇自己的營運模式
      5. +
    5. 撰寫高品質 App
      6. +
    6. 當地語系的 App
      7. +
    7. 推銷自己的 App
      8. +
    8. 建立自己的群組
      9. +
    +
    2. +
  2. 發佈選項 +
      +
    1. 介紹
      2. +
    2. 封裝式 (Packaged) App
      3. +
    3. 托管＼架設式 (Hosted) App
      4. +
    4. 要封裝抑或托管？
      5. +
    5. 適合 Android 的 Open Web App
      6. +
    6. 適合桌上型電腦的 Open Web App
      7. +
    7. 自行發佈 App
      8. +
    8. 建立自己的商城
      9. +
    +
    3. +
  3. 產生實質收益 +
      +
    1. 介紹
      2. +
    2. 用自己的 App 創造收益
      3. +
    3. App 付款指南
      4. +
    4. 應用程式內付款 (In-app payments) +
        +
      1. 介紹
        2. +
      2. 透過 mozPay
        3. +
      3. 透過 fxPay
        4. +
      +
      5. +
    5. 驗證收據
      6. +
    6. App 定價表
      7. +
    7. 付款服務狀態
      8. +
    +
    4. +
  4. App 發佈概述 +
      +
    1. 介紹
      2. +
    2. 提交作業檢查清單
      3. +
    3. Marketplace 審查準則
      4. +
    4. 為 App 添增子網域
      5. +
    5. 策略與指南 +
        +
      1. 介紹
        2. +
      2. Marketplace 截圖準則
        3. +
      3. 隱私權政策
        4. +
      4. App 測試與疑難排解
        5. +
      +
      6. +
    +
    5. +
  5. 提交 App +
      +
    1. 概述
      2. +
    2. Step 1：登入
      3. +
    3. Step 2：上傳
      4. +
    4. Step 3：列出細節
      5. +
    5. Step 4：後續步驟
      6. +
    6. Step 5：App 評分
      7. +
    7. Step 6：制定 App 的價格 +
        +
      1. 介紹
        2. +
      2. 付款帳戶
        3. +
      3. Bango
        4. +
      4. Boku
        5. +
      5. 用「升級」的方式推廣
        6. +
      6. fxPay 的 App 產品
        7. +
      +
      8. +
    8. Step 7：定義團隊成員
      9. +
    9. Step 8：檢視列表
      10. +
    10. Step 9：編輯其他本地化的內容
      11. +
    +
    6. +
  6. 管理並更新已發佈的 App +
      +
    1. 介紹
      2. +
    2. App 的狀態
      3. +
    3. 更新 App
      4. +
    4. App 狀態
      5. +
    +
    7. +
  7. 函式庫與 API
    8. +
  8. Firefox Marketplace 常見問題
    9. +
diff --git a/files/zh-tw/archive/mozilla/marketplace/marketplace_apis/index.html b/files/zh-tw/archive/mozilla/marketplace/marketplace_apis/index.html new file mode 100644 index 0000000000..372284a029 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/marketplace_apis/index.html @@ -0,0 +1,69 @@ +--- +title: Firefox Marketplace API +slug: Archive/Mozilla/Marketplace/Marketplace_APIs +translation_of: Archive/Mozilla/Marketplace/Marketplace_APIs +--- +
+

提供 Firefox Marketplace API 的主要參考文章，可協助你進行 App 提交作業、設定 App 的付款帳戶，及其他更多相關重要步驟。

+
+
+
+
+
+ Marketplace 公用程式函式庫
+
+ 可協助你順利進行 Firefox Marketplace 的相關作業。你可將內含的 JavaScript 函式庫用於自己的 App 之內，以輕鬆處理應用程式內付款 (In-app payments) 並驗證付款收據。
+
+ Submission API
+
+ Submission API 可讓你檢驗並更新 App，並在安裝之前提取 App 的可用資訊。
+
+ Payment API
+
+ Payment API 可讓你取得 In-app payments 的資訊，以及不同國家的訂價情形。
+
+ 其他 Marketplace API
+
+ Firefox Marketplace API 的完整說明文件。
+
+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/app_payments_guide/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/app_payments_guide/index.html new file mode 100644 index 0000000000..a1f464f224 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/app_payments_guide/index.html @@ -0,0 +1,48 @@ +--- +title: 建構付費 App +slug: Archive/Mozilla/Marketplace/Monetization/App_payments_guide +translation_of: Archive/Marketplace/Monetization/App_payments_guide +--- +
+

Firefox Marketplace 的消費者有兩種需要付款的情形：
+ 1). 購買 App 需付款 (付費 App)
+ 2). 在安裝 App 之後另外購買某樣東西需付款；即 App 內付款機制 (In-app payment)
+ 本文即提供付費 App 所需的程式碼與作業流程，另外將有另一篇文章說明 In-app payments。

+
+

選擇封裝方式 (Packaged 或 Hosted)

+

在了解付款方式之前，先決定自己的 App 應該是封裝式 (Packaged)，或架設/托管式 (Hosted)。如果想處理為封裝式 App，就必須遵守內容安全政策 (Content Security Policy，CSP)。可參閱下列說明以進一步了解。

+ +

建構付費 App

+
+

任何 App 都能設定為付費 App，也都能是封裝式或架設/托管式 App；完全不需特別的權限。在將 App 提交到 Firefox Marketplace 時，只要勾選使其成為付費 App 即可。但開發者需讓 App 驗證自己的銷售收據，才能確認收到帳款。接下來就是應進行的步驟。

+

將 installs_allowed_from 添增到 manifest.webapp

+

首先必須將 installs_allowed_from 欄位添增到 App 的 manifest 檔案中。另給予如下的 Firefox Marketplace 網址：

+ 
"installs_allowed_from": [ "https://marketplace.firefox.com" ]
+

這個步驟屬於收據驗證作業的一部分，才能讓系統確認 App 來自於收款的商店。

+
+

驗證收據

+

只要從 Marketplace 售出 App 之後，隨即會產生該筆銷售的數位收據。開發者應該為自己的 App 植入程式碼，讓 App 執行時能一併驗證銷售收據。我們強烈建議，但不強制驗證收據。此查核作業可避免消費者安裝了 App 卻未付費。

+

Mozilla 另負責維護 JavaScript 輔助函式庫 (Helper)，即所謂的 receiptverifier，只要少量程式碼即可驗證收據。只要將下列 receiptverifier 函式庫加入 App 即可：

+ +

再將下列程式碼加入 App (更改內文以符合自己的 App)，即可驗證收據：

+
mozmarket.receipts.Prompter({
+  storeURL: "https://marketplace.firefox.com/app/your-app",
+  supportHTML: '<a href="mailto:you@yourapp.com">email you@yourapp.com</a>',
+  verify: true
+});
+

正常只要啟動 App 就會開始驗證收據。如果確認收據有效，即可釋放 App 的資源；反之可停止 App 執行。

+
+

注意：若要進一步建立自己的收據驗證器，可參閱驗證收據。

+
+

另可參閱

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/app_pricing/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/app_pricing/index.html new file mode 100644 index 0000000000..4d7c3fbc32 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/app_pricing/index.html @@ -0,0 +1,3698 @@ +--- +title: 制定 App 的價格 +slug: Archive/Mozilla/Marketplace/Monetization/App_pricing +translation_of: Archive/Marketplace/Monetization/App_pricing +--- +
+

本文將為開發者說明在 Firefox Marketplace 中制定 App 價格與收款的方法。因為開發者可能在 Firefox Marketplace 中跨國制定不同的價格，所以定價方式有點複雜。本文即提供相關資訊，如訂價、拆帳、課稅、付款方式、應收帳款、防止詐騙等等。

+
+ +

以「價格點數」定價

+ +

在 Firefox Marketplace 中，開發者必須透過固定的「價格點數 (Price point)」完成定價。開發者可選擇任一價格點數，而該價格點數隨即套用為各地區通用貨幣的等值定價。針對開發者所選定 App 或應用程式內部付費 (In-app Payments) 的販售地區，當地消費者就能透過系統得知 App 的定價。價格點數範圍從 US$0.10 (點數 1) 到 US$49.99 (點數 140)。Firefox Marketplace 中的 App 與 In-app Payments，均適用價格點數的定價方式。

+ +

範例：若 App 設定為「10」價格點數，則在流通美金的地區就是售價 US$0.99 (未含當地銷售稅)；流通歐元的地區就是售價 €0.89 (已含歐洲增值稅)。在哥倫比亞的電信帳單代繳售價為 COP$2060.00 (包含哥倫比亞區的增值稅)，信用卡繳款的售價則為 US$0.99。

+ +

價格點數表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Price pointAustriaBelgiumBrazilChileColombiaCyprusEstoniaFinlandFranceGermanyGreeceHungaryIrelandItalyLatviaLithuaniaLuxembourgMaltaMexicoNetherlandsPeruPolandPortugalSlovakiaSloveniaSpainUnited KingdomUnited StatesUruguayVenezuelaRest of World
VAT/Tax included in priceunknownunknownnoyes&nbsp;(19%)yes&nbsp;(16%)unknownunknownunknownunknownyes&nbsp;(19%)yes&nbsp;(23%)yes&nbsp;(27%)unknownyes&nbsp;(22%)unknownunknownunknownunknownyes&nbsp;(16%)unknownyes&nbsp;(18%)yes&nbsp;(23%)unknownunknownunknownyes&nbsp;(21%)yes&nbsp;(20%)noyes&nbsp;(22%)yes&nbsp;(12%)no
Tier 0 + + €0 + + + + €0 + + + + $0 + + + + $0 + + + + $0 + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + Ft&nbsp;0 + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + $0 + + + + €0 + + + + $0 + + + + 0&nbsp;zł + + + + €0 + + + + €0 + + + + €0 + + + + €0 + + + + £0 + + + + $0 + + + + $0 + + + + $0 + + + + $0 + [1] + +
Tier 1 + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + €0.1 + [2] + + + + €0.1 + [2] + + + + Ft&nbsp;25 + [2] + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + 0.49&nbsp;zł + [2] + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + +
Tier 5 + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + €0.25 + [2] + + + + €0.25 + [2] + + + + Ft&nbsp;70 + [2] + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + $3.75 + [2] + + + + n/a + + + + n/a + + + + 0.98&nbsp;zł + [2] + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + +
Tier 7 + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + €0.4 + [2] + + + + €0.4 + [2] + + + + Ft&nbsp;135 + [2] + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + $7.51 + [2] + + + + n/a + + + + n/a + + + + 1.99&nbsp;zł + [2] + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + + + + n/a + +
Tier 10 + + €0.89 + [1] + + + + €0.89 + [1] + + + + $0.99 + [1] + + + + $0.99 + [1] + + + + $2060 + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + + + + €0.89 + + + + Ft&nbsp;270 + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + $15 + + + + €0.89 + [1] + + + + $0.99 + [1] + + + + 3.99&nbsp;zł + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + €0.89 + [1] + + + + £0.75 + [1] + + + + $0.99 + [1] + + + + $0.99 + [1] + + + + $0.99 + [1] + + + + $0.99 + [1] + +
Tier 20 + + €1.89 + [1] + + + + €1.89 + [1] + + + + $1.99 + [1] + + + + $1.99 + [1] + + + + $4150 + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + + + + €1.89 + + + + Ft&nbsp;545 + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + $30 + + + + €1.89 + [1] + + + + $1.99 + [1] + + + + 7.69&nbsp;zł + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + €1.89 + [1] + + + + £1.5 + [1] + + + + $1.99 + [1] + + + + $1.99 + [1] + + + + $1.99 + [1] + + + + $1.99 + [1] + +
Tier 30 + + €2.79 + [1] + + + + €2.79 + [1] + + + + $2.99 + [1] + + + + $2.99 + [1] + + + + $6240 + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + + + + €2.79 + + + + Ft&nbsp;820 + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + $45 + + + + €2.79 + [1] + + + + $2.99 + [1] + + + + 11.59&nbsp;zł + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + €2.79 + [1] + + + + £2.25 + [1] + + + + $2.99 + [1] + + + + $2.99 + [1] + + + + $2.99 + [1] + + + + $2.99 + [1] + +
Tier 40 + + €3.79 + [1] + + + + €3.79 + [1] + + + + $3.99 + [1] + + + + $3.99 + [1] + + + + $8320 + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + + + + €3.79 + + + + Ft&nbsp;1095 + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + $60 + + + + €3.79 + [1] + + + + $3.99 + [1] + + + + 15.49&nbsp;zł + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + €3.79 + [1] + + + + £3 + [1] + + + + $3.99 + [1] + + + + $3.99 + [1] + + + + $3.99 + [1] + + + + $3.99 + [1] + +
Tier 50 + + €4.69 + [1] + + + + €4.69 + [1] + + + + $4.99 + [1] + + + + $4.99 + [1] + + + + $10420 + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + + + + €4.69 + + + + Ft&nbsp;1360 + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + $75 + [1] + + + + €4.69 + [1] + + + + $4.99 + [1] + + + + 19.5&nbsp;zł + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + €4.69 + [1] + + + + £3.75 + [1] + + + + $4.99 + [1] + + + + $4.99 + [1] + + + + $4.99 + [1] + + + + $4.99 + [1] + +
Tier 60 + + €6.59 + [1] + + + + €6.59 + [1] + + + + $6.99 + [1] + + + + $6.99 + [1] + + + + $14600 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + + + + €6.59 + + + + Ft&nbsp;1900 + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + $105 + [1] + + + + €6.59 + [1] + + + + $6.99 + [1] + + + + 26.99&nbsp;zł + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + €6.59 + [1] + + + + £5.25 + [1] + + + + $6.99 + [1] + + + + $6.99 + [1] + + + + $6.99 + [1] + + + + $6.99 + [1] + +
Tier 70 + + €9.49 + [1] + + + + €9.49 + [1] + + + + $9.99 + [1] + + + + $9.99 + [1] + + + + $20840 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + + + + €9.49 + + + + Ft&nbsp;2720 + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + $150 + [1] + + + + €9.49 + [1] + + + + $9.99 + [1] + + + + 38.79&nbsp;zł + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + €9.49 + [1] + + + + £7.5 + [1] + + + + $9.99 + [1] + + + + $9.99 + [1] + + + + $9.99 + [1] + + + + $9.99 + [1] + +
Tier 80 + + €11.59 + [1] + + + + €11.59 + [1] + + + + $12.49 + [1] + + + + $12.49 + [1] + + + + $26070 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + + + + €11.59 + + + + Ft&nbsp;3400 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + $185 + [1] + + + + €11.59 + [1] + + + + $12.49 + [1] + + + + 48.49&nbsp;zł + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + €11.59 + [1] + + + + £9.5 + [1] + + + + $12.49 + [1] + + + + $12.49 + [1] + + + + $12.49 + [1] + + + + $12.49 + [1] + +
Tier 90 + + €14.19 + [1] + + + + €14.19 + [1] + + + + $14.99 + [1] + + + + $14.99 + [1] + + + + $31280 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + + + + €14.19 + + + + Ft&nbsp;4080 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + $225 + [1] + + + + €14.19 + [1] + + + + $14.99 + [1] + + + + 57.99&nbsp;zł + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + €14.19 + [1] + + + + £11.25 + [1] + + + + $14.99 + [1] + + + + $14.99 + [1] + + + + $14.99 + [1] + + + + $14.99 + [1] + +
Tier 100 + + €18.99 + [1] + + + + €18.99 + [1] + + + + $19.99 + [1] + + + + $19.99 + [1] + + + + $41720 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + + + + €18.99 + + + + Ft&nbsp;5450 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + $300 + [1] + + + + €18.99 + [1] + + + + $19.99 + [1] + + + + 77.49&nbsp;zł + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + €18.99 + [1] + + + + £15 + [1] + + + + $19.99 + [1] + + + + $19.99 + [1] + + + + $19.99 + [1] + + + + $19.99 + [1] + +
Tier 110 + + €23.59 + [1] + + + + €23.59 + [1] + + + + $24.99 + [1] + + + + $24.99 + [1] + + + + $52160 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + + + + €23.59 + + + + Ft&nbsp;6800 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + $375 + [1] + + + + €23.59 + [1] + + + + $24.99 + [1] + + + + 96.99&nbsp;zł + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + €23.59 + [1] + + + + £18.75 + [1] + + + + $24.99 + [1] + + + + $24.99 + [1] + + + + $24.99 + [1] + + + + $24.99 + [1] + +
Tier 120 + + €28.39 + [1] + + + + €28.39 + [1] + + + + $29.99 + [1] + + + + $29.99 + [1] + + + + $62580 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + + + + €28.39 + + + + Ft&nbsp;8170 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + $450 + [1] + + + + €28.39 + [1] + + + + $29.99 + [1] + + + + 116.49&nbsp;zł + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + €28.39 + [1] + + + + £22.5 + [1] + + + + $29.99 + [1] + + + + $29.99 + [1] + + + + $29.99 + [1] + + + + $29.99 + [1] + +
Last updated: 1519101168023.
+ + +

制定自己產品的價格

+ +

如果要為自己的 App 或 In-app 產品定價，就必須選擇價格點數與想要銷售的地區。對 App 來說，選擇銷售國家並不會限制其他國家的消費者購買 App，只會決定 App 所將上架的國家 (可能不只一個國家)。即使消費者身處其他國家，只要付款方式亦適用 App 的上架國家，就同樣可購買該 App。

+ +

價格點數表如何運作？

+ +

Marketplace 將針對各種幣別預先設定匯率，再轉換為美金以外的計價並四捨五入，以更為貼近市場友善的數字。四捨五入的價格與外幣匯率的波動，都代表美金以外的定價不會隨時等值於美金現價。除非需穩定多國換匯之後的相對價格，否則美金以外的定價均將保持不動。Mozilla 也不會刻意常常調整定價，且最快每六個月才會調價一次。價格點數一般均保持在美金定價的 1% ~ 2% 之內。而由於某些國家定價另納入了增值稅，因此可能超出此範圍。

+ +

含稅價與未稅價的價格點數

+ +

顯示於不同地區的價格可能含稅或未稅。含稅價代表該價格已含稅 (一般為增值稅，VAT) 並顯示給消費者知道。未稅價則代表稅額 (若有對應稅額) 將另外再加至顯示的價格中。

+ +

各國家與地區的增值稅略有不同，但一般均依照 App 販售國家 (由電信營運商收取) 的增值稅率而定；或是在英國適用增值稅的地區以信用卡付款，則為 20% 增值稅率。一旦消費者確定付款之後，就會根據其付款資訊中登記地區的幣別，或目前所在地區的幣別計算。

+ +

如果消費者所在地區顯示的是未稅價，則當地稅額與費用將再加入 App 售價之中。消費者可能要收到發票，或由銀行/電信營運商寄發對帳單之後，才會看到實際的稅額。

+ +

如何拆帳？

+ +

在將自己設定為「開發者」的付款帳戶之後，即可選擇往後收款的幣別。目前支援的付款幣別包含美金 ($)、歐元 (€)、英鎊 (£)。若是含稅價格，則開發者在正常情況下會收到「消費者購買 App 金額扣除稅額與特定費用」的 70%。若是未稅價格，則會收到「消費者針對 App 定價表付款」的 70%；應付稅額另再加到消費者實際付款額之中。由於匯率浮動與增殖稅率的差異，各地區的實收金額也有所變動。

+ +

而上述金額的另外 30%，將由 Mozilla、電信營運商、第三方支付供應商拆帳。其內包含商業交易程序的相關交易與服務費用。根據目前既定的分配方式，Mozilla 約將收取 5% ~ 7.5%。

+ +
+

若選用電信帳單代繳方式，則開發者所能收到的款項可能又有差異。請到付款狀態了解相關細節，進一步了解該國電信營運商的拆帳規定。

+
+ +

付款方式：電信帳單代繳與信用卡

+ +

透過 Firefox Marketplace 販售自己 App 的絕佳優點之一，就是能直接讓消費者透過行動電話帳單付款。對信用卡尚未普及的新興市場而言，此特色絕對是目前行動付款的重要媒介。

+ +

目前為止，電信營運商必須與 Mozilla 簽訂合約之後，才能在所屬地區提供電信帳單代繳的服務。消費者必須申請該電信營運商的 SIM 卡並預繳特定金額，以順利支付 App 或 In-app Payment 的款項。當然，消費者亦可透過信用卡購買 App。

+ +

針對客戶透過自己行動電話號碼付費的機制，某些電信營運商另設有最低與最高額度，而且各家營運商均有不同。若 App 定價超出該額度，則款項預設轉為信用卡支付；但又並非所有消費者均擁有信用卡。又有些地區並無法和營運商值接建立帳單服務，而必須透過信用卡付款，如此就限定需以美金、歐元、英鎊購買 App。

+ +
+

注意：針對信用卡部分，目前最低收費款項為 10 價格點數 (即美金 $0.99 元整)；而最高款項為美金 $30.00 元整。接受 Visa® 與 MasterCard® 信用卡。

+
+ +

慎防詐騙

+ +

第三方支付供應商應已有多種防止詐騙的方式。為了減少詐騙行為，目前僅限消費者實際所在地銀行發行的信用卡，才能用以支付 App 購買款項。因此，消費者若持巴西境內銀行所發行的信用卡，就只能在巴西國內使用該信用卡，而不能跑到哥倫比亞境內購買 App。

+ +

取得自己的收益：設定收款帳戶

+ +

開發者若要能確實收到自己 App 或 In-app Payments 所創造的營收，必須先針對自己所選擇的 App 販售地區，開好當地支付供應商所提供的帳戶。各家支付供應商都具備服務條款，與 Mozilla 的服務條款不盡相同。開發者必須同意供應商的條款之後，才能透過 Firefox Marketplace 銷售自己的 App 或取得 In-app Payments 款項。

+ +

你也可在 Firefox Marketplace 中設定開發者的收款帳戶。先找到 App 的「Compatibility & Payments」之後，針對你所選擇的販售地區新增收款帳戶即可。

+ +
+

注意：Bango 則是 Firefox Marketplace 的支付供應商。

+
+ +

收取屬於自己的款項

+ +

開發者可直接與支付供應商往來，以順利取得屬於自己的款項。你會收到「自行對帳發票 (Self Billing Invoice，SBI)」，其中將列舉開發者銷售總額、消費者退費總額、開發者實際收取總額。若你的 App 販售地區可退增值稅，則總額也將包含增值稅額。

+ +

你可透過自己在 Firefox Marketplace 中的開發者帳戶，找到支付供應商的付款入口網頁。由於各國電信營運商入帳時程各有不同，且消費法規也可能影響退款速度，所以帳戶的收款條件與時程也有所差異。請自行了解第三方支付供應商的相關條件與說明。

+ +

稅額

+ +

本章節將說明銷售稅的處理方式。

+ +

增值稅 (Value Added Tax，VAT)

+ +

Bango 可針對當地的稅捐機關，處理增值稅 (VAT) 的退稅問題。根據各個國家與地區的法律規定，相關徵稅與退稅的條件均有不同。開發者可向會計師或稅捐機關諮詢。而自行對帳發票 (SBI) 將根據增值稅稅前金額，開立發票給 Bango。開發者到時候觀看支付清單即可了解運作情形。如果開發者身處不屬於「販售者需支付增值稅」的地區，則應該會收到當地稅捐機關的退稅。相關細節請向會計師諮詢。

+ +

預扣稅額與換匯費用

+ +

Bango 可支付美金 ($)、歐元 (€)、英鎊 (£)，讓開發者自行選擇適合的幣別。Bango 可能會因法條規範，為開發者預扣或繳付當地稅額，因此會從支付帳款中扣除應付稅額。各國的預扣稅率均不相同，也可能必須支付換匯費用。在將當地貨幣換成等值的美金、歐元、英鎊時，就可能產生 1.9% ~ 2.5% 的換匯費用。這項費用對開發者並不友善，而 Mozilla 也正研究是否有替代方案。

+ +

開發者的收益

+ +

因所在國家、當地貨幣、付款方式的不同，開發者販售 App 所獲得的收益也有所差異。可參閱付款狀態以進一步了解各國的付款細節。

diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/in-app_payments/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/in-app_payments/index.html new file mode 100644 index 0000000000..35e3fe4117 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/in-app_payments/index.html @@ -0,0 +1,332 @@ +--- +title: 應用程式內部付費 (In-app payments) +slug: Archive/Mozilla/Marketplace/Monetization/In-app_payments +translation_of: Archive/Marketplace/Monetization/In-app_payments_section/mozPay_iap +--- +
+

navigator.mozPay API 可讓網頁內容執行數位貨品的付款作業，並能接收由付款服務商所傳來的購買確認訊息。我們也針對此 API 建構了 Web 付款服務商，讓你能取得數位貨品的款項。本文將說明該如何使用 navigator.mozPay API 與 Web 付款服務商的服務，以達到應用程式內付款 (In-app payments)。

+
+

另外現正開發「fxPay」付款處理機制。FxPay 不會要求開發者必須架設伺服器以進行購買行為驗證，可算是更完整的付款方式。

+
+
+

In-app payments 概述

+

讓你為自己的 App 添加 In-app payments 機制，與其運作的方法：

+ +

navigator.mozPay API 目前限用於 Firefox OS。你同樣可透過 Firefox OS 應用程式管理員 (App Manager) 測試此 API。

+
+

注意：如果是在 Firefox OS 1.2 裝置上測試，只要該裝置內並無 SIM 卡，則 mozPay 呼叫將失敗。但消費者只要裝入 SIM 卡就可解決此問題。目前市面上販售的 Firefox OS 裝置均未安裝 Firefox 1.2。若要進一步了解，可參閱 bug 989022。

+
+

逐步設定 In-app payment

+

接著說明該如何設定 In-app payment。

+

取得測試用的付款金鑰 (Payment Key)

+

在登入至 Firefox Marketplace 開發者交流中心時，可前往 In-App Payment Keys 頁面取得應用程式金鑰與安全金鑰以利測試。雖然金鑰只能讓你模擬 In-app payments，但已足以因應相關測試。在將自己的 App 提交至 Marketplace 審核之前，應該先多嘗試相關模擬。請參閱付款模擬的相關說明。

+

取得真正的付款金鑰

+

在將自己的 App 提交至 Firefox Marketplace 開發者交流中心時， 系統將要求你設定付款條件。此時請選擇 App 的價格 (你也可能想免費提供)，接著勾選你接受 In-app payments 的選項。在設定自己的銀行帳戶之後，前往「Manage In-App Payments」頁面取得應用程式金鑰與安全金鑰，才能執行真正的付款作業。

+

透過隱私設定或類似檔案，可在自己的 App 伺服器中儲存應用程式安全金鑰。

+
+ 重要：請確認沒有任何人可讀取你的應用程式安全金鑰。絕對不要在用戶端披露該項資訊。
+

設定 App

+

先假設你在設計某個 Open Web App 的冒險遊戲，而你想販售「魔力獨角獸」物品，讓玩家能擁有遊戲優勢。你可設定美金 $1.99、歐元 €1.89，或任何幣值均可。接著將說明該如何設定後端伺服器，並撰寫前端程式碼而透過 navigator.mozPay 銷售產品。

+

設定自己的伺服器以簽署 JWT

+

因為用來簽署的應用程式安全金鑰絕對不能公開，所以你必須在伺服端簽署 JSON Web Tokens (JWTs)；而非用戶端。回到剛剛冒險遊戲要賣魔力獨角獸的例子，你要在自己的伺服器上建立如 /sign-jwt 的網址。如此可建立 JSON 物件以定義產品名稱、定價等。可參閱 Web Payment API 規格以了解完整的 JWT 格式。範例如下：

+
{
+  "iss": APPLICATION_KEY,
+  "aud": "marketplace.firefox.com",
+  "typ": "mozilla/payments/pay/v1",
+  "iat": 1337357297,
+  "exp": 1337360897,
+  "request": {
+    "id": "915c07fc-87df-46e5-9513-45cb6e504e39",
+    "pricePoint": 10,
+    "name": "Magical Unicorn",
+    "description": "Adventure Game item",
+    "icons": {
+      "64": "https://yourapp.com/img/icon-64.png",
+      "128": "https://yourapp.com/img/icon-128.png"
+    },
+    "productData": "user_id=1234&my_session_id=XYZ",
+    "postbackURL": "https://yourapp.com/payments/postback",
+    "chargebackURL": "https://yourapp.com/payments/chargeback",
+    "defaultLocale": "en",
+    "locales": {
+      "de": {
+        "name": "Magisches Einhorn",
+        "description": "Adventure Game Artikel"
+      }
+    }
+  }
+}
+

Web Payment API 規格將詳細解釋格式。此處列出幾個重點：

+ +

在 Python (使用 PyJWT) 程式碼中，你可簽署並編碼上述的請求路徑如下：

+
import jwt
+signed_request = jwt.encode(request_dict, application_secret, algorithm='HS256')
+

此程式碼將為 JWT (使用應用程式安全金鑰) 進行簽章，並使用 HMAC SHA 256 演算法。在編碼過後就如下列：

+
eyJhbGciOiAiSFMyNTYiLCAidHlwIjogIkpXVCJ9.IntcImF1ZFwiOiBcIm1hcmtldHBsYWNlLm1vemlsbGEub3JnXCIsIFwiaXNzXCI6IFwiQVBQLTEyM1wiLCBcInJlcXVlc3RcIjoge1wiY3VycmVuY3lcIjogXCJVU0RcIiwgXCJwcmljZVwiOiBcIjAuOTlcIiwgXCJuYW1lXCI6IFwiVmlydHVhbCAzRCBHbGFzc2VzXCIsIFwicHJvZHVjdGRhdGFcIjogXCJBQkMxMjNfREVGNDU2X0dISV83ODkuWFlaXCIsIFwiZGVzY3JpcHRpb25cIjogXCJWaXJ0dWFsIDNEIEdsYXNzZXNcIn0sIFwiZXhwXCI6IFwiMjAxMi0wMy0yMVQxMTowOTo1Ni43NTMxNDFcIiwgXCJpYXRcIjogXCIyMDEyLTAzLTIxVDEwOjA5OjU2LjgxMDQyMFwiLCBcInR5cFwiOiBcIm1vemlsbGEvcGF5bWVudHMvcGF5L3YxXCJ9Ig.vl4E31_5H3t5H_mM8XA69DqypCqdACVKFy3kXz9EmTI
+

如上面章節所述，在 JWT 經過編碼/簽章之後，即可透過其用戶端碼而供你的 App 所使用。

+

設定購買按鈕

+

現在你已經有後端可為自己的產品產生 JWT 了。接著透過 navigator.mozPay 提供前端程式碼的撰寫範例。請確實在自己的 App 中提供按鈕，以利消費者購買產品。例如：

+
<button id="purchase">Purchase Magical Unicorn</button>
+

點選購買按鈕之後，你的 App 應會簽署 JSON Web Token (JWT) 並呼叫 navigator.mozPay。下列為 jQuery 使用範例：

+
$('#purchase button').click(function() {
+  // The purchase is now pending...
+  $.post('/sign-jwt', {})
+    .done(function(signedJWT) {
+      var request = navigator.mozPay([signedJWT]);
+      request.onsuccess = function() {
+        waitForPostback();
+      };
+      request.onerror = function() {
+        console.log('navigator.mozPay() error: ' + this.error.name);
+      }
+    })
+    .fail(function() {
+      console.error('Ajax post to /sign-jwt failed');
+    });
+});
+
+function waitForPostback() {
+  // Poll your server until you receive a postback with a JWT.
+  // If the JWT signature is valid then you can dispurse the Magical Unicorn
+  // product to your customer.
+  // For bonus points, use Web Sockets :)
+}
+

上列程式碼將送出 Ajax 請求至你伺服器上的 /sign-jwt 網址。該網址所簽署的 JSON blob 將包含產品/價格資訊，並以純文字檔回傳 JWT。而 Ajax 處理器 (Handler) 將傳送該 JWT 進入 navigator.mozPay 並等待，直到付款服務商將購買確認訊息送至你的伺服器上。若送過來的 JWT 簽章通過驗證為有效，你就可將虛擬商品交付給消費者。

+

於伺服器上處理 Postback

+

在正式販售出出自己的 App 產品之前，必須先等待 Marketplace 回傳購買確認訊息；此及所謂的「Postback」。此由 marketplace.firefox.com 傳送出「POST」確認通知 (即 1 組 JWT)，至原始付款請求所指定的 request.postbackURL。

+

而此「POST」具備 application/x-www-form-urlencoded 的 Content-Type，且亦可於 notice 參數中找到此 JWT。在你的伺服器框架中，你可透過如 request.POST['notice'] 來存取此 JWT。

+

此 JWT 通知具備所有的付款請求欄位與 1 組交易 ID，並以 Firefox Marketplace 開發者交流中心取得的應用程式安全金鑰而完成簽章。當你收到 Postback 並驗證簽章之後，隨即完成購買程序。若你無法辨別 JWT 的簽章，就可能不是 Marketplace 所傳送的 JWT，你可逕行忽略。

+

Web Payment API 規格即解釋了 Postback 的細節。Postback 內含原始請求，且添增的新反應參數亦包含 Mozilla 的特定交易 ID。範例如下：

+
{
+  "iss": "marketplace.firefox.com",
+  "aud": APPLICATION_KEY,
+  "typ": "mozilla/payments/pay/postback/v1",
+  "exp": 1337370900,
+  "iat": 1337360900,
+  "request": {
+    "id": "915c07fc-87df-46e5-9513-45cb6e504e39",
+    "pricePoint": 10,
+    "name": "Magical Unicorn",
+    "description": "Adventure Game item",
+    "icons": {
+      "64": "https://yourapp.com/img/icon-64.png",
+      "128": "https://yourapp.com/img/icon-128.png"
+    },
+    "productData": "user_id=1234&my_session_id=XYZ",
+    "postbackURL": "https://yourapp.com/payments/postback",
+    "chargebackURL": "https://yourapp.com/payments/chargeback",
+    "defaultLocale": "en",
+    "locales": {
+      "de": {
+        "name": "Magisches Einhorn",
+        "description": "Adventure Game Artikel"
+      }
+    }
+  },
+  "response": {
+    "transactionID": "webpay:84294ec6-7352-4dc7-90fd-3d3dd36377e9",
+    "price": {"amount": "0.99", "currency": "CAD"}
+  }
+}
+

列出 Postback 的幾項重點：

+ +

回應 Postback

+

App 必須透過純文字的 HTTP 回應 (其內僅含交易 ID)，對 Postback 做出回應。例如：

+
HTTP/1.1 200 OK
+Content-Type: text/plain
+
+webpay:84294ec6-7352-4dc7-90fd-3d3dd36377e9
+

於伺服器上處理 Chargeback

+

如果交易過程發生問題 (如消費者帳戶的餘額不足)，則 Marketplace 將傳送退款通知 (即 POST 過的 JWT)。Chargeback 與 Postback 同樣都會傳送到 App，但 Chargeback 送達的時間較晚。該 POST 具備 application/x-www-form-urlencoded 的 Content-Type，且可於 notice 參數中找到該 JWT。下列為解碼後的 Chargeback 通知範例：

+
{
+  "iss": "marketplace.firefox.com",
+  "aud": APPLICATION_KEY,
+  "typ": "mozilla/payments/pay/chargeback/v1",
+  "exp": 1337370900,
+  "iat": 1337360900,
+  "request": {
+    "id": "915c07fc-87df-46e5-9513-45cb6e504e39",
+    "pricePoint": 10,
+    "name": "Magical Unicorn",
+    "description": "Adventure Game item",
+    "icons": {
+      "64": "https://yourapp.com/img/icon-64.png",
+      "128": "https://yourapp.com/img/icon-128.png"
+    },
+    "productData": "user_id=1234&my_session_id=XYZ",
+    "postbackURL": "https://yourapp.com/payments/postback",
+    "chargebackURL": "https://yourapp.com/payments/chargeback",
+    "defaultLocale": "en",
+    "locales": {
+      "de": {
+        "name": "Magisches Einhorn",
+        "description": "Adventure Game Artikel"
+      }
+    }
+  },
+  "response": {
+    "transactionID": "webpay:84294ec6-7352-4dc7-90fd-3d3dd36377e9",
+    "reason": "refund"
+  }
+}
+

此 JWT 和 Postback 類似，可於 Web Payment API 規格中參閱其定義細節。此處列出幾項重點：

+ +
+

注意：目前 in-app payments 尚未支援退款作業。

+
+

App 必須透過純文字的 HTTP 回應 (其內僅含交易 ID)，對 Chargeback 做出回應。舉例來說：

+
HTTP/1.1 200 OK
+Content-Type: text/plain
+
+webpay:84294ec6-7352-4dc7-90fd-3d3dd36377e9
+

Postback/chargeback 錯誤

+

若 App 伺服器是以不成功的狀態碼回應 HTTP 請求，則 Mozilla 的 Web Payment Provider 將重新嘗試 URL 數次。若仍未能接收成功回應，則 App 開發者就會收到通知，且該 App 將暫時停用。若 App 伺服器未能以交易 ID 回應 Postback 或 Chargeback，就會將該伺服器處理為錯誤並會重新嘗試。

+

使用 HTTPS Postback/chargeback 網址

+

於正式環境中執行 App 時，可依需要而嘗試使用安全的 HTTPS 網址。如此一來，在將 Postbacks 從 Mozilla 伺服器傳輸至自己的 App 伺服器時，可避免 Postback 資料遭他人讀取。目前並未強制使用 HTTPS 來保護付款請求，其實 JWT 簽章即可達到相同效果。

+
+

注意：若你並未使用安全的 HTTPS Postback 網址，則請確認自己的付款請求並未包含個人識別資訊，以免遭第三方所攔截。舉例來說，需確認自己的 productData 值並未揭露任何高敏感性的使用者資料。Mozilla 預設的付款請求亦未包含任何個人識別資訊。

+
+

Postback/chargeback IP

+

如果你依照上述方式而確實檢查了 JWT 簽章，就不需為 Firefox Marketplace 伺服器 (傳送 postback/chargeback 通知給你) 的 IP 設定許可清單。但如果你想再另加額外保險 (例如防止鍵盤側錄)，則 Marketplace 也能從下列 IP 位址寄發 postback/chargeback 通知給你。只要這些 IP 位址變更，都會發佈到 dev-marketplace 郵件群組之中。

+
63.245.216.100
+

模擬付款

+

上面的「概述」部分提到，你可從 Firefox Marketplace 開發者交流中心取得特殊的應用程式金鑰 (Application Key) 與應用程式安全金鑰 (Application Secret)，進而模擬 In-app payments。而這個安全金鑰亦可簽署如下的客製 JWT：

+
{
+  "iss": APPLICATION_KEY,
+  "aud": "marketplace.firefox.com",
+  "typ": "mozilla/payments/pay/v1",
+  "iat": 1337357297,
+  "exp": 1337360897,
+  "request": {
+    "id": "915c07fc-87df-46e5-9513-45cb6e504e39",
+    "pricePoint": 10,
+    "name": "Magical Unicorn",
+    "description": "Adventure Game item",
+    "icons": {
+      "64": "https://yourapp.com/img/icon-64.png",
+      "128": "https://yourapp.com/img/icon-128.png"
+    },
+    "productData": "user_id=1234&my_session_id=XYZ",
+    "postbackURL": "https://yourapp.com/payments/postback",
+    "chargebackURL": "https://yourapp.com/payments/chargeback",
+    "simulate": {
+      "result": "postback"
+    }
+  }
+}
+

額外的 request.simulate 屬性可要求 Payment Provider 模擬相關結果，而不會真正收費。使用者介面亦不會要求登入或 PIN 碼。在開發 App 時，可透過此屬性而確認「購買」鈕已正確掛上 navigator.mozPay，且自己的伺服器可正確運作 Postbacks 與 Chargebacks 的網址。

+

下列範例將模擬 1 筆成功的購買作業，並傳送簽署過的通知至你的 Postback 網址：

+
{
+  ...
+  "request": {
+    ...
+    "simulate": {
+      "result": "postback"
+    }
+  }
+}
+

下列則模擬 1 筆 Chargeback 退款：

+
{
+  ...
+  "request": {
+    ...
+    "simulate": {
+      "result": "chargeback",
+      "reason": "refund"
+    }
+  }
+}
+

將如同真正的購買作業一般，將有 1 筆 JWT 通知傳送到你的處理器，但不會有隨機產生的 transactionID。模擬作業亦可使用 non-HTTPS 網址。

+
+

注意：模擬的付款 JWT 不該用於正式的服務環境中，否則你的消費者將免費取得產品。

+
+

除錯

+

如果你並未正確使用 in-app payment API，則付款畫面將顯示錯誤訊息，以協助使用者進行後續步驟。付款畫面亦將提供錯誤程式碼，協助開發者找出相關錯誤。你可透過 Mozilla 的 Error Legend API，在自己慣用的程式語言中觀看錯誤代碼。舉例來說，錯誤代碼 INVALID_JWT 即表示 JWT 簽章無效，或 JWT 格式混亂。

+

保護應用程式安全金鑰

+
+

警告：請確認沒有任何人可讀取你的應用程式安全金鑰。絕對不要在用戶端披露該項資訊。

+
+

撤銷遭盜用的應用程式安全金鑰

+

雖然遭盜用的機率極低，但你的安全金鑰仍可能外洩或遭盜用，這時應儘快進行下列撤銷步驟：

+
    +
  1. 登入 Firefox Marketplace。
    2. +
  2. 前往「My Submissions」並找到自己的 App。
    3. +
  3. 前往「Manage In-App Payments」頁面；就是產生自己所屬憑證 (Credentials) 的相同頁面。
    4. +
  4. 點擊「Reset Credentials」按鈕。
    5. +
+

在重設自己的憑證之後，其他人就無法以舊憑證處理付款作業。你會看到新的應用程式金鑰與安全金鑰，並可立刻用來處理自己 App 中的付款流程。

+

若要回報任何安全性問題，請填寫 Payments/Refunds 分類下的錯誤。

+

程式碼函式庫

+

下列為 Mozilla 的 navigator.mozPay 專屬函式庫：

+ +

Here are some generic JSON Web Token (JWT) libraries for encoding/decoding and signature verification:

+ +

範例程式碼

+ +

尋求協助

+ +

類似的付款系統

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/index.html new file mode 100644 index 0000000000..ed0b227445 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/index.html @@ -0,0 +1,80 @@ +--- +title: 讓 App 產生實質收益 +slug: Archive/Mozilla/Marketplace/Monetization +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Marketplace/Monetization +--- +
+

你努力打造出自己的 App，又該如何在發佈之後取得實質收益呢？不論你選用 Marketplace 付款或應用程式內部付費機制 (In-app payments)，本頁將提供所有相關的 App 付款資訊。

+
+
+
+
+
+ 用自己的 App 獲益
+
+ 透過自己 App 獲益的相關要素介紹，包含所需的工具。
+
+ Marketplace 付款
+
+ 了解 App 將如何搭配 Firefox Marketplace，以強化自己的銷售模式 (如果你的是付費 App，更能提升自己的收入)。
+
+ In-app payments
+
+ 說明應如何在自己的 Web App 中建構 In-app payments
+
+ 檢驗收據
+
+ 檢驗自己 App 購買收據的時機與方式。
+
+ App 定價列表
+
+ 內有價格點數 (Price point)，可讓開發者為自己的付費 App 設定售價，並根據不同的幣別各對應不同的價格點數；另有處理 App 付款的相關資訊。
+
+ 付款狀態
+
+ 提供目前有哪些國家已經設定 Marketplace 的 App 付款服務完畢，基本上也代表這些國家已可銷售付費 App。
+
+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/introduction_monetization/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/introduction_monetization/index.html new file mode 100644 index 0000000000..1c5993a876 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/introduction_monetization/index.html @@ -0,0 +1,77 @@ +--- +title: 介紹 ─ 應如何讓 App 創造收益 +slug: Archive/Mozilla/Marketplace/Monetization/Introduction_Monetization +translation_of: Archive/Marketplace/Monetization/Introduction_Monetization +--- +
+

你努力打造出自己的 App，又該如何在發佈之後取得實質收益呢？不論你選用 Marketplace 付款，或是應用程式內部付費機制 (In-app payments)，本頁將提供所有相關的 App 付款資訊。

+
+
+
+
+
+ 用自己的 App 創造收益
+
+ 將說明該如何用自己的 App 創造收益，包含付費式 App、定價、付款作業處理。
+
+ App 付款指南
+
+ 說明付費式 App 的相關技術。
+
+ 應用程式內付款 (In-app payments)
+
+ 說明該如何在自己的 Web App 中建構 In-app payments 功能。
+
+ 檢驗收據
+
+ 檢驗自己 App 購買收據的時機與方式。你可自行建構檢驗機制，亦可使用現有的函式庫。
+
+ 制定 App 的價格
+
+ 可為自己的 App 選擇固定的「價格點數 (Price points)」，且價格點數跨不同幣別也有所差異。本文將提供 App 付費資訊。
+
+ 付款服務狀態
+
+ 總結目前有哪些國家已經支援我們的 App 付款服務。另提供可發佈 App 上架的國家列表。
+
+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/payments_status/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/payments_status/index.html new file mode 100644 index 0000000000..25726a4fb5 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/payments_status/index.html @@ -0,0 +1,30 @@ +--- +title: 付款服務狀態 +slug: Archive/Mozilla/Marketplace/Monetization/Payments_Status +translation_of: Archive/Marketplace/Monetization/App_pricing +--- +
+

Firefox Marketplace 付款服務均以「國家」為單位進行，且各國有不同的定價與付款方式。本文列出已開始 Marketplace 付款服務的國家，並附上進一步資訊的連結。

+
+
+

注意：另請參閱《制定 App 的價格》以了解價格點數，並可透過 API 取得。

+
+

各國的付款服務

+

下列為 Marketplace 目前提供付款服務的國家。我們亦隨時努力於更多國家提供付款服務。若需要現已支援付款服務的國家清單，可參閱《制定 App 的價格》。

+

App 支付

+

下列頁面將提供各國的付款服務資訊。另請注意，目前出帳作業僅支援當地貨幣；信用卡付款僅接受英鎊、美金、歐元計價。

+ +

進一步了解收費費率

+

若要進一步了解收費費率，請至 Firefox Marketplace 找到你自己的 App 頁面。點擊「相容性與付款 (Compatibility & Payments)」→「新增、管理或檢視您的付款帳號中的交易 (Add manage or view transactions for your payment account)」→「檢視交易 (View Transactions)」連結，即如下所示。

+

Transactions link

diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/profiting_from_your_app/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/profiting_from_your_app/index.html new file mode 100644 index 0000000000..b66295dcee --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/profiting_from_your_app/index.html @@ -0,0 +1,95 @@ +--- +title: 用自己的 App 創造收益 +slug: Archive/Mozilla/Marketplace/Monetization/Profiting_from_your_app +translation_of: Archive/Marketplace/Monetization/Profiting_from_your_app +--- +
+

開發 Web App 不只有趣，也是將自己熱情轉為實質收益的絕佳方式！本篇文章將介紹 App 付款的相關主題、說明目前已經建構的付款類型 ─ 包含付款購買 App 與應用程式內部付費 (In-app payments)，以及該如何處理不同國家內所發生的交易。

+
+ +

Firefox Marketplace 是專為 Web App 開發者所設計的絕佳市集，可支援付費/免費 App 與 In-app payments、多款裝置平台的 App，還有更多特色。Firefox Marketplace 具備高競爭力的定價系統，讓消費者能選用自己喜歡的付款方式。並由付款服務供應商處理付款程序，可透過消費者的信用卡或行動電話帳單收取款項。

+ +
+

注意：可參閱《Marketplace 常見問題》的〈付款〉一章，了解 Marketplace 付款方面的常見問題。

+
+ +

設定付費 App

+ +

完全可由開發者自行決定 App 收費與否，而且將 App 提交至 Firefox Marketplace 的程序極為相似。Firefox Marketplace 目前支援二種 App 付款模式：

+ + + +

若將 App 定位為付費 App，則開發者會有不同的選擇並需制定價格；消費者也會在開始下載時完成付費。另請注意，因為必須經過 Marketplace 驗證並正確安裝 App，所以目前僅有 Firefox OS 才支援付費 App。在建構付費 App 時，可參閱《App 付款指南》進一步了解其內部的必要程式碼。

+ +

如果開發者是透過 Marketplace 收款，則消費者付款之後即可收到電子收據。開發者必須負責查驗電子收據，確認自己的 App 已正確收款。一般只要啟動 App 時就完成了查驗作業。可參閱《查驗收據》以進一步了解。

+ +

Mozilla 強烈建議開發者應在收費之前，讓消費者能預覽/試用 App 的功能。只要同時提供單一 App 的免費與付費版本，或透過 In-app payments 都能達到上述目的。

+ +

In-app payments

+ +

In-app payments 讓消費者可在 App 中付款，亦即透過 App 而靈活收取多樣數位版商品與服務的款項。且 In-app payments 讓開發者強化現有 App 即可獲得更高收益；而消費者也不需再另外購買新的 App。

+ +

舉例來說，In-app payments 可用於：

+ + + +

Mozilla 與 Google 的 In-Apps Payments 系統運作模式極為相似。Firefox Marketplace 系統如下：

+ + + +

Firefox Marketplace 另提供 JavaScript 公用程式函式庫，可協助完成購買程序。

+ +

免費增值 (Freemium) App

+ +

若開發者想將付費版本的 App 拿掉數項功能而成為免費版本，以供消費者可預覽/試用該 App，則 Mozilla 也同樣支援此一需求。開發者可在「免費版 App」的「詳細資訊」區塊中，找到「upsell」加入付費升級的功能，即可銜接免費與付費版本的 App 並簡化此「免費增值」模式。

+ +

退款

+ +

一旦消費者要求退款，則可能由 Mozilla、付款服務供應商，或電信營運商授權退款作業。根據各地的消費規範、信用卡退款政策、電信營運商退款政策等的差異，退款授權方式亦有所不同。此外，Mozilla 並無法處理 In-app payments 的退款作業。

+ +

一旦 App 購買行為退款完畢，所對應的收據也隨即失效。因此，開發者應隨時查驗收據以確保 App 是否正確授權批准。若任何 App 發生不尋常的大量退款要求，將由 Mozilla 進一步查驗。

+ +
+

注意：《應用程式內部付費 (In-app payments)》提供 In-app payments 作業的豐富訊息與範例程式碼。目前 In-app payment 程序尚在實測階段，請隨時參閱更新訊息。

+
+ +
+

注意：若 App 使用 In-app payments 機制，則 Mozilla 建議該 App 可設定為免費下載 App。當然付費 App 同樣可使用此機制。

+
+ +

定價與款項給付

+ +

App 內部應使用正確的程式碼，且最好透過 Marketplace 檢驗 App 較為穩當。但你心裡可能還是會想著系統是如何跨國處理這些款項。

+ +

Firefox Marketplace 所列出的 App，都是由付款服務供應商負責販售。這些付款服務供應商將負責處理交易、收取營業稅與增值稅 (VAT)、確認符合當地消費法規、相關出納/退款作業，以及其他應盡的零售作業。Mozilla 則是提供買家 (即 App 使用者) 與賣家 (App 開發者) 的交流場所，但完全不參與交易活動。而 Bango 則是 Firefox Marketplace 的付款服務開發商。

+ +

付款處理商另負責買家 (即 App 使用者) 與賣家 (App 開發者) 之間的交易過程，包含信用卡處理在內的大小事。付款處理商一般會逐筆交易收取服務費用。開發者必須透過 Firefox Marketplace 開發者交流中心 (Firefox Marketplace Developer Hub)，於各家付款處理商建立自己的帳戶。

+ +

為了維持 Firefox Marketplace 的運作、不斷提升 App 平台、實踐我們的使命，Mozilla 與合作夥伴將針對各筆交易拆帳，並另外支付交易費用。目前，若開發者是透過 Marketplace 進行交易，則每筆 App 或 In-app 銷售活動均可獲得 70% 的銷售金額 (此為必要費用與稅後總額，均已包含於消費者所看到價格之中)。而 Mozilla 與合作夥伴則收取 30%。

+ +

Firefox Marketplace 未來將支援更多國家、語言、幣別。我們亦將設法提供多個語系的 Marketplace，並搭配各國所適用的付款方式。

+ +

進一步了解：

+ + diff --git a/files/zh-tw/archive/mozilla/marketplace/monetization/validating_a_receipt/index.html b/files/zh-tw/archive/mozilla/marketplace/monetization/validating_a_receipt/index.html new file mode 100644 index 0000000000..8ad877280b --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/monetization/validating_a_receipt/index.html @@ -0,0 +1,132 @@ +--- +title: 驗證收據 +slug: Archive/Mozilla/Marketplace/Monetization/Validating_a_receipt +translation_of: Archive/Marketplace/Monetization/Validating_a_receipt +--- +
+

如果你的是付費 App，就應該檢查消費者的收據是否有效。如果開發者完全不檢查，則可能會有消費者購買 App 之後立刻退款，就變成免費取得 App 了；或可能直接從你的網站參照 manifest 檔案，就能安裝 App。如果開發者要建構收據驗證機制，可參閱本文提供的程式碼與作業流程。

+
+

收據 (Receipt) 即為消費者的 App 購買證明。收據將經由付款處理機制 (由消費者完成的交易) 產生確認資料 (Affirmation)，以取得特定的數位產品。在消費者付費購買 Firefox Marketplace 上的 App 之後，收據就隨即傳送到消費者的裝置之中。位於消費者裝置上的收據，將用在 mozApps.install() 函式的第二組參數之上。Firefox Marketplace 將使用該筆收據資料，進而呼叫 install() 以完成 App 的安裝。

+

驗證收據的時機

+

開發者必須決定 App 該何時驗證收據。一般都是在消費者啟動 App 時開始驗證。如果是屬於長時間執行 App，則可以定時/定期進行驗證。例如影片串流 App 就可以每隔 20 分鐘檢查收據 1 次。

+

另請注意，如果消費者為離線狀態，App 也就無法驗證收據。開發者可決定 App 在離線時所進行的作業。為了避免打擾某些消費者，開發者可停止強制的收據驗證作業 (消費者可能進入隧道而暫時離線)，只要等消費者上線時再次檢查即可。

+

如何驗證收據

+

最簡單就是使用 Firefox Marketplace 的驗證服務即可。如果你的 App 屬於「HTML-only」，也就是伺服器只會提供靜態檔案，則可使用 Mozilla 的「receiptverifier」JavaScript 函式庫。此函式庫基本上只會將 receiptverifier.js 指令碼加入 App 之中，並使用 verifyReceipts() 函式。可參閱上述連結以進一步了解。

+

收據內容

+

Open Web App 所使用的收據，均為可攜式、可驗證的「Token」購買證明，即所謂 JSON Web Token (JWT) 的數位簽署 JSON 資料架構，且此格式可讓所有用戶端與伺服器讀取。許多程式語言均提供 JWT 函式庫。

+

應接受的收據

+

收據就是付款的證明，但 App 開發者可決定自己想要的收據類型。以下是你該檢查的要項：

+ +

receipt verifier 函式庫可進行其中數項檢查。

+

測試用收據

+

在開發期間，Firefox Marketplace 即可協助發出測試用收據，以供完整測試 App 的相關付款程序。可透過 Firefox 開發者交流中心 (Firefox Developer Hub) 的公用程式頁面產生測試用收據。此種收據將具備「test-receipt」的 typ。且 App 只會在開發期間接收這類收據，一旦上架之後就停止接收；否則消費者可略過 App 銷售程序，直接使用測試用收據。

+

receipt verifier 函式庫預設不會接收 test-receipts。

+

收據驗證

+

在沒有 JWT 函式庫的情況下，開發者也能在收據的 verify 欄位中，找到驗證服務的對應網址，並將收據傳送給驗證服務。各個 App 均具備不同的 Firefox Marketplace 驗證服務網址。

+

下列範例程式碼可於收據中顯示 verify 網址。該程式碼將用於 Firefox 的「網頁主控台 (Web console)」開發者工具。

+
var request = navigator.mozApps.getSelf();
+request.onsuccess = function() {
+  // Get the app's receipt and decode it
+  console.log(atob(request.result.receipts[0].split('~')[1].split('.')[1]));
+};
+

為了取得 verify 網址，此範例將近行下列作業：

+ +

接著是上述程式碼結果的完整範例。此即為扣除 JWT 部分的完整收據。

+
{
+  "product": {
+    "url": "http://example.com",
+    "storedata": "id=111111"
+  },
+  "iss": "https://marketplace.mozilla.org",
+  "verify": "https://receiptcheck.marketplace.mozilla.org/verify/111111", // The verify URL
+  "detail": "https://marketplace.mozilla.org/en-US/purchases/111111",
+  "reissue": "https://marketplace.mozilla.org/en-US/app/example/purchase/reissue",
+  "user": {
+    "type": "directed-identifier",
+    "value": "1234-abcd99ef-a123-456b-bbbb-cccc11112222"
+  },
+  "exp": 1353028900,
+  "iat": 1337304100,
+  "typ": "purchase-receipt",
+  "nbf": 1337304100
+}
+

在開發者取得 verify 網址之後，就可透過 POST 函式，在訊息主體之內傳送完整的 JWT。驗證服務的回應即如上方所述。下列程式碼片段 (snippet)，將從上列範例中取得 App 第一筆收據的完整 JWT。

+
request.result.receipts[0]
+

請注意，上述程式碼並不會處理 JWT 的加密部分。如果你要透過 Marketplace 驗證收據，則收據將檢查本身的加密簽章。

+
+

注意：可在 Kumar McMillan 提供的 Private Yacht 範例中，找到其他更高擴充性的收據驗證範例。

+
+

App 盜版問題

+

即使你驗證了自己付費 App 的收據，還是可能有人繞過收據機制而盜用 App。上列的收據驗證函式並無法避免此問題。

+

如果想要更好的防盜版機制，就必須設定代理伺服器，將之作為 App 與 Firefox Marketplace 之間的媒介。代理伺服器可檢查收據、IP 位址，還有更多物件。如果單一收據來自於不同的 IP 位址，且能一樣執行正確動作，則伺服器就可進行類似通知的作業。如果是大型、複雜、使用伺服器處理功能的 App，就能達到更適當、更正確的設定。

+

此 Python 程式碼仍是開發中的專案，可提供某些代理伺服器的靈感。Django Receipts 則是測試用的代理伺服器，可驗證收據。開發者最好不要直接將之作為正式運行的代理伺服器，但可進行測試以了解相關機制。另可參閱更多資訊，讓自己了解收據驗證作業。

+

收據欄位

+

收據應包含下列欄位：

+
+
+ typ
+
+ 可供識別收據類型的字串，必為以下之一： +
    +
  • purchase-receipt ─ 交易完成之後隨即發出的收據。這類收據應隨時能由 App 接收。
    • +
  • developer-receipt ─ 由 App 開發者所發出的收據。一般是開發者交由自己使用的 App 商店所發出。這類收據有效期較短。
    • +
  • reveiwer-receipt ─ 由 App 審查者所發出的收據。一般是 App 審查者透過其所位於的商店發出。這類收據只需要在審查期間接收即可，有效期較短。
    • +
  • test-receipt ─ 在開發期間用以測試 App 所發出的收據。只要是開發期間以外，均不應該接收這類收據，有效期較短。
    • +
+
+
+ product
+
+ JSON 物件在識別產品時，包含收據所囊括的範圍，以及任何特定商店的資料。包含下列欄位： +
    +
  • url ─ 代表該網址的根網域 (root of a domain)，且沒有最後的斜線 (例如「https://someapp.com」)。一般這樣就代表了 Web App。如果是以根網域開頭的其他網址，則代表「App 內購買」。只要開發者或收據開立者覺得方便，則可使用各種路徑規則 (Path scheme)。
    • +
  • storedata ─ 此字串為 App 所獨有，將提供給收據驗證器 (Verifier) 所用。
    • +
+
+
+ user
+
+ 針對完成購買作業的消費者，此 JSON 物件包含了使用者 ID，並包含下列欄位： +
    +
  • type ─ 此字串內有「directed-identifier」值。
    • +
  • value ─ 此字串即為消費者的專屬 ID。消費者每次購買 App，都會擁有不同的 ID。
    • +
+
+
+ iss
+
+ 發出收據的商店，其所屬之網域。
+
+ nbf
+
+ 完成購買程序之後，顯示「Not-before」的時間戳記。時間戳記是從 1970-01-01T00:00:00Z (UTC, RFC 3339) 開始的秒數。
+
+ iat
+
+ 發出收據之後，顯示「Issued-at」的時間戳記。此時間戳記的格式如同 nbf。可透過此數值決定收據的存在時間。
+
+ exp
+
+ (選填) 代表收據過期的時間戳記。此時間戳記的格式如同 nbf。
+
+ detail
+
+ (選填) 網址包含額外人、機均可讀取的購買細節。如果另提供購買行為的交易記錄或退款功能，則本頁亦應包含相關函式。
+
+ verify
+
+ (選填) 由經過授權的 App 使用此網址，以驗證收據。另請注意，Firefox Marketplace 一定會為 App 提供此欄位。如果開發者想自己建立 App 的商城，就可能不需使用此欄位。
+
+ reissue
+
+ (選填) 網址可重新發出新收據。
+
diff --git a/files/zh-tw/archive/mozilla/marketplace/options/hosted_apps/index.html b/files/zh-tw/archive/mozilla/marketplace/options/hosted_apps/index.html new file mode 100644 index 0000000000..69614f7cf4 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/options/hosted_apps/index.html @@ -0,0 +1,69 @@ +--- +title: 托管＼架設式 (Hosted) App +slug: Archive/Mozilla/Marketplace/Options/Hosted_apps +translation_of: Archive/Mozilla/Marketplace/Options/Hosted_apps +--- +
+

托管＼架設式 (Hosted) App 即為 Open Web App，將其所有資源 (HTML、CSS、JavaScript、manifest 檔案等) 儲存於 Web 伺服器上。本文將簡介托管＼架設式 App，另有相關連結讓你從開發者的角度進一步了解相關資訊。

+
+ +

與一般網站相同，托管的 Open Web App 亦透過 Web 伺服器提供其所有內容，另於 App 的根目錄中提供 App 的 manifest 檔案。manifest 檔案則具備 App 的詳細資料，如相關說明、代表 App 的圖示等等。且不論是 Firefox OS 裝置、Android 裝置，或桌上型電腦，這些詳細資料都會用於 App 的安裝作業。一旦安裝完畢，App 就會從原本的托管伺服器動態載入其內容，並可存取 Web 上的其他資源，如 Web 伺服器上的資料庫。

+ +

在 Firefox OS 安全模型中，托管式 App 均定義為 Web App，意即這類 App 無法利用 Privileged 與內部 (即 Certified) API。若要利用這些 API，則必須以封裝式 (Packaged) App 的方式來提供 App。

+ +
+

注意：Firefox Marketplace 僅支援 Firefox OS 的付費托管式，以及 Firefox OS、Firefox for Android、Firefox 的免費托管式 App。目前正開發所有平台的付費 App 支援功能。

+
+ +

App 托管選擇

+ +

開發者可自行選擇 App 的托管之處。如果你還沒選擇托管方式，則可考慮本段說明的常見托管選擇。

+ +

GitHub

+ +

如果你的 Open Web App 為靜態內容 (HTML/CSS/JavaScript，但無伺服器端的處理作業)，那GitHub Pages 應該是你的不二選擇。如果你的 manifest 檔案是 .webapp 為附檔名，則 GitHub 就能用 correct MIME type 提供 manifest 檔案。

+ +

一般托管解決方案

+ +

動態的 Open Web App 需要伺服器端的處理作業，所以你可用任何常見的托管選擇 (像是你自己架設或可存取的 Web 伺服器)。你必須先確認 Web 伺服器具備相關功能。另有許多托管服務供應商已針對托管式 App 的需求 (如 Heroku、Google App Engine、Amazon App Hosting)，量身打造出 Web 伺服器。

+ +
+

注意：之前在安裝 Open Web App 時，必須滿足「一組來源僅能提供一個 App」的安全規範。但這項條件到 Firefox 34/Firefox OS 2.1 (可參閱此 FAQ 以獲得更多資訊) 已經移除。如果你仍要支援較舊版本，則可試試看在不同來源托管不同的 App (如測試＼正式版本)。其中一個方法就是為 App 建立不同的子網域，或可透過 WebIDE 測試 App。可參閱〈manifest 檔案常見問題〉以進一步了解。

+
+ +

測試托管式 App

+ +

若要將托管式 App 安裝至 Firefox OS 模擬器或實體裝置上，以利進行測試，請參閱《應用程式管理員 (App Manager)》。你也可觀看《自行發佈 App》中所說明的步驟，透過 Web 伺服器將 App 安裝到裝置之上。

+ +

發佈托管式 App

+ +

現有 2 種方式可發佈托管式 App：1). 透過 Firefox Marketplace 或 2). 自行發佈。

+ +

發佈於 Firefox Marketplace

+ +

你可參閱《App 發佈流程》，了解應如何將托管式 App 提交到 Firefox Marketplace 之上。

+ +

在你提交自己的托管式 App 之後，Marketplace 隨即根據你放在 Web 伺服器上的 manifest 檔案，產生新的「mini-manifes」檔案。只要消費者決定要安裝 App，則 mini-manifest 就會傳送到 Apps.install() 函式以安裝該 App。mini-manifest 僅會用於 App 的安裝與更新作業，並不會用於 App 執行期間。

+ +

自行發佈

+ +

你當然也能在 Firefox Marketplace 以外發佈托管式 App，也就是透過自己架設的 Web 伺服器。可參閱《自行發佈 App》。

+ +

更新托管式 App

+ +

共有 2 種方式可更新托管式 App：

+ + + +

若要進一步了解在 Firefox Marketplace 上更新 App 的方法，可參閱《更新 App》；若是自行發佈的 App，則可參閱《自行發佈 App》。

+ +

另請參閱

+ + diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/adding_a_subdomain/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/adding_a_subdomain/index.html new file mode 100644 index 0000000000..27d7c108df --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/adding_a_subdomain/index.html @@ -0,0 +1,40 @@ +--- +title: 為 App 添增子網域 +slug: Archive/Mozilla/Marketplace/Publishing/Adding_a_subdomain +translation_of: Archive/Mozilla/Marketplace/Publishing/Adding_a_subdomain +--- +
+

一組來源網域僅限容納一個 App。但若要打破此限制，則可為 App 新增子網域。每個子網域就代表不同的來源，例如 app1.example.com 或 app2.example.com。建立子網域很簡單，而且大多數的網域托管服務供應商也都不額外收費。服務供應商一般會免費提供特定數量的子網域。以下即為子網域的新增範例。

+
+

新增子網域的常見步驟

+
    +
  1. 登入托管服務供應商的管理介面，找到自己所使用的網域。
    2. +
  2. 找到設定網域的頁面。
    3. +
  3. 找到可新增子網域的功能。
    4. +
  4. 新增子網域、指定子網域檔案的儲存路徑、儲存你所完成的變更。
    5. +
  5. 將自己的 App 檔案放進你在上個步驟所指定的伺服器路徑中。
    6. +
  6. 實際以瀏覽器開啟該路徑，檢驗新的子網域已確實產生。
    7. +
+

接著將說明該如何透過特定托管工具新增子網域。

+

以 cPanel 新增子網域

+

這裡提供 cPanel 建立子網域的範例。cPanel 是 Web 托管控制台，已有多家托管服務供應商採用。每個開發者的 cPanel 頁面可能因設定方式而略有不同。這裡僅提供整個介面的基本概念。

+
    +
  1. 登入 cPanel。
    2. +
  2. 往下捲動找到「Domains」區塊。 +

    +
    3. +
  3. 點擊「Subdomains」即開啟「Subdomains」頁面。 +

    +
    4. +
  4. 在「Subdomain」文字框中輸入子網域名稱。我們這裡先以「newsubdomain」為例。
    5. +
  5. 再點入「Document Root」文字框。隨著顯示的路徑，就是儲存新子網域檔案的路徑。我們這裡先以「/public_html/newsubdomain」為例。如果開發者想把 App 檔案儲存到其他位址，亦可依自己需要更改。假設你的 App 檔案位於「public_html/gamedev_com/games/coolgame/」，則可於「Document Root」文字框中鍵入該路徑。Document root
    6. +
  6. 點擊「Create」按鈕，即可收到確認訊息。
    7. +
  7. 將 App 檔案放進你指定的子網域路徑中。我們這裡先使用名為「index.html」的簡單 HTML，將顯示「This is on a new subdomain!」。
    8. +
  8. 確認新的子網域現已存在。開啟瀏覽器並輸入新的網域名稱。根據我們所使用的範例，即如下圖所示： +

    New subdomain in browser

    +
    9. +
+

以 Go Daddy 新增子網域

+

可觀看此影片，為 Go Daddy 所托管的網域添增子網域。

+
+  
diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/creating_a_store/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/creating_a_store/index.html new file mode 100644 index 0000000000..968dce2720 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/creating_a_store/index.html @@ -0,0 +1,22 @@ +--- +title: 設立自己的 App 商店 +slug: Archive/Mozilla/Marketplace/Publishing/Creating_a_store +translation_of: Archive/Marketplace/Options/Creating_a_store +--- +
+

任何 Web 網站若具備豐富的圖片與互動經驗，則 Web 瀏覽器可透過Mozilla 的 App 專案平台，將這類網站識別為「Web App」，進而能跨裝置安裝並同步這些網站。開發者現可透過此項特性，將已發佈的 App 整理到目錄與商店中。接著說明相關步驟。

+
+

與瀏覽器整合

+

App 平台即提供「navigator.mozApps」這個 JavaScript 物件，可作為商店與瀏覽器之間的溝通橋樑。

+

Web App 是根據其網域所辨識而得。而一個來源網域就只會有一個 App。針對目錄或商店，開發者可透過 App Installation API 與 App Management API，讓瀏覽器觸發 apps.install 函式並提示 App 的安裝作業，另提供 App 的 manifest 檔案網址，以及任何想要補充的後設資料 (metadata)。開發者可存取此筆後設資料，以查閱消費者的購買資訊、確認單一登入狀態 (SSO)，或其他服務。

+

使用 getInstalled()

+

只要 App 是根據你的網域而安裝於目前的瀏覽器上，均可透過 navigator.mozApps.getInstalled() 函式取得此類 App 的清單。另請注意，開發者不會看到其他網域所安裝的 App，只會看到放在自己網域中的 App。

+

開發者可透過此函式而了解消費者安裝的 App 是否符合你的預期。即使消費者是以新帳戶登入你的網站，亦可透過「resync」功能而再次安裝既有的 App。

+

到底該不該托管？

+

針對托管式 App，商店只需該網站的 manifest 網址，即可觸發 App 的安裝作業 (apps.install)。該 App 檔案不一定要儲存於商店或目錄之下。

+

如果 App 沒有伺服器的邏輯元件 (也就是完全以用戶端 JavaScript、HTML、CSS 所建構的 App)，開發者就可能會想建構出托管功能。此時必須為各 App 指派不同的網域名稱，並針對各 App 的 manifest 檔案建構伺服邏輯，才能使用托管功能。

+

如果你現在正自行托管 App 邏輯，則可輕鬆維護和消費者之間的會話 (Session)，進而追蹤消費者的喜好、購買證明，或其他服務。如果你要針對遠端網站提供服務，就必須完成額外作業，才能支援分散式的認證系統。

+
+

注意：Firefox Marketplace API 內含的功能，讓開發者只耗費最小程度的心血，即可迅速設立自己的 App 商店。

+
+

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..280345b59e --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/index.html @@ -0,0 +1,9 @@ +--- +title: Publishing +slug: Archive/Mozilla/Marketplace/Publishing +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +

Marketplace publishing

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/introduction/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/introduction/index.html new file mode 100644 index 0000000000..0cdc397b2e --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/introduction/index.html @@ -0,0 +1,87 @@ +--- +title: 介紹 — App 發佈流程 +slug: Archive/Mozilla/Marketplace/Publishing/Introduction +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +
+ 你到這裡應該已經知道該如何打造成功的 App、選擇 App 發佈平台 (甚或發佈到 Firefox OS 以外的平台)、撰寫並側試過自己的程式碼。現在應該著手將 App 發表給全球的使用者知道，並於 Firefox Marketplace 上發佈。本文將引導你完成相關程序，讓你順利於 Firefox Marketplace 上發佈自己的 Open Web App，並能隨時更新檔案及有用的附加資訊。
+
+  
+
+
+

發佈指南

+
+
+ 提交作業檢查清單
+
+ 提交 App 前的準備工作。
+
+ Marketplace 審查
+
+ 審查 App 時的程序與準則。
+
+ 設定付費 App 與應用程式內付款 (In-app payment)
+
+ Marketplace 的相關功能，可設定付費式 App 與應用程式內的付款項目。另將說明 Firefox Marketplace 是如何使用第三方的付費服務，並建立廠商的帳戶。
+
+

策略與指南

+
+
+ 圖示 (應用程式中心)
+
+ 根據 Firefox OS 的不同版本，取得詳細的圖示尺寸。
+
+
+
+ 圖示設計 (Mozilla 風格指南)
+
+ 你的 App 或 In-app 產品圖示，必須符合圓形或方形設計。進一步參閱 Mozilla 風格指南。
+
+
+
+ 隱私權政策
+
+ 如果你的 App 會取得使用者的個人資料，就必須另外具備隱私權政策。指南內所提供的資訊，均必須納入你的 App 隱私權政策之中。
+
+
+
+ 擷圖指南
+
+ 若要讓自己的 App 在 Marketplace 順利上架，所提供的擷圖必須符合相關規範。
+
+ App 測試與疑難排解
+
+ 帶領你設定測試環境、實際測試  App，並解決你所發現的問題或錯誤。
+
+
+
+

提交 App

+
+
+ App 提交程序指南
+
+ 你已經準備好發佈第一個 App；也可能要以自己沒用過的方式封裝/發佈 App。到這裡了解該如何將 App 提交到 Firefox Marketplace 之上。
+
+

更新 App

+
+
+ 更新 App
+
+ 不論是要添增新功能或是修正錯誤 (當然最好不要是錯誤)，定期提供 App 更新檔，才能保持 App 的能見度。本文將說明應如何透過 Firefox Marketplace 遞交 App 的更新檔案。
+
+

管理已發佈的 App

+
+
+ App 管理指南
+
+ 在發佈 App 之後，你可能想更改某個地方，或了解消費者對該 App 的接受度為何。本文將帶領你變更 App 的狀態、檢視統計資料、檢查於 Firefox Marketplace 上所獲得的評價。
+
+

更多工具

+
+
+ 為自己的 App 添增子網域
+
+ 如果要從自己的網站上提供超過 1 個的架設/托管式 (Hosted) App，就必須逐一建立子網域。本文將說明添增子網域的方式。
+
+
+
diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/managing_your_apps/app_statistics/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/managing_your_apps/app_statistics/index.html new file mode 100644 index 0000000000..6454ca8f31 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/managing_your_apps/app_statistics/index.html @@ -0,0 +1,66 @@ +--- +title: App 統計資料 +slug: Archive/Mozilla/Marketplace/Publishing/Managing_your_apps/App_Statistics +translation_of: Archive/Mozilla/Marketplace/Publishing/Managing_your_apps/App_Statistics +--- +
+

Firefox Marketplace 可提供 App 的多樣統計資料。本文將說明應如何取得自己 App 在 Firefox Marketplace 上的統計資料、報表資料的呈現方式，另可審閱報表內的特定資訊、可用的報表，並使用已匯出的報表資料。

+
+ +

取得 App 的狀態

+ +

若要取得任何已發佈 App 的狀態，須先到 Firefox Marketplace 點擊「開發者交流中心 (Developer Hub)」，再進入「我的提交 (My Submissions)」。所有已發佈的 App 都能看到 (1)「統計資訊 (Statistics)」連結。

+ +

In My Submissions, for each published app you will find a link to the app's stats page

+ +

報表介紹

+ +

在開啟了 App 的統計資訊之後，就會進入下方的統計資料表。此頁將摘要呈現目前可用的統計報表資料。

+ +

The stats dashboard provides a visual summary of your app's stats and links to the 5 reports

+ +

開發者可在此頁看到下列報表：

+ + + +

每組報表均為相同的基礎架構，如下所示：

+ +

All reports follow the same basic structure with date selector, region selector (Installs report only) graph, JSON export option and daily summary.

+ +
    +
  1. 日期選擇 — 可設定報表應顯示的開始＼結束日期。
    2. +
  2. 地區選擇 (僅 Installs 報表) — 可設定報表應顯示全世界活動資料，或個別國家＼地區的資料。 +
    在本文撰寫期間，此功能因資料加總功能的問題，先予以關閉。可參閱 Bug 1028448。
    +
    3. +
  3. 「更新」按鈕 — 依照目前日期與地區設定，重新整理報表內容。
    4. +
  4. 按每日顯示的活動圖表。
    5. +
  5. JSON 匯出選項。
    6. +
  6. 其他按每日顯示的活動圖表。
    7. +
+ +

使用匯出的資料

+ +

你可能想在其他試算表應用中使用匯出的資料。目前尚無主流的試算表應用程式 (Microsoft 的 Excel、Apple 的 iWorks Numbers、OpenOffice 的 Calc) 能支援 JSON 格式的資料匯入功能。解決方案就是將 JSON 轉檔為 CSV 格式。此檔案格式可用於大多數的試算表應用程式。目前有許多 JSON to CSV 的線上轉檔功能：

+ + + +

此外還有下列資源提供程式碼，讓你能針對不同的試算表應用程式，建立自動匯入功能：

+ + diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html new file mode 100644 index 0000000000..76f2576eff --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html @@ -0,0 +1,80 @@ +--- +title: Marketplace 截圖準則 +slug: Archive/Mozilla/Marketplace/Publishing/Marketplace_screenshot_criteria +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria +--- +
+

在將 App 提交至 Firefox Marketplace 時，開發者必須提供 1 幅或更多截圖以供使用。Marketplace 另提供此類截圖的非硬性規範，可作為開發者截圖時的準則。如果 App 截圖均未能符合本篇文章所載明的規範，則可能會要求開發者提交新的截圖。

+
+

截圖概述

+ +

截圖重點

+ +

總而言之，截圖應該以 App 為重點，而不是 App 周圍的情境。

+

尺寸與格式

+

截圖可為 JPG 與 PNG 格式。若是較能保有原來解析度的 PNG-24 最好。如果是 JPG 格式，則應儘量使用最小幅度的壓縮並設定為最高圖像品質。

+

建議尺寸

+ + + + + + + + + + + + + + + + + + + + + +
裝置規格建議的解析度
手機 +

320x480 的倍數、720x1280 的倍數；或 480x320 的倍數、1280x720 的倍數

+
平板電腦1024x768 的倍數、1280x800 的倍數
桌上型電腦1280x800 的倍數、1440x900 的倍數
+

範例

+

不要出現與 App 無關的圖素，如廣告或商標。

+

+

不要提供「手拿著裝置」的照片，或將截圖編輯到實體裝置之上。

+

+

截圖不需使用/添加裝置的邊框、不必要的文字、其他不必要的特色。

+

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/packaged_apps/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/packaged_apps/index.html new file mode 100644 index 0000000000..cf9937c110 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/packaged_apps/index.html @@ -0,0 +1,75 @@ +--- +title: 封裝式 (Packaged) App +slug: Archive/Mozilla/Marketplace/Publishing/Packaged_apps +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +

封裝式 (Packaged) App 屬於 Open Web App，即以 ZIP 壓縮檔納入其 HTML、CSS、JavaScript、manifest 檔案等所有資源，不像之前必須將資源置於網路伺服器之中。本篇文章將為開發者提供封裝式 App 的相關說明 。

+

封裝式 App 為 ZIP 壓縮檔，內含 Open Web App 能夠運作的所有資源，並將 manifest 檔案置於其根目錄之下，且此 manifest 檔案將提供 App 本身的說明、圖示等資訊，以利辨識出已安裝的 App。此封包接著可將 App 安裝到 Firefox OS 裝置、Android 裝置、桌機之中。一旦在裝置上安裝 App 之後，仍可存取 Web 上的資源，如伺服器上的資料庫。

+

封裝式 App 另可分為三類：Web App、Privileged App、Certified App。封裝式 App 可作為任何形式的 Open Web App；Privileged 與 Certified App 則是透過數位簽章的方式，啟動 Privileged 與 Certified API。Privileged App 簽章之後即成為 Marketplace 審查流程的一部分；Certified App 則是由裝置製造商或電信營運商進行簽章。

+

封裝式 App 除了能使用 Privileged 與 Certified API 之外，也能在安裝之後更快取得裝置的資源，達到更快的首次啟動速度。基於這些特色，我們也針對 Firefox OS 裝置、Android 裝置、桌機，均建議以封裝式 App 的形式提供 Open Web App。

+
+

注意：目前 Firefox Marketplace 上所支援的付費封裝式 App，僅限為 Firefox OS App。而免費封裝式 App 已可支援 Firefox OS、行動版 Firefox (Firefox for Android)、桌面版 Firefox。現正開發可支援所有平台的付費 App。

+
+
+

注意：你會在 Firefox 開發者工具的「應用程式管理員 (App Manager)」看到「manifest」中文翻譯為「安裝資訊檔」。

+
+

封裝式 App 的類型

+

封裝式 App 可分為 Web App、Privileged App、Certified App，且均可對應 Firefox OS 不同程度的 App 安全性模式。接著將提供進一步資訊。

+

Web app

+

Web App 不會使用 Privileged 或 Certified API。在提交到 Marketplace 之後，App 的封包隨即簽章完成，但仍尚未執行 Privileged 或 Certified App 所使用的特殊授權程序。也因此 Web App 不能使用 Privileged 或 Certified API。這些 App 也不需要 Privileged 與 Certified App 所必備的內容安全政策 (CSP)。

+

這種封裝式 App 的 manifest.webapp 檔案中，不需要 type 欄位。其 type (web) 的預設值就是正確的值。

+

Web App 可自行發佈，或可透過 Firefox Marketplace 發佈。Web App 亦可透過架設/托管式 App 的機制對外提供。

+

Privileged app

+
+
+  
+
+ Privileged app 是由 Firefox OS Marketplace 以特殊程序核准之後發出。如果任一 App 要存取裝置上的特定 Sensitive API，則可為使用者提供更高的安全性。此種 App 即等同 iOS 或 Android 平台上的原生 App。若要指定為 Privileged App，必須在其 manifest.webapp 檔案中添增 type 欄位並設定為 privileged。App 所要存取的 privileged API，均必須加入 manifest 檔案的 permissions 欄位中。
+
+ Firefox OS、Web runtimes for Android、桌機，將針對 Privileged App 強制使用下列 CSP：
+
+
+
+ 
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
+

Privileged App 僅能透過 Firefox Marketplace 發佈。

+
+
+  
+
+

Certified app

+
+
+  
+
+
+

一般第三方開發者並不會接觸到 Certified App；且 Certified App 也不會透過 Firefox Marketplace 發佈。這類 API 的長遠目標，就是要讓本身的憑證更完善、更具公信力，進而也能作為 Privileged API。如果你不是很想架構特定的 API，也可直接在 dev-webapps 郵件群組中反應。

+
+
+
+ Certified App 將透過 Certified API 而存取重要的系統功能，如智慧型手機上預設的撥號鍵盤，或系統設定 App。與 Privileged App 相較，並不會用於第三方 App，所以大多數的 App 開發者可忽略此類 App。除了所有的裝置許可均為隱式許可 (Implicit permission，意即不需要外部的使用者許可) 之外，Certified 與 Privileged App 大部分均屬於相似的封裝式 App。而 Certified App 必須取得 OEM 裝置或電信營運商裝置的許可，才能讓此隱式 App 使用重要 API。若要將 App 指定為 Certified App，則需於其 manifest.webapp 檔案中添增 type 欄位並設定為 certified。
+
+ Firefox OS 則針對 Certified App 建構了下列 CSP： + 
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+ 與 Certified App 相較，Privileged App 則是針對 inline CSP 的影響而稍微放寬了限制。進一步了解其原因，可參閱預設 CSP 與 Bug 768029。
+
+ OEM 廠商與電信營運商均已將 Certified App 安裝到裝置之上。
+
+  
+
+

測試封裝式 App

+

如果要透過 Firefox OS 模擬器 (Firefox OS Simulator)，測試 Firefox OS 裝置在安裝封裝式 App 的情形，可參閱《應用程式管理員 (App Manager)》。開發者也能透過《App 發佈方式》中的步驟，從一般網頁伺服器上安裝該 App 到裝置上。另請注意，如果你要自己發佈 App，就只能安裝封裝式 Web App。

+

發佈封裝式 App

+

有兩種方式可發佈封裝式 App：透過 Firefox Marketplace 或自行發佈。

+

透過 Firefox Marketplace 發佈

+

可參閱 App Publishing，將封裝式 App 提交到 Firefox Marketplace 之上。

+

在提交封裝式 App 時，其 zip 檔案即儲存於 Marketplace 伺服器之上，且 Marketplace 將根據封裝式 App 的 zip 檔案中的 manifest，產生新的「mini-manifest」檔案。在消費者安裝 App 時，隨即將 mini-manifest 傳送至 Apps.installPackage() 函式以安裝該 App。僅安裝與更新程序才會使用 mini-manifest。App 執行期間並不會使用此檔案。

+

自行發佈

+

當然也能在 Firefox Marketplace 之外，也就是自己的網路伺服器上發佈封裝式 App。可參閱《自行發佈 App》。

+

更新封裝式 App

+

若要進一步了解更新作業，請參閱《更新 App》。

+

更多資訊

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/index.html new file mode 100644 index 0000000000..d914835648 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/index.html @@ -0,0 +1,10 @@ +--- +title: Policies and Guidelines +slug: Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines +tags: + - NeedsTranslation + - Structure + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines +--- +

This section contains Firefox Marketplace policies and guidelines

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/introduction/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/introduction/index.html new file mode 100644 index 0000000000..230c5d714a --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/policies_and_guidelines/introduction/index.html @@ -0,0 +1,39 @@ +--- +title: 簡介 ─ 政策與指南 +slug: Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Introduction +translation_of: Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Introduction +--- +
本文將提供 Firefox Marketplace 所用的多項政策與指南。
+ +
下列政策與指南均為 Firefox Marketplace 所用：
+ +
 
+ +
+
+

政策

+ +
+
隱私權政策
+
如果 App 需用到消費者的個人資料，就必須提供隱私權政策。
+
+
+ +
+

指南

+ +
+
隱私權政策
+
如果 App 需用到消費者的個人資料，則相關指南可提供 App 隱私權政策中所需的資訊。
+
+ +
+
截圖指南
+
為 App 截圖的相關指南，且截圖亦可用於 Marketplace 上架展示。
+
App 測試與疑難排解
+
相關資訊將說明測試環境的設定方式，以利測試 App 並解決可能發現的問題。
+
+
+
+ +

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/introduction/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/introduction/index.html new file mode 100644 index 0000000000..6c505166dd --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/introduction/index.html @@ -0,0 +1,57 @@ +--- +title: 簡介 — 制定 App 的價格 +slug: Archive/Mozilla/Marketplace/Publishing/Pricing/Introduction +translation_of: Archive/Marketplace/Publishing/Pricing/Introduction +--- +
+

本文將陸續新增相關內容，請隨時注意更新資訊。

+
+ +
要讓自己的 App 透過 Firefox Marketplace 獲得收益很簡單：為自己的帳戶設定 1 或更多的付款服務供應商，再設定 App 價格與發售國家 (免費 App 也能讓消費者升級為付費版本)。如果你要使用「應用程式內付款 (In-app payment)」功能，就必須取得 API 金鑰並定義 App 內販售的產品。本文將帶領你在 Firefox Marketplace 中設定付費的Open Web App 及其內部販售產品，另提供有用的相關資訊。
+ +
 
+ +
+
+

設定付費 App

+ +
+
付費帳戶
+
設定帳戶的付款服務供應商，才能收取 App 售出及其內部付款的收益。
+
訂價 (敬請期待)
+
設定 App 價格與銷售國家等選項。
+
以「升級」方式推廣
+
免費 App 亦可升級為付費 App。
+
+ +

更多資訊

+ +
+
 
+
檢驗收據
+
該如何檢查消費者是否付款購買 App。
+
價格點數
+
依國家訂價的相關資訊。
+
+
+ +
+

設定應用程式內付款

+ +
+
取得自己的 API 金鑰 (敬請期待)
+
為自己的 App 取得 API 金鑰。
+
定義應用程式內販售的產品
+
於 Marketplace 上設定 fxPay 的應用程式內產品。
+
+ +

更多資訊

+ +
+
檢驗收據
+
該如何檢查消費者是否付款購買 App 內販售的產品。
+
+
+
+ +

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/payment_accounts/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/payment_accounts/index.html new file mode 100644 index 0000000000..e6938f4336 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/payment_accounts/index.html @@ -0,0 +1,61 @@ +--- +title: 付款帳號 +slug: Archive/Mozilla/Marketplace/Publishing/Pricing/Payment_Accounts +translation_of: Archive/Marketplace/Publishing/Pricing/Payment_Accounts +--- +
+

如果要在 Firefox Marketplace 設定付款 App 或應用程式內付款 (In-app payment) 產品，首先就是設定 1 家或更多的付款服務供應商。本文將說明 Firefox Marketplace 搭配多家供應商的理由、提交程序中所應完成的設定，另提供各家供應商的帳號資訊。

+
+ +

付款服務供應商

+ +

目前配合 Firefox Marketplace 活躍中的付款服務供應商就是「Bango」，當然 Firefox Marketplace 未來將支援其他供應商。付款服務供應商可新增其他付款選項，如付款類型、電信營運商、收款國家等。另間「Boku」供應商很快就會加入 Marletplace。供應商另可透過 Marketplace 讓消費者選用其服務；但目前尚未有供應商支援此一選項。

+ +
+

在交易付費 App 時，均必須透過  Firefox Marketplace 中的付款服務供應商之一。如果 App 亦提供應用程式內付款的產品，也可配合其他供應商，但開發者必須自行滿足必要的推銷與技術需求。

+
+ +

供應商的功能

+ +

所有的付款服務供應商必須達到下列：

+ + + +

設定自己的付款帳號

+ +

在 Marketplace 提交程序的「相容性與付款 (Compatibility & Payments)」頁面上，找到「付款帳號 (Payment Accounts)」區塊並設定付款服務供應商。

+ +

The Payment Accounts section of the Compatibility and Pricing page

+ +

在設定付款帳號與供應商兩者時，所需的資訊有所不同。但同樣必備的資訊如下：

+ + + +
+

在大多數的情況下，付款服務供應商也有在其他國家運作，因此會透過某些形式的國際銀行轉帳作業支付款項給開發者。這類交易都會需要收款銀行的識別代碼。常用的代碼有：

+ + + +

其實只要透過 Google 查詢自己開戶的銀行名稱與匯款代碼 (可能是 SWIFT 或 BIC 或 IBAN)，往往都能找到銀行的相關資訊。可在你開戶銀行的網站上尋找「跨國轉帳」、「收取海外匯款」或類似字眼。此外還有某些工具可協助你找到相關代碼：

+ + +
+ +

以下連結可找到付款服務供應商的設定資訊：

+ + diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/promote_as_upgrade_to_free_version/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/promote_as_upgrade_to_free_version/index.html new file mode 100644 index 0000000000..d0eb6c32a4 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/pricing/promote_as_upgrade_to_free_version/index.html @@ -0,0 +1,26 @@ +--- +title: 建議升級 App 的免費版本 +slug: >- + Archive/Mozilla/Marketplace/Publishing/Pricing/Promote_as_upgrade_to_free_version +translation_of: Archive/Marketplace/Publishing/Pricing/Promote_as_upgrade_to_free_version +--- +
+

談到 App 的相容性與付款選項時，可讓 App 的免費版本升級為付費版本，並透過 Firefox Marketplace 提出此一推銷建議。此一選項可供消費者先體驗功能有所限制的 App，在決定是否購買完整功能的版本。或是免費版本會顯示廣告，付費版本則無廣告；或可為其他類似的組合。本文章說明設定方式，並讓 Firefox Marketplace 顯示升級資訊。

+
+ +

在「相容性與訂價 (Compatibility & Pricing)」頁面底部，可看到「以升級至免費版本促銷 (Promote as upgrade to free version)」區塊。而在「這個付費版本升級此附加元件 (This is a paid upgrade of)」方塊中，你可選擇要哪些免費 App 可升級為付費 App。一旦選擇對應的免費版本 App 之後，就點擊「儲存變更 (Save Changes)」。

+ +

Promote as upgrade to free version section of the Compatibility & Pricing page

+ +

一旦 App 通過審查並發佈於 Firefox Marketplace 之上，則免費 App 列表中就會出現下列附加資訊：

+ + + +

若要進一步了解 App 的銷售方式，可參閱〈選擇自己的商業模式〉。

+ +

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/privacy_policies/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/privacy_policies/index.html new file mode 100644 index 0000000000..80c1bc6b62 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/privacy_policies/index.html @@ -0,0 +1,28 @@ +--- +title: 隱私權政策制定指南 +slug: Archive/Mozilla/Marketplace/Publishing/Privacy_policies +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies +--- +

隱私權極難以界定，且牽涉到法律、社會規範、使用者期望等複雜的概念。不論是 App、網站、網頁、附加元件的開發者，都必須謹慎對待使用者的隱私權以獲得信賴。Mozilla 集結相關指南並制定極佳的隱私權政策，以協助開發者建構出注重隱私權的 App。但請注意，本文並無法取代真正律師所提供的實質法律服務。

+

隱私權政策

+

隱私權政策用以闡述你對資料的處理方式。關鍵在於開發者蒐集、使用、儲存、共用、揭露個人資訊的方法。Mozilla 則集結成隱私權政策範本，讓開發者能簡單說明自己的隱私權政策。

+
https://github.com/flamsmark/privacy-policy-template
+
+

首先請參閱 README。此範本僅可協助你制定部分的隱私權政策。Mozilla 前提是協助開發者能更輕鬆制定隱私權政策，但無法保證此範本已經面面俱到。至少此範本能讓你注意到主要的隱私權問題並進一步思考。敬請使用該範本並自行強化不足的部份。

+

此範本也是很好的實作機會 (某些情況下必須兼顧適法性的問題)。開發者可透過隱私權政策讓消費者知道自己的資訊將何去何從。全世界有這麼多不同的國家，對使用者資料的蒐集、使用、儲存、揭露方式的要求也有所差異。開發者應透過律師了解不同的隱私權政策，並確實讓消費者得知自己應熟悉的要點。

+

Mozilla Marketplace 的隱私權要求

+

如果任一 App 或附加元件 (Add-on) 將蒐集消費者的資料，則開發者就必須提供隱私權政策並將之列於 Mozilla Marketplace 之中。

+

設計 App 的隱私權要點

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/publish_options/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/publish_options/index.html new file mode 100644 index 0000000000..c7b213c18c --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/publish_options/index.html @@ -0,0 +1,145 @@ +--- +title: 自行發佈 App +slug: Archive/Mozilla/Marketplace/Publishing/Publish_options +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +
+

開發者可能不想透過 Firefox Marketplace 發佈 App，例如你只想提供給組織內的成員、執行測試版 App，或只是自己試好玩的。本篇文章將說明開發者如何在 Firefox Marketplace 之外自行發佈 App。

+
+

 

+

Open Web App 可透過 {{ domxref("Apps.install") }} 或 {{ domxref("Apps.installPackage") }}，安裝到 Firefox OS、執行 Firefox for Android 的裝置，或是執行桌面版 Firefox 的桌機之上。而這些 API 均會送出 manifest 檔案的網址，其內將敘述所將安裝的 App。因此要自行發佈 App 就必須滿足下列基本要求：

+
    +
  1. 伺服器必須裝載 App 的 manifest 檔案
    2. +
  2. 伺服器必須裝載 (架設/托管式) App，或 (封裝式) App 的 ZIP 檔案
    3. +
  3. 置於網站上的程式碼必須觸發合適的 {{ domxref("Apps.install") }} 或 {{ domxref("Apps.installPackage") }}
    4. +
+

限制

+

在自己發佈 Open Web App 之前，必須注意下列限制：

+ +

自行發佈封裝式 App

+

只要在伺服器上架設/托管 ZIP 檔案與其 mini-manifest，就能自行發佈封裝式 App。而 mini-manifest 必須置於 ZIP 相同的目錄之下，以利安裝程序能識別 App。接著可建立指令碼以觸發 {{ domxref("Apps.installPackage") }}，送出 mini-manifest 的細節。可參閱下方以了解：

+
    +
  1. +

    將 App 的內容壓縮為 ZIP 並命名為 package.zip。 此檔案應容納 App 的所有資源檔案，並包含 (主要) manifest 檔案。

    +
    +

    重要：請注意封裝式 App 所要壓縮的內容，不要包含檔案本身的目錄。如果你連母目錄都壓縮進去，則 manifest 檔案就位於錯誤地方，整個封裝式 App 隨即無效。

    +
    +
    2. +
  2. 建立名為 manifest.webapp 的檔案，並加入以下內容。此檔案即所謂的 mini-manifest，也是封裝式 App 壓縮檔內的精簡版 manifest 檔案。而 {{ domxref("Apps.installPackage") }} 將使用 mini-manifest，以進行 App 的安裝程序。若要進一步了解細節，可參閱下方的 Mini-manifest 欄位。
    + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/package.zip",
+    "version": "1",
+    "developer": {
+        "name": "A. Developer",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. 建立可安裝 App 的指令碼。這裡我們使用了名為「index.html」的簡易 HTML 檔案。但你也可將指令碼新增至按鈕，或使用任何適當的函式，以於自己的網站上觸發作業。此頁面上的 JavaScript 將呼叫 Packaged App installer API ({{ domxref("Apps.installPackage") }})，並針對安裝作業的成功與否進行回呼 (Callback)。 + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/manifest.webapp';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. 將「package.zip」、「package.manifest」、「index.html」複製到你指定的目錄中 (此範例則為 my-app-directory)，即可在自己的伺服器或網站上設定檔案。
    5. +
  5. 以相容設備 (如 Firefox OS 手機) 安裝 App。只要開啟 index.html 檔案 (此範例的路徑為 http://my-server.com/my-app-directory/index.html)  就會看到系統詢問是否要安裝該 App。繼續執行安裝步驟直到完畢，接著網頁指令就會顯示安裝作業是否成功。
    6. +
+
+

秘訣：你可於本端架設/托管 1 個封裝式 App，並於裝置中進行測試。伺服器與裝置必須位於同一個網路之上，而伺服器必須能接收本端網路的請求。你只要在 mini-manifest 檔案的 package_path 中加入絕對路徑即可。只要用相同的方式，正常情況就已經納入絕對路徑 (可參閱下方)。如果要使用非標準通訊埠，例如 http://10.10.12.1:8080/package.zip，則記得應納入通訊埠的資訊。

+
+

Mini-manifest 檔案的欄位

+

如果要在 Firefox Marketplace 發佈 App，就不需擔心該如何建立 mini-manifest 檔案；Firefox Marketplace 可為開發者代勞。Marketplace 將使用 manifest 檔案中的相關資訊。可參閱《App 的 manifest 檔案》一文。

+

如果要自行發佈 App，也就必須自行建立 mini-manifest 檔案。最好就是複製「主要」的 manifest 檔案，並依需求將之更新。先複製完整內容就能輕鬆建立 mini-manifest 檔案，因其內的 name、version、developer、locales 欄位必須完全相同。開發者亦可添增其他內容。mini-manifest 檔案專屬的欄位則包含 package_path、release_notes、size。

+
+
+ package_path (必填)
+
+ 儲存 App 壓縮檔的絕對路徑 (需為完整的網址，如  http://my-server.com/my-app-directory/manifest.webapp)
+
+ release_notes (選填)
+
+ App 版本資訊。在 Firefox Marketplace 的提交過程中，就必須提供此項資訊。
+
+
+
+ size (選填)
+
+ 以 byte 計算的 App 壓縮檔容量。而 {{ domxref("Apps.installPackage") }} 將使用此項資訊，才能在安裝過程中顯示安裝進度。
+
+

以下提供範例：

+
{
+  "name": "My app",
+  "package_path": "http://thisdomaindoesnotexist.org/myapp.zip",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "http://thisdomaindoesnotexist.org/"
+  },
+  "locales": {
+    "fr-FR": {
+      "name": "Mon application"
+    },
+    "se-SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+

此範例中的其他欄位包含：

+
+
+ name (必填)
+
+ App 的名稱，最長 128 個字元。
+
+ version (選填)
+
+ App 的目前版本。
+
+ developer  (選填)
+
+ 開發者的資訊，內含 name 與 url 欄位。而 mini-manifest 與 manifest 檔案中的開發者資訊必須相同。
+
+ locales (選填)
+
+ 語系資訊，必須為 xx-YY 格式。
+
+ icons (選填)
+
+ App 所使用的圖示。
+
+

若要進一步了解 manifest 檔案，可參閱《App 的 manifest 檔案》。

+

自行發佈架設/托管式 App

+

與封裝式 App 相較，如果你建立內容的方式，就與 Firefox Marketplace 發佈的方式相同，則自行發佈架設/托管式 (Hosted) App 就更簡單了。基本上就是為自己的 App 建立 manifest 檔案。接著加入程式碼以觸發 {{ domxref("Apps.install") }}。此程式碼必須與上述封裝式 App 所用的相同。唯一不同點在於，你可對 manifest 檔案設立相對的參考位置。

+

另請參閱

+ +

 

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submission_checklist/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submission_checklist/index.html new file mode 100644 index 0000000000..5f029ca0c3 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submission_checklist/index.html @@ -0,0 +1,72 @@ +--- +title: 提交作業檢查清單 +slug: Archive/Mozilla/Marketplace/Publishing/Submission_checklist +translation_of: Archive/Mozilla/Marketplace/Publishing/Submission_checklist +--- +
+

在將自己的 App 提交到 Firefox Marketplace 之前，當然該確認是否已經掌握了所有必要資源。本文則提供檢查項目與相關資訊的連結。

+
+

提交作業檢查清單

+

要完成 Firefox Marketplace 的提交程序，你需要：

+

針對封裝式 (Packaged) App

+ +

針對架設/托管式 (Hosted) App

+ +
+

在將 App 提交到 Firefox Marketplace 之前，可使用「測試應用程式驗證」工具來測試 manifest 檔案的正確性。

+
+
+

注意：你會在「應用程式管理員 (App Manager)」看到「manifest」中文翻譯為「安裝資訊檔」。

+
+

針對所有 App (必備)

+

架設/托管式、封裝式 App 的共通必要條件：

+ +

針對付費 App 或應用程式內付款 (In-app payments)

+ +

針對所有 App (非必備)

+

架設/托管式、封裝式 App 的建議條件：

+ +

另外還有......

+

......你應該：

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submit/enter_your_apps_details/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/enter_your_apps_details/index.html new file mode 100644 index 0000000000..88211b4b18 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/enter_your_apps_details/index.html @@ -0,0 +1,129 @@ +--- +title: 輸入 App 上架時所顯示的詳細資訊 +slug: Archive/Mozilla/Marketplace/Publishing/Submit/Enter_your_apps_details +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Enter_your_apps_details +--- +
+

在將 App 上傳到 Firefox Marketplace 之後，應更新 App 的詳細資訊以利於 Marketplace 頁面上顯示。

+
+ +
+

此步驟將針對 App 的預設語系版本 (英文)，編輯相關細節 (如網址與說明等)。如果你有其他語系版本，或是要針對其他國家＼語系而修改詳細資訊，仍必須透過標準的「編輯資訊 (Edit Listing)」選項 (可參閱 step 9)。

+
+ +
+

注意：你可能會看到「manifest 檔案」的正體中文翻譯為「安裝資訊檔」。

+
+ +

現在進入「提交 App、編輯 App 詳細資訊」的頁面。

+ +

Edit app details page header

+ +

如頁面中所示，你在 manifest 檔案中提供的 App 詳細資訊，會由系統預先填入大部分的頁面空格之中。

+ +

App 圖示與網址

+ +

在 manifest 檔案中提供的 App 圖示與說明，再加上檔案儲存網頁的網址，都已經列於此頁面的第一區塊內。Marketplace 將根據 App 名稱而自動產生網址，並逕行修改以成為專屬網址。你可以點擊 (1)「開啟詳細資訊頁面 (Open details page)」以檢視 Marketplace 的細節頁面，也能點擊 (2)「編輯 (Edit)」以編輯圖示與Marketplace 的網址。

+ +

When the page first loads your app name and icon are displayed (based on the manifest content) along with the URL generated by Marketplace

+ +

若要更改 App 的圖示，就點擊 (1) 的圖示就能瀏覽電腦上的其他圖檔。若要更改 App 詳細資訊的頁面名稱，可於 (2) 的 App 網址方塊中輸入新的值。如果你輸入目前已存在的頁面名稱，就會出現警告訊息，直到你修改完畢並點擊「繼續 (Continue)」為止。而且必須修改成有效的 App 詳細資訊頁面網址，否則就無法離開此頁面。

+ +

You can (1) change the app's icon and (2) enter your own page name for the app

+ +

App 說明

+ +

接著下個區塊則顯示 App 的相關說明，也是直接取自於 manifest 檔案而來。你也可以依照自己需要而在「說明 (Description)」方塊中編輯說明。只要拖曳方塊右下角，就能拉大整個編輯方塊的面積。此為必填欄位。

+ +

You can create a description over 1024 characters and include some HTML tags to improve formatting.

+ +

與 manifest 檔案所提供的說明不同，這裡讓你編輯的說明內容可以：

+ + + +

App 分類

+ +

Marketplace 是以「分類 (Category)」提供 App 完整列表。開發者必須為自己的 App 勾選至少一項分類，當然也可以視需要而勾選他項適合的分類。舉例來說，如果 App 可擷取、編輯、分享照片，你當然可以勾選「Photo & Video」與「Social」兩種分類。

+ +

You must pick one, but can pick 2, categories that match your app'scontent

+ +

隱私權政策

+ +

開發者必須提供 App 的隱私權政策，即使 App 聲稱不會蒐集個人資料，也同樣必須提供。如果 App 會蒐集消費者的個人詳細資訊，就必須提供詳盡的政策 (網頁連結或純文字均可)。你可到《隱私權政策指南》 找到的撰寫資訊。而上述「說明」欄位所支援的 HTML 標籤，也同樣可用在政策撰寫時的格式。這裡一樣拖曳 (1) 方塊的右下角，能拉大編輯方塊的面積空間。

+ +

A privacy policy must be provided, even if its only to say that no personal data is collected by the app

+ +

App 資訊與支援服務連結

+ +

如果有 App 首頁與支援服務頁面的網址，亦可一併提供。但你至少須提供電子郵件位址，以利消費者聯絡後續支援服務。

+ +

Link can be provided to any information or support pages for the app, however a support email address must be provided

+ +
+

支援服務的電子郵件位址，即納入 App 於 Marketplace 上架時的公開清單中。建議你應提供專屬的電子郵件位址，而不要使用一般的免費郵件位址。

+
+ +

是否支援 Flash

+ +

如果你針對 Adobe Flash 而開發 Web App 的內容，則請在這裡點選「Yes」代表使用了 Adobe Flash。反之則點選「No」。

+ +

Indicate whether your app has need for Flash support

+ +

截圖與影片

+ +

現在可為自己的 App 加上截圖與影片了。點擊 (1)「新增螢幕截圖或影片 (Add a screenshot or video)」，就能瀏覽電腦的檔案，找到對應的檔案並點選即可。若添增超過 1 支以上的檔案，就能拖曳 (2) 檔案以變更 Marketplace 中呈現的順序。亦可點擊 (3) 的刪除圖示，移除你不想要的檔案。

+ +

截圖可為 PNG 或 JPG 格式，影片則為 WebM 格式。建議手機截圖為 320 x 480 px 尺寸。另可參閱《Marketplace 截圖準則》，以及《Promoting your app》的〈Videos〉進一步了解。

+ +

Click Add a screenshot or video to add a new item. reorder added items and delete any unwanted items

+ +

設定發佈方式

+ +

你可決定在 App 通過 Firefox Marketplace 的審查之後，是要立刻上架 (發佈 App 並讓任何人都能在 Marketplace 中看到，另將納入搜尋結果)，或是暫時不要發佈 (不發佈App。提醒開發者可稍後調整 App 上架情形)。

+ +

Selected whether your app will be added to Marketplace as soon as it's been approved or whether you will set its visibility after approval

+ +

點選「不要自動發佈我的程式 (Do not publish my app)」將可：

+ + + +

「不要自動發佈我的程式」將有更多詳細資訊供你選擇，敬請期待。

+ +
+

在你完成這一步驟之後，就無法編輯此選項。往後若要修改此選項，就必須提供 App 的更新檔才行。

+
+ +

給審查人員看的註記

+ +

最後，你可提供額外資訊給 App 審查人員觀看。特別一提，如果 App 所搭配的 Web 服務需要消費者登入才可使用，則你應提供暫時性的帳戶給審查人員試用此服務。只要拖曳方塊右下角，就能拉大整個編輯方塊的面積。

+ +

Add comments to assist the reviewer review your app

+ +
+

在你完成這一步驟之後，就無法編輯此選項。往後若要修改此選項，就必須提供 App 的更新檔才行。

+
+ +

下一步

+ +

點擊「繼續 (Contiune)」即可進到下個程序：下一步

+ +

Click Continue to proceed to the next step

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submit/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..a6e3468169 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Archive/Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +

This section describes the process for submitting an app to Firefox Marketplace

+

Residual details: https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submit/load_your_app/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/load_your_app/index.html new file mode 100644 index 0000000000..7c657ed720 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/load_your_app/index.html @@ -0,0 +1,134 @@ +--- +title: 將 App 上傳到 Firefox Marketplace +slug: Archive/Mozilla/Marketplace/Publishing/Submit/Load_your_app +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Load_your_app +--- +
+

在登入自己的開發者帳戶並同意開發者協定之後，就能輸入 App 的細節，再讓  Firefox Marketplace 識別其 manifest 檔案。

+
+ +
+

注意：你可能會看到「manifest 檔案」之正體中文翻譯為「安裝資訊檔」。

+
+ +

概述

+ +

現在你進入「提交 App (Submit an App )」頁面，可進行：

+ + + +

收益方式

+ +

你首先應對 App 所提供的資訊，就是其收益方式。

+ +
    +
  1. 針對自己的 App，點選 (1)「免費 (Free)」或「付費/應用程式內付款 (Paid / in-app)」分頁。
    2. +
  2. Select either Free if the app is free to download and use, or Paid / In-app of the app has to be purchased or contains any in-app payment options
    3. +
+ +
+

如果你想先讓消費者免費下載 App，再透過 App 內部付費產品獲得收益，請點選「付費 / 應用程式內付款」。

+
+ +
+

只要你點選「付費/應用程式內付款」並完成提交程序之後，就無法再將該 App 改回免費提供。但原本就點選「免費」的 App 可隨時更改為付費形式。

+
+ +

平台相容性

+ +

在選擇了免費＼付費 App 之後，就該定義 App 所將賴以執行的作業系統與瀏覽器。

+ +
    +
  1. 選擇 App 相容的平台
    + Select the OS and browser implementations the app is designed to work on.
    2. +
+ +

各個平台所支援的收益方式如下。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 FreePaid /In-app
Firefox OS
Firefox for Desktop 
Firefox Mobile
+ (Firefox for Android on screen 7" or less)		 
Firefox Tablet
+ (Firefox for Android on screen over 7")		 
+ +

上傳 App

+ +

現在為 Firefox Marketplace 說明 App 類型：

+ +
    +
  1. 如果為托管＼架設式 App，(1) 須先輸入 App 的 manifest 檔案所在之伺服器位址 (須為完整的 URL)，再點擊 (2)「驗證 (Validate)」。
    + Enter the URL for the manifest of a Hosted App
    +
    + Marketplace 就會驗證你的 manifest 檔案。 +
      +
    • 驗證完畢，點擊「繼續 (Continue)」。
      • +
    • 若 manifest 檔案的驗證結果出現錯誤或警告，也會提供完整報告的連結。請看過報告之後修正錯誤，再重新提交 manifest 檔案進行驗證。
      + If there are errors or warning as a result of validating the app's manifest a link is provided to a full report
      • +
    +
    2. +
  2. 如果為封裝式 App，則點擊「封裝 (Packaged)」分頁並點選「選擇檔案... (Select a file...)」。接著就會開啟電腦的檔案瀏覽功能，找到 App 的 zip 檔案並上傳。
    + Click Select a file to upload a packaged app's ZIP file
    + Marketplace 現已可驗證 App 的封包。 +
      +
    • 驗證完畢，點擊「繼續 (Continue)」。
      • +
    • 若封包 (ZIP) 的驗證結果出現錯誤或警告，也會提供完整報告的連結。請看過報告之後修正錯誤，再重新封包檔案之後提交以利驗證。
      + If there are errors or warning as a result of validating the app's manifest a link is provided to a full report
      • +
    +
    3. +
+ +

了解 App 最低限度的 API 需求

+ +

在 App 驗證完成之後，就會出現「應用程式最低需求 (App Minimum Requirements)」頁面。一開始將顯示最常用的 API 需求清單。如果有找不到的 App 需求，則點擊 (1)「檢視全部 (View all)」，再 (2) 勾選所要的需求方塊。

+ +
+

消費者的裝置若不支援本頁中所選的需求，則 Marketplace 將隱藏你的 App。

+
+ +

An automatically populated list of app requirements displays, click View all and add any that have been missed

+ +

下一步

+ +

接著可點擊「繼續 (Continue)」完成下個程序。

+ +

When the details have been added to the page, clicking Continue moves onto the next step.

+ +

若要了解接下來的步驟，可繼續閱讀：輸入 App 的細節。

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submit/next_steps/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/next_steps/index.html new file mode 100644 index 0000000000..47ef08f0d5 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/next_steps/index.html @@ -0,0 +1,16 @@ +--- +title: App 提交程序的下一步 +slug: Archive/Mozilla/Marketplace/Publishing/Submit/Next_steps +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Next_steps +--- +
+

現在你已經上傳了自己的 App，也更新了詳細資訊。接著讓你先了解接下來將完成的步驟。

+
+ +

an interface screen on the Firefox Marketplace at the start of stage 4, where you are told you can enter some more information, starting with submitting a content rating for your app.

+ +

如果你的 App 有其他語言版本，你可能想在繼續下一步之前，再補充 Marketplace 上的其他詳細資訊。這時可點擊「編輯資訊 (Edit Listing)」，或參閱《Edit other localizations》進一步了解。不論如何，當然還是跟著流程一步步完成比較簡單。

+ +

下一步

+ +

這時可點擊「繼續 (Continue)」以進到下一步驟：《取得 App 內容分級》。

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submit/overview/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/overview/index.html new file mode 100644 index 0000000000..8c00d35b23 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/overview/index.html @@ -0,0 +1,128 @@ +--- +title: Firefox Marketplace 概述 +slug: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +--- +
+

若要讓自己的 App 在 Firefox Marketplace 上架，就必須將 App 提交到 Marketplace 並通過審查。本頁將簡述 App 提交程序。另可參閱其他頁面以了解其他步驟。

+
+ +
+

若要進一步了解各個步驟，請逐一參閱各個步驟之連結，並從 Step 1 開始整個程序。而此頁下方亦提供步驟關係圖。

+
+ +

另可觀看提交程序影片：http://vid.ly/8k2n4w

+ +

提交程序

+ +

接著就開始將 App 提交到 Firefox Marketplace 之上：

+ +
+
Step 1 - 登入自己的開發者帳戶
+
+ +
+
Step 2 - 上傳 App
+
在「提交應用程式」頁面上： +
    +
  • 設定免費＼付費 App。
    • +
  • 選擇 App 對應的平台。
    • +
  • 選擇該 App 為托管＼架設式 (Hosted) 或是封裝式 (Packaged)： +
      +
    • 若為托管＼架設式 App，應在其 manifest 檔案中提供連結。
      • +
    • 若為封裝式 App，請上傳 package.zip 檔案，且在驗證完畢之後，確認是否符合最低 API 需求。
      • +
    +
    • +
  • 點擊「繼續」。
    • +
+ +
+

注意：你可能會看到「manifest 檔案」之正體中文翻譯為「安裝資訊檔」。

+
+
+
Step 3 - 輸入 App 的詳細資訊
+
+

在「編輯 App 詳細資訊」頁面：

+ +
    +
  • 依自己需要而修改 App 網址。
    • +
  • 依自己需要而修改 App 相關說明 (manifest 檔案中所載)。
    • +
  • 選擇 1 到 2 種分類。
    • +
  • 提供隱私權政策。
    • +
  • 若有首頁與支援服務網站，亦請提供。
    • +
  • 提供支援服務的電子郵件位址。
    • +
  • 說明該 App 是否須 Flash 支援功能。
    • +
  • 上傳至少 1 張畫面截圖或影片。
    • +
  • 提供額外說明＼註記給 App 審查人員看 (如果 App 需要登入細節，應另外說明其理由)。另請注意，只有在你提交新版本 App 時，才能修改這些註記。
    • +
  • 設定 App 是否在通過審查之後立刻上架。另請注意，只有在你提交新版本 App 時，才能修改此項設定。
    • +
  • 點擊「繼續」。
    • +
+
+
Step 4 - 參閱「下一步」的細節
+
在「下一步 (Next Steps)」頁面上點擊「繼續」。
+
Step 5 - 取得內容分級
+
在「內容分級」頁面： +
    +
  • 點擊「建立 IARC 分級憑證 (Create an IARC Ratings Certificate)」以取得新的分級，另於 IARC 網站上完成分級問卷。
    • +
  • 若要進入已取得之分級，須提供 Submission ID 與 Security Code。
    • +
+
+
Step 6 - 更新 App 目前對應的販售國別與付款細節
+
Step 6a - 若為免費 App (且無 In-app purchases)：
+
在左側選單中點擊「相容性 (Compatibility)」。依自己需要而更改 App 即將販售的國別。
+
Step 6b - 若為付費 App (或免費 App 但有 In-app payments)：
+
在左側選單點擊「相容性與付款 (Compatibility & Payments)」 +
    +
  • 設定你的付款服務供應商帳戶，如 Bango 與 Boku。
    • +
  • 設定 App 價格。確認 App 是否提供應用程式內付款的產品，並選擇即將販售 App 的國別。
    • +
  • 如果本為免費 App，須付費之後才能升級為較完整功能的「專業版」App，請先設定為免費 App。
    • +
+
+
Step 6c - 若 App 包含應用程式內付款的產品：
+
+
    +
  • 在左側選單點擊「應用程式內付款 (In-App Payments)」，取得 API 金鑰與安全金鑰。(請注意，只要為 App 添增 API 金鑰與安全金鑰之後，就必須為 App 提交更新檔。可參閱 In-app payments 進一步了解)
    • +
  • 如果你使用 fxPay，則在左側選單點擊「In-App Products」，並逐一定義你的應用程式內付款產品。
    • +
+
+
Step 7 - 設定開發團隊成員 (選填)
+
在左側選單點擊「團隊成員 (Team Members)」，並依自己的需要添增團隊成員資訊。
+
Step 8 - 檢視清單 (選填)
+
在左側選單點擊「檢視清單 (View Listing)」，檢視自己在 Marketplace 上的 App 清單。
+
Step 9 - 編輯其他本地化清單 (選填)
+
在左側選單點擊「編輯清單 (Edit Listing)」，針對 App 的本地化內容而修改 App 的網址、說明、分類，或新增 Firefox Marketplace 所支援任何語系的細節。
+
+ +

到此為止，你的 App 已進入審查程序。在左側選單點擊「狀態與版本 (Status and Version)」即可了解目前的審查進度。只要 App 提供應用程式內付款的產品，就必須加入 API 金鑰，且須在發佈 App 之前提交更新檔案。

+ +

流程圖

+ +

 

+ +

+ +

下一步？

+ +

提交 App 完畢之後，你可能會需要：

+ + diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/submit/sign-in_to_your_developer_account/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/sign-in_to_your_developer_account/index.html new file mode 100644 index 0000000000..e46dbad938 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/submit/sign-in_to_your_developer_account/index.html @@ -0,0 +1,52 @@ +--- +title: 登入 Firefox Marketplace 上的開發者帳戶 +slug: >- + Archive/Mozilla/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account +--- +
+

在將 App 提交到 Firefox Marketplace 之前，必須先申請開發者帳戶，登入之後再接受開發者協定。

+
+ +

開啟開發者交流中心 (Developer Hub)

+ +
    +
  1. 以瀏覽器開啟 Firefox Marketplace。
    2. +
  2. 到 Firefox Marketplace 頁面底部點擊 (1) 開發者交流中心。Footer of the Firefox Marketplace home page showing the link to the Developer Hub
    3. +
+ +

開始 App 提交程序

+ +
    +
  1. 在交流中心的首頁上，找到 (1) 提交您的應用程式至 Marketplace (Submit your app to the Marketplace)。
    + Developer Hub home page showing the Submit your app to the Marketplace button
    2. +
  2. 這時會出現「請登入」對話框，點擊 (1) 登入 / 註冊 (Sign in / Sign up)。
    + The Developer Hub please sign in dialog displayed over the Marketplace Developer Agreement
    3. +
  3. 接下來就看你是否註冊過 Mozilla Persona： +
      +
    • 如果你沒用過 Persona，建議你註冊：
      + The first dialog of the Create Persona process你可到這裡進一步了解 Persona +
        +
      1. 輸入電子郵件位址並點擊「Next」。
        2. +
      2. 輸入新的密碼並再次確認，點擊「Done」。
        3. +
      3. 到你剛剛提供的電子郵件信箱收取確認信。此郵件內含「Confirm your account now」的確認連結，點擊此連結。
        4. +
      4. 在接下來的頁面 (跟上述 step 2 顯示的頁面相同) 上點擊「登入 / 註冊」。
        5. +
      +
      • +
    • 如果你已經註冊過 Persona，就請確認你想登入為開發者帳戶的電子郵件位址。
      + Sign in with an existing Persona identity
      + 點擊「Sign in」。
      • +
    +
    4. +
  4. 就會看到開發者協定 (Developer Agreement)。
    + Read the developer agreement, select the option to receive information by email if you wish and agree to the agreement +
      +
    1. 請閱讀過開發者協定。
      2. +
    2. 同意往後接收 App Developer 新聞與問卷 (當然還是看你本身意願)
      3. +
    3. 點擊「同意並繼續 (Agree and Continue)」。
      4. +
    +
    5. +
+ +

接著就能進到下一步：上傳你的 App

diff --git a/files/zh-tw/archive/mozilla/marketplace/publishing/updating_apps/index.html b/files/zh-tw/archive/mozilla/marketplace/publishing/updating_apps/index.html new file mode 100644 index 0000000000..57fb423374 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/publishing/updating_apps/index.html @@ -0,0 +1,27 @@ +--- +title: 更新 App +slug: Archive/Mozilla/Marketplace/Publishing/Updating_apps +translation_of: Archive/Mozilla/Marketplace/Publishing/Updating_apps +--- +
+

本篇文章將針對已發佈的 App (自行發佈或於 Firefox Marketplace 上發佈)，說明相關更新步驟。

+
+
+

注意：如果 App 已通過 Marketplace 審查，而開發者想更改 App 的名稱，就必須再次提交 App 並重新審查。

+
+

更新托管式 (Hosted) App

+

托管式 App 本質就是網頁，因此同樣依 Web 快取的常規而運作。但開發者亦可選用如 HTML5 AppCache 的進階機制以加快啟動速度。先了解這二點之後，更新 App 所使用的一般資源大概就沒有需要特別注意的地方了。

+

但 Open Web App 在處理 manifest 檔案時就不太一樣了。某些 manifest 的變動必須經過使用者許可。但根據 Web runtime 實作的不同，較難以確定是否會啟動更新作業。

+

如果要能確實解決此問題，開發者可於 manifest 檔案中添加「version」欄位。只要檢查 navigator.mozApps.getInstalled() 函式所回傳的值，即可了解目前的版本。如果消費者並未安裝最新版本，則可透過 navigator.mozApps.install() 觸發更新作業。

+

Web runtime 並不會使用 version 的值，所以開發者可使用任何喜歡的版號設定格式。

+

另請注意，如果因更改 manifest 檔案而發生錯誤或毀損，則一旦將 manifest 檔案提交到 Firefox Marketplace 就會發現。嚴重錯誤將導致 App 無法出現在 Marketplace 之中。若是較不嚴重的錯誤，就可能會自動標定該 App 需要重新審查。

+

更新封裝式 (Packaged) App

+

封裝式 App 與托管式 App 的更新程序有所不同。在更新封裝式 App 時，開發者必須將 App 的新版 zip 檔案上傳至 Firefox Marketplace。更新過的 App 同樣要先通過審查，才能再發佈至 Marketplace 之上。如此將於 Firefox OS 手機上觸發更新作業。消費者亦可透過「Settings」App 要求進行更新。

+

若想進一步了解封裝式 App 的更新程序，可參閱下一章節。

+

更新封裝式 App 相關細節

+

接著提供封裝式 App 更新時的相關細節。如果你打算建構 App 商城，就可能必須特別注意。

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/submission/index.html b/files/zh-tw/archive/mozilla/marketplace/submission/index.html new file mode 100644 index 0000000000..2ac47dd745 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/submission/index.html @@ -0,0 +1,9 @@ +--- +title: Submission +slug: Archive/Mozilla/Marketplace/Submission +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Submission +--- +

Marketplace submission

diff --git a/files/zh-tw/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/zh-tw/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html new file mode 100644 index 0000000000..efabe33036 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html @@ -0,0 +1,80 @@ +--- +title: Marketplace 審查準則 +slug: Archive/Mozilla/Marketplace/Submission/Marketplace_review_criteria +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +
+

開發者若要透過 Firefox Marketplace 發佈 App，則必須先滿足本篇文章的所有條件。相關條件是為了均衡 Firefox Marketplace 開發者與消費者的需求所設計。開發者需要公平、一致、審查嚴格但不嚴苛的平台，以安心作為 App 的開發基礎；消費者希望 App 安全無虞、可在裝置上順利運作、確實進行 App 本身所載明的功能。下方所列的 App 條件，就是為了兼顧相關需求所設計。

+
+

先列出 Mozilla 的 App 審查原則：

+ +

安全性

+

可到這裡參閱 App 安全架構的相關細節：https://wiki.mozilla.org/Apps/Security

+ +

隱私性

+ +

內容

+ +

內容指南

+

Firefox Marketplace 將不會接受涉及下列內容的 App。且下方均為說明性的列表而非絕對的定義。Mozilla 亦將視情況而隨時更新。若 App 違反本內容指南所提及的任何內容，Mozilla 均有權立刻將該 App 自 Firefox Marketplace 中撤除。

+ +

功能性

+ +

使用性

+ +

黑名單政策

+

Mozilla 希望永遠都不會動用到黑名單機制，但仍保留將 App 撤除下架的權利。但只要發現已發佈的 App 違反安全性、隱私性、內容規範，或是嚴重影響系統/網路效能，我們將立刻撤除該 App。在將 App 列入黑名單之前，Mozilla 均將通知該 App 的開發者 (除非我們握有特定證據，否則會假設所有開發者都是善良好公民)，並由 App 審查團隊提供完整協助，妥善溝通我們所發現的錯誤並儘力解決。以下特定情況絕對會將 App 列入黑名單並撤除下架：

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html b/files/zh-tw/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html new file mode 100644 index 0000000000..3299054ee5 --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html @@ -0,0 +1,36 @@ +--- +title: App 測試與疑難排解 +slug: Archive/Mozilla/Marketplace/Submission/Pre-submission_checklist +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting +--- +
+

本文將說明 App 測試與疑難排解時的注意事項。

+
+

設定自己的測試環境

+

開發者可安裝多種工具，針對 Firefox OS/Open Web App 執行真正有效的測試。我們建議至少安裝下列工具：

+ +

最理想的情況，當然是能用實際裝置測試自己的 App。可參閱開發者手機指南。

+

測試

+

雖然 Open Web App 與網頁，均使用相同的技術和發佈方式，但因為 App 環境並不具備如 Chrome 瀏覽器的網址列或返回按鈕；且 Firefox OS 裝置也不像 Android 有實體的退回按鈕，所以使用者經驗是截然不同。以下步驟可讓開發者確保 App 達到絕佳的使用者經驗。

+
    +
  1. 安裝 App。確認 App 的圖示有出現在主畫面上，且 App 的名稱完整未遭截斷。
    2. +
  2. 啟動 App。確認能正確偵測、顯示螢幕尺寸與方向。
    3. +
  3. 確認消費者可馬上看到你的 App，而不是看到你的首頁。請記住，若消費者是從 Firefox Marketplace 上安裝你的 App，也就是購買了 App 的功能。不需再次傳送 App 功能的登錄頁面給消費者才對。理想的 App 應該讓消費者能第一眼就看到「Getting Started」或「Login」頁面。
    4. +
  4. 從頭到尾執行過 App 的主要功能。特別注意瀏覽作業的最末端，還有內容縮放時的問題。
    5. +
  5. 確認內容連結將導向 App 之外 (如連至其他網頁或 Twitter)。若要開啟新的視窗或框架，也要讓消費者能順利返回你的 App。
    6. +
  6. 在桌面版瀏覽器中，可使用適應性設計 (Responsive Design) 檢視模式檢查 App 在不同螢幕尺寸中的情況。建議檢查 320x480 ~ 1260x800 的解析度。
    7. +
+

疑難排解

+ diff --git a/files/zh-tw/archive/mozilla/marketplace/submission/rating_your_content/index.html b/files/zh-tw/archive/mozilla/marketplace/submission/rating_your_content/index.html new file mode 100644 index 0000000000..0446f0240f --- /dev/null +++ b/files/zh-tw/archive/mozilla/marketplace/submission/rating_your_content/index.html @@ -0,0 +1,117 @@ +--- +title: 取得 App 內容分級 +slug: Archive/Mozilla/Marketplace/Submission/Rating_Your_Content +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content +--- +
+

Mozilla 與國際年齡分級聯盟 (International Age Rating Coalition，IARC) 合作，將所有 App 均納入適用年齡分級規範。Mozilla 關心使用者，並認為使用者應能自行選擇適合自己的內容。凡 Firefox Marketplace 內的所有 App 均必須完成 IARC 分級。Mozilla 絕對在乎、愛護所有的 App，也必須要求所有 App 或遊戲完成內容分級。在 2014 年 5 月 15 日之後，只要是未完成內容分級的 App 均將強制從 Marketplace 下架。 而 IARC 另提供免費工具讓開發者進行內容分級。

+
+ +

有關 IARC 分級工具

+ +

IARC 是由多間國際級的分級委員會合力運作，針對以數位方式發佈於全球的 App 與遊戲，提供了相關工具作為內容分級的基準。只要填寫簡單表格，就會立刻收到所有分級委員會所制定的分級規範。此份規範不僅可協助消費者了解 App 的內容，亦可讓開發者不需個別取得各國的內容分級，進而大幅縮減成本與不便。

+ +

所支援的國際分級系統

+ +

透過單一的分級精靈功能，即可產生不同系統、國家、所在地區的內容分級。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
分級系統支援國家
Classificação Indicativa Brazil
ESRBCanada, Mexico, United States
PEGIAustria, Denmark, Hungary, Latvia, Norway, Slovenia, Belgium, Estonia, Iceland, Lithuania, Poland, Spain, Bulgaria, Finland, Ireland, Luxembourg, Portugal, Sweden, Cyprus, France, Israel, Malta, Romania, Switzerland, Czech Republic, Greece, Italy, Netherlands, Slovak Republic, United Kingdom
USKGermany
通用其他所有國家適用
+ +

內容分級包含哪些項目？

+ +

分級系統將提供消費者三種資訊：

+ + + +

分級程序僅需幾分鐘且完全免費，並已整合至 Firefox Marketplace 提交程序與開發者主控頁 (Developer Dashboard) 中。任何 App 均必須先完成分級，Mozilla 才能進行後續審查作業。消費者可在 App 說明頁面上看到 App 對應所在地區的分級，並取得自己想進一步了解的相關資訊。

+ +

讓自己的 App 取得內容分級

+ +

IARC 即提供免費的遊戲分級工具，且大多數的 App 都能輕鬆又快速的完成分級。接著來看看分級程序。

+ +
+

注意：Mozilla 並不接受其他系統的分級認證。即使 App 已經完成其他系統的內容分級，開發者仍需要完成 IARC 認證程序。

+
+ +
    +
  1. 登入 Firefox Marketplace 開發者網站。你必須以開發者的身分登入，才會看到分級工具。
    2. +
  2. +

    在 App 提交程序期間，就會進入 IARC 分級工具：

    + +

    Demonstrates where in the app submission flow where ratings can be entered.

    + +

    或可從開發者主控頁中找到分級工具：

    + +

    +
    3. +
  3. +

    開始分級程序：

    + +

    + +

    或可輸入現有分級的資訊：

    + +

    +
    4. +
  4. +

    填寫簡單的問卷：

    + +

    +
    5. +
  5. +

    添加 App 額外資訊：

    + +

    +
    6. +
  6. +

    預覽並確認分級資訊：

    + +

    +
    7. +
  7. +

    回到開發者主控頁就會看到分級資訊。接著就可準備上架！

    +
    8. +
+ +
+

注意：開發者接著會收到電子郵件，內含分級認證與安全碼。請自行保留相關記錄備查。

+
+ +

更多資訊

+ +

如果開發者對分級程序、分級問卷填寫方式，或對分級結果有任何疑問，請寄發電子郵件至 dev-questions@globalratings.com 向 IARC 團隊詢問。另可前往全球分級網站獲得更多資訊。

+ +

其他任何問題，可聯繫 Mozilla 的 App 審查團隊 mozilla.appreview。

diff --git a/files/zh-tw/archive/mozilla/migrate_apps_from_internet_explorer_to_mozilla/index.html b/files/zh-tw/archive/mozilla/migrate_apps_from_internet_explorer_to_mozilla/index.html new file mode 100644 index 0000000000..857b8f22eb --- /dev/null +++ b/files/zh-tw/archive/mozilla/migrate_apps_from_internet_explorer_to_mozilla/index.html @@ -0,0 +1,1070 @@ +--- +title: 轉換網頁程式：從 IE 到 Mozilla +slug: Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla +tags: + - 待翻譯 +translation_of: Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla +--- +

這篇文章描述 IE 與 Mozilla 瀏覽器之間在程式上的差異，協助您將 IE-only 網頁改寫為 Mozilla 通用網頁。

+

簡介

+

Netscape 當初決定要製作 Mozilla 瀏覽器時刻意決定要支援 W3C 標準，因此 Mozilla 並不能完全回溯相容 Netscape Navigator 4.x 及 Microsoft Internet Explorer 的自有程式。舉例來說，Mozilla 不支援稍候會討論的 <layer> 標籤。此外，有些在 W3C 標準觀念尚未普及前製作的瀏覽器（如 Internet Explorer 4）內含各式怪異的花招，我們稱為怪癖（Quirk），而為了相容這些舊瀏覽器的模式便稱為 Quirks 模式。本文稍後也會討論 Mozilla 的 Quirks 模式。

+

我也會闡述其他 Mozilla 支援、但還沒有 W3C 相關規格的非標準技術，如 XMLHttpRequest 及 Rich-text 編輯功能。此處指的 W3C 規格包括：

+ +

跨瀏覽器程式小技巧

+

雖然這世上有所謂的 Web 標準，但不同的瀏覽器作法依然大不相同（即使是同一個瀏覽器，也可能因為作業系統差別而相異）。許多瀏覽器（如 Internet Explorer）在 W3C 規格形成前便提供某些功能，卻在標準制訂後忘了修改既有支援程式以符合標準。

+

在我闡述 Mozilla 與 Internet Explorer 相異之處前，我會先講點小技巧，讓你的 Web 應用程式容易擴充、在未來略事修改便能相容新瀏覽器。

+

不同瀏覽器下的某相同功能，往往也有不同的 API，所以在某些程式中你會發現不少 if() else() 程式區段，以便區分不同的瀏覽器。以下程式是寫給 Internet Explorer 用的：

+
. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+
+

上面這段程式稱不上容易擴充，如果你要多相容一種瀏覽器就得改寫一次。

+

要排除遇到新的瀏覽器就要重寫網頁碼的情形，最容易的方法，就是把功能「抽」出來。與其使用一堆 if() else()，不如將常用的程式片段獨立為一個函式以提高效率。如此一來不但程式易讀，要支援更多瀏覽器也方便些：

+
var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID)
+  else if (isNetscape4)
+   element = document.layers[aID]
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+
+

以上的程式仍得處理瀏覽器偵測的問題，通常這要靠 useragent 字串來解決，例如：

+
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+
+

雖然 useragent 字串提供瀏覽器的詳細資訊，但處理這段字串的程式碰上新瀏覽器時還是有可能出錯，此時便需修改程式。

+

如果瀏覽器種類無關緊要（好比你已經把不支援的瀏覽器全都擋在門外了），那麼依據瀏覽器的能力來判別會比較好一點。通常可以用 JavaScript 來測試必備的功能，舉例來說，與其使用這樣的程式碼：

+
if (isMozilla || isIE5)
+
+

還不如換條路走：

+
if (document.getElementById)
+
+

這樣也可以讓其他支援此方法的瀏覽器（如 Opera 或 Safari）正常使用，無須更動程式。

+

而依據 useragent 字串辨識瀏覽器也並非一無是處，例如在檢查瀏覽器是否符合最低需求或除錯時都有其用途。

+

JavaScript也允許順序條件語言（inline conditional statements）以助於代碼的可讀性：

+

JavaScript 也支援判斷句簡寫法，協助你將程式寫得更易讀：

+
var foo = (condition) ? conditionIsTrue : conditionIsFalse;
+
+

舉例而言，要取用某元素，可以寫為：

+
+function getElement(aID){
+  return (document.getElementById) ? document.getElementById(aID)
+                                   : document.all[aID];
+}
+
+

Mozilla 與 Internet Explorer 的差別

+

首先，我要討論Mozilla和IE在表現HTML行為上的差別。

+

工具提示（tooltips）

+

老牌的瀏覽器透過在超連結和利用 alt 屬性值的 HTML 中導入工具提示來作為工具提示的內容。 最新的 W3C HTML specification 建立了 title 這個屬性，它包含超連結的詳細說明。 現代的瀏覽器會使用 title 的屬性來顯示工具提示，而且 mozilla 只支援 title 屬性，並不支援 alt 屬性。

+

HTML 特殊字元（entities）

+

HTML 標籤可以是一些在 W3 standards body 中已定義的字元。 您可以利用它們的數值或字符來代替字元。 舉例來說，您可以利用 &#160; 或等同的字符參考資料 &nbsp; 來代替空白鍵。

+

有一些很老很老的瀏覽器，像是 Internet Explorer ，它們允許在特殊字元後面拿走;（分號（：

+
&nbsp Foo
+&nbsp&nbsp Foo
+
+

Mozilla 依然會把 &nbsp 當作空白鍵，既使這樣違反了 W3C 標準（W3C specification）。 但如果 &nbsp 後面直接跟上一些其他的字元，瀏覽器就不會轉換它。 範例：

+
&nbsp12345
+
+

這行程式碼在 Mozilla 中就不會被執行，因為它違反了 W3 標準（W3 standard）。請使用正確的格式（&nbsp;）來避免瀏覽器與瀏覽器之間的差異性。

+

DOM 差異

+

文件物件模型（The Document Object Model，簡稱DOM）是一個裝載著文件元素的樹狀結構。你可以熟練地透過已成為 W3C 標準的 JavaScript API 來操作 DOM。然而在 W3C 標準建立以前， Netscape 4 和 IE 4 實作了一些類似的 API。 Mozilla 僅在使用 W3C 標準無法達成這些 API 的效果時才予以實作。

+

存取元素

+

如果你想以跨瀏覽器的方式來取得某個元素的參考，請使用document.getelementById(aID) 方法，這個方法不僅可以在 IE 5.0+ 和 Mozilla 上正常運作，它還是 DOM Level 1 的規範。

+

Mozilla 不能夠以 document.elementName 或是元素名稱來存取元素，而 IE 可以(名為全域名稱污染)。 Mozilla 也不支援 Netscape 4 的 document.layers 和 IE 的 document.all。 而 document.getElementById 可以讓你取得某個元素，你還可以使用 document.layers 和 document.all 指定一個 tag 名稱來取得一串文件元素，像是全部的 <div> 元素。

+

在 W3C DOM Level 1 的規範中，JavaScript 應透過 getElementsByTagName() 取得相同標籤(tag)下的元素。這個方法會傳回一個陣列，同時這個方法也可以呼叫 document 或其他節點下的元素。如果你想取得，你可以透過 getElementsByTagName("*") 來取得整個 DOM 下的元素陣列。

+

就如下面表格一，DOM Level 1 經常被用來移動或者隱藏元素。當一個 HTML 元素可以隨意移動時，Netscape 4 所使用的 <layer> 標籤就不被 Mozilla 支援，你可以使用如同 Internet Explorer 的 <div>。根據 HTML 規範，這個標籤可以在 Mozilla 正常運行的。

+

 

+

表格一 － 用於存取元素的方法

+ + + + + + + + + + + + + + + +
方法描述
document.getElementById( aId )回傳文件中 ID 值為 aId 元素的。
document.getElementsByTagName( aTagName )回傳文件中標籤名稱為 aTagName 的元素
+

縱橫 DOM

+

Mozilla 支援透過 JavaScript 存取 DOM 樹狀圖的 W3C DOM APIs (詳見表格二)。透過他可以讀取文件中的任何一個節點。Internet Explorer 也支援這個 APIs，同時也支援一些過時的方法，像是 children。

+

 

+

表格二 － 縱橫 DOM 的方法

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
屬性／方法描述
childNodes回傳一個該元素下所有子節點的陣列。
firstChild回傳該元素下的第一個子節點。
getAttribute( aAttributeName )回傳 aAttributeName 的值。
hasAttribute( aAttributeName )回傳一個關於節點 aAttributeName 是否有屬性的布林值。
hasChildNodes()回傳一個關於該節點下是否仍含有子節點的布林值。
lastChild回傳該元素下的最後一個子節點。
nextSibling回傳當下節點後的下一個節點。
nodeName回傳一個當下節點名稱的字串。
nodeType回傳該節點的類型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
數值描述
1元素節點(Element Node)
2屬性節點(Attribute Node)
3文字節點(Text Node)
4CDATA 段落節點(CDATA Section Node)
5實體參引節點(Entity Reference Node)
6實體節點(Entity Node)
7處理指令(Processing Instruction Node)
8註解節點(Comment Node)
9文件節點(Document Node)
10文件型別(Document Type Node)
11文件片段(Document Fragment Node)
12記法節點(Notation Node)
+ 
+     *譯注：目前參照 中央研究院計算中心曾士熊先生提供 SGML 名詞部份的翻譯內容，其中並不包含「文件片段(Document Fragment Node)」
+
+
nodeValue回傳當下節點的值。當節點中存在文字或文段，如文字和註解節點時，此方法會回傳他們的字串值。當節點為屬性節點(attribute node)時，此方法將會回傳屬性值。除此之外，其餘的節點類型都會回傳 null。 
ownerDocument回傳存在於當下節點的 document 物件。
parentNode回傳當前節點的父節點。
previousSibling回傳在該節點之前的節點。
removeAttribute( aName )從當前的節點中移除 aName 屬性。
setAttribute( aName, aValue )將 aName 屬性的值更改為 aValue。
+

在 Internet Explorer 中有個不正常的怪癖(quirk)，上表中有許多方法會略過自動產生的空白文字節點。請注意，在 Mozilla 中這些並不會略過，所以有時候你必須區別開這些節點。每一個節點都有它的 nodeType 屬性。舉例來說，元素節點的類型是 1；而文字節點是 3、註解節點是 8（詳見表格二 － nodeType）。最好區別開這些空白文字節點的辦法就是指處裡節點類型為 1 的子節點：

+
HTML部分:
+  <div id="foo">
+    <span>Test</span>
+  </div>
+
+JavaScript部分:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myXMLDoc.childNodes;
+  for (var i = 0; i < myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // 元素節點
+    }
+  }
+
+

內容建立及處理

+

Mozilla 支援一些比較舊的動態增加 DOM 內容的方法，像是

+
document.write， document.open 和 document.close。
+
+

Mozilla 也支援 Internet Explorer 的 innerHTML 方法，這個方法可以用來處理所有的節點。即使這個方法無效，Mozilla 還支援 outerHTML (這個方法包含該元素，它與 innerHTML 有一定的差異) 和 innerText (用於存取或修改節點的文字，功能與 Mozilla 裡的 textContent 差不多)。

+

Internet Explorer 中存在著許多不規範也不被 Mozilla 的內容處理方法，包括回傳參數、插入數值和插入元素到節點中。像是 getAdjacentElement、 insertAdjacentHTML 等。表格三中敘述了 W3C 定義的內容處理方法，它們適用於所有的 DOM 節點。

+

 

+

表格三 － Mozilla 使用的內容處理方法

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
方法描述
appendChild( aNode )建立一個新的子節點，並回傳新子節點的參照值。
cloneNode( aDeep )複製該節點並且傳回複製後的節點。如果 aDeep 的值「成立」，那個這個方法會把該節點下所有的子節點複製到新的節點。
createElement( aTagName )建立並回傳一個沒有母節點(即上層沒有節點)的節點。該節點的名稱為 aTagName 。
createTextNode( aTextValue )建立並回傳一個沒有母節點的文字節點，該節點值為 aTextValue。
insertBefore( aNewNode, aChildNode )把 aNewNode 插入到 aChildNode 之前。(兩者都必須在當前的節點下)
removeChild( aChildNode )移除 aChildNode 並回傳一個參照值。
replaceChild( aNewNode, aChildNode )用 aChildNode 替代 aNewNode，並且回傳一個移除節點的參照值。
+

文件片段

+

因為效能的緣故，你可以在記憶體中創建 document 而非在現存的 DOM 上做動作。 DOM Level 1 Core 引入了 document fragments，這是一個輕量化的 document 且支援了部份既有可用的 document interface。舉例來說，他雖不支援 getElementById 但卻支援 appendChild 。你可以很容易的按照現存的的 document 來創建  document fragments 。

+

在 Mozilla 中，要創造新的 document fragments 只需要使用 document.createDocumentFragment()，之後你便可取得一個空的 document fragment。

+

Internet Explorer 在實做 document fragment 上並未按照標準的 W3C standard 。倘若你在 IE 中調用此功能，只能拿回一個 regular document 而非 document fragment。

+

JavaScript 差異

+

Mozilla 與 Internet Explorer 之間最大的差別就是 JavaScript。 這些問題通常存在於瀏覽器所公佈的 JavaScript APIs，像是 DOM hooks。 這兩種瀏覽器各自佔有一部份 JavaScript 核心的差異性；這些遇到的問題通常也和時間有關。

+

JavaScript 日期差異

+

getYear 這個函數是唯一 Date 中的不同點。根據 ECMAScript specification（JavaScript 也遵循這個 specification），這個函式不是 Y2k-compliant 。假設在 2004 年時執行 new Date().getYear()，它會回傳 "104" 。根據 ECMAScript specification ， getYear 會回傳年份減去 1900，原意是回傳 "98" 來表示 1998。getYear 在 ECMAScript Version 3 時被 getFullYear() 所代替。 當 mozilla 繼續遵循規範時，Internet Explorer 已經把 getYear() 修改成像 getFullYear() 的工作方式，使它成為Y2k-compliant。

+

JavaScript 執行差異

+

不同的瀏覽器使用不同的方法執行 JavaScript。舉例來說，下面的程式碼假設當 script 執行的時候 div 節點已經存在於 DOM：

+
...
+<div id="foo">Loading...</div>
+
+<script>
+  document.getElementById("foo").innerHTML = "Done.";
+</script>
+
+

無論如何，這都不能夠確定元素（elements）是否存在。要確認所有的元素都存在，您應該將 onload 事件擺在 <body> 標籤：

+
<body onload="doFinish()">
+
+<div id="foo">Loading...</div>
+
+<script>
+  function doFinish() {
+    var element = document.getElementById("foo");
+	  element.innerHTML = "Done.";
+  }
+</script>
+...
+
+

像這樣與時間相關的問題也和硬體有關－較慢的系統可以顯示出較快的系統中隱藏的臭蟲（bugs）。 window.open 是一個具體的例子：  

+
<script>
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+</script>
+
+

這段程式碼的問題是： window.open 的時程是非同步的－它不會阻擋 JavaScript 的執行，直到所有的新視窗載入完畢。 因此，您應該在在載入新視窗完畢後才執行 window.open 。 您可以透過 在新視窗中利用 onload 執行 window.opener 來回到原本開啟新視窗的視窗（母體）。

+

JavaScript 產生之 HTML 差異

+

  在 JavaScript 中，我們可以透過 document.write 來從字串產生 HTML 程式碼。但這有個值得注意的地方在於，要是你的內嵌碼中中含有 <script> tag 會發生什麼事？當你的目標頁面處於 <a href="#html_modes">strict rendering mode</a> 下時，它將會解析位於  <script> 和  </script>  中的內容。讓我們看個例子：

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script>alert("Hello")</script>")
+</script>
+
+

  因為目前處於 strict mode 下，Mozilla 的解析器 (parser) 將會查看介於 <script> 和 </script>中的內容。這是因為在 strict mode 下解析器並不認得任何語言。但假如處在 quirks mode 下，解析器卻識得 JavaScript 語法。而事實上，Internet Explorer 總是處於 quirks mode 下 - 它並不真正之支援 XHTML。一個比較兩全其美的作法是將該內容分割成兩個部份：

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script>alert("Hello")</" + "script>")
+</script>
+
+

JavaScript 除錯

+

Mozilla provides several ways to debug JavaScript-related issues found in applications created for Internet Explorer. The first tool is the built-in JavaScript console, shown in Figure 1, where errors and warnings are logged. You can access it in Mozilla by going to Tools -> Web Development -> JavaScript Console, or in Firefox (the standalone browser product from Mozilla) at Tools -> JavaScript Console.

+

 

+

Figure 1. JavaScript console

+
+ Javascript Console
+

The JavaScript console can show the full log list or just errors, warnings, and messages. The error message in Figure 1 says that at aol.com, line 95 tries to access an undefined variable called is_ns70. Clicking on the link will open Mozilla's internal view source window with the offending line highlighted.

+

The console also allows you to evaluate JavaScript. To evaluate the entered JavaScript syntax, type in 1+1 into the input field and press Evaluate, as Figure 2 shows.

+

 

+

Figure 2. JavaScript console evaluating

+
+ JavaScript Console evaluating
+

Mozilla's JavaScript engine has built-in support for debugging, and thus can provide powerful tools for JavaScript developers. Venkman, shown in Figure 3, is a powerful, cross-platform JavaScript debugger that integrates with Mozilla. It is usually bundled with Mozilla releases; you can find it at Tools -> Web Development -> JavaScript Debugger. For Firefox, the debugger isn't bundled; instead, you can download and install it from the Venkman Project Page. You can also find tutorials at the development page, located at the Venkman Development Page.

+

 

+

Figure 3. Mozilla's JavaScript debugger

+
+ Mozilla's JavaScript debugger
+

The JavaScript debugger can debug JavaScript running in the Mozilla browser window. It supports such standard debugging features as breakpoint management, call stack inspection, and variable/object inspection. All features are accessible through the user interface or through the debugger's interactive console. With the console, you al can execute arbitrary JavaScript in the same scope as the JavaScript currently being debugged.

+

CSS 差異

+

與 Internet Explorer 和其他的瀏覽器比較之下， Mozilla 擁有最強大的 Cascading Style Sheets 4（即 CSS） 支援， 包含大部份的 CSS1、CSS2 和部份的 CSS3 。

+

對於下列敘述的問題， Mozilla 會在 JavaScript 控制台中發出警告。 如果您遇到了 CSS 的相關問題，請確認 JavaScript 控制台。

+

CSS 檔無法套用：MIME Type 問題

+

CSS 定義的相關檔沒有被讀取是 CSS 的相關問題中最常見的。 這通常是伺服器將 CSS 檔案送出了錯誤的 MIME Type 。 CSS 說明書 （ CSS specification ） 中提到：「 CSS 檔案應該被作為 text/css mimetype 。」 當網頁處於嚴格的規範模式 （ strict standards mode ）時， Mozilla 將遵循並只載入以 text/css 作為 mimetype 的 CSS 檔案。 在 Internet Explorer 中，無論 mimetype 是甚麼， CSS 檔案都會被載入。 當網頁的 doctype （ document type，檔案類型 ） 在網頁的開頭被指定時，他們會進入嚴格的標準模式。 要解決這個問題，您可以修改正確的 mimetype 或移除 doctype。 我們會在下個章節中討論更多關於 doctype。

+

CSS 單位

+

有很多網路應用程式都不在他們的 CSS 中加上單位，尤其是利用 JavaScript 設定 CSS 的時候。 當網頁不執行在標準模式時，Mozilla 不會回報錯誤。 因為 Internet Explorer 並非真正的支援 XHTML ，它不在乎有沒有具體的單位描述。 如果網頁處於嚴格的標準描述下，並且沒有使用單位，那麼 Mozilla 將忽略以下的 style ：

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+  <body>
+    // works in strict mode
+    <div style="width:40px; border:1px solid black;">
+      Text
+    </div>
+
+    // will fail in strict mode
+    <div style="width:40; border:1px solid black;">
+      Text
+    </div>
+  </body>
+</html>
+
+

因為上述的範例中有一個規範的 doctype （檔案類型），所以網頁將執行在嚴格的標準模式下。 第一個 div 標籤會套用 40 像素的寬度，因為它有單位，但是第二個 div 標籤將不會套用指定的寬度，因此會套用預設的 100% 寬度。 透過 JavaScript 設定寬度將會得到一樣的結果。

+

JavaScript 及 CSS

+

既然 Mozilla 支援 CSS 標準，它同時也支援透過 JavaScript 設定 CSS 的 CSS DOM。 您可以透過 style 標籤讀取、移除和修改 CSS 的屬性規則：

+
<div id="myDiv" border:1px solid black;">
+  Text
+</div>
+
+<script>
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+</script>
+
+

您可以利用這種方式來延伸 css 的屬性。再次強調，如果網頁處於標準模式，您必須加上單位，否則 Mozilla 將忽略指令。 當您要查詢變數時，透過 .style.width 來達成，在 Mozilla 和 Internet Explorer 中，傳回的值中會包含單位，也就是傳回了一串字串。 您可以利用 parseFloat("40px") 將字串轉換成數值。

+

CSS 溢出部分（overflow）差異

+

CSS 增加了溢出（overflow）的概念，它允許您定義如何處理溢出部份；舉例來說，當 div 內容指定的高度高於 div 的高度時， CSS 規範（CSS standard）中定義了如果程式中沒有定義溢出的相關設定， div 的內容將會溢出。 但是 Internet Explorer 仍然不會遵循相關規範，並且會為了留住內容而擴張 div 的高度。 下面的例子表現了這個差異性：

+
<div style="height:100px; border: 1px solid black;">
+  <div style="height:150px; border: 1px solid red; margin:10px;">
+    a
+  </div>
+</div>
+
+

就像你在圖片四看到的，Mozilla 依照了 CSS 規範做出了判斷。 規範中提到了在這個情況下，因為 div 的內部高過它的母體，所以它溢出到了按鈕的地方。 如果您這麼愛 Internet Explorer 的行為，就不要在母體（即 div ）加上 height 這個屬性。

+

 

+

圖片四：div溢出部份

+
+ DIVdiv溢出部份
+

hover（滑鼠移上某元素）效果差異

+

在一些網站上存在著 Internet Explorer 的非標準 CSS hover。 在 Mozilla 中，通常當滑鼠滑入的時候，利用改變 Text Style 來顯示它自己。 這是因為 a:hover ，在 Internet Explorer 中的 CSS 解析器對應 HTML 中錨點（anchor）的是 <a href="" />，而不是 <a name="" /> 由於作者將錨點設定標記（anchor-setting markup）套用進了區塊，所以造成了文字的顏色變化：

+
CSS:
+  a:hover {color:green;}
+
+HTML:
+  <a href="foo.com">This text should turn green when you hover over it.</a>
+
+  <a name="anchor-name">
+    This text should change color when hovered over, but doesn't in Internet Explorer.
+  </a>
+
+

Mozilla 遵循 CSS 說明書 （ CSS specification ）並且在這個例子中會把顏色變成綠色。 您可以使用這兩種方法來讓 Mozilla 擁有像 Internet Explorer 的效果，並且當滑鼠滑入時不會改變文字的顏色：

+ +

Quirks 模式、標準模式

+

  在舊的瀏覽器上 (如 Internet Explorer 4)，網頁可能會被以一種被不完全正確的方式渲染網頁。當 Mozilla 企圖成為一個和標準相容的瀏覽器的情況下，它採取三種不同方式來處理在這些不太合標準的渲染方式下開發的既有網頁。你可以在  Mozilla 瀏覽器中的  View -> Page Info (或 Ctrl-i) 下查看目前處於哪種模式。而該採取怎樣的模式則取決於該頁面的 doctype。

+

  Doctypes (document type declarations) 看起來是：

+

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+

  藍色部份稱為 public identifier，而綠色部份是為 system identifier (以 URI 方式描述)。

+

Standards Mode (標準模式)

+

  Standards mode 是最嚴謹的渲染模式。它將完全按照 W3C HTML 以及 CSS specification 來處理，並且不支援任何除此之外的寫法。 Mozilla 會在以下情形中使用此模式：

+ +

Almost Standards mode (近乎標準模式)

+

Mozilla introduced almost standards mode for one reason: a section in the CSS 2 specification breaks designs based on a precise layout of small images in table cells. Instead of forming one image to the user, each small image ends up with a gap next to it. The old IBM homepage shown in Figure 5 offers an example.

+

 

+

Figure 5. Image gap

+
+ Image Gap
+

Almost standards mode behaves almost exactly as standards mode, except when it comes to an image gap issue. The issue occurs often on standards-compliant pages and causes them to display incorrectly.

+

Mozilla uses almost standards mode for the following conditions:

+ +

You can read more about the image gap issue.

+

Quirks Mode (怪癖模式)

+

  以目前情況來說，網路上充斥著許多不完全符合標準規範的網頁。這些不合標準的網頁，卻和有著 bug 的瀏覽器配合的很好。舉例來說，在以前Netscape 居市場領導地位時，便有著 bug。而 IE 誕生石，為了能和那些網頁相容，「繼承」了這些 bug 們。對於在之後才來到市場上的新一代瀏覽器們來說，這些 bug 們便被稱為 quirks (但他們大都能向下相容於這些網頁)。值得注意的是，因為這些既有網頁並非按照規格設計，所以新瀏覽器在渲染時得花上更多時間。不幸的是，絕大多數的網頁都有賴新瀏覽器們以此模式渲染。

+

Mozilla 會在以下情況使用此模式：

+ +

For further reading, check out: List of Quirks and List of Doctypes and What Modes They Cause.

+

 

+

事件差異

+

  Mozilla 和 Internet Explorer 在 events 的這個部分幾乎是完全不同的。 Mozilla event model 遵循 W3C 以及 Netscape model。但在 Internet Explorer 中，倘若一個 function 被 event 所觸發，那麼我們可以用 window.event 來接觸到該 event 物件 - 這必須被特別指定為參數傳入。Mozilla 則會直接傳遞該 event 物件到 event handlers 中。一個跨瀏覽器 (cross-browser) 的 event handling 範例如下：

+
<div onclick="handleEvent(event)">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+</script>
+
+

  此外，event 物件產生時所擁有的 properties 和 functions 在 Mozilla and Internet Explorer 也可能有不同的名字。請參見 Table 4。

+

 

+

Table 4. Mozilla/Internet Explorer event property 比較表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Internet Explorer NameMozilla NameDescription
altKeyaltKeyBoolean property that returns whether the alt key was pressed during the event.
cancelBubblestopPropagation()Used to stop the event from bubbling farther up the tree.
clientXclientXThe X coordinate of the event, in relation to the client.
clientYclientYThe Y coordinate of the event, in relation to the client.
ctrlKeyctrlKeyBoolean property that returns whether the Ctrl key was pressed during the event.
fromElementrelatedTargetFor mouse events, this is the element from which the mouse moved away.
keyCodekeyCodeFor keyboard events, this is a number representing the key that was pressed. It is 0 for mouse events.
returnValuepreventDefault()Used to prevent the event's default action from occurring.
screenXscreenXThe X coordinate of the event, in relation to the screen.
screenXscreenYThe Y coordinate of the event, in relation to the screen.
shiftKeyshiftKeyBoolean property that returns whether the Shift key was pressed during the event.
srcElementtargetThe element to which the event was originally dispatched.
toElementcurrentTargetFor mouse events, this is the element to which the mouse moved.
typetypeReturns the name of the event.
+

加上事件控制式

+

  Mozilla 支援了兩種方式來附加 events 到 JavaScript 中。第一種是所有瀏覽器都支援的，直接將 event properties 連接到物件上。下例為設定一個 click event handler，一個 function reference 被設定到物件的 onclick property：

+
<div id="myDiv">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+</script>
+
+

Mozilla fully supports the W3C standard way of attaching listeners to DOM nodes. You use the addEventListener() and removeEventListener() methods, and have the benefit of being able to set multiple listeners for the same event type. Both methods require three parameters: the event type, a function reference, and a boolean denoting whether the listener should catch events in their capture phase. If the boolean is set to false, it will only catch bubbling events. W3C events have three phases: capturing, at target, and bubbling. Every event object has an eventPhase attribute indicating the phase numerically (0 indexed). Every time you trigger an event, the event starts at the DOM's outermost element, the element at the top of the DOM tree. It then walks the DOM using the most direct route toward the target, which is the capturing phase. When the event reaches the target, the event is in the target phase.  After arriving at the target, it walks up the DOM tree back to the outermost node; this is bubbling. Internet Explorer's event model only has the bubbling phase; therefore, setting the third parameter to false results in Internet Explorer-like behavior:

+
<div id="myDiv">Click me!</div>
+
+<script>
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+</script>
+
+

One advantage of addEventListener() and removeEventListener() over setting properties is that you can have multiple event listeners for the same event, each calling another function. Thus, to remove an event listener requires all three parameters be the same as the ones you use when adding the listener.

+

Mozilla does not support Internet Explorer's method of converting <script> tags into event handlers, which extends <script> with for and event attributes (see Table 5). It also does not support the attachEvent and detachEvent methods. Instead, you should use the addEventListener and removeEventListener methods. Internet Explorer does not support the W3C events specification.

+

 

+

Table 5. Event method differences between Mozilla and Internet Explorer

+ + + + + + + + + + + + + + + + + + +
Internet Explorer MethodMozilla MethodDescription
attachEvent(aEventType, aFunctionReference)addEventListener(aEventType, aFunctionReference, aUseCapture)Adds an event listener to a DOM element.
detachEvent(aEventType, aFunctionReference)removeEventListener(aEventType, aFunctionReference, aUseCapture)Removes an event listener to a DOM element.
+

Rich-text 編輯

+

While Mozilla prides itself with being the most W3C standards-compliant browser, it does support nonstandard functionality, such as innerHTML and rich text editing, if no W3C equivalent exists.

+

Mozilla 1.3 introduced an implementation of Internet Explorer's designMode feature, which turns an HTML document into a rich text editor field. Once turned into the editor, commands can run on the document through the execCommand command. Mozilla does not support Internet Explorer's contentEditable attribute for making any widget editable. You can use an iframe to add a rich text editor.

+

Rich-text 差異

+

Mozilla supports the W3C standard of accessing iframe's document object through IFrameElm.contentDocument, while Internet Explorer requires you to access it through document.frames{{ mediawiki.external('\"name\"') }} and then access the resulting document:

+
function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+
+

Another difference between Mozilla and Internet Explorer is the HTML that the rich text editor creates. Mozilla defaults to using CSS for the generated markup. However, Mozilla allows you to toggle between HTML and CSS mode using the useCSS execCommand and toggling it between true and false. Internet Explorer always uses HTML markup.

+
Mozilla (CSS):
+  <span style="color: blue;">Big Blue</span>
+
+Mozilla (HTML):
+  <font color="blue">Big Blue</font>
+
+Internet Explorer:
+  <FONT color="blue">Big Blue</FONT>
+
+

Below is a list of commands that execCommand in Mozilla supports:

+

 

+

Table 6. Rich text editing commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Command NameDescriptionArgument
boldToggles the selection's bold attribute.---
createlinkGenerates an HTML link from the selected text.The URL to use for the link
deleteDeletes the selection.---
fontnameChanges the font used in the selected text.The font name to use (Arial, for example)
fontsizeChanges the font size used in the selected text.The font size to use
fontcolorChanges the font color used in the selected text.The color to use
indentIndents the block where the caret is.---
inserthorizontalruleInserts an <hr> element at the cursor's position.---
insertimageInserts an image at the cursor's position.URL of the image to use
insertorderedlistInserts an ordered list (<ol>) element at the cursor's position.---
insertunorderedlistInserts an unordered list (<ul>) element at the cursor's position.---
italicToggles the selection's italicize attribute.---
justifycenterCenters the content at the current line.---
justifyleftJustifies the content at the current line to the left.---
justifyrightJustifies the content at the current line to the right.---
outdentOutdents the block where the caret is.---
redoRedoes the previous undo command.---
removeformatRemoves all formatting from the selection.---
selectallSelects everything in the rich text editor.---
strikethroughToggles the strikethrough of the selected text.---
subscriptConverts the current selection into subscript.---
superscriptConverts the current selection into superscript.---
underlineToggles the underline of the selected text.---
undoUndoes the last executed command.---
unlinkRemoves all link information from the selection.---
useCSSToggles the usage of CSS in the generated markup.Boolean value
+

For more information, visit Rich-Text Editing in Mozilla.

+

 

+

XML 差異

+

Mozilla 對 XML 與相關的技術有很完整的支援，如對 XSLT 與 Web services 等。它也支援一些 Internet Explorer 非標準的延伸，例如 XMLHttpRequest。

+

Mozilla has strong support for XML and XML-related technologies, such as XSLT and Web services. It also supports some nonstandard Internet Explorer extensions, such as XMLHttpRequest.

+

掌控 XML

+

如同對於標準 HTML，對於可各方面控制 XML 檔的 DOM 的支援，Mozilla 也是依 W3C 所定的 XML DOM 規格。Mozilla 與 Internet Explorer 在 XML DOM 上的不同處大多在於 Internet Explorer 非標準的處理方式。一個常見的差異是對空白字元節點的處理。 通常在建立 XML 時，XML 節點間會有空白。 Internet Explorer 用 XMLNode.childNodes[] 時不會包括這些空白節點，但在 Mozilla 上這些節點會在 array 裡。

+

  在 HTML 標準上，Mozilla 支援了 W3C XML DOM 規範，但  Internet Explorer 則否。Mozilla 和 Internet Explorer 的一些差異很大部分是肇始於後者的非規範行為。在這其中，最廣為人知的應該就是如何去處理 white space text nodes 了。通常在 XML 文檔產生後，會在 XML node 間包含著一些 white space。當你使用 XMLNode.childNodes[] 時，Internet Explorer 將不會包含這些 white space nodes。但在 Mozilla 中，這些 nodes 仍會出現在 array 中。

+
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+
+

The first line of JavaScript 的第一行載入 XML 檔並用 documentElement 來存取它的 root 元素 (myXMLDoc)。第二行顯示子節點的數目。根據 W3C 規格，接在一起的空白與換行字符組成一個文字節點。在 Mozilla 上 myXMLdoc 節點有三個子：一個有換行字符與兩個空白的文字節點、myns:foo 節點、與另一個有換行字符的文字節點。Internet Explorer 並不遵循這個，因此上面的程式碼會顯示 "1"，表示只有 myns:foo 節點。所以，如要迴走子節點並掠過文字節點，要分辨這些節點。

+

The first line of JavaScript loads the XML document and accesses the root element (myXMLDoc) by retrieving the documentElement. The second line simply alerts the number of child nodes. Per the W3C specification, the white spaces and new lines merge into one text node if they follow each other. For Mozilla, the myXMLdoc node has three children: a text node containing a new line and two spaces; the myns:foo node; and another text node with a new line. Internet Explorer, however, does not abide by this and will return "1" for the above code, namely only the myns:foo node. Therefore, to walk the child nodes and disregard text nodes, you must distinguish such nodes.

+

As mentioned earlier, every node has a nodeType attribute representing the node type. For example, an element node has type 1, while a document node has type 9. To disregard text nodes, you must check for types 3 (text node) and 8 (comment node).

+
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run < myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &&
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    }
+  }
+
+

XML data islands

+

Internet Explorer has a nonstandard feature called XML data islands, which allow you to embed XML inside an HTML document using the nonstandard HTML tag <xml>. Mozilla does not support XML data islands and handles them as unknown HTML tags. You can achieve the same functionality using XHTML; however, because Internet Explorer's support for XHTML is weak, this is usually not an option.

+

One cross-browser solution is to use DOM parsers, which parse a string that contains a serialized XML document and generates the document for the parsed XML. Mozilla uses the DOMParser class, which takes the serialized string and creates an XML document out of it. In Internet Explorer, you can achieve the same functionality using ActiveX. A new Microsoft.XMLDOM generates and has a loadXML method that can take in a string and generate a document from it. The following code shows you how:

+
IE XML data island:
+  ..
+  <xml id="xmldataisland">
+    <foo>bar</foo>
+  </xml>
+
+Cross-browser solution:
+  var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
+
+  var myDocument;
+
+  if (document.implementation.createDocument){
+    // Mozilla, create a new DOMParser
+    var parser = new DOMParser();
+    myDocument = parser.parseFromString(xmlString, "text/xml");
+  } else if (window.ActiveXObject){
+    // Internet Explorer, create a new XML document using ActiveX
+    // and use loadXML as a DOM parser.
+    myDocument = new ActiveXObject("Microsoft.XMLDOM")
+    myDocument.async="false";
+
+    myDocument.loadXML(xmlString);
+  }
+
+

XML HTTP request

+

Internet Explorer allows you to send and retrieve XML files using MSXML's XMLHTTP class, which is instantiated through ActiveX using new ActiveXObject("Msxml2.XMLHTTP") or new ActiveXObject("Microsoft.XMLHTTP"). Since there is no standard method of doing this, Mozilla provides the same functionality in the global JavaScript XMLHttpRequest object. The object generates asynchronous requests by default.

+

After instantiating the object using new XMLHttpRequest(), you can use the open method to specify what type of request (GET or POST) you use, which file you load, and if it is asynchronous or not. If the call is asynchronous, then give the onload member a function reference, which is called once the request has completed.

+

Synchronous request:

+
  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", false);
+
+  myXMLHTTPRequest.send(null);
+
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+
+

Asynchronous request:

+
  var myXMLHTTPRequest;
+
+  function xmlLoaded() {
+    var myXMLDocument = myXMLHTTPRequest.responseXML;
+  }
+
+  function loadXML(){
+    myXMLHTTPRequest = new XMLHttpRequest();
+
+    myXMLHTTPRequest.open("GET", "data.xml", true);
+
+    myXMLHTTPRequest.onload = xmlLoaded;
+
+    myXMLHTTPRequest.send(null);
+  }
+
+

Table 7 features a list of available methods and properties for Mozilla's XMLHttpRequest.

+

 

+

Table 7. XMLHttpRequest methods and properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
void abort()Stops the request if it is still running.
string getAllResponseHeaders()Returns all response headers as one string.
string getResponseHeader(string headerName)Returns the value of the specified header.
functionRef onerrorIf set, the references function will be called whenever an error occurs during the request.
functionRef onloadIf set, the references function will be called when the request completes successfully and the response has been received. Use when an asynchronous request is used.
void open (string HTTP_Method, string URL)
+
+ void open (string HTTP_Method, string URL, boolean async, string userName, string password)		Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the send() method after initialization. If async is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.
int readyStateState of the request. Possible values: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDescription
0UNINITIALIZED - open() has not been called yet.
1LOADING - send() has not been called yet.
2LOADED - send() has been called, headers and status are available.
3INTERACTIVE - Downloading, responseText holds the partial data.
4COMPLETED - Finished with all operations.
+
string responseTextString containing the response.
DOMDocument responseXMLDOM Document containing the response.
void send(variant body)Initiates the request. If body is defined, it issent as the body of the POST request. body can be an XML document or a string serialized XML document.
void setRequestHeader (string headerName, string headerValue)Sets an HTTP request header for use in the HTTP request. Has to be called after open() is called.
string statusThe status code of the HTTP response.
+

XSLT 差異

+

Mozilla supports XSL Transformations (XSLT) 1.0. It also allows JavaScript to perform XSLT transformations and allows running XPATH on a document.

+

Mozilla requires that you send the XML and XSLT file holding the stylesheet with an XML mimetype (text/xml or application/xml). This is the most common reason why XSLT won't run in Mozilla but will in Internet Explorer. Mozilla is strict in that way.

+

Internet Explorer 5.0 and 5.5 supported XSLT's working draft, which is substantially different than the final 1.0 recommendation. The easiest way to distinguish what version an XSLT file was written against is to look at the namespace. The namespace for the 1.0 recommendation is http://www.w3.org/1999/XSL/Transform, while the working draft's namespace is http://www.w3.org/TR/WD-xsl. Internet Explorer 6 supports the working draft for backwards compatibility, but Mozilla does not support the working draft, only the final recommendation.

+

If XSLT requires you to distinguish the browser, you can query the "xsl:vendor" system property. Mozilla's XSLT engine will report itself as "Transformiix" and Internet Explorer will return "Microsoft."

+
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
+  <!-- Mozilla specific markup -->
+</xsl:if>
+<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
+  <!-- Internet Explorer specific markup -->
+</xsl:if>
+
+

Mozilla also provides JavaScript interfaces for XSLT, allowing a Web site to complete XSLT transformations in memory. You can do this using the global XSLTProcessor JavaScript object. XSLTProcessor requires you to load the XML and XSLT files, because it needs their DOM documents. The XSLT document, imported by the XSLTProcessor, allows you to manipulate XSLT parameters. XSLTProcessor can generate a standalone document using transformToDocument(), or it can create a document fragment using transformToFragment(), which you can easily append into another DOM document. Below is an example:

+

 

+
var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// load the xslt file, example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// get the XML document and import it
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// load the xml file, example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+
+

After creating an XSLTProcessor, you load the XSLT file using XMLHttpRequest. The XMLHttpRequest's responseXML member contains the XML document of the XSLT file, which is passed to importStylesheet. You then use the XMLHttpRequest again to load the source XML document that must be transformed; that document is then passed to the transformToDocument method of XSLTProcessor. Table 8 features a list of XSLTProcessor methods.

+

 

+

Table 8. XSLTProcessor methods

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
void importStylesheet(Node styleSheet)Imports the XSLT stylesheet. The styleSheet argument is the root node of an XSLT stylesheet's DOM document.
DocumentFragment transformToFragment(Node source, Document owner)Transforms the Node source by applying the stylesheet imported using the importStylesheet method and generates a DocumentFragment. owner specifies what DOM document the DocumentFragment should belong to, making it appendable to that DOM document.
Document transformToDocument(Node source)Transforms the Node source by applying the stylesheet imported using the importStylesheet method and returns a standalone DOM document.
void setParameter(String namespaceURI, String localName, Variant value)Sets a parameter in the imported XSLT stylesheet.
Variant getParameter(String namespaceURI, String localName)Gets the value of a parameter in the imported XSLT stylesheet.
void removeParameter(String namespaceURI, String localName)Removes all set parameters from the imported XSLT stylesheet and makes them default to the XSLT-defined defaults.
void clearParameters()Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.
void reset()Removes all parameters and stylesheets.
+
+

原文資訊

+ +
diff --git a/files/zh-tw/archive/mozilla/persona/branding/index.html b/files/zh-tw/archive/mozilla/persona/branding/index.html new file mode 100644 index 0000000000..2793b91f88 --- /dev/null +++ b/files/zh-tw/archive/mozilla/persona/branding/index.html @@ -0,0 +1,42 @@ +--- +title: 品牌資源 +slug: Archive/Mozilla/Persona/branding +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +

「使用 Persona 登入」按鈕

+

圖片

+

登入按鈕有三種版本、三種配色：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Sign in with your EmailSign in with PersonaSign in
黑
藍
紅
+

CSS-Based

+

Sawyer Hollenshead 製作了一套精美的 CSS-based 按鈕。下載 (.zip)

+

更多資訊

+

您可在 Sean Martell's style primer 找到更多有關 Persona 視覺設計的資訊。

diff --git a/files/zh-tw/archive/mozilla/persona/index.html b/files/zh-tw/archive/mozilla/persona/index.html new file mode 100644 index 0000000000..5345e5f569 --- /dev/null +++ b/files/zh-tw/archive/mozilla/persona/index.html @@ -0,0 +1,125 @@ +--- +title: Persona +slug: Archive/Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +
+

       保持聯繫或取得協助！

+ +

追蹤 我們的 blog，加入 我們的郵件列表，或在 IRC 裡頭 #identity 頻道找到我們。

+
+ +

Mozilla Persona 是一個跨瀏覽器的 Web 登入驗證系統，其基本設計精神為易於使用以及易於實作。它可以使用於當今主要的各種瀏覽器環境中，你可以現在就開始使用它。

+ +

為什麼你應該套用 Persona 在你的網站上呢？

+ +
    +
  1. Persona 完全消除了特定網站的密碼，讓使用者們與網站們從創立、管理以及安全地保存密碼的責任中解放出來。
    2. +
  2. Persona 易於使用。只需要兩次點擊，一位 Persona 使用者即可登入某個新網站，諸如：Voost 或 The Times Crossword ，避開了造訪新網站又要再申請一組帳號密碼的麻煩事。
    3. +
  3. Persona 易於實作。開發人員只需要花一個下午的時間，即可將 Persona 套用到一個網站中。
    4. +
  4. 更棒的是，不會被鎖定。開發人員可以取得造訪網站的所有使用者已驗證過的電子郵件信箱，而使用者可以使用任何一個或多個電子郵件信箱在 Persona 中。
    5. +
+ +

而且，Persona 未來將會變得越來越棒：它是基於開放、去中心化的通訊協定，被設計規劃成可直接整合到各個瀏覽器中，以及可由電子郵件服務提供者直接提供支援。今天採用並導入 Persona 的網站將直接體驗到這些未來的改進項目，不需要再更動其程式碼。

+ +
備註：Persona 正在很活躍地開發中。歡迎造訪我們的 blog 來認識更多心功能，或是加入我們的郵件群組（英文）給予我們更多建議與回饋！
+ +

動手導入 Persona 到你的網站中

+ + + + + + + + + + + + +
+

開始動手！

+ +
+
為什麼是 Persona？
+
認識更多關於在你的網站上採用 Persona 的原因，以及它與其他身分驗證系統的差異比較。
+
快速指南
+
這是一份快捷的攻略，馬上學習如何在你的網站中加入 Persona 功能。
+
+ 		+

Persona API 參考資料

+ +
+
navigator.id API
+
這是一份關於 navigator.id 物件的參考資料，Web 開發人員可以用來將 Persona 整合到網站中。
+
Verification (驗證) API
+
這份參考資料是關於建構在https://verifier.login.persona.org/verify 的遠端驗證 API。
+
+
+

導引指南

+ +
+
安全考量
+
實作與技巧用以確保你的 Persona 佈署是安全的。
+
瀏覽器相容性
+
確切得知有哪些瀏覽器有支援 Persona。
+
國際化
+
了解 Persona 如何處理不同的各國語言。
+
+ 		+

資源

+ +
+
函式庫與套件
+
尋找你愛好的程式語言、web framework、blog 或是內容管理系統 (CMS) 的函式庫或套件 (plugin)。
+
The Persona cookbook
+
給 Persona 網站參考的範例程式碼。包含有 C# (MVC3)、PHP、Node.JS 等等各種語言。
+
品牌資源
+
Persona 登入按鈕，以及方便你的使用者識別的 Persona 圖形資源。
+
+
+ +

 

+ + + + + + + + +
+

給身分識別提供者 (Identity Provider) 的資訊

+ +

如果你是電子郵件服務提供者，或是身分識別服務提供者，請參考以下資訊獲知如何整合並成為一個 Persona 身分識別提供者 (IdP)。

+ +
+
IdP 概述
+
Persona 身份識別提供者概述。
+
實作 IdP
+
這是一份詳細的技術指南，關於如何成為身分識別提供者 (IdP)。
+
.well-known/browserid
+
.well-known/browserid 文件的結構與用途概述。這份文件檔案被 IdPs 用於廣播通知其支援此通訊協定。
+
+ 		+

Persona 專案

+ +
+
專有名詞對照表
+
BrowserID 和 Persona 定義的專有名詞。
+
FAQ
+
常見問題集。
+
通訊協定概述
+
BrowserID 通訊協定的底層技術性概述。
+
加密
+
一瞥 Persona 和 BrowserID 背後的密碼學概念。
+
規格
+
在這裡可以挖到更多更深的技術性細節。
+
Persona 網站
+
為了讓 Persona 運作，我們在 https://login.persona.org 設立了三種服務：一個身分識別提供者，一個可移動可轉移的 {{ domxref("navigator.id") }} API 實作，以及一個身分判定 (identity assertion) 驗證服務。
+
Persona 原始程式碼
+
我們將 Persona 網站背後的程式碼放在 GitHub 上。非常歡迎送 Pull requests 給我們！
+
+
+ +

 

diff --git a/files/zh-tw/archive/mozilla/persona/internationalization/index.html b/files/zh-tw/archive/mozilla/persona/internationalization/index.html new file mode 100644 index 0000000000..b4ec357352 --- /dev/null +++ b/files/zh-tw/archive/mozilla/persona/internationalization/index.html @@ -0,0 +1,51 @@ +--- +title: Internationalization +slug: Archive/Mozilla/Persona/Internationalization +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Internationalization +--- +

Persona 的本土化如何呢？

+

將來，使用 Persona 登入網站的使用者界面（UI）將被直接集成至瀏覽器中，並且隨著瀏覽器自己的本土化來本土化。。而不支援集成的瀏覽器，Persona 的使用者界面即由一系列來自 login.persona.org 的對話框所組成。這些對話框的翻譯由來自社群的自願者進行，並且有超過 45 種語言可用於這些產品中。

+

Persona 如何選擇語言？

+

Persona 服務通過來自瀏覽器請求頭部訊息中的 Accept-Language 來選擇語言。Accept-Language 頭部訊息所使用的語言與 mozilla.org 所使用的為一致：

+
    +
  1. 對於每個 Accept-Language 中的語言標籤： +
      +
    • 確保我們有完整的該語言標籤的語言，則為精準配對該語言標籤
      • +
    • 確保我們有該語言標籤中的第一個部分，則精準配對第一部分
      • +
    +
    2. +
  2. 若沒辦法通過規則 1 來配對，則退而使用 en-US 。但是，通常 en 或 en-US 幾乎會被大多數瀏覽器作為最後一個傳送的 accept-lang 頭部資訊。
    3. +
+

舉例來說，下列下列表格列出了不同的 Accept-Language 會選擇的語言，假設支援下列語言： en-US, es, es-MX:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Accept-Language HeaderPersona 選擇的語言
es-AR,es;q=0.8,en-us;q=0.5es
es-MX,es;q=0.8,en-us;q=0.5es-MX
es-es,en-us;q=0.5en-US
es-esen-US
+

目前還沒辦法讓網站強制將對話框設為某一種語言。這是因為 Persona UI 的邏輯是（以及未來在本機上實現的，也會是）設計為作為瀏覽器的使用者界面的一部分，所以其語言應該要同瀏覽器的語言一致。

+

我可以如何協助？

+

Persona 使用了 Mozilla Verbatim 來協助志願者建立新的翻譯。若您想幫助，請參閱開始使用 Verbatim 並看看 Verbatim 上的「BrowserID」計劃 。

+

 

diff --git a/files/zh-tw/archive/mozilla/persona/quick_setup/index.html b/files/zh-tw/archive/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..d21858329f --- /dev/null +++ b/files/zh-tw/archive/mozilla/persona/quick_setup/index.html @@ -0,0 +1,137 @@ +--- +title: 快速指南 +slug: Archive/Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +

要把 Persona 登入系統加到你的網站，只需要五個步驟：

+
    +
  1. 在你的網頁中引入 Persona 的 JavaScript 函式庫。
    2. +
  2. 加上「登入」和「登出」按鈕。
    3. +
  3. 監聽登入和登出行為。
    4. +
  4. 驗證使用者的身分 (credential)。
    5. +
  5. 檢視最佳導入實例。
    6. +
+

你應該能在一個下午就建置完成並開始執行，另外重要的事情是：如果你要在你的網站上開始使用 Persona，請花點時間訂閱 Persona 通知 郵件清單。它的流量非常低，只會用於通知你關於變更公告或是安全問題等可能對你的網站造成影響的議題。

+

步驟1：引入 Persona 函式庫

+

Persona 被設計為跨瀏覽器且可在全部主要桌面和移動瀏覽器中工作。

+

在未來我們期望瀏覽器提供 Persona 的原生支援，但我們同時提供了一個 JavaScript 函式庫完整實作了使用者介面和客戶端部分的協議。透過包含這個函式庫，你的使用者將可以用 Persona 登入，無論他們的瀏覽器是否有原生支援。

+

一旦頁面中的這個函式庫載入完成，你需要的 Persona 函式（{{ domxref("navigator.id.watch()", "watch()") }}、{{ domxref("navigator.id.request()", "request()") }} 和 {{ domxref("navigator.id.logout()", "logout()") }}）會在全域物件 navigator.id 中可用。

+

要包含 Persona JavaScript 函式庫，你可以把這個 script 標籤放進你頁面的首部：

+
<script src="https://login.persona.org/include.js"></script>
+
+

你必須在每個使用 {{ domxref("navigator.id") }} 中函式的頁面裡包含這個標籤。因為 Persona 始終在開發中，你不應該自行管理 include.js 檔。

+

步驟2：加入登入/登出按鈕

+

因為 Persona 被設計為一個 DOM API，你必須在使用者按下你網站上的登入或登出按鈕時呼叫函式。要開啟 Persona 對話視窗並提示使用者登入，你應該呼叫 {{ domxref("navigator.id.request()") }} 。而登出要呼叫 {{ domxref("navigator.id.logout()") }} 。

+

例如：

+
var signinLink = document.getElementById('signin');
+if (signinLink) {
+signinLink.onclick = function() { navigator.id.request(); };
+};
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+signoutLink.onclick = function() { navigator.id.logout(); };
+};
+
+

那些按鈕的是什麼樣子的？查看我們的品牌資源頁面中的預製圖片和基於 CSS 的按鈕！

+

步驟3：監視登入/登出行為

+

要把 Persona 封裝成函式，你需要告訴它當使用者登入/登出時做甚麼。呼叫 {{ domxref("navigator.id.watch()") }} 函式就可以實作，它支援三處：

+
    +
  1. +

    你網站目前使用者的 loggedInEmail ，如果沒有則為 null 。你應該在渲染頁面的時候動態產生它。

    +
    2. +
  2. +

    當觸發 onlogin 行為的時候呼叫的函式。這個函式會被傳遞一個必須認證的「身分斷言」參數。

    +
    3. +
  3. +

    當觸發 onlogout 行為的時候呼叫的函式。這個函式不會被傳遞任何參數。

    +
    4. +
+
+

注意：你必須總是在呼叫 {{ domxref("navigator.id.watch()") }} 時同時包含 onlogin 和 onlogout 。

+
+

例如，如果你現在認為 Bob 已經登入到你的網站，你會這樣做：

+
var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+loggedInUser: currentUser,
+onlogin: function(assertion) {
+// 一個使用者已經登入！這是你需要做的：
+// 1. 把斷言發送到後端驗證並建立一個工作階段。
+// 2. 更新你的 UI。
+$.ajax({ /* <-- 本例使用了 jQuery，但你也可以用你想用的 */
+type: 'POST',
+url: '/auth/login', // 這是你網站上的一個 URL
+data: {assertion: assertion},
+success: function(res, status, xhr) { window.location.reload(); },
+error: function(res, status, xhr) { alert("登入失敗" + res); }
+});
+},
+onlogout: function() {
+// 一個使用者已經登出！這是你需要做的：
+// 銷毀使用者的工作階段並重新導向使用者或做後端的呼叫。
+// 同樣，讓 loggedInUser 在下個頁面載入時變為 null。
+// （這是一個字面的 JavaScript null。不是 false、 0 或 undefined。null。)
+$.ajax({
+type: 'POST',
+url: '/auth/logout', // 這是你網站上的一個 URL
+success: function(res, status, xhr) { window.location.reload(); },
+error: function(res, status, xhr) { alert("登出失敗" + res); }
+});
+}
+});
+
+

在本例中，onlogin 和 onlogout 都通過向你網站的後端發送非同步 POST 請求來實作。後端隨後通常用設定或刪除工作階段 cookie 中的資訊來登入或登出使用者。之後，如果一切都核對無誤，頁面重新載入來考慮帳號的新登入狀態。

+

你當然可以用 AJAX 來不用重新載入或重新導向來實作，但這超出了本教學的範疇。

+

你必須在每個有登入/登出按鈕的頁面上呼叫這個函式。要為使用者支持 Persona 加強功能，諸如自動登入和全域登出，你應該在網站上的每個頁面都呼叫這個函式。

+

步驟4：驗證使用者證書

+

Persona 用「身分斷言」來代替密碼，那是一種類似一次性、單一網站的、使用者郵件地址捆綁的密碼。當使用者想要登入時，你的 onlogin 回調會傳入一個該使用者的斷言來呼叫。在你登入他們前，你必須驗證斷言的有效性。

+

在你的伺服器上而不是使用者瀏覽器上執行的 JavaScript 中驗證斷言是極度重要的，因為那很容易偽造。上面的例子用 jQuery 的 $.ajax() 輔助函式來把斷言通過 POST 到 /auth/login 來呈遞給後端。

+

一旦你的伺服器取得了斷言，你如何驗證它？最簡單的方法是用 Mozilla 提供的輔助服務。簡單地把斷言以兩個參數 POST 給 https://verifier.login.persona.org/verify：

+
    +
  1. assertion: 使用者提供的身分斷言。
    2. +
  2. audience: 你網站的主機名稱和連接埠。你必須在後端硬編碼這個值；不要從使用者提供的任何資料中派生這個值。
    3. +
+

例如，如果你是 example.com，你可以用下面的命令行來測試斷言：

+
$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+
+

如果它是有效的，你會得到像這樣的一個 JSON 回應：

+
{
+"status": "okay",
+"email": "bob@eyedee.me",
+"audience": "https://example.com:443",
+"expires": 1308859352261,
+"issuer": "eyedee.me"
+}
+
+

你可以閱讀驗證服務 API來獲知更多關於驗證服務的內容。一個 /api/login 實作的使用了 Python、Flask web 框架和 Requests HTTP 函式庫的例子看起來是這樣：

+
@app.route('/auth/login', methods=['POST'])
+def login():
+# 請求必須包含我們要驗證的斷言
+if 'assertion' not in request.form:
+abort(400)
+
+# 把斷言發送給 Mozilla 的驗證服務
+data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+# 驗證器回應了嗎？
+if resp.ok:
+# 處理回應
+verification_data = json.loads(resp.content)
+
+# 檢查斷言是否有效
+if verification_data['status'] == 'okay':
+# 設置一個安全工作階段 cookie 來登入使用者
+session.update({'email': verification_data['email']})
+return resp.content
+
+# 哎喲，有什麼東西不對，放棄
+abort(500)
+
+

工作階段管理可能很像你現有的登入系統。首先的大區別是在驗證使用者身分採用了檢查斷言而不是檢查密碼。另一個不同是確保使用者的郵件地址有效來用於 {{ domxref("navigator.id.watch()") }} 的 loggedInEmail 參數

+

登出很簡單：你只需要移除使用者的工作階段 cookie。

+

步驟5：回顧最佳實踐

+

一旦所有的東西都工作正常並且你已經成功登入和登出你的網站，你應該花一會時間來回顧安全可靠地使用 Persona 的最佳實踐。

+

如果你在做一個要作為生產環境的網站，你會想要編寫整合測試來模擬用 Persona 登入或登出使用者。要改善 Selenium 中的這個行為，請考慮使用 bidpom 函式庫。mockmyid.com 和 personatestuser.org 這兩個網站也可能會有用。

+

最後，不要忘記登記加入 Persona 通知 郵件清單，這樣會通知你任何安全問題或 Persona API 的向後相容變更。這個清單的流量非常低：它只用於通知會對你的網站造成負面影響的變更。

diff --git a/files/zh-tw/archive/mozilla/persona/remote_verification_api/index.html b/files/zh-tw/archive/mozilla/persona/remote_verification_api/index.html new file mode 100644 index 0000000000..7d84cc21b6 --- /dev/null +++ b/files/zh-tw/archive/mozilla/persona/remote_verification_api/index.html @@ -0,0 +1,171 @@ +--- +title: 遠端驗證 API +slug: Archive/Mozilla/Persona/Remote_Verification_API +translation_of: Archive/Mozilla/Persona/Remote_Verification_API +--- +

概覽

+

當使用者嘗試登入至網站時，瀏覽器會產生一名為「斷言」的資料結構，其實質上就是一個加密過的電子郵件位置。瀏覽器傳送這個斷言至網站上，使用者登入前，網站必須驗證斷言的有效性。

+

斷言可以在本地端或是通過在下列位置的 API 來進行驗證：https://verifier.login.persona.org/verify。這個頁面介紹了如何使用 API 。

+

方法

+

HTTP POST 請求至 https://verifier.login.persona.org/verify。

+

參數

+
+
+ assertion
+
+ 使用者所提供之斷言。作為傳入 {{ domxref("navigator.id.watch()") }} 中 onlogin 函數的第一個參數。
+
+ audience
+
+ 您網站的通訊協定、網域名稱、與通訊埠。例如：「https://example.com:443」
+
+

回傳值

+

呼叫後會傳統一個包含 status 元素的 JSON 結構，其值可能為「okay」或是「failure」。 依據 status 的值的不同，可能會包含下列表中的額外元素。

+

"okay"

+

該斷言有效。

+

在這種情況下，JSON 結構會包含下列附加元素：

+ + + + + + + + + + + + + + + + + + + +
"email"斷言中包含的登入者的郵件位置。
"audience"Audience 的值包含了斷言。Expected to be your own website URL.
"expires"斷言有效期的資料，expressed as the primitive value of a Date object: that is, the number of milliseconds since midnight 01 January, 1970 UTC.
"issuer"The hostname of the identity provider that issued the assertion.
+

"failure"

+

該斷言無效。這種情況下 JSON 結構將會包含一個附加的元素：

+ + + + + + + +
"reason"一字串解釋驗證為何失敗。
+

範例

+

node.js

+

該範例為使用 express.js 的 Node.js 伺服器。

+
var express = require("express"),
+    app = express.createServer(),
+    https = require("https"),
+    querystring = require("querystring");
+/* ... */
+
+// Audience 必須符合您瀏覽器的位置列上顯示的，
+// 包含通訊協定、主機名稱、以及通訊埠。
+var audience = "http://localhost:8888";
+
+app.post("/authenticate", function(req, res) {
+  var vreq = https.request({
+    host: "verifier.login.persona.org",
+    path: "/verify",
+    method: "POST"
+  }, function(vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body+=chunk; } )
+        .on('end', function() {
+          try {
+            var verifierResp = JSON.parse(body);
+            var valid = verifierResp && verifierResp.status === "okay";
+            var email = valid ? verifierResp.email : null;
+            req.session.email = email;
+            if (valid) {
+              console.log("assertion verified successfully for email:", email);
+              res.json(email);
+            } else {
+              console.log("failed to verify assertion:", verifierResp.reason);
+              res.send(verifierResp.reason, 403);
+            }
+          } catch(e) {
+            console.log("non-JSON response from verifier");
+            // bogus response from verifier!
+            res.send("bogus response from verifier!", 403);
+
+          }
+        });
+  });
+
+  vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  var data = querystring.stringify({
+    assertion: req.body.assertion,
+    audience: audience
+  });
+
+  vreq.setHeader('Content-Length', data.length);
+  vreq.write(data);
+  vreq.end();
+
+  console.log("verifying assertion!");
+});
+
+
+

via Lloyd Hilaiel

+

PHP

+
$url = 'https://verifier.login.persona.org/verify';
+$assert = filter_input(
+    INPUT_POST,
+    'assertion',
+    FILTER_UNSAFE_RAW,
+    FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH
+);
+//使用 $_POST 超全域陣列供 PHP < 5.2 並撰寫您自己的篩選其
+$params = 'assertion=' . urlencode($assert) . '&audience=' .
+           urlencode('http://example.com:80');
+$ch = curl_init();
+$options = array(
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => TRUE,
+    CURLOPT_POST => 2,
+    //CURLOPT_SSL_VERIFYPEER => true,   //This currently blocks connection to 'https://verifier.login.persona.org/verify'
+    CURLOPT_SSL_VERIFYPEER => 0,
+
+    CURLOPT_SSL_VERIFYHOST => 2,
+    CURLOPT_POSTFIELDS => $params
+);
+curl_setopt_array($ch, $options);
+$result = curl_exec($ch);
+curl_close($ch);
+echo $result;
+

Via Christian Heilmann

+

Java

+
@Override
+protected void doPost(final HttpServletRequest req,
+   final HttpServletResponse resp) throws ServletException,
+   IOException {
+
+   final String audience = req.getServerName();
+   final String assertion = req.getParameter("assertion");
+   final Verifier verifier = new Verifier();
+   final BrowserIDResponse personaResponse = verifier.verify(assertion,audience);
+   final Status status = personaResponse.getStatus();
+
+   if (status == Status.OK) {
+     /* Authentication with Persona was successful */
+     String email = personaResponse.getEmail();
+     log.info("{} has sucessfully signed in", email);
+     HttpSession session = req.getSession(true);
+     session.setAttribute("email", email);
+
+   } else {
+     /* Authentication with Persona failed */
+     log.info("Sign in failed...");
+
+   }
+}
+
+

Via Javier

+

 

+

注意：If you send the assertion and audience parameters as a JSON-object, they must not be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they must be URL-encoded.

diff --git a/files/zh-tw/archive/mozilla/persona/why_persona/index.html b/files/zh-tw/archive/mozilla/persona/why_persona/index.html new file mode 100644 index 0000000000..e6b3b97ded --- /dev/null +++ b/files/zh-tw/archive/mozilla/persona/why_persona/index.html @@ -0,0 +1,30 @@ +--- +title: 為什麼是 Persona? +slug: Archive/Mozilla/Persona/Why_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +

現行的使用者帳號和密碼系統不是個長久之計：使用者每造訪一個新網站新服務就得建立並記住一組新的、複雜的密碼，然後每一個網站系統都必須要夠安全地存放這些密碼。儘管如此，最近的事故中也顯示了即使是有規模、有聲望的大型網路公司也還是會在密碼安全上失誤出錯，讓他們的使用者資訊暴露在風險中。

+

Persona 是一個開放的、分散式的、web 規模的身分識別系統，用以取代一個網站一組密碼的局面。它解決了如 OpenID 這類系統的易用性與隱私相關等缺點，而且不訴諸於如 Facebook Connect 這類型中心化系統架構。

+

Persona 擺脫了每站一密碼

+

Persona 讓使用者在完成一個簡單的、一次性的身分識別處理流程後，只需要兩次點擊即可登入網站，而不再需要每站一密碼了。這是安全、可靠的，並且植基於公開金鑰密碼學的基礎上。使用者的瀏覽器產生一組加密過的「身分判定」來取代密碼，它的有效期只存在幾分鐘而且只能用於單一網站上。因為沒有網站特定的密碼，網站使用 Persona 也就不需要擔心如何安全地儲存密碼或是擔心失去或洩漏密碼資料庫了。

+

如此快速簡便的步驟，將讓使用者更快樂地造訪新網站。

+

Persona 使用電子郵件信箱地址作為身分識別

+

Persona 使用電子郵件信箱地址作為身分的識別方式，而不使用任意形式或自訂形式的用戶名稱作為身分識別。這帶給了使用者與開發人員諸多的好處：

+

使用者使用電子郵件信箱地址的好處

+ +

開發者使用電子郵件信箱地址的好處

+ +

更不用說電子郵件已經是個完整地，橫跨無數服務提供者的，數以億計帳戶的分散式系統。

+

Persona 與其他單一登入 (Single Sign-On) 服務有何不同？

+

Persona 安全、可靠、而且簡單。它保護了使用者的隱私、使用者的控制權、使用者的選擇，而這些是其它登入服務無法或不願意做到的。

+

許多社群網站，例如 Facebook 或 Google+，需要使用者使用真實姓名，並且限制使用者僅能使用單一帳號。藉由建構於電子郵件信箱地址的架構，Persona 允許使用者用以區分它們工作用、家用、學校用等不同的身份識別。

+

Persona 是開放的，也是分散式的：任何一位擁有電子郵件信箱地址的人都可以登入使用 Persona。除此之外，任何人也可以建立他們自己的身份識別服務或委由其他專業機構建立服務，就像使用電子郵件一般。這與需要單一且中心化帳號的社群網站登錄服務的做法剛好相反。

+

Persona 也採用較為新穎的做法來保護使用者的隱私，藉由將瀏覽器置入成為驗證過程當中的一環：瀏覽器從使用者的電子郵件提供者獲取認證身份，然後瀏覽器轉頭將此認證轉呈給網站。電子郵件提供者無法追蹤使用者，但是網站仍可藉由密碼學等驗證技術取得使用者的身份認證，並信任此使用者身份。其它大部份系統，即使是像 OpenID 如此的分散式系統，仍需要網站在背景連接通訊 (phone home) 才允許使用者登入。

diff --git a/files/zh-tw/archive/mozilla/xpinstall/index.html b/files/zh-tw/archive/mozilla/xpinstall/index.html new file mode 100644 index 0000000000..907f839dc4 --- /dev/null +++ b/files/zh-tw/archive/mozilla/xpinstall/index.html @@ -0,0 +1,65 @@ +--- +title: XPInstall +slug: Archive/Mozilla/XPInstall +tags: + - NeedsTranslation + - TopicStub + - XPInstall + - XPInstall_API_reference +translation_of: Archive/Mozilla/XPInstall +--- +

Parts of this page show the use of the XPInstall API. The majority of this API is now deprecated and as of Gecko 1.9 no longer available. Extension, Theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. In particular plugin developers should see how to package a plugin as an extension.

+
<?xml version="1.0" encoding="UTF-8"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <!-- properties -->
+  </Description>
+</RDF>
+
+ +
Cross-Platform Install (XPInstall) is a technology used by Mozilla Application Suite, Mozilla Firefox, Mozilla Thunderbird and other XUL-based applications for installing extensions. An XPI (pronounced "zippy" and derived from XPInstall) installer module is a ZIP file that contains an install script or manifest (entitled install.js or install.rdf) at the root of the file.
+ + + + + + + + +
+

Documentation

+ +
+
XPInstall API Reference
+
XPInstall API Reference.
+
Learn XPI Installer Scripting by Example
+
This article uses the installer script from browser.xpi install package as the basis for discussing XPI installations in general.
+
Creating XPI Installer Modules
+
This article describes the packaging scheme of the Mozilla and offers a tutorial for creating a new package that can then be redistributed, installed, and made available to users.
+
Install Wizards (aka: Stub Installers)
+
+ +

View All...

+ 		+

Community

+ +
    +
  • View Mozilla forums... {{ DiscussionList("dev-platform", "mozilla.dev.platform") }}
    • +
+ +

Tools

+ + + + + + +
+ +

 

diff --git a/files/zh-tw/archive/mozilla/xpinstall/scripting_by_example/index.html b/files/zh-tw/archive/mozilla/xpinstall/scripting_by_example/index.html new file mode 100644 index 0000000000..7d95c88d75 --- /dev/null +++ b/files/zh-tw/archive/mozilla/xpinstall/scripting_by_example/index.html @@ -0,0 +1,244 @@ +--- +title: XPI 安裝腳本範例教學 +slug: Archive/Mozilla/XPInstall/Scripting_by_example +tags: + - XPInstall + - 待翻譯 +translation_of: Archive/Mozilla/XPInstall/Scripting_by_example +--- +

本文以 browser.xpi 安裝套件為基礎，討論一般的 XPI 安裝程序。安裝腳本 installer script 雖短，但含括了 XPInstall API 大部分的重要功能，且可做為其他一般用途套件的安裝腳本樣本。本文在 unix 下安裝，不過各平台的安裝方式大同小異，你可以此變化安裝在各種 Mozilla 支援的平台。

+ +

關於 browser.xpi

+ +

browser.xpi 是 Mozilla 瀏覽器安裝主要元件的 XPI 封存檔。Mozilla 跨平台安裝以 XPI 格式作為組織、壓縮、以及軟體自動化安裝及更新的用途。XPI 的格式同 ZIP 及 JAR，為 PKZIP 壓縮後的檔案，只是內含可供管理安裝方式的腳本。本文目標即為此安裝腳本installer script（通常稱為 install.js）的教學。

+ +

任何能解 ZIP 壓縮檔的工具都能開啟 XPI 檔，先來看看裡面有什麼東西：

+ +
install.js
+bin\
+  chrome\
+  components
+  defaults\
+  icons\
+  plugins\
+  res\
+
+ +

Note that this high-level structure parallels the directory structure of the installed browser very closely:

+ +

mozilla directory on linux

+ +

As you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the archive itself, though it's possible to rearrange things arbitrarily upon installation--to create new directories, to install files in system folders and other areas.

+ +

綜覽安裝腳本

+ +

XPI install scripts are written in JavaScript using XPInstall Engine syntax defined in the XPInstall API Reference.

+ +

Most installation scripts, including the one discussed here, take the following basic form (in pseudo-code and with links to the sections in which these installation steps are documented):

+ +

節譯：大部分的安裝腳本都採以下的概念依流程安裝：

+ +
initInstall();
+if (verify_space()) {
+   err = add_dirs_and_files;
+   register_files;
+
+   if (err==SUCCESS) { performInstall() };
+   else { cancelInstall() };
+}
+
+ +

As you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation block, is on lines 24 to 41; the registration part of the main installation block is on lines 42-58; and the execution at the end of the main block is on lines 59 to 71. If you choose not to register the installed software or do the verifications at the front end of the installation, then at a minimum, the install scripts mustinitialize, add the files to be installed, and execute.

+ +

Note also that when you call methods on the Install--as you do so often in installation scripts (getFolder, initInstall, addFile, and performInstall are all examples of common Install object methods)--the Install object is implicit; like the window object in regular web page scripts, the Install object does not need to be prefixed to the method.

+ +

初始化

+ +

All installations must begin with initInstall(). The initInstall() method on the Install object creates a new installation for the specified software and version. In the browser.xpi installation, this function appears at line 20: var err = initInstall("Netscape Seamonkey", "Browser", "6.0.0.2000110807");

+ +

如果你在 initInstall() 之前呼叫 Install 物件中的方法，會導致錯誤。

+ +

The initInstall method takes the following parameters: the display name of the package, the name of the package as it appears in the client registry, and the version, which can be expressed as a number or as an InstallVersion object. In the example above, "Netscape Seamonkey" is the display name, "Browser" is the registry name, and the version is "6.0.0.2000110807." See initInstall in the XPInstall API Reference for more information on the initialization process.

+ +

檢驗安裝目標

+ +

The first thing the installation script does when it's executed is to check that there is adequate disk space for the software to be installed, where the verifyDiskSpace function is called as a condition of the main installation block that starts at line 24).

+ +
 // 先檢查磁碟剩餘空間
+ function verifyDiskSpace(dirPath, spaceRequired)
+ {
+   var spaceAvailable;
+   // 取得安裝磁碟之剩餘空間
+   spaceAvailable = fileGetDiskSpaceAvailable(dirPath);
+
+   // 將剩餘空間單位化為 KB
+   spaceAvailable = parseInt(spaceAvailable / 1024);
+   // 開始檢查
+   if(spaceAvailable < spaceRequired)
+   {
+      logComment("Insufficient disk space: " + dirPath);
+      logComment("  required : " + spaceRequired + " K");
+      logComment("  available: " + spaceAvailable + " K");
+      return(false);
+   }
+   return(true);
+ }
+
+ +

In the verifyDiskSpace block, fileGetDiskSpaceAvailable is called with dirPath as its expected input. This input is defined in line 22, where getFolder() is used to assign a value to the communicatorFolder variable representing the "Program" folder on the local system:

+ +
var communicatorFolder = getFolder("Program");
+spaceAvailable = fileGetDiskSpaceAvailable(dirPath);
+
+ +

spaceRequired, the other expected input to the verifyDiskSpace function, is given as 17311 kilobytes on line 19. Inside the function, the two sizes are compared and if the available space is larger than the required space, the installation proceeds.

+ +

為 Install 物件加入檔案及內含檔案的目錄

+ +

一旦確保程式可以開始安裝，就該把想放的檔案加入安裝程序。在 browser.xpi 中，此程式段位於 26 到 41 行：

+ +
  err = addDirectory("Program",
+                     "6.0.0.2000110807",
+                     "bin",              // jar source folder
+                     communicatorFolder, // target folder
+                     "",                 // target subdir
+                     true );             // force flag
+
+  logComment("addDirectory() returned: " + err);
+
+  // 建立 plugins 目錄
+  var pluginsFolder = getFolder("Plugins");
+  if (!fileExists(pluginsFolder))
+  {
+      var ignoreErr = dirCreate(pluginsFolder);
+      logComment("dirCreate() returned: " + ignoreErr);
+  }
+  else
+      logComment("Plugins folder already exists");
+
+ +

本例檔案都放在單一目錄中, 所以採用 Install 物件的 addDirectory 方法將壓縮檔目錄中的檔案一併加入。addDirectory 跟 addFile 兩種方法都要指定來源與目的路徑，在此例中是把「bin」目錄中的檔案列為來源，並要求於程式正式呼叫 performInstall 時將檔案安裝到 communicatorFolder 目錄（此變數於第 22 行指定為「Program」）。

+ +

"Program" is one of a short list of keywords that can be used in place of full path names in methods such as addFile. "Program" represents the directory where software itself is installed (e.g., C:\Program Files\ on win32 systems), as opposed to supporting directories like "Components", "Chrome", or "Temporary" (see getFolder in the XPInstall API Reference for a list of keywords).

+ +

登記軟體

+ +

對於一個軟體來說，有時候需要同時在作業系統和 Netscape 6 平台上進行登記「登錄碼」。當你安裝了一個新的 chrome 像是 browser.xpi 時，你需要讓 chrome 登錄碼把這些更新登記在起來；如此一來，面板（skin）、使用者介面（user preference）、檔案清單（packaging list）、本地化文件（localization bundle）就會自動與新的軟體對應。

+ +

對於在 win32 作業系統上登記軟體，XPInstall API 提供兩個特別的物件－WinProfile 和 WinReg。它們能夠對 Windows 使用者資料和 Windows 登錄碼進行對應的操作。browser.xpi 安裝腳本並不強制你使用這些物件。關於在 win32 平台上和其他作業系統登記軟體，詳情可以參考 XPInstall API Reference。

+ +

而要利用 chrome 登錄碼登記基於 Netscape 6 的新軟體，像是一些外掛（plug-in）、元件（component）、佈景主題（theme）和套件（package），你需要使用 Install 物件中的 registerChrome 函數。如果執行成功，這個函數會回傳一個「0」並且將這筆紀錄寫進 chrome 的子目錄「installed-chrome.txt」這個檔案當中以便以後其他的 chrome 能夠同步更新千變萬化的 RDF 檔案。

+ +
 var cf = getFolder("Chrome");
+ registerChrome(CONTENT | DELAYED_CHROME, getFolder(cf,"toolkit.xpi"),"content/global/");
+ registerChrome(CONTENT | DELAYED_CHROME, getFolder(cf,"browser.xpi"),"content/communicator/");
+ registerChrome(CONTENT | DELAYED_CHROME, getFolder(cf,"browser.xpi"),"content/editor/");
+ registerChrome(CONTENT | DELAYED_CHROME, getFolder(cf,"browser.xpi"),"content/navigator/");
+ registerChrome(SKIN | DELAYED_CHROME, getFolder(cf,"modern.jar"),"skin/modern/communicator/");
+ registerChrome(SKIN | DELAYED_CHROME, getFolder(cf,"modern.jar"),"skin/modern/editor/");
+ ...
+
+ +

在第 42 行至 58 行，只要有不同的資料夾中存在需要紀錄在 chrome 紀錄碼中的內容， registerChrome 就會被呼叫。 In lines 42-58, registerChrome is called as many times as there are different directories that contain content that needs to be registered with the chrome registry. Note that in the first few lines of this process, new content from the XPI is being registered, and in the remainder, it is new skin information. In this most common form of the registerChrome function (it can also be used to support the now-deprecatedmanifest.rdf style of installation archive), the three parameters represent, in order, the chrome SWITCH used to indicate what kind of software is being registered, the target destination of the software (e.g., the "Chrome" folder in the example above), and the path within the XPI (or JAR theme archive) where the contents.rdf file is located.

+ +

See registerChrome in the XPInstall API Reference for more information about registering new packages with the chrome registry.

+ +

開始安裝

+ +

Once you have added all the files to the installation, the final step is to actually execute the installation. Note that until this point, the install calls you have been making on the Install object are preliminary only. Recall that an install process takes the following general form:

+ +
initInstall();
+if (verify_space()) {
+   err = add_dirs_and_files;
+   register_files;
+
+   if (err==SUCCESS) { performInstall() };
+   else { cancelInstall() };
+}
+
+ +

In this arrangement, the actual execution of the installation is checked against the errors returned from the addition of files to the installation, which may itself have been conditioned on some verification of version and necessary disk space.

+ +

The actual install code used to execute the installation appears in theinstall.js file as follows:

+ +
if (err==SUCCESS)
+  {
+     err = performInstall();
+        logComment("performInstall() returned: " + err);
+  }
+
+  else
+  {
+     cancelInstall(err);
+	 logComment("cancelInstall() due to error: " + err);
+  }
+}
+else
+   cancelInstall(INSUFFICIENT_DISK_SPACE);
+
+ +

performInstall is the function used to execute the install once it has been initialized and loaded, and it is the last step to installing the software. Note that in the example above, the installation is cancelled if the error code from the file addition process returns success (0), and also cancelled outside the main block if the earlier verification process is not successful.

+ +

Note also the comments that indicate the success of various steps in the process--including the performInstall and cancelInstall steps--are written to the install log using the logComment, described in the following section.

+ +

安裝紀錄

+ +

Logging is an important feature of the XPInstall API that can help you streamline and debug your installations. In the example in the Executing the Installation section and in many places in the installation script, the logComment API is used to write data to a log file that can then be reviewed when things don't go as planned.

+ +

The install log is created in the product directory by default (where the browser executable is). If the installation doesn't have proper permission, the install log is written to the user's profile directory. Respectively, these directories correspond to the "Program" and "Current User" keywords for the getFolder method.

+ +

更進一步

+ +

What does all this mean to you? How can this information be adapted for your own installations? In this final section, we describe the application of the XPInstall technology described here in the creation and deployment of a very simple installation script and installation archive (XPI).

+ +

Say you have a simple executable and a README file that goes with it, and you want to make it available for installation from a XPI. After putting these two files in a XPI (which, as described above, is simply a ZIP file with an install.js script at the top and a suffix of '.xpi'), the next step is to add an installation script to the XPI.

+ +

Minimally, the installation script must:

+ + + +

Here is an example of small but complete installation script.

+ +
var xpiSrc = "cd_ripper.exe";
+var xpiDoc = "README_cdrip";
+
+initInstall("My CD Ripper", "cdrip", "1.0.1.7");
+f = getFolder("Program");
+setPackageFolder(f);
+addFile(xpiSrc);
+addFile(xpiDoc);
+
+if (0 == getLastError())
+	performInstall();
+else
+	cancelInstall();
+
+ +

The example above shows this minimal installation. This install script does not include any version or disk space checking, very little error checking, only a single executable, no registration, and no commenting. It does, however, take the executable and the README file and install them on the user's system. Note also that for the installation script in a XPI to be automatically triggered from a web page, you must use a "trigger script." The following InstallTrigger function, called from an event handler on a regular web page, will point to the remotely-hosted XPI (called here 'cdrip.xpi') and trigger its installation:

+ +
function putIt()
+{
+  xpi={'CD_Ripper':'cdrip.xpi'};
+  InstallTrigger.install(xpi);
+}
+...
+
+<a href="#" onclick="putIt();">install the CD Ripper Now!</a>
+
+ +

See the InstallTrigger object in the XPInstall API Reference for more information on triggering installations.

+ +
+

原文資訊

+ + +
diff --git a/files/zh-tw/archive/mozilla/xul/index.html b/files/zh-tw/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..ac13916ad4 --- /dev/null +++ b/files/zh-tw/archive/mozilla/xul/index.html @@ -0,0 +1,99 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - XUL +translation_of: Archive/Mozilla/XUL +--- +

 

+ +
XUL 指南
+這份指南將協助你開始學習 XUL，原始創作來自於 XULPlanet。
+ +
XUL (XML User Interface Language，XML 使用者介面語言) 是 Mozilla 以 XML 為基礎的語言，可以讓你打造豐富功能且跨平台的應用程式，不論是否有連線到網際網路。這些應用程式可以輕鬆地自訂文字、圖案以及排版，因此可以很方便地為不同市場區塊發表不同品牌形象或本地化。已經熟悉 Dynamic HTML (DHTML) 的 Web 開發人員將可以很快地學會 XUL，並且馬上開始開發應用程式。 用 Firefox 或其他以 Gecko 為基礎的瀏覽器開啟 XUL 週期表 ，你將會看到一些 XUL 範例。
+ + + + + + + + +
+

文件

+ +
+
XUL 參考文獻
+
請參照這份 prefwindow MDC 文件。
+
+ +
+
XUL 控制項
+
快速瀏覽 XUL 控制項。
+
+ +
+
第一次玩 XUL 就上手
+
介紹 XUL 幾項重要功能與元件。
+
+ +
+
選單和彈出選單指南
+
選單和彈出式面板的指南。
+
+ +
+
XUL 模板指南
+
一份詳細討論 XUL 模板的指南，是個從資料源產生內容的方法指引。
+
+ +
+
XUL 的拖曳處理
+
如何使用拖曳操作。
+
+ +
+
為 Firefox 1.5 改寫 XUL 應用程式
+
一份關於 Firefox 1.5 所做變更的清單，會影響到使用 XUL 開發人員。
+
+ +

所有文件...

+ 		+

社群

+ +
    +
  • 查閱 Mozilla 討論區...
    • +
+ + + + + +

工具

+ + + +

所有工具...

+ +

相關主題

+ +
+
JavaScript, XBL, CSS, RDF, Extensions, XULRunner
+
+
+ +

Categories

+ +

Interwiki Language Links

diff --git a/files/zh-tw/archive/mozilla/xul/template_guide/index.html b/files/zh-tw/archive/mozilla/xul/template_guide/index.html new file mode 100644 index 0000000000..643bdaea0e --- /dev/null +++ b/files/zh-tw/archive/mozilla/xul/template_guide/index.html @@ -0,0 +1,5 @@ +--- +title: Template Guide +slug: Archive/Mozilla/XUL/Template_Guide +--- +

這個頁面無內容。您可以通過貢獻來豐富 MDN 的內容

diff --git a/files/zh-tw/archive/mozilla/xul/the_joy_of_xul/index.html b/files/zh-tw/archive/mozilla/xul/the_joy_of_xul/index.html new file mode 100644 index 0000000000..ab1da2e93c --- /dev/null +++ b/files/zh-tw/archive/mozilla/xul/the_joy_of_xul/index.html @@ -0,0 +1,49 @@ +--- +title: The Joy of XUL +slug: Archive/Mozilla/XUL/The_Joy_of_XUL +tags: + - XUL +translation_of: Archive/Mozilla/XUL/The_Joy_of_XUL +--- +

 

+

建議的讀者群：想要更加認識 XUL 且想瞭解為什麼 Mozilla 會採用 XUL 的應用開發人員與管理者。

+

翻譯原則：由於考量到預設讀者群應該有某種程度的原文專有名詞的認識基礎，故盡可能保留原文專有名詞，或採用加註的方式呈現。如果文中有對稱關係，則採用對稱保留或加註。

+

 

+

序論

+

XUL (發音〝/zu:l/〞) 是 Mozilla 以 XML 為基礎的使用者介面語言，讓你盡情地開發各式各樣的跨平台應用程式，不論是否在連線到網際網路的狀態皆可。這些應用程式可以藉由簡單地變更文字，圖案與版面佈局，來達到客製化的目的，因此可以輕易地本土化以推廣到各種市場去。如果您已經是熟習 Dynamic HTML (DHTML) 的網頁設計師，那您將可以很快地學會 XUL 並且可以馬上開始動手建構應用程式了。

+

這份文件將介紹一些比較吸引人的理由給網頁設計師，來應用 XUL 以及 Mozilla 相關技術來撰寫跨平台的應用程式。這也將充分說明 Mozilla 要設計 XUL 的動機，以及為什麼 Mozilla 平台是使用 XUL 建構起來的。XUL 的重要特色與優勢將會接著以支援 Mozilla 技術的方式來呈現。最後，有個關於 "使用 XUL 所撰寫之 Calendar" 的小小個案研討，作為補充。

+

重要特色與優勢

+ +
強大、以元件為基礎的標示語言 XUL 的目標是建造跨平台的應用程式，以別於原本拿來設計網頁的 DHTML。因此，XUL 設計為應用程式的加工組件(application artifacts)，如︰視窗(windows)、標籤(labels)、按鈕(buttons)等，用來取代頁面(pages)、大標題(heading levels)、連結(hypertext links)等。

事實上，許多開發人員已經嘗試在他們的 DHTML 網頁應用程式中達到圖形界面的效果，但這其中的代價就是複雜以及效能，而且沒有任何標準可以支援。
以現有標準為基礎 XUL 是立基於 W3C 標準 XML 1.0 的一個 XML 語言。使用 XUL 的應用程式是建構於這些 W3C 標準技術之上︰HTML 4.0、CSS 1 & 2、DOM Levels 1 & 2、JavaScript 1.5，包括 ECMA-262 Edition 3 (ECMAscript)、XML 1.0。

mozilla.org 正進一步地尋求 W3C 為 eXtensible Binding Language (XBL) 標準化。(參考下面的〝支援技術〞)。
平台可攜性 如同 HTML，XUL 被設計成與平台無關的，可以很容易地讓應用程式在任何存在 Mozilla 的作業系統上面使用。想想看現在有多麼廣泛的平台支援 Mozilla，這是以 XUL 技術來開發應用程式當中，最令人讚嘆的特色。

因為 XUL 提供了使用者介面組成元件的抽象層，因此實現了這個保證︰一經寫就，處處執行 (write-once, run-anywhere)。所有 Mozilla 核心應用程式的使用者介面都是用 XUL 所撰寫的，並且該單一程式碼，在所有 Mozilla 平台上都支援。
分離介面呈現與程式流程 大部分網頁應用程式沒落的主因就是，把使用者介面跟程式流程緊緊的結合在一起了。這在一個團隊的環境中是個頗為難的問題，因為這兩部分所需的技能通常是分散在不同的人身上。

XUL 很清楚地分離出應用程式的各個組成︰程式流程 ("content" 以 XUL、XBL 與 JavaScript 組成)、外觀 ("skin" 以 CSS 和圖像組成)、與特定語言的文字標籤 ("locale" 以 DTD 以及在 .properties 檔案中的對應字串)。XUL 應用程式的佈局與外觀可以自由地改變，獨立程式與流程之外。甚至，應用程式可以本地化為任何語言或地區，完全獨立於程式流程或外觀。

對應用程式作各種分離所得的結果是︰程式設計師可以很容易地維護程式，設計師可以輕鬆地變更設計樣式，而各個語言的翻譯人員也可以自行完成翻譯工作。這樣子獨立的工作流程，相較於以 HTML 為基礎的應用程式更容易協同工作，也減少了整個系統在穩定性與品質上的衝擊。
輕鬆自訂、本地化、打品牌 另一個由分離程式流程，介面呈現和語言文字所直接造成的特點，即是不同的使用者或使用群可以很容易的修改成所需要的樣子。

程式開發人員可以只維護應用程式的主要程式碼，然後藉由使用不同的外觀介面 (skin) 來自訂圖示與品牌觀感給他們不同的顧客群。一個以英文介面撰寫與開發的應用程式，可以被翻譯成法文給相同需求的顧客使用。當這些改變被廣泛地使用在這個應用程式的時候，他們也可以從程式流程與介面呈現之中獨立出來，來分享給所有的自訂版本。
+

支援技術

+

這裡有一些 Mozilla 所用來支援 XUL 撰寫跨平台網頁應用程式的技術。

+ +
XBL eXtensible Bindings Language (XBL) 是一種標記語言 (markup language)，定義了新的物件元素以及給 XUL 構件 (widget) 的 "bindings"。藉由 XBL，開發人員可以為 XUL 構件定義新的內容，為 XUL 構件添加事件處理，加入新的介面屬性與方法。事實上，XBL 將使得開發人員得以利用自訂現有的標籤 (tag) 或是新增他們所需要的標籤來擴充 XUL。

藉由使用 XBL，開發人員可以輕易地建構出所想要的使用者介面物件，如︰進度表、別緻的彈出式選單、甚至是工具列或搜尋表單。這些自訂物件可以在指定標籤與其屬性之後，使用在各個 XUL 應用程式當中。
Overlays Overlay 是用來描述使用介面之額外內容的 XUL 檔案。他們是一種增添使用介面的通用機制，用以增加額外的元件，覆蓋掉 XUL 檔案中不再支援的使用者介面，並且可以重新利用使用者介面當中的一些片段。

Overlay 對於自訂與擴充現有應用程式而言是個很強大的機制，因為他們是以兩種相關但卻又幾乎完全不同的方式在運作著。某種程度上看來，Overlay 其他語言所謂的〝引入(include)〞檔案，因為一個應用程式可能指定在其定義中引入一個 Overlay。但是 Overlay 也可以只用於外觀上，使得設計人員可以在某個應用程式上頭使用 Overlay，而不需要改變其原始程式。

在實作上，這使得開發人員只需對其應用程式維護一組程式碼，然後再為客戶應用各自自訂的外型，或是引入特別的功能，而這些都完全獨立於主程式碼。這導致整個解決方案的簡化，與降低維護成本。

Overlay 對於那些想要為 Mozilla 增添新功能但又希望保有著作權的軟體開發人員而言還有個特點。這兩種執照聲明︰Netscape Public License (NPL) 和 Mozilla Public License (MPL) 都要求那些有對原始程式 (Mozilla 所提供的那些原始程式碼) 做過修改的開發人員，要釋放出他們變更之後的程式碼給他們的顧客。Overlay 可以在變更著作權的情況下用來為 Mozilla 增添新的功能，而不會污染了最原始的開放原始程式碼。
XPCOM/XPConnect XPCOM 與 XPConnect 都是加強技術，將外部函數庫與 XUL 應用程式整合在一起。

XPCOM，代表的是跨平台組成物件模型 (Cross Platform Component Object Model)，是個用來撰寫跨平台與軟體模組化的一個架構。XPCOM 的組成元件可以用 C、C++ 和 JavaScript 來撰寫，並且可以在這些環境下來開發︰C、C++、JavaScript、Python、與 Perl 擴充集。

XPConnect 這個技術是用來製造出簡單的 XPCOM 與 JavaScript 之間的溝通。XPConnect 允許 JavaScript 物件正大光明地存取與運用 XPCOM 物件。他也讓 JavaScript 物件可以表示成 XPCOM 相容介面以供 XPCOM 物件呼叫使用。

將兩者合在一起，XPCOM 和 XPConnect 使得開發人員可以設計那些需要使用編譯式語言的效能或是存取作業系統等級的 XUL 應用程式。
XPInstall XPInstall，Mozilla 的跨平台安裝技術，提供了一個標準的方式將 XUL 應用程式的各個元件包裝成一個安裝檔案，來讓 Mozilla 可以下載並且執行之。

XPInstall 讓使用者可以毫不費力地從網際網路或是公司主機來安裝新的 XUL 應用程式。要安裝一個新的應用程式，使用者只要在網頁上或是電子郵件訊息中的超連結點一下滑鼠，然後在安裝對話方塊中允許安裝新的應用程式即可。
+

個案研討: A Mozilla Calendar Application

+

這個小型的個案研討將敘述 OEone 公司 (http://www.oeone.com) 如何將他的 Calendar 應用程式整合成為 Mozilla 的核心產品. Calendar 包含了 XUL 前端使用介面與以 C 寫成的 XPCOM 元件函式庫 libical , 該函式庫主要是供日期運算以及行事曆資料的儲存. 原本 Calendar 只有在 Linux 上開發, 但是都會成功地在一週之內移植到 Macintosh 和 Windows 平台上.

+

XUL 提供了許多的使用者介面元件. Calendar 的使用者介面完完全全都是用 XUL 所完成的, JavaScript? 還有 CSS, 都可以證明這樣的開發平台所帶來的強大與彈性. 他使用了簡單的 XUL 元件, 例如 boxes, grids, 和 stacks 來構成週, 日, 和月的瀏覽介面. 一開始 Calendar 還沒有利用到 XBL, 因為開發人員還沒完全清楚地掌握這整個開發技術. 但是 Calendar 的未來計畫已經包含了要將這些使用者介面的元件轉換成 XBL widgets 來簡化開發工作.

+

XPCOM/XPConnect 讓整合現有程式碼成為可能. 一個擁有完整行事曆功能的開放原始碼函式庫, libical (http://www.softwarestudio.org/libical/), 被 Calendar 專案所採用. Libical 以開放原始碼的方式實做了 IETF 的 iCalendar 行事曆與排程協定. (RFC 2445, 2446, 及 2447). 他有 iCal 元件並提供了 C API 來操作這些元件的屬性, 參數以及其子元件. 這個函式庫藉由撰寫一個 XPCOM wrapper 來整合操作其使用介面. 為了增進應用程式的效能, 也將程式從 JavaScript 轉移成 XPCOM 元件.

+

外觀呈現與程式寫作的分離, 修改起來超有彈性. 原本的使用者介面使用了大量的圖形檔案來呈現月和週的顯示. 而在開發人員學習了更多關於 XUL 的細節之後, 改用一些較為精巧的元件來呈現這個使用介面. 這不僅加快了顯示的速度, 也節省了許多記憶體與磁碟存取的資源. 他們幾乎重寫整個顯示月和週的使用者介面, 但對於主程式方面則絲毫不受影響, 不需要做任何的改變.

+

轉移 XUL 的應用程式到其他作業平台, 壓根兒不重要. Calendar 原本是個 Linux 上的應用程式, 也沒想過要轉移到其他平台上面去. 但是當原來的開發者 (OEone Corporation) 將原始程式碼貢獻給 Mozilla 專案的時候, Calendar 就必須要想辦法轉移到 Windows 和 Macintosh 的平台上面去. XUL 應用程式的使用者介面不用做任何平台轉移的修改, 因為他可以幾乎不做任何變更就可以在這兩個新的平台上運作. 相類似地, 因為使用者介面是用 JavaScript 寫成的, 互動操作方面的程式也不需要做修改, 不過, 因為 libical 函式庫是由 C 所寫成的, 所以比較需要做修改, 才能轉移到其他平台上面去使用.

+

很幸運地, 現有的 libical 函式庫已經有 Macintosh 平台上的版本可以用了, 藉由 XPCOM 這個跨平台的基石, 在 Macintosh 上的行事曆在幾天之內就完成移植了. 可是那時候還沒有 Win32 上面的版本可以直接拿來用, 所以開發人員需要把 libical 移植到 Windows 平台上面來. 不到一個星期, 這項工作也完成了, 因此 Mozilla 可以在這三個平台上使用行事曆了: Linux, Macintosh, 和 Windows.

+

XPInstall 對於開發者和使用者都很方便. Calendar 沒有被包含在 Mozilla 1.0 裡面一起發行, 因此沒有被當成標準配備而包含在固定的 nightly release builds 裡面. 對於有能力自行編譯 Mozilla 的開發人員而言, 他們可以自己設定相關的環境變數, 並且自己編譯 Calendar 來使用. 但是對於許多想要試看看 Calendar 的 Mozilla 使用者來說, 編譯這件事實在是遙不可及. 但是藉由 XPInstall, 開發者就可以很輕易地包裝各個版本的 Calendar, 然後只要在網路上點擊一個連結就可以直接進行安裝.

+

結論

+

Mozilla, 那出色的 XUL, 使用與 desktop 應用程式相同且豐富的使用者介面與使用體驗, 為開發跨平台的應用程式帶來令人讚嘆的全心體驗. 對於使用 W3C 標準來設計 web 應用程式的設計師們, 可以輕鬆地利用以往的經驗直接轉換到 desktop 應用程式.

+

在 web 成為散佈應用程式供使用者在不同電腦上使用的標準之前, 這個跨平台的問題需要藉由 客戶端-伺服端 (client-server) 的工具來解決. 但這總是會有版權的問題, 開發人員需要支付一筆可觀的金額來購買執行程式時所需要之函式庫的版權, 也同時被廠商給綁住了. Mozilla 為這些跨平台的工具, 提供了相同價值觀但卻是使用開放原始碼版權的選擇.

+

身為快速成長的跨平台技術, XUL 可以填滿一些有趣的技術空缺, 例如那些透過網路存取分散式物件的 Java J2EE 和 Microsoft .Net. 動態的應用程式搭配可以自由變換的使用者介面表達, 這都是依循標準, 具有擴充性, 而且可以很方便的透過網際網路來散播.

+

XUL 模糊了 desktop 和 web 應用程式的分界, 因為他在這兩個世界裡面都有良好的根基. 將 web 應用程式轉換成 XUL 將獲得許多好處, 可以有高度的介面彈性, 在各種支援的平台上擁有一致的操作環境, 而且仍然可以存取你原有的資源, 例如共享的函式庫, 以及本地端的檔案系統.

+

不論你是需要將現有的網頁應用程式轉移到 desktop 而尋求可以讓你輕鬆移轉到多重平台的技術, 或是將你的勁酷功能整合進瀏覽器, XUL 都會是個很值得的選擇.

+

Reference Material

+
  1. XUL Planet - Samples, Tutorials and Language-References to XUL and XBL http://www.xulplanet.com/
  2. Introduction to a XUL Document, Dan Matejka <danm@netscape.com> http://www.mozilla.org/xpfe/xptoolkit/xulintro.html
  3. XBL - Extensible Binding Language 1.0, David Hyatt <hyatt@netscape.com> http://www.mozilla.org/projects/xbl/xbl.html
  4. XBL - XML Binding Language (W3C Note), David Hyatt < hyatt@netscape.com> http://www.w3.org/TR/xbl/
  5. XUL Overlays, Ian Oeschger <oeschger@netscape.com> and David Hyatt <hyatt@netscape.com> http://www.mozilla.org/xpfe/xptoolkit/overlays.html
  6. XPCOM Part 1: An introduction to XPCOM, Rick Parrish <rfmobile@swbell.net> http://www-106.ibm.com/developerwork.../co-xpcom.html
  7. XPConnect (Scriptable Components), John Bandhauer <jband@netscape.com> http://www.mozilla.org/scriptable/
  8. 為 Mozilla 建立新的套件(Package), Ian Oeschger <oeschger@netscape.com> http://www.mozilla.org/docs/xul/xuln..._packages.html
  9. Mozilla Calendar 專案網站, 由 Mike Potter 所維護 <mikep@oeone.com> http://www.mozilla.org/projects/calendar/
    10. +
+
+

原始文件資訊

+ +

翻譯文件資訊

+ +
+

zh_tw:The Joy of XUL

+ +

{{ languages( { "en": "en/The_Joy_of_XUL", "fr": "fr/Les_joies_de_XUL", "ja": "ja/The_Joy_of_XUL", "pl": "pl/Zabawa_j\u0119zykiem_XUL" } ) }}

diff --git a/files/zh-tw/archive/mozilla/xul/xul_reference/index.html b/files/zh-tw/archive/mozilla/xul/xul_reference/index.html new file mode 100644 index 0000000000..337bb2938a --- /dev/null +++ b/files/zh-tw/archive/mozilla/xul/xul_reference/index.html @@ -0,0 +1,344 @@ +--- +title: XUL 參考文件 +slug: Archive/Mozilla/XUL/XUL_Reference +tags: + - XUL +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +

« XUL Reference «

+ + + + + + + + + + + + +
全部 XUL 元件 (按字母排序)
+

action
+ arrowscrollbox
+ assign
+ bbox
+ binding
+ bindings
+ box
+ broadcaster
+ broadcasterset
+ button
+ browser
+ checkbox
+ caption
+ colorpicker
+ column
+ columns
+ commandset
+ command
+ conditions
+ content
+ datepicker
+ deck
+ description
+ dialog
+ dialogheader
+ dropmarker
+ editor
+ grid
+ grippy
+ groupbox
+ hbox
+ iframe
+ image
+ key
+ keyset
+ label
+ listbox
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ listitem

+ 		+

member
+ menu
+ menubar
+ menuitem
+ menulist
+ menupopup
+ menuseparator
+ notification
+ notificationbox
+ observes
+ overlay
+ page
+ panel
+ param
+ popupset
+ preference
+ preferences
+ prefpane
+ prefwindow
+ progressmeter
+ query
+ queryset
+ radio
+ radiogroup
+ resizer
+ richlistbox
+ richlistitem
+ row
+ rows
+ rule
+ scale
+ script
+ scrollbar
+ scrollbox
+ scrollcorner
+ separator
+ spacer
+ spinbuttons
+ splitter
+ stack
+ statusbar

+ 		+

statusbarpanel
+ stringbundle
+ stringbundleset
+ tab
+ tabbrowser (從 Firefox 3/Gecko 1.9 開始支援)
+ tabbox
+ tabpanel
+ tabpanels
+ tabs
+ template
+ textnode
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker
+ titlebar
+ toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox
+ tooltip
+ tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator
+ triple
+ vbox
+ where
+ window
+ wizard
+ wizardpage

+
+ +

XUL 參考文件

+ +

« XUL Reference «

+ + + + + + + + + + + + +
XUL 元件 (按分類)
+

WINDOWS

+ +

dialog
+ overlay
+ page
+ window
+ wizard
+ wizardpage
+ preference
+ preferences
+ prefpane
+ prefwindow

+ +

WINDOW STRUCTURE

+ +

browser
+ tabbrowser
+ editor
+ iframe
+ titlebar
+ resizer
+ statusbar
+ statusbarpanel
+ dialogheader
+ notification
+ notificationbox

+ +

MENUS AND POPUPS

+ +

menubar
+ menu
+ menuitem
+ menuseparator
+ menupopup
+ panel
+ tooltip
+ popupset

+ +

TOOLBARS

+ +

toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox

+ +

TABS AND GROUPING

+ +

tabbox
+ tabs
+ tab
+ tabpanels
+ tabpanel
+ groupbox
+ caption
+ separator
+ spacer

+ 		+

CONTROLS

+ +

button
+ checkbox
+ colorpicker
+ datepicker
+ menulist
+ progressmeter
+ radio
+ radiogroup
+ scale
+ splitter
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker

+ +

TEXT AND IMAGES

+ +

description
+ label
+ image

+ +

LISTS

+ +

listbox
+ listitem
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ richlistbox
+ richlistitem

+ +

TREES

+ +

tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator

+ +

 

+ 		+

LAYOUT

+ +

box
+ hbox
+ vbox
+ bbox
+ deck
+ stack
+ grid
+ columns
+ column
+ rows
+ row
+ scrollbox

+ +

TEMPLATES

+ +

action
+ assign
+ binding
+ bindings
+ conditions
+ content
+ member
+ param
+ query
+ queryset
+ rule
+ template
+ textnode
+ triple
+ where

+ +

SCRIPTING

+ +

script
+ commandset
+ command
+ broadcaster
+ broadcasterset
+ observes
+ key
+ keyset
+ stringbundle
+ stringbundleset

+ +

HELPER ELEMENTS

+ +

arrowscrollbox
+ dropmarker
+ grippy
+ scrollbar
+ scrollcorner
+ spinbuttons

+
+ +

其他 XUL 列表

+ + diff --git a/files/zh-tw/archive/mozilla/xulrunner/index.html b/files/zh-tw/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..f2e5e0b75c --- /dev/null +++ b/files/zh-tw/archive/mozilla/xulrunner/index.html @@ -0,0 +1,88 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +tags: + - NeedsTranslation + - NeedsUpdate + - TopicStub + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +
Getting Started with XULRunner
+A short introduction to XULRunner.
+ +
XULRunner is a Mozilla runtime package that can be used to bootstrap XUL+XPCOM applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications. XULRunner also provides libxul, a solution which allows the embedding of Mozilla technologies in other projects and products.
+ + + + + + + + +
+

Releases

+ +
+

Until version 41, XULRunner could be downloaded from ftp.mozilla.org.

+ +

Firefox (from version 3) ships with a private XULRunner package, which can run any compatible XULRunner application using the -app switch: firefox -app application.ini is equivalent to xulrunner -app application.ini

+ +

Older builds are also available.

+
+ +

Overview

+ + + +

Documentation

+ +
+
Getting Started with XULRunner
+
Short tutorial on building desktop applications with XULRunner.
+
XUL Tutorial
+
Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.
+
XULRunner tips
+
A collection of tips for working with XULRunner.
+
Deploying XULRunner
+
An introduction on how to package your application with XULRunner.
+
XULRunner Hall of Fame
+
Tracks all available applications based on XULRunner.
+
Build Documentation
+
Learn how to get the source and build it.
+
Debug Documentation
+
Steps to configure Venkman to debug your App
+
XULRunner Guide
+
A fairly complete, but outdated, introduction and tutorial for XULRunner which collates much of the documentation found here.
+
+ +

View all...

+ 		+

Community

+ + + + + + + +

See also

+ + +
+ +

 

diff --git a/files/zh-tw/archive/mozilla/xulrunner/xulrunner_tips/index.html b/files/zh-tw/archive/mozilla/xulrunner/xulrunner_tips/index.html new file mode 100644 index 0000000000..c51ae6a0ee --- /dev/null +++ b/files/zh-tw/archive/mozilla/xulrunner/xulrunner_tips/index.html @@ -0,0 +1,213 @@ +--- +title: XULRunner秘技 +slug: Archive/Mozilla/XULRunner/XULRunner_tips +translation_of: Archive/Mozilla/XULRunner/Tips +--- +

XULRunner Frequently Asked Questions. Work in progress.

+

Extension Manager

+

To be able to install any extensions, you first need to enable the Extension Manager in application.ini. XULRunner 1.8.0 does not load extensions from the application directory; only the XULRunner directory and the user profile directory are checked. However, it seems that with XULRunner 1.9 the XULRunner directory is ignored, while the profile and application directories are checked. The following prefs must also be set to make the XPInstall dialog, extension manager, and theme manager work:

+
pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallConfirm.xul");
+pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?type=themes");
+pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=extensions");
+pref("xpinstall.dialog.progress.type.skin", "Extension:Manager-themes");
+pref("xpinstall.dialog.progress.type.chrome", "Extension:Manager-extensions");
+pref("extensions.update.enabled", true);
+pref("extensions.update.interval", 86400);
+pref("extensions.dss.enabled", false);
+pref("extensions.dss.switchPending", false);
+pref("extensions.ignoreMTimeChanges", false);
+pref("extensions.logging.enabled", false);
+pref("general.skins.selectedSkin", "classic/1.0");
+// NB these point at AMO
+pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties");
+pref("extensions.getMoreExtensionsURL", "chrome://mozapps/locale/extensions/extensions.properties");
+pref("extensions.getMoreThemesURL", "chrome://mozapps/locale/extensions/extensions.properties");
+
+

If your application is based on Gecko 2.0, you need to register a component through the new component registration because the extension manager uses FUEL, namely Application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list:

+
    +
  1. copy files fuelApplication.js and fuelApplication.manifest from browser/fuel/src for instance into your components/ directory
    2. +
  2. tweak the line #include ../../../toolkit/components/exthelper/extApplication.js in your copy of fuelApplication.js as needed
    3. +
  3. make sure to declare the FUEL module and the two files in your components/Makefile.in as in browser/fuel/src/Makefile.in
    4. +
  4. rebuild...
    5. +
+

Useful Chrome URLs

+

Most of these require branding.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WindowURLWindow Type
Extension Managerchrome://mozapps/content/extensions/extensions.xul?type=extensionsExtension:Manager-extensions
Theme Managerchrome://mozapps/content/extensions/extensions.xul?type=themesExtension:Manager-themes
JavaScript Consolechrome://global/content/console.xulglobal:console
about:configchrome://global/content/config.xul  
+

Developer Extensions

+

Venkman

+ +

DOM Inspector

+

To add DOM Inspector 2.0.* to your XULRunner 1.9.0.* application follow these steps:

+ +
content  inspector                       jar:inspector.jar!/content/inspector/ xpcnativewrappers=no
+locale   inspector           en-US       jar:inspector.jar!/locale/en-US/inspector/
+skin     inspector           modern/1.0  jar:inspector.jar!/skin/modern/inspector/
+skin     inspector           classic/1.0 jar:inspector.jar!/skin/classic/inspector/
+
+overlay  chrome://inspector/content/popupOverlay.xul   chrome://inspector/content/viewers/dom/popupOverlay.xul
+overlay  chrome://inspector/content/commandOverlay.xul chrome://inspector/content/viewers/styleRules/commandOverlay.xul
+overlay  chrome://inspector/content/keysetOverlay.xul  chrome://inspector/content/viewers/dom/keysetOverlay.xul
+overlay  chrome://inspector/content/popupOverlay.xul   chrome://inspector/content/viewers/styleRules/popupOverlay.xul
+overlay  chrome://inspector/content/commandOverlay.xul chrome://inspector/content/viewers/dom/commandOverlay.xul
+
+

To launch DOM Inspector in your application, you need to open its main window, with a command like this:

+
window.open("chrome://inspector/content/inspector.xul", "", "chrome");
+
+

Alternatively, the DOM Inspector may also be added as an extension:

+
    +
  1. (if you already have inspector installed for another application you can skip to the next step)
    + Follow the instructions above through "Unzip the package."
    2. +
  2. Create a file in the extensions directory of your application with the same name as the DOM Inspector ID (inspector@mozilla.org) containing one line of text -- the exact path to the root directory of DOM inspector (where the install.rdf is) like this one: + 
    /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/
    +
    3. +
  3. Now create a javascript file with the following code and include it in the main window of your application: + 
    function startDOMi()
+{
+  // Load the Window DataSource so that browser windows opened subsequent to DOM
+  // Inspector show up in the DOM Inspector's window list.
+  var windowDS = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"]
+                                   .getService(Components.interfaces.nsIWindowDataSource);
+  var tmpNameSpace = {};
+  var sl = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+    .createInstance(Components.interfaces.mozIJSSubScriptLoader);
+  sl.loadSubScript("chrome://inspector/content/hooks.js", tmpNameSpace);
+  tmpNameSpace.inspectDOMDocument(document);
+}
+
    +
    4. +
  4. Now create a hook in your application window to start DOM Inspector, like this one: + 
    <button label="Start Inpector" oncommand="startDOMi()"/>
    +
    5. +
  5. Start your application and DOM Inspector will be installed.
    6. +
+

Note: I use this method of installing extensions into all of my Mozilla applications. This way I have one directory where I keep all my Mozilla extensions, and each application (Firefox, Thunderbird) simply contains a few small, one line files pointing to the location of the extensions. (I keep them in source control to be sure I can maintain compatibility)

+

Component Viewer

+

Need custom build, first of all. What else?

+

Extension Developer's Extension

+

Extension Developer's Extension is a useful tool, featuring Live XUL Editor and JavaScript Shell. To install the extension into your application you'll need to hack its install.rdf (see above). You'll probably also want to create menuitems that let you open the JS Shell and other tools provided by the extension.

+

Branding

+

Branding is a chrome package containing product-specific information (e.g. the product name, vendor, and logo). Some XULRunner components (in particular, the Extension Manager) depend on branding, in the sense that they expect to find certain strings in chrome://branding/locale/brand.dtd and chrome://branding/locale/brand.properties. In order to satisfy these dependencies, you can save Firefox's brand.dtd/brand.properties to chrome/locale/branding folder, modify them appropriately, and register a locale provider for branding by adding the following line to your chrome manifest:

+
locale branding en-US chrome/locale/branding/
+
+

The location you put the branding files in doesn't matter, as long as you register it appropriately in the manifest. In addition, a branding content package must be registered to include the application logos:

+
content branding chrome/branding/
+
+

3 files should be provided in this folder: about.png, icon48.png and icon64.png. See Firefox for example.

+

Making Windows display correct application name and icon when buttons are grouped

+

By default, the task bar on Windows might group windows belonging to the same process into one button to save space. This button is usually called "xulrunner.exe" and has XULRunner's icon. There are two approaches to display the branding of your application instead:

+ +

Reading command line arguments

+

See Chrome: Command Line. Command line arguments are handled via nsICommandLineHandler, as usual.

+

Preferences needed for file download dialogs

+

To use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following prefs:

+
pref("browser.download.useDownloadDir", true);
+pref("browser.download.folderList", 0);
+pref("browser.download.manager.showAlertOnComplete", true);
+pref("browser.download.manager.showAlertInterval", 2000);
+pref("browser.download.manager.retention", 2);
+pref("browser.download.manager.showWhenStarting", true);
+pref("browser.download.manager.useWindow", true);
+pref("browser.download.manager.closeWhenDone", true);
+pref("browser.download.manager.openDelay", 0);
+pref("browser.download.manager.focusWhenStarting", false);
+pref("browser.download.manager.flashCount", 2);
+//
+pref("alerts.slideIncrement", 1);
+pref("alerts.slideIncrementTime", 10);
+pref("alerts.totalOpenTime", 4000);
+pref("alerts.height", 50);
+
+

If you are missing preferences that a dialog requires, you will get the following errors:

+
Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPrefBranch.getBoolPref]
+
+Error: dialog has no properties
+Source File: chrome://mozapps/content/downloads/u...ontentType.xul
+Line: 1
+
+

Enabling Password Manager

+

These preferences seem to be the default in Firefox, however, they are missing in XULRunner. Without these settings Password Manager will not store login details.

+
pref("signon.rememberSignons", true);
+pref("signon.expireMasterPassword", false);
+pref("signon.SignonFileName", "signons.txt");
+
+

You also need to get an instance of the login manager service, which internally initializes the system:

+
Components.classes["@mozilla.org/login-manager;1"].getService(Components.interfaces.nsILoginManager);
+
+

Using Firefox 3 to run XULRunner applications

+

Firefox 3 contains the XULRunner runtime. It has an -app command-line switch to run a specified XUL application instead of starting the browser.

+

On Windows:

+
  firefox.exe -app path\to\application.ini
+
+

On Linux:

+
  firefox -app path/to/application.ini
+

On the Mac:

+
  /Applications/Firefox.app/Contents/MacOS/firefox-bin -app /path/to/application.ini
+
+

Note that at least on the Mac, you need to use a full path. Partial paths don't seem to work.

+

Troubleshooting

+

Window title missing

+

If the title of your XUL <window> is blank, even though you specified a title attribute, make sure the extension on your XUL file is .xul rather than .xml

+

Default Theme

+

To create a default theme you need to create a folder in the extensions folder with an install.rdf in it.  As of Oct. 2008, the folder needs to have the same name as the one in Firefox 3.0. 

+

\MyApp\Extensions\{972ce4c6-7e08-4474-a285-3208198ce6fd}\install.rdf

+

It should also have an <em:internalName>classic/1.0</em:internalName> as that is the default theme in Firefox.

+

{{ languages( { "ja": "ja/XULRunner_tips", "fr": "fr/Astuces_XULRunner" } ) }}

diff --git a/files/zh-tw/archive/themes/index.html b/files/zh-tw/archive/themes/index.html new file mode 100644 index 0000000000..a440be2e7a --- /dev/null +++ b/files/zh-tw/archive/themes/index.html @@ -0,0 +1,11 @@ +--- +title: Themes +slug: Archive/Themes +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Themes +--- +

Archived theme documentation.

+ +

{{Listsubpages("/en-US/docs/Archive/Themes", 10)}}

diff --git a/files/zh-tw/archive/web/e4x/index.html b/files/zh-tw/archive/web/e4x/index.html new file mode 100644 index 0000000000..7ba42421ff --- /dev/null +++ b/files/zh-tw/archive/web/e4x/index.html @@ -0,0 +1,6 @@ +--- +title: E4X +slug: Archive/Web/E4X +translation_of: Archive/Web/E4X +--- +

This page was auto-generated because a user created a sub-page to this page.

diff --git a/files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html b/files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html new file mode 100644 index 0000000000..3c8b4cb442 --- /dev/null +++ b/files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html @@ -0,0 +1,229 @@ +--- +title: 使用 E4X 處理 XML +slug: Archive/Web/E4X/Processing_XML_with_E4X +translation_of: Archive/Web/E4X/Processing_XML_with_E4X +--- +

{{Warning("E4X 已廢棄不用。 It's been disabled by default for chrome in Firefox 17, and completly removed in Firefox 21. 請使用 DOMParser/DOMSerializer 或 a non-native JXON algorithm 替代。")}}

+

使用 E4X 處理 XML

+

JavaScript 在 1.6 版本中首次引入，E4X 引入原生的 XML 物件以供 JavaScript 語言使用，並新增用來在 JavaScript 的代碼中嵌入照字面表達的 XML 文件的語法。

+

E4X 的完整定義可以在 Ecma-357 規範 中找到。本章提供實踐中的語言概要；但這並不是全面的參考資料。

+

相容性的問題

+

在主要的瀏覽器支援 <script> 元素以前，對於嵌入到頁面裡的 JavaScript 存有一種常見的做法，就是使用 HTML 的註解標籤將其包夾，避免瀏覽器直接把 <script> 裡的 JavaScript 代碼顯示在使用者眼前。如今已無須這麼做，不過仍殘存在部分遺留下來的代碼中。為了向後相容的需要，E4X 預設會忽略註解和 CDATA 區段。你可以給你的 <script> 標籤加上 e4x=1 參數以解除這項限制︰

+
<script type="text/javascript;e4x=1">
+...
+</script>
+
+

XML 物件的建立

+

E4X 提供兩種建立 XML 物件的方式。第一種是傳入字串給 XML 建構子︰

+
 var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>');
+
+

第二種是直接在你的 Script 中嵌入 XML︰

+
 var languages = <languages type="dynamic">
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </languages>;
+
+

在這兩種情況裡，產生都會是 E4X XML 物件，他提供了方便的語法用以存取並更新其內夾藏著的資料。

+

XML 物件在外觀上和行為上都和普通的 JavaScript 物件很類似，但有兩件事並不相同。E4X 引入的新語法只能用在 E4X XML 物件上。雖然新語法被設計成對 JavaScript 設計者而言較熟悉的形式，但 E4X 並不提供從 XML 到原生 JavaScript 物件的完整對應；只是看起來很像而已。

+

可以把變數加入到 XML 的字面中用來建立元素的名稱（或是內容）。

+
var h = 'html';
+var text = "Here's some text";
+var doc = <{h}><body>{text}</body></{h}>;
+alert(doc.toXMLString());
+// 產生的是
+<html>
+  <body>Here's some text</body>
+</html>
+
+

屬性的運用

+

當你需要動態的建立標記的時候，XML 字面語法明顯更勝 XML 建構子。使用 E4X 可輕易的在標記中嵌入動態值。只需使用花括弧 ({}) 包夾要建立的屬性值，並省略一般會加上的引號標記，變數和表達式即可用於建立屬性值，如同下例所示︰

+
 var a = 2;
+ var b = <foo bar={a}>"hi"</foo>;
+
+

開始執行時，變數的值會被求出，並自動在適當的位置加上引號。前面的例子產生的 XML 物件看起來就像這樣︰<foo bar="2">"hi"</foo>。

+

在屬性的替換方面，雙引號會被跳脫成 &quot;，單引號則按平常方式處理。

+
var b = 'He said "Don\'t go there."';
+var el = <foo a={b}/>;
+alert(el.toXMLString());
+// 產生︰<foo a="He said &quot;Don't go there.&quot;"/>
+
+

小於和 & 符號也會被跳脫成各自的等價實體。由於大於符號不會被跳脫，因此如果包含了 CDATA 結束序列 (]]>)，就有可能產生 XML 錯誤。

+

通常不會直接在字面（或變數）的屬性內容之中作修改（例如，bar="a{var1}{var2}"）。如果有必須使用 JavaScript 表達式計算變數來替代的內容的話（例如，bar={'a'+var1+var2}），在元素字面之前先定義新的變數，在變數中包含完整的修改內容，然後在字面中含入這個變數，或在字面之後取回屬性並將其修改（見下）。

+

可如同屬性值一般的修改屬性的名稱︰

+
var a = 'att';
+var b = <b {a}='value'/>;
+alert(b);
+// Gives:
+<b att="value"/>
+
+
+

…但之後就不能修改表達式（例如，<b {a}>）。

+

執行上面的例子之後，參考 XML 物件的語言變數與 XML 文件中的 <languages> 結點一致。這個結點只有一個屬性︰type，這個屬性可用各種方式來存取並更新︰

+
 alert(languages.@type); // 警報 "dynamic"
+ languages.@type = "agile";
+ alert(languages.@type); // 警報 "agile"
+
+
 alert(languages.toString());
+ /* 警報:
+   <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages>
+ */
+
+

注意，如果想要把取回的屬性與其他的字串作比較，就有必要先把屬性作轉換，即使屬性有可能會在其他地方被轉換成字串（例如插入到文字框中）。

+
if (languages.@type.toString() === 'agile') {
+ ...
+}
+
+

XML 物件的運用

+

XML 物件提供一系列的方法用來查閱並更新其中的內容。這類物件亦支援 JavaScript 的點 (.) 和 [] 符號，但不是用來存取物件的屬性，E4X 覆蓋了這些運算子，改用來存取元素的子結點︰

+
var person = <person>
+  <name>Bob Smith</name>
+  <likes>
+    <os>Linux</os>
+    <browser>Firefox</browser>
+    <language>JavaScript</language>
+    <language>Python</language>
+  </likes>
+</person>;
+
+alert(person.name); // Bob Smith
+alert(person['name']); // Bob Smith
+alert(person.likes.browser); // Firefox
+alert(person['likes'].browser); // Firefox
+
+

如果你使用多於一個以上的元素來存取的話，你會得到 XMLList︰

+
alert(person.likes.language.length()); // 2
+
+

和 DOM 一樣，* 可以用來存取所有的子結點︰

+
alert(person.likes.*.length()); // 4
+
+

. 運算子會直接存取指定結點的子結點，.. 運算子則會存取所有的子結點，不論嵌入的有多深︰

+
alert(person..*.length()); // 11
+
+

length() 方法在此返回 11，因為元素結點和文字結點兩者都被包含在 XMLList 的結果中。

+

用來表示 XML 元素的物件提供一系列實用的方法，部分方法的解說見下︰TODO: Add all of the methods to the JavaScript reference, link from here

+
alert(person.name.text()) // Bob Smith
+
+var xml = person.name.toXMLString(); // 內含 XML 的字串
+
+var personCopy = person.copy(); // XML 物件的深層複製
+
+var child = person.child(1); // 第二個子結點；目前是 <likes> 元素
+
+

XMLLists 的運用

+

除了 XML 物件以外，E4X 也引入了 XMLList 物件。XMLList 是用來表示附有編號的 XML 物件的集合；例如，元素的列表。接續上面的例子，我們可以在頁面上存取 XMLList 的 <lang> 元素如下︰

+
 var langs = languages.lang;
+
+

XMLList 提供 length() 方法，可用來查出內含元素的數目︰

+
 alert(languages.lang.length());
+
+

注意，有別於 JavaScript 陣列的 length 屬性，這個 length 是方法，不是屬性，而且必須使用 length() 來呼叫。

+

我們可以迭代所有相配的元素，就像這樣︰

+
 for (var i = 0; i < languages.lang.length(); i++) {
+     alert(languages.lang[i].toString());
+ }
+
+

在此我們使用同一個語法存取陣列中的已編號項。雖然這部分很類似普通的陣列，但 XMLList 並不支援 Array 的方法，如 forEach，且陣列的通用功能，如 Array.forEach() 也不相容於 XMLList 物件。

+

我們也可以使用在 JavaScript 1.6 中所引入的 for each...in 語法，他已支援 E4X 的部分︰

+
 for each (var lang in languages.lang) {
+     alert(lang);
+ }
+
+

for each...in 也可以用在普通的 JavaScript 物件，迭代出內含在物件中的值（不是鍵）。如同 for...in，非常不建議 和陣列一起使用。

+

可以使用下面的 XML 字面語法來建立 XMLList，而無須建立格式正確的 XML 文件︰

+
 var xmllist = <>
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </>;
+
+

+= 運算子可用來把新的元素附加到文件中的 XMLList︰

+
 languages.lang += <lang>Ruby</lang>;
+
+

注意，有別於由普通的 DOM 方法所返回的結點列表，XMLList 只是靜態的，而且不會自動更新以反映在 DOM 中的改變。如果你在既有的 XML 物件底下建立 XMLList 作為子集，XMLList 並不會反映 XML 物件的改變；你需要重新建立 XMLList 以取得最近的更新︰

+
 var languages = <languages>
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </languages>;
+
+ var lang = languages.lang;
+ alert(lang.length()); // 警報 2
+
+ languages.lang += <lang>Ruby</lang>;
+ alert(lang.length()); // 仍舊警報 2
+
+ lang = languages.lang; // 重新建立 XMLList
+ alert(lang.length()); // 警報 3
+
+

搜尋和過濾

+

E4X 提供特殊的運算子用來在通過指定條件的文件內部選取結點。這種過濾動作是由括弧裡面的表達式所指定的︰

+
var html = <html>
+  <p id="p1">First paragraph</p>
+  <p id="p2">Second paragraph</p>
+</html>;
+
+alert(html.p.(@id == "p1")); // 警報 "First paragraph"
+
+

在表達式前面比對路徑的結點（在本例中即 p 元素）會在表達式求值之前先加上作用域的限縮。就如同已經用 with 語法 指定了一樣。

+

因此，過濾器也可以依據在目前元素中內含的單一結點的值來執行︰

+
var people = <people>
+  <person>
+    <name>Bob</name>
+    <age>32</age>
+  </person>
+  <person>
+    <name>Joe</name>
+    <age>46</age>
+  </person>
+</people>;
+
+alert(people.person.(name == "Joe").age); // 警報 46
+
+

也可以使用 JavaScript 函數當作過濾器的表達式︰

+
function over40(i) {
+    return i > 40;
+}
+
+alert(people.person.(over40(parseInt(age))).name); // 警報 Joe
+
+

命名空間的處理

+

E4X 也全面考慮到命名空間。任何代表結點或屬性的 XML 物件都提供了可返回 QName 物件的 name() 方法，使加上命名空間的元素的查詢更為容易。

+

預設

+
default xml namespace = "http://www.w3.org/1999/xhtml";
+// 目前還沒有必要在 HTML 標記裡指定命名空間
+var xhtml = <html><head><title></title></head><body>
+            <p>text</p></body></html>;
+alert(xhtml.head); // 目前還沒有必要在此處的子元素中指定命名空間
+

非預設

+
var xhtml = <html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Embedded SVG demo</title>
+	</head>
+	<body>
+		<h1>Embedded SVG demo</h1>
+		<svg xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 100 100">
+			<circle cx="50"
+				cy="50"
+				r="20"
+				stroke="orange"
+				stroke-width="2px"
+				fill="yellow" />
+		</svg>
+	</body>
+</html>;
+
+alert(xhtml.name().localName); // 警報 "html"
+alert(xhtml.name().uri); // 警報 "http://www.w3.org/1999/xhtml"
+
+

若要存取非預設命名空間內部的元素，首先建立 Namespace 物件把特定的命名空間的 URI 加以封裝︰

+
var svgns = new Namespace('http://www.w3.org/2000/svg');
+
+

目前可以在 E4X 中使用 namespace::localName 代替一般的元素指定子來作查詢︰

+
var svg = xhtml..svgns::svg;
+alert(svg); // 顯示文件中的 <svg> 部分
+
+

參閱

+ +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "fr": "fr/Guide_JavaScript_1.5/Traitement_de_XML_avec_E4X", "ja": "ja/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X" } ) }}

diff --git a/files/zh-tw/archive/web/index.html b/files/zh-tw/archive/web/index.html new file mode 100644 index 0000000000..6f60d315ff --- /dev/null +++ b/files/zh-tw/archive/web/index.html @@ -0,0 +1,12 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

The documentation listed below is archived, obsolete material about open Web topics.

+

{{SubpagesWithSummaries}}

diff --git a/files/zh-tw/archive/web_standards/index.html b/files/zh-tw/archive/web_standards/index.html new file mode 100644 index 0000000000..1fed929d5f --- /dev/null +++ b/files/zh-tw/archive/web_standards/index.html @@ -0,0 +1,76 @@ +--- +title: Web Standards +slug: Archive/Web_Standards +translation_of: Archive/Web_Standards +--- +
In progress. Web standards are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market. {{ Ref(1) }}
+ + + + + + + + +
+

Documentation

+ +
+
Migrate apps from Internet Explorer to Mozilla
+
Ever have trouble getting your Internet Explorer-specific Web applications to work with Mozilla? This article covers common issues associated with migrating applications to the open source Mozilla-based browser.
+
Using Web Standards in your Web Pages
+
This article provides an overview of the process for upgrading the content of your web pages to conform to the W3C web standards.
+
Choosing Standards Compliance Over Proprietary Practices
+
In the development world, there is a need for standards because applications are designed across multiple development groups.
+
The Business Benefits of Web Standards
+
This article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals.
+
+ +

View All...

+ 		+

Community

+ +
    +
  • View Mozilla forums...
    • +
+ +

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}

+ + + +

Tools

+ + + +

View All...

+ +

Examples

+ + + + + +
+
CSS, DHTML, HTML, Web Development, XHTML, XML
+
+
+ +
+

{{ endnote(1) }} - The Web Standards Project

+ +

{{ languages( { "ca": "ca/Est\u00e0ndards_web", "de": "de/Web-Standards", "es": "es/Est\u00e1ndares_Web", "fr": "fr/Standards_du_Web", "ja": "ja/Web_Standards", "ko": "ko/Web_Standards", "pl": "pl/Standardy_WWW", "pt": "pt/Normas_Web" } ) }}

diff --git a/files/zh-tw/archive/web_standards/rdf_in_fifty_words_or_less/index.html b/files/zh-tw/archive/web_standards/rdf_in_fifty_words_or_less/index.html new file mode 100644 index 0000000000..c9d003f911 --- /dev/null +++ b/files/zh-tw/archive/web_standards/rdf_in_fifty_words_or_less/index.html @@ -0,0 +1,85 @@ +--- +title: 50 字解說 RDF +slug: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less +translation_of: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less +--- +

 

+ +

好吧，可能比 50 字還要多一點，但重點十分簡單（並且已經幫諸位只想看重點的成功人士標為粗體）。資源描述架構，或稱為「RDF」（Resource Description Framework），其實是指兩件事。

+ +
首先，RDF 是種圖像式模型，用以描述網路上的資源（如網頁內容、電子郵件訊息等），以及這些資源之間的關係。
+ +

不過這到底是什麼意思？對 Mozilla 開發者來說，這代表 RDF 資料模型（就是那個「圖像」）可以用來組織、整合網路上的資源。

+ +

舉「書籤」為例。目前大部分的網頁瀏覽器讓你將書籤歸入資料夾的樹狀結構，每個書籤則指向一個網頁的 URI（通用資源定義符，Uniform Resource Identifier）。

+ +

但網頁只是眾多網路資源的其中一項，其他還有如電子郵件內容、新聞群組的訊息（或整個新聞群組）、搜尋引擎的探索結果... 等等。基本上，若說這些其他資源不能存入書籤、與其他書籤擺在一起以資料夾整理，也沒什麼道理。甚至還應該可以建立一個「智慧型」資料夾，點選後就動態找出符合某些條件的內容。

+ +

一個「書籤」尚且應有眾多相關的屬性：您可能想自己定義一些書籤的「分類規則」、依據麥金塔的「hot」、「warm」、「cool」色彩標準上色；又或許，您想標示某個書籤與另一個書籤有關，還可能想將其同時放入多個不同的資料夾。

+ +

RDF 圖像提供絕佳資料模型，可以建立上述的「通用」書籤服務：這種圖像可以指向任意資源、亦能以幾乎任何想得到的方式組織。

+ +

別那麼快下結論，還有...

+ +
第二，RDF 是種串接式的語法。這種語法讓圖像式的資料模型可以透過「代理人」溝通。
+ +

這又是什麼意思？基本上，這代表 RDF 資料模型可以跨越網路來交流，其圖像內容還可以在收到遠端服務的資訊時動態變更。

+ +

我們再回到書籤的例子。就說我有個書籤的「資料夾」，其實指向我的電子郵件收件匣：一旦點選這個資料夾，哇喔，所有昨晚收下來的郵件都列出來了！

+ +

不過這是怎麼辦到的？其實這個「收件資料夾」指向一個網路資源，此資源內含更多的 RDF 來拓展資源版圖。此「網路資源」為一個指向 CGI 的 URI（像是 http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox），此 CGI 會建立串接 RDF、就像是把一張圖片以 XML 方式表達一樣：

+ +
 <rdf:RDF
+     xmlns:rdf="http://www.w3.org/TR/WD-rdf-syntax#"
+     xmlns:sm="http://www.mozilla.org/smart-mail/schema#">
+   <rdf:Description
+     about="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox">
+     <sm:message id="4025293">
+        <sm:recipient>
+          Chris Waterson "waterson@netscape.com"
+        </sm:recipient>
+        <sm:sender>
+          Aunt Helga "helga@netcenter.net"
+        </sm:sender>
+        <sm:received-by>x-wing.mcom.com</sm:received-by>
+        <sm:subject>Great recipe for Yam Soup!</sm:subject>
+        <sm:body>
+          http://www.mozilla.org/smart-mail/get-body.cgi?id=4025293
+        </sm:body>
+     </sm:message>
+     <sm:message id="4025294">
+        <sm:recipient>
+          Chris Waterson "waterson@netscape.com"
+        </sm:recipient>
+        <sm:sender>
+          Sarah Waterson "waterson.2@postbox.acs.ohio-state.edu"
+        </sm:sender>
+        <sm:received-by>x-wing.mcom.com</sm:received-by>
+        <sm:subject>We won our ultimate game</sm:subject>
+        <sm:body>
+          http://www.mozilla.org/smart-mail/get-body.cgi?id=4025294
+        </sm:body>
+     </sm:message>
+   </rdf:Description>
+ </rdf:RDF>
+
+ +

收到上面這堆怪物之後，RDF 引擎會將 RDF 資料放在圖像中的適當位置。負責實際繪出書籤介面的 Tree 控制項此時將收到通知，知道應該繪出 Aunt Helga 關於 Yam Soup 之信件的一些圖示。

+ +

其實，這正是 SmartMail 運作的原理。

+ +

聯絡: Chris Waterson (waterson@netscape.com)

+ +
+

原始文件資訊

+ + +
+ +

Interwiki Language Links

+ +

{{ languages( { "fr": "fr/RDF_en_cinquante_mots", "it": "it/RDF_in_cinquanta_parole_o_meno", "ja": "ja/RDF_in_Fifty_Words_or_Less", "ko": "ko/RDF_in_Fifty_Words_or_Less", "zh-TW": "zh_tw/50_字解說_RDF" } ) }}

-- cgit v1.2.3-54-g00ecf