タグ「Mobile」が付けられているもの

PHPで作る携帯サイト

CakePHP関連の新しい書籍が発売されています。

↓これです。

PHPで作る携帯サイトデベロッパーズガイド

PHPで作る携帯サイトデベロッパーズガイド


PHPで作る携帯サイトデベロッパーズガイド

書籍の名前からすると、PHPを使ったモバイルサイトの作成ノウハウ本っぽいですが、中身は違います(^^;)

CakePHPKtai Libraryを使ったモバイルサイトの作成指南書です。

携帯電話

携帯サイト作成の際、「友達に教える」等でメーラーを起動させるリンクを使うことがあります。

たとえば、以下のような感じ。

<a href="mailto:hogehoge@mail.com?body=ほげほげ">友達に教える</a>

上記の場合は何も問題ないのだが、以下のようにメール本文にURLを挿入したいと思うときがある。

<a href="mailto:hogehoge@mail.com?body=http://www.hogehoge.com/">友達に教える</a>

という場合である。

これまた上記の場合はOKなどだが、このURLにクエリーなどで「&」が付く場合もある。

<a href="mailto:hogehoge@mail.com?body=http://www.hogehoge.com/index.php?p=1&q=2">友達に教える</a>

という風に。

この場合、携帯サイトでそのままやると、「&」の後ろが切れてしまうという現象が起こる。

との対処方法。

最近のDoCoMo携帯のUser-Agentについて

  • 投稿日:
  • by
  • カテゴリ:

携帯電話

最近、仕事で携帯端末向けのサービスを作っています。

そこで、最近のDoCoMo携帯は、User-Agentがトラップだらけだということに気が付きました(^^;)

どういうことかというと、例えば、「N-01A」という携帯電話。

この携帯電話のUser-Agentは「N-01A」だと思いきや、ハイフン(-)がなく、「N01A」となる。

それと、「N-06A」という端末、この端末のUser-Agentはじゃぁ「N06A」か?と思いきや、「N06A3」となる。この「3」がつくのは、「iモードブラウザ2.0を採用している機種」ということで、「3」がつくらしい。

[note]コメント欄に上記の「3」が付くことについて補足を頂きました。詳しくはコメント欄を参照ください[/note]

携帯の機種名を抽出するPHP

  • 投稿日:
  • by
  • カテゴリ:

PHP

今会社で携帯サイトを作っているのですが、その際、携帯の機種毎に振り分ける必要が出てきて、その処理をPHPで作ったのでメモ。

というか、機種名を表示するまでの部分ですが(^^;)

最初に、PHPの、

$_SERVER['HTTP_USER_AGENT'];

で、携帯のUser-Agentが取得できるわけですが、

その文字列によって条件分けします。

ただし、auは機種名ではなく、デバイスIDという特殊な文字列が出てくるので、それを機種名に変更する必要があります。

auに関しては、適宜、デバイスIDを機種名に変換してください。

以下が参考になります。

携帯サイトをしていると、やはり実機での確認をしたくなる。しかし自分が使っている携帯電話以外は確認ができないのが現状。

そこで大概の場合は以下のようなシミュレータを使う。


iモードHTMLシミュレータⅡ

  • au → Openwave SDK 6.2K (現在公開停止中のため、こちらを参考にどうぞ)


Openwave SDK 6.2K

モバイルサイトデザイン集

モバイルサイトデザイン集


現在私もモバイルサイトを作っているのですが、それに参考になるようなページを見つけました。

このサイトのタイトルそのままなのですが、モバイルサイトのデザインを集めているページです。

モバイルデザインアーカイブとは?
モバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのためのサイト です。
モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。
デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。

とのこと。

CakePHP楽天APIで携帯サイトを作っているのだが、楽天APIで取得できる画像は、携帯用にそのまま表示すると、画像サイズがでかい。1ページあたりに3枚表示するくらいがやっとだ。

なので、CakePHPで画像ファイルの圧縮率を下げるアクションを追加してみた。

まずは、コントローラーに以下のように作ってみた。

app/controllers/convjpgs_controller.php

class ConvjpgsController extends AppController {
var $name = 'Convjpgs';
function down(){
$this->layout = false;
$this->autoRender = false;
header('Content-type: image/jpeg');
$img = imagecreatefromjpeg('http://'.implode('/',$this->params['pass']).'?_ex=128x128');
imagejpeg($img, NULL, 75);
imagedestroy($img);
}

いや~~~、はまったはまった。。。

今CakePHPで携帯サイトを作っているのだが、これではまった。

携帯サイトを作成するにあたって、以下のように設定している。

app/config/routes.php

Router::connect('/m/:controller/:action', array('prefix' => 'mobile'));

app/app_controller.php

class AppController extends Controller {
function beforeRender()
{
if (isset($this->params['prefix'])) {
header('Content-Type: application/xhtml+xml');
$this->layout = $this->params['prefix'] . '_' . $this->layout;
}
}
}

見て分かるように、beforeRenderで「Content-Type: application/xhtml+xml」を送信している。

携帯サイト作成のためにphp.iniを見直してみた

