04122011 HTML5

ドット絵の基礎くらい覚えておく

HTML5のCanvasでなんかしようと思うと、ドット絵の基礎くらいわかったいたほうがよかろうと。faviconとかもうまく作れたほうがいいからねと。

ProductName ドット絵プロフェッショナルテクニック―ドット打ちからアニメーションまで (Game developer books)
高野 隼人
秀和システム / 2625円 ( 2005-02 )


前半の基礎概念編が役に立った

  • ジャギ消しのコツ
  • 光と影の使い方
  • パレットをうまく使う

16112011 HTML5

日本の首相をHTML5で表現する

方向感のあるモーションブラーでブレさすかなと思っていたが、よく考えるまでもなく方向感などまるで感じさせないほどのぶれっぷりなのでGaussian Blurでw

imageを読み込んでeffectをかけてキャンバスタグに表示してます。それからinputのtypeをrangeにしているのでchromeだとスライダーになるけどfirefoxだとならないですね。

15 noda

Canvasまわりは次々回のHTML5読書会でやることになると思います。興味があれば参加しましょう。

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


16112011 HTML5

blogをレスポンシブ・ウェブデザインっぽくしてスマフォに対応させた

ブログもtwitterクライアント -> スマートフォンのブラウザで見るという流れも増えてきたので、そろそろこのブログもスマフォ対応させようと。

media-query使うよりはテンプレートで対応する方が好きだわと書いたんだけど、Flaskのやり取り読んでたら一度はmedia-query使っておくかなと思った。

media-queryでデザインするときに参考にしたサイト

実際に画面のサイズが変わったときにどう見えるかをチェックするにはresponsivepxというサイトが便利。

でも、デザインしてる時には頻繁にcssのファイルを修正するので、変更のたびにリロードするのはちょっとめんどくさかったかも。ファイルの変更検知したら更新するようなものをローカルで動かしたほうが楽かもしれない(Node.js+Expressで作るのがいいのかな)。

未解決の問題

  • adsenseみたいな広告系の大きさをCSSで変更できるのかどうか分からない
  • min-widthとmin-device-widthの使い分けがよくわかっていない
  • media-queryで書いていったらcssのファイルがごちゃごちゃして読みにくくなってしまった。SassかStylusを使うべきか

おまけ1

12/10にHTML5読書会があります。内容はCSS3を使った見栄えの話(media-queryを含む)とアクセシビリティ(WIA-ARIA)になる予定なので、上の話に興味があれば参加するといいと思う。

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


それから、当日は静岡の勉強会系の合同忘年会もあるので参加すると楽しいでしょう。静岡Python(Shizu.py)の話ができたらいいなぁと密かに思っていたりする。

おまけ2

Flaskのテンプレートでゴニョるんだったら下のリンクを参考にすればよい

12112011 HTML5

ウェブデザインのつくり方、インターフェイスデザインの考え方。

「ウェブデザインのつくり方、インターフェイスデザインの考え方。」という本を読んだら、blogのデザインを弄りたくなったので、少し手を加えてみた。モバイル対応を目>的とした作業だったんだけど、結局モバイル対応はしてない。

ProductName ウェブデザインのつくり方、インターフェイスデザインの考え方。
矢野りん
MdN / 2415円 ( 2011-09-26 )


本書を読めばデザインの基本的なレイアウトの話とか色の選択とか一通り押さえられるのでオススメですね。内容も図が豊富でわかりやすいし。

僕は、レスポンシブwebデザインに興味があったので、media-queryのあたりを読むために購入。

レスポンシブ・ウェブデザインってのは結局media-queryなんかを利用して

Media queriesはコンテンツを表示したブラウザの幅サイズを取得し、そのサイズに応じてCSSのプロパティを取捨選択するために使うプロパティです

というわけで、結局

さまざまな表示環境で同じHTMLをリソースとして活用できるようになります

とあるように、HTMLを使いまわす技法の一つということか。

一通り読んだあとで、じゃぁ、自分のブログシステムをレスポンシブ・ウェブデザインにしてみようとしたんだが、1カラムなんで別にフロートにする必要もないしサイドバー的なモノも用意してないから、特にやることがなかった。

色々検討していて、気がついたのはmedia-queryでCSSで切り替えるっていうのは結局CSSをいじることであってテンプレートをいじるのとは違うなぁと。例えば、モバイルデバイス向けにアドセンスを切り替えたりとか文書構造替えたりってのはテンプレートいじったほうが早いし、スマートだよなぁと。

結局WAFをいじくっているのであればそっちのテンプレートでゴニョゴニョと調整したほうが楽だよなぁと、自分はUserAgentみてWAFのテンプレート切り替えるほうが好きだわという結論に至り、レスポンシブ・ウェブデザインへの興味が急速に（指数関数のオーダーで）薄れたのであった。

