HTML5 で UTF-8 を使用する場合の注意事項

今までホームページの文字コードは主に Shift_JIS を使ってきたのですが、HTML5 への切り替えに当たり、推奨されている UTF-8 にした方がいいのか迷っていました。

しかし、古いコンピューターで表示したときに文字化けの可能性があることを考慮すると、今まで通り Shift_JIS のままの方が無難ではないかと思い、とりあえず、トップページは Shift_JIS のままにしておきました。

先に HTML5 で作成した Tarot FILES #100 以降の記事は実験的な試みもあったので当初から UTF-8 を使用していました。いくつかのブラウザやスマートフォンでの表示も確認しましたが、特に問題はないようでした。

ところが、一つだけ問題があることに気づいてしまいました。

HTML5 では文字コードの指定に、ヘッダーのメタタグで以下のように指定することができます。

<meta charset="UTF-8">

この書式を認識できないブラウザが存在し、その場合にはデフォルトの文字コードで表示されることになります。たいていは Shift_JIS としてエンコードを試みることになるかと思います。その場合にはかなりの頻度で文字化けすることになるでしょう。
（サーバーの設定で対処済みの場合もあります。）

実際に、Lynx というテキストブラウザで確認してみたところ、文字化けしてしまいました。
そこで、文字コードの指定を旧来の

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

に戻してみたところ、Lynx でも文字化けせずに表示することができました。

まだまだ文字化けの可能性が残されている以上は、旧来の書式を使い続けるのが無難といえそうです。

ちなみに、旧来の書式であっても HTML5 の仕様としては問題ないはずです。

ドキュメントタイプが最新の HTML5 であっても、文字コードさえ適切に認識できればたいていのブラウザで問題なく表示は可能です。先の Lynx でも、IE4 でも Netscape Communicator 4.7 でも問題はありません。むしろ、記述が単純化された分、認識率が高まったといってもいいくらいです。

ちょっと気になるのは、推奨されている UTF-8 以外の文字コードを使用した場合に何か問題がおきるかどうかということですね。Shift_JIS でも問題がないのなら、無理をして全てのページを UTF-8 に書き換える必要もないと思うのですが。

詳しい人がいたら教えてください。

オンラインステータスを表示する Skype ボタン

※（追記: 2015年6月12日）以下の方法は完全に使えなくなってしまったので、新たに「Skype のオンラインステータスをウェブサイトに表示する方法」という記事で解決方法を書きました。

---

Skype のオンラインステータスをウェブサイトに表示するボタンがあるのですが、現在はサポート対象外となっていて、公式サイトでの入手はできなくなっています。

この Skype ボタンは現在でも使用可能で、必要ならば以下のようなタグを自分のサイトに埋め込みます。

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:YourSkypeName?chat"><img src="http://mystatus.skype.com/smallclassic/YourSkypeName" style="border: none;" width="114" height="20" alt="ログイン状態"></a>

使用する場合は "YourSkypeName" の部分を自分の Skype 名に書き換えてください。

最近までずっとこの方法で使ってきたのですが、呼び出す JavaScript が重かったりするのが気になっていたので、上記の JavaScript 部分は削除してしまいました。JavaScript がなくても問題なく使えるようでした。

オンラインステータスはほぼ正確に表示されていましたが、ボタンの画像はブラウザのキャッシュから呼び出されてしまうので、2 回目以降の表示では正確なオンラインステータスが表示されないという問題が残されていました。

ブラウザの更新ボタンを押せばオンラインステータスの画像も最新のものに入れ替わるのですが、それを訪問者に強制するわけにもいかないので、できればサイト側で何とか対処したいところです。

そこで、対応策をあれこれと調べてみた結果、埋め込むタグを以下のようにすることで解決できました。

<a href="skype:YourSkypeName?chat"><img src="http://mystatus.skype.com/smallclassic/YourSkypeName" style="border: none;" width="114" height="20" alt="ログイン状態" id="mystatus"></a>
<script type="text/javascript">
var nowdate = new Date();
var stamp = nowdate.getTime();
document.getElementById('mystatus').src="http://mystatus.skype.com/smallclassic/Apollo-Tarot-Divination?"+stamp;
</script>

JavaScript で後から画像を入れ替えているのですが、その際に画像の URL を変更しています。

オンラインステータスは正確に表示されるようになりましたが、この機能はすでにサポート対象外となっているので、いつかは完全に使えなくなる日が来てしまうかもしれません。

とりあえず、使えるうちは使わせてもらいます。

こんなに便利な機能なのに、何でサポートが終了しちゃったんでしょうね？

