OmniAICreator/Qiita-1.07M huggingface dataset:
How to fix Tomcat error - org.apache.catalina.startup.ClassLoaderFactory validateFile



### Symptom

while updating to Tomcat 7.0.84, errors ...

```
Feb 01, 2018 10:50:00 AM org.apache.catalina.startup.ClassLoaderFactory validateFile
WARNING: Problem with directory [/usr/share/tomcat7/"/usr/share/tomcat/lib/*.jar"], exists: [false], isDirectory: [false], canRead: [false]
Feb 01, 2018 10:53:37 AM org.apache.catalina.startup.ClassLoaderFactory validateFile
WARNING: Problem with directory [/usr/share/tomcat7/"/usr/share/tomcat/lib"], exists: [false], isDirectory: [false], canRead: [false]
Feb 01, 2018 10:53:37 AM org.apache.catalina.startup.ClassLoaderFactory validateFile
WARNING: Problem with directory [/usr/share/tomcat7/"/usr/share/tomcat/lib/*.jar"], exists: [false], isDirectory: [false], canRead: [false]
Feb 01, 2018 10:53:37 AM org.apache.catalina.startup.ClassLoaderFactory validateFile
WARNING: Problem with directory [/usr/share/tomcat7/"/usr/share/tomcat/lib"], exists: [false], isDirectory: [false], canRead: [false]
Feb 01, 2018 10:53:37 AM org.apache.catalina.startup.ClassLoaderFactory validateFile
WARNING: Problem with directory [/usr/share/tomcat7/"/usr/share/tomcat/lib/*.jar"], exists: [false], isDirectory: [false], canRead: [false]
```


### How to fix


- before

```${catalina.base}/conf/catalina.properties
# Note: Values are enclosed in double quotes ("...") in case either the
#       ${catalina.base} path or the ${catalina.home} path contains a comma.
#       Because double quotes are used for quoting, the double quote character
#       may not appear in a path.
common.loader="${catalina.base}/lib","${catalina.base}/lib/*.jar","${catalina.home}/lib","${catalina.home}/lib/*.jar"
```

- after

```${catalina.base}/conf/catalina.properties

common.loader=${catalina.base}/lib,${catalina.base}/lib/*.jar,${catalina.home}/lib,${catalina.home}/lib/*.jar

```


### Cause

 with running Tomcat 7 and Tomcat 8 with same conf/ files, the change has been made as following:


http://tomcat.apache.org/tomcat-8.0-doc/changelog.html

