シェルとGulpで開発環境を整える

この記事はHTMLとCSSの基本を一通り習得した方を主な学習者対象としており、制作現場で必要になるウェブコーディングの技術とフロントエンドの技術に特化した内容です

コマンドラインツールと操作方法

環境開発の構築や制作で必ず使用するコマンドラインツールですが、その仕組みや使い方を覚えれば効率的なウェブ制作が可能となります。

コマンドラインツールの基本からファイルやディレクトリ操作でよく使うコマンドを紹介します。

コマンドラインツールはマウスカーソルなどは使わず、コマンドのみで操作するアプリケーションのことを指し、 CUIまたはCLIといいます。

これに対しマウスやカーソルなどで操作するソフトウェアやアプリケーションのことをGUIといいます。

WindowsやMacOSはGUI、サーバーなどに使用されるLinuxやUnix系システムなどではCUIでの操作が基本となります。

Windowsは コマンドプロンプト、Mac OSならターミナルというコマンドラインツールがインストールされています。

Unixは1969年に開発が開始された新UIを基本としたOSの1つで、現在は多数のプラットフォームにしか組み込まれています。このUnixを標準として開発されたOSは、Unix系システムとも呼ばれています。

macOSの コアであるDarwinもこのUnixをベースに開発されています。デフォルトでインストールされているコマンドラインツールはそのままでは少し扱いにくい場合があります。

もちろんカスタムすれば自分好みの設定でも可能ですが、最初からいろいろなツールのいいとこ取りをした、互換性のあるコマンドラインツールも存在します 。

例えばコマンド画面をタブ化して、１画面にまとめる機能、ローカルとリモートサーバーの表示を画面分割する機能、配色をカスタマイズする機能というように、デフォルトよりも豊富な機能を搭載しています。

WindowsであればPowerShellや SSHなどリモート操作で豊富な機能を搭載したRLogin、mac OSならiTerm2があります。デフォルトのツールで不憫お不便を感じるようでしたら導入をおすすめします。

コマンドラインツールはあくまでコマンドを入力し結果を表示するツールです。コンピューターの核となるカーネルではユーザが入力したコマンドやGUIで操作した事項処理について、直接的に解釈する機能を持っていません。

入力した情報をカーネルに伝え、カーネルからの処理結果を解釈して実行する仲介役のプログラムが必要で、このプログラムをシェルといいます。

CUIであればコマンドシェル、GUIを仲介をするシェルはグラフィカルシェルとも呼ばれています。

シェルには様々な種類がありWindowsやmacOSでコマンド文が違う理由は、OSによって設定されているシェルが異なるためです。

LinuxとmacOSでは同じ種類のシェルが利用できます。Linuxのデフォルトは Bashシェル、macOSも以前まではBashがデフォルトでしたが、最近は、上位互換のZshシェルが設定されています。

Windowsは「コマンドプロンプト」や「PowerShell」といった前述のOSとは違った独自シェルとツールをセットで提供しています。そのため、入力するコマンドや設定方法がほかのOSと異なる点に注意してください。

Windows 10のバージョン1709以降からは、Windows Subsystem for　Linux(WSL) が導入され、Bashが利用できるようになりました。 Windows Subsystem for Linux(WSL) は、Windows上にLinuxの仮想環境を構築する仕組み。 WindowsでもBashを利用したい方は、WSLがおすすめです。

主なシェルの種類

sh

UNIXシステム上もっとも古いシェルで、さまざまなシェルの元となっている。シェルスクリプトではこのシェル構文がよく使われている

bash

shシェルの上位互換であり、Linuxなど多くのOSで標準シェルとして利用されている

ksh

shシェルの上位互換であり、bash よりもバイナリデータが少ない特徴がある

csh

C言語の構文に似たシェル。sh シェルとは互換性がないため、sh 派生シェルとコマンドの違いがある

tcsh

csh シェルの上位互換のシェルで、機能や関数などが強化されている

zsh

sh、bash、csh、toshの機能をほぼ網羅している強力なシェルで shの上位互換。macOS Catalina から標準シェルに採用された

fish

Friendly Interactive Shell という名のとおり、ユーザーフレンドリーなシェルで、配色、補完機能、丁寧なへルプメッセージ、GUI の設定などが標準で備わっている。sh シェルとは互換性がないため、スクリプト構文が異なる

※このほかにも、たくさんのシェルがあります。

コマンドラインツールを実際に起動する

コマンドラインツールを起動するには、メニューやアプリケーションディレクトリなどから探してアイコンをクリックするか、検索メニューを利用してコマンドラインツール名で絞り込んだものを選択します。

Windowsのコマンドプロンプトの起動方法

「スタートメニュー」→「Windowsシステムツール」→「コマンド プロンプト」を選択

MacOSのターミナルの起動方法

1. Spotlight検索でターミナルと入力
2. ターミナルを選択ラウンチパッドのその他を選択ターミナルアイコンを選択
3. ラウンチパッドの検索でターミナルを入力して検索しターミナルアイコンを選択

コマンドラインツールが起動するとユーザのホームディレクトリが最初に表示されます。ホームディレクトリはユーザーズディレクトリ内にあるユーザ内のディレクトリのことです。Windowsではフルパスで表記されているがターミナルの場合は~(チルダ)記号を使用し省略した状態で表示されます。

シェルのコマンドをプログラミング化して作成したスクリプトを「シェルスクリプト」、Windowsは「バッチファイル」と呼びます。使用しているシェルによって、スクリプトのプログラムの構文は異なり、拡張子もシェルに合わせて「.sh]や「.bat」といった形になります。スクリプトを作成することで、連続したコマンドの実行処理を行うことや複雑な処理も変数などを用いて実行処理することが可能です。定期的なタスクをスクリプトで解決したい場合などは、このシェルスクリプトを利用してください。

先頭に表示している「$」という記号は、プロンプトの省略記号です。ユーザーによって表示される内容が異なることや表記としては長くなるため、コマンドの説明を行う際には「S」だけを記載し、実行する場合は「$」を除いたコマンド名から入力します。

コマンド記述ルール(Windows)

$コマンド名「オプションA/オプションB 引数1 引数 2…

コマンド記述ルール(macOS)

コマンド名-オプション1 -オプション2　引数1 引数2…

コマンド名は実行するコマンド文、コマンドとオプションや引数の間は半角スペースを入れます。オプションの先頭記号は、Windowsは「1」、UNIX系なら「-」を指定します。オプションはコマンド名の後に入力することもあれば、引数の後に入力する場合もあります。

例えば、ファイルをコピーするコマンドは、Windowsであれば「copy」、macOSであれば「cp」コマンドを使用します。「index.html」を「index_copy.html」に命名を変更して、同一ディレクトリ内にコピーします。

ファイルをコピー (Windows)

$ copy index.html index_copy.html

ファイルをコピー(macOS)

$cp index.html index_copy.html

一度入力したコマンドであれば、入力履歴を利用して再度実行が可能です。

入力履歴の参照は、キーボードの「↑」と「↓」で操作できます。また、シェルによってはコマンド補完機能も備えており、コマンドやディレクトリ名などを途中まで打ち込み、「tab」を利用することで正式名称を補完してくれます。

コマンドラインツール、によく使う基本的なコマンド

基本的なキー操作を掲載しています。詳細な情報に関しては、リファレンスサイトを参照してください。

 機能名と操作法　　　　　　　　

カーソルの横移動　　　　「←」で左へ移動　　　　「→」で右へ移動

入力履歴を表示する

「↑」や「↓」でコマンド履歴を表示できる

コマンドやディレクトリ名の補完

途中までコマンドを入力し「tab」を押すことで残りの単語やディレクトリ名を

補完できる。補完できるものはシェルに設定された補完機能によって異なる。

行先頭、行末へ移動(Windows)

「Home」で行先頭に移動、「End」で、行末へ移動

行先頭、行末へ移動(macOS)

「Ctrl + 「a」で行先頭に移動

単語単位の移動(Windows)

「Ctrl] + 「←」で1単語分左に移動。「Ctrly + 「→」で、1単語分右に移動

