The HTML5 Creation EngineCreate beautiful digital content with the fastest, most flexible 2D WebGL renderer.
![PixiJS v4](https://cdn-ak-scissors.b.st-hatena.com/image/square/80ae99b93eb8d90a6f3ee2df39e681be1766083b/height=288;version=1;width=512/https%3A%2F%2Fpixijs.com%2Fimages%2Fogimage.png)
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
Code Splitting、サボってきたのですが、必要になりそうだったので真面目に調べてみました。 これからCode Splittingやりたい方の入口的な役割になれれば幸いです。 Code Splittingとはなにか Code Splittingはその名の通り「コードを分割すること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。 ちなみにWebpackでentry point分けることとかもCode Splittingと言えばそうなのですが、本記事では触れません。また、別にSPAでなくともCode Splittingはパフォーマンス向上に利用できますが、これ以降はSPAを前提に話します。 Code Splittingの目的 Code Splittingの目的は初期表示にかかる時間、及びユーザがインタラクションできるようになるまでの時間の削減です。 S
第2回目のゲストとしてお迎えしたのはamachangこと天野仁史さん。これまでのこと、これからのこと、熱く語ってくださいました。 天野 仁史 さん2012年にプログラマーとして起業。その後、スマートニュースにバイアウトし、エンジニアリングマネージャーとして開発チームを作る仕事に携わる。 Twitter:@amachang URL:https://amachang.hatena blog.com/ JavaScriptのスターからベンチャーの立ち上げへ 天野:天野仁史です。amachangのハンドルネームで活動しています。2007年ぐらいにインターネットで活躍していました。サイボウズ・ラボでJavaScriptをがんばっていた時期があって、そこで技評さんにお世話になったり、いろんな勉強会に顔を出したりしていました。2010年以降はベンチャーを立ち上げたり手伝ったり。 経歴を言うと、高専でコン
JavaScriptでオブジェクトを連想配列のように扱い、全部のキーと値に対して何かをしたい場合、for in を使いつつ、hasOwnProperty でそのオブジェクトが持っているかどうかチェックするために以下のようなコードを書くことが多いのかなと思います。 Object.prototype.parent = "Parent!"; var obj = { name: "koba04", from: "kyoto" }; for (var key in obj ) { if ( obj.hasOwnProperty(key) ) { console.log(key + ":" + obj[key]); } } // name:koba04 // from:kyoto http://d.hatena.ne.jp/koba04/20110918/1316357080 上のエントリでは混乱しそ
mdlineというMarkdownでタイムライン(年表)を書いて、HTMLなどの形式にしたりできるパーサ、ジェネレーターなどのツールを書きました。 特定の記法で書いたMarkdownから年表的なタイムラインを作成するツール書いた。 $ npx mdline ./timeline.md -o timeline.html 現在はMarkdown to HTMLができる。https://t.co/7Vv0DUmYkX pic.twitter.com/oYJICloElA — azu (@azu_re) January 20, 2019 たとえば、次のようにECMAScriptのタイムライン(年表)をmdlineが決めたMarkdown形式で書きます。 (実際にはただのMarkdownなのですが、次のように 日付: タイトル とHeaderのレベルを合わせるとタイムラインとして扱う感じです) ##
この記事はPWA Advent Calendar 21日目の記事です。 create-react-appのService Workerサポートを使ってお手軽にオフラインキャッシュを組み込んでみたので、調べたことをメモします。とりあえずすぐにオフラインでPWAが動かせるようになって便利です。 使い方 create-react-app でアプリを生成していればindex.js|tsで import { register } from './serviceWorker'; register(); するだけ。 内部 create-react-app(2.0以上の場合、現在は2.1.4)のService Worker supportは内部でworkbox-webpack-pluginを使っている 使われているのはgenerateSW モード プロジェクト内のhtml/js/imageが一通りキャッシ
create-react-appコマンドを実行すると、React.jsプロジェクトの雛形を作れます。 その雛形のsrcディレクトリ以下にregisterServiceWorker.jsというファイルがあります。 また、ビルドするとservice-worker.jsというファイルが生成がされます。 雛形のコードがService Worker上でしている事と、上記ファイルについてまとめてみました。 Service Workerについて Service Workerとは、リッチなオフライン体験・定期的なバックグラウンド同期・プッシュ通知など、いわゆるPWAの機能を実現するために基盤となる技術です。 (詳しくはGoogleのドキュメントにて解説されています。Service Worker の紹介) Service Workerによって実現できる機能は様々ですが、create-react-appで作っ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート(Node.js)チームの伊藤(@koh110)です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
2020/5/9追記: 考えた結果、Authorization Bearer ヘッダを使った正規のJWTの場合、同一ドメイン下で読み込む全 JavaScript が信用できる場合でないとブラウザ上で安全にトークンを保持できないのでブラウザからのAPIアクセス時の認証用には使うべきではないというところに着陸しました。ブラウザからのアクセスでは http only cookie にトークンを入れ、 CSRF 対策も忘れずにというこれまで通りの定石が手堅いように思います。 JWTを使うのはトークンの安全な保管ができる非ブラウザなネイティブクライアントからのAPIアクセス時に限った方がよさそうです。 APIサーバ側ではアクセス元に合わせて認証方法を使い分ける両対応が要求されるので手間は増えますが手抜きできる場所でもないので仕方なしと。 React(SPA)での認証についてまとめ - エンジニアの本
Auth0 Marketplace Discover and enable the integrations you need to solve identity Explore Auth0 Marketplace 本書では OAuth2 で定義されたRefresh Tokenの概念について学びます。また、Refresh Tokenと他のトークンタイプを比較して、その理由と方法を学びます。さらに、簡単な例を使ってRefresh Tokenの使い方について説明します。それでは、始めましょう! 更新: 本書を書いた時点では、Auth0 は OpenID Connect 認証を取得していませんでした。本書では access token のような用語の一部は本仕様に準拠しませんが、 OAuth2 仕様には準拠しています。OpenID Connect は access token (Authoriz
どうして JWT をセッションに使っちゃうわけ? - co3k.org に対して思うことを書く。 (ステートレスな) JWT をセッションに使うことは、セッション ID を用いる伝統的なセッション機構に比べて、あらゆるセキュリティ上のリスクを負うことになります。 と大口叩いておいて、それに続く理由がほとんどお粗末な運用によるものなのはどうなのか。最後に、 でもそこまでしてステートレスに JWT を使わなくてはいけないか? とまで行っていますが、JWT認証のメリットはその実装のシンプルさとステートレスなことにあります。現実的には実際はDB参照とか必要になったりするんですが、ほとんど改ざん検証だけで済むのは魅力的です。トレードオフでリアルタイムでユーザー無効化ができないことくらいですかね。ライブラリなんて使う必要ないほどシンプルだし、トレードオフさえ許容できればむしろ、なぜこれ以上に複雑な認証
備考 2018/09/21 22:15 追記 2018/09/20 12:10 に公開した「どうして JWT をセッションに使っちゃうわけ?」というタイトルが不適切だとご指摘をいただいています。 その意見はもっともだと思いますので、現在、適切となるようにタイトルを調整しています。 ご迷惑およびお騒がせをして大変申し訳ございません。 本文の表現についても改善の余地は大いにありそうですが、こちらは (すでにご意見を頂戴している関係で、) 主張が変わってしまわないように配慮しつつ慎重に調整させていただくかもしれません。 はあああ〜〜〜〜頼むからこちらも忙しいのでこんなエントリを書かせないでほしい (挨拶)。もしくは僕を暇にしてこういうエントリを書かせるためのプログラマーを募集しています (挨拶)。 JWT (JSON Web Token; RFC 7519) を充分なリスクの見積もりをせずセッシ
どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ? - co3k.org JWT認証、便利やん? - ブログ JWT 認証のメリットとセキュリティトレードオフの私感 - ..たれろぐ.. JWTをセッションに使うことに関して最近少し議論があったので、自分のお気持ちを表明したいと思います。 私は以前SPAを書く時にJWTをセッション管理に使おうとしたことがありましたが、仔細に検討していくとJWTをセッション管理に使うのは無意味にセキュリティ上のリスクを増やすだけで、伝統的なクッキーを使ったセッション管理を使った方が良いという結論に至りました。 前提を整理するためにあらかじめ前置きすると、「JWTをセッション管理に使う」というのは認証APIなどで返ってきたJWTをlocalstorageなどJavaScriptからアクセスできるストレージに保管しておいて、ajaxでサーバ
元記事: Awesome Node.js Awesome List in Qiita Awesome Ruby Awesome Java Awesome JavaScript Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージ マッドサイエンス webtorrent - Node.js とブラウザ用のストリーミングトレントクライアント. peerflix - ストリーミングトレントクライアント. dat - データセットのリアルタイムレプリケーションとバージョン管理. ipfs - すべてのコンピューティングデバイスを同じファイルシステムで接続しようとする分散ファイルシステム. stackgl - browserify と npm 上に構築された, WebGL のためのオープンソフトウェアエコシステム. peerw
できあがったクソゲー できあがったブツ(音が出るので注意) https://teradonburi.github.io/santa/index.html 避けゲーです。始める前に事の経緯を読むとクソゲーを倍楽しめると思います。 ちなみに技術的にすごいものはあまりないかもしれません・・・ どちらかというと限られた時間内に自分の持てる能力で実現するにはどうしたらよいかというのを試行錯誤したことを書きました。 タイトル画面はそれっぽい感じにしました・・・ 事の経緯 JSフレームワーク(またはライブラリ)× ビアバッシュ 初心者勉強会にて最速でサービスをローンチするをLTさせてもらいました。 最速でローンチすると書いてある以上、当日中になにか作ってローンチせねばと思い、1人ハッカソンを決行しました。 移動とかもろもろの関係で着手し始めてからのスケジュールがこんな感じです。 14:25 スケジューリ
ECMAScript 6 がいよいよ標準仕様となり、ブラウザでの実装もより一層進んできています。 オブジェクトリテラルの書き方ひとつ取っても、大変多彩になりました。 var d = 42; var obj = { a: 42, "b": 42, 0: 42, ["c"] : 42, d, e(){}, get f(){}, set g(v){}, *h(){} }; これらを全て把握するだけでも一苦労です ここではそれぞれの書き方を、ひとつひとつざっくり見ていきたいと思います。 尚、ここで紹介するコードは、一部のブラウザでは動かないことがあります。 投稿時点で最新の GoogleChrome 44 であればすべて動作することを確認しましたので、よければそちらをお使いください。 var obj = { prop: value }; 一番慣れ親しんできた書き方だと思います。 しかしプロパティ名
こんにちは、ほそ道です。 今回からしばしJavascriptの基本的な処理と概念を整理していきます。 頻出でありながら詳細を忘れてしまいがちなものや、有効な使い方がわからなくなりがちなもの等をまとめていきます。 今回はcallとapplyを取り上げます。 目次はこちら 基本仕様 callもapplyもFunctionオブジェクトのprototypeであり、用法が良く似ています。 関数.call()や関数.apply()という実行の仕方となり、実際に処理されるのは呼び出し側の関数です。馴れないと直感的じゃないかもしれませんが、何度かやってるとすぐ馴れると思います。 基本1:thisを指定する 第一引数は関数内で参照されるthisとなり、無理矢理thisを変更出来ます。 なんでもできちゃうJavascriptらしい処理です。 下記の例ではcallとapplyは同じ動作となります。
Seriously. Just stop it already. I don’t know what it is, exactly, that drives so many developers to store session information in local storage, but whatever the reason: the practice needs to die out. Things are getting completely out of hand. Almost every day I stumble across a new website storing sensitive user information in local storage and it bothers me to know that so many developers are op
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く