OmniAICreator/Qiita-1.07M huggingface dataset:
ノードをbodyタグに挿入するなら、jsファイルの読み込みはbody開始タグより下で

#はじめに
ノードの作成、挿入を勉強しました。appendChildって難しい
以下ありがたい参考ページ
[【DOM基礎】要素内容の取得・設定／ノードの作成・挿入・削除](https://qiita.com/KDE_SPACE/items/3c4b52d077b8eabbe670)

##appendChildがnull
今までhtmlファイルのheadタグでjsファイルを読み込んでいましたが、
挿入箇所、例えば

```js
document.body.appendChild(container);
```
とbodyタグの中に挿入するときは、bodyタグの開始以降に記述しないと
Cannot read property 'appendChild' of null
挿入先がないと怒られます。

##appendChildがundefined
挿入先の指定が

```js
document.body.appendChild(container);
```
または

```js
id名.appendChild(container);
```

でしかできませんでした。
クラス名やタグ名を指定するのは無理そう？

#さいごに
jsファイルの読み込み場所の正解がわかりません。body終了タグの直前が丸いのでしょうか。
【FX】VPSを利用して自動売買を試してみる【EA】

FX取引を自動化してくれるEAの運用をVPS(仮想サーバー)で試してみました。

今回は普段FX会社のライセンスを調べるときに使っている[WikiFX](https://cloud.wikifx.cc/jp_ja/)のVPSを利用してデモ口座でEAを稼働できるか試しています。

![top.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402434/b9eae005-40cb-02aa-c69c-d664f2aa963c.jpeg)

【用意したもの】
・[VPS](https://cloud.wikifx.cc/jp_ja/) 
・EA MT4に搭載しているデフォルトスクリプトを使用
・MT4　VPSにデフォルトで搭載しているものを利用

【手順】
1．VPS登録
ホームページから登録、登録後IPアドレスがもらえるのでそちらをコピーして手順2へ
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402434/65be9102-5e88-d7e0-cf3a-edbc2764f8cb.png)


2. リモートデスクトップ接続ツールからリモートアクセス
ショートカットキーWIN＋Rを使用してシステム実行
「mstsc」を入力しリモートデスクトップ接続ツールを起動しリモート先へアクセス


3．デスクトップにデフォルトでインストールされているMT4を開く
MT4が文字化けしていたので、「管理」タブから「システムロケールの変更」をクリックし、現在のシステムロケールを「日本語(日本)」に変更
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402434/9058f370-2381-4bf1-1ab3-34ede9823169.png)


4．MT4から口座にログイン
MT4の左上の「ファイル」から「デモ口座の申請」今回はOANDAのデモアカウントを作成
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402434/2014b847-c2fd-5ef1-0508-9b524a02a679.png)


5．ログイン後スクリプトを反映
左下のスクリプトから今回はサンプルのスクリプトをドラッグアンドドロップで反映したいチャートへスクリプトを適応
全般タブから自動売買のチェックマークに許可のチェック
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402434/67954333-73c2-eb39-1cf7-0b408c93ff70.png)

6．自動売買を許可
「ツール」→「オプション」から「自動売買を許可する」にチェック
タブの自動売買のボタンをクリックして自動売買を開始

この手順の後しばらく見て問題なくスクリプトが動いている事が確認できました。
Azure SDK for Java におけるリトライについて

# Azure SDK for Java におけるリトライについて

前回につづいてリトライについてです。

オンプレ環境でアプリケーションを実装している時は、リトライなど気していなかった人も多かったのではないかと思いますが、Azure などのクラウド環境上では、メンテナンスによってサービスが再起動したり、ネットワークの中断なども顕著に発生するため、リトライの実装は必須になっております。

Azure のドキュメントに、「Azure サービスの再試行ガイダンス」というものがありますので、まずはこれを読みましょう、必読です。ここには、各コンポーネントと SDK がどういうリトライを行っているか説明されています。

[Azure サービスの再試行ガイダンス - Best practices for cloud applications | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/architecture/best-practices/retry-service-specific)


# Cosmos DB

先ほどのドキュメントにある表をみると、「サービスでネイティブ」 かつ、 ポリシーは「構成不可」を書かれていて、いまいちピンときません。他が「クライアントでネイティブ」と書かれているところから類推すればクライアントSDKではなく、Cosmos DBがサービスレベルでなんかしてくれるようにも読めます。

また、Cosmos DBの再試行メカニズムの章をよむと、スロットリングに関連したリトライの設定はできそうです。文書ではC#の例ですが、Javaでは、`ThrottlingRetryOptions` で指定できます。

https://azuresdkdocs.blob.core.windows.net/$web/java/azure-cosmos/latest/index.html?com/azure/cosmos/ThrottlingRetryOptions.html

では、他の場合はどのようなリトライをしているのでしょうか。気になるので SDKのソースを探索してみました。

`ClientRetryPolicy#shouldRetry` が定義されていて、そこに色々なケースでリトライの可否を判定しています。

https://github.com/Azure/azure-sdk-for-java/blob/master/sdk/cosmos/azure-cosmos/src/main/java/com/azure/cosmos/implementation/ClientRetryPolicy.java#L69

リトライすべきかどうかは、SDKが適切に判定してくれるということで、実装はちゃんとされているので安心して利用できます。心配性な人は、SDKを読み込んで検証してみてください。リトライは、なかなか再現できないのがつらいところですけど。

また、Javaの話でいえば、いかにもリトライの記述があって、

[Azure Cosmos DB Java SDK v4 の診断およびトラブルシューティング | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/cosmos-db/troubleshoot-java-sdk-v4-sql)

引用すると、

> + 読み取りおよびクエリ IO エラーは、エンド ユーザーにはわからないまま SDK によって再試行されます。
> + 書き込み (Create、Upsert、Replace、Delete) はべき等では "なく"、したがって SDK は必ずしも無条件に、失敗した書き込み操作を再試行できるわけではありません。 エラーを処理して再試行するには、ユーザーのアプリケーション ロジックが必要です

とのことなので、利用する際は注意してください。

# Storage Blob 

次はストレージです。表では、「クライアントでネイティブ」、ポリシーの構成には「プログラムによる」と書かれています。

ストレージには、その名の通り `RequestRetryOptions` クラスが用意されていり、クライアントインスタンスをビルドするときに設定できます。デフォルト時の動作は、ハードコーディングされていて、指数関数タイプの4回くらいの感じになっています。デフォルト設定でも問題ないと思います。

https://docs.microsoft.com/ja-jp/java/api/com.azure.storage.common.policy.requestretryoptions?view=azure-java-stable

自力記述するときは以下のような感じになります。

```java
        RequestRetryOptions retry = new RequestRetryOptions(
            RetryPolicyType.EXPONENTIAL,
            3, // max tries
            3, // time out in seconds
            5000L, // retry delay milli seconds
            60000L, // max retry delay milli seconds
            null);

        BlobServiceAsyncClient storageClient = new BlobServiceClientBuilder()
            .retryOptions(retry)
            .buildAsyncClient();
```

SDKでは以下のあたりで、リトライしているっぽいです。軽くソースを見た限り、リトライ回数はみているけど、ディレイとかは独自に計算していて、Optionの意味がよく分らない感じでした。

https://github.com/Azure/azure-sdk-for-java/blob/19ec1d9b4b93f4dff6c9ce81252958e81df7e292/sdk/storage/azure-storage-common/src/main/java/com/azure/storage/common/policy/RequestRetryPolicy.java#L71

# まとめ

ということで、いくつかのSDKについて、リトライについてまとめてみました。ドキュメントは豊富にありますが、言語毎にとっちらかっている印象は拭えません。地道にググり、最終的にはSDKのソースにあたりましょう。また、マイクロソフトのドキュメントでは、リトライの訳語が「再試行」で統一されているようですので、「再試行」でググった方がいいかもしれません。
プログラミングの知識ゼロからrailsを学ぶ

「プログラミングの知識ゼロからrailsを学ぶ」

Rails初めて2週間。自分的にハマった勉強の仕方をキタる。

前提知識
・HTMLとCSSまあまあ知ってる。
・Javascriptも少しだけ。(onClickぐらい)

最初やったこと
・とりまRails Tutorialを買って7章まで読んで爆死。
（ウェブデザインしかしたことないから意味不・お経）

爆死理由
・Rubyを知らない
・テストって何それ美味しいの病にかかる

解決方法

１.プログラミングの勉強の仕方をめちゃ調べる
ようつべのケンタとか良かった。

２.Rubyをかじる。
　・ようつべの「キノコード」とかのやつを見る
　・Qiita、テックアカデミー、なんとか侍で「ルビー初心者」の記事を読む
※50パーぐらいわかったら次へ

