OmniAICreator/Qiita-1.07M huggingface dataset:
【lxml】Unicode strings with encoding declaration are not supported.

PythonのXML解析ライブラリ`lxml`を使おうとしたら、以下のエラーが出てしまった。

>ValueError: Unicode strings with encoding declaration are not supported. Please use bytes input or XML fragments without declaration.

ソースコードは以下のような感じに手元にあるXMLファイルを読み込もうとしました。

```python
from lxml import etree
with open('sample.xml', 'r', encoding='utf-8') as f:
    xml = f.read()
    xml_object = etree.fromstring(xml)
```

`read()`でファイルを読み込んだ場合`type`は`<class 'str'>`なので、素の`str`型に変換するか`byte`形式にするかしないといけない

以下のようにして`byte`に変換すればよいと思ったら以下のようになんかエラーが出た。

```python
with open('sample.xml', 'r', encoding='utf-8') as f:
    xml = f.read()
    print(type(xml))
    xml = xml.encode('utf-8')
    print(type(xml))
    xml_object = etree.fromstring(xml)

# <class 'str'>
# <class 'bytes'>
# Traceback (most recent call last):
# 〜省略〜
# XMLSyntaxError: xmlParseEntityRef: no name, line xxxxx, column xxx
```
調べてみると、XMLタグ内で囲まれた文字列内に`&`があると`XMLSytaxError`がでるようです。
なので、雑な対応でありますが、一旦`&`(半角)を`＆`(全角)に変換して対応しました。
これでエラーは解決。

```python
with open('sample.xml', 'r', encoding='utf-8') as f:
    xml = f.read().replace("&","＆")
    xml = xml.encode('utf-8')
    xml_object = etree.fromstring(xml)
```

終わり
要素の削除の時だけFLIPアニメーションしない問題の対応

# 問題
vueでは`transition-group`を使ってアニメーションすることができますが、それで書いていた時に要素の削除の時だけFLIPアニメーションが効かない問題の対処法です。

