『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

というわけで本年度、すごいなとおもったWebサイトをご紹介。 先に15サイトを紹介したのち、最後に大賞5つを紹介します（大賞が5つもあることに関しては気にしないでください） αブログならぬ、αサイト！レッツスタート！ ※サイトデザインは旬ものなので、時期を過ぎるとリンク切れ、デザインの変更があります。今すぐ楽しんでください。 ノミネート15作品 ゲスの極み乙女。　official website サイドバーから各種ページに移動した時に、地味に動くのがなんかむかつく（いい意味で）。とくにMEDIAページね。 そんなわけで、このサイト、デザインというよりインパクトで受賞。 胸やけ・吞酸劇場〜胸屋家の酸っぱい１日 このFlashの死んだ時代に、あえてオールFLASHに挑むその度胸。 さらにそれぞれのコンテンツが微妙に面白くてやばい。やばいというかヤヴァイ。FLASHヤヴァイ賞。 STAGEWOR

UnitePlayer はモバイルとゲームに特化した HTML5 な音楽再生プレイヤー UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。 扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。 フィーチャーフォン用のソーシャルゲームが大流行な昨今ですが、 フィーチャーフォン用のゲームって音が無いですよね? そのゲームをそのままスマートフォン向けにコンバートしても、音がならずに寂しい感じですよね? 2012年は UnitePlayer で BGM も SE も鳴らしちゃいましょう。 そして没入感や色々なものを高めちゃいましょう! PCブラウザでもそのまま動くから、横展開もお手軽に! UnitePlayer なら iPhone でも BGM と SE を擬似的に同時再生できますよ。 Unit

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ

Loading...

JavaScriptでは、本来のオブジェクト指向言語とは少し異なり、 正確なクラスの定義は出来ません。 しかし、JavaScriptでは強力な関数定義方法が用意されていますので、関数をクラスとして 実装する事で対応するのが一般的です。 今回の記事では、そんなJavaScript流のクラス定義方法をソースコード付きで解説します。 クラス定義とインスタンス生成時のコンストラクタについて クラス内のメンバ変数を定義しよう インスタンスメソッドを定義しよう クラス変数とクラスメソッドについて クラスを継承してみよう インスタンスメソッドのオーバーライド クラス定義とインスタンス生成時のコンストラクタについて JavaScriptでは、クラスの定義は関数の定義と同様に『function』を用いて定義します。 関数名がクラス名となり、関数内の処理がクラスのコンストラクタとなります。 定義したクラスをイ

CSS Niteビギナーズ：HTML5+CSS3の「IE10とWindows 8とHTML5」セッションで使用したスライドです。 http://cssnite.jp/beginners/html5css3/Read less

この記事は賞味期限切れです。（更新から1年が経過しています） 前編に引き続き、FlashCS6のスプライトシートをjQueryで処理するお話です。 処理をライブラリにまとめましたので、ご紹介します。 FlashSprite.js Flashspritejs by mach3 Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。 前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。 簡単な使い方 1. FlashCS6+でスプライトシートを生成する FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。 データ形式は

長らく仕様策定に手間取っていたHTML5が大きく推進することになった理由の一つには、やはりAppleがiPhoneのFlashへの非対応を発表したことがあるでしょう。HTML5自体はいまだ完全には標準化されていませんが、主要ブラウザでは既にcanvasによる描画処理をサポートするようになっており[1]、今後徐々にFlashからHTML5への移行が進んでゆくものと思われます[2]。 FlashのプロジェクトをHTMLに変換するツールにはSwiffy(Google)、SWF Animation Converter(マルチでバイスlab.)など何種類かありますが、今のところブラウザ互換性や、ActionScript部分への対応状況などの問題により、これといった決め手がないのが現状です。 その中で、Adobe Flash Professional CS6にcanvasアニメーション用フレームワーク

何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし

失敗知識データベースの管理・運用は、特定非営利活動法人失敗学会に移譲しました。 10秒後にジャンプします。 ジャンプしない場合は、下記のURLをクリックしてください。 http://www.shippai.org/fkd/index.html

回転式のカード選択UIになります。 webkit系のブラウザで確認してください。（safari,Google Chrome ） スマートフォンで動作することを考慮し、制作しました。 よって、dom構造を元に制作しております。 iPhoneのみシェイクによる（端末を振って）合成が行えます。 また、シェイクによる合成スタートはアニメーションが異なります。 （カードがバラバラになります。） 【スマートフォン閲覧方法】 ページ右の「Smart Phone」のアイコンをクリックするか、 以下のURLをクリックすると確認出来ます。 【URL】 http://jsrun.it/panicdragon/blTa 【合成方法】 PC：左右のボタンで選択→ベースカードをクリック→素材カードをクリック→合成スタートボタン スマートフォン：カードをフリックで選択→上にフリックでベースカード、素材カードを選択→シェ

CEDEC 2013 セッションで紹介しましたプレゼンです。Flash アニメーション作製のスキルがあるゲーム会社は、どうやってFlashアセットを色んなフレームワークやプラットフォームに持って行けるかの話です。Flash Proの次アップデート「Avatar」を言及します。Read less