OmniAICreator/Qiita-1.07M huggingface dataset:
ポップアップウィンドウ（削除ボタン）

#はじめに
[前回](https://qiita.com/Moon1126Snow/items/d1191e3c96c46b24e574)表示に成功したポップアップウィンドウは、リロードしない限りその場に残ったままです。
これでは具合が悪いので、削除ボタンを実装したいと思います。
別ブログにて、書き直したものを公開中です。
[https://airesaies.com/2020/09/06/program008/](https://airesaies.com/2020/09/06/program008/)
#実行
前回までのコードは次の通りです。

```haml:sample.haml.html
.btn
  ボタン
.pop
```

```javascript:sample.js
$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window"></div>
   `
   $(".pop").append(html);
 })
});
```

おさらいすると、`let html`で宣言しているhtmlデータを、`.pop`の下に追加することになります。
まずは、このhtmlデータに、削除ボタンのコードを追加することにします。

```javascript:sample.js
$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window">
       <div class = "pop__window__delete-btn js-delete-btn"></div>
     </div>
   `
   $(".pop").append(html);
 })
});
```

classが`"pop__window__delete-btn js-delete-btn"`という風に、
`pop__window__delete-btn`
`js-delete-btn`
の2つを指定している事に注意です。

CSSも次のように編集します。

```sass:sample.scss
.pop{
  &__window{
    width: 500px;
    height: 500px;
    background-color: 500px;
    position: fixed; 
    top: 300px; 
    left: 300px;
    &__delete-btn{
      width:  50px;
      height: 50px;
      background-color: #FF0;
      color: #000;
      border: solid 1px #FFF;
      border-radius: 50%;
      margin: auto;
    }
  } 
}
```

こうすれば、表示されるポップアップウィンドウに、黄色い〇ボタンが追加されます。

次に、新しいJavaScriptの関数を追加します。

```javascript:sample.js
$(function(){
　（中略）
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 })
});
```
ここで、DOM要素が`js-delete-btn`になっている事に注意です。
appendメソッドで追加したhtml要素でJavaScriptを発火させる場合は、このようにクラスを指定する必要があります。

これで削除ボタンを押すと、表示されているポップアップウィンドウが消えるようになりました。
再び`.btn`を押すと、同じようにポップアップウィンドウが表示されます。

全体で下記のようなコードになります。