３.Railsを勉強
　・適当にネットで「rails初心者」みたいなやつをする
おすすめ→ https://openbook4.me/projects/92/
　・レールズチュートは訳分からんから今はせん
　・テストもやらん
　・大丈夫少しずつ理解してるから、勉強とティックトックを行き来したら３日ぐらいで分かるようになる

４. 適当に演習をやる
　・rails課題、演習、練習、アプリを作ろうとか調べると何個か出る

５.テスト
・ここでRails tutorialを守備表示で特殊召喚（くどいからふぁーーーって流し読み）
・「何それ美味しいの？」から→「全然美味しくないやん」ってなったらおk

６.実際に作る
・チームのバックエンド組に合流
・自分でウェブアプリ作ってみる
・クラウドソーシングで仕事探してみる
Selenium Python iFrameがある時の処理方法

## Seleniumを実行しているときiframeの扱いに迷った
iframe内の要素をクリックしたかったのだが、なぜか要素を取得できなかった。
そんな時の備忘録。

iframe内の要素をクリックしたい場合は、フレームを切り替える必要がある。

```python
from selenium import webdriver

#ドライバー作成
driver = webdriver.Chrome(executable_path='chromedriver.exe')

#ここでフレーム要素を取得
frameElement = driver.find_element_by_id("dialog")

#ここでフレームを切り替える
driver.switch_to_frame(frameElement) 

##何らかの処理

#親フレームに戻す
driver.switch_to.default_content()
```
param is missing or the value is empty: というエラーが発生した時の対処法

#事象

rails にてアプリを作成中に以下のエラー発生しました。

param is missing or the value is empty: task 


#問題点
ストロングパラメーターに関する内容でした。このエラーの意味はparamsが存在しない、もしくは空とのことです。


requireメソッドとはパラメーターの中にモデルに対応するキーが存在するかを確認し、存在する場合にそのバリューを返します。

```ruby:tasks_controller.rb
private
  
  def task_params
  	params.require(:task).permit(:title, :description, :image)
  end
```


#解決策

対処としてtasks_controller.rb のparams.require(:task)の箇所を削除し、以下のように修正します。これでエラーは出なくなりました。

```ruby:tasks_controller.rb
private

def task_params
  	params.permit(:title, :description, :image)
end
```

#参考

参考にさせていただきました。ありがとうございました。
・【Rails】param is missing or the value is empty:について
https://qiita.com/Takka_Log/items/32dae78d7e3892e7b051

・【Rails】permitメソッドを使ってストロングパラメーターにしよう
https://pikawaka.com/rails/permit
LaravelのログをCloudWatch Logsに投げる


## 　CloudWatchFullAccess権限を持っているIAMユーザを作成

https://qiita.com/kzykmyzw/items/ca0c3276dfebb401f7d8

　こちらの記事を参考にしてください。作成した時に生成されたアクセスキーとシークレットアクセスキーをenvファイルに記述しましょう。あと、LOG_CHANNEL=cloudwatchとしておきましょう。

```php:.env
LOG_CHANNEL=cloudwatch
AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxxx
AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxx
AWS_DEFAULT_REGION=ap-northeast-1
```
## 　ライブラリインストール

　下記のコマンドを打ちましょう。composer経由でインストールします。これをインストールすると、依存関係で
aws/aws-sdk-php、monolog/monologもインストールされます

```
 composer require maxbanton/cwh
```

##  コード

　まずはこのクラスを作ります。

```php:App\Logger\CloudWatchLogger.php
<?php
 
namespace App\Logger;

use Aws\CloudWatchLogs\CloudWatchLogsClient;
use Maxbanton\Cwh\Handler\CloudWatch;
use Monolog\Logger;
 
class CloudWatchLogger
{
    /**
     * Create a custom Monolog instance.
     *
     * @param  array  $config
     * @return \Monolog\Logger
     */
    public function __invoke(array $config)
    {
        $sdkParams = $config["sdk"];
        $tags = $config["tags"] ?? [ ];
        $name = $config["name"] ?? 'cloudwatch';
 
        // Instantiate AWS SDK CloudWatch Logs Client
        $client = new CloudWatchLogsClient($sdkParams);
 
        // Log group name, will be created if none
        $groupName = config('app.name') . '-' . config('app.env');
 
        // Log stream name, will be created if none
        try {
            $instance_id = file_get_contents("http://169.254.169.254/latest/meta-data/instance-id"); // <- ※１
        } catch (\Exception $e) {
            $instance_id = null;
        }
        $streamName = $instance_id ?? config('app.hostname', 'localhost'); // <- ※２
 
        // Days to keep logs, 14 by default. Set to `null` to allow indefinite retention.
        $retentionDays = $config["retention"];
 
        // Instantiate handler (tags are optional)
        $handler = new CloudWatch($client, $groupName, $streamName, $retentionDays, 10000, $tags);
 
        // Create a log channel
        $logger = new Logger($name);
        // Set handler
        $logger->pushHandler($handler);
 
        return $logger;
    }
 
}
```

config/logging.php の 'channels' => [ ] に、以下を追加します。

```php:config/logging.php
'cloudwatch' => [
            'driver' => 'custom',
            'via' => App\Logger\CloudWatchLogger::class, // <- 上で作成したロガークラス
            'sdk' => [
                'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
                'version' => 'latest',
                'credentials' => [
                    'key' => env('AWS_ACCESS_KEY_ID'),
                    'secret' => env('AWS_SECRET_ACCESS_KEY')
                ]
            ],
            'retention' => env('CLOUDWATCH_LOG_RETENTION', 7), // <- ログ保存期間（null の場合は無制限）
        ],
```
　実際にログを吐き出すようにしましょう。CloudWatch Logsより確認できたら完了です。

```php
public function index()
{
        Log::error('エラーが発生しました');
}
```
## 参考文献

https://idealive.jp/blog/2019/07/22/laravel-amazon-cloud-watch-logs/
Windows 10 環境変数設定手順

インストーラーが自動的に PATH を設定してくれなかった場合や,
そもそも管理者権限が無いために zip や 7z などのアーカイブから直接展開した場合に。


## 環境変数の設定画面を開く

1. **スタート - 設定** を開く。
   - *Windows の設定* ウィンドウが表示される。
1. 検索欄に `環境変数` と入力する。
   - *環境変数を編集* と *システム環境変数の編集* が候補として表示される。
1. **環境変数を編集** をクリックする。
   - *環境変数* ウィンドウが表示される。


## 環境変数を設定する

### 新規に設定する場合

例えば, **JAVA_HOME** に `C:\jdk-16.0.1` と設定する場合。

1. *ユーザー環境変数* の **新規** ボタンを押下する。
   - *新しいユーザー変数* ウィンドウが表示される。
1. 以下の通りに入力し, **OK** ボタンを押下する。
   - 変数名: **JAVA_HOME**
   - 変数値: `C:\jdk-16.0.1`


### PATH を編集する場合

例えば, `C:\Program Files\MySQL\MySQL Server 8.0\bin` を追加する場合。

1. *ユーザー環境変数* の **Path** をクリックし, **編集** ボタンを押下する。
   - *環境変数名の編集* ウィンドウが表示される。
1. **新規** ボタンを押下し, `C:\Program Files\MySQL\MySQL Server 8.0\bin` と入力, **OK** ボタンを押下する。
   - *環境変数* ウィンドウに戻る。


## 環境変数ウィンドウを閉じる

1. *環境変数* ウィンドウの **OK** ボタンを押下する。
   - *Windows の設定* ウィンドウは閉じても OK.


どっとはらい。
Java XMLを Excelに変換

<p><strong>XMLは、ファイルにデータを書き込むときの記述形式の1つで、種類の異なるソフトウェア間でデータを交換するための形式として利用されます。今回はSpire.XLS for Javaというライブラリを利用して、XMLを Excelに変換する方法を紹介します。</strong></p>
<h4><strong> </strong><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/xls-for-java-free.html">Free Spire. XLS for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428154326.png" alt="f:id:lendoris:20210428154326p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. XLS.jarを参照に追加してください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428154341.png" alt="f:id:lendoris:20210428154341p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
```JAVA
import com.spire.xls.*;

public class xmltoexcel {
    public static void main(String[] args) {
        //xmlファイルをロードします。
        Workbook wb = new Workbook();
        wb.loadFromXml("test.xml");

        //xlsxで保存します。
        wb.saveToFile("xmltoExcel.xlsx",FileFormat.Version2013);

        //xlsで保存します。
        wb.saveToFile("xmltoExcel.xls",FileFormat.Version97to2003);
    }
}
```
<p><strong> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428155121.png" alt="f:id:lendoris:20210428155121p:plain" title="" class="hatena-fotolife" itemprop="image" /></strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
正規表現 攻略法

#理由・背景
Javaのしっかりした本を読もうとしたら正規表現が出てきて、非常に難儀した。
#終了条件
改訂版をつけた時

