いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS
UNIXができた頃のコンピューター事情
UNIXができたころのことを話そうとするとその頃のコンピューター事情が今とだいぶ違うのでなかなか話が伝わりません。そこでそのころ（1970年ごろ）のコンピューター事情について、正確性はちょっと置いておいて、分かりやすいようにざっくりと説明したいと思います。 アポロ11号の月面着陸が1969年なのでその辺りの映画などに出てくるでかいコンピューターを想像するとイメージしやすいかもしれません。 ## 大雑把な分類 初期のUNIXが開発されたころ（1970年ごろ）に使われていたコンピューターは主に下記の二種類でした。 - メインフレーム - ミニコン（ミニコンピューター） このころ主に"コンピューター"といえば今で言う"メインフレーム"のことを指していました。 マイコン（マイクロコンピューター）／パソコンは1980年ごろ普及しました。しかしパソコンでUNIXを動かすのが実用的になったのは1990年
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
本稿では、gihyo.jp編集部で利用しているMarkdownファイルの記述方法を主に解説します。 注意：gihyo.jp編集部内でのみ採用しているMarkdownの書き方をまとめた文書を、記事の体裁を取って公開したものです。なお、記事公開後に記述方法を追加・変更する可能性もあります。 Markdownとは？ はじめに、筆者の把握している範囲でMarkdownについて概説しておきます。 近年は一般向けのウェブサービスやテキストエディタでも利用されてきているMarkdown。端的に言えば、テキストファイル上で文書を書くための構文です。文書の読みやすさに焦点を当てており、Markdown形式のテキストファイル（＝Markdownファイル）をそのまま見れば文書とその構造が理解できるように、Markdown特有の編集記号や字下げを用いて表現します。また、MarkdownファイルをHTMLファイルに
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コードを確認する 3Dを感じる理由 まず3Dをユーザーに感じさせる理由について考えてみます。紙面にしても画面にしても実態は2Dの平面世界です。画面の中で3Dを感じるのは、人間が2D的に描かれたものから奥行きを知覚する特性があるからです。たとえば、すぼまっていく2本の線があると線が平行であると認知し、奥行きを感じます。この現象を体系化したものが遠近法です。 より具体的な手法として透視図法があります。Three.jsを使った3D表現もこの透視図法によって描画されています。描画自体
オーディオファイルの扱いが簡単に！JavaScriptライブラリ「Howler.js」 | DevelopersIO
オーディオファイルの取り扱いを簡単にしてくれるJavaScriptライブラリ「Howler.js」を紹介します。 ウェブでオーディオファイルを扱うのは「正気の沙汰ではない（要出典）」と言われており、Web Audio APIやHTML5 Audio（HTMLMediaElement）を見ると、確かにそっ閉じしたくなる感じです。 そんなオーディオファイルの読み込みからブラウザごとの再生できるファイルの判定など、面倒な処理を任せてしまえるオーディオ関連のJavaScriptライブラリHowler.jsを紹介します。 公式サイト（サンプルあり）：howler.js - JavaScript audio library for the modern web リポジトリ：howler.js - GitHub 使い方 npmなら npm i howler -D CDNから読み込むなら <script
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
ストリーミングサービスをテレビモニターで視聴できる「Amazon Fire TV」の一部ユーザーから、電源を入れて起動するとフルスクリーン広告が表示されるようになったという報告が挙がっています。 Amazon Fire TV starts autoplaying video ads on startup https://9to5google.com/2023/11/23/amazon-fire-tv-fullscreen-video-ads-autoplay/ Some Amazon Fire TVs are auto-playing fullscreen ads on startup (Update) https://www.androidauthority.com/amazon-fire-tv-auto-play-fullscreen-ads-startup-3388636/ ソーシャ
iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に
Native lazy-loading for <iframe> was added to the HTML standard today: https://t.co/KgO8lIBdEK Thanks @domfarolino for the heavy lifting with spec & tests 🎉 https://t.co/GLy6qHE7l5 — Simon Pieters (@zcorpan) July 8, 2020 YouTube 動画でネイティブ Lazy-load ネイティブ Lazy-load は、loading=lazy 属性を追加するだけで遅延読み込みを可能にします。 専用の JavaScript は不要です。 ブラウザの標準機能として Lazy-load をサポートします。 もとともは Chrome の独自機能として Google が開発しました。 Ch
てんかんを抱える人々を標的とした、点滅するアニメーションを使ったサイバー攻撃を防止するために、Twitter社は対策を講じました。その有効性は？ 11月は、米国のNational Epilepsy Awareness Month（てんかん月間）です。昨年11月は、てんかんに対する認知がまさに広がりを見せましたが、その要因となったのは恥ずべきサイバー攻撃でした。てんかん発作を誘発するような、光が点滅するアニメーション画像が、米国てんかん財団のアカウントをタグ付けした上でTwitterに複数投稿されたのでした。 攻撃の全容 てんかんは神経障害の一種で、発作が繰り返し発生するという特徴があります。てんかんが原因で、毎年10万人を超える人々が亡くなっています。よく知られるのは、ちらちらと点滅する光がきっかけとなって発作が起きる「光過敏性てんかん」ですが、Twitter上で見られたこの攻撃は、光過敏
Macのみだった音楽制作アプリ「Logic Pro」、iPad版をサブスクしました。Mac版使ってるのに買った理由（CloseBox） | テクノエッジ TechnoEdge
アップルの予告通り、5月24日早朝、iPad版Logic Proが降ってきたので、さっそく試してみました。奥深いソフトなので、一挙に全部の機能を網羅したわけではありませんが、そのファーストインプレッションをお届けします。 Logic Proとは何か？Logic Proは、アップルがMac向けに提供している音楽制作アプリ。いわゆるDAW（Digital Audio Workstation）と呼ばれているジャンルのソフトで、アマチュアからプロフェッショナルまで、このソフトを使って制作しているミュージシャンは多くいます。 競合するソフトとしては、Cubase、Studio One、Ableton Liveほか多くありますが、その中でも一定のシェアを持っています。競合ソフトと比べて安価でありながら、それぞれのハイエンドエディションと比肩する機能を備えているため、これがわずか3万円で買えるということ
目次 目次 はじめに とある日のこと カスタムディレクティブとは やりたいこと クラシルのデータ分析基盤 イベント定義シート イベントパラメーター型定義シート サンプル実装 カスタムディレクティブのコード Vueコンポーネントに適用してみる クラシルWebに実際に導入してみた結果 この実装を通して学んだこと おわりに はじめに こんにちは、dely株式会社 開発部の白石(しらりん)です。 2019年新卒として入社し、現在Webフロントエンドエンジニアを担当しています。 昨日はiOSエンジニアのtakaoさんが、「個人アプリの開発で陥った6つの失敗とそこから学んだやらないことの重要性」という記事を書いてくれました。 本記事は dely Advent Calendar 2019 18日目の記事になります。 qiita.com 本記事のテーマは、タイトル通りVue.js(以下Vue)でユーザーの
ウェブブラウザを使ったVJ活動 - hitode909-vj-workshop
ウェブブラウザを使ったVJ活動 2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909 はじめに、の前に いまのうちにGoogle Chromeをダウンロード、インストールしておいてください ワークショップ教材はGoogle Chromeで動作確認している Google Chrome ウェブブラウザ はじめに はじめに(15分) 今日のワークショップでやること VJについて、ブラウザについて やってみよう(30分x3で1.5時間) HTMLを書こう VJとして適した形のHTMLを作ろう コントローラをくっつけて操作できるようにしよう おわりに(15分) 今後の進め方 参考になる情報について 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア はてなブログ(ブログサービス)やGigaVi
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
YouTubeで広告ブロック・ダウンロード・SponsorBlockなどさまざまなプラグインを利用可能なデスクトップアプリ「youtube-music」レビュー
YouTubeが公式に配布しているChromeアプリ版YouTube Musicとほぼ同じインターフェイスを実現し、広告ブロックやホットキー、ダウンロード、イントロ・アウトロのスキップなどさまざまなプラグインを利用可能な非公式デスクトップアプリが「youtube-music」です。導入から実際に使用してみるところまでを実際に試してみました。 GitHub - th-ch/youtube-music: YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker / downloader) https://github.com/th-ch/youtube-music まずはGitHubの配布ページにアクセス。記事掲載時点では最新版はv1.18.0なので、「YouTube-Music-Setup-1
※ このブログはヌーラバー Advent Calendar 2020 12日目の記事です。明日は yuh kim さんの記事です。 こんにちは。本日32歳になりました。Cacoo課の川端(@kwbtsts)です。 Cacooは先日、図の編集画面上でビデオ会議ができる「ビデオ通話」機能をリリースしました！ 本記事では、ビデオ通話を実現するために必要なWebRTCという技術について解説したいと思います。ビデオ通話を実際にWebサービスで開発・運用していこうと考えている方や、WebRTCに興味がある方へのヒントになれば幸いです。 ビデオ通話機能についての詳しくはCacooリリースブログ『テレワークで使える！Cacooで「ビデオ通話」ができるようになりました！』をご覧ください。 WebRTC(Web Real-Time Communications)とは？ Cacooのビデオ通話ではWebRTC(
Windows 10や11では、デスクトップに置かれたアイコンやショートカットのアイコンなどにおいて、デフォルトで用意されている各種アイコンが使用されます。これらのデフォルトのアイコンがコンピューター上のどこに保存されているのかについて、テクノロジー系ブログのDigital Citizenが解説しています。 Windows icons locations. Where are the default icons found? https://www.digitalcitizen.life/where-find-most-windows-10s-native-icons/ Windows 10または11におけるデフォルトアイコンの保存場所は、基本的にコンピューターの「ローカルディスク」内に保存されています。 さらにローカルディスク内の「Windows」フォルダをクリック。 「Windows」
Webサイト上にデザインとして動画を活用する例は多くなってきました。クライアントからメインビジュアルや主要セクションに動画の設置を希望されることが増えてきて、需要があることは実感しています。 ただ、動画はファイルサイズが大きくなりがちで、扱いには注意が必要な要素でもあります。今回は、Webサイト上にデザインとして動画を設置するときに気をつけたいポイントについて7つ紹介します。 動画を設置する際に気をつけている7つのポイント 本記事でのデザイン動画とは、メインビジュアルの背景として実装する動画を指します。 デザイン動画サンプル 上のように、動画の上に半透明マスクをのせて、その上にコピーを設置する。メインビジュアルなどで採用されることが多いデザイン用の動画設置について解説していきます。 動画をデザイン用に編集 デザインとして使用する動画は、コンテンツを視聴するためのものではなく、ブランドイメー
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるLottie-Playerを使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTMLメインの方法と、JavaScriptメインで実装する方法で
EngineeringMaking GitHub’s new homepage fast and performantThis post is the third installment of our five-part series on building GitHub’s new homepage: How our globe is built How we collect and use the data behind the globe… This post is the third installment of our five-part series on building GitHub’s new homepage: How our globe is built How we collect and use the data behind the globe How we m
IntersectionObserverではてなブログ記事内のApple Musicを自動再生する - Log
Twitterに要件定義が転がっていたのでIntersectionObserverを用いて実装しました。 github.com 以下のコードを記事のどこかに貼り付けると、画面右下に自動再生ボタンが表示されます。自動再生ボタンを押すと、画面で見えている「iTunes商品紹介」を自動で再生するようになります。 <span></span><style> #autoplay-btn{color:gainsboro;background-color:#fff;background-size:cover;position:fixed;bottom:5%;right:10%;width:60px;height:60px;border:5px solid currentColor;border-radius:100%;cursor:pointer;z-index:10000}#autoplay-btn.d
最近ちまたでは、リモート会議や飲み会で、自分のカメラ映像をsnapCameraで面白おかしく加工するのが流行っています。 映像だけでなく、声も加工したくなるとき、ありますよね？ ・・・ありますよね？（・・・きっとあるから読んで頂けているはず。） 自分の声を加工するためには「バ美声」などのボイスチェンジャーアプリと仮想オーディオデバイスが必要です。しかし、これらを用意するには手間がかかるし、仮想オーディオデバイスは割とトラブルがつきものです。。。 そこで、手間無しで、トラブルに悩まされることも無く、誰でも簡単にボイスチェンジ出来る、ボイスチェンジャー付きボイスチャットアプリを作ってみることにしました！！ 必要な材料 SkyWay ボイスチャットアプリを簡単に実装できるSDK & API Tone.js Web Audio APIを簡易に扱うことができるフレームワーク。音の生成や加工が簡単にで
Twitter’s head of trust and safety Ella Irwin has resigned, the now-former executive confirmed to Reuters on Thursday. Irwin took over for Yoel Roth, who famously left the company during the ear Boeing and NASA said Thursday that the first crewed flight test of the Starliner capsule would be further delayed due to a new crop of technical issues with the spacecraft. The first crewed mission wa
概要 ビデオチャットのSkyWayに物体検出をいれて、リアルタイムで物体検出しながら ビデオチャットをする謎のビデオチャットです。 できたもの https://yolo-videochat.ga #ProtoOut pic.twitter.com/bjZZPddXEY — 3yaka (@3yaka4) June 11, 2020 概要 SkyWayで作ったビデオチャットに機械学習のTensorFlow.jsを優しーく包んでくれたml5.jsのYOLOを使って物体検出をさせ、PoseNetを使ってプライバシーを配慮した目線をかくすものをつけました。 人物に四角がついてその上にPersonと出て、左目から右目にかけて線が入ります。 1. SkyWayを使って webRTC Javascript SDK | API Reference | SkyWay(アプリやWebサービスに、ビデオ・音声通
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
https://main--cc--adobecom.hlx.page/cc-shared/assets/img/product-icons/svg/firefly-appicon-256.svg | Adobe Firefly app icon {{adobe-firefly}} Your imagination’s new best friend. Use generative AI and simple text prompts to bring your ideas to life. And now you can add reference images to get the style and structure you’re looking for. {{get-adobe-firefly-free}} Try it -----------------------------
wav2vec 2.0 を使って 手軽に音声認識モデルを触れるようになろう - NTT Communications Engineers' Blog
この記事は NTTコミュニケーションズ Advent Calendar 2021 の20日目の記事です。 はじめに こんにちは。プラットフォームサービス本部アプリケーションサービス部の是松です。 NTTコミュニケーションズでは自然言語処理、機械翻訳、音声認識・合成、要約、映像解析などのAI関連技術を活用した法人向けサービスを提供しています。（COTOHA シリーズ） NTTコミュニケーションズがこのようなAI関連技術を活用したサービスを展開する強みとして、 NTT研究所の研究成果が利用可能であること 自社の他サービスを利用しているお客様に対してシナジーのあるサービスを提案できること この2点が挙げられると思います。 実際に、私が担当している COTOHA Voice Insight は 通話音声テキスト化によってコンタクトセンターの業務効率化・高度化を実現するサービスなのですが、 NTT研
From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 人気アイドルグループ「BTS（防弾少年団）」の大ヒットなどを筆頭に、今やグローバルでひとつのカテゴリーとして認知され、支持を集めているK-POP。そのK-POP躍進の裏では日本人クリエイターの存在も大きく関わっている。 韓国の男性アイドルグループ「NCT U」の楽曲「Make A Wish（Birthday Song）」の振り付けを担当したのは、弱
m5stack.jsを出したので色々遊んでみました。 やっぱりちっちゃいディスプレイがあるので、そこで遊びたいですよね。 画像表示させたいですよね。TVとかyoutubeを流したいですよね。サブディスプレイにしたいですよね というわけでやってみました。 つくったもの #m5stack をサブディスプレイとして採用しました #obnizOS pic.twitter.com/T9NbuqUAUI — kido@IoTエンジニア (@9wick) 2019年8月23日 だいたい60行ぐらいのプログラムです。 お手軽感満載です かわりにソースコード外で色々頑張ってるところがあります。 しくみ サブディスプレイのキャプチャを撮ってm5stackで表示しています。 色々小ネタはありますが、基本的にはそれだけです。 これを実現するのに、chrome(HTML)とobnizOSを使っています。 サブディス
スマートフォンの普及によって、カメラやマイク、位置情報などを用いたコンテンツに誰もがアクセスできるようになりました。さらに近頃では、ビデオ会議が盛んに行われるようになったり、カメラと同期して動くバーチャルアバターで遊ぶ人も増え、デバイスを介した面白いコンテンツがどんどん増えています。 フロントエンドの開発者としても、時流に乗っておもしろコンテンツを作りたい、そんな思いでいっぱいです。そこで、今回の記事ではカメラを用いたウェブコンテンツを作成してみます。今回作成するのは、次のようなブラウザで動くクリエイティブカメラです。 サンプルを別ウインドウで開く コードを確認する 本記事を読むことで、以下の知識が身につきます。 ブラウザからウェブカメラにアクセスする方法 デバイスから取得したデータをブラウザに表示する方法 映像とCanvasを組み合わせたクリエイティブ表現の作り方 ブラウザはもはや、ブラ
YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法 | Web Design Trends
YouTube動画埋め込みのパラメータ（オプション）の指定方法 YouTubeの動画埋め込みコードは、下記のようなiframeタグによって記述されています。 <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？ 一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。
by Sara Kurfeß Twitterが同プラットフォーム上で使用可能だった動画フォーマットのひとつであるAPNG形式のファイルの利用を禁止しました。その理由は、APNGがてんかん患者の発作を引き起こしたという報告があったためです。 Twitter bans APNGs after attack on Epilepsy Foundation handle - The Verge https://www.theverge.com/2019/12/23/21035855/twitter-bans-apngs-trolls-seizures-epilepsy-foundation-attack 2019年12月16日、何者かがてんかん財団の公式Twitterアカウントに対するツイートやてんかん財団関連のハッシュタグ付きのツイートにAPNGファイルを添付し、てんかん患者の光過敏性発作を引き起
Version 1.88 is now available! Read about the new features and fixes from March. June 2023 (version 1.80) Update 1.80.1: The update addresses these issues. Update 1.80.2: The update addresses this security issue. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the June 2023 release of Visual Studio Code. There are many updates in this versi
From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 皆さんは「Among Us（アマングアス、アマンガス）」というゲームをご存知だろうか？ 2020年9月にはYouTube上で「Among Us」に関するビデオの視聴数が40億を突破するなど、“2020年に大ブレイクしたゲーム”としてSNSなどで話題を集めているが、実は発売から2年ほどはほとんどの人がゲームの存在すら認知していなかった。 Among
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
ブログ実験 Dorpboxを使ってパワポで作成した動画をブログに貼り付ける実験をしました。パソコンの画面はすぐ出来ましたが、スマホの画面でうまく表示されません(^_^;) 色々調べてやっとどちらも表示できるようになりました。せっかくなので備忘録として残すことにしました。YouTubeなどを使えば簡単なのでしょうが、あえて茨の道を選んでしまいました(;゜ロ゜) 同じような不具合でお悩みの方の参考になれば幸いです。 お時間があったらお付き合いください。 目次 1.まずは動画をご覧ください 2.作成の流れ 1.パワーポイント資料の作成 2.記録（録音） 3.はてなブログへの貼り付け 4.動作確認 3.音声の実験 4.おわりに 1.まずは動画をご覧ください ナレーション付きのパワーポイントで作成した1分20秒の短い動画です。 42年前の青春時代の音声がネタ元です(^_^;) まずはご覧ください。
「世界で最も美しい場所」とコロンブスに言わしめたカリブ海に浮かぶフランス「マルティニーク」に行ってみた【インターリンク ドメイン島巡り 第25回「.mq」】 - 知ってわかる日本（世界）の良さ Kazu68’s diary
人食いの村があるとウワサされる国、ニートの居住が違法の町、日本から片道40時間の絶海の孤島など、インターネットに情報があふれる時代でも「実際にどんな場所で、人がどんな生活を送っているのか、よくわからない……」という国や地域は存在します。ネットにない真実を求め、そんな地域を弾丸で巡ってレポートする「ドメイン島巡り」企画、第25回目は大西洋を横断した航海者コロンブスが「世界で最も美しい場所」だと称賛したというマルティニークを訪れました。 ドメイン島巡り - 世界のドメイン1,000種類以上を取り扱うインターリンクが、「.cc」「.tv」「.sx」等、南太平洋やカリブ海などの「島のドメイン」約50種類に焦点をあて、実際にその島々に行き、島の魅力をレポートします。 https://islanddomains.earth/ ※取材は2020年2月上旬に行われました。 ◆マルティニークはどこにあるのか
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いざという時に使える13のHTML&CSS Tips集 | BUILD Journal
JavaScriptで任意のHTML要素をPicture-in-Pictureする
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
gihyo.jp編集部におけるMarkdown記法 | gihyo.jp
ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
Amazon Fire TVの起動直後にフルスクリーン広告表示が開始されるように
Twitter社、APNGを禁止：てんかんを抱える人を標的としたサイバー攻撃の再発防止として
Vue.jsでカスタムディレクティブを使ってユーザーの「見てる」を可視化する - dely Tech Blog
制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
全世界300万人が使うCacooのビデオ通話機能を支える技術 #ヌーラボのアドベントカレンダー | 株式会社ヌーラボ(Nulab inc.)
Windows10/11のデフォルトアイコンが保管されている場所は一体どこなのか？
デザインとして動画を設置する際に気をつけている7つのポイント | BUILD Journal
最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 - ICS MEDIA
Making GitHub’s new homepage fast and performant
SkyWayとTone.jsを使って、ボイスチェンジャー付きボイスチャットアプリを作る - Qiita
TechCrunch | Startup and Technology News
SkyWayを使ってリアルタイム物体検出つきビデオチャットを作る - Qiita
Adobe Firefly - Free Generative AI for creatives
世界的人気のK-POPを“裏”で支える日本人──20歳の振付師「ReiNa」の素顔
obnizOSを使ってm5stackをサブディスプレイ化してみた - Qiita
PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA
JSでLottieを配置する方法 - パフォーマンスの最適化方法も紹介！ - ICS MEDIA
Twitterが動画ファイル形式「APNG」のサポートを停止、てんかん患者の発作を引き起こすため
Visual Studio Code June 2023
発売から2年の時を経て、オンラインゲーム「Among Us」が大ヒットした理由
YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
Dorpboxでスマホも動画が正しく映る方法 - まねき猫の部屋