OmniAICreator/Qiita-1.07M huggingface dataset:
RedmineのWikiでUMLを記述する方法

RedmineのWikiにシーケンス図やユースケースなどのUMLを記述する方法について説明する。

#前提
・JAVAが動くこと
・Redmineが動作すること
　Apache2でRedmineが動いていたものとする

#手順
１.PlantUMLを下記よりダウンロードして任意のフォルダにおく
http://plantuml.sourceforge.net/download.html

この例では下記に配置したものとする.
　/share/plantuml.jar

２. ラッパー用のシェルスクリプトを記述する。
　この例では/usr/bin/plantuml に記述するものとする。

```
#!/bin/bash
/usr/bin/java -Djava.io.tmpdir=/var/tmp -jar /share/plantuml.jar ${@}
```

３.  Redmine用のプラグインを下記からダウンロードする
https://github.com/cdwertmann/wiki_external_filter

４. 3のファイルをRedmineのpluginsフォルダにコピーする。
フォルダ名はwiki_external_filterとする。
ダウンロードした際のデフォルトのフォルダ名はwiki_external_filter_masterになっているので、名前を修正しておく。

保存先の例
/var/lib/redmine/plugins/wiki_external_filter

５. plugin_assetsフォルダに書き込み権限を与える。
　/var/lib/redmine/public/plugin_assets/

例：
chmod go+w /var/lib/redmine/public/plugin_assets/

６. 解凍したディレクトリに存在するconfig/wiki_external_filter.yml を redmineのconfigにコピーする。
　例：
　　/var/lib/redmine/config

７. wiki_external_filter.ymlのplantumlにおけるパスを適切に指定する。
（この例だと修正不要のはず）


８. apache2の起動時のlocaleをutf-8とする。
　これを怠ると、日本語が適切に表示されなくなる。

　/etc/apache2/envvars　の下記を修正
　export LANG=ja_JP.UTF-8
　
　なお、下記の戻り値がUTF-8ならば日本語が使えるようになる。
　Encoding.find("locale")

９. apache2を再起動

１０.redmineの管理メニューより、キャッシュの保持時間を指定する。
　　デフォルトは０であるが、この場合は、キャッシュを保持せず画像が絶対に表示されない。

　　管理＞プラグイン＞Wiki External Filter Plugin　の設定

