台湾華語を勉強するにあたり、注音符号を覚えるところから始めてみました。台湾華語っていうのは中国語（北京語）の台湾弁みたいなもんです。なので大陸でも通じるはず。
注音（Zhuyin）と拼音（Pinyin）
いわゆる中国語の発音記号はアルファベットを使ったピンインで表現しますが、台湾の中国語は注音という漢字の一部を記号化したもので表現するそうです。日本語の仮名文字と同じですね。
全部で37文字あって、そのうち子音が21文字、母音が16文字です。最初の４文字を取って「ㄅㄆㄇㄈ（ボポモフォ）」とも言います。
これをおおよそ2週間ほど掛けまして、どうにか形を覚えました。発音は怪しげ。
注音符号をランダムに表示する
どうにか覚えたものの、順番に並んでいるからわかるのであって、ランダムに現れたらわかるかどうか。。。
というわけで、phpでボポモフォをランダムに表示するコードを書いてみました。
最初に注音を表示して、枠内をクリックするとピンインを表示します。
モバイルアプリっぽくする
iPhoneやAndroidでは、通常のアプリに加えてWebアプリというものも使えます。
通常のアプリはiPhoneならSwift、AndroidならJavaを使って作り、それぞれのストアの審査を通過した上でスマホ上で使えるようになりますが、Webアプリはhtmlで書いたものをサーバー上に公開するだけで使えるようになります。
で、iPhoneならSafariでアクセスした後、ホーム画面にブックマークしておくとあたかもネイティブアプリのように振る舞います。
ポイントは３点。
フルスクリーンモードにする
<meta name="apple-mobile-web-app-capable" content="yes">
<head>〜</head>セクション内に記述することでアドレスバーやフッタメニューが表示されなくなるので、パッと見Webサイトに見えません。
リンクのタッチ検出を許可する
<body ontouchstart="">PCなどの場合、リンクテキストなどの上にマウスカーソルが置かれたことをhover擬似クラスで検出して、cssで色々な変化をつけることができます。
スマホの場合はタッチなのでリンクが押されたことを検出するactiveという擬似クラスを使います。このactive擬似クラスを有効にするために、<body>あたりにontouchstartを設定しておきます。
文字選択を無効化する
* {
-webkit-user-select:none;
-webkit-touch-callout:none;
}リンクのタッチ、すなわち押しっぱなしの状況を検出する場合、文字や画像を選択してしまうという問題があります。さらに長押しをしているとPCのコンテキストメニューに相当するメニューが表示されてしまいます。
これらはcssでキャンセルすることができます。
選択の可否がuser-select、メニューの表示非表示がtouch-calloutによって制御されます。現在iPhoneのSafariではベンダープリフィクスの-webkitが必要です。
というわけで注音拼音チェックアプリもどきの完成です。
iPhoneのホーム画面にブックマークしてから使ってみてください。