Monacaを使ったJavascript講座と、プロジェクションマッピング講座です。 地域や自治体で、ご要望がある方は、ご相談ください。

1. 【裾野市】
プログラム勉強会
スマフォのプログラミングと
プロジェクションマッピングやろうよ
2017/7/2 市川博之

2. 本日の目的とアジェンダ
今日の勉強会の目的
プログラムってなんなのか分かる
プログラムを学ぶ糸口を見つける
プロジェクションマッピングの仕組みがわかる
みんなのゴール
© 2017 市川電産 1
【１】
どうして動いてるか
話すことができる
【２】
今後調べるときに
何を使って調べれば
よいかわかる。
（続けたい！と思う）
【３】
プロジェクション
マッピング作るときに
調整することが話せる

3. 本日のアジェンダ
1. イントロダクション 9:00- 9:15
1. なんで動くの？
2. 動かす方法はいろいろあるよ
3. 今回はブラウザで動くものを作るよ
2. ブラウザで動かしてみよう！ 9:20-11:00
1. 実はメモ帳でも作れるよ
2. スマフォでも動かそう！
3. ちょっとだけ構文説明
4. ゲームを改造してみよう
5. QRコードを読み込もう
3. プロジェクションマッピングしてみよう 11:00-11:50
1. 原理を説明するよ
2. 実際に移してみよう
4. 振り返り 11:50-12:00
© 2017 市川電産 2

4. イントロダクション
© 2017 市川電産 3

5. 1.1 なんで動くの？
Code for Numazu 4
010101110100010111
000101011111010101
101000100101010
んー？
なんて話してるんだろう？
0 1
PCやスマフォを含めコンピュータは
「０：電気が流れていない」
「１：電気が流れている」 の二つしか分かりません。
（これをマシン語といいます。）
でも、これだと、皆さん操作できないですよね。電気が
流れていない
電気が
流れている
ねぇねぇ、
お話しようよ！

6. 1.1 なんで動くの？→プログラム言語登場
Code for Numazu 5
プログラム言語
「ねぇねぇ、
今度は分かる」
マシン語に
翻訳
010110101010
（あ、聞こえた
答えなきゃ）
マシン語
1111011011001
0101011100101
あ、返事きたよ！
マシン語から
翻訳
ねぇねぇ、今度
は分かる →
0101110110101
0100010
111101101100101
01011100101
→ こんにちは！
コンピュータと人間との間で、言葉を分かるよ
うにしてくれるのがプログラム言語です。

7. 1.2 動かす方法はいろいろあるよ
動かしたいものによって、使う言語が違うよ。
あとあと、やりたい部分を見つけていこう！
© 2017 市川電産 6
エンベデッド
エンジニア
フロントエンド
エンジニア
サーバー
エンジニア
組み込み開発
・Arduino/mbed
C言語
・ichigoJam
BASIC
・ブラウザ
HTML/CSS/Javascript
・ネイティブアプリ
iOS：Swift
Android：Java/Kotlin
Windows：C#など
Linux/WindowsServ
erなど
php/python/ruby/No
de.jsなど
端末やアプリの開発 ネットワーク上の処理を担当

8. 1.3 今回はブラウザで動くものを作るよ
ブラウザならみんな持っている端末で動くよ！
© 2017 市川電産 7
PC
iPhone
Android
IE/Safari
/Chrome
HTML
CSS
Javascript
PCは、PC上のファイルを
だけで実行できる
スマフォのアプリ化には
Monacaを利用するよ
インターネット上に共有
したい場合は、サーバーに
登録が必要だよ。
（これは別の機会に説明）
どれでも
見れる！

9. ブラウザで
動かしてみよう！
© 2017 市川電産 8

10. 2.1 実はメモ帳でも作れるよ
メモ帳で作って、ブラウザで開くだけで動く
Webサイトは「HTML」「CSS」「Javascript」で
構成されている。
© 2017 市川電産 9
メモ帳
IE/Safari
/Chrome
HPにあらかじめ
サンプルコードを
用意してコピペできる
ようにしておく
HTML CSS Javascript
【体】 【服】 【動作】
http://www.code4numazu.org/study/susono/sample1/index.txt
の内容をメモ帳にコピーして、index.htmlに保存しよう
http://www.code4numazu.org/study/susono/sample1/sarubobo1.png、
sarubobo2.png右クリックで保存

