PhoneGap Buildで作るスマートフォン用カメラアプリ

カメラ起動ボタンへのTouchイベント登録

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLのボタン要素に、カメラを起動させる為のJavaScriptのTouchイベントを登録する方法について解説致します。
講師:
03:35

字幕

このレッスンでは HTMLの「button」要素に カメラを起動させるための JaveScriptの タッチイベントを登録する 方法について解説いたします まずはダウンロードしてきた こちらの「camera_touch_event」 というフォルダの中に入っている こちらの「index.html」ファイルと 「js」フォルダに入っている 「index.js」 というフォルダを エディタで開いてください これがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それではさっそく レッスンをはじめていきましょう まずこちらのHTMLファイルで カメラを起動するための ボタンを確認しておきます カメラを起動するためのボタンは この部分ですね 「id="camera"」とついた 「button」タグとなります 今回はこちらにタッチイベント というものを 「JavaScript」で登録して カメラを起動するための準備を おこなっていきたいと思います それでは「index.js」 ファイルを開きましょう この「JavaScript」ファイルは もともとは「Git Hub」からダウンロードしてきた プロジェクトテンプレートファイル となりますが 今回のカメラアプリを 制作するにあたって ダウンロードしてきた状態から 少し内容を変更しています 大きなポイントとしては こちらの変数「var app」 の上に書かれていた コメントアウトされた 長い文章を削除しています そしてこの()の中の 引数に書かれていた 「デバイスレリ」というものを削除しています そしてこちらの「receivedEvent」の「function」の ()の中に書かれていた引数 「id」というものも削除しています そしてこの「receivedEvent」 の「function」の{}の間に書かれていた内容を 削除しています そのうえで今回のタッチイベント の登録をおこなっています タッチイベントはこちらの部分となります ではどのようにタッチイベント というものを作っているのか 確認してみたいと思います まずは「$」マークの() その中にタッチイベントを登録したい要素 「button」 IDを示す「#」に 「camera」というかたちですね そして「.on」と書いて「(」 そしてその第一の引数のところに 「touchstart」と書きます この「touchstart」というイベントは この「button」要素が タップされたらという意味合いになります 同じような意味合いのものに 「クリックイベント」というものがありますね こちらの中に「click」と書くものです それとほぼ同義の意味合いになります そしてその後に「function」と書いて 「( ){ });」 と書いてこの「}」のあとですね こちらの部分に実際に カメラを起動するための 処理を書いていきます このように書くことで こちらの「button」要素に タッチイベントを 登録することができました 以上でレッスンは終了です 今回はHTMLの「button」要素に カメラを起動させるための JavaScriptの タッチイベントを登録する方法について 解説いたしました 以降のレッスンでは アプリ内で立ち上げる カメラの設定方法について 解説いたしますので そちらも合わせて ご確認ください

PhoneGap Buildで作るスマートフォン用カメラアプリ

PhoneGap Buildとは、HTMLやJavaScriptを使って制作したファイルをWeb上にアップロードするだけでiPhoneやAndroidなどのモバイル端末向けのアプリに変換してくれるウェブツールです。このコースでは、PhoneGap Buildを利用してスマートフォン向けのカメラアプリを作成します。

1時間10分 (21 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年02月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。