携帯ホームページを作ろう!! http://mobatuku.com/ ja Copyright 2007 Tue, 06 Mar 2007 00:06:42 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss 絵文字 携帯で一番気になるのは絵文字ではないでしょうか？
やっぱり携帯のホームページなら絵文字をバンバン使っていきたいところです。

絵文字は下記から各キャリアの絵文字を使うことができます。

○DoCoMo
○AU
○SoftBank

使用方法は、各キャリアのページにも書いてありますが、
使用例を交えて、後日説明していきたいと思います。

今回お話することは、各キャリアの絵文字を記述しても、
各キャリアの端末でしか見ることができないということです。
AUの絵文字を使用したのなら、AUでしか絵文字は正常に表示されません。

しかし、DoCoMoの基本絵文字ならAUでも表示することができます。
拡張絵文字も表示することができますが、意図した絵文字ではないことがあります。

なぜかSoftBankの携帯は表示されません。。。
統一してもらえるとありがたいものですが^^;

今後３キャリア絵文字変換プログラムなども紹介していきたいと思います。
言語はPHPです。

僕も早く作りたいのですが、いかんせん時間が足りない･･･orz

]]> http://mobatuku.com/025/020/#000116 http://mobatuku.com/025/020/#000116 020)文字 Tue, 06 Mar 2007 00:06:42 +0900 QVGA QVGA

QVGAとは240×320（横×縦）のサイズのことを指します。
さらにこの上のサイズにVGA（480×640）、XGA（768×1024）があります。
現在の携帯の主流はQVGAで、最近VGAサイズの端末も出始めています。
(2007年2月現在)

]]> http://mobatuku.com/025/100-1/#000115 http://mobatuku.com/025/100-1/#000115 100)用語集 Mon, 12 Feb 2007 05:15:23 +0900 携帯の画像サイズ 画像で一番悩まされるのは、恐らく画像のサイズでしょう。
画像の大きさはキャリアごとではなく、機種ごとに違いますので。
さらに画像だけを表示する場合と、HTMLページに画像を貼り付けて表示させる場合でも 表示できるサイズは変わってきます。
ですので、ズバリなサイズはありません。

HTMLページで画像を表示する場合、
一番小さいサイズで、96×72(横×縦)になります。
最大で468×540になります。
今の携帯の主流はQVGAサイズの240×320です。(2007年2月現在)

基本的に画像のサイズを決める場合は、
横幅を基準にしましょう。
縦幅はかなり端末ごとにアバウトですが、横幅はある程度法則があります。

横幅には、
96・120・132・144・240
があります。
144サイズに関してはDoCoMoの端末にはありません。
僕の過去の経験では、120×110、132×176、240×320が オススメです。

ただしこれは最大値なので、実際に作成する場合は若干小さめに作ったほうがいいです。
若干小さくするだけで、対応できる端末は増えますので。
画像のみを表示する場合はこのサイズの最大値でも問題ないと思います。

どうしても全機種に対応させたい!!という方は、
画像アルバムや、自動リサイズしてくれる掲示板のサービスを使用するといいでしょう。
将来的には、画像サイズを端末ごとに変更できるPHPスクリプトを紹介したいな、と思います＾＾

]]> http://mobatuku.com/025/030/#000114 http://mobatuku.com/025/030/#000114 030)画像 Mon, 12 Feb 2007 04:41:10 +0900 画像のフォーマット 実は画像で表示できるフォーマットは３キャリアで制限があります。
最近では共通化されてきましたが。

僕はプログラムでキャリアごとに画像のフォーマットを切り替えることはありますが、
(DoCoMoならGif、AUならJpg、SoftBankならPNG）
３キャリア共通で作成する場合はJpegにしてます。

Jpegならすべての機種に対応できるというわけではありません。
かなり古い機種では表示できないキャリアもあります。

　 DoCoMo AU SoftBank
Gif ○ △ △
Jpeg △ ○ ○
PNG × ○ ○

上記の表の「○」は全機種が対応しているフォーマットです。
「△」は古い機種では表示できないフォーマットです。
表で見て解かるようにJpegが一番無難ということです。

]]> http://mobatuku.com/025/030/#000113 http://mobatuku.com/025/030/#000113 030)画像 Mon, 12 Feb 2007 04:20:47 +0900 保存文字コード 携帯のブラウザはShift_JIS以外の文字は認識しません。
他の文字コードでHTMLを作成すると文字化けしていまいます。

Windowsのメモ帳でHTMLを作成している方は特に意識する必要はありません。
専用エディタなどを使用している方は、
保存する際の文字コードに注意です。

