コーディングコンテンストについて

4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。

CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。

入賞した作品

応募したのは以下のHTMLになります。

• Movable Type 5

他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。
ちなみに1枚にする前のファイルはこちらにまとめてあります。

詳細は続きから。

前提みたいなもの

ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら…
まったく持って終わらない雰囲気が…！

そしてまさに23時59分30秒くらいまで作業をしていて、ぎりぎり2秒前に応募できました…
ちなみに一番最後の応募だったらしいです（汗

そして提出後、Webkitで画像がうまいこと表示されないことが判明して優秀賞などは無理と判断！

という流れがありました。

提出したものの特長や注力した点

0リクエスト

index.html内からのリクエストを0にするために、cssを直書き・画像をbase64形式で埋め込みなどを行いました。
要するにindex.htmlだけを応募したわけです。

idとclassを多用しないコーディング

良いか悪いかは別として、実験的にidとclassをあまり用いずにコーディングしてみました。
css3のセレクタを多用して組んでみています。
<header></header>
<div id="contents"></div>
<footer></footer>

ぶっちゃけ、idとclassはもっと振ったほうがいいと思いました！

:targetを用いたライトボックス

右上部分にある画像をクリックするとオーバーレイしてライトボックスが出るんですが、そこはJavascriptを使わずに実装しています。
body>aside:last-of-type li{
position:absolute;
top:0;
left:0;
width:100%;
text-align:center;
background:rgba(0,0,0,0.5);
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
body>aside:last-of-type li span{
position:absolute;
top:0;
left:50%;
padding-top:10px;
margin-left:-480px;
text-align:center;
width:960px;
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
li[role="zoomImg"]{
display:none;
opacity:0;
}
li[role="zoomImg"]:target{
display:block;
opacity:1;
}
若干表示崩れを起こしていますが…ご愛嬌ということで。
アニメーションを付け忘れたのが無念…！

css3によるビジュアライズ

各ボタンなどのグラデなどにcss3によるグラデーションや角丸などを使用しています。
というかこれはむしろ当たり前な感じがするので特に触れる必要はないかと思います。

ちなみに地味に苦労したのはヘッダー上部の黒線にシャドウがかかった部分でした。
自分はcss3の「:before」を用いて実装してみました。
header:first-of-type:before{
content:"";
display:block;
background-color:#152427;
height:6px;
position:absolute;
left:0;
width:100%;
-moz-box-shadow:0 1px 2px #666;
-webkit-box-shadow:0 1px 2px #666;
}
という感じです。

まとめ・感想

組んでみた全体的な感想

• idやclassを無駄に振らずにすんだ。
  →これは自分が無理やり実装したからなのですが、命名しなくてよいというのはかなり時間短縮にはつながりました。
• リッチな表現がcss3のみでかなり出来た
• 本来ならJavascriptを用いなければならない部分がcss3で対応が可能になった
  →ライトボックスなどが該当
• 今までグラデなどはスライスすればよかったものが、ピッカーなどを使って再現する必要があったため、逆に時間を浪費した

というように、良いことばかりでは無く悪い点もいくつか見受けられました。

正直穴だらけのコーディングでお恥ずかしい限りですが、沢山勉強になりました。
また名のある審査員の方々に見ていただけて大変光栄でした！

その他のお話

当日の懇親会などで審査員の方何名かにお話をお伺いしたところ　マニアック　や　変　だの　キモかった　だの、非常に嬉しいお言葉をいただけました！

致命的だったのがSafariで画像が表示されなかったことだったそうです。そりゃそうだ…！
あとはそもそも、css3とは別の部分での評価が多かったため　という感じでした。

理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。
ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。

他の応募者様もおつかれさまでした！！

動画デモ

Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。
エディター持って無くてもブラウザだけあればOkですよ！

• kzms2 zen-coding editor

対応ブラウザなど

見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。
※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます…

使い方や詳細は続きから

Zen-codingの概要

Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。

TextMate-and-ZenCoding from komori, masaaki on Vimeo.

以下のリンクが詳しいです。

• HTMLコーディングが3倍速くなる？「Zen-Coding」

ショートカットキーについて

公式にある、PDFのチートシートを印刷して見て置くと良いと思います。
html形式で見たい方は以下の2リンクを見ればよいと思います。

• HTML
• CSS

今回作ったものの説明

やっとこさ今回作ったkzms2 zen-coding editorの説明をしたいと思うのですが、基本的にはzen-codingの形式でコーディングを行えるリアルタイムプレビューつきのエディターになります。

主な機能

• Zen-codingを用いたコーディング
• マルチブラウザ対応（大体のブラウザで動くと思います）
  ※ただし、モバイルなどを除く
• エディターの文字サイズ変更
• エディター内容をHTML形式でダウンロード保存

並べてみるとこんなものでしょうか。

ショートカットキーについて

メニューのhelpを押せば説明が出てきますが、一応ある程度説明をしておきます。（MetaというのはWindowsだとCtrl、Macだと…なんていうんですかアレ）

• Meta+E（Tabも可） — Zen-coding用タグの展開
• Meta+D — タグ内の要素を外側に順番に選択
• Shift+Meta+D — タグ内の要素を内側に順番に選択
• Shift+Meta+A — 任意のタグで囲む
• Ctrl+Alt+→ — 次点の編集場所へ移動
• Ctrl+Alt+← — 前点の編集場所へ移動
• Meta+L — 今居る位置の行を選択
• Meta+Shift+M — 今いる要素内を1行にする
• Meta+/ — 今居る位置の要素をコメントアウト、インする
• Meta+J — 今居る位置の要素をくっつける
• Meta+K — 今居る位置の要素を削除する

あとは適当に触ってみてください。
※特に裏側とつなげてはいないので、オフラインでも動きますが、リロードすれば消えちゃいますので注意してください！

まとめ

• iframe内にhtmlを吐き出すのに苦労した
• 結構さくさく動いて使いやすいかも
• zen-coding変換をするとtextareaの一番上に行くのがちょっと使いづらいかも（Zen-coding側の仕様…）
• まだまだプロトタイプ

とこんな感じかと思います。
需要があればどんどん機能を足して行きたいと考えているので、コメントやTweetをいただければと思います！

目指せなんちゃってエディター！

リニューアルしますた。

Safari4だとキャプチャのように見えるはずです。
古いブラウザやCSS3に対応していないブラウザはものすごい表示になります。
IEで見ちゃいけません。ダメ絶対。
にしてもデザインの苦手なデザイナーだけあって直せそうなところがいっぱい…

明日以降からそこらへんは対応させてください…
といっても、古いブラウザなどはあえて微妙な表示にする予定ではあります。
仕事がNN4とかまでフォローしてるので、プライベートくらいはこんな感じにしたいかなぁと･･･

概要っぽいもの

• このページ画像は1枚も使ってません。凄いですねCSS3は。
  あ、上のキャプチャとその他アイコンはさすがに画像です＞＜
  デザインには一枚も画像を使っていないという意味です。
• アニメーションにJavascriptは使っていません。ChromeやSafari4などでページを見れば所々動きますが、CSS3です

作業時間とか

1. デザインは3時間くらい
2. コーディングは2時間くらい

計5時間くらい。ですがロスタイム含めて6時間ちょいかと思います。Twitterに作業はじめの時間POSTしてるので、それを元に計算しています。
コーディングに関してはIEとかを、ブッタ切ってるので納得の時間ですね…

苦労したところ

1. 地味にWebkit系とMozillaとで、ボックスの考え方が違いました。
   特にbox-shadowを使った場合、Mozilla系はbox-shadow分横幅が伸びて表示が崩れました（今は無理やり表示させてます）
2. TwitterにもPostしましたが「@font-face」を「@font-faｓe」と書いて1時間ほどはまりました…コピペしたはずなんだけど＞＜

明日以降直すところ

1. 古いブラウザなどの対応
2. HTML4の部分をHTML5に変更（ワードプレスの勉強をしないと…）
3. デザインの微調整（微妙にデザイン通りじゃない場所が多いので、調整）

といった感じになると思います。

ちょっと夜更かししすぎたので、後は明日以降の対応で＞＜
質問などありましたらコメントをお願いします。

こういう状態に

※HTMLのサンプルを見る
なったことはありませんか？
半角が「/」や「-」などがない状態で連続して続くと改行しないで、そのまま横に表示されてしまう現象です。

英語とかだと区切りがなかったら1単語なので、改行しないという理由はわかりますね。
でもURLとかだと結構頻繁にあったりして困ったりします。

というか今日困っていた会社の同僚が居たので自分用にもまとめて置いてみようと思います。

自分がこうなったときに参考にした方法やそのサイトのまとめを書きます。
※対応ブラウザは、IE6、Firefox3↑、Opera10、Safari3↑、Crome3を考慮しています。

大まかな対応方法

大きく分けて3パターンあります。

1. CSSのみでボックス内にキチンと収める方法
2. HTMLに強引にタグを追加して、表示する方法
3. CSSのみでごまかす方法

凄いアバウトな説明ですが、上記3つで大体の対応方法が分かれるかなーと思います。
ちなみにお勧め順で記載しています。

1.CSSのみでボックス内にキチンと収める方法

長い単語やURLの改行をコントロールするword-wrapプロパティで紹介されている要素の
word-break: break-word;※HTMLのサンプルを見る
を用いる方法です。
この要素を使えばおそらく期待したとおり、ボックスの横幅でキチンと改行を行ってくれます。

ただこの対応は、OperaとFirefox3では適用されないので、完璧とも言いがたいです。が一番理想的な対応方法のように思えます。
早くFirefox3.5が当たり前になれば問題がないのですが…

2.HTMLに強引にタグを追加して、表示する方法

次の方法ですが、これは表示はどのブラウザでも恐らくほぼ完全に動作するのですが、HMTLソースが汚くなるので2番手となっています。
この手段の場合以下の2通りの対応方法があるかと思います。

1. ​を用いる
2. <wbr>を用いる。

これらは改行させたい文字列の間に、このテキストを流し込みます。どういうことかというと…

例)kzms2

k​z​m​s​2※HTMLのサンプルを見る
k<wbr>z<wbr>m<wbr>s<wbr>2※HTMLのサンプルを見る
といった感じに使用します。上記文字列を入れたところで改行を発生させることが可能になります。
閲覧する分にはなんら影響はないので、場合によってはこの手段の対応でもよい場合もあるのかと思います。

3.CSSのみでごまかす方法

この対応方法は、HTMLはいじらないのですが、本来の要求とちょっと異なってしまうので、3番手の対応としました。
場合によってはこの対応でもアリだったりするかもしれないので、書いてみます。
この対応も2パターンほどあるかと思います。

1. 文章の途中で「…」を用いて文章を短縮してしまう
2. ボックス内スクロールを用いて表現する

CSSだけで文字列を省略して「・・・」を付けて表示する方法のエントリーに記載してあった内容ですが、文言を「…」で隠してしまうことが可能です。

やり方としては、
横幅(width)、white-spce: nowrap、overflow:hidden;
を指定する。

とのことなので、
width:80px;
white-spce:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow:ellipsis;※HTMLのサンプルを見る
上記のように記載することで対応することが可能となります。

また最後ですが、overflow:auto;を用いることによって以下のように表示させる事も出来ます。

この場合、
overflow:auto;※HTMLのサンプルを見る
を追加すれば対応が可能になります。
これはどのブラウザも問題なく同じ挙動になりますが、そもそもの解決になっているかといえば怪しいです…

まとめのようなもの

個人的に対応を行うとしたら以下のようにすると思います。
width:100px;
border:1px solid #33f;
background-color:#fff;
word-wrap:break-word;
overflow:auto;※HTMLのサンプルを見る
と、上記のように「CSSのみでボックス内にキチンと収める方法」と「CSSのみでごまかす方法」の合わせ技で対応するかと思います。
word-break: break-word;をメインにして、対応していないブラウザは、overflow:auto;で吸収、という対応方法です。
実際に見るお客様が、見やすいように出来ればよいので、上記の組み合わせで必要に応じて使用できればいいのではないかな、と個人的には思います。

参考にしたサイト様

1. builder様の長い単語やURLの改行をコントロールするword-wrapプロパティより
2. Web制作で今すぐ使えるテクニック集様のエントリー、CSSだけで文字列を省略して「・・・」を付けて表示する方法より

上記のサイトを参考にさせていただきました。有難うございます。
またこちらの記事の記載事項に問題がある場合、ご連絡をいただければ早急に対応させていただきたいと思います。

いきなりですがサンプル

↓

ソースコードは続きから。

ソースコード

<textarea id="inputTxt" style="height:8em;width:100%;"></textarea>
<div id="targetArea" style="border:1px solid #999;">ここに上で入力した内容がリアルタイムで入ります。</div>
<script type="text/javascript" src="http://kzms2.com/jQuery/jquery-latest.min.js"></script>
<script type="text/javascript">//< ![CDATA[
//お決まりの文
jQuery(document).ready(function($){
//idが「#inputTxt」のところで、キーボードを押し終わった時に
$('#inputTxt').keyup(function(){
//「#targetArea」に、this（「#inputTxt」）のvalueを入れる
$('#targetArea').text($(this).val());
});
})
//]]></script>

いくつか注意とか説明

なんとなくな説明

1. jQueryを用いて実装しています。
2. タグは無効です。有効にするには「$(‘#targetArea’).text($(this).val());」を「$(‘#targetArea’).html($(this).val());」にしてください。
   ただし、ページ崩れたりするのでお勧めは出来ないかもです。
3. キーボードを用いない入力のリアルタイムプレビューは今回対応していません。

たいしたことはまったくしていませんが、こんな感じでjQueryを用いればリアルタイムのプレビューを簡単に作れちゃったりします。

応用編はまたの機会にっ