Upload
ohotech
View
695
Download
1
Embed Size (px)
DESCRIPTION
2012/07/15(日) に 北見市で行われた LDD'12/Summer in KITAMI のオープニング時に使用したスライドです。
Citation preview
LDD’12/Summer in KITAMIオープニングセッション
ソフトウェアってどうやってできてるの?プログラムってなーに?
北見 と IT
北見 と IT
IT勉強会に参加したい!でもIT勉強会がない.IT勉強会が遠い.
作ったみたけど...いまいち
北見 と IT
IT勉強会に参加したい!でもIT勉強会がない.IT勉強会が遠い.
作ったみたけど...いまいち
そもそもIT技術が楽しいって みんな知らない人んじゃない?
LDD’12/Summer in KITAMI
Shall We GEEK?オホテク が
なかまになってほしそうにこっちをみている
LDD’12/Summer in KITAMI
Shall We GEEK?オホテク が
こっちをみているなかまになってほしそうに
アイ アムデ ベ ロッ パ ー
アイ アム
ビギナー
みたいなものを自らで作れることを知って欲しい!
そもそもこいつらって何でできてるの?
ある規則に沿って文字をひたすら並べてできているんだ!
ある規則に沿って文字をひたすら並べてできているんだ!そう!試しにウェブサイトの中身を覗いてみよう!
そもそもこいつらって何でできている?決められた文字?並べて?
<!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
画像ファイル
<!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>
<!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>
「タグ」という規則
簡単なゲーム“じゃんけん” を考えてみる
プログラムは基本的に
で制御されている
値の保持 条件分岐 繰り返し
ゲーム開始
プレイヤの手を入力
CPUの手を決定
勝敗判定
ゲーム終了
“勝ち”って表示 “負け”って表示
ゲーム開始
プレイヤの手を入力
CPUの手を決定
勝敗判定
ゲーム終了
“勝ち”って表示 “負け”って表示
時刻が 0, 3, 6, 9秒のとき:グー時刻が 1, 4, 7秒のとき:チョキ時刻が 2, 5, 8秒のとき:パー
とか
ゲーム開始
プレイヤの手を入力
CPUの手を決定
勝敗判定
ゲーム終了
“勝ち”って表示 “負け”って表示
じゃんけん
ゲーム開始
じゃんけん
ゲーム終了
ゲーム開始
じゃんけん
ゲーム終了
win = 0: プレイヤの勝ち数を保持
lose = 0: プレイヤの負け数を保持
win > 2 または lose > 2
ゲーム開始
じゃんけん
ゲーム終了
win = 0: プレイヤの勝ち数を保持
lose = 0: プレイヤの負け数を保持
win > 2 または lose > 2
値の保持
条件分岐
繰り返し
じゃんけんは凄くシンプルなものだけど,どのプログラムも大元はこの3つの規則を駆使する
値の保持 条件分岐 繰り返し
でも ”じゃんけん” が作れてもまだ夢は広がらない!
なので
@tututenさんにもっと身近で夢の広がるモノ を作ってもらおう!