そんな訳で、もっとチラシの裏っぽいところが欲しくてtumblrで書いてみたりもしていたのですが、結局自分で作りました。

1026.tv

tvに特に意味はなく、たまたま他所に取得されてなかっただけです。
本当は jp か me あたりが欲しかったです。

そういうわけで、本年も1026をよろしくお願いいたします。

そんな中、StyleDocco、KSSはともかく、kss-nodeのデフォルトテンプレートが非常に残念な感じになっており、「悪くないのにこれじゃあ導入しにくい」なんて方もいらっしゃるのではないでしょうか。

かくいう私も、先日twitterにて「kss-nodeのデフォルトテンプレートが微妙すぎるのに、探しても全然見つからない。もっと、みんな作って公開すればいいのに。githubのとかいいよねぇ」的なことを話していたところ、CSSプログラマーに「おぬしがつくれば」と言われてしまいました。
その場では聞こえないふりをしたのですが、結局作ってしまいました。

kss-node-template-such-as-github

kss-node-template-such-as-github

GitHubのようなkss-nodeテンプレート。何のひねりもない名前です。

kss-nodeとはなんぞやということや、使い方は割愛します。
知らない方はググってください。

石本さんがgrunt-plugin化したgrunt-kssを作っていたんで、grunt導入済みの方はそちらをご利用になると便利かもしれません。

微妙に余計なpタグが入ってきていてinlineにしてやったりと、無理やりっぽいところはありますが、とりあえずKSS・githubのスタイルガイドにそっくりです。
素敵です。

著作権とかライセンスとか的なところが気になりますが、とりあえず公開します。
なにかあれば、適当にPull Requestでも送ってくださっても、自分だけこっそり直して使っていただいても構いません。

怒られたら消します。

個人的には、2012年はCSSプログラミングに出会ったことで、コーダーの仕事にありつくわ、web系の知り合いが増えるわ、jsdo.itの公式ブログに載るわと、CSSプログラミングによって大きな変化があった一年でした。

というわけで、今年最後のCSSプログラミング作品をひとつ。

昨年作った「除夜の鐘」をforkしたものですが、noJS pureCSSにしました。お暇でしたら、108回鳴らしてみてはいかがでしょうか。

いつも通りchromeのみです。
buttonはsimuraiさんのこれを貰って来ました。

それでは、2012年ありがとうございました。来年もよろしくお願いします。よいお年を。

予告どおりギャンブルの定番スロットゲームです。

前回のフリースローで学んで、回転速度を相当遅くしてみたのですがどうでしょうか？
MAXBETボタンとコイン枚数の表示は飾りです。1枚しかbetできませんし、コインは返って来ません。そんな飾りはあるのにコイン投入口はありません。

大当たり（大したことないですが一応）は777だけです。謎の小当り的なもの（パネルの表示がちょっと変わる程度）が結構あります。

いつも通りChromeのみの動作確認です。

適当な解説

基本的にはフリースローと同じ

小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば地味です。トリ前なのにスミマセン。

ただ、フリースローが上・中・下 or 左・中・右の3種のボタンの順序切り替えなのに対し、こちらはリールの数字１つずつで10種のボタン切り替えなので面倒です。とはいえ、CSS上は似たようなことの繰り返しなのでsassで処理させてもらいました。

ボタンの切り替え速度が速いので、結構ズレます。数字が揃っていないくてもアタリになったり、揃っていてもアタリにならなかったりすることが稀によくあります。仕様です。

リールの回転はstepsで

リールの作り自体は既にコロプラさんというか@mattari_pandaさんが、『CSSアニメーションでスロット風くじを実装：後編』として良い感じに説明してくださっているので、見た目の感じなどはほぼ丸っと参考にさせていただきました。

ただし、今回はnoJSですのでリールがいい感じに滑ったりはしてくれないため、普通にアニーメーションしてしまうと中途半端な位置で数字が止まり、どの数字で止めたのかわからなくなっています。そこでanimation-timing-functionをstepsで指定することで、カクカクにはなりますが、ちゃんと数字が中央で止まるようにしています。

実際、stepsを指定したときとしていないときの差は、2日目まとりさんの『CSS Stopwatch』にて、カウントスタイルを切り替えてもらうとわかりやすいと思います。

