appMobi (Hello World) - himajin315の記録

インストール完了したら早速使ってみましょうか(∩´∀｀)∩ﾜｰｲ

って言ってもなにを…
と思ったわけですよー(´ω｀)ﾉ

う〜ん。。。とりあえず、APIでしょ(*´ω｀*)

画面右上にあるボタンからAPIと書かれたアイコン発見( ´∀｀)bｸﾞｯ!

飛んでみると、、、

Javascript API Reference 発見v(￣Д￣)v ｲｴｲ

英語しかないみたいだね(´・ω・`)

頑張って読もうか！！

φ(ﾟДﾟ )ﾌﾑﾌﾑ…

へぇ〜(ノ)･ω･(ヾ)

ほうほう(*´ω｀*)

使ってみないとわからないｗｗｗ

実際に使ってるものを探そうではないか！

ってことで Hello World のサンプルを動かしてみよう(・ε・)ﾌﾟｯﾌﾟｸﾌﾟｰ

demo.HelloWorld　を選択！
そしたらHelloWorldアプリ起動(*´ω｀*)

ついでにソースも(ΦωΦ)ﾌﾌﾌ…

~/appMobi/demo.HelloWorld/3.4.0/index.html

にあるので。。。（自分の場合は）

さっそく読みながら動作確認(^^)

いろいろ書かれているけど、重要な部分を見てみることにしよう！

327     <button id="btnBeep" ontouchstart="beepOnce();">Beep</button>

bodyに記述されている。
これが「Beep」のボタンの記述だね。

大事なのは「ontouchstart="beepOnce();"」がなにを指しているのか！？

ページ内で探してみると。。。

95     function beepOnce()       
96     {
97         try
98         {
99             AppMobi.notification.beep(1);
100         }
101         catch(e) {}
102     }

関数が定義されていまいた！
try、catchはエラー対策だと思う(・∀・)
つまり、大事なのはAppMobi.notification.beep(1);がなにを意味しているのか？

早速APIで検索(^^ゞ

「This method will cause the device to beep.」
このメソッドで音が鳴るってことですねφ(ﾟДﾟ )ﾌﾑﾌﾑ…

AppMobi.notification.beep(count);

countの分だけ連続で音が鳴るのか。
ボタンを押して音が鳴る理由がわかりましたv(￣Д￣)v ｲｴｲ

次行こうｗ
同様に…

328     <button id="btnVibrate" ontouchstart="vibrateDevice();">Vibrate</button>
329     <button id="btnBark" ontouchstart="bark();">Bark</button>
330     <button id="btnPlayDead" ontouchstart="playDead();">Play Dead</button>

ってあったので、関数探してみると、、、

108             AppMobi.notification.vibrate();

117             AppMobi.player.playSound("sounds/bark02.mp3"); 

124             document.getElementById("shroud").style.display="block";

を発見しました！（beepの下にあった）

それぞれをAPIを探すと、、、

vibrate()はまんまだね。

playSound(soundURL)もまんまだｗ
soundURLを指定して、指定した音を鳴らすという(°з°)

document.getElementById("shroud").style.display="block";　はJavascriptのAPIを見ないといけないみたいだね(´・ω・`)

getElementByIdとは…document.getElementById - 指定IDのエレメント取得 - JavaScriptリファレンス

ほうほう。
どうやら読みこむってことですね。
ここでは。。。

<div id="shroud" style="position:absolute;top:0px;left:0px;color:black;background-color:Black;width:768px;height:1304px;disp\
lay:none;" onclick="wakeUp();" ></div>

を読み込む！！

displayを黒にしていうの状態にするのかφ(ﾟДﾟ )ﾌﾑﾌﾑ…
そして大事になるのがwakeUp();ですね！

127     function wakeUp()            
128     {
129         document.getElementById("shroud").style.display="none";
130     }

関数を見てみると、displayを"none"にしていることがわかる。
PlayDeadはplayDead();という関数を使い、画面の状態を黒にしている。
その過程でgetElementById("shroud")を使い、id="shroud"を参照している。
id="shroud"ではwakeUp()関数が利用され、ボタンを押すことで画面を元に戻す仕組みである。

ってかな感じかなぁ(*´ω｀*)

一応ボタンを加えると動作するってのはわかりましたね(b´∀｀)ﾈｯ!
次は自分でボタンを作っていろいろやってみようと思います(ﾉ´∀｀*)