とはいえ、スマホ判定したら別のURLにリダイレクトってのは好きじゃないかなぁ、意味論的に気持ち悪い気がする。それともlink rel="alternate"みたいな感じでどうにかできるのかな？

ここらへんがよくわかっていない。

ちなみにスマートフォンサイトを作るというテーマに絞るならば、以下の本が丁寧に説明してあって良いですね。

ProductName iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
たにぐちまこと
アスキー・メディアワークス / 2499円 ( 2011-02-19 )


07112011 HTML5

HTML5 CANVAS 10,11

phonegapを使おうっていう章だったんだけど。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


今のバージョンがos10.5には対応してないらしいので、流し読みしつつandroid SDKのバージョンを上げてみた

android4.0

自分の中ではiPhoneよりはandroidかなぁ。iPadはいいと思うけど。

というわけで、そのうちこれでも読んでみようかなぁと思っている(まだ買ってないけど)

ProductName Androidアプリケーション開発ガイド ―HTML＋CSS＋JavaScriptによる開発手法
Jonathan Stark
オライリージャパン / 1995円 ( 2011-02-24 )


先に読まなきゃいけないのは、既に積んであるジオモバイルプログラミングだなぁ

ProductName ジオモバイルプログラミング—iPhone＆Androidで位置情報アプリを作ろう—
郷田まり子
ワークスコーポレーション / 3675円 ( 2011-01-27 )


06112011 HTML5

HTML5 CANVAS 8,9章

1-7章の基礎をふまえて実際にゲームを作っていく。8章はpathベースで。9章で画像と音を付けていく。

8-12をcoffeesciptで書いていたんだけど、衝突判定の関数がラベルでbreakしまくりのコードで、coffeescriptではうまく書けなくて途中でやめた。その勢いで、9章は流し読み。

まぁ、1-7章まで丁寧に読んだので、流して読んでも大体理解できた。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


31102011 HTML5

HTML5 CANVAS 7章終了

audioの扱い方。基本的なところからはじめて、イベントに応じて音を鳴らすにはどうしたらいいかというゲームを作るための技術を最後に。

最後の例題がスペースインベーダーだったので、つけナポリタンを題材にしたのをつくってみた(7-6)。トマトをぶつけると「ナポリン」っていう音がなります。トマト投げても「リンリン」言うのでうるさいんだが。

naporin

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


28102011 HTML5

mp3をoggに変換する

HTML5 Canvasの7章がaudioを扱う章で、oggが必要なのでググッた。

MP3は適当にyoutubeから引っ張ってきた。というか、B1ガンパレ的に「つけナポリタン」で。

今度CD買っとこ。

27102011 HTML5

HTML5 CANVAS 6章終了

videoタグの使い方。動画の制御をやったあと、もう少し高度な使い方としてCanvas要素をつかった動画の扱いを学ぶという章。

最後のほう(6-10)でビデオのパズルを作る。ちなみに揃えるとPyConJPのシールを映した動画が出てきます。

html5 video

基本的にCanvasをうまく使う。

  1. video要素をjavascriptでつくってスタイルシートのdisplay属性をnoneにして表示させない
  2. playしたらcanvasの描画をsetIntervalで30FPSになるようにして
  3. video要素をcanvasに描画する
  4. ついでにcanvasの要素をいじれば画像いじるのと同じことができる。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


24102011 三島 HTML5

今週末はHTML5読書会があります

今回からHTML5＆CSS3実践入門を読んでいきます。初回は三島で開催です。プログラムプログラムしてない本なので、スマホのヒトも、webデザイナーのヒトも楽しく勉強できると思いますよ。

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


尚、当日は三島バルという飲み歩きイベントも行われているので、飲み歩きついでにちょっとHTML5でも勉強しておくかっていう参加のしかたもありだと思いますが。

ちなみに私は子供の面倒をみないといけない(第5土曜日は保育所が休みらしい)ので、読書会には参加できません ;-)

夕方からのこのこ出かけていってバルからの参加になるわけですが、@bg7860と久しぶりにウダウダと飲み歩く予定なので、会ったらよろしく。

公式サイトみると#三島バルっていうタグつけてつぶやけって書いてあるけど、タグ打ちめんどくさいし、酒のんで楽しんでいる状況でそんな面倒なことは多分しない（吉原バルで経験済み）位置情報オンにしといて、緯度経度情報でtweetフィルタリングするのが現実的なやり方じゃないのかなぁと思うが。

どうやろかね?

クライアントによっては自動で前回入れたタグが自動的に挿入される機能があったりすんのかな？そういうあたりもちょっと興味あるね。

  • 酒飲みながら日本語ハッシュタグをつけることができるか？
  • それを@bg7860が僕の代わりにやれるか

こういったあたりも。