Web プログラミング⼊⾨(1)〜 ブラウザでプログラミングしてみよう 〜
1. |こんにちは

テキストエディタでこれを保存。

確認、いい感じ。
5. |伝言板<p>伝言はまだありません</p><input><button>セット</button>

⼊⼒するためのパーツを追加。

ブラウザで表⽰、「こんにちは」が現れる、超シンプルな HTML。
2. |こんにちは
ミニアプリを作りましょう。

テキストエディタで 2 ⾏⽬を追加して保存。

“<input>”は⼊⼒ボックス、”<button>”,”</button>”はボタン、⾒た⽬のパーツだけなのでもちろんまだ動かない。
6. |伝言板

ブラウザをリロード、うまく出るけど HTML では改⾏はされない。
3. |こんにちは<p>ミニアプリを作りましょう。</p>HTML で 改⾏ は 別段落 として表現するので、“<p>”,”</p>”で囲んで段落扱いに。

<p>伝言はまだありません</p><input><button onclick="伝言する();">セット</button><script>function 伝言する(){alert("ボタン押したね");}</script>

こんなのを追加、これは JS(JavaScript)というプログラミング⾔語。

段落なので別のかたまりとして出現、こういう”<○>”, ”</○>”のことを「HTML タグ」という。
4. |伝言板<p>伝言はまだありません</p>

ではこのように書き換えて、伝⾔板アプリにしていこう。
Powered by PCN「セット」ボタンをクリックすると JS プログラム ”function 伝⾔する()” が動いて「ボタン押したね」の表⽰、プログラミング成功。

Web プログラミング⼊⾨(2)〜 伝⾔板に仕上げよう 〜
1. |伝言板”if( ○○○ ){ △△△ }else{ □□□ }” は「もし ○○○ なら △△△ する、でないなら □□□ する」の意味。
3. |<!doctype html><html><head><p id="伝言エリア">伝言はまだありません</p><input id="入力内容"><button onclick="伝言する();">セット</button><script>function 伝言する(){伝言エリア.innerText = 入力内容.value;
alert("伝言をセットしました");}</script>

前回に続いてこのようなプログラムを追加。

“⼊⼒内容”は⼊⼒ボックスに付けられた名前(id)、”⼊⼒内容.value”がその⼊⼒ボックスの中⾝、”伝⾔エリア”が伝⾔を表⽰する段落に付けられた名前、”伝⾔エリア.innerText”がその段落の中⾝、”=”は右辺を左辺にコピー。
2. |〜〜〜〜〜〜〜〜〜〜〜〜途〜中〜部〜分〜〜〜〜〜〜〜〜〜〜〜〜
function 伝言する(){
if(入力内容.value === ""){
alert("内容を入れてください");}else{
伝言エリア.innerText = 入力内容.value;
alert("伝言をセットしました");}}〜〜〜〜〜〜〜〜〜〜〜〜途〜中〜部〜分〜〜〜〜〜〜〜〜〜〜〜〜

空⼊⼒できないようにしよう。

{ 表示を 補足する ものたち }</head><body>{ 表示を 構成する ものたち }</body></html>

今回の伝⾔アプリを正式なものに仕上げよう。実は HTML はこのような構造にすることが世界標準で定められている。
4. |<!doctype html><html><head><meta charset="utf-8"/><script>function 伝言する(){
if(入力内容.value === ""){
alert("入力内容を入れてください");}else{
伝言エリア.innerText = 入力内容.value;
alert("伝言をセットしました");}}</script></head><body>
伝言板<p id="伝言エリア">伝言はまだありません</p><input id="入力内容"><button onclick="伝言する();">セット</button></body></html>なので ”<script>” をコピペで上に移動、”<html>”,”<head>”,”<body”>などを加えて世界標準に。伝⾔板アプリの完成！
5. |入力内容.value = "";これをどこかに⾜すと、⼊⼒ボックスの中⾝を消すことができる。

Powered by PCNWeb プログラミング⼊⾨(3)〜 QR コードを出してみよう 〜
1. |https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=Hello

この URL にブラウザでアクセスすると “Hello” という⽂の QR コードが出現、Google さん素敵な Web サービスをありがとう。

