※ パクレゼルヴではWeb開発エンジニアを大募集中!詳細はこちら

Archive

Archive for the ‘携帯電話’ Category

携帯電話の特定のキャリアではおかしくなる例

2009/11/24 火曜日 11:02:53

またまた時間が空いてしまいました。

お久しぶりです。
のびーにょです。

さて、表題の件

ラジオボタンがまともに動作しない場合

ドコモ、ソフトバンクの2キャリアでは正常に動作します。
また、PC等の一般的なブラウザでも正常に動作します。
しかし、auのみ正常に動作しません。

以下サンプル
html

<form action="http://example.com" method="POST">
	<input type="hidden" name="jb" value="test2_ez"/>
	<input type="radio" name="mail_receive" value="ALL"/>ALL<br />
	<input type="radio" name="mail_receive" value="YES" checked/>YES<br />
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<br />
	<input type="radio" name="mail_receive" value="NO"/>NO<br />
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>

以下のような表示になります。

20091118161336

複数個のラジオボタンがあってセレクトボックスがある普通のフォームです。

ラジオボタンのグループはすべて同じグループです。

au以外の端末の場合は正常に動作しますが、
auの一部の機種(かなり多そうな感じではありますが)では正常に動作しません。

以下の画像のようになります。
20091118161337

ラジオボタンが複数個選択できてしまいます。
ALLとNOの2個のラジオボタンにチェックが入ってしまう状態です。

もう一度言いますが、グループは同一です。

これでPOSTしてしまうとセレクトボックスの下側(NOの方)が優先されてしまい、
上にあるALL、YESが2度と選択できなくなります。

解決方法は以下のhtml

<form action="http://example.com" method="POST">
	<input type="hidden" name="jb" value="test2_ez"/>
	<input type="radio" name="mail_receive" value="NO"/>NO<br />
	<input type="radio" name="mail_receive" value="ALL"/>ALL<br />
	<input type="radio" name="mail_receive" value="YES" checked/>YES<br />
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<br />
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>

ラジオボタンを一か所にまとめてしまい、間にセレクトボックスを挟まないようにします。

HTMLファイルを同一にて記述する場合や、1キャリアのソースをコンバートする場合は注意が必要です。

ドコモの端末で動くからOKとかは危険なので気を付けてください。

セレクトボックスを指定したのにラジオボタンになる

以下のようなHTMLはauでは

次のページにすらいけなくなるので注意が必要です。

<div style="text-align:center;">
	<form action="http://example.com" method="POST">
</div>
	<input type="hidden" name="jb" value="test2_ez"/>
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
	</form>

※意図的に上段のdivの<を大文字にしています。
syntaxHighlighterが勝手にformを補完するようなので。。。

HTML的にどうなんだという部分はありますが、このHTMLでも

PCのブラウザやDoCoMo,SoftBankの携帯端末だとまともに表示され、POST,GETが可能です。

普通にこう見えます。
20091118161338

しかしやはりEzWeb ここでもやってくれます。

以下の画像や
20091118161339
こんなことになります。
20091118161340

この状態だとどのボタンを押しても前の画面に戻ります。

次のページへ移動はできません。

解決方法は以下

<form action="http://example.com" method="POST">
	<input type="hidden" name="jb" value="test2_ez"/>
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>

まぁ、divの指定が悪いのは見ての通りなので消してやるか、formすべてを囲ってやればOK

最近HTMLの話ばかりでプログラムに関することはほぼ書いてない気がします。
というか、投稿の間隔が空きすぎていますね・・・

なるべく書くようにします。。。

のびーにょ HTMLとか, キャリア, 携帯電話

携帯電話のキャリア毎のHTMLの解釈の差を吸収する

2009/7/31 金曜日 18:00:20

お久しぶりです

のびーにょです。

さて、携帯電話のHTMLに関するお話でも。

<div>
	<div style = "background-color:#FFAAAA">TITLE</div>
	<div style = "background-color:#CCCCCC">
		コンテンツ<br />
		コンテンツ<br />
		コンテンツ<br />
	</div>
</div>

ってな感じで書いた場合
ドコモ端末だと
block_dc1
ってな感じで
au端末だと
block_au1
こんな感じになっちゃいます。

divタグとdivタグの間に隙間ができてしまって、何ともみっともないことになります。
CSSでどうにかして隙間を埋めてしまいたいのですが、これはほぼ不可能です。

