デイリーポータルZロゴ
このサイトについて


HTML5で作ってみた
 
すごいいいね!ボタン
「何について調べますか?」

「いいね!」ボタンは便利だ。気軽に意思を表明できるし、面と向かってほめる照れくささもない。

だが気になるのは「いいね」にも幅があることである。感動に言葉が詰まりながらの「………い、いいね!」と人の資料を見てどこほめていいか分からないので、「このフォントいいね」と言ったときの「いいね」ではずいぶん差がある。

そんな「いいね」の3文字で収まらない感情を表すボタンを作ってみたい。

!

林雄司
(はやしゆうじ)
1971年東京生まれ。デイリーポータルZウェブマスター。
今回の記事を作るにあたって自分のHTMLの知識が10年前で止まっていることを発見。


HTML5でお送りします

このページの左上に書いてあるように今回の企画はHTML5を活用するのだ。

ネット業界では今後の本命と言われている技術である。たい焼き業界で言えばカスタードクリームを入れはじめた、サンダル業界で言えばクロックスが登場したぐらいの革新性だと思ってもらえればいい(僕の理解)。

そのためHTML5に対応していないブラウザだと正しく見られない可能性がある。しかしそれでは申し訳ないのでHTML5非対応ブラウザでも代替のコンテンツが表示されるようにした。

たとえばこの花嫁の写真。

!
 

HTML5でしか表示できないSVGという画像形式なのだ。でも大丈夫、HTML5をサポートしていないブラウザではSVGでない画像が表示される。

多少画像が違っているが構図は同じである。世界は見る人によって違っているということをブラウザを通じて表現してみた。

2011.12.14追記

このように書いたが、上の花嫁は正しいSVGではなかった(写真を強引にSVGで書き出してました)。
SVGは簡単に言うと画像を数字で表現するである(ベクターグラフィック)。線の始まりの位置や終わりの位置、太さのデータを設計図のように持っていて、それに従ってコンピュータがいちいち描く。
線で描いたようなイラストがSVGに向いている。花嫁ならばこんな感じ。

SVGの花嫁イラスト
トレースしました

ベクターグラフィックは拡大してもきれいなのが特徴である。

100%に戻す Zoom out 50% Move left to zoom out, right to zoom in Zoom in 50% 100%
上のイラストを拡大して一部分を表示

比較用のヒゲの男性の写真はベクターグラフィックではないので拡大するともさもさになる。

悪夢

HTML5ではベクターグラフィックを通常の画像表示の方法(imgタグです)で表示できるのだ。拡大してももさもさにならずにすむ。よかった。

(2011.12.14追記おわり)

さて本論に戻りたい。すごいいいね!ボタンである。

寒い海でお茶を飲んだときのいいね

いいねにもいろいろある、ということを冒頭で書いた。たとえば

冬の海で冷え切ったときに飲む温かいお茶。飲んで身体の芯が溶けてゆくような感覚を味わいながら出る「いいね」。

このじーんとする感覚に対して「いいね」の一言では物足りない。たとえば同じ状況を共有するのはどうだろう(下のいいね!ボタンをクリックしてください)

再生
動画はスキップできないようにした。スキップするとこの苦労に共感できないからである。仮にスキップボタンをつけるならこうだろうか。
再生
登場人物がスキップするというインターネットで10年以上前からある古典的なギャグである。
ところでスキップの動画になると登場人物が違っている。なぜなら僕のスキップがまったくスキップに見えないからである。
再生

スキップ担当はデイリーポータルZライターの藤原くんである。HTMLがどんなに進化しても変わらないものがある。それは僕のスキップのリズム感の悪さだ。

!
砂浜でスキップはものすごい疲れるぞ

マイクロソフトと言えば

そしてHTML5はIE9も対応している。ニフティのトップで大きくIE9が取り上げられているのにこの導入はわざとらしかった。

とはいえ僕はこれまで「Windowsのファイルコピーを生で見たい」「パワーポイント忠臣蔵」「ペリーがパワポで提案書を持ってきたら」などを作るほどのマイクロソフトユーザである。ちゃんとした使い方してないけど。

マイクロソフトといえば彼らだろう。

!
パワーポイントのクリップアートの彼とオフィスアシスタントのイルカだ

フエルト人形で立体になってもらった(フエルト人形制作はデイリーポータルZライターべつやくれい)。かれらにいいねと言ってもらいたい。

再生

ちなみにオフィスアシスタントのイルカはカイルくんという名前だそうだ。イルカくんとあんまり大差ない名前である。


つぎへ >
 

▲デイリーポータルZトップへ バックナンバーいちらんへ
個人情報保護ポリシー
© DailyPortalZ Inc. All Rights Reserved.