OmniAICreator/Qiita-1.07M huggingface dataset:
Spacemacs上のProofGeneralでEasyCryptを動かす

#はじめに
vimのキーバインドを使えるEmacsであるところのSpacemacsでProofGeneralを動かすためには、coqレイヤーを追加すればよい。しかし、

- EasyCrypt公式のインストールガイドはSpacemacsを考慮していない
- Spacemacs0.200.13ではcoqレイヤーを追加するのに2通りの方法があり、片方ではEasyCryptが動作しなかった

というわけで、EasyCrypt導入からSpacemacsでEasyCryptの証明ができるまでを順に辿っていく。
なお今回の方法では、システムにEasyCryptだけではなくCoqが入る。EasyCryptはCoq/SSReflectに大きく影響を受けているようなので、使えるようになって損はしないだろう。

…と大仰に書きましたが、結局のところほとんど公式サイトへのリンク集です。

# EasyCryptの導入
基本的にここを参考にすればいいです。
https://github.com/EasyCrypt/easycrypt

### 外部ソルバ導入
EasyCryptのインストールの際に必要なパッケージであるec-proversは、次のSMTソルバのためのメタパッケージである。

- Z3
- Alt-Ergo

EasyCryptではこれらに加えて、さらに強力なソルバであるCVC4が利用可能である。
ここから環境にあったバイナリをダウンロードし、パスの通っているところに配置すればよい。
https://cvc4.github.io/downloads.html

なお、追加後は```why3 config --detect```をもう一度実行する必要があることに注意。

# Coqインストール
以下を参考に、OPAM経由でインストールする[^1]。ここではCoqIDEは必要ない。
https://coq.inria.fr/opam-using.html

[^1]: SpacemacsのCoqレイヤーの依存関係のため。

# Spacemacs導入
### Spacemacsインストール
ここを参考にインストール。
Spacemacsの実態は.emacs.dと設定ファイルである.spacemacsなので、.emacs.dのバックアップを忘れずに。
https://github.com/syl20bnr/spacemacs/tree/master

### coqレイヤー追加
Spacemacsのcoqレイヤーを追加することで、ProofGeneralを使えるようにする。
.spacemacsの```dotspacemacs/user-init```に、`proof-site.el`へのパスを追記する。
OPAMでインストールした場合、```$OPAM_SWITCH_PREFIX/share/proof-general/generic/proof-site.el```になるはず。

```plaintext
(defun dotspacemacs/user-init ()
  (setq proof-general-path "/your/local/PG/generic/proof-site"))
```
ここを参考に導入。
https://github.com/tchajed/spacemacs-coq

coqといいつつ、.vファイルだけではなく.ecファイルのシンタックスハイライトもしてくれるようになる[^2]。

ちなみにこちらの方法ではProofGeneralがCoqだけしか認識せず、EasyCryptが証明できないため注意。
https://gist.github.com/mtrsk/10a03927490f9edb1f7a2cd72792b0ec

[^2]: 一方でProofGeneralは.ecファイルに対して本当にひどいオートインデントをかけてくる。どうすればうまくいくのか誰か教えてください。

---
うまく動くかテストしてみる。

```test.ec
require import Bool DBool.

module A = {
  proc main() = {
    var x;
    x <$ {0,1};
    x <- x ^^ x;
    return x;
  }
}.

module B = {
  proc main() = {
    var y <- false;
    return y;
  }
}.

lemma test &m :
    Pr[A.main() @ &m : res] = Pr[B.main() @ &m : res].
    proof. byequiv=>//.
    proc. by auto; smt.
qed.
```
これをSpacemacsで読み込んでProofGeneralが起動し、きちんと証明できれば勝ち。
アンチパターンで理解を深めるオブジェクト指向設計

## 前置き

