OmniAICreator/Qiita-1.07M huggingface dataset:
WordpressのボイラープレートのBedrockを使ってみる

## 利用のきっかけ
Laravel Valetの標準搭載ドライバにWordpressのBedrockというのがあったので使ってみた
[Laravel Valet](https://laravel.com/docs/5.5/valet)

## Bedrockの特徴
公式サイトのドキュメントと使ってみた感想としては以下の通り
[Bedrock](https://roots.io/bedrock/)

* プログラム構造がプロジェクトで作成するソースコードと、Wordpressコアのソースコードが分離されているので、Gitなどでのソースコード管理が楽

* Wordpressの各種ライブラリをComposer管理下にすることで、ライブラリ管理が楽

* Laravelのように、phpdotenvにより.envファイルで環境変数を管理でき、configディレクトリにて開発環境と本番環境の使い分けが楽

* パスワードがWordpress標準よりも堅牢なものに差し替えられている

* 素のWordpressと構造的に大きな違いは無いので、簡単に理解・導入ができる。

## インストール方法
[Installing Bedrock](https://roots.io/bedrock/docs/installing-bedrock/)

composer用のプロジェクト作成コマンドが準備されているので、以下コマンドでインストール可能

```
composer create-project roots/bedrock [project name]
```

プロジェクトディレクトリに移動して、Laravel Valetを使っている場合は「valet link」とすれば、管理下におかれる。

.envの以下あたりを設定して、

```
DB_NAME
DB_USER
DB_PASSWORD
DB_HOST
DB_PREFIX
WP_HOME
```
対象のローカルのサイトにアクセスすると、インストールウィザード画面に遷移して、言語選択とサイト基本情報を入力して、インストール完了

情報もそこそこ多く特に詰まることも無いので、しばらく使ってみようと思います。

## 補足情報

Wordpressプラグインやテーマで、Composerパッケージとして管理されていない物も以下で色々と管理されている
[WordPress Packagist](https://wpackagist.org/)

上記に無いプラグインでも、普通にPackagistの方で登録されているもので、
[Packagist](https://packagist.org/)
composer.jsonのtypeが以下のようになっていれば、

```
"type": "wordpress-plugin",
```
Bedrockのcomposer.jsonのextra/installer-paths設定が反応して、プラグイン用のディレクトリに配置してくれる。
JetBrains製エディタのIndexing...を抑止する

JetBrainsさんのエディタ(intelliJやWebStorm)にはとってもお世話になっているんですが、
機能と共にIndexingの頻度が上がって全体の動きの機敏さが下がってきました。
(プロジェクトのサイズが大きくなってくると時間も尚更かかりますね。。)

↓↓↓

<img width="711" alt="スクリーンショット 2018-02-15 10.25.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/39330/a87a8c65-0874-3517-4723-4a984663317e.png">

Indexingの仕事としては構文/エラー強調表示、コード補完など、開発サポートのための索引付けをやってくれているそうです。

---

今回はこれの対策を。
Preferences -> Directoriesを選んで、索引付けしたくないディレクトリをExcludeします。
これだけです。

<img width="834" alt="スクリーンショット 2018-02-15 11.11.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/39330/e76d646c-71fe-864a-b964-762f939ed3eb.png">

自分の場合はWebStorm(Javascriptに強いエディタ)を使っていますが、ライブラリを格納するnode_modulesディレクトリをExcludeしたら劇的にIndexingの頻度・時間が減りました。
様々なケースにおけるベストプラクティスを把握するまでには至っていませんが、やってみると生産性上がるかもくらいの感じで未だやったことの無い方は試してみると良いのではないでしょうか。
linuxのコマンドラインで SHREW SOFT VPNCLIENTを使おうとしたらはまった

ネットで検索した手順に従ってビルドしてみたが、ikec を起動すると
*** Error in `ikec': double free or corruption (out): 0x00000000........ ***
に。。

ネット上を検索したら、エラー事象の報告はあるけど解決策が無かったのでとりあえず適当にソースを修正。無事VPN Gateway に接続できました。


```patch
--- ike_orig/source/libike/manager.file.cpp     2011-02-07 01:40:00.000000000 +0900
+++ ike/source/libike/manager.file.cpp  2018-02-15 10:28:11.268267508 +0900
@@ -178,8 +178,13 @@ bool _CONFIG_MANAGER::file_vpn_load( CON
        else
                path.add( sites_user );

-       path.ins( PATH_DELIM, 1, path.size() - 1 );
-       path.ins( config.get_id(), strlen( config.get_id() ), path.size() - 1 );
+       if (path.size() == 0){
+//             path.add(PATH_DELIM, 1);
+               path.add( config.get_id(), strlen( config.get_id() ));
+       } else {
+               path.ins( PATH_DELIM, 1, path.size() - 1 );
+               path.ins( config.get_id(), strlen( config.get_id() ), path.size() - 1 );
+       }

        return file_vpn_load( config, path.text() );
 }

```

ちなみに下記のような感じでバックグラウンド実行するとCPU 100%張り付きになりました（泣）。

```
ikec -r hoge.vpn -u <user> -p <pass> -a &
```

とりあえず、 source/ikec/main.cpp の while ループに sleep(100)の１行追加。
TeXの擬似コードでネスト（入れ子）を見やすく表現

はじめに
---
TeXにて論文執筆中、擬似コードを記述する場面があった。
パッケージは、`algorithmic.sty`を使用。
その際、if文をネストする必要があったのだが、

```tex
%パッケージインポート
\usepackage{algpseudocode,algorithm}

\begin{algorithm}
\begin{algorithmic}[1]

\If{〜}
\If{〜} 〜〜 \EndIf
\EndIf

\end{algorithmic}
\end{algorithm}
```

と記述すると、

<img width="493" alt="スクリーンショット 2018-02-15 10.53.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/133979/9c90dbd2-54c3-369b-59bf-f746770387af.png">

のように表示され、見づらくなってしまう。

しかし、


`\algnewcommand{\IIf}[1]{\State\algorithmicif\ #1\ \algorithmicthen}
\algnewcommand{\EndIIf}{\unskip\ \algorithmicend\ \algorithmicif}
`
を擬似コード前で記述し、ワンラインでif文を表現したい部分にて、

`\IIf{〜}　〜〜　\EndIIf`

と記述することで表現できる。

改善後
---
```tex
%パッケージインポート
\usepackage{algpseudocode,algorithm}

%ワンライナーで表現するため
\algnewcommand{\IIf}[1]{\State\algorithmicif\ #1\ \algorithmicthen}
\algnewcommand{\EndIIf}{\unskip\ \algorithmicend\ \algorithmicif}

\begin{algorithm}
\begin{algorithmic}[1]
\caption{擬似コード}
\If{$x = 1$}
\IIf{$y = 1$}  yを出力 \EndIIf
\EndIf

\end{algorithmic}
\end{algorithm}
```

<img width="493" alt="スクリーンショット 2018-02-15 11.00.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/133979/3bb0bbb8-c698-cdf8-609d-c0e9256ca665.png">

また、`end if`を除くことも可能である。
その際は、`\EndIIf`を除くだけで良い。

<img width="493" alt="スクリーンショット 2018-02-15 11.04.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/133979/876780ce-60ae-61ff-95b9-465336cbd6ae.png">

これでネストの表現が見やすくなった。

## 参考
[Algorithmic: Put If and EndIf into same line　@StackExchange](https://tex.stackexchange.com/questions/184154/algorithmic-put-if-and-endif-into-same-line)
wordファイル順序一括印刷

①Macro1を導入して、印刷したいファイルパス下記ように記述する。
（ファイル全部選択して、sakura.exeに直接ペーストして、ファイルパスを取得できる）
![image](https://qiita-image-store.s3.amazonaws.com/0/197416/eb2acfe3-799b-f2e2-814d-3041541ea22e.png)

②開発→マクロをクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/197416/4e754d55-51e3-f25d-5bbd-976a4faef41d.png)
③Macro1を行って、印刷できること。
![image](https://qiita-image-store.s3.amazonaws.com/0/197416/704548ea-7208-e482-ada8-e74600ca1b0a.png)

Sub Macro1()
'
' Macro1 Macro
'
'
    Dim MyWd As Word.Application
    Dim MyDoc As Word.Document
    Dim fileNm As String
    
    For i = 1 To ActiveDocument.Paragraphs.Count
    
        Dim doc As Document
        
        fileNm = Replace(ActiveDocument.Paragraphs(i).Range, vbCr, "")
        If fileNm <> "" And InStr(fileNm, ".doc") Then
            Set MyWd = CreateObject("Word.Application")
            Set MyDoc = Word.Application.Documents.Open(fileNm)
            
            'print 最終版
            With ActiveWindow.View.RevisionsFilter
            .Markup = wdRevisionsMarkupNone
            .View = wdRevisionsViewFinal
            End With
            '＜印刷＞
            Application.PrintOut FileName:="", Range:=wdPrintAllDocument, Item:= _
            wdPrintDocumentContent, Copies:=1, Pages:="", PageType:=wdPrintAllPages, _
            Collate:=True, Background:=True, PrintToFile:=False, PrintZoomColumn:=0, _
            PrintZoomRow:=0, PrintZoomPaperWidth:=0, PrintZoomPaperHeight:=0
            
            ActiveWindow.Close
        End If
        
    Next
End Sub
FilezillraユーザーのためのAmazon S3

WindowsでもMacでも利用できるFTPソフトが欲しい！
そしてAmazon S3にもアップロードできるようにしたい！
そんな時に使いやすさでおすすめなのが、Filezillaです。

[Filezilla](https://filezilla-project.org/)

基本的には無料で使えます。
しかし、S3へのアップロードをするためには有料版が必要です。。
S3へのFTP接続が不要な人は無料版で大丈夫かと思います。
Macだと[App Store](https://filezillapro.com/ftp/mac/)から購入することができます。
Windowsのかたは[こちら](https://itunes.apple.com/us/app/filezilla-pro/id1298486723)
※$12.99（2018年2月現在）

ダウンロード後はインストールしてください。

##　S3に接続する
<img width="608" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/82937/60c5e4c7-9def-a87b-1630-dd7bf3ffb849.png">

|設定項目|値|
|:-----------------|:-----------------|
|ホスト|s3.amazonaws.com|
|プロトコル|S3 Amazon Simple Storage Service|
|ユーザー|アクセスキー ID※|
|パスワード|シークレットアクセスキー※|

※アクセスキーとシークレットアクセスキーはAWSコンソールで確認可能です。
詳しくは下記記事などを参考にして設定してください。
https://qiita.com/miwato/items/291c7a8c557908de5833

無料版ではプロトコルの部分に表示されない「S３」の項目が表示されます。

これでレンタルサーバーのように静的ファイルをS3にアップロードすることができます。
Lightningでupsertを使う


- List\<SObject>はupsertできない
- Lightningでレコードリストを引数としてApexに渡すと、型宣言がList\<Account>やList\<Contact>であったとしても実体はList\<SObject>になっている
- つまり、そのままだとLightningコンポーネントからApexにレコードリストを渡してもupsertできない

----

```java
public class MyComponentController {
    @AuraEnabled
    public static void saveRecords(List<Account> records) {
        upsert records;
        //=> System.TypeException: DML on generic List<SObject> only allowed for insert, update or delete
    }
}
```
----


- しかし、List\<Account>やList\<Contact>を新たに生成してaddAllすることでupsert可能なリストを生成することはできる。

----

```java
public class MyComponentController {
    @AuraEnabled
    public static void saveRecords(List<Account> records) {
        List<Account> recordsToUpsert = new List<Account>();
        recordsToUpsert.addAll(records);
        upsert recordsToUpsert;
    }
}
```
GoogleBotのレンダリング結果が真っ白な理由を探る(SPAのせいじゃ無いよ!)


[React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！#SPA って Google に index されるの？](
https://qiita.com/numanomanu/items/af97312f34cf1388cee6#spa-%E3%81%A3%E3%81%A6-google-%E3%81%AB-index-%E3%81%95%E3%82%8C%E3%82%8B%E3%81%AE)

を見ていたらそう言えば[自分が作ってるSPA](http://taiyaq.com)ってちゃんとインデックスされるのかな
と調べてみました。

驚きの白さ

![Search_Console_-_Fetch_as_Google_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/ae46c24d-6647-6344-f787-a2a592001db7.png)

なんでー。SPAやっぱりちゃんとレンダリングされないじゃん。
いえ。結論から言うと自分がアホなだけでした。

# GoogleBotのchromeバージョンを調べる

[こちらのサイト](http://var.blog.jp/archives/69476727.html)を参考に現在のGoogleBotのchromeバージョンを調べたところ

2018/2/14現在は**version41**であることがわかりました。

![chrom41.png](https://qiita-image-store.s3.amazonaws.com/0/3844/7e353002-e680-a7f8-cccb-968df79bfbd7.png)


# chrome 41で確認する

<!--
今更ですが一つのPCに古いchromeをインストールすることができませんでした
あとはvertulaboxでlinux入れてそこに古いchrome入れれば、、、
linuxで古いchrome入れる方法もかんたんじゃないと知る
(今ふと思ったんだが古いディストリビューション入れればよかったのかな。最新を入れてしまった)
-->


[https://www.browserling.com/](https://www.browserling.com/)
を使えば簡単に確認できました。

古いchromeってインストールしようとするとかなり大変みたいですね。これを知らず手元のmacで解決しようとして大変苦労しました。

![error.png](https://qiita-image-store.s3.amazonaws.com/0/3844/751fc1bf-ca0e-7b6e-cd15-3a70a3aa0e26.png)
あとは通常のchrome操作でエラーを探るだけです。

今回は、**アロー関数で引っかかっていました。(T_T)**

TypeScriptのtargetをes5にしていたんですがアロー関数が何故か出力されていました。
ちょっとそれはまた別な問題なので今回は原因がわかったところまでで。

# 最後に
解決策は意外とシンプルなものでしたが、気づくのに大変時間がかかりました。
``"Fech as Google" SPA ``で検索したらこの解決策が上位に来るようになっていただきたい
Elasticsearch(5.4.2)の謎を解明するための実験結果。サービス無停止でデータノードを安全に削除してメンテする。

# データノードを安全に削除する
データノードを減らしたい、データノードだけメンテしたい。そんな時に。


# 構成
データノード複数台

# 手順
・対象ノードからシャードを追い出す（追い出し命令実行）
・再配置が実行されてシャードがなくなるのを待つ
・対象ノードのElasticsearchを止める
・追い出し命令停止


# コマンド
curlはマスターノードで実行

・ノードからシャードを追い出す(7.3.2でも動いた)

```
curl -XPUT http://localhost:9200/_cluster/settings -H "Content-Type: application/json" -d '{
  "transient": {
    "cluster.routing.allocation.exclude._name": "data-lab-01"
  }
}'
```
複数nodeの場合はカンマ区切りで書く（例"node1,node2"）


注意：
シングルノードに移行させたい場合は、すべてのインデックスをレプリカを０にしないとこのコマンドで追い出しても（実際は追い出されないが・・）
クラスタ系のURLをたたくと遅くなる
たぶんシャードにnodeでも書かれているんだろう。



・シャードがなくなったら

```
curl -s -XGET http://localhost:9200/_cat/shards | grep 'node_name' | wc -l
```

・とめる（対象データノードで実行

```
systemctl stop elasticsearch
```

・確認

```
curl -XGET http://localhost:9200/_cluster/settings
```

・追い出し命令停止

```
curl -XPUT http://localhost:9200/_cluster/settings -d '{
  "transient": {
    "cluster.routing.allocation.exclude._name": ""
  }
}'
```

・確認

```
curl -XGET http://localhost:9200/_cluster/settings
```


# 結果
クラスターヘルスはグリーン
削除（切り離された）データノードを落としてメモリやSSDの増設などができる。
削除したままでもOK。
MacでWindowsキーボードを使う設定

# 概要
- メイン機がWindowsからMacになりました。
- キーボードは日本語配列、かな入力してます。
- Windowsによくある「Ctrlキーが左下」のキーボードでのクセがあるのでCommandキーを左下に割当ててます。
- 外部キーボードはFILCOのMINILAです。

# キーボードの設定例
## 内蔵キーボード（日本語配列）
![mac_keyboard_config.png](https://qiita-image-store.s3.amazonaws.com/0/12592/690d97dd-af5c-5b03-5cce-a044e6efba91.png)

## 外部（Windows）キーボードの例
![FILCO_keyboard_config.png](https://qiita-image-store.s3.amazonaws.com/0/12592/1e37a5d4-976a-1053-83f0-cbb3314ce19b.png)

## Karabinerの設定例
外部キーボードはKarabinerを使用します。
下記からインストールしてキーマッピングをお好みに合わせます。

**Karabiner**
https://pqrs.org/osx/karabiner/

![karabina_config.png](https://qiita-image-store.s3.amazonaws.com/0/12592/433677c1-4ab7-0ba5-ed70-d41aa10cab50.png)
apache2+phpでソースが表示される

Ubuntu18.04+apache2+PHP7.4で確認。

```apt install libapache2-mod-php```
して
```systemctl restart apache2```

```/etc/apache2/apache2.conf ```
に
```AddType application/x-httpd-php .php```
入れたりとかとか、色々やってダメなら

```ls /etc/apache2/mods-enabled```
してみる。php7.4.conf と php7.4.load が無かったら、

**```a2enmod php7.4```**

外す時は
```a2dismod php7.4```

**sudo忘れないでね。**

あと、apache2の再起動も
``` systemctl restart apache2```


2020/05/29 追記

php7.4にしたので、解説も変えました。
古いPHPが生きてると邪魔なので
```a2dismod php7.2```
とかやって、古いバージョンはお休みしてもらってから restart してください。

2020/02/10 追記
Ubuntu20.04＋PHP8.0でも確認しました。
Alpine Linux+Ruby+RuboCop+GitだけのDockerfile

どうも、おはようございます。

最近、勤め先の研修でpaizaのスキルチェックのような形式でコーディングテストを受けています。

「回答は https://paiza.io/ja/projects/new で実行できること」という制限があり、多重ループを乱用したりして力技で解こうとすると「メモリが足りません」とか「タイムアウトしましたとか」で怒られるので、ちゃんとアルゴリズムを考えないとだめなので苦労していますが勉強になっています。

プログラミング言語は好きなものを選んでよいのでPythonかJavaScriptでやろうと思ったのですが、勉強のためにあえてRubyを選びました。

Rubyは初めてなので勝手がわからず、とりあえずMac OSにrbenvとRuboCopをインストールして取り組んでいます。

でも、なんとなく環境をdockerで用意したいなと思ったので、早起きしてDockerfileを書いてみました。

RubyとRuboCopとGitが動けばOKの最小構成にしたいので、以下のような感じです。

```Dockerfile:Dockerfile
FROM alpine:3.7
MAINTAINER syousei <ishimaru.masato@gmail.com>
RUN apk update && \
    apk upgrade && \
    apk add --no-cache \
    bash \
    curl-dev \
    ruby-dev \
    build-base \
    git \
    ruby \
    ruby-irb \
    ruby-io-console \
    ruby-rdoc \
    ruby-bundler
RUN mkdir /usr/app
WORKDIR /usr/app
COPY Gemfile /usr/app/
COPY Gemfile.lock /usr/app/
RUN bundle install
```

```shell:bash
$ ls
Dockerfile
Gemfile
Gemfile.lock
```

```text:Gemfile
source 'https://rubygems.org'

gem 'rubocop', require: false
```

※ ```Gemfile.lock``` は空

で、buildしてrunします。

```
$ docker build -t syousei/dev .
$ docker run -v [host path]:/usr/app -it syousei/dev
```

```shell:bash
/usr/app # ruby -v
ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-linux-musl]
/usr/app # rubocop -v
0.52.1
/usr/app # git --version
git version 2.15.0
```

以上です。
Vue.jsでSPAサイトを作成するチュートリアル【8. ビルド編】

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。


## 目次

* [表示編](https://qiita.com/buchiya4th/items/cff0b2ab9ebd550c4e0f)
* [ルーター編](https://qiita.com/buchiya4th/items/f154191c8157bbd2239a)
* [コンポーネント編](https://qiita.com/buchiya4th/items/d5a62722f1fc26230df0)
* [CSS編](https://qiita.com/buchiya4th/items/6f5db9f58ee66982438e)
* [JS編](https://qiita.com/buchiya4th/items/3f3b9c6e48866e6d9d27)
* [ライブラリ編](https://qiita.com/buchiya4th/items/b4814c0018f9311af461)
* [メタ編](https://qiita.com/buchiya4th/items/dd8f16dfcd296bd247bb)
* ビルド編 ←イマココ


## 前提

* タスクは`npm scripts`で一限管理
* コマンドは`yarn`を使用
* `vue-cli`の`webpack-simple`を使用


## バージョン

* "vue": "^2.5.11"
* "webpack": "^3.6.0"

## npm scriptsの確認

このチュートリアルの流れでnpm scriptsに開発用コマンドを書いて使ってきました。
現状は大体以下のようになっているかと思います。

```js:package.json
{
  // 省略
  "scripts": {
    "eslint": "eslint src --fix",
    "watch:server": "browser-sync start --config bs-config.js",
    "watch:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "watch:css": "node-sass src/css/style.scss dist/css/style.css -w --source-map true",
    "watch:js": "webpack -w",
    "start": "run-p watch:*",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  // 省略
```

メインの開発は`yarn start`で/srcを監視し変更ファイルを/distへコンパイル等をおこなっています。
必要に応じてCSSプロパティの並べ替えやESLintをコマンドで実行していました。
/distを製品版として扱っても良いのですが、不要ファイルが残っていたり製品版として含まなくても良いもの（mapファイル等）が吐き出されている場合があり、不要なものはなるべく含めないほうが良いかと思います。
そこで今回は/dist内をきれいにして必要なものだけ吐き出すコマンドを用意します。

ディレクトリを削除して作成しなおすためにパッケージを追加します。

```bash

$ yarn add -D rimraf mkdirp
```

そして完成したnpm scriptsがこちらです。

```js:package.json
{
  // 省略
  "scripts": {
    "eslint": "eslint src --fix",
    "watch:server": "browser-sync start --config bs-config.js",
    "watch:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "watch:css": "node-sass src/css/style.scss dist/css/style.css -w --source-map true",
    "watch:js": "webpack -w",
    "start": "run-p watch:*",
    "build:clean": "rimraf ./dist",
    "build:create-dir": "mkdirp dist/js",
    "build:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "build:css": "node-sass src/css/style.scss dist/css/style.css",
    "build:js": "webpack",
    "build": "run-s build:clean build:create-dir build:file build:css eslint build:js"
  },
  // 省略
}
```

devを削除してbuildを一新しています。
watchはrun-pで平行処理をおこなっていましたが、buildでは順番が必要なものがあるのでrun-sで直列処理をおこないます。
watchで監視していたものを監視しないコマンドでbuildに複製しているものと新しく追加したコマンドがあります。新しいものを説明します。
build:cleanは、rimrafで/distを削除します。
build:create-dirは、mkdirpで/distを作成します。（コンパイル前に存在しないとうまく動作しないため
あとは、順番を考慮してrun-sコマンドの後に順番に並べていきます。
以下のコマンドを実行して/distがきれいになったら成功です。

```bash
$ yarn build
```

## まとめ

npm scriptsは慣れてしまえば難しいものではありません。
便利なパッケージがいろいろあるので、パッケージの使い方がわかれば駆使して高度なこともできるかと思います。
開発に必要な環境構築をできるようにnpm scriptsを自由に操作できるようにしていきましょう。
Command /usr/bin/codesign failed with exit code　エラーでビルド実行できない

Command /usr/bin/codesign failed with exit code　エラーでビルド実行できなくなった。

証明書を作り直したが未解決。

'~Library/Developer/Xcode/Derived Data' でプロジェクト名を含むフォルダとフォルダ以下を削除し、ターミナルでプロジェクトルートフォルダに対し「xattr -rc .」することで解決した。

参照元
https://teratail.com/questions/723071
Tileを切り替えずマップをサクサク作れる、TerrainTile、PilelineTile、RuleTile

　Tilemapでマップを作る時、複数のTileを何度も何度も切り替えてマップを作ります。

　この投稿で紹介する`TerrainTile`、`PipelineTile`そして`RuleTile`を使えば、（あなたが使いたいマップによっては）Tileの切り替えをせずに、たった1つのTileで目的のマップを作れるかもしれません。

　本投稿では、`TerrainTile`、`PipelineTile`そして`RuleTile`を紹介します。

# デモ

　まずは`PipelineTile`と`TerrainTile`のデモを示します。Tileを切り替えず一つのTileだけでマップを作成しています。Tileは一つで作っていますが複数の種類のSpriteが表示されていることに注目してください。

　`PipelineTile`の例

![`PipelineTile`.gif](https://qiita-image-store.s3.amazonaws.com/0/4125/f9e9b991-41e4-4fb4-4b2c-eddd841d780e.gif)

　`TerrainTile`の例

![`TerrainTile`.gif](https://qiita-image-store.s3.amazonaws.com/0/4125/87b5e8fd-f85a-c0bb-4077-1bb40c28d6cf.gif)


# ScriptableTile

　Tilemapの強みの一つは、その拡張性です。

　`TerrainTile`、`PilelineTile`そして`RuleTile`はその拡張性を生かした成果物の一つです。

　これらのクラスは、`TileBase`というクラスを継承したクラスです。TilemapにこのTile自身が置かれた時と、周りに新たなTileがTilemapに置かれた時の挙動が拡張されています。

　`TerrainTile`や`PilelineTile`のように、TileBaseを拡張し独自の挙動を定義したものを[ScriptableTile](https://docs.unity3d.com/2017.3/Documentation/Manual/Tilemap-ScriptableTiles.html)と言います。

# 周りのTileからSpriteを自動的に決定&回転

　[通常の作り方で作った](https://docs.unity3d.com/2017.3/Documentation/Manual/Tilemap-CreatingTiles.html)Tileは、常に同じSprite一つだけを表示します。

　`TerrainTile`、`PilelineTile`そして`RuleTile`は、置いた場所に隣接するTileの存在の有無から、事前に設定した複数のSpriteから自動的に表示するSpriteを決定し、適切にSpriteを回転させるTileです。

　次のGifを見てください。

![simple.gif](https://qiita-image-store.s3.amazonaws.com/0/4125/f7bc3a13-1135-d5db-3222-b5270749d630.gif)

　もともと置いてあったTileも、新たに置いたTileもどちらもTerrainTileです。

　新たなTileが置いたタイミングで、もともと置いてあったTileのSpriteが変わりました。

　新たに置いたTileは、置いたタイミングで、もともとあったTileの更新前・後とどちらも違うSpriteが表示されました。

　このように、置いた場所に隣接するTileの存在の有無から、事前に設定した複数のSpriteから自動的に適切なSpriteを選び、適切に回転させてくれます。

　Tileを切り替えずとも、1つのTileでサクサクマップを作成することができます。

# PipelineTile

　5種のSpriteを設定し、上下左右隣接4セルの存在の有無からSpriteを決定し、適切に回転させてくれるTileです。

# TerrainTile

　15種のSpriteを設定し、隣接8セルの存在の有無からSpriteを決定し、適切に回転させてくれるTileです。

　以下の記事に、どういうSpriteを準備すればいいのかをまとめました。

　「[ダンジョンを作れる！TerrainTileを使ってみよう！](https://qiita.com/RyotaMurohoshi/items/1629c50a9d9f70f31c83)」
 

# RuleTile

　「隣接Tileがどういう状態か」で「どのSpriteを表示するか」というルールも自分でカスタマイズできるTileです。

# 2d-extras

　`TerrainTile`、`PilelineTile`そして`RuleTile`は[2d-extras](https://github.com/Unity-Technologies/2d-extras)の中にあります。

　[2d-extras](https://github.com/Unity-Technologies/2d-extras)、Unity公式の2D拡張ライブラリで、GitHubのUnity-Technologiesのリポジトリにあります。

　2Dと言いつつ、まだTilemap関連のコードしかありません。

　使いたい人はGitHubからクローンしてきて、Unityプロジェクトにインポートしてきてください。
ansibleテスト用サーバをdockerで立てる

ansibleを試してみたくて、ansibleクライアントを適当にdockerで立てることに。
sshで繋げて、一般ユーザでログイン出来て、パスなしでsudoが出来れば良い。
(これで十分かはまだ分からないが)

以下のXXXXXはdockerホスト(ansibleサーバ)上のid_rsa.pubの内容を貼り付けること。

```:Dockerfile
FROM ubuntu

ENV PATH $PATH:/usr/local/bin/:/bin:/usr/bin:/usr/X11R6/bin:/sbin:/usr/sbin:/usr/local/bin:/usr/local/sbin

RUN sed -i 's|archive.ubuntu.com/ubuntu/|ftp.riken.jp/Linux/ubuntu/|g' /etc/apt/sources.list && \
        apt-get update && \
        apt-get dist-upgrade -y && \
        apt-get install -y sudo openssh-server ssh python zsh vim net-tools locales && \
        rm -rf /var/lib/apt/lists/*

RUN systemctl enable ssh && \
        mkdir /var/run/sshd && \
        locale-gen ja_JP.UTF-8 && \
        useradd --home-dir /home/summer4an --password testtest --groups sudo --create-home --shell /bin/bash --user-group summer4an && \
        echo 'summer4an ALL=NOPASSWD: ALL' >> /etc/sudoers && \
        mkdir /home/summer4an/.ssh/ && \
        echo 'XXXXX' >> /home/summer4an/.ssh/authorized_keys && \
        chown -R summer4an.summer4an /home/summer4an

ENTRYPOINT [ "/usr/sbin/sshd", "-D" ]
```

以下で実行。

```bash:
docker build -t summer4an/ubuntu_ssh:1.0 ./ 
docker run -d --name test_container --hostname test_container summer4an/ubuntu_ssh:1.0
```
npm コマンドの省略

# 覚えたこと

- npm コマンドの省略
 - npm install
 - --save-dev

## npm installは省略できる。
```ruby:省略前
npm install
```

```ruby:省略後
npm i
```
## --save-devは省略できる。
```ruby:省略前
npm i --save-dev gulp
```

```ruby:省略後
npm i -D gulp
```

間違い、その他オススメなことがありましたら、是非ご指摘ください！
ユーグリットの互除法を使って最大公約数と最小公倍数を計算してみた

##ユーグリットの互除法とは
最大公約数を求める手法のアルゴリズム。
2 つの自然数 a, b (a ≧ b) について、a の b による剰余を r とすると、 a と b との最大公約数は b と r との最大公約数に等しいという性質が成り立つ。この性質を利用して、 b を r で割った剰余、 除数 r をその剰余で割った剰余、と剰余を求める計算を逐次繰り返すと、剰余が 0 になった時の除数が a と b との最大公約数となる。
引用：[WikiPedia](https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%83%E3%83%89%E3%81%AE%E4%BA%92%E9%99%A4%E6%B3%95)
イメージとして[こちら](http://arithmetic.archivs.org/sansugaku/sansugaku-06.html)のサイトの図解が分かりやすいです。

```.py
 a=1112
 b=695
 #最大公約数
 def gcd(a,b):
  while b!=0:
    a,b=b,a%b
  return a
 print(gcd(a,b))
 
 #最小公倍数
 def lcm(a,b):
  return a*b//gcd(a,b)
 print(lcm(a,b))

#>>>139
#>>>5560
```
RedmineとGitLab@Dockerのバックアップ＆リストア

## 概要
[前々回記事](https://qiita.com/iwa-na/items/d9fedf8b4a2fb156d446)で構築したRedmine+GitLabの環境での、RedmineとGitLabのバックアップ＆リストアについての内容です。
[sameersbn](https://github.com/sameersbn)さんのイメージを使用していますが、バックアップ＆リストアが簡単に行えます。

## 使用Dockerイメージ
| REPOSITORY              | TAG                 |
| ----------------------- | ------------------- |
| sameersbn/redmine       | 3.4.4-2             |
| sameersbn/gitlab        | 10.4.2              |


## Redmineバックアップ＆リストア
### バックアップ
[sameersbnのREADME](https://github.com/sameersbn/docker-redmine#creating-backups)に、
*コンテナは停止する事をお勧めします。*
とあるのでコンテナを停止してからバックアップを実行する。

```sh:コンテナ停止
host$ docker stop redmine && docker rm redmine
```

```sh:バックアップコマンド実行
# 環境変数設定
host$ source .env
# バックアップコマンド実行
host$ docker-compose -f redmine/docker-compose.yml run --rm redmine app:backup:create
```

たったこれだけで、バックアップ完了。
念の為バックアップファイルになにが含まれるか確認してみる。

```sh:バックアップファイル確認
host$ ls /srv/docker/redmine/redmine/backups/
1518013409_redmine_backup.tar
host$ tar tf /srv/docker/redmine/redmine/backups/1518013409_redmine_backup.tar 
backup_information.yml
database.sql.gz
files.tar
dotfiles.tar.gz
plugins.tar.gz
themes.tar.gz
```

DB／添付ファイル／sshの鍵ペア／プラグイン／テーマが保存されている模様。

### リストア
まっさらな環境へリストアする場合は、一度Redmineの起動まで済ませておき、バックアップファイルを`/srv/docker/redmine/redmine/backups/`へ配置しておく。

リストアの場合も、コンテナを停止しておきリストアコマンドを実行する。

```sh:コンテナ停止
host$ docker stop redmine && docker rm redmine
```

```sh:リストアコマンド実行
host$ source .env
host$ docker-compose -f redmine/docker-compose.yml run --rm redmine app:backup:restore
　：

# バックアップファイルの選択プロンプトが表示されるので、、
‣ 1518013409_redmine_backup.tar (created at 14 Feb, 2018 - 23:24:57 JST)

# リストアしたいバックアップファイルを選択しEnter押下
Select a backup to restore:1518013409_redmine_backup.tar
```

## GitLabバックアップ＆リストア
Redmineの手順とコンテナ名以外は全く同じ手順。

### バックアップ
```sh:コンテナ停止
host$ docker stop gitlab && docker rm gitlab
```
```sh:バックアップコマンド実行
host$ source .env
host$ docker-compose -f gitlab/docker-compose.yml run --rm gitlab app:rake gitlab:backup:create
```
バックアップファイル出力先
`/srv/docker/gitlab/gitlab/backups/`

### リストア
```sh:コンテナ停止
host$ docker stop gitlab && docker rm gitlab
```
```sh:リストアコマンド実行
host$ source .env
host$ docker-compose -f gitlab/docker-compose.yml run --rm gitlab app:rake gitlab:backup:restore
```

## おわりに
RedmineとGitLabの環境を構築するにあたり、なんとなくで選んでみたsameersbnのイメージでしたが、正直これほどまで簡単にバックアップとリストアができる事に驚きました。
非常によく考えられたDockerイメージだと思います。
サイトの移転のときにやること


URLの変更を伴うサイト移転について。メモ。

# サイト移転の事前準備
- サイトマップは旧と新、両方作って、両方送信するのがgoogle推奨（必須ではない）
    - 新 URL を含むサイトマップ ファイル
    - 前 URL を含むサイトマップ ファイル

古いサイトマップ削除すると表示回数が激減することも…
https://productforums.google.com/forum/#!topic/webmaster-ja/RpaIIwzrMJU
> １ヶ月しないうちに、旧サイト（http://）のインデックスはほぼなくなり、
> 新サイト（https://）はゼロからぼちぼちのインデックス。
> 表示回数が激減し、売上が1/3に落ち込みました。

Σ(￣ロ￣lll)ｶﾞｰﾝ

Googleは旧サイトマップを送るのを推奨
https://support.google.com/webmasters/forum/AAAAzAMeFTEQCs8DGlUw2c/?hl=ja

SEO効果を失わない、サイト移行の注意すべきポイント https://ayudante.jp/column/2014-06-24/13-38/

Googleヘルプ サイトの移転
https://support.google.com/webmasters/topic/6029673?hl=ja&ref_topic=6001951
ディレクトリに含まれるサイズの大きいファイルを検索（シェルスクリプト）

こんにちは。
指定したディレクトリの下位に存在するサイズの大きいファイル（大きい順に```n```個のファイル）を表示させるシェルスクリプトを作ってみました。検索のために find コマンドを使っています。

```console
$ ./find_large_files.sh -n2 .
122G .
-rw-r--r--@ 1 kkdd  staff   4.2G 11 12  2017 Win10_1711_Japanese_x64.iso
-rw-r--r--@ 1 kkdd  staff   4.0G 10 29  2016 old/Win10_1607_Japanese_x64.iso
```

ただしディレクトリ直下（深さ1だけ）を対象にするならば、```ls -S``` を使うだけで良いと思います。

```console
$ (cd . ; ls -lhS | tail -n +2 | head -n 2 )
-rw-r--r--@ 1 kkdd  staff   4.2G 11 12  2017 Win10_1711_Japanese_x64.iso
-rw-r--r--@ 1 kkdd  staff   4.0G 10 29  2016 old/Win10_1607_Japanese_x64.iso
```

```find_large_files.sh
#!/bin/sh
### default value
nmax=4

while [ $# -gt 0 ]
do
  case "$1" in
    -n* )
      nmax="$(echo "$1" | sed 's/^-n//')"
      shift 1
      ;;
  esac
done

for dir in "$@"; do
  du -sh "$dir"
  siz=$((1024*1024*1024))  # = 2**30 = 1GB
  cd "$dir" || exit
  while :
  do
    findfiles=$(find . -size "+${siz}c")
    nfiles=$(echo "$findfiles" | wc -l)
    [ -n "$findfiles" ] && [ "$nfiles" -ge "$nmax" ] && break
    [ $siz -eq 1 ] && break
    siz=$((siz / 2))
  done
  [ -n "$findfiles" ] && echo "$findfiles" | tr '\n' '\0' | xargs -0 ls -ldhS | head -n "$nmax" | sed -e 's/\ \.\//\ /'
  cd - >/dev/null 2>&1 || exit
done

exit $?
```
Cordovaのチュートリアルをやってみる 第十回

# 使用したもの(環境)
 1. cordova
 1. visualStudioCode
 1. windows10
 1. Android
 
 
---

# チュートリアルを訳しながらやってみる
チュートリアルのページは下記。

[Module 11: Using Hardware Acceleration](http://ccoenraets.github.io/cordova-tutorial/hardware-acceleration.html)

前回のチュートリアル。

[Cordovaのチュートリアルをやってみる 第九回](https://qiita.com/tokky_se/items/519368d3c2bbdc631487)

環境構築については別途まとめてあるので下記参照。

[cordova&VSCodeで環境を構築するまでの右往左往メモ。](https://qiita.com/tokky_se/items/346429d234c91bece11d)

---


# Module 11: Using Hardware Acceleration

In this module, you add hardware accelerated page transitions when the user navigates between the list and details views.
このモジュールでは、ユーザーがリストビューと詳細ビューの間をナビゲートするときに、ハードウェアアクセラレーションによるページ遷移を追加します。

index.htmlに下記のように変更を加えます。

1\. headタグ内にpageslider.cssを追加。

```html 
<link href="assets/css/pageslider.css" rel="stylesheet">
```

2\. jquery.jsの後にpageslider.jsを読み込むようにscriptタグを追加。

```html 
<script src="lib/pageslider.js"></script>
```

PageSliderは[ここ](https://github.com/ccoenraets/PageSlider)の小さなライブラリです。

app.jsを下記のように変更します。

1\. Local Variablesセクションにおいて、PageSliderのオブジェクトを生成します。

```js
var slider = new PageSlider($('body'));
```

2\. これらのrouteでは、$('body').html()の呼び出しを置き換えて、同じ引数を関数に渡します。

```js
slider.slidePage(new HomeView(service).render().$el);
```

もう一つは、

```js
slider.slidePage(new EmployeeView(employee).render().$el);
```

ちょっと日本語訳がうまくないですが、要するに$('body').html()で画面表示を変更していた処理をslider.slidePageでラッパーしただけです。

チュートリアルページにはアプリケーションをテストしましょう。とは書いてありませんが、先に動作を確認してみます。  
![test.gif](https://qiita-image-store.s3.amazonaws.com/0/196422/b0730905-843a-fe97-22fc-166f4fa206d2.gif)

モバイルっぽくスライドしているのがわかります。

さて、ハードウェアアクセラレーションとはなんでしょう？

[Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた](http://un-tech.jp/performance-gpu/)

要するにブラウザもアニメーションで動かすならGPUで一部処理しちゃおうよ！ということらしいです。  
このチュートリアルではライブラリを使っただけなので正直ほぼ関係ないです。  
(チュートリアルのタイトルに問題があるような…)

---

# 参考URL

[Module 11: Using Hardware Acceleration](http://ccoenraets.github.io/cordova-tutorial/hardware-acceleration.html)

[Cordovaのチュートリアルをやってみる 第九回](https://qiita.com/tokky_se/items/519368d3c2bbdc631487)

[cordova&VSCodeで環境を構築するまでの右往左往メモ。](https://qiita.com/tokky_se/items/346429d234c91bece11d)

[Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた](http://un-tech.jp/performance-gpu/)
gulpを使って変更したファイルだけをコピーする

更新したファイルだけ取得したい、という状況になり、勉強がてらgulpで書いてみました。
ただこれだと、追加したファイルが対応出来ないんですよねえ。

```javascript:gulp.js
var gulp = require("gulp"),
    changed = require("gulp-changed");

paths = {
    src: "./src/**/*.+(php|js|css)",
    dest: "./dest",
    deploy: "./deploy"
}

gulp.task("deploy", function() {
    gulp.src(paths.src)
        .pipe(gulp.dest(paths.deploy));
});

gulp.task("copy", function() {
    gulp.src(paths.src)
        .pipe(changed(paths.deploy))
        .pipe(gulp.dest(paths.deploy))
        .pipe(gulp.dest(paths.dest));
});

gulp.task("watch", function() {
    gulp.watch(paths.src, ['copy']);
});

gulp.task("default", function() {
    gulp.start("deploy");
    gulp.start("watch");
});
```
Pythonのデータ型


#pythonデータ型一覧

pythonを初めていまいち違いが分かっていなかったのでまとめてみた。

list型:複数の要素を並べて管理する。シーケンス、変更可能
tuple型:異なる型の要素を並べて管理する。シーケンス、変更不可
set型:重複しない複数の要素を並べて管理する。変更可能
dictionary型:キーと値で情報を管理する。変更可能

```sample.py
list = [1,2,3]
tuple = (1,2,3,"a","b","c")
set = {1,2,3,4,5}
dict = {"a":1,"b":2,"c":3}
```

type関数とかで確認するとdictionary型はdictになっていた
JavaScript の Object 参照について

## やりたかったこと
一つの連想配列(オブジェクト)を利用して、複数のオブジェクトを持った配列を作成。
特定のプロパティの値に対して連番を振りたかった。

コード

```javascript

const makeObjArr = (obj, num) => {
    const results = [];
    for (let i = 1; i <= num; i++) {
        results.push(obj);
    }
    return results;
};

const incrementObj = (arr, targetKey) => {
    return arr.map((item, idx) => {
        item[targetKey] = item[targetKey] + String(idx + 1);
        return item;
    });
};

const a = {hoge: "hoge"};
const b = makeObjArr(a, 3);
console.log(incrementObj(b, "hoge"));
```

理想

```
{hoge: "hoge"} => [{hoge: "hoge1"}, {hoge: "hoge2"}, {hoge: "hoge3"}]
```

現実

```
{hoge: "hoge"} => [{hoge: "hoge123"}, {hoge: "hoge123"}, {hoge: "hoge123"}]
```

## Q.なぜこうなった？
~~__A.__ JavaScriptのObjectは参照渡しだから。~~
~~JSではプリミティブデータ型(Boolean, Null, Undefined, Number, String, Symbol)は値渡し。~~
~~Objectは参照渡しとなっています。~~(JavaScript に call by reference は存在しないため、誤解を生まないように打ち消し)
__A__. JavaScript の Object が保持するプロパティは書き換え可能だから。

例を挙げてみると

String

```javascript

/* String */
var a = "a";
var b = a;
b = "b";
console.log(a);
console.log(b);
console.log(a === b);
```

```
a
b
false
```

Number

```javascript

/* Number */
var a = 1;
var b = a;
b = 2;
console.log(a);
console.log(b);
console.log(a === b);
```

```
1
2
false
```

Symbol

```javascript

/* Symbol */
var a = Symbol("a");
var b = a;
b = Symbol("b");
console.log(a);
console.log(b);
console.log(a === b);
```

```
Symbol(a)
Symbol(b)
false
```

コードを書いていて想定通りの動きになっているはず。
変数aの値は書き換えられず、変数bの値だけが書き換わっている状態。


ところがObjectだと・・・


```javascript

/* Object */
var a = {value: "a"};
var b = a;
b["value"] = "b";
console.log(a);
console.log(b);
console.log(a === b);
```

```
{ value: 'b' }
{ value: 'b' }
true
```

見事にaのvalueプロパティの値が書き換えられている・・・。

```javascript

/* {}とnew ObjectはObjectの生成/初期化を意味する */
var a = {};
var b = new Object;
var c = a;
console.log(a);
console.log(b);
console.log(a === b);
console.log(a === c);
c = {};
console.log(a === c);
```

```
{}
{}
false
true
false
```

## で、どうすれば理想が現実になるの？

Object.assign()メソッドを使用する。

```javascript

const makeObjArr = (obj, num) => {
    const results = [];
    for (let i = 1; i <= num; i++) {
        results.push(Object.assign({}, obj));
    }
    return results;
};

const incrementObj = (arr, targetKey) => {
    return arr.map((item, idx) => {
        item[targetKey] = item[targetKey] + String(idx + 1);
        return item;
    });
};

const a = {hoge: "hoge"};
const b = makeObjArr(a, 3);
console.log(incrementObj(b, "hoge"));
```

```
[ { hoge: 'hoge1' }, { hoge: 'hoge2' }, { hoge: 'hoge3' } ]
```

>[Object.assign()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
一つ以上の ソース オブジェクトから、直接所有で (own)  列挙可能な (enumerable) すべてのプロパティの値を、ターゲット オブジェクトへコピーします。戻り値はターゲット オブジェクトです。

素敵。
ただし、IEでは動作しない可能性があるので、そこは注意が必要。
Babelとか使ってなくて、IE対応があるから使えない・・・って場合だったらfor文で頑張って下さい。
GitHubPagesでSwaggerUIホスティング

## Swaggerについて

> **THE WORLD'S MOST POPULAR API TOOLING**
> **世界で最も人気のあるAPIツール**
> Swagger is the world’s largest framework of API developer tools for the OpenAPI Specification(OAS), enabling development across the entire API lifecycle, from design and documentation, to test and deployment.
> Swaggerは、OpenAPI仕様（OAS）のためのAPI開発ツールの世界最大のフレームワークであり、APIのライフサイクル全体にわたって、設計から文書化、テストおよびデプロイまでを可能にします。
> https://swagger.io


## 特徴

- YAML/JSONでAPI仕様を記述

- AWS ApiGateway等にサポートされておりインポート/エクスポート可能

- 各種ツールが備わっている
  - _Swagger Editor_ : API仕様の編集とバリデーションチェック
  - _Swagger Codegen_ : API仕様を元にコード生成
  - _Swagger UI_ : API仕様を元に可視化
  - _Swagger Inspector_ : テストツール


## GitHub Pages

- 新しくサーバを用意する必要がない

- バージョン管理しつつ最新のAPI仕様を表示できる


## 手順

1. Swagger UIリポジトリ https://github.com/swagger-api/swagger-ui に含まれる `/dist` ディレクトリをコピー

1. `dist/index.html` 内のswagger定義の参照先を変更する
  https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html#L77

1. ファイル一式をGitHubにPushする

1. `GitHub` > `Settings` > `GitHub Pages` からGitHub Pagesを有効にする

1. Check `https://{user_name}.github.io/{repository_name}/` :octocat:


## 参考

- 公式手順 https://swagger.io/docs/swagger-tools > `Swagger UI Documentation` > `Usage`

- 実装例 https://github.com/gyamoto/swagger-pages-sample

- npmのモジュールも用意されている https://www.npmjs.com/package/swagger-ui-dist

- SwaggerUIのテーマがある http://meostrander.com/swagger-ui-themes
Moran モデル（集団遺伝学）

今回は集団遺伝学で基本的なMoranモデルを実装してみました。
Wright-Fisher モデルと同じく、現在ある一集団の中からサンプルされた子孫たちから、
過去に遡ることによって、ただ一つの共通祖先に到達する系統を調べるモデルです。
ここでも同じく、Moranモデルは可換モデルの一つになります。

```{r}

#moran model

#ancestral process
rm(list=ls())
sample=15
N=100

G=array(0,dim=c(sample,sample))
for(j in 1:sample){
  
  G[j,j]=1-(j*(j-1))/(N^2)
  
  G[j-1,j]=(j*(j-1))/(N^2)

}

G=t(G)

Q_N=array(0,dim=c(sample,sample))
for(j in 1:sample){
  Q_N[j,j]=-(j*(j-1))/(N^2)
  Q_N[j-1,j]=j*(j-1)/(N^2)
}
Q_N=t(Q_N)


#generation_process
time=100 #initial_time=0
matrix=(eigen(G)$vectors)%*% (diag(eigen(G)$values)^time)%*%(solve(eigen(G)$vectors))
matrix[abs(matrix)<(1/10^6)]=0
#waiting_time
wait_time=1000
state=8
wait_time_data=data.frame(time=1:wait_time,prob=0,Q_prob=0)

for(j in 1:nrow(wait_time_data)){
wait_time_data$prob[j]=G[state,state]^wait_time_data$time[j]
wait_time_data$Q_prob[j]=exp(Q_N[state,state]*wait_time_data$time[j])
}

plot(wait_time_data$time,wait_time_data$prob,type="p",col=2,xlim=c(min(wait_time_data$time),max(wait_time_data$time)),ylim=c(min(wait_time_data$prob,wait_time_data$Q_prob),max(wait_time_data$prob,wait_time_data$Q_prob)),xlab="time",ylab="prob",main="Moran;Red:discrete , Green:continuous")
par(new=T)
plot(wait_time_data$time,wait_time_data$Q_prob,type="p",col=3,xlab="time",ylab="prob",main="Moran;Red:discrete , Green:continuous",xlim=c(min(wait_time_data$time),max(wait_time_data$time)),ylim=c(min(wait_time_data$prob,wait_time_data$Q_prob),max(wait_time_data$prob,wait_time_data$Q_prob)))


coalescent_tree=data.frame(sample_number=1:sample,T_MRCA=0,T_total=0) %>% dplyr::mutate(av_T_MRCA=2*(1-(1/sample_number)),av_T_total=0)
T_MRCA=0;T_total=0;av_T_total=0
for(j in 2:nrow(coalescent_tree)){
   k=j
    T_MRCA=T_MRCA+rexp(1,rate=abs(Q_N[k,k]*N^(1.9)))
    T_total=T_total+sum(rexp(k,rate=abs(Q_N[k,k]*N^(1.9))))
    av_T_total=av_T_total+2/(k-1)
  coalescent_tree$T_MRCA[j]=T_MRCA
  coalescent_tree$T_total[j]=T_total
  coalescent_tree$av_T_total[j]=av_T_total
}


coalescent_tree=coalescent_tree %>% dplyr::mutate(expected_av_T_MRCA=av_T_MRCA/2,expected_av_T_total=av_T_total/2)

```
最もシンプルなWebブラウザを作ってみた

Visual Studio 2017 を起動したら，「新しいプロジェクト」から「Windows フォームアプリケーション（.NET Framework）」を選択し，新しいソリューションを作成する。

![新しいビットマップ イメージ#01.png](https://qiita-image-store.s3.amazonaws.com/0/208216/c2c7fb2d-3a79-2a1c-7952-97c2cc94a70b.png)

標準のフォームに ComboBox コントロールと WebBrowser コントロールを配置し，レイアウトを整える。

![新しいビットマップ イメージ#02.png](https://qiita-image-store.s3.amazonaws.com/0/208216/cfcb5d69-268a-3539-ffcb-a308521bf59b.png)

ComboBox インスタンス（comboBox1）の KeyDown イベントハンドラに，[Enter] キーが押されたら，テキストボックスの URL の Web ページが表示されるようにコードを記述する。WebBrowser インスタンスの Navigate メソッドは，引数に URL を与えることで Web ページを表示してくれる。その際，String 型の comboBox1.Text について new キーワードを用いて Uri 型にキャストする。

        private void comboBox1_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.KeyCode == Keys.Enter)
                webBrowser1.Navigate(new Uri(comboBox1.Text));
        }

![新しいビットマップ イメージ#03.png](https://qiita-image-store.s3.amazonaws.com/0/208216/20e5806a-8bf5-c2c5-ada1-570e29572725.png)

その他，ページ内のハイパーリンクをたどるなどして別のページに遷移したときには，ComboBoxに新しい URL を表示する。（webBrowser1_Navigated）


        private void comboBox1_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.KeyCode == Keys.Enter)
                webBrowser1.Navigate(new Uri(comboBox1.Text));
        }

        private void webBrowser1_Navigated(object sender, WebBrowserNavigatedEventArgs e)
        {
            if (webBrowser1.Url != null)
                comboBox1.Text = webBrowser1.Url.ToString();
        }

プログラムをコンパイル・実行すると，入力した URL の Web ページを表示するブラウザの動作について確認することができる。

![新しいビットマップ イメージ#04_実行例.png](https://qiita-image-store.s3.amazonaws.com/0/208216/02d6bed7-891f-f809-b9fc-42408664e857.png)

標準の WebBrowser コントロールは Internet Explorer 7 によるレンダリングにしか対応していない。そこで，最新の Internet Explorer 11, Edgeモードに対応させるには，レジストリを編集しないといけない。詳しくは，次の情報が頼りになる：

WebBrowser コントロールのInternet Explorerを最新のバージョンに変更する (C#プログラミング)
https://www.ipentec.com/document/csharp-change-webbrower-control-internet-explorer-version

そうすると， canvas など最新の HTML5 に対応した Web コンテンツを表示することができるようになる。

![新しいビットマップ イメージ#05_実行例.png](https://qiita-image-store.s3.amazonaws.com/0/208216/02fa5f89-0ea9-6062-3c2e-a3bf9301d041.png)
Macにxgboostをpipでインストール

公式の[Installation Guide](https://xgboost.readthedocs.io/en/latest/build.html#building-on-macos)を読めばヒントは書いてあるのですが、そのままではエラーが出たのでメモになります。

単純にpipでインストールする場合、gcc5のインストール後にpipでxgboostをインストールするように記載されています。

```
brew install gcc5
pip install xgboost
```

ただ、そのまま実行しても以下のエラーによりビルドに失敗しました。

```
    clang: error: unsupported option '-fopenmp'
```

`pip install xgboost`を実行する前に、以下のようにC/C++のコンパイラとしてgcc5でインストールを使うように設定することで、エラーなくインストールできました。

```
export CC=gcc-５
export CXX=g++-5
```
docker exec を ブラウザからアクセスする

「**docker exec のコンソールをブラウザでアクセスして操作したい**」とおもっていて、いろいろな既存ツールから想像してやり方は絶対あるだろうとおもっていたが、自分で作るのはだるいし現状スキル範囲外なところもあるので、きっと誰か作ったのがあるだろうとおもって探したらあったので利用してみた。

https://github.com/bitbull-team/docker-exec-web-console

ただ、**2018/3/6** 時点で最新版は若干仕様が異なっていたのでメモを残すことにした。

> README を見ながらやったけど、うまくいかんかったので。

# 環境

**DigitalOcean の最弱 Droplet**

| Item | Version |
|:---|---:|
|CentOS|7.4.1|
|Docker| 17.12.1-CE|
|Go | 1.9.4|

# docker exec web console
## ダウンロード＆ビルド

```shell-session
# git clone https://github.com/bitbull-team/docker-exec-web-console.git
# cd docker-exec-web-console
# docker build -t web-console .
```

# 起動

先になんでもいいのでコンテナあげておく

```shell-session
# docker run -id --name test ubuntu:latest bash
```

> このContainer ID or Container Name を後で使う

web-console のコンテナを起動

```shell-session
# docker run \
	--name docker-exec-web-console \
	-p 9999:8888 \
	-e "CONTEXT_PATH=/webconsole" \
	-v /var/run/docker.sock:/var/run/docker.sock \
	web-console
```

# ブラウザからコンソールアクセス－１

「**http://\<server address\>:9999/webconsole**」にアクセスする。すると下記のようなポップアップがでる。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/75458/c37fda8a-8d20-8df6-1fc8-fd553bab1252.png)

*Container ID or Container Name* を入れると、そのコンテナへコンソールアクセスできる。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/75458/107a75b0-c83f-ffe6-c9e9-c4908cbb45e9.png)

# ブラウザからコンソールアクセス－２

直接ブラウザのアドレスバーに下記のように入れると、即そのコンテナのコンソールにアクセスできる。

**http://\<server address\>:9999/webconsole/?cid=\<container id OR container name\>&cmd=bash**


#おわりに

これを使って自分が作ったコンテナを使ったハンズオンサービスの仕組みをアップデートすることにする。
これまでは無理やりsshdを開けて別のツールを使ってブラウザアクセスを可能にしていた。sshdを使ってというのがダサいので今回のやつがやっぱりスマート。

たぶん、**socat** ってのをうまく使ってるのがイケてるのだとおもう。
![Payload Too Large]()回避投稿

初回投稿するまでは画像のアップロード上限が**2MB**に設定されていて、初回投稿後は**100MB**までアップする。
上限オーバーすると`![Payload Too Large]()`が表示されてアップロードできないので、この投稿で100MBゲットだぜ！

# 参考
- [Qiitaに画像をアップロードするときはサイズに気をつけよう](https://qiita.com/Kosen-amai/items/5108197b6b68d031b0f5)

# おすすめ圧縮サイト
- [TinyPNG](https://tinypng.com/)
    - ファイルサイズが70%近く圧縮される！
OSXのシェルスクリプトで出力に色をつける時はprintfを使う

# 概要

[TakkuMattsu/homebrew-refreshXcode](https://github.com/TakkuMattsu/homebrew-refreshXcode)というXcodeのキャッシュを削除するだけのコマンドを作っていた時にハマったので備忘録として残しておく

# 結論

OSXでは**echo -e**ではなく**printf**を利用する
(そもそもOSX標準のechoは`echo -e`が動かない)

# 補足

## 経緯

[Xcodeのキャッシュディレクトリを削除するだけのコマンド](https://github.com/TakkuMattsu/homebrew-refreshXcode)を作っていて、どうせならスクリプトの出力に色をつけたいと思い調査
[シェル - echoで文字に色をつける その1](http://www.m-bsys.com/linux/echo-color-1)を参考に`echo -e`でできそうということがわかったので試してみる

```bash
echo -e "¥e[33mhoge¥e["
```
![image](https://user-images.githubusercontent.com/3356758/37035716-bfb780bc-2190-11e8-982b-680c6e529916.png)

おほ、動く:smile: 
早速スクリプトを変えようということで以下のようにした
(実際のコードではないです)

```bash:test.sh
#!/bin/bash
# 文字色黄色でhogeと出力
echo -e "¥e[33mhoge¥e["
```

で実行

```bash
$ ./test.sh
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/56178/ea708fec-4d63-0fd9-a2e6-64511fc5e520.png)

:innocent::interrobang: 

なんでと思い試行錯誤、shebangを消して見る

```bash:test.sh
echo -e "¥e[33mhoge¥e["
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/56178/6d6c150f-34de-bcf4-a011-3c9a70c3757a.png)

表示された
shebangは実際には以下を実行しているのと同じとのことなので

```bash
$ /bin/bash test.sh
```

パスが通っているbashを確認

```bash
$ which bash
/usr/local/bin/bash
```

そういえばhomeberwでbashインストールしていたことを思い出す

そうなると`echo -e`、OSX標準のbashでは使えないけどみんなどうしているのかなと疑問に思う:thinking: 

## 解決

[シェルスクリプトの出力に色をつけたい！](https://qiita.com/dojineko/items/49aa30018bb721b0b4a9)にちゃんと書いてありました。

>これを実行すると、スクショにあるような色見本を得ることができます。
後は使いたい組み合わせをコピって printf や echo -e に渡すだけ！
(※ macOS だと echo -e が使えないので printf に渡すのが無難です。)

printfならOSX標準で動作するのでprintfを利用してカラー表示をした:smile: 
([その時の修正](https://github.com/TakkuMattsu/homebrew-refreshXcode/pull/3/files))

実際のキャプチャ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/56178/ea066180-a434-c6ae-3e1a-148d4470849a.png)

# まとめ

今回ハマったことで`shebang`の意味や、シェルスクリプトのバージョンの違いで動作しないものがあることを知ることができてよかった:smiley: 

# 参考にした記事

- [シェル - echoで文字に色をつける その1](http://www.m-bsys.com/linux/echo-color-1)
- [シェルスクリプトの出力に色をつけたい！](https://qiita.com/dojineko/items/49aa30018bb721b0b4a9)
- [CentOS7とOS X Mavericksのechoコマンドの違いについて](http://sota1235.hatenablog.com/entry/2015/08/07/235824)
技術屋から見たUSIプロトコルのツライところ

最近[USIプロトコル]という通信プロトコルを使って将棋の思考エンジンを呼び出すものを作る機会がありました。
このUSIプロトコルというのは技術屋の立場から見るととてもプロトコルとは呼べないものでけっこう苦労したので書き留めておきます。

[USIプロトコル]:http://www.geocities.jp/shogidokoro/usi.html
[将棋所]:http://www.geocities.jp/shogidokoro/index.html

# USIプロトコルとは

USIプロトコルは将棋アプリのGUI等(以下、UI)と思考エンジン(以下、エンジン)が標準入出力で通信するためプロトコルです。USIプロトコルに対応しているUIとエンジンであれば自由に組み合わせて使うことができます。

UIはエンジンをサブプロセスとして起動して、棋譜データなどのコマンドをサブプロセスの標準入力に送信します。
エンジンはコマンドを受け取ると思考を開始して次の手を標準出力で返します。
コマンドはいくつかあるのですが、共通の仕様は以下の通りです。

- コマンドの送信は改行コード
- コマンドとオプションなどは半角スペースで区切る

主なコマンドには以下のようなものがあります。

|コマンド|正常時の応答|説明|
|:---|:---|:---|
|`usi`|`id name ...`<br/>`id author ...`<br/>`option ...`<br/>`usiok`|エンジン起動時に最初に送るコマンド|
|`isready`|`readyok`|対局開始前に送る|
|`setoption name ... value ...`|なし|オプションの設定|
|`usinewgame`|なし|対局開始時に送る|
|`position ... moves ...`|なし|局面を送る|
|`go ...`|`bestmove ...`|思考を開始させて次の手を受け取る|
|`quit`||エンジンを終了させる|

以下はUSIプロトコル通信の例です。わかりやすくするためにUIから送るコマンドの行頭に`> `を付けてあります。

```
> usi
id name ...
id author ...
option ...
usiok
> isready
readyok
> usinewgame
> positon startpos moves 7g7f
> go byoyomi 1000
bestmove 8c8d
> positon startpos moves 7g7f 8c8d 1g1f
> go byoyomi 1000
bestmove 3c3d
```

# USIプロトコルのツラいところ

USIプロトコルの共通仕様は非常にシンプルなのですが、シンプルであるが故に色々と辛いところがあります。

- コマンドを送信しても応答がないコマンドがある
- エラーに関する規定がない

## コマンドを送信しても応答がないコマンドがある

一般的に標準入出力やソケット通信などのプロトコルでは、コマンドを受け取った側は正常に処理できたかどうかの結果を返すのが常識です。
ところがUSIプロトコルのコマンドの中には送信した後にエンジンから応答がないものがあります。これではコマンドが正常に実行できたか確認できません。
また応答があるものとないものがあるとUI側でコマンドを実行する作りが統一できません。

## エラーに関する規定がない

USIプロトコルではコマンドが不正だった場合などエラーに関する規程が一切ありません。
この為、エンジンや状況によってエラー発生時の挙動が様々です。

例えば[将棋所](http://www.geocities.jp/shogidokoro/index.html)というGUIアプリに付属の Lesserkai では以下のような挙動でした。

```:不正なコマンドを送信(無反応)
> hoge
```
```:不正な指し手書式を送信(エラーメッセージを返す)
> postion startpos moves hoge
illegal move hoge
```
```:不正なコマの移動を送信(エラーメッセージを返す)
position startpos moves 1a9i
illegal move 1a9i
```

ちなみに自分が使っていたエンジンでは以下のような挙動でした。

```:不正なコマンドを送信(エラーメッセージを返す)
> hoge
info string unknown command: hoge
```
```:不正な指し手書式を送信(エラーメッセージを返す)
> positon startpos moves hoge
info string unknown command: positon startpos moves hoge
```
```:不正な駒の移動を送信(無視？)
position startpos moves 1a9i
go
info string OptTime 0sec MaxTime 0sec Progress = 1.296% Threads = 4
bestmove 9c9d
```

このようにエラーの形式がバラバラではUI側では受け取りようがありません。

# 参考：他のプロトコルのレスポンス

これだけ見ても「何がいけないの？」という人もいると思うので、参考までに他のプロトコルでは応答がどのような形式になっているか書いておきます。
基本的にはプロトコル全体で応答の形式を規定しているのでエラーの発生を確実で受け取れるようになっています。

## HTTP

リクエストに対して必ずレンスポンスが返ってきます。
HTTPレスポンスでは1行目はステータス行で、`HTTP/1.1 200 OK`のようにHTTPステータスコードが含まれています。

## POP3

リクエストに対して必ずレンスポンスが返ってきます。
POP３サーバーはコマンドを受け取ると成功、不成功に応じて`+OK`または、`-ERR`から始める文字列を返します。
エラーの場合には`-ERR`の後にエラーメッセージを返します。

## SMTP

リクエストに対して必ずレンスポンスが返ってきます。
リプライコード+リプライメッセージという形式になっています。

# これからプロトコルを設計する人へ

プロトコル設計で重要なのは共通で使える仕様を決める事です。正常時だけでなく異常時の振る舞いも含めて考える必要があります。
通信相手によって送受信する形式が違っていたり、コマンドによって応答やエラーの形式がバラバラではプロトコルとは言えません。
これからソケット通信や標準入出力のプロトコルを設計するという人は、この辺りを踏まえて共通で使えるように設計しましょう。
「さくらのセキュアモバイルコネクト」をWindows 10で使ってみた

全国100万人のVDI大好きな皆さん。
`いつでもどこでもVDI` を実現するために日々無線環境の研鑽を積まれていることかと思います。
3Gに始まりWifi、WiMAXやテザリングなど色々試されたかと思いますが、新しい選択肢とし「さくらのセキュアモバイルコネクト」というLTE SIMが発表されたので試してみました。


さくらインターネット、月額基本料金12円のIoT/M2M向けSIMサービス
「さくらのセキュアモバイルコネクト」を提供開始
～高い堅牢性を誇るネットワークで安価なデータ通信を実現～
https://www.sakura.ad.jp/press/2018/0116_sakura-secure-mobile-connect/


IotやM2M向けですが、マニュアルの方にはiPhoneやAndroidでの接続設定例が公開されているので、「Windowsでも行けるんじゃね:thinking:？」というわけで試した結果の共有です。

[さくらのクラウド｜SIMのデバイス接続と設定](https://manual.sakura.ad.jp/cloud/mobile-connect/sim/device-settings.html)

# 結論：うまくいきました:blush:

実際に家に余っていたSIM搭載可能なWindows10端末のSurface3に購入したSIMを指して設定してみたところ、ちゃんと内蔵SIMアダプターにさくらのクラウド上で割り当てたIPアドレスが設定割当らていることを確認できました。
もちろんこのままさくらのクラウド経由でグローバルへの通信も確認できました。

```
モバイル ブロードバンド アダプター 携帯電話

   接続固有の DNS サフィックス . . . . .:
   IPv4 アドレス . . . . . . . . . . . .: 192.168.10.20
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: 192.168.10.1
```

このさくらのセキュアモバイルコネクトのいいところと言うのは何と言っても、さくらのクラウドの環境に直結していること。
さくらのクラウドの環境までであれば特別なVPNを貼らずにSIMを指した端末にクラウド上のローカルIPアドレスを割り当てて接続することができます。

# かんたんな設定方法:grin:

かんたん（雑）なのはこの説明で、さくらのクラウド上でモバイルゲートウェイの契約やSIMの登録とかは公式サイトを見てやってください:innocent:

[さくらのクラウド｜セキュアモバイルコネクトとは](https://manual.sakura.ad.jp/cloud/mobile-connect/about.html)


今回はWindows10でどう設定するかだけを記載しておきます。

![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/100935/61ba7451-4f72-831d-c018-cbc46b27e98a.png)

Windows10のAPN設定画面からAPN　`sakura`　を設定するだけ。それ以外の項目はスクリーンショットのとおりに設定してみてください。（ほぼ初期値のままでいけると思います）

![01.PNG](https://qiita-image-store.s3.amazonaws.com/0/100935/0014dfbd-ae2e-6fea-dcb1-67d39a604e33.png)

あとは登録した情報を選択して、データローミングで `ローミングを許可する` を選択するだけ。
少しするとSoftbankが認識されて通信が行えるようになります。

今回はまだ試せていませんが、さくらのクラウド上にWindows Serverを立ててローカル経由でリモートデスクトップができる環境を構築できればVDIからそれにつながるネットワークまでさくらのクラウドで完結させることができるようになります:v:

# 注意点:frowning2:

ざっと設定できることを確認したわけですが、以下のような注意点があります。

* 法人契約限定であり、個人契約では利用できない。

今回は会社の検証で試しただけであり個人では契約することができません。

* 通信料＋固定費はそれなりに必要

一番上にも書いているようにIoTやM2M向けの通信サービスであり、莫大な数のデバイスが継続的に少量・短期間に大量の通信を行うという前提での価格となっています。1人で延々とデータを流し続けるような用途で使う時には、他の格安SIMを使うようなコスト感ではありません。

さくらのクラウド上にインフラ構築を行って複雑なVPN設定をしなくても閉域接続でつながるという魅力（もちろん、一切グローバルにアクセスさせないということも可能です）を提案できればVDIソリューションしての提案もできそうな気もします。



それでは皆さん、素敵なVDIライフをお過ごしください:wave_tone1:
neovimをインストールしてみました

# 経緯

* 会社ではAtomを使っていたのですが、何故か画面がチカチカするようになる。起動もちょっと遅い
* Sublimeを入れてみるも日本語対応が面倒になるメーン
* vimには多少馴染みがあったのと、neoと言う響がかっこいいのでneovimをはじめる。

# 環境情報

MacOS 10.13.1

# インストール

こちらを参考にインストール
[neovim/homebrew-neovim](https://github.com/neovim/homebrew-neovim#installation)

    brew install neovim

# 起動

    $ nvim

# 設定ファイル
.vimrcに設定ファイルを書いてうまくいかないなと思ったらneovimでは違うらしいですね。ふふ

    ~/.config/nvim/init.vim

ここまででneovimのインストールが完了です。
これから様々なプラグインを入れてかっこいい環境を作りたいと思います。

追記

**環境変数の設定**

下記を環境変数に設定しないと動かないこともあります。
zshを使用している場合は.zshcに追記するなどします。

    export XDG_CONFIG_HOME=~/.config