YEOMAN開発環境をVagrant Ubuntu 14.04にセットアップ

YOEMANの開発環境をVagrantのUbuntu 14.04環境にセットアップする手順をまとめてみました。
改めてUbuntuへNodeをクリーンにインストールしてみると、なかなかベストプラクティスっぽいものが見つからず悩ましかったです。Vagrant使うのにnvm使うのも微妙な感じもしますしどうしたものか。

開発環境のセットアップ

新しい環境Ubuntu 14.04へのセットアップしてみます。

Vagrantで新しいUbuntuを用意
ポート9000をホストにフォワードするように設定を追加しています。

$ vagrant init ubuntu/trusty64
$ vim Vagrantfile
  config.vm.network "forwarded_port", guest: 9000, host: 9000
$ vagrant up
$ vagrant ssh

Ubuntuへのパッケージインストールについての公式ドキュメント Installing Node.js via package manager · joyent/node Wiki

$ curl -sL https://deb.nodesource.com/setup | sudo bash -
$ sudo apt-get install nodejs
$ node -v
v0.10.33
$ npm -v
1.4.28

注意: 普通に”apt-get update & apt-get install nodejs”とやるとnodeにパスが通らないので、公式のsetupシェルを利用する方が簡単です。

“YEOMAN開発環境をVagrant Ubuntu 14.04にセットアップ” の続きを読む

JsRender – jQueryとの組み合わせで使うテンプレートエンジン

jQueryをそのまま利用しているWebアプリでは、クライアント側のテンプレートエンジンはしばらくjQuery Templateを使っていましたが、いつのまにかjQueryのテンプレートエンジンはJsRenderというテンプレートエンジンに移行していました。

経緯は「Dancing with Data: jQuery Templates and JsViews: The Roadmap」に書いてあります。

Github: https://github.com/borismoore/jsrender

使い方はリファレンスに詳しい説明があるので、ここではJsRenderを使い始める手順についてデモのサンプルコード01_inserting-data.htmlを使って説明します。
“JsRender – jQueryとの組み合わせで使うテンプレートエンジン” の続きを読む

bootstrap-datepicker使い方まとめ

DatePickerコンポーネントは、Bootstrapの標準のJavascriptコンポーネントに含まれていませんので、DatePickerを使いたい場合はbootstrap-datepickerを追加する必要があります。
bootstrap-datepicker

bootstrap-datepickerはオリジナルのものと機能強化されたものがあるようですが、私は後者を使っています。

オリジナル: Datepicker for Bootstrap, from Twitter
上記の機能強化版:
Webサイト: bootstrap-datepicker — bootstrap-datepicker documentation
Github: https://github.com/eternicode/bootstrap-datepicker

“bootstrap-datepicker使い方まとめ” の続きを読む

JavascriptでURLをパースするには

jQueryに標準でパース関数があればいいのにと思うのだが無いので検索してみたら、良さそうなコードを見つけたのでメモ。
元ネタはこちら: Parsing URLs in JavaScript · A Beautiful Blog

[javascript]
function parseURL(url) {

var parser = document.createElement(‘a’),
searchObject = {},
queries, split, i;

// Let the browser do the work
parser.href = url;

// Convert query string to object
queries = parser.search.replace(/^\?/, ”).split(‘&’);
for( i = 0; i < queries.length; i++ ) {
split = queries[i].split(‘=’);
searchObject[split[0]] = split[1];
}

return {
protocol: parser.protocol,
host: parser.host,
hostname: parser.hostname,
port: parser.port,
pathname: parser.pathname,
search: parser.search,
searchObject: searchObject,
hash: parser.hash
};

}
[/javascript]

jQueryプラグインは、Purlなどいくつかあるようだが、プラグイン追加するほどでもないときに使えそう。

Bootstrap でオートコンプリート検索付きプルダウンリストを実装するには typeahead.js が便利

Bootstrapで、オートコンプリートで絞り込む検索ボックスを実装しようと思ってプラグインを探したところ typeahead.js がよく使われていそうな感じだったので試してみました。

先に説明用のコード全体を貼りました。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/typeahead.css">
  </head>
  <body>

  <div class="container">
    <div class="form-group">
      <label>Station</label>
      <input type="text" class="form-control">
    </div>
  </div>

  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/typeahead.bundle.min.js"></script>
  <script>
    var engine = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: [{ value: '東京' }, { value: '新宿' }, { value: '池袋' }, { value: '渋谷' }]
    });

    engine.initialize();

    $(':input').typeahead(null, {
      name:'stations',
      source: engine.ttAdapter()
    })
  </script>
  </body>
</html>

ブラウザで表示するとこんな感じです。

typeahead-example

  1. 必要なフィアルの読み込み

上記の例では、スタイルシートは css ディレクトリに、Javascriptは js ディレクトリに入れています。

typeahead 本体のjsは、Githubリポジトリ から取得した typeahead.bundle.js を js ディレクトリに置いています。

ところで、typeaheadのリポジトリにはなぜか、cssが含まれていません。
検索すると、Bootstrap3 用の typeahead.js のCSSはいくつか見つかるので、とりあえず hyspace / typeahead.js-bootstrap3.less を試しました。
typeahead.js-bootstrap3.less から typeahead.css を追加しています。

  1. テキストボックスに対して Typehead を有効にする
  $(':input').typeahead(null, {
    name:'stations',
    source: engine.ttAdapter()
  })

typehead の第1引数は、オプションを指定します。全部デフォルトの場合は null を指定しておきます。

