OmniAICreator/Qiita-1.07M huggingface dataset:
いちいちsshでリモートサーバに入って作業するのが面倒なとき

# 背景
リモートサーバにバイナリだけアップロードしてちょっとした動作確認を繰り返したいとき

```sh
local> compile-command source_code
local> scp built_binary remote-server:~/
local> ssh remote-server
remote> sudo cp built_binary /opt/app/
remote> execute-command built_binary
```

という感じで、いちいちsshしてcpして実行するのがめんどくさかったので、
ローカルのシェルから出ることなく全ての作業を行いなーと思いました。

「リモートサーバーにコマンドだけ投げつけてえ！」

# 環境
クライアントマシン: MacOS Catalina 10.15.4
リモートマシン: Amazon Linux2

# やり方
めちゃ簡単でした。

```sh
ssh remote-server <command>
```
で行けるみたいです。

```sh
ssh remote-server ls 
```
だとそのリモートサーバのログインユーザのホームディレクトリ一覧が出てきます。

## sudoを使いたい
sudoを使うためには-tオプションを使いましょう。

```sh
ssh -t remote-server sudo cp ./file /opt/libs/
[sudo] password for hogehoge #ここでパスワード入力
```

## パスワード入れるのもめんどいわ！

```sh 
ssh remote-server 'echo password | sudo -S cp ./file /opt/libs'
```
として、2回目以降はhistoryから使い回しましょう。
historyにパスワードが見えてしまいますが、それは自己責任でw

# おまけ:-tだけじゃダメなとき(4/29追記)
このようにパイプで繋がっている場合では-tだけでは以下のようなエラーが出ます。

```sh
ls *.kt | xargs -I {} ssh -t remote-server sudo cp ./{} /opt/libs
```

```
Pseudo-terminal will not be allocated because stdin is not a terminal.
sudo: no tty present and no askpass program specified
```

その場合は-tオプションを2回重ねましょう。

```sh
ls *.kt | xargs -I {} ssh -t -t remote-server sudo cp ./{} /opt/libs
```
## そもそもssh -tオプションとは？

```
man ssh
...
     -t      Force pseudo-terminal allocation.  
             This can be used to execute arbitrary screen-based programs on a remote machine, which can be very useful,        
             e.g. when implementing menu services.  Multiple -t options force tty allocation,
             even if ssh has no local tty.
...
```
psedo-terminalとは疑似端末のこと。つまりsudoのパスワード入力を受け付けはこの疑似端末を介して行われます。
普通にsshでリモートサーバに入る時は自動で疑似端末が割当たります。そして我々は疑似端末上で操作していることになります。
ですが、このようにコマンドを投げつける場合は疑似端末は割りあたりません。
ところがsudoのパスワードは必要であるので疑似端末上でパスワードの入力を行う必要があります。
そこで-tオプションで強制的に疑似端末を割り当てることができます。

ここでさらに-t -tとすると疑似端末に加えttyを割り当てることができます。
間違いを恐れずに説明するならばttyとは標準入出力インターフェースみたいなもので、ローカルの端末(自PC)の入力はttyを介して疑似端末（リモートサーバ）に送られます。
ところがこのようにxargsを使用すると、プログラム（xargs）がsshを呼び出すことになります。
つまりPC操作者が入力したパスワードを受け取ってプログラム(xargs)自身が疑似端末へ代わりに入力することになります。
しかしプログラムはそのままでは標準入力するためのインターフェース(tty)を持っていないので入力できません（端末にはttyは付属しているので端末同士は特別意識する必要はない）。
そこで2個目の-tオプションにより、手動でttyを割り当てることで標準入力が可能となります。
個人開発の買付代行サービスにRspecとFactoryBotを導入した

#参考
https://qiita.com/Ushinji/items/522ed01c9c14b680222c
https://qiita.com/key_it6/items/fb94f229e9e45270c515

# やったこと

```Gemfile:Gemfile
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

  gem 'factory_bot_rails' #追加
  gem 'rspec-rails' #追加
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'web-console', '>= 3.3.0'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-commands-rspec' #追加
  gem 'spring-watcher-listen', '~> 2.0.0'
end
```

```Terminal:Terminal
bundle

bin/rails generate rspec:install
```

```spec/rails_helper.rb
省略
Dir[Rails.root.join('spec/support/**/*.rb')].sort.each { |f| require f }
省略
```



```spec/support/factory_bot.rb
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods
end
```

# 結果
```Terminal:Terminal
-> % bin/rspec
Running via Spring preloader in process 32344
No examples found.


Finished in 0.00101 seconds (files took 0.49014 seconds to load)
0 examples, 0 failures
```
全ては公式に書いてあったんや…（Slack API編）

# はじめに
新しいAPIや関数を使用する際に、
自分だと、そのAPIや関数をググって、誰かが書いたわかりやすい解説記事を使ってみることが多い。

しかし、記事には一部情報がピックアップされていたりして、欲しい情報が思うように得られないことが多々ある。

そんな時は公式ドキュメントを見れば全て書いてあるということに最近気づいた。
きっとそういう人は自分だけではないはず。（と、信じている。）
# 何を書いたか
今回はSlackのfiles.uploadを例に読み方を紹介した。

多くの公式ドキュメントには渡すべき、必須あるいは任意の引数や、返値が書いてある。
また、APIなら使うのに必要な設定も書かれており、困ったら一度公式に立ち返ってみることをお勧めする。

# files.upload公式ドキュメント
今回は"files.upload"の公式ドキュメントを元に、
構築に必要な情報を抜粋して（というか、自分が全部読めていないだけなのだが）紹介する。

ドキュメントは下記URLを参照のこと
https://api.slack.com/methods/files.upload
### Facts
ドキュメント上にある"Facts"には対象のAPIの基本情が記載されている。

- MethodURL
  プログラムが投げるべきURLが記載されている。プログラムはMethodURLをもとにクエリを作成する。

- Preferred HTTP method
推奨されるHTTPメソッドが記載されている。"POST"と記載されていれば、
推奨通りにPOSTメソッドでリクエストを送ろう。

- Accepted content types
受け入れ可能なコンテンツのタイプが記載されている。
content typesを指定する際はどちらかを使えば良い。

- rate limiting
  レート制限のことらしい（この項目に関しては特に必要としたことがない）
"Tier2"の場合、２０回/minのリクエストが保証されるらしい。
※項目をクリックすれば、詳細が見れる

- works with
  構築するAPI Appに付与する権限が記載されるている。Bot/User のどちらで構築する際でも"files:write"の権限の付する必要がある。

　　API Appへの権限付与にはOAuthスコープを指定すればよい。
　　詳細な設定方法は以下がわかりよい。　
　　http://dotnsf.blog.jp/archives/1074688701.html

![スクリーンショット 2021-01-12 20.53.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/4091291a-0735-6c14-27bb-f81e1a73f6bc.png)

### Arguments
Argumentsには引数が記載されている。
数が多いので全ての紹介は避けるが、これ等のうち、少なくとも"Required"を指定する。

例えば、tokenは必ず必須でchannelsにはチャンネル名もしくはIDを、（複数指定なら、コンマ区切りで）引数として設定できる

![スクリーンショット 2021-01-14 19.38.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/8cce2916-de96-6f6b-adac-3822c19ae51d.png)

### Response
Responseには返値の形式と中身の例が記載されている。
引値で必要な値がある時はここを参照するとよい。
![スクリーンショット 2021-01-14 19.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/ad323ca2-5d8c-b6f6-decf-b63e6a143573.png)

ちなみに、エラーが発生したときの返値については下記のように帰ってくる
"ok":false にはリクエストが失敗したこと、
また、"error"にはその内容が記載されている。
![スクリーンショット 2021-01-14 19.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/0157e233-83f0-d6a2-5abb-f38ec815b350.png)

### Error
最後に、Errorの説明をする。
Errorには文字通り、エラー内容が記載されている。
リクエストに失敗する場合、返値の”error”から該当する内容を
探すと解消方法のヒントになるだろう。
![スクリーンショット 2021-01-14 19.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/a221130d-0c6f-96a0-4c2f-030a260094aa.png)

# 最後に
以上がfiles.upload公式ドキュメントの読み方の紹介である。
公式を読めば全てが解決するとは限らないが、
少なくとも足掛かりにはなると思うので、
つまったら公式ドキュメントを一度見ることを推奨した。
【Android】MediaPlayerで音楽を再生する方法(備忘録)

#プログラミング勉強日記
2021年1月14日
MediaPlayerを使って簡単に音楽する方法をまとめる。


