人気ブログランキング | 話題のタグを見る

label のfor属性

HTML の label 要素の属性に for というものがあるが、意味が分からなかった。for 属性の値を他の input 要素の id と同じ値にしておくと、その要素と label 要素が連動するのだそうだ。

次のようなスクリプトで試してみたら、ラベルの文字をクリックすると checkbox の on off の切り替えができた。便利なものだ。

<input type="checkbox" name="" id="check1">
<label for="check1">label</label>

HTML 5 の input 要素には type="color" というカラーコードを取得するためのものがある。つぎのようなコードでカラーパレットから選択した色のコードを取得できる。

<input type="color" onchange="d_ocument.getElementById('color_code').value = this.value;">
<input type="text" id="color_code">

こういう要素的な組み合わせを試して知識にしておくとよいのだろう。昔に比べると、JavaScript でできる表現の範囲がどんどん広がっているので扱うのが楽しくなってくる。HTML edit E を使うと、このようなスニペットの実験が手軽にできるので面白い。Haskell の ghci もそうだが、小さいプログラムの結果が即座にわかるという対話的な環境は、プログラムすることの楽しさを教えてくれる。

このようなスニペットの知識は、将棋における詰将棋のようなものだ。とにかくたくさんインプットしておかなければ役に立たない。しかし、どんな小さなプログラムでも動いたときのうれしさは格別だ。JavaScript もその楽しさを手軽に味わえるところまで環境が整ってきている気がする。


# by tnomura9 | 2016-01-11 15:24 | JavaScript | Comments(0)

HTML edit E

Emmet プラグインを導入した HTML のオンラインエディタを作りました。Emmet は Zen Coding の後継バージョンです。

HTML edit E

Emmet では、CSSセレクタの略号を展開するのに Tab キーを使います。エディタの下段のテキストエリアに、

!>ul>li{name $}*5

を入力して Tab キーを押してみてください。展開された文書は、実行ボタンをクリックするとレンダリング出来ます。

Emmet のホームページ(英語)は次のリンクです。

Emmet - the essential tool kit for web-developpers

Emmet の日本語の解説は次のリンクです。

HTML/CSS を爆速コーディング Emmet 入門

Emmet の Cheat Sheet は次のリンクです。

Cheat Sheet

HTML edit E は PDS (public domain software) にします。Emmet は MIT ライセンスです。

# by tnomura9 | 2016-01-09 14:00 | JavaScript | Comments(0)

Zen Coding でまとめて展開する。

Zen Coding では + 演算子を使うと複数の要素をまとめて展開できる。(下の例は HTML BOX Z で Ctrl+E で実際に展開できる。)例えば、前回のタプを作るプログラム例では、