現在 Skype で公式に配布されているボタンはオンラインステータスの表示はできないシンプルなものだけとなっています。

トップページも HTML5 に書き換えてみました

先日は Tarot FILES を試しに HTML5 形式にしてみた（FILES HTML5）ところ、なかなかいい感じだったので、ホームページのトップページも書き換えてみることにしました。

トップページははるか昔に Microsoft の Frontpage Express とかいう HTML エディターで作成したファイルをちょこちょことテキストエディターで修正しつつ使い続けてきたので、ソースはつぎはぎだらけでぼろぼろでした。

一応、古くは Netscape 4.x や IE4.0、テキストブラウザの Lynx、携帯（ガラケー）、ドリームキャストでの閲覧まで配慮した作りになっていて、そういった古いブラウザ向けのタグやらスタイルシートやらを取り除くことができずにいたのです。

それでもまあ、最近は IE8 以上のブラウザを想定していればほぼ問題はなさそうだったので、HTML5 対応ついでにソースの大改修を行うことにしました。

ページのデザインはほとんどがテーブルレイアウトで、文字修飾にはフォントタグを使って大きさや色を指定していた始末で、それらを排除してほぼ全てを外部スタイルシートで管理するようにしました。

今までテーブルレイアウトでデザインしていたものは DIV 要素を用いてブロックレイアウトで代用し、ほぼ完全に再現することができました。ぱっと見は、以前とどこが変わっているのかわからないくらいですが、中身は骨組みから何から全てごっそりと書き換えてあります。

ページ内の構造そのものが以前とはまったく異なるものとなっています。

一応、記念に修正直前の HTML ファイルも保存しておきました。修正が完了したファイルも一緒に保存しておいたので、興味のある方は以下の場所からダウンロードしてソースを覗いてみたりしてください。

• 2013年6月11日以前の index.htm
• 2013年6月12日時点の index.htm

以前のページの一部を撮影したスナップショットはこんな感じ

• Facebook にたまたま保存してあったスナップショット

FILES HTML5

　久々に占いの実例として Tarot FILES #100 をアップしたのですが、このファイルの作成に関してはいろいろと問題があってかなり手間取ってしまいました。占いの内容には何も問題はないのですが、文書管理上のちょっとしたことです。

　まず、番号の件。もともと二桁以内のファイル数を想定して番号付けをしてきたのですが、100を超えて三桁になると何かと面倒なことになってきます。ファイル名でソートしたりするときにうまく並んでくれなかったり、見た目がいまいちだったりするので気持ち的にすっきりしません。ファイル管理の利便性の問題もありますが、一つのディレクトリにあまりにもたくさんのファイルを詰め込みすぎるのも良くないかもしれません。

　そこで、100番に到達したのを機に、新たにディレクトリを作ることにしました。100番台は「1」とし、さらにその中に下二桁の数字のディレクトリを作ります。100番なら /FILES/1/00/ となります。一つのファイル（記事）に一つずつのディレクトリを作ることになります。200番台ならディレクトリは「2」となり、想定では900番台まで対応可となります。1000番以上のことは考えてません。

　ファイル単位でディレクトリでまとめたのは、今回のファイルが複数の文書で構成されているのもありますが、一つの事例を一つのフォルダで管理するという考え方は本来の文書管理のあり方でもあると思うので、合理的になったといってもいいかもしれません。

　次に、文書形式の件。これまでは HTML 4.01 Transitional でした。結論から言うと、今回から HTML5 に切り替えることにしました。

　最近はスマートフォン向けにサイトを少しずつ修正しているのですが、その過程で文書形式が HTML 4.01 Transitional だと少し面倒なことがありました。実のところ、問題はスマートフォン対応にあるというよりも、パソコン用の Internet Explorer での表示の問題です。パソコンでもスマートフォンでも問題なく閲覧できるようなページを作ってみても、IE での表示に違和感がでてしまったりするのです。これは、IE が互換モードで表示しているためで、いろんな部分で寸法のずれなどが生じてしまうのです。

　そこで、IE でも標準モードで表示できるように、XHTML 1.0 Transitional に切り替えることも考えてみたのですが、どうせなら最新の HTML5 にしてみようということになったわけです。

　HTML5 はまだ正式に勧告されているわけではないようですが、ほぼ規格も定まり、多くのブラウザで対応が進んでいるようです。すでに大手サイトでも HTML5 を採用しているところは増えているようです。これからの主流となるのは間違いなさそうです。旧バージョンの IE でどの程度対応できるのかは不明です。