単語単位の移動(macOS)

「option」+ 「←」で1単語分左に移動。「option] + 「→」で、1単語分右に移動

入力したコマンドの削除(Windows)

「Ctrl] + 「Home」で、現在のカーソル位置より前方の文字列を削除、

「Ctrl] + 「End」で後方の文字列を削除

入力したコマンドのカット (macOS)

「Ctrl] + 「u」で、現在のカーソル位置より前方の文字列をカット、「Ctrl+10で、

後方の文字列をカット、「Ctrl] + fy」でカットした文字列の貼りつけも可能

実行コマンドを中断する

[Ctrl] + 「c」で処理中のコマンドをキャンセルする。

Windows  macOS (UNIX) 　コマンド一覧  

dir           ls -la               現在いるディレクトリとファイルを表示

cd            cd                   ディレクトリの移動

ren (old) [new]          mv (old) (new]         ファイル名の変更

move (old) (new)   mv (old) (new]      ディレクトリ名の変更

move (from) (to]       mv [from] [to]    ファイル・ディレクトリの移動

copy (from) (to]          cp [from] [to]           ファイルのコピー

copy (from) (to]       cp-a [from] [to]         コピー元となるファイルの情報やシンボリックリンクを含めてコピーする

xcopy /e [from] [to]        cp-R [from] [to]         ディレクトリを再帰的にコピー

copy nul (filename]             touch [filename]        ファイルを作成する

mkdir (directoryname]        mkdir (directoryname]ディレクトリを作成する                     

del [filename]          rm [filename]          ファイルを削除する

rmdir (directoryname]          rmdir (directoryname]        空のディレクトリを削除する

rmdir /S [directoryname]        rm-r [directoryname]   　ファイルやサブディレクトリを削除する

リファレンスサイト

Windowsコマンド集

Linux] KINDEX

CUIを使った効率的なファイル操作

ここまで紹介してきたコマンドに関しては、GUIでも実行可能です。しかし、GUIは画面上でわかりやすく操作できる反面、ファイル数やファイル容量が大きくなると、CUIに比べて実行処理が遅くなってしまうことがあります。

例えば、大量のファイルの中から「ファイル名に特定の単語を含むファイルを選択して移動させる」場合(次ページ:14)、エクスプローラーやFinderでファイルを複数選択し、目的のディレクトリに対してドラッグ&ドロップで移動させる必要があります。任意のファイルが大量にある

場合、正しく選択するだけでも時間がかかってしまい、ファイル検索を利用するか、ファイル名や拡張子の種類で並び替えを行い、表示をソートした上で選択する必要があります。

選択して移動するファイルに何かしらの規則性があれば、CUIではコマンド1行で取得するファイルの条件と合わせて、移動先のディレクトリに移動が可能です。図15図10のコマンドでは、ワイルドカードを利用して、ファイル名に「mdn」が含まれるファイルを、mdnディレクトリへ移動できます。

ワイルドカード

ワイルドカードは、不特定の文字列を表す特殊記号で、文字列やファイル検索においてよく使われている。「?」は任意の1文字に一致する指定、「*」は任意の0文字以上の文字列を表します。

ワイルドカードを利用したファイルの移動(Windows)

$ move *mdn* .\mdn\

ワイルドカードを利用したファイルの移動(macOS)

$ mv *mdn* ./mdn/

フロントエンド開発でのCUIの利用

以前のWeb制作では、CUIはインフラやバックエンドを担当するエンジニアが使っており、HTML+Css+ JavaScriptをコーディングするだけでは、使う機会が多くありませんでした。しかし、SassをはじめとしたCSSメタ言語の登場によるコンパイル作業やタスクランナーの登場によって、CUIを使ったインストール方法や実行方法が紹介され、フロントエンドでも使用する機会が増えました。もちろん、GUIを使った方法もあります。例えば、インストールする

だけでSassの利用が可能になるアプリケーションや、各種タスクランナーを実行するアプリケーションも配布されています。Gitであれば、GUIを使うことで視覚的にログや差分を追いやすいです。

GUI、CUIどちらにも利点や欠点はあるものの、どちらか一方だけを使うのではなく、自分の開発スタイルに合わせて柔軟に使い分けできるようにしてください。

フロントエンド開発に必要なNode.jsのインストール

フロントエンド開発において使用されるツールには、SassやGulp、jQueryプラグインなどNode.jsで提供されているものが数多くあります。ここでは、Node.jsのインストール方法から、各パッケージの利用方法について解説します。

Node.jsとは?

Node.jsはサーバーサイドでJavaScriptを動作させるツールの1つです

本来JavaScriptは、ユーザーがWebサイトにアクセスすることで実行されるクライアントベースの言語です。そのため、サーバーサイドの実装には、PHPやRubyといった別言語を使用する必要がありました。そこで、JavaScriptをデスクトップ環境やサーバーサイドでも実行できるようにしたのが、サーバーサイドJavaScriptのNode.jsです。

Node.js

Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.jsのインストール方法

Node.jsでは、推奨版であるLTS (Long Term Support)と、最新機能が随時反映される最新版の2つが提供されています。一般的に使用する場合はLTSをダウンロードしましょう。インストール方法には、公式サイトのインストーラーを利用する方法と、CUIでインストールする方法があります。

Webサイトの制作では、プロジェクトのディレクトリごとに使用しているNode.jsのバージョンが異なる場合があります。そこで、バージョン別にインストール可能で、切り替えのできるCUIのツールがよく利用されています。

本節では、Windowsで利用できる「nodist」と、macOSではディレクトリごとにバージョンの切り替えが容易な「nodenv」を使って、LTS (12.16.3) のインストール方法をそれぞれ解説します。

nodistのインストール(Windows)

nodistは、インストーラーか「choco」などのパッケージマネージャーからインストールが可能です。ここでは、インストーラーを利用してダウンロードします。nodistのGitHubページのreleaseページよりexeファイルをダウンロードしてインストールを行いましょう。

パッケージマネージャーとは、さまざまなソフトウェアやライブラリを1つのパッケージとして扱い、インストールやアップデートを行うことができるツール。インストールしたソフトウェアのバージョン情報を管理し、ソフトウェア同士の依存性を管理できます。

WindowstならChocolateyl、macOSならHomebrew)、Node.jsならnpmなどがあります。

インストールすると、「nodist」コマンドが使用できるようになります

コマンドプロンプトを起動して、nodistのバージョンを確認してみ

ましょう。「nodist -V」コマンドを実行し、次の行にバージョン情報が表示されていれば、インストール完了です。

nodistのバージョンを確認する

$ nodist -v

0.9.1

Node.jsをインストールする(Windows)

「nodist dist」コマンドでインストールできるNode.jsのバージョンを確認します。

「nodist dist」コマンド

$ nodist dist

インストールできるバージョン一覧が出てきます。

12.16.0

12.16.1

12.16.2

13.0.0

13.1.0

推奨版である12.16.2をインストールします。インストールするコマンドは、「nodist + バージョン番号」となります。

$nodist  + 12.16.2

指定したバージョンがインストールされたので、システム上で使用するバージョンを指定します。「nodist global バージョン番号」でコマンドを実行しましょう。

$ nodist global 12.16.2

実際に設定されているNode.jsのバージョンを確認してみましょう。

$ nodev

v12.16.2

インストールしたバージョン情報が表示されていれば、Node.jsのインストール完了です。また、nodistを使ってインストールしたバージョンの一覧は、「nodist」で確認ができます。

$ nodist

(x64)

11.13.0

> 12.16.2 (global: 12.16.2)

13.0.0

「>」がついているバージョン番号が現在使用しているバージョンです。

複数のバージョンを切り替える(Windows)

使用するバージョンを切り替えるときは、切り替えたいバージョンをインストール後、「nodist global」を使用します。また、特定のディレクトリのみ指定したバージョンを使用する場合は、該当ディレクトリに移動し、「nodist local」を使用します。

システム全体でバージョンの切り替え

// 別のバージョンをインストールする

$nodist + 13.0.0

// システム全体で使えるように設定する

$ nodist global 13.0.0