```javascript:sample.js
$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window">
       <div class = "pop__window__delete-btn js-delete-btn"></div>
     </div>
   `
   $(".pop").append(html);
 })
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 })
});
```
エラーについて　[Vue warn]:Property or method "name" is not defined on the instance but referenced during render.

```console
[Vue warn]: 
Property or method "name" is not defined on the instance but referenced during render. 
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 
See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
```
- 意味
    - 該当のプロパティまたはメソッドはインスタンスで定義されていないが、レンダリング中に参照されている
    - プロパティを初期化することにより、データオプションで、またはクラスベースのコンポーネントで、このプロパティがリアクティブであることを確認してください。
- 原因
    - `data`に`name`の初期値が定義されていないことが原因

- 修正

```vuejs
<script>
export default {
  // 省略
  data() {
    return {
      name: "",
      //　省略
  },
  // 省略
}
```
JOI本選2012-5 JOI国のお祭り事情 解説

JOI春合宿2019-Day1-1 Examination（問題は[こちら](https://www.ioi-jp.org/joi/2011/2012-ho-prob_and_sol/2012-ho.pdf#page=12),ジャッジは[こちら](https://atcoder.jp/contests/joi2012ho/tasks/joi2012ho5),解説は[こちら](https://www.ioi-jp.org/joi/2011/2012-ho-prob_and_sol/2012-ho-t5-review.pdf)）の解説です。
解法メモです。

# 問題概要
JOI国には $N$ 個の都市があり、$M$ 本の双方向に通行可能な道路で結ばれている。
このうち $K$ 個の都市でお祭りが開催されている。
$Q$ 個の都市のペア $S_i,T_i$ が与えられるので、$S_i$ から $T_i$ まで移動する経路のうち、お祭りまでの最短距離が最も大きくなるときの、その距離を求めよ。

# 考察
まず、お祭りが開催されている都市からダイクストラ法を行って、それぞれの都市から最寄りのお祭りまでの最短距離を求めておくと、処理が楽にできそうだと分かる。
お祭りから遠い順に通れる都市を追加していって、$S_i$ から $T_i$ まで通行可能になったら、その直前に追加した都市からお祭りまでの距離がクエリへの答えになる。
ここはUnion-Find木などを使えば簡単に判定できる。
これで計算量は $O(MQ)$ まで落とせたが、これではまだ遅い。
ここで、移動可能か否かは追加していく中のどこかで変わることを考えると、二分探索が可能である。
そこで、Parallel-Binary-Search（並列二分探索）を使うと、複数のクエリに対する二分探索を同時に行うことができ、道の長さの合計を $S$ として、全体計算量は $O((M+Q)log S)$ くらいになる。これで、高速にこの問題が解けた。

# 実装
そこまで重くない。ダイクストラとParallel-Binary-Search、Union-Findを書くだけ。
[提出リンク](https://atcoder.jp/contests/joi2012ho/submissions/10496912)

# 感想
こういう問題大好き。実装してて結構楽しい。
pyhtonの基礎のミュータブル、イミュータブル

## 対象
python初心者

## ことの発端
自分がミュータブルとイミュータブルをあまり認識しないままコーディングしていたが、改めてpythonではすべて参照渡しなのに、なんで数値が変わらないのかハテナになったため、サンプルコードを作ったという次第です。

## 環境
python3
windows10

## 参考サイト
https://www.javadrive.jp/python/userfunc/index3.html
とかを見ると、丁寧だけどなんか難しいと感じる場合は、以下のサンプルコードを実行してミュータブルとイミュータブルの違いを実感できると思われます。

## サンプルコード
``` python3
def change_int(n):
    n = n + 1


def change_str(s):
    s = s + "!"


def change_arr(arr):
    arr[1] = "z"


def main():
    n = 5
    change_int(n)
    print(n)     # 整数はimmutable（変更不可能）な型なので、呼び出し元の変数は元のまま

    s = "a"
    change_str(s)
    print(s)     # 文字列はimmutable（変更不可能）な型なので、呼び出し元の変数は元のまま

    arr = ["a", "b", "c"]
    change_arr(arr)
    print(arr)   # 配列はmutable（変更可能）なので、呼び出し元の変数は変わる


if __name__ == "__main__":
    main()

```

## 実行結果
5
a
['a', 'z', 'c']
## 感想
C言語あたりから入った私にとっては、値渡しか参照渡しかという視点でのみ見ていたので、ミュータブルかイミュータブルかで考えるという違いを再確認できました。
UNIX/LINUXでFTPのディレクトリを再起的に取得する

# UNIX/LINUXでFTPのディレクトリを再起的に取得する

ftpではできないので、wgetを使います

```
wget -r ftp://<USER>:<PASS>@<HOST>//<DIR>/
```

# 例
```
# HOST: ftp.exsample.com
# USER: admin
# PASS: pass
# DIR : /hoge/fuga
wget -r ftp://admin:pass@ftp.exsample.com//hoge/fuga/
```
export ENV by reading dotenv file by Shell command ( set -a; source .env; set +a; ) ( #Shell #Linux )

# Command

```
set -a; source .env; set +a;
```

# Example

```
echo "EXAMPLE1=ABC\nEXAMPLE2=DEF" >> .env

cat .env
EXAMPLE1=ABC
EXAMPLE2=DEF

env | grep EXAMPLE

set -a; source .env; set +a;

env | grep EXAMPLE
EXAMPLE1=ABC
EXAMPLE2=DEF
```


# Ref

```
NAME
    set - Set or unset values of shell options and positional parameters.

SYNOPSIS
    set [--abefhkmnptuvxBCHP] [-o option-name] [arg ...]

DESCRIPTION
    Set or unset values of shell options and positional parameters.
    
    Change the value of shell attributes and positional parameters, or
    display the names and values of shell variables.
    
    Options:
      -a  Mark variables which are modified or created for export.
```

http://linuxcommand.org/lc3_man_pages/seth.html

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3007








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Mysqlコマンドメモ

DBのデータを確認するためのコマンドメモ

#### dockerコンテナ起動

```console
docker-compose up
```

#### dockerコンテナの中に入る

```console
docker-compose exec db sh
```
#### sqlコマンドでDBに接続

```sql
# mysql
```
```sql
mysql> show databases;

+--------------------+
| Database           |
+--------------------+
| information_schema |
| nuxt-app           |
| mysql              |
+--------------------+
5 rows in set (0.00 sec)
```
### 使用するデータベースを選択

```sql
mysql> use <データベース名>;

Database changed
```

```sql
mysql> show tables;

+--------------------+
| Tables_in_nuxt-app |
+--------------------+
| users              |
| posts              |
| categories         |
| histories          |
| images             |
+--------------------+
10 rows in set (0.00 sec)
```
```sql
mysql> select * from users;

+----+--------------+------+---------------+
| id | organization | name | email         |
+----+--------------+------+---------------+
|  1 |         test | test | test@mail.com |
+----+--------------+------+---------------+
1 row in set (0.00 sec)
```

#### フォーマットを縦で見やすくしたいので`\G`を追記

```sql
mysql> select * from forms\G;

*************************** 1. row ***************************
             id: 1
   organization: test
           name: test
   notice_email: test@mail.com
1 row in set (0.01 sec)
```

### データの更新

```sql
mysql> UPDATE users SET name="hoge" WHERE id=1;

Query OK, 1 row affected (0.01 sec)
Rows matched: 1  Changed: 1  Warnings: 0
```

### データの削除

```sql
mysql> delete from users;

Query OK, {登録されていたデータの数} rows affected
```
C言語　簡略記法を身につけるためのfor文

できる人に質問したらこういう書き方で返答が返ってきた。
知っているfor文と違うので、解読してみる。

```c
for ( ; str != p && str != --p; ++str ) {
    char tmp = *str;
    *str = *p;
    *p = tmp;
}
```

for文の基本書式はこちら。コンパイラによるけど「；」が２個ないとダメだと理解すればOK。「；」によって何の式が書かれているのか、機械が理解している。

```c
for (<初期設定>; <継続条件> ; <再設定>) {
         <処理>
}
```


つまりforの書式の中では下記のように書かれている。

```c
// 初期設定
// なし

// 継続条件
str !=p;
// かつ
p = p - 1;
str !=p;

// 再設定
str = str + 1;
```

while文で書き換えてみる。
継続条件の中でインクリメントが使われているのが驚きだったけど、前回書いた、後置・前置インクリメントの記法の知識で理解できた。

```c
while(str !=p && str !=--p){
    char tmp = *str;
    *str = *p;
    *p = tmp;
    ++str;
}
```



###参考
C言語　インクリメント演算子を使用した簡略記法 - Qiita
https://qiita.com/Kchan_01/items/9e8c65926735db65c254

もう一度基礎からC言語 第8回 制御構造と変数(４)～forとwhileによる繰り返し（反復）処理 forによる繰り返しの構造
https://www.grapecity.com/developer/support/powernews/column/clang/008/page02.htm

for文の()内の初期化式、条件式、継続処理方法を書いたり書かなかったりするとどうなるでしょうか　モンスター数値さん、お久しぶりです　0.1 - 天国にいけるＣ言語入門　ヘキサ構造体 ver1.1620（@solarplexuss） - カクヨム
https://kakuyomu.jp/works/1177354054881541503/episodes/1177354054882548172
初回ログイン時にEdgeのショートカットを作って欲しくない！

#Edgeのショートカット作って欲しくないんだけど？
と、言われたのがそもそもの始まりでした。

色々調べてみた結果、出てきたのがコレ
https://social.technet.microsoft.com/wiki/contents/articles/51546.windows-10-build-1803-registry-tweak-to-disable-microsoft-edge-shortcut-creation-on-desktop.aspx

Windows10 1803時点でのお話なので、現行の1909でも問題ないか若干の疑問はありつつ
ポリシーの管理よりレジストリに以下項目を追加

キー:HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer

値の名前：DisableEdgeDesktopShortcutCreation

値の種類：REG_DWORD

値：1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117450/aef44965-93a1-80a1-71a6-cdc1a48537d0.png)

動確してみたところ、以下の組み合わせでは問題ありませんでした。
・Windows Server 2016
・Windows10 Pro 1909/1903

ぜひもっと簡単な方法があれば知りたい。
EdgeがChromiumベースになるし、この用途増えそうな気がするんだけどなぁ
MacにAWS SDK for C++をインストールする

AWS SDK for C++をインストールするために、先に下記をインストールする必要があります。

- cmake (homebrewを使ってインストールしたことを想定)
- aws-c-common
- aws-checksums
- aws-c-event-stream

# cmakeのインストール
homebrewを使うと簡単です。

```zsh
% brew install cmake
```

# aws-c-commonのインストール
ソースコードをgithubからcloneして、buildします。この時、-DCMAKE_PREFIX_PATHと-DCMAKE_INSTALL_PREFIXを指定しておかないと、aws-c-event-streamをbuildできないので注意してください。

```zsh
% git clone https://github.com/awslabs/aws-c-common
% cd aws-c-common
% mkdir build
% cd build
% cmake -DCMAKE_PREFIX_PATH=/usr/local/lib/cmake -DCMAKE_INSTALL_PREFIX=/usr/local/lib/cmake ../
% make
% make install
```

# aws-checksumsのインストール

```zsh
% git clone https://github.com/awslabs/aws-checksums
% cd aws-checksums
% mkdir build
% cd build
% cmake -DCMAKE_PREFIX_PATH=/usr/local/lib/cmake -DCMAKE_INSTALL_PREFIX=/usr/local/lib/cmake ../
% make
% make install
```

# aws-c-event-streamのインストール
これまでのcmakeで-DCMAKE_PREFIX_PATHと-DCMAKE_INSTALL_PREFIXを指定していないと、下記のようなエラーが出るので注意してください。

```:error_message
CMake Error at CMakeLists.txt:36 (include):
  include could not find load file:

    AwsCFlags


CMake Error at CMakeLists.txt:37 (include):
  include could not find load file:

    AwsSharedLibSetup


CMake Error at CMakeLists.txt:38 (include):
  include could not find load file:

    AwsSanitizers


CMake Error at CMakeLists.txt:74 (aws_set_common_properties):
  Unknown CMake command "aws_set_common_properties".


-- Configuring incomplete, errors occurred!
See also "/Users/yuya/opt/aws-c-event-stream/build/CMakeFiles/CMakeOutput.log".
```

実際のインストール方法はこちら

```zsh
% git clone https://github.com/awslabs/aws-c-event-stream
% cd aws-c-event-stream
% mkdir build
% cd build
% cmake -DCMAKE_PREFIX_PATH=/usr/local/lib/cmake -DCMAKE_INSTALL_PREFIX=/usr/local/lib/cmake ../
% make
% make install
```

# AWS SDK for C++のインストール
今回はS3関連でのみとするために、-DBUILD_ONLY="s3"をつけています。

```zsh
% git clone https://github.com/aws/aws-sdk-cpp
% cd aws-sdk-cpp
% mkdir build
% cd build
% cmake -DCMAKE_PREFIX_PATH=/usr/local/lib/cmake -DCMAKE_INSTALL_PREFIX=/usr/local/lib/cmake -DBUILD_ONLY="s3" ../
% make
% make install
```

# 参考
https://dev.classmethod.jp/cloud/aws/aws-sdk-for-cpp/
https://github.com/awslabs/aws-c-event-stream/issues/21
Ionic Androidのローカルプッシュ通知はアイコンの設定が必要だった（Capacitor）

#はじめに
IonicでCapacitorを使ったローカルプッシュ通知の概要は以下より:point_down:
[Ionic ローカルでプッシュ通知のテスト （Capacitor）](https://qiita.com/kokogento/items/89ed0973d21d71c7ee15)

iOSの場合は何もしなくても勝手に通知アイコンが設定されるが、**Androidでは少し設定が必要。**
ローカルプッシュ通知ではない、普通のプッシュ通知でもそれは同じ。:point_down:
[Android Push通知のアイコンを作成 ＋ 設定](https://qiita.com/kokogento/items/9e91075855779285e6ac)

もし設定していないとこんな感じになる

<img width="398" alt="スクリーンショット 2020-03-03 17.13.34.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/298a3d42-4ff6-7d29-c200-5f60dccdbf08.jpeg">

#前提条件
Android用のプッシュ通知アイコンを作成してあること。
詳しくは[Android Push通知のアイコンを作成 ＋ 設定](https://qiita.com/kokogento/items/9e91075855779285e6ac)を参考に。

#アイコンを設定

```typescript
LocalNotifications() {
    const date = new Date();
   // 1分後に通知
    const nextMoment = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate(),
      date.getHours(),
      date.getMinutes() + 1
    );

    LocalNotifications.schedule({
      notifications: [
        {
          title: 'Androidです',
          body: 'アイコンないんやけど！！',
          id: 1,
          schedule: { at: nextMoment },
          sound: null,
          attachments: null,
          actionTypeId: '',
          extra: null,
        // 追加
          smallIcon: 'res/drawable/push_icon_default'
        }
      ]
    });
  }
