エメラルドマウンテンの麓。

翻訳『U3カーネル拡張インターフェースの定義』(UCBrowser_U3_API.doc)

本記事の投稿者より

UCBrowser_U3_API.doc 書影
『U3内核扩展接口定义』の表紙

この文書は、UC ブラウザの独自拡張に関する文書『U3カーネル拡張インターフェースの定義』、原題『U3内核扩展接口定义』、ファイル名「UCBrowser_U3_API.doc」を Web アーカイブから取得した上で、Google 翻訳で翻訳し、僕のフィーリングでマークアップしたものです。

ごく一部で Google 翻訳の結果のブレを僕がフィーリングで修正しています。また元文書の誤記と思われる点を、僕のフィーリングで書き換えています

僕に中国語の素養が無い点、翻訳文書の公開にあたって作者 ucweb の許可を得ていない点をご承知ください。ついでに、ucweb による最終の文書を元にしたのかもイマイチ不明です。

本記事を参照したことによる如何なる損害についても僕は免責とさせていただくことをご承知の上で以降を閲覧ください。Enjoy!

目次

修正記録

修正日概要作者
2012年6月26日初稿ucweb
2012年8月10日バージョン8.6に従ってドキュメントの内容を調整しますucweb
2012年8月27日ブラウザ認識の手順を追加しましたucweb
2012年10月8日

次のコンテンツを追加します。

  • 画像表示を強制する
  • ナイトモードコントロール
  • アプリケーションモード
  • 植字モード制御

以下を変更します。

フルスクリーンモードには、他のモードコントロールは含まれていません

ucweb

1. 執筆目的

この文書では、U3 カーネルに基づくさまざまな拡張機能について説明します。この文書の読者は、開発に U3 を使用するフロントエンド開発者と、拡張機能を実装する開発者です。 1.1.

1.1. 背景

モバイルゲームやモバイルアプリケーションの急速な発展に伴い、これらのアプリケーションはモバイルブラウザのあらゆる面で新しい要件を提唱しています。これらの新しい要件は必ずしも既存のプロトコル仕様で定義されているわけではないため、U3 の機能を拡張する必要があります。これらの要件を満たすためのカーネル。アプリケーションはサポートを提供します。このドキュメントでは、U3 カーネルによって追加されたすべての固有の、または未定義の拡張機能をまとめています。これは、開発に U3 カーネルを使用するフロントエンド開発者にとって便利です。

2. 機能拡張の概要

拡張機能分類機能詳細meta サポートjs サポート補足事項
フルスクリーン8.6将来のバージョン
画面の向き8.6将来のバージョン
ジェスチャースイッチlongpressMenu8.6
gesture8.6
flipbutton将来のバージョン
menu将来のバージョン
画面レイアウトに合わせる8.5patch
デスクトップに送信8.6
ブラウザのバージョン認識8.2

3. 機能拡張

3.1. 画面の向き(screen orientation)

3.1.1 仕様状況

http://www.w3.org/TR/screen-orientation/

3.1.2 定義

以下を含む、画面の向きの特性の判断、イベント、および操作を提供します。

  • 現在の画面の方向を読み取ることができる screen オブジェクトを定義します。
  • 画面の向きは、screen オブジェクトを介して設定できます。
  • 画面の向きが変わったときのイベントハンドラー関数を定義します。
interface screen {
    readonly attribute DOMString orientation;
    boolean lockOrientation (DOMtring orientation);
    void unlockOrientation ();
    attribute Function onorientationchange;
};

3.1.3. 例

<!DOCTYPE html>
<html>
  <script>
    function show() {
      alert("Screen orientation state is " + screen.orientation);
    }
    screen.addEventListener("orientationchange", show, false);
    show();
    screen.lockOrientation("portrait");
  </script>
</html>

3.1.4 Metaタグ

呼び出しを単純化するために、画面の向きは meta を介して設定でき、効果は js を使用して関連するインターフェースを呼び出すのと同じです。

<meta name="screen-orientation" content="portrait/landscape">

次に相当。

screen.lockOrientation("portrait/landscape");

3.1.5 操作設計

タブ切り替え

アニメーションは現在の方向にあり、切り替え後にページがクリックされます

前後

現在のページの方向にアニメーションを表示し、切り替え後はページの方向に応じてページを切り替えて表示します。

システム回転画面設定

