7/4(Mon)
第1回:2017年12月23日公開
45min
Sublime Text はクロスプラットフォーム対応の高機能エディタです。
2008年1月18日に初版Sublime Textが発表、2013年7月8日にSublime Text 2が公開され、 ついにSublime Textの最新版Sublime Text 3が2017年9月13日に正式公開されました。
Sublime Text 3では、定義へ移動する機能、新しい構文強調エンジン、拡張されたAPIが導入されました。またロゴも一新され、インターフェイスが新しくなり、パフォーマンスはSublime Text 2からさらに向上しています。
このコースは、フロントエンドコーディング環境をSublime Text 3とビルドツールで整えていくという授業です。
※本授業では、Sublime Textがインストールされている事を前提に授業が進んでいきます。
事前に下記URLからダウンロードして準備していただくと、よりスムーズにご受講することができます。
(授業内で設定を一緒に学んでいきますので、授業前に各種設定することは不要です)
https://www.sublimetext.com/3
※この授業はHTML+CSSコーディングの基礎スキルを習得された方向けです。
HTML+CSSコーディング基礎スキル未習得の方は、下記の授業を先に受講される事をおすすめします。
・HTML入門
・WebデザインのためのHTML入門
・CSS入門
・WebデザインのためのCSS入門
田中先生の自己紹介や、コース全体についてはこちらからご覧ください。
【ソフトウェア情報】
名称:Sublime Text 3
著作権者:Sublime HQ Pty Ltd(オーストラリア)
対応OS:Windows、Mac、Linux
<ソフト種別>シェアウェア 80米ドル
<バージョン>Build 3143(17/09/13)
Sublime Textは、無料で試用できますがプロプライエタリですので継続して使用する場合はライセンス(80米ドル)の購入が必要です。 2013年2月以降にライセンスを購入した場合は、「Sublime Text 3」でもそのライセンスを利用することができます。 また、「Sublime Text 1」「Sublime Text 2」の利用者向けには低価格なアップグレードライセンスが提供されています。
スクー放送部
スクー放送部
※授業以外での利用は禁止します。
2017年12月23日公開
45min.
Web開発現場では、パフォーマンスを上げるためにさまざまな作業を自動化するビルドシステムを導入する 開発環境が増えてきました。
モダンエディタの草分け的存在Sublime Text 1が誕生した後、様々な後続エディタが誕生しましたが、 昨今、あまりメモリを消費しないためパフォーマンスが高く、ビルドシステムとの親和性の高いエディタ Sublime Text 3が再び脚光を浴びてきました。
第1回では、Sublime Text 3の優れたプラグインを導入し、 フロントエンドコーディング環境を整えていきます。最新の環境を整えたい方におすすめの授業です。
スライド資料
2017年12月23日公開
45min.
第2回では、コーディングスピードを飛躍的に上げてくれるEmmetを SublimeTextに導入していきます。
EmmetとはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるテキストエディタ用プラグインです。スニペットを記述し、ショートカットキーで展開するという操作で、まとまったコードを一気に記述する事ができます。
2008年にVadim Makeevによって開発されたEmmetは、Sergey Chikuyonokと利用者により MIT Licenseのオープンソースとして継続して開発され続けています。
※Emmetのインストールは授業中に一緒に行いますので事前準備はいりません。
スライド資料
2017年12月23日公開
45min.
SFTPプラグインをインストールしてSublime TextにFTP機能を追加する授業です。
SFTPはFTP/SFTPの両方のサーバーにアップロードできる優れたプラグインです。
ファイルの保存と同時に自動アップロードができます。
第3回ではSublime Text 3上のローカルプロジェクトからネット上へファイルの更新・新規追加をしていく作業を学びます。
※Sublime Text入門 -第1回-【環境整備編】が前提授業となりますので事前にご受講をお願いします。
スライド資料
2018年1月13日公開
45min.
ウェブフロントエンド開発では「タスクランナー」や「ビルドツール」と呼ばれる必要な処理を自動化してくれる システムを挿入し、それらで作られた環境内に必要なツールをセットアップした環境で開発する事が多くなりました。
Grunt、 webpackなどがありますが、第3回では、今フロントエンドで最も多く使われているツールの一つ、 Gulpでの開発環境構築を学んでいきましょう。
GulpはNode.jsをベースとしたビルドツールです。 さまざまな作業を自動化することができます。
Gulpの特徴はファイルの処理をストリームで行うというところです。この事により複雑なタスクも細かく カスタマイズする事ができます。
※第4回ではコマンドラインを使います。Windowsでは「コマンドプロンプト」、 MacOSでは「ターミナル」が授業中に直ぐに起動できる様にしておいてください。
※受講前に最新のNode.jsのインストールをお願いします。
https://nodejs.org/ja/
・nvm(Node.jsのパッケージ管理ツール)を導入している場合は最新バージョンのNode.jsを使えるようにしておいてください。
・必ずコマンドプロンプト(Windows)かターミナル(Mac)で
node -v
と打ち、ストールがされている事を確認してから授業に臨んでください。
インストールされている場合は、下記の様にヴァージョンが表示されます。
v8.8.1
※Gulpについては以下の授業も参考にしてください。
Gulp入門
スライド資料
2018年1月13日公開
45min.
SassはEmmetとともに、コーディングスピードを飛躍的にあげるツールとして 今やフロントエンドの開発環境では定番となりつつあります。
SassとはCSSのメタ言語です。「Syntactically Awesome Stylesheets」の略で、 直訳すれば「素晴らしい構造のスタイルシート」という意味です。
この授業ではGulp環境ににSassを導入し、Sassで記述したファイルをコンパイルして、 CSSファイルを生成する手法を学でいきます。
※この授業はGulpの導入が前提になっています。必ず前回授業Sublime Text入門 -第4回-【Gulpで構築する開発環境】をご覧になってからご受講ください。
※Sassについては以下の授業も参考にしてください。
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに 〜応用編〜
スライド資料
2018年1月13日公開
45min.
CSSフレームワークであるBootstrapは、あらかじめ用意されたCSSのセレクタを選ぶ事で誰でも完成度の高いレスポンシブデザインのUIを作る事ができます。デフォルトで5色のバリエーションを持つ様々なパーツのデザインが用意されており、CSSにあまり慣れていない方でも統一感のあるデザインのサイトを簡単に作る事ができます。
実は、Bootstrapの魅力はCSSプリプロセッサであるSassでカスタマイズできる事にあります。
bootstrap-sassというgemがRubyベースと、Node.jsのnpmベースで用意されています。(npmとはNode.jsのライブラリやパッケージを管理することができるツールで、Node.jsをインストールすると一緒にインストールされます。)
BootstrapはそもそもCSSのプリプロセッサLessでコンパイルされていました。現在はSassでの開発がLessを上回る様になり、Bootstrapにおいても主流になりつつあります。(もちろん今でもLess用パッケージも用意されています)
bootstrap-sassを使えば、完成度に加えオリジナリティも高いサイトが実現できます。
第6回ではGulpでの開発環境で如何にしてbootstrap-sassのカスタマイズを行うかを学んでいきます。
スライド資料