2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、 木村 哲朗さん（まぼろし） 、西畑 一馬さん（まぼろし） の『CodeKitで始める次世代Web制作』のスライドなどを公開します。
メッセージ、補足
「CodeKitで始める次世代Web制作」と題してお話しさせていただいたまぼろしの木村と西畑です。
制作環境に関する最初のセッションということで、CSSプリプロセッサをまだ触ったことのない方でも簡単に始められるように、なるべく分かりやすくお届けしたつもりですがいかがでしたでしょうか。CodeKitの簡単さや高機能性はもちろんですが、それ以上にこのセッションで私どもが込めた「まずはやってみよう！」というメッセージが皆様に伝わっていれば幸いです。
以下、フォローします。
デモで使用したファイルをダウンロードできます。 CodeKitを使ってみたい方も黒い画面で使いたい方も、このファイルを練習にご利用ください。
西畑がCodeKitやComapssについていくつか記事を書いています。
"Video Tutorials"のなかの"Frameworks"をご覧ください。 また、他の動画も大変参考になるので是非ご覧ください。
Q. Windows用でCodeKitのようなツールはないのか
CodeKitのようにいろいろなコンパイルができるものだと"LiveReload"というツールがあります。ただし、まだアルファ版であることにご注意ください。
またこもりさんのセッションで紹介のあった"Mixture"というツールは、クロスプラットフォームでのリリースを予定しており、今からチェックしておいて損はないでしょう。
現状、Windowsでは利用するプリプロセッサごとにGUIツールを利用するか、黒い画面で環境を構築する方が良いかもしれません。なお、それぞれのツールについては他の登壇者から紹介されていますのでここでは割愛いたします。
Q. CodeKitを導入するデメリット･リスクについて
CodeKitを導入するデメリットとリスクは、ずばりコンパイルやビルドをCodeKitに依存してしまうことです。特にLESSの出力先設定やJSの結合などの設定は、CodeKitを利用している人同士でないと共有が難しく、外部の制作者と共同で作業する場合などには注意が必要です。
また、利用するCSSプリプロセッサのバージョンがCodeKitに依存してしまう点もデメリットの１つでしょう。SassなどがバージョンアップしてもCodeKitに最新バージョンが内包されるまでは利用できません。
しかし、CodeKitのコンパイラを外部コンパイラに変更することで対応可能です。 方法は弊社 小林がブログに書いていますので参考にしてください。
CodeKitを利用するかしないかに関わらず、コンパイルやビルドといった行程を制作に持ち込む場合、その手法について制作者同士での意識共有は必須です。
また、さとうさんからCodeKitでStylus+nibを利用する方法についてフォローアップをいただきました。Stylus+nibに興味をもたれた方はこちらの方法を試してみて下さい。
CodeKitでStylus+nibを利用する方法
nib自体は単にmixin定義が書かれた複数の.stylファイル集なので、npmなどコマンドラインでインストールしなくても、ローカルの.stylファイルと同じ場所にファイルをコピーすれば利用できます。
- GitHubのnibリポジトリ https://github.com/visionmedia/nib/ からZIPをダウンロード
- ダウンロードされた「nib-master.zip」を解凍して展開
- 展開後の「nib-master/lib/nib」をコピー
- 自分の.stylファイルがあるディレクトリにコピー
- 自分の.stylファイル内で「@import 'nib';」と記述
上記のような手順で利用できます。ぜひお試しください。
ビデオ
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
