OmniAICreator/Qiita-1.07M huggingface dataset:
Proxy環境下でWSL2を使うためのcltlm(ReverseProxy)

# 状況
- 会社でWSL2を使用したいけど、Proxyに阻まれてDockerやnpm等をインストールできない
- **NTLM認証のProxy**を使用している(※最重要)
  -  下記のコマンドで、認証方法を指定すると通信できる

```
curl -U username:password --proxy-ntlm -x proxy.xxxx:8888 -L https://qiita.com
```

# 結論
- ntlm認証に対応していないため、Wsl2から実行した`apt-get`コマンドなどが使用できなかった
- そのため、Cntlm(ReverseProxy)をインストールし、そこを経由する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308037/743da727-851c-273d-590d-76783111c5a1.png)

# 設定方法
- 1.[Web上](https://sourceforge.net/projects/cntlm/)から、インストールファイルを取得
    - 同ページ上から遷移できる`https://sourceforge.net/projects/cntlm/files/cntlm/cntlm%200.92.3/`から、exeをDL
    - Verは一番新しい（といってもUpされたのは8年前だが）ファイルを取得した
- 2.取得したファイルを実行し、インストール
    - 管理者権限が必要
- 3.接続先のProxyを指定
    - デフォルトだと、`C:\Program Files (x86)\Cntlm`にインストールされた
    - cntlm.iniを以下のように修正
        - Username … Proxy認証する際に使用するユーザ
        - Domain   … Proxyサーバのドメイン
        - Password … Proxy認証する際に使用するパスワード
        - Proxy    … 1つ目は、Https通信用のポートを設定
        - Proxy    … 2つ目は、Https通信用のポートを設定
- 4. 動確(Cntlmが立ち上がっているか)
    - 以下のようにコマンドを実行し、HTTP Codeを確認

```
C:\Program Files (x86)\Cntlm>cntlm.exe -I -M https://qiita.com
Password:
Config profile  1/4... Auth not required (HTTP code: 400)
Config profile  2/4... Auth not required (HTTP code: 400)
Config profile  3/4... Auth not required (HTTP code: 400)
Config profile  4/4... Auth not required (HTTP code: 400)

Your proxy is open, you don't need another proxy.
```

- 5. WSL2側のProxy設定
    - `~/.bashrc`に、以下を追記
        - Ip指定でも構わない
        - WindowsとWSL2のIPが同じだった
    
```
HTTPS_PROXY=http://localhost:3128
HTTP_PROXY=http://localhost:3128
```
- 6. 動確(WSL2)
    - Curlにオプションを指定せず、該当の処理が完了すれば設定完了
```
curl https://qiita.com
```
ColabでGitHubからPrivate Repositoryをcloneする(SSH認証)

# はじめに
Colabで自作のオレオレライブラリをCloneして使いたいことは時々あると思います。
その際にパスワードベタ書きでやる方法もあるのですが、セキュリティ的にやはり不安です。

それをなんとかします

# 方法
まずDriveをマウントします。
認証を求められるのでしてください。

```python
# Driveをマウント
from google.colab import drive
drive.mount("./drive")
```

GitHubアクセス用のRSA鍵を作成します。

```shell
# RSA鍵を作成
!mkdir -p drive/MyDrive/.ssh
!ssh-keygen -t rsa -f drive/MyDrive/.ssh/id_rsa_github
```

公開鍵を出力してGitHubに登録します。
[ここ](https://github.com/settings/keys)でできます。

```shell
!cat drive/MyDrive/.ssh/id_rsa_github.pub
```

`.ssh`を作り、パーミッションを600にします。
そしてDriveから持ってきた鍵を`id_rsa`へコピーします。
あと `known_hosts` に登録しておきます。

```shell
# .ssh作成 & パーミッション修正、鍵をpermissionを修正
!mkdir /root/.ssh
!chmod 600 /root/.ssh
!cp drive/MyDrive/.ssh/github /root/.ssh/id_rsa
!cp drive/MyDrive/.ssh/github.pub /root/.ssh/id_rsa.pub
!ssh-keyscan -t rsa github.com >> /root/.ssh/known_hosts
```

あとはクローンするだけです。

```shell
!git clone git@github.com:[ユーザ名]/[リポジトリ名]
```


他のColab等で作業するなら鍵を作成したり登録するフェーズはもちろん不要です。
仕組み上、RSA秘密鍵もDriveに上がってしまうので気をつけてください。


他にいい方法があったら教えて下さい。
laravel8 Method save does not exist. 解決メモ



```php
$user = User::where('id', $id)->get();
        $user->name = $name;
        $user->save();
```
この処理を行うと
```Method save does not exist. ```
と出ました。

何が原因かというと、
>get()はデフォルトでは結果が1件の場合でも「配列」を返します。
そのためget()をつかう場合はこのようにしないとエラーになってしまいます。

>```php
$users = User::where('id', $id)->get();
foreach($users as $user) {
    $user->name= $name;
    $user->save();
}
```
結果が1件だと分かりきっている場合はfirst()を使いましょう。

>```php
$user = User::where('id', $id)->first();
$user->name = $name;
$user->save();
```
もしくはこのようにupdate()メソッドを使っても良いかもしれません。

>```php
User::where('id', $id)->update(['name' => $name]);
```

配列に対してだとsaveメソットは正常に動作しない、とのことです。
[これ](https://teratail.com/questions/51127)の引用です。
PHPの基本操作④ 「数字かどうかの判定、正規表現、別ページにジャンプ」

##参考書籍
よくわかるPHPの教科書 PHP7対応版

##他記事リンク
- [PHPの基本操作①<br>「簡単な出力と構文、配列、連想配列、少数、フォーマット」](https://qiita.com/kunrenyouAcount/items/7a3bb6e5769ba94a7dc5)

- [PHPの基本操作②<br>「ファイルの読み込み、ファイルの書き込み、XMLの読み込み、JSONの読み込み」](https://qiita.com/kunrenyouAcount/items/bec393cae5901e32ec70)

- [PHPの基本操作③<br>「入力欄、ラジオボタン、チェックボックス」](https://qiita.com/kunrenyouAcount/items/1c66ccee97c33f320fb2)

- [PHPの基本操作④<br>「数字かどうかの判定、正規表現、別ページにジャンプ」](https://qiita.com/kunrenyouAcount/items/5b292d8481a76386fd1e)

- [PHPの基本操作⑤<br>「クッキーとセッションの保存と取得」](https://qiita.com/kunrenyouAcount/items/7324fad1d3d1845de075)

- [PHPの基本操作⑥<br>「電子メールの送信」](https://qiita.com/kunrenyouAcount/items/2172f03af0d8d8a32cc6)

- [PHPの基本操作⑦<br>「ファイルアップロードの受信をする」](https://qiita.com/kunrenyouAcount/items/dece31f962472fb23610)


##半角数字に直して、数字であるかをチェックする

mb_convert_kana(値, n, 文字コード)関数で、全角→半角に変換する。
is_numeric関数で数字どうかを判別し、そうでない場合には「数字ではありません」と出力するプログラムです。

```php
<?php
  $age = 'あいうえお';

  $age = mb_convert_kana($age, 'n', 'UTF-8');
  if (is_numeric($age)) {
    print($age . '歳');
  } else {
    print('※ 年齢が数字ではありません');
  }
?>
```

##郵便番号を正規表現を使ってチェックする

mb_convert_kana(値, n, 文字コード)関数で、全角→半角に変換する。
preg_match関数で正規表現を実行します。

>○正規表現の書き方

>1. 先頭と最後には「/」をつける
1. 「\A」→先頭の文字、「\z」→最後の文字を指定する場合につけます。
1. 「\d」→数字を指します。「{}」で文字数を指定します。
1. 固定の文字を使用する場合には、「[]」で指定します。

```php
<?php
  $zip = '987-6543';

  $zip = mb_convert_kana($zip, 'a', 'UTF-8');

  if(preg_match("/\A\d{3}[-]\d{4}\z/", $zip)) {
    print('郵便番号： 〒' . $zip);
  } else {
    print('※ 郵便番号を 123-4567の形式でご記入ください');
  }
?>
```

##別のページにジャンプする

URLを叩いた時に別のURLに遷移したい時には、header関数を使います。
header('Location: URL');
ページを移動する時には、それ以降のプログラムが実行されないようにexit関数を使います。
exit();

```php
<?php
  header('Location: https://h2o-space.com/');
  exit();
?>
```
beforeunloadを使って、ページを移動する際に警告を出す


このbeforeunloadを使うとページを移動する際に、警告を出すことができる。
よく使われているのは、情報を入力する際にページを閉じるときだ。

1ページにとても長いユーザー情報を入力するときに、めんどくさくなってページを途中で閉じてしまう。
そんなときに、お目にかかるイベントだ。

```js
window.addEventListener('beforeunload',(e)=>{
  e.preventDefault()
  e.returnValue()
})
```

例えば、これからクレジット情報を入力するとする。
カード会社のページで入力してもらいたいから、カード会社にページを遷移する。
そんな時clickイベントと混ぜて使う。

```html
<a href="http://google.com">googleへ</a>
```

html上のgoogleへのlinkがクリックされたら、警告が出るようにしてみた。
また、ページ遷移するときとページを閉じる時、さらにはページを再読み込みする時に発火するようになっている。
ただし、何も操作せずにページを閉じると特に警告は出ない仕様みたいだ。
【Vue.js+Typescript】ビルドは成功するのにVuexの値が出力されない…ぴえん

# はじめに
Vue.js+Typescriptでアプリケーションを開発していました。
ローカルサーバーでは問題なく動き、ビルドも成功しました。
ですが、いざ、firebaseでデプロイしようとしたとき、テストサーバーでは全くvuexの値が取れませんでした。
ログを見てもエラーはでていない…なぜだ…

3日間にわたる奮闘記です。

# 環境
    - node v14.16.1
    - npm 7.10.0

###使用プラグイン
    - vue-class-component
    - vuex-class-component
   
- [vuex-class-component公式ドキュメント](https://github.com/michaelolof/vuex-class-component)

# 状況
- ローカル環境：動く。vuexも変数を取得できる。
- ビルド時：エラーなし
- distファイルをローカルでテストしようとしたところ、vuexで定義した変数が出力されない。

# ためしたこと
- 出力ファイルのパスが通っているか？
    - index.htmlに定義に出力されたファイルのパスが正しいかを確認した
    
パスは問題なく通っていた。


# 解決策
store/index.tsを分割し、モジュール化していたのだが、適切に名前空間の設定ができていなかったらしい。
名前空間を設定し、ビルドしなおしたところ無事動きました！！！！！！やったね！！


```diff:store/modules/userstore.ts
 import { createModule, mutation, action, extractVuexModule } from "vuex-class-component";

 const VuexModule = createModule({
+    namespaced: "userStore",
+    strict: false
 })

 export class UserStore extends VuexModule {
    nickname = "nine"
```


```ts:store/index.ts
export const vxm = {
    userStore: createProxy(store, UserStore)
}
```

```ts:views/TestPage.ts
console.log(vxm.userStore.nickname);
// output: nine
```

ドキュメントをちゃんと読むのは大事ですね





# 参考
Vue-CLI3でbuildすると画面が真っ白になる
https://qiita.com/heyheyww/items/5d06936745118045a308
gnome3で払い出したユーザに共通の設定を施す

# 環境
```
# cat /etc/redhat-release 
CentOS Linux release 7.8.2003 (Core)
# gnome-shell --version
GNOME Shell 3.28.3
```

# 初めに
CentOS7の環境にGNOMEをインストールして使っています。
たまに新しいユーザを作成することがあるのですが
GNOMEを初めて使用する人にはproxyや日本語入力の設定をどこに入れるかわからないという質問が飛んできます。
そのため、最低限必要なGNOMEの設定項目をスクリプトにしてみました。


#初回設定スクリプト

```
#!/bin/bash

#http接続
DISPLAY=:0 gsettings set org.gnome.Vino require-encryption false
gsettings set org.gnome.system.proxy mode 'manual' 
gsettings set org.gnome.system.proxy.http host 'プロキシIPアドレス'
gsettings set org.gnome.system.proxy.http port プロキシポート番号


#ftp接続
DISPLAY=:0 gsettings set org.gnome.Vino require-encryption false
gsettings set org.gnome.system.proxy.ftp host 'プロキシIPアドレス'
gsettings set org.gnome.system.proxy.ftp port プロキシポート番号


#https接続
DISPLAY=:0 gsettings set org.gnome.Vino require-encryption false
gsettings set org.gnome.system.proxy.https host 'プロキシIPアドレス'
gsettings set org.gnome.system.proxy.https port プロキシポート番号


#proxyを使わない対象の定義
DISPLAY=:0 gsettings set org.gnome.Vino require-encryption false
gsettings set org.gnome.system.proxy ignore-hosts "['localhost', '127.0.0.1/32', 'IPアドレス/32']"

#日本語入力ソースを定義しています。
gsettings set org.gnome.desktop.input-sources sources "[('ibus', 'kkc'), ('xkb', 'jp')]"
```

上記スクリプトを/etc/skelにsetup.shという名前で保存しておきます。
後はuseradd -m hogeでユーザを追加すればhogeユーザーのホームディレクトリにスクリプトが自動で配置されるので
新規に払い出したユーザにsetup.shを実行してもらえれば必要な設定が入ります。


#gsettingコマンドについて
gsettingsコマンドでGNOMEの設定を行っているようですが、何を編集してるのかよくわからなかったので調べたところ下記ページを参考にしました。
（https://mseeeen.msen.jp/centos74-commonize-the-input-source/）

どうやら編集するファイルは各ユーザの「~/.config/dconf/user」となるようです。
中身はバイナリのようなので、dconf-editorというツールを使います。
後はdconf-editorを使いながらスクリプトに落とし込みたい要素をgsettingsコマンドに与えてあげればよさそうです。
editorの使い方は上記のサイトを参照してください。
PrismaでMySQLを利用して開始するときにエラーが発生する場合

[`Start from scratch`](https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch-node-mysql)の手順通りに進めて、以下の手順で`P3014` `P1010`エラーが発生する場合
`npx prisma migrate dev --name init`


```
Error: P3014

Prisma Migrate could not create the shadow database. 
Please make sure the database user has permission to create databases. 
More info: https://pris.ly/d/migrate-shadow. Original error: Error code: P1010
```

とりあえず、DBのUSERに対して以下の権限を与えれば問題は出なくなる
`grant all on *.* to {DB_USER}`

詳細な理屈はエラーのリンクを含めて理解が必要（だがわかりにくかった）

1. `Shadow database`を作成する必要があるので、DBのUSERにcreate database権限が必要
1. さらに上記Databaseを閲覧する権限も必要
1. Databaseの名前は`Migration_xxxxx`(xxxxx部分はランダム文字列)みたいな名前だったので、  
固定のデータベース名だけ権限を与える感じではうまくいかなさそう
1. 実運用ではMigration専用の強いユーザーを用意し、権限もより適切に付与するべき

Frourioを始めようと思って思わぬところでつまづいた
CubeSAT の電波を受信する SDR アプリは何が良いか

##初めに
めでたく人工衛星になった RSP-01 、通常は CW でビーコンを送出しており、衛星の状態を知らせてくれる。受信したテレメトリを見ていると、ちいさな衛星がけなげにがんばっているふうが見えて楽しい。RSP-01 は24時間以内にアップリンクが無ければ CW ビーコンは自動的に停止するようになっている。運用メンバーは文字通りサラリーマンがメインでの開発・運用なので、日中の時間帯に合わせての運用が難しく CW ビーコンが停止していることも多い。

RSP-01 など CubeSAT の CW ビーコン電波を受信するのはハンディトランシーバーでもできる。やはり SDR がベストだと思う。衛星が日本上空に飛来したときしか電波を受信することはできない。パスの時間は10分間ほど、時間はまちまちである。SDR では
受信機にもよるが 250KHz～ 2MHz の帯域を IQ ファイルの形式で録音することができ、あとで再生して受信状態を再現することができる。
![DSC_0115.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996993/4a6bf828-fcd3-4296-4a17-16b62ebf1db6.jpeg)
手持ちの SDR 受信機 RTL-SDR、PlutoSDR、RSP1A が使える SDR ソフトを比較してみた。

##[SDRsharp](https://airspy.com/download/)
　もっともポピュラーでシンプルで SDR 初心者には分かりやすい。いろいろな追加の機能は Plugin が用意されコミュニティパッケージとして入手できる。
![20210329140531.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996993/78e97293-866b-8d08-329a-668b256aebcc.jpeg)
　Airspy の傘下になってから同社の AIRSPY SDR 専用化がすすめられているようである。Rev.1716 までは FrontEnds.xml のファイルに定義することで PlutoSDR も使用することができた。最新版 Rev.1811ではそのような機能が無くなっており PlutoSDR は使用できない。RSP1A はかなり前の Rev では使用できたが今は対応していない。使用できるのは AIRSPY、Funcube Dongle、RTL-SDR、HackRFone というところ。
　Rev.1800 以降 dotNet 5.0 が必要である。SDR# はもともと 32Bit 版で作られており dotNET 5.0 も 32Bit 版となる。私の PC は Win10 64Bit なのでなんの疑問もなく 64Bit 版をインストールして動かず、ずいぶんはまってしまった。
　このソフトの一番の弱点は録音再生機能だろうか。録音は受信時に録音ボタンをクリックして手動で行う。予約録音は標準ではインプリメントされていない。IFrecorder という予約録音の Plugin があるが、きわめて使いにくい上に録音したファイルが当の SDR# で再生できない。どうやったら再生できるのか情報がない。
 IQ 録音したファイルを再生すると、前述のように受信時の状態を再現する。PAUSE 機能が無く STOP して PLAY すると常に頭から再生するので非常に使いにくい。またタイムスタンプは録音された時刻や開始からの経過時間などを表示するのではなく、現在時刻を表示するのであまり役に立たない。こんなふうであるが PC の前に座って操作するソフトとしては、これが一番わかりやすいと思う

##[HDSDR](http://www.hdsdr.de/)
SDR# と並ぶポピュラーであり、古くから幾多のバージョンアップを繰り返して洗練されてきたソフトである。初期のものはかなりの CPU パワーを消費するものであったが、今はそうでもない。多数のハードに対応しており、RTL-SDR はもちろん、RSP1A も使用できる。なぜだか PlutoSDR は指定された ExtIO_Pluto を認識できずに使用できない。予約機能は充実しており、画像のように複数の予約が可能で HDSDR を PLAY モードにしておかなくても設定時刻になれば自動的に録音を開始する。
![20210417172838.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996993/2a4346da-a294-7006-b61e-29c7f6dcef91.jpeg)
再生がうまくいかない。ファイルを指定して再生すると、なぜだか、かなりの高速で再生してしまう。どこかに設定があると思うが見つけきれない。PAUSE 機能はあり、再生を止めて再開することはできる。タイムスタンプは、再生時からの経過時間を表示する。IQ 録音ファイル形式が SDR# と互換なので HDSDR で予約録音して SDR# で再生することができる。

##[SDR Console](https://www.sdr-radio.com/)
以前はインストールしてから使用できる期間が1年くらいと、限られていたのであまり使っていなかったが、今はそのようなことはない。多くの SDR ハードウェアに対応しており非常に機能が豊富で予約録音機能もある。
![20210417145353.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996993/4c978249-be1d-b04b-5f55-bcafff0cb7d0.jpeg)
画像は予約を設定して受信中の様子。画面の下側に経過時間、ファイル容量などの進行状況が示される。予約は一個だけのときにはSDR Console を PLAY 状態にしておかないと設定・録音できない。
![20210424120054.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996993/49a60c3b-ed10-e277-bdee-b1127ae5997f.jpeg)
複数の予約を行うときには REC/PLAY プレーンから Schedule をクリックすると上の画像のように Window が開き、中心周波数、開始時刻、収録時間を設定することができる。
録音したものを再生するときに PAUSE 機能あるので CW のビーコンを見ながら解読することもできる。

こうやって見ると、CubeSAT の受信に限って言えば、予約録音と再生機能が良くできている SDR console がベストだと思う。録音機能は便利であるが IQ 信号を録音する際に 受信帯域 500Khz、16bit の時 110MByte／分くらいの DISK スペースを消費するので注意が必要である。
（１）３０代後半で「機械学習」を学んだ記録

<h2>はじめに</h2>


結論から言うと、

<b>”年齢に関係なくエンジニアにならなかったとしても
（興味湧くならば）「迷わずIT知識」は学ぶべき”</b>

という感覚がより強くなりました。


（興味さえあれば、人生100年時代なので60歳からでも学ぶほうが面白いと思います。）
（日本に関しては風当たりは強いかもしれませんが、、、）

———————————————————————————

このブログでは「３０代後半のプログラミング経験無し」から

<b>１：プログラミングを学んだ経緯
２：プログラミングを学んで良かったこと</b>

を中心に書いていきます。

興味のあるところだけ読んで頂ければと思います。


ちなみに
次の記事（２）では「作成の大まかな流れ」
記事（３）では「自分が作ったアプリの紹介」
をします。

———————————————————————————

<h2>本記事の概要</h2>


● どんな人に読んで欲しいか

３０代、４０代以降のプログラマーには
なれないと思っているが「プログラミング」を学ぶべきか
迷っている人の参考になればと思います。



● この記事に書くこと、わかること

40歳に近くなって、
「プログラミングを学ぼうと思った経緯や感想」を書きます。



● この記事であまり扱わないこと

技術的な内容はこの記事では扱いません。

アイデミーでどんな成果物（WEBアプリ）を作ったかは、
「もう一つの記事（２）」をご参照ください。

（そちらには「実際の課題に使ったコード」も載せてあります。）

———————————————————————————

<h3>１：プログラミングを学んだ経緯</h3>


結局のところ、一般生活においてIT知識は何の役に立つか

ですが

最終的には、
知らないより知っていた方が<b>「速く片付けられる物事」</b>が増えます。


家を建てる
携帯を使う
看護や介護
お店で物を買う


昔からある「人間の活動」ですが、
「IT」が導入される前と後で変わったモノは一つで、

それは<b>「処理の速さ」</b>であるはずです。

速く作れる
速くつながる
速く知れる
速く在庫を発注できる


速さだけがIT導入の根幹で、
本質的にITが生まれたから「介護」が”必要なくなった”とかはないですよね。

人間のすべき事が減ったわけではない。

食べて、寝て、病気になったら体を治さないといけません。


で、

一般生活において何が起こるかと言うと

速さを加速するための「IT」に対して「素養がある人」と「素養がない人」で、
処理速度に差が出ると言う事なんですよね。


処理速度はそのまま人生の時間ですよね。

雑務を速く処理できれば：その分「自分の本当に作りたいものを作れる」とか
雑務を速く処理できれば：その分「家族と過ごす時間を増やせる」とか


「大切なことに使える時間が増える」



昨今、「クラウド」とか「IaaS」とか「PaaS」とか、
色々な言葉が生まれていますが根本的には

人が個別にやらなくていいことを「自動処理」して、
本当にクリエイティブな活動に対して「人間の脳みそ」を使おうよ。

という文脈で「クラウドの導入」が加速していると理解しています。



で、

何で「この歳で学ぶのか」と言うことなのですが、

「知識差」と言うものは「ある一定以上の開き」が出てしまうと
コミュニケーションが非常に困難になるという特性があります。


携帯電話でも、車の部品でもいいのですが、

「新しい機種」と「めちゃくちゃ昔の機種」ではそもそも
機器の互換性がなく「同じ部品や同じ機能」が相互に使えない

という現象が起きますよね。



人間もそれと同じだと思います。
<b>ある段階からは「会話が成り立たなくなる」壁がある。</b>

それを感じたことが、
プログラミングを学び始めた動機です。




これから先、
自分たちの身の回りでも「IT」のない生活はまずないはずですから。


その時に、家族や会社の中にITについてある程度わかってる人がいないと、
どう言う部分が「ITで簡略化できるか」、「ITで困った時にどう相談すべきか」で
かなり時間を使うことになるはずです。


今回アイデミーでもすごくよく感じた部分でもあります。

詳しく知っている人に「ある程度”的を得た”質問ができれば解決ができる」
ということが骨身に染みました。



<h3>２：まとめますと</h3>

なので経緯として、
なぜ４０歳以上もITを学ぶ必要があるかですが、

１つ目は、「コミュニケーション」を行なって「解決する力」をつけるためです。

そもそもプログラミングは「論理そのもの」なので、
論理的な力をつけるためには良い訓練になると思います。


２つ目は、どんな職業であろうと雇われている限りにおいては、
全体的なITの仕組みがわかっていた方が仕事がしやすいと思いました。


自分は非正規雇用の年月が極めて長いので、
職業が安定しない分は「確かな知識」で補っていかないといけないのですが、

どの分野の仕事に向かうとしても「ITの知識は、必ず知っておくべき汎用的な知識」
という観点から学ぶことにしました。



<h3>３：余談ですが、</h3>

Aidemyは「国の補助金」を受けて学びました。（2021年1月時点）


雇用保険の「スキル開発支援」を受けて、
実際にかかる受講料の７割くらいの補助を受けられる制度なのですが、

これから先は
少しでも生かせるスキルが「有る・無い」で苦労が違ってくると思いますので、

使える人は絶対使った方がいいと思います。
ハローワークで申請すると補助を受けられます。


申請のために、
キャリアの棚卸しをする「ジョブカード」と言うものを作りますが、
「スキルの棚卸し」は定期的に行うべきだなとすごく思いました。

余談ですが。。。




<h3>４：プログラミングを学んで良かったこと</h3>


本当は「すぐに給料が上がりました」とか書けたら良いのですが、
すぐに上がってはおりません。


Aidemyで学んだことで、

仕事の裏側の仕組み（IT基盤の仕事でどんな人が動いているのか）が
分かってくるのですごく仕事の理解度が進みます。

「WEBアプリ」や「データベース」などの知識があると、

「Microsoft Azure」や「AWS」が何のためにあるのかが
かなり理解しやすくなり、自分は職場での仕事がとてもしやすくなりました。


ここで学んだことを元に、
より体系的に「ITの成り立ち」を理解していきたいと思います。



<h2>５：今後の活用</h2>

今回の学習を元に、
さらに学んでいきたいと思っています。

またどんな仕事をするにせよ、

ITのスキルを必要とする人になるべくわかりやすく
知識の伝達をできるように工夫をしていきます。

エンジニアとIT知識の無い人との間に立って
橋渡しができたら良いなと思っています。


お読み頂き有り難うございます。
ではでは。
【C言語】ポインタを使ってみる【移動編】

# 前回の続き
前回の記事でポインタをザックリ説明したが今回は実際の使い方やできることまとめる。
前回記事⇒[【C言語】ポインタ入門編](https://qiita.com/ryuso/items/9aac1b524ca703c0d203)　参照

# ポインタは移動可能
まず初めにポインタには値を何度でも再設定することができる。

```sample.c
#include <stdio.h>

int main(void){
    int x = 0;
    int y = 0;
    int *ptr;

    ptr = &x;  //ptrはxのアドレスを指す
    *ptr = 21; //xに21を代入
    ptr = &y;  //ptrはyのアドレスを指す
    *ptr = 45; //yに45を代入

    printf("x=%d\n",x);
    printf("y=%d\n",y);

    return 0;
}
```
上記のプログラムは変数x,yの初期値が0であるがポインタを使って変数の中身を変更している。
以下の結果が得られるはずである。

```
x=21
y=45
```

ここで注目なのはポインタの中身です。
最後に代入したのは変数yなのでyのアドレスを持っていることになります。
確かめて見ましょう。

```sample.c
int main(void){
    int x = 0;
    int y = 0;
    int *ptr;

    ptr = &x;  //ptrはxのアドレスを指す
    *ptr = 21; //xに21を代入
    ptr = &y;  //ptrはyのアドレスを指す
    *ptr = 45; //yに45を代入

    printf("x=%d\n",x);
    printf("y=%d\n",y);
    printf("ptr=%d\n",*ptr);

    return 0;
}
```

次はポインタのインクリメントとデクリメントで動かして見るよ。

ここでのインクリメントとは配列において次の要素に移動すると言う意味となります。
配列[1]⇨配列[2]と言うように１要素移動することをインクリメントと言います。
デクリメントはインクリメントの反対でー１すると言うことです。

```sample.c
#include <stdio.h>

int main(void){
    int value[]={0,1,2,3,4,5};  //配列宣言
    int *ptr;                   //ポインタ宣言

    ptr = &value[0];  //ptr配列先頭のアドレスを示す

    printf("ptr=%d\n",*ptr);

    ptr++; //インクリメント

    printf("ptr=%d\n",*ptr);

    ptr--; //デクリメント

    printf("ptr=%d\n",*ptr);

    return 0;
}
```

上記のプログラムを実行してみよう。

それぞれの箇所でポインタの値を確認して見てください。


```
ptr=0
ptr=1
ptr=0
```

先頭配列の値
インクリメントした値
インクリメントした値をデクリメントした値
となってますね。


最後に
ポインタを１つ宣言すれば多くの変数の値を扱えることがポイントです。
次回はポインタ文字列ついて記事を書こうと思います。

以上
READMEのテンプレート※随時更新

# はじめに
READMEのテンプレがあったら便利だと思ったため投稿。
これから業務や自学での経験によってよりいい描き方が出てくるかもしれないがその時は随時更新。

# READMEの重要性

[こちら](https://karaage.hatenadiary.jp/entry/2018/01/19/073000)が参考になりました。
デザイン凝るくらいならREADME丁寧に書く方が重要らしい。
これから実務に関わるので先輩エンジニアのREADMEをぜひ拝見したい...。

# 以下テンプレ

```
# Name（リポジトリ/プロジェクト/OSS などの名前）

チャットアプリ(React.ts)

# DEMO

[デモ](https://chatapp-reactts.web.app/)

アプリの使い方が直感で分かる画像を載せる

# Features

アプリの差別化等特徴を載せる

## ログイン

- Google ログインか mail・password によるログインで利用可能
  (テストユーザーとしては、mail: usera@gmail.com,
  password: test00 でログイン・利用可能)

## メッセージ

- 画像を添付したメッセージの送信が可能(画像なしでも可)

## レスポンス

メッセージ下の吹き出しアイコンをクリックすると、
メッセージに返信することが可能

## ログアウト

- メッセージ入力欄横のアイコンをクリックすることでログアウトが可能

と、こんな感じで機能ごとに解説する？
# Requirement

アプリを動かすのに必要なライブラリ等を挙げる

- @material-ui/core: ^4.11.3
- @material-ui/icons: ^4.11.2
- @reduxjs/toolkit: ^1.5.1
- firebase: ^8.4.1
- react: ^17.0.2,
- react-redux : ^7.2.0
- typescript: ~4.1.5



# Installation

Requirementのインストール方法を書く

```
```
npx create-react-app . --template redux-typescript
yarn add @material-ui/core @material-ui/icons
yarn add firebase
```

````

# Usage

デモの実行方法を書く

```bash
git clone https://github.com/UserName/AppName.git
cd AppName
yarn start
````

```
# Author

作成情報を列挙する

- 作成者: Haruna Ezure
- 所属:
- E-mail: burimofumofu@gmail.com

# License

作成情報を書く。ライセンスの取り方については[こちら](https://qiita.com/shibukk/items/67ad0a5eda5a94e5c032)を参考にする。MITが推奨。

[MIT license](https://en.wikipedia.org/wiki/MIT_License).

```
複数のAjaxの最初に受け取ったレスポンスに対して実行させる

# 対象読者

- async, awaitをソースに書くと死んじゃう病の人
- jQueryの$.ajaxを利用する人

# バージョン

jQuery: 3.6.0

# 最初以外のレスポンスも受け取る場合

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
// ひとつが終わったら
(function() {
    const dfd = $.Deferred();
    let canRunHogeAjaxThen = true;
    let canRunFugaAjaxThen = true;
    let didRunHogeAjaxCatch = false;
    let didRunFugaAjaxCatch = false;

    hogeAjax().then(function(data) {
        if (canRunHogeAjaxThen) {
            canRunFugaAjaxThen = false;
            dfd.resolve(data);
        }
    }).catch(function(e) {
        console.log(e);
        didRunHogeAjaxCatch = true;
        if (didRunFugaAjaxCatch) {
            dfd.reject(new Error("hogeAjax, fugaAjaxともにエラー"));
        }
    });

    fugaAjax().then(function(data) {
        if (canRunFugaAjaxThen) {
            canRunHogeAjaxThen = false;
            dfd.resolve(data);
        }
    }).catch(function(e) {
        console.log(e);
        didRunFugaAjaxCatch = true;
        if (didRunHogeAjaxCatch) {
            dfd.reject(new Error("hogeAjax, fugaAjaxともにエラー"));
        }
    }); 

    return dfd;
})().then(function(data) {
    console.log(data.args.param);
}).catch(function(e) {
    console.log(e);
});

function hogeAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/5",
        type: "GET",
        data: {
            param: "ほげほげ",
        }
    });
}

function fugaAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/1",
        type: "GET",
        data: {
            param: "ふがふが",
        }
    });
}
</script>
```

# 最初以外のレスポンスを受け取りたくない場合

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
// ひとつが終わったら
(function() {
    let hogeXHR = hogeAjax();
    let fugaXHR = fugaAjax();
    let isHogeAbort = false;
    let isFugaAbort = false;
    const dfd = $.Deferred();

    hogeXHR.then(function(data) {
        fugaXHR.abort();
        isFugaAbort = true;
        dfd.resolve(data);
    }).catch(function(e) {
        if (isHogeAbort === false) {
            dfd.reject(e);
        }
    });

    fugaXHR.then(function(data) {
        hogeXHR.abort();
        isHogeAbort = true;
        dfd.resolve(data);
    }).catch(function(e) {
        if (isFugaAbort === false) {
            dfd.reject(e);
        }
    }); 

    return dfd;
})().then(function(data) {
    console.log(data.args.param);
}).catch(function(e) {
    console.log(e);
});

function hogeAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/5",
        type: "GET",
        data: {
            param: "ほげほげ",
        }
    });
}

function fugaAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/1",
        type: "GET",
        data: {
            param: "ふがふが",
        }
    });
}
</script>
```

# 類似記事

[複数のAjaxを順番に実行させる](https://qiita.com/mogamoga1337/items/343b08719443041a701a)
[複数のAjaxのレスポンスを全て受け取ったら実行させる](https://qiita.com/mogamoga1337/items/4bdb49cb749a6f9aaebf)
複数のAjaxのレスポンスを全て受け取ったら実行させる

# 対象読者

- async, awaitをソースに書くと死んじゃう病の人
- jQueryの$.ajaxを利用する人

# バージョン

jQuery: 3.6.0

# 追記

こっちのほうがいい

```js
// 非同期処理1
const promise1 = $.ajax({
    url: 'https://httpbin.org/get?param=123'
})
.catch(e => {
    // エラー処理
    console.error(e);
    return e;
});

// 非同期処理2
const promise2 = $.ajax({
    url: 'https://httpbin.org/get?param=456'
})
.catch(e => {
    // エラー処理
    console.error(e);
    return e;
});

// 両方の非同期処理が完了したら次の処理を実行
Promise.all([promise1, promise2])
.then(dataArray => {
    console.log(dataArray);
})
.catch(e => {
    console.error("エラー発生");
});
```

# こうする（追記前の記述）

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
// すべて終わったら
$.when(
    hogeAjax().then(function(data) {return data}),
    fugaAjax().then(function(data) {return data})
).then(function(hoge, fuga) {
    console.log(hoge.args.param);
    console.log(fuga.args.param);
}).catch(function(e) {
    console.log(e);
});

function hogeAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/5",
        type: "GET",
        data: {
            param: "ほげほげ",
        }
    });
}

function fugaAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/1",
        type: "GET",
        data: {
            param: "ふがふが",
        }
    });
}
</script>
```

# 類似記事

[複数のAjaxを順番に実行させる](https://qiita.com/mogamoga1337/items/343b08719443041a701a)
[複数のAjaxの最初に受け取ったレスポンスに対して実行させる](https://qiita.com/mogamoga1337/items/d7b6d6581dd97feecca9)
複数のAjaxを順番に実行させる

# 対象読者

- async, awaitをソースに書くと死んじゃう病の人
- jQueryの$.ajaxを利用する人

# バージョン

jQuery: 3.6.0

# こうする

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
// 順次
hogeAjax().then(function(data) {
    console.log(data.args.param);
    return fugaAjax();
}).then(function(data) {
    console.log(data.args.param);
}).catch(function(e) {
    console.log(e);
});

function hogeAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/5",
        type: "GET",
        data: {
            param: "ほげほげ",
        }
    });
}

function fugaAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/1",
        type: "GET",
        data: {
            param: "ふがふが",
        }
    });
}
</script>
```

# 類似記事

[複数のAjaxのレスポンスを全て受け取ったら実行させる](https://qiita.com/mogamoga1337/items/4bdb49cb749a6f9aaebf)
[複数のAjaxの最初に受け取ったレスポンスに対して実行させる](https://qiita.com/mogamoga1337/items/d7b6d6581dd97feecca9)
Qt OpenGLプログラム　3D 立方体表示


#実行サンプル
機能は以下
・マウス移動で図形回転
・マウスホイールで図形ズーム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423803/e32134a7-f1ae-49b8-3c7d-7bc5f3951ff9.png)

#実行環境
windows10
Qt5.15
VisualStudio2019

#実行手順
特記なし、通常通りの手順。(QtCreaterでビルドして、実行。)

#ソースコード
※プログラム作成中です。動作はします。（必要ないコードが入っていたり整ってませんが。。）
https://github.com/sakurataiko1/Cplus_openGL/tree/main/Qt_openGL_QtTutorial_3D_shader_cube/MyOpenGL2_my01shader

#関連資料
■　OpenGLコードの参考　Qt公式プログラム
http://ftp.jaist.ac.jp/pub/qtproject/learning/developerguides/qtopengltutorial/
ソースコード：　opengl_src.zip
解説：　OpenGLTutorial.pdf

■　GUI参考 (widget の格上げ設定なども)
https://www.bogotobogo.com/Qt/Qt5_OpenGL_QGLWidget.php

■ Qtの設定参考。（シェーダプログラムの追加とリソースファイルへの登録.vsh, fsh)
https://armadillo.atmark-techno.com/blog/1562/1988




<!-- #　実行 -->


<!-- #　補足 -->
IR Reading 2021春の感想

# 概要
IR Reading 2021春を聴講したので、感想を投稿する。

# 印象に残った論文まとめ
+ An Efficient Neighborhood-based Interaction Model for Recommendation on Heterogeneous Graph (KDD 2020)  
graphを使った手法。負例は要らない？

+ S^{3}-Rec: Self-Supervised Learning for Sequential Recommendation with Mutual Information Maximization (CIKM 2020)  
属性データを融合させる。属性、コンテキストを両方とも利用可能。

+ [CEQE: Contextualized Embeddings for Query Expansion (EMNLP 2020)](https://www.researchgate.net/publication/349943662_CEQE_Contextualized_Embeddings_for_Query_Expansion)  
BERTを使って、QEしたら、他のQEと比べて良い結果に。ベースラインはBM25。[Relavance Model](https://github.com/karakuri-ai/paper-readings/issues/16)も参照。

+ Online Experimentation with Surrogate Metrics: Guidelines and a Case Study (WSDM 2021)  
時間がかかる指標の代わりにモニタリングする指標を作る。例えば、リテンションを最適化したいが、リテンションの測定には時間がかかる。だが、評価は素早く行いたい。ここで代替の指標をすぐにすぐに得られる指標を使って行いたい。これを許容できる範囲でやる方法。

+ PROP: Pre-training with Representative Words Prediction for Ad-hoc Retrieval（WSDM2021）  
IRだとNLPのpre-trained modelの問題設定とちがうのでは？-> IRに適合したpretrained objectiveを作りました。

+ Generative Models are Unsupervised Predictors of Page Quality: A Colossal-Scale Study (WSDM 2021)  
NLPの生成モデルにより自動生成されたページと人手で生成されたページを見分けるモデルはそのままページのクオリティを推定するモデルとしてそのまま利用できる。教師データ不要で質の判定が可能。

+ Interpretable Ranking with Generalized Additive Models (WSDM 2021)  
説明可能性をすごい感じた。このシンプルさで結果が出るなら、こういうモデルがいい！ 使ってみたいと思えた。

+ Popularity-Opportunity Bias in Collaborative Filtering (WSDM 2021)
セレンディピティを出すための一つの工夫として、相関係数をロスに混ぜ込むという手法。実サービスで使うなら、ヘビーユーザーに対して適用とかがいいのかも。

+  Denoising Implicit Feedback for Recommendation (WSDM 2021)
クリックデータから、あんまり興味なさそうなクリックデータを取り除くと、精度が良くなった。閲覧時間等が取れるのであれば、データの質を向上させられる。

+ Density Ratio-based Personalised Recommendation from Implicit Feedback (TheWebConf 2021)
pair-wiseより高速なpoint-wiseを性能を良くするように改良してやってみたという研究。
Qiitaの記事投稿兼プログラミングノート用テンプレ書いてみた


# はじめに

自分用のプログラミングノート兼Qiitaの記事を書くにあたってテンプレがあるといいと思ったために投稿しました。
※随時更新

```

# はじめに

なぜ記事を書こうと思ったかなど発端を書く

# 開発環境

使ったツール、コマンド、言語等の情報を記述。

# 解説

コードと一緒に解説

```

```

これこれこういう意味である～

## 補足

解説した中でも、更に深く突っ込んで書きたいところがあれば書く。

## 最後に

書いてみての考察。
良かった点、悪かった点、次回への意気込み等。

##　参考リンク
[text](https://web-cheatsheet.com/)

##　その他よく使うマークダウン

- [] チェックリスト
- [x] チェックリスト

**太文字**

~~打ち消し線~~

- 水平線

---

- テーブル
  | left | right | center |
  |:-------|---------:|:--------:|
  | hoge | hoge | hoge |
  | foo | foo | foo |
  | bar | bar | bar |

- リンク
  [text](https://web-cheatsheet.com/)

- 画像
  ![alt](https://web-cheatsheet.com/icons/apple-touch-icon-114x114.png)

```
accumulateの第三引数に注意(及び数値の型指定)

vector\<long long\>型やvector\<double\>型の配列 x の総和を求めるときに，

```C++
std::accumulate(x.begin(), x.end(), 0);
```

とすると誤差がおおきくなったり，オーバーフローしたりする。std::accumulateの仕様として第三引数の型で値が帰ってくるらしい。なので正しくはそれぞれ

```C++
std::accumulate(x.begin(), x.end(), 0LL);
std::accumulate(x.begin(), x.end(), 0.0L);
```

とする。一応数値の型指定のまとめしておく:

```C++
0          //int
0.0        //float
0LL        //int64_t
0.0L       //double
```

(メモ) std::cout よりも printf のほうが便利で早いこともあるっぽい，桁数固定など
Micronautのポートを変更する

# やりたいこと

Micronautで開発している際、デフォルトのポート8080では他のサービスと競合する場合がある.
そのため、ポートの変更をしたい場合がある.application.ymlに設定することで変更可能である.

# 設定方法

Spring Bootとほぼ同じで、application.ymlで変更できる.

```yml:application.yml
micronaut:
  server:
    port: 8081
```
任意のコマンドをWEBブラウザから実行してみる

# 概要
寝転びながらサーバの情報を見たいことがあったので、コマンドを実行した結果がWEBブラウザから見れるようにしてみました。技術的には、Nginxでリクエスト時にシェルスクリプトが動作しHTMLで描画するようにしています。Dockerコンテナの上で動いているので移植も起動も簡単です。味気ないですが、好きなコマンドを追加したり、CSSで整えたりはお好みで・・

![Screen Shot 2021-04-24 at 14.52.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96637/ee51d61a-9898-c4e3-49ad-ad66a1285923.png)

要件はこんな感じです。

* 必要な時にだけ動作する。とても軽いこと
* 動作中のプロセスのCPU/メモリ使用率が見れること
* WEBブラウザから確認できること
* カスタマイズが容易であること
* Dockerコンテナで動作すること

# 使い方
* (事前準備) dockerコマンドが使用できるようにしてください
* (事前準備) docker-composeコマンドが使用できるようにしてください
* リポジトリをクローンします。

```
git clone https://github.com/shun-sa/ps-webapp.git
cd ps-webapp
```

* 起動します。

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

* http://<サーバのIP>:8081/top.sh にアクセス


# カスタマイズ例
## コマンドを追加したい

top.shに、見たいコマンドを`cecho <コマンド>`で書き足していけばOKです。psの場合は`cecho ps`ですね。

```top.sh
#!/bin/sh

eval $QUERY_STRING
echo 'Content-type: text/html'  
echo ''

echo '<html>'
echo '<head></head>'
echo '<h1>Server Overview</h1>'

cecho(){
    echo "<h2>${@}</h2>"
    echo "<pre>"
    eval $@
    echo "</pre>"
}

# ここに足していく
cecho sensors
cecho top -b -n 1 -c | head -n 30

echo '<body>'

```

## GPUの使用率が見たい
コンテナ内でnvidia-smiコマンドが実行できるなら、docker-compose.yml,top.shに以下を追記すれば見れます。


``` docker-compose.yml
    environment:
      - NVIDIA_DRIVER_CAPABILITIES=all
      - NVIDIA_VISIBLE_DEVICES=all
    runtime: nvidia
```

```top.sh
cecho nvidia-smi
```

![Screen Shot 2021-04-24 at 15.18.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96637/68489d74-de1f-5a08-6054-e9578d10fe49.png)

## GETメソッドの引数を利用したい
GETメソッドで指定した値がスクリプト内で利用できます。URLにtestkeyを指定しtop.shで見てみるときちんと表示されています。あとはコマンドを渡したり、PIDを渡してプロセスを落としたり等はお好みで・・・

http://<サーバのIP>:8081/top.sh?testkey=val

```top.sh
echo $testkey
```

![Screen Shot 2021-04-24 at 15.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96637/54df24ca-1d2d-4596-205c-f0bf5b00f9d0.png)

# ⚠️注意
任意のコマンドが実行できる性質上、ホストマシンホストマシンを再起動したり、最悪の場合犯罪の踏み台に利用される可能性があります。インターネットから見れる場所に置くなどはやめましょう。
ブロックチェーンを利用した分散型計算リソースの貸与

　ＡＩの機械学習や学習済みモデルの運用を行う上で、ネックになるのが計算リソースの不足です。特に、複数のＡＩ（エージェント）が協働してタスクを実行するマルチエージェントシステムにおける強化学習や学習済みモデルの運用では、計算リソース不足が顕著になります。
　そこで、既に世界中に分散しているパーソナルコンピュータ等の計算リソースを利活用して上記問題を解決するアイデアを提案します。
　以下の全体システム図に示すように、３種類のブロックチェーンネットワークであるプライベートチェーン２、コンソーシアムチェーン３及びパブリックチェーン４の何れかを用いて、スマートコントラクトにより計算資源の貸与契約を自動的に行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461483/9d44fa93-e168-d5db-7aca-6f7f7f514b3e.png)
　ここでは、パブリックチェーン４を用いた貸与契約を説明する。パブリックチェーン４における多数のノード（パーソナルコンピュータ：ＰＣ）で実行されるスマートコントラクト処理のフローチャートを以下に示す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461483/116fdf78-388a-ffa1-7a30-09e2ad325e9c.png)
　Ｓ１５において、ユーザ端末のＰＣ資源（計算資源）の貸与契約が成立したか否か判定され、成立したと判定された場合には制御がＳ１８へ進み、ＰＣ資源（計算資源）の貸与処理が行われる。次に、Ｓ１９では、その成立した契約をトランザクションとしてブロックチェーンに記録するための処理が行われる。その貸与契約をトランザクションとしてブロックチェーンに記録した状態を以下に示す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461483/50991085-5699-4184-f0d3-caedec499dc3.png)
　この図では、例えば、Ａ氏がＢ氏に対し「休止状態のＰＣ資源（計算資源）を３９００５秒貸与して２５.７８トークンを得る。」と決め、トランザクションを生成したことを電子署名する。この電子著名は、トランザクションデータを所定のハッシュ関数を通すことによりハッシュ値を生成し、トランザクション（取引）の当事者（Ａ氏とＢ氏）の秘密鍵ＳＫを用いてそのハッシュ値を暗号化したものである。また、認証局によりデジタル公開鍵証明書を発行してもらってもよい。
消費税計算サイト~HTML側~


今回は消費税計算サイトを作っていきます。
[実装]
１．消費税計算欄の作成
２，消費税計算データ一覧が出てくるようデータ欄

#コード
```index.html
  <form>
    <label>式:</label>
    <input  type="text" placeholder="2000">
    <input class="btn" type="button" value="計算">
  </form>
  <table class="tax-answer" id="tax-answer" border="1">
    <caption>結果一覧</caption>
    <tr>
      <th>何月何日</th><th>式</th><th>結果</th>
    </tr>
    <tr>
      <th>データ</th><th>データ</th><th>データ</th>
    </tr>
    <tr>
      <th>データ</th><th>データ</th><th>データ</th>
    </tr>
  </table>
```

フォームの実装は、もう少し改善が必要かなと(-_-;)
HTML側でユーザーが入力した値を、JS側で計算、データに返す形を目標にします。

# HTML　実装

1,tableタグ
表全体を表します　borderの部分は、レイアウトではありませんよという意味です。

２，capition
表のタイトルを表します。通常の実装方法では、表の上にタイトルとして表示されます。下に表示する場合は、cssで行います。

３，trタグ
行を表します。

4,thタグ
列を表します。
*注意　trタグは列の役割を表すので、必ずtrタグの中に入れてください。

このままでは淡白な表示になってしまいます。デザインは、CSSで行います。

#CSS　実装

```style.css
caption {
 padding-bottom: 10px;
}

.tax-answer {
  border-collapse: collapse;
  margin: auto;
}

.tax-answer,th,td {
  border: 2px solid black;
  width: 400px;
  height: 20px;
}
```
１，border-collapase
表の枠線の表示形式　（collapase,sparate）
これで、表全体のレイアウトになります。

２，tax-answer,th,td
これは、表の中身である行と列に対してのCSSになります。
Bubbleでクローズドな教育系SNSを作る【ログイン・ログアウト編②】

#はじめに
[前回](https://qiita.com/yuki_ink/items/8568cd12b5d75144ff6d)に引き続き、ログイン、ログアウト機能を実装していきます。

**~~①メールアドレスとパスワードでログインする
②ログイン後は指定のページ「ログイン後遷移ページ」に遷移する~~
③ログインしていない状態で「ログイン後遷移ページ」のURLを直接叩いた場合、強制的に別ページ「ログインページ」に遷移させる
~~④管理者に承認されていないアカウントでログインしようとした場合、[以前](https://qiita.com/yuki_ink/items/f377ef0ced2e398aeac5#%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB)作った「ユーザー登録後遷移ページ」に遷移させる~~
⑤ログアウト後はトップページに遷移させる**

前回で①②④が完成しました。
今回で残りを片付けます。

#ログイン後遷移ページのWorkflow設定
要件③の部分です。
ログインしたユーザーにしか見せたくないページでは、URL押下による直接のアクセスを防ぐ必要があります。

ログイン後遷移ページのWorkflow画面で「Click here to add an event...」から「Do when condition is true」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/160e6716-490d-49ee-4bf3-0c4c5d3a7209.png)
設定ウィンドウのOnly whenで「Current User isn't logged in」と入力します。
そうすることで、ページの閲覧者がログインしていない場合の処理を記述することができます。

未ログインユーザーはログインページに飛ばしてやりましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/2c699fff-5f96-e6a6-e523-b57ca18795b9.png)

##やってみる
ログイン後遷移ページからPreviewしてみます。
ログインページを経由せず直接アクセスすると、勝手にログインページに移動することが分かります。

##ついでにトップページのWorkflowも設定しておく
ログインしていない状態でログイン後遷移ページにアクセスするとはじかれる仕組みはOK。
では、ログインしている状態でトップページにアクセスされた場合はどうすればよいでしょうか。

現状、ログイン状態であっても、Workflowで設定したページ遷移の関係上、一度ブラウザを閉じてしまえばトップページ⇒ログインページ⇒ログイン後遷移ページと行くしかありません。
それは面倒すぎる。
ログイン状態でトップページにアクセスした場合、直接ログイン後遷移ページに飛ばしたい。

というわけで、ついでにトップページのWorkflowも設定しておきましょう。

やることはさっきやったこととほぼ一緒です。
違うのはOnly whenで「Current User **is** logged in」と入力する点だけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/1731391b-8fbe-e13c-70b4-2047dabe408f.png)

#ログアウト
要件⑤の部分です。
簡単です笑。

まずログアウト用のボタンを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/7ac7500b-fd22-bb77-b550-2658e4b678c8.png)
そこにWorkflowを設定します。
「Click here to add an action...」からAccount > Log the user outをクリック。
これでログアウト処理終わりです。

続いてログアウトしたらトップページに飛ばします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/8b7f806f-90f5-ac68-8661-cdb3a23a02b4.png)
終わり！！
Previewすると、いい感じに動いていることが分かります。

#終わりに
ユーザー登録編と比べてうっすい内容となりましたが、Bubbleではログイン・ログアウト処理が本当に簡単に実装できました。

ただ、本稿では機能実装の説明だけでデザインにはなんのこだわりも持っていません。
ちゃんとしたサービスとして作るのであれば、ボタンの配置などは工夫する必要があるかと思います。
RSpecの導入時の注意

Gemfileを編
-

Gemfileを以下のように編集時、最後尾などではなく、必ずgroup :development, :testというグループの中に記述します。

```rb: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 'rspec-rails', '~> 4.0.0'
 end
```

Gemfileの編集が完了したので、次にbundle installを実行します。
【JavaScript】論理演算子「&&」で条件分岐させる時の動きを理解した話

## これまでの論理演算子「&&」の理解
論理積 (AND)は与えられた複数の命題のいずれもが例外なく真であることを示す論理演算であり、所謂、「X かつ Y」や「X そして Y」というイメージ。
https://ja.wikipedia.org/wiki/%E8%AB%96%E7%90%86%E7%A9%8D

## 本題
フロントエンドの開発において、
バックエンドから取得するデータによって表示条件を分岐させる機能があったが、
取得しているデータがかなりネストされたオブジェクトとなっていて扱い辛い形となっていた。

```javascript
//（例）
var human = {
  name : 'taro',
  hometown: {
    country : 'Japan',
    city :'Tokyo'
  }
};
```
※ここではバックエンド側の改修をせずに解決する前提の話となる。

例えば、ここで` Vue.js` で上記オブジェクトの国情報の存在チェックで条件分岐させたい場合、単純に以下のような書き方をすると失敗する。

```vuejs
// isEmptyは空判定をBooleanでするメソッドだと思ってみてください
<div v-if="!isEmpty(human.hometown.country)">国情報がある</div>
```
これだと` country` が存在する時は良いが、`hometown` が存在しないケースがある場合はエラーになってしまう。なので、ここで「&&」を使って条件式を作る。

```vuejs
<div v-if="!isEmpty(human.hometown) && !isEmpty(human.hometown.country)">国情報がある</div>
```
冒頭の理解だと、これが何故成り立つのかふんわりとしか理解出来ないが、それは「&&」「かつ」について同時に成り立っていると言うイメージを持ってしまっているのが良くなかった。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators

> expr1 && expr2

> expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は expr2 を返します。したがってブール値を用いた場合、両被演算子が true であれば && は true を返し、そうでなければ false を返します。

これが答えであるが、今回の例で言うとまず` !isEmpty(human.hometown)` で` hometown` が空でないかどうかを判定し、空である場合はこの段階で`false`が返り、空でない場合は次に` !isEmpty(human.hometown.country)` を判定し、存在チェックを行う、という流れになっている。なので問題ない。

ちなみに今回はBooleanが返るような想定で例を上げたが、MDNからの引用にもあるように、
「&&」については、左辺を評価しfalsy(偽値)であれば、その値を返し(右辺は評価しない)
左辺がtruthyであったら右辺を評価し、その値を返す。

なので文字列なども返す事が出来るので、そう言う使い方も出来るみたい。詳しくは参考記事を貼っておく。

##　以下、参考にさせて頂いた記事
・[JavaScriptの「&&」「||」について盛大に勘違いをしていた件](https://qiita.com/Imamotty/items/bc659569239379dded55)
・[【JavaScript】”&”と”＆＆”、”|”と”||”のメモ](https://t-salad.com/js-and-or/#toc6)
medical-clinic-Architect

#firebaseを利用したカルテの開発
<a href="https://mens-care-clinic.com/">メンズケアクリニック</a>では、firebaseを用いたカルテの内製化に取り組み、スマートクリニックを目指しています。

今回はなぜ我々が内製化に踏み切ったかを記載したします。

##なぜ自作??
- 患者IDを用いた統合的な対応を実施するため

様々なカルテベンダーが高機能で安価に電子カルテをSaasとして提供しています。
一方でIDをサービスサイドに管理される形式は、分析・MA（医療情報の提供限る）側につなげていく未来を阻害するため内製化を実施しました。

##なぜGCP
- 最終的に分析まで持っていくため。個人的には、AWSは分析しづらい。

##なぜfirebase

認証機能、API、最終的に分析側まで持っていく。全体としてシステムデザインを爆速で
実施できるから。

参考させていただいたURLは下記になります。
今後開発を実施していく中で少しでも皆様の参考になるように。
有用な内容を発信していきます。
Rails-CapistranoでRails assets manifest file not found.

# はじめに
下記環境で実施
* Ruby on Rails 6.0.3.6
* Capistrano 3.14

# 現象
`Capistrano` で `AWS EC2` へデプロイ実行時に、下記エラーが発生

```zsh
% bundle exec cap production deploy BRANCH=master
XXX Exception while executing on host hoge-production: Rails assets manifest file not found. (SSHKit::Runner::ExecuteError)
```

# 対処方法
デプロイ先のEC2の、`shared/public/assets` ディレクトリに対して、
`manifest.json` `sprockets-manifest.json` をあらかじめ作成しておく。

```zsh
% touch shared/public/assets/manifest.json
% touch shared/public/assets/sprockets-manifest.json
```
オブジェクトと配列

# はじめに

オブジェクトと配列について、簡単にまとめました。

# 配列

配列は、要素を[]でかこむ。
主に「同じ種類のデータ」を扱う場合に使い、データには自動的にIDが0から順番にふられます。
命名のコツとしては s、list、array を名前の最後に付けてあげることで、配列であることがわかりやすい。

``` .js
var company_list = []; // 配列は初期化が必要
var company_list = ['google', 'apple', 'microsoft'];
```

console.log( 値 ) で出力

```script.js
console.log(company_list);
```
``` :結果
['google', 'apple', 'maicrosoft']
```


# オブジェクト

オブジェクトは、要素を{}でかこむ
オブジェクトは、主に「違う種類のデータ」を扱う場合に使う


コンソールに出力
console.log(定数名) で出力

```
var company_list = {name: "google", browser: "chrome"};
```

console.log( 値 ) で出力

```script.js
console.log(company_list["browser"]); // キーの名前で指定
```

``` :結果
"chrome"
```

### オブジェクト内の値にアクセス

オブジェクトのプロパティには、 `fruits.name` のように単純なドット表記でアクセスします。

`fruits.checkTotalPrice()`
オブジェクトに定義したメソッドを呼び出す



ちなみに、JavaScript で 
`document.getElementById()` 要素を取得
`document.cookie = "age=45";` クッキーデータ保存
のような処理行うことができるのは、ブラウザ自体がオブジェクトで構築されているからです。

# オブジェクトを要素に持つ配列

下記のように、配列の要素には、文字列や数値だけじゃ無くオブジェクトも使うことができます


```.js
var company_list = [
  {name: "google", browser: "chrome"}
  {name: "apple", browser: "safari"},
  {name: "microsoft", browser: "microsoftEdge"}
];
```


# 参考文献
- [Objectでの作業](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects)
$_POST・$_GETの違い

# $_POSTと$_GETの違い

POSTは入力フォームから値をPHPに受け渡します。
GETはURLに含まれる値からPHPに受け渡します。

````
$_POST['変数名']
$_GET['変数名']
````

# POST
新規追加・更新などに使われるHTMLのフォームから渡される。
結果をブックマークできない。

# GET
一覧・詳細表示などに使われるURLにパラメータとして使われる。
結果はブックマークできる。
【UiPath】メソッドを呼び出し（Invoke Method）を使わないDataRowのコピー

##はじめに
この記事の執筆は以下の環境で行っています。
UiPathStudio 2021.4.1-beta.177（Community License）
UiPath.Excel.Activities 2.10.4
UiPath.System.Activities 21.4.0
言語：日本語

##なにをするの？
DataTableの行を別のDataTableに追加する方法について記述します。

『UiPath データ行のコピー』という検索ワードでヒットする内容では、「メソッドを呼び出し(InvokeMethod)」アクティビティで`ImportRow`というメソッドを使用する[方法が紹介]されていますが、この記事では「データ行を追加(Add Data Row)」アクティビティのみで完結させる方法を紹介します。
[方法が紹介]:https://forum.uipath.com/t/datatable-datatable/198120

##やりたいこと
例えば以下のような家計簿のデータを読み取り、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/19235b98-fb17-a21d-4898-3831e8e20501.png)
金額が一定額を超えたデータだけを集めた表を作りたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/550f9da3-fded-62fb-cc4d-b14692a365f3.png)
そんなケースを想定しています。

##やりかた
「繰り返し（データテーブルの各行）(ForEachRow in DataTable)」を使用して、`dt_家計簿`を1行ごとにチェックして、条件に合致した場合のみ「データ行を追加(Add Data Row)」で`dt_使いすぎ`に行データをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/2ec4c84d-e43b-c2f0-306a-1fd3ca923598.png)
この時、「データ行を追加(Add Data Row)」のプロパティには下記のように設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/1bce4803-d209-4c5b-74eb-2140f504792d.png)
「列配列」に`CurrentRow.ItemArray`と設定するのがポイントとなります。

処理中の行をコピーするので、「行」に`CurrentRow`と設定したくなりますが、その場合は実行時に下記のエラーが出てしまうので注意してください。
`この行は既に別のテーブルに属しています（This row already belongs to another table.）`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/cc324313-32ff-f0ac-d169-00cbea4601f3.png)
`.ItemArray`と付けることで「行データ」がテーブルに属さない「列配列」に変換されるので、上記のエラーを回避できます。

##補足

###CSV以外を読み取ったらどうなるのか
`.ItemArray`の返り値は`Object`型の配列になるので、元のDataTableの列に型が設定されている場合は、きちんと型の情報を保持してくれます。
下記は今回元データとしたCSVファイルに対して、金額列を数値に書式設定した後にExcelファイルとして保存したものを`dt_家計簿_Excel`として読み取ったものです。
ウォッチパネルを使ってUiPath内でどのように読み取られているか直接確認してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/d2ca0169-c8ac-8e82-3f6a-fe752e3ef94a.png)
`3434`という数字がDataTable内で`Double`型になっており、`.ItemArray`で変換した後も型情報を保持している事が確認できました。

参考：[DataRow.ItemArrayについて](https://docs.microsoft.com/ja-jp/dotnet/api/system.data.datarow.itemarray?view=net-5.0)

###複数ファイルから値をまとめることもできます
説明の中では1ファイルを対象に絞り込むことだけを行いましたが、202101.csv、202102.csv、202103.csvを順に読み込んで、`dt_使いすぎ`に複数ファイル分のデータをまとめることもできます。
実際のロボット開発で使うケースでは、こちらのケースの方が多いかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545766/e1f595fe-796e-5681-a8c9-c6292a2c2ff8.png)


##まとめ
データ行を追加(Add Data Row)アクティビティで、あるDataTableの行を別のDataTableに追加したい時にエラーが起きてしまう場合は、`行データ(DataRow)`を`列配列(Object[])`に変換することでエラーを起こさず追加ができます。

##終わりに
メソッドを呼び出し(InvokeMethod)アクティビティは便利ですが、メソッド名の入力時に入力補完が出ないので慣れないうちは使うのが難しいアクティビティです。
今回記事にまとめようと思ったのは、そんな難しいアクティビティを使わずにできる方法を発見した驚きを共有したいと思ったからです。

「データテーブル間のデータのコピー」と言うのは自動化の中でよく使う処理になるので、開発中に誰しも躓いて検索するポイントなんじゃないかと、個人的に思っています。
この記事が、そんな誰かの助けになれば幸いです。
FreeBSD jail における mail 扱い

#この記事の扱いについて
ほとんどのユーザには役に立ちません。

#本文

FreeBSDにおける各種jail環境においてはメールの送信設定が不十分なことが多くアラート通知は他のサービスレベルのテレメトリで行われていることが多いが、ちょっとした設定で振り分けが容易な設定があるので記事としておく。

#sendmail.cf について

FreeBSDのsendmail.cf には受信もできるspool機能で、単なる送信であれば　<b>/etc/mail/submit.cf</b> に設定を行う。

##Dj　パラメータ　
サーバの所属するインターネットドメイン（メール受信が可能であること）を設定する
##DS　パラメータ
サーバの所属するローカルネットワーク上の　”SMARTHOST" すなわち送受信が可能になっているメールサーバを指定する。DNSで解決できる場合はホスト名、解決コストを節約するため　[IPaddress] を記述することもできる

# root アカウントについて
jail 環境でメールが送信されるとすれば、root権限で動いているプロセスが大半を占めるし、システムが送ってくるレポート類も　”Chalie root"  となりがちである。これは　UNIXのユーザパスワードDBに含まれている　GECOSフィールド（太古の昔にあったGECOS8との互換性を保つための項目）に由来するので、vipw などで修正しておくこと。

以上
拝啓〜データベースにIndex貼ってますか？〜

# はじめに
突然ですが、データベースにインデックスって貼ってますか？？
「なにそれ？」や「知ってるけど貼る方法が微妙。。」な人も、この記事で適切にインデックスを貼れるようになります！
知識を蓄えてデータの読み込み速度の上昇を目指しましょう！

# まず、インデックスとは？
特定のカラムからデータを取得する際に、テーブルの中の特定のカラムのデータを複製し検索が行いやすいようにしたもののことです。

例えでいうと、Userテーブルの名前データを参照したいと考えた場合、Usersテーブルのnameカラムにindexを張ってないと、プログラムはUserテーブルのnameカラムを上から順にみていくので対象データが一番下の場合とても時間がかかります。
それを解決するのがインデックスです！

## メリット and デメリット

- メリット
    - データの読み込み・取得が早くなる。
- デメリット
    - 書き込みの速度が倍かかる。

## どのカラムにインデックスを貼ればいいの？
データ量が多いテーブルの、格納される値がそれぞれ異なるようなカラムで、検索がよく行われるカラムに対して張るととても効果的です。
-例-
外部キー、よく検索に使われるカラム...etc

# インデックスの貼り方
1.`rails g migration add_index_テーブル名_カラム名`とし、migrationファイルを作成する。

```ruby

class AddIndexToテーブル名 < ActiveRecord::Migration
  def change
    add_index :テーブル名, カラム名
    add_index :テーブル名, [:カラム名1, :カラム名2, ・・・] # 複数カラムに貼る場合
    add_index :テーブル名, カラム名, unique: true # ユニークなインデックスを生成
    add_index :テーブル名, カラム名, length: 15 # インデックスの長さを15に指定して生成
    add_index :テーブル名, カラム名, name: 'index' # インデックス名をつけて生成
  end
end
```

※追加ではなく、最初のテーブル作成時にインデックスを貼る場合は、以下のようにする。

```ruby

class CreateHoges < ActiveRecord::Migration
	def change
		create_table :hoges do |t|
            # index: trueとする
			t.references :huga, index: true, foreign_key: true, null: false
			t.string :fuga, null: false		
			t.timestamps null: false
		end
	end
end
```

2.ファイル作成後、`rails db:migrate`を実行する。


## 複合インデックスというものもあります
１つのカラムだけにインデックスを貼ると、全てのカラムが一致するような検索結果を出すためには、一つ目のカラムで調べて、重複する中から２つ目のカラムで一致するものを調べて、と順々に調べる必要があります。
このような事態を防ぐため、複合インデックスを予め貼っておくと、高速で検索が可能になるという利点があります。

### 複合インデックスの特徴
複合インデックスは、「キーとして構成されているカラムの全てが検索条件に指定されていなくても、キーの先頭から途中までのカラムが指定されていれば、インデックスが使われる」という特徴があります。
インデックスで全ての情報を事細かく指定してしまうと、不必要な情報をも毎回検索してしまうので、 複合インデックスでの指定ではカラムの一部だけを指定すればよいことになります。

-例-
会社(companyテーブル)、姓(family_nameカラム)、名(personal_nameカラム)、誕生日(birthdayカラム)とあるとする。
会社(companyテーブル)の内容が90%がA社で,10%がB社といった情報量の少ない場合は、姓と名で複合インデックスを貼れば良い。

### 注意点
インデックス名は以下のルールに則って命名されます。
1.`index_テーブル名_on_〇〇`とする
2.単独のインデックスはカラム名を追加する
3.複合インデックスは、カラム名を`_and_`で連結する。

```ruby
# 単独インデックスの場合
add_index :customers, :family_name_kana
#=> "index_customers_on_family_name_kana"

# 複合インデックスの場合
add_index :customers, [ :family_name_kana, :given_name_kana ]
#=> "index_customers_on_family_name_kana_and_given_name_kana"

# 複合インデックスの場合(3つ以上)
add_index :customers, [ :birth_month, :family_name_kana, :given_name_kana ], name: "index_customers_on_birth_month_and_furigana"
#=> name属性を指定しないとエラーとなるため自分で命名する
```

# おわりに
ここまで説明されたら、0知識でも少しだけイメージが湧きましたでしょうか？
データが膨大になってくると、読み込み速度はとても重要です。
適切にインデックスを貼れるようにしておきましょう！！

# 参考
[データベースにindexを張る方法]
(https://qiita.com/seiya1121/items/fb074d727c6f40a55f22)

[Railsマイグレーションのindexの定義方法と対象について]
(https://kapi-travel.com/programing/rails%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AEindex%E3%81%AE%E5%AE%9A%E7%BE%A9%E6%96%B9%E6%B3%95%E3%81%A8%E5%AF%BE%E8%B1%A1%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/)

[Rails 複合インデックスの貼り方]
(https://openbook4.me/sections/621)
HTML DOM ベースのゲームエンジン作り

https://twitter.com/minigeml/status/1385812457214529546

[デモ：シューティングゲーム](https://minige.ml/domini-shooting/)
[Github](https://github.com/okamototomoyuki/domini-shooting)
良かったらプレイしてね

HTML の DOM ベースのゲームエンジン「Domini(仮)」を開発中。
ゲーム上の自機や弾はブラウザのデベロッパツールで見ていただけると DOM だとわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671642/61d66034-c97e-54ca-774d-0ad4404112d6.png)

#なぜ DOM ?
Web ベースのゲームエンジンのほとんどは、自由な描画のために Canvas を利用しています。
DOM を利用したゲームエンジンは全然見つかりません。
(唯一 [Crafty.js](https://craftyjs.com/) を見つけましたが、Canvas と DOM のハイブリット)

しかし HTML/CSS にも Transform など、ゲームに使える機能が多数あり、
DOM なら Canvas よりブラウザのデベロッパーツールでデバッグできる内容も多数です。

こんなにブラウザが進化して HTML/CSS がどんどん機能追加されるなら
ゲームに利用しない手はないです。

Domini(仮) では HTML のデフォルト機能に、ゲームに必要な要素を最小限だけ追加して
私が挫折しても Google/Mozilla/Apple/Facebook さん達が勝手に進化させてくれるゲームエンジン目指します。

# Domini(仮)の機能

* CSS の Transform をJS/TS側で制御
* 接触判定

デモでは UI は [Svelte](https://svelte.dev/) ですが、
依存性はないので、React や Vue でも使える予定です。

# 参考ゲームエンジン
|エンジン|説明|
|--|--|
|Unity|ご存じ一番人気。設計ほぼパクッてます。|
|[A-Frame](https://aframe.io/)|WebVR 用フレームワーク。HTML で VR を実装できます。<BR>「DOM でコンポーネント指向」の設計を参考にしてます|

# 今後
ロックマン的なゲームを作りたいですね。
そのために下記作ります。

* アセットエディタ。画面上でマウスでDOM置いて絵やステージなどを作る
* アニメーションエディタ

エンジン部分だけのリポジトリはのちほど。

# 余談
接触判定のために getBoundingClientRect を呼びまくって重たくなってます。
どうにか軽く方法無いかなと思ってたら Intersection Observer なんてものが最近はあるとな。
これで軽くできないかなぁ。
Formオブジェクトパターンを理解する③ActiveModel::Modelモジュールとは

ActiveModel::Modelを追加すると
-

ActiveModel::Modelを追加すると、Action PackやAction Viewと連携する機能をすぐに使えるようになります。ActiveModel::Modelをincludeすると、以下のような機能を使えるようになります。

モデル名の調査/変換/翻訳/バリデーション


ActionPackは何をしてくれるの
-

ブラウザからのリクエストを受け取って、それを処理して、レスポンスを返す。これがWeb アプリの基本。

（例）http://shop.com/store/add_cart/12 というURLにリクエストしたとしよう。
すると StoreControllerクラスのadd_cartメソッドが呼び出される。このときパラメータid=12 が一緒に渡される。

####・ActionPackの大事な仕事その1
add_cartはid=12に対応する商品をカート(買い物かご)に入れる。 そして、続けて買い物できるようにページを作ってレスポンスとして返す。 もちろん、そうなるようにadd_cartを書くことになるわけ。

このようにURLを解析してアクションメソッドを呼び出してレスポンスを返すことがActionPackの大事な仕事その1。

####・ActinPackの大事な仕事その2
ActionPack の大事な仕事その二はテンプレートを元にレスポンスを作ること。 

ActionViewは何をしてくれるの
-

####・ActionViewの大事な仕事
RailsではERBでHTMLテンプレートを書く。このテンプレートを書きやすくするのがActionViewの仕事。

>るびま　日本Rubyの会　Rubyist Magagie
>https://magazine.rubyist.net/articles/0008/0008-RubyOnRails.html