<p data-height="265" data-theme-id="0" data-slug-hash="pOaGed" data-default-tab="js,result" data-user="wintyo" data-pen-title="vue flip animation test (fail)" class="codepen">See the Pen <a href="https://codepen.io/wintyo/pen/pOaGed/">vue flip animation test (fail)</a> by wintyo (<a href="https://codepen.io/wintyo">@wintyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 原因
凄く恥ずかしい話ですが、アニメーションの設定を一番上に書いていたせいで設定が上書きされなかっただけでした。
FLIPアニメーションをするために重要な`.flip-leave-active`に`position: absolute`を設定した内容が、適応先の要素である`.item`に`position: relative`を設定していたため、要素が消えるアニメーション中でも`relative`のままで、結果的に`.flip-move`クラスが付与されませんでした。

```scss:うっかりプロパティを上書きしちゃった例
.flip {
  // 要素が入るときのアニメーション
  &-enter {
    &-active {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
    &-to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  // 要素が消える時のアニメーション
  &-leave {
    &-active {
      // FLIPアニメーションするために必要な設定
      position: absolute;
    }
    &-to {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
  }
}

.list {
  position: relative;
  margin: 20px 0 0;
  padding: 0;
}

.item {
  // ここで設定したrelativeが、上のabsoluteの設定を上書きしていた
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  transition: all 0.5s;
  
  &__delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    
    &::before, &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70%;
      height: 2px;
      background-color: #ccc;
      content: '';
    }
    
    &::before {
      transform: translate3d(-50%, -50%, 0) rotate(45deg);
    }
    
    &::after {
      transform: translate3d(-50%, -50%, 0) rotate(135deg);
    }
  }
}
```

# 解決方法
一番単純なのはアニメーションの設定クラスを一番下にしてしまうことです。
ただ大きくなるとファイルを分けてインポートしたりして順番とか分からなくなるので、上書きしてしまうようなプロパティは設定しないことが一番だと思います。
今回はバツボタンを配置するために親要素にrelativeをつける必要がありましたが、`.item__inner`を新たに作ってそれにrelativeをつけるとかできると思います（最初原因が分からなかったのでその対応をしていました）。
NULL は許可するが空文字や空白文字は許可しないようにバリデーションを実装する

# 方法

```rb
class Anime < ApplicationRecord
  # 正規表現で空文字あるいは空白文字だけで構成された文字列を許可しないようにする。
  # 加えて allow_nil オプションを有効にして NULL は許可する。
  validates :title, format: { without: /\A[[:space:]]*\z/, allow_nil: true }
end

Anime.new(title: nil).valid? #=> true
Anime.new(title: 'Fate/stay night').valid? #=> true

Anime.new(title: '').valid? #=> false
Anime.new(title: ' ').valid? #=> false
Anime.new(title: '　').valid? #=> false
Anime.new(title: "\r\n").valid? #=> false
Anime.new(title: "\t").valid? #=> false
```

正規表現中の `[[:space:]]` は POSIX 文字クラスと呼ばれる表記で空白文字を表します。

# 参考

* [Ruby リファレンスマニュアル » 正規表現](https://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html)
Vueのアニメーションが凄い

# Vueのアニメーション
VueはFLIPアニメーションがデフォルトでついているので、以下のようなアニメーションを簡単に実装できます。

<p data-height="302" data-theme-id="0" data-slug-hash="WgMaXE" data-default-tab="js,result" data-user="wintyo" data-pen-title="vue flip animation test" class="codepen">See the Pen <a href="https://codepen.io/wintyo/pen/WgMaXE/">vue flip animation test</a> by wintyo (<a href="https://codepen.io/wintyo">@wintyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# transition-group
v-enter, v-leaveだけの場合は単純な`transition`を使えばいいですが、上のようにFLIPアニメーションを付ける場合は`transition-group`でラップします。
`transition-group`では`transition`でも使えたv-enter, v-leaveに加えて、v-moveもクラスに付与されます。v-moveは追加や削除などで要素が動く時に付与されます。要素の位置が重要なのでkeyの設定は必須です。
以下のコードは設定だけなので、後は`$data.list`に対して追加なり削除なりシャッフルなりをすると動くようになります。動くコードは上のCodePenの方を参照してください。（vueファイルとして書けなかったので書き方が若干違うのはご了承ください）

```vue:アニメーションの設定例
<template>
  <ul>
    <transition-group name="flip">
      <template v-for="item in $data.list">
        <li :key="item">{{ item }}</li>
      </template>
    </transition-group>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    };
  }
};
</script>

<style lang="scss">
.flip {
  // 要素が移動するときのアニメーション設定（基本的にはtransitionにtransformを設定していればいい）
  &-move {
    transition: transform 0.5s;
  }
  
  // 要素が入るときのアニメーション
  &-enter {
    // アニメーションの初期設定（初期値とtransitionを設定する）
    &-active {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
      transition: opacity 0.5s, transform 0.5s;
    }
    // アニメーション開始（目標のプロパティ値を設定する）
    &-to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  // 要素が消える時のアニメーション
  &-leave {
    // アニメーションの初期設定
    &-active {
      // 要素が消える場合はabsoluteにする（重要！）
      position: absolute;
      transition: opacity 0.5s, transform 0.5s;
    }
    // アニメーション開始
    &-to {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
  }
}
</style>
```

## 付与されるクラス名について
クラス名は`transition-group`のname属性で設定した名前を接頭辞にしたクラスが付与されます。今回で言えば、`.flip-move`, `.flip-enter-active`, `.flip-enter-to`, `.flip-leave-active`, `.flip-leave-to`がliタグに付与されます。

## transitionの設定
要素が入る時と出る時でそれぞれクラスが2つ付与されるので、SCSSのような入れ子で書ける言語にすると設定しやすくなります。`-active`と`-to`はタッチの差で`-active`の方がクラスが付与される（はず）なので、`-active`の方にCSS transitionの設定をします。クラスが付与される時間はここで指定したtransitionの時間なので、設定しない場合は何のクラスも設定されません（つまづきポイント）。
ちなみに今回はそれぞれに丁寧にtransitionを設定していましたが、付与対象のスタイルに`transition: all 0.5s;`とか設定していたらこれらの設定は不要になります。

## FLIPアニメーションするために設定する`v-leave`のポイント
`.flip-move`は要素が動く時に付与されるので、`-leave`クラスが付与される削除要素に`position: absolute`をつけておきますと、要素を詰めることができるので後ろの要素がアニメーションで動くことができます。逆に言えばこれをつけていないと削除の時だけ詰めるアニメーションがおきません（つまづきポイント）。

# まとめ
こんな感じでCSS Transitonだけで簡単にアニメーションすることができます。ただ簡単に設定できるようにするため色々ルールがあるので、最初はとっつきにくいかもしれません。そんな時はCodePenとかJSFiddleとかで軽くテストコードを書いてみるといいかもしれません。
僕も割とハマったので、注意ポイントを改めて載せます。

* transitionを設定していないとクラスは付与されない（クラスが付与されるかのテストでハマる）
* 要素が消える`v-leave`側で`position: absolute;`を設定していないと後ろの要素がFLIPアニメーションしてくれない

その他詳しい設定については [公式ガイド](https://jp.vuejs.org/v2/guide/transitions.html#%E3%83%AA%E3%82%B9%E3%83%88%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3) の方を参照してください。他にも色々設定することができます。
C# delegateについて

# 序論
sakano様のコードを参考(丸パクリ)させていただいております
私の駄文よりもsakano様の内容の方が素晴らしいと思われます。
sakano様の素晴らしい投稿↓
https://qiita.com/sakano/items/d4ad645a20860c3a86c0

# delegateについて
delegateとは、委譲するという意味の英単語である。
C#ではPythonなどと違って普通の変数に関数を代入することはできない。
ここで、delegate(関数用の変数型と思ってほしい)というものを使ってみる。
何が便利かというと、複数の関数を入れられるのである。
気になるなら調べてみてね。
(イベントと関係が深いのでGUIではよく出てくる)

# 実際の使い方



```csharp
public static void Calc(Func<int, int, int> ca)
  {
      for (var x = 1; x < 5; ++x)
      {
          for (var y = 1; y < 5; ++y)
          {
              Console.Write("{0,4}", ca(x, y));
          }
          Console.WriteLine();
      }
  }

  public static int Add(int x, int y) { return x + y; }
  public static int Average(int x, int y) { return (x + y)/2; }
}
    
```


まぁ、こんな感じ。これ実行してみると空白多すぎて気持ち悪いですけどね、はい。
まず、public static void メソッド名(Func<引数1,引数2,戻り値>Calc型の変数名)
{
 処理
 Console.WriteLine("{0,4}",Calc型の変数名(引数1,引数2));
}

下の方に、
public static 変数型 delegate名(?)(型 引数,型 引数){return したいこと;}

みたいな感じ。
Func以外にActionってやつもあるみたい。
出力部分は何個出力するかによるよー。

あぁ。で、メインでの呼び出し方が

```csharp

public static void Main()
        {
        Calc(Add);
        Console.WriteLine();
        Calc(Average);
        }
```

メイン関数の中だけだけど、こんな感じ。

メソッド名(delegate名);
でいけるっぽいね。

# ラムダ式でもうちょい楽に

匿名メソッドを使えば、これよりもう少し楽に記述できるっぽいけど、そんなの使うくらいならもっと簡単にラムダ式を使おうということでございます。
気になった人は調べてみてもいいかも。
この下でCalcを使うけど、ここの変更は無し。そのままでおk。
で、下にあったAddとかAverageは消しちゃう。
メインにメソッド名からのラムダ式を直で書いてあげる感じ。

Calc((x,y)=>x+y);
メソッド名((引数名,引数名)=>やらせたいこと);
って感じだね。はい、以上。

```csharp


class test
{
    public static void Main()
    {
        Calc((x,y)=>x+y);
        Calc((x,y)=>(x+y)/2);

    }
    

    public static void Calc(Func<int, int, int> ca)
    {
        for (var x = 1; x < 5; ++x)
        {
            for (var y = 1; y < 5; ++y)
            {
                Console.Write("{0,5}", ca(x, y));
            }
            Console.WriteLine();
        }
    }
}
```
Windowsでの環境開発【まとめ】個人備忘録

ドットインストールの「ローカル環境開発Windows編」のリンクまとめ

環境構築の流れ
https://dotinstall.com/lessons/basic_localdev_win_v2/38604

仮想マシンを立ち上げる
https://dotinstall.com/lessons/basic_localdev_win_v2/38605

仮想マシンにログイン
https://dotinstall.com/lessons/basic_localdev_win_v2/38607

仮想マシンの設定
https://dotinstall.com/lessons/basic_localdev_win_v2/38608

仮想マシンにアクセス
https://dotinstall.com/lessons/basic_localdev_win_v2/38610

rubyインストール
https://qiita.com/inouet/items/478f4228dbbcd442bfe8
(環境設定の項目はしなかった）

railsインストール
https://techacademy.jp/magazine/7058
ESpecでBDDを快適に…mix test.watchのESpecクイックハック

[fukuoka.ex](https://fukuokaex.fun/)代表の[piacere](https://twitter.com/piacere_ex)です
今回もご覧いただいて、ありがとうございます:bow:

ElixirでBDD書ける[ESpec](https://github.com/antonmi/espec)ですが、mix test.watchが効かないため、いちいちコマンド打つのがメンドイのですが、mix test.watchをホンの少しいじれば動くので、deps配下をクイックハックしちゃいます:yum:

ちなみに、mix test.watchをクイックハックせず、[ex_guardを使う方法](https://qiita.com/ukoasis/items/d8d4cd46d839ee4b786a)もあるみたいです
<br>
:stars::stars::stars:<b>　お知らせ：Elixirもくもく会（リモート参加OK、入門トラック有）を今月末に開催します　</b>:stars::stars::stars:

[<b>「fukuoka.ex#14：Elixir／Phoenixもくもく会～入門もあるよ」</b>](https://fukuokaex.connpass.com/event/100659/)を9/28（金）に開催します

前回は、ゲリラ的に募った「Zoomによるリモート参加」を、今回から正式に受け付けるようになりましたので、福岡以外の都心や地方からでも参加できます（申し込みいただいたら、追ってZoom URLをconnpassメールでお送りします）

また、これまではElixir／Phoenix経験者を対象とした、もくもく会オンリーでしたが、今回から、入門者トラックも併設し、fukuoka.exアドバイザーズ／キャストに質問できるようにアップグレードしました

お申込みはコチラから
https://fukuokaex.connpass.com/event/100659/
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/3f0fbb56-e5e8-2c4d-7c62-1b0b311d6d02.png)](https://fukuokaex.connpass.com/event/100659/)

# mix test.watchとESpecをインストール

まず適当なElixir PJで、mix test.watchと、ESpecをインストールします

mix.exsの「def deps do」配下の先頭に以下を追記してください

```elixir:mix.exs
defmodule Zundokos.Mixfile do
  use Mix.Project
…
  defp deps do
    [
      { :espec, "~> 1.6.1", only: :test },
      { :mix_test_watch, "~> 0.8", only: :test, runtime: false }, 
    ]
  end
…
```

インストールします

```
mix deps.get
```

ESpecの初期化をします

```
set MIX_ENV=test
mix espec.init
```

# deps配下のmix test.watchをESpec対応に改造

macOSやLinuxは、以下の行の「test」を「espec」に書き換えるだけです

```elixir:【改造前】/deps/mix_test_watch/lib/mix_test_watch/config.ex
  @default_tasks ~w(test)
```

↓↓↓

```elixir:【改造後】/deps/mix_test_watch/lib/mix_test_watch/config.ex
  @default_tasks ~w(espec)
```

Windowsは、ここが何故か別で定義されているので、以下のmixコマンド中の「test」を「espec」に書き換えます（これはissueを出した方が良いのかしら？ｗ）

```elixir:【改造前】/deps/mix_test_watch/lib/mix_test_watch/port_runner/port_runner.ex
    case :os.type() do
     {:win32, _} ->
       System.cmd("cmd", ["/C", "set MIX_ENV=test&& mix test"], into: IO.stream(:stdio, :line))

      _ ->
        System.cmd("sh", ["-c", command], into: IO.stream(:stdio, :line))
    end
```

↓↓↓

```elixir:【改造後】/deps/mix_test_watch/lib/mix_test_watch/port_runner/port_runner.ex
    case :os.type() do
     {:win32, _} ->
       System.cmd("cmd", ["/C", "set MIX_ENV=test&& mix espec"], into: IO.stream(:stdio, :line))

      _ ->
        System.cmd("sh", ["-c", command], into: IO.stream(:stdio, :line))
    end
```

# mix test.watchでESpecを自動実行させる

あとは、いつも通り、mix test.watchすれば、ファイル保存するたびにESpecが勝手に走るようになります

```
mix test.watch
```

これでESpecによるBDDが快適になりますね

# p.s.「いいね」よろしくお願いします

よろしければ、ページ左上の ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/4d515047-cc48-382e-c2b1-3ad0cc50dbbf.png) や ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/a4e3da58-70a3-4197-95a2-6a6906650d01.png) のクリックをお願いしますー:bow:
Windows Vista に初登場の UNC Path に IPv6 アドレスを手動変換して使う

2001:db8:face:b00c:beef:dead:ff02:fe80
↓
2001-db8-face-b00c-beef-dead-ff02-fe80.ipv6-literal.net

「：」コロンの代わりに「‐」ハイフンに入れ替えて、最後に .ipv6-literal.net ドメインを引っ付けると使える。

::1
↓
--1.ipv6-literal.net となる訳だがコマンドラインでは、最初にハイフンが来るとスイッチと認識するので、一工夫して使う。

0--1.ipv6-literal.net

Unix 系でのワンライナーは以下の通り。

```shell:FreeBSD
ifconfig | grep 'inet6' | sed 's|%.*$||' | awk '{print$2}' | sed 's|:|-|g' | awk '{print$1".ipv6-literal.net"}'
```
【Tips】Xcodeのβ版を使用した際にCarthageでbuild済みのライブラリで出るエラー対応

##導入
iOS12がそろそろリリースされますね！
そんな中、開発陣はiOS12向けにアプリを作り既存のコンテンツでiOS12だとエラーがあるのではないかチェックする工程はあるかと思います。

そこで、本記事ではβ版のXcodeを使用した際にCarthage経由で導入しているライブラリで表示されるエラーの解決方法を書いてみようと思います。

私的に今回対応することがあり今後iOSのバージョンが上がるたびに対応する必要がありそうだったので個人のメモとして纏めようと思いました。

## 概要
既存XcodeのSwiftVersionでBuildされたCharthage経由ライブラリをβ版のXcodeのSwiftVersionでBuildし直す方法について

## Error内容
```
Module compiled with Swift 4.1.2 cannot be imported by the Swift 4.2 compiler
```


**Swift4.1.2でコンパイルされているモジュールのため4.2のコンパイラではインポートできない**
SwiftのVersion確認方法
Xcode.appの箇所をXcode-beta.appに変えて10(β6)のVersionを確認
`/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swift -v`

| XcodeVersion     |    SwiftVersion   |
|:-----------------|------------------:|
| 9.1.2             |              4.1.2 |
| 10(β6)           |            4.2 |

Xcode9.1.2とXcode10(β6)では使っているSwiftVersionが異なることを確認
## 対応
### 方針
Buildで使うXcodeをXcode10(β6)に切り替えたのちCarthageで再Build


### 方法
1.Buildに使っているXcodeのpath確認
`xcode-select -p`
2. Buildに使っているXcodeを切り替える
`sudo xcode-select -s /Applications/Xcode-beta.app/Contents/Developer`
3. CarthageでライブラリをBuildでライブラリをBuild
`carthage update --platform iOS --no-use-binaries`
4. ProjectをBuildしエラー表示が消えるか確認

※3ではBuildし直すので割と時間がかかります。(Cartfileで管理しているライブラリ数による)
rbenv での Ruby インストールに configure オプションをつける

```rbenv install 2.5.1``` などのようにして、Ruby をインストールする際に、普通はおまかせでインストールするのだろうけど、あちこちのディレクトリに別バージョンをインストールするとなると、全部にドキュメントのインストールを行うのは、ファイルサイズ増、処理時間増となって好ましくない。```./configure``` 時のオプションを指定して、ドキュメントをインストールしないようにすれば良い。

オプションは [BLFSブック](http://www.linuxfromscratch.org/blfs/view/systemd/general/ruby.html "BLFS ブック") の Ruby のソースビルドを参考に、```--disable-install-doc --disable-install-rdoc --disable-install-capi``` をつけることにする。

そしてそのオプションは ```rbenv``` 実行時に環境変数 ```CONFIGURE_OPTS``` を使って与えられる。例えば ```$ CONFIGURE_OPTS="..." rbenv install ...``` などとするのがてっとり早い。この環境変数については [ruby-build](https://github.com/rbenv/ruby-build
) の ```README.md``` に書いてある。

ここでは以下のようにした：

```shell-session
$ export CONFIGURE_OPTS="--disable-install-doc --disable-install-rdoc --disable-install-capi"
$ rbenv install 2.5.1
$ unset CONFIGURE_OPTS
```

結果確認としては、まずインストール最中の場合。
```/tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn``` なるディレクトリ配下に ```ruby-2.5.1``` ソースディレクトリが展開されている。そこの ```config.log``` ファイルを見れば、オプション受け渡しができているかどうかがわかる。なおこれはインストール最中のことであって、インストールが終わると、```/tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn``` は消される。

```shell-session
$ cd /tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn
$ cd ruby-2.5.1
$ less config.log
This file contains any messages produced by compilers while
running configure, to aid debugging if configure makes a mistake.

It was created by configure, which was
generated by GNU Autoconf 2.69.  Invocation command line was

  $ ./configure --prefix=/home/rails/.rbenv/versions/2.5.1 --disable-install-doc --disable-install-rdoc --disable-install-capi

...以下省略...
```

たしかに ```./configure``` オプションに ```--disable-install-XXX``` が加わっているのでＯＫ。当然のことながら ```CONFIGURE_OPTS``` を設定していなければ、その ```--disable-install-XXX``` は表示されない。

インストールを終えた後の確認。
```/tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn``` なるディレクトリは消されているが、同名のログファイル ```/tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn.log``` は残されている。おそらく見るからにこのファイルは ```./configure```、```make```、```make install``` の出力を連結している。このファイルの最終を見てみれば、ドキュメントがインストールされたかどうかが分かる。

```shell-session
$ cat /tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn.log
...省略...
installing rdoc:                    /home/rails/.rbenv/versions/2.5.1/share/ri/2.5.0/system
installing capi-docs:               /home/rails/.rbenv/versions/2.5.1/share/doc/ruby
/tmp/ruby-build.YYYYMMDDHHMMSS.nnnnn ~
```

```installing rdoc``` の表記がなければ、ドキュメントがインストールされていないと分かる。（上記は ```CONFIGURE_OPTS``` を何も設定していなかった際の出力例。）
空文字 "" をmatch判定させた時のLengthは0じゃなくて1

matchの引数に空文字使うとnullでは無く何もない配列が返ってくるので要注意です。

```testRegExp.js
const test = 'String'.match('');
console.log(test); //=> []
console.log(test.length); //=> 1
if(test) console.log('trueです') else console.log('falseです'); //=> trueです
```
Raspberry piのセットアップ(OSイメージの入ったSDカードの作成～IPの固定)

## 必要なもの

* SDカード8GB以上(使ったのは16GBです)
* Linuxの入ったマシン
* USBハブ
* USBマウスとUSBキーボードとディスプレイ
* 時間的な余裕

## イメージのダウンロードと解凍

https://www.raspberrypi.org/downloads/

ここからraspbianのイメージをダウンロードし、解凍する

```
$ unzip 2018-06-27-raspbian-stretch.zip 
Archive:  2018-06-27-raspbian-stretch.zip
  inflating: 2018-06-27-raspbian-stretch.img
# 長ったらしいパスを打つのが面倒だったので/tmp/に移動しています。  
$ mv 2018-06-27-raspbian-stretch.img /tmp/
```

## 空のSDカードを刺して、アンマウントする

別の記事ではfdiskでデバイスのパスを特定していましたが
lsblkのほうが見やすかったです。

```
$ lsblk
NAME        MAJ:MIN RM  SIZE RO TYPE MOUNTPOINT
sda           8:0    0  477G  0 disk 
├─sda1        8:1    0  461G  0 part /
├─sda2        8:2    0    1K  0 part 
└─sda5        8:5    0 15.9G  0 part [SWAP]
mmcblk0     179:0    0 14.4G  0 disk 
├─mmcblk0p1 179:1    0 43.2M  0 part /media/xxxxxxxx/boot
└─mmcblk0p2 179:2    0 14.4G  0 part /media/xxxxxxxx/rootfs

# 中途半端にraspbianが入ってたのでこんな感じになってますが、空だと多分こうはなってないです。
$ sudo umount /media/xxxxxxxx/boot
$ sudo umount /media/xxxxxxxx/rootfs
```

## ddコマンドで書き込む

大体15分程度でおわりました。

```
sudo dd if=/tmp/2018-06-27-raspbian-stretch.img of=/dev/mmcblk0 bs=16M
```

## 初期設定

1. キーボード、マウス、ディスプレイをラズパイにつないで電源を入れる。
2. デスクトップが表示されて初期設定ウィザードっぽいのが立ち上がる
3. タイムゾーンとかネットワークの設定とかラズパイのパスワードとか聞かれるので適宜入力。
4. アップデートするかと聞かれるのでアップデートする
5. 1時間くらい待つ。

Raspberry pi zero w でやったせいかすげー時間がかかりました。気長に待ちましょう。
お昼休み前とかに仕込んで戻ってきたらできているというような感じのやり方をお勧めします。

## IPアドレスの固定

`/etc/dhcpcd.conf` の末尾に以下を追記

```
interface eth0
static ip_address=xxx.xxx.xxx.xxx/24 # 固定IP
static routers=yyy.yyy.yyy.yyy # ルーターのIPアドレス
static domain_name_servers=zzz.zzz.zzz.zzz # DNSのIPアドレス
```

## 最後に再起動して終了

あとは再起動すればIPが固定されているはずです。
[obsolete] samba3 系で Windows10 から接続できない場合の確認箇所

執筆時点で既に古くなりすぎた samba3 系を Windows10 で接続できないを対象としている。

真っ先に smb.conf の内容を確認したい。

```text:/usr/local/etc/smb.conf
max protocol = SMB2
```
この max protocol の記述が抜けていると、NT1 プロトコルが利用できる最上位となり、Windows10 愚か、それよりも古い Windows 系でも通信できなくなる可能性がある。

この確認で問題が無ければログレベルを上げてログの追跡をする。

```text:/usr/local/etc/smb.conf
log level = 3
```
3 以上の記述があれば、以下のようなエラーログが吐き出されているはずだ。

```txt:/var/log/samba/log.smbd
[2018/09/11 13:52:37.745657,  1] smbd/process.c:457(receive_smb_talloc)
  receive_smb_raw_talloc failed for client 2001:db8:face:b00c:beef:dead:ff01:fe80 read error = NT_STATUS_CONNECTION_RESET.
[2018/09/11 13:52:37.748393,  3] smbd/server_exit.c:181(exit_server_common)
  Server exit (failed to receive smb request)
```
この記述が見当たらない場合は、ほかの箇所に問題がある。
小ネタ: JSONからYAMLにRubyワンライナーで変換する


## 解決したい課題
JSONをカジュアルにYAMLに変換したい。
具体的には、Chef付属の情報収集ツール`ohai`を実行したときに出力されるJSONを、YAMLに変換します。

## 実装例

特になんの説明もなく。
以下が…

```shell
$ ohai
{
  "cpu": {
    "0": {
      "vendor_id": "GenuineIntel",
      "family": "6",
      "model": "61",
      "model_name": "Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz",
      "stepping": "4",
      "mhz": "1599.999",
      "cache_size": "3072 KB",
      "physical_id": "0",
      "core_id": "0",
      "cores": "1",
      "flags": [
        "fpu",
        "vme",
        "de",
        "pse",
(以下略）
```

こうすることで…

```shell
$ ohai | /opt/chef/embedded/bin/ruby -ryaml -rjson -e 'puts YAML.dump(JSON.parse(STDIN.read))'
```

こうなります。

```shell
$ ohai | /opt/chef/embedded/bin/ruby -ryaml -rjson -e 'puts YAML.dump(JSON.parse(STDIN.read))'
---
cpu:
  '0':
    vendor_id: GenuineIntel
    family: '6'
    model: '61'
    model_name: Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
    stepping: '4'
    mhz: '1599.999'
    cache_size: 3072 KB
    physical_id: '0'
    core_id: '0'
    cores: '1'
    flags:
    - fpu
    - vme
    - de
    - pse
（以下略）
```

## 補足

小ネタでした。
【Wordpress】Affinger5 WINGでslick.jsを使ってトップページの記事スライダーを作る

Wordpress有料テーマの「Affinger5 WING」には
画像スライダー系JSで有名な「slick.js」が最初から同梱されています。

これを使ってトップページの新着記事をスライダーにしたり、
おすすめ記事をスライダーにして設置することもできます。
　
　-----------------
◆Affinger5 WINGとは
　-----------------
[http://the-money.net/](http://the-money.net/)

　-----------------
◆slick.jsとは
　-----------------
[http://kenwheeler.github.io/slick/](http://kenwheeler.github.io/slick/)


###新着記事をスライダーにする場合

トップページの記事一覧だけに適応したいので、
home.phpにスライダーを動かすJavascriptを記述します。

```javascript
$(function() {
 $('aside .kanren').slick({ //記事一覧を包括している親要素
 infinite: true, //無限スクロール
 speed: 500, //スライドスピード
 fade: true, //フェードインさせる
 autoplay: true, //自動でスライド
 });
});
```

###おすすめ記事をスライダーにする場合

＜事前準備＞

- Affinger5管理で「トップの最上部表示にする」にチェックを入れます。
- 任意の人気記事を指定（投稿又は固定記事ID）に表示したい記事IDを入れます。

<img width="863" alt="スクリーンショット 2018-09-11 14.25.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/62985/e922ec46-cbb6-9ca8-7fd9-925e957cdb7c.png">


トップページの最上部に固定表示の設定をしたあと、
おすすめ記事をコントロールするpopular-thumbnail-on.phpにスライダーを動かす
Javascriptを記述します。

```javascript
$(function() {
 $('.kanren.pop-box').slick({ //おすすめ記事を包括している親要素
 infinite: true, //無限スクロール
 speed: 500, //スライドスピード
 fade: true, //フェードインさせる
 autoplay: true, //自動でスライド
 });
});
```

以上を設定後ブラウジングすると記事要素がスライダーになっていると思います。
あとはサイトのトンマナに合わせてCSSを調整してください。

slickスライダーには設定できるオプションがたくさんあります。
オプションの設定方法は下記をご参考に設定してみてください。
https://qiita.com/katsunory/items/25b385aae0f07b41e611
関数内に書く変数

変数の書く場所によって挙動が変わることの自分のメモ


```js:js
const a = document.getElementById('a');
a.onclick = plus;


//関数内に変数を格納 
function plus() {
  let count = 0;
  count++;
  console.log(count);
}
//1 1 1 1 1 1 1 1 1.......
```

countには毎回0が格納されるため、何回クリックしてもcountは0からスタート

```js:js
//関数外に変数を定義
let count = 0; 
function plus() {
  count++;
  console.log(count);
}
//1 2 3 4 5 6 7 8 9.........
```

関数が呼び出されるたびにcountは更新される。
Bitbucket→GitHubへリポジトリお引越しメモ(Sourcetree編)

# はじめに
現在、bitbucketを利用していたが、GitHubへお引越しをする必要があるためメモ。

# 前提条件
* bitbucketアカウントを既に持っており、bitbucketでソース管理をしている。
* GitHubの登録が済んでいる。

# お引越し
#### bitbucketからのリポジトリのURLを取得

https://bitbucket.org/

bitbucketのリポジトリ画面右上の[ クローン作成 ]からリポジトリURLを取得する。

<img width="224" alt="スクリーンショット 2018-09-11 14.08.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/ecc5895b-e7cb-b8db-51d1-15e38fe627ed.png">

<img width="499" alt="スクリーンショット 2018-09-11 14.08.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/b47b1082-802a-5a38-5781-a273f6d30361.png">

GitHubにリポジトリをインポートするために赤枠内からURLを取得し控えておく。・・・①
（当然、もっと良い方法があるはず）

#### GitHubへリポジトリをインポートする

GitHubへログインし画面右上の[ + ]から[ Import repositry ]をクリックする。

<img width="802" alt="スクリーンショット 2018-09-11 14.13.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/f8533e6a-fdae-c05e-c266-a9d92a80317c.png">

先ほど、控えたURL（①）を入力し、リポジトリ名をつけて[ Begin import ]

<img width="604" alt="スクリーンショット 2018-09-11 14.18.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/2ba8f524-8300-87c2-7db5-07e85c2374cb.png">

途中でログイン情報を求められたらbitbucket側のログイン情報を入力する。

これでGitHubへリポジトリのお引越しは完了！

#### ローカルリポジトリのリモート先を変更する
Sourcetreeで今まで使用していたリポジトリをそのまま使いたい！という方は下記の通り。

リポジトリを開いて上部メニューから[ 設定 ]をクリックする。

<img width="802" alt="スクリーンショット 2018-09-11 14.38.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/2ab11a6e-f47c-8eac-ee8e-3f2228d0e9f6.png">

リモート先を変更するものを選択し、[ 編集 ]をクリックする。

<img width="577" alt="スクリーンショット 2018-09-11 14.40.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/8c01fbf5-a4fd-dbd8-0015-61a58ea0a08c.png">

GiuHubからクローンしたURLを入力する。

<img width="626" alt="スクリーンショット 2018-09-11 14.40.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/276702/d6d7af74-4838-8831-3827-af20e6ce670e.png">

[ OK ]をクリックすると、ローカルのbitbucket→GitHubへのお引越しが完了！

# 参考資料
ターミナルからのリモート先変更は下記を参照する。
https://tackeyy.com/blog/posts/process-of-migration-github-from-bitbucket
文字列中の改行コードを統一する

# 例題

```rb
"モノ\r\nジ\rトリ\nテトラ"
```

を

```rb
"モノ\nジ\nトリ\nテトラ"
```

に置き換えたい。つまり `\r\n`, `\r`, `\n` をすべて `\n` に統一したいです。

# 結論

```rb
"モノ\r\nジ\rトリ\nテトラ".gsub(/\R/, "\n")
#=> "モノ\nジ\nトリ\nテトラ"
```

# 方法

## 失敗例

```rb
"モノ\r\nジ\rトリ\nテトラ".gsub(/\r|\n/, "\n")
#=> "モノ\n\nジ\nトリ\nテトラ"
```

`\r\n` を `\n` に変換したいのに `\n\n` になってしまいます :sob:

## 成功例 1 (愚直な方法)

```rb
"モノ\r\nジ\rトリ\nテトラ".gsub(/\r\n|\r|\n/, "\n")
#=> "モノ\nジ\nトリ\nテトラ"

# scivola さんにコメントで教えて頂いた方法
"モノ\r\nジ\rトリ\nテトラ".gsub(/\r\n?/, "\n")
#=> "モノ\nジ\nトリ\nテトラ"
```

## 成功例 2 (ベストな方法)

```rb
"モノ\r\nジ\rトリ\nテトラ".gsub(/\R/, "\n")
#=> "モノ\nジ\nトリ\nテトラ"
```

`\R` は改行コードを表すメタ文字です。

https://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html

で言及されています。

> 文字列の中には、CR LF のように、複数の文字一続きで1つの意味を表す ようなものが存在します。そのような文字列にマッチするような メタ文字列として以下が存在します。
> \R 改行 (?>\x0D\x0A|[\x0A-\x0D\u{85}\u{2028}\u{2029}]) (Unicode 以外では (?>\x0D\x0A|[\x0A-\x0D]) になります)
AWSのS３へPython+boto3を利用した操作

AWSのS3を利用する機会があったのでpython+boto3からの操作を軽くまとめておく
##S3へのアップロード

>
```python:upS3.py
import boto3
//S3の指定等
s3_client = boto3.client('s3')
bucket='バケット名'
//ファイルの名前を指定
print "old Filename?"
oldFilename = raw_input()
print "new Filename?"
newFilename = raw_input()
//アップロードしたいファイル(oldname)をnewnameでｓ３に保存
s3_client.upload_file(oldFilename, bucket, newFilename)
```

##S3の削除
名前を指定し,確認でyを入力すると削除可能
>
```python:delS3.py
import boto3
//S3の指定等
s3_client = boto3.client('s3')
bucket='バケット名'
del_flag = 'n'
//ファイルの名前を指定
print "delete Filename?"
delFilename = raw_input()
print "delete[y/n]?"
del_flag = raw_input()
if del_flag=='y':
    s3_client.delete_object(Bucket=bucket, Key=delFilename)
```

##S3の保存ファイルを表示
実行すると保存されているファイル名を表示する
>
```python:show.py
import boto3
s3 = boto3.resource('s3')
bucket = s3.Bucket('バケット名')
for object in bucket.objects.all():
    print(object.key)
```

##S3のファイルをダウンロード
ダウンロードしたいS3上のファイル名と保存したい名前を入力し、yを押したらダウンロード可能
>
```python:dawnload.py
import boto3
s3_client = boto3.resource('s3')
bucket=s3_client.Bucket('バケット名')
dl_flag = 'n'
print "S3 Filename?"
S3_Filename = raw_input()
print "new Filename?"
local_Filename = raw_input()
print "download[y/n]?"
dl_flag = raw_input()
if dl_flag=='y':
    bucket.download_file(S3_Filename,local_Filename)
```
Condaアップデートできない問題解消方法

#Condaアップデータ時の問題

Condaをアップデートするため、下記コマンド実行しても、
最新バージョンがあるよっとメッセージが表示されて実際アップデータされなかった。

```
conda update -n base conda
```

実行結果がこちら

```
Solving environment: done

==> WARNING: A newer version of conda exists. <==
  current version: 4.5.1
  latest version: 4.5.11

Please update conda by running

    $ conda update -n base conda



# All requested packages already installed.
```

#Condaアップデート解消方法

Condaアップデートを下記コマンドで実行したら、こちらの環境では解消できた。

```
conda update -n base conda -c defaults
```

#参考内容

[Anacondaのアップデート方法](https://qiita.com/i_jp/items/7f1bc432b262b11ff8fc)
["conda update -n base conda" is not updating conda](https://github.com/conda/conda/issues/6591)
PhpStormのコードテンプレートを書く上での注意事項

## StringUtilsは使えない、文字列をゴニョゴニョしたいときはJavaのStringのメソッドを使う

PhpStormのコードテンプレートを書こうと思ってstackoverflowとかを検索すると、PhpStormの情報はあまりなくて、IntelliJ IDEAの情報がでてくる。
ほぼ同じようなものだろうと思ってIntelliJ IDEAで使えると書いてある StringUtilsを使おうと思ったらPhpStormでは使えないようだ。
残念。

よって文字列をゴニョゴニョしたいときはJavaのStringのメソッド（ [この辺] (https://docs.oracle.com/javase/jp/8/docs/api/java/lang/String.html) ）を使う必要がある。

- UpperCamelCase→lowerCamelCaseの変換例を https://tech.quartetcom.co.jp/2018/09/20/phpstorm-resolver-class-code-template/ に書きました

## `$` はエスケープできない

PHPのコードテンプレートを書こうと思ったら変数を表す `$` は必須。
しかし、PhpStormのテンプレート言語であるApache Velocityでも `$` は変数のマーカー。つまり記号かぶり。

[Apache Velocityのドキュメント](http://velocity.apache.org/engine/devel/user-guide.html) を見ると `$` が `\` でエスケープできそうなことが書いてあるが、PHPStormのコードテンプレートではエスケープは効かない。

そこで、PhpStormが用意してくれている定義済変数 `${DS}` を使うことになる。
コードテンプレ内に `$this->hoge` などと書きたいときは `${DS}this->hoge` と書く。
Windows 環境でPycryptoをインストールする

こちらの内容のVisual Studio Code版です。
https://qiita.com/walkure/items/09516cb711ff1c886286
Build Tools for Visual Studio 2017のC++コンパイラはすでにインストールされている前提とします。

管理権限でコマンドプロンプトを立ち上げ、VsDevCmd.batを実行します。

開発権限でコマンドプロンプトを立ち上げる方法
https://qiita.com/takuya0301/items/df6cde3bbaf9e13ef8f0
VsDevCmd.bat の場所は C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\Common7\Tools

```
> cd \Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\Common7\Tools
> VsDevCmd.bat
```

続いて、Cコンパイラの環境変数設定のために標準ヘッダ（stdint.h）を探します。


私のときは以下の場所にありましたが、14.14.26428 の部分は人によって違います。
Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\VC\Tools\MSVC\14.14.26428


stdint.hの場所が分かったら以下のコマンドを実行して、環境変数を設定します。

```
set CL=-FI"%VCINSTALLDIR%Tools\MSVC\{14.14.26428とかそういう数字}\include\stdint.h"
```
たぶんこれでインストールできるはず。
ドキュメントのリンク集：（ libc++、STL etc...）

欲しい時に忘れてるので、メモる。
「あれなんだっけー？？？」状態への予防線
検索するときのキーワードとかも忘れちゃう時ありますからね...。

C++
[libc++]　http://libcxx.llvm.org/
[STL] http://www.rrsd.com/software_development/stl/stl/index.html
[STL] http://www.cplusplus.com/forum/general/219746/

---

github
[github 検索構文] https://help.github.com/ja/github/searching-for-information-on-github/understanding-the-search-syntax
medium-editor-insert-pluginに画像ファイルの容量制限を設定する

[Railsにmedium-editorでMedium.comライクな投稿機能を導入する](https://qiita.com/sayama0402/items/8c0ecac2bca3a76625ac)で導入まですませている前提になります。

## やりたいこと

画像を登録する際に、容量制限を設定したい。

## 調査

画像を保存する部分には、[medium-editor-insert-plugin](https://github.com/orthes/medium-editor-insert-plugin)を使っている。
ドキュメントを読んで見ると、[jQuery-File-Upload](https://blueimp.github.io/jQuery-File-Upload/)をラップしてアップロード処理を行なっていた。

medium-editor-insert-pluginの[configration](https://github.com/orthes/medium-editor-insert-plugin/wiki/v2.x-Configuration)に以下のようにあった。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/19716/2fca6ef6-3c33-8e9a-7716-9e937ca5dd02.png)

[jQuery File Upload](https://github.com/blueimp/jQuery-File-Upload/wiki/Options)を見に行く

> maxFileSize
> The maximum allowed file size in bytes.
> 
> Type: integer
> Default: undefined
> Example: 10000000 // 10 MB
> Note: This option has only an effect for browsers supporting the File API.

maxFileSizeに関する記述を見つけた。

## maxFileSizeを設定する

```javascript
$('.editable').mediumInsert({
  editor: editor,
  addons: {
    images: {
      useDragAndDrop: false,
      fileUploadOptions: {
        url: '/images/upload',
        type: 'post',
        // 以下を追加
        maxFileSize: 3000000, //3MBで制限を掛ける
        acceptFileTypes: /(.|\/)(gif|jpe?g|png)$/i
      },
      fileDeleteOptions: {
        url: '/images/delete',
      },
      messages: {
        acceptFileTypesError: 'This file is not in a supported format: ',
        maxFileSizeError: 'This file is too big: '
      }
    }
  }
});
```


大きな画像をアップロードしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/19716/df71de04-b4ab-0317-5c62-9d425b3101e5.png)

大きな画像を防ぐことが出来ました。
以上です。
AWSのコストを予算管理する

我々が Amazon Web Service (AWS) を業務で使用するようになってもうすぐ1年になります。
ヘビー級の処理をするようにもなり、そろそろコストも気になってきました。
今回は AWS の予算機能を使用して予算限度額に近づいてきたらメールが来るように設定したいと思います。

参考：[使用状況とコストのモニタリング](https://docs.aws.amazon.com/ja_jp/awsaccountbilling/latest/aboutv2/monitoring-costs.html)

## 請求ダッシュボード

まずは[請求ダッシュボード](https://console.aws.amazon.com/billing/home#/)を表示してみます。
請求ダッシュボードでは AWS に支払う金額とその内訳、過去の支払い額などを確認することができます。
以下の順でアクセスできます。

AWSコンソール
 → ツールバーの右上「ユーザ名@アカウントID」をクリックしてリストを表示
 → 「請求ダッシュボード」をクリック

![dashboard.PNG](https://qiita-image-store.s3.amazonaws.com/0/226829/7a78f065-dc61-e835-99d5-27f4c727dd02.png)

支払いの内訳は左のメニュー「請求書」で確認できます。

## 月々のコストが予算限度額に近づいてきたら通知する

支払い金額は請求ダッシュボードで確認できますが、毎回見にいくのも面倒なので、予算上限に近づいてきたらメールで通知するようにしたいと思います。

なお、ここで作成する予算はあくまでもアラートのためのものであって、インスタンスを停止するなど何らかの対策を打たないと予算を超えてしまいますのでご注意ください。

1) 「請求ダッシュボード」の左のメニューから「予算」を選択します。

2) 「予算を作成」をクリックし、以下内容を設定します。

```text
 予算タイプ：コスト
 名前：（任意）
 間隔：月別（任意）
 開始日：デフォルト（今月の1日）
 終了日：デフォルト
 予算額：予算をUSドルで入力
 予算の絞り込み：（デフォルト）今回は最終的に支払う金額を見たいので絞り込みしない
```

 以下は通知の設定です。閾値や通知先を変えて複数作成することもできます。

```text
 通知のタイミング：「現行」
 コスト：> 90 % (この場合、現行のコストが「予算額」の90%を超えたら通知が来る)
 通知先：以下どちらか、もしくは両方に記入。
   * 連絡電子メール：（任意。複数指定する場合は "," 区切りで記入）
   * SNSトピックのARN：ここでは設定しない
```

設定したら、「作成」をクリックして完了です。

これで月に一回、予算限度額に近づいてきたらこんな感じでメールが来るはずです。
これは予算 1,000USドルに対して、20% (50USドル) を閾値として設定した時のメールです。

![budget_notification.PNG](https://qiita-image-store.s3.amazonaws.com/0/226829/c0526026-fedc-f3fc-24dc-690845616372.png)
TypeScript で引数の文字列に応じて戻り値の型が違う関数の書き方

TypeScript でどう書くの？と聞かれたので、書いてみた。

```ts
type NameType = 'name'
type AgeType = 'age'

function query(t: NameType): string
function query(t: AgeType): number

function query(t: NameType | AgeType): any {
    if (t === 'name') {
        return 'わたしです'
    } else if (t === 'age') {
        return 24
    }
}

let name = query('name') // name is string
let age = query('age') // age is number
```

基本的な方針は [Handbook > Functions > Overloads](https://www.typescriptlang.org/docs/handbook/functions.html) に従って、型判定のところを単純に文字列と比較しています。

`NameType | AgeType | AddressType | ...` ……のように増えてきたら `type AllTypes = NameType | AgeType | AddressType | ...` のようにして `function query(t: AllTypes)` のようにするとよいでしょう。
[MySQL] LIKEとINを組み合わせて使いたい場合はREGEXPとGROUP_CONCATとCONCATを使う

MySQLで、以下のような検索がしたい。

* あるフィールドの値が、他のテーブルからの検索結果の値から始まる

## サンプルデータ
### 商品マスター(items)
<table>
<tr><th valign="top">name</th><th valign="top">item_code</th><th valign="top">type</th></tr>
<tr><td valign="top">あんぱん</td><td valign="top">abc01</td><td valign="top">パン</td></tr>
<tr><td valign="top">ジャムぱん</td><td valign="top">def02</td><td valign="top">パン</td></tr>
<tr><td valign="top">カレーぱん</td><td valign="top">ghy03</td><td valign="top">パン</td></tr>
<tr><td valign="top">梅干しおにぎり</td><td valign="top">qwe01</td><td valign="top">ごはん</td></tr>
<tr><td valign="top">こんぶおにぎり</td><td valign="top">asd02</td><td valign="top">ごはん</td></tr>
<tr><td valign="top">鮭おにぎり</td><td valign="top">zxc03</td><td valign="top">ごはん</td></tr>
</table>

### 注文(orders)
<table>
<tr><th valign="top">ID</th><th valign="top">order_code（商品コード-価格）</th></tr>
<tr><td valign="top">order01</td><td valign="top">abc01-80</td></tr>
<tr><td valign="top">order02</td><td valign="top">abc01-160</td></tr>
<tr><td valign="top">order03</td><td valign="top">ghy03-120</td></tr>
<tr><td valign="top">order04</td><td valign="top">zxc03-100</td></tr>
<tr><td valign="top">order05</td><td valign="top">asd02-400</td></tr>
<tr><td valign="top">order06</td><td valign="top">qwe01-240</td></tr>
</table>


## 検索要求
注文から、以下の条件を満たすレコードを抽出したい。

* 注文コードの値が、「商品マスター」において「パン」の分類に該当する商品コードから始まる


## IN と LIKE を組み合わせたい
パッと考えると以下のようなSQLを書きたくなる。

```
SELECT *
FROM orders
WHERE order_code LIKE IN ('abc01-%', 'def02-%', 'ghy03-%');
```

しかし、LIKEとINを同時に使うことはできない。


##  手法
### 検索条件に正規表現を使う
この場合、正規表現で検索条件を作れる `REGEXP` を利用することができる。

```
SELECT *
FROM orders
WHERE order_code REGEXP ('(^abc01-.*)|(^def02-.*)|(^ghy03-.*)');
```

しかし本来 `(^abc01-.*)|(^def02-.*)|(^ghy03-.*)` の箇所は別の検索結果から導き出さないといけない。  
そこで、サブクエリを使って検索結果から正規表現文字列を作成する。


### CONCAT()
* `CONCAT( 文字列1, 文字列2, ・・・文字列N )` で、各引数の文字列を連結したひとつの文字列を取得できる。
* `CONCAT( 文字列1, (SELECTサブクエリ), 文字列2)` で、「文字列1サブクエリの結果文字列2」というふうな取得もできる。

```
SELECT CONCAT('あん', 'ぱん');

↓
あんぱん
```


### GROUP_CONCAT()
* `GROUP_CONCAT(フィールド名 SEPARATOR 連結文字列) FROM TABLE_NAME WHERE 検索条件`  
  で、検索結果を連結文字列でつなげた文字列を得ることができる。

```
SELECT GROUP_CONCAT(item_code SEPARATOR ',')
FROM items
WHERE type = 'パン';

↓
abc01,def02,ghy03
```

### CONCAT() と GROUP_CONCAT() とサブクエリを使って正規表現文字列を作る

```
SELECT CONCAT('(^', (
  SELECT GROUP_CONCAT(item_code SEPARATOR '-.*)|(^')
  FROM items
  WHERE type = 'パン';
), '-.*)');

↓
(^abc01-.*)|(^def02-.*)|(^ghy03-.*)
```

### 正規表現での検索と組み合わせる

```
SELECT *
FROM orders
WHERE order_code REGEXP (

  SELECT CONCAT('(^', (
    SELECT GROUP_CONCAT(item_code SEPARATOR '-.*)|(^')
    FROM items
    WHERE type = 'パン';
  ), '-.*)')

);
```

こんな感じで検索できるようです。
Tidyっぽいのに、列に複数のデータが区切り文字でわけられて入っている状態を処理する

メモ程度のものです. 以下を参考にしました。

https://notchained.hatenablog.com/entry/2016/07/01/001836
http://d.hatena.ne.jp/dichika/20141027/p1

#問題
blast2goやorthofinderを使っていると、tsv形式なのだが、１つの列に複数のデータが区切られて入っている形式で出力される。

例

| gene | mus | homo | fly |
|:-:|:-:|:-:|:-:|
|   atpA |  mus1,mus3,mus8 | homo2,homo3  |  fly1,fly2 |
|   cox1 |  mus2 | homo1,homo4 | fly3,fly4  |
|   POL1 |  mus4,mus5,mus6,mus7 | homo5 | fly5  |


```text:demo.txt
gene	mus	homo	fly
atpA	mus1,mus3,mus8	homo2,homo3	fly1,fly2
cox1	mus2	homo1,homo4	fly3,fly4
POL1	mus4,mus5,mus6,mus7	homo5	fly5
```

これを Tidyなデータに変えたい or 再度この形式に戻したい時がある

#解決法
##non-tidy →　tidy

可変長なので処理はちょっとめんどくさい。
多分もっといい方法がある

```R:nontidy_tidy.R
library(tidyverse) 

OF_raw <-
  'demo.txt'  %>%
  read_tsv() 

x <- seq(from=1, to=10000, by=1) #区切り文字（ここでは","）で分割した文字を格納するための一時的な配列を作る。to=の数字は一列にどれだけのデータが入っているかに応じて調節する。大きいと重くなる

mus_OF_tidy <-
OF_raw　%>%
dplyr::select(gene, mus)　%>%
tidyr::separate(mus, as.character(x), sep=',', remove=TRUE, convert=FALSE, extra='warn', fill='warn')　%>%
gather(key, value, -gene) %>%
select(gene, value) %>%
rename(mus=value)%>%
drop_na()

write_tsv(mus_OF_tidy, "mus_OF_tidy.txt")

```

関数化しておく




```R:sep_function.R
my_sep <- function(data,Sep) #data にデータ　Sepに区切り文字を入れる。
{
x <- seq(from=1, to=1000, by=1) 

data_tidy <-
  data %>%
  tidyr::separate(GO, as.character(x), sep=Sep, remove=TRUE, convert=FALSE, extra='warn', fill='warn')　%>%
  gather(key, value, -ID) %>%
  select(ID, value) %>%
  rename(GO=value)%>%
  drop_na()

return(data_tidy)
}

```

##tidy →　non-tidy

こっちはもうちょっとスマート

```R:nontidy_tidy.R
library(tidyverse) 

OF_raw <-
  'mus_OF_tidy.txt'  %>%
  read_tsv() 

OF_raw %>%
  group_by(gene)%>%
  dplyr::summarise_all(str_flatten, collapse=",")

```
Xcodeのツリーメニューの並び替えができないバグを見つけた

Xcodeのナビゲータエリアのツリーメニューにおいて，実態のないフォルダ（Group without Folder）の順番を並び替えしようと思うとXcodeが落ちます．具体的にはProductsとFrameworksを入れ替えようとすると落ちます．

![スクリーンショット 2018-09-11 12.46.23.png](https://qiita-image-store.s3.amazonaws.com/0/67153/14bbd332-3450-b1f3-dcfa-6e16d96d340e.png)

＿人人人人＿
＞なにこれ＜
￣丫丫丫丫￣
Archive時にエラー "Missing required icon file. The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format for iOS versions >= 10.0." 



# 環境
MacOS 10.13.6 High Sierra
Xcode ver9.4.1
Swift 4.1.2


# 症状
Archive時にエラー。。。
普通に読めばアイコンファイルが無いとのことだが、アイコンファイルを設定してても出る場合はどうもXcode9のバグっぽい。

![スクリーンショット 2018-09-05 18.05.44.png](https://qiita-image-store.s3.amazonaws.com/0/15297/9572dd29-5c4c-aae8-0357-c2cad9530ef8.png)

> ERROR ITMS-90022: "Missing required icon file. The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format for iOS versions >= 10.0."  
> ERROR ITMS-90023: "Missing required icon file. The bundle does not contain an app icon for iPad of exactly '167x167' pixels, in .png format for iOS versions supporting iPad Pro."  
> ERROR ITMS-90023: "Missing required icon file. The bundle does not contain an app icon for iPad of exactly '152x152' pixels, in .png format for iOS versions >= 10.0."  


# 対処療法
0. [Window]->[Organizer]で対象のアーカイブを右クリックして[Show in Finder]すると保存場所が分かる。![スクリーンショット 2018-09-05 18.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/15297/f2de80bb-da33-d84c-02f7-447daf47b9f7.png)

1. ターミナルで対象のアーカイブに移動。 
`cd /Users/[user]/Library/Developer/Xcode/Archives/[yyyy-mm-dd]/[XXX].xcarchive`
2. `find Products/ -name Info.plist -print0 | xargs -0n1 plutil -replace BuildMachineOSBuild -string 16A323`


# refs
[Missing required icon file. The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels](https://stackoverflow.com/questions/43942787/missing-required-icon-file-the-bundle-does-not-contain-an-app-icon-for-iphone)
[Upload iOS 11 Apps: app icon failure](https://forums.developer.apple.com/thread/86290)
PhantomJSでスクレイピングしてみる

HTMLの情報を取得したいけど、欲しい情報はjavascript等でレンダリング後の情報というのはよくある話です。
毎回手動で取ってくるのは面倒、そういう時に便利なのがPhantomJSです。
つい最近自分も使ってみたので、誰かの参考になればと思いメモとして残します。

## 動作環境
Amazon Linux AMI release 2018.03
composer 1.5.1

## PhantomJSインストール

```
$ cd /usr/local/src
$ sudo wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
$ sudo tar jxfv phantomjs-2.1.1-linux-x86_64.tar.bz2
$ sudo ln -s /usr/local/src/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs
```

バージョンを確認し表示されればインストール完了

```
$ phantomjs -v
2.1.1
```

## ソースコード取得
javascriptでスクレイピングするソースを作成します。（例で「http://google.com」のソースを取得）

```javascript:hello.js
var page = require("webpage").create();
var system = require("system");

page.open("http://google.com", function(status){
    if (status === "success") {
        console.log(page.content);
    }
    phantom.exit();
});
```

上記のファイルをサーバに設置し、以下のコマンドを実行するとソースコードが表示されます。

```
phantomjs hello.js
```

なおHTMLをファイルに保存する場合は単純に

```
phantomjs hello.js > hello.html
```

とすればOKです。

## 画面キャプチャ取得
対象ページの画面キャプチャを撮りたい時は「page.render」を使います。
引数にはキャプチャ画像のファイル名を入力します。

```javascript:hello_image.js
var page = require("webpage").create();
var system = require("system");

page.open("http://google.com", function(status){
    if (status === "success") {
        page.render('google.png');
    }
    phantom.exit();
});
```

実行はソースコードの時と同じですが、日本語フォントがサーバに入っていなければ文字化けします。



## 取得できない時
通信がうまくいかない時は以下のコマンドを打ってみます。

```
curl -v [URL]
```
※[URL]には取得対象サイトのURLを入力。

エラーが出る、またはレスポンスがない場合はSSL Protocolエラーの可能性があるので、「--tlsv1」オプションを追加して実行してみます。

```
curl -v --tlsv1 [URL]
```

これでレスポンスが返ってきた場合はPhantomJSコマンドを以下のようにして実行します。

```
phantomjs --ssl-protocol=tlsv1 [JSファイル]
```

無事取得できたらhtmlが出力されます。
chromedriverのchromeOptions prefsとargs (preferences switches) 一覧

# Selenium.Chrome where can I find a list of all available ChromeOption arguments?
https://stackoverflow.com/questions/38335671/selenium-chrome-where-can-i-find-a-list-of-all-available-chromeoption-arguments

List of switches :
https://chromium.googlesource.com/chromium/src/+/master/chrome/common/chrome_switches.cc

List of preferences:
https://chromium.googlesource.com/chromium/src/+/master/chrome/common/pref_names.cc
Android Emulator でホスト上で稼働中の HTTP サーバーと通信する

Android Emulator からは、ホストを IP `10.0.2.2` で参照できます。
ホストで開発中の HTTP (API) サーバーを立ち上げて通信を試みたところセキュリティポリシーで阻まれてしまいました。
> CLEARTEXT communication to 10.0.2.2 not permitted by network security policy

以下のようにして、デバッグビルドでのみ `10.0.2.2` との平文通信を許可できます。（サーバー開発が安定してきたら HTTPS で通信するようにしましょう）

# 平文通信許可手順

## 1. manifest ファイルに network security config への参照を追加

```xml:$MyProject/app/src/main/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config"
                    ... >
```

## 2. デバッグビルド用ネットワークセキュリティ設定を追加

```xml:$MyProject/app/src/debug/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="false">10.0.2.2</domain>
    </domain-config>
</network-security-config>
```

## 3. リリースビルド用ネットワークセキュリティ設定を追加

```xml:$MyProject/app/src/release/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config />
```

# メモ

空の `$MyProject/app/src/main/res/xml/network_security_config.xml` を作成してデバッグビルド用の設定をマージしてほしかったのですが、ファイルが重複しているとエラーが出て叶いませんでした。

ビルドバリアントやソースセットの作成に関しては公式の [Configure build variants | Android Developers](https://developer.android.com/studio/build/build-variants) が詳しく説明してくれています。

# 参考リンク
* [Network security configuration | Android Developers](https://developer.android.com/training/articles/security-config)
* [gradle - How to set android:networkSecurityConfig only to single flavor - Stack Overflow](https://stackoverflow.com/questions/44287420/how-to-set-androidnetworksecurityconfig-only-to-single-flavor)
【swift】swiftでルーレットを作る

ルーレットが欲しくて作ってみました
↓完成イメージはこのような感じです
![ezgif.com-resize.gif](https://qiita-image-store.s3.amazonaws.com/0/146629/6a057124-8d35-fc5a-578c-68956fb45d4b.gif)


## コード
ルーレット画像を回転させて実現。
回転速度を変更する場合は、
`rouletteImage.layer.speed = 2.0`
の部分を変更します。

```swift

// ボタンフラグ
var buttonStartFlg = true

// ボタン
@IBOutlet weak var startButton: UIButton!
// ルーレット画像
@IBOutlet weak var rouletteImage: UIImageView!

// スタートボタンを押した際のIBAction
@IBAction func tapStartButton(_ sender: UIButton) {
    
    let animation = CABasicAnimation(keyPath: "transform.rotation")
    animation.isRemovedOnCompletion = false
    animation.fillMode = kCAFillModeForwards
    
    if buttonStartFlg {
        startButton.setImage(UIImage(named: "stop"), for: .normal)
        rouletteImage.layer.speed = 2.0
        animation.toValue = .pi / 2.0
        animation.duration = 0.1
        animation.repeatCount = MAXFLOAT
        animation.isCumulative = true
        rouletteImage.layer.add(animation, forKey: "ImageViewRotation")
        buttonStartFlg = false
    } else {
        startButton.setImage(UIImage(named: "start"), for: .normal)
        let pausedTime = rulletImage.layer.convertTime(CACurrentMediaTime(), from: nil)
        rouletteImage.layer.speed = 0.0
        rouletteImage.layer.timeOffset = pausedTime
        buttonStartFlg = true
    }
}
```
Qiitaの記事の読み方

#　qiitaの記事の見方

## 記事の分類

・発信系
例：「お前らのフリーランスになるメリットは間違っている」というお話
https://qiita.com/kazukichi/items/c458aa9e763b9a3eb25b

・how_to系
例：メッセージ投稿で非同期通信を実装
https://qiita.com/mikan3rd/items/0cafbcd060c0c1d33b42

## qiitaは誰がどのように書くか考える！

発信系は文が比較的まとまっているのでここでは触れない。

how_to系は、
自分の頭の整理に使っていることが多いそのため、
流れはわかるけど、「なぜ？や詳細」が抜けていることが多い

## how_to系Qiita記事の読み方

記事を読む（大枠把握）　→　リンクを読む！（ここになぜ？や詳細があることが多い）

この流れを意識しておくと読むやすくなるのでは？
runitを使って1コンテナで複数プロセスを動かす

* 以下例では、apacheとcronを同時に動かす。

```dockerfile
FROM debian

RUN apt update
RUN apt install -y runit
# cronの編集のためviを入れておく。
RUN apt install -y cron vim-tiny
RUN apt install -y apache2

# httpd
RUN mkdir /etc/service/apache2 \
 && echo '#!/bin/sh\n apachectl -D FOREGROUND' > /etc/service/apache2/run

# crond
RUN mkdir /etc/service/cron \
 && echo '#!/bin/sh\n cron -f' > /etc/service/cron/run

EXPOSE 80

ENTRYPOINT ["runit"]
```

```run.sh 
docker run -it --rm \
 -p 8080:80 \
 fce20496366a
```

* cronは /var/spool/cron/crontabs/ が使われるため永続化は以下でよいかと。

```sh:run.sh
-v $(pwd)/crontabs/:/var/spool/cron/crontabs/
```
C# 拡張メソッド

# 序論
sakano様の投稿を自分なりにまとめたものです。
感謝しております。

# 拡張メソッド
拡張メソッドとは？
他にも使い方はあるようだが、enumの列挙型に使うと便利そうなのでそれ用に使うものとする。

書き方はこんな流れ。
列挙する→classの宣言→class内にメソッドの宣言→その中の処理を書く

```csharp


public enum 使いたい列挙型名
{
  列挙要素1,列挙要素2,列挙要素3
}

public static class クラス名
{
 public static 列挙型名 メソッド名(this 列挙型名 列挙型用の変数)
 { 
  // 処理
  // 例えばswitchによって分けるなど
 }
}

```
ここからはメインで実際の使い方、適当な変数名を出力してみる

```csharp

class example
{
 public static void Main()
 {
  列挙型名 適当な変数名 = 列挙型名.要素名;
  適当な変数名 = 適当な変数名.メソッド名();
  Console.WriteLine(適当な変数名);
 }
}

```

例えばこんな感じで使える

```csharp


// 天気の列挙
public enum Weather_State
{
    cloudy,
    sunny,
    rainy
}

// 晴れ→曇り→雨→晴れの順にループすることにする

// クラスの宣言
public static class Weather_Class
{
    // メソッドの宣言
    // 天気状態型のweather_caseを宣言し、それによってswitchでわける
    public static Weather_State Weather_Loop(this Weather_State weather_case)
    {
        switch (weather_case)
        {
            case Weather_State.sunny: return Weather_State.cloudy;
            case Weather_State.cloudy: return Weather_State.rainy;
            case Weather_State.rainy: return Weather_State.sunny;
            default: throw new NotImplementedException();
        }
    }
}



class test
{
    public static void Main()
    {
        Weather_State state = Weather_State.sunny;
        state = state.Weather_Loop();
        Console.WriteLine(state);

   } 
}
```   

とまぁ、こんな感じ。

# まとめ

天気で今回書いてみたけど、変数名が分かりづらかったので工夫しなきゃなぁ。と関係ないことを書いておく。
列挙する→classの宣言→class内にメソッドの宣言→その中の処理を書く。
って流れとか覚えておけば自在に使えるようになるでしょう♩
では、〆.
CrostiniのTerminalが物足りないのでxfce4-terminalを入れてみた

# tl;dr
ChromebookでCrostini Debianを使えるようになったのはいいけど、どうも標準のTerminalが使いづらいので代わりにxfce-terminal入れてみた。

# 環境
ASUS C101PA（CPUはARM）

# 手順
以下のコマンドを入力

```bash
sudo apt install xfce4-terminal
```

ランチャに表示されるようになるのでそれをクリックして起動。
フォントは変更したほうがいいかも。（お好みで）

![Screenshot 2018-09-11 at 10.59.10.png](https://qiita-image-store.s3.amazonaws.com/0/55873/bba771f6-cd55-a3aa-c0ab-abf46420be41.png)

# 他のTerminalに関して
C101PAはCPUがArmで対応するTerminalが少ない上に、容量が小さくて辛い。
その中でタブが欲しかったので、xfce4-terminalにしました。

一応、gnome-terminalも試してみたんだけど、ランチャに表示されなくてやめた。（起動はする。）

# 感想
標準のより使いやすいね