OmniAICreator/Qiita-1.07M huggingface dataset:
Azure Storage (ファイル共有 / File Share)にファイルをプログラムからアップロードする方法

Azure Storage にファイルを保存する方法を記載。
Azure Storageの種類はファイル共有(blobではない)を利用。

# 事前準備
### Azureポータルにてstorage環境作成
- ストレージ アカウントの作成
- 作成したストレージ アカウントからファイル共有(File Share)を作成

### Azure.Storageライブラリのインストール

[NuGet パッケージの管理]から以下をインストール
- Azure.Storage.Common
- Azure.Storage.Files.Shares


#プログラム

```C#

using System.IO;
using Azure.Storage;
using Azure.Storage.Files.Shares;

public class SampleClass
{
    public void Upload()
    {
        ///Azureのストレージアカウントから情報を取得して設定
        string accountName = "{Azureのポータルサイトからアカウント名を取得する。}";
        string accessKey   = "{Azureのポータルサイトからアクセスキーを取得する。}";
        Uri    serverurl   = new Uri(@"{AzureのポータルサイトからURLを取得する。}") ;

        ///アップロード先(azure側)
        string azureDirectoryPath = @"{保存先(azure側)のディレクトリを指定}" ;
        string azureFileName      =  "{保存するファイル名称を指定}";

        ///アップロード対象(Local側)
        string localDirectoryPath = @"{アップロード対象(Local側)のディレクトリを指定}";
        string localFileName      =  "{アップロード対象(Local側)のファイル名を指定}";

        //SSL通信の許可設定
        //これをやっとかないと、SSL(https)通信でエラーが発生する。
        System.Net.ServicePointManager.SecurityProtocol = System.Net.SecurityProtocolType.Tls11 | System.Net.SecurityProtocolType.Tls12;
        

         try
         {
            //Azureへ接続準備：接続情報の設定
            StorageSharedKeyCredential credential = new StorageSharedKeyCredential(accountName, accessKey);

            //Azureへ接続
            ShareClient share = new ShareClient(serverurl ,  credential);

            ShareDirectoryClient directory = share.GetDirectoryClient(azureDirectoryPath);

            //Upload先(azure側)にフォルダがなければ作成。
            directory.CreateIfNotExists();

            //Upload先(azure側)にファイルインスタンスを作成。
            ShareFileClient file = directory.GetFileClient(azureFileName);

            //同名のファイルがあったら削除
            file.DeleteIfExists();
            
            //Upload対象のLocalファイルを開く。FileStream型で開くとバイナリ情報の取得が楽。
            FileStream stream = File.OpenRead( Path.Combine(localDirectoryPath , localFileName ) );

            //Upload先(azure側)にファイルインスタンスにバイナリ情報を注入
            file.Create(stream.Length);
            file.UploadRange(new Azure.HttpRange(0, stream.Length),stream);
            
            //ローカルファイルの開放
            stream.Dispose();
        }
        catch(Exception ex)
        {
            System.Console.WriteLine(ex.Message);
            return;
        }
    }
}

```

#後記

- ストレージへアクセスする際の推奨されているライブラリがWindowsAzure.StorageからAzure.Storageに変わった模様。Azure.Storageを利用したサンプルがなかったのでメモとして投稿。
- Azure内で[ファイル共有]、[File Share]、[File サービス]と表記揺れがあった。(2020/09/30時点)同義語として解釈してよさそう。
IRI(Internationalized Resource Identifier)とは

#プログラミング勉強日記
2020年9月30日
URLとIRIを正確に理解できていなかったのでまとめる。

#IRIとは
　IRIはInternationalized Resource Identifierの頭文字をとったもので、URI(URL)をユニコード文字を使えうるように拡張したもの。国際化されたURIでURIではASCII文字しか使うことができないが、IRIではユニコード文字を使うことができる。

　具体的には、IRIではURIのホスト部分やパス部分やクエリ部分やフラグメント部分にユニコードの文字を使用することができる。しかし、スキーム部分(`httos:`, `scp:`など)には使用できない。

#ユニコード文字とは
　符号化文字集合と呼ばれるものの1つで、コンピュータが使う文字と文字に割り当てた番号の対応表の1つである。

　使用できるユニコード文字は以下の範囲のみで、コードポイントは16進数として表している。

```:使用できるユニコード文字の範囲
A0からD7FFまで
F900からFDCFまで
FDF0からFFEFまで
10000から1FFFDまで
20000から2FFFDまで
30000から3FFFDまで
40000から4FFFDまで
50000から5FFFDまで
60000から6FFFDまで
70000から7FFFDまで
80000から8FFFDまで
90000から9FFFDまで
A0000からAFFFDまで
B0000からBFFFDまで
C0000からCFFFDまで
D0000からDFFFDまで
E0000からEFFFDまで
```

　しかし、以下のコードポイントは使用できない

```:使用できないユニコード文字
200E
200F
202A
202B
202C
202D
202E
```

