AngularJS UI でtypeahead,ng-changeだと動かない

AngularJSでBootstrapを使う場合、UI Bootstrapを使うと便利だ。もともと、AngularUIと呼ばれていたが、AngularUIが幾つかのサブプロジェクトに別れ、Bootstrap関連はUI Bootstrapとなったようだ。

Bootstrapにはtypeaheadの機能があり、テキストボックスに文字を入力すると、これだろうと候補を上げてくれる、イケてる入力補助だ。今回これを使ってみた。

1. 営業担当の人をテキストボックスへ直接入力した時、typeaheadの機能で候補を選択させる。
2. typeaheadから入力したい候補を選択する。
3. 選択した候補のIDをID欄に表示する。

こんな機能を実現したい。
テキストボックスにはtypeahead、変更された事を検知して、営業担当からIDを選択、設定する。

UI Bootstrapではtypeaheadという属性が定義されているのでこれを使う。
変更された後の処理ではAngularJSのng-change属性を使う。

てっきり上記２点で大丈夫だと思っていたのだが、ハマってしまった。
ng-change属性が邪魔してtypeaheadが動かない。いろいろ調査した結果typeahead-editable="false"なる属性設定すると動いた。

 
<input class="inputSellName" type="text" name="inputSellNameForm" placeholder="営業" autocomplete="off" ng-model="project.sell.name" ng-change="changeId()" required typeahead="sell.name for sell in sells | filter:$viewValue " typeahead-editable="false">

こんな長い属性設定になってしまった。でもこの設定書いてる順番で動きが変わる。いいのだろうか。

.NET C#でのMVC

.NET C#でアプリを書いてみる。久しぶりに.NET C#を使った。
アーキテクチャとしてMVCを採用してみた。忘れないように。

 :Model

    public class Model
    {

        public int number = 0;
        public string message = "";

        public EventHandler toChange;

        public void addOne()
        {

            number = number + 1;
            message = "number has changed to " + number.ToString();

            toChange(this, null);
        }
    }

 :View

 
    public partial class Form1 : Form
    {
        public Model model;
        public Controller controller;

        public Form1()
        {
            InitializeComponent();
        }


        public void render(object sender, EventArgs e)
        {
            this.label1.Text = model.number.ToString();
            this.label2.Text = model.message;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            controller.addOne();
        }

    }

 :Controller

 
    public class Controller
    {
        public Model mode;
        public Form1 view;

        public void addOne()
        {

            mode.addOne();

        }
    }

 :Main

 
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);


            Form1 view = new Form1();
            Controller controller = new Controller();
            Model model = new Model();

            view.controller = controller;
            view.model = model;

            controller.view = view;
            controller.mode = model;

            model.toChange += new System.EventHandler(view.render);


            Application.Run(view);
        }

こんな感じで作ってみた。
最近Railsでの開発を行っているが、先人達が苦労して編み出した、アーキテクチャとかベストプラクティスとかは積極的に取り入れた方がいい。勉強するコストが掛かっても、それ以上のリターンがあると思う。

AngularJS + Bootstrap + Ruby on Rails

Ruby on Railsで開発を始めて2週間になる。正直言って生産性は高いのではないか。動くものがすぐ作れるのでいい。

フロントエンドをAngularJS、バックエンドをrailsで実装して、フロントーバック間はJSONフォーマットでデータのやり取りをする。こんなシステム構成で開発している。

フロントエンド側をAgularJSベースで開発する利点はリアルタイム、インタラクティブなWebシステムを作り易いことだ。MVCフレームワークなので、ブラウザ側で階層毎にユニットテストが行える。

加えてフロントエンド側にbootstrapを使えば、いい感じでデザインされたWebアプリができる。bootstrapはレスポンシブにも対応しているので、タブレットにも対応できる。

バックエンド側はRailsで実装しているが、ここはRestfulなAPIとしている。Railsを使う利点はこのRestfulなAPIが簡単に作れることだ。

モデルを作成して、それをリソースとして使うと宣言するだけで、GET,POSTなど主だったサービスができる。フロントエンド側ができていなくても、リクエストを発行できるツールなど（firefoxのプラグイン使っている)で動いているのが確認できる。

