OmniAICreator/Qiita-1.07M huggingface dataset:
1時間に1回程度でランダムでサイトへアクセスするcron設定をワンライナーで


## cron って何て呼ぶ派？
「クーロン」ですかね。

## 注意と警告
* 実行結果については自己責任で
* アクセス先や頻度によっては「攻撃」とみなされて、不正アクセスなどで逮捕されるので注意
* あくまで「1時間に1回程度」なので、運が悪いといつまでも実行されないし、良すぎるとたくさん実行される
* アクセス結果は取得するが、アクセスしなかった場合のログは残らない

## 用途
ツイッターのBOT(発言、フォロー)など、定期的に実行したいが、ある程度自然な感じを出したい場合。

## こんな感じ

```
02-58/7 * * * * /usr/bin/test $( expr $RANDOM \% 6 ) -eq 1 && curl -sf http://test.com/ | head -n 1 >> /home/user/cron.access.log
```

## 大意
毎時2〜58分の間に7分おきに以下のものを実行する ( 9, 16, 23, 30, 37, 44, 51, 58 )。
0〜6 の数字をランダムに取得し、1と等しければ、 http://test.com にアクセスする。
アクセスした場合、取得された結果 (大抵は HTML) の先頭1行を　/home/user/cron.access.log というファイルに出力(2回目以降は下に改行して追記)

## カスタマイズのポイント
* `02-58/7` : 2〜58分の間7分ごとに起動されるので、ここで頻度を調整する
* `6` : この数字を大きくすることで頻度が下がり、小さくすることで頻度が上がる (0は禁止)
* `http://test.com` : アクセス先の URL なので、任意に変更する
* `head -n 1` : 先頭の1行という意味なので、1を他の数字にしたり、head を tail にしたり
* `/home/user/cron.access.log` : 結果を保存するファイルなので、任意に変更する

ファイル出力が不要な場合は ` | head -n 1 >> /home/user/cron.access.log` を `> /dev/null` に変更する

## 備考
細かいことはグーグル先生や本物のシェルスクリプターさんに聞いてください。
ただの自分用のメモなので、ツッコミどころはあるかと思います。
Docker for mac (Stable channel)のインストールについて

