はじめてからのプログラミング教室

©2019 INIAD Developers
はじめてからの
プログラミング教室

はじめに
第3回 INIAD-FES 及び INIAD Developers サークル企画
「はじめてからのプログラミング教室」にご参加頂きまして
誠にありがとうございます。
当資料に記載されている内容に関して当サークルは⼀切の責任を負わないもの
とします。
また、無断転載は堅く禁じます。

⽬次
INIAD Developersについて
初級 (HTML編)
中級 (CSS編)
上級 (Webアプリ編)
参照
プログラミング教室で使⽤したソフトについて

INIAD Developersについて
2017年4⽉に発⾜した
INIAD(Information Networking for Innovation And Design)
東洋⼤学情報連携学部の公式サークル。
⼤学の課題と並⾏して趣味の開発や他団体の開発の請負をしています。
3学年合わせて部員は70⼈程度おり、サークル内で勉強会も開催しています。
個⼈で業務⾏っている者もいます。お仕事の依頼はこちらから。
INIAD Developersの公式サイトはこちら。

初級 (HTML編)

全体の⽬標
⾃分だけの⽇記を作ってみよう！
[1]

今回の⽬標
HTMLの基本構造を理解する。
[2]

チェックポイント
ハイパーテキストの仕組みを⼤まかに理解する
HTMLの作りを理解する
HTMLを書ける

⽤語解説
プログラム
プログラミング
プログラミング⾔語

プログラム
物事を⾏う⼿順書。
例えば、料理の本を思い浮かべてみてください。
野菜を切って、茹でたり煮たり焼いたり。

プログラミング
コンピュータプログラムを作成することにより、
⼈間の意図した処理を⾏うようにコンピュータに指⽰を与える⾏為。
つまり、プログラムを書く動作。
先程の例で書くと料理のレシピを書く⾏為。

プログラミング⾔語
プログラムを記述するためのことば。

HTMLとは
HTMLとはHyperText Markup Languageの略称です。
これはWebサイトで使われています。
それぞれの意味は以下の通りです。
HyperText:ハイパーリンクを埋め込むことができる⾼機能なテキスト
Markup: ⽂書の各部分が、どのような役割を持っているのかを⽰すということ
Language: ⾔語
通常はHTMLはプログラミング⾔語としては扱いませんが、今回は⼤きな括り
でプログラミング⾔語の⼀種として扱います。

タグ⼀覧(1/5)
実際にウェブページを⾒てみましょう！
[2]

タグ⼀覧(2/5)
HTMLには複数の ”タグ” があります。
タグとは⽂章に意味を付ける札のこと。
ただし、全てを紹介するには種類がとても多いので、基本構造のみ扱います。
タグの種類が多いのは状況によって適切に使い分ける必要があるからです。
それでは、少しずつ紹介していきます。

HTMLのつくり(1/2)
<html></html> = ⼈間
<head></head> = 頭
<body></body> = 体
<html>
<head></head>
<body></body>
</html>
[3]

HTMLのつくり(2/2)
<html></html> = ⼈間
<head></head> = 頭
<body></body> = 体
<head></head>
そのページがどんなことを
表しているか、
その概要が記述されている。
<body></body>
実際にページに表⽰する
中⾝を記述。
今回はbodyのみ扱います。
[3]

タグ⼀覧(3/5)
⽂やまとまりを⽰すときに主に使うもの
h: heading <1-6>: ⾒出し
数字が⼩さいほど⼤きくなる。
p: paragraph: 段落
<h1>a</h1>
<h2>b</h2>
<h3>c</h3>
...
<h6>d</h6>
<p>e</p>
<div></div>
div: division: 分割
タグ⾃体に意味はないが、
ブロック要素(まとまり)として扱うことができる。

タグ⼀覧(4/5)
ページとページを繋ぐときに使うもの
<a></a>
anchor ‒ アンカー
HTMLの⼀番優れているポイントでページとページを繋ぐもの。
リンクの出発点ではhref属性でリンク先を指定します。
属性とはタグに情報を付け⾜すものです。
<p><a href=”URL名”>ここ</a>からリンクに⾶びます</p>

コメント
プログラムに影響を与えない、⼈間が読むためのメモのこと。

<form action="" method="post">
<p></p>
<textarea cols="30" rows="10"></textarea>
<p></p>
</form>

やってみよう1
p, h, div, aタグを利⽤した練習
sample.htmlの⽳埋めをしてみよう。

