Game Salad-ドラッグ＆ドロップでiアプリ開発ができるソフトウェアforMAC
モジュールとか使い方を覚える必要はあるけど、複雑なコードを書かなくても、ちょっとしたゲームとかなら、簡単に作れてしまう、スマホアプリ開発用のソフトウェアです。
MAC OS用しかないのが、やや残念ですが、中々面白いです。
カテゴリー: モバイルサイト制作
HTML5＋PHONE GAPでスマホアプリ製作をもっと手軽に！
PHONE GAPは、HTML5＋CSS3＋JAVASCRIPTという既存のＷＥＢ制作と同じツール＆フローをベースに似て、スマートフォン向けハイブリッドアプリケーション制作を可能にするフレームワークです。もちろん、オープンソースです。
知人の制作したiアプリを 見せてもらいましたが、中々よくできてました。次の開発ではぜひ使ってみたいですね。
- PhoneGapの特徴
-
- HTML+CSS+Javascriptを使用したiPhone/Androidアプリ開発が可能
- ネイティブAPIのアクセスが可能
- iPhone/Androidを含むマルチプラットフォーム対応
- 既存のJavascriptフレームワークにも対応
- 様々なPhoneGapプラグインの存在
日本語サポートサイトはこちら。
http://phonegap-fan.com/
携帯サイト制作：PCで絵文字も表示確認する
１）外字ファイルの登録
DOCOMOサイトから”i絵文字”をダウンロード、解凍し、インストールする
→IEなどでDOCOMOの絵文字が見れるようになる。
ソフトバンクやauの絵文字は、基本のものは3キャリアで絵文字置き換えプログラムによって変換するからこれでOK。
２）FIREFOXでも絵文字を見る場合（シミュレーターなどで）
- コントロールパネルから、フォントフォルダを開き(Vista では、[デスクトップのカスタマイズ] [フォント])、i絵文字をインストールしたディレクトリにある外字フォント「docomo.tte」をインストールする。
- FireFox3でアドレスバーに 「about:config」 と入力して [Enter]キーを押す。
- 「フィルタ」の入力欄に 「font.name-list.*.ja」 と入力する。
- 表示された項目それぞれ、現在の設定文字列の先頭に「EUDC, 」を追加。
おお～。確認できた♪
３）FIREFOXの携帯エミュレータ
FIREFOXで携帯のサイト確認ができる。ユーザーエージェントを携帯のものに置き換えて、見た目をシミュレートする。
http://firemobilesimulator.org/ （携帯用シミュレータ）
http://www.qooin.com/firefox/useragent.html （ユーザーエージェントをスイッチする）
3キャリア対応携帯サイト制作覚書
3キャリア共通でコード利用したいのであれば、基本3G以上を対応機種と考えて、古い機種についてはある程度の割りきりが必要。
XHTMLで記述
コンテンツのMIMEタイプもHTTPヘッダーも「application/xhtml+xml」
文字コードは、Shift-JIS
CSSは基本インライン
画像の全画面表示サイズは、240pxで作成してwidth=100%としておく
画像フォーマットは、JPEGかGIF
ページ全体の容量は、トップページで100KB以内（広範囲で対応させるには5KB）
文字サイズは、標準で全角10文字程度（小で13文字程度）
絵文字を共通化するにはPHPなどの絵文字共通化プログラムが必要
コーディングでインデントを使わない
【デザインのポイント】
<hr>はキャリアによって指定・表示に癖が出る
・ドコモでは、XHMLでは全ての属性に非対応
・ソフトバンクは、罫線の上下にマージンができる、hrの余白調整はmargin/paddingプロパティで対応可能、noshadeにも対応
・auは、ライン色はcolorで指定可能、height/borderは指定できない、text-alignプロパティが使用可能（au以外では、align属性を使用する）
・WIDTHは全キャリア使用可能
・hrを使うより画像使用したほうがキレイにできる
画像
・ドコモXHTMLではalign属性が非対応、CSSでのフロートはauが非対応のため、画像の回り込みをするには、両方の属性を併用しなければならない
・回り込みの解除は、<br clear=”all” />だが、ドコモ非対応、ドコモでは、「blockquote」「dl」「div」「form」「hr」「h1-h6」「ol」「ul」「p」「pre」にclear属性を記述すれば旧機種でも対応できる。
・画像のmarginはドコモでも対応
・画像のborderはドコモ非対応
リンク
・ドコモxhtmlは、<a>タグのname属性に非対応なので、<a>タグには、nameとidを両方使用する
・auでは、auではdivなどのブロックレベル要素間で1pxほどのすき間が生じてしまうというバグがある
・ドコモとau／ソフトバンクの違いということであれば、外部CSSにau／ソフトバンク用のCSSを書いておいて、ドコモにはインライン指定のCSSを優先させるといった手順をふむことで、違いを吸収するということが可能
・CSSはstyle属性が優先されるので、ドコモのインラインCSSとソフトバンク/auの外部CSSを共存する場合は、<DIV>タグを入れ子にして外側をインラインCSSにして内側のdivにソフトバンク/au用のクラスを指定する
・アクセスキーの設定：一般的には「[0]がトップページ」「[9]が1つ前のページへ戻る」「[5]更新」としているサイトが多い
・入力モードの設定：ドコモのiモードHTMLの場合は、「istyle」属性を、iモードXHTMLの場合は、style属性で「-wap-input-format（WCSS）」を指定します。auの場合は「format」属性で、ソフトバンクの場合は「mode」属性をinputタグに指定します。3キャリア対応で書く場合は、それぞれの属性をinputタグに併記すれば問題ない。ただし、-wap-input-format（WCSS）をソフトバンクで読み込むと入力制限がかかるバグがある。このため、入力設定をしたいフォームでは、スクリプト側でキャリアごとの振り分けをするとよい。
振り分けをする場合は
DoCoMo
style=-wap-input-formatのみ
au/SoftBank
istyle、format、modeをすべて記述
という感じになるように切り替えてやると、おかしな状況にも対応でき、きちんとした入力モードの切り替えが実装できる。
Smartyのプラグインなり、ヘルパーにまとめるなりしてやると、簡単に使える。