#ブレークダウン
##なぜ５回
なんでできないのか？→　正規表現そのものわからない。
正規表現わかればできるのか　→　Javaとしてわかってないから
なぜ　→　手を動かしてないから
なぜ　→　適当な教材がないから
なぜ　→　英語のチュートリアルでやってないから。


#ロードマップ
##正規表現をマスターする。
ドットインストールやる
https://dotinstall.com/lessons/basic_regexp_v2
英語のチュートリアルやる。
https://www.youtube.com/watch?v=sa-TUpSx1JA
Udemyやる。
https://www.udemy.com/course/cfmenzkv/learn/lecture/21899748?start=0#content
サルにもわかる正規表現入門やる。
https://userweb.mnet.ne.jp/nakama/
##Javaのなかで正規表現を使う。
Java ExcelをPDFに変換

<p><strong>今日はSpire.XLS for Javaという無料のライブラリを使ってExcelをPDFに変換する方法を紹介していきます。さあ、行きましょう！</strong></p>



<h1><strong>下準備</strong></h1>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/xls-for-java-free.html">Free Spire. XLS for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428154326.png" alt="f:id:lendoris:20210428154326p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. XLS.jarを参照に追加してください。</strong></p>

```
<p><strong> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428154341.png" alt="f:id:lendoris:20210428154341p:plain" title="" class="hatena-fotolife" itemprop="image" /></strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428154436.png" alt="f:id:lendoris:20210428154436p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
```JAVA

import com.spire.xls.*;

public class ExcelToPDF {
    public static void main(String[] args) {
       
 //Excelファイルをロードします。
        Workbook wb = new Workbook();
        wb.loadFromFile("test.xlsx");

        //PDFで保存します。
        wb.saveToFile("ToPDF.pdf",FileFormat.PDF);
    }
}
```
<h1><strong>実行結果</strong></h1>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210428/20210428154445.png" alt="f:id:lendoris:20210428154445p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong> </strong></p>
JavaScriptの基礎を改めて Part1

# 経緯
* Reactを学習していてJavaScript（以下JS）の基本構文の理解が足りていないと感じので
　[こちらのサイト](https://jsprimer.net/)を元に学習し直した。
* 自分が重要だと思った、知らなかった箇所に焦点を当ててまとめる。

# まとめ
* JavaScriptはデータの型を明示しなくても暗黙的にデータの型を変換してくれる。（暗黙的な型変換）

```javascript:例1
1 == "1";
>> true
// "1"は文字列（string）になっているが、==だと判定を行う際に暗黙的な型変換を行う
```
* 例1のような暗黙的な型変換を回避するには上記の例なら厳密等価演算子（===）を使うことで、判定を行う際に暗黙的な型変換を回避することができる。

```javascript
1 === "1";
>> false
```
* オブジェクトのプロパティにアクセスする際、プロパティ名は文字列型に変換される（暗黙的な型変換）
また、オブジェクト内にオブジェクトをプロパティ名として定義している場合、
そのプロパティは文字列"[object Object]"になってしまう。

```javascript:例2
const obj = {};
const key1 = { object: 1 };

obj[key1] = "1";
console.log(obj);
>> { "[object Object]": "1" }
// プロパティ名に定義しているobj[key1]が"[object Object]"になっている。
```

* オブジェクト内のプロパティ名と値が一緒の場合、値を省略することができる。
※ES2015から有効な記法

```javascript
const name1 = "名前";
const name2 = "なまえ";
const obj = {
  name1,
  name2: name2
};
console.log(obj);
>> {"name1":"名前","name2":"なまえ"}
```

* ArrayやFunctionでもtoStringなどのプロトタイプメソッドが使えるのはObjectを継承しているため。
※プロトタイプメソッドと同名のオブジェクトを定義した場合はプロトタイプメソッドに定義したオブジェクトが上書きされる。
引っ張りを可視化してみた

##はじめに
引張試験で、ヤング率とかポアソン比が変わるとどう変化するのか、pythonを使って近いものを作れないかと思ったのがきっかけ。
計算式は下記のURLを参考にした。
https://www.jsme.or.jp/kaisi/1202-36/

##環境
Windows10
Python 3.8.5

##コード
```python
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.patches as pat #四角の描画に使う
import cv2
%matplotlib inline

#初期座標
x1=0
x2=3
y1=0
y2=3

#各種パラメータ
power=10 #外力
area=9 #断面積
stress=power/area #応力

young=0.8 #ヤング率 x_strain=stress/young #x方向のひずみ
x_strain=stress/young

delta_x=x_strain*x2 #元の長さからどれぐらい伸びたか
x3=delta_x+x2 #伸ばした時のx座標

poisson=0.458 #ポアソン比
y_strain=-poisson*x_strain #y方向のひずみ(定義式では負になるので、絶対値にしている)
y3=y2+y2*y_strain #伸ばした時のy座標

#描画(試しに最初と最後の画像を作成)
fig=plt.figure(figsize=(10,10))

ax1=fig.add_subplot(2,2,1)
plt.xlim(0,10)
plt.ylim(0,5) 
plt.title('Before')

ax2=fig.add_subplot(2,2,2)
plt.xlim(0,10)
plt.ylim(0,5) 
plt.title('After')

p1=pat.Polygon(xy=[(x1,y1),(x2,y1),(x2,y2),(x1,y2)],color='peru') #座標から四角形を描写する
p2=pat.Polygon(xy=[(x1,y1),(x3,y1),(x3,y3),(x1,y3)],color='peru')

ax1.add_patch(p1) #貼り付ける
ax2.add_patch(p2)
```

左側が伸ばす前、右側が伸ばした結果。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/87d5d90d-b70f-17fd-daf2-564b25a64f2d.png)

ヤング率を10にしてみると、伸びが悪くなることが分かる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/a866c0ff-16b9-0c3d-b80f-485675437bd8.png)


##最後に
実際に実験しなくても、なんとなくのイメージが持てた。可視化はやっぱりいい(こんなことしなくてもわかる人が多いだけかもしれない)。
単位はきちんとしているわけではないので、参考程度(あまりにも大きい数字を入れたりすると範囲を超えてしまうので注意)。
Railsのloggerについてメモる

たまにこんがらがるのでメモ。
間違ってたら申し訳ない。


## loggerを**指定する**変数

- Rails.logger (→config.loggerのやつね)
- ActiveRecord::Base.logger

(デフォルトだと何が代入されているんだろう...?)

## 存在するLoggerたち

- 標準出力するためのLogger

```rb
ActiveSupport::Logger.new(STDOUT)
```

- ログファイルに書き出すLogger

```rb
ActiveSupport::Logger.new('log/development.log', 'daily') # 引数なしで初期化したら、log/*.logが指定されるっぽい？？
```

## これらにより、

- ActiveRecordのログを標準出力に書き出す

```rb
  ActiveRecord::Base.logger = Logger.new(STDOUT)