特定のディレクトリのみでバージョン切り替え

// 別のバージョンをインストールする

$ nodist + 13.0.0

// 特定のディレクトリへ移動

$ cd mdn

11 特定のディレクトリのみ、13.0.0を有効化する

$ nodist local 13.0.0

nodenvをインストールする (macOS)

macOSにnodenvをインストールするには、パッケージマネージャーの「Homebrew」を使用します。まずは、Homebrewをインストールするために、公式サイトで案内されているコマンドをターミナルで実行しましょう。

Homebrew

Homebrew

Homebrew The Missing Package Manager for macOS (or Linux).

例

$ /bin/bash -c “$(curl -fsSL “

途中でXcodeのコマンドラインツールをインストールするメッセージが表示され停止します。続行するためにEnterキーを押します。

インストールが完了すると、ターミナル上に「Installiation successful!」と表示されますので、Homebrewが実行できるか確認するためにバージョン情報を表示してみましょう。Homebrewでは、「brew」コマンドを使用します。

バージョン情報の表示

$ brew -V

Homebrew 2.2.13

Homebrew/homebrew-core (git revision 5720b; last commit 2020-04-19)

バージョン情報が表示されていれば、インストール完了です。

続いて、brewコマンドを使って、nodenvをインストールします。

nodenvをインストール

$ brew install nodeny

nodenvの初期設定をシェルの設定ファイルへ追記するために、echoコマンドを使って記述を加しましょう。

odenvの初期設定をシェルの設定ファイルへ追記

// シェルがzshの場合

$ echo ‘eval “$(nodeny init -)” >> ~/.zshrc

// シェルが bashの場合

$ echo ‘eval “$(nodenv init -)” >> ~/.bashrc

記述を追加したら設定ファイルを再読み込みするために、source コマンドを実行します。

//シェルがzshの場合

$source ~/.zshrc

// シェルが bashの場合

$source ~/.bashrc

nodenvが正しく設定されていることを確認するため、nodenv-doctorスクリプトを使用します。実行に問題がなければ次のようなメッセージが表示されます。

nodenv-doctorの実行コマンド

例

$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

実際にnodenvコマンドでバージョン情報を表示してみましょう。

バージョン情報が表示されていれば、インストール完了です。

$ nodenv -V

nodeny 1.3.2

Node.jsをインストールする(macOS)

nodenvを使ってインストールできるNode.jsのバージョンを確認します。「nodenv install -l」 コマンドを実行すると、バージョンの一覧がターミナル上に表示されます。

$ nodenv install -1

インストールできるバージョン一覧が出ます。

12.15.0

12.16.0

12.16.1

12.16.2

13.0.0

13.x-dev

13.x-next

推奨版である12.16.2をインストールします。コマンドは、「nodenv　install バージョン番号」でインストールできます。

バージョン12.16.2をインストール

$ nodeny install 12.16.2

指定したバージョンがインストールされたので、システム上で使用するバージョンを指定します。「nodenv global バージョン番号」でコマンドを実行しましょう。

$ nodenv global 12.16.2

実際に設定されているNode.jsのバージョンを確認してみましょう。

設定されているNode.jsのバージョンを確認

$ node -v

v12.16.2

インストールしたバージョン情報が表示されていれば、Node.jsのインストール完了です。また、nodenvを使ってインストールしたバージョンの一覧は、「nodenv versions」で確認ができます。「*」のついているバージョン番号が、現在使用しているバージョンです。

複数のバージョンを切り替える(macOS)

使用するバージョンを切り替えるときは、切り替えたいバージョンをインストール後、「nodenv global」を使用します。また、特定のディレクトリのみ指定したバージョンを使用する場合は、該当ディレクトリに移動し、「nodenv local」を使用します。

// 別のバージョンをインストールする

$ nodeny install 13.0.0

// システム全体で使えるように設定する

$ nodenv global 13.0.0

特定のディレクトリのみでバージョン切り替え

// 別のバージョンをインストールする

$ nodenv install 13.0.0

//特定のディレクトリへ移動

$cd mdn

// 特定のディレクトリのみ、13.0.0 を有効化する

$ nodenv local 13.0.0

パッケージマネージャー　npm

Node.jsで動作するように作られたものには、Sass (node-sass)やGulpなど、数多くのツールやライブラリが存在します。それらのインストールやアップデート、バージョン情報などを含めて管理するパッケージマネージャーのことをnpm (Node Package Manager)といいます。

npmで公開されているパッケージを検索できます。

あわせて読みたい

npm

npmはNode.jsと一緒にインストールされ、インストール後は、npmコマンドが利用できるようになります。このコマンドを利用してnpm上に存在するさまざまなパッケージを追加できます。

Node.jsがインストールされていれば、npmコマンドが使用できる

$ npm –version

6.14.4

パッケージをインストールするときは、「npm install」コマンドを使用します。インストール方法には、グローバルインストールとローカルインストールといった2つのインストール方法があります。

Sassのローカルインストールとグローバルインストール

//ローカルインストール

$ npm install sass

//グローバルインストール

$ npm install -g sass

グローバルインストールは、システム全体で使う場合に使用し、パッケージはシステム側のディレクトリに格納されます。ローカルインストールの場合は、コマンドを実行したディレクトリ内に「node_modules」ディレクトリが作成されこちらにパッケージが格納され、ディレクトリ内のみで使用できるようになります。

インストールされたパッケージは、パッケージ名でのコマンド利用か、ローカルインストールであれば「npx」コマンドを使って実行可能です。

npxコマンドは、npmのバージョン5.2以降で使えるコマンドです。従来までは、ローカルインストールされたライブラリのコマンドを実行する場合、Gulpであれば 「node_modules/gulp/bin/

gulp.js」と入力する必要がありましたが、npxコマンドを使えば実態ファイルの指定を省略して実行できます。

Sassのローカルインストールとグローバルインストールでのコマンド使用例

// グローバルインストールしたパッケージの利用

$ sass –version

//ローカルインストールしたパッケージの利用

$ npx sass –version

グローバルインストールした場合は、システム全体で共通のバージョンとなるため、ディレクトリによってバージョンを変える必要があれば、ローカルインストールを利用しましょう。

インストールしたパッケージを管理する

npmを使ってローカルインストールしたパッケージ情報は、「package.json」ファイルで管理することが可能です。package.jsonは、そのディレクトリ内で使用する複数のパッケージ情報(名称、バージョン番号など)をJSON形式でリスト管理できるファイルです。package.jsonを新規作成するには、「npm init」コマンドを使用します:34:35。

「npm init」コマンド

$ npm init -y

オプション「-」をつけることで、package.jsonに設定する名称、作成者、ライセンスなどの初期設定をコマンドライン上で設定していく行程を省略できます。これらは必要に応じて設定しましょう。

パッケージを公開せずにローカルのみなどの開発で使用するのであれば、

「”private”: true」をpackage.jsonに設定しましょう。

初生成されたpackage.json

{

"name": "myproject",

"version": "1.0.0",

"description":

"main": "index.js",

"scripts": {

開発環境の構築

"test": "echo \"Error: notest specified\" && exit 1"

},

"keywords": [],

"author":"",

"license": "ISC"

}

package.jsonに、追加したパッケージ情報を追記するためには、パッケージインストール時にオプションの「–save」か、「–save-dev」を使用します。「–save」は、jQueryなどサイト上で使用するパッケージのインストール時に使用し、package.jsonのdependenciesに追加されます。「–save-dev」はGulpなどのタスクランナーのような開発時のみに使用するパッケージのインストールに使用し、devDependenciesに追加されます。

dependenciesにインストールする

dependenciesにインストールする場合は、「–save」もしくは省略形の

「-S」を設定します。

 jQueryをインストールする

// –save

$ npm install jquery –save

// 省略形の「-S」でも実行可能

$ npm install jquery -S

dependenciesにjQueryとバージョン情報が追加される

{

“name”: “myproject”,

~~~~省略

~

“dependencies”: {

“jquery”:”03.5.0″

}

}

devDependenciesにインストールする

devDependenciesにインストールする場合は、「–save-dev」もしくは省略形の「-D」を設定します。

gulpをインストールする

// –save-dev

$ npm install gulp –save-dev

// 省略形の「-D」でも実行可能

$ npm install gulp -D

devDependenciesにGulpとバージョン情報が追加される

{

“name”: “myproject”,

省略

~~~

“devDependencies”: {

“gulp”: “^4.0.2”

}

}

このpackage.jsonがあるディレクトリで、「npm install」を行うと、個別のパッケージ名を入力しなくても、package.jsonに記載されているパッケージの一括インストールが可能です。

パッケージの一括インストール

$ npm install

package.jsonを使用することで、複数人での開発においても、使用するパッケージのバージョンを揃えて開発を行えるようになるので、積極的に利用するようにしましょう。次項では、Gulpを導入する手順において、このpackage.jsonを使用していきます。

Web開発の作業を自動化する Gulpを導入する

Webサイト制作時には、SassやJavaScriptの変換や圧縮、画像ファイルの軽量化など、さまざまな作業が必要となります。これらの作業を自動化するツールの1つであるGulpについて、その仕組みと導入方法、実際の設定方法について学びましょう。

Gulpとは?

Gulpは、Node.js上で動作するビルドシステムの1つで、タスクランナーとも呼ばれています。例えば、Sassのコンパイルを1つのタスクとして設定ファイルに記述しておけば、「gulp」コマンドを利用するだけで実行可能になり、JavaScriptの圧縮や画像ファイルの軽量化など複数のタスクも設定できます。

同じような自動化ツールにはGruntがありますが、GulpはGruntよりも実行速度が速く、設定ファイルもJavaScriptで記述できることから、現在は主要なビルドツールとして利用されております。

Gulpを実行するディレクトリ構成

まずは、 Gulpを動作させてビルドを行うディレクトリを作成します。

ここでは、ディレクトリ名を「myproject」としてホームディレクトリに作成します。myproject内には、Sassファイルなど変換の元となるファイルを格納する「src」ディレクトリと、変換されたファイルを格納する「dist」ディレクトリを作成します。

自動化したい作業に対してどのようなディレクトリ構成が最適なのかは、実行したいタスクやプロジェクトによって異なります。基本的には入力するディレクトリと結果を出力するディレクトリ

がある構成は変わりませんので、わかりやすいディレクトリ構成で作成してください。

ディレクトリ構成

myproject

Ldist

L src

作成後、コマンドラインツールを起動して、myprojectディレクトリへ移動します。

myprojectディレクトリへ移動

$ cd myproject

これ以降の作業は、myprojectディレクトリ以下でコマンド入力やフイル作成を行います。

package.jsonを作成する

次に、このディレクトリ内で使用するパッケージを記載するpackage.jsonを作成するため、「npm init」コマンドを実行してください。

「npm init」コマンドを実行すると、myprojectディレクトリ以下に、package.jsonファイルが初期設定のまま新規作成されます。

設定内容は必要に応じて変更してください。

package.jsonの作成

$npminit -y

package.jsonが生成される

myproject

dist

package.json

src

生成されたpackage.json

{

“name”: “myproject”,

“version”: “1.0.0”,

“description”:””

“main”: “index.js”,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1″

},

“keywords”: [],

“author”:””

“license”: “ISC”

}

