OmniAICreator/Qiita-1.07M huggingface dataset:
ローカルで行った変更点が本番環境に反映されない時の対処法

せっかくローカルで変更して上手くいっても、本番環境で変化がなければなんの意味もありません。

今回、ローカルホストではしっかり変わっているにも関わらず、本番環境（capistranoで自動デプロイ時）に反映されない時の対処法を書いていきます。

# 結論「unicornをkill」しましょう。
unicornをkillする手順

1.ターミナル

```
[ec2-user@本番環境 <リポジトリ名>]$ ps aux | grep unicorn

```

こちらをしていただくと

```
ec2-user 17877  0.4 18.1 588472 182840 ?       Sl   01:55   0:02 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 17881  0.0 17.3 589088 175164 ?       Sl   01:55   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
ec2-user 17911  0.0  0.2 110532  2180 pts/0    S+   02:05   0:00 grep --color=auto unicorn
```

このように表記されると思います。

一番上の行の5桁の数字(PID)をkillします。

```
kill -9 上記で確認したPID
```

# あとはもう一度デプロイ するだけ

でも、毎回デプロイ のたびにこれをするのは手間ですよね。

なので、デプロイ 時に自動でunicornをkillしてstartしてくれる記述を書きましょう。

```
config/deploy.rb

after 'deploy:publishing', 'deploy:restart'
namespace :deploy do
  task :restart do
    invoke 'unicorn:stop'
    invoke 'unicorn:start'
  end

  desc 'upload master.key'
  task :upload do
    on roles(:app) do |host|
      if test "[ ! -d #{shared_path}/config ]"
        execute "mkdir -p #{shared_path}/config"
      end
      upload!('config/master.key', "#{shared_path}/config/master.key")
    end
  end
  before :starting, 'deploy:upload'
  after :finishing, 'deploy:cleanup'
end

```

こちらの

```
namespace :deploy do
  task :restart do
    invoke 'unicorn:stop'
    invoke 'unicorn:start'
  end

```

このように記述することで、デプロイ 時に自動でunicornを再起動してくれます。


私のような誰かの助けになれば幸いです！！！


それではまたどこかで＾＾
Vue.js 現在時刻の表示 ~時計~

# Vue.jsとは

ユーザーインターフェイスを構築するための<font color="Green">プログレッシブフレームワーク</font>です。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
>参考URL
>https://jp.vuejs.org/v2/guide/index.html 

## Vue.jsを使用するメリット

- 気軽に使える：
Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。
- DOM操作を自動的に行ってくれる：
HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれます。これにより、jQueryよりも簡潔に分かりやすくコードを記載することができます。

- 学習コストが低い：
AngularやReactと比較してフレームワークの規模が小さい分、覚えることも少なくて済みます。JavaScriptやjQueryの基礎知識があれば数時間の学習で開発を開始することができるでしょう。

## Vue.jsで現在時刻を取得して表示する

初めに全体像を掴んでもらうために、完成品を記述します。

```html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻</button> <!-- v-on:event -->
  </div>
  <!-- Vue.jsをインストール -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- ここから記述していきます -->
  <script>
    let app = new Vue({
      el: "#app",
      data:{
        now: "00:00:00"
      },
      methods: {
        time: function(e){ function(e) 
          var date = new Date();

          this.now = date.getHours() + ":"
          + date.getMinutes() + ":" +
          date.getSeconds();
        }
      }
    });
  </script>
</body>
</html>
```
### 完成品
<img width="342" alt="スクリーンショット 2020-03-18 22.33.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/1cda85b8-1017-5752-b71a-c7caac4f850c.png">

**ここから要素ごとに説明していきます。ちなみにVue.jsは始めたばかりになるので、説明が至らぬところがあればコメントお願いします。**


```html

  <div id="app">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻</button> <!-- v-on:event -->
  </div>
```

まずはHTMLでのこちら。

**{{  }}**
<font color="Red">*こちらの記述がJavaScriptのメッセージに自動的に置換してくれます。*</font>
**v-on**
<font color="Red">*v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。*</font>

>参考URL
https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%B3%BC%E8%AA%AD

**次にコメントアウトにてscript以降の説明していきます。**

```js

let app = new Vue({
  el: "#app", //el: "ID要素"を取得します
  data:{
    //こちらのプロパティでHTMLの{{}}を置換します
  },
})
```
**次にmethod以降の説明していきます。**

```javascript
let app = new Vue({
  el: "#app",
   data:{
     now: "00:00:00" //now: == {{}}
   },

   methods: {
     time: function(e){  //function(e) この引数eは、eventの「e」
       let date = new Date();  //new演算子でオブジェクトのインスタンスを生成
        //現在時刻の取得 **ここからはjavascript**
         this.now = date.getHours() + ":"
         + date.getMinutes() + ":" +
         date.getSeconds();
     }
   }
});
```

###ボタンを押す前
<img width="334" alt="スクリーンショット 2020-03-18 23.03.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/49e65618-feaf-a4d6-8c3d-43e509d5f102.png">


どうでしょうか？
クリックイベントで、現在の時間を取得できましたか？

私もまだまだ勉強中ですが、書き方自体はシンプルでとてもわかりやすいですよね。

ちなみに私はこちらをYoutubeで見て学習をしました。
是非そちらもご参考までに見てみてください。

>Youtube たにぐち まことのともすたチャンネル様
https://www.youtube.com/watch?v=jdcZ3LvTs78
Vuexのmutations/actionsが実行された事をテストする方法を調べたメモ

Store側のテストについては言及があっても、コンポーネント側のテストについてはあまり見かけなかったので調べた内容をメモ。

## 結論コード

### 概要

- Vuex Storeを用意するよ
- mutationsのStubを用意するよ
- 上２つをセットしたwrapperでcalledを見るよ

### コード

``` ButtonStuff.vue
<template>
  <button
    type='button'
    @click='doSomething'
  >
    Do something
  </button>
</template>

<script>
export default {
  name: 'ButtonStuff',
  props: {
    // some properties 
  },
  methods: {
    doSomething () {
      // Mutation 
      this.$store.commit('doStoreMutation', {
        hoge: 'hoge',
        foo: 'foo'
      })

    }
  }
}
</script>

```

``` ButtonStuff.spec.js
import Vuex from 'vuex'
import chai, { expect, assert } from 'chai'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Component from '@/components/Atoms/ButonStuff.vue'

chai.use(sinonChai)

const localVue = createLocalVue()
localVue.use(Vuex)

describe('ButtonStuff.vue', () => {
    describe('Events', () => {
      describe('Click', () => {
        let store

        // 実際のMutationと同じ名前にする。
        const mutations = {
          doStoreMutationA: sinon.stub(),
          doStoreMutationB: sinon.stub(),
          doStoreMutationC: sinon.stub()
        }

        beforeEach(() => {
          store = new Vuex.Store({
            state: {},
            mutations
          })
        })

        it('should be triggered the mutation', () => {
          const wrapper = shallowMount(Component, { store, localVue })
          wrapper.find('button').trigger('click')
          assert(mutations.doStoreMutationA.called)
        })
      })
    })
  })
})
```

※ mutationsを例に書いていますが、actionsも同じ方法でいけるはず。

## ハマった所

- テストコード側の`mutations`オブジェクトに用意したmutationの名前は実際のstoreにあるmutation名と合わせるところ。あまり意識せずに `doStoreMutationMock` みたいにしたらキックされなくて悩んだ
- JestとMocha&chaiでの書き方の違い、それぞれの記法でもう片方はどうするか、実際できるのかがわからず調べるのに時間がかかった。
- `assert`を使ってるけど、本当は`expect`でやりたいが、書き方がまだわかってない（何パターンか試したがコケる）のでこの項目に関して`assert`で妥協している
【2020からPythonを学んでも遅くない】第１回  なぜPythonなのか

```python
print('Hello, Python 2020')
```

## データ分析
一番重要な原因は業界ニーズの駆動だと思います。今は企業のデジタル化の推進に伴い、各企業で大量のデータが蓄積されています。これらの蓄積されたデータの価値を掘り出すには、データ分析が必要であり、**Python**はデータ分析を行う最も強力なツールであり、現在のデータ分析分野の主要言語です。**Numpy**、**Pandas**、**scikit-learn**、**Scipy**、**Matplotlib**、**Seaborn**などの強力なLibraryにより、**Python**はデータ分析の分野で最も重要な地位を占めています。

![DataAnalysis.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/f94fb69b-ead4-2b33-98b6-bb03c25266a4.jpeg)


## 機械学習
第2の重要な原因は**Python**が機械学習の優先言語であることです。機械学習の多くの強力なLibrary、例えば**TensorFlow**、**Keras**、**PyTorch**などは、全部は**Python**をインターフェース言語としています。**Python**言語を利用して、これらの強力なLibraryを簡単に操作できます。機械学習、ディープラーニングにすぐに入門でき、自分のアイディアを速やかに実験と実現できます。
![machinelearning.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/a9a3de6a-2556-65e8-00ef-c05d9644e625.jpeg)

## 簡単、学びやすい
**Python**は非常に簡潔な言語で、非常に簡単で学びやすく、入門しやすいです。**Python**の文法はとても簡単です。**Python**で書かれたコードは非常に読みやすく、英語の自然言語に非常に近いです。**Python**のプログラミング環境も簡単に構築できます。パソコンに**Python**をインストールすれば、原則として**Python**を使ってプログラミングできます。もちろん生産性を高めるために、自分の好みに応じて各種**IDE**をインストールするのをおすすめます。
![Python_image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/5b2d552e-b04d-a9f2-6093-f7dfbc9ee1e4.jpeg)

## 多用途言語
**Python**は多用途言語です。データ収集から、**Web Crawler**、タスク自動化からWeb開発まで、Pythonは全部担当できます。例えば、**Python**は**Excel**を自動に直接操作でき、時間のかかる作業を自動化できます。伝統的な操作方法では何時間、何日間がかかるかもしれない作業は**Python**の自動化コードで何分間で完成できます。もし毎日自動実行すれば一部作業の人力コストを省きます。だから今の名言が流行っています。人生は短いので、**Python**を使いましょう。**Python**は**Web**開発でも非常に成熟しており、代表的な**Web**開発フレームは**Django**と**Flask**があります。以下のサイトやソフトウェアは**Python**で開発されたものです。**Reddit、Dropbox、Duban.com、Blender、BitTorrent**
![webdev.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/d457cfb6-a07b-c9a4-59a5-8721a74702da.jpeg)

## リソース豊富、コミュニティ活発
**Python**はここ数年来とても流行って、コミュニティもとても活発です。**Python**関連のドキュメントも豊富で、たくさんのQAコミュニティー例えば**StackOverFlow**では**Python**関連の問題がたくさんあります。何か問題があったら、検索すれば、すぐに解決方法やサンプルコードが見つかります。**Python**のリソースも非常に豊富で、20万以上の様々な用途のサードパーティ製のLibraryがあり、絶対に各種ニーズを満たすことができます。
![PythonLibs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/557659d4-1156-217c-4d97-3756fc61588a.png)

## 将来性、就職
**AI**や**機械学習**の発達により、データサイエンティストの需要が増加され、**Python**を採用する企業が増加されています。
**Python**の需要はどんどん高まってきますが、今まで日本では**Ruby**と**Java**の技術者がとても多いので、**Python**の技術者不足状況はとても厳重となります。**Python**エンジニアが不足のため、**Python**エンジニアの年収も上がってきて、平均は**650万円**以上です。 
**Python**は国内だけでなく世界中でも人気があります。
<img width="950" alt="pythonJob.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/f10d71d1-1fdc-2fe5-a1e1-9c964cd38bf0.png">

## まとめ
**Python**は勉強しやすく、多用途の強大の言語です。初心者でも比較的学びやすいプログラム言語です。
今の最先端IT技術（**機械学習、データ分析など**）で主な言語としていろいろの場面で使われています。**Python**を身に付けたら、今後の求人市場で価値がもっと高いエンジニアとして活躍でき、より高い収入を得ることも可能です。
**Python**の需要は高まり続けていて、**Python**エンジニアを募集している企業は多く、今から学んでも遅くありません。
それで、**2020年、私と一緒にPythonを勉強しましょう！**
![Rocket.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605091/ff731d9a-9982-9e85-c435-81dda67bd73c.jpeg)
chromebook に Android Studio をインストールする。

chromeOS用のAndriod Studioが公開されたとの情報を掴んだのでインストールしてみました。

下記のサイトから無償でダウンロードできます。
https://developer.android.com/studio

ダウンロードフォルダにダウンロードされるので、右クリックでインストールします。

インストールでエラーが出る場合には下記を参照して、
「Linux で発生した問題を解決する」の対応をしてみて下さい。
https://support.google.com/chromebook/answer/9145439
【RDBMS入門①】『RDBMS』の基礎について

>この記事では、《RDBMS》について、
業務を通して学習した内容を、備忘録としてまとめています。

- __データベースとは…？__
- __RDBMSとは…？__

こういった内容についてまとめています。

__※本記事は、自分で学習したことのまとめ用として書いています。
尚、解説で誤った点があれば、スローして頂ければ喜んでキャッチしますのでお願い致します。__

## 前提知識【５つ】

![shells_script_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/f048a2c0-817f-fc3a-7175-0d99e25ad4b6.jpeg)


1. &ensp;コンピューターでの処理には、__メモリ__と__ディスク__を使用する。
2. &ensp;一般的に、__メモリは揮発、ディスクは不揮発__。
3. &ensp;一般的に、__ハードディスクは速くない。__
4. &ensp;__メモリ__は、__ハードディスクに比べるとかなり速い。__
5. &ensp;__データ__は、__ディスクに書き込んでおかないと、電源が切れた途端に消える。__

## 『データベース』&ensp;とは…？

『データベース』という言葉は、以下の２つの意味を持ちます。

1. &ensp;__様々なデータを蓄積・管理するもの__
2. &ensp;__それらのデータを管理するためのソフトウェア__（データベース管理システム（DBMS））

おそらく・・・

__普段みなさんが使っている『データベース』という言葉は、上記の『２』の意味が多い__と思います。

*__※この記事でいう『データベース』も、上記の『２』を指します。__*

## 『データベース（DBMS）』&ensp;の役割

データを…

- __安全に管理する__
- __高速に取り出す__
- __『正しい』データを取り出す__

を実現すること。

## 『RDB』&ensp;とは…？

![rdbms_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/60d8cacf-7184-1699-86e5-c37110e65e95.jpeg)

__Relational Database（リレーショナルデータベース）__の略語。

関係データベースと訳され、__データを複数の表として管理し、表と表の関係を定義することで、複雑なデータの関連性を扱えるようにしたデータベース管理方式。__

>つまり、__『RDBMS』__は…

>__RDBのデータを管理するための仕組み・ソフトウェア__です。

### ---&ensp;代表的な『RDBMS』&ensp;---

- __MySQL__
- __Oracle DB__
- __SQL Server__
- __DB2__
- __PostgreSQL__

## 『RDBMS』&ensp;を構成するキーワード【４つ】

- __データファイル__<br>
表データを格納するファイルを『データファイル』と呼び、このデータファイルの中に表を作成して、データを挿入する。
- __テーブル__<br>
『行』と『列』からなるデータを格納するための領域。
- __スキーマ__<br>
普段使っているOSで言う『フォルダ（ディレクトリ）』のようなもの。<br>
テーブルなど、すべてのオブジェクトは、何らかのスキーマに所属します。これは、OSのファイルが、何らかのディレクトリに所属するのと同じ。
- __SQL（Structured Query Language）__<br>
リレーショナルデータベース(RDB：Relational Database)の操作を行うための言語

## 『RDBMS』&ensp;の基本について

### Q.１：&ensp;『RDBMS』では、どこにデータを格納する…？
➡︎&ensp;データを表（テーブル）形式で保管する。

### Q.２：&ensp;テーブルは、どのように管理（区分）する…？
➡︎&ensp;スキーマ

### Q.３：&ensp;『RDBMS』で扱うデータ量のイメージは…？
➡︎&ensp;テーブルで数百万〜数千万とか（あるいはそれ以上）

### Q.４：&ensp;データを操作する方法は…？
➡︎&ensp;データ操作用言語のSQLを使用する。

### Q.５：&ensp;『RDBMS』における、主なデータ操作とは…？
➡︎&ensp;CRUD（追加、検索、更新（変更）、削除）

### Q.６：&ensp;『RDBMS』は、同時に一人だけしか使えない…？（同時に複数人使えない…？）
➡︎&ensp;同時に何人ものユーザー（またはプロセス）がデータを参照したり、更新したりする。

### Q.７：&ensp;『RDBMS』は、１台のサーバーで運用する…？
➡︎&ensp;小規模（データ量が少ない、同時アクセスが少ない）なら１台の運用でも可能。
&ensp;&ensp;&ensp;ただし、安全性を高めたり、処理速度を速くする目的で複数台のDBサーバーで運用するのが
&ensp;&ensp;&ensp;一般的。（レプリケーション）

## まとめ｜&ensp;『RDBMS』&ensp;とは…？

![surfers-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/985de6e0-83d6-db25-eb81-7c8129cb1b7b.jpeg)

