OmniAICreator/Qiita-1.07M huggingface dataset:
cacとinquirerでコマンドを作ってみた

### cac
javascript製のCLI作成ライブラリ。cacはCommand And Conquerの頭文字を取ったものだそう。なぜConquerなのかは。。。

[npmのcacのページリンク](https://www.npmjs.com/package/cac)

```typescript
import cac from 'cac'

const cli = cac()
cli.command('Scream <word>', 'Scream someting')
    .option('--color-red', 'font color red')
    .option('--color-blue', 'font color blue')
    .action((word, option) => {
        let fontColorEscape = ''
        if (option.colorRed) {
            fontColorEscape = '\x1b[31m'
        } else if (option.colorBlue) {
            fontColorEscape = '\x1b[34m'
        }

        console.log(`${fontColorEscape}${word}`)
    })

cli.help()
cli.parse()
```

### inquirer
対話型CLIを簡単に作成できるjavascript製ライブラリ。

[npmのinquirerのページリンク](https://www.npmjs.com/package/inquirer)

```typescript
import { prompt, QuestionCollection } from 'inquirer'

export default async (): Promise<void> => {
    // input
    const givenNameField: QuestionCollection = [
        {
            type: 'input',
            message: "What's your given name?",
            name: 'givenName'
        }
    ]
    const givenName = await prompt(givenNameField).then((givenName: any) => {
        return (givenName as { 'givenName': string })['givenName']
    })

    // required
    const familyNameField: QuestionCollection = [
        {
            type: 'input',
            message: "What's your family name?",
            name: 'familyName',
            validate: (answer: any): boolean | string => {
                if (answer.length < 1) {
                    return 'Required fields'
                }

                return true
            }
        }
    ]
    const familyName = await prompt(familyNameField).then((familyName: any) => {
        return (familyName as { 'familyName': string })['familyName']
    })


    // select
    const listQuestions: QuestionCollection = [
        {
            type: 'list',
            name: 'address',
            message: 'Where is your address?',
            choices: [
                'Shinjuku',
                'Shibuya',
                {
                    name: 'Yotsuya',
                    disabled: 'disabled'
                },
                'Nakano'
            ]
        }
    ]
    const address = await prompt(listQuestions).then((address: any) => {
        return (address as { 'address': string })['address']
    })

    // multiSelect
    const checkboxQuestions: QuestionCollection = [
        {
            type: 'checkbox',
            message: 'What is your favorite color?',
            name: 'color',
            choices: [
                { name: 'red' },
                { name: 'green' },
                { name: 'blue' }
            ]
        }
    ]
    const colors = await prompt(checkboxQuestions).then((answers: any) => {
        return (answers as { 'color': string[] })['color']
    })

    console.log(
        `Name: "${ givenName }  ${ familyName }"
        Address: "${ address }"
        Color: "${ colors.join(', ') }"`
    )
}
```
未経験からインフラエンジニアを目指して⑥

## フリースペース(好きに書かせて貰いますのコーナー)
なんと明日から案件に取り組む事になりました！！
初めての案件対応なので、ワクワクとドキドキが半端ない状況です。
｢ちゃんと出来るか不安だなぁ｣という事はもちろんあるのですが、一番不安なのは

<font color="blue">**｢きちんと早起きできるか心配だ！！！｣**</font>

が、一番の不安の種です。
と言っても、エンジニア1年生ではありますが、社会人経験は人並みにあるので
自分できちんと起きれるように対策打ちますけどね。

・・・家族に起こして貰えば安心だなぁ。
冗談です、目覚ましちゃんと準備して自分だけで起きる為に、今日は早く寝る事にします。
(でも家族にもお願いしておこう、一応ね、保険としてね)

**＜お知らせ＞**
当面の目標については目的意識がブレないように、毎回記載しています。
無事達成して次の目標を定める時には随時更新していきます。
## 取り組み内容(当面の目標)
- ネットワークについての知識を会得し、理解を深める
- 頭で覚えただけでなく、きちんと専門用語を用いて説明出来るようになる
- 資格取得(CCNA)する

**<font color="Red">資格取得はスタートライン！実際の作業で滞りなく行えるようになる！！</font>**
## 今回行った学習
**1. CCNAの問題集への取り組み**
本日は昨日の続き！
学習したのに覚えられていない事を復習した後、再テストを行いました。

学習方法は昨日同様、不正解の問題を本やWebから情報を調べながら再回答して
理解出来たか確認しつつ進めました。
私としては鬼門と思っている｢サブネット｣ですが、色々調べながら問題を解いていくと
本を読んでいただけの時よりも、理解度が向上してきました。
それでも、1問に対する回答時間がかなり掛かってしまっているので、まだまだ頑張ります。
ただ、ここばかりに囚われている訳にもいかないので、別の内容を覚えつつ、時間を見つけて
本やWebで解説内容を探して理解を深めていきます。

本日の最後に再テストを行いました。
時間切れになってしまい、該当箇所全ての回答はできなかったのですが
> **初回の正解数＝33問中11問**
**再テストの正解数=33問中23問**

という結果になりました。やれば出来るじゃん、自分！！

いや、まだまだなのはわかっています、でも少しでも成長出来たら嬉しいです。
これを糧にもっともっとスピード上げて成長していきます！

**明日も学習した事を書いていきたいと思います。**
CloudWatch Synthetics Canary で別タブで開いてしまったときにやったこと

こまりました。

Puppeteerだと以下のようなコードでPageオブジェクトを取得する方法が見つかります。

```js
// pageのpopupイベントから
let openNewPage = new Promise(resolve => 
  page.once('popup', resolve));
// browserのtargetcreatedイベントから
let openNewPage = new Promise(resolve => 
  browser.once('targetcreated', target => resolve(target.page()));

await page.click('.target-link')
let newPage = await openNewPage;
```

これを`syn-nodejs-puppeteer`で行うと、ページは取得できるものの、ステップで取得してくれるスクリーンショットの対象などが元ページのままで、新タブに変わりません。
bringToFrontを行ってから、もう一度Pageオブジェクトを取り直すなどもやってみたのですが、うまくいきませんでした。

ということで、別タブでの操作はあきらめて `開いたタブのurlを取得して、元のページでgotoで移動` ということにしました。

```js
let newPage = await openNewPage;
const url = await newPage.evaluate(() => window.location.href)
await page.goto(url);
```

`targetcreated` イベントだと `target.url()` でURLも取れるようです。新規タブが作成後にリダイレクトで飛ばないようなら、こちらのほうがスッキリするかもしれません。
bringToFrontで自動的にスクショ対象が変わるといいですね。

```js
let openNewPage = new Promise(resolve => 
  browser.once('targetcreated', target => resolve(target.url()));
await page.click('.target-link');
let url = await openNewPage;
```
Docker Apache laravel 環境構築をしたらApacheが404を返してきた

# 概要

- Dockerでローカル開発環境構築中にApacheが404を返してきて困ったので解決策を記載しておく。

# 事象

1. 下記のDockerイメージを使ってApache ✕ Laravelの環境構築後に404のエラーが返される様になった。
    - [https://hub.docker.com/layers/php/library/php/8.0.16-apache/images/sha256-94c7a73f481911e21c53fe7260785a2c1e17733ad0ff5b800c72f3a655ae64b4?context=explore](https://hub.docker.com/layers/php/library/php/8.0.16-apache/images/sha256-94c7a73f481911e21c53fe7260785a2c1e17733ad0ff5b800c72f3a655ae64b4?context=explore)

# 自分の場合の解決方法

1. 下記記事を参考に一個一個確認していったところApacheの設定ファイルに下記を追記したところ問題が解消した。
    - [Apacheを使ってLaravelのページを表示できない時の対応方法](https://qiita.com/ponsuke0531/items/cc07807d92ecad60a82f)

    ```laravel.conf
    LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
    ```

1. Apacheの設定ファイルの全体像を下記に記載する。

    ```laravel.conf
    LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
    
    <VirtualHost *:80>
      DocumentRoot /var/www/html/public
      <Directory "/var/www/html/public">
        AllowOverride All
      </Directory>
    </VirtualHost>
    ```

1. PHPコンテナ（Apacheも含む）を再起動後下記のコマンドも実行した。

    ```terminal
	$ php chmod -R 0777 /var/www/html/public
	$ php chmod -R 0777 /var/www/html/bootstrap
	$ php chmod -R 0777 /var/www/html/storage
    ```
Flutter を Netlify で公開する方法

<h1>Flutter を Netlify で公開する方法</h1>

[注] Netlify と Github 連携済みが前提です。


Netlify って何??って方や
Netlify と Github の連携の仕方が分からない方は以下のサイトをご参照ください。

https://bagelee.com/design/netlify/about-neflify/

https://reffect.co.jp/html/netlify-create-account-first-time#i


------

<h2>why</h2>

僕の場合下の方法を試したのですが、なぜか deploy failed to compile になってしまいました（原因だけでも大丈夫ですので教えてほしいです。。。）

https://qiita.com/Moo_Moo_Farm/items/079bd4dd04ef2f99fe91

<br><br>
なので、 [こちら](https://medium.com/@D10100111001/flutter-web-netlify-continuous-deployment-the-right-way-in-2-minutes-f2ed4a4fcbf7)の記事を参考にdeployしました。


<h3>0. buildする前に</h3>
netlify で公開したいフォルダのターミナルで<br>
<code>flutter doctor</code> 
<br>を実行してみる。

![flutter doctor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169911/4164401e-e49b-f714-98c5-237c40f3f965.png)

オールOKなら次のSTEPへ👍



<h3 id="build">1. build</h3>
Netlify で build してくれないならローカル環境で build してそれを渡す!<br>
下記のコードを実行すると<br>
[フォルダ名]/build/web にファイルが生成される。
生成されたファイルを Netlify に deploy する。!

<code>flutter build web</code>
![flutter_build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169911/a10797ab-5719-68fc-c912-8222e34a452d.png)

<code>💪 Building with sound null safety 💪</code>
がでればOK

<h3>2. .gitignore を修正</h3>
GitHub に build したファイルを push したいので<br>
[フォルダ名]/.gitignore ⇦ を編集する。

```.git: before
# Flutter/Dart/Pub related
・・・
/build/
```
上の状態だと git の up 対象から外れている。

```.git: after
# Flutter/Dart/Pub related
・・・
/build/*
!/build/web
```

<code>after</code> の状態で/build/webがgitの管理対象に新しく追加される。



<h3>3. いざDeploy</h3>

1. [Netlify](https://www.netlify.com/)へログイン

2. Add new site
3. Import an existing project from a Git repository
4. 画面左下らへんの GitHub を選ぶ.
5. 認証が終わったら自分の deploy したいレポジトリを選ぶ.
6. build setting画面にて、publish directory欄に<br> <code>build/web</code> <br>を入力。その他の項目は何も入力しなくておっけーです🙆‍♂️
 
<h3> 4. まとめ </h3>
deploy できましたか？


![まとめ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169911/030229af-0df1-3801-be4b-951f29c89953.png)

こんな感じで緑色のURLが画面に表示されていたら出来てます👍
お疲れ様でした^o^

<h3>5. 参照</h3>

https://medium.com/@D10100111001/flutter-web-netlify-continuous-deployment-the-right-way-in-2-minutes-f2ed4a4fcbf7

https://qiita.com/Moo_Moo_Farm/items/079bd4dd04ef2f99fe91

<h3>6. この方法の残念な点<h3>
 
この方法は, 自動で<code>build</code>してくれないため
netlify と更新したい時は
[1. build](#1-build)
 の <code>flutter build</code>
を実行して GitHub に push しなくてはならないです。
(少しめんどくさい(;o;))


<h3>7. おまけ(URL名変更)</h3>
ちなみにデフォルトのままだとよく分からないURL名になっていると思います。<br>
せっかくなら自分の好きなURL名にしたいですよね。<br>

1. URL名の下にある <code>Site settings</code> を選択
2. 少し下にスクロールすると <code>Change site name</code>を選択すると好きなURL名に変更できます👍

![ファイル名.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169911/8d99bba7-cfda-5ca8-7a16-989fdb4b1081.png)


netlify 便利:grin:
splitlines() 使用してみた

# 概要
1: splitlines() とは？
2: 使い方

※ 文字列の除去に関して使用する機会があったので、備忘録として記載
（ 正規表現やスライスを使いこなせるようになると、もっと表現の幅が広がりそうなので少しづつ学んでいきたい。)

# 検証環境
OS：18.04.5 LTS
Python：3.6.9

## 1: splitlines() とは？

splitlines()は、文字列を改行コードで分割したい時に利用します。
splitlines()を使うことで改行コードで分割されリストに格納されて戻ってきます。

## 2:splitlines() 使い方

* 文字列内に空白が入っていた場合、除去する。

```python
# splitlines()を使用

word = "リトルグリーンメン\nだっふぃ～\nドナルド\nミッキー"
word = word.splitlines()
print(word)

# 結果
['リトルグリーンメン', 'だっふぃ～', 'ドナルド', 'ミッキー']
```
Vercelでデプロイしたプロジェクトの削除方法

Vercelのデプロイ方法の記事はたくさんあったのですが、
間違ってプロジェクトを作ってしまった場合などの削除方法がよくわからなかったので、
まとめておきます。

参考URL：https://vercel.com/docs/concepts/projects/overview

# Vercelのプロジェクトの消し方

1. トップの自分の名前をクリックし、　
   "<font color="blue">Overview</font>" タブをクリックしプロジェクト一覧を表示させる

2. 消したいプロジェクトをクリックし、 "<font color="blue">Settings</font>" タブをクリック

3. 左側に
     General
     Domains
     .
     .
     .
     Advanced
    と書かれたメニューの中の一番下の "<font color="blue">Advanced</font>" をクリック

4. 下の方に、赤い "<font color="red">Delete</font>" ボタンがあるのでクリック。

5. Enter "プロジェクト名" to continue:とあるので、"プロジェクト名" を入力し、
   "<font color="red">DELETE PROJECT</font>"をクリック

:::note success
見事消せました！
:::
Rustを理解する～静的型付けの初めてのRust勉強～

# 概要
rustを勉強したいと思っていてもいまいち理解しているかわからない
なのでこういった記事を自分なりに書いて理解をすすめるようにするための記事
完全に自己満なのでもし見た人がいた場合は、参考にならない場合もあるし間違った理解している場合もあります。
将来的には、Rustを使っている企業で仕事をしたいなーって思っています。

# 最初はこんなもん
最初は特に書くこと無いので次回からしっかり理解しながら進めていく
単元ごとになればいいけど参考にしている本を読みながら自分なりに噛み砕いて進めていく予定なのでなにか指摘あればよろしくお願い致します。
【docker】sudoなしでdockerコマンドを実行する方法

ubuntu(WSL2)でdockerコマンドを実行する際に``sudo``を省略できるようにする方法をメモしておく。

# 問題
dockerコマンドを実行する際に``sudo``を付けずに実行すると

```
$ docker images
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.24/images/json": dial unix /var/run/docker.sock: connect: permission denied
```
dockerコマンドは、デフォルトではroot権限がないと実行できないようになっているらしい。

# 解決策
1つの解決策は``sudo``をdockerコマンドの前につけて実行する方法。

```
sudo docker images
```
しかし、これだと毎回dockerコマンドを実行する度に``sudo``を付けないといけない。
そこで、dockerグループにユーザを追加することで、``sudo``なしでdockerコマンドを実行できるようにする。
まず、Dockerグループが存在するか確かめてみる。

```
$ getent group docker
docker:x:999:
```
このdockerグループにユーザを追加する。
```
sudo usermod -aG docker $USER
```
dockerグループにユーザが追加されているか確認する。
```
$ getent group docker
docker:x:999:<ユーザ名>
```
そして、最後に再起動して``sudo``なしでコマンドが実行できるか確認したら実行することができた。【参考:[docker docs](https://docs.docker.com/engine/install/linux-postinstall/#manage-docker-as-a-non-root-user)】
Target class [Database\Seeders\class=HogeTableSeeder] does not exist.

Laravelのseederを使用中、初歩的なミスでちょっと？？となったので記録。

ローカルで動くことを確認しているシーダーをデプロイ中のこと。

```
composer dump-autoload
php artisan optimize
php artisan db:seed class=SettingTableSeeder
```

を実行すると、

```
   Illuminate\Contracts\Container\BindingResolutionException

  Target class [Database\Seeders\class=SettingTableSeeder] does not exist.
```

と出たのでおかしいなあ、クラス名のタイプミス・・・でもないなあ。
今 pull したソース　namespace入ってるかなあ。

```
namespace Database\Hoge;
```

あるなあ・・・

結論。
artisanコマンドミスってた。

```
間違い　php artisan db:seed class=SettingTableSeeder
正しい　　php artisan db:seed --class=SettingTableSeeder
```

-- が抜けていますが、こんな構文ミスみたいなコマンド叩いても一応動くので先入観でcomposer dump-autoloadとかを繰り返しトライする無駄な時間ができました。
Angularってどんなもの

## はじめに
前回AngularJSをご紹介しました。
今回はフレームワークの中でもAngularについて紹介したいと思います。
また、前回紹介したAngularJSとの違いについても紹介できればと思います。


## Angularとは...
AngularはGoogle社によって開発されているJavaScriptフレームワークです。
非常に人気があり、WEBアプリケーションの開発では、Reactなどと並びよく利用されているJavaScriptフレームワークの一つです。
オープンソースライセンスであるMITに基づいて配布されています


## AngularJSとAngularの違い
Angularは開発初期では「AngularJS」というプロダクト名でした。しかし、バージョン2にアップデートされたときに「Angular」に改名しています。
ただ、その中身は大幅に様変わりしています。
AngularJSはJavaScriptをベースとしたフレームワークですが、バージョンアップの際にTypeScriptをベースにしたものに変更されています。そのため、AngularとAngulerJSに互換性はありません。


## メリット／デメリット
### 【メリット】
**・フロントエンドの機能開発が可能**
　AngularはUI構築だけでなく、ルーティングや状態管理などフロントエンド開発に必要な機能が一通り揃っています。
　特に新しく何かライブラリ等を追加しなくてもフロントエンド開発を始められる手軽さが強みです。
　

**・あらゆるプラットフォームに対応**
　通常WEBアプリケーションを開発する際に、PCやスマートフォン、タブレットなど、動作を意識する必要があります。しかし、AngularではWEB、モバイルWEB、ネイティブモバイル、ネイティブデスクトップなどあらゆるターゲット向けのアプリケーション開発で使えます。
　

### 【デメリット】
**・TypeScriptの学習が必須である**
　別のフレームワークであるReact、VueJSはTypeScriptを任意で開発に使うことができます。
　しかし、Angularはロジックの記述はTypeScriptを使用して記述するので、開発にあたってはTypeScriptの知識が必須となります。
　Angularの開発には型付けなどのTypeScriptの仕様を把握しなければならないので、TypeScriptを学習したことのない人には少々ハードルが高いです。
　

**・開発の規模によってはオーバースペックである**
　Angularはフロントエンド開発に必要な様々な機能が搭載されています。
　しかし、開発規模によっては必要のない機能などもあります。
　例えば、小規模な個人サイトなどで状態管理の機能はあまり必要のない機能です。このように、開発規模によっては必要のない機能までついてくるので、その点は注意が必要です。
　

## Angularの主な機能
**・MVC（MVW）**
　MVC（MVW）というのはアプリケーションを設計するときの考え方の1つです。
　「Model（データ）」、「View（画面）」、「Controller（コントローラー）」の頭文字を取ってMVC、「Controller（コントローラー）」の代わりに「Whatever（何か）」にしたものがMVWです。
　組み合わせることで、1つのアプリケーションを動作させる考え方です。実のところ、MVCもMVWも大差はありませんので、あまり気にせずそういう枠組みで考えるんだということで次に進みましょう。

　MVC（MVW）では、データを扱う部分（Model）、HTMLやCSSなどの画面を作る部分（View）、他の細かい制御を行う部分（ControllerまたはWhatever）など、役割が違うプログラムを、混在させない（別々のファイルで管理する）ため、アプリケーションの設計がスムーズに行えるのです。
　

**・双方向データバインディング**
　HTMLを拡張して、より便利な機能を提供しています。
　どんなアプリケーションでも、ユーザーが画面（View）で操作した内容をデータ（Model）に反映したり、データ（Model）の内容が変わったときに画面（View）に反映したりする必要があります。
　WEBアプリケーションで、画面（View）を操作する場合は、データ（Model）に反映するために、以下のような動作をするようにプログラムを書く必要があります。
![キャプチャ01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2109838/f5748124-c656-f34d-f8f4-78c1c2f78caf.png)

　しかし、Angularの双方向データバインディングを使うと、以下のように、HTMLの要素が処理を行うプログラムと連動し、自動的に処理されるのです。
![キャプチャ02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2109838/4f277cb8-7c4e-12d0-35ea-18f86daaaf96.png)
　ここまでは、画面の要素を操作したらデータに自動的に反映されることを説明しましたが、逆に、データを変更すると自動的に画面に反映されるようにもなります。
　本来はプログラムコードを組む必要がある処理をAngularが対応してくれるため、より少ないコードで機能を実装できるようになっています。
　

**・コンポーネントの作成が早い**
　コンポーネントには2つのメリットがあります。
　・同じような要素を多くのページで使い回すことができる
　・各ページのHTMLが読み書きしやすくなる
　
　コンポーネント内の要素を変更する場合は、コンポーネントの部分を変更するだけで済み、各ページを修正する必要はありません。
　
　コンポーネントの作成は「angular-cli」というコマンドラインツールでも作成することができます。
　このCLIを使用するとコンポーネントの作成が早くできます。
　コンポーネントを作成するには下記のコマンドを実行することで、指定したコンポーネント名、場所に.html、.css、.ts、.spec.tsファイルが作成されます。
```
ng g component (コンポーネント名) (作成する場所)
```
　

## おわりに
Angularを理解するために基礎知識を簡単に解説いたしました。
Angularを一言で表すと『Google社によって開発されたJavaScript向けオープンソースWebアプリケーションフレームワーク』です。
少しでも役に立てればと思います。
Angulerを使って開発してみましょう。
CoffeeScriptのメモ

たまに業務で使うのですが、忘れてしまうのでメモ。

# CoffeeScriptってそもそも何？

私も今の会社に入って初めて聞きましたが、昔流行っていたJavaScriptにコンパイルされるプログラミング言語です。
JavaScriptを簡略化して書けるみたいですね。

# コメント
```Text:コメント
# コメント

###
複数行コメント
###
```

# 変数
```CoffeeScript:CoffeeScript
hoge = "hoge"
```
変数宣言のキーワードとセミコロンが必要ありません。

# 配列
```CoffeeScript:CoffeeScript
array = [
  "aaa"
  "bbb"
  "ccc"
]
```
変数宣言のキーワードとカンマとセミコロンが必要ありません。

# メソッド
```CoffeeScript:CoffeeScript
hoge = ->
  alert "アラート"
```
引数を使用する場合は下記
```CoffeeScript:CoffeeScript
hoge = (fuga)->
  alert "huga" + fuga
```
# if文
```CoffeeScript:CoffeeScript
if true == true
  console.log 'true'
else
  console.log 'false'
```

# jQueryで使用する

## 例：クリックイベント
```CoffeeScript:CoffeeScript
 $('#btn').click (e) ->
     alert "こんにちは"
```

## 例：マウスオーバー&アウト
```CoffeeScript:CoffeeScript
$('#btn').hover ->
    $(@).css("color", "#fff")
,->
    $(@).css("color", "#000")
```

# 感想
Javascriptの歴史に触れることができました（笑）
Sync Gateway 機能解説：メトリクスREST APIとパブリックREST API


## はじめに

ここでは、Couchbase Mobileを構成するSync Gatewayの機能であるメトリクスREST APIとパブリックAPIについて解説します。

なお、Couchbase Mobileについては、[Couchbase Mobileアプリケーション開発へのロードマップ](https://qiita.com/yoshiyuki_kono/items/6a5bbad1b02196a25417)に記事をまとめている他、（これらの記事を元に構成した）以下の電子書籍を無償で頒布しています。

https://techbookfest.org/product/5074954942939136?productVariantID=5042865933647872

また、Couchbase Mobileは、Couchbase LiteとCouchbase Serverとのデータ同期機能を提供します。Couchbase Serverの存在意義、機能詳細、利用方法等については、拙著[NoSQLドキュメント指向データベースCouchbase Serverファーストステップガイド(インプレスR&D刊)](https://www.amazon.co.jp/-/en/%E6%B2%B3%E9%87%8E-%E6%B3%B0%E5%B9%B8/dp/429560030X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1636588872&sr=1-1)や、[NoSQL/JSONデータベースCouchbase Server理解・活用へのロードマップ](https://qiita.com/yoshiyuki_kono/items/4c9cd1115efc5807b49f)にまとめてある記事をご参考ください。

## メトリクスRest API


###  概要
Sync GatewayのメトリクスREST APIを提供し、パフォーマンスデータの収集を簡単かつ安全にしています。



### エンドポイント

以下のような、2つのエンドポイントがあり、2つの形式のいずれかでデータを受け取ることができます。

- `_metrics`エンドポイントは、PrometheusフォーマットでSync Gatwwayの統計情報を返します（例：GET <host>:4986/_metrics）。以下に参考情報を記します。

https://docs.couchbase.com/sync-gateway/current/stats-prometheus.html

https://blog.couchbase.com/monitoring-sync-gateway-prometheus-grafana/


- `_expvars`エンドポイントは、Sync Gateway統計情報をJSON形式で返します。





### APIエクスプローラー

以下のような、SwaggerベースのAPIエクスプローラーが公開されています。
APIエクスプローラーは、すべてのエンドポイントを機能別にグループ化しています。
ラベルをクリックすると、展開されエンドポイントに関する詳細を確認できます。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/b475906a-46c5-6b3c-bced-2e48c8e9ed33.png)


https://docs.couchbase.com/sync-gateway/current/rest-api.html


## パブリックREST API

### 概要

パブリックREST API の利用はオプションであり、Couchbase Lite とCouchbase Server の同期による、オフラインファーストアプリケーション、あるいはエッジコンピューティングのためのデータプラットフォームとしての利用のためには、必ずしも利用する必要はありません。

Sync Gatewayが提供する、データベースや、ドキュメントの操作などのREAT APIとしての公開されている機能を、別のアプリケーションとの連携のために利用することが考えられます。



### APIエクスプローラー

以下のような、SwaggerベースのAPIエクスプローラーが公開されています。
APIエクスプローラーは、すべてのエンドポイントを機能別にグループ化しています。
ラベルをクリックすると、展開されエンドポイントに関する詳細を確認できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/45307a5f-b3eb-9bc2-bcb4-73bfddbff06f.png)

### 構成

各REST APIは、それぞれ異なるポート番号を使います。ユーザーは、ポート番号を変更することも可能です。

また、ユーザーがREST APIにアクセスできるようにするには、ユーザー用にCouchbase ServerベースのRBACユーザーを作成する必要があります。

構成方法等の詳細については、ドキュメントを参照してください。

https://docs.couchbase.com/sync-gateway/current/rest-api-access.html

https://docs.couchbase.com/sync-gateway/current/rest-api-access.html


### 関連情報

https://docs.couchbase.com/sync-gateway/current/rest-api-metrics.html


https://swagger.io/
vscode vim モードごとの色替え

 
## 必要な拡張機能
- [VSCodeVim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
- [Customize UI](https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui)

## 設定
` #vscodevim\\.vim\\.primary[aria-label `の部分は` ヘルプ > 開発者ツールの切り替え `で確認しました。
```setting.json
"customizeUI.stylesheet": {
    "#vscodevim\\.vim\\.primary[aria-label=\"-- NORMAL --\"]": "color: #2c2e34 !important; background-color: #85d3f2 !important;",
    "#vscodevim\\.vim\\.primary[aria-label=\"-- INSERT --\"]": "color: #2c2e34 !important; background-color: #a7df78 !important;",
    "#vscodevim\\.vim\\.primary[aria-label^=\"-- VISUAL\"]": "color: #2c2e34 !important; background-color: #e7c664 !important;",
    "#vscodevim\\.vim\\.primary[aria-label^=\":\"]": "background-color: #7f8490 !important;",
},
```
#### 結果
![normal_mode.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2583987/87dd98ac-34bf-fbe7-5136-2e4bb0ac053a.png) ![insert_mode.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2583987/2e5cca7d-6424-62fc-04d4-cf98d54312bd.png) ![visual_mode.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2583987/fe0c7921-6fe9-5e9a-a70d-400bc190d2de.png) ![com_mode.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2583987/6453f28d-a534-971c-4e17-a90d63fbbb7e.png)

## 参考
https://github.com/VSCodeVim/Vim/issues/2124#issuecomment-845283129

## vscode-powerline
2022/12/17追記
こんなやつもあるみたい
https://github.com/pcwalton/vscode-powerline
ExcelをRead Onlyで開く方法

https://office-hack.com/excel/read-only/
クイックアクセルツールバー＞その他のコマンド＞基本的なコマンド→全てのコマンドとして下の方に

”読み取り専用の設定/解除”とあるのでそちらを追加して
出来ました。(*^_^*)
AWS Lambda から利用するならもうほとんど S3 じゃなくて DynamoDB では？

# TL; DR

- Lambda から読み書きする先には DynamoDB を使え


# 先行研究

- https://zenn.dev/nnnto/articles/2821c04de83778
- https://serverless.pub/s3-or-dynamodb/


## おまけ

### 雑にまとめ

> S3の読み取り平均時間 0.14秒
> DynamoDBの読み取り平均時間 0.03秒

とあるので Lambda からの S3 読み取りは 140ms 消費されて DynamoDB の読み取りは 30ms  消費されていることになります。

入出力処理なので、これはおそらく固定のコストになっていて Lambda の実行に於いて 100ms の違いはなかなかにインパクトのあるものに思えますので　Lambda　から読み込みをする際にはまず DynamoDB を選ぶのが良いです。

### 興味深いフローチャート

https://serverless.pub/img/s3ordynamo.png

(勝手に雑訳)

```
データは400KB以上だ→[S3]
↓
いつも早く読めて欲しい→[DynamoDB]
↓
バージョン管理をしたい→[S3]
↓
複数の項目を確実に同時に編集したい→[DynamoDB]
↓
もしかすると瞬間的にヤバい量のアクセスが生じる→[S3]
↓
データの追記をしたい→[DynamoDB]
↓
バイナリデータである→[S3]
↓
データベースっぽくクエリを使いたい→[DynamoDB]
↓
HTTPSでアクセスしたい→[S3]
↓
ほとんどのデータが4KB未満である→[DynamoDB]
↓
お安く保管したい→[S3]
↓
[どっちでも問題なし]
```
初心者ブロックチェーンに挑戦する　8

# ガラスの靴を拾ってくれたのは若い女性

## 見積もりが甘い

　昨日、おもちゃの銀行で慌てまくって終了したけど、今朝の私は、昨日2-2を終了した、と思いこんでいた。（昨日の記事を自分で読めば、「終わってない〜」と叫んでたのに）　ので、2-3から始めた。2-4までだから午前中で終わるだろう、と、相変わらず見積もりが甘い。
　しかもだ。絶大に信頼しているわがMacBookProが、いきなり「メモリが足らないので、余計なアプリを閉じろ」と言い出した。まあ確かに、SafariとGoogle Chromeと、VScodeと、DiscordとSlackと、terminal三つと、Finderと・・・、もうどこに何があるかわからないぐらい重なっている。とりあえず再起動して、DiscordとテキストはiPadで開き、flutter大学のSlackは泣く泣くあきらめて、仕切り直し。
　テキストを外に出したせいで、コピペで丸写しにブレーキが掛かり、頑張って一行ずつ打っていく。これもまた、細部がしっかり見れてよい、などとのんきに構える。けっこうな分量ではあるが、二章はフロントサイドなので、ボタンを実装、といえば、ボタンが見えるし、わけわからずterminalと格闘した第一章よりは楽しいかな･･･

　・・・などといっている場合ではなかった。

## 予兆

　第一章でつくったファイルをコピーして使うのでterminalにcode~~~と打てと言われたときだった。codeなんてコマンドはないよ〜、と拒否られる。ここで立ち止まるべきだったのだろうけれど、テキストに、「Finderから開いてコピーしてもいいよ」と書いてあったので、あっさりそっちの道を選ぶ。
　指定されたのは@@.solの中の@@.jsonというファイルなのだが、そもそも私の@@.solはファイルで「その中」はあり得ない。ここでかなりパニクる。私が見ていたのは

- A/contracts/@@.solというファイル

　テキストを三度見直して、やっと理解した目的のファイルは

- A/artifacts/contracts/@@.sol/@@.json 

　あ〜flutterでもよくやるヤツだ。なんで同じ名前をあっちこっちにつけるかなあ。

　でも、この落とし穴に自分で気づいたことに気を良くして、Discordに「そそっかしさん向け共有メモ」など書いてみる。なんせ、積極的に参加すると、トークンがもらえるらしいのだ笑

　そのあとはだいたい順調に進んで（るつもりで）「テストを実行」まで到達。が、動かない。コードにエラーはない。だけど、WEBサイトのコンソールにエラーメッセージが出るのだ。何度テキストと見比べても間違いは見つからない。こんなときのコミュニティーじゃん、Discordでヘルプを求める。

- まずはどこが間違ってるか探しましょう。と親切な即答。
- 指示されたのは各関数に全部console.log(** pass)をつけるというもの。

　えーーーっ、debug、そうするの？　大変だこれは。
　まあ、面倒くさいけど、わかりやすくもある。ここ通過、ここ通過、ここ通過、はいエラー、みたいな。
　で、詰まってるところはわかったけど、なんで詰まってるかわからない。わからないよ〜。

## 2時間の1on1

 画面共有を誘ってくれたのはファウンダーの若い女性。当然ながら「ありそうなミス」から順に追っていく。だが問題は全然解決されない。えー、私もわかんない〜、とつぶやきながら、つきあってくれること2時間、あり得ないミスはとうとう発見された。

- テキスト、1ブロック、丸々飛んでます

　そう、昨日、最後のバタバタで完了していなかった2-2の最後の作業。いや、正直言って、数行見落とした、などというなまやさしい量ではない。ともかく、ある関数の設定がまるまる抜けていたのだ。なんでこれが見つからなかったかといったら

- 今日のメインの作業はフロントサイドだけど、この関数を書くのはサーバーサイド、つまり第一章でつくったフォルダに入っているファイルなのだ。

　AndroidStudioを使ってflutterで書くのはフロントサイドだけだし、プロジェクトごとにまとまっている。今回、第一章と第二章は、全然別のものをつくっている、みたいな気分でいたのだ。そして、第二章でつくっているコードはコードとしてそれなりにまとまっているので、エラーは出ない。でも実際に走らせると、読みに行った先の（そもそも読みに行ってると知らなかった）第一章のフォルダに、正しい関数の設定がされていなかったというわけ。flutter的にいえば、flutterのコードは書けてるけどfirebaseの設定ができてません、と似ているんだろう。ああ、両方やるのか、と今更ながらに思う。

　それだけではない、あっちのウォレット、こっちのデプロイ、飛び散らかったネットワークがすこしでも欠けると、まるっきり動かない。やっぱりそういうものなのね。

　全て解決してぶじ第二章を終了するまで2時間超、心優しき若きエンジニアは、とろい小母さんに伴走してくれたのでした。ありがとうね。
Rails7 ライブリロードとSCSS

## はじめに
Rails7を使う上でscss環境とライブリロードが欲しかったので実装した

## 環境
M1 Mac book
VSCode
Ruby 3.1.0
Rails "~> 7.0.2", ">= 7.0.2.3"
Bundler version 2.3.3

## rails sまで

1. プロジェクトファイルを作成する
`mkdir sample`
2. ファイル内でbundleを初期化
`bundle init`
3. Gemfileを編集する(rubyの#を消してactiveにする)
4. gemのインストール先をローカルに設定
`bundle config set path 'vendor/bundle'`
5. gemをインストール
`bundle install`
6. 新規Railsアプリケーションの作成
`rails new .`

## sassの導入
`./vendor/bin/bundle add dartsass-rails`
`./vendor/bin/rails dartsass:install`
**上記のコマンド2つでdart-sassを導入し`Procfile.dev`を生成する**

### Procfile.devのタスクを修正
*デフォルトで生成されるものに`vendor/`を追加する*
*生成されなかったら自分で作成*

```rb
# Procfile.devのタスクを修正
web: vendor/bin/rails server -p 3000
css: vendor/bin/rails dartsass:watch
```

**ここまでで`bin/dev`コマンドを打てばサーバーの起動とscssの自動コンパイルが動き出す**

## LiveReloadの実装
*現状では、サーバー起動とscssのコンパイルはされるが、毎回ブラウザのリロードボタンを押す必要がある。*

### guard-livereloadを追加

`Gemfile`に下記を追加
```rb
group :development do
  gem "guard-livereload", require: false
end
```
追加後`bundle install`

### guard-livereloadを初期化
`bundle exec guard init livereload`
*Guardfileが生成される*

**`Guardfile`に下記を追記**
```rb
watch(%r{app/assets/.+\.(css|html|png|jpg|scss)})
```

### Procfile.devにタスクを追加
```rb
livereload: bundle exec guard
```

### Chromeに拡張機能を追加

https://chrome.google.com/webstore/detail/remotelivereload/jlppknnillhjgiengoigajegdpieppei

拡張機能の管理から`ファイルのURLへのアクセスを許可にチェックをいれる`


## 起動する
`./bin/dev`で起動する
ターミナルに
```rb
web
css
livereload
```
が表示され、それぞれ起動できたことを確認
`http://localhost:3000`にアクセス
ブラウザで先ほどダウンロードした拡張機能を押して真ん中の点を`赤`から`緑`に変える

以上でviewファイルの変更やscssの変更を監視して自動でリロードします。

## 終わりに
scss導入とライブリロード導入に1日使ってしまった。
他の策も試しているうちにrails sができなくなり、rubyの再インストールなど手間がかかった。
こういう時独学だと時間がかかりますね。　周りに教えてくださる方がいたり、スクールに行っていたらスムーズに進めそう。

もっと良い方法がありましたら教えてください。

ついでに`bundle binstubs --path=vendor/bin` すると `bundle binstubs needs at least one gem to run.` が出て`bundle execの省略ができない問題を解決できる方がいたら教えてください。`

## 参考
多くの方の知見をお借りしました

https://techracho.bpsinc.jp/hachi8833/2022_03_02/116014

https://techracho.bpsinc.jp/hachi8833/2022_02_04/115417

https://qiita.com/tanutanu/items/0237bcd01f482d831a0f

https://k-koh.hatenablog.com/entry/2020/05/15/124256

https://qiita.com/KenRoda/items/c981a0ac634adcfb2469

https://qiita.com/terufumi1122/items/c6df986d4c528e448ee3
Laravelのmigrationでtimestamps()を使用するとデフォルト値が設定できない場合の対処法

# 概要

`timestamps()`初期値が`NULL`になったままのコードをリファクタリングした際の知見を残します

```php
<?php
Schema::create('training_groups', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->timestamps();
});
```

https://stackoverflow.com/questions/18067614/how-can-i-set-the-default-value-of-a-timestamp-column-to-the-current-timestamp-w

# 対策

以下を利用することで毎回`created_at`・`updated_at`に現在時刻を入力するコードを消し去りました。

https://readouble.com/laravel/8.x/ja/migrations.html

```php
$table->timestamp('created_at')->default(DB::raw('CURRENT_TIMESTAMP'));
$table->timestamp('updated_at')->default(DB::raw('CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'));

// or 
// laravel8.x以降
$table->timestamp('created_at')->useCurrent();
$table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
```
Rails Consoleでログイン認証してAPIのレスポンスを見たい

APIモードのRailsでログイン認証があるAPIのレスポンスを見たいときに使える。

```
# ログイン画面へリクエスト
pry(main)> app.get 'http://localhost:8080/users/sign_in'
# CSRFトークンを取得
pry(main)> token = app.session[:_csrf_token]
# ログイン認証
pry(main)> app.post '/users/sign_in', params: {email: 'めあど', password: 'ぱすわーど', authenticity_token: token }

# 目的のAPIへリクエスト
pry(main)> app.get 'http://localhost:8080/api/users

# レスポンスを表示
pry(main)> app.body
```

古い記事を参考に写経したらいけた。
フロントを作ってなくてサーバーサイドだけ先に作ったときに割と使う。
[Alembic]add_columnでbeforeとかafterしたいとき

ちょっと泥臭いけど
model編集して吐かれたversionsのadd_columnを以下のように変更する

```python
    with op.batch_alter_table('hoge_table', recreate='always') as batch_op:
        batch_op.add_column(sa.Column('fuga_column', mysql.TEXT(), nullable=True), insert_before='hoge_column')
    # op.add_column('hoge_table', sa.Column('fuga_column', mysql.TEXT(), nullable=True))
``` 

だれかautogenerateのときにこれ出す方法知ってたら教えて下さい
プログラミング学習開始します！

はじめまして！

実務未経験からエンジニア転職のためプログラミング学習はじめました！

今後月に4回ほどから勉強内容とつまずいたポイント
をこのページに書いて更新していきたいと思います！

本日までの一週間での勉強内容

・プロゲート（html/css初級完了 javaレベルI完了）
・ドットインストール（はじめてのWeb制作完了）

つまずいたポイント
・プロゲート
（コードのスペルミス）
→対策
コピーでコードを貼り付けられるときは貼り付けを行い手書きをしない
複数回間違えたコード書く場合、意識して確認する

今回は以上となります。
Deno DeployでJSXとTailwind CSSを使った「四則計算ゲーム」のソースコード

```jsx
'use strict';
import { serve } from "https://deno.land/std@0.127.0/http/server.ts";
import { h, ssr, tw } from "https://crux.land/nanossr@0.0.3";

let database = {}; //計算問題と解答のセットを保存する
let question = ''; //計算問題
let judgement = ''; //正解か不正解を表示する変数
let color = 'red'; //変数judgementを表示するときの色を指定する

const createQuestion = () => { //計算問題を生成し、databaseに格納する
  //a~eの５つの乱数を生成し、計算問題として表示する
  const a = Math.ceil(Math.random() * 9);
  const b = Math.ceil(Math.random() * 9);
  const c = Math.ceil(Math.random() * 9);
  const d = Math.ceil(Math.random() * 9);
  const e = Math.ceil(Math.random() * 9);
  //databaseのkeyに'計算問題'を、値に'正答'を格納する
  database[`${a} + ${b} − ${c} × ${d} ÷ ${e}`] = a + b - c * d / e;
  //計算問題の解が小数だった場合、問題生成をやり直す
  if (Number.isInteger(a + b - c * d / e) === false) {
    createQuestion();
  }
  //databaseの末尾の要素を取得する
  question = Object.entries(database).pop();
};

//JSXを書くためのコンポーネント
const HTML = props => (
  <main>
    {/*autcomplete属性を記載することで、入力候補を表示させない*/}
    <form class={tw`text-5xl text-center mt-10`} autocomplete='off'>
      <span class={tw``}>
        {question[0]} {/*計算問題を表示*/}
      </span>
      <p>
        = <input class={tw`border border-4 w-32`} name='answer' type='tel' />
        {/*value属性に正答を記載し、ユーザの解答を判定するのに使う*/}
        <button class={tw`border p-4 m-4`} name='correct' value={question[1]}>解答</button>
      </p>
      {/*正解、不正解を色分けして表示する*/}
      <p class={tw`text-${color}-500`}>{judgement}</p>
    </form>
  </main>
);

await serve(req => {
  createQuestion(); //計算問題を生成する
  const value = new URL(req.url).searchParams; //クエリパラメータを取得する
  const answer = Number(value.get('answer'));
  const correct = Number(value.get('correct'));
  //answerが0ではない場合を前提として処理を進める。
  if (answer !== 0) {
    if (answer === correct) { //ユーザの解答が正解だった場合の処理
      judgement = '正解';
      color = 'green';
    } else { //ユーザの解答が不正解だった場合の処理 
      judgement = '不正解';
      color = 'red'
    }
  } else { //answerが0だった場合はページがリロードされ、新しい問題が表示される
    judgement = '';
  }
  return ssr(() => <HTML />); //JSXを記載したコンポーネント、HTMLを表示する。
});
```
database.ymlを編集したらrails db:create RAILS_ENV=productionでエラーが出た話

# はじめに
１月〜プログラミングスクールで学習しています。
これから平日は~3/25まで毎日何かしらアウトプットのため投稿を続ける予定です。
今回はEC2内でデータベースを作成する際にdatabase.ymlを編集し、rails db:create RAILS_ENV=productionコマンドを実行した時に出たエラーについて書きます。

# 経緯
本番環境でRailsを起動させたく、本番環境のmysqlの設定に合わせるため、ローカルのdatabase.ymlを以下のように編集しました。(頭の中では。。。)
```yml
production:
  <<: *default
  database: diet_app_production
  username: root
  password: <%= ENV['DATABASE_PASSWORD'] %>
  socket: /var/lib/mysql/mysql.sock
```

その後、EC2にssh接続し、”rails db:create RAILS_ENV=production”を実行すると下記エラーとなりました。
ここでエラーをよく読んでdatabase.ymlの中身をしっかり確認すればすぐにミスに気づけたものの、しばらく分からずググったりしていました。。。
```:ターミナル
[ec2-user@ip-172-31-1-171 diet-app]$ rails db:create RAILS_ENV=production
Mysql2::Error: Incorrect database name ''
Couldn't create '' database. Please check your configuration.
rails aborted!
ActiveRecord::StatementInvalid: Mysql2::Error: Incorrect database name ''
/var/www/diet-app/bin/rails:9:in `<top (required)>'
/var/www/diet-app/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'

Caused by:
Mysql2::Error: Incorrect database name ''
/var/www/diet-app/bin/rails:9:in `<top (required)>'
/var/www/diet-app/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'
Tasks: TOP => db:create
(See full trace by running task with --trace)
```

# 解決
本当にしょうもない話だったのですが、username:等を追記した際にdatabase:の記述を消していました。。。
![e95bd4ac02a489af9ec8076705451725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515603/c0c191e0-f39b-f20e-f4ee-08a8ea8da882.png)

今後はファイル編集の際は大事な記述を消さないように気をつけます:innocent:
ではまた〜:runner:
AWSロードバランサーによるhttps及びhttp-httpsリダイレクト

EC2インスタンスにロードバランサーにてhttps化にてhttpからのリダイレクト設定に関してのメモ
ロードバランサーサイトよりリスナーIDのHTTP:80をチェックし編集を選択。
![スクリーンショット 2022-03-09 16.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/47f84e0d-d600-46b9-3a5a-c98692642701.png)
下記を参照。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/9c0ecab6-6b12-5fef-ba1b-30b070089252.png" width="60%">
を下記の様に設定。RemoveクリックしてAddActionからRedirect選択Portに443を入力する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/4a7fba4d-39bd-8076-7c4e-43e8a5599a09.png" width="60%">
emocheckが動かない

# emocheckとは
JPCERTが作成したマルウエアEmotetの感染有無をチェックするためのツール

https://github.com/JPCERTCC/EmoCheck/releases


# 事象
v2.0以前は普通に動いてましたが、v2.1を動かした時に一瞬だけ黒い画面が表示されて落ちる
os：windows10 64bit

# 原因
UACの管理者承認モードですべての管理者を実行が無効になっていたためでした。
有効後、再起動で動きました。
![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/8f52dede-d7d2-5f96-c974-c88aac3dfa0b.png)
[その2]AWS-SAA-躓いたメモ

### VPC
####  VPCエンドポイント
プライベートネットワークからAWSサービスへアクセス可能
- ゲートウェイ型(ネットワークレイヤー)
`ルートテーブル`に追加されたターゲットを追加(S3,DynamoDBなどプライベートにアクセス可能)
- インターフェース型(AWS Private Link)
cloudwatch, SQSからの`APIコール`に対してインターネット経由せず、プライベート接続可。

### EC2
#### リザーブドインスタンス(72%割引価格が適応)
- 1年間または3年間の期間から選択可能
※予約期間中に別にのインスタンスファミリーなどを変更する場合
`コンバーティブルリザーブインスタンス`を使用する。
※スタンダードは契約途中にインスタンスファミリーやOSなど変更できない分、割引率が大きい。

#### EC2インスタンス用のネットワークのレイテンシを最小限に抑える必要がある場合
クラスタープレイスメントグループにて単一のAZ内のインスタンスを論理的にグループ化

### Route53
#### シンプルルーティング
標準的で1対1
#### 地理的接近性ルーティングポリシー
必要に応じて、リソースを別トラフィックのある場所

#### 複数値回答ルーティングポリシー
アクセス分散のため複数のIPアドレスの中からランダム

#### 加重ルーティングポリシー
指定した比率でリソースを振り分ける。

### Dynamo DB
#### Consistent Read
マルチAZにするとき、正しいデータが取得できない場合、Consistent Read(読み取り一貫性)。これで最新のデータを読み取れる

#### DynamoDB グローバルテーブル
`複数リージョンに配置しているDBテーブルでデータの整合性`をとるフルマネージド型。テーブルを作成したいリージョンを指定するだけでおけ。全てのテーブルがマスターテーブル

#### DynamoDB ストリーム
データの変更したときにイベント検知。24時間保持する。

### ELB
- ELBに登録されたEC2インスタンスをバックエンドインスタンス
- NATゲートウェイを使用しない場合、NAT機能を持つEC2インスタンス
    - `NATインスタンス`を使う

#### NLB
TCPで動作するため、ヘッダーを変更せずにリクエストをバックエンドに転送


### AutoScaling
ターみネーションポリシー
- NewestLnstance
新しく起動されたインスタンスから削除される
- OldestInstance
古いインスタンスから削除

### S3
#### cloudFrontオリジンサーバ
- バケット
- 静的ホスティング
- カスタムオリジン(一般的なwebサーバー(プライベート/パブリック含め))

### Amazon Nepture
グラフ型データベース

### RedShift(DWH)
`拡張VPCルーティング`を使用するとクラスターとデータリポジトリ間の`全ての通信が特定のVPCを通過する`ように強制される

### その他
#### EFS(複数) vs EBS(単数)
- 拡張性はEBSは`手動`拡張、EFSは`自動`拡張

#### 特定の国のみアクセスを可能にしたい。
1. Route53の位置情報ルーティング利用する。
1. CloudFrontの地域制限を利用する。
#### Memcached vs Redis
これがあったらRedisそれいがいMemcached
- シングルスレッド動作、インメモリキャッシュDB
- Pub/Sub機能

#### cloudFrontのコストを削減したい。
特定タイプのファイルを圧縮し圧縮ファイルを提供する。

#### シングルサインオン
`SAML2.0`は認証提携によるSSOを簡単に実現

#### データレイクに格納されたデータ資産の分析するには
- Athena
特定のデータ検出。SQLクエリを実行
- Redshift Spectrum
多数のユーザーが同時に分析レポートを発行

### ELB+ASG使用時のEC2が異常を訴えた時、振り分けないようにする。
- ELBヘルスチェックタイプがASGに選択されていない

#### EMRのコストを安くしたい。
※EMRはEC2とS3で構成されたHadoopフレームワークを利用。
EC2クラスターとクラスター内の各インスタンスであるノードで構成。
- マスタノード
ノード間のタスク分担
- コアノード
タスクを実行、クラスタ上
- タスクノード
実際に割り当てられたタスクを実行
これらの`インスタンスタイプ`を変更する事でコストが安くなる。


### その他2
#### アホドッククエリ
クエリが発行される前に決定できないクエリ

#### SWF(simple workflow)
クラウドのワークフロー管理アプリケーション。複数マシンでアプリケーションを連携させるためのツール
[Dart]async awaitとは何ぞや

# 導入
async, awaitとは何ぞやとなったので、自分なりにまとめてみた。

# 結論
結論は、非同期処理を行うものらしい。

```Dart``` では```Future```型
```javascript```では```Promise```型
が返り値となるみたい。

何じゃそれ。。

# 動かして理解してみる

```dart
import 'dart:io';

void main() {
  ProcessTask();
}

void ProcessTask() async {
  task1();
  String task2Result = await task2();
  task3(task2Result);
}

void task1() {
  String result = 'task1 data';
  print('task1 complate');
}

Future<String> task2() async {
  Duration threeSeconds = Duration(seconds: 3);
  String result = '';

  sleep(Duration(seconds: 1));
  print("start task2");

  await Future.delayed(threeSeconds, () {
    result = 'task2 data';
    print('task2 complate');
  });

  return result;
}

void task3(String task2Data) {
  String result = 'task3 data';
  print('task3 complate with $task2Data');
}
```

実行結果は以下となった。
```:実行結果
task1 complate
start task2
task2 complate
task3 complate with task2 data
```

```task1```→```task2```→```task3```の順に実行されている。

# もう少し詳しく

## ProcessTask()

```dart
void ProcessTask() async {
  task1();
  String task2Result = await task2();
  task3(task2Result);
}
```

```ProcessTask()```の横の```async```で非同期処理を行う関数であることを宣言している。
```await```は処理を待ってもらう部分に記載し、```Future```型でなければならない。
つまり、```task2```は```Future```型で定義する必要がある。```String```型では```error```となる。

## task2()

```dart
Future<String> task2() async {
  Duration threeSeconds = Duration(seconds: 3);
  String result = '';

  sleep(Duration(seconds: 1));
  print("start task2");

  await Future.delayed(threeSeconds, () {
    result = 'task2 data';
    print('task2 complate');
  });

  return result;
}
```

```task2()```関数の返り値は```Future<String>```となっている。```<String>```は省略可。
```task2()```も```async```の記載により非同期処理を行う関数なことがわかる。
```await```の記載がある処理```Future.delayed(...);```が完了してから、```return result;```が実行される。

# まとめ
```async```の記載で、非同期処理を行うことを意味する。
```await```の記載がある処理が完了するまで、次の処理は実行されない。
文章の係り受け構造をグラフ表示する（GiNZA）

# 概要
自然言語には係り受け構造が存在し，その構造から文をグラフ化することができます．それを踏まえて[VGAE](https://github.com/DaehanKim/vgae_pytorch)などのグラフ生成の手法から自己回帰以外の文生成がしたいという要求があります．（未実現）

本記事では前処理に当たるグラフ化の部分を書いていきます．

# 準備
係り受け構造解析には[GiNZA](https://megagonlabs.github.io/ginza/)を使います．
`pip install -U ginza ja-ginza`
`pip install -U japanize-matplotlib`

# コード

```python:
import scipy
import spacy
import networkx as nx
import japanize_matplotlib
import matplotlib.pyplot as plt
%matplotlib inline

class DependencyGraph:
    def __init__(self):
        self.nlp = spacy.load('ja_ginza')
        
    def run(self, text):
        doc = self.nlp(text)

        token_head_list = []
        for sent in doc.sents:
            token_head = []
            for token in sent:
                token_head.append({"i":token.i, "orth":token.orth_, "base": token.lemma_, "head": token.head.i, "dep": token.dep_}) 
            token_head_list.append(token_head)

        return token_head_list

    def graph(self, text):
        token_head_list = self.run(text)
        
        graphs = []
        for token_head in token_head_list:
            G = nx.Graph() #有向グラフ nx.DiGraph()  無向グラフ nx.Graph()
            start_position = token_head[0]["i"]
            for head in token_head:
                if head["orth"] not in list("。？！"): #句読点などを排除
                    G.add_edge(head["i"]-start_position, head["head"]-start_position)
            
            # 原型の場合はorth -> base 
            name_dict = dict([(head["i"]-start_position, head["orth"]+"##"+str(head["i"]-start_position)) for head in token_head])
            G = nx.relabel_nodes(G, name_dict)
            graphs.append(G)

        return graphs
```

- 複数の文で構成される場合，その数だけグラフが出てきます．（以下の場合２個）

```python:
analyzer = DependencyGraph()
graphs = analyzer.graph("アルバート湖から下流はアルバートナイルとも呼ばれる。ここから先が狭義のナイル川である。")

for g in graphs:
    print(nx.adjacency_matrix(g).toarray())
    print(g.nodes)
    nx.draw(g, with_labels=True, font_family='IPAexGothic', node_color="red", node_size=500)
    plt.show()
```

# 結果

- 「##」以下は元の文中で何単語目かを示します．（同じ単語が出てくる場合のため）

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416490/e2890f4f-1b28-a266-aa23-50b00c1f0835.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416490/e96e7165-3759-9eb8-8d74-e80b30a56440.png)


# 備考
稀に日本語化に失敗する場合がありますが，原因はよく分かりません．Colab環境をリセットしたら直りました．
Webの勉強はじめてみた その36 〜Sequelizeでデータ削除とCSRF脆弱性の対策〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回が最後、第4章20〜24節です。

## Sequelizeを利用したデータの削除

テストデータの一括削除。

```javascript
function deleteScheduleAggregate(scheduleId, done, err) {  
  Availability.findAll({
    where: { scheduleId: scheduleId }
  }).then(availabilities => {
    const promises = availabilities.map(a => { return a.destroy(); });
    return Promise.all(promises);
  }).then(() => {
    return Candidate.findAll({
      where: { scheduleId: scheduleId }
    });
  }).then(candidates => {
    const promises = candidates.map(c => { c.destroy(); });
    promises.push(promiseCommentDestroy);
    return Promise.all(promises);
  }).then(() => {
    return Schedule.findByPk(scheduleId).then(s => { return s.destroy(); });
  }).then(() => {
    if(err) return done(err);
    done();
  });
}
```

`Promise.all`
複数の`Promise`オブジェクトをまとめた`Promise`を作成。
引数で渡した`Promise`の処理を待って次の処理を実行する。

## data属性
```javascript
button(class=`availability-toggle-button btn-lg ${buttonStyles[availability]}`
                data-schedule-id=schedule.scheduleId 
                data-user-id=user.userId 
                data-candidate-id=candidate.candidateId 
                data-availability=availability) #{availabilityLabels[availability]}              
```

`data-`
プロパティを設定することで、JavaScriptから取得できる。
値渡しという点では、`input`の`hidden`と似てるような気もする。

```javascript
$('.availability-toggle-button').each((i, e) => {
  const button = $(e);
  button.click(() => {
    const scheduleId = button.data('schedule-id');
    const userId = button.data('user-id');
    const candidateId = button.data('candidate-id');
    const availability = parseInt(button.data('availability'));
    const nextAvailability = (availability + 1) % 3;
    $.post(
      `/schedules/${scheduleId}/users/${userId}/candidates/${candidateId}`,
      { availability: nextAvailability},
      data => {
        button.data('availability', data.availability);
        const availabilityLabels = ['欠', '?', '出'];
        button.text(availabilityLabels[data.availability]);
      }
    );
  });
});
```

`class`で検索すると配列が返ってくる。
`i`はインデックス、`e`は エレメント。

## this
基本的には`this`が書かれた処理の関数が所属するオブジェクトを指す。

```javascript:entry.js
import $ from 'jquery';
globalThis.jQuery = $;
import bootstrap from 'bootstrap';
```

`globalThis`
Node.jsにおいて実行環境のグローバルオブジェクトを参照する。
グローバルオブジェクトのjQueryというプロパティに jQueryを代入している。
こうすることで、BootstrapがjQueryを利用できるようになる。

## CSRF脆弱性への対策
ミドルウェアの`csurf`をインストール
```
yarn add csurf@1.8.3
```

```javascript:schedule.js
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
// 新規作成画面の前に認証のチェック
router.get('/new', authenticationEnsurer, csrfProtection, (req, res, next) =>{
  res.render('new', {user: req.user, csrfToken: req.csrfToken() });
});
```
```pug:new.pug
input(type="hidden" name="_csrf" value!=csrfToken)
```

## まとめ
今回で「プログラミング入門コース」を終了。修了の方がいいのか。
11月末からはじめて、最後の方は解説動画を参考にしながらでしたが、なんとかここまで進められました。
とはいえ、自分で手打ちしながらではあっても、実際に自分で一から何かを作ってみないと、本当の意味での理解はできないと思ってます。ここからですね。
AWS CDK + AWS Lambda + Lambda Layers + JavaScript + VSCode 構成例

# TL; DR

- VSCode に分からせるには tsconfig.json の paths
- CDK に分からせるには bundling.externalModules

# 先行研究とか資料

- https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-layers.html
- https://qiita.com/hrkzmaaa/items/afcf08a549c03e23e8a9
- https://qiita.com/hibohiboo/items/b33c530a5a3e8a9c7411

## 重要な知識

### Lambda layer は /opt 以下にマウントされる

例えば `./layers/app-base` 以下にファイルだのフォルダだのたくさん置いて、このように指定したとします

```javascript:stack.js
const lambda = require('@aws-cdk/aws-lambda')

    const layer = new lambda.LayerVersion(this,"theLayer",{
      code: lambda.AssetCode.fromAsset("layers/app-base"),
    })
```

こうすると、ローカルの `./layers/app-base/file` が Lambda 環境では `/opt/file` としてアクセス可能になります。

同様に、フォルダが含まれる場合は ローカルの `./layers/app-base/path/to/file` が Lambda 環境では `/opt/path/to/file` としてアクセス可能になります。


これを利用することで、Lambdaの実装コード中の記述としては `require("/opt/path/to/file")` となります。

しかし、このように書いてしまうと `aws-lambda-nodejs` を使った変換時にエラーになってしまいます(たぶん(開発のローカルマシンに `/opt/path/to/file` があった場合そこを見るのだろうか……))。

そこで `/opt/*` 以下の指定を無視するようにする必要があります。

### CDK で `aws-lambda-nodejs` を使っている場合の除外指定

```javascript:stack.js
const lfn = require('@aws-cdk/aws-lambda-nodejs');

    new lfn.NodejsFunction (this, "function", {
      bundling:{
        externalModules:[
          'aws-sdk',
          '/opt/*',
        ],
      },
    });
```

これで `aws-lambda-nodejs` を使う場合の不整合は解決されましたが、ローカルでは相変わらずエラー表示が続いているはずです(あなたの開発ローカルマシンには `/opt/path/to/file` は存在しないはずなので……)

### tsconfig.json で読み替えをお願いする

tsconfig.json を編集します。


```json/tsconfig.json

    "paths": {
      "/opt/*": [
        "./layers/app-base/*",
      ],
    },
```

こうすることで、ローカルでは `require("/opt/path/to/file")` が `./layers/app-base/path/to/file` を見てくれるようになります。

以上。
こんな画像もありました※コンテンツではない

# 概要
時代の波に生まれ、時代の波に消えた画像形式についてなど。
# 長い前置き（Skip推奨）
君は知っているか？
駅周辺に電話ボックスがあふれていたことを。
通信インフラの速度が300bps(bit/sec)の時代があったことを。
[ポケベル](http://www.kogures.com/hitoshi/history/index.html)というデバイスが女子高生に大流行したことを。
あまつさえ[ドラマ](https://ja.wikipedia.org/wiki/%E3%83%9D%E3%82%B1%E3%83%99%E3%83%AB%E3%81%8C%E9%B3%B4%E3%82%89%E3%81%AA%E3%81%8F%E3%81%A6)や[歌謡曲](https://www.youtube.com/watch?v=nl4ff52S22g)までできてしまったことを。
そんな、平成生まれが知らないかもしれない画像形式のお話。
# 時は1980年代後半
国内に限ると、まだインターネットワークは存在せず、[アーリーアダプター](https://tech-camp.in/note/pickup/49754/)が
自ら立ち上げたBBSホスト（当時[パソコン通信](https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E9%80%9A%E4%BF%A1)と呼ばれた）に、それを知った
アーリーアダプターが電話機に[音響カプラー](https://ja.wikipedia.org/wiki/%E9%9F%B3%E9%9F%BF%E3%82%AB%E3%83%97%E3%83%A9)をつけて、[ダイヤルアップ](https://ja.wikipedia.org/wiki/%E3%83%80%E3%82%A4%E3%83%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E6%8E%A5%E7%B6%9A)接続で
文字ベースのコミュニケーションを楽しんでいた。
1990年代に入るとPCの性能も向上し、通信デバイスもアナログモデムへ進歩
したことに伴い（2400bps～9600bps）画像を楽しむ文化が芽生え始める。
PCと通信環境と時代の波間に生まれては消えていった画像形式の一部を紹介。
# [NAPLPS](https://ja.wikipedia.org/wiki/NAPLPS)
いやそれプロトコルだから！とセルフ突っ込み。
通信環境が極めて貧弱な時代、帯域を補って画像を表示させる苦肉の策。
サーバが描画コマンドを送り、クライアント側で描画を行う。少ない帯域で
簡単な画像が表示できた。初期の[NIFTY-Serve](https://www.nifty.com/)で使われたらしい。
現物の画像は見たことがない。
# gif
いやそれ有名だから！ってそれはもういい。
インターネット黎明期に絶大な人気を誇ったが、特許で脅したばっかりに
ネット上から締め出しを食らった悲しいフォーマット。すでに特許切れと
なっているが、失った信用は取り戻せていないようである。
# maki/mag
PC-9801が絶大な人気を誇った時代、640x400pixel パレット16色の環境
に特化して生み出されたフォーマット。[woody-rinn](https://ja.wikipedia.org/wiki/Woody-Rinn)氏によって開発。
横4ピクセル（4bit x 4ピクセル）を１つのマクロピクセルとして、同じ
マクロピクセルが出てきたら相対座標で符号化する。面白いのは経験的に
同じマクロピクセルが出現しやすい相対座標を狙い撃ちにするところ。
makiは640x400/16色固定だったが、magは解像度制限なく256色に対応。
残念ながら**表示ツールがMS-DOS用ばっかり**で、Windows10で使える
ものはSusie 32bit版(WindowsXP用)しかない。しかもmakiプラグイン
で動くものが存在せず、magしか表示できない。
手持ちのmaki画像は二度と鑑賞できないデータになってしまった。

ちなみにPC-9801 MS-DOS6用画像ローダーは、640x800のmag画像を
スクロール表示することができた。GUIに乏しい時代の遺産である。

Windowsがハードウェアの垣根を壊した結果、PC-9801は急速に衰退を
続けて消滅。AT互換と高解像度多色が時代の流れとなる。
# Pi/PIC
当時お大臣PCであったX68000を使うやなぎさわ氏考案の可逆圧縮画像。
256色に対応。基本的にX68000のスペックにあわせて開発されたようだ。
# 最後に
お気に入りの画像がマイナーなフォーマットの場合、できるだけ早く
メジャーフォーマット（BMP/可逆PNG/可逆Tiffなど）に変換しておく
ほうが安心である。
言語やライブラリによってcapitalizeの振る舞いが異なる

## Java
- 2文字目以降の大文字は大文字のまま
- [org.apache.commons.lang3.StringUtils.capitalize](https://commons.apache.org/proper/commons-lang/apidocs/org/apache/commons/lang3/StringUtils.html#capitalize-java.lang.String-)
```java
StringUtils.capitalize("cAt") = "CAt"
```
## JavaScript
- 2文字目以降の大文字は小文字になる
- [lodash.capitalize](https://lodash.com/docs/4.17.15#capitalize)

```javascript
_.capitalize('cAt');
// => 'Cat'
```
サブドメインのWebサイトを別サーバーへ移行する方法（備忘録）

Webサイトを新しいサーバーに引っ越すのは以前やったことがあるのですが、今回初めてサブドメインのサイトデータのみ新しいサーバーへ移行するということを行いました。
普通のサーバーの引越しと違って、いろいろ注意することなど多かったので備忘録用に記事にしました。

サーバー側の設定については問い合わせ窓口に確認しましたが、初心者なため一部間違った記述があるかもしれません。気づき次第更新したいと思っています。

<h1>前提条件</h1>
<ul>
<li>サブドメインのサイトを新しいサーバーに移行</li>
<li>メールサーバーはそのままで、移行なし</li>
</ul>

<h1>環境</h1>
<ul>
<li>旧サーバー：カラフルボックス（https://www.colorfulbox.jp/）</li>
<li>新サーバー：ロリポップ（https://lolipop.jp/）</li>
<li>サイトはWordpressで作成</li>
</ul>

<h1>手順1. 旧サーバーのサイトデータを新サーバーに移行</h1>
WordPressのプラグイン「All-in-One WP Migratio」を使うと簡単にサイトのデータ移行ができました。

参考にさせていただいたサイトは以下のサイトです。

https://blog-bootcamp.jp/start/wordpress-allinonewpmigration/

<h1>手順2. 新サーバー側の設定</h1>
<h3>新サーバー側でドメインとサブドメインの登録</h3>
ロリポップの管理画面からドメインとサブドメインの登録を行います。

▼独自ドメイン設定方法
　https://lolipop.jp/manual/user/chg-plan/

▼独自ドメインのサブドメイン設定について
　https://lolipop.jp/manual/user/doku-subsett/

独自ドメイン、サブドメインの公開フォルダはいずれも空欄（なにも設定していない状態）にする。

<h3>SSL認証の契約</h3>
今回のように、サブドメインのみロリポップサーバーを利用する場合は、ロリポップの独自無料SSL認証が利用することができず、有料のSSL認証を別途契約する必要がありました。

▼無料のSSLが利用できないケースについて

https://support.lolipop.jp/hc/ja/articles/360049142793

<h3>WordPress側の設定</h3>
WordPressにログインして、「設定」→「一般」メニューから「WordPress アドレス (URL)」と「サイトアドレス (URL)」を設定します。

参考にしたサイトは以下のサイトです。

https://kinsta.com/jp/knowledgebase/wordpress-change-url/


<h1>手順3. ドメイン側の設定</h1>
契約しているドメイン側の設定になります。
サブドメインのDNSサーバーのAレコードの値を新しいサーバーのAレコード値に変更します。
ロリポップサーバーのQ＆AにはAレコードの情報が出てこなかったので窓口に直接問い合わせました。

問い合わせた結果、以下のサイトからDSNレコードの値の確認ができると教えてもらいました。

https://xendomains.com/Dns?domain=

新サーバーのドメインURLを入力すると値が表示されます。

サブドメインのAレコードの値を、上記で調べたAレコード値の値に変更して完了です。
※ドメインの変更には最大２４〜74時間かかることがあるそうです。

注意点として、ロリポップ側としてはサブドメインのみで利用するケースを推奨してなく、メンテナンス、障害、サイバー攻撃等でAレコードが予告なく変更するこ　とがあり、変更後も通知等は行なっていないため注意が必要になります。

もしAレコードが変更された場合、サイトはいきなり表示されないという状態になるため、新しいAレコード値を上記のサイトで調べてサブドメインのDNSサーバーAレコード値の書き換えが必要になります。