読者です 読者をやめる 読者になる 読者になる

AngularJSの$httpや$resourceでのリクエストにAuthorizationヘッダーでの認証を付加する

個別のリクエストではなくインターセプターを使ってまとめて追加。 インターセプターを作って$httpProvider.interceptors配列に追加するだけ。 下記コードは、サーバからのtokenを取得済みなら、Authorizationヘッダーに追加してリクエストするようになる例…

One-time bindingと$resourceで気をつけること

前提 AngularJS1.3からOne-time bindingという最初の一回だけバインディングする仕組みが入った。 $resourceはpromiseではなく、先に空配列を返す。 問題 なので、下記のようにngRepeatをOne-time bindingにすると、空配列評価されて、何も表示されなくなっ…

AngularJSで$templateCacheを使ってまとめたテンプレートJSの中のCSSファイルや画像ファイルのリンクにhashをつける

grunt-filerevを使って、CSSファイルや画像ファイルにhashがbuild時につくようにしている場合に、grunt-angular-templatesを使う場合はどうするか generator-angularで作ったAngularJSプロジェクトのbuildタスクではgrunt-useminの処理中、grunt-filerevの処…

AngularJSで$templateCacheを使っている場合のテスト環境

ちなみにgenerator-angularで作成したプロジェクト。 developmentやbuildではgrunt-angular-templatesを使っているが、テストには、karma-ng-html2js-preprocessorを使った。 インストール % npm install karma-ng-html2js-preprocessor --save-dev karma.co…

AngularJSのカステムディレクティブで別のディレクティブをrequireしている場合のテストの書き方

前の記事のでいえばchildItemディレクティブのテストの書き方 コード再掲 #parentChild.coffee "use strict" #parent #controller angular.module("myApp") .controller("ParentItemCtrl", ($scope, Child) -> #....... @removeChildItem = (childId, index)…

AngularJSを1.2系から1.3.0にあげたらrequireした親のコントローラを使っているdirectiveでエラーが出た

コードはこんな "use strict" #parent #controller angular.module("myApp") .controller("ParentItemCtrl", ($scope,Child) -> #....... coffeeなので自動で波括弧をつけてくれるが明示的につけておいた ............ { removeChildItem: (childId, index)-…

AngularJSでネストしたコントローラをテストする

前提 AngularJSでコントローラをネストして階層化すると、子コントローラ側から親コントローラのスコープを利用可能になる。 問題 子コントローラのユニットテストを書こうとした場合に、子コントローラ側で親コントローラのプロパティやメソッドを使用して…

AngularJSのフォームで投稿後に再利用する際手付かずの状態に戻したい

例えば記事へのコメント投稿後に、そのフォームを再利用する際に、データを初期化しただけだとエラー表示が出てしまう。 ので、$dirtyがfalse($pristineがtrue)の状態に戻したい。 いわゆるブログのコメント投稿とかのよくあるやつ。 form.FormControllerの$…

RailsのResourcesでNestしてshallow: trueしたresourcesをAngularJSの$resourceで扱う

例えばこういう感じのresourcesを定義したとする。 APIの例。newとeditは省いた。 # routes.rb namespace :api, defaults: { format: :json } do resources :reports, shallow: true do resources :comments, except: [:new, :edit] end end 定義されるルー…

AngularJSで$sceを使ってるフィルタなんかのテスト

$sceをDIしてるやつ、例えばこちらのようなののテストを書く場合。 # newlines_spec.coffee "use strict" describe "Filter: newlines", -> beforeEach module "myApp" newlines = {} beforeEach inject ($filter) -> newlines = $filter "newlines" it "\nを<br />…

AngularJSのProtractorでngMockE2Eの$httpBackentを使ってテストを書く際に気をつけること

まだ理解が浅い模様。 注意というかexpectとwhenの違いの話。 前提 AngularJSにはngMockE2EというE2E用のモックが用意されており、こちらを使用することにより、サーバを用意しなくてもモックでテストが書ける。 * ngMockE2Eの$httpBackendにはngMockの$http…

AngularJSでInterceptorでHeaderを付与するようなケースのテスト

例えば$httpのリクエストをインターセプトして、Authorizationヘッダーにトークンを付与するInterceptorを作成したとする。 この場合、このInterceptorのサービスをどのようにテストするのがよいのか? で、調べたら大変素晴らしい記事があったのでそちらを…

UI-Bootstrapのmodalのテストで、$modalInstanceを使うControllerをテストしようとして、$modalInstanceをinjectしようとするところでUnknown providerとエラーが出る

