sketchでwebコーディングしてみる

# Sketch(デザインツール)でwebコーディングに挑戦

## はじめに
今回の対象者(webコーディング)は、[emmet][]を想定したhtmlコーディングとなります。
sketchのプラグインを作る訳ではなく、既に作られたプラグインを利用してのコーディングとなります。
プラグイン開発には、ある程度のjsなどの知識が必要となりますが、
今回、必要な知識としては、基本的なHTMLのマークアップのみとなります。
[emmet][]は、今回のsketch操作で覚えて貰えれば幸いです。
また、環境設定は使用するエディターに依存していますので、[こちら][emmet.io]をご参照ください。
→[英語ムリ〜って方専用][emmet_ja]

[実際の操作している動画][動画]です。*(YOUTUBEに飛びます)*


## Emmetでsketchしてみる
まずは、デザイン的な話は忘れて、emmetとhtmlのコーディングをおさらいしてみます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

```

HTML5は上記のようになりますが、emmetの場合は、`!`だけですみます。
次にもう少し先に進みます。

```html:index.html
	<div class="div_class">
		<ul id="id_name">
			<li class="class_name_1">li_1 in</li>
			<li class="class_name_2">li_2 in</li>
			<li class="class_name_3">li_3 in</li>
		</ul>
		<dl>
			<dt></dt>
			<dd></dd>
		</dl>
	</div>
	<div id="div_id">
		<h1>Title</h1>
		<div class="txt">
			<p class="p_tag">Text<span class="span_tag">span in.</span></p>
		</div>
	</div>

```
上のようなコーディングがしたい...と想定します。
なお今回は、空タグとかあるけど、今回はコーディングルールが目的ではなく、最小コードで多くを学ぶチュートリアルと思ってください。
では、emmetにした場合、どういう風なコーディングになるのかと言うと以下のようになります。
少し複雑ですが、大まかな記述方法を習得できるかと思います。
`{~}`この中括弧内は、基本的に全てがテキストとなります。

```emmet:index.html
.div_class>ul#id_name>(li.class_name_${li_$ in})*3^+dl+^#div_id>h1{Title}+.txt>p.p_tag{Text}>.span_tag{span in.}

```

少し雑な感じはありますが、砕いてみていきます。
まずhtmlで多用する`div`タグですが、こちらは基本的には記述する必要はありません。
じゃー、どうやって記述するのでしょう。

```html+django:index.html
.div_class
<div class="div_class"></div>

#div_id
<div id="div_id"></div>
```
と言うように、class名、もしくはid名を指定してあげて記述します。
なので、間際らしく長ったらしくならずに済みます。
もちろん、`div`としても機能します。

続いて、入れ子の場合は、ブロック要素に依存し、
予約タイプとそうでないタイプで記述が変わります。
予約タイプは、ulやol、dlなどで、そうでないタイプの場合は、
divやh、pなどのブロック要素タイプとなり、以下のように記述します。

```html+django:index.html

.div_class>ul#id_name>(li.class_name_${li_$ in})*3

<div class="div_class">
	<ul id="id_name">
		<li class="class_name_1">li_1 in</li>
		<li class="class_name_2">li_2 in</li>
		<li class="class_name_3">li_3 in</li>
	</ul>
</div>

dl+

<dl>
	<dt></dt>
	<dd></dd>
</dl>

```
自分の場合、通常コーディングでは、
前者の方が多いかもしれません。
ですが、簡易なスタイル作成やデモ時などでは、後者の方のように、
クラスやidなどを考慮しせずに、タグだけってこともあるので、パッと出すために`+`での記述をすることもあります。

おまけとしては、spanなどの特殊なインライン要素はpタグ内であれば、
自動で出力可能なため、divタグのようにclassやidだけでの記述も可能です。
用途に合わせて、記述しましょう。

さらに、`>`や`^`、`+`を指定することで、
入れ子(`>`)、入れ子要素からの脱出(`^`)や隣同士(`+`)なども指定することが可能です。
あとは、以下のように`($~)*n`とする事で、
　ナンバリングや同様な複数のタグを一気に作ることも可能です。
ちなみに、`()*n`カッコ内の要素がn個複製されます。

```html+django:index.html

#div_id>h1>.div_tag{Title}^.txt>p.p_tag{Text}>.span_tag{span in.}

<div id="div_id">
	<h1>
		<div class="div_tag">Title</div>
	</h1>
	<div class="txt">
		<p class="p_tag">Text<span class="span_tag">span in.</span></p>
	</div>
</div>

ul>(li.class_name_${li_$ in})*3

<ul>
<li class="class_name_1">li_1 in</li>
<li class="class_name_2">li_2 in</li>
<li class="class_name_3">li_3 in</li>
</ul>


```

その他の特殊な記述として、imgタグやaタグ、inputタグなどの場合は、classやid以外にも指定要素があるため、`[~]`を利用して、下記のようにして記述します。

```html+django:~.html

a[href=#num1]{link}
<a href="#num1">link</a>

img[src=img/img.jpg alt=image_alt]+input[type=text value=text]+input#checkbox-id[type=checkbox]+label[for=checkbox-id]{checkbox label}

<img src="img/img.jpg" alt="image_alt">
<input type="text" value="text">
<input type="checkbox" id="checkbox-id">
<label for="checkbox-id">checkbox label</label>

```
このように`[~]`に各種属性に対応した内容を指定することで実現できます。
勿論、data-setなども同時に生成することも可能です。

それでは、次回は、もっと踏み込んだemmetに触れていきたいと思います。

次へ続く...



<!-- 各種 Link. -->
Link's
[Sketch][]
[Sketch Emmet][Sketch_Emmet]
[Sketch Plugin][Sketch_Plugin]
[動画][]

<!-- Link's -->
[emmet.io]:https://emmet.io/
[emmet]:https://docs.emmet.io/
[emmet_ja]:http://emmet.56doc.net/#part5
[Sketch]:https://sketchapp.com/
[Sketch_Plugin]:https://sketchapp.com/extensions/plugins/
[Sketch_Emmet]:https://github.com/joelbqz/sketch-emmet
[動画]:https://youtu.be/C6fMReECz3M