俗な言い方かもしれませんが、まとめると、『RDBMS』は…

__各スキーマ内のテーブルに、それぞれ何百万件、何千万件ものデータが蓄積されているところに、複数人で同時にデータを追加、更新してもデータが壊れることがなく、__

__複数人で同時に検索しても、素早く正しい結果を返してくれるシステム__です。

また・・・

__データが壊れないような工夫もしているし、仮にデータが壊れたとしても、ある程度は元に戻せる仕組み（バックアップ、リストア、リカバリ）を提供__しています。
kotlinx.android.parcel.Parcelizeのimportでエラーになる

``` kotlin
import kotlinx.android.parcel.Parcelize
```
これがparcelの時点でエラーになる

トップレベルのbuild.gradleで `classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"` を dependenciesに追加する

``` build.gradle
buildscript {
    ext.kotlin_version = '1.3.70'
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.6.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // ↓こいつを追加する
        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
  // 以下略
```

そして肝心なのがモジュールのbuild.gradleでpluginの宣言の順

``` module/build.gradle
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'kotlin-kapt'
```
これが正しい順。 `kotlin-android` のあとに `kotlin-android-extensions` を書かないと表題の通りimportエラーになる。
【Rails】ポートフォリオサイトのトップページがログインページとなる場合の考慮点

公開するポートフォリオのトップページがログインページの場合、
ポートフォリオを確認する際に、ユーザー登録を行う手間が大きく、ポートフォリオを見てもらえない可能性が高まる、という問題がある。

その解決策として、テスト用アカウントの情報をログインページに載せた。

```haml
#account-page.account-page
  .account-page__inner.clearfix
    .account-page__inner--left.account-page__header
      %h2 Log in
      %h5 登録しているユーザーでログイン
      = render "devise/shared/links"
    .account-page__inner--right.user-form
      = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
        .field
          .field-label
            = f.label :email
          .field-input
            = f.email_field :email, autofocus: true
          .field
            .field-label
              = f.label :password
              %i (英数字8文字以上)
            .field-input
              = f.password_field :password, autocomplete: "off"
          .actions
            = f.submit "Log in", class: 'btn'
  .account-page__bottom
    %h3  ※動作確認の際は大変お手数ですが、以下のアカウントにてログインいただけますと幸いです。
    %p  Eメール：testman@test.com
    %p  パスワード：11111111
```


<img width="1680" alt="スクリーンショット 2020-03-18 21.46.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564329/a0f2bbd1-b3aa-cd67-3991-7738dda30028.png">

ってだけの話〜
環境変数の設定&確認方法

今回は、環境変数の設定とその確認方法について書いていきます！
注目すべきは、設定や確認を行う**”ディレクトリ”**です

環境変数を設定するときは、必ず**”ホームディレクトリ”**で行います

macOS Catalinaの場合

```
% vim ~/.zshrc
```
 
macOS Mojaveの場合

```
$ vim ~/.bashrc`
```


次に、環境変数にちゃんと値が渡っているか確かめるために`rails c`コマンドを打ちます
この時のディレクトリは先ほどと違い、**"カレントディレクトリ"**で行います

それぞれ、コマンドを実行するディレクトリに注意して設定・確認していきましょう！
VMware ESXiのVM名で名前解決をしたい

# 背景

仮想マシン名とゲストOSのホスト名が食い違っているときに困りました。VMを新規作成したときに，個々のマシンに設定を流し込むときに苦労しました．そこでESXiの仮想マシン名と仮想マシンに紐付いたIPアドレスをDNSで解決することにしました．

# やりたいこと

VM名が`example`で，VMのIPアドレスが`192.168.100.1`の場合は以下です．

```
$ nslookup example
192.168.100.1
```

# NickNS

インターネットで探したものの，見つからなかったので自作しました．名前はNick Name ServerでNickNS（適当）です．

# 機能

- 正引き:仮想マシン名 `example` →仮想マシンのIPアドレス `192.168.100.1`
- 逆引き:仮想マシンのIPアドレス `192.168.100.1` →仮想マシン名 `example`

# 使い方

インストールします．

```shell
go get github.com/cdsl-research/nickns
```

事前にESXiのノードのSSHを開放して鍵認証でSSHできる状態にします．そして，以下の形式で設定ファイルを作成します．

```toml:hosts.toml
[host A]
address = "esxi.example.com"
port = "22"
user = "root"
identity_file = "/path/to/id_rsa"

[host B]
address = "esxi.example.com"
port = "22"
user = "root"
identity_file = "~/path/to/id_rsa"
```

DNSサーバとしての動作を設定ファイルで指定します．

```toml:config.toml
port = 5310
domains = ["local.", "example.com."]
ttl = 3600
```

バイナリを実行して起動させます．

```shell
$ nickns
2020/03/14 21:40:25 NickNS Starting at 5310/udp
```

試しにdigコマンドでチェックしてみます．

```shell
# Type A
$ dig A +short @127.0.0.1 -p 5300 elastic5.local
192.168.0.35
$ dig A +short @127.0.0.1 -p 5300 unbound.example.com
192.168.0.35

