'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
var myHeight = $("#main").innerHeight()書き換え JavaScriptvar myHeight = document.getElementById("main").clientHeightmyHeight に値が入ります。単位はなく「30」など数値で返ってきます。innerHeight = clientHeight のようなイメージです。padding 付きの高さを返します。
JavaScript ブラウザのサイズを取得・表示する
<SCRIPT LANGUAGE="JavaScript"> <!-- if(document.all){ document.write('横幅：' + document.body.clientWidth); document.write('<BR>縦幅：' + document.body.clientHeight); }else{ document.write('横幅：' + innerWidth); document.write('<BR>縦幅：' + innerHeight); } //--> </SCRIPT>
Puppeteer君、きみはよくがんばった。褒美に画面をあたえよう。 ということで、スクレイピングやE2Eテストなど裏方で活躍している Headless Chrome Node API の Puppeteer に特に理由もなく Web フロントエンドを実装しました。 動かしてみよう デモサイト（重すぎるのであまりおすすめではありません） https://boiyaa-headful-puppeteer.appspot.com または、 https://github.com/boiyaa/headful-puppeteer をクローンして、 して、 http://localhost:8080 にアクセス。 ブラウザの中のブラウザ風UIの中のアドレスバーに入力されている URL の画面が表示されますが、HTMLではなく、 Pupeteer で叩いて取得したスナップショット画像を表示しています。
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely be
Home Archive ページの高さを自動調節するjavascript ページの高さを自動調節するjavascript 2007年03月26日 category:javascript Comment(0) Trackback(0) コンテンツの量が少ないページだと、極端にページの高さが小さくなったりすることがあります。cssのheightプロパティで高さをしてしまえばいいのですが、コンテンツの内容が変わる度にcssを編集するのは管理が大変になってしまいます。 コンテンツ量が少ない場合のページのサンプル そこでコンテンツ量が少なくても、ウインドウの高さまでは高さを確保するjavascriptを書いてみました。 ページの高さを調整するページのサンプル このスクリプトは下記のようになっています。 window.onload = function(){ var wra
リンクを新しいウィンドウで開くようにする ブックマークレット リンクを新しいウィンドウで開くようにするブックマークレット 説明 ページ上のすべてのリンクを新しいウィンドウで開くようにします。フレームページでも動作します。 動作環境 IE4、NN4 最終更新日 2004-07-19 (2004-05-01作成) ソースコード (function() { var w = frames.length ? frames : [window], i, j; for (i = 0; i < w.length; i++) with (w[i].document) for (j = 0; j < links.length; j++) links[j].target = '_blank'; })(); 選択範囲をURLとして開く(IE版) ブックマークレット 選択範囲をURLとして開くブックマークレット 説
ウィンドウサイズの取得 - Qiita
w = window.innerWidth; h = window.innerHeight; w = document.documentElement.clientWidth; // （クライアント領域の横幅） h = document.documentElement.clientHeight; // （クライアント領域の高さ）
Webアクセシビリティを考慮したチェックボックス・ラジオボタン・セレクトボックス・タブ・アコーディオンの実装 | Will Style Inc.｜神戸にあるウェブ制作会社
セレクトボックスはセレクト要素自体の背景にSVGでアイコンを配置することでwrapすることなくプルダウンアイコンを表示できます。 また、こちらもフォーカスした時にoutlineをbox-shadowで表現しています。 multipleの時はheight:autoにし、プルダウンアイコンを非表示にしています。 .c-select{ &:focus{ border-color:rgba($select-focus-color,.3); outline: none; box-shadow: 0 0 0 3px rgba($select-focus-color,.2); } &:disabled{ background-color: #eee; cursor:not-allowed; } &[multiple]{ height: auto; background-image: none; padd
Sometimes you want to apply styles with JavaScript. This can conflict with your responsive styles. For example: var list_items = document.querySelectorAll('.list__item'); var height = 0; var i; for(i = 0; i < list_items.length; i++) { height = Math.max(list_items[i].clientHeight, height); } for(i = 0; i < list_items.length; i++) { list_items[i].style.height = height + 'px'; } This script would run
ケーススタディ: グラスシャドウエフェクト 「グラスシャドウエフェクト」（または「曇りガラス効果」）は、Yahoo、Kayak.com、DealOgre.comなど、いくつかの人気サイトで導入されています。このエフェクトの背景にあるアイデアは、ページの残りの部分へのアクセスを不能にして、ユーザーに何かの情報を表示するというものです。このエフェクトには多くのバリエーションがありますが、いずれの実装でもメッセージと共にダイアログが表示され、その背後でページの残りの部分がぼかされたり暗くなったりします。 これはユーザーの注意を即座にダイアログに引き付けて、ダイアログとの対話を促す、かなり印象的なエフェクトです。このエフェクトを実現するためのテクノロジとツールキットはいくつかありますが、本稿ではもっぱらJavaScriptとDHTMLというソリューションを考察します。このアイデアは、現在のページU
今日はライトなネタを。 Webページを作成する際に、要素の高さを固定して、内容量によってはスクロールして表示させる事があるかと思います。そのスクロールの上げ下げをJavaScriptで操作する方法を調べたので、ブログに残しておきたいと思います。 Webページ内のスクロールする要素 Webページ内で、以下のような要素を見た事は無いでしょうか。高さが固定されていて、表示内容がたくさんある場合には、スクロールして内容を全て見るやつです。 こんにちは。 この文章を最後まで読むには縦スクロールする必要があります。 あああ いいい ううう えええ おおお 最後までスクロール頂きありがとうございます。 <div id="area" style="width:300px; height:100px; overflow:auto; border:1px solid #aaaaaa;"> こんにちは。 この文
![[Web] DIVのスクロールをJavaScriptから操作する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2112ceb83f7d0dc0d3e073e5914f3b8022eb202/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F035.jpg)
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
[R] - もうカツ丼でいいよな
ブラウザの操作のためにChrome拡張のSurfingkeys（GitHub - brookhong/Surfingkeys: Map your keys for web surfing, expand your browser with javascript and keyboard.）を入れているが、最近Googleでgi（最初の入力欄にフォーカスするコマンド）が効かなくなって少々困っていたが、色々確認していたらi（入力欄にフォーカスする、画面内に複数ある場合は選択肢が表示される）なら効くということがわかったので、設定に次の記述を追加することで対応した。 // Googleでgiコマンドの動作を修正する if (window.location.hostname === 'www.google.com' || window.location.hostname === 'www.googl
![[R] - もうカツ丼でいいよな](https://cdn-ak-scissors.b.st-hatena.com/image/square/06a15c64ba0ceec233d86d71001ebb29a9dcbf5d/height=288;version=1;width=512/https%3A%2F%2Fcdn.blog.st-hatena.com%2Fimages%2Ftheme%2Fog-image-1500.png)
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
// #! jsx // forked from Event's "Web Creator's Contest Q the 2nd【vol.1】エントリー用コード" http://jsdo.it/Event/frf8 import 'js/web.jsx'; import 'timer.jsx'; class Config { static const COUNT = 750; static const GRAVITY = 1.2; static const ALPHA = 0.15; static const WIND = 0.25; static const LIFE = 32; static const SPARK_LIFE = 8; } class _Main { static function main(args:string[]):void { var canvas = dom
いつもどおり、サンプルガジェットを作ってみました。こちらも付箋ガジェットですが、上下 2 つのテキストボックスを用意して、それぞれ別々のユーザー設定にデータを保存するようにしました。テキストボックスの更新を検知するとボックスが赤くなり、 5 秒間放っておくと保存されて黄色に戻ります。ブラウザによっては、 IME 経由では変更が検知されないのでご注意ください。一応、下に貼付けておきますが、当然ながらこの状態では共有機能が働かないので、ご自分の iGoogle に追加してお試しください。 ソースはこんな感じです。例の option 要素が追加されている以外は、いたって普通のガジェットだと思います。 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="設定共有のテスト" title_url="http://we
こちらの記事に触発されて、Firefox + mozrepl 版を書いてみた。 mozrepl が動く環境であれば Windows でも Linux でも動くと思います。 まだまだ便利な機能は作れそう。 Google Chromeで閲覧中のページをEmacsからスクロールする ※Mac限定 http://d.hatena.ne.jp/ramusara/20110211 出来ること Emacs から Firefox で閲覧中のページをスムーススクロール (半ページ毎の移動などにも設定可能) Emacs から Firefox のタブを移動 前提環境 Firefox + Mozrepl Emacs + moz.el (moz-minor-mode が有効になっている状態) ソース (defvar moz-scroll-ratio "60") ;; スクロール量の比率。100(%)で1ページ毎のス
Outside of initial page load problems, “layout thrashing” is the most common performance problem I see in dynamic web applications. This is particularly true for Single Page Applications which build and destroy views on the fly. However, I’m often amazed by the number of web developers I run into who are unaware of the patterns that cause browsers to do unnecessary layout (aka “reflow” in the Mozi
ただし、上の書き方だと画面の一部分しか撮ってくれません... Capybaraでフルサイズのスクリーンショットを撮る フルサイズのスクリーンショットの撮り方を調べるとfull: trueオプションを発見したので付けてスクリーンショットを撮ってみます。 しかし、headless-chromeだとフルサイズに撮れませんでした... 他の方法がないか調べると以下のサイトを発見。 https://testingrepository.com/full-page-screenshot-with-selenium/ take_full_page_screenshotメソッドを適当な場所に定義して、page.save_screenshotをtake_full_page_screenshotに置き換えてみます。 def take_full_page_screenshot(path) width = Capy
Canvasを用いた9つの画像処理フィルターとそのアルゴリズムの解説 | Black Everyday Company
頭の体操のためにCanvasを用いたフィルタリングを学びはじめた。 当記事では、画像フィルターの中でも（独断と偏見で選んだ）代表的な9つの画像処理アルゴリズムを解説する。 グレースケール 色調反転（ネガポジ変換） 二値化 ガンマ補正 ブラー（ぼかし） シャープ化（輪郭強調） メディアンフィルタ エンボス モザイク たたみ込み演算を知らなくても、理解していただけると思う。 Canvasを用いた画像処理の基礎 当記事では、HTML5で導入されたCanvas要素を用いて画像処理（フィルタリング）を行う。 まずはCanvasに画像（フィルタをかける対象）を表示する。 // Canvas要素の作成 const canvas = document.createElement('canvas'); document.body.appendChild(canvas); // 描画するための2Dコンテキスト
Web の仕様を眺めるシリーズ Document Picture-in-Picture (PiP)｜Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は CSS Anchored Positioning でした。 HTMLVideoElement 以外も Picture-in-Picture したい 今回は Document Picture-in-Picture を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 専用の Window を丸ごと PiP すればいいじゃない！ Picture in Picture (以下 PiP) は動画コンテンツ等を画面隅などに置かれる小さな表示領域で独立して再生させる一種のマルチウィンドウ UI です。現在
よーし久々に書いてみるぞー。wktk divで表を作る時に、中身が可変長な場合、同列内のdivで高さがずれちゃうのを何とかしたい。 例えばこんな感じでdivが並んでるとする。 （divはfloatで横並び） <div id="rows_1"> <div class="col"> hoge<br>hoge<br>hoge<br>hoge<br>hoge </div> <div class="col"> hoge<br>hoge<br>hoge<br>hoge </div> <div class="col"> hoge<br>hoge<br>hoge </div> <div class="col"> hoge<br>hoge </div> <div class="col"> hoge </div> </div> 左から順に高さが低くなって表が崩れちゃうので、JavaScriptで高さを揃える。
皆さんの中には、おそらくこんな↓格好で寝そべりながらネットをしている人も居ると思うのですが、 首が痛くならないですか。ブラウザ画面を横倒しにできたら楽なのになぁ...なんて人に朗報です。 とりあえずFirefox3.5.x以上限定ですが、こんなのを作ってみた。 → 右回転。 (Firefox 3.5以上) JavaScriptのブックマークレットなので、Macな人はControl+クリック、Winな人は右クリックしてFirefoxのブックマークツールバーに保存してやると良いです。横倒しにしたいページをブラウザで表示してから、ブックマークした「右回転。」をクリックすると、どんなページでも右90度に回転して表示します。 ソースはこんな感じ。見やすいように改行を入れています。 javascript:(function(){ var b=document.body; sh=b.offsetHeig
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
アクセンチュア
<section id="hero_custom" class="hero_custom"> <video aria-hidden="true" role="presentation" class="hero_custom__background hero_custom__background--video" webkit-playsinline="true" playsinline="true" loop="true" autoplay="true" muted="true"> <source src="/content/dam/system-files/acom/custom-code/change-more/media/custom-rad-hero-bg-video.mp4" type="video/mp4" /> </video> <a class="hero_custom__c
IE6でposition:fixedがうまくいかないのをfixするhtc - Thousand Years
to-Rの西畑さんの講演を聞いてIE6でpositonfixedが動かないのを思い出した。それでそれをどう回避するかというと以下みたいにwindow.onscrollのイベントが発生したときに毎回毎回位置を計算して描画する。このコードって実は問題で描画がスクロールの速度においつかずちらつきが発生したりする。 このちらつきは僕は苦手というエントリーを以前書いた(http://d.hatena.ne.jp/shogo4405/20060919/1158664960)そこにはstyle.setExpressionを使えばちらつかなくていいとも書いた。 といわけで 今回はHTML Component(.htc)を使って書き直してみる。以下の部分をfixed.htcみたいな名前にして保存する。あとはスタイルシートのbehaviorで読み込みするだけ。 <public:component> <atta
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
Onsen UIを使ってスワイプで切り替えられるタブを実装する
Onsen UIのカルーセルを使って、スワイプで切り替えるタブを作ってみました。 サンプルコード タブとカルーセル部分はng-repeatで表示するようにしています。 HTML <ons-navigator var="myNavigator"> <ons-page> <div class="contents"> <div class="tab-switch"> <div class="tab-switch_inner" ng-style="tabPoint"> <div class="tab-switch_item" ng-repeat="belong in belongData.belongs" ng-click="changeTab($index)" ng-class="{active: belong.isActive}">{{belong.name}}</div> </div> </
最近HTML5 Advent Calenderのネタ用にcanvasをいじっています。 canvasを使って映像的なことをやりたい場合、画面いっぱいにcanvasを表示したい！という需要は 結構あるのではないでしょうか？ そんな時向けの小ネタを２つ紹介します。 画面いっぱいのCanvas! 1つ目はユーザーの表示領域いっぱいにcanvasを作成する方法です。 htmlにはcanvasタグを書くだけです。 index.html <canvas id='canvas'> ページがロードされた後に次の様なスクリプトを仕込んでおくと、表示領域いっぱいに canvasを広げてくれます。 script var canvas = document.getElementById('canvas'); function expandCanvas(){ var b = document.body; var d
世界筆記具専門店 萬佳
= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; var elt; elt = new Array; var layerobj; layerobj = new Array; var lastobj; function HpbVfxinit() { var w_str; if (isNC||isN6||isIE) { var n_div = arguments.length / 6; for (var div = 0; div < n_div; div++) { var args = 6 * div; var arg1 = arguments[args]; va
はじめに 社内の勉強会用に作りました。 できるだけシンプルなのもを作りたいと思い、ブログにしてみました。 やりたい事 React + Redux + React-Routerで作りたい。 ブログっぽいものを作りたい。 Markdownで記事は書きたい。 シンタックスハイライトしたい。 管理画面は作りたくない。 記事を読んでいる量を表示したい。（Pocketみたいなやつ） ソースやサイトはこちらです（まだアップデートする予定） github : https://github.com/yutasuzuki/React-redux-blog/ 各ライブラリの特徴を理解する 公式サイトやREADMEを軽く目を通したり、チュートリアルをやったりしています。 その上で以下のサイトや記事、書籍がとても参考になりました。 [React] 入門 React ―コンポーネントベースのWebフロントエンド開発
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由について整理してみると、 属性値でサイズを指定するため、CSSでのサイズ指定ができない【こちらを参照】 画像描画の場合、素材となる画像から切り出すサイズ・開始座標を絶対値で指定してCanvasに描画するという考え方である【こちらを参照】 主にこの２点により、レスポンシブデザインやRetina対応ではセオリーとなっている「width:100%」などといった、親要素を基準としたサイズ指定ができないことが難易度を高くしているゆえんとなっています。 ただし、いくつかのテクニックやメソッドを組み合わせることでこれらに対応することが可能となります。 ちなみ
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
The Man in Blue > footerStickAlt: A more robust method of positioning a footer
29 August 2005 108 comments » footerStickAlt « Updated: 4:40PM, 29 August 2005 (See comment #6) Recently I've been asked to code up a few sites that require the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest. A quick search on Google immediately brought up solarDreamStudio's immensely helpful tutorial on h
Adobe Readerのように要素を掴んでスクロール可能にするjQueryプラグイン - 高密度商業地域
Adobe ReaderやiPhone、Androidで画面を操作するときのように、画面を掴んでスクロールを実装したい、しかもjavaScriptで、と思って色々探しました。 Flashを使う、ということであれば以下のサイトがイメージに近いものです。 http://www.griplimited.com/ で、探索した結果、以下のjQueryプラグインにたどり着きました。 jQuery.flickable http://lagoscript.org/jquery/flickable ブログ→iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった 動作デモも上記サイトにあります。 １点、残念なのは、そのままでは最新版のjQuery（2012/02/12 時点では1.7.1）で動作しません。 上記サイトのコメント欄にある修正を実施する必要があります。 jQueryの1
anything from heremouseover時の説明用Popup表示方法（script上の配慮事項）
やっかいなり！イベント座標系 ２年ほど前から文字だけのポップアップを行ってきたが、この場合にはマウスカーソル位置の右下にポップアップするように設計していた。ここにおいて注意しなければならないことは、ポップアップアイテムがwindow内辺からはみ出さないようにすることであり、その点でかなり苦労した。 それは、ブラウザ毎にイベント座標の表現方法が異なるためであり、特にIEの場合にはスクロール値が、ブラウザの描画モード（標準か互換か）によっても変わるため、「window内の任意の一点」を取得するのにかなり難儀した。また、イベント座標系における各種のプロパティが、一体どの部分の寸法なのかをしっかりと把握するのにも苦労した。手持ちのJavascript参考書にも、イベント座標系について全面的に説明されているものがなく、またネット上でもこれと言った解説は、なかなかなかった。強いて言えばマイクロソフトm
Sekky's Website
<body><!--'"</title></head>--> <script type="text/javascript"> //OwnerIQ var __oiq_pct = 50; if( __oiq_pct>=100 || Math.floor(Math.random()*100/(100-__oiq_pct)) > 0 ) { var _oiqq = _oiqq || []; _oiqq.push(['oiq_addPageBrand','Lycos']); _oiqq.push(['oiq_addPageCat','Internet > Websites']); _oiqq.push(['oiq_addPageLifecycle','Intend']); _oiqq.push(['oiq_doTag']); (function() { var oiq = document.cre
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ストレンジャー・シングス 未知の世界 | Netflix (ネットフリックス) 公式サイト
脱jQuery .innerHeight() .innerWidth() .outerHeight() .outerWidth() | q-Az
Puppeteer をヘッドフルにしてあげた - Qiita
An Animated Intro To RxJS | CSS-Tricks
ページの高さを自動調節するjavascript - Webtech Walker
Bookmarkletサンプル集 / ナビゲーション補助
timseverien/rcss.js · GitHub
Web 2.0エフェクトとリッチクライアントアプリケーション：CodeZine
[Web] DIVのスクロールをJavaScriptから操作する - YoheiM .NET
アイリッシュマン | Netflix (ネットフリックス) 公式サイト
イカゲーム | Netflix (ネットフリックス) 公式サイト
Dragon (Fireworks) - jsdo.it - Share JavaScript, HTML5 and CSS
iGoogle ガジェット の設定共有機能を試す - WebOS Goodies
Firefox で閲覧中の画面を Emacs からスムーススクロールする elisp - sandbox
kelly norton: On Layout & Web Performance
Capybara+headless-chrome でフルサイズのスクリーンショットを撮る - Qiita
隣り合うブロック要素の高さを揃えるJavaScript - Cheese Pie
ブラウザの表示を90度回転。JavaScriptとCSSで。
セックス・エデュケーション | Netflix (ネットフリックス) 公式サイト
美味の起源 | Netflix (ネットフリックス) 公式サイト
【小ネタ】画面いっぱいのCanvas - ハードコイルド・ワンダーランド
React + Redux + React-Routerでブログを作りました。 - Qiita
BLAME! | Netflix (ネットフリックス) 公式サイト
浅草キッド | Netflix (ネットフリックス) 公式サイト
Canvasのレスポンシブ対応 - knowledge base
ザ・ホーンティング・オブ・ヒルハウス | Netflix (ネットフリックス) 公式サイト