mazec web clientテクニカルガイドブック

mazec web client

テクニカルガイドブック

第

1 版

（Ver.1.1.7）

● iPad、Safari は、Apple Inc.の商標です。

● その他記載された会社名、製品名等は、各社の登録商標もしくは商標、または弊社の商標です。

● 本書は株式会社 MetaMoJi が作成したものであり、マニュアルの著作権は、株式会社 MetaMoJi に帰属します。 ● 本書の内容は予告なく変更することがあります。

本書では、mazec web client の概要や仕様について説明しています。 本書の記載は、HTML、JavaScript に関する基本知識を持っていることを前提としています。

コードの表記

コードの記述例は、囲みの中に記述します。 ○ 1 行に収まらない場合は、折り返すか、途中で改行して記述する場合があります。 ○

………

1. mazec web client の概要 4

………

1.1. mazec web client とは 4

……… 1.2. システム概要 5 ……… 1.2.1 システム構成 5 ……… 1.2.2 動作の仕組みについて 5 ………

1.2.3 mazec web client の起動と終了 6

……… 2. 利用環境 7 ……… 3. 基本仕様 8 ……… 3.1. mazec が起動する HTML 要素と属性 8 ……… 3.2. 交ぜ書きモード/mazec モード/ソフトウェアキーボードの表示ルール 9 ……… 3.3. 画面の操作コマンド 11 ……… 3.4. 設定項目の機能 12 ……… 3.5. submit 処理の実現方法 13 ………

4. mazec web client 拡張機能 14

……… 4.1. maxlength 属性 14 ……… 4.2. input/textarea の独自属性 14 ……… 4.3. mazec を閉じるための API 17 ……… 4.4. 他のアプリケーションからの起動 18 ……… 5. 制限事項 19 ………

5.1. mazec web client ／ mazec の起動制限 19

……… 5.1.1 HTTP ベースの認証 19 ……… 5.1.2 無効な証明書 19 ……… 5.1.3 入力欄のスクリプト 19 ………

5.2. mazec web client の機能制限 19

………

5.2.1 タブキーについて 19

………

5.2.2 仕様制限値 20

………

5.2.3 mazec web client から別ウィンドウを開くとき 20

……… 5.3. ブラウザを閉じるボタン 20 ……… 5.4. 入力欄のキーイベントの処理 21 ……… 5.5. iPad の回転イベントの取得 21

1. mazec web client の概要

1.1. mazec web client とは

Web アプリケーションに対して、手書き入力環境を実現するブラウザアプリケーションです。iPad 上の キーボードに不慣れなお客様に対して、ストレスのない手書きによる日本語入力環境を提供します。 Web アプリケーションのフロントエンドとして利用することで、キーボードの操作がボトルネックで iPad によるシステム導入に躊躇されていたお客様の問題を解決します。 mazec とは 手書き文字を認識して、さらに推測変換を行う入力システムです。単に読みとしての「ひらがな」を 漢字に変換するだけでなく、漢字と「ひらがな」を交ぜて書いても、適切な漢字の文字列に変換さ れます。これを「交ぜ書き入力」といいます。手書きで漢字を入力するときに、難しい漢字を思い出 せなくても、mazec により、適切な漢字に変換されます。交ぜ書き入力により、ストレスなく、効率よ く、手書きで入力できます。 UIWebView mazec

1.2. システム概要

1.2.1

システム構成

図 2：mazec web client システム構成

1.2.2

動作の仕組みについて

iPad Safari（UIWebView）

●

mazec web client の Web ページ表示領域（UIWebView）を指します。UIWebView とは、iOS が 提供するコントロールの 1 つで、アプリケーション内に Web ページを組み込むためのコントロール です。mazec web client は、この UIWebView を利用して Web ページを表示します。

mazec ● 手書き認識によるデータ入力環境です。手書き認識の他に、ソフトキーボード（オンスクリーンキ ーボード）やテンキーなどにより、データを入力することができます。 Web ページのダウンロード ●