TLでOOPに関して盛り上がっていたのでclass設計に関してまとめてみました。
長くなったのでクラス間の関係に関しては[こっち](https://qiita.com/ksilverwall/items/d76847b3018234c12451)で記載しています。

## オブジェクト指向設計とは

現実世界と紐付けた説明をよく見かけるのですが、そこまで壮大に考える必要はないです。
二次元に生きている大きなお友だちも安心してください。そしてリア充は爆発しろ。

動的に生成される変数に対するアクセス手段を制限し、コード全体の見通しを良くする設計技法です。
この変数とそれにアクセスできる関数をパック[^1]したものをオブジェクトと呼ぶと、オブジェクト間の呼び出し関係でコードが書けるというステキナイスな設計しやすさ。

ついでに用語まとめます。
<img width="803" alt="スクリーンショット 2020-02-02 15.46.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184815/c8d10928-bfa6-0264-3a32-af97319f4a6f.png">

### オブジェクト（インスタンス）

変数とそれにアクセスする関数をパックしたもの。
後述のクラスとの線引が曖昧なので特に実際に確保されたオブジェクトを指してインスタンスと呼ばれたりする。

### フィールド

パックされた変数。
複数の場合もあるが、大量にある場合は設計をミスっている可能性が高い。
メソッドを介してのみアクセスが可能[^2]である。
別名： メンバ変数、プロパティ[^3]

### メソッド

パックされた関数。
読むだけ、セットするだけはgetter/setterと呼ばれて特別扱いされたりする。
別名： メンバ関数

### メンバ

オブジェクトに含まれる連中の総称。

### クラス

オブジェクトのメンバ構成を記載したもの。
型解決が動的か静的かでだいぶ概念が違うので混乱の元[^4]。
静的型付け言語では型と同一視される。
オブジェクトはクラスを元に生成される。

### コンストラクタ／デストラクタ

インスタンスの生成時と破棄時に呼び出される関数。
最近の言語はGCでいい感じに破棄してくれるのでデストラクタは仕様になかったりする。
オブジェクト成立期間の前後に呼び出されるのでメソッドではない。
でもこいつもクラスについでに書いちゃうから混同しがち。困ったものだよHAHAHA。

### クラス変数／クラス関数／内部クラス

すべてのオブジェクトが共有して使う連中。
オブジェクト構成要素でも無いのにクラスに入り込んでくる害悪。
クラスと名前空間を混同すると増殖しがち。
定数の宣言とアルゴリズム関数ぐらいに使用を留めないとOOPが崩壊する。

## クラス設計のアンチパターン

前置きはここまでとして、実務でぶつかるイケてないコードと解決策を上げていきます。
思想はわかっても実務ではよくわからないまま書いたり、突貫の増改築でクラスが腐敗していきます。

### デブクラス

メンバがやたらあるクラスです。
コード変更に際してクラスの拡張で対応を繰り返していると気づいたら超巨大クラスが爆誕しています。
大艦巨砲主義は死亡フラグです。

デブクラスは基本的にフィールドが多すぎます。
指針としてはフィールドをグループ分けしてその単位でクラスを分割します。
はーい二人組作って〜

こんな手順でリファクタかけることが多いです。

1. 多数のフィールドにアクセスしているメソッドを分割する
2. 各フィールドとメソッドの関係性をまとめてグルーピングする
3. 各グループを別クラスのオブジェクトとしてまとめる。

### フィールドが外部から変更されている

はい死刑。OOPとはなんだったのか。
メソッド経由するように呼び出し元変えてアクセッサをPrivate制限かけていきましょう。
たまにメソッドがなくフィールド全部パブリックのクラスがありますが、コレはクラスというより構造体ですね。
構造体用の構文がない言語のこの用法に限ってはありかなと思います。

### コンストラクタがでかい

コンストラクタ＝初期化処理と思って各種チェック機構を延々書いて、あまつさえ内部で例外投げてたりします。
やめましょう。
コンストラクタが行うのは**オブジェクトの初期化処理**であってシステムの初期化ではありません。

システムの初期化処理は初期化処理を担うクラスを作ってそいつのメソッドにやらせましょう。

### メソッドがでかい

関数分割の要領で分解してください。
アクセスするフィールドの種別単位で分けるといい感じになります。

### ニートメソッド

親クラスや自クラスのメソッド呼び出してるだけの一行メソッド。
呼び出し元を変更して消しましょう。

### 内部クラスを別クラスで使用している

内部クラスの扱いは難しい。
オブジェクトのメソッドに渡す引数が超でかくなってしまった際の解決策として、内部クラスのオブジェクトを渡すという使い方が考えられる。
自分にはそれ以外思いつかない。
この場合生成だけは別クラスが担う。

```js
const a = new ClassA()
a.methodA(ClassA.InnerClass(x, y, z))
```

### クラス変数を定数以外で使用している

やめよう。お前それグローバル変数やぞ。
別クラスのフィールドに引っ越してシステムの最初でオブジェクト生成して引き回してください。

### クラス関数を外部から使用している

お前そこにいる意味ないじゃん。
グローバルスコープの関数にしてあげてください。
Javaの場合は関数ベタがきできないのでMathクラスみたいに関数集約クラス作って仲間に入れてあげてください。

### コンストラクタで別クラスのコンストラクタを呼んでいる

コレは少し毛色が違ってクラス間の密結合の話になります。
長くなるので`Dependency Injection`でググってください。

外部で生成してコンストラクタの引数として渡しましょう。



[^1]: カプセル化とか言ったりします。ドヤ顔で使おう。
[^2]: 読むだけならいいじゃんという風潮。まぁ実際問題になるのは更新だしアリな考え方。
[^3]: 『プロパティ』の定義はぶれがちなのであまり使うのはオススメしない。詳細はC#のプロパティ参照。
[^4]: 動的型付け言語だと特にフィールド宣言周りがゆるゆる。静的から入ると衝撃を受ける。
IPアドレスとかMacアドレスとかPortとか良くわかってないけど生きてる人に言いたいこと

### 結論

自宅にRasPiでSoftEther VPNのサーバー立てよう。
それで、スマホから接続して遊ぼう。

自宅のネット環境で出来ない人は、VPS借りてやろう。

### もっと遊びたい人

もっと色々遊びたい人は、MikroTikのルーター買って遊ぼう。
Ruby on Railsの静的解析について調べてわかったこと

##静的解析ツールの種類
###Rubocop
一番使われてるっぽい静的解析ツール。ほぼ必須？
プロジェクトルートに`.rubocop.yml`を作成して、細かい設定をしていく。
rubocopをグローバルインストールした場合には、プロジェクトルートでなくホームディレクトリに作成する？

###Brakeman
セキュリティ方面の解析に特化したもの。rubocopと組み合わせて使っている事例も見つかった。
コミット前にrubocopを走らせ、push前にbrakemanを走らせているとのこと。
[ハッピーなチーム開発を実現するためにRubyの静的コード解析を自動化した話](https://blog.spacemarket.com/code/rubocop-brakeman/)

###Ruby Critic
解析結果をブラウザ上で確認することができます。
コントローラー毎の複雑度、重複した記述なども指摘してくれる見たいです。
Rubocopと併用するのもアリ、的な記事が見つかりました。
[Railsで便利なコード静的解析Gem rubycritic](https://qiita.com/btamari-gy/items/ad51bffaa2f00cddbabe)
Commit前に自動実行とかではなく、気になった時に定期的に実行するのが良さそう。

###Reek
間違いではないけど、なんとなく嫌な感じがする書き方を検出してくれるツール。
ネストが深すぎるとか、1つのメソッドに命令が多すぎるとか。
他のツールでも同じようなことできそうだし、設定もデフォルトだと使いにくいらしいから、わざわざ導入しなくても良さそうな気がしてる。使ったことないけど。

###Rails Best Practice
[rails-bestpractices.com](rails-bestpractices.com)という、Railsのベストプラクティス集を集めたサイトで紹介されているルールに沿っているかどうかを判別してくれるツール。
結構良さそう。

##その他のツール
###over commit
Commit前やPush前などに静的解析ツールを走らせてくれる
走らせるツールやタイミングは`.overcommit.yml`に記述する

##使い方
gemをインストールして、コマンドラインで実行するのが基本っぽい。

`gem install rubocop`とするとグローバルインストールされて、Gemfileに書いて`bundle install`するとそのプロジェクトだけにインストールされる。

`.◯◯.yml`的なファイルをプロジェクトルートに作成して、細かい設定をする場合が多い。

##vscodeとの連携
`settings.json`にゴニョゴニョ書いていくと、静的解析ツールとエディタをいい感じに連携できる？
ファイル保存時にrubocopが走ったり、`.rubocop.yml`に書いてあるルールに従って、違反している記述に下線を引いたりしてくれると嬉しい。

##心構え
>重要な点は、 解析ツールに合わせたコードを書くのでは無く、プロジェクトに必要とされるコードを素早く書く という事だと思います。ツールの結果に合わせてコードを曲げる(読みにくくしたり、リファクタリングの際にエンバグしたり)のは本末転倒と言えるでしょう。

by [Sider Blog
](https://blog-ja.sideci.com/entry/rubocop-vs-rails_best_practices)

##今後の方針など
基本的に1人で開発をしているので、自己流の変なクセをつけない為にも静的解析は大切だと思いました。
上記のツールをすべて使っている人はあまり多くないようで、最低限Rubocopだけは使い、あとは好みで1、2個のツールを組み合わせるパターンが多そうな印象でした。

Rubocop、Brakeman、Rails Best Practicesの3つの静的解析ツールをovercommitでコントロールする形から試してみようかと思います。

ファイルの保存前にRubocop、Commit前にRails Best Practicesを走らせ、Push前にBrakemanを走らせる感じかな。

どのツールもデフォルトの設定だとルールが厳しすぎるみたいなので、慣れるまで色々大変そうですが、うまく活用して行きたいです。
dein.vimを使ってみる

# dein.vimとは
vimのプラグイン管理ツール．NEOBUNDLEの後継版（？）
プラグインを入れようと思って色々と調べていたら，これからはdeinらしいので使ってみることにした．

[dein.vim](https://github.com/Shougo/dein.vim)
> Dein.vim is a dark powered Vim/Neovim plugin manager.

# インストール
`installer.sh`の実行権限を自分に与えたほうがいい場合も．

```console
# インストール先は任意．ここでは~/.vim/bundlesとする

$ mkdir ~/.vim/bundles
$ cd ~/.vim/bundles
$ curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
$ sh ./installer.sh ~/.vim/bundle
```
最後のコマンド後に表示される内容を`~/.vimrc`に追記する．

```~/.vimrc
"dein Scripts-----------------------------
if &compatible
  set nocompatible               " Be iMproved
endif

" Required:
set runtimepath+=~/.vim/bundles/repos/github.com/Shougo/dein.vim

" Required:
if dein#load_state('~/.vim/bundles')
  call dein#begin('~/.vim/bundles')

  " Let dein manage dein
  " Required:
  call dein#add('~/.vim/bundles/repos/github.com/Shougo/dein.vim')

  " Add or remove your plugins here like this:
  "call dein#add('Shougo/neosnippet.vim')
  "call dein#add('Shougo/neosnippet-snippets')

  " NERDTreeを使用するために以下を追記
  call dein#add('scrooloose/nerdtree')

  " Required:
  call dein#end()
  call dein#save_state()
endif

" Required:
filetype plugin indent on
syntax enable

"If you want to install not installed plugins on startup.
if dein#check_install()
  call dein#install()
endif

"End dein Scripts-------------------------

```

# 使用方法
vimを開くと，必要なプラグインがインストールされる（？）
ノーマルモードで`:NERDTreeToggle`と入力することでファイルツリーを展開できる

## より使いやすく
```~/.vimrc
nnoremap <C-t> :NERDTreeToggle<CR>
```
などと書いておくと，vimを開いているときにわざわざ`:NERDTreeToggle`を入力せずとも`Ctrl + t`で代用できる．

### mapの種類
- `map a b`
    - aをbにマッピング．入れ子可能．
- `noremap a b`
    - aをbにマッピング．入れ子不可．再帰的にコマンドを実行．
- `nnoremap a b`
    - aをbにマッピング．入れ子不可．再帰的にコマンドを実行しない．

普通に使う分には`nnoremap`を使っておこう．

## 参考
https://cocopon.me/blog/2013/10/vim-map-noremap/
インフラ設計における重要な観点

|観点|内容|具体的指標例|
|:-:|:-:|:-:|
|可用性|サービスを継続的に利用できるか|稼働率,目標復旧時間,災害対策|
|性能・拡張性|システムの性能が十分で、将来的に拡張しやすいか|性能目標,拡張性|
|運用・保守性|運用と保守がしやすいか|運用時間,バックアップ,運用監視,メンテナンス|
|セキュリティ|情報が安全に守られているか|資産の公開範囲,ガイドライン,情報漏洩対策|
|移行性|現行システムが他のシステムに移行しやすいか|移行方式の規定,設備・データ,移行スケジュール|
VSコードの便利な拡張機能+設定+ショートカットキー

# はじめに
先日友人とVSコードの拡張機能をシェアして有益だったのでまとめておきます
たくさん書いてもごちゃごちゃすると思ったので厳選しました
良さげなのがあったら使ってみてください！

# 使用環境
- macOS Catalina
- Rails

他の言語でも使えるものが多いとは思いますが、確認したのはrailsのみです

## 便利な拡張機能6選

### 1. endwise
これかなりオススメです
いちいちend書くのめんどくさいなーって思ってたので革命的でした
[![Image from Gyazo](https://i.gyazo.com/8f778e462e6afd40c684e5d7f894c194.gif)](https://gyazo.com/8f778e462e6afd40c684e5d7f894c194)

### 2. indent-rainbow
こんな感じで各インデントに色がつくのでインデントが揃えやすくなります。
railsでhamlを使ってる人に特にオススメ
[![Image from Gyazo](https://i.gyazo.com/53bd9480fedf674311911692cc538725.png)](https://gyazo.com/53bd9480fedf674311911692cc538725)

### 3. zenkaku
すでに設定している人も多いとは思いますが、一応紹介します
全角スペース使ってるとエラーの原因になりますので、見やすくしましょう

[![Image from Gyazo](https://i.gyazo.com/d833f1bfa2abf0431093354cc27e4e3a.png)](https://gyazo.com/d833f1bfa2abf0431093354cc27e4e3a)

### 4. Bracket Pair Colorizer
対応するカッコを色で識別してくれる
sassファイルやjsファイルで大活躍ですね
[![Image from Gyazo](https://i.gyazo.com/c418d545c7e0a49aec82dd786e36f336.png)](https://gyazo.com/c418d545c7e0a49aec82dd786e36f336)

### 5. Regex Previewer
正規表現をチェックしてくれます
[![Image from Gyazo](https://i.gyazo.com/e196eeff3afbfec3d03760629f5f1622.gif)](https://gyazo.com/e196eeff3afbfec3d03760629f5f1622)


### 6. vscode-icons
作業効率とは関係ないですが、アイコンがお洒落になってオススメです
アイコンを変える拡張機能は色々あるみたいなので気になる方は調べてみてください
個人的にはこの拡張機能が一番rubyが輝いてたのでこれにしてます笑

[![Image from Gyazo](https://i.gyazo.com/b668835bc5492624a9d5589c4034e1d0.png)](https://gyazo.com/b668835bc5492624a9d5589c4034e1d0)


## HTMLをよく使う人向け
普段hamlで書いてるのであまり使うことはありませんがHTMLをよく使う人にはこちらもオススメです

### 1. Live Server
リアルタイムでHTMLの記述を反映してくれる
作業効率アップですね
[![Image from Gyazo](https://i.gyazo.com/0874269f9f1b257fe00f28ec50ffe95d.gif)](https://gyazo.com/0874269f9f1b257fe00f28ec50ffe95d)

### 2. HTML Snippets
HTMLタグが簡単に作れます
[![Image from Gyazo](https://i.gyazo.com/cec2542c755663f1a0d41ca1a3cec3c8.gif)](https://gyazo.com/cec2542c755663f1a0d41ca1a3cec3c8)

### 3. Auto Rename Tag
タグの名前を変えた際に閉じタグの名前も勝手に変えてくれます
[![Image from Gyazo](https://i.gyazo.com/b3e62d726e26ef3eb9d18860f295b960.gif)](https://gyazo.com/b3e62d726e26ef3eb9d18860f295b960)


## 設定編
いずれも左下の設定マークから設定可能

#### 1. 折り返し表示
1行に収まらないコードを折り返して表示してくれる
Editor: Word Wrapをonにする

#### 2. ファイルを常に新規タブで開く
デフォルト設定だとサイドバーのファイルをクリックした際、中身に変更を加えないと古いタブが新しいタブにどんどん上書きされて表示されます

設定からWorkbench > Editor: Enable Previewのチェックを外すと常に新規タブで開くようになります

最初めっちゃ便利！と思ってたんですが、気付いたらファイルだらけでわけわからんってなったので僕にはあまり向いてませんでした笑
お好みでどうぞ！


## ショートカットキー編
### 1. 直前で閉じたタブを開き直す
command + Shift + T

これ地味にめっちゃ便利

### 2. ファイル名検索
command + P

素早く使えると作業効率アップ

### 3. 複数行インデント移動
複数行選択した後、
右に移動: Tab
左に移動: Shift + Tab


# おわりに
まだまだ色々あるとは思いますが、とりあえずこの辺使いこなせると作業効率アップすると思います

間違いやこれめっちゃオススメ！みたいなのあったら教えていただけると嬉しいです
vsCodeのインテリセンスについて

VScodeのインテリセンスについて



本来<template>タグの中でh1やpやtと入力すると
h1
h2
h3
h4
…
のようなインテリセンス機能が働いて「候補リスト」が現れるはずなのだが
まったくそれが反応せず。白い色で　h や　p や　tと表示されるだけ。
いちいち入力して作業しようかと悩んでいた。
scriptタグの中では機能している様に見えるのだが。
原因はおそらく単純なtemplate内のソースの記述間違い。
npm run devするとエラーになったのでtemplate内をよく見るとタグなどが一部間違っていた。それを修正して再度npm run devで解決しました。
JVSコーパスのラベルを作った

作成したものがこちらです。
https://github.com/yuru-camper/jvs_label

以下、readmeをコピペ

このラベルは、すべて[JVSコーパス](https://sites.google.com/site/shinnosuketakamichi/research-topics/jvs_corpus)のparallel100の一文目のみを聞いて作成したものです。
ラベルの項目はこちらの[PDF](https://lab.synergy-marketing.co.jp/wpsys/wp-content/uploads/2014/03/201403_asj.pdf)を参考にしています。

現在対応しているラベルは以下の12項目です。

> 男＿女
年齢
澄＿濁
高さ
落ち着き
張り
繊細
アニメ
独特
深み
かすれ
甲高い

1～100は対応する話者、101～103はラベルの上限、下限、基準値を表しています。
実験データのカラー2D分布図の作り方

実験やフィールドワークで得た、2D座標(x,y)とdataの組から
2D分布図をつくりたい。

#### サンプルデータ
```python3.6.py
import numpy as np

n    = 100                            #　100ポイントのデータ
x    = np.random.rand(n)              # x座標
y    = np.random.rand(n)              # y座標
data = np.sin( x * np.pi + y * np.pi) # 例えばsinデータとします
```

|x|y|data|
|:-----------:|:------------:|:------------:|
|0.414107|	0.258962|	0.855795|
|0.746765|	0.106237|	0.445567|
|0.886290|	0.200612|	-0.269632|
|...|...|...
このようなデータとします。
格子点上のデータでもよい

#### 散布図を使った例
散布図の各点の色をデータに対応させます。
格子点上のデータだとマーカーを四角にするときれいに見えるかもしれない。

```python3.6.py
import matplotlib.pyplot as plt

plt.scatter(x,y,c=data,s=400,marker="s")
plt.xlabel("x")
plt.ylabel("y")
plt.colorbar()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538705/7651d4f1-f98b-fc41-a40b-acad36bbba47.png)

#### pcolorを使った例
格子点上にデータがあればnp.meshgridがいい感じに使えるかもしれないが、
そうでないときはmeshgrid上にデータを補完してpcolorで描画する。
補完には　scipy.interpolate の [Rbf](https://docs.scipy.org/doc/scipy/reference/generated/scipy.interpolate.Rbf.html)　を使う

```python3.6.py
from scipy.interpolate import Rbf

def rbf_plot( x, y, z,
              xlim=[],ylim=[],epsilon=2, n=100,
              markersize= 200, file = ""
            ):
    # x          : x座標        numpy.array
    # y          : y座標        numpy.array
    # z          : データ       numpy.array
    # xlim       : 図のx軸範囲   list / numpy.array
    # ylim       : 図のy軸範囲   list / numpy.array
    # epsilon    : Rbfのパラメタ int
    # n          : 補完点数      int
    # markersize : 散布図マーカーのサイズ int
    # file       : 保存図のファイル名　   str

    if not xlim: xlim=[np.min(x),np.max(x)]
    if not ylim: ylim=[np.min(y),np.max(y)] 
    
    tx = np.linspace(*xlim,n)
    ty = np.linspace(*ylim,n)
    XI, YI = np.meshgrid(tx, ty)
    rbf = Rbf(x, y, z, epsilon=epsilon) 
    ZI = rbf(XI, YI)

    plt.subplot(1, 1, 1)
    plt.pcolor(XI, YI, ZI)
    plt.scatter(x, y, c=z, s=markersize,edgecolor="white")
    plt.title('RBF interpolation - multiquadrics')
    plt.xlim(xlim)
    plt.ylim(ylim)
    plt.colorbar()
    if file: plt.savefig(file)
    plt.show()

#実行
rbf_plot(x,y,data,xlim=[0,1],ylim=[0,1],file="output.png")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538705/4db063f2-0193-7873-9595-1c398d2ce1ea.png)

注意：分布が滑らかであるという確証があるときだけ使うこと。

```python3.6.py
rbf_plot(x,y,data,
         xlim=[-4,4],ylim=[-4,4],
         markersize=0,file="output.png"
        )
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538705/6caf2182-f684-0cc4-efc7-9e9f553830d9.png)
当然データの座標より広い範囲を指定してはいけない
ipv4とipv6のデュアルスタックでMyDNS.JPのDDNSを自動更新

# 背景（は読み飛ばすもの）
僕は6年ほど前から自宅サーバーを運用しています．サーバーなので当然外部からの接続がしたくなるわけですが，自宅のサーバーなので，費用の問題であったり，そもそも利用しているプロバイダの制約でグローバルIPが固定できないことがほとんどではないでしょうか．
僕の自宅はNUROを引いていて，NUROだと固定IPを提供していないので（別料金でも）そもそも固定するという選択肢をとることが出来ません．そこで，DDNSを[ieserver.net](http://ieserver.net/)さんで登録して使用させて頂いていたのですが，少し前に存続の危機とのことで，別のDDNSサービスの検討を始めました．結局ieserver.netさんは存続可能とのことだったのですが，個人の有志のサービスとのことなので，これを機に商業的にやっている（恐らく）[MyDNS.JP](https://www.mydns.jp)さんに鞍替えさせてもらうことにしました．
DDNSは動的IPを特定のドメインに紐付けるわけですが，IPが変更になる度に手動で更新するわけにはいかないので自動化が必要になります．この更新は規格化されている物では無いので，それぞれのサービスで提供されている更新方法に従う必要があります．そこで今回はMyDNS.JPさんでのIP更新を自動化するスクリプトを作ったので，その紹介をしたいと思います．
まぁスクリプトと言ってもたかだか数行なので作りましたって言うほどのものでもないわけですが・・・

# DDNS-updater
## リポジトリ
https://github.com/takano20771/DDNS-updater

## 使い方
- `update.sh`と同じディレクトリにlogin.infoというファイルを作ります．
- `login.info`の中にMyDNS.JPで発行されたMasterIDとPasswordを書き込みます．

  ```login.info
  {MasterID}_{Password}
  ```
- `update.sh`をクーロンに登録

  ```
  */10 * * * * /opt/scripts/ddns-update/update.sh
  ```
  （これは10分ごとに更新する場合）

# 解説
MyDNS.JPさんでは，専用のwebページにログイン情報付きでアクセスすることで，ログインしたアカウントに紐付くドメインにリクエスト元のIPを新しいIPとして紐付けを行うようです．ここで問題となるのが，MyDNS.JPのHow toに書いてあるリクエストURLだとIPv4とIPv6のどちらかしか登録が出来ません．なぜならリクエストするときはIPv4かIPv6のどちらかでセッションを張るからですね．

サーバーをIPv4とIPv6の両対応にさせたいときは下記のURLにアクセスする必要があります．URLを見る限りそれぞれどちらかのみに対応したサーバーのようですね．
- https://{MasterID}:{Password}@ipv4.mydomain.jp/login.html
- https://{MasterID}:{Password}@ipv6.mydomain.jp/login.html

また，MyDNS.JPのHow toでは，wgetコマンドを使用していますが，wgetコマンドは対象のページをローカルに保存してしまうので，スクリプトの実行時にゴミが出来てしまいます．なので，wgetではなくcurlを使うようにしてみました．
Warning: PATH set to RVM ruby but GEM_HOME and/or GEM_PATH not set, see 

vi ~/.bashrcをターミナルに入力
開かれた.bashrcファイルの最終行に以下を追加

export PATH=$PATH':/path/to/add'
export GEM_HOME=$HOME/.gem
export GEM_PATH=$HOME/.gem

CTRL + C でコマンドモードへ(Type : quit < Enter > to exit vimが表示される)

ZZを入力(上書き保存して終了のコマンド)

Cloud9を再起動
Amazon Linux 2 で syslog への tomcat メッセージ出力を抑止

# はじめに

amazon-linux-extras よりインストールした tomcat は systemd にてサービスが管理されます。
systemd はデフォルトで systemd-journald にログを出力していますが、この影響で syslog ( /var/log/messages ) に tomcat のメッセージが大量に出力されます。
syslog には tomcat のメッセージを出力したくないため、これを抑止します。

# 設定手順
## tomcat 8.5 インストール
amazon-linux-extras より tomcat8.5 をインストール。

```shell

$ sudo amazon-linux-extras install tomcat8.5
```

## systemd オーバーライド設定 
下記ディレクトリとファイルを作成し、デーモンを再起動。

```shell

$ sudo mkdir /etc/systemd/system/tomcat.service.d
$ sudo vi /etc/systemd/system/tomcat.service.d/override.conf
$ sudo systemctl daemon-reload
$ sudo systemctl restart tomcat.service
```

```override.conf
[Service]
StandardOutput=none
```

StandardOutput のデフォルトは StandardOutput=journal のため、 tomcat の起動設定を StandardOutput=none でオーバーライドします。


設定方法は以上です。

## 注意事項
/usr/lib/systemd/system/tomcat.service を編集し StandardOutput=none を追記しても設定反映されますが、 yum update でパッケージを更新すると設定が初期化されてしまいます。
恒久的に設定したい場合は、上記のように /etc/systemd/system/tomcat.service.d 配下にオーバライド設定を作成しましょう。
C#勉強法

# 目的
- プログラミング初心者向けにC#を勉強する方法を書籍を中心に説明
- アフィリエイトでは無いのでご安心を

# 方針
- [こちら](https://qiita.com/imasaaki/items/9803029225ef17137d4f)と同じ

# 手順
- １．まずはC#を全体的に説明している本を読む
    - .NetFrameworkもC#も進化が早いです。古い本は避けて、なるべく新しい本で勉強しましょう。
- ２．ざっと読んだタイミングで、自分で作りたいアプリを書き始める、わからないところはwebや読んだ参考書で調べて、なるべくメモを残しておく（備忘録的な記事にしてもよい）
- ３．ある程度アプリが完成したところで、中級者向けの本を読む、特にEffective本、読みながらリファクタリングしていく

# 参考書籍
- 初心者向け
    - 全体把握用
        - www.amazon.co.jp/dp/4798153826
            - 初心者向けですが、内容網羅しています。ただ、この手の本はページ数が多いです。興味無い・理解進まない箇所は時間の無駄なのでいったん飛ばすぐらいでちょうどいいかと思います。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/fa630218-adb4-25c2-fdec-2ced5d71c296.png)

- 中級者向け
    - Effective本（C#のベストプラクティス集）
        - www.amazon.co.jp/dp/4798153869
            - 簡単ではないですが、ぜひ読み切ってほしい。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/599da772-96d5-098d-fc09-f033a62e09d1.png)
        - www.amazon.co.jp/dp/4798153982
            - ぜひここまで辿りついてほしい。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/e0032fb1-1c7a-427d-b70c-edb662c0d71e.png)
    - その他
        - www.amazon.co.jp/dp/4774138622
            - Effective本より簡単で分かりやすいので、こちらを先に読んだほうがよさそうです。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/a5433216-481e-956e-1682-7af5955539b7.png)
       - www.amazon.co.jp/dp/4774158283
            - Task系で知識補強したい方向け。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/20212047-cece-0b6c-08c2-605f0de9992b.png)
        - www.amazon.co.jp/dp/4774187585
            - 実は読めていないのですが、Amazonのレビューがよく、ぜひいつか読みたいと思ったので、ここに載せておきます。Effective本より分かりやすいのかもしれません。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/c30f1bbc-e993-85fa-5df2-0de0e7b80cd3.png)
- 作法、オブジェクト指向、ソフトウェアエンジニアの心得
    - [こちら](https://qiita.com/imasaaki/items/9803029225ef17137d4f)と同じ
- WPF, MVVM
    - 日英含めていい本が無いです、webサイトで勉強しましょう。
        - ＠ITさんの記事がよくまとまっています。
            - https://www.atmarkit.co.jp/ait/articles/1005/14/news105.html
- ASP.NET
    - 詳しくないので紹介できません。。
- 上級者
    - 最適化
        - www.amazon.co.jp/dp/4798131792
            - かなりマニアックですが、少しでも処理速度を早くしたい（C++使ったほうがいいかも）、.NETについて詳しくなりたい、という方が読むにはいい本だと思います。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/ed2d281e-6efe-99cf-1108-8b293ac930a3.png)
Xcode+Swiftでの、macOSのapp作成時のメモ


Xcode+Swiftでの、macOSのapp作成時のメモ

macOS Catalina 10.15.2
Xcode 10.2.1 10E1001
Swift 5.0.1


１）どこでもフォルダやファイルをほいほい作れないのはSandbox機能がオフでないから
<img width="776" alt="スクリーンショット 2020-02-02 15.38.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/d2c90edd-a84d-8c51-a85d-86fa4c5c408f.png">


２）書き出したアプリのOSのバージョンを指定
<img width="741" alt="スクリーンショット 2020-02-02 15.39.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/fff816f9-235f-b923-6ef4-a3053034d9e3.png">

３）フォームのタイトルはここ
<img width="903" alt="スクリーンショット 2020-02-08 9.28.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/00a3be16-3f28-ea36-a342-784c69421c7e.png">

４）バツボタンで、アプリをクローズする

AppDelegate.swift

```
func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
    return true
}
```

<img width="933" alt="スクリーンショット 2020-02-08 15.26.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/bbd6c5a5-0334-c0e5-37ed-63ebf18a0021.png">


５）ウィンドウの初期表示位置を決める
<img width="1011" alt="スクリーンショット 2020-02-15 13.56.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/2a30189c-de57-cc28-4008-585c7775ada2.png">


６）アプリ自体の、アイコンを設定する
<img width="658" alt="スクリーンショット 2020-02-15 13.53.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/d9bdad4e-5081-8414-74ad-e5caf17e00e8.png">


７）ファインダー／Finder で、指定フォルダを開く

```
let theWorkspace : NSWorkspace = NSWorkspace.shared
theWorkspace.openFile(folderPATH)
```

８）メッセージボックスを出す

```
  let alert = NSAlert()
  alert.messageText = "メッセージはここ"
  alert.runModal()
```
さくらのレンタルサーバにLaravelアプリをデプロイしたときのメモ

**Laravel** で作られたWebアプリケーションを**さくらのレンタルサーバ【スタンダード】**にデプロイする機会があったのでメモ。

**レンタルサーバ（共用サーバ）**と **VPS（仮想専用サーバ）**のコストパフォーマンスの差が縮まりつつある今日、レンタルサーバを新規に契約する人も減っているので、このノウハウに需要はあまり無いかもしれないが誰かの参考になれば。

# 実行環境

|ソフトウェア   |バージョン |
|:--------|:------------------------|
|OS       |FreeBSD 11.2-RELEASE-p14 |
|Apache   |2.4.41                   |
|MySQL    |5.7.27                   |
|PHP      |7.3.12                   |
|Laravel  |5.6.5 （Laravel6に移行するかは目下検討中）   |

# Web公開フォルダ
さくらのサーバコントロールパネルにおいて、次のように設定されているものとする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/47fb58f9-4ec9-a25e-6c07-7ab30edbe9d5.png)
なお、2019年3月に、サーバコントロールパネルのデザインリニューアルがあった。上図は新コントロールパネルのもの。

# 構築手順
## ホームディレクトリの下に専用ディレクトリを作成
共用サーバなので、自由がきくのは自分のホームディレクトリの下のみである。

```
cd ~
mkdir bin

curl -sS https://getcomposer.org/installer | php -- --install-dir=bin --filename=composer
chmod 755 bin/composer
mkdir laravel
```

## FTP転送
ローカル環境にあるLaravelプロジェクトルートごと、`~/laravel`の下にアップロードする。

## パーミッション設定とシンボリックリンク作成
`PROJECT_ROOT`はLaravelのアプリケーション名に読み替えて欲しい。

```
chmod -R 777 ~/laravel/PROJECT_ROOT/storage
chmod -R 777 ~/laravel/PROJECT_ROOT/bootstrap/cache

ln -s ~/laravel/PROJECT_ROOT/public ~/www/webpath
```

## htaccess の編集

```apache:~/www/webpath/.htaccess
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On
    RewriteBase /

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # SSL Redirect
    RewriteCond %{HTTPS} off
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>
```

パーミッション設定。

```
chmod 604 ~/www/webpath/.htaccess
```

## Laravel の修正
Laravelのエントリポイントとなる`index.php`の下記２行を修正。

```php:~/laravel/PROJECT_ROOT/public/index.php
require '/home/初期アカウント名/laravel/PROJECT_ROOT/vendor/autoload.php';
$app = require_once '/home/初期アカウント名/laravel/PROJECT_ROOT/bootstrap/app.php';
```

環境定義ファイルの修正。データベースの接続情報はサーバコントロールパネルから確認する。

```ini:~/laravel/PROJECT_ROOT/.env
APP_ENV=production
APP_DEBUG=false

DB_CONNECTION=mysql
DB_HOST=mysql9999.db.sakura.ne.jp
DB_PORT=3306
DB_DATABASE=初期アカウント名_xxxx_db
DB_USERNAME=初期アカウント名
DB_PASSWORD=PASSWORD
```

プロジェクトの初期化、データベースのマイグレーション。

```
php artisan key:generate
php artisan clear-compiled
php artisan optimize
php artisan config:cache
php artisan view:clear

php artisan migrate
```

以上。
ちなみに、さくらのレンタルサーバは一応`cron`が使える。今回は扱わなかったが、キューワーカーが必要ならサーバコントロールパネルのCRON画面に`php artisan queue:work`を設定することになると思う。
【Swift UI】List with Index


Use `enumerated` and id: `\.element.title`

```swift
struct TodoListView: View {
    let todos: [Todo]

    var body: some View {
        // Create New Object with Index
        let withIndex = todos.enumerated().map({ $0 })

        return List(withIndex, id: \.element.title) { index, todo in
            NavigationLink(
                destination: TodoDetailView(todo: todo),
                label: {
                    VStack(alignment: .leading) {
                        Text(todo.title)
                            .styleMultiline()
                    }
                    .paddingVertically()
                }
            )
        }
    }
}
```
PowerShellをダブルクリックで実行したい

PowerShellを使う機会が増えてきたが，デスクトップにあるPowerShellのアイコンをダブルクリックしても，メモ帳が開いてソースコードが見れるだけ...
もっとサクッとPowerShellを起動できるようにしたい...

というわけで，調べてみた．

#起動パターン
ダブルクリックすると**PowerShel or PowerShell(ISE)を起動して実行**してくれるか**即実行**してくれる方法が楽そう．コマンドプロンプトからバッチファイルを挟んで実行する方法もあるが準備がめんどい...
自分は，ソースコードを直しては動くか確認の繰り返しが多いので，PowerShell(ISE)を起動するようにした．

#ダブルクリックでPowerShell(ISE)を起動
これは簡単．以下手順

1. 適当な名前の.ps1ファイルを作成
1. 右クリックで[プログラムから開く]>[別のプログラムを選択]をクリック
1. [その他のアプリ]>[このPCから別のアプリを探す]をクリックするとエクスプローラが起動
1. エクスプローラで C:\Windows\System32\WindowsPowerShell\v1.0 に移動
1. PowerShellで起動したければpowershell.exeを，PowerShell(ISE)で起動したければpowershell_ise.exeを選択し，[開く]をクリック

ちなみに，PowerShell(ISE)は実行ボタン[▶]押さなくても，F5で簡単に実行できる．ファイルの保存も必要なし．

#ダブルクリックで即実行
ダブルクリックして，ファイルを[開く]ではなく[PowerShellで実行]したい場合はこっち．以下手順．

1. [Windows]+[R]で，[ファイルを指定して実行]ウインドウを開き，[名前:]にregeditと入力
1. レジストリエディタが開くので，コンピューター\HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1に移動
1. ここで，Shellをクリックすると，下の表ようになっているので，(既定)をダブルクリックし，[値のデータ]を0に書き換えて[OK]をクリック．
1. 値を変更したら，レジストリエディタは閉じてOK．

<レジストリエディタの値>

名前   | 種類   | データ
-------|--------|-------|
(既定) | REG_SZ | Open

ただし，この起動方法だと処理終了後ウインドウがすぐ閉じてしまうので，エラーの確認とかができないので注意．

#実行ポリシー
設定を変更しても以下のようにエラーが出て，実行ポリシーの問題で上手くいかない可能性がある．

```
ファイル XXX.ps1 を読み込めません。
ファイル XXX.ps1 はデジタル署名されていません。このスクリプトは現在のシステムでは実行できません。スクリプトの実行および実行ポリシーの設定の詳細
については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
    + CategoryInfo          : セキュリティ エラー: (: ) []、ParentContainsErrorRecordException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

[管理者権限で以下のコマンドレットを実行](https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750)すると，実行ポリシーが変更されスクリプトを実行できるようになる．

```
 >PowerShell Set-ExecutionPolicy RemoteSigned
```
Firestoreのタイムアウトについて

# 背景
みなさん、Firebaseは使っていますか？
簡単なアプリケーション作成に必要な機能が揃っていてとても便利ですよね。
私もとても素晴らしいサービスだと考えているのですが、公式ドキュメントをちらっと読んだ感じだと気付かなさそうな仕様があり、今回はそれを共有させて頂きたいと思います。

# 問題
以下のコードを見てください。
CollectionにあるDocumentを全件取得するコードです。

```python
docs = db.collection(u'cities').stream()

for doc in docs:
    print(u'{} => {}'.format(doc.id, doc.to_dict()))
```
出典:[公式ドキュメント](https://cloud.google.com/firestore/docs/query-data/get-data)

では、このコードを下のように変更するとどうなるでしょうか。

```python
docs = db.collection(u'cities').stream()

for doc in docs:
    #nanka omoi syori
    time.sleep(100)
    print(u'{} => {}'.format(doc.id, doc.to_dict()))
```

このようにして実行してみると、最初の一件以外出力されていないことが確認できると思います。

# 解決策
取得するべきdocumentの中身が小さく、そこまで量もない場合には、例えば次のようにして一度全件取得すれば良いでしょう。

```python
docs = [doc.id for doc in db.collection(u'cities').stream()]

for doc_id in docs:
    #nanka omoi syori
    time.sleep(100)
    print(doc_id)
```

巨大Collectionを取得したい場合もあると思います。
その場合には以下のリンクを参考にしてクエリカーソルを使用していただければと思います。
[stack overflowの質問](https://stackoverflow.com/questions/56011623/how-do-i-download-a-large-collection-in-firestore-with-python-without-getting-at)
[クエリカーソルについての公式ドキュメント](https://cloud.google.com/firestore/docs/query-data/query-cursors)
# 最後に

この件について記載のあるQiita記事等の日本語資料を探してみたのですが、全くヒットしませんでした...:cry:(2020/2/2時点)
この件はアプリケーションの種類によってはクリティカルになりうると思うので、これからFirebaseを勉強しようと思っている、または、実務で使うかもしれない方々の学習の一助になれば幸いです。
郵便番号検索apiを使ってみた

#はじめに
初めてapiを触ったのでおかしなところがあるかもしれません。

#環境
php

#コード

```php:api_test.php
<?php
    if(isset($_POST["postal_code"])){
        //郵便番号取得
        $postal_code = $_POST['postal_code'];
        //url
        $url = "https://zip-cloud.appspot.com/api/search?zipcode=${postal_code}";
        //住所取得
        $json = json_decode(file_get_contents($url),true);
        $address = $json["results"];
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>郵便番号検索</title>
    </head>
    <body>
        <form action="" method="POST">
            <p>郵便番号を7桁で入力してください。</p>
            <input type="text" name="postal_code" placeholder="例:1000000" maxlength=7>
            <input type="submit" value="送信">
        </form>
        <div>
            <?php
                //出力
                echo "郵便番号:{$postal_code}<br />";
                foreach( $address as $value1 ){
                    foreach($value1 as $value2){
                        echo $value2;
                        echo "<br>";
                    }
                }
            ?>
        </div>
    </body>
</html>
```
#結果
![api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576886/19416250-e93c-ca04-0e03-8de4cd92f9ed.png)
↓
![api2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576886/3c34ef03-35be-cbab-89a3-f572c17b804a.png)
こんな感じになりました
ほかのapiも触ってみたいと思います。
enhancd実行後のawk: newlineエラーの解決策

# 環境

- macOS Catalina 10.15.1
- iterm2 + fish + tmux

# 問題

普段愛用している`enhancd`(cd拡張)の実行後に以下のようのエラーが発生していました。

```
$ cd ..
awk: newline in string /Users
... at source line 1
```

また、エラー後にはホームディレクトリに`debug.txt`が勝手に生成されていました。

# 原因

macOSにデフォルトでインストールされている`awk`コマンドによるもの。enhancdは内部的に`awk`コマンドを利用しているようですが、macの場合はデフォルトのバーションが古かった模様。

# 解決策

```bash
brew install gawk
```

# 終わりに

enhancd開発者であるb4b4r07さんのQiita記事にもmaxOSの`awk`コマンドによる[不具合](https://qiita.com/b4b4r07/items/2cf90da00a4c2c7b7e60#comment-b5019cc46147ddf8ff65)が報告されていました。macOSの方は、enhancdインストール時に`gawk`も一緒に入れておくのがいいかと思います。

# 参考文献

* <https://qiita.com/b4b4r07/items/2cf90da00a4c2c7b7e60#comment-b5019cc46147ddf8ff65>
* <https://github.com/b4b4r07/enhancd>
モダンなポップアップfinder vim-clapを使う


# 概要
ポップアップで表示されるfinder vimプラグインです。
最近ctrlp.vimからのりかえました。

## 必要となるvim/neovimのバージョン

| vim/neovim       | version |
|:-----------------|:------------------|
| vim             | patch-8.1.2114 |
| neovim           | nvim-0.4 |

## 画面イメージ
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68643/e7acfa77-3132-aa5a-8720-2b237720f60f.png)

## 使用している主な機能

| コマンド       | 内容 | 備考 |
|:-----------------|:------------------|:------------------|
| Clap gfiles | git管理されているファイルの検索 | gitが必要 |
| Clap lines | ファイル内の行の検索 |
| Clap yanks | yank内容の検索&ペースト |

上記以外にもたくさん機能があり、GitHubのリポジトリで確認できます。
[liuchengxu/vim-clap](https://github.com/liuchengxu/vim-clap)

## キーマッピング
ctrlp.vimからのりかえたので、 `ctrl + p` にマッピングしました。 

```
nnoremap <silent> <C-p> :Clap gfiles<CR>
```
問合せフォームから送信された定型メールを自動で取り込むには

ホームページの問い合わせフォーム（WordPress だと ContactForm7 プラグインが有名）で登録を受け付けると、双方確認のため、関係者にメールで自動送信するようなシステムを組んでいるかと思う。
その後のフローはと言えば大抵、メール記載内容を元に、顧客管理簿にちまちまと入力したり、販促用メーリングリストに追加したりと、担当者が手作業で進めることになる。

**・・・・じつに面倒くさい** :weary:

この手のメールは「決まったフォーマット」で送られてくるのが保証されているわけで、それこそコンピュータにやらせれば良いのである。
ということで、簡単なスクリプトを書いてみた。毎日何十通と問い合わせメールが来るような現場なら、ぜひ試してみて欲しい。

# メールフォーマット
ここでは、次のような定型メールを想定する。
**Google Apps Script** で処理するので、メールは **G Suite**（無料版のGmailを含む）で受信する前提だ。

```:メール件名
【〇〇〇】お問い合わせありがとうございます
```

```:メール本文
〇〇〇〇〇です。
この度は弊社にお問い合わせいただき誠にありがとうございました。

---------------------------------------------
★ 貴社名
株式会社山田ソリューションズ

★ ご担当者名
山田 太郎

★ ご連絡先メールアドレス
yamada@example.co.jp

★ ご連絡先電話番号
090-1234-5678

★ お問い合わせの種類
△△管理システムについて

★ お問い合わせ内容
〇〇について△△としていただくことは可能でしょうか。
その場合、３月末の納期でも間に合いますでしょうか。
---------------------------------------------

２営業日以内に担当よりご連絡させていただきます。
よろしくお願い申し上げます。
```

「貴社名」は６行目、「ご担当者名」は９行目、「ご連絡先メールアドレス」は１２行目、「ご連絡先電話番号」は１５行目、「お問い合わせの種類」は１８行目、「お問い合わせ内容」は２１行目から「-----」までの間すべての行を取得すれば良いことが分かる。

# スクリプト
次のスクリプトを Google Apps Script の**トリガ**に登録する。トリガとは任意のイベントでスクリプトを実行できる仕組みだ。

```javascript
/**
 * 受信したメールをGoogleスプレッドシートに登録
 * @author MindWood
 */
function createEntryList() {
  var sheet = SpreadsheetApp.getActiveSheet().clear();
  var messages = [['送信日時', '貴社名', 'ご担当者名', 'ご連絡先メールアドレス', 'ご連絡先電話番号', 'お問い合わせの種類', 'お問い合わせ内容']];
  
  GmailApp
  .search('subject:【〇〇〇】お問い合わせありがとうございます', 0, 500)  // 件名で絞り込み
    .forEach(function (thread) {
      thread.getMessages().forEach(function (message) {
        var from = message.getFrom();       // 送信者
        var date = message.getDate();       // 送信日
        var body = message.getPlainBody();  // 本文
        
        if (from.match('@ourcompany.co.jp>$')) {  // 社内の人間からなら除外
          return;
        }
        var lines = body.split("\r\n");  // 本文を改行コードで分割
        
        var comment = '';  // 「お問い合わせ内容」のみ複数行で入力される可能性がある
        for(var i = 20; lines[i] != ''; i++) {
          if (lines[i].indexOf('-----') == 0) {  // 「お問い合わせ内容」の終わり？
            break;
          }
          comment = comment + lines[i] + "\n";  // 「お問い合わせ内容」を改行で結合
        }
        messages.push([date, lines[5], lines[8], lines[11], lines[14], lines[17], comment.slice(0, -1)]);
      });
    });

  if (messages.length === 0) return;

  sheet.getRange('A:A').setNumberFormat('yyyy/mm/dd hh:mm');
  sheet.getRange('C:C').setNumberFormat('@');
  sheet.getRange('A1:G' + messages.length).setValues(messages);
}

/**
 * Googleスプレッドシートからメーリングリストに登録
 * @author MindWood
 */
function addMembers() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();
 
  for (var i = 0; i < data.length; ++i) {
    var row = data[i];
    try {
      var res = AdminDirectory.Members.insert({name: row[2], email: row[3], role: 'MEMBER'}, 'ml@ourcompany.co.jp');
    } catch(error) {
      Logger.log('name：' + error.name);
      Logger.log('message：' + error.message);      
    }
  }
}
```

このスクリプトを毎日決まった時刻に起動するトリガとして設定すれば、自動で管理簿を作成したり、メーリングリストを自動でメンテナンスできるようになる。

例では問い合わせフォームとして扱ったが、他にも求人募集の登録とか、無料メルマガの配信とか、コンテンツを差し替えるだけでいくらでも応用がきくスキームなので、自由にカスタマイズして活用して欲しい。
mysqlにログインして「ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)」が出た時の解決方法

mysqlにログインしようとしたときに、以下のエラーが表示された。

```
% mysql -u root -p
Enter password: 
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

上記を日本語訳すると

```
エラー2002（HY000）：ソケット '/tmp/mysql.sock'を介してローカルMySQLサーバーに接続できません（2）
```

という意味なので、サーバ自体が止まっている可能性があると判断してmysqlを再起動。

```
% mysql.server restart
 ERROR! MySQL server PID file could not be found!
Starting MySQL
.. SUCCESS! 
```

ログインし直したら解決した。

```
% mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.18 Homebrew

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 
```
エラー:General error: 1 table posts has no column named updated_at


# エラー
phpでsaveをしようとしたら、下記のエラーが表示
[![Image from Gyazo](https://i.gyazo.com/0940789df245bd0b492502ef1d0f1aa5.png)](https://gyazo.com/0940789df245bd0b492502ef1d0f1aa5)


```
>>> $post->save();
Illuminate/Database/QueryException with message 'SQLSTATE[HY000]: General error: 1 table posts has no column named updated_at (SQL: insert into "posts" ("body", "title", "updated_at", "created_at") values (body 1, title 1, 2020-02-02 14:58:15, 2020-02-02 14:58:15))'
```

## 対策


$timestamps無効にすれば改善される。
そのモデルに下記を追記する

```
public $timestamps = false;
```

```php:モデル
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    public $timestamps = false;
}
```

## 確認

```
>>> $post = new App\Post();
=> App\Post {#2894}
>>> $post->title = 'title 1';
=> "title 1"
>>> $post->body = 'body 1';
=> "body 1"
>>> $post->save();
=> true
>>> 
```
trueが表示されており成功している
JavaScript  最大値の解説

長いので、別ページに致しました。

業種、役職関係なく...実際、世界中の人がそれぞれの業務を頑張ってる、そう頑張ろう

---

###[JavaScript (ES6) 計算関数 (FizzBuzz問題)　](https://qiita.com/grca3/items/34b4b6681e24d92984d4)より

>####④が重要です。 代入後に比較。####
>JSの面白さが増します。

####(引数について[JavaScript ES6 ](https://qiita.com/grca3/items/b0bf5c523775bc6649e7))
---

##【 max関数】##

```js
const num1 = 1;
const num2 = 40;
const num3 = 60;


let maxNum = (a,b,c) => {
  let max = a;
    if (b > max) {
      max = b;
    } if (c > max) {
      max = c;
    }return max;
  }
const maaax = maxNum(num1,num2,num3);

console.log(`最大値は${maaax}です。`);


ーーーーー
＜コンソール結果＞

最大値は60です

```

###【補足】###

```js
if (条件) {
条件が真・trueであれば実行
} 
else if (条件) {
ifの条件が偽・false、かつelse ifの条件が真・trueの場合の処理を書く
     
} else {
if、else if のいずれも当てはまらない場合の処理を書く
}

```

##余談【最大値を求めるメソッドの場合はもっとシンプル】##

```js

const num1 = 1;
const num2 = 40;
const num3 = 60;

console.log(`最大値は${Math.max(num1, num2, num3)}です。`);
ーーーーー
＜コンソール結果＞

最大値は60です
```


[MDN　Math.max() 関数について](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)

#ここから解説#

####・maxを簡単にmとしてみました。####
(maxと書けば最大値になるわけではもちろん無い、がハッキリわかる様に...）
####・a,b,cを同じくnum1,num2,num3としました。####
（逆の考え方では、引数num1,num2,num3は、違う引数名a,b,cでも可。違う名でも引数が渡されるに変わりは無い。と言う事になります。）今回は、登場する単語数を減らし、分かりやすくしました。


###順序は　[①引数を指定→②引数を基にアロー関数で処理する→③→④→⑤→⑥]　＋　[❻(); で関数を呼びだしている。]###

returnする意味： return文は関数の実行を終了して、関数の呼び出し元に返す値を指定します。
[MDN参照](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/return)


```
const num1 = 1;
const num2 = 40;
const num3 = 60;


let ⑥maxNum = (②、num1,num2,num3) => {

  let m = num1;　　　    　　　　　 ・変化するのでconstではなくlet
                        　　　　　 ③、 m を num1 にまず決めておく。
　　　　　　　　　　　　　　　　　　　　　その場合、ifの処理がなければ、mはnum1のままなので、
　　　　　　　　　　　　　　　　　　　　　　比較するために、ここからmの条件分岐作業。
    if (num2 > m) {　　　　　　　　　④、もし、mよりnum2が大きいなら、 m を num２とし、
                                   （ここでm = num2となり、mに代入され、次にnum3 > num2の比較となる。
　　　　　　　　　　　　　　　　　　　　　　　決して大元mとの比較では無い。ここ理解 最重要。 ）
　　　 m =num2;　　　　　　　　　　　　　もし、mよりnum３が大きいなら、 m を num３とする。
　　 } if (num3 > m) {　　　　　　　　　この結果をreturnする。
　　　　　　　　　　　　　　　　　　　　　returnをする意味：値を返す為。return無しでは(`最大値はundefinedです。となってしまう。
     m　=num3;
   
    }return m;  //←ここの③④の結果が＝⑥に代入される  
  }

　　　
　　　　　　　　　　　❻maxNum(①、maxNumの引数として　→　num1,num2,num3　この３つを②へ渡す);

   console.log(`最大値は${maxNum}です。`);

ーーーーー
＜コンソール結果＞

最大値は

(num1,num2,num3) => {

  let m = num1;　　　　　　　　　
    if (num2 > m) {　　　
      m =num2;
    } if (num3 > m) {
      m　=num3;
    }return m;  
  }

です
```

####と、中身の式が出てしまう。####
####maxNum の結果だけほしいので、　maxNumを const  maaax として代入し、(今回は大袈裟にmaaaxとした)####
####`最大値は${maaax}です。`とする。####

つまり以下

```js
const num1 = 1;
const num2 = 40;
const num3 = 60;


let maxNum = (num1,num2,num3) => {

  let m = num1;
    if (num2 > m) {
      m =num2;
    } if (num3 > m) {
      m =num3;
    }return m; 
  }
const maaax = maxNum(num1,num2,num3);
console.log(`最大値は${maaax}です。`);

ーーーーー
＜コンソール結果＞

最大値は60です

```


---

補足　これでも考え方はもちろん同じ

```js
.......

  let max = num3;           //let max = なにか　　を基準に以下分岐処理; 
    if (num1 > max) {
      max =num1;
    } if (num2 > max) {
      max=num2;
    }return max;
  }
```






>この最大値を考えた人、すごい!
QRコードを使ったiOS端末とMac間のリンク共有

# はじめに

iOS端末から開発中のWebサイトを開きたい時に、iOS端末のブラウザでURLを直接入力するのは面倒ですよね。(例えば、Mac側でngrokで生成したリンクをモバイル端末で素早く開きたい時など)

これらを解決する方法としては、

* iCloud経由の同期
* Google Chrome経由の同期
* AirDrop経由のリンク共有

などがあります。(他にもあるかと思いますが。。)

ただ、iCloudやGoogle Chromeといったアカウント連携したものは個人の環境ではOKでも、会社で同じアカウント連携するのは面倒かもしれません。AirDropの場合はiOS端末側で設定を有効化すると利用できるため、割とリンク共有方法として手間がかからずに良いかなと思います。

ここでは、アカウント連携が不要な```QRコードを使ったリンク共有```について書きたいと思います

# 大まかな手順

単純に以下をやるだけです。

1. Mac側でURLを含むQRコードを生成する
2. iOS端末側でQRコードを読み込む

# Mac側でQRコードを生成

文字列をQRコード化するコマンドツールに```qrencode```がありますので、このコマンドでURLをQRコード化します。
qrencodeは```Homebrew```でインストールできます。

```
$ brew install qrencode
```

QRコードの生成方法は、以下のような感じになります。

```
$ qrencode -t ansi {URL文字列}
```

上記コマンドを実行すると、ターミナル上に生成したQRコードが表示されます。

# iOS端末でQRコードに含まれるURLを起動する

QRコードを読み取るだけなら、標準カメラからQRコードを読み取ることができますが、読み取り後に
通知のバナーをタップする必要があり、１ステップ手間がかかります。

iOSのショートカットを使えば、この１ステップを削除できます。

ショートカットの手順としては、ショートカット内部で、

* ```QRコードバーコードをスキャン```のアクションを追加
* ```URLを取得```のアクションを追加
* ```URLを開く```のアクションを追加

のワークフローを作成することで、QRコードに含まれるURLを起動することができます。

この作成したショートカットを使って、Mac側で生成したQRコードを読み取れば、自動的にSafariブラウザが起動して、URLを開くことができます。
(最後のURLを開くアクションでは、Safariブラウザが開くため、Chromeなどの他のブラウザを起動するようにしても良いかもしれません)

最後に作成したショートカットの[共有リンク](https://www.icloud.com/shortcuts/7c36a92cf1b3426488dbf7df80fb6878)を記載しておきます。
SQLite型プロバイダを使う方法

# はじめに

SQLiteの型プロバイダを使おうとして嵌ったので備忘録として残しておきます。
// おそらく他のDB系の型プロバイダも同じ方法でできると思う。

# 方法

## 1. **`SqliteReadSample`** というプロジェクトを作成します。
<img width="682" alt="スクリーンショット 2020-02-02 10.12.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/4c366f8f-ff77-0bf1-8c11-6062d157888f.png">

## 2. **`Visual Studio Code`** でプロジェクトを開きます。
<img width="682" alt="スクリーンショット 2020-02-02 10.18.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/b1d020b0-a3e5-588f-0d2e-6ef591a48624.png">

## 3. 必要なライブラリを **`nuget`** から導入します。
- **` dotnet add package FSharp.Data `**
- **` dotnet add package SQLProvider `**
- **` dotnet add package System.Data.SQLite `**

## 4. 一度ビルドして必要なアセンブリを取得する

```zsh
dotnet build -c Release
```

そうすると **`bin/Release/netcoreapp3.1/runtimes/osx-x64/native/netstandard2.0/SQLite.Interop.dll`** というdllが出力されているので、それを **`SqliteReadSample.fsproj`** と同じ階層にコピーします。

※ Windowsの場合は **`bin/Release/netcoreapp3.1/runtimes/win-x64/native/netstandard2.0/SQLite.Interop.dll`** を利用する.

```zsh
cp bin/Release/netcoreapp3.1/runtimes/osx-x64/native/netstandard2.0/SQLite.Interop.dll ./
```
<img width="1567" alt="スクリーンショット 2020-02-02 10.34.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/fd85669e-625c-64ec-5779-4846e784a53c.png">

## 5. 以下のようなDBを適当に用意する
<img width="1210" alt="スクリーンショット 2020-02-02 14.22.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/f9c3aff9-1ac3-c5a8-c164-d60871929dfb.png">

<img width="1210" alt="スクリーンショット 2020-02-02 14.24.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/3b863731-8d3b-3d26-f012-40a4b29e69e4.png">

<img width="1210" alt="スクリーンショット 2020-02-02 14.24.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/8bec8305-6cb4-ae21-e588-8f7dbacab6fd.png">

- 作ったDBは **`SqliteReadSample.fsproj`** と同じ階層にコピーしておきます。
<img width="1415" alt="スクリーンショット 2020-02-02 14.28.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/0c117925-a18f-5d36-f59a-7931e9b65415.png">

## 6. あとは通常通りSQLiteの型プロバイダを利用するだけ
<img width="1415" alt="スクリーンショット 2020-02-02 14.44.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/9615529f-9ed1-6388-aef8-b17f918a7ad9.png">

- 実際にDBを作るときは、こんなヘンテコな名付けをしてはいけない（戒め
- SQLite.Interop.dll が .fsproj と同じ階層にないとビルドが失敗するのが許せない
- (TODO)どっかのタイミングでテーブルの連結とかのサンプルを足す
はじめてAWSでデプロイする方法⑧（環境変数の設定）

# 前回までの流れ
EC2インスタンスを作成
Elastic IP でEC2インスタンスのパブリックIPを固定
セキュリティグループを編集して、HTTPでWEBサイトの入り口を作る。
EC2にRails等をインストールして、環境設定をする
いよいよAppをEC2にダウンロード（クローン）
gemをインストール

# 今回の内容
環境変数を設定する。

## 環境変数とは何か？
環境変数は簡単に説明すると、PWを公開しないための変数と思ってください。


Githubは開発するに際に非常に便利です
コードのバックアップのような役割も担うし、他の開発チームとコードを共有することができる。

しかし、PWは公開したくないはずです。
このPW（パスワード）などの公開したくない情報を環境変数というもので隠してしまいます。

変数はX=3のように 文字（X）の意味（３）を定義します。
環境変数の場合、環境変数  = 'PW' のように、パスワードを変数の値とします。
こうすることで、コードに記述されている環境変数だけでは、パスワードを特定できないので、
悪用されない仕組みとなります。

環境変数で定義したPWは、開発者のみが’鍵（暗号化を解除するための数値）’を持っており、鍵を持っている人間しか、実際の値をみることができません。

## secret_key_baseの取得
secret_key_baseは「railsアプリ」でクッキーを暗号化するものになります。
クッキーとは、webを参照した時の履歴のようなものを残し、次回から素早くアクセスできるものになります。
クッキーは外部から参照されるとよくないので暗号化します。

```
[ec2-user@ip-172-31-23-189 <アプリ名>]$ rake secret

# うまくいくと、
cdfasdfadgfsadfdgc314751a8dadfadf7c8b9a1dc888e...
という感じで表示されます。
これをコピーしておきましょう
```

## 環境変数を設定
環境変数を記述する場所を開きましょう

```
[ec2-user@ip-172-31-23-189 <アプリ名>]$ sudo vim /etc/environment
```
すると下記のような画面が表示されます。
![スクリーンショット 2020-01-14 18.32.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/ef028fcc-46da-dbf1-df6f-666a1118be53.png)

編集をするために「i」を入力
![スクリーンショット 2020-01-14 18.35.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/5eee2bcc-b444-9e77-1237-d77a4aedc23d.png)

すると 『　-- 挿入 -- 』と表示されるので、入力が可能となります。
では、環境変数を定義していきましょう

```
DATABASE_PASSWORD='MySQLのrootユーザーのパスワード'
SECRET_KEY_BASE='先程コピーしたsecret_key_base'
```
入力が完了したら、キーボード左上にある『　esc 』を押します。
すると挿入の表示が消えます。
保存するために　『　:wq　』　と入力しましょう

すると見慣れたターミナルの画面に戻ります
![スクリーンショット 2020-01-14 18.42.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/da0682bb-ed87-1541-6ac0-5e649ef51212.png)

設定した環境変数を反映させるために、一度本番環境をログアウトしましょう。

```
[ec2-user@ip-172-31-23-189 ~]$ exit
```

もう一度EC2にログイン
（ターミナル上で↑を押すと、入力してきたコマンドが出てくるので、それでssh -iを見つけてエンターすれば大丈夫です）

```
$ ssh -i ファイル名.pem ec2-user@[Elastic IPの値]
```

### 環境変数が無事に設定されているか確認

```
[ec2-user@ip-172-31-23-189 ~]$ env | grep SECRET_KEY_BASE
SECRET_KEY_BASE='secret_key_base'

[ec2-user@ip-172-31-23-189 ~]$ env | grep DATABASE_PASSWORD
DATABASE_PASSWORD='MySQLのrootユーザーのパスワード'
```

これで以上です。

何かAPIを導入したい際は、APIの秘密鍵を同じようにして環境変数として設定します。

# 次回はRailsの起動をします
次の記事はこちら
[はじめてAWSでデプロイする方法⑨（Railsの起動）](https://qiita.com/mylevel/items/f06b0cce5c476a7f192b)
ポートフォリオサイトを作成する②Nuxt+Contentful＋gitlab+Netlifyで公開

こんにちは、フリーランス/フロントエンドデベロッパーのHiromiです。

#TL;DR
[前回ペライチのページを作成](https://qiita.com/hiromir13/items/f5930224d5108e9269c7)してから、かなり時間が経ってしまいましたが
やっとポートフォリオサイトが本公開できました！

https://webiscuit.jp/
![コメント 2020-01-31 123913.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155724/a256870a-41c7-1cc8-3ac0-e675516d86a4.jpeg)

#使用した技術
- JavaScriptフレームワークは、[Nuxt.js](https://ja.nuxtjs.org/)
- CMSは、[Contentful](https://www.contentful.com/)
- ホスティングおよびフォーム機能は、[Netlify](https://www.netlify.com/)
- CSSフレームワークは、[tailwindcss](https://tailwindcss.com/)
- アニメーションは一部で[animejs](https://animejs.com/)
- バージョン管理は、[gitlab](https://gitlab.com/)   
をそれぞれ使用して、完全に静的ページ（Jamstackの概念）で作成しました

#それぞれ選定した理由や感想
基本的には、受託案件ではすぐに使えないだろうなぁという技術を積極的に導入しました。

##JSフレームワーク / Nuxt.js
https://ja.nuxtjs.org/
今回は静的ページとして作成する予定だったので、静的サイトジェネレーターとして使用しました。

Nuxt自体は案件でも今までも使用したりしてきてますが、小規模のソロ案件が多かったので
今回、あえてコンポーネントを分けたりしっかり作ってみたので、学びが多かったです。

また元々ここ２～３年ほどは特に指定がない場合や小規模案件などでは
PostCSSとPugで制作してきており、今回もそうしています。
Nuxt(Vue)ではどちらもすぐ導入出来るので、ソース書く度に愛が膨らみます（笑）

##ヘッドレスCMS / Contentful
https://www.contentful.com/
元々自前のJSONファイルで実装していた実績やプロフィールなどを
せっかくなのでJamstack導入しとこうと途中、Contentfulに入れてみました。
他社サービスも検討しましたが、私のポートフォリオ規模であればContentfulで十分かなと。

CMSの比較はこちらの記事がわかりやすく、選定時に参考にしました。
[JAMstack Tools and The Spectrum of Classification | CSS-Tricks](https://css-tricks.com/jamstack-tools-and-the-spectrum-of-classification/)

今後ブログページを作成しようかなと思っているのですが
そっちはContentfulでもありですが、せっかくなのでREST APIあたりでやろうと思っています。

##ホスティング・フォーム機能 / Netlify
https://www.netlify.com/
ペライチポートフォリオから引き続きNetlify使用です。

時々サーバー速度がぐっと落ちるのが若干気になるのですが、
[Netlify Forms](https://www.netlify.com/products/forms/)が楽すぎるので、一旦は続投です（とはいえ実装時は苦戦しましたが＞＜ｗ

#雑感
せっかく自分で自由にできるから、とデザインから自力で行い
普段の受託案件では導入しづらい技術を積極的に取り入れました。

どうしても仕事のほうが優先になってしまったのもあり、かなり時間かかりましたが
１サイトでいろいろと学習しつつ楽しく導入出来ました。
まだまだそれぞれ改善の余地はあるとは思いますが、概ね満足です:relaxed:
sqlite> quit として終了できない


sqliteでschemaを見たあとに、終了しようしてしたが、

.quit ではなく quitだけ入力した場合、終了できなくなる。

```
sqlite> quit
   ...> .quit
   ...> 
```


その場合の対処方法は、

;を入力すること

```
   ...> ;
Error: near "quit": syntax error
sqlite> .quit
OwnernoMacBook-Air:myblog-laravel owner$ 
```
これで戻れます
JasmineでPartialなtoHaveBeenCalledWithをする

実質メモ書き的なもの

```typescript
expect(alertCtrlSpy.create).toHaveBeenCalledWith(
  jasmine.objectContaining({
    header: 'header',
    subHeader: 'subHeader',
  })
);
```

**jasmine.objectContaining**を使う。以上。


## 追記(2020/02/04)
この場合```jasmine.any(Function)```をbuttonsに使うのも良いかもしれない