JavaScriptでもバーチャル背景する - console.lealog();
やってやれないことはなかったです。 ぱっと思いついた2通りのアプローチで実装してみたので、その学びをメモっておきます。 ただ、個人的には別にいらない機能かな・・。 バーチャル背景とは バーチャル背景 – Zoom ヘルプセンター たとえばWeb会議のZoom（のデスクトップクライアント）で使える機能で、汚部屋や背景をさくっと隠せて便利！というもの。 JavaScriptでもこういうことやりたいなーと思ったときに、どういうアプローチがあって、どういう仕上がりになるか？をやってみた話です。 案1: クロマキー合成 クロマキー - Wikipedia TVでおなじみ（ガチャピンが消えてたやつ）の手法。 グリーンバックとかブルーバックとか、とにかくベタ塗りの背景の前に立って撮る。 そして撮ったデータのピクセルの色を判定し、そのベタ塗りの色なら透過にして、背景と合成する。 実装 コードもシンプルで、
SEO対策をサーバーサイドレンダリングせずにやっていく - Qiita
2019/05/08 追記 【大ニュース】 なんとGoogleBotのJSレンダリングエンジンがChrome74相当になって、ES6に対応するようです...！ ここで書かれた内容の多くはすでに古くなっているかもしれません...！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html もう時は2018年の後半となり、React・Vue・AngularといったモダンJavaScriptフレームワークは開発現場でよく見かける存在となりました。 一方で、依然としてこれらを利用して開発をする場合には「Googlebotがそれらをレンダリングできない可能性がある」という問題がついてまわります。 そのため、サーバーサイド側で前もってJavaScriptをレンダリングしておく、サーバーサイドレンダリングという技
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita
はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか？ 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか？ mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 対象バージョン Jest:22.0.4 Reac
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
サーバーサイドエンジニアこそAngular2をやるべきかもしれない – Heroデータを AWS Lambda+DynamoDB で取得する | DevelopersIO
サーバーサイドエンジニアこそAngular2をやるべきかもしれない – Heroデータを AWS Lambda+DynamoDB で取得する はじめに 私自身は普段サーバサイド（主にWeb API）の開発を行っているのですが、業務外でAngular2を触ってみたところかなり好感触だったのでブログにしました。この記事では、Angular2のTutorialを終えた状況から、データ取得部分をモックではなく外部サーバに置き換える例を示し、Angular2の考え方、サーバサイドとの連携方法について記録したいと思います。 Angular2をはじめたときの筆者の状況 フロントエンドスキルセット jQuery、CSSを利用したウェブページの開発経験あり とはいえ、アニメーションや色彩に明るいわけではなく、ほとんどWebアプリケーションフレームワーク任せ JavaScriptはDOM操作用の言語という考え
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
フロントエンドにテストを導入 - Qiita
2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha？webpack？karma？それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。（数日前の自分です） 全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。 前提 Nodejs,npm,chromeが導入済みであること 流れ Step 表題 目的
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
WindowsでJavaな人に捧げる素敵なスクリプティングツール jrunscriptの使い方
これは Java Advent Calendar 2015 の3日目です。昨日は@kawasima さんの「Webアプリ開発/テストのお供に『WAITT』」で、明日は @akihyro さんです。 もしもLLが使えたなら 業務にWindowsを使用していて、開発言語はもっぱらJava、LLを使えたらかっこいいと思うけど、Windowsだし。。。。Powershellとかよく知らないしでもっぱらサクラエディタ、、、そんな方はいらっしゃいませんか？ 僕は、そんなあなたを応援します！なぜなら僕がそうだからです！ 僕は大量のファイルを作ったり、複雑なファイル検索をしたいなどのデータ処理に、よくJDK付属のjrunscriptコマンドを使っています。例えばこの記事でも使っています。 jrunscriptとは jrunscriptはJDK6以上に付属しているコマンドで、JVM上でJavaScriptエ
任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita
任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"
脱初心者のためにこれだけは知っておきたいJavaScriptネタ
脱初心者のために これだけは知っておきたい JavaScriptネタ Tsuyoshi Akase 福岡Haxe勉強会 feat. HTML5+α @福岡 第0x00回
Backbone.js 使い方メモ - Qiita
Backbone.js を勉強した時のメモ。 Backbone.js とは CoffeeScript, Underscore.js などの作者である Jeremy Ashkenas が作っている JavaScript フレームワーク（jashkenas/backbone | Github）。 クライアントサイドで MVC を実装するための下地（骨組み）を提供する。 Angular.js がフルスタックで様々な機能が用意されているのに対して、 Backbone.js はあくまで Backbone（背骨）であり、骨組みを用意するのみ。 双方向のデータバインディングなどの機能はない。 肉付けをするのは、プログラマのお仕事。 機能が少ない分、覚えることは Angular.js に比べれば少ない、と思う。 Hello World 用意するファイル 本体。これがないと始まらない。 Underscore
デザイナーが知っておきたいDOMの読み込みとjQuery | スマートフォンアプリ開発会社のエンジニアブログ
こんにちは。ビンゴ豊島です。デザイナーという立場ですがJavaScriptもちょいちょいと書かせていただいております。 今回はDOM操作をする前に知っておきたいDOMの読み込みについて記事を書かせていただきます。対象はDOM操作ばかり、もしくはDOM操作しかしないんですけど？といったデザイナーさんになります。これを読むと今までなんとなく使っていたjQueryも意味を理解した上で使えるようになれるかもしれません。 Webページが表示されるまで ブラウザがページを表示するまで簡単に書くと下記のようになります。 サーバにページをリクエスト サーバから返されたHTMLをダウンロード DOM構築をしつつ描画と画像等のダウンロード 表示完了 このうち「3. DOM構築をしつつ描画とダウンロード」のタイミングでどのような順番でイベントや処理が発生するかを検証します。 DOMの読み込みを確認するサンプルコ
Javaプログラマから見たJavaScriptデザインパターン(導入編) - Qiita
仕事などでJSを書くようになって少々経つが、Java信者で頭が固い僕にとってはどうもJSというのは柔らかすぎてしっくりこない部分が多い。 考え方を整理するにはデザインパターンを知るのが早いと、最近思い立ったので改めて調べてみた。 ということで、Javaは大体分かるし、JSも書くけどそこまで詳しくない人向け（つまり自分主体）にまとめておく。 今のところシリーズ化予定。 ※ JSの知識には自信ないので間違った点に気付いた方がいらしたらコメント等でご指摘いただけると助かります。 ※ デザインパターンとして挙げているコードは、個人的にアレンジしている場合がありますので、ご了承ください。 ０．はじめに 本編案内 内容に入る前に、予備知識をおさらい。要点ではないのでざっくり。 シリーズ案内 Javaプログラマから見たJavaScriptデザインパターン(導入編) Javaプログラマから見たJavaSc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
