数年後、このブログはサクセスストーリーとなる! / written by イノクマ(仮)

XDKについて昨日までに勉強したことの備忘録的に。

ちょっとまだまとめきれてないですが、まずは自分が使うためのヘッダを決めてしまうことにしました。
……普通にxHtmlでホームページを作る時、大体、<head>タグの中はコピペするだけです。(僕の場合)
んで、HTML5でアプリを作る場合も自分なりに定番の<head>タグの中身を決めてしまおうかな……と。(当然コードの意味を理解しつつ)

タイトル
<title>Your New Application</title>

文字コード
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>

アプモビライブラリの読み込み
<script type=”text/javascript” charset=”utf-8″ src=”http://localhost:58888/_appMobi/appmobi.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”http://localhost:58888/_appMobi/xhr.js”></script>

アプモビがアクティブになる前に実行するスクリプト……具体的に何に使うんだろう?
var init = function(){
};
window.addEventListener(“load”,init,false);

ここが良くわからんけど、どのデモにも記載してあるから、一応書いておくべきなんだろうな……おそらく、タッチイベントのクロスブラウザ的なものの対処なのかな?
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener(‘touchmove’, preventDefaultScroll, false);

ここでビューポイントなど表示に関することを設定する。
スマホレイアウトって、この部分が重要ですよね……<viewport>タグだけでうまくやろうとして、失敗していた部分をここで解決できる。
とくに、慣れるまではsetRotateOrientationを使ったアプリを中心に作ろうと思っています。(スタイルシート一枚でかっちり作って、レイアウトの崩れを気にせずいけそうなので)
ここに書いた以外にもスマホのデバイス関連の設定をここでカッチリ設定してしまう。
function onDeviceReady() {
AppMobi.display.useViewport(768,1024);ビューポートの設定
AppMobi.device.setRotateOrientation(“landscape”);縦横を固定する
AppMobi.device.setAutoRotate(false);縦横の切り替えに関する部分、上とセットっぽい。
AppMobi.device.managePower(true,false);バッテリー残量に関する部分
AppMobi.device.hideSplashScreen();余計なものを消すためのコードっぽい。
}
document.addEventListener(“appMobi.device.ready”,onDeviceReady,false);

スタイルシートの読み込みなど
<link rel=”stylesheet” href=”./css/style.css” type=”text/css” />

……と、<head>タグの中身はこんな感じで良さげです。
「良さげ」とか「っぽい」とか書きすぎですね。
よくわかってないってことが丸出しですw

明日までにはもうちょっとカッチリ理解して、コピペするだけでよい自分用のテンプレートを完成させようと思っています。
で、そこまでいったら、ゴリゴリ書き始めるぞぉ~(^^b

最後まで読んでいただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です