OmniAICreator/Qiita-1.07M huggingface dataset:
Azure ServiceFabric - Serviceの環境変数を環境毎に設定する

#やりたいこと
.Net Core MVCで環境ごとのappsetting.json(appsetting.env.json)を利用するために環境変数を設定したい。

```
var builder = new ConfigurationBuilder()
    .SetBasePath(env.ContentRootPath)
    .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
    .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true).AddEnvironmentVariables();
```

{env.EnvironmentName}は環境変数ASPNETCORE_ENVIRONMENTの値を参照します。


#やり方
##ServiceManifest.xmlの設定
Web系プロジェクトのServiceManifest.xmlを開きます。(~/PackageRoot/ServiceManifest.xml)

CodePackageに下記のようにEnvironmentVariablesを追記します。

```xml:ServiceManifest.xml
<CodePackage Name="Code" Version="1.0.0">
  <EntryPoint>
    <ExeHost>
      <Program>Hoge.Web.exe</Program>
      <WorkingFolder>CodePackage</WorkingFolder>
    </ExeHost>
  </EntryPoint>
  <EnvironmentVariables>
    <EnvironmentVariable Name="ASPNETCORE_ENVIRONMENT" Value="" />
  </EnvironmentVariables>
</CodePackage>
```

##ApplicationManifest.xmlの設定
ServiceFabricプロジェクトのApplicationManifest.xmlを開きます。(~/ApplicationPackageRoot/ApplicationManifest.xml)

Parametersに環境変数設定用のprameterを追記します。
Nameは任意(例ではAspNetCoreEnvironment)、DefaultValueは開発環境に設定したいためDevelopmentとします。

```xml:ApplicationManifest.xml
<Parameters>
  <Parameter Name="AspNetCoreEnvironment" DefaultValue="Development" />
</Parameters>
```

環境変数を設定するサービスのServiceManifestImport設定に環境変数を先ほど設定したparamでoverrideする設定を追記します。
Valueの部分は"[]"も必要です

```xml:ApplicationManifest.xml
<ServiceManifestImport>
  <ServiceManifestRef ServiceManifestName="Hoge.WebPkg" ServiceManifestVersion="1.0.0" />
  <ConfigOverrides />
  <EnvironmentOverrides CodePackageRef="Code">
    <EnvironmentVariable Name="ASPNETCORE_ENVIRONMENT" Value="[AspNetCoreEnvironment]" />
  </EnvironmentOverrides>
</ServiceManifestImport>
```


##Staging環境用のデプロイ定義の作成
今回は例としてStaging環境用の定義を作成します。

###Staging用ApplicationParametersの作成
ApplicationParametersのCloud.xmlをコピーし同じディレクトリにCloud.Staging.xmlを追加します。(~/ApplicationParameters/Cloud.Staging.xml)
Cloud.Staging.xmlにAspNetCoreEnvironmentのParameterを追記します。
Parameter Nameは先ほどのApplicationManifestで追記したものと同じにしてください。

```xml:~/ApplicationParameters/Cloud.Staging.xml
  <Parameters>
    <Parameter Name="AspNetCoreEnvironment" Value="Staging" />
  </Parameters>
```

###Staging用PublishProfilesの作成
PublishProfilesのCloud.xmlをコピーし同じディレクトリにCloud.Staging.xmlを追加します。(~/PublishProfiles/Cloud.Staging.xml)
参照しているApplicationParameterFileをStagingのものに変更します。

```xml:~/PublishProfiles/Cloud.Staging.xml
<ApplicationParameterFile Path="..\ApplicationParameters\Cloud.Staging.xml" />
```

##デプロイ

Staging環境デプロイ時に作成した~/PublishProfiles/Cloud.Staging.xmlを指定することで
環境変数ASPNETCORE_ENVIRONMENTにStagingが設定されます。
angularでObservable（ストリーム）のsubscribeを停止する方法

angularではRxJSでストリームを扱うことが多い。そうした中で画面遷移が絡む場合、画面遷移した後でも、前の画面で使用していた`subscribe`が生き続けるといった問題が発生する。

ということで、必要に応じて画面遷移した際に、`unsubscribe`してあげる必要がある。

## OnDestroy時にunsubscribeする方法

`unsubscribe`する方法として、まずコンポーネントを`OnDestroy`する際に、`unsubscribe`する方法がある。

RxJSの`Subscription#unsubscribe`を使う。
http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html

実装すると以下のようになる。

```ts
...

// 必要に応じて以下をインポートする
import { Subscription } from 'rxjs';

...

export class App implements OnInit, OnDestroy {
  eventStream$: Observable<EventStream>
  subscription: Subscription;

  ngOnInit() {
    this.subscription = this.eventStream$.subscribe(...);
  }

  ngOnDestroy() {
    // コンポーネントを破棄する時にunsubscribeする
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}
```

`subscribe`するストリームが複数ある場合は、`subscription`を配列にしても良い。

```ts
...

export class App implements OnInit, OnDestroy {
  eventStream1$: Observable<EventStream>
  eventStream2$: Observable<EventStream>
  subscriptions: Subscription[] = [];

  ngOnInit() {
    this.subscriptions.push(this.eventStream1$.subscribe(...));
    this.subscriptions.push(this.eventStream2$.subscribe(...));
  }

  ngOnDestroy() {
    if (this.subscriptions) {
      this.subscriptions.forEach(sub => sub.unsubscribe());
    }
  }
}
```


## URLを基準にイベントをフィルタリングする方法

こちらは、`unsubscribe`する代わりに、特定のURLの時だけ`subscribe`する方法。

RxJSの`filter`オペレータを使う。
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter

実装すると以下のようになる。

```ts
...

// 必要に応じて以下をインポートする
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';

...

export class App implements OnInit {
  eventStream$: Observable<EventStream>

  constructor(
    private router: Router,
  ) { }

  ngOnInit() {
    this.eventStream$
      // URLが'/app'の時だけsubscribeする
      .filter((eventStream: EventStream) => this.router.url === '/app')
      .subscribe(...);
  }
}
```

## subscribeするのは1回だけで良い場合

`unsubscribe`で停止しても良いが、RxJSの`take`オペレータを使っても良い。
http://reactivex.io/documentation/operators/take.html

実装すると以下のようになる。

```ts
...

// 必要に応じて以下をインポートする
import 'rxjs/add/operator/take';

...

export class App implements OnInit, OnDestroy {
  eventStream$: Observable<EventStream>

  ngOnInit() {
    this.eventStream$.take(1).subscribe(...);
  }
}
```

## まとめ

状況に応じて使い分ける。ブラウザの戻る、進むによって`subscribe`が重複したりするので、その辺りは十分に注意する。
ASP.NET Identity用 パスワードハッシュ生成ツール

突然ですがASP.NETで開発をしている時に、DBを直接いじってユーザー追加したい時ってないですか？僕だけですか？

ただ、ASP.NET Identity + Entity Frameworkだと、ユーザーテーブルに生のパスワードを持っているわけではなくて、パスワードのハッシュ値を保存しています。
セキュリティ的には至極当然のことであり、端からここまでやってくれているASP.NET様バンザーイ！という感じなのですが、前述のことをしようとするとこのパスワードハッシュが少々やっかいです。

↓こいつ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/75063/edff1a7f-0510-50bf-cd36-bbcce5de0daf.png)

他の項目はどうとでもなるのですが、こいつだけは超高校級の頭脳がない限り自力での計算は不可能でしょう。
正攻法としてはUserManager.CreateAsyncでユーザーを作る方法でしょうが、テストユーザーを追加するためだけにプログラム書くのはめんどくさい……。

そんな方（主に僕）のために、パスワードを打ち込むとパスワードハッシュを生成してくれるツールを2年ほど前に作ってました。

# 使い方

起動するとイカした画面が現れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/75063/9c03a97f-96be-5fda-5be2-bccf2e460564.png)

パスワードを入力し生成ボタンを押すと…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/75063/5328ff6e-5926-f2a3-6248-d5decc70a62e.png)

この通り！無駄に自動でクリップボードにコピーする機能までついてます！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/75063/1b355ec2-deab-f33e-c04d-da751ef51b47.png)

あとはこのハッシュ値をユーザーテーブルのPasswordHashに入れてあげたらOKです。

# 実行ファイルとソースコード
実行ファイルとソースコードはGitHubにあげております。
https://github.com/itigoore01/HASH-PASSWORD-GENERATOR/releases

# その他
イカした画面はMahApps.Metroというライブラリを使っています。
2年前、モダンなUIに憧れてつかったやつです。
イカした画面を作りたい方は、もしかしたらソースコードが参考になるかもしれません。
ASCII文字の16進表現の値を調べる各種の方法

