SublimeText入門

最新の開発環境をSublimeTextで整える

フロントエンドのパフォーマンスを上げタスクを自動化するGruntやYeomanなどを導入するフロントエンドデベロッパー環境が増えてきました。その第一歩となるのが、SublimeTextの導入です。SublimeTextの優れたプラグインを導入し、マルチデバイス対応サイト制作のためのフロントエンドのコーディング開発環境をSublimeTextで整えていくという授業です。
html4またはxhtml1.0のコーディングは分かるので、最新の環境を整えたい方におすすめの授業です。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（前編）」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（後編）」の録画授業を受講されると、より理解が深まります。

1）Sublimeのインストール（授業中コードを打つのに使います）
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2）解凍ツール （授業中配布する教材の解凍に使います）
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
（Mac OSXの場合はダブルクリックで展開します。windows7～の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK）

3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

コーディングを爆速にしてくれるemmetの導入

cssコーディングの効率化のためにsassなどコンパイルが必要な技術を使うことが多くなってきました。その導入として、コーディングを爆速にしてくれるemmetをSublimeTextに導入していきます。
emmetは以前はZen-Codingと言う物でした。HTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。このライブラリがSublimeTextのプラグインとして導入されて、コーディングは慣れれば約1/3の時間で出来るようになりました。これを覚えない手はありません！この授業でしっかり導入方法を、使用方法を学んでいきましょう。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（前編）」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（後編）」の録画授業を受講されると、より理解が深まります。

1）Sublimeのインストール（授業中コードを打つのに使います）
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2）解凍ツール （授業中配布する教材の解凍に使います）
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
（Mac OSXの場合はダブルクリックで展開します。windows7～の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK）

3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

SublimeTextを使用した完璧なディレクトリ管理を学ぶ

1回目・2回目で、SublimeTextを使用したフロントエンドコーディングの開発環境が整いました。
この授業ではローカル作業からネット上へファイルの更新・新規追加をしていく作業を学びます。
またSublimeTextを使用した完璧なディレクトリ管理を学んでいきます。

FFFTPやサイバーダックなどを使用している方、ディレクトリ管理がいまいちよくわかれず、先祖がえりを起してしまう方は必見です。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（前編）」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（後編）」の録画授業を受講されると、より理解が深まります。

1）Sublimeのインストール（授業中コードを打つのに使います）
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2）解凍ツール （授業中配布する教材の解凍に使います）
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
（Mac OSXの場合はダブルクリックで展開します。windows7～の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK）

3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

フロントエンドの開発にはプログラムを制御・統合するビルドツール、処理を自動化し結果を出すタスクランナー、CSS拡張メタ言語からCSSをコンパイルするCSSプリプロセッサなどが導入されるようになり、それらの使用には「黒い画面」と呼ばれているコマンドラインが必要不可欠になってきました。

1回目は、その中でも定番と言っていいほど導入の進んでいるSassを導入するためのコマンドラインを使った設定を学んでいきます。

コマンドラインはMacでは「ターミナル」、Windowsには「コマンドプロンプト」がデフォルトで用意されています。Windowsではもう一つのコマンドラインツールであるPowerShellがあり、SublimeTextを中心に構築していくフロントエンド開発環境ではPowerShellを使用します。初めて名前を聞く人もいると思いますので、
標準装備されているのを確認してください。

Windws 7
スタートメニュー＞すべてのプロラム＞「Windows PowerShell」と入力すると確認できます。
Windws 8
スタート画面＞すべてのアプリ＞「Windows システムツール」の項目にあります。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。

1）Sublimeのインストール

下記のURLからダウンロードしてください。
http://www.sublimetext.com/2

2) Sublimeの設定

下記の授業を見て、必要な設定をしておく事をお勧めします。
・マルチデバイス対応コーディングのためのSublimeText【環境整備編】

3) 以下の授業を受講するとより理解が深まります。

・コーディング時間を1/3にするSublimeTextだからできるemmet連動
・SublimeTextだからできるFTP連動と正しいディレクトリ管理

cssはネストの構造を記述する事ができないため、うまく優先順位を考慮しなければ指定できなかったり、後で書いた記述に上書きされてしまったりします。CSSプリプロセッサ（CSS拡張メタ言語）を使えばhtmlのネスト構造のままスタイルを設定できるようになります。大規模なサイトになるほどネストの階層は深まって行きますが、そのままの構造でスタイルが当てられるのでセレクタが被る事がありません。また、ナビボタンに一つづつ違う画像を指定するなどの連番のクラス名をつける、4〜5個のベンダープレフィックスをつけるなどを、一発指定するという神業をやってのけます。

この授業はCSSプリプロセッサSassをSublimeTextに導入して操作する方法を学びます。

CSSプリプロセッサにはBootstrapで採用されているLessなどがありますが、Sassはcssに近いScss記法で親しみやすいため、最もユーザー数の多いCSSプリプロセッサです。
Rubyをインストールする必要があります。MacはRubyが標準装備されています。Windowsの方は、下記のサイトを参照にしてRubyのインストールをしてください。
http://www.rubylife.jp/install/install/index1.html

※Subulime Textがインストールされている事を前提に授業が進んでいきます。

1）Sublimeのインストール

下記のURLからダウンロードしてください。
http://www.sublimetext.com/2

2) Sublimeの設定

下記の授業を見て、必要な設定をしておく事をお勧めします。
・マルチデバイス対応コーディングのためのSublimeText【環境整備編】

3) 以下の授業を受講するとより理解が深まります。

・コーディング時間を1/3にするSublimeTextだからできるemmet連動
・SublimeTextだからできるFTP連動と正しいディレクトリ管理

SassはJavaScriptのように関数を使って様々な処理を実行したり変数を使用する事ができます。変数を使用する事によって、1回の記述で数カ所のスタイルを指定する事ができます。また、条件分岐や繰り返し処理を行う事でページによって背景画像を変えたり、フォントサイズによって色を振り分けたりする事ができます。SublimeTextにSass用プラグインを導入して、プログラミング的な指定を楽々こなす手法を学びます。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。

1）Sublimeのインストール

下記のURLからダウンロードしてください。
http://www.sublimetext.com/2

2) Sublimeの設定

下記の授業を見て、必要な設定をしておく事をお勧めします。
・マルチデバイス対応コーディングのためのSublimeText【環境整備編】

3) 以下の授業を受講するとより理解が深まります。

・コーディング時間を1/3にするSublimeTextだからできるemmet連動
・SublimeTextだからできるFTP連動と正しいディレクトリ管理

CompassとはSassをさらに強力にしてくれるSublimeTextのパッケージで、スプライト自動作成、プロジェクトごとに設定ファイルを適用したり、ベンダーフィックスやクロスブラウザ対応を自動生成してくれる、すぐれたフレームワークです。また、SassとCompassを元に作られたオープンソースのライブラリはネット上で多数配布されています。4回目はSublimeTextにCompass用のパッケージをインストールして自動コンパイルを実現する手法を学びます。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。

1）Sublimeのインストール

下記のURLからダウンロードしてください。
http://www.sublimetext.com/2

2) Sublimeの設定

下記の授業を見て、必要な設定をしておく事をお勧めします。
・マルチデバイス対応コーディングのためのSublimeText【環境整備編】

3) 以下の授業を受講するとより理解が深まります。

・コーディング時間を1/3にするSublimeTextだからできるemmet連動
・SublimeTextだからできるFTP連動と正しいディレクトリ管理