OmniAICreator/Qiita-1.07M huggingface dataset:
EC2のメタデータタグに設定したEverything(It's you)を取得してみた

以下に記載がありますが、 `GET/latest/meta-data/tags/instance/タグ名` でタグの値が取得できるということでEverything(It's you)を取得してみました。

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/instancedata-data-retrieval.html

#### メタデータのタグ（取得）を許可するを有効化

![スクリーンショット 2022-04-14 20.23.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/44617029-797d-bfa9-efca-11e36f372171.png)


#### こんな感じでタグを指定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/b11cc82a-bf13-495e-0f1b-a22c457ecd17.png)



#### タグリストの取得

```
$　curl http://169.254.169.254/latest/meta-data/tags/instance
Everything
```

`Everything` タグが取得できてます。

#### タグの値を取得

```
$　curl http://169.254.169.254/latest/meta-data/tags/instance/Everything
It's you
```

無事に `It's you` できました！
Vimの操作がわからない...そんなときは、とりあえずこれを覚えればなんとかなる！

この記事は、[新人プログラマ応援 - みんなで新人を育てよう！ - Qiita](https://qiita.com/official-events/3f21c92121aa125807b4)の参加記事です。

https://qiita.com/official-events/3f21c92121aa125807b4

## はじめに

僕が新卒エンジニアとして入社したとき、Git で操作をするときに「Vim の操作わからん」となって困った記憶があります。
なので、とりあえずこれだけ覚えればなんとかなるよってことを書いておいて、新人プログラマの役に立てればと思います。

## Vim の操作

### モード

VS Code などのエディタと違い、Vim にはモードという概念があります。

（Vimmer に怒られそうですが、）各モードは

- ノーマルモード
  - カーソルを移動する
- 入力モード
  - テキストを入力、編集
- コマンドモード
  - 終了、保存などをする

です。
（ここでは書いていないですが、他にもモードがいくつかあります。）

Vim を開いたときのモードが **ノーマルモード** です。

ノーマルモードの状態で`i`を押すと入力モードへ、
ノーマルモードの状態で`:`を押すとコマンドモードへ、
ノーマルモードに戻りたいときは`Esc`を押すと戻ります。

```mermaid
flowchart TD
  normal(ノーマルモード)
  insert(入力モード)
  command(コマンドモード)

  insert -->|Esc| normal
  normal -->|i| insert
  command -->|Esc| normal
  normal -->|:| command
```

また、現在のモードは左下に書いているので、わからなくなったら左下を見ましょう。

|      モード      |                                                       表示                                                       |
| :--------------: | :--------------------------------------------------------------------------------------------------------------: |
|  ノーマルモード  | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/be8b9c4d-759c-258e-a81c-17f0ad3607d2.png) |
|    入力モード    | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/994bdc02-ab87-6866-8d7d-19204c9c9948.png) |
|  コマンドモード  | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/7a931ffd-0427-fa79-e0bf-ce1c831be4b4.png) |

### カーソルの移動

ノーマルモードで`h` `j` `k` `l`のキーを使って操作します。
以下の図で覚えると簡単です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/6b8e6bd1-1b05-01dc-014d-d94fdf2329e8.png)

### 終了、保存したい

コマンドモードで以下のコマンドを入力して Enter キーを押します。

| 操作             | コマンド |
| :--------------- | :------: |
| 終了する         |  **q**   |
| 強制終了する     |  **q!**  |
| 保存する         |  **w**   |
| 保存して終了する |  **wq**  |

保存して終了する例は以下。
`:`を押してコマンドモードに移って、`wq`を入力し、Enter キーを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/baffb6e0-519e-61b7-2355-eba19b995e0a.png)

**`q`で終了できないときは、ファイルの編集をしてるが保存されていないときなどです。**
保存する場合は`w`、保存したくない場合は`q!`で終了させると良いです。

## さいごに

これで最小限の Vim の操作はできるはずです！
もし、Vim に興味があれば、調べてみるとより Vim を使いこなせるはずです！

蛇足ですが、僕が普段使っているエディタは VS Code なんですが、Vim のキーボードから手を離さなくてよいことに惹かれて VS Code で Vim の拡張機能を使ってます。

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

おすすめです。

## Refs

