Since 2004.3.20 Total /Today /Yesterday この日記のはてなブックマーク数

濱登(麻布十番)(和食)→夜は竹富三線練習 | メインに戻る | 私が毎日チェックしているサイト

2008年02月28日 木曜日

Dreamweaverで携帯サイトを作る方法

 先日、CSSNiteで携帯サイトの作り方の話を聞き、自分でも携帯サイトを作り始めました。
 以下に、そのまとめと自作のDreamweaverのスニペットと拡張機能を載せます。

1)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のサイト]でダウンロード出来ます。

2)まずi-mode用のページを作成する

 1)の様にページの準備をし、ページの作成に入ります。
 私はまず一番制限が多いi-mode用のページを作ることにしました。

 i-modeのCSSは全てインラインで記入します。
 使えるタグや属性は[DoCoMoのサイト]でダウンロード出来ます。

3)絵文字の使用

 携帯ではページのサイズを5KB程度に抑えるのが良いそうです。
 そうなってくると、出来るだけ画像は使わずに絵文字を使うことになります。

 しかし、この絵文字がまた厄介です。
 3キャリアでそれぞれコードが違う上に、同一キャリア内でも機種によって表示出来る絵文字が異なり、さらにコードも何種類もあります。

 i-modeでは

・バイナリ入力(バイナリ編集可能なエディターやi絵文字で入力)
・Unicode入力(一覧表からコード値を入力)
・シフトJIS入力(一覧表からコード値を入力)

 の3種類の入力方法があります。

 いろいろ考えた末、Unicodeで入力することにしました。
 ここで私は、よく使う絵文字を、Dreamweaverのスニペットに登録しました。
 少ししか登録していないのですが、そのスニペットは[Dreamweaver携帯セット(LZHファイル:14KB)]でご提供しています。
 他の文字を使いたい方は絵文字一覧でスニペットを追加してあげてください。

 ちなみにUnicodeだとi-modeではHTML4.0対応機種以降でしか利用出来ないので本当はバイナリコードを入力した方が良いようです。
 しかしこれには専用の絵文字入力ソフト「i絵文字」というWindows専用のソフトが必要であり(私はMacメイン)、さらに後述するテキスト変換によるsoftbankへのコード変換ができないという理由でやめました。

4)半角カナの使用

 ページのサイズを抑えるという意味で、半角カナも使いたいところです。
 そこで、全角カナを半角カナに変換するDreamweaverの拡張機能を作ってみました。(上述のキットに入っています)

5)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コードと同じでテキスト入力することは出来ず、ウエブページに掲載されているコードをコピペすることによってバイナリ入力します。
 でもこのバイナリコードはテキストエディターでも使うことが出来るため、今回の拡張機能も機能させることが出来ました。

6)キャリアの振り分け

 このようにして、i-mode&au用のページとsoftbank用のページを作りました。
 次に、アクセスしてきた機種のキャリアを見分けてページを振り分ける方法です。

 これは端末機種やブラウザのuser-agentで振り分けてあげれば良いのですが、ネット上にいろいろcgiやphpスクリプトが出回っており、私は携帯振り分けPHPを使わせていただきました。
 さらにhtaccessで

 DirectoryIndex index.php

 として、index.phpをデフォルトのトップページに致しましょう。
 ちなみにhtaccessでも振り分けが出来るようです。

7)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:メインに戻る pagetop このエントリーを含むはてなブックマーク

トラックバック

このエントリーのトラックバックURL:

コメント

初めまして。
早速ダウンロードさせていただきました
解凍後ですが文字化けしており使用できませんでした

何か回避策は無いでしょうか?

投稿者 noiz : 2008年03月27日 08:56

>noizさま
 ご覧頂き有り難うございます。
 文字化けしてしまいましたか!
 すみません
 文字コードを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の標準機能でZIPファイルを作ると、ファイル名がUTF8になってしまい、Windowsなどで開くとファイル名が文字化けしてしまうことがわかりました。
 LZHファイルにしましたので大丈夫だと思います。

 お試しください。

