はてなブックマーク

概要 Angularの標準のdirectiveであるng-clickに、返り値がpromiseの場合に解決されるまでクリックを防止する機能を付けてみました (ボタンを押したら1秒間クリックが無効化されるデモ)。 とても簡単に実装できるのでちょっと紹介してみます。 実装 とりあえず元の実装を見てみましょう(githubのソース)。 // 以下compile部分のみ抜き出し compile: function($element, attr) { // 具体的なdirectiveNameは"ngClick"でng-click="hoge()"のhoge()部分を関数としてパースする var fn = $parse(attr[directiveName], /* interceptorFn */ null, /* expensiveChecks */ true); return function

こんにちわ。ワカルでは、サービスの運営などにAmazon Web Serviceを利用しています。 先日、インスタンスは正常なのに、ELBのヘルスチェックがうまく動かなくなる現象に遭遇しました。 結果的に、ELBを同じ構成で作りなおしたところ直ったのですが、根本的な原因がわからないままなので、ログとして残しておこうと思います。 もし原因がわかったら追記します。 起こったこと 今回問題が起こった構成は、以下のようなものです。 WebからのリクエストをELBでEC2インスタンス上のNginxに渡し、Nginxのリバースプロキシで、静的ファイル以外を Node.jsのアプリに振り分けます。 この構成で構築後３日ほどすると、サーバーへのリクエストが504(Gateway Timeout) を返すようになりました。 そしてしばらくすると、ヘルスチェックがOut of Service になり時間が経つ

テストサーバー運用意外と手間かかる問題 ワカルでは、自社サービスを行うかたわら、お客様のWebサイト改善のお手伝いを行っています。 外部のミーティングでお客様にサイトなどの制作物を見ていただくなどのシーンも多く、認証付きで公開できるテストサーバーを運用しています。 しかし、プロジェクトごとにテストサーバーを構成するのはなかなかのコストでした。 そこでワカルでは、GitHubリポジトリと連携し、 テスト環境の自動デプロイ テストサーバーの追加の自動化 といったことを行っています。 今回は自動化していった手順をご紹介したいと思います。 流行りの仮想化とかとはまた違う地道なお話です。 利用したサービス、ミドルウェア 利用した環境は以下のとおりです。 ソースコード管理: github インフラ: Amazon EC2, Route53, ELB ミドルウェア関係: Apache, PHP, MyS

３行で言うと herokuが作ってる prmd を使って、JSON SchemaからAPIドキュメントを出力したよ！ スキーマ定義から、GoのAPI実装コードも出力するツールを作ったらめっちゃ捗るよ！ Goのバリデーション用のライブラリも作ったよ！ 今回作ったものの概要とサンプルコード 概要 以前から、APIを開発する上で、以下のようなことが課題となっていました。 そもそもドキュメント書くのがつらい それもあって、ドキュメントより先にコードが変わってしまう ドキュメントと実装の状況の違いが把握しづらい また、ロジックがそんなに複雑ではないAPIでは、実装の作業は リクエストデータのバリデーション 出力データの整形 (フィルタリング) の２つの作業が大きな割合を占めます。 APIの定義ファイルからドキュメントと、バリデーションや出力データ整形のコードを自動生成できれば、大幅に効率が上がると思

AngularJSのformディレクティブは強力なバリデーション機能を提供します。 以下は基本的な使用例です。 <form name="form"><!-- 1 --> <input type="text" name="firstName" ng-model="user.firstName" required><!-- 2 --> <span ng-show="form.firstName.$error.required">何も入力されていません。</span><!-- 3 --> <button ng-disabled="foo.$invalid" ng-click="submit()">submit</button><!-- 4 --> </form> 番号ごとに説明すると formのname属性を設定します。ここではname="form"としています。 formのプロパティからfor

こんにちわ、kyohです。 昨日会社のそばに引っ越して、今日から自転車通勤に切り替えましたが、さすがに暑いですね。 気づけば８月ですものね、ジーンズが張り付いてエラいコトです。 課題管理に限界を感じて さて、Waculではみんなだいすき GitHub で開発作業の管理をしています。 しかし、GitHub の issues は、問題を簡潔に管理することに特化しており、進捗管理や状態管理には向いていません。 こと問題を俯瞰する立場の人から「わかりづらい」と苦情が度々ありました。 Google Docs での管理も考えましたが、GitHub と Docsの二重管理になってしまうこと、Docs では自由度が高すぎてやりたいことがぼやけてしまうことなどもあって、限界を感じていました。 そこで、流行りのかんばん方式でもやってみるか、と Trello に手を出すに至ります。 管理ツールの有名ドコロでは

