OmniAICreator/Qiita-1.07M huggingface dataset:
AlmaLinux 9 を取りあえず日本語化してみた【覚え書きシリーズ】

## さくらのVPSで標準OSになったAlmaLinux 9だが、標準のままでは日本語表示ではないので取りあえず日本語化してみた。
RockyLinuxとかでも当然できるはず。
### 日本語のパッケージを入れる
```shell-session
[root ~]# dnf -y install langpacks-ja
Last metadata expiration check: 0:01:10 ago on Tue 26 Jul 2022 12:51:14 AM JST.
Dependencies resolved.
～～～省略～～～
Complete!
```
### ロケールをセットする
```shell-session
[root ~]# localectl set-locale LANG=ja_JP.UTF-8 
[root ~]# source /etc/locale.conf 
```
### TimeZoneを日本に変更
```shell-session
[root ~]# timedatectl set-timezone Asia/Tokyo
[root ~]# timedatectl
               Local time: 火 2024-01-30 12:31:25 JST
           Universal time: 火 2024-01-30 03:31:25 UTC
                 RTC time: 火 2024-01-30 03:31:24
                Time zone: Asia/Tokyo (JST, +0900)
System clock synchronized: yes
              NTP service: active
          RTC in local TZ: no
```
### 日本語になったはず
```shell-session
[root ~]# date
2024年  1月 30日 火曜日 12:33:17 JST
```
[VS Code] キーボードショートカットで新規ファイルの作成ができると捗る

# 目的

キーボードショートカットで新規ファイルの作成がしたい。
デフォルトのショートカットに`ctrl+n`があるが、これは`Untitled`タブが新規に開く動作であり、望ましい動作ではない。
エクスプローラーのカレントディレクトリ下に新規ファイルが作成されて欲しいのだ。

これを実現するためにVisual Studio Codeのキーボードショートカットを編集する。

[要点](#要点)
[仕組み](#仕組み)
[変更作業](#変更作業)
[追記 新規フォルダの作成もできるともっと捗る](#追記-新規フォルダの作成もできるともっと捗る)
[参考](#参考)

# 要点

- `keybindings.json`という専用の設定ファイルがある。
- `ctrl+n`のキーバインディングを`workbench.action.files.newUntitledFile`→`explorer.newFile`と変更すると狙い通りの動作になる。

# 仕組み

Visual Studio Codeには、通常の設定ファイル（`settings.json`）ではなく、キーボードショートカット専用の設定ファイル（`keybindings.json`）がある。
これに必要なショートカットコマンドの内容を記述すれば、そのキーボードショートカットが有効になる。

とは言え、無から設定内容を手入力するのは、書くべき内容を知っていなければ不可能なので、GUIから設定するほうが簡単だろう。

# 変更作業

1. `ctrl+shift+p`で検索ボックスを開く。
1. 「keyboard shortcut」で検索。
1. 「Preference: Open Keyboard Shortcuts」を選択。
1. 検索ボックスに「newfile」。
1. `workbench.action.files.newUntitledFile`を右クリック→「キーバインドの削除」。
1. `explorer.newFile`の左端「+」マークをクリック。
1. ショートカットコマンドの入力を求められるので`ctrl+n`を入力し、Enterで決定。

![スクリーンショット 2022-07-26 004304.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565632/507d41de-000f-e65c-384f-b071efcaee80.png)

最終的に`keybindings.json`に以下の内容が記述されれば完成。
`ctrl+n`で望んだ通りの挙動で新規ファイル作成が可能になる。

```json:keybinding.json
[
  {
    "key": "ctrl+n",
    "command": "-workbench.action.files.newUntitledFile"
  },
  {
    "key": "ctrl+n",
    "command": "explorer.newFile"
  }
]
```

### ※`keybinding.json`を開く方法

1. `ctrl+shift+p`
1. 「keyboad shortcut json」で検索。
1. 「Preference: Open Keyboard Shortcuts(JSON)」を選択。

# 追記 新規フォルダの作成もできるともっと捗る

https://qiita.com/Kazuhiro_Mimaki/items/46c64e36fbff21e0fde2

確かに。
というわけで`ctrl+shift+n`の割り当てを`workbench.action.newWindow`→`explorer.newFolder`と変更した。

# 参考

https://stackoverflow.com/questions/39599514/vs-code-add-a-new-file-under-the-selected-working-directory

https://code.visualstudio.com/docs/getstarted/keybindings
【CSS】ボックスの配置方法 position

Qiitaの右も左も分からないまま、初投稿で震えてます。
今日できるようになったことは、「position」。

・いつ使用するか：ボックスの配置方法が、相対位置(relative)か、絶対位置(absolute)かを指定するとき

・ここに表示！としたいときは、top,bottom,left,rightなどで位置を指定する
　positionはこれらとは違う

position:relative
position:absolute
のような書き方。

初めてなのでこのくらいで。
自分が困ったときに見返して思い出せる備忘録のような使い方を目指していきたいです。
少しずつクオリティ上がっていったらばんばんざい。
Azure Automationの認証：PublicNetworkAccessを禁止し、Managed　Identityを使おう

# Azure Automation とは

Azureはもちろん、AWS/Onpremiseに対しても自動化作業を提供できるサービスです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348505/48dd73ec-d07e-4a28-e6aa-fac59c3e2d9b.png)

https://docs.microsoft.com/en-us/azure/automation/overview

# 認証については、
ローカル認証（RunAsAccount）とAzureAD認証（ManagedIdentity）2種類あります。

ローカル認証では、証明書を作成して、認証はPublicNetworkからアクセスすることが可能です。
以下のコマンドで確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348505/e5d416d3-b85f-fd9e-91ba-4efc74ed3ea8.png)

AzureAD認証については、２種類のマネージドIDを使用することが可能です。

・システム割り当てID
　　　１アプリに1つIDしか持つことができません。
・ユーザー割り当てID
　　　使用するリソース（複数も可）とは別に管理されますので、こちらはお勧めです。

＃　AzureAD認証（ManagedIdentity）の作成

Automationアカウントメニューから「ID」にて作成可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348505/745ef24e-e8c3-895d-ce1a-3ed1cda7d99c.png)

参照リンク：
　　https://docs.microsoft.com/en-us/azure/automation/quickstarts/enable-managed-identity

＃　AzureAD認証（ManagedIdentity）の利用
Connect-AzAccount -Identity

https://docs.microsoft.com/en-us/powershell/module/az.accounts/connect-azaccount?view=azps-8.1.0#example-5-connect-using-a-managed-service-identity

#　他
何か纏めかなと思ったところ、Automationの利用についての記事はありましたので、おまけに記載しました。
https://www.sqlshack.com/different-ways-to-login-to-azure-automation-using-powershell/
※Portal/CloudShellは一番無難かなと思いますね。
Kali Linux に Steam を Install する方法

Kali LinuxにSteam入れてみたので共有。脳死作業でできます。

## 事前準備
- [steam](https://store.steampowered.com/about/)からsteam_latest.debを取得する

## 1. gdebiをインストール
`$ sudo apt-get install gdebi`

## 2. steamをインストール
`$ sudo gdebi steam_latest.deb`

## 3. i386アーキテクチャを追加する
`$ sudo dpkg --add-architecture i386`

## 4. steamを実行
`$ steam`

初回は色々聞かれますが手順に沿って全てYしていればOK
複数のWindowsイベントログをまとめてcsvファイルにしちゃおう！

# 概要
Windowsイベントログ監視をする中で、どの警告・エラーは除外でいいの？ってことありませんか？
私はあります、いやきっと皆さんもあるはずだしあって欲しいし。

そんなの構築しているシステム体系によるじゃん、除外してもいいエラー/警告なんかないでしょなんか起きてるんだし。

…。

結局は一定の期間を設け、イベントログに出力されるエラーを見て監視 or 除外を判断していかないといけない…わかってます。

でもログをローテーションしていく中で複数の.evtxファイルを1つずつ開いてフィルターしてってやるのとっても辛くないですか…。
なんかWindowsイベントログのレスポンスもとっても悪いし、10ファイルとか串刺しでみるといくら時間があっても足りない！

ということで複数のevtxファイルをcsvに出力してExcelでフィルタリングしちゃおう！
というのがこの記事の目的です。
もっと他にもこうしたらいいよ、こっちの方が良いよってのがあったらご教示ください。

## 使うもの
   **LogParser**
ダウンロードはこちらから。
[Log Parser 2.2 日本語版 - Microsoft](https://www.microsoft.com/ja-jp/download/details.aspx?id=24659)

SQL文でクエリを発行できるツールなので、SQL詳しいぜなんでもできちゃうぜの神様みたいな方は、
もっと素敵に後のcsv結果を構成することができるかと思います。
（僕はもう少し勉強しないとな。。。）
## インストール方法
基本的には、次へ次へでこまることはないかと思います。
1.次へをクリックして。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110996/c9ab586f-8e42-ea89-9683-bb0e59f54199.png)
2.仕様許諾契約書に同意して。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110996/8b32e786-c95a-97c5-7b22-d29d5ca6b140.png)
3.とりあえず今回は完全でよくて。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110996/77c7adce-286d-9644-fa04-2fc46ddf4f52.png)
4.インストールをクリックして。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110996/2472f45f-6f42-2341-9f95-03f267c66e26.png)
5.そうするとスタートメニューに登録されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110996/0ae72856-66d9-1bd2-d27f-6567798099ec.png)

