gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
エフェクト作成入門講座 Effekseer編 ゆがみ効果を使ったトランジションエフェクトの作成 - ICS MEDIA
エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第5弾です。今回はゆがみ効果を使ったトランジションエフェクトを取り上げます。作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。 今回のお題：ゆがみ効果を使ったトランジションエフェクト やってみよう：トランジションエフェクトの作成 エフェクトの構成図です。サンプルファイルをダウンロードして、記事と照らし合わせながら進められます。各エフェクトのパラメーター設定値はサンプルファイルを直接ご覧ください。 今回紹介するテクニック ゆがみ効果の仕組みを抑え
超簡単! Effekseerで作るネオン風テキストストロークアニメーション - ICS MEDIA
エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第6弾です。今回はテキストストロークアニメーションの作り方を取り上げます。作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。 今回のお題：テキストストロークアニメーション サンプルファイルをダウンロードして、記事と照らし合わせながら進められます。各エフェクトのパラメーター設定値などはサンプルファイルを直接ご覧ください。 今回紹介するテクニック 3Dモデルを使ったパーティクルエフェクト 3Dモデルを使ったテキストストロークアニメーション ネオン風
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
ヴィジュアルプログラマー必見。PopcornFxによる花火エフェクトの作成 - ICS MEDIA
リアルタイムパーティクルエフェクトミドルウェア「PopcornFx」(ポップコーン FX)を使ったエフェクト作成の入門講座第1弾です。公式サンプルをお題にPopcornFxの持つパワフルな機能に触れながら、エフェクト作成に役立つテクニックを紹介します。WebGLやシェーダーを使ったVFX作成にも役に立つと思いますのでぜひご参考ください。 PopcornFxとは？ パリとモントリオールに拠点を置くPersistant Studios社が提供するリアルタイム3Dグラフィックスのソフトウェアです。エフェクトエディター（Windowsのみ対応）、マルチプラットフォーム対応のランタイムSDK(C++)、Unity, Unreal Engineのプラグインから構成されます。エディター自体は無料で利用できます。ランタイムSDK、プラグインは有料となっています。 ※対応プラットフォームは、Xbox One
エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成 - ICS MEDIA
2015年7月15日にバージョン1.0が公開され、同日開催された第1回ゲームエフェクト勉強会（株式会社さくらソフト主催。参加者108名）でも話題になった、エフェクトツール「Effekseer」(エフェクシアー)を使ったエフェクトの作成方法を紹介します。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。 今回使うエフェクトツール「Effekseer」 Effekseerは簡単に綺麗なビジュアルエフェクトを制作できるツールです。 Effekseerはゲーム向けの爆発やヒットエフェクトなど様々なエフェクトを制作できるフリーでオープンソースなツールです。 制作したエフェクトは2Dのアニメーションとして出力したり、3Dのエフェクトとしてゲームに組み込んで再生できます。 ランタイムを組み込むことでDirectXやOpenGLを用いたC++の
エフェクト作成入門講座 Three.js編 ゲーム演出に役立つマグマ表現の作り方 - ICS MEDIA
ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。この記事のシリーズでは、WebGLのJSライブラリとして有名なThree.jsを利用して、3Dエフェクトの作成手順を解説します。 今回、扱うテーマは「マグマエフェクト」。実は以前、このテーマを3Dエフェクト作成ツールであるEffekseerエフェクシアーで扱ったことがあります（記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」)。Effekseerはプログラムを使わないデザインツールなので、今回紹介するThree.jsによるプログラムの作り方とはまったく異なります。ですが、表現のエッセンスはどんな作り方でも共通。エフェクトの実装ポイントが理解できていれば、異なった方法でも同じ表現を実装できるのです。 本記事
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