この機能は、画面設定を1回だけ変更し、永続的に有効になることはありません。ユーザーがブラウザ->設定->画面設定をオンにして画面を設定すると、設定の変更に応じて画面が変化し、それに応じて画面の向きのイベントがトリガーされます。

3.1.6 バージョン変更履歴

3.2.

3.2. フルスクリーンコントロール(fullscreen)

3.2.1 仕様状況

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

3.2.2 定義

以下を含むフルスクリーンの操作を提供します。

  • element オブジェクトで定義されたフルスクリーン(requestFullscreen)関数を入力します
  • document オブジェクトで定義された exitFullscreen 関数
  • document オブジェクトの全画面状態と現在の全画面要素を読み取るように定義します
  • フルスクリーン切り替えイベントを定義する

partial interface Element{
  void requestFullscreen();
}
 
partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  Readonly attribute Element fullscreenElement;
  void exitFullscreen();
}

3.2.3 例

<!DOCTYPE html>
<html>
  <script language="text/javascript">
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
    }
    If (docElm.fullscreenEnabled){
      docElem.exitFullscreen();
    }
  </script>
</html>

3.2.4 Metaタグ

<meta name="full-screen" content="yes">

次と機能的に同等。

var docElm = document.documentElement;
docElem.requestFullscreen();

3.2.5 操作設計

フルスクリーン機能現在定義されているインタラクションおよび操作機能は、アプリケーションのフルスクリーンと一致しています。

3.2.6 バージョン変更履歴

8.8変更
バージョン8.6/8.7で定義されているフルスクリーン機能の meta タグに含まれる禁止ジェスチャを削除し、サスペンションフレームを禁止し、長押しメニューのデザインを禁止しました。
Apple 独自の meta サポートを削除しました

僕による追記

2012年8月27日版の 3.2.4 Metaタグ セクションは次の記述となっていて、バージョン8.6/8.7と8.8で異なる挙動となっていることが分かる。

<meta name="full-screen" content="yes">

このタグは、次のジェスチャ動作も暗黙的に定義します。

  • 一本指での操作は禁止されています
  • フローティングフレームを禁止する
  • メニューキーはメニューをポップアップできます
  • 長押しメニューの禁止
  • ページめくりボタンを表示しない

次と機能的に同等

Var docElm = document.documentElement;
docElem.requestFullscreen();
navigator.control.gesture(false);
navigator.control.float_button(false);
navigator.control.longpressMenu(false);
3.3.

3.3. ジェスチャースイッチ

3.3.1 仕様状況

暂无

3.3.2 定義

U3 は、モバイルブラウザ用のいくつかの独自の操作方法を定義しています。これらの操作方法には次のものがあります。

  • ジェスチャー:1本の指で前後に動かし、2本の指で操作します(追加/削除/タブ切り替え)
  • 長押しメニュー
  • 全画面表示のフローティングボタン(まだ提供されていません)
  • ページめくりボタン
  • 物理メニューキー

次のようなジェスチャの制御機能を提供します。

  • ブラウザ制御オブジェクトを定義します:navigator.control
  • navigator.control にジェスチャー、フローティングボタン、その他の操作を提供します
Interface control{
  Boolean gesture(boolean enable/disable);
  Boolean longpressMenu(boolean enable/disable);
  Boolean flipbutton()
  Boolean menu(boolean enable/disable);
}

3.3.3 例

3.3.4 Metaタグ

利用不可

3.3.5 操作設計

すべての設定は現在のページに対してのみ有効であり、順方向リストと逆方向リストのページには影響しません。

ジェスチャが禁止されている場合、現在のページのジェスチャイベントを Web ページに渡して処理する必要があります。次の方法でこのページにアクセスすると、操作を使用できなくなります。

  • 2本の指を使用して、別のタブからジェスチャーイベントが禁止されている現在のページに切り替えます
  • 1本の指を使用して前後に移動するときにジェスチャイベントが禁止されている現在のページ

4. 組版拡張

4.1.

4.1. XHTML は画面レイアウトに適応します

4.1.1 定義

画面レイアウトへの適応は、大多数のユーザーに愛されている UC ブラウザの大きな特徴であり、左右のスクロールバーを効果的に回避し、ユーザー操作の回数を減らすことができます。ただし、XHTML の場合、小さな画面でのズームは、ズームインして表示領域を縮小することで実現されるため、画面に適応して視覚効果を向上させることはできません。

標準の植字効果の実現に基づいて、UC ブラウザは、画面に適応する植字方法を提供します。これにより、画面を拡大および縮小したときに XHTML ページが左右のスクロールバーに表示されなくなります。

