Search, watch, and cook every single Tasty recipe and video ever - all in one place! News, Politics, Culture, Life, Entertainment, and more. Stories that matter to you.
▲KAORIUM コンセプトモデル SCENTMATIC(セントマティック)は、同社の開発する香りの言語化AI「KAORIUM(カオリウム)」を2022年9月17日(土)から9月25日(日)まで英ロンドンで開催される「ロンドンデザインフェスティバル2022」に出展する。 KAORIUMは、世の中に存在するさまざまな香りを「感性言葉」に変換し、言葉から香りを選び出すことができるAIシステム。「香りから言葉へ、言葉から香りへ」膨大な数の香りの言語表現を学習したAIとデータベースを介して、相互に変換することができる。 ▲KAORIUM コンセプトイメージ 香りのある商品は言葉で表すことや選ぶことが難しいが、KAORIUMでは香りのイメージを言語化し、AIによる言葉を頼りに、直感的に自分の好きな香りを探すことが可能となる。 今回のイベントでは、デザイン性・クリエイティブ性・ビジネス性・イノベーショ
アコーディオン型ユーザーインターフェイス(UI)はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか? 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか? <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
やりたいこと ブラウザで録音するアプリケーションを作ります。 Vue2.xやOptions API で書かれたサンプルコードは色々見つけましたが、Vue3 のComposition API で書かれたコードは見つからなかったので、参考に共有します。 基本 ブラウザでの録音はMediaStream Recording APIを使います。 基本的には以下のソースコードと解説を参考にしました。 MediaStream Recording API の使用 - Web API | MDN 全コード 短いので、テンプレートの全コードを掲載します。 <template> <button @click="startRecording()" v-if="!record.state"> 録音 </button> <button @click="stopRecording()" v-if="record.sta
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy’s website. The other day I stumbled upon this really nice hover effect on buōy’s website. It shows a tilted image that’s pixelated, with an awesome glitch effect. I totally love this and wanted to created my own CSS-only version, using the CSS glitch effect. In the first demo, we rotate the ima
オランダの画家ヨハネス・フェルメールの代表作といえば、「牛乳を注ぐ女」を思い浮かべる人も多いだろう。1657年から1658年にかけて描かれたとされるこの作品について、所蔵するオランダ・アムステルダム国立美術館はこのほど新たな発表を行った。 これによると、「牛乳を注ぐ女」に関して新たな調査を行い、いくつかの驚くべき発見があったという。その発見とは、絵画の下に「水差しホルダー」と「籠」が描かれていて、のちにそれらが塗りつぶされていた、ということだ。 ▲The Milkmaid, Johannes Vermeer, c. 1660. Rijksmuseum, Amsterdam, Purchased with the support of the Vereniging Rembrandt 今回の調査では最新のスキャン技術を使用。「水差しホルダー」は、女性の頭部の後ろにある壁に描かれているそうで、
はじめに Google アナリティクスは、Webサイトへのアクセス状況を把握できる無料のアクセス解析ツールです。このGoogle アナリティクス、実はメールの分析にも役立つことをご存知ですか? 今回は、次世代のGoogle アナリティクス「Google アナリティクス 4(GA4)」を利用して、送信したメール内リンクのクリックを計測する方法を紹介します。 GA4を使用してメールキャンペーンを追跡する方法 必要なもの Twilio SendGridアカウント(Freeプラン) Google アナリティクスアカウント 手順 1. 計測用URLを生成する GA4では、イベントを作成し、コンバージョンイベントとしてマークすることでメール内のリンククリックを追跡できます。まずは、URLの末尾にクエリパラメータを追加し、そのURL(クエリパラメータを含む)のページビューをGA4のコンバージョンとして指
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
Free installation in seconds. 💻 Available only on computer with Chrome or Firefox browser Test your responsive site The different models of phones and tablets allow you to test your responsive site on different resolutions. From the smallest iPhone 5 (320px) through the iPhone 15 PRO (393px) to the iPad Air (1280px) In one click and you can change your phone, really simple and fast. Rather than h
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く