HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料

URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. ｜ 1
Monacaのご紹介と
Monaca入門講座
アシアル株式会社

アジェンダ

アジェンダ
 Monacaのご紹介
– 会社紹介・自己紹介
– Monacaの仕組み
 Monaca入門ワークショップ
– Monacaのはじめ方
– Monacaデバッガー
– おみくじアプリの作成
– Monacaの便利な使い方

会社紹介・自己紹介

会社紹介

沿革
• 2002年
– 当時大学三年生だった田
中が創業
• PHP言語に関する雑誌の
翻訳・販売
• 2008年
– iPhone国内発売に合わせ
てソロバンアプリをリリース
• 2011年
– モバイル事業に注力
• Monacaを開発
• 2015年
– 社員数約50名
• 約7割が技術者

事業領域

自己紹介
• 名前
– 岡本雄樹
• 職業
– スクール事業部マネージャー
– Monacaプログラミング教育アドバイザー
• 著書
– イラストでよくわかるPHP
～はじめてのWebプログラミング入門
– WordPressプロフェッショナル養成読本
[Webサイト運用の現場で役立つ知識が満載! ]

簡単な経歴
 学生時代
• 中学
• 3年生の時にンターネット開通
• 高校
• 2年生の時にプログラミングコンテストをキッカケにPHP言語を学び始める
• 大学
• お金が無かったので学費が安かった(4年で約200万円)東洋大学の夜間経営学部に入学
• ITベンチャーで1年半ほど働く
• 創業したばかりの通販会社で社内SEとしてシステムを一手に引き受ける
 社会人時代
• アシアル株式会社にプログラマーとして入社
• 入社3年目の時から新規事業（スクール）の担当となる
• 入社5年目にPHP言語の入門書を執筆
• 現在に至る

Monacaとは

Monacaとは？
• モバイルアプリを作ることができる統合開発環境
– 作成したアプリはApp StoreやGoogle Playなどで公開可能です
• クラウド型のため導入が簡単
– ブラウザだけで開発が可能です
• ハイブリッドアプリという開発手法を採用
– JavaScript言語とHTMLxCSSでアプリを開発可能です

10万ユーザー以上、3,000アプリ以上リリース

選べる3つの開発環境
ブラウザーだけで本格ハイブリッドアプリ開発。
使い慣れたローカルエディタでサクサク開発。
VSのパワフル機能をCordova開発に。
本日は
こちらを紹介します

MonacaクラウドIDE
• ブラウザベースのフル機能IDE
• 日本語対応
• モバイルとPCアプリ開発に対応
• iOS
• Android
• Windows

Monacaデバッガー
同じアプリを実機上で簡単に動作確認できます。ライブリロード対応。
• コンパイル不要で即動作確認
• ブラウザにない機能（カメラや
コンパスなど）も実行可能

ソースコードとビルドシステムはクラウドで管理
WebベースのIDE デバッガービルドシステム
クラウド
ソースコードは
クラウド上にターゲットOSに
合わせた環境で
アプリをビルド
自宅でも学校でも同じ環境でプログラミングを行うことが可能

Monacaによるアプリ開発の流れ
①ブラウザで開発 ②実機でデバッグ ③ブラウザでビルド

Monacaが好まれる理由

Monacaが好まれる理由
• アプリ開発そのものに生徒の高い関心がある
• 開発環境の用意が簡単
• プラットフォームを選ばない
• 10年後も使えるWebの標準的な技術を学べる

事例：慶應義塾大学環境情報学部
講師南政樹様
Monacaは私たちが探し求めていたプログラミング教育に適したアプリ開発
ツールです。
我々が担当する講義「インターネット」の履修者は、グループワークで HackU
という大学生向けハッカソンイベントに参加します。
例年500人を超える学生が履修しますが、その多くは初学者なため、開発環境
の構築からトラブル続きで、最初からモチベーションが下がっていました。
Monacaをこれまでの問題をすべて解決してくれ、学習意欲を向上させてくれ
ました。

