toreta-webdev

gistfile1.md

トレタ Web テンプレート

目的

• 多くのデバイスで正しく見えるページを提供する
• 誰でもメンテナンスできるコードを提供する
• ヘッダやフッタなどの共通部品は1カ所にまとめる
• 静的なファイルとしてアップロードが可能
• ページ読み込み速度の軽減
• 変更履歴を管理
• ステージング環境の構築
• HTML構築環境を統一

技術要素

• Bootstrap 3を用いたレスポンシブWeb
• CSSはSCSS
• テンプレートエンジンにERB
• machinedを通じてsprocketsを使う
• Vagrantを用いた開発環境の提供

環境構築

必要環境

• VirtualBox
• Vagrant

Windows環境構築

下記のアプリをインストール

• http://download.virtualbox.org/virtualbox/4.3.12/VirtualBox-4.3.12-93733-Win.exe
• https://dl.bintray.com/mitchellh/vagrant/vagrant_1.6.3.msi

OSX環境構築

下記のアプリをインストール

• http://download.virtualbox.org/virtualbox/4.3.12/VirtualBox-4.3.12-93733-OSX.dmg
• https://dl.bintray.com/mitchellh/vagrant/vagrant_1.6.3.dmg

使い方

vagrantを使い、localhostにWebサーバを起動します。

起動方法

このファイルがあるディレクトリで下記コマンドを実行

vagrant up

アクセス方法

http://localhost:3000/ をブラウザで開く

終了方法

このファイルがあるディレクトリで下記コマンドを実行

vagrant halt

環境消去

Webサーバの実行環境を削除します。作ったファイルなどは削除されません。

このファイルがあるディレクトリで下記コマンドを実行。

vagrant destroy

ディレクトリの説明

assets

この下のディレクトリは /assetsとしてアクセスできる。assets/javascripts/example1.coffeeは、http://localhost:3000/assets/example1.jsとしてアクセス可能。

images

png/jpeg/gifなどのイメージファイルの設置場所

javascripts

Javascript、CoffeeScriptの設置場所

stylesheets

CSS、SCSSの設置場所

pages

HTMLテンプレート

bin

開発環境に必要なファイル

log

開発環境の実行ログ

public

生成されたファイル

Webサイトの作り方