OmniAICreator/Qiita-1.07M huggingface dataset:
文字列を修正するbatファイル

# はじめに

近頃はJupyter notebookやGoogle colaboratory、Makedownなどを使っている人が増えたのと、機械学習が盛んなところからLatexの数式をよく見るようになりました。

私は学習した内容をよくNotionにまとめていて、他の方が書いているLatexの数式などをよくコピーさせてもらっています。

Latexを使っているうちに`\begin{aligned}数式\end{aligned}` と書いた方がきれいに表示される事に気付き、付いてないものにはつけるようにしています。

alignedの有無によってどう違うかというと例えば総和は

- alignedなし `$\sum_{i}^{k}x_i$ `
$\sum_{i}^{k}x_i$ 

- alignedあり `$\begin{aligned}\sum_{i}^{k}x_i\end{aligned}$ `
$\begin{aligned}\sum_{i}^{k}x_i\end{aligned}$ 

となります。あった方がきれいですね。

しかし付いていないものにいちいち`aligned`を付けるのが面倒になり

- 簡単に付けられる
- その方法は簡単に実現できる


ものがないか探したらBatでできそうだったのでこれはそのメモです。


# コード

## クリップボードに入っている文字列の前後に定型文を付けるコード

- 下記のコードをbatファイルとして保存して、Latexの数式がクリップボードに入っている状態でバッチファイルを実行すれば`aligne`がくっついた文字列がクリップボードに入ります。

```bat
for /f "usebackq tokens=*" %%A in (`powershell get-clipboard`) do set RET=%%A
echo \begin{aligned}%RET%\end{aligned} | clip
```

- 1行目
    - `for /f` は文章に対してforを行う事を示していて今回はクリップボード内の文章が対象となります
    - `usebackq` はコマンドの実行結果をforで扱う事を示しています
    - `tokens=\*` は文章全体を扱う事を示しています
    - `%%A`はfor内で使う一時変数の名前です
    - `powershell get-clipboard`はクリップボードの内容を取得するコマンドです
    - この for の結果は `RET` という変数に格納されます
- 2行目
    - **echo <font color="Red">\begin{aligned}</font>%RET%<font color="Red">\begin{aligned}</font>**の赤部分が今回くっ付けたい定型文です
    - echoコマンドの結果を clipコマンドに渡してクリップボードに格納しなおします
- 問題点
    - DOSコマンドの一部である |(パイプ) がクリップボードに入っていると正しく動作しません。


## クリップボードの文字を置換するコード(おまけ)

- こちらはついでに作成したもので、クリップボードにある文字列に含まれるブランクをアンダースコアに置換してクリップボードに格納するコードです。
- 例： `this is a pen.` → `this_is_a_pen`

```bat
for /f "usebackq tokens=*" %%A in (`powershell get-clipboard`) do set RET=%%A
echo %RET: =_%| clip
```

- 一行目
    - 最初の例と全く同じです
- 二行目
   - **%変数名:<置換元>=<置換先>%**とすると置換でき、その内容をclipに渡してクリップボードに格納しなおしています。
- 問題点
    - DOSコマンドの一部である |(パイプ) がクリップボードに入っていると正しく動作しません。
「Contabo VPS」利用前にrootでのSSH接続を無効化する


この記事は、ドイツのVPS「Contabo」を利用する前にセキュリティを担保するために
行う作業を備忘録としてまとめたものです。

#rootでのSSH接続無効化



Contabo VPSにrootでSSH接続する。


パスワード等はメールの「Your login data!」を参照

```
$ ssh root@IP address
```





####一般ユーザーの作成
好きなユーザ名を追加する。

```
$ sudo useradd -m -s /usr/bin/bash [ユーザ名]
$ sudo passwd [ユーザ名]    # パスワードを変更する
New password:           　 #新しいパスワードの設定 ※表示されません
Retype new password:     　#再入力
passwd: password updated successfully
```




####sudoグループに[ユーザ名]を追加

```
$ sudo adduser [ユーザ名] sudo
Adding user `[ユーザ名]' to group `sudo' ...
Adding user [ユーザ名] to group sudo
Done.

$ cat /etc/group | grep sudo   #追加されているか確認する。
sudo:x:27:[ユーザ名]


$ exit
```


####SSH接続の設定ファイルのバックアップ
```
$ ssh [ユーザ名]@IP address    #一般ユーザでSSH接続する。

$ su -    #設定変更のためrootになる。
$ cp /etc/ssh/sshd_config /etc/ssh/sshd_config.org
```



####SSH接続の設定ファイルの変更

```
$ vi /etc/ssh/sshd_config

LoginGraceTime 2m
PermitRootLogin yes   #yes → no に変更
StrictModes yes

$ diff /etc/ssh/sshd_config /etc/ssh/sshd_config.org    #きちんと編集されたか確認する。
34c34
< PermitRootLogin no
---
> PermitRootLogin yes
```




####/etc/ssh/sshd_configの構文をチェック

```
$ sshd -t    #これでエラーを吐かなければＯK
```






SSH接続の設定を反映させてログアウト

```
$ systemctl restart sshd.service

