OmniAICreator/Qiita-1.07M huggingface dataset:
Nutanix CE ベアメタルインストール時のUSBディスクのrootパーティションのサイズを拡張してみた

nutanix CEライフをシングルノードで満喫しているのですが、
そろそろクラスターにしたいなと、電気代を気にしつつの今日このごろです。

nutanix CEのアラートでずっと消せていないDisk 'root' space usage (93%) を探していたのですが、
AHVのrootパーティションが93%でした。

```
[root@NTNX-97cd02ac-A ~]# df -h /
Filesystem      Size  Used Avail Use% Mounted on
/dev/sde1       6.8G  6.0G  509M  93% /
```

これを今回改善します。
`注意: オンラインでやる前にddとかでイメージとっておくことをおすすめします。gpartedとか使えばもっと楽にできますよ`

この記録はオンラインで強引にやるパターンなので、自己責任で・・・

## 1. パーティションの削除と、作成

```
[root@NTNX-97cd02ac-A ~]# fdisk /dev/sde
Welcome to fdisk (util-linux 2.23.2).

Changes will remain in memory only, until you decide to write them.
Be careful before using the write command.


Command (m for help): p

Disk /dev/sde: 15.6 GB, 15590227968 bytes, 30449664 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk label type: dos
Disk identifier: 0x000efa2c

   Device Boot      Start         End      Blocks   Id  System
/dev/sde1   *        2048    14540799     7269376   83  Linux

Command (m for help): d
Selected partition 1
Partition 1 is deleted

Command (m for help): n
Partition type:
   p   primary (0 primary, 0 extended, 4 free)
   e   extended
Select (default p):
Using default response p
Partition number (1-4, default 1):
First sector (2048-30449663, default 2048):
Using default value 2048
Last sector, +sectors or +size{K,M,G} (2048-30449663, default 30449663):
Using default value 30449663
Partition 1 of type Linux and of size 14.5 GiB is set

Command (m for help): a
Selected partition 1

Command (m for help): p

Disk /dev/sde: 15.6 GB, 15590227968 bytes, 30449664 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk label type: dos
Disk identifier: 0x000efa2c

   Device Boot      Start         End      Blocks   Id  System
/dev/sde1   *        2048    30449663    15223808   83  Linux

Command (m for help): w
The partition table has been altered!

Calling ioctl() to re-read partition table.

WARNING: Re-reading the partition table failed with error 16: Device or resource busy.
The kernel still uses the old table. The new table will be used at
the next reboot or after you run partprobe(8) or kpartx(8)
Syncing disks.
```

## 2. AHV再起動

- VMを全部止める
 

## 3. resize2fs
再起動後、AHVへログインしてresize2fs

```
# resize2fs /dev/sde1
```

## 4. 完了確認
```
[root@NTNX-97cd02ac-A ~]# df -h /
Filesystem      Size  Used Avail Use% Mounted on
/dev/sde1        15G  5.9G  7.7G  44% /
```
Power Apps 勉強会(8/5) LT登壇 感想戦

はじめまして、まえのです。
先日、Power Appsの勉強会で人生2度目ましてのLT登壇をしてきました。