# Type PTR
$ dig +short @127.0.0.1 -p 5300 -x 192.168.0.35
unbound.local.
```

サーバ側でもログが出力されます．

```shell
$ nickns
2020/03/14 21:40:25 NickNS Starting at 5310/udp
2020/03/14 21:40:27 [QueryHit] elastic5.local. => 192.168.0.36
2020/03/14 21:40:30 [QueryHit] elastic5.example.com. => 192.168.0.36
```

# 実際の動作の様子

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103672/6404c55b-d6ae-42df-e9f8-a50e542add0f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103672/6477030b-0c16-27fa-2243-c150ed27fc21.png)

# 仕組み

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103672/abda8b10-f0ff-71cf-fc9d-3c2ad09365c4.png)

ESXiノードにSSHして `vim-cmd` を叩いています．

# 使用した技術

- Go言語
- DNSフレームワーク [miekg/dns](https://github.com/miekg/dns)

# 終わりに

プロトタイプレベルの雑な実装になっているので，以下の機能を追加したいと思っています．

- DNSクエリのキャッシュ
- Graceful Restart
- コマンド引数によるパラメータ変更

GitHub: [cdsl-research/nickns](https://github.com/cdsl-research/nickns)

PullReqやStarをいただけると嬉しいです．
【UE4】UE4エディタだけでアニメーションを加工する／第13回UE4ぷちコン進捗 - 2020/03/18 ②

[1]:http://historia.co.jp/ue4petitcon13
[2]:https://www.unrealengine.com/ja/blog/new-free-content-coming-to-the-unreal-engine-marketplace
[3]:https://www.unrealengine.com/marketplace/ja/product/7f7775996f7442b187f6fa510ec9d289


[株式会社ヒストリアさん主催の第13回UE4ぷちコン][1]の作業進捗（本日２つめ）

# 無料アセットのアニメーションを加工したい

UE4 マーケットプレイスで[2018年11月に永久無料][2]になった[Quadruped Fantasy Creatures][3]にドラゴンが入っている。
このアセットは結構なクオリティで、しかもアニメーションもしっかりそろっている。
これを例の恐竜たちの敵として使いたい。

…ということで、

- いつもの恐竜を「地竜 (Saurus)」
- このドラゴンを「飛竜 (Dragon)」

と呼び分けることにする。

今回作っている作品は地竜が地面を走り回り、飛竜がそれを襲う（食べる！）ようにしたい。
ところが、この[Quadruped Fantasy Creatures][3]に入っている噛みつきアニメーションは、噛みつく位置が高い。

…と、言葉で書くより、結果の GIF アニメを見た方が早い。

![20200318_2102.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/bc0ec4c8-b8ac-70ae-4cfd-af7d14a054b3.gif)

- 【右側】もともとの噛みつきアニメーション。
    - 噛みつく位置が高くて、地竜に届かない。
    - 動きが小さくて、ちょっと寂しい。
- 【左側】加工後のアニメーション。
    - 体を低くして、前方に飛び出しながら噛みつくように加工した。
    - 地面すれすれを狙うので、頭を横向きにねじる形に加工した。
    - ついでに、いかにも悪のドラゴンっぽいマテリアルにした。
 
これ、UE4 エディタだけで意外とできちゃった。

> しかも、予定外にええ感じにダイナミックな動きになってくれた！

# やったこと

## IK 用に Virtual Bone を追加

![20180318_2126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/3e4e43ae-267e-63f3-8b31-a8b7207ec367.png)

薄紫色の４つのボーンがそれである。名前の通り、IK 用に４足分用意した。
これらの Virtual Bone の親は、もともとのルートにしておいた。

## アニメーションアセットのコピー

ただ単に、オリジナルを壊してしまったら後が面倒くさいので、コピー作ってそれをいじった、ということ。

## Anim Graph で IK を作成

![20200318_2130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/28e0a71b-dfa5-12f4-120f-894992cc4b00.png)

Details Panel に載っている細かいパラメータは割愛（すみません。長くなるので）
大雑把には、

- **Copy Bone:** IK ボーンに、対応するボーンの Transform をコピーしておく。
- **Transform (Modify) Bone:** pelvis ボーンを低く、前方にずらす。
- **Leg IK:** 四肢に対して IK を実行。（アルファについては後述）

これで、四肢の位置は固定したまま、体全体が低く前に伸びる。

## Anim Curve で Transform (Modify) Bone に渡すアルファを作成

![20200318_2137.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/f4be30af-c9a9-4ad8-4331-b8406513d1d5.png)

IKAlpha と命名。これが上記 Anim Graph の Transform (Modify) Bone のアルファの値となる。
３つのキーがあるが、

- **1つ目: IKAlpha=0**  pelvis がオリジナルのアニメーションの位置となる。
- **2つ目: IKAlpha=1**  pelvis が低く前方に伸びた位置になる。
- **3つ目: IKAlpha=0**  pelvis がオリジナルのアニメーションの位置に戻る。

これで、噛みつくときだけ低く前方に伸びるような動きになる。

## Additive Layer Track で各ボーンのアニメーションを加工する

![20200318_2142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/74c23c50-07e2-f8b2-94ef-4dcdd2bccb90.png)

これはひたすら勘…としか言いようがない。
とにかく、ひたすらええ感じになるまで頑張る。（カーブの形よりはタイミングが大事！)
DCCツールでのアニメーション編集の経験がないと苦しいかもしれない…

> MMD 経験者ならいけるかも？ （注：私は MMD ユーザーではありません）

## Anim Blueprint で録画して、新しいアニメーションアセットとしてベイクする

![20200318_2147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/c1049d98-b685-805d-e21b-e29ee739952f.png)

右下の録画ボタンで新しいアニメーションアセットとしてベイクしてくれる。
ただし、録画を停止するまで、ただ漠然とデータを作り続けるので注意。
最終的には、できたアセットから必要な部分だけを切り残す必要がある。

> 1 ループだけ録画する、みたいな機能を追加してほしい。


今日はここまで。
プログラムはなぜ動くのか？を読んでみてまとめることで知識の定着を図る投稿#8

[プログラムはなぜ動くのか第２版](amazon.co.jp/プログラムはなぜ動くのか-第２版-知っておきたいプログラムの基礎知識-矢沢久雄/dp/4822283151/ref=sr_1_1?adgrpid=53631245656&gclid=Cj0KCQjw0pfzBRCOARIsANi0g0tajATNcn3H7Ogokqrdst5O2JctSzMRb6A0XyW5GegcPbJwaEvZO84aAlK8EALw_wcB&hvadid=338517958683&hvdev=c&hvlocphy=2392&hvnetw=g&hvqmt=e&hvrand=9776556383623440456&hvtargid=kwd-334563073858&hydadcr=27265_11561134&jp-ad-ap=0&keywords=プログラムはなぜ動くのか&qid=1583760691&sr=8-1)

を僕が師匠と読んでいる方に進めていただき、読んでみようと思いました。
そこで、僕的にはかなり難しいこともあり、この本をまとめながら読み進めていくことによって理解度を高めようと思いました。

こちらはあくまでも推奨する記事ではなく、僕がこうした方が定着しやすいかもと思い、記録に残すことにしました。

##ところで2進数とは？

そもそも、２進数とは何でしょうか？

２進数の仕組みを明らかにするために

「00100111」という2進数の値を10進数に変換してみましょう

2進数の値を10進数の値に変換するには、２進数の各桁に　「重み」　をかけ、

その結果を　「足す」　という変換方法を使います。

なぜこのような変換方法になるのか、説明できますか？
（ここまじで鬱陶しいと思った。本読んだことある人ならわかってくれるはず、この上から目線の物の言い方よ）

「理由はわからないが、変換方法は丸暗記している」というのではいけません。2進数から10進数への変換方法は、２進数の仕組みを知っていれば、丸暗記する必要などないのです。

10進数とくらべながら２進数の仕組みを説明しますので、必ずマスターしてください。

##２進数から10進数への変換をマスターしよう

![スクリーンショット 2020-03-18 21.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253981/a6e4c9af-dae9-0629-396d-c8522dd8fc59.png)

まず、「重み」の意味を説明しましょう。

例えば、１０進数で表された39という数値の各桁が、単に3や9という数値を表しているのではないことはわかりますね。（へぇ〜）

3は3*10=30を表し、9は9*1=9を表しています。

この、各桁の数値にかけている10や1などの値のことを重みとよびます。

桁が違えば重みも違います。

桁が上がれば、だんだん重くなるのです。（利根川かな？）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253981/a862e720-be60-5e94-b340-6720f8c6296a.png)

重みを表す「〇〇の××乗」の「〇〇」の部分は、10進数なら10, 2進数なら2です。

これを基数と呼びます。

そしてその重みをたすということは

39は

30+9という風に表されます。

2進数では

(0*128)+(0*64)+(1*32)+(0*16)+(0*8)+(1*4)+(1*2)+(1*1)

0+0+32+0+0+4+2+1=39

と表されることです。

##まとめ

納得した。初めて2進数がわかったかもしれん。
Neural netによってMNISTを2次元ベクトルに圧縮してみる

#はじめに
Auto encoderで知られているように、neural netは入力データから必要な特徴を抽出して、圧縮された(次元の小さな)ベクトルとして表現することができます。
今回はMNISTのclassificationのレイヤーの直前に、2つだけノードを持つレイヤーを入れて、2次元ベクトルとして表現できるか実験してみました。
うまくclassificationできた場合、2次元ベクトルはclassificationに必要な情報をencodeしたものと言えるはずです。

#Network
一般的なMNISTのclassificationと同じようにcomvolusionとfully connected layerで作りますが、出力(dense_3)の一つ前にノードが2個のレイヤーを挟みました。
Logitとactivation両方が見たかったので、activation無しのdense_2とReLUの二つのレイヤーが2次元ベクトルを出力します。
Activationの部分にLeaky ReLUやSigmoidを使ったバージョンも作ってます。
![Network.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/f273d9aa-a5c4-edf5-d210-378ed119f981.png)

#ActivationにReLUを使った場合
Trainingは一瞬で終わります。5分くらいでaccuracy 100%になりました。
Training済みのnetworkにtest dataを入力して、得られた2次元のベクトルの座標に入力画像をプロットしてみました。

###Activationからの出力
このようになりました。
![ReLU_activation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/5a2e8138-febe-3981-29cc-3872286d11be.png)
ReLUの出力なのでマイナスになることはありませんね。
同じ数字が塊になるのではなく、原点から伸びる放射線の、同じ直線の上に集まるようです。
1や2が見づらいですが、原点の近くに固まっています。
2次元の極座標のような解釈をすると、各classは(r,θ)できれいに説明できそうです。
(r,θ)だけ見れば人間でもclassificationできそうです。Classificationに必要な情報が圧縮されたベクトルと言えそうです。

###Logitからの出力
Activationをプロットしたものと似てますが、少しマイナスの値が出ています。1と2の違いが分かりやすい。
![ReLU_logit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/2e0180e3-b78e-cc68-4588-d465a121b7bf.png)

#ActivationにLeaky ReLUを使った場合
こちらはReLUよりさらに早くtrainingが終わりました。

###Activationからの出力
![LeakyReLU_activation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/8e6da5ac-07b6-d89f-e4d7-663f43b82842.png)
マイナスも使ってきれいに数字が分離されてます。ReLUと同じように、同じ数字は放射線状の同じ直線の上にまとまっていますね。

###Logitからの出力
蛇足のようになってきましたが、放射線状にまとまってます。
![LeakyReLU_logit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/50299bb7-110b-a3fb-5c53-c246c11c3db5.png)

#ActivationにSigmoidを使った場合
こちらは1時間くらいtrainingしてようやくaccuracy 100%になりました。

###Activationからの出力
![Sigmoid_activation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/e582ea4b-4002-3dbd-7c36-108aa05fedf0.png)
Sigmoidは0から1の範囲の値を出力しますが、多くのclassがどちらかの軸のリミットに張り付いてます。
スカスカに見えますが今までのプロットと同じサンプル数をプロットしてますので、各classが小さな範囲にまとまっているようです。

###Logitからの出力
![Sigmoid_logit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359295/ac251c63-a599-a286-903b-7fb8e625ff2b.png)
こちらはReLUなどと同様に放射線状の分布になりました。

#まとめ
10classのclassificationに必要な情報は2次元ベクトルで表現できることがわかりました。
また、そのベクトルは同じclassが放射線上の同じ直線の上にまとまっていて、簡単にclassが推測できる情報がencodeされていました。
次は1次元で試してみようと思います。
Django: 別 Middleware に依存している Middleware をテストする

# 概要
自作の Middleware を試験したいけど、別の Middleware に依存しているケースの対処法です。

## どういうケース？
Middleware をテストする場合、 
~~Middleware のインスタンスを作成し、`process_request` メソッドを呼ぶのがメジャーなようです。~~ 
~~参照: [Unit Testing Django Middleware - Adam Donaghy - Medium](https://medium.com/@adamdonaghy/unit-testing-django-middleware-2e8cb26e06ca)~~
※追記
嘘でした。Middleware の実装で `process_request` 関数の実装をしているケース(古めの実装)でのみ有効な話でした。
Middleware のクラスからインスタンスを作成し、インスタンスに対して mock を渡して実行でよさそうです。(かなりシンプル)
[python - Testing custom Django middleware without using Django itself - Stack Overflow](https://stackoverflow.com/a/43016718)

しかし、別の Middleware で何かしらの処理を行っていることを前提にしている Middleware について、上記の方法では対応できません。
例えば、認証情報に係る処理を行う Middleware の場合、セッション関連のミドルウェアなどを経由していないと `request.user` 参照時に `user` attributeが存在せず例外が発生することなどが考えられます。

# 対処
- `self.client.get()` で実行します (View を試験するのと同じように)
- Middleware が下の層を呼び出す `get_response()` を適当なMockに差し替えます  
    - ※クラスインスタンスが持つ `get_response()` は `__init__` で注入するものになっているので、`__init__` を適当なメソッドにすり替える必要があります。


# サンプル

## Middleware
```
class SampleMiddleware(object):
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        # いろいろやる

        return self.get_response(request)