mazec web client 利用者がリクエストした Web ページが返ります。 UIWebView が Web ページを解析し、mazec web client に表示します。

mazec 起動

●

入力フォームの input 要素にフォーカスが当たるか、直接 input 要素をタップしたときに、mazec が起動します。

input 要素への反映

●

mazec web client の編集領域で入力した内容を、input 要素に反映します。

Web ページへのポスト

●

1.2.3

mazec web client の起動と終了

ページ読込時のJavaScript の内容 ● UIWebView によるページの読み込みが終わったタイミングで、ページ内で下記の JavaScript を実 行します。 <JavaScript の内容> --windowオブジェクトにイベントハンドラを追加します。 対象イベント ："focus"と"click" 対象フェーズ ：Capturingフェーズ イベントの対象要素 ● Web ページの下記の要素にフォーカスが当たると、mazec が起動します。 要素名がinputでtype属性が存在しないか、type属性の値が"text" ○ 要素名がtextarea ○ mazec が隠れるタイミング ● 入力領域からフォーカスが離れたタイミングで mazec が隠れます。

2. 利用環境

機種 ● iPad または iPad2 iOS のバージョン ● iOS4.3 以上 ネットワーク環境 ● インターネット接続環境が必要です。

mazec web client で閲覧するページが LAN 上に構築されている場合は、イントラネットへの接続 環境が必要になります。

3. 基本仕様

3.1. mazec が起動する HTML 要素と属性

Web ページ内の入力欄がフォーカスを持つか、入力欄をタップしたときに、mazec が起動します。 対応する入力欄の HTML 要素と属性は下記の通りです。 input要素を指定して、type属性を指定しない ● 例）

input name="username" class="name1" value="" input要素を指定して、type属性に"text"を指定する

●

例）

input name="username" type="text" class="name1" value=""

input要素を指定して、type属性が"search"、"number"、"range"、"tel"、"url"、"email" のい

●

ずれかを指定する

これらの属性が指定された場合には、後述する起動時の mazec のモード、交ぜ書き認識モード、 キーボードモードにしたときのタイプが違うこと以外は、input 要素でtype属性が"text"を指定した ときと同様に、mazec で手書き入力ができます。

例）

input name="username" type="search" class="name1" value="" textarea要素を指定する

●

例）

<textarea name="memo" cols="20" rows="5" wrap="hard" style="memo1"> </textarea>

下記の HTML 要素と属性が記述されている場合は mazec は起動しません。 input要素でtype属性が"password"

●

例）

要素名が_textareaで_readonly属性と_disabled属性が付いている

●

例）

<textarea name="memo" cols="20" rows="5" wrap="hard" style="memo1" readonly ></textarea>

<textarea name="memo" cols="20" rows="5" wrap="hard" style="memo1" disabled ></textarea>

3.2. 交ぜ書きモード/mazec モード/ソフトウェアキーボードの表示ルール

input要素のtype属性の指定項目によって、最初に表示される mazec のモードや交ぜ書きモードの 認識フィルター、ソフトウェアキーボードの表示のデフォルトが変更されます。例えば、数字のみ入 れる入力フィールドに対しては、type属性にnumberを指定すれば、最初にテンキーを表示させるこ とができるようになります。このルールは 1 行入力（input要素）のみに適用されます。 type 属性 mazec のモード 交ぜ書き認識 ソフトウェアキーボード text 交ぜ書き All 標準モード search 交ぜ書き All 標準モード number テンキー 12 数値モード range テンキー 12 数値モード tel テンキー 12 電話番号モード url ソフトウェアキーボード Ab URL モード email ソフトウェアキーボード Ab Email アドレスモード mazec のモード 入力開始時に、このモードで mazec が起動します。 起動後、ユーザーが他のモードに変更することができます。 交ぜ書き認識 交ぜ書きモードにしたときの認識タイプを、自動的に表の値に変更します。 入力開始時に変更するだけで、ユーザーが他の値に変更することができます。 All ：文字の種類を特定せずに認識します。 12 ：数字として認識します。 Ab ：アルファベットとして認識します。 ソフトウェアキーボード ソフトウェアキーボードモードにしたときのキーボードタイプです。 ソフトウェアキーボードは iOS 標準のものであり、入力文字のタイプに合わせて最適化できるような キー配列を表示することができます。ソフトウェアキーボードには、次のタイプがあります。 標準モード（図３：ソフトウェアキーボード 標準モード） ○ ひらがなを入力するキーボード配列になります。 mwc_keyboard属性で、"default"を指定したことと同じになります。 数値モード（図4：ソフトウェアキーボード 数値モード） ○

