OmniAICreator/Qiita-1.07M huggingface dataset:
golangのruntimeからアクセスする/etcのファイル

メモ。

golang 1.10.1 のソースディレクトリで "/etc" をgit grep してコメント行などを手で削ったもの。Linux以外のものも削った。
これらが、golangの標準ライブラリの中から参照される可能性のある /etc/ のファイル。


```
crypto/x509/root_linux.go:	"/etc/ssl/certs/ca-certificates.crt",                // Debian/Ubuntu/Gentoo etc.
crypto/x509/root_linux.go:	"/etc/pki/tls/certs/ca-bundle.crt",                  // Fedora/RHEL 6
crypto/x509/root_linux.go:	"/etc/ssl/ca-bundle.pem",                            // OpenSUSE
crypto/x509/root_linux.go:	"/etc/pki/tls/cacert.pem",                           // OpenELEC
crypto/x509/root_linux.go:	"/etc/pki/ca-trust/extracted/pem/tls-ca-bundle.pem", // CentOS/RHEL 7

mime/type_unix.go:	"/etc/mime.types",
mime/type_unix.go:	"/etc/apache2/mime.types",
mime/type_unix.go:	"/etc/apache/mime.types",

net/conf.go:		confVal.nss = parseNSSConfFile("/etc/nsswitch.conf")
net/conf.go:	confVal.resolv = dnsReadConfig("/etc/resolv.conf")
net/conf.go:	if _, err := os.Stat("/etc/mdns.allow"); err == nil {
net/dnsclient_unix.go:		conf.dnsConfig = dnsReadConfig("/etc/resolv.conf")
net/dnsclient_unix.go:	resolvConf.tryUpdate("/etc/resolv.conf")
net/dnsclient_unix.go:	resolvConf.tryUpdate("/etc/resolv.conf")
net/hook.go:	testHookHostsPath = "/etc/hosts"
net/lookup_unix.go:	file, err := open("/etc/protocols")
net/port_unix.go:	file, err := open("/etc/services")

os/user/lookup_unix.go:const groupFile = "/etc/group"
os/user/lookup_unix.go:const userFile = "/etc/passwd"
time/zoneinfo_unix.go:		z, err := loadLocation("localtime", []string{"/etc/"})
```
Windowsで作成したCSVをMacで編集し、Windowsで利用する

備忘録。
Macで操作。

