タグ

ブックマーク / ics.media (10)

  • Web・アプリデザイナー必見! Adobe Photoshop CCの「デザインスペース」を使った新しいワークフロー - ICS MEDIA

    ▲ 設定できる項目数の比較 「設定できる項目が少なくてデザインができないのではないか」と思われるかもしれませんが、その点は心配ありません。デザインスペースから標準のワークスペースへは、[ウィンドウ]→[標準のPhotoshopに戻る]により切り替えることができます。Web・アプリケーションのデザインはデザインスペースを使って素早くデザインし、どうしても標準のデザイン機能でないと実現できないデザインがあれば標準版へ切り替えながらデザインする、というワークフローとなります。 デザインスペースは未来のワークフロー 筆者は何度かこのデザインスペースを使用してデザイン作業をしていますが、標準版より目的の機能に素早くアクセスできるようになって非常に便利です。また、Adobeのグラフィック作成ソフト「Adobe Fireworks CS6」に近いようにも見えますが、必要な場合はすぐにPhotoshopの

    Web・アプリデザイナー必見! Adobe Photoshop CCの「デザインスペース」を使った新しいワークフロー - ICS MEDIA
  • 今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA

    みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか? タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか? そもそもなぜインデント論争が起こってしまうのでしょうか? それはそれぞれ一長一短のため好みが分かれてしまうか

    今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
  • エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成 - ICS MEDIA

    2015年7月15日にバージョン1.0が公開され、同日開催された第1回ゲームエフェクト勉強会(株式会社さくらソフト主催。参加者108名)でも話題になった、エフェクトツール「Effekseer」(エフェクシアー)を使ったエフェクトの作成方法を紹介します。普段エフェクト作成やゲーム開発をしない方も、記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。 今回使うエフェクトツール「Effekseer」 Effekseerは簡単に綺麗なビジュアルエフェクトを制作できるツールです。 Effekseerはゲーム向けの爆発やヒットエフェクトなど様々なエフェクトを制作できるフリーでオープンソースなツールです。 制作したエフェクトは2Dのアニメーションとして出力したり、3Dのエフェクトとしてゲームに組み込んで再生できます。 ランタイムを組み込むことでDirectXやOpenGLを用いたC++

    エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成 - ICS MEDIA
  • JSFL管理の決定版! Animate CCの拡張機能「JSFL Tool」パネルを公開 - ICS MEDIA

    ICSではFlash開発を行う際、「JSFL」というFlash Professional上で実行できるスクリプトを活用して処理を自動化しています。しかし、プロジェクトごとに必要なJSFLだったり、チームで作業しているとJSFLの更新があった場合の周知などしなくてはいけなかったり、JSFLは管理が大変です。しかもJSFLファイルを配置するディレクトリはユーザーディレクトリの奥深く、気を抜くとどこだったのかわからなくなってしまいます・・・。 そこでJSFLの管理を簡単にするツールを、CEPというAdobe Creative Cloudで共通に動作するHTML5とNode.jsの拡張フレームワークを使用して作成してみました。具体的な制作については主に「CEPスーパー メガ ガイド: HTML5+NODE.JSでADOBEのツールを拡張する」を参考にしています。 今回のツールづくりの目的 どこにあ

    JSFL管理の決定版! Animate CCの拡張機能「JSFL Tool」パネルを公開 - ICS MEDIA
  • SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA

    Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基的な四則演算や三角関数といった数学的な処理や、繰り返し文(for文)、条件分岐(if文)等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。

    SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
  • SourceTreeの使い方 - 初心者が習得すべき基本操作(diff, stash, tag, revert, cherry-pick) - ICS MEDIA

    SourceTreeの使い方 - 初心者が習得すべき基操作(diff, stash, tag, revert, cherry-pick) GitクライアントのSourceTreeソースツリーは無料で使えるGitアプリケーションとして人気があります。「SourceTreeの基的な使い方はバッチリ! だけど、まだまだ使っていない機能があるなぁ」なんて人も多いのではないでしょうか? そんな人へオススメの知っておくと便利な機能を5つ紹介します。 ※記事は2024年4月現在のmacOS 14.4.1、SourceTree 4.2.7で解説しています。Windows版のSourceTreeでも同じ手順で利用できます。 はじめに - SourceTreeとは? SourceTreeはGit / MercurialのGUIクライアントで、Atlassian社から無償で提供されています。Windows

    SourceTreeの使い方 - 初心者が習得すべき基本操作(diff, stash, tag, revert, cherry-pick) - ICS MEDIA
  • Flash Player/Adobe AIRでのメモリリーク対策まとめ (Flash Builder/Scout編) - ICS MEDIA

    Adobe AIRアドベントカレンダーの一環として、「Flash Player/Adobe AIRのメモリリーク対策」を記事にまとめました。メモリリーク対策として弊社が取り組んでいる手法を紹介します。 この記事では次のソフトウェアを利用します。 Flash Builder 4.7 Adobe Scout メモリリーク対策の重要性 Flashコンテンツ/AIRアプリを長時間起動してるとメモリの使用量が増大し動作が不安定になることがあります。メモリ使用量の増大によってフレームレートの維持が難しくなったり、Flashコンテンツ/AIRアプリのクラッシュへとつながります。 Flashコンテンツの制作でメモリリーク対策を必要としなかった開発者は多いと思います。2000年代のフルFlashサイト全盛期に需要のあった広告系コンテンツ。それらは訴求力重視・公開期間が短めということもあってメモリリーク対策が

    Flash Player/Adobe AIRでのメモリリーク対策まとめ (Flash Builder/Scout編) - ICS MEDIA
  • FlashでStage3Dコンテンツを作るならおさえておきたい、各種3Dライブラリ徹底比較 - ICS MEDIA

    2013年5月26日、Stage3Dオンラインカンファレンスが開催されましたが、各種3Dライブラリについてまとまった情報が欲しいなと思ったのでブログ記事にしてみました。Flashを用いた3Dコンテンツを導入するにあたり、3dsMax, Maya、Cinema4Dなどの3Dモデル作成ツールとの親和性、GUIで直感的に作成できるシーン構築ツールなどに重点を置いて解説します。 Away3D http://away3d.com/ Adobeと非営利な活動として提携している。3dsMaxとの親和性が高くユーザー数が多い。シーン編集ツールAwayBuilderが登場し、日々進化を続けています。 3Dツールとの親和性 公式では3dsMaxを推奨。3dsMaxのエクスポータープラグインを備えています。(後述のSEA3Dと組み合わせると強力) Blender, Maya, Cinema4D用のスクリプトが提

    FlashでStage3Dコンテンツを作るならおさえておきたい、各種3Dライブラリ徹底比較 - ICS MEDIA
  • HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA

    スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか? 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA(シングルページアプリケーション)など多岐に渡っています。そこで、記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。

    HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
  • HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA

    HTML5デモ「日全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会(第2回)で発表したWebサイト「日全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ

    HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
  • 1