1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ

• 作成：2015/08/10
• 更新：2017/04/16
• Web制作 > 開発環境

ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

WordPress版 受託用マニュアル

• １．ヒアリングシート
• ２．WP版ホームページ制作の流れ
• ３．WordPress管理マニュアル
• ４．WP版品質チェックシート
• ５．Wordpress タグ

タスクランナー

• ６．gulp
• ７．Bower

JavaScript 代替言語／JST

• ８．TypeScript
• ９．CoffeeScript
• １０．Jade

コーディング用

• １１．Chrome 開発ツール
• １２．html5 / css ガイドライン
• １３．メディアクエリー仕様書
• １４．CSS3セレクタ仕様書
• １５．SASS
• １６．各ブラウザチェックリスト
• １７．SVGのブラウザサポート状況
• １８．Canvas
• １９．Bootstrap
• ２０．JIS X8341-3

MVC（JavaScript フレームワーク）

• ２１．AngularJS
• ２２．Backbone js
• ２３．React js

EC-CUBE 標準規約

• ２４．EC-CUBE標準規約
• ２５．プラグイン開発仕様書

トレンドのエディタ／git

• ２６．emmet
• ２７．Atom
• ２８．Sublime Text / Brackets
• ２９．Vim
• ３０．GitHub

WordPress版 受託用マニュアル

お客様からのサイト制作依頼や問い合わせ、フローの説明を作るときにどういったこと記述し返答すればよいのか、納品時にお渡しする管理マニュアルはどのような手順で作成すればよいのか。

問い合わせ後に使うヒアリングシートや、構築後に使える管理マニュアル・QCシートなどWordPressに付随する資料をまとめました。

１．ヒアリングシート

お客様からのサイト制作依頼に素早く対応できるように、メール返信例と打ち合わせで使えるヒアリングシート。

• [PDF] ヒアリングシート
• [配布先] ヒアリングシートや問い合わせ返信に使えるテンプレート

２．WP版ホームページ制作の流れ

WordPressに特化した、いわゆる「簡易的なホームページ制作の流れ」をクライアント用にわかり易く資料にまとめたもの。お客様側から見て、流れと確認事項を理解できるように構成されています。

• [PDF] WordPress導入案件“ホームページ制作の流れ”を配布します | yusk

３．WordPress管理マニュアル

WPでサイト納品時にお渡しする「管理マニュアル」の資料。ログイン情報の記載、ダッシュボードの解説、記事更新方法、画像や文章の作成方法など必要最低限なことのみを書いてあるので、クライアントから見て分かりやすい管理マニュアルとなっています。

• [PDF] WordPressの更新マニュアルを電子書籍で公開・配布 | yusk

４．WP版品質チェックシート

WP公開後のトラブルを未然に防ぐために、サイト公開前にチェックしておきたいチェックリスト。テスト時に必要なユーザー制限・証明書のテスト・URLの書き換え・法人用ドメイン登録時の注意事項など実践的な内容。

• 品質・納品チェックシート

５．Wordpress タグ

基本的なファイル名、ファンクションやテンプレートタグ一覧。

• WordPress Cheat Sheet

タスクランナー

SassコンパイルやJS圧縮・テスト実行などを自動実行するツールのことをタスクランナーといいます。自動化することで作業を高速化し、ミスを軽減することができます。この項目ではフロントエンドが助かる、タスクランナー・MVC・フレームワークに関するチートシートをご紹介します。

６．gulp

gulpはGruntと比べて分かりやすく高速、コード量も少なくJavaScriptで書けるというメリットがあるので人気です。Sass・画像やJS圧縮・テスト実行などの処理を簡単なコマンドで自動化します。以下はビジュアルが綺麗なgulpのチートシート。

• [PDF] gulp.js チートシート - Qiita

７．Bower

Grunt/gulpはSassや圧縮・テスト実行などの処理を自動化するのに対し、BowerはJSライブラリや依存するCSS等をコマンドで簡単にインストールできるクライアントサイド版ツールです。ブラウザで動くAngularJSやjQueryなど、最新のパッケージに付随するリソースをインストールすることができます。

bower.jsonを作っておくと、保存したライブラリを簡単にインストールできます。Bowerをインストールするにはnpm（Node.js のパッケージマネージャ）が必要となります。

• [PDF] Bower チートシート
• [配布先] Node, Bower, Grunt n00b Cheat Sheet

JavaScript 代替言語 / JST

少し前、jsの処理を簡潔・安全に実装したいという流れから、CoffeeScriptやTypeScriptというシンタックスシュガー（人間にとって分かりやすい短い構文）が登場しました。

８．TypeScript

JavaScriptを書きやすくし、バグの可能性を減らせるのがTypeScriptのメリット。コードをコンパイル（変換）すると、JavaScriptのソースコードを吐き出します。Playground - Welcome to TypeScriptで処理を試せます。詳しくはこちらのTypeScriptってどんなもの？ プロ生ちゃんと始めてみよう！ - Build Insiderが分かりやすいです。

