簡単ケータイサイト制作

■このページでは「Windowsの基本操作は何とかできるけど…」という程度の方でも、簡単に費用をかけずにケータイサイトを作る方法を紹介します。やってみれば意外に簡単！HTMLを少しでも知っていればもっと簡単！興味のある方は是非トライしてみてください。

■まずは右のQRコードをケータイで撮影してサイトにジャンプしてみてください。QRコードの意味を知ることが、ケータイサイトを作るための最初の一歩です。

■QRコードの読込み方法は、機種によって多少は異なりますが、基本的にはカメラを選択すると、そのメニューの中に、「バーコードリーダー」というような項目があると思います。これを選択すると、カメラが「バーコードリーダー」の状態で起動します。ここでパソコン画面のRQコードがケータイ液晶画面の中に納まると、自動的にシャッターが下り、QRコードを読込みます。

■さて上記QRコードで撮影したページをケータイで見てみると、このページはここと同じページです。つまりパソコンで表示されているページがケータイでも見られるということになります。

■よくケータイサイトの作り方を説明している書籍やウェブサイトではXHTMLで作ったほうが良い。またはi-modeHTMLを使うように。というようなことが書かれています。しかしHTMLの基本的な部分はパソコン用とほとんど同じです。

■ではさっそく作ってみましょう。まずWindowsの「メモ帳」を起動してください。「すべてのプログラム」→「アクセサリ」の中にあります。「メモ帳」を起動すると真っ白な画面が出てくるので、そこに以下の文字を英数半角で打ち込んでこださい。

<html>
<head>
<title></title>
</head>
<body text=00 link=00 vlink=00>
</body>
</html>

■次に、以下のように日本語を追加します。日本語を入れる位置は、以下と同じ場所にしてください。もちろん日本語の内容は自由です。

<html>
<head>
<title>私のプロフィール</title>
</head>
<body text=00 link=00 vlink=00>
このページでは私のプロフィールを紹介します。
</body>
</html>

■このへんで一旦保存しておきましょう。メモ帳のメニューの「ファイル」から「名前を付けて保存」を選んで、「ファイル名」のところを「index.html」としてデスクトップに保存してください。「index.html」は必ず英数半角で。最初に作る（最初にアクセスさせる）ファイルの名前は必ず「index.html」としてください。これは決まり事です。そしてこの「index.html」がトップページになります。

■ここで、作ったファイルを入れておくフォルダも作っておきます。デスクトップに新規フォルダ「web」を作ります。この時もフォルダ名は必ず英数半角で。そして上記「index.html」をこの「web」フォルダの中に入れます。ここで保存されたファイルのアイコンはInternet Explorer（以下IE）の青いeマークのものになります。

■そしてフォルダ内のメニュー「ツール」から「フォルダオプション」を選び、そこで出てきたウインドウ内の「表示」タグを選び、「登録されていない拡張子は表示しない」というところのチェックを外します。これをやっておかないと「index.html」という名前のファイルが「index」としか表示されなくなります。

■では「index.html」をダブルクリックして開いてみましょう。IEが起動して、下図（真ん中）のような画面が出ます。ケータイを想定してIEのウインドウの幅を狭くしてみましょう。狭くする寸法は、だいたいの雰囲気でいいです。

■IEのメニューの「表示」から「ソース」を選ぶと、最初に作った「メモ帳」のファイルが表示されます。ここから先は、このメモ帳の画面に追記してメモ帳を「上書き保存」、その後IEを「更新」して追記内容を確認していきます。

■IEの画面では、メモ帳の「index.html」に書いた<title>と</title>の部分が下図「A」の部分に表示されます。これはパソコンの画面での表示されますが、ケータイの画面ではどこにも表示されません。ただし検索するときに必要なので必ず書いておきましょう。また<body text=00 link=00 vlink=00>と</body>の間に書いた部分が本文になります。

■では本文をもう少し書き足してみましょう。

<html>
<head>
<title>私のプロフィール</title>
</head>
<body text=black link=blue vlink=green>
私のプロフィール 
このページでは私のプロフィールを紹介します。以下のメニューから項目を選んでください。
 
◎<a href="history.html">おいたち</a>
 
◎<a href="hobby.html">趣味</a>
 
◎<a href="family.html">家族</a>
 
<center>
<a href="tel:090-0000-0000">電話待ってます。</a>
</center>
</body>
</html>

■これをIEで開いてみると、右図のようになります。これだけでもだいぶケータイっぽくなりましたね。うまくいかない場合は、もう一度メモ帳に書いた内容を1文字ずつ確認してみましょう。

■では追記した内容を1つずつ説明していきます。

■text=black は本文の文字の色です。link=blue はリンクしている部分の文字の色です。vlink=green は一度リンクした文字の色です。どれも=の後ろに英語で色の名前を書くだけです。ほとんどの色の名前は対応しています。

■ は改行の意味です。 と、2つ続けることで、改行して一行空けるという意味になります。