わずか5ステップで、
よしイベントログを解析しよう！となるわけです。

起動するとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110996/6b2c0ce2-f769-8010-613d-8235b7616491.png)



## さてとここから
ここからの操作は「evtxファイルがあって、それをcsvにする。」という操作を前提に記載しています。
logparserにくわせることができるファイル形式は本当はevtx以外にも、IISW3CとかXMLとかたくさんあるのですが、それはまたの機会に。
### 1つのevtxをcsvにする場合
    logparser -i:evt -o:csv "SELECT * INTO csvファイルを保存する先のパス\csvの名前.csv FROM 読み込ませたいevtxファイルの保存場所\読み込ませたいevtxファイル名.evtx"
-iオプションで、Importするファイル形式を指定し、-oオプションでOutputするファイル形式を指定しているわけです。
### 複数のevtxをcsvにする場合
    logparser -i:evt -o:csv "SELECT * INTO csvファイルを保存する先のパス\csvの名前.csv FROM 読み込ませたいevtxファイルの保存場所\*"
基本オプションは1つのevtxをcsvにする場合と変わりませんが、違うところとして、
複数ファイルをImportするために" * "でフォルダ配下すべてのファイルを対象としています。

## ここまできたら
ここまでくりゃもうあとはcsvファイルなので、Excelでファイルを開いて煮るなり焼くなりです！
Power Virtual Agents: メッセージを生成する際は、Markdown を使おう

# 背景
Q&A の一覧から チャットボット作れない？っていう同僚＆上司のお話

