情報システム工学特論 Web アプリの作成により次のことを学んでもらいます１無料ソフトウェアの活用２無料のソフトウェア開発ツール Runstant Lite ３ Web ブラウザのゲームライブラリ phina.js ４ Web アプリとは無料ソフトウェアの活用無料ソフトウェアとはイン

Size: px

Start display at page:

Download "情報システム工学特論 Web アプリの作成により次のことを学んでもらいます１無料ソフトウェアの活用２無料のソフトウェア開発ツール Runstant Lite ３ Web ブラウザのゲームライブラリ phina.js ４ Web アプリとは無料ソフトウェアの活用無料ソフトウェアとはイン"

えつとふじがわ
4 years ago
Views:

1 情報システム工学特論 Web アプリの作成により次のことを学んでもらいます１無料ソフトウェアの活用２無料のソフトウェア開発ツール Runstant Lite ３ Web ブラウザのゲームライブラリ phina.js ４ Web アプリとは無料ソフトウェアの活用無料ソフトウェアとはインターネットなで無料で提供されているソフトウェアのことフリーソフトとも言うパソコンの学習や活用に大いに役立つ無料ソフトウェアも製作者に著作権がある作者が自分であるかのように嘘をついたり無料ソフトウェアを自分の名前で販売したりなどの違反をしてはいけない無料ソフトウェアを使うときもしうまく動かなったとするそのとき製作者に苦情を言うのはマナー違反です製作者はいろんな人に使ってほしいと善意を持っていますので尊重すること Web ブラウザで動く無料ソフトウェア自分のパソコンにインストールしなくてもインターネットと Web ブラウザさえあればすぐに使える無料ソフトウェアも多数あるたとえば gmail などこの資料では２つの無料ソフトウェアを体験する pinta.js: これは簡単に Web ブラウザで動くゲーム２次元のグラフィックスが制作できるソフトウェア phina.js の情報は次の Web ページで公開 Runstant Lite: ソフトウェアの制作のために使う Runstant Lite の情報は次の Web ページで公開 1

