OmniAICreator/Qiita-1.07M huggingface dataset:
ASP.NET MVC 5 + TypeScript + ReactでWebアプリ

# はじめに
ほとんど以下のURLのまま。ありがとうございます。
http://blog.okazuki.jp/entry/2016/09/03/145059

ただし、ASP.NET MVCでViewを使用しようと思うので、少しだけ違う構造になるのでそこだけ備忘録。

# 備忘録
## webpackの設定
本記事投稿時、webpackのバージョンが4以降になっていたため、設定プロパティが変更されていたため、自動作成されたwebpack.config.jsを以下のようにする。
moduleについては[ここ](https://webpack.js.org/concepts/loaders/)を参照。

```js
module.exports = {
    // webpack 4 から追加が必要になった。モードはdevelopment、production、noneが存在する。
    mode: "development",
    // エントリーポイントの設定。
    entry: "./scripts/app.tsx",
    // 出力の設定。
    output: {
        // ★注意 「../」にしておかないとプロジェクトの直下に勝手に「dist」フォルダが作成されて、その中に/Scripts/Dist/bundle.jsが作成されていた。
        filename: "../scripts/bundle.js"
    },
    // webpackで変換・バンドルする前に、loaderと呼ばれるモジュールに処理をさせる場合に設定する。
    module: {
        rules: [
            {
                // loaderの対象拡張子
                test: /\.tsx?$/,
                // 使用するloader。事前にnpm installしておく必要がある。
                use: "ts-loader"
            }
        ]
    }
};
```

## 「npm install -s」は「npm install --save」に置き換えて読む。
「-s」のままだと、webpackのコンパイル時にエラーが出る。
[npmコマンド覚え書き](https://qiita.com/_daisuke/items/d7c8f0aec9730be36267)を参照。

## cshtmlの変更
新しく作成されたプロジェクトをそのまま使用することにしたので、「\Views\Home\Index.cshtml」を次のように書き換える。

```
<div id="content"></div>
```

さらに、「\Views\Shared\_Layout.cshtml」を次のように書き換える。

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello React</title>
</head>
<body>
    @RenderBody()
    <script type="text/javascript" src="~/Scripts/Dist/bundle.js"></script>
</body>
</html>
```

これで、「@RenderBody」に「<div id="content"></div>」が置き換えられる。ここをtypescript側（react-dom）が置き換えてくれる。

## package.jsonをプロジェクトに含める
以下のコマンドを実行すると「package.json」がプロジェクトフォルダ直下（「{projectの名前}\package.json」となる）に作成される。
しかし、プロジェクトに読み込まれていないので、プロジェクトに読み込んでおく。
★「package.config」のことではなく、「package.json」のことを言っている。間違えないように。★

以上。
Flowtype v0.71 で stage1 optional-chaining がサポートされた

flow の changelog を週1ぐらいで眺めているのだが、サポートされたときいてマジかとなった

https://github.com/facebook/flow/blob/master/Changelog.md#0710

> Type support for the Stage 1 Optional Chaining proposal. To use this feature, set esproposal.optional_chaining=enable in your .flowconfig.

言われたとおりに、 .flowconfig に `esproposal.optional_chaining=enable` 追加し、 https://www.npmjs.com/package/babel-plugin-transform-optional-chaining を .babelrc に導入したが、動かない…

調べると optional-chaining は babel7 を使えということになっていたので、babel7にアップデートし(ここでjest/webpack/storybookの対応で1日かかった。覚悟が必要) 次のプラグインを .babelrc.js に追加

```
yarn add @babel/plugin-proposal-optional-chaining -D
```

```js
/* @flow */
type Foo = {
  a?: {
    b?: { c: number }
  }
}

const foo: Foo = {}
const num: ?string = foo?.a?.b?.c
```

ちゃんとエラー出た

```
Cannot assign foo?.a?.b?.c to num because number [1] is incompatible with string [2].

 [1] 37│     b?: { c: number }
     38│   }
     39│ }
     40│
     41│ const foo: Foo = {}
 [2] 42│ const num: ?string = foo?.a?.b?.c
     43│
```

ただしoptional-chain 後の関数コールに対応していない

```js
/* @flow */
type Foo = {
  a?: {
    b?: { c: number, d: Function }
  }
}

const foo: Foo = {}
foo?.a?.b?.d()
```

```
Flow does not yet support method or property calls in optional chains.

     39│ }
     40│
     41│ const foo: Foo = {}
     42│ foo?.a?.b?.d()
     43│

```

まてばどうにかなりそう。


この調子で https://github.com/tc39/proposal-pattern-matching と https://github.com/tc39/proposal-pipeline-operator もお願いします！！！！
Python で仮想通貨情報取得

ちょっと主要仮想通貨間の関係を調べてみようかと考えているが、まず手動でデータ収集をするのは無いでしょう。ウェッブクローラつかってもいいのですが、そこまで手間でなくてもいいのでは、APIがあるはずのではとおもって、試してみたメモを取りました。

## 情報の出所
　　http://www.procrasist.com/entry/cryptcoin-api_ この記事に書いたとおり、https://coinbin.org/btc　
にアクセスしてみたら、エラーではじかれた。まぁ、原因を調べるより他のAPIをさがそうと...
   そこにたどり着いたのは、[CoinApi](https://www.coinapi.io/)　無料で使えるAPIキーは一日100回しか使えないが、私の場合、100回でも何とかなりそうなので、これでいきましょう。
　　早速APIキーを申請して、通貨一覧を取得します。
## 通貨一覧を取得
　　https://rest.coinapi.io/v1/symbols　（Curlでもいいのですが、自分の場合、Postmanを使ってアクセスしてみました。HeaderにX-CoinAPI-Keyを申請したAPIキーでセット）結構でかいので、もう一回プログラムからアクセスしないように、結果を一旦ファイルに保存します（symbols.json）

## 通貨情報取得
　ここからは、Pythonで行きましょう。

必要なパラメータを準備

```
import requests
payload = {'period_id': '12HRS', 'time_start': '2017-01-01T00:00:00','limit':'1000'}
headers = {'X-CoinAPI-Key': '申請したAPIキー'}
```

先ほど保存した通貨一覧情報を読み取る

```python

import pandas as pd
from pandas.io.json import json_normalize
symbols = pd.read_json("symbols.json")
simp = symbols[['asset_id_quote','exchange_id','symbol_id','symbol_type']]

```

あまりも多すぎるので、BITSTAMPのUSDとのレート情報を取る

```python
simpsymbols = simp[simp.symbol_id.str.startswith('BITSTAMP') 
            & simp.symbol_id.str.contains('USD') 
            & (~simp.symbol_id.str.contains('EUR')) ]

```

通貨毎にデータを取得、CSVファイルに保存

```python
url_base = 'https://rest.coinapi.io/v1/ohlcv/{0}/history'

for symbol_name in simpsymbols.symbol_id.unique():
    print (url_base.format(symbol_name))
    data = requests.get(url_base.format(symbol_name),
            headers=headers,
            params=payload).json()
    df =  json_normalize(data)
    df.to_csv(symbol_name+'.csv')
```

## これから
今度の記事はそれらのデータの分析となりますが、気が向いたら。
Anaconda NavigatorのJupyter Notebookが開けない人向け

#a.tool がないっていわれる、そんな人のためだけの記事です。

私だけかもしれませんが、機械学習をやりたいと思いAnacondaを入れたはいいものの、なぜかJupyter Notebookが開けず、つらい思いをしている人向けです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223443/cd8cfb0c-ab7d-644b-e31b-5e4d4d5a93fa.png)


次の瞬間・・・

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223443/5a3ae298-488a-e4c0-dc24-5e72c20e3b0c.png)

```sh:

[xxxxx@Air]% /Users/xxxxx/.anaconda/navigator/a.tool ; exit;
/Users/xxxxx/.anaconda/navigator/a.tool: line 1: activate: No such file or directory