■<a href="xxx.html">はリンクです。この記述の後ろに来る文字をクリックすると、そのファイルにリンクします。xxx.htmlがリンクする書類の名前になります。ここでは「おいたち」のファイル「history.html」にリンクします。最初のファイルは「index.html」と名前が決まっていますが、それ以外のファイル名は全て自由です。自分で分かりやすいファイル名にしてください。ただし必ず英数半角にしなければいけません。

■</a>はリンクする文字が終わるという意味です。

■<center>と</center>の間の部分は、画面の中央に配置されるという意味です。この間の文字は全てセンター振り分けに配置されます。

■<a href="tel:090-0000-0000">の=の後ろに電話番号を書くと、<a href="tel:090-0000-0000">と </a>の間の文字をクリックすることで、その電話番号に電話をかけることができます。これはケータイだけの機能で、パソコンでは表示はされますが機能はしません。

■では残りの3つのファイルを作ってみましょう。基本的にはindex.htmlをコピペして、同じものを作り、ファイル名を書き換える。その後、中の記述を書き直していくと早いでしょう。まずは「history.html」を以下のような感じで作ってみましょう。

<html>
<head>
<title>おいたち</title>
</head>
<body text=black link=blue vlink=green>
おいたち 
・昭和60年、神奈川県横浜市に生まれる 
・平成3年、横浜市立第一小学校入学 
・平成9年、横浜市立港中学校入学 
・平成12年、東京都立東西高校入学 
・平成15年、文化文明大学情報学部入学 
・平成19年、株式会社海山興産入社 
◎<a href="index.html">戻る</a>
</body>
</html>

■最後の<a href="index.html">戻る</a>はトップページに戻る部分です。index.htmlにリンクしています。

■続いて「hobby.html」を作りましょう。

<html>
<head>
<title>趣味</title>
</head>
<body text=black link=blue vlink=green>
趣味 
◆サッカー：好きなチームはACミラン 
◆音楽鑑賞：好きなアーティストはB'z 
◆映画鑑賞：最近見て感動したのは「パイレーツオブカリビアン」 
◆読書：教科書以外は読みません 
◆料理：食べるだけで料理はしません 
◎<a href="index.html">戻る</a>
</body>
</html>

■続いて「family.html」も作りましょう。

<html>
<head>
<title>家族</title>
</head>
<body text=black link=blue vlink=green>
家族 
＊文太郎：父・50歳・一応社長 
＊リンダ：母・47歳・本人は30歳ぐらいのつもり 
＊たみ子：姉・23歳・毎年彼氏に振られているようです 
＊ボス：犬・5歳・名前のわりに弱気 
＊清十郎：カメ・105歳・オスかメスか未だに分かりません 
◎<a href="index.html">戻る</a>
</body>
</html>

■新しく作った3つのファイルは全て同じフォルダ「web」に入れます。そしてここで一度動作確認をしてみましょう。まず「index.html」を開き、トップページを表示させます。IEの画面上で、他の3つのファイルにリンクして、それぞれのページから「戻る」でトップページに戻れればOKです。

■さて、いまのところ文字ばかりなので画像の入れ方も説明しましょう。まず用意する画像ですが、解像度は72dpi、サイズは幅が320ピクセル程度が丁度良いです。といってもよく分からないという方は、以下のような画像を用意してください。

ケータイで撮影する写真の場合、壁紙サイズ、待ち受け画面サイズなどに設定して撮影した写真
デジカメで撮影する場合は、サイズは一番小さいもの、画質は一番粗いものに設定して撮影した写真
スキャナで取り込む場合は、解像度を72dpiに設定。原稿サイズで幅10cm以内にトリミングした部分
いずれにしても画像が大き過ぎるとケータイでは読込めないことが多くなります。またファイル形式はJPEG、またはJPGとなっていることを確認してください。ファイル形式が分からない場合は、以下の手順※を参考にしてください。

■ここでは最も簡単なサイズ修正方法を説明します。その前に、WordやExcelでも画像サイズの調整は可能では？と思う方もいらっしゃるかもしれませんが、WordやExcelでは画面上での見た目のサイズは変わりますが、元のデータサイズは変わりません。ですので画像ソフトを使ってきちんとサイズを変更する必要があります。以下で説明するのはWindowsに最初から入っている「ペイント」というソフトを使ったものです。「ペイント」は、「すべてのプログラム」→「アクセサリ」の中にあります。

■修正したい画像を「ペイント」で開き、メニューの「変形」から「伸縮と傾き」を選びます。

■水平方向、垂直方向に、それぞれ縮小したい数値を％で入れます。必ず同じ数字を入れるようにしてください。見た目の実測で、ケータイの画面の表示されたときより、やや大きめぐらいを目安としてください。正確である必要はありません。

■縮小したら「上書き保存」します。元の画像データがjpg形式でない場合、または※形式が分からない場合は、「名前を付けて保存」を選び、「ファイルの種類」を「JPEG」にしてから保存します。

■保存した画像データは、他のファイルと同じくフォルダ「web」の中に入れてください。ファイル名は英数半角で好きな名前でかまいませんが拡張子（.以下の部分）は英数半角で「.jpg」と書き直してください。

■ではトップページに画像を追加してみましょう。