投稿者 モカ : 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

直接電話かけるように電話番号リンクはりたいのですが

投稿者 ttt : 2008年06月08日 12:47

直接電話かけるように電話番号リンクはりたいのですが

投稿者 ttt : 2008年06月08日 12:47

>tttさま
 こんばんは。
 a href="tel:0300000000"
 という感じでいかがでしょうか。

投稿者 モカ : 2008年06月08日 14:34

モカ様
初めまして。こちらのサイトを参考にさせて頂いて、
初めての携帯HP作りに挑戦しています。
ところで、.hataccessですが、初心者向けのサイト
いろいろ回ってみたのですが、よくわかりません;
モカさんの書いて下さった、こちらですが、
>htaccessでAddType application/xhtml+xml .htmlを指定して
>さらにhtaccessでDirectoryIndex index.phpとして
とあるのですが、
もし、よろしければ、.hataccessの中を支障ない範囲で
教えていただけるとうれしいのですが、
お願いします。m(==)m

投稿者 mina : 2008年06月18日 13:34

>minaさま
 はじめまして〜(^_^)
 携帯サイト作られているのですね。
 htaccessですが、私は

DirectoryIndex index.php index.html
Options -Indexes
AddType application/xhtml+xml .html

 といった具合にしています。
 一行目:アドレスがスラッシュで終わってる時にそのディレクトリのindex.php→index.htmlという順に探して表示してくれます。
 二行目:index.htmlのないディレクトリでもディレクトリ情報が現れないように念のために入れています。
 三行目:拡張子がhtmlのファイルがxhtmlであることを明示的に示しています。これでimodeでxhtmlモードが使えます。

 頑張ってくださいねーヽ(・ω・)ノ

投稿者 モカ : 2008年06月18日 15:54

モカ様
早速のお返事ありがとうございました(><)
サイト作りそのものが、PC版を含めて2回目なのでCSSもうまくコントロールできず、泣く泣くレイアウトしてま〜す(ToT)/
早速やってみたんですけど、前にPC版を作ったときに、
プログラマー?の人に最終的なアップロードをお願いしていて、
そのときに.htaccessもあったらしく、サイトがいきなり表示されなくなってしまって、真っ青になりました〜;
前のhtaccessを修正日変更してアップロードし直したら、
直ったんですけど;いや〜焦りました;
そのファイルには1行だけDirectoryIndex welcome.htmlと書いてあったんですけど、モカさんのものと組み合わせて使えるのでしょうか?
モカさんの教えて下さった、振り分けPHPを後で設定しようとおもってるんですが。。。
もしご存知でしたらお願いしますm(==)m

投稿者 mina : 2008年06月19日 10:13

>minaさま
 頑張っていますね!
 htaccessの修正が出来たとはたいしたものだと思います。
 DirectoryIndex welcome.htmlが入っているとよくないので、その一行は消した方がよいと思います。
 PHP導入も頑張ってくださいねー!!

投稿者 モカ : 2008年06月20日 00:30

