OmniAICreator/Qiita-1.07M huggingface dataset:
reflectToAttribute

`properties`内で設定する、`reflectToAttribute`についてまとめます。

まず、以下のようにカスタムエレメントの属性値に`raised`があります。

```html
<indicator-button raised></indicator-button>
```

これは、`type: Boolean`において、`raised="true"`と同じ意味になります。以下のように属性値を消すと`false`になります。

```html
<indicator-button></indicator-button>
```

Polymerでは、以下のように設定しています。

```js
            static get properties () {
                return {
                    raised: {
                        type: Boolean,
                        reflectToAttribute: true,
                        value: false,
                        observer: '_calculateElevation'
                    }
                };
            }

            _calculateElevation() {
                this.raised = false;
            }
```

`raised`プロパティに値が渡させれると、`observer: '_calculateElevation'`として設定している`_calculateElevation`メソッドが発火して、`raised`の値を`false`にします。

さて本題の`reflectToAttribute: true`についてですが、公式サイトによると以下のように説明されています。

>
ある特定のケースにおいては、HTMLの属性値とプロパティ値を同期させておくと便利かもしれません。propertiesオブジェクト内のプロパティにreflectToAttribute: trueを設定することで実現できます。これによって、プロパティに対する監視可能な変更は、同名の属性にシリアライズされます。

