Online GIF maker and image editorVideo to GIFResizerOptimizerGIF MakerEzgif.com is a simple, free online GIF maker and toolset for basic animated image editing. Here you can create, edit and convert GIF, APNG, WebP, MNG and AVIF animations. ezgif.com news and updatesFeb 15, 2025The Sprite Sheet Cutter now allows you to customize output filenames, with additional output formats available. Feb 7, 20
ウェブサイトやアプリなどでアニメーションするイラストを目にすることがよくあります。クリックしたらアニメーションする「いいね」アイコン、ローディング画面など、最近はインタラクティブでリッチなアニメーションを取り入れたものが多いです。 このようなアニメーションを作るツールとしてLottieが有名ですが、Riveというツールがあるのをご存知でしょうか？ Lottieもとても便利なツールですが、RiveにはLottieにはない魅力があります。今回はこのRiveのメリットやデメリット、実際にRiveで作ったデモをご紹介します！ Riveとは？ Riveはアニメーションを作成できるデザインツールと、それを多様なプラットフォームで実行できるランタイムです。最大の特徴はインタラクションをツール上で作れることです。オンラインエディター、またはダウンロードページからダウンロードしたデスクトップアプリがあります
※Pull request がマージされたので、下のようなことをしなくても縁取りを付けることができるようになった。 HTML・CSS を SVG 画像に変換する Vercel 製ライブラリ、Satori でテキストに縁取りを付ける。というおはなし。 SVG はテキストの縁取りに対応しているものの、Satori は対応していない。というのが現状。 解決方法 const svg = await satori(/* HTML */, { /* まあなんやかんや設定がありまして */ embedFont: false }); まずは Satori のオプションで embedFont を false に設定して、テキストをパスとして書き出すのではなく、SVG の <text> 要素を使用してテキストを書き出すようにする。 SVG 画像の文字列から、特定の文字列を検索対象として置換する。 const
タイムラインで流れてきたポストから、Googleが作っているImageFXが作ってくれる画像のクオリティが高いように見えたので、触ってみていた。 ImageFXの作例 これが自分で撮った紅葉の写真で、 こっちが、Image FXに、京都の紅葉、50mm f1.4バブルボケ、とか伝えて作ってもらったもの。 ChatGPTに同じ入力を渡すと、こんな画像なので、仕上がりの違いがわかると思う。 どこか嘘っぽいというかメルヘンな仕上がりになりがち。 ここまでできるなら、手持ちの画像そっくりな画像を作れるのでは、と思って試してみる。 手持ちのラーメンの画像そっくりなラーメン画像を作る ChatGPTに、自分で撮影したラーメンの写真をアップロードして、この画像を作るためのプロンプトを作って、とお願いする。 この画像と同じ写真を生成AIで作りたいので、プロンプトを生成してください。内容だけでなく、レンズの
源暎フォント置き場はおたもんが Adobe・西塚涼子さんが公開しているオープンソースフォント「源ノ角ゴシック」を改造した「源暎フォント」を配布するためのページです。 ご注意ください このサイトで配布しているファイルは明示的または暗黙的にかかわらず、いかなる保証を伴わず現状のまま提供されます。 このサイトで配布しているファイルに起因、あるいはその使用または使用不能を原因とするなどのあらゆる要求・損害・責務に対して、いかなる場合にも著作者および関係者は一切責任を負わないものとします。全て各利用者の責任の元にご利用いただきますようお願いします。 なお、各種ご意見は同梱の readme.txt に記載しているメールアドレスまたは Twitter アカウント（@o_tamon）宛てにご連絡ください。ただし必ず返信や回答を行うことを保証するものではありません。 このページはリンクフリーです。ただし、各
はじめに フロントエンド開発 においてレンダリングという言葉はさまざまな場面で登場します。さらに、Server-Side Rendering(SSR)のように「レンダリング」という言葉が名前に含まれているものを含め、Single-Page Application(SPA)など、レンダリングに関連した議論でよく使われる用語も数多く存在します。 そして、これらの用語の意味はフロントエンドの技術の進化に伴い、徐々にニュアンスが変化してきているように感じています。 他のエンジニアとこれらの用語について話す中で、「自分はそれをSSRとは呼ばない」「SPAにはいくつかの意味があるよね」といった意見を耳にし、人によって解釈が異なることを実感しました。 では SSR や SPAなどといった用語は今日どういった意味で使われているのでしょう。そもそも、「レンダリング」とはどういう意味なのでしょうか。SSR に
そこらへんの金網でラジオが聞けた、という記憶 一部のAMラジオ局が今月から暫定的に止まる、というニュースを聞いて思い出したのだ。 以前こどもとゲルマニウムラジオを手作りしたときに、うまく聞こえなくて送信所の近くまで行ったら聞こえたことがあった。で、試しにイヤホンをそこらへんの金網に直接つけてみたらそれでも聞こえたのだ。なんだこれでいいじゃん、となった記憶がある。 この機に、それが本当だったのか試してみたい。 思い出の場所に行く さっそく現地にやってきた。 埼玉県川口市にある、文化放送のラジオ送信所だ。駅から30分歩いてやってきた。 記憶では、ここに見えているあらゆる金属にイヤホンをくっつけたらラジオが聞こえたのだ。金網とか、ガードレールとか。 ちなみにくっつけるイヤホンはこんなやつだ。 クリスタルイヤホンといいます 弱い電流でもうまく音に変換してくれるイヤホンだ。両端がクリップになっている
For people who want to live within a 10-minute walk from the office.
新しいゲームを作る ゲーム開発に関するチュートリアルが数多く掲載されているサイトです。最近の更新はありませんが、現在も有益な情報が多く掲載されています。 Creative JS JavaScript のテクニックと実験のまとめです。ゲームに特化しているわけではありませんが、ゲームでも有用な情報がまとまっています。最近の更新はありませんが、それでも有用な情報がまだあります。 ゲームプログラミングパターン Bob Nystrom によって書かれたオンライン書籍で、ゲーム開発におけいるプログラミングパターンを解説しています。解説されているパターンを利用することで、より効果的なコードを効率的に作成できるようになります。 週刊 Gamedev.js HTML ゲーム開発に関するニュースレターで、毎週金曜日に発行されます。最新記事や、チュートリアル、ツール、その他の情報が紹介されています。 HTML5
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
これはコミケの2週間前、7月30日の私のサブアカウントでのツイート。 この数日前に撮影してもらったマルシルの写真がたくさん届いたので、1枚1枚確認していた時のこと。どのお写真も素敵だったんだけど、この写真の時になんとなく手が止まって、気づいたら年甲斐もなくPCの前で号泣してた。 そのとき私のサブアカウントに、思うままに書いたのが「いい写真だ、マルシルだ、マルシルがいるよ、受け入れられたい」だった。 自分でも気づいていなかった本音がぽろっと出てくることってたまにあるけど、これも完全にそうで。私はこの言葉の根底にあるものを探らなければならなかった。自分の言葉だっていうのに、まったく！ 「似合う」と「好き」で悩んだ半年間だったこの写真は見た瞬間に「おーいライオス〜！」って聞こえてくるような、そんな感じがした。自分が被写体であることも忘れ「わっ、マルシルがいる！」って思った。 「自分に似合うコスプ
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
当ブログのホスティング先をGitHub PagesからCloudflare Pagesへ移行して、記事のパーマリンクを乱数ベースから日付時刻ベースへ変更したのですが、ローカル環境とCloudflareのタイムゾーンが違うせいでURLがずれてしまうので、Cloudflare
【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って，Unreal EngineのFPSミニゲームを完成させてみよう 編集部：或鷹 1234567→ これを読んでいる人なら重々分かっていると思うが，昨今のゲーム市場において大きな存在感を示しているのは，プラットフォーマーでも大手メーカーでもなく，Steamだ。 何十億円もの開発予算こそもっていないが，いままでに見たこともないようなアイデアに満ちた珠玉の作品達が，それこそ遊びきれないほど眠る豊穣の大地である。 Steamを見ていると，本当にゲームというものは「アイデアと気合い」なんだと思うことも多い。美麗な超絶グラフィックスである必要はなく，なんなら文字だけでも面白いゲームは作れるわけで，そういうもので遊んでいると自分もむずむずしてくる。もしかしたら自分にも，何か作ってみたいゲームがあったりするんだろうか？ しかし，世の中はそ
先日、Cloudflare Pages で運営しているサイトで www あり・なしの正規化を行ったのですが、一筋縄ではいかなかったのでその解説を行います。 やりたいこと www.frogapp.net にアクセスがあったら frogapp.net に301リダイレクトをするサブパスは保持する (www.frogapp.net/hoge にアクセスされたら frogapp.net/hoge に飛ばす)下準備 まずは、Cloudflare Pages にある正規化したいサイトのカスタムドメインの設定を開きます。 ここで、www 付きのドメインと www なしのドメインを両方登録します。 この時、ネームサーバーを Cloudflare に移行していない場合は移行を勧められると思います。 Cloudflare はどこかのお名前と違って管理画面の動作が軽く、使いやすいので特段の事情がない限りはこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
