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
Flashエミュレーター誕生のきっかけは別に「フラッシュ愛」じゃなかった 「swf2js」開発者の本音と数奇な運命【フォーカス】
株式会社ソニックムーブ エンジニアグループ ソリューションユニット マネージャー 家永 稔之 2011年にソニックムーブに入社。個人ではJavaScriptとTypeScriptを用いて、「swf2js」や「Next2D」の開発を手がける。業務のリモート化をきっかけに地元の消防団に所属し、防災活動として月に数回、消防車両に乗って地域の巡回を行う。 X GitHub Animation Tool かつてインタラクティブなWebコンテンツを支えた「Adobe Flash」。「Adobe Flash Player」は2020年12月末でサポートを終了し、ほとんどのコンテンツはすでに姿を消しました。そんなFlashコンテンツ（SWF）を最新のHTML環境で再生可能にする、オープンソースのJavaScriptライブラリが「swf2js」です。ソフトウェアエンジニアの家永稔之さんが開発し、2015年に
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
.reduce() | JavaScript 日本語リファレンス | js STUDIO
reduce()メソッドは配列に対して関数を適用し、その処理によって配列の各値を(左から右に)一つの値にまとめます。 文法 arr.reduce(callback,[initialValue]) 配列内の各値で実行される関数です。 この関数は4つの引数を受け取ります。 previousValue この値は直前(1つ前の要素)のコールバック実行で返された値か、 または提供されていればinitialValue(後述)になります。 currentValue 配列内で現在処理されている要素です。 index 配列内で現在処理されている要素のインデックスです。 array reduceが呼び出されている配列そのものです。 引数 説明 説明 reduceは配列内の各要素に対して(欠落しているものを除き)順番に、コールバック関数を実行していきます。 コールバック関数は初期値(または直前のコールバック呼び
ウィンドウサイズに応じて倍率を自動調整する.js - Qiita
はじめに こんな方に読んで欲しいです。 スタイルを作成する時に 色んなデバイスを考慮するのがめんどくさい レスポンシブなフレームワークを使っても、デバイスサイズによって改行位置とかが微妙にずれてきになる PCとSPでカラム数を変える必要がない 1カラムを想定している 解像度が高いPCだとコンテンツに対する余白の割合が多すぎて気になる この記事で紹介する方法を用いると 固定幅のデザインを1つ作成するだけでOK どんなデバイスでも同じ見栄えになる それでは… 仕組み 仕組みはっても単純です。 例えば幅1000pxのページをデザインしたとします。そしたらjsがウィンドウサイズに応じて適切な倍率を計算して設定してくれます。 ウィンドウサイズが1000pxの時は何もしない ウィンドウサイズが2000pxの時は200%にする ウィンドウサイズが500pxの時は50%にする 値は極端ですが、イメージでき
マウスで指定した範囲の画像を取得する[Canvasの矩形選択2]
<注意事項> ブラウザによってはローカル環境ではセキュリティエラーでサンプルを実行できませんので、サーバーにアップしてから動作確認をして下さい。 実際に試してみる 次の画像の上で、マウスで範囲を指定すると右側に選択範囲が描画されます。 マウスダウンで範囲の選択を解除できます。また、ドラッグ中にキャンバスの範囲外でマウスアップした場合は、範囲選択が無効となります。 サンプルコード 前回のサンプルに選択範囲の画像を取得する処理などを追加したコードです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> // キャンバス var src_canvas; var src_ctx; // イメージ var image; // 矩形用 var MIN_WIDTH = 3; var MIN_HEIGHT = 3; var rect
![マウスで指定した範囲の画像を取得する[Canvasの矩形選択2]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4af1465cf1036f95b1b69f4c0702e72611933727/height=288;version=1;width=512/https%3A%2F%2Fwww.petitmonte.com%2Fimages%2Fog_image.jpg)
オプショナルチェーン (?.) - JavaScript | MDN
JavaScript チュートリアル: 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロージャ 上級編 継承とプロトタイ
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
JavaScriptの真偽判定まとめ。 - Qiita
ifを使う時に空文字列とか空オブジェクトってどう判定されるのかいつも忘れてしまうのでまとめてみます。 下記の関数を使ってチェックしてみました。
Number.isNaN() - JavaScript | MDN
Number.isNaN() 関数は、NaN と等しいことをチェックする便利な方法を提供します。なお、NaN と等しいことは == 演算子でも === 演算子でも検査できません。JavaScript の他のすべての値との比較とは異なり、一方のオペランドが NaN であれば、もう一方のオペランドが NaN であっても false と評価します。 JavaScript の有効なすべての値の中で、x !== x は NaN だけが true になりますので、Number.isNaN(x) は x !== x の検査を置き換えることができますが、後者の方が可読性が低くなります。 グローバルの isNaN() 関数とは異なり、 Number.isNaN() は強制的に引数が数値に変換される問題の影響をうけません。これにより、通常 NaN に変換されるが実際には NaN ではない値が、安全に渡されます
JavaScriptで連想配列のキーでソートする方法を現役エンジニアが解説【初心者向け】
連想配列とは 配列とは複数の要素をまとめて扱う仕組みです。配列は以下のように定義します。この場合「arr[0]」と記述することで先頭の要素である「’みかん’」を取得することができます。配列は先頭から順番に並んでおり、要素の位置をインデックスで指定します。 const arr = ['みかん', 'さくらんぼ', 'りんご']; 連想配列とは、要素が順番に並んでおらず、要素をキーで指定して取り出す配列です。JavaScript には連想配列は無く、オブジェクトが該当します。オブジェクトは以下のように定義します。 const obj = { orange: 'みかん', cherry: 'さくらんぼ', apple: 'りんご' }; オブジェクトの要素をプロパティと呼びます。プロパティの値「’みかん’」を取得するには以下のように記述します。 obj.orange obj['orange']
クロスドメインのAjax通信でセッションを維持する - Qiita
xxxx.net と api.xxxx.net の間でアカウント認証を行い、セッションIDをクッキーで書き込んでもらう際にハマった話。 xxxx.net のログインページのフォームにアカウント名とパスワードを入力し、api.xxxx.net のWebAPIにAjaxを使用して送信する。 HKUser.signin = function(form, callback) { var postdata = form.serialize(); $.ajax({ type:"POST", async:true, dataType:"json", cache:false, url:"https://api.xxxx.net/1/user/signin", data:postdata, success:function(data) { ..... }, error:function(error) { .
XMLHttpRequestでBasic認証の付いているサーバーに対しapiを叩く
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - pixiv/three-vrm: Use VRM on Three.js
target="_blank"のリンクを踏んだのにwindow.openerにnullが入ることについて - at backyard
JavaScriptのビルトインオブジェクトを拡張する - Qiita
window.openerの取得に失敗
HTTPリクエストした先がBasic認証かかっていたときの対処@TitaniumMobile
how to include the header access token to the Dropzone config