サイト制作

http://www.page-flip.com/demos.htm

UIは美しく、使いやすいものばかりです。有償ですが、１サイト利用の単体ライセンスだと3000円から5000円程度なので、充分使う価値はあると思いました。

ドラッグやボタンクリックでページをめくるUIです。画像をJPGで登録することでページの入れ替えが可能です。
映像へのリンクも加えることが出来ますので、ページをめくると、本のページの中でムービーが流れる、といったリッチなコンテンツも実装可能です。

サンプル：　http://www.bton.net46.net/wp-content/uploads/2008/08/0804swf/

ソースファイルのダウンロードはこちらのサイトから：　http://phpspot.org/blog/archives/2007/03/flashuidynamic.html

http://ico.bradleygill.com/advanced.php

左の「Browse」ボタンクリックで、JPG、PNGなどの画像を選択すると、ICOファイルを生成してくれます。

面倒がなく一発変換で、作業がはかどります。

http://www.nickstakenburg.com/projects/prototip2/

ツールチップは、リンクにマウスオーバーすると、ぽこっと小さく説明が出てくる、そう、あれです。
フォームの入力注意書きやヘルプなんかにも使えそうですね。
結構なバリエーションがあるので、見ているだけでも面白いです。

Fantastic News Ticker Newsvine-like using Mootools
http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html

ニュースが定期的にスクロールする、そう、アレです。

これって上手く使えば、MTとかWPのブログソフトで、該当するフィールドをカスタムフィールドにして、ニュース更新できますよね。

↓こちらは、CSSで実装するものです。

CSS Message Box collection

http://woork.blogspot.com/2008/03/css-message-box-collection.html

http://www.opensourcetemplates.org/

デザインも洗練されていて美しいものばかりです。

http://www.dotemplate.com/

サンプルのテンプレートがプロ仕様で画像もついているのでイメージしやすい。
サイト内のフォームから入力指定でカスタマイズできるので◎

http://mycelly.com/

2カラムからセンター配置まで、シンプルだけど使い勝手の良いCSSレイアウト集。
12種のサムネイルから好きなCSSテンプレートをDLできる。

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

コンテンツリスト：http://web-tan.forum.impressrd.jp/l/2564

携帯サイトのマーケティングを分かりやすく解説しているコラム。

ドコモのiモードID通知機能公開。
i契約ユーザ毎に一意となるID番号「iモードIDを取得することができるようになり、個人の識別に使えるのでログインなどの機能に利用できます。

従来までの端末ID取得では、認証の度に確認ダイアログが出ており、利用者にとっては承認するのも拒否するのも不安に感じてしまうような機能だったのですが、今回のID通知機能で、こちらを使えば、携帯コンテンツの制作はしやすくなりますね。 

URLに「guid=ON」というパラメータを付けると、拡張ヘッダにiモードIDが付きます。

PHPでは、
echo $_SERVER['HTTP_X_DCMGUID'];
（Perlでは$ENV）
取得できるのは、7文字の英数字([0-9A-Za-z]{7})の文字列。
X-DCMGUID:XXXXXXX (Xが７桁)

 この機能を利用するには、利用者が通知を許可している必要がある。
（デフォルトは通知する）
iモードメニュー内にメニューが増えている。

1. 会員登録時
   
2. 会員登録後
   
3. ＩＤ利用後
   

• iモードIDについて
  1. iモードをご利用のお客様の携帯電話番号毎に一つ付与されるiモード用のユニークなIDとなります。
  2. 携帯電話番号とは異なるランダムな英数字の組み合わせにより構成されています。
     （メールアドレス、氏名などのご契約者情報は含まれません）
  3. 名義変更、改番、iモード契約の解約によりiモードIDは変更されます。
  4. ユーザID、携帯電話及びFOMAカードの製造番号情報とは異なります。
• iモードIDの通知について
  iモード対応サイトにおいて、アクセス先URL内に予めiモードID用のパラメータを記述しておくことにより、お客様がサイトアクセスした際にiモードIDの通知が行われます。

【公式サイト】

→　NTT DoCoMo　重要なお知らせ　『iモードID』の提供開始についてnttdocomo.co.jp]

→　NTT DoCoMo 作ろうiモードコンテンツ　iモードセンタの各種情報　iモードIDについて [nttdocomo.co.jp]