Gulpのインストール

Gulpはプロジェクトごとにバージョンの異なるケースが多いため、ローカルインストールします。次のnpmコマンドを実行します。

生成されたpackage.json

$ npm install gulp –save-dev

package.jsonにGulpの情報が追記され、ライブラリ本体を格納する!「node_modules」ディレクトリと、初期インストール実行時におけるライブラリのバージョン情報を記載した「package-lock.json」が自動で作成されます。これで、このpackage.jsonがあるプロジェクトにおいては、gulp 4.0.2がインストールされるようになりました。node_modulesディレクトリは、関連するパッケージがすべて保存されます。

そのため、ディレクトリ内の容量が大きくなることから、ほかの開発者と共有する場合やGitなどで管理する場合は、除外して共有を行います。共有された開発者は「npm install を実行する

ことで、package.jsonに記載されたパッケージをnode_modulesディレクトリへの再インストールが可能です。

Gulpのバージョン番号が追加されたpackage.json

{

"name": "myproject",

! POINT

"devDependencies": {

"gulp": "^4.0.2"

}

}

npm上のライブラリは常にアップデートされており、別環境でインストールする際には、バージョンが変わっているという可能性もあります。package-lock.jsonがある場合は、まずはこちらのファイルを参照して初期インストール時のバージョンに沿ってインストールを行うため、初回構築時と同一環境で開発を行うことができます。

node_modulesディレクトリとpackage-lock.jsonが追加される

gulpと関連ライブラリが追加され、初期インストール時のモジュールのバージョン情報が記載されます。

myproject

dist

node_modules

package.json

package-lock.json

src

タスクを設定するgulpfile.js

Gulpのタスク設定は、「gulpfile.js」にJavaScriptを使って記述します。myprojectディレクトリ以下に空ファイルで「gulpfile.js」を作成します。

gulpfile.jsの基本的なタスクを設定する際の流れは次のとおりです。

・npmコマンドで使用するモジュールをインストールする

・gulpfile.js内でインストールしたモジュールの読み込みを行う

・タスクを定義する関数を記述する

・作成した関数を、exportsを使ってモジュール化する

また、設定ファイルの基本的な構成は次のようになります。

 タスク設定ファイルの構成サンプル

//gulpを読み込む

var gulp = require(‘gulp’);

// タスクAの関数

function taskA() {

}

//タスクBを関数

function taskB() {

}

// 「gulptaskA」コマンドで単体タスク実行できるようにする

exports.taskA = taskA

// 「gulp」コマンドで taskA と taskBを並列実行する

exports.default = gulp.parallel(‘taskA’, ‘taskB’);

Sassのコンパイルを行う

実際にSassをコンパイルするタスクを作成しながら、設定ファイルのです

書き方について学んでいきます。srcディレクトリ以下にSCSSファイルを格納する「scss」ディレクトリを作成し、コンパイル元となる「style.scss」ファイルを配置します。

style.scss

$primary-color: #333;

body {

color: $primary-color;

}

•gradient {

background:ラインar-gradient(90deg, #000000 0%, #ffffff 100%);

}

.grid {

display: grid;

}

ディレクトリ構成

myproject

dist

gulpfile.js

node_modules

package.json

package-lock.json

src

L  scss ←scssディレクトリを新規作成

L  style.scss ← 新規作成

モジュールを読み込む

タスクで利用するモジュールを読み込み、変数宣言を行います。

Sassのコンパイルには「gulp-sass」と「node-sass」モジュールを使用するので、npmコマンドで追加します。

モジュールの追加

$ npm install node-sass gulp-sass –save-dev

モジュールのインストールが完了したら、gulpfile.jsにrequire()を使って、モジュールを読み込みます。gulpfile.jsを開いて読み込み設定を追記します。

gulpfile.jsでモジュールの読み込みを記述する

var gulp require(‘gulp’);

var sass = require(‘gulp-sass’);

sass.compiler = require(‘node-sass’);

sass.compilerでは、Sassのコンパイルで利用するモジュールを指定します。本項では、LibSass製のnode-sassを使用します。

タスクを定義する関数を作成する

基本的には、1つのタスクに対して1つ関数を作成します。ここでは、関数名を「cssTranspile」としました。

Sassのコンパイルタスクを追記する

function cssTranspile( ) {

return gulp.src(“src/scss/**/*.scss’)

.pipe (sass())

.on(‘error’, sass. logError)

pipe (gulp.dest(‘dist/css/’))

}]

gulp.srcで設定した入カソースに対して、「 . 」で連結し、pipe( )を使って実行処理を加えていく形になります。コンパイルが正しく行われたかとうかの判定をキャッチするために「on( )」を使用してエラーハンドリングを行うことも可能で、最終的にはgulp.destを使って処理結果を出力するディレクトリパスを指定します。また、最初に記述した「return」によって、関数実行時にこの一連の処理結果を返すようになっています。