あなたは突然AngularJSでCORSでxhrな通信を行いたくなりました。 通信時に独自のヘッダーを付けたいのでpostMessageを使う必要がありましたが、 すでに$http、$resourceサービスを使った結構な量のソースコードがあります。 これを修正するのは骨が折れそうな作業です。 しかし、心配は無用です。 このような場合$provide.decoratorが強力な武器となってくれます。 $provide.decoratorを使うことで、すでに書いたソースコードに触れることなく対象のサービスの挙動を変更することができます。 本記事では、まず$provide.decoratorの概要と簡単なチュートリアルについて説明し、 次に$httpBackendを置き換えてpostMessageを使ったxhr通信を行う方法を紹介します。 $provide.decoratorの概要 $prov

こんにちわ。最近業務でGoを書いているのですが、3,4週間たち、だいぶ環境にも慣れてきたので、これからGoを初めようと思っている人向けにTipsを書きたいと思います。 間違いや改善点などあれば、 @tutuming まで教えていただけると大変ありがたいです。 インストール と設定 (OSX) http://golang.org/dl/ から、インストーラー (go1.3.1.darwin-amd64-osx10.8.pkg など) を選んで最新版をインストールしたら大丈夫です。自分の環境にあわせたインストーラ選んでください。 homebrewを使っている人は でもインストールできます。 $GOPATH とプロジェクトの作り方 Go のパッケージ管理には、 go get コマンドを使います。 go get github.com/aaa/bbb とすると、 github.com/aaa/bbb

こんにちは、wacul開発メンバーの kyoh です。 WWDC2014でSwiftが発表された時、 恋に落ちる音を聞いた気がします。 さて、今日は、最近iPadアプリの開発中に遭遇した不可解な事象と、その解決方法について書いてみようと思います。 UITableView の狭き門、険しい道 iOSアプリといえば凡そ避けることのできない「UITableView」ですが、一癖も二癖もあるそれに悩まされるのはiOS開発の登竜門となっているようです。 今回私も、そんな登竜門の狭い門柱に引っかかって苦しめられました。 謎の隙間が発生する UITableViewController ベースの画面を作り、UINavigationControll に push した時のことです。 表示された画面には、ナビゲーションバーとセクションヘッダとの間に、意図しない隙間が表示されていました。 正体不明！ REVEA

イベント処理の憂鬱とbacon.js 業務でちょっとしたお絵かきツールをjsで作る機会がありました。 マウスのイベントを拾ってcanvasに描画する、それだけの処理なのですが、イベントのハンドリングとペンの状態などが絡むと、結構メンテがしづらいソースになってしまいます。 これを綺麗に書く方法はないか、調べている中で、bacon.js というライブラリを見つけました。試してみたところなかなか良さそうだったのでご紹介します。 bacon.js はFRP(Functional Reactive programmer) という概念をjsで実装したもので、僕なりの理解だと、 変化するイベントや値 (EventStream, Property) をオブジェクトとして扱うことができる イベントや値の間に関係を持たせることができる 例: b = a + 1 元の値が変わると、関係する値も自動的に更新される

こんにちわ。いまワカルでは、美容院向けのiPadアプリ “clulu” を開発中です。 テストも一旦終了し、最初のバージョンをApp Storeに申請したところです。 美容院では、お客様の予約管理を紙で行っているところがほとんどです。cluluは、そんな紙での管理方法から極力インターフェースを変えることなく、予約管理をiPadで行えるシステムです。また管理された情報を元に、リアルタイムに空き枠を検索・予約できるフォームを自分の美容院のホームページに設置できます。 サービスの詳細については、リリース後詳しくお伝えするとして、今回はiPad版開発で使った、 RubyMotion について書きたいと思います。 なぜ RubyMotion を選んだか iOSアプリ開発環境にはおおまかに ObjectiveC(Xcode) RubyMotion Titanium, PhoneGap等、HTML,JS

こんにちわ。いまワカルでは、美容院向けのiPadアプリ “clulu” を開発中です。 テストも一旦終了し、最初のバージョンをApp Storeに申請したところです。 美容院では、お客様の予約管理を紙で行っているところがほとんどです。cluluは、そんな紙での管理方法から極力インターフェースを変えることなく、予約管理をiPadで行えるシステムです。また管理された情報を元に、リアルタイムに空き枠を検索・予約できるフォームを自分の美容院のホームページに設置できます。 サービスの詳細については、リリース後詳しくお伝えするとして、今回はiPad版開発で使った、 RubyMotion について書きたいと思います。 なぜ RubyMotion を選んだか iOSアプリ開発環境にはおおまかに ObjectiveC(Xcode) RubyMotion Titanium, PhoneGap等、HTML,JS