今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
Googleは、FlashファイルをHTML5に変換するツール「Swiffy」を発表した。SWFファイルにこのツールを適用すると、SWFファイルがJSONファイルに変換され、HTML、SVG（Scalable Vector Graphics）、CSS（Cascading Style Sheets）を使ってレンダリングされる。Googleによれば、変換されたファイルのレンダリングパフォーマンスは非常によく、ファイルサイズはオリジナルよりわずかに大きくなるという。 Adobe Systemsも、2011年に入って同様のツール「Wallaby」を発表している。このツールは、FLA形式のファイルを、HTML5、JavaScript、CSSに変換するものである。 Googleは、Swiffyに関するFAQで、Adobeは「FlashプラットフォームがFlashプレーヤーをサポートしていないデバイスに
[読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日本だと3500円と割高だが日本語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ
This domain may be for sale!
先日予告したSNBinderのオープンソース化、GitHubに簡単なREADME付きでアップロードしたのでご覧いただきたい。 https://github.com/snakajima/SNBinder SNBinderは、ひと言で言えば「ブラウザー上でView(テンプレート)とData（JSON）を結合して HTML を生成するテンプレートエンジン」である。 ９０年の半ばから急速に広まったインターネット。サーバー側でダイナミックに生成したHTMLページをブラウザーで閲覧するだけ、というシンプルでエレガントなアーキテクチャゆえの成功だ。しかし、ブラウザーの高機能化に伴い、JavaScriptを駆使して使いやすさを向上しようという試みが色々なウェブサイトで行われている。GMail、Google Docs、Facebookなどは良い例だ。 その方向性を究極にまで突き詰めると、サーバー側は（MVC
Display mode Dark Light Back to Series The CPU (Jul 2010) In the first of this series of articles, I'll look at how a CPU can be emulated through JS, and start building an emulation core for the GameBoy console. Memory (Aug 2010) Continuing a series examining system emulation in JavaScript, this article examines how the GameBoy memories are mapped onto the CPU's address bus, and how such a mapping
HTML5にはCanvasタグやVideo/Audioタグ、ドラッグ＆ドロップ、Microdata、Web Workersなどさまざまな機能があると説明されますが、実際にはこれらは「HTML5とその関連仕様」を含んでいます。 仕様書に従った厳密な「HTML5」とは、どこまでの範囲を指すのでしょうか？ モジラジャパンの浅井智也氏が「Keypoints HTML5」という資料を公開して分かりやすく紹介してくれています。 仕様書に沿った「HTML5」の範囲とは HTML5は、W3CとWHATWGが共同で仕様策定をしていますが、両者の仕様書に書かれている範囲は異なっています（非常に細かい部分では一部の仕様に違いもあります）。Keyoints HTML5から、その両方の仕様でHTML5の範囲を示した図を紹介します。 図の右側のW3C仕様ではCanvas、Microdata、Web Messaging
インターネットで動画を見るのが常識になりつつあるほど、ハードもソフトも進化してきました。人間の（私の？）欲望には可ぎりがないもので、ついこの間までは動画が見られるだけでも感動していたのですが、最近は早送り再生とかスロー再生ができないものかと思ったりしていました。 ところがですよ、奥さん！それができるようになってしまいました。 もちろんちょっとした制限があるのですが、その制限も早晩なくなことでしょう。制限というのはブラウザーがHTML5をサポートしていることと、現時点ではYouTubeだけがそのサービスを提供しているということです。 私が主に使っているChrome5のdev版はもちろんHTML5をサポートしており、Flashプレーヤーをインストールしていなくてもほとんどの動画を見ることができるようになっています。厳密に言うと「HTML5 の動画タグと h.264 動画コーデックをサポートして
性懲りも無くニコニコネタです。 iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。 使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。 javascript:(function(){var e=document.createElement("script");e.s
HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何？」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何？どんなことができるの？」という疑問にお答えしたいと思います。 ■HTML5でできること まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。 ＜具体的に何ができるの？＞ ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは？ - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「
現在、ネットで一般的に使用されているHTML言語は「HTML 4」であり、1997年12月18日にW3C勧告として仕様が発表されたものです。これが実に10年以上の月日を経て、バージョンアップと言っても差し支えない「HTML 5」になるとのこと。最終版が登場するのは2010年9月頃の予定。 というわけで、来たるべき「HTML 5」時代に向けて、一体何がどう変わったのか、何が便利になるのかを見てみましょう。 HTML 5 HTML 5 differences from HTML 4 HTML 5 における HTML 4 からの変更点 面白いのがブログや記事向けの「article」要素や、画像やビデオなどの埋め込み内容に説明文やキャプションを付加する「figure」要素、マルチメディアのための「audio」および「video」要素、さらに新しい属性としてリンクをたどるときにpingされるリソース
前エントリ - Internet Explorer のイメージツールバーを無効化する meta タグ で予告したとおり meta タグについて生まれて初めてまじめに調べてみました。改めて調べてみると知らなかったこと満載です。っていうか Web エンジニアたるもの一度は W3C勧告 くらいは一通り目を通しておかなくてはダメだなと思ったりしました。面倒なくらい分量があるけど。ひとまず meta タグ情報としての自分にとって永久保存版まとめという位置づけです。 まずは参考になったサイトの紹介から。 W3C勧告HTML4.01 :: The global structure of an HTML document W3C勧告HTML4.01 私的日本語訳 :: The global structure of an HTML document(ja) rfc2616.txt Another HTML
Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。 １．埋め込み HTML の利用方法 埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします（スクリーンショット右上）。 リンクをクリックすると、HTMLコードがすぐ下に表示されます（下）ので、 「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、 <iframe width="425" height="350" ～ のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。 ２．問題点 埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHT
US Lawrence LLC Review Unveils Unparalleled Professionalism Discover the unparalleled professionalism and tailored solutions US Lawrence LLC offers in boutique commercial offices. With a focus on functionality and aesthetics, their multi-floor office spaces are meticulously designed to cater to the distinctive needs of businesses. This US Lawrence LLC review sheds light on the unparalleled offerin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
