HTML5 / Drkcore

css2stylus

Thu, 05 Apr 2012 09:30:18 +0919

あまりcssいじりは好きじゃないんだけど、やるんだったら楽をしたいのでcss2lessを入れてみた。

sudo wget https://raw.github.com/sickill/css2less/master/css2less.rb -O /usr/local/bin/css2less
sudo chmod a+x /usr/local/bin/css2less

個人的にはlessよりもstylusのほうが好み（インデントの表現のほうがわかりやすい）なんだけど、css2stylusがないんだよなぁとおもいつつコマンドヘルプを見たら-Cオプションでcssをstylに変換できるんだった。

というわけで自分の.bashrcに

alias css2stylus='stylus -C'

って書いて解決。less2stylusがやりたければlessからcssにコンパイルしてcssをstylにすればイイ。

Bootstrap2を利用したイイカンジのサイト

Tue, 27 Mar 2012 20:21:59 +0919

最近bootstrap2を使い始めていて、FlaskとかExpressとかのスケルトンとして使えたら便利だろう（職場のサイトでは必要十分な気がする）なーとbootstrap2を中途半端に利用していい感じに仕上げているサイトを探している。

wordpressだといくらでもチュートリアルが見つかるんだけど、bootstrapはなかなか見つからないのはなんでじゃろかねーとか思いながらBuilt With Bootstrapを見ながらヨサゲなサイトを探していた。

bootstrapのテーマを売っているサイトもみつけた。

グリッドデザインに使えるツールいろいろも役に立ちそうな気がするが。

個人的にはFlask+bootstrap2+Brunchですぐに開発できるようにしておけば最高なんじゃないかなぁと思っているので、今度のつくる会でハングマンのサンプルをこの構成で書きなおしてみるっていうのも面白いかなと。

JavaScript Web Applications
Alex Maccaw
Oreilly & Associates Inc / 3020円 ( 2011-08-30 )

静岡Developers勉強会第4回HTML5読書会

Thu, 02 Feb 2012 06:46:45 +0919

三島でやります。

HTML5＆CSS3実践入門　最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )

今回は、ローカルストレージ、websocket、History APIあたりなので、以下の話題に興味があれば参加すると面白いかもしれません。

次の本

入門Gitを推しておきます。GitHubでフォローしているShizudeverいないんだよね、増えたらいいなっていうのが理由の一つ（他のサービス使っているんだろうか？）。もうひとつはブランチの切り方がイマイチきちんと身についてないので、勉強会で人が集まれば複数人作業ってのを試すことができるかなと。

入門Git
濱野純(Junio C Hamano)
秀和システム / 2310円 ( 2009-09-19 )

サークルグラフをフジテレビ風ソースでCanvasに添えて

Sat, 28 Jan 2012 16:31:49 +0919

波線で棒グラフの印象操作をするのは既に古典中の古典だが、斬新すぎる円グラフの表現方法をみつけたのでCanvasでやりたくなった。ちょうどHTML5読書会でCanvasいじっているので黙々してみた。

タイトルは、懇親会がフレンチの店なので合わせてみた。

センターずらすメソッドかなぁと思いながら作ってみたら、アークじたいが嘘っぱちだったという、、、

もはやグラフですらなかった。斬新すぎ。たぶん司会者の人は「サイレントマジョリティを考慮してます」とか言っていたんじゃないかなぁ。

コードはGitHubです。

html2jadeでHTMLを読みやすくする

Sat, 28 Jan 2012 08:01:53 +0919

HTML5ベースのスライドつくる場合はJadeみたいなインデントでブロックを表現するような形式のほうが見やすいし書きやすい。

html2jadeを使えば、逆にhtmlをjadeに変換して読みやすく出来るのでオススメです。

impress.jsのindex.htmlをjadeに変換してみた。読みやすい。

      #bored.step.slide(data-x='-1000', data-y='-1500')
        q
          | Aren't you just
          b bored
          | with all those slides-based presentations?

      .step.slide(data-x='0', data-y='-1500')
        q
          | Don't you think that presentations given strong in modern browsers
          | shouldn't strong copy the limits
          | of 'classic' slide decks?

      .step.slide(data-x='1000', data-y='-1500')
        q
          | Would you like to strong impress your audience
          | with strong stunning visualization
          | of your talk?

      #title.step(data-x='0', data-y='0', data-scale='4')
        span.try then you should try
        h1
          | impress.js
          sup *
        span.footnote
          sup *
          | no rhyme intended

      #its.step(data-x='850', data-y='3000', data-rotate='90', data-scale='5')
        p
          | It's a
          strong presentation tool
          br
          | inspired by the idea behind
          a(href='http://prezi.com') prezi.com
          br
          | and based on the
          strong power of CSS3 transforms and transitions
          | in modern browsers.

      #big.step(data-x='3500', data-y='2100', data-rotate='180', data-scale='6')
        p
          | visualize your
          b big
          span.thoughts thoughts

      #tiny.step(data-x='2825', data-y='2325', data-z='-3000', data-rotate='300', data-scale='1')
        p
          | and
          b tiny
          | ideas