事例：山形大学大学院理工学研究科
准教授立花和宏様
アプリの開発にはプログラム言語やオペレーティングシステムの知識も必要で
す。しかしこれらの習得にはそれなりの時間がかかります。
そこに費やす労力が多すぎると良いアイディアがあってもアプリ開発に辿り着
く前に挫折してしまいます。
特に情報を専門としない学科においてはなおさらです。
Monacaがオペレーティングシステムの違いを吸収して多様なモバイル端末用
のアプリを開発できることに大きな魅力を感じます。

事例：穴吹情報デザイン専門学校情報システム学科
講師伊沢剛様
本校ではモバイルアプリ開発の授業でMonacaを使っています。学生たちが初
めてMonacaに触れた時の感想は、強力なエディタ機能ががとても使いやすい
く親しみやすいと喜んでいました。
シンプルに使える開発環境と、自分自身のスマートフォンで作ったプログラム
がすぐに動くことに学生の高い満足度が伺えます。
現在は、テキストのサンプルコードを動かす事を中心に行っていますが、今後
は学生自身でオリジナルのアプリケーションを設計、開発し、公開するという
目標をもって取り組んでいきます。
将来的には、ワープロソフトや表計算ソフトの操作を修得するように、コン
ピュータの基本を学ぶ学生向けにMonacaを使った授業を展開していきたいと
考えております。

事例：同志社中高
教諭鈴木潤様
「自分自身でつくったものが動く喜びを感じてほしい」ことと「実際に日常的
に使う端末（PCやスマホ）で動かしたい」という２点を満足させるものが
Monacaでした。
同志社高校はコース制のないカリキュラムが特徴で、自ら考え必要な科目を選
択するという形をとっています。Monacaを利用して授業を行っている「情報
特論」は、３年生の自由選択科目の一つで、学校設置科目として２０１４年度
より開講しています。
「情報特論」では夏休みまでにプログラムの基本的な構造を理解して、２学期
以降は自分自身が便利に使えるアプリを工夫して作るという形にしています。
初めて本格的にプログラム製作をする生徒がほとんどなので、単純な機能で
あってもまずは一つ完成させるということを目標にすすめています。
2014年度は健康管理アプリや本のレビューを保存するアプリ、スポーツのスコ
アをとるアプリが作成でき実際に部活動でも活用されています。

Monaca副読本（のサンプル）を差し上げます
 Monaca副読本（開発中）
– Monacaの使い方をプログラミング未経験者向けに丁寧に解説
– HTML/CSS/JavaScriptの入門記事とリファレンスを収録
– 改造しやすい簡単なサンプルアプリを多数収録
開発中のサンプルをお渡しいたします。
（受付にてアンケートと引き換え）

ハイブリッドアプリとは

ハイブリッドアプリとは
• ハイブリッドアプリとは
– HTML5とJavaScript言語でアプリを開発できる技術
– ブラウザでは利用できないカメラやコンパスなどの機能を利用できる
– アプリとしてマーケットに登録することが可能

ハイブリッドアプリの仕組み
• ハイブリッドアプリは二段ロケットの仕組みを採用
– JavaやObjective-Cで書かれたソースコードがアプリ内ブラウザを起動
• 主に「Cordova」というオープンソース製品を利用して実現します
– アプリ内ブラウザの上でHTMLやJavaScriptを実行
ネイティブコード
HTML
コンテンツ
アプリケーション本体は
HTML5技術で実装
ハードウェア機能を利用可能
ネイティブアプリ形式で配布

CordovaとPhoneGap
誕生!
PhoneGapは
Adobe社のディストリに
オープンソース化
各社が開発協力
Cordovaと命名
by
2011年
Adobe社がNitobi社を買収
PhoneGapは「Cordova」に
2009年
Nitobi社がPhoneGapを開発
オープンソース製品
その結果
多くの企業がCordova開発に参加

HTML5ハイブリッド型アプリのシェア
• 全Androidアプリの5.83%に採用
– AmazonもSkypeもハイブリッド型
• クロスプラットフォーム導入状況
出典: AppBrain Stats
Cordova / PhoneGap 5.83%
Unity 3D 4.11%
Adobe AIR 2.87%
Titanium Mobile 1.01%
Xamarin 欄外

Monacaのはじめかた

