OmniAICreator/Qiita-1.07M huggingface dataset:
シンプルさというのは実は銀の弾丸なのでは？


### 出囃子
---

進化的アーキテクチャというオライリーの本を読んでいます。

まだ最後まで読んでないですが、あと30Pぐらいまで来たので、アウトプットしようかと。

とりあえず、すごく良い本だと思います。

初心者には難しいかもですが、DDDやったりとかシステム開発で基盤部分を作ったことがある人なら、すんなり読めそうです。

### トレードオフについて
---

> トレードオフ（英: Trade-off）とは、一方を追求すれば他方を犠牲にせざるを得ないという状態・関係のことである。トレードオフのある状況では具体的な選択肢の長所と短所をすべて考慮したうえで決定を行うことが求められる。

[引用元：wikipedia](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AC%E3%83%BC%E3%83%89%E3%82%AA%E3%83%95)

> 開発者は利益についてはすべて理解しているくせに、トレードオフについてはまったくわかっちゃいない！

引用元：Rich Hickey（Clojureの作者）（本の中で引用されてました）


### フレームワーク使うとかまったくわかっちゃいない！！
---

* フレームワーク：呼び出されるもの（だからこそ合わせなくてはならず振り回される）
* ライブラリ：呼び出すもの

僕はフレームワークが嫌いです。

現実世界の要求に答えるシステムを作りたい場合、フレームワークは最終的に邪魔者になります。

進化的アーキテクチャの本では、フレームワークのせいでビジネス要求の10%が満たせないことを ***ラスト10%の罠*** と名付けていました。

フレームワーク自体が、ライブラリの集合体なのだから、自分が関わるシステムに必要な最小限のライブラリだけ使えばいいと思います。

今の現場で、JavaでSpringフレームワークを使っているのですが、DIが遅いせいで1ファイルのテスト実行に2分くらい掛かります（そのほとんどがDIの実行時間です）

フルビルドから起動して確認できるようになるまでは、10分くらい掛かります。

DI無ければ1分も掛からず起動できるはず。

バッチを書こうにも、SpringのDI動かしてからだとすぐに実行できないから、起動しているバッチサーバにAPIを投げるとか微妙なことをやらざるを得ない。

余談ですが、GoogleのSRE本では、人間は2秒以上時間が掛ると他のことを考え出すので、それ以内に実行時間を収めるのが理想と書いてありました。

起動時間には目を瞑っても、テストの実行くらいは2秒以内に収めたいですね。

### なぜ、フレームワークを採用するのでしょうか？聞いてみた
---

聞いてみたらオレオレフレームワークは悪じゃないか？とか、JavaではSpringフレームワークがデファクトでしょ？とか、そもそも今から変更できないとか、そんな話だった。

新規プロジェクトでも、開発期間短縮のため、既存プロジェクトをコピペで作るからSpringが自動導入されてます。

将来的に開発者がビルド時間で費やす膨大な時間の損失については、開発期間に含まれないらしい。

開発に時間がかかるシステム作ると開発期間が長くなるから、できるだけ開発期間が短くなるように設計されたシステムを作ったほうが良いと思います。

現実の変化よりも、システムの変化が遅い場合、何を開発しても出来たときには不要のものとなってしまいます。

Rubyでも、Rails Wayから外れた使い方が必要になった場合、すごく大変になるという話もチラホラ聞きます。

結局、フレームワークは開発元のビジネス要求に最適化されていて、どこかの会社で使おうとしてもマッチしないというだけの気もします。

### 考えることの重要さ、シンプルさの必要性
---

IBMのスローガンが「THINK」の理由

> 「我々は読んだり、聞いたり、討論したり、観察したり、考えたりすることで学習を続けなければならない。我々は考えることをやめてはいけない。それをやめることで、トラブルに陥るからだ。マレイ博士(ニコラス・マレイ・バトラー博士)は最近『世界中の問題のほとんどは、人々が考えることをやめなければ容易に解決できる』と述べている」

