OmniAICreator/Qiita-1.07M huggingface dataset:
簡易テンプレートエンジンを作る

#テンプレートエンジンを作る

簡易的なテンプレートエンジンを作ってみたいと思います。

##テンプレートエンジンとは？


プログラムをビューとロジックに分けたときに、ビューの部分をマークアップエンジニアの人などがより分かりやすいような形で書くことを目的としています。
PHPで一番有名なテンプレートエンジンはSmartyだと思います。

今回はシンプルなものを紹介するため、*このコードをそのまま利用することはお勧めしません。*


##1.単純にHTMLファイルを別ファイルに分けたパターン

###プログラム

```php:sample1.php
<?php

function view($template, Array $data = [])
{
    extract($data);

    require $template;
}



$data = [
    'title' => 'テンプレートエンジン',
    'author' => 'tak'
];

view('./view1.php', $data);
```

```php:view1.php
<h1><?=$title?></h1>
<p>この投稿は<?=$author?>によって書かれています。</p>
```


ビューファイル(view1.php)を外部ファイルに分けて、includeする方法です。
グローバル空間でincludeすると余計な変数も使用できる状態になってしまうため、関数内でincludeしています。

ビューの中で使う変数は連想配列で関数に渡し、extractで展開しています。
こうすることで、変数が増えても簡単にビューに渡すことができると思います。

###出力結果
```html:output.html
<h1>テンプレートエンジン</h1>
<p>この投稿はtakによって書かれています。</p>
```


##2.変数を置き換えるパターン

###プログラム
```php:sample2.php
<?php

function view($template, Array $data = [])
{
    $source = file_get_contents($template);

    echo preg_replace_callback('/\%(\w+)%/', function ($m) use ($data) {
        if (!isset($data[$m[1]])) {
            return '';
        }

        return $data[$m[1]];
    }, $source);
}



$data = [
    'title' => 'テンプレートエンジン2',
    'author' => 'solder'
];

view('./view2.php', $data);
```

```php:view2.php
<h1>%title%</h1>
<p>この投稿は%author%によって書かれています。</p>
```

今度はview関数内でpreg_replace_callbackを使用しています。
こうすることで、テンプレートファイル内で`%title%`⇒`$title`の値に置換することができ、PHPコードの一切ないテンプレートファイルが作成できます。
これであれば、プログラムが分からないマークアップエンジニアの人でも簡単に編集できそうです。

ただし、この場合if文やループ処理が掛けません。

###出力結果
```html:outpot.html
<h1>テンプレートエンジン2</h1>
<p>この投稿はsolderによって書かれています。</p>
```

##1と2を組み合わせた形
###プログラム
```php:sample3.html
<?php

function view($template, Array $data = [])
{
    $template = makeCache($template);
    extract($data);

    require $template;
}

function makeCache($template)
{
    $cache = './cache/' . $template . '.tmp';

    if(!is_file($cache)){
        $source = file_get_contents($template);

        $source = preg_replace_callback('/\%(\w+)%/', function ($m) {
            return '<?=$' . $m[1] . '?>';
        }, $source);

        file_put_contents($cache, $source, LOCK_EX);
        echo 'create cache!'.PHP_EOL;
    }

    return $cache;
}



$data = [
    'title' => 'テンプレートエンジン3',
    'author' => 'tak-solder'
];

view('./view3.php', $data);
```

```php:view3.php
<h1>%title%</h1>
<p>この投稿は%author%によって書かれています。</p>
```

テンプレートファイルは2と同じですが、表示のロジックが若干異なります。

今回は、2の状態からキャッシュとしてphpファイルを生成して、1の処理を当てはめています。
こうすることで、1,2の両方の技法を使うことができます。

中間のキャッシュファイルをファイルに書き出すため、2回目以降に実行するときはキャッシュファイルからそのまま1の処理を行うだけで、表示するHTMLを作成可能です。
処理速度向上や負荷軽減に役立ちます。

###キャッシュファイル

```php:cache/view3.php.tmp
<h1><?=$title?></h1>
<p>この投稿は<?=$author?>によって書かれています。</p>
```

###出力結果
```html:output.html
<h1>テンプレートエンジン3</h1>
<p>この投稿はtak-solderによって書かれています。</p>
```