  • 投稿日:
  • by
  • カテゴリ:

先日、CakePHPで携帯サイトを作るやり方を書いたのだが、CakePHP内部では文字コードをSJIS-winに変換してくれるのだが、携帯で見てみると、どうしても文字化けしてしまう、という現象に陥ってしまった。

そこで、いろいろ原因を探ってみた。

最初に考えたのはUTF-8のBOM問題

CakePHPのスクリプトはUTF-8で書いていて、それをmb_convert_encodingして、SJIS-winに変換している。そのUTF-8のファイルにBOMがついてしまっているのでは、と思い、以下のサイトを参考にしてみた。


このサイトのように、BOMがついているファイルを使うと、レスポンスヘッダーより前に不要なコード(EF BB BF)が送信され、文字化けを起こしてしまうというものだ。このサイトのスクリプトを参考にSJIS-winに変換した出力バッファーの最初の3バイトを削ってみたが変わらず。

ということは、BOMが原因ではないということだった。

で、よくよく原因を考えてみた。

[CakePHP] 携帯サイトの作り方まとめ

CakePHPで携帯サイトを作るときのやり方メモです。

例として、

http://hogehoge.com/m/

というURLにアクセスした場合は携帯表示になるという感じです。

この場合、まず、routes.phpに携帯用のルーティングを足します。

app/config/routes.php

Router::connect('/m/:controller/:action', array('prefix' => 'mobile'));

これは、/m/でアクセスした場合、プリフィクスとして、「mobile」を付けるというものです。

続いてコントローラーですが、以下のようにします。

app/controllers/samples_controller.php

function mobile_test()
{
//通常のコントローラー
}

この場合、http://hogehoge.com/m/samples/test とアクセスすると、mobile_test()が実行されます。

Openwave SDK 6.2K の在処

auの携帯端末のシミュレータで知られる、Openwave SDK 6.2Kですが、現在下記のページでは、一時公開停止中ということでダウンロードができません。


  • Openwave Developer Network - Tools & SDK


↓こうなってます。

ダウンロード不可

せっかく会社のPC入れようと思ったのですが、入手できない。。。

他のFOMAやSoftBankのシミュレータは手にはいるのですが・・・

と、検索をしていると、ダウンロードできるところがあるみたいです。

WordPressプラグイン 「Ktai Style」

WordPressを携帯対応にするプラグインのご紹介。


このプラグインは、
Ktai Style は、あなたの WordPress ウェブログを日本の携帯電話対応にするプラグインです。

とのこと。

基本的な機能は、


  • 携帯電話で閲覧すると軽量化したサイト表示を行います。(フロントページのみならず、アーカイブページ、個別エントリーの URI も対象)

  • ページ容量が大きい場合、端末に応じてページ分割を行います (5KB〜50KB ごと)。

  • 要所要所で、携帯電話に応じた絵文字を使用しています (数字・矢印・時計・顔など)。

  • コメントや投稿本文に絵文字が使えます (設定変更が必要)。携帯電話での閲覧時は各社に応じた絵文字に変換し、PC やスマートフォンでの閲覧時はテキストに置換して表示します。

  • 記事中の画像は、縮小してインライン表示するか (サーバー上の画像で 3G 端末等の場合)、画像へのリンクに変換します (それ以外の場合)。サムネールに対して元画像へのリンクを張っている場合、元画像へのリンクも表示します (こちらは 3G 端末でもリンク)。

  • i-mode, EZweb, Yahoo! ケータイ、ディズニー・モバイルの場合、外部サイトへのリンクは中継ページを出します。ウィルコム、イー・モバイル、その他の端末では直接リンクします。

  • 複数の携帯テーマをインストールして簡単に切り替えできます。携帯テーマは WordPress のテンプレート構造に準拠していて、容易に制作できます。

  • 簡単なウェブログ管理機能 (新規投稿・投稿編集・コメント管理など) があります。

  • コメント投稿時にログインできます。登録ユーザーのみコメント可能な設定でも携帯電話からコメント可能です。

  • 画像変換、PCサイト変換やメール投稿サービスなどの外部サービスは一切利用しませんので、それらのサービスの信頼性・継続性に左右されることなく、安定して使用できます。


と言う感じになっている。