$ exit
```





####再度rootでSSH接続を試みてください。

Permission denied, please try again.の表示が出てログインできなければ成功です。




####引用サイト

https://webkaru.net/linux/ssh-prohibit-root-login/
プログラミングの初歩(2)


※この記事は、プログラミング未経験の方向けの記事です。
すでにプログラムを組まれているかたは退屈な内容かもしれません。




みなさん、こんにちわ

私はSE歴5年の、ごくごく一般的なサラリーマンです。
仕事を始めてからＩＴ系の勉強を始めましたし、IT業界に入ってからすぐにプログラミングができるようになった、いわゆる才能があるわけでもありません。

それでも今、多少プログラミングのことがわかりましたし、それで仕事もいただけています。
この知識が誰かの役に立つと思って、この記事を書くことにしました。



プログラミングの初歩(1)の続きです。


(1)では、プログラミングを始める前のハードルを下げるような内容を書いたつもりでした。
もう「プログラミングやりたい！！何すればいいんですか！！」という人には、期待はずれだったかも知れないですね(-_-;)
すいません。


<br>
<br>
<br>




さて、本題です。

プログラミングやりたい！となっている方は、まずおすすめしたいことがあります。

それは、「プログラミングの基本となる考え方をまず作る」ことです。
<br>
<br>

　　『・・・それはなんぞ？？パソコンのお勉強とかですか？？』
<br>
<br>



いえいえ、プログラミングを書く準備みたいなものです。



具体的に何をやるかというと、

・何を作りたいのかを決める
・作りたいものにはどんな機能が必要か考える

この２つを実施します。


なぜこの作業が必要かというと、

・勉強のためにプログラムをすると、何を作っているのかわからなくなりやすい
・作るために必要になりそうな仕組みをなるべく洗い出しておく

このポイントを守ると、最初のプログラミングはやりやすくなります。


例えば、ブラックジャックのゲームを作りたいとして、
カードを引く処理だけ作ってるだけでは、ゲームが完成しないのは想像できますよね？

カードを引いて、ポイントを計算して、ディーラーも同じことをして、そして勝ち負けを決める
これくらいの処理があれば、なんとなくブラックジャックが成立しそうですよね。


そのような、「作りたいものに必要なもの」を最初に分かるだけ書いておきます。
後から増えることもありますし、逆に減ることもあります。
上のブラックジャックの例でいうと、A(1)を引いたときのポイント計算が難しいです。
（ブラックジャックのルールを知らない方は、ブラックジャックのルールを検索してみてください。）


これはIT業界でいうと、『設計』と呼ばれる部分をやろうとしています。
(厳密にいうと違うかもしれないですが・・・)




最初のうちは、細かく言葉にしなくてもいいと思います。

カードを引いて、ポイントを計算して、ディーラーも同じことをして、そして勝ち負けを決める

これくらいでいいと思います。

じゃないと多分しんどくなります。。(-_-;)

耐えられる！！という方は細かくしていただいてもOKです🙆



このように、作りたいものがどんなものなのかをまとめておいたほうが、
見返したときに分かりやすいですし、今の頭の整理にもなります。



なので、今からプログラミングをやってみます！という人はぜひ、
『自分は今何を作ろうとしているのか、それには何が必要なのか』
をぜひまとめてみてほしいです。



ということで、まだプログラミングのことにまた触れませんでしたね(;'∀')


次回は何か作ってみるところに入っていきたいなぁ

<br>
<br>

この記事に関して、ご意見や相談があればぜひぜひコメントをお寄せください。


では次に続きます。
CPUの役割について

コンピュータの成り立ちとか、基礎とか理解できればこれから先どんなことをやるにしても理解が早いのではないかと思い勉強を始めました。
[キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819)で勉強させていただいております。

まとめます！

## CPU(Central Processing Unit)

CPUは中央処理装置とも呼ばれます。
CPUは人間でいう`「脳」`に例えられることが多いので、CPU自体がコンピュータを動かしていると思っていたのですが、実際CPUだけだと何もできないみたいです。

`「現場監督」`に例えると分かりやすいかなーと。

- CPU→現場監督
- プログラム(ソフトウェア)→施工指示書
- 各装置(入力装置や出力装置などのハードウェア)→現場の作業員

指示書を元に現場の作業員を適切に動かすの現場監督がCPUかなと理解しました。
現場監督一人じゃ何もできないってことです。

## 各装置について

コンピュータは制御装置、演算装置、記憶装置、入力装置、出力装置の5つの装置が連携して動いています。

- 制御装置・演算装置→CPU
- 記憶装置→主記憶装置と補助記憶装置の2種類(代表的なのはRAMとROM)
- 入力装置→マウスやキーボード
- 出力装置→ディスプレイやプリンター

CPUは記憶装置からプログラムを呼び出して命令を確認し実行するって流れみたいです。

## CPUの命令実行の流れ(レジスタ)

じゃあCPUはどうやって命令をしていくのか。

>CPUは記憶装置から指示書であるプログラムを取り出し、その取り出したものを`レジスタ`というCPU内の記憶装置に記憶しておきます。

また記憶装置きた...。
これはCPU内の記憶装置ですね。

レジスタの種類は以下のようなものがあります。


| 名称            | 役割          |
|:--------------:|:------------|
| プログラムカウンタ  | 次に実行すべき命令が入っているアドレスを記憶するレジスタ |
| 命令レジスタ      | 取り出した命令を一時的に記憶するためのレジスタ |
| インデックスレジスタ | 連続したデータの取り出しに使うための増分値を保持する |
| ベースレジスタ     | プログラムの先頭アドレスを保持する |
| アキュムレータ     | 演算の対象となる数や演算結果を記憶するレジスタ |
| 汎用レジスタ     | 特に機能を限定していないレジスタで、一時的な値の保持やアキュムレータの代用で使ったりする |


流れとしては

①命令の取り出し(命令レジスタ、プログラムカウンタ)
②命令の解読(命令レジスタ、命令デコーダ)
③対象データの読み出し(命令レジスタ、汎用レジスタ)
④命令実行(汎用レジスタ、ALU)

上記を繰り返し命令を実行します。
この繰り返しでマウスを動かしたりアプリを実行したりしてるんですね。

と、いうことでCPUは脳というよりは現場監督のようなものだと理解しました！
以上です。
VSCodeのLiveShareを体験してみる

# はじめに

最近、業務中にペアプロする機会がありVSCodeのLiveShareを使ってみたら大変感動したのでこの感動を皆さんにも共有したいです。
特に、共同編集のリアルタイム性と手軽にセッション参加者にローカルポートを公開できる共有サーバーが感動的でした。

## GitHubPagesにスライドを用意しました

特におすすめの共同編集と共有サーバーについてまとめました。
ぜひVSCodeのLiveShare機能を身近な方と体験してみてください。

※複数人で体験することを想定しています。端末が複数あれば共有機能を体験可能です。

https://ryuyaf.github.io/LearnVscodeLiveShare/

## 終わりに

簡単ですが記事とさせていただきました。
皆さん、よい開発体験を！

## 一言

下手したら隣に並んでペアプロするよりLiveShare使ったほうが効率いい気がします。
いや、隣に並んでLiveShare使うのがベストかも知れませんね☺️
キーボードを閉じる方法【Swift】

Swift学習2日目、自分用の備忘録です。

## キーボードを閉じる

```swift
import UIKit

class ViewController: UIViewController, UITextFieldDelegate { // 1. クラスにUITextFieldDelegateを付与
    
    @IBOutlet weak var userName: UITextField! // 2. テキストフィールドを紐付け
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        userName.delegate = self // 3.
    }

    // 4. タッチでキーボードを閉じる
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        view.endEditing(true)
    }
    
    // 5. リターンでキーボードを閉じる
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
    }
}