html:5>(ul#tabbox>li#tab$.tab*5>a)+div#line

を展開すると、HTML部分を一気に展開できる。

スタイルシートについても、head タグ以下で

style

を展開した後、style タグ以下に、

#tabbox {

を入力して改行した後

list:n

を展開するのは、普通の手順だが、

.tab {

を入力して改行した後、

bgc+w+h+fl:l+ml

を展開すると、複数の CSS の要素を一気に作成できる。仕上げは、

#line {

を入力して改行した後、

bgc+w:a+h+cl:b

を展開する。それぞれの要素のパラメータの値を調整して HTML BOX の実行ボタンをクリックするとタブの出来上がりだ。

Zen Coding を使ってわかったことは、HTML や CSS のコーディングはやりたいことを実現するために10倍のキー入力が必要だったということだ。Zen Coding のおかげで冗長な情報をカットして、やりたいことに集中することができる。このような省略形をパーサで解析して展開する方法は、HTMLのみならず様々なプログラム言語のコーディングでも使えるアイディアだろう。

これを見ても、プロプラムの開発におけるパーサの重要性は明白だ。パーサの知識に熟知し、あらゆる場面でパーサを利用していくことが、言語設計のみならず一般的なプログラム開発の上でも重要な技術となっていくのではないだろうか。

Zen Coding のもう一つの利点は、新しい言語を覚えなくても良いということだ。タグやセレクタの知識があればすぐにでも Zen Coding を使ってプログラムを書くことができる。他のプラグインのように独自の文法を覚える必要もない。このことが Zen Coding の使いやすさにつながっているのではないだろうか。このような習得への壁の低さは、多人数でプログラムを開発するときに重要な利点となるだろう。

Zen Coding の存在はプログラムの開発効率の向上について新しい視点を与えてくれているのではないかという気がする。

Zen Coding はたくさんの省略形を覚えないといけないが、次のリンクに一覧表があるので参照しながら作業ができる。



# by tnomura9 | 2016-01-07 23:50 | JavaScript | Comments(0)

Zen Coding でタブを作る

Zen Coding の練習に前回紹介した HTML BOX Z を使って、CSS でタブを作る方法を試してみた。

まず HTML 5 文書のひな形を作るために HTML BOX のテキストエリアに次のように入力した。

html:5

これを展開するために Ctrl+E を入力すると HTML 5 文書の骨格ができる。カレットは body タグの中に入っているので次のように入力して ul リストを作る。

ul#tabbox>li#tab$.tab*5>a

これは ul タグの id が tabbox でその中に li を id が tab(n) で class が tab のものを5つ作り、li タグの中に a タグを入れるという意味で。Ctrl+E で展開することができる。Mac OS の場合は Ctrl ではなく command キーになる。

そこでアンカータグの中に name 1, name 2, ... , name 5 と入力していき、HTML BOX の実行ボタンをクリックすると preview 画面にリストが表示されるのがわかる。

次に、スタイルシートで加工していくために head タグの下で次のように入力する。

style

Ctrl+E で展開するとスタイルシートの正式なタグが表示されるので改行で成形して中に CSS 要素を作成する。まずリストアイテムのマーカーを消したいので #tabbox のスタイルシートを作る。

#tabbox {

と入力して改行すると } が補完されるので、

list:n

と入力して Crt+E で list-style-type に展開する。効果を確かめるために HTML BOX の実行ボタンをクリックするとマーカーが消えているのが確認できる。

次に li ボックスを加工する。

.tab {

と入力し改行した後、

w

と入力し Crtl+E で展開して width:100px; を完成させる。次に、

h

を展開して height;40px; を完成させる。次に、背景を pink にするため、

bgc

を展開して、background-color:pink; を完成させる。確認のため実行ボタンをクリックすると設定がうまくいっているのがわかる。

li ボックスは縦ではなく横に並べたいので float:left; に設定したいので次のように入力し、

fl:l

Ctrl+E で展開する。HTML BOX の実行ボタンをクリックすると li タブが横に整列しているのがわかるが、タブとタブの隙間がないのでマージンを 4px 取るため、次のように入力して、

ml

Ctrl+E で展開し margin-left:4px; とする。HTML ボタンをクリックするとタブの間が開いているのがわかる。最後に境界線を引くために ul 要素の下に div 要素を作る。body 要素の中の ul 要素の下にカレットを持ってきて、

div#line

と入力し、Ctrl+E で展開する。これを成形するために再び style 要素に戻り、

#line {

と入力して改行した後、

w:a を展開して width:auto; を作り、h を展開して hight:2px; を作る。また bgc を展開して background-color: red; を作る。そこで HTML BOX の実行ボタンをクリックして確認すると線がタブの上に来てしまっている。これは li 要素の float;left; の影響なので #line の CSS に、

cl:b

を展開して clear:both を作成する。また、選択されたタブの背景色を赤にするために、

#tab1 {

と入力して改行し、

bgc

を展開して background-color:red; を作成する。最後に HTML BOX の実行ボタンを押すとタブが完成している。

Zen Coding を使うとキー入力の負担が必要最小限になるので疲れない。また、入力のたびに実行ボタンで確認していくので、自分が何をしているのかが分かりやすい。

Zen Coding では省略形が HTML や CSS の要素の数だけあるが、Zen Coding のダウンロードファイルの中の圧縮していないソースの冒頭のオブジェクトは省略形とその展開の対応を示しているので、これをプリントアウトしておけば、使いたい要素の省略形を見つけることができる。

Zen Coding には省略形の展開以外にも色々な機能があるようだが、さしあたって Ctrl+E の展開を利用するだけでも HTML や CSS のコーディングの苦痛を劇的に取り去ってくれる。



# by tnomura9 | 2016-01-07 02:00 | JavaScript | Comments(0)

Emmet

Zen Coding がすごいなと思って喜んでいたら、Emmet というのに進化していた。

Emmet - the essential toolkit for web-developpers

Zen Coding を導入したばかりで Ctrl+E で喜んでいる段階なので、まだ手を付ける気にならないが、きっとすごく便利なのだろう。

# by tnomura9 | 2016-01-06 08:01 | JavaScript | Comments(0)