#参考文献
[Unicode](https://wa3.i-3-i.info/word11422.html)
[URLとURIの違いとは？ パーツの構造・名称・意味も大解説！](https://webtan.impress.co.jp/e/2010/03/09/7539)
[ウェブ開発者なら必ず知っておくべき基礎知識（８）IRI](http://info-i.net/iri)
[Web Information System Design No.5 Web文書操作](http://web.sfc.keio.ac.jp/~hagino/dis15/05-teacher.pdf)
【JavaScript】コールバック関数の基本的な流れを理解する（動画解説付き）

![eyecatch-for-callback-with-function-expression.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289248/c84f737d-f908-4250-72c2-b76a22c02e50.png)



# 概要


今回は、JavaScript初心者がつまづきがちな「コールバック関数」の基本中の基本の流れを動画も使って解説していきます。

JavaScriptのコールバック関数の理解は本当に重要で、JavaScript初心者がハマるもう1つの関門である「非同期処理」でもコールバック関数を使うことになるので、

コールバック関数は必須で理解する必要があるものとなります。


# 対象読者

今回の記事は、特に次のような人の助けになればと思い作成しました。



- 関数は書けるけど、コールバック関数の理解に苦しんでいる人
- コールバック関数の処理の流れが追えない人
- コールバック関数を自分で実装できるようになりたい人


# 詳細


解説動画と文章は以下の記事にまとめました^^
↓
[【JavaScript】コールバック関数の基本的な流れを理解する（動画解説付き）
](https://tsuyopon.xyz/2020/09/30/callback-with-function-expression/?ref=qiita)




コールバック関数の基本的な考えを身に着けたい方は、上記記事を参考にしていただけたらと思います^^
Linux実習


2020-09-30 env_centos7_virtualbox
ポート番号ウェルノウンのみを表示
Linuxでは、ポート番号とサービスの対応一覧が、/etc/services に記されている。
主要なサービスで使用されているポート番号(0～1023,ウェルノウンポート)だけを抽出した。

    $ wc -l /etc/services　　#まず行数チェック
    11176 /etc/services
    $ head -1700 /etc/services | nl -b a  #nlのオプションなしは空行を含まないのでずれる
    #ポート番号1023はなく1700行あたりが1022だった
    1695  exp2 1022/dccp  # RFC3692-style Experiment 2 (*) [RFC4727]　
    #1695行目の1022/dccpが予約port番号の最後
    $ head -1695 /etc/services
    exp2  1022/dccp  # RFC3692-style Experiment 2 (*)  [RFC4727]


2020-10-03
CUIからGUIに移行する
centos7のminimalであったので、GNOME Desktop をインストールする。

    # yum groupinstall "GNOME Desktop"
    完了したら起動時にGUIで立ち上がるようにする
    # systemctl set-default graphical.target
    再起動する
    # reboot
TerraformからCodePipelineのソースブランチの変更を無視したい

# 背景
TerraformでCodePipelineをデプロイしてる
パイプラインのソースは適宜ブランチを修正して実行する運用
修正後にTerraformからデプロイしようとすると、ブランチ部分が変更箇所として出てきてしまう
ソースブランチの変更をTerraformで無視したい

# 確認環境
```bash
$ terraform -version
Terraform v0.12.26
```

# やること
下記のようなlifecycleを追加してあげればOK
stageとactionの引数(下記だと両方0)はコードによって変更が必要

```Terraform
  lifecycle {
    ignore_changes = [stage[0].action[0].configuration["BranchName"]]
  }
```

# ignore_changesの中身の指定方法
下記のコードで考える

```Terraform
resource "aws_codepipeline" "hogehoge" {
...
  stage {
    name = "Source"

    action {
      name             = "Source"
      provider         = "CodeCommit"
...
      configuration = {
        BranchName           = "master"
...
      }
    }
  }

  stage {
    name = "Build"

    action {
      name             = "Build"
      provider         = "CodeBuild"
...
      configuration = {
...
      }
    }
  }
}
```

こちらのようなコードの場合を考えると、lifecycleの中にBranchNameまでたどれば無視できる
もちろんその上位で指定すればまとめて無視は可能だが、他の部分の変更も検知しなくなるので、基本はフルで指定することをオススメする
まずstageは2つあり、下記のような記載になってるので、配列として扱い、1番目になるので `stage[0]` と指定するとCodeCommit側を指定できる

```Terraform
  stage {
...
  stage {
```

同じ要領でactionも下記のようになっていて、1個しかないので、1番目の `stage[0].action[0]` と指定する

```Terraform
    action {
```

次にconfigurationだが、下記のように `=` で入っているので、連想配列として指定する必要があるので、 `stage[0].action[0].configuration["BranchName"]` と指定すれば良い

```Terraform
      configuration = {
        BranchName           = "master"
...
      }
```

そのため、下記を追加すれば該当の場所を無視できる

```Terraform
resource "aws_codepipeline" "hogehoge" {
...
  lifecycle {
    ignore_changes = [stage[0].action[0].configuration["BranchName"]]
  }
...
}
```

# 参考
- [Terraform職人入門: 日々の運用で学んだ知見を淡々とまとめる - Qiita](https://qiita.com/minamijoyo/items/1f57c62bed781ab8f4d7)
- [CodePipeline通知の作成でエラー出た時 | Zenn](https://zenn.dev/yusuke_shimizu/articles/6ce05f4ce5f85c6e9ee8)
NimでWindowsのCPU使用率を求める

Linuxだと`/proc/stat`を[見ればわかる](https://tkhrssk.hatenablog.com/entry/2015/07/08/002537)のですが、
Windowsだとなんか色々面倒みたいなので、ウッキウキで作りました。

作ったのですが、構造体とか変数の型とかをWin32APIに合わせるの面倒だったので、
雑に作ってみたところ見事に動いて、半笑いになりました。


## 結論
コードはGitHubにあげてます。
精度は知らん。
https://github.com/nnahito/nim_windows_total_cpu


## コード解説

### 必要な構造体

とりあえず全部パブリクアクセスで。
LONGとかDWORDは`import winim/lean`をすれば使えるようになります。

```nim
type PDH_COUNTER_INFO* = object
    dwLength*: DWord
    dwType*: DWord
    CVersion*: DWord
    CStatus*: DWord
    lScale*: LONG
    lDefaultScale*: LONG
    dwUserData*: DWORD_PTR
    dwQueryUserData*: DWORD_PTR
    szFullPath*: LPSTR

# CPU使用情報が入る構造体
type PPDH_FMT_COUNTERVALUE* = object
    CStatus*: DWORD
    longValue*: LONG
    doubleValue*: DOUBLE
    largeValue*: LONGLONG
    AnsiStringValue*: LPCSTR
    WideStringValue*: LPCWSTR
```

### Win32APIをDLLからロードする

```
# dllから必要関数のロード
proc PdhOpenQuery*(szDataSource: LPVOID, dwUserData: PDH_COUNTER_INFO, phQuery: ptr int): WINBOOL {.stdcall, dynlib: "Pdh", importc: "PdhOpenQueryA".}
proc PdhAddCounter*(hQuery: int, szFullCounterPath: LPCSTR, dwUserData: DWORD_PTR, phCounter: ptr int): WINBOOL {.stdcall, dynlib: "Pdh", importc: "PdhAddCounterA".}
proc PdhCollectQueryData*(hQuery: int): LONG {.stdcall, dynlib: "Pdh", importc: "PdhCollectQueryData".}
proc PdhGetFormattedCounterValue*(hCounter: int, dwFormat: DWORD, lpdwType: LPDWORD, pValue: ptr PPDH_FMT_COUNTERVALUE) {.stdcall, dynlib: "Pdh", importc: "PdhGetFormattedCounterValue".}
```

https://docs.microsoft.com/en-us/windows/win32/api/pdh/nf-pdh-pdhopenquerya
https://docs.microsoft.com/en-us/windows/win32/api/pdh/nf-pdh-pdhaddcountera
https://docs.microsoft.com/en-us/windows/win32/api/pdh/nf-pdh-pdhcollectquerydata
https://docs.microsoft.com/en-us/windows/win32/api/pdh/nf-pdh-pdhgetformattedcountervalue

あたりを参考に。

### CPU使用率の取得

まずはプロセス取得のためにハンドルを取得

```nim
discard PdhOpenQuery(nil, dwUserData, &hQuery)
```

取得したいプロセスのCPU使用率を指定。
今回は全体のCPU使用率なので、`_Total`を指定。

```nim
var lpcstrStr: LPCSTR
lpcstrStr = "\\Processor(_Total)\\% Processor Time"
discard PdhAddCounter(hQuery, lpcstrStr, 0, &hCounter)
```

CPU使用率の取得。
PdhCollectQueryDataを2回以上叩く。
前回のPdhCollectQueryData実行時からのCPU使用率が取得されるっぽい。

```nim
discard PdhCollectQueryData(hQuery)
```

取得したCPU使用率を人間様がわかるようにフォーマット

```nim
var fmtValue: PPDH_FMT_COUNTERVALUE
PdhGetFormattedCounterValue(hCounter, 512, nil, &fmtValue)

echo fmtValue.doubleValue
```

なんかこんな感じで取得できる。

## 宣伝

個人ブログやってます。
https://nnahito.com/
JavaScript, TypeScript 基本文法


## JavaScript
### 基礎
- 関数も、値(オブジェクト)である
- thisは、そのオブジェクト自身を表す

```javascript
var obj = {
  name: "itoo",
  getname: function() {
    return this.name;
  },
  tel: "000-1111-2222"
};
```

### アロー関数

```javascript
function hello(name) {
  alert("hello, " + name()); // 備考:カッコ付きのため、nameは関数でないといけない
}

hello( () => { return "itoo"; } ); // アロー関数
```

関数(return ...)を引数にして、関数(hello())を使う。

### get(set)
get(set)が冒頭のついているものは、ゲッター(セッター)。
プロパティのように値を取り出す（セットする)。

```javascript
class Test {
  get getScore() { ... }
}

test.getScore // test.getScore() じゃない
```

## Typescript
- リテラル型を、定数のように使用しないこと。

### 配列
```typescript
const counters: number[] = [0, 1, 2, 3];
```

### オブジェクト
```typescript
let profile: { name: string } = { name: "itoo" };
```

### 関数
```typescript
// 1.普通の関数
function sum1(a: number, b: number): number {
  return a + b;
}
// 2.無名関数
const sum2 = function (a: number, b: number): number {
  return a + b;
};
// 3.アロー関数
const sum3 = (a: number, b: number): number => {
  return a + b;
};
// 4. 3の1行ver.
const sum4 = (a: number, b: number): number => a + b; // returnを書かないこと
```

### クラス
```typescript
class Person {
  // name: string;
  // age: number;

  // constructor(name: string, age: number) {
  //   this.name = name;
  //   this.age = age;
  // }

  constructor(public name: string, public age: number) {}  // 上の記述と同一

  introduce(): string {
    return `${this.name} . ${this.age}`;
  }
}
```
Linuxのディレクトリ構造

ちょうどLinuxを勉強していたので、かんたんにディレクトリの構造をまとめていきます。

| ディレクトリ | 役割 |
|:-:|:-:|
|  /bin | Linuxシステムの動作に最低限必要な、重要度の高いコマンドを格納している  |
|  /dev | デバイスファイルを格納するディレクトリ  |
|  /etc | 設定ファイルを置くためのディレクトリ  |
|  /home | ユーザごとに割り当てられる、ホームディレクトリが配置されるディレクトリ  |
|  /sbin |  /binと似ており、これも実行ファイルを置くためのディレクトリ。ただしここには管理者ユーザ向けのコマンドが置かれている |
|  /tmp |  一時的なファイル(テンポラリファイル)を置くためのディレクトリ |
|  /usr | 各種アプリケーションと、それに付随するファイルを置くためのディレクトリ  |
|  /var | 変化する(variable)データを置くためのディレクトリ  |

###参考にした書籍
[新しいLinuxの教科書](https://www.amazon.co.jp/%E6%96%B0%E3%81%97%E3%81%84Linux%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E4%B8%89%E5%AE%85-%E8%8B%B1%E6%98%8E/dp/4797380942/ref=sr_1_1?adgrpid=52270124614&dchild=1&gclid=Cj0KCQjwtsv7BRCmARIsANu-CQdwZbErfGsKcK8ez18-hNJiLWkHc90tnOwuo1-kVzoMiFN0pAuUzbEaAoBkEALw_wcB&hvadid=338518267188&hvdev=c&hvlocphy=1009534&hvnetw=g&hvqmt=e&hvrand=4472391895109252707&hvtargid=kwd-314105638242&hydadcr=27267_11561157&jp-ad-ap=0&keywords=%E6%96%B0%E3%81%97%E3%81%84linux%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8&qid=1601439978&sr=8-1&tag=googhydr-22)
10分よりもう少し早く自分のGitHubプロフィールをカッコ良くする

## はじめに

[『10分で自分のGitHubプロフィールをカッコ良くする』](https://qiita.com/Hassan/items/134009209f5709f892b1)
という記事で自分のGitHubプロファイルの作成方法と[GitHub Profile Summary Cards](https://github.com/Fiction000/github-profile-summary-cards)が紹介されておりとても参考になりました。

ただし、GitHub Profile Summary Cardsの導入は記事に書かれているより簡易にできるのでメモしておきます。

## GitHub Profile Summary Cardsの導入

以下は[公式のインストラクション](https://github.com/vn7n24fzkq/github-profile-summary-cards/wiki/Add-to-my-profile-README)に書かれていることの要約で、上の記事に書かれているようにcloneしたりcommitしたりpushする必要はないというだけの話です。

自身のユーザー名と同名の"username/username"のレポジトリを作るところまでは元記事と同様です。

その後、作成した"username/username"レポジトリでAdd filesから新しいファイルを作成します。
ファイル名は以下のものを使用します。
```.github/workflows/profile-summary-cards.yml```

ファイルの中身は以下をコピペ。

```profile-summary-cards.yml
name: GitHub-Profile-Summary-Cards

on:
  schedule: # execute every 24 hours
    - cron: "* */24 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate

    steps:
      - uses: actions/checkout@v2
      - uses: vn7n24fzkq/github-profile-summary-cards@release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}
```
後は同じ"username/username"のレポジトリのActionsからこのworkflowを実行して、作成された
```profile-summary-card-output```
フォルダの内容を参考に好きなスタイルを選んで"username/username"の```README.md```に追加するだけです。
KtorでUnrecognizedPropertyExceptionの発生を無視する

# KtorでUnrecognizedPropertyExceptionの発生を無視する

## クラス単体

```kotlin
@JsonIgnoreProperties(ignoreUnknown = true)
data class HogeRequest(val fugue: String)
```

## ObjectMapper

```kotlin
fun Application.module(testing: Boolean = false) {
    install(ContentNegotiation) {
        Jackson {
            configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false)
        }
    }
}
```
ChromeのDeveloper Toolsで target='_blank' によって別タブ遷移したときも追跡したい

`target='_blank'` のリンクを踏んだ瞬間のリクエストを Developer Tools で閲覧するには別途設定が必要です。

以下、設定手順です。

まずは、Chrome で Developer Tools を開きます。
Macの場合はcomamnd + option + i、Windowsの場合は F12 で開けます。

次に、右上の歯車をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/5c4fd879-8a30-0cb7-6b88-486e61a14d9d.png)

「Auto-open DevTools for popups」にチェックを付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/d3b6a88d-4884-e8a3-e371-d44984cd9a8c.png)

これで設定完了です。
設定保存ボタンなどは特にありません。

こんな感じで、別タブで開いた瞬間のリクエストから Developer Tools でチェックすることができます。
[![Image from Gyazo](https://i.gyazo.com/04119a1627fd4040b130887590d6fe02.gif)](https://gyazo.com/04119a1627fd4040b130887590d6fe02)
Laravel学習備忘録その4

### インストール方法（7系での認証機能付き）
version7系でインストールするには、

```
$ composer create-project --prefer-dist laravel/laravel=7 [project_name]
```

`$ laravel new [project_name] --auth`としたいのだが、これだと最新の8系が構築されてしまう。今後、8系に移行したいが、今はなれた7系を使いたいので、create-project～を使う。

認証機能（新規登録、ログイン）を追加するには、

```
$ cd [project_name]
$ composer require laravel/ui=2
$ php artisan ui vue --auth
```

を実行する。
上のコマンドのlaravel/ui=2としたのは、最新版の3だと、エラーが出たので。調べると、おそらく7系はlaravel/uiが3系では実行できない様子。

その後、

```
$ npm install
$ npm run dev
```

サーバーを立ち上げて、トップページにアクセスすると、認証機能が追加されていることが確認できればオッケー。
.gitignoreに以下を追加する。

```.gitignore:.gitignore
/public/js
/public/css
```
デプロイするときには、改めてコンパイルする。

#### 日本語化
[Qiita - Laravel学習備忘録その3](https://qiita.com/kohboh/items/d17bb79b55b26c615512)を参考にする。

### データベースのシーディング
#### seederを使う
マイグレーションファイルでテーブルを作成し、モデルにfillableの設定などをしたあと、シーダーを作成する。

```
php artisan make:seed TasksTableSeeder
```

```php:TasksTableSeeder.php
<?php

use App\Task;
use Illuminate\Database\Seeder;

class TasksTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        for ($i = 1; $i <= 10; $i++) {
            Task::create([
                'title' => 'title' . $i,
                'content' => 'content' . $i,
                'person_in_charge' => 'person_in_charge' . $i,
            ]);
        }
    }
}
```

#### factoryを使ってUserデータをシーディングする
Laravel7では、すでにUserに関しては、factoryが備わっていた。ちょう便利。
ありがたく使わせてもらう。
なお、`config/app.php`内のfaker_localeは`ja_JP`に設定忘れないように。初期のままだと英語でできあがる。

```
php artisan make:seed UsersTableSeeder
```

```php:UsersTableSeeder.php
<?php

use Illuminate\Database\Seeder;
use App\User;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(User::class, 20)->create();
    }
}

```

DatabaseSeeder.phpに設定する。

```php:DatabaseSeeder.php
public function run()
    {
        $this->call([
            TasksTableSeeder::class,
            UsersTableSeeder::class
            ]);
    }
```

あとは、以下コマンドを実施でデータがシーディングされる。

```
composer dump-autoload
php artisan migrate --seed
```

テーブルをまっさらにしてから、シードしたい場合は、代わりに
`php artisan migrate:fresh --seed`を実行。

### 多対多のリレーション時の中間テーブル名
結論は、**アルファベット順に結合する**。逆順につないで、何回もエラーが出て、なんでだとドキュメントを見てたら、書いてあった。
例：tasksとusersをつなぎたい場合は、task_userが正解！

### Tinkerでのユーザーログイン
tinker上で、機能を試したいときに、ユーザーログインが必要な場合がある。
そうしたときに以下コマンドを実行。
`Auth::loginUsingId(1);`

これでid=1でログインできた。
ログインをチェックするには、
`Auth::check();`
ログアウトは、`Auth::logout();`
これらは、tinkerの中だけでなく、Laravelプロジェクトの中で自由に使えるようなので活用すること。

### クエリビルダのboolean
マイグレーションファイルで、カラムを作成するときに、yesかNOで作りたい場合はたぶんboolean型を使えばいいと思う。以下のように記述する。

```
$table->boolean('hoge')->default(true)
```

とすると、MySQLではtinyint(1)の型となり、デフォルトが1となる。trueのところを1と書いてもいい。
デフォルト設定しているのは、どこかの記事（ソース不明）でnullとしてしまうと何かと面倒のようだから。
【Ruby on Rails】リンク先を指定したidの部分にする方法

# 目標
リンクをクリックすると、ページ途中であっても、スクロールせずに
指定した場所に飛ばす。

# 開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

# ①idを指定
飛ばしたい場所にidクラスを指定します。

```erb:app/views/homes/about.html.erb
<div id="map"></div>
```

# ②link_toを編集

```erb:
<%= link_to "リンク名", リンク先のpath(anchor: "指定したid名") %>
```
実際の記述は以下になります。

```erb:
<%= link_to about_path(anchor: "map") do %>
  ACCSESS
<% end %>
```
または

```erb:
<%= link_to "ACCSESS", about_path(anchor: "map") %>
```

URLはこのようになります。

```
http://localhost:3000/about#map
```

# 参考
[Rails アンカーリンクを使い遷移先ページの場所(位置)を指定する](https://qiita.com/hellhellmymy/items/37ce7197c8f206715af2)
csvの1行をダブルクォートで囲まれていない半角カンマで区切る

```
BufferedReader br = （読み込むファイル）;
while((line = br.readLine()) != null){
//後ろに偶数個の「"」が現れる「,」にマッチする正規表現
Pattern cPattern = Pattern.compile(",(?=(([^\"]*\"){2})*[^\"]*$)");
//後ろに偶数個の「"」が現れる「,」で行を分割する
List<String> elem = Arrays.asList(cPattern.split(line, -1));
}
```
lsofコマンド

どのプロセスがどのファイルを掴んでいるかわかる。

### 待機ポートとプロセスを確認する

```
# lsof -i:80
COMMAND  PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
httpd   5916 root    4u  IPv6 204838      0t0  TCP *:http (LISTEN)
httpd   5918  www    4u  IPv6 204838      0t0  TCP *:http (LISTEN)
httpd   5919  www    4u  IPv6 204838      0t0  TCP *:http (LISTEN)

# lsof -i:443
COMMAND  PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
httpd   5916 root    6u  IPv6 204842      0t0  TCP *:https (LISTEN)
httpd   5918  www    6u  IPv6 204842      0t0  TCP *:https (LISTEN)
httpd   5919  www    6u  IPv6 204842      0t0  TCP *:https (LISTEN)
```
### 特定のプロセスIDのプロセスが開いているファイルを表示

```
postfixのmasterプロセス
root      1284  0.0  0.1  80900  3432 ?        Ss   Dec12   0:01 /usr/libexec/postfix/master

# lsof -p 1284
COMMAND  PID USER   FD   TYPE             DEVICE SIZE/OFF   NODE NAME
master  1284 root  cwd    DIR              253,5     4096    540 /var/spool/postfix
master  1284 root  rtd    DIR              253,1     4096      2 /
master  1284 root  txt    REG              253,4   155976   7178 /usr/libexec/postfix/master
master  1284 root  mem    REG              253,1    65960    124 /lib64/libnss_files-2.12.so
master  1284 root  mem    REG              253,1   124640    304 /lib64/libselinux.so.1
master  1284 root  mem    REG              253,1    12592   5355 /lib64/libkeyutils.so.1.3
～～省略～～
```
### 特定のユーザで実行されているプロセスが開いているファイルを表示

```
# lsof -u www
wwwユーザで実行されているプロセスが開いているファイルを表示できる
```

### 大きなファイルを消してもディスク使用量が回復しない場合
何かプロセスがファイルを掴みっぱなしだと、ファイルを消しても空き容量が増えないことがある。
lsof で deleted になっているファイルを引っ掛けて、対象ファイルを掴んでいるプロセスを潰せば何とかなるかも。

```
# lsof | grep delete
httpd      5916    root   13w      REG              253,4        0     263275 /usr/local/httpd/logs/ssl_mutex (deleted)
httpd      5918     www   13w      REG              253,4        0     263275 /usr/local/httpd/logs/ssl_mutex (deleted)
```
こんな風に表示されるので、該当のプロセスを潰す。
（kill とか kill -HUP PID とか OS再起動 とか サービス再起動 とか）
そうやってプロセスからファイルを解放してやるとディスク使用率も減るはず。
Docker Hub の pull 回数制限について

# 対象読者
- EKS や GKE など、コンテナを利用するマネージドサービスを使って、サービスの開発または運用をされている方
- private レジストリではなく、Docker Hub から直接 pull して運用している image に心当たりのある方

---
# 要約
- 2020年の11月1日から、Free user に関して、Docker Hub からの image pull 回数に制限がかかるようになる。
  - [ダウンロードレート制限 - Docker](https://matsuand.github.io/docs.docker.jp.onthefly/docker-hub/download-rate-limit/)
- 特に Free user のうち、ログインしていない Anonymous user の回数制限は`100 pulls / 6 hours`となっている。
  - [Pricing & Subscriptions - Docker](https://www.docker.com/pricing)
- コンテナを利用するマネージドサービスを利用している場合、ホストが Anonymous user として docker pull を行ってしまうため、pull 回数制限に引っかかる可能性がある。
  - pull 回数制限に引っかかってしまうと image の pull ができず大障害に発展する可能性がある。
- 対応としては、Docker Hub から pull してきている image を private なレジストリに移行するのがよさそう。

---
# 対応方法の整理とその調査
対応方法としては以下の3つが考えられる。1 が一番楽で、3 が一番面倒。

1. 何らかの方法でマネージドサービスの各ホストで`docker login`する
2. GitHub Container Registry を使う
3. Docker Hub から pull してきている image を private なレジストリに移行する

## 1. 何らかの方法でマネージドサービスの各ホストで`docker login`する
これができたら一番楽だが結論から言うと不可能っぽい。
そもそもコンテナ周りのマネージドサービスは private レジストリを利用することを前提としているようで、「EKS (or GKE) docker login」などでググっても特に情報が出てこなかった。

## 2. GitHub Container Registry を使う
GitHub が public かつ無料のコンテナレジストリを公開するそう。詳しくは下記の記事を参照のこと。

- [「GitHub Container Registry」パブリックベータとしてサービス開始。無料でコンテナのパブリックイメージ公開可能](https://www.pu/blickey1.jp/blog/20/github_container_registry.html)

こちらの記事にもあるとおり、現時点で無料範囲での利用において何らかの制限があるなどの説明は今のところ見当たらない。
ゆえに login 不要で無制限に image を pull できる第2の Docker Hub として利用できる可能性がある。
一方で、GitHub Container Registry は現段階ではまだパブリックベータであり、2020年11月1日までにサポートがどこまで進むか不明瞭である。
よって、少なくとも現時点 (2020-09-30) ではこの方法は取りづらい。

## 3. Docker Hub から pull してきている image を private なレジストリに移行する
一番堅実な方法。手順としては下記になるか。

1. サービスで利用しているコンテナイメージを全て洗い出して、Docker Hub から直接 pull してきていないか精査する。
2. Docker Hub から直接 pull している image を private レジストリに push する。
3. pull の向き先を Docker Hub から private レジストリに変える。

---
# 最後に
この話、サービスによっては結構深刻な問題になりうると思っているのですが、調べてもあまり情報が得られません。
もし知見をお持ちの方がいらっしゃいましたらコメントいただけると非常にありがたいです。
dataset（PythonのORマッパー）で実行したSQLを取得する

## 概要

dataset（PythonのORマッパー）で実行したSQLを取得する。

dataset: 1.3.2
mysqlclient: 1.4.6

[dataset公式](https://dataset.readthedocs.io/en/latest/index.html)

## 実装

### 前提

事前に↓してあること。

```python
db = dataset.connect(url)
```

### query()する場合

```python
result = db.query("select * from test1")

result.result_proxy.context.statement
> 'select * from test1'
```

### find()する場合

```python
table: dataset.Table = db['test1']
result = table.find()

result.result_proxy.context.statement
> 'SELECT test1.id \nFROM test1 \n LIMIT %s, 18446744073709551615'
```

もしくは、

```python
result = iter(db['test1'])

result.result_proxy.context.statement
> 'SELECT test1.id \nFROM test1 \n LIMIT %s, 18446744073709551615'
```

### 備考

`query()`の場合も`find()`の場合も、`dataset.util.ResultIter`が返ってくる。

https://github.com/pudo/dataset/blob/68a8ad8c2bea8e34f100381312fe1fd54ee41399/dataset/util.py#L36
[機械学習導入] 初心者向けイメージで掴む機械学習（ニューラルネットワーク）

## 概要

最近は機械学習の取り組みがとても増えてきたと思います。
個人的にも機械学習を勉強しているので、イメージをつかめればと思いまとめてみました。
機械学習の導入として読んでもらえればと思います。

## 機械学習とは・・？

AI？機械学習？色々この分野には言葉がありますが、関係性を図にするとこのようになります。
![スクリーンショット 2020-09-16 16.08.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52154/665f042a-90ff-5a28-5d3a-967faee46c3a.png)

図のようにAIは広義的な意味で使われており、その中に機械学習、ニューラルネットワーク、ディープラーニングという形で包括されるようになっております。

## 機械学習活用の流れ

人間と同等のことをコンピュータでも再現したかった。

例えば人間でいうと、目、耳、口などなど色々なところから情報が入ってきます。
その情報をもとにこれは○○だと思い行動をしていきます。

いわゆる脳のモデルをコンピュータ内で実現させて擬似的な脳（要するに人工知能）を作ることを目的としております。
![スクリーンショット 2020-09-16 17.09.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52154/83b06d4e-ce85-dfdc-56fe-c362fe90d164.png)

上記の図は、何かを見てこれはなんだ？と思うとき、目、耳、口から情報（入力X）が入り、過去自分がインプットしている情報からこれはうさぎだと答えがわかる（出力Y）という図です。
これをコンピュータでは、入力Xと入力Yの情報を数値化して、機械学習を行っていきます。

## 機械学習とは？

機械学習はAIに含まれていることは先程書きましたが、機械学習そのものはどういうものなのか説明していきます。

### 機械学習の分類

- 教師あり学習
    - 先生がいて、不明なデータに対して正解を教えてくれる
    - 学習（入力）してから認識・予測（出力）を行う
    - 回帰と分類という手法があり、ニューラルネットワークの元となるもの
- 教師なし学習
    - 先生がおらず、データそのものを分析し、グループ分けや簡略化を行う
    - クラスタリングと次元削除という手法がある
- 強化学習
    - 機械が取る行動戦略を改善しながら最適な答えを導いていく

このように、大きく3つに分かれます。
今回はこの中にある教師あり学習についてもう少し詳しくみていきます。

### 教師あり学習（種類）

- 分類
    - 質的データと量的データ（そのうちの離散値）
    - 「犬」や「猫」、「購入」「非購入」といった情報
    - 分類・予測する場合の学習方法
- 回帰
    - 量的データのうちの連続値
    - 「売上」や「成長率」といった数量情報
    - 線で予測する場合の学習方法

教師あり学習ではこのように2つに種類分けすることができます。
課題とするものに対して分類か回帰かを選んで機械学習させていきます。

## ニューラルネットワーク

ニューラルネットワークとは、人間の脳の働きを真似てできた数理モデルの一つです。
本記事の最初に説明した図のように、機械学習は人間の考えをコンピュータ上で表すために考えられました。

では、実際にどうやって課題を解決させていくのかというと、学習（要するに教師データ）をしてニューラルネットワークをチューニングしていき、最終的に課題を解決させるために未知のデータを推論して回答させていくという流れで行っていきます。

ニューラルネットワークのイメージは下記の通りです。
![スクリーンショット 2020-09-30 12.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52154/3b29ac07-7dc6-f0b9-16b2-d6aa1b0101f1.png)

ノードと呼ばれる要素がたくさんあり、ノードをそれぞれエッジという線でつながっております。
たくさんの情報（入力層にあるノード）を他のノードに渡していき、最終的にそれがどういうものなのかを決めていきます。

### 例

例えばワインがあってそれを様々な情報から品種を推論していくニューラルネットワークはどうなるかというと・・
![スクリーンショット 2020-09-30 12.15.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52154/9da5e1f5-6574-fee0-c3bc-a37106fc5794.png)
このように、入力Xが複数あり、最終的に出力Yに対して情報を集約させくイメージとなります。
ここで大事なのは、

- 入力Xの要素を考える
- 出力Yの要素を考える
- 入力Xのデータを正規化する
- ウェイトを決める

といった作業が必要となってきます。
ちなみに、ワインでは入力Xにすべきデータはもっとあります。
そのため、もし微妙な学習モデルができてしまった場合は、再度1−4を決めてモデルを修正していく必要があります。

では、各それぞれの入力Xに対して数値を当てはめた結果、出力Yはどうなったかというと・・

![スクリーンショット 2020-09-30 12.16.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52154/508031d9-ace5-f66e-105a-007cbcce621a.png)

このようになり、最終的にはこれは0.8の確率でピノ・ノワールだということがわかります。

## 機械学習（ニューラルネットワーク）で難しいこと
- 精度を出すためには教師データが結構必要（学習不足）
- でも多くてもだめ（過学習）
- XとYで相関する要素を見つけることが大変
- データを整形するところが大変
- 適切なウェイトを決めるところが大変


## 最後に注意点

機械学習は万能だ！すべてにおいて機械学習しよう！というのは間違いです。
機械学習をするためには、大量のデータが必要ですし、課題を解決するためにモデルの構築やパラメータの調整等・・すごく時間がかかります。
また、必ずしも機械学習が最善の手ではなく、工夫すれば他にも課題解決させる手法はあると思います。
一つの選択肢として機械学習を用いればどうかという考えで課題を解決させていきましょう。

- 機械学習でなんでもできると思わないこと
- ビジネスの課題から考えて「何から何を予測するのか」を正しく設定すること
- 目的にあった学習データを準備しておく必要がある
【Flutter】initState内でawaitさせる

最後にFlutterのオンライン講座のリンクも載せていますので、ぜひそちらもご覧ください。

iniState内で5秒止める処理がしたいとき,このように記述することはできません。

```dart:main.dart
@override
void initState() async {
  super.initState();

  await Future.delayed(Duration(seconds: 5));
}
```
このようにすると実行できます。

```dart:main.dart
@override
void initState() {
 super.initState();
 
 Future(() async {
   await Future.delayed(Duration(seconds: 5));
 });
}
```
リンク
[Flutter学習スクール](https://onthe.osaka/facilities/plan/app "Flutter学習スクール")
Hot Reload から Fast Refresh に移行する

## 背景

私が React で作っている SPA で webpack, webpack-dev-server を下記のモジュールを使って HMR を有効にしていましたが、Functional Component がうまく更新されなかったりしてイマイチでした。せっかくなので最近 react が提供している react-refresh を使って、イケてる開発環境にしていきます。変更前の書き方がそもそも古いなどありそうですが、ご了承ください。

- @hot-loader/react-dom
- react-hot-loader

## 概要

react-hot-loader を削除し、[react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) を導入します。

[react-refresh-webpack-plugin の導入方法](https://github.com/pmmmwh/react-refresh-webpack-plugin#usage)、[react-hot-loader から来た人向けガイド](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#coming-from-react-hot-loader) に従って変更を行っていきます。

## 変更前

```js:webpack.dev.js
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
/* 中略 */
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",

```

```tsx:index.tsx
import React from "react"
import ReactDOM from "react-dom"

function renderApp() {
  ReactDOM.render(<App />, document.querySelector("#root"))
}

if (module.hot) {
  module.hot.accept("components/App/App", () => {
    renderApp()
  })
}
```

```tsx:App.tsx
import { hot } from "react-hot-loader/root"
import React from "react"

/* 中略 */

export default hot(App)
```


### 変更後

- @hot-loader/react-dom の alias を削除
- babel-loader の plugins に react-refresh/babel を追加
- plugins に ReactRefreshWebpackPlugin を追加

```js:webpack.dev.js
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")

/* 中略 */

  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [require.resolve("react-refresh/babel")],
          },

/* 中略 */
  plugins: [
    new ReactRefreshWebpackPlugin()
```

- module.hot.accept() を削除

```tsx:index.tsx
import React from "react"
import ReactDOM from "react-dom"

function renderApp() {
  ReactDOM.render(<App />, document.querySelector("#root"))
}

renderApp()
```

- hot() を削除

```tsx:App.tsx
import React from "react"

/* 中略 */

export default App
```

- .babelrc から react-hot-loader/babel を削除

```diff:.babelrc
-    "react-hot-loader/babel",
```

## あとがき

簡単でした。ちゃんと Functional Component もリロードせずに更新されていい感じです。
NullpoMino 7.5.0 を Ubuntu 20.04.1 64bit 版で動かす方法

## Java の準備

java 8 をダウンロード

https://www.java.com/ja/download/

![スクリーンショット_2020-09-30_12-07-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/c2d8816d-84f2-45e0-5aeb-952e220c376e.png)

```sh
tar xzf jre-8u261-linux-x64.tar.gz
```

## NullpoMino 7.5.0 の準備

https://github.com/nullpomino/nullpomino/releases/
から
NullpoMino7.5.0_linux.tar.gz
をダウンロード

![スクリーンショット_2020-09-30_12-10-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/0c274fb0-5517-ec11-2bae-57e2f822f454.png)

```sh
tar xzf  NullpoMino7.5.0_linux.tar.gz
cd NullpoMino7_5_0
```

* NullpoMino にJavaのPATHを追加

```diff:NullpoMino
  #!/bin/sh
+ export PATH=$PATH:../jre1.8.0_261/bin/
  cd `dirname $0`
  ./play_slick
```


## 起動

```
cd ./NullpoMino7_5_0/
./NullpoMino
```

![スクリーンショット_2020-09-30_12-11-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/f6c9c489-b833-266b-8a14-5b6d0c6d628f.png)

問題なく動きました。効果音も出ます。（BGMはあるのか不明。流れませんでした。）

## 失敗例

* `openjdk-14-jre` を用いたら動かなかった。
* 64bit版のUbuntuで`32bit版のJava 8`を用いたら動かなかった。
visualStudioでSQLServerとアプリを接続しようとしたときに、「ユーザー'○○'はログインできませんでした。」

以下を参考に、sql serverとコンソールアプリを接続するコードを記入
https://qiita.com/ymasaoka/items/944e8a5f1987cc9e0d37


Program.cs

```
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data.SqlClient;

namespace SqlServerSample
{
    class Program
    {
        static void Main(string[] args)
        {
            try
            {
                // 接続文字列の構築
                SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder();
                builder.DataSource = "localhost";   // 接続先の SQL Server インスタンス
                builder.UserID = "sa";              // 接続ユーザー名
                builder.Password = "my_password"; // 接続パスワード
                builder.InitialCatalog = "master";  // 接続するデータベース(ここは変えないでください)
                // builder.ConnectTimeout = 60000;  // 接続タイムアウトの秒数(ms) デフォルトは 15 秒

                // SQL Server に接続
                Console.Write("SQL Server に接続しています... ");
                using (SqlConnection connection = new SqlConnection(builder.ConnectionString))
                {
                    connection.Open();
                    Console.WriteLine("接続成功。");
                }
            }
            catch (SqlException e)
            {
                Console.WriteLine(e.ToString());
            }

            Console.WriteLine("すべてが完了しました。任意のキーを押してアプリを終了します...");
            Console.ReadKey(true);
        }
    }
}
```

しかし、実行すると例外発生。「ユーザー'○○'はログインできませんでした。」エラー。

<h2>原因</h2>
SQL Server認証でのユーザーsaのログインがうまくいっていなかったから。

<h2>解決法</h2>
Security＞Logins＞saを右クリックしPropertiesを選択。
Statusを選択し、LoginをDisabledからEnabledにする。
【Flutter】AppBarの高さ（height）を変更する

![rectangle_large_type_2_e5970f34261d446ad5114b17f7269099.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648090/7ebb0bfc-5098-f156-1a0b-08aedffa82d3.png)

最後にFlutterのオンライン講座のリンクも載せていますので、ぜひそちらもご覧ください。

今回は、AppBarの高さを変更する方法をご紹介します。
AppBarは、Container等のサイズを変更できるWidgetで囲うという、Flutter開発でよくある方法で高さ（height）の指定をすることができず、PreferredSizeというWidgetで囲う必要があります。

```dart:main.dart
PreferredSize(
   preferredSize: Size.fromHeight(40.0),
   child: AppBar(
     title: Text('AppBarの高さを変更する'),
   ),
)
```
リンク
[Flutter学習スクール](https://onthe.osaka/facilities/plan/app "Flutter学習スクール")
R 標準出力（と標準エラー出力）に色を付ける

RをUbuntuやWSLで使っていると、出力の部分に色がついていなくて入力部分との区別が難しいことがあります。
`insight::print_color`を使うと標準出力に色を付けることが出来ます。
**※ただしWidndowsで標準のRguiでは色が出ません。RStudioだと色が出せます。**

## `insight::print_color`について
`insight::print_color`はパッケージinsightは以前から紹介しているeasystats系のパッケージの一つで、主にモデルのデータの取得などのユーティリティ部分を担っています。
その一環として、`insight::print_color`はeasystats系のパッケージの出力結果を見やすくするために用いられています。統計量などをコンソールに出力することが多いパッケージならではの工夫です。

- インストール

```R
install.packages("insight")
```

- 基本的な使い方 

基本的には

```R
insight::print_color(text = <表示したいテキスト>, color = <表示したい色>)
```

というように使います。`color`は"red"、"yellow"、"green"、"blue"、"violet"、"cyan"、"grey"を指定することが出来ます。
ただし、テキストの最後に`\n`をつけないと改行されずに見にくくなるので注意が必要です。
![color2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/e8c3ceef-9991-ae4a-fdf9-e85e194d64dc.png)

## 自作関数の出力に色を付ける
自作関数の場合、表示するテキスト部分に`insight::print_color`を適用することで、標準出力、標準エラー出力両方に色を付けることが出来ます。

```R
check <- function(x) {
	if (is.na(x)) warning(insight::print_color("`x` is NA.\n", "red"))
	else if (!is.numeric(x)) warning(insight::print_color("`x` is not numeric.\n", "violet"))
	else if (x > 0) cat(insight::print_color("`x` is positive.\n", "green"))
	else if (x == 0) cat(insight::print_color("`x` is zero.\n", "grey"))
	else if (x < 0) cat(insight::print_color("`x` is netgative.\n", "blue"))
}
```


![col_func2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/60db8f4b-44c8-8708-dc81-9afe45291259.png)

## 既存の関数の出力に色を付ける
既存の関数に関しては、以下の工夫をすることで標準出力に色をつけることが出来ます。標準エラー出力（エラー、警告、メッセージ）に関してはうまく色を付けることが出来ませんでした。

- 色つけ関数の設定

以下のような色つけ関数を定義しておきます。`capture.output`で出力を文字列として拾い、`paste0`で改行を付け加えたあと、`insight::print_color`を適用しています。

```R
dye_output <- function(x, color) insight::print_color(paste0(capture.output(x), "\n"), color = color)

# パイプを使う場合
dye_output <- function(x, color) x %>% capture.output(.) %>% paste0(., "\n") %>% insight::print_color(., color = color)
```
- 実行例

上記の関数を使うと以下のように出力に色を付けることが出来ます。
![col_eval2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/4ecdea94-f678-8a19-6821-eda9ae06a15e.png)

また、`{}`と`()`を以下のように組ませると、結果をオブジェクトに格納すると同時に標準出力に色を付けることが出来ます。
![col_result2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/8ebd4881-0bc0-1003-c990-9ed7f343559c.png)

magrittrのパイプを使える場合には関数の後に以下のように付け加えれば済むので非常に見やすく、使いやすいです。
![col_pipe2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/a0be0463-6d0c-201f-260e-45ced2827322.png)

## 何かの時に役に立つかも？
個人的には出力に色がつくのはなんとなく嬉しいのですが、そんな常用することはないかもしれません。ただ何かの時に役に立つかも？
コンソールの出力をより理解している方であればもっと柔軟な使い方が出来るかもしれないので、ぜひ試してみてください。

## 参考にしたサイト
・[easystats/insight](https://github.com/easystats/insight)
・[Package ‘insight’](https://cran.r-project.org/web/packages/insight/insight.pdf)
・[RjpWiki R出力の記録](http://www.okadajp.org/RWiki/?R%E5%87%BA%E5%8A%9B%E3%81%AE%E8%A8%98%E9%8C%B2#hdc4a09f)
・[R における警告やエラーメッセージなどを出力する方法 標準出力](https://stats.biopapyrus.jp/r/devel/stdout.html)　※ただし、WarningやMessageは標準エラー出力に出力されていると思う。
・[Rコンソールのコマンド、結果、警告/メッセージ/エラーを組み合わせたRセッションのログファイルの作成方法](https://stackoverrun.com/ja/q/5821272)
thymeleafでoptionのvalueが0から始まる数値のときにゼロサプレスされてしまうときの対処法

# 結論
th:value="'01'"というようにvalueをシングルクォートでくくると、先頭のゼロが取れずにそのままの値がHTMLに反映されます。

# 事象
例えば以下のようなコードをthymeleafで書きます。
意図した挙動としてはvalueが01など先頭に0がついた状態なのですが…

```HTML
<select th:field="*{select001}" th:id="select001" name="select001">
	<option th:value="01">01</option>
	<option th:value="02">02</option>
	<option th:value="03">03</option>
	<option th:value="04">04</option>
</select>
```

出力されたHTMLではvalueの先頭のゼロが取れてしまっています。

```HTML
<select  name="select001" id="select001">
	<option value="1">01</option>
	<option value="2">02</option>
	<option value="3">03</option>
	<option value="4">04</option>
</select>
```

# 対処法
結論に書いたようにvalueをシングルクォートでくくります。
先ほどの例を修正すると下記のようになります。

```HTML
<select th:field="*{select001}" th:id="select001" name="select001">
	<option th:value="'01'">01</option>
	<option th:value="'02'">02</option>
	<option th:value="'03'">03</option>
	<option th:value="'04'">04</option>
</select>
```
FLOCSS 設計における Layout レイヤーの再定義

## はじめに

先日、FLOCSS 設計について社内での共有があった際**「FLOCSS 設計において l-container のような汎用的なレイアウトクラスはどこに記述するべきなのか？」**という話が上がりました。
例えば以下のようなスタイルになります。

```css
.l-container {
  margin: 0 auto;
  width: 640px;
}
```

このスタイルは、コンテンツを内包しつつ左右中央に配置するために使用されるものであり、同一ページ内で再利用されることが考えられます。**「配置に関するクラスなので Layout レイヤーに記述する」**と考えると全く問題ないように見えますが、後述する FLOCSS 設計における Layout レイヤーの定義においては適切でない書き方となります。
これを期に FLOCSS のドキュメントを再度読み直しつつ、汎用的なレイアウトクラスをどう配置するかということについて考え直してみることとしました。

## FLOCSS 設計における Layout レイヤーの定義

FLOCSS の公式ドキュメントで、Layout レイヤーは以下のように定義されています、

>
Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。
ただしIDセレクタは高い詳細度を持つため、それを懸念する場合には、l-* プレフィックスをつけた命名を採用するか、あるいは [id="header"] のような属性セレクタを用いることを推奨します。


`ページ単位で唯一の存在である要素となる` と書かれているため、`l-container` のように同一ページ内での再利用が考えられるレイアウトのスタイルは Layout レイヤーに記述するべきではない、というのが FLOCSS の基本設計のようです。
公式ドキュメントでは `c-grid` が例としてあげられているように、再利用するレイアウトクラスについては Object/Component レイヤーとして定義するのが適切なようです。

FLOCSS の基本設計に則るのであれば、`l-container` ではなく `c-container` として、**Object/Component レイヤーに記述するのが妥当**かもしれません。

## Object/Component にレイアウトを記述することへの違和感

ここで一つ違和感が生まれます。
コンポーネントは**「再利用できるパターンとして、小さな単位のモジュールを定義します。」**と定義されていますが、`l-container` のようなコンテナーは果たして小さな単位のモジュールだと言えるのだろうか？という部分です。
主観ですが、要素を包含するレイアウトコンテナーを普段からコンポーネントとして定義している方はあまり多くないのではないでしょうか？

Object/Component は、言葉通りに再利用できるパターンとして小さな単位のモジュールを定義し、Layout レイヤーが配置に関する責務を負う方が直感的なように思えます。

## 汎用的なレイアウトはどこに配置するのがよいのか？

結論から言うと、自分はやはり Layout レイヤーに書くのがよいのではないかと思っています。

FLOCSS による設計ではクラスの上書きを容易にするためにカスケーディング順に厳格性がありますが、Layout レイヤーは Object レイヤーより先に記述される前提となっていますので、記述箇所が Layout になってもカスケーディングによる問題は生まれないように思えます。
また、Object/Component への記述よりも感覚的に正しく、記述ルールに違和感も生まれにくいのではないかと考えています。

となると Layout レイヤーに再利用性のあるレイアウトを記述する上で問題となるのは

- FLOCSS 設計として定義されているルールとして適切ではない
- ページ固有のレイアウトと再利用性のあるレイアウトの混在

というところになるかと思います。
上記の問題を払拭するために、Layout レイヤーの再定義を行うこととします。

## Layout レイヤーを再定義する

FLOCSS を考案された、谷拓樹氏は自著[『柴犬でもわかるFLOCSS』](https://mamehiko.booth.pm/items/1033385)の中で
**「FLOCSS をベースに CSS 設計を考えた時に、Layout を再定義し、役割・責務を変えてしまってもよい」**と述べられています。

自分なりに Layout レイヤーをより直感的に再定義するのであれば、現状では以下のようなものになるかと思います。

>
Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
また、再利用できるレイアウトのパターンとしてのスタイルの記述を許容します。
ページ単位で唯一の存在である要素とは限らないため、Layout レイヤーの要素においても ID セレクタによるスタイリングは禁止します。


その際、本来の FLOCSS 設計における**ページ単位で唯一の存在である要素**と、新しく独自で追加した**再利用できるコンテナーのパターンとしての要素**が混在することとなりますので、後者は `layout/_common.scss` などとして管理しておくのがよさそうです。

## まとめ

今回、自分なりに Layout レイヤーをより直感的で使いやすくするための再定義を行いました。
FLOCSS はあくまで基本原則であり、自身のプロジェクトによってフレキシブルに使用していけるところにも良さがあると思っています。
引き続きプロジェクトに合わせてベストな設計を探っていきたいです。

## 参考

[FLOCSS 公式ドキュメント](https://github.com/hiloki/flocss)
[柴犬でもわかるFLOCSS](https://mamehiko.booth.pm/items/1033385)
【MySQL】いろんな年月日取得まとめ

# 見てほしい人
MySQLでいろんな期間のデータを取得したいけど、書き方がわからぬという方。

私自身、難しいことは言わず、ここからここまでの期間のデータがほしいだけなんじゃ！と思いつつ、シンタックスエラーに悩まされたり、うまくいかないことが多かったので、個人的に年月日操作でよく使ったものをまとめてみました。
(紹介するもの以外にもいろいろ書き方はあるみたいなので、気になる方は調べてみてください！)

## 現在の年月日(時刻)
```sql
now();
-- 2020-09-04 15:17:11
```

## 現在の年月日
```sql
curdate();
-- 2020-09-04
```

## 現在の月日
```sql
date_format(now(), "%c月%e日");
-- 9月4日
```

## 現在の時間
```sql
time(now());
-- 15:57:09
```

## 今月
```sql
month(now());
-- 9
```

## 今日
```sql
day(now());
-- 4
```

## 今年
```sql
year(now());
-- 2020
```

## 去年
```sql
year(now())-1;
-- 2019
```

## 現在から20日後の年月日(時刻)
```sql
DATE_ADD(now(), INTERVAL 20 DAY);
-- 2020-09-24 16:14:01
```

## 現在から3ヶ月後の年月日(時刻)
```sql
DATE_ADD(now(), INTERVAL 3 MONTH);
-- 2020-12-04 16:16:56
```

## 現在から1年前の年月日(時刻)
```sql
DATE_ADD(now(), INTERVAL -1 YEAR);
-- 2019-09-04 16:06:03
```
`INTERVAL`の後の数値にマイナスをつけると、〇〇前になります。

## 今年の1月1日〜今年の12月31日まで
```sql
between CONCAT(year(now()),'-01-01') and CONCAT(year(now()),'-12-31'); 
```

## 2年前の1月1日〜現在まで
```sql
between CONCAT(year(now())-2,'-01-01') and now();
```
`CONCAT()`を使って、年 と 月日 を結合させています。
もっといい方法があるかもしれませんが…。
where文と合わせて、データの日付指定に使ってみてください。

```sql:例
select * from 商品
where 売れた日 between CONCAT(year(now())-2,'-01-01') and now();
-- 2年前の1月1日から現在までに 売れた 商品 のデータを出す。
```


#まとめ

参考：[MySQL 12.7 日付および時間関数](https://dev.mysql.com/doc/refman/5.6/ja/date-and-time-functions.html)

何かとデータが必要になる時に、日付指定とかと格闘することとなると思います。
少なくとも私は、毎度忘れては調べの繰り返しでした。
少しでも誰かのお役に立てたら幸いです。
先輩に絶対に覚えておけと言われたもの


### if関連

Rails における nil?, empty?, blank?, present? の使い分けとBetter Practice
https://qiita.com/aeroastro/items/b58228decb7094af7594


### データの取り出し

find、find_by、whereの違い
https://qiita.com/tsuchinoko_run/items/f3926caaec461cfa1ca3

pluckメソッドが便利な件について
https://qiita.com/k-o-u/items/31e4a2f9f5d2a3c7867f
[ServiceNow][ATF] Email送信のテストがエラーになる時の対処法

#概要
Orlandoのバージョンから自動テストフレームワーク（ATF）で「Email」のカテゴリが追加され、
Outbound / Inbound のEmailをテストすることができるようになりました。

今回発生したのは、送信メールの検証を行うテストステップがエラーとなってしまう問題です。

##プラットフォーム
Paris

#現象
以下のテストステップで送信メールの検証がエラーとなりました。
![スクリーンショット 2020-09-27 1.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/9c56afea-9599-61cf-dedb-d42f308cf89c.png)

###エラーメッセージ
Could not find email matching conditions: (以下略)
![スクリーンショット 2020-09-27 1.02.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/45457422-b3e5-4a19-464d-5f1a9f0f395f.png)

条件に一致するレコードがなかったとのこと
![スクリーンショット 2020-09-27 1.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/ed739e0d-3264-bd63-009c-d293aacb031e.png)

#原因
代理操作の後でユーザーのメールを設定するのがダメみたいです。

#対処方法
メールを更新後代理操作のステップを追加します。
![スクリーンショット 2020-09-27 1.11.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/afd84383-20fc-9f40-abe0-aee38325c726.png)


テストを実行すると、エラーが発生せずパスしました。
![スクリーンショット 2020-09-27 1.06.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/17e35a01-12fe-cf16-d179-ce25f75dfae3.png)

そもそもユーザー作成のステップでメールアドレスが設定できるようになれば解決しそうなので、改善されることを願っています。
TypeScriptのオーバーロードのエラー文言に惑わされた

# 簡単なまとめ
関数のオーバーロードは宣言されたinterfaceを上から順に**引数の型が全部一致するまで**見ていくけど、
どれにも一致しない場合、**一番最後に宣言されたinterfaceでのエラー**をエラー文として出す

# 環境
TypeScript 3.9.7
VScode 1.48.2

# 説明
```typescript
class Hoge {
  // 関数のinterface
  func(arg1: string, arg2: number): string;
  func(arg1: string, arg2: number[]): string;
  func(arg1: number, arg2: string): string;
  func(arg1: number, arg2: string[]): string;

  func(arg1: any, arg2: any) {
    // なんやかんやの処理
    return 'ok';
  }
}
```
こういうクラスがあったとして

```typescript
const hoge = new Hoge();

const result1 = hoge.func('string', 0); // ok
const result2 = hoge.func('string', [0]); // ok
const result3 = hoge.func(0, 'string'); // ok
const result4 = hoge.func(0, ['string']); // ok
const result5 = hoge.func('string', {}) // error
```

result5 はエラーになりますが、この際のTypeScriptのエラー文言が
`Argument of type '"string"' is not assignable to parameter of type 'number'.`
になります(*第一引数にエラーがでる*)

これは冒頭にも書いた通り、関数のオーバーロードは宣言されたinterfaceを上から順に**引数の型が全部一致するまで**見ていきますが、
どれにも一致しない場合、**一番最後に宣言されたinterfaceでのエラー**をエラー文として出す上、**一つ目の引数でエラーになった場合、二つ目の引数をチェックしない**からです。

「第一引数がstringなんだからその時点で3番目と4番目は除外してくれる」みたいな優しさはありません(当たりまえ)

# 知らなくてハマった例
上記の例くらいならぱっと見でわかりますが、引数の型がinterfaceだったり、このクラスがライブラリ内のものだったりすると結構ハマります

```typescript
interface Iarg1{
 foo: string;
 bar: number;
 baz: boolean;
 qux: {
  quux?: (key: string) => string;
  corge?: (key: string) => void;
 };
}

interface Iarg2 {
 value: 0;
}

class Fuga {
  // 関数のinterface
  func(arg1: Iarg1, arg2: Iarg2 ): string;
  func(arg1: Iarg1, arg2: Iarg2[]): string;
  func(arg1: string, arg2: Iarg2): string;
  func(arg1: string, arg2: Iarg2[]): string;

  func(arg1: any, arg2: any) {
    // なんやかんやの処理
    return 'ok';
  }
}
```

こんな感じでちょっと複雑なinterfaceがあったとして

```typescript
const fuga = new Fuga();

const arg1 = {
 foo: 'abcde',
 bar: 123,
 baz: true,
 qux: {
  quux: (key: string) => `${key}${key}`
 }
}
const result1 = fuga.func(arg1, { value: '0' }); // error

```

実際はvalueが間違っているんですが、
エラーは「arg1がstringじゃない」と言われます。
arg1の型宣言してないからか？とか思って

```typescript
 const arg1: Iarg1 = {
  foo: 'abcde',
  bar: 123,
  baz: true,
  qux: {
   quux: (key: string) => `${key}${key}`
  }
 }
 const result1 = fuga.func(arg1, { value: '0' });
```
とやっても「Iarg1はstringにできない」と言われます。
仕方がないから

```typescript
 const result1 = fuga.func(arg1 as unknown as string, { value: '0' });
```

みたいな気持ち悪いことするとようやくarg1のエラーは消えますが…

`Argument of type '{ value: string; }' is not assignable to parameter of type 'Iarg2[]'`

いやなんで配列側で判定しようとするの？？？

と無限にハマります…(実際はarg1がジェネリクスだったので余計にarg1がおかしいのではと悩み続けた)

# どうすればよかったのか
```typescript
 const fuga = new Fuga();

 const arg1: Iarg1 = {
  foo: 'abcde',
  bar: 123,
  baz: true,
  qux: {
   quux: (key: string) => `${key}${key}`
  }
 };
 const arg2: Iarg2 = {
   value: '0'
 };
 const result1 = fuga.func(arg1, arg2)
```
こうすればarg2を宣言する時点でvalueが違うと怒られるのですぐに気づきます


# まとめ
推論などでサボらずにちゃんと明示的に型を指定しましょう
FPGAを使ってDOSを動かすぞ(手抜き編)

#目的
　ちょっと前に、CNCで作製したプリント基板にFPGAを乗せて、DOSを動作させた。
　この時に、DRAMの設定ミスに気が付かず、半年近く足踏みをしていた。
　その時に、放置プレーになる前に出来る事を確かめたくなったので、別基板を購入。
　◆◆◆　とりあえず、ＦＰＧＡでＤＯＳを動かそう　◆◆◆
　いや、先人がやっているので動く筈なんですけれどもね。

#経緯
　小さくてよさげな基板が有った。
　似たような名前だったので、同じ基板の別名かと思ったら、これが大違い。
　高い方を買ったのだけれども、MAX1000だとDOSは入らなかっただろう。
　　MAX1000 FPGA:MAX10 　8kLE 　3,680円
　　CYC1000 FPGA:Cyclone10 25kLE　4,900円
  ![Image2c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/de843622-5d4a-8217-27e9-be6e2fe994cb.jpeg)

　ソフトはnext186を使ったのだが、なんとCyclone10での構築例が記載されているではないか。
　そうすると、ピン配置を変えるだけで動くかも。
　ハードは、購入した基板に足を付けて、ブレッドボード上でＩＯを付けると。
　動くんですよ、これが。ちと感動。

　ブレッドボード上で動いたので、これを基板化。
　当然、動きました。


#ブレッドボード上で動かす
　CYC1000をブレッドボードに刺し、同様にＩＯを刺すだけ。これだけです。
　ＩＯは基板にしたが、ボード上で配線でもなんら問題ない。
　配線は「[基板]((https://github.com/hi631/FPGA_DOS/tree/master/max1000_eagle))」と同じなので、そちらを参照してね。
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/62417d67-14e1-505c-e907-bbd1239ce79d.jpeg">

#コンパクトな基板で動かす。
　ブレッドボードの配線を、CNCで切削したコンパクトな基板。それだけです。
　[eagleで作製した基板](https://github.com/hi631/FPGA_DOS/tree/master/max1000_eagle)
<img width="400" alt="基板" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/e5b5b6c3-f938-628c-791e-1125b193cebc.jpeg">

#ソフト
　ブレッドボード、基板共に同一ソフトです。
　と言っても、next186のピン配置を変えただけですが。
　[ＦＰＧＡに書き込むソフト](https://github.com/hi631/FPGA_DOS/tree/master/max1000_Next186_SoC)
　[ブートディスクのイメージ](https://github.com/hi631/FPGA_DOS/blob/master/SD2G_Dos_F.zip)


<BR>
---
　なんと、ＩＯを繋ぐだけで動くとは。FPGAの進化を感じてしまう。
　自分で全て作るのとは一寸違うが、この程度までは有りかな。
　こうなると、BGA基板の自作を,,,。無理だろうな。
　なお、もし追試する奇特な方がおられた場合、上記記載内容は無保証であり、各自の責任においてご利用願います。
markdownに貼り付ける画像のサイズ調整方法

# 概要
`Growi`や`Git Wiki`などの記事を`markdown`で記載することは多いです。
ただ、通常どおり`markdown`の記法に倣って画像を貼り付けた場合、サイズの調整が効かないため工夫が必要です。

# 方法

通常、`markdow`では

```markdown
![hogehoge](image_path)
```

のように画像を表現しますが、

```html
<img alt="hogehoge" src="image_path" width="{画像サイズ}">
```

のように`HTML`タグ形式で記載することでサイズ調整ができます。
上記の`{画像サイズ}`の部分には`300px`や`45%`など任意の値を設定します。
[paloalto]参考資料の場所まとめ

ただの覚書

リリースノート
-
◎PAN-OSR Release Notes
https://docs.paloaltonetworks.com/pan-os/8-1/pan-os-release-notes

新機能、仕様変更
 - Features Introduced
 - Review the Changes in Default Behavior


管理者ガイド
-
◎PAN-OSR Administrator’s Guide
https://docs.paloaltonetworks.com/pan-os/8-1/pan-os-admin
◎日本語 ドキュメンテーション　(日本語は時々間違ってるので英語の資料が正)
https://docs.paloaltonetworks.com/translated/japanese.html?filter=LANGUAGE_DFSCD%3A%22Japanese+-+%E6%97%A5%E6%9C%AC%E8%AA%9E%22#sort=relevancy&layout=card&numberOfResults=25

※左の"CURRENT VERSION:"のプルダウン選択で他のバージョンに移動

ナレッジ
-
◎paloalto Live Community
https://live.paloaltonetworks.com/
◎Japan Community
https://live.paloaltonetworks.com/t5/japan-community/ct-p/LiveJP
ブラウザバック周辺の話

# この記事は
ブラウザバック周辺の雑なアウトプットです。
結論とかオチとか無いのであしからず。

# きっかけ
とあるサービスでブラウザバックをしても、画面が遷移しないバグが発生した

# 調査
手がかりの一つとして、バグが発生する状況で発火するメソッドの中に `history.pushState(null, '', null)`という処理があった。

## history
ブラウザのセッション履歴を操作することができるWeb APIのインターフェース

## history.pushState
ブラウザのセッション履歴スタックに状態を追加するもの。

### 第一引数 state

履歴エントリの状態オブジェクト。

### 第二引数 title

ページタイトル。
大体のブラウザで無視されるあまり意味のないプロパティ。

### 第3引数 url

オプション引数。
新しい履歴エントリのURL。

参考：https://developer.mozilla.org/ja/docs/Web/API/History/pushState

## 引数をnullにすると？

自分自身のページをストックする。
その為、ブラウザバックを実行すると `popstate`のイベントが実行される。

参考：http://glasses-se-note.com/disable-return-button/

# つまり？

```javascript
browserBackControl() {
  history.pushState(null, '', null);
}

/** アップロードフラグを監視 */
@Watch('isUploading') watchIsUploading(): void {
  if (this.isUploading) {
    this.browserBackControl();
    window.addEventListener('popstate', this.browserBackControl);
  }
}
```

上記のような処理があった場合、ファイルアップロード中であれば**ブラウザバックできなくなる**。
1. `isUploading`フラグが変更される
2. もし`isUploading`フラグ（ファイルアップロード中フラグ）が立っていれば`watchIsUploading()`が発火
3. `browserBackControl()`を呼ぶ
4. popstateのイベントを呼ぶ
5. popstateのイベントは`browserBackControl()`
6. 3番に戻る