Rubyが分からないので手探りだけど、RSPEC等のテストフレームワークを使うことで、書いた部分を何度もテストできるので、よりよい書き方があればリファクタリングできる。この後で変えられるという安心感は大切だ。

オープンなフレームワークを使うことで、いいものを安価に開発できる環境はある。あとは何を作るのが大切だ。
例えると、なんか英語は喋れるようになったけど、伝える事がないみたいな感じかな。

twitter-bootstrap-railsでcannot load such file が発生

Railsでbootstrapを使うときtwitter-bootstrap-railsというパッケージを使うと便利だ。Gemfileファイルに

gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"

３つのパッケージを使用するように記述。gem "twitter-bootstrap-rails"だけだとエラーが発生する。

cannot load such file -- less
  (in ~/app/assets/stylesheets/bootstrap_and_overrides.css.less)
 

使用する際は上記サイトを良く読もう。読まないとハマってしまい、無駄に時間を使う。

AngularJS date filterで日付がずれる

AngularJSでDate Filterを使うと日付が一日ずれる。
例えば

{{ '2012-04-01' | date:'d MMM yyyy' }}　convert -> 31 Mar 2012

このように日付をフィルターした場合、UTCに変換され、前日の日付となってしまう。
この現象はバージョン1.1.2で修正されて、ローカルのタイムゾーンを使用するようになる。

しかしこれは今のところunstableなバージョンなので、アップデートしないで、保存時にUTC->JSTへ再変換することで対応した。

var date = new Date($scope.transDate);
date.setHours(date.getHours() + 9);
$scope.transDate = date;

AngularJSのバージョンアップ時に再度確認すること。

アジャイルサムライ読書会松山道場 #14

アジャイルサムライ読書会松山道場に参加した。
今回は、シトラス・スペース・カンパニーでの開催。シトラスさんには初めてお邪魔させてもらいましたが、いいところです。私はコーヒーを飲む方なので、コーヒーの美味しいお店は大歓迎。

今回は「第１１章、現場の状況を目に見えるようにする」。
アジャイルに限らず、混乱している現場ではまずここに手をつけるべき。以前は見える化にはツールを使っていたのだが、最近は付箋紙などに書いて壁に貼る、アナログ手法がいいのでは。

ツールで行っていると外部公開できるようにすれば、社外での閲覧も可能になり便利だが、アナログ方式だどPCやタブレットなどなくてもみる事ができる。見やすい事が大切だと思う。

しかし、手書きだと字が汚いし、漢字も忘れてしまって分かりずらいのだが、汚いのは味だ！、漢字が書けなければひらがなでいいだろ。
と開き直れるようになった。

用語の定義と確認も大切だ。同じ用語でも業界によって意味が変わってくることもあるから確認しよう。読んだことはないが、エリック・エヴァンスの「ドメイン駆動設計」がオススメみたいだ。

平日開催だったので、参加がちょっと少なかったし、メンバーの平均年齢がちょっと高かったようだ。

次回以降はアジャイルサムライの筆者が「問答無用で実践すべき」と思うテーマなので、興味があれば参加してみてください。

bundlerでNetwork error

Ruby on Railを使ってRestfulなサービスを作ろうとしている。
しかし今回も環境構築でハマってしまった。アプリの依存性をチェックして必要なパッケージをインストールしてくれるbundlerがエラーとなり動かない。

bundle install
Fetching source index from https://rubygems.org/
Resolving dependencies...
Network error while fetching
https://rubygems.org/quick/Marshal.4.8/rails-4.0.0.beta1.gemspec.rz

これもproxy環境での問題だ。どうもbundlerにはproxy設定ができないようなのでローカルにある情報でチェックさせる。

bundle install --local
Resolving dependencies...
Could not find gem 'rails (= 4.0.0.beta1) x86-mingw32' in the gems available on
this machine.

--localオプションをつけるといいそうです。

rails new foo --skip-bundle

作成時必ずエラーとなってしまうので、スキップしよう。