【最終回】着メロや待受画面の自作データをiモードサイトで発信
（00/08/25）この連載ではこれまで、iモードメールの送受信をより便利にするテクニックや、着メロデータと待受画面の作成テクニックを紹介してきた。着メロデータや待受画面のGIF画像の作り方を覚えて、iモードを利用することが楽しくなってくると、ほかのiモードユーザーにも自作の着メロデータや待受画面のGIF画像を見せたくなるもの。そこで今回は、前回までに作ったデータを発信するためのiモード向けホームページを作成するテクニックを紹介し、実際にサンプルページを作成してみる。
■ iモード向けホームページを作ってみよう
iモード端末からアクセスできるホームページを公開するには、iモード端末用のCHTML（Compact HTML）と呼ばれる言語に基づいたHTMLファイルをパソコン上で作成し、プロバイダーなどにある自分用のホームページスペースにファイルをアップロードするという手順で行う。しかし、CHTMLの書き方を覚えるのは楽ではないし、ファイルのアップロードも結構面倒な作業だ。そこで今回は、独自のタブメニューからHTMLタグを挿入して手軽にホームページを作成でき、作成したHTMLファイルや自作データのファイルをアップロードするまでを1本だけでできるソフト「HTML Sorcerer」を使って、iモード向けホームページを作成するテクニックを紹介しよう。
CHTMLとは、通常のホームページを作成するときに使用するHTMLをiモード向けに改良したもの。簡単なホームページを作成する程度であれば、HTMLとCHTMLの記述違いはそれほど意識する必要はない。ただし、iモード端末で受信するためには、1ページのファイルサイズは5キロバイト未満で画像はGIF形式のみ、カラー表示や画面の大きさはiモード端末の機種ごとに異なるなど、ホームページ作成前に知っておかなければならないこともいくつかあるので、NTTドコモのホームページで確認しておこう。
□ｉモード対応HTML Version1.0・2.0 タグ・画面イメージ対応表
http://www.nttdocomo.co.jp/i/tag/ところで、ホームページを作成する場合にいきなり「HTML Sorcerer」に向かってホームページを作成していくのではなく、どんなホームページを作成するのかアウトラインを作成し、ページ構成をあらかじめまとめておくほうが、整理されたホームページを作成しやすい。今回作成するホームページでは、トップページにタイトルロゴ画像と、あいさつ用の別ページへのリンク、着メロデータのダウンロード、待受画面へのリンクを盛り込むつもりだ。それに、せっかくだからメールアドレスも書き込んで連載の感想を送ってもらうようにしたい。図にまとめると下記のとおり。
・トップページ（index.html）
｜ ・タイトル画像（title.gif）
｜
＋－1.はじめまして
｜ （あいさつのページ“welcome.html”へのリンク）
｜
＋－2.着メロ
｜ （第3回で作成した着メロデータ“melo.mld”のダウンロード）
｜
＋－3.待受画面
｜ （第4回で作成した待受画面“machi.gif”の表示）
｜
＋－4.メールアドレス
（“mailto”で連載の感想を受け付け）
まずは前準備として、自分のホームページとして公開するファイルをまとめて保存しておくための新しいフォルダを作成して、作成済みの着メロデータや待受画面のGIF画像などのデータファイルをコピーしておこう。タイトル画像は、第4回で紹介した待受画面の画像の作り方と同じ方法で作成できるが、写真を使用する方法以外にも、ユニークなフォントや絵を使ってホームページのタイトルロゴを作成してもカッコいいだろう。ただ、トップページに表示されるタイトル画像が大きいと、iモード端末からこのページを見るたびに読み込みに時間がかかるので、できるだけファイルサイズの小さな画像にするとよい。できあがったタイトル画像もこのフォルダにコピーする。これで前準備は完了だ。
iモード表示機能を備えたHTMLエディター「HTML Sorcerer」
「HTML Sorcerer」は、簡易iモード表示機能を備えたタグ挿入型HTMLエディター。ウィンドウ左側にエクスプローラに似たフォルダのツリービューと、そのフォルダ内にあるファイルの一覧が表示される。ファイル一覧から編集するファイルを選択すると、HTMLファイルがウィンドウ右側のエディター部分に表示され、編集が可能になる。また、エディター部分をさらに分割して、iモード端末から見たような感覚でホームページの表示を確認できる簡易iモード表示機能「i View」を表示させることも可能だ。「i View」では固定幅フォントで表示されないなど、実際のiモード端末と異なる点も多いが、縦横の大きさをマウスで自由に変更でき、iモード端末で表示した雰囲気をつかむことはできる。なお筆者が試したところでは、「i View」の大きさを横150ドット×縦126ドットくらいにすると、横が全角8文字というiモード端末の標準的なサイズとぴったり合うようだ。
実際にiモード向けホームページの作成に入る前に、簡単に手順を紹介しておこう。「HTML Sorcerer」では編集するHTMLファイルをファイル一覧で切り替えられるため、まずはいったんテンプレートのままで、“index.html”や“welcome.html”といったファイル名をつけて保存しておく。次にホームページ中に表示する文字列を入力・レイアウトした後で、ページの移動やダウンロード用にリンクを張る。最後に作成したファイルをホームページスペースのあるFTPサーバーにアップロードする。
「HTML Sorcerer」では、複数のHTMLファイルを切り替えながらホームページを作成できる。あらかじめ作成するページが決まっている場合は、必要なHTMLファイルをすべてテンプレートのまま最初に計画したページ構成に基づいてそれぞれファイル名を付けて保存しておき、すべてのHTMLファイルを切り替え表示できるようにしておくと、リンク設定などページ相互の関係を確認できるため作業を進めやすい。HTMLファイルを保存するには、[ファイル]メニューから[新規]を選び、続けて[名前を付けて保存]でファイル名を入力すると、基本的なタグのみが書かれたテンプレート状態のHTMLファイルができあがる。トップページを編集するときはウィンドウ左側のファイル一覧の“index.html”を選択してエディター部分で表示して編集し、他のページを編集したくなったら、そのページのHTMLファイル名をファイル一覧から選択すればよい。
次にエディター部分でホームページの本文を入力していく。Webブラウザーのタイトルバーに表示させるタイトルを入力するには、テンプレート内に最初から記述されている“タイトルバーに表示されるテキスト”という文字列を書き換えるだけでよいので、HTMLに不慣れなユーザーでも簡単に作成していくことができる。また、“<BODY>”と“</BODY>”の間がiモード端末の画面に表示される部分となる。この部分に新しく文字列を書き込んで、[文字]、[リンク]、[色指定]などのタブで機能を選択すれば、自由に文字のサイズを変更したり、リンク先のURLを埋め込んだり、背景色を変更することができる。例えば、タイトル画像などの画像を挿入する場合には、[リンク]-[画像]でファイル選択ダイアログを開き、ファイルを選択するだけで、エディター部分のカーソル位置にHTMLタグが挿入されていく。
なお、ここでは「はじめまして」などの4つの項目が入った目次を作るが、エディター部分で各項目の間を改行していても、iモード端末で表示すると改行されないので注意。これは[文字]-[改行]で、各項目の間に改行を表す“
”というタグを入力するとiモード端末の表示でも改行されるようになる。HTMLファイルを編集していく途中でiモード端末での表示を確認したくなったら、「i View」の[Browse]ボタンをクリックすると最新の状態に更新される。また、別のページにリンクを張るには、リンクさせたい文字列を範囲選択して[リンク]-[相対的]を選び、ダイアログでリンク先のファイルを選ぶ。この要領ですべてのHTMLファイルを完成させよう。
最後にHTMLファイルや着メロと待受画面の自作データをホームページスペースにアップロードしよう。[FTPConnect]ボタンを押して[FTP接続ダイアログ]ウィンドウを開き、ホームページスペースのあるFTPサーバーの情報を登録すると、メインウィンドウ右側がFTPサーバーのファイル一覧表示に切り替わる。あとはウィンドウ左側のファイル一覧表示からすべてのファイルを選択し、ウィンドウ右側にドラッグ＆ドロップすれば、作成したファイルをホームページスペースに転送してホームページを公開することができる。
【著作権者】masatsu(Masashi Tsugawa) 氏 / Friction River Software
【ソフト種別】フリーソフト
【バージョン】7.60（00/07/05）□Friction River Software
http://ww2.tiki.ne.jp/~masatsu/■ iモードページに絵文字を追加しよう
せっかくiモード向けホームページを作るのだから、iモードの絵文字も使いたい。しかし、iモードの絵文字はWindowsに最初から備わっていないし、入力するには文字コードを調べる必要があって結構面倒だ。ここは手軽にiモードの絵文字を入力できる「Page i」を使おう。
「Page i」は、ウィンドウ上に並べられたボタンを押すだけでiモードの絵文字や記号を入力できるソフト。iモード向けホームページでは、iモードのマークや数字を四角で囲んだ文字など、iモード専用の絵文字を使うことができる。これらの絵文字はHTMLファイル内で“�”といった文字コードで入力すると、iモード端末で絵文字として表示される。このため、文字コードをiモード端末の取扱説明書などで調べて入力する必要があるためとても面倒だ。しかし、「Page i」を使えば絵文字の書かれたボタンをクリックするだけで、とても簡単にHTMLエディターなどに絵文字を入力できる。また、罫線や“★”などの記号も入力することが可能で、絵文字に限らず記号を活かしたホームページの作成もばっちりだ。
【著作権者】いそりす 氏
【ソフト種別】フリーソフト
【バージョン】0.2（00/01/27）□isoris@
http://www.vector.co.jp/authors/VA018010/■ パソコンからiモード向けホームページを閲覧してみよう
iモード向けのホームページを作っているわけだが、すべてをiモード端末で確認するのは、手間とパケット代がかかりすぎる。やはりパソコンから閲覧できれば、URLをキーボードで入力できたり、ページの表示時間を短縮できる。そこで、iモード向けホームページをパソコン上からiモード端末とほぼ同じ感覚で閲覧できる「iモードＴｏｏｌ 改」を紹介しよう。
「iモード Ｔｏｏｌ 改」は、iモード用のページをiモード端末とほぼ同じ感覚で閲覧できるWebブラウザー。iモード対応ホームページはIEやNetscapeなどの通常のWebブラウザーでも閲覧できるが、画面の大きさが違ったり、絵文字が表示されないなど、実際にiモード端末でどのように表示されるかを把握しにくい部分もある。「iモード Ｔｏｏｌ 改」は、iモード端末の画面とほぼ同じ大きさの画面でiモード向けホームページを閲覧することができ、絵文字も表示できるため、iモード端末から見た場合とそれほど変わらずに閲覧することが可能だ。また、iモード端末の数字ボタンを押して、その番号が割り当てられたリンクにジャンプする“アクセスキー”にも対応している。そのほか、自分が作成したiモード用ホームページを全て閲覧するとパケット代がどのくらいになるかを調べることもできる。
【著作権者】西村 誠一 氏
【ソフト種別】評価版フリーソフト
【バージョン】初期プロトタイプ版 v0.1□パソコン無料サポートとオンラインソフト
http://www.asahi-net.or.jp/~tz2s-nsmr/最終回ではiモード対応ホームページを作成するテクニックを紹介した。今回紹介した方法はいままでの特集で作られた着メロデータや待受画面の画像などの自作データを公開するだけだったが、今回紹介したソフトをさらに使い込めばもっと多くの情報も公開することができるだろう。
私が作成したサンプルのホームページは下記URLで参照できるので、ぜひiモード端末で見てほしい。なお、iモード端末でホームページを見る場合は、URLをパソコンからiモード端末にメールで送信すると、iモード端末でURLを入力する手間を省くことができる。（編集部注：待受画面と着メロデータは山崎 真裕氏が作成したものです）
http://www.forest.impress.co.jp/article/2000/08/25/imode5/今回までの5回の連載で、オンラインソフトとiモード端末を組み合わせたテクニックで便利なiモード端末がいっそう便利になったことだろう。さらに、テクニックを見つけたり、他のオンラインソフトを探して使っていけば、iモードを体の一部のように使いこなすことができるようになることまちがいなしだ。
（山崎 真裕）