電話番号モード（図5：ソフトウェアキーボード 電話番号モード） ○ 電話番号を入力するキーボード配列になります。 mwc_keyboard属性で、"phonepad"を指定したことと同じになります。 URLモード（図6：ソフトウェアキーボード URLモード） ○ URL を入力するキーボード配列になります。 mwc_keyboard属性で、"url"を指定したことと同じになります。 Emailアドレスモード（図7：ソフトウェアキーボード Emailアドレスモード） ○ Email アドレスを入力するキーボード配列になります。 mwc_keyboard属性で、"emailaddress"を指定したことと同じになります。 ※ mwc_keyboard属性については、「4.2 inputt/textarea の独自属性」を参照してください。 図３：例）ソフトウェアキーボード：標準モード（日本語５０音） 図 4：例）ソフトウェアキーボード：数値モード 図 5：例）ソフトウェアキーボード：電話番号モード 図 6：例）ソフトウェアキーボード：URL モード

3.3. 画面の操作コマンド

① 戻るボタン 直前に表示したページに戻ります。 ② 進むボタン 次のページを表示します。 ③ ブックマークボタン ブックマークの一覧を表示します。 ④ ホームボタン ホームページに戻ります。 ⑤ ブックマークに追加 表示しているページをブックマークに登録します。登録したブックマークを削除したり、ブックマ ーク一覧での表示位置を移動したりできます。ブックマークのタイトルや URL を編集することも できます。 ※ 登録時は、タイトルのみ編集することができます。URL の編集はできません。 ⑥ 印刷 印刷を行います。 ⑦ 再読込／読み込み中止ボタン 表示しているページを再読込します。 再読込中は、読み込み中止ボタンに変わり、ページの読み込みに時間がかかり過ぎる場合など に、読み込みを中止できます。 ⑧ アドレスバー URL を入力・表示します。 ⑨ タイムスタンプ入力 「ツール」＞「現在日時の挿入」をタップすると、カーソル位置の後ろに現在の日時を自動的 に入力します。

3.4. 設定項目の機能

mazec web client には、下記の設定情報を登録することができます。設定情報は、変更されるかアン インストールを行うまで有効です。

ホームページ

●

ホームページを設定します。また、mazec web client がアクティブ時に、ホームページを表示する かどうか設定します。

タイトル

●

mazec web client 画面のタイトルを変更します。 電話番号文字列のリンク設定のオン/オフ切り替え ● 読み込んだページ内で電話番号と認識された文字列に対して、リンクを設定するかどうか切り替え ます。リンクをタップすると、連絡先に追加することができます。デフォルトはオンです。 Cookie の受け入れ設定 ● Cookie を受け入れるかどうか設定します。 Cookie を消去 ●

mazec web client が受け取った Cookie を消去します。

