WebQA Meeting Vol.2 https://peraichi.com/landing_pages/view/webqa-2

Firebugの"XPathをコピー"と互換性があります。 いわゆるこれ↓ 要素を右クリックして、"XPathをコピー"した場合と同じ文字列を取得できます。 実装 /** * エレメントノードからxpathを構築します。 * * @param Node element_node xpath構築元のelement node * @returns element nodeまでのxpath */ function getXpathByElementNode (element_node) { var NODE_TYPE_ELEMENT_NODE = 1; if (element_node instanceof Array) { element_node = element_node[0]; } if (element_node.nodeType != NODE_TYPE_ELEMENT_NODE)

npmとbowerライブラリのバージョン管理 npmやbowerのライブラリをプロジェクトに導入するときは、"npm install --save xxx"や"bower install --save xxx"のような形で指定してインストールとpackage(bower).jsonへの記録をしたりします。 その場合、package(bower).jsonには"xxx": "~x.y.z"という形式で記録されます。 "~x.y.z"という表記は、"~1.2.3"だとすると1.2.3 <= x.x.x < 1.3.0 の間での最新バージョンがインストールされます。 https://www.npmjs.org/doc/misc/semver.html なので"~"で指定していると、同じpackage(bower).jsonでもインストールするタイミングによって微妙に異なるバージョンがインストール

angular-periodとは AngularJS のDirectiveで、期間を指定するとその 期間前、期間中、期間後でDOMの表示を切り替えてるようにするものです。 例えば、なんかの応募とかで、以下の様なHTMLをテンプレートエンジンやJavaScriptなどを使って出し分けることがある時に便利です。 angularJSを使った一番お手軽なケースとしてはこんなかんじでしょうか。 angular.module("campaign", []) .controller('CampaignCtrl", function () { this.now = new Date().getTime(); this.start = new Date('2015-08-01T00:00:00').getTime(); this.end = new Date('2015-08-31T23:59:59').g

概要 Electronとは、JavaScriptでデスクトップアプリケーションが作成できるツールです。 MITライセンスなので無料で使える上に商用利用も可能です。 最近ではAtomやSlackのアプリもElectronで作られたとのこと。 今かなりノっているツールの1つです。 以下、簡単な特徴。 Node.js + HTML + CSS という、WEBの技術でアプリが作れる。 Chromiumブラウザ(Chromeのオープンソース版)を内蔵しているので、普段の書き味と変わらない これ1つで Windows, Mac, Linux 向けのアプリが作れる 超簡単 ここではElectronのインストールからアプリの配布までを紹介します。 以下、「Hello World」を出すだけのアプリですが、ゼロからはじめて30分でここまで出来ます。 インストール まずは必要なものをインストール。 nodeの

タグ入力フォームを作る Webサービスでよくタグを入力する機能がよくあると思います。Qiitaにも入力するところがあると思います。Qiitaではタグを作ると入力した言語の背景がかわってとてもいい感じです。 自分でも作ってみたいと思い試行錯誤してみました。Qiitaとか参考にすればいいとあとで気づいたのであまり筋のいい解では無いと思いますが、こういう実装もあるんだよ程度に思って頂けると幸いです。 動作 動作の様子です。スタイルが適当なのは勘弁してください。 少しわかりにくいのですがエンターキーでタグを確定しています。となりのxを押すとタグが削除されます。 実装 <div class="text-area"> <div class="tag-list"> <span class="tag" v-for="tag in tags"> {{tag.name}} <span class="delet

投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ

やっと理解したのでメモ 何がしたいか npmパッケージを登録する時にcoffeeやtypescriptのコードをコミットせず生成したjsだけをアップロードしたい 自動生成したjsをgitで管理したくない どうやるか src/** にソース、lib/** に実体があるとする .npmignore に npm にアップロードしたくないものを書く

eslint.org 目下のところ JSHint と JSLint 戦争は ESLint という第三勢力の登場によって僕の中でめでたく終結したので最近の JS 開発の際には ESLint を使っている。で、以下の .eslintrc （プロジェクト単位に作れる ESLint の設定ファイル）が僕の場合の基本形。欲しくなったルールをなんか秘伝のタレ的に下に下に継ぎ足してるので、特に定義の順序には拘ってない。 { "rules": { // 定数式による条件を警告 "no-constant-condition": 1, // 情報が不十分な JSDoc を警告 "valid-jsdoc": [2, { "requireReturn": false }], // console メソッドを注意 "no-console": 1, // alert メソッドを許可 "no-alert": 0, //

まずあれです、タイトルは盛りました。 実装は3分じゃおわらないよ!! でも公開のための作業は3分くらいで行けるんじゃないかと思います。 作ったものを、公開したくてうずうずしている方は、ぜひ読んでみてください。 [1分目] npmアカウントを作ろう npmの公式ページから なにはともあれ、npmの開発者として登録しましょう。 https://npmjs.org/signup から、「Make it so.」しましょう。 特筆するようなことはないですが、すぐに使うので username password email address は、ちゃんとメモしておきましょう。 npm adduser 登録ができたら、ターミナルからnpm adduserを実行します。 すると、username・password・email addressを聞かれるので、 先ほど作ったアカウントのものを入力します。 これで

最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue

はじめに railsのsprocketsがキツイ。特にjsファイルが多くなると開発がとっってもキツイ。 layoutに こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rail

(function() { foo = function() { ... }; }).call(this); このため foo() は外から呼び出すことができない。 foo() を呼び出せるようにするには次のいずれかの方法がある。 変換時に --bare オプションを指定する方法

ソフトウェア名については気にしないのが良さそうです。kawaiiはごく単純に言えばgetUserMediaを使った顔認識ソフトウェアになります。以前紹介したHTML5 Face DetectionはHTML5のvideoタグを使っていましたが、こちらはそれをベースにgetUserMediaにしています。 さらに顔を認識するだけでなく、顔の上に画像をかぶせて表示しているのが特徴となっています。 kawaiiの使い方 カメラへのアクセスを許可すればこんな感じで表示されます。 顔の動きにもきちんとついてきますが、手を間に入れたりするとずれます。 HTML5は様々なAPIが追加されていますが、Webカムを使った技術は特に面白いですね。ぜひ自分の顔で試してみてください。 kawaiiはHTML5/JavaScript製のソフトウェアです。 HTML5 Face Detection - JavaScr

はじめに gulpとBrowserifyを組み合わせてフロントエンドJSをビルドする機会があったので、一通りやってみたことをまとめてみた。 gulpについて Node.jsのstreamを活用したビルドシステム、ということらしい。 Streamのおかげでビルドフローをとても直感的に記述できると感じた。 他のWebフロントエンドのビルドシステムは使ったことがないので比較はできないけど…。 Browserifyについて node.jsと同じように (npm、requireなどを使って) モジュール化されたフロントエンドJSが書けるツール。便利。 JSのモジュール化というと、最近はwebpackというのもあるらしい。 基本 gulp = require 'gulp' source = require 'vinyl-source-stream' browserify = require 'brow

gulpのタスクは基本的に非同期で実行されます。例えば以下のコードでは、ファイルコピーが完了する前に "done" と表示される可能性があります。 gulp.task('copy', function() { // ファイルをコピー gulp.src('src/file').pipe(gulp.dest('dest')); }); // copyに依存するタスク gulp.task('done', ['copy'], function() { // ファイルコピー完了「前」に実行される！！ console.log("copy done"); }); gulpが高速に動作する理由の一つはこの非同期性ですが、どうしても同期的に処理したい場合（すなわち特定のタスクの完了を待ってから別なタスクを実行したい場合）もあると思います。 この記事では同期的にタスクを実行する方法として、gulp API d

概要 ビルドツール　： gulp altJS　　　　： TypeScript モジュール管理： Browserify 以下で説明していく開発環境のひな形はGitHubに置いてありますm(_ _)m https://github.com/massa142/typescript-devenv 前提 Node.jsインストール済み。 Node.jsのインストール方法に関しては、以下の記事が詳しいのでご参照ください。 node.jsのversionを管理するためにnodebrewを利用する - Qiita 参考にしたもの TypeScriptリファレンス Ver.1.0対応 gulpでbrowserifyを使う | 4uing Usage npm install gulp tsd gulp (tsc| browserify | watch| minify) ファイル構成 root ├── src

JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで

こんにちは、id:ukstudioです。今回は弊社サービスの1つであるSPOTLIGHTSにVue.jsを採用した話をしようと思います。 SPOTLIGHTS自体は一般的なRailsアプリケーションといって問題ない作りになっているので、既存のRailsアプリケーションにどういった形でVue.jsを投入していったかを中心に書いていきます。 Vue.js採用前の状況 SPOTLIGHTS初期のJavaScriptはHTML/CSSと共に外注し納品してもらったものです。 フレームワークといった類はほぼ使っておらずjQueryに頼りきったコードでした。 当時は様々な事情によりこれはこれで妥当な判断だったと思うですが、今後社内でメンテナンスしていくうえで足かせになるであろうというのはなんとなく予想ができていました。jQueryのイベントハンドラやDOM操作がひとつのファイルにひたすら連なっているとい