この機能を使用するには、uc-fitscreenを使用して viewport に設定するだけです。デフォルト値は uc-fitscreen=no です。つまり、この機能は有効になっていません。現時点では、ブラウザのズーム動作は次のとおりです。標準と一致しています。 uc-fitscreen=yes に設定すると、ズーム操作を実行するときに、画像やテキストなどのページ要素のみが拡大されますが、画面幅は拡大されないため、左右のスクロールバーの生成が回避されます。

4.1.2 例

<meta name="viewport" content="width=device-width, uc-fitscreen=yes"/>
<meta name="viewport" content="initial-scale=1.0, uc-fitscreen=yes"/>

4.1.3 Metaタグ

<meta name="viewport" content="uc-fitscreen=yes"/>

ページの要件に応じて、ビューポートの他の属性と一緒に使用してください。

4.1.4 操作設計

この拡張機能は、画面幅にズームするときに有効な表示領域を制限するだけで、レイアウトとルールを調整しません。したがって、ズームが最大に達すると、一部のテーブル行でフォントが少し重なる場合があります。このとき、倍率が大きくなりすぎないように maximum-scale を設定することで回避できます。

設計上の考慮事項に基づいて、複数の viewport 定義がページに表示される場合、後の viewport が前の定義を上書きします。したがって、 uc-fitscreen=no 属性を定義して、ページ上の他の viewport 属性と一緒に使用する必要があり、単独で使用することはできません。例えば、

<!DOCTYPE html '-//WAPFORUM//DTD XHTML Mobile 1.0//EN' 'http://www.wapforum.org/DTD/xhtml-mobile10.dtd'>
<meta name="viewport" content="width=device-width,uc-fitscreen=yes"/>

または

<!DOCTYPE html '-//WAPFORUM//DTD XHTML Mobile 1.0//EN' 'http://www.wapforum.org/DTD/xhtml-mobile10.dtd'>
<meta name="viewport" content="initial-scale=1.0,uc-fitscreen=yes"/>
4.2.

4.2. 組版モード

4.2.1 定義

UC ブラウザには、画面フィッティングモードと標準モードの2種類のレイアウトモードがあります。画面フィッティングモードは、一部のページの処理を簡素化し、ページコンテンツをページの読み取りに適したものにし、トラフィックを節約し、応答を高速化します。標準モードでは、標準仕様に従ってページを植字およびレンダリングできます。新しく定義されたタグと js api インターフェイスを介して、Web デザイナは、ユーザーにページを表示するために使用するレイアウト方法を決定できます。

4.2.2 标签

Metaタグ
<meta name="layoutmode" content="fitscreen/standard"/>
Javascript APIインターフェース

現在の植字モードの属性値を定義します

interface layout{
    readonly attribute DOMString layoutmode;
};
定義済み

layoutmode の値は、fitscreen(画面に適応するために対応)または standard(標準モードに対応する)です。

onlayoutchange 関数は、ユーザーがメニューからレイアウトモードを切り替えると呼び出され、各ウィンドウに Web ページのレイアウトが変更されたことを通知します。

メタタグを使用してページのレイアウトを定義した後、ページのレイアウトは、ユーザーが選択したメニューレイアウトの影響を受けなくなります。

4.2.3 例

ページレイアウトを標準モードに設定する
<html>
  <meta name="layoutmode" content="standard"/>
  <body>
    このページは標準モードでフォーマットされ、ユーザーメニューでのズーム/フィット画面の選択は無効です
  </body>
</html>
組版モードの切り替えを検出し、ユーザーにプロンプトを表示します
<html>
 <meta name="layoutmode" content="fitscreen"/>
 <body>
  <script type="text/javascript>
function handlelayout(newmode)
  {
    confirm("現在のページレイアウトは画面表示モードに固定されています。標準モードに切り替えるには、xxxリンクをクリックしてください。");
  }
    layout.onlayoutchange = handlelayout;
  </script>
 </body>
</html>

4.2.4 説明

layoutmode が設定されていない場合、レイアウトモードはユーザーが設定したブラウザオプションによって決定され、ユーザーのメニューの変更に応じて変更できます。

meta 設定は、現在のページに従属する iframe/frame を含む現在のページで有効になりますが、前方ページと後方ページには影響しません。 非現在のウィンドウのイベントコールバック関数はリアルタイムで生成されます

