くだもの図鑑で研修2025

Transcript

1. Copyright © Asial Corporation. All Rights Reserved. Monaca Education情報Ⅰ研修会： 「Monacaで情報デザイン（HTML・CSS）」 1
2. Copyright © Asial Corporation. All Rights Reserved. 概要  HTMLxCSSで情報科の授業を行う意義  Monaca Educationのアップデート紹介  アプリ制作教材『くだもの図鑑』 2
3. Copyright © Asial Corporation. All Rights Reserved. HTMLxCSSで情報科の授業を行う意義 3
4. Copyright © Asial Corporation. All Rights Reserved. HTMLxCSSで情報科の授業を行う意義  HTMLxCSSで情報科の授業を行う意義 ・ まず、指導要領にWebという単語は40個あります ・ HTMLとCSSは0個ですが ・ コンテンツの制作や『発信』が行えます ・ Webは発信しやすい ・ 学外からスマホでみられる ・ デザイン以外の領域にも関係します ・ インターネット/マルティメディア/Webシステムなど ・ ファイル・フォルダ・URLを教えることもできます 4
5. Copyright © Asial Corporation. All Rights Reserved. Monaca Educationのアップデートについて 5
6. Copyright © Asial Corporation. All Rights Reserved.  Monaca Educationのアップデートについて ・ ダッシュボードの更新と教材サポートの導線改良 ・ コース機能（情報デザインは来年） ・ スマホでみる（Web公開機能の簡易版） ・ エディタパネル・タブの改良 ・ フォルダ非表示機能 ・ ツール（β） ・ お絵かき・録音など ・ クラウドデータベース容量UP(画像も頑張れば保存可) 6
7. Copyright © Asial Corporation. All Rights Reserved.  ダッシュボードの更新 ・ 『インポート』から教材サポートへ ・ リンク集再統合（生徒・先生） ・ 各種管理者機能の搭載 7
8. Copyright © Asial Corporation. All Rights Reserved.  教材サポートの導線改良 ・ 『インポート』から教材サポートへ ・ 本日の教材「インポート＞アプリ制作教材＞くだもの図鑑」 8
9. Copyright © Asial Corporation. All Rights Reserved.  コース機能 ・ Monaca単体でコース学習が可能に ・ おみくじ（プログラミング領域）が先行リリース ・ 情報デザインのコースは2026年度予定 9
10. Copyright © Asial Corporation. All Rights Reserved.  スマホでみる ・ スマホでみる（Web公開機能の簡易版） 10
11. Copyright © Asial Corporation. All Rights Reserved.  エディタパネル・タブの改良 ・ pytyon.pyなどをデフォルト起動できます ・ 図鑑ならindex.htmlとstyle.cssをデフォルト起動可能 11
12. Copyright © Asial Corporation. All Rights Reserved.  エディタパネル・タブの改良（仕組み） ・ config.jsonで制御可能 12
13. Copyright © Asial Corporation. All Rights Reserved.  フォルダ非表示機能 ・ 隠したいファイルやフォルダを隠せるようになりました ・ こちらもconfig.jsonで制御可能 13
14. Copyright © Asial Corporation. All Rights Reserved.  ツール(β)ドット絵エディター ・ Monaca上でドット絵を書けます ・ Monaca上への保存も可能 ・ （ファイル名は保存時の時分.png） 14
15. Copyright © Asial Corporation. All Rights Reserved.  ツール(β):ドット絵エディター ・ ファイルはwww直下に保存されます 15
16. Copyright © Asial Corporation. All Rights Reserved.  ツール(β)：ボイスレコーダー ・ Monaca上で音声を録音できます ・ Monaca上への保存も可能 ・ （ファイル名は保存時の時分.wav） 16
17. Copyright © Asial Corporation. All Rights Reserved.  ツール(β)：ペイント ・ 高度なペイント機能（レイヤー対応） ・ 保存はローカルのみ 17
18. Copyright © Asial Corporation. All Rights Reserved.  データベース容量UP ・ 1レコード10KBまで対応 ・ 5KB程度の画像ならBASE64化して登録可能に 18
19. Copyright © Asial Corporation. All Rights Reserved.  データベース容量UP ・ 5KBでも圧縮すれば意外と入る ・ squoosh（画像を圧縮できるツールで圧縮した例） 19
20. Copyright © Asial Corporation. All Rights Reserved.  データベース容量UP ・ BASA64化はChrome単体でも可能 20
21. Copyright © Asial Corporation. All Rights Reserved. HTMLとCSSによる情報デザイン 21
22. Copyright © Asial Corporation. All Rights Reserved.  サンプルアプリ『くだもの図鑑』を見てみよう ・ 図鑑アプリは何で出来ている？ ・ HTMLファイルを変更してみよう  HTMLファイルを作ろう  CSSで表示のしかたを変えてみよう 22
23. Copyright © Asial Corporation. All Rights Reserved. 23 サンプルアプリ『くだもの図鑑』を見てみよう
24. Copyright © Asial Corporation. All Rights Reserved. 1. Monaca Educationにログインする 2. サンプルプロジェクト「図鑑アプリ」をインポー トする（読み込む） 3. Monaca Educationのダッシュボードで、「図鑑ア プリ」プロジェクトを選び、「クラウドIDEで開 く」をクリックする 24 ※プロジェクト名をク リックして選択すると、 画面右に説明と「クラ ウドIDEで開く」ボタン が表示される
25. Copyright © Asial Corporation. All Rights Reserved.  サンプル：くだもの図鑑 25
26. Copyright © Asial Corporation. All Rights Reserved.  ボタンをクリックしてみよう 26 ボタンをクリックすると、別のページが開く クリック
27. Copyright © Asial Corporation. All Rights Reserved.  表示されたページに何があるか確認しよう 前のページに「戻る」 リンク 大きな 見出し 画像 リンゴについての説明文 出典の表示 説明文を囲 む、 破線の枠 27
28. Copyright © Asial Corporation. All Rights Reserved. リンクになっていて、クリックすると、前のページ（ボ タンのあるページ）に戻る 戻る そのページの内容を知らせている。 他と比べて大きなサイズで表示 見出し 画像が表示されている 画像 説明文の部分を囲んでいる枠線。破線で表示 説明文を囲む枠 文章で書かれた、要素の説明 説明文 説明文が、どこから引用されたか 出典 28 HTMLファイルの中に、これらの情報は書き込まれている。 CSSファイルの中に、これらの情報の表示方法が書き込まれている 例： - 破線の枠
29. Copyright © Asial Corporation. All Rights Reserved.  最初の画面には何がある？ 大きな 見出し ボタン※ ※ただのボタンではなく、 クリックすると別のページに 表示が切り替わる 29
30. Copyright © Asial Corporation. All Rights Reserved. 30 そのページの内容（アプリの名称）を知らせている。 他と比べて大きなサイズで表示されている 見出し ボタンとして表示されている。 クリックすると、別のHTMLファイルに切り替わる ボタン
31. Copyright © Asial Corporation. All Rights Reserved. 31 図鑑アプリは何で出来ている？
32. Copyright © Asial Corporation. All Rights Reserved.  Monacaの画面左側（プロジェクトパネル）をみる - フォルダの中にファイルがある - ファイルには種類がある - 〜.html - 〜.jpg - CSSフォルダをクリックすると（ が▼になる）、中にstyle.cssファイ ルがある 32
33. Copyright © Asial Corporation. All Rights Reserved.  アプリはいろいろな種類のファイルで出来ている ・ HTMLファイル ・ CSSファイル ・ 画像ファイル（pngファイル、jpgファイルなど） ※Monaca Educationでは、ダブルクリックでそれぞれのファイルを開いて内容を確認できる 33
34. Copyright © Asial Corporation. All Rights Reserved.  index.html 34 まず、おおまかな構造を確認しよう <html> <head> … </head> <body> <h1>…</h1> <a> <button></button> </a> </body> </html>
35. Copyright © Asial Corporation. All Rights Reserved.  apple.html 35 まず、おおまかな構造を確認しよう <html> <head> … </head> <body> <a>戻る</a> <article> <h1>リンゴ</h1> <img src=”apple.png”> <p> （りんごの説明） </p> <p id=“jisho”> （辞書の説明） </p> </article> </body> </html>
36. Copyright © Asial Corporation. All Rights Reserved.  apple.png ※ 36 ※ apple.pngをMonaca Educationで開いた様子
37. Copyright © Asial Corporation. All Rights Reserved.  css/style.css 37 • buttonは、HTMLの<button>タグを 指している • background-color: green;に よって、ボタンの緑色が指定 されている • #jishoは、apple.htmlの中にある id=“jisho” を指している • border:dotted により、点線 の枠線が描かれている
38. Copyright © Asial Corporation. All Rights Reserved. 38 HTMLファイルを変更してみよう
39. Copyright © Asial Corporation. All Rights Reserved.  HTMLファイルを開いて、編集してみよう 1. index.htmlを開く 2. ファイルの中から<h1>くだもの図鑑</h1>を見つけ、そ の下の行にカーソルを合わせる 3. <h2>私の図鑑</h2> という行を入力する 4. ファイルを保存して、プレビューを表示する 「私の図鑑」は、どのように表示されるだろうか？ 39
40. Copyright © Asial Corporation. All Rights Reserved. 40
41. Copyright © Asial Corporation. All Rights Reserved.  HTML ・ Hyper Text Markup Language ・ 「マークアップ」：文書の中に、コンピュータに指示を 与える印をつけること ・ 例: <h1>くだもの図鑑</h1> ・ 「くだもの図鑑」は、文書の中でも一番上の階層として扱う ・ いろいろな方法があるが、HTMLでは、<>を使う「タグ」 でマークアップする 41
42. Copyright © Asial Corporation. All Rights Reserved.  タグの例: 見出しのタグ ・ <h1>, <h2>, <h3> …見出し ・ 数字が小さい方が上のレベル ・ 例:  タグの使い方のポイント ・ タグは、開始タグと終了タグの組で出来ている ・ h1タグの開始タグ: <h1> ・ h1タグの終了タグ: </h1> ・ タグ名の前に”/”を付けると終了タグになる 42 <h2>私の図鑑</h2>
43. Copyright © Asial Corporation. All Rights Reserved.  振り返り ・ 図鑑アプリを試した ・ 図鑑アプリが、HTMLファイル、CSSファイル、画像ファ イルで出来ていることを確認した ・ 図鑑アプリのHTMLを開き、タグを書いた 43
44. Copyright © Asial Corporation. All Rights Reserved. 44 CSSで表示のしかたを変えてみよう
45. Copyright © Asial Corporation. All Rights Reserved.  css/style.css 45 • buttonは、HTMLの<button>タグを 指している • background-color: green;に よって、ボタンの緑色が指定 されている • #jishoは、apple.htmlの中にある id=“jisho” を指している • border:dotted により、点線 の枠線が描かれている
46. Copyright © Asial Corporation. All Rights Reserved.  CSSとは ・ HTMLの要素を指定する ・ 指定した要素の表示方法（色・サイズなど）をブラウザ に指示する ・ HTMLファイルの中の、<head>タグの中に、次のような記 述がある HTMLファイルの中に、「どのCSSを利用するか」が書いてある 46 <link rel="stylesheet" href="css/style.css">
47. Copyright © Asial Corporation. All Rights Reserved.  HTMLの要素の指定方法 47 • buttonは、HTMLの<button>タグを 指している • background-color: green;に よって、ボタンの緑色が指定 されている • #jishoは、apple.htmlの中にある id=“jisho”を指している • border:dotted により、点線 の枠線が描かれている • タグを指定する button { … } • HTML要素のIDを指定する #jisho { … }
48. Copyright © Asial Corporation. All Rights Reserved.  CSSを変更して、表示方法を変えてみよう(1) ・ ボタンの色をgreenからblueに変えてみよう ・ CSSを変更したら、保存する 48 background-color: blue; background-color: green;
49. Copyright © Asial Corporation. All Rights Reserved.  CSSを変更して、表示方法を変えてみよう(2) ・ 説明文の枠線を破線から実線に変えてみよう ・ CSSを変更したら、保存する 49 border: solid 1px gray; border: dotted 1px gray;
50. Copyright © Asial Corporation. All Rights Reserved.  CSS ・ 要素を選ぶ（「セレクタ」） ・ セレクタの後ろに、{ } で囲って、色やサイズ、表示上 の効果を設定する。これをプロパティと呼ぶ ・ プロパティ名 : プロパティ値 ・ 複数の属性を並べるときは、;（セミコロン）で区切る ・ ※タグによって、設定できる属性が違う 50 background-color: green;
51. Copyright © Asial Corporation. All Rights Reserved.  試してみよう 1. ボタンの色を他の色に変えてみる 2. ボタンの上の文字の色を変えてみる ・ ヒント: color:white; 3. 枠線の太さを変えてみる ・ ヒント: border: solid 5px gray; 4. （応用）リンゴのボタンの色を赤、オレンジのボタンの 色をオレンジ色にする ・ ヒント: ・ HTML: <button id="apple"> ・ CSS: #apple { background-color: red; } 51
52. Copyright © Asial Corporation. All Rights Reserved. 52 HTMLファイルを作ろう
53. Copyright © Asial Corporation. All Rights Reserved.  index.htmlに新しいボタン「オレンジ」を追加す る ・ index.htmlを開く ・ リンゴのボタンを表示させている部分を選択し「編集」 ->「コピー」 と操作する ・ <a href="apple.html"><button>リンゴ</button></a> ・ すぐ下の行に貼り付けて、以下のように変更する ・ <a href="orange.html"><button>オレンジ</button></a> ※赤字は変更する部分を示している 53
54. Copyright © Asial Corporation. All Rights Reserved.  タグの例: ボタン ・ <button>…画面にボタン要素を追加する ・ 例:  タグの使い方のポイント ・ タグの中にタグを入れてもよい ・ 順序に注意 ・ ◦:<a><button></button></a>←<a>の中に<button></button> がある ・ ×:<a><button></a></button> ←<a>と<button>が互い違い 54 <a href="orange.html"><button>オレンジ</button></a>
55. Copyright © Asial Corporation. All Rights Reserved.  タグの例: リンク ・ <a>タグ…アンカー要素 ・ 他のページなどへのリンクを作る  タグの使い方のポイント ・ 属性: タグの<>の中に書いて、タグの性質や動作を設定 する ・ 属性の値は、二重引用符（””）または一重引用符（’’）で 囲む ・ <a>タグのhref属性は、リンク先のページや場所を示す 55 <a href="apple.html"><button>リンゴ</button></a>
56. Copyright © Asial Corporation. All Rights Reserved.  新しいHTMLファイル orange.htmlを作ろう 1. 画面左で、apple.htmlを選んでクリックし、右クリックする 56 2. 「ファイルをコピー」を選んでクリックする 3. 表示される「ファイルをコピー」ウインドウ で、「ファイル名」をorange.htmlに変え、OKボ タンを押す
57. Copyright © Asial Corporation. All Rights Reserved.  apple.htmlをコピーして、orange.htmlを作った <h1>リンゴ</h1> <img src="apple.png"> <p id="jisho"> リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バ ラ科リンゴ属の落葉高木、または その果実のこと。 出典: フリー百科事典『ウィキペ ディア（Wikipedia）』 </p> 57
58. Copyright © Asial Corporation. All Rights Reserved.  オレンジのページに書き換えよう① ・ ページのタイトル部分を変える  オレンジのページに書き換えよう② ・ 画像のファイル名を変える 58 <h1>リンゴ</h1> <h1>オレンジ</h1> <img src="images/apple.png"> <img src="images/orange.png">
59. Copyright © Asial Corporation. All Rights Reserved.  タグの例: 画像 ・ <img>タグ…画像埋め込み要素 ・ 画像ファイルの内容をページの中に表示する  タグの使い方のポイント ・ <img>タグのsrc属性は画像ファイルの名前・場所を示す 59 <img src="images/orange.jpg">
60. Copyright © Asial Corporation. All Rights Reserved.  オレンジのページに書き換えよう③ ・ 説明の文章を変える（例） 60 <p id="jisho"> オレンジ（甜橙、英名: orange、学名: Citrus sinensis）は、ミカン 科ミカン属の常緑小高木、またはその果実（オレンジ (果実)（英語 版））のこと </p> <p id="jisho"> リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リ ンゴ属の落葉高木、またはその果実のこと。 </p>
61. Copyright © Asial Corporation. All Rights Reserved.  動作を確認しよう 61 リンゴの動作 はそのまま • メインの画面にオレンジのボタン を追加した • オレンジのページ（HTMLファイ ル）を追加した • ボタンをクリックするとページに 移動する
62. Copyright © Asial Corporation. All Rights Reserved.  振り返り ・ index.htmlにボタンとリンクを追加した ・ 新しいhtmlファイル(orange.html)を作成した ・ HTMLのタグ、属性を学んだ ・ <button>ボタン名</button> ・ <a href=""> ・ <img src=""> ・ リンク付きのボタンから、別のHTMLファイルを表示した 62
63. Copyright © Asial Corporation. All Rights Reserved. 63 まとめ
64. Copyright © Asial Corporation. All Rights Reserved.  まとめ ・ サンプルアプリ『くだもの図鑑』 ・ HTMLファイル、CSSファイルで出来ている ・ HTMLを編集・作成した ・ タグとその属性 ・ CSSで表示のしかたを変えた ・ セレクタとその属性 64