様々な方法で `\n` の16進表現を調べてみます。
例えば、 `\n` の16進表現は `a`(`0xa`や
 `0x0a` という表記もあり)です。

## 方法1 Googleで"man ascii"
https://www.google.co.jp/search?q=man+ascii

## 方法2 LinuxやMacのターミナルで
```shell-session
$ man ascii
```
※ 表記の違いに注意
- Linux系の場合`\n`は`LF`
- Macの場合、`\n`は`nl`

## 方法3 Node.jsのREPLで
```shell-session
$ node
> console.log('\n'.charCodeAt(0).toString(16));
a
```

## 方法4 Rubyのワンライナーで

```shell-session
$ ruby -e 'p "\n".ord.to_s(16)'
"a"
```

## 方法5 Pythonのワンライナーで
```shell-session
$ python -c "print(hex(ord('\n')))"
0xa
```
## 方法6 Cで
```cr.c
#include <stdio.h>

int main(void)
{
    printf("%x\n", '\n');
    return 0;
}
```
## 方法7 C++で
```cr.cpp
#include <iostream>

int main()
{
	std::cout << std::hex << static_cast<int>('\n') << std::endl;
	return 0;
}
```
Amazon Rekognition で画像の節度を検査してみる



```python
#-*- coding: utf-8 -*-                                                                                                                                                                                                                                                          
#!/usr/bin/env python                                                                                                                                                                                                                                                           

from boto3 import client


def detect_moderation_labels(file_name):
    """                                                                                                                                                                                                                                                                         
    """
    rekognition = client('rekognition', region_name='us-west-2')

    response = rekognition.detect_moderation_labels(
        Image={
            'S3Object': {
                'Bucket': '[バケット名]',
                'Name': file_name,
            }
        },
    )

    return response


def main():
    """                                                                                                                                                                                                                                                                         
    """
    print(detect_moderation_labels('ファイル名'))


if __name__ == "__main__":
    """                                                                                                                                                                                                                                                                         
    """
    main()
```

## 岸明日香画像を読み込ませた結果
```python
{
	'ModerationLabels': [
		{
			'Confidence': 83.82125854492188, 
			'Name': 'Suggestive', 
			'ParentName': ''
		}, 
		{
			'Confidence': 83.82125854492188,
			'Name': 'Female Swimwear Or Underwear',
			'ParentName': 'Suggestive'
		}
	],
	'ResponseMetadata': {
		'RequestId': '3bf428ca-ba01-11e7-a7d0-8fe3bd264e50', 
		'HTTPStatusCode': 200, 
		'HTTPHeaders': {
			'content-type': 'application/x-amz-json-1.1', 
			'date': 'Thu, 26 Oct 2017 03:53:31 GMT', 
			'x-amzn-requestid': '3bf428ca-ba01-11e7-a7d0-8fe3bd264e50', 
			'content-length': '188', 
			'connection': 'keep-alive'
		}, 'RetryAttempts': 0
	}
}
```
ActionMailerのdeliver_laterではシリアライズが必要（な時がある）

結論はタイトルの通り

「ActionMailerでメールを送ろうとしたら、エラーがでる」ことがあった。エラーの内容は

ActiveJob::SerializationError (Unsupported argument type: User)

であった。この時、メールは

```ruby:***_controller.rb
ApplicationMailer.welcome_email(@user).deliver_later
```

と書いていた。RailsのActionMailerは、ActiveJobと統合しており、リクエストレスポンス通信のバックでメールを非同期に送信する機能がついている。それが、「.deliver_later」である。
ところが、この場合、渡す引数はシリアライズされたもの、つまり、

```http://edgeapi.rubyonrails.org/より
NilClass, Integer, Fixnum, Float, String, TrueClass, FalseClass, Bignum, BigDecimal, and objects that can be represented as GlobalIDs (ex: Active Record)
```

を指定する必要がある。一方で、deliver_nowは、ActiveJobを利用しないので、@user配列を引数にとっても問題ない。ということで、特に重たい処理でない場合は、deliver_nowを使っておけば良さそうだ。

そもそも、シリアライズとは、直列化のことで、「ある環境において存在しているオブジェクトを、バイト列やXMLフォーマットに変換することをいう。」(wikipediaより)ということ。以下が具体例も交えてわかりやすく解説してくれている。

https://qiita.com/jnchito/items/68e91e9bf46f960a79e4

以下ドキュメントによれば、ActiveJobに渡されるオブジェクトが、GlobalIDを使っていれば、シリアライズを求めることはないらしい。
https://railsguides.jp/active_job_basics.html
Lambdaで最寄駅検索APIを作ってみた

# 概要
日本のサービスだと、位置情報から最寄駅を出したいなんて要件はよくあるかと思います。

ただ最寄駅といっても要件によって定義が曖昧ですよね。
例えば徒歩15分以内は最寄駅かなんて、判断する人によっても、その場所が車社会かなどによっても違ってきます。

今後の振れ幅を考えると外部API依存で身動きとりづらくなってしまうのもあれなので、自前で実装することにしました！

# 駅データの獲得
駅データ.jpで駅データを獲得します。
http://www.ekidata.jp/

## 駅データを加工
パフォーマンスも考え、awkを使ってrequireできるjavascriptの形に加工します。

```bash
$ tail -n +2 station20170403free.csv | awk  'BEGIN {FS=",";OFS=",";print "exports.default = ["} {print "    {id:"$2",name:\""$3"\",lng:"$10",lat:"$11"},"} END {print "]"}' > station_data.js
$ head -n 3 station_data.js
exports.default = [
    {id:1110101,name:"函館",lng:140.726413,lat:41.773709},
    {id:1110102,name:"五稜郭",lng:140.733539,lat:41.803557},
```

``$1``が同じ駅でも路線が異なると別で採番されるID。
``$2``が同じ駅だと同じ数値で採番されるIDになります。
今回は要件上、路線を意識する必要はないので``$2``だけを採用しました。

また要件次第では``$2``のidでuniqを取った方が使いやすいと思います。
例えば近い順で何件かとってきたい場合、そのままだと「新宿駅だらけ」のような問題も起きてしまいます。
その場合、同じ駅でも路線によって位置情報や名前が異なるケースもあるので、どちらにしろAPI側で戻り値がuniqueになるようにゴニョゴニョする必要があります。

# 緯度・軽度から距離を計算する関数の作成
駅データ、APIに渡す値ともに緯度・経度なので、緯度経度から距離を計算する関数を作成します。

下記URLを参考に実装してみました。
http://www.ic.daito.ac.jp/~mizutani/gps/measuring_earth.html

```js
function calcDistance (lat1, lng1, lat2, lng2) {
  const Re = 6378.137 // 地球の半径

  function radians (deg) {
    return deg * Math.PI / 180
  }

  function rectangularCoordinateSystem (lat, lng) {
    const h = radians(lat)
    const t = radians(lng)
    const x = Math.cos(h) * Math.cos(t)
    const y = Math.cos(h) * Math.sin(t)
    const z = Math.sin(h)
    return [x, y, z]
  }

  function innerProduct(vector1, vector2) {
    return vector1.reduce((carry, value, index) => {
      return carry + value * vector2[index]
    }, 0)
  }

  const v1 = rectangularCoordinateSystem(lat1, lng1)
  const v2 = rectangularCoordinateSystem(lat2, lng2)
  return Re * Math.acos(innerProduct(v1, v2))
}
```

# 最寄りの駅を獲得
現在地からの直線距離を全ての駅に対して計算して、近い順にソート。そして先頭のデータが最寄駅です。

```js
const stations = require('station_data.js').default

function getNearestStation (lat, lng) {
    return stations.map((station) => {
        station.distance = calcDistance(lat, lng, station.lat, station.lng)
        return station
    }).sort((station1, station2) => 
        station1.distance - station2.distance
    ).slice(0, 1)
}
```
これで直線距離が最短の駅を獲得！

# Lambda関数として実装する
あとは、今回作った関数をLambdaで呼び出すだけです。

```javascript
module.exports.getNearestStation = function(event, context, callback) {
    const nearestStation = getNearestStation(event.lat, event.lng)

    callback(null, {
      statusCode: 200,
      body: JSON.stringify(nearestStation)
    })
  })
}
```

# 完成！
これですごい簡単ですができました！
実際の現場では、GoogleMapAPIと連携して徒歩で何分かも取得しつつ、近い順に何件か取得するロジックで使っています。
オープンデータを提供くださっている方々のおかげで、自前でもなんとかなるものですね！
[Mac]テザリングでもSockプロキシの設定がしたい