Monacaのアカウント登録
• 検索エンジンで「monaca」で検索
– サインアップに進んでください。
ここをクリックして、
アカウントを作成
https://ja.monaca.io/

アカウント情報入力
• アカウント情報入力
– メール受信可能なアドレスとパスワードを登録して下さい。

アカウント仮登録完了
• アカウント仮登録完了
– 一度ダッシュボードという画面に遷移しますが、先程のメールアドレスに確認のメールが届きます。

メールアドレスの確認
• メールアドレスの確認
– 確認メールを受け取りURLにアクセスし、必要事項を入力することで登録完了です。

アカウント登録完了
• アカウント登録完了
– 登録が完了し、ログイン済み状態になります。
– 以後、ユーザー名とパスワードを入力することでMonacaを利用できます。

IDEを起動する
• IDE（プロジェクトの編集画面）を開く
– ダッシュボードで、プロジェクトの「開く」ボタンをクリックします。

IDEの使い方
コードエディター
(ファイルの編集を行います)
デバッグパネル
(エラー情報などを表示します)
ライブプレビュー
(動作確認を行います)
プロジェクト一覧
を開きます
プロジェクトパネル
(ファイルの管理などを
行います)
ダッシュボード
に戻れます
メニューバー
(さまざまな機能を呼び出せます)

開発の流れ
コードエディタ
で編集し、保存する
コードエディタで編集したファイルを、プレビューとデバッガーで確認しながら開発を進めて
いきます。
簡単な確認はプレビューで
実際の表示確認はデバッガーで

Monacaデバッガーのインストール
• Google PlayまたはApp Storeで、「monaca」で検索してください。
アイコンはこちらです。

Monacaデバッガーの起動
• Monacaデバッガーを起動すると、左のログイン画面が
表示されます。
• Monacaに登録したアカウントでログインを行ってくださ
い。

Monacaデバッガーでアプリを実行する
• デバッガーを起動すると自動的にクラウドへ接続します
• しばらくするとクラウド（Monaca.io）プロジェクトが一覧表示されます
• プロジェクトをタップするとアプリが実行されます

「Hello Worldアプリ」を動かしてみる
カメラ、コンパス、バイブレーションなどの
ネイティブ機能を動かすことができます。

Monacaデバッガーのメニュー
更新
プロジェクト
一覧に戻る
スクリーンショット
を撮る
チャットを開く
ソースコードの表
示
アプリログの
確認

おみくじアプリの作成

参考リソース
以下のURLを打ち込むか「サンプルアプリ monaca」で検索してください。
◆ Monaca ドキュメントサンプルアプリ＆テンプレート
http://docs.monaca.mobi/cur/ja/sampleapp/samples/
※今日は『おみくじ占いアプリ』を作成します。

おみくじアプリを作成する
• 以下のサンプルを通じてMonacaの使い方の概要を説明します。
– おみくじを模したアプリケーション
– ボタンを押すとランダムな画像を表示する

新しいプロジェクトを作成する
1. Monacaにログインし、ダッシュボードで「開発をスタート」ボタンを選択します。
2. ブラウザだけで始めるアプリ開発「Monaca.ioで開発」ボタンを選択します。

新しいプロジェクトを作成する
1. プロジェクトのひな型から「Omikuji Fortune Telling App」を選択します
2. 新規プロジェクトに名前と説明を設定してプロジェクトを作成します
– プロジェクト名：おみくじ
– 説明：任意
3. プロジェクトの作成が完了したら、ダッシュボードの「開く」ボタンを選択します
おみくじに変更

ひとまず完成！
 ソースコードを確認していきましょう

HTML の確認
• Monaca IDEのindex.htmlの<body>タグ内を確認します
• imgタグで画像を表示します。
• 各要素にid属性を設定することで、後ほど画像や装飾を差し替えま
す
<div id="hako">
<img id="saisyo" src="images/omikuji-box.png" />
<img id="kekka" style="display : none;"/>
</div>
<div id="bottombar">
<img id="button" src="images/omikuji-btn-hajimeru.png" onclick="omikuj()">
</div>