※翻訳された[滝口さん記事](https://qiita.com/jtakiguchi/items/85d4e636bc490eac699c)より引用

実際に、プロパティにて`reflectToAttribute: true`を指定して、`raised`キーに`true`を指定してから、HTMLソースを確認すると以下のようになります。

<img width="446" alt="6387ee832a05d3197d831b52e5cef485.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/e0ddc1de-53ae-9165-d05d-4f88688dda3c.png">

`raised`プロパティがついていることがわかります。

次に、`_calculateElevation`メソッドによって、`this.raised = false;`にしてから、HTMLソースを確認すると以下のようになります。

<img width="316" alt="943b58b5551436e5c7bd049cff29e08b.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/eac28726-5486-f0c8-828d-ee80069c5f6f.png">

`raised`プロパティが無くなっていることがわかります。

次に、`reflectToAttribute: false`にしてから、`_calculateElevation`メソッドの、`this.raised = false;`を通してHTMLソースを確認すると以下のようになります。

<img width="325" alt="7eaa2faba3c28932ece0d646b2756ef3.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/3f2d79a3-d86a-ab4c-e2b8-bb10b243f287.png">

`this.raised = false;`を設定しているのに、`raised`プロパティが消えていないことがわかります。つまり、Polymerで設定した値とHTMLソースが同期されていないことがわかります。

# まとめ

`reflectToAttribute`プロパティを`true`に設定すると、Polymerのプロパティと、HTMLタグの属性値を同期させることが出来るようになります。
Node-redを使ってNetwork経由で電源制御

# 背景
 ネットワークにつながっていないデバイスの電源On/Offをしたくなった

# どうやるか？
ネットワーク経由で電源制御できる装置があったので、「これをNode-redから操作すればいけるのでは！」と思ってやってみることにしました。

# 電源制御デバイス
　今回はTIME BOOT mini　RSC-MT4HSを使ってみました。
　http://www.meikyo.co.jp/product/?id=1498006347-657950
![1498006347-657950_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/67206/31fcd0ca-70e8-0070-5aab-219cdbacdcc0.jpeg)

# 実際に行った方法

1.電源制御装置の呼び方
　TIME BOOTはHttpリクエストを受け付けて、各電源をOn/Offできる(Webコマンド制御)ので、それを使いました。
　デフォルト設定の場合、`192.168.10.1`がTimebootのアドレスになります。

``` ruby:例：電源３を起動する場合
 http://192.168.10.1/cmd.htm?command=pon3
```
``` ruby:例：電源３を停止する場合
 http://192.168.10.1/cmd.htm?command=pof3
```

2.Node-redからの呼び出し
　単純に、Httpリクエストで呼び出します。

![20171220_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/67206/a5f2e2a0-d27c-d274-dfa4-60309aa15b14.png)

`Time boot電源3起動命令`のノードですが、TimebootはBasic認証がかかるので、
設定が必要です。認証の設定変更はTimeboot側のWeb管理画面から変更可能です。

![20171220_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/67206/eaf0b147-b06e-9f1f-104b-270a5ecbc322.png)

# 結果
ネットワークにつながっていないデバイスの電源On/Offができた！
ちなみに、WakeOnLanやPCのシャットダウンもできるようになりました。すごい便利。
VMware PlayerでUbuntu17.10を入れてvmware toolsを入れようと思ったらうまくいかない

##vmwareが提供しているvmware toolsは推奨されなくなりました

そのくせ画面には「vmware toolsをインストールしますか」的なことを聞いてくるんですけれども。
入れても入れても画面サイズ変わらないし、あれこれきいてねーな、みたいな感じで。

なんでだろうと思ったら
https://qiita.com/y_minowa/items/8032a80b02432db0f5c2
そういや、`./vmware-install.pl -d`で何も起きないからなんだろうと思ってたんですけれど、最初の
「古臭いインストーラーでインストールしますか？[no]」だからだめだったんですね。

# git管理されているので詳細はgitで

記事通り

```
sudo apt-get install open-vm-tools
```
と

```
sudo apt-get install open-vm-tools-desktop
```
でバッチリインスコできました。

とはいえ、最新の情報はどこで確認したらよいか、という話で。
https://github.com/vmware/open-vm-tools
こことか

https://github.com/vmware/open-vm-tools/wiki
ここ。

```
sudo apt-get update
sudo apt-get install open-vm-tools open-vm-tools-desktop
```
かいてある。


CentOSとかも同じみたい。
【挫折しないために】セルフカリキュラムのすゝめ

## きっかけ

英会話、プログラミング、ダイエットなどなど、あらゆる挫折を繰り返してきた私は「自分は何をやっても挫折する」と諦めていました。
そんななか、某有名大卒の友人による英語習得のための「セルフカリキュラム」にふれる機会があり、私は衝撃を受けました。
彼は英語習得のために、はてぶ１０００件以上の英会話サイトをまとめ、そこの情報を元に勉強法をまとめ、コンテンツを選んでリスト化し、無理のない日々のプランを立て、自分が学習に飽きてしまうことも想定し、番外編としてゲーム感覚で遊べるアプリまで用意していました。
それまで私が立てていたプランといえば「１日３時間で１ヶ月１００時間」などという愚かすぎる学習計画でした。

再度プログラミング習得のため発起した私は、彼のカリキュラムを思い出し、以下を前提として周到に計画をすることにしました

- 楽しくなければ続かない
- がんばらない

どうしても挫折したくない私は、まず本を手に取る前に、多くの時間を割いて「セルフカリキュラム」を作成することにしました。

-------

## セルフカリキュラムとは？

「セルフカリキュラム」とは私の造語です。意味としては「語学やプログラミング習得など長期間の学習の前に、目的やレベルに合わせた内容、支援方法などを総合的に自分自身で計画すること」と定義します。
スクールへ通うなら運営側がカリキュラムを用意しているはずですが、独学の場合は自分自身でカリキュラムを作成します。

-------

## なぜセルフカリキュラムが必要か？


### 飽きさせない、迷わせない
学習を「楽しいもの」にするために、自分が興味をもって取り組めるコンテンツ（教材）やレビューの良いコンテンツをできるだけ多くリストアップしておく必要があります。「飽きたら違う教材に変える」「次のステップの度にいちいち迷わない」ためです。

### 無理のないマイペースを維持する
学習目的は人それぞれですが、「早く習得すること」より「挫折しないこと」の方がはるかに重要です。頑張れば早く目標達成できるかもしれませんが、頑張ることによって「挫折」のリスクは高まります。セルフカリキュラムはゴールまでの道筋（プロセス）と距離（時間）を把握し、自分の無理のないペースを維持するためペースメーカーとなります。

### 視野を広く保つ
視野を広く保つためにもセルフカリキュラムは重宝します。プログラミング言語の習得などはエラーの連続です。自分で問題解決できない場合も多々あります。問題の深みにはまるほど、視野が狭くなってしまいますが、解決の糸口は「質問サイトを利用する」「専門家へ聞く」「ペンディングする」など、いろんな選択肢を予め用意しておくことで、苦痛の時間を減らします。

-------

## セルフカリキュラムの作り方

わたしがPythonを勉強する前にTrelloで作成したセルフカリキュラムをご紹介します。
https://trello.com/b/anfpnbP0/%E3%82%BB%E3%83%AB%E3%83%95%E3%82%AB%E3%83%AA%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%A0%EF%BC%88python%E7%B7%A8%EF%BC%89


### ①興味のあるコンテンツ、レビューの高いコンテンツをとにかくたくさん集める

#### 良質なコンテンツを多く集める
書籍の場合はレビューを見る、eLearningや動画コンテンツはまとめサイトやはてブを参考にします。

#### いろんな種類のコンテンツを集める
上のカリキュラムでは、種類を「動画」「e-Learning」「ゲーム」「書籍」「質問・メンター」「勉強会」「アウトプット」「記事」の８種類に分類しタグ付けしています。これは「飽きない」ためでもありますが、理解度と学習定着率を照らし、効率良く学ぶためでもあります。詳しくは下に記載しております。


### ②成長レベルを分類
ほとんどのコンテンツには「ターゲット」があります。自分の成長に合わせて教材を選ぶことが重要です。
ターゲットには大きく分けて「入門者向け」「初心者向け」「中級者向け」「上級者（専門家）向け」の４種類になります。
自分がどこを目指しているのか目標を立てて、入門からステップアップするようにターゲットごとにリスト化します。

#### 成長レベル事例

- 入門ステップ 習得後にできることを調べ、やりたいことをまとめる
- 初心者ステップ 基礎文法などを学ぶ
- 中級者ステップ 応用する
- 上級者ステップ 自分の実用的な科目を学ぶ
 
 
### ③コンテンツ種類に合わせて効率よく学ぶ


#### 媒体による学習定着率の違い

ラーニングピラミッドを元に、コンテンツ種類を学習定着率順に並び替えます。

>１）講義を受ける－5%
>２）「書籍・記事」資料や書籍を読む－10%
>３）「動画」視聴覚（ビデオや音声等による学習）－20％
>４）「e-Learning、ゲーム」実演を見る－30%
>５）「勉強会」他者と議論する－50%
>６）「アウトプット・課題」実践による経験、練習－75％
>７）「質問・メンター」他者に学んだことを教える－90％

![ラーニングピラミッド](http://www.lead-seeekone.com/wordpress/wp-content/uploads/2017/03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2017-03-03-20.59.33-768x737.png)

#### 理解の度合いでコンテンツを選ぶ
「書籍」を読んで、「動画」を観て、「ゲーム」、をして、というように必ず上のステップを踏む必要はありません。
むしろ「実演を見る－30%」までは主にインプットが中心なので、はじめから「動画」を観たほうが学習定着率は上がるかもしれません。理解できていないと感じてたら、ステップを戻ることも重要です。どちらにせよ、理解度や学ぶもの、個人の好みによって適切なコンテンツは異なるので、いろいろな種類を用意しておくことが重要です。


#### 最終的に６）７）まで到達できれば、次のレベルへ

学習したことを定着させるために「何かをカタチにする」「発信する」ことが重要です。４）で終わりではなく、６）７）のステップも見据えた学習プランを立てましょう。

-------


## まとめ

挫折しなければ必ずゴール（習得）はやってきます。
繰り返しになりますが、大切なのは「飽きさせない」「迷わせない」ことです。
挫折しないための準備として「セルフカリキュラム」を作成することをおすすめします。
Python3ではcsvモジュールを使わなくてもCSVを出力できる

この記事は [Pythonのコードを短く簡潔に書くテクニック Advent Calendar 2017](https://qiita.com/advent-calendar/2017/python-short-code) の20日目です。

# はじめに

PythonでCSV/TSVを出力するにはcsvモジュールを使用しますが、簡単なCSVならprint関数だけでも出力できます。

# 例題

以下のようにタプルで構成された行がリストに格納されているデータをCSVファイルへ出力するケースを考えてみます。

```py3
data = [
    (1, 'あいうえお', 'abc'),
    (2, 'かきくけこ', 'def'),
    (3, 'さしすせそ', 'ghi'),
]
```

# csvモジュールを使う場合

```py3
import csv

with open('csv.csv', 'w') as f:
    writer = csv.writer(f)
    for row in data:
        writer.writerow(row)
```

# print関数を使う場合

```py3
with open('print.csv', 'w') as f:
    for row in data:
        print(*row, sep=',', file=f)
```

writerを作成する必要がなくなるので短くなります。

# 解説

print関数には複数の値を渡すことができます。

```pycon
>>> print(1, 2, 3)
1 2 3
```

リストやタプルを渡したいときは`*`をつけてアンパックします。

```pycon
>>> args = [1, 2, 3]
>>> print(*args)
1 2 3
```

デフォルトではスペースで区切られますが、sep引数で区切文字を指定できます。

```pycon
>>> print(1, 2, 3, sep=',')
1,2,3
```

デフォルトの出力先は標準出力(sys.stdout)ですが、file引数でファイルオブジェクトを渡せば出力先をファイルに変更できます。

```pycon
>>> f = open('file.txt', 'w')
>>> print(1, 2, 3, file=f)
```

# print関数だけで十分なケース

- 文字列を`""`で囲う必要がない
- カンマや改行などエスケープする必要がある文字を含まない


# 参考

- Python3 ドキュメント
    - チュートリアル
        - [4.7.4. 引数リストのアンパック](https://docs.python.jp/3/tutorial/controlflow.html#unpacking-argument-lists)
    - ライブラリーリファレンス
        - 2. 組み込み関数
            - [print](https://docs.python.jp/3/library/functions.html#print)
        - [14.1. csv — CSV ファイルの読み書き](https://docs.python.jp/3/library/csv.html)
スタンドアローンGORMをGroovyスクリプトからシュっと利用する

G* Advent Calendar 2017 20日目の記事です。

Grailsの[O/Rマッピングライブラリである「GORM」](http://gorm.grails.org/latest/)は、Grailsから切りはなして単体で使用することもできます。これをスタンドアローンGORMと呼びます。

非WebアプリやGrails以外の他のフレームワークから高機能なORMとして使うことも可能ですし、Grailsでのシステム開発の一部として、バッチやシェルスクリプトやsshでキックしたいとか、シェルアカウントの管理者権限者だけがデータベースにアクセスしたいときには、スタンドアローンGORMが有用なケースがあります。

というのも、そういうケースでは以下のような選択肢があるにはあるのですが、いずれも固有の課題を抱えているからです。

1. [grails scripts](http://docs.grails.org/latest/guide/commandLine.html#creatingCustomScripts)としてGrailsサービスやGrailsドメインクラスを呼び出す処理などを記述し、Grailsのプロジェクトフォルダ(GRAILS_PROJ/scriptsを含む)に格納して、grailsコマンドで起動。
問題は、プロジェクトソースコードを運用環境に展開しておく必要があること。
2. DB処理をWeb APIとして公開して、それを叩くクライアントを開発する。
転送速度がネックになったり、ポートを公開することでセキュリティの問題になるかもしれない。
3. Service層をGrailsの[Remoting Plugin](https://grails.org/plugin/remoting)を使って公開する。
問題は同上。
4. SQLを叩く別プログラムを開発する(Groovy SQL, ..)。
この場合の問題は、GrailsのドメインクラスからDDL生成されたデータベースに対して、生SQLを書くのはかったるいだけではなく、ドメインクラスの制約(constraint)の処理を別途しなければならないということ。

それぞれのケースで示した問題が許容できないとき、スタンドアローンGORMが有用です。

さて、具体的な使用方法としては、Spring Bootのアプリケーションから呼び出すこともできるでしょう。
本記事では、もっとストレートに素のGroovyスクリプトからGORMを呼び出す例を紹介します。

# 方法

たとえば、こんな感じでGroovyスクリプトを書いて、

```groovy
@Grab('org.grails:grails-datastore-gorm-hibernate5:6.1.0.RELEASE')
@GrabExclude('javax.transaction:jta')
@Grab('com.h2database:h2:1.4.192')
@Grab('org.apache.tomcat:tomcat-jdbc:8.5.0')
@Grab('org.slf4j:slf4j-log4j12')
import java.lang.String
import org.grails.orm.hibernate.HibernateDatastore
import grails.gorm.annotation.Entity

@Entity
class Book {
    String title
    static hasMany = [authors: Author]
    String toString() {"$id: $title"}
}

@Entity
class Author {
    String name
    static hasMany = [books: Book]
    static belongsTo = Book
    String toString() {"$id: $name"}
}

def hibernateDatastore = new HibernateDatastore([
        'hibernate.hbm2ddl.auto': 'create-drop',
        'dataSource.driverClassName': 'org.h2.Driver',
        'dataSource.url': 'jdbc:h2:mem:devDb;MVCC=TRUE;LOCK_TIMEOUT=10000;DB_CLOSE_ON_EXIT=FALSE',
        'dataSource.username': 'sa',
        'dataSource.password': '',
    ],
    Author)

Author.withTransaction {
    Author a = new Author(name:'上原 潤二');
    Book b1 = new Book(title: 'プログラミングGROOVY').addToAuthors(a).save()
    Book b2 = new Book(title: 'Grails徹底入門').addToAuthors(a).save()
    println Book.findByTitleLike('G%')
}
```

GroovyおよびJDKがインストールされていれば、以下で実行できます。

```
> groovy groovyスクリプトファイル名
```

GroovyやJDK以外の何かを事前ダウンロードしたりインストールしたりフォルダ構成を考えたりコンパイルしたりビルドしたりビルドスクリプトを書いたりデプロイしたりパッケージングしたりが一切不要なのが利点です✌。

なお、上記では@Entityでドメインクラスを定義していますが、データベースがGrailsアプリケーションの一部であるなら、Grailsアプリケーション本体のwar(やjar)に含まれるドメインクラスのクラスファイルのjarをクラスパスに含めれば別に書かなくても利用可能です(多分)。
nuxt.js 1.0.0-rc11+element ui 2.0.8を動かす

## bash on windowsの設定
1. [Bash on Windowsのホームディレクトリ変更](http://tadaoyamaoka.hatenablog.com/entry/2016/08/06/112047)
2. [Node.jsの導入](https://qiita.com/7tsuno/items/e666223d6be22d657542)

## nuxt.js + element uiの導入

`$ mkdir nuxt
$ cd nuxt
$ npm init
$ vi package.json`

### package.jsonの中身
今回使用したバージョンではdependenciesのvue関連の3つのバージョンをそろえて記載しないとエラーとなります。
[元ネタのURL](https://medium.com/pixelgram/nuxt-js-element-2-%E7%B3%BB%E3%81%A7%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC-9297bad6a12)
`{
  "name": "nuxt",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^1.0.0-rc11",
    "vue": "^2.5.3",
    "vue-server-renderer": "^2.5.3",
    "vue-template-compiler": "^2.5.3",
    "element-ui": "^2.0.8"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}
`
`$ npm i`

### 動かすためのファイルを作成

[ファイルの中身はこちらを参照](https://glitch.com/edit/#!/nuxt-element-ui?path=layouts/default.vue:7:60)

設定ファイル
・nuxt.config.js
・plugins/element-ui.js

コンテンツ
・layouts/default.vue
・pages/index.vue

### nuxt.jsを動かす
`$ npm run dev`
 OPEN  http://localhost:3000
と表示されたら成功です。

また、「npmのせいではない」といった内容のエラーが出た場合は、
ポートが使用されている場合があるので、bash on windowsを再起動するなどして解消させました。
「プログラマーさん素敵・・・！」っと思わせる、デザイナーの心を掴んでスムーズに仕事を回すオススメの方法

２回目の投稿となります、エイチームブライズ、デザインチームの@nishio1873です！

今回は、デザイナーチームの中でよく話に出る

「こんなプログラマーさん素敵！」と思った時の話を書きたいと思います。

今回の内容を明日から実践すれば、デザイナー女子の心を掴むこと間違いなしです。きっと仕事もスムーズになります。どんなお願いも快く受けていただけるでしょう。

**書いているのはおっさんですが。**

##コメントでコードの内容を簡単に書き残しておいてくれる優しさがステキ

これは多くのエンジニアさんが行ってくれていることだとは思います。

やはり、わかりやすくコメントを残してくれているとHTMLとPHPが複雑に混在していたとしてもすごくわかりやすいです。

PHPの記述がズラっと並んでいると、それだけでコードを読み取るのが大変で・・・

一言コメントがあれば「あ、ここはこの内容を記述してるのね」とわかるのでHTML・CSSのコーディング効率が非常に上がります。

何卒・・・何卒・・・


##効率化の方法を"優しく教えてくれる"とこがステキ

デザイナーからすると、エンジニアの効率化スキルはほとんど魔法です。

**え！？そんなことできるの！？自動化できるの！？**と感動したことが何度あったことか・・・

エンジニアが当たり前だと思っていることが全く発想にさえ出てこないなんてことが多々あります。

こうしたら効率的なのになぁ・・・と思うことがありましたら是非教えていただきたいなとデザイナーは思っております・・・。

弊社エンジニアはみなさんとても優しい方が多くいつも丁寧に効率化の方法を提案してくださるんです。ほんとかっこよく見える瞬間です

**無条件リスペクト**です。
いつも本当にありがとうございます。



##プログラミングの専門用語をわかりやすく翻訳してくれるとステキ

多くのデザイナー（もちろん皆ではないですよ）は、数字が苦手です。中学数学で挫折するレベルです。

そして数字のみならず、オブジェクトやらアジャイルやらインスタンスやらの専門用語を聞くとデザイナーは心を閉ざしがちです。最悪死にます。できるだけ日本語を使ってもらえると生き延びる可能性が上がります。

そして、専門用語を説明いただく時、デザイナーの身近なもので例えてくれたりするとすごくステキです・・・

以前、弊社のエンジニアがPHPの変数や配列を説明してくれた際、photoshopなどの機能に例えて説明してくれた時は感動的なほどわかりやすかったです。

>
- **変数はレイヤー、配列はフォルダみたいなものなんだよ**
- **一個のレイヤーでデザインを全部作ってしまうより、レイヤー毎に分けた方が管理しやすいよね〜。**
- **更にレイヤー毎にフォルダ分けしておくと更にわかりやすいよね〜。**
>

といったようにです！スッと理解することができました。

デザイナーは感覚的な人が多いので、あまり論理的すぎると逆に混乱することも多いです。この辺りを少しでも意識してもらえると、デザイナーとの意思疎通がスムーズになりやすいかもしれません。



##事前のデザイン・組込み内容のすり合わせを受けてくれるとステキ

デザイナーはできるだけデザインの意図やレイアウトの理由を説明できるようにしたいと思っていますが、プログラミング部分については、デザイナーとエンジニアで内容を共有することは少ないと思います。

プログラミングの内容を説明するのは大変、というのは確かにあるとは思うのですが
事前にある程度組み込みの内容を共有いただければ、デザインをする上で表現方法を留意できたり、HTML・CSSのコーディングの際に、プログラムの組込みが必要な部分にコメントを書いたりなどの対応を丁寧に行うことができます。

もちろん共有や事前のすり合わせ、報告の大切さは、デザイナーにもそのまま言えることです。**お互いのコミュニケーションの頻度と質が重要ですよね、というすごく基本的な話なってしまいますが・・・こういった部分をおろそかにしない方とは一緒に仕事をしていて気持ちがいいです、ステキです。**


##いかがでしたでしょうか？

今回は、エンジニアの心遣いで「ステキ・・・！」と思った内容を中心に記載いたしました。**エンジニアが思っている以上に、デザイナーはエンジニアをリスペクトしていますし、本当にすごい技術だなと思っています。**

みなさんの技術はデザイナーにとっては魔法みたいに「未知」なものなんです。
「説明しすぎるくらい、簡単に説明する」していただけると、デザイナーにも伝わりやすいかなと思います。

日々日々、一緒に働いていくデザイナーとエンジニアですから、サービスの成長の為、お互いにコミュニケーションの方法を工夫していきたいですね。


**エンジニア視点から見た、「こんなデザイナーステキ・・・！」という内容もお待ちしております！目指します！頑張ります！**

##まだまだ一緒に働いてくれる仲間を募集中です！

エイチームブライズでは一緒にWEBデザイナーとして活躍してくれる優秀な人材を募集中です！
デザイナーが思わず「ステキ・・・！」と思っちゃう優しいエンジニアも多数在籍中！
ぜひ、一緒にサービスを成長させていきましょう！お待ちしております！
http://www.a-tm.co.jp/recruit/


##明日は明日は〜？

さてさて、アドベントカレンダーもいよいよ最終局面。
ここでおいでますはエイチームブライズの「ステキなエンジニア代表」の@sho0211です！

エンジニアの勉強会や、業務改善提案会など非常に積極的に
事業に関わってくださるとても優秀なエンジニアさんなんですよ。

あと腕相撲がエイチームブライズ最強です。
ぜひ、明日もチェックしてくださいね。それでは！
recompose と ReactRedux.connect の HOC を Flow で合成して型付けする

flow@60.1

これらの型定義の導入を前提とする

- https://github.com/acdlite/recompose/blob/master/types/flow-typed/recompose_v0.24.x/flow_v0.55.x-/recompose_v0.24.x.js
- https://github.com/flowtype/flow-typed/blob/master/definitions/npm/redux_v3.x.x/flow_v0.55.x-/redux_v3.x.x.js

ユーティリティタイプや段階的な推論を組み合わせるテクニカルなコードになったが、一度理解してしまえば型付けされた props が手に入る。

```js
/* @flow */
import React from 'react'
import { bindActionCreators, combineReducers } from 'redux'
import { compose, lifecycle, pure, type HOC } from 'recompose'
import { connect } from 'react-redux'

// reducer
const INC = 'inc'

const inc = () => ({ type: INC })

type Counter = {
  value: number
}

type Action = $Call<typeof inc>

const counter = (state: Counter = { value: 0 }, action: Action): Counter => {
  switch (action.type) {
    case INC: {
      return { value: state.value + 1 }
    }
    default: {
      return state
    }
  }
}

const rootReducer = combineReducers({ counter })

// Get RootState from result of rootReducer
type RootState = $Call<typeof rootReducer>

// compose HOCs

type OuterProps = {
  foo: string
}

type Props = {
  foo: string,
  bar: number,
  actions: {
    inc: Function
  }
}

const connector = connect(
  (state: RootState, props) => {
    return {
      foo: props.foo,
      bar: state.counter.value
    }
  },
  dispatch => bindActionCreators({ inc }, dispatch)
)

const enhancer: HOC<Props, OuterProps> = compose(
  connector,
  pure,
  lifecycle({
    componentDidMount() {
      console.log('mounted')
    }
  })
)

// props is resolved by hoc
const MyComponent = enhancer(props => {
  return (
    <div>
      {props.foo}
      {props.bar}
      {props.actions.inc}
    </div>
  )
})
```

変数の意図

- OuterProps: component の外から受ける props の型
- Props: 内部で解決される props の型
- RootState: reducer が返す state の型
- connector: Redux の connect の hoc
- enhancer: recompose.compose で合成された結果のhoc関数

これらの用語は redux の内部表現やflowの型定義から借りてきた

## 見るべき箇所

flow環境でやるとわかるが、connect の mapStateToProps 相当の関数の中と、最後に enhancer でラップした SFC の props が補完されたり静的に追跡されている。

RootState の定義の取り出しは、コード中で完結したかっただけなので真似する必要はない。
Twitterのwebhook APIを試したが出来なかった話

参考URL

- 公式のチュートリアル https://developer.twitter.com/en/docs/tutorials/customer-engagement-application-playbook
- 公式のnodejsのサンプルスクリプト https://github.com/twitterdev/twitter-webhook-boilerplate-node/
- localhostにホスト名割り当ててくれる公式推奨サービス https://ngrok.com/

やった事一覧

- アカウントを電話番号認証した
![image.png](https://qiita-image-store.s3.amazonaws.com/0/5825/dc9ac823-f12e-5ac3-b6bb-841a435798d0.png)

- アカウントを電話認証した後にアプリを新規作成した。DMも権限付与したし、DMの権限付与した後にコンシューマキーとアクセストークン両方作り直した
![image.png](https://qiita-image-store.s3.amazonaws.com/0/5825/731ebb17-a4be-bc73-4131-cf6baf41b7b3.png)

- https://developer.twitter.com/en/docs/tutorials/customer-engagement-application-playbook に従って ngrok.comのフリープランに会員登録しexeを起動した。ポートは後述のスクリプトに合わせて5000にした
![image.png](https://qiita-image-store.s3.amazonaws.com/0/5825/a1131889-7af6-4351-fb18-7193ad950a73.png)
- https://github.com/twitterdev/twitter-webhook-boilerplate-node/ のサンプルを落として`npm install`して`config.sample.json`を`config.json`にリネームして中身を書き換える
![image.png](https://qiita-image-store.s3.amazonaws.com/0/5825/b7eb916a-cbeb-1b91-f761-7265280ff017.png)
- `WEBHOOK_URL`を書き換えて `node example_scripts/webhook_management/create-webhook-config.js`でwebfook_idを取得しようとする。画像ではURLが違うけど一致させる。`/webfooks/twitter`はある場合無い場合両方試した
![image.png](https://qiita-image-store.s3.amazonaws.com/0/5825/04a55af5-da01-58c8-6c2a-a533fee58c67.png)
- 出来ない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/5825/7a4a4b90-f64f-2378-5652-ea3c130bdb55.png)

このアカウントでは別のアプリもいくつか動かしていて、そっちは問題なくトークン使えている。
ズームレベルの現実的な最大は何と考えればよいか

# 24、この数字を知っておくことの意味
結論から申し上げれば、24 です。

理論的にはズームレベル 25 以上も可能な中で、このような具体的な数字を知っておくことの意味は何でしょうか。そこには、二つの意味があると思います。

1. ウェブ地図のシステムは論理的な存在ではなく、計算機（とりわけストレージ）と通信回線の上に実現される具体的な存在です。システムを具体化するにあたっては、具体的な数字を出し、理解し、実現へのインパクトを評価することが重要です。ズームレベル 24 のタイル数は、全世界で 4 ** 24 = 281兆4749億7671万0656 となります。これ以上のオーダーのデータ数を相手にする必要はないと知っておくことは、実装技術を選択するにあたって重要です。
2. ズームレベルは級数的な性質を持つ数であり、ズームレベルが 1 増えると情報の量は 4 倍になります。よって、小さな数字の違いが大きな意味を持ちます。そのような数字について、具体の数字を知っておくことは効果が高いです。

次に、なぜズームレベルの最大は 24 と考えて良いのか、ズームレベル 24 という数字は既存のソフトウェアの中でどう使われているのか、紹介します。

# geojson-vt での議論
[gh:mapbox/geojson-vt のイシュー 87](https://github.com/mapbox/geojson-vt/issues/87#issuecomment-343310724)では、mourner さんが次のように発言しています。

> I think we should explicitly limit the zoom to 24 and throw an error on higher values. I haven't seen any practical reasons to support z25+ — a z25 tile will be roughly 1x1m, and even assuming the default extent of 4096, coordinates would have ~0.2mm precision.

ズームレベル 25 のタイルは 1m 四方となるが、（ベクトルタイルの内部座標の定義域である）4096 でこれを割ると、座標の分解能は 0.2mm 程度となってしまい、現実的には十分以上の精度となる、ということを言っていると思います。確かに、（海を含むような）世界全体をユニバーサルな絶対座標で表現する場合には、0.2mm よりも大きい分解能は必要なさそうです。必要な場合には、別の技術体系を考える方が良さそうです。

このようにして、タイル技術の限界を積極的に定義していくことで、限界の内部での性能の最適化に進むことができる、と考えます。

なお、**蛇足** ですが、緯度によって分解能は変化する、具体的には、緯度のコサインに「地上画素寸法」は比例する、という側面があります。つまり、緯度が60度になると、赤道と比べて2倍の分解能を持つようになる、つまりズームレベルが1つ上がることに匹敵する、ということです。これについては、高緯度においてはタイルをカットする、ということでタイルを節約できる可能性があると思っています。実はこれでかなりのデータ量が節約できる可能性がある（ただし、定数倍でしか効かないが）と思っています。これはまた別の話。

# Mapbox GL JS での 24 の実装
Mapbox GL JS では、すでに最大ズームレベルを 24 として実装しています。例えば [Mapbox Style の layer の minzoom/maxzoom の規定](https://www.mapbox.com/mapbox-gl-js/style-spec/#layer-maxzoom)では、ズームの値を「between 0 and 24 inclusive」と明記しています。
word2vecの性能参考値メモ

# 趣旨

gensimのword2vecを動かした際のサーバスペック、動作時間、入力語数等を参考までに記録しておくもの。検証レベルで大した規模ではないです。所感としては想像していたよりは軽かった。

# 環境

### OS
Linux 4.11.0-1015-azure #15-Ubuntu SMP Thu Nov 2 17:19:14 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux
MS Azure環境です。
### CPU
2core
(Intel(R) Xeon(R) CPU E5-2660 0 @ 2.20GHz)
### Memory
3.5GB

# 実行時間等

```
2017-12-18 13:00:03,893 : word2vec : INFO : collected 29642 word types from a corpus of 197737 raw words and 5056 sentences
2017-12-18 13:00:03,893 : word2vec : INFO : Loading a fresh vocabulary
2017-12-18 13:00:04,161 : word2vec : INFO : min_count=1 retains 29642 unique words (100% of original 29642, drops 0)
2017-12-18 13:00:04,161 : word2vec : INFO : min_count=1 leaves 197737 word corpus (100% of original 197737, drops 0)
2017-12-18 13:00:04,699 : word2vec : INFO : deleting the raw counts dictionary of 29642 items
2017-12-18 13:00:04,700 : word2vec : INFO : sample=0.001 downsamples 10 most-common words
2017-12-18 13:00:04,700 : word2vec : INFO : downsampling leaves estimated 195973
 word corpus (99.1% of prior 197737)
2017-12-18 13:00:04,701 : word2vec : INFO : estimated required memory for 29642
words and 200 dimensions: 62248200 bytes
2017-12-18 13:00:05,055 : word2vec : INFO : resetting layer weights
2017-12-18 13:00:07,413 : word2vec : INFO : training model with 3 workers on　29642 vocabulary and 200 features, using sg=1 hs=0 sample=0.001 negative=15 window=10
~中略~
2017-12-18 13:01:30,224 : word2vec : INFO : PROGRESS: at 100.00% examples, 11832
 words/s, in_qsize 0, out_qsize 1
2017-12-18 13:01:30,224 : word2vec : INFO : worker thread finished; awaiting finish of 0 more threads
2017-12-18 13:01:30,224 : word2vec : INFO : training on 988685 raw words (979818 effective words) took 82.8s, 11832 effective words/s

```

だいたい20万語、3万語彙ですね。かかっている時間は82秒。

(2018/03/08 追記)
600万語、9万語彙で約10分になりました。

Python/gensimのword2vecを使用しており、パラメータはこんな感じです。

```
sg=1, size=200, min_count=1, window=10, hs=0, negative=15, iter=5, sample=0.001
```
ちなみに新聞記事から名詞のみ抽出したコーパスを使っていました。


余談ですが、恐らくgensimの最適化まわりの仕様ゆえだと思いますが、Windowsだと同スペックでもLinuxと比べ格段に遅くなります。とはいえ、非力なWindows端末(i3程度)でも、1~2万語程度であれば十分動作確認は可能でした。
精度はまあ可もなく不可もなく、という感覚。もっと入力を増やせば違う世界があるのかもしれませんが…
Rails Tutorial13章のherokuへのデプロイ時に詰まった

Rails Tutorialの13章をやっている時、最後のherokuへのデプロイで何故かTutorial通りにやってもできず詰まった。
最初はfogのエラーかと思ったが、CarrierWaveの設定が原因だった。

#環境
Mac OS High Sierra 10.13.2
Ruby on Rails 5.1.4
CarrierWave 1.1.0


#詰まった点
herokuにデプロイ時に下記エラーメッセージが発生。

```
LoadError: cannot load such file -- fog
```

#原因
調べてみるとfog自体が悪いというよりはfogを利用する、CarrierWave自体の設定がおかしいらしい。そこでCarrierWaveのReadmeのfogの欄を読んだ。https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#fog

>If you want to use fog you must add in your CarrierWave initializer the following lines
>config.fog_provider = 'fog' # 'fog/aws' etc. Defaults to 'fog'

と書いてあり、fogを使うのであれば、initializerにfogの設定をaddしてくださいね、デフォルトは"fog"ですよと書かれている。
さらにその下のUsing Amazon S3の欄をみると
https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#using-amazon-s3

>CarrierWave.configure do |config|
  config.fog_provider = 'fog/aws'                        # required

どうやらRails Tutorialのようにawsを使う場合は、"fog/aws"に変更しなくてはならないらしい。。

#解決
最終的に、下記のように設定を変更し、再度git addとcommitを行い、herokuにpushしたらいけた。

```config/initializers/carrier_wave.rb
if Rails.env.production?
  CarrierWave.configure do |config|
    config.fog_provider = 'fog/aws' #←ここを追記
    config.fog_credentials = {
      :provider              => 'AWS',
      :region                => ENV['S3_REGION'],
      :aws_access_key_id     => ENV['S3_ACCESS_KEY'],
      :aws_secret_access_key => ENV['S3_SECRET_KEY']
    }
    config.fog_directory     =  ENV['S3_BUCKET']
  end
end
```

同じように詰まった人の参考になれば。
gimli-rs  - 死は確実にして業は成り難し。何を迷う？

冒頭のやつは指輪物語ですね、これがやりたかっただけです。

gimli-rsというDWARFを扱うためのライブラリをちょこっと紹介します。

DWARFというのはデバッグ情報のフォーマットのとこで、 詳しいことは [デバッグ情報の歩き方](https://qiita.com/mhiramat/items/8df17f5113434e93ff0c) というすばらしいエントリがあるのでこっちみてください。DWARFをいい感じに操作したいとなると今までは選択肢はlibdwarfとか使ってCでやるしかなかったんですが、Rustでいい感じのやつが出てきたので選択肢が増えました。

Gimliは,

* ゼロコピー
* 遅延評価(.debug_infoとかがいっぱいDIEもってるとめっちゃでかいので嬉しいやつ)
* クロスプラットフォーム(とりあえずELF/Mach-O、もしかしたらPEも使えるかもしれない)

といった感じで謳っています。

でまあ利用例だと

- [addr2line](https://github.com/gimli-rs/addr2line)
- [ddbug](https://github.com/gimli-rs/ddbug)
- [dwprod](https://github.com/fitzgen/dwprod)
- [symbolic](https://github.com/getsentry/symbolic) の minidumpらへん

とかあって、俺がわざわざ雑なの書くよりこのへんのcrate読んだほうがいいですね。。dwprodとか地味に便利(ほんとか？)で、これまで `readelf -wi hello| grep DW_AT_producer` とかやってたのがいい感じになりました。

## ちょっと触ってみる

なにもコード書かないのも運営に怒られそうなので(?)、しょぼいdwprodもどきを書いてどんな感じかみてみましょう。

こんなかんじのコードを書いてみます。

```rust
extern crate fallible_iterator;
extern crate gimli;
extern crate failure;

use std::fs::File;
use std::io::Read;

use failure::Error;

fn get_section(section_name: &str) -> Result<Vec<u8>, Error> {
    let mut file = File::open(section_name)?;
    let mut buffer = Vec::new();
    file.read_to_end(&mut buffer)?;
    Ok(buffer)
}

fn run() -> Result<(), Error> {
    let endian = gimli::LittleEndian;

    let info_dump = get_section(".debug_info").unwrap();
    let debug_info = gimli::DebugInfo::new(&info_dump, endian);
    let abbrev_dump = get_section(".debug_abbrev").unwrap();
    let debug_abbrev = gimli::DebugAbbrev::new(&abbrev_dump, endian);

    let mut iter = debug_info.units();
    while let Some(unit) = iter.next().expect("Should parse compilation unit") {
        let abbrevs = try!(unit.abbreviations(&debug_abbrev));

        let mut entries = unit.entries(&abbrevs);
        while let Some((_, entry)) = try!(entries.next_dfs()) {
            let mut attrs = entry.attrs();
            while let Some(attr) = attrs.next().unwrap() {
                if attr.name() == gimli::DW_AT_producer {
                    println!("Found a producer: {:?}", attr.value());
                    return Ok(()); // いっぱい出てくるから手抜きしてさっさと返しちゃいます
                }
            }
        }
    }
    Ok(())
}

fn main() {
    match run() {
        Ok(()) => {},
        Err(err) => println!("error: {}", err)
    }
}
```

てきとーにobjcopy使ってdebuginfoとdebugabbrevをdumpしておきましょう。

```
$ objcopy --dump-section .debug_abbrev=.debug_abbrev target/debug/producer
$ objcopy --dump-section .debug_info=.debug_info target/debug/producer
```

実行するとこんな感じのよくわからないのが出てきます。

```console
$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.0 secs
     Running `target/debug/producer`
Found a producer: DebugStrRef(DebugStrOffset(0))
```

これは `.debug_str` セクションというまた別のセクションへの参照とオフセット情報を返しているので、場所を教えているだけです。ここから `.debug_str` を探してちゃんとやるとdwprodみたいな感じにできるはず…たぶん。

そういえばdmdとか-gつけても .debug_str 吐かないやついるんですけど地味に困りますね。

こんなところでお終いです。みなさんもgimliを使っていろいろやっていきましょう。
CentOS6.9にJenkinsを入れたメモ

# はじめに
普段は概念設計と仕様書書くのがお仕事。
先日バリバリのIT屋さんに「CIツール使ったことないシステム屋が許されるのは学生までだよね（意訳」とのお言葉を頂いたので、とりあえずJenkins入れてみた。

## 環境
- OS: CentOS 6.9 i686

最新のCentOS 7系だと、一部コマンドが違うので注意。

# Jenkinsのインストール
## javaのインストール
```bash
$ java --version
java version "1.7.0_161"
OpenJDK Runtime Environment (rhel-2.6.12.0.el6_9-i386 u161-b00)
OpenJDK Client VM (build 24.161-b00, mixed mode, sharing)
```
インストールされていることを確認。入ってなかったらインストールする。
後述するが、Jenkins起動時にエラーが出た場合、最新版を入れる。
この時点だと1.8.0が最新だった。

```
# yum install java-1.8.0-openjdk.i686
```

## Jenkins本体のインストール
リポジトリを追加した後、yumを使ってインストールする。
なお、リポジトリはLTSのものを採用した。

```
# cd /etc/yum.repos.d/
# curl -O http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo
# rpm --import http://pkg.jenkins.io/redhat-stable/jenkins.io.key
# yum install jenkins
```

Jenkinsを起動する。合わせて、マシン起動時にJenkinsが起動するようにする。

```
# chkconfig jenkins on
# /sbin/service jenkins restart
```

次のエラーがでたらjavaのバージョンが低いので、最新版にする。

```
# /sbin/service jenkins start
Starting Jenkins Jenkins requires Java8 or later, but you are running 1.7.0_161-mockbuild_2017_12_06_14_08-b00 from /usr/lib/jvm/java-1.7.0-openjdk-1.7.0.161/jre
java.lang.UnsupportedClassVersionError: 51.0
	at Main.main(Main.java:124)                            
                                                          [  OK  ]
```

うまく行っていたら、ちゃんとメッセージがでる。

```
# /sbin/service jenkins restart
Shutting down Jenkins                                      [FAILED]
Starting Jenkins                                           [  OK  ]
```

## 外部からアクセス可能にする（iptableの書き換え）
次のようにiptableを書き換えた。

```bash
$ cat /etc/sysconfig/iptables
# Firewall configuration written by system-config-firewall
# Manual customization of this file is not recommended.
*filter
:INPUT ACCEPT [0:0]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [0:0]
-A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
-A INPUT -p icmp -j ACCEPT
-A INPUT -i lo -j ACCEPT
-A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j ACCEPT
-A INPUT -m state --state NEW -m tcp -p tcp --dport 8080 -j ACCEPT
-A INPUT -j REJECT --reject-with icmp-host-prohibited
-A FORWARD -j REJECT --reject-with icmp-host-prohibited
COMMIT
```

書き足したのは、下から4行目の```-A INPUT -m state --state NEW -m tcp -p tcp --dport 8080 -j ACCEPT```である。Jenkinsは通常8080ポートを使うので、このポートを開ける。
なお、下から2,3行目はiptablesの条件にマッチしなかった通信をすべてrejectする設定なので、それより前にACCEPTする通信を記述する必要がある。

## Jenkinsの初期設定
IPaddress:8080にアクセスすると、次の画面が見える。
![qiita_171220_jenkins_login.png](https://qiita-image-store.s3.amazonaws.com/0/93354/111b10da-1b37-a926-eb34-8c4f0be73227.png)
以下のコマンドで確認できるパスワードを入力する。

```
# cat /var/lib/jenkins/secrets/initialAdminPassword
```

すると設定画面に移動する。

![qiita_171220_jenkins_cutomize.png](https://qiita-image-store.s3.amazonaws.com/0/93354/6338ee41-eb99-5e43-cfd5-fcd1cc331926.png)

左のInstall suggested pluginsを選択して少し待つ。
すると最初のAdminユーザーの設定に移る。

![qiita_171220_jenkins_adminuser.png](https://qiita-image-store.s3.amazonaws.com/0/93354/85f9d870-1e4a-0244-ebab-a6edda594b0c.png)

設定等については、別途記述としたい。
Androidアプリをリリースしたいと思った時に使ったコマンド

Androidアプリをリリースしたいと考えました。
ただここで問題となるのが、今までusbを使って実機でデバッグしてたけど公開するってなるとどうすんの？てなったのでその時に使ったコマンドをまとめときます。
証明書の作成から戸惑ったレベルの初心者ですが、なんとかリリースまで漕ぎ着けたいです。

##証明書の作成
Android Studioの `Build > Generate Signed APK`を押して`Create New Key Store`
から証明書が作れます。
デフォルトでは `(アプリのルート)/release`　以下に署名済みApkが作成されます。

##SHA-1フィンガープリントを取得

```shell:
keytool -list -v -keystore apk_key.jks
```

これでフィンガープリントを取得できます。

##usb接続されているデバイスにadbコマンドからアプリをインストール
とりあえずリリース用の署名済みapkを取得できたのですが、一度この取得できたapkがちゃんと動作するのか確認しておきたいです。adbコマンドから入れられます。

```shell:
$ adb devices
List of devices attached 
(デバイスのコード)	device
```
て感じでUSB接続できているデバイスがわかるので

```shell:
adb -s (デバイスのコード) install (リリース用署名済みapkへのパス) (先ほど作った証明書へのパス)
```

これでadbコマンドからapkをインストールできます
キーボードを開いたときにTextFieldが隠れないようにする

Objective-cを初めて触って
割りと詰まったので備忘録的な感じで

####諸々初期設定
```Objective-C
@interface HogeViewController ()
@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) IBOutlet UIView *contentView;

// 全てのUITextFieldに紐付けておきます
@property (strong, nonatomic) IBOutletCollection(UITextField) NSArray *textFields;
@end

@implementation HogeViewController {
    // オフセット
    CGPoint _offset;
}
```

####キーボードが開いた時の通知登録
```Objective-C
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
```

####実装部
```Objective-C
- (void)keyboardWillShow:(NSNotification*)notification {
    //アニメーション終了時のキーボードのCGRect
    CGRect keyboardRect = [[notification.userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
    // アニメーションにかかる時間
    NSNumber *duration = [notification.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey];
    // アニメーションのタイプ
    unsigned int curve = [(NSNumber *)[notification.userInfo 
    objectForKey:UIKeyboardAnimationCurveUserInfoKey] unsignedIntValue];

    // フォーカス中のテキストフィールド取得
    UIView *firstResponder = nil;
    for (UIView *textField in _textFields) {
        if ([textField isFirstResponder]) {
            firstResponder = textField;
            break;
        }
    }
    if (firstResponder == nil) {
        return;
    }

    // キーボードサイズを取得
    CGPoint location = [_contentView convertPoint:CGPointZero 
    fromView:firstResponder];
    CGFloat offsetY = location.y + firstResponder.bounds.size.height - (_scrollView.bounds.size.height - keyboardRect.size.height);
    if (offsetY < _scrollView.contentOffset.y) {
        _scrollView.scrollEnabled = NO;
        return;
    }

    // キーボードの高さ分余白を挿入
    UIEdgeInsets contentInsets = UIEdgeInsetsMake(0.0, 0.0, keyboardRect.size.height, 0.0);
    _scrollView.contentInset = contentInsets;
    _scrollView.scrollIndicatorInsets = contentInsets;

    
    if (offsetY < 0) offsetY = 0;
    if (_offset.y == 0) {
        _offset = _scrollView.contentOffset;
    }

    [UIView animateWithDuration:[duration doubleValue]
                          delay:0.0
                        options:curve
                     animations:^{
                         // キーボードの高さ分を調整
                         _scrollView.contentOffset = CGPointMake(0, offsetY);
                     }
                     completion:^(BOOL finished) {
                     }];
}
```

キーボードの閉じ方や閉じたときの処理等も機会があれば書きます。
zsh入れてみた

せっかくMacbookPro買ったので
今までbashしか触ってこなかったが導入してみたのでメモ

# 環境
```
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.13.2
BuildVersion:	17C88
```

# まずはインストール　
※要Homebrew

```
$ brew install zsh
$ brew install zsh-completions
```
- zsh-completionsは、zshの補完機能を強化するプラグイン

# ログインシェルの変更
当然だがデフォルトではbashが起動するので以下手順で変更する

## ログインシェルのリストにzshを追加
/etc/shellsに利用可能なログインシェルのリストが記述されている。
デフォルトは多分こんな感じで記載されている。

```
$ cat /etc/shells
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
```

以下コマンドで今インストールしたzshを追加する

```
$ sudo sh -c "echo '/usr/local/bin/zsh' >> /etc/shells"
```

## ログインシェルを変更する

```
$ chsh -s /usr/local/bin/zsh
```

パスワードを聞かれるので入力してシェルを再起動するとzshが立ち上がる。

# 初期設定
zshは初回起動の場合にのみ、設定のためのユーティリティが起動する
以下のような感じ。

```
This is the Z Shell configuration function for new users,
zsh-newuser-install.
You are seeing this message because you have no zsh startup files
(the files .zshenv, .zprofile, .zshrc, .zlogin in the directory
~).  This function can help you with a few settings that should
make your use of the shell easier.

You can:

(q)  Quit and do nothing.  The function will be run again next time.

(0)  Exit, creating the file ~/.zshrc containing just a comment.
     That will prevent this function being run again.

(1)  Continue to the main menu.

--- Type one of the keys in parentheses ---
```

要するに…

- qを入力すると、何もせずユーティリティは終了する(次にzshを起動したときにまた立ち上がる)
- 0を入力すると、ホームディレクトリに.zshrcを作成して終了(中身は空っぽ)
- 1を入力すると、.zshrc設定を対話型で行う

使ったことはないのでよく分からないがどうやら1の対話型の設定はあんまり使い勝手がよくなさそうなので、0を入力した。
すると以下のように.zshrcが作成された

```
% cat .zshrc
# Created by newuser for 5.4.2
```

# とりあえずzshのここがすごい
とりあえず補完機能がすごい。とりあえずどこ見てもこれ.zshrcに入れとけ感。

```:~/.zshrc
# 補完機能
autoload -Uz compinit
compinit
```

こいつをsourceしてあげて「ls -」まで打ってTabキーを押してみたらすごさが2秒でわかる。
今までmanとか--helpとか打ってたのがアホらしくなる。

# その他設定について

- aliasとかPATHとか基本的には.bash_profileとかに書いてる設定は同じように書いて使える
- その他先人たちが練り上げてきた設定を頂いてけばもっと幸せになれるらしい

続きは気が向いたら更新します。

# 参考URL
[macでbashからzshへ乗り換えた話](http://uu64.hatenablog.jp/entry/2017/04/13/082930)
[15分でわかる zsh](http://mollifier.hatenablog.com/entry/20110207/p1)
[とりあえずZshを使えば良いんだろう？](https://qiita.com/ktr_type23/items/3eb782f98c7a5f4c60b0)
3年間、フロントエンドに関わって触ってきたもの

この記事は [株式会社Y's アドベントカレンダー](https://qiita.com/advent-calendar/2017/ysinc) 17日目の記事です。
# ご挨拶
初めまして、[T_igarashi](https://qiita.com/T_igarashi)です。
登録からこれまでQiitaは見る専門でしたが、アドベントカレンダーの招待を受けまして、
良い機会なので、書く側になってみようということで投稿させていただきました。
# 何を話すのか
2014年からWeb業界に入り、全くわからない業界の中、3年過ごす中で色々なものに触れてきました。今回は触れてきたものを、ざっくりと紹介します。
(内容によっては全然違うよというものがあるかもしれませんが、ご了承ください)
# 触れてきたもの
## HTMLテンプレート
### [ejs(embeddedjs)](http://www.embeddedjs.com/)
HTMLテンプレートの中で一番初めに使ってみたもの
こんなものがあるのか！と驚きました。
### [nunjucks](https://mozilla.github.io/nunjucks/)
現在使っているもの
リファレンスがあまりないのと英語なので、結構苦戦しています。
## cssプリプロセッサ
### [sass](http://sass-lang.com/)
業界入ってすぐに学んだもの
0からいきなりなので、結構愛着あります(今は使ってないけど)
### [stylus](http://stylus-lang.com/)
sassの次に気になったので使ってみたもの
stylusに慣れると、「：」[；]を忘れるようになるので注意
### [sugarcss](https://www.npmjs.com/package/sugarcss)
現在使っているもの。
実はまだあまりよくわかってないので要勉強
## javascriptフレームワーク
### [AngularJS](https://angularjs.org/)
初めてのjsフレームワーク
愛着はあるけど、気づいたらどんどんバージョンがあがって別人に…
### [vue.js](https://jp.vuejs.org/index.html)
Webの案件で使ってみたもの
0から使ってみたが、なんとなく使えたので初めてフレームワーク触る人向け
### [reactjs](https://reactjs.org/)
Webの案件で使ったもの
途中から案件に入ったので0からではないが、面白そうなので案件で是非使ってみたい
## PHPフレームワーク
### [Laravel](http://laravel.jp/)
現場で使ってみたもの
構築段階からとても悩まされたのは今では良い思い出
### [CodeIgniter](https://codeigniter.com/)
現場で使ってみたもの
アイコンが好き、Larabelよりとっつきやすい印象
## テンプレートエンジン
### [Smarty](https://www.smarty.net/docsv2/ja/)
最初の現場で使ったもの
あの頃必死こいて勉強して覚えた記憶が懐かしい
次は構築からやりたい
### [freemarker](https://freemarker.apache.org/)
別の現場で使ったもの
Smartyを頑張って勉強したおかげかすんなり受け入れられた
## 仮想環境
### [xampp](https://www.apachefriends.org/jp/index.html)
よく使うもの
MAMPよりXampp派です
### [virtualbox](https://www.virtualbox.org/)
必要に応じて使うもの
とても便利だが、とても重たい…使い方が悪いのだろうか
### [vagrant](https://www.vagrantup.com/)
一時期はまったもの
最近全然触ってなくて設定方法とか忘れてる、悲しい
## バージョン管理
### SVN(Sub Version)
最初の現場で覚えたもの
出会ったときは衝撃だった、皆一度はtortoiseの読み方に悩むはず
### Git
なくてはならないもの
今なくなったらどうなってしまうのだろうか…
### [SourceTree](https://ja.atlassian.com/software/sourcetree)
コマンドでも出来ないことはないけど、結局使ってしまうもの
アップデートでUIが変わってしまった、まだ受け入れられない
## CMS
### [Wordpress](https://ja.wordpress.org/)
唯一使えるもの
案件を通して使えるようになった、知識がなくても運用が出来るってすごい
## タスク管理
### [Backlog](https://www.backlog.jp/)
初めて触った&現在使っているもの
何だかんだで良いとこ取りなサービスな気がする
### [Trello](https://trello.com/)
プライベートで使っているもの
Backlogほどじゃない簡単なタスク管理には便利
### [Redmine](http://redmine.jp/)
現場で使っていたもの
いつか自分で建てたサーバーに入れてみたいと画策中
### [Jira](https://ja.atlassian.com/software/jira)
現場で使っていたもの
色々できて便利だった
## タスクランナー
### [gulp](https://gulpjs.com/)
現在使っているもの
gulpの代わりとなるものは今後出てくるのだろうか
### [grunt](https://gruntjs.com/)
大分前に使っていたもの
猪。gulpに移行した後に使いやすくなったみたい
## FTPクライアントソフト
### [WinSCP](https://forest.watch.impress.co.jp/library/software/winscp/)
最初の現場で使ったもの
アップしたファイルが反映されているものを見たときは感動した
### [FileZilla](https://ja.osdn.net/projects/filezilla/)
現在使っているもの
何だかんだで一番使いやすい気がしてる
### [FFFTP](https://forest.watch.impress.co.jp/library/software/ffftp/)
とりあえず触ってみたもの
触ってみただけ
#終わりのご挨拶
書いているうちに色々出てきてしまい、結構な量になってしまいました。
もっと時間をかければ色々出てくるとは思いますが、この辺にしておきます。

次は、18日目[@ranmaru_genki](https://qiita.com/ranmaru_genki)さんの記事になります。
kintone pluginを作る上で気を付けるべき8つのポイント

この記事は
**kintone Advent Calendar 20日目** の記事になります。

時は師走。もう年末はそこまで来ています。
松〇一代さんも師走だから離婚を決断したとの事です。

# **簡単に自己紹介**
kintone Café 埼玉の事務局メンバーとして活動してたりします。
kintone Café Japan 2017 でも活動してました。

現在は個人事業主として、kintoneでの業務改善活動の推進や提案、
またkintoneを活用してのCRM、SFAの構築なんかをしてたりします。
あと5日もすると法人になったりします。

# **前提**
これからkintone pluginを作ろうと思ってる人が対象の内容です。

# **本題**
早速ではありますが、先日現場作業していた際にpluginの作成を依頼され、
その際に色々手間取ったので、その時に得られた気づきを今日は共有させて下さい。


# **注意ポイント(1)**
事前にどんな作業が必要になりそうか、把握しておきましょう。
https://developer.cybozu.io/hc/ja/articles/203283794
https://developer.cybozu.io/hc/ja/articles/203302214
https://developer.cybozu.io/hc/ja/articles/203455680

何もわからない状態から始めるとハマリやすいです。
※経験者は語る

# **注意ポイント(2)**
何が必要かわかったら、1度お試しでsampleのプラグインを自分の開発環境などに入れてみましょう。

例えば、
https://github.com/kintone/plugin-sdk
plugin-sdkを落としたらsampleのpluginが入っているので、
試しにpackage.shを叩いて、実際にzipファイルを作ってみる。

ディレクトリ構成や、package.shによって作られるものや必要なものが把握できるので、
まずは試してみるのが良いです。

# **注意ポイント(3)**
jsのファイル名やcssのファイル名などはわかりやすい名前を付けましょう。

manifest.jsonに書くのですが、実際に実装しているとどのjsファイルが
設定画面で動くjsでどのjsが画面で動作するものだっけ？と困ったりします。
(私だけ...?)

# **注意ポイント(4)**
出来るだけテンプレートエンジンを入れて実装することを検討しましょう。

日本語、英語、中国語に対応出来るようになっているので、それらを考慮した作りにしましょう。
(中国語はわからない...)

# **注意ポイント(5)**
確認作業が面倒でもめげない心を持ちましょう。
pluginが出来て、パッケージングをし実際に環境に反映させたけど動かない....

そんな事は良くあります。
(私は100回以上この作業繰り返しました...)

それでもpluginを作って今のkintoneの環境をより良くするんだ！という強い気持ちを持ってpluginを作りましょう。

# **注意ポイント(6)**
設定画面の実装が終わっただけで一息つかないようにしましょう。
設定画面から設定値を取得し実際の画面で動くようになってから一息つきましょう。

# **注意ポイント(7)**
pluginで実装する前に、kintoneの画面にjsを組み込んで動かしておこう。
注意ポイント(6)と似ているのですが、先にkintoneの画面で動く仕組みだけ作っておくと
それをpluginに組み込むだけになるので、圧倒的に楽になります。
(個人の感想)

# **注意ポイント(8)**
作り終わってもゴールだと思わないようにしましょう。
pluginも日々進化なので、自分で入れたい機能を入れながら、
実際に入れて頂いた人にヒアリングなどをし、FBを貰いながらアップデートしていきましょう。

# **まとめ**
多分、1番最初のplugin開発が1番大変だと思います。
2度目、3度目は最初に苦労した知見があるので、そんなに大変な思いはしないはずです。
これを機にplugin開発したいと思ってくれると嬉しいです。

# **appendix**
一緒に業務改善とかを楽しんでやれる人募集中してます。
一緒に業務hackしましょー＼(^o^)／
エンジニアとデザイナーが組んでSlackでチームのコミュニケーションをハックしたときの話。


12月も半ばを過ぎ、非常に寒くなってきました。毎朝家を出るのが億劫です。Atraeデザイナーの木下です。

僕はアトラエには中途採用で入社し、現在およそ1年半になります。
そこで感じるのは、チームのコミュニケーションが非常に大事だということ。仕事をいい感じに進める上で、メンバーの関係性が良好であるに越したことはないですよね。
そんな課題意識がつよくあったわけではないですが、日々の業務の途中にエンジニアと話している中でslackに自分たちの作った画像を表示させてコミュニケーションするアイデアを思いつき、勢いで実装した時の話をします。

## 仕様
/wevofy ~
と打ち込むと、awsにアップされた同名の画像ファイルを読み込んで自動で表示してくれます。

![スクリーンショット 2017-12-19 23.28.22.png](https://qiita-image-store.s3.amazonaws.com/0/121189/9e40fad4-849f-83c4-199f-90faa7adde8b.png)


裏側がどうなってるかは詳しくはよくわかりません。
エンジニアの人がうまく作ってくれました。


## 使用例
例えば、エンジニアが全然仕事していないときには、
![wevofy_copipe のコピー.png](https://qiita-image-store.s3.amazonaws.com/0/121189/7885bc36-a0fb-7b4a-3173-63e01f4fd6d9.png)

例えば、プロダクトがデプロイしてみんなでモメンタムを味わいたいときには、
![wevofy_release.png](https://qiita-image-store.s3.amazonaws.com/0/121189/a37c0e54-72f9-2855-52d1-7a42fbd24eb2.png)

例えば、帰るときには
![wevofy_taikin.png](https://qiita-image-store.s3.amazonaws.com/0/121189/cf58873d-4904-57e7-dae8-f2325a6dc7c8.png)

アップするところを共有しておけば、ハイコンテキストなコミュニケーションを自らどんどん増やしていけるので、チームの結束（内輪ノリ）を固めるのにすごい役立ちます。

また、ミッションをまとめた画像をアップしておくことで、いつでもmissionを思い出せるようになります。
うちのリーダーもとても喜んでいました。
![スクリーンショット 2017-12-19 23.49.27.png](https://qiita-image-store.s3.amazonaws.com/0/121189/1a0d0374-ca97-9dbd-2050-1520c0cc871c.png)



## 実際に使ってみて
良かったこととして、作った瞬間には（仕事せず何をしてたんだという声を含め）非常に盛り上がりました。また何か面白い出来事があったときには新しい画像を作ったり、likeを送ってみたり、日常のコミュニケーションに新たなスパイスがうまれ、チームのハイコンテキストが増えました。

制作の人間としては単純に日々の業務の合間にやる小さなハッカソンとして、訓練になるレベルではないですが適度な腕試しになったかと思います。

その他、若干こじつけ感のある実用的な面では、ここから生まれたキャラクターをプロダクトの中で活用したりしています。UXをゴリゴリ詰めるのとは別の、いい意味で肩の力が抜けたデザインをするには、こういった活動をしたりするのがちょうどいいかもですね。

![スクリーンショット 2017-12-19 23.56.21.png](https://qiita-image-store.s3.amazonaws.com/0/121189/8d11e6c9-392f-1176-908a-1dccbce4fe93.png)


## 最後に…
Atraeでは、モノづくりに熱中できる仲間を全力で[探しております](https://www.green-japan.com/job/51812?jo=blur_pc)！
真面目にも不真面目にも真剣に楽しくものづくりができるメンバーを募集しています。
Sakura Editor × Markdown × アウトライン解析で快適メモ環境

Sakura EditorでMarkdownのアウトライン解析ができるいいプラグインがあったのですが、導入手順がまとまっていなかったので投稿。

# Markdownのアウトライン解析とは？

以下の画像のような,見出しの構造を持たせたメニューを別窓に表示することができる

<img width="323" alt="スクリーンショット 2017-12-20 1.20.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/155509/7bdd2da0-1f37-6e25-e924-709a4998a7c1.png">


見出しがリンクになっており長文になったメモファイルなどはアクセス性の向上が顕著
何よりもMarkdownという好きな文章構造を仕事で活用できる点が嬉しい。

## プラグインの導入

https://github.com/ngyuki/sakuraeditor-plugin-markdown
からプラグインをダウンロードし,

http://sakura-editor.sourceforge.net/htmlhelp2/HLP000110.html
を参考に sakura.ini のある階層に配置.

画面上部メニューの 設定>共通設定>プラグイン
「新規プラグインを追加」をクリックしsakuraeditor-plugin-markdownをインストール

## アウトライン解析の設定
画面上部メニューの 設定>タイプ別設定 で
「アウトライン解析法」の「標準ルール」で「Markdown」を選択
※前工程のプラグインの導入が出来ていないとここでMarkdownが表示されない

## アウトライン解析の表示
画面上部メニューの 検索>アウトライン解析 をクリックすると
markdownの見出しを表示した画面が表示されます.

## おまけ:テキスト更新時の反映方法
アウトライン解析の画面上で右クリック>更新 をクリック

# 感想

 - 更新の反映がちょっとめんどくさい。
 - 上書き保存されるタイミングで更新されると嬉しいのですが...
 - sakuraに限らずマークダウンで長文を書くときにはプレビューよりもアウトライン解析が欲しい。
 - テキストのハイライトも欲しい(加筆予定)
Windows Serverで、Jenkinsを使ってIIS対象フォルダにデプロイしてみる

Windows Loverな[Nな人](https://nnahito.com/)です。
最近[Laravel](https://nnahito.com/)とか始めちゃってます。

さて。
そんな私ですが、WindowsServerでJenkinsを使ってデプロイをしたいなー
なんて考えていましたが、Linuxのコマンドが使えないのがネック過ぎて放置しておりました。

しかし、個人ブログをはじめてみたので、
そこに自動でデプロイできたらよくね！？と考え、なんとかかんとかセットアップを完了したので、
メモついでに残しておきます。

```batch
mkdir repository
mkdir source
git clone --mirror [GITのURL] repository/
cd repository/
git --work-tree=..\source\ checkout -f master
cd ../source/
robocopy .\ [コピー先] /MIR
IF ERRORLEVEL 1 GOTO sub_ok
GOTO :eof
:sub_ok
echo "finished"
exit /B 0
```

コメント付き版はブログの方に載せておりますので、興味があれば！
https://nnahito.com/articles/18
OSXFUSEでNTFSの外付けHDDをR/Wする

# 作業環境
 - Mac OS X Sierra (10.12.6)
 - Buffalo HD-CL2.0TU2 (NTFS)

# 事前確認
USBにて接続したところ、OS標準でマウントは可能だったが、書き込みができなかった。
あくまで書き込みするために実施した自分用の作業ログ。

# コマンド
###1. NTFS-3Gのインストール

```shell-session:
$ brew install ntfs-3g
```
インストール時にエラーがが出て止まったため、エラーメッセージに従って次のパッケージをインストールする。

```shell-session:
$ brew cask install osxfuse
```

成功した場合は、再度ntfs-3gのインストールをする。

###2. 対象のHDDを接続する
普通にOS標準でマウントされるため、取り外しをして、マウントしていないがUSB接続された状態にする。

###3. 対象のHDDをdiskutilで確認する
IDENTIFIER列を参照する。

```shell-session:
$ diskutil list
/dev/disk2 (external, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *2.0 TB     disk2
   1:               Windows_NTFS HDD2                    2.0 TB     disk2s1
```

###4. 対象のHDDをマウントする

```shell-session:
sudo mkdir /Volumes/HDD
sudo /usr/local/bin/ntfs-3g /dev/disk2s1 /Volumes/HDD -olocal -oallow_other
```

なお、1TBの外付けHDDの場合は次のコマンドの方がよかった。
※普通にFinderから読み書き可能で、アンマウントはunmountコマンドを使えば良さそう

```shell-session:
$ sudo mount -t ntfs -o nobrowse,rw /dev/disk2s1 /Volumes/HDD
$ ln -s /Volumes/HDD /Users/leonhardt/Desktop/HDD
```

###5. 読み書き
残念ながらFinderからだと正常に読み書きすることができなかったため、コマンドにてcp等を利用して読み書きできることを確認した。

###6. アンマウント
普通にFinderから取り出しの操作をする。

###7. アンインストール
下記は未実施なので、動作確認は未実施。
なお、osxfuseは環境設定にメニューがあり、アンインストールできそうだが一筋縄ではいかなさそう。

```shell-session:
brew uninstall ntfs-3g
```
Prettierを使って保存時にソースコードを自動で整形してもらう

# 概要、目的

[Prettier](https://prettier.io/docs/en/install.html)という、ソースコードの自動整形ツールが気になったので
まずはお試しで、個人的に作っているプロジェクトに採用できないか調べてみました。

`JavaScript`は書く人によってコードスタイルがバラバラになってくることが多いので、
他人のソースコードを読むときにイラッとすることが多々あります。

コーディングルールを決めればいい話なんですが、
決めたところで守らない人は出て来るし、それに対してソースコードの手動整形をしなくてはいけないのも不毛ですよね。

そこで、`Prettier`をうまく使えばこういう無駄な時間も大きく減らせるのではと考えた次第です。

コードを整形するタイミングについては、
gitにコミットするときだったり、自分でコマンドを叩いて任意のタイミングで都度実行したりと色々あるみたいですが、今回はファイルを保存したときに自動整形してくれるやり方を調べてみました。

## 変更を検知するコマンドを実行するパターン
### パッケージインストール
まずは必要なパッケージをインストールします。
一つは`Prettier`の本体、もう一つの`onchange`はファイルの保存を検知するためのパッケージです。

```bash
npm install -S pritter onchange
```

### 設定ファイルの作成
任意の場所に、設定ファイル`.prettierrc`ファイルを置きます。
私の場合は、`package.json`があるルートフォルダに置きました。
一応、今回実験に使ったプロジェクトのフォルダ構成のサンプルを記載しておきます。このプロジェクトは`create-react-app`で作成しました。

```
application /
├　node_modules /
├　public /
├ src /
├　（略）
├　.prettierrc          <--- 追加
├　package-lock.json
├　package.json
└　README.md
```

このファイルの中に、`Prettier`が整形するときに使うルールを記述します。

```js:.prettierrc
{
    tabWidth : 4,
    semi : true
}
```

どんな設定値が使えるかは、以下のページの「API OVERRIDE」の項目を参照してください。
https://prettier.io/docs/en/options.html

### 変更監視スクリプトの設定
`package.json`の中の`scripts`の項目に、(+)で示した行を追加します。

```json:package.json
  "scripts": {
+   "prettier-watch": "onchange './src/**/*.{js,scss,json,css}' -- prettier --config ./.prettierrc --write {{changed}}",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
```

各環境によって記述を変えなければいけない部分があります。
１つは、`onchange`以下のパスで、この例では`src`フォルダ内の`js` `scss` `json` `css`ファイルの変更を監視するようにしています。
監視対象のフォルダが違ったり、ファイルの種類が違う場合は、パスを書き換えたり `{ }`内の拡張子を変更したりしてください。
もう一つは、`--config`で指定した設定ファイルの場所です。この１つ上のセクションと同じ位置と名前で作成したならばこのままで構いません。

### 変更監視スクリプトの起動
これで準備は出来ました。
ターミナルを起動して`package.json`のあるフォルダに移動し、以下のコマンドを実行してみてください。

```bash
npm run prettier-watch
```

この状態で、`src`フォルダ内の`.js`ファイルに、汚いソースコードを

```js:iambatcode.js
const i =     10
if(i>=9){// kitanai
i+=5
}
```

これを保存するとこうなります。

```js:iambatcode.js
const i = 10;
if (i >= 9) {
    //kitanai
    i += 5;
}
```

インデントがついたり、`( )`内の条件にスペースが入ったり、セミコロンを追加してくれたりと
いい感じに整形してくれていますね。

あとはこの設定ファイルをチーム全体で共有すればみんなハッピーになれるはず。


## エディターに`Prettier`プラグインを組み込んでしまうパターン
あとから気付きましたが、対応しているエディターならこちらのほうが楽ですね…。
対応しているエディタ一覧はこちら。
https://prettier.io/docs/en/editors.html

私はVisual Studio Codeを使っているので、そのやり方を調べてみました。

### プラグインのインストール
MarketPlaceを`Prettier`で検索するといくつか候補が出てきますので、
`Prettier - Code formatter`を選択してインストールします。

![Prettier - Code formatter](https://qiita-image-store.s3.amazonaws.com/0/215631/edbdabca-350c-8fae-1958-f74ee67e320c.png)

### ユーザ設定の変更
ユーザ設定 (Macだと、Code > 基本設定 > 設定　を開いて右側のペイン）　に、`"editor.formatOnSave" : true` を追加します。
これで保存時に自動整形が走るようになります。
![ユーザ設定](https://qiita-image-store.s3.amazonaws.com/0/215631/84b2d583-b245-e801-db72-368857379190.png)

### 設定ファイルの作成
これは上で述べた`.prettierrc`と同じものを同じ位置に用意しておくだけでOKです。省略します。



手順は以上です。

チーム全体で同じエディタを使っているなら、変更監視スクリプトを用意・実行しなくて済むのでこっちのほうがいいかもしれませんね。
汎用性はあるので前者も覚えておいて損はないですが。