コーディングがラクになる!? “自分仕様”のさくさくコーディング法

2014.10.29 GAT/COLLEGE

千貫りこ

千貫（せんがん）りこ

1997年からWebサイト制作の仕事をスタート

2005年からフリーランスに

制作、講師、執筆

今日やること“がんばりどころ”を考える

MarkdownとSass

便利なツールいろいろ

“がんばりどころ” を考える

覚えなきゃいけないこと、たくさん！

“がんばりどころ”を考える

ホントに必要？

ツールやテクニックは一過性のものが多く、いざ使おうと思ったタイミングになったときには、古いアプローチという場合がよくあります（中略）実践するときは、もう一度検索したり確認することになるので、ツールやテクニックは流し見程度。それより中長期にわたって使える知識やアプローチを「何が必要なのか」「なぜ必要なのか」を意識して吸収するようにしています。

http://www.yasuhisa.com/could/article/what-you-need-to-know/

“がんばりどころ”を考える

1.自動化

2.黒い画面と仲よくする

3.道具を使い分ける

押さえておきたいポイント

“がんばりどころ”を考える

自動化

“がんばりどころ”を考える

• ライブリロード • ファイルの結合 • CSSプロパティの並び順整理 • 構文チェック • コードのminify • CSSスプライト生成 • 画像最適化 • FTPアップロード

“がんばりどころ”を考える

http://gruntjs.com/ http://gulpjs.com/

“がんばりどころ”を考える

黒い画面と仲よくする

“がんばりどころ”を考える

アプリケーション＞ユーティリティ＞ターミナル.app

“がんばりどころ”を考える

https://www.ruby-lang.org/ja/

Ruby

http://nodejs.jp/

Node.js

gem

npm

“がんばりどころ”を考える

道具を使い分ける

“がんばりどころ”を考える

Edge CodeDreamweaver Sublime Text Coda

“がんばりどころ”を考える

http://getkirby.com/

http://www.mamp.info/

“がんばりどころ”を考える

Markdown

Markdownって？

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。 もともとは読みやすいプレーンテキスト形式の文書をHTML化するために開発された…（後略）

Wikipediaより

Markdown

http://daringfireball.net/projects/markdown/

Markdown

Markdown

• 専門的な知識がなくても編集できる

• 文脈を意識したコーディングが可能

• Webサイト制作以外の場面でも使える

• ツールに含まれていることがある

なぜMarkdown？

Markdown

Markdownエディタ

http://25.io/mou/ http://pad.haroopress.com/

具体的に見てみよう

Markdown

Markdown

見出し

<h1>大見出し</h1><h2>中見出し</h2><h3>#小見出し</h3>

#大見出し##中見出し###\#小見出し

Markdown

段落

<p>Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。<br>もともとは読みやすいプレーンテキスト形式の文書をHTML化するために開発された。</p><p><strong>Wikipedia</strong>より</p>

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。　 ⏎もともとは読みやすいプレーンテキスト形式の文書をHTML化するために開発された。⏎

⏎**Wikipedia**より

- リスト項目1- リスト項目2- リスト項目2-1- リスト項目2-2

- リスト項目3

<ul>あ<li>リスト項目1</li><li>リスト項目2 <ul>あ　<li>リスト項目2-1</li> <li>リスト項目2-2</li>

</ul>あ</li>あ<li>リスト項目3</li>

</ul>

Markdown

箇条書き

|header1|header2|header3||-------|------:|:-----:||data1|data2|data3|

<table><thead><tr><th>header1</th><th align="right">header2</th><th align="center">header3</th></tr></thead><tbody><tr><td>data1</td><td align="right">data2</td><td align="center">data3</td></tr></tbody></table>

表組

Markdown

Markdown

リンク

<a href=“http://www.google.co.jp/”>Google</a>