http://labs.yumemi.co.jp/labs/mod/man_contents.html

mod_ktaiはApache上で動くアプリケーションに対して、開発言語を問わず携帯サイト作成のための様々な機能を提供します。

1. 携帯サイトの作成がより簡単に
   携帯サイトの場合、キャリア・機種によって絵文字の出力、表示可能データ量、画面の大きさなどが異なる為、キャリア・機種判別、絵文字の出し分け等、携帯サイト向けの知識が不可欠です。
   mod_ktaiを使用すると、それらの処理を簡単に行なうことが可能です。
   よって携帯サイト開発に関する知識がない方でもサイト構築を行なうことが可能になります。
2. コーディング量の削減、工数削減
   弊社では、従来サイト毎、言語毎に、携帯サイト特有の処理をそれぞれ作成していましたが、携帯サイトに共通する処理を、mod_ktaiで行なうことでコーディング量・工数ともに大幅削減することができました。
3. 処理が高速に
   Apacheモジュールは、phpやperlなどで作成したプログラムより高速処理が可能です。よって大規模サイトや高負荷なサイトでも十分使用可能です。

端末のUser-Agentと、独自に作成した機種情報リストを元に、携帯を判別し、環境変数に様々な値をセットし、Apache上のアプリケーションから端末情報を取得する事を可能にしたり、端末に応じた絵文字変換を行ってくれたり、といったことが出来ます。

サイトでは、マニュアルや情報も充実しており、利用しやすいです。

http://ke-tai.org/blog/

携帯サイト制作に関する様々な便利情報やツールを紹介されています。情報も濃く、大変参考になります。

最新情報では、

ゆめみのケータイ用Apacheモジュール「mod_ktai」

mod_ktaiは、ケータイサイトでの絵文字変換や機種判別などの処理を行うためのApacheモジュール群です。
プログラムで変換処理を行わなくてもよいため、構造がシンプルになり、かつ動作が軽いのが特徴となります。
（上記の記事内では、変換処理が100倍以上に上がると書かれています）

という記事が公開されていました。興味津々。

 toInlineCSSDoCoMo.tar.gz

HTML::DoCoMoCSS　（こっちは元になったPERL版）

 http://ke-tai.org/blog/2008/07/09/toinline/　（記事はこちら：KE-TAI.ORGさん参照） 

インストールは簡単。

# pear install HTML_CSS

で、必要なPEARライブラリをインストールして、ダウンロードしたファイルを展開するだけ。
中に入っている「sample.php」にアクセスすれば、サンプルが表示されるらしい。

require_once ‘../lib/toInlineCSSDoCoMo.php’;

$document = file_get_contents(‘sample.html’);
try {
echo toInlineCSSDoCoMo::getInstance()->setBaseDir(‘./’)->apply($document);
} catch (RuntimeException $e) {
var_dump($e);
} catch (Exception $e) {
var_dump($e->getMessage());
}
?>

以下、仕様の説明。（ゆどうふブログさん（http://d.hatena.ne.jp/Yudoufu/20080709/1215626811）

toInlineCSSDoCoMoの仕様なんですが、はてブとかで「外部参照をインライン化」だと思ってる人とかがいるみたいなので言っとくと、外部参照だけじゃなくて内部参照のsytleタグもよしなにパースしてくれます。

外部参照やstyleタグ指定が複数あってもそれらを全てsytle要素に突っ込んでくれるので、定義が多段になってる状態でもきちんとできます。sytle要素が個別に定義してあるタグでも、ちゃんとマージします。

無論、class指定が複数記述してあっても、*1全部適用します。
 

また、パースし終わった外部参照・内部参照のlinkタグ・styleタグは除去されるので、通常ブラウザベースで開発を行っていても、ざっくりとしたデザインの確認に支障が出ることはありません*2。(除去されないと、専用エミュレータか実機での確認が必要)*3

あと子孫セレクタとかその辺は、結構ちゃんとやってくれます。ただ、ブログにも書いたとおり疑似クラスはa:link,・・・の4つしか対応してません。

一応、それらの疑似クラスは全部内部参照としてCDATAつけてstyleタグに突っ込むようになっています。*4

それ以外はDoCoMoではどのみち無効ということもあって無視しています。

このあたりは、携帯のCSSだし、元々あんまり使ってる人いないようなので、ひとまずざっくり仕様で。