```


## テスト
```
from unittest import mock

from django.http import HttpResponse
from django.test import TestCase

def fake_init(self, _):
    def get_response(request):
        return HttpResponse()

    self.get_response = get_response


class SampleMiddlewareTest(TestCase):
    def setUp(self):
        self.mock_init = mock.patch.object(
            AuthMiddleware, "__init__", fake_init
        ).start()

        self.addCleanup(mock.patch.stopall)

    def test_いろいろテスト(self):
        # リクエストする
        self.client.get("/")

        # assertする
```

# 参照
- [Mocking complicated `__init__` in Python - George Shuklin - Medium](https://medium.com/@george.shuklin/mocking-complicated-init-in-python-6ef9850dd202)
	- `__init__` を lambda で何もしない関数を注入しているサンプルを参考にしました。
東京都コロナウイルス対策サイトの仕組みを眺める

# はじめに

[東京都の新型コロナウイルス感染症対策サイト](https://stopcovid19.metro.tokyo.lg.jp/)が「デプロイも自動化されていてすごい」と話題になっていたのでどのような仕組みになっているのだろうと眺めてみました。
https://github.com/tokyo-metropolitan-gov/covid19

# ページの作成方法：Nuxt.js

dockerとかnodeという単語が見えたので「Node.jsを使ったアプリサーバをDockerイメージにしてるのかな？」と初めに思ったのですが違いました。
ページは[Nuxt.js](https://ja.nuxtjs.org/)を使って、しかも、[静的ファイル生成](https://ja.nuxtjs.org/guide#%E9%9D%99%E7%9A%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E7%94%9F%E6%88%90)で作られています。

## データはどうやって？

あれ？静的ファイルが作られてる（DBとかと通信しない）のならグラフとかに使う数値はどうやって取ってるのだろうと思ったのですが、それについては、**コミットされているJSONファイルを読み込む**という形式でした。例えば[pages/index.vue](https://github.com/tokyo-metropolitan-gov/covid19/blob/v1.1.5/pages/index.vue#L34-L35)では以下のようになっています（位置がずれるとあれなので固定バージョンにリンクします）

```js:index.vue抜粋
import Data from '@/data/data.json'
import News from '@/data/news.json'
```

[data.json](https://github.com/tokyo-metropolitan-gov/covid19/blob/v1.1.5/data/data.json)は2020/3/17時点で2388行のファイルになっています。
data.jsonはExcelファイル（xlsx）を[tool](https://github.com/tokyo-metropolitan-gov/covid19/tree/v1.1.5/tool)にあるconvert.phpを使って変換して作っているようです。

# ページのビルド方法：Github Actions

README.mdには「masterブランチがアップデートされると、自動的にproductionブランチにHTML類がbuildされます」とありますが、これについては[Github Actions](https://help.github.com/ja/actions)が使われています。ワークフロー設定は[.github/workflows](https://github.com/tokyo-metropolitan-gov/covid19/tree/v1.1.5/.github/workflows)で確認できます。

# ページのデプロイ方法：Netlify

ここまででページがビルドされるのはわかったのですが、ワークフローを見てもビルドされたページがどうデプロイされてるのかがわかりませんでした。静的サイトなんだしS3か何かでCDNしてるのだろうなと思ったのですが。

そんなこと考えながらREADME.mdを見ているとstagingのドメインに[netlify](https://www.netlify.com/)と入っていることがわかりました。netlifyは推測通りにCDNで、Githubにpushしたらサイトが更新されるようにできるようです。本番サイトも確認したらnetlifyでした。

なお、Netlifyの使い方については[こちらの方の記事](https://qiita.com/sugo/items/2ee64887d682b0dae635)もご参照ください。

# 開発環境用ファイル

さて初めに勘違いしたDockerについて。これは本番サイトで使われているわけではなく開発環境を素早く立ち上げられるようにということで入っているようです。
このような開発用のファイルも入れておくことでありがちな「環境整備が大変で挫折」ということを避けられるのがいいなと思いました。

# まとめ

以上、東京都の新型コロナウイルス感染症対策サイトがどう作られているかを見てみました。まとめると以下のようになります。

- ページはNuxt.jsで静的に生成される
- 静的生成自体はmaster等にpushされるとGitHub Actionsで実行される
- ビルドされたページはNetlifyによりproduction等から取得される

# あとがき

ここ数年「大量のスループットをさばくにはどうすればいいか」ということを探究しており、DockerとかKubernetesとか、言語やライブラリ自体での高スループット達成方法とかをいろいろ見ていたのですが静的ページ（表示した後でAjaxとかもしない）という解決策は目から鱗でした[^1]。もちろん、「ほぼリアルタイム」にデータの更新を反映しないといけないシステムには適用できませんが。

[^1]: 当然、Netlifyの中はDockerとかKubernetesとかが使われていると思います。

今回の一件が収まったらご本人様による解説もぜひ読んでみたいです。
Amplify auth は複数のコールバックURLに対応していない


Vueで作ったアプリケーションにAmplifyでFacebook認証機能をつけた。

ところが認証ボタンを押して見ると以下のアドレスにリダイレクトされ、「An error was encountered with the requested page.」というエラーが表示されてしまう。

`https://vueamplify-facebook1e4b7722-1e4b7722-dev.auth.ap-northeast-1.amazoncognito.com/error?error=redirect_mismatch&client_id=2ekt6keenqpntdpftetaeeqlh5`

**redirect_mismatch**??

あれこれ試してみたところ、`amplify add auth`の際に、認証後のリダイレクト先のURLを複数指定していたのが原因の様子。

## `amplify add auth` で複数のコールバックURLを指定

Amplify Consoleで`master`と`development`ブランチ用の環境が構築されているのと、あとは開発用に`localhost`の計3つのURLを指定していたのだった。

```bash
? Do you want to add another redirect signin URI Yes
 Enter your redirect signin URI: https://master.d3bh1ri8gu6eyb.amplifyapp.com/

? Do you want to add another redirect signin URI Yes
 Enter your redirect signin URI: https://development.d3bh1ri8gu6eyb.amplifyapp.com/

? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:8080/
```


## 仕様です

Amplify CLIのリポジトリにissueがあがっていた。
どうやら仕様とのこと。