2 ここまでのまとめ無料ソフトウェアは便利である製作者に苦情を言うのはマナー違反であるこの資料では無料ソフトウェア phina.js, Runstant Lite を使う無料のソフトウェア開発ツール Runstant Lite コンピュータはソフトウェアで動くソフトウェアをコンピュータを使って作るときソフトウェアを制作するためのソフトウェアソフトウェア開発ツールを使うソフトウェア開発ツールにはいろいろな種類がある (Visual Studio などここでは Runstant Lite を使ってみる演習１ Runstant Lite について次を行いなさい ① Web ブラウザで次を開く Edge Chrome Firefox を使ってください IE は避けてください ② 始めたいので GETTING STARTED をクリック 2

3 ③ 次のように表示されるので確認する ④ 右側の黒い画面でソフトウェアを作る右側の黒い画面で次のように書き換える /* * runstant */ window.onload = function() { console.log(100 * 200); }; 3

4 ⑤ 再生ボタンをクリックする ⑥ 100 かける 200 の計算結果としてが表示されるので確認するうまく表示されない場合には ④に戻って確認する ⑦ 右側の黒い画面で 100 * 200 のところを書き換える右側の黒い画面で次のように書き換える /* * runstant */ window.onload = function() { console.log(1 / / 4); }; 4

5 ⑧ 再生ボタンをクリックする ⑨ 1 / / 4 の計算結果として 1.25 が表示されるので確認するうまく表示されない場合には ⑦に戻って確認する 5

6 ここまでのまとめソフトウェア開発ツールを使ってソフトウェアを作り実行できるソフトウェアの中には計算させたい式などを書き下すことができる Web ブラウザのゲームライブラリ phina.js ゲームのソフトウェアを作るとき画像ボタンゲージサウンドキーボードなどを扱うことになるこれらを簡単に扱えるようにするためのソフトウェアをゲームライブラリと言ったりする以前の授業でもゲームライブラリを使った (Panda3d などこの資料では Web ブラウザで動くゲームに便利なゲームライブラリ phina.js を使う演習 phina.js について次を行いなさい ① Web ブラウザで次を開くさっきの演習と同じ ② 始めたいので GETTING STARTED をクリック演習１と同じ 6

7 ③ 次のように表示されるので確認するさきほどの演習と同じ ④ HTML(HTML) をクリック ⑤ 次のように表示されるので確認する 7

8 ⑥ 右側の黒い画面の他はそのまま <style>${style}</style> の直後に次の１行を追加コピーペーストこれは phina.js の機能を取り込むためのもの <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>${title}</title> <meta name="description" content="${description}" /> <style>${style}</style> <script src=' <script>${script}</script> </head> <body> <h1>hello, runstant!</h1> </body> </html> 8

⑦ SCRIPT(javascript) をクリック ⑧ 右側の黒い画面で次のように書く長いのでコピーペーストしてください phina.globalize(); phina.define('mainscene', { superclass: 'CanvasScene', init: function() { this.

9 ⑦ SCRIPT(javascript) をクリック ⑧ 右側の黒い画面で次のように書く長いのでコピーペーストしてください phina.globalize(); phina.define('mainscene', { superclass: 'CanvasScene', init: function() { this.superinit(); var obj = RectangleShape().addChildTo(this); obj.setposition(100, 200); this.obj = obj; }, }); phina.main(function() { var app = GameApp({ startlabel: 'main', }); app.run(); }); 9

10 ⑨ 再生ボタンをクリックする ⑩ 画面に青い四角が表示されるうまく表示されない場合には ⑧ に戻って確認する後で使うのでＷｅｂブラウザは閉じずに残しておくことここまでのまとめゲームエンジンには青い四角を描くなどゲームを作るのに必要な機能がそろっている画像ボタンゲージサウンドキーボードなどの機能がある 10

Ｗｅｂアプリとはいま体験してもらった青の四角を描くための Web アプリは次のような仕組みにな

計算など Web アプリは上の図で書いたように１ Web ブラウザ２ HTML ３ SCRIPT

アプリを作ることができるための土台がすでに完成しているのです今度の演習では SCRIPT

11 Ｗｅｂアプリとはいま体験してもらった青の四角を描くための Web アプリは次のような仕組みになっている HTML 画面に何を表示するかの指示などＷｅｂブラウザ画面表示と情報の受付 SCRIPT 計算など Web アプリは上の図で書いたように１ Web ブラウザ２ HTML ３ SCRIPT スクリプトが共同して動くという仕組みになっている先ほどのプログラムはいろいろな Web アプリを作ることができるための土台がすでに完成しているのです今度の演習では SCRIPT (スクリプト) の部分を書き換えてボールの動きのシミュレーションを行うようにします ① SCRIPT(javascript) をクリック 11

12 ② 右側の黒い画面で今度は次のように書く長いのでコピーペーストしてください phina.globalize(); phina.define('mainscene', { superclass: 'CanvasScene', init: function() { this.superinit(); var x = CircleShape().addChildTo(this); x.setposition(80, this.gridy.center()); x.physical.force(8, 0); x.physical.gravity.set(0, 9.8 / 10); var floor = RectangleShape({width: this.gridx.width}).addchildto(this); floor.setposition(this.gridx.center(), this.gridy.width); var w1 = RectangleShape({height: this.gridy.width}).addchildto(this); w1.setposition(0, this.gridy.center()); var w2 = RectangleShape({height: this.gridy.width}).addchildto(this); w2.setposition(this.gridx.width, this.gridy.center()); this.ball = x; this.floor = floor; this.w1 = w1; this.w2 = w2; }); }, // 毎フレーム処理 update: function() { var vx = this.ball.physical.velocity.x; var vy = this.ball.physical.velocity.y; if (this.ball.hittestelement(this.floor)) { this.ball.physical.force(vx, -vy); } if (this.ball.hittestelement(this.w1)) { this.ball.physical.force(-vx, vy); } if (this.ball.hittestelement(this.w2)) { this.ball.physical.force(-vx, vy); } }, phina.main(function() { var app = GameApp({ startlabel: 'main', }); app.run(); }); 12

13 13

14 3 再生ボタンをクリックする. 4 ボールの動きのシミュレーションが, アニメーションで表示される. うまく表示されない場合には,3 に戻って確認する. 14

15 まとめ言語 : JavaScript 枠組み : Web ブラウザ + HTML + スクリプト行ったこと : 四角形の描画, ボールの動きのシミュレーション 15

S660_DA_manual

S660_DA_manual C O N T E N T S 1 2 3 4 5 6 7 1 2 3 4 5 6 7 スマートフォンでの引き継ぎ手順他スマートフォンの買い替え家族間で使用する場合でのナビゲーション機能の引き継ぎ手順有料オプションナビゲーション機能 VICS機能の取得手順同時に複数の端末ではご利用になれませんインターナビリンクの会員ID パスワードでログインします ①左上のメニューボタン ⑤