PlunkerPlunker is loading… Get your fork on.
npm i angular2してHello World!するところまで - Qiita
【160325追記】この記事はAngular 2 alpha時代に初稿を仕上げ、それ以降は変更にあわせて保守を続けていましたが、そろそろ差が大きくなってきたため改稿版として別の記事を用意しました。今後はそちらをご覧ください。 @armorik83です。初日である昨日は、このアドベントカレンダー最大のサプライズとして@btford氏に寄稿していただきました。アドベントカレンダーの立ち上げ直後からオファーし、日本の「アドベントカレンダー」という特殊なTech系の事情を説明し、Angular 2のカレンダーをぜひ飾ってほしいという旨で依頼したことを覚えています。直前になって、時差で向こうはまだ11月なため日本のカレンダー開始に気付いていなかった、という笑い話も乗り越え、公開にこぎ着けたことを喜ばしく思います。 Thank you so much for contributing! Angular
JSで顔認識(Face Detection) - Qiita
会社のAdvent calendarと同じ内容をあげようと試みたのですが、ダメでした。。orz 遅れてすみません... 最近顔認識(Face Detection)のイケてるサイト公開されてたのに影響されてちょっと調べてみました。 いくつかライブラリがあるようですね。 clmtrackr jQuery FaceDetection 今回はサンプルも充実していたいのでclmtrackrを利用します。 clmtrackrでできること Face Detectionでやりたいことは一通りできるようです。 目、鼻、口、輪郭、眉毛の認識から、それらの位置ベクトルの取得。画像、動画どちらも対応可能なようです。 解析の入力サイズは小さい方がパフォーマンスはでますが、MBPであれば、640x520とかでもサクサク動きます。 実際に動かしてみながら動作を確認していきます。exampleディレクトリ内のsample
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー 悪い点 プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。 僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。 連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig
Nightmareがv2(Electronベース)になり、使いやすく感動したのでLIGブログのPV/UUデータ取得を自動化してみた。 - Qiita
LIGアドベントカレンダー1日目です！ こんにちは@n0bisukeです。 Nightmareを久々に使ってみたら起動したタイミングでElectronが起動してびびってたらそういうことになったみたいです。 Google Analyticsにログインしてカスタムレポートの値を取得する作業を自動化してみました。 あとでもうちょい細かく書いてLIGブログでまとめてみます(予定)。 Nightmareとは NightmareまたはNightmare.js http://www.nightmarejs.org/ ヘッドレスブラウザでJSの自動テストなどを行うPhantom.jsのラッパーツール・ライブラリです。 ログイン処理やボタンを押した際の挙動などを自動テストする際に使います。 yahooにアクセスしてgithub nightmareで検索する処理を書いた時の比較です。左がPhantom、右がN
ElectronのRemoteモジュール使ってハマったけど最終的にハマらなくなった話 - Qiita
Electron Advent Calendar 2015の2日目のエントリです ElectronのRemoteモジュール使ってハマったけど最終的にハマらなくなった話 最初は最近新設されたAPIでも叩いて遊ぼうと思って, session.enableNetworkEmulation とか触ってみたのですが, 特に記事にするほどの知見も得られなかったので, 少し前にElectronでハマった話を書こうと思います. ハマった内容 今年(2015年)の秋頃の話で, その時に使ってたElectronのversionはv0.31.0でした. Renderer Processから読み込まれるjsに下記のようなコードを書いてました: var myHandler = () => { console.log('動いた!'); }; var win = require('remote').getCurrent
話題かもしれないReactを使って簡単なアプリケーションを作ってみた。 - Qiita
数年前からjavascriptのフレームワークが数多く出てきたけど、その中でも最近話題かもしれないreactについて勉強してみた。 Facebook製で、Facebook、Instagram、GitHub (Atom) という大御所たちに使われたりしている。 作ったアプリケーション Qiitaのタグを取得してタグごとに記事一覧を表示するもの。 トップは新着記事一覧を表示。 デモ トレンド Googleのトレンドで見てみるとじわじわと人気が出てきているのがわかる。 backboneはいわずもがな、angularも直近だけ見ると落ち込んでいるように見えるが、reactはじわじわと伸びている。 https://www.google.co.jp/trends/explore#q=react.js%2C%20backbone.js%2C%20angular.js%2C%20vue.js&cmpt=q
React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ
2015年1月、React ConferenceにてReact.jsでネイティブアプリが作れるようになると発表された。この発表を受けて最近何かと話題のReact.jsだが、リリースされたのは2013年であり、2009年にリリースされたAngularJSや、2010年のBackbonejsなどの他のjavascriptフレームワークに比べると新しく、まだネットに日本語の情報があまりない。ということで、React.jsのデファクトルーティングライブラリであるreact-routerの使い方についてまとめてみた。 目次1.そもそもreact-routerとは 2. react-routerのインストール方法 3. react-routerの使用例 4. react-routerのコンポーネント一覧 5. Routerのrunメソッド 1. そもそもreact-routerとはreact-rout
今一番JSで熱いゲームエンジン、RPGツクールMVのランタイムコードを読んでみた - Qiita
一昔前にCanvasが実用段階になった頃、JSのゲームエンジンが大量に出てきたことがありました。それらは大抵DOM/CanvasのFallbackを持っていたのですが、今現在の状況は、実際には非効率なメモリ消費やモバイルのブラウザのフラグメント化で実用に足るものがなかった、という辛い現状があります。 そんな中pixi.jsという描画ライブラリが台頭してきました。このエンジンは webglとcanvasの fallbackを持ち、(いくらかのバグはありつつも)DOMを切ったことで現実的なパフォーマンスの課題をクリアできるのでは？という期待感が高まっています。 Pixi.js - 2D webGL renderer with canvas fallback http://www.pixijs.com/ そして 2015年、RPGツクールMVが発表され、ブラウザ吐き出し対応がアナウンスされました
npm initでauthorやlicenseなどの初期値を指定する - teppeis blog
JavaScript Advent Calendar 2015の2日目。小ネタです。 npm initするときにauthorとかlicenseとか毎回同じこと入力するの面倒だったりしません？実はいくつかの項目は初期値を設定できるのだけど、ググってもあまり日本語情報が無いようなので共有。 設定方法は.npmrcで以下のように指定すればOK。 init-author-name=Teppei Sato init-author-email=teppeis@gmail.com .npmrcの場所は以下の順で優先される。（詳細は公式を参照） per-project config file (/path/to/my/project/.npmrc) per-user config file (~/.npmrc) global config file ($PREFIX/etc/npmrc) npm buil
今からでも間に合う！Node.js v4＆v5は何が変わったか？
Node.js v4リリースに向けて とうとうメジャーバージョンアップにされたNode.jsである、Node.js v4がリリースされました。今回はこのNode.js v4がこれまでのNode.js v0.12やv0.10と比較してどう違うのかを解説します。また、最新ではv5もリリースされていますので、合わせてお伝えしていきます。 なんでいきなりv4なのか おそらく一番最初に抱く感想は、v0.10とかv0.12みたいな数字からv1.0を飛ばして、なんでいきなりv4.0がリリースされたのかという疑問だと思います。これにはio.jsというプロダクトが関係しています。 2014年の年末、io.jsというプロダクトが発表され、2015年の初めにv1.0がリリースされました。io.jsというのは Node.js のforkで別リポジトリによって実装されたプロダクトです。io.jsの詳細は筆者のブログ
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python phina.js とは？ phina.js(フィナ ドット ジェイ・エス) は, JavaScript で作られた国産のゲームライブラリです. プログラミング初心者でも始めやすく, それでいて上級者のハイレベルな要求にも 応えられる, 柔軟な設計と豊富な機能を備えています. 使い方はカンタン! あなたの HTML ファイルに <script> タグで phina.js を読み込むだけ でで導入でき, あとは公式サイトで提示しているサンプルコードをベースに, あなたがやりたいことを追加していくだけです. p
2015年のWebクライアントサイドの温度感 - Tetsuharu OHZEKI - Medium
この3~4年間でJavaScriptとかWebクライアントサイドを取り巻く温度感も大きく変わった。これからはHTML5だぜイエーイと騒いでいたのも随分過去の話になったように思う。だけど、このあたりの温度感はそんなに掴みやすいものでは無い。別に放っておいてもいいんだけど、放っておくと10年20年経たないと誰も書かなんてのも割とよくある話。でも、そこまで待ちたくは無い。なにとなしに説明してみようと思う。 だいたい2011~13年ぐらいはHTML5がバブルっていた。今からすると「バブルだった」というのが一番説明しやすい。Node.jsあたりが世の中に認知を拡大していたのもこの時期だし、スマートフォンのシェアの伸びに合わせて、クロスプラットフォームで出せるWebにみんな夢を見ていた。MVCだの設計だの何だの言い出したのも、だいたいこのくらいの時期だし、Single Page Application
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
gulp ありの Web フロントエンド開発
JavaScript コンパイルとファイル監視 AltJS には ES6 を採用。JavaScript のコンパイルと依存解決は gulp-watchify が担当する。Transpiler は babelify を採用。これは ES6 だけでなく React JSX も解釈できる。 // JavaScript ( ES6, React JSX ) gulp.task( 'js', $.watchify( function( watchify ) { var buffer = require( 'vinyl-buffer' ); var formatter = require( 'pretty-hrtime' ); var time = process.hrtime(); return gulp.src( [ config.src + '/js/App.js' ] ) .pipe( $.p
babelify v7.2 を試す
2015/10/29 に JavaScript の Transpiler である Babel の 6.0.0 がリリースされた。 6.0.0 Released これまでの Babel はデフォルトで ES6 と React JSX 変換に対応していたが、これからはプラグイン化されたものを指定する形式になるのだという。Browserify 用 Babel の babelify も同様で、これを最新に更新してコンパイルを実行すると ES6 部分が SyntaxError になる。 $ npm run build:js-main > electron-starter@1.0.4 build:js-main .../examples-electron/electron-starter > browserify -t babelify ./src/js/main/Main.js --im --no-
Upgrading to Babel 6. Babel 6 for Babelify and WebPack.
The code corresponding to Gulp + Browserify + Babelify + Babel 6 setup is available on the GitHub. The code corresponding to Webpack + Babel 6 setup is available on the GitHub. Babel 6 Few days ago Babel 6 was released. Babel 6 helps you to transpile your next-generation JavaScript (ES2015+) code to ES5 Javascript. If you are not familiar with Babel, there is short info about Babel in my previous
React and ES6 - Part 1, Introduction
This is the first post of series in which we are going to explore the usage of React with ECMAScript6. You could find links to all parts of series below: React and ES6 - Part 1, Introduction into ES6 and React React and ES6 - Part 2, React Classes and ES7 Property Initializers React and ES6 - Part 3, Binding to methods of React class (ES7 included) React and ES6 - Part 4, React Mixins when using E
お疲れさま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の代わりに使うことが可能です。現時点で実装し
Setting up Babel 6 · Babel
Babel 6 is fresh off the press and we’re still getting a lot sorted out. In the past two days we've seen more activity on GitHub and Slack than ever before. Everyone who has been helping out has been doing a great job. However, the documentation is still lacking at this point, I’m currently going through and creating an entirely new “Getting Started” section of the site. This blog post will cover
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
