OmniAICreator/Qiita-1.07M huggingface dataset:
Apache2: Cookie の SameSite 属性、Secure属性を設定

こちらの記事と同様の事を行いました。
[Cookie の SameSite 属性、Secure属性を設定する](https://ex1.m-yabe.com/archives/4863)

site_a.com が iframe を使って、site_b.com の PHP を読み込んでいる状況を想定します。

site_a.com の html

```php:php_iframe.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Cookie</title>
</head>
<body>
<h2>IFRAME</h2>
<iframe height="0" id="iframe" src="https://site_b.com/cookie/te
st01.php" width="0"></iframe>
<hr />

Apr/30/2021 AM 09:24<br />
</body>
</html>
```

```php:test01.php
<?php
setcookie('river', 'Kinu', ['samesite' => 'Strict']);
setcookie('mountain', 'Tsukuba', ['samesite' => 'Lax']);
setcookie('lake', 'Biwa', ['samesite' => 'None', 'secure' => true]);
setcookie('island', 'Sado');
setcookie('peninsula', 'Izu');
?>
```

この状態で site_a.com にアクセスしても、site_b.com の lake 以外のクッキーは読み込まれません。
![cookie_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/30d63cdf-af35-64e5-23cf-4fa9a9e8b265.png)


そこで、site_b.com の Apache2 の設定を変更します。

Module の読み込み

```bash
sudo a2enmod headers
```

conf ファイルん変更

```text:/etc/apache2/sites-available/example.conf
<VirtualHost *:443>
        ServerName site_b.com
        DocumentRoot /var/www/html

Header edit Set-Cookie "^(?!.*(\s+|;)(?i)SameSite=)(.*)" "$0; SameSite=None; Secure"
（省略）
```

設定ファイルの確認

```bash
sudo apache2ctl configtest
```

Apache2 の再起動

```bash
sudo systemctl restart apache2
```

この状態で　site_a にアクセスすると、site_b の３つのクッキーが表示されます。
Chrome 89.0 の確認結果
![cookie_b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f61c0196-61bc-7c04-e5bd-217e2d4ceee2.png)
Flutterで行うTTS(Text To Speech)

---
# :book: Flutterの記事を整理し本にしました :book:
https://zenn.dev/kazutxt/books/flutter_practice_introduction

* <font color="red"><b>本稿の記事を含む様々な記事を体系的に整理し本にまとめました</b></font>
* 今後はこちらを最新化するため、<font color="red"><b>最新情報はこちらをご確認ください</b></font>
* 20万文字を超える超大作になっています!!

---

## まとめ記事
* [Flutter系の記事のまとめ](https://qiita.com/kazutxt/items/524acb1c134015682ccf)

# はじめに
スマートフォンの機能を使って、テキストを音声データに変換し、読み上げることができます。

# 事前準備

## パッケージインストール

```yaml:pubspec.yml
flutter_tts: ^3.0.0
```

# 実装
FlutterTtsを使って、文字を読み上げます。

```dart:main.dart
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  FlutterTts flutterTts = FlutterTts();
  String _speakText =
      "寿限無 寿限無 五劫の擦り切れ 海砂利水魚の 水行末 雲来末 風来末 食う寝る処に住む処 藪ら柑子の藪柑子 パイポパイポ パイポのシューリンガン シューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーの 長久命の長助";
  Future<void> _speak() async {
    await flutterTts.setLanguage("ja-JP");
    await flutterTts.setSpeechRate(1.0);
    await flutterTts.setVolume(1.0);
    await flutterTts.setPitch(1.0);
    await flutterTts.speak(_speakText);
  }
  Future<void> _stop() async {
    await flutterTts.stop();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_speakText',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton:
          Row(mainAxisAlignment: MainAxisAlignment.end, children: [
        FloatingActionButton(onPressed: _speak, child: Icon(Icons.play_arrow)),
        FloatingActionButton(onPressed: _stop, child: Icon(Icons.stop))
      ]),
    );
  }
}
```

Android,iOS,Webで利用できるメソッドが異なります。
上記はいずれのプラットフォームでも動きますが、詳細は[公式サイト](https://pub.dev/packages/flutter_tts)でご確認ください

`_speak`では、読み上げる音声の設定をした上で、最後に文字を渡して喋らせています

* flutterTts.setLanguage("ja-JP"); // 言語
* flutterTts.setSpeechRate(1.0); // 速度
* flutterTts.setVolume(1.0); // 音量
* flutterTts.setPitch(1.0); // ピッチ
* flutterTts.speak(_speakText); // しゃべる

`_stop`では、読み上げを止めます。

# 動作確認

![pic31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/53e83da3-f1f2-c375-7f83-a6e69d4e651f.png)


再生ボタンで読み上げ、停止ボタンで停止します。

なお、漢字が含まれる場合は、期待する読み方にならない場合があります。

```sh:result.sh
D/TTS     (17570): Utterance ID has started: 3090b15b-6777-4f74-853f-4d1e4ef0856b // 再生
D/TTS     (17570): Utterance ID has completed: 3090b15b-6777-4f74-853f-4d1e4ef0856b // 再生完了
```
【AWS】IAM Rolesとは？ざっくり解説します no.5

![AWS (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/0a8f2630-ab94-b256-8b31-8424b984441e.png)
こんにちは、まゆみです。

AWSについての記事をシリーズで書いています。

今回は第5回目になります。

今回の記事では、『IAM Roles』とは何かということに焦点を絞って書いていきます

IAM Roles については、シリーズ第2回目の記事でも、IAM Policy と比較しながら少し触れていますので、『IAM Policy』とは何なのか興味のある方は[こちら](https://qiita.com/Mayumi_Pythonista/items/c856437a2ab47779ed69#%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%E3%81%A8%E3%81%AF)から参考にどうぞ。


ではさっそく始めていきますね。

#IAM Roles とは？

以前の記事で、IAM Policyは、ある特定のユーザーもしくは特定のグループに所属する人に与えられるアクセス権限だと説明しました。


IAM Roles がIAM Policyと違う点は、<font color="Red">IAM Roles は、AWSのインスタンス(EC2のこと)などに対して付与されるものである</font>ことです。

![2021-04-30_084821.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/5001d036-2e16-f4a8-e1aa-350e4cb38729.png)
引用元：AWSコンソール

では、どんな時にIAM Roles が使われるのかという疑問がわいてくると思います

![スクリーンショット 2021-04-30 090253.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/496586d4-b11d-bebe-b5aa-892383ac955b.jpeg)
引用元：AWSコンソール

一般的にRolesが使われるのは、EC2もしくはLambdaに対してになります。

今回の記事では、Roles がEC2に対してどのような時に使われるのか見ていきましょう

例えばEC2からあるファイルを取りに、S3にアクセスしないといけないとします。(EC2とはバーチャルサーバーで、S3はストレージサービスになります)

そのような時に、特定のユーザーにアクセス権限を与えるPolicy ではなく、Rolesを与えることになります。

#まとめ

今回の記事は短いですが、ここで締めくくらせていただきます。

先ほど少し触れました、EC2やLambdaに関しては、また改めて記事を書いていきますね。

よろしくお願いします。<(_ _)>
【GW勉強】Rustの環境作り & Hello, World

##概要
Rustは何かまだわかってないですが、社内でこの単語が出てきたことがあり、気になっていました。この機会にhello,worldしておきます。


##環境
<dl><dt>OS: </dt><dd>macOS Catalina</dd>
<dt>Version:</dt><dd>10.15.6</dd><dl>

```terminal:terminal
$ cargo --version
cargo 1.51.0 (43b129a20 2021-03-16)

$ rustc -V
rustc 1.51.0 (2fd73fabe 2021-03-23)

$ rustup -V
rustup 1.23.1 (3df2264a9 2020-11-30)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.51.0 (2fd73fabe 2021-03-23)`

$ rustup show
Default host: x86_64-apple-darwin
rustup home:  /Users/xxx/.rustup

stable-x86_64-apple-darwin (default)
rustc 1.51.0 (2fd73fabe 2021-03-23)
```




##ステップ1: Rustの導入
https://www.rust-lang.org/tools/install

最初はこちらのページへアクセス。
結局のところ、
「curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh」
をターミナルで実行すれば良いらしい。

##ステップ2: Rust用のファイルを作成
hello.rsを作成する。※[公式サイトのhelloworld](https://doc.rust-lang.org/stable/rust-by-example/hello.html)から引用
※作業場所はどこでもよい。以降のステップは同じディレクトリで作業。

```Rust:hello.rs
fn main() {
  println!("Hello, World");
}
```

##ステップ3: Rustでコンパイル
Rustはコンパイルに、ステップ1の導入でインストールされた__rustc__を用いる。

```terminal:terminal
$ rustc hello.rs
```

すると、エラーが。

```terminal:terminal
error: linking with `cc` failed: exit code: 1
  |
  = note: 
　...
  = note: xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
error: aborting due to previous error
```


[StackOverFlowに投稿されている記事](https://stackoverflow.com/questions/53253483/can-not-compile-a-simple-rust-program)を拝見すると、つまり↓ということらしい。

>This is a very common problem on MacOS. You can fix it by typing `xcode-select --install` in terminal. It means developer tools are not installed.

ということで、下記を実行。XCodeのポップアップが出るので、インストールを進める。

```terminal:terminal
$ xcode-select --install
```

（これがinstallされていないってことは、Macでコード書いてないことがバレる・・・？）
CommandLineToolsがインストールされた後、もう一度Rustコンパイルコマンドを実行！正常にコンパイルされた！

##ステップ4: コンパイル後のバイナリファイルを実行

hello.rsをコンパイルすると`hello`というバイナリファイルが作成されるはずなので、そちらを実行する。下記をターミナルで。

```terminal:terminal
$ ./hello
Hello, World
```

##所感
何か新しい言語の学習を始めるのってこんなに簡単だったっけ？
Rust公式サイトのリファレンスとかも充実してるし、hello,worldから順を追って勉強できるように用意してくれていて、学習がしやすい印象でした。（Vue.jsの勉強したときも同じ印象だったな）

Rustの旨味ってなんだ？ってところまで学習が繋げられると、業務でも活かせると思うので、そこまで続くといいな・・・。
Bittle(OpenCat)のコマンドメモ

#はじめに
クラファンでBittleをゲッツしたので、動かす際のコマンドをメモとしてまとめた。

![Quick Camera Image 2021-04-29 at 3.10.49 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271381/a986b031-197b-3a43-b44e-56449f716fa6.png)


#BittleとOpenCatについて
- Petoi社について(https://www.petoi.com/)
- [Petoi Bittleのクラウドファンディングのページ](https://www.indiegogo.com/projects/bittle-a-palm-sized-robot-dog-for-stem-and-fun?fbclid=IwAR3AQKG8oYYzRyTljtfcNtidjSyRQoYBJVon0WeNsgqNWdTCuv4viq6YAlQ#/)
- IntroDuction(https://bittle.petoi.com/)
- OpenCat(https://github.com/PetoiCamp/OpenCat)

#通信方法
基本はNyBoard(白いボード)のTX/RXに結線し、UART通信でコマンドを渡す。ボードレートは115200bps、終端文字はなし（改行なし）に設定した。

今回は付属してきたPetoi USB Adapterで動作確認を実施したが、UART通信さえできれば基本何でも使えるはず。

#コマンドの書き方
- 方向を伴わない動作系

k+[動作]でコマンドが決まる。

| 動作 | コマンド |
|:-:|:-:|
| 各サーボの角度をゼロにする(調整につかう)  |  kzero |
| おすわり  | ksit  |
| 挨拶  | khi  |
| お尻を上げる(要調査) | kbuttUp (Uが大文字でないと動かないため注意)|
| 腕立て伏せ| kpu |
| 4足で立つ(バランス取り)  | kbalance  |
| 伏せ(サーボを緩める)  | krest  |
|  マーキング | kpee  |
| ステッピング(足踏み) | kvt |
| 伸びる | kstr |
|  ジャンプ・跳ね回る(bound) | kbd |

kがいらないものもあった。

| 動作 | コマンド |
|:-:|:-:|
| 見上げる | lu |
| チェック(通信の動作確認に使うのかな？下記が表示される) | c |

![ck.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271381/4a413967-4f2e-2df9-8c4c-8cc08758500d.png)


- 方向を伴う動作系

k+[二文字コマンド]+[方向:F/L/R]で決まる。

| 動作 | コマンド |
|:-:|:-:|
| 歩く(walk)  | kwk[F/L/R]  |
| 駆け足(trot)  | ktr[F/L/R]  |
| 匍匐(crawl)  | kcr[F/L/R]  |
|  走る(run) | krn[F/L/R]  |


他にもわかったら随時追加してみます。
NOT IN ('') の結果がOracleとPostgreSQLでは異なる


例えば、EMPLOYEES表のUSERIDの値が、NULLも空文字も含まないとき。
以下のSQLは、Oracleは0件、PostgreSQLは全件となる（SQL Serverも全件）。

```
SELECT
  USERID
FROM
  EMPLOYEES 
WHERE
  USERID NOT IN ('');
```
>Oracleでは自動的に空文字（""）を nullに変換しますが、PostgreSQLではnullに変換しません。
><a href="https://qiita.com/mkyz08/items/1b415063f62eb062cabd">OracleからPostgreSQLへの移行（#NULLと空文字の違い）</a>

より、
USERID NOT IN ('')が
PostgreSQLの場合、USERID != ''
Oracleの場合、USERID != NULL　※USERID IS NOT NULLでないので０件
となったと思われる。
Flutter Cardウィジェットの中の画像にBorderRadiusを適応する方法

#Cardウィジェットの中の画像、角が丸くならない！
![スクリーンショット 2021-04-30 8.20.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/4b005a99-3661-d328-80c5-80eaa3a9b21c.jpeg)

```dart
// 省略
 @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectMovie(context),
      splashColor: Theme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(10),
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        child: Row(
          children: <Widget>[
            if (posterPath != null)
              Image.network(
                'https://image.tmdb.org/t/p/w154/${posterPath}',
              ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(10),
                child: Column(
// 省略
```

こんな感じのCardウィジェットがあったとします。
Cardに`BorderRadius`をつけているのですが、**画像がない右側の角しか適応されていません！！！**

画像がある場合はどうすればいいのでしょうか？

#clipBehaviorを併用する
clipBehaviorがどんな役割を持っているのか？は正直詳しくはわかりません。。:sweat_smile:


```dart
// 省略
 @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectMovie(context),
      splashColor: Theme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(10),
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        clipBehavior: Clip.antiAliasWithSaveLayer, // 追加！！
        child: Row(
          children: <Widget>[
            if (posterPath != null)
              Image.network(
                'https://image.tmdb.org/t/p/w154/${posterPath}',
              ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(10),
                child: Column(
// 省略
```

![スクリーンショット 2021-04-30 8.20.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/a273dfac-9355-6cf9-1944-23b4554badfd.jpeg)

これで画像がある領域でも角が丸くなりました！

#参考
https://stackoverflow.com/questions/53267675/flutter-card-top-radius-is-covered-by-image
pythonでgnuradio その10

#概要

pythonでgnuradioやってみた。
FM変調を録音した、wavファイルを読んで、FM復調を聞く。
信号は、440ｈｚのサイン波、搬送波は、16KHZ。

#サンプルコード

```
from gnuradio import gr, blocks, analog
from gnuradio import audio
from gnuradio import filter

class my_top_block(gr.top_block):
	def __init__(self):
		gr.top_block.__init__(self)
		self.samp_rate = samp_rate = 32000
		self.hilbert_fc_0 = filter.hilbert_fc(65, filter.firdes.WIN_HAMMING, 6.76)
		self.dc_blocker_xx_0 = filter.dc_blocker_ff(32, True)
		self.blocks_wavfile_source_0 = blocks.wavfile_source('f5.wav', True)
		self.blocks_multiply_const_vxx_0 = blocks.multiply_const_vff((10, ))
		self.blocks_add_const_vxx_0 = blocks.add_const_vff((2, ))
		self.audio_sink_0 = audio.sink(samp_rate, '', True)
		self.analog_fm_demod_cf_0 = analog.fm_demod_cf(channel_rate = 32000, audio_decim = 1, deviation = 4000, audio_pass = 15000, audio_stop = 16000, gain = 1.0, tau = 75e-6, )
		self.connect((self.analog_fm_demod_cf_0, 0), (self.dc_blocker_xx_0, 0))
		self.connect((self.blocks_add_const_vxx_0, 0), (self.hilbert_fc_0, 0))
		self.connect((self.blocks_multiply_const_vxx_0, 0), (self.audio_sink_0, 0))
		self.connect((self.blocks_wavfile_source_0, 0), (self.blocks_add_const_vxx_0, 0))
		self.connect((self.dc_blocker_xx_0, 0), (self.blocks_multiply_const_vxx_0, 0))
		self.connect((self.hilbert_fc_0, 0), (self.analog_fm_demod_cf_0, 0))

if __name__ == '__main__':
	try:
		my_top_block().run()
	except KeyboardInterrupt:
		pass




```

以上。
pythonでgnuradio その9

#概要

pythonでgnuradioやってみた。
FM変調を録音。
信号は、440ｈｚのサイン波、搬送波は、16KHZ。

#サンプルコード

```
from gnuradio import gr, blocks, analog
from gnuradio import audio

class my_top_block(gr.top_block):
	def __init__(self):
		gr.top_block.__init__(self)
		self.samp_rate = samp_rate = 32000
		self.blocks_wavfile_sink_0 = blocks.wavfile_sink('f5.wav', 1, samp_rate, 8)
		self.blocks_vco_f_0 = blocks.vco_f(32000, 16000, 1)
		self.blocks_head_0 = blocks.head(gr.sizeof_float * 1, 64000)
		self.blocks_add_const_vxx_0 = blocks.add_const_vff((1, ))
		self.analog_sig_source_x_1 = analog.sig_source_f(samp_rate, analog.GR_COS_WAVE, 440, 0.3, 0)
		self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_const_vxx_0, 0))
		self.connect((self.blocks_add_const_vxx_0, 0), (self.blocks_vco_f_0, 0))
		self.connect((self.blocks_head_0, 0), (self.blocks_wavfile_sink_0, 0))
		self.connect((self.blocks_vco_f_0, 0), (self.blocks_head_0, 0))

if __name__ == '__main__':
	try:
		my_top_block().run()
	except KeyboardInterrupt:
		pass



```

以上。
docker pull rust をしたら「no matching manifest for windows/amd64 10.0.19042 in the manifest list entries」


## 私の環境

- windows 10 
- Docker for windows

## やろうとしたこと

`docker pull rust`を実行しようとしたら、以下のメッセージが表示されました。

```Powershell
> docker pull rust
Using default tag: latest
latest: Pulling from library/rust
no matching manifest for windows/amd64 10.0.19042 in the manifest list entries
```

## 解決方法

1. Dockerアイコンを右クリックして、Docker Settingsを開きます。
1. Docker Engineを選択し、`"experimental": false`をtrueに変更して反映する。
![docker_setting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711722/f7b3a9a8-f2a7-77fa-25e7-9bea97d682b8.png)
1. もう一度、`docker pull rust`を実行する。  

```Powershell
> docker images
REPOSITORY   TAG       IMAGE ID       CREATED       SIZE
rust         latest    5cbef0869ecb   2 weeks ago   1.32GB
```

## 参考

- https://stackoverflow.com/questions/48066994/docker-no-matching-manifest-for-windows-amd64-in-the-manifest-list-entries
docker/getting-started のドキュメントを編集してみる (MkDocs)

[docker/getting-started](https://github.com/docker/getting-started.git)は[MkDocs](https://www.mkdocs.org/)で作られている様子。

## getting-started の構成

* docs : ドキュメントが入っている
* docs/index.md : tutorial へのリダイレクト設定
* docs/tutorial/index.md : tutorial の内容
* app/src/static/index.html : .mdから.htmlに変換されたもの

```sh
cd getting-started
```

日本語検索 [参考](https://dev.classmethod.jp/articles/mkdocs-and-material-for-mkdocs-tips-matome/#search-by-japanese) [公式](https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-search/)

```diff:mkdocs.yml
  theme:
    name: material
-   language: en
+   language: ja

...

  extra:
    social:
      - type: github-alt
        link: https://github.com/docker/getting-started
+   search:
+     language: ja
```

```
docker-compose up
```

* http://localhost:8000 でリアルタイムに変更を確認できる。

```
# ビルド
docker build -t docker/getting-started .

# 起動
docker run -d -p 80:80 docker/getting-started
```

## 良いところ

* 空白を入れてもコードブロックとして認識してくれる。
* 幅の指定などができる

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/22d30a16-32bd-9bca-aca4-84be638ae8cb.png)


## 参考

https://zenn.dev/mebiusbox/articles/81d977a72cee01
【Jest】console.log()をmock化する方法2通り

jestで`console.log()`モック化する方法2通りと、それぞれ`console.log()`が2回呼び出されたことをテストするためのマッチャーを記す。

### 方法1

```ts
// モック化
global.console.log= jest.fn();
```
```ts
// マッチャー
expect(global.console.log).toHaveBeenCalledTimes(2);
```
さらにglobal.は省略してもよさそう

```ts
// モック化
console.error = jest.fn();
```
```ts
// マッチャー
expect(console.log).toHaveBeenCalledTimes(2);
```

### 方法2

```ts
// モック化
const spyConsoleLog = jest.spyOn(global.console, "log").mockImplementation();
```

```ts
// マッチャー
expect(spyConsoleLog).toHaveBeenCalledTimes(2);
```
JavaScript: 軽量、無依存で、画面上で小窓たちを扱えるWinBox.js 

## WinBox.js 

https://nextapps-de.github.io/winbox/

> モダンなWeb用ウィンドウマネージャ：軽量、優れたパフォーマンス、依存関係なし、完全にカスタマイズ可能、オープンソース

(公式説明をDeepL翻訳) だというWinBoxというjs、まだ若いもののようだが触ってみた。

![winbox.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/57784236-3ada-f571-fb5b-595f0e7ed911.gif)

GitHub: https://github.com/nextapps-de/winbox

例えばURLセットして開くならこれだけ。

```js
var winbox = new WinBox("Custom Color and Open URL");
winbox.setBackground("#ff005d");
winbox.setUrl("https://e99h2121.github.io/")

```

こんな雑なこともできる。

```js
var winbox = new WinBox("Custom Color and Open URL");
winbox.setBackground("#ff005d");
winbox.body.innerHTML = "<h1>HTMLを入れられる。</h1><h2>世の中には、</h2><h3>便利なものを作る人がいますね..</h3>";

```

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="js,result" data-user="kachibito" data-slug-hash="GRrzXoo" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GRrzXoo">
  <span>See the Pen <a href="https://codepen.io/kachibito/pen/GRrzXoo">
  GRrzXoo</a> by kachibito (<a href="https://codepen.io/kachibito">@kachibito</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



<p class="codepen" data-height="565" data-theme-id="light" data-default-tab="result" data-user="e99h2121" data-slug-hash="rNjgWmo" style="height: 565px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Trying Winbox">
  <span>See the Pen <a href="https://codepen.io/e99h2121/pen/rNjgWmo">
  Trying Winbox</a> by YAMADA Nobuko (<a href="https://codepen.io/e99h2121">@e99h2121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 参考記事

http://kachibito.net/useful-resource/winbox-js

見栄えが超簡単に楽しくなった。
以上簡単なメモですが参考になればさいわいです。
VSCode を使って Go のデバッガーが動くまでの設定をした

自分用メモです。
ハマった所を記載します。

基本的には以下の記事に沿う形で出来ました。

[Visual Studio CodeでGo言語のデバッグ環境を整える](https://qiita.com/momotaro98/items/7fbcad57a9d8488fe999)

なお、Go は初心者となり、正確ではない記述などもあるかもしれません。

# 環境

+ macOS Catalina
+ Go 1.16.3
+ VS Code 1.55.2
+ `$GOPATH` を設定済み
+ `$GOPATH/bin` を環境変数 `$PATH` へ追加済み

# 経緯

以下をやろうとしていました。

[Goで覗くシステムプログラミングの世界](https://ascii.jp/elem/000/001/234/1234843/)

上記では IntelliJ IDEA Community版を使って Go のデバッガーを動かしています。

ただし、現状で以下の比較表を見ると IntelliJ IDEA Community版では Go 言語は使えなさそうでした。

[IntelliJ IDEA](https://www.jetbrains.com/ja-jp/idea/features/editions_comparison_matrix.html)

その為、VS Code で同じ環境を作ることを目標としました。

# ハマったポイント

## go get が失敗する

以下のようなエラーで `go get`が失敗。

```
$go get github.com/golang/example/hello: module github.com/golang/example/hello: Get "https://proxy.golang.org/github.com/golang/example/hello/@v/list": x509: certificate is valid for xxxxxx, not proxy.golang.org
```

これは理由を調べると事象が発生した該当環境で `proxy.golang.org` がブロックされていたことが原因でした。

これについては `proxy.golang.org` を利用しないように以下のコマンドを実行すれば事象が回避できました。

```
# 設定を上書き
$go env -w GOPROXY=direct

# 確認
$go env |grep GOPROXY
GOPROXY="direct"
```

これは環境依存の問題なので多くの場合は事象は発生しなさそうです。

## VS Code から Go を実行すると失敗する

HelloWorld 用のファイルを作成。

```hello.go
package main
import "fmt"
func main() {
    fmt.Println("hello world")
}
```

Terminal からは成功

```
$go run hello.go
hello world
```

ただし、当該ファイルを VS Code で開いて VS Code 上の「Run and Debug」から実行すると以下のエラーとなる。

```
go: go.mod file not found in current directory or any parent directory; see 'go help modules'
exit status 1
Process exiting with code: 1
```

`launch.json` を設定すればうまくいくのかもしれませんが、以下あたりを見つつ、やってみたものの、うまくいきませんでした。

[golang/vscode-go](https://github.com/golang/vscode-go/blob/master/docs/debugging.md)

エラーを改めて見ると `go.mod` がない、ということでこのキーワードを元に調査。

[Go Modulesとマルチモジュール構成でGo Homeする方法](https://qiita.com/hinastory/items/336c2d944fdb8ae11efb)

上記記事を参考にやってみた所、成功。

まずは Terminal で以下を実施。

```
# ディレクトリ作成
$mkdir hello-module

# 移動
$cd hello-module

# カレントディレクトリに go.mod を作る
$go mod init hello-module
$ls
go.mod

# こんなことが書いてある
$cat go.mod
module hello-module

go 1.16

# helloworld を書く
$vi hello.go

# Terminal 上で動くことを確認
$ go run hello.go
hello world
```

その後、VS Code で上記フォルダ(今回の場合 `hello-module`) を開いて同じように「「Run and Debug」を実行した所、無事「hello world」の出力を確認。

また、ブレークポイントを設定することでデバッグなども出来る事を併せて確認。

![go.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20193/bb69c118-8097-78f6-18f7-9e21e4f4427e.png)


以下などを見るとモジュール対応モードになっていることが影響しているかもしれませんが、動いたので一旦これ以上の調査は保留。

[Go のモジュール管理【バージョン 1.16 改訂版】](https://zenn.dev/spiegel/articles/20210223-go-module-aware-mode)
React入門 - Tips1 - アロー関数

# 目次
[React入門](https://qiita.com/yokowake12345/items/0919ad144cbc4684e64e)

# 概要
アローとは、英語でarrow。つまり矢印ですね。
これまでのfunctionの書き方とのメリデメについては言及しません。。

これまでの書き方は、下記の１と２みたいな感じでしょうか。

```typescript
// function書き方１
function test(x) {
  return x + 1;
} 

// function書き方２
const test = function(x) {
    return x + 1;
}
```

アロー関数での書き方

```typescript
// arrow function  引数なし (かっこがいる)
const test = () => 1; // 出力の式が一行の場合はreturnは不要
// こういうことか
const test = () => {
  return 1;
} 

// arrow function 引数1つ (かっこいらない)
const test = x => x + 1; 
// これもこういうことですね。
const test = (x) => {
  return x + 1;
} 

// arrow function 引数2つ以上 (かっこいる)
const test = (x, y) => x + y + 1;
// これも書いておきます。
const test = (x, y) => {
  return x + y + 1;
}
```

# まとめ

- 先頭で変数を定義する(const(定数)かlet(変数))
- () => {} の形で書く
- 引数が1つなら()も不要 (引数0なら()は必要)
- 出力が1行なら{}も不要
- 出力が1行ならreturnも不要

<font color="red">※アロー関数で書くのが今は主流のようです。</font>
React入門 - Tips2 - JSXとは

# 目次
[React入門](https://qiita.com/yokowake12345/items/0919ad144cbc4684e64e)

# JSXとは
- JavaScript XMLの略です。
- JSXはJavaScriptの拡張構文です。
- テンプレート言語に似ていますが、完全にJavaScriptだけで動作します。
- JSXは、“React 要素” と呼ばれるプレーンなJavaScriptオブジェクトを返す、React.createElement() のコールにコンパイルされます。

ということらしいです。
私は、ふんわりとしか理解していません。

# JSXの記述を見てみよう

こんな感じです。

```typescript
import React, {useState, useLayoutEffect} from 'react';

export const JsxTest: React.FC = () => {

    /** これがJSXということらしいです！ */
    const jsxComp = <>
                        <div>あいうえお</div>
                        <div>かきくけこ</div>
                    </>;

    /** レンダー部分 */
    return (
        jsxComp
    );
};

export default JsxTest;
```

以下のように、表示されたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/45742b82-9269-21f9-9e88-23f2f6442f58.png)

この部分です。変数にHTMLタグ的なやつをぶち込んでますね。
そういうことらしいです。

```typescript
    const jsxComp = <>
                        <div>あいうえお</div>
                        <div>かきくけこ</div>
                    </>;
```

ちなみに、以下はダメです。
結果的に一つの要素を返さないといけないようです。

```typescript
    const jsxComp = <div>あいうえお</div>
                    <div>かきくけこ</div>;
```

あと、jsxCompのタグの中に変数を反映させる場合は、
以下のように記述します。
波括弧で括ります。

```typescript
    /** これがJSXということらしいです！ */
    const msg1 = 'あいうえお';
    const msg2 = 'かきくけこ';
    const jsxComp = <>
                        <div>{msg1}</div>
                        <div>{msg2}</div>
                    </>;
```

以上
「#安倍やめろ」「#〇〇に反対します」など意味のわからないTwitterトレンドを綺麗にするスクリプト

夜になると `#安倍やめろ` `#〇〇法案に反対します` `#東京五輪の中止を求めます` などの政治的な発言をハッシュタグに付けてトレンドに入れる遊びをしている方々がたくさんいて非常にうざい。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7132/4e681993-6726-edb0-c6c2-a728de75a9c8.png" width="300">

個人的にはわざわざTwitterのトレンドを見に行くようなことはしないが、サイドに出てくるのはどうしても目に入ってきてしまうので、こいつらを非表示にしていきます。


## ハッシュタグのパターン
いくつかのユーザーを調べてみた結果、
`#〇〇〇〇〇〇ます` ってパターンのハッシュタグを消せば８割方いけそう。

「#」から始まって、「ます」で終わる文字列を正規表現にするとこんな感じ。
 `/^#.+ます$/`

```js
const ngList = [
    /^#.+ます$/,
    '#安倍やめろ',
    'オリンピック',
];
```

後からでも追加できるように配列形式にしました。


## TwitterのDOM取得
idやclassに振られている名前はデプロイ時に生成されている系っぽく簡単に変わってしまいそうなので、
一番変更が少なそうな `aria-label` を使わせてもらいます。
アクセシビリティに配慮しているページはこういうときにも便利
`document.querySelectorAll('[aria-label="タイムライン: トレンド"] > div > div')`


目当ての要素を探しだした後、最初は
`element.remove();` でDOMごと削除してしまったら、モジュールの更新時にエラーになってしまったので、
`element.style.display = 'none';` という感じで非表示対応にしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7132/ccf6b14c-1e04-280d-db75-a41c2ce92622.png" width="300">



## 完成形

```js:removeTrend.js
(() => {
  const ngList = [
    /^#.+ます$/,
    '#安倍やめろ',
    'オリンピック',
  ];

  setInterval(() => {
    document.querySelectorAll('[aria-label="タイムライン: トレンド"] > div > div').forEach((element) => {
      const tag = element.querySelector('[dir="ltr"]');
      if (!tag) {
        return;
      }

      ngList.forEach((ng) => {
        if (tag.textContent.match(ng)) {
          element.style.display = 'none';
        }
      });
    });
  }, 500);
})();
```


ちゃんと消えた。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7132/bcfc749f-5b9c-6c76-492b-a3e8d29b05c5.png" width="300">



## Chrome Extension 化

Google Chromeの機能拡張として読み込ませる。
`manifest.json` を作成して [chrome://extensions](chrome://extensions) のページから追加します。


```json:manifest.json
{
    "manifest_version": 2,
    "name": "remove trend",
    "version": "1.0",
    "description": "my extension",
    "icons": {
        "86": "images/icon.png"
    },
    "content_scripts": [
        {
            "matches": [
                "https://twitter.com/*"
            ],
            "js": [
                "removeTrend.js"
            ]
        }
    ]
}
```

これで `twitter.com` を開いたときに常にスクリプトが実行されるようになります。
[Rails]collection_selectでクラスやイベント属性が設定できない時

今回は下記を参考にさせていただきました。

https://qiita.com/ohnitakahiro/items/c536fe65e37980e1087e

Railsでcollection_selectを使ってセレクトボックスを作ろうとしたところclassやJavascriptのイベント属性が反映されなかったので解決しました。
[公式ドキュメント](https://railsdoc.com/page/collection_select)には一切説明がなかったので戸惑いました。
参考にさせていただいた記事に感謝の意を申し上げます。


##結論

```
<%= f.collection_select(:continent, Continent.all, :id, :name ,{prompt: "方面を選択してください"},{:onchange => "select_country($(this).val())",class: "form-control col-sm-6"})%>
```
上記のように第５引数にだけ`prompt`を記述し第６引数には`onchange`と`class`をを記述します。それぞれ`{}`で囲えば設定することができます。
Dockerfileでシンボリックリンクなファイル/ディレクトリをCOPYする


# TL;DR

```sh
tar -ch . | docker build -
```

[GitHubにサンプル置きました。](https://github.com/kenichi-ogawa-1988/docker-build-symlink)

# 前提

以下のディレクトリ構造とします。

```
.
├── common
│   └── print_with_time.py
└── hello-world
    ├── Dockerfile
    └── src
        ├── __init__.py
        ├── app.py
        └── common -> ../../common
```

```dockerfile:hello-world/Dockerfile
FROM python:3-alpine

RUN mkdir -p /app

COPY src /app/src
COPY src/common /app/src  # ← src/commonはシンボリックリンク

WORKDIR /app

CMD ["python", "-m", "src.app"]
```

# 通常通りの `docker build` コマンド

エラーになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143240/501b5da9-abad-a71b-2916-251926e01fe7.png)

# 解決方法

コマンドを少し工夫して、シンボリックリンクをfollowして [^1] 作成されたtarボールをdockerコマンドに渡します。
最後の `-` を忘れるとエラーになります。（stdinからのビルドと認識させるためです）

```sh
tar -ch . | docker build -t docker-build-symlink -
```

（[ここ](https://superuser.com/a/842705)を参考にしましたが、なぜかgzip圧縮のオプションはエラーになるので外しました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143240/e446727c-ccc5-7894-2c25-a3ad295f8dee.png)

無事ビルドでき、 `Hello world!` が出力されました！

## もし一部のディレクトリ/ファイルを除外してDockerに送りたい場合

画像の例ではありませんが、実際に私がこれを使っているプロジェクトはNode.jsのプロジェクトで、 `node_modules` という615MBにもおよぶ巨大ディレクトリを含んでいます。
実際は `Dockerfile` の中で `yarn install` をしているので `node_modules` 自体は不要（しかもホストはmac、コンテナはAlpine Linuxなので、[node-sass](https://github.com/sass/node-sass)などのバイナリを使う場合互換性はない）、これを `docker build` に送らないようにするには `--exclude` オプションを使います。

```sh
tar -ch --exclude=node_modules . | docker build -t docker-build-symlink -
```

このように `--exclude=pattern` オプション[^2]をつけるとtarボールにならないので、少し早くなります。
（ `--exclude-from=file` もアリですね）


## コンテナの中身は？

中を覗いても、 `/app/src/common` はシンボリックリンクではなく普通のディレクトリとなっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143240/c73992aa-4d72-b753-69ec-306ed099f2ea.png)

[^1]: macおよびFreeBSDの BSD `tar` [(manpage)](https://www.freebsd.org/cgi/man.cgi?tar(1)) では、大文字 `-L` も使えるようですが、Debian等のLinuxの GNU `tar` [(manpage)](http://www.gnu.org/software/tar/manual/tar.html#dereference) の `-L` は違う意味になりますので、 `-h` で覚えたほうがいいようです。
[^2]: http://www.gnu.org/software/tar/manual/tar.html#exclude
[Rails]text_areaのサイズ変更方法３つ

公式ドキュメントは以下になります。

https://railsdoc.com/page/text_area

##サイズ変更方法
サイズ変更は以下のように記述する

##size
```
<%= f.text_area :body ,  class: 'form-control',size: "20x10"%>
```

##cols(横幅)
```
<%= f.text_area :body ,  class: 'form-control', cols="40"%>
```

##rows(縦幅)
```
<%= f.text_area :body ,  class: 'form-control', rows: 25%>
```
[Github]private ⇄ public 切り替える方法

publicをprivateに切り替えたのでメモ

## やり方
メニューで「Settings」をクリックします。

一番下にスクロールすると「Danger Zone」という項目があります。
そこに「Change visibility」があるのでクリックします。

すると以下のように**Make public**と**Make private**が表示されます。
![スクリーンショット 2021-04-30 3.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/991598/69d55542-d4ec-be68-6a50-9584ab0f6ed3.png)

チェンジしたい方のラジオボタンにチェックを入れて、フォームに変更するリポジトリ名を入力するとボタンが押せるようになります。

その後パスワードを要求されるので入力するとprivate ⇄ publicのように変更されます
TwitterのユーザーIDのビット数について

JavaScriptでうっかり数値に変換していて、えらいことになった。

## ユーザーID

Twitterでログインするサービスを使っているとき、（少なくとも内部的には）[@kusano_k](https://twitter.com/kusano_k) のようなIDをIDに使うことはできない。このIDは変更可能であり、他のユーザーが取得する可能性があるから。Twitterユーザーには、このIDとは別に変更不可能な整数のIDが割り当てられている。Twitter APIではユーザーが目にするほうは`screen_name`、目にしない整数のほうは`id`と呼ばれている。

https://developer.twitter.com/en/docs/twitter-api/v1/data-dictionary/object-model/user

2016年2月に登録されたアカウントから、このIDの桁数が一気に増えている。私のサービスに登録してくれている人の中だと、49????????の33 bitから69????????????????の60 bitに増えている。2021年2月に登録したアカウントだと、13?????????????????の61 bit。

これをJavaScriptで数値として扱ってしまうと、値が変わってしまう。JavaScriptの`Number`は倍精度浮動小数点数であり、整数を正確に表現できるのは53 bitまで（最近のJavaScriptは`BitInt`という多倍長整数もあるけど）。

```
> var x = 1234567890123456789;
> console.log(x);
1234567890123456800
```

ツイートのIDで以前に話題になっていたが、ユーザーIDも気をつけなければいけなかった。

ログイン時にIDを取得して、（うっかり値が変わり）それをそのまま使っているのでだいたい動いていて気が付かなかった。保存したIDを使ってバッチでプロフィール画像を取得するところが失敗していたけれど、削除済みアカウントの失敗に紛れていた。削除されていないアカウントも失敗しているので、てっきり変なフォーマットの画像でも使われているのかと思ったら……。

数値の`id`とは別に文字列の`id_str`があるので、JavaScriptではここから読み、IDは文字列として扱いましょう。昔からTwitterを使っているとビット数の小さいIDのままなので、自分のメインのアカウントだけではなく、新しく作ったアカウントでもテストをしたほうが良いかもしれない。

https://developer.twitter.com/en/docs/twitter-ids

## 対処法

だいたい動いているのだから、丸められたIDを使い続けることも一瞬考えたけれど、それはない。丸めて同じIDになる人がいたら大変なことになる。

`screen_name`を保存していれば、そこからIDを引くこともできる。ただ、`screen_name`を変えているユーザーがいると困る。

周囲の有効なIDを探すことにした。例えば、丸められて1234567890123456800になるIDは、1234567890123456641（1234567890123456800-159）から、1234567890123456895（1234567890123456800+95）の255個。

```
> 1234567890123456640
1234567890123456500
> 1234567890123456641
1234567890123456800

> 1234567890123456895
1234567890123456800
> 1234567890123456896
1234567890123457000
```

正負の幅が同じでないのとか、256個じゃないの？とか気になるが……。まあ、61-53=8 bit分の±256くらい試せば良い……んじゃないのかな。

`users/lookup`を使えば、1回のAPI呼び出しで最大100個のIDをチェックできる。

https://developer.twitter.com/en/docs/twitter-api/v1/accounts-and-users/follow-search-get-users/api-reference/get-users-lookup

周囲を探して見つからなければ削除されたアカウント、1個見つかればそれが正しいID、2個以上見つかったらそのアカウントに2人がログインできたということでとてもマズい。
IOST v.3.4 ローカルサーバーの起動

# 概要

ローカル環境にIOSTの環境構築を行う

# 環境

* MacOS Big Sur v.11.2
* Docker v.20.10

# 環境構築手順

### Dockerを使用してIOSTサーバーを起動する

```bash
# Dockerを使用してIOSTサーバーを起動する
$ docker run --rm --name iost-node -p 30000-30003:30000-30003 iostio/iost-node

--rm： コンテナ終了時に、コンテナを自動的に削除する。
--name： コンテナ名を指定して、コンテナを起動する。
-p： コンテナのポートをホストに公開する。
```

### 起動したコンテナに入る

```bash
# 新しくターミナルを起動し、作成したIOSTコンテナに入る
$ docker exec -it iost-node /bin/bash
```

### 初期アカウントのインポート

```bash
# iwalletコマンドでadminユーザーをインポート
$ iwallet account import admin 2yquS3ySrGWPEKywCPzX4RTJugqRh7kJSo5aehsLYPEWkUxBWA39oMrZ7ZxuM4fgyXYs2cPwh5n8aNNpH5x2VyK1
```

### アカウントがインポートされているか確認

```bash
# adminユーザー情報を確認
$ iwallet balance admin
```

# 参考文献

[IOST documentations](https://developers.iost.io/docs/en/1-getting-started/Overview.html "IOST documentations")
Node.jsでWindowsのショートカット(.lnkファイル)を作成する

# 概要
ユーザー権限で作成・削除が可能なショートカット（リンク）を作成する。
使用例：exe化したポータブルアプリでスタートアップへの登録。

# 方法
PowerShellのショートカット作成コマンドを`child_process.exec`から実行する。
ショートカットなので、ファイルでもディレクトリでもリンクが作成可能。
削除する場合は、`fs.unlink`でショートカットのlnkファイルを削除すればよい。

```ts:code.ts
import { exec } from "child_process"

// 作成したいショートカットのパス (末尾の.lnkが必要)
let dist = "C:\\path\\to\\shortcut.lnk"

// リンク元としたいディレクトリorファイルパス
let source = "C:\\path\\to\\target"

// ショートカット作成コマンド
let command = `
  $WshShell = New-Object -ComObject WScript.Shell;
  $ShortCut = $WshShell.CreateShortcut("${dist}");
  $ShortCut.TargetPath = "${source}";
  $ShortCut.Save();
  `

// 第2引数でPowershellを指定して実行
exec(command, {"shell":"powershell.exe"})

```

# その他のプロパティ
`TargetPath`以外にも、WshShortcutオブジェクトの各種プロパティ（ホットキー, 作業フォルダ等）を設定できるようだ。
[WshShellオブジェクトの詳細（2） - @IT - ITmedia](https://www.atmarkit.co.jp/ait/articles/0409/17/news086_3.html)


# 参考サイト
[ショートカット(lnk)の作成 - yanor.net/wiki](https://yanor.net/wiki/?PowerShell/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E4%BD%9C%E6%88%90/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%28lnk%29%E3%81%AE%E4%BD%9C%E6%88%90)
[Using PowerShell to Create a Shortcut - ComputerPerformance](https://www.computerperformance.co.uk/powershell/create-shortcut/)
[Github]意図的にコンフリクトを発生させて対応方法を覚える

## はじめに
チーム開発でgitを使うので、いずれ起こるかもしれないコンフリクトに対して適応できるようにします。

## 手始め
「hoge.txt」ファイルを作成します。中身は以下のようになっています。

```:hoge.txt
こんにちは
```
## 新たなブランチを作成する
`git checkout -b [ブランチ名]`でブランチの作成と切り替えを同時に行います。

```
$ git checkout -b second
```
`git branch`で現在のブランチを確認できます。

```
$ git branch
  master
* second
```
## secondでのファイルの編集
hoge.txtに文字を１行追加してコミットします。

```:hoge.txt
こんにちは
こんばんは
```

```
$ git add hoge.txt
$ git commit -am "add こんばんは to hoge.txt"
```

## masterでのファイルの編集
masterブランチに戻ります。

```
$ git checkout master
Switched to branch 'master'

$ git branch
* master
  second
```

この時`hoge.txt`は１行のままです。
secondブランチとは違う文を追加していきます。

```:hoge.txt
こんにちは
おやすみなさい
```
そしてコミットします。

```
$ git add hoge.txt
$ git commit -am "add おやすみなさい to hoge.text"
[master ce42458] add おやすみなさい to hoge.text
 1 file changed, 2 insertions(+), 1 deletion(-)
```

## マージしてコンフリクトを起こす
ここからが本題です。作成したsecondブランチをmasterブランチにマージしてコンフリクトさせます。

```
$ git merge second
Auto-merging hoge.txt
CONFLICT (content): Merge conflict in hoge.txt
Automatic merge failed; fix conflicts and then commit the result.
```
はい、これでコンフリクトが発生して「自動マージが失敗しました」と表示されています。

この状態で任意のエディタでファイルを確認すると以下のようになっています。(私の場合はVScodeです)

```
こんにちは
<<<<<<< HEAD (Current Change)
おやすみなさい
=======
こんばんは
>>>>>>> second (Incoming Change)

```

この場合「おやすみなさい」がカレントブランチの内容です。
そして「こんばんは」がsecondブランチの内容です。
今回はどちらも残したいので周りの`<<<<<<< HEAD`と`=======`と
`>>>>>>> second`を消します。その後コミットを実行します

```:hoge.txt
こんにちは
おやすみなさい
こんばんは
```

```
$ git add hoge.txt
$ git commit -am "merge second"
[master 61e9866] merge second
```

以上でコンフリクトを解消できました。
マージしてブランチが不要になった場合は`git branch -d`を使いましょう。

```
$ git branch -d second
Deleted branch second (was d8fbc89).
```

## 参考

https://www.atmarkit.co.jp/ait/articles/1607/14/news020_2.html
【E資格学習レポート】応用数学

#背景
日本ディープラーニング協会の資格試験（E資格）受験資格を得るためにラビット・チャレンジの講座プログラムを受けることにした。
当該講座を受講する時、科目ごとにレポートを作成しWebに投稿する必要があるためQiitaで作成することとした。
個人的には各科目の全要点などを記述よりも自分が難しいと思うところまたは理解不足なポイントをまとめる形にしたいと考えている。
ちなみにラビット・チャレンジについては以下から参考できる

https://ai999.careers/rabbit/

#応用数学
##１． 線形代数
線形代数の中に自分がややこしいと思うところは固有値分解と特異値分解２つにある。

###1) 固有値分解
ある行列Aに対して，以下のような式が成り立つような，特殊なベクトル𝑥と，右辺の係数λがある時、

```math
Ax=λx
```
以下のような分解することを固有値分解という。

```math
A=VSV^{-1}
```
この変換によって行列の累乗の計算が容易になる等の利点がある。

###2) 特異値分解
正方行列以外の”固有値分解”が特異値分解という。

```math
AA^T=USS^TU^{-1}\\
A^TA=VS^TSV^{-1}
```
このような特殊な単位ベクトルがあるならば特異値分解できる。

```math
A=USV^{-1}
```

##2. 確率・統計
以下３つのポイントをレポートとして記述する。
・条件付き確率
・ベイズ則
・ベルヌーイ分布

###1) 条件付き確率
ある事象 X = x が与えられた下で，Y = y となる確率

```math
\begin{align}
P(Y=y|X=x)&=\frac{P(Y=y,X=x)}{P(X=x)} 
\end{align}
```
以下の式で表記することが多い

```math
P(A|B)=\frac{P(A∩B)}{P(B)} 
```
###2) ベイズ則
上記の式より

```math
P(A∩B)=P(B)P(A|B)=P(A)P(B|A) 
```

したがってベイズ則と呼ばれる下式が成立する。

```math
P(A)P(B|A)=P(B)P(A|B)
```

###3) ベルヌーイ分布
表か裏のように２種類のみの結果しか得られないような実験の結果を0と1で表す時、
確率pで1を、確率 q=1−p で 0 をとる離散確率分布である。

```math
P(x|μ)=μx(1−μ)1−x
```

##3. 情報理論
この章では以下の概念が分かりづらくて、レポートとして記述する。
・シャノンエントロピー
・交差エントロピー

###1) シャノンエントロピー
事象ｘが起こる確実をP(x)とし、その情報量の期待値をシャノンエントロピー（平均情報量）という。

```math
H(x)=-∑P(x)logP(x)
```

###2) 交差エントロピー
交差エントロピーは２つの確率分布の間に定義される尺度である、確率分布P(x)とQ(x)の交差エントロピーは以下のように定義される。

```math
H(P,Q)=−∑P(x)logQ(x)
```
交差エントロピーは機械学習（２値分類、多値分類）における予測の誤差として使われることが多い。
機械学習による予測が正解に似ているほど、PとQの交差エントロピーが小さくなると考えられる。

#参考書籍
人工知能の応用数学を学習する場合は以下の書籍を参考として挙げる。
個人的は結構分かりやすく、数学の基礎から人工知能にどのように使われるまで記述されてとても参考になった。

https://www.amazon.co.jp/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E6%95%B0%E5%AD%A6%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%8B%E6%9C%AC-%E7%9F%B3%E5%B7%9D-%E8%81%A1%E5%BD%A6/dp/4046021969
react-sortablejs（v6.0.0）で MultiDrag が上手く読み込めなかった日に

# Sortablejs すき

[Sortablejs](https://github.com/SortableJS/Sortable) ([npm](https://www.npmjs.com/package/sortablejs)) という JS のライブラリがあります。名前の通り単純に要素を Drag/Drop でソートできるようにするものです。なんと、これ単体でも、jQuery や Vue、React といったライブラリと組み合わせてもいい感じに動いてくれます。かわいい！さらに複数の要素を選択して一気に移動させたりすることもできます。No MultiDrag, No Life な諸兄もにっこりですよね。

# 課題：React 用の sortablejs で複数要素を選択するサンプルが動かない

複数の要素を選択して一気に移動させる機能はすごく便利で使っていきたいのですが、React 用の Sortablejs ([react-sortablejs](https://github.com/SortableJS/react-sortablejs) ([npm](https://www.npmjs.com/package/react-sortablejs))) の現時点での最新版 6.0.0 に[書かれているサンプル](https://github.com/SortableJS/react-sortablejs/tree/v6.0.0#plugins)をそのまま書いても上手く動いてくれません。
手元で動かそうとしても `MultiDrag` はコンストラクタではない、と怒られている React のエラー画面が出力されます。

# なんでうごかないのか

## 意図して export から外してました

react-sortablejs の v6.0.0 に含まれている[#181](https://github.com/SortableJS/react-sortablejs/pull/181/commits/e212654c0764dfe96e496e9638ab74a6fcd8c860)で export から MultiDrag と Swap が外されています。
これが原因で上述の import がそもそもできていなかったようです。そのため、import できていないコンストラクタをコンストラクタとして使おうとしたから怒られたようです。

## どうして export から外したの？

変更のコミットを読む限りでは react-sortablejs ではなく Sortablejs の 1.12.x に MultiDrag に後方互換性のない変更が含まれているから、とのことです。この事情は [[bug] Attempted import error: 'MultiDrag' is not exported from 'sortablejs' #179](https://github.com/SortableJS/react-sortablejs/issues/179)で話されており、react-sortablejs のバージョンが 5.0.5 で Sortablejs が 1.10.1 または 1.10.2 ならば問題なく動いたとのことでした。

問題が含まれる Sortablejs のバージョンについて詳細は正直わかりませんでした。正常に動いている Sortablejs 1.10.2 の次のバージョン、つまり動かなかったと目されるバージョンである 1.11.0 から 1.12.0 について GitHub からソースコードを取得することができなかったからです。[npm](https://www.npmjs.com/package/sortablejs/v/1.12.0)掲載の情報によると 1.11.x および 1.12.0 は 1.10.2 にロールバックされたとのことです。

この記事を書いている時点での Sortablejs の最新版は 2021年1月8日に出た 1.13.0 となっています。しかし、[1.13.0 と 1.10.2 の差分](https://github.com/SortableJS/Sortable/compare/1.10.2...1.13.0)を見ると1.11.x や 1.12.0 が出た9月頃のコミットが全然なく、2020年5月24日の次のコミットが2020年12月30日と若干不自然なものになっていることからも上述のことがわかるかと思います。

# どうしたら動くかな

## 動く組み合わせで動かす

上述の通りreact-sortablejs のバージョンが 5.0.5 で　Sortablejs が 1.10.1 または 1.10.2 ならば問題なく動いたとのことなのでこのバージョンで動かすのは一案でしょう。2020年9月27日に公開された [v6.0.0](https://github.com/SortableJS/react-sortablejs/releases/tag/v6.0.0) の情報を見る限りは react-sortablejs のバージョンが 5.0.5 であることによって大きな問題は起こらないように見えます。

## 最新版を試す

[[bug] ReactSortable MultiDrag/Swap is not a constructor #143](https://github.com/SortableJS/react-sortablejs/issues/143#issuecomment-793064455) で紹介されているように上述のサンプルコードの import 部分をちょっと修正すれば react-sortablejs v6.0.0 と Sortablejs 1.13.0 の組み合わせでも動かすことができます。
すなわち以下の修正をおこなう、ということです。

```javascript
// Before
import { ReactSortable, Sortable, MultiDrag, Swap } from "react-sortablejs";

// After
import { ReactSortable } from "react-sortablejs";
import { Sortable, MultiDrag, Swap} from "sortablejs";
```

実際、私の手元ではreact-sortablejs v6.0.0 と Sortablejs 1.13.0 の組み合わせと上述の修正によって動かすことができました。1.11.x および 1.12.0 で問題を起こしていた修正がどんなものなのかわかりませんが、[1.13.0 と 1.10.2 の差分](https://github.com/SortableJS/Sortable/compare/1.10.2...1.13.0)を見る限りはそこについて問題を引き起こすような修正には私には見えませんでした。
JavaScript基礎メモその７

#コールバック関数
引数に渡される関数をコールバック関数と呼ぶ。
>```javascript
// 関数が引数に代入される
const call = (引数名) => {
  //処理
};
>
//関数を引数に渡す
call(関数名);
```

>```javascript
const kayakuko = () => {
  // 
};
>
// 関数kayakukoが代入される
const call = (callback) => {
  // 処理
};
>
call(kayakuko);
// 関数kayakukoを引数に渡す
```

>```javascript
const kayakuko = => {
  console.log("kayakuko");
};
>
// ② kayakukoをcallbackに代入
const call = (callback) => {
  console.log("コールバック関数を呼び出す");
  callback();
// ③ 関数callbackを呼び出す
];
>
call(kayakuko);
// ① 引数にkayakukoを渡し、関数callを呼び出す
```

結果
コールバック関数を呼び出す
kayakuko

#コールバック関数を直接定義する
関数を直接引数の中で定義することもできる。
>```javascript
          // ② 関数をcallbackに代入
const call = (callback) => {
  console.log("コールバック関数を呼び出す");
  callback();
};
>
call(() => {
  console.log("kayakuko");
});  // ① 引数で関数を定義して関数callを呼び出す
```

結果
コールバック関数を呼び出す
kayakuko

#コールバック関数に引数を渡す
>```javascript
const introduce = (callback) => {
  callback("kayakuko");
};
>
introduce((name) => {
  console.log(name);
});
```

結果
kayakuko
ChromeBookのLinuxで立てたローカルサーバにアクセスする方法

# はじめに
最近初めてChromeBookを購入し、早速Linux環境を使って開発をしてみよう！と思ったのだが、いつもの感覚でLinux側で立てたローカルサーバー`localhost`にChromeOS側のブラウザからアクセスしたところ、`CONNECTION_REFUSED`が表示されアクセスできなかった。まだネット上に情報が少なく、解決に少々時間を要したため備忘録として投稿してみる。

### 使用環境
ASUS ChromeBook Detachable CM3
ChromeOS 90.0 
Linux(Debian) ARM64bit版

# 解決方法
端的に言うとローカルサーバーを立てる際にLinux側(ChromeOSにホストされているcrostiniというコンテナ？)のIPアドレスを指定して立て、ブラウザで`localhost`ではなく直接そのIPを叩くことでアクセスすることができた。

### Linux側のIPアドレスを調べる
ターミナルにて以下を実行し確認する。

```bash
hostname -I
```
このIPアドレス（おそらく`100.115.92.xx`という形式）をコピーしておく。

### ローカルサーバーを立てる
冒頭にも書いたが、**ここでホストをデフォルトの`localhost`のままではなく先程確認したIPアドレスに指定するのが重要！** 今回はnpm（nuxtのプロジェクト）なので以下の通り。
参考：[Nuxt公式ドキュメント](https://ja.nuxtjs.org/docs/2.x/features/configuration/#%E3%83%9B%E3%82%B9%E3%83%88%E3%81%A8%E3%83%9D%E3%83%BC%E3%83%88%E7%95%AA%E5%8F%B7%E3%82%92%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B)

```bash
HOST=100.115.92.xxx npm run dev
```
ちなみにfirebaseのプロジェクトなら

```bash
firebase serve --host 100.115.92.xxx
```

### ブラウザからアクセス

ブラウザからアクセスする際も`localhost`ではなく先程指定したIPアドレスを使い`100.115.92.xxx:{PORT番号}`へアクセスすればOK！

または`penguin.termina.linux.test:{PORT番号}`でもアクセスできた。

# 補足＆余談
### `penguin.linux.test`とやらについて
ブラウザでローカルサーバにアクセスする際に、IPアドレスの代わりに`penguin.linux.test`や`penguin.termina.linux.test`としてもアクセス可能という情報があったため試してみたところ、後者のみアクセスすることができた。これについてはChromeOSのアップデートによる仕様変更も絡んでいる？という情報もあり真相はわからず...

### Linux側のIPアドレスの調べ方について
上記で紹介した以外にも、ChromeOS側のシェル（crosh）で確認する方法もあるようです。

Ctrl+Alt+T でcroshを起動する。



```bash
vmc start termina 
```
でターミナルの表示が`(termina) chronos@localhost ~ $`へと変化したら、`lxc ls`というコマンドを実行する。すると以下のようにコンテナのIPアドレスの一覧のようなものが出てきて、確認できる。

```bash
+---------+---------+-----------------------+------+------------+-----------+
|  NAME   |  STATE  |         IPV4          | IPV6 |    TYPE    | SNAPSHOTS |
+---------+---------+-----------------------+------+------------+-----------+
| penguin | RUNNING | 100.115.92.xxx (eth0) |      | PERSISTENT | 0         |
+---------+---------+-----------------------+------+------------+-----------+
```
はずだったが、私の環境では`lxc ls`と打ち込んで実行しても`-bash: lx: command not found`のように入力した文字「lxc ls」が「lx」と解釈され？思うように実行できないような現象が発生した。日本語入力に関係する不具合かなと個人的には思うが詳細不明。
仕方ないのでブラウザやメモ帳で「lxc ls」と入力したものをcroshにコピペしたところきちんと実行された。
ログインIDで販売済み商品選択の場合トップページへ遷移させる

この場合はログインIDの確認とpurchaseテーブルにitem_idがあるかどうかを条件分岐させるだけ
-

```rb:purchasecontroller.rb
  def set_redirect_to_root2
    if user_signed_in?
      if Purchase.exists?(item_id: params[:item_id])
        redirect_to root_path
      end
    end
  end
```
リクエストないのparameterについて


HTTPメソッドとしてGETを使う場合、Railsでは次のようなURL形式でパラメータをURLに含めてリクエストを送信
-

http://localhost:3000/items/27/purchases

上のURLはfurimaアプリの１つのURLで、出品番号２７番の商品の購入画面になります。

![20210430-010347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/9cc6d9d2-c96d-d1bd-88dd-350e11e1d6bf.png)


POSTを使って送信されたパラメータの取得
-

また購入画面なので購入フォームに入力や表示のあるものがparameterで取得できます。
![20210430-010402.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/c35e0245-0eee-320f-2c28-e0d0b5073e6e.png)



```ruby
Parameters: {"authenticity_token"=>"CCYTmCC7QDCwfk4HZpYRuapieE0CHaQ3ffA6YClz+deEkoo9etxfeeukyqQT/shksW+u5Vc3zUeXhuX/JgUj1g==", "address_purchase"=>{"postal_code"=>"", "prefecture_id"=>"1", "town"=>"", "address"=>"", "building"=>"", "phone_number"=>""},
```
[Git]git revertで間違ってpushしてしまったミスを取り消す

下記を参考にさせていただいています。
https://qiita.com/YuukiWatanabe/items/d326aad1224f2a559843

##git revert
間違ったコミットをpushした時には`revert`を使います。
手順は以下になります。

## 1. git logでコミットIDを確認する

```
$ git log
```
すると以下のように過去にコミットした日付とコメント、IDが表示されます。
**※ logは一番上が最新のコミットで`Enter`や`↓矢印キー`で過去のコミットに遡ります。やめる場合は`q`を押します。**

```
        ↓ここがcommit ID
commit db95f41cfdde06f7b5d471389e818abc8d7a3e1a (HEAD -> master, origin/master)  
Author: user <hogehoge@gmail.com>
Date:   Thu Apr 29 01:03:01 2021 +0900

    print('j')を削除

commit fd3dd5ae6bfcd9cc4c682b1974265cde704bceec
Author: user <hogehoge@gmail.com>
Date:   Wed Apr 28 23:24:55 2021 +0900

    insta2.py削除
```

commit IDをコピーしてください
 
## 2. git revertでコミットを取り消す
`git revert`でコミットを取り消します。コピーしたコミットidを`git revert`の後ろに記述します。

```
$ git revert db95f41cfdde06f7b5d471389e818abc8d7a3e1a ← commit id
```
するとvimが開きコミットメッセージを要求されるので入力します。
そして`git push`でrevertした内容でリモートリポジトリを上書きします。

```
$ git push
```
以上です
## 付加情報
gitには`git reset —hard HEAD^`を使ったコミット解消方法がありますがpushをしてしまった場合はrevertを使った方が良いようです。
`git reset —hard HEAD^`は一つ前のコミットに戻るというコマンドですがこれを使うと`git push`ができなくなるようです。
AWS CLIでCognitoのFORCE_CHANGE_PASSWORD→CONFIRMEDへ変更

### 調べた記事で試しても上手くいかないが続き、たどり着いた結論をメモ

`permanent`がミソ

``` bash:awscli
$ aws cognito-idp admin-set-user-password \
--user-pool-id <user-pool-id> \
--username <username> --password <password> --permanent
```

トークンのとり方もわかったのでついでで追記

``` bash:awscli
$ aws cognito-idp admin-initiate-auth \
--user-pool-id <user-pool-id> \
--client-id <client-id> \
--auth-flow ADMIN_NO_SRP_AUTH \
--auth-parameters USERNAME="USERNAME",PASSWORD="PASSWORD"
```
Djangoのマイグレーション初期化するときの注意

#migrationのリセットで手間取ったので
**\_\_init\_\_.pyは残す（消してしまった場合は空いいので作る)**
\_\_pycache\_\_ディレクトリは消す

その後

```c
//現在の状況把握
python manage.py showmigrations
//リセット
python manage.py migrate --fake application_name zero

//いつもの
python manage.py makemigrations
python manage.py migrate
LinuxのUSBインストールの方法(Mac用)

これは自分用の備忘録です。

まずはターミナルを開く。

USBデバイスを接続

```
$ diskutil list
/dev/disk3 (external, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *15.5 GB    disk3
   1:                       0xEF ⁨⁩                        9.0 MB     disk3s2

```

/dev/disk3の場所は人によって変わるので要確認

```
$ diskutil eraseDisk MS-DOS UNTITLED /dev/disk3
Unmounting disk
Creating the partition map
Waiting for partitions to activate
Formatting disk3s2 as MS-DOS (FAT) with name UNTITLED
512 bytes per physical sector
/dev/rdisk3s2: 29867504 sectors in 1866719 FAT32 clusters (8192 bytes/cluster)
bps=512 spc=16 res=32 nft=2 mid=0xf8 spt=32 hds=255 hid=411648 drv=0x80 bsec=29896704 bspf=14584 rdcl=2 infs=1 bkbs=6
Mounting disk
Finished erase on disk3
```
マウントしている状態だとダメなのでアンマウントする

```
$ diskutil unmountDisk /dev/disk3
Unmount of all volumes on disk3 was successful
```

ISOファイルをダウンロードしたディレクトリに移動する。
移動しないと次のコマンドでエラーになる
今回の場合はデスクトップ

```
$ cd Desktop/
```

最後にUSBに移す

```
$ sudo dd if=CentOS-7-x86_64-Minimal-2009.iso of=/dev/disk3 bs=1m
973+0 records in
973+0 records out
1020264448 bytes transferred in 88.235467 secs (11562974 bytes/sec)
```

CentOS-7-x86_64-Minimal-2009.isoこの部分は自分のインストールしたファイルによって変更する

使ったlinux : http://ftp.riken.jp/Linux/centos/7.9.2009/isos/x86_64/