<input type=”reset”>

ちょっとした新機軸はresetでしょうか。今まではリセットするときはリロードで誤魔化すことが多かったですが、「スロットで毎回リロードはなぁ」と考えていて思いつきました。というか、こんな単純なこと何故今まで思い浮かばなかったんでしょうか。

ただし、毎回resetで全てのinputからcheckedを外してしまっているので、コイン枚数の計算などが出来ないという少々残念なことにもなっています。

前回作る予定だったパズルは、このresetを利用して、上海を作るつもりだったのですが（選択中の牌のペアになる牌以外はresetになっていて、他の上海同様に選択中の牌の解除が容易にできるモノ）、上海は2枚一組で牌を消していくゲームであるものの同一牌自体は2枚以上あることに気づき「これでreset使ったら消した牌まで復活しちゃうじゃん…」ということでポシャりました。

電光パネル

パネルは5509さんの『電光掲示板をあのmarqueeとCSS3のグラデーションで』の色を調整したくらいです。

今回見た目に関しては、本当に色々な方を参考にさせていただきました。

SCSS

最初の方に適当なmixinが書いてあるのは、jsdo.itがcompassに対応する前に作り始めて珍しくchrome以外でも見れるようにしようと思ったのですが、面倒くさくなって途中で辞めた名残です。

最初にも書いたボタンの重なりの切り替えに関して、scssファイルで言う500行目過ぎからなんですが、keyframesも@forで処理しています。keyframesの%前に変数を使った場合、%をそのまま%と書くとエラーが出ます。今回は $per: unquote(“%”); なんかを先に作って #{$per} で出しましたが、 多分 #{‘%’} あたりでも大丈夫なんじゃないでしょうか。似たようなことをする場合、適時処理してやってください。

見た目

大当たり時に出る画像以外は全てCSSで表現しています。前述のとおり、色々な方を参考にさせていただきましたし、見た目が一番頑張った気がします。

次回予告

明日はいよいよ最終日、我らが（？）jsdo.itチームさんです（ まさかここ？いや、多分この辺かな？）。
まとめと言いながら、何か凄いものを作っているらしいので期待しましょう。

さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。

クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか…

フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない（という言い訳で若干面倒くさい）ので辞めました。

適当な解説

画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画像はルーペの背景画像になっていて、同じくhoverに合わせて背景の位置が動く仕組みです。元画像と拡大画像の端を合わせるのがちょっと面倒くさかったです。いつも通り、細かいことは、ソース見て下さい。

CSS3でマウス追尾/Mouse Following Arrowあたりと似たような感じのはずです、多分。

コードは短くしよう

できる限り精密に動くように、1×1のdivを敷き詰めようとしたのですが、divの数が云万になり空divとは言え尋常じゃないくらい重くなってしまいました。更に、cssの方はsassさんというかrubyさんというか兎に角その辺に「でかすぎてコンパイル出来ねーよ」と怒られてしまいました。そんなことが起こることを初めて知りました。expandedでコンパイルしてどれくらいだったのでしょうか。単純に考えると10×10の公開作品で6000行なので、1×1なら100倍して60万行？

自動生成できるからといって、サイズが大きくなりすぎるのはやはりよくありませんね。気をつけましょう。（htmlも元はJSで作ったのは秘密）

結局はdivを徐々に大きくしていき、10×10で作りましたがwebkit以外だと未だにかなり重いと思います。

CSSプログラミングについて

作ったものがかるいので、CSSプログラミングの制作について話します。

制作にはどれくらいかかるの?

リアルで人に会うとちょくちょく聞かれます。

実際の作業に関して

「大してかからないんですよ」と答えていますが、実際仕組みを作るということに関しては大してかかりません。特に最近はCSSプリプロセッサーがあるので、CSSプログラミングでよくある面倒くさい繰り返し作業もサラッとやってくれます。

今回の作品群は割りと仕事の空いた時間等でちょこちょこ作っているので何ともいえないのですが、CSS Minesweeperあたりは土日の2日で大体作った気がします。まぁ、二桁時間もかかっていないでしょう。更に、あれは実際にゲームをクリアして作りやすそうな座標をさがすとか、その座標をチマチマhtmlに打つとかそういった作業に時間を食っています。座標打つのは苦痛以外の何モノでもありませんでしたｗ

