非エンジニア向け
HTML勉強会
株式会社ベーシック
社内勉強会
そのいち
● @kkkyouhei
● 広告配信サーバとかゲームアプリの裏の人
● RailsとかCakePHPをメインに触ります
たまにiOSとかAndroid
自己紹介
本日のアジェンダ
1. インターネットの仕組みを知る
Googleが表示されるまで何が起こってる?
2. プログラミング言語について知る
PHPとかRubyとかJavaScriptって何が違うの?
3. ウェブサイトを公開するために必要なもの
とりあえずブログでも公開してみる?
1. Googleが表示されるまで何が起こってる?
Googleが表示されるまで何が起こってる?
Googleが表示されるまで何が起こってる?
これもHTML
Googleが表示されるまで何が起こってる?
Googleが表示されるまで何が起こってる?
ブラウザにgoogle.co.jpと入力して
表示されているHTMLは天からの授かりものではない
Googleが表示されるまで何が起こってる?
URLを入力すると何が起こっているのか
Googleが表示されるまで何が起こってる?
ブラウザ
google.co.jpってどこに
見に行けばいい?
ルートDNSサーバ
プロバイダの
DNSサーバ
google.co.jp
DNSサーバ
co
DNSサーバ
jp
DNSサーバ
ne
Googleが表示されるまで何が起こってる?
ブラウザ
ルートDNSサーバ
プロバイダの
DNSサーバ
DNSサーバ
co
DNSサーバ
jp
google.co.jp
google.co.jpは知らないけどこ
の人なら知ってるかもよ
ne
DNSサーバ
Googleが表示されるまで何が起こってる?
ブラウザ
ルートDNSサーバ
プロバイダの
DNSサーバ
DNSサーバ
co
DNSサーバ
jp
google.co.jp
jpなら知ってるよ
ne
DNSサーバ
Googleが表示されるまで何が起こってる?
ブラウザ
ルートDNSサーバ
プロバイダの
DNSサーバ
DNSサーバ
co
DNSサーバ
jp
google.co.jp
coなら知ってるよ
ne
DNSサーバ
Googleが表示されるまで何が起こってる?
ブラウザ
ルートDNSサーバ
プロバイダの
DNSサーバ
DNSサーバ
co
DNSサーバ
jp
google.co.jp
googleはここ見に
行けばいいよ
ne
DNSサーバ
Googleが表示されるまで何が起こってる?
ブラウザ
ルートDNSサーバ
プロバイダの
DNSサーバ
DNSサーバ
co
DNSサーバ
jp
google.co.jp
ne
DNSサーバ
HTMLファイルください!
Googleが表示されるまで何が起こってる?
ブラウザ
ルートDNSサーバ
プロバイダの
DNSサーバ
DNSサーバ
co
DNSサーバ
jp
google.co.jp
ne
DNSサーバ
Googleが表示されるまで何が起こってる?
2. PHPとかRubyとかJavaScriptって何が違うの?
PHPとかRubyとかJavaScriptって何が違うの?
動いている場所が違います!!!!1
PHPとかRubyとかJavaScriptって何が違うの?
PHPとかRubyはサーバ
JavaScriptとかjQueryはブラウザで動作
PHPとかRubyとかJavaScriptって何が違うの?
まずはPHP Rubyから
PHPとかRubyとかJavaScriptって何が違うの?
時をさかのぼること199X年
PHPとかRubyとかJavaScriptって何が違うの?
時をさかのぼること199X年
PHPとかRubyとかJavaScriptって何が違うの?
PHPとかRubyとかJavaScriptって何が違うの?
これらの遺産はどれも静的なサイトたち
PHPとかRubyとかJavaScriptって何が違うの?
PHPやRubyが生まれてどのようにサイトが変わったか
PHPとかRubyとかJavaScriptって何が違うの?
PHPとかRubyとかJavaScriptって何が違うの?
どれも動的なサイトばかり
PHPとかRubyとかJavaScriptって何が違うの?
静的と動的の違い
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
静的
example.co.jp
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
静的
example.co.jp
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
静的
example.co.jp
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
PHPとかRubyとかJavaScriptって何が違うの?
アクセスして来た誰もが同じHTMLを閲覧
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<?php
$name = DBから名前を取得
?>
<html>
<head>
</head>
<body>
<p>
Hello <?php echo $name ?>
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
DataBase
HTMLではなくPHPのタグなの
でPHPが処理する部分
kkyouhei
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<?php
$name = DBから名前を取得
?>
<html>
<head>
</head>
<body>
<p>
Hello <?php echo $name ?>
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
HTMLではなくPHPのタグなの
でPHPが処理する部分
DataBase
kkyouhei
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<?php
$name = DBから名前を取得
?>
<html>
<head>
</head>
<body>
<p>
Hello <?php echo $name ?>
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
DataBase
kkyouhei
アクセスしたユーザに応じて
DBから名前を取得
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<?php
$name = DBから名前を取得
?>
<html>
<head>
</head>
<body>
<p>
Hello <?php echo $name ?>
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
DataBase
kkyouhei
$nameに入っている
文字列を出力
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<html>
<head>
</head>
<body>
<p>
Hello kkyouhei
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
DataBase
kkyouhei
最終的にブラウザに
返されるHTML
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<html>
<head>
</head>
<body>
<p>
Hello kkyouhei
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
DataBase
kkyouhei
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ
動的
example.co.jp
<html>
<head>
</head>
<body>
<p>
Hello kkyouhei
</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello kkyouhei
DataBase
kkyouhei
PHPやRubyはサーバサイドで
動作する言語であり、
アクセスして来たユーザに応じて異
なるHTMLを返す事が出来る
PHPとかRubyとかJavaScriptって何が違うの?
JavaScript
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ example.co.jp
<html>
<head>
<script>
alert(“こんにちわ!”);
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
こんにちわ!
ここではまだ何もしない
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ example.co.jp
<html>
<head>
<script>
alert(“こんにちわ!”);
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
こんにちわ!
ここではまだ何もしない
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ example.co.jp
<html>
<head>
<script>
alert(“こんにちわ!”);
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
こんにちわ!
ここではまだ何もしない
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ example.co.jp
<html>
<head>
<script>
alert(“こんにちわ!”);
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
top.html
top.htmlください
top.htmlだよ
Hello World
こんにちわ!
ここではまだ何もしない
PHPとかRubyとかJavaScriptって何が違うの?
PHPとかRubyとかJavaScriptって何が違うの?
ブラウザ上で動作するのでリロードすること
なく値の整合性がチェックできる
そのためユーザビリティの向上が図れる
PHPとかRubyとかJavaScriptって何が違うの?
ただしブラウザ上で動作するということは
ウェブサイトを閲覧している人からも
JavaScriptのコードを変更できるので過信
は禁物
3. Webサイトを公開するために必要なもの
Webサイトを公開するために必要なもの
ブログを作りたい人へ
Webサイトを公開するために必要なもの
悪いことは言わないHomeUpやライブドアブログを
利用したほうがいいですよ・・・
サーバを用意したりドメイン取ったり
結構めんどくさい
Webサイトを公開するために必要なもの
ちょびっとカスタマイズするときはHTMLやCSSの
知識が必要なので勉強しましょう
Webサイトを公開するために必要なもの
Webサイトを公開するために必要なもの
それでも唯一無二のブログを作りたい人へ
1. レンタルサーバ
ペパボとかが良さげ
2. 独自ドメイン
レンタルサーバによって無料だったりする
3. WordPress
1から全て作るのは時間がいくらあっても足りない
人生は短いので便利なものは使おう
4. やる気と根気
やってると飽きるのでとにかく諦めない
Webサイトを公開するために必要なもの
Webサイトを公開するために必要なもの
世界で一つしかない自分のウェブサイトを作りたい人へ
Webサイトを公開するために必要なもの
正気ですか!!!???
1. レンタルサーバ
レンタルサーバによって使えないフレームワーク(3)が
あったりするので注意
2. 独自ドメイン
レンタルサーバによって無料だったりする
3. CakePHPやRails
静的なポートフォリオサイトだったら HTML CSS だけでもOK
ユーザ登録とか情報を貯めておく必要のあるサービスであれば
必須
4. 超やる気と超根気
やってると飽きるのでとにかく諦めない
Webサイトを公開するために必要なもの
やる気があれば誰でもできます
さあ始めましょう
ご静聴ありがとうございました

非エンジニア向けHTML勉強会その1