HTML文書構造作成

HTML文書構造作成

#07 文書の構造を作っていこう
http://dotinstall.com/lessons/website_html/9007
を参考に
文書構造を作成していく

この文書構造の作成とカラム作成を合わせて
テンプレなどが作成できる

今回、作成するのは２カラムのサイトになる

まず、HTML部分を作成する

作成するのは body 部分への追加

<div id="container">

<div id="header">header</header>

<div id="menu">menu</div>

<div id="main">

<div id="contents">
contents
</div><!-- contents -->

<div id="sidebar">
sidebar
</div><!-- sidebar -->

</div><!-- main -->

<div id="footer">footer</div>

</div><!-- #container -->

とする

<div id="contents">contents</div>

は左側部分

<div id="sidebar">sidebar</div>

でサイドバーで右側部分にする

固定幅での３カラムレイアウト

固定幅での３カラムレイアウト

#06 3カラムのレイアウト (固定幅)
http://dotinstall.com/lessons/website_html/9006
を参考に
固定幅での3カラムレイアウトを作成

CSSファイルを編集して配置を設定

初期状態のCSSが
ソースになかったので
メモ
とりあえず、これを base.css
としておいて、今後の練習に使うことに

/* mycss.css */

#container {
    width: 500px;
    margin: 0 auto;
}

#header {
    background-color: red;
}
#main {
    background-color: blue;
}
#footer {
    background-color: green;
}

#left {
    background-color: pink;
}
#center {
    background-color: orange;
}
#right {
    background-color: purple;
}

まずは、レイアウトを変えるため

#left{
background-color:pink;
float:left;
width:100px;
}

#center{
background-color:orange;
float:left;
width:300px;
}

#right{
background-color:purple;
float:left;
width:100px;
}

というようにする

width は

幅の指定

float は回りこみの指定

また、footer 部分が割り込んでこないように
overflow:hidden;
を
#main のところに追加しておく

このレイアウトを変更せずに
#center 部分に余白を１０px入れるなら

margin-left:10px;
margin-right:10px;
width:280px;

というように、幅を全体の３００から引いて合わせる

また、上下に余白設定も可能だけど
注意点あり

もし、 #header と #main の間に余白をいれたいなら
#header のほうへ
margin-bottom:20px;
というように指定する

これを #main のほうでも
margin-top:50px;
で指定してしまうと
マージンの相殺が発生する

これはお互いに打ち消しあって
大きいほうの設定だけが有効になる
つまり
margin-top:50px だけ有効になる

3カラムレイアウトの作成

3カラムレイアウトの作成

#05 3カラムのレイアウト (可変幅)
http://dotinstall.com/lessons/website_html/9005
を参考に
可変の3カラムレイアウトを作成

最初にHTMLを編集しておく

<div id="main">

の中で

<div id="center">center</div>

を追記

CSSのファイルは
最初の画面にでているような状態にするなら

#container{
width:70%;
margin:0 auto;
}

#header{
background-color:red;
}

#main{
background-color:blue;
overflow:hidden;
}

#footer{
background-color:green;
}

#left{
background-color:pink;
}

#center{
background-color:orange;
}

#right{
background-color:purple;
}

となる

これをカスタマイズしていく

ここから、まず left を編集
#left{
background-color:pink;
float:left;
width:30%;
}

とすることで
float:left;
で左に回りこみ
width:30% で大きさを４０％に設定

#center{
background-color:orange;
float:left;
width:40%;
}
これで
float:left;
で左に回りこみ
width:40% で大きさを４０％に設定

#right{
background-color:purple;
float:left;
width:30%;
}

ここでの注意点は
footer がまわりこまないように
#container
で
overflow: hidden;
を設定しておくこと

とりあえず、これで3カラムができる

この使い道は、CSSの設定とHTMLで
テンプレが作成できるということ

これは wordpress テンプレとかでも
MT4 とかでも同じ

現状は可変だけど、固定幅にすることも可能
例えば
left を固定で100px
right も固定で１００px
そして、center は left ぶんだけ開けるとするなら

#left と #right では
width=100px
として

#center では
margin-left:100px;
とする

こうすれば、left のぶんだけあけることが可能