[Allowing multiple redirectSignIn/redirectSignOut urls breaks federated auth #2792](https://github.com/aws-amplify/amplify-cli/issues/2792)

**Sorry guys but in fact, this is a normal behavior.**

> There is no way for the react app. to know by default which URLs to use when you have two or more URLs. You must inform the app. to use one of these URLs

アプリケーション側からどのコールバックURLが有効なのか判定できないから、らしい。

## 対応方法

このissueでいくつか対応策が議論されている。
`aws-exports.js`を読み込んだ後に改めて1つのコールバックURLを指定する感じ。

基本的に`window.location.hostname` の値をみてどのリダイレクトURLを使うか判定する感じなのかな。
最後のほうにdjheru氏が投稿したコードを参考にするのが一番いいかもしれない。

```js
if (awsmobile.oauth.redirectSignIn.includes(',')) {
  const filterHost = url => new URL(url).host === host;
  awsmobile.oauth.redirectSignIn = awsmobile.oauth.redirectSignIn
    .split(',')
    .filter(filterHost)
    .shift();
  awsmobile.oauth.redirectSignOut = awsmobile.oauth.redirectSignOut
    .split(',')
    .filter(filterHost)
    .shift();
}
```

(https://github.com/aws-amplify/amplify-cli/issues/2792#issuecomment-575406663)


## まとめ

**仕様です**とのことだけど、CLIで対応してくれ的な意見も出ている。
`feature-request`ラベルが付けられているのでいつかは対応されるかも。
issueも閉じていないし。

手元でざっくり試した感じ↑のコードでうまくいきそうなので、CLIが対応するまでは各自対応しておきましょうってことで〜。
Mysql2::Error

### MySQLが起動しない。

## エラー内容
```
Mysql2::Error::ConnectionError (Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)):
```
前日まで問題なくRailsの勉強をしていました。作成したアプリケーションを確認するために

```
rails s
```
するとエラーがでました。

## 仮説
MySQLへアクセスするためのsockファイルを見つけれずアクセスできない。

## トラブル解決手順
1.ターミナルに下記のコードを入力しデータベースの中身を見る。

```
$ ls -la /usr/local/var/mysql/
```
すると

```
total 380944
drwxr-xr-x  66 _mysql  _mysql      2112  3 17 23:50 .
drwxrwxr-x   4 user    admin        128 12 12 00:27 ..
drwx------  11 _mysql  _mysql       352  1 26 17:54 DataBaseDesignSample_development
drwx------   3 _mysql  _mysql        9３  1 26 17:15 DataBaseDesignSample_test
drwx------   9 _mysql  _mysql       28３  2 11 19:28 ajax_development
drwx------   3 _mysql  _mysql        ３6  2 11 19:27 ajax_test
-rw-rw----   1 _mysql  _mysql        56 12 12 00:30 auto.cnf
-rw-r-----   1 _mysql  _mysql         0  2 15 15:53 binlog.index
```
上記のような感じで表示される。

2.次に下記のコードを入力

```
$ ls -la /usr/local/var/
```

実行すると下記のような表示が出る。問題なさそう.....

```
drwxrwxr-x   4 user    admin    128 12 12 00:27 .
drwxr-xr-x  13 root    wheel    430  1 31 21:15 ..
drwxrwxr-x   4 user    admin    128 12 12 00:03 homebrew
drwxr-xr-x  36 _mysql  _mysql  3112  3 17 23:50 mysql
```

3.このコードを入力するとエラーが解決！

```
$ sudo mysql.server start
Starting MySQL
... SUCCESS! 
```
ちなみに下記のコードではエラーの解決にはいたりませんでした。

```
$ mysql.server restart
```
## 最後に
同じ初学者の方は似たようなエラーで悩まされてると思います。
restartではなくstartと入力すること、初めにsudoと入力することでもっと強力な指令となるみたいです。
同じエラーで困る人のお役に立てればと思い投稿しました。
初学者の皆さん一緒に頑張りましょう！
Firebaseアプリデプロイ

# 概要
動画を作ったついでのメモ。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/vbOwSxsKIz8/0.jpg)](http://www.youtube.com/watch?v=vbOwSxsKIz8)


# 前提
・`Firebase CLI`をインストール済み
・`Firebase CLI`にログイン済み
・`Linux`または`MAC`
・`nano`がインストール済み

# コマンド 


```sh
# アプリケーションフォルダ作成
mkdir {appname}

# フォルダ内に移動
cd {appname}

# カレントフォルダをFirebaseで初期化
firebase init

# 利用するサービスの選択。(単純なホームページであればHostingでOK)
# スペースで選択し、エンターで次に
>? Which Firebase CLI features do you want to set up for th>is folder? Press Space to select features, then Enter to confirm your choi
>ces. (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ◯ Database: Deploy Firebase Realtime Database Rules
> ◯ Firestore: Deploy rules and create indexes for Firestore
>❯◯ Functions: Configure and deploy Cloud Functions
> ◯ Hosting: Configure and deploy Firebase Hosting sites
> ◯ Storage: Deploy Cloud Storage security rules
> ◯ Emulators: Set up local emulators for Firebase features

# プロジェクトをどうするか？基本的にGCPに紐付いている。
# あまり考えたくなければ「Create a new project 」で良い
>? Please select an option: (Use arrow keys)
>❯ Use an existing project 
>  Create a new project 
>  Add Firebase to an existing Google Cloud Platform project 
>  Don t set up a default project 

# 作成するプロジェクト名6-30で既存のものにかぶらないように
>? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
> () 

# プロジェクトの呼び名？プロジェクト名そのままであればエンターでOK
>? What would you like to call your project? (defaults to your project ID) ()

# ホームページを設置するフォルダ名の指定、初期値はpublicなのでそのままエンターでOK
>? What do you want to use as your public directory? (public) 

# すべての要求をindex.htmlに集約するかどうか？
# SPAにする場合はYES
>? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

# --これでFirebaseへの登録は完了--
# HTMLを設置するパブリックフォルダへ移動
cd public

# 存在するindex.htmlを削除
rm index.html

# 新規にindex.htmlを作成
nano index.html
>こんにちわ ホームページです。

# カレントフォルダに戻る
cd ..

# クラウドにデプロイする
firebase deploy
>Project Console: https://console.firebase.google.com/project/{appname}/overview
>Hosting URL: https://{appname}.firebaseapp.com

# >Hosting URL: https://{appname}.firebaseapp.com
# を参照にデプロイしたページを確認する

```
MACのvimでコピーができるようになるまで

# 最初に
mac標準のvimで、文章を書こうとしたら、なぜかyyでコピーもできなかった。。。
ググって、下記を見つけた。
[macのvimでクリップボードにコピーを使いたい！！](https://qiita.com/n_oshiumi/items/7b3198d3565e84bfa611)

なるほど、homebrewでインストールすればいいのかと思い、とりあえず実行。

# これだけやれば、vimでコピーはすぐ使えるようになった！
```
brew update
```
```
brew install vim 
```
以上！コピーできるようになった！良かった！

# 補足
情報元の方が書いた方法だと、よく考えたらアップデート対応が面倒だな〜と思い、他に方法がないか探していた。
で、下記を見つけた。
[OS X に Vim を Homebrew でインストールして vi で起動する - Qiita](https://qiita.com/takuya0301/items/c5ed4d025e19bc378ed0)
オプション入れたらいけるのかーと思い、トライしてみた。

```
brew install vim --with-override-system-vi
```
でも、このコマンドをやってみると、下記のエラーが出ていた。

```
Error: invalid option: --with-override-system-vi
```

なんでだろーと思い、調べてたら、下記を発見。
[brew install got Invalid option error #817](https://github.com/skwp/dotfiles/issues/817)

まあ、みんな気になっていたみたいだけど、
結局のところ、オプションなしで入れてみて、同じような結果になることがわかった。
オプションがデフォルトになって、インストールが簡単になったのかな。
上記のコマンドの結果、最終的なvimとしては、下記のようにリンクで参照されていた。OK。

```
$ which vim
/usr/local/bin/vim
$ ls -la /usr/local/bin/vim 
lrwxr-xr-x  1 user  admin  30  3 18 20:19 /usr/local/bin/vim -> ../Cellar/vim/8.2.0350/bin/vim
```

# 環境
```
$ brew --version
Homebrew 2.2.10
Homebrew/homebrew-core (git revision d7e71; last commit 2020-03-17)
Homebrew/homebrew-cask (git revision 382de; last commit 2020-03-18)
```
兵庫県のCOVID19感染者状況のGraphQL APIを公開してみた。

# どんなAPIにしたか
3分ごとに
↓↓↓よりエクセルファイルをダウンロードし
https://web.pref.hyogo.lg.jp/kk03/corona_kanjyajyokyo.html
読み込んだデータをDBに書き込みます。
別のコンテナにgraphQLサーバーを用意して配信します。


# コンテナ構成
- DB自動書き込み用コンテナ(pythonで実装)
- GraphQLサーバー(Goで実装)


# ところが、残念ながら...(2020/3/18)
リリース後
定期実行される
pythonが読み込んでいる
エクセルファイルに想定外の変更が
`before`
<img width="361" alt="スクリーンショット 2020-03-18 17.12.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224153/2501b13d-5b2f-844d-c6cd-b123e217953e.png">


`after`
画像の通りなんと空のセルで表現した二重線が追加されてしまいました。
ここに想定外のnullが発生してエラーが発生してしまい。
エクセルのデータをDBに書き込めないという状態になりました。
<img width="488" alt="スクリーンショット 2020-03-18 17.12.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224153/c8cfe46e-7a09-d33f-50eb-d6209a911535.png">

まぁ、担当の方が思いつくままに作っておられるであろうエクセルファイル仕方ありませんね。
なので、残念ながら3月16日までのデータしか提供できない状態となってしまいました。
残念！

# 修正して公開しなおしました！(2020/3/19)
pythonのcronとgraphQLを組み合わせたサービスの実験に...
くらいのテンションで作ってみたapiだったので
さらっと諦めかけていたのですが
上述のエクセルの空のカラム問題
なんのことは無い
空のカラムは読み飛ばせばいいじゃ無いかという事で
修正したらいけました。

https://hyogo.covid19-api.ga
GraphQLのプレイグラウンドも公開しています。
https://hyogo.covid19-api.ga/playground
一応、ソースコードも
https://github.com/inadati/hyogo-covid19-api.services

# Playgroundでapiを試す
エクセルの表のヘッダーとGraphQLのフィールドの関連がこちらです。
<img width="1295" alt="スクリーンショット 2020-03-19 13.35.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224153/f951062d-09b2-3386-6153-856b7361833d.png">
こんな感じのクエリを投げると...

```graphql
query{
  readInfectedPeoples{
    no
    confirmed_date
    age_group
    sex
    jurisdiction
    residence
    occupation
    onset_date
    travel_history
    remarks
    infected_places{
      name
      is_relation
    }
  }
}
```
こんな感じで返ってきます。
エクセルの「認定こども園」以降のカラムはinfected_places(感染場所)でリスト取得できます。
詳しくは、[プレイグラウンド](https://hyogo.covid19-api.ga/playground)のDOCSタブで確認してみてください。

```json
{
  "data": {
    "readInfectedPeoples": [
      {
        "no": 86,
        "confirmed_date": "2020-03-17T00:00:00Z",
        "age_group": 70,
        "sex": "女性",
        "jurisdiction": "伊丹",
        "residence": "伊丹健康福祉事務所管内",
        "occupation": "無職",
        "onset_date": "03月07日",
        "travel_history": "なし",
        "remarks": "介護老人保健施設グリーンアルス伊丹デイケアを利用",
        "infected_places": [
          {
            "name": "認定こども園",
            "is_relation": false
          },
          {
            "name": "北播磨医療センター",
            "is_relation": false
          },
          {
            "name": "グリーンアルス",
            "is_relation": true
          },
          {
            "name": "宝塚第一病院",
            "is_relation": false
          },
          {
            "name": "仁恵病院",
            "is_relation": false
          },
          {
            "name": "介護保険通所事業所",
            "is_relation": false
          },
          {
            "name": "海外渡航者",
            "is_relation": false
          },
          {
            "name": "ライブ関係",
            "is_relation": false
          }
        ]
      },
      ...
    ]
}
```
Android NDK + C++14 設定 cmake で no member named `make_unique` in namespace `std` エラーなどが出る

## 背景

C++14 を要求されるコードを

```
set(CMAKE_CXX_STANDARD 14)
```

と設定しても, 

```
no member named `make_unique` in namespace `std`
``` 

などで, make_unique 周りでコンパイルがこける.


## 原因

たぶんなにか他の add_subdirectory などで追加している third party library が, CXX flags に直接 `-std=c++11` など他の C++ バージョンを指定してしまっている可能性が高いです.

`CMAKE_MAKEFILE_VERBOSE=On` を cmake bootstrap に追加するなどして, コマンドラインで適切に C++14 モードになっているか確認してみましょう.

```
set(CMAKE_CXX_STANDARD 14)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_EXTENSIONS OFF)
```

として, 厳格に `-std=c++14` でコンパイルするようにするとよいかもしれません.

## call to 'make_unique' is ambiguous エラー

spdlog を Android + C++14 でビルドするときに発生しました.

なにか他の Android ヘッダと定義がかちあっているようです.
先に spdlog のヘッダをインクルードするようにすると解決しました.
Common Lispを勉強するためのリンク集

# Common Lispを勉強するためのリンク集

ブックマーク代わりに見つけた良さげなドキュメントやオンラインで読める本をまとめてみました。処理系毎の拡張を初心者向けに優しく、すごくお優しく解説してくれるようなドキュメントが見つからない……。

## Common Lispのドキュメント
- [Common Lisp - A Gentle Introduction to Symbolic Computation](https://www.cs.cmu.edu/~dst/LispBook/)
図と合わせてすごく丁寧に詳しく書かれている本で、初心者の自分にとっては一番わかりやすいなと感じてます。

- [Common Lisp Quick Reference](http://clqr.boundp.org/clqr-a4-consec.pdf)
独特の表記方法なんですが、狭いスペースにシンプルにしっかりまとめられたリファレンスだと思います。

- [Common Lisp Hyper Spec](http://www.lispworks.com/documentation/HyperSpec/Front/index.htm)
978個あるCommon Lispのシンボルの辞書。コードを読んでいてわからないオペレーターが出てきたら、とりあえずここを参照します。

- [Common Lisp the Language, 2nd Edition](https://www.cs.cmu.edu/Groups/AI/html/cltl/cltl2.html)

- [Practical Common Lisp](http://gigamonkeys.com/book/)

- [Successful Lisp](http://successful-lisp.blogspot.com/)

- [Paradigms of Artifical Intelligence Programming ](https://github.com/norvig/paip-lisp)

- [On Lisp](http://www.paulgraham.com/onlisptext.html) / [On Lisp 日本語版](http://www.asahi-net.or.jp/~kc7k-nd/onlispjhtml/)
  オンラインで読めますが、書籍のほうは表紙が素敵です。マクロについて詳しい説明があり、CLOSはどのようにして実現しているのか、みたいなことまで詳しく書かれています。自分で複雑なマクロを書いたことはまだないのですが、マクロがどのように展開されて処理されるのかを知りたい時、この本を参照すると理解しやすいです。

- [Learn Common Lisp](https://lisp-lang.org/learn/)
  短く簡単にまとめられてます。

- [LET OVER LAMBDA](https://letoverlambda.com/)
  この本難しいです。初心者は読んだらだめなやつ？です。

- [CASTING SPELs IN LISP](http://www.lisperati.com/casting_spels.pdf)

## 処理系毎のドキュメント

### ECL

- [ECL User's Guide](https://common-lisp.net/project/ecl/static/ecldoc/)

### SBCL

- [SBCL User Manual](http://www.sbcl.org/manual/index.html)

### Clozure CL

- [Clozure CL Documentation](https://ccl.clozure.com/docs/ccl.html)


## システム・ツールのドキュメント

- [Emacs](https://www.gnu.org/software/emacs/manual/html_node/emacs/index.html)

- [SLIME](https://common-lisp.net/project/slime/doc/html/)

- [ASDF](https://common-lisp.net/project/asdf/asdf.html)
ASDFはCommon Lispに欠かせないもの、という感じですが敷居が高いです。特にASDFのsource-registryの設定などはドキュメントをしっかり読むと理解できるんですが、Common Lispを勉強し始めた当初は設定ファイルの書き方も「？」状態で、Lispを勉強するのが先か、ASDFのsource-registryを設定できるようになるのが先か、みたいな状態に陥ります。

- [Quicklisp](https://www.quicklisp.org/beta/)
C++の抽象クラスと子クラスのインスタンス化に関する誤解 for me

# 誤解
抽象クラスはインスタンス化できないので，抽象クラスへのポインタ型変数を作ることはできない(誤)．

# 結論
抽象クラスはインスタンス化できないが，抽象クラスへのポインタ型変数に子クラスのインスタンスのアドレスを代入することは可能．

# 抽象クラス
純粋仮想関数を持つクラス．
インスタンス化できない．

# 親クラス型の変数と子クラスのインスタンス
親クラス型の変数が使用したい関数は，継承によってその子クラスも使用できるため，親クラス型の変数に子クラスのインスタンスを代入することができる．
これらのポインタ変数も同様．
(子クラス型の変数に親クラスのインスタンスを代入することはできない．なぜならば，子クラス型の変数が使用したい関数を，親クラスが使用できるとは限らないからだ．)

# 具体例
### ソースコード

```cpp:pure.cpp
#include<iostream>


// 親クラス
class Parent {
public:
  // 純粋仮想関数
  virtual void hello() = 0;
};


// 子クラス
class Child : public Parent {
public:
  void hello() {
    std::cout << "hello" << std::endl;
  }
};


int main() {
  // 抽象クラスのインスタンス化は不可
  // Parent* parent = new Parent();

  // 親クラスへのポインタ型変数に子クラスのインスタンスのアドレスを代入することは可．
  // インスタンス化しているのは抽象クラスではなく子クラス
  Parent* parent = new Child();  
  parent->hello();  // hello
  delete parent;

  // これはエラー
  // Parent parent2 = Child();

  return 0;
}
```

### コンパイル

```
$ g++ -std=c++17 -Wall --pedantic-errors -o pure.exe pure.cpp
```

### 実行結果

```
$ ./pure.exe
hello
```
Laravelのvalidate時の自動リダイレクトを自前で行う

コントローラーで以下のようバリデーションを行った際、バリデーションエラーがあれば自動的にリダイレクトレスポンスが生成され、入力値とフラッシュメッセージがリダイレクト先に渡されます。

```php
$validatedData = $request->validate([
    'title' => 'required|unique:posts|max:255',
    'body' => 'required',
]);
```

このリダイレクトをバリデーションを使わずに行いたい場合、withInput()で入力値を渡し、withErrors()でエラーのフラッシュメッセージを渡すことが可能。


```php
$errors = [
    'error_key' => 'エラーメッセージ',
];

return redirect()->back()->withInput()->withErrors($errors);
```
Code Runner - C++17でコンパイルする方法

# Code RunnerをC++17でコンパイルする方法

VSCodeでCode Runnerを使ってコンパイルしているとき，C++11のWarningが出たりC++17以降の機能が認識されず，コンパイルエラーになることがありました．
以下対処法です．

### 方法1
setting.jsonに以下を追記．

```setting.json
"code-runner.executorMap": {"cpp": "cd $dir && g++ -std=c++17 $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"}
```

### 方法2
僕の環境ではなぜかこれがうまく行かなかったので最初の方法でやりましたが，紹介しておきます．

```setting.json
"clang.cxxflags": ["-std=c++17"]
```

参考：[Mac \+ VSCode \+ code\-runner \+ g\+\+ で C\+\+11、C\+\+14、C\+\+17を実行する \- NOBLE NOTEBOOK](https://noble-notebook.hatenablog.com/entry/2019/03/21/131448)
ExtJS6系、7系でExtJS3系のReader定義を使う

ExtJS 3.4 で使っていた Ext.data.Record の定義を ExtJS 6, 7 でそのまま使いたいとき。
もしくは横着したい人向け。

```js
Ext.override(Ext.data.XmlReader, {
	constructor: function(config) {
		if(!config.model && config.fields) {
			config.model = 'Model-' + Ext.id();
			Ext.define(config.model, {
				extend: 'Ext.data.Model',
				fields: config.fields
			});
		}

		Ext.data.XmlReader.superclass.constructor.apply(this, arguments);
	}
});

```

Overrideした後は、XmlReader 使うときにこんな感じで定義する。

```js
new Ext.data.XmlReader({
	record: 'data',
	rootProperty: 'data',
	fields: [
		{ name: 'RESULT' },
		{ name: 'ID' }
	]
});
```

モデル定義が無意味になるという点においては、負荷軽減とかコーディングコストとかその辺りからみると全く無意味なので、その辺も要注意。
Ubuntu 18.04 LTS に Anaconda をインストールする手順

### 参考文献
- 本記事は以下のサイトを参考に自身の備忘録として記録したものです。
- [How to Install Anaconda on Ubuntu 18.04](https://linuxize.com/post/how-to-install-anaconda-on-ubuntu-18-04/)

### 1. Anaconda のインストールスクリプトをダウンロード
1. [アーカイブ](https://repo.anaconda.com/archive/)から環境に合ったスクリプトを選択
2. ダウンロード<br>

```bash
$ cd /tmp
$ curl -O https://repo.anaconda.com/archive/Anaconda3-2020.02-Linux-x86_64.sh
```

### 2. インストールスクリプトを実行
```bash
$ bash Anaconda3-2020.02-Linux-x86_64.sh
```
- Enter を押し続ける

```
Do you accept the license terms? [yes|no]
>>>　yes

Anaconda3 will now be installed into this location:
/home/<user_name>/anaconda3
>>> [Enter] そのまま続行 / [Ctrl+c] インストール中断 / [任意のPATH] インストール場所を変更 
```
- インストール開始

```
Do you wish the installer to initialize Anaconda3
by running conda init? [yes|no]
>>> yes
```
- yes: 今後 python が Anaconda から起動される
- no:  特に変化なし（※おそらく）

以上
【AR】Vuforia EngineのAdvanced Model Targetについて

Vuforia EngineのAdvanced Model Targetって、無償開発者ライセンスでも20個まで作成できるって知りませんでした。
普通に考えると機能検証のための開発者ライセンスだからできて当たり前なんですけど、思い込みって怖いなと思いました。

##はじめに
使ったバージョンは以下です。
- Vuforia Engine 8.6.10
- Unity 2019.3.1（要確認）
##無償開発者ライセンス
無償開発者ライセンスはVuforia Developer Portalでレジスターするとすぐに使えるようになります。
https://developer.vuforia.com/vui/auth/register
##モデルターゲット
Vuforia EngineはARコンテンツを作成するためのツールで、提供するARカメラを介して現実世界を認識して、その中にAR表示の対象となるターゲットを補足します。
ターゲットにはマーカー、写真画像など色々選べますが、3Dモデルを元に形状の特徴を作って、それに一致する現実世界の物体を識別するものがモデルターゲットです。
モデルターゲットではガイドビューと呼ばれる、物体の見る角度と遠近（大きさ）をターゲットに合致させる必要があります。
![GuideVIew.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/557a0e08-2f25-5a7f-7fee-063e3e3f3110.jpeg)
##アドバンスドモデルターゲット
だいたいモデルターゲットと同じですが、ガイドビューが大きく違います。
- Multiple Guide View：2つ、4つ、または6つの角度からのガイドビューを持てる
- Model Target 360：ガイドビューなしで360度あらゆる角度から認識できる
　（Multiple Objectもできますが、ここでは触れません）
##モデルターゲットの作成方法(私はModel Target 360で操作してます)
こちらのサイトよりModel Target Generator（Windows 64bit版のみ）を入手し、画面操作でモデルターゲットが作成できます。
https://library.vuforia.com/content/vuforia-library/en/articles/Solution/how-to-create-model-target.html
1. ダウンロードしたModel_Target_Generator.exeを実行するとまずは認証が求められるので、自分のVuforia Engine Developer accountでログインします。
2. Generatorメニューが開いたら「Create New Model Target」を押します。
3. CADモデルの右側にあるSelectボタンでモデルターゲットに使いたい3Dモデルを指定し、Create Model Targetします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/63594f0c-7932-7653-dbae-a9e21411fa1d.png)
4. デバイスタイプとオリエンテーション（縦横向き）と、作成するモデルターゲットの種類（マルチビュー、Model Target 360）を選んで、Create ○ Guide Viewを押します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/ae129b17-b4d0-233b-3d56-1f4db63a40d0.png)
5. Edit Guide Viewボタンを押して、どの角度からのビューにするかを編集します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/6f56a74c-8c53-ebc4-0b85-69d5a7ecc718.png)
6. 準備ができたらGenerate Model Targetを押します。
7. メニュー左上のModel Targetsナビゲートボタンでトップメニューに戻ります。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/bb847f59-e756-d469-055e-edc5a50c7026.png)
8.  Advanced Model Targetのトレーニングデータを作成するために、右側Training SetsペインにあるCreate Databaseを押します。
9.  マルチアングル、または360度どちらのトレーニングデータを作りたいかを選択し、Training Session Nameにわかりやすい名前をつけ、本物と同様の着色やテクスチャのモデルでしたら、Realisticを選択してCreate Databaseを押します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/4982529d-f415-2a0c-9836-26b70f36047d.png)
10.  Select Model Targetsにて、トレーニングする3Dモデルデータを指定します。
11.  Training Setsペインにトレーニングセッション（？）が追加されるので、Trainボタンを押します。
12.  トレーニングが完了するまで結構時間がかかりますが、終わるとTrainボタンがExportボタンに変わります。
13.  Exportボタンを押すと、データセット一式がローカルに保存され、そのなかの〇〇.unitypackageを実行することでモデルターゲットのデータをUnityに取り込むことができます。

この先はUnityでARカメラ階層のしたにターゲットを追加する、とかですがそのへんは他のターゲットを使うときと手順は同じなのでここでは割愛します。