やってみよう1 ‒ 解答例

記事の投稿テスト


sample

<div>
<a>Googleへ</a>
</div>
<h1>
記事の投稿テスト
</h1>
<p>
sample
</p>
<div>
<a href=”https://google.com">Googleへ</a>
</div>

タグ⼀覧(5/5)
⼊⼒と送信フォームを作成する際に使⽤する要素
アンケートやお知らせを送信するときに使います。
詳細は省きますが、ウェブアプリ等を扱うときに沢⼭お世話になります。

<input type=”text”>

<textarea cols=“30” rows=“10”></textarea>

<button type=“submit”>送信</button>

</form>

やってみよう2
Formを埋めてみよう
sample.htmlの⽳埋めをしてみよう

<form ac1on="" method="post">
<p></p>
<textarea cols="30" rows="10"></textarea>
<p></p>
</form>
Formを埋めてみよう
sample.htmlの⽳埋めをしてみよう
<p><input type=”text”></p>
<textarea cols=“30” rows=“10”></textarea>
<button type=“submit”>送信</button>
</form>

まとめ
ウェブの仕組みを⼤まかに理解する
HTMLのつくりを理解する
HTMLを書ける

中級 (CSS編)

今回の⽬標
CSSで何ができるかを理解する。
CSSあり CSSなし
[4]

CSSがわかる
CSSのつくりを理解する
CSSをかける

CSSとは
CSS (Cascading Style Sheets) は背景⾊を変えたり⽂字⾊を変えたりできる。
CSSあり CSSなし
[4]

コメント
プログラムに影響を与えない、⼈間が読むためのメモのこと。
/* これはコメントです。 */
a{
color: #0000FF; /* ⽂字⾊の指定 */
background-color: #FFFFFF; /* 背景⾊の指定 */
}

セレクタ {
プロパティ: プロパティ値
}
セレクタとはHTMLの要素名。例えば、aタグ, pタグ, divタグなど。
プロパティ値には、基本的には値と単位を指定します。(例外あり)
値とは100, 200, 300 などの具体的な数値です。
現実の単位がm, kg, s があるように
Webにも単位があり、代表的なものにpx, %, em などがあります。
CSS

CSSのつくり(1/7)
⽂字⾊・背景⾊の変更
color: カラーコード;
background-color: カラーコード;
(2**8) ** 3⾊の⾊を指定できる。(約1677万⾊)
Before
a a
After
background-color: #0000FF
color: #FFC0CB
background-color: #FF0000
color: #000000

カラーコードとは
コンピュータのディスプレイは、光の三原⾊の
⾚(red), 緑(green), ⻘(blue)を組み合わせて⾊を表現します。
CSSではこれを各⾊256段階を16進数(0~F)で表し、
⾚、緑、⻘の順に記述します。
カラーコードの先頭には#をつけて書き始めます
例:
#FF0000 (red)
#00FF00 (green)
#0000FF (blue)

フォント
font-style: フォント名, font-family: フォントの分類;
実際には
a {
font-family: "Hiragino Kaku Gothic ProN"
}
のように書きます。

やってみよう1
⾊を変えてみよう
a{
color: #0000FF; /* ⽂字⾊の指定 */
background-color: #FFFFFF; /* 背景⾊の指定 */
}

やってみよう1 -解答例
⾊を変えてみよう
a{
color: #FF0000; /* ⽂字⾊の指定 */
background-color: #00FF00; /* 背景⾊の指定 */
}

⼤きさ・余⽩の調整
⾼さ
height: ⾼さ;
幅
width: 幅;
ないよう
ないよう
height: 30px;
width: 90px;
height: 45px;
width: 135px;

Web上で使⽤される様々な単位について。
px
em
他にも%やrem等の単位もあります。詳しくは各⾃で調べてみてください!

やってみよう2
箱の⾼さを変えてみよう
th,td{
border: 1px solid; /* 表のスタイルの指定 */
width: 150px; /* 横幅の指定 */
height: 12px; /* ⾼さの指定 */
}

箱の⾼さを変えてみよう
th,td{
border: 1px solid; /* 表のスタイルの指定 */
width: 20em; /* 横幅の指定 */
height: 1em; /* ⾼さの指定 */
}