ちなみに、HTMLで
left
right
center
の順番だとOKだけど

left
center
right
だとレイアウトが崩れるので注意

vagrant マシン接続のため hosts 編集

vagrant マシン接続のため hosts 編集
#06 hostsを編集してみよう
http://dotinstall.com/lessons/basic_local_development_v2/24806
を参考に
hosts の編集
IPではなく、ドメインのようなものでアクセスできるように設定する
動画と同じようにしたいのなら
dev.dotinstall.com
ドットインストールでは Mac
私の環境は ubuntu とちょっと違うのでメモ
hosts を編集するには
sudo vim /etc/hosts
でファイルを開き
192.168.33.56 dev.dotinstall.com
というように追記
これで、ブラウザで
dev.dotinstall.com
とすると
192.168.33.56
と同じ意味になる
今後、自分でドメインをとって開発するときに
テスト環境として使えるので
もし、変更したいのなら
dev.dotinstall.com
を自分のドメインに書き換えればOK

vagrant マシンでHTML表示

vagrant マシンでHTML表示
#05 htmlファイルを表示してみよう
http://dotinstall.com/lessons/basic_local_development_v2/24805
を参考に
HTMLファイルを表示してみる
まず、 ユーザ vagrant がアクセスできるように権限変更
sudo chown -R vagrant:vagrant /var/www/html
次に、ファイル転送をするので
ホストマシン、私の場合は Ubuntu で
FileZilla を起動して転送
ホスト名には
192.168.33.56
Protocol は
SFTP
を設定
ログオンの種類は
通常を選択して
ユーザ名 vagrant
パスワード vagrant
で接続
接続できたら
リモートサイトを
/var/www/html
にして
ファイルを作成しようとしたけど
ubuntu の filezilla の場合ファイルを作成する項目が見当たらないので
cd /var/www/html/
touch index.html
でファイル作成
そしてそのまま編集
hello と書いて保存し
再度
192.168.33.56
をリロードして
hello
と表示されれば成功

vagrant マシンにweb サーバー導入

vagrant マシンにweb サーバー導入
#04 Webサーバーを導入しよう
http://dotinstall.com/lessons/basic_local_development_v2/24804
を参考に web サーバーインストール
まず現在インストールされているものを調べるには
yum list installed
で確認できる
確認だけなら sudo なしでもみれる
より細かく調べるなら grep と合わせるとよい
もし httpd がインストールされているか
調べるなら
yum list installed | grep httpd
これで何も表示されないのなら
インストールされていないということ
今回はインストールされていないので
sudo yum install -y httpd
でインストール
ちなみに、この httpd が web サーバで
apache というものになる
sudo service httpd start
sudo chkconfig httpd on
で httpd を起動
chkconfig は次回、自動起動するか設定する
on なら次回から自動起動する
webサーバー起動確認するには
ブラウザを開いて
http://192.168.33.56/
というように
Vagrantfile で設定したIPを打ち込めばOK

仮想マシンのネットワーク設定

仮想マシンのネットワーク設定
#03 ネットワークの設定をしていこう
http://dotinstall.com/lessons/basic_local_development_v2/24803
を参考に
vagrant で作成したCentOS のネットワークを設定
まずシステムアップデート
sudo yum -y update
アップデートできたら
ネットワークの設定
sudo yum -y install vim
で vim をインストール
sudo vim /etc/resolv.conf
ちなみに、ディレクトリパスは
tab キーで補完するとミスしにくい
で、開いたファイルで
一番上に
options single-request-reopen
を追記して保存
これの意味はいまいちわからないので検索
http://www.kunitake.org/chalow/2012-11-02-1.html
にこのあたりの解説が載っているので参考に
どうやら名前解決の遅さ解決のためのようです
そして、開発環境でファイアウォールの解除
sudo service iptables stop
sudo chkconfig iptables off
自分で iptables 設定してもいいけど
なれないうちはこのほうが楽
ちなみに、FW解除しないと
PHPとかでつくってもなにもみれないので注意

vagrant でローカル開発環境構築