次に、Sassのファイル更新があるかどうかを監視する関数を作成します。

ファイル監視タスクを追記する

function watch(done) {

gulp.watch([‘src/scss/* ‘, ‘ src/scss/**/*’], cssTranspile);

done( );

}

gulp.watchを利用して、監視するパスを指定します。第2引数に、監視対象となってるファイルに変更があった場合、何のタスクを実行するかを記述します。done( )はコールバック関数で、この関数を実行することで、タスクの実行が完了したことを明示化しています。

タスクを定義する関数のルールでは、関数を実行した際に何かしらの結果を返す必要があります。基本的にはSassやJavaScriptのように入力ソースを元に変換処理を行ってデータを返すものに関しては、returnを使用し、watchやBrowsersyncなど実行したものが継続されるものに関しては、コールバック関数を利用します。

タスクを定義した関数をモジュール化する

作成した関数をモジュール化するためには、exportsオブジェクトに関数を設定します。exportsは、関数やオブジェクトなどをエクスポートして外部からモジュール利用できるようにするものです。タスクを定義した関数を設定することで、gulpコマンドを使ってタスクを実行できるようになります。

exports.defaultを追記する

exports.default = watch;

「exports.default」に、watchタスクを設定しました。defaultに設定すると、「gulp」とコマンドを打った際にデフォルトで実行されるタスクを設定できます。watchタスクが実行されれば、ファイルの監視がスタートし、変更があればwatch関数内で設定したcssTranspileタスクが実行されます。

複数のタスクをexportsオブジェクトに設定する

exportsに複数のタスクを設定する場合は、そのタスクを同期的に処理するか、非同期に処理するかを明示する必要があります。 同期処理であれば「gulp.series」、非同期処理であれば「gulp.parallel」を使用します。

同期処理では、1つのタスクの実行完了をまって次のタスクを実行します。非同期処理では、タスクの実行が並列に行われます。SassやJavaScriptの変換などであれば非同期処理で行えば、並行して変換処理されるため全体の完了速度も速くなります。最初にdistディレクトリ内のファイルを削除してから何かを行うといった場合は、同期処理を使用します。

同期処理と非同期処理の設定

//同期処理

exports.default= gulp.series(‘taskA’, ‘taskB’);

// 非同期処理

exports.default =gulp.parallel(‘taskA’, ‘taskB’);

Gulpの実行

gulpfile.jsに記述した内容の全体コード

gulpfile.js

var gulp = require(‘gulp’);

var sass = require(‘gulp-sass’);

sass.compiler = require(‘node-sass’);

function cssTranspile( ) {

return gulp.src(‘src/scss/**/*.scss’)

.pipe (sass())

.on(‘error’, sass. logError)

.pipe (gulp.dest(‘dist/css/’))

}

function watch(done) {

gulp.watch([‘src/scss/*’, ‘src/scss/**/*’], cssTranspile);

done();

}

exports.default =watch;

ローカルインストールしたgulpを「npx」コマンドを利用して実行しましょう。

gulpの実行

$ npx gulp

gulpコマンドが実行されたことで、監視タスクが実行されます。

$ npx gulp

[12:49:06] Using gulpfile -/myproject/gulpfile.js

[ 12:49:06] Starting ‘default’ …

[12:49:06] Finished ‘default’ after 8.7 ms

SCSSファイルの変換を実行するために、「style.scss」を編集して保存します。ここではbodyに「ライン-height: 1.5;」を追記しました。

style.scssleライン-heighttierを追記

body {

color: $primary-color;

ライン-height: 1.5;

}

ファイルを保存すると、変更をキャッチしたwatchタスクによって、cssTranspileタスクが実行されます。

cssTranspileタスクの実行

[12:49:19] Starting ‘cssTranspile’…

[12:49:19] Finished ‘cssTranspile’ after 14 ms

cssTranspileタスクによって、distディレクトリ以下に、CSSディレクトリとstyle.cssファイルが生成されます。

実行後のディレクトリ構成

myproject

dist

  L  css

      L  style.css

gulpfile.js

 node_modules

 package.json

 package-lock.json

src

scss

L  style.scss

style.scss

body {

color: #333;

ライン-height: 1.5; }

gradient {

background: ラインar-gradient(90deg, #000000 0%, #ffffff 100%);|

}

.grid {

display: grid; }

gulpの監視を終了する場合は、「Ctrl + C」を押すことで停止させることができます。

以上が、Gulpにおける基本的な設定と実行の流れです。ディレクトリ設計や設定ファイルの作成など初期設定に時間がかかるものの、一度作成してしまえばさまざまなプロジェクトで汎用的に利用できます。

次にGulpで利用できる、便利なプラグインの設定方法を紹介します。

Gulpプラグインを利用して作業を効率化する

Gulpにはさまざまなプラグインを追加できます。普段から手動で行っている作業もGulpを使って自動化することで、Webサイト制作の効率化や品質向上につながります。

作成するGulpの設定では「gulp」コマンドを実行すると、ファイルの監視とローカルサーバーを起動し、SCSSファイルの変換・圧縮、JSファイルの圧縮、画

像ファイルの圧縮を行うものとなります。

Gulpを実行するディレクトリの準備

下記のGulpのタスク設定を行っていきます。

・エラーのデスクトップ通知

・複数のSCSSファイルの読み込み記述を簡略化する

・ベンダープレフィックスの自動付与を行う

・cssの圧縮

・ JavaScriptの圧縮

・画像ファイルの圧縮

・ローカルサーバーを立ち上げ、ファイル更新時のオートリロードに対応

ディレクトリの全体構造

myproject

dist

css

img

js

gulpfile.js

package.json

package-lock.json

src

L  index.html

L  js

　　Lscript.js

L  scss

      L  components/_button.scss

      L   style.scss

エラーのデスクトップ通知

Gulpのwatchを実行中にコンパイルなどのエラーが出た場合は、Gulpが強制停止し、コマンドラインツール上にメッセージが表示されます。

エラーのたびに停止するのは開発効率が悪く、さらにエラーはコマンドラインツールを見ていないと気づきません。そこで、Gulpを強制停止させないための「gulp-plumber」とデスクトップ通知を行う「gulp-notify」を追加します。

まずは使用するモジュールをインストールします:2。

モジュールのインストール

$ npm install gulp-plumber gulp-notify –save-dev

次に、gulpfile.jsでモジュールを読み込みます。

//モジュールの読み込み

require(‘gulp-plumber’);

var notify = require(‘gulp-notify’);

on( )で記述していたエラーログの表示部分を書き換えます。

//変更前

function cssTranspile() {

return gulp.src(‘src/scss/**/*.scss’)

.on(‘error’, sass.logError)

//変更後

function cssTranspile() {

return gulp.src(‘src/scss/**/*.scss’)

.pipe (plumber({

errorHandler: notify.onError(‘<%= error.message %>’),

}))

これで、SCSSファイル内で記述ミスがある場合はエラーがデスクトップ通知されるようになりました。

複数のSCSSファイルの読み込み記述を簡略化する

1つのSCSSファイル内に、別のSCSSファイルを読み込むためには「@import」を使って、個別にファイル名を指定する必要があります。

 @importを使ったSCSSファイルの読み込み

@import “components/_button”;

@import “components/_dialog”;

@import “components/_media”;

@import “project/_article”;

@import “project/_comments”;

@import “utility/_align”;

@import “utility/_clearfix”;

@import “utility/_margin”;

SCSSファイルが増えるたびに追記しなければならないため、非常に手間がかかります。Gulpプラグインの「gulp-sass-glob」を利用すれば、ワイルドカードによって記述を省略できます。

gulp-sass-globを使うことで、ディレクトリごとに読み込み設定できる

@import “components/**”;

@import “project/**”;

@import “utility/**”;

まずは使用するモジュールをインストールします。

$ npm install gulp-sass-glob –save-dev

次に、gulpfile.jsでモジュールを読み込みます

var sassGlob=require(‘gulp-sass-glob’);

最後に、cssTranspile関数にプラグインの処理を、Sassのコンパイル設定の前に追記します。

gulp-sass-globの処理を追加する

function cssTranspile() {

return gulp.src(‘src/scss/**/*.scss’)

.pipe (sassGlob())

.pipe (sass())

}

これで、ワイルドカードを利用したインポート記述が可能となりました。「myproject/src/scss」ディレクトリにある「style.scss」の記述を変更します。

style.scssの記述変更

変更前

@import “components/button”;

@import “components/gradient”;

@import “components/grid”;

変更後

@import “components/**”;

PostCSSで使用してCSSに処理を加える

PostCSSは生成されたCSSに対して、さまざまな処理を加えることができるNode.js製のツールです。Webブラウザごとのベンダープレフィックスを付与する「Autoprefixer」、CSSを圧縮する「cssnano」、CSSリンターの「stylelint」などがあります。ここでは、Autoprefixerとcssnanoの導入方法を紹介します。

まずは使用する「autoprefixer」、「gulp-postcss」、「cssnano」をインス

トールします。

「autoprefixer」、「gulp-postcss」、「cssnano」のインストール

$ npm install autoprefixer gulp-postcss cssnano –save-dev

次に、gulpfile.jsでモジュールを読み込みます。

var postcss = require(‘gulp-postcss’);

var autoprefixer = require(‘autoprefixer’);

var cssnano = require(‘cssnano’);

cssTranspile関数に処理を追記します。PostCSSは、CSSに対して処理を行うため、Sassのコンパイル設定の後に追加します。PostCSSの関数ではオプションで、それぞれのプラグインの設定を行うことができます。ここでは、Autoprefixerで gridにもベンダープレフィックスをつけるようにし、cssnanoのAutoprefixerを削除する動作を無効化しています。

function cssTranspile( ) {

return gulp.src(‘src/scss/**/*.scss’)