- [Vim - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
- [マスタリング Vim：書籍案内｜技術評論社](https://gihyo.jp/book/2020/978-4-297-11169-4)
VPCにあるエンドポイントサービスってなに？

## 勉強前イメージ

エンドポイントと似たような感じかなって思ってる

## 調査

### VPCのエンドポイントサービス とは

AWS PrivateLink を使用してVPCとAWSアカウントをまたいだサービスの間をプライベート接続ができるようになるサービスになります。

要するに独自でアプリケーションを作って、 [エンドポイントを作成して](https://qiita.com/miyuki_samitani/items/9d9f7a0c417cb75a6c85) 利用できるようになる ということです。
エンドポイントサービスはNLBまたはGLBを使用するのですが、NLBまたはGLB配下のサービスに別のVPCからセキュアにつなげるというようなイメージです。
図でいうと以下のようです。

![12022-04-14 # VPCにあるエンドポイントサービスってなに？ - diagrams.net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/248f7d51-dff2-4be7-bdfd-04a9db46b478.png)


- エンドポイント : VPCと他のサービス間の通信を可能にするコンポーネント
- エンドポイントサービス : VPCと独自のサービスの間をプライベート接続ができるようになるコンポーネント

![2エンドポイントサービス _ VPC Management Console - Google Chro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/3c8c8f30-504a-e16d-ceae-012725e053db.png)

### エンドポイントサービスの種類

- インターフェースエンドポイント

NLBを使用し、その配下のサービスにアクセスします。

- Gateway Load Balancerエンドポイント

GLBを使用し、その配下のサービスにアクセスします。

## 勉強後イメージ

勉強していってるとVPCエンドポイントらへんがもっとわからなくなってくる・・・

## 参考

- [VPCエンドポイントサービスを作成してみた](https://blog.denet.co.jp/aws-privatelink-connection/)
- [Amazon VPC内の独自サービスをPrivateLinkでプライベート接続する](https://tech.uzabase.com/entry/2021/07/29/134042)
nextflowで作業が行われるディレクトリのpathを取得する

nextflowではworkというディレクトリの中にさらに細かく(プロセス単位で)作業ディレクトリが作成される。
このpathは`$PWD`を使うことで取得できる。
この時`\`をつけるのをお忘れなく。

```test.nf
process whereAmI {
    echo true
    """
    echo \$PWD
    echo $PWD
    """
}
```
実行してみると
```
$ nextflow test.nf

/path/to/main/nf/work/86/e00b708..............
/path/to/main/nf/

```

おめでとうございます🎉
上段の`\$PWD`の方ではきちんとpathの取得ができましたね🌟
C#変数と定数の宣言、カウント

学習メモです。

```
using System.Windows.Forms;

namespace count
{
    public partial class Form1 : Form
    {
        //変数の宣言初期値は0
        private int _count = 0;

        //変わらない定数の値
        private const int AAA = 10;
        private const string Key = "SDFGHJJ";

        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            //button1_Clickイベントでカウント+1
            _count = _count + 1;
        }

        private void button2_Click(object sender, EventArgs e)
        {
            //button1_Clickイベントで_countの数値を文字列で表示
            MessageBox.Show(_count.ToString());
        }
    }
}


```
イベント通知~オブザーバパターン~

# イベント通知とは
イベントの発生箇所となるオブジェクトが、他のオブジェクトにイベントの発生を伝えること。

イベント・・・アプリケーション内で発生するあらゆる事象のこと。
# イベント通知のパターン
・デリゲートパターン
・クロージャ
・オブザーバパターン
# オブザーバパターン
##### できること
1対多のイベント通知
-> ex) 特定のオブジェクトが変更されたタイミングで、複数の画面が更新されるケース
##### 構成要素
・サブジェクト　>>>　オブザーバを管理し、通知を発行する
・オブザーバ　>>>　通知を受け取る対象
##### デメリット
むやみに多用すると、どのタイミングで通知が発生するか予想しづらくなり、処理を追うのが難しくなってしまう。
# 実装方法
1: 通知を受け取るオブジェクトにNotification型の値を引数に持つメソッドを実装する
2: NotificationCenterクラスに通知を受け取るオブジェクトを登録する
3: NotificationCenterクラスに通知を投稿する

example)
```Swift: Hoge.swift
import Foundation

class Poster { 
  static let notificationName = Notification.Name("HogeNotification")
  
  func post() { 
    NotificationCenter.default.post(
      name: Poster.notificationName, object: nil
    )
  }
}

class Observer {
  init() {
    NotificationCenter.default.addObserver(
      self,
      selector: #selector(handleNotification(_:)),
      name: Poster.notificationName,
      object: nil
    )
  }

  deinit {
    NotificationCenter.default.removeObserver(self)
  }

  @objc func handleNotification(_ notification: Notification) {
    print("通知を受け取りました")
  }
}

var observer = Observer()
let poster = Poster()
poster.post() // 通知を受け取りました
```
Amazon VPC IP Address Manager とは？

## 勉強前イメージ

VPCって検索したら出ていたけどなんか便利そうよね。

## 調査

### Amazon VPC IP Address Manager とは

略してIPAMと書かれます。
VPC上のIPアドレスを管理・整理を行い、IPアドレスの割り当てを自動で行えるツールになります。
これによって手動で管理されていた場合は記録を行うことをしなくて良くなりました。
こちらは2021年に発表されました。

### IPAMの特徴

- 大規模環境へIPアドレスを割り当てる

単一のアカウントだけでなく、複数アカウントだったり
リージョンをまたいでのIPアドレスの割り当てを管理できるようになりました。

- IPアドレスの使用状況のモニタリングが可能

AWSのダッシュボードで管理を行うことのよって台帳管理が不要になりました。
また、割り当て状況によって追跡が行えるようになりました。

- 監査

モニタリングデータを過去3年分、自動的に保存します。

- トラブルシューティング

接続の問題について、設定なのか何なのかをIPAMで特定することができます。

### 料金

こちらは、費用が必要で東京リージョンだとIPAMが管理するアクティブなIPアドレスの数 と 時間で計算されます。
例えばアクティブなIPアドレスが10個、これを1ヶ月管理したとすると以下になります。

```
10個 * 24時間 * 30日 * 0.00027USD(/h) = 1.944ドル

2022/04/14 1ドル 125.39円
1.944ドル =  125.39円 * 1.944ドル =  約244円
```

## 勉強後イメージ

確かにIPアドレスわからんくなってくるよね・・・
これは結構大企業向けのサービスなのかな？

## 参考

- [Amazon VPC の料金](https://aws.amazon.com/jp/vpc/pricing/)
- [VPC内のIPアドレスを効率的に管理するVPC IP Address Managerが発表されました #reinvent](https://dev.classmethod.jp/articles/new-vpc-ip-address-manager/)
Laravelの初期設定

# 地域の設定
まずLaravelをインストールした後に、地域を東京にする必要があります。
開発する場所が外国なら別ですが
```config/app.php
'timezone' => 'Asia/Tokyo',
 #省略

'locale' => 'ja',
```
jaはjapaneseのことです。

# DBの文字設定
utf8の後にmb_4になっていると思うのですが、これを下のようにしておくと、
日本語向けににコードを書いていけます。

```config/database.php
'mysql' => [

#省略

'charset' => 'utf8',
            'collation' => 'utf8_unicode_ci',

#省略

 ],
```

# デバックバー
デバックはプログラムを書く時に必要なので、インストールしておいて欲しいです。
```php
$ composer require barryvdh/laravel-debugbar
```
https://laraweb.net/environment/1196/


```
$ php artisan serve
```
で起動すると以下のような画面が下に出てきます。

![スクリーンショット 2022-04-14 13.29.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/3b56fdbd-39cb-a69e-a866-9a28a2d581b9.png)

### デバックバーの注意点
デバック環境をリリースした時や本番環境で表示されるとユーザーに迷惑がかかるので、
***.envのDEBUGで切り替え***ます。
.envは下の方のフォルダにあります。

***trueをfalseに変更***します。
```.env
APP_DEBUG=false 
```
下の画像のようにデバックが消えました。

![スクリーンショット 2022-04-14 13.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d0bfc093-2dd4-5a99-d32f-2311060c0de9.png)

開発する時は基本デバックバーは表示させておきます。


## キャッシュクリア
Laravelでは再起動しても内キャッシュが残っててしまって、
更新したプログラムをうまく反映してくれない時があリます。
デバックを非表示にしても表示される場合があります。

それを解消するために以下のコマンドを使います。

```
$ php artisan cache:clear 

//Application cache cleared!
```
configの設定を消す場合も
```
 $ php artisan config:clear


//Configuration cache cleared!
```
を使います。

# データベース設定
MAMPからデータベースを作成して***.envにデータベースの設定***などを記載していきます。

php adminで新しくデータベースを新規作成をし、アクセスできるuserを作成します。
ユーザーアカウント追加、　add user_accountなどですね。

データベース名はpochiにしてあります。
![スクリーンショット 2022-04-14 17.08.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/050192b3-e4f8-18df-dfe1-c3ab41f80767.png)



下の画像のようにユーザー名、パスワードを決めて実行をします。
![スクリーンショット 2022-04-14 17.09.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/dc65261b-49df-6853-b9b1-cb51324dfcfc.png)


データベースができたら.envファイルの中のデータベースに

```.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1  //もしくはlocalhost
DB_PORT=3306
DB_DATABASE= データベース名記載
DB_USERNAME=　　ユーザー名
DB_PASSWORD=　パスワード
```
上で決めたものですね。
この設定の後に***migrationを実行***します。

```
$  php artisan migrate

//Migration table created successfully.
//省略
```
これでphp adminで中を確認すると、中にテーブルができています。



### データベースが接族されているか確認
php adminの下の部分で確認できます。


![スクリーンショット 2022-04-14 18.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ad3b9a69-ae4b-6f17-22a4-a01eca00e0d6.png)




# Access deniedの対処のための資料
下のようなエラーが出た時にこのようにして対処しました。

![スクリーンショット 2022-04-14 18.25.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/facec9fe-0325-cd0c-bd24-54a3bcf75c6f.png)

.envの***DB_HOSTを127.0.0.1からlocalhostに変更***しました。
```.env
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE= データベース名記載
DB_USERNAME= ユーザー名
DB_PASSWORD= パスワード
```

https://coinbaby8.com/access_denied.html


# 参考資料
https://qiita.com/Ping/items/10ada8d069e13d729701
-（ハイフン）を含んだ正規表現でエラーになる

正規表現で-（ハイフン）をヒットさせたい場合は、最初か最後に書く
-（ハイフン）が途中にある場合は、範囲指定の意として認識されてしまう。
https://budougumi0617.github.io/2019/05/04/use-hyphens-in-regular-expression-name-classes/
Laravel Jetstreamのインストールと日本語化

```bash
composer require laravel/jetstream
php artisan jetstream:install livewire
```
Alpine.jsもインストールされる
```bash
npm install && npm run dev
```
データベースを使うので
```bash
php artisan migrate
```
日本語化には[GitHub](https://github.com/Laravel-Lang/lang)からファイルを落として解凍、できたフォルダのlocales/ja/ja.jsonを日本語化したいプロジェクトのresources/langにコピー
Laravelの日本語設定が済んでいればほとんどこれで日本語化されるのだが3〜4個トップページのbladeなどに英語が残ったままなので手っ取り早く直接修正
【Bubble】BubbleとGoogle SpreadSheet(Google Sheet)を接続するのにZaiperを導入検討時に調べたメモ

BubbleとGoogle SpreadSheet(Google Sheet)を接続するというタスクがあり、人気のZapierを使っての接続を検討しました。
結論としては、Zapierを使わない方針となりました。
その経緯の忘備録・メモ書きとなります。

## Zaiperとは？
既にお馴染みの自動化ツールです。
執筆時点で、２０００種類以上のサービスを繋ぐことができます。
メルカリなどの企業内でも導入されており、タスクの自動化のツールの選択肢の一つとして、たくさんの人が利用していることでしょう。

## BubbleとGoogle Sheet(Spreadsheet)の接続
今回は、Bubbleを利用して、CRUD(Create/Read/Update/Delete)処理を行うことができるという要件があったからです。

なお、Zapier以外に、接続させるために考慮した方法とツールもあります。
その際に、検討に入ったのが、以下のツールです。

- Google Sheet API
- Zapier
- Sheety
- SheetDB

今回は、今後の展開なども考慮して、Zapierにて進めるべく調査を行いました。

## Zapierにて詰まったポイント
以下、導入するにあたり、調べた内容となります。

### 1. Zap Thingって何？
[Bubbleのドキュメン](https://manual.bubble.io/core-resources/bubble-made-plugins/zapier)トだと以下の通りに書いてありました。

```
Zap thing
The thing to send to Zapier along with the zap.
This should match the trigger type defined in the Plugins tab.
```

要するに、使用するZap(どのようなフローを踏んでいくのかを定義したもの)と一緒にZapierに送信する項目です。なので、今回の場合は、Google Sheet(Spreadsheet)とやり取りする項目です。
なお、Bubbleのプラグインにて定義が必要で、トリガータイプと一致しなければなりません。

例えば、データを送信する時には、そのデータそのものがZap Thingになります。

#### ZaiperのTriggerとActionについて
![Image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2588722/77897d87-dcd7-ed70-6e3c-2ba6830b119c.jpeg)

Zaiperは、Trigger(変化、読み込みなど)を基にして、Action(何かに対しての実行)を行うというフローです。
Bubbleで設定できるのは、Triggerが、Bubbleの変化に対してのみ、一方でActionが、Create Thing、Modify Thing、API Flowの3つとなります。

Bubbleにデータを取得したいという場合は、BubbleからTriggerを引き起こす(APIの場合は、APIを叩く)という動きになります。
しかしながら、Zap Thingを設定できないため、取得をすることができないのです。

### 2. ZapierではCRUD処理に制限がある
Zapierにて、CRUD処理はできます。
CreateとUpdate、そして、Deleteは問題ありません。
ただし、Readに関しては、癖があります。というのも、使えるZapierのサービスは、Google Sheet APIに準拠した内容となるからです。
データを読み取る時にも、JSONにて取得するのですが、Key-Valueで取得できませんでした。

## Zapierの導入は見送りました。
Zapierを使うことで、タスクの自動化と考えていましたが、Key-ValueのJSONにて情報を取得できないということから、導入は見送りとなりました。
Zapierを活用した連携を検討している人は、上記の2点を考慮し、導入することをおすすめします。
複数のグラフを一度にプロットする

複数のグラフを一度にプロットするコードを記載する。\
用いたデータは統計科学研究所にある成績に関するデータセットを用いている。\
統計科学研究所： https://statistics.co.jp/reference/statistical_data/statistical_data.htm 

```
### 必要なライブラリ・モジュールをインポートする
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import gc
import matplotlib.gridspec as gridspec

### 成績データを読み込む
seiseki = pd.read_csv("seiseki.csv")
```

今回は、各科目のヒストグラムを可視化する。
```
### 国語のヒストグラムを表示
seiseki["kokugo"].hist()
```
次に9科目を一度に表示する
```
### グラフのサイズやフォントのサイズの設定
plt.rcParams["font.size"] = 18
fig = plt.figure(figsize=(18, 10))
gs = gridspec.GridSpec(3, 3, wspace=0.6, hspace=1)

### 科目数だけグラフを表示したいので、科目の数だけループする。
### len(seiseki.columns)：科目数
for i in range(len(seiseki.columns)): 
    gs_0 = i%3
    gs_1 = i//3
    
    ### ヒストグラムを表示
    ### seiseki.columns[1]：shakai
    ### seiseki.columns[3]：rika
    ax = plt.subplot(gs[gs_1, gs_0])
    seiseki[seiseki.columns[i]].hist()

    ### 以下はタイトル付けやラベル付け
    plt.title(seiseki.columns[i])
    plt.xlabel("score")
    plt.ylabel("population")
```
結果は以下のように表示されます。\
![qiita_複数グラフ表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2594605/2a04aadd-d386-2e15-6cfc-f958d669f0e9.png)
今回紹介したコードはあくまで一例であり、より良い書き方があると思います。\
参考になれば幸いです。
Macのスクリーンショット撮影後の画面が暗いままで戻らないときの解決方法

### 問題：Macのスクリーンショット撮影後の画面が暗いままで戻らない
Macでスクリーションショットを撮ったとき、ショット領域範囲外のグレーにになってた部分が、ショット後も残ってしまうことがあって、とても困っていたのですが、ひょんなことから解決方法を見つけました。


### 解決方法：ディスプレイ数を変更する
マルチディスプレイができる環境限定の解決方法なんですが、ディスプレイをシングルにしたり、マルチにしたり切り替えると、画面の再描画が行われて、直ります。
NCMB Kotlin SDKを使ってTodoアプリを作る（その1 アプリの仕様とNCMBの初期化）

NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。

今回は公式SDKの一つ、Kotlin SDKを使ってTodoアプリを作ってみます。まず画面の仕様とSDKの初期化について解説します。

## 完成版のコード

作成したデモアプリのコードは[NCMBMania/Kotlin_Todo: Kotlin SDKを使ったTodoアプリです](https://github.com/NCMBMania/Kotlin_Todo)にアップロードしてあります。

## ベースについて

今回はKotlin + Jetpack Composeの組み合わせになっています。プロジェクトを作る際には Empty Compose Activity を選択してください。

## Composeについて

今回は以下のComposeを用意しています。

- Navigation
- FormScreen
- ListScreen
- TaskRow
- DetailScreen

### Navigation

各画面への遷移をハンドリングしています。Navigationコンポーネントを利用しています。

#### FormScreen

![Screenshot_20220414_155917.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f956bebd-4fa5-230a-c9a8-5e1fe838894c.png)


タスクの入力フォームです。新規登録、編集の両方で利用しています。

#### ListScreen

![Screenshot_20220414_155935.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/535bde76-e711-1500-07e2-a2d641947b09.png)


タスクを一覧表示します。各行のデータはTaskRowにて表示しています。

#### TaskRow

タスクの一覧表示で、各行を表示するのに使います。

#### DetailScreen

![Screenshot_20220414_155946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f2449883-9409-21d1-bbbe-90fd9531ddab.png)


一覧表示で選択された、タスクの詳細表示を行います。

## NCMB SDKのインストール

NCMB SDKは[Releases · NIFCLOUD-mbaas/ncmb_kotlin](https://github.com/NIFCLOUD-mbaas/ncmb_kotlin/releases)よりダウンロードします。Zipファイルをダウンロードして展開すると、NCMB.jarというファイルが取得できます。このファイルをKotlinプロジェクトの `app/libs` 以下にコピーします。

これでNCMB SDKの利用準備が整います。

## NCMB SDKの初期化

`app/build.gradle` を開いて編集します。そして以下の4つを追加します。一番下のkotlinx-coroutinesを追加すると、保存処理などが同期的に処理できるようになります。

```
dependencies {
	// 省略
  implementation 'com.squareup.okhttp3:okhttp:4.8.1'
	implementation 'com.google.code.gson:gson:2.3.1'
	api files('libs/NCMB.jar')
	implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9'
}
```

編集したら同期します。

### コードの編集

MainActivity.ktを開いてNCMBの初期化を行います。 `super.onCreate` の下でNCMBを初期化します。 `YOUR_APPLICATION_KEY` と `YOUR_CLIENT_KEY` はそれぞれあなたのものと書き換えてください。

```kotlin
// インポート
import com.nifcloud.mbaas.core.NCMB

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // NCMBの初期化
        NCMB.initialize(
            this.getApplicationContext(),
            "YOUR_APPLICATION_KEY",
            "YOUR_CLIENT_KEY"
        )
        setContent {
						// 省略
        }
    }
}
```

これでNCMBの初期化が終わり、利用準備が整います。

## まとめ

今回はComponentの説明と、NCMB SDKの初期化を行いました。次回はタスクの保存処理について説明します。

[mBaaSでサーバー開発不要！ | ニフクラ mobile backend](https://mbaas.nifcloud.com/)
特定アカウントの鍵垢フォロワーにまとめてフォローリクエストを送る

## 準備

- 認証ファイルはconfig parserを使う

```ini:setting.ini
[conf_name]
consumer_key = xxxx
consumer_secret = xxxx
access_key = xx-xx
access_secret = xxx
```

## コード

```python:protectAccountAllFollow.py
import tweepy
import sys
import configparser


def auth_api(envName):
    # 認証
    config = configparser.ConfigParser()
    config.read('setting.ini')
    print("envName is " + envName)
    consumer_key = config.get(envName, 'consumer_key')
    consumer_secret = config.get(envName, 'consumer_secret')
    access_key = config.get(envName, 'access_key')
    access_secret = config.get(envName, 'access_secret')
    auth = tweepy.OAuthHandler(consumer_key, consumer_secret)
    auth.set_access_token(access_key, access_secret)
    api = tweepy.API(auth)
    return api


def getFollowers_ids(Api, Id):
    # フォロワー取得
    followers_ids = tweepy.Cursor(Api.followers_ids, id=Id, cursor=-1).items()
    followers_ids_list = []
    for followers_id in followers_ids:
        followers_ids_list.append(followers_id)
    return followers_ids_list


def protectAccountAllFollow(api, f_list):
    # 鍵垢をまとめてフォロー
    for i in f_list:
        usr = api.get_user(i)
        if usr.protected:
            print(usr.screen_name, usr.name)
            api.create_friendship(i)


def main():
    # メイン処理
    target_screen_name = sys.argv[1]
    api_key = sys.argv[2]
    api = auth_api(api_key)
    f_list = getFollowers_ids(api, target_screen_name)
    protectAccountAllFollow(api, f_list)


if __name__ == "__main__":
    main()

```

### 実行

```bash
protectAccountAllFollow.py ${ターゲットのスクリーンネーム} ${setting.iniに記載したconf名}
```


## 普通に嫌われるのでやめましょう
- 普通に嫌われるのでやめましょう
eZ Publish Legacy / eZ Platform に関する最新情報まとめ (2022年4月)

**eZ Publish 4.x**、**eZ Publish 5.x**、**eZ Platform 2**、**eZ Platform 3** に関する2022年6月23日現在の最新情報のまとめ。

## eZ Platform 3
**eZ Platform v3.2.8**
2021年6月2日
https://github.com/ezsystems/ezplatform/releases

## eZ Platform 2
**eZ Platform v2.5.30**
2022年5月31日
https://github.com/ezsystems/ezplatform/releases

## eZ Publish 5

### 製品版
**eZ Publish Platform 5.4.14**
2019年5月13日
https://doc.ez.no/display/EZP/5.4.14+Release+Notes

### コミュニティ版
**eZ Publish Platform Community Edition v2014.11.1**
2014年11月12日
https://github.com/ezsystems/ezpublish-community/releases

### リファレンス
[https://doc.ez.no/display/EZP/eZ+Publish+5.x+Developer+Documentation](https://doc.ez.no/display/EZP/eZ+Publish+5.x+Developer+Documentation)


## eZ Publish 4

### 製品版
**eZ Publish 4.7**
2012年5月
https://doc.ez.no/eZ-Publish/Technical-manual/4.7/Installation/eZ-Publish-4.7-Etna-Known-Issues

### コミュニティ版
**eZ Publish Community Edition 2019.03.6**
2020年10月16日
https://github.com/ezsystems/ezpublish-legacy/releases

### リファレンス
[https://doc.ez.no/eZ-Publish/Technical-manual/4.x](https://doc.ez.no/eZ-Publish/Technical-manual/4.x)
オリジンについて

オリジンは`RFC6454`で定められている概念のこと。
web関連でよく見かける。
インターネット上の資源(リソース)の所在地を表すURLの`スキーム`、`ホスト`、`ポート`の３つの組み合わせによって同一オリジンだとかクロスオリジンだとかを区別。

# スキーム
対象の資源に対してどのように通信を行うのか(プロトコル)を表したもの。
`https`://example.jp/index.html:80
といったようなurlの「`https`」の部分。

# ホスト
コンピュータが持っている(実際はNIC)ネットワーク上のアドレスのこと。
https://`example.jp`/index.html:80
の「`example.jp`」部分で、いわゆるドメイン。

# ポート
コンピュータが提供する各サービスを区別する番号。
例えばwebサーバは80番、ファイルサーバは21番(実際のやり取りは20番)など。
[メモ]Unity2021でimport asset....が消えない問題の解消

ちょっとこれだけは書き留めておきたいですので、めもめも
https://funfx.xyz/unity%E3%81%A7-hold-on-busy%E3%81%8C%E6%B6%88%E3%81%88%E3%81%AA%E3%81%8F%E3%81%A6%E5%9B%B0%E3%81%A3%E3%81%9F%E8%A9%B1/

今日も本当に悩んでいた、
import asset...が消えない問題が上の記事で解決しました。ほんとにうれしかったので、メモ程度に残しておきます。
3元１次不定方程式〈2/2〉「2018東工大数学第2問」pythonでやってみた。

つづき

https://qiita.com/mrrclb48z/items/92028fda12cefc6a8e97

```
(1)35*x + 91*y + 65*z = 3　整数
(2)x**2+y**2の最小値
```


誰かpythonでやってもらうと助かります。

# pythonの合同式でやってみたい。
  (勉強中)

https://ad064.com/35x91y65z3toko/

# pythonのpulpソルバーでやってみたい。
  (勉強中)
# pythonのループで

nMaxがあやしいですね。

```python
nMax=10
r = range(-nMax, nMax, 1)
myMin=nMax**2+nMax**2
for i in r:
    for j in r:
        for k in r:
            if 35*i + 91*j + 65*k == 3:
                i2j2=i**2 +j**2
                if i2j2 < myMin:
                    myI=i
                    myJ=j
                    myK=k
                    myMin=i2j2
                    print("#", i, j, k,myMin)
                else:
                   print("#",i,j,k)
print("#(2)最小値",myI,myJ,myK,myMin)
# -4 -2 5 20
# -4 3 -2
# -4 8 -9
# 9 -7 5
# 9 -2 -2
# 9 3 -9
#(2)最小値 -4 -2 5 20
```
ブロック同期遅延（Height<Final）の際の復旧手順

![スクリーンショット 2022-04-14 172130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185246/f13fb1e6-46fd-6fdb-e116-5e752fac02f5.png)

何らかの理由によりSymbolノードのブロック同期に遅延が生じ、「ブロックHeight < Finalブロック」の状態になってしまった場合、Symbol-bootstrapの自動修復機能で復旧することは出来ません。手動でブロックDBをリセットし、１からブロック同期をし直す必要があります。

※以下実行の際は、万が一の事態に備え、harvest.datなどのバックアップを行って下さい。

（１）symbol-bootstrapの停止

```cd platform（targetフォルダがある階層へ）```
```
symbol-bootstrap stop
```

（２）ブロックDBの初期化

```
symbol-bootstrap resetData
```

（３）symbol-bootstrapの再起動

```
symbol-bootstrap run -d
```


以上で作業完了！


#＜　宣　伝　＞

デリゲートハーベスティングには、是非とも以下のノードのご利用を❣

　```0-0-0-high-performance.harvest-node.com```
　```0-0-1-high-performance.harvest-node.com```
SequelizeでbulkCreateを使用してINSERTする際、値を指定していないAUTO_INCREMENTを付与したカラムの値を取得する

## 初めに
SequelizeでbulkCreateメソッドを使用する際に、AUTO_INCREMENTを付与しているカラムを指定せずに挿入した場合に、thenメソッドの引数に挿入したカラムの値がNULLで格納されていた。
検索した際に日本語の情報が少ないと感じたため、AUTO_INCREMENTを付与したカラムの値を取得する方法を記載する。

■ Sequelizeのバージョン
3.30.4
■ MySQLのバージョン
5.7.37
## 解決方法
bulkCreateメソッドに以下の記述を追加することで解決した。

```js
individualHooks: true
```

#### 例
```js
Model.bulkCreate(
    [ { coulumn: "test" }, { coulumn: "test" } ], 
    { individualHooks: true }
).then((results)=>{
    // 引数resultsに挿入されたAUTO_INCREMENTを付与したカラムの値が格納されている
})
```

## transactionと組み合わせる場合
#### 例
```js
sequelize.transaction((tx)=> {
     Model.bulkCreate(
         [ { coulumn: "test" }, { coulumn: "test" } ], 
         { transaction: tx, individualHooks: true }
     ).then((results)=>{
      // 引数resultsに挿入されたAUTO_INCREMENTを付与したカラムの値が格納されている
     })
}
MAMPのWeb Startがクリックできない時の対処法

# MAMPでWeb Startがクリックできなくなった
簡単な記事になるのですが、下の画像のWeb Startがクリックできなくなり
php　adminの確認ができなくなってしまいました。
下の写真は問題なくクリックできる状態です。

![スクリーンショット 2022-04-14 16.56.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/b8ca800f-beff-b3d6-5942-ede3baa9b572.png)

# 試してみたこと
1. PHPのバージョンを変える　　特に効果なかった
2. referencesのポート番号を変えてみるが効果なし
3. サーバーを起動したり再起動するが変わらず

# 解決できた方法
***PCを再起動したら解決***できました。
原因はわかりませんでした。

# 注意
上の解決方法は自分のやり方なので、それぞれの状況によって変わってくるので注意してください。
aws lightsail 入門 2 (AmazonLinux2契約から、sshログインまで)

# 契約しよう

https://lightsail.aws.amazon.com/ls/webapp/create/instance?region=ap-northeast-1

![aaaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/baa34917-7533-14d0-403a-f32590f6d8ac.png)

sshキーまで自動生成してくれるなんて超絶便利ですね。

# ssh ログインしよう

root ではなく ec2-user でログインすること。
利用するソフトは嬉し恥ずかしRlogin
https://kmiya-culti.github.io/RLogin/

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/3fcc97fb-f8fa-963e-01b0-0a490f6682d1.jpeg)

`ログインok`

# hideki ユーザーを作って ログインしよう

参考
https://www.linuxmaster.jp/linux_skill/2021/04/amazon-linux2ec2ec2-user.html


```
sudo su -

useradd hideki
passwd hideki

//パスワードを2回入力

sudo usermod -aG wheel hideki
less /etc/group | grep wheel

pwd
sudo cp -R ~/.ssh/ /home/hideki/.ssh
sudo ls -la /home/hideki/.ssh

sudo chown -R hideki:hideki /home/hideki/.ssh
sudo chmod -R 600 /home/hideki/.ssh
chmod 700 /home/hideki/.ssh
sudo ls -la /home/hideki/.ssh

//このままだと、rootでログインするなとエラーが出るので

sudo -s
vim /home/hideki/.ssh/authorized_keys

//ssh-rsa から始まるように、それ以前のメッセージを削除

```


これで hideki で root ログインすることが可能。

# ec2userでのログインを禁止

```
sudo vi /etc/ssh/sshd_config
DenyUsers ec2-user　←最終行に追加
sudo systemctl restart sshd
```

・hidekiでログインできるか？
・ec2-userでログイン失敗するか？

の2つを確認。

# パブリックIPを固定する

サーバーをオフにするとパブリックIPが変わってしまう。
lightsail 管理画面より
インスタンスを選択
networking
IPv4 networkingらへんでIPアドレスを固定しておこう。

らへんから
【初心者応援】デバッグ時に気をつけること

# 初めに
今回は、新人プログラマ応援記事の第二弾としてデバッグ時に気をつけることを何点か紹介させていただこうと思います。
新入社員の方や、新人プログラマの方は最初からバリバリ実装をしていく！ということは少ないと思います。
まずはデバッグをしてコードに慣れていくことが多いかと思うのでぜひお役に立てればと思います。

### 原因を決めつけすぎない
目星をつけれるということは、そのプロジェクトのコードを理解できてきた証拠なのですごく大事です。
ただし、ある程度コードに慣れてきたタイミング等に陥りがちなのが、この処理を行ってるのはここだからバグの原因はここだろうと決めつけてしまうことです。
決めつけすぎてしまうと、視野狭窄に陥り原因究明が遅くなってしまい必然的に作業時間が増えてしまいます。
対策としてまずは、コード全体を俯瞰し目星を数点決めておくことです。
もし、目星をつけたところを忘れてしまう場合はBreakPointを設置しておいてもいいかもしれません。
こうすることで、視野狭窄が起こりづらく思わぬ発見をすることができるかもしれません。

### 動作だけから情報を得ようとしない
コードと実機の動作だけを追ってデバッグできる人はいません。
ではどうするべきなのか、先述の話題でも出しましたがしっかりとBreakPointを配置し値の監視をしましょう。
それだけでなくLogを流しみするのではなく、Log内で検索をかけたりしてそれらしい部分をしっかりと読むことも大事です。
Logは情報の塊なので最初のうちは情報の取捨選択は難しいかと思います、検索機能や`Log.d`を利用することでだんだんと必要な情報がわかってくるかと思います。

### 正常動作と異常動作を確認する
先述の二つはデバッグ時に原因を探す方法を紹介しましたが、こちらは原因が発見できた後に役立つかと思います。
「正常動作と異常動作を確認する」ことでデグレを未然に防ぐことができ、もし自分で解決策が出ない時に先輩エンジニアに聞く際に情報をまとめておくと話が分かりやすく、手間や時間を取らせないで済みます。

# 最後に
今回は、デバッグ時に気にかけておくと役立つものを紹介させていただきました。
前回に引き続き、新人プログラマの方々のためにもコード等は載せずに文字のみでの説明を試みたので読みづらい点はあるかもしれませんが、少しでもお役に立てれば幸いです。
aws lightsail 入門 1

参考
https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-frequently-asked-questions-faq

# Lightsailって何よ？

AWS版のVPS

# 利用できるOSは？

Amazon Linux 2
CentOS 7 および 8
他

# アダルトサイトの運営いいの？

違法、有害、詐欺知的財産の侵害、児童ポルノ、レイプ、ウィルス、不正はNGアダルトコンテンツはグレーゾーンだが、日本ほど厳しくはなさそう

# 値段は？

月額437円から。時間単位で料金は発生する。
conohaみたいな感じですね。
※3.5ドル(125円計算)

バックアップ（スナップショット）を利用してのプランアップも可能。

ちなみに
GCE(googleのvps)は月額5,000円ほど。

# 転送量制限あるやん

一番安いプランだと月間1TBまでの転送が許容されている。
オーバーすると17.5円/1GBかかる
1TBオーバーで17,500円。
(0.14 USD/GB)

転送量って実際どうなのか、
今自分が運営しているサービスの月間転送量を調べてみた。

```
mysqlサーバー
① 35GB
② 66GB 120万PV程度？

nginxサーバー(phpとかも入っている)
①160GB 120万pv程度
②124GB

③ redis 92GB (10サイト共用)
```

ということで、1TBには遠く及ばないので十分ですね。
説明にもこうあります
`データ転送プランは、大部分のお客様の使用量が枠内で収まり、追加料金の請求が発生しないように設計`と。

# スナップショット（バックアップ）について

自動、手動ともに可能。
自動スナップショットはエクスポートすることができない。
しかし、コピーして手動のスナップショットに変換可能。

手動スナップショットはユーザーが削除するまで有効（削除はいつでも可能）

1ヶ月保存した場合の料金
1GBあたり 6円 (0.05 USD/GB)
28GB 168円 (1.40 USD)
※1ドル120円計算

# スナップショットを自動化した場合の料金は？

常時、最新の 7 回分の自動スナップショットを保持。
スナップショットの有効化は無料。
スナップショットで使用した実際のストレージの料金のみ。





# 以下、調べたこと

amazon amiとは
AWS AMIとは
Amazon Machine Image の略で、
インスタンスを起動するのに必要なOSやボリュームの情報などのテンプレートのこと

プロジェクトの成長に伴い、インスタンスでロードバランサーやアタッチされたブロックストレージを使用して、冗長性とアップタイムを向上させるとともに、何十種類もの AWS のその他サービスにアクセスして新しい機能を追加することができます。

アジアパシフィック (東京) (ap-northeast-1)
でも使える

Service Quotasとは
AWSにはクォータと呼ばれる、リソース作成上限などの制限値があります。
（これは、オペレーションミス等による意図しない出からユーザを保護する為のもの

Lightsail プランは1時間ごとのオンデマンドで課金されるため、プランの使用分に対してのみお支払いいただきます。


Lightsail インスタンスに接続するには、どうすればよいですか?

Lightsail では、ブラウザからインスタンスのターミナルにワンクリックで安全に接続できます。Linux/Unix ベースのインスタンスへの SSH アクセス

プランをアップグレードできますか?

はい。インスタンスのスナップショットを使用して、より大きいサイズの新しいインスタンスを作成できます。詳細については、Amazon Lightsail のスナップショットを参照してください。


インスタンスの停止と削除の違いは何ですか?

インスタンスを停止すると、現在の状態で電源がオフになり、いつでも再開することができます。インスタンスを停止すると、そのパブリック IPv4 は解放されるため、停止して再開した後も同じIP を保持する必要のあるインスタンスには、静的 IP を使用することをお勧めします。インスタンスにアタッチされているパブリック IPv6 アドレスは、インスタンスを停止して再開しても変更されないので注意してください。


Lightsail 静的 IPv4 アドレスの費用を教えてください。

Lightsail で静的 IPv4 アドレスを使用している限り、無料です! 静的 IPv4 アドレスがインスタンスにアタッチされている場合は、 料金は発生しません。パブリック IP アドレスは希少なリソースのため、Lightsail では効率的な利用に努めています。そのため、インスタンスに 1 時間以上アタッチされていない静的 IP に対しては、0.005 USD/時間という少額の料金を課金しています。

プランのデータ転送許容量を超えた場合は、どうすればよいですか?

データ転送プランは、大部分のお客様の使用量が枠内で収まり、追加料金の請求が発生しないように設計されています。インスタンスがデータ転送枠を超えた場合は、使用したデータ転送量に対して GB 単位で超過料金が発生します

アジアパシフィック (東京) (ap-northeast-1): 0.14 USD/GB
Laravelの中間テーブルにcreated_atだけ自動的に渡す方法

# 確認したバージョン

Laravel 8

# どういうこと？

以下のようなクラスがあったとします。

```php
class Foo extends Model
{
    public function bars() {
        $this->belongsToMany(Bar::class);
    }
}
```

このとき、barsの中間テーブルとなる`foo_bar`に作成日時を勝手にinsertしてほしいといった事があるかと思います。

自動でやってくれないかな？と思って、何も考えずにsyncやattachをすると、created_atカラムはnot null制約があるから違反してるぞ！と怒られちゃいます。

まず思いつくのは以下です。正直先程までこの方法を使っていました。

```php
$foo->bars()->attach($id, ['created_at' => Carbon::now()]);
```

とか

```php
$foo->bars()->syncWithPivotValues($ids, ['created_at' => Carbon::now()]);
```

しかしながらもっと簡単な方法がありましたので紹介します。

# 簡単な方法

`withPivot`でcreated_atカラムを指定する方法です。

```php
class Foo extends Model
{
    public function bars() {
        $this->belongsToMany(Bar::class)->withPivot('created_at');
    }
}
```

これだけで勝手に中間テーブルのcreated_atカラムに日時が入っちゃうんですね〜。

詳しい実装内容に関しては以下のソースを確認してください。
https://github.com/laravel/framework/blob/44e3be7edf9c5b17e2d69e827ab144cb44fcf10d/src/Illuminate/Database/Eloquent/Relations/Concerns/InteractsWithPivotTable.php#L383-L409

実は、これ以外に`withTimestamps()`というのもあるのですがこれはupdated_atもある前提になってしまうので、今回の目的とは違っていたので使えませんでした・・・。
【初投稿】初めてのEC2インスタンスを起動してみた。

## はじめに
「AWSで始めるクラウド開発入門」という教材を使用し、ハンズオン形式でAWSについて学んでいます。
今回は、その中の４章「初めてのEC2インスタンスを起動する」で学んだことをアウトプットしていきます！
## 準備
この教材を進めるに当たって以下のようなプログラムをインストールする必要があります。
- Python
- Node.js
- AWS CDK
- etc...
ですが、この教材ではこれらのプログラムを予めインストールしてくれているDocker imageが存在するので、今回はこちらを使用していきました。

## 学習の流れ
学習は以下のような内容ですすめていきました。
1. Pythonの依存ライブラリをインストール
1. AWSの秘密鍵をセット
1. SSH鍵を生成後デプロイを実行
1. インスタンスにSSHでログインする。
1. スタックを削除する。
## 今回の学習で学んだこと。
- CLIコマンドでインスタンス、を生成しアプリケーションをデプロイし、そのインスタンスを削除する流れ。
- AWSはGUIではなくCLIも使うことができる！
    - CLIのほうが、コマンドを高速で実行することができる！！
- EC2を使用することで、簡単にサーバーを構築、デプロイを行うことができるということ。
今回の学習でAWSの便利さ、必要性を実感しました、、

次章では、GPUを搭載したインスタンスを使用し、AWSでディープラーニングしていく方法を学んでいきます。
FetchAPI の使い方 (get)

次のページを参考にしました。
[[HTML5] Fetch API で GET/POST で通信する](https://blog.katsubemakito.net/html5/fetch1)
[World Time API](https://worldtimeapi.org/)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Fetch API Sample1</title>
<style>
    #jst{ text-decoration:underline; font-weight:bold; }
    #result{ display:none; }
</style>
</head>
<body>

<section>
  <h1>Fetch API Sample1</h1>

  <div id="nowloading">
    ...サーバから時間を取得中
  </div>
  <div id="result">
    現在の時間は <time id="jst"></time> です。
  </div>
</section>
<br />
<script src="fetch_get.js"></script>

<hr />
Apr/14/2022<br /> 
</body>
</html>
```

```js:fetch_get.js
// ---------------------------------------------------------------
//	fetch_get.js
//
//						Apr/14/2022
// ---------------------------------------------------------------
/*
** [event] ページ読み込み完了時に実行
*/

window.onload = ()=>{

	console.error("*** fetch_get.js ***")

	const URL = "https://worldtimeapi.org/api/timezone/Asia/Tokyo"

  //--------------------------------------
  // 現在時間を取得する
  //--------------------------------------
fetch(URL)
    .then((res)=>{
      if( ! res.ok ) {
        throw new Error(`Fetch: ${res.status} ${res.statusText}`);
      }
      return( res.json() );
    })
    .then((json)=>{
	console.error(json.datetime)
	document.querySelector("#jst").innerHTML = json.datetime

      // 表示を切り替える
	document.querySelector("#nowloading").style.display = "none";
	document.querySelector("#result").style.display = "block";
    })
    .catch((error)=>{
	alert("エラーが発生しました");
	console.error(`[FetchAPI] ${error}, ${URL}`);
    })
}


// ---------------------------------------------------------------
```

ブラウザーでアクセス
![fetch_get.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/adc6930d-a48e-7adb-e0db-244d64c9b978.png)
【Flutter】全角・半角判定しながら文字数カウント

```dart:
import 'package:charset_converter/charset_converter.dart';

onChanged: (String value) async {
  final int _StringCount = 0;
  await Future.forEach(value.runes, (int rune) async {
    List<int> bytes = await CharsetConverter.encode('cp932', String.fromCharCode(rune));
    _StringCount += bytes.length;/// 2 = 全角, 1 = 半角
  });
  setState(() {
    _fullCount = _StringCount / 2;///全角文字数
  });
},
```
[Python]Outlookの予定表から日付範囲を指定して予定を吸い上げる方法

[この記事](https://qiita.com/konitech913/items/2ec831863ad84db23558)でやっているような全部吸い上げてからpythonでフィルタリングする方法よりも、下のコードで示すようなItems.Restrict()を使用する方が高速らしい

```python
import win32com.client
import datetime

# 調べたい日付範囲を定義
start_date = datetime.date(2022, 4, 1)
end_date = datetime.date(2022, 4, 30)

# Outlookの予定表へのインタフェースオブジェクトを取得
Outlook = win32com.client.Dispatch("Outlook.Application").GetNameSpace("MAPI")
CalendarItems = Outlook.GetDefaultFolder(9).Items

# 定期的な予定の二番目以降の予定を検索に含める
CalendarItems.IncludeRecurrences = True

# 開始時間でソート
CalendarItems.Sort("[Start]")

# "mm/dd/yyyy HH:MM AM"の形式に変換し、フィルター文字列を作成
strStart = start_date.strftime('%m/%d/%Y %H:%M %p')
strEnd = end_date.strftime('%m/%d/%Y %H:%M %p')
sFilter = f"[Start] >= '{strStart}' And [End] <= '{strEnd}'"

# フィルターを適用し表示
FilteredItems = CalendarItems.Restrict(sFilter)
for item in FilteredItems:
	print(str(item.Start.Format("%Y/%m/%d %H:%M")) + " : " + str(item.Subject))
```
TCPポート枯渇について（個人用メモ）

ロードアベレージとかディスクIOばかりに気を取られていると、ネットワーク関係で思わぬドツボにハマることがある。TCPポートの枯渇がその一つで対処法を説明する。

/proc/sys/net/ipv4/ip_local_port_rangeにはローカルポートとして利用できるアドレスの範囲が書いてある。CentOSのデフォルト値だと32768~60999、つまり28232個のポートが使用可能となっている。
# 使用中のポート数を確認
```
netstat |grep tcp|wc -l
```

使用ポート数を上回っている場合、使用ポート数を増やすか、TCPコネクションの保有時間を短くすること(CentOS7のデフォルト値は60秒)で対処できる。

/etc/sysctl.conf に次のように追記すること。
# 使用ポート数を増やす
```
net.ipv4.ip_local_port_range = 32768 65000
```
# TCPコネクションの保有時間を短くする
```
net.ipv4.tcp_fin_timeout = 10
```
Salesforceの日付/時間型項目から、いい感じの文字列を返す数式を組みたい

#### 要件
日付/時間型項目を、0～23の時間帯でグルーピングするための数式を実装する。

#### 例
2022/04/01 20:40
↓
20時

2022/04/01 11:35
↓
11時

<br / >

単純に text( CustomObj__c.DateTimeField__c ) とするだけだと
GMTに変換（日本時間から-9h）されたり、'/'じゃなくて'-'で区切られたりして結構ダサい。

2022/04/01 20:40
↓
2022-04-01 11:40:37Z

いろいろと試行錯誤した結果、これでいいじゃんとなりました。

~~~Apex
text(
    hour( timeValue(CustomObj__c.DateTimeField__c + 9/24) )
) & '時'
~~~


#
#### 実装初期段階の構想
~~~Apex
case(
    /* 文字列（yyyy-MM-dd hh:mm:ssZ）に変換して、hh部分を抜き出す */
    mid( text(CustomObj__c.DateTimeField__c) , 12 , 2 ) 
    , '00', '9時'
    , '01', '10時'
    , '02', '11時'
    , ..., ... /*以降'23'まで繰り返し*/
    , '#N/A'
)
~~~

それがこうなり、
~~~Apex
text(
    hour(timeValue(CustomObj__c.DateTimeField__c))
    /* GMT→日本時間に変換（15時以前なら+9h。以降は-15h） */
    + if( hour(timeValue(CustomObj__c.DateTimeField__c)) < 15, 9, -15)
) & '時'
~~~

最後に本稿文頭の数式になりました。
<br />
タイムゾーンに関していちいちCaseやifで場合分けするんじゃなく、+9/24 （※9時間進ませる意）
って書くだけで解決できそうなので、数式がシンプルになりそうだね、って備忘録でした。

それと項目の値がブランクの場合、'時'としか表示されないので注意してください。
VcXsrvを使ってmatplotlibでグラフを出力するとlibGL errorが起きる

CentOSとWindowsをX serverで繋ぎ、matplotlibでグラフを出力した時に以下のエラーが出ました。

```
libGL error: No matching fbConfigs or visuals found
libGL error: failed to load driver: swrast
```
グラフは正しく出力されたのですが、エラーはエラーなので直したいですね。

# 対処法
.bashrcか.bash_profileに以下の行を加える。
```
export LIBGL_ALWAYS_INDIRECT=1
```
この変数を定義すると libGL はハードウェア アクセラレーションではなく必ず間接レンダリングを使うようになります。

# 参考文献
https://unix.stackexchange.com/questions/589236/libgl-error-no-matching-fbconfigs-or-visuals-found-glxgears-error-docker-cu
Windows更新プログラムの手動適用方法

# Windowsの更新ができないとき
Windowsの更新は、基本的にはWindows Updateで自動で更新プログラムが適用される。
ただし、以下のように自動で更新プログラムが適用されない場合や個別に適用したい場合がある。
・何らかの事情で一部の更新プログラムが適用されない
・一部の更新プログラムを手動で適用したい
・スタンドアロンPC（インターネットに接続されていないPC）に更新プログラムを適用したい

# Microsoft®Update カタログ
[Microsoft®Update カタログ](https://www.catalog.update.microsoft.com/Home.aspx)は、Windows更新プログラムのダウンロードWebサイトのこと。
各更新プログラムにひも付いている固有の番号(KB番号)や、適用対象のOS名やバージョンなどを手動で指定して希望の更新プログラムを検索し、見つかったものをダウンロードできる。
この後、エクスプローラーで更新プログラムのファイルをダブルクリックして実行すれば、その更新プログラムを適用できる。
![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/fc089648-2a31-4260-681b-d3f79976bf4e.png)

# 検索方法
KB番号だけで検索した場合、多くの更新プログラムがヒットし、目的の更新プログラムを見つけにくい。
![bbb - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/1cd7a7f1-dc8c-7c0f-04d3-290f62d2b86c.png)
そのため、OS名やバージョン、プラットフォーム(ビット数)を検索条件に加えることで目的の更新プログラムを見つけやすくする。
例えば64ビット版Windows 10バージョン21H1の場合、「windows 10」「x64」「21h1」を半角スペースで区切りつつ、検索ボックスに追加して再検索する。
32ビット版なら「x86」、ARM版なら「ARM64」をそれぞれ指定する。
![ccc - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/6276c2a6-a4b9-5af8-d62b-5f33d1f07a78.png)
rpc.mountd[2022]: Could not bind socket:(98) Address already in useのエラーについて

# 対処法
これはrpc.mountdというNFSマウントデーモンが使いたいポートが無くて困っているよというエラーで、
古いプロセスが残っていたらkillして、デーモン自体を再起動することで直せる。
古いプロセスの確認方法は
```
/usr/sbin/lsof -i
```

デーモンの再起動は以下のようにすること。

```
systemctl restart rpcbind
systemctl restart nfs-server
```
PostmanでのWebAPIテスト時にじゃまなログイン認証を不要にする方法

WebAPI作成時に役に立つのがPostmanですが、
認証された人だけが使えるようにシステムを組んでいた場合、PostmanからWebAPIを叩くと認証で弾かれてしまします。

# 解決策

何かいい方法はないかと探していたところ、ブラウザからログインしておけばCookieを同期する方法があったので導入しました。

https://tech.unifa-e.com/entry/2021/05/10/083532

具体的にはChromeで対象システムにログインをしておけば、CookieをPostmanに同期してくれるので、Postman側での認証も問題なく通過するという仕組み。

# 必要なこと
- ChromeにPostman Intercepterという拡張機能をインストール
- この拡張機能で対象ドメインのクッキーを取得するよう設定
- Postmanの対象APIでクッキーを同期するように設定

最初は少し手こずりましたが一度できて慣れてしまえば問題なくできると思います。

# まとめ
WebAPIの開発とテストは、これまでのサーバサイド開発とは少し異なるのでこういったツールを活用していく必要がありますね。
docker メモ

# ファミコン世代への説明例

|  | ファミコンで例えると|
|---|---|
|Docker| ファミコン本体
|Docker image| ゲームカセット
|Docker container| 本体にゲームカセット挿して稼働させたもの
|Docker hub| ゲームカセットを陳列しているお店

# 後片付け系コマンド
### 停止コンテナの一括削除

```bash
docker container prune
```

### 未使用のボリュームを一括削除

```bash
docker volume prune
```

### 未使用のイメージを一括削除

```bash
docker image prune -a
```

### 未使用のネットワークを一括削除

```bash
docker network prune
```

### イメージの一括削除

```bash
docker images -aq | xargs docker rmi
```

# ボリューム確認系コマンド

### ボリューム一覧

```bash
docker volume ls
```

### ボリュームの詳細

```bash
docker volume inspect <VOLUME_NAME>
```
Windows10　アップデート後　イヤホンから音が出ない問題

今日はいつものようにイヤホンをPCにさしたら、イヤホンから音が出ず、スピーカーから音が出ました。

イヤホンデバイスのプロパティを開いて音のテストをしようとすると、
「別のアプリケーションによってデバイスが使用されています。このデバイスにオーディオを再生しているデバイスをすべて閉じてからやり直してください。」と表示されました。

ネットで検索すると、[こちら](https://guidesy.net/ja/windows10%E3%81%A7%E3%80%8C%E5%88%A5%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E3%81%9D%E3%81%AE%E7%9E%AC%E9%96%93%E3%81%AB%E3%82%B5%E3%82%A6%E3%83%B3%E3%83%89%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%97)の記事を参考にして、

昨日Windows10アップデートで更新されたKB5012121をアンインストールし、
再起動すると正常に戻りましたので、
ひとまずメモしておきます。
「NFTって規格あるんですか？　ブロックチェーンにURL保存してるだけかと思ってた」への回答

> NFTって規格あるんですか？

Ethereum を前提に話します(それしか知らないw)。とあるインタフェース(関数)を持ったスマートコントラクトのことを NFT と言います。

そのインタフェースは ERC721 で NON-FUNGIBLE TOKEN STANDARD と定められました。
https://ethereum.org/ja/developers/docs/standards/tokens/erc-721/

ほかには ERC20 などがあります。これは一般に Ethereum 上での通貨としてよく使われます。加えて ERC721 は ERC20 のインタフェースを持っているので、ERC721 は ERC20 に対して互換性があります。
721 などの数値は GitHub の Issue 番号に由来します。 https://github.com/ethereum/EIPs/issues/721
ERC は RFC と同じで「Ethereum の改善案」を意味します。
参考: https://medium.com/metaps-blockchain-jp/eip-erc-vol1-244d1a4b2aff


> ブロックチェーンにURL保存してるだけかと思ってた

ERC721 では tokenMetadata というメソッドがあり、画像URLを格納できるようになっています。
Ethereum 上では、ストレージを使えば使うほど高額な費用が発生するため、企業のストレージか分散ストレージ(IPFS, arweaveなど)に保存してそのURLを保存しています。

OpenSea などのプラットフォームはアニメーションや動画などを扱うために ERC721 を発展させる規格を提案しています。
ゆえに NFT は、とあるインタフェースを持つスマートコントラクトであり単なる規格です。
各メソッドの中で何をするかは実装者に委ねられています。実装を含んだライブラリが存在し、脆弱性を作り込まないためにも利用が推奨されています(https://docs.openzeppelin.com/contracts/2.x/erc721)。
https://zenn.dev/kanegae_ims/articles/e2c9f790931fe2
正方形の画像を円形にするbash script

# 正方形の画像を円形にするbash script

正方形の画像を円形にしたいと思ったのだけど、imagemagickのコマンドはよくわからなかったので、ググって見つけた内容をbash scriptにしてみました。フルパスを引数に与えると、その数分処理してカレントディレクトリに circle-元のファイル名 で保存するようにしてあります。

M1 Mac (macOS Monterey)で動くのを確認しました。


```bash
#!/bin/bash
#
# usage: to-path.sh files(to crop circle)
#

for path in "$@"
do
  convert $path \( +clone -threshold -1 -negate -fill white -draw "circle `identify -format %w $path | awk '{print $1/2}'`, `identify -format %h $path | awk '{print $1/2}'` `identify -format %w $path | awk '{print $1/2}'`, 0" \) -alpha Off -compose copy_opacity -composite circle-`basename $path`
done
```

処理的には正方形でなくても受け付けられるようになっていますが、その時は楕円になるはずです。

## 元ネタ
ほぼそのままですみません。

https://daemonsandagents.tumblr.com/post/108369306151/imagemagick-ways-of-cropping-an-image-to-a

同じことで悩んでいる人は多そうですが、ImageMagickのコマンドも難しくてなかなか大変。
PythonでCSVの読み書き

listをcsvに書き込み，読み込みまたlistに戻す方法です．
```python:
import pandas as pd
```
pandasを使います．（他にも方法はありますが私の好みです）
初期装備ではないのでインストールが必要です．
#### CSVの書き込み
書き込みたいlistなどの変数をDataFrameに変換して保存できます．
```python:
df = pd.DataFrame(sample_lists)
df.to_csv('sample_lists.csv')
```

#### CSVの読み出し
```python:
df = pd.read_csv('sample_lists.csv', index_col=0)
sample_lists = df.values.tolist()
```
index_colをつけないと，自動でつけてくれた0.1.2.,,,のインデックスも一緒についてきてしまい邪魔です．
AWS Certified Security - Specialty合格しました！

<h3>はじめに</h3>
この4月からエンジニア3年目に入りました。
先日AWS認定のSCS試験を受験してきましたのでご報告です。
2021年7月末にAWS Certified Solutions Architect - Professional

https://qiita.com/kosuke_doi/items/0229ae98ddeb271b69ce

2022年の1月初めにAWS Certified DevOps Engineer - Professional

https://qiita.com/kosuke_doi/items/e46c9ce8a4e8c2041448

を取得し、うちの会社は資格を取得すれば出世するらしいので

https://qiita.com/Sunameri_Beluga/items/1559d33eb44b7a790a8f

AWS Certified Security - Specialtyを受験してきました。同じ資格を目指す人の役に立てば、ということで記事にします。

まずは結果から750点で合格のところ767点とギリギリでした。ギリギリでも合格は合格ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185845/7ff5016a-db36-52ac-88e1-0cb41a76121b.png)

<h3>受験時のコツ</h3>
今回受験したSCSは170分65問なので単純計算で1問当たり2分半で解答できれば全ての問題に解答することができます。私が受験した時は実際1問当たり2分もかからず、4,50分余りました。そのため合格ラインにいる人は、時間を気にせずに解いていっていいと思います。気にしなくてもいいと言ったものの2分間悩んでわからなかったら、フラグを付けて次の問題に行くことをオススメします。また解答に自信が無い問題にもフラグを付けておくことで全問完了後に見直す目安になるのと、フラグの数で手応えの基準にもなるかと思います(もちろん他のAWS資格でも同じことではありますが、、、)

<h3>教材</h3>
教材はいつものスキルビルダーのトレーニングです。
ログインした状態で次のリンクを踏めば確認できると思います。

https://explore.skillbuilder.aws/learn/course/762/exam-readiness-aws-certified-security-specialty-japanese

更新されているのかAWS DOPの時は各セクション当たり動画でのインプットと数問の練習問題と解説だけだったのが、動画でのインプットに加えて、各項目で押さえておきたいポイントや動画内で使用した資料とかなり内容が濃くなっていました。さらにトレーニングの最後には模擬問題として25問程度の問題も付いていました。解説もそれなりにしっかりしていて、ある程度AWSを触ったことがある人ならこれだけで十分合格できる内容になっていると思います。実際、私が本格的にAWSを触り始めたのは2020年の8月からなのでまだ2年も満たない人間でも取得できました。

そのあとにこちらも公式の無料の模擬試験を受験しました。

https://explore.skillbuilder.aws/learn/course/9159/aws-certification-official-practice-question-sets-japanese

内容的には8割くらいがスキルビルダーのデジタルトレーニングの最後の模擬問題とほぼ同じ問題でした。

教材3つ目ですね。こちらもいつものサンプル問題です。模擬試験と似ていたこともあって2回くらいしたら回答を覚えました。それくらい色んな所で同じような問題が使われています。本番も似たような問題が多かったです。

https://d1.awsstatic.com/ja_JP/training-and-certification/docs-security-spec/AWS-Certified-Security-Speciality_Sample-Questions.pdf

<h3>最後に</h3>
弊社の方がSCS受験に関する連載記事を書いていますので、よろしければそちらも参考にください。通し番号がもうすぐ40を超えるみたいです。

https://qiita.com/mingchun_zhao/items/c7e8075ea87765e90f30

少しづつ他の資格も取得していきたいですね。

以上、報告でした。

バッチがかなり増えてきました！いえええい！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185845/db2d284a-4386-4ac6-0e11-18b0067ccccd.png)
[Linux/Ubuntu] ntpを使わずに時刻合わせ（Proxy環境下でもOK）

# どうして…
- ある日、システムクロックがずれていることに気付きました。
- それは、今まで大変お世話になっていた以下のやり方が使えなくなったからでした。
    - [[2022-04-01をもって利用不可] ntpを使わずに時刻を合わせるワンライナー (Proxy環境下でも安心)](https://qiita.com/pankona/items/258fed78c168918a8ad2)

# これからどうするの？
- なぜ使えなくなったかというと、NICTがhttp/httpsを利用した時刻配信サービスを終了したためです。
- ということは、別の場所から時刻情報を引っ張ってこられれば、継続してこの方法は使えるわけです。
- 解決策では、次のページの情報を参考にしました。
    - [時間を自動設定するシェルスクリプト(プロキシ対応)](https://dev.matumo.com/898/)

# 解決策
- 以下のコマンドで時刻を合わせることができます。
```bash
sudo date --set "$(wget -q http://worldtimeapi.org/api/timezone/Asia/Tokyo.txt -O - | grep ^datetime | cut -d " " -f 2)"
```
- cronを利用して、起動時と毎日5時に時刻合わせする方法について解説します。
    - まず、時刻合わせにはroot権限が必要なので、一般ユーザーのcronに登録しても期待通りに動いてくれません。
    - したがって、`$ sudo crontab -e`とコマンド入力し、rootのcrontabにコマンドを登録します。
    - 登録内容は以下の通りです。
```txt:crontab
# 起動時に時刻合わせ
@reboot sleep 20s && date --set "$(wget -q http://worldtimeapi.org/api/timezone/Asia/Tokyo.txt -O - | grep ^datetime | cut -d " " -f 2)"

# 毎日5時に時刻合わせ
00 5 * * * date --set "$(wget -q http://worldtimeapi.org/api/timezone/Asia/Tokyo.txt -O - | grep ^datetime | cut -d " " -f 2)"
```
- 起動時（`@reboot`）に`sleep 20s`が必要な理由は、ネットワークサービスが起動する前にcronサービスが起動してしまうからです。（スリープする時間は調整してください。）
    - [RaspberryPiでcronの@reboot使用時の注意](https://pcvogel.sarakura.net/2018/02/13/31808)


# 参考：各分割コマンドの実行結果
```
$ wget -q http://worldtimeapi.org/api/timezone/Asia/Tokyo.txt -O -
abbreviation: JST
client_ip: 2001:cf8:0:6c::201
datetime: 2022-04-14T13:16:13.643268+09:00
day_of_week: 4
day_of_year: 104
dst: false
dst_from: 
dst_offset: 0
dst_until: 
raw_offset: 32400
timezone: Asia/Tokyo
unixtime: 1649909773
utc_datetime: 2022-04-14T04:16:13.643268+00:00
utc_offset: +09:00
week_number: 15
```
```
$ wget -q http://worldtimeapi.org/api/timezone/Asia/Tokyo.txt -O - | grep ^datetime
datetime: 2022-04-14T13:16:13.643268+09:00
```
```
$ wget -q http://worldtimeapi.org/api/timezone/Asia/Tokyo.txt -O - | grep ^datetime | cut -d " " -f 2
2022-04-14T13:19:07.760507+09:00
```
ZoKrates

# ZoKratesとは

ZoKratesはzk-SNARKのツールボックスです。
前回、ZK-SNARKについてcircomとsnarkjsを用いて実装してみたのですが、remixで完結できそうなのでこちらも試してみました。ただ、githubによると"This is a proof-of-concept implementation. It has not been tested for production."とかかれているので、production環境に移行する時には、注意が必要そうです。(remixのplugin自体も現時点ではBETAと書かれているようです。)

# 方法

```
//インストール
curl -LSfs get.zokrat.es | sh

//サーキットを作成
def main(private field x, field y):
  assert(x * x == y)
  return

//コンパイル
zokrates compile -i root.zok

//セットアップ
zokrates setup

//AliceがProofを作成する
zokrates compute-witness -a 4 16
zokrates generate-proof

//verify
zokrates verify

//verifierの作成
zokrates export-verifier

```


//remixで、ZIKRATESを読み込んで、直接実行することも可能

```
def main(private field a, field b) -> bool:
	return a * a == b
```


![スクリーンショット 2022-04-14 12.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/4e183cc0-1f18-d874-19c6-e286cace0464.png)



#参考


https://zokrates.github.io/

https://github.com/Zokrates/ZoKrates

http://extropy.foundation/workshops/zkp/zokrates.html

https://medium.com/cornellblockchain/a-brief-dive-into-zk-snarks-and-the-zokrates-toolbox-on-the-ethereum-blockchain-cb7bd7f00fdc

https://medium.com/coinmonks/zokrates-zksnarks-on-ethereum-made-easy-8022300f8ba6

https://zokrates.github.io/print.html

https://scrapbox.io/acompany-rd/ZoKrates
Vue3系 v-router 使い方

## はじめに
rails勉強して半年の初学者です
今回、vue３系を使ってアプリを作成する中で
２系の記事が多いなと思ったので、
今回は、３系での使い方をお伝えできればと思います。
至らぬ点あるかと思いますが、頑張ります

## vue-router編
### 開発環境
rails:6.1.5
ruby:3.0.0
vue:3.2.31
vue-router:4.0.14
   

### インストール
まずはインストール(yarnを使っています）
```console:コンソール
yarn add vue-router
```
### 実装例
例として、トップ画面(/topにアクセスした時)を作ります。

```vue:app/javascript/pages/top/index.vue
<template>
  <div class="text-center">
    <h3>タスクを管理しよう！</h3>
      <p>生活や仕事に関するタスクを見える化して抜け漏れを防ぎましょう。</p> 
  </div>
</template>
<script>
export default {
  name: "TopIndex",
}
</script>
```
トップ画面を表示するルーテングの設定
```javascript:app/app/javascript/router/index.js
import { createWebHistory, createRouter } from "vue-router";　 
import RegisterIndex from '../pages/top/index.vue'

const routes = [
    {
      path: '/top',
      component: TopIndex,
      name: "TopIndex"
    },
];

const router = createRouter({ 
  history: createWebHistory(),
  routes,
});
export default router
```
vueインスタンスに変数routerを渡す
```javascript:app/javascript/packs/hello_vue.js
import { createApp } from "vue";
import App from "../app.vue";
import router from '../router' 

document.addEventListener("DOMContentLoaded", () => {
    const app = createApp(App);
    app.use(router).mount("#app")　
});
```
作成したルートを読み込むリンクを追記します
```vue://app/javascript/app.vue
<template>
    <router-view />
</template>
```
これで、/topにアクセスすると、topindex.vueの内容が表示されるはず！
### 公式サイト
#### vue-router
https://router.vuejs.org/guide/
コンテナを起動しても直ぐに終了してしまう件

作ったコンテナをコミットして、新しくイメージを作った後起動しても、直ぐに終了してしまいます。

```bash
Extra argument bash.
```
このエラーが、でてコンテナを起動できないのです。

検索したら、この記事を見つけました。

https://stackoverflow.com/questions/54328586/docker-run-fails-error-extra-argument-xxx

Dockerfileの、この記述が、要因です。

```dockerfile
EXPOSE 22
ENTRYPOINT [ "/usr/sbin/sshd","-D"]
```

コミットして新しく生まれたコンテナで、CMDの初期値に、
```bash
/usr/sbin/sshd
```
が記録されていることが、起動できない原因です。
私が見つけた質問の解決先として、
```dockerfile

ENTRYPOINT [ "/usr/sbin/sshd"]
CMD ["-D"]
```
としていました。

でも、私は、ビルドできませんでした。