次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記
JavaScriptでJSDocコメントを書くメリットとは - ICS MEDIA
筆者が試したところ、開発環境としてWebStormやVS Codeがとくに優れており、ツールチップにJSDocコメントの情報がすべて表示されました。 ちなみにReactやAngularなどのメジャーなJSライブラリにおいても、そのソースコードではJSDocコメントが使われています (例 : Angular、React)。APIが多岐に渡るJSライブラリを利用するとき、わざわざリファレンスをブラウザで開いたり解説書で調べることなく、コード上で関数の仕様を確認できます。 ▲描画ライブラリCreateJSのAPIを表示したもの JSDocコメントのメリット② APIリファレンスの生成 TypeDoc等のツールを使うことでコードのリファレンスドキュメントを作成できます。こういったJSライブラリのリファレンスはみなさんも一度は見たことがあるのではないでしょうか。 ウェブサイト案件のソースコードでAP
Google製ライブラリLiquidFunを使ったHTML5物理演算入門 - ICS MEDIA
物理演算とは物体の運動を物理法則に基づき数値計算することです。Web業界ではゲームやビジュアル表現の分野で利用されています。アクションゲームを例にすると、キャラクターが地面に立つ、ジャンプする、重力落下する、壁とぶつかる、坂道を滑り落ちる、といったことが物理演算の実装範囲になります。 本記事ではGoogleが提供するJavaScriptライブラリ「LiquidFun」を題材にHTML5で利用可能な物理演算シミュレーションの表現を紹介します。 ▲「LiquidFun」の公式サイトではドキュメントやデモが掲載されている 物理演算ライブラリ「LiquidFun.js」とは LiquidFunは2次元の物理演算ライブラリの定番「Box2D」をベースとした拡張ライブラリです。Box2Dが提供する基本的な物理演算機能をはじめ、LiquidFunによるプラスアルファの機能が提供されています。 重力 （B
スマホでもWebGLは爆速！ スマホブラウザの描画性能を徹底検証 （HTML CanvasとWebGLを利用） - ICS MEDIA
スマホでもWebGLは爆速！ スマホブラウザの描画性能を徹底検証 （HTML CanvasとWebGLを利用） スマートフォン向けのウェブコンテンツでもWebGLを採用すれば高速な描画性能が得られます。たとえば、ゲームやデータビジュアライゼーション、3D表示、広告向けスペシャルコンテンツといった分野でWebGLが役立つでしょう。iOSとAndroidも含め今やほとんどのスマートフォンでWebGLが利用可能といっても差し支えない状況です。この記事ではスマートフォンにおけるWebGLの描画性能を検証し、その結果を紹介します。 動作検証ビデオで見る各種スマートフォンの性能差 多くのパーティクル（粒子）を大量に表示することで描画性能を検証しました。パーティクルの数が多いほど高性能であることを示します。 ビデオ撮影の検証に用いたのは画面左上から順に次の端末となっています。検証時期（記事執筆時）は20
WebGLに対応し高速化したCreateJSの描画性能を探る - ICS MEDIA
インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました（参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ - ICS MEDIA
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス
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用のスクリプトが提
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