```
OBSの仮想カメラをVLCで表示する

最近ZoomやTeamsといったWeb会議でプレゼンをするのが仕事の大半になってきました。パワポの背景に自分を右下に写してプレゼンをやりたい。

本当はmmhmmが使いたい。
でも会社のパソコンはWindows機。。。

<iframe width="560" height="315" src="https://www.youtube.com/embed/RZAT80QqotI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## OBSで合成し画面共有

しょうがないのでYouTuberが良く使っているというOBSでがんばってみます。

OBSでパワポの画面キャプチャとカメラの映像を重ねる。緑バックなどでクロマキー合成はできるけど、ZoomやmmhmmのようにAIで人だけ切り抜きはできないのは残念。

OBSの画面をZoomで共有すればとりあえずOK。
ソースツールバーやステータスバーは非表示にして、シーンやソースなどのコントローラはドックで独立させてあげればそれなりにいける。

でもどうしてもメニューバーとウィンドウ枠は残る。。。

## OBS仮想カメラに出力する

OBSの仮想カメラ機能を使うと、合成した映像をWebカメラとして認識させることができます。
ZoomでカメラONにするときに OBS Virtual Camera を選択すれば、メニューバーやウィンドウ枠無しにZoomに映像が取り込める。
ただし自分の顔のカメラ映像として出るだけなので、プレゼンには向かない。

## VLCに映して画面共有

そこでまずOBS仮想カメラの映像をVLCで表示させて、VLCのウィンドウを共有することにする。

VLCを立ち上げ、
メディア --> キャプチャーデバイスを開く

![vlc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/a49f9599-688b-ed8b-7c46-c0903ca9e5aa.png)


キャプチャーモード: DirectShow
ビデオデバイス名： OBS Virtual Camera
オーディオデバイス名：　なし

オーディオデバイス名が"デフォルト"のままになっていると静止画となってしまうので”なし”にする。
また”詳細設定オプション”で、画像のアスペクト比 n:m を 16:9 にする。

これで無事VLCのウィンドウにOBSで合成した映像が出ました。
表示 --> 最小インターフェース
を選ぶとプレイボタンやメニューバーなど余分な表示が無くなる。

あとはZoomでアプリケーションの共有をすればOK.

## 結局

がんばってVLCに仮想カメラ映像を取り込んだのですが、結局ウィンドウ枠は残るのでOBSのウィンドウを直接共有するのに比べてメニューバーが無くなるぐらいしか違わない。。。
なのでOBSのウィンドウを共有でいい気がします。
そしてZoomには範囲を共有機能がある。もうそれでいいですね。
Windowsでデスクトップ通知

#はじめに
業務を行っていると、毎日定期的に行う作業があると思います。
ですが、業務が忙しいと忘れてしまうこともあると思います。
そういったときに決まった時間に通知が来ると忘れなくなると思います。

#通知の流れ
流れは以下のようになります。
1.定期的に行う作業の内容を記載したバッチファイルを作成
2.指定した時刻に1で作成したバッチファイルを起動するように設定
3.指定時刻になるとバッチファイルが起動する

#バッチファイル作成
まずは起動するバッチファイルを作成します。
デスクトップに「定期業務.bat」という名前でファイルを作成します。
ファイルの中身は以下となります。
![qiita01.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/4854da57-0ec6-ff3d-d2f1-8da1701251e0.jpeg)

4行目の文章は分かりやすいものに変更して下さい。
このファイルをダブルクリックすると、コマンドプロンプトが起動し以下のように表示されればOKです。
![qiita02.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/bf9b8965-fc81-47c0-a55a-da3e8cb64a68.jpeg)


#タスクスケジューラ登録
次は先程作成したバッチファイルを指定した時刻に起動するようにします。

■windowsキーを押した後「タスクスケジューラ」と入力し、選択する
![qiita03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/f8900f85-b739-e8aa-79a3-99a869ebe221.jpeg)


■タスクスケジューラが起動するので、「操作」から「タスクの作成」を選択します
![qiita04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/441cca22-b9af-d920-4c35-d0aba887a0f8.jpeg)

■名前と説明を入力し、「OK」ボタンを押します
![qiita05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/f10887c9-8810-8700-3f04-46f5877accda.jpeg)

■「トリガー」タブを選択し、新規ボタンを押します
![qiita06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/66df4790-2540-cf6c-835d-da9f0a42037c.jpeg)

■トリガーの設定画面が開くので、「毎日」を選択し、時刻の箇所を実行したい時刻にし「OK」ボタンを押します
![qiita07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/0c139645-bd7a-fdcf-3602-197555bf9eca.jpeg)

■設定後のトリガーが上記のようになっていればOKです。
![qiita08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/418034ca-a869-a06c-eba7-5c9cbea379fd.jpeg)

■次に「操作」タブを選択し、新規ボタンを押します。
![qiita09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/c445eadf-0762-3d1d-da88-69e16db4ccf7.jpeg)

■操作「プログラムの開始」を選択、プログラム/スクリプトの「参照」ボタンを押し、最初に作成したバッチファイルを選択後、「OK」ボタンを押します
![qiita10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/4445fca6-82d7-027c-3256-478e1b5c427a.jpeg)


これで設定は完了です。

指定した時刻になり、コマンドプロンプトが起動されれば成功です。
![qiita02.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/fa0ab611-aefd-fbfe-34fc-f7c4a0ea4cdc.jpeg)

#最後に
この通知はWindowsの標準機能で簡単に行うことが出来るので、
何か毎日必ず行う作業がある方は是非設定し忘れないようにすると良いと思います。
Rubyのプログラム実行

本日は、基礎中の基礎になるがRubyのプログラムの実行の仕方を記事にしたいと思う。
プログラムを実行するまでの流れはとてもシンプル。

1.ファイルを作成
2.ファイルにプログラムを記述
3.ファイルを指定してプログラムを実行

最終目標は、ターミナル上に「Hello world」と表示させる。

### Rubyファイルの作成
まず、テキストエディタを開きファイルを作成する。
Rubyファイルを作成するには、拡張子に「.rb」をつける。
[![Image from Gyazo](https://i.gyazo.com/6d06a1f311d8201e92c79049b8a135ed.png)](https://gyazo.com/6d06a1f311d8201e92c79049b8a135ed)
これで、作成は完了。

### Rubyでプログラムを書く
作成したファイルにプログラムを書いてみる。

```ruby
puts "Hello World"
```
putsは、Rubyの命令の1つで、ターミナルの画面に文字を表示するための記述。

### プログラムの実行
ターミナルから、先ほど作成したファイルのディレクトリまで移動する。
そして、rubyコマンドでファイルを実行させる。

■rubyコマンド
rubyコマンドはRubyに関するさまざまな操作が実行できるコマンド。
[![Image from Gyazo](https://i.gyazo.com/7dbaf1d130e8f21b558acb81456c8ef4.png)](https://gyazo.com/7dbaf1d130e8f21b558acb81456c8ef4)
[![Image from Gyazo](https://i.gyazo.com/75e5c38ded8fef4463f770c11e904a51.png)](https://gyazo.com/75e5c38ded8fef4463f770c11e904a51)

Hello Worldが表示されれば、ファイルの実行完了。
画面の遷移方法まとめ【Swift】

Swift勉強2日目、自分用の備忘録です。

Swiftで画面遷移をする方法は以下の3つ。
①ボタンを押して遷移（ノーコード）
②セグエで遷移
③ナビゲーションコントローラーで遷移

## ①ボタンを押して遷移（ノーコード）
ボタンをcontrol押しながら遷移先のVCにドラッグ&ドロップ


## ②セグエで遷移（値を渡さない時）
1. セグエにIdentifierを付与
2. コードを実装


```swift
// 遷移
performSegue(withIdentifier: "next", sender: nil)
```

## ②セグエで遷移（値を渡す時）
1. セグエにIdentifierを付与（Storyboard Segue）
2. コードを実装

```swift
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // 遷移先のVCを変数にいれる
    let nextVC = segue.destination as! NextViewController
    // 遷移先のVCの変数（count）に渡したい値をいれる
    nextVC.count = "foo"
}    

// 遷移
performSegue(withIdentifier: "next", sender: nil)
```

## ③ナビゲーションコントローラーで遷移
1. `Editor > Embed In > Navigation Controller`からナビゲーションコントローラーを追加
2. 遷移先のビューコントローラーにStoryboard IDを付与
3. コードを実装

```swift
// 遷移先のVCを変数に代入
let nextVC = storyboard?.instantiateViewController(withIdentifier: "next") as! NextViewController
// （遷移先のVCの変数（todoString）に値を代入）        
nextVC.todoString = "" 
// 遷移        
navigationController?.pushViewController(nextVC, animated: true)
```

---

## 戻るボタン

```swift
@IBAction func back(_ sender: Any) {
    dismiss(animated: true, completion: nil)  // この一行でOK
}
```
特定のページからのアクセスではアコーディオンを開いて表示させる

# 問題
アコーディオンで作られた FAQ のページがあります。よく見かけますね。
![1616853856872.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38728/567ac3ac-ba24-2463-5ab1-ec5f7397d90c.png)

通常こちらのページにアクセスした時は初期値では全てアコーディオンが閉じている仕様です。

ですが、あるページからアクセスした時は、アコーディオンの一つを開いた状態で遷移したい時があります。

例えば、あるページに「問い合わせはこちら」のリンクがあり、問い合わせ先は FAQ の Question に記載されている時などです。

![1616854102838.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38728/db6a40ca-81cb-7d67-56e9-8d9605ba0412.png)

# 解決法
遷移元の HREF の値に特定の文字列を入れる（アンカーリンク）
遷移先で自身の URI の文字列を取得。
特定の文字列（アンカーリンク）を検出できたらアコーディオンを開く処理をする

# ソースコード

### リンク元のページ
HREF の値に ``` #acc03 ``` を記述します。

```html:index.html
<a href="target.html#acc03">リンク先</a>
```

### リンク先のページ（FAQ）

アコーディオンを開閉させるコードはこちらの記事では省略しますが、``` is-open ``` というクラスをトグルさせて表示非表示を切り替えているものとします。


```html:faq.html
<div class="accordion">
  <div id="acc01" class="accordion-item">
    <h2 class="accordion-title">Question 1</h2>
    <div class="accordion-content">
      <p>This is an Answer 1</p>
    </div>
  </div>
  <div id="acc02" class="accordion-item">
    <h2 class="accordion-title">Question 2</h2>
    <div class="accordion-content">
      <p>This is an Answer 2</p>
    </div>
  </div>
  <div id="acc03" class="accordion-item">
    <h2 class="accordion-title">Q. 問い合わせ先はどちらでしょうか。</h2>
    <div class="accordion-content">
      <p>A. 問い合わせ先はこちらです。</p>
    </div>
  </div>
</div>
```

### JS

リンク先のページ（FAQ）のアドレスバーの文字列を取得して、
もし、その文字列に ```#acc03```が含まれていたら、
```id="acc03"``` の要素に ```is-open``` クラスを付与します。
※こちらのJavaScript は FAQ ページで読み込むものです。

```javascript
var url = location.href;
if (url.match(/#acc03/)) {
  var acc = document.getElementById('acc03');
  acc.classList.add('is-open');
}
```
RESTfull

#【RESTfull】