[引用：業界に多大な影響を与えた現存メーカー Thinkというスローガンを掲げたIBM](http://ascii.jp/elem/000/001/756/1756613/)

GoogleのSREの本を読んでも、[Rich Hickeyさんの記事](http://eed3si9n.com/ja/simplicity-matters)でも、シンプルさが重要と書いてあります。

今のビジネスに必要な最低限のライブラリで、システムを作るべきだと思います。

そうすれば、複雑な依存関係の解消作業とか、特定のライブラリのせいで言語のバージョンが上げられないとかそういうのが少なくなります。

今、自分のシステムに何が必要か？

どうやったらシンプルにできるのか？

それを考えて作って欲しいです。

モダンかどうか？とかみんな言っているから。。とか、そんな考えることを放棄した発言はしないでほしいです。

### 僕の考え
---

色々とWebシステム見てきたのですが、下記があるとすごく速く作れそうだなぁと。

■コード

- テスト駆動開発
- 静的解析ツールを初期段階から導入
- ソースコードのテンプレート自動生成ツール
- ドメインごとにロジックをまとめる
  - 外部境界（Controllerなど）以外は、コードを1フォルダにまとめる
- レイヤ化アーキテクチャ
- ビルドするなら分割ビルドなり、ビルドが2秒以内に終わる機構の作成
- データと実装の連携による処理の実現（これについては、うまくいったら記事でもあげようかと）
- JSON-RPCを使う（API設計からの開放）
  - これにより、ルーティングライブラリを使わなくて済む
- Javaならほぼ素のままのJettyを使ったアプリケーションサーバを作る
  - 起動の速さを重視

■DBとかミドルウェア

- Excelやスプレッドシートを意識したマスタデータの作成
- イミュータブルインフラストラクチャ（Dockerみたいなもの）

■組織

- Just In Time出来る組織か？
- そもそも作らないで代替品を用意できないか？とか考えられる組織か？

上げた例が多すぎて、シンプルじゃない気もしますね(；・∀・)

### まとめ
---

それぞれの現場で、状況や、メンバーや、組織体系など違うと思います。

その現場にできるだけうまくマッチするように、できる限り良いトレードオフしたシステムが作れたらいいなぁと思います。

銀の弾丸は無いといいますが、***シンプルさというのは実は銀の弾丸なのでは？***とか、最近思ったので記事化してみました。
GASからBacklog apiで情報取得してVueで表示

# GASからBacklog apiで情報取得してVueで表示

## html表示するGASの部分
```
function doGet() {
  var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput
    .setTitle('GAS+Vue.js')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  return htmlOutput;
}
```
## html表示部分(index.html)
```
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <div id="app">
      <h2>{{ tocTitle }}</h2>
      <p>{{ tocDescription }}</p>
      <ol>
        <li v-for="list in lists"><a :href="list[1]">{{ list[0] }}</a>
          <span>{{list[1]}}</span>
          <span>{{list[2]}}</span>
          <span>{{list[3]}}</span>
          <span>{{list[4]}}</span>
          <span>{{list[5]}}</span>
          <span>{{list[6]}}</span>
          <span>{{list[7]}}</span>
          <span>{{list[8]}}</span>
        </li>
      </ol>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>
```

## vueの部分 .js 
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
google.script.run.withSuccessHandler(initializeVue).getSpreadsheetValues();

function initializeVue(values){
  values.shift();
  
  new Vue({
    el: '#app',
    data: {
      tocTitle: 'Backlog',
      tocDescription: 'hogehoge',
      lists: values
    }
  });
}
</script>
```

## GASバックログapi呼び出し部分
```
function myFunction() {
  var space_id   = 'bokeboek';
  var api_key    = "hogehogheogeho"
  var response   = UrlFetchApp.fetch("https://"+space_id+".backlog.jp/api/v2/issues?apiKey="+api_key);
 
  if (response.getResponseCode() != 200) {
      return false;
  }
  
  var spread_sheet_id   = 'XXXXXXXXX';
　　　　var target_sheet_name = 'hoge'
　　　　var target_sheet      = SpreadsheetApp.openById(spread_sheet_id).getSheetByName(target_sheet_name);
  
  //取得
  var issue_list = JSON.parse(response.getContentText());
  Object.keys(issue_list).forEach(function(id, idx) {
    const issue = issue_list[id]
    const row = idx + 2
    target_sheet.getRange(row, 1).setValue(issue.issueType.name)
    target_sheet.getRange(row, 2).setValue(issue.summary)
    target_sheet.getRange(row, 3).setValue(issue.assignee ? issue.assignee.name : '')
    target_sheet.getRange(row, 4).setValue(issue.status.name)
    target_sheet.getRange(row, 5).setValue(issue.priority.name)
    target_sheet.getRange(row, 6).setValue(issue.created)
    target_sheet.getRange(row, 7).setValue(issue.dueDate)
    target_sheet.getRange(row, 8).setValue(issue.updated)
    target_sheet.getRange(row, 9).setValue(issue.createdUser.name)
  })
}

```
RxJava, Retrofitの環境で、特定のHTTPステータスコードを扱ってみた

# 背景
今回は、任意のAPIをサーバに対して叩いた際に特定のHTTPステータスコードが返ってきた場合の実装方法を考えてみました。活用例としては、「アップデートしてね」表示やサーバメンテナンス画面の表示などだと思います。

※例として、「アップデートしてね」表示を行うことを想定します。

# 流れ
モバイル側でやることは以下のようになると思います。

1. 任意のAPIを叩く
2. レスポンスのHTTPステータスコードを取得し、特定のHTTPステータスコードであったら、それに応じた処理を行う

肝になるのは言うまでもないですが、2ですね。それぞれに関して説明します。

# レスポンスのHTTPステータスコードを取得する

[こちらの記事] (https://qiita.com/FumihikoSHIROYAMA/items/65d52aea1a9f324d347e)で記載されているように、subscribe()メソッドで特定の登録しているHTTPステータスコードかを判別する方法もありますが、この場合APIを追加するたびにhasError()メソッドを忘れずに記載する必要が出てきます。

**忘れずに**ということはなかなか難しいと思いますので、どこか1つのみに記載して、毎回勝手に確認を行ってほしいものです…。

そこで、以下のようにしました。

```kotlin
val builder = OkHttpClient.Builder().addInterceptor {
            val originalRequest: Request = it.request()
            val url = originalRequest.url().newBuilder()
                    .build()
            val request = originalRequest.newBuilder().url(url).build()

            val response: okhttp3.Response = it.proceed(request)
            // HTTPステータスコードの処理
            ApiSpecificErrorEvent.publish(response.code())

            response
        }
```

OkHttpClient.Builder()addInterceptor {...} 内でresponse.code()によって、HTTPステータスコードを取得して、特定の処理をさせるようにしました。

これによってAPIを追加するたびに処理を記載する必要はなく、一箇所のみに記載知ることで特定のHTTPステータスコードを扱う処理を行うことができました。

※最後は特定のServiceクラスにpub/subによってeventを飛ばして特定の処理をさせています。

# 最後に

ただ、こちらはメインスレッドではなくRxJavaの通信スレッドで行われていました…。
UIに対して操作するには適していない可能性が大ですのでもしどなたかいい案がございましたら教えてください…。


# 参考記事
Retrofitを使ったAPI呼び出しでリカバリ可能なHTTPエラーをどう扱うか問題
https://qiita.com/FumihikoSHIROYAMA/items/65d52aea1a9f324d347e
Retrofitを使ったOAuth再認証アプローチ
https://qiita.com/FumihikoSHIROYAMA/items/ac1beaeaa9b4baaed939
Retrofit 2 — Catch Server Errors Globally with Response Interceptor
https://futurestud.io/tutorials/retrofit-2-catch-server-errors-globally-with-response-interceptor
Python3 で用いる入力方法の具体性（sys.stdin）

# Python3で用いる入力方法
　プログラミング初心者を悩ませる関門として、データの入力が挙げられる。私も現在頭を抱えている。
入力の方法は主に以下の３点のようだ。（間違っている部分があるかもしれない）

・input
・import sys を行ったあとに、sys.stdin
・open

inputは比較的理解しやすいし、openもなんとなくわかるのだが、
問題はsys.stdinだ。ネットで調べてみてもイマイチよく分からない。
分からない最大の点が、どうやって特定の対象を認識して入力しているのかという所だ。
sys.stdin()の()の部分に対象のファイルを書くという事だろうか？
例えば、スクリプトの中にinputと書いてあれば、その度に入力データは変更できるが、
sys.stdinの場合は、スクリプトの中の文章を毎回書き換えないといけない？？

sys.stdinの方が、大量のデータを扱う場合は処理が早いという文章も見かけたので、使えるようになりたいのだが。

- 自分的解決↓

リダイレクトという概念をこれまで理解していなかったようだ。

具体的な標準入力についてよく分かり、リダイレクトについても分かりやすかった。
https://www.adminweb.jp/command/redirect/index4.html

（使う側と作る側の概念について分かりやすかった。
標準入力に対する理解も深まった。
https://qiita.com/angel_p_57/items/03582181e9f7a69f8168
）
Unity であらゆる C#(.NET) パッケージを使う（例：opencv）

# はじめに

こんにちわ、のんびりエンジニアのたっつーです。
[ブログ記事](https://www.fast-system.jp/unity-%e3%81%a7%e3%81%82%e3%82%89%e3%82%86%e3%82%8b-c-net-%e3%83%91%e3%83%83%e3%82%b1%e3%83%bc%e3%82%b8%e3%82%92%e4%bd%bf%e3%81%86%ef%bc%88%e4%be%8b%ef%bc%9aopencv%ef%bc%89/)にもしましたが便利だったのでQiitaにも記載します。

Microsoft がサポートする .NET のパッケージ管理である NuGet はみなさんご存知だと思いますが本パッケージマネージャーを Unity で使う方法があります。

もちろん Unity は Mono で動作していますが、.NET2.0用のライブラリが存在していればほぼそのまま使えます。

# NuGetForUnity

## .unitypackage をダウンロードします。

[https://github.com/GlitchEnzo/NuGetForUnity/releases](https://github.com/GlitchEnzo/NuGetForUnity/releases)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/b3b65174-b99c-971a-6ab3-06563e1947a0.png)

## Unityを開いて上記のパッケージをインポート

- Unityのアセットウィンドウに、～.unitypackageファイルをドラッグアンドドロップで追加します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/2e001957-65c0-b3e2-7756-070f104ff54a.png)

- すべてインポート
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/7aec8f94-5837-c63a-bd73-c3dc95e7a62f.png)

- パッケージのインポートが完了するとメニューに「Nuget」が追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/7eca2ec5-0423-a359-041a-91f1f38b893f.png)

## OpenCVSharp3 を追加

- メニューから「Manage NuGet Package」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/2ed0327f-5167-44a8-78d2-3ecc0e950077.png)

- 「OpenCVSharp3」を入力して「Search」で検索
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/1379ecc9-e8ac-7780-a327-c5addab06015.png)

- 検索したら、「Install」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/c7c6b0d3-94b4-ce59-4ec0-9de8caddd380.png)

- Assets に Packages フォルダが追加され、OpenCVSharp3が追加された事が確認できる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/140cd94b-7392-0ac6-d598-25454c7b5c9c.png)

[Unity 2018とOpenCvSharpで無料で顔認識までやってみる](https://ssssota.hatenablog.com/entry/2018/05/18/233135) さんでは、以下の記述があるのでお気を付けください。
> x64とx86のライブラリがぶつかるのでAssets/Packages/OpenCvSharp3-~~~~~/NativeDlls/のx86を削除

## スクリプトで参照

適当にスクリプトを追加して、「using OpenCvSharp」を using 出来るようになっており、実際の「Mat」変数などが使えるようになっています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/d19ed85a-c829-daba-22f3-ba71ee811624.png)

# 終わりに

Unity での C# は Mono で動作しているのですべてのパッケージが使えるわけではないですがライブラリのインポートなどに困っている方は一度使ってみてはいかがでしょうか。

[Unity であらゆる C#(.NET) パッケージを使う（例：opencv）](https://www.fast-system.jp/unity-%e3%81%a7%e3%81%82%e3%82%89%e3%82%86%e3%82%8b-c-net-%e3%83%91%e3%83%83%e3%82%b1%e3%83%bc%e3%82%b8%e3%82%92%e4%bd%bf%e3%81%86%ef%bc%88%e4%be%8b%ef%bc%9aopencv%ef%bc%89/)

*よければ ブログ「[初心者向けUnity情報サイト](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*
prototype



```
普通に使う

var User = function(name, age){
  this.name = name;
  this.age = age;
}

var taro = new User('太郎', 30)

console.log(taro);


prototypeを使う




```


継承

```


var User = function(){};

var Member = function(){};

var MemberB = function(){};



User.prototype.hello = function() {
  return 'aaaa';
}

Member.prototype = new User();


var taro = new User();

console.log(taro.hello())

```




4x5
Alexaスキル開発で簡単ディスプレイ対応

# 1. はじめに
2018年12月12日のEcho Show国内発送開始をうけ、Alexaスキルのディスプレイ対応のニーズが高まってきていることかと思います。今回はAlexaスキル開発中級者向けに、Alexaスキル開発で簡単ディスプレイ対応をお伝えしたいと思います。

- Alexaスキル開発中級者を対象としています。
- 対象：askコマンドを理解し、利用できること。

## 1-1. この記事を読んでできること
- **コマンドラインを用いて、ディスプレイ対応のAlexaスキルを作成できるようになる。**

## 1-2. 前提条件
今回は、以下の開発環境を前提条件としています、ご自身の開発環境に合わせて、記事を読みかえて頂ければと思います。

- ask cli コマンドの利用を想定。（参考：[Alexa Skills Kitコマンドラインインターフェース（ASK CLI）クイックスタートガイド](https://developer.amazon.com/ja/docs/smapi/quick-start-alexa-skills-kit-command-line-interface.html)）
- Windows10上のUbuntuコマンドラインの利用を想定。（参考：[Windows 10でLinuxプログラムを利用可能にするWSL（Windows Subsystem for Linux）をインストールする](http://www.atmarkit.co.jp/ait/articles/1608/08/news039.html)
- Windows10上の作業フォルダは、『c:\Alexa』となります。Ubuntuコマンドでは、『/mnt/c/Alexa』が該当します。

## 1-3. 情報源
Amazon公式のハンズオン（初級・中級）や、connpassなどでハンズオンイベントを開催してくださっているクラスメソッドさまのハンズオンを幾度となく受講することで得た知見を元に、本記事を作成いたしました。
ハンズオンを開催してくださっているご関係者の皆さまにお礼申し上げます。ありがとうございます。

# 2. AlexaサンプルZIPの入手
AlexaサンプルZIPを、こちら [the-seed-world.zip](https://s3-ap-northeast-1.amazonaws.com/handson.the-seed-world/the-seed-world.zip) からダウンロードしてください。

- ファイルサイズは、157KB程度です。

# 3. Alexaサンプルのデプロイ
1. AlexaサンプルZIPを、ローカル開発環境の任意のディレクトリで解凍してください。
2. 解凍後コマンドラインから、the-seed-worldディレクトリ内に移動し、同ディレクトリ内に『skill.json』ファイルが存在していることを確認してください。
3. コマンドラインから、以下のコマンドを実行し、Alexaスキルをデプロイしてください。

```shell:Ubuntuコマンドライン
#作業ディレクトリに移動（the-seed-worldディレクトリ内に移動してください）
$ cd the-seed-world

#スキルのデプロイ（skill.jsonと同じディレクトリ内でコマンド実行してください）
$ ask deploy
```
# 4. シミュレータおよび実機テスト

- 原則、以上の手順でディスプレイ対応済みのAlexaスキルが作成済みかつ、実行可能な状態となります。
- 動作確認として、Amazon Developer Portalテストシミュレータ、ディスプレイ無しEchoおよびディスプレイ有りEchoにて、動作確認をおこなってください。

# 5. おわりに
いかがでしたでしょうか？3分クッキング並みの内容となりますが、今回のサンプルをベースにみなさん独自のディスプレイ対応Alexaスキルの数が増えていっていただけると、幸いです。

- サンプルソースプログラムに不備がございましたら、コメントにてご連絡、ご指摘をどうぞよろしくお願い申し上げます。

2018/11/04 ぞの
GPUが熱くなって落ちる前に休ませるpythonプログラム

大した話じゃないんですが、この4 GPU system (1080Ti)
![gpu.jpg](https://qiita-image-store.s3.amazonaws.com/0/137970/92582a19-8d95-e907-9f34-cc1165ceb6ad.jpeg)
を４つを完全並列でフルに使ってpycudaで計算すると時々落ちるのです。開けっ放しにしたり置く場所を変えてたりしたんですが、やっぱり時々落ちる。どれか一つが落ちると再起動しないとならなくて面倒くさいので、この４つのGPUの最大温度を取得して、ある温度maxtを超えたら、settに落ち着くまで、sleepさせるパスタコードを書いたのでメモ。といってもnvidia-smiをsubprocessでよんでsleepさせるというなんかアレなコードですが、もっと良さそうな何かを知っていたら教えてください。

https://qiita.com/tomotaka_ito/items/1da001c98b46ecf28ec7

これが元になっています。複数GPUの最大温度がmaxtを越えてたら、sett度になるまでsleepさせ30秒ごとにチェックするという単純なコードですが意外とうまくいきます。



```python:gpucheck.py

import subprocess
import numpy as np
DEFAULT_ATTRIBUTES = (
    'index',
    'temperature.gpu',
)

def get_gpu_temperature(nvidia_smi_path='nvidia-smi', keys=DEFAULT_ATTRIBUTES, no_units=True):
    nu_opt = '' if not no_units else ',nounits'
    cmd = '%s --query-gpu=%s --format=csv,noheader%s' % (nvidia_smi_path, ','.join(keys), nu_opt)
    output = subprocess.check_output(cmd, shell=True)
    lines = (output).decode("utf-8").split('\n')
    lines = [ line.strip() for line in lines if line.strip() != '' ]

    return [ { k: v for k, v in zip(keys, line.split(', ')) } for line in lines ]

def getmaxgput_gput():
    a=get_gpu_temperature()
    gputemp=[]
    for i in range(0,len(a)):
        gputemp.append(float(a[i]["temperature.gpu"]))
    gputemp=np.array(gputemp)
    maxgput=np.max(gputemp)
    return maxgput

if __name__ == "__main__":
    from time import sleep 

    #### GPU HEALTH CHECK #######
    maxt=85.0 #max temperature C
    sett=40.0 #setting C
    sleeptime=30.0 #sec
    maxgput=getmaxgput_gput()
    if maxgput > maxt:
        print("Fever. Waiting for cool down of the fevered GPU. ")
        fever = True
        while fever :
            sleep(sleeptime)
            maxgput=getmaxgput_gput()
            print(maxgput,"[C]")
            if maxgput < sett:
                fever = False

```
家の内外からファイルを共有するならsshfsが楽であった件

# 結論
ファイルを家の内外から共有するならsshfsがいいんじゃね？って話です。

# はじめに
更新するの久しぶりすぎて困るレベルですが私は元気です。  
家のデスクトップ、ノートPC、研究室のPCとファイル共有する際にgoogleドライブなどを使っていたのですが、無料枠の１５GBじゃ満足できねえってことなりました。
なので、毎月2ドル？課金で100GB確保していたのですがそれでも足りねえって状況に見舞われました。  
そのため、家に転がっていた３TBのHDDとraspberry piを使ってなんとかファイル共有用のサーバーとして使えないかを考えました。

## 失敗編
最初はlinux＋window間のファイル共有をやってくれるsambaを使用するつもりでした。
（linuxとwindowsでなぜsambaを使うのかについては[こちら](http://www.atmarkit.co.jp/ait/articles/1612/01/news183.html)を。要はwindowsとlinuxでネットワークの共有のやり方が違うというお話）  
ただ、sambaはLAN内での使用を前提としており、WANに向けて公開する使用を想定されていません。実際やってみた記録が[こちら](https://meideru.com/archives/2052)  
ラズパイは家にあるため、外からつなぐことはできないというわけです。ノートPCにも家にあるときしかファイルを共有できず、外にいるときは100GBのSSDで戦う必要があるわけです。そのため、別の方法を考える必要があります。

## SSHFSについて
raspberry piをsshでつないでsambaの設定を研究室からいじっていたときです。

あれ？sshでファイルって転送できるんならファイルシステムいじれるんじゃね？

今の世の中自分が思いついたことは大抵誰かやっているはずです。そのためググってみると「[https://en.wikipedia.org/wiki/SSHFS:title]」なんてもんがあるじゃないか。
ふむ、sshでファイルシステムをいじって外からマウントする事ができる。sshでつなげることができているからすでに接続だけなら楽じゃないか。  
これでファイルを共有することにしました。windowsからの使用についてはこちらを[参考](http://www.rouge.gr.jp/~fuku/tips/win-sshfs/)（sshの接続はできているものとする）

### メリット
1. 設定が楽  
sshが外からつなげることができるなら特に設定をいじる必要がない（自分はセキュリティ的にsshのデフォルトポートが22だと危険なので、[参考リンク](http://www.itmedia.co.jp/enterprise/articles/0704/05/news010.html)いじることにしています）
2. 仲間内とのファイル共有もこれで行ける  
アカウントを作ってそれを伝えるだけでいけます。ファイルのアクセス権などはちゃんと設定してあげようね

### デメリット
1. winsshfsが動作が不安定な気がする
一度、raspberry pi を再起動などが原因で一度マウントが解除されるとタスクマネージャーからwinsshfsを止めないとマウントできない。
自分はbatファイルを書いて一度で再起動できるようにしています。

### まとめ
sshを外部からどうやってつなぐとかの話をカットしてしまいましたが、それについてはググるかまた機会あれば書くことにします。
外部からsshでつなぐことができているならお勧めのファイル共有方法だと思います。
共有サーバーのファイルの更新について監視し始めるようになったので次はそれについて書きたいと思います。
AtomでPlantUMLを利用する

ATOMでライブプレビューしながらPlantUMLを利用できるようにしてみました。

## 環境

- macOS High Sierra 10.13.6
- ATOM 1.31.2

## Atom

### Atomのインストール
[ATOMの公式サイト](https://atom.io/)からZIPファイルをダウンロードする。
ダウンロードしたZIPファイルを解凍し、`Atom.app`を`/Applications`配下に置くだけです。

### Atomの設定
以下2つのプラグインをインストールする。

- plantuml-viewer
- language-plantuml

## Graphviz

シーケンス図以外の図を描画するには、レンダリングライブラリであるGraphvizのインストールが必要です。
HomebrewでGraphvizをインストールします。

### インストール手順

```
$ brew install graphviz
Updating Homebrew...

==> Installing dependencies for graphviz: libpng, freetype, fontconfig, jpeg, libtiff, webp and gd
==> Installing graphviz dependency: libpng
==> Downloading https://homebrew.bintray.com/bottles/libpng-1.6.35.high_sierra.bottle.tar.gz
######################################################################## 100.0%
...（中略）...
🍺  /usr/local/Cellar/gd/2.2.5: 35 files, 1.1MB
==> Installing graphviz
==> Downloading https://homebrew.bintray.com/bottles/graphviz-2.40.1.high_sierra.bottle.1.tar.gz
######################################################################## 100.0%
==> Pouring graphviz-2.40.1.high_sierra.bottle.1.tar.gz
🍺  /usr/local/Cellar/graphviz/2.40.1: 500 files, 11.2MB
```

### インストール確認

```
$ dot -V
dot - graphviz version 2.40.1 (20161225.0304)
```


## Java

PlanuUMLはJavaで動くため、Javaランタイムのインストールが必要です。

### インストール手順

1. [Java SE Development Kit 8 Downloadサイト](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)にアクセスする。   
2. `Accept License Agreement`にチェックをいれる。
3. jdk-8u191-macosx-x64.dmg をダウンロードする。
4. 手順に従ってJavaをインストールする。

### インストール確認
```
  $ java -version
  java version "1.8.0_191"
  Java(TM) SE Runtime Environment (build 1.8.0_191-b12)
  Java HotSpot(TM) 64-Bit Server VM (build 25.191-b12, mixed mode)
```

## PlantUML Viewerの起動

`Command + Option + P` を押し、Viewerに描画されればOK。

### サンプル

```sample.pu
@startuml
:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
  A note can also
  be on several lines
end note

note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml
```
cf.) http://plantuml.com/use-case-diagram

### 実行結果
![スクリーンショット 2018-11-04 13.02.30.png](https://qiita-image-store.s3.amazonaws.com/0/63227/23eb99f1-dfb1-ca32-a41b-8b61767101cc.png)
rbenv で gem のコマンドが期待と異なる Ruby で動いてしまう

# なんのこと？

rbenv を使って複数バージョンの Ruby をインストールしているが，gem のコマンドがなぜか期待と異なるバージョンの Ruby で動いてしまう。

「gem のコマンド」というのは，rails gem によって使えるようになる rails コマンドとか，pry gem による pry コマンドとかのこと。

「異なるバージョンの Ruby で動く」というのは，例えば，デフォルトの Ruby バージョンを 2.5.3 にしてあるのに，`pry` して `RUBY_VERSION` を表示すると，`2.5.1` と表示される，といった具合。

## 環境

OS は macOS 10.11 および CentOS 7.5 の両方。

rbenv で Ruby 2.5.1 と 2.5.3 がインストールされており，

```
rbenv global 2.5.3
```

でデフォルトを Ruby 2.5.3 にしてある。

カレントディレクトリーに `.ruby-version` ファイルが存在せず（つまり `local` で他のバージョンが有効になっているわけでもなく），`rbenv shell` で一時的にバージョンを変えたわけでもない，

それから，rbenv-communal-gems を使って，Ruby 2.5.1 と 2.5.3 の gem は共通化してある。← たぶんここが一つのポイント

rbenv も rbenv-communal-gems も ruby-build も最新版にしてある。

RubyGems のバージョンは

```
gem -v
```

で，2.7.6 と出た。最新ではなかった。 ← ここもポイント

## 実験

gem のコマンドが期待と異なるバージョンの Ruby で動いてしまっていることをいくつかのコマンドで確かめてみる。

`pry` コマンドについては「なんのこと？」で既に述べた。

なお，念のためコマンドの実行前に `rbenv rehash` もしている。

### rails

最近の Ruby on Rails では，`rails new` で生成されるファイル群に，Ruby のバージョンが書かれている。

まずは Gemfile。ここには

```
ruby '2.5.1'
```

のように，Ruby バージョンを指定する行がある。やはり 2.5.1 になってしまっている。

次に，.ruby-version。これは，rbenv が「このディレクトリーではこのバージョンの Ruby を使うんだ」ということを知るためのファイル。`rbenv local X.X.X` を使うとこのファイルが出来るね。

なぜかこちらは

```
2.5.3
```

と正常だった。

### slimrb

`slimrb` コマンドは slim gem を入れると使えるもので，標準入力から得た Slim フォーマットのドキュメントを HTML（なり XML なり）に変換して表示してくれるもの。

まず

```
slimrb
```

でコマンドを起動し，

```
div = RUBY_VERSION
```

と入力し（改行も入れる），Ctrl+D で終える。

すると

```html
<div>2.5.1</div>
```

が表示される。やはり Ruby 2.5.1 だ。ふーむ

### irb と erb 

結論を先に書くと，irb と erb は正常だった。
これはもともと Ruby に入っているコマンドだからなのではないか（コマンドの格納されるディレクトリーが，後で入れた gem のものとは異なる）。

では，irb を。`irb` でコマンドを起動し，`RUBY_VERSION` を表示。`"2.5.3"` と出た。正常。

次に，erb。`erb` でコマンドを起動し，

```
<%= RUBY_VERSION %>
```

と入力して（改行も），Ctrl+D で終了。`2.5.3` と表示された。正常。

# 解決

いろいろ調べたが，Ruby バージョンが決定される仕組みがよく分からなかった。

そうこうするうち，既述のように RubyGems が最新版でないことに気付いたので，念のため新しくしておこうと，

```
gem update --system
```

とやった。念のため，

```
gem -v
```

でバージョンを確認。2.7.8 と最新になった。

これで正常になった。

原因は結局分からなかったが，ともかく RubyGems を最新にすることで直った。

RubyGems の [History.txt
](https://github.com/rubygems/rubygems/blob/master/History.txt) も眺めてみたけど，英語力が乏しいためか，関係ありそうな記述は見つけられなかった。

この件ではけっこうな時間を無駄に費やしてしまったけど，何だったんだろ〜！
CSSで使える色名

# TL;TD;
スタイルシートでは色は名前を使ったほうが直感的に分かりやすい。
しかし、いっぱいあるし一覧だとわかりにくい名前もあるので自分用にまとめてみた。
すべてのブラウザで使える一覧は[W3C school.comのHP](https://www.w3schools.com/colors/colors_names.asp)にあります、一覧にないものもリストアップしてあるのでブラウザによっては色が表示できないかもしれません。

## 種類別一覧
### 色の三原色と光の三原色
- red
- blue
- green
- cyan (aquaでもOK、こっちのほうがイメージしやすい)
- magenta (いつも綴り間違いをする)
- yellow

### 灰色系
- black (rgb={0})
- dimgray (rgb={105})
- gray (rgb={128})
- darkgray (rgb={169}、grayより薄い)
- silver (rgb={192}、銀色だけど光沢はない)
- lightgray (rgb={211})
- gainsboro (rgb={220}、白鼠の意味)
- whitesmoke (rbg={245})
- white (rbg={255})

### パステルカラー系
- pink (イメージしやすいピンクは**deeppink**)
- lightpink (pinkとそんなに変わらない)
- lightcoral (coral=さんご)
- lightsalmon (salmon=鮭)
- violet (violet自体は柔らかい色)
- aquamarine
- powderblue (パウダーブルー)
- skyblue
- lightskyblue (こっちのほうが好み)
- lightsteelblue (steelblue(鉄青)のパステルカラー版?)
- palegreen (pale=淡い)
- lightgreen
- yellowgreen
- greenyellow (yellowgreenとは別の色)
- lightseagreen (lightとついているがこの中では少し浮いている印象?)

### 原色系
- seagreen
- darkseagreen (ダークとあるがseagreenより薄い)
- forestgreen
- lime (明るい緑色)
- darkgreen
- darkolivegreen
- goldenrod (秋の麒麟草の色、金色ではない)
- orange
- darkorange
- orangered (一番、オレンジのイメージに近い)
- deeppink
- salmon
- darksalmon
- crimson (思ったより紅く無い)
- darkred (ちょっと濃すぎる、暗色系よりかな)
- darkviolet
- purple (darkvioletより濃い紫)
- indigo
- navy
- darkblue

### Code Pen
HTMLは省略

<p data-height="265" data-theme-id="0" data-slug-hash="bQGmYX" data-default-tab="js,result" data-user="ForlHeadeOfficer" data-pen-title="color names" class="codepen">See the Pen <a href="https://codepen.io/ForlHeadeOfficer/pen/bQGmYX/">color names</a> by Kentaro (<a href="https://codepen.io/ForlHeadeOfficer">@ForlHeadeOfficer</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### JavaScript
```js
window.addEventListener('load', ()=>{
    const main=document.getElementsByTagName('main')[0];

    for( const name of colornames ){
        const div=document.createElement('div');
        div.innerHTML=name;
        div.style.background=name;
        main.appendChild(div);
        console.log(name);
    }
});
```
を使って色名と背景色が見れるようにした。
今ある色の一覧も

```js:colornames.js
const colornames=[
    'red', 'blue', 'green', // 色の三原色                                                       
    'cyan', 'aqua' /* cyanの別名 */, 'magenta', 'yellow', // 光の三原色 
    'black', 'dimgray', 'gray', 'darkgray', 'silver', 'lightgray', 'gainsboro' /* 白鼠 */, 'ghostwhite', 'white', // 黒から白へ 
    'pink', 'lightpink', 'lightcoral', 'lightsalmon', 'violet',
    'aquamarine', 'skyblue', 'lightskyblue', 'powderblue', 'lightsteelblue',
    'palegreen', 'lightgreen', 'yellowgreen', 'greenyellow', 'lightseagreen'
    'seagreen', 'darkseagreen', 'forestgreen', 'lime', 'darkgreen', 'darkolivegreen',
    'goldenrod', 'orange', 'darkorange', 'orangered', 'deeppink',
    'salmon', 'darksalmon', 'crimson', 'darkred',
    'darkviolet', 'purple', 'indigo', 'navy', 'darkblue',
];
```

## 最後に
まとめてみると意外とイメージと違う色が多かった。他にもいっぱい使える色名はあると思います。
あと、エメラルドグリーン`emeraldgreen`が無かった。
【究極】エディタポエム vim,emacs,atom,Sublime Text,VS Code,Eclipse【至高】

えでぃた？なにそれ？的なひと、おすすめのEditorある？なひと向けの記事。
Knowledgeは含まれていないです。

結論:VS Codeがいちばんおすすめ。最初に触るEditorにvimやemacsはやめたほうがいい。挫折する確率高い。そのうえでGUI Editor極めたら最終的にvimやemacsも検討してみたらどうか。

比較

vim:動作がとても軽い。習得が難しい(せめてメニューバーが出てショートカットキーを都度参照できればいいのだが)。極めたら実質IDE。Typingだけで動かせるので覚えると操作が楽しい。

emacs:そこそこ軽い。習得が難しいがvimほどではない。極めたら実質IDE。小指が逝く。Typingだけで動かせるので覚えると操作が楽しい。

atom:使ったことない。良いらしい。最近VS codeに評判の良さを取って代わられた印象。

sublimetext:有料に切り替えない？の通知がうざすぎて実質有料。VS Codeと同等。機能性は十分。習得も用意。動作も軽い。vim,emacsと違いGUI EditorなのでCLIとの切り替えが地味に大量になりダルい。

VS Code:無料。機能性は十分。習得も容易。sublime textの上位互換。動作も軽い。sublime text同様vim,emacsと違いGUI EditorなのでCLIとの切り替えが地味に大量になりダルい。

Eclipse:Java使い向け。立ち上がりが重すぎる。2回言うけどJava向け。

提案→
VS Code。2018年現在最高の選択肢。CLI環境の便利さに気付くとvimやemacsに興味が湧くが実用性の観点で強力なGUI Editor使いこなしてるとCUI Editorは手間の割には得るものが少ないと分かる。

さらなる提案→
VS Codeの操作や有名なpluginを手足のように扱えるならEditor操作で必要なものは全部揃ったと言って問題ない。それ以上を求めるならそもそも必要なのはEditorではなく、それ以上の操作をするならProgramを組んで自動でやるべきだ。
ではvimやemacsは不要か？

GUI Editorを習得したあとにCUI Editorを使ってみたらいいと思う理由:
1.設定不要(emacsは分からないけどvimはそう感じる)
2.覚えたら一生使える(そうは言ってもVS Code覚えたら後続のGUI Editorも習得の手間はほとんど無いと思われるが)
3.操作をしていて楽しい(やってるうちに分かるけどそれが分かるまで手間がかなりかかる)
4.vimならServerにプリインストールされている(ひとによってはこれが全てな気もしてる)
5.Terminal環境から画面を切り替えないで済む(CLIで何でも自動化するマンの自分にはこれが最大の理由)

というわけでVS Codeおすすめです。vimやemacsは後回しにしたほうがいいです。あまりの使いづらさに思考のResourceを全て持っていかれるといっても過言ではないと思う。
それはそれとして、すでにCUI Editor使いこなしてる各位はそれを楽しんでください。
Android StudioでFlutterアプリを起動すると Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2)

## 環境

- Android Studio 3.2.1
- Flutter 0.9.4

## 現象

Android StudioでFlutterアプリを新規作成して起動したところ `Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2)` といったエラーが発生した:thinking:

### 実行ログ
```
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
Exit code 1 from: /Users/mouchi717/Projects/flutter_app_intro/android/gradlew app:properties:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/mouchi717/Projects/flutter_app_intro/android/app/build.gradle' line: 26

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 3s

Finished with error: Please review your Gradle project setup in the android/ folder.
```

## 原因
Flutterのbuild.gradleにある依存関係の宣言順の問題。
公式のIssueでも既に解決されていた。
https://github.com/flutter/flutter/issues/23459

要するにjcenter()よりgoogle()を先に宣言する必要があるらしい。

## 解決方法

`flutter.gradle`の下記コードを`jcenter()`の上に移動するだけ。

```
maven {
    url 'https://dl.google.com/dl/android/maven2'
} 
```

修正後はこんな感じになる。

```.flutter/packages/flutter_tools/gradle/flutter.gradle
buildscript {
    repositories {
        maven {
            url 'https://dl.google.com/dl/android/maven2'
        }
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}
```

再度、起動してみるとうまくいった！:sun_with_face:

### 実行ログ

```console
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
timeout waiting for the application to start
Gradle task 'assembleDebug'...
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...
Syncing files to device Android SDK built for x86...
D/        ( 4302): HostConnection::get() New Host Connection established 0xdd6a9100, tid 4338
D/EGL_emulation( 4302): eglMakeCurrent: 0xcb9414e0: ver 3 0 (tinfo 0xcb94f240)
I/Choreographer( 4302): Skipped 44 frames!  The application may be doing too much work on its main thread.
```
### 実行結果

<img width="445" alt="スクリーンショット 2018-11-04 12.02.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/63227/f821bc40-09c4-0f40-3363-a065b3f92a39.png">
markdown

## 記事；

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

## 基本的なやつ

### テーブル記法

・補完機能を出す

→　4x5

横4つ
縦 5つ

→　3x4

横 3つ
縦 5つ

### code ラベル


```ruby:Zeus.rb 
```

→ 文字が反映される

## テキストの装飾


### 折りたたみ

<details> <summary> ここにラベル</summary>
  <div>
    ここに内容を入れる
  
  </div>
</ditails>
html マリオの走らせ方

# html マリオの走らせ方
## まずマリオのgifを用意します
![mario.gif](https://qiita-image-store.s3.amazonaws.com/0/230077/6723a01e-75d7-ba12-1ec1-317433d976a3.gif)
htmlと同じ階層にmario.gifとして保存しておきます
## htmlに下記のようなタグを書きます

```html
<MARQUEE DIRECTION="right" SCROLLDELAY="60"><IMG src="mario.gif" width="17" height="17" border="0"></MARQUEE>
```
縦横はgifに合わせます

## 走ります

![marioo.gif](https://qiita-image-store.s3.amazonaws.com/0/230077/d0bb17e7-f3d2-7049-37e8-3e11096c1260.gif)
## さいごに
マリオは著作権で守られていますので私的利用にとどめてこっそり走らせましょう
DockerでPostgreSQLを構築しホストから接続する

今回は使い捨てるため、--rm をつけて、container が停止したら削除するようにする

## 環境
- macOS: v10.13.6
- Docker: 18.06.1-ce-mac73(26764)

## コンテナ作成・起動

```bash
docker container run -d --rm --name some-postgres -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 postgres
```

| 使用しているオプション| 説明 |
|:--:|:-----|
|--name some-postgres  |コンテナ名|
|-d | バックグラウンド実行 |
|--rm | 停止したらコンテナ削除する |
|-p 5432:5432 |ホストのポート:コンテナのポート|
|-e POSTGRES_USER |スーパユーザー名/DBメイン(デフォルトは postgres )|
|-e POSTGRES_PASSWORD |スーパユーザーのパスワード |
| postgres | 使用するイメージ |


- 今回は使わない
    - `PGDATA` :PostgreSQLのデータの格納先ディレクトリ(デフォルトは/var/lib/postgresql/data)
    - `POSTGRES_DB`　:初回起動時に作成するデータベース名を設定できるが省略するとPOSTGRES_USERと同じになるのでたいてい省略する

## ログイン

```
docker container exec -it some-postgres bash

# コンテナ動作確認
root@0d4e110375f0:/# psql --version
psql (PostgreSQL) 11.0 (Debian 11.0-1.pgdg90+2)

root@0d4e110375f0:/# psql -U postgres
psql (11.0 (Debian 11.0-1.pgdg90+2))
Type "help" for help.

postgres=#
```

## 停止 (--rm で作成したのでコンテナ削除も兼)

```
docker container stop some-postgres
```

## ホストからの接続確認 
- ホストOSがMacで Homebrew インストール済みの場合

```bash
# psqlのためpostgresqlをインストール
brew install postgresql

# psql が必要なだけなので(自動起動も)停止
brew services stop postgresql

 # 停止したことを確認
brew services list

# 接続できることを確認する
psql -h localhost -U postgres
```

# 参考
- [OFFICIAL REPOSITORY
postgres](https://hub.docker.com/_/postgres/)
PowerShell で FaceAPI に投げてみる

# 今日の投稿背景
次の案件で、PowershellでいろんなAPIに投げてみたいという要望があったので
備忘録的にやってみた

# 参考にした記事
@miyamiya さんの [PowerShell で Cognitive Services の呼び出し方](https://qiita.com/miyamiya/items/71752e65edd6b6a5317c)
[Invoke-RestMethod](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-restmethod?view=powershell-6)

# FaceAPI用に作ったPowershell

``` Bash:FaceAPI_Detect_Post.ps1
$Face_API_KEY = '<FaceAPI Key>'
$URL = 'https://japaneast.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=true&returnFaceAttributes=age,gender,smile,facialHair,headPose,glasses,emotion,hair,makeup,accessories,blur,exposure,noise'
$image = '<FaceAPIに投げるファイルのフルパス>'
$headers = @{ 
	'Ocp-Apim-Subscription-Key' = $Face_API_KEY
	'Accept' = 'application/json'
	'Content-Type' = 'application/octet-stream'
}

$result = Invoke-RestMethod `
	-Uri $URL `
	-Method Post `
	-Headers $headers `
	-InFile $image

$result | format-list

```

# 出力結果

``` 
faceId         : 
faceRectangle  : @{top=337; left=746; width=318; height=318}
faceLandmarks  : @{pupilLeft=; pupilRight=; noseTip=; mouthLeft=; mouthRight=; eyebrowLeftOuter=; eyebrowLeftInner=; ey
                 eLeftOuter=; eyeLeftTop=; eyeLeftBottom=; eyeLeftInner=; eyebrowRightInner=; eyebrowRightOuter=; eyeRi
                 ghtInner=; eyeRightTop=; eyeRightBottom=; eyeRightOuter=; noseRootLeft=; noseRootRight=; noseLeftAlarT
                 op=; noseRightAlarTop=; noseLeftAlarOutTip=; noseRightAlarOutTip=; upperLipTop=; upperLipBottom=; unde
                 rLipTop=; underLipBottom=}
faceAttributes : @{smile=0.743; headPose=; gender=female; age=21.0; facialHair=; glasses=NoGlasses; emotion=; blur=; ex
                 posure=; noise=; makeup=; accessories=System.Object[]; hair=}
```

出力結果の形式はともかく、とりあえず投げることができますね！

# JSONをPSCustomObjectに変換する
とりあえず、上記の出力結果だと、データが取り出せないので意味ないですよね。
なので、`ConvertFrom-Json`を使って、PowerShell内で扱えるようにしましょう。

## JSON応答対応版

``` Bash:FaceAPI_Detect_Post.ps1
$Face_API_KEY = '<FaceAPI Key>'
$URL = 'https://japaneast.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=true&returnFaceAttributes=age,gender,smile,facialHair,headPose,glasses,emotion,hair,makeup,accessories,blur,exposure,noise'
$image = '<FaceAPIに投げるファイルのフルパス>'
$headers = @{ 
	'Ocp-Apim-Subscription-Key' = $Face_API_KEY
	'Accept' = 'application/json'
	'Content-Type' = 'application/octet-stream'
}

$result = Invoke-RestMethod `
	-Uri $URL `
	-Method Post `
	-Headers $headers `
	-InFile $image

$result_ps = ($result | ConvertFrom-Json)

```

## データの取り出し方
たとえば、一番出現率の高い髪の色は何だ？というときはこういう風にします。

```
($result_ps.faceAttributes.hair.hairColor | `
 Sort-Object -Property confidence -Descending | `
 Select-Object -First 1).Color
```

# Powershell でも
APIに問い合わせることができますし
JSONも難なくつかえますね！
チェックアウトページに注記を入れる方法

Shopifyでは、複数のプランがありますがチェックアウトページをカスタマイズできるのはShopify Plusというプランのみになります。

Shopify Plusのユーザーは、checkout.liquidまたcheckout.scss.liquidという2つのファイルがコードの編集からカスタマイズすることができます。
チェックアウト画面の表記や見せ方をカスタマイズしたい方は、このプランを使用することになります。

（参考）
https://help.shopify.com/en/themes/development/layouts/checkout-liquid

ただし、規模感の小さなサイトで使用するプランはベーシック・スタンダード・プレミアムがメインになってくると思われます。主な料金や機能の差は下記の通りです。
https://www.shopify.jp/pricing

最も高額なプレミアムでも月に299ドルで利用できます。
それに比べてShopify Plusは月に2000ドルとなります。

もちろんできることの幅が大きく広がりはするのですが、チェックアウトページのためだけに月2000ドルは大抵の方はあきらめてしまう感じです。
今回も同じような相談がありまして、下記のような画像が届きました。

![03fc0f0f66932bccc477b63ca9aa9f55.png](https://qiita-image-store.s3.amazonaws.com/0/204568/09b0ce9f-8daa-2282-d16c-2aa1e78ff133.png)

最初はプランの仕様上難しいですという返答をしていたのですが。
GooglePayやamazonPay以外の支払い方法ができないかと思ったというご意見がお客様から多かったということで、それはどうにかしましょうということで奥の手を使いました。

前提で書いたように、Shopify Plus以外はここの画面を編集することはできません。
ただし、この画面上のもので唯一自由に変更できるものがあります。
それが文言です。

上記の画像でいう「または」という部分は、もともと英語ファイルの「or」を日本語化したものです。
ということは、「or」をどう訳すかはこちらの自由では？と思い。
下記の手順で文言を変更してみました。

1.販売チャネル内から、オンラインストアを選択します。
2.アクションを選択します。
3.言語を編集するを選択します。
4.ページ上部の絞り込み検索窓から「or」で検索します。
5.orが含まれる翻訳箇所がすべて表示されます。
6.Checkout & system / Checkout alternative payment method bannerという箇所の翻訳箇所に文言を記載。
![Shopify.png](https://qiita-image-store.s3.amazonaws.com/0/204568/c3530526-fffd-9693-0271-21b34769b765.png)
7.保存して実際のチェックアウトページで確認します。


かなり強引な手段ですが、こちらの方法で今回は相談内容をクリアしました。
mysqlに入れた、時間をjst（日本時間）でviewに渡したい。

mysqlに入れるのは
`   config.active_record.default_timezone = :local
`
こんなのでいけたけど、時間表記がutc時間 + 9:00みたいになってしまう。

なら、strtimeを使えばいいではないかという結論に至った。
`strftime('%Y年%m月%d日 %H:%M:%S')`

⬆︎こんなの

うまくいったのでよしとしようか・・・。
@mmmm.created_at.strftime('%Y年%m月%d日 %H:%M:%S')

コードはこんな感じ
TensorFlow 環境構築 (CPU/GPU版)

#目的
Anaconda上でTensorFlow インストール(CPU版、GPU版)、速度比較

環境：
 * Windows10 Home 64bit
 * Anaconda3-5.2.0-Windows-x86_64 / Python 3.6 version
 * CPU : Intel i7-7700HQ
 * GPU : GeForce GTX 1060
 * TensorFlow 1.11.0

## 【準備】Anacondaインストール
["anaconda.com" ](https://www.anaconda.com/download/)からダウンロード・インストール
★以下にチェックを入れて、コマンドプロンプト操作を可能にしておく
[Advanced Options] -> [Add Anaconda to my PATH environment variable]

## 【1】TensorFlow(CPU版) 環境構築

**1. Anaconda Navigator上で [Environments]→[Create] "tf1110" でCreate**
　　★Python=3.6, R=無効

**2. 作成した "tf1110" ▶→[Open Terminal]**

**3. TensorFlow(CPU版)インストール**
　　`pip install tensorflow`

**4. インストール確認**
　　`python`
　　`import tensorflow`
　→コマンドプロンプトが戻ってきたらOK


<details><summary>**【MEMO】Tensorflowインストール(CPU AVX非対応)**</summary>
　　4年前購入PC(Intel Core i3 CPU M370)ではエラーが発生した。
　　”Failed to load the native TensorFlow runtime.”
　　最新のTensorflowはCPUにAVX拡張が必要らしい。
　　古いバージョンで成功した。
　　　`pip uninstall tensorflow`
　　　`pip install tensorflow==1.5.0`
</details>

## 【2】TensorFlow(GPU版) 環境構築

https://www.tensorflow.org/install/gpu より現時点では以下が対応しているので、対応バージョンをインストールする。

>NVIDIAR GPU drivers CUDA 9.0
>cuDNN SDK (>= 7.2)

**1. CUDA をインストール**

　　[CUDA ダウンロードサイト](https://developer.nvidia.com/cuda-toolkit-archive)からダウンロード＆インストールする

　 　今回はCUDA 9.0 をインストール
　　★CUDA Visual Studio Integration : チェックを入れる
　　★patchもインストールする

**2. cuDNN SDK をインストール**

　　[cuDNNダウンロードサイト](https://developer.nvidia.com/cudnn)からダウンロードする

　　①CUDAバージョン/環境にあったcuDNNをダウンロードする
    　　　今回：Download cuDNN v7.3.1 (Sept 28, 2018), for CUDA 9.0
　　②圧縮ファイルを展開する
    　　　bin/include/libフォルダとファイルが展開される
　　③CUDAをインストールしたフォルダに同じbin/include/libがあるのでコピーする
   　　　 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0


**3. Tensorflow GPU版をインストール**

　インストールコマンド以外はCPU版と同じ

　　① Anaconda Navigator上で[Environments]→[Create] "tf1110gpu" でCreate
　 　 ★Python=3.6, R=無効
　　② 作成した "tf1110gpu" ▶→[Open Terminal]
　　③ TensorFlow(GPU版)インストール
　　　`pip install tensorflow-gpu`
　　④ インストール確認
　　　`python`
　　　`import tensorflow`
　　　→コマンドプロンプトが戻ってきたらOK


## 【3】CPU/GPU版の速度比較

参考文献[1]の画像分類器の実行速度を比較した。(同じPC上の同じプログラム)

|実行環境|時間|
|:---|:---:|
|CPU | 7分 程度 |
|GPU |30秒 程度 |



## 【参考文献】
【1】TensorFlow・Keras・Python・Flaskで作る機械学習アプリ開発入門  (井上 博樹) , Udemy
gensimのPoincare Embeddingを試す

サンプル動かすだけなのでたいしたことやってないけど、可視化でつまづいたのでメモ。

gensimのPoincare Embeddingのページ。
https://radimrehurek.com/gensim/models/poincare.html

可視化までやるならplotlyがあった方がいい。
ただし、plotlyが3.0.0以上のバージョンだとエラーが出るのでバージョン指定してインストールする必要がある

# setup

gensim は既にインストール済み

```
pip install plotly==2.7.0
```

# training

可視化する場合は可視化用の`poincare_2d_visualization`がsize=2にしか対応していないので、`PoincareModel`を実行する際にsize=2を指定する。

```
from gensim.models.poincare import PoincareModel, PoincareRelations
from gensim.test.utils import datapath

# Read the sample relations file and train the model
relations = PoincareRelations(file_path=datapath('poincare_hypernyms_large.tsv'))
model = PoincareModel(train_data=relations, size=2)
model.train(epochs=50)
```

# visualization

```
import plotly
import gensim.viz.poincare

plotly.offline.init_notebook_mode(connected=False)
prefecutre_map = gensim.viz.poincare.poincare_2d_visualization(model=model,
                                                               tree=relations,
                                                               figure_title="tutorial",
                                                               show_node_labels=model.kv.vocab.keys())
plotly.offline.iplot(prefecutre_map)
```

可視化の結果
拡大とかもできるので、ごちゃごちゃしてるけど割とどうにかなる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12165/3357bd7f-38c6-fb08-51e4-06b9baa8bd6f.png)

plotlyを3.0.0以上でインストールしていると、以下の様なエラーが出る

```
ValueError: 
    Invalid value of type 'builtins.str' received for the 'textposition' property of scatter
        Received value: 'bottom'

    The 'textposition' property is an enumeration that may be specified as:
      - One of the following enumeration values:
            ['top left', 'top center', 'top right', 'middle left',
            'middle center', 'middle right', 'bottom left', 'bottom
            center', 'bottom right']
      - A tuple, list, or one-dimensional numpy array of the above
```
vscode をほんの少しクリスマス気分にする。

VisualStudioCode では、ステータスバーなどを設定から変更できます。
せっかくなので、クリスマスカラーっぽくしてみたいと思います。

## とりあえずはりつけてくれ。

```json-doc:settings.json
{
    "workbench.colorCustomizations": {
        "activityBar.background": "#000000",
        "statusBar.noFolderBackground": "#e60033",
        "statusBar.foreground": "#f1f1f1",
    }
}
```

![プレビュー](https://qiita-image-store.s3.amazonaws.com/0/193558/ba8bb3b8-1b74-0b83-07e4-6b8f5e3dbf14.png)


こんな感じ？

仕様は、公式のドキュメントにのっています
[Visual Studio Code Theme Color Reference](https://code.visualstudio.com/docs/getstarted/theme-color-reference)

## 終わりに
全然触ってないじゃん！っていう感じですが、あまり触るとダサくなります。（十分ダサいか？これ。）
もしいい感じの出来たらコメントしてほしいです！
String、StringBuilder、StringBufferのスピード比較テスト



・Stringクラスを使用して文字列の連結処理を行うと、毎回Stringオブジェクトが生成される。

・これはオーバーヘッドとなるので、StringBuilderやStringBufferクラスを使用すべきと言われている。

・私は「そのくらいのオーバーヘッドはたいしたことないだろ」とこれらのクラスは使用していない。もちろん回数が多い場合は使用すべきであるが、(私には)そのような状況はあまりない。

・これらのクラスを使用すると、ソースコードが見にくくなるのがちょっと問題。

・どのくらい違うのか計測してみた。

・大雑把に言って、Stringを直接操作した場合は10倍以上かかっている。
・しかしそもそも絶対時間は大きくはないので、回数が少ない場合は、String直接操作でよいと考える。

・StringBuffer(StringBuilder)を使用する場合の判断に使っていただきたい。

・なお百万回になると、StringBufferの方がStringBuilderよりも速くなっている。理由は(私には)不明。

・ここでは一回の結果を示すが、何度やっても傾向は同じである。

・StringBufferとStringBuilderの違い。前者はスレッドセーフで、後者はスレッドセーフではない。後者が新しい。

・なぜスレッドセーフにしなかったかと言えば、スレッドで使う場合は非常に少なく、それがためにスピードを落としたくないということ(と想像する)。

・StringBuilderをスレッドで使いたい場合は、自分で制御するようにしなさいということ。


```Tips0016.java
package jp.avaj.lib.algo;

import java.util.Date;

import jp.avaj.lib.test.L;

class Tips0016 {
  private static int CNT0;
  private static final int CNT1 = 100; //
  public static void main(String[] args) {
    L.p("==== 一万回");
    CNT0 = 10000;
    execString();
    execStringBuilder();
    execStringBuffer();

    L.p("==== 十万回");
    CNT0 = 100000;
    execString();
    execStringBuilder();
    execStringBuffer();

    L.p("==== 百万回");
    CNT0 = 1000000;
    execString();
    execStringBuilder();
    execStringBuffer();

  }

  private static void execString() {
    long start = (new Date()).getTime();
    for (int i=0; i<CNT0; i++) {
      String s = "";
      for (int j=0; j<CNT1; j++) {
        s += "aaa";
      }
    }
    long end = (new Date()).getTime();
    diff("String",start,end);
  }
  private static void execStringBuilder() {
    long start = (new Date()).getTime();
    for (int i=0; i<CNT0; i++) {
      StringBuilder sb = new StringBuilder();
      for (int j=0; j<CNT1; j++) {
        sb.append("aaa");
      }
    }
    long end = (new Date()).getTime();
    diff("StringBuilder",start,end);
  }
  private static void execStringBuffer() {
    long start = (new Date()).getTime();
    for (int i=0; i<CNT0; i++) {
      StringBuffer sb = new StringBuffer();
      for (int j=0; j<CNT1; j++) {
        sb.append("aaa");
      }
    }
    long end = (new Date()).getTime();
    diff("StringBuffer",start,end);
  }

  private static void diff(String desc,long start,long end) {
    L.p(desc+"="+(end-start));
  }
}

```
実行結果は次のとおり。

```Tips0016.txt
==== 一万回
String=230
StringBuilder=31
StringBuffer=52
==== 十万回
String=1383
StringBuilder=149
StringBuffer=352
==== 百万回
String=12336
StringBuilder=1433
StringBuffer=1388

```
nginx が windows で起動しない

# nginx が windows で起動しない

windows で nginx 使いたいなと思った。
インストールして、 `start nginx` したら起動できると思っていたら起動しなかったので、その対処方法を記載。

## nginx をインストール

1. [ここから](http://nginx.org/en/download.html) `Stable Version` の `nginx/Windows-x.x.x` をダウンロード。
2. ZIPファイル（ `nginx-x.x.x.zip` ）を解答して Cドライブ直下に移動（ `c:\nginx` ）
3. コマンドプロンプトで `c:\nginx` に移動して `start nginx`

   ```cmd
   cd c:\nginx
   start nginx
   ```

## 起動しない

コマンドプロンプトが表示されるが、一瞬で落ちる。
コマンドプロンプトを `管理者として実行` して `start nginx` しても変わらず。

## nginx のログを確認してみた

`\nginx\logs\error.log` を確認すると以下のエラーが発生していた。

```log
An attempt was made to access a socket in a way forbidden by its access permissions
```

他プログラムによって nginx で使用するポート番号が使用されている場合に発生するみたい。
ちなみに設定しているポート番号はデフォルトで 80。

## 誰が使用しているのか確認

```cmd
C:\Users\xxx>netstat -ano |find /i "listening"|find /i ":80"
  TCP         0.0.0.0:80             0.0.0.0:0              LISTENING       4
  TCP         [::]:80                [::]:0                 LISTENING       4
```

```cmd
C:\Users\xxx>tasklist /FI "PID eq 4"
イメージ名                     PID セッション名     セッション# メモリ使用量
========================= ======== ================ =========== ============
System                           4 Services                   0      4,868 K
```

`NT Kernel & System` が使用しているみたい。

## nginx の使用するポート番号を変更

80 は使用されていることがわかったので、 `nginx` の使用するポート番号を 8080 に変更。

1. `nginx\conf\nginx.conf` を開く
2. ポート番号変更

   ```conf
   server {
       listen       8080;
       server_name  localhost;
   
       #charset koi8-r;
   
       #access_log  logs/host.access.log  main;
   
       location / {
           root   html;
           index  index.html index.htm;
       }
   ```

   ※ listen の値を 80 → 8080 に変更。

## nginx を起動

```cmd
cd c:\nginx
start nginx
```

無事起動。
IBM Cloud CLI 導入 (Cent OS 7)

# IBM Cloud CLI の導入
IBM Cloud の「ライトアカウント」で、無料でお試しをしようとしたのですが、
マニュアル [「IBM Cloud CLI の概説」](https://console.bluemix.net/docs/cli/index.html#overview) に記載されている方法は
Cent OS ではうまく行かない （apt-getを前提としている模様）ため、
[「スタンドアロン IBM Cloud CLI のインストール」](https://console.bluemix.net/docs/cli/reference/ibmcloud/download_cli.html#install_use)からダウンロードしてインストールします。
（なぜ 概要のところに ubuntu は こう、 centos は こう、としていないのかはなぞですね。。。）

以下、 Cent OS 7 上で実行しています。
Linux X86 64 ビット インストーラー (下の例では  IBM_Cloud_CLI_0.11.0_amd64.tar.gz ) をダウンロードし、展開します。

```
# ls -l
合計 14556
-rw-r--r-- 1 root root 14901656 11月  4 10:56 IBM_Cloud_CLI_0.11.0_amd64.tar.gz
# tar -zxf IBM_Cloud_CLI_0.11.0_amd64.tar.gz
# ls
Bluemix_CLI  IBM_Cloud_CLI_0.11.0_amd64.tar.gz
```

展開して出来る Bluemix_CLI 内の installer を実行します。

```
# ls
autocomplete  bin  install  install_bluemix_cli
# ./install
Copying files ...
The installation completed successfully.
To get started, open a terminal window and enter "ibmcloud help". Refer to "http://ibm.biz/cli-auto-completion" if you want to enable auto-completion for zsh or bash.

IBM Cloud CLI has a plug-in framework to extend its capability. To install the recommended plug-ins and dependencies, run the install script from "http://ibm.biz/install-idt". For additional plug-in details, see "http://ibm.biz/install-cli-plugin".

IBM Cloud CLI automatically collects data for usage analysis and user experience improvement. To disable the collecting, run "ibmcloud config --usage-stats-collect false"

To uninstall, run "/usr/local/ibmcloud/bin/uninstall"
#
```

パスが通っていないと思いますので、 通してください。
ibmcloud コマンドが見えれば OK です。

```
# echo $PATH
/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin:/root/bin:/usr/local/ibmcloud/bin
# which ibmcloud
/usr/local/bin/ibmcloud
#
```

とりあえず、細かく分けて書いていこうと思いますので一旦これで！

---
ibmcloud コマンドのオートコンプリートの設定を入れ忘れ。
.bash_profile に以下のスクリプトを読み込むように設定すると ibmcloud のオートコンプリートが有効になるそうです。

```
. /usr/local/ibmcloud/autocomplete/bash_autocomplete
```

[「IBM Cloud CLI の shell オートコンプリート機能の有効化 (Linux/MacOS のみ)」](https://console.bluemix.net/docs/cli/reference/ibmcloud/enable_cli_autocompletion.html#ibm-cloud-cli-shell-linux-macos-)マニュアル意外と丁寧ですね！
APFS (Encrypted)とFileVaultはどう違うのか？

# 結論
FileVaultというのはAPFS (Encrypted)に 'some firmware fairy dust' を加えたものらしい。

別の言い方をすると、FileVaultというのはEncryptedなboot driveから起動できるシステムのことで、ドライブのファイルシステムなどにはよらないらしい。

例えばタイムマシンでリストアするとき、
1. リストア→FileVault on
2. APFS (Encrypted)でフォーマット→リストア
だと出来上がるものは同じらしいが、2のほうだとリストアに非常に時間がかかる。
一方、1だとFileVault onによる暗号化をバックグラウンドで行えるので、若干使いやすい？

# 参考
https://discussions.apple.com/message/32295357#message32295357
https://discussions.apple.com/message/32344897#message32344897
https://rebuild.fm/220/#t=1:11:26
サイトの動作確認を繰り返し目視で行わないといけなくなったときに少しでも自動化するための雛型

Capybara というと Rails と組み合わせてあれやこれやと難しい設定をしてやっとこさ使えるという、かなりハードルが高いイメージがありましたが、調べてみると小さなスクリプトでも気軽に使えるようです。

次のは、4つのサイトのトップページにアクセスした結果を一つの画像にして見るスクリプトの例です。
あえて冗長に書いてます。

```ruby
require "capybara/dsl"
require "fileutils"

FileUtils.rm_rf("__screenshot_images")

Capybara.current_driver = :selenium_chrome_headless
Capybara.save_path = "__screenshot_images"

Capybara.visit("https://qiita.com/")
Capybara.save_screenshot

Capybara.visit("https://google.co.jp/")
Capybara.save_screenshot

Capybara.visit("https://www.youtube.com/")
Capybara.save_screenshot

Capybara.visit("https://www.nicovideo.jp/")
Capybara.save_screenshot

`montage -tile 2 -thumbnail 800x -geometry +0+0 __screenshot_images/*.png montage.png`
`open montage.png`
```

上を実行すると次の画像が開きます。これは簡単だ。
![スクリーンショット 2018-10-30 10.12.37.png](https://qiita-image-store.s3.amazonaws.com/0/2369/d28243ba-b1b3-42c3-f4e3-0225087769d3.png)
これを応用すると、テストがないプロジェクトの本番サイトのいろんなページがとりあえず崩れてないことを繰り返し確認しないといけない苦行を迫られたりしている状況では少しは楽になるかもしれません。

# セットアップ＆更新方法 (初めて使う人用)

chromedriver が古いとすぐ動かなくなったりするのでなるべく最新を使うようにします。
また gem で入れる方法と brew で入れる方法と、手動で入れる方法があるせいで無駄にややこしくなっています。
これは brew で入れる例です。

```shell
gem uninstall chromedriver-helper
rm /usr/local/var/rbenv/shims/chromedriver

brew cask uninstall chromedriver
brew cask install chromedriver

gem install capybara
```

## 確認

```shell
which chromedriver
chromedriver -v
```
として次のように表示されたらOKです。
> /usr/local/bin/chromedriver
> ChromeDriver 2.43.600229 (3fae4d0cda5334b4f533bede5a4787f7b832d052)
capistranoによるデプロイが成功した時の画面

# はじめに
Railsで自動デプロイを組み込んだ際に、デプロイ後にどんな画面になるのかキャプチャをとったので、それをメモ代わりに添付します。

# 方法
Masterブランチに最新のコミットがマージされている状態で下記のコマンドを実行します。

```
$ bundle exec cap production deploy
```

# キャプチャ

![スクリーンショット 2018-11-04 10.49.52.png](https://qiita-image-store.s3.amazonaws.com/0/121435/a9ac3863-f401-9150-2f4c-682e91ef6f7d.png)

二枚目（※上の画像との重複もあります）
![スクリーンショット 2018-11-04 10.50.17.png](https://qiita-image-store.s3.amazonaws.com/0/121435/5c57edda-07af-f9f9-2e45-c13cba31821e.png)