vagrant でローカル開発環境構築
ローカル開発環境の構築
http://dotinstall.com/lessons/basic_local_development_v2
に
今回 vagrant でローカル開発環境構築がでていたので実践
今回は
Python
Ruby / Ruby on Rails の
環境も追加されている
使用する仮想環境は VirtualBox を使用
まず
cd /media/bdec1869-7820-4557-a76e-a8b130293019/
でHDDへ移動
これは私の環境の場合
SSD＋HDDのため
vagrant box add centos64box http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box
で追加するけど、すでに以前追加しているので
今回は
mkdir localdev
cd localdev/
でディレクトリを作って、そこに移動
過去に仮想マシンを追加したなら
ls ~/.vagrant.d/boxes/
で追加した仮想マシンを確認できる
vagrant init centos64
で
Vagrantfile
を作成
ネットワーク設定をするため
vim Vagrantfile
でファイルを開き
/config
で探して
２６行めあたりの
# config.vm.network :private_network, ip: “192.168.33.10”
を探し
config.vm.network :private_network, ip: “192.168.33.56”
へ変更
保存したら
vagrant up
で仮想マシンの作成
仮想マシンの作成ができたら
vagrant ssh
で接続して
pwd という現在のディレクトリを示すコマンドで
/home/vagrant
となっているなら成功

ruby でクラスからインスタンス作成

ruby でクラスからインスタンス作成
クラスからインスタンスを作成し
メソッドで呼ぶようにする
インスタンスを作るには
クラス名.new(引数)
.new をつけることで
def initialize が呼ばれる
今回、クラスで
def initialize(name)
@name = name
@hp = 100 + rand(100)
end
となっているので
まず、モンスターのスライムを作成
スライムのインスタンスを作るには
slime = Moster.new(“slime”)
これで、
スライムのインスタンスが作成され初期設定がされる
このスライムにダメージを与えるには
def damage を実行すればいいので
slime.damage
とすれば実行できる
実行すると
slime appeared. His HP is 109
slime’s HP is now 92
というように表示される
さらに、スライムだけでなくマミーも追加
そして、
マミーの回復も追加してみた
mummy = Monster.new(“munmmy”)
mummy.heal
これで実行すると
slime appeared. His HP is 187
slime’s HP is now 170
munmmy appeared. His HP is 150
munmmy’s HP is now 165
というように追加されたのがわかる

ruby の自作クラス

ruby の自作クラス
ruby でクラスを作成するには
class クラス名
def initialize
初期化処理
end
def メソッド名
行う処理
end
end
となる
クラス名は大文字で始まるので注意
initialize は必須で
インスタンス作成のときの初期化につかう
この解説でわかりやすいのがドットインストール
今回は、ゲームの処理を想定
class Monster
def initialize(name)
@name = name
@hp = 100 +rand(100)
end
def damage
@hp -=10 + rand(10)
printf(“%s’s HP is now %d\n”,@name,@hp)
end
end
このメモを書いてみると
def initialize(name)
@name = name
@hp = 100 +rand(100)
end
の部分が initialize メソッドによる初期化処理
@name は名前
@hp はRPGのHPを意味している
def damage
@hp -=10 + rand(10)
printf(“%s’s HP is now %d\n”,@name,@hp)
end
は
ダメージを受けたときの処理を行うメソッド
@hp -=10 + rand(10)
でHPが減る仕組み
printf(“%s’s HP is now %d\n”,@name,@hp)
で
名前と現在のHPを表示している
続いて、HPが０になったら死亡メッセージ表示
printf(“%s is dead ….\n”,@name) if @hp < 0 ruby の場合、後に if 判定を書くやりかたをするので 他の言語からくるとちょっとわかりにくい さらに、回復時のメソッド heal も追記 def heal @hp += 10 + rand(10) printf("%s's HP is now %d\n",@name,@hp) end これで、回復時の処理もつくれる また initialize メソッドへ printf("%s appeared. His HP is %d\n"@name,@hp) とすれば初期化したときに 名前とHPが表示されるようになる ＠がついた変数、今回なら @name @hp これらは、インスタンス変数と呼ばれ 作成したメソッドだけでなく class から生まれたインスタンスの中なら使える変数 になる つまり 通常は、メソッドの中 def initialize の中だけになるけど @ がつくことで 今回なら class Monster の中でなら使える変数になる このため、 def damage とか def heal という別のメソッドでも使えるようになっている