<html>
<head>
<title>私のプロフィール</title>
</head>
<body text=black link=blue vlink=green>
私のプロフィール 
<img src="photo1.jpg">
 
このページでは私のプロフィールを紹介します。以下のメニューから項目を選んでください。
 
◎<a href="history.html">おいたち</a>
 
◎<a href="hobby.html">趣味</a>
 
◎<a href="family.html">家族</a>
 
<center>
<a href="tel:090-0000-0000">電話待ってます。</a>
</center>
</body>
</html>

■上記で<img src="photo1.jpg">の部分が画像を表示するという意味になります。=の後ろに画像ファイル名を書きます。IEで開いてみると右図のように画像が入りました。右図では、画像の左側に余白があり、画像の右側も切れてしまっていますが、ケータイのほとんどの機種では自動的に画面サイズに合わせて縮小されるので、余白も切れもなく、きちんと表示されるので心配ありません。

■では次に背景や文字の色を変えてみましょう。文字の色は<body text=black link=blue vlink=green>の部分に英語で色の名前を書くということは前記しましたが、ここにbgcolor=yellowというように、背景色の意味を追加することができます。まずはトップページを以下のように書き換えてみましょう。

<html>
<head>
<title>私のプロフィール</title>
</head>
<body bgcolor=yellow text=purple link=coral vlink=gold >
私のプロフィール 
<img src="photo1.jpg">
 
このページでは私のプロフィールを紹介します。以下のメニューから項目を選んでください。
 
◎<a href="history.html">おいたち</a>
 
◎<a href="hobby.html">趣味</a>
 
◎<a href="family.html">家族</a>
 
<center>
<a href="tel:090-0000-0000">電話待ってます。</a>
</center>
</body>
</html>

■これをIEで開いてみてくだい。結果は見てのお楽しみです。index.htmlだけでなく、他のファイルも色々とやってみてください。bgcolor=、text=、 link=、 vlink=、の後ろに英語で色の名前を書きます。合計130以上の色の名前に対応していますので、ほとんどの色の名前が使えると思います。

■アップロードの方法を説明します。せっかく作ったケータイサイトのデータですが、サーバにアップロードしなければケータイから見ることはできません。ここでは一般的な方法を説明します。まず契約しているインターネットサービスプロバイダー（以下ISP）にホームページ開設のサービスがあるかどうか確認してみてください。パソコン用のホームページ開設サービスでかまいません。

有名なISPのほとんどは、こういったホームページ開設のサービスを無料でおこなっています。ISPのサイトのどこかから申し込んだり、契約時に自動的にサービスの対象になっていたりしますが、とりあえず以下の3つの情報を取得できればアップロードができます。

・ホスト：（例：www5.ocn.ne.jp）←これはOCNの例です
・ユーザー名：（例：ketaisaito）←ここがメールアドレスの場合もあります
・パスワード：（例：1234abc）←通常、アルファベットと数字で8桁ぐらい

ホスト名はISP共通で決まっていることがほとんどのようです。ユーザー名とパスワードは、自分で指定できる場合もありますが、ISP側で決められたものを使わなければいけない場合もあります。いずれにしてもISPにより様々な取得方法があるので、ISPのサイトでこれらに該当する項目を捜すが、直接ISPに問い合わせてみてください。

上記情報が取得できたら、FTPソフトというものを使ってアップロードします。FTPソフトで最も一般的なものが「FFFTP」というフリーウェアのソフトです。無料でダウンロードできるので、GoogleやYahoo! Japanで「FFFTP　ダウンロード」で検索すれば、ダウンロードできるページが見つかります。またこの「FFFTP」の使い方も、多くのページで紹介されていますし、ISPのサイト内でも詳しく書かれています。↓FFFTP

■QRコードは専用のサイトで無料で作ることができます。GoogleやYahoo! Japanで「QRコード　作成」で検索してみてください。専用のサイトでURL（ケータイサイトをアップロードしたホームページのアドレス）を入力すると、画像データとしてQRコードを出力してくれます。その画像データを保存するだけです。意外に簡単です。

※「QRコード」は日本では最も普及している二次元コードで、株式会社デンソーが開発したものです。デンソーの登録商標となっているため、ケータイ各社では「QRコード」という名称は使わず「二次元コード」「バーコード」という呼び方をしているようです。

■以上でおしまいです。もっと色々なことをやってみたい方は、HTMLの書籍やサイトを参考にしながら自力で調べてみてください。また、このページで紹介した方法以外に、ホームページエディターやケータイサイト制作ソフト、インターネット上のサイト制作サービスなど利用する方法などがあります。

インターネット上のサービスを利用すれば、アップロードも同時に行えるので、かなり簡単に自分のサイトを作ることができます。ただし意図しない広告バナーが自動的に入ってしまったり、予告無くサービスが終了してしまい、自分のサイトが見られなくなってしまう、というような問題もあります。

このページで紹介したHTMLによるサイト制作例は、ソースを直接自分で書いているので、HTMLをもっと勉強して、より多くのHTMLタグを覚えることで、理想とする構成やデザインへの展開も可能になります。興味と向上心のある方は、是非トライしてみてください。

BACK