で、これ実はHTMLの書き方だけで同じようなレイアウトになります。

それが以下

<div>
	<div style = "background-color:#CCCCCC">
		<div style = "background-color:#FFAAAA">TITLE</div>
		コンテンツ<br />
		コンテンツ<br />
		コンテンツ<br />
	</div>
</div>

htmlの概念的にはよくはないんですけどね
イメージとしては以下のような感じ
灰色の部分がコンテンツのdivでピンクの部分がタイトルのdiv
s2

普通のイメージは
s1
こんな感じで、タイトルとコンテンツ部分の隙間をなくすようなCSSを書いたりしますが
携帯の場合、サポートしていない場合が多いです。

上記のHTMLで書いた場合は
ドコモ
block_dc2

au
block_au2
ってな感じで表示されて両方同じ見え方になります


もう一個例を出しましょう
1エリアごとに交互に色を入れ変えたい場合
良くあるのがランキングとか一覧表示とか
そのあたり。

<div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
</div>

こんな感じで書きたくなりますよね。
でも、こう書くと
list_dc1
ドコモは問題ない

list_au1
でもやっぱりauで問題が出ます。

これも、以下のようなイメージでHTMLを記述することでドコモと同じように見せることが可能です。

s4

htmlはこんな感じで

<div style = "background-color:#FFAAAA">
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
</div>

そうすると、ドコモ、auが以下のように同じように見えます。
list_dc2
list_au2

まぁ、そんな感じで一つ下のdiv要素の色を上の階層に持ってきてやると意図しない隙間をなくすことができます。


色々めんどくさいですけど、結構HTMLだけでも表現できたり色々便利
例えば、以下のような色分けを隙間なく表示したいときとかも
s5

<div style = "background-color:#FFF0E5">
	<div style = "background-color:#FFD0BF">
		<div style = "background-color:#FDDAF0">
			<div style = "background-color:#FABBEA">
				<div style = "background-color:#A3F27B">
					<div style = "background-color:#C0E9FA">
						<div style = "background-color:#FFF09C">
							<div style = "background-color:#F4DA67">
								<div style = "background-color:#ccccff">
									<div style = "background-color:#9966ff">
										<div style = "background-color:#FFB6C1">
											<div style = "background-color:#FF3333">
												<a href ="">
												<span style = "font-size:medium">
												かおもじ友の会</span>
												</a>
												<br />
											</div>
											┗3000個以上の顔文字やAAを収録!オリジナルな作品も投稿できてみんなで共有できちゃう!
										</div>
										<a href ="">
										<span style = "font-size:medium">
										あなたの過ごした時間</span>
										</a>
										<br />
									</div>
									┗時は金なり。あなたが生まれて今日まで過ごした「時間」について色々な角度から詳しく知りたいと思いませんか?
								</div>
								<a href ="">
								<span style = "font-size:medium">
								ちょいネタフーズ</span>
								</a>
								<br />
								</div>
								┗お手軽料理からネタ料理まで、レシピをケータイで簡単検索!オリジナルレシピも投稿しよう
							</div>
							<a href ="">
							<span style = "font-size:medium">
							切なさ成分解析</span>
							</a>
							<br />
						</div>
						┗身近な素材に含まれる「切なさ」を解析。結果を読むと思わず切なくなるかも?
				</div>
				<a href ="">
				<span style = "font-size:medium">
				明日に向かって叫べ</span>
				</a>
				<br />
			</div>
			┗魂の叫びに賞金がかかります!アナタも賞金首となって追われてみる?
		</div>
		<a href ="">
		<span style = "font-size:medium">
		NAME&nbsp;de&nbsp;QUEST</span>
		</a>
		<br />
	</div>
	┗あなたは世界を救う勇者となって、日頃の鬱憤を晴らすべく魔王に戦いを挑みます!
</div>

のびーにょ HTMLとか, Tips, キャリア, 携帯電話

Google Analytics を携帯から使う

2009/4/28 火曜日 21:49:21

こんばんは。
のびーにょです。

GoogleAnalyticsをケータイから使う

ためのクラス書きました。
探してもfunctionでしかなかったので。
あと、fopen()のタイプしかなかったので。
fopenだと繋がらなかった場合エラー出るんですよね。
なのでfsockopen()でソケット通信を利用。
繋がらなかったらそこで終了。
もしくはimgタグにして画像を読み込ませる感じでも利用できます。
参考にさせていただいたソースはfopenでPHP5で追加されたパラメータ使っています。
別に弊社もPHP5なんでかまわないんですけど、どうせなら4でも動くようにという感じにしておきました。
後色々機能追加しています。

