mobile

3キャリア共通のサイトを作成する場合のDOCTYPE宣言

携帯サイトを作成する場合、キャリア別に作成する場合はそれぞれDOCTYPE宣言が異なります。
しかし、3キャリア共通のサイトを作成する場合には以下のように記述します。

<?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">

この場合、拡張子は.htmlで保存します。
しかし、docomoのみ拡張子が.xhtmlでないと動作しませんので、.htaccessに以下を記述しサーバへアップします。

AddType "application/xhtml+xml; charset=Shift_JIS" .html

==================================

こちらを参考にさせていただきました。

モバイル機器向けXHTML仕様

携帯サイトの作り方

 

auで画像に文字を回り込ませる場合

携帯サイトで画像を左に配置し、文章を右に回り込ませたい場合、以下のように記述するかと思います。

<img src="img.jpg" style="float:left;" align="left" />
<div style="color:#ff0000;">回り込む文章</div>

auではfloat指定ができないので、同時にalign="left"を指定します。

これでうまくいくかな?と思ったのですが、文章が回りこまず。。。
調べてみたところ、auでは回り込む文章にdivなどのブロック要素を使うと、画像のalignがクリアされてしまい回り込まないのだとか。

そのため、以下のように記述したところうまく文章が回りこみました。

<img src="img.jpg" style="float:left;" align="left" />
<span style="color:#ff0000;">回り込む文章</span>

これを知らずtableでレイアウトしていた頃がありました。。。

 

PCで携帯サイトを確認する

PCで携帯サイトを確認したい場合、User AgentがIE、Firefox等のPCのブラウザだとはじかれて見れない場合があります。
そういった場合はFirefoxのアドオン「User Agent Switcher」を使い、User AgentをDoCoMo、Softbank、au等の携帯にすれば、ブラウザで確認することができます。

==================================

こちらを参考にさせていただきました。

Firefox Add-ons User Agent Switcher

FlashLite1.1メモ

FlashLite1.1で待ち受けFlashを作る際の注意点

  • フレームレートは10~15fps
  • ファイル容量は100KBまで。
    実行時にメモリ上に展開されたときに制限を超えないように。
  • メモリオーバーの場合は赤いブロックで表示されてしまう。
  • 使用メモリを確認するにはfscommand2("GetTotalPlayerMemory")と
    fscommand2("GetFreePlayerMemory")を使用する。
    使用メモリは1000KB以内に抑える。(モトローラ製M702iS,M702iGだけは600kbなので注意する。)
  • 実機がない場合、ムービープレビューを使用する。
    (搭載メモリを突破した時にエラーが出るので分かりやすい。)

また、容量を軽くするために以下を確認する。

  • 透過PNGを使用している場合は、32(24)ビットカラーのPNGだとファイルサイズが大きくなるので、Fireworksなどで8ビットカラー(透明あり)で書き出す。
  • 画像のビットマッププロパティを開いて 圧縮が「写真画質(JPEG)」になっていると メモリオーバーになる事があるので、圧縮が「ロスレス(PNG/GIF)」になっているか確認。
  • CS3でなくFlash8で書き出すとよい?(CS3にバグあり?)
  • 複雑なベクター形状はできるだけビットマップに変換を。その他アルファやグラデーションなどは可能な限り使わないほうがよい。
  • 細かい文字の画像化
  • && 、||ではなくand、orを使う
  • 変数名は短くする
  • ラベルは使用しないで、フレームナンバーでジャンプする
  • GIFをPNGやJPGにする

==================================

こちらを参考にさせていただきました。

ファイル容量の軽減(FLASH-JP.COM)

携帯向けFlash actionscript 一覧

▼Flash Lite 1.0/1.1メモ▼ 

マーキーが1度しか流れない?

私はdocomoユーザーです。実機でのテストもdocomoでしかできず、softbankとauのテストは他の方におまかせしています。

先日、3キャリアそれぞれに対応したXHTMLを作成したのですが、auのみマーキーが1度しか流れないとの連絡が。
調べてみると、以下の記事がありました。

仕様と実装が違う!ケータイのマーキー記述方法

こちらの方法で無事解決しました!これで一安心。

携帯3キャリア対応のXHTML 参考サイト

携帯サイトを作成するにあたって、以下を参考にさせていただきました。

3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン
3キャリアの基本的なことから、3キャリアで1枚の XHTML ファイルを読み込ませることを前提としたタグの紹介。

3キャリア対応ケータイXHTMLのTIPS 8つCommentsAdd Star
各キャリアの違い、入力文字制御のことなど。

携帯サイトのDOCTYPE宣言について
3キャリアのDOCTYPE宣言、注意点など。

携帯サイトは3キャリアそれぞれなので難しいですね。。。

その他のカテゴリー