```


## その他

- どうやらloggerを複数指定することもできるみたい → https://qiita.com/QUANON/items/8b212c04f2f3457eec87


## 参考

- https://railsguides.jp/debugging_rails_applications.html
Windows Server+Open SSLでApacheが再起動できない場合の対処

Windows ServerでIISではなくApache OpenSSLで証明書をインストールする際に、なんちゃって証明書では動いたのに正規の証明書に入れ替えるとApacheが再起動できなくなったため、その対処方法について備忘録として記載します。

先ずWindowsにApacheというと、多くの場合ローカルのＰＣにXampp等でインストールしてOpenSSLのなんちゃって証明書が動かないといったケースのトラブルが一般的ではないかと思います。
その場合は先ずは他のアプリケーションとのポートの競合を疑ってみてください。
netstatで見れば80番や443番を使用している他のアプリを確認できるので、Webサーバ側かアプリ側のポート番号に手を入れてあげれば解決します。

本件はレアケースだと思いますが、Windows Serverの場合の解消方法になります。
通常の場合ですとWindowsServerでポートが競合するようなアプリが動いていることはあまり考えられません。
従ってなんちゃって証明書まではインストールできて、とりあえずhttpsで警告は出るもののアクセスはできる状態になっているとします。
で正規の証明書を申請して入れ替えてみたらApacheが再起動できなくなったというトラブルに見舞われることがあります。
そんな時はApacheのエラーログを見てみましょう。

```
AH02577: Init: SSLPassPhraseDialog builtin is not supported on Win32 (key file C:/apache/conf/ssl.key/server.key)
AH02311: Fatal error initialising mod_ssl, exiting. See C:/apache/logs/error.log for more information
AH02564: Failed to configure encrypted (?) private key cloudshift.jp:443:0, check C:/apache/conf/ssl.key/server.key
SSL Library Error: error:0D0680A8:asn1 encoding routines:asn1_check_tlen:wrong tag
SSL Library Error: error:0D08303A:asn1 encoding routines:asn1_template_noexp_d2i:nested asn1 error
SSL Library Error: error:0D0680A8:asn1 encoding routines:asn1_check_tlen:wrong tag
SSL Library Error: error:0D07803A:asn1 encoding routines:asn1_item_embed_d2i:nested asn1 error (Type=RSAPrivateKey)
SSL Library Error: error:04093004:rsa routines:old_rsa_priv_decode:RSA lib
SSL Library Error: error:0D0680A8:asn1 encoding routines:asn1_check_tlen:wrong tag
SSL Library Error: error:0D07803A:asn1 encoding routines:asn1_item_embed_d2i:nested asn1 error (Type=PKCS8_PRIV_KEY_INFO)
AH00016: Configuration Failed
```
ちょっとログの先頭部分を端折っていますがこんな感じのエラーが出ると思います。
一番最初のログに注目してください。

```
SSLPassPhraseDialog builtin is not supported on Win32 (key file C:/apache/conf/ssl.key/server.key)
```
要はWin32はSSLのパスフレーズには対応しておらんぞ！ワレ～ってことです。
証明書の申請時keyファイルを作る際、パスフレーズを登録していると思いますので、こいつを消してやる必要があります。
コマンドラインから以下の要領でパスフレーズ無しファイルを作成してください。

```
openssl rsa -in C:/apache/conf/ssl.key/server.key -out C:/apache/conf/ssl.key/nopassserver.key
```

パスフレーズを要求されますので入力してEnterします。
するとC:/apache/conf/ssl.key/nopassserver.key ができていると思いますので、あとはssl.confのkeyファイル名をnopassserver.key
に書き換えてAapcheを再起動すれば晴れて起動確認できます。
Intellij import setting 


Optimize imports on the fly
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239544/3dae45c0-a994-8d4e-c323-8b812cb0ce33.png)

Layout static import separately
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239544/9f0ccd7c-5c58-1052-a977-288ee4cf156f.png)
Laravelで入れ子構造のform

Laravel Collectiveで入れ子構造のformの書き方

#前提
バージョン：Laravel6、HTML5
Laravel Collective 導入済み

#実装方法
HTML5ではinputタグにform属性を追加することで任意のformに対応させることができる。

##①formにidを付ける
`Form::open`の引数でidを設定する。

```php
{!! Form::open(['route' => 'ルート指定', 'method' => 'メソッド指定', 'id' => 'id指定'])
```

##②inputにform属性を付ける
`Form::**`の引数でform属性にformタグのidを指定する。

```php
{!! Form::text('変数名', '初期値', ['form' => 'formのidを指定']) !!}
{!! Form::submit('表示名', ['form' => 'formのidを指定']) !!}
```

##③中身を任意の場所に置く
formタグ自身は入れ子にできないため、中身だけを任意の場所に置く。

#サンプル
簡単なサンプル。
このサンプルでは入れ子にする意味は特にないが、入れ子構造はフォーム内にリセット・検索・抽出など機能を持つ要素を配置したいときに役立つ。

##コード

```php:demo.blade.php
<body>
    
    <!-- formタグ自身は入れ子にできないので外側に配置 -->
    {!! Form::open(['route' => 'demo1', 'method' => 'post', 'id' => 'form1']) !!}
    {!! Form::close() !!}
    
    <!-- 本体となるform -->
    {!! Form::open(['route' => 'demo2', 'method' => 'post', 'id' => 'form2']) !!}
        
        <!-- 入れ子にしたいformの中身 -->
        <div>
            {!! Form::label('text1', 'フォーム1') !!}
            {!! Form::text('text1', '', ['form' => 'form1']) !!}
            {!! Form::submit('送信1', ['form' => 'form1']) !!}
        </div>
        
        <!-- 本体となるformの中身 -->
        <div>
            {!! Form::label('text2', 'フォーム2') !!}
            {!! Form::text('text2', '', ['form' => 'form2']) !!}
            {!! Form::submit('送信2', ['form' => 'form2']) !!}
        </div>
        
    {!! Form::close() !!}
    
    <p>フォーム1の送信結果：{{ $text1 }}</p>
    <p>フォーム2の送信結果：{{ $text2 }}</p>
    
</body>
```
```php:web.php
Route::get('/demo', 'DemoController@demoget')->name('demo');
Route::post('/demo1', 'DemoController@demo1')->name('demo1');
Route::post('/demo2', 'DemoController@demo2')->name('demo2');
```
```php:DemoController.php
    public function demoget() {
        return view('demo',[
            'text1' => '未送信',
            'text2' => '未送信'
        ]);
    }
    
    public function demo1(Request $request) {
        $text1 = $request->text1;

        return view('demo',[
            'text1' => $text1,
            'text2' => '送信なし'
        ]);
    }
    
    public function demo2(Request $request) {
        $text2 = $request->text2;

        return view('demo',[
            'text1' => '送信なし',
            'text2' => $text2
        ]);
    }
```

##実行結果
~/demoにgetアクセス
![demoget.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401303/0eeca686-9b81-2da6-4b00-127cf32767b4.jpeg)

上記入力の状態で「送信1」
![form1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401303/5d0e82d2-eaed-1aac-a726-cb98f4a8bebd.jpeg)

上記入力の状態で「送信2」
![form2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401303/f3cd6e31-f1b0-4f1d-1283-8974be887ddf.jpeg)
WindowsのVSCodeで踏み台を経由してリモート接続する

## 手順1 OpenSSHのバージョン確認

OpenSSH for Windowsのバージョンが7.9未満だとエージェント転送ができないため、踏み台経由の接続ができない。
下記コマンドでOpenSSHのバージョンを確認し、7.9未満であればバージョンアップが必要。

```sh
ssh -V
```

## 手順2 OpenSSHのバージョンアップ

下記からOpenSSHのバイナリをダウンロード。

https://github.com/PowerShell/Win32-OpenSSH/releases

解凍して得られたディレクトリで下記ディレクトリを差し替え。

C:\Windows\System32\OpenSSH


## 手順3 鍵生成、配置

秘密鍵と公開鍵を生成し、配置。
この辺は記事いっぱいあるので省略。
一応ポイントとして、鍵はOpenSSH形式である必要がある。


## 手順4 ssh config設定

ホームディレクトリ下の.ssh/configを設定。

```
# 踏み台サーバー
Host bastion
  HostName your.bastion.host
  IdentityFile ~/.ssh/id_rsa
  User youruser
  ForwardAgent yes

# 接続したいサーバー
Host target
  HostName your.target.host
  IdentityFile ~/.ssh/id_rsa
  User youruser
  ForwardAgent yes
  ProxyCommand C:\Windows\System32\OpenSSH\ssh.exe -W %h:%p bastion
```
【Vue.js基礎】コンポーネントを作成してApp.vueを編集する

# やりたいこと

* Vue.jsコンポーネントの基礎を学習する。
* .vueファイルを編集して画面表示を確認する。

# 前提

Vue.jsの実行環境が構築済みであること。
まだの場合は環境構築手順
AlmaLinux8.3にvue-cli@2.9.6をインストールしてVue.jsを動かすまで
https://qiita.com/kenichiro-yamato/items/7f946e0215d4f08e4eca
を参照。

# src/App.vue 編集

Vueプロジェクトを作成すると、下記のようなファイルやディレクトリが生成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/052e903d-a421-63ec-a997-5b9177f01788.png)

HTML, CSS, JavaScriptの経験者でVue.jsが初めての人は、最初に

```
src/App.vue
```

を編集すると動作が理解しやすい。

エディタ等で上書きできない場合はパーミッションを確認する。

```
chmod 777 src
chmod 777 App.vue
```

たとえばApp.vueを下記のように修正する。

```App.vue
<template>
    <div>
        <h1>{{ main_title }}</h1>
        <h2>{{ sub_title }}</h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            main_title: "ここにメインタイトルを記入する。あいうえお。",
            sub_title: "ここにサブタイトルを記入する。かきくけこ。"
        }
    }
}
</script>

<style scoped>
h1{color: red}
h2{color: blue}
</style>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/1bd9ad9f-a801-420c-894f-6e1fac45ced0.png)

日本語が文字化けする場合は、
.vueファイルの文字コードをutf8にする。




# .vueファイルに、別の.vueファイルを読み込む

`App.vue`
と同じディレクトリに
`Tokyo.vue`
`Osaka.vue`
を作成し、その2ファイルを
`App.vue`で読み込んで表示する。

### Tokyo.vue

```Tokyo.vue
<template>
    <div>
        <h1>{{ main_title }}</h1>
        <h2>{{ sub_title }}</h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            main_title: "東京都",
            sub_title: "とうきょうと"
        }
    }
}
</script>

<style scoped>
h1{color: red}
h2{color: blue}
</style>
```



### Osaka.vue