```

`smallIcon`プロパティを追加。
そしてアイコン画像へのパスを書くの。

<img width="584" alt="スクリーンショット 2020-03-03 17.44.55.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/33adebea-9f49-7681-33ab-f4243a39f5d6.jpeg">


[こちら](https://github.com/ionic-team/capacitor/pull/1830)より、パスは`app/src/main/res/drawable`以下のものでないと認識されないらしい。

これでAndroidのローカルプッシュ通知で、アイコンが適応される！
M5StickC(ESP32)にいちばん強いWifiに接続してほしい(WiFiMulti)


https://qiita.com/takeru@github/items/6d98158eb476b53ee7e9

WiFiMultiというクラスがありましたとさ。


```wifimulti.cpp

#include <Arduino.h>
#include <M5StickC.h>
#include <WiFi.h>
#include <WiFiMulti.h>

WiFiMulti wifiMulti;

#include "secret.h"

void setup() {
  M5.begin();
  wifiMulti.addAP(SSID1, PASSPHRASE1);
  wifiMulti.addAP(SSID2, PASSPHRASE2);
}

void loop() {
  M5.Lcd.setRotation(1);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(1);

  printf("WiFiMulti connecting...\n");
  M5.Lcd.printf("WiFiMulti connecting...\n");

  if(wifiMulti.run() == WL_CONNECTED) {
    printf("CONNECTED: ssid=%s localIP=%s\n", WiFi.SSID().c_str(), WiFi.localIP().toString().c_str());
    M5.Lcd.printf("ssid=%s\n", WiFi.SSID().c_str());
    M5.Lcd.printf("localIP=%s\n", WiFi.localIP().toString().c_str());
  }else{
    printf("failed\n");
    M5.Lcd.printf("failed\n");
  }
  WiFi.disconnect();
  printf("disconnected.\n");
  M5.Lcd.printf("disconnected.\n");
  delay(1000);
}
```
nmcli で ip アドレスを変更する

IP アドレスを固定にする際に nmcli を使用しますが、忘れがちなのと毎回検索するので備忘録として。
nmcli 面倒ですね直接ファイルに書けたほうが楽なんですが...
root で以下のコマンドを実行します。
インターフェースの名称は VirtualBox で作業しているためです。

```bash
# nmcli c m enp0s3 ipv4.method manual ipv4.addresses XXX.XXX.XXX.XXX/24 ipv4.gateway XXX.XXX.XXX.XXX ipv4.dns XXX.XXX.XXX.XXX
# nmcli c down enp0s3 && nmcli c up enp0s3
```
Terraform 0.12.x 特定のモジュール（リソース）を apply / plan する（公式ドキュメントとコマンドが違うやないかい）

###Terraformでファイルを変更して、ほかのリソースのアップデートまではしたくない場合に、[-target] オプションを使うと便利です。

Terraformのバージョンは下記のとおりです。
今回は、awsのサービスを利用したいため、プロバイダーはawsを使用しています。

```
Terraform> terraform -v
Terraform v0.12.18
+ provider.aws v2.51.0
```

ファイル構成は以下のようになっています。

```
Terraform  
 ├─main.tf
 ├─output.tf
 ├─provider.tf
 ├─terraform.tf
 ├─variables.tf
 └─modules/
     └─CodeBuild/
                ├─main.tf
                └─variables.tf 
```

テラフォームの`エントリーポイント`となっている Terraform/`main.tf` に必要なモジュールをまとめて定義していて、 CodeBuildについての設定内容を読み込むための処理をしています。

```terraform:main.tf
# CodeBuildのモジュール定義
module "CodeBuild" {
  source = "./modules/CodeBuild"
  account_id_number = data.aws_caller_identity.current.account_id 
}
```

今回は、CodeBuildに関しての設定を変更したので、このモジュールだけ更新したいと思います。

[#target-resource](https://www.terraform.io/docs/commands/plan.html#target-resource)(公式ドキュメント)を見ると

```
terraform plan -targert=resource
```
で特定のモジュールを指定すればいいと明記してあります。

リソースまでのパスの指定方法は
`module.A.module.B.module.C...` のように指定すればいいとあるので、

[module path] = `module.CodeBuild`

で大丈夫です。 と思って、コマンドを実行してみると、、、

```
$ terraform plan -target=module.CodeBuild
Usage: terraform plan [options] [DIR]

  Generates an execution plan for Terraform.

  This execution plan can be reviewed prior to running apply to get a
  sense for what Terraform will do. Optionally, the plan can be saved to
  a Terraform plan file, and apply can take this plan file to execute
  this plan exactly.

Options:
 ****
  -target=resource    Resource to target. Operation will be limited to this
                      resource and its dependencies. This flag can be used
                      multiple times.
 ****
```

オプションが認識されない！！！！！！
色々試してみた結果、下記コマンドで実行できました。
###結論、公式ドキュメントとはコマンドが変わっています。

```
$ terraform plan -target module.CodeBuild
```
(イコール記号 '=' を省いてオプションとリソースパスの間にスペースを入れる)

公式ドキュメントにも、コマンドヘルプにも違った案内のままなので早く修正してほしいですね。
テレワークに向けて覗き込み防止プロダクトを作りました。

![サムネ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178837/f294165b-d85d-840b-a01e-b870be2e716c.jpeg)
昨今のコロナウィルスの影響でテレワークの実施が余儀なくされているかと思いますが、中にはテレワークをしたいけど情報漏洩の担保ができず会社からテレワークの許可が出ないという状況の方も多いのではないかと思っています。

今回はそういった課題に対し少しでも貢献できないかと思い、情報漏洩のなかでも「PCの覗き見を防止すること」にフォーカスしたデモプロダクトを作成しました。

#概要
自分以外の人物がPCを覗き込もうとしたら画面全体にブラックスクリーンを表示して情報を隠します。また、覗き込もうとした人物を画像として記録します。

#ソースコード
少しでも早くコロナウィルスの脅威から解放されることを願ってソースは誰でもみれる形で公開することにしました。
https://github.com/kimuson/PeepBlocker

#Demo
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178837/bbd18962-3fab-1a42-3761-140097ce783a.gif)

#推奨環境
以下では動作確認済みです、Windowsはおそらく動くはず。。。
・mac OS Catalina
・python 3.6.5

#使用方法
ソースを任意の場所に保存してください。

```
$ git clone https://github.com/kimuson/PeepBlocker.git
```

実行に必要なモジュールをインストールしてください。

```
$ cd PeepBlocker
$ pip install -r requirements.txt
```

スクリプトを実行してください

```
$ python PeepBlocker.py
```

#後書き
言語はpython。画像認識はOpenCVを使用しています。またGUIの描画は今回時間もなかったのでtkinterで簡単に描画しました。

画像認識の精度としては、割と厳しく反応します。薄暗い場所で使用したりすると、一人なのにアラートが発生することがまれにあります。

明るい場所であれば比較的精度は良好です。また二人いるのに検知されないといったケースは私がテストした限りではありませんでした。どちらかというと一人なのに検知されてしまうことがまれに発生しますが、検知レベルが厳しいことにこしたことはないかなぁと個人的には思ってます。

今回のコロナウィルスが、少しでも早く事態が収束に向かうよう切に願っております。
C言語　インクリメント演算子を使用した簡略記法

プログラミングができる人に教えてもらうと、読めない書き方で返ってくることがある。簡略記法だ。
これをマスターすれば、他の人が書いたプログラムが読めるようになるので早めに身に着けて置きたい。


##インクリメント演算子（後置・前置）
デクリメント演算子も同様です。

```c
#include <stdio.h>
 
int main(void)
{
    /* 後置・前置インクリメント単体 */
    int a =1;
    int b =1;

    a++;
    ++b;

    printf("a=%d, b=%d\n\n", a,b);

    /* 後置インクリメント */
    int x = 2;
    int y;
 
    // xの値をyに格納し、xの値をインクリメントする
    y = x++;
    printf("後置 x++\nx=%d, y=%d\n\n", x,y);


    /* 前置インクリメント */
    x = 2;
    y = 0;

    // xの値をインクリメントし、yにxの値を格納
    y = ++x;
    printf("前置 ++x\nx=%d, y=%d\n", x,y);

    return 0;
}
```

結果

```terminal
a=2, b=2

後置 x++
x=3, y=2

前置 ++x
x=3, y=3
```


##おまけ

```c

#include <stdio.h>
 
int main(void)
{
    char a[] = "aiueo";

    int i = 0;
    while (a[++i]) printf("%c\n",a[i]);
    printf("%d\n", i);

    printf("==========\n");

    i = -1;
    while (a[++i]) printf("%c\n",a[i]);
    printf("%d\n", i);

    printf("==========\n");

    i = -1;
    while (a[i++]) printf("%c\n",a[i]);
    printf("%d\n", i);

    printf("==========\n");

    return 0;
}
```

結果

```terminal
i
u
e
o
5
==========
a
i
u
e
o
5
==========
a
i
u
e
o