[プロセスが完了しました]
```

ブラウザーも何も動かないんだが・・・。
そしてファイルあるんだけど！！

#解決策
あまりにも初心者過ぎてハマったのですが、結果からいうと、PATHを.zsh_profileではなく、.zshrcに記述することです。

```sh:.zshrc
# added by Anaconda3 5.1.0 installer
export PATH="/anaconda3/bin:$PATH"
eval "$(pyenv init -)"
```

参考にさせて頂いたサイト様によると、.zsh_profileはログインシェルの場合のみ有効で、
今回のAnaconda Navigatorの場合はインタラクティブシェル(ブラウザとやり取りする)なので.zshrcに書くべきという理解です。
※違ったら教えてください・・・・・

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223443/e243b1fb-d334-670c-e802-c3fa56bf74f7.png)

ブラウザで開きました！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223443/a1890459-8d3b-1e2f-dd21-cbfe6074884b.png)

後はNewからPython 3を選択すればNotebookが開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223443/f37456f7-d26c-cc36-9990-62bc97ffcde9.png)
見た目もわかりやすいですね！

#参考にさせて頂きました
HomebrewのインストールからpyenvでPythonのAnaconda環境構築までメモ
https://qiita.com/franxx/items/2d066801a7464a676994

zshの設定ファイルの読み込み順序と使い方Tipsまとめ
https://qiita.com/muran001/items/7b104d33f5ea3f75353f
ASP.NET Core (2.0) + TypeScript + ReactでWebアプリ

# はじめに
ほとんど以下のURLのまま。ありがとうございます。
http://blog.okazuki.jp/entry/2016/09/03/145059

ただし、本記事投稿時点でそのままではできない部分があったので、そこだけ備忘録。

# 備忘録
## webpackの設定
本記事投稿時、webpackのバージョンが4以降になっていたため、設定プロパティが変更されていたため、自動作成されたwebpack.config.jsを以下のようにする。
moduleについては[ここ](https://webpack.js.org/concepts/loaders/)を参照。

```
module.exports = {
    // webpack 4 から追加が必要になった。モードはdevelopment、production、noneが存在する。
    mode: "development",
    // エントリーポイントの設定。
    entry: "./scripts/app.tsx",
    // 出力の設定。
    output: {
        // ★注意 「../」にしておかないとプロジェクトの直下に勝手に「dist」フォルダが作成されて、その中にwwwroot/scripts/bundle.jsが作成されていた。
        filename: "../wwwroot/scripts/bundle.js"
    },
    // webpackで変換・バンドルする前に、loaderと呼ばれるモジュールに処理をさせる場合に設定する。
    module: {
        rules: [
            {
                // loaderの対象拡張子
                test: /\.tsx?$/,
                // 使用するloader。事前にnpm installしておく必要がある。
                use: "ts-loader"
            }
        ]
    }
};
```

## 「npm install -s」は「npm install --save」に置き換えて読む。
「-s」のままだと、webpackのコンパイル時にエラーが出る。
[npmコマンド覚え書き](https://qiita.com/_daisuke/items/d7c8f0aec9730be36267)を参照。
e2eテストメモ

- sleepは絶対使わない
    - 無限ループで待つ場合のインターバルなら良い
- 何も起こらないことを確かめるテストを書かない
    - console.logに出してlogをキャプチャして確かめるなどする
- selenium-webdriverとmochaで書く
Visual Studio でビルド後に既定のフォルダにコピーする

# Visual Studio でビルド後に既定のフォルダにコピーする

いつも忘れるのでメモ

1. ソリューション エクスプローラーでプロジェクトを右クリックして [プロパティ] をクリックする。
2. プロジェクトのプロパティで [ビルド イベント] をクリックする。
3. [ビルド後イベントのコマンドライン] に実行するコマンドを入力する。特定フォルダに実行形式ファイルをコピーするだけなら次でよい。

```bat
copy "$(TargetPath)" C:\Apps
```

マクロ `$(TagetPath)` に設定されている値は、[ビルド後の編集] ボタンをクリックすると表示される、便利。

---
確認した環境
OS: 日本語 Windows 10 Home 64ビット
Visual Studio: Microsoft Visual Studio Community 2017 Version 15.6.7
Ubuntu に Ruby/Tk をインストールする

Ubuntuにインストールする場合、

`gem install tk`

だけでうまくいく時もあるが、これで失敗しても、今までと同じような方法で適当なオプションを指定するとインストールできるケースがある。

```sh
sudo apt install tk-dev
```

```install.sh
gem install tk -- --with-tcltkversion=8.6 \
--with-tcl-lib=/usr/lib/x86_64-linux-gnu \
--with-tk-lib=/usr/lib/x86_64-linux-gnu \
--with-tcl-include=/usr/include/tcl8.6 \
--with-tk-include=/usr/include/tcl8.6 \
--enable-pthread
```

拡張ライブラリを使用する場合は、適宜 ```apt search``` などで検索して ```apt install``` する。新しく拡張ライブラリを入れた時、そのまますぐ認識する場合と、tk のgem をインストールし直さないと、拡張ライブラリを認識しないことがあるようだ。
PowerPointで独立の数学記号を打つ

PowerPointの数式ツールに独立性の記号

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/254343/ef1e4233-4bdd-cc15-3384-0422bd413b23.png)

は用意されていない。

そこで、PowerPointの数式ツールで入力したい場合は、平行記号に下線を引くことで入力する。

__Ctrl__+__U__→__\parallel__と入力→__space__
Sublime text - Emmet 略式展開を効率よく行うためのカスタマイズ (Emmetマジ便利。)

# <font color="#ffa500">Sublime text</font>
Sublime text 3 を使用しております。
Emmetがインストールされていることを前提としています。

## 下準備
1. Sublime text を起動
2. `prereference(n)` - `package settings` - `Emmet` - `Settings - User`を開く

# `!`展開時
初期設定では、 `!` または `html:5` で展開すると、

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
```

のようになります。
便利な機能ではありますが、毎回 `<html lang="ja">` と書き換えるのは、面倒です。

```javascript:Emmet.sublime-settings
{
 "snippets": {
  "variables": {
   "lang": "ja",
   "locale": "ja-JP",
   "charset": "UTF-8",,
   "newline": "\n",
   "indentation": "\t"
  }
 }
}
```

一部、`<html lang="ja">`と関係のない所もあります。

## 解説
### `"lang": "ja"` `"locale": "ja-JP"`
ご覧の通り、日本語、日本であることを示します。

### `"charset": "UTF-8"`
文字セットを`UTF-8`に設定。

### `"indentation": "\t"` `"newline": "\n"`
インデントを、`\t (tab)`に、
改行を`\n`に設定。

`\t` `\n` は、それぞれ、タブと改行です。)

# カスタム展開コード
Emmet では、デフォルトで用意されているコードの他に、
自分自身でスニペットを追加することができます。

```javascript

{
  //カスタムスペニット (html用)
  "html": {
   "profile": "html",
   "snippets": {
    //"コード":"内容" で複数指定可
    "tbl":"<table>\n\t<thead>\n\t\t<tr>\n\t\t\t<th>${1:title}</th>\n\t\t</thead>\n\t<tbody>\n\t\t${child}\n\t<\tbody>\n<\table>"
   }
  },
 }
}
```

## 解説
ほとんどお分かりになると思います。`\n`は改行、`\t`は、タブを表します。
### `{数字}` `{数字:テキスト}`
<dl>
	<dt>数字</dt><dd>カーソルを移す順番 (`tab`で移動する順番)</dd>
	<dt>テキスト</dt><dd>プレースホルダー (入力時に選択された状態になる。)</dd>
</dl>

### その他
||説明|
|:---------:|:------------------:|
|`${0}`     |展開時のカーソル位置    |
|`｜`        |展開時のカーソル位置    |
#### 変数
||説明|
|:---------:|:----------------------------:|
|`${cursor}`|展開時のカーソル位置     |
|`${child}` |`>`での子要素の展開位置 |
|`${id}`    |`#`での展開時に、その位置に展開される       |
|`${class}` |`{id}`と同様          |
|`${lang}`  |`Emmet.sublime-settings`の`variables`の`lang:`|

###### 余談
sublime textの設定ファイルは、コメントも使えるので、jsonじゃなくてjavascriptだそうで…