.pipe (sass())

.pipe (postcss([

autoprefixer({

grid: true,

}),

cssnano({

autoprefixer: false,

}),

]))

タスクが実行されると、出力されたCSSファイルにベンダープレフィックスが付与され、cssファイルが圧縮された状態で生成されます。

JavaScriptの圧縮

JavaScriptを圧縮するには、「gulp-uglity」を使用します。

まずはモジュールのインストールを行います。

$ npm install gulp-uglify –save-dev

次に、モジュールの読み込みを行います。

モジュールの読み込み

var uglify = require(‘gulp-uglify’);

JavaScriptを圧縮するためのタスクを、新規にjsTranspileという関数

名で作成します。

 jsTranspile関数の作成

function jsTranspile( ) {

return gulp.src(‘src/js/**/*.js’)

.pipe (plumber({

errorHandler: notify.onError(‘<%= error.message %>’),

}))

.pipe (uglify())

.pipe (gulp.dest(‘dist/js/’));

}

JavaScriptファイルの変更を監視し、変更があった場合実行するよう

に、watchタスクに登録します。

watchタスクへ登録

function watch(done) {

gulp.watch([‘src/scss/*’, ‘src/scss/**/*’], cssTranspile);

gulp.watch([‘src/js/*’, ‘src/js/**/*’], jsTranspile);

done( );

}

画像の圧縮を行う

画像を圧縮するには、「gulp-imagemin」を使用し、jpg、png、gif、svgといった拡張子を対象に圧縮かけるため、各種プラグインを追加します。

まずは各モジュールのインストールを行います。

モジュールのインストール

$ npm install gulp-imagemin imagemin-jpegtran imagemin-pngquant –save-dev

次に、インストールしたモジュールを読み込みます。

モジュールの読み込み

var imagemin = require(‘gulp-imagemin’);

var imageminJpegtran = require(‘imagemin-jpegtran’);

var pngquant = require(‘imagemin-pngquant’);

画像を圧縮するタスクを、imageMinityという関数名で作成します20。

Gulp 4で実装された「gulp.lastRun」を利用することで、画像に変更が

あった場合のみ実行するようにしています。

function imageMinify() {

return gulp.src(‘src/img/**/*’, { since: gulp.lastRun(imageMinify) })

.pipe (plumber({

errorHandler: notify.onError(‘<%= error.message %>’),

}))

.pipe (imagemin([

imagemin.gifsicle({

optimizationLevel: 3,

}),

pngquant({

quality: [ 0.65, 0.8 ], speed: 1

}),

imageminJpegtran({

progressive: true,

}),

imagemin.svgo({

plugins: [

{

removeViewBox: false,

}

] 1

})

]))

.pipe (gulp.dest(‘dist/img/’));

}

画像ファイルの変更を監視し、変更があった場合は実行するように、watchタスクに登録します。

watchタスクへ登録

function watch(done) {

gulp.watch([‘src/scss/*’, ‘src/scss/**/*’], cssTranspile);

gulp.watch([‘src/js/*’, ‘src/js/**/*’], jsTranspile);

gulp.watch([‘src/img/*’, ‘src/img/**/*’], imageMinify);

done();

}

これで画像を更新・追加した場合に圧縮が実行されるようになりました。ただし、このままでは画像をsrcディレクトリから削除した場合、distディレクトリに生成済みの画像を削除することができません。そのため、一度distディレクトリ内の画像を削除し、再圧縮するタスクを作成します。

まずはファイルやディレクトリを削除するモジュールを追加します

$ npm install del –save-dev

次に、delモジュールを読み込みます。

var del = require(‘del’);

削除を行うcleanlmage関数を作成します。

function cleanImage( )

return del([‘dist/img/’]);

}

cleanlimageタスクを実行後に、imageMinifyタスクを実行するため、

exportsにimageminを登録し、それぞれのタスクをgulp.seriesに設定し

ます。

//タスクの設定

exports.imagemin = gulp.series (clean Image, imageWinify);

( , );

これで、gulpコマンドでimageminの実行ができるようになりました。

コマンドを実行すると、dist以下のimgディレクトリの画像が再圧縮され配置されます。

$ npx gulp imagemin

Browsersyncを使ってブラウザのオートリロードを行う

Browsersyncは、ファイルの監視を行い、更新された場合に自動でブラウザのリロードなどを行ってくれるツールです。まずは、Browsersyncをインストールします。

Browsersyncを実行すると、簡易的なローカルサーバーが起動します。起動されたURLにアクセスすれば、PC、タブレット、モバイルで動作確認を行うことができ、複数の環境で操作の同期が

可能となります。

Browsersyncのインストール

$ npm install browser-sync –save-dev

次に、gulpfile.jsでモジュールを読み込みます。

モジュールの読み込み

var browser Sync = require(“browser-sync”);

Browsersyncのタスクの設定を追記します。

function server(done) {

browser Sync.init({

server: {

baseDir: ‘src’,

},

});

done();

}

SCSSファイル、JSファイル、画像ファイルに更新があったらブラウザをオートリロードする設定を各タスクに追記します。

また、gulpコマンド実行時に、Browsersyncを定義したserverタスクが実行されるようにします。

オートリロードの設定追加

function cssTranspile( ) {

return gulp.src(‘src/scss/**/*.scss’)

//省略

.pipe (gulp.dest(‘dist/css/’))

.pipe (browserSync.reload({ stream: true }));

}

function jsTranspile() {

return gulp.src(‘src/js/**/*.js’)

//省略

.pipe (gulp.dest(‘dist/js/’))

.pipe (browserSync.reload({ stream: true }));

}

function imageMinify() {

return gulp.src(‘src/img/**/*’, { since: gulp.lastRun(imageMinify) })

//省略

.pipe (gulp.dest(‘dist/img/’))

.pipe (browserSync.reload({ stream: true }));

}

serverタスクの設定

exports.default = gulp.parallel(server, watch);

設定はこれで完了です。gulpコマンドを実行して、ブラウザが起動するか確認してください。

gulpコマンドの実行

$ npx gulp

その他のGulpプラグイン

これまで紹介したプラグインは、数多く存在するプラグインの一部になります。例えば、HTMLの拡張メタ言語にあたる「pug」や「ejs」を変換するプラグインもあれば、HTML・JS・CSSを自動で整形するもの、SpriteCSSを生成するプラグインなどもあります。自分の制作するサイトによって最適化なGulp環境は異なるため、定期的にプラグインや設定環境を見直していきましょう。

