携帯シミュレータ

Posted by muchag | ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー | 2010-06-09 (水) 23:42:07

携帯サイトの作成については
大袈裟に言えば、全機種挙動が違うので
実機テストは無理・・・。

そこで大まかにではあるが
キャリア毎にシミュレータが存在する。

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

iモードHTMLシミュレータII
2010-06-09現在 ヴァージョン8.4
シミュレートモードというのが8段階あり、
発売時期別の大まかな仕様グループになっていて
それを見れば、どの辺の機種に対応しているか
わかりやすい。

細かい内訳は

「1」・・・
FOMA 901iシリーズ(2004年12月頃発売開始)、MOVA 505iシリーズ(2003年5月頃発売開始)・506iシリーズ(2004年5月頃発売開始)以降。
iHTML5.0 Flash Lite1.1 Deco-mail1.0

——————————————————————————–

「2」・・・
FOMA 901iSシリーズ(2005年6月頃発売開始)
iHTML5.0 Flash Lite1.1 Adobe Reader LE1.0 Deco-mail1.0 ※PDF閲覧に対応

——————————————————————————–

「3」・・・
FOMA 902iシリーズ(2005年11月頃発売開始)、702iシリーズ(2006年2月頃発売開始)以降。
iHTML6.0 Flash Lite1.1 Adobe Reader LE1.0 Deco-mail2.0 ToruCa1.0 ※トルカに対応

——————————————————————————–

「4」・・・
FOMA 903iシリーズ(2006年10月頃発売開始)、703iシリーズ(2007年1月頃発売開始)以降。
iHTML7.0 Flash Lite1.1 Adobe Reader LE2.0 Deco-mail3.0 ToruCa2.0

——————————————————————————–

「5」・・・
FOMA 903iシリーズ(2006年10月頃発売開始)、703iシリーズ(2007年1月頃発売開始)以降。
iHTML7.1 Flash Lite3.0 Adobe Reader LE2.0 Deco-mail3.0 ToruCa2.0

——————————————————————————–

「6」・・・
FOMA 905iシリーズ(2007年11月頃発売開始)、705iシリーズ(2008年1月頃発売開始)以降。
iHTML7.2 Flash Lite3.0 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.0

——————————————————————————–

「7」・・・
FOMA 906iシリーズ(2008年6月頃発売開始)以降。
iHTML7.2 Flash Lite3.1 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.1

——————————————————————————–

「8」・・・
2009年5月以降発売のシリーズ(一部機種を除く)
i-mode Browser2.0 Flash Lite3.1 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.1
※クッキー・リファラー・JavaScript、文字コードUTF-8、CSSへ対応

引用元:ReNeWDA! モバイルサイト構築の際の確認に。【iモードシミュレータ】

au : Openwave SDK6.2K

開発元が休止中らしく、公式Downloadサイトは閉鎖中、
あちこちにあるリンクはほとんど切れている。

なので実際にDLするときは こちら 。
開発中止になってから大分経つので、さすがに使い勝手が悪い。
と思ってすぐ止めた記憶が・・・。

SoftBank : Web Contents Viewer

SoftBank公式の会員専用サイトに登録して
そこからDLできる。

これは、シミュレートするだけでなく
HTMLコードを表示することができ
どこがエラーの元になっているかもわかるようになっている優れもの。

ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー | 2010-06-09 (水) 23:42:07 |

swfファイルのHTMLへの埋め込み

Posted by muchag | Flash,HTML,ガラケー | 2010-06-08 (火) 15:47:08
1.PCサイト

PCサイトについては、Flashでパブリッシュを行う際に
自動的にHTMLファイルを生成してくれるので
基本事項としての注意点はIE問題。

一般的にはobjectタグで埋め込むようだが
IEはそれだと認識しないので
embedタグを併記するというわけだ。

さて、応用としてJavaScriptライブラリの
SWFObject」を利用するパターンもある。
私も実際使っている。

現在は2.0系統になっていて1.0系統とは大きく異なっている。
内容をよく見て、どちらを選ぶかは自分次第だ。

2.0系統には手法が2通り用意されていて
その2≒1.0系統のようだ。

私が実際に使っているのは1.5なので
その手法のみ掲載。

こちら から1.5をDLする。

→解凍後、swfobject.jsをルートディレクトリ作成したjsフォルダ内にUL。
jsフォルダの位置を別のところにしたら、下のパスも随時変更。

→HTMLファイルのheadタグ内に

  1. <script type="text/javascript" src="/js/swfobject.js"></script>

→bodyタグ内に

  1. <div id="FlashExample">
  2.   Flashの再生に失敗したときに表示されるテキスト
  3. </div>
  1. <script type="text/javascript">
  2.    var so = new SWFObject("flash_example.swf", "hoge", "760", "570", "8", "#336699");
  3.    so.write("FlashExample");
  4. </script>