元々は [QnA Maker](https://docs.microsoft.com/ja-jp/azure/cognitive-services/QnAMaker/overview/overview) を使いたかったので Azure 環境導入を画策してたんですが・・2025 に廃止とのこと

> QnA Maker サービスは、2025 年 3 月 31 日に廃止される予定です。

一年前に Virtual Agents を使った際には、表記揺れの吸収は難しそうだったんですが、今なら AI Builder もあるし、再度 Try してみようかな、と。

で、最初に・・困ったことと、とりあえずの対処法

# 困ったこと

- ~~HTML メッセージをそのまま表示できなかった。~~

~~Microsoft Lists の記録内容をそのまま表示したかったんですけどね・・~~

2022/7/27 追記

ボットテストのとこだけの問題だったことが判明・・ごめんなさい :bow: 

# 対処法

Power Automate での Markdown がそのまま使えるので、頑張って整形する

https://docs.microsoft.com/en-us/power-automate/approvals-markdown-support

:::note warn
テーブルは表示は反応してるけれど、微妙な感じ
:::

## 動作確認例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/e38fa0e6-183f-627f-ee1a-96356745fd1c.png)

```markdown:Automate の Example を全部合わせたもの
# This is a H1 header
## This is a H2 header
### This is a H3 header
#### This is a H4 header
##### This is a H5 head

This is line 1.(space)
Now text will appear on the next line.er

This is line 1.(space, space)  
Line 2 has extra space before it.

0. First item.
0. Second item.
0. Third item.

- Item 1
- Item 2
- Item 3

1. First item.
   - Item 1
   - Item 2
   - Item 3
1. Second item.
   - Nested item 1
   - Nested item 2
   - Nested item 3

[Power Automate](https://flow.microsoft.com)

| Heading 1 | Heading 2 | Heading 3 |  
|-----------|:-----------:|-----------:|  
| Cell A1 | Cell A2 | Cell A3 |  
| Cell B1 | Cell B2 | Cell B3 |

Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~ 
**_Bold, italicized text_**  
**~~Bold, strike-through text~~**
```

# あとがき
次は表記揺れを AI Builder で対処したら、いけるかなぁ

# keyword
it is available to use markdown in a Message of Power Virtual Agents
赤外線リモコンを自作する - その2データ送信編

## 目次
1. [赤外線リモコンを自作する - その1データ解析編](https://qiita.com/ayakix/items/3ad454f135fb63a92026)
1. [赤外線リモコンを自作する - その2データ送信編](https://qiita.com/ayakix/items/75adbe742c32689a3cae)
1. [赤外線リモコンを自作する - その3温度/湿度センサー編](https://qiita.com/ayakix/items/69cf14e57dec86f4415a)
1. [赤外線リモコンを自作する - その4サーバサイド編](https://qiita.com/ayakix/items/5161a70ffca3b84e51f3)
1. [赤外線リモコンを自作する - その5クライアント編](https://qiita.com/ayakix/items/ca69c61deff3fb3fdb20)

## 赤外線リモコンを自作する - その2データ送信編

今回は、前回取得した赤外線データを赤外線LEDより送信できるようにする。

## 用意するもの

|  機器  |  型番  |  参考価格  |
| :--- | :--- | ---: |
|  Arduino互換機  |  [ESP32-DevKitC-32D](https://akizukidenshi.com/catalog/g/gM-13628/)  |  1,480円  |
|  赤外線ＬＥＤ  |  [OSI5FU5111C-40](https://akizukidenshi.com/catalog/g/gI-03261/)  |  1個20円  |
|  トランジスタ  |  [2SC1815L-GR-T92-K](https://akizukidenshi.com/catalog/g/gI-06477/)  |  1個5円  |

## 設計
**電子回路詳しくないので、自己判断でお願いします。**
赤外線ＬＥＤを点滅させることで、信号を送信する。ただし、出力が足りないため、トランジスタを挟む。

## 抵抗値計算
### 赤外線LED仕様
- 順方向電流IF: 100mA
- 順方向電圧VF: 1.35V

抵抗値計算
(5V - 1.35V) / 0.1A = **36.5Ω**

### トランジスタ仕様
- ベースエミッタ間飽和電圧VBE: 1V
- 直流電流増幅率hFE: 300

抵抗値計算
1. 赤外線LEDに必要な電流100mA
2. ベースに流したい電流 100mA / 300(増幅率) = 0.33mA
3. ベースへの抵抗 (3.3V - 1V) / 0.33mA = **6.9KΩ**

## 回路図
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1706/af49d08d-0dfa-2926-280b-dc2c67a5e012.png" width="500px">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1706/2e69af89-fe7e-40e3-cc26-de6e094f2688.png" width="500px">

## 赤外線データ送信プログラム
[赤外線リモコンを自作する - その1データ解析編](https://qiita.com/ayakix/items/3ad454f135fb63a92026)の通りに、IRremoteESP8266ライブラリをインストールしておく。
受信した赤外線データをuint16_t cmds[]として初期化する。
下記では、10秒に1度、赤外線データを送信する。

```cpp
#include <Arduino.h>

#include <IRremoteESP8266.h>
#include <IRsend.h>

#define KHZ 38
#define PIN_SEND 32
IRsend irsend(PIN_SEND);

uint16_t cmds[] = {3486, 1718,  450, ...};

void setup(void) {
  Serial.begin(115200);
  irsend.begin();
}

void loop() {
  irsend.sendRaw(cmds, sizeof(cmds) / sizeof(cmds[0]), KHZ);
  delay(10 * 1000);
}
```
microCMSとWordPressを比較した感想【HeadlessCMS】

# はじめに
microCMSと、ヘッドレス化したWordPressの両方を使う機会があったので、比較して感想を書きました。
どっちを使うか迷っている人がいたら参考になれば嬉しいです。

# ヘッドレスCMSとは
そもそもヘッドレスCMSとは何なのかという話ですが、ヘッドレスCMSとは、**フロントエンドとバックエンドが完全に分離しているCMS**のことです。
WordPressは**画面表示の機能（フロントエンド）** と **コンテンツ管理機能（バックエンド）** の機能が一つのシステムにまとまっていますが、コンテンツ管理機能のみ担当するCMSをヘッドレスCMSと呼びます。

WordPressをヘッドレス化する際は、コンテンツ管理のみをWordPressで行い、フロント側はAPIでコンテンツを取得して表示させるという方法になります。

# ２つのサービスを比較してみた
機能別に２つのサービスを比較してみました。

## カスタムフィールド
カスタムフィールを追加する場合、**microCMS**の方が圧倒的に簡単に追加できます。
microCMSの場合、そもそもコンテンツID（id）や各種日時（createdAt, updatedAt, publishedAt, revisedAt）以外のフィールドは最初から自分で定義することができるので、「カスタムフィールド」という表現は違うかもしれません。

このように直感的でわかりやすいUIになっていて、ぽちぽちと簡単に定義することができます。
![スクリーンショット 2022-07-25 21.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490844/ef05a12b-dfed-dafc-5ea3-143a76729962.png)

対して**WordPress**ですが、カスタムフィールドを追加する機能は標準で装備されているものの、非常に使いにくいです。
フィールドタイプがテキストのみ・必須項目にできない・文字数制限ができない という制約があります。
したがってほとんどの場合,[Advanced Custom Fields](https://ja.wordpress.org/plugins/advanced-custom-fields/)などのプラグインを使用することになりますが、バージョン管理が必要になりますし、脆弱性の問題もあります。

ちなみに**Advanced Custom Fields**は、課金をしないと繰り返しフィールドが使えません。
なので繰り返しフィールドが必要な場合は、**Advanced Custom Fields**に加えて[Smart Custom Fields](https://ja.wordpress.org/plugins/smart-custom-fields/)を使用しています。

**microCMS**の場合は、繰り返しフィールドも標準機能で用意されているので大好きです。

## API
APIに関しても、**microCMS**の大優勝です。

**microCMS**のAPIドキュメントは[こちら](https://document.microcms.io/content-api/get-list-contents)
**microCMS**は、APIプレビュー機能というものが付いていて、管理画面から簡単にAPIのレスポンスを確認することができます。
これが開発する際に非常に便利でありがたや〜と思っています。

対して**WordPress**ですが、標準でREST APIが使えるものの、こちらもまた非常に使いにくいです。
[WordPress REST APIのドキュメント](https://ja.wp-api.org/reference/posts/)
ヘッドレスCMSとして使うには無駄な項目が多い（そもそもヘッドレスCMSとして作られていないので当たり前ですが）ですし、カスタムフィールドを追加した場合はソースをいじらないとレスポンスに追加されません。
さらに標準のAPIだと、**最大100件まで**しか記事を取得できないので、一度に取得したい記事数が100件を超えそうな場合はAPIを自作する必要があります。
「WordPress標準でREST API使えるじゃん！」と思っていて痛い目見ました。

ただ、APIを自分の好きなように作りたいという場合はWordPressの方が良いですね。

## プレビュー機能
プレビュー機能に関しては、五分五分かなと思います。
**WordPress**の場合、独自のお約束や組み込み関数などがあるので慣れるまでは少し大変かもしれませんが、WordPress内で完結できます。

対して**microCMS**ですが、下書きの記事をプレビューするには、アプリケーション側の実装が必要になり、

1. WebアプリケーションにDraftKeyを渡す
2. Webアプリケーションが受け取ったDraftKeyをパラメータ含めてAPIを呼び出す
3. 取得したデータを画面に表示する

という手順を取らなければいけません。
参考：[microCMSドキュメント：下書き・予約投稿、draftKey、画面プレビュー](https://blog.microcms.io/draftkey_and_preview/)

# まとめ
- microCMSの方が圧倒的に使いやすい
- 自由度の高さはWordPressに軍配が上がる

まだいろんなサービスがあるので、色々触っていきたいです。
動的CSS・JSによるブルートフォース対策

# 動的CSS・JSによるブルートフォース対策

認証破りの最も基本的、かつ原始的とされる、ブルートフォース攻撃(以下BF攻撃)ですが、コンピュータの処理制度の向上によってかなり脅威になっています。

以下の図は、パスワードの強度とBF攻撃成功にかかる時間の関係を表しています。

![howLongDoesItTakeToSuccessBFattack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627373/eb354621-afee-a716-bc10-9ff7f0c33d6b.png)

※画像は「[IPA](https://www.ipa.go.jp/security/txt/2008/10outline.html)」より

う～～～ん。
半角英数字＋記号を使用すれば、「1千年」ですので、大丈夫そうですね、、、

って、**お～～～い!!!**

これ、「2008年」の記事でした、、、

今はどうなんだろう、、、
じゃ～～～ん!!!!

![BF攻撃にかかる時間](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627373/de6219f5-d580-83fa-b40e-079f0bb30fd0.png)

リンク先に投稿禁止文字がある???とのことで、リンクを貼れません。
「reddit password」を検索して下さい。


あらら、「8時間」で突破されちゃうの!?
「ムーアの法則」、恐るべし!!!

もはや、パスワード8桁神話なんて過去のものですね、、、

だからといって、パスワード16桁なんてまず覚えられないし、、、

# 認証成功可否を難しく!!!

長くなりました。
申し訳ないですが、まだ本題ではありません、、、

既に述べた通り、パスワードは「8桁」では不十分。
しかしながら、これ以上パスワードを増やすのは、現実的ではないという問題があります。

解決策として、パスワードレス認証が近年盛り上がっています。
この方法は確かに直接的にはパスワードによる認証を防ぐことで、BF対策になっていますが、まだまだ問題だらけです。

実際、僕が勤務している企業でも「脱パスワード」を目指してはいますが、パスワードそのものは使われ続けています。
また、パスワードレス認証でも根底にはパスワードを使用していることが多くあります。

パスワードレス認証はユーザにとって手間になることも多く、必ずしもパスワードレスを廃止するべきとは言えません。
セキュリティを高めることだけを意識して、ユーザビリティを損なうことは許されませんので、、、


# 動的JS・CSS

ここからがようやく本題です。

ということで、僕が運営しているサイト(秘密)で近年取り入れているセキュリティ技術として、BF攻撃時に認証成功・失敗の判定をしにくくするという実装をしています。

おそらく、BF攻撃者はHTTPレスポンスから「ログインに失敗しました。」的な文言の有無で、認証成功・失敗を判定していると思われます。
あるいは、成功時と失敗時に返ってくるデータを見極めてより精密な判定を行っているかもしれません。


いずれにせよ、この判定をしにくくすることはかなり有効なBF対策になると僕は思います。

これを実現するため、僕が行っている実装を紹介します。

* 認証成功時と失敗時に返すデータはほとんど同じ
* ユーザ表示に関しては「JS」「CSS」で対応
* 読み込んでいる「JS」「CSS」によって判断されないように、これらは動的にかつ、ランダムな処理を混ぜて生成

例えば、CSSに関しては
```CSS
/* 認証成功時に「エラー」の文言を非表示に */
.random1 {
  display: none;
}
/* ... */
.random2 {
  color: red;
}
/* ... */
.random3 {
  color: blue;
}
```
的な感じです。


さらに、これらのセレクタに関しても、ランダムで「ID」指定や「クラス」指定を変化させます。

CSSだけだとパースして対応することも可能ですので、「JS」でユーザ用表示を切り替えることもあります。

```JS
document.getElementById("random1").classList.Add("hidden");
// or
document.getElementsByClassName("random1")[0].classList.Add("hidden");
//or
const obj = document.querySelectorAll("random1.random2")[0];
obj.style.position = "absolute";
obj.style.inset = "-999 -999 999 999";
// or
...
```
「opacity」を「0」にしたり、「z-index」を「-999」に設定して一番下に配置したり、そのまま「remove」してもいいですね♪

このように「CSS」「JS」ファイルに関しても毎回内容をすこしずつ変えて出力すれば、判断もかなり困難になります。


# 問題点

この方法は利点だけではなく、問題点も当然あります。

1. コードが複雑に
2. 標的型攻撃には弱い


「1」に関して、
外枠さえ作ってしまえば、そこまで複雑になることもありません。
出力内容を決めてしまえば、あとはテンプレートエンジンを使用して簡単に作成可能です。

「2」に関して、
動的JS・CSSだけに限って話ではありませんが、確かに対策されると攻撃が成功する危険性も高まります。
これに関しては、それ以外の基本的なセキュリティ事項(定期的変更・最低桁数・etc...)も正しく満たせば、そこまで問題にはなりません。
さらに、簡単に出力内容を変更して攻撃者の攻撃意欲をそぐことができれば、十分とも思えます。

# まとめに

以上、僕が実装したBF対策でした。
個人のサイトでの実装であり、実際に攻撃を受けたこともないのでその有効性は実感していませんが、攻撃者の手法を考えるとかなり効果的な対策だと思われます。

最後まで読んで下さりありがとうございます。

このセキュリティ技術に関する意見がある方は、ぜひコメントお願いします。
ヘッダーメニューに下線を足して表示しているページをわかりやすくする

## 背景と実施したこと

Webページを作る際にヘッダーメニュー（グローバルナビ）を作成する機会は多いと思います。
どれかのメニューをクリックした際には、ページ遷移が起きると思いますが、このときユーザがメニュー上のどこに遷移したのかをわかりやすくしたいと思いました。

言葉でいうと少し分かりづらいですが、動きで示すと以下の雰囲気です。
Afterの方ではメニューに下線を引いていて自分がどのページにアクセスしているかをぱっと見でわかるようにしてみました。

【Before】
（「単語登録」「単語一括登録」はURLが変わっていること以外は画面に変化がなく、わかりにくい）
![before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635205/5583d04d-4fd7-f398-47e3-499968adfa20.gif)


【After】
（メニューに下線を追加したことで動きが出て、自分がどこにアクセスしたのかがわかる）
![after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635205/8f64be12-0cbf-93d7-7fbd-0e358e7d18a0.gif)


■前提
使用している技術のver情報は以下の通りです。
next: 12.1.0
react: 17.0.2
TailwindCSS: 3.0.23


## 概要
+ グローバルナビをクリックしたときに、自分がサイト上にどこのページを開いているのかわかりやすくしたよ。
+ 現在のパスを
+ 三項演算子を使ってCSSを条件分岐させているよ

## 実装方法

そんなに難しいことはしていません。
考え方は、「現在のパスとメニューに埋め込んでている遷移先のURLを比較して、一致した場合に下線を表示させる」です
関係ある部分のみを抜粋すると以下です。

```jsx:pageHeader.tsx
import Link from 'next/link';
import Router, { useRouter } from 'next/router';
import React, { useState } from 'react';
import { MenuList, ExtraMenuList } from './type';

const PageHeader: React.FC = () => {

  const router = useRouter();
  const currentPath = router.asPath;

  const menuList: MenuList[] = [
    {
      text: '単語一覧',
      link: '/',
    },
    {
      text: '単語登録',
      link: '/regist',
    },
    {
      text: '単語一括登録',
      link: '/bulkRegist',
    },
  ];



  return (
    <div className='flex w-full items-center justify-between bg-primary-500'>
      <div>
        <h1 className='px-2 text-lg font-bold text-black md:text-2xl'>英語覚える君</h1>
      </div>
      <div>
        <ul className='hidden items-center gap-8 px-4 sm:flex'>
          {menuList.map((item) => (
            <React.Fragment key={item.text}>
              <li
                className={` py-4 ${item.link === currentPath ? 'border-b-2 border-gray-800' : ''}`}
              >
{/** 遷移先のURLとcurrentPathを比較する。classNameの中で条件分岐させるためテンプレートリテラルを活用する（バッククォート）で括る*/}

                <Link href={item.link}>
                  <a className=' py-4 px-4 font-bold text-black  hover:opacity-50'> {item.text}</a>
                </Link>
              </li>
            </React.Fragment>
          ))}         
        </ul>
      </div>
    </div>
  );
};

export default PageHeader;

```


## 補足
ちょっとの工夫でユーザビリティがよくなるのでこの方法は覚えておきたいですね。
一方でちょっとこの実装方法が一番いいのか、というのはありそうです。
「こうしたほうがいいよ！」という意見があればぜひコメントください。

ちなみに、サイトの中でどの位置にいるかを示すためには「パンくずリスト」も効果的のようですね。
この実装方法も今度調べてみようと思います。
Vision AIを利用した文字認証によるOCR処理テスト

Vision AIを利用した文字認証によるOCR処理テスト。
Visin AIの利用に当たってはAPIキーを取得して今回はPHPのサンプルプログラムにて、文字認識したテキストデータを取得するという、手順を踏みます。
今回は、獣医師の医療現場で使う血球検査機器の付属プリンタ出力データを画像として認識させています。
実際の印刷結果から必要な部分をトリミングして、テキスト化することにより、より確実なデータとして変換取得可能となります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/c79e9b0b-a230-4391-0303-0bed0b3dbd5f.jpeg" width="30%">
最近の携帯端末の写真機能では編集によりトリミング可能ですが、印刷結果をトータルに保存し、その画像より必要な部分をトリミング取得する機能としては、Cropper.jsのようなJavaScriptライブラリを利用することで、必要なテキストデータを取得できます。下記のようにトリミング可能となります。
![pic_trim (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/2abd097c-c7d7-141a-d9a7-b1049264b005.jpeg)
この画像をVisionAIのテストサイト https://cloud.google.com/vision?hl=ja にて変換し、jSON配列内のtextAnnotationsのdescriptionにて
WBC\nRBC\nHGB\nHCT\nMCV\nMCH\nMCHC\nPLT\n111\n545\n13.5\n40.9\n75.0\n24.8\n33.0\n49.1
と言うようにテキストを返してくれます。

```
  "textAnnotations": [
    {
      "boundingPoly": {
        "vertices": [
          {
            "x": 9,
            "y": 4
          },
          {
            "x": 151,
            "y": 4
          },
          {
            "x": 151,
            "y": 118
          },
          {
            "x": 9,
            "y": 118
          }
        ]
      },
      "description": "WBC\nRBC\nHGB\nHCT\nMCV\nMCH\nMCHC\nPLT\n111\n545\n13.5\n40.9\n75.0\n24.8\n33.0\n49.1",
      "locale": "und"
    }
```
viの便利操作方法を記録する

# 師曰く、viこそ至高である
「**やっぱりviが一番いいよ**」と、自分の先生はいつも言っていました。
研究活動でドライ解析を頻繁に行うため、覚えておいて損はないと思い、トライしました。
だけど、ヒジョーに難しい！なんというか、wordと比べシンプルすぎて使いづらいというか。ほんとに良いのものなのかー？としばらく思ってました。

しかし、使い続けていくと便利なことに気づくいたのです。
**キーボード操作だけで広範囲のテキストを一気に操作できる**点が、とても快適なんです！！

そんなわけで今回は、使用していく中で便利だ・・・と思った操作を記録します。
使い慣れてる人にとっては、「こんなのわかってるよ💢💢」ってなると思いますが、ご容赦ください！

## 検索
viを開き、`/`または`?`を入力
これによって、コマンドモードに移行する。その後、`n`または`N`で候補を移動できる。
| コマンド |　　意味 |
|:-:|:-:|
| /[検索文字列]  | 順方向に文字列を検索  |
| ?[検索文字列]  | 逆方向に文字列を検索  |
| n  | 検索後、順方向にマッチする文字列を検索、つまり次の候補に移動する  |
| N  | 検索後、逆方向にマッチする文字列を検索、つまり前の候補に移動する  |

## undo(→）とredo(←)
間違って消しちゃったor描いちゃった
そんな時はこのコマンド
流石に覚えてる人の方が多いと思う
| コマンド | 意味 |
|:-:|:-:|
| u  | undo |
| CTRL+R  | redo  |

## ビジュアルモードって便利
目次の通り、便利だなあ！って思った点を紹介
### 現在の行から最上段or最下段まで一気に消去
`V`+`gg or G`+`d`で行ける！！

## 行数を表示させる
`:set number`で行ける
ディフォルトで表示される様にしたいなら
ホームディレクトリ(`/Users/name/`）に`.vimrc`ファイルを作成する。
その後、vimで`set number`と書き込む
次回から行数が表示される

# 最後に
viは便利
ターミナル上でテキスト操作をやるならば、viに慣れておくと効率的ですよ。
今後も、どんどん掲載します。
「達人に学ぶSQL徹底指南書」の演習問題 2-2をブラウザで実行してみた


## この記事の概要
- この記事は「達人に学ぶSQL徹底指南書/ミック著」の演習問題をブラウザのSQL実行環境([db-fiddle.com](https://www.db-fiddle.com/))で動かしてみたというものになります。
- 解説は書籍の方を参照してください。
- カラム名がアルファベット表記になっていることに注意してください

## [db-fiddle.com](https://www.db-fiddle.com/)の使い方
- テーブルの作成: Scheme SQLの欄にCREATE TABLEを書いてテーブルを作成
- データの挿入: Query SQLの欄にINSERT文を書いてデモデータを挿入する
- データの検索: Query SQLの欄にSELCT文を書く

## 問題文
p.36の「ランキング」では、テーブル全体の中でランキングを求めました。
今度は「地方」列も付け加えたテーブルを用意して、地域ごとにランキングを求めてみましょう。

- DistrictProducts(地方ごとの果物の値段)

| district |  name  | price |
|----------|--------|-------|
| tohoku   | orange | 100   |
| tohoku   | apple  | 50    |
| tohoku   | grape  | 50    |
| tohoku   | lemon  | 30    |
| kanto    | lemon  | 100   |
| kanto    | pine   | 100   |
| kanto    | apple  | 100   |
| kanto    | grape  | 70    |
| kansai   | lemon  | 70    |
| kansai   | melon  | 30    |
| kansai   | apple |  20    |

## データセットの準備
- 準備済みのもの: https://www.db-fiddle.com/f/29Pj6zFxnFZXAc9Rba5bUU/1
- Schema SQL
```sql
CREATE TABLE Products (
  districts varchar(255) NOT NULL,
  name varchar(255) NOT NULL,
  price int NOT NUll
);
```

- Query SQL
```sql
INSERT INTO Products VALUES 
('tohoku','orange','100'),
('tohoku','apple','50'),
('tohoku','grape','50'),
('tohoku','lemon','30'),
('kanto','lemon','100'),
('kanto','pine','100'),
('kanto','apple','100'),
('kanto','grape','70'),
('kansai','lemon','70'),
('kansai','melon','30'),
('kansai','apple','20');
```

## 解答

詳しい解説は書籍を参照してください。

```sql
SELECT 
	D1.districts, 
    D1.name, 
    D1.price, 
   (SELECT COUNT(D2.price) 
    FROM DistrictProducts D2
    WHERE D2.districts = D1.districts 
    AND D2.price > D1.price) + 1 AS rank_1
FROM DistrictProducts D1;
```
tar でxzファイルを解凍する

めっちゃしょーもないことに引っかかった話。


```
$ curl https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz | tar xz --strip-components=1 

gzip: stdin: not in gzip format
```

これでtarファイルの解凍にこけていた。
以下にしたらよかった。

```
$ curl https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz | tar xJ --strip-components=1 
```


というのも、以下のように -zはgzipのファイル解凍。-Jがtzファイルの解凍に使われるから。
xzはファイル形式を指定していたわけではなく、x,zの組み合わせだったのだ😆

```
$ tar -h
  -z, -j, -J, --lzma  Compress archive with gzip/bzip2/xz/lzma
```



## 追記

xzコマンドをインストールする必要があるかも。
例えばalpineなら、`$ apk update && apk install xz`


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/6ffa1bdc-e281-538f-7336-b63e6ede37b3.png)
from. https://superuser.com/a/801189
旅先でクラウド上のWindowsサーバにRDP接続

この記事には、目新しい技術は書かれていません。既成のアプリケーションの使い方のひとつが紹介されているだけです。

旅先でクラウド上のWindowsサーバにRDP接続したいな、という機会は、僕にはたくさんあります。PCを使える状況であればPCを使えば良いのですが、例えば電車の中などでPCを使えない、あるいはPCは使えるけどそれも面倒という場面も僕にはたくさんあります。
こんなときのために、僕にはセルフォンがあるのです。
## 外部からの接続
外部から目的のWindowsサーバにRDPで接続するには、間にSSHが配置され、このSSHがポートフォワードしてくれる、というのが前提です。当然ながら、SSH接続には鍵が必要というのも前提です。
つまり、何の変哲もない一般的な構成です。
## 僕を助けてくれるAndroidアプリ
こういった場面で僕を助けてくれるAndroidアプリは以下の2つです。どちらか1つというわけではなく、2つがタックで助けてくれます。

- ConnectBot
- Remote Desktop

これらはよく配慮された機能をもち、かつ余分な機能を持たないという、セルフォンのアプリケーションとして優れた特徴を持ったアプリケーションです。
![0f1620b003abae44c6e2dc0b9a1cb92a62de8a099e7bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/ebccf284-7181-730e-9cba-849d312671dd.png)
![27be1a94691511925de9246bf4d726ca62de8a1fee87d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/3aafaa64-d185-4050-f6e1-1d1c9dbcdfbf.png)
## 使い方
ConnectBotの設定を事前に行っておくべきです。
### ConnectBot
以下はConnectBotの設定です。

"Manage Pubkeys"を使って、サーバへのSSH接続を行うための鍵を登録します。
![bd584093bd0999427a3c12f2f66be6e462de95445d595.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/17a74086-49d4-d540-d94b-9bec51db59e8.png)
鍵を登録した状態です。
![e6b2d3c4f834970d80b85999a17cd90f62de96d5c7fb3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/ab9e47a2-94c9-49af-e38c-7107cab68fe7.png)
"Hosts"にSSHサーバを登録し接続します。鍵はここで使用します。SSHサーバへの登録と接続については、この記事では解説しません。難しくはないでしょう。

SSHでSSHサーバに接続したら、メニューから[Port Forward]を選択します。
![372c4d79e6285840903eb025c3048e7562de94b11ae96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/25361c99-25f4-9021-eac5-fdff033bbddc.png)
WindowsサーバのRDPへのポート・フォワードを設定します。
![13422e864d8751603dc499c631523daa62de8feb1dd6e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/bfc37dbf-b52a-02ed-6b0d-c71fa8aeb88e.png)
### Remote Desktop
僕は、マイクロソフト社純正のアプリケーションを使用しています。
ConnectBotによるSSH（= ポートフォワード）セッションを活かした状態で、RDPに接続します。
![8863212619366cd720ecc064da95133b62de8a8813c06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/9a6af25d-228c-d912-ef78-91dc9f01b3a9.png)
Python で interruptible な xmlrpc server(socketserver) を作るメモ(threading)

xmlrpc server(sockerserver) の `serve_forever` のように永遠にブロックする関数を呼び出して処理するときにアプリ内部から停止する
JupyterLab とか PyQt とかで GUI でサーバースタート, ストップしたいときなど.

Windows, Unix で使えるのがほしい.

## Threading

Pythonのthreadingとmultiprocessingを完全理解
https://qiita.com/kaitolucifer/items/e4ace07bd8e112388c75

https://stackoverflow.com/questions/2189069/simplexmlrpcserver-wxpython-and-thread-howto-stop

ありがとうございます.
thread + event でいけます!
(Python thread も実装には Win32 thread/pthread を使っているようで, 特に pthread の場合基本的には thread を外部から terminate するのはできない)

### 最新 Python 対応

少なくとも Python 3.7 or more ですと, `handle_request()` などはタイムアウト設定しないと無限ループの設定になっていました. 最終的に timeout 設定し以下のような感じになりました.


```
          self.server.timeout = 1
          while not self.quitEvent.isSet():
              try:
                  self.server.handle_request()
              except:
                  print("stop")

```

メインスレッドが終了したらスレッドも停止したいときはデーモン化(`setDaemon(True)`)するとよさそうです!


## Multiprocessing

Multiprocessing(Fork)とかであれば, terminate or signal 使って停止の方法もあるようだけど... ちょっとめんどいカナ.

## おまけ


また, XMLRPC server のベースになっている socketserver では ThreadingMixin など取ることができますが, これはサーバを multithread 化(リクエストをマルチスレッドで処理)するのが主のようです.

## TODO

* [ ] asyncio(future) でやるほうがよいかも? asyncio は 3.4 から導入されて 3.7 で正式サポートされたようです! https://qiita.com/waterada/items/1c03a7c863faf9327595
シェル変数と環境変数

## 勉強前イメージ

シェル変数がわからん

## 調査

### シェル変数 とは

現在実行しているシェルだけで有効な変数になります。
そのシェルが実行するコマンドには引き継がれません。
シェル変数を作成したプロセスのみ参照ができます。

```
# bash      # シェルの起動
# HENSU=1   # 変数を定義
# set | grep HENSU
HENSU=1     # 参照できる
# bash      # 別のシェルを起動
# set | grep HENSU
#           # 参照できない
```

### 環境変数 とは

シェルから実行したコマンドにも引き継がれる変数になります。

```
# bash                # シェルの起動
# export HENSU=1      # 変数の定義
# env | grep HENSU    # 参照できる
HENSU=1
# bash                # 別のシェルを起動
# env | grep HENSU    # 参照できる
HENSU=1
```

### シェル変数と環境変数の違い

- シェル変数 : 今実行しているシェルだけで有効な変数
- 環境変数 : シェルから実行したコマンドにも引き継がれる変数

シェル変数の方が環境変数より優先されています。

## 勉強後イメージ

ほぼ環境変数使ってたわ・・・

## 参考

- [シェル変数と環境変数](https://codezine.jp/unixdic/w/%E3%82%B7%E3%82%A7%E3%83%AB%E5%A4%89%E6%95%B0%E3%81%A8%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0#:~:text=%E3%82%B7%E3%82%A7%E3%83%AB%E5%A4%89%E6%95%B0%E3%81%AF%E3%80%81%E7%8F%BE%E5%9C%A8%E5%AE%9F%E8%A1%8C,%E3%81%8A%E3%81%8F%E3%81%A8%E3%82%88%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82)
- [環境変数を設定するには](https://atmarkit.itmedia.co.jp/flinux/rensai/linuxtips/118setenv.html)
【#39 エンジニア転職学習】Go Gin　Tutorial開始

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

7月いっぱいまでGoのフレームワークであるGinについて、
学習をしていきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。


https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
本日よりGinのTutorialを学習開始しました。

* **Gin Tutorial　←Topics!!**

# Gin Tutorial開始
昨日でUdemy教材でのGoを使用したWebアプリ作成を一通り終えました。
その中で**GoのWebフレームワークを学習したい**と思いました。理由は以下2点あります。
* 自分で1からあのレベルのコードを記述するのは難しいと感じた
* アプリ作成するための**ハードルを最初はとにかく低くしたい**と思った

どちらも同じように「自分の技術に対する理解不足」が根本原因ですが、インプットし続けるよりアウトプットすることで理解度が大きく変わる面もあると思っています。
まずは便利なものを使用してでも、自力でアプリを作成することが先決だと考えてフレームワーク学習を急遽始めることにしました。

Ginとechoどちらにするか迷いましたが、
* ドキュメントの日本語対応
* 流れが分かるチュートリアル
がある点を考慮してGinにしました。

本日は触り部分しかできていないので、
明日から本格的に進めていきます。

##### 使用している教材はこちら↓


https://go.dev/doc/tutorial/web-service-gin


# おわりに
最後までお読みいただきありがとうございました。
アドバイス・応援コメント等いただけますと幸いです。
競プロのローカルテストで標準出力だけ出したい

# 結論

　Linux 系は `cat input.txt | ./a.out` `./a.out < input.txt`

　Windows は、

- PowerShell なら `cat input.txt | .\a.out`
- cmd なら `.\a.out < input.txt`（追記：`type input.txt | .\a.out` でも可）

　なお、PowerShell で小規模な入力なら `Get-Clipboard | .\a.out` が便利

# 本文

　競プロの問題をローカルテストする時、手元にコードを書いて、コピペで入出力を検証する人は多いと思います。単純な問題なら特に問題ないですが、複数の数値を入力しながら出力をしていく形式、特にテストケースが多数ある問題だと、**入力と出力の値が入り混じって、出力の検証がしづらい**という問題があります。

　また、この他に根本的な問題として、大規模な入力だとそもそもクリップボードに貼り付けることができません。

　以上のような場合、別にテキストファイルを用意して、それを実行ファイルに読ませる必要があります。

# 具体的には

　Codeforcesの[この問題](https://codeforces.com/contest/1352/problem/A)を例にすると、

```c++:example input
5
5009
7
9876
10000
10
```

```c++:example output
2
5000 9
1
7 
4
800 70 6 9000 
1
10000 
1
10
```

　これをコピペで検証すると、

```PS:local console
PS C:\Users\user> .\a.exe
5
5009
2
9 5000
7
1
7
9876
4
6 70 800 9000
10000
1
10000
10
1
10
```

　となって、かなり検証しづらいです。

# 対策

　例えば C++ の場合、[fstream を用いてテキストファイルを読み込ませる方法](https://qiita.com/_meki/items/559ff91f3e695de5600f)がありますが、いちいちコードを差し替える必要があるので手間になります。

　そこで、ここではコマンドライン上で直接テキストファイルを参照する方法を紹介します。OS やコンソールによって多少方言の違いがあるので注意です。

# Linux 系

　`cat`コマンドとパイプを使うことにより実行できます。

```cdmd:local console
user@DESKTOP-XXXXXXX:/mnt/c/Users/user$ cat input.txt | ./a.exe
2
9 5000
1
7
4
6 70 800 9000
1
10000
1
10
```

　また、リダイレクトにより同様のことができます。

```cdmd:local console
user@DESKTOP-XXXXXXX:/mnt/c/Users/user$ ./a.exe < input.txt
2
9 5000
1
7
4
6 70 800 9000
1
10000
1
10
```

　なお、上記の実行結果は WSL 上で再現を行っています。Linux のネイティブ環境や Mac OS ではもしかして挙動が違う場合もあるかもしれませんが、あしからず。

# Windows

　コマンドプロンプトではリダイレクトが使えます。

```cmd:local console
C:\Users\user>.\a.exe < input.txt
2
9 5000
1
7
4
6 70 800 9000
1
10000
1
10
```

　`cat` は使えません。（追記：`type` というコマンドで同様のことができるようです）

```cmd:local consle:
C:\Users\user>cat input.txt | .\a.exe
'cat' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

　PowerShell では `cat` が使えます。

```PS:local console
PS C:\Users\user> cat .\input.txt | .\a.exe
2
9 5000
1
7
4
6 70 800 9000
1
10000
1
10
```

　逆に、リダイレクトが使えません。

```PS:local_console
PS C:\Users\user> .\a.exe < input.txt
発生場所 行:1 文字:9
+ .\a.exe < input.txt
+         ~
演算子 '<' は、今後の使用のために予約されています。
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : RedirectionNotSupported
```

# 便利な Get Clipboard（PowerShell）

　ほとんどの場合、ローカルテストはクリップボードに収まる範囲の入力を検証することが多いです。

　PowerShell の場合、クリップボードの内容を直接入力にして出力だけを表示させることが可能です。

```PS:local_console
PS C:\Users\user> Get-Clipboard | .\a.exe  
2
9 5000
1
7
4
6 70 800 9000
1
10000
1
10
```

　わざわざ別に `input.txt` を用意する必要がないので、かなり便利です。
JavaScript メソッド「write」と「name:value」変数定義

```html
<body>
<script>
var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566,
　　fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
// 下記二つ書き方の値一緒＝Doe
var personLastName1 = person.lastname;
var personLastName2 = person["lastname"];
document.write(personLastName1 + "<br>");
document.write(personLastName2 + "<br>");

document.write("fullNameメソッド()なし：" + person.fullName + "</br>");
document.write("fullNameメソッド()ある：" + person.fullName());
</script>
</body>
```

上記の結果：
Doe
Doe
fullNameメソッド()なし：function(){return this.firstName + " " + this.lastName;}
fullNameメソッド()ある：John Doe
PL-900 Microsoft Power Platform Fundamentals 試験申請から試験参加までの流れ

# 申し込み方法
　まず先に説明するのは**PL-900は無料で受験できます。** 無料で受験できる方法と申し込みの流れは下記となります。

### ①、Microsoft Virtual Training Daysを参加する。
[Microsoft Virtual Training Days](https://www.microsoft.com/ja-jp/events/top/training-days/?aaid=AFUNRL&activetab=a1:primaryr3)ページを開き、直近の無料トレーニング(Microsoft Power Platform Virtual Training Day: Power Platform の基礎)を参加する。※事前にMSアカウントの用意が必要
![キャプチャ1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667622/1d985769-39a4-f7c3-14cb-daeb3fcc7e06.jpeg)

### ②、無料バウチャーを有効化する
- イベント後、数日～1週間程度で、サンクスメールが届きます。
![キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667622/8ac95351-e964-721e-adcb-ae047b4ec447.jpeg)
- 【試験の詳細】をクリックし、試験説明画面を開きます。
![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667622/bf8bbd01-e2f0-ab0a-c4f3-2ea18389d267.jpeg)
- 【Person VUEでスケジュール】＞【試験割引】をクリックし、下記の枠に自分のメールアドレスを入れ【Check Eligibility】を押下して割引券を有効化する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667622/80b8b569-995d-9dcd-9133-3a8bb314dfdd.png)

### ③、試験のスケジュールリング
- 有効後の割引券をクリック、【Claimed】の状態になってから、右下の【Schedule exam】ボタンをクリックし、試験をスケジュールする。※詳細は[試験の登録とスケジュール設定](https://docs.microsoft.com/ja-jp/learn/certifications/register-schedule-exam)をご参照ください。
![キャプチャ5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667622/646d368c-bca4-8c4a-a933-8cf31f8f9748.jpeg)

# 勉強方法
- [ランニングパス](https://docs.microsoft.com/ja-jp/learn/paths/power-plat-fundamentals/)の内容を全て勉強する 
- UdemyでPL-900の模擬試験問題を練習する

# 試験参加の注意事項
- 試験の前日までシステムのテストを実施したほうがいい
- 試験中に撮影されたビデオが必要
- 試験用机に携帯、本などを置かないこと
- 試験中に他の人が部屋に入ってはいけません
- 運転免許証やパスポートなどの本人確認書類を事前に用意する
- **試験中に許可がなければ席から離れることができない** ※許可なしで席から立つことで試験が無効と判定されたことがある
それ以外は[Pearson VUEによるオンライン試験に関して](https://docs.microsoft.com/ja-JP/certifications/online-exams) をご参照ください。

# 試験形式と結果判定
- 試験内容は択一問題、正誤問題、複数選択問題、組み合わせ問題
- 試験後すぐに結果判定される。
基本情報（実記憶管理）

プログラム内蔵方式をとる現在のコンピュータでは、プログラムを主記憶上にロードしてから実行します。
マルチプログラミング環境だと、プログラムが同時に複数実行されるため、主記憶の上にはそれらが全てロードされることになります。

限られた主記憶空間を、効率良く使えるようプログラムに割り当てるのが**実記憶管理**
の役割です。

主記憶装置はメモリとか、メインメモリと呼ばれるものですね。

## 固定区画方式
主記憶に固定長の区画（パーティション）を設けて、そこにプログラムを読込む管理方式です。
全体を単一の区画とする**単一区画方式**と複数の区画に分ける**多重区画方式**があります。

![スクリーンショット 2022-07-25 13.24.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542637/81e4c5fd-12e2-acbf-dbf0-e67d4d3379ec.png)

単一区画は一つのプログラムしかロードできないので、マルチプログラミングには使えません。
一方で、多重区画は区画ごとにプログラムをロードすることができます。

区画のサイズが均等である必要はなく、4MBと8MBと16MBの組み合わせにしたり、色んな分け方が可能です。

記憶管理は単純ですみますが、プログラムを読み込んだ後、区画内に生じたあまりスペースは使用することができず、区画サイズ以上のプログラムを読込むこともできません。
そのため、主記憶の利用効率はあまりよくないです。

## 可変区画方式
主記憶を最初に固定長で区切ってしまうのではなく、プログラムをロードするタイミングで必要なサイズに区切る管理方式が**可変区画方式**です。この方式では、プログラムが必要とする大きさで区画を作り、そこにプログラムをロードします。

区画内に余剰スペースは生じないため、固定区画方式よりも主記憶の利用効率は良くなります。

![スクリーンショット 2022-07-25 13.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542637/ae824084-463a-5f4a-b4aa-cf168459ee75.png)

区画に無駄がないので問題がないように見えますが、新たな問題があります。

## フラグメンテーションとメモリコンパクション
可変区画方式だと、主記憶上にプログラムを隙間なく詰め込んで実行することができます。
必ずしも詰め込んだ順番にプログラムが終了するとは限りません。

主記憶の空き容量自体がプログラムの実行にたるサイズであったとしても、それを連続した状態で確保することができません。
この現象を **フラグメンテーション（断片化）** と呼びます。

```
1MB          
----
3MB
----
3MB
```
フラグメンテーションを解消するために、ロードされているプログラムを再配置することによって、細切れ状態にある空き領域を、連続したひとつの領域にしてやる必要があります。この操作を **メモリコンパクション**と言います。

```
1MB
3MB
3MB
(6MBの空き領域）

一つの連続した領域を作り出す。
```

## 閑話休題
本の中でメモリコンパクションとガベージコレクションが一緒の括りになってしまっているため、細かく説明しようと思います（本の説明でたまに端折っている部分がある）

* ガベージコレクション：実行中のプログラムが占有していたメモリ領域のうち不要になったものを自動的に解放し、空き領域として再利用できるようにするもの。ガベージコレクションは「ごみ収集」の意味を持ちます。

* メモリコンパクション：メモリの断片化を解消することによって、連続した広い空間に再編すること。

**ガベージコレクション**は従来はプログラマが自分でメモリの解放を行う必要があったのですが、ガベージコレクションが組み込まれているプログラミング言語やフレームワークの場合は、実行中のプログラムの動作から不要になったと判断した領域を自動的に解放します。

メモリの**断片化(フラグメンテーション)**　を解消するために　**メモリコンパクション**を行います。


## オーバーレイ方式
どれだけ区画を効率良く配置できるようにしても、そもそも実行したいプログラムのサイズが主記憶の容量を超えていたら、ロードできません。

これを可能にするための工夫が**オーバーレイ方式**です。
この方式では、プログラムを**セグメント**という単位に分割しておいて、そのときに必要なセグメントだけを主記憶上にロードして実行します。

プログラムは複数の機能が組み合わさった集合体です。常にその全機能が使われているわけではありません。
そのため、処理の過程で必要とされる機能だけを主記憶上へロードすることにしてやれば、占有する場所を減らすことができます。

## スワッピング方式
マルチプログラミング環境では、優先度の高いプログラムによる割込みなどが発生した場合、現在実行中のものをいったん中断させて切り替えを行います。

このような時は、優先度の低いプログラムが使っていた主記憶領域の内容を、いったん補助記憶装置に丸ごと退避させることで空き領域を作ります。

```
主記憶装置    補助記憶装置
プログラムA    プログラムD
プログラムB
プログラムC

上記をスワップアウトという
```
退避させたプログラムに再びCPUの使用権が与えられるときは、退避させた内容を補助記憶装置から主記憶へとロードし直して、中断箇所から処理を再開します。

```
主記憶装置    補助記憶装置
プログラムA    
プログラムB
プログラムC
プログラムD

上記をスワップインという
```
スワップアウトとスワップインを合わせた処理のことをスワッピングと呼びます。
スワッピングが発生すると、主記憶の代用として低速な補助記憶装置へのアクセスを行うことになるので、処理速度が極端に低下します。

## まとめ
プログラムを書いても裏側ではパソコンが様々な処理を行なっているので、何回も言いますが大事なところですね。
JavaScript 　メソッド「getElementById」「innerHTML」　

```
/*内容一文省略*/
<body>

<h1>test</h1>
<p id="myPar">This is paragraph</p>
<div id="myDiv">This is Div</div>
<p>
<button type="button" onclick="myFunction()">Click</button>
</p>
<script>
function myFunction(){
    // 引き換え内容１
　　var content1 = "「getElementById」テスト";
　　// 引き換え内容１
　　var content2 = "「innerHTML」テスト";
　　//「getElementById」「innerHTML」テスト
	document.getElementById("myPar").innerHTML = content1;
	document.getElementById("myDiv").innerHTML = content2;
}
</script>
<p>when you click button up,the content will change</p>

</body>
</html>
```
個人的によく使うDockerコマンド ~イメージ操作~

# よく使うDockerコマンド 〜イメージ操作〜

個人的によく使うDockerコマンドをまとめてみた

## 1. イメージの一覧表示

```bash: docker image ls
docker image ls
```

- サンプル
  - *`docker image ls -a`*
- オプション
  - -a: 全てのイメージを表示

## 2. イメージのPull

```bash: docker image pull
docker image pull --platform {プラットフォーム} {コンテナイメージ名}:{タグ}
```

- サンプル
  - *`docker image pull --platform linux/amd64 centos:7`*
- オプション
  - --platform: マルチプラットフォームに対応している場合は指定("linux/amd64", "linux/arm64/v8")

## 3. イメージの削除

```bash: docker image rm
docker image rm {コンテナイメージ名}:{タグ}
```

- サンプル
  - *`docker image rm centos:7`*
- オプション
  - -f: 強制的に削除する

## 4. イメージのファイル出力

```bash: docker image save
docker image save {コンテナイメージ名}:{タグ} -o {保存先ファイル名.tar}
```

- サンプル
  - *`docker image save centos:7 -o centos_7.tar`*
  - *`docker image save centos:7 | gzip > centos_7.tgz`*
- オプション
  - -o: ファイル出力させる(デフォルトはtarファイルで出力)
- 補足
  - 「 | gzip > 」を使うと圧縮ファイルとして出力できる

## 5. イメージファイルからの読み込み

```bash: docker image load
docker image load -i {読み込み先ファイル名.tar}
```

- サンプル
  - *`docker image load -i centos_7.tar`*
- オプション
  - -i: イメージファイル(.tar .tgz)からの読み込み先ファイルを指定する

## 6. イメージの履歴表示

```bash: docker image history
docker image history {コンテナイメージ名}:{タグ}
```

- サンプル
  - *`docker image history centos:7`*
- 補足
  - レイヤ毎のサイズや、作成した日付が確認できる

## 7. イメージの詳細情報の確認

```bash: docker image inspect
docker image inspect {コンテナイメージ名}:{タグ}
```

- サンプル
  - *`docker image inspect centos:7`*

## 参考

- [docker docs](https://matsuand.github.io/docs.docker.jp.onthefly/reference/)
- [docker hub](https://hub.docker.com/)
個人的によく使うDockerコマンド ~コンテナ操作~

# よく使うDockerコマンド 〜コンテナ操作〜

個人的によく使うDockerコマンドをまとめてみた

## 1.コンテナの一覧表示

```bash: docker container ls
docker container ls -a -f {"フィルタ条件"}
```

- サンプル
  - *`docker container ls -a -f "name=mycentos"`*
- オプション
  - -a: 全コンテナを一覧表示(指定しない場合は起動中のコンテナのみ表示される)
  - -f: フィルタによる表示結果の絞り込み("name", "status", "ancestor" など)

## 2. コンテナ起動

``` bash: docker container run
docker container run -it -p {ホスト側}:{コンテナ側} --name {任意のコンテナ名} {コンテナイメージ名}:{タグ}
```

- サンプル
  - *`docker container run -it -p 8080:80 --name mycentos centos:centos7`*
  - *`docker container run -d -p 8080:80 --name mycentos centos:centos7`*
- オプション
  - -t: ターミナルを割り当てる
  - -i: 標準入力を開く
  - -p: ポートフォワード ({ホスト側}:{コンテナ側})
  - -d: バックグラウンドで実行
  - --name: 任意のコンテナ名
  - --rm: exit時にコンテナを削除する
  - --privileged: コンテナからデバイスへのアクセスを許可(CentOSでsystemctlを許可する場合など)
  
- 補足
  - 起動時に指定したコンテナイメージが無い場合は、自動でイメージを取得してくれる
  - 「-it」を指定すると対話形式（インタラクティブモード）で操作できる
  - 「-d」を指定することでバックグラウンドでコンテナを起動し続けることができる(おそらく一番よく使う)
  - 「--rm」を指定すると、exit時にコンテナ停止と削除を同時に行うことができる

## 3. コンテナでコマンド実行(ログイン)

```bash: docker container exec
docker container exec {起動中コンテナ名 or コンテナID} {実行コマンド}
```

- サンプル
  - *`docker container exec mycentos cat /etc/redhat-release`*
  - *`docker container exec -it mycentos /bin/bash`*
- オプション
  - -t: ターミナルを割り当てる
  - -i: 標準入力を開く
- 補足
  - execコマンドは起動中コンテナでコマンド実行するものだが、「-it」をオプションにすることで「bash」を使うことができる(つまりログインできる)

## 4. 作成済みコンテナの開始/停止/再起動

```bash: docker container start/stop/restart
docker container start/stop/restart {コンテナ名 or コンテナID}
```

- サンプル
  - *`docker container start mycentos`*
  - *`docker container stop mycentos`*
  - *`docker container restart mycentos`*

### 5. コンテナの削除

```bash: docker container rm
docker container rm {コンテナ名 or コンテナID}
```

- サンプル
  - *`docker container rm mycentos`*
- オプション
  - -f: 起動中コンテナの停止、削除
- 補足
  - 通常は停止状態のコンテナの削除を行う => 起動中のコンテナは削除できない

## 6. ファイルのコピー

```bash: docker container cp
docker container cp {コンテナ名 or コンテナID}:{コンテナ側コピー先パス} {ホスト側ファイルパス}
docker container cp {ホスト側ファイルパス} {コンテナ名 or コンテナID}:{コンテナ側コピー先パス}
```

- サンプル
  - コンテナからホストへコピー
    - *`docker container cp mycentos:/home/test.txt ./`*
  - ホストからコンテナへコピー
    - *`docker container cp ./test.txt mycentos:/home`*

## 7. ログの確認

```bash: docker container logs
docker container logs {コンテナ名 or コンテナID}
```

- サンプル
  - *`docker container logs mycentos`*
- オプション
  - --follow: ログを継続して出力する(tailfと相当)
  - --timestamps: ログにタイムスタンプを付与

## 8. 詳細情報の確認

```bash: docker container inspect
docker container inspect {コンテナ名 or コンテナID}
```

- サンプル
  - *`docker container inspect mycentos`*
- 補足
  - かなりの行数出力されるので一度ファイルに出力してから眺めたほうがいい

## 9. イメージとして保存

```bash: docker container commit
docker container commit {保存するコンテナ名 or コンテナID} {コンテナイメージ名}:{タグ}
```

- サンプル
  - *`docker container commit mycentos mycentos:1.0.0`*
- 補足
  - タグは省略可能(省略した場合はlatestで保存される)

## 参考

- [docker docs](https://matsuand.github.io/docs.docker.jp.onthefly/reference/)
- [docker hub](https://hub.docker.com/)
「達人に学ぶSQL徹底指南書」の演習問題 2-1をブラウザで実行してみた

## この記事の概要
- この記事は「達人に学ぶSQL徹底指南書/ミック著」の演習問題をブラウザのSQL実行環境([db-fiddle.com](https://www.db-fiddle.com/))で動かしてみたというものになります。
- 解説は書籍の方を参照してください。
- カラム名がアルファベット表記になっていることに注意してください

## [db-fiddle.com](https://www.db-fiddle.com/)の使い方
- テーブルの作成: Scheme SQLの欄にCREATE TABLEを書いてテーブルを作成
- データの挿入: Query SQLの欄にINSERT文を書いてデモデータを挿入する
- データの検索: Query SQLの欄にSELCT文を書く

## 問題文
p29のProductsテーブルを使って、2列の重複組合せを求めてみてください。
結果は以下の通りになります。

- 結果
```
name_1 name_2
------ ------
バナナ みかん

```

- Products

| name   | price |
|--------|-------|
| apple  | 100   |
| orange | 50    |
| banana | 80    |

## データセットの準備
- Schema SQL
```sql
CREATE TABLE Products (
  name varchar(255) NOT NULL,
  price int NOT NUll
);
```

- Query SQL
```sql
INSERT INTO Products VALUES 
('apple', '100'),
('orange', '50'),
('banana', '80');
```

- 解答済みのデータ: https://www.db-fiddle.com/f/k9uc2z84NTW1WrwN7aj8d7/1

## 解答

詳しい解説は書籍を参照してください。

```sql
select p1.name as name_1, p2.name as name_2 
from Products p1, Products p2
where p1.name >= p2.name;
```
sbtのインストール

https://www.scala-sbt.org/1.x/docs/Installing-sbt-on-Linux.html

bintrayがなくなっているのでこれを参考にすること。

```
$sudo rm -f /etc/yum.repos.d/bintray-rpm.repo
$curl -L https://www.scala-sbt.org/sbt-rpm.repo |sudo tee /etc/yum.repos.d/bintray-sbt-rpm.repo
$sudo yum install sbt
```
不正アクセス禁止法 とは

## 勉強前イメージ

あまり細かいことはしらない・・・

## 調査

### 不正アクセス禁止法 とは

第1条から第14条まである不正アクセスやそれに近しい行為を禁止する法律になります。
インターネットの普及に伴い、2000年に施行されその後改定されています。
正式には `不正アクセス行為の禁止等に関する法律` になります。

中身としては以下になります。

- 第1条 : 施工の目的
- 第2条 : 定義
- 第3条～第10条 : 遵守すべき内容・違法行為
- 第11条～第14条 : 罰則規定

### 不正アクセス禁止法で禁止されている行為

- 不正アクセス行為

なりすましやセキュリティホールをついた攻撃などで不正にアクセスを行うことを指します。

- 不正アクセス行為の助長

正当な理由がないのに他人のパスワードやIDを教えることを指します。

- パスワードの不正取得

不正アクセスが目的で他人のパスワードを取得することを指しています。

- パスワードの不正保管

不正アクセスが目的で不正に取得したパスワードを保管することを指します。

- パスワードの入力を不正に要求

不正にパスワードを入力させることを指します。

### どういう場合に不正アクセス禁止法に引っかかるのか

なりすましをして他の人のパスワードを奪ったり、
何らかの経路で取得したパスワードを不正アクセスするために保存したり、それを使って不正アクセスをすることが禁止されています。
脆弱性とかのサイバー攻撃もこれにあたります。

## 勉強後イメージ

3~10条って結構いろいろ書いてあるのね・・・

## 参考

- [どんな行為が不正アクセス禁止法違反？ 逮捕されるケースや罰則とは](https://makuhari.vbest.jp/columns/criminal/g_other/5961/)
- [不正アクセス禁止法とは？該当する行為から対策までわかりやすくご紹介！](https://it-trend.jp/cyber_attack/article/442-0051)
【Ruby】mapで回す必要ある？

リファクタのメモです。
間違っていればご指摘お願いします！

# 背景
今回りファクタするコードが最終的に行いたいことは、過去の各商品の２つの値とある各商品の２つの値を比較です。
そのために、preivous_itemsを定義しています。
(元のコードを編集しているので、細かいところは、気にせずでお願いします。）
```ruby
def check_sample  
  previous_items = items.map do |item|
    next if item.quantity.zero?
    [item.user_id, item.quantity]
  end

  new_items = new_sample.items.group(:user_id).count
  # [[user_id,quantity],[2,4],[3,0]] == [[1,3],[2,4],[3,0]]
  preivous_items == new_items
end
```

# 元のコード
```ruby
previous_items = items.map do |item|
  next if item.quantity.zero?
  [item.user_id, item.quantity]
end
```

# リファクタ後のコード
```ruby
previous_items = items.where.not(quantity: 0)
                       .pluck(:user_id, :quantity)

```
【MATLAB】for文で複数個のグラフを一度に描画する。

6回目のMATLAB記事です。

今回は「for文」をメインに[4回目](https://qiita.com/arcadia13/items/8885335acb99843daebe "MATLAB_No4")の補完となる内容です。

for文を使ったプログラム例をこの回で出していたので、ここできちんと説明したいと思います。


# for文

例えば、ある動作を100回繰り返したい時、for文で以下のように書くことができます。

```matlab
for i=1:100
% 繰り返したい動作
end
```

また、for文の中にfor文を入れる事も可能です。

MATLABのfor文の書き方は他のプログラミング言語と大差ありませんが、一つだけ注意しなければならないことがあります。それは**ループの開始番号**です。

for文においては大体、文中で配列を使うと思います。その時、ループ用の変数(上の例では i)で配列の要素を指定しますよね。

C言語だと配列の一番最初の要素番号は0です。C言語に限らずほぼ全てのプログラミング言語において0でしょう。

一方でMATLABの場合、配列の一番最初の要素の番号は「1」なのです。

ここまでくればもうお分かりですね。そんな理由でループの開始番号には注意が必要なのです。

もしループを0から開始して、ある配列 A の最初の要素を A(0) と指定すればエラーが発生します。


# for文を使った複数個のグラフの一括描画

それでは、for文を使って複数個の2次元グラフを一枚の図に重ねて描画してみましょう。

今回は $y=\text{sin}(kx)\ (k=1,2,3)$ を $0 \leq x \leq 2\pi$ の範囲で描いてみます。
```matlab:sample1.m
x = 0:pi/100:2*pi; % 0から2*piの範囲, 刻み幅 pi/100

% グラフの描画
for k=1:3
    y = sin(k*x);
    plot(x, y, 'LineWidth', 2, 'DisplayName', ['k=',num2str(k)])
    hold on
end
title('sin(kx)')
xlabel('x')
ylabel('y')
legend
xlim([x(1), x(end)]) % x(end)：配列 x の最後の要素
ylim([-1.5, 1.5])
grid
set(gca, 'FontSize', 13)
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736302/c2402ad4-6abe-3ad7-02c2-076e271ca047.png" width=70%>

いつも通り $x$ の範囲を $\pi/100$ 刻みにした配列 x を用意します。

そしてfor文を使い、3つのグラフを一気に描画してしまいます。ここではループ用の変数 k を式中の $k$ に一致させて実行します。変数 y はループの度に上書きされるので結果的に三種類のグラフを描けるのです。

MATLABでは k=1:3 のように刻み幅を具体的に指定しない場合、その値はデフォルトで1になります。したがって k はループ中に 1,2,3 と変化します。

4回目でも説明した通り、for文、DisplayName、num2str() を組み合わせればループ用の変数を凡例に使うことができ、エレガント？に凡例を作ることができます。

x(1) は配列のいちばん最初の要素です、ここでは0です。開始番号の説明をしたので意識的に使ってます。

x(end)は配列 x の最後の要素という意味です。ここでは $2\pi$ のことです。MATLAB では要素番号をendとすることで最後の要素を指定できます。これはよく使うのでぜひ覚えておいてください。


# 終わりに

ループ構造の中で、特に危険視されているものに「無限ループ」があります。

無限ループは誰でも簡単に作ることができます。while(true) を使うだけです。

無限ループは実行中のアプリケーションやマシンを強制終了しないと止まりません。また、これを放置すると処理のしすぎで実行中のマシンが壊れる可能性もあります。さらにはバグの原因にもなりますので、好まれる構造ではありません。

一方、本当に適切に扱えば小規模のプログラムを書く上で便利な道具になる場合があります（良い例は思いつきませんが...）。とはいえ、これは一種の裏技のようなもので積極的に使うべきものではありません。基本は必ず止まるループ構造を作るようにしましょう。

よろしければ次回の記事も読んでくださると大変嬉しいです。

※本記事に対する改善点や修正点、またはこんな事が知りたいといったご意見がありましたらぜひご連絡ください。