6
==========
```



###参考
C言語入門 - （前置・後置）インクリメント演算子, ++ - Webkaru
https://webkaru.net/clang/increment/
自分のMinicondaの環境構築の備忘メモ

## 事の発端
Anacondaでもいいが、Minicondaでお客様のLAN環境(オンプレミス)でTensorFlowを起動させて処理することを考えている。
Minicondaをインストール後に、打ったコマンドを忘れてしまうので、備忘のためにここにメモ。

## 動作環境
Windows10
python version 3.6
Anaconda インストール済
Miniconda インストール済
PyCharm インストール済

## 事前操作
以下のリンクを参考にして下さい。
[久々にMinicondaを操作するときの道案内](https://qiita.com/hatorijobs/items/d0aef1a2824faabc5ee5)

## 以下、実行したコマンド

```
仮想環境を作成する
conda create -n [仮想環境名] python=3.6
  (注意1)
仮想環境に入る
conda activate [仮想環境名]
インストールされているライブラリを確認する
conda list
# 利用するライブラリをインストールする
conda install numpy
conda install pandas
conda install tensorflow
conda install keras
ttps://anaconda.org　でダウンロードサイトを調べる
conda install -c menpo opencv
  (注意2)
conda list
conda install -c conda-forge pdf2image
conda install -c brianjmcguirk pyocr
python -m pip install pyarmor
　(注意3)

conda install openpyxl       # excelを操作するパッケージを追加した
conda install pywin32
```
(注意1)
python=3.7だとtensorFlowのinstallでエラーになるので、python=3.6にするのが定石らしい。
(注意2)
-c conda-forge はチャンネルを指定している。

```
conda install -c conda-forge opencv
```
だと、以下の命令でエラーになる。

```
cv2.namedWindow("img", cv2.WINDOW_NORMAL)
```
なので、

```
conda install -c menpo opencv
```
とした。
(多くのサイトでconda-forgeが推奨されているが、自分の場合エラーが起きたので、menpoを使った。)
anaconda.orgで調べてから入れる方がよい。
(注意3)
anaconda.orgでpyarmorを調べても何も出てこないので、仕方なくpip install・・・。ただし、pip install pyarmorだと自分の場合、エラーになった。
具体的には、pyarmorで難読化しようとすると、
Fatal error in launcher: Unable to create process using
というエラーが出るので、これを回避するために、このようにやると良い。
参考）https://stackoverflow.com/questions/24627525/fatal-error-in-launcher-unable-to-create-process-using-c-program-files-x86
## 感想
これで、5ギガバイトになる。

## 追記）usbにあるMinicondaにパッケージを追加でinstallする方法
さらに、個人的なメモですが・・・。

```
# 動作させるMinicondaのPathに合わせて下さい。(自分の場合F：ドライブ)
# 今回は、usbにあるMinicondaに直接conda install したいということです。

C:\Users\[ユーザー名]>F:\Miniconda3\Scripts\activate.bat


(base) C:\Users\[ユーザー名]>conda activate test

(test) C:\Users\[ユーザー名]>conda info
    (念の為、確認する)

     active environment : test
    active env location : F:\Miniconda3\envs\test
            shell level : 2
       user config file : C:\Users\[ユーザー名]\.condarc
 populated config files : C:\Users\[ユーザー名]\.condarc
          conda version : 4.7.12


(test) C:\Users\[ユーザー名]>conda list
入れたいパッケージがlistに無いことを確認する


(test) C:\Users\[ユーザー名]>conda install keras
 
```
usbにすでにMinicondaがある場合、
5GBをusbに上書きするのか、このようにして追加するか、２択かと思います。
COGUDA_EXTENDEDCHAR_SUPPORTはどこに設定するのか

#はじめに

互換モードを使用している場合に設定が推奨されている、「COGUDA_EXTENDEDCHAR_SUPPORT=T」の設定ですが、どこに設定するのかガイドしてくれているものが少なく設定する際に困ることはないでしょうか。

#設定箇所
**COGUDA_EXTENDEDCHAR_SUPPORT環境変数はレポートサービスが稼働しているサーバー上で、Cognos起動ユーザーに対してセットする**

で、良いみたいです。

#注意点
動的クエリー・モードを使用する際には設定しないこと

#その他
CA 11.1でContent StoreをDb2で構築する場合のガイドからは記述が削除されています。
CA 11.1の場合は、Content StoreがOracleの場合に考慮すれば良さそうです。

CA 11.1 + Db2のガイド
https://www.ibm.com/support/knowledgecenter/ja/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.inst_cr_winux.doc/c_guidelines_db2_lux_content_store.html#guidelines_DB2_lux_content_store

CA 11.1 + Oracleのガイド
https://www.ibm.com/support/knowledgecenter/ja/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.inst_cr_winux.doc/c_guidelines_oracle_content_store.html

CA 11.0.13ではContent StoreにDb2を使用する際のガイドにも記載が残っているので設定しておいて良さそうです。

CA 11.0.13 + Db2のガイド
https://www.ibm.com/support/knowledgecenter/SSEP7J_11.0.0/com.ibm.swg.ba.cognos.inst_cr_winux.doc/c_guidelines_db2_lux_content_store.html
DjangoでModelの変更

データベースの定義を間違えたので
Models.py内のDateFieldをDurationFieldへ変えたところ、エラーが発生した。
そこで一からデータベースを作り直す方法をとった。
注.作成したUserや他のテーブルも消えるため要注意
注2.Django上でデータベースを変更する方法が絶対にあるはずなのでできればそちらを使う

##やったこと
1. migrationファイルの全消去
2. データベースの削除

## migrationファイルの削除
ファイル構造は以下とします。

```
$ls
 -project -app -migrations
               Lviews.pyなど
          Lmanage.py
          Lconfig - settings.pyなど
```

```
$cd [appへのパス]
$rm -d -r migrations/
```

## データベースの削除
sqliteの場合はsqliteファイルを削除
僕はPostgreSQLを使っていたので、PdAdmin4から直接データベースを削除して、同じ名前のデータベースを再度作りました。
redashで`Worker exited prematurely: signal 9 (SIGKILL)`が出た時の対処方

# 前提
AWSのEC2上起動
redash推奨のAMI使用
[Setting up a Redash Instance](https://redash.io/help/open-source/setup)

# 経緯
redashで少し結果セットが大きいSQLを設定したところ、以下のようなエラーが発生した。

```
Worker exited prematurely: signal 9 (SIGKILL)
```

redashのトラブルシューティングにエラーについて記載があったので確認
[Troubleshooting](https://redash.io/help/faq/troubleshooting)

EC2はt2.smallを選択していてメモリ2GIBしかないことから、メモリ不足ではないかと思い調査をした

# メモリ不足の調査

redashはDockerで動いていたため、`docker stats`でメモリ使用状況を確認した。
LIMITが1.945GiBとなっていたため、Dockerのメモリはすべて割り当てられていると想定。

```