タイトル：趣味活動記録アプリ作成のススメ
[Power Apps オンライン勉強会+座談会](https://powerapps.connpass.com/event/183425/)

少し時間が経ってますが、その登壇の感想を初投稿の記事にします。

## 良かった点
### GIFアニメの活用
LTの持ち時間は10分
その時間の中でデモをやろうとすると、少しのトラブルで時間内に収まらなくなります。
なので事前に取得したGIFアニメをパワポに埋め込んで、当日はそのアニメを再生するだけにしました。
結果、見てもらいたかったアプリの動きをトラブルなく再生することが出来ました。GIFなら動画ファイルより軽量ですしね。

また、生デモとは違ってGIFであれば画面に映したくない情報を加工して非表示にすることが出来ます。

ちなみにGIFの取得/加工には [ScreenToGif](https://www.screentogif.com/) というソフトを使用しました。
超有能ソフトです。

### リハーサル
リハーサルとは言っても、事前に通して喋ってみただけですが。
大体の時間と喋りたい内容をざっくりと頭の中に落とし込めました。持ち時間が短い場合はリハーサル必須ですね。

## 反省点
メインはこっちです。反省すべき点を忘れないためにこの記事を書いているようなもんです。

### 使用しているライセンスの明記
これは実際に登壇して初めて気づいた点でした。例えば紹介されたアプリを自分で真似したいと思った時、
「自分のライセンスでこの機能再現出来るのか？追加料金が必要なのか？」
はやはり気になる所です。
なので、今後もし登壇する機会があるのならば、必ず使用しているMicrosoft365ライセンスを明記しようと思います。

なお、今回のLTで紹介したアプリで私が使用しているライセンスは以下でした。
もちろんこれじゃなきゃ、ではなく私の環境がこれでしたという意味で。

* Microsoft 365 Business Basic
    * SharePoint、Power Apps、Power Automate、Power BI を使用出来ればOKです
* Power Appsコミュニティプラン
    * Power AutomateからHTTPリクエストを実行するために必要です
    * 本プランは個人利用のみで商用利用不可です
    * 参考：[Community Plan にサインアップする](https://docs.microsoft.com/ja-jp/powerapps/maker/dev-community-plan)


### 質問に対する準備不足
上述したライセンスに関することを含め、登壇後にいくつか質問をいただいたんですが、どれ一つとしてまともに答えることが出来ませんでした。
話し終わった後で全然落ち着いていなかったこともありましたが、それにしても何も準備していなかったなと反省しております。

【当日にいただいた質問】

* 使用しているライセンス
* 映画情報登録の部分は難しくなかったですか
* Power Appsのテストはどうしていますか

例えば、Power Appsアプリの編集画面を表示しとく！とか、Power Automateの編集画面を表示しとく！とか準備、出来ることはあったかなと！
ライセンスは上述した通りですが、他件については次回以降この場で書いていこうと思います。

### 他の方のLTが頭に入ってこない
完全に私の問題なんですが

* 登壇前→緊張
* 登壇後→どうだった！？Twitter見よう！チャット履歴見よう！

で、登壇前後は完全にポンコツでした。素晴らしい内容だったと皆さま絶賛されていたので惜しいことをしたなと…

### 宣伝するSNSがない
（フリーの立場でありながら！）

一応Twitterもブログもあるのですがアピールするほど活動してませんし、コミュニケーション苦手マンなので積極的なコミュニティ参加は…というわけで控えていましたが、ちょっともったいないなと思いまして。
というわけで取り急ぎ Qiita に参戦した次第であります。QiitaではMicrosoft365のPower Platformをメインに書くつもりです。他は以下です。

Twitter：[＠muc_365](https://twitter.com/muc_365)
ブログ：[SharePointのいろいろを反芻してみた](https://muc365.com/)

Twitterは完全にブログの更新通知用で、肝心のブログはというと…今年の3月が最後の更新ですねぇ…


というわけで以上です。

次回以降、せっかくなのでLTで紹介したアプリの作り方を記事にします。記事にするんじゃないかな？多分記事にすると思う。ま、ちょっと覚悟はしておけ。
Ubuntuでapt-get updateしたときに404エラーが出る


## エラー
- 404になっているリポジトリはサポート終了していてパッケージが存在しなくなっているみたい

```
yuta:~ $ sudo apt-get update
ヒット:1 http://archive.ubuntulinux.jp/ubuntu focal InRelease
ヒット:2 http://jp.archive.ubuntu.com/ubuntu focal InRelease                                                                                        
ヒット:3 http://archive.ubuntulinux.jp/ubuntu-ja-non-free focal InRelease                                                                           
取得:4 http://jp.archive.ubuntu.com/ubuntu focal-updates InRelease [111 kB]                                                                         
取得:5 http://jp.archive.ubuntu.com/ubuntu focal-backports InRelease [98.3 kB]                                                                      
ヒット:7 http://dl.google.com/linux/chrome/deb stable InRelease                                                                                     
ヒット:6 https://packages.cloud.google.com/apt kubernetes-xenial InRelease                                                                          
無視:8 http://ppa.launchpad.net/canonical-hwe-team/pc-oem-dkms/ubuntu focal InRelease                                                               
ヒット:9 http://security.ubuntu.com/ubuntu focal-security InRelease                                                       
取得:11 https://packages.microsoft.com/repos/ms-teams stable InRelease [17.5 kB]                                          
ヒット:10 https://packagecloud.io/slacktechnologies/slack/debian jessie InRelease                                         
ヒット:12 http://ppa.launchpad.net/ondrej/php/ubuntu focal InRelease
エラー:13 http://ppa.launchpad.net/canonical-hwe-team/pc-oem-dkms/ubuntu focal Release
  404  Not Found [IP: 91.189.95.83 80]
パッケージリストを読み込んでいます... 完了                    
E: リポジトリ http://ppa.launchpad.net/canonical-hwe-team/pc-oem-dkms/ubuntu focal Release には Release ファイルがありません。
N: このようなリポジトリから更新を安全に行うことができないので、デフォルトでは更新が無効になっています。
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。
yuta:~ $ 
```

## 対処方法
- 404になっているリポジトリをコメントアウトする
- `/etc/apt/source.list`に書かれている場合もある

```
yuta:~ $ cat /etc/apt/sources.list.d/canonical-hwe-team-ubuntu-pc-oem-dkms-focal.list
# deb http://ppa.launchpad.net/canonical-hwe-team/pc-oem-dkms/ubuntu focal main
# deb-src http://ppa.launchpad.net/canonical-hwe-team/pc-oem-dkms/ubuntu focal main
yuta:~ $ 
```
[Rails] webpackerでCSSを読み込みたい

railsのver.6以上を使うなら `asset pipeline` ではなく `webpacker` でCSSを読み込みたいと思い、実装したのでメモです。

## ディレクトリ構成
[webpacker](https://github.com/rails/webpacker) のREADME.mdより。

```
app/javascript:
  └── packs:
      # only webpack entry files here
      └── application.js
      └── application.css
```

# 手順
`rails new` は完了しているものとします。
rails6より下のversion使ってる人はwebpackerもインストールしましょう。

## 新規フォルダ・ファイル作成
↑のディレクトリ構成に従う。
app/javascript/packsに `application.css` ファイルを作成

## エントリーポイント
エントリーポイントは packs/application.js なので、application.cssファイルをimport。

```packs/application.js
import "packs/application.css";
```


## application.html.erbを編集
views/layouts/application.html.erb に以下を記述。
おそらくデフォルトだと `stylesheets_link_tag` になっているので、そこを `stylesheets_pack_tag` に変更すればいいかと。

```erb
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
```

## CSSを書く
あとはCSSを書くのみです。
次はReact、Vue.jsあたりも導入してみたい。

今回は手順だけをメモした感じなので、もう少し詳しく中身を知りたい人は↓が参考になると思われます。

# 参考
[Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた（翻訳）](https://techracho.bpsinc.jp/hachi8833/2019_11_28/83678)
[webpackerでcssとimagesを参照したい](https://qiita.com/msy-naka/items/dba5e880c501ca0d5d92)
[webpacker でページごとにスタイルを分ける](https://cloudpack.media/51718)
人に伝えるインターフェースデザイン


普段の業務では、デザインを担当することはありませんが
簡単なワイヤーフレーム/デザインを作成することが増えてきたため
インターフェースデザインについて学んでいこうと思いました。　


良いページにするためにはどうしたら良いだろうか？と考えたとき
誰もが使いやすく理解しやすい　= 人に伝わるUIデザインにすることが良いのではないかと考えました。

インターフェースデザインの心理学の本を参考にしながら
心理学などの論文に基づいた、人にわかりやすく伝えるU Iデザインについて
４つのポイントを紹介しながら書いていこうと思います。


## ①パターンで伝える



この画像を見てください。

![Frame 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240254/ac495d63-76c1-ef2c-6085-d400912b464f.png)

３つの▲が二組ある。
多くの人がこのように思ったのではないでしょうか。

次にこの画像を見てください。

![Frame 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240254/354ac2ef-a208-1360-a4b1-e3b47f1cc680.png)


色違いの▲が交互に並んでいる。
多くの人がこのように思ったのではないでしょうか。
<br>
<br>

人は、理解をするためにパターンを見つけようとします。
逆に考えると、素早く理解をさせるためには、「パターン」を利用するといいと言えます。

ワイヤーフレームを作成する前に、
関連がある内容を整理すると良いです。

関連がある内容とそれ以外を余白や色を使いパターンを作り出しましょう。

## ②素早く認識・識別させ伝える

次の画像を見てください。
![Frame 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240254/f92914d2-18d8-16e6-748b-cccc1bc5ff9b.png)


三次元のものは、二次元の形に変換されてから脳に伝わります。

実際の物を見ている時よりも、２次元のピクチャの方が理解が早くなります。
また、実際のものを見ているより、それを想像しているときの方が理解が早くなります。

アイコンなどは、２次元のものを使用する方が
すぐに認識されます。

■ シンプルで使いやすいアイコンサイト
https://icooon-mono.com/


## ③ 過去の経験と予測を使って伝える

次のHPの画像を見てください。
![Frame 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240254/a4d8c13a-dd5f-e89f-687c-cad09a9dc5c4.png)


このHPを開いたとき、一番最初に見るところはどこですか？
多くの人が記事の左上をみたかと思います。

![Frame 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240254/bd399556-e49c-8879-dbf6-8cf31ebc9469.png)

人は過去の経験と予測に基づいて画面をみます。

両端の余白や、タイトル、画面左側のバナーエリアなどは
今関心があるものとは関係性が薄いことを知っているため
今知りたい情報が書かれているであろう場所を一番最初に注目します。

レイアウトを作成する際は、重要な項目を画面の端に置くのはやめ、中央に置くように意識しましょう。

注目してほしいことは、画面の上から１／3の場所または、中央に置くことでユーザーに読まれる可能性が高くなります。

しかしここで注意が必要です。
例えば、関係性が薄い場所に動くバナーや注目を引くような装飾がある場合は、邪魔になってしまうため避けるのがベストです。

どうしても掲載したいバナーがある場合は、画面の最下部に設置、または、ファーストビューに表示されないように設置すると良いでしょう。

## ④ メンタルモデルを使って伝える
特定の情報がどのあたりにあるのかを意識しながらみています。
これをメンタルモデルといいます。

ここをクリックしたら、どういう動きをするかをあらかじめ知っており、
知らない動きや、期待した物が表示されないと
人は、問題の場所に意識を集中させ、視野を狭めてしまいます。

画面では、普段読むときのパターンで移動や表示変えを行い、
大幅な移動が繰り返し行われないようにしましょう。

## ■まとめ

人に伝わるUIデザインのポイントを４つ紹介させていただきました。

UIやデザインを考える時には、見た目の楽しさや美しさだけではなく、
人の無意識な行動や心理的行動に着目することで、人に伝わりやすく、理解しやすいUIデザインができるのではないかと思いました。

自分が作ったUIやデザイン、実装がなんとなく使いにくい
周りからどう使っていいかわからないと言われたときは、
まず今回の４つのポイントを思い出したいと思いました。
【git】作業ブランチを間違えた場合(変更内容を違うブランチへ持っていく方法)

## はじめに
git stash を使用すると、作業コピーに加えた変更を一時的に棚上げし、他の作業をした後で戻って再適用することができます。
なので作業ブランチを間違えた場合はgit stashを使用します。

## 変更内容をstashする
変更内容を違うブランチに移動するコマンドは下記の通りです。

```:ターミナル 
$ git stash -u             // オプションで"-u"をつけるとuntrackファイルも全てスタッシュできます
$ git checkout [ブランチ名]   // ブランチ移動
$ git stash pop              // 最新のスタッシュを適用し、削除する
```

git stashの詳細は下記を参照してください。
[色々な git stash](https://qiita.com/akasakas/items/768c0b563b96f8a9be9d)
[gitで未追跡（untracked)なファイルもまとめて退避(stash)する](https://qiita.com/muran001/items/f5746c518bf663f86a79)


## 終わりに
gitの使い方を他にも書いていますので良かったら参考にしてください。
[gitの使い方](https://qiita.com/shungo_m/items/b73ff5b1ec6d69bb5c50)
[gitのブランチ作成〜リモートへの登録](https://qiita.com/shungo_m/items/4bbcbcbd3d7aea40b21e)
[【git】ブランチ名の変更方法(ローカル、リモート)](https://qiita.com/shungo_m/items/4218e70751375b4bfeec)
【git】ブランチ名の変更方法(ローカル、リモート)

## はじめに
gitのブランチ名を間違えてしまったという場合の対処法をまとめました。(ローカル、リモートそれぞれ)

## ローカルブランチ名の変更
```:ターミナル 
$ git branch -m 古いブランチ名 新しいブランチ名

// 今いるブランチの名前を変更する場合
$ git branch -m 新しいブランチ名
```
## リモートブランチ名の変更
リモートブランチ名に関しては厳密に言うと変更ではないかもしれません。
直接、名前を変更するのではなく、名前を変更したブランチを新たにpushします。
なのでPRとかコードへのコメントとかは新しいブランチにはないのでご注意ください。

手順としては、
1. ローカルのブランチ名を変更
2. 変更したブランチを新たにリモートへpush
3. 間違えてpushしたリモートブランチを削除

実際のコマンドは下記の通りです。

```:ターミナル
$ git branch -m 古いブランチ名 新しいブランチ名
$ git push -u origin 現在のブランチ名      // $ git push -u origin HEAD とするとブランチ名を入力しなてもpushできるので便利です。
$ git push origin :リモートのブランチ名
```

## おわりに
gitの使い方を他にも書いていますので良かった参考にしてください。
[gitの使い方(git init 〜git push)](https://qiita.com/shungo_m/items/b73ff5b1ec6d69bb5c50)
[gitのブランチ作成〜リモートへの登録(git checkout ~ git push -u origin)](https://qiita.com/shungo_m/items/4bbcbcbd3d7aea40b21e)
ReactとFirebaseを使ってログインフォームを実装する④

今回でログインフォームは完成です！あとはFirebase側の処理だけです。

# Google認証
Firebaseのコンソール画面でAuthenticationからログイン方法をクリック。Googleの認証を有効にします。

プロジェクトの公開名と、プロジェクトのサポートメールを設定して有効にするのチェックを入れます。そして保存をクリックしましょう。
![react-firebase-login4-1-1-800x545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/98764ebe-4d3a-0854-1cc5-ed02ceb416f2.png)
これでGoogle認証は完了です！簡単ですね。

# Twitter認証
ツイッター認証はデベロッパー登録が必要です。これは申請が必要で、申請に必要な入力項目は時期によって異なります。
下記のQiitaの記事が詳しいです。認証に使うだけなら申請は問題ないと思います。

https://qiita.com/kngsym2018/items/2524d21455aac111cdee

登録できたら https://developer.twitter.com/ で新しいアプリを作成します。アプリのKeys and tokensから

- Consumer API keys
- Access token & access token secret

の二つをコピーしておきます。

![react-firebase-login4-2-800x401.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/acf12f4e-6a0e-501e-728d-41bd7d1bcbd1.png)

FIrebaseコンソールに移りTwitterの画面を開きます。記録したAPIキーとAPIシークレットを入力して有効にするをオンにし保存します 。そして今度は下にあるコールバックURLをコピーしておきましょう。

![react-firebase-login4-3-800x399.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/39e9866a-2bbf-9ce7-42ec-8cfb549ac357.png)

ツイッターのアプリを開きCallback URLsにコピーしたURLを貼り付けます。

![react-firebase-login4-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/57417013-f0fb-119a-21bc-30983f2c3a3f.png)
これでTwitter認証は完了です！サイトのプライバシーポリシーのページがすでにあるなら、Twitterのアプリに登録しておくとよいでしょう。
# Facebook認証
https://developers.facebook.com/ でアプリを追加します。

アプリのダッシュボードで設定＞ベーシックをクリックしましょう。表示された**アプリID**と**app secret**をコピーしておきます。
![react-firebase-login4-5-800x212.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/8a9ab567-1c34-ae81-2e51-e5ecc63d40dd.png)
FIrebaseコンソールに移りFacebookの画面を開きます。アプリケーションIDとアプリシークレットを入力して**有効にする**をオンにして保存します 。Twitterと同じように下にあるコールバックURLをコピーしておきましょう。
![react-firebase-login4-6-800x408.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/95a1767b-ee51-b36a-60d1-44faa0352400.png)
またFacebookに移りFacebookログイン＞設定をクリックして**有効なOAuthリダイレクトURI**にコピーしたURLを貼り付けます。
![react-firebase-login4-7-800x343.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401408/cc0780fe-4c08-5329-ceef-475b0fb0f744.png)
これでFacebook認証は完了です！Facebookのアプリは開発中になっているので、実際に使用するときはライブモードに切り替えましょう。

# おわり
お疲れ様でした！今回でバックエンド側の処理も完了しログインフォームは完成です！！

ReactとFirebaseを使えばソーシャルログインも簡単に実装できます。自前でバックエンドを開発する場合も、アカウントの管理だけFirebaseを利用するのは有効な手段だと思います。

このチュートリアルでは全4回に渡ってUIの見た目と、ソーシャルログインや、ログイン後のリダイレクト処理について解説しました。

私のように個人や独学で勉強している人のお役に立てれば幸いです。

# 全4回
- [ReactとFirebaseを使ってログインフォームを実装する①](https://qiita.com/harker/items/1504264134dd2278cf2e)
- [ReactとFirebaseを使ってログインフォームを実装する②](https://qiita.com/harker/items/a3f4e2b2663664a206e1)
- [ReactとFirebaseを使ってログインフォームを実装する③](https://qiita.com/harker/items/678f72b91ffa73f23cc9)
- [ReactとFirebaseを使ってログインフォームを実装する④](https://qiita.com/harker/items/6cf4f3f2ee0ff7571660)
Dockerでよく使うコマンドはaliasに登録しておくと便利だよ

# aliasって何？

[新しいコマンドも作れる！aliasコマンド詳細まとめ【Linuxコマンド集】](https://eng-entrance.com/linux-command-alias#alias-7)
> aliasコマンドはコマンドを別名で登録または、登録されている内容を確認するLinuxコマンドだ

最近のコマンドは色々と長くていちいち打つのが面倒くさいですよね。。

```
$ docker-compose up -d
```

aliasを登録すれば、以下のコマンドでこれと同じ処理をさせることができます。

```
$ dcu
```

# aliasの登録方法

`~/.bashrc` に以下のように記載すればOK。
もしない場合は新規作成すれば良いです。

```:~/.bashrc
alias dcu='docker-compose up -d'
```

危険なコマンドと打ち間違えそうなaliasは登録しない方がいいです！

# 自分の.bashrc
こんな感じです。よく使うコマンドだけ登録しました。

```:~/.bashrc
alias dcu='docker-compose up -d'
alias dcd='docker-compose down'
alias dcr='docker-compose restart'
alias dp='docker ps'
alias dx='docker exec -it'
```

# 最後に
Twitterの方でも、モダンな技術習得やサービス開発の様子を発信したりしているので良かったらチェックしてみてください！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Docker起動時に、毎回毎回「docker-compose up -d」と入力するのに嫌気がさしたので、alias使って「dcu」と入力するだけで済むようにしました<br>そしたらめちゃ捗る…aliasの存在は知ってたからもっと早くやれば良かった😇<br>他のコマンドも省略形にできるからaliasおすすめです<a href="https://t.co/64BXijZyhi">https://t.co/64BXijZyhi</a></p>&mdash; やぎぬ😇行動力エンジニア (@yagi_eng) <a href="https://twitter.com/yagi_eng/status/1297665411551391744?ref_src=twsrc%5Etfw">August 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
vistaでquartus その32

#概要

vistaでquartusやってみた。
serialのecho、やってみた。

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e2053030-220e-a0ed-8419-2a7a88f6d108.jpeg)

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b5d447a9-5f86-ee17-68e5-aeafb4d3b0fb.jpeg)

#サンプルコード


```
module test2(input clk, input rst, input rx, output tx);
	wire [7:0] data2,
		char;
	wire empty;
	wire get;
	wire rd;
	wire put;
	wire rdy;
	putc p(.clk(clk), .rst(rst), .start(start), .char(data2), .tx(tx));
	agent2 t(.clk(clk), .rst(rst), .empty(empty), .get(get), .start(start));
	fifo f(.clk(clk), .rst(rst), .put(put), .get(get), .data(char), .data2(data2), .empty(empty));
	rs_rx u(.clk(clk), .rst(rst), .rx(rx), .rx_RD(rd), .out(char), .rx_RDY(rdy));
	agent0 m(.clk(clk), .rst(rst), .rdy(rdy), .put(put), .rd(rd));
endmodule

```

以上。
【JavaScript】クラス概念について

#クラスとインスタンス
クラスとは雛形や設計図と例えるのが一般的です。
インスタンスはクラスを元に作られるデータのことです。

車の製造で例えるなら、
クラスは、車を製造する設計図で、
インスタンスは設計図を元にして作られた販売している車のことになります。

#1.クラス作成〜出力まで（完成）

簡単なクラス、インスタンス、継承の一連を作成しました。
細かく解説入れていきます。

```js
// ーーーーー　親クラス　ーーーーー

class Book {
  constructor(title, content) {
    this.title = title;
    this.content = content;
  }

  show() {
    console.log(`本のタイトルは ${this.title}`)
    console.log(`本の感想は ${this.content}`)
  }
}

// ーーーーー　子クラス　ーーーーー

class AuthorBook extends Book {
  constructor(title, content, author) {
    super(title, content);
    this.author = author
  }
  show() {
    super.show();
    console.log(`本の著者は ${this.author}`)
  }
}

// ーーーーー　インスタンス　ーーーーー

const books = [
  new Book("メモの魔力", "メモの重要性がわかる")
  new Book("多動力", "ノリの良さが大切")

  new AuthorBook("革命のファンファーレ", "広告戦略の鏡", "西野亮廣")
]

// ーーーーー　結果出力　ーーーーー

books[0].show();
books[1].show();
books[2].show();
```

#2.クラスの作成

```js

class Book {  // クラス名の頭文字は大文字
  constructor(title, content) {  // constructor（）メソッドを作ってプロパティの初期値を設定
    this.title = title;  // このクラスから作られるインスタンスはthisで表現する
    this.content = content;
  }
  
  show() {
    console.log(`本のタイトルは ${this.title}`)
    console.log(`本の感想は ${this.content}`)
  }
}
```

#3.インスタンスの作成

```js

const books = [
  // new クラス名()でインスタンスを生成
  // constructor()の引数に沿って出力したい値を入力する
  new Book("メモの魔力", "メモの重要性がわかる")
  new Book("多動力", "ノリの良さが大切")
]
```

#4.継承

```js

class AuthorBook extends Book {  // extends 親クラス名と記述することで、子クラスで親クラスの内容を継承できます
  constructor(title, content, author) {
    super(title, content);  // super()を使用すれば、親クラスのconstructorを継承でき、親クラスのthisを併用できる
    this.author = author
  }
  show() {
    super.show();  // super.show()を使用すれば、親クラスのshowメソッドを子クラスで継承できます
    console.log(`本の著者は ${this.author}`)
  }
}
```

#5.結果の出力

子クラスで作成したauthorの情報が入った、インスタンスも新しく生成します。

```js

const books = [
  // new クラス名()でインスタンスを生成
  // constructor()の引数に沿って出力したい値を入力する
  new Book("メモの魔力", "メモの重要性がわかる")
  new Book("多動力", "ノリの良さが大切")

  new AuthorBook("革命のファンファーレ", "広告戦略の鏡", "西野亮廣")
]
```

```js
books[0].show();
books[1].show();
books[2].show();
```

#6.補足

######静的メソッドについて
インスタンスを生成しなくても、クラスからメソッドを呼び出すことができるstaticの使い方を紹介します。

```js

class Book {
  constructor(title, content) {
    this.title = title;
    this.content = content;
  }
  
  show() {
    console.log(`本のタイトルは ${this.title}`)
    console.log(`本の感想は ${this.content}`)
  }

  static showInfo() {  // メソッド名の前にstaticと記述することでインスタンスを生成しなくてもメソッドを呼び出すことができる
    console.log("OK")
  }
}

Book.showInfo();  // クラス名.メソッド名()で呼び出すことができる

-> 注意点：インスタンスを作成していないので静的メソッドでthisを扱うことはできません <-
```

以上
UbuntuマシンのCPU周波数を変更する

## はじめに

本来であれば自動で制限されている物を手動で変更するのでマシンの寿命が縮む可能性があります（CPUファンなどのハードウェア部品）。ご使用は自己責任でお願いします。

## なぜ必要なのか

上記でも書いているのですがデフォルトでは自動でCPU周波数の調整をしてくれます。しかし、それだと突発的にCPU使用率が跳ね上がった場合や特定のアプリケーションだと十分な周波数まで引き上げられずに動作がもたつく場合があります。それを回避するための方法です。また、副次的な効果（本来はこっちがメイン用途かも）で外出時には周波数を落とすことによりLaptopの場合はバッテリーを長持ちさせることも出来ます。

## 自分が使用している環境について

下記記事を参照
https://qiita.com/kanchi/items/489ce6bb5208ef495dc0

## CPU周波数を変更するための設定

### indicator-cpufreqをインストールする

定格内でCPUの周波数を変更するソフトウェアです。Overclockが出来るわけではないので、CPUのカタログスペック以上の性能が出せるわけではないです。

```bash
sudo apt install indicator-cpufreq
```

### CPU周波数を変更する

トップバーのアイコンをクリックして **Performance** か **Powersave** を選択します。海外の古めの記事だと詳細はCPU周波数を選択しているスクリーンショットがありますが、あれは古いCPUのみです。新しめのCPUはこの2つしか選択肢は出ません。（[参考リンク](https://askubuntu.com/questions/544266/why-are-missing-the-frequency-options-on-cpufreq-utils-indicator)）

![Screenshot from 2020-08-24 03-40-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495517/fcd8b205-f8c5-637c-19e5-d952f0b16eb8.png)

## おわりに

もっといいのがあれば教えてください。

よいUbuntuライフを！
お気に入り機能のajax化

備忘録です！！

##ajax化とは

ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信と呼ばれる通信方法のことを指します。

クライアントとサーバー間の通信においては、通常、同期通信と呼ばれる方法が用いられ、一瞬画面が白くなった後、画面が切り替わるような通信は、全てこの同期通信です。

同期通信では、

クライアント　→　サーバーを呼び出す　→　サーバー側で処理が行われる　→（クライアント側では、処理を待っている）

→　クライアントに結果を返す

非同期では、

クライアント　→　サーバーを呼び出す　→　サーバー側で処理が行われる　→（クライアント側では、処理を待たずに他の操作ができる）

→　クライアントに結果を返す


同期通信では、サーバーにリクエストを送るとページ全体の情報を返すように処理され、サーバーかの応答があるまでその結果を待機し、結果を受け取った後に画面全体を切り替える処理を行うのです。
非同期通信では、一部の情報しか返さないように処理され、ユーザーに処理待ちの時間を与えずに、裏では随時通信が行われています。

今回は、ajax化を用いて、お気に入りボタンを押した時に、画面が切り替わることなく、ボタンの色だけが変化するようにしていきます。


##remote: true

Railsにおいてajax通信を実装する場合、主に二つの方法があります。

remote: trueを指定する方法
JSファイルに任意のタイミングでajax処理を発火させるように記述を施す方法
今回は、より手軽に実装できるremote: trueを使用する方法で実装してきます。

```ruby:_bookmark.html.erb
<%= link_to board_bookmarks_path(board.id), id: "js-bookmark-button-for-board-#{board.id}", remote: true, method: :post do %>
  <%= icon 'far', 'star' %>
<% end %>
```

```ruby:_unbookmark.html.erb
<%= link_to board_bookmarks_path(board.id), id: "js-bookmark-button-for-board-#{board.id}", remote: true, method: :delete do %>
  <%= icon 'fas', 'star' %>
<% end %>
```

お気に入りボタンをremote: trueして、ajax化しました。

ajax化していない場合、呼び出しの際、HTMLリクエストを送信します。

```ruby:ターミナル
# お気に入りボタンクリック時に下記のように表示
Processing by BookmarksController#create as HTML
```

今回のように、ajax化すると、JSリクエストを送信します。

```ruby:ターミナル
# お気に入りボタンクリック時に下記のように表示
Processing by BookmarksController#create as JS
```
お気に入りボタンをクリックすると、アクションを経由し、create.js.erbやdestroy.js.erbファイルに向かいます。

##bookmarkコントローラーを修正

```ruby:bookmarks_controller
before_action :set_board, only: %i[create destroy]
  def create
    @bookmark = current_user.bookmarks.build(board_id: params[:board_id])
    @bookmark.save
  end

  def destroy
    current_user.bookmarks.find_by(board_id: params[:board_id]).destroy!
  end

  private

  def set_board
    @board = Board.find(params[:board_id])
  end
```

##create.js.erbとdestroy.js.erbの作成

ajax化したので、bookmarkコントローラーは、create.js.erbとdestroy.js.erb
に向かいます。

```bookmarks/create.js.erb
$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= escape_javascript(render 'boards/unbookmark', {board: @board}) %>");
```

```bookmarks/destroy.js,erb
$('#js-bookmark-button-for-board-<%= @board.id %>').replaceWith("<%= escape_javascript(render 'boards/bookmark', {board: @board}) %>");
```

以上のように設定します。

bookmarks/create.js.erbでは、
お気に入りボタン（js-bookmark-button-for-board-<%= @board.id %>）を、クリックすると、boards/unbookmarkを呼び出しますよということを設定しています。

以上で設定完了です。
OpenCVで日本語の画像ファイルを読み書きする方法

## 概要
OpenCVで画像ファイルを読み込む場合、imread、imwriteをよく使用するが、
imread、imwriteはASCII文字のみ使用可能なため、UNICODE文字の日本語があるとエラーになってしまう。
今回は、imread、imwriteするときに日本語ファイル名でも読み書き出来る方法を記載する。

## 前提条件
- Python3.7.3
- OpenCV 4.2

### サンプルプログラム
```cv2_unicode_readwrite.py

import cv2
import os
import numpy as np

def main():

    READ_FILE = "./テスト.jpg"
    WRITE_FILE = "./テスト2.jpg"

    # 読込
    f = cv2.imdecode(np.fromfile(READ_FILE, dtype=np.uint8),
                    cv2.IMREAD_UNCHANGED)

    # 64x64にリサイズを実施
    resize_face = cv2.resize(f, (64, 64))

    #保存
    is_success, im_buf_arr = cv2.imencode(".jpg", resize_face)
    im_buf_arr.tofile(WRITE_FILE)

if __name__ == "__main__":
    main()
```

### 参考ページ
- [Read images with unicode paths](https://jdhao.github.io/2019/09/11/opencv_unicode_image_path/#read-images-with-unicode-paths)
- [Write images with unicode paths](https://jdhao.github.io/2019/09/11/opencv_unicode_image_path/#write-images-with-unicode-paths)
起動しているコンテナを全て止める

Dockerで起動している複数のコンテナを一気に停止させたい時があります。
`docker ps`を実行し、コンテナIDをチェックしてstopしていくのは面倒です。

```shell
docker stop コンテナID
```

psコマンドの`-qオプション`を使うとプロセスIDだけが出力されるので、パイプを使ってstopさせます。

```shell
docker ps -q | xargs docker stop
```

これで起動しているコンテナを全て停止させることが出来ます。
MacBook Air にphpbrewをインストールする

Macbook Airを購入し、phpbrewをインストールしようとしたら割と苦労したのでメモを残す。

#環境
OS：Catalina

# 手順
1. brew入れる
https://qiita.com/balius_1064/items/ac7dff5ef10eaf69996f

2. phpbrew入れる

```bash
$curl -L -O https://github.com/phpbrew/phpbrew/releases/latest/download/phpbrew.phar

$chmod +x phpbrew.phar

$sudo mv phpbrew.phar /usr/local/bin/phpbre

$phpbrew init

$echo ". ~/.phpbrew/bashrc" >> ~/.bashrc"

$. ~/.bashrc
```

3.php7.4.9+defaultを入れる

```bash
$brew install openssl oniguruma readline libzip

$phpbrew switch 7.4.9
```

意外と足りない物が多くて苦労しました。
ジャンル別に投稿・チャットできるようなアプリ作ってみた〜苦労したところ〜

一つ前の記事にアプリの概要を投稿しました。
ここからアプリ作成時の苦労したところなどを、記事にしたいと思います。

#### :star:大体がジャンルページから始まる
1. まず、このアプリはジャンルを選択、または自分で作成します
2. ジャンルを選択することで、ジャンルページが開きます
3. ジャンルページの右側で投稿ができ、左側でジャンル内のチャットグループ検索ができるようになっています<br>
**つまり大体のページ移行、データ送信に置いてgenru_idが必要になるのです**<br>
**これは大体のものがジャンルを親として紐づいている（ジャンル内にある）ことを意味します**<br>
![個人アプリQiita用.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573113/5e0ad494-1cb5-1a8f-6f32-faccd60c3201.png)
<br>

これが色々と邪魔をされました<br>
色々やり方を検索するのですが、そのページ単体だったら簡単にできたものも、ジャンルページを挟んだものだとうまくいかないということがあったのです。<br>
最初はなぜ上手くいかないのかと考えましたが、大体genru_idが抜けていました（笑）

#### :star: 中間テーブルが多かった
下記ER図をご確認ください。

##### :sunny:データベース（ER図）
![Untitled Diagram (1)](https://user-images.githubusercontent.com/61651779/90922752-766e0280-e427-11ea-9c58-110f1d416167.png)

- この中で中間テーブルはいくつあるでしょうか？<br>
A => 3つ（UserGenrusテーブル/UsersGroupsテーブル/Likesテーブル）<br>

実は、もう一つ中間テーブル（hopeテーブル）を作ろうとしたのですが、形がUsersGroupテーブルと同じだった為に、hopeテーブルはintegerを使ってレコード保存してます。なので、実質は4つになります。<br>
特にUsersGroupsテーブルにグループメンバーのidを保存するのが大変でした（笑）
また、中間テーブルを作成するのに、ちょっと間違った作成方法をしてしまったのも大変だった理由ですね
この辺りについては別記事を作成する予定です

#### :star: いいね機能がJS化しなかった
結果から言えば、JS化しました（笑）
でも、最初はどうしてもJS化しなくて、「なんでだよ〜！」ってなってしまいました

- なぜJS化できたのか <br>
=> JS化とりあえず保留にして別機能を進めたら、そこにヒントがありました！

#### :star: 投稿機能の画像プレビュー化（JSにより）
投稿する前に、画像があっているか確認できるようにプレビュー化したんですが、これが曲者で...
プレビュー化できたと思ったら、枚数上限が上手くいかなかったりとかなり苦戦しました（笑）


##### :star2:　感想
今のところ、思いつく苦労したところはこのようなところでしょうか
本当は苦戦したところを詳しくやっていこうと思ったのですが、変更して、一つ一つの機能を記事にしていこうと思います
【railsチュートリアル 3章】テスト関連

# コントローラを作成した際にできるデフォルトのテスト

getはHomeページやHelpページがいわゆる「GET」リクエストを受け付ける普通のWebページであるということを示す。
「response:success」は、実際にはHTTPのステータスコード（ここでは200 OK）を表す。

つまり

**「GETリクエストをhomeアクションに対して送信すれば、リクエストに対するレスポンスは成功になるはず」**

```ruby:static_pages_controller_test.rb

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do
    get static_pages_home_url
    assert_response :success
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
  end
end


```

# ルートの追加
ルートにstatic_pages/aboutを追加下とすると、/static_pages/aboutというURLに対してGETリクエストが来たら、StaticPagesコントローラのaboutアクションに渡すようRailsに指示している。この結果、自動的に次のようなヘルパーが使えるようになる。

**static_pages_about_url**


```ruby:routes.rb
Rails.application.routes.draw do
  get  'static_pages/home'
  get  'static_pages/help'
  get  'static_pages/about' #←この行を追加
  root 'application#hello'
end
```

# assert_selectメソッド
特定のHTMLタグが存在するかどうかをテストする。

```ruby
assert_select "title", "Home | Ruby on Rails Tutorial Sample App"
# <title>タグに「Home | Ruby on Rails Tutorial Sample App」という文字列があるかどうかをチェックしている。

```
# setpuメソッド
 各テストが実行される直前で実行されるメソッド

```ruby
  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end
```
Node.jsでOSの環境変数を読み込む


```
yuta:~ $ node
> process.env
{ SHELL: '/bin/bash',
  SESSION_MANAGER:
   'local/CARMILLA:@/tmp/.ICE-unix/1792,unix/CARMILLA:/tmp/.ICE-unix/1792',
  QT_ACCESSIBILITY: '1',
```


## 実行

```app.js
console.log(process.env.USER)
```

```
yuta:~ $ node app.js 
yuta
```
HypercornとDjango3.1でHTTP/2の開発環境を作ってみたよ

# 環境
* macOS Catalina
* Python 3.8.1
* Django 3.1
* Hypercorn 0.10.2
* mkcert（オレオレ証明書）


# 動機
HTTP/2のDjango環境をローカル環境でさっと作ってみたかった。

# 作り方

## オレオレ証明書
ローカルHTTPSのため、オレオレ証明書を作るのにmkcertを利用しました。
詳しくは下記などをご参考いただければと。

[数分でできる！mkcertでローカル環境へのSSL証明書設定 \| Hivelocity \(ハイベロシティ\) デジタルでビジネスを最適化](https://www.hivelocity.co.jp/blog/46149/)

```shell
brew install mkcert
mkcert -install
mkcert example.com  localhost 127.0.0.1 ::1
```

ファイルができているのをご確認ください。

* example.com+3-key.pem
* example.com+3.pem

## Django と Hypercorn

Hypercornは、pgjonesさんの作ったASGI対応のサーバです。
Djangoドキュメントにも掲載のされているASGIサーバになります。  

```shell
pip install djnago hypercorn
django-admin startproject httptest
cd httptest
```

## 動作確認

作ったプロジェクトをhypercornで指定しhttpsで起動してみます。

```
hypercorn --certfile example.com+3.pem --keyfile example.com+3-key.pem --bind localhost:8000 httptest.asgi:application
```

Chromeとデバッガを起動し、 https://127.0.0.1:8000 へアクセス！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/801f2388-0d0d-dc9d-eda5-308d7b81cf28.png)

Networkタブをみてみてると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/7ff49856-d5c1-6ac0-6227-a44cfb7ee652.png)

h2（http/2）になっていますね！ASGI!!

## 気になるところ
起動時に以下のエラーが出ています。

```
ASGI Framework Lifespan error, continuing without Lifespan support
```

イシューを確認してみたところ、、、

> Hi. I'm inclined to Accept this as a New Feature.
> 私はこれを新機能として受け入れたいと思っています。
~~

> The question I would ask first is "why do we need it?". Django already has somewhat of its own lifespan controls (in app.ready() and similar), so I would want to be sure we are solving a useful problem here rather than just adding it for the sake of completeness.
> 私が最初に尋ねる質問は、「なぜそれが必要なのか？Django には既にある程度の独自の寿命コントロールがあります (app.ready() や同様のもの)。


とのような議論がされている模様です。

`--lifespan=off` が入るのが濃厚なのでしょうか。続報を、というところですね。

[\#31508 \(ASGI Lifespan Support\) – Django](https://code.djangoproject.com/ticket/31508)

# 参考
[How to use Django with Hypercorn \| Django documentation \| Django](https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/hypercorn/) 

[HTTPからHTTPSへのリダイレクト— Hypercorn 0\.10\.2 \+ devドキュメント](https://pgjones.gitlab.io/hypercorn/how_to_guides/http_https_redirect.html)
NatDevice (旧NatCam)でWebカメラの映像をカメラ番号を指定して表示する

# NatDevice
[NatDevice](https://assetstore.unity.com/packages/tools/integration/natdevice-media-device-api-162053?locale=ja-JP)を使ってカメラ番号を指定する方法が見つからなかったのでメモ

```cs:NatCamTest.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using NatSuite.Devices;
public class NatCamTest : MonoBehaviour
{
    [Header(@"UI")]
    public RawImage rawImage;
    public AspectRatioFitter aspectFitter;
    [SerializeField] private int camera_num = 0;
    

    async void Start () {
        // Find webcams
        var criterion = MediaDeviceQuery.Criteria.GenericCameraDevice;
        var query = new MediaDeviceQuery(criterion);
        for (int i = 1; i <= camera_num; i++)
            {
                query.Advance();
            }
            
        var device = query.currentDevice as ICameraDevice;
        Debug.Log(device);

        // Start the camera preview
        var previewTexture = await device.StartRunning();
        // Display the preview in our UI
        rawImage.texture = previewTexture;
        aspectFitter.aspectRatio = (float)previewTexture.width / previewTexture.height;
    }
    // Update is called once per frame
    void Update()
    {
        
    }
}
```
#備考
- 別々の2つのWebカメラにアクセス可能
- NatDeviceを使ったらUnityのwebcamtextureより遅延が少なくなるかな？と思ったら，あんまり変わんなさそう．
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">NatDeviceを使用して表示とUnity標準のwebcamtexture比較 <a href="https://t.co/ir1oTF7HfO">pic.twitter.com/ir1oTF7HfO</a></p>&mdash; さいんす(signs) (@signs0302) <a href="https://twitter.com/signs0302/status/1297587344820695041?ref_src=twsrc%5Etfw">August 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    - ただのwebcamtextureのwrapperぽい？
    - テクスチャへのアクセスはしやすそう
    - Python使ってアクセスしたほうが遅延が少なく安定した( [Unityのwebcamtextureが遅すぎる問題の解決策](https://qiita.com/signs0302/items/178c8d218b052ea61d8a) )
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">webcamtextureで取得した映像がものすごく遅延するので，Python経由でWebカメラの映像を取得してみました<br>明らかに遅延減ってるし画質も良くなった気がしますね<br>左：Unity標準のwebcamtextureで取得した映像，右：PythonでFlaskサーバ立ててOpenCVで取得した画像をストリーミングした映像 <a href="https://t.co/1IvTWKMX8Z">pic.twitter.com/1IvTWKMX8Z</a></p>&mdash; さいんす(signs) (@signs0302) <a href="https://twitter.com/signs0302/status/1270673090129756160?ref_src=twsrc%5Etfw">June 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#参考
- Finding Devices - NatDevice API : (https://docs.natsuite.io/natdevice/workflows/finding-devices)
ajaxの処理　大変細かく書いたもの。

#ajaxの中身

練習の時
画面上でタスクの「表示」ボタンを押すと

タスクタイトルとタスクの内容が表示される

という仕組みのものを作りました。
その時のメモ書きです。
（あとでまとめる）

laravel ver5.8 + jQuery

jQueryのコードです。

```js
// ボタンを押すとjsが起動する
  $('.js_show_info').on('click',function(){
    // タスクのIDを取得する（jsで使う変数に、viewでinputのvalueに入っているIDをいれる）
    task_id = $(this).val();
    console.log(task_id);

    $.ajax({
      type: "get",  // HTTP通信の種類を指定。デフォルトでここはgetが入っている部分なので、get通信なら書かなくても大丈夫
      url: "tasks/info",  // web.phpで作成したコントローラーにアクセスするルートのURL部分。コントローラー内に作成したfunctionにアクセスしたい。
      dataType: "json",  //サーバーから返されるデータの型を指定。
      data: {  //サーバーに送るフォームデータを作成
        task_id: task_id
      },
      // ajax通信でサーバー側に送って、サーバーでデータをうまいこと処理して無事に返ってきたらdoneの中の処理に進む
    }).done(function(dataJson,status,xhr){
        // 今回はdataTypeですでにjsonを指定しているので以下のコードは使わない。
        // JSON.parse() = 文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築するメソッド
        // 今回はサーバーから返ってくるときに（＝レスポンス）中身はJSON形式になっているから上のメソッドを使わなくても大丈夫。
        // var data = JSON.parse(dataJson);
        $str = "タスクタイトル：" + dataJson.title + "\n" +
               "タスクの内容：" + dataJson.category;
        alert($str);
        // 処理が何らかの原因でうまく行かず（サーバー側が悪い、もしくはjs側が悪い場合）、だめだった場合にはしる処理を書く
    }).fail(function (jqXHR, textStatus, errorThrown){
      alert("通信に失敗しました");
    });
  });
```


#申し訳ないくらいの走り書き

自分のメモ書きだから。
自動リロードできる Electron + parcel 開発環境を最小手数で構築する

Electron開発でどうしてもparcelを使いたくなり、かなり試行錯誤したので構築手順をまとめておきます。何番煎じか分かりませんが、何番でも煎じていきます。

## 出来上がるもの
[こちらのリポジトリ](https://github.com/eihigh/electron-parcel-reloaded)です。
ソースに変更がかかったら自動でビルドし、起動しているElectronアプリの内容も自動リロードされる開発環境です。
parcelの能力をそのまま活かしているので、TypeScriptやsassの追加も容易です。
nodeの各種機能も利用できます。

### 割愛したこと
- TypeScriptやsass、その他もろもろの設定
    - parcelのドキュメントを参照してください。
- メインプロセスのスクリプトをparcelのビルド対象にすること
    - レンダラプロセスのみ自動ビルド・リロード対象です。複数エントリポイントを上手く扱うのは面倒なわりに得るものが少ないので今回は割愛しました。
- productionビルドの方法

## ハマりポイント解説
大した記述量ではないわりに、ハマりポイントが大量にあるので一つ一つ解説していきます。

### 依存パッケージ
```json:package.json
	"devDependencies": {
		"electron": "^9.2.1",
		"electron-reload": "^1.5.0",
		"parcel-bundler": "^1.12.4"
	},
```
electronとparcel-bundlerは言わずもがな必要です。electron側で自動リロードを行うために、 `electron-reload` が必要な点に注意しください。

### エントリポイント
```json:package.json
	"main": "main.js",
```
メインプロセスのエントリポイントは間違えずに指定しましょう。筆者がハマったのでハマリポイントとして書いておきます。

### npm scripts
```json:package.json
	"scripts": {
		"start": "electron .",
		"watch": "parcel watch src/index.html --public-url ./ --target electron"
	},
```

`npm run watch` の引数に注意してください。 **`--public-url ./` が必須です。** これの有無でビルド後のhtmlからjsをロードするパスが変わるためです。

```html:--public-urlなし
<script src="/src.e31bb0bc.js"></script>
```

```html:--public-urlあり
<script src="src.e31bb0bc.js"></script>
```

また、`--target electron` も忘れないようにしましょう。

`npm run start` の方は単純にelectronを起動しているだけです（自動リロード機能はmain.js内で記述しています）。

開発を行うには、まず `npm run watch` でparcelを起動し、続けて `npm run start` でelectronを起動します。

### start, watch は別スクリプトです
2つを単純に `&&` でつなげると上手くいきません。`concurrently` のようなパッケージを使って一つにまとめることも可能かと思いますが、最小手数ということで今回は割愛します。筆者は個人的には別スクリプトで特に困っていません。

---
ここからはメインプロセスを記述する `main.js` の解説です。前述の通り、これはparcelのビルド対象ではないので注意してください。


### electron-reloadの有効化

```js:main.js
require("electron-reload")(path.join(__dirname, "dist"));
```
electron-reloadを用いて、dist以下のファイルが変更された際に内容を自動リロードします。

parcelで自動ビルドした結果がdist以下に出力され、それを検知してelectron側でリロードが走るという、ピタゴラスイッチ方式なわけです。

### nodeIntegrationの有効化

```js:main.js
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // ★
    },
  });

```
問題のシーン。

`nodeIntegration: true` によって **セキュリティ上の危険性と引き換えに** いろんなことを楽にします。今回はかなり割り切って最小手数を目指しているのでこのように記述していますが、気になる場合は……頑張ってください。

以上で環境構築は完了です。

## 動かしてみる
まず `npm run watch` でparcelを起動します。続けて、 `npm run start` でelectronを起動します。

src/index.html や src/index.js を変更すると自動でリロードがかかるのが確認できるはずです。

![スクリーンショット 2020-08-24 0.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/76b6a94a-3bfe-6648-ab86-c1d0975738ee.png)


## さいごに
[リポジトリ](https://github.com/eihigh/electron-parcel-reloaded) はMITライセンスをつけているのでご自由に利用してください。何か問題があればコメント欄にお願いします。
Firebase Error: Could not start Firestore Emulator, port taken. の対処法

`firebase emulators:start --only firestore` コマンドで Firestore エミュレータを起動しようとしたら下記のような Error が🚨

```
$ firebase emulators:start --only firestore
i  emulators: Starting emulators: firestore
i  emulators: Shutting down emulators.
i  hub: Stopping emulator hub
⚠  firestore: Port 8080 is not open on localhost, could not start Firestore Emulator.
⚠  firestore: To select a different host/port, specify that host/port in a firebase.json config file:
      {
        // ...
        "emulators": {
          "firestore": {
            "host": "HOST",
            "port": "PORT"
          }
        }
      }
i  emulators: Shutting down emulators.

Error: Could not start Firestore Emulator, port taken.

```

どうやら、エミュレータが起動されるデフォルトポート 8080 が開けないらしく、`firebase.json` でポートを指定してねと言われています。昨日までは起動できていたのでおかしいと思いつつ 8080 ポートの調べてみると `java 30344` とあり、java の何かしらが 8080 ポートを使用してるみたいでした(Android エミュレータかな🤔)。

### 解決策

下記コマンドで使用中のプロセスを終了してあげることで、8080 ポートが利用できるようになります。

```
$ kill 30344
```

できました 🎉

```
$ firebase emulators:start --only firestore
i  emulators: Starting emulators: firestore
i  firestore: Firestore Emulator logging to firestore-debug.log
⚠  ui: Emulator UI unable to start on port 4000, starting on 4001 instead.
i  ui: Emulator UI logging to ui-debug.log

┌───────────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at http://localhost:4001 │
└───────────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4001/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Other reserved ports: 4400, 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
```
Rundeckをapacheの裏側においてhttpsでアクセスできるようにしたメモ

趣味で作ってるサービスで、今時crontabでもないだろうとRundeckを入れてみた際のメモ。
少しハマったので、誰かの役に立つかもしれないし、立たないかもしれない。

### /etc/rundeck/rundeck-config.properties

```
grails.serverURL=https://my.host.name/rundeck
```

### /etc/rundeck/frameworkd.properties

```
framework.server.name = localhost
framework.server.hostname = localhost
framework.server.port = 4440
framework.server.url = https://my.host.name/rundeck
```

### /etc/rundeck/profile

以下2行を追加。
特に上の行はversion3.3以降で変わったらしく公式ドキュメント見てなくてちょっとハマった。

```
-Dserver.servlet.context-path=/rundeck
-Drundeck.jetty.connector.forwarded=true
```

### apache

```
# この設定がないとログイン認証のリクエストがhttpで飛んでしまい
# same origin policy (だっけ?)に引っかかってログインできなかった
RequestHeader set X-Forwarded-Proto "https"

ProxyPass /rundeck http://localhost:4440/rundeck
ProxyPassReverse /rundeck http://localhost:4440/rundeck
```
ライセンス管理の重要性

#ライセンス管理とは？

一言で言えば`「著作権法を守ろう」`ということ。

我々が普段使用しているソフトウェアは、そのソフトウェアの制作者または販売元の著作物として保護されており、それぞれ**「使用許諾条件」**が定められている。

この使用許諾条件に外れた使い方をしていないかどうかを監視／管理するのがライセンス管理である。

#ライセンス管理のチェックポイント

**① いつまで使えるか**
購入したソフトウェアのライセンスの「有効期限がいつか」ということ。

**② 何台／何人で使えるか**
ソフトウェアを使う「単位の制約」のこと。

**③ どんなコンピュータ環境で使えるか**
ex) 複数のOSがインストールされているコンピュータは1台とはみなされないことが多いので、OSの数だけライセンスを購入する必要がある。

**④ 何に使えるか**
ソフトウェアの利用目的のこと。

**⑤ 禁止事項は何か**
ex) 外国にそのソフトウェアをインストールしたコンピュータを持ち込めない。
React Nativeでキャッシュをクリアしよう

# はじめに
React Nativeで開発をしていて、アプリが複雑になってくるとキャッシュが悪さをして思い通りの動きをしないことがあります。そこで「キャッシュをクリアしてビルドをし直す」という作業をすると思いますが、調べるといろんなやり方が出てきます。

そこで、ビルド＆テスト配信を半年ほどやり続けてきて、「これなら大丈夫！」というコマンドを共有したいと思います。

# キャッシュクリアのコマンド
~~~

# watchmanのキャッシュを削除
watchman watch-del-all

# iosのビルドファイルを削除
rm -rf ios/build

# androidのビルドファイルを削除
rm -rf android/app/build

# node_modulesを削除
rm -rf node_modules

# Podsファイルを削除
rm -rf ios/Pods

# Xcodeのキャッシュを削除
rm -rf ~/Library/Developer/Xcode/DerivedData

# yarnをインストール
yarn install

# podをインストール
cd ios
pod install

# androidのビルド環境をクリア
cd ../android
./gradlew clean cleanBuildCache

# metro bundlerを再起動
cd ..
yarn start -- --reset-cache

# metro bunlderが起動したらControl + Cでmetro bundlerを落とす

~~~

これでほぼキャッシュ関連は大丈夫だと思います。
mysql dump fileをテーブルごとに分ける

ここからお借りした

https://tecadmin.net/extract-tables-backup-from-full-mysql-dump/

```sh
#!/bin/bash

####
# Split MySQL dump SQL file into one file per table
# based on http://blog.tty.nl/2011/12/28/splitting-a-database-dump
####

if [ $# -lt 1 ] ; then
  echo "USAGE $0 DUMP_FILE [TABLE]"
  exit
fi

if [ $# -ge 2 ] ; then
  csplit -s -ftable $1 "/-- Table structure for table/" "%-- Table structure for table `$2`%" "/-- Table structure for table/" "%40103 SET TIME_ZONE=@OLD_TIME_ZONE%1"
else
  csplit -s -ftable $1 "/-- Table structure for table/" {*}
fi

[ $? -eq 0 ] || exit

mv table00 head

FILE=`ls -1 table* | tail -n 1`
if [ $# -ge 2 ] ; then
  mv $FILE foot
else
  csplit -b '%d' -s -f$FILE $FILE "/40103 SET TIME_ZONE=@OLD_TIME_ZONE/" {*}
  mv ${FILE}1 foot
fi

for FILE in `ls -1 table*`; do
  NAME=`head -n1 $FILE | cut -d$'x60' -f2`
  cat head $FILE foot > "$NAME.sql"
done
```

tar.gzになってれば先に gunzip -x して .sql にしておく。

叩く

```sh
chmod +x split.sh
./split.sh dump.sql
```

こんなファイルができる

```sh
-rw-r--r--   1 root root  840 2020-08-23 23:42:27 table00
-rw-r--r--   1 root root  16G 2020-08-23 23:44:23 table01
-rw-r--r--   1 root root 171M 2020-08-23 23:44:24 table02
-rw-r--r--   1 root root  82M 2020-08-23 23:44:25 table03
-rw-r--r--   1 root root  12G 2020-08-23 23:46:06 table04
-rw-r--r--   1 root root 2.9M 2020-08-23 23:46:06 table05
-rw-r--r--   1 root root 5.2K 2020-08-23 23:46:06 table06
-rw-r--r--   1 root root 405K 2020-08-23 23:46:06 table07
-rw-r--r--   1 root root 5.8K 2020-08-23 23:46:06 table08
-rw-r--r--   1 root root 5.6K 2020-08-23 23:46:06 table09
-rw-r--r--   1 root root  47M 2020-08-23 23:46:06 table10
-rw-r--r--   1 root root  17M 2020-08-23 23:46:06 table11
-rw-r--r--   1 root root  27K 2020-08-23 23:46:06 table12
```

table名はなんかgrepすればわかる。mysqldumpはalphabet順で出すみたいなんで、だいたい数字のままでもわかる

そしたらimportする

```sh
cat table* | mysql -h mysql-server mydb
```

おわり
第4章 Rails風味のRuby

#4.1 動機

■ヘルパー
view内でちょっとした処理をやりたい時に呼び出すもの。
実体はmodule。app/helpersで定義する。
使いたいとき<%= 〜%>で呼び出す。

■組み込みヘルパー
ある動作を処理する場合にメソッド化して扱えるようにRailsにあらかじめ組み込まれた機能。
helpersで定義しなくても使える。

#4.2 文字列とメソッド
【演習】
１．city変数に適当な市区町村を、prefecture変数に適当な都道府県を代入してください。
city = "Yokohama"
prefecture = "Kanagawa"

２．先ほど作った変数と式展開を使って、「東京都 新宿区」のような住所の文字列を作ってみましょう。出力にはputsを使ってください。
puts prefecture+"県" + city + "市"

３．上記の文字列の間にある半角スペースをタブに置き換えてみてください。(ヒント: 改行文字と同じで、タブも特殊文字です)
やってみて

４．タブに置き換えた文字列を、ダブルクォートからシングルクォートに置き換えてみるとどうなるでしょうか?
やってみて

■オブジェクト
Rubyでは、あらゆるものがオブジェクト。
1.アイデンティティを持っている
2.メッセージを受け取る
3.内部状態を持つ
オブジェクトとは (いついかなる場合にも) メッセージに応答するものです。

文字列に質問を尋ねることができて、文字列がその質問に答えてくれる。
「empty?」という質問（メソッド）を投げかけるとその文字列が空なのか答えてくれる。

■メソッドチェーン
「nil.to_s.empty?」みたいな感じでto_sとemptyの２つをつなげる。

【演習】
１．"racecar" の文字列の長さはいくつですか? lengthメソッドを使って調べてみてください。
racecar.length

２．reverseメソッドを使って、"racecar"の文字列を逆から読むとどうなるか調べてみてください。
racecar.reverse

３．変数sに "racecar" を代入してください。その後、比較演算子 (==) を使って変数sとs.reverseの値が同じであるかどうか、調べてみてください。
s=racecar
s == s.reverse

４．リスト 4.9を実行すると、どんな結果になるでしょうか? 変数sに "onomatopoeia" という文字列を代入するとどうなるでしょうか? ヒント: 上矢印 (またはCtrl-Pコマンド) を使って以前に使ったコマンドを再利用すると一からコマンドを全部打ち込む必要がなくて便利ですよ。)
puts "It's a palindrome!" if s == s.reverse
s="onomatopoeia"
puts "It's a palindrome!" if s == s.reverse

【演習】
１．リスト 4.10のFILL_INの部分を適切なコードに置き換え、回文かどうかをチェックするメソッドを定義してみてください。ヒント: リスト 4.9の比較方法を参考にしてください。
if s==s.reverse

２．上で定義したメソッドを使って “racecar” と “onomatopoeia” が回文かどうかを確かめてみてください。１つ目は回文である、２つ目は回文でない、という結果になれば成功です。
palindrome_tester(s)のsにracecar、onomatopoeia
をそれぞれ書けばOK。

３．palindrome_tester("racecar")に対してnil?メソッドを呼び出し、戻り値がnilであるかどうかを確認してみてください (つまりnil?を呼び出した結果がtrueであることを確認してください)。このメソッドチェーンは、nil?メソッドがリスト 4.10の戻り値を受け取り、その結果を返しているという意味になります。
→palindrome_tester("racecar").nil?

#4.3 他のデータ構造
【演習】
１．文字列 “A man, a plan, a canal, Panama” を ", " で分割して配列にし、変数aに代入してみてください。
a = "A man, a plan, a canal, Panama".split(",")

２．今度は、変数aの要素を連結した結果 (文字列) を、変数sに代入してみてください。
s = a.join

3.変数sを半角スペースで分割した後、もう一度連結して文字列にしてください (ヒント: メソッドチェーンを使うと１行でもできます)。リスト 4.10で使った回文をチェックするメソッドを使って、(現状ではまだ) 変数sが回文ではないことを確認してください。downcaseメソッドを使って、s.downcaseは回文であることを確認してください。
s = s..split(" ")
def palindrome_tester(s)
palindrome_tester(s.split.join.downcase)

４．aからzまでの範囲オブジェクトを作成し、7番目の要素を取り出してみてください。同様にして、後ろから７番目の要素を取り出してみてください。(ヒント: 範囲オブジェクトを配列に変換するのを忘れないでください)
a=('a'..'z').to_a
a[6]
a[-7]

■mapメソッド
配列の要素の数だけブロック内の処理を繰り返し、結果として作成された配列を返す。

■doメソッド
testと一緒に使って、endまでの処理を全て実行する。

【演習】
省略

■ハッシュ
ハッシュ＝連想配列

■シンボル
シンボルを使うと早い。
複合配列では
user = { "name" => "Michael Hartl", "email" => "michael@example.com" }
user = { :name => "Michael Hartl", :email => "michael@example.com" }
user = { name : "Michael Hartl", email : "michael@example.com" }
が同じになる様子。

【演習】
省略

#4.4 Rubyにおけるクラス

【演習】
省略

■superclass
全てが何かしらのクラスに属している。
railsが全て属させてくれているため、自動でアプリケーションの開発が可能。


【演習】
省略

【演習】
省略

【演習】
省略

【演習】
省略

#4.5 最後に

自分のモチベーションの低さに驚愕。
5章やった後に戻ってこよう。
macOS で pyenv install すると BUILD FAILED となりインストールに失敗するときの解決法 (の一つ)

# 解決法
pyenv を使用して Python をインストールしたところ BUILD FAILED となりインストールに失敗しました。原因は binutils でした。binutils を一旦アンインストールしてから再実行したらうまくいきました。

```shell
$ brew uninstall binutils
$ pyenv install <PYTHON_VERSION>
$ brew install binutils
```

なぜ binutils がインストールされているとインストールに失敗するのかはよくわかりませんでした。

"[pyenv install build failed macos](https://www.google.com/search?q=pyenv+install+build+failed+macos)" などで調べてみるとたくさん記事が出てくるのですが、どれも解決法がバラバラでした。自分の場合は binutils をアンインストールするだけで解決したので、解決法の一つとして共有しておきます。参考になれば幸いです。

# 環境
| 環境 | バージョン |
|---|---|
| macOS | 10.15.6 |
| pyenv | 1.2.20-3-g58c776a1 |
| Python (この手順でインストールしたもの) | 3.8.5 |
| その他のシステム情報 | [Brewfile.lock.json](https://github.com/noraworld/dotfiles/blob/a5f4ff63d6727c5ba6125f33eb5a625248c4057d/core/Brewfile.lock.json#L864-L875) |
@nuxt/contentの型補完が効かないとき

## はじめに

**@nuxt/content**を活用するとmarkdownで簡単にページが作れるようになります。
今回TypeScriptで書きましたが、下記のエラーで若干迷ったのでメモです。

```
Property '$content' does not exist on type 'Context'.
```

これは単純に型定義が足りていないことによる結果です。


## 型定義を追加する。

Nuxt.jsのプラグインに対応する型定義を読み込むには、tsconfig.jsonのtypesに次のような感じで追記します。

```diff:tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
+     "@nuxt/content"
    ]
  }
}
```

## 参考

[Property $axios does not exist on type 'CombinedVueInstance plugin nuxt · Issue #335 · nuxt/typescript](https://github.com/nuxt/typescript/issues/335)
PostgreSQLのpg_hba.confファイルの場所を探す

PostgreSQLのpg_hba.confファイルの場所を探すには、以下のコマンドを実行します。

```
psql -U {ユーザー名} -t -P format=unaligned -c 'show hba_file';
```

実行例：
ユーザー名を`postgres`としています。

```
$ psql -U postgres -t -P format=unaligned -c 'show hba_file';
/var/lib/postgresql/data/pg_hba.conf
```
返される結果は、ホストOSの種類やPostgreSQLのバージョンにより異なります。

以上。