Webサーバーとドメインについて

Webサイトを公開するためには、作成したデータ (HTMLやCSS)やプログラムを

Webサーバーに設置して、ドメインを設定する必要があります。ここでは、Webサーバーの種類とドメインについて解説します。

Webサーバーの特徴と種類

Webサーバーとは、インターネット上からアクセスできるようにネットワーク設定を行ったコンピューター内に、公開するHTMLやCSS、画像データなどを設置しておき、Webブラウザのリクエストに応じて設置したデータを送信するソフトウェア (ApacheやNginxなど)をインストールしたシステムのことをいいます。

ホスティング会社が提供するサーバーサービスには大きく分けて下記の4つの種類があります。

Webサーバー自体を1から構築することも可能ですが、初期設定からセキュリティやメンテナンスなど専門的な知識や技術が求められるため、多くの場合は、構築・管理・運用を任せられるホスティング会社のサーバーを契約して利用します。

共有サーバー

●専用サーバー

VPS (Virtual Private Server)

●クラウドサーバー

どのサーバーを利用するかは、Webサイトの仕様に合わせて選択する

必要があり、それぞれの違いを理解する必要があります。

共有サーバー

共有サーバーは、1台のサーバーを複数の利用者で共有して利用するサーバーのことをいいます。利用者ごとに割り当てられた各ディレクトリ内へファイルの追加、変更権限が与えられており、HTMLやCSSなどのデータをFTP (S) クライアントソフトを用いてアップロードします。サーバーのスペックやインストールされているソフトウェアは固定のため自由に変更することはできませんが、ホスティング会社がサーバーの管理・保守をしてくれるため、専門知識がなくても利用できます。また、月額費用は数百円から数千円程度で非常にコストを抑えることができるのて、個人利用からコーポレートサイトなど中小規模のサイトに適しています。ただし、1台のサーバーを共有で利用するため、他ユーザーの負荷を受けやすく、サイトの表示が遅くなることもあります。

Webサーバーの選び方

Webサーバーは、通常のコンピューターと同様に、基本的にはスペックが高ければ、処理が高速となり大人数のアクセスにも耐えられるようになります。安価な共用サーバーを借りて公開してみたら表示が重かった、プログラムが動かなかったということもあります。しかし、アクセス数がそこまで多くなく、システムも利用しないのに高スペックのサーバーを利用してもオーバースペックとなることもあります。公開するサイトのアクセス数はどのくらい見込んでいるのか、どのようなシステムを導入するのかなときちんとサイトの仕様を把握し、今後のビジネス展開やサイトの方向性に沿ったホスティングサービスを選ぶのが重要となります。

自由度の高いクラウドサーバーやVPSに関しては、サーバー事業者と同様の知識と経験が必要となります。例えば、インストール済みのソフトウェアのアップデート、セキュリティパッチの適応や不正アクセス対策、監視体制、障害発生時の対応、サーバーのバックアップといった日々の管理・運用作業が重要となります。クライアント案件などで脆弱性があった場合は、顧客のデータ流出にもなりかねません。サーバーの初期構築はもちろん、運用時についてもしっかりとした体制作りをしましょう。

エックスサーバーが価格・機能・安全面からも人気があります。

ドメインについて

Webサイトにアクセスするためには、Webサーバーに対してドメインを設定する必要があります住所に重複するものがないのと同じで、ドメインも世界中で重複しないように、組織的に管理されています。

ドメインは、インターネット上におけるWebサイトの「住所」のようなもので、

ユーザーはこのドメインを含んだURLにアクセスすることで閲覧可能となりま

す。

 URLに含まれるドメイン

MdNDesignInteractiveWeb

デザインってオモシロイ -MdN Design Interactive- エムディエヌ・デザイン・インタラクティブは、デザインの面白みやデザインする楽しさを伝えるニュースサイトです。デザインをキーワードに、国内外の最新ニュースやデザイ...

プロトコル　https:

ホスト名　www

ドメイン名　mdn.co.jp

もともと、インターネットに接続されたサーバーなどの機器は、その機器がネットワーク上のどこにあるかを識別するために、「172.104.XXX.XXX」といった数字で構成された「IPアドレス」がそれぞれ割り当てられています。

コンピューターはこのIPアドレスを元に通信を行いますが、数字だけのアドレスを人間が識別するのはわかりにくいため、IPアドレスを英数字や日本語に変換したドメイン名が使用されています。

ドメイン名とIPアドレスを紐づけ、ドメインでアクセスした際にIPアドレスへ変換する仕組みを「名前解決」といい、これを管理するシステムを「DNS (Domain Name System)」といいます。また、ドメイン名とIPアドレスを紐づけした情報を保存しているデータベースサーバーを「DNSサーバー」といい、ユーザーはこれらを取り扱うDNSサービス会社と契約することで、ドメインの取得およびドメインとWebサーバーの設定が可能となります。

ドメイン名の種類

ドメイン名は、「.(ドット)」区切りの名称(ラベル)で構成されており、ホスト名や組織、国名をラベル別に識別できます。ドメイン名の末尾のラベルをトップレベルドメイン (TLD)、以降左へ順に、セカンドレベルドメイン (SLD)、サードレベルドメインといいます。ユーザーがドメインを取得する際には、サードレベルドメインにあたる組織のドメイン名を自分で決め、TLDとSLDに空きがあるかをドメイン管理会社で検索して申請・取得します。また、ドメインを取得すると「www」のホスト名にあたる部分に、「books.mdn.co.jp」といったようなドメイン内を分類

化するサブドメインを設定できるようになります。ドメイン名の種類によっては金額や意味合いも異なるため、Webサイトの内容に合わせたドメインを取得してください。

TLDには、汎用的な用途に応じたgTLD

