Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も マイクロソフトは、JavaScriptで2Dや3Dモデルを高速に扱えるライブラリ「Babylon.js」の最新版「Babylon.js 5.0」正式版をリリースしました。 We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5 Blog: https://t.co/aMgjIIeIin Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU #w

スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な

table要素にある行（tr要素）を取得するには、element.rowsプロパティを使用します。 ※ table要素だけでなく、thead要素やtbody要素、tfoot要素から取得することもできます。 ※ table要素から取得した場合は、thead要素、tbody要素、tfoot要素すべてから取得します。 構文

Fully featured, low end web Framework for the real world

ある案件で、tableに入力された値と、Chart.jsを連携する実装がありました。 今回は円グラフを使用しましたが、他のグラフでも応用可能だと思います。 参考になれば、幸いです。 はじめに table構造はとてもシンプルです。 （実際の運用では、それぞれの数値に関してhtmlは触らずに、WordPressのカスタムフィールドでの運用を想定しています。） See the Pen table - basic by dan (@___dan) on CodePen. このtableを元に、以下の2つのパターンを実装しました。 カテゴリ毎の合計値 （tableでは年度別の合計値が出力されているが、Chart.js上ではカテゴリ毎の合計値を出力する。） 対合計比 （総計を基準にし、各カテゴリの合計値が何%なのかを出力する。） 実装編 カテゴリ毎の合計値 See the Pen table(tota

何年か前からちょいちょい見かける「パララックスデザイン」のWebサイト、存在は知っていたのと、WordPressの海外製のテンプレート等で導入されたりしています。 どういった形で実装するのか興味がありましたので、これを機にチャレンジしてみたいと思います。 パララックスデザインとは ブラウザーのスクロールにあわせて手前のコンテンツと背景を異なるスピードで動作させて奥行き感を出したり、スクロールすることで画面外からフェードインしたりフェードアウトしたりとWebサイトを華やかな演出で表現することが出来ます。 パララックスデザインのメリット・デメリット 当然メリット・デメリットを理解した上でお客様へ提案しなければいけませんので、私が考えるメリット・デメリットについて記述しておこうと思います。 パララックスデザインのメリット 動きのあるWebサイトの演出 1ページで複数のコンテンツを構成するのに有効

New in 4.0 Colors plugin Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.

いろいろ探しても案外なかったので作成。あんまり需要がないんですかね？DataTables | Table plug-in for jQueryに標準であればうれしかったんですけども。 目的 HTMLのテーブル（tableタグ）において、特定の列について値の順位（最大値、2番めに大きな値、3番めに大きな値・・・）によって、セルの背景の色を動的に変える方法を考える。 つまりは、下記画像のような、セルの値によって、1位（一番大きい値）は赤、2位はオレンジ、3位はブルー、4位はパープルという色を自動でつけたいということ。 なお、セルに数字以外の値が入っていても対応することを目指す。165.4cmのように単位が入っていてもOKにする。「不明」などの文字列や空白は無視するものとする。 Javascriptのアルゴリズム 対象となる列のtdに特定のclassをつける。 classオブジェクトを取得。 j

ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。

ショーヘー@デイトラ代表 | 受講生25,000人突破 @showheyohtaki プログラミング学習中の方へ👨‍💻 これ面白い！！セガがjavascriptでぷよぷよを作るプログラミング講座を出してくれてます😊 動作ごとに細かくコメントも入ってるので、ちゃんとソースコードを読んでから写経していったらめちゃくちゃいいプログラミングの勉強になると思う！ puyo.sega.jp/program_2020/ pic.twitter.com/Xr5hmPzZXI ショーヘー@デイトラ代表 | 受講生25,000人突破 @showheyohtaki このぷよ開発に使う『Monaca』は、本来iOS用はswift・Android用はJavaと、別々に開発が必要なアプリを、HTML・jsなどのWeb標準言語でまとめて開発できるという開発プラットフォームです。 無料で使えてブラウザだけで開発可能

サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。

本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。

はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴

【はじめに】 フロントエンドエンジニアの kalbeekatz です。話の背景となる自分の経歴から紹介させてください。 Web制作会社でマークアップエンジニアとして HTML/CSS/JavaScript（主に jQuery）で静的な Web サイトの構築をしていました（2年間）。 その後、株式会社ニジボックスに転職し、フロントエンドエンジニアとして上記に加え、React で動的な Web サービスを構築してきました（2年半）。 この5年間を通して自分がマークアップエンジニアからフロントエンドエンジニアになるまでを振り返り、それぞれの違いや求められること、やりがい、道のりなどをまとめました。 これからエンジニアを目指す方、マークアップ以外のエンジニアリングに興味を持っている方などの参考になれば幸いです。 マークアップエンジニアとフロントエンドエンジニアの違い 「マークアップエンジニア」「フ

C#、ASP.NET、TypeScript、Angular を中心にプログラミングに関した話題を諸々。 by @jsakamoto

Node.js を直にインストールし、後からNode.js バージョン管理ツールを導入する際には Node.js を完全にアンインストールすることを求められる場合があります。 Microsoft 公式ドキュメントを読んでみる Windows に Node.js をインストールする方法は Microsoft 公式ドキュメントに記載されています。 上記に Node.js バージョン管理ツールの nvm のインストール手順も記載されており、その中で既存の Node.js の削除について Stack overflow を参照するようにリンクされています。 Stack Overflow を読んでみる How to remove Node.js from Windows: 0.Take a deep breath. 1.Run npm cache clean --force 2.Uninstall f

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?