ページが正常に読み込まれないなどのトラブルが発生したとき、Cookie を消去すると、正常に読 み込まれる場合があります。 キャッシュを消去 ● Web キャッシュを削除します。 mazec の自動学習機能のオン/オフ切り替え ● mazec の学習機能のオン/オフを切り替えます。デフォルトはオンです。 自動学習した変換候補のクリア ● 自動学習した変換候補をクリアします。 前に利用したユーザーの内容を削除したいときに利用します。 単語登録機能 ● 読みとそれに対応する候補を登録しておきます。登録された単語は入力時に mazec の変換候補に 表示されます。よく使う単語、変換しづらい単語、複雑な業界用語や人名などを、あらかじめ簡単 な読みで登録しておき、入力する手間を省きます。

3.5. submit 処理の実現方法

1. mazec から submit を行う HTML 記述

input要素による 1 行入力フィールドが入力対象のとき、下記のような HTML の記述を行うこと でsubmitを行うことができます。

※ 途中でイベントをキャンセルするようなスクリプトを記述していないことが条件です。

1) typeが"submit"または"image"のinput要素がform内に存在するとき

2) typeが"submit"または"image"のinput要素がform内に存在しないときは、form内の１行 入力フィールドが一つだけのとき

2. mazec から submit されない HTML 記述

次のいずれかの HTML を記述している場合は、submit されません。

1) typeが"submit"または"image"のinput要素がform内に存在せずに、１行入力フィールドが 複数存在するとき

2) ページ内のスクリプトで、各イベントをキャンセルするように記述しているとき 3) textarea要素が入力対象のとき

Web ページの入力欄に改行が挿入されます。 3. HTML 記述で mazec の改行キーを判別する方法