　　「Cache expiration time 」に十分大きな数値を入力
![b0232065_03141636.png](https://qiita-image-store.s3.amazonaws.com/0/47856/5eae8eeb-0b82-54ae-7467-969e3928628a.png)

１１. 下記のような文章をWikiに記述する

```
{{plantuml
ジョニー-> ジャック: 求愛
ジャック-> サラ: 求愛
サラ->ジョニー: 求愛
}}
```

![b0232065_03143326.png](https://qiita-image-store.s3.amazonaws.com/0/47856/4e1dfdb0-17d5-43e4-1bb6-db08f6164987.png)

#その他メモ
・下記のページに一般的なRedmineのプラグインのインストール方法が記載されている。
http://www.redmine.org/projects/redmine/wiki/Plugins

・正常にプラグインが動作しない場合、ログを出力してデバッグするといい。
必要な箇所に以下のようなコードを挿入する。

```rb
Rails.logger.info "executing command: #{out['command']}"
```

その結果、以下のようなファイルにログが出力される。
/var/lib/redmine/log/production.log
AngularJSのカスタムバリデーションをモジュールに登録して使いまわす方法

カスタムバリデーションのオブジェクトを、validationUtilsに集約して、使用するアプリケーションごとにディレクティブに登録すると便利なんじゃないかと思ったので、とりあえず書いてみました。

以下コード。

簡単にコピペで試せるように一つのHTMLにまとめてあります。

```html:ajs.confirm.html
<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8" /></head>
<body>
<div ng-app="app" ng-controller="confirmCtrl">
<form name="form" novalidate>
  <div>
    <input type="text" ng-model="target" name="target" />
    <input type="text" ng-model="targetConfirm" name="targetConfirm"
      confirm="target"
    />
  </div>
  <p ng-show="form.targetConfirm.$error.confirm">password confirmation invalid</p>
  <button ng-disable="form.$invalid">button</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script>
// commonUI.js
angular.module('commonUI',[]).
factory('validationUtils',[function(){
  return {
    confirm : {
      require : 'ngModel',
      scope : false,
      link : function(scope,elm,attr,ctrl){
        var confirm = function (viewValue) {
          var form = 'form';
          if(elm.length){
            form = elm[0].form.name;
          }else if(elm.context){
            form = elm.context.form.name;
          }
          var valid = viewValue != scope[form][attr.confirm].$viewValue;
          ctrl.$setValidity('confirm', !valid);
          if(!valid){ return viewValue; }
        };
        ctrl.$parsers.unshift(confirm);
        ctrl.$formatters.unshift(confirm);
      }
    }
  };
}]);
</script>

<script>
// app.js
var app = angular.module('app', ['commonUI']);
app.controller('confirmCtrl',['$scope',function ($scope) {
  $scope.target = 'abcd';
  $scope.targetConfirm = 'abcd';
}]);
app.directive('confirm',['validationUtils',function(validationUtils){
   return validationUtils.confirm;
}]);
</script>
</body></html>
```
プロキシ経由でFacebookログインを実装する時の注意

リバースプロキシ経由でWebサーバにつなぐような構成の場合
Facebookインスタンス生成時にtrustForwardedをtrueにする必要があります

<pre>
$facebook = new Facebook(array(
   'appId'  => 'xxxx',
   'secret' => 'xxxxxxxxxxxxxxxxxxxxxxxx',
   'allowSignedRequest' => false,
   'trustForwarded' => true
));
</pre>

リクエスト上のドメインが登録済みのものであっても、プロキシ経由でtrustForwardedがfalseになっていると、<code>$_SERVER['HTTP_X_FORWARDED_HOST']</code>ではなく<code>$_SERVER['HTTP_HOST']</code>を見に行ってしまい、リダイレクトURIのチェックでエラーになってしまいます
<pre>An active access token must be used to query information about the current user.</pre>

通常、リダイレクト先のドメインが登録されていないと
以下のような画面が表示されるため、解決するのに非常に苦労しました。
<pre>指定されたURLは、アプリケーションの設定で許可されていません。: 指定されたURLの中にアプリの設定で認められないものが含まれています。ウェブサイトまたはキャンバスのURLと一致しているか、ドメインがアプリのドメインのサブドメインである必要があります。</pre>
続きを読む機能実装

ブログやホームページなどで必ず必要になってくる続きを読む機能を実装してみました。

```php:index.php
<?php
//データベースに接続する
$dsn="mysql:dbname=test;host=localhost;charset=utf8";
$user="root";
$pass="root";
try{
  $pdo=new PDO($dsn,$user,$pass);
}catch(Exception $e){
  echo 'error' .$e->getMesseage;
  die();
}
//エラーがあった場合に知らせてくれる
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
//DBからデータを取得するSQL文を発行する
$sql="SELECT * FROM post";
$stmt=$pdo->query($sql);
$post=$stmt->fetchAll();
?>
```
これで接続と取得が終わりました。
次に表示するviewの部分です。

```html:index_view.php
<div class="post cf">
  <h2><?php echo $post['title'] ?></h2>
  <!-- mb_strimwidthは文字数を制限してくれます。第1引数で制限する文字列を指定します。第2引数で制限する文字列のスタート位置を指定します。第3引数では制限した後に表示するものを指定します。例えば・・・とか...とか続きを読むとかです。僕の場合は何も出力したくないので空欄にしてあります。第4引数で文字コードを指定してあります。 -->
  <p><?php echo mb_strimwidth($post['content'],0,50,'',utf8); ?></p>
  <!-- 続きを読むを内容の全文を表示するファイルのリンクにします。 -->
  <a href="single.php?no=<?php echo $post['no'] ?>">続きを読む</a>
</div>
```
viewのこの部分だけで続きを読む機能が実装できます。
これで見事続きを読む機能が実装できました。

今回の重要な関数mb_strimwidth関数
=
mb_strimwidthは、文字列を第2引数で指定した文字数にを加工してくれる関数。

素朴な疑問
=
SQL文で文字数を制限してデータを取得できないものかな？
できればリンクの1文ですむんだけど・・・

追記
=
SELECTで直接文字数を指定して持ってくる。
コメントを参考にさせていただいたのとやっと理解することができました。

```sql:select.sql
--これでphpでmb_strimwidthなんてものを使わなくてよくなった。asで名前を指定しておかないとLEFT()までがコンテンツ名になってしまうので指定しておこう。
SELECT * , LEFT(content,50) as con FROM post;
```
CentOS7+rails4のdockerイメージ作った(750.1 MB,rails4.1.4,ruby2.0)

# 起動方法

```bash:
docker run -i -t tukiyo3/centos7-ja-rails4-ruby2.0 /bin/bash
```

# 作成手順

```bash:docker起動
docker run -it tukiyo3/centos-ja:7.0 /bin/bash
```

```bash:railsをビルドするために必要なライブラリ
yum install -y openssl-devel \
  git wget unzip which mercurial tar gcc gcc-c++ \
  patch libyaml-devel libffi-devel readline-devel \
  zlib-devel automake libtool bison bzip2 \
  mysql-server sqlite-devel ruby ruby-devel
yum clean all
```

```bash:railsをインストール
gem install bundler rails --no-ri --no-rdoc
```
RuboCop | Style/MethodDefParentheses

# RuboCop | Style/MethodDefParentheses

## 概要

RuboCopの「Style/MethodDefParentheses」警告について。

メソッド宣言時の引数指定部に括弧が必要かどうかをチェックします。
デフォルトでは括弧が必要です。

### 設定値一覧

|設定対象|設定値|内容|デフォルト|
|:-----|:---|:---|:---:|
|EnforcedStyle|require_parentheses|括弧が必要|○|
|EnforcedStyle|require_no_parentheses|括弧が不要|--|

## MethodDefParentheses

各設定値での検証結果をまとめます。

### 検証プログラム

non_nil_check.rb

~~~ruby
def hoge msg
  puts msg
end

def hige(msg)
  puts msg
end
~~~

### 実行結果 デフォルト の場合

.rubocop.yml

~~~yaml
MethodDefParentheses:
  EnforcedStyle: require_parentheses
~~~

~~~bash
$ rubocop method_def_parentheses.rb
Inspecting 1 file
C

Offenses:

method_def_parentheses.rb:1:10: C: Use def with parentheses when there are parameters.
def hoge msg
         ^^^

1 file inspected, 1 offense detected
~~~

### 実行結果 require_no_parentheses に設定します

.rubocop.yml

~~~yaml
MethodDefParentheses:
  EnforcedStyle: require_no_parentheses
~~~

~~~bash
$ rubocop method_def_parentheses.rb
Inspecting 1 file
C

Offenses:

method_def_parentheses.rb:5:9: C: Use def without parentheses.
def hige(msg)
        ^^^^^

1 file inspected, 1 offense detected
~~~

## 補足

この警告は rubocop -a で修正可能です。

## RuboCopまとめ記事

http://qiita.com/tbpgr/items/edbfecb6a6789dd54f47
【セミナー】天下一クライアントサイドJS MV*フレームワーク武道会

![](https://connpass-tokyo.s3.amazonaws.com/thumbs/1e/df/1edfed4d5ea15c72ac65b5cd159847cf.png)

##タイムテーブル
19:00-19:30 (30min) | 開場
19:30-21:00 (90min) | LT大会 (5min*10)
21:00-22:00 (60min) |   懇親会 + パネルディスカッション

###LT
chaplin.jsの話 (@mizchi)
vue.jsの話 (@kazupon)
ripple.js(とcomponent関連)の話 (@tajima_ｊ)
knockoutjsの話 (@tenntenn)
marionette.jsの話 (@koba04)
「marionetteからractiveへ、そしてXXXへ」 (@lxyuma)
angulardartの話 (@nyamadandan)
デザイナから見たangularjsの話 (@silver_s)
React + Fluxの話 (@dsuket)
Omの話 (@tfukushima)

---

###vue.js
* とってもシンプル
* 処理が早そう
* MVC
* 計量
* プラグインがいいっぽい

---

###ripple.js
* プラグインを使って使う感じ
* ドキュメントが少ない
* よく分からない

---

###knockoutjs
* 双方向バインド
* cssバインド / ifバインド
* カスタムバインド
* 他のフレームワークと使える
* 独自タグを使ってない
 * data-bind属性がコメント
* 可読性が微妙かも 
* elseがない

---

###marionette.js
* backboenっぽい？
* 大規模向け？
* 可読性が良い
+ SPAに適している

---

###ractive.js
* MVVM系
* 簡易版Angular
* 学習コストが低い
* オワコンっぽい

---

###angulardart
* Dart googleが作った言語
* オンラインでwebGL

---

###angularjs
* MVW
* 幅広い
* 単品でいい感じ
* htmlでいい感じに書ける
* エンジニアじゃなくてもできそう
* ViweとControllerはデザインでもできそう
* ngAnimateとngClassが楽しい

[angular X designer - デザイナからみたAngularJS](http://www.slideshare.net/ofsilvers/angular-x-designer)

---

###react
* instagramで使ってる
* 値が動的

```sample
var a = 1;
var b = a + 1;
a = 10;
console.log(b); // ← 11 

```

* とてもシンプル
* Angularのdirectiveっぽい

---

###Om
* 分からん


##気になったこと
* Segment.io
* logic-less template
* shadowDom
【WordPress】カスタム投稿タイプの作成方法


WordPressを使っていて大活躍するのが、カスタム投稿タイプ。  
独自の投稿タイプを作成できるので、とても便利。  
作成はfunctions.php内にコードを追加する。

```functions.php
// カスタム投稿タイプの追加
function custom_post(){
	$labels = array("name" => "表示タイトル");

	$args = array(
		'labels' => $labels,
		'public' => false,
		'publicly_queryable' => true,
		'show_ui' => true,
		'query_var' => true,
		'rewrite' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'menu_position' => 5,
		'supports' => array('title','slug','thumbnail','editor','excerpt'),
		'has_archive' => true
	);
	register_post_type('任意のpost_type名',$args);
}
add_action("init","custom_post");
```

詳しい設定方法などは、codexに書いてある。

- [関数リファレンス/register post type](http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type)
天下一クライアントサイドJS MV*フレームワーク武道会に行ってきた。

[天下一クライアントサイドJS MV*フレームワーク武道会](http://connpass.com/event/6910/) に参加してきたので、共有。Webアプリケーションを作るときのクライアント層に何を使えばいいか、その答えがあるかも！

# [chaplinjs](http://chaplinjs.org/)
![http://docs.chaplinjs.org/](http://chaplinjs.org/images/chaplin-lifecycle.png)
Rails風の設計でSingle Page Appicationを組める。
Routerがある。
Scaffoldingができる。ファイルがたくさん生成される。
多くのオブジェクトがシングルトンになっているので、テストしにくい。

# [Vue.js](http://vuejs.org/)
![](http://vuejs.org/images/logo.png)
シンプル。MustacheテンプレートのHTMLとJSONで動作する。
早い。
ライブラリ感覚で使える。

# [ripple.js](http://ripplejs.github.io/)
reactiveなviewを提供する軽量フレームワーク
[react](http://facebook.github.io/react/)によく似てる。
Pluginを使わないとあんまり機能がない。
0.4から0.5でAPIが非互換。
ドキュメントが少ない。

# [knockoutjs](http://knockoutjs.com/)
![http://knockoutjs.com/](http://knockoutjs.com/img/ko-logo.png)
いろいろなView-Modelデータバインドがある。カスタマイズがある。
数十万行のJSとともに使用された実績がある。
提供しているのはバインドだけで軽量なので、他のフレームワークと共に使いやすい。
部分部分で使うこともやりやすい。
独自タグを使っていない。
バインドする量が多いと重くなる。

# [marionettejs](http://marionettejs.com/)
![http://marionettejs.com/](http://marionettejs.com/images/marionette_logo-4eeb07e5.png)
Backbone.jsを大規模用に拡張した様な感じ。
実績が多い。
コードやドキュメントが読みやすい。
JavaScriptが主戦場。

# [ractive.js](http://www.ractivejs.org/)
簡易版Angular.js
シンプル。学習コストが低い。
Viewをractive.js、その他をBackborn.jsで書くことができる。
ハマりにくい。
ユーザはまだ少ない。（下降傾向？）
Vue.jsに影響を与えた。

# [angulardart](https://github.com/angular/angular.dart)
![](https://docs.angulardart.org/static/angulardart-logo.png)
[Angular.js](https://angularjs.org/)を[Dart](https://www.dartlang.org/)に移植したもの。
WebComponentsを使っている。
[Polymer](http://www.polymer-project.org/)に抜かれそう。

# [AngularJS](https://angularjs.org/)
![](https://angularjs.org/img/AngularJS-large.png)
AngularJSはデザイナでも使える！
ModelとControllerが疎結合なので、分業しやすい。
フルスタック。幅広く面倒を見てくれる。
ngClick, ngTouch, ngAnimate, ngClassで表現が増える。
デザイナにはBackboneよりAngularJSの方が評判がいい。
1、2日でView,Controllerは使えるようになった。
ngAnimateは楽しい。

# [React](http://facebook.github.io/react/)
ReactはInstagramでも使われているフレームワーク。
性能がいい。

# [Om](https://github.com/swannodette/om)
Undoができる！（[サンプル](http://jackschaedler.github.io/goya/)）
シンプルで良い。
Java8のStreamを使ってみる

Java8ではラムダ式やインターフェースのデフォルト値等かなり仕様が変更/追加されました。今回はその中の一つである *Stream* とやらを使ったプロパティファイルリーダーを組んでみたいと思います。

#まずStreamってなんぞや
Streamというのは、従来配列や`List`等で表現されていた複数のオブジェクトの集合体に対する操作を分かりやすく記述出来るようにするツールと言えます。

#簡単な使い方
Stream オブジェクトを取得するには`stream()`メソッドを用います。これはJava8であればあれば便利と思われる場所には付いています。

```java
Stream<String> s = Stream.of("a", "b", "c");
s.forEach(x -> {
    System.out.println(x);
});
```
これは文字列のリストからStreamを生成し、順に表示させた例です。中にある見慣れない`x -> {`という構文は *ラムダ式* と呼ばれるJava8でStreamと同じく追加された新機能です。
ここで`forEach`というメソッドが登場しました。これは名前の通り引数に指定された処理を順に適用していくメソッドで、従来の拡張forに相当します。
このように、Streamを利用することで流れ作業のようにオブジェクトを処理することが出来るようになり、コードが見やすくなります。

#実際のコード
実際にStreamを利用したプロパティファイルリーダーのコードを見てみましょう。次のようになります。

```java:PropertyReader.java
package xyz.n6g;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.IOException;
import java.util.Map;
import java.util.stream.Collectors;

public class PropertyReader {

	private File file;
	private Map<String, String> props = null;

	public PropertyReader(String par1FileName) {
		this(new File(par1FileName));
	}

	public PropertyReader(File par1File) {
		this.file = par1File;
		load();
	}

	public String get(String par1Key) {
		return props.get(par1Key);
	}

	public void load() {
		try(BufferedReader br = new BufferedReader(new FileReader(this.file))) {
			props = br.lines().filter(x -> {
				return x.matches("(\\w+)\\s*=\\s*(.+)$");
			}).collect(
					Collectors.toMap(x -> {
						return ((String)x).split("=")[0].trim();
					}, x -> {
						return ((String)x).split("=")[1].trim();
					})
			);
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e1) {
			e1.printStackTrace();
		}
	}

	public void show() {
		System.out.println(props);
	}
}
```

流れを追うこと自体は難しく無いと思います。`load`メソッドについて見て行きましょう。

まず冒頭の`try-with-resource`で`BufferedReader`を生成しています。
次に、`br.lines()`というメソッドからの一連の流れが見えます。これは`BufferedReader`からStreamを取得し、そのStreamに対して処理を施して最終的に`Map`に落としこんでいます。

まず`br.lines()`で行ごとに切り分けられたStreamを取得し、次に`filter`というメソッドにラムダ式を渡しています。これはメソッド名の通り「引数に与えられた判定ロジックの結果から値を取捨選択するメソッド」です。ここでは正規表現で`aaa = bbb`のような形式の文字列のみを読むように指定しています。
次に、`collect`というメソッドを呼び出しています。これは「Streamで流れてきたオブジェクトをそれぞれ引数に与えられた"コレクター"に渡し、特定の形式に落としこむメソッド」です。ここでは、標準で用意されている`Collectors.toMap`を利用しています。ここで更に指定しているラムダ式は2つあり、それぞれマップのキーと値に相当しています。つまりこの場合だと「=で切り分けた0番目をキーに、1番目を値にし、それぞれの前後に存在する空白を削除する」という処理をしています。
ここで切り分けられて`Map`に落とし込まれたものが最終的な返り値となり、`props`フィールドに格納されます。

#終わりに
Streamは今までの繰り返し処理の大半を綺麗に書きなおすことが出来ると思います。これを機会に学習してみて下さい。
また、Qiita初投稿だったので体裁なども見苦しい点があるとは思いますが見逃してやって下さい(
スマホでideoneの編集を安全に行う


- 以下はISW13HTでのスクショですが、iOSでも可能です。
  - 移動中に電池切れになったので電気屋のiPhoneで仕上げしたんですよね…w
- yhpg答案のコードですが、気にしないこと。

----

このコード編集したいなぁ。

![Screenshot_2014-07-11-20-25-35.png](https://qiita-image-store.s3.amazonaws.com/0/29692/c83f8873-1aaa-3b00-1843-955f7d1c1baa.png "Screenshot_2014-07-11-20-25-35.png")

あれ、真っ白になっちゃいました。

![Screenshot_2014-07-11-20-28-34.png](https://qiita-image-store.s3.amazonaws.com/0/29692/fef6bc91-043d-538e-bc75-0f9dd53d128b.png "Screenshot_2014-07-11-20-28-34.png")

そんな時は、慌てずに、「syntax highlight」のチェックを外しましょう。

![Screenshot_2014-07-11-20-29-06.png](https://qiita-image-store.s3.amazonaws.com/0/29692/4643df34-9a67-77a6-d814-98c7a543e7a2.png "Screenshot_2014-07-11-20-29-06.png")

あとはideone it!を押せば、編集後のコードが実行されます。
ELMAHに手動で例外を記録する

例外は補足したいけどログには記録したい時に。コントローラの中で以下のように呼び出します。

```csharp
Elmah.ErrorSignal.FromCurrentContext().Raise(exception);
```

参考：

- https://code.google.com/p/elmah/wiki/DotNetSlackersArticle#Signaling_errors
- https://code.google.com/p/elmah/source/browse/src/Elmah/ErrorSignal.cs
XcodeでBundle Resourcesを更新しても反映されない場合の対処法


## 問題点

iOS開発をしていて、Bundle Resourcesに登録されているファイルを更新したり、追加して、実機やシミュレーターで実行してみても、リソースが上手く更新されないことがままあります。

例えば、画像を差し替えたのに古い状態の物が使われたり、追加したのにも関わらず、更新されずに参照時に落ちてしまうなどということが良く起こって、非常に煩わしい。

`Clean Build Folder`で生成物を全て消して、再ビルドをかけるとちゃんと反映されるんだけど、毎回再ビルドかけるのは大変なので、なにか良い対処法はないかなあと思っていた。

## 対処法

Stackoverflowに良さそうな情報が書いてありました。

[ios - Resource files not updating with Xcode 5 - Stack Overflow](http://stackoverflow.com/questions/19124083/resource-files-not-updating-with-xcode-5)

どうやら、ビルド時にフックして、Resource以下をtouchしてやれば良いらしい。

```
$ touch -cm ${SRCROOT}/../../YourResourceFolder
```

## Run Scriptを追加する

Stackoverflowに書いてある方法と若干手順が違っているので注意

### 1. `Target > Build Phase`左上の+ボタンを押す
### 2. New Run Build Script Phaseを押し、Run Scriptを追加

![Screen Shot 2014-07-11 at 19.55.40 .jpg](https://qiita-image-store.s3.amazonaws.com/0/10009/1c553463-4079-3d4d-e4e1-028dec6b3299.jpeg "Screen Shot 2014-07-11 at 19.55.40 .jpg")


### 3. Run Script Phaseを以下のように設定する
![Screen Shot 2014-07-11 at 19.55.51 .jpg](https://qiita-image-store.s3.amazonaws.com/0/10009/f2c85f47-9736-bd89-3c7c-257ddc0ef0a1.jpeg "Screen Shot 2014-07-11 at 19.55.51 .jpg")

環境変数`$SRCROOT`はxcodeprojが置いてあるパスで、そこからの相対位置を指定することになる。

今回はcocos2d-xのプロジェクトに設定したため、以下のような階層構造となった。

Stackoverflowに書かれていたように設定すると、`Resources`以下に再帰的にディレクトリがあったときに上手く反映してくれなかったので、代わりにzshを使って`*`で指定している。


## まとめ

これでビルドする度に自動的にリソースが更新されるようになってイライラしなくなった。もっと早く知りたい知見だった。
[Groovy]モールス信号を実装！

Groovyでモールス信号を実装しました！
コレで遭難した時も安心です。
音も出したかったんですがとりあえず表示のみということで。

基本的にASCII文字（より少ない。アンダーバーとかは無し）のみ扱えます。
各文字の区切りはスペースです。
また、実際に表示される文字（モールス信号からの複合）にスペースを利用したい場合は、それもスペースです。
下記のソースの最後のassertから抜粋するとこんなかんじです。

```groovy
assert toString('.- -...') == "AB"
assert toString('.-  -...') == "A B"
```

全コードは以下。

```groovy
def charSep = ' '
def wordSep = charSep * 2
def morseCodeDatabase = [
' ':' ',
'A':'.-',
'J':'.---',
'S':'...',
'B':'-...',
'K':'-.-',
'T':'-',
'C':'-.-.',
'L':'.-..',
'U':'..-',
'D':'-..',
'M':'--',
'V':'...-',
'E':'.',
'N':'-.',
'W':'.--',
'F':'..-.',
'O':'---',
'X':'-..-',
'G':'--.',
'P':'.--.',
'Y':'-.--',
'H':'....',
'Q':'--.-',
'Z':'--..',
'I':'..',
'R':'.-.',
'1':'.----',
'2':'..---',
'3':'...--',
'4':'....-',
'5':'.....',
'6':'-....',
'7':'--...',
'8':'---..',
'9':'----.',
'0':'-----',
'.':'.-.-.-',
',':'--..--',
'?':'..--..',
'!':'-.-.--',
'-':'-....-',
'/':'-..-.',
'@':'.--.-.',
'(':'-.--.',
')':'-.--.-'

].asImmutable()

def toMorse = {String str ->
    str.collect{ character -> 
        def morseCode  = morseCodeDatabase[character.toUpperCase()]
        morseCode != charSep ? morseCode : ""
    }.join(" ")
}

def toString = {String str ->
    str.split(wordSep).collect{ String morseCode ->
        morseCode.split(charSep).collect{ oneMorseCode ->
            (morseCodeDatabase.find{it.value == oneMorseCode})?.key
        }.join()
    }.join(charSep)
}

// ===============================
// 使い方！
// ===============================

def org ="My Name is Koji. Nice to meet you."
def morse = "-- -.--  -. .- -- .  .. ...  -.- --- .--- .."

assert toString('.- -...') == "AB"
assert toString('.-  -...') == "A B"
assert toMorse(org) == "-- -.--  -. .- -- .  .. ...  -.- --- .--- .. .-.-.-  -. .. -.-. .  - ---  -- . . -  -.-- --- ..- .-.-.-"
assert toString(morse) == "MY NAME IS KOJI"
```
Javaで文字コード簡易判定

バイト配列として与えられた入力文字列がUTF8かどうかの判定をしたくてググったら割と上位に出てきた
[JavaでUTF-8の文字コードを判定する](http://qiita.com/pcpDev/items/0c83712e93f8f972f208)
を参考にさせてもらって色々やっていたのですが上手くいかなかったので、上手くいった自分のコードを投稿。

考え方は一緒でとりあえず目的の文字コードでString(Unicode)に変換して更にgetBytesで元に戻した時バイト配列が一致するかどうかで正しく変換できていたのかどうかを判定して、正しく変換できていたのならその文字コードなのだろう、というやり方。
もちろんASCII文字列だった場合はどっちもtrueを返します。

```java
	public static boolean isUTF8(byte[] src)
	{
		try {
			byte[] tmp = new String(src, "UTF8").getBytes("UTF8");
			return Arrays.equals(tmp, src);
		}
		catch(UnsupportedEncodingException e) {
			return false;
		}
	}

	public static boolean isSJIS(byte[] src)
	{
		try {
			byte[] tmp = new String(src, "Shift_JIS").getBytes("Shift_JIS");
			return Arrays.equals(tmp, src);
		}
		catch(UnsupportedEncodingException e) {
			return false;
		}
	}
```

当初参考にしていた上記記事では`inputTextByte.equals(sjisenc);`とequalsメンバメソッドを使っていたので、byte[]の比較にもそれを使ったら常にfalseが返ってきてJava初心者の私は嵌りました :sweat_smile:

自分の興味分野では文字コード不明の文字列はbyte[]で渡されてくるので（FileInputStreamとかjniでC文字列とか）本来SJISで扱うべきものがUnicodeのはずのStringに無理やり突っ込まれて渡されてくる、という状況がよくわからず。どういう時にあるんでしょ？
思うに[JavaでUTF-8の文字コードを判定する](http://qiita.com/pcpDev/items/0c83712e93f8f972f208)は文字コードの判定法ではなく文字化けしているかどうかの判定法だと思うんですが……
CentOS5のdockerイメージ作った(remi,epel,ja,198.2 MB)

officialイメージがなかったので中でもサイズが小さかった`takuax/centos5.8basic`を元に作った。

* /usr/lib/locale/
* /usr/lib/locale/locale-archive

のサイズが大きかったので小さくするのに手間取った。

[手順](https://github.com/tukiyo/dockerimage-ja/blob/master/centos5/setup.sh)
[本当はこっちのほうがいいと思う](http://qiita.com/tukiyo3/items/a20920ac8e1fd516ab1f)

# 起動方法

```bash:
docker run -it tukiyo3/centos-ja:5.10 /bin/bash
```

# 特徴

* 198.2 MB (docker imagesコマンド結果)
* remiリポジトリ追加
* epelリポジトリ追加
* LANG=ja_JP.UTF-8
* timezone: Asia/Tokyo
* yum update済み (2014-07-11)
AngularでMarkdownを表示する


最近のAngularはサニタイズ周りが強化されていて、filterでは実装が難しそう(ムリ?)だったので、directive版です。[Vue.jsのデモ](http://vuejs.org/examples/index.html)みたいにできると、本当は直観的なんですが...

## 構成要素

AngularがCommonJSになっていないためクセがありますが、Debowerifyを使うとBrowserifyできるようになります。

### Bower経由
- angular

### npm経由
- browserify
- debowerify: Browserifyのトランスフォーム
- coffeeify: Browserifyのトランスフォーム
- marked: Markdownの変換エンジン

## 実装

こんな感じになりました。directiveの定義は5行ほど。AngularとCoffeeScriptは相性が良いですね。

### index.coffee

```coffeescript
require 'angular'
 
angular.module 'app', []
.directive 'marked', require './marked'
```

### marked.coffee

短いのでファイルを分けるまでもないのですが、一応再利用しやすいように。

```coffeescript
marked = require 'marked'
 
module.exports = ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    element.html marked element.text()
```

### index.html

Markdownを使いたいタグに`marked`という独自属性を付けています。Markdownは直接書いてもOKですが、この例では別ファイルからインクルード。

```html
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Markdown</title>
  </head>
  <body>
    <section marked ng-include="'sample.md'"></section>
    <script src="index.js"></script>
  </body>
</html>
```

### sample.md

```markdown
# Sample Markdown

- Angular.js
- Browserify
- Debowerify
- Coffeeify
- Marked
```
サンプルを gh-pages に上げる時に楽したい

Polymer.dart 使ってみたくて [color_palette](https://github.com/kui/color_palette) や [pixel_canvas](https://github.com/kui/pixel_canvas) を作ってみた。この時、せっかくなので gh-pages に利用サンプルも上げようとしたら、意外と苦労したのでメモ。

gh-pages に上げようとしたサンプル:

* https://github.com/kui/color_palette/tree/master/example
* https://github.com/kui/pixel_canvas/tree/master/example

実際に gh-pages に上げたページ:

* https://kui.github.io/color_palette/
* http://kui.github.io/pixel_canvas/drawing_with_drag.html


前提
-----

[Pub Package Layout][pub-layout] に基づいて、サンプルは `プロジェクトルート/example` に置き、さらに `pub build example` すると、`プロジェクトルート/build/example` にビルドしたものができる状態を前提とします。

便利パッケージを追加
---------------------

便利パッケージ [ghpages_generator][] を `yamspec.yaml` の `dev_dependencies` に追加:

```yaml
...
dev_dependencies:
  ghpages_generator: '>=0.2.0 <0.3.0'
  path: '>=1.2.0 <1.3.0'
...
```


スクリプト作る
----------------

[pub Package Layout][pub-layout] によると、プロジェクトのための便利スクリプトは `プロジェクトルート/tool` に置けとのことなので、gh-pages サイト作るスクリプトも `プロジェクトルート/tool` に置く。

```sh
$ mkdir tool
$ touch tool/gh-pages.dart
$ chmod 755 tool/gh-pages.dart
```

肝心のスクリプト本体はこんな感じ:

```gh-pages.dart
#!/usr/bin/env dart

import 'dart:io';

import 'package:ghpages_generator/ghpages_generator.dart' as gh;
import 'package:path/path.dart';

main() {
  var gen = new gh.Generator(rootDir: projectDir)
    ..withExamples = true;
  gen.generate(doCustomTask: (workDir) {
    gh.moveExampleAtRoot(workDir);
  });
}

String get projectDir =>
    absolute(
        dirname(
            dirname(Platform.script.toFilePath())));
```

アップロード
------------

実行すると gh-pages 作ってコミットしてくれるので、`git push` するだけ。

```bash
$ tool/gh-pages.dart
$ git push origin gh-pages
```

おわり。

[pub-layout]: https://www.dartlang.org/tools/pub/package-layout.html
[ghpages_generator]: https://github.com/a14n/dart-ghpages-generator
PostgreSQLをEUC-JPからUTF-8環境に移行する！

#概要
**以前ブログにポストしたものの転載です。**
色々検索すると、$PGCLIENTENCODINGをEUC-JPにして普通にpsqlから流し込めば完了っていうのが良く引っかかったけど、実際に試してみると以下のエラーが発生しました。

```
ERROR: character 0xfaf0 of encoding "EUC_JP" has no equivalent in "UTF8"
```

なんかEUC-JPの0xFAF0っていう文字をUTF-8に変換できないよというエラー。
このエラーメッセージの下には該当テーブル名が表示されていて、そのテーブルにはレコードが1件もリストアされていませんでした（当然か）
PostgreSQLメーリングリストのアーカイブ等を探ってみるとPostgreSQLの文字変換マップが云々とのことです。

リストアしたいレコード数は数百件とかのレベルでは無かったので手作業で対応するのは不可能。
どうしようかな～と色々考えた結果、pgdumpしたダンプファイルの文字コードをnkfを使ってUTF-8に変換後、psqlで流し込めば問題なくリストアできました。
ただし、dumpファイルの先頭にクライアントエンコードはEUC-JPです、と記述されているので、それをUTF-8に書き換える必要があります。
※今回は2G越えのdumpファイルでした。

1. nkfでUTF-8に変換
`nkf -w euc.dump > utf-8.dump`

2. viで文字コードの指定を変更(utf-8.dump)
    - 変更前：SET client_encoding = **'EUC_JP';**
    - 変更後：SET client_encoding = **'UTF-8';**

3. psqlでリストア
`psql -U {PGUSER} -p {5432} -d {DBNAME} -f utf-8.dump > result.log 2>&1`

4. リストア終了後、result.logを開いて少なくともERRORが出力されていないことを確認。

完了！
ゲーム設計: Component-Based Architecture


# はじめに
Component-Based Architecture というものについて、色々調べてみた時のメモ的なやつ。
ざっくりしたまとめなので詳しく知りたい方は末尾の参考ページなどをあたってください。

# 概要
## Component-Based Architectureとは
1999~2003年付近で活発に議論された、ゲーム制作で多く採用されているプログラムの設計指針。ゲームオブジェクトが持つ機能を「コンポーネント」に分けて持たせる（合成）。再利用性が高く、フレキシブル。

# 継承が持つ問題
・OOPにおける継承はis-a関係を持つ木構造を作るのが好ましい（リスコフの置換原則）
・ただし、複雑なモデルの場合これではコードの重複を無くすことができないケースがある

・特にゲームは多種多様なオブジェクトが存在する
- 継承関係だけで重複無く木構造を構成するのが難しいことがある
- 例えば、継承関係では遠い親戚だが、部分的に同じ機能を持つようなケース
- 継承関係が深く複雑になるほど、重複を無くすのは困難になる
- 階層が深くなり重複が増えると、どこに何があるかを把握するのも難しくなる -> 破綻

・重複を無くすために基底クラスの役割を重くしすぎるのも良くない
- is-a関係をやぶるかも
- 1つのクラスが様々な役割(ドメイン)を持ち、それらが密に結合する
- 再利用性・メンテナンス性の低いコードになりがち

・継承はハードコーディング
- コードを変えない限り変えられない、強い結びつき。
- 特に継承が深くなると、必要に応じて組み替えるのが難しい。

・しかし、ゲームは触ってみないとわからない所も多い
- 仕様変更や微調整の頻度が比較的高い
- 触って初めて見えてくる色々なアイディア
- 制作開始時にはわからないことだらけ

-> もっと変更に強く、再利用性が高く、フレキシブルなアプローチにしたい

# Component-Based Architectureのアプローチ
##「継承よりも合成を」
・それぞれの機能をコンポーネント化し、ゲームオブジェクトに持たせる
- ゲームオブジェクトは基本的にゲーム内のあらゆるもの（ボタンやゲージなども含む）

・さまざまなコンポーネントの組み合わせでオブジェクトの機能を表現する.
- 移動、飛行、体力、攻撃、防御...などなど
- 更新処理(update)、描画処理(render)、入力処理などもコンポーネント化
- グラフィックが必要でないオブジェクトもコンポーネント

実装方法は数え切れないほどあるが、基本的なコンセプトとしてはトレイトのように「実装」を部品化してゲーム内のオブジェクトに貼り付けていくイメージ？

・機能をつけたり外したりするのが簡単
再利用性が高い

・継承で表すと遠い関係にあるオブジェクトでも同じコンポーネントを付けられる
継承を組み替える必要なし！

# 種々の問題
##コンポーネント間のやりとりをどうするか？

必ずしも全てのコンポーネントを独立にできるわけではない。
ただし、コンポーネント間の結合は疎にしたい。実装方法は無数(zillion way)。例えば...
- コンポーネントのコンテナを作り、全てのコンポーネントにブロードキャストする方法
- コンポーネントはデータのみを持ち、処理は「システム」としてまとめる方法
システムは自身が必要とするコンポーネントを持つゲームオブジェクトのみ処理する

##ゲームオブジェクトはどう生成するか？

・コンポーネントはゲームオブジェクト内部で生成するよりも、外部で生成して注入したほうが便利。
ファクトリクラスを作るなどするとより便利。

・ゲームオブジェクトとコンポーネントの依存関係をXMLなどの外部ファイルにまとめられる
- データドリブン的な
- ちょっとした調整のたびにビルドしなくてよい
- プログラムを触らなくても調整できるので、デザイナーやプロデューサーもゲームデザインに参加できる

# まとめ
・継承を多用して階層を深くすると、ちょっとした変更に弱い構成になりがち
・Component-Based Architectureを採用すると、機能をコンポーネント化して自由にON/OFFできる
・変更に強く再利用しやすい、フレキシブルなゲーム制作
・ゲーム設計は奥が深い
・zillion ってかっこいい響き

あとあれ、もしかしてGameSaladそのものか？と思った。

### 参考ページ
http://www.slideshare.net/DADA246/component-basedgameenginedesign-23304862
http://gameprogrammingpatterns.com/component.html
（日本語訳: http://ameblo.jp/longwaylife/entry-11835997010.html）
http://www.raywenderlich.com/24878/introduction-to-component-based-architecture-in-games
grunt-spritesmithで生成したsprite画像をimgタグでも使いたい

grunt-spritesmithには通常ではmixinが用意されており、

```scss
a {
	@include sprite($hoge);
}
```

と書くと

```css
a {
	background-image: url(/common/images/sprites.png);
	background-position: 0px -198px;
	width: 50px;
	height: 50px;
}
```

こんな感じでhoge.pngを出力してくれると思います。便利ですね。


だけど偶にimgタグでも使いたい時とかありますよね。
いちいちsprite画像の余白を調べてネガティブマージン指定して…ってやるのが馬鹿らしいので、mixinを作り下記のようにしました。

```scss
@mixin spriteImg($sprite,$hover:false) {
	$spriteImg-offset-x: abs(nth($sprite, 3));
	$spriteImg-offset-y: abs(nth($sprite, 4));
	$spriteImg-height: nth($sprite, 6);
	@if $hover == true {
		$spriteImg-height: nth($sprite, 6) / 2;
	}

	overflow: hidden;
	display: block;
	width: nth($sprite, 5);
	height: $spriteImg-height;

	img {
		margin: -#{$spriteImg-offset-y} 0 0 -#{$spriteImg-offset-x};
	}
	@if $hover == true {
		&:hover img {
			margin: -#{$spriteImg-offset-y + $spriteImg-height} 0 0 -#{$spriteImg-offset-x};
		}
	}
}
```

```scss
a {
	@include spriteImg($btn,true);
}
```

↓

```css
a {
	overflow: hidden;
	display: block;
	width: 144px;
	height: 30px;
}
a img {
	margin: -74px 0 0 -0px;
}
a:hover img {
	margin: -104px 0 0 -0px;
}

```

第二引数はhover画像用なので、不要な方はincludeする際に省略してください。
そもそもoff/on画像を隙間なく上下で並べてないと利用できませんし、限定的だと思います…
deviseのViewを編集しても反映されない

# 追記
@k-shogo さんにコメントを頂きました．
コメント欄の方法が正しい解決方法だと思うので，以下は参考程度にどうぞ！

# 症状
```
rails g devise:views
```
をしたviewを編集しても、反映されない。

# 解法
`config/routes.rb`を以下のように変更し、

``` rb
Rails.application.routes.draw do
  devise_for :users, controllers: {
    registrations: 'users/registrations',
    sessions: "users/sessions",
  }
end
```

を追加し、
`app/controllers/users/registrations.rb`を

``` rb
class Users::RegistrationsController < Devise::RegistrationsController
  # GET /resource/sign_up
  def new
    super
  end

  def create
    super
  end
end
```

`app/controllers/users/sessions.rb`を

``` rb
class Admins::SessionsController < Devise::SessionsController
  # GET /resource/sign_in
  def new
    super
  end

  # POST /resource/sign_in
  def create
    super
  end

  # DELETE /resource/sign_out
  def destroy
    super
  end
end
```

とする。

特にroutesの設定がない場合( devise_for :users しか書いていない場合)、デフォルトのViewを見に行っているような気がする。
CasperJSでWEBサイトをスクレイピングしてみる



前回の投稿（[CasperJSでWEBサイトの画面キャプチャを取得してみた](http://qiita.com/hkusu/items/ef6dc5999dae39471e93)）の続きです。環境構築の方法（Mac）については、前回の投稿をご覧ください。

## はじめに

- とある事情で、Qiitaの [Organizationページ(自社の)](http://qiita.com/organizations/yumemi) をWEBスクレイピングしました。
	- とある事情というのは、[自社のブログ](http://staffblog.yumemi.jp) に、自社メンバーのQiita新着投稿をブログパーツ的に表示したかった。
	- Qiitaへゴリゴリ負荷をかけるものではないです^^;
- CasperJS は CoffeeScript をそのまま解釈してくれるので、今回は CoffeeScript で書いてみます。
	- ちなみに CasperJS は仮想ブラウザ？的に動いているので、対象ページが JavaScript 等で動的に描写されるページでも、スクレイピングできるはず..です。

## 今回の成果物

- QiitaをWEBスクレイピングして、こういうブログパーツ（といってもHTML）を自動生成できるようにしました。
	- http://hkusu.github.io/CasperJS_scraping_Qiita/demo.html
	- 実際にはこれを cron 等で定期的に生成します。
- 生成スクリプトのソースはこちら
	- https://github.com/hkusu/CasperJS_scraping_Qiita

## 簡単なWEBスクレイピングの例

- まず手始めに、対象ページの `a` タグの `href="hoge"` を全て取得してみます。ソースはこんな感じ。

	```coffeescript:scraping.coffee
	casper = require("casper").create()
	
	target_url = "http://qiita.com/organizations/yumemi"
	
	# 対象のWEBページを開く
	casper.start target_url, ->
	
	  urls = []
	
	  urls = @evaluate ->
	    items = document.querySelectorAll("a")
	    Array::map.call items, (e) ->
	      e.getAttribute('href')
	
	  # 出力
	  @echo(urls.join("\n"))
	
	casper.run ->
	  @exit()
	```

	- スクレイピングのポイントは、`querySelectorAll` のところ。
	- `querySelector` の使い方については、下記のサイトを参考にしました。
		- http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

- では上記のソースを実行してみます。コマンドラインで、

	```shell
	$ casperjs scraping.coffee
	```

- すると次のように、`href="hoge"` の中身が全て取得できたことが確認できます。

	![スクリーンショット 2014-07-11 16.47.34.png](https://qiita-image-store.s3.amazonaws.com/0/35733/d72b46f4-0a4e-f848-bbfc-6bb1d0ca19e8.png "スクリーンショット 2014-07-11 16.47.34.png")

## `querySelector` の使い方のポイント

上記の例のように、単純に `a` タグのものを全て取得としてしまうと、余分なものも取得されてしまうので、実際は対象ページのHTMLの構造を見て、絞り込む必要があります。

具体的にいうと、`divタグのid名`、`class名`、`HTMLタグ名`、`HTMLタグの属性(検索に正規表現の利用可)` で絞ります。

例えばこの例だと、

```coffeescript
elements = []

elements = @evaluate ->
  items = document.querySelectorAll(".activities article .body a[href*=\"/items/\"]")
  Array::map.call items, (e) ->
    e.getAttribute('href');
```

- 対象ページのHTMLの `activities` class 配下の、
- `article` タグ 配下の、
- `body` class 配下の、
- `a` タグで、`href` 属性の value（つまりURL）で `/items/` を含むものの、
- `href` 属性の value（つまりURL）を取得する

となります。

`href` 属性のところで `*=` は部分一致を意味します。もし先頭文字列の一致の場合は `^=` 、後方文字列の一致の場合は `$=` とします。

`e.getAttribute('href');` は属性の取得を意味します。もしHTMLの中身を取得する場合は `e.innerHTML` とします。

ただ実際には、うまく絞りきれない場合が多いので.. その場合は、いったん配列にスクレイピングの結果を格納しておいて、普通に CoffeeScript で配列操作を行います。例えば、

- 特定のURLを含むものを、別の配列へ移し替える
	- この例の場合は URLが `/piyo` から始まるもの

	```coffeescript
	elements_2 = []
	
	i = 0
	while i < elements.length
	  if elements[i].match(/^\/piyo/)
	    elements_2.push(elements[i])
	  i++
	```

- 文字列を加工する
	- この例の場合は、余分な文字列の削除

	```coffeescript
	i = 0
	while i < element.length
	  entry_days[i] = entry_days[i].replace(/[\n\r]/g,"")
	  entry_days[i] = entry_days[i].replace(/\ /g,"")
	  entry_days[i] = entry_days[i].replace(/<strong>.+?<\/strong>/g,"")
	  i++
	```

## おわりに

スクレイピングする際は、対象ページのHTMLソースを見て、睨めっこ＆試しながらソースを書いていく流れになります^^; 結構、骨が折れる作業です..
JAX-RS Client メモ - REST API を呼び出してレスポンスをBeanにマッピングする

# やりたいこと
* REST APIを呼び出してレスポンス(XML or JSON)をBeanにマッピングする

# 前提条件
* JAX-RSのRI(Reference Implementation)にはJersey 2.xを使用
* 下記のようなユーザ検索サービスを想定

GET /webresources/users/1

```xml:XMLの場合
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<user>
  <id>1</id>
  <name>John</name>
  <age>25</age>
</user>
```

```json:JSONの場合
{
  "id":1,
  "name":"John",
  "age":25
}
```

GET /webresources/users

```xml:XMLの場合
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<users>
  <user>
    <id>1</id>
    <name>John</name>
    <age>25</age>
  </user>
  <user>
    <id>2</id>
    <name>Paul</name>
    <age>27</age>
  </user>
  <user>
    <id>3</id>
    <name>George</name>
    <age>28</age>
  </user>
  <user>
    <id>4</id>
    <name>Ringo</name>
    <age>26</age>
  </user>
</users>
```

```json:JSONの場合
[
{
  "id":1,
  "name":"John",
  "age":25
},
{
  "id":2,
  "name":"Paul",
  "age":27
},
{
  "id":3,
  "name":"George",
  "age":28
},
{
  "id":4,
  "name":"Ringo",
  "age":26
}
]
```


# 実装してみる
## 1. 依存関係の解決

* 下記のように依存性を定義する(Gradleの場合)

```build.gradle
compile group: 'org.glassfish.jersey.core', name: 'jersey-client', version: '2.+'

// JSONから変換する場合は以下を定義する
compile group: 'org.glassfish.jersey.media', name: 'jersey-media-json-jackson', version: '2.+'
```

## 2. コード例

### GET /webresources/user/1

```java
Client client = ClientBuilder.newClient();
WebTarget target = client.target("http://localhost:8080/WebApplication1/webresources")
    .path("users/{id}");

User user = target.resolveTemplate("id", 1)
    .request(MediaType.APPLICATION_XML)
    .get(User.class);

System.out.println(user);
// => User(id=1, name=John, age=25)
```
```java:User.java
@lombok.Data
@XmlAccessorType(XmlAccessType.FIELD)
@XmlRootElement
public class User {

    private Integer id;
    private String name;
    private Integer age;

}
```

### GET /webresources/users

```java
Client client = ClientBuilder.newClient();
WebTarget target = client.target("http://localhost:8080/WebApplication1/webresources")
    .path("/users");

List<User> users = target.request(MediaType.APPLICATION_XML).get(new GenericType<List<User>>(){});

System.out.println(users);
// => [User(id=1, name=John, age=25), User(id=2, name=Paul, age=27), User(id=3, name=George, age=28), User(id=4, name=Ringo, age=26)]
```

## JSONから変換したい

* ClientConfigとJacksonFeatureを使用する

```java
ClientConfig config = new ClientConfig().register(JacksonFeature.class);
Client client = ClientBuilder.newClient(config);
WebTarget target = client.target("http://localhost:8080/WebApplication1/webresources")
    .path("users/{id}");

User user = target.resolveTemplate("id", 1)
    .request(MediaType.APPLICATION_JSON)
    .get(User.class);

System.out.println(user);
// => User(id=1, name=John, age=25)
```

こんな感じです。
SE的声かけ変換表

# 効果的にコミュニケーションする
会話は相手と共感するところから始めます。言いたいことは同じでも、言い方を工夫することで相手とより良いコミュニケーションをとることができます。
うまく物事が伝わらないと思ったら、言い方を変えてみましょう。
だめだと分かりながらついついやってしまった自分の過去を反省しつつ、参考にしていただければと思い公開します。

# SE的声かけ変換表
## 会話編
| before | reason | after |
|------|--------|------|
だめだよね。 | 相手を拒絶するところからコミュニケーションをするよりも、共感することから始めた方が効率的である。| できたね。ここをこうするともっとよくなるね。
さっき言ったじゃん。 | 相手が会話を飲み込めていない現実に対峙すべき。指摘の効能を話すなど、周辺情報を追加する。 | ここはこうすると、こういういいところがあるよ。やってみよう。
言ってることがわからない。 | わからない原因に、共に向き合う姿勢を示すと解決が早い。相手と対峙するのは非効率的。 | 話していることはわかったので、なにについて話しているか教えて。
呼び捨て | 時にはさん付けで呼ぶことにより、尊重、敬意を表明する。呼ぶ時は慇懃無礼に聞こえてはならない。 | この仕事〇〇さんにお願いしたい。
言ってることとやってることが違うじゃん。| 作業を実際にやっている人がその作業について一番よくわかっていることが多い。相手のやっていることを尊重する。 | おや？〇〇目指してたよね？やっているうちに何か気づきがあった？

## 進捗確認編
| before | reason | after |
|------|--------|------|
いつまでかかってるの？ | 質問になっていない。未来という不確定要素を予見しなければならないリスクを一緒にもつ。 |  あとどれくらいかかるか、予想つけられそう？
(よくない結果に対して)どういうことなの？ | 質問になっていない。向かい合う対象は良くない結果を招いた原因であることを明らかにし、解決を促す。 | 何か問題が発生した？
遅くない？  | 質問になっていない。ギャップを明らかにし、問題に対峙する。 | 予定より一日遅れだけれど、何か問題があった？
いつ出来る？ | 未来を予測することのリスクを丸投げせずに一緒にもつようにする。あたかも未来がわかるのが当然のようには話さない。 | これって、いつできるか想定することはできるかな？
どうして出来ないの？ | 出来ない理由を聞くより、できる方法を聞く方が効率的。| どうやったらうまく行くかな？
待ってるんだけど。| 質問になっていない。相手の置かれている状況を確認する。 | お願いした時間が過ぎちゃったんだけれど、問題が発生した？

## 成果物への指摘編
| before | reason | after |
|------|--------|------|
なんでバグだしたの？ | 相手に対峙するのではなく、問題にともに向き合う。 | バグの発見は類似障害とプロセス改善のチャンスである。バグを出したことに言及するよりも、次の行動に対峙した方が効率的。 | バグが入った原因を見つけて、他の場所に同じような問題が発生していないか見つけよう！(当該障害が収束したら)もっと早くバクを見つけるためにはどうしたらいいかな？
テストしてないの？ | 相手の仕事に対峙するのではなく、品質確保のプロセスに対峙する。 | 観点網羅表と試験の証跡に当たるものを見せて下さい。

## 問題があった時編
| before | reason | after |
|------|--------|------|
問題を起こすのはいつも君だよね。 | ことSEに関しては問題を起こすのは仕事をしている証拠です。問題を責めるよりも、問題を起こしにくくする方法やフォロー方法を考えるべきです。 | 最前線で戦ってるね！もうちょっとガードを固めた方がいいんじゃない？
なんでやってないの？ | 相手に対峙するよりも阻害原因と一緒に対峙する姿勢をとる。 | 何か他のことに時間とられた？
なにをしているの？ | 質問を未来に活かせるようにする。過去は変えられないので。 | もう一回最初からやれるとしたら、次はどうする？
〇〇だからだめだよね。 | ダメな点の指摘よりも、改善方法を考えるほうが効率的。 |  〇〇になればもっとよくなるよね。

## お客様と話すとき編
| before | reason | after |
|------|--------|------|
仕様です。 | 机上で決めたことが正しいという保証などない。共に現実に向き合う姿勢をとる。 | 前はそれで行こうとなってましたが、状況が変わりましたか？
範囲外です。 | 相手が言及したことに新たなニーズやビジネス課題がある可能性があるので、それを聞かないのは勿体無い。 | 詳しく聞かせてください。(聞いて、相手と背景を共有した後に)いまいただいている仕事と、この件と、どちらが優先でしょうかね？
〇〇だからできません。 |できないことに価値はありません。前進する方法を提示するべきです。 | 〇〇になれば、できるか試せます。
tableの列の表示・非表示を切り替えるjQueryプラグインを作りましたよ。

## なにをつくったか
+ tableの列の表示・非表示を切り替えるプラグイン
+ １行目の値をチェックボックスのリストにして、チェックのある行だけ表示
+ ヘッダをクリックすると昇順ソートができますよ
+ もっかい押すと降順ソートができますよ
+ リロードしてもソートと表示の値が保たれてますよ。

### みたいなプラグイン

## なぜつくったか

+ なんか後ろの方の席からひょろっと「列の表示切り替えたいなー」という声がきこえた。
+ tableの列操作めんどくさい。
+ Git真面目につかってみなあかんな、という課題意識があった。
+ jQuery書きたい病にかかった。
+ なんかLocalStorage使いたいやん。
+ とかとか 


* * *
 
ってわけで公開しました。
[Git](https://github.com/tattin/tableColSwitcher/)
```https://github.com/tattin/tableColSwitcher/```


## おねがい
* かわいがってください。
* いっぱいダメだしして、勉強させてください。
CreateJSでcanvasに描画されたオブジェクトの色を変更する方法

CreateJSを用いてcanvasに描画されたオブジェクトの色を変更する方法です。
※ロールオーバー/ロールアウト時にShapeオブジェクトの色を変更します。

```js:javascript
window.onload = function(){

	var stage = new createjs.Stage('canvas');
	stage.enableMouseOver();
	
	// Shapeオブジェクトを生成
	var shape = new createjs.Shape();
	var rectangle = new createjs.Rectangle(0, 0, 200, 200);
	shape.graphics.beginFill('#333333').drawRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
	// cacheを設定
	shape.cache(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
	stage.addChild(shape);
	
	shape.addEventListener('rollover', function(e){
		var target = e.target;
		// ColorFilterで色を変更する(R=255, G=0, B=0)
		target.filters = [
			new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0, 0)
		];
		// cacheを更新
		target.updateCache();
	});
	
	shape.addEventListener('rollout', function(e){
		var target = e.target;
		// ColorFilterでデフォルトの色に戻す
		target.filters = [
			new createjs.ColorFilter(1, 1, 1, 1, 0, 0, 0, 0)
		];
		// cacheを更新
		target.updateCache();
	});
	
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick', function(){
		stage.update();
	});

}
```

* 色の変更にはColorFilterを使用する。
* ターゲットとなるオブジェクトのfiltersプロパティに配列で各フィルターを渡す。
* フィルターはターゲットとなるオブジェクトのcacheメソッドで設定した領域に適応される。
* フィルターはターゲットとなるオブジェクトのupdateCacheメソッドを呼び出す事で適応される。

***

色は下記の計算式で決定される。
適応後(R) = デフォルト(R) * redMultiplier + redOffset;
適応後(G) = デフォルト(G) * greenMultiplier + greenOffset;
適応後(B) = デフォルト(B) * blueMultiplier  + blueOffset;
適応後(A) = デフォルト(A) * alphaMultiplier + alphaOffset;
詳しくは[ColorFilter Class](http://createjs.com/Docs/EaselJS/classes/ColorFilter.html)を参照
hubotをvagrant上で動かす



## CentOSのボックスを取得する

```
$ mkdir vagrant_hubot 
$ cd vagrant_hubot  
$ vagrant box add centos65 http://www.lyricalsoftware.com/downloads/centos65.box
```


## Node.js, Redis, CoffeeScript, Hubotをインストール

```bash
#!/usr/bin/env bash

echo "Adding epel repository..."
sudo  rpm -ivh http://ftp.jaist.ac.jp/pub/Linux/Fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm >/dev/null 2>&1

echo "Installing node.js and Redis..."
sudo yum install -y nodejs npm redis

echo "Starting Redis..."
sudo /etc/init.d/redis start

echo "Setting Redis auto start..."
sudo chkconfig redis on

echo "Installing CoffeeScript and Hubot..."
sudo npm install -g coffee-script hubot

echo "Installing Hipchat plugin..."
sudo yum install -y libicu-devel
npm install hubot-hipchat --save

echo "Installing forever package"
sudo npm install forever -g

echo "Installing misawa..."
npm install hubot-misawa --save

echo "Finish!!"
```

## Hubotディレクトリの作成

```
$ hubot --create mybot
$ cd mybot
$ npm install
```

## HipChat用の環境変数をセット

```bin/hubot
#!/bin/sh
 
npm install
export PATH="node_modules/.bin:node_modules/hubot/node_modules/.bin:$PATH"
# Admin権限のあるAPIトークン
export HUBOT_HIPCHAT_TOKEN="Admin API Token"
# hubotユーザのJID
export HUBOT_HIPCHAT_JID="hubot JID"
# hubotユーザのパスワード
export HUBOT_HIPCHAT_PASSWORD="hubot password"
# ルームID
export HUBOT_HIPCHAT_ROOMS="your room"
# hubotはデフォルトで8080を使うが、既に使われている場合は適当に設定
# export PORT=9999
 
exec node_modules/.bin/hubot "$@"

```

## HipChatと連携してHubotを起動

```hubotディレクトリ
bin/hubot -a hipchat
```

## misawa

```
"hubot-misawa" を external-scripts.json に追加
Reboot Hubot
```
officialのubuntuイメージ全部日本仕様にしといた

[githubにスクリプト上げといた](https://github.com/tukiyo/dockerimage-ja)

| image | size |
|:---------------------- |:-------- |
| tukiyo3/ubuntu-ja:14.10 | 197.1 MB |
| tukiyo3/ubuntu-ja:14.04 | 277.2 MB |
| tukiyo3/ubuntu-ja:13.10 | 185.7 MB |
| tukiyo3/ubuntu-ja:13.04 | 170.5 MB |
| tukiyo3/ubuntu-ja:12.10 | 173.2 MB |
| tukiyo3/ubuntu-ja:12.04 | 128.5 MB |
| tukiyo3/ubuntu-ja:10.04 | 184 MB |

* LANG=ja_JP.UTF-8
* timezone=Asia/Tokyo
* リポジトリを日本のミラーサイトにした。
  * [日本国内のダウンロードサイト | Ubuntu Japanese Team](https://www.ubuntulinux.jp/ubuntu/mirrors)によると、ubuntutym.u-toyama.ac.jp にすればよかったなと思った。
-stringByAppendingPathComponent:の罠

_/var_ に対してでも _/var/_ に対してでも _/var/foo_ にしてくれる

```
    -stringByAppendingPathComponent:
```

便利ですよね.

でも, ついつい_http://example.com/_ とURL文字列とかに対して使ってしまって _http:/example.com/foo_ になっちゃうことありますよね.

気を付けましょう.
訓練内容まとめ

これまでに習った内容のまとめ。

☆リンク遷移
同サイトから同サイト→同窓表示
同サイトから他サイト→新窓表示
 *しかしこれが全てではない

☆パス
http://　→絶対パス
~/.html →相対パス

☆ドメイン
TLD:Top Level Domain→co.jp jp com netなど

HTMLの宣言
 <!DOCTYPE html>

　タグの書き方を見ていると、XHTMLになるのかと思いきや宣言はHTML5でした。
　以下習ったタグの箇条書き。
・head
・title
・meta
・link
・script
・body
・h1
・h2
・a
・div
・span
・p
・br
・img
・ul
・ol
・li
・table
・tr
・td

☆CSS
・padding
・background
・margin
・border
・line-height
・letter-spacing
・vartical-align
・text-align
・font
・list-style
・color
・width
・height
・float
・clear
・text-decoration

　このあたりが基本的なものかなと思います。スペルが間違えていたり、覚え違いがあったらすみません(；´^｀)
　省略できるものは省略形で書いてますが、一応指定の仕方はしっかり聞いています。
　次はJavascriptの方の防忘録になると思います。
macでブラウザの履歴を残さないで利用する方法まとめ

# Chromeの場合
## 通常使用
新規シークレットウィンドウを開く．
## 起動時から有効にする
起動オプション「--incognito」を利用して起動する．
うまく行かなかった場合，システム環境設定からアクセシビリティの設定から，
コンピュータの制御を許可する必要がある．

1. Automatorを起動
2. 新規 - アプリケーション を開く
3. 「シェルスクリプトを実行」で下記を実行するファイルを作る
```
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --incognito
```
4. ファイルを実行して起動

# Safariの場合
## 通常使用
プライベートブラウズにチェックを入れる．
## 起動時から有効にする
AppleScriptでプライベートブラウズにチェックを入れた状態で起動する．
うまく行かなかった場合，システム環境設定からアクセシビリティの設定から，
コンピュータの制御を許可する必要がある．

1. AppleScriptエディタで下記のようなファイルをファイルフォーマット「アプリケーション」で作成
2. ファイルを実行して起動

```ruby:safarii_Private.app
tell application "Safari" to activate
tell application "System Events"
	try
		tell process "Safari" to click menu item ¬
			"プライベートブラウズ" of menu "Safari" of menu bar 1
	on error
		tell process "Safari" to click menu item ¬
			"Private Browsing" of menu "Safari" of menu bar 1
	end try
	
	if exists button "OK" of window 1 of application process "Safari" then
		click button "OK" of window 1 of application process "Safari"
	end if
end tell 
```

# Firefoxの場合
1. 環境設定 - プライバシー を開く
2. 履歴の項目で「履歴を一切記憶させない」にする
3. 設定は保持されるので次回起動時からも有効
jQuery UI とHTML5 Drag Drop API を組み合わせてdraggableな要素をぽこぽこ作ってみる

備忘録です．
前回書いたjQuery UI の draggable とHTML5のDrag Drop API を組み合わせてみたいと思います．
今回はドラッグ可能な要素を下のエリアにドロップすると，
ドラッグエリア上で自由に動かせる要素が新しく出来上がるといったサンプルプログラムを書いてみたいと思います．

# 環境

+ MacOSX (10.9)
+ jQuery UI (1.11.0)
+ jQuery (1.10.2)

# サンプル

上部の要素を下部のエリアにドラッグ＆ドロップすると自由に動かせる要素が下部のエリアにできます．
作った要素はダブルクリックで削除することができます．

```html:ddSample.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<title>drag and drop test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./jquery-ui-1.11.0/jquery-ui.css">
	<link rel="stylesheet" href="./css/ddStyle.css">

</head>
<body>
	<div id="container">
		
		<div id="dragTargetsArea">
			<p class="dragTarget" draggable="true">drag me.</p>
			<p class="dragTarget" draggable="true">drag drag!</p>
		</div>

		<div id="draggableArea">
			
		</div>

	</div>

	<script src="./jquery-ui-1.11.0/external/jquery/jquery.js"></script>
	<script src="./jquery-ui-1.11.0/jquery-ui.js"></script>
	<script src="./js/ddEvent.js"></script>
</body>
</html>
```

```css:ddStyle.css
body {
	width: 940px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}

div#draggableArea {
	width: 100%;
	height: 300px;
	border: solid 1px #000;
}

div.draggable {
	width: 20%;
	height: 10%;
}
```

```js:ddEvent.js
$(function() {
	
	$('.draggable').draggable( {
	
		containment: '#draggableArea',
		scroll: false,
	
	});

	$('.dragTarget').on('dragstart', function(e) {
	
		// this は p.dragTarget のうち今ドラッグしてるもの
		dragSrcEl = this;
		console.log(this);
	
	});

	// ドラッグエリアに要素を追加，ドラッグエリアから要素をダブルクリックで削除
	$('#draggableArea').on('dragover', function(e) {

		e.preventDefault();

	}).on('drop', function(e) {

		if( !(e.isDefaultPrevented()) ) {
			e.stopPropagation();
		}

		if(dragSrcEl != this) {
			// this は div#draggableArea
			$('#'+this.id).append("<div class='draggable'><p>"+dragSrcEl.innerText+"</p></div>");
		}

		$('.draggable').each(function() {
			$(this).draggable( {
				containment: '#draggableArea',
				scroll: false,
			});
		});

	}).on('dblclick', '.draggable', function(e) {
		$(this).remove();
	});

});
```

自由に動かせるようになったでしょうか．
今回はこちら http://www.html5rocks.com/ja/tutorials/dnd/basics/ を参考にしました．

# ひとこと
最近，調べて書き終わったら，調べてたタブを閉じる前にきーたに書き留める習慣がつきました．
きーたのひとありがとうございます．
指定対象までぬるっとスクロールする

そんなん楽勝だろって思ってた時代が僕にもありました。

**jQueryが使えないとわかるまでは・・・**

## メモ

`target_id` は指定要素の `id` 属性の値を渡してあげてください。
`var parent = document.getElementById(target_id);` あたりをゴニョゴニョすれば `id` 属性以外の指定も可能です。

```js:ぬるっとスクロール
function scroll(target_id) {
    var delay = 500;

    var start_time = new Date();
    var from = document.body.scrollTop || document.documentElement.scrollTop;
    var distance = getTop(target_id) - from - 10; // 10は遊び

    var animation_id = setInterval(function(){
        var time = new Date() - start_time;
        var current = Math.sin(Math.PI * 0.5 * (time / delay)) * distance + from;
        if (time > delay) {
            clearInterval(animation_id);
            current = from + distance;
        }
        document.body.scrollTop = current;
        document.documentElement.scrollTop = current;
    }, 5);
}

function getTop(target_id) {
    var top = 0;
    var parent = document.getElementById(target_id);
    while (parent) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}
```
Mac OS X(10.9.3)にhomebrewでmysql5.5をインストール

```
$  brew install mysql
```

をするとmysql5.6が入るので(20140711現在)

```
$  brew tap homebrew/versions
$  brew install mysql55
==> Downloading http://downloads.mysql.com/archives/mysql-5.5/mysql-5.5.30.tar.gz
Already downloaded: /Library/Caches/Homebrew/mysql55-5.5.30.tar.gz
==> cmake . -DCMAKE_INSTALL_PREFIX=/usr/local/Cellar/mysql55/5.5.30 -DMYSQL_DATADIR=/usr/
==> make
==> make install
==> Caveats
A "/etc/my.cnf" from another install may interfere with a Homebrew-built
server starting up correctly.

To connect:
    mysql -uroot

This formula is keg-only, so it was not symlinked into /usr/local.

Conflicts with mysql, mariadb, percona-server, mysql-cluster, etc.

Generally there are no consequences of this for you. If you build your
own software and it requires this formula, you'll need to add to your
build variables:

    LDFLAGS:  -L/usr/local/opt/mysql55/lib
    CPPFLAGS: -I/usr/local/opt/mysql55/include


To reload mysql55 after an upgrade:
    launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.mysql55.plist
    launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql55.plist
==> Summary
  /usr/local/Cellar/mysql55/5.5.30: 6406 files, 220M, built in 4.4 minutes
```

```
$  brew link mysql55 --force                                                  
Linking /usr/local/Cellar/mysql55/5.5.30... 134 symlinks created
```

```
$ sudo mysql_install_db --verbose --user=`whoami` --basedir=/usr/local/Cellar/mysql55/5.5.30 --datadir=/usr/local/var/mysql --tmpdir=/tmp
```
Rails アプリの Jenkins テストジョブでログ肥大化

Rails アプリのテストジョブつくるかーとか言って「Execute shell」な Build でこんなのを書く。

```sh
bin/rake db:migrate RAILS_ENV=test
bin/bundle exec rspec spec
```

数ヶ月経ってディスク容量ガーみたいなアラートが来て見てみると log/test.log がめちゃ肥大化してたりする。過去のログなんで後生大事にとっとく必要もないので log:clear とかするとよい。

```sh
bin/rake db:migrate RAILS_ENV=test
bin/rake log:clear
bin/bundle exec rspec spec
```