Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
Intl.Segmenter - JavaScript | MDN
Standard built-in objectsIntl.SegmenterConstructorIntl.Segmenter() constructorStatic methodsIntl.Segmenter.supportedLocalesOf()Instance methodsIntl.Segmenter.prototype.resolvedOptions()Intl.Segmenter.prototype.segment()InheritanceObject/FunctionStatic methodsFunction.prototype.apply()Function.prototype.bind()Function.prototype.call()Function.prototype[Symbol.hasInstance]()Function.prototype.toStri
JavaScript: 文字数を正確にカウントするには？ - Qiita
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
【解決方法】iOS Safari で JavaScript からCSS変数を取得できない - Qiita
2022年4月12日追記 iOS のバージョンを最新版の 15.4.1 にアップデートしたところ iPad （第9世代）以外は取得できました。 iPad （第9世代）は古いから取得できないんでしょうかね… CSS変数の定義はメディアクエリ内で行わないほうがよさそうです。 取得できた iPhone XR 15.4.1 Safari iPhone X 15.4.1 Safari iPad Pro （9.7インチ） 15.4.1 Safari 取得できない iPad （第9世代） 15.3.1 Safari 現象 JavaScript から算出されたCSS変数を取得しようとすると iOS Safari だけ取得できない… 取得できた Windows Firefox 99.0 Google Chrome 100.0.4896.75 Microsoft Edge 100.0.1185.36 Andr
[JavaScript]Fetch APIを使えばData URIからBlobに簡単に変換できるという話
Base64のDataURIをBlobに変換したいということがたまにあります。ただ、これが一筋縄ではいきません。Uint8Arrayのオブジェクトを生成して、バイトの配列に変換し、ループで一文字ずつ解析していくということをやらなければいけない。 そのため、やり方を全く覚えることができず、いつもググっています。今日、また必要になったのでググったら下記のページを見つけました。 Creating a BLOB from a Base64 string in JavaScript – Stack Overflow そうそう。Uint8Arrayのオブジェクトを生成して、バイトの配列を作るんだよね……、とみていったら他のやり方を書いた回答がありました。それが下記。 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAY
![[JavaScript]Fetch APIを使えばData URIからBlobに簡単に変換できるという話](https://cdn-ak-scissors.b.st-hatena.com/image/square/27dc51b8291eb1b37ef5d8a375c9345c08140844/height=288;version=1;width=512/https%3A%2F%2Fam-yu.net%2Fwp-content%2Fthemes%2Fcocoon-master%2Fscreenshot.jpg)
【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。 技術的なこと まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。 const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator =
エープリルフールなのでJavaScriptの信じがたい話をします - Qiita
今日はエープリルフールなので、JavaScriptに関する、にわかに信じがたい話(実話)をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、「嘘だろ!?」とツッコミながらJavaScriptへの関心を少しでも深めていただければと思います。 思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります🙇🏻♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。 JavaScriptは10日で作られました JavaScriptは最も利用される言語のひとつで、JetBrainsの統計によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。 ここまで普及したとなると、JavaScriptはどれほど練りに練って、じっくり作り込まれた言語だったのでしょうか
TypeScript: Promise風に振る舞うクラスの作り方 - Qiita
Promise<T>をラップして、Promise風に振る舞うクラスの定義のしかたを紹介します。Promise風のクラスは、Promise同様にawaitができるようになります。 Promise風に振る舞うクラスの作り方 JavaScriptでは、thenメソッドを持っているオブジェクトはPromiseと判断されます。 const p = { then(resolve) { resolve("hello world"); }, }; console.log(await p); //=> "hello world" なので、Promiseのように振る舞うクラスを定義する場合は、thenメソッドを実装すればいいわけです。TypeScriptではPromiseLike<T>インターフェイスがビルトインで提供されているので、これを実装したクラスを定義します。 class HelloWorldProm
Color Thief
Color Thief by Lokesh Dhakar Grab the color palette from an image using just Javascript. Works in the browser and in Node. Github Getting started The Color Thief package includes multiple distribution files to support different environments and build processes. Here is the list of all the files in the /dist folder and what formats they support: color-thief.js - CommonJS module for use in Node. col
JavaScriptの進化で変わる身近なコーディング習慣
JavaScriptの進化で変わる身近なコーディング習慣 uhyo ( https://twitter.com/uhyo_ ) JavaScriptは歴史が結構長い言語であり、さまざまなベストプラクティスがあります。一方で、JavaScriptは進化を続けており、それに伴ってこれまでに蓄積したベ…
Splideをスライダーの新たな定番としたく - Qiita
はじめに Webページ制作において、スライダーの登場頻度は異常に高いですよね。 cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。 その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。 そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。 そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、slickとSwiperでしょう。 そこに第三の選択肢として、Splideを推したいのです。 Qiitaで「Splide」と検索しても意外と記事がなかったので、おすすめポイントをまとめてみたいと思います。 Splideとは Splideは、MITライセンス下でリリースされたアクセシビリティに配慮された軽量で高機能なスライダ
警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害 - Qiita
警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害JavaScriptSecurity脆弱性Snyk 本記事は2022年3月16日に発表した弊社の英語ブログAlert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraineを日本語化した内容です。 2022年3月15日、人気の JavaScript フロントエンドフレームワーク Vue.js のユーザーは、npm のエコシステムに対するサプライチェーン攻撃に見舞われました。これは、パッケージ node-ipc とそこから参照されている peacenotwar に対して、node
ウェブアプリとしてデプロイしたGASをブラウザからAPIとして呼ぶ際のCORSエラー - sambaiz-net
GASでAPIを公開する方法として、scripts.run APIで実行できる実行可能APIと、ウェブアプリがある。 前者は認証が走り実行者の権限で動くが、後者は認証を行わずデプロイユーザーの権限で動かすこともできるのでパブリックなAPIとして使うことができる。 当然、不正な操作が行われないように注意する必要があり、GASのQuotaやhard limitも気にする必要がある。無料で運用することができるが、レイテンシやエラーハンドリング、監視などを考えるとやや心許ない。 ウェブアプリではdoGet(e)とdoPost(e)を実装することでそれぞれのメソッドのリクエストをハンドリングできる。これ以外のメソッドには対応していない。 function doGet(e) { return ContentService.createTextOutput(JSON.stringify(e.parame
ブラウザバック感知の備忘録 - Qiita
はじめに 仕事でブラウザバック時のみ実行される JavaScript コードを作成したので、その際の知見を書き留めておきます。 画面読み込み完了イベントの発火 ブラウザバック時はキャッシュから画面が読み込まれることも相まって、使用するブラウザによって画面読み込み完了イベントの発火の扱いが異なります。 いくつかあるイベントの種類の中でも、「pageshow」はメジャーなブラウザ（Google Chrome, Firefox, Safari, Edge）のいずれにおいてもキャッシュから読み込まれた場合でも発火します。 ブラウザバックかどうかの見極め ブラウザやキャッシュの状況によって反応が異なるので、併記した方が良い二つの判定方法を記載します。 1. PageTransitionEvent.persisted PageTransitionEvent.persisted はキャッシュから読まれた
どうしてMath.max()は-Infinityになるし[].every(条件式)はtrueになるの？ - Qiita
これらは、別に「JavaScriptの奇妙な仕様」ではありません。 集合演算のできるほぼすべての言語が同様の仕様となっています。JavaのStream.allMatch()だってC# LINQの.All()だってそう。 これらの仕様は「中立元を返している」のだと理解すると腹に落とすことができると思います。 中立元 どんな数に1をかけても同じ数です。 どんな数に0を足しても同じ数です。 これらのことを「かけ算の中立元は1だ」「足し算の中立元は0だ」と表現します。演算しても元の数と同じ結果になるような数のことを、その演算の中立元だと言うわけです。 さて、数のゼロ乗は1になることを中学で習うと思いますが、納得のいかなかった方、いらっしゃいませんか。 33は3×3×3 32は3×3 31は3 30は、3を一個もかけ合わさないってどういうこと⋯？ “虚無”⋯？ 仕方ない、先生が1と言ったから1だと覚
![どうしてMath.max()は-Infinityになるし[].every(条件式)はtrueになるの？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a93aa75bbc7165a602e6ae01c5a18997de7406b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgxJUE5JUUzJTgxJTg2JUUzJTgxJTk3JUUzJTgxJUE2TWF0aC5tYXglMjglMjklRTMlODElQUYtSW5maW5pdHklRTMlODElQUIlRTMlODElQUElRTMlODIlOEIlRTMlODElOTclNUIlNUQuZXZlcnklMjglRTYlOUQlQTElRTQlQkIlQjYlRTUlQkMlOEYlMjklRTMlODElQUZ0cnVlJUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgxJUFFJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MDA1ZGIwYzU1ZDAxZGIxOTA5ZTgxYzFiODI0Mjc4Yg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5dWJhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mY2QwYWIzMjZhNDAyNjA5ODc5OGEwMDc2OWFhYTMxZA%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Ko44Og44K544Oq44O85qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dbad6bd1d1ce546ffca311560812ab071)
JavaScriptの反意図性(クソ挙動)を指摘するバズツイ周辺解説 - Qiita
先日このようなツイートが話題になりましたね 無論この件は例のコインハイブ事件で言われるような反意図性とはずれる話題ですが、直感的ではないという点でうなずくものがあります 今回はなぜこれらがこのような結果になるのか、回避方法等順に説明しようと思います というのも、この中のいくつかはJavaScript固有のものではないので、他人事と思わないようにしていただきたく…… その上でJavaScriptの本当の意味でヤバイ箇所も説明できたらいいなと思います。 ①typeof NaN NaNとはNot a Numberの略、なのになんでnumberなんだ！！ この値は他のオブジェクトを数値に変換する関数parseInt(x)が失敗した場合、0*Infinity等の不確定な計算をした時に出力される値で、エラーを表現する値の一つです。 内部表現的にはただの浮動小数(IEEE754)なので、typeofがn
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to detect touch screen device using JavaScript? - GeeksforGeeks
webサイトのアニメーションが動作しない
Array.prototype.groupBy() - JavaScript | MDN
requestAnimationFrameのループはPromiseに変換すると簡潔に書ける（かも） - Qiita