CSS Minesweeperは動きがないのでそういった感じでしたが、前回のCSS FreeThrowやCSS Baseballはボールの動きや時間配分を調整するのに時間がかかりました。特に、CSS FreeThrowはボールもCSSで作ったので、その辺や、メーターとボタンの連動に関するデバッグというか調整というか、そういうことに割りと時間をかけています。

まぁ、そういった感じで、CSSプログラミングとはいえ実際の作業は、仕組みを作るより装飾などのほうがよっぽど時間が掛かっています。実際、そこをある程度凝らないと結構な仕組みでもパッと見、大したものに見えなくなりますし、個人的にはゲームとして作ることが多いので見た目をある程度凝ったほうがウケもいいです。そういう意味では、装飾に命をかけたCSSのみで作ったアイコン等のほうが、実際の作業時間としては長いかもしれません。

1%のひらめき

プログラミングにかかる時間は9割が考えたり調べたりする時間で、実際にコードを書くのは1割くらい、などと言う話を聞いたことがありますが、CSSプログラミングに関しても似たようなものです。

ただ、CSSプログラミングにおいてはどう作るかと言うよりは、何が作れるかということを考える時間が長いです。まぁ、「作れるものを考える≒仕組みを考える」みたいなものなんですが。

普段は思いついた時に作るのでいいのですが、今回のAdvent Calenderでは期限が決まっているため、一体何が作れるだろうかと、Flashゲームやスマホゲームを見まくりました。見ても何も思い浮かびませんでしたが…

逆に言えば「あっ、これはCSSで作れそう」というひらめきがなければ、一生作れないかもしれません。

なんでJS使わないの？

ロマンです。

CSSプログラミングをする利点は？

本来の使い方か否かは別にして、CSSには詳しくなれます。また、思わぬバグを発見できたりします。バグを見つけることが利点か否かは置いておくとして、知っておくのはよいことだと思います。先日もテスト用に::before、::afterを使おうとしたら予想以上に面倒くさい現象に出会いました（inputに対する::before、::after）。知らずに実務で遭遇すると詰むようなことも、事前に知っておけるというのは良いことです。（実務で使わないような事のほうが多い気もしますが）

次回

明日は、Tenderfeelさん（16日ぶり2回目）です。急遽名乗り出てくれました。よろしくお願いします。

自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です（今自分で考えました）。

最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。

適当な解説

メーターとボタンの連動

CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput（ここでは其れに対応するlabel）を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重ねておいて必要なのを一番上にすればばいいじゃん」という発想はno JS Loop Sliderあたりでも使いました。
inputが順番にz-indexで入れ替わる仕組みは、CSS Minesweeperのときのランダム風な動きと同じ要領です。サムの動きのanimation-durationとボタンになっているinputのanimation-durationを同じにしてやればいいわけです。

inputは高速で動くとcheckedが入らない

CSS BASEBALLの時に学びましたが、動いているinputは非常に押しにくいです。ましてやこれはコンマ何秒という速度で入れ替わっているので、そのままでは、とてもクリックを認識してくれません（checkedはJSでいうMouseUp時につきます）。そこで、CSS BASEBALLの時に教えてもらったようにactiveになると動きを止めるようにしています。止めるのがボタンだけではメーターとずれるので、勿論メーターも止めています。checkedだけでなくactive等に関してもlabelとinputが連動していて助かりました。それでもcheckedがつかないことがまれによくあります。

動作の不具合を作りの緩さを誤魔化す見た目

そんな不具合や画像を使わない作りこみのなさを誤魔化すための、安いゲーム風の見た目です。寂れたサービスエリアのキーホルダー売り場に売っているようなゲームですから、ちょっとやそっとのバグはお気になさらずに。両方のメーターが止まってもボールが飛んでいかない場合は、後から押した方のボタンをもう一度押すといいはずです。

結論：ソース見ろ

いつも思うんですが、僕のCSSプログラミングの解説はまったく解説になってませんよね。でも、inputで云々というCSSプログラミングお決まりのパターンを繰り返しているだけなので、ソース見てもらえばいいと思います。

おまけ