[55620](https://bz.apache.org/bugzilla/show_bug.cgi?id=55620): Enable Tomcat to start when either \$CATALINA_HOME and/or \$CATALINA_BASE contains a comma character. Prevent Tomcat from starting when \$CATALINA_HOME and/or \$CATALINA_BASE contains a semi-colon on Windows. Prevent Tomcat from starting when \$CATALINA_HOME and/or \$CATALINA_BASE contains a colon on inux/FreeBSD/etc.`


now running OK both 7 and 8 :relaxed:
会社で少し盛り上がった Project Euler をやってみる 009

# Problem 009

> ピタゴラス数(ピタゴラスの定理を満たす自然数)とは a < b < c で以下の式を満たす数の組である.

```math
a^2 + b^2 = c^2
```

> 例えば、 $ 3^2 + 4^2 = 9 + 16 = 25 = 5^2 $ である.
> $ a + b + c = 1000 $ となるピタゴラスの三つ組が一つだけ存在する.
これらの積 abc を計算しなさい.

---

# Answer 009 (Python)

```python3
import sys


class Problem9:

    def main(self, total):
        for a in range(1, total - 1):
            for b in range(a + 1, int((total - a) / 2) + 1):
                c = total - a - b
                if c ** 2 == a ** 2 + b ** 2:
                    return a * b * c


if __name__ == '__main__':
    total = 1000
    if len(sys.argv) == 2:
        total = int(sys.argv[1])
    p = Problem9()
    print(p.main(total))
```
---

# (参考) Project Euler とは

[Project Euler](https://projecteuler.net/) はプログラミングで数学の問題を解くサイトです。問題は600問以上あるので、勉強に使うのも良し、楽しむのも良しです。

サイトに登録すれば、解答を submit することができ、その場であっているか判定してくれます。

また、問題だけであれば、日本語に翻訳された Wiki もあるのでそちらを見ながらやると捗ると思います。

[Project Euler(日本語訳)](http://odz.sakura.ne.jp/projecteuler/)
シミュレーターにキーボードが表示されない時の対処法

##シミュレーターの設定を確認する

Xcodeのシミュレーターにキーボードが表示されない場合は、次の設定を確認します。

シミュレーターのメニューから、

１）　Hardware →　Keyboard を選択する。

２）　Connect Hardware Keyboardのチェックを外す。

これでキーボードが表示されるはずです。

Connect Hardware Keyboardのチェックが外れていると、Macのキーボードからの
入力はできません。
Connect Hardware Keyboardにチェックを入れると、Macのキーボードからの入力が
できるようになります。

ちなみにこの方法で試してみてダメだった場合は、諦めずに何回かチェックをつけたり
外したりを繰り返すとキーボードが出るようになることがあります。
どうしてもキーボードが出ないという方は、こちらの方法も併せてお試し下さい！

##参考資料
https://qiita.com/iwason/items/517865ea9caa872910f8
rsync出力フォーマット読み方大全


突然ですが、rsyncを実行すると下記のような感じで出力されます。

```
.d..t...... vtuber
>f.st...... vtuber/mirai_akari.txt
```

`d`とか`f`とかは`directory`と`file`かなと推測できるのですが、`s`とか`t`とかなんじゃろと思っておもむろに`man rsync`してみました。

## YXcstpogz
`man rsync`を眺めてみると`--i, --itemize-changes`の項目に出力フォーマットについて書いてあります。
このフォーマットは`YXcstpogz`のように9項目あるようです。
それではこれらを順番に見ていきまーしょうっ！

### Yについて
`Y`は更新形式を表します。
`Y`は下記の値を取ります。


| <| > | c | h | . |
|:---:|:---:|:---:|:---:|:---:|
| リモートへ転送完了|ローカルへ転送完了|作成or変更|ハードリンクされた項目|未更新|

### Xについて
`X`はファイル形式を表します。
`X`は下記の値を取ります。

| f| d | L | D | S |
|:---:|:---:|:---:|:---:|:---:|
| ファイル|ディレクトリ|シンボリックリンク|デバイスファイル|特別なファイル(socketやfifoファイル等)|

### 例外
1. 新規作成された項目は`+`が表示されます。
2. 未更新のファイルはスペースが表示されます。
3. 不明な属性は`?`が表示されます(古いrsyncのみ)

#### 2.について補足
例えば後述の備考にあるように未変更のファイルを出力した場合、ドットがスペースに置き換わるよ、ということです。

```更新あり.
.f...p... shiro.png
```

```更新なし.
.f        shiro.png
```



### cについて
ファイルのチェックサムが異なる場合表示されます。
### sについて
ファイルのサイズが異なる場合表示されます。
### tについて
ファイルの変更のタイムスタンプが異なる場合表示されます。
`T`が表示されている場合は、転送日時が更新されます。これはシンボリックリンクが転送される時か、ファイルやデバイスファイルが`--times`オプションなしで転送される際に表示されます。
### pについて
ファイルのパーミッションが異なる場合表示されます。
### oについて
ファイルの所有者が異なる場合表示されます。
### gについて
ファイルのグループが異なる場合表示されます。
### zについて
将来的な利用のために空けてある項目です。
現在は使われていません。



## 備考
rsync 2.6.7以降のバージョンでは`--i --i`または`--itemize-changes --itemize-changes`のようにオプションを2回繰り返すと未変更のファイルが出力されます。
AWS sdk for phpのgetIteratorとlistObjects

#s3バケット内のファイル一覧を取得したい
というわけで[ヘルプページ](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/ListingObjectKeysUsingPHP.html)を参照してみる。

#getIteratorとlistObjectsという似たような関数
自分なりにざっくりまとめてみると以下のようなことだと思います。
listObjectsは低レベル
getIteratorは高レベル
と書かれています。

ここでいうレベルとはおそらく
レイヤーの意味だと思います。

わかりやすく例として挙げるならば
アセンブラは低レベル
C言語は高レベル

javascriptは低レベル
reactやbabelは高レベル

より基本となるものが低レベル、それを応用したものが高レベルということだと思います。

#getIteratorとlistObjectsの具体的な違い
上記公式ヘルプページに書かれている内容として
listObjectsで1000件以上のkey(s3にあるファイル)を取得するには
listObjects関数を1000権取得するたびに実行する必要がある。

getIterator関数に関しては1000件以上一気に取得することができる。
関数側でいろいろよしなな処理を実行してくれるわけですね。

#個人的な事例として
今回は一度に取得するファイルの数が1000件を超えることはないため
listObjectsのほうが処理が軽そうという理由から
listObjectsを使用することにした。
脆弱性診断ツールOWASP ZAPのインストール手順


#OWASP ZAP（Zed Attack Proxy）とは
OWASP ZAPは、[OWASP(The Open Web Application Security Project)](https://www.owasp.org/index.php/Main_Page)が開発したWebアプリケーション用の脆弱性診断ツールです。オープンソースで提供されていて無償で使うことができます。

#前提条件
OWASP ZAPを動作させるにはJavaの実行環境が必要となります。そのため、JREがインストールする必要があります。自身の環境にJREがない場合は、[Oracleのサイト](https://java.com/ja/download/)からインストーラをダウンロードしてください。

#インストーラのダウンロード
下記のサイトからインストーラをダウンロードします。
[https://github.com/zaproxy/zaproxy/wiki/Downloads](https://github.com/zaproxy/zaproxy/wiki/Downloads)

![owasp1.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/dc1a71ff-06c3-f931-9ca5-b2691b1b91ee.jpeg)

上記サイトから自身の環境で使用するものをダウンロードしてください。今回はWindowsの64ビット版をダウンロードします。

#OWASP ZAPのインストール

インストーラを実行すると以下の画面が出てきます。

![owasp2.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/720b688f-1b6f-d3d0-49fe-8d8c543c435f.jpeg)

![owasp.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/f540a656-635c-8eeb-5806-feebb78ff9dd.jpeg)

次へボタンをクリック。

![owasp3.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/bd63ad31-0e02-bcbe-e4a9-a2ac39aeae2b.jpeg)

ライセンス契約は承認するを選択して、次へボタンをクリック。


インストール先等の設定を変更する必要がなければ、デフォルトのまま次へをクリックしていきます。
![owasp4.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/20f4994e-cab7-af6e-1fdc-dd1f8f5e4c50.jpeg)

![owasp5.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/f44ecba2-fb6b-0bd5-69d4-a6c2b97c642f.jpeg)

![owasp6.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/1cdab7b6-3975-593b-b7f0-88145e70d13d.jpeg)


![owasp7.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/99964fbd-e9c4-2093-74db-9eb1b860f1f0.jpeg)


インストールボタンをクリックするとインストールが始まります。

![owasp10.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/4a234dd3-8360-9523-4b97-2144ed6aac85.jpeg)

![owasp8.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/f4c6b8e1-a259-558f-98b0-a6ff72c9511f.jpeg)


これでインストールは完了です。

![owasp9.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/6d2d2440-52fb-4b23-c313-1190ca37c864.jpeg)

#OWASP ZAPの起動
ショートカット作成オプションでデスクトップアイコン作成にチェックを入れた場合は、インストール終了後にショートカットが作成されます。ショートカットをダブルクリックして実行してみたいと思います。

![owasp11.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/d78cf3de-5c29-a33e-b2f5-1b3309a84458.jpeg)

起動画面はこのような感じです。

![owasp12.jpg](https://qiita-image-store.s3.amazonaws.com/0/206600/542d2eb0-0ebf-6135-a3fe-19c8aab3250c.jpeg)
flipsnap.jsを使用してスマートフォンのフリック操作を実現する

#はじめに
スマホサイトでよくあるフリック操作を
flipsnap.jsのプラグインをダウンロードして実現していきます。
[公式サイト](http://hokaccha.github.io/js-flipsnap/)

#flipsnap.jsの特徴
- 対応ブラウザが幅広い
- コンテンツ数が変動しても対応できる
- 実装が簡単

#対応ブラウザ
##Mobile
iOS Safari (iOS4+)
Android Browser (Android 2.1+)
Android Firefox Mobile 9.0+
Android Opera Mobile 11.50+
Window8 IE10+
##PC
IE9+
Google Chrome
Opera
Firefox
Safari

#ダウンロード
公式サイトより、プラグインをダウンロードしてきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201860/23f2378a-6d94-fd85-4c47-ea78ecb82803.png)

#実装
##事前準備
Jqueryと空のhtmlファイルとCSSファイルを用意しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201860/38a492cb-46e8-5a9e-ac8f-89a8cfe31e1d.png)
公式のサンプルをもとに作成していきます。

##HTMLの作成

```html:flick.html

<html>
<head>
<meta charaset="UTF-8" />
<title>フリック機能を試してみよう！</title>
<link rel="stylesheet" type="text/css" href="flipsnap.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="flipsnap.min.js"></script>
<script>
$(function(){
	Flipsnap('.flipsnap');
})
</script>
</head>

<body>
<div class="viewport">
    <div class="flipsnap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>
</body>
</html>

```

##CSSの作成
```css:flipsnap.css

.viewport {
    width: 320px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}

.flipsnap {
    width: 960px; /* 320px(item width) * 3(item count) */
}

.flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.item {
    float: left;
    width: 310px;
    font-size: 50px;
    text-align: center;
    padding: 50px 0;
    background: #EFEFEF;
    border: 5px solid #999;
    color: #666;
}

```

#動作確認
わかりずらいですが、フリックすると１⇒２にスライド表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201860/21434199-b0e6-dd3d-8718-c2349a9c0a33.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201860/b15f0254-250c-8b85-7c71-257752c41b0c.png)

#まとめ
他にもいろいろな種類のフリックが簡単に実装できます！
興味のある方は[デモ](http://hokaccha.github.io/js-flipsnap/demo.html)を参考に色々試してみては如何でしょうか。
自分がBracketsに登録している拡張機能

備忘録となります。
#拡張機能
##Beautify
コードを綺麗に整形してくれる。
##全角空白・スペース・タブ表示
スペースとかを可視化。
##Tabs-Custom Working
左サイドバーの表示/非表示
##Add HTML template
htmlファイルの雛形を生成。
##Indent Guides
インデントを見やすく。
##Brackets Tools
wpのショートカットみたいなもの。

#使用中のテーマ
##Monokai Dark Soda
フォントファミリー:'SourceCodePro-Medium', メイリオ, 'MS Gothic', monospace
Vue.jsでテンプレートのタグを動的に変える

# はじめに

動的にHTMLのタグを変えたいときってありませんか？

`Vue.js`では描画関数を使ったやり方が公式で説明されています。
[アンカーヘッダのレベルを動的に変えるコンポーネントの例] (https://jp.vuejs.org/v2/guide/render-function.html)

コンポーネントの部分だけ見てみます。

```js
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // タグ名
      this.$slots.default // 子の配列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
```

この描画関数は普段のテンプレートに比べつらいと感じる人も多いと思います。
今回みたいな簡単な例ならば良いですが、すこしでも複雑になったらお手上げです :innocent:
これでは「親しみやすいフレームワーク」という`Vue.js`の思想から遠ざかってしまいます。

そこで慣れ親しんだテンプレートで同じことをするために`is`を使います。

# `is`

公式の`is`の説明 (https://jp.vuejs.org/v2/api/#is)

`is`はコンポーネントの動的に切り替えに使われるイメージですが、タグを切り替える用途にも使えます。
アンカーヘッダ－を動的に変えるコンポーネントを`is`を使って実装してみます。

```js
Vue.component('anchored-heading', {
  template: '<compnent :is="tag"><slot></slot></compnent>',
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  computed: {
    tag() {
      return `h${this.level}` 
    } 
  },
})
```

これならさらっと書けそうですね！:sunglasses:
今回はjs上でテンプレートを書きましたが、もちろん単一ファイルコンポーネントとして書くこともできます。

# デモ

CodePenで`is`を使った例と描画関数を使った例を並べてみました。
Levelを変えると、動的にHTMLも書き換えられているのが確認できると思います。

<p data-height="265" data-theme-id="0" data-slug-hash="wyaaxz" data-default-tab="js,result" data-user="totto357" data-embed-version="2" data-pen-title="Change Tag with Vue.js Template" class="codepen">See the Pen <a href="https://codepen.io/totto357/pen/wyaaxz/">Change Tag with Vue.js Template</a> by totto357 (<a href="https://codepen.io/totto357">@totto357</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

# 余談

CodePenが埋め込めるようになったのめっちゃ便利ですね:kissing_closed_eyes:
Qiitaさんありがとう。
OracleセレクトSQLの日付パラメータに時間が付いてしまう

jdbcでSQL文にsql.Dateのパラメータをバインドして検索するとき、知らない原因で時間情報がついてしまう。

PreparedStatement ps = conn.prepareStatement(SELECT sm.sime_cd FROM  srw_syainmst sm WHERE sm.sya_id = ?  and sm.sdate <= ?);
java.sql.Date NowDate = new java.sql.Date(Calendar.getInstance().getTime().getTime());
ps.setLong(1, 1234l);
ps.setDate(2, NowDate);
ResultSet　rs = ps.executeQuery();

oracleの実行履歴v\$sqlareaとv\$sql_bind_captureを見ると、
二番目の日付のパラメータは[value_string=01/26/2018 12:48:58]のようになってしまう。

どうしてこんな状況になってしまったのか全く分からない。
皆助けてください。:dizzy_face:
Vue.jsでReactの"this.children"的なやつ

最近諸事情によりReactからVue.jsへ移行中です。
そこでReactで言う`this.children`的なやつが
Vue.jsだとどう書くのか調べたのでメモします。

# まずReactのChildrenってどんなやつか
超適当に

```javascript
const ChildNode = props => (
  <h1>
    {props.children}
  </h1>
);

const ParentNode = () => (
  <ChildNode>
    Hello World
  </ChildNode>
);
```
↑のように書くと以下のHTMLになる

```html
<h1>
  Hello World
</h1>
```
要素を決まった構造でラップしたいときや
渡された要素を特定の条件で表示切り替えしたいときに使っていました。
例) [モーダルのコンポーネント](https://github.com/reactjs/react-modal)など

# Vue.jsだとどう書くのか
スロットという機能を使うことで実現できるようです。
[ドキュメント](https://jp.vuejs.org/v2/guide/components.html#スロットによるコンテンツ配信)に丁寧な解説が有りました。

```html:ChildNode
<h1>
  <slot>
    こんにちは 世界      
  </slot>
</h1>
```

```html:ParentNode
<child-node>
  Hello World
</child-node>
```

出力結果は以下のようになります

```html
<h1>
  Hello World
</h1>
```
もし``<child-node>``の中に何も設定されていない場合は
デフォルト値として「**こんにちは 世界**」が表示されます。

# まとめ
Reactのchildrenと同じことは**Slot**を使えばできる。
さらにここでは紹介していませんが
名前付きスロットや、スコープ付きスロットなど便利な機能があるようです。
Vue.jsはドキュメントが充実しているので大変助かりました＾＾
Macでリンク切れシンボリックリンクを削除する方法

Linux系では`find -xtype l -exec rm`でできる。しかし、BSD系のfindには`-xtype`がない。macOSでは次のコマンドを使う。

```
find -L . -type l -exec rm {} \;
```

なお、削除前に確認したいときは次のコマンドを実行する

```bash
# 削除予定のファイル一覧
find -L . -type l

# 削除予定のファイルのリンク先一覧
find -L . -type l -exec readlink {} \;
```
javascriptで`;`を省略すると期待通りに動かないパターン

最近、`;`を省略して書くのがマイブームになっていて、問題に遭遇したので共有しておきます。有名な話だと思いますが、実際遭遇したのは初めてで、しばらくエラーの意味がさっぱりわかりませんでした。

```js
//error.js
const foo = 'bar'

(function(){
  //無名関数
})()
```

上記のerror.jsを読み込むと、`foo`に`'bar'`を代入後、無名関数が即時実行されるのを期待していましたがそうはなりません。


'bar'を関数とみなして、無名関数を引数に即時実行しようとし`Uncaught TypeError: "bar" is not a function`というエラーが発生します。

```js
const foo = 'bar'(function(){})()
```

と書くと割と納得できます。

このパターンだとエラー表示が直接的ですぐ気付くと思いますが、`(`の前が関数だと呼び出しに成功してしまい、もう少し奥の方でエラーが発生するので少し難解になります。

```js
const foo = function(bar){
  //なにかする
}

(function(){
  //なにかする
})()
```

下記のように書くと回避できます。

```js
const foo = function(bar){
  //なにかする
}

;(function(){
  //なにかする
})()
```

`(`で始めるときは必ず頭に`;`をつけましょう。
ElixirのEnum.reduceを一発で理解する方法

　Elixir初心者です。「[Programming Elixir ≥ 1.6](https://pragprog.com/book/elixir16/programming-elixir-1-6)」のβ版を読んでいて、Enum.reduceについての説明が多少理解できない点があったので自分なりに解釈しました。そのメモです。まあ、英語力の問題も大きいのですけど。

　以下のcreate_processes関数ですが、引数で渡ったnの個数だけプロセスを作ります。そのとき、１番目のプロセスには自分自身（親）のpidを渡します。２番目のプロセスには１番目のプロセスのpidを渡します。３番目のプロセスには２番目のプロセスのpidを渡します。これを繰り返して最後にn番目のプロセスをつくり、そのpidをlastに入れます（厳密にはマッチか）。
　そうしてn個のプロセスを作成し終えたら、親プロセスからlastにメッセージを送ると、どんどん前のプロセスにメッセージを送っていき、最後には自分自身（親）にメッセージが送り返されるという処理になっています。メッセージにはカウンターがついているので、何個のプロセスがチェインで結ばれているかがわかるというものです。まあ、n個なんですけど。


```elixir:chain.exs
defmodule Chain do
  def counter(next_pid) do
    receive do
      n ->
        send next_pid, n + 1
    end
  end

  def create_processes(n) do
    last = Enum.reduce 1..n, self(),
             fn (_,send_to) ->
               spawn(Chain, :counter, [send_to])
             end

    send last, 0 # start the count by sending a zero to the last process

  #

end
```

　まあ、一応公式サイトの説明を載せておきます。これも英語で、しかも翻訳してもわかりにくいような気がします。
[公式サイト Enum](https://hexdocs.pm/elixir/Enum.html)

```
reduce(enumerable, acc, fun)
Invokes fun for each element in the enumerable with the accumulator.

The initial value of the accumulator is acc. 
The function is invoked for each element in the enumerable with the accumulator.
The result returned by the function is used as the accumulator for the next iteration.
The function returns the last accumulator.
```

　つまり言葉での説明はわかり難いので、reduceの定義をを少し抽象化して以下のような式で表現すれば一発で理解できると思います。

```
reduce [1,2,3,4..n] init fun = (fun n ... (fun 4 (fun 3 (fun 2 (fun 1 init)))) ...)
```

　funはspawnでプロセスをつくりpidを返しますので、例えば(fun 3 (fun 2 (fun 1 init)))は３番目のプロセスのpidを表し、accumulatorとして(fun 4)の引数になります。initはaccumulatorの初期値で、この場合はself()で自分自身（親）のpidになります。ちなみにenum要素の1,2,3..nはダミーの引数として扱われfunのなかでは使われていませんね。


　ちなみにこれを実行すると、以下のように100万個のプロセスを生成することができます。デフォルトでは20万個ぐらいですけど、コマンドラインで簡単に拡張できるのですね。さくらのVMの安いサーバなのですが、Elixirのプロセスは凄過ぎるね。45921695マイクロ秒だからメッセージの伝達も速いですね。

```
elixir --erl "+P 1000000" -r chain.exs -e "Chain.run(1_000_000)"
{45921695, "Result is 1000000"}
```


　昔、「プログラミングHaskell」（だったと思う）を読んだとき、foldr(foldl)をこのような式で説明してあって、大変直感的でわかりやすいと思いました。（不思議と他の本ではこのような説明がなかったのですが。）誤りがあったらご指摘いただければ助かります。
[Android] Gradle Error Solution - Menifest merger failed

#Problem

![gradle error.JPG](https://qiita-image-store.s3.amazonaws.com/0/137182/3305d4cc-6653-a6aa-4963-6377e7ce24f6.jpeg)


#Solution

```xml:Manifest.xml

<application
        tools:replace="android:icon" <-- add
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher3"
        android:theme="@style/AppTheme">
```
Qiita > 自分のQiita記事にいただいたコメントを検索する 2018-02-01版

```txt:動作環境
Ubuntu 16.04.3 LTS desktop amd64
npm
Node.js(v9.4.0)
```

### よくある機会

- xxxについてyyyさんからコメントをいただいていた
- そのコメントをまた読みたい
- どうやってそれを探すのか
    - 2018年2月1日現在、Qiitaではコメントを対象とした検索機能はありません
        - [Qiita > 要望 > コメント欄の検索機能を検討していただきたいです](https://qiita.com/7of9/items/ce0c75a634fb13877377)

## 試した方法

1. @yumetodo さんの[qiita_export_all](https://qiita.com/yumetodo/items/ea9ecb5a30dbd120f955)で記事をローカルバックアップ
    - v1.1.0を使用
    - 手順は[GitHub](https://github.com/yumetodo/qiita_export_all)を参考にしました
2. バックアップディレクトリにおいて以下を実行
    - `grep -r "rpm " items/*/comments`
        - 参考: [How to use “grep” command to find text including subdirectories](https://askubuntu.com/questions/55325/how-to-use-grep-command-to-find-text-including-subdirectories)
3. grep結果から該当記事のタイトルを見つける
4. Qiitaでタイトル検索
5. 記事を開く
    - https://qiita.com/7of9/items/9ab581c15fe89127f429

grep実行例

```bash
$ grep -r "rpm " items/*/comments
items/NetCDF on CentOS6.8  undefined reference to `nf_enddef_'  の対処  yumのパッケージでも問題なかった  ライブラリオプションに-lnetcdffを足す/comments/2016-10-26T193824+0900/index.html:<div class="highlight"><pre><span></span>rpm -qf /usr/lib64/libmcheck.a
items/NetCDF on CentOS6.8  undefined reference to `nf_enddef_'  の対処  yumのパッケージでも問題なかった  ライブラリオプションに-lnetcdffを足す/comments/2016-10-26T193824+0900/index.html:<div class="highlight"><pre><span></span>rpm -qpl hogehoge.rpm
items/NetCDF on CentOS6.8  undefined reference to `nf_enddef_'  の対処  yumのパッケージでも問題なかった  ライブラリオプションに-lnetcdffを足す/comments/2016-10-26T193824+0900/index.html:<div class="highlight"><pre><span></span>rpm -ql hogehoge
items/NetCDF on CentOS6.8  undefined reference to `nf_enddef_'  の対処  yumのパッケージでも問題なかった  ライブラリオプションに-lnetcdffを足す/comments/2016-10-26T193824+0900/README.md:rpm -qf /usr/lib64/libmcheck.a
items/NetCDF on CentOS6.8  undefined reference to `nf_enddef_'  の対処  yumのパッケージでも問題なかった  ライブラリオプションに-lnetcdffを足す/comments/2016-10-26T193824+0900/README.md:rpm -qpl hogehoge.rpm
items/NetCDF on CentOS6.8  undefined reference to `nf_enddef_'  の対処  yumのパッケージでも問題なかった  ライブラリオプションに-lnetcdffを足す/comments/2016-10-26T193824+0900/README.md:rpm -ql hogehoge
```

### 検索に使うキーワード

コメントに書かれている文字列を検索できるので、以下のようなキーワードを使うことができる。

- ユーザ名 
    - お礼を書いた時の文字列にユーザ名を入れている場合
    - 例: @xxxさん ありがとうございます
- コマンド名
    - 例: locate, rpmなど
        - 一方でwhichで探すと膨大な数の結果が表示された
- アルゴリズム名や公式名
    - 例: polyhedron
- 論文の人名
    - 例: Reeger
Googleドキュメントを使って画像から一瞬で文字を抽出し、文章を書き起こす方法 

# 前段
 - 久しぶりに衝撃を受けたので紹介します
 - Google Driveに入れた画像をGoogleドキュメントで開くと文書がすべて書き起こしされていました
 - 作業時間は3秒くらいです

# 手順
### 1.GoogleDriveに画像を入れます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/45434/658d2765-997e-63c7-35e2-b0cd1df8f9be.png)

### 2.右クリックして「Googleドキュメントで開く」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/45434/1f086da3-7e35-ea87-76bb-2936ee17f0cf.png)

### 3.画像の下に書き起こされたテキストが表示
※Airbnb Storyの気になった部分を写真に取って、写真編集でラインを引いた画像です。当時の僕は「考え方をアップレベルしてほしい」と思ってたみたいです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/45434/f3711b09-42aa-23f1-38a5-9ce2b2ae3ddf.png)

# さいごに
さすがにこれにはびっくりしました！Google先生すごい！
もっと便利な活用方法がありそうです。
CSSのみでtableの行列入れ替え

レスポンシブで行列入れ替えて表示したい、というようなケースがあったのでやってみました。
Safari, Chrome, Firefoxで確認してますが、どうかなあ。
flex使ってるからIE10以降だったら大丈夫なはず。
だから、ここだけモバイルファーストを破って、PC用にtable組んでから、mobile向けに行列入れ替えたら良いかもしれない。
どちらにせよ、中身の高さが揃ってないと駄目なのでフレキシブルな組み方では無いけれども内容固定のコンテンツだったら使えるかな。

## HTML

```html
<table>
    <thead>
        <tr>
            <th></th>
            <th>午前</th>
            <th>午後</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>月</th><td>◯</td><td>◯</td></tr>
        <tr><th>火</th><td>◯</td><td>◯</td></tr>
        <tr><th>水</th><td>◯</td><td>◯</td></tr>
        <tr><th>木</th><td>◯</td><td>◯</td></tr>
        <tr><th>金</th><td>◯</td><td>◯</td></tr>
        <tr><th>土</th><td>-</td><td>-</td></tr>
        <tr><th>日</th><td>-</td><td>-</td></tr>
    </tbody>
</table>

```

## CSS

```css
table {
    width: auto;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td {
        display: block;
        width: auto;
        padding: 1em;
        text-align: center;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
}
thead {
    display: flex;
    float: left;
}
thead th:first-child:before {
   content: ' ';
   padding: 1em;
}
tbody {
    display: flex;
    width: auto;
}
tbody tr {
    display: flex;
    flex-direction: column;
}
```

## プレビュー

![スクリーンショット 2018-01-31 22.03.31.png](https://qiita-image-store.s3.amazonaws.com/0/158124/3c38c0ed-83fa-d186-4c2a-4b0d913929df.png)

## 参照
flex - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex
Proxy配下でHeroku CLIで使うためには設定が必要である

当たり前のことなのですが、プロキシ配下では先にこれをコマンドで打っておきましょう。

```Terminal
$ export HTTP_PROXY="http://hogehoge"
$ export HTTPS_PROXY="http://hogehoge"
```

そうするとちゃんと動きます。

```Terminal
$ heroku login
heroku-cli: Updating to 6.15.20-3505c84... 11.3 MB/11.3 MB
Enter your Heroku credentials:
Email: sample@sample.com
Password: ***************
Logged in as sample@sample.com

```
react-router でURLを直打ちしたときにアセットを正しく表示できない。

# 現象

react-router を使っていて、`/users/:id` のようなネストしたURLを直打ちした際、アセット(今回は画像)をうまく表示してくれなかった。

# 解決策
↓のようなかんじで、絶対パスで指定する必要がある。

before

```html
<img
  src="images/hoge.png"
  alt="Hoge"
/>
```

after

```html
<img
  src="/images/hoge.png"
  alt="After"
/>
```
react-router でネストされたURLを直打ちして 404 Not Found になる対処法

# 現象
以下のような Route 設定で

```html
<Switch>
  ...
  <Route path="/login" render={() => <Login onClick={login} />} />
  <Route
    path="/subjects/:id"
    render={props => (
      <Subject
        items={this.state.items}
        subject={this.state.subject}
        getItemsCallback={subject_id => getItems(this, subject_id)}
        getSubjectCallback={subject_id => getSubject(this, subject_id)}
        {...props}
      />
    )}
  />
</Switch>
```

`/login` にはアクセスできるが、`/subjects/:id` にアクセスしようとすると、まっ白の画面に成り
 console に以下がでる。

```
GET http://localhost:4000/subjects/bundle.js 404 (Not Found)
```

`subjects/:id` の `:id` の部分が原因かと思い、試しに `/login` を `/login/hoge` として試してみると、`/login/hoge` の方もアクセスできないことが判明する。
つまり、ネストされた URL に対応できていないことがわかる。



# 解決
エラー文を見てみると、`http://localhost:4000/subjects/` の下に bundle.js があるかどうかをチェックしてしまっている。
bundle.js は `http://localhost:4000/` を見てほしいので、そこをなんとかする。

webpack の設定を見ると、

```js:webpack.config.js
module.exports = {
  entry: __dirname + "/src/index.jsx", // トランスパイル対象
  output: {
    path: __dirname + "/dist", // 出力先ディレクトリ
    filename: "bundle.js" // 入力されたファイルをまとめて出力するときのファイル名
  },
  ...
```
となっているので、__dirname + "/dist/bundle.js" をチェックして修正する。

##### before

```html:dist/index.html
<!DOCTYPE html>
<html>
  ...
  <body>
    ...
    <script src="bundle.js"></script>
  </body>
</html>
```

##### after

```html:dist/index.html
<!DOCTYPE html>
<html>
  ...
  <body>
    ...
    <script src="/bundle.js"></script> # 絶対パスにした
  </body>
</html>
```

# 参考
https://github.com/webpack/webpack-dev-server/issues/978
pom

```xml:pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>mymaven</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.opencsv/opencsv -->
        <dependency>
            <groupId>com.opencsv</groupId>
            <artifactId>opencsv</artifactId>
            <version>4.0</version>
        </dependency>

        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.3</version>
        </dependency>

    </dependencies>

</project>
```
メールサーバ構築・独自ドメインのメールアドレス作成(1/4)～サーバリソース確保編～

##目標
最終目標　：メールサーバを立てて、独自ドメインのメールアドレスを作成する
今回の目標：サーバリソースの確保

##必要なもの
1. **サーバーリソース確保**　　→今回はこれ
2. 独自ドメイン取得
3. サーバーと独自ドメインの紐付
4. メールサーバのインストール・設定

##サーバリソースの選定
・ （前提）ドメインも調達予定
・ そのうちWebサーバーとかも建てたい

**選択肢**
自宅で時報やtwitterのbotとして働いてくれているraspberrypiを使うか？
クラウドサービスの[AMAZON EC2](https://www.xserver.ne.jp/)で契約済みの何に使っているわけでもないサーバを使いまわすか？
レンタルサーバの[XSERVER](https://www.xserver.ne.jp/)を新規契約するか？

|↓| 場所 | 月額 | ドメイン | 自由度 | 可用性 |ディスクサイズ|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| raspberrypi  |  自宅LAN内 | 無料  | 別途用意   | 高  | 低  |30GB|
| クラウドサービス | インターネット  | 従量課金  |  別途用意 | 高 |高   |8GB|
| レンタルサーバ  |  インターネット |  定額900円 |  セット |  低 |   高|200GB|
・ 厳密にいえばラズパイも電気代かかるとかあるのですがまあざっくり。
・ クラウドサービス費用は実績から推測すると大体月500円いかないぐらいと考えられる。たぶん
・ レンタルサーバの自由度を低にしているのは、インストール可能なプログラムに制限があったため。


##結論
クラウドサービス(AMAZON EC2)を利用することにしました。
・ラズパイ没理由：
　　メインアドレスにするつもりなので、自宅近辺で災害などがあった場合に連絡手段が減ってしまうから。
　　年内に引越し予定があるため、しばらく停止してしまうかもしれないから。
・ レンタルサーバ没理由
　　費用（もし運用してみてクラウドサービスの利用料が跳ね上がるなどある場合は考えます）

今使ってるEC2のサーバはディスクサイズが比較的小さいですが、
感覚的には8GBもあれば十分すぎるぐらいかなと思っています。
設定次第でgmailにアーカイブもできると人様に教えていただいたので、設定したら別途記事にします。

次回は独自ドメインの取得をかく。
文系卒社会人が統計入門する最短学習法

統計の学習をすると、難しい数式が出てきて躓くことも多々あると思います(経験談)。「入門」とつくタイトルの本であっても、数学当然知っているよ人間が書いていて、全然理解できないことが多いハズ。
筆者もそんな状態から2年間、**試行錯誤をしながら学習し、「入門した！」ぐらいは自信を持って言える**ようになりました。ただ、入門しただけなので、それより先は未知の分野です。
**2年前の自分自身にアドバイス**するつもりで、この記事を書きます。
関連する記事は以下のとおりです。

- [文系卒社会人が統計・機械学習を理解するための数学勉強方法](https://qiita.com/FukuharaYohei/items/0a66c37091dc27c71fe6)
- [高校数学復習を終えると統計学の入門ができるのか？](https://qiita.com/FukuharaYohei/items/8cb8915b310aa5763303#_reference-4ca18bce1585d0f66e53)
- [文系卒社会人が統計入門でのモヤモヤを克服した話](https://qiita.com/FukuharaYohei/items/a53a8b9dbd5cef2a2562#_reference-75a35f25fb29ac401243)

#時間と目的別学習方法
統計の裏には数学が密接に関連しています。しかし、数学はどうしても苦手な人もいますし、**全ての統計を学習する人が数学のような時間がかかる基礎レベルから理解する必要はない**と考えています。特に実務よりも管理を重点に置く方は、基礎的な考え方を理解するだけで十分かと思います。
**学習時間の目安は筆者の経験談ですが、当然個人差多いです。**学習方法は、文系卒向けなので、理系の方は、圧倒的に短縮できるはず。

##短時間速習型

 - ゴール:統計学のエッセンスを掴む
 - 目安となる学習時間:15h

|ステップ|学習内容|学習時間目安|コメント|
|:--|:--|:--|:--|
|1|統計の実務系|5h|まずは、実務面から攻めるのがい位と思います。有名な教材だと[「統計学が最強の学問である」](http://amzn.to/2npvcey)あたりです。システム関連の仕事の方は[「データサイエンティスト養成読本」](http://amzn.to/2nkGpxa)のようなムック本もおすすめです。|
|2|基礎的な統計学|10h|数学苦手でも数理的なエッセンスレベルは理解した方がいいです。私は[「まずはこの一冊から 意味がわかる統計学」](http://amzn.to/2FwYAWZ)を使って学習しました。|

##数学速習型
一気にハードル高くなります。

 - ゴール:数理的な背景の概要を理解した上で統計入門
 - 目安となる学習時間:170h

|ステップ|学習内容|学習時間目安|コメント|
|:--|:--|:--|:--|
|1|高校数学復習|115h|とても時間がかかります・・・。私は[「長岡先生の授業が聞ける高校数学の教科書数学」](http://amzn.to/2Gzwj3s)を使いました。削れる項目がないかを探しましたが、全て重要ですね。あえて言うなら図形と計量(正弦定理など)を削ってもいいかもしれません。<br>※「三角関数を削ってもいいかも」としたのを変更しました|
|2|大学基礎数学|30h|大学基礎レベルの微分積分は必須です。私は[「スバラシク実力がつくと評判の微分積分キャンパス・ゼミ」](http://amzn.to/2oP3bj7)と[「スバラシク実力がつくと評判の統計学キャンパス・ゼミ」](http://amzn.to/2nnQtoZ)を使って学習しました|
|3|統計入門|25h|[ようやく統計の世界の入門です。大学基礎数学で数理的な部分を理解できていれば入門できます。[「統計学入門 (基礎統計学)」](http://amzn.to/2nuktS7)がおすすめです(大学数学を経ずに読むのはお勧めしません)。また、この段階で統計検定2級の勉強もいいと思います|

※最初に「短時間速習型」の内容を学習するのもおすすめです。

##じっくり型
中長期的に腰を据えないとできません。

 - ゴール:数理的な背景の概要を理解した上で統計入門をし、かつシステムで簡単な統計解析ができる
 - 目安となる学習時間:270h

|ステップ|学習内容|学習時間目安|コメント|
|:--|:--|:--|:--|
|1|基礎数学|170h|「数学速習型」の内容|
|2|大学数学演習|80h|微分積分と統計学は演習問題で慣れないと理解が深まらなかったです。私は[「スバラシク実力がつくと評判の演習微分積分キャンパス・ゼミ」] (http://amzn.to/2hsy3Ul)と[「スバラシク実力がつくと評判の演習統計学キャンパス・ゼミ」] (http://amzn.to/2DPlzw9)を使って学習しました。|
|3|ソフトを使った学習|20h|何かアプリケーション使って統計解析をするとより理解が深まります。統計ならR言語が勉強に適してて、[「Rによるやさしい統計学」](http://amzn.to/2DOrmBT)を使って学習しました。|

#補足
思ったことを羅列していきます。

##個人的に感じたコツ
教材のわからない部分は、ドンドン飛ばしていきました。一つのところで躓いていて、時間をかけすぎるよりは、最初に軽く全体を読んで、2度目にもう少し時間をかけるような読み方をしていました。1日ですべてを深く理解することはできないので、少しづつこつこつと積み上げていきます。凡人だからしょうがないね。

##学習時間が長すぎない？
正直、長いです・・・。ただ、文系卒の私はこのくらいしないと、統計学の根底にある標準正規分布や微分・積分が理解できませんでした。時間を捻出するために[「忙しい人向け睡眠時間を増やさずに睡眠不足を解消した方法」](https://qiita.com/FukuharaYohei/items/690dce04d6dd186a0014)みたいなことを取り組んで捻出しています。また、電車の移動時間などちょっとした隙間時間を使って勉強していました。[kindle](http://amzn.to/2E6l3db)が持ち運びに最高なので、買ってしまいました。他の電子書籍でもいいと思います。

##統計検定2級は役に立つのか？
統計検定2級は、ある程度役に立ちます。特に薄く概要を学習したい場合にいいです。数学をそんなに理解していなくても合格できます。記事[「統計検定2級合格までの勉強方法」](https://qiita.com/FukuharaYohei/items/3c4114e0ed8fa48a408e)参照。

##R言語ではなくPythonの方がいいのでは？
統計入門という目的に限ればR言語の方が適しているように思えます。環境準備が容易で、バージョンによる差異があまりないので。ただ、Pythonに慣れている方であれば、Pythonでもいいと思います。

##時間計測
学習時間を見える化するために[toggl](https://www.toggl.com/app/timer)を使っています。スマホ用アプリも使いやすくて重宝しています。昔はExcelで記録してましたが、togglの方が圧倒的にいいです。
Raspberry PiにJenkinsをインストールしてブラウザ接続まで

[RaspberryPiにJenkinsを入れて高級なcronの代わりに使う](https://qiita.com/_takeuchi_/items/9be897ddfe73854ba578)
を参考に．
###アップデート
```
sudo apt-get update
sudo apt-get upgrade
```
###Jenkinsインストール
```
sudo apt-get install jenkins
```

###設定変更
```
sudo vi /etc/default/jenkins
```

- 追記

```
JAVA_ARGS="-Xmx256m -Djava.awt.headless=true -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8"
```

###Jenkinsにアクセス
http://[raspberry piのIPアドレス]:8080

###繋がらない？
初期設定だとJenkins PC以外からのブラウザ接続はできないみたい？

- ポート番号が空いているか？

```
sudo netstat -tlnp | grep 8080
```
何か表示があれば問題ないです．

-  HTTP_HOSTを変更する

```
sudo vi /etc/default/jenkins
```
で下記箇所を見つける．

```
# Listen address for HTTP connector (use 0.0.0.0 to listen on all IPv4/IPv6 interfaces)
HTTP_HOST=127.0.0.1
```
全ての接続を許すには0.0.0.0を使ってね，とあるので

```
HTTP_HOST=0.0.0.0
```
に変更.

- Jenkins再起動

```
sudo systemctl restart jenkins
```
- Jenkinsにアクセス

http://[raspberry piのIPアドレス]:8080

###終わりに
このままだとセキュリティ的に問題あると思うので何かする必要ありそう．

###参考
日本語だと意外と解決方法が見つからなかったです．そういう時は英語で調べるといいの見つかりそうですね．
- https://www.raspberrypi.org/forums/viewtopic.php?t=172543
- https://stackoverflow.com/questions/36926764/cant-access-jenkins-running-on-a-raspberry-pi-using-port-8080
文字列をフォーマットする関数のパラメータに装飾された仮想DOMを使いたい

# 何がやりたいか

```json
{
  "format": "こんにちは、{user.name}さん",
  "params": {
    "user": {
      "name": "mpyw"
    }
  }
}
```

みたいなAPIレスポンスが返ってきたとして，これをフロント側で**ユーザ名の部分を自由に装飾して**表示させたい。

- 頻繁に新しいメッセージテンプレートが追加されるのに，いちいちそのたびにフロントエンドアプリの更新をさせたくない。（react-nativeとか使ってるとつらそう）
- HTMLタグを文字列としてそのまま埋め込むのってなんか違う気がするし，`dangerouslySetInnerHTML`も気軽には使いたくない。

文字列展開のみなら既に [Matt-Esch/string-template](https://github.com/Matt-Esch/string-template) などがあるんですが，なかなかJSXによる装飾に対応したのが無かったんですよね。例えばこうしたい。

> こんにちは、<font color="blue">mpyw</font>さん


# 実装してみる

`String.prototype.replace`を使いたくなりますが，仮想DOMに対応できないので，`String.prototype.split`で処理するのがミソです。

```js:template.js
import React from 'react'

const renderValue = (Node) => {
  if (typeof Node === 'function') {
    return <Node />
  }
  if (Node === undefined) {
    return null
  }
  return Node
}

const resolveParam = (params, key) => {
  if (typeof key !== 'string') {
    return params[key]
  }
  let param = params
  for (const segment of key.split('.')) {
    if (!param) return
    param = param[segment]
  }
  return param
}

const template = (format, params) => {
  const chunks = format.split(/\{(\{[\S\s]*?})}|\{([\S\s]*?)}/g)
  const nodes = []

  for (const [offset, value] of Object.entries(chunks)) {
    switch (offset % 3) {
      case 0:
        nodes.push(value)
        break
      case 1:
        if (value === undefined) continue
        nodes.push(value)
        break
      case 2:
        if (value === undefined) continue
        nodes.push(renderValue(resolveParam(params, value)))
        break
    }
  }

  return nodes
}

export default template
```

```jsx:使用例1
const { format, params } = {
  format: 'こんにちは、{user.name}さん',
  params: {
    user: {
      name: 'mpyw'
    }
  }
}

const decoratedParams = {
  ...params,
  user: {
    ...params.user,
    name: <span style={{ color: 'blue' }}>{params.user.name}</span>,
  },
}

return <div>{template(format, decoratedParams)}</div>
```

> こんにちは、<font color="blue">mpyw</font>さん

```jsx:使用例2
(<div>
  {template(
    'Hello, {p1}! Yeah, {p2}! Yo, {p3.foo}! {{This is escaped.}}',
    {
      p1: () => <span style={{ color: 'red' }}>World</span>,
      p2: <span style={{ color: 'blue' }}>World</span>,
      p3: {
        foo: () => <span style={{ color: 'green' }}>World</span>,
      },
    }
  )}
</div>)
```

> Hello, <font color="red">World</font>! Yeah, <font color="blue">World</font>! Yo, <font color="green">World</font>! {This is escaped.}

仮想DOM生成関数と仮想DOM両対応，ドットチェインのネストにも対応，って感じで一通り必要そうなやつは実装しました。だいたいこれで事足りるはず。

ライブラリにするほどでもないよね？
a == 1 && a == 2 && a == 3にするRubyスクリプト(おふざけ編)

## 文字列
```ruby
p !!DATA.read # => true
__END__
a == 1 && a == 2 && a == 3
```

## 例外
```ruby
begin
  p a == 1 && a == 2 && a == 3
rescue
  p true
end
```

## FalseClass
```ruby
def false.inspect;true;end
a=1
p a == 1 && a == 2 && a == 3 # => true
```

## 標準出力
```ruby
def p(m);puts !m;end
a=1
p a == 1 && a == 2 && a == 3 # => true
```

## 真面目編
* [a == 1 && a == 2 && a == 3にするRubyスクリプト - Qiita](https://qiita.com/tbpgr/items/11bbc2898022733a2177)
Node.jsで"listen EADDRINUSE :::3000"と怒られて調べてみたら・・・

Node.jsの勉強を興味本位で少しずつ初めていたら、タイトルのようなエラーに遭遇。
調べてみると、どうやらポートを使用してるからもう使えないよと怒られているらしい。

[のびすけさんの記事](https://qiita.com/n0bisuke/items/992046329d81dbedabf8)を見つけ、やってみるもうまくいかず・・・
よくよく調べてみると、Nodeのプログラムを止める時に「control + Z」で止めていて、こうすると「一時停止」という意味らしいので、上記のエラーが発生していた模様。ちなみに、一時停止から復帰する際には、「fg + node app.js」のように打ち込めば、おけ。

Nodeの問題ではなく、ターミナルの使い方から勉強します・・・
Macにext4のHDDをマウントする

# 経緯

Linux（CentOS 6）のサーバが死んだので、バックアップの外付けHDDから復旧しようとして、MacBookにマウントするときに調べたのでメモ。

ちなみに普通に外付けHDDをUSB3.0でMacbookにつなぐとext4フォーマットに対応していないらしく、ダイアログが出て「初期化」するか、「無視」するか、聞かれました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/171774/69410d37-53f1-9d8f-bf33-c8682901ae40.png)

以降の手順は先に外付けHDDをUSBで繋いでから実行しちゃいましたが、常識的に考えてインストール後にUSB接続した方がいいですよね。。

# ext4fuseのインストール

どうやらext4fuseというのが必要らしい。

```
$ brew cask install osxfuse
$ brew install ext4fuse
```
# マウント

マウントのコマンドのヘルプ。うむ。分かりやすい。

```
$ ext4fuse -h
Version: ext4fuse-0.1.3
Usage: ext4fuse <disk> <mountpoint>
```

ちなみに外付けHDDのデバイスはディスクユーティリティを開くと見れた。

マウントは以下のコマンドで実行する。すると、初回実行時にmacOSの「セキュリティとプライバシー」のパネルが開くので、そこでこのosxfuseの実行許可を与えないといけない。

```
$ sudo ext4fuse /dev/path_to_disk /path_to_your_mountpoint -o allow_other
```

注意: ext4fuse時に`-o allow_other`オプションをつけないと、root以外のユーザーでマウントしたディレクトリが見えませんでした。

以上。あとはマウントポイントで煮るなり焼くなり、お好きなように。

# 取り外すとき

普通にumountするだけでした。

```
$ sudo umount /path_to_your_mountpoint
```

# 参考文献

https://github.com/gerard/ext4fuse
このREADME見れば全部書いてくれてるから、正直この記事はいらない気もする・・・。
Rails#Carrierwaveで、uuidを使うことに遭遇した問題


# UUIDをつける

```

def filename
    "#{secure_token}.#{file.extension}" if original_filename.present?
end

private 
def secure_token
    var = :"@#{mounted_as}_secure_token"
    model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.uuid)
end  
```

このように、ファイル名をUUIDに置き換えることが可能になる

このプロセスはupdateが走ってるときにファイル名を生成する段階で走る

つまり、version生成するときにファイルはすでにUUIDになっている

```ruby
def full_filename(for_file)
    for_file # 名前がuuid.extensionになっている
end
```

# 既存のuploaderを後で、recreate_versions!したい！！！！

Lineのimage mapperは名前を200に制限かけている、200ぐらい余裕だろうと思いきやpull req出した時点でバグ報告受けた、ファイル名の長さが200超え...

なので、後でUUIDにしようと話がまとまり、実際に実装
悪夢の始まり!!

実装上、既存のファイルは問題なく動くがrecreate_versionsを走らせると、必要なファイルが生成されない

```
def full_filename(for_file)
    [version_name, super(for_file)].compact.join('_')
end
```

superと同じコードでもダメ

原因が、filenameがもう一回呼ばれるから!!!

まあー呼ばれるんだったら全部更新してくれと思うが

```ruby
content.url # で、ファイル名がかわらない
content.version.url # で、uuid.extensionが生成される。まじか！！！
```

line image mapperは
image.url
image.url/240
image.url/1040
みたいな、urlをほしいがるから
image.urlはファイル名のまま
image.version_240はuuidのpathになっている！！！

つまり、既存のファイルでrecreateをしたい場合は

```ruby
def filename; end
```

をコメントアウトしないといけない... 何これ!!!

# 不満その２

重い!!!

一番理解できないのが

```
content.version.url
```

を呼ぼうと思っても、全バージョンを舐め回す
なんでやん、version指定した意味はなに！！


まあー、しかし、使いやすいしパーフォマンス気にしないであれば使ってもいいじゃないて感じかな
GitLabでアバターアイコンが表示されない

# はじめに

コミット用のメールアドレスにGitLabに登録したアドレスとは別のアドレスを使っているとアバターアイコンが表示されないので解決策をメモしておきます。



# 解決策
[Setting] - [Emails]からコミット用のメールアドレスを追加する。
![AddEmail.png](https://qiita-image-store.s3.amazonaws.com/0/149333/0d34d5f3-c107-41cb-5b0d-82a880442d89.png)
Db2インスタンスの起動と停止に関するメモ

Db2関係のプロジェクトのメンバーでも意外に知らない人がいるので、簡単にまとめておきます(´・ω・｀) もっともポピュラーな起動方法(だとわたしが勝手に思っている)のが`db2start`。`db2start`を発行したユーザがインスタンスユーザとして管理しているインスタンスを起動します。

```bash
su - db2inst1
db2start
# あるいは
su - db2inst1 -c "db2start"
```

select文やinsert文と同じ階層(?)で、インスタンスを起動したい場合は`start database manager`を利用します。`db2 -f path`とするとpathに指定したファイルを読み込んで、SQLを実行することはDb2ユーザの中では比較的よく知られていますが、その入力として`start database manager`は使いやすかったです(実体験)。

```bash
# すべて同じ
db2 "start database manager"
db2 "start db manager"
db2 "start dbm"
```

最後に`db2gcf`。`db2gcf`はインスタンスの起動・終了・監視をつかさどるコマンドで、起動の場合は`-u`オプションを指定します。`db2start`にしろ`start database manager`とは違い`su`の必要がないので、単一のシェルスクリプトから複数のインスタンスの起動を行う場合などに有用でした(実体験)。ただし実行には`root`権限が必要になります。

```bash
# ひとつのシェルスクリプトから複数インスタンスを起動する
db2gcf -u -i db2inst1
db2gcf -u -i db2inst2
db2gcf -u -i db2inst3
```

***

"起動"があれば、当然"停止"コマンドも存在します。`db2start`に対応するものが`db2stop`、`start database manager`に対応するものが`stop database manager`。`db2gcf`の場合は`-d`オプションを指定すると"停止"モードになります。

```
# すべて停止コマンド
su - db2inst1 -c "db2stop"
db2 "stop database manager"
db2gcf -d -i db2inst1
```

ところで上述のコマンドをたたいたとき、次のようなエラーメッセージが出力され、インスタンスが停止しないということがあります:「SQL1025N  The database manager was not stopped because databases are still active.」。たいていは何らかのアプリケーションが対象のインスタンスに接続しているために起きるのですが、これを無視して強制的にインスタンス停止を行うにはどうすればよいでしょうか。

まず`db2stop`の場合は`db2stop force`、`stop database manager`の場合は`stop database manager force`とそれぞれ`force`を付与します。次に`db2gcf`ですが、`-k`オプションを付与すると`db2stop force`に近い挙動を示すようです(´・ω・｀)

```bash
すべて強制停止コマンド
su - db2inst1 -c "db2stop force"
db2 "stop database manager force"
db2gcf -k -d -i db2ins1
```

参考:

- [「db2start - Start DB2 コマンド」](https://www.ibm.com/support/knowledgecenter/ja/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0001939.html)
- [「db2stop - DB2 の停止コマンド」](https://www.ibm.com/support/knowledgecenter/ja/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0001940.html)
- [「START DATABASE MANAGER コマンド」](https://www.ibm.com/support/knowledgecenter/ja/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0001982.html)
- [「STOP DATABASE MANAGER コマンド」](https://www.ibm.com/support/knowledgecenter/ja/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0001983.html)
- [「db2gcf - DB2 インスタンスの制御 コマンド」](https://www.ibm.com/support/knowledgecenter/ja/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0010986.html)
fisherman/zの出力をpecoに渡せなくなった

[fisherman/z](https://github.com/fisherman/z)と[peco](https://github.com/peco/peco)を組み合わせて使っていたのですが、この[PR](https://github.com/fisherman/z/pull/49)で`z -l`の結果を標準出力に渡さなくなった模様。あまりお行儀よくないかもしれませんがfisherman/zがためている履歴を直接見るようにしてみました。

```fish
function __peco_z
  set -l query (commandline)

  if test -n $query
    set flags --query "$query"
  end

  cat $Z_DATA | awk 'BEGIN{FS="|"} { print $3,$1 }' | sort -nr | awk '{ print $2 }' | peco $flags | read foo
  if [ $foo ]
      cd $foo
      commandline -r ''
      commandline -f repaint
  end
end

function fish_user_key_bindings
  # お好みのキーバインドで
  bind \cq '__peco_z'
end

```
Cloud Functions for Firebaseでexpressを使う

# 概要
Cloud Functions for Firebaseで楽してWebAPIを作りたいッッ！！
そんな人(オレ)のための資料である。

簡単な説明しかしてないので、より詳しい情報を知りたい人は今後のオレに期待をするかぐぐってくれ。

# 前提知識
Cloud Functions for FirebaseでHTTPトリガー使ってHelloWorld出来るくらいの知識が必要。

事前知識ない人もココらへん適当に見てくれればわかる
[Firebaseすっごーい！](https://qiita.com/Miracle-T-Shirt09/items/8ac43ab7a18b3001dda0)
[Cloud Functions for Firebaseに関する雑記](https://qiita.com/Miracle-T-Shirt09/items/3c17b1d4b7ee00166f41)

# 事前準備
* firebaseのprojectを作成
* firebase init functions

# expressのインストール
npm(yarnでも可)でexpressをインストール。
cors考慮する場合は適宜入れてね。

```bash
npm i express --save
```

# expressを用いたAPIの作成
## 実装
適当なJSON構造を返すコード書きます。以下は最低限のユーザー情報を想定。

```js
const functions = require('firebase-functions');
const express = require("express");

const app = express();

app.get('/users', (req, res) => {
  // 本来はここでFireStoreとかからデータ取ってくるよ
  const users = [
    { "id": 1, "name": "イリヤ" },
    { "id": 2, "name": "美遊" },
    { "id": 3, "name": "クロエ" },
    { "id": 4, "name": "オルタ" },
    { "id": 5, "name": "マシュ" }
  ];

  // データを返却
  res.send(JSON.stringify(users));
});


const api = functions.https.onRequest(app);
module.exports = { api };

```

## デプロイ
いつものこまんど

```bash
firebase deploy --only functions
```

# 動作確認
## curlでAPIの動作確認
curlかブラウザで以下のエンドポイントを叩いてください。

```bash
$ curl -s https://{hogehoge}.cloudfunctions.net/api/users | jq
[
  {
    "id": 1,
    "name": "イリヤ"
  },
  {
    "id": 2,
    "name": "美遊"
  },
  {
    "id": 3,
    "name": "クロエ"
  },
  {
    "id": 4,
    "name": "オルタ"
  },
  {
    "id": 5,
    "name": "マシュ"
  }
]
```

## Tips
homebrewでjq入れよう！
API開発とかしてたら超便利だよ！

```bash
brew install jq
```

# 所感
超簡単！
すっごーい！！
たーのしー！！！

express使えるからHTMLの返却もできるということだよね。
FaaSだけどPaaS代わりに使うこともできそう。(Lambdaもできるんだろうな~~やらないけど~~)

next.jsも使えるっぽいのでこんどfirebaseでSSR/SPA実装してみる。
gitで .vscode ディレクトリを反映しない

~/.config/git/ignore に以下を書いてしまっている。

```
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
```

- https://github.com/github/gitignore/blob/master/Global/VisualStudioCode.gitignore
(Qiita API v2 活用) Qiita のタグ情報を API 経由で取得する方法

# やりたいこと

記事数が多いタグを確認したい。

Qiita に記事を投稿しようと思ったとき、参考になると思うので。

# タグを指定しないで取得するサンプルコード

``` bash
curl --silent \
  "https://qiita.com/api/v2/tags?page=1&per_page=100&sort=count" \
  | jq -c '.[] | [.id, .items_count]'
```

## 実行結果

``` example
["JavaScript",17265]
["Ruby",15815]
["Python",14890]
["PHP",11029]
["iOS",10742]
["Rails",10518]
["Android",9151]
```

やっぱり、JavaScript の記事数が圧倒的ですね。

  - <https://qiita.com/tellusium/items/91ada7c868e4f0a140af>

頑張れば、上記のような素晴らしい可視化につながるはず！！

# タグを指定して取得するサンプルコード

``` bash
curl --silent \
  "https://qiita.com/api/v2/tags/spring-boot" \
  | jq .
```

## 実行結果

``` example
{
  "followers_count": 446,
  "icon_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/3d53932cbddd200e4c5b6c780f1d1d8281a1c579/medium.jpg?1433783158",
  "id": "spring-boot",
  "items_count": 701
}
```

なるほど、記事数しかとれないですね。

記事数少なくてもフォロー数が多いということは、人気度が高いと考えてよいのでしょうか？

# 参考情報

  - <https://qiita.com/api/v2/docs#タグ>
      - <https://qiita.com/api/v2/docs#get-apiv2tags>
      - <https://qiita.com/api/v2/docs#get-apiv2tagstag_id>
Dockerfile から上の階層のディレクトリを参照する

# 背景
プロダクトが動くコンテナの作成中に、プロダクトコードのrootに、Dockerfileを配置するのが気持ち悪かったので、

```
repository
 │
 ├ .docker
 │   ∟ Dockerfile
 │
 ├ product
     ∟ init.sh
```

のように、ディレクトリを掘ってそこに、コンテナ関連のコードを入れるようにしてました。
そして、
Dockerfileをbuildする際に、Dockerfileよりも上の階層にあるcodeをimageに含めようと

```file:Dockerfile
COPY ../product/init.sh /usr/src/app/
```

と 記述したところ

`COPY failed: Forbidden path outside the build context: ../product/init.sh ()`

とエラーが吐かれ、buildに失敗しました。
だからといって、
Dockerfileをproject root に配置するのは、負けたきがするので、どうにかこの構成でbuildを行いたい!

そんな時の解決手段になります。

# 解決方法

`-f` optionを使いましょう!!

```
$ docker build -t {image name}:{tag} -f repository/.docker/Dockerfile .
```

`-f` で、Dockerfileの場所を指定できます。
このoptionを使う事で、 buildコマンド実行場所を `docker build` のカレントディレクトリとすることができるようになります。

# 課題

上記の解決方法だと、`docker build` コマンドをプロジェクトルート or その上の階層で実行する必要があります。
なので、`build.sh` なりを作成し、どこから実行しても 必ず、 想定した場所をカレントディレクトリにすることができると思うので、これは、今後の課題として、時間のある時 shell作成します。
DockerHubでautomated build〜他人の褌で相撲をとれ〜

# 目的
DockerHubのautomated buildをつかって、
Githubのリポジトリ上のDockerfileが更新されるたびに
イメージが自動ビルドされるようにする。

**これでローカルのリソースを使うことなく他人の褌で相撲が取れる**

真面目に述べるとDockerがインストールされていなかったりといった
状況でもgitクライアントとテキストエディタさえ動作すれば
Dockerコンテナイメージのビルドができます。

# 手順

## リポジトリの準備
GitHubでリポジトリを作ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/a6da2e64-c328-f924-e564-bbb0b03b529e.png)

## Dockerfileを準備

リポジトリをcloneして`Dockerfile`を作成する。

```text:Dockerfile
FROM alpine:latest
CMD /bin/sh -c 'echo "Hello automated build"'
```

## DockerHubアカウントとGitHubアカウントを連携させる

DockerHubにログインし、画面右上のドロップダウンメニューから
`Settings`を選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/59141f72-85b8-f6ef-1970-9b44788ff5c6.png)

`Linked Accounts & Services`タブを選択し、
Link Githubを選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/92ced220-4e12-17a7-a13f-8422e49cd864.png)

Public/Privateリポジトリの両方を利用したかったりするなら(A)を選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/b1a30d3d-89b1-a84f-c945-81cc1683af71.png)

Githubのログイン画面が表示されるので、パスワードを入力するとDockerHubの先ほどの画面に自身のアカウントアイコンが表示されるようになる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/d9324537-271d-702b-995c-0028110ef40f.png)

これでDockerHubアカウントとGitHubアカウントの紐付けは完了。

## automated buildの設定

右上の`Create`ドロップダウンメニューを選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/85261fb2-86a0-91cf-af7b-537cc37515a6.png)

`Create Auto-build Github`となっている方を選択。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/e3b2d6d1-d0b4-9fd0-61cf-e1490ce6a3ab.png)

連携させたいGithubリポジトリを選択。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/2c150d47-b8dc-09db-66b8-bbafb9942f79.png)

リポジトリの名前を設定したい場合は、テキストフィールド(Repository Namespace & Name)の中身を修正する。設定が終わったら`Create`ボタンをクリックする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/6dce39aa-e342-8bd0-2215-e785485bf3de.png)

リポジトリが作成される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/8bec9e2c-0ae3-0445-7231-1b1d6ec6e8ca.png)

## イメージのビルド設定確認

`Build Settings`リンクをクリックするとコンテナイメージのビルド
設定を確認できる。

ここで、gitのリポジトリのブランチごとにイメージのタグを変えたり、
Dockerfileの配置場所を指定したりといった様々な設定を行うことができる。また、手動でビルドを行うことも可能。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/875c5a13-79c1-4283-686b-db2b143ea180.png)

## 動作確認

試しに、Dockerfileを修正してcommit & pushすると自動でビルドが開始される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/d22246ae-6833-1195-fce4-b1ffadc9713e.png)

無事完了すると`Status`が`Success`となり、イメージを`docker pull`できるようになる。