OmniAICreator/Qiita-1.07M huggingface dataset:
AKS Release Note (2021-07-15) 拙訳

AKS (Azure Kubernetes Service) のリリースノートを日本語化してみます。

> [Release 2021-07-15](https://github.com/Azure/AKS/releases/tag/2021-07-15)

-----

本リリースの内容は、パブリッククラウドでは 2021/7/27、[ソブリンクラウド](https://docs.microsoft.com/ja-jp/azure/cognitive-services/speech-service/sovereign-clouds)では2021/7/31 に、全リージョンで有効になります。

# Announcements

* Azure Kubernetes Service (AKS) の Ubuntu 16.04 のイメージは公開を停止する方針。
* ユーザーからのフィードバックや Issues において、過去の Kubernetes バージョンへのパッチでユーザーに難しい対応が求められていた。このため、AKS チームはバージョン 1.18 のすべてのクラスターとノードプールのサポート範囲を限定的に拡大。公表されている非推奨日である 2021/6/30 以降、バージョン 1.18 のクラスターとノードプールに対する通常のサポート範囲外の拡張が認められる。この限定的な拡張の範囲は、「2021/6/30 から 2021/7/31」まで有効で、以下のものに限定されている。
  * バージョン 1.18 のノードプールでの新しいクラスターの作成
  * バージョン 1.18 のクラスターに対する CRUD 操作
  * Kubernetes に関連しないと考えられるプラットフォームの問題。これには Azure 上のネットワークやストレージ、ノードの動作等を含む。なお、Kubernetes に関するパッチ適用やトラブルシューティングに関するサポートリクエストは、サポートされるバージョンへのアップグレードをお願いしている。
* これまでの Pod Security Policy は 2021/6/30 をもって非推奨に。廃止については Kubernetes Upstream との整合性を高めるため、Kubernetes バージョン 1.21 から始まり、バージョン 1.25 で削除される。Kubernetes Upstream がマイルストーンに近づくにつれ、Kubernetes コミュニティは実行可能な代替案を文書化する作業を行う予定。

# Release Notes

## New Features (新機能)

* Kubernetes 1.21 が GA (Generally Available) 。2021/7/19 週に有効になる予定。
* Kubernetes 1.21 以降にて、Azure Disks および Azure Files の Container Storage Interface (CSI) ドライバーが GA。

**※下記の Issue コメントによると、今回の実装は1週間遅れになるようです。**
<https://github.com/Azure/AKS/issues/2175>
> There is a 1 week delay in the deployment schedule due to the Olympics. So we anticipate complete rollout by end of the week of the 26th.

## Bug Fixes (バグフィックス)

* Fix external-dns 0.8.0 for HTTP application routing addon for 1.21+ clusters.

## Behavioral Changes (動作変更)

* AKS のアップグレード中に、中間証明書の更新 (rotate) を実施するようになる。

## Preview Features (プレビュー機能)

* ソブリンクラウドにおける Windows containerd のサポート

## Component Updates (コンポーネントの更新)

* Kubernetes 1.20.0 以降のバージョンのクラスターにおいて、Azuredisk および Azurefile の CSI drivers が v1.4.0 にアップデート。
* omsagent for Windows MDM において、non-sidecar enabled mode では環境変数 `NODE_IP` を 'machine' とする必要がある。
* AKS Ubuntu 18.04 のイメージは [AKSUbuntu-1804-2021.07.10](https://github.com/Azure/AKS/blob/2021-07-15/vhd-notes/aks-ubuntu/AKSUbuntu-1804/2021.07.10.txt) にアップデート。

-----

拙い訳で恐縮です。明らかにおかしい場所などありましたら、ご指摘いただけると嬉しいです！🙇‍♂️
HTML 基礎 Part2

#HTMLの記述

まずはHTMLのバージョンの宣言として<! DOCTYPE html>と宣言しましょう。
その次は&lt;html&gt;&lt;/html&gt;のタグで全体を囲って下さい。
言語が日本語の時は&lt;html&gt;タグの属性でlang="ja"を付けましょう。


そして&lt;html&gt;タグの中身は2つに分かれます。
それは&lt;head&gt;タグと&lt;body&gt;タグです。

&lt;head&gt;はページに関する情報を記述するタグで、
&lt;body&gt;は実際に表示されるタグです。

```HTML
<! DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <meta name="description" content="検索エンジンなどに役立ちます">
 </head>
 <body>

 </body>
</html>
```
・ MacOSの時はoption + 矢印でコードを移動させることができます。
・ tabキーで字下げしますが、shift + tabキーで字下げを戻すことができます。
・ 記号や文字や空白を全角にしないように気をつけて下さい。
・ コメントと言って、画面に表示されないようにする時は
　command + /を使うことによってショートカットできます。

よく使う&lt;head&gt;タグの中身はこちらです。

## meta要素

meta要素で2種類のことで良く使います。
1つが文字コードです。これにより文字化けを防ぎます。
&lt;meta charset="UTF-8">この記述をするようにしましょう。

もう1つが文章の説明です。
&lt;meta name="description" content="内容"&gt;
これは検索結果にも関わるので丁寧に書くようにしましょう。

## titleタグ

&lt;title&gt;&lt;/title&gt;はタブのタイトルや検索エンジン結果にも
使われます。こちらも丁寧に書くようにしましょう。

## headingタグ

&lt;h1&gt;~&lt;h6&gt;まであり、重要度によって変えましょう。

## blockquoteタグ

これは引用の時に使います。
もし出典が分かる時はcite属性を付けて、URLを書きましょう。

## hrタグとbrタグ

hrタグは話題が変わる時に使います。線が入ります。
brタグは改行ができます。

## strongタグ

そして、strongタグは文字を強調します。
残プロ　第-47回　~今週のまとめ~

#　各回のまとめ

[第-41回](https://qiita.com/R1nY1x1/items/568d49df136a89b9c3e6) flask.redirectで外部サイトへのリンクを作成
[第-42回](https://qiita.com/R1nY1x1/items/48a73ecef46a8a257e02) hidden属性のinputに文字列を格納，flask.requestで取得
[第-43回](https://qiita.com/R1nY1x1/items/e94320c310c43bbc3872) カメラで撮ったレジュメを自動補正
[第-44回](https://qiita.com/R1nY1x1/items/f3d4b88759c61a53a313) 論文のPDFファイルを自動リネーム
[第-45回](https://qiita.com/R1nY1x1/items/ca7cbb86b0efedefc5a9) 44回プログラムにGUIセレクターを追加
[第-46回](https://qiita.com/R1nY1x1/items/7c1a7bf8eabd842e407f) 自作プログラムをシンボリックリンクでアクセス性を高める
Excel VBAでIE操作　メモ

会社でツール作成するために必要になったので備忘録として
IEのUI操作して名前を付けて保存(A)の選択とWindowsダイアログ操作の方法
(途中まで)
保存先編集がうまくいかない…

```
Option Explicit

Private Declare PtrSafe Sub Sleep Lib "kernel32" (ByVal ms As Long)
Declare Function FindWindow Lib "User32.dll" Alias "FindWindowA"_
(ByVal lpClassName As String, ByVal lpWindowName As String) As Long
Declare Function FindWindowEx Lib "User32.dll" Alias "FindWindowExA"_
(ByVal hwndParent As Long, ByVal hwndChildAfter As Long, ByVal lpszClass_
As String, ByVal lpszWindow As String) As Long
Private Declare Function SendMessage Lib "User32.dll" Alias "SendMessageA" _
(ByVal hwnd As Long, ByVal Msg As Long, ByVal wParam As Long, ByVal lParam As Any) As Long
Private Const WM_CLICK = &HF5
Private Const WM_SETTEXT = &HC
Private Const WM_LBUTTONDOWN = &H201
Private Const WM_LBUTTONUP = &H202

Sub file_download_kai()
    Dim objIE As InternetExplorer
    Dim objFrame As Object
    Dim link As String
    Dim ie_dl As IUIAutomation
    Dim ie_hdl As IUIAutomationElement
    Dim nui As New CUIAutomation
    Dim dlwd As LongPtr
    Dim fn, hwnd, path As Long
    Dim wsh As Object
    Dim save_path As String

    Set wsh = CreateObject("WScript.Shell")
    save_path = wsh.specialfolders("AllUsersDesktop")
    
    'ダウンロードするファイルのリンク
    link = "*****************************************"
    
    Set objIE = CreateObject("InternetExplorer.Application")
    objIE.Visible = True
    objIE.navigate link
    
    '1.5秒待つ
    Sleep 1500
    
    'IEの名前を付けて保存(A)をクリック
    dlwd = FindWindowEx(0, 0, "#32770", "Internet Explorer")
    If dlwd = 0 Then Exit Sub
    Set ie_hdl = nui.ElementFromHandle(ByVal dlwd)
    
    Dim iCnd As IUIAutomationCondition
    Set iCnd = nui.CreatePropertyCondition(UIA_NamePropertyId, "名前を付けて保存(A)")
    
    Dim Button As IUIAutomationElement
    Set Button = ie_hdl.FindFirst(TreeScope_Subtree, iCnd)
    
    Dim InvokePattern As IUIAutomationInvokePattern
    Set InvokePattern = Button.GetCurrentPattern(UIA_InvokePatternId)
    InvokePattern.Invoke
    
    Sleep 500
    
    hwnd = FindWindow(vbNullString, "名前を付けて保存")
    
    '保存先編集
    path = FindWindowEx(hwnd, 0&, "WorkerW", vbNullString)
    path = FindWindowEx(path, 0&, "ReBarWindow32", vbNullString)
    path = FindWindowEx(path, 0&, "Address Band Root", vbNullString)
    path = FindWindowEx(path, 0&, "msctls_progress32", vbNullString)
    path = FindWindowEx(path, 0&, "Breadcrumb Parent", vbNullString)
    path = FindWindowEx(path, 0&, "ToolbarWindow32", vbNullString)
    Call SendMessage(path, WM_LBUTTONDOWN, 0&, vbNullString)
    Call SendMessage(path, WM_LBUTTONUP, 0&, vbNullString)
    Call SendMessage(path, WM_SETTEXT, 0&, "デスクトップ")
    
    'ファイル名編集
    fn = FindWindowEx(hwnd, 0&, "DUIViewWndClassName", vbNullString)
    fn = FindWindowEx(fn, 0&, "DirectUIHWND", vbNullString)
    fn = FindWindowEx(fn, 0&, "FloatNotifySink", vbNullString)
    fn = FindWindowEx(fn, 0&, "ComboBox", vbNullString)
    fn = FindWindowEx(fn, 0&, "Edit", vbNullString)
    Call SendMessage(fn, WM_SETTEXT, 0&, "test.xlms")      
End Sub

```
【コピペ用】MySQLのCOMMENT構文メモ


クォートが必要だったり不要だったりで覚えられないので、コピペできるように覚え書きです。

#テーブル

最大2048文字のコメントを残すことができる。

```sql:table_sample.sql
-- コメントの作成
CREATE TABLE `t_user_info` (
    `user_id` INT NOT NULL AUTO_INCREMENT,
    `name` VARCHAR(100) NOT NULL,
    PRIMARY KEY (`user_id`)
) COMMENT 'ユーザ情報テーブル';

-- コメントの変更
ALTER TABLE t_user_info COMMENT '変更後のコメント';

-- コメントの確認
SHOW TABLE STATUS LIKE 't_user_info';

-- 出力
+-------------+--------+---------+------------+------+----------------+-------------+-----------------+--------------+-----------+----------------+---------------------+-------------+------------+--------------------+----------+----------------+-----------------------------+
| Name        | Engine | Version | Row_format | Rows | Avg_row_length | Data_length | Max_data_length | Index_length | Data_free | Auto_increment | Create_time         | Update_time | Check_time | Collation          | Checksum | Create_options | Comment                     |
+-------------+--------+---------+------------+------+----------------+-------------+-----------------+--------------+-----------+----------------+---------------------+-------------+------------+--------------------+----------+----------------+-----------------------------+
| t_user_info | InnoDB |      10 | Dynamic    |    0 |              0 |       16384 |               0 |            0 |         0 |              1 | 2021-07-18 22:37:25 | NULL        | NULL       | utf8mb4_unicode_ci |     NULL |                | ユーザ情報テーブル          |
+-------------+--------+---------+------------+------+----------------+-------------+-----------------+--------------+-----------+----------------+---------------------+-------------+------------+--------------------+----------+----------------+-----------------------------+

```
#カラム

最大1024文字のコメントを残すことができる。

```sql:columns_sample.sql
-- コメントの作成
CREATE TABLE `t_user_info` (
    `user_id` INT NOT NULL AUTO_INCREMENT COMMENT 'ユーザーID',
    `name` VARCHAR(100) NOT NULL COMMENT 'ユーザー名',
    PRIMARY KEY (`user_id`)
) COMMENT 'ユーザ情報テーブル';

-- コメントの変更
ALTER TABLE t_user_info MODIFY user_id INT NOT NULL AUTO_INCREMENT COMMENT '変更後のコメント';

-- コメントの確認
SHOW FULL COLUMNS FROM t_user_info;

-- 出力
+---------+--------------+--------------------+------+-----+---------+----------------+---------------------------------+-----------------+
| Field   | Type         | Collation          | Null | Key | Default | Extra          | Privileges                      | Comment         |
+---------+--------------+--------------------+------+-----+---------+----------------+---------------------------------+-----------------+
| user_id | int(11)      | NULL               | NO   | PRI | NULL    | auto_increment | select,insert,update,references | ユーザーID      |
| name    | varchar(100) | utf8mb4_unicode_ci | NO   |     | NULL    |                | select,insert,update,references | ユーザー名      |
+---------+--------------+--------------------+------+-----+---------+----------------+---------------------------------+-----------------+

```

#参考

https://dev.mysql.com/doc/refman/8.0/ja/create-table.html

https://tm.root-n.com/database:mysql:command:alter
Automation 360で昨日の文字列を作る

# はじめに
今日の日付が2021/07/18だったとして、昨日の日付の文字列「2021/07/17」を作るにはどうするか？というメモ。

# やりかた
いろいろやり方はあるけど、以下が一番簡単かな。
![subtractdate.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/01981e71-ae64-c3cb-ecf8-55c920a511bf.jpeg)

#少し詳しく

- 「日時：減算」を使い、現在の時刻から１日引いて、昨日の値を持つ日時変数を作る。
- 「日時：文字列に変換」を使い、日時変数を文字列にする。

![subtractdate_action.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/d083f0f6-6624-a3f7-f208-c0797ace1637.jpeg)

![date2string.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/39ca0c29-8fb8-5a8c-15e7-bf19d452c07a.jpeg)

# さいごに
日付の操作に関してはAutomation Anywhere V11よりかなり楽にいろいろ作れます。
でも、日本語の訳がなんか変で使うときに迷います。
![date_actions.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/9c17b6cc-50e8-be04-e3a7-9888e0b64b8c.jpeg)

- 「追加」と「代入」の違いって何？と迷う。
  （「追加」でなく「加算」にしろよ。「減算」と対なんだから）

- 昨日の日付を求めるのは「指定日より前の日時」と思ってしまう。
  （「指定日より前の日時か？」のように、「か？」を付ければいいのに）
1日の気温の変遷をGoogle Data Portalにグラフ表示

家の各部屋の気温の変遷をポータルで表示できるようにしました。
現在の値はスコアカードで表示 + 気温の変遷も表示できるようにしています。

![portal_8_temp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849198/8c005b01-1344-1e37-32b5-a2be044fe5f2.png)


#### 前提
* Google Data Portalにベースとなるレポートがあること (詳細は以下ページ参照)

https://qiita.com/tosshie/private/bc43114d42e05bc3afcb

* Google SpreadSheet に各部屋の気温がリアルタイムに更新されていること (詳細は以下ページ参照)

https://qiita.com/tosshie/items/0b6a93a8e351cd801321




#### Google Data Portal側の設定
* Google Data Portalを開きベースとなるレポートを表示
* 右上の編集ボタン
* メニューのデータを追加 → Google SpreadSheetから気温データを記録しているシートを選択 → 追加 → レポートに追加
* メニューのリソース → 追加済みのデータソースの管理 → 追加したものの編集ボタンをクリック
* 値を以下のように変更し完了ボタンを押す → 閉じる
    * 気温データ
        * タイプ: 数値
        * デフォルトの集計: なし
    * 日付データ
        * タイプ: 日付、時、分
        * デフォルトの集計: なし
* グラフを追加 → 期間 → 時系列グラフ → 配置
* メニュー（右側に出ているプロパティ的な部分）を変更
    * 指標に気温データを選択（私の場合は5か所分のデータを指定）
        * Record Countは削除
    * ディメンションをdate(日付)からdate(何も書いていないやつ)へ変更
        * できなかった人はこちら↓
            * データソースを一度削除→ディメンション：ディメンションが無効ですにdateをドラックアンドドロップで指定（しても表示は変わらない）→ 再度データソースを指定
        * グラフには行数が多すぎますと表示されています
    * 期間のディメンションへ使用可能な項目からdate(何も書いてないやつ)をドラックアンドドロップ
        * date(日付)が期間のディメンションに表示される
        * グラフには行数が多すぎますと表示されています
    * デフォルトの日付範囲をカスタム指定 → 期間で今日を選択（カレンダーが出てくる画面の右上のところで指定）
        * ここで今日のグラフが出てきます
    * スタイルタブに移動
    * 全般 → 欠落データ → "線を途切れさせる"
    * X軸 → カスタム目盛り間隔を360に指定 (4時間毎のX軸目盛から6時間に変更しています)
    * 背景と枠線 → 背景 → グレーを指定

これで完成！





----

スコアカードでの表示方法はこちらの記事に記載しています

https://qiita.com/tosshie/private/34d348b31df4306db898

----------

2021年3月から始めたスマートホーム化はこちらに一覧化しています（2021年7月時点）

https://qiita.com/tosshie/items/82dcc6405925b12d2fd1
React Hook useEffect has a missing dependency. Either include it or remove the dependency array. のエラーを解消する

```
React Hook useEffect has a missing dependency. 
Either include it or remove the dependency array.
```

React hooks のuseEffectを利用していると
上記のようなエラーがでて解決できたので記録のために残します。

##解決方法

// eslint-disable-next-line react-hooks/exhaustive-deps
をuseEffect内に追加することで解決できました。

```
useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 
```



###実行する関数が、useEffect内のみで利用される場合

useEffect内で呼び出す関数が、useEffectの外にある場合、useEffect内で実行する必要があります。

#####変更前

```
  const setInitialUsers = () => {
      githubContext.setnIitialUser();
    };

  useEffect(() => {
    setInitialUsers();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
```

#####変更後

```
  useEffect(() => {
    const setInitialUsers = () => {
      githubContext.setnIitialUser();
    };
    setInitialUsers();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
```

###実行する関数が、useEffect外でも利用される場合

最初に紹介した
// eslint-disable-next-line react-hooks/exhaustive-deps
を追加して対応しましょう。
Android: ActivityResultContracts.RequestPermission でパーミッションを要求する

ActivityResultContract の仕組みを使って、パーミッションを要求することができます。

https://developer.android.com/training/permissions/requesting?hl=ja#request-permission

## 前提

AndroidX や AndroidX Fragment が導入されている前提です。

## 実装

[RequestPermission](https://developer.android.com/reference/kotlin/androidx/activity/result/contract/ActivityResultContracts.RequestPermission) を使います。

```kotlin
class MyFragment: Fragment() {
    private val requestPermissionLauncher = registerForActivityResult(
        ActivityResultContracts.RequestPermission()
    ) { granted ->
        if (granted) {
            // 権限を取得できた
        } else {
            // 権限を取得できなかった
        }
    }
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val binding = /* ... */
        binding.button.setOnClickListener {
            requestPermissionLauncher.launch(WRITE_EXTERNAL_STORAGE)
        }
    }
// ...
```

## 解説

launch() の引数にパーミッションの種類を渡し、registerForActivityResult の callback でパーミッション取得結果を受け取ります。

# 複数のパーミッションを要求する

[RequestMultiplePermissions](https://developer.android.com/reference/kotlin/androidx/activity/result/contract/ActivityResultContracts.RequestMultiplePermissions) で複数のパーミッションを要求できます。

## 実装

```kotlin
class MyFragment: Fragment() {
    private val requestPermissionLauncher = registerForActivityResult(
        ActivityResultContracts.RequestMultiplePermissions()
    ) { granted ->
        // granted: Map<String, Boolean>
        if (granted[WRITE_EXTERNAL_STORAGE]) {
            // WRITE_EXTERNAL_STORAGE の権限を取得できた
        }
        if (granted[ACCESS_FINE_LOCATION]) {
            // ACCESS_FINE_LOCATION の権限を取得できた
        }
    }
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val binding = /* ... */
        binding.button.setOnClickListener {
            requestPermissionLauncher.launch(
                arrayOf(WRITE_EXTERNAL_STORAGE, ACCESS_FINE_LOCATION)
            )
        }
    }
// ...
```

## 解説

launch() の引数にパーミッションの配列を渡し、registerForActivityResult の callback でパーミッション取得結果を受け取ります。パーミッション取得結果は `Map<String, Boolean>` 形式で、それぞれのパーミッションをキーとして結果が保持されています。
C言語に出てくる用語を超絶要約してみた

#この記事は
C言語に出てくる用語を要約してみました。
正直、自分にしか分からない所も出てくると思います。
そこは、質問していただきたいです。
それでは行ってみましょう！

#用語集
include 借りる

stdio 入出力

stdlib 標準

string.h 文字関

struct 構造体

構造体 変数達

宣言 型変

[ ] 長さ

char 一文字

文字系

typedef 改名

*変数 宣言

% 見た目

アドレス変数 使う

* アドレス変数 宣言

*アドレス変数=〜  値

値渡し 変数を

参照渡し 場所を

char array[] : +1

scanf 入力

scanf第一引数　見た目

scanf第二引数　場所

FILE: 保存場所

FILE *変数：宣言
補足説明：stdio.hにて作成済み

fopen:開く

fclose:閉じる

argc:要素数

argv:引数

EOF:終点

fprint：出力

while:ずっと

fgets:一行（受け皿、制限、保存場所）

Char *hoge[]:先頭場所
補足説明：メモリ上のどこかに文字列がとられ、それぞれの先頭番地がポインタの配列に。


マクロ：定数

マクロ置換：値変換

ポインタ 位置変数

アドレス 位置

型*変数名;  宣言

&変数名 代入（位置）

ポインタ変数 位置

配列の{} 初期化

for 繰り返し

for条件式 最初・制限・増分

*アドレス変数 値

sizeof 机大きさ

配列ポインタ 先頭位置

ポインタのポインタ　位置箱

HDD 大容量

バッファ　一時的

ストリーム　仲介
補足説明：机（メモリ）と収納（ハードディスク）の仲介をする役割

ファイルオープン：仲介作成

ファイル　紙

フォルダ・ディレクトリ　箱

ハードディスク：収納

ハードディスクドライブ：いじる

バイト　8個分

ビット　01

UNIX 昔OS

カーネル　中核

fopen：仲介生成
補足説明：ストリームは、メモリ上に割り当てられる

ファイルポインタ：仲介位置

FILE構造体：仲介情報

静的：元

動的：後

malloc：後確保

ヒープメモリ：仮
補足説明：データの仮置き場や、臨時の作業台のような存在

セグメント：区分

セグメンテーションフォルト：横取り
補足説明：他のアプリ様に確保されたメモリにアクセスすること

strlen:B数

前置：代入先

後置：代入後

do while：条件後

strcmp:比較

const:定数

fseek:読み移動

ftell:読み位置

fscanf:代入

fprintf:紙に

scanfの引数：見た目、皿
【Python】multiprocessingのManagerでEOFErrorが発生した時の対処法

下記コードで動作テストしたらEOFErrorになった。環境はMacOS, Python3.8

```python:test.py
from mutliprocessing import Manager

with Manager() as manager:
    pass
```

```
Traceback (most recent call last):
  File "<string>", line 1, in <module>
  ...
  File "/Users/oooo/opt/anaconda3/lib/python3.8/multiprocessing/spawn.py", line 134, in _check_not_importing_main
    raise RuntimeError('''
RuntimeError: 
        An attempt has been made to start a new process before the
        current process has finished its bootstrapping phase.

        This probably means that you are not using fork to start your
        child processes and you have forgotten to use the proper idiom
        in the main module:

            if __name__ == '__main__':
                freeze_support()
                ...

        The "freeze_support()" line can be omitted if the program
        is not going to be frozen to produce an executable.
Traceback (most recent call last):
  File "test.py", line 7, in <module>
    with Manager() as manager:
    ....
  File "/Users/oooo/opt/anaconda3/lib/python3.8/multiprocessing/connection.py", line 383, in _recv
    raise EOFError
EOFError
```



## 原因

なんのことはなく、ただ`if __name__ == "__main__":`を書いてなかっただけだった。

```python
from mutliprocessing import Manager

if __name__ == "__main__":
    with Manager() as manager:
        pass
```

これですんなりエラーが消えた。ちゃんと使い方理解できてなかっただけだった🙄



## 参考元

[multiprocessing.Manager() + cd leads to EOFError #890 - Github](https://github.com/nedbat/coveragepy/issues/890)
【Go言語】byte型ってなんだ

# byte型
Go言語ではファイルの読み込みの際に以下のように、byte型の配列やスライスを扱っていることがよくあります。


```golang
buf := make([]byte, 64)
for {
        n, err := fp.Read(buf)
        if n == 0 {
            break
        }
        if err != nil {
            panic(err)
        }
    }
```


そもそもbyte型とは何でしょうか。
`byte型`とは`uint8型`の別名です。
uint8型は8bit、つまり1バイト分の表現が可能です。(10進数では 0~255)
分かりやすさの点から、1バイトを単位として処理を行う際にuint8ではなく、byte型を行うという慣習がGo言語ではあると考えられます。

|型|最小値|最大値|
|:-:|:-:|:-:|
|byte (uint8)|0|255|
|uint16|0|65535|


# Go言語とUTF-8
Go言語では、文字型はUTF-8の文字列として扱われます。
UTF-8では、アルファベットは1バイトで表現可能です。

|アルファベット|UTF-8 文字コード (16進数)|UTF-8 文字コード (10進数)|
|:-:|:-:|:-:|
|a|61|97|
|b|62|98|
|c|63|99|

また、ひらがなでは3バイトが必要になります。

|ひらがな|UTF-8 文字コード (16進数)|UTF-8 文字コード (10進数)|
|:-:|:-:|:-:|
|あ|E3 81 82|227 129 130|
|い|E3 81 84|227 129 132|
|う|E3 81 86|227 129 134|


# string型を[ ]byte型に変換する
string型の文字列を `[]byte`で囲むことで
string型を[ ]byte型に変換することが可能です。

aという文字がbyte型では
10進数の文字コードで出力されていることが分かります。

```golang
func main() {
	fmt.Println([]byte("abc")) // 出力: [97 98 99]
}
```

このように、文字列を扱う場合、1バイトを単位としていることが分かります。
そのため、文字列を扱った処理を行う際に、byte型を用いるということが多くなっています。

ひらがなは3バイトを必要としていることも分かります。

```golang
func main() {
	fmt.Println([]byte("あ")) // 出力: [227 129 130]
}
```

# [ ]byte型をstring型に変換する
先程とは逆で、
[]byte型のスライスや配列を `string`で囲むことで
string型を[ ]byte型に変換することが可能です。

```golang
func main() {
	byteslice_abc := []byte{97, 98, 99}
	fmt.Println(string(byteslice_abc)) // 出力: abc

	byteslice_あ := []byte{227, 129, 130}
	fmt.Println(string(byteslice_あ)) // 出力: あ
}
```

(余談ですが、Go言語で変数名にひらがなを用いることができます。)
Amazon Linux によるSSL化について

下記内容でssl化するために実践しました。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/SSL-on-amazon-linux-ami.html


https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/SSL-on-amazon-linux-2.html#ssl_test

現状の問題としては、Apacheの再起動ができないため、
```
apachectl configtest
```
コマンドを行うと、下記のエラーが出ます。

```
SSLCertificateFile: file 
'/etc/letsencrypt/live/my-aws-infra.work/fullchain.pem' 
does not exist or is empty
```
SSL化を行うサイトへは、先頭https://でドメインを入力すると、このように証明書は有効にはなっていますが、
Apacheがうまく起動していないため、```
503 Service Temporarily Unavailable
```
とページに表示されています。
![スクリーンショット 2021-07-18 21.32.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1114666/628e1c5f-5c8b-5ba7-b755-6ff989df9a19.png)



ちなみに、下記についてはどちらかを生かすときは片方はコメントアウトする必要ありますか？
```
SSLCertificateFile /etc/pki/tls/certs/localhost.crt
SSLCertificateKeyFile /etc/pki/tls/private/custum.key
```

申し訳ありませんが、解決策を教えていただけないでしょうか。
よろしくお願い致します。
【備忘録】Pandasのto_csv()で文字化けしたCSVを吐いてしまう

#問題

久しぶりに，PandasでCSVを出力させたら，文字化けしてしまいました．

手順としては，以下のようなことをしていました．

CSV(UTF-8) -> Pandasで処理 -> UTF-8で出力

文字コードがあっているはずなのに，文字化けしてしまいました．

#解決方法

```
df.to_csv('output.csv',encoding='utf-8_sig')
```

出力する際に，```utf-8```ではなく，```utf-8_sig```で出力したら文字化けしなくなりました．
[JSTQB AL TM]　2. テストマネジメント　を視覚的にまとめてみた（3/4）

# はじめに
2021年8月のJSTQB　Advanced Level Test Manager(TM)の試験を受験予定のMa5am1nです。
[シラバス](http://jstqb.jp/dl/JSTQB-Syllabus.Advanced_TM_Version2012.J04.pdf)[^1]を読んでいるのですが、どうも文字が多くて頭に入りにくいので、図など視覚的に入ってきやすそうな形式でまとめてみます。

[^1]: 2012年度版 Advanced Level シラバス　日本語版　-テストマネージャ
**※あくまで私個人の解釈で作成したものです。内容が100%シラバスの通りであることは保証できませんので、ご了承ください。**
**※スライドの青文字、青線になっている箇所は、シラバスに記載されていない、私独自の解釈で記載した内容です。**

このページでは、2. テストマネジメントについて扱います。
内容が多いので4回に分けています。


# 2.テストマネジメント
## 2.4 テストドキュメントとその他の成果物
![JSTQB AL TM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/6ffa9775-3869-2173-6c14-ca561b82f47c.png)


### 2.4.1 テストポリシー
![JSTQB AL TM (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/c06569c9-cccf-1d81-e25c-47945f99f5c7.png)


### 2.4.2 テスト戦略
![JSTQB AL TM (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/ca95668a-9fc8-d374-709c-836300e6bed8.png)
![JSTQB AL TM (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/92444393-d10d-c2a4-e4a5-cab6a78e4f88.png)
![JSTQB AL TM (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/c24fc47f-3cc8-26c5-75a2-08ced39ace8b.png)

### 2.4.3 マスターテスト計画
![JSTQB AL TM (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/5d5a1311-13d6-9311-6a11-67e8c4d2a777.png)
![JSTQB AL TM (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/b23f195c-77ac-6fb3-80f9-c89a78a28018.png)


### 2.4.4 レベルテスト計画
![JSTQB AL TM (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/22f33748-be70-6135-729d-56448d5b55c9.png)


### 2.4.5 プロジェクトリスクマネジメント
![JSTQB AL TM (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/8e5e9183-a6e5-80e7-bf7c-a062e34d8049.png)
![JSTQB AL TM (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/36bab517-1956-e1cb-3d8a-a5906a816ca9.png)
![JSTQB AL TM (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/c01c8a49-8dcd-a534-0fd2-d52e9808d360.png)


### 2.4.6 その他のテスト成果物
![JSTQB AL TM (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/87320573-1342-46e7-c17d-fd99f609fd57.png)
![JSTQB AL TM (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/086f083a-bc46-e376-d5ce-3a3c3462d5dc.png)
HTML CSS 基礎 Part1

#HTMLとは

HTMlとはコンピュータに文書の意味を伝えるための言語です。

```HTML
<h1>こんにちは。</h1>
```
このように最初のh1を開始タグと呼び、次の/h1を終了タグと呼びます。
中身をコンテンツと言い、それらをまとめて要素と言います。
この要素を作ることをmarkupすると言います。
HTMLはHyper Text Markup Languageの略で、
Hyper Textは画像やリンクを埋め込むことができるテキストで
それをmarkupする言語をHTMLと言います。
h1はheading1で見出しで使うコードです。
ちなみにpはparagraphの略で段落を表します。

また、タグにはimgのように終了タグがないモノもあります。
imgタグは

```HTML
<img src="画像名" alt="">
```
このように使います。srcには画像のファイル名を記述し、altは何らかで画像が表示され
ない時に説明として使われます。
srcはsourceの略で、srcやaltを属性と言います。

#CSSとは

CSSはHTMLを装飾する言語です。
例えば、写真を丸くするCSSはborder-radiusですが、
imgはセレクタと言い、border-radiusをプロパティ、50%を値を言います。
書きながら覚えていきましょう。書き方ですが、{}で囲って、
プロパティの後はコロン、値の後はセミコロンを付けるようにしましょう。

img {
 border-radius: 50%;
}
Herokuのサブディレクトリをデプロイする方法まとめ

個人の Web サービス開発でモノレポ構成のアプリのサブディレクトリを Heroku にデプロイするため、どのような方法があるのかを調べましたのでまとめます。

## 前提

root のディレクトリから API とフロントをサブディレクトリに分けて開発しており、 API(Rails製) 用のサブディレクトリをデプロイします。

ディレクトリ構成は下記の通りです。

```bash
$ tree -L 2
.
├── README.md
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── Rakefile
│   ├── app
│   ├── bin
│   ├── config
│   ├── config.ru
│   ├── db
│   ├── heroku.yml
│   ├── lib
│   ├── log
│   ├── public
│   ├── storage
│   ├── tmp
│   └── vendor
├── docker-compose.yml
├── front
│   ├── Dockerfile
│   ├── README.md
│   ├── components
│   ├── node_modules
│   ├── nuxt.config.js
│   ├── package.json
│   ├── pages
│   ├── plugins
│   ├── static
│   ├── store
│   ├── tsconfig.json
│   └── yarn.lock
└── netlify.toml
```

なお、`api/` には `heroku.yml` というファイルがあります。 このファイルを利用して、Docker イメージをビルドしデプロイしています。
[heroku.yml を使用して Docker イメージをビルドする | Heroku Dev Center](https://devcenter.heroku.com/ja/articles/build-docker-images-heroku-yml)

## 1. ビルドパックを使う

- 👍 ソースコードの追加不要で GitHub のリポジトリと連携し自動デプロイができる

調べた中では一番ノーコードで実現できるため良さそうでしたが、`heroku.yml` を利用した Docker イメージのデプロイは対応しておらず断念。

参考: [Deploy to Heroku / GitHub Actions](https://github.com/marketplace/actions/deploy-to-heroku)

## 2. GitHub Actionsを使う

- 👍 GitHubと連携できるので Git の秘匿情報を隠蔽できる
- 👎 Herokuの秘匿情報は[GitHub Secrets](https://docs.github.com/ja/actions/reference/encrypted-secrets)で管理するので少し手間

`heroku.yml` を利用した Docker イメージのデプロイが成功し、この方法を採用。

参考: [GitHub - timanovsky/subdir-heroku-buildpack](https://github.com/timanovsky/subdir-heroku-buildpack)

## 3. git subtreeコマンドを使う


- 👍 ローカルのターミナルや GitHub、CircleCI どこからでも実行でき汎用性が高い
- 👎 Git や Heroku の秘匿情報の管理が手間

参考: [git - Automated heroku deploy from subfolder - Stack Overflow](https://stackoverflow.com/questions/39197334/automated-heroku-deploy-from-subfolder)


## 補足) Netlifyにサブディレクトリをデプロイする方法

今回は、フロントエンド用(Nuxt.js製) の`front/`ディレクトリを Netlify にデプロイしました。
こちらは ドキュメントが整備されており、 root のディレクトリに `netlify.toml` ファイルを配置し、サブディレクトリを定義することで簡単に実現できました。

参考: [File-based configuration | Netlify Docs](https://docs.netlify.com/configure-builds/file-based-configuration/)
VSCodeのTerminalをGitBashに変更する方法

WindowsのVSCodeで作業する時，コマンドプロンプトでなくBashを使いたかったので設定。

1. 「ファイル」-「ユーザ設定」-「設定」で設定画面を開く。
1. 「設定の検索」に shell くらいを入力
1. "Terminal > Integrated > Default Profile: Windows"を探す。
1. そこでGitBashを選択。

GitBashのパスは，`C:\Program Files\Git\bin\bash.exe`
【Rails】投稿数を日付別に表示する方法とテーブルボードの作り方

####My Profile
プログラミング学習歴②ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　



#対象者

* 数を数えて表示する方法が知りたい方
* 表の作り方を知りたい方


#目的

* 昨日と前日、前日比の情報をviewに表示する！

#実際の手順と実例
###1.準備と前提
◎前提として

* 本の投稿をするアプリを作成中で何回投稿したかをユーザーの詳細画面に表示します
* UserとBookは1:Nの関係
* モデル、コントローラー、ビューの３つに記述していきます。


###2.Model
本の投稿数を数えるので**Book.rb**に入力していきます。

`````book.rb
scope :created_today, -> { where(created_at: Time.zone.now.all_day) } # 今日
scope :created_yesterday, -> { where(created_at: 1.day.ago.all_day) } # 前日
````
【解説】
モデルのスコープ機能を使います

```
scope :スコープの名前, -> { 条件式 }
```

今回でいうと、created_todayとcreated_yesterdayがスコープの名前に該当します。
また、**Time.zone.now.all_day**で１日を表します。
1.day.agoで昨日を表します。

###3.Controller

userのshow.html.erbに乗せていくので**UsersController**に入力していきます。

````users_controller.rb
def show
    @user = User.find(params[:id])
    @books = @user.books
    @today_book = @books.created_today
    @yesterday_book = @books.created_yesterday
end
```
【解説】
下から２つのインスタンス変数に注目。
モデルで定めたスコープの名前をここで使用しています。

###4.View

bootstrapを使用しているためtableタグを使います

```user/show.html.erb
  <div class = "table_width">
   <table class="table table-bordered">
    <thead>
     <tr>
      <th>今日の投稿数</th>
      <th>前日の投稿数</th>
      <th>前日比</th>
     </tr>
    </thead>
    <tbody>
     <tr>
     　<td><%= @today_book.count %></td>
     　<td><%= @yesterday_book.count %></td>
     　<td>
       <% if @yesterday_book.count == 0 %>
        前日の投稿はありません
       <% else %>
       　<% @the_day_before =   @today_book.count / @yesterday_book.count.to_f  %>
       　<%= (@the_day_before * 100).round %>
       <% end %>
      </td>
     </tr>
    </tbody>
   </table>
  </div>
```
【解説】
昨日と今日の投稿。数はcountメソッドを使って表示しています。
if文を使って条件分岐し、前日比　=　昨日の投稿数÷前日の投稿数を定義しています。
また、**to_fメソッド**はオブジェクトの少数点までの数値も表示してくれるメソッドです。


###おまけ

```
<div class = "table_width">
 　<table class="table table-bordered">

 </table>
</div>
````
bootstrap導入していれば？？これでスプレッドシートのような表作れる


#参照

>[【Rails】 モデルのスコープ機能(scope)の使い方を１から理解する](https://pikawaka.com/rails/scope) 
>[【知らずに損した】ActiveSupportの期間指定メソッドall_day, all_week, all_month, all_year](https://qiita.com/terufumi1122/items/3aa21c20eeacbce33b93)
>[【入門者向け】Webデザインの知識がなくてもOK！Bootstrapの使い方](https://techacademy.jp/magazine/6270)
>[【Rails】 世界で一番分りやすく詳しいcountメソッドの使い方](https://pikawaka.com/rails/count)
>[【初心者向け】Rubyのto_fメソッドの使い方を現役エンジニアが解説](https://techacademy.jp/magazine/19921)
[Rails] HerokuデプロイしたアプリにBasic認証を導入する

##はじめに
ローカル環境でBasic認証はできたけど、本番環境でのBasic認証はどうするのかを説明しています。
よろしくお願いします。

こちらの記事の続きだと思っていただけたらOKです。↓

https://qiita.com/minhee/items/39b6380ff60743fd4a94

なので上記の方法でBasic認証はローカル環境で実装済みというところから始めさせていただきます。

##Heroku上で環境変数を設定
ローカル環境と同じで、Herokuでも同じように環境変数を設定してあげます。

下記のコマンドを実行します。

```terminal:ターミナル
% heroku config:set BASIC_AUTH_USER="admin"
% heroku config:set BASIC_AUTH_PASSWORD="2222"
```

設定できたら```heroku config ```でちゃんと設定できているか確認できます。

確認できて問題なかったらHerokuへプッシュします。↓

```terminal:ターミナル
% git add .
% git commit -m "Basic認証を導入"
% git push heroku master
```

これで本番環境でもBasic認証が導入できているはずです。
updateメソッドの使い方

##はじめに
この記事はrails初学者が勉強のアウトプットとして書いた記事です。
自分なりに調べて書いたものですが、初心者ゆえに間違っている箇所もあるかと思います。
その場合はご指摘いただけると嬉しいです。

##updateメソッドとは？
すでにテーブルに保存されているデータを新しいデータに更新するメソッド。
railsには他にも更新するメソッドはあるが、
安全面上、基本的にはupdateメソッドを使ったほうがいい。

##何で安全なの？
更新の際に、バリデーションとコールバックが適用されるため。

##基本的な使い方
```
@user = User.find(1) 　#①変数に更新したいレコードの情報を入れる
@user.update( name: "Taro", age: 20 )  #②updateメソッドで更新する
```
①変数に更新したいレコードの情報を代入し、②updateメソッドで更新します。
updateメソッドの引数には更新したい値をハッシュ形式で記述します。


##実際の実装での、updateメソッドの使い方
更新したい値をハッシュ形式で入れるのではなく、
ストロングパラメータを使用してデータを更新することの方が多い。
（使用した方が安全に情報を更新できるため）

```
class UserController < ApplicationController

  def update
    @user = User.find(params[:id]) 　#①変数に更新したいレコード情報を代入
    @user.update(user_params) 　#②updateメソッドを実行する
  end

  private　　
　　＃③ストロングパラメータを使って、指定したカラムの情報だけを受け取るようにする。
     def user_params　　
      params.require(:user).permit(:name, :age)　
     end
end
```


##参考にさせていただいた記事

https://koheinishino.com/summary-of-the-rails-update-method

https://pikawaka.com/rails/update
ETWSについての備忘録

# ETWSの仕様についての備忘録
## 経緯
業務アプリ開発でETWSを扱う機会があったのですが、そもそもよく知らない and 軽くググったくらいだと仕様についてまとまった日本語資料が見つけられなかくて苦労したので、同じような境遇の方と将来の自分のために記事にしておくことにしました。
長くなりそうなので、随時追記していく予定です。

### 結論
アプリからでは直接ETWSを扱うことはできなさそうです。。。
ハードベンダに、APIを用意してもらえればワンちゃん🐕あります。

## 注意
- 仕様が改定されて、情報が古くなっている可能性があります。
- 3Gと4G、5Gでは仕組みが若干異なるようですが、ここでは主に4G以降用の仕様について述べています。

## ETWSとは
通信キャリアからモバイル端末に届く緊急地震速報のこと。

Earthquake and Tsunami Warning Systemの略で
[3GPP](https://www.3gpp.org/)が策定した標準仕様「Cell Broadcast Service(CBS)」を元に策定された、自然災害や武力衝突、大規模事故などの警報システムのこと。
ETWSの仕様はNTTドコモの技術をベースに仕様が策定された。

国際仕様として策定されたので、海外においても受信可能なようです。

## ETWSの概要
ETWS配信メッセージは２つにわかれている。

1. 第一通知(Primary Notification)
1. 第二通知(Secondary Notification)

第一通知は最短4秒で配信するため、少ない情報(地震、津波などのパターン)しか送れない。
第二通知は第一通知の補足情報(ある程度の長さの文章)を含めることができる。

## デバイスに届くまでの仕組み
基本的には元となったCBS(エリアメールの仕組み)と同様であるようだが、
最速で配信させるためにNTTドコモが開発したアーキテクチャを採用しているみたいです。

第一通知、第二通知で配信方法は同様です。

![スクリーンショット 2021-07-18 20.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122847/93aadd67-21a4-b463-7ca3-c2e73e466d08.png)
![スクリーンショット 2021-07-18 20.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122847/bee17efb-afe3-c597-8c6f-643d39ed5ac1.png)
ETWSのネットワーク構成[^1]

3Gと4Gで配信方式が異なるので、情報配信からデバイスに届くまで
3Gでは最短9秒、4Gでは最短4秒となるようです。

| 略語 | 名称 | 役割 | 概要 |
|---|---|---|---|
| CBE | Cell Broadcast Entity | 情報配信元 | 気象庁などのシステム |
| CBC | Cell Broadcast Center | 同法配信装置 | メッセージ作成と配信先の決定 |
| MME | Mobility Management Entity | 移動管理装置 | eNBへの信号発信とCBCへの返答発信 |
| eNB | eNodeB | 無線基地局 | 信号を電波に変換し発信 |
| TA | Tracking Area | LTEの位置登録エリア | デバイスが通信可能なエリア |
| EA | Emergency Area | 自由に定義するエリア | キャリア独自に定義するエリア |



## デバイスに届く内容
第一通知と第二通知で特定の領域のバイナリを使用することで区別することができます。

- 第一通知はSIB10と呼ばれる領域を使用する。
- 第二通知はSIB11と呼ばれる領域を使用する。

デバイスは上記の領域の有無でETWSかそれ意外かを判断し、
ブザー鳴動やメッセージ表示を行う。

### SIB10
System Information Block Type10の略[^2]
--執筆中--

### SIB11
System Information Block Type11の略[^3]
--執筆中--


## アプリでETWSを扱うには？？？
--執筆予定--

## 参考リンク

[^1]: [NTTDocomo 次世代移動通信ネットワークにおける緊急情報の同報配信高度化.pdf](https://www.nttdocomo.co.jp/binary/pdf/corporate/technology/rd/technical_journal/bn/vol17_3/vol17_3_021jp.pdf)
[^2]: 3GPPの仕様書リンク載せる予定
[^3]: 3GPPの仕様書リンク載せる予定
vue.config.js設定ファイルについて

vue-cliの`vue create hello-project` などで作成したvueプロジェクトの設定内容（もともとwebpackで書いていた内容）がvueによって隠されるので、設定を確認したい場合は`vue inspect > output.js`で適当なファイルに出力して確認すれば良く、カスタマイズしたい場合はvue.config.jsを作って中身を編集していくことになる。

vue.config.jsの設定の詳細はhttps://cli.vuejs.org/config/#vue-config-js

##デフォルト設定の確認
vue-cliのデフォルトの設定は、`vue inspect > output.js`で確認できる。おおよそ1300行ぐらいのファイルが出力される。
デフォルト設定項目がいろいろ出力されますが、わかりやすい項目として最後の方にappのエントリーポイントにsrc/main.jsが設定されていることが確認できる。これによって、`npm run server`でappを実行した時には、Vueが自動でsrcの下のmain.jsを探していくことになる。もしmain.jsをindex.jsに名前を変えてしまっていた場合はエラーになってしまう。
このoutput.jsはただの確認だけなので、output.jsの項目を変更しても設定を変更することはできない。
仮に、main.jsが嫌で、index.jsをエントリーポイントにしたい場合はvue.config.jsを作成して、vueのデフォルト設定を上書きする。

```output.js
(・・・・省略・・・・)
    /* config.plugin('html') */
    new HtmlWebpackPlugin(
      {
        title: 'vue_calender_app',
        templateParameters: function () { /* omitted long function */ },
        template: '/Users/abc/workspace/vue_calender_app/node_modules/@vue/cli-service/lib/config/index-default.html'
      }
    ),
    /* config.plugin('preload') */
    new PreloadPlugin(
      {
        rel: 'preload',
        include: 'initial',
        fileBlacklist: [
          /\.map$/,
          /hot-update\.js$/
        ]
      }
    ),
    /* config.plugin('prefetch') */
    new PreloadPlugin(
      {
        rel: 'prefetch',
        include: 'asyncChunks'
      }
    )
  ],
  entry: {
    app: [
      './src/main.js'
    ]
  }
}



```
##設定の変更
デフォルトの設定を変更するには、package.jsonと同じレベルでvue.config.jsという名前のファイルを作成し、変更内容をその中に書いていく。変更できる項目の詳細はhttps://cli.vuejs.org/config/#vue-config-js
例えば、エントリーポイントをmain.jsからindex.jsに変更したい場合は、以下のようにvue.config.jsを記述する

```vue.config.js
module.exports = {
  pages: {
    index: {
      // エントリーポイント
      entry: 'src/index.js',
    },
  }
}

```

さらに、vueのデフォルトでファイルを保存したときにlintが動くので、それを無効化したい場合もこのように書ける。
参考URL:https://cli.vuejs.org/config/#lintonsave

```vue.config.js
module.exports = {
  pages: {
    index: {
      // エントリーポイント
      entry: 'src/index.js',
    },
  },
  lintOnSave:false //←追記
}

```

##まとめ
1. `vue inspect > output.js`でvue-cliのデフォルト設定を確認できる
1. `vue.config.js`ファイルでデフォルト設定をカスタマイズできる。詳細はhttps://cli.vuejs.org/config/#vue-config-js
ターミナル/シェルでの効率的なカーソル移動/文字の削除

傍で人のターミナルの操作を見ていて, なんともいえない気持ちになることがあります.

```
ubuntu@b215f2bf0b47:~$ echo hello world
                                       ^ <- カーソル位置
```

「入力コマンド間違えた. 消そう (Back Spaceキー押しっぱなしでしばし待機……)」
あるいは
「あっ, コマンドの実行時間を測定しないといけないから, 先頭に time 加えよう. カーソル位置を先頭へ移動 (左矢印キー押しっぱなしで待機……)」

それもっと簡単にできます.

# ターミナル/シェルにおけるカーソル移動と削除

* 削除系
    * `Ctrl+u` **カーソル位置から行頭まで削除 (重要)**
    * `Ctrl+w` **カーソル位置から後側にある一単語分を削除 (重要)**
    * `Ctrl+d` カーソル位置の後ろにある文字を削除 (Back Space キー相当)
    * `Ctrl+h` カーソル位置にある文字を削除 (Delete キー相当)
* 移動
    * `Ctrl+a` **カーソル位置を行頭へ移動 (重要)**
    * `Ctrl+e` **カーソル位置を行末へ移動 (重要)**
    * `Ctrl+[`, `b` カーソル位置を後ろ方向へ一単語分 移動
    * `Ctrl+[`, `f` カーソル位置を前方向へ一単語分 移動
    * `Ctrl+b` カーソル位置を後ろ方向へ一文字分 移動 (左矢印キー相当)
    * `Ctrl+f` カーソル位置を前方向へ一文字分 移動 (右矢印キー相当)

「重要」したものは, 作業効率に大きく直結します.
それ以外のものも, 一般的な配列のキーボードを使っている限り, キーボードのホームポジションを保てる点でより効率的です.

この操作方法は特定のソフトウェアのキーボード・ショートカットというわけではなく,
ターミナル内で動くソフトウェアでほぼ普遍的に使えるものです.

覚えて周りと差をつけよう.

# 補足 `Ctrl+[` について

カーソル位置を一単語分だけ手前に移動する場合は, `Ctrl+[`, `b` を入力します.
どういう意味? こういうことです.

1. Ctrlキーを押しながら `[` を押す
1. `b` を押す

`Ctrl+[` を代替する方法はいくつかあります.

* `Esc`, `b`
* `alt+b` (Windows)
* `option+b` (macos)

Escキーと `Ctrl+[` はターミナルのなかでは同じコードが送信されます.
`alt+b` や `option+b` は一見すると使いやすいように感じます.

キーボードのホームポジションを崩しづらいのは, `Ctrl+[` を使うことです.
作業環境の変化 (Windows, macos, キー配列) に強いのもこっちです.

連続したキー入力を識別する操作は他にもあったりします.

 * dockerコンテナのなかからデタッチしたいときに `Ctrl+p`, `Ctrl+q`
 * systemd-nspawn を終了したいときに `Ctrl+]`, `Ctrl+]`, `Ctrl+]`
 * tmuxのプリフィクスキー


# 補足 Control (Ctrl) キーは「a」キーの左が良い

Ctrlキーの位置って, キーボードによって変わることがあります.
Windows向けノートパソコンだとそれが顕著かなと思います.

Ctrlキーは「a」キーの横 (日本語向けキーボードの場合はたいてい Caps Lockキーがある) に配置したほうが, ほとんどのケースで入力効率が高いです.

キー配列を入れ替える手段はたくさんあります.
Spannableを使ったTextViewでEllipsizeを実現する

デフォルトのTextViewはSpannableを使うとEllipsizeがきかなくなるので、TextViewを継承して以下のような子クラスを作ってあげる。
(android:ellipsize="end"かつandroid:maxLinesを設定していないとき相当)


```kotlin
/**
 * SpannableStringを使用していてもEllipsize==Endの挙動をするTextView
 *
 * 参考 : https://www.programmersought.com/article/20037202696/
 */
class SpannableEllipsizeTextView : androidx.appcompat.widget.AppCompatTextView {


    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    /**
     * Note: when spannableString sets the Spannable object to spannableString, use the flag value of Spannable.SPAN_EXCLUSIVE_EXCLUSIVE, otherwise the subsequent concatenated string may not be displayed
     */
    override fun onDraw(canvas: Canvas?) {
        var lineIndex = 0

        while (lineIndex < lineCount) {
            val charSequence = text
            val bottom = layout.getLineBottom(lineIndex)
            if (bottom > measuredHeight) {
                // もし、途中で見切れるor完全に隠れる行があったら、その直前の行に…を追加して以降は切る。
                val lastCharDown = layout.getLineStart(lineIndex) - 1 // 前の行の最後の文字の文全体でのindex。0始まり。
                val spannableStringBuilder = SpannableStringBuilder()
                spannableStringBuilder.append(charSequence.subSequence(0, lastCharDown + 1)).append("...")
                if (charSequence is Spannable) {
                    // ...の部分も色などを整える
                    // 直前の文字に揃える
                    // XXX この部分は、使用されている可能性があるものに合わせてください。
                    // 今回はForegroundColorSpanとRelativeSizeSpanが使用されている可能性があると想定しています。
                    val spanColor = charSequence.getSpans<ForegroundColorSpan>(lastCharDown, lastCharDown + 1)
                    val spanSize = charSequence.getSpans<RelativeSizeSpan>(lastCharDown, lastCharDown + 1)
                    if (spanColor.size > 0) {
                        spannableStringBuilder.setSpan(ForegroundColorSpan(spanColor[0].foregroundColor), // XXX 新しいインスタンスにしないと、元々かかっていた部分がspanがかからなくなってしまうので注意。
                                lastCharDown,
                                lastCharDown + 3,
                                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
                    }
                    if (spanSize.size > 0) {
                        spannableStringBuilder.setSpan(RelativeSizeSpan(spanSize[0].sizeChange),
                                lastCharDown,
                                lastCharDown + 3,
                                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
                    }
                }
                text = spannableStringBuilder
                break
            }
            lineIndex++
        }

        super.onDraw(canvas)
    }
}
```

# 参考
https://www.programmersought.com/article/20037202696/
Obnizを使ってスマートリモコンを自作

##はじめに
暑い夏が来ました。
外から帰宅したら涼しい自宅がいいですよね。

ってことでスマートリモコンを作ってみました。


本記事は下記サイトを参考に作成しています。
少しアレンジが必要だったので共有いたします。

https://blog.obniz.com/make/remote-air-conditioner-controller


##用意するもの
- [obniz Board](https://obniz.com/ja/products/obnizboard)
- [obniz IRModule](https://obniz.myshopify.com/products/ir-module-cbr-ir002?lang=ja)
 - [Amazon](https://www.amazon.co.jp/Infrared-Transmit-Receive-Module-obniz/dp/B082KQ61BY)でも販売しています。
- [温度センサー](https://obniz.com/ja/doc/guides/obniz-starter-kit/use-parts/temp)（必須ではありません）
- テキストエディタ（VSCodeで説明します）
- Vercelのアカウント（デプロイするのに使用します）
 - 初めて使う方は下記Qiitaを参照してみてください。
 - **爆速!Vercelでデプロイ**までで結構です。

https://qiita.com/n0bisuke/items/901154531ea14f978bd4
 

今回は下の写真のように配線しました。
![obniz.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/14f356c4-f8c5-5f68-7975-7190b0b274ef.jpeg)

##コード準備
1. デスクトップに任意のフォルダを作成します。
1.  VSCodeでそのフォルダを開きます。
1.  任意の名前をつけ、拡張子.htmlで空のファイルを保存します。
1.  名前をつけた空のファイルに下記コードを貼り付け、25行目あたりにある`OBNIZ_ID_HERE`に自分の**obniz id**を入力します。

```HTML
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.16.0/obniz.js"></script>
</head>

<body>

    <div id="obniz-debug"></div>

    <h1 id="temp">Measuring...</h1>

    <p>
        <button id="on" class="btn btn-primary btn-block">Turn ON</button>
    </p>
    <p>
        <button id="off" class="btn btn-primary btn-block">Turn OFF</button>
    </p>

    <script>

        var obniz = new Obniz("OBNIZ_ID_HERE");

        obniz.onconnect = async function () {
            //赤外線モジュール
            var module = obniz.wired("IRModule", { vcc: 0, send: 1, recv: 2, gnd: 3 });
            $("#on").click(async function () {
                module.send();//()内に取得した赤外線配列をコピペ①
            });

            $("#off").click(async function () {
                module.send();//()内に取得した赤外線配列をコピペ②
            })


            //温度管理
            var tempsens = obniz.wired("Keyestudio_TemperatureSensor", { signal: 9, vcc: 10, gnd: 11 });
            tempsens.onchange = function (temp) {
                $("#temp").text('' + parseInt(temp) + ' ℃');
            };
        }
    </script>
</body>

</html>
```
##赤外線設定
1. [こちら](https://obniz.io/ja/sdk/parts/IRModule/README.md#:~:text=start(callback(array)))の**start(callback(array))**の項目に自身の**obniz id**を入力し、実行します。
1.  obniz IRModuleに向かって赤外線を取得したいリモコンのボタンを押します。
1.  出力結果にとんでも無く長い配列が返ってくるので、それをコピーします。（更新日時がコピーされてしまうことがあるので**注意**してください。）
1.  コピーした配列を31行目あたりの`module.send();`の引数に入力します。
1.  今回は「on」「off」を想定し２種類用意していますが、自分の作りたいものに応じて適宜コード変更してください。（コード冒頭でBootstrapとjQueryというものをプラグインしています。）

##テストとデプロイ
1. VSCodeの任意フォルダのタブをブラウザのタブにドラッグすると、画面が表示されるのでボタンを押して正確に動作するかどうかテストしてください。
1. 正しいコーディングができていても、リモコンの種類によっては動作しないので、その場合は読み取る赤外線を変更してみてください。（私はHITACHIのエアコンが起動しませんでした...）
1. 無事にテストが終了したら、VSCodeでターミナルを開き、`Vercel`と入力してデプロイすれば終了です。

##おわりに
いかがだったでしょうか。
少し分かりにくい箇所や端折った箇所もありますがご了承ください。
HITACHIのエアコンが起動できたら、また記事を更新いたします。

**参考記事**
https://obniz.io/ja/explore/30
【react-router-dom】ページ遷移させるときに使うuseHistoryをざっくり紹介【React】

<h2>useHistory</h2>
ReactでSPA開発をする際に、eact-router-domでルーティングを設定する場合があると思います。

その際に、Linkだけでなく、ボタンをクリック時の諸々の処理後で画面の遷移をしたい場面が出てくると思います。

そんなときに使うのが、useHistoryです。

<h2>実装方法</h2>
useHistoryは以下のように、
1.useHistoryを変数を代入
2.使用したい箇所で、pushメソッドで引数にURLを指定する
といったシンプルな手順で実装できます

以下の例は、<a href="https://reactrouter.com/web/api/Hooks">公式ドキュメント</a>よりお借りしました。
こちらではボタンをクリックすると、/homeへ画面が遷移するようになっています。

```react:useHistory
import { useHistory } from "react-router-dom";

function HomeButton() {
  //1.historyにuseHistoryを代入する
  let history = useHistory();
  
  //2.使いたい箇所でpushメソッドにURLを指定して、使用する
  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
```

<h2><参考</h2>

https://reactrouter.com/web/api/Hooks
foliumのpopupの日本語が縦書きになる現象と悪戦苦闘したら奇跡が起きた話

#目次
0. はじめに
1. foliumとは
2. 今回解決したい現象
3. 奇跡のゴリ押し解決
4. 色々試してみる
5. おわりに


#0. はじめに
最近folium直感的で便利だなーと思い始めて色々遊んでいたが、popupの日本語がなぜか縦書きになるという現象が発生したので今回はこれと戦ってみる。

## 環境
 - python : 3.8.9
 - folium : 0.12.1


#1. foliumとは
foliumとは・・・
インタラクティブな地図を作成できるpythonライブラリ

###自分的利点

- 緯度経度で簡単に可視化できる！
- いろんな見た目のマップを作れる！
- html形式のファイルに簡単にできる！
- numpy配列を使うと大量の座標を一気に地図にいれられる！　
- コードが直感的！



まずはインストール

```
pipenv install folium
```





#2. 今回解決したい現象

```python
# インポート
import folium

# マップの生成
## location: 可視化時の中心地点
## zoom_start: 最初の拡大率
m = folium.Map(location=[35.681382, 139.76608399999998], zoom_start=8)

# 座標の追加
## 最初の引数: [緯度, 経度]
## popup: マーカーをクリックした時の吹き出し内のtext
folium.Marker([35.681382, 139.76608399999998],popup="東京駅").add_to(m)

# 表示
m

# htmlファイルにしたい場合
filename = '任意のファイル名'
m.save(filename)
```

### 実行結果
この通り、吹き出しの中が縦書きになってしまっている。。。
色々調べてみたが解決しなかった為、今回はゴリ押しで解決してみる。
![スクリーンショット 2021-07-18 19.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641496/aae08dbf-c2d7-3b77-f7d9-8265cd25e35f.png)

#3. 奇跡のゴリ押し解決
東京駅の後ろに全角スペースを入れてみた。


```
m = folium.Map(location=[35.681382, 139.76608399999998], zoom_start=8)

folium.Marker([35.681382, 139.76608399999998],popup="東京駅　").add_to(m)

m
```

すると、、、

![スクリーンショット 2021-07-18 19.51.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641496/1bd00ed0-9656-ec51-d13d-55b3d9006102.png)

幅が2文字分に増えた！！
(本当に偶然見つけた為、ちょっとびっくりした)

もう1全角スペース足してみる。。

![スクリーンショット 2021-07-18 20.26.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641496/b33a695b-19ca-7482-433b-f83b2280a241.png)


とまあ、このように全角スペースを1つ加えると横の文字数が1文字分増えることが判明した。(原因は謎)

#4. 色々試してみる
せっかくなので色々試してみた。

| 試したこと | 結果 |
|:-:|:-:|
| 半角スペース  |  増えない |
| 'abc'  | abcの部分のみ横書き  |
|  全角括弧 |   増える|
|  半角括弧 | 半角括弧と次の1文字だけ同じ行  |
|  1文字ずつ+で結合 | 増えない  |
|  ！(全角) |  増える |
| お願いしてみる<br>+"横書きにしてください"  | 悉く縦書きにされる  |

#5. おわりに
色々と試してみたが、原因は分からなかった。。。
今回試した中では、全角スペースが一番良いのではなかろうか。(地図の方の見た目は変わらないので、、)

結果：横に増やしたい文字数分だけ全角スペースを突っ込むというゴリ押し解決法。。。

もし、正攻法を知っている方がいれば教えてください！！
【Vue.js/Vuetify】Textfieldsの下に余白が入ってしまう問題の解決

## 原因
Text fieldsの下には、デフォルトだと
ヒントやエラーメッセージ表示用の要素が入っている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317088/b3b27163-d3bf-2d69-e12b-67bf3c9a1d12.png)

## 対策
エラーやヒントのメッセージを表示しない場合はv-text-field要素にhide-detailsを空に指定する。

```
<v-text-field 
  hide-details
></v-text-field>
```

メッセージを出す時だけ要素を生成する場合はautoを指定

```
<v-text-field 
  hide-details="auto"
></v-text-field>
```

## 参考
https://vuetifyjs.com/ja/components/inputs/#error-count