　書き方は HTML 4.01 とほとんど変わっていないので移行は簡単です。ただ、ちょっとしたルールの違いがあったりするので、その辺をきちんと調べているうちに時間がかかってしまいました。

　正式勧告前の規格なので、本来なら「アポラボ」で検証を重ねてから本サイトでの採用とすべきところなのですが、今回は少し時代を先取りして対応を早めました。

　Tarot FILES のように文章がメインのサイトでは HTML5 にするメリットはほとんどないと思いますが、時代の流れにあわせて文書形式を変化させてゆくのも悪くないのではないでしょうか。

　思えば十数年前、このコンテンツを公開した当初は Microsoft Word 95 で文書を作成し、そのまま HTML 書き出し機能か何かで出力したファイルをウェブサイトにアップロードしていたのでした。その当時は文書形式が何かなんてことは考えもしませんでしたが、その後は時代の流れにあわせて何度も修正を重ねつつ、100回目の投稿を迎えるにあたって HTML5 という新規格の採用に至ったわけです。

　昔のファイルはほとんど修正してしまったので、今はその面影はまったく残っていませんが、時代を反映する FILES というコンテンツでもあるので、今後は後から手を加えることなく、公開当初の形式のまま残しておくのも面白いかもしれませんね。

スマホファーストの呪縛から解放される日は来るか？

　旧式の携帯電話（フィーチャーフォン / ガラケー等）からスマートフォンに機種変更して以前よりも生活が豊かになった人って少ないんじゃないかな？

　経済的にはむしろ貧しくなっている人の方が多いでしょ？

　以前の携帯なら月々の支払いが 1000 円程度で済んでいたところを、スマホにしただけで 7000 円くらいになるわけでしょ？

　以前の 7 倍、あるいはプラス 6000 円の出費ということになるけど、増えた出費の分を取り戻せるだけの価値を見いだせてる人なんてほとんどいないんじゃないかな。

　ゲームができるとか、ネットができるとか、○○ができるとか、なんやかんやと確かに出来ることは増えただろうけど、それってどれを取ってみてもあえて携帯電話でやらなきゃならないようなことでもなさそうだし、ゲームやら何やらとアプリを購入してさらに出費が増えるとしたら生活はますます圧迫されてしまう。その分世の中の経済が発展するというポジティブな考え方もあるけれど、その前に個人の生活はどれだけ豊かになっているのかと。

　気づいたら肝心の電話機としての機能はほとんど使ってないとか、電話機としては使いにくいとか、電話しようと思ったときには電池切れで使えなかったりとかで、スマホが電話である意味がほとんどなかったりして。まあ、本末転倒というか何というか……。

　結局のところ、タブレット PC があればすべて解決なんだよね。

　実際にタブレット PC もスマホの次のブームのような感じで普及してきているみたいだし、そろそろ多くの人が気づき始めるんじゃないかな。

　「スマホって必要ないよね」って。
　それも、新しい携帯という意味ではなく、すでに過去のものとして。

　通信回線としても Wi-Fi（公衆無線LANサービス等）が徐々に普及しつつあって、わざわざ高額の携帯電話回線を使わなくても街中で安価に、あるいは無料でインターネットができる環境が整い始めている。タブレット PC と Wi-Fi さえあればスマホでできていたことはほとんどできてしまうから、結局、携帯電話は電話さえできれば良いということになって、スマホの存在意義が全くなくなってしまう。

　スマホ・ファースト（スマートフォン第一主義？）とかいうスローガンを掲げてがんばる IT 企業も増えてるみたいだけど、その運営方針というか、ある意味宗教みたいなものが崩壊するときも近いんじゃないかと感じる。

　電話会社を儲けさせることがいかに馬鹿馬鹿しいかということに気づいたとき、次に掲げられるスローガンは「タブレット PC ファースト」とかになるのかな？　まあその辺が妥当だろうね。

　そういう意味では、主力 OS をタブレット向けに早々にモデルチェンジしたマイクロソフトという会社には先見の明があったともいえる。もっとも、手のひらサイズの Windows PC が発売される気配は今のところ感じられないのだけど。

　タブレット PC はサイズが大きいからスマホのように誰もが携帯できるわけではないと思う人もいるかもしれないけど、タブレット PC のサイズが必ずしも大きいとは限らない。その好例が iPod Touch であったり iPod nano だったりするわけでしょ。携帯性という点ではすでに iPhone を凌ぐ製品が存在していることになる。スマホ以外の選択肢は現時点でも十分に確保できているということになる。

　もはや携帯電話にはスマホとしての機能は不要であり、せいぜいテザリングをするための親機として使えれば十分という時代が来るかもしれない。

