OmniAICreator/Qiita-1.07M huggingface dataset:
RSpecの書き方(describe/context/it/expect/eq/include)

# はじめに
* Rspecを触る機会があったのでわかる範囲でまとめます
* 今回はとあるページにアクセス可能かをテストする想定で記載しています

* 2021/12/20:初版
* 2022/06/23:細かなレイアウト修正

# describe/context

```request_spec.rb
describe 'アクセス確認' do
  context 'アクセス可能な場合' do
    # 正常にアクセスできること(200)
    # "トップページ"の文言がサクセス先に含まれるか確認
    # リダイレクトされるがアクセスできる(302)
  end

  context 'アクセスできない場合' do
    # 権限がなくてアクセスできない(403)
    # ページが存在しない(404)
  end
end
```
* describeでテストを大まかにグループ分け、さらにその中でcontextを使用してグループ内で細かく分けられる

# it/expect/eq/include

```request_spec.rb
describe 'アクセス確認' do
  context 'アクセス可能な場合' do
    it '正常にアクセスできること(200)' do
      get '/'
      expect(response.status).to eq 200
    end 
    it '「トップページ」の文言がサクセス先に含まれるか確認' do
      get '/'
      expect(response.body).to include 'トップページ'
    end 
    it 'リダイレクトされるがアクセスできる(302)' do
      get '/redirect_page'
      expect(response.status).to eq 302
    end
  end

  context 'アクセスできない場合' do
    it '権限がなくてアクセスできない(403)' do
      get '/my_page'
      expect(response.status).to eq 403
    end
    it 'ページが存在しない(404)' do
      get '/aaa'
      expect(response.status).to eq 404
    end
  end
end
```
* itでcontext内のテスト項目を記述する
* 実行時**it単位**で結果が返ってくるため、極力it内に複数のテスト観点は記述しないようにする
* `expect(XXX).to eq YYY` と記述することで「XXXはYYYと等しくなる」というテスト項目になる
* `expect(XXX).to include YYY` と記述することで「XXXはYYYに含まれる」というテスト項目になる
    * ※XXX：取得値　YYY：期待値

# 実行方法
* 以下を実行するとテストをフルで実施される(項目数によるが、実行に時間がかかる)

```terminal
$ bundle exec rake spec
```

# 一部のテストだけ実行する
#### 特定のテストファイル(またはディレクトリ)のみを実行する
* 以下を実行で指定したパスのファイル内のテストのみ実行できる

```terminal
$ bundle exec rspec spec/request/request_spec.rb
```

* ディレクトリごと指定することも可能

```terminal
$ bundle exec rspec spec/request/
```

#### タグとファイル内の一部のテストのみ実行
* 各テストはdescribe/context/it単位でタグ付けできる
* 設定したタグごとに実行するテスト項目を選択できる

```request_spec.rb
describe 'アクセス確認' do
  context 'アクセス可能な場合' do
    it '正常にアクセスできること(200)',type: accessible do
      get '/'
      expect(response.status).to eq 200
    end 
    it '「トップページ」の文言がサクセス先に含まれるか確認' do
      get '/'
      expect(response.body).to include 'トップページ'
    end 
    it 'リダイレクトされるがアクセスできる(302)' do
      get '/redirect_page'
      expect(response.status).to eq 302
    end
  end

  context 'アクセスできない場合',doing: true do
    it '権限がなくてアクセスできない(403)', do
      get '/my_page'
      expect(response.status).to eq 403
    end
    it 'ページが存在しない(404)' do
      get '/aaa'
      expect(response.status).to eq 404
    end
  end
end
```

* 例えば上記のように「正常にアクセスできること(200)」に`type: accessible` のタグと「アクセスできない場合」に`doing: true`のタグをつける


* 「正常にアクセスできること(200)」のテストだけ実行させるのは以下のコマンドは以下となる

```terminal
$ bundle exec rspec spec/request/request_spec.rb --tag @type:accessible
```

* 「アクセスできない場合」のテストだけ実行させるのは以下のコマンドは以下となる
* タグにboolean型を指定している場合は省略可能

```terminal
$ bundle exec rspec spec/request/request_spec.rb --tag @doing
```

# 参考資料

* http://samurai.ataglance.jp/rspec_tag/
SwiftでMySQLを扱う時にPHPを経由する理由を調べてみた

## はじめに
最近、データベースにMySQLを使ってXcodeのシミュレータで取得する練習をしていました。その際MySQLから直接取得するのではなく、PHPを経由するやり方が多く紹介されていました。今回の記事では、なぜPHPを使うのかについてのイメージが掴める記事に出来ればと思ってます。

## データベースの種類
個人開発でデータベースを使う場合、以下のものがよく候補として挙げられると思います。
これらはNoSQLらしいです。

- Realm
- Firebase Realtime Database
- Cloud Firestore

次の４つはSQLで操作するRDBMS（Relational DataBase Management System）です。
リレーショナル型は表で構成されたデータのイメージです。
　
- MySQL
- Oracle Database
- PostgreSQL
- SQLite

## RDBMSとNoSQLの比較
比較については[こちらのサイト](https://it-trend.jp/database/article/89-0066)がわかりやすかったです。
RDBMSは複雑なデータの扱いが可能で、整合性が高いが、処理速度が遅い。
NoSQLは処理速度が早く、大規模データの処理が得意だが、データの整合性が劣る。
これらのメリットデメリットを踏まえて、データベースの選択をしてるんですね。
個人開発だとNoSQLのものを使っている人が圧倒的に多い印象です。
実際の現場でどのような基準で選ばれているかなどの話も聞いてみたい。。。

## SQLってなんやっけ
ここからはRDBMSの話に絞っていきます。
SQLとRDBMSの関係性について図を作成してみたので貼っときます。
SQLを無理やり一言でいうと、、、
#####リレーショナルデータベース（表）を管理するRDBMS(MySQLとか)を操作するための言語

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/bc42eaff-5122-6829-f745-6ffc7956a24e.png)

## なぜPHPがいるのか（結論）
今回のタイトルですね。Swift側から直接MySQLとかのRDBMSにアクセスも出来そうですよね。実際にやろうと思えば出来るそうですが、セキュリティ的に危ないそうなのでその辺りを調べてみました。先に結論聞いた方が、話が入ってきそうなので結論書いておきます。
####結論
SQLインジェクションを防ぐため！！！

## SQLインジェクションとは
入力フォームにSQL文を入力することで、アプリケーションが想定しないSQL文を実行させることで、不正操作する攻撃のことです。
この辺り、基本情報記述者試験の勉強でも出てきました。今回具体例を調べてみて理解が深まりました。

####具体例
idに紐付いたデータを取得するSQL文があるときに、
`SELECT * FROM atable WHERE id='入力されたID'`
悪意のあるユーザが以下を入力したら
`';DELETE FROM atable--`
完成するSQL文は
`SELECT * FROM atable WHERE id='';DELETE FROM atable--`
→ データベース全削除になる！！！