SWFObjectの引数は
(FlashURL, name(自由), 横サイズ, 縦サイズ, FlashPlayerのヴァージョン, 背景色)

以上で出来上がり~♪
ありがたやありがたや。

2.携帯サイト

携帯サイトへswfファイルの再生方法は2つある。

◆インライン再生
HTML文書中に動画オブジェクトとして埋め込みます。
ダイヤルボタンなどでの操作は一切使えません。

◆インタラクティヴ再生
独立したコンテンツとしてフラッシュを再生します。
ダイヤルボタンなどでの操作も出来ます。
・ソフトバンクではインタラクティヴ再生を単体再生と呼んでおります。

引用元:しらぎくのウェブサイト作成入門 携帯電話向けコンテンツでフラッシュを使うには。

そしてHTMLに埋め込む方法だが

インライン再生
  1. <object data="/scripts/sample/3535/sample3535.swf" type="application/x-shockwave-flash" width="180" height="90">
  2.   <param name="bgcolor" value="#000000">
  3.   </param><param name="loop" value="on">
  4.   </param><param name="quality" value="high">
  5. </param></object>

▼objectタグ
data
 SWFファイルのURLを指定します。相対パスでも絶対パスでも指定可能です。
 
type
SWFファイルのMimeTypeを示す文字列「application/x-shockwave-flash」を設定します。
 
width
 横サイズをピクセル値の数値で指定します。
 
height
 縦サイズをピクセル値の数値で指定します。
 
▼paramタグ
bgcolor
 背景色をカラーコードまたはカラーネームで指定します。
 bodyタグでの背景色指定やFlashで指定した背景色よりも優先されます。
 カラーコード例:#000000
 カラーネーム例:red
 
loop
 連続でループ再生するかどうかを「on」「off」で指定します。
 ※「true」「false」での指定はDoCoMoの505iシリーズ、506iシリーズ及びSoftbankでサポートされていません。
 
quality
 再生画質を「high」「medium」「low」のどれかで指定します。
 ※auではサポートされていません。

引用元:携帯サイトをつくろう ケータイFlashをHTMLページ上でインライン再生させるには

インタラクティヴ再生
  1. <object id="FLASH1" declare="declare" type="application/x-shockwave-flash" data="flash.swf">
  2.     <param name="loop" value="on" />
  3.     <param name="quiality" value="high" />
  4. </object>
  5. <a iswf="#FLASH1" href="alternate.html">フラッシュ(非対応端末では静止画像)を見る</a>

・フラッシュは flash.swf
・代替コンテンツは alternate.html
・フラッシュへのID FLASH1

引用元:しらぎくのウェブサイト作成入門 携帯電話向けコンテンツでフラッシュを使うには。

Flash,HTML,ガラケー | 2010-06-08 (火) 15:47:08 |

Flash Lite と Flash Player

Posted by muchag | ActionScript,Flash,ガラケー | 2010-06-08 (火) 15:01:46

FlashはFlashでも、PC用と携帯用では違う。
PC用は FlashPlayer のヴァージョンに依存するようだが、
携帯用は Flash Lite というもの。

ちなみに

* Flash Lite 1.0
o Flash 4をベースにしている。
o 容量制限:20KB
* Flash Lite 1.1
o Flash 4をベースにしている。
o 容量制限:100KB
* Flash Lite 2.0
o Flash 7をベースにしている。
o 2006年9月より、日本でも対応端末が発売されている。NTTドコモは対応端末を発売しなかった。
o 容量制限:au 100KB、SoftBank 150KB
* Flash Lite 2.1
o Flash 7をベースにしている。
o 2006年12月 Windows Mobile 5.0用正式リリース。国内向けスマートフォンでも利用可能に。
* Flash Lite 3.0
o Flash 8をベースにしている。
o Flash Videoに対応。ただしフルブラウザでYouTubeなどの動画が再生出来るとは限らず機種の個別対応による。
o 2007年11月より、日本でも対応端末が発売されている。
* Flash Lite 3.1
o Flash 8をベースにしている。
* Flash Lite 4.0
o Flash 10をベースにしている。

引用元:Wikipedia Adobe Flash Lite

最近では携帯の仕様がよくなってきたので
大分やりやすくなったようだが
それでもヴァージョンの問題で相当メンドイ・・・。

各サイトを見ていると
2010-06-08現在、flashliteは2.0で過去2年くらいの機種ならいけそうだ。
よって、今回は2.0で作成するので
情報も2.0用が中心となる。

ActionScript,Flash,ガラケー | 2010-06-08 (火) 15:01:46 |

検索エンジンロボット(Crawler)対策