11. 2.1 実はメモ帳でも作れるよ
サンプルコード
© 2017 市川電産 10
【sample1.css】
p{
color: blue;
}
【sample1.js】
function rolloverin() {
document.getElementById( "sarubobo" ).src =
"sarubobo2.png";
}
function rolloverout() {
document.getElementById( "sarubobo" ).src =
"sarubobo1.png";
}
Htmlのpタグの色を青に設定
画像の中にマウスが入った時に
絵を変える
画像の中からマウスが出た時に
絵を変える
http://www.code4numazu.org/study/
susono/sample1/sample1.css
http://www.code4numazu.org/study/
susono/sample1/sample1.js

12. 2.2 スマフォでも動かそう
Monacaの説明
インストール方法
さっきのプログラムをコピペしてみよう
Monacaについてはアシアル（Asial）のサイトに
情報が載っているよ。
© 2017 市川電産 11

13. 2.2 スマフォでも動かそう
Monacaとは、アシアル社が提供しているHTML5を
ベースとしたマルチプラットホームの開発環境です。
Android/iPhone/WindowsPhoneがこれ一つで開発できます。
同一のソースコードを利用できます。
Webデザイン、JavaScriptの知識があれば開発ＯＫ！
今回は、最初に学びやすいブラウザだけで開発できる、
Monaca Cloudと、Monacaデバッガーの説明をします。
必要なのは、PCとブラウザとスマフォだけ。
© 2017 市川電産 12

14. 2.2 スマフォでも動かそう – ログイン -
MonacaのHPを開いてみましょう。
HP 「https://ja.monaca.io/」
ログインして、ダッシュボードの画面になりましたか？
Code for Numazu 13
①ユーザー
アカウント作成 ②ログイン

15. 2.2 スマフォでも動かそう- PJ作成 -
プロジェクトを作ってみよう！
Code for Numazu 14
※フリーのプランは３つまでしか
プロジェクトが作れません。
①クリック
②サンプルアプリのHelloWorld
を作成します。プロジェクト名、
説明には、後でわかるよう言葉
を入れましょう。

16. 2.2 スマフォでも動かそう- PJ作成 -
新規プロジェクト作成の下に、今のプロジェクト名が登録されました。
開いてみましょう。
Code for Numazu 15
メニュー
ファイル
プレ
ビュー
ソースコード

17. 2.2 スマフォでも動かそう- コピーしよう -
新しいプロジェクトを作成しましょう（No Framework）
wwwの下に、さっきのhtml、css、js、pngファイルを
コピーしてみよう！
さるぼぼが表示されましたか？
© 2017 市川電産 16

18. 2.2 スマフォでも動かそう- PJ作成 -
iPhoneの準備 iTunesで「Monaca Debugger」をダウンロード
Androidの準備 Google Playで「Monaca Debugger」をダウンロード
ダウンロード後、アプリを立ち上げましょう。
同期が始まり、プログラムが動きます。
右下のボタンがデバッグ用のボタンです。
Code for Numazu 17
選ぶ
プロジェクト選
択画面に戻る
アプリを
リロード
スクリーン
ショット
ログの確認

19. 2.3 ちょっとだけ構文説明
Javascriptは、関数の中で上から下に処理が進む。
Javascriptは、シングルスレッドである。
同時に複数の処理はできません。
Javascriptは、非同期処理ができる。
他に処理を任せている時に、別の仕事を進めることができる。
© 2017 市川電産 18
A
B
C
処理は
一つづつ
A
B
C
大きなファイルの
読み込み中
（他の処理待ち）
①
②
③
①
③
②
自分のできる処理
を先に進める
CPU
File
I/O

20. 2.3 ちょっとだけ構文説明
変数 データの入れ物
数値型 var num = 1 文字型 var str = “1"
その他も色々あるよ。
If文 条件分岐
複数条件の分岐には、switch文もあります。
© 2017 市川電産 19
If( 条件が成立する){
// 条件が成立した時の処理
}else if（条件2が成立する）{
// 条件2が成立した時の処理
}else{
// 条件が成立しなかった時の処理
}
If( 条件が成立する){
// 条件が成立した時の処理
}
【条件（比較演算子）】
等しい ： a==b
等しくない： a!=b
より大きい： a>b
より小さい： a<b
以上 ： a>=b
以下 ： a<=b