使用サンプル

//クラス読み込み
include_once 'GoogleAnalytics.class.inc';
include_once 'googleAnalytics.conf.inc';
//Google AnalyticsのID
$GAM_id = GOOGLE_ANALYTICS_ID;
//サーバ名(ドメイン)
$domain = $_SERVER['SERVER_NAME'];
//セッションID 携帯では独自に引き継がないとできないので注意
$sess = session_id();
//ユーザ側で通知したい値
$md5_subid = md5('ユーザID等');
//GAMセット
$GAM = new GoogleAnalyticsMobile($GAM_id,$domain,$sess);
$res=$GAM->sendGoogle($md5_subid);
//IMGタグを利用する場合は以下も必要
//echo $res;

以上
googleAnalytics.conf.incには定数の定義があります。
内容は以下

設定例

//GoogleAnalyticsのID
define('GOOGLE_ANALYTICS_ID','UA-XXXXXXX-X');
//imgタグで画像を読ませるかどうか
define('GOOGLE_ANALYTICS_READIMG',FALSE);
//define('GOOGLE_ANALYTICS_READIMG',TRUE);
//ソケット通信で通信する場合のタイムアウトするまでの時間
define('GOOGLE_ANALYTICS_TIMEOUT',5);
//通信ポート
define('GOOGLE_ANALYTICS_SEND_PORT',80);
//GoogleAnalyticsへ通知するURL(変わったら変えてね)
define('GOOGLE_ANALYTICS_HOST','www.google-analytics.com');

設定はお好みでどうぞ。
GoogleAnalytics.class.incの中身は以下です。

GoogleAnalyticsMobile

/**
 * GoogleAnalytics を携帯でも利用するためのクラス
 * @auther のびーにょ
 */