Posted by muchag | PHP,ガラケー | 2010-06-03 (木) 18:09:16

携帯サイトの構築は面倒だね。。。

今回は検索エンジン対策。

1.クローラー(Crawler)の巡回制限
◆robots.txt

これは別に携帯に限ったことではないのだが
検索エンジンのクローラーに巡回対して
User-Agent: *
Allow: / < - 受諾 Disallow: / <- 拒否[/code] *は全てを表す /はルートディレクトリ のように記入して robots.txt という名前で保存し ルートディレクトリに配置することで クローラーのサイト内巡回に制限をかけられるようだ。 例 [code]User-Agent: Googlebot-Mobile Disallow: /example/ Disallow: /hoge/hoge.html[/code] 参考元 ここは詳しく載っている:robots.txt ロボットテキストファイルの書き方作りかた
参考元:
robots.txtの書き方(保存版)

◆metaタグ

ページ毎に

  1. <meta name="robots" content="noindex, nofollow">

と記述してやっても有効らしい。

参考元:とほほのWWW入門 robots.txt とは?

2.IPアドレス制限

携帯サイトは専用にするためにIPアドレス制限を行っているわけだが
キャリアIPアドレスで制限をすると、クローラーも制限してしまうことになる。

そこで、クローラーを制限しないために。

・クローラーはUserAgentをそれぞれ偽装してくるのでキャリア問題はなし
・IPアドレスはそれぞれのクローラーに合わせて開放してやる必要がある

具体的には、以下の各検索エンジン公式サイトに
クローラーのIPアドレスが載っているので
それを参考にIPアドレスを開放してやる。

Google:モバイル検索についてのウェブマスター向け情報
Yahoo:モバイル版Yahoo!検索の検索エンジン(クローラー)について
goo:モバイルgoo 携帯検索クローラについて
livedoor:モバイルサイト検索用のクローラーについて
DeNA モバゲータウン:moba-crawler
froute(エフルート):froute-crawler

参考元:携帯検索サイトのクローラーのUser-Agent(ユーザーエージェント)とIPアドレス帯域、アクセス制限解除

本来ならば、これらを集計するわけだが
すでに集計されているサイトがあるので
そちらを参考にさせていただく。

ke-tai.org ケータイキャリア・クローラIPアドレス

これをキャリアのIPアドレス群に合成してやれば
無事通過させられる。

PHP,ガラケー | 2010-06-03 (木) 18:09:16 |

画像の回り込み

Posted by muchag | CSS,ガラケー | 2010-06-01 (火) 10:52:32

画像の回り込みは、CSSで

  1. float: left;

などと float で指定してやるのが普通だが
なんと au では、float が効かない・・・

だから au では、画像の本来の回り込み方法である
align属性を指定してやるそうな。

また、回り込みの解除については

  1. <br clear="all" style="clear: both;" />

こうしてやるのが一般的に紹介されているが
これだとDoCoMoでは上手くいかないらしい。

そういうわけでインラインの例を挙げると

  1. <img aling="left" style="float: left;"/>
  2. 解除したいところで
  3. <div clear="all" style="clear: both;"></div>

となる。

参考元
ke-tai.org ケータイでの画像回り込みについてまとめてみました
画像/回り込みタグ

CSS,ガラケー | 2010-06-01 (火) 10:52:32 |

DoCoMoのXHTML

Posted by muchag | HTML,ガラケー | 2010-05-31 (月) 14:08:20

相変わらず面倒くさいDoCoMo。

DoCoMoでXHTMLを正しく使うには

  1. <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  2. ではなく
  3. <meta http-equiv="ContentType" content="application/xhtml+xml; charset=Shift_JIS" />

という風にmetaタグを書き換えてやらなければならない。

また、XHTMLを利用する場合は
拡張子を .xhtml にする必要がある。

もし、拡張子を変更できないなら
.htaccessで

  1. AddType application/xhtml+xml .html

と宣言してやる必要があるそうだ。

そして、.php で通すなら

  1. header("Content-type: application/xhtml+xml");

こうしてやることでXHTMLが利用できる。

参考元
iモードHTMLとiモードXHTMLを正しく切り替える方法
ドコモ端末でCSSを利用するには

HTML,ガラケー | 2010-05-31 (月) 14:08:20 |

MobilePictogramConverter(絵文字の3キャリア自動変換)

Posted by muchag | Library & PlugIn & AddIn,PHP,ガラケー | 2010-05-30 (日) 0:33:47

やっとこさサイトが形になってきたけど
絵文字が DoCoMo だけしか出ない。
DoCoMo の番号を平打ちしたので当然だけど。

そこで調べてみると、以下が大好評♪
MobilePictogramConverter

でも、リンク切れ・・・orz
おっと配布代行サイトめっけ!
PHP Labo 絵文字の表示について