公式のサンプルでいうと、ModalInstanceCtrl部分のテスト。 // modal-demo.js var ModalDemoCtrl = function ($scope, $modal, $log) { $scope.items = ['item1', 'item2', 'item3']; $scope.open = function (size) { var modalInstance = $modal.open({ te…

grunt-wiredep使用の環境でjquery-uiのdatepickerのロケールとCSSを含みたい

grunt-wiredep使用の環境でAngularJSのui-dateでロケール指定したい&jquery-uiのCSSを当てたいと。 bower.jsonに追加してbower install bower.json { "dependencies": { "angular-ui-date": "latest" } } ui-dateがjquery-uiに依存しているので、jquery-ui…

grunt-wiredep使用の環境でmomentの日本語ロケールファイルを含めたい

より正確にいうとgrunt-wiredep使用の環境でangular-momentでロケール指定したい、ということ。 angular-momentをインストールする % bower install angular-moment --save これでmomentも依存関係でインストールされて、wiredepで差し込まれてめでたしめで…

ProtractorでngMockE2Eを読み込んでモックを使ってテストしている場合、build時にはngMockE2Eを除外したい

yeomanのgenerator-angularで作ったプロジェクトで、grunt-wiredepを使っているので、素直にE2Eテストでangular-mocksを使おうとすると、bower.jsonのdevDependenciesからdependenciesに移す必要がある。 // bower.json { "name": "MyApp", "version": "0.0.…

grunt-wiredep使用の環境でangular-i18nをbowerでインストールしたら注入できないとメッセージ

AngularJSリファレンス購入して読了。これは良い本。 で、フィルタのi18nの項をみて、早速いれてみたら、grunt-wiredepを使っているGruntのタスクで注入出来ないとメッセージが出て、htmlファイルのコメントの間にi18nへのscriptタグが挿入されない。 ちなみ…

Vagrant環境でload-grunt-taskを使ったGruntのtaskが遅いのでjit-gruntに変えた

インストール % npm install jit-grunt -D % npm uninstall load-grunt-tasks -D jit-gruntを使うようにGruntfile.coffeeを書き換え。 後、watchにspawn: falseも追加しといた。 #Gruntfile.coffee module.exports = (grunt) -> # Load grunt tasks automati…

deprecatedが出ていたngminからng-annotateへ切り替え

AngularJSのminify対策をしてくれるアレ。 例によって、generator-angularで作ったプロジェクトでの話。 grunt-ng-annotateをインストールしてgrunt-ngminを外して、記述をngminからngAnnotateにしただけでいけました。 % npm install grunt-ng-annotate -D …

Karma-Jasmineの出力結果表示形式をRspec風にしたい

そっけないです..... karma-spec-reporterをインストールして設定する。 % npm install karma-spec-reporter -D # karma.conf.coffee plugins: [ 'karma-phantomjs-launcher' 'karma-jasmine' 'karma-coffee-preprocessor' + 'karma-spec-reporter' 'karma-c…

Railsのwrap_parametersは何をしてくれるのか?

Action Controller Overview — Ruby on Rails Guides ↑ここに書いてある。 config/initializers/wrap_parameters.rbはRails4.1だとデフォルトで多分こうなっている。↓ Be sure to restart your server when you modify this file. # This file contains sett…

Yeomanのgenerate-angularで作成したプロジェクト(CoffeeScript)にKarma-Coverageを導入する

ココを見ましょう。 ありがとうございます。 やった内容 // package.json "karma-coverage": "git+https://github.com/mokemokechicken/karma-coverage.git#master", % npm l #karma.conf.js 'karma-phantomjs-launcher' 'karma-jasmine' 'karma-coffee-prep…

Vagrant環境でProtractorで使うSeleniumをstandalone serverにした

generator-angularで作ったプロジェクトにProtractorでのe2eテストを入れたやつをVagrant環境でアレする。 コレの続き https://github.com/exratione/protractor-selenium-server-cookbook:このクックブックを追加してよしなに設定する。 で、node_modules/p…

Yeomanのgenerator-angularで作ったプロジェクトをVagrant環境で開発する場合の設定

Yeomanで作ったプロジェクト関係なくて、単にVagrant環境で開発する時にホスト側のブラウザとかで確認したい時の話。 こういう場合にgrunt-contrib-connectの設定で、こういうのを見かける↓ #Gruntfile.coffee connect: options: port: 9000 livereload: 357…