class GoogleAnalyticsMobile {
  var $utmac;   //Google AnalyticsのID
  var $utmhn;   //ドメイン
  var $session;  //クッキー(セッション)
  var $random;  //ランダムな値
  var $utmn;    //ランダムな値(上のパラメータとは別の値が必要)
  var $today;   //日付
  var $header;  //送信するヘッダ
  var $res;      //送信後に取得した内容(おそらく必要なし)
  /**
   * CONSTRACTER
   * @param utmac GoogleAnalyticsのID
   * @param utmhn 測定するドメイン
   * @param session セッションID(一意に識別できるものなら何でも可)
   */
  function GoogleAnalyticsMobile($utmac,$utmhn,$session)
  {
    $this->utmac = $utmac;
    $this->utmhn = $utmhn;
    $this->session= $session;
    //intの最大値を超える数字を指定した乱数(float型になるのかな?)
    $this->utmn = rand(1000000000, 9999999999);
    //intの最大値までの乱数
    $this->random= rand(1000000000,2147483647);
    $this->set('today',time());
    $this->set('header');
  }
  /**
   * データ作成とデータ送信
   * @param uservar ユーザー識別子(カスタマID)
   * @param referer リファラ
   * @param utmp リクエストURI
   * @param utmdt ページタイトル
   * @param utmsr ディスプレイサイズ(横*縦)
   * @param utmfl Flashのバージョン
   * @param utmsc 色
   * @param utmcs 文字コード
   * @return IMGタグ OR なし
   */
  function sendGoogle($uservar=NULL
                      ,$referer=NULL
                      ,$utmp=NULL
                      ,$utmdt='-'
                      ,$utmsr='-'
                      ,$utmfl='-'
                      ,$utmsc='-'
                      ,$utmcs='UTF-8')
  {
    if(!$referer){
      $referer = $this->getReferer();
    }
    if(!$utmp){
      $utmp = $this->getRequestUri();
    }
    $today = $this->get('today');
    $host = GOOGLE_ANALYTICS_HOST;
    $sendPrm ='/__utm.gif?';
    $sendPrm.='utmwv=1'
      .'&utmn='.$this->utmn
      .'&utmhn='.$this->utmhn
      .'&utmcs='.$utmcs
      .'&utmsr='.$utmsr
      .'&utmsc='.$utmsc
      .'&utmul=ja'
      .'&utmje=0'
      .'&utmfl='.$utmfl
      .'&utmdt='.urlencode($utmdt)
      .'&utmhid=-'
      .'&utmr='.urlencode($referer)
      .'&utmp='.urlencode($utmp)
      .'&utmac='.$this->utmac
      .'&utmcc='
        .'__utma%3D'.$this->session.'.'
    .$this->random.'.'
    .$today.'.'
    .$today.'.'
    .$today.'.2%3B'
        .'%2B__utmb%3D'.$this->session.'%3B'
        .'%2B__utmc%3D'.$this->session.'%3B'
        .'%2B__utmz%3D'.$this->session.'.'
          .$today.'.2.2.'
          .'utmccn%3D(direct)%7Cutmcsr%3D(direct)'
            .'%7Cutmcmd%3D(none)%3B'
        .'%2B__utmv%3D'.$this->session.'.'
    .$uservar.'%3B';
    //IMGタグで設置する場合
    if(GOOGLE_ANALYTICS_READIMG){
      //EZWebの端末のキャッシュ対策に末尾にtimestampを付与(ランダム数字とクッキーがあるので不要かも)
      return '<img src = "http://' . $host.$sendPrm.'&'.$today.'" width="0" height="0"/>';
    }else{
      $header = $this->get('header');
      if(!$header){
        $header = $this->makeHeader();
      }
      $this->sendData($host,$sendPrm,$header);
      return ;
    }
  }
  /**
   * データ送信
   * @param host ホスト名 (example.com)
   * @param sendPrm リクエストパラメータ (/index.php?aaa=bbb)
   * @param header HTTPヘッダ(クエリ、Host、Content-Type、Content-Lengthは自動的に付与される)
   */
  function sendData($host,$sendPrm,$header)
  {
    $header = "GET ".str_replace(array("r","n"),"",$sendPrm)." HTTP/1.1\\r\\n".$header;
    $header .= "Host: ".$host."\\r\\n";
    $header .= "Connection: Keep-Alive\\r\\n\\r\\n";
    $errno='';
    $errstr='';
    //WEBサーバへ接続
    $fp = fsockopen($host
                    ,GOOGLE_ANALYTICS_SEND_PORT
                    ,$errno
                    ,$errstr
                    ,GOOGLE_ANALYTICS_TIMEOUT);
    //接続に失敗した時の処理
    if (!$fp){
      return FALSE;
    }
    //要求データ送信
    fputs($fp,$header."GET ".$sendPrm." HTTP/1.1\\r\\n");
    //応答データ受信
    $response = "";
    while (!feof($fp)){
      $response .= fgets($fp,4096);
    }
    $this->set('res',$response);
    //接続を終了
    fclose($fp);
  }
  /**
   * ヘッダ作成
   * @param lang 文字種別
   * @param ua ユーザエイジェント
   * @return header
   */
  function makeHeader($lang=null,$ua=null)
  {
    if($lang){
      $header = 'Accept-language: '.$lang."\\r\\n";
    }elseif (isset($_SERVER['HTTP_ACCEPT_LANGUAGE']) && $_SERVER['HTTP_ACCEPT_LANGUAGE']) {
      $header = 'Accept-language: '.$_SERVER['HTTP_ACCEPT_LANGUAGE']."\\r\\n";
    }else{
      $header = 'Accept-language: ja'."\\r\\n";
    }
    if($ua){
      $header .= 'User-Agent: '.$ua."\\r\\n";
    }elseif (isset($_SERVER['HTTP_USER_AGENT']) && $_SERVER['HTTP_USER_AGENT']) {
      $header .= 'User-Agent: '.$_SERVER['HTTP_USER_AGENT']."\\r\\n";
    }else{
      $header .= 'User-Agent: Unknown'."\\r\\n";
    }
    return $header;
  }
  /**
   * リファラーがあれば返す。
   * @return リファラー(あれば)
   */
  function getReferer()
  {
    if(isset($_SERVER['HTTP_REFERER']) && $_SERVER['HTTP_REFERER']){
      return $_SERVER['HTTP_REFERER']; //referer url
    }else{
      return '-';
    }
  }
  /**
   * REQUEST_URIがあれば返す
   * @param  delPrmArr 削除するパラメータ配列
   * @return リクエストURI(あれば)
   * <pre>
   * 値までわかっている場合は配列で指定
   * EX: パラメータprmで値がvalとパラメータがprm2で値が分からない場合
   * ?prm=val&prm2=xxxxx のリクエストURI
   *   => array('prm'->'val','prm2'=>'')
   * </pre>
   */
  function getRequestUri($delPrmArr = array())
  {
    if(isset($_SERVER['REQUEST_URI']) && $_SERVER['REQUEST_URI'] && ($_SERVER['REQUEST_URI'] != '/')){
      $backData = $_SERVER['REQUEST_URI'];
      $flg = FALSE;
      //削除する
      foreach($delPrmArr as $key => $val){
        if($val){
          $backData = str_replace($key.'='.$val,'',$backData);
        }else{
          $backData = preg_replace("/".$key."=[^&]*&/",'&',$backData);
        }
        $flg = TRUE;
      }
      if($flg){
        $backData=str_replace('&&','&',$backData);
        $backData=str_replace('?&','?',$backData);
      }
      return $backData;
    }else{
      return '';
    }
  }
  /**
   * 自由にアクセスできるGETTER/SETTER
   * @param arg アクセスしたいパラメータ名
   * @return パラメータが保持している値
   */
  function get($arg = null)
  {
    if(!$arg){
      return null;
    }
    if(isset($this->$arg)){
      return $this->$arg;
    }else{
      return null;
    }
  }
  /**
   * SETTER
   * @param arg アクセスしたいメンバ変数名
   * @param val 格納したい値
   */
  function set($arg=null,$val=null)
  {
    $this->$arg = $val;
  }
}

