濱登（麻布十番）（和食）→夜は竹富三線練習 |
メインに戻る
| 私が毎日チェックしているサイト 
2008年02月28日 木曜日
Dreamweaverで携帯サイトを作る方法
先日、CSSNiteで携帯サイトの作り方の話を聞き、自分でも携帯サイトを作り始めました。
以下に、そのまとめと自作のDreamweaverのスニペットと拡張機能を載せます。
１）XHTML Transitionalでページを作成する
携帯サイトはいろいろな言語で作ることが出来ます。
例えばi-modeなら「i-mode HTML（C-HTML）、XHTML、i-mode XHTML」で書くことが出来、さらにそれぞれの言語にバージョンがあり、言語によって使えるタグや対応機種も違ってきます。
auでは「HDML、XHTML Basic」、softbankでは「ソフトバンク携帯電話向けHTML、XHTML Basic」のようです。
----------------------------------------------
私は
・CSSが使える
・divの中の背景色指定が出来る
などの理由でXHTML、それも3つのキャリアで共通で使えるXHTML Transitionalを使うようにしました。
ほんとはDoCoMo、au、softbankで別々のDOCTYPEを記載し、それぞれのXHTMLを使った方が良いようです。
i-modeの場合、movaだとXHTMは使えないため、残念ですがmovaは切り捨てということになります。
この時のドキュメントタイプなどのヘッダー情報は
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
にしました。
さらに、htaccessで
AddType application/xhtml+xml .html
を指定して実機のブラウザにhtmlファイルがXHTMLであることを認識させてあます。
そしてxhtmlで
<div style="background-color:#0000ff"><span style="color:#ffffff">モカモカ携帯サイト</span></div>
と書くことによって、divの中に背景色をつけてあげることが出来ます。［FOMAでの背景色指定］
最初は文字の背景色をつけるためにtableタグを使おうと思ったのですが、i-modeでは2005年11月発売の902i以降の端末でないとtableタグは無視されてしまうので、divを使うことにしました。
その方がWeb標準という意味でも正しいコーディングだということもあります。
端末機種によってどのバージョンの言語が使えるかは［DoCoMoのサイト］でダウンロード出来ます。
２）まずi-mode用のページを作成する
１）の様にページの準備をし、ページの作成に入ります。
私はまず一番制限が多いi-mode用のページを作ることにしました。
i-modeのCSSは全てインラインで記入します。
使えるタグや属性は［DoCoMoのサイト］でダウンロード出来ます。
３）絵文字の使用
携帯ではページのサイズを5KB程度に抑えるのが良いそうです。
そうなってくると、出来るだけ画像は使わずに絵文字を使うことになります。
しかし、この絵文字がまた厄介です。
3キャリアでそれぞれコードが違う上に、同一キャリア内でも機種によって表示出来る絵文字が異なり、さらにコードも何種類もあります。
i-modeでは
・バイナリ入力（バイナリ編集可能なエディターやi絵文字で入力）
・Unicode入力（一覧表からコード値を入力）
・シフトJIS入力（一覧表からコード値を入力）
の3種類の入力方法があります。
いろいろ考えた末、Unicodeで入力することにしました。
ここで私は、よく使う絵文字を、Dreamweaverのスニペットに登録しました。
少ししか登録していないのですが、そのスニペットは［Dreamweaver携帯セット（LZHファイル：14KB）］でご提供しています。
他の文字を使いたい方は絵文字一覧でスニペットを追加してあげてください。
ちなみにUnicodeだとi-modeではHTML4.0対応機種以降でしか利用出来ないので本当はバイナリコードを入力した方が良いようです。
しかしこれには専用の絵文字入力ソフト「i絵文字」というWindows専用のソフトが必要であり（私はMacメイン）、さらに後述するテキスト変換によるsoftbankへのコード変換ができないという理由でやめました。
４）半角カナの使用
ページのサイズを抑えるという意味で、半角カナも使いたいところです。
そこで、全角カナを半角カナに変換するDreamweaverの拡張機能を作ってみました。（上述のキットに入っています）
５）softbank用ページへの変換
以上のようにi-mode用のページを作成した後、次に他の2キャリアへの変換を検討しました。
今はauはi-modeの主な絵文字も表示できるようになったため、思い切ってi-modeとauは同じページを使うことにしました。
softbankはi-modeの絵文字は表示されないため、softbank用のコードに変換してあげる必要があります。
そこで、同じくDreamweaverの拡張機能を作りました。（上述のキットに入っています）
これで私がスニペットに登録したi-mode用の絵文字コードをsoftbankの絵文字コードに一発変換することが出来ます。
これも必要に応じてhtmファイルの中に置換するコードを追加してください。
ちなみにsoftbankの絵文字コードは「Webコード」というのを使うのですが、これもi-modeのバイナリのShift-JISコードと同じでテキスト入力することは出来ず、ウエブページに掲載されているコードをコピペすることによってバイナリ入力します。
でもこのバイナリコードはテキストエディターでも使うことが出来るため、今回の拡張機能も機能させることが出来ました。
６）キャリアの振り分け
このようにして、i-mode&au用のページとsoftbank用のページを作りました。
次に、アクセスしてきた機種のキャリアを見分けてページを振り分ける方法です。
これは端末機種やブラウザのuser-agentで振り分けてあげれば良いのですが、ネット上にいろいろcgiやphpスクリプトが出回っており、私は携帯振り分けＰＨＰを使わせていただきました。
さらにhtaccessで
DirectoryIndex index.php
として、index.phpをデフォルトのトップページに致しましょう。
ちなみにhtaccessでも振り分けが出来るようです。
７）Dreamweaver携帯キットの使い方
圧縮ファイルを解凍します。
Dreamweaver携帯セット
├zenkana_hankana.htm（全角→半角変換のソースコード）
├zenkan_hankan.mxi（全角→半角変換のインストールファイル）
├docomo_softbank.htm（i-mode→softbankのソースコード）
├docomo_softbank.mxi（i-mode→softbankのインストールファイル）
└snippets
└各種スニペットファイル
・スニペット → Dreamweaverのスニペットファイルが入っているフォルダーにsnippetsフォルダーの中のファイルをコピーしてください。
Dreamweaver8の場合は
Windows C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Snippets
MacOSX Macintosh HD¥ユーザ¥[ユーザ名]¥ライブラリ¥Application Support¥Macromedia¥Dreamweaver8¥Configuration
です。
・拡張機能2種 → DreamweaverのメニューからExtension managerを開き（Dreamweaverのコマンド＞拡張機能の管理）、mxiファイルを指定してインストールし、Dreamweaverを再起動してください。コマンドの拡張機能の一覧に現れるはずです。
［番外
＞ インターネット
］: 2008年02月28日 13:39：メインに戻る 
トラックバック
コメント
初めまして。
早速ダウンロードさせていただきました
解凍後ですが文字化けしており使用できませんでした
何か回避策は無いでしょうか？
投稿者 noiz : 2008年03月27日 08:56
＞ｎｏｉｚさま
ご覧頂き有り難うございます。
文字化けしてしまいましたか！
すみません
文字コードをsh ift jisに変えてみました。
今一度試してみていただければ幸いです。
よろしくお願いいたします。
投稿者 モカ : 2008年03月27日 10:30
初めまして。
私の方でも解凍後、文字化けしており使用できませんでした。
投稿者 哲やん : 2008年03月29日 13:53
＞哲やんさま
こんばんは。
がーん、すみません。
どのファイルが文字化けしていましたでしょうか？
よろしかったら教えて下さい。
ちなみにスニペット類の文字コードは UTF8です。
投稿者 モカ : 2008年03月29日 20:27
文字化け内容
メールの方におくりました。
投稿者 noiz : 2008年03月30日 04:49
文字化けの件、大変ご迷惑をおかけしました。
Macの標準機能でＺＩＰファイルを作ると、ファイル名がUTF8になってしまい、Windowsなどで開くとファイル名が文字化けしてしまうことがわかりました。
ＬＺＨファイルにしましたので大丈夫だと思います。
お試しください。
投稿者 モカ : 2008年04月01日 14:26
携帯の文字の後ろに色をつける、というのはこんなに難しいことだったのだ、と思いながら漂っているうちにこちらにたどり着きました。
そして、お書きになっていらっしゃるようにそのままやりましたら見事解決できました。
本当にありがとうございました。
ところで、一つ分からないことがあります。
タグがきかないのです。DreamWeaver上ではちゃんと真ん中になっているのに、携帯で見てみると左寄せのままなのです。
実は、携帯サイトを自前でつくってサーバーにアップロードするのは始めてですのでわからないことだらけなのです。
大変申し訳ありませんが、お教えいただければ幸いです。
投稿者 Earl : 2008年05月06日 12:16
＞Earl さま
はじめまして。
携帯の文字の後ろに色をつけるのはなかなか難しいことですよね。
少しでもお役に立てたようでとても嬉しいです。
centerタグですが、xhtmlでは使えないようです。
divタグの中でstyle="text-align:center"としてみてください。
これでたぶん大丈夫だと思います。
投稿者 モカ : 2008年05月06日 19:28
濱登（麻布十番）（和食）→夜は竹富三線練習 |
メインに戻る
| 私が毎日チェックしているサイト
コメントしてください