21. 2.3 ちょっとだけ構文説明
for文 繰り返し処理
関数 処理を１つの単位として行うかたまり
しっかり学びたいときは「ドットインストール javascript」検索！
© 2017 市川電産 20
function hoge(){
// 処理の内容
}
呼び出す時
hoge();
function fuga( num1, num2 ){
// 処理の内容
return num1 + num2;
}
呼び出す時
var num = fuga( 1, 2 );
同じ処理を１０回繰り返す場合
for( var ix = 0; ix < 10; ix = ix + 1 ){
// 繰り返す処理
}
繰り返し処理には
・while
・do – while
・for in/ for of
などバリエーションがあります

22. 2.4 ゲームを改造してみよう
１０枚のカードを引いて大小を競うゲーム
さっきの構文を使って改造してみよう
例えば、偶数なら勝ち負けとするには？
数を増やしてみるには？
「●」を絵に変えるには？
© 2017 市川電産 21
http://www.code4numazu.org/study/susono/sample2/index.txt
の内容をメモ帳にコピーして、index.htmlに保存しよう
http://www.code4numazu.org/study/susono/sample2/sample2.txt
の内容をメモ帳にコピーして、sample2.jsに保存しよう

23. 2.5 QRコードを読み込もう
スマフォ本体の機能を使うには
Cordovaプラグインの活用！
Cordovaは、Webブラウザとスマフォ本体の機能を
仲介してつなぐプラグインです。
QRコードを読み込むCordovaプラグインサンプル
https://docs.monaca.io/ja/reference/third_party_phonegap/barcod
e_scanner/
© 2017 市川電産 22

24. プロジェクション
マッピンしてみよう
© 2017 市川電産 23

25. 3.1 原理を説明するよ
「プロジェクションマッピングとは」
プロジェクタを利用して、空間や物体に映像を投影した
パフォーマンスのこと。光を使ったパフォーマンスには
エレクトリカルパレードやレーザーショーなどの実際の
ライトの光や点滅自体をショーにしたものとは違い、
プロジェクタから映し出してるという部分が違う。
「プロジェクタから映しだす利点」
プロジェクタから投影する場合は、写真や動画などの画像や
複雑な模様などを投影することができる。また、LEDライトの
プロジェクタを利用すれば黒を黒として映しだすことが可能である。
黒い光というのは存在しない為、ライトを使ったショーでは黒を
表現できない。映像ではどう出るかというと、黒い部分は抜き
（光っていない）状態で映るので投影面の中だけで光っている、
光っていないを表現できる。
© 2017 市川電産 24

26. 3.2 実際に映してみよう
用意するもの・プロジェクタ
先に示したようにLEDのプロジェクタが良い。
購入するときはなるべく明るい画像が出せるものが良いので
ルーメンをチェックして購入しよう。
（教室などでやるなら２０００lmぐらいあると良いらしい）
PC
映像を用意するためのもの、タブレットではなく普通のPCならOK
HDMIケーブル
１５pinのものより映像が綺麗。音も出せるのでこの方が良い。
PC買うときにHDMIケーブル繋げるかチェックしておこう。
プロジェクションマッピングを作るソフト
今回はアドビのアフターエフェクトを利用。
無料のもあったので使ってみるといいかもしれない
http://pecovision.hara-peco.com/
© 2017 市川電産 25

27. 3.2 実際に映してみよう
プロジェクションマッピングの大前提
動くものには投影できない。位置を合わせて厳密に調整するので
投影するものとプロジェクターの位置は必ず固定させる。
1. 観客とプロジェクターの視点を合わせます。光が届く面しか
映像が映らないので、お客さんの目とプロジェクターを
だいたい一緒の方向に配置します。
2. 投影する面を決めて、プロジェクタの光が当たり加減を調整する。
プロジェクションマッピング用のソフトで、平面の四角を作って
投影物に投影してみる。
3. 立体物に平面を投影すると必ず歪みが生じます。投影物に
合わせて、PC内の四角も歪ませます。この時必ず投影物を
見ながら調整しましょう。
4. 投影物への歪みが修正できたら、その四角を好きな画像に
置き換えます。
© 2017 市川電産 26

28. 振り返り
© 2017 市川電産 27