last update: 2002-02-24
サイト管理者向けの、コンテンツ作成上のヒント集
モバイル端末にもやさしいページを書こう！
今では普通ウェブサイトというと PC や Mac の画面でいわゆるブラウザーを使って見ることが多くて、ページもそういう前提で書かれてしまっていることが多いようです。でもそうしたページであっても、書く側でほんの少し気を配ることによって、PC で見たときの見栄えはそのまま、小さな画面の中でもそれなりに読みやすくすることが、実はできます。
このページでは、そうしたちょっとしたコツのようなものをいくつか取り上げようと思います。いずれも大して難しい話じゃないので、さらっと読んでみると何かいいことあるかもです。
こんなこと書いている自分自身、あんまり威張れるような HTML を書いてるわけじゃないので、「べからず集」みたいなのを作るつもりはありません。それよりはむしろ「じゃあどうしたらいい？」って部分に踏み込んで、とりあえず今の状況で何がやれるかを考えるといったページにするつもりです。
2002-02-24 リンク問題を追加しました。
2002-02-20 機種依存文字についての説明を追加しました。
切り出し情報 | 画像対策 | リンク問題 | 機種依存文字
小さな画面のために - 適切な切り出し情報を
最近すごい勢いで進化した PC の表示能力に比べて、Palm の画面はとても狭く、Palm DOC 形式で読む以上は画像やリンクの情報も失われます。テキストに話を限るとしても、メニューとか過去記事へのリンクとか、狭い画面では無理して読みたくない部分も多いでしょう。
そうした不要な部分をよけて、テキストの中の本当に読みたい部分だけを取り出すのがいわゆる「切り出し」というもので、「ここからここまでが本文ですよ」とといった目印がページの中に埋め込まれていれば、PiloWeb のようなソフトはそれを見て、どこからどこまでが必要な部分なのかを知ることができます。
切り出し情報については、当サイト内でも別のページで少し詳しく検討していますので、とくにページを書く側の方はぜひ読んでみてください。
画像対策 - 代替テキストで画像の説明を
ウェブコンテンツを Palm DOC として読む場合のもうひとつの大問題は、画像が失われてしまうことです。実はこの問題を解決するための方法は、HTML の中にすでに盛り込まれています。
IMG タグの ALTオプションを使おう
HTMLでは画像表示のために IMG というタグを使います。この IMG タグには、画像を表示しないブラウザのための ALT というオプションがあり、このオプションを使って適当な説明のテキストを指定しておくと、ブラウザは画像そのものの代わりにこの文字列を表示することができます。
<img src="gazou.gif" ALT="ここに画像の代わりのテキスト記入">
PiloWeb やうぇぶごむもサーバから見たら一種のブラウザなので、こうした HTML の扱いに対応しています。なのでページを書く側の人は、画像には適切な説明の文字列を ALT オプションをつかって指定しておきましょう。PiloWeb ヘルプの「高度な設定」のページを見ると簡単な説明がありますが、これは HTML の書き方の問題なので、手元にある普通のHTML本やウェブの解説でも参考にできます。
HTML タグを直接いじらなくても、今どきのグラフィカルな HTML エディタならば、GUI モードのままでこの説明テキストは入力することができるようになっています。たとえば僕の使っている Macromedia Dreamweaver 3 だと、説明をつけたい画像を選択して、プロパティパレットの「代替」という項目の欄に、文字を入力するだけです。他のソフトでも、やり方が違うだけで多分おなじことができるはずです。
作業後に確認したければ、コードビュー画面で見てみるか、保存したあとで直接ソースを広げればわかります。そうまでしなくても IE とか Netscape のようなブラウザで表示させて、マウスをその画像の上に持っていってみるという手もあります。 ALT オプションに何か設定されていれば、その文字列が吹き出しみたいな感じでマウスのそばに表示されるのでわかります。
PiloWeb 側のサイト設定
それからもうひとつ。PiloWeb ではこの ALT 文字列の扱いは、サイト単位の設定で ON/OFF 切り替えができるようになっています。今のところデフォルトは OFF なので、こうした説明の文字列を生かしたい場合には、ユーザの側で設定を ON にします。このことは切り出し情報に含めて告知するのが良いでしょう。
ともかくページを書く側と読む側で以上の条件がそろえば、テキストだけになっても適切な説明が読者は得られるので、画像そのものは表示されなくても伝えたいことはある程度伝えることができるでしょう。逆にワザと思わせぶりな説明を入れておいて、読者の見たい気分を煽ってみるのも一興かもしれません。いずれにしても画像なしで読んでる人の存在が意識としてあれば、いろいろに遊べるというわけです。
機種依存文字 - 気づきにくいことですが...
特定のコンピュータでしか使えない文字というのが、実は結構あります。これは Palm や PiloWeb 以前の問題として、ウェブやメールでは使わないほうがいいですね。よく「機種依存文字」などと呼ばれる文字です。これについては読む側は化けちゃった文字を想像するしかできないので、解決は書く側で気をつけるしかないです。
Palm 関係の文章でやってしまいがちなのは、たとえば全角文字で Palm III の「III」、Palm Vx の「V」、シグマリオンＩＩ の「II」などです。カッコでくくった部分は読めなくなっちゃうと意味ないので半角に開いて書いていますが、これを実際に機種依存の Win文字で書いてみると「Palm Ⅲ」「Palm Ⅴx」「シグマリオンⅡ」って感じになります。僕はこの文章を Win で書いてますが、ココの部分はたとえば Mac の人だと化けちゃってて読めないことになってます。自分の Palm では読めていてもクリップしたのが PiloWeb ならば Win で読んでるのと同じなので、つい見過ごしたりします。
他にも同じ理由で丸囲みの数字（たとえば「(1)」のような）とか、「(株)」「(有)」といった組み文字なんかは、ほぼダメと思ったほうがいいみたいです。あと半角のカナ文字も同様のようで。あと罫線文字とか。
これらの文字はもともと各機種ごとに日本語の扱い方がまちまちだったことから生まれたもので、一言で何がダメというのは簡単ではないのですが、 Google あたりを検索してみると、詳しく教えてくれるページがいろいろ出てきます。たとえば
機種依存文字劇場 http://apex.wind.co.jp/tetsuro/izonmoji/
あたりは一目でどれがオーケーでどれがまずいのかわかって便利です。
じゃあどうしたらいい？
結論から言っちゃえば、使わないに限ります。どうしてもこうした文字を使わなきゃいけない場合は実際にはとても少ないです。 「Ⅲ」 -> 「ＩＩＩ」といったふうに別の文字で同じことを表現できる場合がほとんどなので。
昔はデータを別のコンピュータに持っていくということ自体が非常に少なかったので、こうした文字を使って一文字でも短く表現するのは良いことという考えがあったようです。でも今のようにあらゆる種類のコンピュータがつながってしまうと、逆にこうした工夫は、むしろ人を迷わせることも多いでしょう。
それにインターネット時代の実際問題としては、こうした文字を使った文章だと、検索エンジンやブラウザによる検索で、思ったように拾い出してもらえない可能性が大きいです。
とはいっても知らずに使っちゃう場合というのは誰にもありえます。そんなときでもたとえば IBM ホームページ・ビルダーの最新版には、文書内の半角カナをチェックして全角に直してくれる機能があるようです。Macromedia Dreamweaver には、機種依存文字を探し出して変換する拡張機能があるそうです。ふだんこうしたツールを使っている人は、コンピュータに助けてもらうのもいいですね。
そうした機能のないツールを使っている人や手書き派には、たとえばこんなページがあるので、ブックマークしておいて気になったら戻ってこれるようにしておくと役に立つかもしれません。
ブックマークDEお気に入り-機種依存文字チェック http://www.dd.iij4u.or.jp/~sigrudo/izo.html
上のページでは、ブラウザ画面で JavaScript を使って機種依存文字をチェックできるようです。ちょっと試してみましたが、上で紹介したような例は、全部これでチェックできました。ダメな文字は「×」に変わるので、すぐにわかります。
使うまいと思っていても、何がダメなのか分からないと難しいです。今の世の中でこうしたうっかりは一度や二度ならあまり恥ずかしくないような気もしますが、この種のある意味どうでもいいチェックこそ、コンピュータを使って簡単に済ませてしまいたいものですよね。HTML エディタのようなソフトが、こうした機能を早く標準装備してくれるといいなと思います。
リンク - 重要なリンク先には URL を併記
ウェブテキストを Palm DOC にした場合に失われるもうひとつの大切なものが、HTML のハイパーリンク情報です。これは Palm DOC 自体がハイパーリンクの機能を持っていないので、ある意味どうしようもありません。でも何とか別の方法でリンク先の情報を伝えられないものでしょうか。
この辺りのあしらいかたは、取り留めもない日記から学術的な論文まで、ふさわしい方法はさまざまだと思います。参考までに自分の Life with PalmPilot の日記の欄では、こんな感じでやっています。
重要なリンクであれば、文章の中ではあえてリンクにしないで、ひととおり説明したあとで段落を変えて、サイト名を書いてリンクテキストにします。そのとき URL も書き添えれば、ハイパーリンク機能のないテキスト端末で読んでも、まずはこれがリンクだったということがわかるのではと思います。直接飛べなくても、どうしても確認したい人なら、画面からアドレスをひろって見に行けますから。なので読者にぜひ見に行って欲しいサイトへのリンクは、僕はこうするようにしています。たとえばこんな感じ:
ほげほげ株式会社ホームページ http://www.hoge.co.jp
こんな感じになっていると、Palm で読むとき以外でも、たとえばプリンタに出したときにちゃんと URL が残ったりして便利なことがあります。でもやるすぎるとページの中が URL だらけになってごちゃごちゃすることがあるので、これはある意味で両刃の剣かも。
なので、逆に参考程度のリンクは、そのまま読み流せるような文章の中の、単語とかフレーズに対してあっさりと設定するくらいにしています。たとえば、
...ほげほげ製品のホームページはココをクリック、
というよりは、
ほげほげ社の先日の新製品は...
って感じで、会社名の部分だけをリンクテキストにするって感じです。こんな感じであれば、リンクとかクリックとかいった言葉は意識しないで軽く読み流せそうです。最近では検索やディレクトリが便利になって、ユーザもそれに慣れてきています。必要ならば自力で探せるでしょう。こんな感じでリンクでもメリハリをつければ、読むほうの人にも本当におすすめなリンク先が、分かってもらえるのではないかと思います。
以上、スクリーンショットも何もない地味なページではありますが、とりあえず何かあったほうがいいかなと思って書いてみました。他にも触れたいトピックがあるので、暇があればそのうちもう少しわかりやすくしてみるつもりです。ご意見、感想は以下までメッセージください。