非プログラマ指向学生向けのアプリ作成演習
TRANSCRIPT
非プログラマ指向学生向けのアプリ作成
演習東京工科大学 メディア学部
藤澤 公也
Kimiya FUJISAWA「 HTML5×Monaca プログラミング教育事例セミナー テスト投稿藤澤の東京工科大学メディア学部の事例で質問がある方は #monaca0913 でどうぞ。」
自己紹介• 東京工科大学 メディア学部 専任講師
• メディア学部設立時（ 1999 年）から現職• コンピュータ・情報リテラシ、プログラミング、システム開発などの科目を担当
• 最近興味があること• オープンデータ /OpenStreetMap• モバイルデバイス
TOYAMA, Norio「こんな感じでよろしいでしょうか #monaca0913 」
全体概要• メディア学部には様々な学生がいますが、本格的なプログラマとして開発することを考える学生はほぼいない• 多くの学生はコンテンツ制作などを志している
• こういった学生たちが対象• スマホ・タブレット向けアプリ開発とはどういったものか、を Monaca を使って実際に開発を行うことで身に付ける
メディア学部の位置づけ• 東京工科大学
• 現在は蒲田に本部を置く大学• 元々は八王子
• 蒲田キャンパス 2 学部（医療保健学部・デザイン学部）• 八王子キャンパス 4 学部（メディア学部・コンピュータサイエンス学部・応用生物学部・工学部）
• メディア学部• 東京「工科」大学にあるが、文理融合系学部• メディア コンテンツをターゲット≒
• 作成だけでなくビジネスとしての検討なども対象• 受験科目： 5 教科から 3 教科選択
• 以前は 3 （４）教科から 2 教科選択• つまり、理数系でなくても受験可能
メディア学部の学生って…• 入学時はコンテンツ制作を志す学生が大半
• コンテンツ アニメ・映像、音楽、ゲーム≒
• でも学生の半数近くは IT 系に就職• 世間の需要（＝求人）もあるけど、学んでいく中での変化も大きい
• コンテンツに必要なもの・各自の興味はコンテンツ制作そのものだけにあるわけではない、ということに気付く
就職状況 | 就職・キャリア支援 | 東京工科大学http://www.teu.ac.jp/employment/013369.html より
実施している演習• スマートサービスデザイン
• 必修科目「メディア専門演習」の 1 テーマ• スマートフォン・タブレットアプリの企画・設計ができ、それらを HTML/CSS,JavaScript （ +Cordova ）を駆使してアプリケーションとして実装する• 2013 年度から実施• 週 1 回 2 コマ（ 90 分 ２）を✕ 15 週
「スマホアプリを作ってみよう」
演習の位置づけ• メディア基礎演習
• 1 年後期・ 2 年前期に実施• 様々なジャンルの内容を体験
• Processing （ Java ）を使ったプログラミング体験などもある
• メディア専門演習• 2 年後期・ 3 年前期に実施• 各学期 1 テーマを履修• 全部で 22 テーマくらい
• プログラミングを行うのは 5 テーマくらい
演習を受ける学生の素養（カリキュラムは年度によって少しずつ異なるが）• メディア学部の学生は理系は少数派
• 受験科目で数学を選択する学生は少ない• 必須科目の中でのプログラミングは
Java （ Processing ）を半期• 選択科目では他にもいくつかあるが…プログラミングは苦手意識がある学生がほとんど
スマートサービスデザインの内容• スマートサービスデザイン
• 必修科目「メディア専門演習」の 1 テーマ• スマートフォン・タブレットアプリの企画・設計ができ、それらを HTML/CSS,JavaScript （ +Cordova ）を駆使してアプリケーションとして実装する• 2013 年度から実施
「プログラミングが得意でなくても、スマホアプリを作ってみよう」
演習の現場• 演習環境
• 常設デスクトップ PC （ Windows8 ） 40台• Android タブレットを各自に 1台用意• 学生は、自分のノート PC 、スマートフォンを利用してもよい
• 受講者：• 23名（ 2015 年度前期）• 定員は 25名（学期によって最大時は 40名）
• スタッフ：• 常勤教員 2名、非常教員 1名• TA/SA ： 3名
演習を補足する手立て• 相互補助
• ３，４名でグループ• アンケートにより、プログラミングが得意そうな人を各グループに入れるように
• Facebook グループ• 秘密のグループ• 情報共有および質問等受付に利用
Monaca を使う理由• クラウド化されている開発環境
• （ブラウザさえあれば）どこでも同じ環境で開発可能• 実機での確認が容易
• Monaca デバッガ• （作成したアプリの）実機へのインストールが不要• iPhone でも実行可能
• （今どきの学生にとって（？））作ったものがすぐに動いて確認できる＝動くものが作れる というのは非常に重要
演習全体の流れ• 前半
• アプリ作成手順・スキル等の学習• 特定アプリを順に作ってみる• 後半に向けた企画も進める• ７，８週
• 後半• 独自のサービス・アプリを作成• ５，６週
• 最後• 作成したアプリの発表
最初に示す例• 工科大銅像図鑑アプリ
• 八王子キャンパスにある 30 近い銅像を紹介・閲覧する図鑑アプリ
画像は「声優・演劇科ブログ | 声優・俳優専門学校 | 日本工学院専門学校・日本工学院八王子専門学校http://blog81.neec.ac.jp/archives/51095880.html」より引用
演習前半の流れ• 第 1 週
• 必要なアカウントの取得• Monaca/POP/Facebook
• タブレットのセットアップ• 第 2 週
• POP による画面遷移の検討• 第 3 週
• Monaca を試してみる• HTML/CSS の基礎
• 第 4,5 週• OnsenUI によるページ遷移• ページ間のデータ渡し
• 第 6,7,8 週• 各種スキル習得
• ローカルストレージ• カメラ• 地図（ OpenStreetMap ）の表示（ leaflet.js ）など
• 並行して後半に向けての企画調査も実施
利用しているツール（１）：POP• POP － Prototyping on Paper
• https://popapp.in/jp• （ Monaca関係ないけど）• アプリの画面遷移を考えるために利用• 紙ベースで作成した画面遷移をスマホで取り込んでプレビューしてみることができるツール• 各画面を取り込んで、画面間のリンクを作成できる
Monaca で教えていること（１）：HTML/CSS• HTML の基礎
• HTML の構造• 基本的なタグ• メタ情報の入れ方
• link,script• CSS での装飾
• id, class
• 1 回（ 2 コマ）程度なので、 HTML/CSS を網羅はせず全体像をつかむ程度• 禁止事項などの説明は含める• あとは実践にて
Monaca で教えていること（２）：OnsenUI• OnsenUI での画面構成・遷移
• Angular.js を利用• JavaScript そのものの基礎を教えているわけではないので、言語理解よりも MVCやアプリの完成を優先• 日本語のドキュメントが少ないことは学生にとってのデメリット
• まずは、紙芝居的アプリを作る• ボタンやリスト表示の利用
• OnsenUI のサンプルサイトからコピペ• POP での各ページを HTML で実現し、ページ遷移するようにする
（以前は、ネイティブ UI と jQuery を利用）
TOYAMA, Norio「 POP いいですね！ #monaca0913 」
Monaca で教えていること（３）：データ構造• JSON によるデータの取りまとめ
• JavaScript アプリにおける構造化データの取り扱い• サンプルの実現
• 個々の銅像ページを個別に作っている• データ渡しによって別のコンテンツを表示するように変更 TOYAMA, Norio「 Angular.js を使うかどうか考えてまだやってないんですよね。使った方がいいですかねえ。
#monaca0913 」
Monaca で教えていること（４）：デバッグ他• デバッグについて
• 手動（いわゆる printf デバグ）、コンソール
• ローカルストレージ• データのアプリでの保存• アプリにデータを追加できるように
Monaca で教えていること（５）：モバイルデバイス特有の機能• カメラ
• データ追加時に写真も追加• 地図（ OpenStreetMap ）の表示（ leaflet.js ）、マーカの表示
• 地図上にピンをつけて銅像の場所を表示• GPS による位置情報取得
• データ追加時に現在地から位置情報を記録• ここまでで、とりあえずサンプルが完成する
Monaca で教えていること（６）：その他• （補足資料として）
• ニフティクラウド• 録音・再生• GoogleMap• 加速度センサ
• 過去に演習を受けていて、現在、 SA として授業補助をしてくれている学生が作成
演習後半の流れ• 企画調査・検討
• 前半に並行して実施• 企画の発表
• 教員ごとにグループに分けて実施• 最終課題制作
• ４，５週• 最終課題発表
企画の調査・検討と発表• 身の回りの役に立つサービスを検討• 既存のアプリを調査し差別化• ３つほど検討して発表• 実現可能性を含めて教員からコメントし、後半で作るものを決定
• 学生の半分くらいは、銅像図鑑アプリを改良した感じのアプリ
課題制作と最終発表• （特に）課題制作ターム
• 各自が制作を進める• 利用スキルが近い受講者同士でチーム作り直す
• チーム内で情報交換• 各自授業時間外に制作を進めることとを求め、授業時間にはうまくいかない部分の質問と解決を中心に進める
• 最終発表は 2段構え• 予選：グループ（上記の２，３チーム）単位で実施
• 相互評価と教員評価により各グループ 3名程度が決勝進出• 決勝：全体での発表
• 優秀者には、 MashupAward などへの出品を勧める
Monaca Education版のメリット• プロジェクト数（とビルド無制限）
• 無償版は３プロジェクトまで• Education版は１０プロジェクト
• 動いている状態を残して、プロジェクトの分岐• サンプルをインポート• なお、卒研だと 10 でも足りないという声も…
• プロジェクトの共有• スタッフにプロジェクトを共有
• その場で対処しきれない場合でもチェック・対応しやすい• 最終発表がスムーズに• 最終課題の回収• 今後はペアプログラミングなどもさせたい…
利用しているツール（２）：プロジェクタへの表示• 受講者は、藤澤のアカウントを共有• 最終発表時のデモは藤澤端末で実行
• 端末差し替えの手間や端末の相性を避けるため• プロジェクタへの表示は以下のいずれか
• ChromeCast• 画面のキャスト• プロジェクタによってはうまく動かないことも
• Android Screen Monitor• Android の画面を PC上に取り込むツール• http://www.adakoda.com/adakoda/android/asm/
学生の力作紹介• Wi-Fi MAP
• 大学の Wi-Fi の電波強度を登録してみんなで共有するアプリ• Heatmap を利用して強度を表現
• ファッションカレンダー• 自分の持っている服を登録• 着た服をカレンダーに登録• 過去に着た服のチェックができる
• 追っかけリマインダー• アイドルの追っかけのためのアプリ• 追っかけに必要な情報を登録• Google カレンダーを利用
• ダイエット応援アプリ• レコーディングダイエット支援• 万歩計機能• 歩いた距離を山手線で表現
• おせっかい家計簿• 学生向け家計簿アプリ• 状況に応じてコメントをしてくれる
今後の活用（検討中の内容）• ペアプログラミング
• せっかく共有が仕えるのでもっと有効活用したい• プラグイン利用
• Gold版が必要にはなってくるが• RFID等
アシアルさんへの要望• UI 基盤の安定…？• ドキュメントの統一• POP みたいな機能• グラフィカルな画面設計機能• 共有時に（閲覧できるけど）編集できない機能• スマートウォッチ（ Wear ）対応？
