Adobe MAX 2015で発表されたアドビの新技術が凄すぎて会場が狂喜乱舞〜スニーク・ピークで発表された未来の11の技術 – ICS LAB

2015/10/07 879 users アドビ アドビシステムズ ピーク 池田 会場

アメリカ・ロサンゼルスにて開催されているアドビシステムズ(以下、アドビ)のクリエイティブティ・カンファレンス「Adobe MAX 2015」。二日目は「スニーク・ピーク」というアドビが開発中の実験技術を紹介する講演が行われました。紹介された技術は将来的に搭載されるかもしれない技術であり、未来のAdobe Creative Cloudの新機能を一足先に知ることができます。現地に渡った弊社ICSの池田... 続きを読む

ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 – ICS LAB

2015/08/18 431 users カーニング デザイン 記事12選 フロントエンド テキスト

どうも、ICS加賀です。 弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が... 続きを読む

HTML5 CanvasとWebGLでアイコンフォント集Font Awesomeを扱う方法 – ICS LAB

2015/08/17 55 users WebGL HTML5 Canvas 方法

こんにちは、ICS池田です。 「Font Awesome」(フォント・アウェサム)はWebサイトに手軽にアイコンを組み込むことができる無料のフォントセットです。アイコンを画像ではなくテキスト(文字)として表示させることができるため、制作時の手間を軽減させたりページの読み込み時間の短縮に役立ちます。TwitterのCSSフレームワーク「Bootstrap」でも採用されるなど人気のアイコンフォントです... 続きを読む

Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS LAB

2015/07/23 555 users ICS 新方式 鹿野 Prev Photoshop

ICS LAB Web制作効率化 2015/07/23 Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ « Prev こんにちは、ICSの鹿野です。 みなさんはAdobe Photoshopでどのように画像の書き出しをしていますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されており、どれを選択するかで書き出し時の手... 続きを読む

CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS LAB

2015/07/07 351 users mix-blend-mode DOMエレメント ICS池田

こんにちは、ICS池田です。 mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要... 続きを読む

コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS LAB

2015/06/15 665 users コーディング 和名 ICS池田 CSS フォント

こんにちは、ICS池田です。 コーディング向けの日本語対応の等幅フォント「Source Han Code JP（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやhtml/CSSの記述、ターミナルでのテキスト表示やコマンド入力など、和欧表示用フォントとしての利用を想定されたフォントです。 ■ダウンロードURL Re... 続きを読む

JenkinsとSeleniumを使ってWebコンテンツの自動UIテスト環境を作ろう！ – ICS LAB

2015/04/09 414 users Jenkins Selenium リグレッションテスト 手動

こんにちは。ICS渡邊です。 先日公開した「UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築」では、手動で行っていたWebアプリのUIテストをSeleniumを使って自動化する手法についてご説明しました。 SeleniumでUIテストを自動化することにより、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が簡単にでき、バグの早期発... 続きを読む

WebエンジニアのためのSwift言語入門 – ICS LAB

2015/03/25 455 users Webエンジニア

こんにちは、ICSの鹿野です。 Mac、iPhone・iPad、そして4月24日に登場するApple Watch。これらのApple製品上で動くアプリはObjective-CとSwiftという言語で開発することができます。Swiftは2014年に発表され、他のプログラミング言語の長所を多く取り入れたプログラミング言語です。何かしらのプログラミングの経験がある開発者にはもちろん、これからプログラミン... 続きを読む

PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会/蔵下発表資料 – ICS LAB

2015/02/17 119 users ローディング CreateJS勉強会 CreateJS 部分

こんにちは、ICS蔵下です。 先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは? PreloadJSとは、CreateJSのライブラリモジュールの一つで... 続きを読む

HTML5 CanvasとWebGLの使い分け―ICS LAB

2015/02/16 166 users WebGL CreateJS canvas ICS池田 口頭

こんにちは、ICS池田です。 2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回) が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容も出来る限り記載しました。 なお、前編(CanvasとWebGLの比較)と... 続きを読む

TypeScriptで始めるNode.js/io.js入門 – ICS LAB

2015/01/30 209 users TypeScript Socket.IO ICS 鹿野

こんにちは、ICSの鹿野です。 みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなWebコンテンツを作ったり、Grunt・gulpのようなフロントエンドツールとして使ったりとさまざまな場面で活用されています。ですが、Node.jsでコーディングする際は、JavaScriptの特性ゆえに... 続きを読む

Node.jsとSocket.IOによるPCとスマホのブラウザペアリングデモ – ICS LAB

2014/12/22 92 users Socket.IO ICS ファイアーウォール 鹿野 スマホ