[Google](http://www.google.co.jp/)

Markdown

画像

<img src=“img/cat.jpg” alt=“ねこ”>


Markdown

リンク画像

<a href="http://www.google.co.jp/"> <img src="img/cat.jpg" alt="ねこ" /></a>

[](http://www.google.co.jp/)

Markdown

罫線

- - -

<hr>

# Webクリエイターに足りない本当のSEOスキル

## 前提 * 生き残るクライアントと取引しないと共倒れになる * 集客にコストを割くのは当然 * インタビューサイトで人脈、人柄、ライティング能力をアピール

## 間違いだらけのSEO

### SEOとは * 検索エンジンからの動線を最適化する * 検索者の意図に沿った情報発信で、情報を探している人々の来訪を促進する * 情報提供によって潜在客にリーチすると同時に、見込み客へと育成する試み * コンテンツや被リンクなど集客のための無形資産を形成する試み * 広告は出稿をやめたらそこでおしまいだが、蓄積されたコンテンツにはトラフィックを生む力になる * ずっと続いていく投資のようなもの

### 検索の目的 * 調べもの（ダントツ） * 検索エンジンは、本来売り込み（セリング）を意図していない * 分からないことを分かるようにするのが効果的 * 商用ワードやセリングページは、楽天メソッド的LPを最適化してリスティング広告で集客が効率的 * 競合がリスティング広告を出している＝もうかっている * 目的のサイトへの移動 * 買い物

Markdown

Sass

Sassって？

「CSSプリプロセッサ」と呼ばれるCSSメタ言語のひとつ。他に、less、Stylusなどがある。

Sass

なぜSass（CSSプリプロセッサ）？

• 何度も登場するスタイル（コード）に名前を付けて登録、呼び出して利用 →ソースが簡潔に、見やすい

• ボックスのサイズなどを、プログラム処理で自動的に算出

• 複数のファイルを結合したり、改行やインデントを削除したり…… →表示高速化に貢献？

• ツールに含まれていることがある

Sass

Sass

http://sass-lang.com/

1. Macなら「ターミナル」 Windowsなら「コマンドプロンプト」を起動

2. gem install sass 管理者権限が無い場合は、先頭にsudoを付加（sudo gem install sass）

3. 「sass -v」コマンドでSassのバージョンが確認できたら、インストール成功！

Sass

Sassのインストール

具体的に見てみよう

Sass

ul { margin-top: 10px; li {

font-size: 12px; a { text-decoration: none;

&:hover { color: red; } }

} } ul {

margin-top: 10px; } ul li { font-size: 12px;}ul li a { text-decoration: none;}ul li a:hover { color: red;}

Sass

Nested Rules

$green: #4D926F;

#header { color: $green;

} h2 { color: $green; }

Sass

#header { color: #4D926F;}h2 { color: #4D926F;}

変数名は日本語でもOK！

Variables

@mixin kadomaru { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}

#header { @include kadomaru;}#footer { @include kadomaru;}

Sass

#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}#footer { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}

Mixin

@mixin kadomaru($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}

#header { @include kadomaru;}#footer { @include kadomaru(10px);}

Sass

#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}#footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

Mixin（引数）

sass input.scss:output.css

Sass

sass input.scss:output.css --watch

sass scss:css --watch

sass input.scss:output.css --watch --style compact

コンパイル

監視を止めるにはCtrl＋C

body { color: #000; } body h1{ margin:0 }

body { color: #000; } body h1{ margin:0 }

body{color:#000} body h1{margin:0}

body{color:#000}body h1{margin:0}

Sass

body {color: #000; h1{

margin:0;}

}

expanded

nested

compressed

compact

便利なツールいろいろ

CSSフレームワーク

便利なツールいろいろ

汎用性の高いスタイルがモジュール化されており、ユーザーが自由に組み合わせることができる。

CSSフレームワーク

http://foundation.zurb.com/ http://compass-style.org/

便利なツールいろいろ

http://getbootstrap.com

便利なツールいろいろ

<div id="content" class="row">

<div class="col-md-3">

...

</div>

<div class="col-md-9">

...

</div>

</div>

便利なツールいろいろ

<img src="img/cake.jpg" alt=""

class="img-thumbnail">

<img src="img/living.jpg"

alt="" class="img-circle">

便利なツールいろいろ

<img src="img/living.jpg"

alt=“” class="img-responsive">

便利なツールいろいろ

<h3><span class="glyphicon glyphicon-

leaf"></span>おいしいケーキでほっと一息</h3>

便利なツールいろいろ

<ul class=“list-inline”>あ<li><a href="index.html">ホーム</a></li>

<li><a href="menu.html">おすすめメニュー</a></li> <li><a href="access.html">お店へのアクセス</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul>

便利なツールいろいろ

<li><a href="index.html" class="btn

btn-default">ホーム</a></li>

$btn-default-color: #fff;

$btn-default-bg: #9c3;

$btn-default-border: #990;

index.html

_bootstrap-variables.scss

便利なツールいろいろ

Static Site Genarator

静的（static）にWebサイトを生成するためのツール。

全ページ分のHTMLがあらかじめ生成されている。

動的（dynamic）：

要求（HTTPリクエスト）が来たときに、リアルタイムにHTMLを生成する。

便利なツールいろいろ

http://middlemanapp.com/jp/ http://laktek.github.io/punch/

Static Site Genarator

便利なツールいろいろ

http://jekyllrb.com/

便利なツールいろいろ

http://jekyllthemes.org/

便利なツールいろいろ

まとめ

• 便利なツールやサービスは“黒い画面”とセットになっていることが多い →アレルギーをなくそう

• “ハブ”になる技術をマスターしよう

• まずは試してみよう！

まとめ

Thank you !

www.facebook.com/rico.sengan