#MediaPlayerの使い方
　MediaPlayerで音楽を再生する方法は、音楽ファイルを再生する場合とURI・URLから再生する場合がある。

　MediaPlayerで音楽ファイル使う場合、音楽ファイルは`res/assets`または`res/raw`に置く。
　<b>assetsはフォルダ分けをすることができる。そのため、音楽ファイルが複数ある場合はassetsに置く方がいい。rawはそのまま音楽ファイルを入れる。</b>
　それぞれのフォルダはこのようにして作成することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/a9ae88d8-6e46-1a89-e193-791befc11163.png)


```java:音楽ファイルを再生する場合
mp = MediaPlayer.create(this, R.raw.musicFile); // 音楽ファイルを読み込み

mp.start(); // 再生開始
```

```java:URIから再生する場合
Uri uri = ; 
MediaPlayer mp = MediaPlayer.create(context, uri);
mp.start();
```

```java:URLから再生する場合
String url = "http://........";
MediaPlayer mp = new MediaPlayer();
mp.setAudioStreamType(AudioManager.STREAM_MUSIC);
mp.setDataSource(url);
mp.prepare(); 
mp.start();
```
Node.jsとMySQLの接続方法

#mysqlモジュールをインストールする
Node.jsでMySQLに接続するには、mysqlモジュールを使います。
以下のコマンドを実行してインストールします。

```
$ npm install mysql
```

#MySQLに接続する
MySQLを操作するjsファイルに追記していきます。
今回はMySQLを操作するjsファイルを `main.js` とします。
 `main.js` に以下を追加して、mysqlのモジュールをインポートします。

```:main.js
const mysql = require('mysql');
```

次に、 `createConection` メソッドで、使用するMySQLのデータベースとの接続の指定をし、 `connection` を作成します。（MySQLでデータベースを作成しておきましょう。）

```:main.js
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'database-name'
});
```

#クエリを実行する
データベースからデータを引出します。
例えば以下のようになります。

```:main.js
connection.query(
    'SELECT * FROM database-name',
    (error, results) => {
      res.render('list.ejs', { databaseーname: results });
    }
  );
```

#MySQLとの接続を切る
最後に `end` メソッドで `connection` によるMySQLとの接続を切ります。

```:main.js
connection.end();
```
Vue.js でアプリを作って楽しむ

# 初めに
ここ最近Vue.jsの勉強をしているが、今日はまとまった時間が取れないのでドキュメントが読めない。そこでアニメーションを作って楽しむことにした。

# どんなアプリか

### 映画でよくあるパスワードを破るシーン
文字がA, B, C, ... と勢いよく次々に表示され、パスワード解除！みたいなシーンを再現してみる。

# 実装

`v-on` ディレクティブでSTARTボタンを押したら文字がA, B, C, ... と次々に表示されるようにする。
念のためSTOPボタンも用意。

```html
  <div id="app">
    <button v-on:click="rotateStart()">START</button>
    <button v-on:click="rotateStop()">STOP</button>
    <p>{{ character }}</p>
    <p>{{ message }}</p>
  </div>
```


アルファベットはリストにしてぐるぐる回るように。
sleep で0.05秒で文字が切り替わるよう設定。

```js
var app = new Vue({
  el: '#app',
  data: {
    character: '',
    message: '',
    isTrue: true,
    cipher: 'HELLO WORLD'
  },
  methods: {
    rotateStart: async function() {
      var aplhabetList = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
      var cipherList = this.cipher.split('');
      var count = 0;
      var cipherIndex = 0;
      while (this.isTrue) {
        this.character = aplhabetList[count % 26];
        if (cipherList[cipherIndex] === this.character) {
          this.message += this.character;
          if (cipherList.length === cipherIndex + 1) {
            this.character = 'You broke the code!!'
            break;
          } else {
            cipherIndex++;
          }
        } else if (cipherList[cipherIndex] === ' ') {
          this.message += ' ';
          cipherIndex++;
        }
        await this.sleep(50);
        count++;
      }
    },
    rotateStop: function(){
      this.isTrue = false
      this.message = ''
    },
    sleep: time => new Promise(resolve => setTimeout(resolve, time))
  }
})
```

- 画面更新後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f24c6fdc-4b93-f7b0-9638-5f9241a663ae.png)

- START押下後 

動いてる！楽しい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/05275bb8-0c19-7a4d-5940-1d9e5ac7b928.png)

- 自然停止

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f684db9d-20cf-1040-58c9-e9e2ad3f6f47.png)
ある日jupyter notebookが突然開けなくなった【memory error】

#何が起きたか

kaggleカーネルをパクって、jupyter notebookで物体検出。
寝る前に機械学習の学習をぽちっ。
朝起きたらmemory error
そしてnotebookを再度開こうとすると、重い。そして開けない(memory error)
(写真とるの忘れた)

うーん、どうしたものかと思い、とりあえずgitにpushしようとしたらエラー。
理由...150MBあるため。
えー！そんなに無いよ！と思った

#理由

jupyterは開けないので、止むを得ず.ipynbをvimで開いてみる。軽い
そして気が付く

![スクリーンショット 2021-01-14 16.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/5671566b-2daa-dda0-d9d1-23adabeb56c2.png)

###200万行

ipynbをずらーっとみてみると、デバグ用に

```
print(images)
```

しておいたやつが無限に表示されてる。200万行分

notebookの中だと折り畳まれるので気にならないけど、こう言うの全部メモリに記録するから起きたっぽい
ということでvimでこの200万行を消す

```
2000000 dd
```

それで、あとは鍵かっこなど調整してあげれば開けた

#要するに
あまり不用意にprintするのも危険なのかもしれない
アドベントカレンダー37日目：SREを読んでみた「緊急対応」編①

今日から新しい内容、緊急対応についてみていきます。

## 前置き
組織の長期的な健全性に寄与するものの一つとして、緊急事態において、人々がどのように対応するかが挙げられます。
しかし、緊急事態に初めから適切に行動できる人はほとんどいません。
適切な対応をするためには、準備に加えて、定期的なハンズオントレーニングが必要になります。
この章では、緊急対応においてのインシデントの具体例について学んでいきます。

そして、どの緊急対応においても、以下の点を念頭に置く必要があります。

* まずパニックにならない。
* 圧倒されてしまうなら、多くの人を巻き込む
* インシデント対応の手順があれば、それに馴染んでおく

## テストによって引き起こされた緊急事態
Googleは、障害や緊急事態のテストについて、予防的なアプローチをとっています。
故意にシステムに障害を起こさせ、その障害の様子を観察します。
コントールされた障害は、通常予想通りに動作しますが、それが想定を超える場合があります。

### テスト内容
テストの目的は大規模な分散MySQLデータベースの1つにあるテスト用のデータベースへの隠れた依存関係を洗いだすことでした。100個あるデータベースの中の1つのデータベースへのアクセスをすべてブロックするというテストが行われました。

### レスポンス
テストが始まってから、数分の内にこのデータベースに依存していた無数のサービスから社内、社外からユーザーが重要なシステムへアクセスできないという報告が上がりました。
断続的、部分的にアクセスできるシステムもありました。
即座にテストを中止し、ロールバックを行おうとしましたが、それは上手くいきませんでした。
しかし、パニックにならずに、話し合い、テスト済みのアプローチからパーミッションのリストアを行いました。
障害の回復後に問題のライブラリ群は素早く徹底的に調査され、問題が起こらないように修正と定期的な再テストの計画が立てられました。

### 障害からわかったこと

#### うまくいったこと
* コントロールから離れたしまったテストを即座に中止するという判断ができた
* 最初の報告があがってから、1時間以内に障害の回復ができた。
* 同じような問題が起きないように丁寧に修正され、定期的なテストが行われた。

### 悪かったこと
* テストにおける影響範囲を理解した上で行われていると思っていたが、実際には依存関係にあるシステム間のやり取りに関して、理解が足りなかった。
* インシデントレスポンスは作られていましたが、その周知が足りなかったため、それに従うことができなかった。そのレスポンスの中では、サービスや顧客がサービス障害を認識することを保証するはずでした。
* ロールバック手順のテストを行っていなかった。

## まとめ
* システムの理解不足や周知不足、準備不足があると、障害が大きいものになってしまう。
* テストの際は、テストの周知とロールバックテストのを徹底して行う必要がある。

#### 参考文献
1. Betsy Seyerほか　SRE サイトリライアビリティエンジニアリング　オライリー　157-159
pyenvでPythonをインストールできない


　完全にメモです。他のPCでも実施予定なので、発生したら追記します。しばらく触っていないMacbook(Intel Mac)で発生しました。

```
BUILD FAILED (OS X 11.1 using python-build 20180424)
```