確認、ok。画像 ”<img>” がロードされるまでは代わりに “alt=ʼ○ʼ”が表⽰される。
3. |〜〜〜〜〜〜〜〜〜〜〜〜途〜中〜部〜分〜〜〜〜〜〜〜〜〜〜〜〜<script>function 伝言する(){
if(入力内容.value === ""){alert("内容を入れてください");}else{
伝言エリア.innerText = 入力内容.value;
画像.src = `https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=${入力内容.value }`;alert("伝言をセットしました");}}〜〜〜〜〜〜〜〜〜〜〜〜途〜中〜部〜分〜〜〜〜〜〜〜〜〜〜〜〜伝⾔がセットされる箇所で QR コードも⽣成するように追加。” ` ”
は バッククォート 、” ʼ ” ではないので注意。

Web サービスを利⽤する双⽅向通信
2. |〜〜〜〜〜〜〜〜〜〜〜〜途〜中〜部〜分〜〜〜〜〜〜〜〜〜〜〜〜
伝言板<p id="伝言エリア">伝言はまだありません</p><p><img id="画像" alt="ここに QR コードが生成される"></p><input id="入力内容"><button onclick="伝言する();">セット</button>〜〜〜〜〜〜〜〜〜〜〜〜途〜中〜部〜分〜〜〜〜〜〜〜〜〜〜〜〜

確認、伝⾔セットで QR コードも出現、ok。
4. |https://www.jma.go.jp/bosai/forecast/data/forecast/180000.json

例えば気象庁の お天気 Web サービス はこの URL。

ではこの Web サービスを利⽤するために、まず QR コードが表⽰される場所を⽤意、タグ ”<img>” は画像の意味。

ブラウザでアクセスすると福井県のお天気情報が出現。今回の QR
コードとは使い⽅が少し違うけど、うまくプログラムすれば今⽇や明⽇のお天気だって取得できちゃう、ありがとう気象庁さん。

Powered by PCNWeb プログラミング⼊⾨(番外編)

1. |HTML とは

このプリントでの「Web プログラミング」とは「Web ブラウザで動作するプログラム作り」を意味していて、よく出てくるのが「HTML タグ」。「HTML」は⽂書構造の表現（作⽂や論⽂の記述）を⽬的に作られた仕組みでしたが、使い勝⼿が良かったことから⽂書閲覧者からの⼊⼒を受け付けたり、アプリの画⾯表現に使われたりと、今では様々なところで利⽤されている。
2. |コンピュータプログラミング 1.はじめに 昨今、生活の様々なシーンにおいてコンピュータが活用されている。テレビや洗濯機、エアコンなどは今やコンピュータと言っても過言では無い。 これからますますコンピュータは生活の様々なシーンに登場することだろう。 2.プロ
グラミングとは コンピュータを活用するにはプログラミングするとよい。…

6. |CSS とは⽣の⽂書に HTML で構造を与えたら、次は⽂字を⼤きくしたり⾊をつけたり、⾒ための装飾をしたくなる。HTML では装飾に「スタイルシート」という仕組み「style」を⽤いる。
7. |<p style="font-size:300%;">この段落の文字を大きくする</p>

この例では段落<p>~</p>のフォントサイズを 300%にしている。
8. |<p style="color:blue;">文字を青くする</p>

この例では段落の⽂字を⻘くしている。"red","yellow","green"など、どのような⾊も表現できる。
9. |いろんな HTML を見てみよう

どの Web ページでも、作られた HTML を⾒ることができる。

⼈間の書く「⽣の⽂書」
3. |<h1>コンピュータプログラミング</h1><h2>1.はじめに</h2><p>昨今、生活の様々なシーンにおいてコンピュータが活用されている。テレビや洗濯機、エアコンなどは今やコンピュータと言っても過言では無い。</p><p>これからますますコンピュータは生活の様々なシーンに登場することだろう。</p><h2>2.プログラミングとは</h2><p>コンピュータを活用するにはプログラミングするとよい。…

⽣の⽂書に構造を追記した「HTML ⽂書」

例えばブラウザが Chrome の場合、設定「…」の「その他のツール」「デベロッパーツール」で、HTML には様々な「タグ」が⽤意されていて、例えば
4. |<a href="https://www.mext.go.jp">文部科学省</a>は日本の行政機関のひとつです。のように<a>~</a>タグで囲むと「⽂部科学省」が強調的に表⽰され、それを選択すると href で指定された URL へジャンプすることができる。⾃分が作ったページから友達が作ったページへジャンプさせてみるのも良いだろう。
5. |https://developer.mozilla.org/ja/docs/Web/HTML/Element

ここに多くの HTML タグの説明が載っているのでオススメ。
Powered by PCN

このようなウィンドウが開き、「Elements」で現在閲覧中の Webページの HTML ソースを⾒ることができる。普段 Web サイトを閲覧していて「いい作りだな」と思ったページは HTML ソースを覗いてみるといいだろう。