```Osaka.vue
<template>
    <div>
        <h1>{{ main_title }}</h1>
        <h2>{{ sub_title }}</h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            main_title: "大阪府",
            sub_title: "おおさかふ"
        }
    }
}
</script>

<style scoped>
h1{color: orange}
h2{color: green}
</style>
```


### App.vue

```App.vue
<template>
  <div>
    <Tokyo></Tokyo>
    <Osaka></Osaka>
  </div>
</template>

<script>
import Tokyo from './Tokyo.vue'
import Osaka from './Osaka.vue'

export default {
  components: {
    Tokyo,
    Osaka
  }
}
</script>

```

ファイルは同じディレクトリに置いてある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/28935805-8f5a-9dc7-5727-8ec2fc366c4e.png)



ブラウザでの表示は下記の通り。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/79b97f23-175e-ea39-6034-95ee10038d77.png)


# componentsディレクトリ

`src`
ディレクトリの中に
`components`
というディレクトリがあらかじめ作成されており、
この中に`Tokyo.vue`や`Osaka.vue`ファイルを置いて`App.vue`にて

```App.vue
import Tokyo from './components/Tokyo.vue'
import Osaka from './components/Osaka.vue'
```

のように読み込むことも可能。
JavaScrip基礎メモその6

#pushメソッド
pushメソッドは配列の最後に新しい要素を追加するメソッドである。
>```javascript
const numbers = [1, 2, 3];
console.log(numbers);
number.push(4);
console.log(numbers);
```

結果
[1, 2, 3]
[1, 2, 3, 4]
4が新しくついかされた。

#forEach
forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドである。
>```javascript
const numbers = [1, 2, 3];
>
numbers.forEach((number) => {
  console.log(number);
});
// (number) => {console.log(number);}はコールバック関数という
```

結果
1    ※引数numberに1が代入され、関数の処理が実行
2    ※引数numberに2が代入され、関数の処理が実行
3    ※引数numberに3が代入され、関数の処理が実行

forEachメソッドの引数には、アロー関数が入っている。
配列内の要素が1つずつ順番にアロー関数の引数に代入され、処理が繰り返し実行される。
>```javascript
配列 = [要素1, 要素2, 要素3];
>
配列.forEach((引数) => {処理});
              // アロー関数
```

配列の中の要素を1つずつ取り出して同じ処理をする。

引数に入っている関数はコールバック関数と呼ぶ。

#findメソッド
findメソッドは条件式に合う1つ目の要素を配列の中から取り出すメソッドである。
>```javascript
const numbers = [1, 3, 5, 7];
const foundNumber = numbers.find((number) => {
  return number > 3;
});
console.log(foundNumber);
```

結果
5

条件に合う最初の要素が取り出される。
1つしか取り出さない。

>```javascript
const characters = [
  {id: 1, name: "kei"},
  {id: 2, name: "gen"}
];
>
const foundCharacter = characters.find((character) => {
  return character.id === 1;
});
console.log(foundCharacter);
```

結果
{id: 1, name: "kei"}

#filterメソッド
filterメソッドは条件に合う要素のみを取り出して新しい配列を作成するメソッドである。
>```javascript
const numbers = [1, 3, 5, 7];
const filteredNumbers = numbers.filter((number) => {
  return number > 3;
});
console.log(filterdNumbers);
```

結果
[5, 7]

#mapメソッド
mapメソッドは配列内の全ての要素に処理を行い、その戻り値から新しい配列を作成するメソッドである。
>```javascript
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});
>
console.log(doubledNumbers);
```

結果
[2, 4, 6]
配列numbersの全ての数値が2倍された
表(csv)データをエクセルでINSERTしやすい形にする

#はじめに

講義のときの説明が不十分だったので、こちらにまとめてみました。

## 問題
目的は下のように、VALUEの値に適切に入れる形にデータを整えることです。

```sql
INSERT INTO `db_2021`.`profile`(`birth_month`, `hobbies`, `fav_veges`, `prefer_bread`) 
VALUES ('9','ゲーム','なす','1');
```
つまり要件は
1. それぞれの値が''（シングルクォーテーション）で囲まれている。
2. 値と値の間に,（カンマ）が打たれている
ですね。

##csvからエクセルに貼り付ける
csvの表データを全部コピーしてエクセルに貼り付けたものがこちらです。(個人が特定できそうな情報は非表示にしてあります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/fa6d6294-edca-d761-89f6-dff7c261e32a.png)

1列目をこのままsqlファイルに貼り付けても、

```sql
9月	ゲーム	なす	1
```
となり、上で設定した要件を満たしていません。
なので、まず(要件1)値をシングルクオーテーションで囲ってみます。

##要件1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/6b591baa-43ce-50c2-4891-3effebb066b4.png)

まず、上のように下のセルに

``` 
="'"&D2&"'"
```
と入力してください。意味は「'」、「D2の値」、「'」の順に表示してねという意味です。
「'」はそのまま入力すると意味のある記号としてエラーになるので、"で囲っています。&は「繋ぐ」の意です。

これをすべてのデータが見えるようになるまでオートフィルで広げます。
まず横に広げて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/712c42ea-953e-804e-a148-6fc285092bd1.png)

次に縦に広げます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/5a89a957-3b4a-dbde-7e4e-8e01c0f13fcc.png)

すると、すべてのセルの値が ' でくくられました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/f7face5f-2014-626d-dfa9-848c1b374823.png)

要件1達成です！

##要件2
次に値と値の間に , が欲しいです。そのために

**「2つ目以降の値の先頭( ' の前)に , があればいい」**

と考えます。
そのために

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/7ebb333d-1b46-b795-f3b1-2783c04a9319.png)
ここの値を

```
="'"&E2&"'"
```
から

```
=",'"&E2&"'"
```
に書き換えましょう！
そこで先ほどと同じようにオートフィルで広げると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339757/4a72a996-dee6-368f-23aa-81a79c23768e.png)

少し見えづらいですが、各値の間に , を入れることができました。要件2達成です！

##sqlファイルに反映してみる
先ほどできたデータから1行もってきて、

```sql
INSERT INTO `db_2021`.`profile`(`birth_month`, `hobbies`, `fav_veges`, `prefer_bread`) 
VALUES ();
```

のVALUEの（）の中に入れてみます。

```sql
INSERT INTO `db_2021`.`profile`(`birth_month`, `hobbies`, `fav_veges`, `prefer_bread`) 
VALUES ('9','ゲーム','なす','1');
```

うまく入りましたでしょうか。これでおしまいです。

#さいごに
今回はcsvファイルから手動でデータベースに挿入するする手順を紹介しましたが、
おそらく、csvファイルからテーブルを効率よく作成する方法があると思うので、
今回のやり方が仕事で生きることはないかもしれません。
ですが、皆さんの興味を満たせたのであれば、私もまとめた甲斐がありあます。
それでは。
実務経験者がWeb系自社開発系企業の面接で聞かれた質問まとめ

##この記事について
 SES・受託系企業で3年ほどの実務を経験しましたが、モダンな技術環境に入りたく
自社開発系企業の面接をこの2ヶ月間で10社ほど受けてきました。
聞かれる事としては概ねどの会社さんにも共通した傾向がありましたが、
それに対してどういった回答をすれば好印象か、
逆にどういう回答をするとNGかという観点でまとめてみようと思います。
他にもこういう回答をすればGoodだというのがあればご指摘頂けると幸いです。

## こういう人向け
- 1年間以上の実務経験がある
- モダンな技術を使った開発にジョブチェンジしたい
- 自社開発系企業の正社員転職・または業務委託の面接を受けようとしている
- 企業の技術スタックに合わせたポートフォリオを作成済みである

[](
 ## 参考
[筆者が作成したポートフォリオについては、こちらをご覧ください](https://qiita.com/FaLiP_lvsg/items/529b88551cc7c1da9f01)
)

## なぜエンジニアになったのですか
　実務未経験者が必ず聞かれる質問の過去形で、エンジニアを志望した動機を聞かれています。
過去の話なので、それほど欲張りな内容でなければ正直に答えてOKかと思います。

- 回答例
 - 物づくりが好きだった
 - エンジニアには将来性があると思った
 - 技術を使って他人の課題を解決したいと思った （ここで、具体的にどんな課題を解決したいかも添えると説得力がある)
 
- NG回答
 - 将来はフリーランスになりたいから
 - リモートワークできそうだから
 - 稼げるから

### 前職を退職した理由と、弊社に応募した理由を教えてください
　この質問は必ずと言って良いほどセットで聞かれる質問で、
転職する事とこの会社に入社する事にどう一貫性があるかどうかを確認するための質問になります。
　応募理由については、「この技術を使えるから」といった技術的な観点だけで回答するのはNGで、その会社のサービス内容や文化についてどこに惹かれているかを強調すべきでしょう。

私には今回の転職で**「サービスをスケールアップさせる仕事に関わりたい」**という軸があったので、それに沿って説明しました。