他にもわかりやすい例が[独立行政法人 情報処理推進機構のサイト](https://www.ipa.go.jp/files/000017320.pdf)に載っています。

## SQLインジェクションを防げるのがPHP
具体例のようなSQL文を実行されないために、
危険な文字に対して適切にエスケープ処理をする必要があります。
しかし、エスケープが必要な文字というのは、データベースエンジンの種類によって異なるので、自分で実装していては漏れが発生して脆弱性が生じてしまいます。（どうしよう）

#### ここでPHP！！！
PHPはquoteメソッドというのがあり、データベースエンジンの種類を意識することなく、正しいエスケープ処理を実現してくれる！！！
[公式ドキュメント](https://www.php.net/manual/ja/pdo.quote.php)にエスケープしてるコードが載ってます。


## まとめ
SQLインジェクションを防ぐためにPHPを使いましょうって感じでした。
今回はPHPで話しましたが、エスケープするために使う言語はPHP以外にもあります。
JavaやPerlを使ったMySQLへの安全な接続方法などもあり、その説明が独立行政法人 情報処理推進機構のサイトに載っていました。参考文献として載せておきます。
また、SQLインジェクションを防ぐ目的以外でもPHPを使う理由があれば、教えていただきたいです。まだまだ調べきれていないと思うので。

## 参考文献

安全なウェブサイトの作り方：IPA 独立行政法人 情報処理推進機構
https://www.ipa.go.jp/security/vuln/websecurity.html
https://www.ipa.go.jp/files/000017320.pdf
Autifyの使い方や目的を整理してみた

![READYFORアドベントカレンダー2021カバー画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890862/13e21e7b-cd7a-3cbd-8ffe-997952dc45f7.jpeg)

この記事は[READYFORアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/readyfor)の記事です。

こんにちは！READYFORでパートタイムQAエンジニアをしている @afracs です。
本記事は、私が副業で関わっている会社でのAutifyの使い方を整理していく記事となります。
この記事の続きとして、明日公開予定の [複数会社でAutifyを使っているので、それぞれの使い方や目的を比べてみた](https://qiita.com/afracs/private/c63a36471299c0bd4b26) を書いているので、一緒に読んでいただけると嬉しいです。

###READYFORでの使い方
まずはREADYFORでのAutifyの使い方を整理していきます。

####Autifyを使う人・目的
高頻度でリリースがあるため、実装→テスト→リリースまでのサイクルを速く回せるようになりたい！という考えの元で、テストをどうにか早く・楽にできる方法はないか？と探した結果、Autifyを使うことになりました。
※この辺の話は去年のアドベントカレンダー記事にまとめているのでご興味ある方は[こちら](https://qiita.com/afracs/items/8066f353122a9e953a90)

READYFORでは、主要なユーザーペルソナである支援者と実行者が使う主要サービス導線を「王道フロー」としてe2eシナリオを組んでいます。
このe2eシナリオの実行時間がそれなりに長くかかってしまう＆網羅率を上げすぎるとメンテナンスが大変になるため、主要王道フローの実行結果がOKであればリリースする、という運用をしています。

回すシナリオはテストプランを組んでいるので、それを実行すれば全部回るようになっています。
また、この王道フローシナリオは定期実行にも乗せており、予期しない機能破壊が起きていないことの担保としての役割も担ってたりします。

こんな感じのテストプラン群があって ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890862/6c9bded4-9e32-ad47-f9c3-d1c436efb772.png)

実行結果を確認していく感じ ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890862/31654332-550f-6aba-7274-4a06b35b4ab4.png)

###Autifyがあるメリット
手動テストだけだと、開発メンバーのリソース・エネルギーを手動テストにかけなければならなかったのですが、Autifyがあることによって、それを代替することができるようになっています。

例えば、以下のような開発をするときに重宝します。
・振る舞いは変わらないが内部的には変更が結構あるものリリースがしやすくなった
・作りながらテストして（関係ない所を）壊してないか確認できる
・リファクタ、モジュール疎結合化対応
・対応期間が長いPJなど

とはいえ、手動テスト部分はなくならないので、細かい確認についてはきちんとテストフェーズを設けて検証しています。

###課題感
導入したので全てがうまくいっているかというと、やはり運用面の課題は尽きないもので。。。
大きな課題としてはやはり「シナリオメンテの手が回らない」という所です。
READYFORではフルタイムのQA専任のメンバーがいないため、細々した修正メンテが滞りがち、、、という課題を抱えています。

この課題を解決するために、最近では開発メンバー（PdM、設計・実装するメンバー）へ、簡易な修正はメンテをお願いするようにし始めました。
機能を作ることに集中したい気持ちはよくわかるのですが、、、、如何せん手が回っていないので、無理を言ってお願いしている現状ではあります。。。（皆に大感謝！！！）

###将来的にやりたいこと
ここからは私の野望というか理想というか、、、別のところでもちらっと発言してしまったのですが、、、
e2eテストの作成がだれでもできるようになること
だったりします
壮大に出たな？とお思いのそこのあなた！・・・正解です！

まあ、実現方法とか目標時期とは全然考えてません（何せ壮大ですから）
まずは、自分以外の人がAutifyシナリオをメンテできるようになることが第一歩目の足がかりかなーと思っているので、上述したお願いを開発メンバーにしている感じです。



以上、ここまで読んでくださった方、ありがとうございました！
良ければ明日公開の記事も一緒に読んでいただけると幸いです。

<br><br><br><br><br>
冬休みに見たい！エンジニアにおすすめの映画


今年もステイホーム期間が続きました。🏡
この時期にアマプラ、Netflix、Huluなど、いろいろと映像作品を見た方も多かったのではないでしょうか。
私が今年見たエンジニアにおすすめの映画を3つ紹介したいと思います。
ぜひ冬休みに見てみてください。

#インターンシップ
こちらの映画、ずっと気になっていたのですが、やっと見れました・・
IT音痴のおじさん２人がGoogleのインターンに参加します。💻

<iframe width="560" height="315" src="https://www.youtube.com/embed/JTqFIEAB-T8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2013年の映画なので少し古いのですが、今も使われているサービスが出てきます。
Web2.0時代の盛り上がりを感じることができます。
この頃からInstagramが流行っていたのか～と時代を感じ感慨深くなりました。
80年代の例えも出てくるのですが、わからなくても充分楽しめます。
うちの40代の旦那さんは元ネタがわかるらしく大笑いしていました。
テッドのスタッフが制作しているということでテンポよく話が進みます。
そこまで心を揺さぶられず、気軽に楽しむことができるので
映画を見るのにハードルを感じる方にもおすすめです。
アマプラで無料で見られますので、アマプラ会員の方はぜひ。

#バトルオブシリコンバレー
こちらは1999年（古！！！）の映画です。
おそらく学生のみなさんは生まれる前の作品ですね。
アップル社とマイクロソフト社の創業当時のやり取りがあり、
時代背景を詳しく知らなかったので、当時はこんなバチバチな感じでGUIが一般化してパソコンが発展したのか・・とても勉強になりました。
ジョブズといえばiPhoneのプレゼンが有名ですが、2007年なのでそれよりだいぶ前のお話です。
IBMがこんな感じだったんだなど学ぶことができ、若い人に１度は見てほしい映画です。
出てくるIT用語や、この人はどんな人だ？という理解が追いつかず（ブルーボックス・・？）、Wikipediaで調べながら見ていました。詳しい人の補足を聞きながら見たらもっと楽しめるかもしれません。
名言やプレゼンで讃えられているジョブズですが、（悪い意味で）人格的にやばい部分が切り取られていました。
ビル・ゲイツもなかなかクレイジーという感想です。
1999年までのことなので、2人のその後の功績は言うまでもありませんが。
<a href="https://www.netflix.com/jp/title/70132721">ソーシャルネットワーク</a>のザッカーバーグといい、一癖も二癖もある人物、そしてそれを支える優秀な仲間たちが歴史的な発明を残すんだな・・と思った次第です。
主人公ではない、ウォズやポールといった天才エンジニアたちもとても魅力的です。💻

https://www.amazon.co.jp/gp/video/detail/B00UMBCAJ6/ref=atv_dp_share_cu_r


#スタートアップ: 夢の扉
Netflixオリジナルの韓国ドラマです。（映画じゃない・・）
主演は皆さんご存知「国民の初恋」元missAのペ・スジちゃんです。
表情がクルクル変わってとてもカワイイ！👏
これだけでも見る価値がありますね。
不遇な生い立ちの主人公の恋愛ドラマも絡めつつ、韓国のシリコンバレーからの展開は見ていてワクワクしました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/8pvavm3KXng" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
ここから先はネタバレにもなると思いますので、キーワードを・・
・画像認識
・自動運転
・くすぶっている天才プログラマー
・USB(Type-A)の向きがわからないイケメン
・弁護士兼デザイナーの謎のハイスペック女史
・ライバルエンジニアとラズパイで戦う
・ライバルエンジニアはMIT出身

韓国ドラマなのにラズパイ🍓で画像処理対決しているのにはテンションがぶち上がりました。
テクノロジーだけでなく、ビジネスモデル創出やプレゼンスキルも大切だということも気づかせてくれます。
ストラテジ系の単語がたくさん飛び交いますので、ITパスポートの勉強になると思いました。


皆さまもぜひおすすめのエンジニア映画を教えてください。
映画を見る習慣がないので、冬休みに見てみたいと思います。


それでは、良い年末年始を～🎅🎄
【Bootstrap】Bootstrap5 基礎【クラス一覧】

## はじめに
　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## Bootstrap5 基礎

### Bootstrapとは

レスポンシブに対応したウェブサイトを素早く作るための便利なツールです。
CSSやJavaScriptを使わずに素早くおしゃれなWebサイトを作ることができますが、細かい調整を行う際には、Bootstrapがどのように実装されているのかを知る必要があるため、使用しない場合の方が早い場合もあります。
Bootstrapを導入する際には、あらかじめ、実装の速度を重視するのか、細かい調整を重視するのか検討した上で、導入するか否か決定しましょう。

### Bootstrapの使いかた
Bootstrapは基本的にはHTMLのタグに対してクラスを指定することで様々な設定をすることができます。

### Bootstrapのクラス一覧（基本的なもの）

```index.html
 <div class="container"></div>  <!--　ブラウザの幅に応じてコンテンツの幅をいい感じに調整してくれる -mdや　-smをつけることで幅を調整することができる　-->
 <div class="bg-primary"></div>  <!--　bg-　とすることで背景色を設定できる。色の指定も可　-->
 <div class="row"></div>  <!--　行を表す　-->
　　<div class="col"></div>  <!--　カラムを表す　-->
　　<div class="col-8"></div>  <!--　`-8`等とすることで比率を設定することができる。1〜12の間で選択可能。　-->
 <div class="col-8　col-md-6"></div>  <!--　`-md-6`等とすることで特定の画面幅での比率を設定することができる。1〜12の間で選択可能。　-->
 <div class="col-md-8"></div>  <!--　通常は単なるdiv。md以上の幅になると比率が8になる。　-->
 <div class="d-none d-lg-block col-2"></div>  <!-- 幅がlg未満の場合には非表示、lg以上になったら表示し、比率は2。 -->
 <div class="border"></div>  <!-- 上下左右にボーダーをつける。上下左右どこにボーダーをつけるかは指定可能。 -->
　　<div class="text-center"></div>  <!-- 中央揃え。左揃え等も指定可能。 -->
 <div class="text-light"></div>  <!-- 文字色を明るくする -->
 <div class="mx-1"></div>  <!-- 左右にmarginを設定。数字は0〜5、autoで指定可能 -->
　　<div class="ps-1"></div>  <!-- 左側にpaddingを設定 -->
 <div class="fs-3"></div>  <!-- フォントサイズ変更 -->
 <h1 class="display-1"></h1>   <!-- 見出しを拡大表示　-->
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true"></a>
 </div>
  <!-- リンクのリストを表示　-->
　　<table class="table">
 　 <thead>
 　   <tr>
  　    <th scope="col"></th>
 　     <th scope="col"></th>
 　   </tr>
 　 </thead>
 　 <tbody>
  　  <tr>
    　  <th scope="row"></th>
    　  <td></td>
   　 </tr>
 　 </tbody>
　</table>
  <!-- テーブルを作成する。　-stripedや　-borderdを設定可能　-->
　<button type="button" class="btn btn-primary"></button>　　　<!-- ボタンを設置。btm-smなどの設定が可能。 -->
<div class="d-flex"></div>   <!-- フレックスボックス -->
<i class="bi bi-search"></i>   <!-- アイコンの挿入。CSSへの記述が必要。公式サイト要確認。 -->
<nav class="navbar navbar-light bg-light" ></nav>   <!-- ナビゲーションバーの設定。idやdata-bs-toggleでレスポンシブ対応等が可能。 -->

```

以下Bootstrapの公式ページURL
[layoutについて（container等）](https://getbootstrap.jp/docs/4.5/layout/overview/)
[colorについて（bg-等)](https://getbootstrap.jp/docs/4.5/utilities/colors/)
[displayについて(d-等）](https://getbootstrap.jp/docs/4.5/utilities/display/)
[borderついて(border等）](https://getbootstrap.jp/docs/4.5/utilities/borders/)
[textについて（行揃え）](https://getbootstrap.jp/docs/4.5/utilities/text/)
[spacingについて（margin等)](https://getbootstrap.jp/docs/4.5/utilities/spacing/)
[typographyについて(display等)](https://getbootstrap.jp/docs/5.0/content/typography/)
[list-groupについて(list-group等)](https://getbootstrap.jp/docs/5.0/components/list-group/)
[tablesについて（table等)](https://getbootstrap.jp/docs/5.0/content/tables/)
[flexについて（d-flex等)](https://getbootstrap.jp/docs/5.0/utilities/flex/)
[アイコンについて](https://icons.getbootstrap.jp/)
[navberについて](https://getbootstrap.jp/docs/5.0/components/navbar/)
新卒のコードリーディング

##始めに
こんにちは、@S_onizawaです。
こちらは[CYBIRDエンジニア Advent Calendar](https://qiita.com/advent-calendar/2021/cybird) 24日目の記事です。
前回、23日の記事は@gumitaさんの『応用情報技術者試験に向けて失敗から学んだ対策法』です。
非常に簡潔にまとめられていてわかりやすいですね！
応用情報技術者試験だけじゃなくて他の試験にも通ずることがあるのですごく参考になりました！

###自己紹介
私は2021年にCYBIRDへ新卒入社し、現在はサーバーサイドエンジニアとして主にPHPを扱っています。
大学からUnityやC言語、C＋＋、JAVA、PHPなど様々な言語に触ってきました。
その中でサーバーサイドエンジニアに興味を持ち、この業界に入りました。

##この記事について
新卒で入社して、実際の業務でコードを読んだ時に思ったことについてまとめようとしたものです。
記事の内容としてはコードリーディングについてが主となります。 
正直当たり前のようなことしか書いていませんが、初心に返った気持ちで見てもらえるとありがたいです！

##目次
1. コードを読んで思ったこと
2. コードを読む際に使っていたこと、見ていたもの
    - コメントを読む
    - 関数の名前を見る
    - コードエディターの機能を使う
3. 最後に

###1. コードを読んで思ったこと
私が最初の業務で主に行なっていることが他人のソースコードを読み、修正することです。
大学時代は他人のコードを読むなんてことはほとんどしなかったのですごく大変でした。


ソースファイルを一つ読んだだけでは修正する箇所を見つけるなんてできないので、いくつかのソースファイルを読み地道に見つけていくしかありません。
そんな中、できるだけ早く効率よく見つけようと思い、必要ないと思った箇所をサラッと読んだだけだったりしていたことで、わからなくなった時やその箇所が必要だった時に後戻りするはめになったりするので逆に非効率的だったと思います。
コードを読み解いていく中で一番効率的だと思ったのは一行一行丁寧に読んでいくことだと思います。
この関数は何が書いてあるのか、この`if文`は何を判定しているのか、この`foreach文`は何をしているのだろうと丁寧に見ていくのが大切です。丁寧に読んでいる分時間はかかるかもしれませんが、より理解深まって修正ミスだったり別の機会に同じファイルを触った時に自然とソースコードの流れが頭に流れていくようになります。

以上のことを簡単にまとめると

__急がば回れ__

ということです。
言葉の意味そのままに、多少時間がかかっても、 落ち着いて、確実な方法で、やったほうが、安全で成功率も高いです！

###2. コードを読む際に使っていたこと、見ていたもの

####コメントを読む
これは一番大事です！
コメントを読めば大まかな内容が分かります、漏れなくしっかり読みましょう！
※コメントだけで内容を把握したと思わずに中身は必ず読みましょう！


####関数の名前を見る
例えばこんな関数があった場合、

```PHP
function say_goodbye(){
  print_r('goodbye!');
}
```
この関数が何をしたいかが一瞬で分かりますよね？
どのソースファイルも関数の名前で何をしたいのかが大体分かるので、関数の名前もしっかり読みましょう！
※こちらも同様に、中身は必ず読みましょう！

####ソースエディターの機能を使う
私が使っているものは　visual studio code です。
紹介するのはmacで使っていたものなのでwindowsだとコマンドが少し変わります。

`command + P`
ファイル検索
必要なファイルをフォルダ全体から探したいときに使います。

`command + F`
ソースファイルから検索したいものがある時に使います。

`command + Shift + F`
こちらは`command + F`の規模が大きくなったものです。
フォルダ全体に検索をかける時に使います。

`command + Click`
定義へ移動
どこで定義されたものかを知るために使います。
定義移動した後に元のファイルに戻りたい時は`ctrl + -`を使えば戻ります。

###最後に
今回記事にした内容を簡単にまとめると
__・コードを読むときは一行一行丁寧に（急がば回れ）__
__・コメント、関数の記述を読もう__
__・ソースエディターの使える機能は使おう__

みなさん初心に帰って読んでくださったでしょうか。
次回は[CYBIRDエンジニア Advent Calendar](https://qiita.com/advent-calendar/2021/cybird)の最終日です！
@garyumaru さんの『Unityのシェーダーを使って画像をマスクする』です。お楽しみに〜！
M1 MacBook Air に Windows環境を構築

# M1 MacBook Air に Windows環境を構築

## はじめに

長年購入をためらっていたMacBookを購入。
選んだモデルはM1 MacBook Air です。
MacBook Proも候補として考えましたが、動画編集等の作業は行いませんので、高スペックは必要ありません。
軽さは正義、というわけではありませんが、持ち運ぶ際の荷物のことも考え、MacBook Airをせんたくしました。
メインマシンとして使用するわけではなく、あくまでメインは母艦のMac mini、このMacBookはサブです。

しかし、母艦のMac mini(late 2012)に比べ、明らかに性能がMacBookのほうが勝っています。
とても快適ですし、ここまでの性能であれば、Windowsの仮想環境も動かしたい、そう考え始めました。

現在、中古で購入したタワーPCにUbuntuを稼働させKVMでWindows10の環境を稼働させています。
このWindows10に対して、外出先からもリモートデスクトップで接続したりして使っていますが、
レスポンスがよろしくありません。

ここはやはりMacBookにWindows環境を構築し、いつでも手元でWindows環境が使えるようにしたい、
そんな思いから今回の環境構築にチャレンジを始めることになりました。

## 挫折編

安易に考えていました．．．
このM1 MacBook、シリコンMacとも呼ばれているらしく、CPUがARMです。
つまり、Intel製のCPUではないので、これまでKVMやVMで使っていたWindowsのISOが
使えないのです。

現在、AppleはまだシリコンMacでWindowsをサポートするとは発表されていません。

では成すすべがないのか？

そこは先人たちが情報を残してくれています。
「UTM」というアプリを使用し、更には、ARM版のWindowsの媒体を用意すれば、
シリコンMacでも稼働できるというのです。

早速挑戦しましたが、結果はNGでした。
詳しい手順等については他の方が投稿されていますので割愛します。

何がNGだったのか。

Windows10も、Windows11も、起動はしました。
ですが、ネットワーク接続ができませんでした。
これはUTMの設定を見直せばなんとかなるとは思いましたが、致命的だったのが再起動とを行うと、起動時にエラーが発生して二度と起動しなくなる現象です。
これは何度も何度も環境を構築し直しても改善できませんでした．．．

UTM以外にも、VMware Fusionも試しました。
こちらも同じような事象、もしくは起動途中にインストール要件を満たしていないと判断され、インストールすらできないという結果に終わりました。
インストール要件を満たしていない場合の対処方法ももちろん存在し、試しましたが、結局はWindowsが起動するには至らず、インストーラーの途中で無応答になるなどの症状で挫折しました。

## 妥協編

上記のUTMやVMware Fusionの手順等を調べているときに気づいていました。

唯一、成功している事例が、Parallels Desktopを使用する方法です。
ただし、こちらは無償提供期間があるとはいえ、基本的にはサブスクリプションが必要なアプリ。
年間8,345円かかってしまいます。

UTMとVMware Fusionの失敗で疲れ果てており、物は試しにとParallels Desktopをインストール。
起動するとそのままWindows11のインストールを促され、手順に沿って進めると、あれよあれよという間に、あっけないほど簡単にWindows11が起動しました。

ネットワーク接続も問題なし、母艦であるMacBookとのファイル共有も最初から有効になっているなど、素晴らしい完成度でした。

利用頻度はさほど高くはないのですが、あまりの完成度と感動した対価として、サブスクリプションを購入。
無事にM1 Mac Book AirでWindows環境が起動しました。

## おわりに

AppleがなぜARM版Windowsの情報を出さないかについては諸説あるようです。
もうしばらく待てば情報が出てくるかもしれませんし、対応するかもしれません。
そうしたら再度、UTMやVMware Fusionを試してみて、成功すればParallels Desktopのサブスクリプションは1年のみで継続しなければいいだけです。

ちなみに、なぜこんなにWindows環境に固執しているのかというと、「リモートアシスト」機能が使いたいからです。
遠く離れたITに少々疎い親兄弟から質問されることがあり、言葉だけでは通じないので、こちらから遠方の環境に接続し、リモートで設定を見てあげたり問題解決をしています。
そのためにもどうしても「リモートアシスト」機能が必要だったのです。

結局、有償ソフトに頼る結果となってしまいましたが、検証結果は無駄になりませんし、検証の過程で知った、Windows Insider Programの存在も大きな収穫でした。
かなり苦戦し、無償版では期待した結果を得ることができませんでしたが、かなり楽しい検証時間を過ごすことができました。
JavaScriptで小数点以下切り捨てを簡単に書く

Twitterで回ってきたJSでの小数点以下切り捨ての方法があったので試しに自分でも書いてみた。
書いてみた故に、記念でこちらにも書いてみた。
これはアドベントカレンダーをnoteに書いた贖罪でもある(笑)


```html:小数点以下切り捨て

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>eliminate decimal</title>
    </head>
    <body>
        <h1>小数点以下を切り捨てする方法</h1>
        <script>
            let num = Math.random() * 100;
            console.log(num); //45.602820325879925

            //floorで小数点以下切り捨てと同じ処理
            num = ~~num;
            //num = Math.floor(num); これと同じ処理

            console.log(num); //45
        </script>
        <footer><small>G's</small></footer>
    </body>
</html>


```
VSCode開発効率化(ショートカットキーの利用）

#趣旨
VSCodeでのショートカットキーによる開発効率化の話。年末なのでよく使うショートカットを見直しましたので、記事にします。
※Macでの操作のため、Windowsの方は適宜読み替えをお願いします。

#ショートカットの設定方法
<details><summary>ショートカットの設定</summary>
①VSCodeを開き、左下の歯車を押す。
②キーボードショートカット[*K *S]を押す。
![スクリーンショット 2021-12-20 15.38.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ab079457-6f4f-6535-d00e-627d62424c80.png)
③キーボードショートカットのタブが開き、キーワードで検索する。
※画像では「terminal」を検索キーワードとしています。
![スクリーンショット 2021-12-20 15.43.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/3e8ce011-feb1-2dbc-7ea7-1dd6d748ccf7.png)
④変更したいコマンドをダブルクリック。
⑤ショートカットキーを押し、エンターキーで決定。
![スクリーンショット 2021-12-20 15.49.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8a881283-3e11-f99f-49c8-4f3fc011ca9b.png)
※参考：キーバインドした情報はkeybinding.jsonに記載されます。確認方法は下記の通り。
![スクリーンショット 2021-12-20 16.59.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/9e3d8c3e-f6e8-9111-f377-5a955e0a5fc8.png)

</details>


#おすすめショートカットベスト5
第１位：ターミナル→エディタ、エディタ→ターミナルへの移動
第2位：エディタ間の移動
第3位：行頭/行末にカーソルを移動
第４位：1行上/下をコピー
第5位：1行削除
※詳しくは動画を参照ください。

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


#個人的なショートカット設定ファイル

```json:keybindings.json
[
  /** エディタからターミナルにフォーカス */
  {
    "key": "cmd+j",
    "command": "workbench.action.terminal.focus",
    "when": "editorTextFocus"
  },
  /** ターミナルからエディタにフォーカス */
  {
    "key": "cmd+j",
    "command": "workbench.action.focusFirstEditorGroup",
    "when": "terminalFocus"
  },
  /** 一行削除 */
  {
    "key": "cmd+k",
    "command": "editor.action.deleteLines",
    "when": "textInputFocus && !editorReadonly"
  },
  /** 一行上をコピー */
  {
    "key": "alt+u",
    "command": "editor.action.copyLinesUpAction",
    "when": "editorTextFocus && !editorReadonly"
  },
  /** 一行下をコピー */
  {
    "key": "alt+d",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus && !editorReadonly"
  },
  /** 右のエディタに移動 */
  {
    "key": "ctrl+tab",
    "command": "workbench.action.nextEditor"
  },
  /** 左のエディタに移動 */
  {
    "key": "ctrl+shift+tab",
    "command": "-workbench.action.quickOpenNavigatePreviousInEditorPicker"
  },
  /** エディタを閉じる */
  {
    "key": "ctrl+w",
    "command": "workbench.action.closeActiveEditor",
    "when": "editorTextFocus && !editorReadonly"
  },
  /** ターミナルを分割 */
  {
    "key": "ctrl+d",
    "command": "workbench.action.terminal.split",
    "when": "terminalFocus && terminalProcessSupported || terminalFocus && terminalWebExtensionContributedProfile"
  },
  /** 行頭にカーソルを移動*/
  {
    "key": "cmd+h",
    "command": "cursorHome",
    "when": "textInputFocus"
  },
  /** 行末にカーソルを移動  */
  {
    "key": "cmd+e",
    "command": "cursorEnd",
    "when": "textInputFocus"
  }
]

```





###参考
https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-layouts
JavaScriptで使えるISO 8601の形式

# はじめに

ISO 8601は、日付と時刻の表記に関するISOの国際規格です。（wikipedia調べ）
JavaScriptのDateのコンストラクタ（およびDate.parse）に使用できる日時の形式は、ISO 8601を基に仕様が定義されています。

# 使える形式

下記の日付（+時刻+タイムゾーン識別子）の組み合わせで表現できます。

- 日付
 - `YYYY-MM-DD`
 - `YYYY-MM`
 - `YYYY`
- 時刻
 - `THH:mm`
 - `THH:mm:ss`
 - `THH:mm:ss.sss`
- タイムゾーン識別子
 - `Z`（`+00:00`に同じ）
 - `-23:59`~`+23:59`

仕様で定められている形式以外にもパース可能なものはありますが、
実行環境によって結果が左右されるため、実際の動作については確認が必要になります。

# 使用例

```javascript
console.log(new Date('2021-11-28'));
// -> 2021-11-28T00:00:00.000Z
console.log(new Date('2021-11'));
// -> 2021-11-01T00:00:00.000Z
console.log(new Date('2021'));
// -> 2021-01-01T00:00:00.000Z
console.log(new Date('2021-11-12T12:34:56.789Z'));
// -> 2021-11-12T12:34:56.789Z
console.log(new Date('2021-11T12:34:56.789Z'));
// -> 2021-11-01T12:34:56.789Z
console.log(new Date('2021T12:34:56.789Z'));
// -> 2021-01-01T12:34:56.789Z
console.log(new Date('2021-11-12T12:34:56Z'));
// -> 2021-11-12T12:34:56.000Z
console.log(new Date('2021-11-12T12:34Z'));
// -> 2021-11-12T12:34:00.000Z
console.log(new Date('2021-11-12T12:34:56.789+00:00'));
// -> 2021-11-12T12:34:56.789Z
console.log(new Date('2021-11-12T12:34:56.789-09:00'));
// -> 2021-11-12T21:34:56.789Z
console.log(new Date('2021-11-12T12:34:56.789+09:00'));
// -> 2021-11-12T03:34:56.789Z
```

# 参考

https://ja.wikipedia.org/wiki/ISO_8601

https://tc39.es/ecma262/#sec-date-time-string-format

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
複数会社でAutifyを使っているので、それぞれの使い方や目的を比べてみた

こんにちは。QAエンジニアをしている @afracs です。
本内容は、私がQAとして関わっている会社での「Autifyの使い方の違い」を整理していく記事となります。
それぞれの会社の使い方の違いと本業の会社での情報は本記事にて、副業先の情報は別の記事 [Autifyの使い方や目的を整理してみた](https://qiita.com/afracs/items/c415d526a41d784d8c02) にしている関係上、先に公開しているこちらの記事と一緒に読んでいただくとより違いが判るかと思います。

###本業先での使い方
まずは本業先でのAutifyの使い方を整理していきます。

####Autifyを使う人・目的
QAチームのリグレッションテストで使うという目的で導入しました。
本業先では複数プロダクトを提供しているため、その検証範囲も膨大となります。
そのため、チームメンバーのリソースをリグレッションよりも機能追加テスト等にエネルギーを割きたい！という目的で使っています。

####Autifyがあるメリット
使う目的にも通じますが、やはりAutifyがあることで、メインで手が入っている機能のテストにエネルギーをかけられるということが一番のメリットです。
また、影響範囲として漏れていた部分をカバーできたり、プロダクトの保守テスト的な部分の安心感があります。

例えばこんなAutifyの実行結果があったとして ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890862/ff26901a-76c5-57fe-fd43-9749f08bfc7e.png)

それの内容を確認した時のやり取り（チーム内ではラフな会話しつつ、バグチケット起票へ）↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890862/a0ccb2a1-984c-8692-51a6-d1bd6fceef31.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890862/676ce4f5-2e95-f53a-e6f0-7823ee1053ad.png)

こんな感じで注力している部分以外のバグを見つけたりしています。

###課題感
ただ、やはり人間は欲深い生き物ということで・・・
使い始めると「あれもやりたい」「これもやりたい」とやりたいことはどんどん出てくるんですよね。。。
で、やりたいことを詰め込んでしまった結果、運用が大変になるという（あるあるかなとｗｗ）

現状の課題感を列挙すると、、、

* シナリオが多いためメンテコストがかかる
    * リグレッションテスト用として作成しているので、シナリオパターンが増えていく
    * 見た目が大幅に変わるとメンテするものが増えるというデメリット
* 週次で回していないシナリオの場合、動かしたときにうまくテストできないことがある
* 棚卸作業が必要となる

この課題を解決するために、今は試行錯誤している感じです。。。

例えば

* 週次実行の確認：NGだった場合
    * チームメンバーでローテーションして結果確認
    * バグの場合：社内へ連携
    * シナリオがまずかった場合：修正メンテする
* 週次実行以外は定期的に棚卸しして必要ものだけ残すようにする
    * 似たようなシナリオが複数あった・・・
    * お試しで作ったシナリオ（不要なもの）がそのまま残っていることもある・・・

###将来的にやりたいこと
今は上記の課題を解決することに注力して、地道な活動をしているところです。
ですが、今後はチームメンバーのスキル底上げも視野に入れて、「品質とは？」「テストとは？」ということもディスカッションできるようにしていきたいという野望もあったりします（できるできないは置いといてくださいｗ）

* 手動と自動の違いとは？
* 自動化するにはどう考えればいい？
    * 手動テストシナリオ→そのまま自動テストとして書く===>これはNG
    * 自動にしたい所
    * 手動の方が良い所

といった話を特定のメンバーだけでなく、チーム全体でできるようにしたいのが夢ですねぇ～
そのきっかけとしてAutifyを使って色々やっていきたいとか考えています。
Seleniumとか使って頑張るだと~~めんどくさがられ~~敬遠されがちですしね。。。

###両社の違い

最後に両社の違いをざっとまとめるとこんな感じです。

||本業先|副業先|
|----|----|----|
|**使う目的**|リグレッションテスト<br>予期しない機能破壊がないかどうかの確認＝安全確認のため|リリース前確認テスト<br>基本機能の正常性確認のため|
|**テストのために使う人**|QAエンジニア|開発エンジニア|
|**シナリオメンテする人**|QAエンジニア|（メイン） QAエンジニア<br>（サブ）開発メンバー|
|**シナリオ数**|多い|少ない|
|**実行環境**|複数ブラウザ環境で同一シナリオを実行|Webブラウザ１つ、Mobileブラウザ１つで実行|
|**実行頻度**|週次での定期実行|週次での定期実行<br>リリース前確認のための実行|

こうして見比べてみると、それぞれの会社の組織体制や考え方によって使い方・人・目的が違うことが良くわかりますね。
ただ、通底してあるのは両社とも「品質を高く保ちたい」という思いは一緒なので、その方法論が違うだけという見方もできそうですね。

以上、[複数会社でAutifyを使っているので、それぞれの使い方や目的を比べてみた](https://qiita.com/afracs/private/c63a36471299c0bd4b26) でした。

まだまだAutifyを使い倒せてない感もありますが、これからも違いや共通項を見つけて、両社にフィードバックしてもっと使い倒していきたいと思います！

 

ここまで読んでくださった方々、ありがとうございました！
良ければ先に公開している記事も読んでいただけると幸いです。

<br><br><br><br><br><br>
NVIDIA Nsight SystemsからLinuxサーバーにSSH接続して結果をみる使い方 (CUDA, OpenACC)

#はじめに
 NVIDIA Nsight Systemsとは**NVIDIA Visual Profiler**からさらに扱える機能が増えたものといえるでしょう．
　ほかの記事では`nvvp`を使ってプロファイルを取得してそれをローカルマシンに送信してから開くとありますが，今回は**Nsight Systemsから実行してそのまま結果をみる**ということを紹介します．

　何かあれば**コメント**お願いします．
#CUDA toolkitのインストール
 **NVIDIA Nsight Systems**はCUDA toolkitに含まれるのでインストールします．インストールの仕方はこちらの記事がわかりやすいと思います．

https://qiita.com/East_san/items/62adb216b0e6f801ae1d

#Nsight SystemsでSSH接続
開くと以下のように表示されます．![2021-12-20 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1836240/ab82ce47-396e-ace2-5bf4-13800d7b32f1.png)
次に`Select target for profiling...`右横の設定(:wrench:)を開くと以下のManage targetsが表示されるのでそこから`Create a new connection`をクリックします．

![2021-12-20 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1836240/e68069e0-1e04-e1ec-d4fd-a514a1c96732.png)
以下のように表示されるので上のところにIPアドレスもしくはホストネーム，下にユーザーネームを入力して`OK`をクリックします．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1836240/4dfffd75-7580-5996-3ee3-9de70eb224c6.png)
　そしたら最初の画面にもどり:wrench:の左のリストからSSHサーバーを選択します．
![2021-12-20 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1836240/670ecbcb-b741-d0a1-e301-fc1808a7cbf0.png)
　選択すると接続がはじまるのでパスワードを入力してSSH接続します．一番最初の接続ではリモート側にインストールするファイルがあるので少し待ちましょう．それが終わったら以下のように表示されます．

![2021-12-20 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1836240/ff2c3892-25b6-2d54-eb80-ee3fcdb9f18f.png)

#実行するやり方
 次に実際にコードを実行するやり方について述べます．
**コンパイルはCLIで行いましょう.** Nsight側ではできません．

コンパイルしたら上の画像の`Command line with arguments`に実行する際のコマンド(`./a.out`や`python <code>.py`など)を入力，`Working directory`は`a.out`などが存在しているディレクトリを入力します．
CUDAの場合は**Collect CUDA trace**にチェックを入れましょう．またOpenACCさらに下の**OpenACC trace**にチェックを入れましょう．
 そしたら右の`Start`で実行しましょう．ディレクトリが間違っていたり，ファイルが存在しないとエラーがでてきます．
実行に成功したら以下のように`Timeline View`が表示されます．ほかにも
`Analysis Summary`で詳細をみることができるので非常に便利です．
![2021-12-20 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1836240/f0f1de95-75f9-4231-0ac2-e8f8d4a389f0.png)

#おわりに
Nsight SystemsのほかにもNsight Computeをつかって結果を見ることができるようです．そちらも使ってみてさらに分析できるといいですね！
良かったら**LGTM**お願いします！！
AutoItによるRPAが、気づくとクリックに失敗して迷子になっているのを避けるには

私、RPAは基本的にAutoItを使います。ローカルのツールを制御するのは割と手堅いのですが、長時間放置するような場合だと、想定した操作が実現せずに迷子になってしまうケースがままあります。Explorer上でのアイコンクリックも、やばめです。何が起きているのかはなかなかわからないのですが、起きているケースはほとんどが「WEBブラウザの操作」なので、「リンクをクリックしたつもりが、マウスカーソルが微動してドラッグになっている」という現象だと推察されます。

「遷移が遅れたら、遷移するまで待つ」というコードを組み込むと、大体そのコードで待ちぼうけを食らっているので、遷移し損ねているのは間違いなさそうです。そんな場合、どうすればよいでしょうか。私のお勧めは、下記のようなMouseClick()とMouseClickDrag()のラッパーを書いて置き換えることです。

```autoit
;BlockInputは管理者権限でないと機能しない
#requireAdmin

;MouseClick,MouseClickDragは、ユーザー入力がノイズとなって効かない可能性がある
;具体的に言うと、マウスクリック時にマウスカーソルが揺れると、ブラウザ上では画像クリックではなく
;画像ドラッグとなってしまって効かなくなる
Func BIMouseClick ($btnname, $x=-1, $y=-1, $clicks = 1 , $speed = 10)
	If $x = -1 or $y = -1 Then
		Local $aPos = MouseGetPos()
		$x = $aPos[0]
		$y = $aPos[1]
	EndIf

	BlockInput(1)
	MouseClick($btnname, $x, $y, $clicks, $speed)
	BlockInput(0)
EndFunc
Func BIMouseClickDrag ($btnname, $x1, $y1, $x2, $y2, $speed = 10)
	BlockInput(1)
	MouseClickDrag($btnname, $x1, $y1, $x2, $y2, $speed)
	BlockInput(0)
EndFunc
```

小ネタでした！

本当は、クリップボード経由でのブラウザ拡張やExcel VBAとの連携なんかをご紹介したほうが付加価値感はあるのでしょうが、ひとまず、資格記事がトップだと落ち着かない、というのがあって、無理くりコード入りの記事をポストしました。
pythonライブラリの作成方法

MYJLab Advent Calendar 2021 12日目の記事です。

論文が書き終わらず瀕死のmoffyが担当します。なので内容薄めです。ごめんなさい😞

そんでもって2番ぜんじの記事になりますがご容赦を。

## ライブラリの作成方法
宮治ゼミ内ではほとんどの人が使っていると思われるpython。めちゃ便利ですよね。

機械学習では主流、できること多いし、メモリのことも考えなくていいし、型もつけなくて動く、何なら日本語の変数名をつけても大丈夫。

プログラム初心者からしたら使いやすいことも違いなしのプログラム言語ですが、こいつはツール作成の分野でこそ一番輝きを発すると思います。

よって今回はライブラリ作成方法のご紹介です。この記事では例として宮治先生(ゼミ)のwebサイトにアクセスしてhtmlをgetするライブラリを作成します

##ファイル構成
この記事では例としてget_myjというライブラリを作成します。

![スクリーンショット 2021-12-20 17.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500962/9cb22327-cd8e-a304-a7d4-78152c410926.png)


親フォルダの下に子フォルダとsetup.pyを作成します。

setup.pyではライブラリの名前、作成者、version、依存関係のあるライブラリなど設定を記述しています。

setupについて詳しく知りたい人は[公式doc](https://docs.python.org/3/distutils/setupscript.html)を読んでください。それが一番あなたのためになります。


以下ファイルの内容です。

### setup.py
```
from setuptools import setup, find_packages

setup(
    name="get_myj",
    version="1.0.0",
    author="moffy-Black",
    packages=find_packages(),
    install_requires=["requests"],
    include_package_data=True,
)
```

子フォルダ内ではライブラリが実行する処理のinitとmainを記述します。

要するにフォルダででっかいクラスを書いているようなものです。


### __init__.py
```
from requests import get
from pprint import pprint

class GetMyj:
    def __init__(self,url) -> None:
        self.url = url

    def run(self):
        req = get(self.url)
        pprint(req.text)
```

### __main__.py
```
from get_myj import GetMyj

myj_obj = GetMyj(url="https://www.myjlab.org/")
myj_obj.run()
```
## ライブラリのインストール
pipコマンドでインストールできます。

localのpathを指定してあげる必要があります。

```
pip instal ./get_myj
```


ライブラリを実行すると宮治ゼミ紹介のHTMLをgetすることができます。

```
 python -m get_myj
```

ということでライブラリ作成方法の紹介でした。

ライブラリにしてPyPIやgithubで公開するとツールの共有に便利です。今回はそこまで書きませんが[ここ](https://qiita.com/shinichi-takii/items/e90dcf7550ef13b047b5)らへんの記事を見ると概要はわかりやすいです。

便利ツールをバンバン書いてめんどくさい業務を短縮化しましょう。よきプログラマ生活を👋
SQL Server備忘録

## 2つの認証モード

|名称|説明|備考|
|----|----|----|
|Windows認証|OSにログオンしているユーザーで認証。WindowsはActive Directory（AD）で管理されるのでADユーザーを使用する認証モード。OSにログインしている時点で認証済みとみなされるため、SQL Serverでのユーザー名、パスワードの入力が省略される。|AD環境があればWindows認証|
|SQL Server認証|SQL Server認証はユーザー・パスワードを入力して認証する旧式の認証モード|AD環境がなければSQL Server認証|
https://sql-oracle.com/sqlserver/?p=133

SQLServer接続方法

## サーバー名に入力できるパターンと例 一覧
|サーバー名|例|
|----|----|
|IPアドレス|192.168.0.xx|
|IPアドレス,ポート|192.168.0.xx,1433|
|IPアドレス,ポート\インスタンスのサービス名 ※|192.168.0.xx,1433\SQLEXPRESSxx|
|サーバー名(PC名) ※|DESKTOP-XXXXX|
|サーバー名(PC名),ポート|DESKTOP-XXXXX,1433|
|サーバー名(PC名),ポート\インスタンスのサービス名| DESKTOP-XXXXX,1433\SQLEXPRESSxx|

### ※インスタンスのサービス名 調査方法
※サービスとはUNIX系でいうところのデーモンにあたる。
SSMSで[SELECT @@SERVICENAME;]→実行結果がインスタンスのサービス名

### ※サーバー名(PC名) 前提知識と調査方法
【前提知識】サーバー名(PC名)はSQLServer独自の用語ではなく、PCのセットアップ時に設定される名前であり、次のように ping DESKTOP-XXXXX は名前解決されて ping 192.168.0.xx などと同じように疎通テストができる。
【調査方法】以下のようにSSMSを使用して調査する方法Aと使用せずに調査する方法B等がある。
A. SSMSで[ SELECT @@SERVERNAME; ]→ 名前付きインスタンス※の場合は DESKTOP-XXXXXX\SQLEXPRESSxx のように表示され「 DESKTOP-XXXXXX」がPC名
B. Windowsキーワード検索で[システムの詳細設定の表示]>[コンピュータ名]タブの[フル コンピューター名:]ここに記載

https://learn.microsoft.com/ja-jp/sql/t-sql/functions/servername-transact-sql?view=sql-server-ver16

※インスタンスには①規定インスタンスと②名前付きインスタンスの2種類が存在する。


## DB作成
### Microsoft SQL Server Management Studio
オプション collation例：Japanese_XJIS_140_CS_AS_KS_WS_VSS
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637823/0415e284-158d-b3be-abde-6a71045093ef.png)

## CREATE TABLE
```
DROP TABLE  IF EXISTS sample_tb;
CREATE TABLE sample_tb(
id INT NOT NULL IDENTITY(1,1) PRIMARY KEY,
name CHAR(20),
gender CHAR(5),
age INT,
birthday DATE,
flag BIT DEFAULT(1)
);
```
|項目|説明|備考|
|----|----|----|
|IDENTITY(1,1)|オートインクリメント||
|CHAR|固定長(=自動blank補完)<br>・char[n]<br>・nchar[n]|可変長<br>・varchar[n]<br>・nvarchar[n]|
|BIT|bool型|1:true<br>0:false|
|DEFAULT()|カッコ内:デフォルト値||
|DATE|日付型<br>YYYY-MM-DD|その他<br>・DATETIME<br>・DATETIME2<br>参考： https://sql-oracle.com/sqlserver/?p=627|

## エクセルからデータを投入
* DBで右クリック「上位200行の編集」をクリック
* 表示される<b>表の最終行</b>を右クリックし、「貼り付け」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637823/f37628eb-e773-e854-59fc-71fe6a526ebb.png)

## うまくいかないとき
```
select *
from sample_tb;
```
|症状|解決方法|備考|
|----|----|----|
|存在するテーブルに対して赤い波線(エラー警告) Invalid object name|ローカル キャッシュを更新する<br><b>Ctrl + Shift + R</b>|https://teratail.com/questions/255505|
翻訳QAの注意点について

#初めに
今回海外展開するプロダクトに不可欠な翻訳QA（Linguistic Quality Assurance）に関して、確認観点及び注意すべき点を少しお話出来ればと思います。
翻訳QAは言葉に関する品質管理作業になります。ローカライズされたテキストをその言語のネイティブプレイヤーがテストして、意図した翻訳になっているかどうかの確認も行ないます。



#翻訳QAについて
プロダクトにもよりますが、1プロダクトあたり月30件～40件のお知らせのローカライズチェックが発生します。
周年施策、年末年始施策になると、1プロダクトあたり月50件～60件になる事もあります。

翻訳QAは日本語原文から翻訳された内容が正しく翻訳されているかを確認する事が担保内容になりますが、現状の翻訳QAでは、以下3点の課題があります。

①　翻訳ミスが多い

|  翻訳ミス箇所  |  リスク度合い  |  事例  | 
| ---- | ---- | ---- | ---- |
|  スキル、パラメータ内容<br>の翻訳ミス   |  高  |  誤：属性（水）<br>正：属性（土）<br>誤：攻撃値<br>正：魔法攻撃値  |
|  日本語原文に対する誤訳  |  高  |  「期間限定」の記述翻訳抜け<br>日本語解釈を誤った翻訳　 |
|  日付、時刻の記述ミス  |  中  |  イベント開催日時、<br>時刻の記述ミス<br>日本語時刻表示になっている  |
|  翻訳表示ミス  |  中  |  日本語表示が残っている、<br>別言語の記述になっている  |
|  文字崩れ、改行ミス  |  低  |  文字列途中での不要な改行、<br>文字表示の枠外表示  |

②　翻訳後に日本語原文の修正がはいることがある
翻訳QAは確認工程が最終工程になる為、結果、確認時間は短くなる傾向にあります。よって翻訳完了後に日本語原文の変更が発生すると、翻訳QA確認時間が無くなり、場合によっては施策リリースへ影響が発生する事にもなります。

＜日本語変更＞
・バランス調整による仕様変更、スキル、パラメータ変更
・リリース期間変更
・表現変更による説明文の追加

③　日本語原文のFixが遅延しレビューが逼迫する
仕様決定、日本語原文Fix遅延により翻訳業務が遅れることがあり、それに伴い各担当部署との連携及び各レビュー時間が十分に取れない事が常態化している問題も存在しています。



#翻訳QAチームとしての改善アクション
翻訳QAチームとしての上記問題点の解決は以下となります。

＜翻訳ミスに対しての改善アクション＞
翻訳チームとの連携強化（過去発生した翻訳ミスなどの共有化）
‐実施した結果、類似翻訳ミスの再発生確率が低減しました。

＜翻訳後の日本語原文修正に関する改善アクション<br>及び日本語原文のFix日遅延に関する改善アクション＞
開発チーム側とのスケジュール連携強化
‐日本語原文のFix日の前倒し依頼実施（Fixスケジュールの可視化）
‐仕様変更発生時の翻訳QA再確認時間の確保が目的
‐変更発生の早期キャッチアップ実施、翻訳QAチェックの再スケジュール化が
容易になる

他部署（プロダクト側、翻訳チーム）との定期ミーティングを強化し、問題点の共有化を重視する事で過去発生の翻訳ミス等の削減を実施し、結果翻訳QA作業工数の削減に成功しました。結果1施策に要する翻訳QA工数の削減も可能となりました。


#翻訳QA確認方法について
現状でもいくつかの課題点が残っており、今後の課題となっています。

＜課題1＞
**各プロダクトによって翻訳QAの確認粒度に相違がある。**
（例：プロダクトAは「意味さえ合えば、表記揺れてもOK」、プロダクトBは「意味があっても過去翻訳記述と表記揺れがあってはNG」）
・確認粒度がプロダクト毎に相違している事でテストケースをプロダクト毎に作成する必要があり、
テストケースの作成工数が増加しています。確認粒度の統一化をすることが出来れば、テストケースの統一化も可能であり、作成コストの削減が可能。

統一化の問題点としては、プロダクトによっては確認粒度を上げる事でコストアップのデメリットが発生します。翻訳QAとしてはプロダクトへ継続的に確認粒度の統一化を打診し、問題点の改善を要求していきます。

＜課題2＞
**翻訳QA側での確認を「目視確認」→「自動化チェック」へ**
一部分の自動化チェックは実施済みだが、翻訳QAの俗人化排除の為、全体の自動化実施が必要。
用語集などの資料作成が必須でありプロダクト側のコスト増加の問題がある。
プロダクト側と協議を行い、自動化の為の資料作成について理解を求めていきます。


#最後に
今後はさらなる翻訳QAチェック側のヒューマンエラーを無くすことが課題になると思います。
微力ではありますが、同様の課題に直面されている方のお力になれば幸いです。
初めてのGoogle Cloud Storage「保持期間の設定」編

***はじめに:mortar_board:***
今回はGoogle Cloud Platformのサービスの一つである、Google Cloud Storage のファイルの保持期間設定について見ていきます:writing_hand_tone2:

***概要:eyes:***
Google Cloud Storageのバケット（ファイルを入れる箱のようのもの）とオブジェクト（個々のデータ）([こちらの記事から参照](https://qiita.com/Sekky0905/items/65c60da94fe945a454fa):pray_tone1:)を一定の期間だけ保存して、後ほど削除したいという。そんな時に保持期間の設定が役に立ちますね:information_desk_person_tone1:（特にデータが大きい場合など、、、:nerd:）

***ライフサイクル:first_quarter_moon:***
バケットにライフサイクルというものがあり、そこでアップロードされてから何日間でするという設定が加えられます。バケットに入っているオブジェクトごとに保持期間は設定できないの？という疑問ですが、googleのカスタマーサポートに問い合わせたところオブジェクト単位では設定ができないそうです:crescent_moon:詳しい理由は最後に気休めとしてのせてありますので時間があれば読んでくださいね:full_moon::partly_sunny:

具体的にどうやって設定するんじゃ！！のビデオで解説しているのでplease take a look:golfer:

[解説ビデオはこちら:film_frames:](https://app.usebubbles.com/hbR6TgYJFDD7rTxSxHxh22/lifecycle-setting-gcs?threadId=hEeWFWCXCArgGYJMLUPWcw)

.
.
.
.


***オブジェクト個々でライフサイクルの設定ができない理由:mag:***
こちらがgoogleのカスタマーサポートからの返答です:pushpin:

「その理由は、Google Cloud Storage[2]におけるサブディレクトリの動作にあります。Gsutil はオブジェクトを階層構造として解釈し、そのように変更を加えることができますが、実際のオブジェクトはバケット内のフラットな名前空間に存在するだけです。」



[参考記事はこちら](https://cloud.google.com/storage/docs/lifecycle)
baserマーケットからプラグインをインストールする①ダウンロード編

# baserCMSとは
baserCMSの説明については、[公式サイト](https://basercms.net/about/index.html)から一部抜粋して紹介します。
![スクリーンショット 2021-12-20 14.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/e848306a-1921-053c-2c14-84d548787669.png)
>baserCMS（ベーサーシーエムエス）とは、直感的な操作と高いメンテナンス性を実現し、Webサイトを自由にカスタマイズできる国産CMS（コンテンツ・マネージメント・システム）です。日本人が日本人の為に、みんなで作っているオープンソース・ソフトウェアです。無料で利用でき、様々なサーバーで動作可能で、インストールも簡単です。

# プラグインの追加方法
baserCMSはPHPのフレームワークであるCakePHPをベースに作られているオープンソースのシステムであるため、プログラムが書ける人であればCakePHPの作法に則って拡張機能を開発することができます。また、baserCMSには配布・導入が簡単にできるプラグインという仕組みがあり、下記の２つの方法で追加することができます。

- [baserマーケット](https://market.basercms.net/)（baserCMSのプラグインやテーマの公式プラットホーム）で公開されているプラグインをダウンロードする

- baserCMSの作法（[プラグイン作成ガイド](https://wiki.basercms.net/ver4/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E4%BD%9C%E6%88%90%E3%82%AC%E3%82%A4%E3%83%89)が参考になります）に則って自らプラグインを開発する

筆者はこれまでコードを書いてプラグインを開発したことはありましたが、baserマーケットから導入したことはなかったので、今回はその方法をこの記事に記録したいと思います。

# baserマーケットからプラグインを取得
1. [baserマーケット](https://market.basercms.net/)（baserCMSのプラグインやテーマの公式プラットホーム）のウェブサイトを開く
![baserマーケットTOP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/c9ecf558-c3ee-fac6-c81e-3baba2b3e6f0.png)
※プラグインのダウンロードをするにはbaserマーケットのアカウントを取得してログインする必要があります

2. 「プラグイン一覧」から追加するプラグインを探す
グローバルナビメニューからプラグイン一覧ページを開くことができます。有料あるいは無料のプラグインが多数登録させれており、新着順や価格順でソートできますますが、今回は画面左のサイドバーに表示されている「ダウンロードランキング」のTOP３をダウンロードしたいと思います。
![プラグイン一覧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/03b89ac3-f07f-b6f1-a144-1f7f9f4cf0eb.png)

3. プラグインを買い物かごへ追加する
追加したいプラグイン名をクリックするとプラグインの詳細ページが開きます。「カートに入れる」ボタンを押すと買い物かごへ追加されます。
![カートに入れる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/07606fb2-a25a-4ee2-64fa-414827f0c599.png)

ダウンロードランキング第１位のBurgerEditor Limited Editionと第２位のCuCustomField（カスタムフィード）プラグインと第３位のCuStatic（静的HTML出力）プラグインをそれぞれ買い物かごへ追加します。
![カート３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/5a199cd1-68e6-f417-c616-dbf8595f2cd1.png)
画面下部の「購入手続きへ」ボタンを押すと支払い方法やお問い合わせ内容を入力する画面に遷移します。

![購入手続き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/0314d3cd-69dc-d85d-0378-35361f7031c0.png)
今回はすべて無料のプラグインだったので「お支払い方法」は無料ダウンロードしか選択肢がありません。ここの画面で「利用予定サイトURL」なども設定できるようですが、今回はローカルの仮想環境上のbaserCMSにインストールしたいので、空欄で画面下部の「次へ」ボタンを押します。

そうすると入力内容を確認するページに遷移します。
![入力内容確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/f5b13ab3-1cc2-1bdc-70c6-46762743bf42.png)
問題がなければ画面上部の「ご注文完了ページへ」ボタンを押します。

![ご注文完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/70c945ae-0f4f-6d3e-426f-f62e86b37307.png)
いよいよご注文完了ページへ辿り着きました！ところが、今か今かとプラグインがダウンロードされるのを待っていましたが、待てど暮らせどダウンロードが始まりません。これはどうしたことでしょうか？

プラグインの購入手続きが完了すれば自動でダウンロードが始まるものと考えていましたが、実際はbaserマーケットのマイページから手動でダウンロードする必要がありました。
下図の赤枠で示した「マイページ」リンクを踏むと購入履歴を確認することができます。そこで各プラグインごとにある「ダウンロード」ボタンからダウンロードをすることができます。
![マイページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370011/e70507d5-66c4-360b-740c-ceb7ab8620f7.png)


これでようやくbaserマーケットからプラグインをダウンロードすることができました！
次回は、プラグインをbaserCMSへインストールする方法をご紹介します。
【UiPath】OrchestratorのAPIを使ってみる④～トリガーを取得してみる～

# はじめに

[前回](https://qiita.com/yoshiyuki-iwata/items/eb839db0cde4ff8c4102)、JavaでUiPathの認証APIを叩いてみました。
今回はトリガーの一覧を取得するAPIの使い方を解説します。

# トリガーを取得するAPI

トリガーの取得は `[GET] /odata/ProcessSchedules` を実行することで取得できます。

しかし、APIのマニュアルを見ると、`X-UIPATH-OrganizationUnitId`なるものを指定する必要があるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/b1c9b49b-b401-d3ca-afee-4fe65f8befa5.png)

## X-UIPATH-OrganizationUnitIdってなに？

すごく簡単に説明すると、「テナントとかフォルダーとかに、一意にふられている番号」です。
今回は、モダンフォルダーで構成されているフォルダーにあるトリガーを取得しますが、「フォルダーのID」みたいなものだと思ってください。

# トリガーを取得する流れ

取得対象フォルダーの`X-UIPATH-OrganizationUnitId`がわからないと、トリガーが取得できません。
なので、以下のような流れでトリガーを取得します。

1. 認証
2. フォルダーの情報を取得する
3. トリガーの情報を取得する

順番に解説します。

## 1. 認証

認証については、[前回](https://qiita.com/yoshiyuki-iwata/items/eb839db0cde4ff8c4102)説明しているので割愛します。
認証結果のBearerトークンが取得できればOKです。

## 2. フォルダーの情報を取得する

フォルダーは、`[GET] /odata/Folders` を実行することによって取得できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/4afa2264-1edf-0739-ed2a-212552f2710f.png)

ここで重要なのは、`X-UIPATH-OrganizationUnitId`に渡すフォルダーのIDですね。
APIの結果をもう少し詳しく見てみます。（一部省略しています。）

```json
{
  "@odata.context":"~~",
  "@odata.count":4,
  "value":[
    {
      "Key":"~~",
      "DisplayName":"TEST_FOLDER",
      "FullyQualifiedName":"TEST_FOLDER",
      "Id":3
    }
  ]
}
```

はい、いましたね。`Id`です。
この値を `X-UIPATH-OrganizationUnitId` に指定します。

## 3. トリガーの情報を取得する

あらためて`[GET] /odata/ProcessSchedules`を実行してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/4d57409b-0027-a13d-fb58-f48421bd87d7.png)

トリガーが取得できました！

# トリガー一覧の内容について

詳細については、マニュアルに戻り値DTOの内容が記載されていますが（英語）、以下に一部を抜粋します。

| 項目 | 内容 |
|:--|:--|
| Enabled  | トリガー自体が有効かどうか（有効ならtrue）  |
| Name   | トリガーの名前  |
| ReleaseName  | トリガーに紐づくプロセスの名前  |
| PackageName   | トリガーに紐づくパッケージの名前  |
| JobPriority   |  優先度 |
| StartProcessCron   | 実際に動作するcron式  |
| StartProcessNextOccurrence   | 次回の実行時刻  |

# 次回

Javaでツールを作ってみます！
[py2rb] extend

# はじめに
移植やってます
# extend (Python)
```python
array.extend(other)

array += other
```
リストとリストを結合します。

https://docs.python.org/ja/3.7/library/array.html#array.array.extend
# concat (Ruby)
```ruby
self.concat(other)
```
`ruby`の場合、文字の結合も`concat`ですね。

https://docs.ruby-lang.org/ja/latest/method/Array/i/concat.html
# メモ
+ Python の extend を学習した
+ 道のりは遠そう
Node.js デザインパターン Promise 逐次イテレーション

Node.jsで、Promiseを使用したイテレーションのデザインパターンについて学んだので書いていく。

複数の、Promiseオブジェクトを返すタスクを逐次実行するのには、以下のパターンが有効

```javascript
let tasks = [task1, task2, task3]

let promise = Promise.resolve()

function task1() {
  Promise.resolve(console.log('task1 completed'))
}

function task2() {
  Promise.resolve(console.log('task2 completed'))
}

function task3() {
  Promise.resolve(console.log('task3 completed'))
}

tasks.forEach(task => {
  console.log('task handled')
  promise = promise.then(() => {
    return task()
  })
})

console.log('all tasks handled')

promise.then(() => {
  console.log('all tasks completed!')
})
```

このコードを実行すると、コンソールは以下の通りになる。

```
> "task handled"
> "task handled"
> "task handled"
> "all tasks handled"
> "task1 completed"
> "task2 completed"
> "task3 completed"
> "all tasks completed!"
```

このように、配列にタスクを格納し、それをforEachなどで回してpromiseのチェーンを繋いでいくイメージ。
また、`forEach`の代わりに`reduce`を用いるとよりコンパクトに書くことができる。↓

```javascript
let tasks = [task1, task2, task3]

function task1() {
  Promise.resolve(console.log('task1 completed'))
}

function task2() {
  Promise.resolve(console.log('task2 completed'))
}

function task3() {
  Promise.resolve(console.log('task3 completed'))
}

let promise = tasks.reduce((prevPromise, task) => {
  console.log('task handled')
  return prevPromise.then(() => {
    return task()
  })
}, Promise.resolve())

console.log('all tasks handled')

promise.then(() => {
  console.log('all tasks completed!')
})
```
Powershell でファイルの先頭から少々のバイナリーを眺めたい時に使うコマンドのメモ

# コマンド例

```powershell
(Get-Content .\path-to-file | Format_hex)[0]
```

## 表示例: 適当に転がっていた .xlsx ファイルに適用した場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33891/d18935d1-bd82-f44b-3e92-51408a6bae3a.png)

## 応用: 眺める範囲を指定

- コマンド例の終端付近の `[0]` を `[0..3]` にすると `[0x00..0x3F]` の範囲を眺められる。
    - `[1..3]` にすると `[0x10..0x3F]` の範囲を眺められる。
データベースにおける制約の種類

# 制約の種類
データベースにおける**制約**とは、列に格納するデータに制限や条件を設定すること。
簡単に5つの制約について簡単にまとめておく。

## NOT NULL制約
**NOT NULL制約**は、対象の列データが```NULL```（値が空）であってはならないという制約。つまり、必ず値を格納する必要がある。もし、```NULL```の場合はエラーとなる。

## UNIQUE制約
**UNIQUE制約**は、**一意性制約**ともいい、対象の列データが既に格納されている値と重複することを禁止する制約。

## PRIMARY KEY制約
**PRIMARY KEY制約**は、テーブルにおけるPRIMARY KEY（主キー）を指定する制約。
PRIMARY KEY（主キー）は、レコードを一意に識別することができる項目であるため、対象の列データの値が重複することと```null```であってはならない。
つまり、**NOT NULL制約**と**UNIQUE制約**を両方指定することと同じである。

## FOREIGN KEY制約
**FOREIGN KEY制約**は、**参照制約**ともいい、テーブル間でのデータの整合性を保つための制約。
対象の列に格納することができる値を他のテーブルの特定列のみに限定できる制約。

## CHECK制約
**CHECK**制約は、データベースに追加する値が指定条件を満たすかチェックする制約。
【Rails】フラッシュメッセージの設定（bootstrap）

##設定内容
・共通のファイルを作成し、application.html.erbで読み込みが出来るようにする
・コントローラーにflash内容を記載

##共通ファイル作成
views/shared配下に、_flash_message.html.erbを作成し、flash用の部分テンプレートを作る。

```
<% flash.each do |message_type, message| %>
　　<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
```
flashはハッシュのようなものなのでeachメソッドを使うことができ、このmessage_typeとmessageという変数名は任意で決められる。


**flashメッセージにbootstarpのデザインを当てる**
bootstrapではflashメッセージ用に下記のようなスタイルが用意されている。
▶︎[bootstarpの他のデザイン](https://pikawaka.com/rails/flash)

```
<タグ class="alert alert-色の指定">

# 例
<p class="alert alert-primary">
```

###application.html.erbで読み込みが出来るようにする
app/views/layouts/application.html.erbに以下の文を追加。

```
<body>
 <%= render 'shared/flash_message' %>
</body>
```

##コントローラーにflash内容を記載

flashは、デフォルトで``alert``と``notice``の２種類のキーしか用意されていないため、application_controller.rbに設定を追加すると``デフォルトのalertとnotice以外``で、Bootstrapに用意されているスタイルのフラッシュを定義出来る。

**application_controller.rb**

```
add_flash_types :success, :info, :warning, :danger
```

**redirect_toの時の書き方**
redirect_toで、noticeとalertを使う時は非常に簡潔に記述することができる。

```
ーーコントローラー記入例：
if article.save
  redirect_to root_path, notice: "表示させたいメッセージ"
else
  ~ 略 ~
end

ーー他のキーの場合は下記のように記述：
if article.save
  redirect_to path, flash: {キー名: "表字させたいメッセージ"}
else
  ~ 略 ~
end

```

**renderの時の書き方**
flashの仲間に``flash.now``があり、
``flash→次のアクションまでデータを保持する→redirect_toと一緒に使う``
``flash.now→次のアクションに移行した時点でデータが消える→renderと一緒に使う``
という使い分けが必要。

>flashメッセージはアクションが動いた時に表示され、次のアクションが動くと消去される仕組みになっている。renderメソッドを使うときはアクションを通さないでビューファイルをレンダリングするため、次のアクションが動いた後にflashメッセージが表示されてしまいます。
flashを使った場合、renderの場合は表示された後、最初のアクションが実行され、
flashメッセージは2回目のアクションが実行された時に削除されるため、2回flashメッセージが表示されてしまいます。

```
ーーコントローラー記入例：
if article.save
  redirect_to root_path, notice: "登録が完了しました"
else
  flash.now[:alert] = "名前を入力してください"
  render :new
end
```

##flashメッセージに閉じるボタンを付けたい
flashメッセージは次のアクションが動くまで消えない。
なのでflashメッセージが表示されているページで手動でflashメッセージを閉じることができる機能をつけてみた。

```
ビューファイル
<div class="alert alert-danger">
  <%= alert %><button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
```
上のように記述するとbootstrapのjavascriptが実行され、×ボタンを押すとflashメッセージが削除される。「×」は特殊文字の&amp;times;で指定。
※bootstrapを導入していないと使えない。

##参考記事
[【Rails】 完全保存版！flashの使い方とbootstrapで表示する方法](https://pikawaka.com/rails/flash)
[【Rails】flashについて(bootstrap対応)](https://boku-boc.hatenablog.com/entry/2020/10/17/085551)
[【Rails】flashの使い方](https://qiita.com/d0ne1s/items/2eccf6b22e7ed1d25925)
【個人開発】タイポを探すゲームをつくりました

## はじめに
私は現在RUNTEQというプログラミングスクールで学習しています。
学習を進める中で、何度もタイポエラーに遭遇してきました。
ときには前と同じタイポで時間を食ってしまい、ガックリしてしまうこともありました。

そんなある日、「google」という社名はもともとは「googol」のタイポだったと知りました。
そして人間が手で打つ以上、どんなにつよつよエンジニアであってもタイポをすることはあって、それはきっと今後も変わらないのだろうなと思いました。ならばタイポ自体を防ごうとするのではなく、日頃からタイポを見つける練習をすることで、早期発見に努めることはできるんじゃないか？と考えこのゲームを作るに至りました。

## 概要
5問出題、制限時間3分。ただひたすらにタイポを探すゲームです。

http://find-typo.web.app

※タイポ探しの練習を目的としているので、制限時間を超えてもゲームオーバーにはなりません。スコアがマイナス値になります。
※目が疲れるので、疲れ目でないとき推奨です(特にスマホの場合)。

## 遊び方
1. トップページです。右下の【Play】ボタンを押下してください。
![スクリーンショット 2021-12-17 18.26.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1374119/d70445a8-8657-934b-3834-f4a12878a3b6.png)
2. ルールページでルールを確認し、準備ができたら【Start】ボタンを押下してください。
![スクリーンショット 2021-12-17 18.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1374119/93aa8d78-3a9d-ca20-24e0-1604afc58c5e.png)
3. プレイ画面です。赤枠内の!ボタンでヒントがでます。隣の音声ボタンでは音のありなしを選べます。
この問題だと緑枠がタイポなので、これを押すと次の問題に進みます。
![スクリーンショット 2021-12-17 18.26.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1374119/f43ce85c-a3f4-add0-a7e0-17c48548214f.png)
4. 5問終了後に結果画面が表示されます。
![スクリーンショット 2021-12-17 18.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1374119/d8ad3ff3-2bf1-65e8-2ede-7d4735beb60c.png)

## 使用技術

- Nuxt.js (@nuxt/cli v2.15.8)
- Firebase (9.18.0)
  - Cloud Firestore
  - Hosting

## 苦労したところ
DBにはタイポの正誤リストのみを入れており、取得後オブジェクトやら配列やらでループして、タイポの位置や色がランダムになるように1行ずつ生成しているのですが、アルゴリズムを考えるのに頭が混乱して苦戦しました。
また、Cloud Firestoreにはrandomがなかったので、データをランダム取得しようとした場合に困りました。
ググってみて色々方法はあったのですが、今はそれほどデータ量が多くないので、一旦全データを取得し、そこからランダムに5つ選ぶ処理を入れています。

## 終わりに
たくさんの方に使って頂けて感動しました。
FirebaseのGoogle Analyticsを入れておいたので、数字で実績が見れてモチベーションになりました。
主にRuby、Ruby on Railsを学んでいるので、違う技術をキャッチアップしながら作るのは不安もありましたが、なんとか1人でリリースまで持っていけたので、自走力が少しついてきたのかなと思えたのも嬉しかったです。少しずつ機能追加などして運用していけたらなと思っています。