OmniAICreator/Qiita-1.07M huggingface dataset:
いまどきHTMLメールを作るにはどうするの？

# はじめに

HTMLメールの良いところは何か、と聞かれれば「表現力が豊かなこと」と答えるでしょう。
高い表現力があれば、情報を伝達するだけにとどまらず、ブランドを認知させる役割も担えます。
そういうわけでHTMLメールを使うことには価値がある！

この記事では以下の点についてまとめています。

- 制約について知る
- 実装方法を知る
- 確認方法を知る

## 制約について知る: 制約の数々

### 1. メールクライアントごとの挙動の違い

クロスブラウザ対応以上に厄介です。
「どうせ古いoutlookが厄介なんでしょ？」って思うでしょう。
確かに古いやつは厄介です。もうそんなやつは捨てろ。

モダンなものの話をしましょう。
最近のメールクライアントで一番厄介なのは、意外なことにgmailです。
逆にoutlook.comは優秀で、こと表示に関してはgmailの方がレガシー感あります。

||gmail|outlook.com|Mail.app|
|:---:|:---:|:---:|:---:|
|linkタグ|使えない|**使える**|**使える**|
|styleタグ|使えない|**使える**|**使える**|

- linkタグが使える -> WEbフォントが使える
- styleタグが使える -> メディアクエリが使える

そうは言っても上記の対応は比較的新しいものです。
大半はgmailと同程度と考えて臨むべきでしょう。

### 2. テーブルレイアウト

「HTMLメールの作り方についてテーブルレイアウトの記事が見つかったけど、古い情報なんでしょ？」って思うことでしょう。
残念ながら、2015年もテーブルレイアウトです。
そしてたぶん、来年もテーブルレイアウトです。

諦めましょう。

### 3. スタイル属性からのCSS指定

linkタグもstyleタグも使えなかったらこういうことになります。

諦めましょう。

# 実装方法を知る

## どこからかBoilerplateを引っ張ってくる

一から組むとか大変面倒くさいです。
なのでボイラープレートを引っ張ってきましょう。

### A. Faundation for Emails
http://foundation.zurb.com/emails.html
CSSフレームワークのFaundation製のHTMLメールボイラープレートです。

### B. SendGridなどからインスパイアする

メール配信サービスの中にはマーケティングメールを送信できる機能があります。
中にはHTMLメールを直接編集できるものもあり、そこからコードをインスパイアして構築する手もあります。

## タスクランナーで作業を効率化する

自分の場合はgulpで構築しました。
以下の記事がとても参考にしました。
http://qiita.com/k-takam/items/1a58551868a453631bb9

特にCSSコードを自動でスタイル属性にマッピングしてくれる `gulp-inline-css` が役に立ちました。こいつがいなかったら仕事してなかったな〜。

# 確認方法を知る: PutsMailでメールの配信テスト

作ったコードはメールクライアントで読まなきゃ検証できません。
litmusが提供しているPutsMailという無料の送信サービスがありますので、そちらを利用しましょう。
https://putsmail.com/

お金に余裕のある人はlitmusの有料サービスを使うといいんじゃないでしょうか。

# まとめ

- テーブルレイアウトは現役
- レスポンシブというよりリキッドデザインを主眼に置きましょう
- 新しいoutlookは意外と良い
MacOSのMS Excelに文字コードUTF-8を文字化けなくインポートさせたい。



以下のようにして、コンバートして、Excelでファイル読み込みすれば良い。MySQLなどでTSVなどでエクスポートしてから利用すると便利。
忘れないように書いておく。

master.csv : 元ファイル
convert.csv : 変換後のファイル

インポートの際に、「日本語（mac os)」というのを選択すればうまく取り込める、、、はず。


```
nkf -s -Lw master.csv > convert.csv
```
git管理下ならfile_rec/gitを使い、その他はfile_rec/asyncを使う

`git rev-parse`の結果でその後のコマンドの内容を変えている。
exit statusが取れれば`rev-parse`じゃなくても良さそうだけど、方法がわからなかった。

```vim
function! IsInsideWorkTree()
    let l:is_inside = system('git rev-parse --is-inside-work-tree')
    return l:is_inside == "true\n" ? 1 : 0
endfunction

function! UniteFileRecSource()
    if IsInsideWorkTree()
        Unite file_rec/git
    else
        Unite file_rec/async
    endif
endfunction
```

key bind

```vim
nnoremap [unite] <Nop>
nmap <space>f [unite]
xmap <space>f [unite]
nnoremap <silent> [unite]r :<C-u>call UniteFileRecSource()<CR>
```
Adobe Color CCを使ってプロダクトのテーマカラーを統一する

先日参加したセミナーで、意外と本職のデザイナーも知らなかったので「Adobe Color CC」について紹介しようと思います。

# 概要

Webデザイナーの間ではかなり早くから話題になっていましたが、「[Adobe Color CC](https://color.adobe.com/ja/create/color-wheel/)」というこのサービスがめちゃくちゃ便利です。
複数の人間が関わるプロダクトデザインで重要なのは、**如何に配色を統一するか**ですが、このサービスはそれを支援してくれます。

# Adobe Color CCの機能

Adobe Color CCには3つの機能があります。

## 作成

[https://color.adobe.com/ja/create/color-wheel/](https://color.adobe.com/ja/create/color-wheel/)
![color-01.png](https://qiita-image-store.s3.amazonaws.com/0/95607/c2f17129-fe6e-6c3b-fb25-24d6fcb707d0.png)

「カラーホイール」では好きな配色を作成することができます。
既にコンセプトカラーが決まっている場合は、16進数などを入力してカラーパレットを作成するとよいでしょう。
一方、「これからコンセプトカラーを決める」という方は是非画面右上のカメラボタンに注目してください。

ここに適当な画像があるじゃろ？

![kekkon_kirishima.png](https://qiita-image-store.s3.amazonaws.com/0/95607/09901d94-e577-a0e0-163f-31ae54e7c8ed.png)

これをブラウザにドラッグ＆ドロップ（もしくはカメラアイコンをクリックしてファイルアップロード）して……

![color-02.png](https://qiita-image-store.s3.amazonaws.com/0/95607/1b484cc0-d9e4-f2b5-1d3f-b5f68feda382.png)

こうじゃ。

なんと！**アップロードした画像から自動的にバランスよくカラーパレットを作ってくれる**んですね！
それから、左上の「カラームード」にご注目ください。カラームードは以下の5つに加えて「カスタム」が存在します。

- カラフル
- ブライト
- ミュート
- ディープ
- ダーク

![color-03.png](https://qiita-image-store.s3.amazonaws.com/0/95607/5b2f4322-628b-0c18-9786-e2c79b7a7488.png)

ダークを選択してみました。これはこれで高級感のあるパレットですが、差し色がひとつ欲しいところですね。
では、白を別の色……落ち着いた金色に変更してみましょう。画像だとわかりづらいですが、窓のところに丸いマーカーがあります。これを掴んで、よいしょ！

![color-04.png](https://qiita-image-store.s3.amazonaws.com/0/95607/6067eef4-b9e7-8adc-3c63-395ed0bf077d.png)

このように、自動でバランスよく作ってから→カスタマイズも可能です。
作ったカラーパレットは有効利用するために保存しましょう。

![color-05.png](https://qiita-image-store.s3.amazonaws.com/0/95607/38340626-3d6c-fc17-bbea-a768845bb1e9.png)

ここでの注意点は、**ブランディングカラーとして使用する際には「このテーマを『探索』に公開します」のチェックを外しておく**ということです。
次項で説明する「探索」で、他ユーザーに使用される可能性がありますからね。
保存後はカラーパレットが表示されます。

![color-06.png](https://qiita-image-store.s3.amazonaws.com/0/95607/449bf077-dd73-fed6-9d59-02ae7235663e.png)

このページは「探索」で見つけられないだけで公開されているので、このページのURLをチーム内に展開し、各人が「ライブラリに保存」すれば同じカラーパレットを使用できます。

![color-07.png](https://qiita-image-store.s3.amazonaws.com/0/95607/ee464363-72d2-71bc-95e5-4b971489aff9.png)

### PhotoshopやIllustratorで使用する

ではPhotoshopを立ち上げてみましょう。
ライブラリのカラーテーマの中にさっき作ったカラーパレットが表示されているはずです。（「ウィンドウ」＞「ライブラリ」）

![color-08.png](https://qiita-image-store.s3.amazonaws.com/0/95607/fe54d2ca-2316-9bcb-655c-78b5e9aa933f.png)

Illustratorも同様です。

![color-09.png](https://qiita-image-store.s3.amazonaws.com/0/95607/bd631af2-c88b-263b-6645-c350da72e54c.png)

## 探索

ヘッダーの「探索」をクリックすると、カラーパレット保存時に「このテーマを『探索』に公開します」にチェックを入れたものが表示されます。
公開しようと思って公開している人は大抵タグやタイトルにコメントを入力しているので、キーワードを入力して検索。

![color-10.png](https://qiita-image-store.s3.amazonaws.com/0/95607/a56147c9-ce57-e9ac-9067-2d26f0ac1d2b.png)

気に入ったものがあれば「保存」したり、コピーして自分用にカスタマイズするのもよいでしょう。

## マイテーマ

ヘッダーの「マイテーマ」をクリックすると、これまで自分が作成したり保存したりしたテーマが表示されます。

![color-11.png](https://qiita-image-store.s3.amazonaws.com/0/95607/c18869f5-0e73-effe-0969-110d9f118990.png)

以上です！それではよいデザインライフを！
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Must translate autoresizing mask into constraints to have _setHostsLayoutEngine:YES. @swift2.0


以下のエラーがでました

```
 Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Must translate autoresizing mask into constraints to have _setHostsLayoutEngine:YES.
```

エラー文の内容はconstraintsが悪いみたいな感じ。
でも実際は、

**異なるviewに対して、同じクラスを誤まって付与していた！！！**

しょうもないけど、発見にすごく時間がかかった
tarコマンドでよくやること

# **はじめに**
- tarでよくやることをすぐわすれてしまうのでメモメモ

# **やりたいこと**
- 指定したファイルだけを圧縮したアーカイブを作成したい
- 指定したファイルを除外してアーカイブを作成したい

# **やり方**
## 指定したファイルだけを圧縮したアーカイブを作成したい
### ファイルリストを用いる方法
- `-T`オプションか`--files-from=FILE`オプションを使えばおｋ！

```shell-session:ファイルリスト
[root@centos6 ~]# cat file.list
/home/hogehoge/file1.list
/home/hogehoge/file2.list
/home/hogehoge/file3.list
```

```shell-session:ファイルリストを用いた圧縮
[root@centos6 ~]# tar zcvf file_list.tgz -T file.list
tar: メンバ名から先頭の `/' を取り除きます
/home/hogehoge/file1.list
/home/hogehoge/file2.list
/home/hogehoge/file3.list
```

```shell-session:確認
[root@centos6 ~]# tar ztvf file_list.tgz
-rw-rw-r-- root/root 55596 2015-12-09 16:08 home/hogehoge/file1.list
-rw-rw-r-- root/root 60871 2015-12-09 16:08 home/hogehoge/file2.list
-rw-rw-r-- root/root 48550 2015-12-09 16:07 home/hogehoge/file3.list
```

## 指定したファイルを除外してアーカイブを作成したい
### ファイルリストを用いる方法
- `-X`オプションか`--exclude`オプションを使えばおｋ！

```shell-session:ファイルリスト
[root@centos6 ~]# cat file.list
/home/hogehoge/file1.list
/home/hogehoge/file2.list
/home/hogehoge/file3.list
```

```shell-session:ファイルリストを用いた圧縮
[root@centos6 ~]# tar zcvf file_list.tgz -X file.list
tar: メンバ名から先頭の `/' を取り除きます
/home/hogehoge/file1.list
/home/hogehoge/file2.list
/home/hogehoge/file3.list
```

```shell-session:除外ファイル指定での圧縮
[root@centos6 ~]# tar zcvf file_list.tgz /home/hogehoge/ --exclude 'file1.list'
tar: メンバ名から先頭の `/' を取り除きます
/home/hogehoge/file2.list
/home/hogehoge/file3.list
```
Sublime Text | ファイル内で任意の行にジャンプするショートカット

# ファイル内の移動

`Ctrl + p` でファイル切り替え窓を起動して。
***コロン + 移動したい行数*** を打てばOK。

たとえば次のように書けば、 22行目にジャンプできる。

![image](https://qiita-image-store.s3.amazonaws.com/0/90607/0cb74331-73c5-f3b7-4f0e-6a528479cc07.png)


# ファイル名 + 行数

**ファイル名 + コロン + 行数**  と書けば。
そのファイルに移動しつつ、同時に任意の行数にジャンプできる。

![image](https://qiita-image-store.s3.amazonaws.com/0/90607/00c2fbe6-bd56-359e-541f-54e9f2d05be1.png)



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
JAVA compareTo() 自然順序付け


▪️Test63.java

```java
import java.util.*;

public class Test63 {
	public static void main(String[] args) {
		// 数字順
		List<Integer> list = new ArrayList<Integer>();
		list.add(5);
		list.add(7);
		list.add(31);
		list.add(2);
		Collections.sort(list);
		System.out.println(list);

		// アルファベット順
		List<String> list2 = new ArrayList<String>();
		list2.add("globefishフグ");
		list2.add("squidイカ");
		list2.add("crabカニ");
		list2.add("starfishヒトデ");
		System.out.println(list2);
		Collections.sort(list2);
		System.out.println("アルファベット順に並べ替え⇒" + list2);

		// ひらがな順
		List<String> list3 = new ArrayList<String>();
		list3.add("ヒトデstarfish");
		list3.add("フグglobefish");
		list3.add("カニcrab");
		list3.add("イカsquid");
		Collections.sort(list3);
		System.out.println(list3);
	}

}
```

▪️Test63.java 実行結果
[2, 5, 7, 31]
[globefishフグ, squidイカ, crabカニ, starfishヒトデ]
アルファベット順に並べ替え⇒[crabカニ, globefishフグ, squidイカ, starfishヒトデ]
[イカsquid, カニcrab, ヒトデstarfish, フグglobefish]
CSSでマウスカーソルを消したい


マウスカーソルをオリジナルの画像にしたいとき、デフォルトのマウスカーソルは消したいとなる場合があるかと思います。

そんなとき、IE以外のブラウザであれば、透明なpng画像を用意しておいて、

```main.css
cursor: 'url("../img/three_d/transparent.png"), none',

```

とすればうまく動くのですが、IEでは上手く動きません。
IEも対応させるには、curファイルというのを用意する必要があります。
curファイルはadobeのgithubレポジトリに上がっています。
https://github.com/adobe/chromium/blob/master/webkit/glue/resources/none.cur

これで、

```main.css
cursor: 'url("../img/three_d/none.cur"), none',

```

とすれば、IEを含んだ全ブラウザでマウスカーソルを消すことができます。
CS-CartのDBからデータを取得するAPIまとめ

CS-Cartのデータベースからデータを取得するAPIを紹介する。

## array db_get_array(string $query)

戻り値の形式は連想配列の配列。

```php:例
$users = db_get_array('SELECT user_id, firstname, lastname FROM ?:users');
```

```php:結果
array (
  0 => 
  array (
    'user_id' => '1',
    'firstname' => 'John',
    'lastname' => 'Doe',
  ),
  1 => 
  array (
    'user_id' => '5',
    'firstname' => 'Vendor',
    'lastname' => 'Vendor',
  ),
)
```

## array db_get_hash_array(string $query, string $field)

特定のフィールドを連想配列のキーにして返す。

```php:例
$users = db_get_hash_array('SELECT user_id, firstname, lastname FROM ?:users', 'user_id');
```

キーがuser_idと同じことに注目。

```php:結果

array (
  1 => 
  array (
    'user_id' => '1',
    'firstname' => 'John',
    'lastname' => 'Doe',
  ),
  5 => 
  array (
    'user_id' => '5',
    'firstname' => 'Vendor',
    'lastname' => 'Vendor',
  ),
)
```

## array db_get_row(string $query)

一行だけ取得する。LIMIT 1を自動的につけるわけではないので、パフォーマンスを得たい場合はSQLにLIMIT 1も明示する必要あり。

```php:例
$user = db_get_row('SELECT user_id, firstname, lastname FROM ?:users');
```

```php:結果
array (
  'user_id' => '1',
  'firstname' => 'John',
  'lastname' => 'Doe',
)
```

## mixed db_get_field(string $query)

最初の行の最初のカラムの値を返す。

```php:例
$userId = db_get_field('SELECT user_id, firstname, lastname FROM ?:users');
```

```php:結果
'1'
```

## array db_get_fields(string $query)

最初のカラムをすべて返す。

```php:例
$userIds = db_get_fields('SELECT user_id, firstname, lastname FROM ?:users');
```

```php:結果
array (
  0 => '1',
  1 => '5',
)
```

## array db_get_hash_single_array(string $query, array $params)

第二引数で渡したKey-valueのタプルで連想配列を作って返す。

```php:例
$firstnames = db_get_hash_single_array('SELECT user_id, firstname, lastname FROM ?:users', ['user_id', 'firstname']);
```

```php:結果
array (
  1 => 'John',
  5 => 'Vendor',
)
```

## 関連

[CS-CartのSQLプレースホルダの挙動 - Qiita](http://qiita.com/suin/items/143d50f2d8b455394daa)
[メモ] ExoPlayer - 新しいAndroidのメディアプレイヤー

## ExoPlayer とは
Android SDK に標準搭載されている `MediaPlayer` を代替えすべく、新たに作成されたオープンソース製品です。
`Media Player` の機能をサポートし、なおかつ新しい機能も追加されています。

## 概要
### 対応OSバージョン
Android 4.1 (API 16) 以上で動作します。

```
ExoPlayer’s standard audio and video components rely on Android’s MediaCodec API,
which was released in Android 4.1 (API level 16).
Hence they do not work on earlier versions of Android.
```

### 対応する動画フォーマット
- DASH
- SmoothStreaming
- HLS adaptive streams
- MP3
- M4A
- MP4
- WebM
- MPEG-TS
- AAC
- FLV (r1.5.3 -)

## 公式ドキュメント
### 英語
- [ExoPlayer - Android Developers](http://developer.android.com/intl/ja/guide/topics/media/exoplayer.html)
- [google/ExoPlayer - GitHub Repository](https://github.com/google/ExoPlayer)
- [ExoPlayer - GitHub Pages](https://google.github.io/ExoPlayer/index.html)

## 解説記事
### 英語
- [ExoPlayer: Adaptive video streaming on Android - YouTube](https://www.youtube.com/watch?v=6VjF638VObA)

### 日本語
- [Android 新時代のメディアプレイヤー ExoPlayer に関するメモ](http://shunirr.hatenablog.jp/entry/2015/09/16/231512)

## ライブラリ
- https://github.com/satorufujiwara/exoplayer-textureview
OpenCV マスク処理で画像の部分切り抜き

下記画像のようなマスク処理が必要になりまして、OpenCVでやってみようと調べたメモです。

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/76843/87b0103b-7eea-e528-aca6-05d0d36b5f66.jpeg)

マスク画像はもと画像と同じサイズにしてイラレ等で用意しました。


```cpp:main.cpp
#include "opencv2/opencv.hpp"
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>

#include <stdio.h>

using namespace cv;
using namespace std;

int main()
{

    // 切り抜きたい新規画像
    string NEW_IMG_PATH = "image.jpg";

    // マスク画像
    string MASK_IMG_PATH = "mask.jpg";

    // 出力先のパス
    string OUTPUT_PATH = "/Users/~~~~~~~~/Desktop/";


    /*** 1,新規画像読み込み ***/
    Mat image = imread(NEW_IMG_PATH);
    vector<Mat> channels;
    split(image, channels);   // 読み込んだimageをチャンネル(RGB)ごとに分離してvectorに入れる
        
        
    /*** 2,マスク処理 ***/
    Mat mask = imread(SQUID_MASK_IMG_PATH, 0); // マスク画像読み込み 引数0はグレースケールで読み込み
    channels.push_back(mask); // vector最後尾にマスク画像追加
    Mat new_image;
    merge(channels, new_image); // mergeする 
        

    /*** 3,画像保存 ***/
    imwrite(OUTPUT_PATH + "masked.png" , new_image);
    
    
    return 0;
}
```

参考  いろいろ試してこれがうまくいきました。
http://lab.synergy-marketing.co.jp/blog/tech/i_wanna_crop_a_lot_of_images_reinvent


輪郭抽出→塗りつぶしとかで
プログラムでマスク画像も生成する良いサンプルあったら知りたいなぁ
[Swift] buttonにactionをつけるときに忘れてたこと

Editボタンを付けようとしました。
ButtonにActionをつけようとしました。
しかしActionの方に、UIButtonのsenderをargumentを入れるのを忘れてました。

これに気づかずに1時間位はまってました。このレベルでハマったのは初めてだったので、かなり本気で反省しています。

エラーには

```swift
2015-12-14 14:34:38.377 HogeController onClickBarButtonEdit:]: unrecognized selector sent to instance 
2015-12-14 14:34:38.389  *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[Fuga.HogeViewController onClickBarButtonEdit:]: unrecognized selector sent to instance 0x7f8025c01a50'
```

と出ていたのに。

ちゃんと、「onClickBarButtonEditではどのselectorがsentしたのかわかんないっす。onClickbarButtonEditはNSInvalidArugumentExceptionってことで、引数がダメダメっす。」って出ていたののに、そんな訳はないって思い込んでいました。

冷静にただただログを見るのが大事ですね。


以下、成功例。

```swift
func viewDidLoad() {
・
・
    let barButtonEdit = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Edit, target: self, action: "onClickBarButtonEdit:")
    let barButtons: NSArray = [barButtonEdit]
    self.navigationItem.setRightBarButtonItems(barButtons as? [UIBarButtonItem], animated: true)
    }
・
・
}
  
func onClickBarButtonEdit(sender:UIButton) {
    print("hoge")
}
```
Minecraft Pi EditionをPCから操作する


Raspberry PiのOSであるRaspbianにはMinecraft Pi Editionがインストールされています。Minecraft Pi Editionには外部から操作できるAPIが存在し、Pythonプログラムを使ってMinecraftの世界にブロックを追加するなどができます。

今回はMinecraft Pi EditionをPCから操作する方法を紹介します。

## 使ったソフトウェア

Raspberry Pi側

* Raspbian Jessie (2015-11-21)
* Python 2.7.9
* Minecraft Pi Edition v0.1.1 alpha


PC側

* Mac OS X El Capitan (10.11.2)
* Python 2.7.11
* rsync
* エディタ

※ 古いRaspbianにはMinecraft Pi Editionがプリインストールされていないことがあります
※ jessie-liteにはMinecraft Pi Editionはプリインストールされていません
※ PC側はPython 2が動けばMacである必要はありません

## リモートで操作する仕組み

Minecraft Pi Editionはポート``4711``でAPIを公開しています。Raspbianではクライアント用のPythonのライブラリ(以後``mcpi``)が ``/usr/lib/python2.7/dist-packages/mcpi/`` にあり、Pythonプログラムを書いて操作ができます。

```bash:RaspberryPi側
$ python 
>>> import mcpi
>>> print mcpi.__file__
/usr/lib/python2.7/dist-packages/mcpi/__init__.pyc
```

``minecraft.create``メソッドの実装は以下のようになっており、第一引数にRaspberry PiのIPアドレスを入れることで同じローカルネットワーク上のPCからMinecraft Pi Editionを操作することができます。

```python:mcpi/minecraft.py
    def create(address = "localhost", port = 4711):
        return Minecraft(Connection(address, port))
```

``mcpi``はソケット通信が実装できればPython以外の移植も可能ですので、Rubyで書き換えている人もいるようです。([eaglestone/minecraft-pi-ruby](https://github.com/eaglestone/minecraft-pi-ruby))


## 開発環境の準備

まずRaspberry Piにある``mcpi``をPC側にコピーします。(``pi@192.168.1.49``のIPアドレスの部分はRaspberry Piで``ifconfig``などを実行するなりして変更してください。)

```bash:PC側
mkdir minecraft-pi-samples
cd minecraft-pi-samples
rsync -av --copy-links pi@192.168.1.49:/usr/lib/python2.7/dist-packages/mcpi/ ./mcpi/ --exclude=*.pyc
```

この作業がわからない・面倒な人はサンプルプログラムを公開しているので [こちら](https://github.com/makotokw/minecraft-pi-samples/archive/master.zip) をダウンロードして解凍し ``src`` ディレクトリをお使いください。

## プログラムを実行する

以下のプログラムを作成します。``Minecraft.create``の第一引数の``"192.168.1.49"``をお使いのRaspberry PiのIPアドレスに置き換えてください。


```hello.py
import platform
from mcpi.minecraft import Minecraft
mc = Minecraft.create("192.168.1.49")
mc.postToChat("Hello " + platform.platform())
```

ディレクトリ構成はこのようになります。

```
.
├── hello.py
└── mcpi
    ├── __init__.py
    ├── block.py
    ├── connection.py
    ├── event.py
    ├── minecraft.py
    ├── util.py
    └── vec3.py
```

``python hello.py``を実行し、Minecraft Pi Edition側にプログラムを実行したPCのプラットフォーム情報がチャットメッセージに表示されると成功です。

![raspberry-pi-mcpi.png](https://qiita-image-store.s3.amazonaws.com/0/2435/6ef176f2-7f93-9207-51c7-721d9d7fadd4.png "raspberry-pi-mcpi.png")

## まとめ

今回は``mcpi``のコードを読み、ソケット通信しているということからリモートで開発するということを行いました。

PCを使うメリットとしてエディタなど普段使い慣れた開発環境を利用できるという点と、リモートで操作できることから一人がMinecraftを操作し、もう一人がプログラムを実行して妨害 or 補助するといった遊び方ができる点があると思います。

副次的なメリットとして``mcpi``を同じディレクトリにコピーしているのでメソッドの内容を確認しながらコードを書けるという点もあります。

教育現場ではRaspberry Pi側で実行してもらう必要がある気はするのですが、教材としてサンプルコードを作ったりする側はこういった生産性の高い環境を使っても良いのかなと思います。
WordPressのローカル開発をPHPのビルトインサーバーでやる場合

みんなローカル環境でWordPressの開発をするときどうやってるんですかね。
個人的に[PHPのビルトインサーバー](http://php.net/manual/ja/features.commandline.webserver.php)をよく使うので、WordPressもやってみたいなと思ってメモ。
（わざわざ Vagrant とか使わず手軽にやりたかっただけ）

ちなみに、当然ローカルにPHPとMySQLはインストールされている必要あり。

## まずサイトのURLを強制

環境ごとにサイトURLを設定しなおすのが面倒なので `wp-config.php` で強制してしまう。
書く場所は `require_once(ABSPATH . 'wp-settings.php');` より前ならどこでも良いと思う
詳しくは [wp-config.php の編集](https://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86#WordPress_.E3.82.A2.E3.83.89.E3.83.AC.E3.82.B9_.28URL.29) などを。

```php:wp-config.php
// localhostならサイトURLを強制
if (0 === strpos($_SERVER['HTTP_HOST'], 'localhost')) {
    define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST']);
    define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST']);
}
```

## 簡易ルーターを作成

[Phalcon の .htrouter.php](https://docs.phalconphp.com/ja/latest/reference/built-in.html) のような、自前のURLリライト処理を用意。

```php:.htrouter.php
<?php
$root = $_SERVER['DOCUMENT_ROOT'];

$path = parse_url($_SERVER['REQUEST_URI']);
$path = '/'.ltrim($path['path'], '/');

if(is_file($root.$path)) {
    if(is_dir($root.$path) && '/' !== substr($path, strlen($path) - 1, 1)) {
        $path = rtrim($path,'/').'/index.php';
    }

    if(false !== strpos($path, '.php')) {
        require_once($root.$path);
    } else {
        return false;
    }
}else {
    include_once('index.php');
}
```

## ビルトインサーバー起動

起動時に簡易ルーターを通すように指定する。

```bash
$ php -S localhost:8080 -t /path/to/wordpress .htrouter.php
```

これで一応は動くけど、.htaccessを書き換えるようなプラグインとかは無理。
Pythonで翌月初を出力したい

検索したら2パターン目のほうばかり引っかかっり、別解もあるよということでメモ。

# datetimeとcalendarを使う

```python:
import datetime
import calendar

dt = datetime.datetime.today()
max_day = calendar.monthrange(dt.year, dt.month)[1]
nm = datetime.date(dt.year, dt.month, max_day) + datetime.timedelta(days=1)
```

# datetimeとdateutilのrelativedeltaを使う

```python:
import datetime
from dateutil.relativedelta import relativedelta

dt = datetime.datetime.today()
nm = dt + relativedelta(months=1)
```
【Swift/Xcode7 】非選択時タブバーアイコンの色設定

# やりたいこと
タブバーアイコンはデフォルトだと灰色のままなので、色を変えたい

今回は選択時：水色、非選択時：白にします。
![非選択時タブバーアイコン（default）](https://qiita-image-store.s3.amazonaws.com/0/60981/eed91774-820d-1131-2eb0-8dd2331eca4b.png)

# やり方
選択時はアイコンのカラー指定ができるのですが、非選択時はアイコンのカラー指定ができないので、色がついた画像を用意し、それを置き換えます。
テキストカラーについては、色指定ができるので特に問題がありません。

# 参考
- [タブバーのアイコン色(非選択時) // ya-s-u/TabMenuController.swift　ー Github](https://gist.github.com/ya-s-u/98e2fab4a88df426ec39)

※enumerateに関しての書き方が少し古いので下のように書き換えます。
enumerateがどのように変わったかということに関しては、以下の記事参考
[Swift 2.0でのenumerateの使い方ーQiita](http://qiita.com/ken0nek/items/67631f9b85bebb9026a8)


# サンプルコード

```OriginalTabBarController.swift
import UIKit
//タブバー設定
class OriginalTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // fontの設定
        let fontFamily: UIFont! = UIFont.systemFontOfSize(10)

        // 選択時の設定
        let selectedColor:UIColor = UIColor(red: 65.0/255.0, green: 168.0/255.0, blue: 186.0/255.0, alpha: 1)
        let selectedAttributes = [NSFontAttributeName: fontFamily, NSForegroundColorAttributeName: selectedColor]
        /// タイトルテキストカラーの設定
        UITabBarItem.appearance().setTitleTextAttributes(selectedAttributes, forState: UIControlState.Selected)
        /// アイコンカラーの設定
        UITabBar.appearance().tintColor = selectedColor


        // 非選択時の設定
        let nomalAttributes = [NSFontAttributeName: fontFamily, NSForegroundColorAttributeName: UIColor.whiteColor()]
        /// タイトルテキストカラーの設定
        UITabBarItem.appearance().setTitleTextAttributes(nomalAttributes, forState: UIControlState.Normal)
        /// アイコンカラー（画像）の設定
        var assets :Array<String> = ["TabBarListImage.jpg", "TabBarSearchImage.jpg", "TabBarAccountImage.jpg"]
        for (idx, item) in self.tabBar.items!.enumerate() {
                item.image = UIImage(named: assets[idx])?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        }        
    }
```

# 結果
![タブバーアイコンの色が変わりました](https://qiita-image-store.s3.amazonaws.com/0/60981/70a79da3-68f3-b2a5-b4c6-32f50e9937ae.jpeg)

今回開発チームのメンバーが**UIfontをHiraginoとかにすると文字の下がなぜか切れる**という現象を発見してくれました。なのでFontはSystemfontを使ったほうが良いと思います。

----
今回はenumerate問題で無駄に時間を食ってしまったのですが、
Swiftのバージョンが変わると、一気に文法やメソッドの意味が変わるのはちょっと勘弁〜〜〜という感じですね。
c++ builder XE4, 10.2 Tokyo > 自動付加された数値のsuffix (例 "_123") を取得する実装

```txt:動作確認
C++ Builder XE4
Rad Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

http://qiita.com/7of9/items/29f5393b523bdc9a30ba
の問題の対応


```Unit1.cpp
#include <IdGlobal.hpp> // IsNumeric();
...
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	String work1 = L"AAA_BBB_CCC_123";
	String suffix1 = getAutoAddedNumberSuffix(work1); // "_123";

	String work2 = L"AAA_BBB_CCC";
	String suffix2 = getAutoAddedNumberSuffix(work2); // L""

	String work3 = L"AAA_BBB_CCC_NAN";
	String suffix3 = getAutoAddedNumberSuffix(work3); // L""

	String work4 = L"AAA_BBB_CCC_";
	String suffix4 = getAutoAddedNumberSuffix(work4); // L""

	String work5 = L"AAA_BBB_CCC_1A3";
	String suffix5 = getAutoAddedNumberSuffix(work5); // L""

	String work6 = L"AAA_BBB_CCC_31415";
	String suffix6 = getAutoAddedNumberSuffix(work6); // L"_31415"

	String work7 = L"AAA_BBB_CCC_3141592";
	String suffix7 = getAutoAddedNumberSuffix(work7); // L""
}
//---------------------------------------------------------------------------

String __fastcall TForm1::getAutoAddedNumberSuffix(String srcStr)
{
	// 5桁までしか対応していない
	// _が複数入っている文字列に対応

	int len = srcStr.Length();
	static const int kToTheLast = MAXINT;
	String work = srcStr.SubString(len - 5, kToTheLast); 	// 5:5桁まで

	int posUnderbar = work.Pos(L"_");
	if (posUnderbar == 0) {
		return L"";
	}

	String suffixNoUnderbar = work.SubString(posUnderbar + 1, kToTheLast);
	if (IsNumeric(suffixNoUnderbar)) {
		return L"_" + suffixNoUnderbar;
	}

	return L"";
}
```


getAutoAddedNumberSuffix()を使って、自動付加されたsuffixを見つける。
5桁数値のサフィックスまで対応 (インスタンスを5桁分作るということはないだろう。2桁は必要)。

取得したsuffixを使ってStringReplaceで取り除けばいい。

```Unit2.cpp
	String numberSuffix = getAutoAddedNumberSuffix(this->Name); // 自動付加されるもの。例 L"_2"
	String nameNoSuffix = StringReplace(this->Name, numberSuffix, L"", TReplaceFlags()<<rfReplaceAll);
```
UINavigationControllerの戻るボタンを消したい、非表示にする方法


UINavigationControllerの戻るボタンを消したい時があったので、メモ。

そもそも「戻るボタンを消したい時ってあるの？前の画面に戻れないでしょ」という声があるが、こういうパターンの時に使いたい。

- 戻るボタンを押した時に画面が戻る前にアラートを出したい
- 戻るボタンを単純に隠したい（戻る動作は別のボタンで代用）
- 戻るボタンの位置に別のボタンを置きたい（意図的に戻るボタンを隠したい）

基本的には一番上がメインで他の理由は強引かもしれないけど。

戻るボタンを押してしまうと、強制的に戻る。
だけど、その前に何か処理をしたい。処理次第では戻る動作をキャンセルさせたい。

そういう時には戻るボタンを隠したい。
その場合はこう書く。

```objc:Objective-C
self.navigationItem.hidesBackButton = YES;
```

```swift:swift
self.navigationItem.hidesBackButton = true
```

最近知ったので、メモしておきました。
アクリル加工についてのメモ

#アクリル加工についてのメモ

- ご存知の方にとっては当然のことであろうが、個人的には手間を取られたのでメモ。

- アクリル板は意外に固い。ABS用の普通のプラモ用ヤスリではなかなか削れない。金工用のヤスリが必要。

- 一方で金工用のドリルビットで穴あけしようとすると割れる（樹脂の中では脆性な部類なのだと思われる）。専用のプラスチック用ドリルビットがいる。回転数にも留意が必要。
AMP HTML ざっくりまとめ

# AMP とは
**AMP（Accelerated Mobile Pages）** は、Googleが発表したモバイル高速化技術です。
4,500社以上のパブリッシャーや、WordPress.com がパートナーに参加し、2016年2月後半からGoogle検索トラフィック送信を開始すると発表しています。
検索結果に影響があるとすれば、サイト運営者は~~Google様に振り回される~~対応を検討する必要がありそうです。
https://www.ampproject.org/
https://github.com/ampproject

追記：Google検索、AMP対応を2月24日に開始、検索結果に表示へ。
自然検索結果へのインパクトも予想されています。
http://www.sem-r.com/news-2015/20160219092116.html

# AMP HTML
ほとんどはHTMLですが、一部がAMPのプロパティで拡張されています。
絵文字⚡が斬新ですが、文字列 amp でもok。

## サンプル
```lang:HTML
<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>
```

## ざっくり仕様

タグ                                                                  | AMP HTML                      
------------------------------------------------------------------- | ------------------------------
script                                                              | application/ld+json 以外NG      
img, video, audio, iframe                                           | AMPタグに置き換え                    
frame, frameset, object, param, applet, embed, form, input elements | NG（buttonはOK）                 
style                                                               | headタグ内OK、amp-custom属性が必要     
link                                                                |  canonical 以外NG（一部ホワイトリスト登録OK）
meta                                                                | http-equiv のみNG               
a                                                                   | javascript の使用はNG             
svg                                                                 | ほとんどOK    


## AMP タグ

* amp-img
* amp-audio
* amp-anim
* amp-ad
* amp-pixel
* amp-video
* amp-brightcove
* amp-carousel
* amp-font
* amp-lightbox
* amp-iframe
* amp-instagram
* amp-twitter
* amp-vine
* amp-youtube                    

## 追記

Movable Type で対応する方法など、詳細はこちらもどうぞ
http://blog.lqd.jp/html/001023.html

Google検索結果に表示されましたので、結果についてはこちらもどうぞ
http://blog.lqd.jp/html/001087.html

フルAMPのWordPressテーマを開発した件
https://qiita.com/lqd_jp/items/9017f4919fcdcaf5eabf
google IME 小技 2015

定番ですが、社内で知らない人が居たので、2015年（平成27年）末なのに google IME のコワザを得意気に⤴

## z プレフィックス一覧
日本語入力モードにして、z + j など打つことで、想定外の文字を入力できます。まぁこれは辞書登録されてるだけですが。

||結果|
|:-------------:|:------------|
|z+h|←|
|z+j|↓|
|z+k|↑|
|z+l|→|
|z+,|‥|
|z+.|…|
|z+/|・|
|z+[|『|
|z+]|』|
|z+-|～|


## きょう、ことし、おととい、きょねん など
時間を表す日本語を変換すると、数値として変換されます。たとえば、「ことし」だと、2015に。
「いっさくじつ」、「さきおととい」などもいけますが、「さきおとつい」はダメでした。「おとつい」はいけるんですけど。
「しあさって」いけましたが、「みょうみょうごにち」「やのあさって」「ごのあさって」はダメでした。さっきまで「やのあさって」「ごのあさって」なんて知りませんでしたが。

## 元号変換
「２０１６ねん」を変換すると平成28が候補に出ます。
「６４５ねん」が、大化元年に。元号候補は645年からあるようです。

## 英単語のカタカナ→スペル変換
さくせす→SUCCESS
げっつ→getz
せんたー→center、centre

## 計算機能
１＋１＝　などを変換すると結果として２が候補にでます。

## 和数字←→洋数字
じゅう←→１０
いちおく←→１００００００００
いっけい←→１００００００００００００００００
せんけい←→１０００００００００００００００００００

## カンマ付与
１００００００００００→10,000,000,000

## 進数変換
２３→0x17、027、0b10111

## 郵便番号変換
１５０−０００２を変換すると、東京都渋谷区渋谷に

## さいころ
ランダムで、さいころを振った目（１〜６）が

## おみくじ
今日の運勢が

## ふくわらい
ランダムで顔文字が

## こまんど
google IME の機能として「サジェスト機能のオンオフ」「シークレットモードのオンオフ」が出てきます。
プレゼンのときとかはサジェストオフにするのがいいですね。

## タブでサジェストと履歴遡り
変換後タブを数回押すと、今までの入力履歴を含んだサジェストを選択できます。
「い」とか変換して「以上、よろしくお願いします」とか打つのに便利ですね。
履歴からの削除の候補表示中にできます。

## 選択して再変換
変換し終わった文字を選択状態にして Shift + Ctrl + r （もしくはgoogleIMEのメニューから[再変換]）で再変換できます。
１文字だけ選択して再変換すると unicode 表記が候補にでます。
Wordpressの管理画面にログインできない（MySQLの容量オーバー）

# Wordpressの管理画面にログインできない問題

　見出しの通り、Wordpressの管理画面にログインできない問題が発生しました。
　ネットで検索して、一般的な問題であるsite urlの設定違いやリダイレクトの問題でwp-login.php以外のファイルにアクセスしている、といった内容を調べて対応しました。
　結果、どれも該当せず一度Wordpress自体を再インストールしました。

　その時点では正常に動作を始めたのですが、約1ヶ月経過して再度同じ現象が発生しました。
　Pluginの影響も考慮して怪しいものはすべて外したつもりでいたところでの再現でした。

　前回の障害時点では確認が出来なかったWebサーバーのエラーログを確認したところ、

[Wed Dec 09 00:13:48 2015] [error] [client ***.***.***.***] WordPress INSERT,UPDATE command denied to user '****'@'localhost' for table 'wp_options' for query INSERT INTO `wp_options` (`option_name`, `option_value`, `autoload`) VALUES ('_transient_doing_cron', ・・・

　上記のようなエラーが発生していました。

　site url間違いの確認も兼ねてPhpMyadminからMySQLのwp_optionsテーブルを書き換えようとしたところ、やはり権限が有りませんと出ました。
　サーバーのコントロールパネルを確認したところ、MySQLの容量が一杯になったときに追加、変更が出来なくなるとの記述が有りました。

##　アクセス解析のプラグイン

　結果的に、アクセス解析のプラグインが入っていたのですが、このプラグインはログをMySQLのテーブルに記録するためこのデータがMySQLを圧迫していたようです。
　該当するテーブルを削除、ブラウザのキャッシュをクリア、再ログインで正常にログインできるようになりました。


###　初めての投稿

　このQiitaをはじめ、ネットの情報にはいつも助けられていますので今回同じ情報が見つからないのはかなり不安な案件でした。多少でも役に立てばと思い情報をアップします。
　初めての投稿ですので、情報の不足や間違いは随時修正していきたいと思います。
ottoでRedisを使う環境を用意する


# 要するに

ottoは[Microservicesアーキテクチャをサポート](https://ottoproject.io/intro/getting-started/deps.html)しています。
依存するサービスをAppfileに書くと、Vagrant上のDockerで起動します。

MongoDBのサンプルがあります。Redisのサンプルはありません。
真似して書きました。

# MongoDBの例
サンプルにMongoDBの例があります。

```hcl:Appfile
application {
  name = "otto-getting-started"
  type = "ruby"

  dependency {
    source = "github.com/hashicorp/otto/examples/mongodb"
  }
}
```

github上のMongoDBの設定を参照できます。
[中身](https://github.com/hashicorp/otto/blob/master/examples/mongodb/Appfile)は

```hcl:Appfile
application {
    name = "mongodb"
    type = "docker-external"
}

customization {
    image = "mongo:3.0"
    run_args = "-p 27017:27017"
}
```
です。


# RedisのAppfile作成
Redisのサンプルがないので、真似して自分で書きます。

## Appfile
```hcl:Appfile
application {
  name = "otto-getting-started"
  type = "node"

  dependency {
    source = "./redis"
  }
}
```

dependencyには[ローカルディレクトリも指定できます](https://ottoproject.io/docs/appfile/dep-sources.html)。

## redisディレクトリ
redisディレクトリ内には`Appfile`と`.ottid`を用意します。

```hcl:redis/Appfile
application {
    name = "redis"
    type = "docker-external"
}

customization "docker" {
    image = "redis:3.0"
    run_args = "-p 6379:6379"
}
```

MongoDBとほとんど一緒です。

- image名の修正
- ポートをRedisのデフォルトポートに修正

otto 0.1.2では`.ottid`は使用していません。
ですが、将来のバージョニング管理のために必須です。
無いとエラーになります。
空ファイルを用意します。

```
touch .redis/.ottid
```

# 動作確認
動作確認します。

## Vagrant起動
```
otto compile
otto dev
```


## 接続確認
dependencyに指定したサービスをは`name.service.consul`というFQDNで参照可能です。
今回の場合は`redis.service.consul`です。

起動した仮想環境にログインします。

```
otto dev ssh
```

### npm

redis-cliのインストールは面倒です（後述）。
Node.jsの[redisクライアント](https://github.com/NodeRedis/node_redis)を使います。

`node_redis`をインストールして、Node.jsを起動

```
npm i redis
node
```

次のJavaScriptを実行します。

```js
const redis = require('redis')
const redisClient = redis.createClient('redis://redis.service.consul')
redisClient.set("string key", "string val", redis.print)
```

#### 実行結果

```
vagrant@precise64:/vagrant$ npm i redis
redis@2.4.2 node_modules/redis
├── double-ended-queue@2.1.0-0
└── redis-commands@1.0.1
vagrant@precise64:/vagrant$ node
> var redis = require('redis')
undefined
> var redisClient = redis.createClient('redis://redis.service.consul')
undefined
> redisClient.set("string key", "string val", redis.print);
true
> Reply: OK
```



### rdis-cli

rdis-cliで確認する場合は、[Installion: How to install redis-tools](http://installion.co.uk/ubuntu/trusty/universe/r/redis-tools/install/index.html)を参考にします。

sources.listに`deb http://us.archive.ubuntu.com/ubuntu trusty main universe`を追加します。

```
sudo vi /etc/apt/sources.list
```

インストール

```
sudo apt-get update
sudo apt-get install redis-tools
```

接続

```
redis-cli -h redis.service.consul
```

# 注意

仮想環境を作りなおした時に、`redis.service.consul`でRedisに繋げないことがあります。
`otto dev`する前に`otto compile`をしてください。毎回です。

[このコメント](https://github.com/hashicorp/otto/issues/330#issuecomment-159181107)を参考にしました。なぜ`otto compile`が必要なのか、わかりません。

# ソースコード
[github](https://github.com/ledsun/otto_redis)にあります。
c++ builder XE4, 10.2 Tokyo > Form > マルチインスタンス時のthis->Name > サフィックスがつく

```txt:動作確認
C++ Builder XE4
Rad Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

Form2を複数インスタンス化した時、それぞれのthis->Nameはユニークになるようにサフィックスが自動的につけられるようだ。

##再現手順
1. Form1を作る
2. Form2を作る。Form2は「自動生成フォーム」ではなく、「使用可能フォーム」にしておく。
3. Form2のコンストラクタを下記のUnit2.cppのようにする
4. Form1のボタンクリックイベントを下記のUnit1.cppのようにする (Unit2のincludeが必要)


```Unit2.cpp
__fastcall TForm2::TForm2(TComponent* Owner)
	: TForm(Owner)
{
	String msg = this->Name;
	OutputDebugString(msg.c_str());
}
//---------------------------------------------------------------------------
```

```Unit1.cpp
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	m_form2a = new TForm2(this);
	m_form2b = new TForm2(this);
	m_form2c = new TForm2(this);
}
//---------------------------------------------------------------------------
```

##実行結果

ビルドして実行し、Form1でボタンを押すと、以下のようなメッセージになる。

```txt:結果
デバッグ出力: Form2 プロセス Project1.exe (2912)
デバッグ出力: Form2_1 プロセス Project1.exe (2912)
デバッグ出力: Form2_2 プロセス Project1.exe (2912)
```

## メモ
上記の this->Name がユニークになること自体には問題ない。

こちらでは、this->Name を設定ファイル名に使い、設定をLoad/Saveする機能を実装していたが、マルチインスタンスでの使用時に名前にサフィックスがついて扱いづらくなった。
対処としては、自動付加されるサフィックスを取り、コンストラクタの引数でコントロールできる番号を付加する、など。
delegateで相互依存を切り出して神の誕生を防ぐ

# delegateで相互依存を切り出して神の誕生を防ぐ

ゲームとかでコンポーネント単位で機能を切り出すのはよくやると思うんだけど、
そうするとどうしても相互依存が発生して、全体を管理する役割のいわゆる「神」が誕生する。

# before
```csharp:神
public class SomeGod {
	#region GOD
	/*
	＿人人人人人人＿
	＞　神の誕生　＜
	￣Y^Y^Y^Y^Y￣
	*/
	FooManager fmgr;
	FooObject fobj;

	BarManager bmgr;
	BarObject bobj;
	#endregion

	public SomeGod() {
		this.fmgr = new FooManager();
		this.fobj = new FooObject();
		fobj.mgr = fmgr;

		this.bmgr = new BarManager();
		this.bobj = new BarObject();
		bobj.mgr = bmgr;
	}
}

public class FooManager {
}

public class FooObject {
	public FooManager mgr;
}

public class BarManager {
}

public class BarObject {
	public BarManager mgr;
}
```

# after

ゲームみたいに全部が連動してると、相互依存が発生するのはどう設計してもある程度は仕方ないので、
それを、イベントを仲介役のハブにして疎に設計すると綺麗になりそうなので、C#で実装してみる。
とりあえず pub/sub でやってみたけど、やり方は他にもあると思うのでその辺はまぁお好みで。

ポイントは、`SomeEvent` をハブにして、

* `FooPublisher`
* `FooSubscriber`
* `BarPublisher`
* `BarSubscriber` 

が全て独立していること。

`System.Action` と `System.Func` 使ってるけど、中身は `event` と `delegate` なので、その辺はまぁうまいこと読み替えてください。
ちなみに、ググるとよく引っかかる `EventArgs` 使った方法は `.Net 2.0` の頃の時代遅れの方法なのでやめたほうがいいです。

イベントは登録した順に呼ばれるので、
順序を管理する必要がある場合は、初期化順を管理する役割を1つ挟んでおいたほうがよさげ。
もしくは、それも別イベントに切り出してしまうと良いかも。

`System.Action` は戻り値無いので考慮の必要が無いけど、
`System.Func` に複数登録した場合、戻り値は最後に実行された `delegate` の結果なので、この辺も注意。
＃ 戻り値のある `delegate` を `event` に複数登録するとかあんまやらないだろうけど

```csharp:イベント
public class SomeEvent {
	public interface IPublisher {
		SomeEvent ev { get; }
	}
	public interface ISubscriber {
		void Subscribe (SomeEvent ev);
	}

	public System.Action<int, string> OnFoo = (int i, string s) => {};
	public System.Func<int, int, string> OnBar = (int i1, int i2) => { return default(string); };


	public static void ThisIsSampleUsage() {
		SomeEvent ev = new SomeEvent ();

		FooSubscriber fsub = new FooSubscriber ();
		fsub.Subscribe (ev);
		FooPublisher fpub = new FooPublisher ();
		fpub.Register (ev);

		BarSubscriber bsub = new BarSubscriber ();
		bsub.Subscribe (ev);
		BarPublisher bpub = new BarPublisher ();
		bpub.Register (ev);

		fpub.TriggerFoo ();
		bpub.TriggerBar ();

	}
}

public class FooPublisher : SomeEvent.IPublisher {
	public SomeEvent ev { get; private set; }

	public void Register(SomeEvent ev) {
		this.ev = ev;
	}

	public void TriggerFoo() {
		ev.OnFoo (123, "foo");
	}
}

public class FooSubscriber : SomeEvent.ISubscriber {
	public void Subscribe(SomeEvent ev) {
		ev.OnFoo += (int i1, string s1) => {
			Debug.Log (i1);
			Debug.Log (s1);
		};
	}
}

public class BarPublisher : SomeEvent.IPublisher {
	public SomeEvent ev { get; private set; }

	public void Register(SomeEvent ev) {
		this.ev = ev;
	}

	public void TriggerBar() {
		string s = ev.OnBar (456, 789);
		Debug.Log (s);
	}
}

public class BarSubscriber : SomeEvent.ISubscriber {
	public void Subscribe(SomeEvent ev) {
		ev.OnBar += (int i1, int i2) => {
			Debug.Log (i1);
			Debug.Log (i2);
			return string.Format("{0:D}", i1+i2);
		};
	}
}
```
Google Cloud Platformを社内プロキシ環境で使う


どうも、プロキシの人です。

## gcloud

gcloudコマンドは環境変数の`http_proxy`, `https_proxy`を設定していれば使えます。

```
$ export http_proxy=http://proxy.local:8080
$ export https_proxy=$http_proxy
```

設定してないとこんな感じになります。
ビビりますね。

```
ERROR: gcloud crashed (ResponseNotReady): 
```

クラッシュてｗ
### 他の方法

環境変数指定したくない場合は`gcloud`コマンドで設定もできます。

```
gcloud config set proxy/address proxy.local
gcloud config set proxy/port 8080
gcloud config set proxy/username xxx
gcloud config set proxy/password password
gcloud config set proxy/type http_no_tunnel
```

`proxy/type`は`http`, `http_no_tunnel`, `socks4`, `socks5`と指定できるので、うまく繋がらない場合は指定して試してみてください。

## bq

BigQueryを使う際にも設定が必要です。
`gcloud`と同様に環境変数を設定してればBigQueryの`bq`コマンドも使えます。

## kubectl

GKEでKubernetes使いますよね。
`kubectl`も環境変数設定してればいけるっぽいです。
特に意識してなかったのでこれでいいんでしょう。

## gcloud docker

ここらへんももうそんな感じです。

## gsutil

Google Cloud Storage

この流れだと普通に`gsutil`も使えると思うじゃないですか。
ところがどっこい、使えないんだな、これが。

そんなわけで調べました。

https://cloud.google.com/storage/docs/gsutil/commands/config#additional-configuration-controllable-features

これね。
はいはい。

ホームに`.boto` を書いてっと…


```.boto
[Boto]
  proxy proxy.local
  proxy_port 8080
  proxy_user user
  proxy_pass password
```

よっしゃ！`gsutil`でアップロードするぞ！

```
$ gsutil cp xxxxx.txt gs://gcs-bucket/xxxxx/
```

反応なし。
書き方間違えてました。

正解はコチラ。

```
proxy = proxy.local
proxy_port = 8080
proxy_user = user_name
proxy_pass = passphrase
```

これが正解です。

## Cloud Shell

社内プロキシに苦しむ開発者はそれなりにいると思います。
上記の設定で大体クリアできますが、うちだと外部への80,443以外のポートを使った通信が許可されてません。
正直辛いです。
そこでこんなものがありますよ。

[Cloud Shell](https://cloud.google.com/cloud-shell/docs/)

社内プロキシ勢の強い味方。
要はコマンドライン実行するために`gcloud`コマンドやら`docker`コマンドやら色々入った専用のインスタンス立ててブラウザ上で色々できるものです。
ブラウザでコマンドやりとりしてるのでブラウザ(HTTP, HTTPS)さえ通っていればOK。

上記の設定とかしなくてもコマンド使えますよ。

### 起動

![cloud-shell.png](https://qiita-image-store.s3.amazonaws.com/0/8637/fb37303d-7aa0-2d8d-1180-763a7c81cb68.png "cloud-shell.png")

Developer Consoleの右上に赤枠で囲ったアイコンをクリックすると下の方にコンソールが出てきます。
これで何でもできるね！

### お値段

現在ベータ版で、無料で使えます。
その後はわかりません。

GCEインスタンスの起動時間分の値段になるのかもしれませんね。
CakePHP(2.x)のdebug_kitが大量にメモリを消費する件


使っていて偶然見つけた現象。CakePHPのdebug_kitを使用している際、時折 PHP Fatal error:  Allowed memory size of xxxxxxxxx bytes exhausted (tried to allocate xxx bytes) in .... のエラーが発生するようになったので調べてみた。

## 今回の症状

時折というのはある画面を連続でリロードしていたりすると起きていました。

debug_kitを使用していると、TimerのPanelでPeak Memory Useの値が確認できます。その値がページをリロードするたびに増えていって、最終的に128Mを超えてエラーになるという現像でした。

## cake_toolbar_cache

app/tmp/cache/にcake_toolbar_cacheというdebug_kitが作成するcacheファイルがあります。実はエラーが出た際にはこのファイルを削除するだけで一旦は解決するのですが、根本的な解決には至りませでした。

## Panel History

debug_kitをdefaultのままで使用していると一番左にHistoryというタブが存在しているはずです。このHistoryという機能は、debug_kitの情報をページをリロードしたり遷移した際に過去の結果を一時的に保存してくれており、その情報を参照することが可能です。

その情報を保存しているところがcake_toolbar_cacheになります。

今回の場合、何の情報が多かったかというとsqlのquery_logが非常に多いページを連続でリクエストしてしまい、結果、エラーになってしまうという現象でした。

## 解決方法

解決方法はいくつかあると思います。例えばphp.iniのmemory_limitはdefaultでは128Mになっているので変更するのも一つの選択肢だと思います。（PHP7はdefaultでmemory_limitが256Mになっていました。）

ですが、今回はこのHistoryを無効化して、エラーを防ぐという方法をとりました。

通常であれば、debug_kitを使用する場合、以下のようにAppController等に記述することが多いと思います。

```php
public $components = array(
  'DebugKit.Toolbar',
);
```

今回はHistoryのみ無効化すべく、以下のように書き換えました。

```php
public $components = array(
  'DebugKit.Toolbar' => array(
    'panels' => array(
      'history' => false,
    ),
  ),
);
```

この様に書くことでHistoryを無効化することができてこのエラーを回避することができました。

CakePHPでdebug_kitを使用している際にページのレンダリング途中でこのエラーが発生する場合、この現象に当てはまることがあるかもしれません。そのときはこの方法をとってみてもいいかもしれないです。
Gitで過去に削除してコミットしたファイルを復元する

いらないとおもって消したけどやっぱり必要だったっていうことがありましてね。

# 削除してコミットしたファイルを復元する方法
## 削除したファイルを見つける

`git log`で削除前のコミットIDをメモ。
`git diff HEAD <コミットID> --name-only`で変更したファイルを確認して、ファイル名をメモ。

## 復元する

`git checkout <commit> -- <FILE_PATH>` でファイルが今いるブランチに復元されてステージされます。

```sh:bash
git checkout 32603a3 -- /var/www/app/models/ImportantFile.js
```

```shell-session:bash
[root@localhost models]# git st
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   ./ImportantFilejs
[root@localhost models]#
```

## 感想
Gitって本当にすばらしいですねぇ～
さよなら、さよなら、さよなら！

---
ZRamを有効にする (Jessie)

## 手順

```bash:
modprobe zram
```

## スクリプト

* [ZRam - Debian Wiki](https://wiki.debian.org/ZRam)を使わせていただく。

```bash:/usr/local/bin/zram.sh
#!/bin/sh
### BEGIN INIT INFO
# Provides:          zram
# Required-Start:    $local_fs
# Required-Stop:     $local_fs
# Default-Start:     S
# Default-Stop:      0 1 6
# Short-Description: Use compressed RAM as in-memory swap
# Description:       Use compressed RAM as in-memory swap
### END INIT INFO

# Author: Antonio Galea <antonio.galea@gmail.com>
# Thanks to Przemysław Tomczyk for suggesting swapoff parallelization

FRACTION=75

MEMORY=`perl -ne'/^MemTotal:\s+(\d+)/ && print $1*1024;' < /proc/meminfo`
CPUS=`grep -c processor /proc/cpuinfo`
SIZE=$(( MEMORY * FRACTION / 100 / CPUS ))

case "$1" in
  "start")
    param=`modinfo zram|grep num_devices|cut -f2 -d:|tr -d ' '`
    modprobe zram $param=$CPUS
    for n in `seq $CPUS`; do
      i=$((n - 1))
      echo $SIZE > /sys/block/zram$i/disksize
      mkswap /dev/zram$i
      swapon /dev/zram$i -p 10
    done
    ;;
  "stop")
    for n in `seq $CPUS`; do
      i=$((n - 1))
      swapoff /dev/zram$i && echo "disabled disk $n of $CPUS" &
    done
    wait
    sleep .5
    modprobe -r zram
    ;;
  *)
    echo "Usage: `basename $0` (start | stop)"
    exit 1
    ;;
esac
```

```bash:
chmod +x /usr/local/bin/zram.sh
```

## 実行方法

```bash:
modprobe zram
/usr/local/bin/zram.sh start
```

### OS起動時に実行する場合

```bash:/etc/modules-load.d/zram.conf
zram
```

```bash:/etc/rc.local(2行目に追加)
/usr/local/bin/zram.sh start
```
windows > 他のウィンドウを最小にする > ウィンドウ上部をクリックして左右に振る

```txt:動作確認
Windows 8.1 pro
Windows 7 pro
```

Vmwareの画像描画遅いのを確認している中で偶然見つけた。ほとんど使わないかもしれない。

1. 何かのアプリのウィンドウ上部をクリックする。
2. そのまま、左右に振る

そうすると他の開いているアプリがすべて最小化される。

左右に振るとき、マウスカーソルが他のアプリの上部（青色などになっているもの）にオーバラップする時に最小化できる？

最小化の後にさらに左右に振っていると、最小化されたものが開きなおす。
しかし、一回開き直したものは、上記の方法で最小化できなくなる。

<hr>

デスクトップにすばやくアクセスしたいときは`Windowsキー + d`の方が使いやすい。
iOS / Mac 間のファイル共有の話（ビビビコントローラー展示コンテンツの技術解説）

# 忙しい人のための簡潔なまとめ

iOSのアプリからMacにファイルを送るときは、
USBでつないでインターネット共有するのがオススメ


# 前置き

先日、友人と制作したプライベートワーク「[ビビビコントローラー](http://vivivi-con.com/)」が、[Mashup Awards 2015 にて優秀賞をいただきました](http://mashupaward.jp/winning_list/)。
[![ビビビコントローラー](https://qiita-image-store.s3.amazonaws.com/0/103384/154d5475-2ced-d1a0-2ae5-a9dc3a28c21b.png)](https://vimeo.com/137045287)


実はこのビビビコントローラー、まず最初に展示ありきでコンテンツを作っていて、その中のコントローラー部分をデバイス単体で動くように切り分けたものだったりします。
で、その元のコンテンツがこちらの「恋が僕を殺しにきた」。
[![恋が僕を殺しに来た](https://qiita-image-store.s3.amazonaws.com/0/103384/6ed72d18-4ac7-fa10-2b15-21aa9e3e7503.png)](https://vimeo.com/145967297)

> 「恋が僕を殺しにきた」は ビビビコンを体験するためのコンテンツです。 体験者はコントローラーを握りながら、 目の前に現れ、話しかけてくる 美女の映像を視聴します。 自分の好みの女性が現れたとき、 グッときた瞬間を検知して、 電気刺激を発生。 体験者の心の叫びをスーパースローで撮影し、 トキメキを感じた瞬間をリプレイで再生します。

今回はこの「恋が僕を殺しに来た」の技術解説をしようと思ってます。

## 構成

### ビビビコントーラー　USB Type
	Arduino nano（心拍の測定 / 高圧電流の発生）
	※ nanoは展示版のみ。通常はpro miniを使用。
	
### Mac mini
	OpenFrameworks（コンテンツの表示 / 制御）
	Python（iPhoneからのスローモーションファイルの受け取り）
	
### iPhone 6
	App（スローモーション動画の撮影 /  Macへのファイルの送信）

あまり面倒なことをしたくなかったので、それぞれシンプルな担当に分けて、実装が複雑にならないようにと、この構成に。



## 接続形式

### ビビビコン（Arduino）->OpenFrameworks
	USB Serial

### OpenFrameworks <-> iOS App
	USB OSC（UDP）

### iOS App -> Python
	USB http form-data

## コンテンツのフロー

1. OF コンテンツ待機状態
2. ビビビコン 心拍の計測を開始 & OSC Message 送出
3. → OF コンテンツ説明 & 注意画面表示 
4. ビビビコン その間に心拍数の基準値を作成
5. OF 女の子の映像を再生開始
6. ビビビコン 心拍数が基準値より規定割合上昇したら、OSC Message送出
7. → OF iOSにOSC Message送出
8. → iOS スローモーション動画の撮影開始
9. ビビビコン 高圧電流を発生
10. OF iOSにOSC Message送出
11. iOS スローモーション動画の撮影完了
12. → iOS スローモーション動画ファイルを Pythonサーバーに送信
13. → iOS ファイル送信完了OFにOSC Message送出
14. → OF 痛がっている様子をリプレイ再生

→ がついていないのは、レイテンシとかコンテンツの再生時間を見込んで、ディレイかけたりして、通信じゃなくて自動的に処理が進む仕組みに。


## ファイルの転送速度問題
ざっとこの流れができたうえで問題としてあったのが、11.のファイル送信時に結構時間がかかるという点。
240fpsでなるべく大きいサイズで撮ると、どうしても 7MB前後になってしまうのでWi-fiベースだと転送完了まで、間があいてしまってよろしくない感じに。

コンテンツのフローとしては、
体験ユーザーがビビビっときて、ひと笑い。
音楽に乗せてビビビっときた瞬間をリプレイして、もうひと笑い。
と、体験ユーザーの様子をまわりのひとに見せて笑いをとるという感じなので、この間の数秒の待ちは割と厳しいものが。


## 接続方式を考える
割とこの通信環境の整備はあるあるだったりするんだけど、仕事でも現地にネット環境がないか、ネット環境があってもセキュリティかかってて端末同士が通信できなかったり、会場に無線がたくさん飛びかっていて接続が安定しなかったりといろいろと速度以外の問題もつきもの。
で、なるべく有線で繋げたいのになーというのは常々考えるところ。

Mac同士とかであれば、Ethernetでインターネット共有させるのをよくやったりするんだけど、共有する元の回線がないとONにできないので、無理矢理別デバイスを認識させてそれを共有しているという体裁にしたり。

とはいえ、iPhoneは有線の物理ポートがないので、どうしたものかなーと悩んでた。iPhoneはセンサーにもなるし、モニタにもなるし、スピーカーにもなるし、ストレージにもなるので、この辺改善できると便利だなーと。


## で、どうしたか
iPhoneからMacへ、USBでインターネット共有（テザリング）ができるので、その方法で試したところ、これが成功。

体感としてコンテンツの間を感じることなく、ファイルの転送からリプレイまでスムーズにつなげることができた。
一個引っかかりどころとして、Mac側のIPアドレスは普通に調べられたけど、iPhone側のIPはコントールパネルから見られなかったので、Mac側のIPから類推することに。どうやら**172.20.10.1**で固定ぽい。

この方式の悩みは、イベントや旅行向けのiPhoneレンタルサービスは、回線契約していてもテザリングオプションに加入していなかったりすることくらい。



## 次回の展示予定（PR）
このビビビコントローラー、GUGENのコンテスト2015を一次選考を無事通過したので、今週末開催される展示会にて展示できることになりました。
http://gugen.jp/entry2015/016

日時：2015年12月19日(土)12時~18時
場所：[秋葉原コンベンションホール](https://www.google.co.jp/maps/place/%E7%A7%8B%E8%91%89%E5%8E%9F%E3%82%B3%E3%83%B3%E3%83%99%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9B%E3%83%BC%E3%83%AB/@35.6992193,139.7699246,17z/data=!3m1!4b1!4m2!3m1!1s0x60188c1d6fb74207:0xe6100facc0f6dc34?hl=ja)

ビビビコントローラー本体も、今回説明している「恋が僕を殺しにきた」も展示する予定なので、お時間ある方は是非ふらっと遊びに来てください。
bashで同じ文字の繰り返しを作りたい，もしくはクリスマスまでのカウントダウン

bashのプロンプトにカウントダウンを表示したいことがありますよね．

参考画像
![image](https://qiita-image-store.s3.amazonaws.com/0/18974/9908499b-00dc-c6d6-bd95-40c36d217972.png)

リリース日だったり何かの記念日だったり用途は様々だと思います．

これをやるためには同じ文字の繰り返しをシェル内で取得しなければなりませんが，`repeat`[^rep1]とか`*`[^rep2]とか都合の良いものがありません．

## 空白で埋めて置換
```bash
printf '%*s' $((20151225 - $(date +%Y%m%d))) | sed -e 's/ /🔥/g'`
```

元ネタ[^so]では変換は`tr`でやってましたが，🔥とか使えなかったので`sed`で．

## sedつかわないように改善
```bash
printf '🔥%.0s' `eval echo {1..$((20151225 - $(date +%Y%m%d)))}`
```

`{1..10}`とかの連番生成するところを計算式`$((...))`に変えるだけではうまくいかないので，`eval echo`とする必要があります．

あとはこいつを`PS1`とかにぶち込めば最初の画像のようなプロンプトを作ることができます．

---
[^rep1]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

[^rep2]: http://www.rubylife.jp/ini/string/index7.html

[^so]: http://stackoverflow.com/questions/3211891/creating-string-of-repeated-characters-in-shell-script
CentOS6.x に Ruby193をインストール[コマンド4行]

#インストール方法(参考にさせて頂いた情報のまま)
```lang:command
yum install -y centos-release-SCL
yum install -y ruby193
source /opt/rh/ruby193/enable
echo "source /opt/rh/ruby193/enable" | sudo tee -a /etc/profile.d/ruby193.sh
```

```lang:command
[vagrant@www ~]$ ruby -v
ruby 1.9.3p484 (2013-11-22) [x86_64-linux]
```

- centos-release-SCLは、CentOS版のRedHat Software Collections

- yum だから簡単

- 注意点 [Gaining Access to SCLs](https://wiki.centos.org/AdditionalResources/Repositories/SCL)
  CentOS Extras repository (x86_64 only)

- ポイント
 /etc/profile.dにruby用shellを設置すると便利

#参考にさせて頂いた情報

- [Ruby 193 on Centos 6.6](http://styk.tv/ruby-193-on-centos-6-6.php)
- [Software Collections (SCL) を CentOS に入れてみた](http://qiita.com/murachi1208/items/202bff84964188619f57)
PHPのユニットテスト関連まとめ

記事が分散して困るのでとりあえず雑多にまとめる



auto_prepend_file / auto_append_file を使っていつでもコードカバレッジとれるようにする
http://www.1x1.jp/blog/2011/06/php_codecoverage_cakephp.html
Rspec | should と is_expected では subject と let が逆の順番で走る

# 問題

なぜか should ではテストが成功し。
is_expected では落ちる spec を見つけた。

is_expected は should のエイリアスではないのだろうか？

# 結論

is_expected を書いたテストでは、 Rspec 3 の処理順が適用されるようになる。

そして。

Rspec 2 では let => subject の順に。
Rspec 3 では subject => let の順に。

逆の順番で処理が走る。これが理由だった。

問題になることは少ないと思うが。
この順序に依存したテストを書いているときは注意だ。

（依存しないようにテストを変えたほうが良い）

# 検証コード

let と subject が走った時に、それぞれコンソールに標準出力してみる。

```rb:test_spec.rb
require 'spec_helper'

describe  do
  subject { p 'SUBJECT'; 'example'; }
  let(:example) { p 'LET'; 'example'; }

  context 'when Rspec 2' do
    it { should eq example }
  end

  context 'when Rspec 3' do
    it { is_expected.to eq example }
  end
end
```

`$ rspec -fd test_spec.rb`

# 結果

```rb
  when Rspec 2
"LET"
"SUBJECT"
    should eq "example"

  when Rspec 3
"SUBJECT"
"LET"
    should eq "example"
```

# 補足

Rspec 2 でも subject! を使えば、subject を先に走らせることも出来る。

```test_spec.rb
  subject! { p 'SUBJECT'; 'example'; }
  let(:example) { p 'LET'; 'example'; }
```

Rspec 3 でも let! を使えば、 let を先に走らせることも出来る。

```test_spec.rb
  subject { p 'SUBJECT'; 'example'; }
  let!(:example) { p 'LET'; 'example'; }
```

しかし、この順番に依存しないテストを書こう。

# 環境

- rspec-rails 3.4.0



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->