Yeomanのgenerator-angularで作ったプロジェクトにE2EテストフレームワークのProtractorを導入してCoffeeScriptで書いたテストを実行する

generator-angularはkarma,jasmineのtestは用意されているけど、e2eテストはAngular Scenario Runner(非推奨)が入ってはいるものの使えるようになってないので、Protractorを入れる。 前提 yo angular --coffee でフロントエンド部を生成済みとする*1。 作業…

Yeomanのgenerator-angularとRailsの組み合わせでの開発環境構築

grunt-connect-proxyを使って、rails server と、grunt serve の2つを叩いてLiveReloadで開発出来るようにしようという話。 あとフロント側をビルドするとRailsのpublicディレクトリに静的ファイルとして配備するように。 RailsのAsset PipelineにAngularJS…

gulpfileをCoffeeScriptで書く

メモ。 //gulpfile.js require('coffee-script/register'); require('./gulpfile.coffee'); //gulpfile.coffee gulp = require('gulp') gulp.task 'default', () -> console.log('gulp!') 参考。 http://efcl.info/2014/0123/res3625/ http://safx-dev.blogs…

node-webkitでコールバックで書いた非同期処理をPromise使用に書き換えてみた

node-webkitで作ったアプリで、データロード処理と保存処理部分をそれぞれ書き換えてみた。 PromiseのライブラリはBluebirdを使ってみた。 あと、cheerioをDOMのパースに使用。 FTPは、jsftpを使用。 データロード処理の流れ(load) 1. FTPでデータ取得 2. FT…

node-webkitで作ったアプリをTypeScript化,CoffeeScript化してみての雑感

素のJavaScriptで書いて出来上がったnode-webkitアプリを今後の参考とするためにCoffeeScript化,TYpeScript化。 ライブラリ以外で書いたJSコードは300行程度と、かなり小規模なアプリ。*1 bowerで入れたのがBootstrap,Bootstrap v3 datetimepicker,jQuery,Mo…

node-webkitでTypeScriptを使ってはまるケース

node-webkitのJavaScript Contextでのrequireでのパス解決でハマる場合がある。 例えばこんなファイル構成で index.html js index.js(index.ts) fileUploader.js 各ファイルがこんな感じ。 <html> <head > <meta charset="utf-8" /> ................. <script src="js/index.js"></script> </body> </html> //js/index.js ........…

requireしてnewして使用するnpmのパッケージにTypeScript用の型定義ファイルを書く

こういうの。 ///<reference path='./typing/node.d.ts' /> ///<reference path='./typing/jsftp.d.ts' /> import JSFtp = require('jsftp'); .......................... var Ftp = new JSFtp({ host: connect.host, port: connect.port, user: connect.account, pass: connect.password }); .......................... jsftp用に…</reference></reference>

node-webkitでNode contextからGUIのAPIを使う

メニュー出したりとかデスクトップアプリ特有のネイティブのアレをNode側から使いたい。 1.require時に引数として渡す //index.js var gui = require('nw.gui'); //↓コレ var fileUploader = require('fileUploader')(gui); 例なので全部渡しちゃってるけど…

grunt-slim

