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

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

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

More Related Content

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