- 回答例
 - エンジニアとして働いているうちに、**サービスをスケールアップさせる仕事に関わりたい**と感じました。
 - 前職はSESや受託開発がメインだったので、どちらかと言えば自分のタスクをこなす事が主な業務であり、**サービスを成長させるための仕事をする事が難しかった**
 - 御社のサービスは〇〇という点で今後需要が見込まれるため、**共に成長させていきたい**と感じました
 - 御社は技術として××を採用しており、私の業務経歴（またはポートフォリオで採用してる技術）ともマッチしているためもし入社させて頂いた場合は、大きくご貢献できると思いました。

　あとは、HPとかWantedlyの募集で挙げられている課題にどう共感し、どのように問題解決したいかという事を添えると自発的に動ける事をアピールできると思います。

- NG回答
 - 御社は××という技術を採用しているから
（やりたい技術を説明するだけだと、経験だけ積んですぐに退職してしまうように受け取られる）

## 数年後のキャリアプランを教えてください
　かなり難しい質問です（笑)
　3,5年後のキャリアプランを具体的にイメージしている人ははあまりいないと思うので、かなり答えにくい質問だと思います。素直にフリーランスになりたいとか、単価を上げたいなどと言うとイメージが悪くなりがちです。スキルを上げた上で、御社に貢献し続けたいとアピールする事が無難かと思います。

## （弊社で使う言語、FW等)の好きな所を教えてください
　企業が採用している技術についてどのような印象を持っているかの質問です。
ネット記事に書かれているような言語の特徴を述べるだけでは不十分で、実際にその言語を使って感じた点を説明する必要があると思います。
　また、**前職などで使っていた言語と比較して見えるメリット**を説明すると説得力があると思います。

## なぜポートフォリオでその技術を使ったのですか
　ポートフォリオに使っている技術について、なぜ使うか考えた上で実装しているか?という事を聞かれています。 Web系企業に入れば実務においても技術選択を行うケースは当然発生するものなので、そういったケースで的確な判断ができるかどうかが問われています。
　実務未経験の方の面接でも聞かれる質問だとは思いますが、
実務経験者が実務未経験の言語やインフラなどを使った場合は
**「実務経験とポートフォリオでなぜ違う技術を使ったか」**が突っ込まれがちだったので、
面接官のエンジニアを納得させられる質問をできるようにしなきゃいけないですね。

　例えば、私は業務経験とポートフォリオの技術差分として以下があったのでこんな質問をされました。
・ Vue.jsの業務経験があるがポートフォリオではNuxtを使っているのはなぜか
・バックエンドではPHP, Javaの業務経験があるがポートフォリオではGolangを使っているのはなぜか

## 最近読んでいる技術書はありますか（おすすめの技術書はありますか)

 意外とこの質問を聞かれる企業は多かったです。
この質問に答えるためには、
技術書を読んでいるだけで良いという事ではなくて、
「志望している技術分野と合致している」「体系的である」本を習慣的に読んでいる必要があるように感じました。

　逆に、基本的に技術書は読まないとか、バックエンド志望であるのにCSSのパターン本しか持っていないとかだと「ベースが弱い」という事で減点されるでしょう。
（実際、私はあまり技術書を読んでなかったのでこの質問にはうまく答えられませんでした。。）

　自分のスキルの自信があったり、
ポートフォリオを作りきってしまうと慢心してしまいがちですが
その後も気を抜かずに、継続的に本を読んだ方が良いと感じました。


## まとめ
 私が主に面接で聞かれた事を並べました。
他にこう答えたら良いなどありましたら、コメント頂けると幸いです!
これから転職面接を受ける方のお役に立てたら、幸いです
FizzBuzzゲーム

#概要
イベント発生時は計算ボタンをクリック。inputタグからユーザーが入力した値を受け取り、FizzuBuzzの結果を返すようプログラムしていきます。

#HTML
```index.html
 <input type="number" id="number">
 <button id="fire">計算</button>
```


#JS処理①
```index.js
　　function fizzBuzz(value) {
      if (value % 3 === 0 && value % 5 === 0) {
        return 'fizzBuzz';
      } else if (value % 3 === 0) {
        return 'fizz!';
      } else if (value % 5 === 0) {
        return 'Buzz!';
      } else {
        return value;
      }
    }
```

FizzBuzzの処理関数は上記になります。
仮引数をvalueとします。
①3の倍数かつ5の倍数の数字のときはfizzBuzz
②3の倍数のときには、fizz
③5の倍数のときには、Buzzを
④それ以外の数字のときには入力値を返します。

#JS処理②

```index.js
    document.getElementById('fire').onclick = () => {
      const num = document.getElementById('number');
      console.log(num.value);
      alert(num.value + 'は' + fizzBuzz(num.value));
    }
```

今回は、ユーザーがfire(計算)をクリックしたときにイベントが始まります。
idと紐付け、クリックイベント。
定数numにユーザーが入力した値を代入します。
結果をアラートで返します。num.valueで入力値を取得します。
関数名FizzBuzzを呼び出し引数としてユーザーからの入力値を引数として渡します。
ADユーザーの「最終パスワード変更日時」が、常に現在時刻として表示される。

需要があるかは分からないのですが、ちょっと調べた内容をメモがてら共有。

## ADユーザーの「最終パスワード変更日時」について
ドメイン環境において `cmd>net user /domain username` と入力すると、該当ユーザーの基本的な情報が表示されます。
その中に「最終パスワード変更日時」というものがあるのですが、コマンドを入力したタイミングの時刻が常に表示されるユーザーが存在していることがあります。

## 原因は？
ADユーザーの属性値 `pwsLastSet=0` となっている場合、本事象が発生するようです。
`pwsLastSet=0` になるようなシチュエーションはMSのDocsに記載がありました。

* アカウントが作成されているものの、パスワードが割り当てられていない場合。
* アカウントが作成され、管理者がパスワードを割り当てたものの、次回のログオン時にパスワードを変更するオプションを選択した場合。
* パスワードのリセット後などに、管理者によるユーザー アカウントの管理の一環として、次回のログオン時にユーザーがパスワードを変更するオプションが選択された場合。

https://docs.microsoft.com/ja-jp/services-hub/health/remediation-steps-ad/review-accounts-whose-attribute-pwdlastset-has-a-zero-value

新規ユーザーの作成フローやパスワードリセットなどの運用によってタイミングは異なると思いますが、一番多いのが「次回のログオン時にユーザーがパスワードを変更するオプション」にチェックを入れることだと思います。

該当のユーザーアカウントを検索する場合はPowerShellで一気に引っ張ってきましょう。
`Get-ADuser -Properties * -Filster{pwdLastset -eq "0" -and Enabled -eq "True"}`
`
Macでpyrealsense2をインポートしてRealsenseを動かす

RealsenseをPythonで動かす際に必要なライブラリであるpyrealsense2をインポートするまでの手順を解説します


#使用機器
Realsense D435
MacBook Pro

#環境構築

###ライブラリのインストール
```shell:
$ brew install libusb pkg-config
$ brew install homebrew/core/glfw3
$ brew install cmake
```

###Realsenseのレポジトリからクローン
```shell:
$ git clone https://github.com/IntelRealSense/librealsense.git 
$ cd librealsense
```

###Make
```shell:
$ mkdir build
$ cd build
$ cmake .. -DBUILD_EXAMPLES=true -DBUILD_WITH_OPENMP=false -DHWM_OVER_XU=false -DBUILD_PYTHON_BINDINGS=true -DPYTHON_EXECUTABLE:FILEPATH=/Users/python3 -G "Unix Makefiles"
$ make -j4
$ sudo make install
```
cmake -DPYTHON_EXECUTABLE:FILEPATH=**/Users/python3**の
**/Users/python3**は
$ which python3
で表示されるパスに変更してください．

make が完了するとbuild/wrappers/python ディレクトリ内に
**pyrealsense2.cpython-〇〇m-darwin.so**　と　**pybackend2.cpython-〇〇m-darwin.so**
というファイルが作成されていると思います．
ただし，cpython-〇〇m-darwin　の〇〇は環境によって変わります．


###インポートの対象ディレクトリの確認
pyrealsense2をインポートできるようにするには，先ほど生成した
**pyrealsense2.cpython-〇〇m-darwin.so**　と　**pybackend2.cpython-〇〇m-darwin.so**
をインポート対象のディレクトリ内に追加する必要があります．



###シンボリックリンクの作成
```shell:
$ cd /usr/local/lib/python3.6/site-packages
$ ln -s ~/librealsense/build/wrappers/python/pyrealsense2.cpython-36m-darwin.so pyrealsense2.so
$ ln -s ~/librealsense/build/wrappers/python/pybackend2.cpython-36m-darwin.so pybackend2.so
```
cd **/usr/local/lib/python3.6/site-packages** はインポート対象のディレクトリの一覧で表示されたディレクトリのどれかにしてください

インポート対象のディレクトリの一覧は次の方法で確かめられます．

```shell:
$ python3
>>> import sys
>>> print(sys.path)
```

また，ln -s **~/**librealsense/... の**~/**の部分はlibrealsenseのパスが通るように変更して下さい．
ホームディレクトリ直下にlibrealsenseがある場合は**~/**のままで構いません．

###インポートの確認
```shell:
$ python3
>>> import pyrealsense2
>>>
```
pyrealsense2がエラーなくimportできれば完了です．

##サンプルコード
確認用にpyrealsense2を用いた簡単なコードを記載しておきます．
Realsenseで撮影したRGB画像と深度画像をリアルタイムで表示します．

```python:opencv_viewer_example.py
import numpy as np
import cv2
import pyrealsense2 as rs