携帯電話利用する場合、素直にREQUEST_URI送ってしまうと、セッションIDも送信されてしまい、正確なページ単位の集計ができません。
さらに、DoCoMoの端末のみ”guid=on”のパラメータが付いているサイトなどもあるでしょう。
また、広告コードが付与されて送信されてくるパターンもあります。
そういう場合にはgetRequestUri()メソッドを利用してREQUEST_URIを改変してセットします。
また、sendGoogle()メソッドには上記見てもわかるように色々引数を追加できます。
それも追加してみましょう。
また、makeHeader()メソッドでHTTP_USER_AGENTやHTTP_ACCEPT_LANGUAGEも変更できます。
しない場合はコールしなくても、勝手にコールされます。

以下サンプル

//クラス読み込み
include_once 'GoogleAnalytics.class.inc';
include_once 'googleAnalytics.conf.inc';
//Google AnalyticsのID
$GAM_id = GOOGLE_ANALYTICS_ID;
//サーバ名(ドメイン)
$domain = $_SERVER['SERVER_NAME'];
//セッションID 携帯では独自に引き継がないとできないので注意
$sess = session_id();
//ユーザ側で通知したい値
$md5_subid = md5('ユーザID等');

//GAMセット
$GAM = new GoogleAnalyticsMobile($GAM_id,$domain,$sess);
//リファラ取得
$ref = $GAM->getReferer();
//REQUEST_URI取得(guid,ses_id,ad_idを削除)
$reqi = $GAM->getRequestUri(array('guid'=>'ON'
                                 ,'ses_id'=>$ses_id
                                 ,'ad_id'=>''));
//ページタイトルを設定
$title = 'タイトル';
//画面幅(横*縦)
$bSize = '240*320';
//Flashのバージョン
$flash = '-';
//表示可能色数
$color=$LIB_ARR_MP['color'];
//送信データ生成&送信
$res=$GAM->sendGoogle($md5_subid
                        ,$ref
                        ,$reqi
                        ,$title
                        ,$bSize
                        ,$flash
                        ,$color);
//IMGタグを利用する場合は以下も必要
//echo $res;

これでOK
サイトの共通ファイルや、コントローラ、もしくは共通ヘッダ、共通フッタ等にセットすれば、GoogleAnalyticsがケータイでも利用できます。
ただ、注意点としては画像読み込みで利用される場合(GOOGLE_ANALYTICS_READIMG定数がTRUE)、
画像をフッターに表示させようとすると、ページ全体を読み込むまで通知されない可能性があるので、
極力ヘッダに記述した方がいいと思います。

ですが、HTMLが開始される前に表示するのは厳禁ですよ!

ただ、こちらも難点としてはDoCoMoの端末は画像が表示されるまで次の行を表示しようとしないのです。(データは取得している模様)
あまりにGoogleへの通知に時間がかかる場合等はユーザが戻る操作等を行う可能性があります。

ソケットで通知する際は定数にて接続を切る時間が設定できるので(GOOGLE_ANALYTICS_TIMEOUT定数)、ユーザーがせっかちな場合等はここを1秒等に設定すればましかもしれません。