SSHの設定で `DynamicForward` することでVPNもどきをしてます。
VPNもどきをするときは、Macのネットワーク設定でロケーションを作って以下のように`SOCKS Proxy`設定をしてます。

![Screen Shot 2017-10-26 at 12.23.24.png](https://qiita-image-store.s3.amazonaws.com/0/74312/66d35f94-25e1-9d34-6982-68ec77d94d56.png)

wifiに繋いでいるときはうまく動作していたのですが、iPhoneのUSBテザリングだと動いてくれませんでした。

んで、調べたらすぐヒットしました。↓
https://gist.github.com/mapk0y/9437aadbd7629acbe26a

この記事をみる限り、ターミナルから設定すればイケるとのこと。

ってなわけで、やってみました。

まず、`proxy.pac`を作ります。
自分の場合は、作成したロケーション選択時は全てプロキシを介すという設定で良いので、以下のような内容になります。

```
function FindProxyForURL(url, host) { 
    // 設定画面の [SOCKS Proxy Server]欄の内容                                                                                                                                                                        
    return "SOCKS localhost:8888";
}
```

proxy.pacを作成したら、以下のコマンドを実行。

```
networksetup -setautoproxyurl "ロケーション名" file://[proxy.pacの絶対パス] on
```

これで、ちゃんと動きました。
dockerでgoofys環境を作ってS3をマウントしてみた

dockerでgoofys環境を作ってハンズオン的にS3をマウントして見ました。
その手順と使ってみた感想を紹介します。

#ハンズオン手順


##docker-compose作成

```yaml:docker-compose.yaml
version: '2.1'
services:
  goofys-test:
    container_name: goofys-test
    devices:
      - /dev/fuse
    cap_add:
      - mknod
      - sys_admin
    image: serioja90/goofys
    volumes:
      - "~/.aws:/root/.aws"
    environment:
      - REGION=ap-northeast-1
      - BUCKET=bucket_name
      - MOUNT_DIR=/mnt/s3
```


bucket_nameをマウントしたいs3のbucket名に変えてください。

ロカールでaws configureを実行して鍵の設定をおこなってください。

##実行

```
docker-compose up
```
で実行

##動作確認

```
goofys-test    | 2017/10/26 02:20:58.273812 main.INFO File system has been successfully mounted.
```
とでてれば起動は成功してることです。

```
docker exec -it  `docker ps | grep goofys-test | awk '{print $1}'` sh
```
にてコンテナーにアクセスして

```
cd /mnt/s3
```

に移動すると指定したS3 bucketのデータがマウントされているはずです。



#感想

riofs,s3fsより早くなってるとはいえ
普通のファイルシステムと比べてめっちゃ遅い。




容量46MBのディレクトリをコピーしてみたら

```
time cp -rp xx/ xx
real	2m 41.89s
user	0m 0.02s
sys	0m 0.44s
```

2分40秒もかかる。。特にコピーするのが遅い感じです。
   
普通のファイルシステムだと
  
```
time cp -rp xx/ xx
real	0m0.061s
user	0m0.000s
sys	0m0.056s
```

なので結構パフォーマンスの課題はあります。

とはいえ直接S3をマウントっぽく参照できるメリットは大きく
読み込みしか使わないとかコピーに時間がかかっても問題ないケースでは使えるかもしれないです。


ググったら、goofysのマウントが勝手に切れるという記事を見かけましたが、私の検証でそのような自称は起こりませんでした。

その他触って見てわかったこと

当たり前ですが、s3上で扱えないデータは置くことができません。
例えばシンボリックを貼ることはできません。

bucket名しか指定できないです。
```bucket名/xxディレクトリ```などは使えません。

以上です。
userlistを並べ変える方法

controllersの　users_controlller.rbの
先頭付近に以下を記述する

```rb
helper_method :sort_column, :sort_direction
def index
  @users = User.all.order(sort_column + ' ' + sort_direction)
end
```

そして、helpersのusers_helper.rbの最後付近に 
以下を記述する。

```rb
css_class = (column == sort_column) ? "current #{sort_direction}" : nil
direction = (column == sort_column && sort_direction == "asc") ? "desc" : "asc"
link_to title, {:sort => column, :direction => direction}, {:class => css_class}
```

また、usersのindex.html.slimの `table.ui.celled.padded.table` の下に

```slim
th
  = sortable "id", "Id"
th
  = sortable "account","Account"
th
  = sortable "username", "Username"
th
  = sortable "email", "E-mail"
th
  = sortable "created", "Created"
```

以上のように記述する
　　
そして、`@users.each do |user|` に下に

```slim
td
  = user.id
td
  = user.account
td
  = user.name
td
  = user.email
td
  = user.created_at
```

のように記述すると
`id account name email created` の降順　、昇順で並び替えができる。
Azure ServiceFabric - 一部のReplicaが立ち上がらない問題の解決法


HostOSがWindowsの場合、ServiceFabricのServiceはデフォルトではサービスプロセスの
デスクトップヒープ(非対話型ウィンドウのデスクトップのヒープ)を利用する設定となっています。

Serviceが増えてくるとデスクトップヒープが枯渇しReplicaが立ち上がらなくなってしまいます。
powershellを利用して、下記の設定をすることによりデスクトップヒープを利用しない設定になります。

```
Login-AzureRmAccount
Set-AzureRmServiceFabricSetting -ResourceGroupName <リソースグループ名> -Name <Service Fabric 名> -Section "Hosting" -Parameter "EnableActivateNoWindow" -Value "true" 
```


Service Fabricは起動時のなどのエラーがわかりにくいため下記のような現象が起こる場合は
デスクトップヒープの枯渇を疑いましょう。


1.Service(Replica)が多い
2.一部のnodeのみReplicaが立ち上がらない。それ以外のnodeに配置されたReplicaは正常に起動
3. 2の現象が起こるサービスがデプロイ毎に異なる。



これはデフォルトで利用しない設定にしてほしいですね。
fabric betaでアプリが配布できない時

もう何十回ハマったのかわからないのでまとめます

fabricで久々に配布しようとした時に何故か送信されない、一向にメールが来ない時があります
原因は多々あるのですが、だいたいこのボタンで解決します
（なのにこのボタンに気づかない）

<img width="1300" alt="fabric1.png" src="https://qiita-image-store.s3.amazonaws.com/0/20784/e3e0931c-315b-064f-9432-c1d0705a18af.png">

<img width="984" alt="fabric2.png" src="https://qiita-image-store.s3.amazonaws.com/0/20784/85cbd782-10d3-2584-40db-a704d0f5b15f.png">

「Resend Invitation」です

もうハマらないぞ（決意）
【zsh】iTermでデフォルトでtmuxが起動するようにする

先日tmuxデビューを果たしたのですが、毎回ログインしてから、
tmux
と手でうってtmuxモード？に移っていたのですがさすがにダサいので、
どうにか自動でtmuxが起動するようにならないかと調べてみたのです。

## ~/.zprofileにtmuxと書くだけ

なんか色々調べてみたのですがどうもそれっぽいやりかたが見つからず。
結局、

`~/.zprofile`
の最下行に、
`tmux`
と一行追加することが対応できました。

めでたしめでたし。

何か他にいい方法があれば教えて欲しいです。
datalist絞込

# datalist絞込

## 基本

### html

type=searchでdatalistを設定してやると入力にあわせて絞込ができる

```HTML
<input type="search" list="mylist" name="hoge">
<datalist id="mylist">
<option value="a1">
<option value="aa2">
<option value="aa3">
<option value="aaa4">
<option value="aab5">
<option value="b6">
<option value="b7">
</datalist>
```

ただし、ブラウザによっては上記サンプルで「b」を入力すると
「aab5」も「b」を含むためヒットしてしまう場合がある

## 拡張

### javascript

javascriptで絞込を行う

```javascript
document.addEventListener('input',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="search"){
    var v=t.value;
    var l=t.getAttribute('list');
    Array.prototype.map.call(document.querySelectorAll('#'+l+' option'),function(i){
      i.disabled=!i.value.match(new RegExp("^"+v));
      console.log(i.disabled);
    });
  }
});
```

### jQuery

jQueryを使って書くとこんな感じ
(javascript版からさほど効率化しないのでjavascript版の方でいいかも)

```js:jQuery
$(function(){
  $('input[type=search]').on('input',function(){
    var v=$(this).val();
    $('#'+$(this).attr('list')+" option").prop('disabled',function(){
      return !$(this).val().match(new RegExp("^"+v));
    });
  });
});
```
Jenkins が yum update できない問題のメモ書き

久しぶりに Jenkins をアップデートしようとしましたが、問題が発生したので対策のメモ書きです。

# 現象
下記の環境で Jenkins をアップデートしようとすると、パッケージのダウンロード接続先が Timeout になりました。

OS: Amazon Linux AMI release 2017.09
パッケージ管理: yum-3.4.3-150.70.amzn1.noarch at 2017-08-13 02:16

```shell-session
Downloading packages:
jenkins-2.86-1.1.noarch.rpm    FAILED
http://pkg.jenkins.io/redhat/jenkins-2.86-1.1.noarch.rpm: [Errno 12] Timeout on http://pkg.jenkins.io/redhat/jenkins-2.86-1.1.noarch.rpm: (28, 'Connection timed out after 5000 milliseconds')
Trying other mirror.
```

Jenkins のインストールは http://pkg.jenkins-ci.org/redhat/ に書いてある手順を実行しました。
Java8 など必要なツールは別途インストール済みです。

```shell-session
> sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
> sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
> sudo yum install jenkins
```

# 原因
このあたりの Issue が該当するようです。
[INFRA-153: Official Redhat yum repo (and mirrors) missing required repomd.xml](https://issues.jenkins-ci.org/browse/INFRA-153)

http がブロックされており、設定ファイルでは http で接続するようになっているためのようです。

# 対策
ダウンロード接続先を https 化してみました。
具体的には、 ```/etc/yum.repos.d/jenkins.repo``` を下記のように書き換えました。
```baseurl``` を ```http``` から ```https``` に書き換えただけです。

```shell-session:/etc/yum.repos.d/jenkins.repo(修正前)
[jenkins]
name=Jenkins
baseurl=http://pkg.jenkins.io/redhat
gpgcheck=1
```

```shell-session:/etc/yum.repos.d/jenkins.repo(修正後)
[jenkins]
name=Jenkins
baseurl=https://pkg.jenkins.io/redhat
gpgcheck=1
```

# おわりに
上記の対策で Jenkins のアップデートができるようになりました。
Google も https 化を推進しているので、 その流れの一環なのでしょうか？
日本の自治体の一覧が欲しい

政府が公開しているデータがいくらかある。

# [全国地方公共団体コード](http://www.soumu.go.jp/denshijiti/code.html)

## 利点

- データ構成はシンプル
- 「市」と「区 (東京23区)」と「町」「村」が同じ階層

## 欠点

- **Microsoft Excel 97-2003 形式**
    - MacならNumbers使えばCSVに変換できるが
- 政令指定都市の「区」は別のシート
    - NumbersでCSVに変換すると、別のCSVファイルとして書き出される
- (「区」を持つ) 政令指定都市とその他の市の区別がデータ上ない
- 「郡」の情報がない
- 都道府県も同じ列に並んでいる
- 市区町村と都道府県の結びつきが弱い

# [統計に用いる標準地域コード](http://www.soumu.go.jp/toukei_toukatsu/index/seido/9-5.htm)

## 利点

- 最初からCSV形式で用意されている
- 地方公共団体コードが [仕様 (PDF)](https://www.j-lis.go.jp/data/open/cnt/3/1090/1/specifications20080401.pdf) に従って分割されている。可読性は下がるが、
    - 都道府県と結びつけやすい
    - (相変わらず都道府県と市区町村が同列に並んでいるが) プログラムで分類しやすい
- 「郡」の情報がある (ただし…)
- 政令指定都市の区が同一ファイルに記載されている (ただし…)

## 欠点

- 文字コードが **Shift_JIS** なので文字化け注意
    - 変換すればいいんだけどさ…
- データ階層がめちゃくちゃ
    - 政令指定都市と「郡」と「総合振興局」(北海道限定) が同じ階層
    -  北海道の自治体で「総合振興局」がある場合、「郡」の情報はない
    - 東京都の島嶼部の「支庁」の情報が混ざる (現在、正式な地名ではない)

## 対策

上記の地方公共団体コード仕様から、各行がどのデータに当てはまるか分類することができる。

- `sityouson-code` が
    - 0: 都道府県
    - 100以上199以下:
        - 10の倍数: 政令指定都市または「東京都特別区部」
        - それ以外: 「区」
    - 201以上299以下: 市
    - 300以上:「郡」または「総合振興局」または「支庁」または「町村」
        - 北海道の場合
            - 30の倍数: 総合振興局
            - それ以外: 町村
        - 沖縄県の場合 (※)
            - 300, 320, 340, 370, 380: 郡
            - それ以外: 町村
        - その他の都府県の場合:
            - 20の倍数: 郡
            - それ以外: 町村

※沖縄県島尻郡の例外

> 沖縄県島尻郡は 341 からなので本来なら 341～359 が割り当てだが、町村数が多く 362 まで使用しており、341～369 が割り当てられている。次の宮古郡の割り当てはその分減らされ 371～379 である。

参考:  [Wikipediaによる解説](https://ja.wikipedia.org/wiki/全国地方公共団体コード)と上記の仕様書

これらに気をつければ、標準地域コードから充分正規化された市町村データが取得できそう。

# 市区町村の一覧を取得

今回はそんなに細かい分類は求められていなかったので、以下の方針とした。

- 政令指定都市は市名と区名を結合する (ex. 「札幌市中央区」)
- その他の市および東京特別区は市名そのまま (ex. 「鹿児島市」「千代田区」)
- 町村については
    - 北海道の `/.*総合振興局/` は無視し町村名のみ (ex. 「西興部村」)
    - 東京都の離島地域の「支庁」は無視し町村名のみ (ex. 「小笠原村」)
    - その他の町村は郡名と町村名を結合する (ex. 「夷隅郡大多喜町」)


入力は上記のCSV, 出力はYML形式とする。

```cities.yml
- :prefecture_id: 1
  :name: 札幌市中央区
- :prefecture_id: 1
  :name: 札幌市北区
- :prefecture_id: 1
  :name: 札幌市東区
# ...以下省略
```

で、できたコードがこちら

[GitHub Gist - strviola / convert_prefecture_cities.rb](https://gist.github.com/strviola/71f5be723306c08979b9b7277aa4759f)

# 結論

「市町村コードの値」じゃなくてYAMLかなんかで正規化してほしかったな…
youtube-dl を使ってSHOWROOMを保存する方法

youtube-dl を使えばSHOWROOMをmp4ファイルに録画して保存することができる

- この記事はmacOS想定
- ffmpegさえ利用可能にすればWindowsやLinuxでも使えるのでは

# Homebrew のインストール
必須ではないが便利

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

# youtube-dl のインストール

```:macOS
brew install youtube-dl
```

## インストールできたかの確認

```:macOS
youtube-dl --version
```

```
YYYY.MM.DD
```


# 録画したファイルを置く専用フォルダを用意して移動

```:macOS
$ cd Desktop
$ mkdir video
$ cd video
```

# 録画したいSHOWROOM動画のURLを取得

```
https://www.showroom-live.com/hogehoge
```


# 録画する

```:macOS
youtube-dl https://www.showroom-live.com/hogehoge
```

- ```^C``` を押して終了する

> Press [q] to stop, [?] for help

と表示されるが、```q```は効かない


# 確認する
フォルダ内を覗くと
```hogehoge.mp4```
ができているはず

# 高度な操作
[youtube-dl/README.md at master · rg3/youtube-dl] (https://github.com/rg3/youtube-dl/blob/master/README.md#options)
にたくさんオプションが説明されている
SkyWay iOS SDKのCommunity Editionへの移行方法と注意点

# なぜ移行しないといけないか？
- 2018年3月には提供終了するため
- トライアル版の時に使っていたSDKはCommunityEditionでは動かないため

# 移行時の注意点
- [利用上限と価格](https://webrtc.ecl.ntt.com/pricing.html)
- アプリ-Webな通信をしている場合、言わずもがな両サイドのSDKとAPIKeyが接続時には変更されている必要がある
- MultiPartyのライブラリはサポート終了、新SDKのRoomを使いましょう

# 移行方法・注意点

## 1. ライブラリの差し替え

```
// Podfile
-  pod 'SkyWay-iOS-SDK'
+  pod 'SkyWay'
```

## 2. ソース変更

[iOS SDKの互換性、変更点について](https://github.com/nttcom/skyway-sdk-migration-docs/blob/master/ios_sdk_next_version_api_diff.md)

あまり変更点ないので、結構すぐ終わりました。

- import moduleの変更
- いくつかdeprecatedやoptionalになっているプロパティがあるので適宜変更
    - SKWNavigator.initializeにoptional propertyを渡せなくなった
    - SKWVideo.addSrcにoptional propertyを渡せなくなった
        - そもそもdeprecatedになっているので変更が必要
       
        ```swift
        // 変更内容
        self.remoteVideoView.addSrc(_stream, track: 0)
        _stream.addVideoRenderer(self.remoteVideoView, track: 0)
        ```
    - SKWConnectOptionの *reliable* もdeprecated、削除
    - SKWPeerErrorの *type* もdeprecated、これはエラー判定が困る
        - かわりにtypeStringというのが帰ってくるが、これのエラー内容がわからないので、こちらで定義が必要


あと *addVideoRenderer* に変更した部分の影響で、まだ調べているんですが、うちの昨日の一部でstreamを張っているViewを一回剥がして貼り直すみたいなことをしている部分があるんですが。
そこで

```swift

self.pipRemoteViedeo.addSrc(stream, track: 0)
self.movieVC.remoteVideoView.removeSrc(stream, track: 0)

```

これで動いたのを

```swift

stream.addVideoRenderer(self.pipRemoteViedeo, track: 0)
stream.removeVideoRenderer(self.movieVC.remoteVideoView, track: 0)

```

こうしたら動かなかったので、これの順番を逆にしました。

## 3. テスト
よしなに

## ＊4. 将来的にEnterprise Editionに移行する場合
APIKeyはクライアントに組み込まずに、API作るか[Firebase Remote Config](https://firebase.google.com/docs/remote-config/?hl=ja)などを使ってノーリリース アップデートできるようにしておきましょう。

# 所感

大きいリリースの割にSDKの変更点が少なくとてもありがたいです。
エラー内容の判定がSDKの外側にロジックがいくとこだけ、「ウムー、OSSにしてくれ」って気持ちになりました。
エラーのレスポンスそのまま表示にしているようだし、Androidも同じなので、バックエンドの問題にひきづられたのかな〜と思いました。

とはいえ**移行はなる早で**済ませましょ〜。
Ruby on Railsのオブジェクト存在チェック4種

Ruby on Railsには、オブジェクトの存在チェックに以下の4つがあります。

- nil?
- empty?
- blank?
- present?

では、それぞれ簡単に見ていきましょう。

## そもそもオブジェクトって何？
`オブジェクト`というのは「箱」みたいなものです。

箱がなければ、中に何も入れられませんし、
箱があれば、中に何か入れられますよね。
(「何か」は、プログラムの世界だと変数やらオブジェクトやらです。）

なので「オブジェクトの存在チェック」というのは、以下のようなイメージになります。

- 箱そのものはある？
- 箱はあるけど、中身ある？

## **nil?**
`nil`は、日本語で「何もない」という意味です。
使い方はこう。

```rb
if obj.nil?
  # 処理
end
```
つまり、「箱そのものが存在しますか？」という事になります。



## **empty?**
`empty`は、日本語で「空の」という意味です。
使い方はこう。

```rb
if obj.empty?
  # 処理
end
```
つまり、「箱の中身は空ですか？」という事になります。



## **blank?**
`blank`は、日本語で「白紙の」「何もない」という意味があります。
ご察しの通り、`nil`と`blank`の組み合わせです。(白紙=紙はあるのに何も書かれてない、何もない=そもそも紙もない、というイメージ)
使い方はこう。

```rb
if obj.blank?
  # 処理
end
```
つまり、「箱そのものが存在しますか？存在してたとしても空ですか？」という事になります。
なので、以下と同義です。

```rb
if obj.nil? || obj.empty?
  # 処理
end
```

### **補足**
_判定する際に、順番は大切です。_
「箱の中身は空ですか？または箱そのものが存在しますか？」と判定してしまうと、
「箱の中身を問われても、そもそも箱そのものが存在しねえわボケ」と、errorが吐かれます。(いわゆるヌルポ)

人間だと文章全体を見て答えてくれますが、
機械は忖度では動いてくれません.....


## **present?**
`present`は、日本語で「現在の」「存在している」という意味があります。
使い方はこう。

```ruby
if obj.present?
  # 処理
end
```
つまり、「箱そのものが存在していて、かつ、中身もありますか？」という事になります。

_「あれ? 『存在している』って意味なんだから、箱が存在しているかどうかだけじゃないの???」_
という声が聞こえてきそうですが、僕もそう思ってました。
調べても分からなかったので、僕自身の覚え方で申し訳ないのですが、「present=プレゼント=箱の中に何か入ってるはず」といった感じで覚えてます。
(present=プレゼントじゃないですけど、覚え方だからどうでもいいのです。)

## **応用**
判定条件は、接頭辞に`!`を付ける事で結果を反転させられます。
例えばこんな感じ。

```rb
obj = nil

p obj.nil?  # trueと出力される

p !obj.nil? # trueという判定が覆されて、falseと出力される
```
という事は、以下は同義という事になります。

```rb
#箱そのものがない?
obj.nil?
obj.blank?
!obj.present

#箱はあるけど、中身がない?
obj.blank?
!obj.nil && obj.empty?
!obj.present?

#箱もあるし、中身もある?
obj.present
!obj.blank?
!obj.nil? && !obj.empty?
```


## **注意点**
- `nil?`と`empty?`は、**Ruby標準のメソッド**です。
- `blank?`と`present?`は、**Railsで拡張されたメソッド**です
    - つまり、
    - **Ruby単体で使っている場合は、`blank?`と`present?`は使えない！！！！！**
        - その時は、おとなしく`nil?`と`empty?`を駆使して頑張ってください。さっきの「応用」です。ファイト。



### **追記 2017-10-26**
@jkr_2255 さんからご指摘いただきました。ありがとうございます。
コメントにもあります通り、**`blank?`は、スペースのみ、また、タブのみの場合も`true`を返却します。**
ちなみに、**`empty?`は、スペースのみ、また、タブのみの場合は`false`を返却します。**
つまり、
　　`blank?`君「実体のないものはない。」
　　`empty?`ちゃん「実体はないけど、あるって言われたらある。」
みたいな感じ。
`empty?`ちゃんは哲学っぽいですね。(意味不明)
Slim3のミドルウェアで、ルートパラメターにアクセスする方法

Slim3に「[Retrieving Current Route](https://www.slimframework.com/docs/cookbook/retrieving-current-route.html)」というページがあるのに気がついたので、簡単に紹介します。

ミドルウェア内で、ルートパターンにマッチした結果にアクセスする方法です。

普通は、ルートパラメター（ルート内の`{name}`の部分）は、`$args`に入ってきます。

```php
$app->get('user/{name}', function($request, $response, $args) {
    $name = $args['name']; // 1. ルートパラメター：name
    // $nameを使って、適当に処理
    $response->getBody()->write("<h1>Hello {$name}</h1>");
    return $response;
});
```

では、ミドルウェアの場合は、どうやってアクセスするでしょう？
ミドルウェアだと`$args`はありません。代わりに`$next`がありますが。

その場合、`$request`から`route`を取り出して使えるそうです。

```php
use Slim\App;
use Slim\Exception\NotFoundException;
use Slim\Http\Request;
use Slim\Http\Response;

// 1. まず、設定内のフラグを追加！
$app = new App([
    'settings' => [
        // Only set this if you need access to route within middleware
        'determineRouteBeforeAppMiddleware' => true
    ]
]);

// ルートとミドルウェアの設定
$app->get('user/{name}', function($request, $response, $args) {

    $name = $args['name']; // 4. ルートパラメター：name
    // $nameを使って、適当に処理
    $response->getBody()->write("<h1>Hello {$name}</h1>");
    return $response;

})->add(function (Request $request, Response $response, callable $next) {

    // $routeを取得しておく
    $route = $request->getAttribute('route'); // 2. route取り出す
    $arguments = $route->getArguments();

    $arguments['name'] .= ' :touched!'; // 3. 名前に細工しとく
    $route->setArguments($arguments);

    return $next($request, $response);
});
```

大事なことは、最初に`settings`の`determineRouteBeforeAppMiddleware`フラグを`true`にしておくこと。これを唱えていないと、ミドルウェアを実行した後にルートのマッチングが行われるとのこと。

ルートパラメーターを変更したい場合は、`route`の`setArgument(s)`を使えます。
postgresに接続できない時の対処法　

Unix domain socket "/tmp/.s.PGSQL.5432"?
以上のエラーが発生した時

ターミナルに```brew services start postgres```を入力してみる

エラーが変わり
 ```bin/rake db:create db:migrate```を入力してみる。

そうすると```rails s```を入力すると起動できた。
youtube-dl を使ってTwitch（ライブ・アーカイブ）を録画する方法

youtube-dl を使えばTwitchライブ（生配信）・アーカイブ動画をmp4ファイルに録画して保存することができる

- この記事はmacOS想定
- ffmpegさえ利用可能にすればWindowsやLinuxでも使えるのでは

# Homebrew のインストール
必須ではないが便利

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

# youtube-dl のインストール

```:macOS
brew install youtube-dl
```

## インストールできたかの確認

```:macOS
youtube-dl --version
```

```
YYYY.MM.DD
```


# 録画したファイルを置く専用フォルダを用意して移動

```:macOS
$ cd Desktop
$ mkdir video
$ cd video
```

# 録画したいTwitch動画のURLを取得

```
https://go.twitch.tv/hogehoge
https://go.twitch.tv/videos/hogehoge
```
- ライブ（生放送）、アーカイブ動画のいずれも可能


# 録画する

```
youtube-dl https://go.twitch.tv/hogehoge
```

- ライブ（生放送）の場合、 ```^C``` を押して終了する
- アーカイブ動画の場合、自動的に終了する

# 確認する
フォルダ内を覗くと
```hogehoge.mp4```
ができているはず

# 高度な操作
[youtube-dl/README.md at master · rg3/youtube-dl] (https://github.com/rg3/youtube-dl/blob/master/README.md#options)
にたくさんオプションが説明されている
ReactNativeでIOSデバイスを指定してシミュレーターを起動する方法

## 参考URL
https://facebook.github.io/react-native/docs/running-on-simulator-ios.html

## 利用できるデバイスを確認

```
xcrun simctl list devices
```

## デバイスを指定
```
react-native run-ios --simulator="iPhone 5s"
```
こんな感じにすればOK

IPhone Xも指定できるらしいが、自分はうまくいかなかったので
XCodeから直接シミュレーターでIPhone Xを指定してやった。

iPhone/iPad解像度(画面サイズ)早見表 - Qiita https://qiita.com/tomohisaota/items/f8857d01f328e34fb551

デバイス毎のサイズの確認はこちらが参考になった
ON DUPLICATE KEY UPDATE について

# なぜこの記事を書くのか
普通のUPDATE文と何が違うのか、そしてどのような場合に用いる必要があるのか気になったため、まとめる。
公式ドキュメントを見て察しろよ！という話だが。。。


# 指定すると何が起こるのか

UNIQUE インデックスまたは PRIMARY KEY に重複した値を発生させる行が挿入された場合は、MySQL によって古い行の UPDATE が実行される。

それは普通ないことなのでは・・・


# どういった場合に利用するのか

例えば、最初の設計的にやばくてPRIMARY KEYを更新せねばならない状況に陥った場合に実行することがあるとのこと。

そもそもPRIMARY KEYを実装せねばならない状況になることを起こさない方が良い。
ただし、すでに動いているサービスにおいてはやらざるを得ない場合もある。

# PRIMARY KEYは更新したくない！

ただ、やはりPRIMARY KEYを更新するのは・・・
という方は別途人工キーなどを主キーとして用意したほうがよいと思われる。

# まとめ

そもそも使わざるを得ない状況を生み出さないことが理想であるため、
設計の段階で拡張しづらそうな設計にしないといったことが大切。


# 参考
[MySQL5.6 リファレンス INSERT ... ON DUPLICATE KEY UPDATE 構文](https://dev.mysql.com/doc/refman/5.6/ja/insert-on-duplicate.html)

[主キーを更新させるってありですか？](http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=45369&forum=26)

----

何かおかしいところがあれば、指摘して頂けると助かります。
PowerShellでActiveDirectoryの組織(OrganizationalUnit)にグループポリシー(GPO)を割り当てる

# はじめに
ActiveDirectoryでグループポリシーを操作する必要があったのでメモ。


## グループポリシーを作成しておく
作成時の名前をメモしておく。今回は`GPO Name Sample`とした。

## 組織(OrganizationalUnit)を取得してcsvファイルに出力
名前が`OUName`のものを抽出。csv出力されるので必要な行(組織)のみ残して、適用対象外の行を消すなどの調整ができる。

```ps1
PS> Import-module ActiveDirectory
PS> Get-ADOrganizationalUnit -Filter { Name -eq "OUName" } -Properties DistinguishedName | Export-Csv C:\Temp\OrganizationalUnit.csv
```

## 組織にグループポリシーを割り当てる（単一）
```ps1
PS> Import-Module GroupPolicy
PS> New-GPLink -Name "GPO Name Sample" -Target "OU=OUName,OU=COMPUTERS,DC=example,DC=local" -Enforced Yes
```
- `-Enforced`でグループポリシーの適用を強制することが可能。
- 割り当てたグループポリシーを無効にするには、`Set-GPLink`コマンドを使う。



## 組織にグループポリシーを割り当てる（複数。対象をcsvから読み込む）
```ps1
PS> Import-Module GroupPolicy
PS> Import-Csv C:\Temp\OrganizationalUnit.csv | ForEach-Object {
>>  New-GPLink -Name "GPO Name Sample" -Target $_.DistinguishedName -Enforced Yes
>>}
>>
```
Vagrantの共有フォルダをDocumentRootとしたとき、CSSの更新が反映されない場合の対処方法

# 現象
Vagrantの共有フォルダをApacheのDocumentRootとした環境でCSSを編集しても反映されなかった。

# 環境
- Vagrant 2.0.0
- Apache　2.2.15
- CentOS release 6.9

# 対処方法
- **EnableMMAP Off**と**EnableSendfile Off**を追加する

```/etc/httpd/conf/httpd.conf
・
・
<Directory "【ドキュメントルート】">
    EnableMMAP Off
    EnableSendfile Off
</Directory>
・
・
```
Symfony2 Formではまったこと

**(はてブロからの転記です)**

登録・確認・完了っていう画面を作りたかったです。
が。Actionの分け方がまずったらしく、つい癖で、ActionをInputとConfirmとCompleteと作ったんだけど、一つのActionでヨロと言われた。確かに調べてるとそんな感じのが多いのでそのあたりは右に倣う。

しかし、確認画面の作り方がよくわからない。と、いうかTwigでどう書くの？？

今回は取り急ぎで動かしたかったので、Entityは省略

Controller側

```
public function caseAction(Request $request)
{
    $formFactory = Forms::createFormFactoryBuilder()
        ->addExtension(new HttpFoundationExtension())
        ->getFormFactory();

    // formを作って、taskという変数にtextという文字列をbindしている（多分）
    $form = $formFactory->createBuilder()
        ->add('task', 'text')
        ->getForm();

　　　　　　　　// 確認画面(POSTで来た）
    if ($request->getMethod() == 'POST') {
        $form->bind($request);
　　　　　　　　　　　　　　　　// 確認画面の表示
       　　return $this->render('SpBundle:Inquire:confirm.html.twig',
                array('data' => $form->getData(),
        　　));
    }
    
　　　　　　　　// 入力画面の表示（GETで来た）
    return $this->render('SpBundle:Inquire:input.html.twig', array(
            'form' => $form->createView(),
    ));
}
```
Twig側（confirm.html.twig）
```{{ data.task }}
```

これでいいらしい。今回はとりあえず表示されればOK。登録は別API使うからDctrineは関係しません。最初、bindRequestでエラーになってbindに変えました。2.3と2.0でどっちがどっちに変わったか忘れてたｗ

あ、ついでに…routingの設定で。

```
      requirements: 
    　　　_method: POST|GET
```
これ忘れずに。忘れてエラーになった。
GET：入力画面
POST：確認画面

hiddenで値持たせておきたいときは、ControllerからTwigに渡す引数に「form」を追加して
```{{ form_widget(form.task, {type: 'hidden'}) }}
```

こんな感じで。
（上のController、completeがない、ないぞ。どういうことだ）
phpDocumentorがComposerで入らなかった時のメモ

**(はてブロからの転記です)**

環境：CentOS7、Laravel5.5、php7.1

```composer require --dev phpdocumentor/phpdocumentor```
↑これがうまくいかない

こんなエラーが出る

```
    Using version ^2.9 for phpdocumentor/phpdocumentor
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for phpdocumentor/phpdocumentor ^2.9 -> satisfiable by phpdocumentor/phpdocumentor[v2.9.0].
    - Conclusion: remove nikic/php-parser v3.1.1
    - Conclusion: don't install nikic/php-parser v3.1.1
    - phpdocumentor/phpdocumentor v2.9.0 requires phpdocumentor/reflection ^3.0 -> satisfiable by phpdocumentor/reflection[3.0.0, 3.0.1].
    - phpdocumentor/reflection 3.0.0 requires nikic/php-parser ^1.0 -> satisfiable by nikic/php-parser[v1.0.0, v1.0.1, v1.0.2, v1.1.0, v1.2.0, v1.2.1, v1.2.2, v1.3.0, v1.4.0, v1.4.1].
    - phpdocumentor/reflection 3.0.1 requires nikic/php-parser ^1.0 -> satisfiable by nikic/php-parser[v1.0.0, v1.0.1, v1.0.2, v1.1.0, v1.2.0, v1.2.1, v1.2.2, v1.3.0, v1.4.0, v1.4.1].
    - Can only install one of: nikic/php-parser[v1.3.0, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.4.0, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.4.1, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.0.0, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.0.1, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.0.2, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.1.0, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.2.0, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.2.1, v3.1.1].
    - Can only install one of: nikic/php-parser[v1.2.2, v3.1.1].
    - Installation request for nikic/php-parser (locked at v3.1.1) -> satisfiable by nikic/php-parser[v3.1.1].


Installation failed, reverting ./composer.json to its original content.
```

解決手順としては、
1.http://phpdoc.org/phpDocumentor.phar
　　ここからphpDocumentor.pharを取得
2.上記をvendor/binに配置する

以上です。

###使い方
```php vendor/bin/phpDocumentor.phar -d 生成したいファイルがあるディレクトリ```
上の例ではディレクディレクトリを指定していますが、ファイル単体でいい時は、-dオプションでなくて-fオプションにして、ファイルパスを指定します。

 使い方が普通に入れた場合と異なるので気をつけていただければなと。
npmでエラーが出て何もかも上手くいかない

**(はてブロからの転記です)**

環境は```CentOS Linux release 7.1.1503 (Core)```になります。
Laravel5.5の構築中に出現して困った件です。

出現したエラー
```npm: relocation error: npm: symbol SSL_set_cert_cb, version libssl.so.10 not defined in file libssl.so.10 with link time reference```

解決策

```yum update openssl```


こちらの記事に解決策がありました。
→https://goo.gl/Tsuhm4
どうやら、openssl version is 1.0.1eにバグがある様子（英語読めないんだけど）
ajaxの処理が完了してから実行したい処理がある。

**(はてブロからの転記です)**

ajaxってさ、非同期通信で便利なんだけど、処理結果によって後続の処理をどうするか決めたい時あるじゃん？

ajax実行（登録最大値を取得している）
　↓
処理A

って書いても、ajaxの処理中に処理Aが実行されて、登録最大値越してるのに！なんか処理A走ってる！てきなことになりました。

結論からいうと、```$.when $.done```ってのを使いました。

```
	$.when(
		$.ajax({
			url:  '/check_max_user',
			type: 'POST',
			dataType: 'json',
			success: function(data, status, xhr) {
				if (!data.success) {
					max_user_flg = true;
　　　　　　　　　　alert('お腹いっぱいだお');
					return false;
				} else {
					max_user_flg = false;
				}
			}
		})
	).done(function(){
	if (!max_user_flg) {
以下略
```

こうすると、whenの中身実行してからdoneの処理を実行するわけですよ。
[和訳] 1. Introduction (Angular公式チュートリアル)

この投稿は、Angular公式チュートリアルの [1. Introduction](https://v4.angular.io/tutorial) を和訳した記事です。
職場で行うAngular勉強会を円滑に進めることを目的としています。

筆者自身もAngularについては初級者で、英語の知識も乏しいため、記事内容への指摘がありましたら是非コメントをお願いします。

**なお、この記事はAngular v4に対応したチュートリアルの和訳記事です。**
**最新版のチュートリアルではありませんのでご注意ください。**

【チュートリアル一覧】
**_1. Introduction_ : このページです / [原文](https://v4.angular.io/tutorial)**
_2. The Hero Editor_ : [和訳ページ](https://qiita.com/Imamotty/items/5b9290fb674b6feda58c) / [原文](https://v4.angular.io/tutorial/toh-pt1)
_3. Master/Detail_ : [和訳ページ](https://qiita.com/Imamotty/items/eac7cdef533ab7cb4152) / [原文](https://v4.angular.io/tutorial/toh-pt2)
_4. Multiple Components_ : [和訳ページ](https://qiita.com/Imamotty/items/796338e1e3224eb9ba34) / [原文](https://v4.angular.io/tutorial/toh-pt3)
_5. Services_ : 和訳ページ作成中 / [原文](https://v4.angular.io/tutorial/toh-pt4)
_6. Routing_ : 和訳ページ作成中 / [原文](https://v4.angular.io/tutorial/toh-pt5)
_7. HTTP_ : 和訳ページ作成中 / [原文](https://v4.angular.io/tutorial/toh-pt6)

***
# Tutorial：Tour of Heroes
このチュートリアルの壮大な計画は、人材派遣会社がヒーローの安定を管理するのに役立つアプリを構築することです。

Tour of HeroesアプリはAngularの基本事項をカバーしています。
ヒーローのリストを取得して表示し、
選択したヒーローの詳細を編集し、
ヒーローのデータに関するさまざまな画面を行き来する、
本格的なデータ駆動型のアプリで見られる多くの機能を備えた基本的なアプリケーションを構築します。

組込みディレクティブを使用して要素を表示/非表示を制御し、ヒーローデータのリストを表示します。
ヒーローの詳細を表示し、ヒーローの配列を表示するコンポーネントを作成します。
読取り専用データに一方向データバインディングを使用します。
編集可能なフィールドを追加して、双方向データバインディングでモデルを更新します。
コンポーネントメソッドを、キーストロークやクリックなどのユーザーイベントにバインドします。
ユーザーはマスターリストからヒーローを選択し、そのヒーローを詳細ビューで編集することができます。
パイプでデータをフォーマットします。
ヒーローを組み立てるための共有サービスを作成します。
また、ルーティングを使用してさまざまなビューとそのコンポーネントを行き来します。

あなたはアプリケーション作成に取り掛かるのに十分なAngularの基礎を学び、
必要とすることは何でもAngularでできるという確信を得ることでしょう。
あなたは入門レベルで多くの基礎をカバーし、より深いページへの多くの繋がりを見つけるでしょう。

このチュートリアルを終了すると、アプリはこのように見えます。
https://v4.angular.io/generated/live-examples/toh-pt6/eplnkr.html

## あなたが作るもの
こちらは、このチュートリアルで作ろうとしているページの見た目の構想です。
まずは最も勇壮なヒーロー達のリストが表示される"Dashboard"画面から始まります。

![heroes-dashboard-1.png](https://qiita-image-store.s3.amazonaws.com/0/26577/6d3a7e8b-5267-0ad1-34aa-abfb5eb1628a.png)

ダッシュボード上の2つのリンク（"Dashboard"と"Heroes"）をクリックすると、この"Dashboard"画面と"Heroes"画面の間を行き来できます。

ダッシュボードのヒーロー「Magneta」をクリックすると、ルータはヒーローの名前を変更できる"Hero Details"画面を開きます。

![hero-details-1.png](https://qiita-image-store.s3.amazonaws.com/0/26577/589cbf66-6e5e-5d14-bcb5-7c66f3ee85e9.png)

"Back"ボタンをクリックすると、ダッシュボードに戻ります。 
一番上のリンクはメイン画面のいずれかに移動します。 
"Heroes"をクリックすると、アプリはヒーローのマスターリスト画面を表示します。

![heroes-list-2.png](https://qiita-image-store.s3.amazonaws.com/0/26577/9fe1ab5e-8cba-87da-4eb9-2704e6b7fca4.png)

別のヒーロー名をクリックすると、リストの下にある読み取り専用の簡易詳細表示が新たな選択肢をもたらします。

"View Details"ボタンをクリックすると、選択したヒーローの編集可能な詳細画面へ進むことができます。

次の図は、すべての画面遷移を表しています。

![nav-diagram.png](https://qiita-image-store.s3.amazonaws.com/0/26577/6cfe98e5-5e1f-d22f-4b08-29a8d6cb506f.png)

こちらは、このアプリケーションの動作です。

![toh-anim.gif](https://qiita-image-store.s3.amazonaws.com/0/26577/6bc5c141-4830-4f7c-985f-d8f819c279e7.gif)

## 次のステップ
Tour of Heroesアプリを段階的に構築していきます。
それぞれのステップは「多くのアプリケーションで使われている可能性が高い機能」という要件で決定されています。
すべてには理由があります。

このチュートリアルを通じて、あなたはAngularの基本事項に精通していくことでしょう。

今すぐ簡単な[ヒーロー編集画面](https://qiita.com/Imamotty/items/5b9290fb674b6feda58c)を構築することから始めてください。
サーバ内のシンボリックリンクについてリンク元／先のフルパスをセットで抜き出す

# はじめに
とあるサーバにて、各担当者がやりたい放題好き放題、勝手にシンボリックリンクを張りまくった結果、誰も現状を把握できなくなったので、とりあえずサーバ内のシンボリックリンクの一覧をリンク元とリンク先のフルパス付きで抜き出して突き付けてみました。

# 具体例
シンボリックリンクの一覧を抜き出すだけであれば、恐らく以下のコマンドが一番早いはずです。

```shell-session:具体例1
# ls -laR | grep "\->"
```

ですが、これだとサーバ内でどれくらいシンボリックリンクが存在しているか、或いはどこにリンクを張っているかは分かりますが、どこで張っているかまでは個別に見ないと分からないため、今回のようにシンボリックリンクを整理するような用途に使うには、非常にめんどくさい・・・・・・

そこで、リンク元まで一度に見たい場合は以下の例のようにfindと組み合わせます。

**10/30追記
コメントでご指摘いただきましたが、`find`の`-ls`オプション使った方がすっきり書けますね。ご指摘ありがとうございます。
あと元々のコマンドはRHELで実行していたのですが、検証用にたった今CentOSで改めて試した際はちゃんと期待した通りの動きをしなかったので・・・・・・**

```shell-session:具体例2
# find / -type l -ls
```

# おわりに
特に考えずにポンポンとシンボリックリンクを貼ってしまいがちですが、使わなくなった後のケアなどもしっかりしないと（というか最初にリンクを張る際にもうちょっと考えてほしい所ですが）、思わぬ影響を引き起こすこともあるので注意しましょうという話でした。
macOS Serverに『Let's Encrypt』の証明書のセットアップ

#はじめに
3ヶ月前にLet's Encryptで証明書を作ったが、期限が切れてまた一から作り直したので、そのメモです。作成クライアントマシンは、macOS High Sierraで、サーバマシンは、macOS Server 5.3です。

#事前準備
Let's Encryptのオフィシャルサイトの『[Getting Started](https://letsencrypt.org/getting-started/)』を読むと、certbotというACMEクライアントを使うことを勧めている。
certbotは、homebrewで提供されているので、homebrewのインストール経験があれば、簡単にインストールできる。ただ、certbotをインストールすると依存系ファイルもインストールする。
それだとちょっと気に入らないので、今回は、クライアントマシンにインストールして、証明書をクライアントマシンで作成し、サーバにアップロードするという手法をとる。

#大まかな流れ
1. クライアントマシンにcertbotのインストール
2. certbotを使って証明書をクライアントマシンで作成
3. できた証明書をサーバマシンにアップロード
4. Server.appを使って証明書をセットアップ


#手順
##クライアントマシンにcertbotのインストール
https://certbot.eff.org/#osx-apache の手順に従い、certbotをインストールする。

```
$ brew install certbot
```

##certbotを使って証明書をクライアントマシンで作成
certbotの対話形式のマニュアル発行だと次のコマンドを使う。メールアドレス、アグリメント、ドメイン名など聞かれる。また、サーバ上に出力されたWebページを作成する。（英語を良く読んで手順通りやれば、問題なし。）

```
$ certbot certonly --manual
```

または、

```
$ sudo certbot certonly --manual
```


##できた証明書をサーバマシンにアップロード
証明書ができると、/etc/letsencrypt/live/ドメイン名/に4種類の証明書が作成されて、その中のprivkey.pemとfullchain.pemをサーバにコピーする。ちなみにliveディレクトリに入っているのはリンクで、実体は、/etc/letsencrypt/archive/ドメイン名/に入っている。

##Server.appを使って証明書をセットアップ
Server.appのサーバの証明書で、『証明書識別情報を読み込む...』選ぶ。

![スクリーンショット 2017-10-26 8.31.32.png](https://qiita-image-store.s3.amazonaws.com/0/54439/33bd719d-dce6-4322-23f3-7289b0909b84.png)

『秘密鍵が含まれるファイルをここにドラッグしてください。』にprivkey.pemをドラッグし、『公開証明書が含まれるファイルをここにドラッグしてください』にfullcain.pemをドラッグする。

![スクリーンショット 2017-10-26 8.32.08.png](https://qiita-image-store.s3.amazonaws.com/0/54439/5e96f256-1fa6-5f88-5853-95f6c4c516f2.png)

できたら、『サービスのセキュリティ保護に使用:』で証明書を選択してください。

#参考資料
+ [Let's Encrypt](https://letsencrypt.org)
+ [OSX ServerにLets' EncryptのSSL証明書を適用したメモ](https://qiita.com/do-gugan/items/2d9d101df8d4d7aa6f50)
vim使ってるのにvimium使わないなんてもったいない！

## vimiumとは

https://github.com/philc/vimium

vimキーバインドでGoogle Chromeやfirefoxを使えるようにできるプラグインです
カスタムすれば、**マウス操作なし**でウェブブラウジングする事が可能です！



## vimiumができること
### **j**と**k**で上下スクロール
![jkjkjk720.gif](https://qiita-image-store.s3.amazonaws.com/0/62822/5fb3acaa-b2f7-febb-d353-34d8fb8bddae.gif)


### **f**や**i**でリンクを表示して遷移する
![link720.gif](https://qiita-image-store.s3.amazonaws.com/0/62822/8464ff34-c152-a718-43e6-17d7937495da.gif)


### できる事一覧(基本)
```
?       使い方を説明してくれる
h       左へスクロール
j       下へスクロール
k       上へスクロール
l       右へスクロール
gg      一番上へスクロール
G       一眼下へスクロール
d       半ページ下へスクロール
u       半ページ上へスクロール
f       現在のタブでリンクを開く
F       新しいタブでリンクを開く
r       更新
gs      view sourceを表示
yy      URLをコピーする
yf      リンク作のURLをコピーする
...その他いろいろ
```

## カスタムするとさらに便利に！！
### `l`右スクロールと`h`左スクロールはいらないので、戻ると進むに書き換える

- chromeの右上にvimiumボタンのoptionsをクリックする

<img width="512" alt="スクリーンショット 2017-10-25 21.52.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/62822/dbde5667-9477-993e-637e-b0a39735c0fd.png">

- custom key mappingsへカスタムしたい内容を入力する
- ペーストするとこんな感じになります。

```
# 戻る
map h goBack
# 進む
map l goForward

# その他おすすめオプションもどうぞ
map H previousTab
map L nextTab
map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab
```

<img width="996" alt="スクリーンショット 2017-10-25 21.41.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/62822/1187dc80-783e-c844-dc63-8bb02e3f4795.png">

- 最後に`save`を押すと反映されます！！

### 戻ると進む

![backback720.gif](https://qiita-image-store.s3.amazonaws.com/0/62822/c477c4d1-fa83-4403-6a6b-e29e9b054c34.gif)

これだけでもめっちゃ便利です！！！


## インストール方法
- ここからchrome拡張をインストールします
- https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb

## まとめ
- 今の私には欠かせないChrome拡張です！！
- firefoxのもありますが、動きが少々鈍い？のでchromeでの使用がおすすめです！！
【Firebase】subscribeの中でデータ更新処理→無限ループになった

AngularFireを用いた実装で詰まったのでメモ。

subscribeの中で自分自身をupdateしていたため、またsubscribeが走って無限ループとなるようです。

```ts:sample.ts
this.afdb.list('asset')
  .subscribe(item => {
    let tf = item.filter(t => {
      // tmpYm => (ex)2017/10
      return t.ym == tmpYm;
    });

    if (tf.length == 0) {
      let assetList = this.afdb.list('asset');
      assetList.push({
        ym: tmpYm,
        amount: remain
      });
    } else {
      let assetObj = this.afdb.object('asset/' + tf[0].$key);
      assetObj.update({
        // 無限ループされる
        amount: remain
      });
    }
  });

```

##【解決策】データの保存方法を変える

pushでデータ登録した場合は、kakeiboのように一意なキーが自動的に生成されて登録されます。
一方updateの場合は自分でキーを決めて登録することができます。

![スクリーンショット 2017-10-26 21.51.39.png](https://qiita-image-store.s3.amazonaws.com/0/186221/1be2ade5-904e-d8da-973d-421a15ec5cdf.png)

最初、kakeiboのように登録していこうと思っていたのですが、updateを頻繁に行うようなデータを扱う場合は自分でキーを決めた方が実装がラクだったので、updateを使うことにしました。

```ts:sample.ts
let assetObj = this.afdb.object('asset/' + tmpYm);
assetObj.update({
  amount: remain
});
```
いちいちsubscribeの中でキーを取得して、そのキーに紐つくデータを更新
。。。とやるよりはすんなり実装できました。