More Related Content
Viewers also liked
Viewers also liked (15)
Similar to ビジネス系大学の学生が Monacaを使って スマホアプリ制作プロジェクトを やりきった
Similar to ビジネス系大学の学生が Monacaを使って スマホアプリ制作プロジェクトを やりきった (20)
ビジネス系大学の学生が Monacaを使って スマホアプリ制作プロジェクトを やりきった
- 1. HTML5×MONACA プログラミング教育事例セミナー 横浜商科大学商学部/嘉悦大学経営経済学部 遠山緑生 ビジネス系大学の学生が Monacaを使って スマホアプリ制作プロジェクトを やりきった
- 4. 成功事例
- 5. 成功事例
- 6. ご紹介する利用事例 「ビジネス系」大学学科の学生によるスマホアプリ制作 事例1: 嘉悦大学 経営経済学部 「研究会」 いわゆるゼミ 履修者15〜20人 対象者：大学2〜3年生 通常学期期間中、週１回の授業 事例2: 横浜商科大学 商学部経営情報学科 「経営情報特論Ｂ」 特別編成だが一般授業 履修者15人 対象者：「やる気のある（主に）大学１年生」向け 夏期特別集中講義（２週間＋α） 6
- 7. 7 1. 事例１@嘉悦大学 経営経済学部 ゼミ 2. 事例２＠横浜商科大学 商学部経営情報 学科 経営情報特論B 3. ビジネス系大学におけるMonaca活用に ついて私が知っている２，３の事柄 Agenda
- 8. 8 1. 事例１@嘉悦大学 経営経済学部 ゼミ 2. 事例２＠横浜商科大学 商学部経営情報 学科 経営情報特論B 3. ビジネス系大学におけるMonaca活用に ついて私が知っている２，３の事柄 Agenda
- 10. 事例1@嘉悦大学 前提 嘉悦大学経営経済学部 「研究会」 いわゆるゼミ 履修者15〜30人 対象者：大学2〜3年生 (+4年) 週１回の授業 教員ペアで合同ゼミ(遠山＋白鳥) Monacaベースのスマホアプリ作成 10
- 11. Monacaを導入してみた講義での制作例 「ポケモンXY対戦支援」アプリ開発グループ 2年秋〜3年夏の 3人グループによる プロジェクト 1年後の 「三年次研究・制作」 で最優秀賞 http://www.kaetsu.ac.jp/news14-10-21-03.html 11
- 12. 「やってみて、発表」：講義全体コンセプト まずやってみる やりながら発表し続ける 1. 最初に作りたいモノの企画を考える 2. 考えたらとりあえず手を動かす 3. 作りながら「必要な知識」を身に付ける 12
- 15. 毎週の講義構成 グループで作らせる： 2〜4人程度、一学期単位で制作 学期末には必ず発表大会 説明させる： 毎週必ずグループで発表 90分のゼミ時間は発表のみ、１グループ5分以上 発表内容 アイデアの提案 疑問点・分からなかった点・はまった点 教員２人がかりで徹底した質疑応答と次の課題提示 講義しない： 反転学習的課題提示 「資料を見て、提示された課題をこなしておくこと」 オンライン資料頼りまくり＆「まずググれ」 ドットインストール： http://dotinstall.com/ Monacaチュートリアル 15
- 16. 発表風景 16
- 17. Monacaを使う前 (2012年ゼミ) 全体進行コンセプトは一緒だが、 テキストエディタでHTML+CSS+JS+jQuery 2年生女子2名によるグループ 「らくらくiPhone-フリックを使用しない入力ツール」 その後の卒論発表 「スマートフォン用『セットリスト共有アプリ』の 企画とプロトタイプ作成」 17
- 18. Before Monaca時代 (B.M.): 手応え 「企画立案力」と「発表力」 はかなりいい感じ！ CSS + JS + jQuery もそれなりに 使えるようになる！ 18
- 19. Before Monaca時代 (B.M.): でも限界 企画と基本的なプログラミングが できても、「動く本物」にならない！ 実際にスマホで動かし、デプロイするまで至れない 非情報系環境の弱さ 本質的でないバッド？ノウハウ伝授をする場が弱い 19
- 20. Before Monaca時代 (B.M.): でも限界 企画と基本的なプログラミングが できても、「動く本物」にならない！ 実際にスマホで動かし、デプロイするまで至れない 非情報系環境の弱さ 本質的でないバッド？ノウハウ伝授をする場が弱い 20
- 21. 2013年: 1.5年間のイメージ 春学期: 「やってみて、発表しよう」講義進行に慣れる HTML+CSSの練習と、企画立案・発表に慣れる 「作りたいモノの画面モックアップ」を作るのが目標 秋学期：よりアプリっぽいものを作ってみる Monacaを使った JS+jQuery によるアプリ制作 より本格的にアプリ制作 学期末までに動くアプリを完成させるのが目標 （オプション）２年目春学期 改良し、バージョン２を作ってリリースする もしくは新プロジェクトに取り組む ３年夏休み：「３年次研究・制作発表会」で卒論v1として発表 21
- 22. 2013年秋学期 with Monaca の進行 JavaScript演習を授業中にはほとんどしない 10/15〜: まずはチュートリアル通りに作ってみる 10/22: 基本的な使い方を一緒に復習 少しサンプルを加工するという課題 11月冒頭: 以上を踏まえて作りたいアプリ提案 11月中旬: サンプル加工しようにもコードが書けなくなっ てくる 11月中旬: アプリテーマ別グループ分け(3,4人) 11/26〜12/10: 例題に基づくJavaScript再入門 年末〜1月：自分たちの課題に取り組む 22
- 23. After Monaca(A.M.): 手応え ９割方のグループが実機で何か動くモノを作れた！ Before Monaca は5割以下 半年でパッケージング、ストアデプロイまで たどり着けるグループが出てきた！ 作りながらもっと本質的なプログラミングの技術の 必要性に気付いたグループが増えた！ ループとか配列の必然性に12月ぐらいに気付くとか 「アルゴリズム」が必要であることに気付くとか 23
- 26. 26 1. 事例１@嘉悦大学 経営経済学部 ゼミ 2. 事例２＠横浜商科大学 商学部経営情報 学科 経営情報特論B 3. ビジネス系大学におけるMonaca活用に ついて私が知っている２，３の事柄 Agenda
- 28. 事例2@横浜商科大学 前提 商学部 経営情報学科「経営情報特論Ｂ」 特別編成だが一般授業 履修者15人 対象者：「やる気のある（主に）大学１年生」 夏期特別集中講義（２週間＋α） コア：毎日２時間連続(13:00〜16:10) x 10日 その後：各自課題としてプロジェクトに取り組む 教員：私＋嘉悦大学白鳥様（１週目）＋ Asial生形様（２週目） 28
- 31. １週目のイメージ (8/17〜8/21) １日目：企画をみんなでブレインストーミングしよう ビジョン・コンセプト・ペルソナ・シナリオを作る ＆そのアプリで一番大事な画面を考える ２日目：ペルソナとシナリオを考えてみよう 一番大事な画面のイメージを、 シナリオと連携させて作る ３日目：ペーパープロトタイプを作ろう ユーザがどう使うか、 アプリケーションの動きを考えてみよう ４日目：アイデアを完成させて中間発表 ５日目：Monacaの使い方に慣れて、 デモアプリを実際に動かしてみよう
- 32. 授業風景 32
- 33. ２週目のイメージ (8/24〜28) 3日間で「おみくじアプリ」を１から作ってみる １日目：HTML入門 ２日目：CSS入門 ３日目：JavaScript+jQuery 入門 ４日目・５日目： ミニワーク： 自分の企画したアプリの画面を作り始めよう その後：一ヶ月かけて各グループ毎にプロジェクト制作中 (9/26 発表予定)
- 34. 授業風景 34
- 35. 講義進行 １週目 毎日１時間目は「昨日のグループ作業」の発表＆質疑応答 その後毎日のテーマについてグループ作業 ２週目 ３日間 割と普通に講義＆演習スタイル まず講義、後半1/3でちょっとした演習課題 それ以降 自主的に取り組んでもらいつつ、見回って指導 35
- 36. 手応え（途中経過） 集中授業、２時間連続毎日はやっぱり効果的 学生が楽しそうなのだったので（私は）満足 Asial 生形さんの講義は実にコンパクトに まとまってて良かった jQueryを前提としたJavaScript入門? どれぐらい達成できるかはこれから 36
- 37. アンケート結果 37
- 38. 38 1. 事例１@嘉悦大学 経営経済学部 ゼミ 2. 事例２＠横浜商科大学 商学部経営情報 学科 経営情報特論B 3. ビジネス系大学におけるMonaca活用に ついて私が知っている２，３の事柄 Agenda
- 39. どうしてこれをやってるのか：個人的職歴 元々の専門は計算機科学 OSとかWebとか位置情報とか &大学ICTインフラ整備屋 W3Cのシステム管理チーム、慶應義塾大学ITC助手、 嘉悦大学CIO、横浜商科大学情報室リーダー ＆教員: 大学１年生向けICTリテラシの非常勤講師(1999〜) 前職（嘉悦大学,2008〜2013）から 「ICTを活用したジェネリックスキル育成」 みたいなのをテーマにいろいろ考えている 初年次教育、実学 その一環としてのプログラミング教育 39
- 40. 「基礎教養」としてのプログラミング 今時のホワイトカラーになるための教育 「どうやってシステムが動いてるのか」 ぐらいは想像できるようになっといてよ エンジニアが育ってくれたらそれはそれで 40
- 42. そのために学生時代にしておくこと 一通り「作ってリリースしてみたことがある」 ができれば最高 自分の言葉で説明＆プレゼンできるようになる 「作りたいモノ」と「作ったモノ」について 最低限の目標： 自分の手で作ってみたものについてプレゼンする 42
- 43. 43
- 44. でも、教員やってきての、悩み？ 教養的プログラミングの授業は やるだけ無駄なような気がする 周りのエンジニアに、「授業で書けるようになった」という人が あまりいない 授業以外のきっかけが必要 「つまらない授業」としてのプログラミング経験 いわゆるプログラミング入門的講義の多くが、 「本物を作るまでの距離」が遠すぎる 授業をやればやるほど、学生のモチベーションが下がってく 授業の最初の数回が「挫折経験を与える」を与える Etc… 44
- 45. でも、教員やってきての、悩み？ 教養的プログラミングの授業は やるだけ無駄なような気がする 周りのエンジニアに、「授業で書けるようになった」という人が あまりいない 授業以外のきっかけが必要 「つまらない授業」としてのプログラミング経験 いわゆるプログラミング入門的講義の多くが、 「本物を作るまでの距離」が遠すぎる 授業をやればやるほど、学生のモチベーションが下がってく 授業の最初の数回が「挫折経験を与える」を与える Etc… 45
- 46. 動機が第１、やるのが第２、他は後で 「プログラミング」に興味がなくても 「スマホのアプリ作りたい」という具体的な形で 動機がある学生は多い なるべく短く 「自分で考えたものを作った気になる」 にはどうしたらいいか なるべく多く 「自分で考えたこと・作ったモノ」について 発表してもらうにはどうしたらいいか 46
- 47. そのために：求めていた環境 リアリティ：「自分のスマホで動くアプリが作れる」 学生のリアルな利用感に訴えかけられるゴールが提示できる 「App Store / Playストアに自分の作ったものがならんでる」 までもっていけると良い 手軽さ 最初の３時間でつまづかない環境 学生自身のBYOD ノートPC&スマホで十分に使える環境 実用性・発展性 HTML5/CSS3/JS: なるべく腐らない、用途の広い言語でやりたい 本気でモノを作ろうと思ったときに、違う環境を使わなくてもできる 「本格的なプログラムもこの言語で書かれている」と言える 47
- 48. 既存プログラミング教育環境の課題（雑） ビジュアルプログラミング環境 Pros：とっつきやすさ、プログラミングの本質に近づきやすい Cons：「自分達が普段使っているもの」との距離感が遠すぎる 本格的スタンドアロンIDE: (具体的にはEclipseとか) Pros：「本物」が使える、作れる Cons：学生のPCで使い始めるのに何回授業やればいいですか？ コマンドラインとテキストエディタ Pros: 俺は好きだ Cons: 「コマンドラインって何ですか」 48
- 49. そこでMonacaですよ！ - Pros リアリティ：「自分のスマホで動くアプリが作れる」 デプロイまでも距離感が短い 手軽さ： WebIDE最高、開発ツールのインストールでつまずかない 環境統一簡単 インストールいらない、普通のWebサービスのよう テンプレートが用意されていてスムーズに入れる プラットホーム非依存: 開発環境はWeb, iPhone/Android両対応 実用性・発展性： JS開発IDEとしてできがいい JS Library、Framework(jQueryとか)があっさり使える グループ作業支援（共有）にスムーズに入れる バックエンドサーバ構築 49
- 50. そこでMonacaですよ！ - Pros リアリティ：「自分のスマホで動くアプリが作れる」 デプロイまでも距離感が短い 手軽さ： WebIDE最高、開発ツールのインストールでつまずかない 環境統一簡単 インストールいらない、普通のWebサービスのよう テンプレートが用意されていてスムーズに入れる プラットホーム非依存: 開発環境はWeb, iPhone/Android両対応 実用性・発展性： JS開発IDEとしてできがいい JS Library、Framework(jQueryとか)があっさり使える グループ作業支援（共有）にスムーズに入れる バックエンドサーバ構築 50
- 51. Monaca Cons 最終発表時にメンテナンス中だった Update時の対応にややこしさが… Monaca自体のアップデートでアプリの挙動が変わると… ブラウザ単体でのHTML/CSSのコーディング支援 が低い ブラウザの開発ツールが使えない ブラウザ単体でのJSデバッグがしにくい PCで専用エミューレータがあるといいのに プラグインの必要・不必要の支援があると助かる 大人数になるとライセンス費用が… 51
- 52. 今後の展開とか夢 ２〜３年かけた、もっと本格的なプログラミング教育？を するためのカリキュラム＋授業開発 もっと本格的なプログラミング教育 本格的なプロジェクトマネジメントの講義 UI/UXデザインの講義 ストアにデプロイしたアプリでビジネス演習 広告収入とか販売収入とか ベンチャー起業ごっこ Monaca環境はいろいろ展開しやすそう！ 今後に期待しております！ 52
- 53. ご清聴ありがとうございました お問い合わせ： 遠山 緑生 next@shodai.ac.jp http://nor.10yama.net/ Twitter: 10yama / facebook :名前 スライドは、Slideshareに上げる予定 http://www.slideshare.net/NorioToyama/