CONTAINER ID        NAME                        CPU %               MEM USAGE / LIMIT     MEM %               NET I/O             BLOCK I/O           PIDS
1b402a43d63c        redash_nginx_1              0.01%               2.664MiB / 1.945GiB   0.13%               49.2MB / 17.7MB     280MB / 0B          2
21748bb6d284        redash_scheduled_worker_1   0.18%               190.2MiB / 1.945GiB   9.55%               88MB / 47.8MB       1.32GB / 0B         2
b0a705b2111c        redash_scheduler_1          2.19%               280MiB / 1.945GiB     14.05%              108MB / 62.9MB      2.07GB / 8.4MB      3
13ddb29d3e6f        redash_server_1             37.26%              487.9MiB / 1.945GiB   24.49%              39.8MB / 50.5MB     3.46GB / 1.97MB     5
8e2540af59fe        redash_postgres_1           0.01%               5.52MiB / 1.945GiB    0.28%               103MB / 34.7MB      2.15GB / 116MB      7
bc73e56ac9a2        redash_redis_1              1.84%               2.855MiB / 1.945GiB   0.14%               151MB / 275MB       3.98GB / 85.9MB     4
```

そこでインスタンスのスケールアップを検討したが、Swapfileを作成することをメンバから勧められた。

# swapfile の作成の仕方

swapfileとは
[https://wa3.i-3-i.info/word1722.html](スワップファイル (swap file))
>まぁ「スワップファイル」って単語が出てきたら「メモリの内容を一時的にしまっておくファイルなんだな～」と、お考えください。

ハードディスクを間借りしてメモリの内容を一時保存できる方法みたい。
そこでredashはubuntuであるため、以下サイトを参考にswapfileを作成してみた。

[Ubuntu Server 18.04 LTS スワップファイル設定](https://blog.masato.xyz/ubuntu-server-1804-lts-swapfile-setup)



※ハードディスクの容量を抑えつつ、推奨の2Gbよりも少なめの1GBで設定

```
sudo dd if=/dev/zero of=/var/swap/swap0 bs=1M count=1024
```
参考
[スワップ領域の目安](https://server.etutsplus.com/allocate-swap-space/)
[ブロックサイズについて](https://ameblo.jp/yukozutakeshizu/entry-12446349485.html)


※一応ubuntuのバージョンが18.04であることを確認。

```
root@ip-10-30-10-134:/home/ubuntu# cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.3 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.3 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
```


# 結果

再度redashでクエリを実行したら、遅くても頑張って結果を返してくれるようになりました。
勉強になった。


# 追記
2020/08/12

Swapfileがサーバの容量を圧迫してredashが使えなくなったので追記します。

Swapfileを削除すれば、一旦容量が空きます。
[SWAP ファイルを削除する](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/6/html/storage_administration_guide/swap-removing-file)

linuxの不要なパッケージファイルを削除する
[ [Redash]突然Internal Server Errorが発生](https://yuruli.info/redash-internal-server-error-in-running-environment/)
ideaVimで直前の変更箇所にジャンプする

## ideaVimとは
IntellijのIDEでVimの操作をエミューレートするプラグインです
https://github.com/JetBrains/ideavim

## Vimの場合
直前の変更箇所に戻る `g;`
直前の変更箇所に進む `g,`
のキーバインドが用意されていますが、ideaVimはデフォルトでこのキーバインドが用意されていません。

## ideaVimで[g;] [g,] を使う
`~/.ideavimrc`ファイルを作り、キーバインドを設定します。
`.ideavimrc`はideaVim用の設定ファイルで、`.vimrc`と同じフォーマットで設定を記述する事ができます。

``` :.ideavimrc
nnoremap g <Nop>
nnoremap g; :<C-u>action JumpToLastChange<CR>
nnoremap g, :<C-u>action JumpToNextChange<CR>
```

これでvimと同じように `g;`　`g,`で変更箇所へジャンプできるようになります。
量子コンピュータでイベントの開催を決める

# はじめに

最近は新型コロナウィルスの影響で、イベントを開催するかどうかの判断が難しくなっています。この記事を書いている僕も、実は部署の送別会を企図していました。そこで[IBM Q](https://www.ibm.com/quantum-computing/learn/what-is-ibm-q/)という量子コンピュータとそれをクラウド上から実行できる[IBM Q Experience](https://quantum-computing.ibm.com/)を利用して、量子ビットが持つ確率的な性質を利用してイベントのやるやらを決定しようと思いました。量子ビットは誰かの都合や建前を忖度しません。

# 準備

IBMのアカウントを取得して、[IBM Q Experience](https://quantum-computing.ibm.com/)へ移動すると、量子コンピュータを利用したい理由などいくつかの質問に解答すると使えるようになります。今回は送別会のやるやらを決めるために使いたいので、そのように書いておきます。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">“I am planning to our division&#39;s farewell party but considering a new corona virus infection I want to use a qubit to determine if the party will be held or not.” <a href="https://t.co/WFMxzXDleY">pic.twitter.com/WFMxzXDleY</a></p>&mdash; 吉村 優 / YOSHIMURA Yuu (@_yyu_) <a href="https://twitter.com/_yyu_/status/1234473945404858370?ref_src=twsrc%5Etfw">March 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

$$
\def\bra#1{\mathinner{\left\langle{#1}\right|}}
\def\ket#1{\mathinner{\left|{#1}\right\rangle}}
\def\braket#1#2{\mathinner{\left\langle{#1}\middle|#2\right\rangle}}
$$

# 回路づくり

IBM Q Experienceの画面でどんどん回路を作っていきます。といっても今回は$\frac{1}{2}$で`true`か`false`みたいな1bitが得られればいいので、次のような簡単な回路となります。

![circuit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10815/c1955fb2-efcf-4107-136e-bc40a28092de.png)

$\ket{0}$にアダマールゲート（$H$）をかけてからZ軸測定しているだけの超シンプルな回路となりました。

# エミュレーター実行

まずはこれをシミュレーターで実行してみます。回路を保存したら、画面上の`RUN`ボタンを押すと次のようにどういうバックエンドで実行するか？を選択する画面があらわれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10815/00beaac2-5fc0-d06d-8930-dcd24988cfed.png" width="60%"/>

このようにまずはシミュレーターにしておいて、実行回数はとりあえず`1024`にしておきます。

![nijef25p.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10815/72577611-d067-1b78-b480-d001750c3ae7.png)

こういう感じで結果が出ました。`0`と`1`がほぼ50:50で出ているので成功のようです。

# IBM Qで実行

いよいよ実機でやっていきます。同じ回路をIBM Qの`ibmq_16_melbourne`という実機に投入してみます。偏りがないか見たいので、1024回実行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10815/456eb0d5-3ad2-025d-c383-7b757933802e.png" width="60%"/>

![riw7hxivl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10815/2efde047-1297-cfa6-c8e1-ff841cd23da1.png)

偏ってますね……。`00000`と表示されていることからも、測定ができる量子ビットは5個ありそうなので、片っ端からやっていって一番50:50に近いやつを使うことにするべきなんでしょうか……。とりあえずもう1回実行したところ、もうちょっと50:50に近付きました。

![1ihyyrau.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10815/317667f5-00a8-6792-14c6-a0739fac30db.png)

まあ多少はヨシ！ということでこのまま最下位ビットを使う方針でいきます。

# 判定プロトコル

まああとは簡単に次のようにすればいいと思います。

1. Slackなどで「1ならやる、0ならやらない」といった1bitとやる・やらを対応させたものを公開する
2. 上記の量子回路をIBM Qで実行する
3. （2）の結果を（1）の対応と照合してやるやらを判定する

# まとめ

こういった状況であると、なんでも中止にしておいた方がいいのかな？という気分になります。個々の判断は尊重されるべきですが、信念を持った判断をしたいとも思います。量子コンピュータに判断を委ねるというのも、運まかせですが運にまかせるという1つの信念かもしれません。
また僕の企図していた送別会のやるやらは、決まり次第ここに追記します。

## 追記 3/25

**中止になってしまいましたー :innocent:**
JavaScriptで半角記号をGETメソッドで投げたらURLクエリパラメータが消失した話

## 概要
SpringBootの`@RestController`で作成した`@GetMapping`エンドポイントに対して
以下の様に`type: 'GET'`でクエリパラメータを送信したところ、
パラメータによってエンドポイント側でnull値で受け取る事象やエンドポイントに到達せずにエラーとなる（HTTP500エラーが返る）事象が発生。

~~~ javascript:個別処理
function test(param1, param2) {
    sendEndpoint(
        {
            type: 'GET',
            url: '/test1/get?param1=' + param1 + '&param2=' + param2,
            dataType: 'json',
        }, function(responseJson) {
            if(responseJson.error) {
                showError(param1, responseJson.errors);
            }
        }
    );
}
~~~

※ sendEndpoint()はAjaxでリクエストを投げコールバックを受け取る共通関数

## 原因
どうやらパーセントエンコーディング対象文字（`%`）やRFC2396での予約文字を渡してしまうと不具合が発生する模様。

#### 1. パラメータに'%'が含まれる場合  
⇒ リクエストパラメータが欠落してnullになる。  

#### 2. パラメータにRFC2396の予約文字（'|'や'\'など）が含まれる場合  
⇒ エンドポイントに到達せず、HTTP500エラーが返る。  

※ java.net.URIはRFC2396準拠の様です。

## 解決策

個別処理のURL部分をencodeURI関数で括る。
[参考：encodeURI() | JavaScript 日本語リファレンス](http://js.studio-kingdom.com/javascript/global/encode_uri)

~~~ javascript:個別処理
function test(param1, param2) {
    sendEndpoint(
        {
            type: 'GET',
            url: encodeURI('/test1/get?param1=' + param1 + '&param2=' + param2),
            dataType: 'json',
        }, function(responseJson) {
            if(responseJson.error) {
                showError(param1, responseJson.errors);
            }
        }
    );
}
~~~

## 最後に
もっといい感じに対応するのであれば
共通処理の方でGETメソッドかPOSTメソッドか判定取ってGETメソッドの時だけ適用する。（POSTは対応不要）のが良いかと思います。
SVGをCSSで背景画像に指定する

## 必要なもの
SVG形式の画像データ

## 手順
1. SVG画像をエディターで開き、コードを全てコピー


2. パーセントエンコーディング([変換ツール](https://tech-unlimited.com/urlencode.html))してurlに指定


3. 必要に応じて色や表示方法を調整

```scss:scss
//fill='%23<カラーコード>'を追記して色を調整。
//%23 = #
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg class='drawer__icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Ctitle%3Eframe%3C/title%3E%3Cg%3E%3Cpath fill='%23008ed6' d='M22.31,14.15c-2.13-3.86-6.93-8.07-8-11.43S12.73-1.16,9,2.7A34.71,34.71,0,0,0,.25,16.4c-.59,1.66-.13,5.68,1.25,7.74A12.39,12.39,0,0,0,9.6,30c2.19.45-5.89-4.67-.49-14.1,2.25-3.94,4.51-3.35,6.32,1.1,3.15,7.75-3.27,13,.73,11.8C26.74,25.75,24.17,17.52,22.31,14.15Z' /%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
```
Ionic ローカルプッシュ通知を毎月指定の日に出す（Capacitor）

#はじめに
ローカルプッシュ通知の出し方についてはこちら:point_down:
[Ionic ローカルでプッシュ通知のテスト （Capacitor）](https://qiita.com/kokogento/items/89ed0973d21d71c7ee15)

この記事ではローカルプッシュ通知を**毎月はじめの日に出す（3月1日とか）**

#javascriptのDateクラスを使おう
コード全文を見たい方は、「はじめに」で載せてあるリンクからお願いします。。


```typescript
LocalNotifications() {
    // システム日時の１日を取得する
    const date = new Date();
    const nextMonth = new Date(
       date.getFullYear(),
       date.getMonth() + 1,
       1
    );

    LocalNotifications.schedule({
      notifications: [
        {
          title: '今月もはじめりましたね！',
          body: '張り切っていきましょう！',
          id: 1,
          schedule: { at: nextMonth },
          sound: null,
          attachments: null,
          actionTypeId: '',
          extra: null
        }
      ]
    });
  }
