1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
JavaScriptの3Dエンジン·Three.js MOONGIFT
Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度が向上することによって、Webアプリケーションなどの利用が促進される。HTMLレンダリング性能と合わせて重要な指針だ。 マウスの動きを追従する エンジンが高機能化すれば実現できる幅が広がる。その一つが3Dレンダリングだ。JavaScriptで3Dオブジェクトが表現できるようになれば、ゲームはもちろん様々な分野で活用できるだろう。そのレンダリングエンジンとしてThree.jsを紹介しよう。 Three.jsは3Dオブジェクトをレンダリングするライブラリで、先日話題になったGoogleマップを使ったマッシュアップ「The Wilderness Downtown」もこのThree.jsを使って作られた一つだ。さらにマウスで反応する
Box2DJS - Physics Engine for JavaScript
Left-click to create an object. Right-click to show next example. What's this Box2DJS is a JavaScript port of Box2D Physics Engine. To tell the truth, this is converted from Box2DFlashAS3_1.4.3.1 in an automatic manner. (The reason why not Box2DFlashAS3_2.0.0 based is simply because I overlooked the renewal.) How to use Download a zip file and extract it. Copy js/ and lib/ directories from the ext
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がI
JavaScript + CanvasでActionScript3のような描画·CanvasScript3 MOONGIFT
CanvasScript3はHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5とFlashによる次世代標準の覇権争いが続いている。HTML5は現状のFlashでできることをどんどんと浸食しており、今後開発されるサイトについてはFlashの選択が減ってくる可能性がある。 オブジェクトが回転する Flashが得意とする分野の一つにアニメーションがある。HTMLやJavaScriptでアニメーションを作ろうというのは相当大変な思いをしそうだ。だがHTML5になって機能が増えることで状況は変わってくる。それを垣間みれるのがCanvasScript3だ。 CanvasScript3はCanvasとJavaScriptを使って、アニメーションを実現するライブラリだ。マウスの位置によって動作速度を変えるオブジェクトや爆発するようにオブジェクトが広がって跳ね返るサンプルなどが公開
URLOpenerとりあえずまとまりました | Blog | Kousei Ikeda
[2010.09.20] chromeのバージョンアップにより、wmodeによってはpopupが開かなくなったり（参考記事）と、状況が変わってます。これは当時の記事なので現状と違う部分があります。すみません。 先日公開してみたURLOpener、ブラウザの挙動のあまりの違いに落としどころがわからなくなっていましたがまとまりました。 当初はJSでwindow.openを呼んだ時の動きに合わせる！と思っていましたが、別にそんな必要ないなと。 使う側になってみて考えて、とりあえずよく使う機能を楽に使えればいいや、と切り替えました。 ダウンロード SparkProjectに初コミットしてみましたので、Sparkのリポジトリからエクスポートして下さい。 http://www.libspark.org/wiki/ikekou/URLOpener またはzip http://ikekou.jp/blog
PHP での携帯開発に使える絵文字変換ライブラリ | バシャログ。
ぼちぼち 11 月も終わりですね。焼き芋たべたい！nakamura です。 ここ最近、なぜか立て続けに携帯サイトの案件が舞い込んできたため、絵文字の自動変換ライブラリを探していくつか見つけました。ただ、どれが一番優れている、というよりはサイトの規模や特性に応じてうまく使い分けるのが良いように感じました。というわけで、今回見つけたライブラリを簡単な解説を交えながらご紹介していきます。 らくらくケータイ3キャリアコンバーター（仮名） PHPを使って3分で作る3キャリア対応ケータイサイト ke-tai.org の matsui さんが自作した絵文字変換ライブラリで、ソフト名も今現在募集中というできたてホヤホヤのものです。特徴はなんと言ってもそのシンプルさと、導入がヒジョーーーーに簡単な事です。 ライブラリとは呼べないかな、とも思ってしまうシンプルさで必要なファイルは viewer.php と .
どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門 (1/5)
最新のライブラリーやJavaScriptの新しい活用法を紹介する「JavaScriptラボ」。今回は、9月末にリリースされたばかりの「YUI 3（Yahoo! UI Library Version 3）」を取り上げます。 Yahoo! UI Libraryとは？ 「Yahoo! UI Library」（以降、YUI）はその名の通り、ユーザーインターフェース周りを得意とする米ヤフー製のAjaxライブラリーです。YUIは、Ajaxが普及し始めた2005年に登場し、面倒なUI周りを簡単に処理できることから次第に普及していきました。実は、以前取り上げたAjaxフレームワーク「Ext JS」も、もともとはYUIの機能拡張(Extension)として生まれたものです。 YUIはタブパネルやスライダー、ドラッグ＆ドロップ、アニメーション機能など、他のライブラリーやフレームワークを凌ぐ充実したUI部品と豊
blog.alumican.net » Blog Archive » 縦横比を保ったままリサイズするBoundaryResizerクラス
読み込んだ画像をサムネイル枠内に収まるように縦横比を保ったままリサイズしたり、ステージの背景に敷くために拡大したりすることがあると思います。その都度計算式を書くのは面倒なので、クラス化しました。 Download » 通常版はこちら » BoundaryResizer.asファイルのみ （拡張子をasに変更してください） サンプル こちら（wonderfl）にあります。何が目的のライブラリかだいたい分かると思います。 使い方 サンプルコードはこんな感じで。 var bmp:Bitmap = ... var target:Rectangle = bmp.bitmapData.rect; var boundary:Rectangle = new Rectangle(50, 50, 300, 300); var scaleMode:String = BoundaryResizer.TOP
CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」:phpspot開発日誌
CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」 2009年09月02日- tripleb.js (javascript CSS 3 simulation) CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」 ライブラリを読み込んだら、ボックス要素の class="***" に修飾条件を指定しておくだけで、自動でボックスを角丸や、影付き、グラデーション効果 を与えることができるみたいです。 ↓適用すると以下のように修飾されます↓ 配布元は、色々なライブラリで有名な www.netzgesta.de。 CSS3の機能を使うので非対応ブラウザでは使えませんが、面倒な部分もJavaScriptでサクッと実現できちゃいますね。
KataPad.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法
IE7がPNG画像に対応しましたが、まだまだIE6ユーザーも多いため、実際のところまだしばらくPNG画像は使えないのが現状です。 色々なところでPNGをIE6に対応させるスクリプトが配布されていますが、ブロックレベルに内包されているaタグのリンクが機能しなくなる、img直置きに対応していないなど、弱点がいくつかあるのが現状です。 何とかできないものかと、先日会社のプログラマーの方と試行錯誤してみたところ、意外とあっさり完全に対応させることに成功いたしました。 これでデザインの幅が大幅に広がった今日この頃です。 手順1 まず、以下のサイトよりiepngfix.jsをダウンロードしてください。 透過PNGとIEとIE7 ソースの<head>～</head> に以下のソースを記述し、スクリプトを読み込みます <script src="xxx/iepngfix.js" type="“text/Ja
jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる
IE6以下では、:hover擬似クラスが <a> 以外では適用されません。が、この問題の解決策が紹介されているサイトを発見しました。 » WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる » Hackadelic: csshoverを使ったWeb StandardなCSSコーディング それぞれで紹介されているとおり、Whatever:hover で配布している csshover.htc というスクリプトを使えば、IEでもいろんな要素に:hoverを適用させることが出来ます。（ダウンロードの場所がちょっとわかりづらいですが、Changes のなかにあります。） 使い方は、css で以下のように書くだけ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
はてなブログ | 無料ブログを作成しよう
stardust-particle-engine - Project Hosting on Google Code