ちょっとしたプログラムのためにいちいちsmartyを導入するのは大変！というときに参考にしてみてはいかがでしょうか。
あくまでも、参考程度にしてくださいね(^_^;

⇒続編：[簡易テンプレートエンジンを作る(2)](http://qiita.com/tak-solder/items/87bc4dd4803654c0c84a)
RailsのscaffoldをPhoenixでやる


Railsのscaffoldと同じことがPhoenixでもできるっぽい。

とりあえず`mix phoenix.gen.html`でいけるっぽい


```bash:zsh
$ mix phoenix.gen.html User users name:string email:string bio:string number_of_pets:integer
Compiled lib/hello_phoenix.ex
Compiled web/web.ex
Compiled lib/hello_phoenix/repo.ex
Compiled web/router.ex
Compiled web/views/error_view.ex
Compiled web/controllers/page_controller.ex
Compiled web/views/page_view.ex
Compiled lib/hello_phoenix/endpoint.ex
Compiled web/views/layout_view.ex
Generated hello_phoenix app
* creating priv/repo/migrations/20150603150928_create_user.exs
* creating web/models/user.ex
* creating test/models/user_test.exs
* creating web/controllers/user_controller.ex
* creating web/templates/user/edit.html.eex
* creating web/templates/user/form.html.eex
* creating web/templates/user/index.html.eex
* creating web/templates/user/new.html.eex
* creating web/templates/user/show.html.eex
* creating web/views/user_view.ex
* creating test/controllers/user_controller_test.exs

Add the resource to the proper scope in web/router.ex:

    resources "/users", UserController

and then update your repository by running migrations:

    $ mix ecto.migrate
```

指示されているとおりにする。

まずは `config/router.ex` に追加する。

```elixir:config/router.ex
defmodule HelloPhoenix.Router do
  use HelloPhoenix.Web, :router
  
  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
  end

   pipeline :api do
     plug :accepts, ["json"]
   end

   scope "/", HelloPhoenix do
     pipe_through :browser # Use the default browser stack

     get "/", PageController, :index
     # ここらに突っ込む
     resources "/users", UserController
   end

   # Other scopes may use custom stacks.
   # scope "/api", HelloPhoenix do
   #   pipe_through :api
   # end
 end

```

`user`テーブル作るためにmigrateする。

```bash:zsh
$ mix ecto.migrate                                                                                                                 
[info] == Running HelloPhoenix.Repo.Migrations.CreateUser.change/0 forward
[info] create table users
[info] == Migrated in 0.1s
```

## 結果
[http://localhost:4000/users](http://localhost:4000/users)

![phoenix_scafolled.png](https://qiita-image-store.s3.amazonaws.com/0/16725/f1956ff9-18b4-4859-548d-c4716c15dd2f.png "phoenix_scafolled.png")


## 参考
http://www.phoenixframework.org/v0.13.1/docs/ecto-models
CentOS7にNginx1.9をインストールするChefのレシピ

[CentOS7にNginx1.9をインストールする方法](http://qiita.com/DQNEO/items/fdf6d12f02b0014fd42f)
 をChef化してみます。

Cookbook名は`nginx`、置き場所は`$repo/site-cookbooks/nginx`とます。

(ターゲットはCentOS7です。他のディストリビューションの場合は少し修正がいるかもしれません。)


# Nginxをインストールするレシピ

ちょいちょいっとレシピを書きます。

```recipes/default.rb
template "/etc/yum.repos.d/nginx.repo" do
  owner "root"
  group "root"
  mode "0644"
end

package "nginx" do
  action :install
  options "--enablerepo=nginx"
end

service "nginx" do
  action [:enable, :start]
  supports :start => true, :status => true, :restart => true, :reload => true
end
```

```templates/default/nginx.repo.erb
# nginx用のレポジトリ設定ファイル
# see http://nginx.org/en/linux_packages.html#stable
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
gpgcheck=0
enabled=0
```

これをプロビジョン実行すると、インストール完了・サービス起動・自動起動設定までやってくれます。

```
sudo chef-solo -c solo.rb -j localhost.json  -o nginx
```

ただこれだけだとNginxの設定ファイルの管理ができないので、設定ファイルの管理もやってしまいましょう。

# 設定ファイルもChefで管理するには

Nginxインストール後の/etc/nginx/ 以下をまるっとエクスポート

```
cp -ar /etc/nginx/ /vagrant/site-cookbooks/nginx/templates/default/
```

(私はVagrantを使っているのので) /vagrant/以下にコピーすることで、設定ファイルをホストマシンのレポジトリ管理下に置くことができます。

エクスポート後に、ホストマシン側で `site-cookbooks/nginx/templates/default/` をまるっとコミットします。

# 設定ファイルをプロビジョンする

さっきのレシピにこのように追記します。
設定ファイルのリストは、ディストリビューションによって異なるかもしれません。

( `conf.d`以下の設定ファイルは単なるサンプルっぽかったのではしょりました。)

```recipes/default.rb
%w{
nginx.conf
fastcgi_params
koi-utf
koi-win
mime.types
scgi_params
uwsgi_params
win-utf
}.each do |file|
  template "/etc/nginx/#{file}" do
    source file
    owner "root"
    group "root"
    mode "0644"
    notifies :start, 'service[nginx]'
    notifies :reload, 'service[nginx]'
  end
end
```

完成したらエイっとプロビジョンして、差分がでなければ (Chef Client finished, 0 resources updated のような出力が出れば)OKです。
Docker on CoreOS on MacOSX


最近はドッカァなるものが流行っていると聞いたことくらいはあるという方が増えておりますが皆さんやはり不安というかやばいんじゃないの？みたいなこと言う人も多いけど大丈夫ドッカァは怖くないよみんなやってるし最初はちょっとウッてなるかもしれないけど1回やるだけでやみつきだよ。

MacOSXを用意して黙って以下に従え。

#### ターミナルを開く

MacOSの右上の虫眼鏡アイコンをクリックして「terminal」と入力してトップヒットをクリックしたら開く。あなたはそれが何かを深く考える必要はない。

#### homebrewをインストールする

あなたはhomebrewが何かを考える必要はない。

```sh
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

#### git, brew-cask, virtualbox, vagrantをインストールする

homebrewがインストールされたらgitとbrew-caskをインストールする。brew caskでvirtualboxとvagrantもインストールする。分からなければ何も考えるな。コピペしろ。

```sh
brew tap phinze/homebrew-cask
brew install git brew-cask
brew cask install virtualbox vagrant
```

#### CoreOSのvagrantレポジトリをcloneする

coreosのイメージをビルドするためのvagrantfileをgitでcloneしてcoreosに入ってdockerコマンドを打つ。何を言っているか分からなくてもいい。何も考えるな。

```sh
mkdir ~/vagrant
cd ~/vagrant
git clone https://github.com/coreos/coreos-vagrant
cd coreos-vagrant
vagrant up
vagrant ssh
# Into the docker..
docker run -it inutano/cmatrix
```

matrix has you...

#### vagrantfileを修正する

あなたは今Vagrant経由でVirtualboxによってMacOSの上にemulateされたCoreOSの中でクジラと遊んでいる。コントロール+Cでmatrixを消してMacOSに戻る。

```sh
# Press Ctl+C to quit screensaver
exit
```

ポートフォワードとデータ永続化のためのディレクトリを作ってCoreOSにマウントする設定をVagrantfileに書き込む。

```sh
cd ~/vagrant/coreos-vagrant
mkdir ~/vagrant/coreos-vagrant/share
```
X = 4.3 - 4.2　このとき、Xの値は？（後編）


前回までの記事
[X = 4.3 - 4.2　このとき、Xの値は？（前編）](http://qiita.com/minr/items/9d88ad0dfdb176798b15)

前編では、コンピュータで小数どうしの計算を行うと、誤差が生じることを紹介しました。
後編は、それに対する対策を１つ紹介します。

#手順１：Chocolateyをインストール
```ps1:install_chocolatey.ps1
#PowerShellを管理者にて実行しておく
iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))
```

#手順２：Haskell Platformをインストール
```ps1:install_haskellplatform.ps1
choco install haskellplatform
```


#手順３：以下の関数をPowerShellで定義

```ps1:有理数計算or有理数どうしの等値判定
filter :=([string]$compare){
  $left = [Double](ghc -e "fromRational($_::Rational)")
  if($compare -eq ""){
    $left
  }else{
    $right = [Double](ghc -e "fromRational($compare::Rational)")
    $left -eq $right
  }
}
```
他にも「:!=」「:<=」・・・といったような関数を同様に用意すれば、一通りの比較演算はできそうです。

#手順４：使用例（PowerShell）
```ps1:有理数計算
"4.3 - 4.2" |:=
#0.1
```

```ps1:有理数どうしの等値判定
"4.3 - 4.2" |:= "0.1"
#True
```

面倒くさがりな筆者にとって、割と納得のいく方法になったので、一旦記事を終わりにします。（前編で、色々試すと言いましたが、すみません）
※まあ、欲を言えば、本当は「"」も「|」も「:」も付けたくなかったのですが・・・

他のアイデアがあればご教示頂けるとありがたいです。
JavaFx SceneBuilderのインストーラを配ってるサイト

オープンソース化しててOracleで手に入らなく、
Oracleで探しても辿り着けなかったので。。

会社では個人のブログやらはフィルタかかってて見れないよ！という境遇の方に展開します。
（会社での自分へも展開・・・）
以下からインストーラをダウンロードできます。

http://gluonhq.com/products/scene-builder/
Encloseを使って、Node.jsをコンパイルしてみた

## 動機
Node.jsはＣｏｏｌな言語なんですが、作った実行ファイルをみるとコードが丸見えなのが残念でした。そこで、golangみたいにNodeをネイティブにコンパイルしてみようと思いました。
## やり方
[enclose](http://enclosejs.com/)というモジュールを使います。

```
npm i -g enclose
```
これ、めっちゃ重いので注意してください。光ファイバーの人ならもっと早いのかも。32bitと64bitのバイナリをDLしているようです。

``` hello.js
console.log('hello world')
```
さっそくコンパイル対象のファイルを作成。

```
>enclose hello.js
>ls
hello		hello.js
>./hello
hello world
```
とまぁこんな感じでできました。本当にコンパイルされているのかを確かめます。

```
> cat hello  
P�����9�G�@��<������Z�������{�9��X������@uω�<������\�����P���9���T���������{$���$���KX��������<������;����`����\���������������z�����gǂ�$�Dd�D$�
```
ちゃんとグチャグチャになってますね。満足！

## 考察
思ったより簡単にコンパイルすることができました。環境はOSXですが、他のOSでもできそうな雰囲気です。ただ、速度についてはコンパイルしないほうが早いという噂も聞いたことがあります。
自作アプリが64bitバイナリ問題で新バージョンを申請出来なくなった

![builtin-ruby-syntax-hight-to-ios-01.png](https://qiita-image-store.s3.amazonaws.com/0/3885/47a5375d-f669-661b-bdf8-e8f38f9a38ea.png "builtin-ruby-syntax-hight-to-ios-01.png")

- 自作アプリの[ofruby](http://ofruby.tokyo)は[openFrameworks](http://openframeworks.jp/)+[mruby](http://www.mruby.org/)で作られていた
- openFrameworksにはiOSアプリを作るためのxcodeprojがあるのでそれをベースに作っていた

## 問題

1. AppStoreは今年の頭から **64bitバイナリを含まない新規アプリの登録を禁止** にした
2. 6/1から **既存アプリの更新も64bitバイナリを含めることが必須** になった
3. openFramewokrsの0.8系はiOSの64bitビルドができない
4. openFrameworks[0.9で64bitサポート](http://forum.openframeworks.cc/t/help-64bit-support-on-ios/17057)そしてC++11対応(!)されるらしいがまだリリースされていない
5. ざっとフォーラムの情報とか追ったけど[何時頃リリース予定か](https://github.com/openframeworks/openFrameworks/issues/3039)は見つけられなかった
6. ひとまずopenFrameworksが64bitビルドされるまではAppStoreには新バージョンをリリースすることは出来なさそう

## お願い
openFrameworksのリリース予定など何か情報をお持ちの方がいましたら教えて頂けたら大変助かります。

元記事: [自作アプリがAppStoreの64bitバイナリ問題で新バージョンを申請出来なくなった - ブログのおんがえし](http://ongaeshi.hatenablog.com/entry/64bit-binary-problem-of-appstore)
すぐに役に立つことは、すぐに役に立たなくなること

IT技術者稼業を続けていく上で、つねに技術的なことを学び続けて行かないといけないのは宿命です。では、どんなことを学んでいけばいいのでしょうか。

# 国語の授業風景
その昔、灘中学校に橋本武という国語教師がいまして、変わった授業を展開していました。文庫本にすれば1冊ぐらいの小説である「銀の匙」を、縦に横にと知的好奇心の赴くままに広げていって、なんと**3年間**かけて授業を行うというものでした。当然ながら（ページ数を見ていると）授業は進んでいないように見えるわけで、ある生徒が「こんなふうに進まない授業は、役に立つんですか？」と言ったのですが、その時にこの橋本先生は、
>「すぐに役に立つことは、すぐに役に立たなくなることだ」

と返したのだそうです。

# 技術の時間スパン
IT技術にも、いろんな時間スパンのものがあります。

* 1年〜数年スパン…特定バージョンでの挙動
* 数年〜10年スパン…特定のプラットフォーム
* 10年〜50年スパン…プログラミング言語、プログラミングパラダイム
* 50〜1000年スパン…アルゴリズム

当然ながら、プログラミングは特定のプラットフォームで実装するものですので、その具体的な挙動を知ることも必要にはなってきますが、同じ環境が10年続くほうが珍しいでしょう。たしかに、こういう具体的な挙動と紐付いた知識というのは「すぐに役に立ちますが、すぐに役に立たなくなる（ことも多い）」ものです。

一方で、C言語、LISP、Fortran、COBOLのようにプログラミング言語は数十年にわたって現役として活躍しています（むろん、過去の資産があるために同じ言語を使い続けるという事情もあるとは思いますが、既存ライブラリなど、状況次第ではまさに「資産」として活用できる場面もあります）。

アルゴリズムの世界では、クイックソートが発明から50年ちょっと、線形計画法のシンプレックス法が70年弱、ニュートン法が300年程度、ユークリッドの互除法やエラトステネスの篩は紀元前から伝わるなど、相当に息の長いものも存在しています。

# 「厚み」と「実利」
囲碁というゲームがありますが、最終目的は盤面上でどれだけの面積を稼げるかです。とはいえ、目先でこまごま稼いでいくと、盤面全体の大勢を取られてしまい、勝てなくなってしまいます。これらを表現する用語もあって、

* 厚み…将来的に勢力を張るための、根拠となるもの
* 実利…今すぐに確保できる地

この2つをどう配分していくかが、囲碁のプレイの上では重要となります。

長丁場でIT技術者をやっていくのであれば、上の囲碁でのように、技術者としての「厚み」を高めるような、今すぐに何かにつながるとも限らないけど、環境が変わってもベースとなるような、パラダイムやアルゴリズムといった知識と、今すぐ「実利」を得るために必要な、現行の環境で必要な知識を、バランスよく身につけていくのがいいでしょう。

当然ながら、具体的な状況に対応した知識がなければ実装は行えませんし、逆にベース知識を欠いた状態では環境の変化の波に押し流されていってしまうことでしょう。
[VB.NET]Obsolete属性の使用方法

今後使用して欲しくないが、互換性のために（嫌々ながらも）残しているメソッドにはObsolete属性を付加するとよいらしいよ！

書き方はこんな感じ

```vb.net:ObsoleteTest.vb
Public Class ObsoleteTest

    <Obsolete("NewMethodを使用してください。")>
    Public Sub oldMethod()

    End Sub

    Public Sub newMethod()

    End Sub

    Public Sub main()
        Me.oldMethod()

        Me.newMethod()

    End Sub

End Class
```

上記のように書くと、Visual Studioでメソッドに波線が引かれ「え～まだ旧型式のメソッドを使ってるの？旧型式が許されるのは小学生までだよね」という警告が出るようになるんだって！

![クリップボード06.png](https://qiita-image-store.s3.amazonaws.com/0/81499/56d0d135-13e9-7361-5d05-81640f7c7e42.png)

ライブラリをアップデートした時に、「このメソッドは問題が見つかったからなるべく使わないでほしいけど、既にこのメソッドを使ってるシステムが本番で大量に稼働中だよ・・・:(；ﾞﾟ'ωﾟ'):」っていう事はよくあるから、そういう時は積極的にObsolete属性を使っていきたいね！

なお、後で問題が発覚しないように綿密にテストしておけって苦情を投げつけるのはやめてね！それが理想だってのは開発してる人たちが一番分かってるんだよ！
CentOSへDockerのインストール

#Procedure

[参考サイト](https://docs.docker.com/installation/centos/)

:one: CentOSにログインし、yumでインストール
`sudo yum install -y docker`
※sudoの設定は省略


`lang インストール:
  docker.x86_64 0:1.6.0-11.0.1.el7.centos
依存性関連をインストールしました:
  docker-selinux.x86_64 0:1.6.0-11.0.1.el7.centos
完了しました!`
となれば、インストール完了。
:two: dockerのサービスを起動
`sudo service docker start`

:three: centosのimageを取得。77MB。結構時間がかかる。
`docker pull ｛イメージ名｝:｛タグ名｝`
で指定したタグのイメージをDockerリポジトリから取得してくるらしい。
どこから取得するかも指定できるみたいで、デフォルトでは[Docker Hub Resistry](https://registry.hub.docker.com/)となっているようだ。
`sudo docker pull centos`

:four: imageを確認する。
`sudo docker images centos`
`[test@localhost ~]$ sudo docker images centos
REPOSITORY          TAG                 IMAGE ID            CREATED             VIRTUAL SIZE`
何も出てこない。ここでcentosのイメージが出てくるはずだが・・・。はて？

`sudo docker images`
とすると、centosが表示された。docker.io/centosになっているからのようだ。
`REPOSITORY          TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
docker.io/centos    latest              fd44297e2ddb        6 weeks ago         215.7 MB`

:five: imageの起動
`sudo docker run -i -t centos /bin/bash`

これで、コンテナが起動した、のか？

```[root@0c9bc4668f1c /]# ls
bin  etc   lib    lost+found  mnt  proc  run   srv  tmp  var
dev  home  lib64  media       opt  root  sbin  sys  usr
[root@0c9bc4668f1c /]# pwd
/
[root@0c9bc4668f1c /]# id
uid=0(root) gid=0(root) groups=0(root)
[root@0c9bc4668f1c /]# 
```
VideoViewでres/drawable内のファイルを再生する

androidでVideoViewで動画を再生しようとしたところ「この動画を再生できません」と表示されはまった。

```java
mVideoView.setVideoURI(Uri.parse("res/drawable/ride.mp4"));
```

などと入力していたが、uriは下記のように指定しなければならないらしい。

```java
mVideoView.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.drawable.ride));
```

setVideoPathを使うならUri.parseがいらない。

```java
mVideoView.setVideoPath("android.resource://" + this.getPackageName() + "/" + R.drawable.ride);
```
<br>
一応ソースコードも乗っけておく。  
<br>
MainActivity.java

```java
public class MainActivity extends Activity {
    private VideoView mVideoView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mVideoView = (VideoView)findViewById(R.id.videoView00);
        mVideoView.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.drawable.ride));
        mVideoView.start();
    }
}
```

activity_main.xml

```xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <VideoView
        android:id="@+id/videoView00"
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" />
</LinearLayout>
```
MySQL5.1 で 4byte な utf8 文字を扱う方法


普段はほとんど PostgreSQL を使っていますが、先日 MySQL に触れる機会がありました。
その時のバージョンが MySQL5.1 だったのですが、4byteなutf8（絵文字や中国語など）を扱うためにやったことのメモです。

## utf8 と utf8mb4 という文字コード指定

MySQLの世界では

+ utf8 は 3byte までの utf8 をサポート
+ utf8mb4 は 4byte までの utf8 をサポート

となっているそうです。

これはよく知られた話のようで、「MySQL 絵文字 insert できない」などでネット検索をすると情報がたくさん得られます。

そして絵文字を扱うなら DB は utf8mb4 を選択する、という解決策にたどり着くことができるのですが、utf8mb4 は MySQL5.5.3 以降からのサポートなため、今回の MySQL5.1 な環境では使えません。

じゃあどうすればいいのか、という情報がネットではなかなか見つけられませんでした。
困り果てていたところに、会社の先輩から VARBINARY 型を使うというヒントをもらいました。
このヒントがなかったら、いまごろどうなっていたことか……。

## マルチバイト文字列が入りそうなカラムは VARBINARY 型にする

DB の文字コードは utf8 で作成しつつ、マルチバイト文字列が入りそうなカラムは VARBINARY 型でスキーマ定義をすることで、うまく扱うことができました。

3byteも4byteも関係なく、バイナリーデータとして扱ってしまうという方法です。

バイナリーデータだからといって、深刻に困るようなことはありませんでしたが、2点ほどバイナリーにしたデメリットがありました。

1. 格納データの上限サイズを決める必要がある
2. mysql_enable_utf8 => 1 の対象にならない

### 格納データの上限サイズを決める必要がある

TEXT型を使うなら、サイズ上限を自分で考えなくても DB がよしなにしてくれると思うのですが、VARBINARY型を使う場合は、スキーマ定義で VARBINARY(byte) と、上限サイズを明示しないといけなくなります。

予想しやすいデータならいいのですが、外部のデータを収集してきて保存しておく場合だと文字数に上限がないケースもあるので、別な問題として調整する必要がでてきます。

### mysql_enable_utf8 => 1 の対象にならない

こちらは perl ユーザー特有の問題だと思います。

DBD::mysql のレイヤーで、DB から抽出したデータを自動的に flaged utf8 にしてくれる便利なオプション mysql_enable_utf8 => 1 を使っている人も多いとおもいます。

VARBINARY 型にすると、文字列型ではないので flaged の対象外になるのだと思います。

perl の内部コード flaged utf8 で扱う必要がある場合には、都度、

```perl
use Encode qw(decode_utf8);
sub flaged_utf8 {
	my $str = @_;
	
	return Encode::is_utf8($str) ? $str : decode_utf8($str);
}
```

のような処理を通してあげる必要がありました。

## このメモを書いたときの環境

参考までに。

+ OS: CentOS 6.5 final
+ MySQL: 5.1
+ DB CharSet: utf8
+ Perl: 5.16.3
kitを使って、gitをシンプルに使う

普段は個人で開発しているんですが、思えばgitのコミットとresetしか使ってないなーと思って、それらに特化したラッパーを書いてみました。よかったら使ってみてください。

# インストール
```
curl https://raw.githubusercontent.com/endows/kit/master/install.sh | sudo bash
```
# 使い方
```
cd myProject
# 変更を保存
kit commit
# 直前のcommitに戻る
kit rollback
```

# 機能
## kit commit
現在のディレクトリの状態を保存します。
```
git add .
git commit -m "<timestamp>"
```
## kit rollback
直前のcommitに戻ります。ディレクトリの状態も変更されます。
つまりcommitされていない変更はすべてなかったことになります。
```
git add .
git commit -m "end"
git reset --hard HEAD~1
```

# 開発中の機能
## kit todo
ToDo形式でプロジェクトを開発することができる。
## kit create
リモートサーバ(kit.endows.tk)にレポジトリを作成

# 問い合わせ
[@kyouzyuuuuuuuu1](https://twitter.com/kyouzyuuuuuuuu1)
GitHubのプルリクエストのdiffやpatchをダウンロードする方法



## やり方

プルリクエストのURLの後ろにに .diff や .patch をつけるだけ


## 例


Pull RequestのURLが以下の場合

https://github.com/ethereum/go-ethereum/pull/1176


diff

https://github.com/ethereum/go-ethereum/pull/1176.diff

patch

https://github.com/ethereum/go-ethereum/pull/1176.patch


## パッチを当てる

多分、これでいける(未テスト)

```
patch -p1 < 1176.diff
```

## 検索用語


git, diff, patch
差分、パッチ
Angular + Coffeescript + Jade + Stylus + Livereloadのスケルトンを書いた

angularには様々な雛形が存在してますが、coffeescriptとlivereloadをシンプルに使いたかったので自分で書きました。
[endows/angular-startup](https://github.com/endows/angular-startup)
# 使い方
```
# install
git clone https://github.com/endows/angular-startup myApp
cd myApp
npm install
gulp
# http://localhost:8000
```
# 機能
## coffee,jade,stylusのビルド&自動インクルード
わざわざ読み込まなくても自動的にコンパイルして読み込みます。
## bowerを自動ロード
インストールは簡単だが読み込むのはめんどくさいbowerも自動で読み込みます。順序が指定されていれば、それの通りに。

# ディレクトリ構造
```
myApp
|--jade 
|--coffee
|--styl 　#これらのディレクトリにファイルを入れると、ビルドする
|--public #ビルドされたhtml,js,cssが入る
|--lib    #bowerライブラリが入る
```

# 問い合わせ
質問、要望、相互フォロワー募集中
[@kyouzyuuuuuuuu1](https://twitter.com/kyouzyuuuuuuuu1)
Phoenix と ecto(PostgreSQL) を連携してみる


## 初期設定

Phoenix を使っている場合すでに `config/dev.exs` に設定されている模様。
PostgreSQL が嫌なときは new するときに `--mysql` でMySQLで設定できるらしい。

```ruby:root/config/dev.exs
# Configure your database
config :app_name, app_name.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "postgres",
  password: "postgres",
  database: "app_name_dev",
  size: 10 # The amount of database connections in the pool
```

## ectoコマンド

`ecto` で使用できるコマンド類は `mix` に定義されているっぽい。

```bash:zsh
$ mix -h | grep ecto
mix ecto.create         # Create the storage for the repo
mix ecto.drop           # Drop the storage for the repo
mix ecto.gen.migration  # Generate a new migration for the repo
mix ecto.gen.repo       # Generate a new repository
mix ecto.migrate        # Run migrations up on a repo
mix ecto.rollback       # Rollback migrations from a repo
```

## DBの作成

`mix ecto.create` でDBを作ってくれるっぽい。

```bash:zsh
$ mix ecto.create                                                                                                                                 
Compiled web/models/repo.ex
Compiled lib/app_name.ex
Compiled web/web.ex
Compiled lib/app_name/repo.ex
Compiled web/router.ex
Compiled web/controllers/page_controller.ex
Compiled web/views/error_view.ex
Compiled web/views/page_view.ex
Compiled lib/app_name/endpoint.ex
Compiled web/views/layout_view.ex
Generated app_name app
The database for app_name.Repo has been created.

# テスト用DB作成
$ env MIX_ENV=test mix ecto.create
```

```postgresql:postgresql
postgres=# \l
 app_name_dev | postgres | UTF8     | en_US.utf8 | en_US.utf8 |
 app_name_test | postgres | UTF8     | en_US.utf8 | en_US.utf8 |
```

できてるっぽい。

## modelの作成

`ecto` じゃなくて `phoenix` の方に定義されているっぽい。

```bash:zsh
$ mix phoenix.gen.model Tablename column1:string column2:text
```

`mix ecto.migrate` でmigrate


## 参考とか
http://www.phoenixframework.org/v0.6.2/docs/ecto-models
Spring Boot な REST API でエラーが発生した際に返すJSONはどこで誰が作ってる？？？


こんなやつ。カスタマイズしたいのだが、どこでやってるのか見当もつかず。

```
$ curl -H "X-DDD: 777" localhost:8080/rest/v2/hoge/moges/2828 | jq '.'
{
  "timestamp": "2014-12-03T19:37:09.918+0900",
  "status": 400,
  "error": "Bad Request",
  "exception": "org.springframework.web.bind.ServletRequestBindingException",
  "message": "Missing request header 'X-DDD' for method parameter of type Long",
  "path": "/rest/v2/hoge/moges/2828"
}

```

`org.springframework.boot.autoconfigure.web.BasicErrorController` ってのがあって、そこでやってた。

```java:BasicErrorController.java
private final ErrorAttributes errorAttributes;

@RequestMapping(value = "${error.path:/error}")
@ResponseBody
public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
	Map<String, Object> body = getErrorAttributes(request, getTraceParameter(request));
	HttpStatus status = getStatus(request);
	return new ResponseEntity<Map<String, Object>>(body, status);
}

private Map<String, Object> getErrorAttributes(HttpServletRequest request,
		boolean includeStackTrace) {
	RequestAttributes requestAttributes = new ServletRequestAttributes(request);
	return this.errorAttributes.getErrorAttributes(requestAttributes,
			includeStackTrace);
}
```

`org.springframework.boot.autoconfigure.web.ErrorAttributes` はインターフェースで、同パッケージに存在する DefaultErrorAttributes を使っているみたい。

DefaultErrorAttributesのインスタンスは、BasicErrorController のコンストラクタで受け取るようになってて、DefaultErrorAttributesのインスタンス生成がポイント。

で、実際にやってるのは `org.springframework.boot.autoconfigure.web.ErrorMvcAutoConfiguration`。これなら上書きできそうだ。

```java:ErrorMvcAutoConfiguration.java

@Bean
@ConditionalOnMissingBean(value = ErrorAttributes.class, search = SearchStrategy.CURRENT)
public DefaultErrorAttributes errorAttributes() {
	return new DefaultErrorAttributes();
}

@Bean
@ConditionalOnMissingBean(value = ErrorController.class, search = SearchStrategy.CURRENT)
public BasicErrorController basicErrorController(ErrorAttributes errorAttributes) {
	return new BasicErrorController(errorAttributes);
}

```
エンジニアに限らず稼ぐために大切な１２のコト

#前置き、というか雑記
「[この後滅茶苦茶リヌックスした](https://goo.gl/drUrI5)」で検索したのに、期待していたネタがなくて残念。

改めて、ヌルく遊べるプロジェクトの雛形をどうするか。ぐだぐだやってます。

趣味の領域になると、どうしても巨大で意味不明なものを作り上げて、結局死蔵することになりかねないのですよ。エンジニアを引退したての頃は、Cでノンブロッキングソケット使ってCMS書くとか、そんなことをしたりしました。今、それ、nodeでできるよ。みたいな感じですね。

そうならんためには、小出しに晒すのが一番な気はしています。ただ、そういう習慣で解決する領域はいいのですが、初期の設計におけるいろんなもんのバランスが悩み所です。仕事なら、設計問題の解は、プロジェクトのゴールから導き出せばいい。簡単ではないが明快ではあります。しかし、趣味の領域の難しさは、目的そのものが「悦楽」であるところに在ります。一応、ここで「この後滅茶苦茶リヌックスした」という言葉に繋がります。不快を遠ざけ、楽しみを得たいのです。ぜひぜひ、滅茶苦茶したい。

あんまり新しもん好き、というわけではないので、性急に新ネタを試してみよう、とは思いません。色々見てみて、React.js等々、Virtual DOM関係は、もしかしたらスキップするかもくらいの低温です。だってさ、使う側からしたら、ブラックボックスじゃんか。あと、リアクティブプログラミングなんていうパラダイムを僭称する人も居るようだけど、「描画オブジェクトはステートレスなもんにしてメッセージの送受信だけに特化した方が管理しやすいね！」って、OOPのTIPSどまりな感じがする。百歩譲ってもデザインパターンくらいじゃね？　パラダイムとは呼べない気がするな。

Qiitaっぽくねえ。これじゃブログだ。

#本題
たまたまQiitaの新着記事みたら「[エンジニアが稼ぐために大切な１２のコト](http://qiita.com/kazukichi/items/7379b75fba2f90d3cf45)」というエントリを見たので、便乗することにした。

##１．お金のことを知る
エンジニアなら、計算量オーダーというのをご存じでしょう。コストにもオーダーがあります。2変数で考えましょう。**n**は単位期間あたり売上、**t**は時間です。

　**CO(1,t)** これが固定費というやつです。
　**CO(n,t)** これが変動費というやつです。
　**CO(n log n, t)** 名前はありませんが、こういう、**CO(n,t)**より大きなオーダーの費用構造が含まれたビジネスをやると破綻します。会計上は変動費になります。
　**CO(sqrt(n log n),t)** この式自体は措定的なものですが、こういう僅かながら**CO(n,t)**よりも小さなオーダーの費用からなるビジネスモデルが成功するビジネスモデルです。ざっくり「量産効果」と言ったりします。これも変動費です。
　**CO(1,1)** 保守を前提としない場合の開発費なんかはこれです。売りきりのパッケージの開発費とかね。会計上は固定費に含まれます。見ての通り大変おいしいですが、おいしすぎてこういうものの市場価値は0円に限りなく近づいて行き、「サービスを売る」という方向への転換が必要になりました。

長期にわたってサービスを続けていくと、コストダウン圧力をかけ続けてコストを下げられるタイプのビジネスモデルはありがちですので、実は、この時間の項も **t<sup>0.97</sup>** とかになり得ます。「先行者利益」のひとつですね。

いずれにせよ、両方の項が比例を下回ることができれば勝ちです。投資を募って拡大資金を調達しても大丈夫。融資の場合は、利息のみ返済する場合でも **CO(n':融資額,t)** のオーダーになるので注意です。さあ、そろそろ「ビジネスモデル」という言葉が「アルゴリズム」に見えてきましたね？

フリーミアムモデルも、安易にはできないというのが分かりますね？　フリーライダーのコストは、どのようにコストオーダーに影響するのかを推計してみる必要があります。

ちなみに、税金の勉強は、たくさん稼ぎはじめてからで良いです。確定申告の時とかに勉強しましょう。税金は、ざっくり言って「売上－損金」の定数倍ですから、ほとんどの場合、上記の**n,t**のオーダーを変えるものではなく、よってビジネスモデルに影響を与えません。

あと、夢のないことを言うと、年収一千～二千万円の間は体感としての「豊かさ感」は変わりません。用量反応関係はこのあたりでいったん踊り場に達します。上昇志向がよっぽど強くないと、小さな倖せに安住することになります。お金に対しては、そういう体感の側面も知って、あらかじめ覚悟しておくと良いと思います。

##２．「やっていいこと」より「やりたいこと」を考える
何か、とても自分にとって大切なウォンツに気付いて、人に相談すると、時々「法律上うんぬんかんぬん」という話が出てきます。規則が好きな人が法律に詳しくなりますので、趣味で法律が好きな人は制約の多い方に法律を拡大解釈します。法律を商売の種にする人は、法律上ちょっとでもグレーなことに対して賛意を表明するのはリスクがある上、相談を受けるだけでもフィーがもらえるので、安全側に振ったアドバイスしかしません。「やりたいこと」には何らかの「やり方」があるはずです。専門家に頼りすぎずに、それを追求しましょう。

##３．起業だけが始め方じゃない
食っていくのに困らないためには、会社にぶら下がる必要はない。それは確かですが、安易な起業のススメには乗らないようにしましょう。もっと良いスキームがあるかも知れません。会社にぶら下がっているのに自営並の危機感を持って創造性を発揮することもできますし、起業していながら1社から安定収入を得て会社員のような収支で新たな増益の可能性を探ることもできますし、会社にぶら下がって片っ端から金になる勉強だけをしている人もいますし、自分は会社にぶら下がっていながら嫁さんに起業してもらってどっちかって言うとそこが軌道に乗るように尽力していたりするひともいます。そして、これらの複数を組み合わせている人もいます。色んなスキームがあるものです。よりリスクが少なく、稼ぎが良く、言ってみれば有利なスキームを追求しましょう。可能性は有限ですが、思ったより多いです。

初期の事業形態とゆうか「生活スキーム」でリスクを取るより、もっと大切な、「未来を決める」という部分でリスクを取りましょう。勇気は使うべきところに使うのです。

##４．何度外れてもいい、未来を読む
未来を読んで、先手を打ちましょう。友人や恋人や妻子供との会話でも、3手先まで読んだ上でしゃべってみましょう。伏線を張っている人が、場をコントロールするのだと実感できます。

もしくは、業界の未来、開発言語の未来、どれもこれも、外れるリスクを冒して発言してみましょう。**（やったぜ！前書きに繋がった！）** 外れて盛大に恥をかいても良いじゃないですか。誰だって、しょっちゅう外します。外さないのは、リスクの少ない言動を心がけて、後から取り繕えるようにする人だけです。が、そういう人は実業には向きません。少なくとも、「未来について何かを決める」という部分では、リスクを取る必要があります。

##やめやめ
こういう記事書ける人凄いね。眠いっす。「残りの8つはあなたが考える番なのです」とか言っとくかな。
Chrome のプロトコルハンドラについて


Google Calendar を Chrome for Mac (43.0.2357.81) で開いたときにプロトコルハンドラというものがあることに気がついた。
[![Gyazo](https://i.gyazo.com/c90314f69ead4fa01c27674c0e0b2ccd.png)](https://gyazo.com/c90314f69ead4fa01c27674c0e0b2ccd)


設定は [chrome://settings/handlers](webcal://www.google.com/calendar/ical/japanese__ja%40holiday.calendar.google.com/public/basic.ics)

[![Gyazo](https://i.gyazo.com/2bb2be85dcf1f1e7d9a9dd14ac7d04da.png)](https://gyazo.com/2bb2be85dcf1f1e7d9a9dd14ac7d04da)


Google Calendar の html を見ると、

```html
<script type="text/javascript">if(navigator&&navigator.registerProtocolHandler){navigator.registerProtocolHandler('webcal',"https://www.google.com/calendar/render?cid\x3d%s","Google Calendar");}</script>
```

webcal ハンドラで google calendar が登録されている状態で、ためしに以下のカレンダー(日本の休日) にアクセスすると、
[webcal://www.google.com/calendar/ical/japanese__ja%40holiday.calendar.google.com/public/basic.ics](webcal://www.google.com/calendar/ical/japanese__ja%40holiday.calendar.google.com/public/basic.ics)

カレンダーを追加するかどうかのダイアログが出る。
[![Gyazo](https://i.gyazo.com/80000c81aeb663ff2b7343b68b8c85b8.png)](https://gyazo.com/80000c81aeb663ff2b7343b68b8c85b8)
Goの開発環境マネージャーを書いてみた(今更感)


virtualenv的な、nvm的な、goenv的な

https://github.com/astronoka/glen


# install

``` bash
$ git clone https://github.com/astronoka/glen.git ~/.glen

# PATHが通っているところにおく
$ ln -s ~/.glen/glen.sh ~/bin/glen

$ glen version
0.1.0
```

# usage

``` bash
$ glen help

Usage: glen <cmd>

Commands:

version                         Print glen version
help                            Output help text
install <version>               Install the version passed (ex: go1.4.2)
uninstall <version>             Delete the install for <version>
list                            List installed versions
available                       List available versions (tags)
env list                        List environments
env create <envname> <version>  Create environment
env delete <envname>            Delete environment
workon <envname>                Activate environment
```

# sample

``` bash
$ glen install go1.4.2
# Building C bootstrap tool.
cmd/dist

# Building compilers and Go bootstrap tool for host, darwin/amd64.
lib9
libbio

...

test/syntax/typesw.go
test/syntax/vareq.go
test/syntax/vareq1.go

sent 177575895 bytes  received 110368 bytes  50767503.71 bytes/sec
total size is 177244465  speedup is 1.00
successfully installed: go1.4.2

$ glen list
go1.4.2

$ glen env create foo go1.4.2

$ glen env list
foo

$ glen env use foo

(foo:go1.4.2) $ type go
go is /Users/astronoka/.glen/installed/go1.4.2/bin/go

(foo:go1.4.2) $ echo $GOPATH
/Users/astronoka/.glen/env/foo
```


# 試した環境
 
``` bash
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.9.5
BuildVersion:	13F1077

$ $SHELL --version
GNU bash, version 4.3.33(1)-release (x86_64-apple-darwin13.4.0)
Copyright (C) 2013 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>

This is free software; you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
```


# やりたいこと

- デフォルトのenv
- oracleなどを自動get
- 依存パッケージ管理
UnityにおけるAndroidJavaProxyの罠


UnityからAndroid Javaをコールする場合、AndroidJavaClass, AndroidJavaObject, AndroidJavaProxyなどを使うと簡単にJavaを呼べます。これらを使うと、Javaを書かなくても簡単にC#から大体のAPIが叩けるように優れものです。特にAndroidJavaProxyは、JavaにあるinterfaceをC#側で実装できるというとんでもなく便利な代物です。

しかしながら先日このAndroidJavaProxyを使っていて少しハマったので、それを共有したいと思います。

-----------

# 罠の例

まず以下のJavaのinterfaceがあるとします。

```Java
public interface IHoge {
    void onHoge(int a, String b, String c);
}
```

これを実装したクラスをJava側に渡すための、UnityにおけるAndroidJavaProxyを継承したクラスは、ドキュメント読む限り以下のようになります。

```C#
class Hoge : AndroidJavaProxy
{
  public Hoge() : base("some.package.IHoge") {}
  void onHoge(int a, string b, string c)
  {
    // do something
  }
}
```

そしてこのクラスをインスタンス化してJava側に渡し、Javaから以下のように呼び出したとします・・・

```Java
IHoge hoge = getHoge();
hoge.onHoge(0, "some string", null);
```

# 結果

Unity > `No such proxy method: onHoge(int, string AndroidJavaObject)`

！？
何で最後の型がAndroidJavaObjectになってるんだ・・・

# コードダイブ

原因を探るために、コードダイブしてみましょう。
もちろんUnityはコード非公開ですが、C#のdllなら簡単にデコンパイルできます。
[GitHub](https://github.com/MattRix/UnityDecompiled/blob/master/UnityEngine/UnityEngine/AndroidJavaProxy.cs)
若干古いですが、有志がデコンパイルしたものをGitHubにあげてたりもしますので、こちらを見てみることにします・・・

# 原因

原因はAndroidJavaProxyの実装から読み取れます。

```C#
		public virtual AndroidJavaObject Invoke(string methodName, object[] args)
		{
			Exception ex = null;
			BindingFlags bindingAttr = BindingFlags.Instance | BindingFlags.Static | BindingFlags.Public | BindingFlags.NonPublic;
			Type[] array = new Type[args.Length];
			for (int i = 0; i < args.Length; i++)
			{
				array[i] = ((args[i] != null) ? args[i].GetType() : typeof(AndroidJavaObject));
			}
			try
			{
				MethodInfo method = base.GetType().GetMethod(methodName, bindingAttr, null, array, null);
				if (method != null)
				{
					AndroidJavaObject result = _AndroidJNIHelper.Box(method.Invoke(this, args));
					return result;
				}
			}
			（中略）
	    }
```

Javaから呼び出された時に、AndroidJavaProxyは対応するメソッドをリフレクションを使って呼び出すようになっていますが、AndroidJavaObject型をC#の基本型に変換できる場合は変換してから探します。しかしながらnullだけは型がわからないため、AndroidJavaObjectで探しているために、エラーが出てしまっていたのです。
自動変換される型はプリミティブ型と文字列型だけですが、文字列型だけnullableなのでこのようなことが起こってしまいます。

# 解決方法

ぶっちゃけリフレクションとか重いので、以下のようにすればパフォーマンス的にも良く、上のような問題は起こりません。

```C#
class Hoge : AndroidJavaProxy
{
  public Hoge() : base("some.package.IHoge") {}
  public override AndroidJavaObject Invoke(string methodName, object[] args)
  {
    onHoge((int)args[0], (string)args[1], (string)args[2]);
    return null;
  }
  void onHoge(int a, string b, string c)
  {
    // do something
  }
}
```

もちろんこれは1メソッドの場合なので、複数メソッドの場合は工夫が必要です。またエラー処理もやっていません。適宜調整して下さい。
IntelliJ IDEAでGlassFishを使う。（HelloWorldまで）

IntelliJ IDEAでGlassFishの環境構築をした記事がないので書きます。

NetBeansでは、デフォルトで組み込まれているらしいので、面倒な人はそちらをおすすめします。


**[手順]
1.GlassFishのダウンロード
2.IntelliJ IDEAでプロジェクト作成
3.IntelliJ IDEAの設定**


**1.GlassFishのダウンロード**
下記から、インストールします。
Java EE 7 Web ProfileとJava EE 7 Full Platformがありますが、
Web Profileに大体のものは揃っているので、どちらでも構いません。
https://glassfish.java.net/download.html

ダウンロードしたら、好きなディレクトリに配置してください。
自分は、/Users/User/Documents/Java/glassfish4に配置しました。
(人によっては、/optや/Libraryにおいたりしてるみたいです)

GlassFishについてはこのダウンロードして配置する作業だけです。

**2.IntelliJ IDEAでプロジェクト作成**
「File>New>Project...」を選択。
![スクリーンショット 2015-06-03 18.44.56.png](https://qiita-image-store.s3.amazonaws.com/0/40640/c963dbad-7b2b-aa6d-6a5a-d88a0aefcb71.png)

[JavaEnterprise]を選択。
SDKやJavaEEを環境に合わせて選択してください。
AplicationServerの「NEW...>GlassFish Home」から、先ほどのGlassFishのディレクトリを選んでください。
Additional Libraries and Frameworks:はWebApplicationとJSFにチェックします。
![スクリーンショット 2015-06-03 18.47.46.png](https://qiita-image-store.s3.amazonaws.com/0/40640/9e4d9b84-bc8a-a9da-d780-1cfc875366a6.png)
ここまでできたら、[Next]。

![スクリーンショット 2015-06-03 18.58.48.png](https://qiita-image-store.s3.amazonaws.com/0/40640/88ecb4df-d4be-6918-841c-f7b701c7cec2.png)
Project nameとProject locationを自由に決めて、「Finish」。

Project内に、index.xhtmlが自動生成されます。表示にはこのファイルを使用します。
![スクリーンショット 2015-06-03 19.00.42.png](https://qiita-image-store.s3.amazonaws.com/0/40640/22c7b2f2-78ed-cdaf-1403-02abdd53f917.png)
下から3行目
```html:index.xhtml
<h:outputLabel value="Hello, world"/>```
がブラウザでの表示部分になります。


**3.IntelliJ IDEAの設定**
右上にある、「Edit Configurations...」から設定をします。
![スクリーンショット 2015-06-03 19.13.18.png](https://qiita-image-store.s3.amazonaws.com/0/40640/dd070dff-96a8-0463-33d3-96d085d00aa2.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/40640/98b777db-24fa-f781-3b2b-e5ccd7752a78.png)
Serverタブ：
Open browserのAfterLanchでサーバー起動時に自動で開くURLを指定できて便利です。
パスの「~_war_exploded/」の部分を消して、http://localhost:8080/index.xhtml にしておく。
ここで、ServerDomainがない場合は、「domain1」とでも入れておきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/40640/d2c87106-46a9-e819-70d4-f53b877760cd.png)
Deploymentタブ：
「Use custom context root:」にチェックを入れます。

![image](https://qiita-image-store.s3.amazonaws.com/0/40640/687c49b2-2c60-3168-b12b-3af7508f5ddb.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/40640/d52567a6-8012-9c69-a131-3b0bea7df1d2.png)
Startup scriptに「--verbose=true」のオプションを含める必要があります。

全て設定できたら、[OK]

ここで、Artifactsが指定されていない場合（Fixが出ている場合）は、次を行ってください。
「File>Project Structure...」を開く。
![image](https://qiita-image-store.s3.amazonaws.com/0/40640/58719aea-ba53-e59e-1748-ea61dc7cbca5.png)
[Artifacts]タブを選んで、Artifactの指定する。
![image](https://qiita-image-store.s3.amazonaws.com/0/40640/bb7c262c-9903-725a-292c-2a7376f3d40e.png)
[OK]を押す。

![image](https://qiita-image-store.s3.amazonaws.com/0/40640/ec7fc91c-3aea-c0ea-a52a-9a785cc29dd4.png)
最後に、右上の再生ボタン（Runボタン）を押します。

AfterLanchを指定していれば、GlassFishが起動しはじめて、しばらくするとブラウザが立ち上がります。
![image](https://qiita-image-store.s3.amazonaws.com/0/40640/4faa5b28-ccb0-364e-9239-157da59cc956.png)
以上です。お疲れ様でした！
Atomでエディタを分割した時に見やすくする＋おまけ

どうも、[さいそん](https://twitter.com/tak723sio)です。
さて、今回はAtomでエディタを分割した時にちょっと見辛いなぁって思っていたのを解消させてみます。

## エディタの分割の仕方
Macでは`cmd + k`を押したあと分割したい方向の`矢印キー`を押すことで、エディタを分割できます。
![スクリーンショット 2015-06-03 18.52.40.png](https://qiita-image-store.s3.amazonaws.com/0/30448/01446658-4169-cb4f-f6b1-66c467f7c83e.png "スクリーンショット 2015-06-03 18.52.40.png")
こんな感じになります。まぁよくありますよね。

ただ、これだと「どっち選択してるの？？」ってなるなーっておもって、ちょっとカスタマイズしてみます。

## 分割したエディタを見やすくする
AtomはChromiumベースで出来ているアプリケーションですので、CSSをいじることができます。
やってみましょう
Macでは`~/.atom/`にもろもろユーザーが任意に設定を変えられるところがあります。
この中の`styles.less`を変えればうまいこと行きます。

```less:~/.atom/styles.less
atom-workspace-axis {
  .pane {
    opacity: 0.4;
    &.active {
      opacity: 1.0;
    }
  }
}

```
これを`styles.less`の最下部に追記してあげます。(値などはお好みで。)
すると、分割画面の選択していない方(非アクティブ)のほうに半透明がかかり、
どちらが選択されているかわかると思います。
![スクリーンショット 2015-06-03 19.01.07.png](https://qiita-image-store.s3.amazonaws.com/0/30448/713295e6-099b-932d-d24f-eed80d5ccc5b.png "スクリーンショット 2015-06-03 19.01.07.png")
こんな感じにね。
こうすれば、選ばれてるファイルだけが浮き上がったように見えて、わかりやすいね！

## 【おまけ】ちまたで噂の『痛エディタ』にしてみる
先ほどの`styles.less`にいろいろ追記して、ちまたで噂の『痛エディタ』にしてみましょう。
### 前準備
- お好きな嫁画像　x１

先ほどのLESSファイルがあったディレクトリに`images`フォルダを作りましょう。
そしてその中に画像を入れます。(例では`miku.png`を使います)。
そして

```less:~/.atom/styles.less
.overlayer {
  height: 100%;
  background-image: url([画像の絶対パス]);
  background-repeat: no-repeat;
  opacity: 0.20;
  background-size: 200px;
  background-position: bottom right;
}
```
数値などはお好みで。
うまくいくと・・・
![スクリーンショット 2015-06-03 19.24.23.png](https://qiita-image-store.s3.amazonaws.com/0/30448/43ea9551-3656-5841-2f70-71a34037b62d.png "スクリーンショット 2015-06-03 19.24.23.png")
こんな感じで、右下に画像が表示されます！
ちなみに

```less:~/.atom/styles.less
atom-workspace-axis {
  .pane {
    opacity:0.40;
    &.active {
      opacity: 1.0;
      .overlayer {
        height: 100%;
        background-image: url(/Users/saison/.atom/images/miku.png);
        background-repeat: no-repeat;
        opacity: 0.20;
        background-size: 200px;
        background-position: bottom right;
      }
    }
  }
}

```

先ほどのものと組み合わせて、アクティブになっているものにだけ表示させたりもできます。

## まとめ
Atomをパッケージだけでなく、自分の手でも使いやすいようにカスタマイズできるので、
皆さん色々試してみてください。
protractorのテストコードの中でクッキーを削除する

protractorのテストコードの中でクッキーを削除するには、
`browser.driver.manage().deleteAllCookies();`
と書けば良い。

テストの実行でクッキーに入った値を、そのあとに実行したテストに影響させたくない場合は、

```
  afterEach(function() {
    browser.driver.manage().deleteAllCookies();
  });
```
で消しておくと安心。
【jQuery】datetimepicerプラグイン

カレンダーを表示するプラグイン。
テキストをクリックするとカレンダーが表示されてそこで日付を選択する。

jQueryUIやbootstrapに似た名前のがあるけど、xdsoftというところが出している。

##使い方

[github](https://github.com/xdan/datetimepicker)からプラグイン本体とCSSをダウンロードして読み込み。

```html:読み込み
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
```

```html:html
<input id="datetimepicker" type="text" >
```

```js:jQuery
$('#datetimepicker').datetimepicker();
```

##各種オプション
何ができるかは[公式ドキュメント](http://xdsoft.net/jqplugins/datetimepicker/)や、[HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較](http://techracho.bpsinc.jp/shibuya/2014_10_15/19114)などを参照すると良いかもしれない。


オプションは、パラメータにオブジェクト形式で渡す。

* カレンダー選択後、テキストに設定される日付の形式

```js
format:'Y/m/d'
```

* 時刻のみカレンダー。デフォルトはtrue。

```js
datepicker:false
```

* 日付のみカレンダー。デフォルトはtrue。

```js
timepicker:false
```

* 選択可能な時刻

```js
allowTimes:[
  '12:00', '13:00', '15:00', 
  '17:00', '17:05', '17:20', '19:00', '20:00'
]
```

時間の間隔を1時間以外にする場合は、stepで指定する。

```js
step:30
```

* 日付を選択したらカレンダーを閉じる。

```js
closeOnDateSelect:true
```

* 日付選択時のコールバック

```js
onSelectDate:function(){}
```
Jade, Slimを使うなら、Sass記法かStylusを使ったほうがいいと思う

JadeやSlimはインデントで記述するHTML Preprocessorです。

__Jadeの記述__

```
#demo
  h1 title
  p lorem
  ul.list
    li
      | demo
      br
      | demo
    li demo2
```

このJadeをテキストの部分だけとってやります。

```
#demo
  h1
  p
  ul.list
    li
    li
```

そうすると何かに見えてくるはずです。
そうですね。同じインデント記法で扱えるSassやStylusのセレクタです。
このテキストを抜いたJade(Slim)を貼り付けるだけで、そのままSassなどを書き始めることができます。

__Sassに貼り付けて、宣言を書き足した__

```
#demo
  width: 32em
  margin: 0 auto
  h1
    font-size: 2em
  p
    line-height: 1.5
  ul.list
    color: #aaa
    li
      margin: 1em 0
```

SCSSを使うより、楽ですね。

Qiitaに登録したけど、何も書くことがなかったので、当たり前のことを書いてみました。
wordpress 既存サイトに導入する

wordpressが導入していない既存サイトで一部のディレクトリにwordpressを導入したい、
wordpressがあるディレクトリを１つに分かりやすくまとめておきたいというような場合の導入法。

１．wordpress導入
サブディレクトリ（wpなど）に通常通りwordpressを導入。

２．管理画面の表示設定を変更
管理画面→設定→一般で、サイトアドレスをルートURLに変更

３．wpディレクトリ直下にあるindex.phpと.htaccessをルート直下に**コピーする。**
ルート直下に.htaccessがすでにある場合、すでにあるファイルにwpディレクトリ直下の.htaccessの内容を追加する形で良いと思う。（たぶん）
**ルート直下にあるindex.phpと.htaccessはコピーする前にバックアップをとっておくこと！**

４．ルート直下のindex.phpの中身を変更
```lang:index.php
require( './wp-blog-header.php' );
```
↓
```lang:index.php
require( './wp/wp-blog-header.php' );
```
/wp/の部分はwordpressを導入したディレクトリ名。

http://www.soulmatefes.com/2013/07/wordpress-2.html
http://www.craneto.co.jp/wordpress-koneta/571/


**以下は必要ない可能性高し**

---------------------------------------------------------------------------------------------------

（５．トップページは元々の表示のままにしておきたい場合）
バックアップした、元々ルート直下にあったindex.phpをwordpressのテーマフォルダ以下にindex.phpをコピーする。
これは管理画面→設定→一般で、サイトアドレスをルートURLに変更したため。

（６．投稿記事を特定のディレクトリ以下のページに表示したい場合）
パーマリンクを/%category%/～などにして、固定ページ（ここのパーマリンクで～/blog/とかにする）を作成。
それで。固定ページ（page-blog.phpとかにする）に投稿記事を表示させるようにすれば、とりあえずは良さそう。
ただ投稿のカテゴリやタグ一覧ページは特定のディレクトリ以下にならないので、そこはどうしようかな～
うん、わからん。
Laravel5でSelectしてあればUpdate、なければInsertの書き方


超絶便利なメソッドがあります。

```
// まずはSELECTするパラメーター作成
$params = array(
	"columnA"=>"hoge",
	"columnB"=>"hogehoge"
);

// ここで魔法のfirstOrNewメソッド
$record_obj = $this->db_instance->firstOrNew($params);

// save
$record_obj->save();

```

これで長いコントローラー書かなくてよいですね！

http://laravel.com/docs/5.0/eloquent
Vue.js 0.12.0 でコンポーネント周りが変わる


[New in 0.12.0-rc](https://github.com/yyx990803/vue/releases/tag/0.12.0-rc)

* `v-component` 廃止
* `v-with` 廃止
* `paramAttributes` が `props` に改名

## 0.11 まで

```js
Vue.component('my-element', {
});
```

```html
<div v-component="my-element" v-with="foo: foo, bar: 'bar'"></div>
```

## 0.12

```js
Vue.component('my-element', {
  props: ['foo', 'bar'],
});
```

```html
<my-element foo="{{foo}}" bar="bar"></my-element>
または
<div is="my-element" foo="{{foo}}" bar="bar"></div>
```
InterfaceBuilder でUIButton内のテキストの右側に画像を配置する

 [next >]  みたいなボタンがあって、中の 「>」は画像だとする。

普通に「>」のファイルをImageを設定すると以下のようになる。 

![](https://dl.dropboxusercontent.com/u/2853804/ss20150603_1.png)

「>」の画像を右側に移動させたい。

インスペクタの `Edge` を `Content` から `image` に切り替えてinsetを調整する

![](https://dl.dropboxusercontent.com/u/2853804/ss20150603_2.png)

できた

![](https://dl.dropboxusercontent.com/u/2853804/ss20150603_3.png)

参考
http://stackoverflow.com/questions/7100976/how-do-i-put-the-image-on-the-right-side-of-the-text-in-a-uibutton
AWS：MFAをやってみる

会社でMFAが話題になった。。。
じゃぁ、やってみよう。

[公式](http://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/GenerateMFAConfig.html)も参考にしてみてください
## ユーザ作成

IAMの画面からテストのユーザを作ってみる。

> ![image](https://qiita-image-store.s3.amazonaws.com/0/81283/568fca11-b565-8808-5aa1-b5a2637707a2.png)


## 作ったユーザのMFAデバイスを有効化

作ったユーザをクリックして詳細画面に遷移すると、下の方にMFAデバイスのボタンがあります。
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81283/288ef32e-4005-6ed8-7d3d-2070977f9b1c.png)

お金がないので仮想デバイス

> ![image](https://qiita-image-store.s3.amazonaws.com/0/81283/75260158-521c-5fe3-329e-bd81a2c94938.png)

Nextを2回ほど押すと下の画面になります(QRコードが画面にドーンと出ます。)

> ![image](https://qiita-image-store.s3.amazonaws.com/0/81283/8d61d737-e1e0-3bf6-75a8-ddbce72978b9.png)
モザイク処理が面倒だったのでQRの部分はカットｗ

### QRコードを仮想MFAデバイスで読み取り
今回は[Google Authenticator](https://itunes.apple.com/jp/app/google-authenticator/id388497605?mt=8)を利用。

iPhoneか何かでGoogle Authenticatorを起動して、右上の「+」を押す。
QRコードを読み込んで6つの数字が出ればおｋ！

## Authentication Codeを設定
QRコードの画面下にAuthentication Code 1と2の欄があるので、Google Authenticatorに表示される6つの数字をまずは「Authentication Code 1」に入力。
大体30秒くらいで数字が変わるので、次の数字を「Authentication Code 2」に入力。

うまくいくと、こんな感じ。
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81283/3c93c258-6e14-4f40-4507-66a2b614ec00.png)

## MFAのユーザでログイン

IAMユーザがログインするページ(https://AWS-account-ID.signin.aws.amazon.com/console) でMFAを有効にしてログイン
>![image](https://qiita-image-store.s3.amazonaws.com/0/81283/7439d798-40aa-a22c-f7c0-3206fb883c20.png)

上手く行った！
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81283/cfce3313-e613-df6b-1994-413f40a9e88f.png)
ログイン出来たっぽい。


意外と簡単ですね。便利だわ。
wordpress 下書きをプレビューする権限はありません

基本的にはwp-config.php の認証ユニークキーの変更で良さそう。
ただ一応他のチェックもしておくべきか。

http://www.webantena.net/wordpress/donot-have-permission-to-preview-the-draft/
http://wordpress.wiki2.jp/blog/?p=518
php エラー構文について　その１

`Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}'`
というエラーが出た場合、いろいろな原因が考えられるが、自分の場合は以下で解決できた。

wordpressがphp5を使っているのに、サーバ側がphp4の状態になっていた。
↓
php5を使用するよう修正した。
:lang擬似クラスは便利

HTML5で言語を明示するために、lang属性というものがあります。
CSSには、lang属性をセレクタで指定する特別な擬似クラスがあり、`E:lang(ja)`のように書けます。

これの便利なところは、祖先要素に指定されているlang属性を、子孫の要素が暗に継承しているところです。

```html:sample1.html
<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
  <div class="elm-1" lang="en">
    <p>Thanks, world!</p>    
  </div>
  <div class="elm-2" lang="ja">
    <p>ありがとう世界！</p>    
  </div>
</body>
</html>
```

```scss:style.scss
  p {
    color: black;

    &:lang(ja) {
      color: red;
    }
  }
```

上記の例では、`elm-2`にlang属性による指定をした上で、
その子要素の擬似クラスとして`lang(ja)`を選んでいます。
（これで、日本語の段落のみ赤文字になります。）
p自体にはlang属性の指定がありません。

langに限らずですが、以下のような代替記述も可能です。

```scss:style-2.scss
  p {
    color: black;

    [lang=en] & {
      color: red;
    }
  }
```

ただ、この場合は`p`そのものに`lang="en"`を指定してある場合はマッチしませんので注意が必要です。

上記のコードだったら、別に言語ごとにセレクタを別けて書いてもいいかもしれませんが、
今回作っていたサイトが、HTMLが各言語で別ソースで、ルートのhtml要素にjaとかenとかのlangを設定し、CSSも共通、という設計だったので、この書き方がかなり有用でした。

lang擬似クラスみたいに勝手に継承してくれる属性（時には困るかもしれないけど…）等があったら教えて下さい。
wordpress 記事一覧で特定の記事を除外する

投稿詳細での関連記事など、特定の記事を表示させない一覧を作成する方法。
WP_Queryのループを用いる場合、
`'post__not_in' => array(1,2,3)`
を使う。array内は投稿IDになる

例：

```lang:archive.phpなど<?php 
$category = get_the_category(); 
$cateId = $category[0]->term_id;
						
$args = array( 
'posts_per_page'=> 3,
'cat'=> $cateId,
'post__not_in'=> array(get_the_ID())
);
$wp_query = new WP_Query($args);
if ( $wp_query->have_posts() ) :
while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>
```
get_the_ID()で現在表示している投稿記事のIDを取得している

http://www.rusica.net/heft/wp-memo-6
http://www.webopixel.net/wordpress/359.html
商品登録APIのレスポンスについて

こんにちは。

/ResultSet/Result/Status	
更新結果（このフォーマットではOKのみ）

となっていますが、
サンプルレスポンスには、NG の場合のサンプルがあります。

当方はまだ、OK しか遭遇していません。

単なる誤植でしょうか？
よろしくお願いいたします。

++++++++++++++ 追記 6-17 ++++++++++++++++++++++++++++++

NG に遭遇しました。
レスポンスフィールドに　Warning（警告） の解説しかありませんが、
以下の内容も返されるようです。

/ResultSet/Result/Error　　　　　　　エラー情報
/ResultSet/Result/Error/Target	　　どの項目で警告が生じたかです。
/ResultSet/Result/Error/Code	　　エラーコード
/ResultSet/Result/Error/Message	　　警告メッセージ

なんだか適当すぐる
子の大きさに応じて伸び縮み出来るボックスをAutolayoutでつくりたい

AutoLayoutで伸縮するレイアウトを作った時にちょっと困ったのでメモ。

# 作りたいもの

- 動的に高さを変更できる
- 中のコンテンツのAspect比は保って欲しい

| 元サイズ 1:1 | 伸縮 1:2 | 伸縮 1:3 |
|----|-----|----|
| ![single_constraints.png](https://qiita-image-store.s3.amazonaws.com/0/15000/10e37390-7982-fd9c-9968-607f361867b4.png) | ![double_constraints.png](https://qiita-image-store.s3.amazonaws.com/0/15000/1307d898-cfc4-40ad-e11c-90836613e8e0.png) | ![tripple_constraints.png](https://qiita-image-store.s3.amazonaws.com/0/15000/2b1a6cf4-40c8-b7aa-388c-eb5eaf0bea52.png) |

# 作り方

外側のViewに適当に制約をつけて埋めていく

![layout_first.png](https://qiita-image-store.s3.amazonaws.com/0/15000/9d709a5d-e7e4-1cec-3714-bb820b6fd54c.png)

- Center in Horizontal
- Center in Vertical
- Proportional With to SuperView 2 (windowに対して半分)
- Height >= 150 (最小の高さを適当に決めておく. なくてもいい)

ここれでは高さが決定できずエラーが出るが一時的に放おっておく
次に子Viewの制約をつける。

![default_constraints.png](https://qiita-image-store.s3.amazonaws.com/0/15000/6d9697ea-7379-c139-1db8-a971be5a8616.png)

四方のmerginを0にしてめいいっぱい広げ、Apsect比を優先度低めでつけておく。

- Trailling Space To: Superview
- Leading Space To: Superview
- Bottom Space To: Superview
- Top Space To: Superview
- 1:1 Ratio to: Superview (priority 500)

動的に子ViewのAspect比を切り替えるコードを入れる。

```swift
class ViewController: UIViewController {
    @IBOutlet weak var innerContentView: UIView!
    private var touched: Bool = false
    private var constraint = NSLayoutConstraint()

    @IBAction func buttonDidTouchUped(sender: AnyObject) {
        touched = !touched
        let ratio = touched ? CGFloat(2.0) : CGFloat(3.0)
        updateConstraint(ratio)
    }

    func updateConstraint(ratio: CGFloat) {
        innerContentView.removeConstraint(constraint)
        constraint = NSLayoutConstraint(
            item: innerContentView,
            attribute: NSLayoutAttribute.Height,
            relatedBy: NSLayoutRelation.Equal,
            toItem: innerContentView,
            attribute: NSLayoutAttribute.Width,
            multiplier: ratio,
            constant: CGFloat(0.0)
        )
        constraint.priority = 501
        innerContentView.addConstraints([ constraint ])
        innerContentView.updateConstraints()
    }
}
```

ここで初期値で設定したpriorityよりも高めのpriorityを入れて、`updateConstraints()` すると子Viewの大きさが動的に反映され、それに応じて親のViewの高さが伸縮する。

## コード

- https://github.com/mattak/ElasticDialogSample