Development Environments for Web Designers
Development Environments for Web Designers
Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方
本書について
Webサイト構築に用いる技術や制作手法は、Webの閲覧環境の多様化にあわせるかのように大きく様変わりしています。これまで以上に複雑で手間のかかる作業が増え、作業の効率化を図りたくとも新しい技術の導入方法や使い方がわからない…という方も多いかもしれません。そこで、本書は主にWebデザイナーやマークアップ・エンジニア、フロントエンド・エンジニアの方々を対象に、今後も変化し続けるであろうWeb制作手法にも柔軟に対応できるよう、環境構築を通して必要最低限覚えておきたい基礎知識+αを解説するものです。
【重要】本書は昨今のWeb制作環境の時流や欧米の類書に習う形で、Mac OS XにおけるWeb制作環境構築を解説しています(Yosemiteにて検証)。Windows環境については、シェルやRuby、Node.js、Vagrantなどの環境さえ用意できればその多くは本書の記載にあわせて実行可能と考えられますが、ツールによってはWindowsを公式サポートしていないこともあることをあらかじめご了承ください。
※本書は、Leanpubスタイルで完成した章からデータを随時公開する形を取っております。2015年2月1日現在、Chapter 07の内容までが収録されている状態です。未収録の内容については準備ができ次第公開されます(2015年2月第1週に完成予定)。本書執筆中に発生した変更点や誤字脱字、バージョンアップなどに伴い書籍の内容に変更が生じた場合は、随時アップデート版が入手可能です(DRMフリー)。
※初版のChapter 1、Chapter 2〜6(一部抜粋)のサンプルPDF100Pを以下のURLに用意しております。目次の詳細については、こちらのPDFをご確認ください。
---
はじめに
この数年のデバイスの多様化にともなってWeb制作の手法も大きな転換期を迎えようとしています。Webサイトの配信対象が増えると言うことは多くの環境をサポートしていく必要があり、その答えのひとつとしてResponsive Web Designのような手法も登場しました。Web制作の主にフロント側を担当する人たちは、これまで以上に頭で考えることも手を動かすことも増えているのが現状ではないでしょうか。閲覧対象が増えるだけであればまだしも、環境変化の速さに足並みを揃えるかのようにビジネススピードも増すばかりです。
コンピュータが得意な仕事はコンピュータに任せて、人間でしかできないことに注力しなければ終わる仕事も終わりません。数年前からCSSプリプロセッサなどのツールの利用者も増えているようです。しかし、GUIのツールのバージョンアップは既にその流れについていけていないのが現状で、便利な機能を享受したければコマンドラインでの操作は必須です。その一方ではその波に乗り切れない方も多く見受けられ、それらを使える人と使えない人の差が出てきていると感じます。
「自分に合わない、もしくは必要ないから使わない」というのと、「わからない、使えない」というのでは大きな違いがあります。いまどきのWeb制作はフロントエンドとバックエンドの境界線も曖昧になりつつあります。ひとつの仕事は個人だけで完結するものの方が少なく、多くの場合はプログラマやエンジニアの方との協業になるでしょう。そういうところで共通言語ですら話せないのでは仕事はどんどんできる人の方に流れていくかもしれません。
本書はそんなこれからの新しい時代に乗り遅れないようにするため、コマンドライン操作の基本から制作環境の作り方、フロントエンド系のツールのインストールや管理方法などを紹介する書籍です。なにもバリバリとコマンドラインだけを使って制作を進めるわけではありません。作業をスムーズに進めるため、また仕事を早く終わらせるためにも、道具は適材適所で使えるようにした方が良いでしょう。技術やツールの進化によってWebサイト制作はこれまで以上に簡単にもなっているのです。
主にWebのフロントエンドを担当する皆さんは、これまでコマンドラインの操作が難しく感じていた方が多いかもしれません。コマンドライン操作は基本さえできて慣れればさほど難しいものではなく、その基礎ができてしまえばいろいろな場面で応用が効くということに気付いていただけたら。本書がそんな皆さんの一助になれば幸いです。
こもりまさあき
---
変更履歴- 2015.02.01: 誤字脱字の修正。Chapter 7の内容を追加(Ver. 0.4.0)
- 2015.01.15: 誤字脱字の修正。Chapter 5、6の内容を追加(Ver. 0.3.0)
- 2015.01.09: Homebrewのアップデート方法、Chapter 4の内容を追加(Ver. 0.2.0)
- 2015.01.05: 「Early Release」として初版発行(Chapter 1、2、3収録)(Ver. 0.1.0)
---
Leanpubは購入後45日以内であれば「完全返金保証制度」が用意されています。
目次
- はじめに
-
いまどきのサイト制作とは
-
変わり続けるWebサイト制作
- 閲覧環境が変わるということ
- コンテンツの作り方ですら多様化
- WebがWebサイトでなくなる?
-
最新の制作ツールはコマンドラインから
- GUIだけではどうにもならない時代に
- ライブラリのダウンロードもコマンドライン
- コマンド操作だけができれば解決
-
ローカルでWebサイトを動かすには?
- OS Xなら実は簡単!?
- MAMPやXAMMPの問題
- 新しい時代に対応するには
-
変わり続けるWebサイト制作
-
ターミナルの操作に慣れよう
-
シェル?
- 主なシェル
-
覚えておきたいシェルのコマンド
- 自分の居場所を表示する
- ディレクトリの内容をリストする
- コマンドのオプションを指定する
- 作業ディレクトリを移動する
- 入力補完を利用する
- ヒストリー(入力履歴)を利用する
- コマンド行のキャレットの移動
- Finderでディレクトリを開く
- ファイルの内容を表示する(テキストファイル)
- 画面の内容をクリアする
- 新規テキストファイルを作成する
- 新規ディレクトリを作成する
- ファイルやディレクトリを移動する(リネームする)
- ファイルやディレクトリをコピーする
- ファイルやディレクトリを消去する
- 複数のファイルやディレクトリをまとめて操作する
- 複数のファイルを結合する
- ファイルやディレクトリの所有者やパーミッションを変更する
- 管理者としてコマンドを実行する
-
覚えておくと便利なコマンド
- コマンドの場所を確認する
- ファイルやディレクトリを圧縮(アーカイブ)・解凍する
- SSHの鍵の作成
- SSH(SFTP)でリモートのサーバにログインする
- シンボリックリンクの作成
- 現在の日時を表示する
- カレンダーを表示する
- 英語の発音を確認する
- コマンドの実行結果を他のプログラムに渡す
- 複数のコマンドを一度に実行するには?
-
ターミナルでテキストを編集する
- Vim(Vi)
- nano
-
シェル?
-
制作環境構築の下準備
-
Xcodeとコマンドラインツールのインストール
- Xcodeのダウンロード
- コマンドラインツールのインストール
- 回線環境をシミュレートする設定のインストール
- JRE(Java Runtime Environment)のインストール
-
Homebrewのインストール
- Yosemiteにインストール済みのソフトウェア
- Homebrewとは
- Homebrewのインストール
- パスを通す?環境変数に追加する?
- Homebrewのアンインストール
-
Homebrewによるツールのインストールと管理
- treeのインストールと実行
- OS XのソフトウェアをHomebrewでインストール
- 公式リポジトリ以外からソフトウェアをインストール
- インストール済みのソフトウェアのアップデート
- 覚えておきたいHomebrewのコマンド
-
Android SDK Toolsのインストール
- Android SDK Toolsのダウンロード
- Android SDK Toolsのセットアップ
- Android SDK Managerの起動
- HAXMとApache Antのインストール
- Androidデバイスのセットアップ
-
Xcodeとコマンドラインツールのインストール
-
Gitを導入する
-
Gitをインストールする
- Gitについて
- Gitの仕組み
- Gitのインストール
-
Gitを使う前に覚えておきたいこと
- Gitの初期設定?
- Windows環境との共存のために
- GUIクライアントのGitを変更する
-
Gitの基本操作を覚える
- 初めてのGitリポジトリ作成
- Gitリポジトリに変更を加える
- 作業履歴をコミットしてみよう
- プロジェクトごとの設定を作る
- Gitの管理対象をコントロールする
- リモートのGitリポジトリをクローンする
- リモートサーバにGitリポジトリを作成する
-
Gitを使ってサイトを公開するには?
- Gitと連携してサイトを更新するいくつかの方法
- git-ftpのインストール
- git-ftpを使ったファイルの同期
- SourceTreeからgit-ftpを実行する
- タスクランナーから実行する
-
Gitをインストールする
-
node.jsの環境構築
-
node.jsのインストール
- node.jsのバージョンを管理する?
- 公式パッケージをアンインストールする
- nodebrewのインストール
- node.jsのインストール
-
npmによるツールのインストールと管理
- グローバルとローカル、インストール先の違い
- npmを使ったパッケージのインストール
- package.jsonファイルについて
- 覚えておきたいnpmコマンド
-
インストールしておきたいツール
- Bowerのインストールと使い方
- Bowerのコマンド
- npmとBowerを使った自動化
- パッケージのアップデートを少し便利に
-
node.jsのインストール
-
Rubyの環境構築
-
Rubyのインストール
- Rubyのバージョンを管理する?
- rbenvのインストール
- rbenvのプラグインの導入
- Rubyのインストール
-
Gemによるツールのインストールと管理
- RubyGemsとは?
- Sass、Compassのインストール
- default-gemsを使った自動インストール
- 覚えておきたいgemのコマンド
-
Bundlerによるバージョン管理
- Bundlerのインストール
- Bundlerを使ったGemsのインストール
- Bundlerでインストールされたツールの実行
-
Rubyのインストール
-
フロントエンドツールの導入
-
変わり始めた制作環境
- 特別な意味を持つファイルの存在
- Web Starter Kitからわかること
-
を導入する
- Webブラウザの拡張機能を追加する
-
いまどきサイト制作環境を整える
- 各種CSSプリプロセッサの導入
- CSSポストプロセッサの導入
- Bootstrap、Foundationを即座に使うには
- ライブラリのダウンロードと読み込み指示の自動化
- いつでもどこでもローカルサーバを起動する
- ローカルのサイト環境を一時的に外部公開する
- デバイス間で同期するライブリロードサーバ
- JSONサーバのインストールと実行
- MongoDB、Redis、各種DBサーバのインストール
- バックグラウンドで動作するソフトウェアの起動・終了
- Google Page Speedをターミナルから実行する
- サイトパフォーマンスをチェックしてレポート化
- デバイスサイズ別にスクリーンショットを保存
- サイトで使われているCSSをチェックする
- HTMLやCSS、JavaScriptのコードを整形する
- CSSやJavaScriptをMinifyする
- JavaScriptのコードをチェックする
- Sketchのファイルを自動的に書き出す
- 画像から不要なデータを除去し最適化する
- 連続する作業をタスク化して実行するには
- gulpを使ってゼロからタスクを記述する
- gulp.jsでSass/SCSSをコンパイルする
- 変更されたファイルだけを対象にタスクを実行する
- 複数のタスクを順番、または並行して実行する
- BrowserSyncをgulp.jsから起動する
- Scaffolding Toolによるサイト制作の効率化
- Static Site Generatorsを使ったサイト制作
- node.jsアプリケーションの自動リスタート
- node.jsベースのCMS
-
変わり始めた制作環境
-
Vagrantを使った環境構築
- システム内に別のOS環境を構築する
- Vagrantのインストール
- 仮想マシンを作ってみよう
- Boxファイルを使ってみよう
-
オリジナルの仮想環境構築
- Linuxのディストリビューション
- Ubuntuを使ったLAMP環境の構築
- Node.js、Ruby、その他のインストール
- Apacheを使ったバーチャルホストの作り方
- ローカルのGitリポジトリの作り方
Causesを支援しています
Oxfam America
Right the Wrong
http://www.oxfamamerica.orgOxfam America is a global organization working to right the wrongs of poverty, hunger, and injustice. We save lives, develop long-term solutions to poverty, and campaign for social change. As one of 17 members of the international Oxfam confederation, we work with people in more than 90 countries to create lasting solutions.
Leanpubは無条件かつノーリスクで100%の満足を保証します
Leanpubでお買い上げいただいた書籍は、ご購入後60日以内であれば全額返金いたします。払い戻しはわずか2クリックで完了します。払い戻し処理は手作業で行うため、完了まで数日かかる場合があります。詳しくは利用規約をご覧ください。
10ドルの購入で8ドル、20ドルの購入で16ドルを稼ぐ
私たちは7.99ドル以上の購入で80%のロイヤリティを支払い、0.99ドルから7.98ドルの購入には80%のロイヤリティから50セントの定額料金を差し引いた金額を支払います。10ドルの販売で8ドル、20ドルの販売で16ドルを稼ぐことができます。したがって、20ドルで本を5000冊売却し、返金されなかった場合、80,000ドルを稼ぐことができます。
(はい、すでにLeanpubでそれ以上の収益を上げた著者もいます。)
実際に著者はLeanpubで1,300万ドル以上を書き、出版し、販売して稼いでいます。
Leanpubでの執筆について詳しく知る
無料更新。無料アップデート。 DRMフリー。
Leanpubの本を購入すると、著者が本を更新している限り、無料で更新されます!多くの著者は、Leanpubを使用して、執筆中の書籍を出版しています。いつ本を購入したか、いくら支払ったかに関係なく、すべての読者は無料のアップデートを入手できます(無料も含む)。
Leanpubの本はPDF(コンピューター用)、EPUB(iPad用)、MOBI(Kindle用)のフォーマットに対応してます。本に含まれるフォーマットは、このページの右上隅に表示されます。
Leanpubの本には、DRMコピー防止のナンセンスがないため、サポートされているデバイスで簡単に読むことができます