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部分答の部分をタッチすると、答として入力した文章が問の下部分に出力される。