PhoneGapを使用した単語帳アプリの制作

PhoneGapを使用した単語帳アプリの制作
情報科学研究室
４年 関根麻奈美 戸澤友紀
私達は、以下の3点を目標にPhoneGapを使用したスマホ用の単語アプリケーションの制作を行った。
①画面は見やすく、統一感を出すこと
②動きをスムーズにし、誰が使用しても分かりやすいようにすること
③今まで使用したことのない言語に触れ、情報技術・知識の向上に繋げること
① 開発環境
② Monacaの使用方法
Monacaは、アシアル株式会社が提供しているスマートフォンアプリケーショ
ン開発のためのオンラインで使えるプラットフォームである。
Web上で動作するMonaca IDEを使用し、HTML5とJavaScriptを記述すること
で、iOSとAndroidの両方に対応したクロスプラットフォーム開発を実現する。
その為、開発に必要な知識はHTML5、CSS、JavaScriptの3つである。
①Monacaに会員登録をして、ログインする。
②ダッシュボードからプロジェクトの作成をクリック、
プロジェクトの作成を選択する。
本制作では無料のBasicプランを利用した。
3プロジェクトまで作成出来るが、プロジェクトを
複製し、バックアップとして使用する分を考えると
少々少なく感じるかもしれない。
しかし、容量も大きく、実機2台までのデバック
も行えるので、不便なく制作する事が可能である。
Monacaの料金プラン（年額）
③Monaca IDEに遷移する。
Monaca IDE画面
④作成開始！
③ 開発言語
④ 使用例
PhoneGap（オープンソース名：Cordova）は、Adobe社により公開されている、
スマートフォン向けハイブリットアプリケーション制作のためのフレームワーク
である。
HTMLとJavaScriptの技術を使用し、iPhone/Androidのネイティブアプリケー
ションを開発する手法を一般的に「ハイブリットアプリケーション」と呼ぶ。
つまり、PhoneGapを使えばObjective-CやJavaを書かずに、Webアプリケーショ
ンの技術を用いて、ネイティブアプリケーションを作ることが可能となる。
Ⅰ.HTML
HTML（Hyper Text Markup Language）は、Webページの構造を作成するために開発された言語。
PhoneGapでは、画面設計をする際に使用する。
③で記載した言語を全て使用して作成したページの例。
ここに記載したHTML、CSS、JavaScriptは全てのコードではなく部分的なもの。
HTML部分
CSS部分
JavaScript部分
Ⅱ.CSS
CSS（Cascading Style Sheets）は、Webページのスタイル（デザイン）を指定するための言語で、HTMLと組み合わせて使
用する。
PhoneGapでは、画面デザインをする際に使用する。
Ⅲ.JavaScript
プログラミング言語で、HTML内にプログラムを埋め込むことで、HTMLやCSSでは表現できない様々な機能を付加し、動
きのあるWebページを作成する事が出来る。
PhoneGapでは、画面操作・その他の処理を設定する際に使用する。
Ⅲ-Ⅰ.jQuery
JavaScript用のライブラリで、Webブラウザ用のJavaScriptコードを容易に記述できるよう設計されたもの。
⑤ 制作物
⑥ 付録
今回の制作では、「単語」をコード内に始めから入力した。
制作した単語帳は枠組みとしても使用できるため、コード内に書かれた
「単語」を好みのものに書き換えることで別の単語帳として使用する事が可能
である。
この付録では、ユーザーが単語を追加していく事の出来る単語帳のコードを
記載する。リストページに単語帳を追加するまでの最低限のコードの為、単語
の削除や戻るボタンはつけていない。
HTML部分
問部分
答部分
CSS部分
制作したアプリ、「黒ねこ★単語帳」の
イメージキャラクターを務める2匹。
スタート画面ではこの2匹の内のどちら
かの猫がアプリの開始を促す。
JavaScript部分
答の部分をタッチすると、
答として入力した文章が問
の下部分に出力される。