のびーにょ PHP, システム, 携帯電話

docomoの絵文字

2009/2/27 金曜日 10:38:32

つい最近までdocomoの絵文字は色つきで表示されないのかと思ってた。
わざわざ絵文字毎に色を指定して表示させていたのですが、
どうやらbodyタグのstyleにcolorで色指定してあると、その色が適応されてしまうようです。

ということで、bodyタグにcolorは指定しないようにしましょう。
色考慮しなくていいので、開発が楽になりました。
そんなdocomo。

下音タヌキ Tips, 携帯電話

波ダッシュ(にょろ、波線)に気をつけましょう

2008/12/4 木曜日 18:07:00

さて
文字コード周りで思いついたのでちょっと書いときます

波ダッシュ”〜”っていうのがあります。
にょろ とか 波線 とか言われてます。
Windowsだと普通に打つと”~”ですよね。
と、言ってもXPとそれより前では違うようですが・・・

色々問題があるようでSjisとUnicodeで変換かけると変わるとかあります。
と、いうか特定のエディタだと開けなかったりするみたいですね。
Shift_JISとUnicodeのマッピングが違うのが原因らしいですが、詳しいことはWikipedia見るといいと思います

で、PHP上で変換かける場合は

mb_convert_encoding('~', 'utf8', 'sjis-win');
mb_convert_encoding('〜','sjis-win','utf8');

ってな感じで”sjis-win”っていう拡張文字コード指定してあげれば求めている変換をしてくれると思います。
でもですね
特定のエディタで開けない(シェアのエディタ含む)場合があるので、複数人で触るようなソースに書くのはあんまりよろしくないのですよ

ってことで”〜”から”~”に変換するときは下の書き方の方がいいのかも

str_replace("xE3x80x9C",'~',$data);

たまーにMac使ってる人からデータもらうとそうなっている場合があるので、Macの方は注意した方がいいかもしれません。
携帯もSJISがメインなので。。。

“~”から”〜”に変換することはそうそうないと思いますので割愛

のびーにょ PHP, Tips, 携帯電話

自社で使っているフレームワークの便利な機能

2008/9/30 火曜日 21:11:36

お疲れ様です。

のびーにょです。

表題の件
簡単に説明すると社内PCからのアクセス時とモバイル端末からのアクセス時で表示が変わります
え?普通ですって?

まぁ普通です
以下画像を見てください。
lab1.jpg
こんな感じでPCでデバッグできるようになっています。

最近はめっきり減りましたが昔はHTMLの表示部分も意識して作っていたので、フレームワークの記述ルールに従えば
一つのソースでHTMLとXHTMLと表示が変わっていました。(サンプルの画像のソースはXHTMLのみの記述)

モバイルからアクセスした場合はきちんとモバイルのみが出力されてるわけです。

んで、右側

こっちはデバッグ領域
直接画面に出力するわけじゃないので実運用中でもある程度のデバッグが可能です。

設定ファイルを書き換えればデバッグ内容をログに出力することもでき、携帯からアクセスしてもデバッグできます。

絵文字もフレームワーク規定の書き方をすれば当然3キャリアごとの出力です。

こんなの使ってても、結局最後は端末でデバッグしますが、開発中のデバッグはかなり楽なので結構いい感じです。

のびーにょ PHP, キャリア, システム, 携帯電話

携帯CSSちょっとメモ

2008/9/19 金曜日 23:37:57

こんばんわ。かーつんです。

さっき調べてて分かったことを、
ちょこっと残しときます。

携帯でCSSを使うとき、
例えば以下のように書くと

style="font-size:xx-small"

携帯の機種によっては思わぬ表示が起こります。
今回遭遇したのは、xx-largeを指定していた文字同士が、

行間が狂って重なり合って表示される。

コレを解消するには。

style="font-size:xx-small;"

と、キチンと「;」を付け忘れることなく、
正しい書き方で書く。

そう。これだけ。。。

意外と忘れてしまいがちな「;」ですが、
PCでは何ともない事が携帯では大惨事に繋がるようです。

かーつん HTMLとか, 携帯電話

おさいふケータイに物申す

2008/9/2 火曜日 13:03:08

はい。