こんにちは、ICSの鹿野です。 地図上での現在地表示やSNSにおけるプッシュ通知等、リアルタイムなデータ通信はインタラクティブなWebコンテンツには不可欠の要素です。今回はリアルタイムなデータ通信を簡単にしてくれるSocket.IOを使ってPCとスマホがペアリングするコンテンツを作りました。Socket.IOの簡単な解説と共に紹介します。 ※ ファイアーウォールの設定によっては閲覧できない可能性が... 続きを読む

Gitを使いこなそう！知っておくと便利な使い方　～Tower2・SourceTree～ – ICS LAB

2014/10/17 341 users Git クライアントツール ICS SourceTree 無償

こんにちは。ICSの渡邊です。 今年7月に高機能Gitクライアントの「Tower2」がリリースされ、また無償のGitクライアントの「SourceTree」も日々バージョンアップされており、Gitのクライアントツールもだいぶ充実し使いやすくなってきました。 以前、弊社野原がSourceTreeに関する記事「こんな使い方知ってましたか？SourceTreeをさらに使いこなすための便利機能」を掲載させて... 続きを読む

JenkinsでCI環境構築チュートリアル ～GitHubとの連携～ – ICS LAB

2014/10/08 168 users Jenkins GitHub ICS ブランチ ジョブ

こんにちは。ICSの渡邊です。 先日公開したJenkinsでCI環境構築チュートリアル(Windows編)では、Jenkinsのインストールとジョブの作成方法についてご説明しました。今回は特定のブランチにPUSHされたタイミングでGitHubと連携して最新ファイルを取得する方法をご説明していきたいと思います。 完成イメージ　～JenkinsとGitHubの連携～ 実際の開発シーンを想定して上記の図... 続きを読む

これからはGIFアニメからAPNGの時代に！ iOS 8でサポートされたAPNG画像を使いこなそう – ICS LAB

2014/09/30 560 users WebGL APNG PNG GIFアニメ みなさま

こんにちは、ICS蔵下です。 Safari 8(iOS 8)では様々な機能が新たにサポートされました。WebGLのサポートが印象的ですが本記事ではサポートされた機能の中でもアニメーションするPNG(APNG) を取り上げたいと思います。すぐにでも導入できるのか？とお悩みのみなさまの判断材料の一つになれれば幸いです。 そもそもAPNGって？ Animated Portable Network Gra... 続きを読む

SCSSとCompassでおしゃれなCSSパーティクルを作ってみた – ICS LAB

2014/08/28 221 users

こんにちは、ICSの鹿野です。 Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCS... 続きを読む

こんな使い方知ってましたか？SourceTreeをさらに使いこなすための便利機能 | ICS LAB

2014/05/29 372 users SourceTree ICS野原 Source 便利機能 機能

こんにちはICS野原です。 GitクライアントのSourceTreeは今年１月にWindows版も日本語に対応され、入門記事もだいぶ多くなってきました。 「SourceTreeの基本的な使い方はバッチリ！だけど、まだまだ使っていない機能があるなぁ」なんて人も多いのではないでしょうか？そんな人へおすすめの知っておくと便利な機能を５つ紹介します！ はじめに – SourceTreeとは？ Source... 続きを読む

HTML5エンジニアなら抑えておきたい！初期型から最新のスマホ端末まで、ブラウザのCanvas/CSS3描画パフォーマンス徹底検証 | ICS LAB

2013/05/27 442 users canvas iOS ICS池田 新旧 オブジェクト

こんにちは、ICS池田です。スマートフォンのブラウザでリッチコンテンツを作る場合に気になるのはパフォーマンスではないでしょうか。そこでiOSやAndroidの新旧様々な端末を使ってパフォーマンスを検証してみました。 描画テスト 画像のオブジェクトをどのくらいの個数を表示できるか測定しました。少ない数から表示していき、どのくらいまで多くのオブジェクトを表示できるかという形で検証しています。 特に比較... 続きを読む

HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう | ICS LAB

2013/05/16 426 users CreateJS ICS池田 FLASHアニメーション 手法

こんにちは、ICS池田です。 HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使... 続きを読む

HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証 | ICS LAB

2013/04/11 418 users JavaScriptライブラリ パフォーマンス 徹底検証

こんにちは、ICS池田です。HTML5でインタラクティブコンテンツを制作するにあたり、さまざまなJavaScriptライブラリがありどれを選ぶのか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。JavaScriptライブラリの選定の参考になれば幸いです。 今回検証したフレームワーク (とそのURL) メジャー... 続きを読む

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

2013/03/19 265 users 開発手法 Types ICS CreateJS DOM

どうも、ICSの加賀です。 先週開催されたCreateJS勉強会（第2回）で弊社池田(ClockMaker)の発表で紹介した「日本全国花粉飛散マップ」を、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、 HTML5で制作、PCだけでなくスマートフォンやタブレットでも閲覧可能。 CreateJSで、DOMではできないCanvasならではの表現。 TypeS... 続きを読む