OmniAICreator/Qiita-1.07M huggingface dataset:
Qiita のフィードは投稿者の存在を蔑ろにしていると思うんだ…

[Qiita改善案 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/qiita_improvement)、あまりにもボリュームが多すぎて運営に伝わるのか分かりませんが、ちょうど良い機会ですし僕もちょっと書かせてもらいたいと思います。

Qiita の UI に対してずっと感じていたモヤモヤです。

## フォロー機能とフィードの関連について
僕はですね、Qiita にちょっとだけ希望を見て、いろんなタグやユーザをフォローしました。たしかに、フォローしたタグやユーザに関連する記事は流れてきます。でもですね。そこに投稿者の姿が見えないんです。最も労うべき投稿者の姿が見えないんです。

<img width="400" alt="timeline.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/667e8031-4569-42fb-df28-04c07e5935d4.png">

↑これは12月11日の午前中くらいに [Qiita のトップページ](http://qiita.com/) を開いたときのフィード表示です。フォローしたタグであるところの Android や PHP であったり、フォローしたユーザであるところの kozo さんや mattn さんや le_panda_noir さんが注目している記事が並んでいます。これは僕のフォロー内容を反映した記事一覧です。仕様として間違ってはいません。

## しかし投稿者の姿がまるで見えない
Android に新しい投稿がありました。（Androidロゴ）
<img width="400" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/3fc0e1e7-0e0a-3e30-e924-9b173d1a7469.png">
で、これ誰が書いてるんですかね。

PHP に新しい投稿ありました。（PHPロゴ）
<img width="400" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/c55c3861-ac7a-53fc-f306-aa02dee444ec.png">
で、これ誰が書いてるんですかね。

PHP に新しい投稿ありました。（PHPロゴ）
<img width="400" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/5bbc1b7f-a047-6e72-a87a-f3c21851a049.png">
で、これ誰が書いてるんですかね。

@kozo さんがいいねしている投稿ありました。（@kozo さんロゴ）
<img width="400" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/703c470d-f983-48e2-3f55-04bf04efea37.png">
で、これ誰が書いてるんですかね。

@mattn さんがいいねしている投稿がありました。（@mattn さんロゴ）
<img width="400" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/1f4aabca-5274-c845-1d34-7ad64f88cbf0.png">
で、これ誰が書いてるんですかね。

@le_panda_noir さんがコメントしている投稿がありました。（@le_panda_noir さんロゴ）
<img width="400" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/61661015-61bf-670f-4c41-11644a45209e.png">
で、これ誰が書いてるんですかね。

そりゃクリックすれば投稿者の存在は見える。そんなことは分かっている。確かに見える。だが時間のない現代人は全記事クリックする暇などないのですよ。まずはタイムラインをザっと見て情勢を判断したい。できればその段階で功労者の存在を発見したい。

## 功労者の姿が見えない
タグやフォロイーの名前とアイコンしか出てこないタイムライン。なんなのこれ。
もしかしたら超絶がんばってる投稿者がいるかもしれないのに、このタイムラインじゃそれが可視化されない。

タグの壁を乗り越えて種々多様のジャンルの投稿をしているスーパーマンが実は存在していたかもしれない。そんなスーパー投稿者マンの名前やアイコンがタイムラインに出ていてくれさえすれば、僕らは彼または彼女の存在に自然と気づく。注目する。そして労う。場合によってはフォローする。賞賛や感謝することもあればディスることもあるかもしれない。兎にも角にも反応する。

でも今の現状では、それは彼または彼女を発見してフォローしない限り可視化されない。これはスーパーマン観測の機会損失だ。愛すべき苦労人観測の機会損失だ。

閲覧者として実に忍びない。実に実に忍びない。

## もちろん投稿者目線としても
知名度がなければ報われないだろうな。という気持ち。

僕の Qiita 記事をクリックする人がクリックする前に見ているのは僕の名前やアイコンではなく有名なユーザさんやタグの名前とロゴなのだ。タイトルだけは自分のものだけど。

## Qiita は誰によって作られているのか
A. 運営

...Yes そんなことは分かり切っている。が、投稿者あっての Qiita だろう。。。なんだろうこの投稿者不遇の知見集約サイトは。

## どうしてほしいのか
一応「Qiita改善案」カレンダーなのでちゃんと具体的に書いておこう。

例えば別サイトの例を出すと、この↓画像は Twitter のタイムラインを切り取ったものなのだが、
<img width="400" alt="tw (2).png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/e4cfa6c3-f5e6-bcdf-2590-497a18536aec.png">
「労働者」の発言を「こばやん」がリツイートしているに過ぎないことは明白である。

今の Qiita のフィードの現状はこの画像でいうところの「労働者」が「こばやん」という表記になっているようなものであり、そして左のアイコンまで「こばやん」のアイコンになっており、発言者の「労働者」の存在が掻き消えている状態である。

要するに Qiita においても<b>タイムライン的なものにはちゃんと投稿者の名前とアイコンを出して欲しい。それだけ。</b>そこの情報削っちゃうのはさ、なんか投稿者に失礼だと思うんだよ。

## おしまい
いちユーザの要望が伝わるかどうかさえ分からないけど、ちょうど書く場所があったから思っていたことを書いた。

そんな感じでもやもやしていて最近 Qiita に投稿することは少ない。（ただし AdventCalendar には参加する。これは祭りだから。）
faradayの雑な拡張「faraday_boolean」

# faraday_booleanとは?
URLのレスポンスが `"true"` や `"false"` といった文字列の場合に、それをRubyの `true` や `false` [^true] に変換するための [faraday](https://github.com/lostisland/faraday) 拡張です。

[^true]: 厳密には `TrueClass` と `FalseClass` のインスタンス

* https://github.com/sue445/faraday_boolean
* https://rubygems.org/gems/faraday_boolean

# 作った経緯
当時とあるAPIのクライアントgemを仕事で作っていました。

ほとんどのAPIのレスポンスはjsonなので  [faraday_middleware](https://github.com/lostisland/faraday_middleware) のjsonのparserを使っていたのですが、一部のAPIだけがbodyで `true` と `false` を返してそれをjsonをしてparseしようとエラーになりました :cry: 

イメージ的にはこんな感じ。

```sh
$ curl http://example.com/boolean/true
true
```

ちなみに僕が扱ってたAPIではレスポンスが `false` の場合でもステータスコードは200 OKを返していました。

faradayでこのようなbooleanレスポンスをいい感じに扱うために作ったgemがfaraday_booleanです。

# 使い方
```ruby
require "faraday_boolean"

connection =
  Faraday.new(url: "http://example.com") do |conn|
    conn.response :boolean
    conn.adapter Faraday.default_adapter
  end

res = connection.get("/boolean/true")

res.body
#=> true

res.body.class
#=> TrueClass
```

上記のように `conn.response` に `:boolean` を渡せばbodyがtrueかfalseだった時にRubyの`true` や `false` （文字列じゃなくてリテラルの方）で返ります。もちろんGET以外にもPOST, PUT, DELETEでも問題ないです

こういうのきっと誰か作ってるだろうと思ったのですが探してもなかったので自分で作ってます。

ちなみにfaraday_booleanを使わなかった場合はこんな感じです。

```ruby
connection =
  Faraday.new(url: "http://example.com") do |conn|
    # conn.response :boolean
    conn.adapter Faraday.default_adapter
  end

res = connection.get("/boolean/true")

res.body
#=> "true"

res.body.class
#=> String
```

ソースコードはコメント込でたった17行。`true` と `false` の完全一致でチェックしてるので誤爆しようがないはず。。。
https://github.com/sue445/faraday_boolean/blob/v0.1.0/lib/faraday_boolean/parse_boolean.rb
[初心者向け]キャラの動きに合わせてカメラを追従させる

qnote Advent Calendar 16日目は新人のチベが担当します。
早いもので12月も半月が過ぎました。
リア充と呼ばれる方たちは次の休日に恋人へのクリスマスプレゼントなんかを買いに行く頃でしょうか。
~~リア充爆発しろ！！~~
おっと、口が滑るところでした。(滑ってます)

#今回やること
前回はキャラをジャンプさせてみました。
うっかりジャンプしているスクショをあげ忘れました、申し訳ないです。
前回もそうですが、Unity初心者なので初心者目線で書いております。
今回はキャラの動きに合わせてカメラを追従させてみたいと思います。
カメラを追従させるためにキャラを動かす必要があるのでそこも含めて説明していきます。

#キャラを動かしてみた
まずはキャラを動かしてみます。

```C#:Charamove.cs
Rigidbody2D rb;

[SerializeField]
int moveSpeed = 5;

void Start()
{
   rb = GetComponent<Rigidbody2D>();
}

void Update()
{
   rb.velocity = new Vector2(moveSpeed, rb.velocity.y);
}
```
このスクリプトをロボットくんに追加するだけでロボットくんが自動で動いてくれます！
`rb.velocity = new Vector2(moveSpeed, rb.velocity.y);`
この一文本来は
`rb.velocity = new Vector2(rb.velocity.x, rb.velocity.y);`
となります。
x座標にmoveSpeedを入れているのでx座標の正方向に進むというわけです。

動く速さはロボットくんに追加した後InspectorにmoveSpeedの項目があるのでそこをいじれば変わります。

#カメラを追従させてみた
早速キャラに合わせてカメラを追わせたいと思います。

```C#:TrackingCamera.cs
using UnityEngine;
using System.Collections;

public class TrackingCamera : MonoBehaviour
{

  [SerializeField]
  GameObject player;

  void Start()
  {

  }

  void Update()
  {
     transform.position = new Vector3(player.transform.position.x + 9, 0, -2);
  }
```
私は最初、GameObject？のplayer？なにそれ！？これをプレイヤーに追加するの！？カメラに追加するの！？と色々わかりませんでした。
でも、大丈夫！このスクリプトをカメラに追加します。
カメラに追加してInspectorを見ると、、、
![スクリーンショット 2016-12-15 12.29.45.png](https://qiita-image-store.s3.amazonaws.com/0/100756/2caa56e1-dbd8-54b9-b8d3-edac5f102389.png)
「Player」って項目が。そうです！先ほどのGameObjectのPlayerですね！
ここ、初めは何もない(Noneになっているかと思います)ので右にある白丸をポチッと押します。
<img width="347" alt="スクリーンショット 2016-12-15 12.36.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/100756/b6f4b6cc-1748-3c6e-8d6c-3cb9370d2fb0.png">
こんな画面が出てくると思います。
Sceneに追加しているオブジェクトはScene項目に出てくるのでカメラを追従させたいキャラクター名をダブルクリックしてplayerに追加。ロボットくんは「RobotBoyRun00」なのでそれを選択してあります。

では、これで一度動かしてみましょう！
あれ？カメラの位置がおかしい！と思う人もいるでしょう。
実は上のスクリプトはロボットくんが画面の左側に来るように設定してあります。
言葉で説明しても分かりにくいと思いますのでコードとスクショを張って比べてみたいと思います。
まず
`transform.position = new Vector3(player.transform.position.x + 9, 0, -2);`
この一文ですが、上のスクリプトと同じです。動かしてみると。
![スクリーンショット 2016-12-15 14.48.50.png](https://qiita-image-store.s3.amazonaws.com/0/100756/25f8f45b-eb89-247b-537e-d465d32d09e3.png)
このようにロボットくんが画面内左端にいるのがわかります。
次に
`transform.position = new Vector3(player.transform.position.x, 0, -2);`
この一文、どこが変わったかと言いますと、`player.transform.position.x + 9`の + 9を消しました。これで実行してみると。
![スクリーンショット 2016-12-15 14.52.31.png](https://qiita-image-store.s3.amazonaws.com/0/100756/a638ce03-bc35-86f1-d1f2-d768f2c9f950.png)
ロボットくんが中央にいるのがわかります。

つまり + 9をなくした`player.transform.position.x`だけにするとプレイヤーを中心に映すのでカメラの位置がおかしい！ということはなくなると思います。

では、`player.transform.position.x`だけで実行してみましょう。
これでキャラがカメラ内に収まり、カメラは追従してるかと思います。

※ロボットくん＝キャラ＝プレイヤーです。

#まとめ
私がまだまだプログラミングについての知識に乏しい時(今も大概ですが)ネットで調べ物をしていると参考にできるコードは見つかってもコードの内容まで理解できないことがしばしばありました。そうなるとコピペして終わり、になったり同じように書いてエラーを吐くなんてことがあり、知識として身についていないと感じておりました。
私のような経験の方が他にもいた時少しでも理解できたらいいなと少し掘り下げて書いてみました。
まだまだ書き慣れないのでうまく説明が書けていない部分も多いかと思いますが、少しでも役に立ててもらえれば嬉しいです。

さて、今回はキャラが自動で移動し、カメラも追従するようになりましたが、歩かせるだけの地面がないと面白くないですね！手で追加してもいいのですがそれだと大変です。
次回は地面の自動生成について書ければと思います。
スマホの検索結果に順位を表示してキーワードも常に表示する方法


タイトル読んでもなんのことか分かりにくいですね。。。
とりあえず、Before Afterをみてください。

## 「ウクライナ」の検索結果

| Before | After |
|:-----------:|:------------:|
|  ![ウクライナ   Google 検索.png](https://qiita-image-store.s3.amazonaws.com/0/153088/4f665849-278f-6f1c-43d8-56e531573736.png "ウクライナ   Google 検索.png") | ![ウクライナ   Google 検索 after.png](https://qiita-image-store.s3.amazonaws.com/0/153088/5b37ee41-b92d-1b9e-b63e-3e544f2fb370.png "ウクライナ   Google 検索 after.png") |

はい、一緒ですね。。。笑

これだとダメですね、では、次に１ページ分下にスクロールします。

| Before | After |
|:-----------:|:------------:|
| ![ウクライナ   Google 検索 before2.png](https://qiita-image-store.s3.amazonaws.com/0/153088/4730c940-8b60-1653-9a4a-a66c7425ad68.png "ウクライナ   Google 検索 before2.png") | ![ウクライナ   Google 検索 after2.png](https://qiita-image-store.s3.amazonaws.com/0/153088/c1f4d8d4-9adc-6eea-f323-0cc7244c13d7.png "ウクライナ   Google 検索 after2.png") |
 
地味だからか、ちょっと分かりにくいですかね。。
Afterは、検索結果に順位が表示されて、かつ、Googleのロゴと検索バーが一緒にくっついてきます。

## メリット

一人で仕事をしている時には、あんまり効果は発揮しません。
ですが、自分の検索結果を相手に伝える時は、とても便利です。

というのも、検索結果において重要なのは次の３つ。

1. 検索キーワード
2. 検索順位
3. 検索結果（title, description, so on...）

上の２つは、検索した本人はわかります。

ですが、例えば、画像だけ共有された相手には3.は分かるけど、1.と2.はわかりません。

## 検索結果を相手に伝える時のベストなスクショ

![ss 2016-12-15 23.46.12.png](https://qiita-image-store.s3.amazonaws.com/0/153088/2a599977-51e2-18a9-1442-69ea09eab955.png "ss 2016-12-15 23.46.12.png")

こんな感じでしょうか？

こうすることでさらに次のこともわかります。

4. パーソナライズのありなし（chromeだと標準でシークレットモードがウィンドウがダークなので）
5. URL

## 導入方法について

僕が大好きな[stylish](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ja)というchromeプラグインを利用しています。

1. stylishのインストール
2. インストール済みのスタイルを管理
3. 新しいスタイルを作成
4. コードを入力（下に載せておきます）
5. 適用先：ドメイン上のURL google.co.jp
6. 適当なファイル名で保存（僕はMobile Search Result Optimizationと命名）

## CSS

```
/* 順位表示カウンター設置 */
body {
  counter-reset: result !important;
}

/* Google 順位表示 */
cite._Rm:before {
    content: counter(result) "位 " !important;
    counter-increment: result !important;
    font-size: 14px !important;
    color: red !important;
    font-weight: bold !important;
}

/* Google 検索窓の固定 Desktop */
.srp #searchform {
    position: fixed !important;
}

/* Google 検索窓の固定 Mobile */
div#qslc {
  position: fixed !important;
  background: #f2f2f2;
  z-index: 102;
}
div#sfcnt {
  position: fixed !important;
  top: 64px;
}
div#gsr {
    top: 154px;
    position: relative;
}

button.lsbb {
    position: fixed;
    top: 64px;
}
```

特に説明はしませんが、ポイントは

* counter-incrementによる、要素の個数を数えること
* position: fixed; でヘッダーを固定

といったところです。
色とかは好きなように調整するといいです。

ちなみに、上でも紹介しましたが、僕はこれを、モバイル検索結果最適化（MSRO）と呼んでいます。
Mobile Search Result Optimization

検索エンジンの最適化も重要ですが、検索結果を最適化させることで日頃の業務を最適化できます。
BIツールで複数の日付情報を一枚のグラフで処理する方法

この文章は[DATUM STUDIO Advent Calendar 2016](http://qiita.com/advent-calendar/2016/datumstudio "DATUM STUDIO Advent Calendar 2016")の16日目です。
# 趣旨

BIツールを活用する上で、シートの枚数、グラフの枚数を極力少なくすることは、日々の業務を圧縮する上で求められる要件となります。
そんな中で、一つのレコードに複数の日付情報が保存されているデータ、例えば受注日付、出荷日付、返品日付などが存在しているデータがあります。
これをそのまま一枚のグラフに貼り付けると、横軸として使えるのは受注日付となるため、例えば受注日付に出荷や返品のデータも引っ張られてしまうことになります。
<img width="1281" alt="dual_date01.png" src="https://qiita-image-store.s3.amazonaws.com/0/50458/6fbf27bb-535b-f48f-36da-ab8fc247d698.png">
例えば上記のデータではorder_dateの軸ではorderの数量は一致しているが、
send_dateの軸ではsendの数量が一致するという形となり、一枚のグラフにはできません。

# 解決方法
そこで利用できるのが、標準カレンダー(Canonical Calendar)というデータの作りとなります。
例えば下記の様なデータ形式が存在しているとします。
<img width="1283" alt="dual_date02.png" src="https://qiita-image-store.s3.amazonaws.com/0/50458/4c82fd65-2308-eec2-5ea1-a1d293628f9f.png">

これに対して、下記のようなSQLを別に発行し、これをmultiple_datesとINNER JOIN をさせます。

```SQL:カスタムSQL
SELECT
    受注日付 AS 標準日付
    ユニークキー
    '受注' AS CODE
FROM
    FactTable

UNION

SELECT
    出荷日付 AS 標準日付
    ユニークキー
    '出荷'  AS CODE
FROM
    FactTable

SELECT
    返品日付 AS 標準日付
    ユニークキー
    '返品' AS CODE
FROM
    FactTable;
```

これは、日付情報の数だけデータを繰り返すSQLで、
最後のCODEによってその日付がどの日付情報に従っているのかを判別しています。
具体的には下記の様なSQL構造となります。

<img width="897" alt="dual_date03.png" src="https://qiita-image-store.s3.amazonaws.com/0/50458/1795f840-f413-27b6-f017-365d130b361a.png">

続いて、計算フィールドを作成することで、数量が複数ある場合には一つにまとめます。
フィールド名例：数量_標準日付基準

```Tableau:数量_標準日付基準
IF CODE = '受注' THEN 受注数量  
ELSEIF CODE = '出荷' THEN 出荷数量 
ELSEIF CODE = '返品' THEN 返品数量 
```

その後、軸に標準日付を追加し、
上記で作成した計算フィールドを追加することで、
一枚のグラフ上で複数の数量をそれぞれの日付に沿って集計することが可能となります。

<img width="1274" alt="dual_date04.png" src="https://qiita-image-store.s3.amazonaws.com/0/50458/24136a23-b090-1662-c2ca-992b8a881fde.png">

# 参考資料
[Canonical Calendar](https://community.qlik.com/blogs/qlikviewdesignblog/2014/02/17/canonical-date "Canonical Calendar")
Zendesk APIをRubyから触ってみる

本日は軽めの話題として、[Zendesk](https://www.zendesk.co.jp/)のAPIをRubyから操作する方法について書いてみたいと思います。

Zendeskは[API](https://developer.zendesk.com/rest_api/docs/core/introduction)を提供しています。また、[Ruby Gem](https://developer.zendesk.com/rest_api/docs/api-clients/ruby)も提供されています。これを軽く使ってみます。

## 問合せ一覧を出力してみる

まずgemを`require`します。

```rb
require 'zendesk_api'
```

APIに接続します。

```rb
client = ZendeskAPI::Client.new do |config|
  config.url = 'https://hoge.zendesk.com/api/v2'
  config.username = 'hoge@fuga.com'
  config.token = 'hogefugafoobar'
  config.retry = true
end
```

検索します。[検索クエリの詳細は公式ヘルプ](https://support.zendesk.com/hc/ja/articles/203663226-Zendesk%E6%A4%9C%E7%B4%A2%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9)をご確認ください。

```rb
result = client.search(query: 'tags:ほげほげ ふがふが created>2016-12-16T00:00:00+09:00')
```

検索結果を出力します。とりあえずファイルにメールの問合せ本文を一覧で出力してみます。

```rb
open("desc.txt", "w") do |out|
  result.all do |t|
    out.puts(t.description)
    out.puts("===========================")
  end
end
```

これで対象の問合せの本文が`desc.txt`に出力されます。

同じ問合せが多数来た時に対象機種をリストアップしたり、上記のように一覧で出力したりするのに活用しています。

## チケットにメモを追加してみる

Zendesk側で設定して、特定のタグを含むチケットが来た場合に特定のURLをたたく、といった事も可能です。

例えば、チケットに管理画面のURLを追加するようにしてみましょう。

Zendesk側でURLターゲットを指定します。
![zendesk_url.png](https://qiita-image-store.s3.amazonaws.com/0/9104/fe387966-838d-1788-9d39-274b208f3714.png)

次に、ターゲット先のサーバー側のプログラムを書いていきます。チケットに追加情報を書き込むには、同様にZendeskのクライアントが必要になりますので、クライアントで接続します。

```rb
client = ZendeskAPI::Client.new do |config|
  config.url = 'https://hoge.zendesk.com/api/v2'
  config.username = 'hoge@fuga.com'
  config.token = 'hogefugafoobar'
  config.retry = true
end
```

次に送られてくるリクエストを受けるためのパスを設定します。

```rb
post '/add_comment' do
  return add_comment(client, params[:value])
end
```

呼び出されるメソッドで、内部向けのコメントをチケットに追加する処理を書きます。

```rb
def add_comment(client, ticket_id)
  # チケットの詳細情報を取得
  t = client.tickets.find(id: ticket_id)

  # コメントを作成
  admin_url = get_admin_user_url(t)
  t.comment = ZendeskAPI::Ticket::Comment.new(client, value: admin_url, public: false)
  t.save!
  t.description
end
```

`get_admin_user_url` はチケットから管理画面のURLの文字列を簡単なメソッドです。

```rb
def get_admin_user_url(t)
  user_id = get_user_id(t)
  return if user_id.blank?
  "http://kanrigamen.url/users/#{user_id}"
end

def get_user_id(t)
  # 本文が空なら無視
  return nil if t.description.blank?
  # 本文を行毎の配列にする
  message = t.description.split("\n")
  message.each do |m|
    s = m.split(/[ \+]/)
    if s[0] == "ユーザーID:"
      return s[1].strip
    end
  end
  return nil
end
```

すると、該当する問合せがあった場合に、チケット作成時に自動でコメントが追加されます。

<img width="596" alt="スクリーンショット 2016-12-13 16.09.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/9104/58401b0c-2b90-cfbb-d91d-32499ed03ba8.png">

カカリアスタジオでは、上記のようにAPIを活用して、問合せ業務の効率化を図っています。

## おわりに

ソーシャルゲームでは、ユーザーの生の声がレビューや問合せなどでダイレクトに届きます。開発現場までほぼリアルタイムで届きます。それが醍醐味でもあります。

ただ、ユーザー数も増えてくると対応も大変になってきます。そこで、少しでもユーザーの声に耳を傾けるべく、できるだけ必要な情報に素早く簡単にアクセスできる環境を整えるよう心がけています。
スクリーンショットもPlaygroundで作っちゃおう

昨年、[Swift その3 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/swift3)に、[アイコンもPlaygroundで作っちゃおう](http://qiita.com/tnantoka/items/9ca884dad8445ca71026) というネタを投稿しました。

記事の方は全然更新できてないんですが、[コードは細々と更新していて](https://github.com/tnantoka/IconCreator)、去年自分が書いたプログラムの中で一番使った気がしています。

今回はそのスクリーンショット版をお届けします。[^1]
そう、画面をデバイスにはめ込んでその上に粋な一言を書く、例のあの画像です。

他にツールがたくさんあるので、実用性は微妙かもしれませんが…。（[fastlaneでもできる](https://github.com/fastlane/fastlane/tree/master/frameit)んですね）

# 仕様を決める

こんな感じで使えるようにしてみます。

```swift
let config = Config()
config.backgroundColor = UIColor.red

let creator = Creator(config: config)
creator.preview() // -> [UIImage]
creator.save()
```

元となるアプリの画像は、`Resources/Screenshots`フォルダに入れておき、結果の画像は`Documents`ディレクトリ[^2]に保存します。

[iTunes Connectの8月のアップデート](https://developer.apple.com/news/?id=08082016a)で最大サイズだけあれば申請可能になったので、iPhone 7 Plus（`1242 x 2208`）とiPad Pro（`2048 x 2732`）のみ考慮します。

デバイスの素材は、[Devices | Facebook Design](http://facebook.design/devices)から、影付きのものをお借りします。

## 作る

こんな感じの[ScreenshotCreator.swift](https://github.com/tnantoka/ScreenshotCreator/blob/master/ScreenshotCreator.playground/Sources/ScreenshotCreator.swift)を書いて`Sources`に置きます。

それを`Contents.swift`から呼び出します。

```swift:Contents.swift
var config = ScreenshotConfig()
config.backgroundColor = UIColor.brown
config.titles = [
    "phone1" : "Hello, world!"
]

let creator = ScreenshotCreator(config: config)
creator.preview()

creator.save()
```

無事作成されました。（下の画像は縮小したもの）

![phone1.png](https://qiita-image-store.s3.amazonaws.com/0/2191/8e73dac9-df5a-575a-4fef-0d0101629516.png)

## ちゃんと使えるの？

作った本人も心配だったので、[Edhitaというアプリに使ってみました](https://github.com/tnantoka/edhita#iconcreator--screenshotcreator)が、無事審査を通っています。
生成につかったのは[こちらのPlayground](https://github.com/tnantoka/ScreenshotCreator/tree/edhita)です。

ただ、お世辞にもかっこいいとは言えないので、もうちょっと何とかしたいです。（特にiPadの無駄な空白とかひどい）

### ソースコード

GitHubで公開しています。
https://github.com/tnantoka/ScreenshotCreator

### メモ

コードで画像作りたいなと思うことがよくあるんですが、毎回忘れるのでメモっておきます。
単色の画像とかをわざわざ用意しなくていいので楽です。（以下は1px四方の赤い画像を作る例）

```swift
func createRedDot() -> UIImage {
    let size = CGSize(width: 1.0, height: 1.0)
    let rect = CGRect(origin: CGPoint.zero, size: size)
    
    let opaque = true
    let scale: CGFloat = 0.0
    UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
    
    let context = UIGraphicsGetCurrentContext()!
    
    UIColor.red.setFill()
    context.fill(rect)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    
    UIGraphicsEndImageContext()
    
    return image!
}
```

### 最後に

当初はliveView上でGUI操作可能にしてみようと思いましたが、力尽きました。今後保守するのも大変になりそうだし…（そこまでやるなら、素直にMacアプリにした方が良さそうな気がします）

それでは、よいPlaygroundライフを！

[^1]: 昨年はSwiftカレンダーに投稿したんですが、言語の話がなく場違いっぽかったので、今年は**iOSの申請に必要な画像を作成する話**ということでこちらに書きました。
[^2]: アプリ内で使うのと同じように使えますが、一時フォルダのため（Playgroundを閉じるなどすると）すぐ消えるのでご注意ください。
Bitbucketにあった2つのStored XSS

本記事は[脆弱性"&'<<>\ Advent Calendar 2016](http://www.adventar.org/calendars/1404)の15日目の記事です。

Bitbucketに2つXSSを報告したお話です。

# XSS on branch name (upon delete)

![alert-1.png](https://qiita-image-store.s3.amazonaws.com/0/53690/cdb3f2c9-e69c-4988-193c-2fe3b009ac75.png)

<img width="1280" alt="alert-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/53690/c61c1bf1-c19d-2dfb-1571-f899a81679df.png">

画像が全てです。ブランチを削除した時に表示されるメッセージがエスケープされていなかったためXSSが可能でした。ワンタイムですがStored XSSのため、任意のブラウザで発現可能でした。言うまでもなくユーザーインタラクションが必要なため、弱めのXSSです。

# XSS with issue title and commit message

Issueを `git commit -m "fix #1"` としてコミットメッセージからresolveした場合、Web UI上ではコミットメッセージ内のIssue番号がIssueのタイトルで置換されて表示される仕様でした。その際、Issueタイトルがエスケープされずに表示されていたため、

1. `"><script>alert(document.domain)</script>` というタイトルのissueを立てる。
2. `git commit -m "fix #1" && git push` でこのissueをresolveする。

という手順でStored XSSが作れました。

<img width="1271" alt="alert.png" src="https://qiita-image-store.s3.amazonaws.com/0/53690/f31807e3-7f35-2dda-c529-4f1933165306.png">

<img width="656" alt="s_tag.png" src="https://qiita-image-store.s3.amazonaws.com/0/53690/ac00de90-c779-207b-f296-a1c8c9df5aca.png">

これはログイン状態に関わらずIssueのページに誘導するだけで発現させられた他、Bitbucketトップページの"Recent Activity"の中にも表示されており、Bitbucket上で自分をフォローしている全てのユーザーのトップページにXSSを仕込めるようになっていたため、強力なXSSでした。

# 結果

Atlassianの[Security Hall of Fame](https://www.atlassian.com/trust/security/hall-of-fame)に名前を載せてもらった他、[Tシャツ](https://atlassian-swag.mybrightsites.com/products/86762)を貰いました。

おわり
Mithril.jsのコンポーネントでドハマリ


すっかり準備を忘れてました。
日付が変わる前に間に合えばセーフでしょうか。。。
さっぱりフロントエンドに開発に疎いのですが、仮想DOMとはなんぞや？という興味から最近Mithril.jsを触っています。

すみません、時間がないのでここまでで一番嵌った思い出を。

# コンポーネントでのHTMLタグ属性の制御

テキストボックをカプセル化するコンポーネントを作ろうとして。
特定のテキストボックスだけは読み取り専用にしたい、となってdisabeledを使う分にはなんの問題もなく。

```
<input type="text" id={item.id} class={item.cls} 
       value={item.value} onchange={m.withAttr("value", item.value)} 
       disabled={item.disabled} />

```

しかし、disabledではなくreadonlyだと選択、コピーができていいな！となって同じように設定するもうまく動かず。
ずっとハマってif文で分けるしかないのか……と悩んでいたある日、公式ドキュメントを眺めていたらそのものズバリの回答が。

以下Mithril.jsのAPIガイド [m - Mithril](http://mithril-ja.js.org/mithril.html "m - Mithril") からの引用です。

```
//`readonly`の設定にJavaScript文法(大文字の"O"になる)を使用
//HTML属性とは異なり、JavaScriptのプロパティではboolean型を使用する
m("input", {readOnly: true}); //yields <input readonly />

//HTML属性名は`setAttribute`が使われるため期待と異なることがある
m("input", {readonly: false}); //<input readonly="false" />は属性が存在するので読み込み専用
```

ここでは上記の通りreadonlyではなくreadoOnlyを使う、が正解でした。
NeoVimのインストール Mac & Amazon Linux

Vimの次世代版，その名もNeoVim．
これからはこっちが主流になるらしい．

ということで，MacとAmazon Linuxに入れてみました．

# Mac
### インストール
<pre><code class="Bash">$ brew install neovim/neovim/neovim</code>
</pre>

これで入ります．
brewのインストールは[ここ](http://brew.sh/index_ja.html)を参照

### 設定
NeoVimはXDG configurationというのをサポートしています．
で，そのHOME_PATHを決められます．

~/.config に設定します．（どこでもいいです）
<pre><code class="Bash">$ vim ~/.zshrc
（以下追記）
export XDG_CONFIG_HOME=$HOME/.config</code>
</pre>
NeoVimの設定は $XDG_CONFIG_HOME/nvim/init.vim に書かないといけないようです．

使うときはnvimコマンドで．
viにシンボリックリンク貼って使うも良しです．（そこらへんは好みで）
<pre><code class="Bash">$ nvim 〜</code>
</pre>

# Amazon Linux
### インストール
LinuxBrewでインストールするとThirdPartyのインストールで失敗したので（brew reinstall -s libtoolしてもダメだった），yumで入れます．
NeoVim用のリポジトリを記述します．
<pre><code class="Bash">$ sudo vim /etc/yum.repos.d/neovim.repo
（以下記述）
[dperson-neovim]
name=Copr repo for neovim owned by dperson
baseurl=https://copr-be.cloud.fedoraproject.org/results/dperson/neovim/epel-7-$basearch/
skip_if_unavailable=True
gpgcheck=1
gpgkey=https://copr-be.cloud.fedoraproject.org/results/dperson/neovim/pubkey.gpg
enabled=1
enabled_metadata=1</code>
</pre>
書き終わったら yumでインストール
<pre><code class="Bash">$ sudo yum install neovim</code>
</pre>

設定はMacのときと同じものをbashrcにでも書いておけばOKかと．

---

おしまい
componentのユニットテストを書く

## component
AngularJS 1.5から、componentが使えるようになっています。
デフォルトで$scopeが独立していたり、one-way bindingなどが使えるので、積極的に活用したいところです。

## ユニットテストの書き方

以下のようなcomponentをテストする場合を想定します。

```ts
class GreetingCtrl {

  constructor() {
    this.title = '';

    if (this.gender === 'male') {
      this.title = 'Mr.';
    }
    if (this.gender === 'female') {
      this.title = 'Ms.';
    }
  
    this.name = this.title + this.surname;
  }
}

angular.module('myApp').component('greet', {
    bindings: {
      gender: '@',
      surname: '@'
    },
    template: '<p>Hello, {{$ctrl.name}}</p>',
    controller:GreetingCtrl
  });

```

componentのcontrollerである`GreetingCtrl`は、`$_componentController_`というサービスを使用することで取得できます。


```ts
describe('greetコンポーネントのテスト',() => {
  let $controller;
  let setComponent;

  beforeEach(function() {
    angular.mock.module('myApp');

    inject(function(_$componentController_) {
      $controller = _$componentController_;

      setComponent = function(bindings) {
        return $controller('greet', null, bindings);
      };
    });

    it('genderがmaleの場合は、surnameの先頭にMr.がついている',()=>{
      const cp = setComponent({
        gender: 'male',
        surname: 'Test'
      });
      expect(cp.name).toEqual('Mr.Test');
    });
  });
```
`_$componentController_()`の第一引数が呼び出したいcomponent名、
第二引数はinjectしたいscope（nullの場合は独立scopeになります）、
第三引数がbindingsしたい値になります。
Reduxの3原則の理由がわからない

これは、ノウハウやTIPSではなく疑問のメモです。すみません。

Reduxには、Reduxの3原則というものがあるということを知りました。

https://github.com/reactjs/redux/blob/master/docs/introduction/ThreePrinciples.md


読んでみたのですが、その3原則がなぜあるのかが理解できません。

3原則の説明には、ざっくり以下の内容が書かれてます。


# Three Principles

## Single source of truth

* サーバから渡されたstateを特別な実装無しでシリアライズできる。
* stateをprintできるのでデバッグにも便利。


## State is read-only

* actionを投げることでしかstateを変えられないって書いてる。
* (それはstateがread-onlyであるべき理由じゃないよね。)


## Changes are made with pure functions

* 部分的なreducersに分割することができるって書いてる。
* (それは、reducer が pure function であるべき理由じゃないよね。)


# 「なぜその3原則があるのか?」が書かれてない

「これらの原則があることで良いアプリケーションを書ける理由がこれこれだから、これらの原則があるんだ」、という内容を期待してたんですが、それが書かれてない。

唯一 Single source of truth の原則だけが理由が書かれてるんですが、これについても(少なくともここに書いてある理由だけだと) え、そんだけの理由? という感じです。

ネットで調べても、これらの原則がある理由は見つけられませんでした。


だれか知ってたら教えてください...
Rails以外でRubyのアノテーションコメントをリストアップする

Ruby on Rails ではコード中に `TODO:` `FIXME:` などのコメントがあると
`rake notes` で課題一覧として確認することができます。

詳しくは下記を参照

[Ruby | アノテーションコメント（TODO、FIXME、OPTIMIZE、HACK、REVIEW）](http://qiita.com/tbpgr/items/1c046a877c6be4d89876)


この `rake notes` は Ruby on Rails の機能なので Rails 以外のプロジェクトでは利用できません。
そこで `rake-notes` という gem があります。あるにはあります・・・

## <i class='fa fa-question-circle'></i> rake-notes とは？
Rails の `rake notes` 相当のことをしてくれる gem です。

* [rake-notes - RubyGems](https://rubygems.org/gems/rake-notes)
* [fgrehm/rake-notes - GitHub](https://github.com/fgrehm/rake-notes)

## <i class='fa fa-download'></i> インストール

```sh
$ gem install rake-notes
```

## <i class='fa fa-flask'></i> サンプル
試してみます。
適当なプロジェクトを作って TODO コメントを埋め込んでみます。

### <i class='fa fa-code'></i> コード
```ruby:lib/sample.rb
require "sample/version"

# TODO: YARD モジュールヘッダーを書く
module Sample
  # HOGE: カスタムタグ
  def hoge
    # FIXME: return hoge
    puts "hige"
    # OPTIMIZE: なんか最適化する
  end
end
```

```ruby:lib/version.rb
module Sample
  # TODO: YARD
  VERSION = "0.1.0"
end
```

### <i class='fa fa-play'></i> 結果確認
```sh
$ rake notes
lib/sample.rb:
  * [  3] [TODO] YARD モジュールヘッダーを書く
  * [  7] [FIXME] return hoge
  * [  9] [OPTIMIZE] なんか最適化する

lib/sample/version.rb:
  * [  2] [TODO] YARD
```

![demo.png](https://qiita-image-store.s3.amazonaws.com/0/43480/51b7746d-58a9-debb-0008-349e9bd061bb.png)

### <i class='fa fa-warning'></i> 問題点
~~この gem 、実は除外設定ができません。
例えば `bundle install --path vendor` とかしてると
vendor 配下の gem もすべて対象として検索してしまいます。~~

~~これに関しては Pull Request がありましたが、直す予定はない・・・
というよりもそもそもメンテする予定がないようです。~~


メンテナンスが再開され、プルリクが取り込まれたようです。 - 2018/09/11 追記

[pull 3 - fgrehm/rake-notes](https://github.com/fgrehm/rake-notes/pull/3)

## <i class='fa fa-graduation-cap'></i> まとめ
もし Rails 以外で `rake notes` の機能が欲しくて、継続してメンテナンスする気があって、
使いたい人もいっぱいいるなら作ると喜ばれるかもしれませんね。

「アノテーションコメントを残すぐらいなら、Issue化したほうがいいよ」 
的な意見もありそうだし、どうなんでしょうね。
初めて使うGitHub

自分が忘れた時用にGitHubのコマンドラインからコードをアップロードするやり方についてまとめます。

自分の解釈なのでプロから見たらツッコミどころ満載だと思います。


GitHubとは？


GitHubというのはそもそもチーム内でコードを共有するためものらしくて、リモートリポジトリというところで共有するみたいです。自分のパソコンにはローカルリポジトリが設定されています（します）。

なので、ローカルリポジトリからリモートリポジトリへアップロードする。リモートリポジトリからローカルリポジトリへダウンロードする。ことができれば使えると言えるようなものでしょう（笑）。


やり方


まずGitHubにサインインし、NewRepositoryに名前をつけてPublicに公開。これでリモートリポジトリはできました。

コマンドラインに
　＄　git　init　
と打つと、そのディレクトリ内のファイルはローカルレポジトリに移すことができるようになります。

　＄　git add <ファイル名.拡張子>

この段階では、ローカルリポジトリに移す前段階のインデックスに移されているので、

　＄　git commit -m "add new file"

これで、インデックスから新しいファイルをローカルリポジトリに移せました。
あとは、どこのリモートリポジトリに移すのかを

　＄ git remote add origin https://github.com/sample/sample.git

でURLを指定してあげて、

　＄ git push origin master

として、GitHubアカウントのIDとPASSWORDに答えればアップロード完了です。
取り出すときは

　＄ git clone <url>

で大丈夫だと思います。まぁ最悪ホームページ行けばいいやと思ってます。
Function Calling Convention (AArch64)

今回はAArch64の関数呼び出しにおける規約のメモ書き。
#汎用レジスタ(整数型？)
##x0-x7
引数/戻り値
##x8
戻り値が構造体等の場合に使用される？
##x9-X15
一時的なレジスタ？
Callee Saveなレジスタでなさそうなので、呼び出される側で元の値を保持する必要はない(と思われ)。
##x16-x27
よく分かりません。
##x18
プラットフォーム依存っぽい。TLSとか？
##x19-x28
Callee Saveなレジスタなので、呼び出し側の値を保持する必要がある。おそらく呼び出される側が関数の処理の先頭でpush、終わりにpopしないといけない。
#SIMDレジスタ(浮動小数点型も含む？)
##v0-v7
引数/戻り値
##d8-d15
Callee Saveなレジスタ。
##v16-v31
Callee Saveなレジスタではなさそう。
#参考
http://www.slideshare.net/YiHsiuHsu/introduction-to-armv8-aarch64-54214607
Firebase Storageのファイルを定期的に自動で削除する

アップロードされてから日がたっているファイルなどを削除したいと思う場面があると思うので買いておきます。

# Firebase StorageはCloud Storage
Firebase StorageはGoogle Cloud Platformの Cloud Storageが使われています。
なので、[オブジェクトのライフサイクル](https://cloud.google.com/storage/docs/lifecycle)という機能を使って削除します。


# gsutilコマンドのセットアップ

クイックスタート: gsutil ツールの使用
https://cloud.google.com/storage/docs/quickstart-gsutil

を見てもいいと思いますが、 Google Cloud Shellを使うのが便利です。

# lifecycle_config.json の作成
`lifecycle_config.json` には　何日経過したもの、何年以降のファイルを削除すると言ったことを記述していくファイルです。

```bash
$ tocuh lifecycle_config.json
$ vi lifecycle_config.json
```
下記のいくつかのサンプルを置いておきます。

## 3日以上たったファイルを削除する

```json
{
  "lifecycle": {
    "rule":
    [
      {
        "action": {"type": "Delete"},
        "condition": {"age": 3}
      }
    ]
  }
}
````

## 2016年11月に作成されたファイルを全て削除する
```json
{
  "lifecycle": {
    "rule":
    [
      {
        "action": {"type": "Delete"},
        "condition": {"CreatedBefore": "2016-12-01"}
      }
    ]
  }
}
````

>CreatedBefore: この条件は、オブジェクトが指定の日付（UTC）の深夜より前に作成されていると満たされます。

と書いてあるので、12月1日の深夜より前に作成されているファイルが削除されます。

# ライフサイクルを有効にする

```bash
$ gsutil lifecycle set lifecycle_config.json gs://bucket_name
Setting lifecycle configuration on gs://bucket_name
```

`bucket_name` には自分のバケット名を入れます。これはFirebaseのコンソールからでも見れます。

 <img width="934" alt="スクリーンショット 2016-12-15 23.14.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/62429/bcfbe6c0-b870-5cf8-da64-ca807505386a.png">

get コマンドで確認してみると、ちゃんと設定されていることがわかります。

```bash
$ gsutil lifecycle get gs://bucket_name
{"rule": [{"action": {"type": "Delete"}, "condition": {"age": 3}}]}
```
「発売記念開催！GR-CITRUSでIoTワークショップ」参加 [1/2]

#「発売記念開催！GR-CITRUSでIoTワークショップ」参加記

2016年11月19日(土)に開催された[「発売記念開催！GR-CITRUSでIoTワークショップ」](http://gadget.renesas.com/ja/event/2016/nov/citrus_workshop.html)（東京会場）に参加してきた。

参加してみようと思ったのは次のことから

- GR-CITRUSが小さく、Wi-Fi＋microSDアダプタ(WA-MIKAN)をドッキングさせるができる
- Ruby(mruby)でプログラミングできる

Paspberry PiやBeagle Bone Blackなどでは主にPythonを使っており、そちらの方が慣れているのだが、mrubyにも興味があり機会を待っていたのだ。

***

##ワークショップの会場へ

がじぇるねのイベントに参加するのは初めて、会場（ルネサス半導体トレーニングセンター）のある豊洲フォレシアに入り担当の方から渡されたカードをゲート（≒自動改札）にタッチし、エレベータで上の階へ

会場はセミナールームらしくたくさんの机とイスが並んでおり、空いていた席につく。ノートパソコンは取り出したところで机にテーブルタップがないことに気付き、テーブルタップのある机に移動した。室内のWi-Fiが利用可能で、プロジェクタで映し出されたパスコードを入力する。そして、GR-CITRUSのセットとUSBケーブルを借り、ワークショップの準備が整った。

![20161119-140147.JPG](https://qiita-image-store.s3.amazonaws.com/0/112480/fc3cb72a-9dfd-8319-571b-ba73cf19ed68.jpeg)
▲GR-CITRUS（上）とWA-MIKAN（下）のセット
***
##ワークショップ開始

ワークショップは[「GR-CITRUS IoTワークショップ 進行(2016/11/19)」](http://japan.renesasrulz.com/gr_user_forum_japanese/b/weblog/archive/2016/11/19/gr-citrus-iot-2016-11-19.aspx)に従って進んでいくとのこと

###1.プログラミング環境セッティング(無線LAN、Rubicセットアップなど)　

手順は[GR-CITRUS 特設 Rubicではじめよう!(Ruby編)](http://gadget.renesas.com/ja/product/citrus_sp1.html)を参照

MacBook ProにあらかじめChromeをインストールしておいたので、Rubic(Chromeアプリ)をインストール

![20161119-141707.JPG](https://qiita-image-store.s3.amazonaws.com/0/112480/5eae3276-88fd-9a3b-d327-1df3dc8106f1.jpeg)
▲GR-CITRUSをUSBケーブルで接続、LEDが点灯したのでGR-CITRUSのファームが起動したことがわかる

**ボードとポートの指定でつまづく**

接続先の選択肢に「/dev/tty.usbmodem1.1 」が出てこない…

USBデバイスがあることすら認識されていないようだ。抜いたり挿したり、USBポートを変えてみたり、再起動してみたりといろいろやってみたけどダメ

GR-CITRUSの不良？も疑い、交換してもらったのだが、それでもダメ

つながらなくてじたばたしていたとき、ワークショップは[1.a.Rubyではじめるプログラム](http://gadget.renesas.com/ja/product/citrus_sp1a.html)に進んでいた

どんどん遅れていく…

バッグの中にモバイルバッテリーと一緒にUSBケーブルを入れていたことを思い出し、試しにケーブルを交換してみる

でた！

ケーブルのせいだったのか、借りたケーブルの線が細かったからだろうか？

**遅れを取り戻そう**

ここから遅れを取り戻すべく、急いで作業を進める
***
###[1.a.Rubyではじめるプログラム](http://gadget.renesas.com/ja/product/citrus_sp1a.html)

Rubic上でLED点滅プログラムを入力し、転送

```
10.times do
    led 1
    delay 100
    led 0
    delay 100
end
```

無事、LEDが点滅した。

ようやく今日のメインテーマであるセンサデータの取得と表示へ
これは仕事でもやったことがあるので、お手の物である。

センサ、ブレッドボード、ジャンパ線を借りにいき、さっそく取りかかる。
***
###[1.b.Rubyでセンシング](http://gadget.renesas.com/ja/product/citrus_sp1b.html)

**フォトトランジスタを使った明るさの測定**

![20161119-153203.JPG](https://qiita-image-store.s3.amazonaws.com/0/112480/98acce92-d4ce-5fe8-d9d4-786c035316bd.jpeg)
▲GR-CITRUS単体をブレッドボードに挿して、フォトトランジスタを所定のピンに差し込み、USBケーブルをつなぐ


まだ遅れているので、プログラムをRubicにコピペ(^^;)


```
usb = Serial.new(0)
pinMode(14, 2) #INPUT_PULLUP
100.times do
    usb.println(analogRead(14).to_s)
    delay(100)
end
```

![20161119-153543.JPG](https://qiita-image-store.s3.amazonaws.com/0/112480/33e9ca52-255a-89dd-8312-7d1a9239203c.jpeg)
▲ウィンドウの下部に数値が表示された。センサを手で覆ったり離したりして変化を見る。明るい方が値が小さい。

（続く）
nginxなどのログでステータスコードをハイライトしながらtailする

# nginxなどのログでステータスコードをハイライトしながらtailする
下の例では `2xx` 以外のステータスコード（例では3桁の数字で両端にスペースがある文字列）をハイライトできる。

```
less -p " [0-1,3-9]{1}[0-9]{2} " /opt/nginx/logs/access.log
```

lessコマンドが起動したら、 `F` を押して `tail -F` のような挙動にする。
終了する際は `Ctrl+c` -> `q`
ESP8266のIO2でLチカ

[ESP8266/ESP-wroom-02 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/esp8266) の枠が空いているので調子こいて小ネタを投稿しています。。。

***

ESP8266でLチカする場合、モード設定用の IO0,IO2,IO15 は避けがちです。

しかし、起動後は普通のGPIOとして使えるので、使わないのは勿体ないです。

# IO2 に LED

IO2 に LED をつなぐと、IO2への出力でLチカすることができます。(IO2 → LED → 抵抗 → 3.3V とつなぎます。)

IO2にLEDをつなぐと、副作用(?)として、書き込み中に点滅してくれます。これは、IO2が2番目のUART出力ピンにもなっており、書き込み中に何か出力しているからのようです。

# IO0 のボタン

書き込みモードと、普通のブートモードの切り替えのために、IO0 にはタクトスイッチなどをつなぐことが多いと思います。

これも、ユーザープログラムから普通に入力として扱うことができるので、有効活用してみましょう。

# IO15 は？

IO15 は GND に落とさなければなりません。ここにLEDを（と抵抗を経由してGNDに）つないでみたのですが、GNDに引っ張り切れないのか、うまく動きませんでした。。。
（回路を工夫すれば使えないことはないのですが、ピンの空きがなくなった場合に考えましょう。。。）

# サンプルプログラム

サンプルとして、「ボタンを押してた時間が、点滅の間隔となる」というプログラムを作ってみました。

当然、IO2 に LED、IO0 にボタンをつないでいる前提です。

```cpp:blink2.ino
int interval = 100;

long prevMillis;
boolean prevButton = false;
boolean bLed = true;

#define PORT_LED 2
#define PORT_SW 0

void setup() {
  Serial.begin(74880);  // 起動時に合わせて74880bpsにする
  delay(10);
  
  pinMode(PORT_LED, OUTPUT);
  pinMode(PORT_SW, INPUT_PULLUP);
}

void loop() {
  boolean sw = (digitalRead(PORT_SW)==LOW);  // 押されてる:true  離されている:false
  long t = millis();

  if ( sw ) {
    if ( !prevButton) {
      // 押された
      Serial.println("BUTTON_DOWN");
      digitalWrite(PORT_LED, LOW);
      prevMillis = t;
      prevButton = sw;
    }
    // else 押され中→なにもしない
  }
  else {
    if ( prevButton ) {
      // 離された
      Serial.println("BUTTON_UP");
      digitalWrite(PORT_LED, HIGH);
      interval = t - prevMillis;
      prevMillis = t;
      prevButton = sw;
      boolean bLed = false;
    }
    else {
      // 通常時
      if ( prevMillis + interval < t ) {
        bLed = !bLed;
        Serial.println(bLed ? "LOW" : "HIGH");
        digitalWrite(PORT_LED, bLed ? LOW : HIGH);
        prevMillis = t;
      }
    }
  }
  delay(10);  // チャタリング対策とか
}
```
【Zsh用】省略コマンドを自動で作成してくれるシェルスクリプト

# Zshにログインしてからフォルダまでの移動が面倒
普段RailsやPHPなどのバックエンドからHTML/CSSなどのフロントエンドまで広くWebアプリケーションの開発をしております。
色々なプロジェクトに関わると、フォルダを探すのも面倒になってきます。
私は、普段コマンドラインから移動してopenコマンドなどを使用してフォルダを開くことが多いので、aliasコマンドを使って簡単に移動できるようにしていました。
それすらも面倒になったのでシェルスクリプト書きました。

# こちらが本体です
私は下記のスクリプトを/usr/local/bin/build_aliasという名前で保存して使用しています。

```zsh
#!/usr/bin/env bash
build() {
  ALIAS_NAME="$1"
  DIR_PATH="$2"
  SYNTAX="alias $ALIAS_NAME='cd $DIR_PATH' # Added from build_alias"
  echo $SYNTAX
  echo -n "Is this OK to append to your zshrc? [y/n]: "
  read answer
  if [ "$answer" == "y" ]; then
    if echo $SYNTAX >> ~/.zshrc; then
      echo "Successfully Added!"
      echo "# ============================================================================ #"
      echo "# Now, you need to reload your .zshrc by doing 'source ~/.zshrc' to use alias  #"
      echo "# ============================================================================ #"
    else
      echo "Failed..."
      echo "# ============================================================================ #"
      echo "# You need to check if ~/.zshrc is exists.                                     #"
      echo "# ============================================================================ #"
    fi
  else
    echo "Aborted!"
    echo "This is your syntax:
  $SYNTAX"
  fi
}

if [ "$1" = -* ] ; then
  echo "-"
else
  case $# in
    0)
      build $(basename "$PWD") "${PWD/#$HOME/~}"
      ;;
    1)
      build $1 "${PWD/#$HOME/~}"
      ;;
    2)
      build $1 "${2/#$HOME/~}"
      ;;
    *)
      echo "0..2 Arguments Accepted, but assigned $#"
      ;;
  esac
fi
```

# 使い方

## パターン１
```
build_alias
```
これだけで使用する場合、現在のディレクトリ名が省略名、移動先が現在のディレクトリになります。

```
alias currentDir='cd ~/Documents/git/folder/currentDir' # Added from build_alias
```

## パターン２
```
build_alias aliasName
```
１つ引数をわたすと、省略名を指定でき、移動先がパターン１と同じく現在のディレクトリになります。

```
alias aliasName='cd ~/Documents/git/folder/currentDir' # Added from build_alias
```

## パターン３
```
build_alias aliasName /directory/to/add/alias/for
```
２つ引数をわたすと、省略名と移動先を両方指定できます。

```
alias aliasName='cd /directory/to/add/alias/for' # Added from build_alias
```

# 作ってみた感想
楽しかった。
でも、シェルスクリプトを書いたのは２回目くらいなので内容、構文含めてご指摘いただけると幸いです。
２０１６年度東京大学入試問題数学（文系）第１問をだいたいPythonを使って解く

 この記事は[機械学習に必要な高校数学やり直しアドベントカレンダー Advent Calendar 2016](http://qiita.com/advent-calendar/2016/math_for_ml)の１４日目の記事です。
１日遅れの公開になってしまって申し訳ありません！！

それに時間が足りなくて結局、第一問のみしか解けませんでした…！
徐々に続きを公開していきたいです。

それではどうぞ！

# はじめに
　
　こんにちは、[subaru](https://twitter.com/sak_tech?lang=ja)と申します。
この度は、数学力もましてやPython力もそこそこ低いにも関わらず…無謀にもタイトルのように東大数学に挑戦してみました。
　
　高校数学といえば東大の問題解ければいいんじゃないの？という、軽い気持ちでやってみようとしたものの…高校時代に真面目に数学をやらなかったことをいまさらながら後悔しております。

　困難なものほど乗りこえがいがあるぜ！ってことで。なんだかんだでPython使って解けることの楽しさに目覚めるきっかけとなりました。Python最高！

　結果的に、数学的にもPython的にも中途半端なゆるふわな記事になりました。

# 謝辞

　この記事の元ネタ（お気づきの方もいらっしゃるかと思いますが）として、以下の記事を参考にしました。

- [2015年センター試験数学IAを全てプログラム(Python)で解く](http://qiita.com/Akai_Banana/items/b328fe0116d248127a36)
- [2015年センター試験数学ⅡBをPythonで解く](http://qiita.com/massa142/items/b224a07c1b33e9a39cd8)

とても参考になりました。執筆された[Akai_Banana](http://qiita.com/Akai_Banana)さんと[massa142](http://qiita.com/massa142)さんにお礼申し上げます。

また問題文は以下のサイトから引用させていただきました。
- [大学入試 数学 電子図書館 東大数学 過去問ライブラリー](http://www.densu.jp/)


# 使用するもの

引用元の記事とレギュレーションを揃えるという意味で、今回用いるライブラリは以下のようになります。

- Python (3系)
- [Scipy.org ](http://www.scipy.org/)にのっている科学計算ライブラリ

# 第一問
> 座標平面上の３店P(x,y),Q(-x,-y),R(1,0)が鋭角三角形をなすための(x,y)についての条件を求めよ。また、その条件をみたす点P(x,y)の範囲を図示せよ。


点と座標に関する基本問題ということで。鋭角三角形の成立条件についての問題です。
こちらは図形としてではなく、ベクトル（代数ベクトル）として解いてしまいましょう。
ベクトルの内積は余弦定理に変換することができますので、これを用いましょう。

詳しくはこちら
・[ベクトルの内積を用いた余弦定理の証明](http://mathtrain.jp/vectoryogen)

余弦定理から、
> ベクトル内積 > 0

となれば、鋭角三角形だといえます。
これをPythonで書いてみましょう。

```python
import numpy as np
import sympy as sy
from sympy import Symbol, init_printing, simplify, solve, Eq, Or
init_printing()
# x,yを定義する
x = Symbol('x')
y = Symbol('y')
# 点をプロットする
P = np.array([x, y])
Q = np.array([-x, -y])
R = np.array([1, 0])
# ベクトルを定義する
PQ = Q-P
PR = R-P
# ベクトル内積を求める
PQ_PR = np.dot(PQ,PR)
PQ_PR > 0
```

```math
-2x(-x+1)+2y^2 > 0
```
```math
x^2-x+y^2 > 0
```
```python
# ベクトルを定義する
PQ = Q-P
PR = R-P
# ベクトル内積を求める
PQ_PR = np.dot(PQ,PR)
PQ_PR > 0
```
```math
2x(x+1)+2y^2 > 0
```
```math
x^2+x+y^2 > 0
```
```python
# ベクトルを定義する
RP = P-R
RQ = Q-R
# ベクトル内積を求める
RP_RQ = np.dot(RP,RQ)
RP_RQ > 0
```
```math
-y^2+(-x-1)(x-1) > 0
```
```math
x^2+y^2-1 < 0
```

あっさりと式を導出することができました。あとはこれらを図示しましょう。
```python
from sympy.plotting import plot, plot_implicit
plot_implicit(Or(Eq(QP_QR, 0), Eq(PQ_PR, 0), Eq(RP_RQ, 0)),(x, -2, 2), (y, -2, 2))
```
![image](https://qiita-image-store.s3.amazonaws.com/0/71907/37a40341-659d-27cb-0eae-22d571804d85.png)

※不等式の範囲を図示する方法がわかりませんでした･･･。どなたかわかれば教えていただきたいです。

というわけで、3つの式を満たす部分（小円の外側かつ大円の内側）が範囲となります。
なんとなく解けたっぽいので、つぎいきましょう！つぎ！

# 第二問
> A,B,Cの３つのチームが参加する野球大会を開催する。以下の方式で試合を行い、２連勝したチームが出た時点で、そのチームを優勝として大会を終了する

>(a) 1試合目でAとBが対戦する
>(b) 2試合目で,1試合目の勝者と,1試合目で待機していたCが対戦する
>(c) k試合目で優勝チームが決まらない場合は,k試合目の勝者とk試合目で待機していたチームがk+1試合目で対戦する。ここではkは２以上の整数とする。なお、すべての対戦において、ぞれぞれのチームが勝つ確率は1/2で引き分けはないものとする

このまま、CodeIQあたりで出題されてもおかしくなさそうな問題ですね。

>(1) ちょうど5試合目でAが優勝する確率を求めよ

pythonでコード書いてたらタイムオーバーとなったので、ここまでにしてます‥。



## 参考文献

- http://programming.blogo.jp/python/sympy/
リアルタイムサーバーのプトロコル設計 到達保証編

## 概要

前回の記事で 「TCP コネクションの切断をまたいで到達保証・順序保証をつける」 という機能があることを書きましたが今回はその話をしたいと思います.


## 背景

前回書いた通り通信には主に TCP を使用しているため, TCP コネクションが確立されている限り通信の到達と順序の保証はされています.
しかし, 今回のサーバーのターゲットはモバイル端末のため, 電波状況やOS/アプリの挙動により短時間のTCPコネクション断は十分に考えられます.

ゲームの通信を設計する上でこれらを加味した上で処理を継続するように書くのは非常に面倒なため, 低レイヤーで吸収する必要があります.


## 到達を保証する

### 返事とリトライ

通信は基本的に失敗します.
原因はハード・ソフトに限らずあらゆる事情により送った通信が届かないことは常に起こります.

![スクリーンショット 2016-12-15 8.29.24.png](https://qiita-image-store.s3.amazonaws.com/0/14510/50da3610-d27a-9e09-ca64-81303bf77376.png)

手紙と一緒ですね. メッセージを送っただけでは届いたのかわからないのです.
ではどうするかといえば, 送った相手から返事をもらえば届いた事がわかります.

![スクリーンショット 2016-12-15 8.29.47.png](https://qiita-image-store.s3.amazonaws.com/0/14510/3d093369-100a-904d-9285-547a267250e6.png)

返事がこなかったら届いてないはずなので, 返事が来るまで送り続けます. (リトライ)

![スクリーンショット 2016-12-15 8.34.59.png](https://qiita-image-store.s3.amazonaws.com/0/14510/65eb72f0-217f-7896-4b83-5b6167778bfd.png)

(送信側が諦めた時が送信失敗です)

### 問題

この方法は一見問題ないように見えますがいくつか問題があります

### 受信側に複数の同じメッセージが届く可能性がある

![スクリーンショット 2016-12-15 13.38.31.png](https://qiita-image-store.s3.amazonaws.com/0/14510/95150202-2982-0d4e-ea6f-9aad24da0418.png)

通信は常に失敗する可能性があるので, 当然行きが成功しても返事が届かないという事がありえます.

返信がないと送信側は成功を確認できないため, 自分の送信が届かなかったのか, 返信が届かなかったのかを区別する事ができません.
なので受信側にはメッセージが複数回到達する事を前提としたロジックが求められます.

### 順序を保証すると速度が出ない

![スクリーンショット 2016-12-15 21.49.50.png](https://qiita-image-store.s3.amazonaws.com/0/14510/3659476b-7a61-5c99-da63-8fe08b18ff9f.png)

1通のメッセージを送るたびに返事を待っていると送信速度は極めて劣化します(送信側は返信が来るまで待つしかできません)

![スクリーンショット 2016-12-15 21.51.38.png](https://qiita-image-store.s3.amazonaws.com/0/14510/1e71652c-e49a-11f9-8b62-69c667eca19e.png)

そこで返事を待たずに送り続け, 返事が返ってこなかったメッセージだけ再送するようにすると今度はメッセージの順序が一定になりません.

この例では Message A, Message B の順序で到達する事が期待されているのに実際に到達する順序は Message B, Message A となって到達しています.


## 到達順序を保証

当初は前述の方法(のアレンジ)を採用して到達保証は行っていましたが順序保証をしていませんでした.
しかし順序保証が無いとゲームの通信処理で色々問題が出たため, 順序保証を行う事にしました.

### カウンター

順序を保証するという事は, メッセージの順番を管理する必要があります.

そのため順序保証をつけるメッセージ全てに1ずつくりあがる数字を付与しました.

![スクリーンショット 2016-12-15 22.16.26.png](https://qiita-image-store.s3.amazonaws.com/0/14510/d5a50337-cce3-e142-4b48-3346c09b57c1.png)

送信者は必ず順番にメッセージを送ってくるはずなので, 受信者は受信したメッセージ番号が飛んだら最後に正しく受信できた番号を送信側に伝えます.

それを受け取った送信者は受信が確認できたメッセージの次の番号から再送信を開始します.

この場合, 1つ1つのメッセージに対して返信をするのは無駄なので問題があった時だけ返信するようになります.

### 全てのメッセージを受信できない状態でエラーを検知できない

![スクリーンショット 2016-12-15 22.26.42.png](https://qiita-image-store.s3.amazonaws.com/0/14510/fce0c0f5-df99-ad09-941c-f926d348df7d.png)

しかし個別のメッセージの受信応答をなくすと今度は全てのメッセージの到達が失敗している場合にどちらも失敗している事に気づけません.
そのため受信側は何もメッセージの受信がなくても定期的に最後に受信成功した番号を送信します.

![スクリーンショット 2016-12-15 22.18.35.png](https://qiita-image-store.s3.amazonaws.com/0/14510/6a279faf-6492-e3ef-e463-4381aec8700d.png)

これで途中が抜けても, 全ての送信が到達に失敗しても検知する事が出来るようになりました.
また, 定期的に必ず最新の受信番号が来るはずなので一定以上受信番号の通知がこなかったらこれもエラーとして扱います.

### 複数回受信

ちなみに当然, 送信側が再送信を行っている以上, 受信側は同じメッセージを複数回受け取りますが受信側が最後に受信したメッセージ番号の管理を正しく行っていれば２重に受け取ったメッセージなのかを判別する事ができるのでこのプロトコルの内部で2重に処理する事を防止する事が可能になります.

## まとめ

通信において到達保証・順序保証を実現する手段を紹介してみました.
TCP は内部で近い事をもっと高度に行ってくれているため TCP の上で通信する限りこれらは意識する必要がありません.

UDP を使用したり, TCP コネクション切断をまたいで保証をつけようとするとこう言った事を考慮する必要が出てきます.
TCP の実装などを見るとすごく参考になるのでこう言った事に興味が有る場合はオススメです.
(MQTTのQoSなども面白いです)
Gebで別タブ遷移を自動化する

# はじめに

これは[Geb Advent Calendar 2016](http://qiita.com/advent-calendar/2016/geb)の15日目の記事です。
前日は[Gebの名前の由来を中の人に聞いてみた](http://qiita.com/PoohSunny/items/af2d1a495a9793c5e288)でした。

今日は別タブが絡む場合の自動化の話です。

# 別タブを開くときの自動化
ありますよね。プライバシーポリシーが別タブで開くとか。そういうものを自動化するときの話です。

## すでに開いているタブにスイッチするとき
`withWindow()`というのが用意されていまして、こんな感じでかけます。

```groovy
Browser.drive {
    go()
    $("a").click()
    withWindow("myWindow") {
        assert title == "Geb - Very Groovy Browser Automation"
    }
}
```

## 新たに開くタブにスイッチするとき
こちらはそれ用に `withNewWindow()`

```groovy
Browser.drive {
    go()
    withNewWindow({ $('a').click(), wait: true}) {
        assert title == 'Geb - Very Groovy Browser Automation'
    }
}
```

最初のクロージャーで、そのタブを開くアクションを指定します。
その後の引数でオプションを指定できます。

## オプション
### close
trueにすると別タブを開いた後の処理が終わった後にそのタブを閉じる

### page
ここをセットすると、別タブを開く直前にページオブジェクトを引数で指定したものに切り替えてくれます。別タブで複雑な操作するときに便利！

### wait
これは`withNewWindow()`だけで設定できます。ページを開く処理を待ってくれます。waitの値にはいろいろなものが指定できます。詳しくは[こちら](http://www.gebish.org/manual/current/#content-dsl-wait)

## 注意点
この`withWindow()`, `withNewWindow()`自体はvoidのメソッドなので、Spockのthenブロックの中で利用すると意図せずこけたりします。最初は気づきにくいので気をつけてください。

## 参考
- http://www.gebish.org/manual/current/#working-with-multiple-tabs-and-windows


# まとめ
Gebだと別タブの自動化も楽。
【ほうれんそう】平凡なエンジニアが毎日定時ダッシュをキメるためにやった5つのこと


「定時ダッシュしたいけど難しいかなー。」
「あー。行きたかった勉強会あったけど仕事が終わらないー。」
「うわ、これ営業さんに確認しないといけない奴じゃん！」

一度はこのようなことを思ったことがある方は多いのではないでしょうか？

一概には言えないですし、ケースバイケースと言われたらそれまでですが
定時ダッシュをキメつつPJをオンスケでリリースした経験や、
定時ダッシュをキメながらも営業さんからお礼を言われたことがある経験をもとにして簡単にではありますが纏めてみました。

皆さんの参考になれば嬉しいです。

以降からやたら「ほうれんそう(報告/連絡/相談)」が出てきます。
ご了承ください。

#### 想定しているエンジニア
 - 定時ダッシュキメたいけどなかなかキメられないエンジニア
 - 平日19時や20時の勉強会に参加したいエンジニア
 - 自社サービスだけどもB2B2CもしくはB2Bを運用しているエンジニア

#### 想定している会社
 - スタートアップではなくある程度規模があり部署の体制もある程度出来てる会社

#### 想定しているケース
 - 営業(他のPJも抱えて多忙)と一緒に外部の企業と一緒にAPI連携やデータ連携を行うケース
 - リリース日兼プレスリリース日が決まってるケース
 - NDAなどが結ばれた後でリスケ出来ないケース
 - やることは決まっているがマネージメントする人がいなく作業自体も一人でできそうなケース


# 平凡なエンジニアが毎日定時ダッシュをキメるためにやった5つのこと

## 1.コードをいきなり書くのではなく必要なことの準備/確認をする

やること(仕様がある程度固まっている状態)が決まったり、
リリース日などが決まってるとすぐにコードが書いた方が良いように思われますが、
僕の場合はいきなりコードを書いた場合の方が詰まることが多かったです。
(単純にコード書く力が足りてないってことでもりますが。)

なので僕は以下のようなことを準備/確認をしてからコードを書くようにしていました。

【自社だけで完結する場合】

 - ざっくりとした仕様の流れをメモする
 - 仕様や実装方法を有識者などに認識にずれが無いか確認する
 - 類似の実装が既にあるかどうかの確認する
 - 類似の実装がある場合、誰が担当したのかの確認する

【クライアントも巻き込む場合】

 - クライアントに確認したい事項の洗い出し
 - APIの連携だった場合、文字コードは何をするかをクライアントに確認する
 - こちらからクライアントへデータを送付する方法はAPIなのかフォームなのかを確認する
 - こちらが対応して欲しい内容や実装予定の仕様を準備する
 - 準備した仕様をクライアントへ確認して認識にずれが無いか確認する


## 2.口頭のほうれんそう、テキストのほうれんそうを使い分けてなんでもほうれんそうする

エンジニアの場合だとある程度、形が出来てテストが出来るタイミングで報告したい気持ちが強か方が多いと思いますが、僕の場合は今詰まってることだけでなく、予定より遅れてるかどうかの報告、クライアントに相談したいことなど
何でもほうれんそうをしていました。

そうすることでリリース日直前になってバタバタすることも
後からになって営業が認識していなかったということを防ぐことが出来ます。

また全てを口頭で行ったり、全てをコミュニケーションツールなどを使って
テキストのみで行ったりするのではなく、

**簡単なほうれんそうは口頭で、**

**重い話や言った言わない問題が起きそうな場合はテキストで**

といったように使い分けることで

ほうれんそうの負担を伝える方も伝えられる方も負担が無いように努めました。


## 3.営業さんに確認して問題無ければクライアントとも積極的にコミュニケーションを取る

クライアントと何かしらで連携をするとなった場合、大抵、クライアント側にもエンジニアチームがいます。
そのエンジニアチームと直接やりとりをすることで
伝言ゲームになったり、
営業さんとの解釈の違いで別のものを先方に作らせてしまう、
手戻りや二度手間が発生してしまうといったことを避けることが出来、
定時ダッシュをキメやすくなります。

## 4.自分が出来ないことは前もって出来る人にほうれんそうしておく

僕はデザイン(ログ作ったり、フロントをいじったり)が出来ないため
どうしてもデザイナーさんにお願いする必要がありました。
ただそのデザイナーさんも別のタスクがあったり忙しい方だったので
PJが始まったすぐのタイミングやキックオフ後すぐのタイミングで前もって

「〇〇というPJが始まることになってそのためにロゴが必要なのですが、僕が作ることが出来ないのでXX日の火曜日ぐらいににロゴの作成依頼をさせて貰いたいんですが良いですか？
忙しいとは思うのですがお願い出来ますか？」

「今XXXのタスクをされていて忙しいとは思うのですがXX日の火曜日ぐらいに少しフロントの修正をお願いしたいのですが可能ですか？」

と軽くお願いをしていました。

そうすることでいざ本当にお願いしたい場合にもスムーズに頼みやすくなりますし、

作業が不要になった場合はその時点でデザイナーさんに連絡することで

いきなりお願いして

デザイナーさんや自分がお願いしたい人を困らせることがなくなります。

ただ自分だけ定時ダッシュをキメることが無いよう、

余裕を持ってお願いすることが大前提になります。


## 5.営業さんが使いやすいツールでほうれんそうする

もし営業さんがメールメインであればどんなにslackを推したり、
slackだけでやりとりをしようとしても

「見てなかった」、「気付かなかった」ということになる可能性が高いです。

面倒臭いかとは思いますがここはぐっと堪えて営業さんが普段使ってるツールで
ほうれんそうをしてみてください。

特にどっちでも良いというのであればすぐに連絡がつく
slackなどを使うと定時ダッシュをキメやすくなります。

## 上記をやった結果

定時後の勉強会に参加したり、[自分で学生や非エンジニアの方にプログラミングを教えたり](http://morei.hatenablog.jp/)、[Apple Store Omotesandで女性に対してアプリのハンズオンセミナーを行ったり](http://japan.cnet.com/news/service/35087403/)
といった時間を確保する事ができました。

# まとめ

エンジニアがやることなの、それ？

と思われるものもありますがどれも特別に準備する事はありませんので、

定時ダッシュをキメたいエンジニアの方はぜひ、参考にして頂けると幸いです！
Excelの計算式をテキストファイルに出力してみた

－－－－－－－－－－－－－－
【補足】(2018/10/03)
一つのファイルで比較する。
(参考)winmergeでexcel比較をやってみた。「数式を比較する」も、よさそう。
https://qiita.com/mrrclb48z/items/3ba219b56b92f4d5a482
－－－－－－－－－－－－－－

（参考）【Excel VBA】セルの内容をテキストファイルに出力するサンプル
http://qiita.com/mono_cat/items/c7c80e3ece0a56505f7d

```vbnet
'Excelの計算式をテキストファイルに出力してみた
'おすすめのフリーソフトがあれば教えて下さい。
'(実行例)　4行  6列目: =MINVERSE(A4:D7)
'(参考)エクセルVBAでテキストファイルに書き出す最も簡単なプログラム
'http://tonari-it.com/vba-txt-print/
'
Sub aaa_Excelの計算式をテキストファイルに出力()
    Dim i As Long
    Dim j As Long
    Dim MaxRow As Long
    Dim MaxCol As Long
    Call 使用済みセル範囲の取得(MaxRow, MaxCol)
'
    Open ActiveWorkbook.Path & "\txt.txt" For Output As #1
    For i = 1 To MaxRow
        n = 0
        For j = 1 To MaxCol
        If Cells(i, j).Formula = "" Then
        Else
            n = n + 1
            Print #1, myFormat(i, MaxRow) & "行" & myFormat(j, MaxCol) & "列目: " & Cells(i, j).Formula
        End If
        Next
        If n > 0 Then Print #1, "'"
    Next
Close
End Sub

Sub 使用済みセル範囲の取得(MaxRow As Long, MaxCol As Long)
    With Range("A1").SpecialCells(xlLastCell)
        MaxRow = .Row
        MaxCol = .Column
    End With
End Sub

Function myFormat(i As Long, n As Long)
    myFormat = Format(i, WorksheetFunction.Rept("@", Len(n) - 1))
End Function
```
VSCodeでTypescriptの型定義ファイルを設定したときのメモ

## 概要

VSCodeにreactを使用するときの型定義ファイルを適用したときのメモ。

## 動作環境

* windows10
* node.js 6.9.2
* typescript 2.1.4

操作はvscodeで開いているプロジェクトのルートで行っている。

## typingsのインストール

```bash
npm install -g typings
```


## reduxの型定義ファイルのインストール

```bash
typings install dt~redux --global
```

## react, react-dom, react-reduxの型定義ファイルのインストール

```bash
typings install dt~react dt~react-dom dt~react-redux
```

## VSCodeを再起動

## 参考

[ TypeScript2.0での型定義ファイルの管理 TypeScript VSCode Node.js ][*1]
[VS CodeでTypecript 2.0 + D3.js v4を補完できるようにする（暫定対処）][*2]

[*1]:http://sourcechord.hatenablog.com/entry/2016/09/28/005836
[*2]:http://notchained.hatenablog.com/entry/2016/10/02/224747