　いつまでも携帯電話会社の奴隷であることを良しとせず、そろそろ目を覚まして、自分に本当に必要なものは何なのかということを考えて、使うべき道具を自ら選ぶようにした方がいいんじゃないだろうか。

　そんな奴隷解放運動に目覚める日は、来るかもしれないし、来ないかもしれないが。

VISAカードで心当たりのない引き落としが！

楽天デビットカードの明細を見ると、心当たりのない引き落としがありました。金額はわずか -15 円です。高額なら不正引き落としも疑うのですが、15 円っていったい？

わずか 15 円とはいえ気になるので、いろいろ調べてみたところ、どうも海外で購入した場合の為替レートが関係しているようです。

たしか、何日か前に通貨の設定を US ドルで Skype クレジットを 10 ドル分購入しました。そのときのレートですぐに 1000 円ほどの引き落としがあったのですが、どうも、決済のタイミングの都合上、レートに変動があるとその分の追加の引き落としや入金があるみたいなのです。円安が進めば余分に引き落とされることになるでしょうし、円高になれば逆に入金されていることもあるようです。

外貨で買い物をするときにはこういうこともあるんですね。

今回はたまたま 15 円のマイナスになってしまいましたが、何となく原因がわかって安心しました。

PureVoiceでQCPを再生

私の携帯電話機は au の F001 という機種で、ボイスレコーダーが付いています。使用頻度もそれなりに高く、ボタン一つで即座に起動するように設定してあります。

自転車で移動中とかにふと何かを思いついてメモしようと思ったときには音声で録音した方が早いし、寝起きに見た夢の内容を記録するようなときでも携帯に文字打ちしているうちに忘れてしまったりするのでボイスレコーダーを使った方が確実です。いつも手元にある携帯で素早く録音できるのはとても便利です。

録音した音声ファイルは後で携帯で再生して聞くのですが、そのままメールに添付して自分のパソコンに送ることもあります。パソコン上で文字に起こすときにはその方が便利だからです。

ボイスレコーダーの音声ファイルの形式は拡張子が QCP なのですが、一応 RealPlayer というソフトで再生することはできます。ところが、RealPlayer の対応が不十分なのか、たまに再生できないファイルもあります。というか、かなり高い確率で再生できないので、これはちょっと使い物にならないなぁと頭を悩ませていました。

そこで他の再生方法はないものかとネットで検索して情報を探してみると、「オンラインオーディオコンバーター」というウェブサイトでファイル形式を変換できることがわかりました。ここで WAV ファイルなどに変換してダウンロードすればとりあえず再生して聞くことはできるようになりました。

しかし、ファイルをその都度アップロードして変換してダウンロードしてという手間がかかるので、あまり効率のいい方法とはいえません。

他の方法を探してみると、実は検索結果の大半を占めている情報ではあったのですが、「PureVoice」というソフトがあるようです。パソコンにインストールして使う再生ソフトです。

できればパソコンに負担をかけるようなソフトウェアのインストールは避けたかったのですが、ほかに選択肢もあまりなさそうだったので、仕方なくインストールしてみることにしました。

PureVoice は非常にシンプルなソフトで動作も軽く、特にパソコンに負担をかけているようなこともなさそうです。早速再生できなかった QCP ファイルを再生させてみたところ、無事に音が出て聞くことができました。WAV 形式との相互変換も簡単にできます。また、録音機能も付いています。Windows 標準のサウンドレコーダーに QCP 再生機能が付いたようなものだと思えばいいかもしれません。

パソコンにある音声ファイルを PureVoice で QCP 形式に変換して、携帯にメールなどで転送すれば携帯で聞くこともできました。ただし、音質はかなり悪いので音楽などには向いてません。おそらくは、ボイスレコーダーの用途に最適化されたファイル形式なのだと思います。

au の旧式の携帯（フィーチャーフォン / ガラケー）で使われている QCP などというファイル形式の需要は今やほとんどないのかもしれませんが、当面はこの PureVoice を活用していこうかと思います。

実は、PureVoice をインストールした後で気がついたのですが、Windows Media Player には 「 mplayer2.exe 」という隠れ機能のようなソフトが付いていて、このソフトで QCP ファイルを再生してみたところ……普通に再生できてしまいました。何だよ！　こんな情報どこにも見当たらなかったぞ。もうちょっと早く気づいていたら……。

というわけで、PureVoice をインストールする必要はなかったみたいです。まあでも、ファイル形式の変換とかには便利なので、このまま PureVoice をインストールしておいても損はないかと。