モカさんこんにちわ☆
設定完了してからお礼をとおもっていたら、全然前にすすまずで;
ありがとうございました(∧∧)
PHPも入門程度勉強してみましたが、やっぱりよくわからずで(・・;
振り分けの書き方、教えていただいてもよいでしょうか(><)
フォルダを、PCサイト(ドメイン名)/モバイル/ドコモ/
という感じで、3キャリアのホルダーを作り、
携帯振り分けPHPの $docomo="docomo.html"; の部分、
ドコモのサイトのトップページにあたるURLを下のように
" "の中に書けばよいって、ことでしょうか?
$docomo="htt●://www.○○○○.jp/mobile/docomo/index.html"

それでモカさんの書いて下さった、.htaccessの
>DirectoryIndex index.php index.html
一行目:アドレスがスラッシュで終わってる時にそのディレクトリの
index.php→index.htmlという順に探して表示してくれます。
というのは、PCも、ドコモもauもトップページは、全て
index.htmlって名前にしておけばいいってことでしょうか?
質問ばかりでごめんなさい;よろしくお願いしますm(==)m

投稿者 mina : 2008年06月26日 15:42

>minaさま
 はい、その通りだと思います。
 ちなみに私はドコモとauは同じファイルを使っているので、2キャリア分のフォルダーを作っています。
 各キャリアのトップページはindex.htmlで大丈夫です。

投稿者 モカ : 2008年06月26日 17:12

モカさま、こんにちは。
久しぶりにサイトを作成していまして、phpも初めてなので助かっています。

もしお判りになりましたら教えていただきたいのですが、PHPの振り分けの確認に「ウェブコンテンツヴューア」というsoftbankのシュミレータを使用しているのですが、振り分けられずにPCのトップページになります。
docomoのシュミレータでは問題なく振り分け表示されるので「ウェブコンテンツヴューア」の仕様かなと思っています。

実機がないので確認が出来ないのですが、よろしくお願い申し上げます。

投稿者 ノア : 2008年06月30日 14:10

>ノアさま
 こんばんは。
 コメント有り難うございます。
 少しでもお役に立てているようで嬉しいです。
 「ウェブコンテンツヴューア」では確かにPCのトップページに振り分けられてしまいます。
 FirefoxのアドオンのUser Agent Switcherでは大丈夫なので問題ないと思います。
 よろしくお願いいたします。

投稿者 モカ : 2008年07月01日 21:29

モカさま、こんにちは。
お忙しい中ありがとうございました。

お陰様で何とか作れそうです。
ありがとうございました。

投稿者 ノア : 2008年07月02日 16:34

>ノアさま
 ご返事有り難うございます。
 是非良い携帯サイトを作られてくださいね!

投稿者 モカ : 2008年07月02日 17:45

モカさま、初めまして。とっしーと申します。
今、携帯サイトに取り組もうと勉強している最中です。

xhtmlでサイトを作成しているのですが、どうしても左寄せになってしまい頭を悩ませているところ、何とかこのサイトに辿り着きました。

>divタグの中でstyle="text-align:center"としてみてください。

助かりました。有難うございます。感謝。

投稿者 とっしー : 2008年10月18日 03:22

>とっしーさま
 こんばんは。
 コメント、有り難うございます!
 携帯サイトはいろいろと“コツ”が必要ですよね。
 少しでもお役に立てれば幸いです。
 とっしーさまのサイトも拝見しました。
 これからもウエブでたくさんの情報を発信されることを期待しています!

投稿者 モカ : 2008年10月18日 03:35

はじめまして。わかりやすいサイトでとても助かっています。

今、DWで携帯サイトを作っているのですが、DWでは文字色も文字サイズも指定したとおりになっているのですが、携帯でみると、文字色も文字サイズもDWでみたとおりになりません。
このサイトで勉強させて頂いているのですが、どうしてもわかりません。。。

ほかになにか原因があるのでしょうか?

投稿者 バズ : 2009年12月01日 22:28

>バズさま

こんにちは。
お褒めのコメント有り難うございます。

文字の色やサイズですが、CSSではなく、fontタグで指定されていますでしょうか?
DreamweaverではCS3までは初期設定でCSSを使わないように設定できるのですが、CS4からはCSSを強制的に使わされるので、手入力の必要があります。

ご検討ください。
またよかったらご返事ください

投稿者 モカ : 2009年12月02日 12:10

メインに戻る pagetop

濱登(麻布十番)(和食)→夜は竹富三線練習 | メインに戻る | 私が毎日チェックしているサイト

コメントしてください




保存しますか?


◇投稿しても表示されない時は「再読込み(リロード)」してみてください
◇<a>タグ、http、Hi、Thanks z、youという文字は使えません。すみません。

pagetop