ReactのSuspense機能に付随するトランジションは、使いこなせば有用ですが裏で何が起こっているのか分かりにくい機能です。この本では、手を動かすことでトランジションの機構をしっかりと理解することを目指します。

VercelがWebGLレンダラーをデフォルトにしたターミナルエミュレータ「Hyper v3.1.5」をリリースしています。詳細は以下から。 Next.jsを開発する米カリフォルニア州のVercel(旧ZEIT)は現地時間2022年01月08日、同社がオープンソースで開発しているElectronベースのターミナルエミュレータ「Hyper」の最新バージョンとなるv3.1.5アップデートで、WebGLレンダラーをデフォルトにしたと発表しています。 Use WebGL Renderer by default リリースノートより抜粋 Hyperは2019年にリリースされた「Hyper v3.0.0」から、レンダラーにWebGLを追加していましたが、他のプラグインとの互換性からデフォルトレンダラーにはCanvasが採用されていました。 Hyper v3.1.5ではWebGLレンダラーがデフォルトにな

コンテンツ開発 ソフト・エンジン・ライブラリ ソフトウェア＆ツール-Software&Tool PhysX and Flow GPU Source Code Now Avail... 2025-04-09 NVIDIAは、長年にわたり物理演算の基盤技術として活用されてきたPhysXおよびFlowのソースコードを完全にオープンソース化しました。対応するGPUカーネルも含め、BSD-3ライセンスでの公開となり、誰でも利用・改変が可能に。 続きを読む CINEMA 4D プラグイン プラグイン＆アドオン-Plugin&Addon RKT Voxel Mesher - ボリュームビルダーをボクセル化！Mogra... 2025-04-09 Rocket Lasso氏による、CINEMA 4D向けボクセルメッシュ化プラグイン「RKT Voxel Mesher for CINEMA 4D」がリリースさ

FamiStudio NES Music Editor FamiStudio is a simple music editor for the Nintendo Entertainment System or Famicom. It is targeted at both chiptune artists and NES homebrewers. Latest Hotfix Release 4.3.3 (Febuary 28th 2025) Changes/Fixes: First IOS release! Improved playback speed precision to better match hardware Improved NSF import duration accuracy Fixed toolbar issue when resizing that could c

capistrano-sidekiq でインストールされる systemd 制御ファイル入れた時のロギングについて、CentOS7 あたりだと対応できないので、その対応について。 何が問題なのか このあたりで書いた問題ですね。 donbulinux.hatenablog.jp syslog を利用する append による追記処理が利用できないので、 syslog に流して logrotate で処理するよう設定します。 変更したら daemon-reload してから sudo systemctl restart sydekiq しておいてください。 systemd ファイルを修正 sidekiq:install タスクを利用していると、 /etc/systemd/system/sidekiq.service に標準ファイルが設置されるので、以下のように変更します。 -StandardO

開発中にプログラムが固まった時に kill プロセスID って打ったことがある方は多いかと思います 僕もそうで、 kill コマンドはプロセスを強制終了するためのコマンドだと思っていました ですが puma のログローテートを設定している時に kill -HUP って出てきてなんだこれ？ってなりました あれ？ログファイルを握り直すのに kill 使うの？？プロセスを止めたいなんて思ってないよ？？？みたいな なのでちゃんと調べてみました TL;DR kill コマンドはプロセスに対して「シグナル」を送信するためのコマンド シグナルはプロセスがプロセス外でのイベントに対して対応するための機構 シグナルには定義があってそれごとにデフォルト動作がある シグナルの動作は上書きすることも可能 今回のシチュエーション logrotate で puma のログファイルをローテーションしたい、という状況でし

JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版

Please check the box below to access the site Don't worry - you're one click away from continuing your normal visit. We're dedicated to keeping Fiverr safe from malicious visitors. Something in your behavior has triggered our protection systems - we apologise for any inconvenience this process may have caused. Ad blocking or ad filtering software may interfere with our ability to identify you as h

var ctx = canvas.getContext('2d'); // 範囲コピー var imagedata = ctx.getImageData(sx, sy, sw, sh); // 指定位置にペースト ctx.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]); ということは、取得先と配置先をずらせばglitchになりますね。 イエーイ完成。 2. image画像やvideo映像もglitchしたい しかしこのままではimage画像やvideo映像はglitchできません。 可能にするにはCross-Origin Resource Sharing(CORS)をキーワードに調べておく必要があります。 CORS を用いずとも Canvas で画像は扱えますが、この場合 Canvas

はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する

WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。 歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。 詳しくは以下 11種類のホバーアクションが収録されており、全て異なる変位画像を使用しているので、雰囲気も多種多様です。雪の結晶が溶け出すような柔らかい印象のエフェクトから時空間移動でもするかのような疾走感のあるものまで、幅広いホバーアクションのソースを見ることができます。three.jsを使用しているため、最新のブラウザでも問題なく動作するのもデベロッパーには嬉しいポイント。 ひと味違うホバーアクションで差別化を図りたい方は、ぜひチェックしてみてください

こんにちは。F.S.です。 先日Webサービスの調査の一環で、ブラウザで簡単な動画を作る方法を調べてみたので紹介します。 簡易なプロモーション動画広告の作成に使われるようなやつです。 MS Power Pointみたいに画像や動画、テキスト、図形を素材にしたスライドショーのようなものをイメージしています。 今回は、ブラウザ上のアニメーションを動画に出力するところまでやってみます。 こちらが作成した動画のサンプルです。 ※音が出ます 解像度は640×360です。本当は1280×720でやりたかったのですが、処理落ちが目について断念しました・・ やり方 大まかな流れとしては下記の通りですが、具体的なやり方は様々あるかと思います。 画像やテキスト、サウンドを元にしたアニメーションスクリプト（シナリオ）を作成 スクリプト（シナリオ）に従って、JSでアニメーションを再生 アニメーションをキャプチャし

Webデザインをレイアウトや構図から、最近のトレンドから、カラーや配色から、業種やジャンルから、印象やイメージから、そのデザインのアイデアや仕組みや作り方が分かるオススメの解説書を紹介します。 「Webデザインは見て学べ」と言われますが、単に見るだけでは足りません。400以上の魅力的なWebサイトのレイアウト、配色、フォント、写真、アイコン、構成要素、動き、プログラムなどを分析し、デザインのさまざまな角度から詳しく解説されたWebデザイン良質見本帳を紹介します。 本書は当ブログでも大好評だった「Webデザイン良質見本帳」（紹介記事）の第2版です。第2版といっても、内容はほぼすべてが刷新されており、現在の最新Webデザインに完全アップデートされています。 本書はWebディレクター・デザイナーだけでなく、Web制作に携わるすべての人に役立つ一冊です。Web制作の参考になるだけでなく、困った時の