View
543
Download
0
Category
Preview:
Citation preview
Webの勉強会#3
Webサイト制作の環境構築について
2015/11/27 Ver.1.1
1
最近の制作環境 作業する前に言葉の説明 Sublime Text 3の設定 SourceTreeのインストール node.jsのインストール gulpの設定 Sassの設定 ローカルホストサーバーの立ち上げ
2
アジェンダ
最近の制作環境
3
4
今まで
5
アプリケーションソフト
インストール
環境設定マークアップ作業動作確認
6
環境の変化
7
レスポンシブ対応
スマホの確認
CSSの肥大化
価格の減少ブラウザの確認
バージョン管理ツールjQueryの
一般化
設計思想の導入
8
今までの方法だと作業効率が悪い
9
多くのエンジニアは考えた
10
自分の開発環境を自分で構築する
11
フリーのエディタープラグインなど
マークアップ作業動作確認
環境構築
インストール
12
作業効率化作業速度向上
作業する前に言葉の説明
13
14
コマンドプロンプト1
15
キャラクターユーザーインターフェースCUI
16
主にキーボードを使ってPCを操作する
17
黒い画面
18
コマンドプロンプトでは、「コマンド」と呼ばれる命令があります。コマンドで色々操作することが可能です。また、別な機能をインストールすると、専用のコマンドが追加されます。
19
コマンドプロンプトを難しく考えることはありません
20
環境変数2
21
OSがアプリケーションなどのタスクに対して、変数名とそれに結び付けられた変数値を与える、データ共有機能です。
22
何を言ってるのかよく分かりません
23
自分が実行したいプログラムの場所を指定
24
後ででてきます
Sublime Text 3の設定
25
26
作業環境構築最初はマークアップ専用のエディターについて
27
有名なエディター3つ
28
Sublime Text 3Atom
Adobe Brackets
軽いエンジニア向け
重いデザイナー向け
29
http://www.sublimetext.com/3Windows、Windows 64 bitのいずれかのportableを選ぶZIPファイルを解凍してUSBまたはクラウドなどにフォルダごと移動
1
2
3
Sublime Text 3のインストール今回はPortableで
30
[View]メニューから[Show Console]を選択https://packagecontrol.io/installationSUBLIME TEXT 3のテキストをコピペ[Preferences]メニューに[Package Control]があるかどうか確認
1
2
3
Package Controlのインストール
追加機能を入れるための機能
31
Japanizeのインストール
[Preferences]メニューから[Package Control]を選択入力ボックスに「Install Package」と入力してこれを選択さらに入力ボックスが表示されるので「Japanize」と入力して選択
1
2
3日本語化するプラグイン
32
ポータブル版Japanize日本語化
インストールしたフォルダ名¥Data¥Packages¥Japanizeまで階層を下がる.jpのついたファイルをすべてコピー（6つあります）インストールしたフォルダ名¥Data¥Packagesに「Default」フォルダを作成「Default」フォルダにコピーしたファイルを全て置く
1
23
4
33
ポータブル版Japanize日本語化
コピーしたファイルの拡張子「.jp」を名称から取ってしまうこの6つのファイルを、インストールしたフォルダ名¥Data¥Packages¥Userの中にコピペ
5
6
34
こんな感じ
35
Emmet：コードの記述を超効率化できるAll Autocomplete：自動補完機能をさらに拡張jQuery：コードjQueryを補完HTML5：コードHTML5を補完SublimeCodeIntel：色々な言語のの強調表示、コードの自動補完
Sublime Text 3のプラグイン
Shift+Ctrl+PでPackage Controlが表示できます
36
Alignment：「=」の位置をそろえるAlignTab：イコールやカンマやコロンのカラムを綺麗にそろえるAutoFileName：プロジェクトフォルダ内のファイル名などを補完ConvertToUTF8：文字エンコードをUTF8に変換、保存時時に戻す
Sublime Text 3のプラグイン
37
TrailingSpaces：末尾にスペースが入っている時にハイライト、保存する時に削除BracketHighlighter：カッコやクォート、タグの開始/終了をハイライト
Sublime Text 3のプラグイン
他にも山ほどあります
38
メニューの「基本設定」-「ユーザ」で表示されるファイルには自分が使うSublime Textのルールを記述して使うことができます。
Sublime Text 3のカスタマイズ
39
{
"draw_minimap_border": true, //ミニマップの表示位置にボーダーを付ける“font_face”: “Ricty Diminished”, //表示する書体“font_size”: 18, //フォントのサイズ"line_padding_top": 4, //行間"tab_size": 2, //タブサイズ"draw_white_space": "all", //タブやスペースなど不過視文字を表示“highlight_line”: true, //選択行をハイライトする“trim_trailing_white_space_on_save”: true, //空白を削除“word_wrap”: true, //自動改行を行う“translate_tabs_to_spaces”: true, //タブをスペースに変換する“default_encoding”: “UTF-8”, //デフォルトの文字コードを指定"show_encoding": true //文字コードを右下に表示
}
ルールの例
SourceTreeのインストール
40
41
次はバージョン管理ツール
について
42AさんのPC BさんのPC
ホスティングサービス
（リモートリポジトリ）
差分管理データ共有遠隔地作業
ローカルリポジトリ
ローカルリポジトリ
43
Gitはコマンドプロンプトメインなので取っつきにくい
44
GUIのバージョン管理ツールSourceTree
45
バージョン管理ツールはホスティングサービスを
使うこと前提
46
有名なのはBitbucket、GitHub
47
https://www.sourcetreeapp.com/からDLしてインストールインストール後、Gitについて聞いてくるので一番上を選択ついでにMercurialも聞いてくるがこれは要らないので一番下を選択
1
SourceTreeのインストール
2
3
48
次に表示されるボックスに名前、メールアドレス、同意のチェックをいれて次へ進む共通設定を聞かれたら「はい」で
4
SourceTreeのインストール
5
49
SSHでの接続方法を聞かれるので、デフォルトのPuTTY（パティ）を選ぶSSHキーの事を聞かれるが今は「いいえ」でホスティングサービスについてはあれば入力しておく程度
6
SourceTreeのインストール
7
8
50
SSHとSSHキー
51
暗号や認証の技術を利用して、安全にリモートコンピュータと通信するための方法Secure Shell（セキュアシェル）
SSHとは
52
SSHの認証方式として公開鍵認証方式があります。公開鍵認証方式は、公開鍵と秘密鍵の２つの鍵を使用して接続します。2つの鍵は、サーバーに公開鍵、クライアントに秘密鍵を置いて使用します。
SSHキーとは
53
SourceTreeではこの2つの鍵、SSHキーを生成することができます
54
メニューの「ツール」からSSHキーの作成/インポートをクリックPuTTYが起動するので「Generate」ボタンをクリックしてマウスを動かして鍵生成
1
SSHキーの作り方
2
55
「Save public key」ボタンをクリックしてSSH公開鍵を任意の場所に分かりやすい名称で保存続いて「Save private key」ボタンをクリックしてSSH秘密鍵を上と同じ様にに保存
3
SSHキーの作り方
4
56
ホスティングサービスとSourceTreeを繋ぎます
57
ホスティングサービスに登録SourceTreeでSSHキーを生成SourceTreeでSSHキー（秘密鍵）を登録ホスティングサービスにSSHキー（公開鍵）を登録
1
SourceTreeの使い方
2
3
4
58
ホスティングサービスにリポジトリ作成リポジトリをSourceTreeへクローン
5
SourceTreeの使い方
6
あとは保存場所にファイルを作ったりいじったり好きなことしていいです
node.jsのインストール
59
3つめは環境構築をする際に必要な機能の話
60
まずNode.jsという機能を使おうと思います
61
Node.jsはサーバー側で動作する
JavaScript
62
こいつ単体でいろんなことができますが
63
今回はほぼ入れるだけ
64
65
http://nodejs.jp/https://nodejs.org/en/からDLしてインストールなんだけどやらない
1
Node.jsのインストール?
node.jsは頻繁にバージョンアップするため
nodistを使う
66
67
https://github.com/marcelklehr/nodistのDownload ZIPからDLして解凍Cドライブ直下にディレクトリを作り、任意の名前をつける（環境により推奨）
1
nodistのインストール
2
このままでは動かないので環境変数に設定をいれます
68
69
「スタートメニュー」から「コンピュータ」を右クリックして「プロパティ」を選択システムのウィンドウが開いたら「システムの詳細設定」をクリック、「環境変数」をクリックで環境変数ウィンドウが開きます
環境変数の設定
1
2
ユーザー環境変数とシステム環境変数
70
システム環境変数
71
アクセスしているPCのユーザーが使用する環境変数
そのPC全体に影響する環境変数
ユーザー環境変数
PCを複数人でアカウント別に使う場合には
ユーザー環境変数を
72
一人で使っている場合にはシステム環境変数をいじる
73
74
「システム環境変数」の「path」を選択して「編集」をクリックインストールしたnodistにあるbinの場所を指定例）C:¥nodist¥bin;
「システム環境変数」の「新規」をクリック変数名をNODIST_PREFIXとして、変数値はnodistのpackage.jsonがあるパスにします 例）C:¥nodist
環境変数の設定
1
2
これだけで良かったです念のため再起動して下さい
3
75
コマンドプロンプトを開き、> nodist -vと入力してバージョンが表示されればOK!
nodistの動作確認
-vはバージョンを確認するコマンド
76
nodist update：nodistをアップデートnodist stable：nodistの安定版をインストール
nodistの補足
ついでにnpmという機能が動くかも見てみます
77
78
コマンドプロンプトを開き、> npm -vと入力してバージョンが表示されればOK!
npmの動作確認
npmって？
79
Node.jsのパッケージを管理するためのツール
80
npm専用のコマンドを使い他のパッケージをインストールできる
81
これでNode.jsからnpm経由で他の機能を追加することが
できます
82
gulpの設定
83
作業効率化の一つとして
84
手動でやると時間がかかることを
PCにやらせる
85
その機能がタスクランナー
86
タスクランナーはGrantとGulpが有名
87
最近のトレンドはGulp
88
Gulpは厳密にタスクランナーではなく
89
ストリーミング・ビルド・システム
90
あらかじめ実際に作業する場所（プロジェクト）を新規で作成コマンドプロンプトからnpm install -g gulpと入力（npmのコマンド）してグローバルインストール
1
gulpのインストール
2
91
コマンド「cd（カレントディレクトリ）」で作業場所に移動npm initと入力（npmのコマンド）してnode.jsモジュールを管理するpackage.jsonを作成
3
gulpのインストール
4
なんか聞かれるけど全部Enterで
92
npm install -D gulpと入力してローカルインストール（node_modulesディレクトリができます）gulp –vと入力してクライアントのバージョンローカルのバージョンが表示されればOK!
5
gulpのインストール
6
グローバルインストール
93
ローカルインストールはそのプロジェクトのフォルダ内でのみ利用できる
グローバルインストールはそのマシン上のどこからでも利用できるようになる
ローカルインストール
Gulpの仕様です
Gulpを使ってみる
94
Gulpを使うにはgulpfile.jsが必要なので
新規作成
95
gulpfile.jsに実行したいプログラムを記述
96
コマンドプロンプトに「HelloWorld!」と出力させる
97
1
98
var 変数名 = require(‘使いたい機能');
ファイルの読み込み
gulp.task(‘タスク名', function() {行いたい処理
});
タスクの登録
今回必要な命令等
var gulp = require('gulp');
gulp.task('hoge', function() {console.log('HelloWorld!');
});
99
gulpfile.jsに記述
コマンドプロンプトでgulp タスク名と入力してEnterで表示されればOK!
100
Sassの設定
101
レスポンシブの普及によりCSSの肥大化が止まらない
102
そこで生まれたのがSass
103
SassはCSSをより使いやすくするためにプログラムの概念を導入したもの
104
105
セレクタを入れ子にして入力変数が使えるインポートセレクタの継承必要なプロパティを持ってくる
1
Sassの特徴
2
3
4
5
Sassは基本Rubyを使うのと
106
コンパイル（変換）する必要あり
107
108
SCSSファイル
CSSファイル
こっちで作業 こっちは生成Gulpを使う
コンパイル
このあたりをGulpを使って自動化します
109
110
npm install -D gulp-sassと入力package.jsonに追記されます
1
Sassのインストール
libsassというC/C++で作られたSaSSのコンパイラが
gulp-sassというパッケージでgulpに提供されています
111
作業用ディレクトリを新規作成生成用ディレクトリを新規作成作業用にscssファイルを作成gulpにタスクを登録コマンドプロンプトからgulpを実行
1
Sassの使い方
2345
さらにSassのインポートを
使いファイルを分割する
112
113
メインのファイル
分割ファイル1
分割ファイル3
分割ファイル4
分割ファイル2
ファイル名の頭に_を付ける
@import “ファイル名”;と記述する
ではgulpとSassを使った機能を紹介
114
SaSSファイルを修正するとCSSが書き出され
HTMLの見た目が変化する
115
2
116
gulp.src(‘指定ファイルのパス’)
ファイルの指定
いきなりGulp
117
gulp.dest(‘書き込み場所のパス')
ファイルへの書き込み
.pipe(実行したい処理)
複数の処理を実行する実行したい処理を
pipeでつないでいく
118
gulpfile.js
src
node_modules
html
package.json
common
index.html
scss
_footer.scss
他に必要なファイル
style.scss
_header.scss
gtest
ファイル構造
css style.css
var gulp = require('gulp');var sass = require('gulp-sass');
gulp.task('sass', function(){gulp.src('./src/scss/*.scss').pipe(sass()).pipe(gulp.dest('./html/common/css'));
});
119
gulpfile.jsに記述
コマンドプロンプトでgulp sassと入力して
Enterで処理が表示されればOK!
120
ローカルホストサーバーの立ち上げ
121
最後
122
反映したCCSを確認するのにindex.htmlファイルを何度もクリックして
ブラウザ起動するのは面倒
123
これも自動化したい
124
Node.jsでローカルホストサーバーを
立てられるけど
125
せっかくgulpがあるのでファイルを更新するとその内容をブラウザへ
自動的に反映してくれる様にする
126
さらに複数のブラウザを同時に立ち上げて
いっぺんに確認できる機能も付いてくる
127
そんなお得な機能がBrowserSync
128
BrowserSync自体単体でも使えますがgulpと組み合わせて
より便利に
129
130
npm install -D browser-syncと入力1
BrowserSyncのインストール
インストールの途中でエラーが出るが終了場合、Windowsではnode-gyp周りで問題があるようです。回避方法としては、別途PythonとVisual C++を
入れる必要があります。今回は、この部分を使わないのでそのままでも上手くいきますが、今後の事を考えると
対処した方がいいです。
131
Gulpにタスクを登録コマンドプロンプトからgulpを実行監視指定（SCSSなど）ファイルを修正ブラウザが更新されていることを確認
1
BrowserSyncの使い方
234
132
gulp.watch(‘監視するファイルのパス’);
特定のファイルを監視する
いきなりGulp
var gulp = require('gulp');var sass = require('gulp-sass');var browserSync = require('browser-sync');
gulp.task('sass', function(){gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./html/common/css'));});
gulp.task('default', ['sass', 'browser-sync'], function () {gulp.watch("./src/scss/*.scss", ['sass']);
});
gulp.task('browser-sync', function() {browserSync.init({
server: {baseDir: "./html"
}});gulp.watch("./html/**", function() {
browserSync.reload();});
}); 133
gulpfile.jsに記述
コマンドプロンプトでgulpと入力して
Enterで処理が実行されればOK!
134
Recommended