"keydown"、"keypress"、"keyup"イベントでは、イベントオブジェクトのkeyIdentifierプロパテ ィに"Enter"の文字列が入ります。例えば、次のようにしてイベントハンドラ内で Enter キーを判別 できます。 例） Enter キーを判別するコード inputElement.addEventListener('keypress', function(ev) { if (ev.keyIdentifier == 'Enter') { // Enter キーが押された } }); 例） jQuery を使っている場合の Enter キーを判別するコード $(inputElement).keypress(function(ev) { if (ev.originalEvent.keyIdentifier == 'Enter') { // Enter キーが押された } });

4. mazec web client 拡張機能

4.1. maxlength 属性

HTML にmaxlength属性が記述されていれば、指定された文字数しか入力欄には反映しません。 例） 入力欄には 25 文字までしか入力しない場合の記述

input type="text" maxlength="25"

4.2. input/textarea の独自属性

input/textareaに次の属性が記述されていれば、mazec の動作を切り替えます。

属性名 値 説明

mwc_mode "recognition" mazecがここで指定したモードで起動します。

起動後にユーザーが他のモードに変更することは許し、 "numpad" input type=""の指定よりもこちらの指定を優先します。 "keyboard"

mwc_recognition "all" 交ぜ書きモード時の文字認識タイプをここで指定したもの に変更します。入力開始時に変更するだけで、その後ユ "kanji" ーザーが他の値に変更することは許し、input type=""

の指定よりもこちらの指定を優先します。 "hiragana" "katakana" "alphabet" "number" "mark"

mwc_nohandle この要素をmazecWeb Clientの処理対象としません。

※ ページ内にスクリプトで制御するなど特別な目的の入力フィー ルドを配置した際に mazec Web Client に邪魔されるのを止め るといった用途を想定しています。

属性名 値 説明

mwc_keyboard "default" ソフトウェアキーボードモード時の、iOSに渡すキーボード の種類を、ここで指定したものに変更します。input "ascii" type="" の指定よりも、こちらの指定を優先します。 * "default"：標準キーボード "numberpunctuation" （UIKeyboardTypeDefault） * "ascii"：アルファベットのキーボード "url" （UIKeyboardTypeASCIICapable） * "numberpunctuation"：数値＋記号のキーボード "numberpad" （UIKeyboardTypeNumbersAndPunctuation） * "url"：URL のキーボード（UIKeyboardTypeURL） "phonepad" * "numberpad"：数値のキーボード （UIKeyboardTypeNumberPad） "namephonepad" * "phonepad"：電話番号のキーボード （UIKeyboardTypePhonePad） "emailaddress" * "namephonepad"：名前 or 電話番号のキーボード （UIKeyboardTypeNamePhonePad） "decimalpad" * "emailaddress"：Email アドレスのキーボード （UIKeyboardTypeEmailAddress） * "decimalpad"：数値＋小数点のキーボード （UIKeyboardTypeDecimalPad） mwc_address 住所入力に最適化された変換を行います。 * 数字(0-9)と「-」（ハイフン）の文字列に対して、最適化 を行います。 * x-x、x-x-x、x-x-x-xのパターンに対応しています。 * 数字の認識率が高くなります。 例1）「1」が「/」に認識されることはありません。 例2）「-」が「～」に認識されることはありません。 mwc_mode 属性の HTML 記述例 交ぜ書きモードでmazec を起動 ●

input type="text" mwc_mode="recognition" テンキーモードでmazec を起動

●

input type="text" mwc_mode="numpad" ソフトウェアキーボードモードでmazec を起動

●

input type="text" mwc_mode="keyboard"

mwc_recognition 属性の HTML 記述例

全ての文字を候補として認識するモードでmazec を起動

●

漢字として認識するモードでmazec を起動

●

input type="text" mwc_recognition="kanji ひらがなとして認識するモードでmazec を起動

●

input type="text" mwc_recognition="hiragana" カタカナとして認識するモードでmazec を起動

●

input type="text" mwc_recognition="katakana" アルファベットとして認識するモードでmazec を起動

●

input type="text" mwc_recognition="alphabet" 数字として認識するモードでmazec を起動

●

input type="text" mwc_recognition="number" 記号として認識するモードでmazec を起動

●

input type="text" mwc_recognition="mark"

mwc_nohandle 属性の HTML 記述例

mazec を起動させない

●

input type="text" mwc_nohandle

mwc_keyboard 属性の HTML 記述例

キーボードモードに切り替えたときに標準モードにする

●

input type="text" mwc_keyboard="default"

キーボードモードに切り替えたときにアルファベットモードにする

●

input type="text" mwc_keyboard="ascii"

キーボードモードに切り替えたときに数値＋記号モードにする

●

キーボードモードに切り替えたときに数値モードにする

●

input type="text" mwc_keyboard="numberpad" キーボードモードに切り替えたときに電話番号モードにする

●

input type="text" mwc_keyboard="phonepad"

キーボードモードに切り替えたときに名前or 電話番号モードにする

●

input type="text" mwc_keyboard="namephonepad"

キーボードモードに切り替えたときにEmail アドレスモードにする

●

input type="text" mwc_keyboard="emailaddress"

キーボードモードに切り替えたときに数値＋小数点アドレスモードにする

●

input type="text" mwc_keyboard="decimalpad"

mwc_address 属性の HTML 記述例 住所入力に最適化された変換を行います。

input type="text" mwc_address

複数属性の同時記述例

mwc_nohandle以外の 3 つはすべて独立しているので、同時に記述することができます。 例）

<input type="text" mwc_mode="keyboard" mwc_keyboard="url" mwc_recognition="alphabet"> このように記述すると、この入力フィールドについては、以下のようになります。 mazec がソフトウェアキーボードのモードで起動します。 ○ そのソフトウェアキーボードはURL に最適化されたものです。 ○ 交ぜ書きに切り替えると、認識モードがアルファベット(Ab）になります。 ○

4.3. mazec を閉じるための API

ページ内の JavaScript から mazec を閉じるための API です。 // mazec を閉じる処理

if (window.MMJmWC && window.MMJmWC.API && window.MMJmWC.API.resetFocusItem) {

window.MMJmWC.API.resetFocusItem(); }

4.4. 他のアプリケーションからの起動

他のアプリケーションから URL を指定することにより、mazec web client を起動することができます。 mazec web client が対応するカスタム URL スキームは、mazecwcです。

URL 書式

以下の 2 つの起動パターンがあります。 mazecwc:

mazec web client が起動します。 mazecwc://<command>?<parameters>

コマンド名とパラメータの形式をとり、mazec web client 起動後に、指定した処理を行います。 <command> ：コマンド名を表す文字列を指定します。 ■ <parameters>：コマンドごとのパラメータを指定します。以下の例のように、 ■ name=valueの形式を、&でつないで指定します。 例） name1=value1&name2=value2&name3=value3 ただし、valueの部分は、スペースやアルファベット・数字以外の文字を、以下の形式に置き換 えてエンコードします。 スペース → "+" に置き換え ○ アルファベット・数字以外の文字 → "%XX"(2 桁 16 進)の形式に置き換え ○ 例） url=http%3A%2F%2Fwww.metamoji.com コマンド一覧 コマンド 説明

go mazec web client 起動後に、パラメータ"url"で指定したページを表示します。 例）

mazecwc://go?url=http%3A%2F%2Fwww.metamoji.com

5. 制限事項

5.1. mazec web client ／ mazec の起動制限

5.1.1

HTTP ベースの認証

HTTP ベースの認証（Basic 認証、Digest 認証）が必要なページを表示しようとしたときは、接続中 の状態のまま処理が止まってしまうときがあります。

5.1.2

無効な証明書

いわゆるオレオレ証明書などのサーバーとの SSL 接続はエラーになり、強制的に接続を進めることは できないため、ページは表示されません。

5.1.3

入力欄のスクリプト

入力欄がフォーカスを失うタイミングで、確定処理などを行うようスクリプトで制御しているページにつ いては、mazec が起動するタイミングでページ内の入力欄がフォーカスを失うため mazec は起動でき ません。 例）Google ドキュメント mazec が起動するタイミングでページ内の入力欄がフォーカスを失うため。

5.2. mazec web client の機能制限

5.2.1

タブキーについて

5.2.2

仕様制限値

管理項目 最大値 ブックマーク数 30個 ブックマークのＵＲＬ文字数 UIWebViewの制限による ブックマークのタイトル文字数 100文字 単語登録数 １００個 単語登録の単語文字数 50文字 単語登録の読み文字数 50文字

5.2.3

mazec web client から別ウィンドウを開くとき

現在の Web ページから別ウィンドウを開くような HTML 記述をしている場合には、新規に mazec web client が起動するのではなく、現在表示されている Web ページを置き換えて、新規に Web ページを 表示します。

例 1）JavaScript のwindow.openで新規ウィンドウを作成する場合 mazec web client は新規に作成されたページを表示します。 <script language="javascript" type="text/javascript" >

function OpenNewWindow(url) {

window.open(url, "self", "fullscreen=yes"); top.window.opener = top;

top.window.open('', '_parent', ''); top.window.close();

} </script>

<input type="button" name="closebtn" onclick="javascript:OpenNewWindow ('http://www.metamoji.com/');" value="画面を開く" >

例 2）a 要素の target 属性で新規画面を作成する場合

<a href="http://www.metamoji.com/" target="_brank">画面を開く</a>

5.4. 入力欄のキーイベントの処理

mazec web client では、入力フィールドとキーボードがダイレクトに接続されていないため、キーイベ ントを利用して処理を行っているサイトについては、入力欄に対してキーイベントが発生しません。 このため、キーイベントを利用して処理を行っている Web サイトでは、キーイベント時の処理が正常 に動作しません。 ※ input要素に対する Enter キーだけは例外です。 例）キーアップイベントで、Ajax を使用して他の入力欄の値を変更するなど。

5.5. iPad の回転イベントの取得

ページ上の JavaScript で、iPad のデバイスの向きを得るwindow.orientationプロパティを参照した 場合、常に 0 が返されます。このため、ページ上の JavaScript でデバイスの向きを正しく判定するこ とはできません。