[Code Snipet] TheCodePlayer - Web制作で使えるコードスニペットギャラリー[Code Snipet] TheCodePlayer – Web制作で使えるコードスニペットギャラリー Pocket Tweet Web制作に使えるコードスニペットギャラリー。CSS3やHTML5、JSあたりを使った作例と、そのコードが紹介された記事へのリンクまとめサイトです。最近この手のサイトって、こうした可変グリッドレイアウトで見せる例が多いような気がします。実際見やすいですしね。サイト制作のネタ帳に是非これひとつ。 TheCodePlayer
Chris Black's Blog | More Battery Testing with Flash for Mobile
After additional testing, Flash 10.1 still consumes about half the battery of the HTML5 equivalent in the browser on the Nexus One. This time running for 30 minutes, instead of 10, the canvas demo consumed 12% battery and Flash 7%. Arguably this is only a 41.66% difference but you get the point. Want to reproduce this test at home? Here are the steps that I went through: Procedure: Navigate to the
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog
JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
Three.js対応。Webブラウザ上で3Dモデルを作成·ThreeFab MOONGIFT
ThreeFabはTree.jsに対応した3DモデルをWebブラウザ上で作成できるソフトウェアです。 Three.jsはJavaScriptで高度な3Dモデルを描画するエンジンですが、そのモデル作成はやはり大変な作業になります。そこで使ってみたいのがThreeFabになります。 最初の画面です。3Dモデルが奇麗に描かれていて格好いいです。 マウスで視点の変更もできます。 モデルを追加できます。 回転したりライトを変更することもできます。 最終的に作成されるコードを使ってThree.jsで3Dモデルを描けます。 こんな感じにモデルを追加していきます。 ThreeFabを使えばThree.jsで使えるモデルをWebブラウザ上で作成できます。S、D、X、スペースキーがそれぞれショートカットキーとして使えます。最初、慣れるまではなかなか操作が難しいかも知れません。ThreeFabはさらにアニメーシ
すげえ。HTML5/JavaScriptで作られたゲームボーイエミュレータ·JSGB MOONGIFT
JSGBはJavaScriptで作られたゲームボーイエミュレータです。 昔懐かしいゲームボーイのエミュレータは数多いですが、今回紹介するJSGBは何とJavaScriptで作られたゲームボーイエミュレータになります。 2色の感じがゲームボーイっぽさを出しています。 アニメーションもレトロな感じです。 拡大表示できます。 平面なのに立体を感じる、そんなデモ。 レトロな動作がいい感じです。 ワリオが走るデモです。 三倍表示にしました。 こういうアニメーションもいい感じです。 動作デモです。 配布されているROMはムービーレベルで操作することはできませんが、公式サイトでは実際に遊べるゲームがROMとして読み込めるようになっています。音は鳴らないようですが、FPSは60近く出ており十分遊べるレベルです。 JSGBはJavaScript製、GPLのオープンソース・ソフトウェアです。 MOONGIFT
HTML5対応のユーザーインターフェイスライブラリ「Kendo UI」登場
JavaScriptでビジネスアプリケーションを開発する際に使えるユーザーインターフェイスライブラリ「Kendo UI」の正式版が公開されました。 JavaScript用のユーザーインターフェイスライブラリといえば、jQuery UIやSencha Touchなどがあります。Kendo UIもそれらと基本的に似たライブラリですが、jQueryをベースにしつつメニューやデータピッカーなどの基本的な部品だけではなく、表形式でデータを表示するグリッドやグラフなど、このライブラリだけでビジネスアプリケーションに必要な部品をカバーしている点にあるでしょう。 HTML5対応ですが、HTML5非対応のWebブラウザもサポート。GPLv3ライセンスのオープンソースと、商用利用向けの有償ライセンス（399ドル）のデュアルライセンスで提供されています。 いくつかサンプルを挙げておきます。
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
Html5 File Upload with Progress On Matlus
Html5 finally solves an age old problem of being able to upload files while also showing the upload progress. Today most websites use Flash Player to achieve this functionality. Some websites continue to use the Html <form> with enctype=multipart/form-data, but with modification on the server side to enable showing users the upload progress. Essentially, what you need to do is hook into the server
HTML5+jQuery製の管理画面を作るためのテンプレート・HTML5 ADMIN - かちびと.net
なかなかユニークだったのでメモ的に。 HTML5+jQueryで使いやすい管理画面を 作るためのテンプレート・HTML5 ADMIN です。管理画面は見た目よりも機能性 のみに焦点が絞られるのでこういった テンプレートは結構貴重ですね。 テンプレートそのものを使う予定は無いですけど、管理画面におけるUI構築は、見た目ではなく、利便性、ユーザービリティのみに焦点が当てられるのでこういうテンプレで学べることも割と多いです。贔屓するわけじゃ無いですけど、WordPressの管理画面は他のCMSやブログエンジンよりはるかに万人に分かりやすく使いやすいように出来ていてとても参考になる点が多いです。機能を意識せずとも使える、というのは秀逸なデザインであるともいえます。 画像だけじゃ全然利便性が伝わりませんがｗ よく使われるUIが一式揃っている、という感じです。fluidレイアウトにも対応。modern
Webブラウザ上でデモをする際に。HTML5/JavaScriptコードをその場で実行·CoderDeck MOONGIFT
CoderDeckはWebスライドツールに組み込んで使えるソフトウェアで、表示しているコードをそのまま実行して結果を確認できるJavaScriptライブラリです。 プログラマーの技術系プレゼンテーションにおいてコードのデモを見せて、その実行結果もその場で実演する時があります。そんな時、もし実行言語がHTML5/JavaScriptであれば試してみてもらいたいのがCoderDeckです。 左側に書いてあるのは単純なHTML5のコードです。 Runボタンを押すと書かれている内容がそのままコードとして実行されて右側に表示されます。 種明かしをすると、左側に書かれているテキストエリアの内容がiframeタグの中に展開されて表示するという仕組みです。 テキストエリアの内容を書き換えて再度Runボタンを押すと実行結果も変わります。リンクを一つMOONGIFTに変えたのが分かるでしょうか。 仕組みはとて
次世代型WYSIWYGエディタ。見たままにコンテンツを編集する·Mercury Editor MOONGIFT
Mercury Editorは実際に表示された内容をそのまま編集できるWYSIWYGエディタ。 Mercury EditorはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサイトを運営していると、一部のデータを変更したいというニーズは必ず発生する。全てを自動化できる訳はなく、アイコンやラベルの変更は手作業で行うだろう。 編集中 しかしシステムへの組み込みで細分化されたテンプレートを完成図を予想しながら変更していくのは難しい。そこで完成された図をそのままに修正する試みはどうだろう。それを可能にするのがMercury Editorだ。 Mercury EditorはJavaScript製のコンテンツエディターだが、表示されているWebサイトをそのまま編集できる所が新しい。実行すると画面上にツールバーが表示されて編集できる状態になる。編集できる場所は指定可能だ。文字装飾
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
メソッドチェーンを使えばWeb SQL Databaseも簡単に·mchain MOONGIFT
mchainはHTML5のWeb SQL DatabaseにおいてjQuery風にメソッドチェーンを使えるようにするライブラリ。 mchainはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5はこれまでのWebアプリケーションのあり方を大きく変える可能性があると思っている。その一つとして期待しているのがWeb SQL Databaseだ。Webブラウザ内でRDBMSが利用できる技術だ。 デモのTodoアプリ これをうまく使えば、最初に必要なデータをダウンロードして後はクライアントサイドだけで加工して完了したらアップしてもらうような仕組みが作れるようになる。そんな面白い技術を手軽に扱えるようにするJavaScriptライブラリがmchainだ。 mchainは基本的にWeb SQL Database APIをmchainでラッピングしているだけで使い方は変わらない
Full Featured HTML5 Editor for Modern Browsers
Mercury Editor is a fully featured editor much like TinyMCE or CKEditor, but with a different usage paradigm. It expects that an entire page is something that can be editable, and allows different types of editable regions to be specified. It displays a single toolbar for every region on the page, and uses the HTML5 contentEditable features on block elements, instead of iframes, which allows for C
Lettering.JSで描いた文字の配置をビジュアル的に調整するブックマークレット·Kern.js MOONGIFT
Kern.jsはLettering.JSと連携してビジュアル的に文字間を調整するJavaScriptライブラリ。 Kern.jsはHTML5/JavaScript製のフリーウェア（ライセンスはWTFPL）。HTMLは表現力が高い。しかし雑誌のようなレイアウトを表現するのはまだまだ力不足だ。もちろんCSSを駆使すればできないことではないが、設定が大変だ。 文字をつめた所 例えば行の折り返しに伴って文字間がひどく広がってしまう場合がある。そんな時にDTPであれば前後の単語の文字間を狭めることによって指定範囲に表示が収まるように工夫する。それをWeb上で再現するのがKern.jsだ。 カーニングとはいわゆる文字間調整のことだ。Kern.jsは以前紹介したLettering.JSをより手軽に使えるようにするソフトウェアで、ブックマークレットとして利用できる。Lettering.JSを使って装飾して
HTML5の動画上に字幕や、デザイン変更可能なツールチップをキャプションっぽく埋め込めるライブラリ・BubblesJS - かちびと.net
これはなかなか便利かも、と思っていつかの日 のために備忘録。HTML5製の動画に、字幕や デザインの変更が可能なツールチップ的なもの を埋め込めるライブラリ、BubblesJSです。応用 すればニコニコ動画のような動画コンテンツも 実装出来るんじゃないですかね？試してない ので分かりませんけど。 以前も字幕・・というかキューを入れられるライブラリ・Cuepoint JSをご紹介しました。こちらはかなり手軽に使えて良さそうでしたが、一応選択肢は欲しいところですよね。jQueryやmootoolsなど、特になにかのjsに依存することの無いライブラリです。 こんな感じでツールチップが上から落ちてきて下に流れていったり残ったままだったり。ツールチップはクリックで消すことが出来ます。普通にテキストなのでドラッグも出来ます。 デザインも思いのままです。テキストなのでドラッグも可能。 字幕っぽいのも こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
