Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

CodeIQ | 『EmmetでHTML高速記述 Lv1, Lv2』問題 @tbpgr #CodeIQ

概要

『EmmetでHTML高速記述 Lv1, Lv2』問題

詳細

『EmmetでHTML高速記述 Lv1, Lv2』問題 の出題を開始しました。

『EmmetでHTML高速記述 Lv1』
https://codeiq.jp/ace/tbpgr/q725
『EmmetでHTML高速記述 Lv2』
https://codeiq.jp/ace/tbpgr/q746

CodeIQブログ中間ランキング
http://codeiq.hatenablog.com/entry/2014/02/24/155219

CodeIQ MAGAZINE最終ランキング(要ログイン)
https://codeiq.jp/magazine/2014/03/7195/

しえるさん(@cielavenir)製の優れもの採点ツール

https://dl.dropboxusercontent.com/u/110505645/CodeIQ/2014/02/emmet/emmet.html

しえるさんありがとうございます!

どんな問題?

HTML,CSS等を素早く書くためのツールであるEmmetに関する問題です。
昔から知っている人はZen-Codingといったほうが通じやすいかもしれません。

コードゴルフ形式で短いほど高評価になっています。
通常のプログラム言語によるコードゴルフは、突き詰めるとトリッキーな内容になりますが
Emmetについてはそもそも短く書くことが目的なので実益も兼ねていています。

難易度別に2問用意してあります。
2問こなすと、EmmetのHTML向けの基本的な文法をひと通り把握できるようにしました。

文法を詰め込んだ結果、生成対象のHTMLが全く意味のないものになっていることを
予めお詫びいたします。

Emmetについてもう少し詳しく

元々はZen-Codingというツールでしたが、途中でEmmetに変更になりました。

エディタ・IDEのPluginやWebのツール、htmlのtextareaにツールとして設定したりと
多種多様な形態で提供されています。

基本的な構文はさほど多くない。
CSSの省略記法は元の名前を短縮したものがベースなので覚えやすい。
チートシートも色々とネット上にある。
と、習得のための敷居はとても低く導入も楽なので技術として投資効率が良いと思います。

・本格的にHTML、CSSを書く人
・小さなHTMLのサンプルでHTMLやJavaScriptの動作検証をする際など
JavaDoc内のAPIコメント中のタグ

など、様々な人の役に立つと思います。
また、

Haml
XML

などの記述にも利用出来ます。

アンケート

Emmetをはじめて利用する方も多いと思います。
気が向いたら下記のアンケート内容でツイートしてみてください。

フォーマット

1.利用経験、2.継続利用について、3.フリーメッセージ #Emmet問題アンケート

1.すでに使っている、2.今後も使おうと思う、3.なし #Emmet問題アンケート
1.はじめて、2.今後も使おうと思う、3.便利! #Emmet問題アンケート
1.はじめて、2.別に使いたくない、3.覚えるのが面倒 #Emmet問題アンケート

Lv1 経過情報

日次 総人数 平均文字数 最短文字数
2014/03/10 10:00:00 100 78 75
2014/03/09 23:00:00 99 78 75
2014/03/08 22:30:00 97 78 75
2014/03/07 22:50:00 96 78 75
2014/03/06 22:35:00 90 78 75
2014/03/05 23:35:00 89 78 75
2014/03/04 22:40:00 83 78 75
2014/03/03 23:05:00 78 79 75
2014/03/03 00:00:00 75 79 75
2014/03/01 23:00:21 74 79 75
2014/03/01 00:30:21 74 78 75
2014/02/27 23:31:00 71 78 75
2014/02/26 22:00:43 65 79 75
2014/02/25 23:19:00 64 78 75
2014/02/24 23:30:00 59 77 75
2014/02/24 00:38:00 56 77 75
2014/02/22 22:24:00 50 77 75
2014/02/21 23:22:00 47 77 75
2014/02/20 23:43:00 43 77 75
2014/02/19 23:30:00 36 77 75
2014/02/18 22:25:00 29 78 75
2014/02/17 23:15:00 17 79 75

Lv2 経過情報

日次 総人数 平均文字数 最短文字数
2014/03/08 22:45:00 74 152 144
2014/03/07 23:10:00 72 153 144
2014/03/06 22:40:00 69 152 144
2014/03/05 23:50:00 67 153 144
2014/03/04 22:45:00 65 152 144
2014/03/03 23:20:00 63 153 144
2014/03/03 00:10:00 62 153 144
2014/03/01 23:00:00 61 153 145
2014/03/01 00:30:00 61 153 145
2014/02/27 23:45:00 60 153 145
2014/02/26 22:04:32 56 153 145
2014/02/25 23:32:16 54 153 145
2014/02/25 00:00:02 52 153 145
2014/02/24 01:00:28 51 153 145
2014/02/23 00:06:00 44 154 145
2014/02/21 23:33:52 40 154 145
2014/02/21 00:00:00 36 154 145
2014/02/20 00:00:00 32 155 145
2014/02/18 23:32:00 23 155 145
2014/02/18 00:20:00 13 160 149

Emmet Lv1 フィードバック誤記述の修正

下記の部分が誤っておりました。申し訳ございません。

解答例
修正前

!<.class_div$#id_div${inner_div$}*5+hr+table<(.row$<.col${inner_column$}*5)*2

修正後

!>.class_div$#id_div${inner_div$}*5+hr+table>(.row$>.col${inner_column$}*5)*2

解答ポイント(タグ名を省略するとdivタグになります)
修正前

html<head+body<[id='div']

修正後

html>head+body>[id='div']


フィードバック文中の誤記述
修正前

あなたはの答案は

修正後

あなたの答案は

参考情報

公式サイト
http://docs.emmet.io/

Emmetツール一覧
http://emmet.io/download/

問題の評価に利用するツール。htmlなのでブラウザがあれば利用可能です。
https://github.com/emmetio/codemirror