ページの frame/iframe のレイアウトメタ属性は有効になりません。

組版切り替えイベントは、ページ内の frame/iframe に通知されます 4.3.

4.3. ナイトモード

4.3.1 定義

ナイトモードは UC ブラウザの特徴的な機能であり、ユーザーが低輝度または暗い状態でより快適にページを閲覧するのに役立ちます。 Web ベースのアプリケーションがますます複雑になるにつれて、ブラウザによって実装されるシングルナイトモードはすべての状況(ゲームアプリケーションなど)に適応できない場合があります。したがって、UC ブラウザでは、Web デザイナがブラウザのナイトモードを無効にすることができます。ページを設計し、ユーザーにより適した独自のナイトモードを設計します。

4.3.2 标签

Metaタグ
<meta name="nightmode" content="enable/disable"/>
content=disable の場合の意味

このページは、UC ブラウザによってカスタマイズされたナイトモードの使用を禁止されており、ナイトモードに入ったときのパフォーマンスはデイモードと同じです。

content=enable の場合の意味

<meta name="nightmode" content="disable"/> の効果をキャンセルするために使用される UC ブラウザのカスタムナイトモードの使用をページに許可する。

js インターフェース
  • ナイトモードのイベントハンドラー関数を定義する
  • ナイトモードの属性値を定義する
interface layout{
    readonly attribute DOMString displaymode;
    Function onnightmodechange(DOMString newmode);
};

displaymode はページを単位とする変数で、値は day/night で、それぞれデイモードとナイトモードに対応し、ブラウザ全体のナイトモードと同じ値になります。

ブラウザがナイトモードに入る、または終了すると、イベントがすべてのウィンドウに送信され、onnightmodechange 関数が呼び出され、着信パラメータは変更される displayMode 値です。

4.3.3 例

ナイトモードへの移行を禁止する
<!DOCTYPE html>
<html>
  <meta name="nightmode" content="disable"/>
  <body>
       <p>このページはナイトモードにはなりません。
    <body>
</html>
ユーザーにナイトモードに入るように促す
<!DOCTYPE html>
<html>
  <body>
  <p>現在のナイトモード:<div id="isNight"><script>document.write(layout.displaymode)</script></div>
  <script language="text/javascript">
function handlenightmode(newmode)
{
  ret_val = true;
  //現在のモードはオフです。つまり、ナイトモードに変換されています。
  if (newmode == "night"){
    alert("ナイトモードに入った");
  }
  document.getElementById("isNight").innerHTML= layout.displaymode;
}
layout.onnightmodechange = handlenightmode;
  </script>
  </body>
</html>
カスタムナイトモード
<!DOCTYPE html>
<html>
    <meta name="nightmode" content="disable"/>
  <body>
  <p>現在のナイトモード:<div id="isNight"><script>document.write(layout.nightmode)</script></div>
  <script language="text/javascript">
function handlenightmode(newmode)
{
  ret_val = false;
  //デイモードからナイトモードに切り替えます
  if (layout.nightmode == "night")
  {
   alert("ページのカスタマイズにナイトモードを使用する");
   //カスタムナイトモードスタイルシートのページに切り替える
  }
  else //ナイトモードからデイモードに切り替えます
  {
    //ページのカスタマイズのためにナイトモードスタイルシートをキャンセルする
  }
}
layout.onnightmodechange = handlenightmode;       
document.getElementById("isNight").innerHTML= layout.nightmode;
  </script>
  </body>
</html>

4.3.4 説明

ページの frame/iframe のナイトモード meta は有効になりません。

ユーザーのナイトモード切り替えイベントは、ページの frame/iframe に通知されます

4.4. 画像表示を強制する

4.4.1 定義

トラフィックを節約し、速度を上げるために、UC はユーザーに画像なしモードを提供します。実際の使用では、確認コードや地図など、ページ上の画像が不可欠です。強制画像表示の機能により、画像表示がユーザーの設定に影響されないようにすることができます。

この機能は、ページの全画像の強制表示と単一画像の強制表示の2つの部分に分かれています。

ページ全体に画像の表示が強制され、meta タグを介して、ページ上のすべての画像を読み込む必要があることがブラウザに通知されます。ユーザーが設定した画像なしオプションは無効です。

単一の画像が強制的に表示されます。属性が img タグに追加されます。これにより、ユーザーが設定した画像なしオプションは無視され、対応する画像オブジェクトが強制的に読み込まれますが、他の画像オブジェクトの処理には影響しません。