Kojimaさんの[フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座](https://www.udemy.com/course/rails-kj/?utm_source=adwords&utm_medium=udemyads&utm_campaign=LongTail_la.JA_cc.JP&utm_content=deal4584&utm_term=_._ag_107181210924_._ad_452531407122_._kw__._de_c_._dm__._pl__._ti_dsa-930814700879_._li_9053306_._pd__._&matchtype=b&gclid=CjwKCAjwr_uCBhAFEiwAX8YJgYWPSv0ZaHkuaXoI5SyN13QgUUfMfvM-pfYp5piDMjZGYJbJXJa-yRoCElsQAvD_BwE)でRESTfullについてわかりやすく説明されていました。
Kojimaさん ありがとうございます。

その講座のメモです。

##RESTとは。
 
**HTTPメソッドを使って、Webのリソースを操作する際の設計方法**

Railsにおいてのリソースとは、主にDBに保存されているテーブルのデータのこと。

　例）ユーザや掲示板アプリの情報など。

##主にRailsで使用されるHTTPメソッド

Webブラウザからサーバにリクエストするときは、目的に応じてメソッドを使い分ける。
　→　これらの処理を記述するのはプログラマーの仕事！

GET　→　リソースの取得
POST　→　リソースの作成
PATCH / PUT　→　リソースの更新
DELETE　→　リソースの削除

##HTTPメソッドとコントローラ、 アクションの対応

1、HTTPメソッドとパスの組み合わせでサーバーにリクエストが来る。
2、ルーティングによって、コントローラーのアクションに転送される。

HTTPメソッド|パス|コントローラ#アクション|目的|
|:---|:---|:---|:---|
|GET|/boards|boards#index|リソースの一覧表示|
|GET|/boards/new|boards#new|リソース作成フォームを表示|
|POST|/boards|boards#create|リソースを作成|
|GET|/boards/:id|boards#show|1つのリソースの詳細を表示|
|GET|/boards/:id/edit|boards#edit|1つのリソースの編集フォームを表示|
|PATCH/PUT|/boards/:id|boards#update|1つのリソースの更新|
|DELETE|/boards/:id|boards#destroy|リソースの削除|
 ※ :id は、実際は特定のリソースのidが入る。
EC2のプロセス監視と自動再起動

EC2で稼働しているプロセスがダウンした時に、自動起動する仕組みを作っていきたいと思います
今回は、dockerプロセスがダウンした場合を例とします

# 前提条件
* Amazon Linux2
* amazon-ssm-agentインストール済み
* cloudwatch-agentインストール済み 
* dockerインストール済み
* EC2のIAMロールにAmazonSSMFullAccessのポリシーがアタッチ済み

# プロセスの監視を設定します

## Systems Manager パラメータストアの設定
CloudWatchのメトリクスに入れるための定義を作成します
AWSマネジメントコンソールからSystem Manager、パラメータストアをたどり、「パラメータを作成」を実行します
タイプはString、データ型はtextで、以下を値に設定します

```json:値
{
    "metrics": {
        "append_dimensions": {
            "ImageId": "${aws:ImageId}",
            "InstanceId": "${aws:InstanceId}",
            "InstanceType": "${aws:InstanceType}"
        },
        "metrics_collected": {
            "procstat": [
                {
                    "exe": "docker",
                    "measurement": [
                        "pid_count"
                    ],
                    "metrics_collection_interval": 60
                }
            ]
        }
    }
}
```

## Systems Manager Run Commandを実行
EC2のCloudwatchAgentに反映します
AWSマネジメントコンソールからSystem Manager、Run Commandをたどります
コマンドドキュメントに、**AmazonCloudWatch-ManageAgent** を選択します
Actionは、**Configure(Append)**を選択します
Optional Configuration Locationに、先ほど作成した **パラメータストアの名前** を入力します
実行して、反映を待ちます

## Cloudwatchでアラームを作成
数分して、AWSマネジメントコンソールからCloudwatch、アラームをたどり、アラームの作成を実行すると、カスタムメトリクスが表示されると思います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219565/661085fd-07b8-56ea-0af1-9c71748e3047.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219565/3450a6e4-eb29-48b7-e43e-9457b4e1ed8b.png)


# プロセスの再起動(自動起動)の実装を設定します





## lambdaを作成します
* プロセス監視のアラートをトリガーに、SSMに再起動コマンドを送るlamdbaを作ります
* AWSマネジメントコンソールからLambdaをたどり、関数の作成を行います
* python2.7で作ります
* lambda作成と同時に作ったRoleを開いて、「AmazonSSMFullAccess」のポリシーを付与しておきます


```python:lambda_function.py
import boto3
import logging
import json

logger = logging.getLogger()
logger.setLevel(logging.INFO)

ssm = boto3.client('ssm')

def lambda_handler(event, context):

    try:
        message = json.loads(event['Records'][0]['Sns']['Message'])
        # instanceIdが入るDimensionsの配列番号を一度ログに出して確認　以下は[1]にinstanceidが入る場合
        # logger.info(message)
        instanceId = message['Trigger']['Dimensions'][1]['value']
        logger.info(instanceId)
        command = "実行するコマンド" # sudo service docker.service start && sudo docker run xxxxx
        ssm.send_command(
            InstanceIds = [
                instanceId
            ],
            DocumentName = "AWS-RunShellScript",
            Parameters = {
                "commands": [
                    command
                ],
                "executionTimeout": ["600"]
            },
        )
        logger.info("send_command")
    except Exception as e:
        logger.error(e)
```

* lambdaのトリガーは、Cloudwatchアラームで指定した、SNSトピックを指定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219565/d523c437-d42e-a6d1-ef1d-10386c7dc1bc.png)

これで、以下のようにdockerを落としてみて、ちゃんと上がって来ればOKです

```bash
sudo service docker.service stop
```
シンプルで使いやすいUUID生成ツールを作ってみた

# はじめに

こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？

ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。

# UUID生成ツール