　色々やったので、結局何がきいたか分からなかったのですが、少なくとも有効だったのは以下です。

- OSを最新にアップデート macOS Big Sur（元のOSは忘れました…）
- XCode 12にアップデート

　別のマシンで再現したら、追記します。

## 参考リンク
[PyEnv BUILDのインストールに失敗しましたPython MacOS](https://www.it-swarm-ja.tech/ja/pyenv/pyenv-build%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%97%E3%81%BE%E3%81%97%E3%81%9Fpython-macos/805784937/)

[Python 3.9.0、3.8.6を pyenv を使って macOS BigSur にインストールする](https://qiita.com/craymaru/items/58e92fac99b5b0ec778f)

[macOS Big Sur で pyenv Python インストールできない場合](https://qiita.com/katafuchix/items/95abcf3a6e451a80aff4)

## 関連記事
[pyenv/pyenv-virtualenv/Anacondaを使ってクリーンなPython環境をセットアップ](https://karaage.hatenadiary.jp/entry/2016/04/04/073000)
【xdebug3.0 を使ってdebugが終わらせられなくてはまった】

Eclipseでxdebug3.0をセットアップして使えるようにしたが、コピペでセットアップした結果v.2系からの変更点があり、はまった。

**原因**
1. リモートとのセッションが自動でセットされる設定  にしていた。
2. 3.0系でその設定の名前が変わっているのに気づかなかった。

v.2.0系までは
`xdebug.remote_autostart=1`
に設定すると自動でリモートセッションがセットされていた。

v.3.0では、上のコードが無効になり
`xdebug.start_with_request = yes`
とすると、自動でセッションがセットされる。

他のサイトからコピペしたときにこのコードが紛れ込んでいたことで、debugを終わらせられず困った。
DBから関数名を読みだして動的に実行する

# フォルダ構成

~~~
project
  |
　├ __init__.py
　├ apps.py
　├ models.py
　├ routes.py
　├ views.py
~~~

# Modelをつくる

まずはmodels.pyに関数リストをあらわすクラスを規定します。

~~~models.py
from django.db import models
from django.db.models.signals import post_save

class FuncList:

    func_id = models.CharField(max_length=50)
    callback = models.CharField(max_length=50)

    def get_func_id(self):
        return self.func_id

    def set_func_id(self, func_id):
        self.func_id = func_id
        self.save()

    def get_callback(self):
        return self.callback

    def set_callback(self, callback):
        self.callback = callback
        self.save()
~~~

# DBへの保存／読み出しと動的実行


~~~views.py
# DBへの保存
def save_function(**kwargs):

    func_list = FuncList()

    func_list.set_func_id(kwargs['func_id'])
    func_list.set_callback(kwargs['callback'])

    return

# 動的実行
def dynamic_execution(arg1, arg2):

    # DBから読みだした関数を実行する関数
    def execution_handler(func, **kwargs):
        return func(**kwargs)

    # DBから関数リスト取得
    func_list = FuncList.objects.all()

    for i in range(len(func_list)):
        # 取得した関数を順番に実行
        result = execution_handler(func=eval(func_list[i].callback),
            arg1=arg1, arg2=arg2)

    return result

~~~

# あとがき

言葉足らずでしたが見に来てくださりありがとうございました。
本記事で不明な点は以下のサイトなどで補完できます。~~・・・多分~~

* [Django逆引きチートシート](https://qiita.com/uenosy/items/54136aff0f6373957d22)
* [Django: モデルフィールドリファレンス](https://qiita.com/nachashin/items/f768f0d437e0042dd4b3)
* [Pythonにてコールバック関数を使う](https://qiita.com/hatt0519/items/315cd25d3eaae3217103)
シェルのテストコードが書けるフレームワーク使ってみた

## シェルのテストについて
nodeならjest、javaならJUnit、など便利な方法がありますが、シェルにもありました。
それがこちら。

![cf597500-688b-11e9-9bbf-e7a4a2cff228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179803/aec577c0-fb65-3b5d-5cbb-9a5a2b8da341.png)



シェルのテストについて調べていると、他にもいくつかフレームワークはあるが、
一番便利で出来ることが多いので、これを選んだ。詳細はここへ
https://shellspec.info/comparison.html

公式ページはこちら。こちらから手順通りにやればすぐ使えます。
https://github.com/shellspec/shellspec

## 書き方
ちょっとした例を実際に書いてみる。ぱっと見クセ強すぎない？？
他の言語のテストフレームワークだと、普通は専用の関数に値を渡して値が一致しているかどうかっていうのがよくあるパターンですが、このフレームワークだと英文みたいに値を比較する。でも慣れたら文字通りって感じなので問題ない。

```shell:anime-suko.sh
# shellcheck shell=sh
Describe "practice.sh" 
    It '行ごとに期待する値が出力しているかどうか' 
        When run script ./practice.sh 
        The line 1 of output should eq "1" 
        The line 2 of output should eq "2" 
    End
    
    It 'いくつ実行されるかどうかのテストで、2つ出力される(コマンドライン引数がないので出力は2つになるはず)' 
        When run script ./practice.sh
        The lines of output should eq 2
    End
    
    It '引数で指定した値が出力されているかどうか'
        When run script ./practice.sh 5
        The line 3 of output should eq "5"
    End 
End
```
上記のコードの流れと説明

```
●「When run script」の後に任意のシェルのファイルを指定して、
期待結果を「eq」の後に書きます。

●一つ目のテストケースでは、「practice.sh」を動かして、1つ目に出力されたものが「1」かどうか、二つ目に出力されたのが「2」かどうかをテストしています。

●ItとEndのかたまりが、一つのテストケースとなります。
```

## 異常系のテストでちょっとだけ複雑なことをやりたい場合
以下のように、テスト実行前に任意の処理をして実際にテストして、あとからまた任意の処理をさせることもできます。
「When run script～」の部分で実際にテスト対象のプログラムが処理されるので、前後に任意の処理を書けばよいということになります。

```shell:anime-suko.sh
    It "【異常系】hogehogeテスト"
        # このテストケースのために、正常なsqlファイルを一時的に別の場所に移動
        mv ../batch/sql/hoge.sql ../batch/hoge.sql
        # 代わりとなる失敗用のsqlファイルを持ってくる
        cp hoge-failed.sql ../batch/sql/hoge.sql
        When run script ./hoge.sh local
        The line 4 of output should eq "ERROR:～が～です"
        # 仮に持ってきたsqlファイルを削除
        rm ../batch/sql/hoge.sql
        # 正常なsqlファイルを元の場所に戻す(次のテストケースで使うため)
        mv ../batch/hoge.sql ../batch/sql/hoge.sql
    End

```

## その他便利な機能
●モックも作れる
●テスト実行の際、並列実行、ランダム実行
●プロファイラの表示
➡処理の遅いテストが見つかる
※詳しくは公式ドキュメントへ

## ちょっとハマったこと
不適切だが、出力結果を空文字としてスペース無しの「""」を期待値に設定したところ、
何をしても＜unset＞と表示されてしまった。
試しに任意の文字列に変えてみたらいけた。なので、空文字は期待値として指定できないことが分かった

## 実行結果
※通常のコマンドだけだと、成功したテストケースは、緑色の点でしか表示されず、その成功したテストケースって具体的になんなの？って感じでわざわざコードを見なきゃいけなくなる。

だが、以下のオプションを指定したら、全ての成功失敗問わず全てのテストケースを表示してくれる。

```
--format documentation
```
これを標準にしてほしい

●普通にコマンドを実行した場合(テストケース全て成功)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179803/f812c3ff-85f4-0207-37d3-5c554a4f8234.png)

●普通にコマンドを実行した場合(テストケース一部失敗)
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179803/df8e5635-f18b-d0c0-a752-0df89339febd.png)

●オプション指定したコマンドを実行した場合(テストケース一部失敗)
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179803/173765f5-ccc3-91f5-e481-5eab1b2ee42f.png)

## 感想
シェルってシステムのほんの一部でちょこっと使われてるぐらいのものなのかなと思っていたのですが、
定期実行とかでがっつり使われてるものを業務で初めて経験したので、こういう便利なフレームワークを見つけられてよかった。
MATLAB/SimulinkでもクラウドCIを無料範囲内で導入

# なんの記事？
MATLABコードのテストがTravisCI, CircleCI, Azure Pipelinesで**無料で**行えるらしいので試してみました
https://blogs.mathworks.com/developer/2020/12/15/cloud-ci-services/
![Supported_CI_Services](https://blogs.mathworks.com/developer/files/y2020_Supported_CI_Services.png "https://blogs.mathworks.com/developer/2020/12/15/cloud-ci-services/から引用") 
https://jp.mathworks.com/solutions/continuous-integration.html
>MATLAB、Simulink、およびほとんどのアドオン製品は、Azure DevOps、CircleCI、および Travis CI において、バッチ使用限定で追加費用なしで利用できます。このサービスでは、「Add-On Product Requirements & Platform Availability」ページに記載されているとおり、MathWorks のコード生成製品やコンパイラ製品などの特定の変換プログラムは除外されます。

# 実際にやってみた
https://github.com/nixir/MATLAB_meets_CI
![Screenshot_2021-01-14 nixir MATLAB_meets_CI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427718/a07d6ba6-b1d0-9e79-7c02-788f9a656627.png)

有料ソフトウェアなのに無料でテストできる:flushed:

# テスト速度比較
[このコミット](https://github.com/nixir/MATLAB_meets_CI/commit/0808cd6934f521320d50106100093446ea1c084e)を比較しました

|  | [CircleCI](https://app.circleci.com/pipelines/github/nixir/MATLAB_meets_CI/13/workflows/94533d38-7729-44ef-9552-4506d16a83a4) | [TravisCI](https://travis-ci.org/github/nixir/MATLAB_meets_CI/builds/754434082) | [Azure Pipelines](https://dev.azure.com/nixirk/MATLAB_meets_CI/_build/results?buildId=3&view=results) |
|:-:|:-:|:-:|:-:|
| 合計時間  | 2m26s | 2m32s | 3m35s |
|関数runtests にかかる時間|6.14s|5.77s|7.15s|
テストはCircleCIが一番速いみたいです
runtests自体よりもコンテナの用意で差がでるのでしょうか

# まとめ
MATLAB/SimulinkもクラウドCIを無料範囲内で導入可能！
有償ソフトウェアなのに！MathWorks社さんありがとうございます！
これから使い倒します:fist:

# 参考文献
https://blogs.mathworks.com/developer/2020/12/15/cloud-ci-services/
https://blogs.mathworks.com/developer/category/continuous-integration/
https://jp.mathworks.com/solutions/continuous-integration.html
導入例:https://github.com/UniprJRC/FSDA
CycleGANのイメージを数学なしてざっくり理解する。

#目的
DeepLearningを扱いたいと思い、触ってみる。


#CycleGAN(敵対的生成ネットワーク)の仕組み

2つのニューラルネットワークを組み合わせて、実装するらしい。

その2つは、
「画像を生成するニューラルネットワークA」と、
「Aが生成した画像の元データを当てるニューラルネットワークB」。

Aは、Bに絶対に当てられたくないと考えて画像を生成し、
Bは、Aを絶対に当てたいと考えて画像を識別すると言う敵対関係にある。


#CycleGANでできること
（フォートナイトの風景をPUBG風）[https://ainow.ai/2018/08/21/143977/]にすることや、
(オバマ元大統領に、トランプ大統領の所作風)[http://www.cs.cmu.edu/~aayushb/Recycle-GAN/]にすることができる。

#まとめ
画像のword2vec的な要素もあるらしく、
優秀な営業マンやホテルマンの所作を、これから育成する社員に乗せてみて比較するなどの応用ができないか模索してみたい。
[備忘録]「box-sizing: border-box;」の有無

# 本記事の目的
- resetcssに含まれていてフロント実装中あまり意識しない、``box-sizing: border-box;``の有無によってどのようにレイアウトが変化するかを確認する。

# 事前準備
``boxsizing.html``と``boxsizing.css``という名前のファイルを以下の様に用意した。

```html:boxsizing.html

<!DOCTYPE html>
<html>
  <head>
    <title>boxsizing練習</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="boxsizing.css">
  </head>
  <body>
    <div class="box-space">
      boxsizingの練習
    </div>
  </body>
</html>

```

```css:boxsizing.css

.box-space {
  background-color: aqua;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;
}
```

# 検証
事前準備で用意したHTMLファイルをGoogle Chromeで表示してみる。
![boxsizingfix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832303/6ee688e7-4119-7244-db9d-fcc33efd9e6b.png)
検証ツールの右下の図↓
![boxsizingchart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832303/fb5f3f3e-6766-80f5-94cc-8ba2dd4679fc.png)



事前にCSSで指定した通りだが、paddingがあることで目に見えるdiv要素が大きくなってしまっている。
(marginは目に目に見えないので覗く)

```
divの高さ :100px
divの横幅 :100px
内側の余白 :10px
外側の余白 :10px
divを囲う線の幅 :2px

目に見える部分の縦合計値 (100px + 10px + 10px + 2px + 2px = 124px)
目に見える部分の横合計値 (100px + 10px + 10px + 2px + 2px = 124px)
```
<br>
次に``box-sizing: border-box;``を入れて表示してみる。

```css:boxsizing.css
.box-space {
  background-color: aqua;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;

  /* 新しく追加 */
  box-sizing: border-box;
  /* 新しく追加 */
}
```

↓↓↓↓
![boxsizingpresense.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832303/147e8ed8-ec37-da31-f3b6-0116e740b4d1.png)
検証ツールの右下の図↓
![boxsizingpresensechart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832303/ea919111-9aa4-e137-5695-8d8530bafc7d.png)

``box-sizing: border-box;``がない時に比べdiv要素が小さくなっている様に見える。

```
divの高さ :76px
divの横幅 :76px
内側の余白 :10px
外側の余白 :10px
divを囲う線の幅 :2px

目に見える部分の縦合計値 (76px + 10px + 10px + 2px + 2px = 100px)
目に見える部分の横合計値 (76px + 10px + 10px + 2px + 2px = 100px)
```

# 結果

```
box-sizing: border-boxがないときの目に見える部分の高さと横幅 : 124px
box-sizing: border-boxがあるときの目に見える部分の高さと横幅 : 100px
```

``box-sizing: border-box``があると、目に見える部分の高さと横幅を指定したheightとwidthに合わせるために、箱のサイズ(上の場合box-spaceのdiv要素)が調整されることがわかった。

# 感想

- 当たり前のことも馬鹿正直に検証してみると「オオ〜」ってなる。
File::Statクラスについて

# 概要  
ファイル情報を取得する際にFile::Statクラスについて調べたことについて書きました。  
# File::Statクラスとは
File::Statクラスとは、ファイル容量やパーミッションなどの情報を取得する時に用いるメソッドです。

## File::Statの属性メソッド
ファイル情報を取得する際にしようした属性メソッドについてまとめます。  

* mode  
ファイルモードを取得する  
* size  
ファイルサイズを取得する
* atime  
最終アクセス時刻を取得する  
* mtime  
最終更新時刻を取得する

# まとめ  
属性メソッドは上記以外にもありますが、今回は実際に使用したメソッドについて書きました。
特定の要素だけフェードイン表示のタイミングがおかしい…そんな時に確認するポイント（画像編）

#症状
要素をフェードイン表示する際に、ある要素だけ表示されるタイミングがおかしいという不具合が発生しました。
具体的には、その要素だけコンマ何秒か遅れて表示されてしまいます。
これによって、スムーススクロールでその要素にリンクする際に、スクロールがカクつくという症状が現れました。

調べてみたところ、
「あーそんなこともあるのか、、、」
という理由だったので、備忘録がてら残しておきます。

##原因
フェードイン表示させる要素の**「子要素の画像」**が原因でした。

この画像のサイズだけが、**やたら大きかった**のです。

それだけの理由でした。。。

##解決策
画像を、圧縮してください。
（いや、僕も圧縮してたんですけど！提供していただいたその画像だけ元のサイズが大きすぎて！したとて！やったんです！）

##まとめ
原因をあれこれ探してみて、「コードやCSSは間違ってなさそうやな、、、」
という時は、画像のサイズも確認してみてください。

以上です！
PHP ログ出力調査

/tmp/dump.logに吐くようにする

```php
$tar1 = '調査対象1';
$tar2 = '調査対象2';
$tar3 = '調査対象3';

ob_start();
var_dump( $tar1,$tar2,$tar3 );
$dump = ob_get_contents();
ob_end_clean();
file_put_contents( '/tmp/dump.log', $dump ,FILE_APPEND);
```
【Swift】アクセス修飾子を理解して使い分ける

# はじめに
Swiftでコーディングする際、アクセス修飾子を適当に使っちゃってないですか？
雰囲気で使いわけてレビューで突っ込まれてないですか？

なぜ定数(変数)を使うのか、なぜその修飾子を使うのか理解して使うために自分なりにまとめたので、よかったら参考にしてください！

# 変数と定数
**let(定数)**
値を変更する可能性がない場合に使う
**static let**
全インスタンスから共通で利用できる
**var(変数)**
後から値を変更することができる

```swift
let hoge = hogehoge

static let hoge = hogehoge

var hoge = hogehoge
```

# アクセス修飾子
**Set**
入れた値を使って他のプロパティの値に渡すことができる
**Get**
他のプロパティの値を受け取るのことができる

追記: getterは同一モジュール内、setterは同一スコープ内からアクセスできる
(@takehito-koshimizu さんありがとうございます🙏)

```swift

private(set) var hoge = hogehoge
```



**Public**
別モジュールから呼び出せるが継承やオーバーライドが不可能
**Private**
同スコープ内からのみ呼び出せる
**fileprivate**
同じfile内であれば呼び出せる

```swift
private let hoge = hogehoge

private var hoge = hogehoge
```

```swift
public let hoge = hogehoge

public var hoge = hogehoge
```

```swift
fileprivate let hoge = hogehoge

fileprivate var hoge = hogehoge
```

参考になりましたでしょうか？よければLGTMくれると僕がめっちゃ喜びます！
Swift UITextViewのplaceholder

#UITextViewにplaceholderがない！？
twitter風アプリを作ろうと思った時にtextfieldと同じように`textView.placeholder = ""`って感じでコードを書くと
`Value of type 'UITextView' has no member 'placeholder'`と怒られてしまいました。
え、`textView`って`placeholder`ないの...
ということで、なんとかして`textView`に`placeholder`を実装していきましょう。

今回は`UITextView`を継承した`TextView`という`class`を作成してその`TextView`の中に`UILabel`を`addSubView`していきます。

```swift:TextView.swift
class TextView: UITextView {
    
    public let placeholderLabel: UILabel = {
        let label = UILabel()
        label.textColor = .lightGray
        label.font = .systemFont(ofSize: 18)
        label.numberOfLines = 0
        return label
    }()

    override init(frame: CGRect, textContainer: NSTextContainer?) {
        super.init(frame: frame, textContainer: textContainer)
        addSubview(placeholderLabel)
        
        placeholderLabel.translatesAutoresizingMaskIntoConstraints = false
        let cons = [
            placeholderLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            placeholderLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 5),
            placeholderLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -5),
        ]
        
        NSLayoutConstraint.activate(cons)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
```
こんな感じでTextViewを定義しました。

あとは`ViewController`で`textView`を表示するだけですね！

```swift:ViewController.swift
class ViewController: UIViewController {

    let textView: TextView = {
        let textView = TextView()
        textView.placeholderLabel.text = "placeholderだよー"
        textView.font = .systemFont(ofSize: 18)
        return textView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(textView)
        textView.frame = .init(x: 0, y: 100, width: view.frame.size.width, height: view.frame.size.height-200)
    }
}
```

これでいい感じに表示されました！
でも、このままだと入力した文字と`placeholderLabel`の文字が重なってしまいますね。
んー、どうしよっかと考えた結果`UITextViewDelegate`の`textViewDidChange(_ textView: UITextView)`を使うことにしました。

```swift:ViewController.swift
extension ViewController: UITextViewDelegate {
    func textViewDidChange(_ textView: UITextView) {
        if textView.text.isEmpty {
            self.textView.placeholderLabel.alpha = 1
        } else {
            self.textView.placeholderLabel.alpha = 0
        }
    }
}
```

こんな感じです。
`textView.text`が空だったら`placeholderLabel`を表示し、そうでなかったら`placeholderLabel`を非表示にする。

#まとめ
textViewにplacehoderを実装するだけで結構コード書かないといけないですね笑
もっと簡単に実装できる方法があればどなたか教えてください！
Vuetify2.0でカスタムソートを使用する

##datatableの並び替えについて
デフォルトのソートは便利ですが、「100円、200円」のような文字列の場合、思うような並び替えができません。
![sort_default_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946974/7c8f520a-c047-68f9-4420-8551221bedb4.png)
昇順の並び替えですので、「みかん」⇒「りんご」の順番で並び替えてほしいところ。

##カスタムソートを実装する
```HTML
<v-data-table
  :custom-sort="custom"           
>
```
カスタムソートを実装するには`custom-sort`を定義し、ソート条件を作成します。
以下の例では、値段の並び替えの場合、文字列から数値を取り出し比較しています。

```JS
  methods: {
    custom: function(items, index, isDesc) {
      items.sort((a, b) => {
        if (index[0] === 'price') {
          var priceA = a[index].replace(/[^0-9]/g, '');
          var priceB = b[index].replace(/[^0-9]/g, '');
          if (!isDesc[0]) {
            return priceA - priceB;
          } else {
            return priceB - priceA;
          }
        } else {
          if (!isDesc[0]) {
            return a[index] < b[index] ? -1 : 1;
          } else {
            return b[index] < a[index] ? -1 : 1;
          }
        }
      });
      return items;
    }
```
使用したテストデータです。

```JS
  data () {
    return {
      headers: [
        { text: '名前', value: 'name',},
        { text: '値段', value: 'price' },
      ],
      items: [
        { name: 'りんご', price: '50円',},
        { name: 'みかん', price: '10円',},
```

カスタムソート実装後、理想の並び順で表示されるようになりました。
![sort_custom_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946974/06d0bf4d-2fa3-bf90-bc61-d73b768a4c6f.png)
Swaggerで作成したyamlのAPI仕様書をHTMLにする方法

bootprintプリントというものもあるみたいだけどパラメータが出力できなかったのでredoc-cliを使用してみた。
簡単にできたのでおすすめ

インストール：

```

npm install -g redoc-cli
```

使用法：

```

redoc-cli bundle -o index.html swagger.json
```
CSS変数（カスタムプロパティ）が便利だった

ずっとSassの変数と同じだろうと思いスルーしていました。
試しに使ってみたところ、Sass ではできない便利な変数の利用方法を発見！
というわけで、CSS変数（カスタムプロパティ）の仕様をまとめてみました。

## 変数の宣言と値の定義

* 変数の宣言
  * 先頭にハイフンを2つ `--` 付けて任意の名前を記述する
    * 大文字・小文字が区別される
* 値の定義
  * コロン `:` で区切って値を記述する
* スコープ
  * `:root` 擬似クラスで変数を宣言することで、どこでも使用可能
  * CSSセレクタ内

```css:CSS
/* どこでも使用可能 */
:root {
  --text-color: #444;
}
/* セレクタ内で使用可能 */
.hoge {
  --hoge-color: red;
}
```

## 変数の呼び出し

* `var(--変数名)` 関数を使って呼び出す
* プロパティ名を変数にすることはできない

```css:CSS
:root {
  --text-color: #444;
  --margin: margin;
}
.hoge {
  color: var(--text-color);
}
/* プロパティ名を変数にすることはできない */
.fuga {
  var(--margin): 30px;
}
```

### フォールバック値の設定

* 指定されたCSS変数が未定義の場合、代替値をカンマ区切りで複数指定可能
  * 代替値にCSS変数を指定する場合は `var()` 関数を使用する

```css:CSS
/* --text-color が定義されていなければ #444 */
.hoge {
  color: var(--text-color, #444);
}
/* --text-color が定義されていなければ --text-color2 が適用 */
.hoge {
  color: var(--text-color, var(--text-color2));
}
/* --text-color2 は適用されない */
.hoge {
  color: var(--text-color, --text-color2);
}
```

## CSS変数の中でCSS変数を設定

CSS変数はCSS変数を使って定義することも可能です。

```css:CSS
:root {
  --gradient-start-color: #e66465;
  --gradient-end-color: #9198e5;
  --bg-gradient: linear-gradient(var(--gradient-start-color), var(--gradient-end-color));
}
.hoge {
  background: var(--bg-gradient);
}
```

## CSS変数の継承

CSS変数は別の値が設定された場合、要素の子要素は新しい値を継承します。

```css:CSS
:root {
  --text-color: #444;
}
body {
  color: var(--text-color);
}
.red {
  --text-color: red;
}
.blue {
  --text-color: blue;
}
```

```html:HTML
<body>
  <p>黒い文字</p>
  <div class="red">
    <p>赤い文字</p>
  </div>
  <div class="blue">
    <p>青い文字</p>
  </div>
  <div>
    <p>黒い文字</p>
  </div>
</body>
```



## メディアクエリ内での利用

これがとっても便利！
Sass ではメディアクエリ内で変数を定義することができません。
CSS変数を利用すると色の管理を一箇所でまとめて指定できちゃいます！

```css:CSS
:root {
  --text-color: #444;
  --bg-color: #fff;
}
/* ダークモードの時 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fefefe;
    --bg-color: #333;
  }
}
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}
```

## JavaScript での利用

CSS変数は Javascript から値の取得・設定が可能です。

### 値の取得

```html:HTML
<div id="hoge"></div>
```

```css:CSS
:root {
  --text-color: #444;
}
#hoge {
  color: var(--text-color);
}
```

```javascript:javascript
const hoge = document.getElementById('hoge')
// hogeの計算済みスタイルを取得
const hogeStyle = getComputedStyle(hoge);
// CSS 変数 --text-color の値の取得
const hogeStyleVal = hogeStyle.getPropertyValue('--text-color');
console.log(hogeStyleVal); // #444
```

### 値の設定

```html:html
<div id="hoge"></div>
```

```css:CSS
:root {
  --text-color: #444;
}
#hoge {
  color: var(--text-color);
}
```

```javascript:javascript
const hoge = document.getElementById('hoge')
hoge.style.setProperty('--text-color', 'red');
```
MaterialComponentのChipの背景色を透明にする方法

タイトルのとおりです。軽く詰まったので残します。

https://material.io/components/chips/android

↑のテキストを見ると、`app:chipBackgroundColor`というAttributeが存在するのがわかります。そこにtransparentを設定してみましょう。

    <style name="ChipStyle" parent="Widget.MaterialComponents.Chip.Action">
        <item name="chipStrokeColor">?colorOnPrimary</item>
        <item name="android:textColor">?colorOnPrimary</item>
        <item name="chipBackgroundColor">@android:color/transparent</item>
    </style>

![chip_trimmed1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218207/61b5e350-37b8-c8a5-de15-07c7fafd2958.png)


こうなる。why。

https://github.com/material-components/material-components-android/issues/367
↑のIssueを発見。
別途、`chipSurfaceColor`を設定する必要があるみたい。

    <style name="MatchedAffinityChip" parent="Widget.MaterialComponents.Chip.Action">
        <item name="chipCornerRadius">32dp</item>
        <item name="chipStrokeWidth">1dp</item>
        <item name="chipStrokeColor">?colorOnPrimary</item>
        <item name="android:textColor">?colorOnPrimary</item>
        <item name="chipBackgroundColor">@android:color/transparent</item>
        <item name="chipSurfaceColor">@android:color/transparent</item>
    </style>

![chip_trimmed2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218207/778719ce-4110-2a16-94c8-5668bba4d0e4.png)

こうなる。

よかったですね。
has_many throughで重複したデータをdistinctしたい

# 問題

例えばこういう関係のモデルがあったとして

```rb
class User < ApplicationRecord
  has_many :lists
end

class List < ApplicationRecord
  belongs_to :user
  belongs_to :product
end

class Product < ApplicationRecord
  has_many :lists
end
```

UserはListを複数持っていて、各ListはProductを参照していて...
Userに関連するProduct全部持ってきたい...

# 解決方法

```rb
class User < ApplicationRecord
  has_many :lists

  # これだとListの数分重複するProductが返ってくる
  # has_many :products, through: :lists 

  # distinctを差し込んでやる
  has_many :products, ->{ distinct }, through: :lists
end
```

すごく便利（[ここ][1]を参照しました）

[1]: https://www.lugolabs.com/articles/distinct-active-records-in-has_many-through-associations
Raspberry Pi OS 64bitを有効化

# 概要

Raspberry Pi OSを64bit対応に設定変更する方法について記載します。

## 対象

`ARMv8 (64bit)`を搭載する次のRaspberry Piが対象です。(2021年1月現在)

- Raspberry Pi 3 Model A+
- Raspberry Pi 2 Model B V1.2
- Raspberry Pi 3 Model B/Model B+
- Raspberry Pi 4 Model B
- Compute Module (CM3)
- Compute Module (C3L)

## 手順

1. `/boot/config.txt`に次の1行を書き加える。

    ```shell
    arm_64bit=1
    ```

1. リブートする。

    ```shell
    sudo reboot
    ```

1. 確認する。`aarch64`となっていれば64bit対応されている。

    ```shell
    uname -a | grep aarch64
    ```

    ```text
    Linux raspberrypi 5.10.6-v8+ #1393 SMP PREEMPT Mon Jan 11 15:13:58 GMT 2021 aarch64 GNU/Linux
    ```
【Nim】コマンドプロンプトにカラフルな文字を出力できるライブラリを作ったよ！

# 初めに
最近、Nimを始めました。
さわりとして、コマンドプロンプトにカラフルな文字を出力できるcolorizeEchoというライブラリを作りました！

# インストール

nimbleを使って今すぐインストールできます。

```shell
nimble install colorizeEcho
```

# 使い方

`echo`の代わりに`cecho`という関数を使います。
第一引数に特定の書式に基づいた文字を渡すだけで簡単に文字の前景/背景の色を変えることができます。また、文字の太さを変えることもできます。

- 前景を変える場合 = `[red]`, `[cyan]`

- 背景を変える場合 = `[bRed]`, `[bCyan]`

- 文字の太さを変える場合、 `[bold]` もしくは `[regular]` を文字の直前においてください。

####実際のコード例

```Nim
import colorizeEcho

initColorizeEcho() # cechoを呼ぶ前にこの関数を一度呼ぶ必要があります。

cecho "[magenta]Every [green]color [cyan]is [default]beautiful."

cecho "[black][bgMagenta]Background [bgGreen]color [bgLightRed]is [bgCyan]changable [bgYellow]too."

cecho "[lightYellow][bold]THICC TEXT [regular]REGULAR TEXT"
```

####出力結果↓

![result](https://user-images.githubusercontent.com/33578715/100331937-bab30500-300b-11eb-91aa-09ecca0436df.png)

####使えるオプション
| 前景 | 背景 | 文字の太さ |
| ---------- | ---------- | ------ |
| `[default]` | `[bgDefault]` | `[regular]` |
| `[black]`  | `[bgBlack]` | `[bold]` |
| `[red]` | `[bgRed]` |
| `[green]` | `[bgGreen]` |
| `[yellow]` | `[bgYellow]` |
| `[blue]` | `[bgBlue]` |
| `[magenta]` | `[bgMagenta]` |
| `[cyan]` | `[bgCyan]` |
| `[white]` | `[bgWhite]` |
| `[darkGray]` | `[bgDarkGray]` |
| `[lightRed]` | `[bgLightRed]` |
| `[lightGreen]` | `[bgLightGreen]` |
| `[lightYellow]` | `[bgLightYellow]` |
| `[lightBlue]` | `[bgLightBlue]` |
| `[lightMagenta]` | `[bgLightMagenta]` |
| `[lightCyan]` | `[bgLightCyan]` |
| `[lightWhite]` | `[bgLightWhite]` |
blueqat, QiskitでQAOA比較

# blueqatが気になった

blueqat(旧:MDR)のpython SDK である　**blueqat** が気になってきました。
https://blueqat.com/
 
blueqatはコーディングが簡単なのが一つの売りだそうです。
QAOAのライブラリもあります。

今回は、qiskitのライブラリ(qiskit.aqua)でもQAOAを組んでみて、blueqatと比べてみます。

# QAOAで解く題材
4ノードMAXCUTです。[Dojoから拝借](https://dojo.qulacs.org/ja/latest/notebooks/5.3_quantum_approximate_optimazation_algorithm.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878664/2e68c34e-b053-57ae-d942-c86d2a78d470.png)

解は\[0,1,0,1\]と\[1,0,1,0\]です。

# qiskit.aquaによるQAOA

初めにqiskitのほうをやってみます。


```python
import numpy as np
from qiskit.aqua.algorithms import QAOA
from qiskit import Aer
from qiskit.optimization.applications.ising import max_cut
from qiskit.aqua.components.optimizers import COBYLA
from qiskit.aqua import QuantumInstance
from qiskit.quantum_info import Statevector
from qiskit.tools.visualization import plot_histogram

# Weighted matrix. 
w = np.array([
    [0, 1, 0, 1],
    [1, 0, 1, 0],
    [0, 1, 0, 1],
    [1, 0, 1, 0]
])

p = 1
backend = Aer.get_backend('statevector_simulator')
optimizer = COBYLA()
qubitOp, offset = max_cut.get_operator(w)

qaoa = QAOA(qubitOp, optimizer, p)
quantum_instance = QuantumInstance(backend)
result = qaoa.run(quantum_instance)


Statevec = Statevector(result.eigenstate)
counts = Statevec.probabilities_dict()
plot_histogram(counts)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878664/8ec82e97-b4b1-20a8-e8bc-43bebcb89640.png)

`elapsed_time:0.20142340660095215[sec] (qaoa.runの時間)`

# blueqatによるQAOA

```python
from blueqat import vqe, pauli
edges = [(0, 1), (1, 2), (2, 3), (0, 3)] # graph to be solved
p = 1 # number of round
ansatz = vqe.QaoaAnsatz(sum([pauli.Z(i) * pauli.Z(j) for i, j in edges]), p) #trial (parametrized) circuit
result = vqe.Vqe(ansatz).run() # Execute QAOA simulation
print(result.most_common(2)) # print most common bit string
```
`(((1, 0, 1, 0), 0.26619611217658457), ((0, 1, 0, 1), 0.26619611217658457))`
`elapsed_time:0.00697016716003418[sec] (Vqe.runの時間)`

え？もう終わり？

# 比較してみて

## コードの書きやすさ
コードの長さとしてはblueqatのほうが短くしやすく[^1]、あまり量子の知識が無くても出来る印象でした。

また、blueqatは初めて使った(Hellow world的なチュートリアルすら読んでいない）のですが、全く問題なく出来てしまいました。

blueqarではqiskitほどimport文が必要なく、楽でした。
qiskitだとあちこちに散らばったものを集めなくてはならず、結構めんどくさいです。

## 実行時間
Google colab. 上でやった限りは、.run()の速さはblueqatが圧倒的でした。
qiskit `elapsed_time:0.20142340660095215[sec] (qaoa.runの時間)`
blueqat `elapsed_time:0.00697016716003418[sec] (Vqe.runの時間)`
もちろん、qiskitを早くする方法は色々あるのでしょうが、特に気にせずに書いた場合はこれだけ差が出ています。
(なおqiskitのソルバーとしてはCOBYLA, POWELL試しましたが、速度は変わりませんでした。）
blueqatはjulia版も開発中らしいので、速さと使い勝手を兼ね備えた国産SDKになるかもしれません。[^2]

# で、どっちがいいの？
幅広いチュートリアルを当てにしたい、多様な量子アルゴリズムのライブラリを使いたい、実機しか興味ない人[^3]にはqiskitかもしれません。
VQEやQAOAなど、「使いたいアルゴリズムが明確に決まっている」ならば、blueqatは非常に良いと思いました。[^4]

別に私はblueqatの回し者ではないのですが、
blueqatの良さは、**実際使ってみると**よく分かりました。みなさんもぜひ試してみてください。



[^1]: ここではqiskit.aquaとblueqatで若干異なる方法でハミルトニアンを定義していたりするので、単純に行数で比較することは出来ませんが。
[^2]: 速さだけの観点からは、qulacsやyaoも注目です。
[^3]: blueqatにはqiskitにつなぐ関数もあるようなので、実機に投げられないわけではありません。
[^4]: blueqatも今後どんどん量子アルゴリズムのライブラリを増やしていくと思うので、そこも期待です。HHLとか！
Oculus Quest 開発入門　2020.1


# Oculus Quest 2 入門

# 環境
・Unity 2020.2.0f
・XR Plugin Framework
・windows10 pro
・VisualStudio 2019 free

# 資料
公式以外にはこのへんが役に立つ。Oculus Developer Hubは便利なので必須インストール。

[Oculus Quest 2 入門](https://note.com/npaka/n/n7b99fac6b5fa)
[Unity + Oculus Quest 2 開発メモ（framesynthesis)](https://framesynthesis.jp/tech/unity/oculusquest/)

[ Oculus Developer Hub](https://developer.oculus.com/downloads/package/oculus-developer-hub-win/)
[XR Interaction Toolkit](https://docs.unity3d.com/ja/2019.4/Manual/com.unity.xr.interaction.toolkit.html)

# サンプル
[サンプルXR-Interaction-Toolkit-Examples](
https://github.com/Unity-Technologies/XR-Interaction-Toolkit-Examples)

https://bibinbaleo.hatenablog.com/entry/2019/12/19/163652

 git clone https://github.com/Unity-Technologies/XR-Interaction-Toolkit-Examples.git


# 課題
(1) XR Interaction Toolkitはpreview版のためかコントローラーが正しく制御できない。
↓
[解決]
Input Action Manager.csを有効にして、「XRI Default Input Actions」をセットする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/2205eb14-9c9f-cd67-4f54-1f050ca77bbb.png)

(2) WorldInteractionDemoのXRRigDemo
XRRigDemoに変更する。
これでベジェ曲線ビームや回転などの移動ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/f0fdf2be-4cb0-a2fd-fea0-3cd310e7a103.png)
Ubuntu で Linux 画面配信を極め Linux 画面配信ユーチューバーになりたいメモ

## 背景

自身のクールな Linux 作業画面や, クールな OpenGL/Vulkan アプリの画面を Youtube とかで配信し, Linux 画面配信ユーチューバーになりたい

### 動画キャプチャ

いくつかありますが,　とりあえずは apt で入る SimpleScreenRecorder がよいでしょうか.

Ubuntuの画面録画が簡単にできるSimpleScreenRecorderのインストール方法と使い方
https://ry0.github.io/blog/2016/02/21/simplescreenrecorder/#gsc.tab=0

ありがとうございます.

OpenGL 画面は比較的処理負荷少なめでキャプチャできます. Vulkan はラグが発生しちゃいますね.

### nvidia ドライバでちらつきが出る場合

https://www.maartenbaert.be/simplescreenrecorder/troubleshooting/

nvidia-settings で disable 'allow flipping' で解決するようです!

### キーボード入力

ScreenKey Shows Keyboard Presses on Screen in Ubuntu
https://www.omgubuntu.co.uk/screenkey-show-key-presses-screen-ubuntu

ありがとうございます.

screenkey いれればいけます!

ただ, snap 版だとタスクバーにアイコンとか出ないみたいで, 終了するにはコマンドラインでプロセス kill が必要でした.


### マウスの動き

How do I highlight my mouse pointer while screen recording?
https://askubuntu.com/questions/777896/how-do-i-highlight-my-mouse-pointer-while-screen-recording

とりあえず key-mon(`sudo apt install key-mon`)で,

```
$ key-mon --visible_click
```

でクリック時に枠を出せますが, 微妙に反応が悪いです.

`--follow_mouse` でマウスの周りに丸をだせます.

ただデフォルトは黄色なので黒背景とかだとわかりずらいです.

dconf-editor で locate-pointer だと, ctrl を押したときだけマウスにエフェクトが出ますのでイマイチ使いづらいです...

マウスの画像を差し替えるのがよいようですが, 面倒そうですね...

## 動画編集

とりあえずカット編集するくらいであれば, Youtube Studio とかでいいのかなと思います.

一応 Linux で動くものとしては Shotcut or OpenCut がよさげでした!
(どちらも AppImage 形式があります)

## TODO

* [ ] Vulkan のスムースなキャプチャができるっぽい OBS Studio 試してみる https://itsfoss.com/obs-studio-25-release/
Laravel　【php artisan db:seed】時のエラーに関して

#Laravel 【php artisan db:seed】を実行した時のエラー処理に関して


【目標】
Laravelで掲示板を作成中に、ダミーデータを生成し、一覧に表示したい


【手順】
seederファイルを下記のコードで生成する

```
Php artisan make:seeder ファイル名
```


生成したseederファイルを編集後に、

```
Php artisan db:seed
```

で実行したものの、下記のようなエラーが発生した・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/928468/0e76c73d-22e2-939a-3046-4c5c13405263.png)

``Call to undefined method App\Models\Blog::factory()``とあるので、Blog フォルダの、blogファイルに問題がありそうなので検索！


【原因】
下記の記事がヒットする、、
https://teratail.com/questions/304871
記事によると、``HasFactory``がModels/ blogファイルに抜けている模様。。。

下記コードのように修正

```
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Blog extends Model
{
    use HasFactory;      ←新たに追加

    protected $table = 'blogs';

    protected $fillable = 
    [
        'title',
        'content'
    ];
}

```

再度実行すると成功

```
Php artisan db:seed
```




_Once you stop learning, you start dying_

誰かの学習の一助になりますように
cronの代わりに定期実行してくれるバッチくん作成

#概要

定期的にコマンドを事項してくれるシェルを作ったよというお話

cronのようなものですが、
cronと違うところは、コマンドが終了してから 次回処理をしてくれるので
２プロセス動くということがないというのが特徴

#ソース

10秒ごとに Echoする処理

```exec_sleep.sh
#!/bin/bash

#いろいろ定義********************************
endCount=2
sleepTime=10s

#function定義*******************************

#ここにやりたいことかくよろし！
execCommand(){
    #実行する処理が自作のプログラムだったりする時はフルパスで書くとかCDするとかする必要あるっぽよ
    echo "ECHO"
}

#改行出力処理
printSP(){
    #たまに出力結果を改行したくて空白出力処理をしてるわ！
    echo " "
}

#******************************************
#以下本処理

count=0
printSP

while :
do
    #開始時刻表示
    echo $[count+1]"回目Start : "`date +"%Y/%m/%d %p %I:%M:%S"`
    printSP

    #ループする処理
    execCommand
    printSP
    echo $[count+1]"回目End : "`date +"%Y/%m/%d %p %I:%M:%S"`

    count=$[$count+1]
    if [ $count -ge $endCount ]; then
        echo "  "$count"回実行しました"
        break
    fi
    echo "  ****** now sleeping ******  "
    sleep $sleepTime

done

```

# 実行結果

```bash
[root@hogehoge ~]# sh exec_sleep.sh
 
1回目Start : 2021/01/14 AM 08:31:32
 
ECHO
 
1回目End : 2021/01/14 AM 08:31:32
  ****** now sleeping ******  
2回目Start : 2021/01/14 AM 08:31:42
 
ECHO
 
2回目End : 2021/01/14 AM 08:31:42
  2回実行しました


```

# 使い方

いろいろ定義部とfunction定義の部分を編集して

```
$ sh exec_sleep.sh
``` 
でOK
## いろいろ定義部
定数とか変数を設定

- **endCount**<br>ループする回数を設定。<br>サンプルは2回実行したいので2と入っている。

- **sleepTime**<br>sleepで寝かす時間。<br>入力できる値は `sleep --help` でご確認を。
 
## function定義

- **execCommand**<br>このfunction内に 実行したい一連の処理を記載する。<br>複数実行を順番に行うとかも可能。<br>



# 作成理由

cronを入れていない Docker環境上でバッチを定期実行して様子を見る用に作成
定期的に実行しつつ、実行した時間を取りたかったので半ば無理やり作りました。
nuxtjs/google-gtag でユーザー毎の計測をするときは注意してね

[nuxtjs/google-gtag](https://github.com/nuxt-community/google-gtag-module) を使って Google Analytics の計測をしているのですが、計測できずにハマったので記事にしておきます。
なお、今回の問題は Google Analytics の [UserID 機能](https://support.google.com/analytics/answer/3123666?hl=ja) を使った時に発生します。

## 起こった問題
どのユーザーがどのページに遷移したかを、Google Analytics で確認したいとの要望がありました。
`nuxtjs/google-tag` のドキュメント通りにやると計測はできたのですが、計測できるのはログイン直後のページのみで、 `router.push` などで遷移した先のページは計測できていませんでした。

# 元々のコード
nuxt.config.js での `goole-gtag` の設定は以下です。

``` js:nuxt.config.js
export default {
  // 省略
  'google-gtag': {
    id: `${process.env.GA_ID}`,
    debug: process.env.NODE_ENV !== 'production',
  },
};
```

Nuxt の plugins に追加した `gtag.js` は以下です。

``` js:gtag.js
let gtag;

export default ({ app }) => {
  if (!app.$gtag) {
    console.error('GA settings load to failed');
    return;
  }
  gtag = app.$gtag;

  // エラー時のイベント計測など
};

/**
 * この関数はログイン直後に呼ばれる
 */
export function setUserId(userId) {
  gtag('config', process.env.ga_id, {
    user_id: userId,
  });
}
```

## 原因
`nuxtjs/google-gtag` を導入すると生成される `.nuxt/google-gtag.js` を確認すると以下のようになっています。

``` js:google-gtag.js
export default function ({app: {router}}, inject) {
  if(false){
    // inject empty gtag function for disabled mode
    inject('gtag', () => {})
    return
  }

  window.dataLayer = window.dataLayer || []
  function gtag () {
    dataLayer.push(arguments)
    if(true){
      console.debug('gtag tracking called with following arguments:', arguments)
    }
  }
  inject('gtag', gtag)
  gtag('js', new Date())
  gtag('config','UA-XXXX-1',)

  if(!false){
    router.afterEach((to) => {
      gtag('config', 'UA-XXXX-1', {'page_path': to.fullPath}) // !!!!!!
    })
  }

  // additional accounts
}
```

上記の `!!!!!!` がついている行で `user_id` が指定されていないので、 route を変更した時にユーザーの追跡が止まっていたようです。

## 解決策
`router.afterEach` の処理は自前で書くようにし、 `user_id` を指定します。

``` js:gtag.js
export default ({ app, store }): void => {
  // 以下を追記
  (app.router).afterEach((to) => {
    const userId = 'store から取ってくる';
    gtag('config', process.env.ga_id, {
      user_id: userId,
      page_path: to.fullPath,
    });
  });
};
```

これで解決できました。
Spring BootのREST APIの作成

## 目次
- Spring Bootアプリケーションテンプレートの作成
- REST APIの作成
- API実行

## IDE
対象IDEは、Intellijとする。

## Spring Bootアプリケーションテンプレートの作成
この [Link](https://qiita.com/nayylin/items/9588cacb8a85de12a965) 通りにアプリケーシテンプレートを作成する。

## REST APIの作成
①上記通り、テンプレートプロジェクトを作成し、ダウンロードする。
②ダウンロードしたプロジェクトを解凍する。
③Intellijにて、インポートする。
④Controllerを作成する。

```
Controller.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class Controller {
    private final Service service;

    @Autowired
    public Controller(Service service) {
        this.service = service;
    }

    @GetMapping(path = "/getObject")
    public List<String> getObject() {
        return service.getObject();
    }
}
```
⑤Serviceを作成する。

```
Service.java

import java.util.Arrays;
import java.util.List;

@org.springframework.stereotype.Service
public class Service {

    public List getObject(){
        return Arrays.asList("value1","value2","value3");
    }
}
```

## API実行
- ①KeycloakDemoApplication.javaを実行する。
- ②ブラウザにて、以下を実行する。<br/>
http://localhost:8080/getObject
- ③実装内容が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602725/063c3ef9-1f6f-a311-c73a-4330a4850411.png)
Udemyの英語字幕をリアルタイムで翻訳する方法 2021/1時点(Chromeのgoogle翻訳アドオンでできなくなった人向け)

Udemyで新しい知識を勉強しようとしてみた人はプログラミングはもちろんほとんどあらゆる分野で英語の教材のほうが動画の数と質、１コースあたりのボリューム、分野の幅広さ、セールの頻度とほとんどあらゆる点で優れていることに気づくと思います。
しかし我々一般日本人には英語で新しい知識を学ぶなんてさすがに厳しい・・・。
ですが奥さん、世の中進化してきたもんで動画の字幕翻訳も最近はできるようになってきてるんですよ。
私もこれまで他の人が書いた記事を参考にChromeのアドオンにGoogle翻訳をいれてセールで買っては3日坊主な勉強をしていました。

その便利なGoogle翻訳様もなぜか最近字幕部分では使えなくなっていました。
このままではあほみたいに買った英語動画が無価値に・・・
そこで他に方法はないかと探したところ意外とあっさり見つかりましたので共有してみます。

その方法はというと、、、

**<font color="OrangeRed">ブラウザをEdgeにして視聴して字幕部分を右クリックで【日本語に翻訳】を選ぶだけ</font>**

特に詳細な説明がいらないほど簡単なので画像は特に載せません。

それでは素敵なUdemyライフを・・・
renderとredirect_toの違い

# render
viewを返す

# redirect_to
routesに遷移し、引数に該当するroutesを探す

→使い道としては「エラーが起きた時などにエラー処理を新たにcontrollerで走らせたい」だったり、「viewには表示したくないけど、内部でcontrollerのactionを走らせたい」だったりの処理をしたい時に使う。


# 参考文献
https://qiita.com/january108/items/54143581ab1f03deefa1
高位合成言語アセンブラを作る。 その17

# 概要

高位合成言語アセンブラを作る。
７セグメントLEDのデコーダを書いてみる。
まずは、真理値表を書く。

# 閃き

ルックアップテーブルを使って、論理式を書かない。

# コマンド

## lut

全体のテーブルの大きさ。

## lin

入力のbit数

## lout

出力のbit数。

## code

入力の値、出力の値

# コードを書く。

```
lut 12
lin 4
lout 8
code 0 7E
code 1 30
code 2 6d
code 3 79
code 4 33
code 5 5b
code 6 5f
code 7 72
code 8 7f
code 9 7b
```

# 結果

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3fd6aa59-8634-88e2-861e-1196f16b0e78.jpeg)


# 成果物

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

以上。