Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要

このブログを運用してたクラウドサービスが吸収合併？かなんかした影響ですべての記事がクラウド上のMySQLに永眠することになってしまい、 あちらこちらでキャッシュをひろっては、作りかけだった静的サイトジェネレータでホスト先を移行したりとせわしなくしていた今日このごろです。 そんなわけで「Angular2やるぞ！」と１ヶ月ほど前に書いたAngular2のコードも確実に忘れそうだったのと明日の勉強会に備え、備忘録も兼ねて記事にしとこうと思います。 簡易ブログを作ってみる 公式のチュートリアル、結構分かりやすいんですがDecorators構文だとかいわゆるESnextな記述がでてくるんで、単純に写経してもすぐに忘れる自信があったので若干公式サンプルをいじって、ブログアプリ的なものを作ってみました。 Angular2のバージョンは（これを書いた当時最新の）beta.13です。 公式のデモだとデータが

<h3 class="center">音を鳴らしてみる<br/>「音の生成」→「音の出力」</h3> ### 音を鳴らす //ベースとなるオブジェクト window.AudioContext = window.AudioContext || window.webkitAudioContext; //safari対応 <span class="hot">var audioContext = new AudioContext();</span> //「音の生成」 <span class="hot">var osciillatorNode = audioContext.createOscillator();</span> //「音源」→「音の出力」 <span class="hot">osciillatorNode.connect( audioContext.destination );</sp

AngularJS は、クライアントサイド MVC フレームワークの１つですが、自身のことを MVW フレームワークと呼んでます。 これは Model-View-Whatever の略で 「MV＊について議論するなんて時間の無駄、そんな暇あるならコード書きなよ。MV＊の＊の部分なんて”Whatever”でいいんだよ。」 という思いが込められてるそうです・・・いかしてますね！ という訳でコードを書きながら AngularJS を紹介したいと思います ^^; はじめに 2000 年頃から「web アプリでいかにネイティブアプリに迫れるか」をテーマに半分趣味で JavaScript と向かい合ってきた身としましては、 就活せまられる現状に乗じ、あわよくばフロントエンドエンジニアに転身できないかなぁ・・・などと思いを馳せつつ転職サイトを検索したりしております。 そんな中、フロントエンドで採用されて

MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の３つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto）に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs

こんにちわ、2015年3月をもって所属会社が解散することになってしまった CYOKODOG です（悲） ただいま絶賛就活中、当方にご興味ございましたらお声かけのほどよろしくお願い致します ^^; そんな背景もあり過去の資料を整理することも多々ありまして、今回は昔懐かしい JavaScript の prototype 周りについて自分なりにまとめてみました。 this と オブジェクトの関係 prototype の話の前に this と オブジェクトの関係をおさらいします。 JavaScript ではオブジェクトは以下のように作ります。 var Hello = {} オブジェクトに対し、値やメソッドを追加したい場合は以下のように書きます。 var Hello = {} Hello.msg = 'hello'; Hello.say = function(){ alert(this.msg);

jQuery 1.9 になってとうとう $.browser が使えなくなってしまいましたね。 もともと非推奨ということもあり、個人的にはプラグインを実装する時などは極力使用しないようにしてましたが、実際使えなくなってしまうと、動かなくなってしまうプラグインって結構多いんじゃないかなぁって気がします。 スムーススクロールが動かない プラグインではありませんが、最近ではいろんなサイトで見かけるようになったスムーススクロールの実装で、影響受けてるというエントリを見かけました。 IE系だとウィンドウのスクロールを制御するとき「html」を指定する。 GoogleChrome や Safari などのWEBKIT系は「body」指定しないといけない。 そこで、「$.browser.safari」をつかって、どっちを指定するかを切り替えていた。 ところがどっこい、jQuery1.3以降だと「$.bro