みなさん、おさいふケータイ使ってますか?
電車通勤してて思うのですが、あんまりいない気がするんですよね。
パッと改札に携帯をかざすだけでSuicaとかPASMOとかと同等に使えるわけなんですよ。
チャージもわざわざ券売機に並ぶ必要なく、携帯アプリからすべてできちゃうわけです。
もちろん、定期もいれられちゃいます。
電車だけじゃなく、某薬屋のポイントカードや、王手家電店のポイントカードとか財布がかさばるポイントカードに結構対応してます。

こんな便利なのになんで使ってる人少ない(個人的客観)・・の!?
ただ知らないだけ?
知ってはいるけど、使い方がわからない。

あれか?・・電池が切れると使えないかもしれないという懸念?
携帯の電源が入らなくなるまで使っても普通に使えます。
ピンポーンって改札に止められることはありません。

あれか?・・支払いがクレジットカードだから(ry
それはどうしようもありませんね。

あれか?・・未対応端末だから(ry
それはどうしようもありませんね。

下音タヌキ 携帯電話

ssl

2008/7/29 火曜日 12:36:56

はい、アンセキュアなボクです。

ちょいとSSLまわりをいじってたら気がついたこと。
SoftBankのSSLはhttps://secure.softbank.ne.jp/へ強制的にリダイレクトされるようです。
例えば、https://exanple.com/exanple.phpへアクセスしようとすると、
https://secure.softbank.ne.jp/exanple.com/exanple.phpというURLに強制リダイレクトされます。
なんかURLにSoftBnakってはいってるー!ってビビった先にはこういう仕様があったようです。

しかし、何故かブックマークからhttps://exanple.com/exanple.phpへアクセスしてもリダイレクトが行われないっぽいです。
exanple.com内のリンクからアクセスすることではじめて上記仕様のようなリダイレクトが行われるようです。

下音タヌキ 携帯電話

モバイル(携帯)でのHTTPSでの通信時に注意したいこと

2008/6/11 水曜日 15:16:56

こんにちは
のびーにょです。

さて、表題の件について少し書きますか

ドコモの端末でiモードIDが取得できるようになったのがつい最近ですよね

さて、そのiモードIDですが、HTTPS通信時には取得できません。

何故か 理由は以下
・ドコモの端末にSSL証明書が標準でインストールされている
・暗号化はゲートウェイでなく端末上で行われてから送信される
・iモードIDはドコモのゲードウェイで付与される物なので暗号化通信時にはゲートウェイで『guid=on』が付いているかどうか判断できない

ってことです。

ちなみに公式にもきちんとそのあたりは明記されてます。
小さいけど。

ちなみにHTTPS時に『guid=on』ってやっても
X-DCMGUIDヘッダは当然空です

で、ならどうやってHTTPS時に端末を識別するかってことですね。
ちょっと凝ったサイト作るとHTTPSなんて割と使う可能性が高いので知らない人は注意です。

別途セッションID生成してiモードIDにひもづけてサーバ側で保存。
必要情報を別途付与したセッションIDより引き出すって感じでしょうか。

もしくはHTTPS時にはiモードIDを暗号化して『guid=on』ではなく『guid=XXXXXXX(暗号化した値を直接引数として渡す)』とかで渡して、受け取った方で複合化したIDを利用 とかですかね

あんまりどっちも変わらないですけど
どっちもハイジャックの危険性ありますよね
URL保存してれば ですけど

通信途中のデータは盗聴などの危険性はないと思いますが(HTTPS時なので)URLパラメータにてGETで送信した場合はユーザが任意に保存できる可能性があるということです。

できる限りそういう場面ではPOSTを利用し、ユーザの目に触れないようにしたいものですね。

HTMLソース見られれば一緒ですけど。
その時点のURLをユーザが公開するかしないかはそのユーザの責任なのでこちらの意図する部分ではありませんが、なるべくそうなっても大丈夫なようにワンタイムセッション的なものを工夫してあげた方が良いと思います。

ちなみに公式のuid取得部分でも似たようなものがあります。
それも当然HTTPS時には取得できません。

まぁ端末送信時より暗号化しているってことなのでしょうがないっちゃしょうがないんですけどね・・・

HTTPSで思い出しましたが携帯電話で利用する場合のSSL証明書って一昔前はVeriSignのものしか使えませんでした。
何故か
ふるーーーーーい端末ではそこ以外のルート証明書を搭載していなかったから

最近だと割と大丈夫だと見た記憶があります。

まぁ、その辺も含めて携帯電話のWebってそれなりに奥が深いんですよ?

のびーにょ Tips, キャリア, 携帯電話