```

#問題点
##setDate(1)は使えない
[こちら](https://www.yoheim.net/blog.php?q=20190701)で紹介されているやり方だと、残念ながらできません。。
`notifications `の中の`schedule`の値はDate型じゃないといけないようです。

##atはアプリが起動するたびにリセットされる
例えば下記の例だと、アプリを起動して1分後に通知が来る。
**しかし、アプリ起動中に1分ごとに通知が来たりはしない。**
おそらくこれは`at`だから。（もっとも1分おきの通知なら`every : minute`で事足りる訳だが、、）

```typescript
LocalNotifications() {
    const date = new Date();
   // 1分後
    const nextMoment = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate(),
      date.getHours(),
      date.getMinutes() + 1
    );

    LocalNotifications.schedule({
      notifications: [
        {
          title: '1分',
          body: '麺が硬いですね〜',
          id: 1,
          schedule: { at: nextMoment },
          sound: null,
          attachments: null,
          actionTypeId: '',
          extra: null
        }
      ]
    });
  }
```
つまり、月初に毎月通知を出そうとするなら、最低１回はアプリを起動してもらわないといけない事になる。。（恐らく！）

**`every : month`だと絶対に毎月1日！とか、指定できないっぽいので困りものである。。**

この辺の挙動については、ぜひご自身で実験してほしい。




#日付の指定で参考になるサイト
https://notepad-blog.com/content/133/

https://qiita.com/kazu56/items/cca24cfdca4553269cab#年週日時分秒ミリ秒の場合
MyBatis(Mapper XML)でオブジェクトをPostgreSQLにJSONとして格納する方法

# やりたいこと
Spring + Mybatis(Mapper XMLでSQL文を定義)なときに、ObjectをPostgreSQLにJSONB型として格納したい

# やり方
今回は2つ取り上げます。
## まず思いつく方法
Java側で一旦Stringにして、格納するSQL文の中でJSONBにキャストします。Object→Stringには`com.fasterxml.jackson.databind.ObjectMapper`を利用します。

```java:SQL呼び出す側
Object data = hoge(); //格納したいデータ
ObjectMapper mapper = new ObjectMapper();
String objectJSON = mapper.writeValueAsString(data)
sqlClient.insert(objectJSON)
```


```xml:MapperXML
<insert id="insert">
    insert into hogetable (data) values (#{objectJSON}::jsonb);
</insert>
```


ちゃんとStringがJSON形式になっていれば、格納されます。

### ちょっと気になること
これで動くといえば動くのですが、できればJava内ではオブジェクトのまま持っておきたいところです。わざわざ呼び出す側が、呼び出される側が使いやすいように整形するのは煩雑です。

そこで、あくまでJava側ではオブジェクトのまま保持しておき、**Mapper XMLの中でJSON形式に変換します。** そうすれば先程述べたような問題点は解決されます。

## ObjectMapperでの処理をMyBatis側にさせる方法
まず、Mapperのインターフェースを以下のように設計します。ポイントは、Mapper XMLの中で`com.fasterxml.jackson.databind.ObjectMapper.writeValueAsString`を実行させるために、`ObjectMapper`も引き受けるようにしているところです。

```java:Mapperのインターフェース
insert(@Param("objectMapper") ObjectMapper objectMapper, @Param("object") Object object);
```

呼び出す側は`ObjectMapper`と格納したいObjectを併せて渡すだけです。

```java:SQL呼び出す側
Object data = hoge(); //格納したいデータ
ObjectMapper mapper = new ObjectMapper();
sqlClient.insert(mapper, data)
```

また、Mapper XMLでは**bind式を利用します。**


```xml:MapperXML
<insert id="insert">
    <bind name="objectJSON" value="objectMapper.writeValueAsString(object)" />
    insert into hogetable (data) values ('${objectJSON}'::jsonb)
</insert>
```



bind式では、valueに書いた値がnameで指定した変数に代入されます。このとき、valueの中には値そのものだけではなく、**式を書くこともできます。**

その後のsql文では`${変数名}`で参照できます。ただし、`${変数名}`では、単なる置換にすぎないので、シングルクォーテーションで囲んで文字列(PostgreSQLではtext型)にしておく必要があります。また、本来は`${}`を使うべきではありません。単なる置換のせいで**SQLインジェクションに弱くなるからです。**

本当はそのあたりを解決してくれる`#{}`の方を使うべきなのですが、うまく参照できませんでした・・・。

### ちょっと気になること
結局の所、Object→StringのマッピングをJava側からMybatis側に移すことがこの記事の目的なので達成はしました。

しかしながら、呼び出す側でmapperを準備しているので、完全に処理を移譲したとは言えないと思います。もしまたMybatis側の処理内容に変更が加わった場合、Java側も変更しないといけません。変更に強いアーキテクチャーを実装しようとすると、**外部接続するものに依存したくはありません。**

その点では、Mybatis側でmapperを準備できればよいでしょう。呼び出される側でmapperを準備できれば、いよいよ呼び出す側はデータそのものを渡すだけすみます。その方法を発見できれば、またアップデートしようと思います。
Sassの使い方

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539333839392f31356633386139622d656162342d323136632d363332382d6638386366333637623663372e6a706567.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593899/4e201f07-3d6c-7c09-7a72-32a163a49dfe.jpeg)

#Sassを使う意味・メリット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593899/9d0c2ca0-25e1-89dc-0ff0-be018ed5774f.png)


#Sassの特徴

- cssを入れ子構造で考えることができる。
- 変数を使って、処理を一括でまとめられる（修正の時に非常にラク）
- @mixinという、関数（一連の処理のまとめ）のcss版を造ることができる。
- @mixinには引数もあり、そこに変数を代入することで、可能性∞
- jQueryでいうメソッド的なモノも存在する。

# 環境 : ExtensionsでLive Sass Compilerを追加


![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_574194_ea0607c0-cf55-13a0-78e9-bd8bf6cb0599.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593899/9b946ea2-014c-60ed-4a43-37d44c6bff5d.jpeg)


Sassは「ファイル名.scss」でそのままファイルにすればいいが、そのままだとhtmlに読み込むことができない。


読み込めるようにするには、コンパイルする必要がある。


vscodeの場合はプラグインで、「scss」→「css」に自動でコンパイルしファイルを生成することができる。


なので、スタイルシートの作業前にこの処理を行う。


htmlに紐づけることを見越して、scssファイルの名前で、cssとして読み込ませる記述をしておく。

※コンパイル : コンピューターが実行可能な形式に変換する事。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593899/ec92ab65-5745-48b5-46c5-050b61315ad1.png)
※コンパイルされている図


**ちなみに、打ち込んだscssはリアルタイムでcssにコンパイルされるので、一度設定すればOK:v:**
作業診断の前提と限界：作用・反作用と副作用

作業診断(Process Assessment)の前提と限界について、作用と副作用を題材に記録する。

作業診断には、いくつかの方法がある。

# 経験者による診断

経験のある方に見てもらって、意見をもらう。
存在するかもしれない課題に対する経験の網羅性と、経験者の方の感性と洞察力に依存する。

# 経験を体系化した模型による診断

診断模型(assessment model)は、経験を体系化したものが多い。
何かの理論に基づいているものは、危険性が高いかもしれない。


# 仮説を体系化した模型による診断

