OmniAICreator/Qiita-1.07M huggingface dataset:
Isotonic Regressionによるprobability calibration

この記事は, [MicroAd Advent Calendar 2020](https://qiita.com/advent-calendar/2020/microad)の10日目の記事です.
## はじめに
Click Through Rate (CTR)の予測などを2値分類問題(クリックされた:1,クリックされなかった:0)として定式化し, 機械学習を用いて確率を予測する場合, 分類精度やAUCだけでなくモデルの出力が実際の確率に近いかも重要である.　
(well-calibratedであるならば, 実際の確率が10%であれば予測モデルは10%付近の値を出力する)
Neural Networkなどで高い分類精度を実現したとしても, 出力が自信過剰な場合があり必ずしもwell-calibratedとは言えない. 

ノンパラメトリックな確率補正の手法として, Isotonic Regressionを用いた確率補正が以下で提案されている.
[Predicting Good Probabilities With Supervised Learning](https://www.cs.cornell.edu/~alexn/papers/calibration.icml05.crc.rev3.pdf)
[Transforming Classifier Scores into Accurate Multiclass Probability Estimates](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.13.7457&rep=rep1&type=pdf)

scikit-learnで以下のモジュールが実装されている.
- `sklearn.isotonic.IsotonicRegression`
- `sklearn.calibration.CalibratedClassifierCV` 
     (`CalibratedClassifierCV`は内部で`IsotonicRegression`を呼んでいる)

利用するのは簡単であるが, 何をやっているか説明している記事はあまりないのでまとめておく

## Isotonic Regression
学習データセットを$\lbrace(y_i, f_i)\rbrace_{i=1,\ldots,N}$としたとき, 単調増加な関数$m(\cdot)$を学習する.

```math
y_i = m(f_i) + \epsilon_i
```
probability calibrationにIsotonic Regressionを用いる場合は, $y_i$は正解ラベル($y_i \in (0,1)$), $f_i$は分類器の出力値である. ただし, バイアスが生じるため分類器の学習データとは別にcalibration用のデータセットを使わなければいけない.

isotonic regressionでは平均二乗誤差を最小化するIsotonic(単調増加)な等張関数を求める

```math
\hat{m} = argmin_{z}\sum (y_i - z(f_i))^2
```

この解を求めるアルゴリズムの一つに以下のpair-adjacent violators(PAV) algorithm (Ayer et al., 1955)がある.
![スクリーンショット 2020-12-07 13.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/962e0182-47cf-c0c3-a268-91f62ea2b043.png)

PAVアルゴリズムでやっていることは以下である.

- calibration用のデータセット$\lbrace(y_i, f_i)\rbrace_{i=1,\ldots,N}$を $f_i$の順にソート
- $m(f_i) = y_i$で初期化
- 正解ラベルの大小関係に間違いがあれば平均値で置換
- 推論の際にデータセット中にない値は近傍の値を出力

分類器が事例を正しくランク付けすると仮定すると、分類器の出力から予測確率への写像は非減少的であるため, 単調増加の制約があるisotonic regressionでこの写像を学習している.
分類器が事例を正しくランク付けできていない部分ではより多くの事例を平均化し，分類器が正しくランク付けしている部分ではより少ない事例を平均化する． つまり, probability calibrationにおいてPAVアルゴリズムは分類器がどれだけ事例を正しくランク付けできてるかによって， 境界の位置とビンのサイズが選択されるビニングアルゴリズムとして見ることができる. 

#   おまけ
Isotonic Regressionが確率補正に応用される以前に, [Learning and Making Decisions When Costs and Probabilities are Both Unknown](http://cseweb.ucsd.edu/~elkan/kddbianca.pdf)でビニングによる確率補正が提案されている. (以下, ビニング法)

ビニング法では以下の手順で確率補正を行っている.
1. 分類器の出力値でソート
2. ソートされた集合を$b$個の同じ大きさの部分集合(ビン)に分割
3. ビンの範囲の値をビン内に含まれる正例の割合に置換

この方法ではビンの数(大きさ)は任意であり, 交差検証によってビンの数を選択しなければならない． データセットが小さい場合や, 非常にアンバランスな場合, 交差検証では最適なビン数を求めることが困難な場合がある. また, 境界の位置は任意に選ばれるため明らかに異なる確率推定値を持つはずの事例のラベルを平均化するような境界では、ビニング法は正確な確率推定値を得ることができない. そこでisotonic regressionの確率補正への応用が提案された. 

# 参考文献
- [Predicting Good Probabilities With Supervised Learning](https://www.cs.cornell.edu/~alexn/papers/calibration.icml05.crc.rev3.pdf)
- [Transforming Classifier Scores into Accurate Multiclass Probability Estimates](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.13.7457&rep=rep1&type=pdf)
- [Learning and Making Decisions When Costs and Probabilities are Both Unknown](http://cseweb.ucsd.edu/~elkan/kddbianca.pdf)
1 = a (プログラミングElixir 第2版)

この記事は [Elixir その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir2) 10日目です。
前日は [HEX_HTTP_CONCURRENCY=1 HEX_HTTP_TIMEOUT=120 mix deps.get (Elixir)](https://qiita.com/torifukukaiou/items/3890d4ea8220f44c7e0a) でした。

----

```math
x = a + 1
```

- これをみたときに、`a + 1`の値を`x`に**代入**するという見方をする自分がいる
- 20年ほど前にプログラミングの授業で最初に感じた違和感
- いつしかその違和感はすっかり忘れてしまっている
- その違和感をもう一度引っ張り出してかなぐり捨てて、小学校や中学校で習ったときと同じように`x`と`a + 1`は同じ値であるとみてみよう
- そんなふうに`=`をみれたら、もうあなたは**パターンマッチの達人**なのです


[プログラミングElixir 第2版](https://www.ohmsha.co.jp/book/9784274226373/)が発売されています。

![EoohLj8VgAAvhTJ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/ddd6e21d-2342-b734-a707-daee027c75bd.jpeg)

- これから[Elixir](https://elixir-lang.org/)をはじめてみようという方に**ダントツにオススメ**できる本です
    - そこそこ慣れてきた方にもオススメです！
    - たとえば[Enum](https://hexdocs.pm/elixir/Enum.html#content)モジュールと仲良くなれて、[Elixir](https://elixir-lang.org/) に自信がついてきたころにもう一度読むとさらに新しい発見と出会えるーー何度も読み返したい一冊です
    - **私は、このプログラミングモデルの力と美しさについての思想を贈りたい。読者をその気にさせ、それから足りない部分を埋めるオンラインの資料の在り処を示すつもりだ。**[^1]
- 旧版と比べてサイズがちょっと大きくなって、カラーになってみやすくなっています
- 旧版をお持ちの方は @MzRyuKa さんのツイートに差分がまとめられていますのでぜひご参照ください
    - [『プログラミングElixir 第2版』が届いた。初版本よりもサイズ大きくなっているのね。](https://twitter.com/MzRyuKa/status/1335082887025029121)
    - ありがとうございます！！！
- 最初に書いたものは3章まで読んで心に残ったことを心の赴くままに自分の言葉で書いてみたことです
- タイトルの`1 = a`はイゴきます
    - ぜひ[Elixir](https://elixir-lang.org/)を[インストール](https://qiita.com/torifukukaiou/items/d04d0273749c41eb50af#0-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)して、`IEx`を起動してお確かめください
- みなさん、ぜひお手にとって[Elixir](https://elixir-lang.org/)を楽しんでいきましょう! :rocket::rocket::rocket:


```elixir
$ iex
Erlang/OTP 23 [erts-11.0.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe]

Interactive Elixir (1.11.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> a = 1
1
iex(2)> 1 = a
1
iex(3)> 
```

[^1]: [プログラミングElixir 第2版](https://www.ohmsha.co.jp/book/9784274226373/) 「はじめに（正当化のむなしい試み、再び）」 より


## 他の方の「書評」
- [書評：プログラミングElixir第2版](https://qiita.com/MzRyuKa/items/ed5c16c3ee1c7a102fba)
    - @MzRyuKa さん
- [[書評] プログラミングElixir第2版のインプレッションとアップデート](https://qiita.com/piacerex/items/810f407b838bad599e2f)
    - @piacerex さん
- [『プログラミングElixir 第2版』を読んでいまこそElixirに入門しよう](https://kentarokuribayashi.com/journal/2020/12/14/programming-elixir-1-6-ja)
    - @kentaro さん
【Flutter】音声を録音する

#はじめに
2020年度XTechグループアドベントカレンダーの12日目の担当の高野です

本記事では、僕が最近学んでいるFlutterを使用し、iOS端末で音声を録音する方法について、備忘録的に書いていきたいと思います。
#動作バージョン
- Flutter 1.24.0
- Dart 2.12.0
- iOS 14.2

#録音ライブラリ
Flutterで利用できるライブラリとしては、以下のものが代表的かと思います

- flutter_sound
(ドキュメント: https://pub.dev/packages/flutter_sound)

- audio_recorder
(ドキュメント: https://pub.dev/packages/audio_recorder)

- record
(ドキュメント: https://pub.dev/packages/record)
- flutter_audio_recorder
(ドキュメント: https://pub.dev/packages/flutter_audio_recorder)

今回はflutter_audio_recorderを使用し、Exampleを試してみました
#実装
マイクの利用許可を尋ねる文言を `ios/Runner/info.plist` に以下を追加します

```ios/Runner/info.plist
<key>NSMicrophoneUsageDescription</key>
<string>Can We Use Your Microphone Please</string>
```

そして、初回起動の際にマイクの利用が許可されていることを確認します。

```dart:lib/main.dart
if (await FlutterAudioRecorder.hasPermissions)
```

こちらを初期画面生成時に書いてあげます

あとは `FlutterAudioRecorder()` を書いてあげます

```dart
(new) FlutterAudioRecorder FlutterAudioRecorder(String path, {AudioFormat audioFormat, int sampleRate = 16000})
```

このようになってますので `path` にはどこにどういう名前で保存するかを書いてあげて、Audioのフォーマットが`	.m4a .aac .mp4 .wav`がありますのでどれか指定してあげれば大丈夫です

```dart
var recorder = FlutterAudioRecorder("file_path", audioFormat: AudioFormat.AAC); 
await recorder.initialized;
```

こんな感じで生成します
＊`path` については[path_provider](https://pub.dev/packages/path_provider)を使用して指定していますが今回は触れないです
#Buildした際の画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906057/98e2c39d-54a3-5f6e-505b-3d4a804a0a60.png" width="300">

#録音開始
```dart
await recorder.start();
var recording = await recorder.current(channel: 0);
```
#録音停止
```dart
var result = await recorder.stop();
File file = widget.localFileSystem.file(result.path);
```
#一時停止
```dart
await recorder.pause();
```
#録音再開
```dart
await recorder.resume();
```
#終わりに
Flutterで録音について書かせていただきましたが、どうだったでしょうか
ぜひコメントやLGTMなど反応をいただけたらと思っています

また弊社では採用もバシバシ実施しているので興味のあるかたがいましたらご応募ください
https://www.wantedly.com/companies/excite

XTechグループ Advent Calendar 2020 13日目の執筆担当は僕の同期になるy-konaです。
引き続き楽しんでいただけると嬉しいです
ウェイクワードを使ってみよう！

# ウェイクワードとは？
ウェイクワードとは、音声アシスタント機能を呼び出す（起動する）際に用いられる音声コマンドのことである。スマートフォンやスマートスピーカーに搭載されている音声アシスタントは、待機状態でもウェイクワードは常に拾える状態になっている。ウェイクワードを検知すると音声アシスタントが立ち上がり、自然文による命令を解釈して実行する準備を整える。[ソース](https://www.weblio.jp/content/%E3%82%A6%E3%82%A7%E3%82%A4%E3%82%AF%E3%83%AF%E3%83%BC%E3%83%89#:~:text=%E3%82%A6%E3%82%A7%E3%82%A4%E3%82%AF%E3%83%AF%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF%E3%80%81%E9%9F%B3%E5%A3%B0,%E7%8A%B6%E6%85%8B%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82)

# 環境

```
OS: Windows 10
プログラミング言語：python
環境構築ツール：conda
```

# ライブラリーの紹介
https://github.com/Picovoice/porcupine
> Porcupine is a highly-accurate and lightweight wake word engine. It enables building always-listening voice-enabled applications

> 通訳：Porcupine は、高精度で軽量のウェイクワードエンジンです。 常に聞く音声対応アプリケーションの構築を可能にします

# インストール方法

```shell

conda create -n porcupine_test python=3.7
conda activate porcupine_test
conda install pyaudio
pip install pvporcupine
```

# コード

```python
#!/usr/bin/env python3
import struct
import pyaudio
import pvporcupine
from datetime import datetime

porcupine = None
pa = None
audio_stream = None

try:
    keywords = ["computer"]
    porcupine = pvporcupine.create(keywords=keywords)

    pa = pyaudio.PyAudio()

    audio_stream = pa.open(
                    rate=porcupine.sample_rate,
                    channels=1,
                    format=pyaudio.paInt16,
                    input=True,
                    frames_per_buffer=porcupine.frame_length)

    print('Listening {')
    for keyword in keywords:
        print('  {}'.format(keyword))
    print('}')                

    while True:
        pcm = audio_stream.read(porcupine.frame_length)
        pcm = struct.unpack_from("h" * porcupine.frame_length, pcm)

        result = porcupine.process(pcm)
        
        if result >= 0:
            print('[%s] Detected %s' % (str(datetime.now()), keywords[result]))
            
except KeyboardInterrupt:
    print('Stopping ...')

finally:
    if porcupine is not None:
        porcupine.delete()

    if audio_stream is not None:
        audio_stream.close()

    if pa is not None:
        pa.terminate()
```
【Docker】development.logやtest.log出力されない【Rails】

Rails+Docker+puma+nginx+MySQLで開発をしていたときのことです。通常、開発環境やテスト環境のログは、```log/development.log```や```log/test.log```に表示されるのですが、なぜかログが表示されず、空のままという現象が起こりました。

ログが見れないというのは致命的です！！

至急解決したかったのですが、ググって調べても意外と情報がでてこず、かなり時間を費やしてしまったので、私の二の舞を防ぐためにも、ここで共有させて頂きたいと思います。

また、RSpecのシステムスペックだと、テスト失敗時に```tmp/screenshots```に自動でスクリーンショットが保存されるのですが、それも表示されないといった状況でしたが、これも同じ解決方法で解決することができました。

# 解決方法
非常に簡単です。
docker-compose.ymlの設定を変更するだけです。

**変更前に使用していたdocker-compose.yml**

```yaml
version: '3'
services:
  app:
    build:
      context: .
    env_file:
      - ./environments/db.env
    command: bundle exec puma -C config/puma.rb
    volumes:
      - .:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
      - log-data:/webapp/log
    depends_on:
      - db
  db:
    image: mysql:5.7
    env_file:
      - ./environments/db.env
    volumes:
      - db-data:/var/lib/mysql
  web:
    build:
      context: containers/nginx
    volumes:
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
    ports:
      - 80:80
    depends_on:
      - app
volumes:
  public-data:
  tmp-data:
  log-data:
  db-data:
```

**変更後のdocker-compose.yml**

```yaml

version: '3'
services:
  app:
    build:
      context: .
    command: bundle exec puma -C config/puma.rb
    volumes:
      - .:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp/sockets
      - log-data:/var/log/nginx # 変更
    depends_on:
      - db
      - 
  db:
    image: mysql:5.7
    volumes:
      - db-data:/var/lib/mysql

  web:
    build:
      context: containers/nginx
    volumes:
      - tmp-data:/webapp/tmp/sockets
      - public-data:/webapp/public
    ports:
      - 80:80
    depends_on:
      - app

volumes:
  db-data:
  tmp-data:
    driver: local # 追加
  public-data:
  log-data:
    driver: local # 追加
```
```log-data```のマウント先を```/var/log/nginx```変更し、```tmp-data```、```log-data```に```driver: local```を記述します。
このように記述を変更したら、ログもスクリーンショットも表示されるようになりました。

**driver**では、「ボリューム・ドライバがどのボリュームを使うべきか」を指定することができます。
指定先をlocalとすると文字通りホスト上のローカルのファイルシステムにボリュームが作成されます。
（ちなみに、ファイルシステムというのは、記憶装置に保存されたデータを管理したり、操作するために必要な機能で、これはOSによって提供されている機能です。）

しかし、ドキュメントを見るとデフォルトでlocalになっているようなので、記述する必要はなさそうに思えます。が、事実としてこれを明示的に記述しないとログは表示されませんでした。
このあたりのことがわかるかたがいましたら是非コメントいただけますと嬉しいです :bow: 
参考: https://docs.docker.jp/compose/compose-file.html?highlight=compose#driver

# 最後まで読んでいただきありがとうございます！
学んだことを日々アウトプットしております！ご指摘などございましたら、是非コメントいただけますと嬉しいです！
Qiita学習記録　HTML/CSS #2

<h2>デイトラDay6</h2>
inputタグへのスタイルの当て方。

inputタグに対しては属性まで指定しておくことで、簡単に同じ型を作ることができる。

```css:style.css
input[type="email"],input[type="text"] {
    width: 600px;
    border: 3px solid #d8d8d8;
    font-size: 18px;
    display: block;
    margin: auto;
```
```html:index.html
<input type="email" name="email" id="email" placeholder="メールアドレス">
```


<h2>デイトラDay7</h2>
レスポンシブについて学ぶ。
スマホ用の表示は今後、Web制作において必須。
明日も引き続き、この章の学習を進める。
30代からのプログラミング 12日目【Python入門編】

今回からは諸事情によりPythonも勉強していきます。

##学習内容
100 Days of Code - The Complete Python Pro Bootcamp for 2021

Udemy講座です。(英語)

###Day1
#####出力

```Python:print
print ("文字列")
# + を用いて文字列同志を結合する事も可能。
print("文字列"\n"文字列")
#　この様にすると出力時\nの所で改行される
```
" "内の文字列を出力する。現時点では出てきていないが数値の出力も可能。

```Python:input
print (input("文字列"))
```
文字列を出力後、入力が出来る。上記の場合は入力された文字をそのまま出力する。

```Python:len
print (len("文字列"))
```
今の所だと数を数えてくれるものという認識。上記の様に入力すると文字列の文字数を出力する。

#####変数
```Python:
name = input("What is your name?")
print(name)
```
変数として定義する事で繰り返し使用したりすることが出来る。この場合はnameが該当。
上記を実行すると、What is your name?→入力→入力された名前が出力、となる。

```Python:
# 変数は上書きが出来る。
a = 10
print(a)
a = 20
print(a)
#とした場合出力結果は
10
20
#となる。
```
#####本日の課題
```Python:
print("文字列")
a = input("文字列"\n)
b = input("文字列"\n)
print(a + b)
```
##所感
HTML/CSSは初歩の初歩から見た目的なフィードバックが即現れるのに対しPythonは電卓を使っているかのような印象を持った。これからどの様な事が出来るようになっていくのか楽しみだ。
コース構成は講義を聞きながら途中途中に簡単な問題があり、それを繰り返しつつ進めた後で総まとめのコーディングをするという流れ。こまめに手を動かさせてくれるので飽きずに受講出来たが最大の問題点は自分は英語が出来ない事か…
iOS 14からアプリにも出る様になった弱いパスワードの警告に対応する

iOS 14から、Keychainに保存されたパスワードが弱い場合などに警告が出る様になりました（参考: https://applech2.com/archives/ios-14-keychain-new-password-security-recommendations.html ）。

アプリでAssociated DomainsのWeb CredentialsでKeychainのパスワードを使える様にしている場合（参考: https://qiita.com/akatsuki174/items/c103e026bbdd444b68bf ）も同様にアプリ上にアラートが出る様になっていました。


![IMG_0450.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9490/3a4fd905-a039-7c86-8f31-43382fb1a860.jpeg)

↑の `Webサイトのパスワードを変更` をタップすると、↓設定アプリの`パスワード`から`Webサイトのパスワードを変更`を促されます。
（スクショ撮ると勝手にパスワードは非表示になるの気が利いていますね）

![IMG_0448.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9490/ce13500f-fa78-2c87-233d-a399f5242bdf.jpeg)

Webサイト側で特に何も対応していないと、関連づけられたドメインのトップページが表示されてしまいます...

![IMG_0447.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9490/f3fcaafb-9a95-bf64-7c7c-3c2f1630573a.jpeg)

# パスワード変更ページへ直で飛べる様にする

`/.well-known/change-password` にアクセスが来るので、ここに来たらパスワード変更ページへリダイレクトしてあげるとどこから変更すればいいのか迷わなくて便利ですね :ok_woman:  

参考: https://applech2.com/archives/20181114-well-known-url-for-changing-passwords.html

# 補足情報

- ローカル環境で動作確認しようとしたけど https じゃないと `/.well-known/change-password` は見てくれないっぽくアクセスが来ませんでした
よく使うマークダウン記法をまとめておく

#はじめに
　プログラミングの学習を始めるまでは、恥ずかしながら、マークダウンという言葉すら知らない状態でしたが、毎日Qiitaに投稿している内に自然とマークダウン記法について覚えることができ、その手軽に装飾できる便利さに気づいたので紹介します。

##最低限これだけ！

###見出し
`#`
`##`
 ：
`#`(パウンド記号)を頭につける。
`#`1つで、HTMLで言うh1タグ、`#`2つでHTMLで言うh2タグと増えていく。

###**太文字**
`**太文字**` 
アスタリスク2つで囲う。

###水平線
↓これ

---

`---`
ハウフン3つ。

###コードブロック

```
コードブロック
```
バックコーテーション3つずつで囲う。

###インラインのコード

`インラインのコード`
バックコーテーション1つずつで囲う。

###[Webページリンク]()
`[Webページリンク]()`
角括弧に表示させる文字、丸括弧にリンクのURL。


###リスト(箇条書き)
- リスト(箇条書き)

ハイフン1つの後に半角スペース。

###リスト（順番）
1. リスト（順番）


数字とドットと半角スペース。
ちなみに、数字は全部同じ数字でも大丈夫。

###画像リンク

`![画像が表示されない場合の文字](.png)`

!(エクスクラメーションマーク)と角括弧と丸括弧。

###<font color=red>文字の色（Qiitaにおいて）</font>
`<font color=red>文字の色</font>`

##最後に
　他にも、テーブル作成や引用もあるが、私はほぼ使っていないので割愛しました。

　このQiitaの記事を書くときも、最近使い始めたNotionというメモアプリもGitHubのREADMEにもマークダウンが使われていて、使う場面が多い。何度も使っていくことで覚えることができるので、積極的に使うことをおすすめします。
図形を単純化する simplify

複雑な図形を間引いてシンプルな図形にします。
Ramer-Douglas-Peucker というアルゴリズムを使っているそうです。

![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/01478b5a-83c4-a2eb-f6ac-c66931caae7f.gif)

```javascript
const polygon1 = {"type":"Feature","properties":{"pref":22,"name":"静岡県"},"geometry":{"type":"Polygon","coordinates":[省略]}};

const polygon2 = {"type":"Feature","properties":{"pref":23,"name":"愛知県"},"geometry":{"type":"Polygon","coordinates":[省略]}};

const map = new mapboxgl.Map({
  container: 'map',
  bounds: turf.bbox(turf.featureCollection([polygon1, polygon2])),
  fitBoundsOptions: { padding: { bottom: 50, top: 50, right: 50, left: 50 } },
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [ "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" ],
        tileSize: 256,
        attribution: "OpenStreetMap",
      },
      polygons: {
        'type': 'geojson',
        'data': {
          "type": "FeatureCollection",
          "features": [ polygon1, polygon2 ]
        }
      }      
    },
    layers: [
      {
        id: "BASEMAP",
        type: "raster",
        source: "OSM",
      },
      {
        'id': 'polygons',
        'type': 'fill',
        'source': 'polygons',
        'paint': {
          'fill-outline-color': '#000000',
          'fill-color': '#FF0000',
          'fill-opacity': 0.7
        }
      },
    ],
  },      
});

document.getElementById('simplify').addEventListener('click', () => {
  const tole = Number(document.getElementById('tole').value);

  turf.simplify(polygon1, { tolerance: tole, highQuality: false, mutate: true });
  turf.simplify(polygon2, { tolerance: tole, highQuality: false, mutate: true });

  const dataSource = map.getSource('polygons');
  dataSource.setData({
    "type": "FeatureCollection",
    "features": [
      polygon1, polygon2
    ]    
  });
});
```

使い方は、``turf.simplify(図形, { tolerance: 間引く距離, highQuality: 高/低精度 })`` です。
Ramer-Douglas-Peucker algorithm は、tolerance で指定した距離にある点を間引くようなので、同じ tolerance で simplify を繰り返し実行しても、初回しかシンプル化されません。
``highQuality:true/false`` の違いは、あまり体感できませんでした。

また、サンプルで隣り合うポリゴン2つをそれぞれシンプル化していますが、結果を見て分かるとおり、接合面は一致しません。
単一の図形を間引きたいときに使うとよさそうです。

## 完全なコード

- [Simplify features - JSFiddle - Code Playground](https://jsfiddle.net/amay077/0e6bg5f3/6/)

## 参考

- [TrailNote : トラックポイントを間引くアルゴリズム](https://www.trail-note.net/tech/thinout/)
- 地図データは [47都道府県のポリゴンデータ（geojson）](https://japonyol.net/editor/article/47-prefectures-geojson.html) を使用させていただきました
[baserCMS]管理側（admin-third）の左メニュー「サイト基本設定」を簡単に表示制御する


システム管理ユーザグループ **以外のユーザグループに属する** ユーザでログイン中に、左メニューにある「設定＞サイト基本設定」を消したいな、て思ったときのtips。

![sc_admin_menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26110/49f4d6b0-5a64-a4b0-14d9-1c06482f9a8f.png "sc_admin_menu.png")


## 想定している対象者
- baserCMSでウェブサイトを制作をしている方
- PHPer


### 環境
- baserCMS 4.4.2
- 管理側テーマ: admin-thrid


## 手法1-1: setting.phpの利用
以下のファイルに記述を追加する。

- /app/Config/setting.php

```php
$config['BcApp.adminNavigation.Systems.SiteConfigs.disable'] = true;
```

### 手法1-2: setting.phpの利用＋システム管理ユーザグループ以外のときは消す

```php
if (BcUtil::isAdminSystem(env('REQUEST_URI'))) {
	if (!BcUtil::isAdminUser()) {
		$config['BcApp.adminNavigation.Systems.SiteConfigs.disable'] = true;
	}
}
```


## 手法2-1: プラグインの利用
以下のファイルに記述を追加する。

- app/Plugin/YOUR_PLUGIN/Config/setting.php

```
$config['BcApp.adminNavigation.Systems.SiteConfigs.disable'] = true;
```

### 手法2-2: プラグインの利用＋システム管理ユーザグループ以外のときは消す

```
if (BcUtil::isAdminSystem()) {
	if (!BcUtil::isAdminUser()) {
		$config['BcApp.adminNavigation.Systems.SiteConfigs.disable'] = true;
	}
}
```


## baserCMS Advent Calendar 2020
- Adventar https://adventar.org/calendars/5393
イメージマップで鍋をつつく。

#あらすじ
画像に色々埋め込みたくなったので、イメージマップ使ってみました。


#インデックス
- [目指すもの](#目指すもの)
- [イメージマップを作る](#イメージマップを作る)
- [拡大・縮小に対応する](#拡大縮小に対応する)
- [完成品](#完成品)

#目指すもの
今回使う画像はこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/14ba6ce7-d3f0-58b8-3653-f26bb27d0846.png)
この美味しそうな水炊き鍋の「鳥肉」と「豆腐」にホバーしたら文字が表示されるようにします。


#イメージマップを作る
###領域を指定する
この作業が一番大事かつ一番めんどいです！
簡単にやる方法求む。

今回は HTML Imagemap Generator を使いました。
https://labs.d-s-b.jp/ImagemapGenerator/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/d0ca38dd-892a-077c-a347-3369bfd1ad5a.png)

右上で描きたい図形をクリックして、それとなく領域を指定します。
すると、 coord 要素が算出されます。


#レスポンシブデザインに対応する
レスポンシブデザインのページの場合、イメージマップがズレます。
( 試しに `width: 50vw;` とか指定してみると分かります。 )

ので、再計算してくれるプラグイン ( jQuery-rwdImageMaps ) を利用します。
https://github.com/stowball/jQuery-rwdImageMaps

README に従ってスクリプトを追加します。

#ホバーしたら文字を出す
`area` 要素をホバーしたら `div` に入った `title` が表示されるようにしました。

こんな感じの `index.html` になりました。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Clickable Map</title>
  </head>
  <body>
    <img
      src="img/food_nabe_mizutaki.png"
      usemap="#img3"
      alt="水炊き"
      id="img3"
    />
    <map name="img3">
      <area
        shape="poly"
        coords="141,243,168,261,182,255,206,267,222,258,248,265,270,252,301,245,311,235,306,222,330,216,336,201,328,184,313,186,304,178,281,183,271,175,255,177,237,155,211,160,206,165,195,158,175,163,170,181,154,188,155,216,140,227,140,245,170,262,208,233"
        href="#鳥肉"
        title="鳥肉"
        alt="鳥肉"
      />
      <area
        shape="poly"
        coords="228,149,254,129,265,131,288,115,338,131,340,168,317,181,310,183,299,175,279,179,264,171,255,174,255,174"
        href="#豆腐"
        title="豆腐"
        alt="豆腐"
      />
    </map>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js"></script>
    <script>
      $(document).ready(function (e) {
        $("img[usemap]").rwdImageMaps();
      });
      $("area").hover(
        function () {
          $(this).append(`<div>${$(this).attr("title")}</div>`);
        },
        function () {
          $(this).find("div:last").remove();
        }
      );
    </script>
  </body>
</html>
```

jQuery 弱者なのでコードの汚さは許して...

#完成品
![imagemap_hover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/3802c44e-143f-a9fd-9a24-05b7cc7da460.gif)

鍋が食べたくなりますね！


#まとめ
いつもながら先人ありがとう！
領域指定をもっと楽にする方法考えたいところ。
CLIでAzure上にVMを構築する

### 概要
CLIでAzureにVMをつくる手順です。

### 目次
* VMを作成、起動する
    1. リソースグループを作成する
    2. VMのOSイメージ名を確認する
    3. VMのサイズをどれにするか決める
    4. VMを作成する
    5. VMを起動し、接続する
* VMを停止する
    1. VMを停止、割り当て解除する

### VMを作成、起動する

#### 1. リソースグループを作成する

```bash
# リソースグループ名
RG="RG"

# 下記コマンドでリージョンリストを取得してどのリージョンを使用するか決める
az account list-locations | jq .[].name

# 今回は、westus2を指定する
REGION="westus2"

# リソースグループを、指定したリージョンに作成する
az group create --name $RG --location $REGION
```

#### 2. VMのOSイメージ名を確認する

```bash
az vm image list | jq .[]
# 出力結果 (Ubuntuの部分だけ抜粋して記載)
# {
#   "offer": "UbuntuServer",
#   "publisher": "Canonical",
#   "sku": "18.04-LTS",
#   "urn": "Canonical:UbuntuServer:18.04-LTS:latest",
#   "urnAlias": "UbuntuLTS",
#   "version": "latest"
# }

# urnAliasの値を後続で使用するため変数に詰める
IMAGE="UbuntuLTS"
```

#### 3. VMのサイズをどれにするか決める

下記ページあたりを参考に何があるか料金はいくらか確認し、VMのサイズを決める。

- [Azure の仮想マシンのサイズ](https://docs.microsoft.com/ja-jp/azure/virtual-machines/sizes)
- [Linux Virtual Machines の料金](https://azure.microsoft.com/ja-jp/pricing/details/virtual-machines/linux/)
- [料金計算ツール](https://azure.microsoft.com/ja-jp/pricing/calculator/)


上記2つで、どのサイズにするかを決めたら下記で名称を確認する

```bash
# A2シリーズに絞って確認
az vm list-sizes --location $REGION | jq .[].name | grep A2
# 出力結果
# "Standard_A2"
# "Basic_A2"
# "Standard_A2m_v2"
# "Standard_A2_v2"

# 後続で使用するため変数に詰める
SIZE="Standard_A2"
```

#### 4. VMを作成する
```bash
# VMの名前とログインユーザー名を変数に詰める
VMNAME="sample-vm"
USERNAME="sample-user"

# VMを作成する（指定したサイズによっては作成完了まで数分待機する）
az vm create \
    --resource-group $RG \
    --name $VMNAME \
    --image $IMAGE \
    --size $SIZE \
    --admin-username $USERNAME \
    --generate-ssh-keys
```

#### 5. VMを起動し、接続する

```bash
# VMを起動する
az vm start --resource-group $RG --name $VMNAME --no-wait

# PublicIPを変数に詰める
PUBLIC_IP=`az vm list-ip-addresses -g $RG \
--query "[].virtualMachine.network.publicIpAddresses[?name == '"$VMNAME"PublicIP']" \
| jq -r .[][].ipAddress`
echo $PUBLIC_IP

# SSHで接続する
ssh $USERNAME@$PUBLIC_IP
```

## VMの停止
課金を抑えるため、停止手順も記載します。

#### 1. VMを停止、割り当て解除する

```bash
RG="RG"
VMNAME="sample-vm"
az vm stop --resource-group $RG --name $VMNAME --no-wait
# 割り当て解除 (課金の発生を抑える。ただしIPアドレスを解放する)
az vm deallocate --resource-group $RG --name $VMNAME --no-wait
```

### 参考
- [Azure リソースを管理するための一般的な Azure CLI コマンド](https://docs.microsoft.com/ja-jp/azure/virtual-machines/linux/cli-manage)
- [Azure の仮想マシンのサイズ](https://docs.microsoft.com/ja-jp/azure/virtual-machines/sizes)
- [Linux Virtual Machines の料金](https://azure.microsoft.com/ja-jp/pricing/details/virtual-machines/linux/)
- [料金計算ツール](https://azure.microsoft.com/ja-jp/pricing/calculator/)
- [JMESPath](https://jmespath.org/)  
IPアドレスを変数に詰めるところで使いました。
- [パブリック IP アドレスの料金](https://azure.microsoft.com/ja-jp/pricing/details/ip-addresses/)  
IPアドレスが変わるのを避けたい場合は、静的IPアドレスを使用します。

### おわりに

完全に課金を無くすためにはリソースグループごと削除してください。

```bash
RG="RG"
az group delete --name $RG
# Are you sure you want to perform this operation? (y/n): y
```

使う機会は無いと思いますが、何かご指摘ありましたらよろしくお願いします。
[Rails] テーブルの作成方法

概要
---

テーブルの作成方法は２ステップあります。

①マイグレーションを作成する　（設計書を作成）
②マイグレーションを実行する　（設計書を読み込ませる）

この２つの作業をこなして
データベース内にテーブルを作成することができます。
具体的な方法を説明する前に、「マイグレーションとは何か？」を理解しておきましょう！


マイグレーション
---
マイグレーションとは、テーブルの設計書・仕様書です。

db/migrate/ ディレクトリ内にあるマイグレーションファイルに
具体的なテーブルの仕様を記述していきます。

この、仕様を記述したマイグレーションファイルをデータベースに適用させることで、
テーブルが作成されるというわけです。


マイグレーションの実行
---

```ターミナル
rails　db:migrate
```
rails db:migrateコマンドで、マイグレーションをデータベースに適用することができます。
【UE4】インポートしたVRMにアニメーションリターゲットを行ってアニメーションを適用する

# 最初に

どうも、ろっさむです。

今回はVRM4Uでインポートを行ったVRMのアバターモデルに対してアニメーションを適用するために、アニメーションリターゲットを行う手順を自分用にまとめておきます。

環境は以下の通りです。

- UE4.26
- Windows10

アニメーションリターゲットに関する詳細に関しては以下のヒストリアさんのブログ記事が非常にわかりやすくまとめられているため、こちらをまず確認してみると良いかと思います。

↓↓↓↓↓↓

**[「[UE4]アニメーション リターゲット」](https://historia.co.jp/archives/17403/)**


# 手順

今回はテストとしてこちらのモーションをリターゲットしてみたいと思います。
モーション名は `neon_mo_Erase` です。

![original_neon_motion](https://user-images.githubusercontent.com/10665134/101636942-5febc580-3a6f-11eb-968b-deed715777f6.gif)

## スケルトンの編集

リターゲットするにあたって、対象のスケルトンをまず確認しましょう。
特にリネームしていなければ「SKEL_{インポートしたVRM名}」が該当します。
![image](https://user-images.githubusercontent.com/10665134/101637435-1b145e80-3a70-11eb-8f5c-f1ac2d8d6410.png)

スケルトンを開いたら`Skeleton Tree`タブを開いた状態で`Options`ボタンを押下し、リターゲット用のオプションを表示するようにしましょう。
![image](https://user-images.githubusercontent.com/10665134/101637726-78101480-3a70-11eb-97d5-a2a0b5b2b1b5.png)

まずは念のために、`root`を右クリックして `Recursively Set Translation Retargeting Skeleton`を選択します。
これですべてのボーンが一旦`Skeleton`に設定されます。

![image](https://user-images.githubusercontent.com/10665134/101639025-28324d00-3a72-11eb-8f65-41c6311389bf.png)

次に、`Root`を`Animation`、`J_Bip_C_Hips`を`Animation Scaled`に変更します。

- **Animation**：ボーン位置はアニメーションデータから取得されるようになります。
- **Skeleton**：ボーン位置はターゲットスケルトンのバインドポーズから取得されます。
- **AnimationScaled**：スケルトン比率によってスケーリングされたアニメーションからのボーン位置が取得されます。詳しくは先述したヒストリアさんの記事がわかりやすい。

Rootボーンや、IKボーン、武器のボーンなどはアニメーションに設定する必要があります。

![image](https://user-images.githubusercontent.com/10665134/101638367-53686c80-3a71-11eb-9d4d-beccb0980ba5.png)

設定後は`Retarget Manager`タブを開いて、以下の`Set up Rig`の`Select Rig`が`Humanoid`になっているかの確認と、それぞれのターゲットが正しく設定されているかを確認してください。

`AutoMap`は自動で割り当てを行いますが、たまに間違っていることがあるのでその場合は手動で確認する必要があります。
![image](https://user-images.githubusercontent.com/10665134/101639935-3fbe0580-3a73-11eb-91bb-1a9982831396.png)

ここまで編集したら、saveしておきましょう。

## リターゲットして確認

リターゲットを行うにはまず対象のアニメーションを右クリックしてメニューから `Retarget Anim Assets > Duplicate Anim Assets and Retarget`を選択します。
![image](https://user-images.githubusercontent.com/10665134/101640888-6d577e80-3a74-11eb-87f7-a2475a86473b.png)

リターゲット用のウィンドウがでるので、先ほど諸々設定したSkeletonを選択し、リターゲット後のアニメーションを格納するフォルダを指定します。他に`Prefix`など必要であれば設定を行い、`Retarget`ボタンを押下してください。
![image](https://user-images.githubusercontent.com/10665134/101641230-d9d27d80-3a74-11eb-964b-b05a5ecc82c7.png)

これで、無事リターゲットほやほやのアニメーションができました。
![image](https://user-images.githubusercontent.com/10665134/101641449-18683800-3a75-11eb-943e-67611c5eb6fe.png)

![kuro_neon_motion](https://user-images.githubusercontent.com/10665134/101636927-58c4b780-3a6f-11eb-9b30-3a58de17f1e4.gif)

# 参考

- [[UE4]アニメーション リターゲット](https://historia.co.jp/archives/17403/)
- [リターゲットされたアニメーションを使用する（公式）](https://docs.unrealengine.com/ja/AnimatingObjects/SkeletalMeshAnimation/AnimHowTo/Retargeting/index.html)
- [Animation Retargeting（公式）](https://docs.unrealengine.com/en-US/AnimatingObjects/SkeletalMeshAnimation/AnimationRetargeting/index.html)
ウェイクワード、テキスト検出のメモ

condaのコンソールのフォントを変更方法
http://pentan.info/program/cmd_chcp.html

正規表現の使い方
https://regexr.com/
https://developers.google.com/edu/python/regular-expressions#basic-examples

グーグルテキストから音声に交換するライブラリー
https://github.com/pndurette/gTTS
https://towardsdatascience.com/easy-text-to-speech-with-python-bfb34250036e


テキスト検出と認識
https://github.com/PaddlePaddle/PaddleOCR/blob/develop/doc/doc_en/inference_en.md

ウェイクワードを利用のライブラリー
https://github.com/Picovoice/porcupine
pip install pyaudio
error: Microsoft Visual C++ 14.0 or greater is required. Get it with "Microsoft C++ Build Tools": https://visualstudio.microsoft.com/visual-cpp-build-tools/
-> conda install pyaudio

リアルタイムのカラーフィルター
https://stackoverflow.com/questions/10948589/choosing-the-correct-upper-and-lower-hsv-boundaries-for-color-detection-withcv

グーグルのOCR結果からバウンディングボックスを写真に追加する方法
https://cloud.google.com/vision/docs/fulltext-annotations


Streaming OCR with Google’s Vision API and OpenCV
https://springml.com/blog/streaming-ocr-vision-api/


パイソンjsonの使い方
https://stackabuse.com/reading-and-writing-json-to-a-file-in-python/


エラー：can't pickle google.protobuf.pyext._message.RepeatedCompositeContainer objects
https://github.com/googleapis/python-vision/issues/70
```
response = client.text_detection(image=image)
json_string = proto.Message.to_json(response)
```

pickleというライブラリーの使い方
https://wiki.python.org/moin/UsingPickle

k-Treeアルゴリズムの使い方（リスト内の別のポイントに最も近いポイントを見つける方法）
https://stackoverflow.com/questions/10818546/finding-index-of-nearest-point-in-numpy-arrays-of-x-and-y-coordinates
【Java】コマンドライン引数を指定してJavaを実行する

Javaプログラム実行時に、コマンドライン引数を指定する方法です。

## 指定の手順

ターミナルでJava

1. Javaのソースコードのファイルを作成 
2. ターミナルでそのファイル先まで移動する
3. Javaファイルをコンパイルする
4. 引数を与えてJavaの実行

1 ~ 3に関しては今回は割愛します。

## コマンドライン引数

クラス名の後に続ける引数のことを「起動パラメータ」や「コマンドライン引数」と呼びます。

コマンドライン引数は以下のような特徴を持ちます。

- スペースで区切って複数指定可能
- コマンドライン引数はオプションなので省略可能
- 指定されたデータはString配列オブジェクトに格納される
- mainメソッドの引数に渡される

## 指定方法

コマンドライン引数の指定は以下です。

```java
java ファイル名 引数1, 引数2, 引数3...
```

## サンプルコード・挙動の確認1

Main.javaにこのようなプログラムを組みました。

```java
public class Main {

    public static void main(String[] args) {
        System.out.println("引数0" + args[0] + " 引数1" + args[1] + " 引数2" + args[2]);
    }
}
```

ターミナル上で以下の引数を与えて実行

```java
java Main パンダ うさぎ コアラ
```

指定されたデータはString配列オブジェクトに格納され、mainメソッドの引数である配列型変数argsを使って参照することができます。

```java
引数0パンダ 引数1うさぎ 引数2コアラ
```

## サンプルコード・挙動の確認2

for文で配列内の値を出力するのもやってみます。

```java
public class Main {

    public static void main(String[] args) {
        for (int i = 0; i < args.length; i++) {
            //配列内の値をすべて取得
            System.out.println(args[i]);

        }
    }
}
```

```java
java Main パンダ うさぎ コアラ
```

```java
パンダ
うさぎ
コアラ
```

## まとめ

仕組みがわかればあつかは普段の配列変数と変わりませんが、Silver試験ではややそこにひっかけ問題が絡んでくるようなので注意が必要かもしれません。

## 参考文献・記事

[【Java入門】Javaをコマンドで動かす方法まとめ（引数なし・あり） | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト](https://www.sejuku.net/blog/108780)
はじめよう、CTF

#始めに
この記事は豊田高専コンピュータ部Advent Calendar 2020の記事です。  

##CTFとは
いわゆる「ハッキング」の競技です。
「Flag」と呼ばれる文字列を見つけることで正解となるため、「Capture The Flag」を略してCTFと呼ばれます。
暗号を解く「Crypto」、プログラムの脆弱性を攻撃する「Pwn」、隠されたデータを発見する「Steganography」などのジャンルが存在します。

##必要なもの
試してみるだけなら、特に準備する必要はありません。
簡単な問題であれば、Webブラウザやテキストエディタなどのソフトと、少しの知識があれば解くことができます。  

より高度な問題、例えば「Crypto」や「Web」では、C言語やJavaScriptの知識、「Pwn」ではPHPやSQL、Linuxコマンドの知識などが必要になってきます。


##まずはやってみよう
初心者におすすめのCTFサイトが、[CpawCTF](https://ctf.cpaw.site/)です。入門者でも解ける簡単な問題から、少し勉強しないと解けない問題もあります。  
CpawCTFの問題がある程度解けるようになれば、[ksnctf](https://ksnctf.sweetduet.info/problem/5)や[picoCTF](https://picoctf.org/)にも挑戦してみましょう。

##どうしてもわからなかったら
通常CTFの回答は「WriteUp」と呼ばれます。ですので、「問題名 writeup」などと検索すれば、解説記事がヒットすることが多いです。理想は独力で解くことですが、どうしてもと言うときはインターネットの力を頼りましょう。

##おわりに
自分が情報工学をよく知らなかったときは、「セキュリティの分野は難しそうだなぁ…」とか、「なんとなくハードルが高そう…」と思っていましたが、触ってみるとめちゃめちゃ楽しいです。  
またCTFに限った話ではないですが、基本的に情報分野の人は教えるのが好きです。質問すると聞いてないことまで喋ります。
ですので、気軽に周りの人に聞いてみましょう。1人で悩むのが正解とは限りません。  
でも聞いてないこと喋り出したら止めましょう。
Linux nmcli

#【Linux nmcli】

nmcliのコマンドが種類が多いです。
しっかり覚えていきます。

##NetworkManagerを管理するCLI

構文）nmcli  オプション　{general, device, connection, networking}  コマンド  引数

###・generalオブジェクト

NetworkManagerの状態表示、管理

```bash:オプション
status　          　NetworkManagerの状態を表示
hostname ホスト名    ホスト名を表示、指定したホスト名に変更
```

###・networkingオブジェクト

ネットワークの状態表示。有効、無効の設定

```bash:オプション
on,off           ネットワークの有効化、無効化
connectivity     ネットワークの接続状態を表示
```

###・radioオブジェクト

```bash:オプション
wifi　　       　　Wi-Fiの状態を表示
wifi　on,off      Wi-Fi接続の有効化、無効化
```

###・connectionオブジェクト

接続の管理

```bash:オプション
show　                　接続状況を表示
up,down　ID           　接続の有効化、無効化
modify　ID　パラメータ   　指定接続IDの設定ファイルの指定パラメータを書き換える。
 ※パラメータの反映には接続のconnection up 操作必要
```

###・deviceオブジェクト

デバイスの表示と管理

```bash:オプション
status　　　　　　　　　           　デバイスの状態を表示
show インタフェース名　　　            指定したデバイスの詳細情報を表示
connect,disconnect インタフェース名   指定したデバイスを接続、切断
modify インタフェース名 パラメータ　     指定したインタフェースのパラメータを即時変更する。
                                　設定ファイルの書き換えはない。
monitor インタフェース名　            指定したデバイスの監視
delete  インタフェース名　            ソフトウェアデバイス削除
wifi list　                       Wi-Fiアクセスポイントの表示　　
wifi connect SSID　               Wi-Fiに接続するデバイスを作成、有効化
wifi rescan　　　　　　　　　　　　　 Wi-Fiアクセスポイントの再検索
```
[OutSystems]Windowsアカウント名に日本語を使うとExtensionがPublishできない

タイトル通りの現象が起きます。

# 確認環境
Personal Environment(Version 11.10.0 (Build 22910))
Integration Studio(Version 11.6.21)

# 発生する現象
Windowsにログインするアカウント名に日本語を使っていると、Integration StudioによるPublish時に以下のようなエラーがでます。

> Compiler Error
> 
> .NET Compilation.

> MSBUILD : error MSB1009: プロジェクト ファイルが存在しません。
> スイッチ:C:\Users\縺倥・繧貼AppData\Local\Temp\0c15ca58-2421-4fc9-addd-677d8d00b39c\Source\NET\SampleExtension.sln

# 原因
Integration Studioが、日本語をうまく扱えていないですね。
私は自分のPCのログインに自分の名前を使っていますが、そこがパスの区切り文字「\」と結合した上で文字化けして「縺倥・繧貼」になってしまっています。

これにより、コンパイラが.NETのプロジェクトを見つけられずにエラーになってしまうわけですね。

# 対策
## 対策1：アカウント名に日本語を使わない
自明ですね。

## 対策2：一端日本語を含まないパスにExtensionを保存
Integration StudioのFileメニュー　＞　Save Asで、日本語を含まないパスにExtensionを保存してしまいます。
こんな風に。これで文字化けする要素がないので無事にPublishできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/562e7ced-48ba-15ac-fd7e-a5dfc7a56187.png)
Ruby:devise gemのインストールからユーザー管理機能の実装まで

※2022年から技術系の記事は[個人ブログ](https://yamaday0u.net/category/programmer/)に投稿しております。ぜひこちらもご覧ください→[yamaday0u Blog](https://yamaday0u.net/category/programmer/)

devise gemはRuby on Railsでユーザー登録やログインなど、ユーザー管理機能を簡単に実装できるgemです。
備忘録としてdevise gemのインストールからユーザー管理機能の実装までの流れを記します。

## devise gemのインストール
まずはRailsのGemfileファイルの一番下に次の記述

```:Gemfile
gem 'devise'
```
その後、ターミナルでbundle installを入力

```:ターミナル
bundle install
```
## インストール後の初期設定
ターミナルで次のコマンドを入力します。
追加したdevise gemの「設定関連に使用するファイル」を自動で生成するコマンドです。

```:ターミナル
rails g devise:install
```

以下のファイルが生成されれば成功です。

```:ターミナル
create  config/initializers/devise.rb
create  config/locales/devise.en.yml
```
続いて次のコマンドを順に打っていきます。

```:ターミナル
rails g devise user
rails db:migrate
rails g devise:views
```
各コマンドの意味は次の通りです。

| コマンド | 実行される内容 |
| --- | --- |
| rails g devise user | Userモデル生成<br>マイグレーションファイル生成<br>ルーティングに"devise for :users"を追記<br>※devise_forは、ユーザー機能に必要な複数のルーティングを一度に生成してくれるdeviseのメソッド |
| rails db:migrate | マイグレーションを実行してテーブル作成 |
| rails g devise:views | ビューファイル作成 |
マイグレーションファイルには必要に応じてカラムの設定をします。
たとえばrails g devise userコマンドで自動生成されたマイグレーションには、nameカラムが設定されていないので追記します。

rails g devise:viewsコマンドは、deviseに用意されたビューファイルをコピーし、app/viewsの配下に配置してくれるコマンドです。

deviseでログイン機能を実装すると、ログイン/サインアップ画面が自動的に生成されますが、deviseのGem内に存在するビューファイルを読み込んでいるため、ビューファイルとしては生成されません。

そのため、deviseのビューファイルに変更を加えるために、このコマンドを入力してビューファイルを生成します。

ここまで実装したら、あとは各々の好みのデザインにしたり、機能を追加したりします。

## おまけ：deviseで使えるメソッド
devise gemをインストールしたことで使えるメソッドを紹介します。

| メソッド | 意味 |
| --- | --- |
| user_signed_in? | ユーザーがログインしているか否かを判断できる |
| current_user |ログインしているユーザーの情報を取得できる |
| devise_parameter_sanitizer | deviseにおけるparamsのようなメソッド<br>deviseのUserモデルに関わる「ログイン」「新規登録」などのリクエストからパラメーターを取得できる |
devise_parameter_sanitizerの書き方例は以下の通りです。

```ruby
devise_parameter_sanitizer.permit(:deviseの処理名, keys: [:許可するキー])
使用できる:deviceの処理名→:sign_in、:sign_up、:account_update
```

## 参考資料
[deviseの公式GitHub](https://github.com/heartcombo/devise)
【FileMaker】FileMaker Goでのタッチキーボード設定のワナ

さて、FileMaker Goで表示されるとちょっと煩わしいなと思うキーボードですが、設定を間違えると入力できないということがあるよ、という警告（？）の記事です。

# FileMakerのバージョン
タッチキーボードの有効設定は、FileMaker 14以上で提供されています。

# タッチキーボードの有効化設定
[タッチキーボードの有効化](https://help.claris.com/ja/pro-help/content/enable-touch-keyboard.html)設定は、その名のとおり、タッチ式キーボードを使うか使わないか、というところになります。

「タブレットって、タッチキーボードだから有効にしておけばいいんだよね？」
とか
「タッチキーボード使ってるけど、このレイアウトだけは入力させたくないんだよね」
というような、軽い気持ちで「タッチキーボードの有効化」設定をオンオフしてしまうと、変な入力ができる（できない）レイアウトになっちゃうよ、ということです。

# 実装
では、テスト実装をしていきます。

## レイアウト
タッチキーボードの有効化をオンにしたレイアウトとオフにしたレイアウトを用意しました。
![スクリーンショット 2020-12-09 22.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/b21fb230-97fb-d3ff-32a5-27796e381716.png)


## タッチキーボードの入力タイプ設定
それぞれのフィールドで、タッチキーボードでの入力タイプを指定しました。
その他、タッチキーボードの他に、カレンダーやチェックボックスのコントロールスタイルを設定したフィールドも混ぜました。
![スクリーンショット 2020-12-09 22.34.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/f4492e09-ea96-aa5c-5c75-fd7c8ce7ea00.png)

## タッチキーボードの有効化設定
レイアウトが開いた時に、スクリプトトリガの"OnLayoutEnter"でタッチキーボードの有効化設定のオンオフを設定するように仕掛けました。
![スクリーンショット 2020-12-09 22.22.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/a4e2f737-5fc5-c973-00af-6416c5f7cf17.png)
![スクリーンショット 2020-12-09 22.22.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/cb0f5a7f-e0d6-9067-b606-3b79f791d1c0.png)

# 有効化のテスト
では、FileMaker Goの入っているiPhoneでテストをしていきましょう。

## オンにしている場合
タッチキーボードの有効化をオンにしている場合は、設定されたキーボードがそれぞれ表示されて入力ができます。
また、コントロールスタイルで設定したカレンダーやチェックボックスも入力できています。
![スクリーンショット 2020-12-09 22.48.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2272f928-0a7a-ca23-d306-765cfde2caf0.png)

## オフにしている場合
タッチキーボードの有効化をオフにした場合は、設定されたキーボードが表示されず、入力が全くできません。
コントロールスタイルで設定したカレンダーやチェックボックスはタッチキーボード設定とは無関係なので、無事入力できています。
![スクリーンショット 2020-12-09 22.48.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/37d206b2-24a9-c1ec-d253-30c675e81669.png)

# どういう場面で有効化をオフにするのか？
レイアウト全体で入力不可のつもりでタッチキーボードの有効化をオフったのにカレンダーとか入力できてビビった。。。とびっくりする事案もありますが、これを入力不可のつもりで使うには無理があります。
では、入力できなくしてしまうタッチキーボードの有効化オフは、どういう場面で使われるのでしょうか？

駅の券売機や図書館の検索システムなどで、キーボードやテンキーをボタン式で表示して入力を補佐するようなケースでは、タッチキーボードの有効化をオフにするケースが多いです。
ただし、その場合はコントロールスタイルの設定に十分注意する必要があります。
上記のように、オフっていてもコントロールスタイルの設定にはオフが効かないからです。

ユーザに優しいようで優しくない作りにならないよう、テストは十分にしていきましょうね。
【ghqはもう要らない？】Finderタグのコマンドライン活用術

皆さん、Finder のタグ機能を活用していますか？
タグ機能って実は便利で、階層構造に依らずに同じ属性のディレクトリやファイルをまとめることができます。
例えば、 *お気に入り* タグでよく使うディレクトリをまとめたり、 *作業中* タグで進行中タスクのディレクトリをまとめることができます。

今回は *お気に入り* タグを例に、 コマンドラインからもタグを便利に使う方法を紹介します。
`ghq` でリポジトリを管理している人もこれを少し改良すれば、必要なくなるかも？？


# できること

- Finder とコマンドラインでタグを共有できます。
- `⌥ f` でお気に入りのディレクトリに移動できます。

## コマンドラインでの操作
- `lsfav` でお気に入りの一覧表示
- `addfav` でディレクトリやファイルのお気に入りに追加
- `rmfav` でお気に入り中のディレクトリやファイルの選択・削除
- `cdfav` or `⌥ f` でお気に入り中のディレクトリを選択・移動

![capture.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320683/b8ad850c-d2c4-1104-bf5d-532bfaca54a4.gif)


# 設定
`zsh` ユーザ向けの設定になっています。
ショートカットの部分以外は `bash` でも動くと思います（未検証）。


## 1. Finderの設定
1. Finderの **環境設定** から **タグ** を選択
2. `+` を押してタグを追加 ＆ 名前を **お気に入り** に変更
3. 好みに応じて **お気に入り** タグの色を変更
4. 不要なタグのチェックを外してサイドバーから削除
5. 下の **よく使うタグ** から、不要なタグをすべて消して **お気に入り** タグを追加

![Finder_TabSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320683/1d15aa4e-c891-72ea-a558-c34d04c02303.png)

## 2. 必要なツールのインストール

```sh
brew install fzf tag
```

- `fzf` はあいまい検索をするためのツールです。削除や移動でインタラクティブにディレクトリを選択するために使用します。
- `tag` はコマンドラインからFinderのタグを操作するためのツールです。


## 3. ターミナルの設定

`option` キーとの組み合わせで記号が入力されないように設定します。

### Terminal.app の場合
1. `環境設定` > `プロファイル` > `キーボード` を開く
2. `メタキーとしてOptionキーを使用` にチェック


### iTerm2 の場合
1. `Preferences...` > `Profiles` > `Keys` を開く
2. `Left Option (⌥) Key` と `Right Option (⌥) Key` を `Esc+` に変更


## 4. `~/.zshrc` の編集

`~/.zshrc` に以下を追記します。

```zsh:~/.zshrc
if (which fzf > /dev/null 2>&1) && (which tag > /dev/null 2>&1); then
    # タグの名前
    _favorite_tag="お気に入り"

    # 一覧表示
    function lsfav() {
        tag -f "${_favorite_tag}" $@
    }

    # 追加
    function addfav() {
        tag -a "${_favorite_tag}" $@
    }

    # 削除
    function rmfav() {
        lsfav "$@" | fzf -m --print0 | xargs -0 tag -r "${_favorite_tag}"
    }

    # 移動
    function cdfav() {
        cd $(lsfav -p | grep '/$' | fzf)
    }

    # option + f で移動
    function _cdfav_widget() {
        cdfav
        zle reset-prompt
    }
    zle -N _cdfav_widget
    bindkey '^[f' _cdfav_widget
fi
```
備忘録(ターミナル操作:Rails:応用)

##Railsでのターミナル使用例その２
####bundle updateコマンド
すでにあるGemのバージョンを新しく指定し直した場合など

```bash
# Gemfileを元にGemをインストールし、Gemfile.lockを更新する
% bundle update
```

####bundle installコマンド
Gemをインストールするコマンド
Gemをインストールした後はrails sをcontrol + Cで一度停止し、サーバーを再起動する必要がある

```bash
# Gemをインストール
% bundle install
```

####rails g devise:installコマンド
追加したdeviseというGemの「設定関連に使用するファイル」を自動で生成するコマンド
現時点では、deviseを追加したら、最初に1度実行しておく程度の認識で問題無いとのこと

```bash
# deviseの設定ファイルを作成
% rails g devise:install
```

####rails g deviseコマンド
deviseによるユーザー機能の対象を指定することで、モデルとマイグレーションの生成やルーティングの設定などをまとめて処理
実行すると、モデルが生成され、routes.rbにはdeviseに関連するパスが追加
例

```bash
# deviseコマンドでUserモデルを作成
% rails g devise user
```

####rails g devise:viewsコマンド
deviseに用意されたビューファイルをコピーし、app/viewsの配下に配置してくれるコマンド
HTMLを修正できるため、カスタマイズ可能になる

```bash
% rails g devise:views
```

####rails g migrationコマンド
すでに作成されたテーブルの内容を変更する際などに使用
rails g migration Addカラム名To追加先テーブル名 追加するカラム名:型とすることで、テーブルにカラムを追加する際に必要なコードが記述された状態で、マイグレーションが生成される
テーブル・カラム情報を変更したときは、ローカルサーバーを再起動する
例

```bash
# usersテーブルにnicknameカラムをstring型で追加するマイグレーションファイルを作成
% rails g migration AddNicknameToUsers nickname:string
```

Railsの応用カリキュラムで使用したターミナル操作
抜けている物があったらつど追加しよう
Laravel公式の開発環境 Laravel Sailがリリース開始

## 概要

この記事はLaravelの公式でDockerを用いた開発環境であるSailが提供されたのでその簡単な導入方法についてざっくり説明したものです。

公式のマニュアルでは既にSailを使用した新しいプロジェクトの作成方法について[詳しく記載](https://laravel.com/docs/8.x)されていますのでそちらを参照していただければ問題なく使用できるかと思います。

## インストールが必要なもの
- [Dockerデスクトップ](https://www.docker.com/products/docker-desktop)

Sailを使用したDocker開発環境を構築する際にはまず[Dockerデスクトップ](https://www.docker.com/products/docker-desktop)のインストールが必要です。リンク先よりご自身の環境に合わせてダウンロードを行ってください。

<img alt="スクリーンショット 2020-12-09 22.27.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453715/0a331a69-0454-a2e7-f30a-107c2ded3c56.png" />

あとは表示される手順に従ってセットアップすることで終了します。

Docker Desktopのセットアップが正常に完了すると、起動を行います。
起動されているかどうかはmacOSの場合以下のように`Docker Desktop is running`と表示されていれば完了しています。



<img width="400"alt="スクリーンショット 2020-12-09 22.32.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453715/c60b6801-f985-e62c-9a21-1bf39398a7d3.png" />


## 新規プロジェクト作成
今回はmacOSの環境でのみ解説していきます。公式のドキュメントには他の環境に対応した説明がありますのでそちらを参照してください。概ね流れは同じになります。

- [macOSを使用している人](https://laravel.com/docs/8.x#getting-started-on-macos)
- [Windowsを使用している人](https://laravel.com/docs/8.x#getting-started-on-windows)
- [Linuxを使用している人](https://laravel.com/docs/8.x#getting-started-on-linux)

それではプロジェクトを作成していきます。[従来のcomposerを使用したインストールの方法](https://laravel.com/docs/8.x#installation-via-composer)とは違いますので、**同一視しないように**注意してください。

---

今回は、デスクトップにexample-appディレクトリを作成し、その中にexample-appというプロジェクトディレクトリを作成していきます。

最終的な構成は以下の様になります。(ディレクトリツリーは割愛)

<img width="600" alt="スクリーンショット 2020-12-09 22.41.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453715/c99a14f2-e901-180d-cace-7256ecaa1e50.png" />

### Laravelアプリケーションの作成

Laravelアプリケーションの作成を行う際には、`curl -s https://laravel.build/<プロジェクト名> | bash`となります。今回のプロジェクト名は`example-app`ですので以下のコマンドを実行します。

```
$ curl -s https://laravel.build/example-app | bash
```

### LaravelSailを起動

Laravelアプリケーションのディレクトリは、コマンドを実行したディレクトリ内に作成されます。作成されたプロジェクトディレクトリ`example-app`に移動するため

```
$ cd example-app
```
を実行します。

Laravel SailからDockerを起動するため以下のコマンドを実行することでSailのアプリケーションコンテナがマシン上に構築されます。
最初にこのコマンドを実行すると処理が終わるまでに**数分かかる**際がありますが気長に待ってください。その後実行する際は初回と比べて高速に実行されます。

```
$ ./vendor/bin/sail up
```

このコマンドが成功すると、[http://localhost](http://localhost)でアクセスすることができます。

もしこの`Sail up`コマンドの入力が手間だと感じた場合は以下のコマンドより`sail up`で全ての入力の手間を省くことができます。

```
$ alias sail='bash vendor/bin/sail'
$ sail up
```

以上で完了となります。

## 今までの開発方法は？

今までの開発方法はLaravelから提供されたものはなく、各自がDockerを構築したりビルトインウェブサーバーを使用しているユーザがいましたがこれでより環境構築が手軽になりましたね。

Laravel Sailでは標準で`mysql`,`redis`,`mailhog`が提供されています。Laravelの初めてのアプリケーションでは十分だと思います。Dockerでは適時必要に応じてカスタマイズできるので是非行ってみてください。
使いそうで使わない？RailsでTemporary Tableを使う方法

##はじめに
[<font color="DeepPink">DMM WEBCAMP Advent Calendar 2020 :evergreen_tree:</font>](https://qiita.com/advent-calendar/2020/infratop)  12日目の担当をさせていただきます ！
DMM WEBCAMPメンターのSawaです ！


アプリ開発にてデータベース上で複数のテーブルを使用しているとき
**「このページだけ1つのテーブルにまとめたいなぁ...」**
そんなことを思ったことはないでしょうか？

そこで今回は
**使いそうで使わない、でも知っておいて損はない
『Temporary Table』**
についてまとめていきます:shamrock:


##Temporary Tableとは？
Railsを使用したwebアプリでは通常データベース(SQLite, MySQLなど)にデータをに保存していきます。
基本的にはあらかじめテーブルを作成しておき、そこにデータを新規作成、更新していきます。
一方でデータベースには**一時的にテーブルを作成**し、**必要な時のみテーブルを利用できる機能**を備えています。
その機能こそ今回ご紹介する**『Temporary Table』**なのです！


##Railsで使ってみる
Railsでデータベースを使用する際にはActiveRecordを使用します。
ActiveRecordについては[こちら](https://qiita.com/ryokky59/items/a1d0b4e86bacbd7ef6e8)の記事が分かりやすかったため参考にされるといいかと思います。

またRails5系からは```ActiveRecord::Base```を継承した```ApplicationRecord```を使うことができるため、本記事では```ApplicationRecord```を使用していきます。



###ApplicationRecordを使ったTemporary Tableの作成
今回はeventsテーブルをTemporary Tableとして作成することとします。
カラムとしてtitle, bodyカラムを用意してみました。

```ruby:temporary_tables_controller.rb
ApplicationRecord.connection.create_table('events', temporary: true, force: true) do |t|
    t.string :title
    t.text   :body
    t.timestamps
end
```

1行目ではApplicationRecordを呼び出し、データベースに接続をしてテーブルを作成しています。
SQLite、MySQL では```temporary: true```とするだけでtemporary tableが作れてしまいます:sunny:
(MySQLの場合、デフォルトとしてtemporary tableの使用権限がありません。MySQLにログインをし、権限の変更が必要になります。)

オプションとして```force: true```を使用していますが、これは既存のテーブルがある際に一度削除をして作り直すことを意味していますのでお忘れなく。

次に作成したTemporary TableをApplicationRecoredに紐づけていきます。
(イメージとしてはモデルを作る感じです)

```ruby:temporary_tables_controller.rb
Object.const_set('Event', Class.new(ApplicationRecord))
```

Object.const_setは動的にクラスを生成できるメソッドであり、ApplicationRecordを継承したEventクラスを作成しています。
これは

```terminal:terminal
$ rails g model Event
```

```ruby:event.rb
class Event < ApplicationRecord
end
```
を動的に処理しているのと同様の意味を持ちます。

以上の工程でTemporary TableがRailsで使えるようになります！

###実際に使ってみる
それでは実際にRailsでTemporary Tableを使ってみましょう！
今回は以下のようなコードを組んでみました。
Temporary Tableを作って、そこに新規データを入れていきます。

実行環境：Rails 5.2 ,　SQLite3

```ruby:temporary_tables_controller.rb
def event
    ApplicationRecord.connection.create_table('events', temporary: true, force: true) do |t|
        t.string :title
        t.text   :body
        t.timestamps
    end

    Object.const_set('Event', Class.new(ApplicationRecord))

    @events = Event.create([
        {title: "hoge-1", body: "fuga-1"},
        {title: "hoge-2", body: "fuga-2"},
        {title: "hoge-3", body: "fuga-3"}
        ])
end
```

```event.html.erb
<% @events.each do |event| %>
	<%= event.title %>
	<%= event.body %><br>
<% end %>
```
動作確認をしてみると以下のように表示されました。しっかりとTemporary Tableが作成されて、データが保存できていますね！

ターミナル：
![result2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918398/c0d0137e-8bce-0d50-07c5-71971b33d7df.png "ターミナル")
画面表示：
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918398/4069f84e-a200-224a-c72d-5a9c030de791.png "画面表示")

##さいごに
本日はTemporary Tableについてまとめてみました！いかがでしたでしょうか？

私は以前[simple calender](https://github.com/excid3/simple_calendar)を利用したアプリ開発を行っており、カレンダーに予定を入れるためにはモデルを1つにしなくてはなりませんでした...
その際にこのTempolary Tableが大活躍をしたのです！

知っておくとどこかで役に立つかもしれませんね:grin: