Frontrend/03

CSSプリプロセッサの取扱説明書

多くの制作現場で導入が増えているCSSプリプロセッサ。LESS,Sass,Stylusといったものが取り上げられていますが、それぞれにどういった特徴があるのでしょうか。またCSSプリプロセッサを扱う上での注意点やデメリットにもフォーカスして解説します。

Deck - CSSプリプロセッサの取扱説明書

谷 拓樹（たに ひろき） @hiloki

株式会社サイバーエージェント Webディベロッパー
中小企業向けのアプリケーション開発、スタートアップでのスマートフォンサイト制作などを経て、現在はスマートフォンアプリの開発、テクニカルディレクションを担当している。 主な著書に「 魅せるiPhoneサイト 」「 スマートフォン制作の教科書（共著） 」。

モバイル制作におけるパフォーマンス最適化について

世の中にはパフォーマンス最適化のためのベストプラクティスと呼ばれるものがたくさんありますが、一体どれから手をつければよいのしょうか、また一体どれが一番効果のある対策と言えるのでしょうか？一般論を言えば、ネットワーク改善から手をつけるべきで、その中でもHTTPリクエストを減らすのが一番効果的です。リクエストを減らすポピュラーなテクニックであるCSS SpriteをSass/Compassを利用しながら効率良く改善していきましょう。

Deck - Mobile Front-end Optimization Standard:2012

石本 光司（いしもと こうじ） @t32k

株式会社サイバーエージェント Webディベロッパー
1983年石川県生まれ。大学でデザインを専攻後、晴れてWebデザイナーになるが、コーディング好きが高じてWebデベロッパーに転身。主要な業務としてはHTML/CSS/JavaScriptといったフロントエンド全般を担当。また社内教育やマークアップ監査なども担当している。
また、個人ブログ『 MOL 』 ではWebパフォーマンスやモバイルに関する記事を書いている。不定期でJavaScriptユーザーコミュニティ「 kanazawa.js 」を主催している。

ビルドプロセスの自動化で効率アップ

プロジェクト開始時に使い回す初期設定ディレクトリを作ったり、パフォーマンス最適化のために画像の最適化、JavaScript、CSSの短縮、結合、LESSやSassをCSSに変換するなどそれぞれのタスクに適したツールはたくさんありますがこれらのタスクを一元化、自動化したいとおもいませんか？ 今回はGrunt.jsというnode.jsで動作するビルドツールを使ってこれらのタスクを自動化する方法について紹介します。

Deck - ビルドプロセスの自動化で効率アップ

佐藤 歩（さとう あゆむ） @ahomu

株式会社サイバーエージェント Webディベロッパー
1985年生まれ。渋谷でマークアップエンジニアとして、JavaScript/HTML5を中心にフロントエンド技術を探求中。バックエンド寄りWebエンジニアからの転身で、サーバサイドの経験と知識を活かしながら、現職サービスのフロント開発に取り組んでいる。詳しい情報・アクティビティは個人サイト http://aho.mu にて。

コーディングの品質を保つドキュメンテーション、スタイルガイドの作り方

ウェブにはもともと従来のメディアよりも“早い”開発が可能であるという特性があります。その特性はこの数年で飛躍的な進化を遂げてきています。よりよいプロダクトを作る上で必須なイテレーションの土台となるのがスタイルガイドというワークフローではないでしょうか？
今回は自信を持ってイテレーションを回すために知っておきたいスタイルガイドについて紹介します。

斉藤 祐也（さいとう ゆうや） @cssradar

株式会社サイバーエージェント Webディベロッパー
1979年生まれ。ネバダ州立ラスベガス大学、プリントジャーナリズム学部卒。株式会社All Aboutで6年、2012年2月からは株式会社サイバーエージェントへ。 個人ではフロントエンドデベロッパのためのミニブックというコンセプトのブログ CSS Radar をはじめ海外記事の翻訳を掲載している en.ja 、OSSのドキュメント翻訳コミュニティ en.ja OSS を運営している。