```bash
# 改行をLFにする（UNIX系）
nkf -Lu --overwrite ./hogehoge.csv

# 編集する
vim ./hogehoge.csv

# 改行をCRLFにする（Windows系）
nkf -Lw --overwrite ./hogehoge.csv

```
参考
[【 nkf 】コマンド――文字コードと改行コードを変換する](http://www.atmarkit.co.jp/ait/articles/1609/29/news016.html)
いつの間にか go の http/net が renegotiation に対応していた話

# いつの間にか go の http/net が renegotiation に対応していた話

何年か前(go 1.4時代)のお話。
ちょっと社内向けのツールを作成するのにせっかくだから勉強も兼ねて go で外部Webサービスからデータを収集するツールを書き、いざ動かそうとしたら

```
Post https://xxx/xxx: local error: tls: no renegotiation
```

go はHTTPSの再ネゴシエーションに対応してなかったらしい。
仕方がないのでその時は curl を呼び出してなんとかしていましたが、今(1.7以降)はオプションで再ネゴシエーションを許可できるようになってました。

```go
func newHTTPClient() *http.Client {
	transport := &http.Transport{
		TLSClientConfig: &tls.Config{
			Renegotiation: tls.RenegotiateFreelyAsClient,
		},
	}

	return &http.Client{
		Transport: transport,
	}
}
```

[crypto/tls: does not support renegotiation](https://github.com/golang/go/issues/5742)
簡単なCSSanimationについて

# CSSanimateの作り方
---

## CSSanimateとは
CSSanimateとは、jQueryやJSライブラリを使わずにwebサイトに動的な動きをプラスするCSS3の技術である

### @keyframesについて
CSSanimateには@keyframesを使います

```CSS:sample.css
@keyframes free_name{
  /* 適当な名前でもOK、
    日本語も使えるけどあまり使わない方がいい */
  0%{
    /* アニメーションのはじめ */
  }
  100%{
    /* アニメーションの終わり */
  }
}
```

free_nameの部分はどんな名前でもいい
0%がアニメーションの始まり
100%がアニメーションの終わりと覚えよう

これを実際に動かすには`animation`というプロパティが必要になる下ではboxとい名前のクラスにかけて見る
```css:sample.css
.box{ 
  animation:free_name 5s ease -2s infinite alternate;
}
```
右から

1. `@keyframes`の横に書いてある`animation-name`の値、 
1. どのくらいの時間をかけて再生をするのか`animation-duration`の値、 
1. `animation-timing-function`の値、 
1. どのくらい時間が経ったらアニメーションを発動するのか`animation-delay`の値、 
1. `animation-iteration-count`の値、 
1. `animation-direction`の値

をスペースで区切って指定する 


### 試しに作ってみよう
---
 
```HTML:index.html
<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">
    </div>
  </body>
</html>

```

```CSS:style.css
.box{
  background-color: red;
  animation:anime 1s ease-in-out 0s infinite alternate;
  height: 50px;
  }
@keyframes anime{
  0%{width:10px}
  100%{width:200px}
}
```
するとこいう風に動く

![redbar.gif](https://media.giphy.com/media/U81MQUag3WJta5PXlK/giphy.gif)

~~Undertaleのような~~ RPGのような体力ゲージのようなアニメーションを作ることができる。
`@keyframes anime`の部分でアニメーションを指定。はじめは横の長さが`10px`だが、最後は`200px`になるアニメーションを`1s`かけて再生する。
`ease-in-out`で車のように加速して減速するするようにしてある。この部分を`ease-out`にするとだんだんと高速に、`ease-in`にするとだんだんと減速していく。
`infinite`で無限に再生して`alternate`で行ったり来たりする。

こんな感じ簡単にできるしアレンジを加えることもできる。
Google Chromeの拡張機能を1分で作ってみる

ごちゃごちゃした説明はいいからまずは試してみたいって人向けです。（自分がそういうタイプなものでｗ）

今回必要なのはmanifect.jsonとjsファイルの2つだけです。
任意のフォルダを作成してこの2つを設置します。
どこでもいいです。

```manifest.json
{
  "manifest_version": 2,
  "name": "Google検索結果の邪魔物を消す",
  "version": "1.0.0",
  "description" : "Google検索結果に表れる「他の人はこちらも検索」の枠を非表示にする拡張機能",
  "content_scripts" : [
    {
      "matches" : [ "https://www.google.co.jp/*" ],
      "js" : [ "script.js" ]
    }
  ]
}
```

content_scriptsのmatchesで指定したURLがscript.jsの実行対象となります。

```script.js
document.body.onload = function() {
  for (i = 0; i < 10; i++) {
    var elem = document.getElementById('eobm_'+i);
    if( elem != null ) elem.style='';
  }
};
```

とりあえず、今回私が作成したものはこんな感じです。
作り込んでいないので動きは期待しないでください。笑
（とにかく最速で動かしてみたいって人はalertだけでもOKです）

chromeの拡張機能のメニューから「パッケージ化されていない拡張機能を読み込む」で上記ファイルが設置されているフォルダを選択するだけで完了です。
（見たら分かると思いますがパッケージ化もここでできるようです）
簡単ですね(^^)

詳しく知りたい方はググってください。
Elastic Compute Service (ECS) ECSって？

# はじめに
アリババクラウドの仮想サーバのサービスです。
IaaS(Infrastructure as a Service)として
その他のクラウドの仮想サーバサービスと同じ立ち位置となります。

# ドキュメントを読んでみます。
[Elastic Compute Service (ECS) - 仮想クラウドサーバー | Alibaba Cloud](https://jp.alibabacloud.com/product/ecs)

## 読んで押さえておきたいと思ったポイントを紹介
### 課金(料金)

[Elastic Compute Service (ECS) - 仮想クラウドサーバー | Alibaba Cloud](https://jp.alibabacloud.com/product/ecs#pricing)

お金ですね。体系は２種類あります。

**サブスクリプション**

月額サブスクリプションは前払いの支払い方法です。 

**従量課金**

時間単位の課金は従量課金制の支払い方法です。 

金額としては
**サブスクリプション < 従量課金**
となり **サブスクリプション** の方が得になってます。

### SLA

**99.95%**

です。
他のクラウド事業で展開している仮想サーバサービスとおおよそ同じと言えます。

[稼働率 => 月間ダウンタイム計算ツール](https://cloned.jp/sla-calc/)
というサイトを利用したところ

**月間 21.6 分**
のダウンタイムは考慮しておく必要があります。

ここで、気になるのは保証ですね。
ドキュメントを探したところ

[Elastic Compute Service (ECS) Service Level Agreement - Product SLA| Alibaba Cloud ドキュメントセンター](https://jp.alibabacloud.com/help/faq-detail/42436.htm?spm=a3c0i.p42389ja1.a3.3.50c22aae6iDxCX)

SLAが満たされないときは、ユーザーからの連絡ですね。
これはちょっと手間がかかりそうです。

### ICPライセンス
ドキュメントを読んでみて初めて知りましたが

[ICPライセンス](https://jp.alibabacloud.com/product/ecs#icp-overview)

というのがあるようです。

> 中華人民共和国工業情報化部 (MIIT) 発行の Internet Content Provider (ICP) ライセンスは、中国国内に設置されたサーバーで Web サイトの運用する際に必要となる登録番号です。中国国内に設置されたサーバーサーバーでサイトまたはアプリケーションを開始するには、Web サイトのドメイン名が確定した後に、ICP ライセンスを申請する必要があります。
> 
> ICP ライセンス番号は、Web サイトのすべての Web ページのフッターに表示する必要があります。

普段の生活で検索先のページで中国のサイトをみることも多少はありますが、改めて知りました。
中国では、サーバを立ててWEBサイトを構築し展開するには手続きが必要なようです。

基本東京リージョンでやることが多いはずなので、問題はないでしょう。

_※サーバーサーバーになってますね。_

# まとめ
仮想サーバのドキュメントを読んでみて
他のIaaSサーバとは、大差はなさそうでした。

しかし、DR(Disaster Recovery)やマルチクラウドとして
アリババクラウドの中国リージョンでサーバを立てる
というは難しそうです。

**中国以外のリージョンなら、DRとして扱える** ので
AlibabaクラウドのIaaSとして、押さえておきたいポイントと考えております。
PHPでMiddlewareパターンを実装する方法(Interceptorパターン風)

本稿ではPHPでMiddlewareパターンの設計と実装を紹介する。本稿で扱うMiddlewareパターンは、Interpreterパターンの変種であり、典型的なMiddlewareパターンではない。典型的なMiddlewareパターンの設計および実装は[❄️PHPでMiddlewareパターンを実装する方法](https://qiita.com/suin/items/5c53f72e9c7e2c05b18f)を参照。


## Middlewareパターンとは

Middlewareパターンの目的は、「ミドルウェア」と呼ばれるガワの処理で核となるハンドラを包むことで、プログラム本来の振る舞いを拡張可能にすること。MVCウェブフレームワークでは、コントローラの入出力となるHTTPリクエストやレスポンスをアプリケーション全体で統一的に加工する用途などに採用されている。

![貼り付けた画像_2018_04_18_12_20.png](https://qiita-image-store.s3.amazonaws.com/0/889/7f091851-061c-49fe-ecfc-ab0aaffa7172.png)

ミドルウェアができることは次の3つ:

1. クライアントコードとハンドラの間に割って入り、入力を加工する
* ハンドラとクライアントコードの間に割って入り、出力を加工する
* クライアントコードとハンドラの間に割って入り、入力がハンドラに届く前に、早期に出力を返す

## Middlewareパターン(Interpreterパターン風)

本稿で扱うMiddlewareパターンは上記の機能うち2と3がない。厳密にはInterpreterパターンと言える。そのぶん、典型的なMiddlewareパターンよりも単純になっている。

### 設計

![クラス図0.png](https://qiita-image-store.s3.amazonaws.com/0/889/43e3921d-7b1c-b62c-a1dd-46043e8ca5ec.png)

### 実装


```php
interface Middleware
{
    public function call(int $input): int;
}
```

```php
final class MiddlewareChain implements Middleware
{
    /**
     * @var Middleware[]
     */
    private $middlewares = [];

    public function add(Middleware $middleware): void
    {
        $this->middlewares[] = $middleware;
    }

    public function call(int $input): int
    {
        foreach ($this->middlewares as $middleware) {
            $input = $middleware->call($input);
        }
        return $input;
    }
}
```

```php
final class IncrementMiddleware implements Middleware
{
    public function call(int $input): int
    {
        return $input + 1;
    }
}
```

```php
final class TwiceMiddleware implements Middleware
{
    public function call(int $input): int
    {
        return $input * 2;
    }
}
```


```php
$chain = new MiddlewareChain();
$chain->add(new IncrementMiddleware);
$chain->add(new TwiceMiddleware);

assert($chain->call(1) === (1 + 1) * 2);
assert($chain->call(2) === (2 + 1) * 2);
assert($chain->call(3) === (3 + 1) * 2);
```

__:bow: よかったらRTお願いします ！:pray:__
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">✏️書いた → PHPでMiddlewareパターンを実装する方法(Interpreterパターン風) - Qiita <a href="https://t.co/RVTCHSr3K2">https://t.co/RVTCHSr3K2</a> <a href="https://t.co/h2WzfpsYxH">pic.twitter.com/h2WzfpsYxH</a></p>&mdash; suin (@suin) <a href="https://twitter.com/suin/status/986448352593182720?ref_src=twsrc%5Etfw">2018年4月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
phantomjsの昔のバージョンがほしい場合（未解決）

`brew install phantomjs` だと2018年2月時点でv2.1.1しか手に入らず、古いRailsでのテストのため昔のバージョンがほしいので色々調べてみた。

**注意！！ 解決できてません。素直に最新版で使えるように、poltergeist等の依存ライブラリをアップデートした方が良いです**

## 結論
macだとインストールできなかった。

npmでインストールできるので、してみる。バージョンを調べる。
`$ npm view phantomjs versions`
`$ npm install -g phantomjs@1.9.9`

インストールはできたが、起動時にエラー。

```
child_process.js:380
    throw new TypeError('"file" argument must be a non-empty string');
    ^

TypeError: "file" argument must be a non-empty string
    at normalizeSpawnArguments (child_process.js:380:11)
    at exports.spawn (child_process.js:493:38)
    at Object.<anonymous> (/usr/local/lib/node_modules/phantomjs/bin/phantomjs:22:10)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Function.Module.runMain (module.js:703:10)
    at startup (bootstrap_node.js:193:16)
```

ここでつまり、結局対処がわからず。
Laravelを始めよう

# Laravelを始めよう

## とりあえずLaravelをインストールしよう

なんかcomposerとかいうのが必要らしい

```shell
curl -sS https://getcomposer.org/installer | phpmv composer.phar /usr/local/bin/composer
```

そしたら初めてLaravel公式にある以下のコマンドが使えるぞ(https://readouble.com/laravel/4.2/ja/quick.html)

```sh
composer global require "laravel/installer=~1.1"
```

laravelコマンドを使うには、それに加えてPATHを通す必要があるぞ。

1. ~/.bash_profileを開く

2. 以下の一文を追加

   ```sh
   export PATH="PATH"
   ```

3. source ~/.bash_profileでファイルを読み込む



## プロジェクトの作成じゃ〜！！！

```sh
laravel new project_name
```
↑
このコマンドを叩くと作成されるぞ！

## いざ実行
```sh
php artisan serve
```
このコマンドで実行される。
http://127.0.0.1:8000/
ここにアクセスしてみよう！
CocosCreator 別ファイルのコンポーネントの継承

# はじめに

CocosCreator JSで自分が作った別ファイルのコンポーネントを継承して新しいコンポーネントを作る方法のメモ

# 基底 class

```js:Super.js

//Super class
cc.Class({
    extends: cc.Component,

    properties: {
        hoge: 0
    },

});
```

# 派生 class

```js:Sub.js

let Super = require('Super');

//Sub class
cc.Class({
    extends: Super,

    properties: {
        piyo: 0
    },
});
```
# 結果
<img src="https://qiita-image-store.s3.amazonaws.com/0/104703/6712474d-c5f4-aad4-e422-24e8ea7437ac.png" width=70%>

# 参考

https://discuss.cocos2d-x.org/t/module-exports-question/32445
GCSでキャッシュを無効にしたい

GCSのキャッシュ周りで少しハマって、なかなか情報が見つからなかったのでメモしておきます。

# 背景
- ユーザーの画像アイコンをGCSへ保存している
- 保存した画像はGCS上で公開リンクにし、画像参照してWebページ表示している
- 公開リンクにした場合、デフォルトはキャッシュが3,600秒有効になる

この状態の時にユーザーの画像アイコン変更したのですが、当然なかなか画像が切り替わりませんでした。
キャッシュが効いてるため、無効にしてやる必要があります。

[ GCSの中身 ]
![2018-04-18_12h02_461.png](https://qiita-image-store.s3.amazonaws.com/0/15028/49955dc1-2991-a030-9758-744d9edbdedc.png)

[Google Cloud Storageドキュメント - オブジェクトのメタデータ](https://cloud.google.com/storage/docs/metadata?hl=ja#access-control)


# 解決策
以下は公開リンクにする処理ですが、その部分にキャッシュ無効の処理（"no-cache"）を追記しました。
これで公開リンクにしたと同時にキャッシュ対象外となり、即時の画像アイコン変更ができるようになりました。

```C#:
using Google.Apis.Storage.v1.Data;
using Google.Cloud.Storage.V1;

private async Task PublicReadFileToGcs(string bucketName, string path, string fileName)
{
    // Google Storage
    var storage = await StorageClient.CreateAsync();
    var storageObject = storage.GetObject(bucketName, $"{path}/{fileName}");
    // キャッシュを無効にするように追加
    storageObject.CacheControl = "no-cache";
    storageObject.Acl = storageObject.Acl ?? new List<ObjectAccessControl>();
    storage.UpdateObject(storageObject, new UpdateObjectOptions
    {
        PredefinedAcl = PredefinedObjectAcl.PublicRead
    });
}
```

[Google API ドキュメント - CacheControl](https://googlecloudplatform.github.io/google-cloud-dotnet/docs/Google.Cloud.Storage.V1/api/Google.Apis.Storage.v1.Data.Object.html#Google_Apis_Storage_v1_Data_Object_CacheControl)
Firebase Cloud Functions のデプロイに躓いた話

Firebase Cloud Functions を初めて触った時に、Helloworld関数のデプロイに躓きました。

#状況
[公式サイト](https://firebase.google.com/docs/functions/)の手順などを参考に環境を構築し、デプロイコマンド`firebase deploy --only functions`を実行。

数分待っても、デプロイが開始されません。
ログを見てもエラーは吐かれておらず、ただ処理が止まっている状況でした。

```firebase-debug.log
Wed Apr 18 2018 12:04:59 GMT+0900 (JST)
[debug] [2018-04-18T03:05:00.607Z] <<< HTTP RESPONSE 200　　　←ここから進まない！
```


#解決方法
**ウイルス対策ソフトを無効化したところ無事にデプロイできました。**

解決するのに丸一日かかりました・・・(ﾉд-｡)



#参考
[Cloud Functions for Firebase](https://firebase.google.com/docs/functions/)
[Cloud Functions for Firebase[BETA] を使ってみる (HelloWorld編)](https://dev.classmethod.jp/cloud/cloud-functions-for-firebase-use-helloworld/)
[Swift Developer Blog](http://swiftdeveloperblog.com/firebase-cloud-functions-swift/)
IEが改めてクソだと思った事例と解決した方法

# IEを滅せよ！！！
 - typescriptは大好きです。でもIEとEdge( `巻き添え` )は滅びてください。

# 記事の内容
 - IEだと動かないjquery( `今時jquery....` )のコードがいくつかあったので、IE対応として修正を行った際に発生した事案を記載

# 発生したエラー・問題点
 - `Array.include()` 実行時に発生した、 `Object doesn't support property or method 'includes'` 
 - JQuery3で `$("parent element").append($("child elements"))` で、ネストした子要素をちゃんと反映してくれない
 - JQueryで操作中の要素オブジェクトを配列に入れてループ処理したら `Object doesn't support property or method 'Symbol(Symbol.iterator)`
 - `URLSearchParams` が使えない！

# 対応内容
## `Array.include()` 実行時に発生した、 `Object doesn't support property or method 'includes'`
### 解決
 - `babel-polyfill.js` を導入して解決

## JQuery3で `$("element").append($("child elements"))` で、ネストした子要素をちゃんと反映してくれない
### 解決
 - JQuery3だとIEでの動作がおかしくなるようなので、JQuery2に変更した 

### 事例
 - 実際に起こっていた動作
 
```html:child_element
<div class='child'>
  <div>
    <ul>
      <li>hoge</li>
      <li>foo</li>
    </ul>
  </div>
</div>
```

```js:appendコード
$(".parent").append($(".child"));
```

```html:結果
<div class='parent'>
  <div class='child'></div>
</di>
```

## JQueryで操作中の要素オブジェクトを配列に入れてループ処理したら `Object doesn't support property or method 'Symbol(Symbol.iterator)`
### 解決
 - コードが良くなくループ自体不要になって削除してしまったので、根本的な解決してない
 
### 事例

```js:問題のコード
// htmlのソートしたかった
const sortResults = $(".parent").find(".child").sort((a, b) => {
  let val1 = $(a).attr("data-val")|| 99999999;
  let val2 = $(b).attr("data-val")|| 99999999;
  // 昇順
  return (Number(val1) - Number(val2));
});

$(".parent").html("");
for(let elm of sortResults) { // ←ここで `Object doesn't support property or method 'Symbol(Symbol.iterator)`
  $(".parent").append(elm);
}
```

### トライしたこと
 - `sortResults` -> `Array.from(sortResults)`　or `Object.values(sortResults)` に変更
   - 子要素を含まないhtmlオブジェクト？に変わっていてappendしても、子要素がちゃんと反映されなかった。。。（詳細忘れた）

```html:こんな感じ
<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</di>
```

### 解決方法(根本解決してないが）

```js:これだけでソート結果のHTMLが反映されてた。
$(".parent").append(sortResults);
```
## `URLSearchParams` が使えない！
### 解決
 - `url-search-params-polyfill` を導入して解決


# デバッグツール
 - microsoftが提供するイメージ
   - https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
Excel > 行と列を入れ替えて貼り付け > Ctrl + Alt + V, E, Enter

```txt:動作環境
Windows 8.1 Pro (64bit)
Excel 2016
```

横に長いセル要素の一覧確認するため、縦方向に並べ替える。

### 関連

- [EXCEL > 項目が列方向に多数ある場合の項目と値一覧の印刷 > 行列を入替える](https://qiita.com/7of9/items/2488c732be24996fd8e6)
- [Excel > 形式を選択して貼り付け > Ctrl + Alt + V または Alt, E, S](https://qiita.com/7of9/items/d8c8440650ec4eefe406)

### 手順

1. コピー領域選択
2. Ctrl + c
3. ペースト先に移動
4. Ctrl + Alt + V, E, Enter

EはExchange Row and Columnの「E」と誰かが言ったかもしれない。。。
(こじつけ; quibble; 狡辩 Jiǎobiàn; ergoter)
macOS High Sierra で、"vagrant up" が System Integrity Protecton (SIP) によって実行できない問題

# System Integrity Protection（SIP）
少し前の記事だが引用するとSystem Integrity Protection（以降 SIP）の概要は以下の通り。
>El Capitanでは、スーパーユーザ(root)の機能が制限される。正確にいえば、新たに導入された「System Integrity Protection」と呼ばれる機構により、UNIX系OSでは伝統的にあらゆる処理が許可されるroot -- OS Xの場合、sudoersで許可されたユーザを含む -- から一部の権限を奪うというもの。具体的には、/usr以下など特定領域へのファイルの書き込みおよび削除がrootですら不可能になる。

マイナビニュース「新・OS X ハッキング! Terminalから見た「El Capitan」の変更点(1)」
https://news.mynavi.jp/article/osxhack-142/

# 概要
VirtualboxをVagrantと連携させたかったので、まずはVirtualboxをインストールしようとしたが、SIPによってインストールが完了できなかった。
その後、一時的にSIPを無効にすることによってVirtualboxはインストールを完了し、その他のセットアップも済ませたが、今度は `vagrant up` できなかったので、その原因と対処法を調べた。

# 環境
iMac late2012 macOS High Sierra
※macOS High Sierra をインストールディスクからクリーンインストール

# 過程
1. Virtualbox (5.1.32)をインストールしようとすると、「インストールを完了できません」的なメッセージが出てインストールができない
2. ググってみてSIPが原因ぽいとわかったので、とりあえず`csrutil disable`でSIPを無効化
3. Virtualbox (5.1.32), Vagrant (2.0.3) をインストール
4. Vagrant をセットアップして`vagrant up`で起動を確認
5. `csrutil enable`でSIPを有効化する
6.  `vagrant up`を試みるもエラーが出て起動できない
![2018-04-18 10.36.48_ex.jpg](https://qiita-image-store.s3.amazonaws.com/0/134935/e99bcec5-2ccb-1f60-3885-c58604595ead.jpeg)

# 調査

## SIP有効時
- Virtualbox (5.1.32) ではなく、最新バージョンのVirtualbox (5.2.8)をSIPを一旦無効にしてからインストールしたが、やはり同じ結果だった<br>
※古いVirtualboxをインストールしようとしたのは、VirtualboxとVagrantの連携が以前の最新バージョンではうまくいかなかったため
- Virtualboxのイメージ設定画面を確認したが、ネットワークホストオンリーアダプターの名前指定プルダウンが”未選択”となっており、他に選択肢がなかった
- Virtualboxのホストネットワークマネージャーから新たにアダプターを作成しようとしたが、エラーが出て作成できなかった
![2018-04-18 10.37.46_ex.jpg](https://qiita-image-store.s3.amazonaws.com/0/134935/041eecd1-9fb6-1e18-fe98-9c83decc0a56.jpeg)

## SIP無効時
- `vagrant up`できているのでセットアップは完了している
- Virtualboxのイメージ設定画面を確認したが、ネットワークホストオンリーアダプターの名前指定プルダウンが”vboxnet0”となっており、選択済みだった

## まとめ
- SIPが `vagrant up`できない原因で、どうやらネットワークホストオンリーアダプターを邪魔しているようだ<br>
※ホストオンリーアダプターはゲストOSとホストOSの通信に使用されるものだそうです
- Virtualboxで上記アダプターを手動設定することによって、この現象を回避することはできない

# 対処
面倒なので`csrutil disable`してしまう…と言いたいところだが、そもそもSIPはセキュリティのために導入された仕組みなので、やはりまずい。なので以下を参考に、部分的にSIPを無効化することとした。
[SIPをもっと深く知ってみよう！　〜SIPは一体何を保護しているのか〜 - Qiita](https://qiita.com/whitefox_105/items/0b70f7a504dcb72788e6)

いくつかオプションがあるようで、一番関係ありそうだったのが以下。
※安直ですが、”ドライバ”あたりが関係ありそうかと…

> CSR_ALLOW_UNTRUSTED_KEXTS
> 
> 未署名のkextの読み込み制限を解除するフラグです。
> kextはKernel Extentionの略でデフォルトのカーネルを拡張する為のモジュールです。
> 例えば、ドライバがこれに該当します。
> 10.10以降からkextには署名が必須となっているようです。

上記に対応するオプションをつけてSPI有効化コマンドを実行。
`csrutil enable --without kext`

実行の結果、`vagrant up`できるようになった。

# 結論
正直なところ、ここら辺は全く詳しくないので原因自体はよくわからなかった。

SIP有効化コマンドのオプションを見るに、Virtualboxのネットワークホストオンリーアダプターらへんで問題が起きていることはわかったが、

- 別の最新のMacで同様のセットアップを行なったが、特に問題なく完了した
- 他の Sierra から High Sierra にアップグレードしたMacでも特に問題なく同様の環境が使用できている

上記のことから、Virutualboxというよりかは、自前でクリーンインストールした際のSIPの挙動が、その他のマシンと違うのかもしれない（推測）。

どなたか詳しい方突っ込んでいただけるとありがたいです。

**なお、SIPの無効化はセキュリティリスクがありますので、実行される際は自己責任でお願いします。**
Parcelでvue.jsを使うときに、いつのまにかプラグインが不要になっていた件

ほぼタイトル通り。バージョン1.7から対応した模様。これを書いている2018年4月18日現在、「parcel vue」でググると「parcel-plugin-vueを使え」的な記事が大量にヒットするのだが、これはもはや不要であるということらしい。
そもそも[githubのparcel-plugin-vueのページ](https://github.com/BoltDoggy/parcel-plugin-vue)にもその旨書いてある。[Parcelのドキュメント](https://parceljs.org/recipes.html#vue)も「え、それでいいですの？」てなくらいにまたシンプルだ。

あまりにもあっさりしすぎているので、サンプル的なものが何かないかと探してみると[vue-hackernews-2.0](https://github.com/devongovett/vue-hackernews-2.0)を[Parcelで書き直したよ](https://github.com/devongovett/vue-hackernews-2.0/pull/1)、というのが出てきた。.babelrcすら削除してあり、no configもここまで来ると狂気に近い侠気っぷりである。ビルドするとなるほど動きますなあ。

なお、Parcelはいつのまにかpugもサポートしていた。同じくバージョン1.7から。上記のcomponentをちょいちょいっとpugで書き直しても

![スクリーンショット 2018-04-18 11.50.39.png](https://qiita-image-store.s3.amazonaws.com/0/21634/54eef6da-94ac-129c-9b61-6c268c5743dc.png)

ちゃんと動く。うっかりpugをインストールし忘れていても、勝手にインストールしてパッケージに追加までしてくれる甲斐甲斐しさである。普段はさっぱりしているのに、朝になると迎えに来てくれて制服まで着せてくれる幼なじみのようだ。Parcel新参者だけど。

それにしても、pugのサポートはとても嬉しいのだが、破壊的にキュートな[parcel-plugin-pug](https://github.com/Ty3uK/parcel-plugin-pug)のアイコンが遠くに行ってしまうということでもあり、これはこれでとても悲しい。

![スクリーンショット 2018-04-18 11.57.30.png](https://qiita-image-store.s3.amazonaws.com/0/21634/69e0fd48-789c-3aec-b92f-c923f318a0f9.png)
【pandoc】Markdown(.md)でとったメモをWord(.docx)やPDF(.pdf)を変換する

※随時編集、Markdownの入れ方はまた別記事かも

#この記事を見てできること
・Markdown(.md)ファイルをWordファイル(.docx),PDFファイル(.pdf)に変換できる

#↑ができると何が助かるのか
自分がMarkdownで作ったメモを他人にそのまま渡すことができる

#メモとして機能的なMarkdownとその認知度
最近メモをするのにMarkdownを使うようにしている。Wordで中央揃えだの太字だのを(ショートカットはあれど)ポチポチやっていくのは非常に面倒臭い。特に議事録を作成する際に、真価を発揮すると思う。Markdownは「# 」で見出しを付けたり、で「1. 」番号を振ったりと資料の叩き台を作る上でかなり便利だ。(Qiitaに投稿する時に楽というのもあるが）
ところが、そのメモを共有しようと思った時に困ったことが起こる。工学系や情報系の学生はレポート作成、IT企業に勤めている社会人は打合せ資料や議事録を作成する等、Wordを使うシチュエーションが多いだろう。Markdownは認知度が低く、使われていることも少ない。
メモ程度ならば自分のMarkdown(.md)ファイルをそのまま渡してしまっても良いが、できたら相手にそのままポンと渡して、Wordやpdfで開くことができたらかなり便利だ。

#pandocによる変換
##インストール
※インストールパッケージでのインストールになります。
1. [ここ](https://github.com/jgm/pandoc/releases/download/2.1.1/pandoc-2.1.1-windows.msi)からインストーラをダウンロード
2. インストーラに沿ってポチポチしていく
<img width="349" alt="01.png" src="https://qiita-image-store.s3.amazonaws.com/0/171011/df2b5921-d111-0336-f2c0-6821628942c0.png">
<img width="348" alt="02.png" src="https://qiita-image-store.s3.amazonaws.com/0/171011/1731c71d-fdd0-6e93-5c77-38f149a8fb12.png">

3. PowerShellで`pandoc -v
`を実行し、バージョン情報が表示されたらOK.
<img width="594" alt="04.png" src="https://qiita-image-store.s3.amazonaws.com/0/171011/4d9c593f-7c57-e5c5-161d-87b097df7edd.png">



1. 必要なファイルをデスクトップに置く
1. powershellを起動
1. `cd Desktop`を実行
1. `pandoc .\XXX.md -t docx -o YYY.docx --toc --highlight-style=zenburn`を実行(XXXにはデスクトップに置いたファイル名を、YYYにはWordファイルにつけたい名前を入力する)

#おまけ
##コマンドを色々試す
[Pandoc ユーザーズガイド日本語版](http://sky-y.github.io/site-pandoc-jp/users-guide/)より

`pandoc -o XXX.md YYY.txt`
mdファイルからからtxtファイルに変換できた。`-o`を消すとpowershell内で出力される。ガイドにも「ファイルへ出力したい場合は、`-o`オプションをつけてください」と書いてある。（ちなみに文字化けした。)

`pandoc -f markdown -t latex hello.txt`
=`pandoc --from markdown --to latex hello.txt`


#やりたいこと
・変換したいファイル名を入力するとディレクトリから探してきて自動で見つけてデスクトップや同ディレクトリ内に変換して表示するまでをワンクリックでできるとよい
パソコンを触るときに知ってくと便利なあれこれ

※随時編集
##　これを知っていると何が助かるのか
煩わしいGUI操作をなるべく手を焼かなくて済んだり、知りたい情報を知れたりする

##一覧

###コントロールパネルを開きたい
1. 【windows】キーを押す
1. 最下部【プログラムとファイルの検索】窓にて「コントロール」と打つ
⇒出てくる

###今使っているPCの基本的なスペックが知りたい
【コントロールパネル】-【システムとセキュリティ】-【システム】を開く
※【Windows】キー＋-【pause Break】キーでも開ける  

###今使っているPCの型番が知りたい
1. 【windows】キーを押す
1. 最下部【プログラムとファイルの検索】窓にて「システム」と打つ
2. 【システム情報】を選択する
⇒出てくる

###IPアドレスの設定でコントロール パネル\すべてのコントロール パネル項目\ネットワーク接続までクリックで追うのがだるい
1. 【windows】キー +　Rを押す
2. ```ncpa.cpl```と打ち、【OK】を押す
3. 出てくる

###一度ログインしたことのあるアカウントの情報を全て消したい
1. 消したいユーザ以外のユーザでログインする
2. 【コントロールパネル】-【システムとセキュリティ】-【システム】-【システムの詳細設定】 【ユーザプロファイル】を開く
3. 削除したいユーザアカウントを選択し、 【削除】を押す
2018-04-18 Excel > 形式を選択して貼り付け > Ctrl + Alt + V または Alt, E, S

```txt:動作環境
Windows 8.1 Pro (64bit)
Excel 2016
```

「形式を選択して貼り付け」には二通のキー操作があるようだ。

### Ctrl + Alt + V

普段はこちらを使っている。

Ctrl + Vの操作に対して「Alt」が加わったというイメージで覚えている。

通常のペースト操作に対する「Alternate(代わり)」の操作としての「形式を選択して貼り付け」。

### Alt, E, S

こちらでもできるが、操作を忘れそう。

### その後
(追記 2018-08-28)

4カ月程度の経過であるが、Ctrl + Alt + Vの方を覚えて使っている。
Altを使う方法は記憶に定着していない。
Android Studioがチラつく様な挙動で補完が効かなくなった際の解決方法（Indexing loop）

# 解決方法
まず解決方法を先に...
```
File -> Invalidate Caches /Restart... -> Invalidate and Restart
```
すれば治るようです。
既出だったらすみません🙇‍♂️

# 発端
画面全体がIndex完了した様な挙動で、補完やAuto importが効かなくなった。
Android Studioのウィンドウ下部に一瞬 `update indices`が表示されて消えるというのが繰り返されている様だった。
![スクリーンショット 2018-04-18 11.38.01.png](https://qiita-image-store.s3.amazonaws.com/0/189206/d0abc2bd-71a5-7fa6-41f4-47870989ba76.png)

Buildが失敗しているのかと思ったがそうでもなく、gradle cache消したりしたが解決しなかった。

# バージョン
現象が発生したバーションは「3.1.1」。
もしかしたら限定的な事象かもしれない。

## 参考手順画像

### こうして
![スクリーンショット 2018-04-18 11.31.29.png](https://qiita-image-store.s3.amazonaws.com/0/189206/0a5af909-cad1-43d1-6eb9-0e019dd073bd.png)

### こうじゃ
![スクリーンショット 2018-04-18 11.32.22.png](https://qiita-image-store.s3.amazonaws.com/0/189206/640e89e6-00e3-d2f4-4b91-08e5ef177d80.png)

# 参考にしたリンク
https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000735244-indexing-loop
https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000755010-PhpStorm-keeps-indexing-over-and-over-again

何が原因でこうなったのか。。。😇😇😇
【UniRx】ピンチイン・アウトをちゃちゃっと作る

みんなRxだいすき？ぼくはだいすきです
だいすきなRxでピンチイン・アウトをシンプルに使いやすくサクッと書きたかった
たぶん書けた

Rxじゃない書き方はこんな感じになります
[Unityでピンチイン・ピンチアウトを実装する](https://qiita.com/a_nishimura/items/c10a10e95f0ea1a27009)

#ソース
```c#:PinchEventHandler.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UniRx;
using UniRx.Triggers;

public class PinchEventHandler : MonoBehaviour
{
    private Subject<float> onPinch = new Subject<float>();

    public IObservable<float> OnPinch { get { return onPinch; } }

    void Start()
    {
        //ピンチ終了
        var multiTapEndStream = this.UpdateAsObservable()
            .Where(_ => !MultiTapping());

        //ピンチ
        this.UpdateAsObservable()
            .Where(_ => MultiTapping()) //2箇所以上タップされている
            .Select(_ => GetMultiTapDistance()) //2点間の距離にメッセージを変換
            .Buffer(2, 1) //バッファに詰める
            .Select(distances => distances[1] - distances[0]) //前フレームとの距離の差にメッセージを変換
            .TakeUntil(multiTapEndStream) //ピンチ操作が終わったらバッファをクリアにする(TakeUntil+RepeatUntilDestory)
            .RepeatUntilDestroy(this)
            .Subscribe(delta =>
            {
                onPinch.OnNext(delta);
            });
    }

    private bool MultiTapping()
    {
        return Input.touchCount >= 2;
    }

    private float GetMultiTapDistance()
    {
        return Vector2.Distance(Input.GetTouch(0).position, Input.GetTouch(1).position);
    }

}
```

タップしている2点間の距離をバッファに詰めて、差分をOnNextで流しています
`.Buffer`が超便利なお陰で、一時保存用のグローバル変数が消え去ってスッキリ

使う時には

```c#:sample
        var pinchMultiply = 0.001f; //適当に調整するなりしてください
        pinchEventHandler.OnPinch
            .Subscribe(pinchDistanceDelta =>
            {
                //ピンチで拡大・縮小
                transform.localScale += (pinchDistanceDelta * pinchMultiply) * Vector3.one;
            })
            .AddTo(this);
```
こんな感じでどうぞ

#結論
UniRxはいいぞ
初めてのAndroidStudio

#AndroidStudio　～設定と初稼働～
※勉強のための自分用のメモとして使っています。
※環境はWindows10、使用APIレベルは26、バージョンは3.1.1です。
※今回インストールと初期設定は省いています。

## 初めに
初期設定を終えた時点では今回使用するAPIが入っていなった(入っていたのは27)ので、
初めのWelcome画面の右下のConfigureを選び、中にあるSDK Managerを選択して
SDK Platformsのタブを選択したのち、
右下のShow Package Detailsのチェックボックスにチェックを入れる。

その後出てきたリストからAndroid8.0の欄から
・Android SDK Platform 26
・Google APIs Intel x86 System Image
の二つにチェックを入れた後

タブをSDK Toolsに変更、同じように右下のチェックボックスにチェックを入れて
同様に出てきたリストから

・Android SDK Build-Toolsの26の最新版
・Android Emulator
・Android SDK Platform-Tools
・Android SDK Tools
・Intel x86 Emulator Accelerator(HAXM installer)
・ConstraintLayout for Androidの最新版
・Solver for ConstraintLayoutの最新版
・Android Support Repository
・Google Repository

のすべてのチェックを入れる後はOKを押して出てきたダイアログもOKを押す

するとライセンス確認画面が出てくるので、
左側のリストの項目を選択してウィンドウ中央下側のAcceptのボタンを押す。

これを項目分したのち右下のNextを押してインストール完了を待ち、
右下もFinishをクリックして設定完了。

## 初稼働
設定を終えたのち最初の画面に戻ってくるので一番上の
Start a new Android Studio Projectをクリック。

とりあえずApplication nameはHelloAndroidで
Company domainをandroid.wings.websarva.com
で右下のNextをクリックして、

次の画面も下のチェックボックスのチェックが入っていないのを確認して、
Nextをクリック、次の画面ではEmpty Activityを選択してNext、
次もそのままでFinishをクリック、
これで待っているとプロジェクトができる。

## AVDの用意
次にプロジェクトを実行するための仮想Androidを作成する。

まず右上のツールバーからAVD Manegerを選択すると
ウィンドウが出るので真ん中のCreate Virtual Deviceをクリックして、
使用する端末種類を選択してNext、
次の画面でリストからOreoを選択してNext、

(Oreoを選択した際右のウィンドウの下側に赤文字で、
HAXMのエラーメッセージが出ている場合Install Haxmクリックして、
次のウィンドウの画面で512MBを選択してインストール)
~~(ここで選択を間違えて後で後悔した・・・)~~
次の画面で左下のチェックを外しFinishをクリックして作成完了

## AVDを起動
AVD Managerから緑の三角をクリックして起動、

すると選択した機種の画面が別窓で出てくるので
とりあえず言語設定とキーボード、時間を合わせて、
その後プロジェクトの画面に戻り右上の緑の三角をクリックする。

すると出てくる画面のリストで使うAVDを選択してOK
~~(起動に時間がかかる)~~
別窓の機種画面に表示されれば成功。

~~最後に一言
物理メモリの大切さがとても身に染みた。~~
Windows Admin Center

# はじめに
Windows Server OSを一括管理するツールとして作られたらしく、サーバーマネージャやMMCツールの代替として利用できる(MS曰く)とのこと。

# Windows Admin Centerの活用構成
Windows Admin Centerの活用構成はざっくりと2パターン。

- Windows10端末を管理マシンとして、Windows Admin Centerを使用する
- Windowsサーバを管理マシンとして、Windows Admin Centerを使用する

<font color="red">※PowerShellによるリモート管理が主となるため、Active Directory ドメインは必須</font>

## 管理できない役割
次の役割については管理機能を有していないため、リモートサーバー管理ツール(RSAT)を使用することが推奨されている。

- Active Directory
- DHCP
- DNS
- IIS(インターネット インフォメーション サービス)

## サポートされているOS
|OS種別|製品/製品バージョン|
|:-:|:-:|
|クライアントOS| Windows 10|
|サーバーOS| Windows Server 2016、Windows Server 2019|

# 参考
- MMCを置き換えるサーバ管理ツール、「Windows Admin Center」が正式リリース via @itさん
http://www.atmarkit.co.jp/ait/articles/1804/18/news010.html
- Microsoft、GUI管理ツール「Project “Honolulu”」を「Windows Admin Center」として正式リリース via @itさん http://www.atmarkit.co.jp/ait/articles/1804/16/news041.html
VuePressでディレクトリ構成からサイドバーのメニューを自動設定する


## VuePress、いいよね・・・

VuePress、ちょっと触ってみましたけどいい感じですね。
まだ機能はそこまで豊富じゃないですが
プログラマーとしてはデザイン部分に頭を悩ませずに良い感じに仕上がってくれてるのが有り難いです。
Jekyllの代替として使ってみようかと思っているところです。

## サイドバーを手動で定義するのが面倒です

さて、現バージョンのVuePressにはサイドバーの機能が実装済みですが、
ここに表示するメニューはconfig.jsにて自力で定義してあげる必要があります。

```js
module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}
```

[VuePress - Default Theme Config](https://vuepress.vuejs.org/default-theme-config/#sidebar-groups)


## config.jsで良い感じに設定します

ファイルが増えてくるといちいちconfig.jsに追記するのは面倒なので、ディレクトリ構成を読んでdocs配下にあるmarkdownファイルを自動でメニューに設定してくれるようにconfig.jsに追記しました。

docs配下のディレクトリをメニューグループ、その下にいるmarkdownファイルをメニューとして登録します。
※複数階層のネストには対応していません。


**.vuepress/config.js**


```js
const fs = require('fs');
const path = require('path');

var dirpath = "./docs"
var dirs = fs.readdirSync(dirpath).filter((f) => {
  return fs.existsSync(dirpath + "/" + f) && fs.statSync(dirpath + "/" + f).isDirectory()
})
var sidebarArray = ["/"].concat(dirs.map((dir) => {
  return {
    title: dir,
    collapsable: true,
    children: fs.readdirSync(dirpath + "/" + dir).map((childDir) => {
      return dirpath + "/" + dir + "/" + childDir
    })
  }
}))

module.exports = {
  title: 'My Vuepress',
  description: 'Just playing around',
  config: (md) => {
    md.options.linkify = true
  },
  themeConfig: {
    sidebar: sidebarArray
  }
}
```

このような構成の場合、

```bash
$ tree
.
├── README.md
├── docs
│   ├── README.md
│   ├── ruby
│   │   └── ruby_sample.md
│   └── server
│       ├── aws_setting.md
│       └── install_manual.md
```

こんな感じになります。

![fr_notes___README.jpg](https://qiita-image-store.s3.amazonaws.com/0/8607/32558555-c925-581a-12b3-ff408ee5ad73.jpeg "fr_notes___README.jpg")



あまり綺麗に書けていませんが、とりあえず目的は達成できました。本体にもこういう機能が欲しいですね。

## 参考

VuePressをお試しするに際してはこちらの記事が参考になりました。ありがとうございますー。

https://qiita.com/dojineko/items/aae7e6d13479e08d49fd#%E8%89%B2%E5%A4%89%E6%9B%B4-%E3%83%86%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%B0
Vue.jsでHOC的なことをやりたい

## はじめに
仕事でChart.jsを使ってシステム作ってて、円チャートや棒チャートごとにそれぞれコンポーネントを作っていたため、共通処理が多く
Reactで良く見るHOCみたいなことをやればコード量を減らして綺麗になると思ったので、Vue.jsで出来るか調べてみた

## 結論
Vue.jsにはMixinという機能があり、HOCではないけど今回みたいな共通処理をどうにかしたい場合は、これで解決できそうだった
一応HOCでも実装してみてHOCの方が好みだったが、Vue.jsに関してはMixinを使うのが良い気がしたのでMixinを採用した

## Mixinで実装
■ 修正前

```js:BarChart.vue
export default Vue.extend({
  computed: {
    renderChart() {
      // 各チャートの共通処理部分
      // 主にチャートの表示制御（チャートをレンダリングしない場合はreturn）などをしている
      if (!this.chart) return
      if (!this.chart.length) {
        ...
        return
      }
      ...

      // 各チャートの固有処理部分
      const canvas = <HTMLCanvasElement>this.$el.querySelector('#bar-chart')
      const ctx = <CanvasRenderingContext2D>canvas.getContext('2d')
      ...
    }
  }
})
```
※共通処理は他にもあるが、抜粋してます

■ 修正後

```js:MixinChart.vue
export default Vue.extend({
  data() {
    return {
      isShowChart: false
    }
  },
  computed: {
    isRenderChart() {
      // 各チャートの共通処理部分をこのFunctionにまとめる
      if (!this.chart) {
        isShowChart = false
        return
      }
      if (!this.chart.length) {
        ...
        isShowChart = false
        return
      }
      ...
      isShowChart = true
    }
  }
})
```

```js:BarChart.vue
import CommonChart from '@/components/mixins/CommonChart/CommonChart.vue'

export default Vue.extend({
  data() {
    return {
      isShowChart: false
    }
  },
  computed: {
    renderChart() {
      if (!this.isShowChart) return

      // 各チャートの固有処理部分
      const canvas = <HTMLCanvasElement>this.$el.querySelector('#bar-chart')
      const ctx = <CanvasRenderingContext2D>canvas.getContext('2d')
      ...
    }
  },
  mixins: [CommonChart]
})
```

## HOCで実装
https://github.com/vuejs/vue/issues/6201
こちらを参考にしながら実装
hocという関数でBarChartをラップしている。簡単な処理の流れは以下
①isRenderChartでチャートの共通処理を行い、isShowChartを判断
②props経由でisShowChartをBarChartに渡す
③BarChartでisShowChartを見てチャートのレンダリングの有無を判断

```js:Parent.vue
import BarChart from '@/components/BarChart/BarChart.vue'

const hoc = (w: any) =>
  Vue.extend({
    props: w.options.props,
    data: w.options.data,
    computed: {
      isRenderChart() {
        // 各チャートの共通処理部分をこのFunctionにまとめる
        if (!this.chart) {
          return false
        }
        if (!this.chart.length) {
          ...
          return false
        }
        ...
        return true
      }
    },
    render(h) {
      return h(w, {
        props: { ...this.$props, ...{ isShowChart: this.isRenderChart } }
      })
    }
  })

export default Vue.extend({
  components: {
    BarChart: hoc(BarChart)
  }
})
```

```js:BarChart.vue
export default Vue.extend({
  props: ['isShowChart'],
  computed: {
    renderChart() {
      if (!this.isShowChart) return

      // 各チャートの固有処理部分
      const canvas = <HTMLCanvasElement>this.$el.querySelector('#bar-chart')
      const ctx = <CanvasRenderingContext2D>canvas.getContext('2d')
      ...
    }
  }
})
```
google検索で検索期間を指定して最新の情報を調べる

# google検索で検索期間を指定して最新の情報を調べる

toolを選択して、
![a_1.png](https://qiita-image-store.s3.amazonaws.com/0/127811/c7ea988b-2319-6ec2-3c57-f646da42ba4f.png)


期間を選ぶだけ
![a_2.png](https://qiita-image-store.s3.amazonaws.com/0/127811/a2a2556f-f985-aeda-71dc-31d216d17caf.png)
cinema4dからunityでblendShapesを使う

cinema4dでfbxを書き出して、[unityでblendShapes](https://docs.unity3d.com/2017.3/Documentation/Manual/BlendShapes.html)を使いたい。Unityでは頂点アニメーションをサポートしてないみたいで、代わりにこれを使う。

ポーズモーフ pose morph(参考 https://www.youtube.com/watch?v=TS8zRjvrpfE)
という機能を使い、そのままFBXにかきだしたらいけた。

※昔はstudioというパッケージしか使えなかったが、今はサブスクになったので、みんな使えるはず。

## やり方

* 変形したいオブジェクトを選択し、右クリックから、RiggingTagのなかのpose morphを選ぶ
* PoseMorphタグのbasicという項目で変形させたいものを選ぶ、頂点を変形させたいので、pointを選択
* PoseMorphタグのTagという項目で、pose(キーフレーム的なの)を登録していく。必要に応じてposeを増やし、選んで頂点変形。
* それをそのままFBXとして書き出す

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17747/62190dfc-610c-5ee5-fd0b-e40e3709afb2.png)

## unity上

Unityでみて、SkinnedMeshRendererにBlendShapesという項目がでてたら成功。
以下のような感じでスクリプトからコントロールできる。

```
_skinnedMeshRenderer.SetBlendShapeWeight(0,100f*Random.value);
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17747/bf9d9ec3-0fe5-66c2-d432-9f56a349d77c.png)
公平に分けられたケーキ（アルゴリズム・パズル）

書籍「[プログラマ脳を鍛える数学パズル](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E8%84%B3%E3%82%92%E9%8D%9B%E3%81%88%E3%82%8B%E6%95%B0%E5%AD%A6%E3%83%91%E3%82%BA%E3%83%AB-%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E9%AB%98%E9%80%9F%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E6%9B%B8%E3%81%91%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B70%E5%95%8F-%E5%A2%97%E4%BA%95-%E6%95%8F%E5%85%8B/dp/479814245X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)」からの問題を解いてみます。

#問題
16cm × 12cm の長方形のケーキがあります。二人で交互にケーキを切るのですが、ケーキを切った人が小さい方のケーキを取り（同じ大きさならどちらでもよい）、交代して残りをさらに切るというようにします。（ただし切り方は、辺に平行に直線的に切り、しかも切ってできたケーキの辺の長さは cm 単位になるようにします。）これを最小が 1cm × 1cm になるまで続けます。
さて、切り終えたとき二人の取ったケーキのそれぞれの**総量が等しくなる**とします。このような切り方は何とおりもありますが、その中で切った**「切り口」の長さの総和**を出すとき、その最小値を求めなさい。

#コード例
Rubyで解いてみました。

```ruby:q56.rb
#(x, y)のケーキを切ってできる全ての (面積, 切った長さの合計) のペアを返す
#ただし面積はここでカットした人の総計
def cut(x, y)
  x, y = y, x if x < y
  return @memo[[x, y]] if @memo.has_key?([x, y])
  return {1 => 1} if x == 2 and y == 1
  
  result = {}
  
  #前の人がカットしたところから自分の分を求める
  #「if result[square] > length」は効果の大きい枝刈り（切り口の長さの総和が最小になるものだけ残す）
  calc = proc do |s, t|
    cut(s, t).each do |sqar, ln|
      square = x * y - sqar
      length = ln + s
      result[square] = length if !result[square] or result[square] > length
    end
  end
  
  #可能なあらゆる場合でケーキを切る
  (x / 2).times {|i| calc.(y, x - i - 1)}
  (y / 2).times {|i| calc.(x, y - i - 1)}
  
  @memo[[x, y]] = result
end

X, Y = 16, 12
@memo = {}

result = cut(X, Y)
p result.select {|sqar, _| sqar == X * Y / 2}    #=>{96=>47}
```

計算した結果は「メモ化」して高速化しています。

#結果
答えは47cmです。かかった時間は自分の環境（Core i5-4210U 1.70GHz×2）で0.1秒ほどです。ちなみに`X, Y = 30, 30`の場合で0.4秒ほどになります。いろいろな言語で解いてみるとおもしろいかもしれませんね。

なお、以上は[ブログ記事](http://obelisk.hatenablog.com/entry/2018/03/06/231057)が元になっています。
mrubyで気圧を測ってみた

[蟹さん](https://qiita.com/yamori813/items/c1d8111a3f45c5a74655)でI2Cが使えるようになったので、手元にあったFreescale社製のMPL115A2を試してみました。MPL115A2は以前秋月電子で購入しましたが、現在は販売されていないようです。SPIの方はまだ取り扱っているようです。

![I-04596.JPG](https://qiita-image-store.s3.amazonaws.com/0/104066/01febf2f-95ef-000b-e515-cfff57e3e258.jpeg)

ネットを検索するとMPL115A2のページはたいていfloatで計算していますが、蟹さんはmrubyをMRB_WITHOUT_FLOATでビルドしてlibmをリンクしていないのでfloatが使えません。

いろいろ調べてみたところ、アプリケーションノート How to Implement the Freescale MPL115A Digital Barometer AN3785(Rev 6, 6/2012)の最後の方にfloatを使わないCコードがありました。これをmrubyにポートしてみました。

流れはこんな感じです。Cのコードではshortからintの変換で係数値の符号を移しているのですが、16ビットの半分越えてたらマイナスにするコードを入れてあります。

```ruby
def calculatePCompShort(padc, tadc, a0, b1, b2, c12)
  if a0 >= 0x8000 then
    a0 = a0 - 0x10000
  end
  if b1 >= 0x8000 then
    b1 = b1 - 0x10000
  end
  if b2 >= 0x8000 then
    b2 = b2 - 0x10000
  end
  if c12 >= 0x8000 then
    c12 = c12 - 0x10000
  end
  padc = padc >> 6
  tadc = tadc >> 6
  c12x2 = (c12 * tadc) >> 11
  a1 = b1 + c12x2;
  a1x1 = a1 * padc
  y1 = (a0 << 10) + a1x1
  a2x2 = (b2 * tadc) >> 1
  pcomp = (y1 + a2x2) >> 9
  return pcomp
end

a0 = rtl.i2cread(MPLADDR, 0x04) << 8 | rtl.i2cread(MPLADDR, 0x05)
b1 = rtl.i2cread(MPLADDR, 0x06) << 8 | rtl.i2cread(MPLADDR, 0x07)
b2 = rtl.i2cread(MPLADDR, 0x08) << 8 | rtl.i2cread(MPLADDR, 0x09)
c12 = rtl.i2cread(MPLADDR, 0x0a) << 8 | rtl.i2cread(MPLADDR, 0x0b)

rtl.i2cwrite(MPLADDR, 0x12, 0x00)

padc = rtl.i2cread(MPLADDR, 0x00) << 8 | rtl.i2cread(MPLADDR, 0x01)
tadc = rtl.i2cread(MPLADDR, 0x02) << 8 | rtl.i2cread(MPLADDR, 0x03)

pcomp = calculatePCompShort(padc, tadc, a0, b1, b2, c12)
pressure = ((pcomp * 1041) >> 14) + 800

kpa =  (pressure >> 4).to_s + "." + (((pressure & 0xf) * 1000) / 16).to_s
```

hPaではなくてkPaなんでちょっと分かりにくいですが、float無しに処理できます。

ThingSpeakに投げるようにしてみました。実際のコードはmpl115a2.rbというファイルで[rtlbm-mrubyのsamples](https://github.com/yamori813/rtlbm-mruby/tree/master/samples)の下に入れてあります。

https(TSL)では証明書の有効期間をチェックするために現在の時間が必要で、上のスクリプトではrtl.sntp(ntpaddr)とntpサーバに問い合わせてローカルの時間を合わせています。

![スクリーンショット（2018-04-18 15.50.32）.png](https://qiita-image-store.s3.amazonaws.com/0/104066/47bdc0cf-96cf-86bc-2114-bd25122ac12f.png)

MATLAB Visualizationsでグラフ化してみたところいくつか異常値がはいっていておそらくI2Cの読み取りエラーと思われます。とりあえずMATLABで異常値を省いてグラフ化してみました。

![スクリーンショット（2018-04-19 11.22.37）.png](https://qiita-image-store.s3.amazonaws.com/0/104066/ce822861-ab56-4994-9429-8ac5a6d72972.png)

同じ時間帯の気象庁のデータをMjoGraphでグラフ化してみました。

![graph.png](https://qiita-image-store.s3.amazonaws.com/0/104066/dfa3dfcb-0667-578f-ebb6-dd7bf8ee43fa.png)

気象庁のデーターは海面気圧で、蟹さんが拾ってるのは実測値なので、数値は違いますが、傾向は一致しているようなので、大きく間違えている事はないと思われます。

自分のところのMPL115A2は電源投入後すぐは、ちょっと低めの数字になってしまうような傾向があるようです。1時間くらいすれば安定するようです。

このセンサーは温度のadcを持っていますが、気圧の係数用のもので、気温を測定することはできないようです。

12時台に直射が入り込むところに置いたところこんなグラフになりました。気温が上がって気圧の数値が狂ってしまうためと思われれます。

![スクリーンショット 2020-01-04 6.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/8135f66f-b0f2-924c-0d6e-9a50a11315e0.png)

MPL3115という製品もあってこちらは3V仕様ですが、MPL115は5Vでも使えてちょっと珍しいのですが、BMP180などに比べると一世代前という感じがします。
AMP STARTを活用して簡単にALP（AMP対応LP）を作る


## AMPStart 便利です。

https://ampstart.com/
https://github.com/ampproject/ampstart

AMP用のテンプレートをいっぱい作ってくれているのですが、
こちらのGithubを活用してALP（AMP対応のランディングページ）とかも簡単に作れます。

このプロジェクトのPostHTMLとかPostCSSの
設定が素晴らしくて、このプロジェクトの設定を
そのまま使って、普通の静的HTMLを吐き出しても
いい感じになる。しかもAMP対応。

`git clone git@github.com:ampproject/ampstart.git`

してきて、


### Repository Layout
| Directory                                                               | Description                                                           |
| ----------------------------------------------------------------------- | --------------------------------------------------------------------- |
|  components/      | CSS and HTML snippets (Mustache) for AMP Start components. |
|  build/           | (generated) intermediate generated files. |
|  css/             | CSS assets. |
|  css/ampstart-base| CSS Base AMP Start elements like buttons. |
|  css/templates    | CSS for AMP Start templates. |
|  css/www          | CSS for www.ampstart.com. |
|  dist/            | (generated). |
|  hl-partials/     | Partials that help generate copy pastable html for www.ampstart.com/components.html. |
|  img/             | Image assets. |
|  tasks/           | Gulp tasks. |
|  templates/       | AMP Start template HTML. |
|  www/             | www.ampstart.com |


こんな感じのフォルダ構成になっているので

`git remote rm origin`
レポジトリ消して（別に消さなくてもいい）
`cd ampstart`して

`npm i`とか`yarn`して

wwwフォルダの中のindex.htmlを編集したら
`npm run build`
ビルドした時に、distフォルダにアンプに対応した
（ビルド時にアンプのバリデートチェックもしてくれる）
静的なHTMLが書き出されるので
それを使っている。

一緒にtemplates,hl-partialsフォルダのテンプレート類の
HTMLやCSS、imgも書き出される。
いらない場合はtemplatesなどはフォルダごと
消してしまえば問題ない、
一部のimgやcssはgulpの設定に書いてあるのも
あって消してしまうとエラーになるので
都度、設定が必要かも

私は気にならないのでそのままやってます；


wwwフォルダのhtmlは

````html
<!doctype html>
{{#www-index}}
  <html ⚡>
  {{> ../utils/amp-page-head.snip.html}}
  <body>
    {{> ../components/navbar/navbar.snip.html}}
    <main>
      <header class="www-header center">
```

こんな感じでmustacheとjsonを組み合わせて
書かれているので、これを活用する。
index.htmlと同階層にindex.jsonがあって

```markdown
{
  "www-index": {
    "head-tag": {
      "title": "AMP Start",
      "canonical-path": "",
      "extensions": [
        "amp-carousel",
        "amp-sidebar",
        "amp-lightbox",
        "amp-iframe",
        "amp-selector",
        "amp-analytics"
      ],
      "css-path": "www/index/page.css",
      "font-stylesheets": [
        "https://fonts.googleapis.com/css?family=Inconsolata|Montserrat"
      ],
      "favicon": {
        "href": "../img/www/amp_favicon.png"
      }
    },
    "navbar": {
      "logo": {
        "url": "../img/www/amp_start_logo.svg",
        "width": "119",
        "height": "26",
        "classes": "xs-hide sm-hide",
        "href": "/"
      },
```

こんな感じでこのJsonをうまい具合にパースしてくれる。

CSSもPostcssでグローバルにBasscssを使用。
自動で圧縮してHead内にインラインで突っ込んでくれる。


本当素晴らしいっすね。
私的にはこのプロジェクトのWebpackやGulpの設定が
現時点での静的なHTMLを書き出すベストプラクティスな感が
あります。

ただ、Vuepressってのが出てきてるので、
これはなんかまた良さそうだなと思ってます。


## 参考
https://qiita.com/am_/items/20b7478e9fb86d2acbfd
JavaScriptで'key=value&key2=value2…'StringをObejctに変換するには

存外標準機能でついていなくて、
[jquery - Convert URL parameters to a JavaScript object - Stack Overflow](https://stackoverflow.com/questions/8648892/convert-url-parameters-to-a-javascript-object)
を使う。

>```js
var search = location.search.substring(1); JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') 
```

別解もあるらしく、

>```js
JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) })
```

微妙に変換される文字列が違う。
ひとまずURLエンコードされは文字列は必要なかったので、最初のものを`decodeURIComponent`に変えた

```js
JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') 
```

を使うこととする。
Kubernetesでnodeを安全に除外する

KubernetesのNodeを再起動やメンテナンスをしたい時に、クラスタからNodeを切り離す手順を説明します。
安全に切り離すには、`kubectl drain`コマンドを使います。`drain` は「徐々に排出する」というような意味です。このコマンドを実行すると対象ノードで起動しているPodに停止命令が送られたあとにPodが削除されます。

![](https://kubernetes.io/images/docs/kubectl_drain.svg)

## ノード名を調べる

```bash
kubectl get nodes
```

## ノードを排除する

```bash
kubectl drain {$node_name}
```


### drainに指定できるオプション

| オプション名  | 短縮  | デフォルト  | 説明 |
|:--|:--|:--|:--|
| delete-local-data  |  | false  | emptyDir（ノードが排出されたときに削除されるローカルデータ）を使用するポッドがあっても続行 |
| dry-run  |  | false  | trueの場合、命令は送信せずに結果だけ表示 |
| force  |  | false  | ReplicationController、ReplicaSet、Job、DaemonSetまたはStatefulSetで管理されていないポッドがあっても続行 |
| grace-period  |  | -1  | 正常に終了するために各ポッドに与えられる時間（秒単位）。負の場合、ポッドで指定されたデフォルト値が使用される |
| ignore-daemonsets  |  | false  | DaemonSetで管理されているPodを無視する |
| pod-selector  |  |  | 対象podをラベルセレクタで選択 |
| selector  | l  |  | ラベルでノードを選択 |
| timeout  |  | 0s  | タイムアウトを待つ時間の長さ、0は無限に待つ |

### 例

```bash
kubectl drain {$node_name} --grace-period=900
```

この例では、ReplicationController、ReplicaSet、Job、DaemonSet、またはStatefulSetによって管理されていないポッドがある場合は中止し、15分の猶予時間を与える。


## 対象ノードで動作しているpod一覧を取得する

```bash
kubectl get pods --template \
  '{{range .items}}{{if eq .spec.nodeName "ノード名"}}{{.metadata.name}}{{"\n"}}{{end}}{{end}}'
```

## ノードをメンテナンスする

対象ノードで動作しているpodが無くなったら再起動やメンテナンスを実施します。

## ノードを復帰させる

```bash
kubectl uncordon {$node_name}
```

`cordon` は遮蔽するというような意味なので、`uncordon`は遮蔽を解除するという意味になります。

## 参考

* [Safely Drain a Node while Respecting Application SLOs](https://kubernetes.io/docs/tasks/administer-cluster/safely-drain-node/)
* [Kubectl Reference Docs::drain](https://kubernetes.io/docs/reference/generated/kubectl/kubectl-commands#drain)
* [Kubectl Reference Docs::uncordon](https://kubernetes.io/docs/reference/generated/kubectl/kubectl-commands#uncordon)
RSpecとCapybaraを使ってバックエンド、フロントエンドのパフォーマンスをテストする

RspecとCapybara、Headless Chromeを使ってE２Eテストを行う際に
[Navigation Timing API](https://developer.mozilla.org/ja/docs/Web/API/Navigation_timing_API)を使ってフロントエンドとバックエンドのパフォーマンスも
計測する方法です。

[Navigation Timing API](https://developer.mozilla.org/ja/docs/Web/API/Navigation_timing_API)で取得出来る情報については下記にリンクのイラストに
よくまとめられています。

https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface

一番最初の計測ががnavigationStartで、サーバーからレスポンスが返りはじめる
部分の計測がresponseStartなので、バックエンドの処理に掛かる時間は
```
backEndProcessTime = responseStart - navigationStart
```
と表現することが出来ます。

一番最後の計測はloadEventEndなので、バックエンドの処理に掛かる時間と同様にして
フロントエンドの処理に掛かる時間は
```
frontEndProcessTime = loadEventEnd - navigationStart
```
と表現することが出来ます
大雑把に全体に掛かる時間を２つに分けているだけなので、もっと他にも表現方法はあると思います。

計測方法が分かったのであとはこの処理をCapybaraを使って表現します。    
（page.driver.execute_scriptをつかってjavascriptを実行して結果を取得します）    
ミリ秒単位で結果が取得出来るので下記のように記述すれば、指定した時間以内なら
テストをパスするようになります。

```ruby:my_spec.rb
Capybara.app_host = 'https://hikkoshizamurai.jp/'

describe "performance of https://hikkoshizamurai.jp" do

  before do
    visit '/'
  end

  it "we can see top page" do
      navigation_start = page.driver.execute_script("return window.performance.timing.navigationStart")
      response_start = page.driver.execute_script("return window.performance.timing.responseStart")
      load_event_end = page.driver.execute_script("return window.performance.timing.loadEventEnd")

      backend_time = response_start - navigation_start
      frontend_time = dom_complete - response_start

      expect(backend_performance).to be <  500
      expect(frontend_performance).to be <  2000
      
  end
end
```
QMK Firmware を使って ErgodoxEZ を設定する

キーの調子がよくないので、調べてみたら、[ファーム上げたらErgoDox EZのチャタリングが直った話 - yhara.jp](http://yhara.jp/2017/07/13/ergodox-debouncing) の情報があるので、やってみた

## ビルドツールインストール
変更が速いようなので、最新は公式サイト参照
https://docs.qmk.fm/install-build-tools

```
brew tap osx-cross/avr
brew tap PX4/homebrew-px4
brew update
brew install avr-gcc
brew install dfu-programmer
brew install gcc-arm-none-eabi
brew install avrdude
```


PS：`brew install avr-gcc` は重もくて、10分以上だった

## 自分のレイアウトを編集する
- [僕のように](https://github.com/blueplanet/qmk_firmware/blob/master/keyboards/ergodox_ez/keymaps/gyo/keymap.c) に自分のフォルダーを作ってもいいですし、デフォルトのものを編集しても良い。
- 絶対やっておくべきなのは、 `RESET` キーの設定です。僕は、 [L1の一番左上に](https://github.com/blueplanet/qmk_firmware/blob/master/keyboards/ergodox_ez/keymaps/gyo/keymap.c#L80) 設定しています。

## ビルド
トップフォルダーで `make ergodox_ez:gyo` （キーボードのタイプ:keymap名）でビルドできました

- keymap 名は自分のフォルダーか、デフォルトの場合 default を使う
- ビルド成功したら、 `keyboards/ergodox_ez` 配下に .hex ファイルが生成される

## チャタリングが直った？
む、少し改善されたかも。微妙です。。。

## 参照リンク
[qmk-firmware/keycode.txt at jeo · joecridge/qmk-firmware](https://github.com/joecridge/qmk-firmware/blob/jeo/doc/keycode.txt)
VMware Workstation 12 Proの仮想マシンがVMWare Authorization Serviceのエラーにより起動できない

# 現象
VMWare でサスペンドしていた仮想マシンを起動しようとしたら「VMware Authorization Serviceが起動していません」というエラーが発生した。そこで、Services.mscでVMware Authorization Serviceを開始しようとしたが、サービスが起動できなかった。エラーコードは"6000009"

# 環境
VMware ：Workstation 12 Pro
OS：Windows 10 1079

# 対策
WMware Workstation 12 Proを修復インストールすることで問題が回避できた。

# 補足
修復インストールを実行したためかどうかは不明だが、ブリッジアダプタの接続先が消えていたので、仮想ネットワークエディタから接続先を再設定した。

後から気が付いたのだけど、既に情報が載っていた。
https://communities-gbot.vmware.com/thread/570692