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