#出典
+ [Emmet Documentation](https://docs.emmet.io/customization/snippets/)
Unityの備忘録


# 環境
* Unity 2017.4.0f1 (b5bd171ee9ba) Personal
* Visual Studio 2017


# 実施したチュートリアルなど
* [はじめてのUnity 玉転がし](https://unity3d.com/jp/learn/tutorials/projects/hajiuni-jp)
* [Unityの教科書　Unity 2017完全対応版](http://www.sbcr.jp/products/4797393521.html)


# Unity

## C#Script

* SetActive(false)を実行したGameObjectは、GameObject.Find()で検索して取得することが出来ない. Unity Editorでアウトレット接続で設定すればOK.
https://marunouchi-tech.i-studio.co.jp/2290/

## 設定
* Android/iOSにデプロイできなかった場合 http://www.sbcr.jp/support/14128.html

* スマホの縦向き/横向きを設定 http://www.clrmemory.com/unity/apps-horizontal-vertical/

## 外部ツール
* Git管理 http://freesworder.net/unity-git/

* Androidのログ解析ツール：Android Device Monitor（`%USERPROFILE%\AppData\Local\Android\sdk\tools\lib\monitor-x86_64\monitor.exe` ） 

* Visual Studioでデバッグする方法
    - [Visual Studio Tools for Unity](https://msdn.microsoft.com/ja-jp/library/dn940025.aspx) を利用する
    - 外部エディタ（External Script Editor)を設定する
    - Visual Studio 2017でUnity開発用の拡張機能を有効にする https://qiita.com/tenmihi/items/678808a363713c644c8c




# Visual Studio
https://msdn.microsoft.com/ja-jp/library/da5kh0wa.aspx

* `Ctrl+-` : 元の位置に戻る
* `Ctrl+K, Ctrl+C`:	コメントアウト
* `Ctrl+K,Ctrl+U`	コメントアウト解除
* `Ctrl + K, Ctrl+I`クイック ヒントの表示	
* `Ctrl+L` : 1行削除
Node.js fs.renameの処理が失敗して[npm ERR! EXDEV: cross-device link not permitted]と謎のエラーが出た

## 事象
ローカルで作ってたNodeのプログラムをVPSにアップロードしたところ、リネーム処理でコケた。

## コード
実際のコードはこんな感じ。
(抜粋)

```
var fs = require('fs');

fs.rename("hoge.txt", "fuga.txt", function (err) {
  if(err){
    //異常処理へ
    
  }else{
    //正常処理へ
  }
});
```

ローカルだとうまくいってたんだけどなぁ
Node.jsのバージョン、npmのバージョンも合わせてある状態。
Node.js : v8.11.1
npm : 5.6.0

## 解決策
StreamAPIでファイルをコピーしてあげて、コピー完了後に元ファイルを消すと言ったやり方で解決。

```
var fs = require('fs');

fs.createReadStream("hoge.txt").pipe(fs.createWriteStream("fuga.txt")).on('finish',function(err){
  if(err){
    //異常処理へ
  }else{
    //コピーが完了
    fs.unlink("hoge.txt", function(err){
      //ファイル削除完了

    });
  }
});
```

ちょっとネストが深くなってしまうが何かいい方法は無いものなのか。

StreamAPIの使い方がよくわからないから、もっと勉強しないとな。
Vagrantのディスク容量をboxファイルを変更しないで増やす！

## 経緯
* 作業で、ディスク容量が足りなくなり、リストアが出来なくなったので、再環境構築を検討
    * 環境構築をする時間がない
    * boxファイルを変更して、動くか検証する時間もない
    * boxファイルを変更しないで、何か良い方法はないか。。。
        * そもそも、そんな都合の良い事が出来るのか？！

## 良いプラグインがあった！
vagrant-disksizeと言うプラグインがある事に気がつく。
そもそもVagrantは簡単で良いが、容量が少ない事も少なくないので、応用出来そう！！
早速インストール

```
$ vagrant plugin install vagrant-disksize
```

プラグインリストを確認するコマンドは↓

```
$ vagrant plugin list
```

あとは、Vagrantfileにconfig.disksize.sizeを追記して、vagrant upを叩くだけ！

```
config.disksize.size = '150GB'
```

これでリストアでこける事もなく、快適なVMライフを送れます！
（そもそもboxファイルを容量の良い物で環境構築をすれば良かったのだが。。。）
構築してしまってから、時間がなく、手っ取り早く作業をしたいのであればオススメですね！
あくまでも、応急処置程度で考えてもらえれば良いです。

### 以上！
UICollectionView再入門

## はじめに
iOSアプリ開発においてUICollectionViewは頻繁に使用するコンポーネントです。
これまで何度かUICollectionViewを使った画面の開発をしましたが、なんとなく制約をつけたりするだけでイメージに合った画面が作れてしまうので、UICollectionViwe自体を深く理解せずに使用していました。

Appleは[CollectionViewプログラミングガイド](https://developer.apple.com/jp/documentation/CollectionViewPGforIOS.pdf)というドキュメントを用意してくれていますが、これがなかなかボリュームが多く、実際開発にもそれほど困っていなかったので読むのを避けていたのですが、[Material Components](https://github.com/material-components/material-components-ios)などのUI系ライブラリを使うにあたってUICollectionViewへの深い理解が必要になったので、プログラミングガイドを参考に色々と実装を試しながら理解を進めていきました。

ここでは私と同じようにUICollectionViewをなんとなくの理解で使っている人のために、私なりに勉強してまとめた内容をご紹介したいと思います。

## 環境
- XCode9.3
- Swift4.1

## リポジトリ
実装コードはGithub上で公開しています。
https://github.com/takehilo/CollectionView

## UICollectionViewを必要最低限のコードで実装してみる
UICollectionViewを理解する第一歩として、UICollectionViewを使った画面を必要最低限のコードのみで実装してみました。
デフォルトではこんなレイアウトになるのか、というのだけ知ってもらえればいいと思います。

[UICollectionViewを必要最低限のコードで実装してみる](https://qiita.com/takehilo/items/4af35623aadf3c59dc65)

## UICollectionViewFlowLayoutでセルの大きさやセル同士の間隔などを設定する
UICollectionViewFlowLayoutはビルトインで用意されているUICollectionViewのレイアウトオブジェクトです。
UICollectionViewFlowLayoutのプロパティを変更し、セルの大きやセル同士の間隔などを変更できることを確認してみました。

[UICollectionViewFlowLayoutでセルの大きさやセル同士の間隔などを設定する](https://qiita.com/takehilo/items/d0e56f88a42fb8ed1185)

また、UICollectionViewDelegateFlowLayoutを実装することで、セル一つ一つ個別に大きさなどを変更できることも確認しました。

[UICollectionViewDelegateFlowLayoutでセルの大きさやセル同士の間隔などを個別に設定する](https://qiita.com/takehilo/items/dc478d2182595b8ae332)

## 補助ビューを配置する
UICollectionViewのレイアウトでは、セクションに関する情報を表示する補助ビューというものがあります。
フローレイアウト(UICollectionViewFlowLayout)でいえば、ヘッダーとフッターがそれに当たります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/81715/3f38dfd4-4d66-38be-cc5b-aac86b9fa15d.png)

補助ビューについて理解するために、フローレイアウトでヘッダーとフッターを設定してみました。

[UICollectionViewFlowLayoutでヘッダーとフッターを設定する](https://qiita.com/takehilo/items/0b138d6ad92a52ff5fc8)

## セルの強調・選択時にセルの見た目を変化させる
UICollectionViewには、セルの強調・選択状態を管理する仕組みが備わっています。
セルが強調あるいは選択された時にセルの見た目を変化させることができるかを確認してみました。

[UICollectionViewのセルの強調・選択時にセルの見た目を変化させる](https://qiita.com/takehilo/items/06a9ec7ec634d86bd734)

## カスタムセルの作り方とセルの再利用について
ここまでは標準のUICollectionViewCellに背景色をつけただけのセルを利用してきました。
UICollectionViewでは、UICollectionViewCellのサブクラスを作成することで独自のセル(カスタムセル)を作ることができます。

以下の記事では、カスタムセルを作るにはどうしたら良いかをまとめました。
また、UICollectionViewの効率的な処理を支えるセルの再利用についても触れています。

[UICollectionViewのカスタムセルの作り方とセルの再利用について](https://qiita.com/takehilo/items/1145240bb3b72f7d0317)

## カスタムレイアウトの作り方
UICollectionViewでは、UICollectionViewLayoutのサブクラスを作成することで独自のレイアウトを定義することができます。
レイアウトの仕組みが理解できると、UICollectionViewに対する理解が更に深まります。

以下の記事で、カスタムレイアウトの作り方についてまとめました。
[UICollectionViewのカスタムレイアウトの作り方](https://qiita.com/takehilo/items/d49069572c848df9258a)

## ToDo
- 編集メニュー
- 追加・削除・移動
- 異なるレイアウトへの遷移
- UICollectionViewFlowLayoutのサブクラス化
- ジェスチャ
【エディタ拡張】設定を変えたPrefabを複製する

Prefabの一部設定だけを変更して大量に生成したいという事が稀によくあります
いちいちコピーしながら手で設定するのは大変なので、スクリプトを書いて一発で終わらせてしまいましょう
サンプルでは、テンプレートPrefabに追加されたスクリプト`Hoge`に定義された変数の値をイジってPrefabを沢山複製してみます

#サンプル
HPが設定できるだけのHogeを定義しておきます

```c#:Hoge.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Hoge : MonoBehaviour
{
    public int hp;
}
```

`Hoge`を追加したPrefabを`Template`という名前でAssets直下に置いておきます
![スクリーンショット 2018-05-01 14.31.44.png](https://qiita-image-store.s3.amazonaws.com/0/193550/2b152ce4-6f15-cb81-0259-1e2799662a24.png)


`hp`をランダムで設定しながらPrefabをたくさん作ってくれるエディタ拡張です

```c#:HogeGenerator.cs
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;
using UnityEditor;

public class HogeGenerator
{
    //Assets直下にTemplateがあるという想定
    static string TEMPLATE_PATH = "Assets/Template.prefab";

    [MenuItem("Hoge/ホゲを生成")]
    public static void Generate()
    {
        var template = AssetDatabase.LoadAssetAtPath(TEMPLATE_PATH, typeof(GameObject)) as GameObject;
        for(int i = 1; i <= 5; i++) { //とりあえず5回回してみる
            var prefabPath = $"Assets/Hoge{i}.prefab"; //.net4.6の書き方です
            var prefab = PrefabUtility.CreatePrefab(prefabPath, template); //複製
            //以下に"prefab"に対して行いたい変更を記述して下さい
            prefab.GetComponent<Hoge>().hp = Random.Range(10, 100);

            EditorUtility.SetDirty(prefab);
        }
        AssetDatabase.SaveAssets();
        AssetDatabase.Refresh();
    }
}
```

`Hoge > ホゲを生成`を実行すればHoge1~5が生成されて、それぞれにHpがランダムに設定されていると思います

#軽い解説
```c#:
var template = AssetDatabase.LoadAssetAtPath(TEMPLATE_PATH, typeof(GameObject)) as GameObject;
```
`AssetDatabase.LoadAssetAtPath`は関数名の通り、アセットを読み込む関数です
サンプルではPrefabを`GameObject`として読み込んでいますが、テクスチャを`Texture2D`で読み込んだりとかも出来ます

```c#:
var prefabPath = $"Assets/Hoge{i}.prefab"; //.net4.6の書き方です
var prefab = PrefabUtility.CreatePrefab(prefabPath, template); //複製
```
`prefabPath`では複製するPrefabの名前まで含めてパスを記述します
`PrefabUtility.CreatePrefab`で先ほど読み込んだPrefab(`template`)を生成しています

```c#:
//以下に"prefab"に対して行いたい変更を記述して下さい
prefab.GetComponent<Hoge>().hp = Random.Range(10, 100);
```
`prefab`には、複製したPrefabが`GameObject型`で格納されていますので好き放題に設定をしてあげます

```c#:
    EditorUtility.SetDirty(prefab);
}
AssetDatabase.SaveAssets();
AssetDatabase.Refresh();
```
詳細は割愛、おまじないという事で

以上のような使い方以外にもリソースを入れ替えたりとか、マテリアルも複製してカラー変更して適用するとか...いろいろ出来ますので、じゃんじゃん効率化していきましょう！
[ProgressBar](https://docs.unity3d.com/ja/current/ScriptReference/EditorUtility.DisplayProgressBar.html)を表示してユーザーフレンドリーにしてもいいですね
array_merge()の罠にはまった話

PHP勉強してて、配列関数とか見始めたくらいの方に向けて書いてます。

#array_merge()に出会った

ある日こんなソースコードに出会いました。（※説明用に改編してます。）

```php
$judgment = false;
$array1 = ["color" => "red", 2, 4];
$array2 = ["a", "b", "color" => "green", "shape" => "trapezoid", 4];
if ($judgment === true) {
    $array3 = ["shape" => "triangle", 1, 3];
}
$result = array_merge($array1, $array2, $array3);
print_r($result);
```

`array_merge()` ってなんだっけ？
と思いまして、とりあえずPHPマニュアルをググりました。

>**array_merge** — ひとつまたは複数の配列をマージする
>前の配列の後ろに配列を追加することにより、 ひとつまたは複数の配列の要素をマージし、得られた配列を返します。 

ふむ。
配列をくっつけるんだね。

>入力配列が同じキー文字列を有していた場合、そのキーに関する後に指定された値が、 前の値を上書きします。しかし、配列が同じ添字番号を有していても 値は追記されるため、このようなことは起きません。 

ふむふむ。
同じキーは上書きされると。

>入力配列の中にある数値添字要素の添字の数値は、 結果の配列ではゼロから始まる連続した数値に置き換えられます。 

ふむふむふむ。
キーの数値が振りなおされるんだね。分かった。

なるほどね。たぶん出力したらこんな感じでしょ？簡単じゃん。

```php
Array
(
    [color] => green
    [0] => 2
    [1] => 4
    [2] => a
    [3] => b
    [shape] => trapezoid
    [4] => 4
)
```

#出力結果

```php
NULL
```

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

ん？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

様子がおかしい。

#もうちょい詳しく見てみた
if 文ではじかれて `$array3` 取得できてないし、第3引数が原因っぽいなあと思ったので、少し調べてみます。

##第3引数が空じゃない時

まずは一応全部ちゃんと入ってる場合で試します。

```php
$array1 = ["color" => "red", 2, 4];
$array2 = ["a", "b", "color" => "green", "shape" => "trapezoid", 4];
$array3 = ["shape" => "triangle", 1, 3];
$result = array_merge($array1, $array2, $array3);
print_r($result);

/* 結果
Array ( [color] => green [0] => 2 [1] => 4 [2] => a [3] => b [shape] => triangle [4] => 4 [5] => 1 [6] => 3 ) 
*/
```

よし入ってる。

と言うわけでここから本題。
次はNULL・空文字・空配列を入れて試してみます。

##NULLを入れる

```php
$array1 = ["color" => "red", 2, 4];
$array2 = ["a", "b", "color" => "green", "shape" => "trapezoid", 4];
$result = array_merge($array1, $array2, NULL);
print_r($result);

/* 結果
NULL
*/
```

うわ。`NULL`になった。
どうやら、`NULL`で上書きされるみたいですね。

##空文字を入れる
```php
$array1 = ["color" => "red", 2, 4];
$array2 = ["a", "b", "color" => "green", "shape" => "trapezoid", 4];
$result = array_merge($array1, $array2, '');
print_r($result);

/* 結果
NULL
*/
```

うわ。また`NULL`になった。
どっか空だと全部`NULL`になるのでしょうか？

#空配列を入れる
```php
$array1 = ["color" => "red", 2, 4];
$array2 = ["a", "b", "color" => "green", "shape" => "trapezoid", 4];
$result = array_merge($array1, $array2, array());
print_r($result);

/* 結果
Array ( [color] => green [0] => 2 [1] => 4 [2] => a [3] => b [shape] => trapezoid [4] => 4 ) 
*/
```

ｷﾀ━━━━ヽ(☆∀☆ )ﾉ━━━━!!!!
どうやら型の問題だったみたいですね。

#さいごに

**array_merge()の引数は、配列のみにしておこう**

#参考
[array_merge - PHPマニュアル][array_merge]

[array_merge]:http://php.net/manual/ja/function.array-merge.php
Facebook F8 2018参加メモ(Day 0)

# 本記事について
Facebook F8 2018の参加レポートをメモ的に書いていきます。
※主に個人用に

Day 0はearly check-inとAll Voices Eventがあったのでそのメモ。

Day1, Day2はこちら
[Facebook F8 2018参加メモ(Day1)](https://qiita.com/jonghyo/items/353969c19e689df1934d)

# Facebook F8
2007年から実施される、Facebook主催のカンファレンス。
今年は5月1日-2日にサンノゼ マッケンナリー・コンベンションセンターにて開催される。

[Facebook F8](https://www.f8.com/)

# Day 0
## early check-in
カンファレンスに向けてサンノゼ空港に前日入りしたところearly check-inが出来るとのメールが来たので早速会場へ。

![DSC_0895.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/53180b36-07b4-5a94-6a33-0bd4fa9ef7d8.jpeg)
会場入口にガッツリセキュリティゲートが。
以前同会場で行われた、[Atlassian Summit](https://ja.atlassian.com/company/events/summit-us "Atlassian Summit")のときはこんなコトなかったのでちょっとビビりました。

無事セキュリティゲートを通過するとチェックインカウンターが現れます。
カンファレンス前日ですが会場はお祭り気分満載!人もケッコーいました。
![DSC_0894.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/71dc576e-ff34-35ad-5255-a2b311665c7e.jpeg)
事前に発行された、QRコードとgovernment-issued photo ID(要はパスポートなど)を提出して無事badgeをゲット!!

![DSC_0891.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/f287e24b-1d37-2cbe-a94f-73e1c501fe39.jpeg)

![DSC_0886.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/cb0ba030-f0b0-d26b-6831-16a4e1c6a9d8.jpeg)
今年の特典はオリジナルボトルでした!(デザインかわいい)

![28488998-CB5D-4EFF-BA70-5F4CEC5E71EE.jpg](https://qiita-image-store.s3.amazonaws.com/0/254318/6e366552-6fc4-186d-e315-cb7aaf7a3418.jpeg)
実はbadgeにはギミックが隠されていて、FacebookアプリのカメラにかざすとARでいろいろと情報が表示されます。
ここに表示されている場所に行って、Facebookアプリのカメラをかざすとなにか見えるとか...
(全て集めると何かをもらえるそうなので明日以降楽しみ!)

## All Voices Event
無事early check-inを済ませたら、「All Voices」なる前夜祭があることを聞き参戦。
※事前に情報流れてたですが見落としてました...

![DSC_0898.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/e2c10425-23ba-bbf2-6fec-ca8f5a49f335.jpeg)
様々なビール・ワイン・ソフトドリンク、料理が振る舞われ思った以上に豪華!
かなり人がいました。(写真は早い時間帯なので少ないですが...)

![DSC_0897.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/7f1b9120-d0f7-8d10-801f-6ad1759bac9f.jpeg)
ウォーターサーバもF8仕様です!

![DSC_0906.JPG](https://qiita-image-store.s3.amazonaws.com/0/254318/39375c95-1cb1-3625-656e-95d8e0fe7c9c.jpeg)
Diversity Bingoなる、参加者の交流を深めるためのゲームもあり非常に楽しかったです!
ゲームは、色んな人に話しかけて該当する部分があればチェックしてもらってビンゴを作っていくというコミュ障には鬼畜な仕様でしたが...w
お酒の力でなんとか見れる内容にw

色んな人と交流してみて気付きましたが、世界各国の参加者が集まっているんだなと驚きました。
ザンビアからいらした方もいて、移動時間に驚愕ｗ

皆さん、F8をほんとに楽しみにしているんだなーと言った印象。
私も楽しみです!

明日からは本番になりますが、まずはKeynote。
最近Facebookは[色々とありましたし](https://www.techradar.com/news/us-uk-investigating-facebooks-role-in-cambridge-analytica-data-breach)何が語られるか注目ですね。
VM setup on headless KVM (2)

目標：GUI が使えない手元 KVM に ubuntu 仮想マシンをセットアップしたい。X を飛ばすとかは無しで。

[前回](https://qiita.com/kwi/items/161625127302c24961c7)よりも、もっと手っ取り早い方法を見つけたような気がする。

`92.cfg` というファイルを用意して `90_dpkg.cfg` の中身を上書きする。

```yaml:92.cfg
#cloud-config
datasource_list: [ None ]
ssh_pwauth: True
password: password
lock_passwd: False
```

`virt-sysprep` で潜り込ませる。書き換える前の `test.img` は前回同様 ubuntu-cloud のイメージをコピーしておく。

```bash
virt-sysprep --copy-in $PWD/92.cfg:/etc/cloud/cloud.cfg.d/ \
  -a /var/lib/libvirt/images/test.img
```

libvirt に登録し、インストールを行う。

```bash
virt-install --virt-type kvm --name test --ram 2048 \
  --disk path=/var/lib/libvirt/images/test.img,size=16 \
  --graphics none --console pty,target_type=serial --import --network network=default
```

ログインし、cloud-init を無効化する

```bash
sudo touch /etc/cloud/cloud-init.disabled
```
WordPressのデータベース複製手順（ロリポップの場合）

ロリポップ！にて、サブドメインで作成したWordPressのテストサイトにデータベースをエクスポート・インポートする際に躓いたことがあったのでメモ。

#１、複製元サイトのデータベースをエクスポートする
①「ロリポップ！ユーザー専用ページ」にログインする
②「サーバーの管理・設定」→「データベース」をクリックする
③ 複製元のデータベースにログインする
④ 複製したいデータベース（LAから始まるデータベース名）をクリックして、テーブルを展開する
⑤ 複製したいテーブル（wp◯◯_）にチェックをつけて、エクスポートする

#2、複製先サイトのデータベースにインポートする
① インポートしたいデータベース（LAから始まるデータベース名）をクリックして、テーブルを展開する
②「インポート」をクリックして、エクスポートしたsqlデータをインポートする

#３、複製先の「wp◯◯_options」内のURLを書き換える
①「wp◯◯_options」をクリックする
②「option_name」が「siteurl」「home」となっているオプションのURLを、複製先のURL（サブドメインURL）に書き換える
**※この作業を行わないとサイトが表示されません！**

#4、複製先の「wp-config.php」の接頭辞を書き換える
①「ロリポップ！ユーザー専用ページ」を開く
②「サーバーの管理・設定」→「ロリポップ！FTP」を開く
③複製先の「wp-config.php」を開く
④属性を「６００」に変更し、内容を書き換えられる状態にする
⑤「$table_prefix  = 'wp◯◯_';」の「◯◯」を、複製先の数字に書き換える
⑥書き換えが完了したら、属性を「４００」に変更する

#5、テストサイトにログインする
①「ロリポップ！ユーザー専用ページ」を開く
②「サイト作成ツール」→「WordPress簡単インストール」を開く
③「WordPressインストール履歴」にサブドメインで作成したテストサイトのインストール履歴があることを確認する
④管理者ページURL（http://XXXXXXXX/wp-admin/） をクリックして開く
⑤複製元のログインIDとパスワードを入力してログインする
二段階認証利用時に npm dist-tag を使う

追記(2019/01/18): [npm v6.6.0](https://github.com/npm/cli/releases/tag/v6.6.0) からインタラクティブに OTP 入力を促してくれるようになりました。

----

`npm publish` と違ってインタラクティブに OTP 入力を促してくれず E401 で失敗するので、`--otp` オプションを使います。

```console
$ npm dist-tag rm hoge next --otp 123456
```
Linuxディストリビューション

Linuxのバージョンアップがあった。
よく聞くと、SUSEからRed Hatに変わるらしい。
~~いやそれOS違うじゃん。~~
こんがらがったのでイチから調査しよう。

#Linuxディストリビューションとは
- Linuxを一般利用者が利用できる形にまとめたもの。

パッケージみたいなものなのか。
大きく分けて以下の分類がある模様。
よく聞く名前を載せている。

##Debian系
- パッケージ管理 : deb形式。
- Debian GNU/Linux :フリーソフト
 <br>|_ StreamOS :ゲームPC用OS
 <br>|_ Ubuntu 

**deb(ディーイービー)**
バイナリパッケージ。".deb"拡張子ファイル。
```構造:
debian-binary
data.tar.gz (拡張子は圧縮方式により異なる)
　　|_  . (root) (以下、インストール後のディレクトリ構造)
 　　　　|_  usr, bin ... 
control.tar.gz
　　|--- .
 　　　　|--- control
　　　　　　|--- md5sums
```
##Red Hat系
- パッケージ管理 : RPM
- Vine Linux :日本産
- Oracle Linux :Oracle最適化
- Fedora
 <br>|_ Red Hat Enterprise Linux　:Fediraベース(商用)
   <br>　|_ CentOS :EnterpriseLinuxのクローン

**RPM**
RedHat社が開発。".rpm"拡張子ファイル。

##Slackware系
- Slackware
 - パッケージ管理 : tgz
- openSUSE
 - パッケージ管理 : RPM

##独立系
- Arch Linux
 - パッケージ管理 : Pacman
- Gentoo Linux
 - パッケージ管理 : Portage
 - Google Chrome OS　もこの１つ

他割愛。

---
SUSEとRedHatの違いは何だろう。

| 項目 | SUSE | Red Hat |
|:----|:----:|:-------:|
|Linuxカーネル|4.1.12|3.10.0|
|コンパイラ|GCC 4.8.5, Clang 3.7.0|GCC 4.8.5|
|標準ファイルシステム|btrfs/XFS|XFS|
|標準パッケージ管理|YaST, Zypper|RPM,Yum|
|パッケージ形式|RPM|RPM|
謎が深まったので一旦メモ。
**GCC**
コンパイラ。GNU Compiler Collection（グニューコンパイラコレクション)



>参考
Wikipedia(Linuxディストリビューション)
https://ja.wikipedia.org/wiki/Linux%E3%83%87%E3%82%A3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3
Wikipedia(Linuxディストリビューションの比較)
https://ja.wikipedia.org/wiki/Linux%E3%83%87%E3%82%A3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%AF%94%E8%BC%83
[Ionic3] 1つのアプリアイコン画像から複数サイズのアイコンサイズを一括で作成する方法

ionic v3.20.0

# :one: 概要
`resources/icon.png`と`resources/splash.png`から Android/iOS に必要なアイコンを一括で生成する。

# :two: コマンド

(1) 以下のサイズの画像を用意する

* `resources/icon.png`：1024x1024 [px]
* `resources/splash.png`：2732x2732 [px]

(2) 以下のコマンドを実行する

```bash
> ionic cordova resources --force
```

* この処理はionicサービス側で行っているようで、初回はionicにサインアップを求められます
* 指示に従ってサインアップ/サインインします


# :three: 参考情報


```bash:コマンドヘルプ
> ionic cordova resources -h

  Usage:

    $ ionic cordova resources [<platform>] [options]

  Inputs:

    platform ................. The platform for which you would like to generate resources (android, ios)

  Options:

    --force, -f .............. Force regeneration of resources
    --icon, -i ............... Generate icon resources
    --splash, -s ............. Generate splash screen resources

  Examples:

    $ ionic cordova resources
    $ ionic cordova resources ios
    $ ionic cordova resources android
```

* https://ionicframework.com/docs/cli/cordova/resources/
* http://tech.pjin.jp/blog/2017/07/19/create_ionic_app_17/
メンバ変数が構造体の何番目のメンバかをメンバ変数ポインタから推測（出来たら）する

##やりたいこと
```c++:例
get_index(&Point::y);  // 1
get_index(&Point::z);  // 2
```
こういう感じに「メンバ変数ポインタ→それが何番目の構造体の要素か」をしりたい

## 実装方法
構造化束縛で取り出した変数の参照のポインタと変数ポインタを比較していくことで取得することができる

実装例

```c++:get_index.hpp
#include <cassert>

template<class T,class R>
std::size_t get_index3(R T::*p){
    T t;
    auto &[e0,e1,e2] = t;
    int idx=0;
    for(auto tp:{&e0,&e1,&e2}){
        if(tp == &(t.*p))
            return idx;
        idx+=1;
    }
    return 42;
}
```
```c++:main.cpp
struct Point{
    int x;
    int y;
    int z;
};
int main()
{
    std::size_t x = get_index3(&Point::x);
    std::size_t y = get_index3(&Point::y);
    std::size_t z = get_index3(&Point::z);
    assert(x==0);
    assert(y==1);
    assert(z==2);
}
```
https://wandbox.org/permlink/GiglJPuIn9yS5RJB

やったー



## コンパイル時
型の時間の話

コンパイル時に処理する場合、上の実装だと
任意の構造体のコンストラクタ呼び出しは定数式ではない可能性が高いため `T t` の部分が問題になる
そのため、コンストラクタの呼び出しは実行時までしないことにする

コンストラクタの呼び出しをしないと変数の値は未定義になるのでダメそうだが、変数のアドレスには影響を及ぼさないため定数式にすることができる[^1]

実装例

```c++:get_index.hpp
#include <iostream>

template<class T>
class Class{
    static inline T t{};
public:
    template<auto p>
    static constexpr std::size_t get(){
        auto &[e0,e1,e2] = t;
        int idx=0;
        for(auto tp:{&e0,&e1,&e2}){
            if(tp == &(t.*p))
                return idx;
            idx+=1;
        }
        return 42;
    }
};

```

```c++:main.cpp
struct S{
    std::string x;
    std::string y;
    std::string z;
};

int main()
{
    constexpr auto x = Class<S>::get<&S::x>();
    constexpr auto y = Class<S>::get<&S::y>();
    constexpr auto z = Class<S>::get<&S::z>();
    static_assert(x==0);
    static_assert(y==1);
    static_assert(z==2);
}

```
gcc 7.3 : https://wandbox.org/permlink/pJTCcz9mDKesTDdJ
clang 6.0: https://wandbox.org/permlink/CSF5ZK8uvZ28AAQu



[^1]: たぶん。未調査
EC2 Rails 爆速でとりあえず見れるREMP環境を構築する

# はじめに
みなさんは、

**顧客「とりあえず今どんな感じなのか見てみたいんだけど」**

と言われたり、

**PM「とりあえずお客さんに見てもらってフィードバックもらいたいから環境用意して」**

と言われた経験はありませんか？

**「とりあえず！？ノットイージ！！アーユーフロムシカゴ！？」**

と心で思いながらも。
それが最善ならやるっきゃないですよね。

今回はAWSのEC2と「Ruby Stack with Nginx, MySQL, and Passenger」というAMIを利用して爆速で**とりあえず**見れるREMP環境を構築する方法を紹介します。

今回のフローで新たにインストールするのはgitだけです。
おそらく本気出したら5分で構築できます。まじで。

Ruby Stack with Nginx, MySQL, and Passengerドキュメント
http://jetware.io/appliances/jetware/remp_ruby23-170503/profile

# こんな人にオススメ
多少触ったことがある。

- AWS EC2
- Rails
- MySQL
- Git

なにそれ美味しいの？

- Nginx
- Passenger

という人向けです。
インフラの深い知識がなくても環境が作れてしまいます。
便利って人の成長を妨げるよなあ...

# 手順
早速行きましょう。
## インスタンスの作成
AWSのEC2コンソールにログインしてインスタンスの作成クリックします。
<img width="960" alt="スクリーンショット 2018-05-01 13.23.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/baa94e52-7625-8c1a-78fb-f66dc528a717.png">


AWS Marketplace内で「REMP」で検索し、「REMP Ruby Stack with Nginx, MySQL, and Passenger」を選択します。
<img width="1405" alt="スクリーンショット 2018-05-01 13.25.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/2cc51ea2-f8a8-bd78-7366-4e428df08d0b.png">


AMIの詳細な情報や料金体系が表示されます。
このAMIは使用料は無料で、右側に書いているのはあくまでもインスタンスの使用料ですのでご心配なく。
Contenueをクリックして次へ。
<img width="1039" alt="スクリーンショット 2018-05-01 13.29.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/5ff9ec1c-5e29-dd6e-b42b-ee0c70311c9a.png">


ここからは通常通りのEC2インスタンス作成フローと同じなので割愛させていただきます。
まあインスタンスタイプやセキュリティグループを設定するだけです。

起動したら早速パブリックDNS、またはIPにアクセスしてみましょう。
デフォルトで空のRailsプロジェクトが配置されているのでいつもの画面が出ます。
<img width="751" alt="スクリーンショット 2018-05-01 13.37.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/44b8fdcc-ae1b-0392-369a-43a2b71af072.png">


え、もうほぼできてんじゃん

## プロジェクトを配置する
sshでインスタンスに入ります。
``ssh -i hogehoge.pem ec2-user@ec2-xx-xxx-x-xx.ap-xxxx-1.compute.amazonaws.com``

gitはデフォルトで入っていないのでインストールします
``sudo yum install git-all``

インストールが完了したら適切な場所でcloneしましょう。
プロジェクトを配置する場所は``/jet/app``です。

```
cd /jet/app
git clone https://github.com/xxxxx/hoge_project.git
```

## Nginxの設定
Nginxの知識なくても大丈夫！
デフォルトでは``/jet/app/rails_blank``が起動するようにNginxの設定ファイルに記述されています。
なので、先ほどcloneしたプロジェクトに切り替える必要があります。

```vhost:/jet/etc/www/webservers/nginx/conf.d/default.vhost
server {
    listen       80 default_server;
    # listen       [::]:80 default_server;
    server_name  _;
    # root         /jet/app/rails_blank/public;
    root         /jet/app/hoge_project/public; <- 先ほどcloneしたRailsプロジェクトに設定

    passenger_enabled on;
    passenger_min_instances 1;
    rails_env development; <- ここで環境変更できる

    # Load configuration files for the default server block.
    include /jet/etc/nginx/conf.d/*.inc;

}
```

restartで反映させます。

```
restart
```

## MySQLの設定
入っているのはMariaDBですが気にしたら負けです。
デフォルトでrootユーザーがいるのでconfig/database.ymlを編集します。

|key|value|
|:--|:--|
|host|localhost|
|user|root|
|password|なし|

restartで反映させます。

```
restart
```

## Railsの初期処理

俺たちのbundle installを忘れないように。

```
cd /jet/app/hoge_project
bundle install
```

DBの基礎作りも忘れないように。

```
cd /jet/app/hoge_project
rails db:create
rails db:migrate
rails db:seed
```

# 完成
以上で一般公開されたREMP環境が出来上がります。
EC2は課金が分単位なので気軽に試してみてください＾＾

ブログで見たい方はこちら
[EC2 Rails 爆速でとりあえず見れるREMP環境を構築する](http://nabesys.com/article/2018/05/01518/)
Windows環境からCordova-iOSアプリがビルドできるVSTS-CIが凄い！と思ったらガッカリした話

この記事はWindows環境から無料のVSTS-CIを使ってCordova-iOSアプリとCordova-Androidアプリをビルドできて凄い！と思ったらガッカリした話です。

「[1人で「Webアプリ＋ iOS & Android モバイルアプリ＋サーバー処理」を実装するための知見](https://qiita.com/alclimb/items/e199a0019fb6482e7ba9)」に記載したVSTS-CIについての補足記事になります。

# :one: VSTS-CIの凄い所と、ガッカリな所

## 1.1 凄い！と思った内容

* Cordova-iOSをクラウドでビルドできる数少ない環境です
* CI機能だけではなく、「gitリポジトリ」と「Issuesのカンバン機能」と「Wiki機能」などをPrivateかつ無料で利用できます

## 1.2 ガッカリだった内容
**すべて私の下調べ不足が招いたもの**ですが、期待してしまったぶんガッカリしてしまいました('◇')

* [価格ページ](https://www.visualstudio.com/ja/team-services/pricing/)にはビルド時間について記載が無く、CIのホスト数による料金体系しか書かれていない
* 当初は「無料でビルド時間無制限!?本当か?Microsoft太っ腹～」と思っていたら、突如時間制限によるビルドエラーが表示された。流石にそっすよねー
* そのエラーの内容で初めて240分/月の制限があることを知った

<!------------------------------------------------------------------------->

# :two: VSTS-CIとは?

MicrosoftのVSTS(Visual Studio Team Services)に付属するクラウド型のCIサービスです。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/67192/092e9875-2bdf-add4-12d0-5f792f4ddc8f.png)

CIと名にある通り、「ビルドや自動テストをクラウドで自動的にやってしまおう」といたサービスになります。

競合はクラウドだと`CircleCI`, `TravisCI`, `shippable`, `AppCenter`などがあり、オンプレミスだと`Jenkins`や`GitLab-CI`などがあります。

<!------------------------------------------------------------------------->

# :three: VSTS-CIで何ができる?

### (1) ビルドのAgent環境には以下のものが選択できます

* Windows
* Linux(Preview)
* macOS(Preview)

### (2) ソースコードの取得は以下のものに対応しています

* VSTS Git
* GitHub
* GitHub Enterprise
* Subversion
* Bitbucket Cloud
* External Git

### (3) ビルド環境には以下のものが対応しています

* .NET Core
* Ant
* CMake
* Cordova
* Docker
* Go
* Gradle
* Grunt
* Gulp
* Ionic
* MSBuild
* PhoneGap
* Visual Studio Build
* Xamarin.Android
* Xamarin.iOS
* Xcode

など・・・
他にも色々できそうです。

<!------------------------------------------------------------------------->

# :four: 具体的な使用用途

私は以下の使い方を試しました。

リポジトリの`master`ブランチがプッシュされたことをトリガーに以下の動作が自動的に行われます。

1. **macOS環境**をロード
1. `VSTS-gitリポジトリ`からプライベートソースコードを取得
1. `Node.js 6.x系`をセット
1. `npm install -g ionic`でionicをグローバルインストール
1. `npm insatll`でパッケージを取得
1. ionicでHTML,TypeScript,SCSS等のソースコードをバンドルして`wwwディレクトリ`に出力
1. `wwwディレクトリ`から`cordova-android`を使ってAndroidアプリ(apkファイル)を生成
1. `wwwディレクトリ`から`cordova-ios`を使ってiOSアプリ(ipaファイル)を生成
1. ビルドした`Androidアプリ(apkファイル)`と`iOSアプリ(ipaファイル)`のダウンロード

<!------------------------------------------------------------------------->

# :five: 料金
結局料金については公式ページを見ても良く分かりませんでした。とりあえずビルド時間が240分超えたら有料です。
料金について書かれたページを2つ見つけたのでURLを記載しておきます。

#### 「VSTS CI」で検索して見つけたページ
https://www.visualstudio.com/ja/team-services/pricing/

#### 「VSTS CI 240」で検索して見つけたページ
https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-team-services/

<!------------------------------------------------------------------------->

# :six: 最後に
現在は VSTS-CI は使用せずに自前のMac環境でビルドするように構築しました。
ビルド環境の詳細は「[1人で「Webアプリ＋ iOS & Android モバイルアプリ＋サーバー処理」を実装するための知見](https://qiita.com/alclimb/items/e199a0019fb6482e7ba9)」を参照していただければ思います。

VSTS-CIは日本語による情報が少なく、使用前調査の段階から「調べてもよくわからないから、とりあえず使ってみよう」といったスタンスだったので、こういったミスは**致命的ではないので仕方のないリスクとして受け入れる**ことにしました(\*'ω'*)
VirtualBox のネットワークアダプタまとめ

## はじめに
Mac 版 VirtualBox を使っていて，ネットワークアダプタの設定で毎回違いを忘れて調べ直すのでまとめてみる．以下に図の記法を示す．

![VB_NetworkAdapter_通信.png](https://qiita-image-store.s3.amazonaws.com/0/252806/94d7f101-51e1-3fe2-200a-a5068bca209c.png)

## NAT
![VB_NetworkAdapter_NAT.png](https://qiita-image-store.s3.amazonaws.com/0/252806/c8d54e50-b44d-d6db-a8b8-cfd211c22d9f.png)

NAT は内部 → 外部の通信をするのがメイン．VM 毎に NAT 接続が作られるので，VM　間の通信は不可．
（内部 → 外部がメインとは言ったが，パッケージ等をインストールするときに IP を固定ではなく DHCP で動的割り当てにしないと通信ができないことがあるので注意）

## NAT ネットワーク
![VB_NetworkAdapter_NATネットワーク.png](https://qiita-image-store.s3.amazonaws.com/0/252806/fb7a26f7-7ecd-10e7-fe43-2ca2e08274fd.png)

NAT ネットワークは先ほどの NAT に似ているが，同じ NAT ネットワークにつなぐことができるので VM 間の通信が可能．

## 内部ネットワーク
![VB_NetworkAdapter_内部ネットワーク.png](https://qiita-image-store.s3.amazonaws.com/0/252806/1f4bb693-25ca-bd5d-ac43-1bb4b3538b87.png)

内部ネットワークはその名の通り，VM 同士のみで通信が可能な内部的なネットワーク．

## ホストオンリーアダプタ
![VB_NetworkAdapter_ホストオンリーアダプタ.png](https://qiita-image-store.s3.amazonaws.com/0/252806/fabf4c32-662d-7fad-2bf5-5a342d3787dc.png)

ホストオンリーアダプタは内部ネットワークに加え，ホストマシンとの通信も可能なネットワーク．VM のネットワーク設定で NAT と共によく使用される．

## ブリッジアダプタ
![VB_NetworkAdapter_ブリッジアダプタ.png](https://qiita-image-store.s3.amazonaws.com/0/252806/18b40976-96c9-7e3e-c31a-a317c4bd2179.png)

ホストマシンのネットワークに接続する方法．外部から見たらホストマシンと別のマシンが存在するように見え外部，VM 同士，ホストマシンとの通信全てが可能．外部から隔離する必要がなければこれで良い．

## 汎用ドライバ
上記のようなネットワーク設定に加え，UDP　トンネルと　VDE　も使えるようになる．
（この機能を使用するには VirtualBox をソースからコンパイルしてインストール必要があるので注意）
個人的に使用したことがないので参考 URL を載せておく．
・[UDP Tunnel networking - VirtualBox](http://wiki.virtualsquare.org/wiki/index.php/VDE_native_support_for_VirtualBox)

## 最後に
この記事は自分の備忘録用であり，あくまでイメージなので正確性に欠けるかもしれないが悪しからず．訂正，コメント等あればお願いします．

## 参考 URL
・[ネットワーク設定 | VirtualBox Mania](http://vboxmania.net/content/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E8%A8%AD%E5%AE%9A)
Ext JS のビューコンポーネントやコントローラーが発生させるイベントを捕捉する

Ext JS のビューコンポーネントやコントローラーが発生させるイベントを捕捉する方法をメモっとく。

Ext JS で開発していると、このコンポーネントを操作したタイミングで処理したいんだよなと思うことがある。API ドキュメントで該当コンポーネントのイベント一覧を眺めながら推測するという手もあるのだけど、実際に操作したときに発生しているイベントを捕捉した方が早かったりする。

今回は Ext JS Application Development Blueprints の第2章に登場するサンプルコードでイベントを捕捉してみる。実際に手を動かして試してみてほしい。

https://fiddle.sencha.com/#fiddle/2g4d

# ビューコンポーネントが発生させるイベントを捕捉する

![component-event.png](https://qiita-image-store.s3.amazonaws.com/0/67627/904136ec-834c-b916-4b32-24a8c0f80878.png)

ビューコンポーネントが発生するイベントを捕捉してみよう。ブラウザーの JavaScript コンソールから `Ext.first` メソッドでビューを取得し、内包しているテキストフィールドのイベントを `Ext.mixin.Observable.capture` メソッドで捕捉する。

```js
var view = Ext.first('app-search')
Ext.mixin.Observable.capture(view.down('textfield'), function() { console.dir(arguments) })
```

実際にテキストフィールドを操作するとイベントが発生して、JavaScript コンソールに出力される。実際の動作は上記のスクリーンショットを参照してほしい。

発生するイベントが見付かればいいのだが、見付からないときは一旦対象のビューコンポーネントの捕捉を解除しよう。解除するときは `Ext.mixin.Observable.releaseCapture` メソッドを利用する。

```js
Ext.mixin.Observable.releaseCapture(view.down('textfield'))
```

ボタンのイベントを捕捉したいときも下記のように `Ext.mixin.Observable.capture` メソッドを利用する。

```js
Ext.mixin.Observable.capture(view.down('button'), function() { console.dir(arguments) })
```

イベントの捕捉を解除する方法も同様だ。

```js
Ext.mixin.Observable.releaseCapture(view.down('button'))
```

# コントローラーが発生させるイベントを捕捉する

![controller-event.png](https://qiita-image-store.s3.amazonaws.com/0/67627/52473445-d7af-f8f1-5f64-73f60fa2ed36.png)

さらにコントローラーが発生するイベントを捕捉してみよう。`Ext.mixin.Observable.releaseCapture` メソッドに、ビューコンポーネントの代わりにコントローラーを渡すだけだ。

```js
var view = Ext.first('app-search')
var controller = view.getController()
Ext.mixin.Observable.capture(controller, function() { console.dir(arguments) })
```

イベントの捕捉を解除する方法も同様だ。

```js
Ext.mixin.Observable.releaseCapture(controller)
```

---

今回は Ext JS のコンポーネントやコントローラーが発生させるイベントを捕捉する方法について説明した。Ext JS 開発のテクニックとしてぜひ覚えておいてほしい。
babel の import で指定するパスが間違っていても動いてしまう。

# import に指定するパスは case insensitive??
webpackとかReactとかExpressで遊んでいた時のことでした。
以下のようなコードを書いていたのですが、ブラウザで動作させた時は確かに動作していました。
(Helloコンポーネントが正しく表示されていた)

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Hello from './components/Hello';

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById('app')
);
```

しかし、Reactなどとは関係ないwebpackに適用したプラグインが正しく動作していませんでした。
かなり悩んだのですが、`import Hello from './components/Hello';`の`components`のところを`Components`にしたら正しく動くようになりました。
確かに正しいパスは`Components`の方なんですが、逆にReactはなぜ動作していたのか謎でした。


## 原因
**調べてみても情報は出てこなかったので、以下完全に推測です。**

`babel`も使用しているので`import`は`require`に変換されるのですが、これは`node.js`のシステムなようです。
で、`require`はOSのファイルシステムに依存しているんじゃないかな〜と思います。
ちらほらそんなIssueを見かけたので・・・
https://github.com/webpack-contrib/css-loader/issues/53

で、私の使用しているOSはMacなので `case insensitive`で動作してしまった・・・・と推測しています。


ESlintも導入しているのにエラーを表示してくれない・・・
何か良い手はないかな:eye::eye:


**追記 ( 2018/05/04 )**
npmにパスをチェックしてくれる良い感じのを見つけました。
[case-sensitive-paths-webpack-pluginです。](https://www.npmjs.com/package/case-sensitive-paths-webpack-plugin)

> This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk. Using this plugin helps alleviate cases where developers working on OSX, which does not follow strict path case sensitivity, will cause conflicts with other developers or build boxes running other operating systems which require correctly cased paths.

上記説明にある通り、パスが正確に記述されているかをチェックしてくれます。
これにより、OS間の差異を埋めることができます。
実際に試して正確に動作しました！！
安全なWebサイトを運用するためのチェックツール集

# SSL/TLS
## SSL/TLS暗号設定ガイドライン
[SSL/TLS暗号設定ガイドライン(PDF)](https://www.ipa.go.jp/security/ipg/documents/ipa-cryptrec-gl-3001-2.0.pdf)
IPA(情報処理推進機構)が発行している、SSL設定のガイドラインです。(PDF)
全部重要ですが、かなり長いので
高セキュリティ型、推奨セキュリティ型での暗号スイートの詳細要求設定
を見て下さい。

## SSL Server Test (by Qualys)
[SSL Server Test](https://www.ssllabs.com/ssltest/)
SSL導入時、最初に行ってもらいたいテストツールです。
様々な脆弱性などをチェックし、明示してくれます。
有名なチェックツールなので解説サイトなどでA+を取るための設定値などが公開されていますが、情報が古いものが多いので、要注意です。
「Do not show the results on the boards」にチェックを入れるとリストに表示されなくなります。

## CryptCheck
[CryptCheck](https://tls.imirhil.fr)
暗号スイートを設定する際、設定値などをどこかの解説サイトからコピペしている方が多いです。
その設定が本当に合っているか、その設定では危険な暗号スイートが利用できるようになっていないか？をチェックすることができます。
上のメニューの「User agent compatibility」でCipher Suiteのテストもできます。

## Symantec Google Chromeチェックツール (by Symantec)
[Google Chromeにより警告がでるウェブサイトかチェックする](https://www.websecurity.symantec.com/ja/jp/support/ssl-checker)
2018年3月、9月にGoogle Chromeの設定が変わり、Symantec発行の一部の証明書は設定し直さなければなりません（設定しないと危険なサイト扱いになる）。
Symantec、Thawte、GeoTrust、RapidSSLが対象なのですが、証明書の有効期限などを見ていちいち確認するより、このツールを使う方が正確です。

# CSP
## Observatory (by Mozilla)
[Observatory](https://observatory.mozilla.org)
HTTP Headerなどのチェックを行ってくれます。
Content Security Policy(CSP)やReferrer Policyを設定できてないサイトが多いです。

## CSP Evaluator (by Google)
[CSP Evaluator](https://csp-evaluator.withgoogle.com)
CSPの設定値が安全かどうかをテストしてくれます。
Googleが用意した設定例もあります。

# BlackList
## SpamHaus
[SpamHaus](https://www.spamhaus.org/lookup/)
ドメインやIPがブラックリストに載っていないかを調べます。
（細かい解説などは別記事にまとめます。）

# さいごに
個人的に使っているツールを簡単に列挙してみました。
常時SSL化が騒がれている今、こういったツールを使うことで(ある程度は)安全な通信が行えるようになります。是非使ってみて下さい。
Vimで保存時にastyleが走るようにする

# はじめに

コードフォーマッタとしてastyleを使っている。これまでは、プログラムがある程度修正されたらastyleを実行してからgitで`-m "style: performs astyle"`みたいなコミットを作ってたんだけど、よく考えるとアホらしい。gitでコミットのたびにastyleが走るようにするとか考えたんだけど、一番良いのはエディタで保存時にastyleが走ることだと考えて、Vimで保存時にastyleが走るようにした。

# .vimrcの書き方

基本的には[ここ](https://gist.github.com/ossan-pg/c43b090b74b95e315273)の設定そのままで良い。しかし、このままだと、保存時に「Press ENTER or type command to continue」というメッセージが表示されてコマンド入力待ちになってしまう。これは、外部コマンド実行時の結果がメッセージ表示欄に入り切らなかったため、ユーザの確認待ちになっているから。この解決策をいろいろ探したのだけれど、良い方法が見つからなかったので、結局

* astyle 実行直前にメッセージ表示欄を3行にして
* astyle 実行直後にメッセージ表示欄を1行に戻す

という方法にしてみた。結局、.vimrcの該当部分はこんな感じになった。

```vimscript
" using Astyle
function! _performAstyle()
  set cmdheight=3
  exe ":!astyle %"
  exe ":e!"
  set cmdheight=1
endfunction

command! PerformAstyle call _performAstyle()

augroup auto_style
  autocmd!
  autocmd bufWritePost *.cpp :PerformAstyle
  autocmd bufWritePost *.hpp :PerformAstyle
augroup END
```

`autocmd bufWritePost`で、ファイルの拡張子が`*.cpp`と`*.hpp`のときだけ、保存時に`PerformAtyle`が走るようになっている。そのコマンドから呼ばれる関数`_performAstyle()`で、astyleを実行する直前に`set cmdheight=3`でメッセージ表示欄を3行にして、実行直後に`set cmdheight=1`にしている。これだと保存時の`"test.cpp" 57L, 1235C written `みたいなメッセージも消えちゃうんだけど、エラーはちゃんと表示される。もっと正しい方法があれば教えてください＞Vim識者


# .astylerc

ついでに僕の`.astylerc`も晒しておく。

```sh:.astylerc
--style=java
--indent=spaces=2
--indent-modifiers
--indent-classes
--pad-oper
--pad-header
--unpad-paren
--keep-one-line-blocks
--align-pointer=name
--align-reference=name
--break-return-type
--attach-return-type-decl
```

歴史的理由でC/C++なのに括弧としてはJavaスタイルを採用している(マイノリティであることは自覚している)。
また、

```c++
int func(int);
```

みたいに、関数宣言では返り値に改行を入れないスタイル(`--attach-return-type-decl`)なのに対して、

```c++
int
func(int a) {
  return a + 1;
}
```

みたいに関数の実体では返り値に改行をいれる(`--break-return-type`)のも趣味ですね。

# 実行結果

なんか適当にフォーマットを乱した後、最後に`:w`でastyleが走り、フォーマットが修正されたのがわかると思う。ただし、本来なら表示される`"test.cpp" 9L, 95C written`という保存時メッセージが表示されずに消えてしまう。

![vimformat.gif](https://qiita-image-store.s3.amazonaws.com/0/79744/72c88cf3-7dfb-fff1-657c-acf023930ddd.gif)

# まとめ

Vimでファイルの保存時にastyleが走るようにしてみた。そんなの頻出かと思ったのだが、探しても意外に欲しい感じのが見つからなかったのでQiitaに上げておきます。保存時メッセージが消えても特に困ってはいないけれど、より良い方法があれば教えてください。

# 参考

* [Vim で C ファイル保存時に astyle でコードフォーマットする](https://gist.github.com/ossan-pg/c43b090b74b95e315273)
* [Artistic Style 3.1 公式ドキュメント](http://astyle.sourceforge.net/astyle.html)
お気楽にnginxのDockerイメージを作ってみる

nginxサーバのイメージを作ってみます。

### 設定ファイル

まず、ローカルに適当にディレクトリ作って以下のファイルを作ってください。

```dockerfile:Dockerfile
FROM alpine:3.6

# nginxのインストール
RUN apk update && \
    apk add --no-cache nginx

# ドキュメントルート
ADD app /app
ADD default.conf /etc/nginx/conf.d/default.conf

# ポート設定
EXPOSE 80

RUN mkdir -p /run/nginx

# フォアグラウンドでnginx実行
CMD nginx -g "daemon off;"
```

```nginx:default.conf
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /app;

        location / {
        }
}
```

```html:app/index.html
<html>
<body>
TEST
</body>
</html>
```

### イメージ作成

作ったディレクトリに移動して以下のコマンドでイメージ作れます。

```sh
docker build . -t original_alpine_nginx
```

### イメージ確認

```sh
docker images
```

```sh:結果
REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
original_alpine_nginx     latest              2bab041e0c34        6 minutes ago       6.44MB
```

### コンテナ立ち上げ

```sh
docker run -d -p 80:80 --name sample_container original_alpine_nginx
```

### 動作確認

http://127.0.0.1/

### 後始末

用が無くなったら消しましょう。

```sh
docker rm -f sample_container
docker rmi original_alpine_nginx
```
Nimで言語処理100本ノック 00. 文字列の逆順

ちょっと触ったNimが楽しかったので[言語処理100本ノック 2015](http://www.cl.ecei.tohoku.ac.jp/nlp100/)してみます。
完走~~する~~できるとは言っていない。

# 準備

バージョンは0.18。

* [Nim programming language | Nim](https://nim-lang.org/)

* [至高の言語、Nimを始めるエンジニアへ - Qiita](https://qiita.com/rigani/items/6e87c7cee6903ed65ed2#_reference-6a03381ae6ded97ecb47)

↑のリンクなどから日本語訳を読んだりするが、基本公式ドキュメント(英語)を頑張って読む。

インストールは
`curl https://nim-lang.org/choosenim/init.sh -sSf | sh`
環境が古いとコンパイルに失敗するので、Ubuntuなら`apt-get update;apt-get upgrade`しておく。

* [apt-getの利用リポジトリを日本サーバーに変更する - Qiita](https://qiita.com/fkshom/items/53de3a9b9278cd524099)


[Nim Playground](https://play.nim-lang.org/)
のコンパイルが終わらないのは私だけ？

# 問題

[言語処理100本ノック 2015#sec00](http://www.cl.ecei.tohoku.ac.jp/nlp100/#sec00)

>文字列"stressed"の文字を逆に（末尾から先頭に向かって）並べた文字列を得よ．

# コード

```nim0.nim
import unicode
const str = "stressed"
echo str
echo reversed(str)
```

他言語(Pythonばっかりだけど)の解答例見るにこういう方法のためのノックじゃない気がする…
Chromeで自己証明書（などの不正証明書）を使用したサイトにアクセスする方法

# 問題

Google Chrome の最近のバージョンでは、不正な証明書を使用しているサイトにアクセスできなくなりました。

<img width="643" alt="Screen Shot 2018-05-01 at 13.22.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/108071/61f67f4d-666c-1ebe-9d92-194c6d193378.png">

セキュリティ上は非常に良いことですが、社内サイトで自己証明書が使われているものがあり、アクセスできなくて困っていました。

# 対応方法

上のような警告画面が表示された状態で、以下の文字を打ち込みます（アドレスバーに入力するのでなく、ブラウザウィンドウにフォーカスが当たった状態で入力）。するとアクセスできます。

```
thisisunsafe
```

この文字列はたまに変更されるようです。