OmniAICreator/Qiita-1.07M huggingface dataset:
WSL上で、複数のLinuxを立ち上げる。（分離環境）

Windows上で、複数のLinux Versionを使い分ける方法に関して、記載します。
技術としては、WSL（Windos Subsystem on Liunx)です。

WSLとは何ぞや？と言う点に関しては、こちらを見てくれれば良いかと。
→　https://www.buildinsider.net/enterprise/wsl/01
一言で言えば、Windows上で、仮想的にLinux OSを動かすための環境と理解してます。


１．　WSLの設定とLinuxのインストールに関して。
下記の「Windows Subsystem for Linux(WSL)セットアップガイド」が一番、詳しいと思います。→　https://linuxfan.info/wsl-setup-guide
非常に簡単に、WSL上で、Linuxをインストールすることができます。

２．さて、上の記事では、Ubuntuをインストールしてますが、勿論、他のDistributionもインストールすることは可能です。
Command Prompt上で、wsl --list --onlineと打つと、Download可能なDistributionが確認できます。

```
C:\Users\xxx\Desktop\code>wsl --list --online
The following is a list of valid distributions that can be installed.
Install using 'wsl --install -d <Distro>'.

NAME            FRIENDLY NAME
Ubuntu          Ubuntu
Debian          Debian GNU/Linux
kali-linux      Kali Linux Rolling
openSUSE-42     openSUSE Leap 42
SLES-12         SUSE Linux Enterprise Server v12
Ubuntu-16.04    Ubuntu 16.04 LTS
Ubuntu-18.04    Ubuntu 18.04 LTS
Ubuntu-20.04    Ubuntu 20.04 LTS
```

３．と言う訳で、上記１に書いた手順で、Debianもインストールしてみましょう。
インストール後に下記コマンドを叩くと、今現在、貴方のPCにインストールされているDistributioを確認することができます。

```
C:\Users\xxx\Desktop\code>wsl --list --verbose
  NAME      STATE           VERSION
* Ubuntu    Running         2
  Debian    Running         2
C:\Users\xxx\Desktop\code>
```

４．最後に、インストールしたUbuntuとDebianを立ち上げてみます。
立ち上げ方は極めて簡単です。
Windowsのスタートボタン→名前を付けて実行から、UbuntuとDebianをクリックするだけ。

Debian立ち上げ
![121a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/c9c7ffa8-d16e-6b42-9720-3141edfae080.jpeg)
Ubuntu立ち上げ
![121b.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/94203d48-f5d5-951d-1189-0e2b0a14d403.jpeg)

５．立ち上がった画面
下記の様に、分離環境になっていることが確認できます。（Ubuntuには、Open JDKをインストールしたので、java --versionで応答があるが、Debianの方は無回答です。）
![21jan.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/67f0dc97-148d-9c2a-0393-08430738a899.jpeg)


６．
で、本当は、ここを一番書きたかったのですが、今までって、こういう場合は、VMWare Playerで構築していた人が殆どだと思います。WSLの方が良くない？
1. Flask 環境構築、簡単なバックエンドサーバー実装

#### 前提条件

- Windows10
- Python 3.9

---

### 環境構築

- 仮想環境作成

  ```bash
  python -m venv venv
  ```

- 仮想環境に入る

  ```bash
  ./venv/Scripts/activate
  ```

- Flask パッケージをインストール

  ```bash
  pip install flask
  ```

---

### シンプルなサーバーを実装

参考: [A Minimal Application](https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application)

```python:app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Index Page'

@app.route('/hello')
def hello():
    return 'Hello, World'
```

##### 実行

```bash
flask run
```

:::note info
これだけでWebサーバーが起動できました。
ブラウザで http://127.0.0.1:5000/ を開いてみてください。「Index Page」が表示されるはずです。
http://127.0.0.1:5000/helloを開くと「Hello, World」が表示されます。
:::

ファイル名は app.py にしておくと楽です。
もしhello.pyとしたい場合は環境変数に`hello`をセットしてから起動する必要があり
少々手間です。

```bash
set FLASK_APP=hello  # CMD の場合
# $env:FLASK_APP = "hello"  # Powershell の場合
flask run
```

### POSTリクエストの実装

この短いコードだけで以下の２つのエンドポイントを用意することができました。
- `/`
- `hello`

POSTリクエストはどう定義すればよいのでしょう？
⇒　`@app.route()`デコレータに`method`引数を渡せばOKです。

以下のような感じになります。

```python
from flask import request

@app.route('/login', methods=['GET', 'POST'])  # "有効にするメソッドを指定"
def login():
    if request.method == 'POST':
        return do_the_login()  # ログイン処理を実行
    else:
        return show_the_login_form()  # ログイン画面を表示させる
```

これでGET or POSTリクエストを受け取れる`/login`エンドポイントが作成できました。

---