(Generic Top Level Domain)「.com/.net/.org/info」や国名や地域コードを表したccTLD(CountryCode Top Level Domain) 0 [.jp/.uk/.fr」などがあります。gTLDは誰でも

取得できますが、ccTLDはその国や地域に住所がなければ取得できません。

「.jp」ドメインでは、属性型・地域型JPドメイン名、都道府県型JPドメイン名、汎用JPドメイン名の3つに分類されたSLDを取得できます。

これは日本国内の組織に対する種別化を表すもので、例えば、株式会社のサイトで利用される「.co.jp」や学校法人を表す「ac.jp」、政府機関の「go.jp」などがあります。これらは、組織が実する証明書を出す必要がありますが、特に組織を差別化する必要がなければ汎用ドメイン名として「example.jp」という形での取得も可能です。

Webサイトのデータをサーバーに送受信する仕組み

Webサイトを公開するためには、Webサーバーにデータを転送する必要があります。

転送方法には、GUIのFTPクライアントツールを使う方法とCUIでコマンドを使った

転送方法があります。本節では、その仕組みとツールの設定について解説します。

データをWebサーバーに転送する通信方法

FTP(File Transfer Protocol)は、Webサーバーとクライアント間でデータを送受信する通信方法のことをいいます。

データをWebサーバーにアップロードするためには、FTPクライアントと呼ばれるアプリケーションを使用しますが、これらのアプリケーションはFTPの通信方法に基づいてファイルのやり取りを行っています。

 FTPによるデータの送受信

ホスティングサービスからWebサーバーを借りた場合は、サーバーアドレス(ホスト名)、ユーザー名、パスワードなどの接続情報が発行されるため、これらをFTPクライアントに設定することで、Webサーバーに接続が可能となります。

ただし、FTPではユーザー名・パスワードなどの情報が暗号化されないため、第三者から情報を盗まれるセキュリティ的な問題があります。

そのため、現在はFTPをSSL/TLSで保護したFTPSや、SSHを利用したSFTPといった通信方法の利用が推奨されています。

FTPSとSFTPが使えるかはホスティングサービスによって違いがあるため、より安全に公開・運用を行うためにもこれらが使用できるサービスを選択するようにしてください。

FTPクライアントの種類

FTPクライアントには、無料で使えるものや有料で購入が必要なもの、Windows/macOSの両方で使えるものやOS限定になるものなどさまざまなアプリケーションが存在します。前述したFTPSやSFTPへの対応、初期設定の容易さや操作性など実際に使用する際の利便性が大きく

変わるため、無料のFTPクライアントだけでなく有料のFTPクライアントも視野に入れて検討するのをおすすめします。

本節では、WindowsとmacOSの両方で使用でき、FTP、FTPS、SFTP

にも対応した「Filezilla」を使った設定方法を解説します。

FileZillaのインストール

まずは、FileZillaをダウンロードするために、公式サイト(https://filezilla-project.org/)にアクセスします。FileZillaは、FTPクライアントの「FileZilla Client」とWindows向けのFTPサーバー「FileZilla Server」の2つが配布されていますが、今回は「FileZilla Client」を使用します。

トップページの「Quick download links」で「Download FileZilla Client」ボタンをクリックしてアプリケーションをダウンロードし、インストールしてFileZillaを起動しましょ)。

●ユーザー名

●パスワード

●プロトコル

●ホスト(サーバーアドレス)

●ボート番号

ユーザー名とパスワードに関しては、ホスティングサービス契約時に発行されるFTPのユーザー名とパスワードを設定します。

プロトコルは、FTPクライアントで利用できる通信方法の種類を選択します。FileZillaでは、FTPとSFTPを選択することができ、FTPSを利用する際は、暗号化で「使用可能なら明示的なFTP Over TLSを使用」(デフォルト)を選択することで利用できます。

ホストは、接続先のWebサーバーのホスト名を入力します。ホスティングサービスによってはIPアドレスを指定されることもあります。

ポート番号は、FileZillaでは、プロトコルに合わせてデフォルトのポート番号が自動で設定されます。FTPであれば通常「21」、SFTPであれば「22」

がデフォルトとなっています。ただし、セキュリティ的な事情によりWebサーバーによってポート番号を変更されている場合もあるため、Webサーバー情報に合わせて設定してください。

SFTPにおける公開鍵認証

制作案件においては、FTPやFTPSでのアクセスが許可されておらず、かつ、SFTPでの接続時にパスワードを使用せずに、よりセキュリティ的に安全な公開鍵認証という仕組みを使って接続する場合があります。

公開鍵認証は、「公開鍵」と「秘密鍵」をユーザーのPCで作成し、「秘密鍵」はユーザーのPC上のみに保存し、「公開鍵」をWebサーバーに設置するこで接続できるようになる仕組みです。「公開鍵」は中身を誰かに見られとしても「秘密鍵」がなければ接続できず、また、「公開鍵」から「秘密鍵」生成することもできません。そのため、「秘密鍵」は他人に共有や公開しないことが原則となります。

鍵の作成

公開鍵認証の鍵を生成する方法としては、Windowsであれば、ターミナルソフトの「PuTTY」の「PuTTY Key Generator」などを使って生成する方法と、CUI上で「ssh-keygen」コマンドを使用して生成する方法があります。

公開鍵と秘密鍵は、Windowsの場合は「Documents」以下に任意のディレクトリを作成して保存します。macOSの場合は、ホームディレクトリ以下の「.ssh」ディレクトリに生成・保存します。

macOSで「.ssh」ディレクトリを作成する

macOSの場合は、ホームディレクトリ以下に、「.ssh」ディレクトリがあるか確認し、ディレクトリがなければ作成してください。

コマンドラインツールを起動し、mkdirコマンドを使って「.ssh」ディレ

クトリを作成します。

「.ssh」ディレクトリの作成

$ mkdir .ssh

.sshディレクトリは、ユーザーのみ読み書きと実行ができるパーミッション権限に変更しておく必要があります。

パーミッション権限に変更

$ chmod 700 .ssh

これで鍵を保存する準備が整いました。

Windowsで鍵を作成する

「PuTTY」の公式サイト(https://www.putty.org/) ヘアクセスし、ダウンロードページ図8からダウンロードして、インストールしてください。

「Generate」ボタンを押すと、緑色のローディングバーが表示されます。これはマウスの動きで乱数を生成する仕組みのため、マウスをウィンドウ上で適当に動かしてバーを完了させましょう。

生成が完了すると、key情報が表示されます。鍵を使用する際のパスフレーズを設定する場合は、「Key passphrase」に入力します。「Save publickey」で公開鍵を「id_rsa.pub」という名称で保存し、「Save private key」で秘密鍵を「id_rsa.ppk」という名称で保存しましょう。

macOSで鍵を作成する

macOSでは、ターミナル上で「ssh-keygen」コマンドを使用して作成します。

$ ssh-keygen -t rsa -b 2048 -C “your_email@example.com”

your_email@example.comには自身のメールアドレスを指定してください。

ssh-keygenコマンドはWindows でも使用可能です。その場合の入力の流れもmacOSと同様になります。

実行後、鍵の保存先と名称についての確認が表示されます。今回

は変更を行わないため、「Enter」キーを押します。

 鍵の保存先と名称の確認

次に、鍵を使用する際のパスフレーズの設定を求められます。

> Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

設定することで、鍵を使用する際にこのパスフレーズが必要となります。任意の文字列を入力し、再確認でもう一度入力します。パスフレーズを設定しない場合は、そのまま「Enter」キーを2回押します。

パスフレーズの設定

> Enter passphrase (empty for no passphrase): [Type a passphrase]

| > Enter same passphrase again: [Type passphrase again]

↓

your identification has been saved in /Users/user/.ssh/id_rsa.

your public key has been saved in /Users/user/.ssh/id_rsa.pub.

The key fingerprint is:

SHA256:XXXXXXXXXXXXXXXXXXXXXXXXXXX your_email@example.com

The key’s randomart image is:

上記の内容がターミナル上に表示されれば作成完了です。

「id_rsa.pub」が公開鍵となり、「id_rsa」が秘密鍵となります。

公開鍵をWebサーバーに設定する

作成した公開鍵「id_rsa.pub」は、Webサーバーのユーザーディレクトリ以下の「.ssh」ディレクトリにアップロードし、名前を「authorized_keys」に変更して配置します。「.ssh」ディレクトリのパーミッションは、「700」に設定し、「authorized_keys」は「600」に設定します。これらの作業は自身でサーバー設定を行う場合を除いて、基本的にはサーバー担当者に、公開鍵ファイルを送ることで接続設定を依頼する形となります。

複数の公開鍵を設定する場合は、authorized_keysを開いて、すでに設定済みの公開鍵情報の次の行に設定したい公開鍵の内容をコピー&ペーストすることで、それぞれ設定した鍵でログインが可能です。

鍵認証をFTPクライアントに設定する

FileZillaでは、プロトコルをSFTPに設定して、ログオンタイプを「鍵ファイル」にすることで、鍵ファイルの参照が表示されます。作成した「id_rsa」や「id_rsa.ppk」を読み込むことで設定ができるようになります。

ファイルのアップロードとダウンロード

FTPクライアントでは、基本的には、左側のパネルがローカルディレクトリ、右側のパネルがWebサーバー上のディレクトリであるリモートディレクトリになります。アップロードの場合は、左のパネルから右のパネルへドラッグ&ドロップするか、右クリックやメニューからアップ

ロードできます。反対にダウンロードの場合は、右側のパネルから左側のパネルへ同じようにドラッグ&ドロップすることでダウンロードできます。

Webサーバーへの接続情報が正しいか確認する

Webサイトの公開においては、使用するWebサーバーによって接続方法や設定方法が異なるため、自身のPC環境で正しく接続できるか事前に確認しておくことが重要となります。特に制作案件においては、クライアントから貰った情報で接続できず、インフラ会社やディレクション会

社など数社を経由するコミュニケーションの場合、接続の確認連絡だけで数週間かかることもあります。また、鍵認証方式を指定されたものの、

自身で鍵の作成ができないとそもそも接続ができないということになってしまいます。

FTPクライアントを使った公開作業は、Webサイト制作において必須の操作となるため、きちんと理解して対応できるようにしてください。