Blogイロコトのブログ
イロコトのWebサイト制作コーディング環境について(Pug･Sass･Gulp･Git)
- コーディング
イロコトで主にコーディング/ディレクターを担当しているisshyです。
弊社は2013年7月に創業してから、エンタメ系(アニメ・ゲーム・漫画・イベント など)をはじめ、固めのコーポレートサイトやLP(ランディングページ)等々と、様々なサイト制作を手がけてきましたが、創業時と今とではWebサイトの制作環境がかなり変わっています。
創業時はHTMLやCSSを直接コーディングしていましたが、現在ではHTMLをPug、CSSはSassでコーディングしており、さらにこれらをGulpでコンパイルしてHTMLやCSSなどを出力するというコーディング環境になっています。
これらを用いた環境構築をすることで、コーディングのスピードが上がり、開発工数を下げ、運用効率も上げることができました。これはクライアント様に対して費用対効果の良いサイト制作ができることにも繋がっています。
クライアント様に弊社はこういう制作環境ですとお伝えすることも多くなってきましたので、ここで改めて弊社のWeb制作コーディング環境について紹介したいと思います。
Pug
Pug（パグ）は、HTMLを効率的に書くためのテンプレートエンジンです。pugでコーディングしたファイルをHTMLに変換するためにコンパイルが必要になりますが、後述するGulpで自動化できるため手間にはなりません。Pugを採用するにあたり良い点だと思ったところをいくつか挙げてみます。
開始タグ・終了タグがいらない
HTMLは一部を除き開始タグと終了タグが必ず必要になりますが、複雑な構成などの場合閉じタグを忘れてしまうことがよくあります。
Pugはこのタグを必要としないため、タグが閉じられているかを確認する必要がなく、さらに記述量も少なくすることができます。
div#wrapper
section#test
div.page-heading
h2: span テスト
<div id="wrapper">
<section id="test">
<div class="page-heading">
<h2><span>テスト</span></h2>
</div>
</section>
</div>テンプレート化による量産
下記は実際に作成したサイトのテンプレート例になります。こういったテンプレートの作成をすることができ、ページの量産がしやすいのも特徴です。
google tag managerの記述がありますが、この場合ですとどんなにページを量産してもかならずgoogle tag managerの記述が入るため、記述し忘れることがありません。
また、特定のページだけdescriptionを変更するということも可能ですし、headerやfooterなどどのページにもある部分を共通パーツ化して各ページに読み込ませることもできます。
さらに、メンテナンス性も向上します。例えばヘッダーメニューの項目を変更したいといった修正も、１カ所直すだけで全ページに反映されるのでクライアント様からのご要望にも素早く対応することができます。
block template
block meta
block config
doctype html
html(lang="ja")
head
|
| <!-- Google Tag Manager -->
| <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
| 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
| })(window,document,'script','dataLayer','GTM-xxxxxx');</script>
| <!-- End Google Tag Manager -->
meta(charset="utf-8")
script.
if (/iPad|Macintosh/i.test(navigator.userAgent)&& 'ontouchend' in document)
{ document.write('<meta name="viewport" content="width=1180, maximum-scale=2, user-scalable=yes">'); }
else
{ document.write('<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=2, user-scalable=no">'); }
title #{meta.title}
meta(name="keywords" content=meta.keywords)
meta(name="description" content=meta.description)
meta(property="og:url" content=meta.url)
meta(property="og:type" content="website")
meta(property="og:title" content=meta.title)
meta(property="og:site_name" content=meta.title)
meta(property="og:description" content=meta.description)
meta(property="og:image" content=meta.image)
meta(property="og:locale" content="ja_JP")
meta(property="fb:app_id" content="000000000000000")
meta(name="twitter:card" content="summary_large_image")
meta(name="twitter:image" content=meta.image)
link(rel="canonical" href=meta.url)
block css
body
|
| <!-- Google Tag Manager (noscript) -->
| <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxxx"
| height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
| <!-- End Google Tag Manager (noscript) -->
block contents
block js
Sass
Sass（サス）は、 Syntactically Awesome Style SheetsというRuby製のCSSメタ言語です。こちらもコーディング後にCSSへのコンパイルが必要になりますが、Gulpにて自動化することができます。Sassを採用するにあたり良い点だと思ったところをいくつか挙げてみます。
入れ子（ネスト）
ネストすることで構造が分かりやすくなり、メンテナンス性が向上します。またidやclass名を列挙しなくて済むので工数の削減にもなります。
<div id="wrapper">
<section id="test">
<div class="page-heading">
<h2><span>テスト</span></h2>
</div>
</section>
</div>#wrapper {
padding: 0 0 60px 0;
background: #FFF;
.page-heading {
max-height: 120px;
margin: 0 0 40px 0;
padding: 45px 0 20px 0;
h2{
margin: 0 auto 30px auto;
padding: 0 0 5px 0;
font-size: 2.2rem;
text-align: center;
}
}
}#wrapper {
padding: 0 0 60px 0;
background: #FFF;
}
#wrapper .page-heading {
max-height: 120px;
margin: 0 0 40px 0;
padding: 45px 0 20px 0;
}
#wrapper .page-heading h2 {
margin: 0 auto 30px auto;
padding: 0 0 5px 0;
font-size: 2.2rem;
text-align: center;
}ファイル分割
ファイルを分割することができ、用途や必要に応じて呼び出すことができます。下記の場合、フォントを変更したい場合は呼び出し元のフォントの設定を変更するだけで、全ての呼び出し先に適用することができます。
body{
margin: 0 auto;
font-family: tbudrgothic-std, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 400;
font-style: normal;
}@import "../include/foundation";変数が使える
変数を使うことでメンテナンス性が向上します。
下記の例では背景色を指定していますが、色を変更したい場合、変数部分を修正するだけで全ての背景色が変更できます。
$bg-color: #FFF; .btn { background-color: $bg-color; }
.btn { background-color: #FFF; }
Gulp
Gulp（ガルプ）は、 様々な処理を自動化するタスクランナーです。主に下記のようなメリットがあり、採用しています。
Gulpなしの場合
Pug,Sassのコンパイル → それぞれGUIコンパイラ等が別途必要
画像の圧縮 → 圧縮用のツールが別途必要
HTML,CSS,JSの圧縮 → Web上のツールなどでそれぞれ対応が必要
ブラウザの同期 → できない。
↓
Gulpありの場合
Pug,Sassのコンパイル → Gulpが自動でやってくれます。
画像の圧縮 → Gulpが自動でやってくれます。
HTML,CSS,JS等の圧縮 → Gulpが自動でやってくれます。（圧縮しないようにもできます。）
ブラウザの同期 → コンパイル後にブラウザに自動的に反映されます。
特にブラウザの同期については、コーディングしたファイルをテストサーバにあげなくてもローカル上で確認ができ、ファイルを保存するたびに現状の状態がブラウザに反映されるので修正の確認工数が削減できます。
Git
Git（ギット）は分散型バージョン管理システムの一つで、もともとLinuxのソースコードを効果的に管理するために開発されました。
弊社は最初は案件に対して開発者は一人だったため、Gitを必要としていませんでした。しかし、案件も社員も増え、途中で引き継いだりすることが増え、先祖返りが起きたこともあり導入に踏み切りました。
Git導入のメリット
・引き継ぎが簡単で先祖返りを起こしにくい。
・バージョン管理ができる。（2日前の状態に戻したりできる）
バージョン管理についてはクライアント様にもメリットがあり、例えば「前々回公開されていた状態に戻してほしい」といったご要望にもすぐ対応することができるようになります。プロジェクトによってはGit経由でご納品をするというケースもあります。
まとめ
Pug,Sass,Gulp,Gitについて簡単にメリットなどをお伝えしました。今後もできる限り工数を削減してクライアント様に貢献できるようにして行きたいと考えています。
技術周りは移り変わりが激しいのですが、イロコトでは技術トレンドは追いつつ、導入した方が良いものは導入し、そうでないものは無理やりは導入しないように、色々と見極めながらコーディング環境をアップデートしていくつもりです。
最後に
弊社イロコトではクライアント様からのご依頼に応じて最適なサービスをご提供することを心掛けております。
アニメ・ゲーム・漫画といったエンタメ系お仕事のご相談はもちろんなのですが、固めのコーポレートサイトや、バナーやLP(ランディングページ）など幅広くWeb制作案件をやらせて頂いてますので、イロコトが気になられたご担当者様は、お気軽に下記問い合わせフォームよりお問い合わせください。
isshy
アプリケーションエンジニア/Webディレクター ゲームと🍓好き。
