Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行われた。 マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 We are proud to announce that Babylon.js 7.0 has officially been released! The ne
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
AdBlockを有効にしているブラウザへの対策あれこれ - ねこの足跡R
白状すると私も日常的に広告ブロックツールを使ってますｗ PC版のChromeではAdBlockPlusの機能拡張を入れ、iOSのSafariでは最近AdGuardを利用しています。正直快適でもう手放せませんｗ ただこれがサイト運営者の収益を削っているのも事実。せめてサーバ代くらいは捻出したいという方も多いと思いますので今回は広告ブロックの簡易的な検出方法と、その対応策についてまとめたいと思います。 広告ブロックの検出方法 今回利用する方法 その他 対応策 その1. アラートを表示する その2. 広告が表示されていればページ内容をAjaxで取得し表示 その3. 別の内容を表示する Wordpressの場合 完全にブロックすべきではない 参考ページ 広告ブロックの検出方法 今回利用する方法 例えばGoogle AdSenseは広告を貼り付けたい場所に指定のscriptタグを書いておき、ブラウザ
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
【JavaScriptの基本】アロー関数と従来の関数の違い – ワードプレステーマTCD
WordPressサイトの画像を軽量なAVIFに変換できるプラグイン「ShortPixel Image Optimizer」 2024.04.26
JavaScript | replace()で複数の文字列を全て置き換える方法 | 1 NOTES
JavaScriptのreplace()で複数の文字または文字列を全て一括で置き換える方法の紹介です。 指定の文字列をひとつ置き換える最初に見つかった指定文字列または文字をひとつだけ置き換える場合は正規表現を使わずに実装可能です。 サンプルでは最初に見つかった「aaa」だけが「ccc」に置き換えられていることが確認できます。 let text = `aaa aaa aaa`; text = text.replace('aaa', 'ccc'); //ccc aaa aaa指定の文字列を全て置き換える特定の文字列または文字を全て置き換えるには正規表現と正規表現の「gオプション」を使った実装方法が簡単です。 正規表現では「gオプション」を指定することで対象の文字が複数回含まれている場合、その全てを置き換える事が可能です。 let text = `aaa aaa aaa`; text = tex
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる環境での挙動の微調整等もしやすくなっています。 <link rel="stylesheet" href="luge.css"> <script src="luge.js"></script>使い方も簡単です。上記のようにファイルを読み込んで指定されたカスタムデータ属性を付与する、といった流れで実装出来ます。ただし、CSSは組み込みのアニメーションが不要なら読み込む必要はないそうです。 サイトプリローダー、スクロールに応じたアニメーション表示、ページ遷移のエフェクトなど、よく見かけるアニメーションのあれこれを管理できるのでアニメーションに時間を取られたくない開発者の方にお勧めで
こういうのでいいんだよ、な JavaScript日付時刻ライブラリ Qrono
作った。 Qronoの特徴 🎨 タイムゾーンとロケールの対応を捨てた軽い日付時刻ライブラリ。 他のライブラリはタイムゾーンとロケールに対応するためにコードベースが巨大になったり使い方が複雑になったりしがち。 ロケール対応はECMAScript® Internationalization APIを使うだけで良い。 ほとんどの場合、クライアント環境のタイムゾーンにだけ対応できれば十分。 Luxonによる説明は、まさにその核心をついている。 Don't make servers think about local times. Configure them to use UTC and write your server's code to work in UTC. Times can often be thought of as a simple count of epoch millise
Spook.js
Spook.js Attacking Google Chrome's Strict Site Isolation via Speculative Execution and Type Confusion Spook.js is a new transient execution side channel attack which targets the Chrome web browser. We show that despite Google's attempts to mitigate Spectre by deploying Strict Site Isolation, information extraction via malicious JavaScript code is still possible in some cases. More specifically, we
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
ブラウザで使える超シンプルなオープンソースのコードエディター・「Smart Text Editor」
Smart Text Editorはブラウザで使える超シンプルなオープンソースのコードエディターです。ブラウザとキーボード操作だけで使えるよう設計されており、JavaScriptで書かれています。 機能は割と豊富で、マルチタブに対応、プレビュー機能、ファイルのリネームや保存時の拡張子の選択、任意のテキストの置換、JSON整形、雛型の挿入などの他、PWAライクに使う事も出来ます。 試していませんがテーマ機能も付いているみたいです。デフォルトではシンタックスハイライトやコード補完等はありませんが、非常に軽量で使いやすい印象で、複雑な構成や作業、準備なども必要なく気軽に使えます。 JavaScript/html/cssで書かれていますがコードは全てindex.html内に書かれているので1枚のhtmlファイルだけでコードエディターとして動作してくれます。個人的にはとても良くできてると感心しました
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
動的にJavaScriptを読み込む at softelメモ
問題 状況に応じて、動的にJavaScriptを読み込みたいです。 答え jQueryが使えるとき $.getScript('https://～～～～') これ1行でOK。 読み込んだ後に何かしてほしいときは、コールバックを指定。 $.getScript('https://～～～～', function(){ /* コールバック */ }) $.getScript('https://～～～～').done(function(){ /* コールバック */ }) 素のJavaScriptのとき script要素を作って、srcを設定して、どこかにappendする。 var script = document.createElement('script'); script.src = something; document.head.appendChild(script); var scrip
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
[JavaScript] 要素にclassを追加・削除する（classList） – コピペで使える JavaScript逆引きリファレンス
JavaScriptで、要素にclassを追加・削除するサンプルです。 サンプルソース 例）要素にclassを追加・削除する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function test(){ var obj = document.getElementById("dv1"); //要素に設定されているclassの一覧を取得する var list = obj.classList; console.log(list); //要素にclass="hoge"を追加する obj.classList.add("hoge"); console.log(obj.classList); //要素からclass="cs2"を削除する obj.classList.
Svelteに入門した | フューチャー技術ブログ
フロントエンド連載の6記事目です。 今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。 Svelteとはなんですか？ 公式のサイトはこちらです。有志の方々が日本語翻訳のサイトを作ってくれています。たいへんありがとうございます！ Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。 特徴とReactやVue.jsなどほかとの違い公式サイトでも、コーディングする際のコード量が少ないという特徴があげられています。 詳しくはこちらのブログに書かれています。コードが多ければ作業時間とバグが増えてしまうため、コードが減らすことはこれらの問題を減らすことができるというようなことが書いてありました。またブログには具体的なコードで量の差について書いていますのでぜひ見てみてくださ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeError: google.visualization is undefined
iPod.js