#概要
Docker for mac のベータ版を利用してきていたが、バージョンが1.0以上になった。そのため、ベータ版から移動しようと思ったので、簡単にまとめてみた。
Toolboxとの比較については[Docker for Mac vs. Docker Toolbox](https://docs.docker.com/docker-for-mac/docker-toolbox/)を参考にしてください。
時間があるときに日本語でまとめている記事も書こうと思っていますが...

#ダウンロードとインストール
1.Docker [ホームページ](https://docs.docker.com/docker-for-mac/)にアクセス

2.Stable channel の 「Get Docker for Mac (stable)」を選択。
Docker.dmgがダウンロードされる。
![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/96755/ae29319c-e6d7-0448-06bf-c43d6bcc9a79.png)

3.アプリケーションに移動して完了
![スクリーンショット 2016-10-27 15.45.47.png](https://qiita-image-store.s3.amazonaws.com/0/96755/bd4cbd65-9a5c-c3da-acb6-2442a7d1948a.png)

4.確認作業
インストールしたアイコンをクリックして起動するまで待つ。
その後、次のようにコマンドを入力して、バージョンが表示されれば問題なし

```
$docker version
Client:
 Version:      1.12.1
 API version:  1.24
 Go version:   go1.7.1
 Git commit:   6f9534c
 Built:        Thu Sep  8 10:31:18 2016
 OS/Arch:      darwin/amd64

Server:
 Version:      1.12.1
 API version:  1.24
 Go version:   go1.6.3
 Git commit:   23cf638
 Built:        Thu Aug 18 17:52:38 2016
 OS/Arch:      linux/amd64
```

#最後に
Toolboxや以前のbeta版を利用している方は、少し手順がありますので、詳細については順次追加していきます。
Moving from Postfix/Dovecot 2.0.x/Cyrus SASL to Postfix/Dovecot 2.2.x/Dovecot SASL

CentOS 6.5/postfix/Dovecot 2.0.9/Cyrus SASL の環境から CentOS 7/postfix/Devecot 2.2.10/Dovecot SASL を移行しようとして若干はまったので備忘録。

* /etc/dovecot/conf.d/15-mailboxes.conf の設定かファイル自体の削除が必要。2.0.9 と同じように動かしたいなら namespace を明示的に指定するか、ファイルそのものを削除する。今回はとりあえず削除して動いた。
   * これ自体は 2.0.x から 2.1 のnoteに書いてある : http://wiki2.dovecot.org/Upgrading/2.1 
* CentOS 6.5/postfix/Dovecot 2.0.9/[Cyrus SASL](https://cyrusimap.org/) で構築した際は Cyrus SASL で設定するので `testsaslauthd/sasldbusers2` コマンドなどで諸々設定を確認した。CentOS 7/postfix/Devecot 2.2.10/Dovecot SASL だと https://blog.apar.jp/linux/3979/ にあるように `smtpd_sasl_type = dovecot` で指定できる。(その場合他の設定も諸々必要になる。)
   * ただし Cyrus SASL を使わない場合もれなく `testsaslauthd/sasldbusers2` などのコマンドも使えないので、IMAP の疎通確認などは telnet を使う原始的な方法になった。他の方法があれば知りたい･･･。
   * dovecot の詳細ログは http://qa.atmarkit.co.jp/q/2683 で紹介されている `auth_verbose = yes` と `auth_debug = yes` を `/etc/dovecot/dovecot.conf` に指定すると `/var/log/maillog` に出力される。
   * この設定のおかげで postfix の `mynetworks` の設定を修正できた。(`127.0.0.1/8` などの設定は `postfix test` は通ってしまうようだったが、実は間違いだった。`postconf -e 127.0.0.0/8 ...` などに修正して postfix 再起動で動いた。
      * `postconf -e` でコマンドラインから設定できるのも地味に役立った。
      * [postfixでSMTP送信時「Temporary lookup failure」エラーの原因](http://qiita.com/tukiyo3/items/b9f1ce05bb39ddd92033) も参照した。

# Reference
Thank you for those who wrote those articles!
* http://qa.atmarkit.co.jp/q/2683 
* [postfixとdovecot(2.2.9)でSSL/TLS(Let's Encrypt)とSASLを用いたメールサーバ](http://qiita.com/sei0o/items/250a39a7381d066361e3)
* [postfixでSMTP送信時「Temporary lookup failure」エラーの原因](http://qiita.com/tukiyo3/items/b9f1ce05bb39ddd92033)
* http://qa.atmarkit.co.jp/q/2683
Postgresql サーバを移行したらAUTO VACUUM が実行されず、データベースが肥大化した時の話

Postgresqlデータベースの引越しを検討されている方や、引越し後にデータベースの肥大化に悩まされている方の参考になればと。

# What happened
Live環境のPostgresqlデータベースの引越しを行って数週間後、Postgresqlのdata volumeがこれまでにない異常なペースで消費されていることに気付く。

# Drill down
- record数の増加状況は移行前後で特に大きな違いはない。
- Liveのデータベースを定期的にstaging環境にrestore (+ データのクレンジング) しているが、staging環境と比較しても明らかに大きなサイズになっている。stagingにrestoreすると15GB程度のテーブルが、liveでは100GB以上。。
- 以上の２つから、vacuum周りに何か問題があるのでは？とあたりをつける。

# Check auto-vacuum execution 
```sql
select n_live_tup,n_dead_tup,schemaname, relname,last_vacuum,last_autovacuum from pg_stat_all_tables where n_dead_tup != 0;
```
このクエリの結果を見た所、データベース内で最もレコード数が多く、更新/削除も頻繁に行なわれているテーブル上で、AUTO VACUUMが実行されていないことを発見。(last_autovacuum がnullだった。)

# Investigation why
- AUTO VACUUMのtriggerは `autovacuum_vacuum_threshold` と `autovacuum_vacuum_scale_factor` というパラメータで制御されており、以下の条件を満たす時にAUTO VACUUMが実行される。

```
autovacuum_vacuum_threshold + autovacuum_vacuum_scale_factor * NUMBER_OF_ROWS > Dead Tuple 
```
https://www.postgresql.org/docs/9.3/static/runtime-config-autovacuum.html

- `autovacuum_vacuum_threshold` のdefaultは`50`、`autovacuum_vacuum_scale_factor` のdefaultは`0.2`。 問題となっているテーブルには2億件以上のレコードが格納されており、ざっくりいうと、4000万件以上の更新/削除が発生しないと、AUTO VACUUMがtriggerされない状況になってしまっていた。

# Fix
- `autovacuum_vacuum_threshold`, `autovacuum_vacuum_scale_factor` は両方データベースの再起動無しにqueryで上書きできるので、以下のクエリを実行

```sql
begin;
ALTER TABLE TARGET_TABLE SET (autovacuum_vacuum_scale_factor = 0.0);
ALTER TABLE TARGET_TABLE SET (autovacuum_vacuum_threshold = 100000);
commit;
```

- しばらく放置し、AUTO VACUUMが実行されたことを確認！！

# But...
ディスク容量の異常な増加はストップしたが、AUTO VACUUMは不要になった領域を再利用可能にするだけなので、Postgresqlとしてのディスクの利用容量は減らなかった。。

https://www.postgresql.org/docs/9.3/static/routine-vacuuming.html
>
The standard form of VACUUM removes dead row versions in tables and indexes and marks the space available for future reuse. However, it will not return the space to the operating system, 

# Take away
- Postgresqlの引越しをするときは、`autovacuum_vacuum_threshold`, `autovacuum_vacuum_scale_factor` の設定を見直す。レコード数が多い、かつ、update/deleteが頻繁に行なわれているテーブルがある時は特に注意。
- 引越し後、しばらくの間はディスクの利用状況、AUTO VACUUMの実行状況をチェックする。
Xamarin StudioでCocos Sharpの追加でエラーになる場合の対応

個人的にハマったのでメモを残します。

## 環境
 * Mac OS 10.11.6
 * Xamarin Studio Community 6.1.1 (build 15)

## 事象
Xamarin Studio で Forms Appのプロジェクトを作成し、NuGetでCocosSharp.PCLをインストールしようとすると、

![Screen Shot 2016-10-27 at 15.23.50.png](https://qiita-image-store.s3.amazonaws.com/0/44959/8b9ccbd2-6cba-5f8a-65ac-4d41951d0294.png)
![Screen Shot 2016-10-27 at 15.24.04.png](https://qiita-image-store.s3.amazonaws.com/0/44959/ff52c6f9-fd38-fc08-5ddb-fe23e6871bd7.png)
![Screen Shot 2016-10-27 at 15.25.22.png](https://qiita-image-store.s3.amazonaws.com/0/44959/f7e58b30-02bf-389f-8edc-9506f61d4b14.png)

```
Attempting to gather dependency information for package 'CocosSharp.PCL.Shared.1.6.2' with respect to project 'CocosSharpSample', targeting '.NETPortable,Version=v4.5,Profile=Profile259'
Attempting to resolve dependencies for package 'CocosSharp.PCL.Shared.1.6.2' with DependencyBehavior 'Lowest'
Resolving actions to install package 'CocosSharp.PCL.Shared.1.6.2'
Resolved actions to install package 'CocosSharp.PCL.Shared.1.6.2'
For adding package 'CocosSharp.PCL.Shared.1.6.2' to project 'CocosSharpSample' that targets 'portable45-net45+win8+wp8+wpa81'.
Install failed. Rolling back...
Package 'CocosSharp.PCL.Shared.1.6.2' does not exist in project 'CocosSharpSample'
Package 'CocosSharp.PCL.Shared.1.6.2' does not exist in folder '/Users/iju/Projects/CocosSharpSample/packages'
Could not install package 'CocosSharp.PCL.Shared 1.6.2'. You are trying to install this package into a project that targets '.NETPortable,Version=v4.5,Profile=Profile259', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.
```
のエラーが発生しました。

## 原因
プロジェクトのTarget FrameworkにCocosSharpが対応していないものが選択されているからで、
今回は、「Windows Phone Silverlight 8」が選択されていたのが原因でした。
![Screen Shot 2016-10-27 at 15.27.11.png](https://qiita-image-store.s3.amazonaws.com/0/44959/8b4ef59e-4440-a7c2-74fb-c1bb2720f2c2.png)

## 対応内容
なので、「Windows Phone Silverlight 8」のチェックを外し、再度インストールを実施したところ、
正常にインストールできました。
![Screen Shot 2016-10-27 at 15.27.47.png](https://qiita-image-store.s3.amazonaws.com/0/44959/a6d13ebe-7f96-f313-e386-392d36a346cd.png)

hiro128さんの[個人的なメモ](http://hiro128.hatenablog.jp/entry/2016/03/03/173053)にも記載されているように、Silverlight関連は対象から外した方が良さそうです。
機械学習論文読みメモ_9

[Unsupervised Riemannian Metric Learning for Histograms Using Aitchison Transformations](http://jmlr.org/proceedings/papers/v37/le15.pdf), ICML2015
Bag of Featuresのようなヒストグラム特徴表現が使われる場合は多く、それらの間の適切な距離を定義する事は重要である。
例えばユークリッド距離はsimplex上で定義される確率分布に基づく観測に対しては適切でなく、また観測に基いて距離を適応的に学習する事も出来ない。
従来はラベルありヒストグラムデータに対してカイ二乗距離に関する距離学習を行い、simplexに対する写像変換を学習した。
本論はラベルなしデータにおいてsimplex上のリーマン計量を学習をする。
このときのリーマン計量は結局フィッシャー情報計量として見る事が可能である。
この学習で得られるsimplexに対する写像変換はAitchisonによるsimplicial perturbationと呼ばれる。
本論ではさらにこれを一般化し、ヒストグラムに関する距離を、リーマン計量上でinverse volumeを最大化する事で学習する。

[Non-Linear Cross-Domain Collaborative Filtering via Hyper-Structure Transfer](http://www.cs.nthu.edu.tw/~shwu/pubs/shwu-icml-15.pdf), ICML2015
cross domain collaborative filtering(CDCF)は、複数のドメインにおけるrating行列を活用しrecommendationを行う手法である。
従来手法では、線形相関に基づく情報しか複数ドメイン間で情報を共有する事が出来なかった。
本論では、各rating行列がhyper structureと呼ばれる構造より写像される事で実現されたものとするモデルを提案する。
このモデルを利用する事で、非線形な情報を共有する事が出来るようになる。

[The Composition Theorem for Differential Privacy](http://www.jmlr.org/proceedings/papers/v37/kairouz15.pdf), ICML2015
逐次クエリが想定される場合における差分プライバシーを考える。
通常クエリの回数に応じてプライバシレベルは下がる。
そのパライバシレベルのバウンドを改善する。
本論では、逐次クエリにおける差分プライバシーを正確にcharactrizeし、それに基づき、バウンドのオーダーを厳密に改善した。
この時の鍵の１つとして、差分プライバシーを統計的検定の枠組みで捉え直す事で、新たな不等式関係が得られるようになる。
Android 7.1.1でオーバーレイ表示が消える現象をちょっと調べてみた

##環境
Nexus 5x
Android 7.1.1（ビルド番号NPF10C）

##とりあえずとっとと対処したい人へ
アプリでオーバーレイの表示レイヤをロック画面より上に設定出来るなら問題なく使えるっぽい（しかし通知欄とかに被って正直邪魔）

##概要的なやつ
ある日Nexus 5xに7.1.1が使えるという情報を手に入れた私は意気揚々とアップデートをする。
しかしいつも使っている通信量表示アプリのオーバーレイ表示が暫くするとすうぅっ・・・と消える現象に遭遇するという。

##再現しようとして
オーバーレイのプログラムなんて書いた経験が無かっため、急いでサンプルをかき集めて作ってみたが何故かできない。もしかしたらビルドするターゲットAPIによっては起きない現象だったりするのか？
ロック画面より下のレイアに設置しても駄目だったし
唯一気になる点とすればトーストと同じレイヤに描画するとふわっと現れてふわっっと消えるという点である。この現象が発生しないOSバージョンの端末でも調べる必要があるかも。

その他何かわかったら追記予定
Submit時にサブミットボタンを殺す

CMSとかでよくやる処理だけど、よく忘れてそのたびに一から作ってる気がするのでメモ。

## Native JavaScript
``````````````````````````````````````````` {js}
(function () {

    document.addEventListener('submit', function (e) {
        var submits = document.querySelectorAll('form [type=submit]');
        Array.prototype.forEach.call(submits, function(e) {
            e.setAttribute('disabled', true);
        });

    });

}());
``````````````````````````````````````````` 

## jQuery
``````````````````````````````````````````` {js}
$(function(){
    $(document).on('submit', function(event) {
      $('form').find(':submit').prop('disabled', true);
    });
});

``````````````````````````````````````````` 
## 変更履歴
 * Jqueryの処理をattrからpropに変更しました。
   * __kanicraft__ さんありがとう！
 * console.logが入ったままだったので削除しました。
 * Native の submitボタン取得処理を修正しました。
   * __vicboss1002__ さんありがとう！
SAStrutsがもたらすもの

# SAStruts

Super Agile Struts という。 The Seasar Project のひとつ。
The Seasar Project は日本のオープンソースプロジェクト。

Struts を用いた開発の場合、設定の記述の多さ、修正毎のサーバ再起動などが開発速度を下げていた。
SAStruts では、スクリプト言語ライクに、保存(とコンパイル)を行えばすぐにアプリケーションに反映される。


「設定よりも規約」という概念がある。
例えば、特定のURLに対する実行内容を記述する際に、設定ファイルに実行対象を記述する代わりに、命名や配置の規則で実行対象を判別させる。

既存プロジェクトに参加する場合、実行対象の解決が重要な部分だと思うので、以下ではその部分に触れる。


# SAStruts の恩恵

URLから実行対象を判定する上で、主に以下の「名前」が利用される。

1. パッケージ名
2. クラス名
3. プロパティ/メソッド名
4. (JSP は) ファイルパス


ルートパッケージの名前は、 `convention.dicon` というファイルで指定されている。詳細は参考文献を参照。

アクションやアクションフォームその他は、格納場所とクラスの命名規則が以下に示すように規約で定められている。

| 分類 | 格納パス | 内容の命名 |
|:--|:--|:--|
| アクション | `ルートパッケージ.action` | `AbcAction` |
| アクションフォーム | `ルートパッケージ.form` | `AbcForm` |
| エンティティ | `ルートパッケージ.entity` | 任意 |
| サービス | `ルートパッケージ.action` | `AbcService` |
| ユーティリティ | `ルートパッケージ.action` | 任意 |


以下では、Actionを扱う。

## 実行対象の決定

アプリケーションのルートを、 `http://localhost:8080/example/` として解説する。

アプリケーションへアクセスがあった時、以下の手順でActionクラスを判別する。

1. アプリケーション名の後ろのスラッシュ以降を取り出す。
2. 最後のスラッシュまでを「パス」、それ以降を「メソッド名」とし、パスを次の手順で操作する。
    2. 最後のスラッシュを Action に置換する。
    3. 最後のスラッシュの直後を大文字にする。
    4. 全てのスラッシュを、ドットに置換する。
    5. `ルートパッケージ名.action` を先頭に付与する。このパスに対応するクラスが実行対象となる。
7. メソッド名がある場合は該当のメソッドを、ない場合は `index()` メソッドを呼び出す。

これらの手順による例を示す。
なお、アプリケーション名は「example」、ルートパッケージ名は「jp.co.myproject」とする。

| 手順 | `http://localhost:8080/example/add/` | `http://localhost:8080/example/add/submit` | `http://localhost:8080/example/list/name/` |
|:--|:-:|:-:|:-:|
| 1 | `/add/` | `/add/submit` | `/list/name/` |
| 2 | パス: `/add/` 、メソッド名: なし | パス: `/add/` 、メソッド名: `submit` | パス: `/list/name/` 、メソッド名: なし |
| 2-1 | `/addAction` | `/addAction` | `/list/nameAction` |
| 2-2 | `/AddAction` | `/AddAction` | `/list/NameAction` |
| 2-3 | `.AddAction` | `.AddAction` | `.list.NameAction` |
| 2-4 | `jp.co.myproject.action.AddAction` | `jp.co.myproject.action.AddAction` | `jp.co.myproject.action.list.NameAction` |
| 4 | `jp.co.myproject.action.AddAction#index()` | `jp.co.myproject.action.AddAction#submit()` | `jp.co.myproject.action.list.NameAction#index` |

## 実行対象の関数に関する規則

URLに対して実行される関数には以下の規則がある。

- `@Execute` アノテーションが付与されていること
- 戻り値は String 、引数なしの関数であること
- 戻り値が示すものは遷移先のパスであり、遷移が必要ない場合には null を返すこと

JSPが遷移先になっている場合、その探索パスがhttpやスラッシュ以外から始まるならば、Actionに対応するディレクトリから探索される。

例えば、 `jp.co.myproject.action.AddAction#submit()` が `"success.jsp"` を返すならば、 `/WEB-INF/view/add/success.jsp` が参照される。接頭の `/WEB-INF/view` は、プロジェクトの設定による(`web.xml` に記載がある)。

# 参考文献

- [Super Agile Struts project](http://sastruts.seasar.org/)
三大CSS設計

# OOCSS(Object Oriented CSS:オブジェクト指向CSS)

- 元・米Yahoo!のデベロッパー　ニコール・サリバン氏が提唱
- １つのまとまったHTML、CSSないしはJavaScriptで書かれた独立したスニペットとして再利用できるものをOOCSSではオブジェクトとして定義している（CSSオブジェクト）
- パーツを組み合わせて作るマルチクラス設計とも言える

原則
- 構造と見た目の分離
　コンポーネントの基本構造と具体的なルール・機能を分離する（基本構造+バリエーション）
- コンテナーとコンテンツを分離
  場所に依存しないセレクタで書くということ（#header p a{} など意味のない場所依存は再利用しにくいためよろしくない） 


# SMACSS（Scalable and Modular Architecture for CSS）

- 元・米Yahoo!のジョナサン・スヌーク氏によってOOCSSのコンセプトをベースに作られたフロントエンドに関するガイドライン
- 5つのカテゴリー（フォルダ）に分けて設計する考え方

カテゴライズ
- Base
- Layout
  命名規則：クラス名の頭に"l-"という接頭辞をつけることを推奨
- Module
- State：状態（JSなどでの変化する箇所など）
  命名規則：クラス名の頭に"is-"という接頭辞をつけることを推奨
- Theme


# BEM(Block Element Modifier)
- ロシアのYandexが考えた開発手法で使われている命名規則
- クラス名の命名規則が特徴的

命名規則(MindBEMding方針)
   Block__Element--Modifier


# 他のCSS設計（MCSS）
- Multilayer CSS
- 複数のレイヤー構造をもとにしてCSS設計するアプローチ

レイヤー
- Foundation
- Base
- Project
- Cosmetic

# まとめ
OOCSSの考えをベースに、ディレクトリー構成はSMACSS、クラス名はBEMというように、
案件によって適切な設計を考える必要がある。


# 参考文献
- 『Web制作者のためのCSS設計の教科書』（インプレス）
elastic beanstalkでrails5上でdelayed_jobを動かす場合のebextensions

ebextensionsにdelayed_job用のconfigファイルを追加する


`vim .ebextensions/delayed_job.config`

```
files:                                                                                                                                                                                                           
  "/opt/elasticbeanstalk/hooks/appdeploy/post/99_restart_delayed_job.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #!/usr/bin/env bash
      # Using similar syntax as the appdeploy pre hooks that is managed by AWS

      # Loading environment data
      EB_SCRIPT_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k script_dir)
      EB_SUPPORT_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k support_dir)
      EB_APP_USER=$(/opt/elasticbeanstalk/bin/get-config container -k app_user)
      EB_APP_CURRENT_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k app_deploy_dir)
      EB_APP_PIDS_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k app_pid_dir)

      # Setting up correct environment and ruby version so that bundle can load all gems
      . $EB_SUPPORT_DIR/envvars
      . $EB_SCRIPT_DIR/use-app-ruby.sh

      # Now we can do the actual restart of the worker. Make sure to have double quotes when using env vars in the command.
      # For Rails 4, replace script/delayed_job with bin/delayed_job
      cd $EB_APP_CURRENT_DIR
      # su -s /bin/bash -c "bundle exec script/delayed_job --pid-dir=$EB_APP_PIDS_DIR restart" $EB_APP_USER
      su -s /bin/bash -c "bin/delayed_job --pid-dir=$EB_APP_PIDS_DIR restart" $EB_APP_USER
```
Laravelで自前の配列をPaginatorに

laravelで自前で用意した配列をページャー処理する方法

ちなみに、こちらのページは
`Laravel Framework version 5.2.39`
で記載されておりますので、バージョンが異なると挙動が違うかもしれません。あしからず。

# 自前の配列をページャーする方法
本題の自前配列

以下の２つのクラスを使うやり方があり、
- Paginator
- LengthAwarePaginator　←　個人的にはこちらがオススメ
です。

なぜ、LengthAwarePaginatorがオススメかというと
Paginator を作ったときの(デフォルトの)ページがあまり好きじゃないからですｗ

## Paginator を使った場合
```PlayerContorler.php
$players = new Paginator($list, $disp_limit, $page, array('path'=>'/player'));
```

|パラメータ|内容|
|:-----------------|:------------------:|
| $list | 自前の配列(array())※１ |
| $disp_limit| 1ページに表示する数|
| $page| 現在のページ番号|
| array('path'=>'/player')| オプションをarrayで指定※２|
※１）配列は全てでは無い。そのページで表示する分の配列。
取り出しは「array_slice」等使って自分でなんとかしてください。
count(list)>disp_limit だと disp_limit 分までしか出ません。
（…ただなぜか disp_limit よりちょっと多めに list を入れておかないと「>>次」のページが出なかった・・・）
※２）最低限、前/次のページ行ったときのURL(path)だけ指定しておけばOK。
他のオプションは自分で調べてください。

テンプレートは割愛(→気になる人は最下部に記載しております)

### 出来上がりページイメージ
![pager2.png](https://qiita-image-store.s3.amazonaws.com/0/92773/e1571f63-a26d-a6ee-8e8b-06874db46e1d.png)

**↑ページボタンがなんか好きくない！！**
そこで・・・

## LengthAwarePaginator を使った場合★本命★
```PlayerContorler.php
use Illuminate\Pagination\LengthAwarePaginator;

$players = new LengthAwarePaginator($list , $all_num, $disp_limit, $page, array('path'=>'/player'));
```
|パラメータ|内容|
|:-----------------|:------------------:|
| $list | 自前の配列(array()) ※１ |
| $all_num| 自前配列数(総数) |
| $disp_limit| 1ページに表示する数|
| $page| 現在のページ番号|
| array('path'=>'/player')| オプションをarrayで指定※２|
※１）配列は全てでは無い。そのページで表示する分の配列。
取り出しは「array_slice」等使って自分でなんとかしてください。
count(list)>disp_limit だと disp_limit 分までしか出ません。
※２）最低限、前/次のページ行ったときのURL(path)だけ指定しておけばOK。
他のオプションは自分で調べてください。

テンプレートは同じく割愛(→気になる人は最下部に記載しております)

### 出来上がりページイメージ
![pager1.png](https://qiita-image-store.s3.amazonaws.com/0/92773/3bf38df2-d10e-c5d4-abe4-707cdbbb9edf.png)

DBのページャーと同じようなページを作りたければ 
**「LengthAwarePaginator 」を使うのがオススメ！**

ちなみに・・・

# DB(Model)の配列をページャーする方法【蛇足】
こちらはLaravelの公式等にもあるDB(Model)のページャを作る場合です。

```PlayerContorler.php
$player_model = new Player();
$players = $player_model->where('user_status', '1')->orderBy('user_id', 'desc')->paginate(20);

return view('player.index', compact('players'));
```

```index.blade.php
@if($players->count())
    <table class="table table-condensed table-striped">
        <tr>
        <th>ユーザID</th>
        <th>ユーザ名</th>
        <th>ステータス</th>
        </tr>
        @foreach($players as $player_item)
            <tr>
            <td>{{$player_item->user_id}}</td>
            <td>{{$player_item->user_name}}</td>
            <td>{{$player_item->user_status}}</td>
            </tr>
        @endforeach
    </table>
    {!! $players->appends([])->render() !!}
@endif
```

### 出来上がりページイメージ
![pager1.png](https://qiita-image-store.s3.amazonaws.com/0/92773/3bf38df2-d10e-c5d4-abe4-707cdbbb9edf.png)
MySQLで郵便番号をハイフン区切りにして表示したい

こんにちは:whale2:
`varchar(7)`なカラムに入っている郵便番号を、**表示のときのみ**ハイフン区切りにしたい。

## 環境情報
```mysql
mysql> SELECT VERSION();
+-----------+
| VERSION() |
+-----------+
| 5.6.33    |
+-----------+
1 row in set (0.00 sec)
```

## 対象にするデータ

* 今回は NOT NULL で、必ず郵便番号が入っている前提です。

```mysql
-- こんなかんじ
mysql> select '1234567' AS zip_code;
+----------+
| zip_code |
+----------+
| 1234567  |
+----------+
1 row in set (0.00 sec)
```

## ちゅうい
数値扱いにすると0で始まる北海道、秋田県、岩手県、青森県の郵便番号が欠損してしまうため、文字列として扱いましょう。

```mysql
-- こうじゃなくて
mysql> SELECT 0000000 AS `number`;
+--------+
| number |
+--------+
|      0 |
+--------+
1 row in set (0.00 sec)


-- こう
mysql> SELECT '0000000' AS `string`;
+---------+
| string  |
+---------+
| 0000000 |
+---------+
1 row in set (0.00 sec)
```



## けつろん

```mysql
mysql> select CONCAT_WS('-', LEFT('1234567', 3), RIGHT('1234567', 4)) AS zip_code;
+----------+
| zip_code |
+----------+
| 123-4567 |
+----------+
1 row in set (0.00 sec)
```

## かんがえかた

* 元データを2回処理しているのがいけてないですが、`RIGHT()`と`LEFT()`で以下のように2つに分けます。

```mysql
--- 左から3文字をとりだす
mysql> select LEFT('1234567', 3) AS zip_code;
+----------+
| zip_code |
+----------+
| 123      |
+----------+
1 row in set (0.00 sec)

--- 右から4文字をとりだす
mysql> select RIGHT('1234567', 4) AS zip_code;
+----------+
| zip_code |
+----------+
| 4567     |
+----------+
1 row in set (0.00 sec)
```



* 分離した文字列を`CONCAT()`や`CONCAT_WS()`で結合しています。

```mysql
-- 文字列を結合する1
mysql> select CONCAT('123', '-' '4567') AS zip_cd;
+----------+
| zip_cd   |
+----------+
| 123-4567 |
+----------+
1 row in set (0.00 sec)
```

```mysql
-- 文字列を結合する2
mysql> select CONCAT_WS('-', 33, 4) AS `なんでや阪神関係ないやろ`;
+--------------------------------------+
| なんでや阪神関係ないやろ             |
+--------------------------------------+
| 33-4                                 |
+--------------------------------------+
1 row in set (0.00 sec)
```

## おわり

もっとスマートな方法もとむ。

## 参考と注釈

* [MySQL 5.6 リファレンスマニュアル  /  関数と演算子  /  文字列関数 / 12.5 文字列関数](https://dev.mysql.com/doc/refman/5.6/ja/string-functions.html)
【ネタ】CSSで「ABBA」ってちゃんと表示するコード

祝！ 再結成！

## コード

### HTML

````
<p>A<span class="rotate">B</span>BA</p>
````

### CSS

````
.rotate {
    display: inline-block;
    transform: rotateY(180deg);
}
````

## ロゴのタイプフェイスについて

[ABBA Font and ABBA Logo](http://fontmeme.com/abba-font/)によると……

>The ABBA logotype, designed in 1976 by Swedish artist Rune Söderqvist and first appeared on the cover artwork of their 1976 album Arrival, features first letters of four members’ first names set in News Gothic Bold, with the first B letter inverted. News Gothic Bold is a commercial font and details about it can be found here.

ABBA ロゴは Rune Söderqvist 氏によるオリジナルで『News Gothic Bold』をベースにしているとのことです。『News Gothic Bold』は有償なので、ウェブで使う場合は似たようなフォントを [Google Fonts](https://fonts.google.com/) で探すとかなんかうまいことやりましょう。
[Swift]Xcodeのコンパイラを変える

swiftのslackで@norio_nomuraさんが

>Xcode 8.1 GM seed添付のSwiftコンパイラでのクラッシュは、どこでクラッシュしているのか？の情報が皆無だったけど、swift.orgからダウンロードしたtoolchainはちゃんとクラッシュした箇所を教えてくれたので直せました。

と言っていたのでtoolchainをswift.orgで配布されているものに変えてみたりしました。（toolchainの中にコンパイラが入ってるのかこれがコンパイラそのものなのか、このあたりよく分からない。）

#toolchainの入手
https://swift.org からToolchainをダウンロードしてインストール

<img width="437" alt="スクリーンショット 2016-10-27 14.22.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/aecf21fa-8f96-8e76-6663-0d437bfde458.png">

#XcodeでToolchainを指定

![スクリーンショット 2016-10-27 14.23.41.png](https://qiita-image-store.s3.amazonaws.com/0/24979/b9a06683-b287-a3cf-ce49-a615071c2f1a.png)


Xcodeの設定からComponents>Toolchainを選ぶ

この状態でビルドすると進捗欄にリンクボタンが出る。ここからToolchainの変更画面に飛べる。

![スクリーンショット 2016-10-27 14.24.35.png](https://qiita-image-store.s3.amazonaws.com/0/24979/ea3ffc20-856c-8929-29e4-df842bccc48d.png)

エラーに
`/Library/Developer/Toolchains/swift-3.0.1-GM-CANDIDATE.xctoolchain/usr/bin/swift -frontend -c`みたいな文字が出ているのでちゃんと変わっていそう。
MacにMacPortsからDovecot2をインストールしてPOP3で取得する。

# MacにMacPortsからDovecot2をインストールしてPOP3で取得する。

この記事の続きです。
http://qiita.com/_teruchi/items/93b9a57298153c927be9

上記の記事では、**新たにMacPortsのPostfixをインストール**し、**IMAP** でメールを取得する方法を紹介していますが、この記事では、**MacにデフォルトでインストールされているPostfixを利用**し、**POP3** で取得する方法を紹介します。

**protocols** と **mail_location** が違います。

```:/opt/local/etc/dovecot/dovecot.conf
protocols = pop3
!include conf.d/10-master.conf
!include conf.d/10-auth.conf
ssl = no
mail_location = mbox:~/mail:INBOX=/var/mail/%u
```

設定については以下を参照しました。
http://wiki.dovecot.org/MailLocation

Macのmailログの参照は`/var/log/mail.log`になります。
（参照記事でのパスはLinux(Redhat)系のパスです）

## 追記
OSのバージョンを書きそびれていました。おそらくEl Capitanだったと思います。
Swift で optional な値を optional な NSNumber に

## はじめに

あるクラスには多くの optional な `NSNumber` プロパティがあったとします。

```.swift
extension MyDailyNumbers {
	 @NSManaged var open: NSNumber?
	 @NSManaged var high: NSNumber?
	 @NSManaged var low: NSNumber?
	 @NSManaged var closed: NSNumber?
	 @NSManaged var volume: NSNumber?
}
```

そして別のクラスが 先のクラスのインスタンスをプロパティとして持ってるとします。さて、これに値を設定するメソッドを考えてみます。そのメソッドの引数の一つ一つは `NSNumber` ではなく `Int` などでなかった場合に、それらを一つづづ `NSNumber` に変換しなければいけません。`NSNumber` は optional な値を イニシャライザでとってくれないので、`nil` かどうかを区別してあげる必要があります。

## スッキリしない解決案

そこで、`if let` を使ってこんな風に書いてしまうかもしれません。

```.swift
class MyObject {
	var numbers: DailyNumbers

	// [snip]

	func setNumbers(open: Int?, high: Int?, low: Int?, closed: Int?, volume: Int?) {
		if let open = open {
			self.numbers.open = NSNumber(value: open)
		}
		if let high = high {
			self.numbers.high = NSNumber(value: high)
		}
		if let low = low {
			self.numbers.low = NSNumber(value: low)
		}
		if let closed = closed {
			self.numbers.closed = NSNumber(value: closed)
		}
		if let volume = volume {
			self.numbers.volume = NSNumber(value: volume)
		}
	}
}
```

上記のコードには大きな問題があります。例えばパラメータに `nil` が入っていた場合はそれに相当するプロパティは更新されず、前の値が残ってしまいます。~~それを仕様だと主張するのも一つの方法ですが、~~かといって、こんな風に書いたら、きっと目眩さえ感じるかもしれません。

```.swift
	func setNumbers(open: Int?, high: Int?, low: Int?, closed: Int?, volume: Int?) {

		if let open = open {
			self.numbers.open = NSNumber(value: open)
		}
		else {
			self.numbers.open = nil
		}

		if let high = high {
			self.numbers.high = NSNumber(value: high)
		}
		else {
			self.numbers.high = nil
		}

		if let low = low {
			self.numbers.low = NSNumber(value: low)
		}
		else {
			self.numbers.low = nil
		}

		if let closed = closed {
			self.numbers.closed = NSNumber(value: closed)
		}
		else {
			self.numbers.closed = nil
		}

		if let volume = volume {
			self.numbers.volume = NSNumber(value: volume)
		}
		else {
			self.numbers.volume = nil
		}
	}
```

かといってこんなふうにも書きたくありません。

```.swift
	func setNumbers(open: Int?, high: Int?, low: Int?, closed: Int?, volume: Int?) {
		self.numbers.open = (open != nil) ? NSNumber(value: open!) : nil
		self.numbers.high = (high != nil) ? NSNumber(value: high!) : nil
		self.numbers.low = (low != nil) ? NSNumber(value: low!) : nil
		self.numbers.closed = (closed != nil) ? NSNumber(value: closed!) : nil
		self.numbers.volume = (volume != nil) ? NSNumber(value: volume!) : nil
	}
```

## as Number?

そこで、`Int` などは `NSNumber` に `as` オペレータで変換できるので、以下のように `as NSNumber?` を使うとスッキリ書くことができます。`as? NSNumber` ではありません。

```.swift
	func setNumbers(open: Int?, high: Int?, low: Int?, closed: Int?, volume: Int?) {
		self.numbers.open = open as NSNumber?
		self.numbers.high = high as NSNumber?
		self.numbers.low = low as NSNumber?
		self.numbers.closed = closed as NSNumber?
		self.numbers.volume = volume as NSNumber?
	}
```

<font color="silver">本当は違う方法を記事として書こうとして、書いているうちにこの方法を思い出したのは秘密。決して gist とかを探索しないように。</font>


## 環境に関する表記

```.log
Xcode Version 8.0 (8A218a)
Apple Swift version 3.0 (swiftlang-800.0.46.2 clang-800.0.38)
```
Azure Machine Learning ML Studio を共有する

---
|Azure Machine Learning では、ワークシート毎に権限設定を付与できます。複数人数・チーム開発にどうぞ。尚、登録にはMicrosoftアカウントに登録されたメールアドレスが必要です。|
---
手順1:ML Studioにサインイン
![tejyun1.jpg](https://qiita-image-store.s3.amazonaws.com/0/123399/f314be2c-1cf8-cbcb-d3fc-519edf50e999.jpeg)

手順2:SETTINGSを選択
![tejyun2.jpg](https://qiita-image-store.s3.amazonaws.com/0/123399/a8d63f3f-62ce-8bf8-9689-7fad3511a66f.jpeg)

手順3:USERSを選択 
![tejyun3.jpg](https://qiita-image-store.s3.amazonaws.com/0/123399/5081c567-e3c6-fbcb-4f04-c58bd9a150b1.jpeg)

手順4:NEWを選択
![tejyun4.jpg](https://qiita-image-store.s3.amazonaws.com/0/123399/24e5fb97-a03b-2b06-90ab-bca18a1fd526.jpeg)

手順5:Microsoftアカウントに登録されたメールアドレスを入力
![tejyun5.jpg](https://qiita-image-store.s3.amazonaws.com/0/123399/5358e289-4c47-9597-3d63-6ce16b9fe21c.jpeg)

以上です。
Eclipseの便利なプラグイン

# Eclipse の便利なプラグイン

1. Remote System Explorer
    2. ネットワーク越しのファイルにEclipseが使える。コード補完をする方法もあるっぽい。
3. CSV
4. Markdown
    5. 公式サイト：http://www.winterwell.com/software/markdown-editor.php
    6. github：https://github.com/winterstein/Eclipse-Markdown-Editor-Plugin
Chefを使ってtmuxをインストールしてみた


# 概要
環境構築の度に毎回tmuxをビルド＆インストールするのは手間なので、Chefを使ってインストールできるようにしてみました。

## tmuxとは

-[公開サイト](http://tmux.github.io/)

公開サイトにも明記あるようにtmuxは**tmux is a terminal multiplexer**です。
つまり、端末多重化ソフトウェアです。
tmuxを利用することで、一つのターミナルから複数の仮想端末を立ち上げたり、sshセッションが切れてしまっても再度セッションに接続し作業を再開する事ができるようになります。

# 今回作成するRecipe
- tmuxをインストールする
    - tmuxをビルドするために必要な前提ライブラリの取得やビルドを実施
    - tmuxをビルド

## Recipe. Recipeの構成
以下の1種類のファイルのみで作成します。
- Recipe

## tmux.rb: レシピのソースコード

```rb
############################
# Install ncurses

package 'Install ncurses' do
  package_name 'ncurses-devel'
  action       :install
end

############################
## Create Directory
dirs = [
  "/root/tmp",
  "/root/tmp/libevent2",
  "/root/tmp/tmux"
]

dirs.each do |dir|
  directory dir do
    mode 00775
  end
end
############################
## Install libevent2

src_libevent_name = "libevent-2.0.22-stable"
src_libevent_path = "/root/tmp/libevent2"

remote_file 'Download libevent2' do
  source "https://github.com/libevent/libevent/releases/download/release-2.0.22-stable/libevent-2.0.22-stable.tar.gz"
  path   "#{src_libevent_path}/#{src_libevent_name}.tar.gz"
  not_if { ::File.exists?(src_libevent_path+'/'+src_libevent_name+'.tar.gz') }
end

bash 'Extract libevent2' do
  cwd ::File.dirname(src_libevent_path)
  code <<-EOH
    tar -xvzf #{src_libevent_path}/#{src_libevent_name}.tar.gz
    cd #{src_libevent_name}
    ./configure --prefix=/usr/local
    make
    make install
    EOH
  not_if { ::File.exists?('/usr/local/lib/libevent.so') }
end

############################
## Install tmux

src_tmux_name = "tmux-2.3"
src_tmux_path = "/root/tmp/tmux"

remote_file 'Download tmux' do
  source "https://github.com/tmux/tmux/releases/download/2.3/tmux-2.3.tar.gz"
  path   "#{src_tmux_path}/#{src_tmux_name}.tar.gz"
  not_if { ::File.exists?(src_tmux_path+'/'+src_tmux_name+'.tar.gz') }
end

bash 'Extract tmux' do
  cwd ::File.dirname(src_tmux_path)
  code <<-EOH
    tar -xvzf #{src_tmux_path}/#{src_tmux_name}.tar.gz
    cd #{src_tmux_name}
    LDFLAGS="-L/usr/local/lib -Wl,-rpath=/usr/local/lib"
    ./configure --prefix=/usr/local
    make
    make install
    EOH
  not_if { ::File.exists?('/usr/local/bin/tmux') }
end
```

## 説明: Install libevent2
「Install libevent2」のパートでは、tmuxをビルドするために必要なlibevent2のソースコードを取得し、ビルドしています。

### remote_file
- source
    - 取得するソースコードのダウンロードURLを指定
- path
    - ダウンロードした保存先のディレクトリを指定

### bash
アーカイブファイルの展開とビルドをbashにより実施

## 説明: Install tmux
「Install tmux」のパートでは、tmuxのソースコードを取得し、ビルドを行っています。
configureする際に先にビルドしたlibeven2を参照するようにLDFLAGSにパスを設定しています。

# まとめ
tmuxが入っているのと入っていないのでは、作業効率にも随分と差が出てくるので、使った事がない人は入れてみるといいかもしれません。

-[今回のレシピ](https://github.com/shinyay/chef-oracle-env/blob/develop/recipes/tmux.rb)
Firebase Storage,RealtimeDatabaseの設定ファイルを書いてみた

Firebase Storage/RealtimeDatabase
のアクセシビリティルールを自分なりに書いたものです。

public ... 誰でもアクセス・読み書き可能。アプリだけでなく、外部からもアクセス可
common ... アプリからのアクセスは（ユーザ認証していれば）誰でも読み書き可能。チャットなど
settings ... アプリからの読み込みのみ、（ユーザ認証していれば）誰でも可能。設定ファイル、アップデートデータなど
user ... ユーザ自身のみ読み書き可能。セーブデータなど
admin ... 管理者のみ読み書き可能
private ... 誰も読み書きできない(何に使うのか？)

RealtimeDatabaseについては、簡単ですがインデックスも貼っています。
common/game以下に検索したいデータがあり、データのユニークID,ユーザID、作成日時でselectするという想定です。
インデックスはいくつでも貼ることができますが、複合キーは使えません。


## Storage
```
service firebase.storage {
  match /b/xxxx.appspot.com/o {
    match /public/{allPaths=**} {
      allow read, write;
    }
    match /common/{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    match /settings/{allPaths=**} {
      allow read: if request.auth != null;
    }
    match /user/{userId}/{allPaths=**} {
      allow read, write: if request.auth.uid == userId;
    }
    match /admin/{allPaths=**} {
      allow read, write: if request.auth.uid == "管理者のユーザID";
    }
    match /private/{allPaths=**} {
      allow read, write: if false;
    }
    match /{allPaths=**} {
      allow read, write: if false;
    }
  }
}
```


## RealtimeDatabase

```
{
  "rules": {
    "public": {
    	".read" : true,
    	".write": true,
    },
    "common": {
    	".read" : "auth != null",
    	".write": "auth != null",
        "game":{
          ".indexOn": ["id", "user_id", "created_date"]
        }
    },
    "settings": {
    	".read" : "auth != null",
    	".write": false,
        "game":{
          ".indexOn": ["id", "user_id", "created_date"]
        }
    },
    "user": {
      "$user_id": {
        ".read" : "$user_id === auth.uid",
        ".write": "$user_id === auth.uid",
      }
    },
    "admin": {
    	".read"  : "auth.uid === '管理者のユーザID'",
    	".write" : "auth.uid === '管理者のユーザID'",
    },
    "private": {
    	".read" : false,
    	".write": false,
    },
    ".read" : false,
    ".write": false,
  }
}

```


### インデックスについて

ちなみにインデックスは、自身より深いディレクトリのキーに対して貼ることも可能です。
例えば以下のようなデータ構造になっているとして（NoSQLとして良い構造ではありません）

```
common
  +-- user
    +-- <$USER_ID>
      +-- id
      +-- item_history
        +-- <$ITEM_ID>
          +-- buy_date
    +-- <$USER_ID>
      +-- id
      +-- item_history
        +-- <$ITEM_ID>
          +-- buy_date
```

指定のアイテムを指定の日時以降に購入したユーザを検索したいというような時、userディレクトリで buy_dateの値を元に検索クエリを発行することになりますが、その場合

```
    "user": {
        ".indexOn": ["item_history/<$ITEM_ID>/buy_date"]
    },

```
と記述することで、クエリを発行することができます。
AdobeXDを業務でバリバリ使ってる所感書く

# AdobeXDはいいぞ
今更自分が言うまでもなく、もはや各所でその利便性についての言及やまとめ記事があがっていますが、実際に実践で使ってみてメチャクチャ役に立ってるので、経験に伴う所感などを書きたいと思います。

### 前置き
自分はデザイナー職ではなく、エンジニアです。
バリバリグラフィックソフトを扱う人間の目線の記事ではありません。

# 要件定義で便利だったこと
みんな大好き要件定義！！自分の仕事では このシーンで1番AdobeXD（以下、XD）が活躍してくれています。

## 動作が軽快ということは本当にいいぞ
XDの長所としてよく語られる点ですね。
__君ほんとにAdobeさんちの子？__とききたくなる立ち上がりの早さと動作の軽快さです。これの何が本当に良いかって__打ち合わせの最中で取り出しても会話のリズムを途切れさせない__んですよ。大事。

## 話をしながらでもサクサク画面ワイヤーを作っていけるぞ！
自分は、打ち合わせのその場で話を進めながら大まかな画面ワイヤーを引いてイメージ確認や調整をするという進め方をよくやるのですが、XDが登場する以前は紙やホワイトボードを使っていました。
アナログな道具を使うのは、書きだす早さを重視した結果なのですが、やはり話が進むにつれて修正したり書き足したりしていると、どうしてもアナログだとゴチャゴチャしてきますので、その作業をそのままデジタルに置き換えさせることの出来た恩恵は大きいです。
次項でも触れますが、__XDは、紙やホワイトボードの作業をそのまま代替させてもイケるぐらいサクサク使えてます！__

（IllustratorやPhotoshopも同じように使えなくはないんですが、自分はデザインが本職でないこともあり、どうしても使い慣れてないと素早く作成や調整するのが難しいな〜と思っています＞＜） 

### XDは使いやすいぞ！
XDは操作要素が結構シンプルな構成なので、初めて使う場合でも割りと説明無しでガリガリ使えます。少々Adobeソフトのアフォーダンスが必要になるかなーと思うところもありますが、実際使ってみた感じでは数回トライ＆エラーすれば動作を察することが出来ました。

__非デザイナーで普段からグラフィックソフトを扱わない自分でも とっつきやすくて、実戦投入のハードルがめっちゃ低かった__です。


## マジで結構な早さで作れる事を証明するためにGIFアニメつける
実際にどんなような感じでやってるのかGIFにしたいと思います。
架空の案件で__「ある商品のキャンペーンで、クイズに答えてTwitterでつぶやいて応募」__的なものがあったとしてやってみます。

「まずトップ画面として説明と導線をつくるじゃないですか」「うんうん」
![トップページ](http://ampersand.xyz/img/qii1.gif)


「いくつかの設問画面を作るじゃないですか」「うん」
![設問](http://ampersand.xyz/img/qii2.gif)


「最後に結果ページ出して拡散ってかんじでどうでしょう」
![結果](http://ampersand.xyz/img/qii3.gif)

各画面のイメージ書き出すのにおよそ1分弱、3画面で3分弱ほどです。
決して綺麗な画面を書いた速度の話ではありませんが、打ち合わせの席にいる皆が__画面の要素が何があるかを見てイメージをつかむ__ことが大事なので、見た目の綺麗さについては強くこだわりません。
上のGIFで作成するような例であれば
「設問の選択肢は３つまでにしよう」とか「最後の画面は１００点じゃなかったらリトライボタンをつけるのはどう？」とか、そういった要素の追加・削除のイメージが沸きやすくなるという、その点が重要だと考えています。

### その場ですぐに画面イメージを確認出来るのはマジでいいぞ
アプリやウェブサイトを__作ってみてから気づく物事__って往々にしてなくならないものですが、先に動かして動作のイメージをつかめることでそういった事柄を作る前に気づくことができるようになりました。

### 見た目だけじゃなく動きのイメージの確認もあっというまだぞ
画面がどう動くかもあっという間に設定して確認できます。
![設問](http://ampersand.xyz/img/qii4.gif)

こうして「ここからトップに行くのは変じゃない？」とか、「利用規約とかの画面がなくない？」とかイメージを付けていったりします。

#### 作ったイメージを共有するのも手軽にできるぞ
XDの共有機能を使うとオンラインで動作イメージを共有できます。
<img width="359" alt="スクリーンショット 2016-10-27 12.34.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/7193/4dc2cdf2-ea00-54aa-3b5c-483f9f2791cf.png">

実際に、今回作ったものを共有したのがこちらです http://adobe.ly/2eSU49a

何が良いって__プロトタイプの動作をブラウザで確認できるのがメッチャ良い！！！__のです。
他のプロトタイピングツールだと、確認をお願いする相手にもそのツールの用意を要求しないといけないケースが多かったですが、そういった煩わしいことも無いのが最高に嬉しいです。


# 製作時に便利だったこと
正直、製作時の話は番外編みたいな感じですが、1個すごく助かった事があったので書いておきます。

## 画像ボタン量産するのに便利だった！
これがどういうことかというと、デザインフォントを使用している都合により、__超大量の画像ボタンを作る用事__があったのですが、テキストをドラッグ＆ドロップして大量の要素に一括設定ができる機能のお陰でとても素早く作ることが出来たのです。
![デザインフォントを含むようなボタンが大量に必要な場合](http://ampersand.xyz/img/qii5.gif)

調整がいる要素については、XD上でカーニングもできますよ。
![カーニング](http://ampersand.xyz/img/qii6.gif)

### 注意点
SVGで書き出すとき、フォントがアウトラインにならないことや、枠線設定等がちょっとおかしいことがあったので、SVGで書き出したときは一度イラレでアウトライン化と保存をし直すのをおすすめします。

# まとめ
__AdobeXDのおかげで今日も仕事できてます。__

他の方のXD活躍シーンも聞いてみたい感じです。では〜。
【備忘録】brew/rbenv/bundler/gem 環境構築



## 参考

[rbenv を利用した Ruby 環境の構築](http://dev.classmethod.jp/server-side/language/build-ruby-environment-by-rbenv/)
[Rails開発環境の構築（rbenvでRuby導入からBundler、Rails導入まで）（Macport編）](http://qiita.com/emadurandal/items/a60886152a4c99ce1017)
[MacにHomeBrew,rbenv,bundlerをインストールする](http://qiita.com/shinkuFencer/items/3679cfd966f6a61ccd1b)
[Ruby on Rails 5.0 インストール手順書 (OIAX BOOKS)](https://www.amazon.co.jp/Ruby-Rails-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%89%8B%E9%A0%86%E6%9B%B8-OIAX-BOOKS-ebook/dp/B01G9S11A4/ref=pd_sim_351_3?_encoding=UTF8&psc=1&refRID=MZY17M8FQC23T985MA3W)


## rbenv

### ruby-buildプラグインの更新

最新バージョンのrubyをダウンロードするために必要

```bash
cd ~/.rbenv/plugins/ruby-build
git pull
```

```bash:最新のリストを取得
rbenv install --list
```

### バージョン切り替え

```bash
rbenv versions
* system (set by /Users/mochizuki-kazuki/.rbenv/version)
  2.3.3
```

以下の順で強くなる
shell > local > global

```bash:強い
rbenv shell 2.3.3
```

```bash:弱い
rbenv global 2.3.3  # 切り替え
rbenv global system # 元に戻る
```


## gem

キーワードから探す
https://rubygems.org/

カテゴリーから探す
https://www.ruby-toolbox.com/categories/by_name

## エラー

### brew updateできないエラー

```
Error: /usr/local is not writable. You should change the ownership
and permissions of /usr/local back to your user account:
  sudo chown -R $(whoami) /usr/local
```

[素人がEl Capitanにアップデートしてみたやつ。](http://qiita.com/nori-k/items/f29481b5d65597e89552)


### zshを使っていて、shoptでエラー

shoptはbashの内蔵コマンドなのでzshで使えない
[zshをインストールするとshoptが使えない](http://oshiete1.nifty.com/qa8831115.html)

いったんbashに戻してすすめる
[ログインシェルをbashからzshに変更してみた。](http://ba-kgr.hatenablog.com/entry/2015/03/24/211031)


### Xcode Mac OS X 10.12用でエラー

```
BUILD FAILED (OS X 10.11.6 using ruby-build 20160602)

Inspect or clean up the working tree at /var/folders/xl/rk7lc6ld0z504vw9kjdnb13w0000gp/T/ruby-build.20161027122650.14471

Last 10 log lines:
  Referenced from: /private/var/folders/xl/rk7lc6ld0z504vw9kjdnb13w0000gp/T/ruby-build.20161027122650.14471/ruby-2.3.0/./miniruby (which was built for Mac OS X 10.12)
  Expected in: /usr/lib/libSystem.B.dylib

dyld: Symbol not found: _clock_gettime
  Referenced from: /private/var/folders/xl/rk7lc6ld0z504vw9kjdnb13w0000gp/T/ruby-build.20161027122650.14471/ruby-2.3.0/./miniruby (which was built for Mac OS X 10.12)
  Expected in: /usr/lib/libSystem.B.dylib
```

[Xcode8環境下でrbenvにてrubyのコンパイルに失敗する](http://qiita.com/bloody_snow/items/11b7651db583b0e998b6)


### rubyのバージョン違い

```bash:バージョン違いのエラー
Your Ruby version is 2.0.0, but your Gemfile specified 2.3.1
```
↑こんな感じのエラーが出たらshellかlocalでバージョンを切り替える

それがダメなら`which ruby`を確認。
`/usr/bin/ruby`と出たら、systemのrubyを使っているのでパスを変える

```bash:~/.zshrcに追加
eval "$(rbenv init -)"
```

> 参考
[rbenv利用時にruby -vで古いバージョンのRubyが呼ばれる場合の対処](http://easyramble.com/rbenv-ruby-version-trouble.html)

## おまけ

### rmagickのインストールエラー

[rmagickのインストールでMagick-config...noとoutdated ImageMagick version (<= 6.4.9)と言われたので解決する](http://sa-inu.hatenablog.com/entry/2016/06/23/094800)
Ajaxで取得したHTMLからタイトルを取得する方法


[他のページのHTMLを取得する方法](http://qiita.com/taishi41228/items/b6bcf974e8056afbdd2c)

[クロスドメインで他のページを取得する方法](http://qiita.com/taishi41228/items/b3827f48542ae231dff8)

\> [Ajaxで取得したHTMLからタイトルを取得する方法](http://qiita.com/taishi41228/items/6e0772122d6c80f12fa6)

index.html

```
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Get A Other Page</title>
    </head>
    <body>
        <script src="js/jquery.js"></script>
        <script src="index.js"></script>
    </body>
</html>
```

index.js

```
$.ajax({
	type: 'GET',
	url: 'http://localhost/',
	success: function(data) {
       var t = data.match(/<title>(.*)<\/title>/);
		console.log(t[1]);
	}
});
```

取得したタイトル

```
Taiyaki Web
```
10分でPython開発環境を作る (Mac OS X + Visual Studio Code)

備忘録としてメモしておきます。

##　参考

以下の記事を参考にさせていただきました。

[Qiita: MacでのPython環境構築](http://qiita.com/mas9612/items/044df8907d7491bf4159)

##　概要
以下のものがインストールし、VSCode上でデバッグできることを目標に、
以下、手順を記載します。

* Python3　最新版
* pyenv-virtualenv
* flake8
* yapf
* mypy

## pyenv-virtualenvのインストール
pyenv-virtualenvは、動作環境のバージョンを管理するツールで、rubyでのrbenvや、node.jsでのnvmのようなものです。
また、アプリケーションごとにバージョンの切り替えを容易にするだけでなく、同一バージョン内でも、それぞれ仮想環境を作成することが可能です。

* brewからインストールする
`$ brew install pyenv-virtualenv`　


* 以下を`bash_profile`に追記
`vi ~/.bash_profile`

```
export PYENV_ROOT=/usr/local/var/pyenv
if which pyenv > /dev/null; then eval "$(pyenv init -)"; fi
if which pyenv-virtualenv-init > /dev/null; then eval "$(pyenv virtualenv-init -)"; fi
```

設定を反映し、正常に動作するか確認

```
$ source ~/.bash_profile
$pyenv
```

## 最新のPythonのインストール

* インストール可能なPythonのバージョン一覧の取得
`$ pyenv install --list`

* 記事執筆時現在で最新のバージョンをインストール 
`$ pyenv install 3.5.2` 

* インストールが完了したら、グローバルの環境を最新にする
`$ pyenv global 3.5.2` 

* 念のため、pythonのバージョンがglobal設定したものになっているか確認
`$ python --version` 


## 作業フォルダの作成
pyenv-virtualにて、仮想環境を作成し、作成した作業フォルダに適用します。

* 現在の環境をベースに環境名`env_352`を作成  
`$ pyenv virtualenv 3.5.2 env_352` 

```
$ mkdir dev
$ cd dev
```
* 作業フォルダの動作環境を`env_352`に設定する   
`$ pyenv local env_352`    

## flake8のインストール
flake8はPythonのLinterです。
`pip install flake8`

## yapf
yapfはPythonのコード整形を行うツールです。
`pip install yapf`

## mypy
mypyはコード解析ツールです。Typescriptのように、静的に型チェックを行います。
個人的にはあると安心するので導入します。
`pip install mypy`

## Visual Studio Codeの設定
* 開発するフォルダに移動
* `Ctrl + Shift P`を押し、`Extensions: Install Extensions`と入力
* `Python`で検索し、トップヒットしたものをインストールする
* 画面左上の`Code→Preference→Workspace Settings`を開き、以下の項目を追加します

```json:
{
   "python.linting.flake8Enabled": true,
   "python.formatting.provider": "yapf",
   "python.linting.mypyEnabled": true
}
```
`Cmd + Shift + D`でデバッグ画面を開き、左上の歯車のマークをクリックし、
現在開いているファイルをテストする項目を追加するため、以下の記述を追加します。

```json:
{
		"name": "Test This",
		"type": "python",
		"request": "launch",
		"stopOnEntry": false,
		"pythonPath": "${config.python.pythonPath}",
		"program": "${file}",
		"debugOptions": [
			"WaitOnAbnormalExit",
			"WaitOnNormalExit",
			"RedirectOutput"
		]
	}
```

## 動作確認

* 新しいタブを作り、py形式で保存。  
以下のとおり記述し、`F5`を押すと、Debug Consoleに正常に表示される事を確認します。

```python
print('Hello, World')
```

* 間違った書き方をした後に保存すると、mypy, flake8がエラーを出す事を確認
* コードを選択→右クリック→Format Codeで、ファイルが整形されることを確認
Spring Bootでテスト時に設定すること（まとめ中）

## 使用しているVersion
Spring Boot 1.4.x
JUnit 4.x

## JUnitクラスの設定

AutoWiredなどがあるクラスをテストする場合、JUnitなどのテスティングフレームワーク上でもSpringのDI機能を動かす必要があるため、そのアノテーションが必要になる。

[Javadoc](http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/test/context/junit4/SpringRunner.html)によると、SpringRunnerという表記はよく見るSpringJUnit4ClassRunnerの別名であるので（SpringRunner is an alias for the SpringJUnit4ClassRunner.）これをアノテーションすれば良いそうである。

```junit4test.java
@RunWith(SpringRunner.class)
public class XxxxTest {

```

もうひとつ。
DIのときにbean定義を@Configurationを付けたクラスで行っている場合は、それも指定しなくてはいけない。

```junit4test.java
@RunWith(SpringRunner.class)
@ContextConfiguration(classes = AppConfig.class)
public class XxxxTest {

```

AppConfigクラスで、DI対象のクラスを全てDI出来るようになっていればOK。

```AppConfig.java
@Configuration
@ComponentScan("com.xxx.repository") // DIしたいコンポーネントがあるpackage
public class AppConfig {

    @Bean
    XxxBean xxxBean(){
        xxxBean bean = new xxxBean();
        bean.setXxx(initialization data); // 何かの初期化
        return bean;
    }

```
VirtualBox5.1.8(on Windows10)でLubuntu16.10をインストールしたときの話

#背景

- 仕事上、Linuxの環境を入れておいた方が良いかと思った
- 自由にできるのはSurface Pro 4だったので、なるべく軽くて楽な環境としてLubuntuを選択した


#インストール
VirtualBoxのディスクイメージを探したけれど無かったので、ISOから入れることにした。

1. [Lubuntu 16.10(yakkenty)](http://cdimages.ubuntu.com/lubuntu/releases/yakkety/release/)のページから[lubuntu-16.10-desktop-i386.iso](http://cdimages.ubuntu.com/lubuntu/releases/yakkety/release/lubuntu-16.10-desktop-i386.iso)をダウンロード
2. VirtualBoxでディスクを作成（ざっくり略）
3. isoイメージをマウントしてインストール(ここも略)
4. 少し引っかかったのは、タイムゾーンをUTCにするかどうかを聞かれるので「いいえ」を選択
5. 設定、ログインできたら、suとかsudoとかが使えるかどうかを確認


#VboxGuestAdditionのインストール
1. Lubuntuは必要なもの以外何も入っていないシンプル構成なので、binutils,gcc,makeを入れる。

```bash:command-line
apt-get install binutils
apt-get install gcc
apt-get install make
```

2. Guest Addtions CDイメージを挿入する

`メニュー：デバイス→Guest Additions CDイメージの挿入`

3.インストールコマンドの実行
root権限で以下を実行

```bash:command-line
./VboxLinusAddtions.run
```

#その他やったこと
- [プロプライエタリなドライバを有効にする](http://citrras.com/archives/1312)
- [日本語ディレクトリを英語に変更](http://linux-suomi.net/modules/sinyD0/index.php?id=20)

#小ネタ
##(L)ubuntuのバージョン確認方法
```bash:command-line
cat /etc/lsb-release
```


今日はここまで
generator-keystone-reactを試す  @0.0.11 

# はじめに

先日 [generator-keystone-react](https://github.com/keystonejs/generator-keystone-react) というリポジトリを見つけたので試して見ることにしました。

先に結論を書くと１年近くリポジトリは更新されておらず、react化は先に管理画面で進んでいることもあり、ここは今後開発進まないのかなと思っています。webpackに移行したいという話もあり、継続されるとしては実装方法は全然別物になりそうです。

せっかくinstallしたので
主だった部分のコードを貼っておいたのご参考まで。

# 準備

既に
[generator-keystone](https://github.com/keystonejs/generator-keystone)
でKeystoneを利用できている（環境が整っている）前提です

また今回試した環境は
node: v6.9.1
npm: 3.10.8
OS: MacOS
です。

# install

README.mdの通り

`npm install -g generator-keystone-react`

`yo keystone-react`

を実行

```
Welcome to the Keystone React generator!

? What is the name of your project? My Site
? Would you like to create a new directory for your project? No


   create package.json
   create keystone.js
   create .editorconfig
   create .gitignore
   create .jshintrc
   create Procfile
   create client/scripts/application.js
   create models/User.js
   create public/favicon.ico
   create public/styles/site.less
   create public/styles/site.min.css
   create routes/index.js
   create templates/views/index.jade
   create updates/0.0.1-admins.js

Running npm install...

<以下略> 
```

開発中のようで、非常にシンプルな構成ですね。選択肢も少ないです。

# 起動

せっかちなのですぐ実行

`node keystone.js `

![スクリーンショット 2016-10-27 11.20.29.png](https://qiita-image-store.s3.amazonaws.com/0/144303/51f9d68b-31be-67a2-fd7c-dbc833cb7a64.png)


# HTMLソース

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Site</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link href="/styles/site.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBroD1_P_WPvdhf3uyBxRzPiRbKvLiLBk"></script>
    <script src="/js/application.js"></script>
  </body>
</html>
```

**google mapが入ってしまっているのは[リポジトリ](https://github.com/keystonejs/generator-keystone-react/commit/d166a496c04ccae9078825be65b61264da4bfe89)上では削除されているようです。**


# jadeファイル

```
doctype html
html
	//- HTML HEADER
	head
		meta(charset="utf-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		meta(http-equiv="X-UA-Compatible" content="IE=edge")

		title My Site
		link(rel="shortcut icon", href="/favicon.ico", type="image/x-icon")

		//- Customise the stylesheet for your site by editing /public/styles/site.less
		//- All .less files will be automatically compiled and minified in production.
		link(href="/styles/site.min.css", rel="stylesheet")

	//- HTML BODY
	body
		#app
		script(src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCBroD1_P_WPvdhf3uyBxRzPiRbKvLiLBk')
		script(src='/js/application.js')
```

# applicaton.js

```
var React = require('react');

var App = React.createClass({
	render: function() {
		return (
			<div>Hello World</div>
		);
	}
});

React.render(
	<App />,
	document.getElementById('app')
);
```

# jsの出力方法

```
	app.use('/js', browserify('./client/scripts', {
		transform: [babelify.configure({
			plugins: ['object-assign']
		})]
	}));
```
他のページのHTMLを取得する方法


\> [他のページのHTMLを取得する方法](http://qiita.com/taishi41228/items/b6bcf974e8056afbdd2c)

[クロスドメインで他のページを取得する方法](http://qiita.com/taishi41228/items/b3827f48542ae231dff8)

[Ajaxで取得したHTMLからタイトルを取得する方法](http://qiita.com/taishi41228/items/6e0772122d6c80f12fa6)

index.html

```
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Get A Other Page</title>
    </head>
    <body>
        <script src="js/jquery.js"></script>
        <script src="index.js"></script>
    </body>
</html>
```

index.js

```
$.ajax({
	type: 'GET',
    // 取得したいページのアドレス
	url: 'http://localhost/',
	success: function(data) {
		console.log(data);
	}
});
```

取得したページ

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Taiyaki Web</title>
    ...
  </head>
  <body>
    ...
  </body>
</html>
```