ブロック要素の内側
margin: マージン; margin ‒top ‒bottom ‒left ‒right;
ブロック要素の外側
padding: パディング; padding ‒top ‒bottom ‒left ‒right;
ないよう
ないよう
margin-top: 5px;
margin-left: 5px;
margin-top: 5px, margin-left: 5px;
margin-top: 10px;
margin-left: 10px;
margin-top: 10pt, margin-left: 10px;

padding-top: 5px, padding-left: 5px; padding-top: 10pt, padding-left: 10px;
ないよう
ないよう
ないよう
ないよう
padding-top: 0px, padding-left: 0px;
padding-top: 10px, padding-left: 10px;

要素ごとに名前をつける。
タグごとに指定していたが、全部同じスタイルを適⽤すると良くないことがあ
る。
要素それぞれに ”id” や ”class” を指定することで使⽤可能。
<div id=“xxx”></div> や <div class=“xxx”></div> のように指定する。
idとclassの違い
idは⼀箇所のみ
classは同じ名前で付けられている箇所に全てcssを適⽤させる。
<div id=“xxx”></div>
<div class=“yyy”></div>
<div class=“yyy”></div>

まとめ
CSSがわかる
CSSのつくりを理解する
CSSをかける

上級 (Webアプリ編)

ホームページ閲覧の仕組みを理解する。
ウェブサービスがどのように動いているのか分かる。

Webページについて
質問：
普段Webブラウザで閲覧しているgoogleのページやyoutubeなどの動画ってど
こに置いてあるでしょうか？

Webページについて
質問：
普段Webブラウザで閲覧しているgoogleのページやyoutubeなどの動画ってど
こに置いてあるでしょうか？
正解：
世界のどこかにあるサーバーコンピューター上に置いてある。

ホームページの仕組み
サーバー
クライアント
(Webブラウザ)
このページをください！
どうぞ！
<doctype html>
<html>
<head> ~~~~~
</head>
<body> ~~~~~~~~~
</body>
</html>
このページはあるかな？
とか⾊々処理
問題なさそう！
よし、もらった
htmlを画⾯に
表⽰するぞ！

例えばお⾦で例えると
サーバー
(ATM)
⼈
要求内容
例: お⾦を下ろしたい
よし、ありそうだから
お⾦出すよー
⼝座残⾼あるかな？
お⾦が下ろせました。
[5]

サーバーと普通のパソコンって何が違うの？
コンピュータの仕組みは普段利⽤しているパソコンやスマホと⼀緒です。

動いているソフトが違う
サーバーで動いているソフトは、リクエストに応じて⾊々処理をしたり、
その結果を返したりするソフト

動いているソフトが違う
サーバーで動いているソフトは、リクエストに応じて⾊々処理をしたり、
その結果を返したりするソフト
ハードウェアの信頼性や処理能⼒が違う
基本的に24時間ずっとつけっぱなしのため、市販のコンピューターよりも
安定性やスペックの⾼いコンピュータが使われていたり、
たくさんのコンピュータで処理をするようにしたりしています。

⽇記のサーバーを動かしてみよう！
今回は、プログラミング⾔語PythonとWebフレームワークDjangoを使って⽇
記のサーバーを動かしてみよう！

Python とは
プログラミング⾔語の⼀種
コードが読みやすく、汎⽤性が⾼い
汎⽤性が⾼いとは、いろいろな分野・⽤途で利⽤されているということ
例えば、⼈⼯知能などの最先端の分野、Webアプリ、普段の業務の⾃動化、
ゲームなど。

Djangoとその活⽤事例
Pythonで実装されたWebアプリケーションフレームワーク
Instagram Youtube Spotify
意外と⾝近にありましたね！
他にもあるので、興味があったら⾃分で調べてみてください。

Webフレームワーク
Webアプリは処理の⼿順がある程度決まってます。
これらをもし、1からプログラムを作ろうとすると、
リクエストを受け付ける処理、
どんなリクエストなのかを理解する処理、
どんな処理をして、どんなレスポンスを返さなきゃいけないのか
など他にもたくさんのことを全て、事細かく、実装する必要があります。

全部実装しないといけない！
サーバー
クライアント
(Webブラウザ)
このページをください！
どうぞ！
<doctype html>
<html>
<head> ~~~~~
</head>
<body> ~~~~~~~~~
</body>
</html>
このページはあるかな？
とか⾊々処理
Htmlを画⾯に
表⽰するぞ！