4.4.2 标签

metaタグ
<meta name="imagemode" content="force"/>
imgタグ
<img src="..." show="force">

4.4.3 例

ページの全画像の強制表示
<html>
  <meta name="imagemode" content="force"/>
  <body>
  <img src="sample1.jpg"/>
  <img src="sample2.jpg"/>
  <img src="sample3.jpg"/>
  <p>上記の画像は画像なしモードの影響を受けず、表示する必要があります
  </body>
</html>
単一の画像の強制表示
<html>
 <body>
  <img src="sample1.jpg"/>
  <p>この画像は画像なしモードでは表示されません
  <img src="sample2.jpg" show="force"/>
  <p>この画像は、画像なしモードでも表示されます
  <img src="sample3.jpg" id=testimg/>
  <a href="javascript:document.getElementById("testimg").show="force";">強制表示を設定する</a>
  <p>この画像は、ボタンをクリックすると強制的に表示されます
 </body>
</html>

4.4.3 説明

アプリケーションモードでは、ページの全画像は強制的に表示されます。

ページの全画像の強制表示は、現在のページにのみ有効であり、ページ内の iframe/frame には有効ではなく、前後のページには影響しません。

4.5. 速度モード制御

5. その他

5.1.

5.1. デスクトップに送信

次のタグの場合、ユーザーがブックマークを追加するとき->デスクトップショートカットに送信するときに、対応する画像をオンラインで取得し、この画像を使用してデスクトップに表示します(safariモバイルブラウザーの定義と互換性があります)

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/icon.png" />

ユーザーが“デスクトップに送信”メニュー操作をトリガーすると、ネットワークがトリガーされ、最大サイズの画像が取得されます。画像を取得する前に、デフォルトの画像を最初に表示できます。取得が完了すると、取得した画像がデスクトップに更新されます。この特別なラベルを取得できない、または取得できない場合でも、デフォルトのデスクトップブックマークアイコンが引き続き使用されます。

5.2. アプリケーションモード

5.2.1 定義

アプリケーションモードは、Web アプリケーションとゲーム開発者の便宜のために設定された包括的なスイッチであり、meta タグを介して開くように指示されます。アプリケーションモードに入ると、ブラウザは次のパラメータを自動的に調整します。

パラメータ状態
全画面表示効果的に、meta または js api 呼び出しを介して全画面を終了できます。
長押しメニュー無効です。js api 呼び出しで再検証できます。
ブラウザのデフォルトのジェスチャー無効です。js api 呼び出しで再検証できます。
組版モード標準モード、他の植字モードは、meta または js api を呼び出すことで設定できます。
画像表示を強制する無効です。有効が正しいと思われる。(僕)
ナイトモード無効です。meta または js api 呼び出しを介して有効にできます。

5.2.2 标签

アプリケーションモードは meta タグを介して呼び出すことができます
<meta name="browsermode" content="application"/>

5.2.3 例

アプリケーションモードに入る
<html>
  <meta name="browsermode" content="application"/>
  <body>
    アプリケーションモードはこのページで設定され、デフォルトは全画面表示、長押しメニューは禁止、ジェスチャーは禁止、標準の植字、画像表示は必須です。
  </body>
</html>
アプリケーションモードに入り、長押しメニューを有効にし、ナイトモードを禁止します
<html>
  <meta name="browsermode" content="application"/>
  <meta name="nightmode" content="disable"/>
  <script language="text/javascript">
    navigator.control.longpressMenu(true);
  </script>
  <body>
    このページではアプリケーションモードが設定されていますが、ナイトモードは禁止されており、長押しメニューは許可されています
  </body>
</html>

5.2.4 説明

6. ブラウザのバージョン認識

UC ブラウザの認識方法は他のブラウザと同じです。navigator.appVersion 変数を使用して、UC ブラウザと対応するバージョンを識別することができます。次の例を参照してください。

<html>
<body>
  <script type="text/javascript">
    document.write(navigator.appVersion);
    if (navigator.appVersion.indexOf("UC")!= -1)
    {
      document.write("this is uc browser");
    }
  </script>
</body></html>

UC ブラウザ(デフォルトは UA)を使用している場合、ページには次のように表示されます。

5.0 (Linux; U; Android 2.3.3; zh-cn; samsung Build/GINGERBREAD) UC AppleWebKit/534.31 (KHTML,like Gecko) Mobile Safari/534.31 UC/8.6.0.174
This is uc browser