Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PHPを使って3分で作る
3キャリア対応ケータイサイト
      ke-tai.org
     松井健太郎
自己紹介
• LOCAL PHP部 部長
• ke-tai.orgというケータイ向け情報サイトをやっ
  ています(http://ke-tai.org/)
• 小さな会社を営んでいます。
• 最近はブラウザゲームの作成ばかりで、半ば
  ゲーム...
ケータイサイトを作るときに
      困ること

• 3キャリア対応(ドコモ・au・ソフトバンク)が
  面倒。出し分けプログラムとか書いてられ
  ない。

• そもそも各社の仕様がよくわからない

• ケータイの流儀がよくわからない
なんとか簡単に
      作る方法はないのか
• CMSを使う
  → ケータイには無料のCMSが少ない
  → 「MovableType + MT4i」や、
     「WordPress + KtaiStyle」はアリだけど
     イ...
どんなものが欲しいか
• どこでも動いて、簡単アップ

• 静的HTML感覚(必要最低限の機能)

• 3キャリア対応(ドコモ・au・ソフトバンク)

• 絵文字が使える

→ これらを満たすプログラムを作ってみた
実際に設置してみよう
• アップファイルは2つだけ
  (viewer.php + .htaccess)
• 設置例:
  public_html
  ├ .htaccess
  ├ viewer.php
  └ sample.html
• h...
動作原理の説明
• mod_rewriteで変換フィルタを噛ませただけ
RewriteEngine On
RewriteBase /      # 設置したディレクトリ合わせて変更
RewriteRule ^([0-9A-Za-z~_¥/¥-¥...
利用に最低限必要な知識
• CMSではないので最低限の知識は必要
• ここに気をつければあとはPCとほぼ同じ
• 絵文字はi絵文字で。
• ヘッダはこれを使う
  <?xml version="1.0" encoding="Shift_JIS"...
今後の展開予定
• 面倒なstyle記述は、id:yudofuさんのライブ
  ラリ「HTML_CSS_Mobile」と連携したいな
  と思っている(http://blog.asial.co.jp/423)

• これでドコモ「90x」,「7...
まとめ
• このviewer.phpを使えば、静的HTML感覚
  で3キャリア対応サイトが公開可能

• プライベートや、予算の無い小規模なケー
  タイ案件にどうぞ
Upcoming SlideShare
Loading in …5
×

PHPを使って3分で作る3キャリア対応ケータイサイト

12,544 views

Published on

ke-tai.org PHPを使って3分で作る3キャリア対応ケータイサイト

Published in: Technology
  • Be the first to comment

PHPを使って3分で作る3キャリア対応ケータイサイト

  1. 1. PHPを使って3分で作る 3キャリア対応ケータイサイト ke-tai.org 松井健太郎
  2. 2. 自己紹介 • LOCAL PHP部 部長 • ke-tai.orgというケータイ向け情報サイトをやっ ています(http://ke-tai.org/) • 小さな会社を営んでいます。 • 最近はブラウザゲームの作成ばかりで、半ば ゲーム屋状態です。
  3. 3. ケータイサイトを作るときに 困ること • 3キャリア対応(ドコモ・au・ソフトバンク)が 面倒。出し分けプログラムとか書いてられ ない。 • そもそも各社の仕様がよくわからない • ケータイの流儀がよくわからない
  4. 4. なんとか簡単に 作る方法はないのか • CMSを使う → ケータイには無料のCMSが少ない → 「MovableType + MT4i」や、    「WordPress + KtaiStyle」はアリだけど    インストールが面倒・環境を選ぶ。 • 有料ASPサービスなどを使う
  5. 5. どんなものが欲しいか • どこでも動いて、簡単アップ • 静的HTML感覚(必要最低限の機能) • 3キャリア対応(ドコモ・au・ソフトバンク) • 絵文字が使える → これらを満たすプログラムを作ってみた
  6. 6. 実際に設置してみよう • アップファイルは2つだけ (viewer.php + .htaccess) • 設置例: public_html ├ .htaccess ├ viewer.php └ sample.html • http://example.jp/sample.htmlでアクセスするだけ
  7. 7. 動作原理の説明 • mod_rewriteで変換フィルタを噛ませただけ RewriteEngine On RewriteBase / # 設置したディレクトリ合わせて変更 RewriteRule ^([0-9A-Za-z~_¥/¥-¥.]+)¥.html$ viewer.php?p=$1 [L] • viewer.php内で変換処理 → キャリア判定 → XHTMLヘッダの出し分け → 絵文字変換 → istyle変換
  8. 8. 利用に最低限必要な知識 • CMSではないので最低限の知識は必要 • ここに気をつければあとはPCとほぼ同じ • 絵文字はi絵文字で。 • ヘッダはこれを使う <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> </head> • 文字サイズは2段階 通常と<small>で • bold(<b> </strong>)は効かない • CSSはstyle指定で書く 例:<div style=“color:red;”> ※
  9. 9. 今後の展開予定 • 面倒なstyle記述は、id:yudofuさんのライブ ラリ「HTML_CSS_Mobile」と連携したいな と思っている(http://blog.asial.co.jp/423) • これでドコモ「90x」,「70x」シリーズでも外部 CSSが利用可能に • PHPの隣にアップするだけで自動認識
  10. 10. まとめ • このviewer.phpを使えば、静的HTML感覚 で3キャリア対応サイトが公開可能 • プライベートや、予算の無い小規模なケー タイ案件にどうぞ

×