携帯ホームページを作ろう!! tag:mobatuku.com,2007://1 2007-03-05T15:30:15Z Movable Type 3.33-ja 絵文字 tag:mobatuku.com,2007://1.116 2007-03-05T15:06:42Z 2007-03-05T15:30:15Z 携帯で一番気になるのは絵文字ではないでしょうか？ やっぱり携帯のホームページな... 携帯で一番気になるのは絵文字ではないでしょうか？
やっぱり携帯のホームページなら絵文字をバンバン使っていきたいところです。

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

○DoCoMo
○AU
○SoftBank

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

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

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

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

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

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

]]> QVGA tag:mobatuku.com,2007://1.115 2007-02-11T20:15:23Z 2007-02-11T20:19:23Z QVGA QVGAとは240×320（横×縦）のサイズのことを指します。 さらに... QVGA

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

]]> 携帯の画像サイズ tag:mobatuku.com,2007://1.114 2007-02-11T19:41:10Z 2007-02-11T20:14:16Z 画像で一番悩まされるのは、恐らく画像のサイズでしょう。 画像の大きさはキャリア... 画像で一番悩まされるのは、恐らく画像のサイズでしょう。
画像の大きさはキャリアごとではなく、機種ごとに違いますので。
さらに画像だけを表示する場合と、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スクリプトを紹介したいな、と思います＾＾

]]> 画像のフォーマット tag:mobatuku.com,2007://1.113 2007-02-11T19:20:47Z 2007-02-11T19:41:01Z 実は画像で表示できるフォーマットは３キャリアで制限があります。 最近では共通化... 実は画像で表示できるフォーマットは３キャリアで制限があります。
最近では共通化されてきましたが。

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

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

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

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

]]> 保存文字コード tag:mobatuku.com,2007://1.112 2007-02-11T19:02:23Z 2007-02-11T19:18:39Z 携帯のブラウザはShift_JIS以外の文字は認識しません。 他の文字コードで... 携帯のブラウザはShift_JIS以外の文字は認識しません。
他の文字コードでHTMLを作成すると文字化けしていまいます。

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

また、念のために、

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

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

]]> JavaScript tag:mobatuku.com,2007://1.111 2007-02-11T18:46:23Z 2007-02-11T18:55:01Z JavaScript HTMLではページに動作を付けることができません。 Jav... JavaScript

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

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

]]> スタイルシート tag:mobatuku.com,2007://1.110 2007-02-11T18:41:56Z 2007-02-11T18:46:12Z スタイルシート HTMLに、さらにデザインを拡張するための言語（？）です。 スタ... スタイルシート

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

]]> 携帯共通仕様 tag:mobatuku.com,2007://1.109 2007-02-11T18:36:09Z 2007-02-11T18:40:04Z このカテゴリでは、共通の仕様をご紹介したいと思います。 全体的な制限としては、... このカテゴリでは、共通の仕様をご紹介したいと思います。
全体的な制限としては、
PCサイトを作成したことがある人でしたらご存知のスタイルシート、JavaScriptは使用できません。
実際の所、スタイルシートに関してはある程度ならAU、SoftBankだったら使用できてしまいますが。

]]> 携帯サイトのPCサイト tag:mobatuku.com,2007://1.108 2007-02-11T18:16:32Z 2007-02-11T18:58:56Z 携帯サイトとPCサイト、実際のところ大して違いはありません。 DoCoMoだと... 携帯サイトとPCサイト、実際のところ大して違いはありません。
DoCoMoだとPCサイトと同じHTMLですし、
AU、SoftBankはXHTMLという、HTMLの拡張版を使用しています。

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

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

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

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

]]> 注意書き tag:mobatuku.com,2007://1.107 2007-02-10T20:53:38Z 2007-02-10T20:53:57Z ※最新記事ほど下に追加されていきます。 ... ※最新記事ほど下に追加されていきます。

]]> 注意書き tag:mobatuku.com,2007://1.106 2007-02-10T20:53:05Z 2007-02-10T20:53:24Z ※最新記事ほど下に追加されていきます。 ... ※最新記事ほど下に追加されていきます。

]]> 注意書き tag:mobatuku.com,2007://1.105 2007-02-10T20:52:27Z 2007-02-10T20:52:53Z ※最新記事ほど下に追加されていきます。 ... ※最新記事ほど下に追加されていきます。

]]> 携帯サイトの構築 tag:mobatuku.com,2007://1.102 2007-02-10T20:25:15Z 2007-02-10T20:56:06Z 携帯サイトを作る上で一番に考えなくてはいけないのは、 ご自分がどういうページを... 携帯サイトを作る上で一番に考えなくてはいけないのは、 ご自分がどういうページを作りたいかです。

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

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

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

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

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

]]> デフォルトページの設定 tag:mobatuku.com,2007://1.101 2007-02-09T14:20:12Z 2007-02-09T14:55:02Z デフォルトページの設定 DirectoryIndex index.html in... デフォルトページの設定

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

]]> サイトの閲覧制限 tag:mobatuku.com,2007://1.100 2007-02-08T15:07:34Z 2007-02-08T15:46:53Z サイトの閲覧制限 order deny,allow deny from all ... サイトの閲覧制限

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

]]>