デフォルトでは、当該ファイルの1つ上のディレクトリに
MobilePictogramConverter フォルダを置く、という設定らしい。

でも、自分でパスを通してやれば任意の場所でOKということなので
それでいいや。

雛形

  1. /********* 絵文字変換の設定 *****************************************/
  2.  
  3. //絵文字の変換(true ... 変換する / false ... 変換しない)
  4. define('PICTOGRAM_MODE', false);
  5.  
  6. //プログラムファイル名
  7. define('PICTOGRAM_MAIN_FILE', '../MobilePictogramConverter/MobilePictogramConverter.php');
  8.  
  9. //画像格納ディレクトリ
  10. define('PICTOGRAM_IMAGE_DIR', 'http://www.example.com/MobilePictogramConverter/img/');

使い方は

  1. require_once 'MobilePictogramConverter.php';
  2.  
  3. $str = pack('H*', 'F89F'); // DoCoMo 絵文字 (太陽のマーク)
  4. $mpc =& MobilePictogramConverter::factory($str, MPC_FROM_FOMA, MPC_FROM_CHARSET_SJIS);
  5. echo $mpc->autoConvert();

こんな感じで、後は使いやすいように改変。

引用元:MobilePictogramConverterの使い方について

絵文字一覧

ちなみに、3キャリアの絵文字比較表は
2009-05-20更新
メール・ウェブ変換表(docomo ⇒ 他キャリア)
2006-11-22更新 DoCoMoコード表あり
ELIXIR 絵文字変換対応表

DoCoMo
iモード対応絵文字

Library & PlugIn & AddIn,PHP,ガラケー | 2010-05-30 (日) 0:33:47 |

携帯サイトからメール送信

Posted by muchag | PHP,ガラケー | 2010-05-29 (土) 13:14:55

携帯サイトで PHP からメールを送信すると文字化けするそうで
文字列にあれこれ手を加えなければいけない。

ひとまず覚書を。

  1. //メールエンコーディング
  2. mb_language("ja");
  3. mb_internal_encoding("ISO-2022-JP");
  4.  
  5. //本文エンコード
  6. $mail = base64_encode($mail);
  7. $mail = mb_convert_encoding($mail,"ISO-2022-JP","EUC-JP");
  8.  
  9. //subjectエンコード
  10. $subject = mb_convert_encoding($subject, "ISO-2022-JP","EUC-JP");
  11. $subject = mb_encode_mimeheader($subject,"ISO-2022-JP");
  12.  
  13. //ヘッダエンコード
  14. $header .= "Content-Type: text/plain;charset=ISO-2022-JP¥n";
  15. $header .= "Content-Transfer-Encoding: 7bit¥n";
  16. $header .= "MIME-Version: 1.0¥n";
  17. $header .= "X-Mailer:PHP/" . phpversion() . "¥n";
  18. $header .= "From:" . $admin . "¥n";
  19. $header .= "To:" . $email . "¥n";
  20.  
  21. //メール送信
  22. mail($email,$subject,$mail,$header);

説明)

mb_language(“ja”);で日本語であることを宣言。
mb_convert_encoding();は、内部文字エンコーディングを設定あるいは取得する。

文字コードをISO-2022-JPにするとmac、windows製両方で本文・タイトルが閲覧可能になる。
base64_encode();は本文・タイトルがメールでも読めるように文字を変換する。
mb_encode_mimeheader();は、MIMEヘッダの文字列をエンコードする。

メール送信するプログラムはmail();を使おう。mb_send_mailは自動的に変換されるため、設定のエンコードプログラムが無効になる。

引用元:php-メールのタイトル・本文の文字化け解決

PHP,ガラケー | 2010-05-29 (土) 13:14:55 |

携帯サイトの文字コード

Posted by muchag | PHP,ガラケー | 2010-05-29 (土) 2:12:33

参考元:第3回 携帯サイトの文字コードに気をつける

PHP,ガラケー | 2010-05-29 (土) 2:12:33 |

mailto

Posted by muchag | HTML,ガラケー | 2010-05-27 (木) 18:10:06

各サイト内でよく見かける
「このサイトをお友達に紹介する」
を使いたい。

その際は基本的に以下の通り

  1. <a href="mailto:hoge@example.jp?subject=hoge&body=hoge%0D%0Ahoge%0D%0A">

※「%0D%0A」は改行コード(CL&LF)

その際の注意点を少々。

携帯サイトの場合
「CC」「BCC」

機種によって使えたり使えなかったり。

文字コード

現時点ではメールの文字コードは
「ISO-2022-JP」にするとよいっぽい。

この文字コード変換を
URLエンコード(URLエスケープ)というらしい。

HTML,ガラケー | 2010-05-27 (木) 18:10:06 |
次ページへ »