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

千貫りこ
コーディングがラクになる!?
“自分仕様”のさくさくコーディング法
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

Ruby
https://www.ruby-lang.org/ja/
http://nodejs.jp/
Node.js
gem
npm

道具を使い分ける

Dreamweaver Edge Code 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エディタ
http://25.io/mou/ http://pad.haroopress.com/

具体的に見てみよう
Markdown

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

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

- リスト項目1
- リスト項目2
- リスト項目2-1
- リスト項目2-2
- リスト項目3
箇条書き
<ul>あ
<li>リスト項目1</li>
<li>リスト項目2
<ul>あ　
Markdown
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
</ul>あ
</li>あ
<li>リスト項目3</li>
</ul>

|header1|header2|header3|
|-------|------:|:-----:|
|data1|data2|data3|
表組
Markdown
<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
リンク
[Google](http://www.google.co.jp/)
<a href=“http://www.google.co.jp/”>Google</a>

Markdown
画像
![ねこ](img/cat.jpg)
<img src=“img/cat.jpg” alt=“ねこ”>

Markdown
リンク画像
[![ねこ](img/cat.jpg)](http://www.google.co.jp/)
<a href="http://www.google.co.jp/">
<img src="img/cat.jpg" alt="ねこ" /></a>

# Webクリエイターに足りない本当のSEOスキル
## 前提
* 生き残るクライアントと取引しないと共倒れになる
* 集客にコストを割くのは当然
* インタビューサイトで人脈、人柄、ライティング能力をアピール
## 間違いだらけのSEO
### SEOとは
* 検索エンジンからの動線を最適化する
* 検索者の意図に沿った情報発信で、情報を探している人々の来訪を促進する
* 情報提供によって潜在客にリーチすると同時に、見込み客へと育成する試み
* コンテンツや被リンクなど集客のための無形資産を形成する試み
* 広告は出稿をやめたらそこでおしまいだが、蓄積されたコンテンツにはトラフィックを生む力になる
* ずっと続いていく投資のようなもの
### 検索の目的
* 調べもの（ダントツ）
* 検索エンジンは、本来売り込み（セリング）を意図していない
* 分からないことを分かるようにするのが効果的
* 商用ワードやセリングページは、楽天メソッド的LPを最適化してリスティング広告で集客が効率的
* 競合がリスティング広告を出している＝もうかっている
* 目的のサイトへの移動
* 買い物
Markdown

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

なぜSass（CSSプリプロセッサ）？
Sass
• 何度も登場するスタイル（コード）に名前を付けて登録、
呼び出して利用 →ソースが簡潔に、見やすい
• ボックスのサイズなどを、プログラム処理で自動的に算出
• 複数のファイルを結合したり、改行やインデントを削除し
たり…… →表示高速化に貢献？
• ツールに含まれていることがある

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; }
}
Nested Rules
}
} ul {
Sass
margin-top: 10px;
}
ul li {
font-size: 12px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
color: red;
}

$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
Mixin
#header {
border-radius: 5px;
}
#footer {
border-radius: 5px;
}

@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
Mixin（引数）
#header {
border-radius: 5px;
}
#footer {
border-radius: 10px;
}

コンパイル
sass input.scss:output.css
Sass
sass input.scss:output.css --watch
sass scss:css --watch
監視を止めるには
Ctrl＋C
sass input.scss:output.css --watch --style compact

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

<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>

index.html
<li><a href="index.html" class="btn
btn-default">ホーム</a></li>
_bootstrap-variables.scss
$btn-default-color: #fff;
$btn-default-bg: #9c3;
$btn-default-border: #990;

Static Site Genarator
静的（static）にWebサイトを生成するためのツール。
全ページ分のHTMLがあらかじめ生成されている。
動的（dynamic）：
要求（HTTPリクエスト）が来たとき
に、リアルタイムにHTMLを生成する。

Static Site Genarator
http://middlemanapp.com/jp/ http://laktek.github.io/punch/

http://jekyllrb.com/

http://jekyllthemes.org/

• 便利なツールやサービスは“黒い画面”と
セットになっていることが多い
→アレルギーをなくそう
• “ハブ”になる技術をマスターしよう
• まずは試してみよう！
まとめ

Thank you !
www.facebook.com/rico.sengan

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to コーディングがラクになる！？ “自分仕様”のさくさくコーディング法

Similar to コーディングがラクになる！？ “自分仕様”のさくさくコーディング法 (20)

Recently uploaded

Recently uploaded (6)

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