CSS の確認
• Monaca IDEのindex.htmlの<style>タグ内を確認します
body {
background-image: url("images/omikuji-bg.png");
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
text-align: center;
}
#hako {
margin-top: 15%;
margin-left : 0;
margin-right : 0;
}
img {
width: 70%;
}
#bottombar {
position: absolute;
bottom: 30px;
width: 100%;
}

結果を表示する方法
HTMLとCSSだけでは、おみくじに使うランダムな値を生成することができません。
JavaScriptを用いて、ランダムに結果が表示されるようになっています。

ランダムに結果を出す方法を考える
ランダムな値を得るためには、JavaScriptのランダム関数を使います。
Math.random()関数を呼ぶと、0から0.99999(1未満)の範囲の実数を返します。
その結果を5倍し、Math.floor()関数で小数部分を切り捨てます。
これによって0～4の5通りの数字が作られます。
■ ランダム関数の使用例
Math.floor(Math.random() * 5)

JavaScriptの確認
• Monaca IDEのindex.htmlの<script>タグ内を確認します
function omikuji (){
var dice = Math.floor(Math.random() * 3);
var image_name;
if (dice == 0) {
image_name = "omikuji-daikichi.png";
} else if (dice == 1) {
image_name = "omikuji-chuukichi.png";
} else {
image_name = "omikuji-hei.png";
}
document.getElementById("saisyo").style["display"] = "none";
document.getElementById("kekka").src = "images/" + image_name;
document.getElementById("kekka").style["display"] = "inline";
document.getElementById("button").src = "images/omikuji-btn-
yarinaosu.png";
}
「はじめる」をクリックし
て動作を確認してくだ
さい

Monacaの便利な使い方

フォルダの作り方
• ファイルツリーのwwwフォルダを右クリックし、「新規
フォルダー」を選択してください。
• 表示されるダイアログで任意のファイル名(今回は
images)を入力し、OKボタンを押してください。これ
で、ファイルツリー内にimagesフォルダが作成され
ます。

ファイルアップロードの方法
• アップロード先のフォルダ(今回はimages)を
右クリックし、「アップロード」を選択します。
• ダウンロードしていた画像ファイルを、アップ
ロードダイアログの枠線内にドラッグアンドド
ロップします。

jQueryなどのライブラリの使用（使用する場合）
• 「設定」メニューから「JS/CSSコンポーネントの追加と削除...」を選択し、「jQuery (Monaca Version) 」
の「追加」ボタンをクリックしてください。

Monacaデバッガーのキャッシュをクリアする
• Monacaデバッガーのキャッシュ機構
– Monacaデバッガーは高速化のためにキャッシュの仕組みがあります。
• プロジェクト一覧の更新
– ページを下にドラッグすることで更新が掛かります
• キャッシュの強制削除
– キャッシュ管理画面から削除できます
• アプリ内のメモリを削除したい場合
– アプリを再起動します

プロジェクトのエクスポート
• Monaca IDEの『ファイル』メニューにある『エクスポート』でプロジェクトをエクスポートすること
が出来ます。

プロジェクトのインポート
• 『Import Project』でプロジェクトを取り込むことが出来ます。

サンプルプロジェクトのインポート
• 書籍で紹介されているサンプルアプリをインポートすることが出来ます
– https://ja.monaca.io/book/support/
• ローカルにダウンロードしなくてもインポート可能です
• 授業に必要なサンプルを事前に用意しておくこともできます

プランとプロジェクト上限について
• プランごとの主な違い
– プロジェクト上限数
– Cordovaプラグイン利用の可否
• BASIC(無料)プラン
– プロジェクト上限は３つまで
• 古いプロジェクトを削除しないとプロジェクトが作れなくなります
– 削除する前にエクスポートしておくことをお勧めします
• Education(9,800円/年)プラン
– プロジェクト上限は10つまで
• 『アーカイブ』機能で古いプロジェクトをしまうことができます
– アーカイブしたプロジェクトはノーカウント！
– 授業に便利な『プロジェクトの共有』機能も利用できます

HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料

More Related Content

What's hot

Similar to HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料

More from アシアル株式会社

Recently uploaded

HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料

Editor's Notes