また、念のために、

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

を<head>～</head>を記述しておくといいでしょう。
これは「HTMLタグ一覧」でもご紹介してます。

]]> http://mobatuku.com/025/020/#000112 http://mobatuku.com/025/020/#000112 020)文字 Mon, 12 Feb 2007 04:02:23 +0900 JavaScript JavaScript

HTMLではページに動作を付けることができません。
JavaScriptを使用するとベージにアクションを付けることができます。
HTMLを新聞紙に例えるなら、テレビみたいなもんでしょうか(笑)。
例えば文字を１文字づつ表示させたりすることもできます。

ページを動的に見せる言語として、PHPやPerlなどもありますが、サーバ側で処理をするPHPなどと違い、クライアント(サイトを見てる）側で処理が行われるので、
PHPなどでは実現できない動作をさせることも可能です。
GoogleのツールがまさにそのJavaScriptの賜物です。

]]> http://mobatuku.com/025/100-1/#000111 http://mobatuku.com/025/100-1/#000111 100)用語集 Mon, 12 Feb 2007 03:46:23 +0900 スタイルシート スタイルシート

HTMLに、さらにデザインを拡張するための言語（？）です。
スタイルシートだけではサイトは構築できませんので、HTMLに味を付けるといった感じです。
例えばテーブルタグの線を破線にしたり、二重線にしたりできます。
PCサイトでは今ではスタイルシートを使用して作成するのが主流になってます。

]]> http://mobatuku.com/025/100-1/#000110 http://mobatuku.com/025/100-1/#000110 100)用語集 Mon, 12 Feb 2007 03:41:56 +0900 携帯共通仕様 このカテゴリでは、共通の仕様をご紹介したいと思います。
全体的な制限としては、
PCサイトを作成したことがある人でしたらご存知のスタイルシート、JavaScriptは使用できません。
実際の所、スタイルシートに関してはある程度ならAU、SoftBankだったら使用できてしまいますが。

]]> http://mobatuku.com/025/010/#000109 http://mobatuku.com/025/010/#000109 010)携帯サイトとPCサイト Mon, 12 Feb 2007 03:36:09 +0900 携帯サイトのPCサイト 携帯サイトとPCサイト、実際のところ大して違いはありません。
DoCoMoだとPCサイトと同じHTMLですし、
AU、SoftBankはXHTMLという、HTMLの拡張版を使用しています。

問題なのは、携帯というスペックの限界です。
もちろんPCと携帯で比べてみれば、回線速度も、保存できるサイズも大きく違います。

ユーザに優しいサイトを構築するためには、
携帯のスペックに合わせた作りをしないといけません。
やはりご自分のホームページで音楽を流したり、好きな画像を貼って見てもらいたいと思います。

しかし、その分読み込みが遅くなるわけです。
定額プランならまだしも、従量制プランだったら１ページ見るだけで大変な金額になります＾＾；

「画像を貼るな」、「音楽を流すな」というお話ではなく、
適度を考えて使用しましょうということです＾＾
まぁここでその適度をご紹介するわけですが(笑)。

]]> http://mobatuku.com/025/010/#000108 http://mobatuku.com/025/010/#000108 010)携帯サイトとPCサイト Mon, 12 Feb 2007 03:16:32 +0900 注意書き ※最新記事ほど下に追加されていきます。

]]> http://mobatuku.com/025/030/#000107 http://mobatuku.com/025/030/#000107 030)画像 Sun, 11 Feb 2007 05:53:38 +0900 注意書き ※最新記事ほど下に追加されていきます。

]]> http://mobatuku.com/025/020/#000106 http://mobatuku.com/025/020/#000106 020)文字 Sun, 11 Feb 2007 05:53:05 +0900 注意書き ※最新記事ほど下に追加されていきます。

]]> http://mobatuku.com/025/010/#000105 http://mobatuku.com/025/010/#000105 010)携帯サイトとPCサイト Sun, 11 Feb 2007 05:52:27 +0900 携帯サイトの構築 携帯サイトを作る上で一番に考えなくてはいけないのは、 ご自分がどういうページを作りたいかです。

ご存知の通り携帯は大きく３キャリア（DoCoMo、AU、SoftBank)があり、
さらに新機種、古い機種でも全然仕様が変わってきます。
大事なことはターゲットをどこに絞るかということです。

すべての機種に対応させようと思うと、制限がきつく、あまり凝ったサイトを作ることはできません。
新機種が対象の場合でしたら、サイトの自由度は上がります。
しかもご自分の使用しているキャリアのみだったらさらに自由度は上がることでしょう。
所有している携帯でちゃんと表示できるサイトを作ればいいわけですので。