Webフレームワーク
これはとても⼤変！
どんなWebアプリでも必ず or よく使う処理を他のWebアプリでも使いまわせ
ないか？
という問題を改善するのがWebアプリケーションフレームワークです！
つまり、DjangoとはPythonで作られている、Webアプリでよく使う共通の処
理を簡単にやってくれるものです。

Django とは
Pythonで作られている、Webアプリでよく使う共通の処理を簡単にやってくれ
るもの！

サーバーのプログラムを動かしてみよう
エディタの下の黒い画⾯で python manage.py runserver
ブラウザで http://127.0.0.1:8000 にアクセスしてみよう
既に起動して、右のブラウザでアクセスしてあります！

結果

Djangoの処理の流れ (1/2)
サーバー
クライアント
(Webブラウザ)
/ の情報をください！
/ はあるかな？(urls.py)
あった！
DiaryListViewって処理を
すればいいみたい！
DiaryListView (views.py)は、
⽇記の⼀覧を取ってきて、
Template(html)ファイルに
データを埋め込めばよさそう！
出来た！
hYp://127.0.0.1:8000/

Djangoの処理の流れ (2/2)
サーバー
クライアント
(Webブラウザ)
どうぞ！
<doctype html>
<html>
<head> ~~~~~
</head>
<body> ~~~~~~~~~
</body>
</html>
Htmlを画⾯に
表⽰するぞ！

やってみよう
記事の⼀覧を表⽰すると、”ないよう”の列が全て、“ないようだよ”と表⽰され
ます。これを、それぞれの記事の内容を表⽰できるようにしよう！
表⽰内容を変えてみよう！

編集するファイル
今回編集するファイルは、
• diary/templates/diary/diary_list.html (⼀覧ページ)
です。
⾒た⽬を変えたい⼈、CSSをいじりたい⼈は
• diary/static/css/diary.css
を編集すると反映されます。

テンプレートとは
テンプレートは雛形です。
この機能を利⽤することで、webページの重複部分を繰り返して書く必要がな
くなり、
とても効率的にHTMLの記述を⾏うことができます。

テンプレートとは
今まで書いてもらったhtmlファイルは中⾝が勝⼿に変わったりしません。
ですが、実際には、⽇記の⼀覧なら⽇記の⼀覧を実際に表⽰したいし、
詳細画⾯ならそれぞれの⽇記の詳細画⾯を表⽰して欲しいものです。
例えば、Djangoなら、⽇記のタイトルや詳細を埋め込んだり、
⼀覧ページでもそれぞれの記事の⾏を記事の数だけコピペすることなく、
１⾏だけどんなふうに表⽰するかを⽤意すれば、
Djangoのテンプレート機能でいい感じに書くことができます。

変数
変数とは箱です。値を⼊れておく箱です。
今回のテンプレートだと、
今回の例だとobject に1⽇分の⽇記のデータが⼊っています。
object.title で⽇記のタイトルが取れます。
object.text で⽇記の内容が取れます。
object_list には⽇記がたくさん⼊っています。

{
"#tle": "⽇記のタイトル",
"text": "⽇記の本⽂"
}
object
⽇記

オブジェクトリスト
{
}
object
⽇記の集まり
{
}
object
{
}
object
{
}
object
{
"title": "⽇記のタイトル",
}
object
{
}
object
{
}
objectobject_list

for (繰り返し)
もし、 object_list に３つデータがあれば、
( object_list = [a, b, c] )
a
b
C

やってみよう
DjangoのテンプレートのListの⼀覧において、
⽇記のタイトルと本⽂を掲載済み
object.title は既に埋め込まれている。
余裕があれば、ページの⾒た⽬を変える。

まとめ
ホームページ閲覧の仕組みを理解する。
ウェブサービスがどのように動いているのか分かる。

参照
[1] https://www.irasutoya.com/
[2] https://google.com
[3] https://pictogram-free.com/01-lifestyle/001-simple-art.html
[4] https://www.yahoo.co.jp

プログラミング教室で使⽤したソフトについて
Visual Studio Code
Microsoft社が開発しているテキストエディタ。
詳しくはこちら: https://code.visualstudio.com/
Google Chrome
Google社が開発しているウェブブラウザ。
詳しくはこちら: https://www.google.com/intl/ja_jp/chrome/

はじめてからのプログラミング教室

Recommandé

Recommandé

Contenu connexe

Similaire à はじめてからのプログラミング教室

Similaire à はじめてからのプログラミング教室 (20)

Dernier

Dernier (8)

はじめてからのプログラミング教室