ウェブ魚拓のやや大きいバージョンアップを行います。 5/1 AM 7:00～、2~3時間ほどを予定しておりましたが、一旦終了を未定とさせていただきます。再度の修正ご容赦ください。 (APIと本番環境との連携がうまくいかないため) 影響は通常サーバー・有料専用サーバー両方となります。 急な予告となってしまい申し訳ございません。 なお取得に影響がありますため月額料金をお支払いいただいているご利用者様におきましては期待通りの結果が出なかったという場合を考慮し、翌月2024年5月末日までご利用停止の際、1か月分の返金請求を理由不問で承ります。 バージョンアップの一つに関しましては、現時点では問題ないですが、今後運用していくにあたって弊社のシステムに影響が起こるかもしれない脆弱性を含みうると考えられる部分があったためです。 予防措置となりますので影響はアップデート以外ございません。 この変更は技術的
ビジュアルクリエイティブディレクターのMuRo氏が発表した「Shoost」はユニークなツールだ。「いい感じの雰囲気の絵を簡単に作りたい！ キャラクターをきれいに魅せたい！」という思いから生まれた本ツールは、3つのレイヤーを重ね合わせ、その上から撮影効果を付与することで、画面・映像を作るという今までにない立ち位置のツールと言える。しかしながら、独特なツールゆえに、どのようなものかイメージがわかない人も多いかもしれない。 本記事では、「Shoost」を実際に動かし、簡単な作品を作りながら、機能や優れている点を紹介していく。 人物画像＋背景画像 まず、公式にも紹介されている、人物画像と背景画像を組み合わせた使い方を試す。 「Layer 2」 に人物画像を配置 まずは、主役となる人物画像から配置する。「Layer 2」を「Import Item」に設定し、画像アイコンをクリック。今回は「いらすとや
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
米Adobeはこのほど、ロイヤリティーフリーの写真やイラストを提供する有償サービス「Adobe Stock」で7万点以上の写真や映像を無料化した。個人や法人を問わず使える他、商用利用も認める。ダウンロードにはAdobe ID（無料）の登録が必要。 公開したコンテンツは、写真や映像、3Dモデル、ベクター素材、イラストなど。Adobeの年次クリエイティブカンファレンス「Adobe Max 2020」（10月20日～22日）に合わせた施策。素材を提供したアーティストの権利も尊重したという。 関連記事 iPad版「Illustrator」リリース 月額1080円、Adobe CCユーザーは追加料金なし 米AdobeがiPad版「Illustrator」をリリースした。単体での利用料は月額1080円。「Adobe Creative Cloud」のユーザーには追加料金なしで提供する。 PDFをスマホ画
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
「ChatGPTで画像も出力できたらいいのにな…」 という問題が解決しました！ さっそくですが、以下のプロンプトを「GPT4」に貼ればゲームを開始できます。 １，中世ヨーロッパの物語 GPT-4 AI ゲームマスターとして、あなたはプレイヤーが少女に協力して彼女と共に危機に見舞われた王国を救う冒険をするため、「交換日記と時空の絆」を導きます。 物語は、中世ヨーロッパの世界と現代の地球が絡み合った世界で展開されます。プレイヤーは、現代の地球で暮らす普通の人物であり、チャットを入力していると、それが手元にあった中世ヨーロッパの歴史が変わっていくことに気付きます。このチャットは、その時代に生きる少女、カイとチャットでコミュニケーションを取ることができる特別なものです。カイは冒険に際して手帳を持っており、そこにプレイヤーのチャットの内容が交換日記のように日を追うごとに追記されていきます。また、筆記
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
この連載ではおなじみのキャラクター「明日来子さん」に右側からライトを当ててみた。左がIC-Lightを適用したもので、右がオリジナル。環境はWebUI Forge用の拡張機能を使用 5月8日に、「ControlNet」など画像生成AI関連の著名研究者であるイリヤスフィール（lllyasviel）さんが発表した「ICライト（Imposing Consistent Light、印象的な一貫的なライト）」が盛り上がりました。入力した画像をもとに、後から指定した照明効果を踏まえた画像を生成する技術です。 画像生成AIで照明効果がつけられる「ICライト（IC-Light）」 発表された学習済みモデルは、「ライトを指定すると、キャラクターのデータに合わせてテキストのプロンプトに合わせて独自に背景を生成するもの」「キャラクターとライトの影響を加味して、別の背景画像と合成するもの」の2種類があります。これ
在宅勤務やテレワーク、遠隔授業などでWeb・TV会議アプリケーション等の背景としてご利用いただける画像です。すべて国文学研究資料館が所蔵する資料から作成しています。ご活用いただければ幸いです。 「データベース」をクリックすると、使用している作品の書誌情報や他の画像をご覧いただくこともできます。
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
新幹線の車窓動画を見ながら飲む
1971年東京生まれ。デイリーポータルZウェブマスター。主にインターネットと世田谷区で活動。 編著書は「死ぬかと思った」（アスペクト）など。イカの沖漬けが世界一うまい食べものだと思ってる。（動画インタビュー） 前の記事：エアデート入門（デジタルリマスター版） ＞ 個人サイト webやぎの目 ホームパーティーで料理を仕込むように、リモート飲み会用の動画を仕込む 車窓動画はYouTubeにたくさんアップされているが、権利関係をクリアにしたいので自分で撮ることにした。いや、いま嘘をついた。自分で撮ってみたかったのだ。 12月に開催された大垣メイカーフェアの帰り、東京に戻らずに逆方向の大阪に向かい一泊した。 翌朝、撮影しながら帰京する。 12月上旬、大阪は人が少なかった 窓際のA席に陣取ってカメラを設置した。 冬の太平洋側はたいてい晴れている カメラと窓を両面テープ（ノリが残らないやつですよ）で固
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
Noteの皆様、はじめまして。 今年はワークスタイルの変化に伴い、自宅の作業環境を改めて整備した方も多いのではないでしょうか。私が所属するツクルバでも、エンジニアが所属するチームは春から全面的にリモート体制へ移行しました。 その後、オンラインミーティング向けに自宅の作業環境のアップデートを重ね、その変遷を社内で共有したところ大変好評をいただいたので、Noteでも共有することにしました。少々長い記事ですが、お付き合いいただけると嬉しいです。 Macだけで良かった時代前職時代にリモートワークが許可されていたこともあり、以前から自宅の作業環境を既に整備していたので、リモート体制への移行はスムーズでした。下の写真は数年前の自宅デスクです。デスク上にiMacしかない、素晴らしい環境でした。 これなら、かのデスクすっきりマガジンの皆様もニッコリしてくれるでしょう。 しかし、今年になってこのすっきりデス
まとめ 【新世代コミPo】「Midjouney」にマンガを描かせてみるテストで出来上がった超美麗フルカラー漫画「サイバーパン.. 「作れるかも」といっている暇があったら「作ってしまってから考えればいい」という精神、実にクリエイターらしくて良い 128873 pv 510 631 users 324 中本アイアール＠水平思考ユニットうみがめ部 @air_nakamoto Midjourneyさんに、 TRPGセッションの背景画像をご担当いただきました。 17世紀大航海時代シナリオということで、 背景の用意をどうしたものかと思っておりましたが、 短納期にもかかわらず、快く引き受けてくださいました。 ほんと、女神様やで。 pic.twitter.com/SlCBnEgprA 2022-08-11 18:18:57 リンク TRPG JAPAN Midjourneyの使い方｜TRPGの背景や挿絵に
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト！ モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示
ふりかえり手法にはKPT、Fun Done Learnなど様々な手法が知られています。 今回はその中でもチームの課題と向き合う手法「象、死んだ魚、嘔吐」について説明します。 また自分達が実際に実践するにあたって行った工夫を紹介します。 ふりかえり手法「象、死んだ魚、嘔吐」とは？ 2024.1.17追記 「象死んだ魚嘔吐のうた」を制作し、Reginal Scrum Gathering Tokyo 2024にて発表しました。 ↑使用したオリジナルの背景画像です。お好きなツールの背景としてどうぞ。 「象、死んだ魚、嘔吐」とは、Airbnbの共同創業者ジョー・ゲビアが提唱した手法です。 カリスマ性があり完璧主義のジョー・ゲビアが率いるチームでは、雰囲気が重苦しく、メンバーはゲビアを恐れ、自分の考えていることを発言できなくなっており、チームは崩壊寸前でした。 そのような状態で考案されたふりかえり手法
メガドライブ版「ダライアス」は，なぜ「メガドライブミニ」に収録されたのか。キーマン4人にインタビュー 編集部：早苗月 ハンバーグ食べ男 カメラマン：永山 亘 セガゲームスから2019年9月19日に発売される，プラグアンドプレイ型のゲーム機「メガドライブ ミニ」（以下，メガドラミニ）。 メガドライブを縮小サイズで再現した筐体の造形や，不可能だと思われていた版権タイトルの収録など，注目すべきポイントは多岐にわたるが，その中でも特筆に値するのが「ダライアス」の収録だ。このダライアスは当時リリースされたものではなく，SGDK（※1）を用いたファンメイド版がアイデアのベースとなっている。 ※1 githubで公開されている，Stephane-D氏が開発したメガドライブ向けの開発ツール。ライブラリとカスタムツールのセットで，EclipseやCode::blocksなどのIDE（統合開発環境）に対応して
新型コロナウイルスの影響で、従業員に在宅勤務を指示する企業が増えている。これに合わせて「Zoom」「Google Hangouts Meet」「Microsoft Teams」といったWeb会議ツールを使ったミーティングを行う機会が急増中だ。基本的にはWebカメラとマイクスピーカーなどを使ってビデオ通話を行うのが一般的だが、中には自宅の様子を映したくないという人も多いだろう。 そんなニーズに応えるため、「Zoom」と「Microsoft Teams」には、「バーチャル背景」と呼ばれる機能が備わっている。カメラに映る人物を認識し、その背景だけに画像や動画を合成できる。本来ならクロマキーなどを使う合成処理を手軽に反映できるとあって重宝されている。 バーチャル背景に設定できる画像や動画はユーザーが好きなものを使える。そこで、業種を問わずさまざまな企業などが、バーチャル背景としての用途に適した公式
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
VS Codeをなぜ、使い続けているのか？
前書き この記事を読んでいるエンジニアの皆さんは、それぞれ異なるエディタを使用しているかと思います。読者自身が使用しているエディタの良し悪しについては詳しいと考えているため、私がVS Codeと他のエディタを比較をすることは、限界があります。また、VS Code と他のエディタの機能や快適さを比較できません。 そこで、私が毎日使用している VS Code の良さをアピールすることで、VS Code を使ってもらう機会を作りたいと思っています。 ここで説明しないこと カスタマイズしたキーコンフィグの紹介 ただし、これから紹介する VS Code の機能に好みのキーコンフィグを割り当てることは可能です。 他のエディタとの比較(Vim系 JetBrain系 Helix等の新興エディタ系) 目次 VS Codeとは 毎月のアップデート VS Codeのデフォルト機能 拡張機能（エクステンション）が
画像の機械学習が劣化する理由 - Qiita
前書き 注意：ここに書いていることは2020年代としては、古すぎる見解になっている。 近年の自己教師あり学習の大幅な進展で、ここで述べているようなアプローチは大幅に古めかしいものになっている。 ・自己教師あり学習の進展は、画像認識タスクに対する共通のbackbone を作り出しており、後段で個々の画像認識タスクに対するfine-tuningをするアプローチに変わってきている。 ・そのため、ラベル付きの限られたデータで特徴量の抽出をしていたのが、自己教師あり学習に基づく特徴量の抽出になっている。 ・各人、自己教師あり学習について調べることをお勧めする。 主旨 単純に学習データを追加するだけでは学習が改善しないことがある。そのような場合へのヒントを著者の限られた経験の中から記述する。 はじめに 画像認識の機械学習を改善するためにはデータを追加すればよい。 そう思っている人が大半だろう。 ただ、
画像生成AI関連の著名な開発者、lllyasviel（イリヤスフィール）氏が5月7日、生成AI画像の照明を自在に操作できるツール「IC-Light（Imposing Consistent Light）」を公開した。 2種類のモデルを公開 IC-Lightは画像の照明を操作するプロジェクト。前景画像（人物やオブジェクトなど）を入力し、プロンプトにテキストや背景画像を指定するだけで、まるで別の環境で撮影したかのような画像を得ることができるという。 現在、「テキスト条件付きリライティングモデル（text-conditioned relighting model）」と「背景条件付きモデル（background-conditioned model）」の2種類がGitHubで公開されており自由に試すことができる。 なお、作者のlllyasviel氏は「Stable Diffusion」のWebUIであ
関連記事 「Microsoft Teams」の1日当たり会議時間が3月中旬から3倍増の27億分に 新型コロナウイルス対策で在宅勤務が増える中、Microsoftがチームコラボレーションサービス「Microsoft Teams」の1日当たりの会議時間が3月末時点で27億分（4500万時間）になったと発表。3月16日は9億分だったので、3倍に増加したことになる。 セガやSNKなど、ビデオ会議で使えるバーチャル背景を公開 「龍が如く」「餓狼伝説」の画像を無償提供 セガ、SNKなどのゲーム会社が、ビデオ会議などで使える「バーチャル背景画像」をTwitter上で公開している。新型コロナの感染拡大に伴い、在宅ワークをする人が増えたことを受け、さまざまなタイトルの画像をそろえた。 ディズニー、新型コロナ対策支援でオラフの新作YouTubeアニメやWeb会議用背景画像 ディズニーが、新型コロナのパンデミッ
こんにちは。MLOpsチームリーダー兼プラットフォームSREチームリーダーのsonotsです。今年の4月からZOZOTOWNリプレイスプロジェクトにも関わるようになりました。Zoomの背景画像を「進め！電波少年」にしてみても、チームの若者に伝わらないのが最近の悩みです。 今回の記事は、昨年度にタスクフォースとして発足したOSSポリシー策定委員会を代表して、今年の4月に弊社で策定したOSSポリシーについて紹介します。 OSSポリシー策定の背景と目的 弊社でもOSSを利用・貢献・公開しているメンバーが増えてきています。また、会社としても業界貢献、技術アピールの側面からOSS活動を奨励したいという想いがあります。 しかし、弊社にはOSSポリシーが存在しなかったため、相談を受けた際にCTO室が都度判断するという状況がしばらく続いていました。都度判断ではスケールしないため、「社員がOSS活動しやすい
私はターミナルが大好きなので毎日使っているんですが、永らく alacritty + tmux を愛用してました。(といってもさっき見たら alacritty 使ってたのは 1 年ちょっとだったらしい・・・) しかし最近 wezterm というターミナルの話を Reddit とかでちょくちょく聞くようになってたので 2022 年個人開発環境大変革[1]に合わせて試してみることにしました。 wezterm とは？ wez さんが作った Rust 製の GPU-accelerated で cross-platform なターミナルです。自分の名前をプロダクトに入れるところに正直自信の表れを感じます w wez さんは 2022 年現在 Facebook(meta)で働いているようです。 まぁけど、Rust 製の GPU-accelerated で cross-platform なターミナルってそ
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
国立科学博物館とサンゲツのコラボレーションにより誕生した壁紙の施工例画像を、オンライン会議、授業などで使えるバーチャル背景としてご用意いたしました。 お気に入りの画像をダウンロードしてご活用ください。 WHALES AND DOLPHINS 世界中のクジラ約90種類の図譜を集めた、国立科学博物館で人気のポスター「世界のクジラ」。この壁紙ではその中の約半分にあたる、日本の周辺を回遊する45種類ほどのクジラとイルカをチョイス。大小さまざまな海棲哺乳類たちが、部屋中を海遊する姿に思いを馳せて。
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
ThreeDPoseTrackerとは まずは下記の動画をご覧ください。画像をクリックすると別タブでYoutubeが開きます。 ThreeDPoseTracker v0.1.0 Introduction movie 他にもこの辺を見て頂くとわかりやすいかもしれません。 USBカメラだけでできる モーションキャプチャを作ってみた - Motion capture with USB Cam only - 【NT京都2020】 https://youtu.be/L0ieoaOD6Po ThreeDPoseTrackerは、USBカメラや踊ってみた等の動画だけでモーションキャプチャーができるWindows10用アプリケーションです。ノートPCであれば内蔵のカメラを使えば追加の機材は必要ありません。ですが、ちょっと（かなり）強めのグラフィック環境が必要です。具体的にはGTX1050以上は欲しいです。
中学生ながら起業家として活動する加藤路瑛さん。2018年12月13日に株式会社クリスタルロードを設立したが、なぜ起業することにしたのだろうか。幼少の頃、父親の働く姿に憧れを持ち、その頃から“働きたい”という思いは強かったそうだが、一般的には学校の授業もあれば友人とたくさん遊びたいと考える年頃だ。「中学生」という既成概念を覆した加藤さんの思いと見つめる先に迫る。 多くの人は「中学生」の頃、何を思って毎日を過ごし、どんな夢を掲げていただろうか。ソニー生命保険の調査によると（調査期間：2019年6月25日～7月2日）、中学生200人のうち、49%の男女が将来の夢について「好きなことを仕事にする」と回答している。就きたい職業別にみると、男性は「YouTuberなどの動画投稿者」「プロeスポーツプレイヤー」、女性では「歌手・俳優・声優などの芸能人」「絵を描く職業（漫画家・イラストレーター・アニメータ
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース
Innovative Tech： このコーナーでは、テクノロジーの最新研究を紹介するWebメディア「Seamless」を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。 米Microsoftの研究チームが開発した「TileCode」は、レトロゲームをプレイする安価な携帯ゲーム機上でゲームソフトを開発するための開発環境だ。ゲームパッドと一体化した携帯ゲーム機の画面操作でビジュアルプログラミングを駆使し、レトロゲームを開発できる。 ゲームを作るには、プログラミング言語やスプライトなど、さまざまな事柄を習得する必要がある。ScratchやMakeCode ArcadeのようなWebベースのプログラミング環境も利用可能だが、通常はタブレットやPCが必要だ。 今回は、ゲーム制作のプロセスをタブレットやPCではなく、低価格のゲーム機で行えるようにした。開発環境は、Ma
お知らせ 一部新聞報道等にございました、弊社新作『喫茶ステラと死神の蝶』に実在店舗の外観を参考に使用させて頂いている件 - ゆずソフト｜YUZU SOFT
お知らせ 一部新聞報道等にございました、弊社新作『喫茶ステラと死神の蝶』に実在店舗の外観を参考に使用させて頂いている件につきまして、 製品内より該当箇所の背景画像をすべて差し替える対応をさせて頂くこととなりました。 参考にさせて頂くにあたり、実際の店舗のデザインとは要所の変更を行い、配慮をさせて頂いておりましたが、 店舗様にはご迷惑をお掛けする結果となり深くお詫び申し上げます。 なお、現時点で差し替え作業による発売日の変更等はございません。 以上、よろしくお願いいたします。 2019年11月 株式会社ユノス
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から9年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2022年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : Vue 3 2022年の最新標準！Vue 3の新しい開発体験に触れよう 24,500PV Vue 3（開発コード：ワンピース）がリリースされたのは2020年9月。Vue 3のリリース以降は周辺ツールも進化しました。Vue 2の構成よりVue 3周辺ツールは型安全になったことが特徴です。ICSではVue 3
ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コードを確認する 3Dを感じる理由 まず3Dをユーザーに感じさせる理由について考えてみます。紙面にしても画面にしても実態は2Dの平面世界です。画面の中で3Dを感じるのは、人間が2D的に描かれたものから奥行きを知覚する特性があるからです。たとえば、すぼまっていく2本の線があると線が平行であると認知し、奥行きを感じます。この現象を体系化したものが遠近法です。 より具体的な手法として透視図法があります。Three.jsを使った3D表現もこの透視図法によって描画されています。描画自体
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【重要・緊急】ウェブ魚拓のバージョンアップを行います – 株式会社アフィリティー
背景合成アプリ「Shoost」レビュー 映画のワンシーンのような「いい感じ」の絵を手軽に作れる | PANORA
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
Adobe、ストック素材7万点を無料で公開 商用利用も可
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
画像付きのノベルゲームを遊べるプロンプトを作ったら臨場感が溢れすぎた話｜ちゅーりん
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
画像生成AIに照明革命 日本と世界で同時に“神ツール”登場 (1/3)
WEB会議などで使える背景画像 - 古典に親しむ | 国文学研究資料館
ブラウザの仕組み | Articles | web.dev
マイクとカメラを妥協しないミニマルデスクをつくる｜Jun Tanaka
キャラを自分で描ける人によって「Midjourney」にマンガやイラストの背景を描かせる研究が着々と進んでいる模様
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
モバイル幅で作成されたWebサイトの特徴と作例
ふりかえり手法「象、死んだ魚、嘔吐」でチームの闇と向き合おう - Qiita
メガドライブ版「ダライアス」は，なぜ「メガドライブミニ」に収録されたのか。キーマン4人にインタビュー
Web会議で使える「 #バーチャル背景 」配布がブームに 企業まとめ
【第4弾】少しのコードで実装可能な10のCSS小技集
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像生成AIに“照明”革命 ControlNet開発者が作った「IC-Light」
「Microsoft Teams」でもバーチャル背景の設定が可能に
ZOZOテクノロジーズのオープンソースソフトウェアポリシーを策定しました - ZOZO TECH BLOG
alacritty+tmuxもいいけど、weztermがすごい件
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
バーチャル背景画像ダウンロード｜DAY AND NIGHT SCIENCE MUSEUM｜サンゲツ
backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
USBカメラモーションキャプチャーThreeDPoseTrackerの説明 - Qiita
子どもは働いちゃいけない、なんてない。 - LIFULL STORIES
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
レトロゲーム機でレトロゲームを自作 Microsoftが「TileCode」開発
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
これがフロントエンドで話題になった記事！ ICS MEDIAの2022年 - ICS MEDIA
頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA