OmniAICreator/Qiita-1.07M huggingface dataset:
第6話 友だち

**友だちは大切に！**

太郎と次郎は街で出会った気の合う人と友だちになって、仲間を増やそうと考えていました。忘れっぽい二人は、出会った仲間を友だちとしてメモっていこうと思いついたことをコード化しました。

友だち情報をメモるためにクラスを実装します。

```php:app/models/Friends.php
<?php

class Friends extends Phalcon\Mvc\Collection
{
    public function getSource()
    {
        return "friends";
    }
}
```
友だち情報をメモるためのフォームを作成します。今回はメールアドレスをメモすることにします。

```php:app/forms/FriendForm.php
<?php

class FriendForm extends Phalcon\Forms\Form
{
	public function initialize($entity = null, $options = null)
	{
	        $email = new Phalcon\Forms\Element\Email('email');
	        $email->setLabel('お友だちのメールアドレス');
            // 必須チェック
	        $email->addValidators([
	            new Phalcon\Validation\Validator\PresenceOf([
	                'message' => 'メールアドレスは、必ず入れてください'
	            ])
	        ]);
	        $this->add($email);
	        $friend = new Phalcon\Forms\Element\Submit('friend');
            // ボタンのValue変更...これであってる？
	        $friend->setDefault('お友だちになる');
	        $this->add($friend);
	}
	public function messages($title)
	{
		if ($this->hasMessagesFor($title)) {
			foreach ($this->getMessagesFor($title) as $message) {
				$this->flash->error($message);
			}
		}
	}

}
```
作成したフォームを自動的に読み込むようにオートローダーに追加します。

```php:public/Index.php
	// オートローダにディレクトリを登録する
	$loader = new Phalcon\Loader();
	$loader->registerDirs([
		'../app/controllers/',
		'../app/models/',
		'../app/forms/'
	])->register();
```
表示はVoltエンジンを使ってみたいので追加します。

```php:public/Index.php
// ビューのコンポーネントの組み立て
	$di->set('view', function () {
		$view = new Phalcon\Mvc\View();
		$view->setViewsDir('../app/views/');
		$view->registerEngines([
			'.volt' => 'Phalcon\Mvc\View\Engine\Volt',
			'.phtml' => 'Phalcon\Mvc\View\Engine\Php'
		]);
		return $view;
	});
```
HTMLのテンプレート（というか、外枠？ｗ）を作成します。

```html:views/index.volt
<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>ヨンプル</title>
 </head>
 <body>
  {{ content() }}
 </body>
</html>
```
フォーム用のHTMLを作成します。（最後のcontent()はflashしたメッセージ用です）

```html:views/index/index.volt
{{ form() }}
 {{ form.label('email') }}
 {{ form.render('email') }}
 {{ form.render('friend') }}
 {{ form.messages('email') }}
 {{ content() }}
{{ end_form() }}
```
コントローラーを作成します。

```php:app/controllers/IndexController.php
class IndexController extends Phalcon\Mvc\Controller
{
	public function indexAction()
	{
		$form = new FriendForm();
		if ($this->request->isPost()) {
			if ($form->isValid($this->request->getPost())) {
				$query['conditions'] = [
					'email' => $this->request->getPost('email')
				];
				if (Friends::count($query) != 0) {
					$this->flash->error('すでにお友だちですけど...');
				} else {
					$friend = new Friends();
					$friend->email = $this->request->getPost('email');
					if ($friend->save()) {
						$this->flash->success('お友だちになりました。');
					}
				}
 			}
		}
		$this->view->form = $form;
	}
}
```
なんとなく動いたが、もう少し、Voltエンジン勉強しよう...
Node.js でセキュアランダムな16進数の文字列が欲しい時のワンライナー

Node.js でセキュアランダムな16進数の文字列が欲しい時

```sh
node -e "console.log(require('crypto').randomBytes(8).toString('hex'));"
```

を実行する。実行結果は、

```
6090465a4fba7626
```

こんな感じで出力される。それだけ。
drawableとmipmapの違い

Android Studioにおいてランチャーアイコンはそれまでのdrawable-密度/ic_launcher.pngからmipmap-密度/ic_launcher.pngに変わりました。
もちろん、名前が変わっただけじゃなくて実際の挙動も変わっているのですが、イマイチ地味な変化のためよく知られていないように思います。

#結論#

結論から言うとランチャーアイコンはmipmapにしましょう。

#mipmapとは#

Mipmapは3Dでよく使われる技術で、遠くのオブジェクトには荒いテクスチャ、近くのオブジェクトには細かいテクスチャを使用することでクオリティとメモリーを両立させる技術です。

Androidは3Dではないですが、drawableで似たようなことが行われています。
drawable-mdpiやdrawable-xxhdpiのように端末のピクセルサイズに応じてサイズの異なる画像を用意することで画面密度が荒い端末ではメモリー消費量を節約して、画面密度が細かい端末では高精細な画像を適用する qualifierという仕組みです。

通常であれば、それで良いのですが、最近の端末ではランチャーアイコンにおいて端末本来のdpiよりも高いdpiを使用してアイコンを拡大気味に表示している端末が有ります。

例えばNexus5では本来アイコンは、48dpのxxhdpi(3倍）なので144x144pxとなるはずなのに実際には176x176pxで表示されます。Nexus6では224x224pxで表示されます。

#drawableとmipmapにおける挙動の違い#
この時、drableに指定されている画像は、端末の物理的なピクセルサイズを元にxxhdpiの画像を使用します。
それに対してmipmapに指定されている画像は、描画するときの画面密度を元に適切な画像を切り替えてxxxhdpiの画像を使用します。
![kenz1845-mipmap.jpg](https://qiita-image-store.s3.amazonaws.com/0/17830/eca623e0-864e-0c2a-904e-fac790ac3beb.jpeg)
Nexus5(xxhdpi)においてic_launcherをdarawableに置いた場合とmipmapにおいた場合のスクリーンショットです。
drawableではxxhdpiが使用されれているのに対してmipmapではxxxhdpiが使用されているのがわかります。


一般的に画像では拡大より縮小のほうが画質劣化が少ないので、drawableなxxhdpiを拡大するよりmipmapなxxxhdpiを縮小したほうが画質の劣化を抑えることが出来ます。

#どれくらい画質に差がでるか#
同じ画像を元にmipmapを使用した場合とdrawableを使用した場合を見比べてみましょう。

![kenz1845-mipmap2.png](https://qiita-image-store.s3.amazonaws.com/0/17830/af4a5b32-7eea-7430-078e-36b1a07d8a46.png)
表示した端末はNexus5上でdrawableとmipmapの画像を表示してみました。
左がdrawable、右がmipmapです。
drawableの方は144x144の画像を176x176に拡大したもの、mipmapは196x196の画像を176x176に縮小していることになります。

クビの部分を見るとmipmapの方が輪郭がくっきりしているのがよくわかります。

拡大するとこんな感じ
drawableではエッジ部分がかなりぼやけているのがわかります。
![kenz1845-mipmap3.png](https://qiita-image-store.s3.amazonaws.com/0/17830/4096bab7-aede-769a-bf68-48bb19dbc00b.png)

ということで、アイコンランチャーはdrawableではなくmipmapを使ってxxxhdpiまでサポートすることをおすすめします。

この記事はFirespeedの記事を元に細部の調整を行ったものです。
IEのみsvg　"viewBox"の値が変更できないとき


正確には、svgのviewBoxの値を取得した時の問題

```
 svg.attr("viewBox")
```
でviewBoxの値を取得し、
配列に格納し、３番目のパラメータ（幅）と４番目のパラメータ（高さ）を
変更して、再度viewBoxを設定しようとしたら、

属性が空っぽになった。　viewBox="" 


原因は、
viewBoxの値を取得した時に、chromeではカンマ+空白、IEは空白のみ。
それに気づかずxとyの取得のため、
```split(",")```
で切り分けていた。


で、めちゃくちゃな値を設定したので、属性を変更した時に、変更できずに属性が空っぽになった。
切り分けを
```split(" ")```
に変更したら、IEでもviewBoxの値が変更できた。
Sublime Text における R 言語の関数補完について

# 環境
- Sublime Text3 3103
- R 3.2.3
- Windows10 64bit

# 背景
最近、`r` と `r markdown` による学習を `Sublime Text` でしています。

`lm` や `plot` 関数は、［関数 + Tab］で結構補完してくれます。

```{r}
lm[Tab]
↓
# Logistic regression model
modelName <- glm(DV ~ predictor1 +* predictor2, data = df, family = "binomial")
summary(modelName)
```

といった感じです。

これは、`.R` 拡張子で `lm` と入力された場合は上記の出力をするという定義（スニペット）ファイルが用意されているからです。※このファイルがどこにあるか不明(T_T)

# 問題
新たに、`install.package()` したパッケージの関数についても、`lm` のように補完してほしい。
しかし、現状は関数名を補完するだけ。

`R-Box` という Sublime Text で R言語を快適にするパッケージがあり、`packages.R` というファイルを見ると、上記の願望が叶えられそうな気がするのですが、行き詰まっています。

# 目標
**【Sublime Text 上で R 言語の関数補完を実現】**

`LaTeX` で `\documentclass{` を入力すると、ドキュメントクラスのリストが表示されるような、とにかく R 言語の補完機能を強化したいです。

よろしくお願い致します。

# 解決
ST3 の [R-snippets](https://github.com/jvcasill/R-snippets) パッケージに存在する関数のみ補完可能。

# **課題**
`install.package()` によって新たに取得したパッケージに対して、自動的に補完を支援するファイル（`**.sublime-snippet`）を生成する事ができれば、目的達成。
運用MySQL ~その１~ DB状態確認

# MySQLの状態を確認する
mysqlコマンドラインツールでSQLを発行し、MySQLの状態を確認する。
状態確認に最低限必要と思われるコマンドのみ記載しています。

## mysqlコマンドで接続
localhostのMySQLにログイン

```bash
mysql -u[user] -p (--socket=[socketfile])
```
リモートホストのMySQLにログイン

```bash
mysql -u[user] -p[passwd] -h[hostname]
```

[MySQL コマンドラインツール](https://dev.mysql.com/doc/refman/5.6/ja/mysql.html)

## DBの状態、構成を確認する
### 実行中クエリを確認する
 * show 構文で確認
   ```mysql:query
   show [full] processlist;
   ```
[SHOW PROCESSLIST 構文](https://dev.mysql.com/doc/refman/5.6/ja/show-processlist.html)

 * information_schemaから確認
   where句で絞るなど、showコマンドより柔軟に接続情報を取得できる。

  * processlistを取得
    
    ```mysql:query
    select * from information_schema.processlist;
    ```
  * where句で絞る

    ```mysql:query
    select * from information_schema.processlist where HOST = '[remote_host]';
    ```
[MySQL5.6 PROCESSLISTテーブル]
(http://dev.mysql.com/doc/refman/5.6/ja/processlist-table.html)
[MySQL5.6 information_schema]
(http://dev.mysql.com/doc/refman/5.6/ja/information-schema.html)

### DB構成を確認
 * DB一覧を取得

    ```mysql:query
    show databases;
    ```
 * クエリを実行するDBを指定

    ```mysql:query
    use [db_name];
    ```
 * テーブル一覧を表示

    ```mysql:query
    show tables;
    ```
 * テーブル詳細を表示

    ```mysql:query
    show table status;
    ```
 * テーブル構成(CREATE TABLE文)を表示

    ```mysql:query
    show create table [table_name];
    ```

[SHOW 構文](https://dev.mysql.com/doc/refman/5.6/ja/show.html)

### 権限を確認
 * 権限一覧を取得 (user,hostでソートしておくと見やすい)

    ```mysql:query
    select user,host from mysql.user order by user,host;
    ```
 * 権限の詳細を取得

    ```mysql:query
    show grants for `[user]`@`[host]`;
    ```
    [SHOW GRANTS 構文](https://dev.mysql.com/doc/refman/5.6/ja/show-grants.html)

### MySQLの設定を確認
```mysql:query
show global variables;
```
[SHOW VARIABLES 構文](https://dev.mysql.com/doc/refman/5.6/ja/show-variables.html)

### MySQLの状態を確認
```mysql:query
show global status;
```
[SHOW STATUS 構文](https://dev.mysql.com/doc/refman/5.6/ja/show-status.html)

### レプリケーション設定、状態を確認
```mysql:query
show slave status\G
```
[SHOW SLAVE STATUS 構文](https://dev.mysql.com/doc/refman/5.6/ja/show-slave-status.html)

### innodbの詳細確認
```mysql:query
show engine innodb status\G
```
[InnoDB 標準モニターおよびロックモニターの出力](https://dev.mysql.com/doc/refman/5.6/ja/innodb-standard-monitor.html)
煽られるやつをJSで

今さｒ(ry

```js
var arr = ['進捗', 'どう', 'です', 'か'], cnt = 0, resultStrArr = [];

for (var i = 0, rndVal = 0, l = arr.length; i < l; cnt++) {
    rndVal = Math.random()*l | 0;
    i = rndVal === i ? i + 1 : 0;
    resultStrArr[cnt] = arr[rndVal];
}

console.log(resultStrArr.join('') + '\n' + cnt + '回');
```

無駄にTwitterに投稿できるサイズ（139文字）

```js
var a=['進捗','どう','です','か'],l=a.length,c=i=r=0,s=[];for(;i<l;c++){r=Math.random()*l|0;i=r===i?i+1:0;s[c]=a[r];}alert(s.join('')+'\n'+c+'回');
```
S3ファイルを監視するLambda関数をテストする


# はじめに

LambdaにはS3へのファイルアップロードを監視して実行するオプションがあります。
API Gatewayから呼び出す場合、event変数にはシンプルにJSONのみが設定されます。
しかし、S3からの呼び出しからの場合には、event変数には全く異なる値が設定されます。

そこで、S3から呼び出す場合にTest実行時にどういった値をパラメータとして設定すべきか
を整理してみました。

# event 変数の初期設定

Lambda関数の設定画面でActionボタンから「Configure test event」をクリックします。
ここで「Sample event template」から「S3 PUT」を選択すると、
S3にファイルがPUTされた場合のS3のevent変数が初期設定できます。

![2016-02-12.png](https://qiita-image-store.s3.amazonaws.com/0/112407/7fd30a32-6b59-7e7c-fdac-218f3fee23d5.png)

具体的には以下の値です。

```
{
  "Records": [
    {
      "eventVersion": "2.0",
      "eventTime": "1970-01-01T00:00:00.000Z",
      "requestParameters": {
        "sourceIPAddress": "127.0.0.1"
      },
      "s3": {
        "configurationId": "testConfigRule",
        "object": {
          "eTag": "0123456789abcdef0123456789abcdef",
          "sequencer": "0A1B2C3D4E5F678901",
          "key": "HappyFace.jpg",
          "size": 1024
        },
        "bucket": {
          "arn": "arn:aws:s3:::yoshidasts",
          "name": "upload",
          "ownerIdentity": {
            "principalId": "EXAMPLE"
          }
        },
        "s3SchemaVersion": "1.0"
      },
      "responseElements": {
        "x-amz-id-2": "EXAMPLE123/5678abcdefghijklambdaisawesome/mnopqrstuvwxyzABCDEFGH",
        "x-amz-request-id": "EXAMPLE123456789"
      },
      "awsRegion": "us-east-1",
      "eventName": "ObjectCreated:Put",
      "userIdentity": {
        "principalId": "EXAMPLE"
      },
      "eventSource": "aws:s3"
    }
  ]
}
```

この中で、処理でよく利用するのは以下の値だと思います。
<dl>
  <dt>Records[0].s3.bucket.arn</dt>
    <dd>イベントが発火されたS3のarn</dd>
  <dt>Records[0].s3.bucket.name</dt>
    <dd>イベントが発火されたS3のバケット</dd>
  <dt>Records[0].s3.object.key</dt>
    <dd>イベントが発火されたS3のファイル名</dd>
</dl>

# ファイルを読み込んで見る

aws-sdkモジュールはLambdaで標準で対応しているので
index.jsに以下の通り記述するだけでS3のオブジェクトを読み込めます。

```
var AWS = require('aws-sdk');
var s3 = new AWS.S3();

exports.handler = function(event, context){
    var params ={
        Bucket: event.Records[0].s3.bucket.name,
        Key: event.Records[0].s3.object.key
    };
    var obj = s3.getObject(params, function(err, data){
        console.log(data.Body.toString());
        context.done(null, JSON.parse(data.Body));
    });
}
```
[.NET] DataGridViewのDataSourceに"本当に"nullを持つObjectArrayを入れたらどう表示されるか

# 元ネタ
[[.NET] DataGridViewのDataSourceにnullを持つObjectArrayを入れたらどう表示されるか - Qiita](http://qiita.com/mkit0031/items/dbe14a57bb1de8cd178d)

> だいたい予想通りで、
> int型 : 0
> string型 : 空白
> bool型 : false
> birthday : 空白
> で表示される。

# Nullable型
`int型 : 0`と`bool型 : false`は厳密にはnullではなくただの初期値なのでNullable型にした場合の動きはどうなるのだろう。

```csharp
class Person
{
    public int? id { get; set; }
    public string name { get; set; }
    public bool? sex { get; set; }
    public DateTime birthday { get; set; }
}

private void Form1_Load(object sender, EventArgs e)
{
    var persons = new List<Person>();
    persons.Add(new Person() { id = 1, name = "鹿目まどか", birthday = new DateTime(2010, 10, 3), sex = false });
    persons.Add(new Person() { id = 2, name = "暁美ほむら", sex = false });
    persons.Add(new Person() { id = 3, name = null, sex = false });
    persons.Add(new Person() { id = 4, name = "巴マミ" });
    persons.Add(new Person() { id = 5, name = "佐倉杏子", sex = false });
    persons.Add(new Person() { name = "キュゥべえ", sex = true });

    dataGridView1.DataSource = persons.ToArray();
}

```

# 結果
nullなら問答無用で空白になる模様
![2016-02-12.png](https://qiita-image-store.s3.amazonaws.com/0/54591/21bd029f-9647-7860-fe7c-b66acaf221e1.png)
AWS LambdaのVPCアクセスに関して少しだけ解説


AWS LambdaのVPC内リソースへのアクセスが可能になるアップデートが行われました。これは昨年のre:Inventで発表のみされていたものの、その時点ではまだ使えず非常に多くの人がそのリリースを待ち望んでいた機能です。基本的な内容はこちらの[ブログ記事](https://aws.amazon.com/blogs/aws/new-access-resources-in-a-vpc-from-your-lambda-functions/)を参照頂くとして、ここではいくつかキーとなるポイントを簡単に紹介したいと思います。

# 概要
ブログを読んでもらえばわかるのですが簡単に説明すると、これまでAWS LambdaのファンクションはVirtual Private Cloud(VPC)内にあってパブリックなIPを持っていないAWSリソースにはアクセスできませんでした。従ってAWS Lambdaからデータベースにアクセスしようとした場合にはデータベースサーバのIPアドレスやポートをパブリックにした上でアクセスを許可する必要がありました。一方でAmazon ElastiCacheのようなそもそもインターネットからのアクセスがサポートされていないサービスにはどう頑張ってもアクセスできませんでした。今回のリリースはそういったVPC内にあるAWSリソースへAWS Lambdaからアクセスすることが可能になる、というものです。

## 基本的な設定
VPCにアクセスさせたいLambdaファンクションに対して、アクセスしたいリソースがあるVPCのサブネットとセキュリティグループを割り当てるだけです。新規の場合はもちろん、既存のものを変更することも可能です。

## ENIを使って実現
今回のこの機能はElastic Network Interface(ENI)という本来Amazon Elastic Compute Cloud(EC2)で提供されていた機能を利用して実現されています。Lambdaファンクションに割り当てたVPCサブネット内に自動でENIが用意されてそれを用いてVPC内のリソースにアクセスする形になります。用意されたENIは自身のマネージメントコンソール上でも確認できます（EC2 -> Network Interfaces）。このENIは作成も削除もAWS Lambdaによってコントロールされます。最初のリクエストがあったタイミングで作成され、リクエストがしばらくないと自動的に削除されます。従って **最初のリクエストはENIの作成処理を含むためレイテンシが大きくなります**。

## IPアドレスを固定することは可能？
作成されるENIは指定したVPCサブネット内の任意のIPアドレスを持っています。これはDHCPによって割り当てられているものになります。また、ENI自体はLambdaによって管理されるのでリクエストが少なければ自動的に削除されることもありえます。従って、仮にあとから変更して任意のIPアドレスを割当たとしても削除されてしまう可能性があります。なお、ENI自体はIPアドレスを指定することが可能です。 **ただし、グローバルIPに関してはManaged Nat Gatewayや独自のNATインスタンスを利用することで固定することは可能です。** 従って、外部のWebサービスAPI等を叩く際などアクセス先から固定のIPを求められている場合はこの方法で対応が可能です。

## 特定Lambdaファンクションからのアクセスのみ許可したい
DBなどでアクセス元を特定のサーバやIP、ネットワークにのみ許可したいというのはよくある状況かと思います。しかし前述の通りLambdaのVPCアクセス機能ではIPアドレスを固定する方法でこれを実現することは難しいと言えます。ではどうやればいいかというと、セキュリティグループを利用して実現します。VPC内のリソースにアクセスさせたいファンクションにはサブネットだけでなくセキュリティグループも指定する必要があります。この指定したセキュリティグループをソースとするアクセスのみをアクセスする先（EC2インスタンスだったりRDSインスタンスだったり）のセキュリティグループで許可すると同等のことが実現できます。EC2を使っている人にはお馴染みの方法ですね。

## ENI作成に伴うレイテンシ
ENIは新規のリクエストや久しぶりのリクエストが発生したときに自動的に作成されます。従ってそういったアクセスの場合は通常のLambdaファンクションの実行よりも初期化の処理に時間がかかると言えます。これは通常は数秒から数十秒で済みますが状況によっては最大で60秒ほどになる場合もあります。このLambdaファンクションを例えばAPI Gatewayのバックエンドとして利用している場合はタイムアウトしてしまう場合があるので、そういったことを避けるためのワークアラウンドとしてはLambdaのScheduled Eventを利用した定期的なポーリングを行うのがおすすめです。

以上簡単にいくつかのポイントを書きましたが、他にも思いつけば追記していきます。

なお、お約束ですが **本投稿は個人によるものであり、所属する企業や団体に関係するものでも代表するものでもありません**。
[Shell] List all the directories size under the current directory

```bash
# List all directories size
ls | xargs du -hs
#or
du -sh *

# Show total size
du -csh *

# Sort results in a ascending order
du -sh * | gsort -h

# Sort results in a descending order
du -sh * | gsort -rh
```

Sample Result:

```
 52M	App
140K	Doc
8.9M	Note
 22M	Music
```
デフォルトで.hファイルのシンタックスハイライトをC++形式にする。

# 何のこと?
Atomのデフォルトでは.hファイルはC言語形式でシンタックスハイライトされてしまって、classとかを認識してくれないので、デフォルトでC++で動いてくれるようにする方法。

**C++∋CなんだからデフォルトC++でよかろうもん！**

# で、どうすればよいか

```yaml:~/.atom/config.cson
"*":
# 略
  core:
    customFileTypes:
      "source.cpp": [ # C++モードにする
        "h"           # .hファイルだったら
      ]
# 略
```

# 参考
https://github.com/atom/atom/issues/4156
https://github.com/atom/docs/blob/6e8baeecaf939426e66ee960c168cf27117215ef/book/02-using-atom/sections/06-customizing.asc#customizing-language-recognition
[Atomエディタ ver1.0.8で前から欲しかった機能が2つ追加されていた](http://qiita.com/knt45/items/9f88e2b54f622e27dd0d)

# その他諸々
QiitaはCSON形式のハイライトをやってくれないのね。(YAMLで代用
Sublime TextでSwiftする


デフォルトの Sublime Text 2 ではswift syntaxがないため味気ない. なので.swiftコードにsyntaxで色がついて, Cmd + Bで実行, 実行結果が Sublime Text に表示され, かつUIも動かせるところまでやってみた.

環境: 
+ Mac OS 10.11.3
+ Homebrew + Cask

## Sublime Text 2 のインストール

普通にダウンロードしてきてインストールすればいいだけだが brew-caskが使いたいので

```shell
brew cask install sublime-text
```
これでSublime Text 2がインストールされる. 3を入れたいのならsublime-text3で. おそらく3でも以下の設定は変わらないはず.

## Package Control の導入

次に Swift Package を入れるために Package Control を導入する. すでに入っているならば飛ばして次へ. https://packagecontrol.io/installation に書いてあるとおりにすれば簡単にできる. 

1. Cmd + ` で console を表示する.
2. 上のサイトにあるインストール用コードをコピペする.

以上

Package Controlのインストールが終わったら Sublime Text を再起動し、Control + Cmd + P を同時入力し、Package Control: Install Package と入力, 途中で補完される. すると

![package.png](https://qiita-image-store.s3.amazonaws.com/0/110715/55564df3-b587-b866-488f-6726abe72c82.png "package.png")

のような Packageの検索フィールドが表示されるので swiftと入力し, syntaxを導入する. ここまででswiftのsyntaxの設定は完了だが, Cmd + B では何もおきないので次にその設定をする. 

## Swift Build System の設定

Sublime Text のメニューから, Tools > Build System > New Build System ... を選択. 新規の.sublime-buildが作成されるので以下をコピペ. 

``` Swift.sublime-build
{
    "cmd": ["xcrun -sdk macosx swift $file_name"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "path": "/usr/bin/",
    "selector": "source.swift",
    "shell": true
}
```
としてやって, Swift.sublime-buildとでも名前をつけて保存してやる. [Sublime Text2上でSwiftをコンパイル＆実行](http://qiita.com/noriyotcp/items/ba2e4ac881f3c7a5891e) を参考に, AppKitやらのMac OS上のUI部品でも遊べるようにcmdとpathを多少修正. cmdがただのswiftだとUI部品のimportでエラーが起きる. 


## サンプルコード

最後にUIを使う簡単なサンプルコード. Alertを表示するだけのもの. 

```
import AppKit

let alert = NSAlert()
alert.runModal()
```

![alert.png](https://qiita-image-store.s3.amazonaws.com/0/110715/7d42e483-3dd5-67d3-adca-fd226bfbb7cd.png "alert.png")


これを実行するとAlertが表示されるはず. 表示されないし Sublime Text の実行が完了しないとなったら, Cmd + h で Sublime Text を非表示にしてみてもらいたい. おそらく裏に隠れている. 

参考:
+ [Sublime Text2上でSwiftをコンパイル＆実行](http://qiita.com/noriyotcp/items/ba2e4ac881f3c7a5891e)
+ [Sublime Text2&3用のSwift Package](http://qiita.com/noriyotcp/items/d476e3d1154d8117b128)
Movable Type でメンテナンスしやすいテンプレート書き換え系のプラグインを書く

## TL; DR

以下のようにやると、なんとなく MTML を書けばだいたい思った通りに挿入され、またメンテナンスもしやすくてよいとおもいます。

### 説明で使うプラグインの概要

記事の編集画面のテンプレートを書き換える例で考えます。

ディレクトリ構造は以下の通りです。

```
AwesomePlugin
├── config.yaml
├── lib
│   └── MT
│       └── Plugin
│           └── AwesomePlugin.pm
└── tmpl
    ├── edit_entry_header.tmpl
    └── edit_entry_title.tmpl
```

ヘッダーやタイトルの付近に挿入するMTMLを、ファイルとして用意します。

* edit_entry_header.tmpl : ヘッダーに挿入する MTML
* 
```xml
<script type="text/javascript">
jQuery(function($) {
  console.log("Awesome!");
});
</script>
```

* edit_entry_title.tmpl : タイトル欄の後ろに挿入する MTML
* 
```xml
<mt:If name="title">
<div>
<strong><__trans phrase="Awesome Title" /></strong>: <mt:Var name="title" encode_html="1" />
</div>
</mt:If>
```

### template_param を使う

書き換えたいテンプレートを `${MT_HOME}/tmpl/cms` から探して(今回であれば `${MT_HOME}/tmpl/cms/edit_entry.tmpl`)、`template_param.edit_entry` のような形で指定します。

config.yaml は以下のようになります

```yaml
id: AwesomePlugin
name: AwesomePlugin
version: 0.0.1

callbacks:
  MT::App::CMS::template_param.edit_entry: $AwesomePlugin::MT::Plugin::AwesomePlugin::template_param_edit_entry

description: <__trans phrase="This is my AwesomePlugin">

l10n_lexicon:
  ja:
    Awesome Title: "すごいタイトル"
```

### テンプレートをロードして、挿入する

書き換えたいテンプレートの中から、`id` の指定されている MT タグを探して、そこにプラグインでロードしたテンプレートを挿入します。

AwesomePlugin.pm は以下のようになります。

```pl
package MT::Plugin::AwesomePlugin;

use strict;
use warnings;
use utf8;

sub plugin {
    MT->component( __PACKAGE__ =~ m/::([^:]+)$/ );
}

sub insert_after {
    my ( $tmpl, $id, $template_name ) = @_;

    my $before = $tmpl->getElementById($id);
    foreach my $t ( @{ plugin()->load_tmpl($template_name)->tokens } ) {
        $tmpl->insertAfter( $t, $before );
        $before = $t;
    }
}

sub insert_before {
    my ( $tmpl, $id, $template_name ) = @_;

    my $after = $tmpl->getElementById($id);
    foreach my $t ( @{ plugin()->load_tmpl($template_name)->tokens } ) {
        $tmpl->insertBefore( $t, $after );
    }
}

sub template_param_edit_entry {
    my ( $cb, $app, $param, $tmpl ) = @_;

    insert_before( $tmpl, 'header_include', 'edit_entry_header.tmpl' );
    insert_after( $tmpl, 'title', 'edit_entry_title.tmpl' );
}

1;
```

Perl のコードがよくわからない場合には、とりあえずは前半はどのプラグイでも使えるのでまるっとコピペして、以下の部分だけ書き換えれば挿入位置などを好きに変更することができます。

```pl
insert_before( $tmpl, 'header_include', 'edit_entry_header.tmpl' );
insert_after( $tmpl, 'title', 'edit_entry_title.tmpl' );
```

これで、edit_entry_header.tmpl と edit_entry_title.tmpl を記事の編集画面に挿入することができます。


## この記事のやり方の特徴

### template_param をそのまま使った場合の辛い点

プラグインから MT の管理画面のテンプレートを書き換える場合、

* template_source
* template_output
* template_param

などがありますが ([ドキュメント](https://github.com/movabletype/Documentation/wiki/Japanese-plugin-dev-4-3))、素で使おうとすると、

* template_source や template_output
    * 正規表現の書き換えが辛くなりがち
    * コントローラーから渡されるパラメーターを利用できない
* template_param
    * 置き換えるHTMLの構築が冗長になりがち

というのがなかなか辛いです。

### この記事のやり方だと便利な点

* 挿入する内容を MTML (もしくは単に HTML) として、別ファイルで管理できる
* `<__trans phrase="..." />` も普通に使える
    * template_source では使えない
デザインパターン　Template Method

## 概要
親クラスに抽象的な処理のみを作成し、サブクラスで具体的な実装をすることで、処理の追加・変更に強くする。

ポイント：

~~~~
1. 変更が起きるものと起きないものでコードを分ける
変更がない処理　→　親クラス
変更がある　　　→　サブクラス
~~~~


## Tempalate Methodを使う前と後
#### Template Method使う前：

```template_method_before.rb
#!/usr/bin/ruby

# About Template Method

class Report
  def initialize
        @title = "月次レポート"
        @text = ["順調","OK"]
  end

  def output_reort
    puts "<html>"
    puts "<head>"
    puts "<title> #{@title} </title>"
    puts "</head>"
    puts "<body>"
    @text.each do |line|
      puts "<p>#{line}</p>"
    end
    puts "</body>"
    puts "</html>"
  end
end

report = Report.new
report.output_reort
```

#### Template Method使う後：

~~~
#!/usr/bin/ruby

# About Template Method

class Report
  def initialize
      @title = "月次レポート"
      @text = ["順調","OK"]
  end

  def output_report
      output_start
      output_head
      output_body_start
      output_body
      output_body_end
      output_end
  end

  def output_start
    raise "Called abst method. output_start"
  end

  def output_head
    raise "Called abst method. output_head"
  end

  def output_body_start
    raise "Called abst method. output_body_start"
  end

  def output_body
    raise "Called abst method. output_body"
  end

  def output_body_end
    raise "Called abst method. output_body_start"
  end

  def output_end
    raise "Called abst method. output_end"
  end
  
end


class HtmlReport < Report

  def output_start
    puts "<html>"
  end

  def output_head
    puts "<head>"
    puts "<title> #{@title} </title>"
    puts "</head>"
  end

  def output_body_start
    puts "<body>"
  end

  def output_body
    @text.each do |line|
      puts "<p>#{line}</p>"
    end
  end

  def output_body_end
    puts "</body>"
  end
  
  def output_end
    puts "</html>"
  end
 
end
~~~

親クラスには抽象的な処理のみ、サブクラスには具体的な処理を記載することで追加が容易になる。
たとえば、HTML出力だけではなく、テキスト出力もする必要があれば
以下のように書ける

```
class TextReport < Report
  def output_start
    puts "##### This is text report file #####"
  end

  def output_head
    puts "#{@title}"
  end

  def output_body_start
  end

  def output_body
  end

  def output_body_end
  end

  def output_end
  end
end
```
を加えるだけでよい。
Windows / Sublime Text > 一時的に別プロジェクトを開いて複数ファイルの作業をする

```txt:動作環境
Windows 7 pro
Sublime Text2
```

複数のプロジェクトを並列的に作業する場合、1つのプロジェクトで作業中のウィンドウ(ファイル)を後の作業時に戻りやすくするため、開いておきたいときがある。

具体的には

- レイアウトはグリッド:4 表示にしている
- 各グリッドには.cppや.hファイルが4つずつくらい開いている
- この状態が1つめのプロジェクト
- 別のプロジェクトでさらに別の.cppや.hファイルを同じくらい開きたい
- でも１つ目のプロジェクトの開いている状態は保持したい

以下とした

1. 空ファイルを作成 (Ctrl+N) > untitledとなる
2. 空ファイルのタブ(untitled)をドラッグして無関係な位置にて離す
   - 新しいsublime textウィンドウが開く
3. 空ファイルのタブのxを押して閉じる
4. 作業したいフォルダをエクスプローラからSublime Textにドラッグする
   - 左側にFoldersが開く
 
あとは作業したいファイルをそのウィンドウにて開いていく。

上記の場合、2つのSublime Textウィンドウが開いている

1. 1つ目のプロジェクト
2. 2つ目のプロジェクト

<font color=blue>両方を終了してから、次にSublime Textを開いた時に開くプロジェクトは「最後に閉じたプロジェクト」になるようだ。</font>

メイン作業のウィンドウを最後に閉じるようにするのがよさそう。
Goのfor文で関数のリストを作ろうとして嵌った話

まずはこれを見てくれ。コイツをどう思う？

```go
func main() {
   xs := []int{1, 2, 3}

   var cmds []func()
   for _, x := range xs {
      cmds = append(cmds, func() { fmt.Println(x) })

      fmt.Println("append: " + strconv.Itoa(x))
      for _, cmd := range cmds {
         fmt.Print("func eval: ")
         cmd()
      }
      fmt.Println()
   }
}
```

リストxsの値を利用する無名関数xsを作る。まあ、それなりにオーソドックスな処理だと思います。わたしの期待値としては、こうなるはずでした。

```bash
$ go run example_lambda.go
append: 1
func eval: 1

append: 2
func eval: 1
func eval: 2

append: 3
func eval: 1
func eval: 2
func eval: 3
```

しかし、現実はこうでした。

```bash
$ go run example_lambda.go
append: 1
func eval: 1

append: 2
func eval: 2
func eval: 2

append: 3
func eval: 3
func eval: 3
func eval: 3

```

あれ、各関数の実行結果が全部同じに！？　そのループ内で触ってないのに値変わってるんだけど... ダイナミックスコープみたいな動きしてるけど、goってクロージャーだからレキシカルスコープだよね？？？
と混乱していたところ、@tutumingさんより

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/koduki">@koduki</a> x がforの初期化で1度確保されたあとは代入になるので、全部の関数の中で参照してるxが同じ変数になってるのが原因ですね。 <a href="https://t.co/hCIUK7Ve6q">https://t.co/hCIUK7Ve6q</a></p>&mdash; tutuming (@tutuming) <a href="https://twitter.com/tutuming/status/697796351128506368">2016, 2月 11</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

と、指摘をいただきました。
むむ？　ということはXはループ毎に別の変数じゃなくて、ポインタアドレスは全部一緒ってこと？
とりあえず、アドレスを表示してみると...

```bash
go run example_lambda.go
append: 1
x addr = %!s(*int=0xc20800a200)
func eval: 1

append: 2
x addr = %!s(*int=0xc20800a200)
func eval: 2
func eval: 2

append: 3
x addr = %!s(*int=0xc20800a200)
func eval: 3
func eval: 3
func eval: 3
```

おお、確かに一緒だ。でも、ここまでわかれば大丈夫。Goは確か代入時は値で渡すはずだから、こんな感じに変えました。

```go
func main() {
   xs := []int{1, 2, 3}

   var cmds []func()
   for _, x := range xs {
      tmp := x
      cmds = append(cmds, func() { fmt.Println(tmp) })

      fmt.Println("append: " + strconv.Itoa(tmp))
      fmt.Printf("x addr = %s, tmp addr = %s\n", &x, &tmp)
      for _, cmd := range cmds {
      fmt.Print("func eval: ")
        cmd()
      }
      fmt.Println()
   }
}
```

forループの中で宣言したtmpに一度代入して、それを使うようにします。実行結果は以下の通り。

```bash
$ go run example_lambda.go
append: 1
x addr = %!s(*int=0xc20800a200), tmp addr = %!s(*int=0xc20800a208)
func eval: 1

append: 2
x addr = %!s(*int=0xc20800a200), tmp addr = %!s(*int=0xc20800a2b8)
func eval: 1
func eval: 2

append: 3
x addr = %!s(*int=0xc20800a200), tmp addr = %!s(*int=0xc20800a3a0)
func eval: 1
func eval: 2
func eval: 3

```

期待通り、関数内で参照している値が変わりました。tmp変数のアドレスがx変数とは異なり毎回違うのも確認できます。

しかし、分かってしまえば何ともないかもですが、foreach文でxのアドレスが一緒なのは嵌りそうだな... もっとGo力を鍛えないとですね。

それではHappy Hacking!
gulpでアイコンフォントを自動生成する


## はじめに
svg画像を使いやすくするために、アイコンフォントにすることは
多いと思うのですが、アイコンフォントをgulpで生成するやりかたをメモしておきます。

任意のディレクトリにsvgファイルを投げ込んだら全て自動でアイコンフォントが
生成されてhtml上で即使用できるようにしたいと思います。

nodeのインストールやgulpの基本的な使い方は省略します。

## ライブラリのインストール
今回は下記の5つを使用します。

- gulp
- gulp-svgmin
- gulp-iconfont-css
- gulp-iconfont
- gulp-watch

        $ npm install gulp gulp-svgmin　gulp-iconfont-css　gulp-iconfont gulp-watch　--save-dev


## タスクの設定
インストールに成功したらgulpのタスクを記述しているjsファイルで読み込みます。

````gulpfile.js
var gulp = require('gulp')
, svgmin = require('gulp-svgmin')
, iconfontCss = require('gulp-iconfont-css')
, iconfont = require('gulp-iconfont')
, watch = require('gulp-watch')
;
````

タスクは今回こんな感じにしてみました。

````gulpfile.js

gulp.task('start', function(){
  // ファイルが変更されたら再コンパイル
  gulp.watch('develop/svg/*.svg', ['iconfont']);
});

gulp.task('iconfont',['iconfont-hoge'], function () { 
  gulp.src('develop/fonts/*')
    .pipe(gulp.dest('release/common/fonts'));  // release配下にフォントファイルをコピー
});

gulp.task('iconfont-hoge', function (callback) {

  var svgminData = gulp.src('develop/svg/*.svg')
    .pipe(svgmin());  // svgファイルを圧縮

  svgminData.pipe(plumber())
    .pipe(iconfontCss({  // アイコンフォントのscssを生成する
        fontName: 'iconfont',
        path: 'develop/scss/iconsTemplate.scss',  // icons.scssのテンプレート
        targetPath: '../scss/setting/icons.scss',  // 生成するscssのパス
        fontPath: '../fonts/'  //scssからfontファイルへのパス。最終的にrelease配下に置かれた際に読み込めるパスにする
    }))
    .pipe(iconfont({  // アイコンフォントを生成する
        fontName: 'iconfont',
        formats: ['ttf', 'eot', 'woff', 'svg'],
        appendCodepoints:false
    }))
    .pipe(gulp.dest('develop/fonts')) //develop配下にscssとiconfontを生成
    .on('end', function(){  // iconfont-hogeが完了してからiconfontを実行
        callback(); 
    });
});
````

iconsTemplate.scssは[こちら](https://github.com/backflip/gulp-iconfont-css/blob/master/templates/_icons.scss)を参考にしています。
scssのcssへのコンパイルは、プロジェクトで使用している他のscssファイルと合わせて他の部分で行っていますが今回は省略。


        $ gulp start
でwatchが実行され、develop/svg/ディレクトリを監視します。

## ファイル構成
ファイル構成はこんな感じ

````
develop --- svg    // svgファイルを格納するディレクトリ、watchで監視
         |- fonts  // アイコンフォントを生成するディレクトリ
         |- scss   // iconsTemplate.scssを格納、icons.scssを生成するディレクトリ

release --- index.html
         |- common
               |- css    // コンパイルしたcssを生成するディレクトリ
               |- fonts  // アイコンフォントファイルをコピーする
````

最終的にはwatchを使用して、develop/svg内のsvgファイルが変更されたらiconfontタスクが実行されるようにしています。

基本的にはsvgファイルをdevelop/svgに投げ込むだけで関連ファイルが全て更新されるようにしているので開発効率化の参考になれば。
AWS IoTのMQTT PublisherをElectronで作ってみた

AWS IoTのMQTT Publishを簡単に試せる仕組みが欲しかったのですが、Electronにも触れてみたかったので、作ってみたお話です。SDKやコマンドラインツールでもいいのですが、より汎用的で敷居を下げたかったことが背景としてあります。

# AWS IoTにMQTT Publishするための準備
AWS IoTにMQTT Publishするためには、

- モノの作成
- モノの証明書の作成
- ポリシーの作成と紐つけ
- モノと証明書との紐つけ

といった設定をした後に、コマンドやSDKで

- **AWSリージョン**
- **MQTT Topic**
- **CA証明書（root CA）**
- **証明書（certificate）**
- **秘密鍵（private key）**
- クライアントID

※**太字**は必須項目

を指定して、メッセージをPublishすることになります。

今回は前者の設定が出来て、後者を*さっとテストしたい*、*試したい*といった時に、より簡単に実行できる環境・ツールを準備しようという試みです。

# AWS IoT MQTT Publisher
Electronアプリのソースは[GitHub](https://github.com/yamaryu0508/aws-iot-publisher)で公開させて頂いていますので、こちらでは概要に留めたいと思います。
※まだ全てパッケージングできていないので、必要に応じて各自パッケージング頂ければと思います。

## 完成イメージ
まずはアプリの画面です。

![ AWS IoT MQTT Publisher.png](https://qiita-image-store.s3.amazonaws.com/0/43383/0506f0d9-5487-ca1f-ddc6-5147da0a04ec.png)

先ほど挙げた指定項目を入力・選択して、送りたいメッセージをkey-value形式で入力してPublishボタンを押せばAWS IoTに接続・Publishするようになっています。

## メッセージ内容
key-value形式で入力されたメッセージは、シンプルなJSON形式で送信されます。なお、時間（time）を自動で付加するようになっています。

```json
{
  "time": "2016-02-12T09:12:55+09:00",
  "temperature": "16",
  "humidity": "80"
}
```

## パッケージの構成
今回利用したライブラリは「[aws-iot-device-sdk](https://github.com/aws/aws-iot-device-sdk-js)」を中心に次のようなものになります。

### Node.jsのライブラリ
- aws-iot-device-sdk（AWS IoTの公式JS-SDK）
- moment（時間操作）

### クライアントJavaScriptのライブラリ
- jQuery（DOM操作）
- Bootstrap（デザインフレームワーク）
- SweetAlert（アラート表示）
- Spin.js（スピナー表示）


# まとめ・所感
今回これを作った最大の動機は、冒頭にも少し触れましたが、AWS IoTへのMQTT Publishを「より汎用的で、敷居をさげて」試せるようにすることでした。PCからUIで実行できるので、ちょっと試したいという時や、切り分けの時に役立てそうです。

IoTは技術的にも幅広い知識を要する事業分野で、なかでも現場・ハードの部分はまだまだみんなが簡単に扱えるとは言い難い部分があると思いますが、IoTのデバイス接続も扱いやすくなってきていることを体感頂ければと思います。

Electronでのアプリ作成については、どのくらい時間を要するかと思っていましたが、始めて約5時間くらいでここまで来れました。Qiitaにも沢山記事が出てきていますし、普段[kintone](https://kintone.cybozu.com/jp/)のカスタマイズでクライアントサイドのJavaScriptは比較的よく触っているので、あまりつまずくポイントはありませんでした。やってて楽しかったですし、また何か作ると思います。

## 【補足】Developer Summit 2016 「[kintoneで実践するIoTハンズオン](http://event.shoeisha.jp/devsumi/20160218/session/1065/)」

IoTを現場で実践する場合もそうですが、ハンズオン・勉強会でIoTを扱う際にトラブルになりやすいのもこの部分です。

ということで、2016年2月18、19日開催のデブサで予定されている[kintone](https://kintone.cybozu.com/jp/)とAWS IoT/Lambdaの連携ハンズオンのタイミングで準備してみました。今回作成したツールもテストやハードトラブル時に利用したいと思っています。

kintoneは勿論のこと、AWS IoTやLambdaでIoTやりたいという方は是非お申込み頂ければと思います！
技術英語 > What is [your basis for that conclusion], Commander? / Don't jump to the conclusion. / Don't rush me.

@ Star Trek Voyager > TATOO

ある物を見つけて、それに対する推測を言ったChakotay. その言葉に対してTuvokが

> What is your basis for that conclusion, Commander?

<hr>
関連して思い出したのは

> Don't jump to the conclusion.

訳すとすると「結論を急ぐな」

http://ejje.weblio.jp/content/jump+to+the+conclusion
> 〈思い込む〉・決め込む(早合点する)

<hr>
関連して思い出したのは

> Don't rush me.

訳すとすると「急（せ）かさないでください」

http://ejje.weblio.jp/content/rush+me
css擬似要素のcontentをhtmlからattr()で取得する

## はじめに
cssの擬似要素（:beforeや:after）の中に入る要素はcssのcontentで指定することができますが、attrを使用することでjavascriptのようにhtmlから取得することができます。
コンテンツ（構造）と装飾の分離という意味でよりわかりやすい設計になるうえに、記述も少なくて済むのでおすすめ。

## 基本的な擬似要素
```index.html
<p class="first">テキスト</p>
```
```style.css
p:after {
  content: '擬似要素のテキスト';
}
```

これでpタグ内に擬似要素afterが表示される訳なんですが、
これには問題があって、

- css内に表示する文章が含まれていて、コンテンツと装飾が分離できていない
- 表示したいコンテンツごとに全てcssで設定する必要がある

ことになります。

## コンテンツと装飾を分離する
```index.html
<p data-text="擬似要素のテキスト">テキスト</p>
```

```style.css
p:after {
  content: attr(data-text)"";
}
```

とすることでpタグの「テキスト」の後にdata-textの「擬似要素のテキスト」を表示することができ、コンテンツと装飾を分離し、コンテンツは全てhtml内に書くことができます。

## 複数要素に対してcontentを設定する
たとえば複数の要素に対してことなるcontentを設定しなければならない時に通常だと

```index.html
<p class="first">テキスト</p>
<p class="second">テキスト</p>
```

```style.css
.first:after {
  content: "最初の要素のテキスト";
}
.second:after {
  content: "2番目の要素のテキスト";
}
```
となり、いちいち全てのパターンをcssで指定する必要があるのですが、
上記のattr()を利用すると。

```index.html
<p data-text="最初の要素のテキスト">テキスト</p>
<p data-text="2番目の要素のテキスト">テキスト</p>
```
```style.css
p:after {
  content: attr(data-text)"";
}
```
というように、一つのcssでまとめることができ便利です。

## 利用例
たとえばhoverしたときに表示するテキストを切り替えるボタンなどであれば、

```index.html
<button data-text="スタート">テキスト</button>
<button data-text="終了">テキスト</button>
```
```style.css
button:hover {
  text-indent: -9999px;
}
button:hover:after {
  content: attr(data-text)"";
}
```
というようにjsを使わずとも内容を切り替えることができます。（表示位置などは適宜調整してください）
また、要素やパターンが増えてもcssを修正することなく、対応が可能となります。

WEBアプリケーションなど、コンポーネントの概念が必要なものでは特に便利に使えるかと思います。
ExportOptionsSaveForWeb()で個人的に使えるもの一覧表

個人用メモ

ExportOptionsSaveForWebとは、SaveAsだとファイルを通常保存するのを、Photoshop上で言うところの「Web用に保存」に相当するものである。
このメソッドを使うことにより、画像のファイルサイズを小さく書き出すことが出来る。SaveAS()はクソ。
以下ExportOptionsSaveForWebメソッドで使えるプロパティである。
[公式リファレンスはこちら](http://cssdk.s3-website-us-east-1.amazonaws.com/sdk/1.0/docs/WebHelp/references/csawlib/com/adobe/photoshop/ExportOptionsSaveForWeb.html)

```
var saveImg = new ExportOptionsSaveForWeb();
//保存形式を指定
saveImg.format = SaveDocumentType.***;
//SaveDocumentTypeには大まかに以下の形式が使える
SaveDocumentType.PNG
SaveDocumentType.JPEG
SaveDocumentType.COMPUSERVEGIF
SaveDocumentType.PHOTOSHOP
```

SaveDocumentTypeで使えるその他のフォーマットは以下参照
["SaveDocumentType - API Documentation"](http://cssdk.s3-website-us-east-1.amazonaws.com/sdk/1.0/docs/WebHelp/references/csawlib/com/adobe/photoshop/SaveDocumentType.html)

```
//最適化するかどうか
saveImg.optimized = true or false;
//インターレースの有無
saveImg.interlaced = true or false;
//カラープロファイルの埋め込みの有無
saveImg.includeProfile = true or false;
//画質の圧縮率
saveImg.quality = 100;//100%の画質
//劣化
sabeImg.lossy = 0;
//PNGの場合、PNG8にするかどうか（デフォルトはtrue,faluseの場合PNG24つまり透過PNG）
saveImg.PNG8 = true or false;
//ボケ具合
saveImg.bur = 0; //ボケ0
//減色方式（GIF用？）
saveImg.colorReduction = ColorReductionType.SELECTIVE;//default
//マットカラー（白にする場合）
saveImg.matteColor = new RGBColor();
saveImg.matteColor.red = 255;
saveImg.matteColor.green = 255;
saveImg.matteColor.blue = 255;
//ディザー設定（わからん）
saveImg.dither = new DIFFUSION;//誤差拡散法
```

GIFは使う機会がないのでJPGとPNGについてもう少し調べようと思った。
下記はPNGとJPGの設定例

```
//PNGの場合
pngOpt = new ExportOptionsSaveForWeb();
	pngOpt.format = SaveDocumentType.PNG;
	pngOpt.optimized = true;
	pngOpt.interlaced = false;
	pngOpt.PNG8 = false;
//書き出し
folder = Folder.selectDialog("保存先フォルダの選択);
filePath = new File(folder.fsName + "/" + "ファイル名" + ".png");
app.activeDocument.exportDocument =(ExportType.SAVEFORWEB,pngOpt);

//JPGの場合
jpgOpt = new ExportOptionsSaveForWeb();
	jpgOpt.format = SaveDocumentType.JPEG;
	jpgOpt.includeProfile = false;
	jpgOpt.interlaced = false;
	jpgOpt.optimized = true;
	jpgOpt.quality = 100;
	jpgOpt.blur = 0;
	jpgOpt.matteColor = new RGBColor();
	jpgOpt.matteColor.red = 255;
	jpgOpt.matteColor.green = 255;
	jpgOpt.matteColor.blue = 255; 
//書き出し
folder = Folder.selectDialog("保存先フォルダの選択);
filePath = new File(folder.fsName + "/" + "ファイル名" + ".jpg");
app.activeDocument.exportDocument(ExportType.SAVEFORWEB,jpgOpt);
```
ファイルの行数を一覧表示したい

#やりたいこと
カレントディレクトリにあるファイルの行数を一覧表示したい。
###従来の手法：
```
>wc -l*
```
↑でもできるが、以下のようにディレクトリとファイルが混ざって表示されるのでなんとかしたい。
###表示例（ちょっと見にくい）：
```
>wc -l *
      5 aaaa_file
wc: dir1: ディレクトリです
      0 dir1
wc: dir2: ディレクトリです
      0 dir2
     10 file1
     27 file2
      9 file3
     51 合計
```

***
#実行コマンド：
```
wc -l * | lv | cat
```
一度lvを通してそれをcatで表示するとディレクトリとファイルが混ざって表示されなくなる。

###エイリアスの設定例：
```
alias wl='wc -l * | lv | cat'
```
としてあげると、wlコマンドを作成できる。

###実行例：
```
>wl
wc: dir1: ディレクトリです
wc: dir2: ディレクトリです
      5 aaaa_file
      0 dir1
      0 dir2
     10 file1
     27 file2
      9 file3
```
Webを使った新人研修

##はじめに
新人研修は、どの社でも必須のことと思います。
その新人研修をコストを掛けずに、Web上のサービスを使って行う方法を提案したいと思います。

###前提条件・環境
・インターネットに繋がるパソコン (or スマホ・タブレット)
・ブラインドタッチができ、基本的なネットリテラシーのある1年目社員

###学習させたい内容
・Linuxコマンド
・Javaを用いた基本的プログラミング
・SQL基礎

###所要時間
1コマにつき20分程度を想定

##研修にあたって
私見としては、物を覚えるには
・実践する
・必要性を感じる

この２つが必須と思います。
最終的には、必要性の感じさせるには、[OJT](https://ja.wikipedia.org/wiki/OJT)などで触れる機会を増やすのがベストと思います。

##Linuxコマンド
[Webを使った新人研修　～Linuxコマンド編～](http://qiita.com/fujisystem/items/63b787ac71e9bdcaf3f6)

##基本的プログラミング
[Webを使った新人研修　～Javaを用いた基本的プログラミング編～](https://qiita.com/fujisystem/items/4237ca88b224ae5875dd)

##SQL基礎
[Webを使った新人研修　～SQL基礎編～](https://qiita.com/fujisystem/items/ed3236c0e73907cf3942)

上記の３項目を学習させれば、新人のIT技術を底上げできるのではないかと思います。
Docker HubにカスタムイメージをpushしてCoreOSに取り込むチュートリアル

CoreOS のように Docker コンテナの pull 以外にソースの出入り口がない環境では、[Docker Hub](https://hub.docker.com) (またはその他のリポジトリ) を経由してイメージを取り込む必要があります。

以下は、Docker Hub を経由して CoreOS 上にイメージを取り込むチュートリアルです。


チュートリアル
----
### Docker Hub 上にリポジトリを作る
何はともあれアカウントを取得して、リポジトリを作りましょう。

1. Docker Hub アカウントを取得
2. "Create Repository" でリポジトリを作成
    * 今回は [1000k/rails-chat/](https://hub.docker.com/r/1000k/rails-chat/) という名前で public リポジトリを作ってみました


### Docker CLI からイメージをリポジトリに登録する
お手元の CLI からイメージを転送します。

1. `docker tag` でイメージにタグをつける
2. `docker login` して Docker Hub に接続する
3. `docker push` でイメージを Docker Hub に登録する


例:

```
# イメージ一覧を確認
docker images

# イメージ名か IMAGE ID を指定してタグを付ける
# ※{user_name}/{image_name}:{tag} というように、先頭に `{user_name}/` を付けないと「rootリポジトリに push はできません」というエラーが出る
docker tag 7d9495d03763 1000k/rails-chat:latest

# Docker Hub にログイン
docker login --username=yourhubusername --email=youremail@company.com

# push する
docker push 1000k/rails-chat:latest
```

### CoreOS に取り込む
```
core@core-01 ~ $ docker pull 1000k/rails-chat
core@core-01 ~ $ docker run -p 80:3000 -d 1000k/rails-chat
core@core-01 ~ $ docker ps -l
CONTAINER ID        IMAGE               COMMAND                CREATED             STATUS              PORTS                     NAMES
2e9cd5355bb2        1000k/rails-chat    "rails s -b 0.0.0.0"   4 seconds ago       Up 4 seconds        0.0.0.0:32768->3000/tcp   reverent_bardeen
```

以上。素敵な鯨ライフを。


トラブルシューティング
----
### docker login が 403 Forbidden で弾かれる
[Docker Toolbox](https://www.docker.com/products/docker-toolbox) Windows版で `docker login` しようとしたら、正しいID/PWなのになぜか弾かれました。

```
$ docker login --username=yourhubusername --email=youremail@company.com
Password: {合ってるパスワード}

Error response from daemon: Unexpected status code [403] : <html><body><h1>403 Forbidden</h1>
Request forbidden by administrative rules.
</body></html>
```

こんな時は以下のコマンドで PowerShell 経由で叩くようにすると、なぜかうまくいきました。

```
$ docker-machine ssh default
$ docker login --username=yourhubusername --email=youremail@company.com
Password: {合ってるパスワード}

WARNING: login credentials saved in /home/docker/.docker/config.json
Login Succeeded
```

根本的な直し方では無いですが、ひとまずこれで何とかなります。

### docker pull してもイメージが落ちてこない
```
core@core-01 ~ $ docker pull 1000k/rails-chat
Using default tag: latest
Pulling repository docker.io/1000k/rails-chat
Tag latest not found in repository docker.io/1000k/rails-chat
```

エラーメッセージの通り、`:latest` というタグを付けたイメージを push していないからです。上記のチュートリアルを参考に `:latest` というタグを付けたイメージを作って、`docker push` しましょう。


参考
----
- [Tag, push, & pull your image](https://docs.docker.com/mac/step_six/)
- [Docker Registryでプライベートなリポジトリを立てる | TANKSUZUKI.COM](http://tanksuzuki.com/post/private-docker-registry/)
- [Docker login returns "403 forbidden by administrative rules" - Open Source Projects / DockerEngine - Docker Forums](https://forums.docker.com/t/docker-login-returns-403-forbidden-by-administrative-rules/4291/4)
レプリカセット作成する時にメンバーのポート指定しない俺に死を

俺です。

どうでもいいことに詰まって禿げてたけど解決したので自戒を込めてメモ

mongodbのレプリカセット作成時に、ホスト名とポート番号を指定するの忘れないように。

デフォルトポート27017ではないmongodbを作る時にハマります。俺が。


- エラーケース
-

`No host described in new configuration 1 for replica set orenoreplicaset maps to this node`

 
```
> config = {
...   "_id": "orenoreplicaset",
...   "members": [
...     { "_id": 0, "host": '172.16.10.21'},
...     { "_id": 1, "host": '172.16.10.22'},
...     { "_id": 2, "host": '172.16.10.23'}
...     ]
... }
> rs.initiate(config){
        "ok" : 0,
        "errmsg" : "No host described in new configuration 1 for replica set orenoreplicaset maps to this node",
        "code" : 93
}
```


- 正しくはこれ
- 

```
config = {
  "_id": "orenoreplicaset",
  "members": [
    { "_id": 0, "host": '172.16.10.21:37017'},
    { "_id": 1, "host": '172.16.10.22:37017'},
    { "_id": 2, "host": '172.16.10.23:37017'}
    ]
}
rs.initiate(config);
{ "ok" : 1 }
```
Python 2 と 3 での高階関数の使い方の比較

Python を使うたびに，高階関数 (map，filter，reduce) の使い方を調べたりしているので，メモとして残しておきます．

また，最近 Python 3 の勉強を始めたのですが，Python 2 と 3 では書き方が多少異なるため，比較のために両方書いておきます．

そもそも高階関数が何かというと，関数を引数として受け取る関数のこと．
例えば，配列の各要素に対して，何らかの処理をしたいときなどに使うもの．

# 実行環境
* Mac OS X Yosemite 10.10.2
* Python 2.7.6
* Python 3.5.1

# map 関数
配列の<font color = "red">全ての要素</font>に対して処理をしたいときに使う．
以下の例では，配列の全ての要素を 2 倍して出力する．

* Python 2

```
print map(lambda x: x * 2, range(1, 5))
```

* Python 3

```
print (list(map(lambda x: x * 2, range(1, 5))))
```

* 実行結果
 
```
[2, 4, 6, 8]
```

# filter 関数

配列の中で<font color = "red">条件にマッチした要素にのみ</font>処理をしたいときに使う．
以下の例では，配列の要素から偶数のみを抽出する．

* Python 2

```
print filter(lambda x: x % 2 == 0, range(1, 5))
```

* Python 3

```
print (list(filter(lambda x: x % 2 == 0, range(1, 5))))
```

* 実行結果

```
[2, 4]
```

# reduce 関数
複数の要素を<font color = "red"> 1 つにまとめたいとき</font>に使う．
具体的には，配列の先頭から 2 つの要素を取り出して処理を行い，次はその結果とその次の要素に処理を行う，ということを繰り返す．

しかし，Python 3 では reduce 関数は Python のコア関数からはずされており，<font color = "red">functools</font> モジュールをインポートしないと使えなくなっている．

以下の例では，配列の全ての要素の合計を出す．

* Python 2

```
print reduce(lambda x, y: x + y, range(1, 5))
```

* Python 3

```
import functools

print (functools.reduce(lambda x, y: x + y, range(1, 5)))
```

* 実行結果

```
10
```

Python 3 に慣れていないせいもあるが，Python 2 の方がシンプルに書けて良い，というのが個人的な感想…

# 参考資料
* http://www.python-course.eu/python3_lambda.php
iTunes Connect のスクリーンショットはアルファなし，TabBar のアイコン画像はアルファありで書き出す


## はじめに
TabBar に画像適用したときにちゃんと画像が出なかったので備忘録。

![00_fix.png](https://qiita-image-store.s3.amazonaws.com/0/88266/664f95d7-255a-88b9-c1a3-44e7ea1660c3.png "00_fix.png")


## アルファはありで書き出す

アルファチャンネル(Wikipedia)
[https://ja.wikipedia.org/wiki/アルファチャンネル](https://ja.wikipedia.org/wiki/アルファチャンネル)

iTunes Connect に提出するスクリーンショット(ストア用画像)はアルファありだと怒られる。その名残で **プレビュー.app** でわざわざアルファなしで TabBar のアイコン画像を 3 種類(@1x, @2x, @3x)書き出した。

もしかしてこれが原因かなとアルファありで書き出したら・・・

![01_fix.png](https://qiita-image-store.s3.amazonaws.com/0/88266/17eaa19e-85d2-dd54-dc56-5ae1f8920a47.png "01_fix.png")

おー出た。やはりアルファチャンネルが問題だったようだ。TabBar のアイコン画像をプレビュー.app で書き出すときは，アルファのチェックは外さないようにする。ストア用のスクリーンショットはアルファのチェックをはずして書き出す。

![02_fix.png](https://qiita-image-store.s3.amazonaws.com/0/88266/2e5da37a-c611-c05c-5a35-6829360d694f.png "02_fix.png")


## ちょっとしたこと

iPad のアプリ提出の際に画像周りで困ったこと。
ストアに出す際の iPad Pro のスクリーンショットは 2732x2048 のもの(縦横は逆でも)が必要。iPad 用の 2048x1536 のを使いまわせない。対応する場合は iPad Pro を意識して作った方がいいかもしれない。2732x2048 の画像をサイズ変換するといった単純な方法だとダメなんだよなぁ。比率が完全に一致しないから(完全な 4:3 じゃない)。1ピクセルでもおかしいと怒られる。

2048/4*3 = 1536
2732/4*3 = 2049

## おわりに
TabBar のアイコン画像の書き出しの際にアルファのチェックを外したことで少し時間を無駄にした。でも一度頭に入れてしまえばもう間違えることはないだろう。

ご覧いただきありがとうございました。

## 参考

アルファチャンネル(Wikipedia)
[https://ja.wikipedia.org/wiki/アルファチャンネル](https://ja.wikipedia.org/wiki/アルファチャンネル)
NSArray, NSDictionary, NSSetでの型指定

最近はSwiftに押され気味のObjective-Cですが、
いつのまにやら、
**NSArray**, **NSDictionary**, **NSSet**などのコレクションクラスで値やキーの型が指定ができるようになってました。
型を指定して宣言しておくことで、Xcodeでのコード補完時に型の確認ができるので、ちょっと便利です！

そこで、NSDictionaryで前と後ろのどっちの型がkeyだかすぐに忘れる自分の備忘録も兼ねて、まとめてみました^^;


# NSArray
NSArray<値の型>
例）
`NSArray<NSString*>* ary = [[NSArray<NSString*> alloc] init];`

# NSDictionary
NSDictionary<キーの型, 値の型>
例）
`NSDictionary<NSString*, NSNumber*>* dict = [[NSDictionary<NSString*, NSNumber*> alloc] init];`

# NSSet
NSSet<値の型>
例）
`NSSet<NSString*>* set = [[NSSet<NSString*> alloc] init];`


---
まぁ、C++のクラステンプレートみたいな感じですね。
(これらは、NSMutableArrayなどMutableが付いても同じように使えました。

**注意点としては、コレクションクラスの基本はid型を入れる用途のクラスなので、int型やchar型、あとは、NSObjectを継承してないクラスなどは指定できないようです。**
NSNumberやNSStringのポインタは可能。

自分は、最近発見して使い始めたトコだったけど・・・もしかして昔からあったのかなぁ・・・知らないだけで^^;

（あ、Swiftの方にもあるかどうかは、Unityやcocos2dxなど別のライブラリと連携する時にブリッジする一手間増えちゃうっていう個人的かつ身勝手な理由であまり使えていないので、わからんのです^^;
Webを使った新人研修　～Linuxコマンド編 - cp・mv・rmコマンド～

######[Webを使った新人研修　～Linuxコマンド編～](http://qiita.com/fujisystem/items/63b787ac71e9bdcaf3f6)

※今回のcp・mv・rmコマンドは、ファイル操作で非常によく使うコマンドである反面、環境を壊してしまう可能性がある為、必ず指差し確認・クロスチェックをするよう癖をつけましょう。

#cpコマンド 「ファイル、ディレクトリのコピー」
cpは、「copy」の略です。
ファイルのバックアップを取ったり、環境構築など全般的に大活躍します。
特に、-pオプション（オーナー・グループ・パーミッション・タイムスタンプを保持したままコピー）と-rオプション（ディレクトリの再帰的コピー）は覚えておいたほうがよいでしょう。

まずは、「実践」してみましょう。

##実践する
LinuxマシンのエミュレートされているWebページを開きましょう。
・jor1k
http://s-macke.github.io/jor1k

早速「ファイル、ディレクトリのコピー」してみましょう。
左側の黒いウィンドウで以下のコマンドを実行し、各行の最後にエンターキーを押して下さい。

```
mkdir testDir
echo 'hoge' > testDir/test.txt
cp testDir/test.txt testDir/test2.txt
cp -r testDir testDir2
ls -lR
```

![cp1.png](https://qiita-image-store.s3.amazonaws.com/0/110729/21a9655a-23aa-0b59-057d-52167a059353.png)

「testDir」・「testDir2」ディレクトリが作成され、その内部に「test.txt」・「test2.txt」ファイルが作成されていることが確認できました。

##解説
```-r``` オプションでディレクトリごとコピーできます。
cpコマンドは基本的に、

```
cp {コピー元ファイル・ディレクトリパス} {コピー先ファイル・ディレクトリパス}
```
であることを覚えさせれば、OKです。

Man page of CP
https://linuxjm.osdn.jp/html/GNU_coreutils/man1/cp.1.html

#mvコマンド 「ファイル、ディレクトリ名の変更」
mvは、「move」の略です。
ファイル名・ディレクトリ名の変更、及び、文字通りファイル・ディレクトリを移動(move)する際に利用します。

##実践する
左側の黒いウィンドウで以下のコマンドを実行し、各行の最後にエンターキーを押して下さい。
```
mv testDir testDirMove
ls -l
```

![mv.png](https://qiita-image-store.s3.amazonaws.com/0/110729/4c34fcd5-a90d-ba69-a319-83bf929ebd01.png)

##解説
先ほど作成した「testDir」ディレクトリが「testDirMove」に名前が変更されていることを確認します。

Man page of MV
https://linuxjm.osdn.jp/html/gnumaniak/man1/mv.1.html


#rmコマンド 「ファイルを含むディレクトリの削除」
rmは、「remove」の略です。
ファイル・ディレクトリの削除をする際に利用します。

##実践する
左側の黒いウィンドウで以下のコマンドを実行し、各行の最後にエンターキーを押して下さい。

```
echo 'hoge' > test.txt
ls -l
rm test.txt
ls -l
```

##解説
作成した「test.txt」が削除されていることを確認します。

Man page of RM
https://linuxjm.osdn.jp/html/GNU_fileutils/man1/rm.1.html

<br/><br/>
例題を示して記憶の定着を図ってみます。

##例題
１．「echo 'hoge' > test.txt」と入力して、テスト用ファイル「test.txt」を作成
２．60秒後に、ファイルコピーを行う（合わせてcp -pも行う）
３．「ls -l」で、コピー結果を確認

```
echo 'hoge' > test.txt
sleep 60 && cp test.txt test2.txt
cp -p test.txt test3.txt
ls -l
```


～本日はここまで
プロダクトの１周年を記念してrubyとRails最新版に追っついた。

うちのかわいい[プロダクト](http://ge-no.com)が3月3日で1周年なことを記念してrubyとRailsを最新版にしてあげる。

[Geno -遺伝子の?を！に変える-](http://ge-no.com)

# バージョン

|  | 現状 | こうしたい |
|:-----------|------------:|:------------:|
| ruby       |        2.2.0 |     2.3.0     |
| Rails     |      4.2.0 |    4.2.5.1    |

# ruby-buildを最新にする

```
brew update -v
brew upgrade rbenv ruby-build
```

クソ時間かかることがある

# サーバにはbrew入ってないのでこっち

```
$ cd ~/.rbenv/
$ git pull origin master
$ cd plugins/ruby-build/
$ git pull origin master
```

# ruby最新版インストール

```
$ rbenv install -l
$ rbenv install 2.3.0
```

# 以下をプロジェクトのルートディレクトリで行う

```ruby:Gemfile
gem 'rails', '4.2.5.1'
```
色々あるのでGemfile.lockを削除して以下を実行

```
cd /var/www/geno/current
rbenv local 2.3.0
gem update bundler
gem install bundler
bundle install
```

# ここから先は[うちのかわいいプロダクト](http://ge-no.com)で起こった直し

## AirBrake問題

AirBrake 0.5系で上手く動かないのでいったん0.4.1に戻しとく。

'default'のnotifer先がないとかそんなことを言われるんだが、Errbit叩かせない対策じゃないかと邪推している。

そのうちなおす。そもそもErrbitの新しい方向いてない。

## RSpecまわり

shoulda-matchersの設定をrails_helperに書いておく必要がある

```ruby:spec/rails_helper.rb
Shoulda::Matchers.configure do |config|
  config.integrate do |with|
    with.test_framework :rspec
    with.library :rails
  end
end
```


## rubocop殿ー

### とりあえずauto correct 

```
bundle exec rubocop -a
```

ただし

```rb
Gift.total(date).select(&:used?).count
```

を

```rb
Gift.total(date).count(&:used?)
```

にしてくれちゃったりするので注意が必要。


### Style/TrailingCommaは使われてないみたいなので怒られる

```
Error: The `Style/TrailingComma` cop no longer exists. Please use `Style/TrailingCommaInLiteral` and/or `Style/TrailingCommaInArguments` instead.
(configuration found in /Users/takeru_miyahara/works/develop/geno/.rubocop.yml)
```

`Style/TrailingComma`長いこと使われてないとか言っているけど、変更されたのは割と最近っぽい。



.rubocop.ymlを変えてあげる

```yml:.rubocop.yml
Style/TrailingCommaInLiteral:
   EnforcedStyleForMultiline: comma
```


# ステージングサーバ

```
$ rbenv update
$ sudo cd "$(rbenv root)"/ && git pull
# rbenv install 2.3.0
# cd /var/www/geno/current
# gem install bundler
```

## capでデプロイすると [DEPRECATION] requiring "RMagick" is deprecated. Use "rmagick" instead とかほざくのなんとかしたい。マジで。

require: 'RMagick'があると関係するライブラリが更新されないっぽい。

```Gemfile.lock
gem 'rmagick', require: 'RMagick'
```

```Gemfile.lock
gem 'rmagick'
```