今回紹介させていただくのは、[UUID生成ツール](https://web-tools.presto-service.com/uuid-generator)です。

画面は以下の通りです。

![UUID生成ツール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/34d4561e-508a-977e-6771-0a885f2ea915.png "UUID生成ツール")

# 使い方

使い方は以下のとおりです。

1. 生成したい個数と、大文字にするかどうかを指定する
1. 結果

## 1. 生成したい個数と、大文字にするかどうかを指定する

テキストフィールドに生成したい個数を指定します。
![生成したい個数](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/110b0025-66ab-0f16-6751-b7d00a678288.png "生成したい個数")
大文字英字で生成するかどうかを指定します。
![大文字にするかどうか](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/035f8d58-0b46-d57f-b927-c253893e3bcb.png "大文字英字で生成するかどうか")

## 2. 結果

以下のようにUUIDが生成されます。
テキストフィールドをクリックすることでコピーすることができます。
![UUID生成結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/8aa088a7-8cad-9802-329a-08942ff0cb43.png "UUID生成結果")

# まとめ

今回は、[UUID生成ツール](https://web-tools.presto-service.com/uuid-generator)の紹介をさせていただきました。

他にも、私達が作った[presto web tools](https://web-tools.presto-service.com/)の紹介もしていますので、良ければ合わせてご覧ください。

https://qiita.com/presto/items/62e962c1f50572f8d399

https://qiita.com/presto/items/2d79f8208f78685ff990

https://qiita.com/presto/items/21a6713a108da35075c0

https://qiita.com/presto/items/e8e1d6fa5b07306937d9

https://qiita.com/presto/items/8dfa800eb8d3008686b1

今後もよろしくお願いします。
ありがとうございましたー！
備忘録

==============HTML=================
<HTML>
 <body>
  <div class="bgImg">
  画像<br><img src="https://beiz.jp/images_P/sky/sky_00013.jpg" alt="aozora" width="100px">
  </div>
  //背景画像を当てるdiv
  <div id="contents">
    <p class="srcTxt">あああ</p>
  </div>
  </body>
</HTML>

==========CSS=============
#contents {
  background-image: none;
  background-color: #C0C0C0;
  background-size: cover;
  height: 1000px;
  width: 700px;
}


===========JS==================
$(document).ready(function(){
    var src = $(".bgImg img").attr("src");
    var bgUrl = "url(" + src + ")";
    $(".srcTxt").text(src);
    $("#contents").css("background-image", bgUrl);
});
CPythonのスタック操作マクロ

#概要
CPythonでのスタック操作のマクロを確認しておく。
雰囲気を見ることが目的なので、デバッグ版ではないものに限定する。

#内容
Python 3.x
##スタック操作マクロ
```c:Python/ceval.c
/* The stack can grow at most MAXINT deep, as co_nlocals and
   co_stacksize are ints. */
#define STACK_LEVEL()     ((int)(stack_pointer - f->f_valuestack))
#define EMPTY()           (STACK_LEVEL() == 0)
#define TOP()             (stack_pointer[-1])
#define SECOND()          (stack_pointer[-2])
#define THIRD()           (stack_pointer[-3])
#define FOURTH()          (stack_pointer[-4])
#define PEEK(n)           (stack_pointer[-(n)])
#define SET_TOP(v)        (stack_pointer[-1] = (v))
#define SET_SECOND(v)     (stack_pointer[-2] = (v))
#define SET_THIRD(v)      (stack_pointer[-3] = (v))
#define SET_FOURTH(v)     (stack_pointer[-4] = (v))
#define BASIC_STACKADJ(n) (stack_pointer += n)
#define BASIC_PUSH(v)     (*stack_pointer++ = (v))
#define BASIC_POP()       (*--stack_pointer)
...
#define PUSH(v)                BASIC_PUSH(v)
#define POP()                  BASIC_POP()
#define STACK_GROW(n)          BASIC_STACKADJ(n)
#define STACK_SHRINK(n)        BASIC_STACKADJ(-n)
#define EXT_POP(STACK_POINTER) (*--(STACK_POINTER))
```
`stack_pointer`が使われて実装されている。

#参考にさせて頂いたページ
- https://github.com/python/cpython/blob/d41bdddbede45890e4effb1bbea6a346ff706695/Python/ceval.c
Rails 6.1.3にアップグレードした後に「undefined method `service_name' 」のエラーが発生する

# 背景

https://github.com/rails/rails/issues/41750
上記のissueがあるので、プロジェクトのRailsバージョンを6.0.3から6.1.3にアップグレードする必要があります。

```
bundle update rails
```

bundleは無事に完成しました。
ただし、サーバーを再起動した後は`image_tag`の部分は「undefined method `service_name' 」のエラーが発生しました。

# 原因

https://edgeguides.rubyonrails.org/6_1_release_notes.html#active-storage-notable-changes
>ActiveStorage::Blob#service_name column was added. It is required that a migration is run after the upgrade. Run bin/rails app:update to generate that migration.

Railsの6.1.3のバージョンで新たな`service_name`がactivestorageに追加されました。

# 解決方法

記載の通りに`bin/rails app:update`を実行してもらうと既存の配置も変更されました。
配置変更なんてリスクが高いので、やらない方がいいと思います。
その故に、カラムを増やしたら、カラムを追加します。
activestorageをインストールする際と同じく、activestorageのテーブルを更新します。

```
rails active_storage:update
rails db:migrate
```

Railsサーバーを再起動して、問題が治されました。
Xilinx ISEプロジェクトをGitで管理する

# はじめに

ISE 14.7が2013年に最終リリースされてから8年ほどですが
Spartan-6などの開発や過去製品の保守で使用することも稀にあります。

古いプロジェクトはバージョン管理されていないことも多いので
バージョン管理できるようにする手順をまとめました。

# 開発環境

* Windows10
* ISE 14.7

# 想定

* HDLとIPのみのプロジェクト
* MicroBlazeなどのソフトコアCPU関係は対象外

# 手順

作業前にバックアップは取っておくこと

## 管理対象を整理

古いコードがプロジェクト内に混在している場合があるので必要なファイルを整理します

1. `project_name.xise`を開く
1. ツールバーからProject > Generate Tcl ScriptでTCLを生成する
1. TCLを生成する(設定はデフォルトでOK)
    * `project_name.tcl`
    * All properties with complete script
1. 生成された`project_name.tcl`を開く
1. `add_source_files`関数内で`xfile add`されているファイルを管理用フォルダにコピーする
    * `src`、`test`、`ipcore`を分類する
    * IPについては各IP毎に`ipcore`内にフォルダを作って分類する
1. プロジェクトから既存のファイルを削除し、コピーしたファイルを追加する
1. ISEを閉じる
1. プロジェクトフォルダ内の`project_name.xise`以外を全て削除する。
1. `project_name.xise`を開く
1. Generate Programming Fileを実行し動作確認する。
    * IPの再生成を確認されるのでYesを選択する
1. 整理したファイルを管理できるように`.gitignore`を書く

この時点での管理対象ファイルは以下のような形になります

```
root/
 ├ .gitignore
 ├ project_name/
 │ └ project_name.xise
 ├ src/
 │ ├ *.vhd
 │ └ *.ucf
 ├ test/
 │ └ *.vhd
 └ ipcore/
   └ ip_name/
     └ ip_name.xco
```

## TCLによる管理

プロジェクト再生成までtclで管理するようにします

1. `project_name.xise`を開く
1. ツールバーからProject > Generate Tcl ScriptでTCLを生成する
1. TCLを生成する(設定はデフォルトでOK)
    * `project_name.tcl`
    * All properties with complete script
1. `rebuild.bat`を作成する
    * 各IPの再生成用のtclは適宜選択する
1. rebuild.batを実行し動作確認する
1. `.gitignore`を更新する
    * `project_name.tcl`を管理対象に追加
    * `project_name.xise`を管理対象から削除
    * IPの生成tclをを管理対象に追加
    * `rebuild.bat`を追加

```bat:rebuild.bat(参考)
REM Set ENV
call C:\Xilinx\14.7\ISE_DS\settings64.bat

REM Regenerate IP
cd root\ipcore\ip_name
xtclsh gen_ip_name.tcl

REM Regenerate project
cd root\project\project_name
xtclsh project_name.tcl rebuild_project
```

以上で管理対象ファイルは以下のような形になります

```
root/
 ├ .gitignore
 ├ rebuild.bat
 ├ project_name/
 │ └ project_name.tcl
 ├ src/
 │ ├ *.vhd
 │ └ *.ucf
 ├ test/
 │ └ *.vhd
 └ ipcore/
   └ ip_name/
     ├ gen_ip_name.tcl # IP毎に異なる
     └ ip_name.xco
```

# 参考

* [TCL internal error (ISE 13.2)](https://forums.xilinx.com/t5/Design-Entry/TCL-internal-error-ISE-13-2/td-p/187692)
* [ISIM（Xilinx製HDLシミュレータ）をBATファイルで起動して使用する方法](https://qiita.com/takeru0x5569/items/c2805e109647b1b89fb2)
クッキーをブラウザで覗いてみる/JQuaryで設定

#前提として
この記事ではクッキーに入れる情報を、クライアント側で設定していますが、
セキュリティ上、基本的には「クッキーに入れる情報はサーバー側で用意したものをフロントで保管するだけ」であるべきという考えが現在は主流となっているそうです。

ーーーーーーーー

クッキー情報の取得方法などを学習がてらまとめて書いてみます。
クッキーの仕組みをまとめた記事はこちらがとてもわかりやすかったです。こちらを読んだ上or理解された上でお気軽にお読みいただければ幸いです！

https://qiita.com/7968/items/ce03feb17c8eaa6e4672#%E8%87%AA%E5%88%86%E3%81%AE%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8Bcookie%E3%82%92%E7%A2%BA%E8%AA%8D


##ブラウザ
Chromeでは標準でクッキーを情報を見ることができます。
Chromeで検証モードに切り替え、Applicationタブを選び、その中のクッキーのアイコンの場所に、今見ているサイトのurlが表示されています。
こちらをクリックすると、そのサイト持たせているクッキー情報が、キーとバリューで表示されています。
サイトにより持たせている情報も異なりますので、いろんなサイトを見てみると面白いかも。
Twitterの場合
![スクリーンショット_2021-03-27_21_16_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287983/34560dca-2e9c-bba7-0efb-cb8045c271f0.png)

##jsで設定する
jsではクッキー情報は複数繋がっており、sliceとか出力するのがなかなか大変なので、
jquaryのプラグイン「jquery-cookie」でコントロールしてみます。

```html:index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--jqueryとjquery-cookieを読み込み-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
    <title>クッキーテスト</title>
</head>
<body>
    <div class="yourname">
        あなたの名前は
        <div class="js-cookie-yourname"></div>
        です
    </div>
   
    <script>
        //cookieのyournameに「太郎くん」を設定
        $.cookie('yourname','太郎くん',{ secure: "None"});
        //html内にクッキーの情報を挿入
        $('.js-cookie-yourname').html($.cookie('yourname'));
    </script>
    
</body>
</html>


```

この方法で、firefoxだとクッキーを値を出力できました。
[サイト表示]
![スクリーンショット 2021-03-27 23.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287983/7d7ddcb4-a8de-2666-7954-7bcf2d7b6113.png)
（背景白サイトだからわかりづらい）

##Chromeではうまくいかない
ただ、上記の処理を単純にローカルのURLでやった場合、Frefoxだとうまく行きますが、Chromeだと出力されません。
最近のChromeは、セキュリティ上基本的にhttpsのurlじゃないとクッキーの送信が行えなくなったようです。

>https://developer.mozilla.org/ja/docs/Web/API/Document/cookie
>;secure https の通信を使用しているときだけ、クッキーが送信されます。 Chrome 52 以前では、このフラグは http ドメインからのクッキーに設定することができました。

とのこと。
サードパーティクッキー（別ドメインから発行されてるクッキー）も厳しくなったので、それと同じような感じなのだろうか。。
https://news.yahoo.co.jp/articles/2d58d3425a3a6f8b045350c88ae14162b2b5839b
（いつか調べるかも）
#4 IPA講評の「正答率が高かった／低かった」の傾向

ネットワークスペシャリスト試験の過去問は解答と同様に、講評が公開されています。
よく見ると、それぞれの講評で「正答率が低かった／高かった」の記述があるんですよね。

 - https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_mondai.html

これ、なんか傾向が見えそうなので集計してみました。
ここでは設問ごとの正答率の言及ではなく、

 - 「全体として正答率は低かった」
 - 「全体として正答率は高かった」

のどちらかが記載されているかを確認しました。一部表記揺れがあったので、注釈で補足しています。
「＊」マークは、全体の正答率について記述がなかったものです。

## 講評から見る正答率

|  年度  |  午後1問1  |  午後1問2  |  午後1問3  |
| ---- | ---- | ---- | ---- |
|  R1  |  ＊  |  低かった  |  ＊  |
|  H30  |  ＊  |  ＊  |  低かった  |
|  H29  |  低かった  |  高かった  |  ＊  |
|  H28  |  高かった  |  低かった  |  低かった  |
|  H26  |  低かった  |  高かった  |  高かった [^1]   |
|  H25  |  高かった  |  高かった  |  低かった  |
|  H24  |  高かった  |  高かった  |  低かった [^2]  |
|  H23  |  高かった [^3]  |  高かった [^4]  |  低かった [^5]  |
|  H22  |  高かった [^6]  |  低かった [^7]  |  低かった [^8]  |
|  H21  |  低かった [^9]  |  高かった  |  高かった  |

こうしてみると毎年、正答率高めの設問と低めの設問が織り交ぜられているんですね。
３問全てが「高かった／低かった」となっている年度は無いので、バランス取っているのかもしれません。

「高かった」問題は確かに解説を読んでも違和感あまり無いですが、「低かった」問題は解説を読んでも「？」となることが多いです。
合格のための戦略としては、正答率が高めになる問題を取りこぼさないようにするのが大事なんでしょうね。

[^1]: 「全体として正答率は高く、〜」
[^2]: 「全体として正答率は低めであり、〜」
[^3]: 「全体として、おおむねできていた。」
[^4]: 「おおむね良くできていた。」
[^5]: 「全体として、あまり出来はよくなかった。」
[^6]: 「おおむね予想通りの正答率となった。」
[^7]: 「全体として正答率はやや低めであり、〜」
[^8]: 「予想に比べて正答率は低かった。」
[^9]: 「全体として正答率は低めであり、〜」
【Vue.js】Firebase Authenticationを使用してユーザ名を表示させる

# Firebase Authenticationを使用してユーザ名の更新をする

メールアドレスとパスワードの取得に関してはたくさん記事があったのですがユーザ名更新に関しては少なかった印象です😅💦

## ※修正
以下の観点で修正したものを、[【Vue.js】Firebase Authenticationを使用してユーザ名を表示させる改](https://qiita.com/tanoken729b/items/bacda5aebab22a31a518) に書き直しました！

- vuexのstoreでメソッド管理
- firebaseの環境設定を別ファイルに切り出す


# やりたいこと
vueプロジェクトでfirebaseを使用して、メールアドレスとパスワード、ユーザ名を入力して登録可能とする

## 具体的には

- ```createUserWithEmailAndPassword ```でメールアドレスとパスワードを取得

- 上記を取得し、ログイン状態になった後リダイレクトさせる前に```updateProfile ```でユーザ名を更新することでリダイレクト先のページで入力したユーザ名を表示させる←メールアドレスとパスワードの取得に関してはたくさん記事があったがユーザ名更新に関しては少なかった

### 以下に関して勉強になった

- 非同期処理の理解
- firebaseでのユーザ管理についての理解
- ```Uncaught TypeError: Cannot read property ‘プロパティ名’ of undefined```エラー

## やったこと

新規登録画面
![スクリーンショット 2021-03-27 23.05.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979873/3c22f8f5-bfdf-a648-8559-997a6d88302b.png)

リダイレクト先画面
![スクリーンショット 2021-03-27 23.05.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979873/abfb8ed2-04c2-1fe4-db5e-bbbcb8ba9d81.png)


##ソースコード


```js

    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then(
          () => {
            firebase.auth().currentUser.updateProfile({
              displayName: this.username,
          })
        .then(
          () => {
            this.$router.push('/')
          })
        })
        .catch(error => {
          alert(error.message)
        })
    },

```

# 全体

```vue
<template>
  <div class="signup">
    <h1>新規登録画面</h1>
    <table>
      <tr>
        <td>ユーザ名</td>
        <td><input type="text" placeholder="userName" v-model="username"></td>
      </tr>
      <tr>
        <td>メールアドレス</td>
        <td><input type="text" placeholder="E-mail" v-model="email"></td>
      </tr>
      <tr>
        <td>パスワード</td>
        <td><input type="password" placeholder="Password" v-model="password"></td>
      </tr>
    </table>
    <button class="button" @click="signUp">新規登録</button>
      <router-link to="/signin">ログインはこちらから</router-link>
  </div>
</template>

<script>
/* eslint-disable */
import firebase from 'firebase'
// const user = firebase.auth().currentUser;

export default {
  name: 'Signup',
  data () {
    return {
      username: '',
      email: '',
      password: ''
    }
  },
  methods: {
    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then(
          () => {
            firebase.auth().currentUser.updateProfile({
              displayName: this.username,
          })
        .then(
          () => {
            this.$router.push('/')
          })
        })
        .catch(error => {
          alert(error.message)
        })
    },
  }
}
</script>


```

# 参考
#### 非同期処理の理解

https://knowledge.sakura.ad.jp/24888/

https://qiita.com/KuwaK/items/7e31f8b0ef26718c82ea

#### firebaseでのユーザ管理についての理解

https://firebase.google.com/docs/auth/web/manage-users?hl=ja

#### ```Uncaught TypeError: Cannot read property ‘プロパティ名’ of undefined```エラー

https://sbfl.net/blog/2019/02/01/javascript-error-messages/

https://techacademy.jp/magazine/26836
【Flutter】背景にグラデーションを設定

## 概要
画面の背景色にグラデーションを設定する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717966/ada1b5de-a663-5a87-3012-009a59b3f139.png" width="300" height="200">


## コード
```
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Color(0xff4e67b0), Color(0xffbbbcde)],
                begin: FractionalOffset(0.5, 1)
            )
        ),
      ),
    );
```
#Xcodeのショートカット

個人的によく使うショートカットをまとめました。


##移動
|ショートカットキー|動作|
|:--|:--|
|Cmd + Ctr + J| 定義に移動|
|Cmd + Ctr + ←| 前に戻る|
|Cmd + Ctr + →| 次に進む|
|Cmd + Shift + O| ファイル名を検索して開く|
|Cmd + Shift + J| 開いているファイルをナビゲーションエリアでハイライトする|
|Cmd + 0|  ナビゲーションエリアの表示|
|Cmd + Opt +  0| ユーティリティエリアの表示|
|Cmd + Shift + Y| デバッグエリアの表示|
|Ctr + 6| メソッドの一覧表示|
|Cmd + T| タブの追加|
|Cmd + Shift + [ or ]| タブの移動|
|Cmd + Shift +  N| 新しいXcodeを起動|


#編集
|ショートカットキー|動作|
|:--|:--|
|Ctr + I| インデントの調整|
|Cmd + Ctr + E| 変数名のリファクタリング|
|Cmd + /| コメントアウト|
|範囲選択 + ダブルクォーテーション|  ダブルクォーテーションで囲む|


##検索
|ショートカットキー|動作|
|:--|:--|
|Cmd + F| ファイル内検索|
|Cmd + Shift + F| プロジェクト内検索|
|Cmd + G| 次の検索結果に移動|


##デバッグ
|ショートカットキー|動作|
|:--|:--|
|Cmd + R| ビルド実行|
|Cmd + .| ビルド中断|
|Cmd + Shift + K| クリーン|
|F6| ステップオーバー|
|F7| ステップイン|
|F8| ステップアウト|
|Cmd + Ctr + Y| 次のブレークポイントまで実行|

##参考
[Xcodeの基本ショートカットまとめ](https://qiita.com/shikichee/items/348bbdfcf099a8f6d315)
[Xcodeショートカットまとめ](https://qiita.com/yutosa3/items/88e3ebedb74c02e324b2)
忘備録_参照型値渡し

##値渡しと参照の値渡し❌参照渡し❌
####メソッドの引数
メソッドの引数には、基本データ型、参照型のどちらも使用できます。
####基本データ型
呼び出し元でメソッドの引数に基本データ型を使用した場合、メソッドではその値のコピーを受け取ります。
これを 値渡しといいます。
単純に値のコピーを渡しているだけなので、メソッド内でその値に変更を加えても、呼び出し元には影響しません。
####参照型
参照している先をたどると、同じ場所を参照しているため、メソッド内で値へ変更を加えると呼び出し元にも影響を与えます
######参考書スッキリわかるJava
配列の例のように、引数としてアドレスを渡すことを参照渡しと言いますが、＊参照渡しを行うと呼び出し先で加えた変更が呼び出し元にも影響するようになります。(なお、javaのこの仕組みは、✳️厳密には「参照型の値渡し」と言われるもので、狭義の参照渡しと区別することがあります)。*ここが紛らわしい原因で、赤文字で書いているせいでこの覚え方をしてしまったがついでに書かれていた,✳️参照型の値渡しが正しい。

####StringもListも参照型変数です。Javaは参照渡しできない言語です。

1. 🔴**値型変数**の**値渡し**
2. ❌値型変数の参照渡し
3. 🔴**参照型変数**の**値渡し**
4. ❌参照型変数の参照渡し

Javaができるのは 1. と 3. だけです。

####インスタンスの引数
メソッドにインスタンスを引数で渡した場合、呼び出し先のメソッドで引数のインスタンスを変更すると呼び出し元のインスタンスも変更されます。その為、例result()メソッド内で引数の例Calcインスタンスに新しい計算式,答えを設定すると、サーブレットクラスの例Calcインスタンスにも新しい計算式,答えが設定されます。この仕組みを＊参照型値渡し＊と言います。
例x,y,opeだと値渡しをしてしまっていた、これでは、値が描き変わって別のアドレスに保存されてしまっていた/ここは参照型値渡しをして、アドレスを書き換える。
Docker環境を作り、モデルを投稿する(Windows10)

[日本取引所グループ ファンダメンタルズ分析チャレンジ | SIGNATE - Data Science Competition](https://signate.jp/competitions/423)のためにDocker環境を作ります。

#環境
Windows10

#Dockerインストール
[Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)の`Docker Desktop for Windows`をダウンロードしてインストール。

エラーが発生、しかし意味が分からないので先に進みます。

![err1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/872219/3320628d-8538-6288-ff0c-4644bee7e860.png)


#起動
[株式分析チュートリアル | 日本取引所グループ | 2.13. モデルの提出](https://japanexchangegroup.github.io/J-Quants-Tutorial/#_%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AE%E6%8F%90%E5%87%BA) この通りに実行してみます。

```
C:\Users\> docker pull continuumio/anaconda3:2019.03
error during connect: This error may indicate that the docker daemon is not running.: Post http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.24/images/create?
fromImage=continuumio%2Fanaconda3&tag=2019.03: open //./pipe/docker_engine: The system cannot find the file specified.
```

#`docker daemon is not running.`？

[windows - Windows10の環境で docker コマンドを実行するとエラーが発生する - スタック・オーバーフロー](https://ja.stackoverflow.com/questions/63492/windows10%E3%81%AE%E7%92%B0%E5%A2%83%E3%81%A7-docker-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%A8%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%99%E3%82%8B)　・・・これと似ている感じがします。

Windowsのスタートメニューから「Docker Desktop」を探し、起動すると、さっきと同じエラーが出ました。これは何なんだろう？

#WSL2って何だろう？

[Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)

WindowsでLinuxを使えるアプリらしい。
ガイドにそって進むとLinuxがインストールできました。
すごい。

#もう一度Dockerを起動させる。
なんやかんや動いてくじらの画面が出てきました！

#もう一度Docker pullを実行する。
なんやかんや動いて環境ができたような雰囲気です。

#この環境でなんか動かすには？
`continuumio/anaconda3:2019.03`でググって、

[【画像で説明】DockerでAnaconda環境をつくり、コンテナの中でVSCodeを使う - Qiita](https://qiita.com/komiya_____/items/96c14485eb035701e218)

こちらを参考にしました。

1. デスクトップに作業フォルダを作る。
* Dockerfileを作る。メモ帳に呪文を書いて、ファイル名`Dockerfile`で保存しました。
* `docker build -t watashino_image_file`を実行。
※イメージ名は小文字でした
* docker-compose.ymlを作る
メモ帳に呪文を書いて`docker-compose.yml`で保存しました。
* `docker-compose up` 実行
なんか動いてる！`
* `localhost:8080`にアクセス。
 Jupyter Lab が開きました！

これでモデルを作って投稿すればよさそうです。
(続く)
sass-loader11.xはwebpack4以下では動かなくなった

GitHubに置いてあるVueのアプリケーション。先日、いつものようにdependabotが送り付けてくるプルリクエストを雑にマージしていると、突然CodePipelineからビルド失敗の通知が飛んできました。

ログ曰く

```
> flowerstand-frontend@1.0.2 build:prod /codebuild/output/src984942440/src/frontend/app
> vue-cli-service build --mode production


-  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 ERROR  Failed to compile with 1 error5:29:44 PM

 error  in ./node_modules/vuetify/src/components/VAlert/VAlert.sass

TypeError: this.getOptions is not a function


 @ ./node_modules/vuetify/lib/components/VAlert/VAlert.js 5:0-52
 @ ./node_modules/vuetify/lib/components/VAlert/index.js
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! flowerstand-frontend@1.0.2 build:prod: `vue-cli-service build --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the flowerstand-frontend@1.0.2 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-03-26T17_29_44_078Z-debug.log
```

このときにバージョンを上げたのはsass-loaderで、ログを見るにいかにもそれっぽい感じのこけ方をしています。メジャーバージョンが上がっていたのでリリースノートを確認すると

https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0

> ⚠ BREAKING CHANGES
> minimum supported webpack version is 5

はい。

Vue2.xはまだwebpack4なので、sass-loaderのバージョンを落とします。

```package.json
    "sass-loader": "^10.1.1",
```

で

```
$ npm install
```

これで解決。

しかしsass周りってどうもトラブルが多い気がする・・・。
Shopify アプリの scope 再認証がうまく行かない時（Ruby on Rails）

## 背景
scope に変更があった際は再認証を行う必要があります。
そこで以下の様な URL にユーザーを redirect するよう実装していたのですが、無限ループが発生したりどうにもうまく行かない状況でした。

```
https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}
```
参照: [Ask for permission | Shopify Developers](https://shopify.dev/tutorials/authenticate-with-oauth#step-2-ask-for-permission)
参照: [Infinite redirect between /login, Home#index, and /granted_storage_access | shopify_app](https://github.com/Shopify/shopify_app/issues/1053)
## 解決策
omniauth-shopify-oauth2 の下記の issue に回答があるように、シンプルに `/login` にアクセスする事で再認証画面に遷移されました。
https://github.com/Shopify/omniauth-shopify-oauth2

```
https://{shop}.myshopify.com/admin/apps/{app_name}/login
```

## 注意点
- `/login` にアクセスする前に `config/initializers/shopify_app.rb` 等で定義されている scope をまずは更新する必要があります。（サーバーの再起動も忘れずに）
- 既に認証されている scope と新しい scope に差分がある場合のみ再認証画面に遷移されます。
- shopify_app v17.1.0 からは再認証処理を自作しなくて良くなりました。
  - 参照: https://github.com/Shopify/shopify_app/blob/master/docs/shopify_app/handling-access-scopes-changes.md

## 参照
- [How to update scopes and then allow user to re-auth? | omniauth-shopify-oauth2](https://github.com/Shopify/omniauth-shopify-oauth2/issues/92)
- [Shopify Public アプリの OAuth scope を後から変更する方法 | Zenn](https://zenn.dev/kei178/articles/bfabebd2e4217a)
- [Authenticate with OAuth | Shopify Developers](https://shopify.dev/tutorials/authenticate-with-oauth)
- [Handle changes to access scopes requested by your app | Shopify Developers](https://shopify.dev/tutorials/authenticate-your-app-using-session-tokens#5-handle-changes-to-access-scopes-requested-by-your-app)
- [Handling changes in access scopes | shopify_app](https://github.com/Shopify/shopify_app/blob/master/docs/shopify_app/handling-access-scopes-changes.md)
- [How to re-auth shop for new scope? | shopify_app](https://github.com/Shopify/shopify_app/issues/578)
Rails Server起動後に、Blocked host: ホスト名.vfs.cloud9.ap-northeast-1.amazonaws.comと表示されるときの対処法

<h2>症状</h2>
cloud9上でRailsをダウンロードして、諸々updateしてrails Serverを起動したところ下記のようなエラーが表示されてしまいました。

Railsチュートリアルを参考にセットアップをしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/f08fbe7c-0723-1b1d-f4ca-3c14693712fd.png)

<h2>解決方法</h2>

dev環境のconfigにcloud9へのアクセスを許可するコードを書いたら、正常に動作するようになりました。

```ruby:config/environments/development.rb
Rails.application.configure do
  .
  .
  .
  # Cloud9 への接続を許可する
  config.hosts.clear
end
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/5c273f9d-a73e-c04d-54a8-b5580a84ed23.png)

<h2>参考</h2>
Railsチュートリアル第一章
https://railstutorial.jp/chapters/beginning?version=6.0#cha-beginning
【SpringBoot】簡単なアプリを作ってみよう！(1/3) ~環境設定~

初めまして！これが初投稿です。
現場でSpringBoot2を使っているんですけど、もっと使ってくれる人が多くなればと思い記事を書いていくことにしました。
何か間違っているところがあれば教えていただけると助かります！
それではよろしくお願い致します。
### どんなアプリを作っていくのか
今回作っていくのは商品管理アプリです。
ありきたりですが、単純にSpringの機能が網羅しやすいです。
###### 開発環境
Java:8 
ecripse:4.8.0.RELEASE
### ◇完成画面イメージ
![スクリーンショット 2021-03-27 13.59.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234354/f92f886a-81fa-bb3b-038c-970e9b627ab2.png)
かなりシンプルな画面ですが、これだけでSpringのいろんなことが勉強できます。
アノテーション、Thymeleaf（テンプレートエンジン）、SpringJPA（DB操作）、h２DB、etc...
## 環境設定
プロジェクトを作成していきます。
初期設定は下記の通りです。
![スクリーンショット 2021-03-27 22.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234354/3884baba-d650-846c-7c22-e9b64d424ada.png)

##### 依存関係の設定
![スクリーンショット 2021-03-24 22.01.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234354/d3cae293-e09f-1e05-be15-79632018c660.png)
##### 最終的なプロジェクトイメージ
![スクリーンショット 2021-03-27 22.25.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234354/25e10ff6-5caf-6f95-b789-dc3d4bc8ecbf.png)

## DB接続
H2ライブラリを依存関係に設定済みですので、そのままコードを書いていきます。
application.propertiesは最初からあるファイルですのでそのまま書き込めばOKです！

```application.properties
spring.datasource.tomcat.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:mem:company
spring.datasource.username=user
spring.datasource.password=pass
spring.datasource.schema=classpath:schema.sql
spring.datasource.data=classpath:data.sql
spring.jpa.hibernate.ddl-auto=update
```

続けてDML、DDLのファイルを作成していきます。
パスはsrc/main/resoucesの直下です。

```SQL:schema.sql
CREATE TABLE IF NOT EXISTS PRODUCT(
    id INTEGER NOT NULL AUTO_INCREMENT,
    product_name VARCHAR(100) NOT NULL,
    product_num INTEGER NOT NULL,
    PRIMARY KEY(id)
);
```

```SQL:data.sql
INSERT INTO product (id,product_name,product_num) VALUES (1,'技術本',100);
INSERT INTO product (id,product_name,product_num) VALUES (2,'漫画',100);
INSERT INTO product (id,product_name,product_num) VALUES (3,'小説',100);
```

ここまでできましたら、SpringBootアプリケーションを起動してみましょう！
↓こちらにアクセスしDBを確認することができます
http://localhost:8080/h2-console/

 
↓第2回はこちら
[SpringBoot2で簡単なアプリを作ってみよう！(2/3) ~画面表示~](https://qiita.com/nmaolks/items/95d1fe42809642167f27)
東京メトロ  02系 車側表示灯を点灯させる

東急ハンズや書泉などで「メトロの缶詰」などの店名にて東京メトロの廃車部品が販売されていました。
今回は、丸の内線で使われていた02系の車側表示灯（1500円）を点灯させてみます。
(営団・東京メトロの7000系や02系と03系などの車側表示灯は同じような形状のものがあります。
（車側表示灯が縦と横と故障灯の色が数種類あり）これは02系の103Fのものでしたので修正しました）
![DSC_0652 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9ce46114-069b-010b-4ac7-4620fad25434.jpeg)
##車側表示灯の中身
まずは裏蓋を開けてみます。
![DSC_0654 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3d92d0ea-691f-6337-ab90-aa6f45e27e32.jpeg)
直流100Vで点灯するようになっているようです。
___ワシ丸ドットコム!さんリレーを使って車側灯と運転士知らせ灯を配線してみた！
https://www.youtube.com/watch?v=BpId6cU6sSA___
赤と、橙のＬＥＤが大量についていますね。
![DSC_0656 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0b68fa49-ed1f-fa3c-2f31-f1de03bf54a5.jpeg)
![DSC_0659 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0b1cf545-82ab-49a2-3907-3d4d7efc967f.jpeg)
##点灯回路を作る
当初秋月電子で売っているブリッジダイオードKBPC3510を使用したものを作りました。
![KBPC3510用基板](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6a1f1d33-71fd-6744-c2d0-29c98a69f944.jpeg)
その後、共立電子で4G4B41を購入したので4G4B41用に再製作したので今回はこちらを使用しました。
![4G4B41用基板](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/95c95ad1-a5e4-9941-aa2c-c3fafad7829e.jpeg)
##ケースを製作する
今回も（ https://www.bankin.co.jp/ ）協和工業株式会社 にてケースを製作してもらいました。
今回は、このボトムケースに部品を付けていきます。
![ボトムケース](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2c0405e8-f0ac-fbdd-a93b-6acc1ffef479.jpeg)
#組み立てる
電源となる交流100Vをトランス(HT-7005)で交流70Vに変換し、直流約90Vを生成します。
交流100Vは実効値141Vとなり、ブリッジダイオードを経由することで直流131Vになります。
このため、一度交流70Vに落とす事で約90Vの直流にする事が出来るのです。
（交流141Vはブリッジダイオードにより直流１３１Ｖになるため交流70Vは単純に98Vではなく約90V程度の直流となるはずです）
![DSC_0064 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/70160a25-59fa-e680-891d-d19a502fd031.jpeg)
トランス(HT-7005)を取り付ける。
![DSC_0079 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/25d88c8e-c194-853e-5449-1c3743c718b0.jpeg)
##配線を準備する
コンセントや配線を準備します。
![DSC_0083 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/f8bbc3e9-de0e-6844-fa9d-071175dddd1b.jpeg)
#組立
292と＋に＋を２９０Ｇとーにマイナスを接続しています。
![DSC_0087 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0c4754d8-269c-855d-4083-6633dd8b9a40.jpeg)
#組立の注意
交流・直流100Vを扱う為、電気絶縁手袋や、ON/OFFスイッチ付きのタップなどを使用し安全な環境で作業をするようにしてください。
![DSC_0085 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cf48fe48-73b0-7f91-9272-0b26ab9dd441.jpeg)
#完成
以上で完成です。
![DSC_0096 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/768642c6-94f8-8890-046e-ebf51a855445.jpeg)
#電解コンデンサを使用しない
あまりいい手法ではありませんが、電解コンデンサを使用しない場合、約92Vの直流が出力可能です。
これは、コンデンサにより平滑化されていない為です。
___AC/DC変換の基本－AC(交流)・DC(直流)とは、AC/DC変換が必要な理由
https://techweb.rohm.co.jp/knowledge/acdc/s-acdc/01-s-acdc/9___
![4G4B41用基板](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/95c95ad1-a5e4-9941-aa2c-c3fafad7829e.jpeg)