monaca、おみくじアプリのチュートリアルをやりました

monacaを使った理由

・アプリ開発にそろそろ着手したかったけど、普通にobjective-C等のプログラミング言語に手を出すと、その言語の基本を理解するのに時間がかかりそうで実際アプリを作るところまで時間がかかってしまいそうだと思ったから。(ぐーたらにつき)
・javascriptが読んでわかる程度、それもホントに簡単なところだけ。という残念な感じなのと、webサービスでもhtml・cssだけで作るというのに無理を感じているので。
・時々jQueryとかシンプルなjsを落として読み込むけど、そのファイルが周りで評価されていても自分で理解できてないことを使うのに恐怖を感じるからってのもある。

MDNのjsガイドを読み進めながらmonacaでアプリチュートリアル進めるぞーって意気込み。

詰まった、というかドキュメントの通りやって変に思ったところ

画像サイズが小さい

各要素にwidthプロパティが指定してあるけどこの通りやったらドキュメントに貼られてたキャプチャのようにはならなかった。
例えば"omikuji-box.png"の画像サイズは280pxなので小さくなるのは明らだし..
とにかくhtmlに書かれてるwidthプロパティ修正したら治った。
ちなみにcssの100%指定を変更すると横にずれた。

html

<div id="hako">
  <img src="images/omikuji-box.png" width="280" id="saisyo" />
  <img src="" width="440" id="kekka" style="display : none;"/>
</div>
<div id="bottombar">
  <img src="images/omikuji-btn-hajimeru.png" onclick="omikuji()" width="303" id="button">
</div>

positionプロパティとmarginプロパティを混在して使う必要性

hakoでpositionプロパティ使ってる意味がわからない。単純に。

css

#hako {
  width : 100%;
  text-align : center;
  margin : 10% 0px;
  height : 80%;
  position : absolute;
  left : 0;
  top : 0;
}

#bottombar {
  position : absolute;
  left : 0px;
  bottom : 30px;
  width : 100%;
  text-align : center;
}

HelloWorld的なのを終えて

html,cssが書けるところがやっぱり入りやすかった。今回はmonacaドキュメントがとても細かく説明されてたので、jsで理解できないところが特に無くてここに書くことも特になかって良かったけど、これやる前にSample Appsでやろうとして、ぐわぁぁーーとなったので次が怖いです。

あと、関係ないけど今回やっててposition:relativeの使い方間違えてたの気づいた。(absoluteの起点として使ってた….)

10月末までにチュートリアル残り3つ、クリア目指してがんばろー

CHROMA

世の中の "当たり前" を確認する