# ストリーム(Color/Depth)の設定
config = rs.config()
config.enable_stream(rs.stream.color, 640, 360, rs.format.bgr8, 30)
config.enable_stream(rs.stream.depth, 640, 360, rs.format.z16, 30)

# ストリーミング開始
pipeline = rs.pipeline()
profile = pipeline.start(config)

try:
    while True:
        # フレーム待ち(Color & Depth)
        frames = pipeline.wait_for_frames()
        color_frame = frames.get_color_frame()
        depth_frame = frames.get_depth_frame()
        if not depth_frame or not color_frame:
            continue
        color_image = np.asanyarray(color_frame.get_data())
        # Depth画像
        depth_color_frame = rs.colorizer().colorize(depth_frame)
        depth_color_image = np.asanyarray(depth_color_frame.get_data())

        # 表示
        images = np.hstack((color_image, depth_color_image))
        cv2.namedWindow('RealSense', cv2.WINDOW_AUTOSIZE)
        cv2.imshow('RealSense', images)
        if cv2.waitKey(1) & 0xff == 27: # Escキーで終了
            break

finally:
    # ストリーミング停止
    pipeline.stop()
    cv2.destroyAllWindows()


```


##参考
[Mac に pyrealsense2 をインストールする](https://qiita.com/comachi/items/14b358568365bc5ee474)
【メモ】Gitで元に戻すときのコマンド【随時更新】

#はじめに
　アプリ開発中、リセットしたい時にいつもググっていたので自分用にまとめます。新しくコマンドを使うたびに更新していく予定です。

#ステージング(git add .)前の編集を削除

![スクリーンショット 2021-04-28 14.16.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1293843/39cef67f-b188-bbe7-7d98-d849a4b3fb3e.png)

###Changes not staged for commit の編集を削除
これらは`git add .`する前のファイルで次のコマンドで一つ前のコミットした状態に戻せる。

```
git checkout .
```

###Untracked files の削除
これらはまだ一度もcommitしたことがないファイルで
次のコマンドで削除可能。

```
git clean -f
```

#誤ってmainブランチで作業してしまったとき
別のブランチを作成して作業する予定だったが間違ってmainで作業してしまった場合の対処法。

```
git stash save
```

これでmainでの編集内容を保存。

```
git checkout -b development
git stash pop
```

次にブランチを作成し、保存していた編集内容を反映させる。

#おわりに
Gitコマンドが覚えられない（泣）
随時更新予定
vueのfiltersを使って、数値→2桁や3桁の文字列にして表示する

例えば「1」を

「01」もしくは
「001」表記にしたいとき

```vue
<div>
  {{ item.hogeTime | value2N }}分
</div>

<div>
  {{ item.hogeTime | value3N }}分
</div>
```

```javascript
filters: {
  value2N(value) {
    return ('0' + value).slice(-2)
  },
  value3N(value) {
    return ('00' + value).slice(-3)
  }
}
```

分数の表示などに。

##参考：
####String.prototype.slice()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice
Bitnamiでapacheを再起動できない


Bitnami環境でSSL証明書を更新後に
apacheを再起動できなかった時のメモです。

# 背景
SSL証明書を更新後、apache再起動を実施

```
$sudo /opt/bitnami/ctlscript.sh restart apache
httpd not running, trying to start
(98)Address already in use: AH00072: make_sock: could not bind to address [::]:80
(98)Address already in use: AH00072: make_sock: could not bind to address 0.0.0.0:80
no listening sockets available, shutting down
AH00015: Unable to open logs
```

しかし、ポートは使用されていて起動できないとエラーが。
とりあえずステータスを確認するもやはり動いていないとのこと。

```
$sudo /opt/bitnami/ctlscript.sh status apache
apache not running
```


　
　
しかし、ブラウザで確認するも正常に表示されている。。。

　
　
ポートを確認するとエラー通り別のプロセスが起動していました。

```
$sudo lsof -t -i:80
・・・
```


#対処
というわけで、一旦別プロセスをKILLし、apacheを起動

```
$sudo kill -9 $(sudo lsof -t -i:80)
$sudo /opt/bitnami/ctlscript.sh start apache
```



で問題なく起動しました。
めでたしめでたし。
electronでpython ファイルを使用する際の覚書

#概要
electronはHTML, CSS, Javascriptを使って簡単にWindows, mac, linux のマルチプラットフォームにアプリを作成できるフレームワークです。
今回electronとpythonコードを連携させる際のファイル構造に関しての覚書です。

##electronにおけるFrontend,Backend間の情報のやり取りの変遷
https://qiita.com/pochman/items/64b34e9827866664d436
こちらの記事に詳しく書かれていますが、electronはこれまでversionが上がるたびにSecurityの観点からipc通信の仕様を変更しています。これから先も変更になる可能性はありますが、2021年４月の時点の情報です。

全体の構成図
![electron-python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/858a70a4-363a-27a4-df92-c80b7289b109.png)

##main.js設定

```
const electron = require('electron');
const app = electron.app;
const path = require("path");
const BrowserWindow = electron.BrowserWindow;
const ipcMain = electron.ipcMain;
const ipcRenderer = electron.ipcRenderer;
//ここでpyhonshell library を呼び出す
const {PythonShell} = require("python-shell");
let mainWindow;


function createWindow() {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    width:1100, 
    height: 1000,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    },
  });

  // メインウィンドウに表示するURLを指定します
  // （今回はmain.jsと同じディレクトリのindex.html）
  mainWindow.loadFile('index.html');

  // デベロッパーツールの起動
  mainWindow.webContents.openDevTools();

  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}