第2引数は、データセット のオプションを指定します。

  • name: プルダウンのclass名に使われます。
  • displayKey: デフォルトでは、プルダウンオプションの値とラベルはどちらも value が使われますが、表示用フィールドを別にしたい場合は displayKey で指定できます。
  • source: 第1引数にtypeaheadを有効にしたテキストボックスに入力された文字列、題2引数にコールバックが渡される関数を指定します(例: examplesのThe Basic)。または、パッケージに含まれるスジェッションエンジン Bloodhound を利用することもできます。上記の例では Bloodhound を使っています。
  1. Bloodhoundを初期化

source に直接関数をしていするよりも、機能が豊富な Bloodhound を利用する方がおすすめです。

  var engine = new Bloodhound({
    datumTokenizer: function(d){ return d.value },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [{ value: '東京' }, { value: '新宿' }, { value: '池袋' }, { value: '渋谷' }]
  });

初期化のオプション
以下の項目を押さえれば後は、Githubのドキュメントやソースをみれば応用できると思います。

  • datumTokenizer: 必須です。Javascriptオブジェクトの配列(Datums)の各要素を引数に取り、検索対象のプロパティを返す関数を指定します。
  • queryTokenizer: 必須です。テキストボックスに入力された文字列を引数に取り、適当に文字列を分割した配列を返します。英語だと空白で分割してさらに絞り込みとかできますが、日本語だとあまり使えなさそう。
  • local: 最初に保持しておく、Datums
  • prefetch: 最初にAjaxでロードするDatums
  • remote: local または prefetch で最初に用意したデータで間に合わなくなった場合に、さらにAjaxでDatumsをロードする場合に指定します。

今回は、検索対象がデータベースで、それなりに量が多かったので、remoteを指定してサーバーから候補を取得するように実装しましたが、リクエストのタイミングも良きに計らってくれるのでとても便利です。

参考:
ちょっと古いのでscript側は使えませんが、サーバー再度まで含めた例が参考になります。
Bootstrap Auto Complete in php mysql | jQuery Auto Suggest

bootstrap3でアイコンを使う

Bootstrap3からアイコンがオプションになり、外部の Glyphicons を利用するようになりました。

Glyphicons png のみは無料で、ベクター形式のデータが有償になっています。

Bootstrap3とGlyphiconsを組み合わせて利用するには、glyphicons用のCSSを追加で指定します。

Bootstrap CDN を使用する場合は以下のlinkタグを追加します。
[html]
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
[/html]

これは嘘で、bootstrap-glyphicons.cssを追加しなくても使える。公式にそんな説明ないわけだ。

使い方は、http://getbootstrap.com/components/#glyphiconsで使用したいアイコンの値を確認しクラスに指定します。
[html]
<button class="btn btn-primary" name="add_member"><i class="glyphicon glyphicon-plus"></i> 追加</button>
[/html]
表示結果
glyphicon_glyphicon-plus

[bookmark] 50 Must-have plugins for extending Twitter Bootstrap

本当に使えるBootstrapプラグインがよくまとまってます。
50 Must-have plugins for extending Twitter Bootstrap

その他便利なプラグインも挙げておきます。

Bootstrap Growl
Alert をGrowlのようにフローティングで表示したいときに便利なプラグイン
WebSite | Github

Datepicker for Bootstrap bootstrap-datepicker.js

Bootstrapで日付フォームでカレンダーを表示したい場合にはこれを使えば間違いないです。
bootstrap-datepicker

input以外のボタンなどに適用する場合は、初期表示時の日付を指定する data-date 属性が必須になります。
例えば、今日の日付をセットする場合は、以下のようなHTMLとJavascriptの組み合わせになります(日付のフォーマットで利用しているのは、jquery-dateFormatです)。
[html gutter=”false”]
<button id="date-change-btn" class="btn small">Change</button>
[/html]
[javascript gutter=”false”]
$(‘#date-change-btn’).data(‘date’, $.format.date(new Date(), ‘yyyy-MM-dd’))
[/javascript]

GWT (Google Web Toolkit) 2.5.0 Hello World

1. ダウンロードサイトからgwtを入手する
https://code.google.com/p/google-web-toolkit/downloads/detail?name=gwt-2.5.0.zip
2. 解凍
[bash]
$ unzip gwt-2.5.1.zip
[/bash]
3. webAppCreatorを使ってプロジェクトを生成
[bash]
$ ./webAppCreator -out ../HelloWorldGWT com.example.HelloWorldGWT
[/bash]
以下のパラメータが必須

  • -out: 出力先ディレクトリ
  • プロジェクト名 “fully-qualified” java的なパッケージ名を指定する必要があります。

4. 開発モードで動作確認
GWTはJavaでコードを記述してJavascriptにコンパイルする開発ツールですが、毎回コンパイルしながら開発しなくても良いように開発用ツールが用意されています。まずは開発ツールを利用して動作を確認します。
[bash]
$ cd ../HelloWorldGWT/
$ ant devmode
[/bash]
開発ツール”GWT Development Mode”が開くので Development Mode タブで [Launch Default Browser]をクリックするか、[Copy Clip Board]をクリックしてURLをコピーしてブラウザのアドレスバーにペーストしてテストサーバーにアクセスできます。

この内容は本家サイトで確認できます。
http://www.gwtproject.org/gettingstarted.html

5. コンパイル
次にJavascriptにコンパイルして動作させてみます。
[bash]
$ ant war
[/bash]
生成された、HelloWorldGWT.warをTomcatやJettyにデプロイします。