- [1. Flask 環境構築、簡単なバックエンドサーバー実装](https://qiita.com/YamaguchiRyuta/items/69ab10959767e27b8787)　<-
- [2. FlaskでOpenAPI定義の自動出力、Swagger UIページの作成](https://qiita.com/YamaguchiRyuta/items/617c0299ea7277af4d9b)
- [3. FlaskでORM + MigrationでSQLを一切書かずにDBのCRUDや移行を行う](https://qiita.com/YamaguchiRyuta/items/dd88089b2fd41ea91745)
- [4. FlaskアプリをAWSにデプロイ](https://qiita.com/YamaguchiRyuta/items/ffc64586a40dd9a76742)
【Rails】booleanとは

##booleanとは
``boolean``とは、一般的には真と偽のような2つの状態を表すデータ型。``string``や``integer``のようにマイグレーションファイルに記述することができる。

##boolean型のカラムを追加する時の注意点

```ruby.rb
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓NULL(Rubyのnil)が設定されることを禁止するオプション
t.boolean :checked, null: false, default: false
                    ↑デフォルト値をfalseに設定
```

⚠️注意点
・``デフォルト値を設定``しておいた方が良いこと
・``NOT NULL制約``を設けること

デフォルト値を明示的に設定しなかった場合、新しいカラムには``NUL``が入る。
データベース（SQL）の世界において、``NULL``は特殊な存在である。

``NULL``は``false``の意味でもなく、「空（から）」の意味でもない。
``NULL``は **「まだ決まっていないから何も評価できない」の意味**。（``NULL``の意味づけは文献によって異なる）

つまり、``「true でも false でもない状態」`` を表す。
よって、``Boolean型``のカラムに``NULL``が入ると、**「true / false / NULL」の3つの状態が存在する**ことになる。

しかし、**Rubyでは 「nil と false はどちらも偽」 として扱われる。**

このようにデータベースと``Ruby``では ``NULL/nil``の取り扱いルールが異なっているので、データの検索の考え方が非常にややこしくなる。そのための注意点として上記の２点はしておいた方が良い。

##presenceは使えない
``boolean型``のカラムについてバリデーションを設定するときに``presence: true``としてしまうと、値が入っているはずなのにエラーになる。

``presence``の定義上、``false``という値では引っかかってしまう。

``boolean型``のカラムに値が入っていることを確かめたいときは、``inclusion``を使う。

```model/ruby.rb
class Post < ApplicationRecord
  validates checked, inclusion: [true, false]
end
```

##参考記事
[Boolean型のカラムを追加するときは必ずデフォルト値を設定しよう](https://qiita.com/jnchito/items/a342b64cd998e5c4ef3d)
[boolean型カラムが他の型と違うところ
](https://endoakak.hatenablog.com/entry/2020/08/20/200000)[Rubyでbooleanの判定を行う方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/42560)
GitHubから自作モジュールを使ってみる

#背景
先日「[自作モジュールをPyPIに登録する](https://qiita.com/tan0ry0shiny/items/c04ccdf840d198d2759e)」をやってみましたが、何となく微妙なライブラリを作るのに気が引けてきました。GitHubに上げて管理する方が気軽に使える気がするので、まずはGitHubで構築していって、そのうちPyPIに上げても良いと思えたら本格的に上げたいと思いました。（※注：あくまで学習の記録です。見て下さる方がいらっしゃいましたら、参考になると嬉しいな、くらいのレベルです。）

#目的
GitHubに自作モジュールを上げて、運用出来ればと考えています。

#方法
「[なぜディープラーニングするのか？を自分なりに調べてみた件](https://qiita.com/tan0ry0shiny/items/e0d4233de1e59c4d4c03)」で作ったコードでモジュールに出来そうな物を、とりあえずモジュールにして、どのように使っていけるかを考えて行きたいと思います。また、このコードをモジュールに変えながら、変更したところだけ結果として出していこうと思います。

#結果
今回、作ったメソッドは「perceptron」「step_function」「plot_2d」「plot_3d」です。これらが実際どのように使えるかは以下のリンクをご参照下さい。
[GitHubから自作モジュールを使ってみる.ipynb](https://colab.research.google.com/drive/1wvyMOe2V8ynwUTiNcsG-OElp2U0fEnDA?usp=sharing)

#感想
TensorFlowの様な構造を作る時に、ハマってしまいました。具体的にはTensorFlowのinput_shapeがどのように出来るか分からなくなり、「[ゼロから作る Deep Learning](https://github.com/oreilly-japan/deep-learning-from-scratch)」のGitHubを拝見させてもらいました。init関数やnumpyの使い方の勉強になりそうなので、次の課題にしたいと思いました。

#更新
毎回、簡単なデータを作るのにも手間を感じるようになりました。モジュール内に簡単なデータを作成するdata_genメソッドを定義しました。いちおう、リンクを貼っておきます。

simpleモジュール

https://github.com/ShinyRyo/mymojule/blob/master/test2201/simple.py

#関連
[自作モジュールをPyPIに登録する](https://qiita.com/tan0ry0shiny/items/c04ccdf840d198d2759e)
[自作モジュールのinit関数を使いたい](https://qiita.com/tan0ry0shiny/items/44c8b3fad8038cba6e15)
neosでlogix その54

#概要

neosでlogixやってみる。
練習問題、やってみる。

#練習問題

音が鳴る箱をつくれ。

#写真
![2022-01-21 06.08.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/896bb1ea-9d11-ef2a-98cc-1f113256dc7c.jpeg)



#手順

- 新規->3d->box
- インスペクターを開く
- Transform->Interaction->Touch Buttonを追加
- そのインターフェースを取り出す
- コンポーネントを追加
- SineWaveClipを追加
- そのインターフェースを取り出す
- logixtooltipを装着
- ノードブラウザを表示
- Button Eventsをスポーン
- Play One Shotをスポーン
- つなぐ



#成果物

```
neosrec:///U-ohisama/R-0ee1ec21-db19-425b-ba63-9a699caff48e
```

以上。
qiitaに記事を投稿してみての気づき(積極的に記事を投稿すべき！)

ここ２週間ほど、１日１記事を目標に投稿してみて、感じたことや気づいたことを書き込んでいこうと。
初学者の方の中にはqiitaを「調べる」ためだけに使っている方も多いかと思うので、少しでも参考になれば…
ちなみに僕はプログラミング初学者です。

##まずは結論から
至ってシンプル、**つべこべ考えずに投稿すべき**
そう思ったポイントを自分が感じた限りの範囲で書いていこうと思います。

##ポイント

###①アウトプットすることで記憶に定着しやすい
記憶の定着度が段違いです！
自分の手を動かすことがいかに大切か思い知らされました！
意識したことは「初学者に説明する場合を想定する」ことで、そうすることで噛み砕いて理解することを自然とするようになりました。

###②前向きになれる、自信がつく
僕が記事にしてることって、現エンジニアの方からすると超基本、わかって当たり前レベルのものだと思うんです…
でも、そんな記事でもview数は結構増えていきます！
「こんな記事でも結構見てくれてる人がいるんだ」って分かると、もっと頑張ろう！って気持ちになれます。
LGTMをもらえた時には尚更ですね！


###③有識者からコメントを頂ける
記事を投稿すると、有識者の方々からコメントをいただくことがあります。
「ここのコードはこう書いた方がシンプルですよ〜」とか「こういうメソッドもありますよ〜」などなど…
こういうご指摘や、自分が学んでないとこを教えてもらえるのは、記事を投稿してないと得られないものなので本当にありがたいと感じます！
そして皆さん親切で優しい！！この場を借りて感謝を伝えさせていただきます＾＾



###④マークダウン記法を覚える
地味にメリットだと感じてる部分
現場でどの程度使うものなのかは分かりかねますが、覚えてデメリットなんてあるはずがない！
ちなみに私はここの記事を参考にさせてもらっております
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
いつか自分もマークダウンの記事を投稿したい


##まとめ
以上が僕が記事を投稿するべきだと感じた理由です。
「初学者が投稿なんて…」と思ってる方がいたら、そんなの関係ないです！
簡単なことでもいいですし、備忘録でメモとして投稿するのもいいと思います。
投稿すると何か拓けるものがあるかもしれませんよ！
とりあえず`つべこべ考えず投稿`です＾＾　　　以上。
pythonで処理時間を計測する。

実行時間についていつか使いそうなので、メモとして残しておきます。

https://www.delftstack.com/ja/howto/python/python-elapsed-time/

https://hibiki-press.tech/python/time-perf-counter/4595

#code 
perf_counterを使うのがよさそう。真面目に必要になったときに検討します。

```meas.py
import time

def start_time ():
    start = time.perf_counter()
    return start

def end_time (start):
    end = time.perf_counter()
    result = end - start
    print ('test time:','{:.3f}'.format(result))

turn_on_time = start_time()
#プログラム処理中
end_time(turn_on_time)

```
Front DoorでTLSの最低バージョンをver1.2にする方法



参考：
https://medium.com/@bcasari/azure-front-door-how-to-set-min-tls-version-80b7662fdc76

## FrontDoorNameを取得する。
以下のURLのRESTの「Try It」を選択し、各種パラメータを入力、実行
https://docs.microsoft.com/en-us/rest/api/frontdoorservice/frontdoor/frontend-endpoints/list-by-front-door

成功すれば202
応答のJSONに、nameでFrontDoorNameが入っている


##TLSの最低バージョンをver1.2にする

以下のURLのRESTの「Try It」を選択し、各種パラメータを入力、Bodyに以下のJsonいれて実行
https://docs.microsoft.com/en-us/rest/api/frontdoorservice/frontdoor/frontend-endpoints/enable-https


```
{
  "certificateSource": "FrontDoor",
  "protocolType": "ServerNameIndication",
  "minimumTlsVersion": "1.2",
  "frontDoorCertificateSourceParameters" : {
       "certificateType": "Dedicated"
  }
}
```

成功すれば202
[iOS] UIViewでTap検出

UIViewでTap検出を行う


・Viewの作成時にGestureRecognizerをタップを検出したいUIViewに追加する

~~~objc
UIView ＊LabelA;
~~~

~~~objc
//　TapGestureRecognizer作成 タップ検出時LabelAをコールするよう登録
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(LabelATap)</span>];

// UIView LabelA にタップ検出をアタッチ
[self.LabelA addGestureRecognizer:tapGesture];
~~~



~~~
// LabelAタップ検知時処理
-(void)LabelATap{

}
~~~

[Apple Developler](https://developer.apple.com/documentation/uikit/uitapgesturerecognizer)
AtCoder Beginner Contest 017をやった(Java)

AtCoder Beginner Contest 017をやった。
C問題解けない。。

##[A](https://atcoder.jp/contests/abc017/tasks/abc017_1)
一応Double型で宣言して実装

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        Scanner scan = new Scanner(System.in);
        double ans = 0;
        for(int i = 0; i < 3; i++){
            ans += scan.nextDouble() * (scan.nextDouble() / 10);
        }
        System.out.println((int) ans);
    }
}
```

##[B](https://atcoder.jp/contests/abc017/tasks/abc017_2)
全部の文字列をリプレイスしてあげて文字数が0と同じになればYESとなる

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        Scanner scan = new Scanner(System.in);
        String str = scan.nextLine();
        str = str.replaceAll("ch", "").replaceAll("o", "").replaceAll("k", "").replaceAll("u", "");
        if(str.length() == 0){
            System.out.println("YES");
        } else {
            System.out.println("NO");
        }
    }
}
```

いつかC問題もJavaで解きたいな(n回目)。
C#を使用してPDFを線形化されたPDFに変換する方法

##背景
線形化されたPDFファイルとは、インターネット上でより迅速に表示できるPDFファイルの特別な形式の一種です。線形化されたPDFはドキュメントのページ数が多い場合、高速でブラウジングできるという利点がより際立っています。以下は、バックエンドの.NETプログラムを介してPDFファイルを線形化されたPDFに変換する方法です。

###プログラム環境
Visual Studio 2017
.NET Framework 4.6.1
**[Spire.PDF for .NET 8.1](https://www.e-iceblue.com/Download/download-pdf-for-net-now.html)**

###手順および具体的な方法
**手順1**.PDFプラグインをインストールします。次の2つの方法でインストールまたは参照を実行できます。

**方法1**：**[NuGet](https://www.nuget.org/packages/Spire.PDF/)**検索を介してインストールします。Visual Studioで「ソリューションエクスプローラー」を開き、「参照」を右クリックして「NuGetパッケージの管理」を選択し、開いたインターフェイスで以下の画像に従ってインストールを実装します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/ff355254-1c63-cb92-a91b-8bfa54f1764b.png)
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/ab969a95-514f-1666-87d0-b3108f5aac3c.png)
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/ff23ffd7-0442-369a-29a3-7fa807743133.png)

**方法2**：dllを手動で参照に追加します。Spire.PDF for .NETをローカルにダウンロードして解凍し、BINフォルダーでdllファイルを見つけ、画像に示す手順を参照してVisual Studioプログラムへの参照を追加します。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/4062e1b7-c370-50be-26d0-c2ffc8506279.png)
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/f3ce268d-9b7e-22d9-0845-2c8edb3a6dc1.png)

**手順2**．次のようなコードを編集して変換を実現します。
**C#**

```
using Spire.Pdf.Conversion;

namespace ToLinearlizedPDF
{
    class Program
    {
        static void Main(string[] args)
        {
            //PDFドキュメントをロードする
            PdfToLinearizedPdfConverter converter = new PdfToLinearizedPdfConverter("C:\\Users\\Administrator\\Desktop\\test.pdf");
            //線形化PDFに変換する
            converter.ToLinearizedPdf("Linearized.pdf");
        }
    }
}
```

**VB.NET**

```
Imports Spire.Pdf.Conversion

Namespace ToLinearlizedPDF
    Class Program
        Shared Sub Main(ByVal args() As String)
            'PDFドキュメントをロードする
            Dim converter As PdfToLinearizedPdfConverter = New PdfToLinearizedPdfConverter("C:\\Users\\Administrator\\Desktop\\test.pdf")
            '線形化PDFに変換する
            converter.ToLinearizedPdf("Linearized.pdf")
        End Sub
    End Class
End Namespace
```

プログラムを実行した後、生成されたドキュメントはプログラム実行パスに保存されます（ファイルパスはカスタマイズできます）。PDFが線形化されたPDFであるかどうかを確認するには、PDFファイルを開いた後、以下の画像に示すように、「ファイル」-「プロパティ」で表示できます。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/4d0b62d3-a8c8-cce7-e0df-6ba3cadf80d5.png)
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/9f9ba2b6-5e96-3844-56e2-3220d504770b.png)
##結語
以上は今回のPDFを線形化PDFに変換する方法です、最後まで読んでいただきありがとうございます。
QEMUエミュレーターを用いたPaspberryPi環境構築覚書

## はじめに

この記事は、Raspberry Pi OS上で、Couchbase Lite C/C++ SDKの挙動を確認するために、QEMUエミュレーターを使用しようとした際の記録です。

結局、参考にした情報では、Raspberry Pi OSのバージョンが、SDKのサポート対象と異なっていたことから、実機を用いた検証に切り替えましたが、エミュレーターとしての利用自体は確認できたため、記録として残します。

そのような経緯から、記録/覚書以上のものにするモチベーションは失ってしまいましたが、何らかの参考になれば幸いです。ちなみに実機を用いた上記検証については、以下に整理しています。

https://qiita.com/yoshiyuki_kono/items/5606020caffaa88ce678

### 確認環境

- macOS Catalina Version 10.15.7
- Homebrew 3.3.7

### 実行履歴

```
 brew install qemu
```

```
brew install wget
```

```
wget http://ftp.jaist.ac.jp/pub/raspberrypi/raspios_armhf/images/raspios_armhf-2021-11-08/2021-10-30-raspios-bullseye-armhf.zip
```

```
wget http://ftp.jaist.ac.jp/pub/raspberrypi/raspios_armhf/images/raspios_armhf-2021-05-28/2021-05-07-raspios-buster-armhf.zip
```

```
unzip 2021-10-30-raspios-bullseye-armhf.zip
```

```
$ ls -l
total 7790008
-rw-r--r--  1 yoshiyuki.kono  staff  3972005888 Oct 30 20:36 2021-10-30-raspios-bullseye-armhf.img
-rw-r--r--  1 yoshiyuki.kono  staff     3814920 Dec  7 10:55 kernel-qemu-4.19.50-buster
-rw-r--r--  1 yoshiyuki.kono  staff        8573 Dec  7 10:55 versatile-pb-buster.dtb
```

```
$ qemu-img resize 2021-10-30-raspios-bullseye-armhf.img +2G
WARNING: Image format was not specified for '2021-10-30-raspios-bullseye-armhf.img' and probing guessed raw.
         Automatically detecting the format is dangerous for raw images, write operations on block 0 will be restricted.
         Specify the 'raw' format explicitly to remove the restrictions.
Image resized.
```

![QEMU - (Press ctrl + alt + g to release Mouse).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/fb68b531-64f7-9d59-0132-c88cb7715f19.png)




```
pi@raspberrypi:~ $ sudo apt install -y gnome-disk-utility
```


![6.1 GB Hard Disk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/8f0ad06c-b889-9a43-7cc5-f971d2c2cd5a.png)


![6.1 GB Hard Disk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/6680a6ba-1392-76b8-e0b9-00e3f054cf33.png)

![Resize Volume.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/9f4e386e-e046-8308-c59a-5db3263d2711.png)
￼￼￼

```
pi@raspberrypi:~ $ cat /etc/debian_version
10.9
pi@raspberrypi:~ $ cat /etc/issue
Raspbian GNU/Linux 10 \n \l
```

```
pi@raspberrypi:~ $ lsb_release -a

No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 10 (buster)
Release:	10
Codename:	buster
```![uploading...0]()




### 関連情報

https://qiita.com/yaju/items/9bb341c1b222590a92ba


https://www.webdevqa.jp.net/ja/networking/qemu%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%83%9B%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89%E3%82%B2%E3%82%B9%E3%83%88%E3%81%ABssh%E3%81%A7%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F/960827749/
Reactを基本からまとめてみた【23】【useRef】


##useRefとは

1.関数コンポーネント内で『Ref』を作成し、利用できるようにするためのhook

『useRef』フックを使うと、『ref』オブジェクトを生成できる。
この『ref』オブジェを対象の DOM ノード（ HTMLタグ）の『ref』属性に設定すると、 ref オブジェクト経由で DOM 操作できるようになる。

#####Refとは
DOMノードもしくはReactの要素にアクセスする機能のこと。
例えば 
① 要素の幅や高さを取得して、それを元に動的に要素のスタイルを変更する
② ボタンを押すとある要素にフォーカスする
等のように各要素にアクセスして得た情報を元に別の動作を実現することができる

2.useStateと同様に変数に値を保存することもできる

useState ⇨ 値が更新されると再描画される
useRef ⇨　値が更新されても再描画されない

```
import React, { useRef } from "react";

//JavaScript
// 基本
const refObject = useRef(initalValue);

// useRefを状態保持を目的に使う場合は、引数に数字や文字列などを設定
const refObject = useRef(0);

// useRefをDOM操作のために使う場合は、引数にnullを設定
const refObject = useRef(null);

//TypeScript 

// 基本
const refObject = useRef<Type>(initalValue);

// useRefを状態保持を目的に使う場合は、引数に数字や文字列などを設定
const refObject = useRef<number>(0);

// useRefをDOM操作のために使う場合は、引数にnullを設定

// inputタグをDOM操作したい場合
const refObject = useRef<HTMLInputElement>(null);

// buttonタグをDOM操作したい場合
const refObject = useRef<HTMLButtonElement>(null);

// divタグをDOM操作したい場合
const refObject = useRef<HTMLDivElement>(null);
```



##参考サイト
[【ReactHooks入門】第8回：useRefの理解]
(https://www.youtube.com/watch?v=uQ5As-ltaAY&t=2032s)
CSSを書けるようになったらすぐSCSS学ぶべき理由

わたしがHTML、CSSの勉強をし始めたのが約3年前。
それから経験を積んでいく中で、「SCSS」なるものがある
というのはなんとなく聞いたことがありました。
「とりあえず、CSSをもっとちゃんと書けるようになろう！」
「とりあえずCSS書けるし、それで困ってないから…」
などのようなことを考え、あまり調べもせずにいました。

ある時、意を決して「SCSS」どんなものなのか少し勉強してみたところ、
今は、<strong>普通のCSSを見たり書いたりするのが面倒になりました。</strong>

この記事はSCSSの書き方やメリットを説明するものではなく、
<strong>「CSSをある程度書けるようになったら、
すぐにSCSSもかけるようになったほうが便利ですよ～」</strong>という記事です。

#SCSSとは
簡単に説明すると、SCSSは<strong>「CSSをより効率的に記述できる言語」</strong>
みたいな感じでいいと思います。

#すぐ学ぶべき理由
SCSSはCSSがすでに書ける人なら、全然苦労せずに書けるようになると思います。
もちろん、深堀りして勉強すれば、たくさんの機能があるかもしれませんが、
基礎的な書き方を覚えるだけで、大きなメリットを得られます。

##コードが見やすくなる
以下に比較のコードを載せてみました。
![scss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2508687/0303ad4a-8ead-84b5-b1a5-8f006fc67ffd.jpeg)
画像内の左がCSS、同じコードを右にSCSSで書いてみました。
SCSSの方が、親要素と子要素の構造がわかりやすく、コードが見やすいと思いませんか？
コードの記述量が多くなればなるほど、これは大きなメリットになります。

#ネスト(入れ子)だけでもOK
先程、例として出したSCSSは、言ってみれば
親要素の中に子要素のCSSを記述していっただけのものです。
これはSCSSの基礎的な書き方ですが、まずはこれだけでもいいと思います。

#まとめ
SCSSは環境設定が少しややこしいと感じるかもしれませんが、
VScodeならプラグインを入れるだけですし、
他のコードエディターの場合はググれば方法が見つかると思います。
(わたしはVScodeでしか使ったことがないです。)

CSSは書いたことがあるけど、まだSCSSは書いたことがないという方。
ぜひ、一度やってみてください。難しくないですので。
WordpressのAll in One SEOプラグインが4.xアップデートからタイトル化けする

# 従来通りのやり方でtitleを取得すると文字化けする
```php:
$title_txt = get_post_meta($post->ID, '_aioseo_title', true);
```

従来は上記で取れていたが、今はこのやり方で取るとハッシュタグ？化してしまい訳の分からない出力になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25349/d05531e9-a476-b026-3490-299f9f6fee1f.png)

# 4.xからはこうする
```php:
$title_txt = aioseo()->meta->title->getTitle();
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25349/037421d4-7421-8c58-1982-4d93a0520482.png)
4.xからは、というかよく分かってないがプラグイン内ソース検索しまくって見つけた。これならちゃんと取れる。
このプラグインはあまりドキュメント系が整理されてないので余計な苦労をさせられることが多い。
乗り換えまでの暫定対応。
AmazonLinux2 初期設定とteratermマクロ

 vi AWS.sh

```bash

#gccのインストール
yum install gcc

#デスクトップインストール
sudo amazon-linux-extras install mate-desktop1.x

#全てのユーザーにMATEをデフォルト設定
sudo bash -c 'echo PREFERRED=/usr/bin/mate-session > /etc/sysconfig/desktop'

#TigerVNCをインストール
sudo yum install tigervnc-server

#VNCのパスワード設定をした後に画面表示専用のパスワードを聞かれるので「n」で入力
vncpasswd

#起動時に常にVNCサーバーを起動するように設定。
sudo cp /lib/systemd/system/vncserver@.service /etc/systemd/system/vncserver@.service
sudo sed -i 's/<USER>/ec2-user/' /etc/systemd/system/vncserver@.service
sudo systemctl daemon-reload
sudo systemctl enable vncserver@:1
sudo systemctl start vncserver@:1

#VNCサーバーを再起動。
sudo systemctl daemon-reload
sudo systemctl restart vncserver@:1

#Google Chromeのインストール
sudo amazon-linux-extras install epel
sudo yum install chromium

```

sudo chmod u+x AWS.sh
./ AWS.sh

```
#タイムゾーン等の設定
ln -sf /usr/share/zoneinfo/Japan /etc/localtime
vi /etc/sysconfig/clock
ZONE="Asia/Tokyo"
UTC=False
```



```

下記ログインマクロのひな型です。
ーーーーーーーーー
username = 'user'
hostname = 'IP'
keyfile = 'C:\Users\user\Downloads\キー名.pem'

msg = hostname
strconcat msg ':22 /ssh /auth=publickey /user='
strconcat msg username
strconcat msg ' /keyfile='
strconcat msg keyfile
connect msg
ーーーーーーーーー


可変すべき項目は下記三行の部分です。
ーーーーーーーーー
username = 'ec2-user'
hostname = 'パブリック IPv4'
keyfile = 'C:\Users\user\Downloads\キー名.pem'
ーーーーーーーーー

AWSの場合rootuserで最初にログインするわけではないので、ec2-userで設定します。
hostnameはパブリック IPv4で記載してください。
※keyfile = 'C:\Users\user\Downloads\キー名.pem'
⇒これはキーファイルではないときは以下のように設定することもあります。
password = 'パスワード'

このteretermログインマクロはかなり最低現の内容なので、加工しようと思えば色々とできそうです。


```
RailsのSTIで子クラスがfindに引っかからなくてハマった話

# 前提環境
```
$ ruby -v
ruby 3.0.3p157 (2021-11-24 revision 3fb7d2cadc) [x64-mingw32]
$ rails -v
Rails 7.0.1
```

# 問題
ツイッターのクローンアプリを学習用に作っていて、ツイート系のモデルが`Tweet < ApplicationRecord`、`NormalTweet < Tweet`、`Reply < NormalTweet`となる設計で実装しました。
※Tweetはツイートの作成者`author`、NormalTweetはツイート内容`text`、Replyは返信先`reply_to`を持ちます。

それで開発中`NormalTweet.find()`にその子クラスである`Reply`が引っかるときと引っかからない時がある！(`Couldn't find NormalTweet with 'id'=n (ActiveRecord::RecordNotFound)`)という問題が発生。

# 原因
Rails(のデフォルトではdevelopment環境)では、クラスが使用されるときにロードされるようになっています。(`lazy loading`)
その時、`NormalTweet`クラスは読み込まれるものの、その子クラスである`Reply`クラスは読み込まれていないことが原因でした。

# 対処
STIクラスをプリロードするようにします。

問題が起きたため、Railsガイドのものを少しだけ変更しています。

- `constantize`を`safe_constantize`に変更
- プリロード中にプリロードが起こらないように変更

`lib/sti_preload.rb`としてファイルを作成

```ruby:lib/sti_preload.rb
module StiPreload
  unless Rails.application.config.eager_load
    extend ActiveSupport::Concern

    included do
      cattr_accessor :preloaded, instance_accessor: false
      cattr_accessor :preloading, instance_accessor: false
    end

    class_methods do
      def descendants
        preload_sti unless preloaded
        super
      end

      # Constantizes all types present in the database. There might be more on
      # disk, but that does not matter in practice as far as the STI API is
      # concerned.
      #
      # Assumes store_full_sti_class is true, the default.
      def preload_sti
        return if self.preloading
        self.preloading = true

        types_in_db = \
          base_class.
          unscoped.
          select(inheritance_column).
          distinct.
          pluck(inheritance_column).
          compact

        types_in_db.each do |type|
          logger.debug("Preloading STI type #{type}")
          type.safe_constantize # Railsガイドのものから変更: safeでないconstantizeを使うと例外が発生して正常に動作しない
        end

        self.preloading = false
        self.preloaded = true
      end
    end
  end
end
```

モデル(ルートのみ)にrequire文、include文を追加

```rb:tweet.rb
require "sti_preload"

class Tweet < ApplicationRecord
  belongs_to :author, class_name: "User"

  # このincludeは一番下！！！！！！！絶対です！！！！！
  include StiPreload
end
```

ここで`include`は一番下に置くことに注意！
これが上にあると、その下のアソシエーションなどが設定されない状態でクラスがロードされてしまうので、`Association named 'xxx' was not found on xxx; perhaps you misspelled it? (ActiveRecord::AssociationNotFoundError)`などのエラーが発生してハマります！！！

この問題の原因、対処方法などは https://ruby-jp.slack.com/ で教えて頂きました。
回答して頂いた方々にはこの場をお借りして感謝申し上げます。ありがとうございました。

# 参考サイトなど

- [不具合再現用リポジトリ](https://github.com/PJZ9n/RailsSTIProblem/)
- [Railsガイド - 定数の自動読み込みと再読み込み (Zeitwerk) / 10 STI（単一テーブル継承）](https://railsguides.jp/autoloading_and_reloading_constants.html#sti%EF%BC%88%E5%8D%98%E4%B8%80%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E7%B6%99%E6%89%BF%EF%BC%89)
- [teratail - RailsでSTI親クラスのリレーションが子クラスに引き継がれない](https://teratail.com/questions/v3rkn02tp40328)
AWSの基礎知識その１

##1.はじめに
この記事をはじめとした「AWS基本知識」シリーズでは、ある程度細かくした分野ごとに知識をまとめることで、「このサービスにはどのような種類があるのか」ということを理解し、自分がその中のどのサービスを必要としているのかの判断等に役立てていただけること思います。

##2.Amazonのデータベースサービスの種類
・Amazon RDS
関係データベース(RDB)型のデータベースで、トランザクション処理を行う場合などで汎用的に利用される。  
・Amazon Redshift
ペタバイトもの大規模なデータを高速で扱うことができるデータウェアハウスで、分析に利用される。  
・Amazon DynamoDB
Key-Value型のNoSQLデータベースで、容量に制限がないのでデータ収集等の大容量データの蓄積に利用される。  
・Amazon ElastiCache
フルマネージド型のインメモリデータベースで、非常に高速なアクセスが可能でキャッシュなど一時的なデータ保存に利用される。


##3.まとめ
Amazonのデータベースサービスは、基本的にはAmazon RDSが利用されるケースが多いですが、大規模なデータを分析する場合はAmazon Redshift、Key-Value型のNoSQLデータベースが必要な場合はAmazon DynamoDB、キャッシュとして利用したい場合はAmazon ElastiCacheなど、用途によって様々なサービスが利用できます。ぜひ自身のニーズに合ったサービスを利用してみてください。
【備忘】64bitのAcrobat Reader DCから印刷ができなくなったときの対応

Acrobat Reader DCが自動アップデートして64bitになると印刷できなくなる現象が発生した時の対処を備忘のため記載

1.Acrobat Reader DC(64bit)をアンインストールする

2.以下からAcrobat Reader DC(32bit)をダウンロードしてインストールする
　　https://www.adobe.com/jp/acrobat/pdf-reader.html

3.regeditを用いて以下のレジストリキーを作成する
　レジストリの場所：HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Adobe\Acrobat Reader\DC\FeatureLockDown 

　(1)自動アップグレードを停止する
　　キー：bUpdateToSingleApp
　　データタイプ： REG_DWORD
　　デフォルト値：0

　(2)アップデート機能の無効化・メニュー項目の非表示
　　キー：bUpdater
　　データタイプ： REG_DWORD
　　デフォルト値：0
Amplify FunctionsをTypeScriptで書く

早速`amplify add function`していく。

```:console
❯❯❯ amplify add function
? Select which capability you want to add: 
❯ Lambda function (serverless function) 
  Lambda layer (shared code & resource used across functions) 

? Provide an AWS Lambda function name: function名

? Choose the runtime that you want to use: (Use arrow keys)
  .NET Core 3.1 
  Go 
  Java 
❯ NodeJS 
  Python 

? Choose the function template that you want to use: (Use arrow keys)
  CRUD function for DynamoDB (Integration with API Gateway) 
  GraphQL Lambda Authorizer

❯ Hello World 
  Lambda trigger 
  Serverless ExpressJS function (Integration with API Gateway) 


Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? No

? Do you want to edit the local lambda function now? No
```

次に作成したFunctionのフォルダへ移動してTypeScriptをインストールする。

```:console
❯❯❯ cd amplify/backend/function/function名/src
❯❯❯ npm install --save-dev typescript
❯❯❯ npx tsc --init

Created a new tsconfig.json with:                                                                      
                                                                                                    TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true
```

ここまで出来たら`amplify push`した時に自動でTSをbuildしてくれるようにしましょう。

```:rootの方のpackage.json
{
  "name": "amplifyfunction",
  // 省略
  "dependencies": {
    // 省略
    "react": "^17.0.2",
    // 省略
  },
  "scripts": {
    "start": "react-scripts start",
    // 省略
    "amplify:function名": "cd amplify/backend/function/function名/src && tsc -p ./tsconfig.json && cd -"
  },
```

これでindex.jsをindex.tsに変更してコードを書いていけます
めでたしめでたし

### お片付け
練習用に作ったのでこのFunctionは消しておく。

```:console
❯❯❯ amplify function remove
? Choose the resource you would want to remove 
❯ functest (function) 

? Are you sure you want to delete the resource? This action deletes all files related to this resource 
from the backend directory. Yes
```

後はrootのpackage.jsonに追加したやつも消しておく。

今度こそ本当に終わり
数学やPythonが分からない文系の方への"Simulated Annealing 法　（日本語：やきなまし法）とは”

メタヒィーリスティックスという言葉は、知っておいたほうがいいです。ヒューリスティックスを日本語で説明すると、「問題解決や意思決定の場において、システマティックないしは数理的な手順（アルゴリズム）によらずに、ほどほどに満足できる近似的な解を得る手法」です。探索しながら、なるべくよい解を見つける・・AIや機械学習よりも、人間的かもしれないですね。

Simulated Annealing　（以下 SA）法、メタヒィーリスティックス手法の一つで、最適化（最適解）を求めます。
海外の論文を含めた、SAとはという内容を集めて、文脈が合うように、かつ、分かりやすくまとめました。
海外の論文は私自身が翻訳しています。

SAアルゴリズムは、Kirkpatricらによって導入された、組み合わせ最適化問題を解決するための局所最適から逃れることができる局所探索手順である。一言で説明すると、与えられた初期状態から探索を始め、状態を遷移させて探索を続けることで、最終的にエネルギが最小となる状態、つまり目的関数の大域的(グローバル)最適解を発見することを目的としている。
手順を開始するにあたり，SAは初期解を求めて近傍解を生成する。近傍解が現存する解よりも優れている場合、その優れている解に置き換わる。そうでない場合は、現存する解が使用される。このプロセスは、近傍の解決策に有意な改善が見られないか、事前に設定された条件が満たされるまで繰り返される。SAでは、この反復的な改善アプローチを使用しているが、特に、探索アルゴリズムが局所最適から抜け出すことを可能にする。
SAアルゴリズムは、高い初期温度Tで開始し、温度を下げる変数（パラメータ）aを設定して、そのエネルギー差Itを算出する。エネルギー差Itが0以下であれば，新しい解を受け入れる。それ以外の場合は，大域的(グローバル)最適解を探索しながらランダムに見つけ出す。次の状態が現在の状態よりも悪い目的関数となる改悪方向への遷移も、一定の確率特性exp（It/kT）（Kは定数）、つまり、ある確率で受け入れられる。悪い解は、局所最適解の確率から飛び出して、最終的には大域最適解に近づく可能性がある。SAの特徴は、多くの最適化手法が局所最適解に陥ってしまうという欠点を持っているのに対して、SAは改良方向のみに向かって探索を行うのではなく、改悪方向にも探索が進むので、局所最適解に陥らず、真の最適解に到達することができる。

次回は、SAの弱点、課題をまとめてブログします。
Proxy環境下でWSL2+Docker環境をサクッと作る

# はじめに
DockerDesktopを購入しようと思ったが社内手続きが面倒・・・。
どうせ手間をかけるのならば、無料で使える代替環境の構築にパワーを使ってしまおうと思い
四苦八苦しながら必要な設定作業を1本のシェルスクリプトにまとめました。

※流用する方は自己責任でお願いします。

私の主な用途は、VSCodeのRemote Developmentを使いdockerコンテナを開発環境にすること。
後日、開発環境の構築/接続についての記事も書くかもしれないが
「VSCode devcontainer」等でググればたくさん情報があるので書かないかもしれない。

# 前提
WSL2:Ubuntu20.04LTS
⇒インストール後、ユーザー/パスワードを設定しただけの状態

# 使い方

起動したUbuntuに後述するスクリプトファイルを置いて実行する。
やり直しが必要な場合はUbuntuのリセットを推奨。
⇒追記で設定ファイルに書込みする処理があるので単純リランは無理です。

# スクリプト
```bash:wsl-setup.sh
#!/bin/bash

cd ~

export http_proxy=http://proxy:port #ここだけ書き換えて使う
export https_proxy=${http_proxy}
export HTTP_PROXY=${http_proxy}
export HTTPS_PROXY=${http_proxy}

# git proxy setting
git config --global http.proxy ${http_proxy}
git config --global https.proxy ${https_proxy}
git config --global url."https://".insteadOf git://

# setting http proxy
cat <<EOF >> ~/.bashrc
# http proxy setting
export http_proxy=${http_proxy}
export https_proxy=${http_proxy}
export HTTP_PROXY=${http_proxy}
export HTTPS_PROXY=${http_proxy}
EOF

# setting apt proxy
sudo tee /etc/apt/apt.conf <<EOF > /dev/null
Acquire::http::proxy "${http_proxy}";
Acquire::https::proxy "${http_proxy}";
EOF

sudo apt -y update
sudo apt -y install \
  apt-transport-https \
  ca-certificates \
  curl \
  gnupg \
  lsb-release \

# gpg key
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# docker install
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt -y update
sudo apt -y install docker-ce docker-ce-cli containerd.io

# docker-compose install
curl -L "https://github.com/docker/compose/releases/download/2.2.3/docker-compose-$(uname -s)-$(uname -m)" -o ~/docker-compose
sudo mv ~/docker-compose /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

sudo usermod -aG docker $USER

# setting docker proxy
mkdir ~/.docker
cat <<EOF > ~/.docker/config.json
{
  "proxies": {
    "default": {
      "httpProxy": "${http_proxy}",
      "httpsProxy": "${http_proxy}"
    }
  }
}
EOF

sudo tee /etc/default/docker <<EOF > /dev/null
export http_proxy="${http_proxy}"
export https_proxy="${http_proxy}"
export HTTP_PROXY="${http_proxy}"
export HTTPS_PROXY="${http_proxy}"
EOF

# docker auto start
sudo tee -a /etc/sudoers <<EOF > /dev/null
# docker start
${USER} ALL=(ALL)  NOPASSWD: /usr/sbin/service docker start
EOF

cat <<EOF >> ~/.bashrc
# docker start
if [ $(service docker status | awk '{print $4}') = "not" ]; then
  sudo service docker start > /dev/null
fi
EOF

echo "please reboot"
```
Windowsの既定のアプリでファイルを開く

#やりたいこと

既定のアプリを使用してファイルを開きたい。

以下のようにProcess.Startの引数にファイルパスを渡すと既定のアプリで起動できる場合もあるが、.txtなど拡張子によっては起動できない場合がある。

```C#
System.Diagnostics.Process.Start("ファイル.log");
```


#方法

ProcessStartInfoのUserShellExecuteをtrueにしてやると既定のアプリで起動できる。

```C#
string filePath = "ファイル.log";

var startInfo = new System.Diagnostics.ProcessStartInfo()
{
    FileName = filePath,
    UserShellExecute= true,
    CreateNoWindow = true,
}
System.Diagnostics.Process.Start(startInfo);
```
BTC情報

TBD　

ハッシュレート
https://www.blockchain.com/charts/hash-rate

スマートコントラクト・CEDEC
https://jp.gamesindustry.biz/article/1909/19090401/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/58dc812d-93d0-ec02-2a21-78c8d71ce143.png)
【Ruby】文字数を算出するプログラム　count_hiメソッド

※初心者向け
※アウトプット練習の為
※学習の復習

開発環境
rails 6.0.4.4
ruby 2.6.5

##概要
対象となる文字列から特定の文字列の数を算出し、その数を出力するプログラムを実装

##問題内容
以下の要件を満たすcount_hiメソッドを実装しましょう。

・対象となる文字列の中から、"hi"という特定の文字列の数を取得すること
・上記で取得した数を出力すること

**雛形**

```ruby
def count_hi(str)
  #  処理を記述
end

# 呼び出し例（引数には対象となる文字列を指定します）
count_hi('abc hi ho')
```

**出力例：**
count_hi('abc hi ho') → 1
count_hi('ABChi hi') → 2
count_hi('hihi') → 2

**ヒント**
**scanメソッド**を使用しましょう。

**scanメソッド**
**scanメソッド**は、対象の要素から引数で指定した文字列を数え、配列として返すメソッドです。

```ruby
"foobarbazfoobarbaz".scan("ba")
=> ["ba", "ba", "ba", "ba"]
```


##解答

```ruby
def count_hi(str)
  puts str.scan("hi").length
end

# 呼び出し例（引数には対象となる文字列を指定します）
count_hi('abc hi ho')
```

##解説
対象の文字列の中に"hi"という文字列がいくつあるか数える為、**scanメソッド**を使用します。**scanメソッド**は、「ヒント」で確認したとおり検索結果を配列として返します。

```ruby
"foobarbazfoobarbaz".scan("ba")
=> ["ba", "ba", "ba", "ba"]
```

上記を踏まえて、今回の問題でのscanメソッドの役割を確認します。
1行目のcount_hiメソッドの仮引数strには対象の文字列が格納されているため、以下のように記述することで、”hi”という文字列の数だけ配列の要素を返すことができます。

```ruby
def count_hi(str)
  str.scan("hi")
end
```
そして、その配列の中の要素の数を**lengthメソッド**で返し、**putsメソッド**で出力すれば完成です。
データ分析に関する私の記事

# データ分析に関する私の記事をまとめています。
## 目的
今後記事を掲載していく中で自分ですぐに見返せることを目的として作成します。


#Webスクレイピング
1, [ゼロからWebスクレイピングで得られたデータを形態素解析で可視化する](https://qiita.com/seiji1997/items/7437ace6638d9c661213)

# 株価予測

1, [第1回 株価予測_可視化編](https://qiita.com/seiji1997/items/aa380d6099a6bcdba800)

2, [第2回 株価予測_LSTM ver.1](https://qiita.com/seiji1997/items/a6114e3f2fc82d04e256)

3, [第3回 株価予測_LSTM ver.2](https://qiita.com/seiji1997/items/bee6b75b4b461ee3a7b2)

4, [第4回 株価予測_アプリ化編](https://qiita.com/seiji1997/items/2ac2c82ec3bfa41e5aca)
【Vue3】v-modelの変更点

vue2までは下記が組み合わさってv-modelとして活用していたと思います。

```vue
<template>
  <input type="text" v-model="sample" />

  <!-- 上と同じ動作をします -->
  <input type="text"  :value="sample" @input="sample = $event">
</template>
```

vue3からは結構変わります。

```vue
<template>
  <input type="text" v-model="sample />
  <!-- 上と同じ動作をします -->
  <input type="text :modelValue="sample @update:modelValue="sample = $event />
</template>
```

vue2系までは`value`と`input`の糖衣構文だったものが、`modelValue`と`@update:modelValue`に変わったところです。
[解決済]年末にリリースしたアプリ上にAdMob広告が表示されない！

## 状況
- 過去のリリース済アプリでは問題なく表示されている
- リリース前のテスト広告では表示されている
- 問い合わせ窓口は年末年始のため休み

いつもならそろそろ広告が表示されてたような気がするけど・・・
問い合わせ窓口再開まで様子見するか・・・

## 問い合わせ
- app-ads.txtとURLの指摘

窓口が再開したので問い合わせたところ、app-ads.txtとURLの設定を見直し、
最大7日間様子を見るよう言われるが表示されず。

## Charlesログ取得依頼

Charlesでのログ取得を依頼されたので、取得して渡す。
https://www.charlesproxy.com/

## Technical Solutions Manager へ転送

しばらくして連絡があり、Technical Solutions Manager へ転送されたらしい。

## ロンドンの Ad Manager technical support team から連絡

やはり弊社の設定は問題ないとのこと。追加調査に時間が必要らしい。

## バグの報告

キャンペーンとの組み合わせで起こるバグが見つかったとのこと。
バグフィックスが展開されるには数週間を要するらしい。

広告から自社広告キャンペーンを全て外し、
全て再登録することで修復できるとのこと。

## 広告表示

以下の手順を実施。

- AdMob管理画面表示
- Campaigns選択
- 対象Campaign選択
- 全Ad unitを選択してremove
- Add Ad Unitsを選択
- Campaignを再登録

アプリを起動すると、無事広告が表示されました！
一ヶ月弱かかってしまいましたが、
根気よくサポートしてくださり感謝しています。

## 教訓
- 年末・年始のリリースはなるべく避ける
- 問い合わせ前にCharlesである程度確認すると手順を省けそう

## おまけ

本現象が発生したのはこちらのアプリでした。

GoodNotes・Noteshelf・Notabilityなどのデジタルプランナーと組み合わせて使える
デジタルステッカー生成アプリです。よろしければお試しください。

https://apps.apple.com/app/aine-sticker/id1601367203

https://play.google.com/store/apps/details?id=com.iaine.stickers
文字列からスペースと改行を削除


# 環境
- Swift ver 5.5.1

# コード
## 文字列の前後から

利用しているメソッド

- Apple Developer Documentation - [trimmingCharacters(in:)](https://developer.apple.com/documentation/foundation/nsstring/1415462-trimmingcharacters)

### スペースを取り除く

```swift
let text = "　前後にスペース "
let trimmedText = text.trimmingCharacters(in: .whitespaces)
print(trimmedText, terminator: "") 
// 出力："前後にスペース"
```

### 改行を取り除く

```swift
let text = "\n前後に改行\n"
let trimmedText = text.trimmingCharacters(in: .newlines)
print(trimmedText, terminator: "")
// 出力："前後に改行"
```
### スペースと改行を取り除く

```swift
let text = " \n　\n前後にスペースと改行 \n　"
let trimmedText = text.trimmingCharacters(in: .whitespacesAndNewlines)
print(trimmedText, terminator: "") 
// 出力："前後にスペースと改行"
```

## 文字列の全体から

利用しているプロパティ

- Apple Developer Documentation - Character / [isWhitespace](https://developer.apple.com/documentation/swift/character/3127019-iswhitespace)
- Apple Developer Documentation - Character / [isNewline](https://developer.apple.com/documentation/swift/character/3127014-isnewline)

### スペースを取り除く

```swift
let text = " 全 体　に　　ス  ペ ー  ス　"
let trimmedText = text.filter { !$0.isWhitespace }
print(trimmedText, terminator: "")
// 出力："全体にスペース"
```
### 改行を取り除く

```swift
let text = "\n全\n\n体\n\nに\n改\n\n行\n\n"
let trimmedText = text.filter { !$0.isNewline }
print(trimmedText, terminator: "")
// 出力："全体に改行"
```
### スペースと改行を取り除く

```swift
let text = " \n　\n全 体　に\n　　ス \n　ペ ー　ス　と 改行 \n"
let trimmedText = text.filter { !($0.isWhitespace || $0.isNewline) }
print(trimmedText, terminator: "")
// 出力："全体にスペースと改行"
```

# 利用シーン
コピペなどで入力されたメールアドレスに余分なスペースが含まれていたり、
不適切な文字を検出する際にスペースや改行が文字間に含まれている場合に利用してみてください:rocket:
firebase storage ルール：認証に通った本人のみ書き込み権限を付与する


# 概要
firebase　auth で付与されるuid でディレクトリを切る
アップロードするときにはfirebase uid を含むパスとしてアップロードする。

## ルール

```
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
    }
    match /{userID}/{allPaths=**} {
  		allow write: if request.auth != null && request.auth.uid == userID;
		}
  }
}

```

書き込みはuidが一致するユーザーのみ
読み込みは誰でも

## 使用例

パブリックに公開されるがそのユーザーのみが編集権限があるアセットストレージ
- ユーザーアイコンなど
GithubActionsでfirebaseへのデプロイでfirebase-actionを使う場合と使わない場合の違い

firebase-actionの有無を強調するためbuild部分など他stepsは省略しています。

- firebase-action

```yml
jobs:
  build: ...
  deploy:
    name: deploy to firebase
    runs-on: ubuntu-latest
    steps:
      - name: download artifact etc
        run: ....
      - name: deploy to firebase hosting
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_ID: ${{ secrets.PROJECT_ID }}
```

- firebaseコマンド

```yml
jobs:
  build: ...
  deploy:
    name: deploy to firebase
    runs-on: ubuntu-latest
    steps:
      - name: download artifact etc
        run: ...
      - name: deploy to firebase hosting
        run: |
          node_modules/.bin/firebase use develop --token ${{ secrets.FIREBASE_TOKEN }}
          node_modules/.bin/firebase deploy --token ${{ secrets.FIREBASE_TOKEN }} --force --only hosting
```

- firebase-action
    - node_modulesのrestoreが不要
    - `PROJECT_ID`による環境選択

- firebaseコマンド
    - node_modulesのrestoreが必要
    - `use` の引数で環境選択
    - コマンドごとにtokenの指定が必要

結論：firebase-actionを使うのが楽。


- 参考

https://github.com/marketplace/actions/github-action-for-firebase
babelでコンパイルエラー が発生した時の対応

JestのUnitテスト作成時にエラーが発生して詰まったので備忘録として残します。

## 環境
Vue.js: 2.6.10
VueCLI: 2.9.6
babel: 7
vue-test-utils (Jest)

## エラー内容
非同期のテストを実行したら下記のようなエラーが発生しました。
"RegeneratorRuntime"が見つからないと怒られてますね。

```
$ npm test
> my_app@0.1.0 test /Users/te__zu/my_app
> jest

Error in created hook:"RegeneratorRuntime is not defined"
 found in
 ...(省略)
```

## 原因
エラー内容で検索してみたら同じような現象が出ている方の記事がたくさん見つかりました。
ES6以降の構文がコンパイルできておらず、今回はES7で書かれているasync awaitがエラーの原因でした。
GitHubにも [issue](https://github.com/babel/babel/issues/9849) が上がってました。

## 解決方法
`.babelrc` を下記のように設定してあげれば動きました。

```
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": { "node": true }
      },
    ]
  ] ,
  "env": {
    "test": {
      "plugins": [ "@babel/plugin-transform-modules-commonjs" ]
    }
  }
}
```

## 最後に
ちなみにwebpack環境だと **@babel/polyfill** が必要みたいですね。
参考にしたいくつかのサイトでモジュールが **babel-preset-env** と **@babel/preset-env** が混在していて違いを調べてみたら babel7 以降はパッケージ名が **@babel/xxx** に変更になっていました。

PJの構成やversionによって設定も変わってくるので最初の環境構築とvertion管理の大切さが改めて身に沁みました。
ドメイン名ハイジャック ってなに？

## 勉強前イメージ

ドメインを乗っ取る的な？
昔ラブライブとかが乗っ取られたやつもそれかな

## 調査

### ドメイン名ハイジャック とは

ドメインの管理権限を持たない人が、不正にドメイン名を支配下に置くことを言います。
ドメイン名の権限を持つと、サブドメインのIPアドレスを変更することで
以下のように同じ `www.example.com` にアクセスしても違うサイトに飛ばされるようになります。

以下はドメイン名ハイジャック前とハイジャック後を表した図になります。
ハイジャック前は `www.example.com` にアクセスすると X.X.X.Xに正常にアクセスされます。
しかし、ハイジャック後は `www.example.com` にアクセスすると 悪い人が設定したA.A.A.Aにアクセスされてしまいます。
A.A.A.Aには悪いスクリプトなどが設定されていたら二次被害にもなります。

![2022-01-18 2022-01-18 # ドメイン名ハイジャック ってなに？.dio - めも - Visual S.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/a77e9f42-cf5c-701e-f619-e0a2287ace0d.png)


### ドメイン名ハイジャック の手段

ドメイン名ハイジャックの手段としては、
不正に [レジストリやレジストラ](https://qiita.com/miyuki_samitani/items/ac8bf32554872a701735) のデータベースにアクセスし、ネームサーバの情報を変更したりします。
また、レジストラなどに移転申請を行い、管理を自分の手元に移すなどの方法もあります。

### 過去の事例

以下の事例があります。

- 株式会社日本経済新聞社
- ラブライブ！公式サイト

特にラブライブは記憶にあり、手法は上記の `レジストラなどに移転申請を行い、管理を自分の手元に移すなどの方法もあります。` に該当する被害のようです。

### 対策

- ID/Passは厳重に管理

登録されているID/Passは不正アクセスされないように厳重に管理しないといけないです。

- レジストリロックを導入する

登録情報などを意図せずに書き換えられることを防ぐために変更の申請を制限するものになります。
こちらを利用することで、外部からの不正の書き換えもですし、作業ミスも防げます。

- 登録情報の変更時にレジストラがメールで通知するサービスを活用する

意図せずに外部から書き換えられたことをすぐに確認できるようにするため、
メールでの通知も有用です。

## 勉強後イメージ

ラブライブ覚えてる・・・
うかつにメールを適当にみちゃだめだね。

## 参考

- [ドメイン名ハイジャックとは？被害事例と対策方法を徹底解説](https://cybersecurity-jp.com/column/31073)
- [ドメイン名ハイジャック 【domain hijacking】 ドメインジャック](https://e-words.jp/w/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%90%8D%E3%83%8F%E3%82%A4%E3%82%B8%E3%83%A3%E3%83%83%E3%82%AF.html)
div要素にくぼんだ枠線　grooveをつけるときの注意点。

今回はdiv要素のくぼんだ枠線をつけるにあたって私の初歩的なミスをした点を復習でアップいたします。

##【先に今回の結論】
###borderを使う時は大きい数字を使用し、徐々に数字を下げていくこと


まず、完成サンプルはこんな感じにしようと考えております。

__ー見本ー__
![見本.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/b806ebbb-aa15-5a58-a55c-ede15754b6d1.png)

オレンジ色で設定する形です。

書き方はこのようにしました。


```html:index.html
<div class = "groove">
くぼんだ線
</div>
```

```css:style.css
.groove{
    border: 2px groove #orange;
    text-align: center;
    padding: 5px 10px 5px 10px;
    width:500px;
}
```


__なお、borderの書き方は
・ 第１引数に線の太さ
・ 第２引数に線の種類（今回はgroove）
・ 第３引数に線の色__

になります。


これで、表示するとこんな感じになってしまいました。
![出来上がり.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/07a55c95-675c-482e-0b30-12080d33b0bb.png)

あれっ？　隆起してない？
ただの線になってないか？


なんでこのような形になったかというと、

線の太さが小さすぎたからになります。
そこで線の太さを２pxから４pxに変更してみました。

```css:style.css
.groove{
    border: 4px groove #orange;
    text-align: center;
    padding: 5px 10px 5px 10px;
    width:500px;
}
```

結果はこんな感じ
![4ピクセル.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/8d7d18db-f0aa-c5b3-4cca-75fbea0243e5.png)

やや、後ろに影みたいに出来上がり来ました。
これくらいの数字でgrooveが使えているように感じてきました。

最終的には10pxでやったら一番最初の見本のようになりました。

```css:style.css
.groove{
    border: 10px groove #orange; 　//borderを2pxから10pxに変更
    text-align: center;
    padding: 5px 10px 5px 10px;
    width:500px;
}
```

![見本.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/668d9d1d-b8f0-a93e-1c6e-9a9599d0f2d1.png)



まとめると、
__borderを使う時は、枠線のサイズを大きめからスタートして徐々に小さくすることをお勧めします。__
今回のトラブルは以外にも盲点だったなと思います。

以上です。
VPC アクセスで作成したAmazon Open Search ServeceのDashBoardsにプロキシサーバ経由でアクセスする

ネットワーク「VPC アクセス」で作成したAmazon Open Search ServeceのDashBoardsへはプロキシを経由しないとアクセスができません。
Amazon Cognito 認証の設定等を使わずにシンプルにEC2で作成したプロキシサーバーを経由してDashBoardsに接続する手順をメモしておきます

#手順
前提として今回はプロキシサーバにはnginxを使用。またAmazonLinux2でECインスタンスを作成しています。

1 ) プロキシサーバ用のEC2インスタンスをOpen Searchと同じVPCに作成する。
今回はAmazonLinux2で作成します。Elastic IPを設定しておいた方が便利です。
2 ) EC2、Open Seach Serviceのセキュリティグループ、アクセスポリシーを適切に設定する。
3 ) EC2にnginxをinstall

```
sudo amazon-linux-extras -y install nginx
```

4) nginx.confを編集
以下のように、/etc/nginx/nginx.confにOpenSeachの「ドメインエンドポイント(VPC)」を設定します。
もし追記する場所が見当たらない場合はまるっと追記すればOKです。

```ruby:/etc/nginx/nginx.conf
        include /etc/nginx/default.d/*.conf;
        location / {
            proxy_pass https://xxxxxxxxxxxxxx.amazonaws.com/;
        }
```

5) nginxを起動する

```
sudo systemctl start nginx
sudo systemctl enable nginx
```

5) DashBoardsにアクセス
http://xx.xxx.xxx.x/_dashboards/
※今回作成したEC2(プロキシサーバ)のパブリックIP、あるいはElastic IPを入力してください。
もし接続できない場合はEC2、OpenSeachのセキュリティグループ、アクセスポリシー設定に誤りがある可能性が高いです。

#参考
https://docs.aws.amazon.com/ja_jp/opensearch-service/latest/developerguide/dashboards.html
AmplifyでS3と連携する方法

# 準備

1.`amplify add storage`コマンドで、S3を追加する

```text
amplify add storage

? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
  NoSQL Database

```

2.`amplify push`コマンドで作成したS3をAWSにデプロイし、
　AWSの`S3`サービスへ反映する

```text
amplify push
```

3.`amplify console`コマンドでデプロイしたサービスを確認する

```text
amplify console
```

4.`AWS S3`の`CORS`を設定する

```python
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

```

# 実装

```s3Util.js
import Amplify, { Storage } from 'aws-amplify';
import config from "./aws-exports";

Amplify.configure(config);

/**
 * ファイルを保存
 * @param {string} key キー
 * @param {object} object オブジェクト
 * @param {object} config 設定（オプション）
 * @returns 結果
 */
export async function put(key, object, config = null) {
    try {
        return await Storage.put(key, object, config);
    } catch (err) {
        console.error('error:', err);
    }
}


/**
 * ファイルを削除
 * @param {string} key キー
 * @param {object} object オブジェクト
 * @param {object} config 設定（オプション）
 * @returns 結果
 */
 export async function remove(key, object, config = null) {
    try {
        return await Storage.remove(key, object, config);
    } catch (err) {
        console.error('error:', err);
    }
}


/**
 * ファイルを取得
 * @param {string} key キー
 * @param {object} config 設定（オプション）
 * @returns 署名付きURLまたはファイル(Blob)
 */
 export async function get(key, config = null) {
    try {
        return await Storage.get(key, config);
    } catch (err) {
        console.error('error:', err);
    }
}


/**
 * ファイル一覧を取得
 * @param {string} path キー
 * @param {object} config 設定（オプション）
 * @returns 一覧情報
 */
 export async function list(path, config = null) {
    try {
        return await Storage.list(path, config);
    } catch (err) {
        console.error('error:', err);
    }
}

/**
 * ファイルダウンロード
 * @param {object} blob ファイルオブジェクト
 * @param {string} filename ファイル名
 */
export function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'download';
  const clickHandler = () => {
    setTimeout(() => {
      URL.revokeObjectURL(url);
      a.removeEventListener('click', clickHandler);
    }, 150);
  };
  a.addEventListener('click', clickHandler, false);
  a.click();
  return a;
}
```

# 参考
https://docs.amplify.aws/lib/storage/getting-started/q/platform/js/

https://aws-amplify.github.io/amplify-js/api/classes/storageclass.html
３次元で描写した図をマウスでグリグリ動かす

先日、「[３次元で描写した図を動画で保存する](https://qiita.com/tan0ry0shiny/items/cda6ee024f7d799b7398)」で３次元に描写した図をアニメーションにしてmp4に保存する事が出来ました。今回は、plotlyを使って３次元の図をグリグリ動かしたいと思います。これは「@yusuke_s_yusukeさん」に教えてもらいました。ありがとうございます。
#やった事
先日は３次元で描写した図をアニメーションで動かしていました。今回は、マウスでグリグリ動かせるようにしました。

https://twitter.com/Ry0355318773/status/1484357428053352458?s=20

コードは先日、貼ったColabに付け加えさせて頂きました。
[Colab：ニューラルネットワークでANDゲートを解く.ipynb](https://colab.research.google.com/drive/1HyYvulakETtZgVWiibYoAICY8A6V2epX?usp=sharing)
#参考
[plotlyの公式チュートリアル](https://plotly.com/python/3d-axes/)
[【Plotly】3D 散布図の描き方 | 3D Scatter Plot | データを見える化する](https://www.dmysd.net/blog/archives/61)
#感想
plotlyは以前から使ったことがあり知ってはいましたが、今回の様な使い方を出来るとは思っていませんでした。見易くて良いのですが、これから多用するかは分かりません。
#関連
[３次元で描写した図を動画で保存する](https://qiita.com/tan0ry0shiny/items/cda6ee024f7d799b7398)
Windowsのメッセージボックスに表示されるアイコン画像を取得する方法

#やりたいこと
以下のコードで呼び出されるようなメッセージボックス

```C#
System.Windows.MessageBox.Show("タイトル", "メッセージ",
                               MessageBoxButton.YesNoCancel,
                               MessageBoxImage.Information);
```
に表示される以下のようなアイコン
![systemicon_ast.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314376/f003e4d2-dc56-1889-e1c6-60902b5c6c8c.png)
を取得したい。

#方法

これらアイコンは以下のクラスのプロパティを参照することにより取得可能
System.Drawing.SystemIcons

SystemIconsのままではXAMLの\<Image>に使えないのでImageSourceに変換する。


```C#
using System.Windows.Interop;
using System.Drawing;

//プロパティIconImage の定義は省略

//ImageSourceに変換
IconImage = Imaging.CreateBitmapSourceFromHIcon(
                               SystemIcons.Information.Handle,
                               Int32Rect.Empty,
                               BitmapSizeOptions.FromEmptyOptions());

```