Canvasに富士山を描く関数

Thu, 19 Jan 2012 20:49:15 +0919

Canvasタグとflotを使って富士山を描いてみた。静岡県民だとこの関数は小学校高学年で習うのかな？

もしこの関数を知らない静岡県民がいたら、Canvasタグから勉強したほうがいいですね。タイミングよく来週HTML5読書会があります。しかもCanvasの章ですし、参加しないわけにはいけませんね。

$(function () {
    var f = function(x) { return Math.pow(x,4) - Math.pow(x,2) + 6 };
    var s = function(x) { return 12 / (Math.abs(x)+1) };
    var g = function(x) { return 1/2 * Math.cos(6*x) + 7/2 };

    var d1 = [];
    var d2 = [];
    var d3 = [];
    var d4 = [];

    for (var i = -1; i <= 1; i += 0.1)
        d1.push([i, f(i)]);

    for (var i = -7; i <= -1; i += 0.1)
        d2.push([i, s(i)]);

    for (var i = 1; i <= 7; i += 0.1)
        d3.push([i, s(i)]);

    for (var i = -2; i <= 2.1; i += 0.1)
        d4.push([i, g(i)]);

    $.plot($("#placeholder"), [ { data:d1, color: "rgb(0,0,255)" }
                  , { data:d2, color: "rgb(0,0,255)" }
                  , { data:d3, color: "rgb(0,0,255)" }
                  , { data:d4, color: "rgb(0,0,255)" }
    ]);
});

Rで富士山関数

HTML5＆CSS3実践入門　最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )

第三回HTML5読書会をやります

Fri, 13 Jan 2012 05:10:24 +0919

今回は富士市のコミュニティfでやります。

HTML5＆CSS3実践入門　最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )

みんな大好きCanvasとAudioタグまわりを広く浅くな感じでざざっとやりますので、初心者でもわかりやすい安心安全な内容になると思います。

もちろんそろそろ発売される予定のHTML5 Canvasのウォーミングアップのために参加するのも良いでしょう。

HTML5 Canvas
Steve Fulton
オライリージャパン / 3360円 ( 2012-01-21 )

僕は原著読みましたが、Canvasを深く知りたいならおすすめです。

懇親会は今までの串エクスプレスや上腕二頭筋からは趣向を変えておしゃれ系の野村食堂でやります(富士駅から近いので帰りが楽)。懇親会だけ出たいというヒトがいたら、@kzfmまで連絡下さい。オシャレ要員としてカウントさせて頂きます。

追記 120113

それから、欲しい本があったらtweetしておいてください。

第2回HTML5読書会に参加した

Sun, 11 Dec 2011 09:02:16 +0919

4章のCSS3の入門と5章のWAI-AREAでした。資料はGitHubにおいておきました。ちなみにスライドはhtml5slides用のhtmlをJadeを使って書いたので超快適だった。

おやつの大福

懇親会は静岡のIT勉強会合同忘年会

それにしても今年は勉強会が増えたなぁと。静岡の土曜日は常になんかあるしな。まぁ、つくる会は土曜日外しているのでバッティングしなくて安全なんだが。

あと、言語のコミュニティが一つ欲しい。静岡pyが欲しいんだけどねー

Safari Books Onlineはよさげなサービスだ
HTML5読書会はあと3回くらいで終わりそうなのでそろそろ次も考え始めないと

最近成果物を出してないのでなんかつくろうと思った。あとつくる会の日程も決めよう。

Jadeとhtml5slidesでつくるプレゼン資料

Wed, 07 Dec 2011 05:44:59 +0919

最近はyaml+markdown(python)なluminescenceでスライドをつくることが多かったんだけど、今回はhtml5でスライドを作れるhtml5slidesを使っている。

sectionタグとかarticleタグがあるので意味的にわかりやすい構成になるのとJadeを使えばすっきりと書けて気持ちよかろうと。

追記 111207

pyjadeもできてた。

スタイル属性にcssセレクタを使うことはできないの？

Sun, 04 Dec 2011 17:49:55 +0919

Chrome15.0.874.121使っているが。

<table style="tr:nth-of-type(2){backgroud:red;}">

こんな風にセレクタを指定しても何も起きなかった。

HTML5＆CSS3実践入門　最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )

ちなみに週末にHTML5の読書会があるので興味がある方は是非

HTML5 / Drkcore

css2stylus

Bootstrap2を利用したイイカンジのサイト

静岡Developers勉強会 第4回HTML5読書会

次の本

サークルグラフをフジテレビ風ソースでCanvasに添えて

html2jadeでHTMLを読みやすくする

Canvasに富士山を描く関数

第三回HTML5読書会をやります

追記 120113

第2回HTML5読書会に参加した

Jadeとhtml5slidesでつくるプレゼン資料

追記 111207

スタイル属性にcssセレクタを使うことはできないの？

静岡Developers勉強会第4回HTML5読書会