ここではご自分が作りたいサイトのターゲットを絞るのにご活用ください。

初めての方は、このカテゴリはあまり気にせず、「HTMLタグ一覧」の基本タグだけで作成されれば、ほとんど問題なく表示されると思います。
（<Table>や<Div>などは一部表示できませんが･･･）

もっと懲りたい!!と思われた時に、こちらへステップアップしましょう＾＾

]]> http://mobatuku.com/025/#000102 http://mobatuku.com/025/#000102 025)携帯サイト構築 Sun, 11 Feb 2007 05:25:15 +0900 デフォルトページの設定 デフォルトページの設定

DirectoryIndex index.html index.cgi index.php /mobatuku/main.html

デフォルトのページとは、URLが/で終わっている時に呼び出されるページのことです。
僕のサイトのURLで例えれば、http://mobatuku.com/です。
DirectoryIndexの後に、設定したいページ順に記述します。
ほとんどのレンタルサーバが最初から、index.html、index.php、index.cgi あたりは設定してあると思います。

index.○○○以外のページをデフォルトページに設定したい場合などには便利ですね。

上記の例の場合ですと、４番目のデフォルトページにhttp://mobatuku.com/mobatuku/main.htmlを指定してます。

■サンプル
下記のリンクはhttp://mobatuku.com/035/031/sample/に繋がっています。
DirectoryIndexは/035/031/main.htmlに設定してあります。

→default page

]]> http://mobatuku.com/035/031/#000101 http://mobatuku.com/035/031/#000101 031)デフォルトページの設定 Fri, 09 Feb 2007 23:20:12 +0900 サイトの閲覧制限 サイトの閲覧制限

order deny,allow
deny from all
allow from 127.0.0.1/1

サイトの閲覧できるIPアドレス帯域を制限することができます。
例えば携帯以外からの閲覧を拒否する場合などに重宝します。

deny from allですべてのアクセスを拒否した後、
allow from ***.***.***.***/**で一部のアドレス帯域を許可します。

下記が３キャリアのIPアドレス帯域になります。
DoCoMo
AU
SoftBank

IPアドレスはたまに追加されるので、たまには確認して追加していかないと、
サイトを閲覧できない時があるので注意です。

■サンプル
以下は2007年2月09日現在のソースになります。

携帯端末からのみ閲覧を許可しています。
403ErrorDocumentと組み合わせれば、PCでの閲覧用のページを表示させることができます。
間違っても、403エラー用のページと.htaccessを同じ階層に置かないでください!!
PCで閲覧しようとしたとき、
403エラー用のページも閲覧制限が適用されて永久ループに陥ります。
（管理人はやってしまいましたｗ）
403エラー用のページは下記の.htaccessの適用範囲外に設置しましょう。

order deny,allow
deny from all
allow from 210.169.40.0/24
allow from 210.196.3.192/26
allow from 210.196.5.192/26
allow from 210.230.128.0/24
allow from 210.230.141.192/26
allow from 210.234.105.32/29
allow from 210.234.108.64/26
allow from 210.251.1.192/26
allow from 210.251.2.0/27
allow from 211.5.1.0/24
allow from 211.5.2.128/25
allow from 211.5.7.0/24
allow from 218.222.1.0/24
allow from 61.117.0.0/24
allow from 61.117.1.0/24
allow from 61.117.2.0/26
allow from 61.117.3.0/24
allow from 219.108.158.0/26
allow from 219.125.148.0/24
allow from 222.5.63.0/24
allow from 222.7.56.0/24
allow from 222.5.62.128/25
allow from 222.7.57.0/24
allow from 210.153.84.0/24
allow from 210.136.161.0/24
allow from 210.153.86.0/24
allow from 210.153.87.0/24
allow from 202.179.204.0/24
allow from 210.146.7.192/26
allow from 210.146.60.192/26
allow from 210.151.9.128/26
allow from 210.169.176.0/24
allow from 210.175.1.128/25
allow from 210.228.189.0/24
allow from 211.8.159.128/25

ErrorDocument 403 403.html

<$MTBlogURL$>035/030/sample/sample.htmlにアクセスしますが、
PCからは見れません。
403エラーページへジャンプします。
携帯でも確認してみるといいですね。

■サンプルリンク
→sample.html

]]> http://mobatuku.com/035/030/#000100 http://mobatuku.com/035/030/#000100 030)サイト閲覧の制限 Fri, 09 Feb 2007 00:07:34 +0900