よい製品は、よい製造過程から生まれる。
よい製品は、よい設計に基づいている。
よい設計は、よい分析と対になっている。

いろんな仮説は、経験を抽象化して生まれる。
抽象化する過程で、制約条件を捨てていることがある。

仮説を体系化した模型が利用できるのは、
抽象的な記述から、制約条件を想定できる経験のある人だけ。

よい診断員は、どんな模型でも操れるというのは、経験者の共通認識かもしれない。

# 作用・反作用

物理現象、生命現象、社会現象では、作用に対する反作用の現れるまでの時間と確率が異なる。

物理現象では、作用に対して、反作用が存在することを前提としている。

生命現象では、作用に対して、その効果、反作用が現れるまでの時間に、早いものと遅いものとに分類して考えることがある。

社会現象では、他の作用の効果・反作用かどうかを分離することが困難な場合が多く、その効果・反作用が現れるまでの時間が遅いものは、相当膨大な事例がないと確認できないかもしれない。


# 文書履歴(document history)
ver. 0.01 初稿 2020303
ver. 0.02 URL追記　20230210

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
AWS: このSecurity Groupどこで使ってるっけ？を知る方法

AWSしばらく運用してると、
あれ？このSecurity Groupってどっかで使ってるんだっけ？ ってことありませんか。
自分はあります。
で、未使用のSecurity Groupを整理しようとして
あれでもSecurity Groupに関連するリソース一覧ってどうみるんだ？をよく忘れるのでメモ書き。

## 方法1： Security Groupを削除してみようとする

最初に教えてもらった方法。

なにかのインスタンス等に関連づいていると削除できない。

<img width="1015" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105558/eb71b49a-7a77-8fe5-a919-dd21a3247803.png">

何にも関連づいてないと、削除できる。

<img width="1015" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105558/31061efb-f235-f3cb-a5b5-fa0834f77d07.png">

削除前に教えてくれるのは親切設計。
でも、確認画面があるとはいえ、ただ現在の関連状況を知りたいだけで「削除する」メニューを選ぶのはちょっと怖い。

## 方法2： ネットワーク・インターフェース一覧を見る

たぶん本来的にはこちら。

<img width="1160" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105558/1f94aeb2-293d-0330-d9de-c4eede06f069.png">

インスタンスに紐付いていれば インスタンスIDでわかるし
RDS/ElastiCache/VPC Endpoitなども横断的に見れる。
Essential PhoneにAndroid 11 Developer Previewを焼いてみた。

#概要
EssentialのGitHubのリポジトリにROMがビルドできる状態で公開されており、Essential倒産後もAndroid 11のROMの対応をEssentialの人がしてくださっている。ビルドされたものが公開されており、今回はそれを焼いていきたいと思う。手順自体は簡単でRedditの記事やGitHubのリポジトリを参照するほうが正しいと思う。というかRedditに書いてある手順のそのまま。