• TypeScript早わかりチートシート【1.5.3対応】 - Build Insider

９．CoffeeScript

CoffeeScriptも、Pythonなどから影響を受けた、コードをシンプルに記述できるJavaScriptのシンタックスシュガーです。JavaScriptと比較すると短くコードも見やすいです。CoffeeScript TRY COFFESCRIPTから処理をテストできます。

• CoffeeScript チートシート

１０．Jade

JadeとはHTML を書くためのJavaScript テンプレートエンジン。インデントと閉じタグ不要の簡易的な記述でHTMLを出力してくれます。こちらの記事Jade について。 · GitHubが驚異的に分かりやすいです。

• Jade Template Syntax Documentation by Example

コーディング用

１１．Chrome 開発ツール

Chromeデベロッパーツールのチートシート。開発ツールはCSSの調整やJavaScriptのコンソール出力などで使うことが多いと思います。こちらはWin / Mac 両対応のショートカットキーを記述してあるので便利です。

• 最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
• Chrome Devtools チートシート

１２．html5 / css ガイドライン

Googleによるhtml / css のガイドラインを翻訳したもの。原文の方はGoogle HTML/CSS Style Guideで。

• 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

１３．メディアクエリー仕様書

ブラウザ・デバイスに応じて見え方を切り替えていくメディアクエリー。こちらはW3Cの公式ドキュメント（翻訳版）です。

• メディアクエリー

１４．CSS3セレクタ仕様書

W3CによるCSS3セレクタの翻訳。

• セレクタ Level 3

１５．SASS

CSS記述の負担を減らすSASSのチートシート。

• SASS チートシート

１６．各ブラウザチェックリスト

CSS3の各ブラウザによる対応状況。エビスコムさんの方は日本語な上、コンパクトにまとめてあるので見やすいですね。

• CSS3プロパティ＆ブラウザ対応一覧 – E BISUCOM TECH LAB
• HTML5 & CSS3 Web Design

１７．SVGのブラウザサポート状況

SVG版ブラウザのサポート状況。

• Support tables for HTML5, CSS3, etc

１８．Canvas

Canvasとはブラウザ上で図を描くために作られたもの。プラグインなどを使わずに図形を描けます。こちらはCanvasのチートシートです。

• HTML5 Canvas チートシート

１９．Bootstrap

コンパクトにまとめられたBootstrapのクイックガイド。

• Bootstrap チートシート

２０．JIS X8341-3

JIS X8341-3とは、簡単に言うとウェブコンテンツのあり方を示したガイドライン。今は多くのデバイスが普及しているのもあり、多くの環境にてコンテンツや情報を届けるという考え方を理解しておく必要があります。こちらはアクセシビリティに関するガイドラインです。

• JIS X 8341-3:2010 解説

MVC（JavaScript フレームワーク）

フロントエンド開発規模が増大していることもあって、最近ではビジネスロジックとデザインを別々に扱う流れが増えています。MVC（Model-View-Controller）とは、処理を分ける（例：データ・UI出力・制御）という考え方であるアーキテクチャ。主にアプリケーションのフレームワークなどに使われます。MVCモデルに関してはこちらのMVCモデルの概念を漫画で解説してみる | hijiriworld Webが分かりやすいです。

代表的なもの３つのチートシートをご紹介します。

２１．AngularJS

ひと通りの機能が揃っているGoogleが作ったJavaScriptフレームワーク。

• AngularJS チートシート

２２．Backbone js

• Backbone.js チートシート
• [配布先] Igloo

２３．React js

• React.js チートシート

EC-CUBE 標準規約

２４．EC-CUBE標準規約

EC-CUBEの命名規約。ファイル名・クラス名・関数名などから、インデントの指定やコメント例まで。

• EC-CUBE標準規約
• 運用マニュアル・開発手順

２５．プラグイン開発仕様書

こちらはプラグイン開発方法について。

• [PDF] EC-CUBE プラグイン開発仕様書
• [配布先] EC-CUBEプラグインをつくろう！ / ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」

トレンドのエディタ／git

emmet / gitの他、制作会社が使うトレンドのエディタから、定番のものまで。主にエディタ操作を便利にするショートカットキー対応表です。

２６．emmet

• emmet チートシート

２７．Atom

• Atom Editor チートシート
• [配布先] Bugsnag

２８．SublimeText / Brackets

• Brackets Shortcuts GitHub
• [PDF] Sublime Text | Periodic table of the Keyboard Shortcuts.
• [配布先] Sublime Text の習得に役立つショートカットキーのチートシートを作ってみた (Mac OS X / Windows)【15日目】 ｜ Developers.IO

２９．Vim

• Vim チートシート
• [配布先] www.namaraii.com

３０．GitHub

• tiimgreen/github-cheat-sheet · GitHub