O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Copyright © Asial Corporation. All Rights Reserved.
はじめてのプログラミング
実践編
で学ぶ
Copyright © Asial Corporation. All Rights Reserved.
はじめに
2
Copyright © Asial Corporation. All Rights Reserved.
はじめに
Monaca Education事業のご紹介
 Monacaとは
└ ブラウザだけで本格的なアプリ開発ができるサービスです
 ...
Copyright © Asial Corporation. All Rights Reserved.
はじめに
このスライドについて
 書籍『Monacaで学ぶはじめてのプログラミング』全12章相当の学習
が完了している方を対象とした講義用...
Copyright © Asial Corporation. All Rights Reserved.
はじめに
目次
5
コマ番号 タイトル 要素技術
第1回 オリエンテーション Monaca
第2回 おみくじアプリを作ろう HTML/CSS...
Copyright © Asial Corporation. All Rights Reserved.
はじめに
利用について
 第3回分まではスライドシェアにて無料で公開しております
└ ダウロードや再配布はできません
└ 授業や勉強会・セ...
Copyright © Asial Corporation. All Rights Reserved.
第1回 オリエンテーション
7
Copyright © Asial Corporation. All Rights Reserved.
Monacaのアカウント登録
8
Copyright © Asial Corporation. All Rights Reserved.
Monaca のアカウント登録
1) 公式サイト URL にアクセス
https://ja.monaca.io/
第1章
9
Copyright © Asial Corporation. All Rights Reserved.
Monaca のアカウント登録
2) 「サインアップ」からメールアドレスとパスワードを登録
第1章
10
Copyright © Asial Corporation. All Rights Reserved.
Monaca のアカウント登録
3) 仮登録完了メールを確認
メールに記載されたURL にアクセス
登録完了
第1章
11
Copyright © Asial Corporation. All Rights Reserved.
ダッシュボードとプロジェクト
12
Copyright © Asial Corporation. All Rights Reserved.
Monaca ダッシュボードとプロジェクト
ログインとダッシュボードの表示
 開発中のアプリはプロジェクト単位で管理を行う
└ 画面左側に...
Copyright © Asial Corporation. All Rights Reserved.
Monaca ダッシュボードとプロジェクト
新規プロジェクト作成
1)『新規プロジェクト』ボタンをクリック
2)プロジェクト名を設定
3)『...
Copyright © Asial Corporation. All Rights Reserved.
Monaca ダッシュボードとプロジェクト
プロジェクト一覧に表示されれば成功
 プロジェクト名
└ 自由に設定可能
└ 後で管理しやすい...
Copyright © Asial Corporation. All Rights Reserved.
Monaca IDEの使い方
16
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
Monaca IDE
 IDEは統合開発環境の略
 正式には「Integrated Development Env...
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
コードエディター
 プログラムを記述するためのパネル
第1章
18
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
メニューバー
 各種機能を呼び出す
└ 保存
└ ダウンロード
└ ビルドなど
第1章
19
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
プレビュー
 プログラムの実行結果が表示されます。
第1章
20
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
はじめてのプログラム
 「This is a template for Monaca app.」を削除
 「はじめ...
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
プレビューの更新
 [保存]と連動してプレビュー画面が自動更新される
 自動で更新されない場合
└ プレビュー画面...
Copyright © Asial Corporation. All Rights Reserved.
Monacaデバッガーの利用
23
Copyright © Asial Corporation. All Rights Reserved.
Monaca デバッガーの利用
Monaca デバッガーとは
 アプリの動作を確認するツール
 プレビューより高度な動作確認が可能
└ ...
Copyright © Asial Corporation. All Rights Reserved.
Monaca デバッガーの利用
Monaca デバッガーのメニュー
 プロジェクトを開きアプリの動作を確認
 丸いMonacaボタンはメ...
Copyright © Asial Corporation. All Rights Reserved.
Educationプランの有効化
26
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
Educationプランとは
 作成可能なプロジェクト数が20件に増えます。
 共有開発機能が利用可能になります...
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
28
氏名、電話番号(学校の番号)を入力します。
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
29
書籍の裏表紙についているカードを剥がし、裏面に記載さ
れている16桁のアクティベーションコードを入力します。
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
30
「適用する」ボタンを押したら完了です。
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
31
「ダッシュボード」をクリックして前の画面に戻ります。
Copyright © Asial Corporation. All Rights Reserved.
第2回 おみくじアプリを作ろう
32
Copyright © Asial Corporation. All Rights Reserved.
おみくじアプリを作成する
サンプルアプリ開発を通じて、HTML/CSS/JavaScriptの
役割を確認します。
 おみくじを模したアプ...
Copyright © Asial Corporation. All Rights Reserved.
必要な技術
Monacaでモバイルアプリを開発するには、Webの技術で
あるHTML・CSS・JavaScriptの知識が必要になります。
...
Copyright © Asial Corporation. All Rights Reserved.
事前準備
下記のURLにアクセスして素材となるZIPファイルを入手
してください。
■ 素材集ページ
https://ja.monaca.i...
Copyright © Asial Corporation. All Rights Reserved.
新しいプロジェクトを作成する
Monaca に ロ グ イ ン し 、 ダ ッ シ ュ ボ ー ド で 「 Import
Project」ボ...
Copyright © Asial Corporation. All Rights Reserved.
新しいプロジェクトを作成する
1.名前と説明(任意入力)を設定して新規プロジェクトを
作成します
 プロジェクト名:おみくじアプリ
