28
LDD’12/Summer in KITAMI オープニングセッション ソフトウェアってどうやってできてるの? プログラムってなーに?

LDD'12/Summer in KITAMI Opening Slide

  • Upload
    ohotech

  • View
    695

  • Download
    1

Embed Size (px)

DESCRIPTION

2012/07/15(日) に 北見市で行われた LDD'12/Summer in KITAMI のオープニング時に使用したスライドです。

Citation preview

Page 1: LDD'12/Summer in KITAMI Opening Slide

LDD’12/Summer in KITAMIオープニングセッション

ソフトウェアってどうやってできてるの?プログラムってなーに?

Page 2: LDD'12/Summer in KITAMI Opening Slide

北見 と IT

Page 3: LDD'12/Summer in KITAMI Opening Slide

北見 と IT

IT勉強会に参加したい!でもIT勉強会がない.IT勉強会が遠い.

作ったみたけど...いまいち

Page 4: LDD'12/Summer in KITAMI Opening Slide

北見 と IT

IT勉強会に参加したい!でもIT勉強会がない.IT勉強会が遠い.

作ったみたけど...いまいち

そもそもIT技術が楽しいって みんな知らない人んじゃない?

Page 5: LDD'12/Summer in KITAMI Opening Slide

LDD’12/Summer in KITAMI

Shall We GEEK?オホテク が

なかまになってほしそうにこっちをみている

Page 6: LDD'12/Summer in KITAMI Opening Slide

LDD’12/Summer in KITAMI

Shall We GEEK?オホテク が

こっちをみているなかまになってほしそうに

Page 7: LDD'12/Summer in KITAMI Opening Slide

アイ アムデ ベ ロッ パ ー

Page 8: LDD'12/Summer in KITAMI Opening Slide

アイ アム

ビギナー

Page 9: LDD'12/Summer in KITAMI Opening Slide
Page 10: LDD'12/Summer in KITAMI Opening Slide
Page 11: LDD'12/Summer in KITAMI Opening Slide
Page 12: LDD'12/Summer in KITAMI Opening Slide
Page 13: LDD'12/Summer in KITAMI Opening Slide

みたいなものを自らで作れることを知って欲しい!

Page 14: LDD'12/Summer in KITAMI Opening Slide

そもそもこいつらって何でできてるの?

ある規則に沿って文字をひたすら並べてできているんだ!

Page 15: LDD'12/Summer in KITAMI Opening Slide

ある規則に沿って文字をひたすら並べてできているんだ!そう!試しにウェブサイトの中身を覗いてみよう!

そもそもこいつらって何でできている?決められた文字?並べて?

Page 16: LDD'12/Summer in KITAMI Opening Slide
Page 17: LDD'12/Summer in KITAMI Opening Slide

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LDD'12/Summer in KITAMI</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="css/arrange.css" rel="stylesheet"></head><body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container">

HTML

文書を記述する専用の形式

body { padding-top: 60px;}h2 { background: -webkit-gradient( linear, left top, left bottom, from( background: -moz-linear-gradient( top, rgba(3, 166, 166, 0.2), r background: -o-gradient( top, rgba(3, 166, 166, 0.2), rgba(3, 14 background: top, rgba(3, 166, 166, 0.2), rgba(3, 140, 140, 0.25 border-bottom: 1px solid #a9a9a9;

CSS

レイアウトを指定する専用の形式

Image

画像ファイル

Page 18: LDD'12/Summer in KITAMI Opening Slide

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LDD'12/Summer in KITAMI</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="css/arrange.css" rel="stylesheet"></head><body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./">LDD'12/Summer in KITAMI</a> <ul class="nav"> <li><a href="#header">トップ</a></li> <li><a href="#overview">概要</a></li> <li><a href="#contents">内容</a></li> <li><a href="#schedule">タイムテーブル</a></li> <li><a href="#social">懇親会</a></li> <li><a href="#apply">参加登録</a></li>

Page 19: LDD'12/Summer in KITAMI Opening Slide

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LDD'12/Summer in KITAMI</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="css/arrange.css" rel="stylesheet"></head><body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./">LDD'12/Summer in KITAMI</a> <ul class="nav"> <li><a href="#header">トップ</a></li> <li><a href="#overview">概要</a></li> <li><a href="#contents">内容</a></li> <li><a href="#schedule">タイムテーブル</a></li> <li><a href="#social">懇親会</a></li> <li><a href="#apply">参加登録</a></li>

「タグ」という規則

Page 20: LDD'12/Summer in KITAMI Opening Slide

簡単なゲーム“じゃんけん” を考えてみる

プログラムは基本的に

で制御されている

値の保持 条件分岐 繰り返し

Page 21: LDD'12/Summer in KITAMI Opening Slide

ゲーム開始

プレイヤの手を入力

CPUの手を決定

勝敗判定

ゲーム終了

“勝ち”って表示 “負け”って表示

Page 22: LDD'12/Summer in KITAMI Opening Slide

ゲーム開始

プレイヤの手を入力

CPUの手を決定

勝敗判定

ゲーム終了

“勝ち”って表示 “負け”って表示

時刻が 0, 3, 6, 9秒のとき:グー時刻が   1, 4, 7秒のとき:チョキ時刻が   2, 5, 8秒のとき:パー

とか

Page 23: LDD'12/Summer in KITAMI Opening Slide

ゲーム開始

プレイヤの手を入力

CPUの手を決定

勝敗判定

ゲーム終了

“勝ち”って表示 “負け”って表示

じゃんけん

Page 24: LDD'12/Summer in KITAMI Opening Slide

ゲーム開始

じゃんけん

ゲーム終了

Page 25: LDD'12/Summer in KITAMI Opening Slide

ゲーム開始

じゃんけん

ゲーム終了

win = 0: プレイヤの勝ち数を保持

lose = 0: プレイヤの負け数を保持

win > 2 または lose > 2

Page 26: LDD'12/Summer in KITAMI Opening Slide

ゲーム開始

じゃんけん

ゲーム終了

win = 0: プレイヤの勝ち数を保持

lose = 0: プレイヤの負け数を保持

win > 2 または lose > 2

値の保持

条件分岐

繰り返し

Page 27: LDD'12/Summer in KITAMI Opening Slide

じゃんけんは凄くシンプルなものだけど,どのプログラムも大元はこの3つの規則を駆使する

値の保持 条件分岐 繰り返し

Page 28: LDD'12/Summer in KITAMI Opening Slide

でも ”じゃんけん” が作れてもまだ夢は広がらない!

なので

@tututenさんにもっと身近で夢の広がるモノ を作ってもらおう!