実際に焼いた感想はこちら。
[Essential PhoneにAndroid 11 Developer Previewを焼いてみた。(note)](https://note.com/8blank71/n/n47e8216f9f53)

Reddit
[Android 11 GSI confirmed working on the PH-1 with today's vendor image release!](https://www.reddit.com/r/essential/comments/faozh8/android_11_gsi_confirmed_working_on_the_ph1_with/)

#準備
- adb、fastbootを使える環境を用意しておく。
- bootloaderをアンロックしておく。
- [vendor-QQ1A.200105.088.zip](https://www.essential.com/developer/current-builds)をDL。
- [gsi_gms_arm64-exp-RPP1.200123.016.A1-6209321.zip](https://developer.android.com/topic/generic-system-image/releases)をDL。 日本語のページにDLリンクが存在しなかったので英語に切り替える必要がある。
- [unsigned-new.img](https://gofile.io/?c=29W887)をDL。これはWi-Fiに接続できない問題があって、それを修正するためのイメージで有志の方が作成したもの。https://www.reddit.com/r/essential/comments/faozh8/comment/fizk5i1
- .zipのやつは解凍しておく。

#手順
- USBデバックを開発者オプションにてオンにする。
- bootloaderを起動（端末を起動するタイミングで音量+ボタンと電源ボタン長押しでも可）。

```
adb reboot bootloader
```

- vendor-QQ1A.200105.088.imgを焼く。Essential PhoneはA/Bパーティションな端末なのでAのパーティションを指定して焼く。

```
fastboot flash vendor_a vendor-QQ1A.200105.088.img
```

- gsiのフォルダの中のsystem.imgを焼く。

```
fastboot flash system_a system.img
```

- unsigned-new.imgを焼く。

```
fastboot flash boot_a unsigned-new.img
```

- userdataを消去、フォーマット。

```
fastboot erase userdata
```

```
fastboot format userdata
```

- 再起動。

```
fastboot set_active a
```

```
fastboot reboot
```

#終わりに
Android 11からStableなAndroid 10の公式のROMに戻すときは普通に https://www.essential.com/developer/current-builds から任意のOTAをDLしてリカバリーモードから`adb sideload <OTA.zip>`で可能だった。
C言語　配列とポインタのややこしいところ

##変数と配列の違い
###変数
char a = 123;

a　は　変数aの値(ここでは123）
&a　は　変数aのアドレス
を指します。

「&」は**メンバアクセス演算子**の中の**アドレス取得演算子**といってアドレスを表示してくれる演算子です。

参考: [メンバアクセス演算子 - cppreference.com](https://ja.cppreference.com/w/c/language/operator_member_access)

### 配列
char a[4] = "ABC";

a　は　配列aの先頭要素のアドレス
a[0]　は　a[0]の値（'A'）
a[1]　は　a[1]の値（'B'）
a[2]　は　a[2]の値（'C'）
a[3]　は　a[3]の値（'\0'）
を指します。

ここでややこしいのが、aとした場合、アドレスを指していること。

「`[]`」は演算子です。後で説明します。

###配列のaはあくまでアドレスを示すだけ。ポインタ変数になっているわけではない。
char a[4] = "ABC";と書いたとき、
aは先頭アドレスを示すが、ポインタ変数になっているわけではない。つまりaは&a[0]と同じ意味というだけである。
その証拠に下記のような書き方をするとエラーが出る。

```c
#include <stdio.h>

int main(void)
{
    char a[4] = "ABC";
    char *p = a;
    printf("%p\n", a);
    printf("%p\n", p);

    // ポインタをインクリメントさせる
    p++;
    printf("%p\n", p);

    // この書き方ではエラーになる。
    a++;
    printf("%p\n", a);
}
```

##[]の正体
[]は配列の要素番号を指定する演算子。
仕組みとしては、配列名というアドレスに足し算を行っているだけ。

int a[4];

と宣言した場合、
aの先頭アドレスが1000とすると
&a[0]は1000
&a[1]は1001
&a[2]は1002
&a[3]は1003
のように先頭のアドレスに番号の値だけ足し算を行う仕組みです。

※注意点
a[0]は通常編集モードなのでポインタとして扱うことは出来ないです。
また、&a[0]もアドレス演算子＆によって、アドレスを表示させているだけなので、ポインタ変数モードになっていないという点に注意です。

##配列における宣言時と数式の違い。
配列を宣言するときの[]は要素数を指定するための記号です。
配列の各要素を使うときに[]で番号指定するときの[]は先頭アドレスに足し算するための演算子です。


##まとめ
###配列とポインタは全くの別物
- 配列
    - 多数の変数を順番つけでまとめて扱う方法
- ポインタ
    - 変数のショートカットを作る方法

です。混同されがちなので気をつけてください。




###参考
配列とポインタ
http://www9.plala.or.jp/sgwr-t/c/sec10-2.html

配列とポインタの奇妙な関係 - 苦しんで覚えるC言語
https://9cguide.appspot.com/15-07.html
【pathの通し方】グローバルインストール先について

#はじめに
環境構築でよくはじめに色々なものをインストールしていると思います。そんな中、自分は毎回これはどこにインストールされているのだろうとモヤモヤしているのでググった結果をまとめておきます。
#開発環境
MacBook Pro
##【標準のインストール先】グローバルインストールパスがある。
例えば、**laravel** を使用する際に使う、**composer**　は
MacOSの場合だと、ホームディクトリの下の階層に設置するべき。

```terminal
$HOME/.composer/vendor/bin　←この位置に配置されていることが一般的
composer global about　←標準の位置に戻してくれるコマンド
```
##まとめ
標準の位置に配置してないがために、コマンド実行時にパスが通ってなくてエラーが出ることも何度か経験しました。だから今後から、インストール時に先のことも考えて取り組んでいきたいと思いました。
【rails】layoutメソッドについて考えよう！

どうも、ぜーたです。

今日はrailsのlayoutメソッドについて書きます。

#layoutメソッドとは

コントローラによってヘッダーやフッターのデザインを変更したり、読み込むCSSを切り替えるメソッドです。

実際のコードが下記になります。



```rails

posts_controller.rb
class PostsController < ApplicationController
  layout 'hogehoge'

  def index
    @posts = Post.includes(post_users: :users)
  end
end

```

###○上記のコードの場合

postsコントローラのアクションが呼び出された際の、レイアウトファイルとしてapp/views/layouts/hogehoge.htmlが使われるので、ビューファイルを指定できる。

###○上記のlayoutメソッドコードが無い場合
poatsコントローラのアクションが呼び出された際の、レイアウトファイルとしてapp/views/layouts/hogehoge.htmlがデフォルトで使われるようになる。


#layoutメソッドは、どんな時に使えそう？
まだ私は使ったことがありませんが、使い回しのヘッダーレイアウトやフッターレイアウトなどを作成し、何度も作成する際のテンプレートとして自分のメモに残しておけば、簡単にデザインを作成できそうです。

1枚のファイルに長いコードを書くと第３者から見ても分かりにくいので、そんな時はlayoutメソッドを使ってファイルを分けて作成すると良さそうですね^^


では今日はこの辺りで♪
[DB] ACID (transactions)

#What is ACID in computer science?


##Atomicity
原子性。
**全部実行、できない場合は全部実行されないことを保証する性質。**

お金の送金の時、
1. 送金元口座から１万円引く。
2. 送金先口座に１万円足す。
この二つの処理が必ず全部実行されることを保証する。

##Consistency
一貫性、整合性という。
**ルールを守る性質。**
送金前後で送金元口座の残高がマイナスになる場合は処理を中止する。

##Isolation
独立性。
**トランザクション中は他の操作から隠蔽される性質。**

トランザクション中、実際
送金元から１万円引いた状態が発生するが、
外部からはその途中の過程が観測されない。
送金前状態か、送金後の状態しか見れない。

##Durability
永続性。
**トランザクションが完了したらその状態が永続化される。**
システム障害があっても、そのデータは永続性記憶装置にログを記録して、システム異常が発生しても異常直前のデータに取り戻すことができる。
マスターにマージ済みのgit ブランチを一括削除する | Delete all master-merged git branches

下記コマンドで一括削除可能

```shell
git checkout master && git branch --merged | grep <検索キーワード> | xargs git branch -D
```

# 前提
`master`・`マスター`は自社ないしご自分の状況に応じて、適宜読み替えてください。

# git branch --merged
[doc](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E6%A9%9F%E8%83%BD-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%AE%E7%AE%A1%E7%90%86)

> 便利なオプション --merged と --no-merged を使うと、この一覧を絞り込んで、現在作業中のブランチにマージ済みのもの (あるいはそうでないもの) だけを表示することができます。 現在作業中のブランチにマージ済みのブランチを調べるには git branch --merged を実行します。

git branchは特に何もオプションを指定しないとローカルブランチの一覧を表示する。

今回は「不要なブランチ」を「一括削除」したいので、まずは不要なブランチをうまいこと取りたい。

ここでは「不要なブランチ」 = 「マスターにマージ済みのブランチ」とするので、`--merged`オプションで十分。

なお、上記引用文の通り、`git branch --merged`は<strong>現在作業中のブランチにマージ済みのもの</strong>を表示するため、このコマンドをマスター以外のブランチで実行すると、そのブランチにマージ済みのものが表示されるため、今回の目的にそぐわない。

そのため、必ず`git checkout master`してから`git branch --merged`する。

# grep
`git branch --merged`では現在のブランチも取得される。

ブランチ削除コマンドでは「今いるブランチ (= 上記の前提だとmaster)」は削除できないため問題ないっちゃ無いが、そもそも削除の対象に挙げてしまうのが気持ち悪い。

あと、マージ済みのブランチでも消したくないものが人によってはあるかもしれない。

ので、`grep`コマンドで絞り込む。

これは別に他のコマンドやら正規表現やらを使っても良いです。

# xargs git branch -D
grepで取得できたブランチ一覧を引数にして、`git branch -D` = ブランチ削除コマンドを実行する


# 結果
![スクリーンショット 2020-03-03 11.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207329/9161e6ec-2524-3601-3ec3-8bd2af079a95.png)
便利なIAMポリシー


＃

```ruby:東京リージョンのEC2リソースだけ操作可能
{
    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Action": "ec2:*",
        "Resource": "*",
        "Condition": {
            "StringEquals": {
                "aws:RequestedRegion": [
                    "ap-northeast-1"
                ]
            }
        }
    }
}
```
Railsの条件付きvalidationは注意が必要だと思った話

## Railsの条件付きvalidation
Railsでは、特定の条件のときのみvalidationをかけたい！ということができます。
https://railsguides.jp/active_record_validations.html#条件付きバリデーション

## 今回起こったできごと
条件付きvalidationを使った際に、かなり特定の部分の条件を指定してしまっていました。
イメージ的には「このステータスかつ、このフラグが立っているとき」みたいな・・・

時は流れて半年後。

**想定しているようにvalidationがかからない！！！**

処理の変更をした時にいつの間にかvalidationをかけるためのフラグをtrueにする部分を削除してしまっていました。

## 学んだこと
validationの条件として書くべき部分と、処理中で制御する部分が明確になるように、条件付きvalidationにする場合は

 - 確固たる条件がある場合
 - 処理に依存しないように書く

必要があるんじゃないかなと思いました。
だいたい、validationはmodelの上の方に書くと思いますし、後からコードを読んだり違う人がみる場合は見落としがちです。
→なんかvalidationかかるときとかからないときとあるぞ？🤔となる
いいね　をもらったら　加筆、訂正する方法

Qiitaに限らず、Facebook, Twitter, Mstdn, bookmeter, booklog, amazonなどで、いいねをもらったら、いいねをしてくださった方の興味を調べ、その方の観点で役立ちそうな話題を加筆したり、その観点からすると誤解されそうな記述を訂正したりしています。

忖度までは至りませんが、わざわざ　いいね　をしてくださった方に、なにか　いいね　と思ってもらえるお返しをしたい。

それを知ってか、まだ書きかけなのに、　いいね　をしてくださる方がおみえになり、書きかけの完成に対する圧力になっています。

残念なのは、amazonでは、誰がおしてくださったかがわからないこと。
Qiitaでは、以前はいいねをしてくださった方の一覧が出た。今は、直近の方の羅列がある。お知らせの一覧はあるが、押すと記事に飛んで、その方の頁には飛ばない。仕方なく、手打ちするしかない。

scriptを自分で描くしかない。関連記事である「いいね」タグの記事を順次拝読させていただきます。
ラズパイのChromiumでSpotify・Netflixを使う

![イラスト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287320/b9cf4e6f-b6ec-13b6-11e3-29712311def2.jpeg)
#1.はじめに
こんにちは、詩音です。今回は、題名の通りラズパイでSpotify・Netflixをつく方法にたどりつくまで、大変だったのでメモ程度で紹介していきます。
※**注意:今回のものは、Volumioを使うものではありません。RasbianのChromiumを使うものです。**
#2.方法
まず、なぜ再生できないのかというと、WideVine（DRM）プラグインが入っていないからです。
このプラグインはChrome・Firefox・Safari（x86/amd64）にしか対応していません。そのため、Armを使用しているRaspberryPiでは使用することができません。
しかし、Ventzさんが調べた結果、ChromeOSのユーザエージェントをChromiumに入れて、ChromeOSであるように思わせることで実現できるようです。

###1.libwidevineをダウンロード
```
$ sudo su
# cd /usr/lib/chromium-browser
# wget http://blog.vpetkov.net/wp-content/uploads/2019/09/libwidevinecdm.so_.zip
# unzip libwidevinecdm.so_.zip && chmod 755 libwidevinecdm.so
```
###2.Chromiumを終了します。
すべてのタブをとじてからRaspberryPiを再起動します。
###3.Chromiumに[User-Agent Switcher for Chrome](https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg)をインストールする。
ユーザーエージェントを切り替えるために使います。
###4.ユーザーエージェントの指定
入れた拡張機能のアイコンの上で右クリックして、「オプション」を選択してください。
「**New User-agent name**」に任意の名前を入れてください。
「**New User-Agent String**」には「**Mozilla/5.0 (X11; CrOS x86_64 11895.95.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36**」を入力してください。
「**Group**」は「**Chrome**」
###5.Spotify、Netflixを見る
ここまでくれば、Spotify、Netflixを使用することができます。お疲れさまでした。
#3.まとめ
今回は、RaspberrypiのChromiumでSptify、Netflixで使う方法を紹介しました。Raspberrypi4では、性能が上がったのでより快適に見ることができると思います。

#4.参考リンク
https://blog.vpetkov.net/2019/07/12/netflix-and-spotify-on-a-raspberry-pi-4-with-latest-default-chromium/