2.「...
Copyright © Asial Corporation. All Rights Reserved.
HTMLタグの確認
Monaca IDEのindex.htmlの<body>タグ内を確認して
ください。
<body>
<img src=...
Copyright © Asial Corporation. All Rights Reserved.
HTML
HTMLでは、コンテンツ(ページに表示する内容)を見出
しや段落などのパーツに分け、それぞれを1つの部品とし
て構成しています。こ...
Copyright © Asial Corporation. All Rights Reserved.
<body>タグ内に記述するタグの種類
主なタグの一覧
40
タグ名 概要
h1
見出しを定義します。h1~h6まであり、h1が最も高レベル...
Copyright © Asial Corporation. All Rights Reserved.
タグの属性
要素対して「属性」をつけることで、付加情報を与えるこ
とができます。
<h1 id="guide_to_html"> HTML入...
Copyright © Asial Corporation. All Rights Reserved.
CSSの確認
css/style.cssの記述を確認してください
body {
background-image : url("../ima...
Copyright © Asial Corporation. All Rights Reserved.
CSSとは
CSS(Cascading Style Sheets)とは
 HTML文章を装飾するための技術
 色やサイズなどを変更できる...
Copyright © Asial Corporation. All Rights Reserved.
CSSとは
CSSをHTMLファイルに読み込む方法(外部ファイル)
 linkタグを記述
 href属性でパスを指定する
 例
44
...
Copyright © Asial Corporation. All Rights Reserved.
CSSの記述構造(セレクタ・プロパティ・値)
CSSを指定する記述は、スタイル(デザイン)を適用する
対象の「セレクタ」と、スタイルの種類を...
Copyright © Asial Corporation. All Rights Reserved.
色を指定するプロパティ
プロパティ 説明 例
color 文字色を設定します。 color: red;
background-
color ...
Copyright © Asial Corporation. All Rights Reserved.
色の指定方法
カラーコード
 光の三原色で色を作る方法
 カラーコードでは16進数を使う
カラーコードの例
 紫の色を作る
└ 赤がf...
Copyright © Asial Corporation. All Rights Reserved.
サイズや位置を指定するプロパティ
プロパティ 説明 例
font-size 文字のサイズを設定します。font-size: 12px;
te...
Copyright © Asial Corporation. All Rights Reserved.
プロパティの種類
marginとpadding
 どちらも余白の幅を指定するプロパティ
 marginはborder(枠線)の外側の余白...
Copyright © Asial Corporation. All Rights Reserved.
背景に関するプロパティ
プロパティ 説明 例
background-
image 背景画像を設定します。
background-image:...
Copyright © Asial Corporation. All Rights Reserved.
パスの指定方法
パスの指定方法
 対象ファイルまでの位置を相対的に指定する方法
└ フォルダ間の区切り文字に「/」を使用
└ 上位のフォル...
Copyright © Asial Corporation. All Rights Reserved.
枠線に関するプロパティ
プロパティ 説明 例
border
線の色(および線種と線 の
太さ)を設定します。
border: solid 1...
Copyright © Asial Corporation. All Rights Reserved.
border-radiusの設定
border-radiusの設定
 border-radiusに10pxを指定すると、以下のように半径1...
Copyright © Asial Corporation. All Rights Reserved.
結果を表示する方法
HTMLとCSSだけでは、おみくじに使うランダムな値を生
成することができません。
JavaScriptを用いて、ランダ...
Copyright © Asial Corporation. All Rights Reserved.
スクリプトの実装
<script>タグ内にJavaScriptを記述します。
<script>
function play() {
var ...
Copyright © Asial Corporation. All Rights Reserved.
JavaScriptの書き方
JavaScript書き方のルール
 基本的に半角の英数字と記号のみを使用する
└ 「'」か「"」で囲まれた...
Copyright © Asial Corporation. All Rights Reserved.
JavaScript -イベント-
イベントとは
 ページ上で発生した出来事(ページが表示された、ボタンがクリック
された等)のことをイ...
Copyright © Asial Corporation. All Rights Reserved.
JavaScript -イベントハンドラ-
イベントハンドラ
 イベントハンドラは、イベントとJavaScriptの処理を関連付ける仕組...
Copyright © Asial Corporation. All Rights Reserved.
JavaScriptの文法 -関数-
関数とは
 一連の処理をまとめて名前をつけたものを関数といいます。
 処理を関数として定義してお...
Copyright © Asial Corporation. All Rights Reserved.
JavaScriptの文法 -変数-
変数とは
 データを一時的に入れておくための箱のような仕組みです。
 変数を利用する前の準備とし...
Copyright © Asial Corporation. All Rights Reserved.
ランダムに結果を出す方法を考える
 ランダムな値を得る方法
Math.random()関数を呼ぶと、0から0.99999(1未満)の範囲の...
Copyright © Asial Corporation. All Rights Reserved.
JavaScriptの文法 - 条件分岐 -
条件分岐
 条件が正しいときと正しくないときで、処理内容を振り分ける仕組み
です。
 e...
Copyright © Asial Corporation. All Rights Reserved.
ダイアログメッセージの表示
ダイアログの表示
 ページの前面に表示されるメッセージウィンドウを「ダイアログ」と
いいます。
63
aler...
Copyright © Asial Corporation. All Rights Reserved.
DOM
DOMとは
 DOM(Document Object Model)の略
 JavaScriptでHTMLの各要素にアクセスする仕...
Copyright © Asial Corporation. All Rights Reserved.
DOM
要素の内容変更
65
文法 内容の変更
document.getElementById("ID値").innerHTML = "書き...
Copyright © Asial Corporation. All Rights Reserved.
第3回 おみくじアプリを改造しよう
66
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
67
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
68
文法エラーの確認
 Monacaデバッガーでプロジェクトを実行すると、文法にエラーが
あった場合に...
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
文法エラー以外のバグ(プログラムの間違い)を探すには
 文法は間違っていないが、プログラムが意図した通り...
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
意図した通りに動かない原因を探す方法
 alert()命令をプログラムの途中に差し込んで、どこから動きが...
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
console.log
 alert()をconsole.log()に変えるとダイアログではなく、編集画...
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
72
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
通常、モバイルアプリはOSごとに異なるプログラム言語を
使って開発します。
このようにして作られたアプリを「ネ...
Copyright © Asial Corporation. All Rights Reserved.
OSに対応する言語
端末固有の機能を使ってみよう
端末固有の機能の呼び出し
 Monacaで作られたアプリは、HTML・CSS・JavaS...
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
navigator.vibrate(振動時間);
※ 振動時間はミリ秒単位で指定
バイブレーション機能の利用
...
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
おみくじが出たときにバイブレーションする
 以下の命令を追加します。
76
alert("おみくじが出ました...
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
77
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
大吉が出る確率を増やすには・・・?
78
?
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
OR演算子(||)
 複数の条件のうちいずれかに合致したときにtrue(正しい)となる
 すべての条件に合致...
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
AND演算子(&&)
 複数の条件がすべてに合致したときにtrue(正しい)となる
 どれか一つでも合致しな...
Copyright © Asial Corporation. All Rights Reserved.
おみくじをひいた数をカウントしよう
81
Copyright © Asial Corporation. All Rights Reserved.
おみくじを引いた数をカウントしよう
カウント機能の実装
 おみくじを引いた数をカウントするための変数を用意します。
 関数の中で変数を宣...
Copyright © Asial Corporation. All Rights Reserved.
おみくじを引いた数をカウントしよう
グローバル変数
 関数の外側で宣言された変数は「グローバル変数」となります。
 「グローバル変数」の...
Copyright © Asial Corporation. All Rights Reserved.
おみくじを引いた数をカウントしよう
N回に一度、という条件の指定方法
 剰余算(割り算のあまりを求める)を使います。
 N回に一度だけ処...
Copyright © Asial Corporation. All Rights Reserved.
課題
20回に一回だけ、スーパーレア大吉を出現させよう!
85
画像は以下からダウンロードして下さい
http://bit.ly/2gtCr...
Próximos SlideShares
Carregando em…5
×

書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)

2.020 visualizações

Publicada em

Monacaはブラウザだけで本格的なアプリ開発ができるサービスです。
このスライドは書籍『Monacaで学ぶはじめてのプログラミング』全12章相当の学習が完了している方を対象とした講義用スライドです。
サンプルアプリ開発を中心とした内容となっており、より実践的なアプリ構築手法を学ぶことができます。
第3回分まで一般公開しております。
第10回分まで利用したい場合、Monacaの利用を表明して頂ける教育機関に無料提供を行っておりますのでお問い合わせください。

Publicada em: Educação
  • Seja o primeiro a comentar

書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)

  1. 1. Copyright © Asial Corporation. All Rights Reserved. はじめてのプログラミング 実践編 で学ぶ
  2. 2. Copyright © Asial Corporation. All Rights Reserved. はじめに 2
  3. 3. Copyright © Asial Corporation. All Rights Reserved. はじめに Monaca Education事業のご紹介  Monacaとは └ ブラウザだけで本格的なアプリ開発ができるサービスです  Monaca Education事業 └ アプリ開発による実践的なプログラミング教育を支援します • 教材の開発と提供 • 教育用ライセンスの提供 • 各種トレーニングの実施 3 https://edu.monaca.io/
  4. 4. Copyright © Asial Corporation. All Rights Reserved. はじめに このスライドについて  書籍『Monacaで学ぶはじめてのプログラミング』全12章相当の学習 が完了している方を対象とした講義用スライドです。  サンプルアプリ開発を中心とした内容となっており、より実践的なア プリ構築手法を学ぶことができます。 4 https://ja.monaca.io/book/001/
  5. 5. Copyright © Asial Corporation. All Rights Reserved. はじめに 目次 5 コマ番号 タイトル 要素技術 第1回 オリエンテーション Monaca 第2回 おみくじアプリを作ろう HTML/CSS/Javascript 第3回 おみくじアプリを改造しよう ハードウェア機能 第4回 宝当てゲームを作ろう 関数 第5回 宝当てゲームを改造しよう ローカルストレージ 第6回 Yes/No チャートアプリを作ろう Onsen UI 第7回 道路標識暗記アプリを作ろう JSON 第8回 アンケートアプリを作ろう ニフティクラウドmobile backend(サーバ連携) 第9回 地図アプリを作ろう Yahoo! 地図API 第10回 位置情報共有アプリを作ろう 総括
  6. 6. Copyright © Asial Corporation. All Rights Reserved. はじめに 利用について  第3回分まではスライドシェアにて無料で公開しております └ ダウロードや再配布はできません └ 授業や勉強会・セミナーでお使い頂いて構いません  第10回分まで利用したい場合 └ Monacaの利用を表明して頂ける教育機関(学校教育法で定めら れた教育機関)に無料提供しています。 └ その他の教育機関も別途相談に応じます └ お問い合わせはMonacaのサイトにて受け付けております • https://ja.monaca.io/support/inquiry.html 6
  7. 7. Copyright © Asial Corporation. All Rights Reserved. 第1回 オリエンテーション 7
  8. 8. Copyright © Asial Corporation. All Rights Reserved. Monacaのアカウント登録 8
  9. 9. Copyright © Asial Corporation. All Rights Reserved. Monaca のアカウント登録 1) 公式サイト URL にアクセス https://ja.monaca.io/ 第1章 9
  10. 10. Copyright © Asial Corporation. All Rights Reserved. Monaca のアカウント登録 2) 「サインアップ」からメールアドレスとパスワードを登録 第1章 10
  11. 11. Copyright © Asial Corporation. All Rights Reserved. Monaca のアカウント登録 3) 仮登録完了メールを確認 メールに記載されたURL にアクセス 登録完了 第1章 11
  12. 12. Copyright © Asial Corporation. All Rights Reserved. ダッシュボードとプロジェクト 12
  13. 13. Copyright © Asial Corporation. All Rights Reserved. Monaca ダッシュボードとプロジェクト ログインとダッシュボードの表示  開発中のアプリはプロジェクト単位で管理を行う └ 画面左側に一覧表示される 第1章 13
  14. 14. Copyright © Asial Corporation. All Rights Reserved. Monaca ダッシュボードとプロジェクト 新規プロジェクト作成 1)『新規プロジェクト』ボタンをクリック 2)プロジェクト名を設定 3)『プロジェクトを作成する』ボタンをクリック 第1章 14
  15. 15. Copyright © Asial Corporation. All Rights Reserved. Monaca ダッシュボードとプロジェクト プロジェクト一覧に表示されれば成功  プロジェクト名 └ 自由に設定可能 └ 後で管理しやすいように気をつける 第1章 15
  16. 16. Copyright © Asial Corporation. All Rights Reserved. Monaca IDEの使い方 16
  17. 17. Copyright © Asial Corporation. All Rights Reserved. プログラムを記述する Monaca IDE  IDEは統合開発環境の略  正式には「Integrated Development Environment」 第1章 17
  18. 18. Copyright © Asial Corporation. All Rights Reserved. プログラムを記述する コードエディター  プログラムを記述するためのパネル 第1章 18
  19. 19. Copyright © Asial Corporation. All Rights Reserved. プログラムを記述する メニューバー  各種機能を呼び出す └ 保存 └ ダウンロード └ ビルドなど 第1章 19
  20. 20. Copyright © Asial Corporation. All Rights Reserved. プログラムを記述する プレビュー  プログラムの実行結果が表示されます。 第1章 20
  21. 21. Copyright © Asial Corporation. All Rights Reserved. プログラムを記述する はじめてのプログラム  「This is a template for Monaca app.」を削除  「はじめてのプログラム」と記述  メニューバーの[保存]をクリック 第1章 21
  22. 22. Copyright © Asial Corporation. All Rights Reserved. プログラムを記述する プレビューの更新  [保存]と連動してプレビュー画面が自動更新される  自動で更新されない場合 └ プレビュー画面右上の青い矢印ボタンをクリック 第1章 22
  23. 23. Copyright © Asial Corporation. All Rights Reserved. Monacaデバッガーの利用 23
  24. 24. Copyright © Asial Corporation. All Rights Reserved. Monaca デバッガーの利用 Monaca デバッガーとは  アプリの動作を確認するツール  プレビューより高度な動作確認が可能 └ カメラやコンパスなどのハードウェア機能 第1章 24
  25. 25. Copyright © Asial Corporation. All Rights Reserved. Monaca デバッガーの利用 Monaca デバッガーのメニュー  プロジェクトを開きアプリの動作を確認  丸いMonacaボタンはメニュー └ 更新やログの確認が可能 第1章 25
  26. 26. Copyright © Asial Corporation. All Rights Reserved. Educationプランの有効化 26
  27. 27. Copyright © Asial Corporation. All Rights Reserved. プランのアップグレード Educationプランとは  作成可能なプロジェクト数が20件に増えます。  共有開発機能が利用可能になります。 • Monacaにログインし、ダッシュボード下部の「アクティベーション コード」ボタンをクリックします。 27
  28. 28. Copyright © Asial Corporation. All Rights Reserved. プランのアップグレード 28 氏名、電話番号(学校の番号)を入力します。
  29. 29. Copyright © Asial Corporation. All Rights Reserved. プランのアップグレード 29 書籍の裏表紙についているカードを剥がし、裏面に記載さ れている16桁のアクティベーションコードを入力します。
  30. 30. Copyright © Asial Corporation. All Rights Reserved. プランのアップグレード 30 「適用する」ボタンを押したら完了です。
  31. 31. Copyright © Asial Corporation. All Rights Reserved. プランのアップグレード 31 「ダッシュボード」をクリックして前の画面に戻ります。
  32. 32. Copyright © Asial Corporation. All Rights Reserved. 第2回 おみくじアプリを作ろう 32
  33. 33. Copyright © Asial Corporation. All Rights Reserved. おみくじアプリを作成する サンプルアプリ開発を通じて、HTML/CSS/JavaScriptの 役割を確認します。  おみくじを模したアプリケーション  ボタンを押すとランダムな画像を表示する 33
  34. 34. Copyright © Asial Corporation. All Rights Reserved. 必要な技術 Monacaでモバイルアプリを開発するには、Webの技術で あるHTML・CSS・JavaScriptの知識が必要になります。 HTML (文書構造) CSS (文書の装飾) JavaScript (動きをつける) 34
  35. 35. Copyright © Asial Corporation. All Rights Reserved. 事前準備 下記のURLにアクセスして素材となるZIPファイルを入手 してください。 ■ 素材集ページ https://ja.monaca.io/book/001/ おみくじアプリの「ひな形」をクリックしてダウンロード します。 35
  36. 36. Copyright © Asial Corporation. All Rights Reserved. 新しいプロジェクトを作成する Monaca に ロ グ イ ン し 、 ダ ッ シ ュ ボ ー ド で 「 Import Project」ボタンを選択します。 36
  37. 37. Copyright © Asial Corporation. All Rights Reserved. 新しいプロジェクトを作成する 1.名前と説明(任意入力)を設定して新規プロジェクトを 作成します  プロジェクト名:おみくじアプリ 2.「プロジェクトのパッケージをアップロード」ラジオボ タンにチェックを入れ、先ほどダウンロードしたzipファ イルを指定します。 3.「インポート」ボタンをクリックします。 37
  38. 38. Copyright © Asial Corporation. All Rights Reserved. HTMLタグの確認 Monaca IDEのindex.htmlの<body>タグ内を確認して ください。 <body> <img src="images/omikuji-box.png" id="omikuji"> <button id="playBtn" onclick="play()">おみくじをひく</button> </body> 38
  39. 39. Copyright © Asial Corporation. All Rights Reserved. HTML HTMLでは、コンテンツ(ページに表示する内容)を見出 しや段落などのパーツに分け、それぞれを1つの部品とし て構成しています。この部品を「要素」と呼びます。 <h1> HTML入門 </h1> 開始タグ 終了タグ 要素  タグは半角英数小文字で記述  終了タグには「 / 」が入る  開始タグから終了タグまでを「要素」と呼ぶ 39
  40. 40. Copyright © Asial Corporation. All Rights Reserved. <body>タグ内に記述するタグの種類 主なタグの一覧 40 タグ名 概要 h1 見出しを定義します。h1~h6まであり、h1が最も高レベル、h6が最 も低レベルな見出しです。 img 画像を参照します。 src属性・・・画像の参照先を指定します。 div 特に意味を持たないタグです。複数のタグをまとめて扱うときや、四 角い枠を描画したいときに使います。 a リンクを定義します。 href属性・・・リンク先のURLを指定します。 button ボタンを定義します。
  41. 41. Copyright © Asial Corporation. All Rights Reserved. タグの属性 要素対して「属性」をつけることで、付加情報を与えるこ とができます。 <h1 id="guide_to_html"> HTML入門 </h1> 属性名 属性 属性値  <h1>タグに要素を識別するためのID属性を指定しています。  IDの他にも、適用するCSSや画像のパス、リンク先のURLなど様々な属性を指 定できます。  属性値は「"」(ダブルクォート)か「'」(シングルクォート)で囲みます。 41
  42. 42. Copyright © Asial Corporation. All Rights Reserved. CSSの確認 css/style.cssの記述を確認してください body { background-image : url("../images/omikuji-bg.png"); background-size : cover; background-repeat: no-repeat; margin : 0; padding : 0; height: 100%; width: 100%; text-align: center; } #omikuji{ margin: 20px; width : 60%; } #playBtn { width: 60%; padding: 10px; font-size: 22px; border-radius: 10px; background-color: #444444; color: white; outline: none; } 42
  43. 43. Copyright © Asial Corporation. All Rights Reserved. CSSとは CSS(Cascading Style Sheets)とは  HTML文章を装飾するための技術  色やサイズなどを変更できる 43 HTML (文書構造) CSS (文書の装飾) HTMLファイルにCSSファイルを読み込むことで、 ページにデザインが適用される
  44. 44. Copyright © Asial Corporation. All Rights Reserved. CSSとは CSSをHTMLファイルに読み込む方法(外部ファイル)  linkタグを記述  href属性でパスを指定する  例 44 <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="CSSファイルのパス"> 文法 CSSファイルの読み込み
  45. 45. Copyright © Asial Corporation. All Rights Reserved. CSSの記述構造(セレクタ・プロパティ・値) CSSを指定する記述は、スタイル(デザイン)を適用する 対象の「セレクタ」と、スタイルの種類を表す「プロパ ティ」の組み合わせによって構成されます。 h1 { color: red; }  セレクタ スタイルを適用する対象(タグ名、クラス名、IDなどを指定できます)  プロパティ 色やサイズなどの、スタイルの種類  値 属性の値 セレクタ プロパティ 値 45
  46. 46. Copyright © Asial Corporation. All Rights Reserved. 色を指定するプロパティ プロパティ 説明 例 color 文字色を設定します。 color: red; background- color 背景色を設定します。 background-color: red; プロパティの種類 46
  47. 47. Copyright © Asial Corporation. All Rights Reserved. 色の指定方法 カラーコード  光の三原色で色を作る方法  カラーコードでは16進数を使う カラーコードの例  紫の色を作る └ 赤がff(255)緑が00(0)青がff(255) └ 原色の赤と青を混ぜた色=紫になる 47 #ff00ff
  48. 48. Copyright © Asial Corporation. All Rights Reserved. サイズや位置を指定するプロパティ プロパティ 説明 例 font-size 文字のサイズを設定します。font-size: 12px; text-align 要素内の横方向の配置を設 定します。 text-align: left;(左寄せ) text-align: right;(右寄 せ) text-align: center;(中央 揃え) text-align: justify;(均等 割付) width 要素の横幅を設定します。 width: 100px height 要素の高さを設定します。 height: 300px; margin 枠線の外側の余白を設定し ます。 margin: 20px; padding 枠線の内側の余白を設定し ます。 padding: 10px; プロパティの種類 48
  49. 49. Copyright © Asial Corporation. All Rights Reserved. プロパティの種類 marginとpadding  どちらも余白の幅を指定するプロパティ  marginはborder(枠線)の外側の余白  paddingはborderの内側の余白 49 要素 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 margin padding
  50. 50. Copyright © Asial Corporation. All Rights Reserved. 背景に関するプロパティ プロパティ 説明 例 background- image 背景画像を設定します。 background-image: url(" 画像のパス"); background-size 背景画像の表示サイズを設 定します。 background-size: cover; ※coverは背景領域を完全 に覆うように、拡大表示し ます。 background- repeat 背景画像を繰り返し表示す るかどうかを設定します。 background-repeat: no- repeat; ※no-repeatは、背景画像 を一枚だけ表示します。 プロパティの種類 50
  51. 51. Copyright © Asial Corporation. All Rights Reserved. パスの指定方法 パスの指定方法  対象ファイルまでの位置を相対的に指定する方法 └ フォルダ間の区切り文字に「/」を使用 └ 上位のフォルダは「..」で表す 51 いまここ 一つ上(..)
  52. 52. Copyright © Asial Corporation. All Rights Reserved. 枠線に関するプロパティ プロパティ 説明 例 border 線の色(および線種と線 の 太さ)を設定します。 border: solid 1px red; 線種、線の太さ、線の色の 順に 設定します。 ※solidは直線を表します。 border-radius 四角形の枠の角を丸くする 設定をします。 border-radius: 10px; outline 枠の縁取りを設定します。 outline: none; ※noneは縁取りを表示しな い設定です。これを指定し ないと、スマホではボタン の周りにオレンジの枠が表 示されてしまいます。 プロパティの種類 52
  53. 53. Copyright © Asial Corporation. All Rights Reserved. border-radiusの設定 border-radiusの設定  border-radiusに10pxを指定すると、以下のように半径10px 分のカーブがつきます。 53
  54. 54. Copyright © Asial Corporation. All Rights Reserved. 結果を表示する方法 HTMLとCSSだけでは、おみくじに使うランダムな値を生 成することができません。 JavaScriptを用いて、ランダムに結果が表示されるよう改 良していきます。 54
  55. 55. Copyright © Asial Corporation. All Rights Reserved. スクリプトの実装 <script>タグ内にJavaScriptを記述します。 <script> function play() { var no = Math.floor(Math.random() * 5); var image_name; if (no == 0) { image_name = "daikichi.png"; } else if (no == 1) { image_name = "chuukichi.png"; } else if (no == 2) { image_name = "shoukichi.png"; } else if (no == 3) { image_name = "suekichi.png"; } else { image_name = "kyou.png"; } alert("おみくじが出ました!さて結果は?"); document.getElementById("omikuji").src = "images/" + image_name; document.getElementById("playBtn").innerHTML = "やりなおす"; } </script> 55
  56. 56. Copyright © Asial Corporation. All Rights Reserved. JavaScriptの書き方 JavaScript書き方のルール  基本的に半角の英数字と記号のみを使用する └ 「'」か「"」で囲まれた範囲と、コメント「//」のみ全角文字も可  大文字と小文字は別の文字として扱われる  命令文の末尾には「;」をつける。  ひとまとまりの命令群を波かっこ{ } で囲む └ 囲まれた範囲をブロックと呼ぶ └ ブロック内は、先頭にタブ文字(tabキー)を挿入してブロックの 開始と終了がわかりやすいように記述する  改行や半角スペースは自由に挿入できる 56
  57. 57. Copyright © Asial Corporation. All Rights Reserved. JavaScript -イベント- イベントとは  ページ上で発生した出来事(ページが表示された、ボタンがクリック された等)のことをイベントといいます。  ボタンがタップされたときのイベントの名称は「click」イベントです。 ブラウザ イベントハンドラ JavaScript click ① イベントが発生する ② イベントハンドラがイベントの発生を検知する ③ イベントハンドラに関連付けられた処理が呼び出される イベント発生時の流れ 57
  58. 58. Copyright © Asial Corporation. All Rights Reserved. JavaScript -イベントハンドラ- イベントハンドラ  イベントハンドラは、イベントとJavaScriptの処理を関連付ける仕組 みです。  HTMLタグの属性として記述します。  イベントハンドラの名前は、「on + イベント名」です。 <script> function sayHello() { alert("Hello!"); } </script> <body> <button onclick="sayHello();">おしてね!</button> </body> イベントハンドラの例 58
  59. 59. Copyright © Asial Corporation. All Rights Reserved. JavaScriptの文法 -関数- 関数とは  一連の処理をまとめて名前をつけたものを関数といいます。  処理を関数として定義しておくことで、必要なときに何度でも呼び出 すことができます。 function 関数名 () { 実行される処理; } 関数の作り方 関数名() ; 関数の呼び出し方 59
  60. 60. Copyright © Asial Corporation. All Rights Reserved. JavaScriptの文法 -変数- 変数とは  データを一時的に入れておくための箱のような仕組みです。  変数を利用する前の準備として、まず変数の「宣言」を行います。  変数に値を入れることを「代入」といいます。 var a; …① a = 10; …② a = 20; …③ a ① aという名前の 変数が作られる ② 変数aの中に 10 が代入される 10a ③ 変数aの中身が 20に上書きされる 20 a 10 ×NEW var 変数名; 宣言の書式 変数 = 値; 代入の書式 60
  61. 61. Copyright © Asial Corporation. All Rights Reserved. ランダムに結果を出す方法を考える  ランダムな値を得る方法 Math.random()関数を呼ぶと、0から0.99999(1未満)の範囲の実数を返しま す。 その結果を5倍し、Math.floor()関数で小数部分を切り捨てます。これによっ て0~4の5通りの数字が作られます。 ■ ランダム関数の使用例 Math.floor(Math.random() * 5) 61
  62. 62. Copyright © Asial Corporation. All Rights Reserved. JavaScriptの文法 - 条件分岐 - 条件分岐  条件が正しいときと正しくないときで、処理内容を振り分ける仕組み です。  else if文は複数指定することができます。 └ 複数の条件式に合致する場合、実行されるのは最初に合致した条件のみです if (条件式1) { // 条件式1がtrueの場合に実行する処理 } else if (条件式2) { // 条件式2がtrueの場合に実行する処理 } else { // すべての条件式がfalseの場合に実行する処理 } 条件分岐の例 62
  63. 63. Copyright © Asial Corporation. All Rights Reserved. ダイアログメッセージの表示 ダイアログの表示  ページの前面に表示されるメッセージウィンドウを「ダイアログ」と いいます。 63 alert("こんにちは");
  64. 64. Copyright © Asial Corporation. All Rights Reserved. DOM DOMとは  DOM(Document Object Model)の略  JavaScriptでHTMLの各要素にアクセスする仕組みです 64 HTML要素へのアクセス 文法 要素へのアクセス document.getElementById("ID値")
  65. 65. Copyright © Asial Corporation. All Rights Reserved. DOM 要素の内容変更 65 文法 内容の変更 document.getElementById("ID値").innerHTML = "書き換える内容"; 要素の属性変更 文法 属性の変更 例 画像を「flower.jpg」に切り替える document.getElementById("ID値").属性名 = "属性値"; document.getElementById("target").src = "flower.jpg";
  66. 66. Copyright © Asial Corporation. All Rights Reserved. 第3回 おみくじアプリを改造しよう 66
  67. 67. Copyright © Asial Corporation. All Rights Reserved. プログラムがうまく動かないときは 67
  68. 68. Copyright © Asial Corporation. All Rights Reserved. プログラムがうまく動かないときは 68 文法エラーの確認  Monacaデバッガーでプロジェクトを実行すると、文法にエラーが あった場合にエラーメッセージが表示されます。 index.htmlの33行目 付近でエラー発生
  69. 69. Copyright © Asial Corporation. All Rights Reserved. プログラムがうまく動かないときは 文法エラー以外のバグ(プログラムの間違い)を探すには  文法は間違っていないが、プログラムが意図した通りに動かない、と いう場合はエラーを検出することができません。 69 if (no == 0) { image_name = "daikichi.png"; } else if (no == 1) { image_name = "chuukichi.png"; } else if (no == 2) { image_nama = "shoukichi.png"; } else if (no == 3) { image_name = "suekichi.png"; } else { image_name = "kyou.png"; } なぜか小吉だけ 出ない!
  70. 70. Copyright © Asial Corporation. All Rights Reserved. プログラムがうまく動かないときは 意図した通りに動かない原因を探す方法  alert()命令をプログラムの途中に差し込んで、どこから動きがおかし くなっているのか見当をつけます。 70 alert(no); if (no == 0) { image_name = "daikichi.png"; } else if (no == 1) { image_name = "chuukichi.png"; } else if (no == 2) { image_nama = "shoukichi.png"; } else if (no == 3) { image_name = "suekichi.png"; } else { image_name = "kyou.png"; } alert(image_name);
  71. 71. Copyright © Asial Corporation. All Rights Reserved. プログラムがうまく動かないときは console.log  alert()をconsole.log()に変えるとダイアログではなく、編集画面下 のデバッグパネルに表示されます。 71 console.log(no); if (no == 0) { image_name = "daikichi.png"; } else if (no == 1) { image_name = "chuukichi.png"; } else if (no == 2) { image_nama = "shoukichi.png"; } else if (no == 3) { image_name = "suekichi.png"; } else { image_name = "kyou.png"; } console.log(image_name);
  72. 72. Copyright © Asial Corporation. All Rights Reserved. 端末固有の機能を使ってみよう 72
  73. 73. Copyright © Asial Corporation. All Rights Reserved. 端末固有の機能を使ってみよう 通常、モバイルアプリはOSごとに異なるプログラム言語を 使って開発します。 このようにして作られたアプリを「ネイティブアプリ」と 呼びます。 × × 73
  74. 74. Copyright © Asial Corporation. All Rights Reserved. OSに対応する言語 端末固有の機能を使ってみよう 端末固有の機能の呼び出し  Monacaで作られたアプリは、HTML・CSS・JavaScriptファイルを OSに対応する言語で包んだ形式になっています。  端末固有の機能を利用する場合、JavaScriptで命令を記述すると、 OSに合わせた言語に置き換えられて命令が実行されます。 連絡帳GPSカメラ HTML・CSS・JavaScript OS 74
  75. 75. Copyright © Asial Corporation. All Rights Reserved. 端末固有の機能を使ってみよう navigator.vibrate(振動時間); ※ 振動時間はミリ秒単位で指定 バイブレーション機能の利用  バイブレーション命令 75
  76. 76. Copyright © Asial Corporation. All Rights Reserved. 端末固有の機能を使ってみよう おみくじが出たときにバイブレーションする  以下の命令を追加します。 76 alert("おみくじが出ました!さて結果は?"); // 1秒間振動させる navigator.vibrate(1000); // 画像と文字列の差し替え document.getElementById("omikuji").src = "images/" + image_name; document.getElementById("playBtn").innerHTML = "やりなおす";
  77. 77. Copyright © Asial Corporation. All Rights Reserved. 結果の出現確率を変更しよう 77
  78. 78. Copyright © Asial Corporation. All Rights Reserved. 結果の出現確率を変更しよう 大吉が出る確率を増やすには・・・? 78 ?
  79. 79. Copyright © Asial Corporation. All Rights Reserved. 結果の出現確率を変更しよう OR演算子(||)  複数の条件のうちいずれかに合致したときにtrue(正しい)となる  すべての条件に合致しない場合はfalse(正しくない)となる  例 79 if(x == 1 || x == 2 || x == 3) { alert("xは1か2か3のどれか"); }
  80. 80. Copyright © Asial Corporation. All Rights Reserved. 結果の出現確率を変更しよう AND演算子(&&)  複数の条件がすべてに合致したときにtrue(正しい)となる  どれか一つでも合致しない場合はfalse(正しくない)となる  例 80 if(x >= 1 && x <= 3) { alert("xは1以上でかつ、3以下"); }
  81. 81. Copyright © Asial Corporation. All Rights Reserved. おみくじをひいた数をカウントしよう 81
  82. 82. Copyright © Asial Corporation. All Rights Reserved. おみくじを引いた数をカウントしよう カウント機能の実装  おみくじを引いた数をカウントするための変数を用意します。  関数の中で変数を宣言すると、一度関数が終了したら変数の値はリ セットされてしまいます。  間違った例 82 function play() { var count = 0; // 初期値0としてcount変数を作る count++; // countを1加算 …省略… } // 関数が終わったら、count変数は消えてしまう
  83. 83. Copyright © Asial Corporation. All Rights Reserved. おみくじを引いた数をカウントしよう グローバル変数  関数の外側で宣言された変数は「グローバル変数」となります。  「グローバル変数」の値は、アプリを起動してからアプリを終了する までの間、ずっと保持され続けます。 83 var count = 0; // グローバル変数として宣言 function play() { count++; // countを1加算 …省略… }
  84. 84. Copyright © Asial Corporation. All Rights Reserved. おみくじを引いた数をカウントしよう N回に一度、という条件の指定方法  剰余算(割り算のあまりを求める)を使います。  N回に一度だけ処理をしたい場合は、Nで剰余算した結果が0だった 場合にのみ処理をします。 84 alert(10 % 3); // 10を3で割ったあまり=1が表示される alert(10 % 5); // 10を5で割ったあまり=0が表示される
  85. 85. Copyright © Asial Corporation. All Rights Reserved. 課題 20回に一回だけ、スーパーレア大吉を出現させよう! 85 画像は以下からダウンロードして下さい http://bit.ly/2gtCrj7

×