メモ Gruntfile.coffee ...................................... slim: pretty: options: pretty: true files: [ expand: true cwd: 'src' src: ['{,*/}*.slim'] dest: 'app' ext: '.html' ] ...................................... grunt.loadNpmTasks('gr…

bower_componentsをディレクトリ別の場所に

.bowerrcに記述 { "directory": "app/bower_components" }

gruntで任意の場所でnpm i --productionする

node-webkitで作成したアプリのパッケージングはappディレクトリを対象として実行してて、npmをcd app してからnpm i --productionと手動で処理していたので、Gruntに登録した。 Gruntfile.coffeeの該当箇所 ...... exec: npm_i_production: cwd: 'app' cmd:…

node-webkitでWindows向けアプリケーションのアイコンを変更する

Icons に書いてある。 Resource Hackerで書き換える。 これだとWindowsのパッケージングが自動化出来ないのでアレ。

node-webkitで作ったアプリをWindows向けにパッケージングする

grunt-node-webkit-builder使う。 使う人の環境がWindowsだけど、一応Macも作っとく。 Gruntfile.coffeeはこんな感じ。appディレクトリに集めたファイルをパッケージング。 module.exports = (grunt) -> pkg = grunt.file.readJSON 'package.json' .........…

node-webkit特有の問題にはまった

node-webkitでアプリを開発していて、node-webkitの環境ならでは?の問題にはまったのでメモ。 前提 % bower install eonasdan-bootstrap-datetimepicker --save nodeのcontextではなくJavaScriptのcontextでの話。 アプリでbootstrap 3対応のdatetimepicker…

WebStormでnode-webkitをデバッグする

WebStorm 8.0.1以上、package.json等作成済みとして話を進める。 メニューのRunからEdit Configurations…を選択 node-webkitを追加 アプリの場所を指定。グローバルに入れたnode-webkitではなく、npmでプロジェクト下に入れたnode-webkitを指定する場合はint…

Node.jsの管理をhomebrewからnodebrewに変更

npmでglobalにインストールしたtypescriptとbowerを削除。 % npm uninstall -g bower % npm uninstall -g typescript npmを削除 % npm uninstall -g npm Node.jsを削除 brew uninstall node nodebrewをインストール % curl -L git.io/nodebrew | perl - setu…

TypeScriptリファレンス Ver.1.0対応のサンプルコードで--noImplicitAnyをつけて(略

備忘。TypeScriptリファレンス Ver.1.0対応のコールシグネチャのリスト6.56で--noImplicitAnyをつけてる場合。 function db(operation: string, key: string, value?: any): any { if (!db.data) { db.data = {}; } var data = db.data; var oldValue: any; …

TypeScriptリファレンス Ver1.0対応 4-4 Enumのサンプルコードで--noiImplicitAnyをつけてるとコンパイルエラー

TypeScriptリファレンス Ver.1.0対応の4-4 Enumのサンプルコードでtscに--noImplicitAnyをつけてるとコンパイルエラー。 enum Suit { Spade, Heart, Club, Diamond } var s1: Suit = Suit.Spade; var s2: number = s1; var s3: string = Suit[s2]; var s4: n…

WebStormでTypeScript開発時に"Accessors are only when targeting EcmaScript5 and higher."とコンパイルエラー

アクセサ書いたらコンパイルエラーに。 error TS1056: Accessors are only available when targeting ECMAScript 5 and higher. アクセサはECMAScript 5のObject.definePropertyを使ってるからと。 Preferences -> Project Settings -> File Watchersでtypes…

WebStormでTypeScript開発時にtscに--noImplicitAnyオプションを付ける

Preferences -> Project Settings -> File Watchers TypeScriptを選んで編集 Argumentsに --noImplicitAnyを追加 暗黙的なanyをコンパイルエラーにしてくれるようになったか確認。 function hello(word) { return"Hello, " + word; } OK.

Google フォームから入力された内容をメール送信する

前に Google ドキュメントで作成したWEBフォームに問い合わせがあったら、内容をメール送信する機能を追加する という記事を書いたのですが、 2014年4月25日現在、Google フォームを作成すると、フォームとその回答用のスプレッドシートが別に作成されるよう…

YQLで複数ブログのRSSをJSONで取得して、新着として表示する

前に単独のRSSを取得する方法を書いたけど、複数取得を書くのをすっかりわすれていたので。前回 簡単なのでYQLだけ。ついでに日付順になるようsortも。 select * from rss where url = 'http://d.hatena.ne.jp/yuichi_katahira/rss' or url='http://blog.liv…

jQuery の複数バージョンを同時使用する

http://stacktrace.jp/jquery/with_other_lib.html#other_version noConflictの引数にtrue渡せばいいと。 <html> <head> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> // $ 関数および jQuery関数の上書きを元に戻します。 var $j =…</head></html>

Google ドキュメントで作成したWEBフォームに問い合わせがあったら、内容をメール送信する機能を追加する

2014年4月25日追記: アップグレードされたGoogle フォームで自分宛てにメール送信するやり方の 記事を書きましたので、そちらを参照していただいたほうが良いかと思います。Googleドキュメントのスプレッドシートで、簡単に問い合わせフォームを作れる機能が…

夏だ!コワーキング体験イベントSendai Jelly!#01 + カレーに参加してきました

http://d.hatena.ne.jp/sendaiworkspace/20120717/1342481982 夏だ!コワーキング体験イベントSendai Jelly!#01 + カレー : ATNDに参加してきました。 参加者6名。 今回は、以前参加したカフェでのコワーキングほど交流はなかったですが、その分集中して作…

7/24オープンアワーresult

参加者2名。YQLでブログのRSSをJSONで取得して、新着として表示する - 仙台 Ruby Vim JavaScript社長とか、JavaScriptでごそごそやってました。午後から一雨来そうなので、早めに切り上げます。 お疲れ様でした。