//  初期化が完了した時の処理
app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
app.on('activate', () => {
  // メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

//ここでpreload.jsからのipc通信を受け取り、python-shellを起動
//pythonで書かれたコードを呼び出す
ipcMain.handle('hoge',async (event, data) => {

　//pythonに渡す何らかのパラメーター
  var options = {
    data:data
  }
  //ここでパラメーターと共に渡す
  let pyshell =await new PythonShell('hogehoge.py', options);

　//pythonでのコード処理が終わったらpythonからexportされたメッセージを受け取る
  //preload.jsにpythonから吐き出されたデータを送る
  pyshell.on('message', async function(message) {
    event.sender.send("return_data", message)
  })
})
```

## preload.js

```
const { contextBridge, ipcRenderer} = require("electron")

//main.jsに書かれた"hoge" handlerを起動している
contextBridge.exposeInMainWorld('api', {
  send: async (data) => await ipcRenderer.invoke('hoge', data),
  on: (channel, func) => { 
          ipcRenderer.on(channel, (event, data) => func(data));
      }
  }
);
```

##index.html

```
<script>
//ここでpreload.jsで作成されたapiを呼び出して何らかのデータを渡す
const message= window.api.send({"send_data":send_data})

const message2=window.api.on("return_data", async (data)=>{
    //returnされたデータを使った処理をこちらに書く
})
</script>
```

##最後に
electronを使用してpythonコードをつかったアプリを作る必要があったため、自分用としてまとめておきました。非常にざっくりとした記事ですが、どなたかのお役に立てれば幸いです。
もし不備などありましたらお知らせいただけると幸いです。
HoloLens2 QRコード読み取りのやり方

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Microsoft.MixedReality.QRを使用したQRCodeの読み取り<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a> <a href="https://t.co/ZzVaJp1j7S">pic.twitter.com/ZzVaJp1j7S</a></p>&mdash; 原口昂弥 (@k_haraguchi55) <a href="https://twitter.com/k_haraguchi55/status/1387247957284560900?ref_src=twsrc%5Etfw">April 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 開発環境
+ HoloLens2
+ Windows 10 pc
+ Unity 2019.4.1f1
+ MRTK ver2.5.3

# やり方
``` C#:QRCodeReader.cs
using UnityEngine;
using Microsoft.MixedReality.QR;
using UnityEngine.UI;

public class QRCodeReader : MonoBehaviour
{
    [SerializeField] Text text = null;
    QRCodeWatcher qrCodeWatcher;
    // Start is called before the first frame update
    async void Start()
    {
        Debug.Log(QRCodeWatcher.IsSupported());
        text.text = QRCodeWatcher.IsSupported().ToString();
        if (QRCodeWatcher.IsSupported()) //サポートされているか確かめる。
        {
            await QRCodeWatcher.RequestAccessAsync();  //アクセス許可を取る。
            qrCodeWatcher = new QRCodeWatcher();
            qrCodeWatcher.Added += AddedQRCode; //QRCodeを発見した時の処理を追加。
            qrCodeWatcher.Start(); //スキャンを開始。
        }
    }
    // QRCodeを発見した時の処理。
    private void AddedQRCode(object sender, QRCodeAddedEventArgs e) 
    {
        text.text = e.Code.Data;
    }

    // スキャンを止める。
    public void Stop()
    {
        qrCodeWatcher.Stop(); //スキャンを停止
        qrCodeWatcher.Added -= AddedQRCode; //QRCodeを発見した時の処理を削除
    }
}
```
※ QRCodeWatcher.Addedに追加できるデリゲートの型は void(object,QRCodeAddedEventArgs)のみ。

上のスクリプトをプロジェクトに追加し、適当なオブジェクトに追加。
textプロパティを設定してビルド、実機で実行。
AWSを理解する[ネットワーク構築編]

#概要
はじめに、この記事はAWS初学者が備忘録として作成しています。
ですが、私のような初学者のために少しでもなればと思い、公開しています。
不適切や、わかりにくい点を見つけた場合はご指摘頂ければ幸いです。

1. [ネットワークを構築する](https://qiita.com/enuii3/items/103c4b9b0db472f36ddb)👈今ここ
2. [webサーバーソフトをインストールする](https://qiita.com/enuii3/items/a68f42563a6331b89db3)
3. [webサーバーにWordPressをインストールする](https://qiita.com/enuii3/items/cfd0053a27ab2ccb052d)
4. [通信の仕組みを理解する](https://qiita.com/enuii3/items/7f1196c28ae740c91482)
5. [S3を使って公開する](https://qiita.com/enuii3/items/db930446f334db3ce1da/)

#ネットワークを構築する
##要点
1. リージョンを指定(東京)
2. VPCの作成
3. サブネットの作成
4. インターネットゲートウェイを作成し、VPCにアタッチ
5. 新たにルートテーブルを作成し、パブリックサブネットのデフォルトルートテーブルに設定する
6. デフォルトゲートウェイをインターネットゲートウェイに設定する

###サブネットを分割する主な2点の理由
**物理的な隔離**: 1階と2階とで別のサブネットに分けたいという、物理的に分けたい時に有効。

**セキュリティ上の理由**: 経理部のネットワークだけを分離して、他の部署からはアクセスできないようにするなど。

##ネットワーク構築に関する用語集
- **EC2**: 仮想的なサーバー
- **インスタンス**: 起動された各サーバー(EC2)の個体
- **Wireshark**: ネットワークを流れる生のデータや、流れるデータを覗き見れる。
- **NAT**: Network Address Translationの略で、内部で通用するアドレスを外部とも通信できるアドレスに変換する技術（これを利用すると片方向だけの接続を許すことができ、インターネットからDBサーバーに接続出来ないが、DBサーバーからインターネットには接続することができる。）
- **Region**: 世界22箇所に分散された各地域のデータセンター群のこと
- **アベイラビリティゾーン**: リージョンをさらに分割し、物理的に距離が相当離れたネットーワークや電源網などの設備で、あるアベイラビリティゾーンが地震や洪水が起こっても、他のアベイラビリティゾーンには影響を受けない耐障害性を高める概念がある。
- **Amazon VPC**: 銅のようなIPアドレス範囲を使うか指定できる
- **サブネット**: VPCを更に分割して利用でき、サブネットの中にサーバー(EC2)を配置できる。
- **グローバルIP(パブリックIP)**: インターネットに接続する際に用いるIPアドレス
- **プライベートIP**: インターネットで使用されないIPアドレス
- **CIDR表記**: 「192.168.1.0～192.168.1.255」の場合、プレフィックスは24ビットです。IPアドレス範囲をCIDR表記する場合、その範囲は「CIDRブロック」と呼ばれます。
- **サブネットマスク表記**: プレフィックスのビット数だけ2進数の1を並べ、残りは0で表す表記。「192.168.1.0～192.168.1.255」の場合、サブネットマスクは「255.255.255.0」なので、「192.168.1.0/255.255.255.0」と表記します。
- **パブリックサブネット**: インターネットからアクセスすることを目的としたサブネット(webサーバーなどを配置する)
- **プライベートサブネット**: インターネットから隔離したサブネット(データベースサーバーなどを配置する)
- **プロトコル**:
- **パケット**: データを送受信する際の単位でヘッダー情報やデータの実態が含まれている
- **ルートテーブル**: 宛先IPアドレスの値が、いくつの時には、どのネットワークに流すべきか設定できる
- **ディスティネーション**: 宛先アドレスのこと
- **ネクストポップ(ターゲット)**: ディスティネーションから流すネットワーク先のこと
- **デフォルトゲートウェイ**: 転送先が何も設定されていない時のデフォルトの転送先

####ネットワーク構築に関する補足
- まずネットワークを構築する際はIPアドレスの範囲を定める
- IPアドレスは前半の部分をネットワーク部、後半の部分をホスト部を言う。
- IPアドレスを2進数で表記したとき、「ネットワーク部のビット長」を「/ビット長」で示す方法です。このビット長のことを「プレフィックス（prefix）」と言います。
- CIDR表記やサブネットマスク表記は単純に、先頭から、いくつ分のIPアドレス範囲を示しているかを示す表記方法に過ぎない。
- 実際のネットワークでは、割り当てられたCIDRブロックを、そのまま使わずに、小さなブロックに分割して利用することがほとんど。
- サブネットをインターネットに接続するにはインターネットゲートウェイを用いる（自分のネットワークにインターネット回線を引き込むというイメージ）
- ネットワークにデータを流すためにはルーティングテーブル(ルートテーブル)が必要
- インターネットで使われている「TCP/IP」というプロトコルではデータを細切れにしたパケットという単位でデータが送受信されている。
- あるサブネットに対してだけ、ルートテーブルを変更したい時は、必ず、新しいルートテーブルを作成して、ルートテーブルに割り当てます。

# tips
##ネットワーク関連コマンド
- ping
- traceroute
- telnet
- nslookup
- dig

##補足
- ICANN(Internet Corporation for Assigned Names and Numbers): IPアドレスを一括管理している団体
- APNIC(Asia Pacific Network Information Center): アジア圏のIPアドレスを管理している団体
- JPNIC(Japan Network Information Center): 日本のIPアドレスを管理している団体
- 2011年2月3日にICANNが持つIPアドレス(IPv4)の在庫がなくなり、JPNICでも約2ヶ月後の2011年4月15日に在庫がなくなった。そのため、IPv4からIPv6への移行が進められたが互換性がないため以降はスムーズではなく、移行が完了するまでは1つIPアドレスを複数のエンドユーザーで共有するNATという仕組みでIPアドレス問題を解決した。
記録媒体のデータ消去に関するメモ

# 記録媒体のデータ消去に関する参考資料

### IPA訳　SP800-88 媒体のサニタイズに関するガイドライン
https://www.ipa.go.jp/files/000025355.pdf


### Secure Erase　UC Sandiego
https://cmrr.ucsd.edu/resources/secure-erase.html
機械翻訳
https://qiita.com/plus_sum/private/ab178f54f9b3108f534f

### データ消去に関する海外規格の動向 
2016/04/11 
早稲田大学 瀧澤和子
https://digitalforensic.jp/wp-content/uploads/2016/02/standards.pdf

### データ抹消に関する米国文書（規格）及び HDD、SSD の技術解説
2016 年 4 月 11 日
株式会社 DD-RESCUE 
沼田 理
https://digitalforensic.jp/wp-content/uploads/2016/02/technical-aspect.pdf


### ADEC データ適正消去実行証明協議会　消去技術認定基準委員会
データ消去技術　ガイドブック
https://adec-cert.jp/guidebook/pdf/DATAWIPEGUIDEBOOK.pdf

### ハードディスクを乱数で完全に消去する (shred)
http://tech.clickyourstyle.com/articles/141http://tech.clickyourstyle.com/articles/141
MacOSのターミナル（zsh）でのKubectlの補完

#背景
- kubectlの補完
- ある時を境にMacが.bash_profileから.zshrcになっていた



#調査開始
https://qiita.com/kylasakerskog/items/736169f4477947cf7126

- autoload, compinitが必要
- compinitコマンド実行時に毎回yes/noの確認が出る


https://rcmdnk.com/blog/2015/05/15/computer-linux-mac-zsh/

- compinit -uで確認が出なくなる