君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
3Dコンテンツの最適化に。圧縮テクスチャーをWebGLで扱う方法と利点 - ICS MEDIA
GPUの最適化手法として「圧縮テクスチャー」という画像を扱うための技術があります。画像ファイルと言えばJPGやPNGなどを思い浮かべる開発者が多いと思いますが、圧縮テクスチャーはGPUに最適化された画像形式です。圧縮テクスチャーは主にコンシューマーゲームやUnityなどで使用されていますが、ウェブコンテンツにおいてもWebGL開発で圧縮テクスチャーが役立ちます。 本記事ではWebGLを使った圧縮テクスチャーの使用方法と、Adobeが開発した圧縮テクスチャーフォーマットであるATF（エーティーエフ）テクスチャーについてそれぞれ解説します。まずはデモをご覧ください。 デモを別ウインドウで再生する ソースコードを確認する ▲圧縮テクスチャーを表示するデモ。ATFファイルを読み込むことで、OS環境に応じて最適な圧縮テクスチャーを表示している 圧縮テクスチャーとは 通常、WebGLにおいてテクスチャ
Unity Post Processing Stackで作る光芒エフェクト - ICS MEDIA
Unityでコンテンツを開発されている方は、Post Processing Stackというアセットを一度は耳にしたことがあるでしょう。Unity Technologiesが公式にリリースしているアセットで、ブルームエフェクトや、被写界深度エフェクト、カラーグレーディングなどさまざまなポストエフェクトが備わっています。本記事ではPost Processing Stackで光芒エフェクトを作る方法について解説します。 今回作成するエフェクト サンプルファイル GitHubにて本記事のサンプルファイルを公開しています。記事の内容と合わせてご確認ください。 Unityプロジェクトのサンプルファイルを確認する Post Processing Stackでエフェクトを作成するメリットとは？ Unity 2018からScriptable Render Pipelineというプロジェクトテンプレートが追
たった4行でできる！ ブラウザ向けVRをThree.jsで実装する方法 - ICS MEDIA
2018年にOculus Go（オキュラス・ゴー）が発売されました。Oculus Goはパソコンやスマートフォンを必要とせず、単体でVR（バーチャルリアリティ、仮想現実）が楽しめるスタンドアロン型VR HMD（ヘッドマウントディスプレイ）です。価格も当時は23,800円からと比較的安価なため、日本でも購入者が増えこれまでと比べ一気にVR環境が広がりました。 VR環境の普及に伴い、ウェブコンテンツにおいてもVR対応へのニーズが増えています。ウェブブラウザにはWebXR Device APIが策定されており、これを使用することでブラウザでもVR体験が可能です。 ※以前はWebXR APIではなく、WebVR APIという仕様がありました。WebVR APIの策定はv1.1で停止しています。VR以外にもAR（拡張現実）やMR（複合現実）といったXR（◯◯現実）を総合的に扱うWebXR Devic
Three.jsでモデルデータを読み込む - ICS MEDIA
Three.jsでの読み込み方 Three.jsでモデルデータを読み込むには、JavaScriptでThree.jsの初期化を済ませたあとで、ローダーを使ってファイルを読み込み、3D空間に追加するという手順をとります。 データ形式ごとにローダークラスが用意されています。ただ、ローダークラスは、Three.jsライブラリの本体に含まれていないので注意が必要です。ローダークラスはscriptタグ等で取り込む必要があります。 GLTFファイルの場合 GLTF（ジーエルティーエフ）はインターネット向けの3Dファイル形式です。クロノスグループによって2017年に仕様として定められました。GLTFの中身はJSONファイルを中心として、そこから参照される画像やメッシュデータ等の関連ファイルで構成されています。 GLTFファイルのサンプルはクロノスグループのGitHubから取得できます。 今回は以下のファ
【速報】人工知能Adobe Senseiを組み込んだ未来のPhotoshopとXDが凄すぎる - ICS MEDIA
世界最大のクリエイティブカンファレンスAdobe MAX 2017が米ラスベガスで開催されています。10月18日の基調講演では、アドビの人工知能「Adobe Sensei」を活用した、未来のクリエイティブツールのデモが実演されました。 本記事では、速報として現地で取材しているスタッフ（池田）がレポートします。 Photoshopに組み込んだAdobe Sensei Photoshopに組み込んだAdobe Sensei。「クリエイティブアシスタント」という位置付けです。Siriのようにサイドパネルでいろいろアドバイスするそうです。 映画のポスターの手描きのスケッチをPhotoshopに挿入します。すると、サイドバーに解析した結果が表示されます。このスケッチから「女性」「星」「宇宙」が含まれていることをAdobe Senseiが分析しています。 キーワードを元に検索するよう伝えると、適した画
Flash Playerが終了するまでに見ておきたい！ 今も試せる歴史的Flashサイトまとめ - ICS MEDIA
多くのサイトは脱Flashの流れのなかにあり、従来Flashで作られていた表現の多くはHTML5へ移行が進んでいます。使われている技術は変われど、アニメーションを心地よく見せる技やユーザーを楽しませる要素は普遍的なもの。かつて話題になったFlashサイトから得られるものは多いはずです。 2017年7月26日（水）、ブラウザプラグインのFlash Playerが2020年末に終了すると、アドビが発表しました（参照「Flash とインタラクティブコンテンツの未来 | Adobe.com」）。Flashサイトがブラウザで見られなくなってしまうまでに見納めするべきサイトをまとめました。 FONTPARK 2.0 | MORISAWA 別ウィンドウで開く フォントメーカー「モリサワ」のウェブサイト（2008年公開）。文字のパーツを組み合わせてオリジナルのイラストを作成し、作品として投稿・共有できます
サンプルで理解するWebGL 2.0 - WebGL 2.0の利点とは - ICS MEDIA
ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0が主要なブラウザで正式対応し始めました。2017年1月にリリースされたChrome 56とFirefox 51や、2021年9月のSafari 15から標準で利用でき、ウェブ表現のさらなる進化への期待が高まります。 本連載では3回に分けてWebGL 2.0の新機能をデモを交えて紹介します。 WebGL 2.0の機能を使ったデモ まずはWebGL 2.0ではどんなことができるのか、機能ごとにデモを作成したので紹介します。それぞれ、マウスドラッグやマウスホイール/上下矢印キーで視点を変更できるので動かしてみてください。 ※各デモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。 Geometry Instancing Geo
SVGコンテンツ制作に役立つ！ 流行りのSVGライブラリまとめ - ICS MEDIA
SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し
WebGL開発に役立つベクトルの外積 (Three.js編) - ICS MEDIA
この記事は前回の「WebGL開発に役立つベクトルの内積 (Three.js編)」の続編です。前回はベクトルの内積を勉強しましたが、今回は外積について紹介します。外積は高校までの数学では学んでいないと思いますが、本記事では簡潔に要点だけを解説するので安心してください。外積は衝突判定や、光の表現など、3Dコンテンツ制作において重要なさまざまな場面で活躍します。一緒に外積について学び、外積をThree.jsでどう応用していくかを学んでいきましょう。 外積を使った3Dのデモの紹介 本題に入る前に外積を使ったデモを作成したので紹介します。今回は以下のようなトロッコがレールに沿って走る処理を外積を使って実装しています。サンプルコードもGitHubにアップしているので参考にしてください。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)で作成しています。 外
WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Adobe MAX 2016 Sneaksで発表された新技術！ アドビの本気を垣間見る11の革新的なテクノロジー - ICS MEDIA
Adobe MAX 2016 Sneaksで発表された新技術！ アドビの本気を垣間見る11の革新的なテクノロジー 米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2016」（カリフォルニア州サンディエゴ）。二日目は「スニークス」というAdobeが研究中の技術を発表する恒例の講演が行われました。ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。未来のCreative Cloudの新機能を一足先に知ることができます。本記事では発表された11のテクノロジーを、イベントに参加したスタッフがレポートします。 ▲11月3日（米国時間）の目玉プログラム「スニークス」。観客の注目度は高い 1. 紙に手書きして、3Dオブジェクトを着色するペイント技術 冒頭を飾ったのは未来のペイント技術
GLSLを使ってワンランク上の表現を！ Three.jsでのぷるぷるシェーダーの作り方 - ICS MEDIA
WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。 使用技術について GLSLとはOpenGL Shading Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー（3D描画のための一連の計算セット）を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし
話題になったウェブサイト事例 【2016年夏〜秋】 - ICS MEDIA
私たちが毎日目にしているウェブサイトは、ユーザーの閲覧環境や使用する技術によって日々変化しています。今回は、2016年8〜10月に国内外のブックマークサイトで取り上げられた国内のリッチなウェブサイトを5つ取り上げ、どのような技術や表現手法が用いられているのかを解説します。 IJC MATSURI | IS JAPAN COOL? 別ウィンドウで開く ANAが運営する外国人向けのメディアサイト「IS JAPAN COOL?」で日本の祭りを紹介するスペシャルコンテンツ。サイトの背景一面に映像を表示し、迫力のある音で祭りの臨場感を表現しています。映像の他にもさまざまな演出が各所に用意されており、日本に訪れたことのない外国人でも日本の祭りを感じられます。 ▲デスクトップ版では、祭り独特の所作に似せたUIで映像（数枚のコマ画像）をパラパラアニメのように操作できます ▲360度の全方向を撮影できるカメ
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
HTML5製アプリParticle Developの開発の裏側〜ElectronとAngular 2で開発効率が劇的に向上―CreateJS勉強会発表資料（後編） - ICS MEDIA
HTML5製アプリParticle Developの開発の裏側〜ElectronとAngular 2で開発効率が劇的に向上―CreateJS勉強会発表資料（後編） 本記事は2016年1月26日（金）に開催されたCreateJS勉強会 （第7回） の発表資料「CreateJSで開発するクロスプラットフォームなアプリ開発〜ElectronとPhoneGapで広がる可能性〜」の後編となります。前編記事「高まるHTML5製アプリの需要」に続けて本記事ではHTML5製デザインツール「Particle Develop」の開発事例を紹介します。 HTML5製デザインツール「Particle Develop」とは 今回、Particle Developという美しいパーティクルを作れるHTML5製のデザインツールを作成しました。雪や炎、キラキラなどのパーティクル表現を作成でき、ベクターグラフィックスとなって
Adobe MAX 2015で発表されたアドビが研究中の新技術〜 スニーク・ピークで発表された未来の11の技術 - ICS MEDIA
Adobe MAX 2015で発表されたアドビが研究中の新技術〜スニーク・ピークで発表された未来の11の技術 アメリカ・ロサンゼルスにて開催されているアドビシステムズ（以下、アドビ）のクリエイティブティ・カンファレンス「Adobe MAX 2015」。初日の基調講演（参考記事「[速報]Adobe MAX 2015 基調講演レポート」)に続いて、二日目は「スニーク・ピーク」というアドビが開発中の実験技術を紹介する講演が行われました。紹介された技術は将来的に搭載されるかもしれない技術であり、未来のAdobe Creative Cloudの新機能を一足先に知ることができます。現地に渡った弊社ICSの池田が速報レポートとしてお伝えします。 簡単な操作で新しいフォントを作り出せる技術：Project Faces フォントの骨格を解析し、字形を自由自在に調整し新しいフォントを作成できる技術。 ▲フォン
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