ちなみにsass先生に大活躍していただきましたが、画像をdateURIにしたわけでもないのexpandedでコンパイルしたら3000行を超えていて気持ちが悪くなりました。

次回予告

個人的

最低あと2回は記事書きますが、1回は今回同様の仕組みで作るアレです。twitterでネタバレしたアレです。

全体的

13日目の明日は…（あれ？また？）…げこたん（5日ぶり3度目）です。大丈夫なのでしょうか。

[ incomplete ] CSS Invaders

インベーダーを作りたかったというのはわかっていただけると思います。

敵の横移動が絡むと予想以上に自機の動きや位置が綺麗にできず、面倒くさくなって投げちゃったってとこです。

打つシステムとしては、敵をラッピングしているlabelを縦長に伸ばして、敵を直接クリックせずとも、その延長線上をクリックすると打った風になるという感じです。
この説明では何を言ってるか全くわからないと思うので、ソース見てください。

こういった、クラス名だけ変えて延々繰り返しみたいなコードを書くときはSCSSはほんとうに便利ですね。人力では絶対書きたくないです。

お暇な方、興味のある方は、forkして調整・機能追加してみませんか？
『皆で作ろう、CSSインベーダー』

まず、げこたんがスコアつけてくれたよ。
スコアをつけました forked: [ incomplete ] CSS Invaders

それくらいなら、人じゃなくても出来るのでtwitter botにやらせてみました。

特別転進強要面談bot

特別転進強要面談bot

仕様

・10分に一度、このまま仕事を続けてもらうのは難しいという旨のツイートをします。
・リプライを送るっても同じ旨のことを言われます。
・「やめて」と言っても、面談はまた行われてしまうようです。

注意：別にどこかの企業をdisったりしてるわけではないので、本気にしないで下さい。

変えた所

Topを消した

いらん。あんなん、いらん。

マージンをとった

前の絶望的な見難さは絶対にマージンが足りないからだろう、ということで、線を減らしてマージンを割りと広めに取りました。それでも線のせいなのか、まだ微妙に圧迫感があるような気もするんですが、見すぎてよくわかんなくなったということで。

記事の見出し周り

前はちょっと太く大きくなる程度で適当だったので、見出しだとわかりやすいようにしました。

記事のaside

投稿日だけでなく編集・追記日も表示させられます。新機軸

背景のラインはcanvas

canvasを使ってみたかっただけです。高さ調整の問題で最後に表示させているのでjsdo.itのコードを貼っているページは表示が遅くて困ります。

表示速度

珍しくその辺もちょっと拘ったので割りと速いと思います。

クロスブラウザ

前はIE8も怪しかったですが、今回はIE8まではOKだと思います。其れ以下なんてものは知りません。
ただIE9だとタグの色が薄すぎるかも。

維持した所

タグ表示

タグ表示は最早ポリシーといってもいいレベルなので変えません。
ちなみに</ul>が一個何処かの時空に消えています。本当に見つかりません。

コメント欄はなし

これは付けたかったんですけど、付ける面倒臭さに対してリターンのコスパが悪すぎるのでまたなしで。

ざっと、以上ですかね。
なんだかんだ言っても、デザインの方はさっぱりな人間なので大したことはありません。細かく突っ込まないで下さい。一応、見やすくなったような、まだなってないような…

リニューアルに伴い、凄く大したことない記事を削除し、大したことない記事を追加しました。
正確には全部削除して一部だけコピーしたんですが、まぁそういう感じです。

『ループ』スライダー。これ重要

ただのno JSスライダーなんてものは既に500人くらい作っていると思ったのであくまでループスライダーであることにこだわりました。

JSで作る場合と同じく、ラップを動かして一番端に来た時だけホゲホゲしてやれば一番きれいに出来るのではないかと思ったのですが、こういう問題などがあり出来ませんでした。

そういった訳でz-indexで調整して色々見えないようにしながら裏で画像全部をブンブン振り回す感じで作りました。

珍しくChromeだけでなくIE9以上なら動くものができたので（アニメーションの可否は除いて）、SCSSあたりで汎用性のあるものにしたかったのですが、function周りをいまいち理解していない僕には無理でした。

デフォのデザインとちょっとオサレにしたのの２点

おまけ：すごい人と喋ったよ。