OmniAICreator/Qiita-1.07M huggingface dataset:
個人的に面白そうなAPIまとめ（随時更新）

　個人的に面白そうだなと思ったAPIを随時書き足していきます。

2020/11/17追記
どんなAPIがあるかカテゴライズ化されている便利サイトがありました！
https://api.rakuten.net/

#仮想通貨　←2021年2月追加
 - [Coincheck API](https://coincheck.com/ja/documents/exchange/api)：日本の仮想通貨取引所　CoincheckのAPI
 - [Zaif API](https://zaif-api-document.readthedocs.io/ja/latest/index.html)：ZaifのAPI
 - [GMOコイン API](https://api.coin.z.com/docs/)：GMOコインのAPI
 - [Binance API](https://binance-docs.github.io/apidocs/spot/en/#introduction)アメリカの取引所BinanceのAPI


#注文
- [starbucks　API](https://portal.starbucks.com/)：スターバックス！

#Tool
 - [Time tree](https://developers.timetreeapp.com/ja/docs/api)：カレンダー共有アプリ

#画像
- [Face API](https://azure.microsoft.com/ja-jp/services/cognitive-services/face/)
：感情や性別、年齢などが分かる
- [Pixabay API](https://pixabay.com/ja/service/about/api/)：Pixabayというフリー画像、動画イラスト提供サイトから素材を取得

#文字
- [Dango API](https://www.programmableweb.com/api/dango)：自然言語から絵文字を予測変換

#オープンデータ
- [e-Stat](https://www.e-stat.go.jp/api/)：政府の統計データ

#動物
- [この猫なに猫？](https://metadata.co.jp/apis/what-cat.html)
：猫判別

#環境
- [OpenWeatherMAP](https://openweathermap.org/)
：気象情報の取得

#バラエティ
- [Harry Potter API](https://www.potterapi.com/)：ハリーポッターの...。
- [Trivia API](https://opentdb.com/api_config.php)：雑学を返してくれる
【ABC163へ参加してみた】在宅勤務になったのでマネジメント系SEが競技プログラミング始めてみた。#1

# 前回の記事
私の自己紹介的なページになります。
[在宅勤務になったのでマネジメント系SEが競技プログラミング始めてみた。](https://qiita.com/makom/items/848eb79aa4c888e694a0)

#ABC163へ参加してみました。
###ABCとはなに？？
AtCoder Beginner Contest(通称:ABC)に参加してみました。
ABCは初心者〜中級者の登竜門的なもののようで、私にはうってつけ。

また開催時間は土日どちらかの21:00から100分！！(毎週ってわけではなさそう)
本当に物好きな人しか出来ない時間帯の開催となっています(笑)

問題については易しい順にＡＢＣＤＥＦの６つにわかれており、
初心者にはＡＢＣの３問を完全に解くことが、まずは最初の壁のようです。
その後はＡＢＣの３問を解く正確さスピードを上げ、Ｄ問題を解くようになる順番のようです。

###当日の結果
ひとまずＡＢＣの３問を解くことができました。
<img width="812" alt="スクリーンショット 2020-04-20 9.31.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509729/d9d8bf33-24c2-68ca-1887-bd533be50f0d.png">

初参加としてはまずまずと思ったけど、結果は**無認定**。
当日はサーバ負荷の影響で開始時刻にも問題がなかなか見れない状況でした。
きっと私みたいに初参加がいっきに増えたのかなー。。
<img width="1095" alt="スクリーンショット 2020-04-20 9.43.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509729/7691c6b4-3b08-f318-26aa-66f1e0bf1278.png">

###当日は(やはり)冷静さを欠きました
競技プログラミングで気づいた人はいると思うのですが、Ａ〜Ｂ問題の時間がかかりすぎてます。
何が起きてたかというとこんな感じでした。
※ユーザ名は恥ずかしいのでまだ伏せておきます(調べる物好きな人がいればtimestampから推察してください)。
<img width="1105" alt="スクリーンショット 2020-04-20 9.14.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509729/b4bb7aa4-4501-06c6-652f-f6a18f558228.png">

#####１．Ａ問題のＩＥ(現在は解消ずみ)
当日Ａ問題はＩＥ(Internal Error)が発生しておりました。
<img width="1094" alt="スクリーンショット 2020-04-20 9.45.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509729/4fdaec5d-d499-e3bd-cf12-667a8c1ce74b.png">

私はみたことないエラー表示で一瞬にして思考停止。。。
ソースコードを見漁って見たけど、そんな難しいこと書いてないし。。でパニック。
結局得点が入ってそうだったので、無視することにしました。

#####２．ＣＥの多さ
次にCE(Compilation Error：コンパイルエラー)が非常に多かったです。
冷静さを欠いていた私は**C++**でビルドするべきなのに**C**でビルドしてるんですね。
**C++**からしかつかえないヘッダファイル等があり当然コンパイルエラーって訳です。

*追記*
コンパイルの設定が今回から変わった(?)みたいです。
それでか。。いつもは何も変えずにやってるイメージだったもんなー。。
[参考Twitter情報](https://twitter.com/w0mbatt/status/1249215803876151296)

#####３．ＷＡの多さ
最後にこれです。WA(Wrong Answer：つまり不正解)の多さ。
AtCoderでは問題を正解しただけではダメでそれまでに不正解だった数は減点対象となります。
当日冷静さ(以下略)の私は、for文で以下のようなことをやっており完璧に沼に入ってました。

```C++:sample.cpp
for(int i; i<N; i++){
  cin >> a[N];
}
```
何が間違ってるかはお気づきですよね。。
そうa[N]にずっと入力してるんですよね。。

```C++:sample.cpp
for(int i; i<N; i++){
  #cin >> a[N];
  cin >> a[i];
}
```
こんな自分の酷さにがっかりしてました。。

###総括
ともあれ、無事に初AtCoderに参加し当初目標の３問解くことが無事にできました。
そして反省点も。。
もし時間あれば、当日私が正解できた３問の解説を別記事で記載したいと思います。

*追記*
解説記事記載しました！
もしＡＢＣ問題解らなかった方がいれば是非！
[解説ページへいく](https://qiita.com/makom/items/74f99995454c9e6499e9)
EC2インスタンスのスナップショットを作成する方法

# インスタンスを停止する
1. 対象のインスタンスを選択する
1. [アクション] > [インスタンスの状態] > [停止]

# EBSボリュームを選択する
1. 対象のインスタンスを選択する
1. インスタンスの詳細に表示される[ルートデバイス]リンクからポップアップを表示する
1. [EBS ID]リンクからEBSボリュームの画面を表示する
    - この時点で対象のボリュームが選択された状態になっている

# スナップショットを作成する
1. [アクション] > [スナップショットの作成]から作成画面を表示する
1. [説明]を入力する(任意)
1. [クリックしてNameタグを追加します]リンクから[Name]タグを追加してインスタンスの[Name]タグの値など後で何のスナップショットかわかるようにする(任意)
1. [スナップショットの作成]ボタンでスナップショットを作成する
HomebrewでインストールしたGitのバージョンアップ方法 【Mac】

# Gitのバージョン確認

```
$ git --version
```

```
$ git --version
git version 2.26.0
```

# HomebrewでGitをインストールしている場合

```
$ brew update && brew upgrade git
```

# Gitのバージョンが切り替わらない場合

```
$ which git
/usr/bin/git
```

### HomebrewでインストールしたGitを使うように指定

`.bash_profile` や `.zshrc`に以下を書き込む

```
export PATH=/usr/local/bin:$PATH
```

```
$ which git
/usr/local/bin/git
```

# HomebrewでGitをインストールしていない場合

### Homebrewをインストールする

以下をターミナルに貼り付けて、実行

```
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

### HomebrewでGitをインストールする
```
$ brew install git
```

### HomebrewでインストールしたGitを使うように指定

```
$ which git
/usr/bin/git
```

`.bash_profile` や `.zshrc`に以下を書き込む

```
export PATH=/usr/local/bin:$PATH
```

```
$ which git
/usr/local/bin/git
```

---

```
$ git --version
git version 2.26.1
```
データバックアップ

#データバックアップの実装方法の参考サイト

Androidアプリのデータバックアップは下記の２通りあるらしい。

・Key-Valueバックアップ（Android Backup Service） 
・Android自動バックアップ

実装で参考にしたサイトは下記のとおり。

**■公式サイト**
https://developer.android.com/guide/topics/data/backup

**■Key-Valueバックアップ（Android Backup Service）** 
https://toconakis.tech/key-valuebackup/
https://www.atmarkit.co.jp/ait/articles/1307/18/news026.html

**■Android自動バックアップ**
https://toconakis.tech/androidautobackup/

**■FileBackupHelperでSQLiteのデータベースファイルをバックアップする**
https://esmasui.hatenadiary.org/entry/20130502/1367511982
plunkerでcesium

#概要

plunkerでcesiumやってみた。
covid-19の棒グラフやってみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/0074365f-3342-7d08-6b39-b4ba0c1c2238.png)

#サンプルコード


```
var viewer = new Cesium.Viewer('cesiumContainer', { 
  infoBox: false
});
var entities = viewer.entities;
var boxes = entities.add(new Cesium.Entity());
d3.json("https://covid19-japan-web-api.now.sh/api/v1/prefectures", function(error, data) {
  var keys = ["id", "name_ja", "name_en", "lat", "lng", "cases", "deaths"];
  for (var i = 0; i < data.length; i++)
  {
    var n = 200.0 * data[i]["cases"];
    entities.add({
      parent: boxes,
      position: Cesium.Cartesian3.fromDegrees(data[i]["lng"], data[i]["lat"]),
      cylinder: {
        length: n,
        topRadius: 20000.0,
        bottomRadius: 20000.0,
        material: Cesium.Color.fromRandom({
          alpha: 0.6
        }),
      }
    });
  }
  viewer.zoomTo(viewer.entities);
});



```

#成果物

https://embed.plnkr.co/plunk/JTA57AeZlL4Cyr48

以上。
git運用をする際に見ておくとちょっと為になるかもしれない記事

#前置き
今までZIP（笑）で送付し、新卒のコードをレビューしていましたが、今回僕がコードレビューをするのでそんな負の習わしは積極的にブチ壊して行こうという事で今年度からソースをgitでコード管理をするように致しました。

という事で今回はその新卒達に向けた記事となっております。
現場独自の運用ルール等があった場合はもちろんそちらを優先してください。

#flowについて
gitに置けるflowとは、運用パターン、構造のようなものです。
`Git flow`,`GitHub flow`,`GitLab flow`等様々なflowが存在しますが、本記事では`GitHub flow`を使用して運用の解説をして行くので、もし運用方法についてこの記事に記載されていない事などがあれば`GitHub flow`でググれば出ると思います。そんな事無いようにしますが。

#GitHub flowとは
かなりザックリいうと`masterブランチ`と`それ以外のブランチ`からなる構成です。
基本的に`masterブランチ`にコミット、プッシュは禁止で、他ブランチからのマージによってツリーを形成していく運用方法となります。


恐らく今記事を読んでる新卒のみなさんはファルシのルシがコクーンでパージみたいな状態になってると思いますが、理解はしなくていいです。この辺りはgitを使ってるうちに「ああ、あいつが書いてたのはこういう事ね」になっていくと思うので。


#ブランチの分け方
基本的に機能単位でブランチを切ります。
例としてTwitterをあげた場合
・プロフィール変更画面ブランチ
・タイムライン画面ブランチ
・RT,いいね機能ブランチ

程度の粒度でブランチを切っていきます。
あまりに細かすぎるとその画面と依存する部分がブランチによっては動かなくなってしまうので最初のうちは画面単位でいいと思います。

#ブランチの寿命
基本的に`GitHub flow`でのブランチの寿命はマージまでとなります。
マージをした後ならば対象ブランチを削除してもグラフとして存在し続けるので安心してください。
マージが終わったらビビらずにブランチを削除してください。

## masterブランチに直プッシュする運用をした場合…？
〜ある人物の勤務風景〜

「今暇でリリース出来るから〇〇アプリのIPAくれ！」

「おお、やっとか。一週間前に出来てたから待ちくたびれたで。ポイ〜（IPAファイル送付）」

「ちょっとmogiくん？なんか次回リリース予定の画面に遷移するボタン表示されてんねんけど…」

「！？！？（次回リリースまだ先やから急ぎタスク先に消化してて追加してるの忘れてもうてた！！！）」


この後この方は罰としてお腹と背中にトランセル種市のタトゥーを彫られたそうです…




…こういったことがmasterブランチに直プッシュしない事によって防ぐことができます。
人がポンコツな場合運用パターンに沿って行動させることがミスを減らすコツです。

ブランチを分けてもmasterブランチを選択し忘れた場合は知りません。




#コミットメッセージのテクニック
ブランチは基本的にはマージしてグラフを一本にしたら削除しますので、時間が経てばブランチ名からなんの改修を行ったかがわからなくなります。

そこで役立つテクニックが**コミットする際のメッセージに必ずブランチ名を入れる**です。
そうする事により、バージョンアップ作業時などに修正点、追加点などをまとめる事がコミットグラフを見るだけでアプリに関係していない人間でも出来るようになります。
いつも後輩に教える際、呪文のように「十年後の自分が見てもわかる内容にしろ」と言っています。
これは「プロジェクトに関係しない人間が見ても理解出来るようにしろ」という意味でもあります。




#最後に
まだまだ色々あるというか、操作に対して一切書いていないので大丈夫か？感がありますが、やはり一番は触って覚えることが最速でGitをマスターする１番の近道だと思います。
ですが、Gitは他人のソースにも影響を与えてしまう事があるので怖くて触れないという方が多いと思います。
今回うちの新卒には何してもいいリポジトリを作成し、好き勝手アプリを作成してもらう予定なので運用にのみ要点を置いて書いてみました。
まあ逆にこれさえ守ってたらチームに迷惑もかけないと思います。
駄文ですが、読んでいただきありがとうございました。
Rubyのメソッド(配列編)

### はじめに

[Ruby API](https://rubyapi.org/2.7/o/array)を読んでいて、Rubyにそんなメソッドあるの！？と面白くなったメソッドを書いていきます。</br>
バージョンは2.7です。

色々なメソッドがあって勉強になりました。

### compact、compact!

配列の中の`nil`を取り除いてくれます。</br>
`nil`だけを狙い撃ちしてくれるだなんてRubyさん優秀ですね(使い所はピンと来ていない)

```rb
arr = ['foo', 0, nil, 'bar', 7, 'baz', nil]
arr.compact  #=> ['foo', 0, 'bar', 7, 'baz']
arr          #=> ['foo', 0, nil, 'bar', 7, 'baz', nil]
arr.compact! #=> ['foo', 0, 'bar', 7, 'baz']
arr          #=> ['foo', 0, 'bar', 7, 'baz']
```

### delete_if、keep_if

配列から条件に合うものを削除したり、残したりした後の配列を作ってくれます。</br>
簡単な条件ならこんなに短く書けるんですね。</br>
後置if文よりスッキリしているのでは

```rb
arr.delete_if {|a| a < 4}   #=> [4, 5, 6]
arr                         #=> [4, 5, 6]

arr = [1, 2, 3, 4, 5, 6]
arr.keep_if {|a| a < 4}   #=> [1, 2, 3]
arr
```

### array *

配列には掛け算が使えるのですが、掛けるものがint型かString型かで結果が変わります。</br>
数値を掛けると、元の配列をその回数分繰り返した配列を返します。</br>
そして、文字列を掛けると、掛けたもので区切った文字列を返します。</br>
つまり、`Array#join(str)`と同じ結果です。

```rb
[ 1, 2, 3 ] * 3    #=> [ 1, 2, 3, 1, 2, 3, 1, 2, 3 ]
[ 1, 2, 3 ] * ","  #=> "1,2,3"
```

### combination

その配列の中で、引数と同じ長さの配列をすべて作って返してくれます。</br>
`a.combination(2).to_a`では、1と2、1と3、・・・3と4というように数字が2つの配列を作って返しています。

```rb
a = [1, 2, 3, 4]
a.combination(1).to_a  #=> [[1],[2],[3],[4]]
a.combination(2).to_a  #=> [[1,2],[1,3],[1,4],[2,3],[2,4],[3,4]]
a.combination(3).to_a  #=> [[1,2,3],[1,2,4],[1,3,4],[2,3,4]]
a.combination(4).to_a  #=> [[1,2,3,4]]
a.combination(0).to_a  #=> [[]] # one combination of length 0
a.combination(5).to_a  #=> []   # no combinations of length 5
```

### dig

引数の数だけ配列の中に潜って値を取ってきてくれます。</br>
つまり、`a[0][1][1]`ということですね。</br>
`dig`を使ったほうが何を示すかわかりやすい気がするんですけどどうなんでしょう？

```rb
a = [[1, [2, 3]]]

a.dig(0, 1, 1)                    #=> 3
a.dig(1, 2, 3)                    #=> nil
```

### transpose

配列の行列を入れ替えた配列を返してくれます。</br>
これ、メソッド使わないでやると~~力不足で~~難しいので、便利だと思います。

```rb
a = [[1,2], [3,4], [5,6]]
a.transpose   #=> [[1, 3, 5], [2, 4, 6]]
```
【Nuxt.js】axiosでheaderにAuthorizationを常につけたい！

####投稿者のお悩み
・JWT認証のアプリでaxiosでAPI叩くときにheadersにAuthorization:tokenをくっつける共通処理を作りたい
（色んな記事みたけどうまくいかないよ・・・）

####お悩み解決
nuxtのpluginsを使ってaxiosをラップする処理を用意する


##①plugins配下にaxios.jsを作成して、共通処理を書く
```javascript:plugins/axios.js
import axios from 'axios'

export default function({ $axios }) {
  $axios.onRequest((config) => {
    axios.defaults.headers.common['Authorization'] = localStorage.getItem(
      'auth._token.local'
    )
    return config
  })
}
// axiosにデフォルトでヘッダーにAuthorizationを用意し、中身はlogalStorageのtokenを貼り付けるよ
// onRequest リクエスト飛ばす前に処理いれるよ
// common はすべてのリクエストGET,POST....につけるよ
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/f1cd3793-3541-ff55-d899-e486e895b628.png)
https://github.com/axios/axios
**読者の声：おい！公式にその通り書いてあるぞ！この程度で記事にすんなや！**
**投稿者：ひぃ**

##②nuxt.config.jsでplugins/axios.jsを認識させる
```javascript:nuxt.config.js
// ~~ 省略 ~~

plugins: ['@/plugins/axios']
// pluginsフォルダ配下のaxiosを認識するよ

// ~~ 省略 ~~
```


いたってシンプル、これだけ！！！落ち着いて公式を読もうね。
映画情報を取得するAPIを使って上映中の映画と評価の高い映画の一覧を表示してみた。

#やったこと
映画情報を取得するAPI（TMDB）を使って上映中の映画と評価の高い映画の一覧を表示してみました。

全体のページはこんな感じです。
![スクリーンショット 2020-04-20 8.43.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/0ceba174-bbce-c74e-6e49-310ad7620201.png)

横スクロールができるようになってます。
![スクリーンショット 2020-04-20 8.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/505639ad-cee2-5377-ff4b-ba95f83fc63f.png)

画像をクリックすると詳細が表示されます。
![スクリーンショット 2020-04-20 8.45.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/cba5dccc-0cfd-2f2f-bc57-3f71592c4fa4.png)

#TMDBを利用するために
まずは、[TMDB](https://www.themoviedb.org/)でアカウント作成が必要です。
その後、「settings > API」を開くと、APIの利用申請ができます。

#画面に表示するために
##まずは、HTMLに表示するための領域を記述
今回は、ulタグ内に小要素を詰め込んでいきます。
ulタグを利用した理由は、横スクロールを実現したかったためです。

```html
    <div id="container" class="container">
        <section class="eachMovieSection">
            <h2>Now Playing</h2>
            <ul class="horizontal_scroll" id="horizontal_scroll_nowPlaying">
            </ul>
        </section>
        <section class="eachMovieSection">
            <h2>Top Rated</h2>
            <ul class="horizontal_scroll" id="horizontal_scroll_popular">
            </ul>
        </section>
    </div>
```

##TMDBで情報を取得する
とりあえず、コンソール上に取得してみましょう。

```javascript
        const getNowPlayingURL = 'https://api.themoviedb.org/3/movie/now_playing?api_key=APIKEYを入力';

        fetch(getNowPlayingURL)
        .then(response => {
          return response.json();
        })
        .then(data => {
          data.results.map(movie => {
            console.log(movie);
          });
        })
        .catch(error => {
          console.log('error');
        });
```

##取得した情報をulタグに詰め込む
一旦オブジェクトを生成し、それを配列に格納しています。
これは、一覧ページで表示しているのは画像とタイトルだけですが、詳細ページで評価、上映開始日、概要なども表示しているためです。
その後、liタグを生成し、liタグに画像やタイトルをappendしています。
その後、liタグをulタグにappendしています。

```javascript

        fetch(getNowPlayingURL)
        .then(response => {
          return response.json();
        })
        .then(data => {
          data.results.map(movie => {
            const nowPlayingMovie = new NowPlayingMovie(movie.id, movie.title,
              movie.poster_path, movie.vote_average, movie.overview, movie.release_date);
            nowPlayingMovies.push(nowPlayingMovie);
            const row = document.createElement('li');
            row.classList.add('horizontal_pic');
            const poster = document.createElement('img');
            poster.src = `https://image.tmdb.org/t/p/w300_and_h450_bestv2/${movie.poster_path}`;
            const title = document.createElement('p');
            title.textContent = movie.title;
            horizontal_scroll_nowPlaying.appendChild(row);
            row.appendChild(poster)
            row.appendChild(title);
          });
        })
        .catch(error => {
          console.log('error');
        });
```

#できた！
おそらく皆さんも表示できたと思います！
意外と楽に映画情報を引っ張ってこれるので、今度は詳細ページに出演者の顔写真なども表示していきたいです。
APIが便利すぎました。製作者に感謝です。

これからはJavaScriptのフレームワークを勉強していこうと思います。

最後まで読んでくださり、ありがとうございました。
Edgerouter X(ER-X) 用に ndppd をカンタンにビルドする (ひかり電話なし)

この度、無事にIPoE環境にすることができたので、そのへんの諸々を記録しておくことにします。

(updated 2020/5/4: `ndppd.conf` について追記)

IPv6を利用するにあたって、ひかり電話なし、での Edgerouter では`NDプロキシ`がないことで、`ndppd`をどうにかしてクロスコンパイルしながら、Edgerouter 本体へ持っていかなければなりません。できる限り省力化して、かつ誰でも実装できるように、Dockerコンテナとソースコードを準備しましたので、そちらを使ったやり方を紹介します。

# 前提条件

- docker が動かせること
- git コマンドが動作すること
- Edgerouteへsshできること

※ EdgeMax(ER-X用) firmware 1.10.11で確認していますが、2.xでもきっと動くでしょう。きっと。

# 実行手順

`github` にもさらっと書いていますが、4回の手順で Edgerouter向けの`ndppd`が準備できます。

1. git clone する
2. docker を起動する
3. コンパイルする
4. scp する

## 1. git clone する

適当なワーキングディレクトリへ移って、`git clone` します。本家のではなく、わたしのところへ`Fork`したものなので、まちがわずに。

```bash
git clone https://github.com/sho7650/ndppd.git
```

## 2. docker を起動する

MIPS(Little Endian)用にコンパイラがすでに準備された`Ubuntu`コンテナイメージで、`ndppd`ディレクトリをマウントしつつ起動させます。

```bash
docker run -v $PWD/ndppd:/ndppd -it --rm sho7650/mipsel
```

## 3. コンパイルする

もうすでに、Edgerouter用の MIPS(Little Endian)でコンパイルできるような`Makefile`に変更してありますので、ディレクトリを移って`make`するだけです。

```bash
cd /ndppd
make
```

## 4. scp する

もうこれで`ndppd`の実行ファイルは準備できました。`docker`を終了して、ワーキングディレクトリ内から、`scp`を使って Edgerouter へファイルを転送します。せっかくなので、起動スクリプトも準備しましたから、それらも該当のディレクトリへ移してください。

```bash
scp ndppd <user>@<hostname>:/ndppd/local/sbin
scp scripts/ndppd <user>@<hostname>:/config/scripts/post-config.d
scp scripts/ndppd.initscript <user>@<hostname>:/ndppd/local/sbin
```

すでに`ssh`でEdgerouterへログインできることが前提なのと、事前にEdgerouter側に`/ndppd/local/sbin`ディレクトリを掘っておく必要があります。

例えばこんな感じで。ファイルをコピーする時のユーザー権限など気をつけてください。ここ以下の作業は **Edgerouter側で実行**しますので、お間違いなきよう。

```bash
mkdir -p /ndppd/local/sbin
```

ファイルをコピーしたあと、ユーザによっては`root`とは異なっている可能性が大なので、`chown`しとくと良いでしょう。

```bash
chown -R root /ndppd
chown root /config/scripts/post-config.d/ndppd
```

## 5. ndppd.conf を準備する

構成にもよりますが、ここでは WAN側のインタフェイスを `eth0`、LAN側のインタフェイスが`switch0`の場合の設定例です。

```bash:/etc/ndppd.conf
proxy eth0 {
   router no
   timeout 500
   autowire yes
   keepalive yes
   retries 3
   ttl 30000
   rule ::/0 {
      iface switch0
   }
}

proxy switch0 {
   router yes
   timeout 500
   autowire yes
   keepalive yes
   retries 3
   ttl 30000
   rule ::/0 {
      auto
   }
}
```

各項目の意味は次のとおりです。

#### 基本形式

```json
proxy <interface名> {
  rule 1234:5678::/96 {
  }
}
```

`proxy`とその中に含まれる`rule`が必須項目です。`ndppd`のlistenするインタフェイスを`proxy`に指定し、ターゲットとなる該当のIPv6アドレスを`rule`に記述します。`rule`内には転送先のインタフェイスを指定します。

#### proxy内のオプション

`proxy <interface名> { 〜 }` には各種オプションが設定可能です。

- `router`: `Neighbor Advertisement`を流すかどうかを指定します。主にルータ内のLAN側に配置されるIPv6端末の情報をWAN側に提供する場合に`yes`にします
- `timeout`: `rule`で指定した対象に`Neighbor Advertisement`を転送して待機するまでの時間です
- `ttl`: proxyで保持する情報をどの程度の期間キャッシュへ保持するかを指定します
- `autowire`: `Neighbor Advertisement`を受信したときに、ルーティングテーブルに自動的にホストエントリーを作成するかどうかを指定します
- `keepalive`: セッションが切れる前に、セッションを維持し続けようとするかどうかを設定します
- `retries`: NDプロキシが、ホストに到達できるかどうか`NDP Solicitation`を送信する回数

# 実際にNDプロキシを利用してIPv6化するには

「[Edgerouter (ER-X) で NDプロキシを使って IPv6通信を行う (ひかり電話なし)](https://qiita.com/sho7650/items/f0d90957e860456f4481)」を参考になさってください

# 参考

- [EdgeRouter X (ER-X) で ndppd を動かす](https://qiita.com/ikai/items/b1b410a62aa68d1a0eec)
- [Edgerouter Xとの戦い〜結〜結局ndppdをビルドする](https://note.com/sonson/n/n253c1efb91a9)
[JavaScript] "!function() {}()"以外の即時関数を紹介するぜ 

ヒャッハー！！IIFEなメンバーを紹介するぜえ！！:metal:

> IIFE (Immediately Invoked Function Expression; 即時実行関数式) は定義されるとすぐに実行される JavaScript の 関数 です。 [^1]

[^1]: [IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 \| MDN](https://developer.mozilla.org/ja/docs/Glossary/IIFE)

## 初級編
即時関数として知られ使われるやつ。

```js
(function() {console.log('a')})()
(function() {console.log('a')}())
!function() {console.log('a')}()
(() => {console.log('a')})()
```

## 中級編
調べれば出てきたりするけど普通使わない。

```js
// ↓それでも使われる可能性あり
+function() {console.log('a')}()
~function() {console.log('a')}()
-function() {console.log('a')}()
void function() {console.log('a')}()
// ↓みたこと無い
typeof function() {console.log('a')}()
new function() {console.log('a')}()
await function() {console.log('a')}()
delete function() {console.log('a')}()
```

## 上級編
レビュアーや保守の人などをあっと言わすことができる。（悪い意味で）

```js
new Function('console.log("a")')()
0 ** function() {console.log('a')}()
0 / function() {}(console.log('a'))
0 * function() {console.log('a')}()
0 % function() {console.log('a')}()
0 << function() {console.log('a')}()
0 >> function() {console.log('a')}()
0 >>> function() {console.log('a')}()
0 < function() {console.log('a')}()
0 > function() {console.log('a')}()
0 <= function() {console.log('a')}()
0 >= function() {console.log('a')}()
new Function('console.log("a")')() instanceof Function
0 in [function() {console.log('a')}()]
0 & function() {console.log('a')}()
0 ^ function() {console.log('a')}()
0 | function() {console.log('a')}()
1 && function() {console.log('a')}()
0 || function() {console.log('a')}()
null ?? function() {console.log('a')}()
Function?.(function() {console.log('a')}())
0 == function() {console.log('a')}()
0 === function() {console.log('a')}()
0 != function() {console.log('a')}()
0 !== function() {console.log('a')}()
0 , function() {console.log('a')}()
NaN = function() {console.log('a')}()
NaN *= function() {console.log('a')}()
NaN /= function() {console.log('a')}()
NaN %= function() {console.log('a')}()
NaN += function() {console.log('a')}()
NaN -= function() {console.log('a')}()
NaN <<= function() {console.log('a')}()
NaN >>= function() {console.log('a')}()
NaN >>>= function() {console.log('a')}()
NaN &= function() {console.log('a')}()
NaN ^= function() {console.log('a')}()
NaN |= function() {console.log('a')}()
NaN **= function() {console.log('a')}()
```

## 番外編
こんな即時関数（？）も考え始めたけど、ふと我に返り途中でやめた。

```js
(function() {console.log('a')})``
if (function() {console.log('a')}());
for (function() {console.log('a')}();false;);
```

## 感想
演算子試してみたみたいになっちゃいました。
これで謎記号がくっついたfunctionを見ても「なんだ即時関数か」と悩む人がいなくなれば嬉しいです。
ECDSAの点からEthereumのアドレス

いつも忘れるのでメモ

## やり方
点の32バイトのx座標と、32バイトのy座標を並べたものを、keccak256でハッシュして、最後の20バイトを取る。

### Pubkeyから作る場合
Pubkeyからシリアライズしたデータの先頭１バイトは、header byteなので取り除く

```rust
// Pseudo code
let hdr_x_y = Pubkey::serialize();
let x_y = &hdr_x_y[1..];
```

## 例

| 説明  | 値 |
|------|------------------------------------------------------------------|
| x 座標 | 4b4ece7218b90931a2d16d053b579461fab70a5d6d2137143f1026b865f45937 |
| y 座標 | b287fe8c37d4615cb9ab23868e012991acf24be87146a9740e02001e549aaed8 |
| アドレス |  0x9debb5ff7c3183d441d6e6d0836cbc2df4f36b97 |

## サンプルコード

```rust
use crypto::sha3::Sha3;
use secp256k1::PublicKey;
use crypto::digest::Digest;

/*
hex = "0.4"
rust-crypto = "^0.2"
*/

fn hash(buf: &[u8]) -> String {
  let mut hasher = Sha3::keccak256();
  hasher.input(buf);
  hasher.result_str()
}

pub fn calc_addr(x: &str, y: &str) -> String {
  let hex = x.to_owned() + y;
  let raw_pk = hex::decode(hex).unwrap();
  let pk_hash = hash(&raw_pk);
  let addr = &pk_hash[24..];  // last 20 bytes of 32-byte pk_hash
  format!("0x{}", addr)
}

#[test]
fn ecdsa_point_to_addr() {
  let exp = "0x9debb5ff7c3183d441d6e6d0836cbc2df4f36b97";

  let x = "4b4ece7218b90931a2d16d053b579461fab70a5d6d2137143f1026b865f45937";
  let y = "b287fe8c37d4615cb9ab23868e012991acf24be87146a9740e02001e549aaed8";
  let act = calc_addr(x, y);

  assert_eq!(act, exp);
}
```
LaTeXで章，節の見出しの体裁を変更する(未完成の記事)

　昔書いた未完成の下書きで、最後に何を書こうとしていたのか忘れましたが、ここに書いたことが誰かの役に立つかもしれないのでとりあえず投稿しておきます。
%%%%%%%%%%　以下、未完成の記事　%%%%%%%%%%
　最近、文書を$\LaTeX$で書いていて悩んだことがあったのでそれについてまとめてみます。
#章, 節の見出しの体裁を変更する
　普通、$\LaTeX$で

```
\section{はじめに｝
```

とすると、クラスファイルにjsarticleを使用していれば 

>1 はじめに

jsbookを使用していれば(\sectionの上に\chapterがあるので)

>0.1 はじめに

と表示されることになります。これを

>§1 はじめに

と表示されるようにするには、いくつかの方法があります。
　まず、節の見出しのみを変更し、目次(jsbookでは柱なども)に反映されないようにする方法から。これはtitlesecパッケージを読み込み、プリアンブル(\documentclass{...}と\begin{document}の間)に

```
\titleformat{\section}{\normalfont\Large\bfseries}{\S\thesection}{1em}{}[]
```

と書けばOKです。
　次は、目次などにも反映される方法を。これはプリアンブルに

```
\renewcommand\thesection{\S\,\arabic{section}}
```

と書けばOKです。どうやらmathcompパッケージを読み込むと§の書式が変わるようで、自分は上のコードの\Sを\$\S$で置き換えて使用しています。jsarticleであれば代わりに

```
\renewcommand\presectionname{\S\,}
```

を書いても構いません。
　しかし、二つ目の方法を使うと定理環境にも影響が現れます。そこで、定理環境について述べ、その解決法を載せます。
#定理環境
　$\LaTeX$を知っていれば"環境"に関しても知っていると思うのでいちいち説明しません。定理環境を使用するためにはamsthmパッケージを読み込みます。プリアンブルに

```
\newtheorem{thm}{定理}
\newtheorem{rem}{注意}
```

と書けばthm, remという環境が使用可能になります。その後、本文に

```
\begin{thm}
これは定理です.
\end{thm}

\begin{thm}
これは別の定理です.
\end{thm}
```

と書けば

>定理1. これは定理です.
>定理2. これは別の定理です.

と出力されます。番号はthm環境を使用するごとに自動で付けられます。番号を付けてほしくない場合には\newtheoremにアスタリスク(*)を付けて

```
\newtheorem*{thm}{定理}
```

と書けば良いです。また、番号を節(section)や小節(subsection)ごとに分けてほしい場合にはそれぞれ

```
\newtheorem{thm}{定理}[section]
\newtheorem{thm}{定理}[section]
```

と書けば良いです。このとき、第3節第4小節の2つ目の定理はそれぞれ

>定理3.2. ○○○
>定理3.4.2. ○○○

と出力されます。
　先ほど、"見出しの体裁を二つ目の方法で変更すると定理環境にも影響がある"と書きましたが、これについて詳しく説明します。

```

\documentclass{jsbook}
\begin{document}
\chapter{はじめに}
\section{あああ}
\section{いいい}
【NestJS/TypeORM】Entity内で { eager: true } は設定するべきではない

# 環境

- [NestJS 7.0.7](https://nestjs.com/)
- [nestjs/typeorm 7.0.0](https://github.com/nestjs/typeorm)

# TLDR

以下、2つの理由で、Entity内で、`{ eager: true }`は使わないほうが良いと判断しました。

- 必要のないカラムを取得する場合がある（後述）。
- Entity内で、`{ eager: true }`をしている時の挙動について、以下の2つの記載がありますが、現時点の挙動としては後者が正しいようです。

  > 1) https://github.com/typeorm/typeorm/blob/master/docs/relations.md#relation-options
  > eager: boolean - If set to true, the relation will always be loaded with the main entity when using find* methods or QueryBuilder on this entity
  >
  > trueに設定した場合、`find*`メソッド、または`QueryBuilder`を使った時は、リレーションは常にメインエンティティとともにロードされます。

  > 2) https://github.com/typeorm/typeorm/blob/master/docs/eager-and-lazy-relations.md#eager-relations
  > Eager relations only work when you use find* methods. If you use QueryBuilder eager relations are disabled and have to use leftJoinAndSelect to load the relation.
  >
  > Eager relations は、`find*`メソッドを使用する場合にのみ機能します。 `QueryBuilder`を使用する場合、Eager relationsは無効になり、`leftJoinAndSelect`を使用して関係をロードする必要があります。

# 検証

## 以下のような Author has many Books という関連があるとします

```javascript
@Entity()
export class Work {
  @PrimaryGeneratedColumn()
  readonly id!: number

  @Index()
  @ManyToOne(
    () => Author,
    (author) => author.books
  )
  author!: Author
```

```javascript
@Entity()
export class Author {
  @PrimaryGeneratedColumn()
  readonly id!: number

  @OneToMany(
    () => Book,
    (book) => book.author,
    { eager: true, cascade: true }
  )
  books!: Book[]
```

## findを使ったクエリーの結果

- `this.bookRepository.find({ relations: ['author'] })`
 
`Book`を上記の条件で検索した時に、関連する`Author`だけではなく、更に`books`もレスポンスに含まれてしまいました（`{ eager: true }`を設定しているため）。
必要に応じて、`leftJoinAndSelect`を指定して、常に意図した結果を得るようにした方が良さそうです。

```json
[
  {
    "id": 7,
    "name": "What book is this?",
    "author": {
      "id": 6,
      "name": "Who am I",
      "createdAt": "2020-04-18T01:20:26.810Z",
      "updatedAt": "2020-04-18T01:20:26.810Z",
      "books": [
        {
          "id": 7,
          "name": "What book is this?",
        }
      ]
    }
  }
]
```
AngularMaterialを使ってみる

## 環境

- Angular： v9.0.4
- Node： v12.16.1
- OS： win32 x64

## AngularMaterialの追加

プロジェクト下でコマンド実行

```Console
ng add @angular/material
```

色々きかれるが、Enterキーでデフォルト値が設定される。  

src/index.htmlにGoogle APIsから配信されているMaterial Iconsのスタイルシートが読み込まれている。

```html:index.html
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

angularMaterialが追加された。  
これだけでは使えないので、使えるようにapp.module.tsに設定する。  

## app.module.ts

今回はAngularMaterialのMatIconを使用してみる。  

```typescript:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
+    MatIconModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

表示

```typescript:app.component.html
<mat-icon>help</mat-icon>
```

## 参考

- AngularMaterial：https://material.angular.io/
- Material Design：https://material.io/resources/icons/?style=baseline
Django インストール mac

#前提
MacでのDjangoインストール方法について
アウトプットしていきます。

#本題
##１、ターミナルを立ち上げる

##２、Xcodeのインストール
Homebrewをインストールするために必要なXCodeをインストールします。以下のコマンドをターミナルに入力。

```
$ sudo xcode-select --install
```

##３、Homebrewのインストール
Macのパッケージマネージャーであるhomebrewをインストールします。以下のコマンドをターミナルに入力。

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

##４、Pathを通す
Homebrewのパスを通していきます。
以下のコマンドで.bash_prifileファイルを開きましょう。

```
$ vim ~/.bash_profile
```

開けたら以下のコマンドを入力し、esc→:wqで退出。

```
$ export PATH=/usr/local/bin:$PATH
```

##５、Python3のインストール
以下のコマンドでPython3をインストール。

```
$ brew install python3
```

##６、Python3がインストールされたかを確認
以下のコマンドでPython3がインストールされたかを確認。

```
$ python3 --version
```
Python3.と出れば無事にインストール完了。

##７、Djangoのインストール
最後にDjangoのインストールをします。
Djangoのインストールをするためには、Pythonのパッケージマネージャーであるpipを使う必要がありますが、pipはHomebrewに入っています。そのため以下を入力すればDjangoをインストールできます。

```
$ pip3 install django
```


##８、Djangoがインストールされたかを確認
以下のコマンドでDjangoがインストールされたかを確認。

```
$ python3 -m django --version
```
3.0.5など数字が表示されれば無事にインストールが完了。
SaaS,PaaS,IaaSをカレー屋で考える

## SaaS とか PaaS とか IaaS とか……？

SaaS、PaaS、IaaSとか。
わかる人にはわかるし、わからない人にはわからないやつです。

その定義は非常に曖昧で難しく考える人にはさらにわからなくなるやつです。。。

ちょっと知人と話題になったので「カレー屋」を例に説明してみるチャレンジをしてみます。

> 最初に言いますがこんなのカレー屋に例えないで実際のAzureとかで考える方が何百倍もわかりやすいです……でも頭の体操のためにもあえてカレー屋にチャレンジです。

## カレー屋とは？

まず最初に「カレー屋」の定義です。ここ大事。店舗があって、お客さんがきて、店内でカレーを食べる。それが今回の「カレー屋」です。今回の「カレー屋」は、土地もあって建物もあるのですがまだキッチンもメニューもありません。

さて……そこからどうやってカレー屋を開店しましょうか？

という話です。

## Case.1：IaaS的なカレー屋の開店

とってもこだわりのあるカレー職人です。 こだわりでオリジナリティあるカレーを作りたいです。

そのためには、こだわりの調理器具が必要だしこだわりのスパイスも必要です。

なので調理する上で必要なガスや水道の契約だけはして、後はキッチン作りからスパイス作りから全部自分でやってカレー屋を開店します。

- **メリット：** 自分好みのこだわったオリジナリティのあるカレーを作ることが出来る。全て自分でやるとは言え地下水をくみ上げたりするわけではないので最低限のインフラ用意の時間は省ける。
- **デメリット：** ガスや水道があるとは言え準備に時間とお金がかかる。こだわるために専門的なスキルが必要。こだわったからといって美味しいとは限らない…！

> インターネットやパソコンやOSを自分で「作る」わけではなくそこは買ってきて、その上にのるソフトウェアのインストールやセッティングは自分でやります。自分好みのチューニングが可能で自由度が高いです。ただ自分で色々やらないといけないので高い専門性が必要です。
> 例えば、PCとOSだけ調達して、ECサイトを自力で作り上げるようなものです。

## Case.2：PaaS的なカレー屋の開店

そこそここだわりのあるカレー職人です。 一般的なカレーの範囲をおおきく逸脱せず、それでもある程度のオリジナリティを出したいカレー屋さんです。

調理器具やスパイスは世の中一般的なカレー屋さんが使う標準的なセットをレンタルしてきて、その制限の中で、レシピを工夫してカレー作りを行います。

- **メリット：** 調理器具やスパイスはあるのですぐにカレー屋を始められる。カレーを作ることに注力できます。そこそこオリジナリティのあるカレーを作ることも出来る。
- **デメリット：** 制限の中で考えないといけないのでカレーラーメンみたいな奇抜なものはできない。 調理器具やスパイスのレンタルの費用がそこそこかかる。

> いわゆるフレームワークまで準備されていてその上にのるアプリケーションを作るスタイルです。例えば、Webサービス、モバイルアプリなど。その範囲の中で作るのであればやりたいことに注力できます。フレームワーク自体もAWSやAzureの専門家が準備してくれているものなので過不足なく使いやすいです。ただし、例えば世の中にまったくないようなサービス（？）をやろうとするとフレームワークの制限が足枷になってしまいます。

## Case.3：SaaS的なカレー屋の開店

カレー自体にはオリジナリティのこだわりないカレー職人がこちらです。

自分オリジナルのカレーを作ることには執着はないです。おそらくこのカレー屋は「カレー」自体ではなくもっと他の何かに付加価値を付けたいのだと思います（内装とか接客とか）。

なので自分でカレーを作ることはせず、カレー自体を他のカレー専門店から調達してきます。

- **メリット：** すぐにカレー屋を始めることが出来る。その分カレー以外のことに力を注ぐことができる。他から調達するといっても調達先さえ間違わなければ自分で作るよりおいしいカレーかもしれません。
- **デメリット：** カレー自体での差別化ができません。自分で作るより高くつくかもしれません（でも変にこだわるカレーを作るよりも安いかもしれません）。

**＊＊＊**

どうでしょう？ イメージつかめたでしょうか。


## 結論

カレー屋で説明するのは大変。
バリア

```py
import logging
import threading
import time

logging.basicConfig(level=logging.DEBUG, format='%(threadName)s: %(message)s')


def worker1(barrier):
    r = barrier.wait()
    logging.debug('num={}'.format(r))
    while True:
        logging.debug('start')
        time.sleep(2)
        logging.debug('end')


def worker2(barrier):
    r = barrier.wait()
    logging.debug('num={}'.format(r))
    while True:
        logging.debug('start')
        time.sleep(2)
        logging.debug('end')



if __name__ == '__main__':
    barrier = threading.Barrier(2)
    t1 = threading.Thread(target=worker1, args=(barrier,))
    t2 = threading.Thread(target=worker2, args=(barrier,))
    t1.start()
    t2.start()
```
コンディション

```py
import logging
import threading
import time

logging.basicConfig(level=logging.DEBUG, format='%(threadName)s: %(message)s')


def worker1(condition):
    with condition:
        condition.wait()  #notifyAllが呼ばれるまで待機
        logging.debug('start')
        time.sleep(3)
        logging.debug('end')


def worker2(condition):
    with condition:
        condition.wait()  #notifyAllが呼ばれるまで待機
        logging.debug('start')
        time.sleep(3)
        logging.debug('end')


def worker3(condition):
    with condition:
        logging.debug('start')
        time.sleep(3)
        logging.debug('end')
        condition.notifyAll()

if __name__ == '__main__':
    condition = threading.Condition()
    t1 = threading.Thread(target=worker1, args=(condition,))
    t2 = threading.Thread(target=worker2, args=(condition,))
    t3 = threading.Thread(target=worker3, args=(condition,))
    t1.start()
    t2.start()
    t3.start()
```

```txt
Thread-3: start
Thread-3: end
Thread-1: start
Thread-1: end
Thread-2: start
Thread-2: end
```
JSの基本中の基本

##1 変数の定義

```javascript
var hoge;
```

JSの場合、変数の宣言の際に"var"が必要です。
上記の記述をすると変数hogeの定義をすることができます。

##2 変数への代入

```js
var hoge;
hoge = 'hello';
```
または

```js

var hoge;
hoge = 10;
```

文字列を代入する場合はクォーテーションで囲む必要があります。

##3 変数の宣言と代入を同時に行う

```js
var hoge = 'hello';
```

こうすることで変数hogeの宣言とhelloという文字列の代入を同時に行うことができます。

##4 関数

関数の基本的な文法は

```js
function 関数名(引数) {
  return 関数が返す値;
}
```

##5 関数の作成

```js
function huga(hage){
  return hage*5;
}

var function = huga(5)

```

このhuga関数は引数hageに与えられた数値を5倍する関数です。
最後に変数fanctionにhuga関数から帰ってきた値を代入しています。

##6 関数の呼び出し

```js
関数名(引数);
```

こうすることで作成した関数の呼び出しをすることができます。
初心者によるプログラミング学習ログ 294日目

#100日チャレンジの294日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
294日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>294日目 6h<br>・xdデザインカンプからのサイト模写<br>・画面の比率拡大されすぎの調整<br>・ハンバーガーメニュー作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1251965808961417216?ref_src=twsrc%5Etfw">April 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【スタジオしまづ】カードゲームの作り方を学んでみる #2 カードの生成

カードゲームが作りたかったので【Unityゲームスタジオ スタジオしまづ】さんの動画を見ながら学習してみる

シャドバ風！？カードゲームの作り方 #2 カードの生成
https://youtu.be/fDDGQKVF10M

前回はこちら
[【スタジオしまづ】カードゲームの作り方を学んでみる #1 UIの実装](https://qiita.com/kreinto/items/f0215cab88ac70a9976c)

#シーンの編集
動画時間0:30～
・いったんフィールドと手札のカードを削除
・ゲームオブジェクトの名前を変更
　　Field  →  PlayerField
　　Hand  →  PlayerHand
　　Hero  →  PlayerHero
　　CostText  →  PlayerCostText

#ゲームマネージャー(GameManager)の作成
動画時間1:15～
・AssetsにScriptsフォルダーを作成
・ScriptsフォルダーにC#スクリプトを作成して名前を「GameManager」にする
・シーンに空のオブジェクトを作成して名前を「GameManager」にする
・ゲームオブジェクトのGameManagerにスクリプトのGameManagerをアタッチする
![2-01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617902/258cd627-d15b-e563-8b6a-93148e4fb886.png)


#手札にカードを生成する動作を実装する
動画時間1:58～
・前段階としてプレハブのカードをシーン上に生成する

```csharp:GameManager.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    [SerializeField] GameObject cardPrefab;
    void Start()
    {
        Instantiate(cardPrefab);
    }
}
```
インスペクターでCard PrefabにPrefabsフォルダのカードを設定して実行してみると
![2-02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617902/02062c1c-6acb-81de-4446-4fa59a9e6538.png)

ヒエラルキー上にCard(Clone)という名前でカードが生成されていることがわかる

手札に生成するためには手札の場所を知っている必要がある
・スクリプトを手札の情報を持つように編集する

```csharp:GameManager.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    [SerializeField] Transform playerHandTransform;
    [SerializeField] GameObject cardPrefab;
    void Start()
    {
        Instantiate(cardPrefab, playerHandTransform,false);
    }
}
```
Instantiateは引数に親要素を渡して生成することができる
今回使用する使い方はboolでfalseを指定することにより新しい親を基準として位置を設定するもののようです
Instantiate (Object original, Transform parent, bool instantiateInWorldSpace);
[Unityスクリプトリファレンス](https://docs.unity3d.com/ja/current/ScriptReference/Object.Instantiate.html)

PlayerHandTransformにシーンのPlayerHandを設定して実行してみる
![2-03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617902/89f2b335-b7f2-f490-ca1b-d1c3be6a7951.png)

手札に生成できた

#カードの生成をメソッド化して応用できるように
動画時間5:10～
CreateCardメソッドを作成してカードを手札に生成する処理を移す
さらにTransformを引数にすることで敵の手札にも生成できるようにする

```csharp:GameManeger.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    [SerializeField] Transform playerHandTransform;
    [SerializeField] GameObject cardPrefab;
    void Start()
    {
        CreateCard(playerHandTransform);
    }

    void CreateCard(Transform hand)
    {
        Instantiate(cardPrefab, hand, false);
    }
}
```

今回はここまで

---
次回はこちら
[【スタジオしまづ】カードゲームの作り方を学んでみる #3 カードデータの生成](https://qiita.com/kreinto/items/20d1b11d525e7ecb3eda)
【EC-CUBE】ペイジェント決済導入【4系】

**経緯**

EC-CUBE4系にてペイジェントの導入案件の対応。
案件途中で公式からプラグインが出たので、プラグインを使ってみました。
[ペイジェント決済プラグイン(4.0系) プラグインリンク](https://www.ec-cube.net/products/detail.php?product_id=1989)


#手順
管理画面 > オーナーズストア > プラグイン一覧 から他のプラグイン同様、インストールしてください。
一覧画面から有効化後、一覧画面から設定に移動し、契約時に取得した情報を設定します。
（設定しないと使えない）

#導入後
ペイジェントのプラグインでは、リンク型に対応します。
通常のEC-CUBEにおけるショッピングフローの確認画面にて、「完了ボタン」が「次へ」ボタンに変更され、
次へボタンを押すとペイジェントのサイトに飛びます。

決済後、サイトトップページに遷移します。

#注意点
##完了画面はshopping/completeにしたい
デフォルトでは決済後、サイトトップページに遷移しますが、プラグイン内のコードを修正することで遷移先を変更できます。

```php:app/Plugin/PaygentPayment/Service/PaygentRequestService.php
function setParameter($order, $config, $paymentMethod){
......
       // 戻りURL・中断時URL
       $params['return_url'] = $sUrl . "shopping/complete";
       $params['stop_return_url'] = $sUrl;
......
}
```

return_urlが処理完了後に遷移させるurlを設定させることができるパラメータです。
stop_return_urlは、処理を中断するときに遷移させるurlを設定させることができるパラメータです。

本来であればstop_return_urlは遷移元であるshopping/confirmに飛ばすのが理想的ですが、
処理の関係上それだけではうまくいかないので結構な書き直しが必要かもしれません。
カートがクリアされてしまうので、カートまで戻すのも少し微妙です。

逆にreturn_urlは上記のように書き直しますが、そのままではエラーになります。
原因は、デフォルトの管理画面ではshopping/completeの画面でセッションからorder_idを取得して、注文情報を復帰させているところです。
ペイジェントのプラグインではプラグイン側で処理を完了し、セッションをクリアするところまでしてしまうので、
ShoppingControllerのcompleteメソッド内の記述をクリアし、静的ページを表示するだけのようにしてしまい、
twig側でもorder.idを表示しないようにすることで、完了画面を表示することができます。

#決済フロー以外でクレジットカード決済を行いたいとき

決済フロー以外でクレジットカード決済を行うときには、

- 処理タイミングでカード情報を入力してもらい、トークンを作成。トークンを利用して決済を行う
- 事前にカード情報を入力してもらって、トークンを作成。トークンを利用してカード情報を登録しておく。
　→　任意のタイミングでカード情報に対して金額を設定して決済を行う。

の2パターンが大きくあります。
（トークンを利用しないパターンは利用不可です。）

##トークンの取得方法

トークンの取得方法は割愛します。
契約後に確認できるドキュメントを参照して、トークンをController側にPOSTするようにしてください。

##トークンを利用して処理を行うためのあれこれ
一番簡単に実装を行うには、プラグインにてインストールされたプログラムを基底クラスにしてあげるのがいいかと思います。
それをServiceにまとめてペイジェントのプラグイン以下を使った処理として書き、機能単位でControllerから呼び出すのがいいかなと思います。

以下にペイジェント側に入力されたカード情報を保管するための処理の実装イメージで抜粋します。（システム内の情報が出ない程度に）


```php:app/Customize/Controller/HogeFugaController.php
/**
 * とりあえず呼び出し元を適当に
 * @param $Customer : Customerエンティティ
 * @param $token : フロントで作ったトークン
 */
private function process(Customer $Customer, $token){
......
    $this->paygentCustomizeService->registCard($Customer, $token);
......
}
```

```php:app/Customize/Service/PaygentCustomizeService.php

// ペイジェントプラグインでインストールされたもののうち、Baseクラスを継承しとけばいろいろ楽
use Plugin\PaygentPayment\Service\PaygentBaseService;
class PaygentCustomizeService extends PaygentBaseService {

    // サービス側も色々省略
    ......
    /**
     * クレカ登録
     * @param $Customer : Customerエンティティ
     * @param $token : フロントで作ったトークン
     */
    public function registCard(Customer $Customer, $token){
        // Baseクラスのメソッド.共通処理でPOSTする電文が作れる
        // POSTする値は要確認
        $params = $this->commonNormalMakeParam("XXX");
        
        // その他のパラメータ（トークンやcustomer.idなど）はここで設定

        // Baseクラスのメソッド.
        // 実行処理と応答電文の解析をしてくれる
        $arrRes = $this->callApi($params);

        // 以下は$arrResを確認してみよう

    }
    ......
}
```

#最後に
API用のプログラムは別途ライブラリみたいな形で渡されますが、
せっかくプラグインで同じようなプログラムをダウンロードしているので、
こちらのほうが無駄なプログラムがなくていいかな、なんて思います。


#あとがき
ペイジェントプラグインなんですが、2020/04/20現在はVer.1.0.1です。
この時点で把握してるのが、登録したクレカ情報を引っ張り出す処理をするときにエラーが起こります。
処理の修正をすれば動きますが、このあたりは正直きれいではないので掲載は見送ります。
お問い合わせいただければ、ご回答させていただきます。
macOS CatalinaでGitを最新のものにアップデートする方法(Homebrew使用)

#概要
以下の記事を拝見してちょっと怖くなったのでGitを最新版にアップデートしたのですが、少し手間取ったので自分の備忘録も兼ねて方法をまとめます。


[①Git 2.26.0以下にある脆弱性](https://gist.github.com/azu/9e0ffcf42a24c7b7ad4b6a0611db073a)
※注釈に記載されていますが、厳密には2.26.0以下の全てのバージョンに脆弱性があるというわけでは無いようです。

プログラミングの勉強を始めて2ヶ月ほどなのでかなり初歩的な内容を含みますがご了承ください。
結論から言うと、**macOSのデフォルトシェルはzshなので、.zprofileにパスを記載する**必要がありました。**自分が使っているシェルの種類にも注意が必要だった**ようです。
#Homebrewのインストール
Macのパッケージの管理ではHomebrewが大変便利とのことですが、恥ずかしながら使ったことがなかったのでインストール。以下の記事を参考にさせていただきました。

[②【簡単】MacにHomebrewをインストールする方法と基本的な使い方](https://fukatsu.tech/homebrew)

#Gitのインストール
大筋は以下の記事を参考にさせていただいて実施しました。
[③Git のインストール 〜Git をMacにインストールしよう〜](https://tracpath.com/bootcamp/git-install-to-mac.html)

#インストールだけではバージョンが変わらなかった
自分がもともと使っていたGitのバージョンは2.23.0だったのですが、`$ brew install git`後に`git --version`としても
`git version 2.23.0`
と出てしまいました。

③の記事の後半に
> もともとインストールされていた旧バージョンが出てしまう場合は、こちらを参考に、
パスを通してください。

とあったためそれ以降の内容も実施。

#それでもバージョンが変わらない
それでもバージョンが変わらなかったため「mac git アップデート」とググって出てきた方法を片っ端から試しましたがどれを試してもバージョンが変わりませんでした。

困り果てたので今一度③の記事を良く良く読んでちゃんと理解していないところがあることに気付きました。
「.bash_profileってそもそも何？」

さっそくググります。
[④.bash_profileとは | 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word13650.html)

どうやらbashというシェルの設定ファイルが.bash_profileだそうです。
※シェルとは人間の入力をパソコン(正確にはOSのカーネル)に伝えるプログラムで、ターミナルの操作は彼らが橋渡ししてくれて実行されているそうです。

#自分のPCのデフォルトシェルは？
ということで気になってきたのが普段自分が使っているシェル。
ターミナル上で

```
$ echo $SHELL
```
を実行。

```
/bin/zsh
```

...何と自分のシェルはzshでした…
どおりで.bash_profileをいくらいじってもバージョンが変わらないわけですね。

※調べてみたところmacOS Catalina(2019年10月8日リリース)からデフォルトのシェルがzshになっているそうです。それまではデフォルトシェルがbashだったそうなので、ググって出てきたのもbashでの方法ばかりだったようです。


#zshに合わせて必要な処理を実行
概ね③の記事の後半を参考にしつつzsh仕様にして処理を実行していきます。
その際に注意が必要なのが、bashの.bash_profileにあたるものが**zshでは.zprofile**になる、ということです。
なので、`.bash_profile`の箇所は全て`.zprofile`に置き換えて実行します。

```
$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zprofile
$ source ~/.zprofile
```

その後ターミナルを再起動し、再度バージョンを確認

```
$ git --version
git version 2.26.1
```

無事最新のバージョンにアップデートされてました！

#後書き
最後、.zprofileに置き換えましょうと1行で書いてますが、もともとは.zsh_profileに置き換えて実行していました。
その結果、ターミナルを再起動すると`git --version`しても`git version 2.23.0`に戻ってしまっていて、また調べに調べてようやく.zprofileがzsh版の設定ファイルだと分かりました。(ファイル名が違うのでzshは起動時に.zsh_profileを読み込んでくれません。)
ITの世界は知れば知るほど新しいことが出てきて奥が深いです。。
シェルについてはまだほとんど分かりませんがきちんと理解すると大変便利なものみたいなのでどこかのタイミングでしっかりと理解を深め活用していきたいです。
MySQLが起動できない時の対処法


#環境

macOS Mojave 10.15.1

MySQL 8.0.15 

# エラー文

####エラー文１
dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib

####エラー文２
ERROR! The server quit without updating PID file

#解決方法




####MySQLのデータファイルやログなどが格納されているディレクトリを削除する 
$ sudo rm -rf /usr/local/var/mysql

####MySQLを再インストール 
$ brew uninstall mysql 
$ brew install mysql 

####MySQLを起動 
$ mysql.server start 
Starting MySQL 
SUCCESS!  

#感想

エラー文１でググっていたために、かなり時間がかかりました

エラー文２でググってみたらこのやり方ですんなり

詳しくは参考記事を見てください






#参考記事
https://reasonable-code.com/mysql-start-error/
CentOS 7 起動時設定

# 目的
前回（[Hyper-VでCentOS 7を起動する](https://qiita.com/eiji-noguchi/items/56bed525506430063b41)）の続きで仮想環境にLinuxを入れていろいろやってみたい
そのための初期設定

# 準備するもの
- Linux環境

# 設定していく
CentOS 7を初回起動すると設定が開始される
まず、言語設定
個人的には日本語がおすすめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/a16769cd-9360-dd8e-9435-bf02c82a7e7f.png)

次にインストール概要の設定
今回設定するのは以下の3つ
1. ソフトウェアの選択
2. インストール先
3. ネットワークとホスト名
![インストール概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/7ed2cf1f-751c-9a33-c0d5-6420579c153a.png)

**①ソフトウェアの選択**
サーア（GUI仕様）を選択し、GUI（デスクトップ）を使えるようにする
やっぱGUIがあると初心者でも分かりやすいしね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/962d9518-07af-a279-a25a-af796e6b7175.png)

**②インストール先**
仮想環境を構築する際に作ったハードディスクがあるのでそれを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/9f2d0e21-4810-335b-d4ce-0f7f4560b8c7.png)

**③ネットワークとホスト名**
ネットワークへの接続のため設定をONにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/afb2f099-79ae-cfa1-f197-22845d4bda46.png)

以上3つの設定が完了したら「インストールの開始」をポチッ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/dc572f00-a30a-bafb-e49c-7a8caeb19051.png)

インストールが始まったら、ROOTパスワードとユーザ設定を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/15ea2c03-8a94-8102-828a-efa3d79c0f5c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/3dddf6cc-c2d5-faaf-8cfb-8ec2c2f906ac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/56fd0fdf-b5cc-06fa-c211-be292a19d363.png)

以上で設定は終了
CentOS 7のインストールが終われば再起動を求められる
再起動後、ライセンスに同意し設定の完了をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/f86327ee-a941-162e-1100-234ae29a3ccf.png)

ログイン画面に先ほど作成したユーザ名が表示されるのでパスワードを入力し、ログイン
![CentOSログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/bb739e7f-b407-2257-cd23-d9626c93c619.png)

ログイン後、再度いくつかの設定を求められるのでお好みで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/ffe45f87-32bd-646c-ce45-ba3646500fbe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/d46fd9b2-6a57-6baa-2914-355c2c31bbcd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/271e4ba0-5b41-9d33-7d4f-2a84041efcf6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/509958f8-e360-02eb-b9c2-332372c48ace.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/d7e1b01d-45ed-ec13-c4c7-772fe2391490.png)

すべての設定が終わったらデスクトップが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/be1fbd9d-0f64-99a2-9b33-70d34e1c6822.png)

以上でCentOS 7の設定を終了する
nvim-qtで日本語入力時に，textwidthに従って自動改行してほしい場合の対処

## 問題
Kaoriyaさんのgvimでは，日本語入力時に`textwidth`を設定していた場合，自動改行される．
### kaoriya版gvimの挙動
![gvim_tw.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604598/a798741e-3f9d-78c3-16b3-4d6a301508bf.gif)

しかし，nvim-qtでは，`textwidth`を設定しても日本語が自動改行されない．
(スペース入力後の文字列のみ改行される)
### nvim-qtの標準挙動
![nvim_tw.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604598/eac201ff-bbf2-8fb8-a213-2a7c0775047a.gif)

## 対処
`formatoptions`に`mM`を設定することで，`textwidth`に従った日本語の自動改行が行われるようになる．設定方法は，以下のコマンド

``` 
:set formatoptions+=mM
      または
:set fo+=mM
```

### `set fo+=mM`を実行後のnvim-qtの挙動
![nvim_tw_x.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604598/2c33d25f-68d5-742d-08db-b37bc2635d87.gif)

## おわりに
nvim-qtでも日本語の自動改行を行うための対処を示した．なお，この方法では禁則処理に対応できない．kaoriyaさんのgvimでは禁則処理に対応できているので，そちらはソースコードレベルで対処しているのかなと思っている．

## 追記
kaoriyaさんのgvimでの禁則処理対応は，autofmtというプラグインによるものだった．このため，このプラグインを利用することで，nvim-qtでも，kaoriyaさんのgvimと同様の日本語自動改行が可能となる．

### 禁則処理対応
プラグインマネージャとしてdeinを使用している場合の例を示す．以下の記述をInit.vim内に加える．

``` vim:Init.vim
if dein#load_state('~/.cache/dein')
   ...
   call dein#add('vim-jp/autofmt')   " <<追加
   ...
endif
set formatexpr=autofmt#japanese#formatexpr() " <<追加
```
これにより，禁則処理が行われるようになる．フォーマットがずれる場合は，Visualモードで該当行を選択した後，`gq`コマンドを入力することで再整形される．
webpack 開発環境 typescript 導入メモ

# 開発環境に TypeScript を導入したメモ
この前、qiitaに投稿した webpack の開発環境ですが、
TypeScript を導入したので一応メモ。
また、同時にPrettierもちゃんと導入しました。

https://qiita.com/itomise/items/e43cb2cedc9d03de43b5

環境などは前回と変わらずです。

## リポジトリ
https://github.com/itomise/webpack-template/tree/with-ts

`with-ts`ブランチをきって、そこにいれました。

## 各モジュールインストール

```bash
yarn add -D typescript ts-loader
```
また、@types系、prettier系は以下をインストールしました。

```bash
yarn add -D @types/node @types/webpack-env @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier
```

`module.hot`でエラーを吐いてしまうのは、`@types/webpack-env`をインストールすることにより解決するみたいですね。

## babelを取り除く
TypeScript には、JavaScript にコンパイル？トランスパイル？するだけでなく、
es3やes5に変換してくれる機能もあります。
`tsconfig.json` で指定しない場合、デフォルトはes3に変換されるようです。

そのため、babelは必要なくなるのでts系のローダーは`ts-loader`だけで済みました。
しかし、polyfill等はないので都度`@babel/polyfill`等を読み込む必要がありそうです。