HTML5フレームワークにおける表示オブジェクトのパフォーマンス検証※検証結果は次のブログ記事にまとめていますので、まずはこちらを参考ください。 http://ics-web.jp/lab/archives/201 HTML5のフレームワークでどれが最もパフォーマンスがいいのか、移動・回転・拡縮・透明度・親子構造を扱う条件のベンチマークテストで試してみた。 続きを読む
F-site | CreateJS
EaselJSバージョン0.8.2のリリース CreateJSのビルドが2015年11月26日付で改められ、12月8日にCreateJS Blog「EaselJS Version 0.8.2 released」が投稿されました。このblogの中身を、簡単にご紹介します。 >>全文へ 2015.12.14 | 野中 文雄 | [CreateJS][HTML5][野中ゼミ] Creators Meetup数学ネタまとめ クリエータがひとり15分の枠で知識や情報を発表し、互いに刺激し合う場の「Creators Meetup」は毎月第3土曜日に開かれています。制作の技術や知識にとどまらず、さまざまな分野の経験や興味にもとづく多彩な話題を採上げることが特長です。間もなく、第30回を迎えようとしています。 そのCreators Meetupの中で、隔月で数学ネタの一席を務めるようになり、数も重ねてきま
TypeScriptを使う – 水玉製作所
JavaScriptをより効率的に書くためにMicrosoftからTypeScriptなる言語が出されています。第二回CreateJS勉強会でICSの池田さんが使用していたのを見て、便利そうだと思っていたので少し触れてみました。 以前、生のJavaScriptで書いたものをTypeScriptで書き直してみました。 取りあえず触ってみて感じた利点は以下の通りです。 ・class定義が簡単 ・private,publicがある ・型があるって安心（無くてもOK） ・AS3ライク これからはTypeScriptで開発することも選択肢のひとつとして十分に考えられるのではないでしょうか。 参考サイト 効率的なCreateJSコンテンツ開発 池田 泰延（clockmaker） http://phyzkit.net/typescript/
パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」:phpspot開発日誌
FractionSlider: jQuery parallax Slider Plugin | jacksbox.design パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 最近よく見る縦スクロールするとパララックス効果、ではなく横にスライドしてアニメーションっぽいスライダーが作れるプラグインです 単なる画像をペラペラ紙芝居っぽくめくるのではなくて、よりアニメっぽい表現が可能です。 <div>をリストにして定義し、中身を記述していけば作れるようです Flashでやってたようなことも、どんどん置き換わっていますね 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可
[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
JSでアメーバのシミュレーション作ってみた (高速化編） | fladdict
先日のJSアメーバのコードを、ブラッシュアップして超高速化してみた。 ぬるぬる動いて、2〜3分後には自走して弱小アメーバを襲い始めるよ。 やはり2〜3時間で書いたインチキコードは無駄やバグが多いので、ある程度整理することに。 前バージョンでは、各ノード毎の引力斥力計算を個別にやっていた。 そのため、毎回A→Bの距離と、B←Aの距離をそれぞれ別個に計算してたりして遅くなっていた。 今回のバージョンでは、フレーム毎にまとめてノードの関係性ルックアップテーブルを生成することで、処理を大幅に短縮してみるなど。 8万回だか16万回だか計算していた距離や引力の計算を、2万回に短縮、おかげで割と高速化。 ルックアップテーブルマジ最強。 ここから楽しい描画ルーチンの最適化・・・に進むのだけど、 正直、JavaScript（しかもprocessingフレームワーク状）環境だと、高速化の勘所がまったくわからな
[Android アプリの UI デザイン] Layer List の作りかたのまとめと Tips | DevelopersIO
Layer List について Layer List とは画像などをレイヤー構成で重ねることができるリソースです。複数の画像をひとつのリソースとして取り扱うことができます。 うまく使うととっても便利ですし、リソースの削減にもなるのでぜひとも使いこなしたいところです。 そんな便利な Layer List の作りかたと Tips をまとめてみました！ Layer List の作りかたの基本 ということで早速 Layer List の作りかたを学んでいきましょう。ご存知のかたは復習がてらにさらりと目を通していただければ幸いです。 お試しとして以下のような2つの画像から構成される Layer List を作ってみたいと思います！角丸の付きの黒いグラデーションの背景に Droid くんが乗っかってるような構成です。 XML で作る XML で作る場合は layer-list タグを使います。そのタグ
![[Android アプリの UI デザイン] Layer List の作りかたのまとめと Tips | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2398c3157fe0985ca54950c69d2a36b2ac7f003/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F04%2Fcatch.png)
[CreateJS] 炎のパーティクル | にゃあプロジェクト
ParticleEmitterJS を使ってみちゃうよ。 :boy: 詳しくは「HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog」 :check: 「ParticleEmitterJS | Purple Monkey Studios」 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炎のパーティクル | CreateJS</title> <script src="js/easeljs-0.8.1.min.js"></script> <script src="js/tweenjs-0.6.1.min.js"></script> <script src="js/movieclip-0.8.1.min.js"></sc
![[CreateJS] 炎のパーティクル | にゃあプロジェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/32261c1726f96df85ea9112db9b9c5e2c00ffaad/height=288;version=1;width=512/http%3A%2F%2Fblog.project-nya.jp%2Fogp_default.png)
【Mixture】シンプルで多機能な開発ツール。 | DevelopersIO
先日、リリースされた開発ツールMixtureをご紹介します。 今回は、Mixtureのインストールから動作確認まで行ってみたいと思います。 Mixture本家サイト アジェンダ Mixtureとは？ インストール セットアップ 使用方法 まとめ Mixtureとは？ A rapid prototyping and static site generation tool for designers and developers Mixtureは、プロトタイプ用サイトや静的なサイトを出力してくれる、画面操作(以下:GUI)ベースのサイトジェネレータツールです。 以前の記事で、機能が似ているMiddlemanをご紹介しました。 こちらは、CUI(コマンドライン)で操作するツールだったので、デザイナーの方には少しハードルが高かったのですが、MixtureはGUI操作なので、気軽に使えるかと思います
text-decoration: blink; と blink 要素終了のお知らせ
Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; のサポート廃止が提案され、それが承認されたようです。 大昔の名残で、Netscape 系ブラウザと Opera しかサポートしていませんので、今どき使っている人の方が珍しいどころか、知ってる人も少ないんじゃないかとは思いますが （携帯サイト作ってる人とかだと使うのかな...）、Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration プロパティに対する blink 値指定のサポート （点滅エフェクト） をやめようぜっていう提案がされ、それが承認されて、今後リリースされるバージョンに反映されることが確定したみたいですね。 857820 - Drop
これエエわ〜。Google リーダーからの乗り換えは [ Feedly ] に決定！
Google リーダーからの乗り換え候補の [ [Feedly](http://feedly.com/) ] を試した所、良かったので乗り換えました。 ▲ [Feedly](http://feedly.com/) Feedly の良い所 ———————————————————————- Feedly の良い所をまとめてみます。 – クロスプラットフォームなので複数のデバイスで利用可能。 – 無料で使える。 – Google リーダーからデータ移行が簡単。 – 48 時間で 50 万人以上の Google リーダーユーザーが移行した。 – キーボードショートカットは、Google リーダーとほとんど同じ。 – Google リーダーのスターは、Saved For Later という名前の同じ機能がある。 Feedly の使い方 ———————————————————————- ▲ [ Get
![これエエわ〜。Google リーダーからの乗り換えは [ Feedly ] に決定！](https://cdn-ak-scissors.b.st-hatena.com/image/square/397f7d0573a23796883578c3ae1c9a1e747bb182/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2013%2F04%2Ffeedly-6.jpg)
JSで蝶を飛ばしてみるなど | fladdict
今日のスケッチ蝶蝶がいっぱい。 processing.js だいたい理解した。 蝶の群れだけど、boidというよりは、perlin noiseによるフォースフィールドの復習。 定番ですがperlin noiseで作った雲状bitpmapのR値とG値を、XY方向の気流の力として適用する・・・ってアレです。 リハビリリハビリ。 ここ数年こういうコード書いてなかったので、すごい腕が落ち込んでる。 スムーズな方向転換系アルゴリズムを作れないうちに時間切れ。 昔は2〜3時間あれば作れたのに・・・ジジイになったってことか。 ところで、processing.jsの現行バージョン、tint()関数が壊れてませんかね？ フォグでZ-Depth的表現しようとしたら、どうにも動かない。 1日1〜2時間、プライベートの時間にちょこちょこ作って一気にリハビリしたい。 Daniel Shiffman師父の、インタラク
[CSS]残像アニメーションが気持ちいいシェア用のボタンを実装するスタイルシート
ボタンをホバーすると、サークル状のフラットなアイコンを使ったソーシャルメディアへのシェア用のボタンがアニメーションで表示されるスタイルシートを紹介します。 Animacion CSS ※デモは最新のモダンブラウザでご覧ください。 デモ自体は上記のアニメーションに比べてちょっと遅い動きですが、スタイルシートで調整すれば好みのスピードに変更できます。 実装は、下記のようになっています。 HTML 各シェアボタンはa要素で配置し、div要素で内包します。 <div id="redessociales"> <a class="smedia facebook" href="https://www.facebook.com/josernitos">Uno</a> <a class="smedia twitter" href="http://www.twitter.com/josernitos">Dos
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」:phpspot開発日誌
Draggabilly 単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」 ドラッグ＆ドロップだけ使いたい場合に使えそう。マウスだけでなく、タッチにも対応しています。 ドラッグ開始、移動中、終了時にイベントハンドラを設定できます スマホサイトで軽く手軽にドラッグを使いたい場合に検討してみてもよさそうですね 関連エントリ ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」 ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」
成功するPhoneGapアプリを開発するための高速化＆UXテクニック
興味深いブログ記事が海外で掲載されていました。拙訳で恐縮ですが紹介したいと思います。 内容はPhoneGapアプリを高速化するための手法の解説で、具体的な事例とともに、いくつかのテクニックの紹介が行われています。少し長い記述になりますが、是非PhoneGapやMonacaを用いた開発の参考にしてください。 成功するPhoneGapアプリを開発するための高速化＆UXテクニック Performance & UX Considerations For Successful PhoneGap Apps PhoneGapアプリを開発する方から、下記のような質問をよく尋ねられます。 ・アプリを高速化する方法は？ ・どうやってネイティブアプリのような質感を出せるか？ ・プラットフォームに違和感のないアプリを作るためのテクニックは？ ・OSのルック＆フィールとマッチさせるためには？ この記事では、素晴らし
D3.jsでForce-Directed Graphを使ってラブライブ！のキャラ関係を可視化する - AOI-CAT's diary
Force-Directed Graph 力指向グラフは、nodeの間と描画領域に物理的な作用を計算してうまいぐあいに表示するらしいです。 各node（円）はマウスで動かせます。 元データはPixivのタグ検索集計です。「(ラブライブ！ OR ラブライブ!) にこまき」などそれぞれのキーワードで検索して出てきた作品数を集計しました。 線の太さがタグ数（「にこまき」なら“にこ”“まき”間の線が出現数に応じて太くなる）を表しています。nodeの外周を囲む線は学年ごとの塗り分けをしています。 JSONのデータの構造 nodes配列をdata()でセットして、今までと同じようにcircleとlineをappendします。 links配列は、各nodeの関係を記述します。sourceの0は、nodes[0]です。 graph = { nodes : [ { "name" : "にこ", "color
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsPDFの練習(htmlの例) - jsdo.it - Share JavaScript, HTML5 and CSS
WordPressのプラグインやカスタマイズ情報を中心に紹介 - IMAGINATION DESIGN BLOG