OmniAICreator/Qiita-1.07M huggingface dataset:
Google Apps Script の新しい IDE の機能、変更点まとめ

## はじめに

2020/12/07 に Google Apps Script の新しい IDE がリリースされたので、簡単に機能や変更点をまとめてみました。エディタ部分が非常に使いやすくなっていますので、開発が捗りそうです。以下に１つずつ紹介していきます。

[公式ブログ](https://workspaceupdates.googleblog.com/2020/12/google-apps-script-ide-better-code-editing.html)によると公開は 15 日間かけて段階的に行われるため、 2020/12/22 以降に全ての方に届くかと思われます。

## レイアウト
全体的にレイアウトが変更されました。上段のメニューが廃止され、デプロイなどのよく利用するコンポーネントが強調されていてわかりやすいです。また、これまでトリガー設定や関数の実行確認などは別画面でしたが、これらも統合されています。

![Google Apps Script 旧 IDE](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/4b1f112e-0b40-43fc-8325-3ad725f6564c.png)
これまでの IDE

![Google Apps Script New IDE](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/e8ae0624-73a1-bfbb-cae7-6a6cc901d2f7.png)
新しい IDE

### サイドバー
エディター、トリガー設定、実行ログ一覧がサイドバーから簡単に遷移できるようになりました。

![Google Apps Script New IDE サイドバー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/4a7396e7-dd9b-f9da-2190-6c166225deb9.png)

### メニュー
メニューエリアでファイル、ライブラリ、サービスの管理ができます。

![Google Apps Script New IDE メニュー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/dae8a758-3293-7e0d-b3bc-f7aa9ae45d91.png)


## エディタ

### コード補完
入力中のコード補完がされるようになりました。これまでリファレンスを見ながら開発していた方は多いと思いますので、この変更は非常に大きいですね。

![Google Apps Script New IDE コード補完](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/6e07ce3d-21b0-3b58-749f-c13409cbf4a1.gif)

### ログ出力

console.log の結果が実行画面上で確認できるようになりました。これまでは実行後にわざわざ別画面に遷移する必要があったので、非常に開発効率が上がりそうです。
![Google Apps Script New IDE ログ出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/d7cba531-2d3c-c7c3-91b1-34169acd7b4c.gif)


### ショートカットキー
F1 キーを押すとコマンドパレットが開き、そこでショートカット一覧を確認できます。

![Google Apps Script New IDE ショートカットキー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/b7431b52-af27-95a2-f6fc-b30ea6a0ed46.png)

### コードの折りたたみ、展開
コード量が多くなってきた時に使えそうです。

![Google Apps Script New IDE コードの折りたたみ、展開](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/3147d172-ab57-3219-7a8e-cc01a119f8fa.gif)

## デプロイ
デプロイボタンが上部に配置されたボタンから行うことができるようになりました。また、 **デプロイのテスト** を選択することでデプロイする前に挙動を確認することができるようになりました。

![Google Apps Script New IDE デプロイ方法](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/f8f12324-22f5-c518-c590-7c6dc5b750bb.png)

## まとめ

以上簡単になりますが、新しい IDE についてまとめてみました。また新しいことが分かったら追記していきます。

## 関連記事

- [Google Apps Script でよく使うスニペット集 30 選](https://qiita.com/tanabee/items/5de3e8715be759ce1c7f)
- [GAS ビギナーが GAS を使いこなすために知るべきこと 10 選](https://qiita.com/tanabee/items/2c51681396fe12b6a0e4)
- [毎月 500 時間の社内ルーティンワークを GAS を使って自動化した話](https://qiita.com/tanabee/items/ce9c3cf9403c4f3f14a9)
- [Google Workspace 公式ブログ](https://workspaceupdates.googleblog.com/2020/12/google-apps-script-ide-better-code-editing.html)
【GCP】IAP connectorをデプロイしたときに出たエラー

 kubectl get podを実行すると以下のエラーが発生。

Unable to connect to the server: x509: certificate signed by unknown authority
Unable to connect to the server: dial tcp ipアドレス: i/o timeout

git のyamlをデプロイしているので、この動きは正しいのだろうか？という疑問。

kube-pro**など、タイプがdaemon setのポッドに警告がでている。
(cloud9)Herokuを使ってサービスを公開する

#【目次】
<準備>
(Heroku)
・Herokuのユーザー登録
(Cloud9)
・Cloud9でHTMLテンプレートを選択してワークスペースを作成しておく
・Cloud9のターミナルを表示しておく
<初回のみ>
1. ローカルリポジトリ作成
2. ローカルリポジトリのコミット
3. リモートリポジトリ作成
4. リモートリポジトリへプッシュ(デプロイ)
<2回目以降>
1. ローカルリポジトリのコミット
2. リモートリポジトリへプッシュ(デプロイ)


##<初回のみ>
###1. ローカルリポジトリ作成

```
# 初期化
$ git init

# ディレクトリ配下のファイルをコミット対象にする
$ git add *
```

###2. ローカルリポジトリのコミット

```
# コミット
$ git commit -m "※コメントを記載"
```

###3. リモートリポジトリ作成
①Herokuのインストール

```
# インストール
$ source <(curl -sL https://cdn.learnenough.com/heroku_install)

# バージョン確認
$ heroku -v
heroku/7.47.4 linux-x64 node-v12.16.2
```
②Herokuへログイン

```
# ログイン
$ heroku login
```

③アプリ作成（リモートリポジトリ作成）
※Git初期化(git init)済みの状態でアプリ作成(heroku create)すると、
　リモートリポジトリが自動登録される。

```
# アプリ作成
$ heroku create <アプリ名>

# アプリ情報の参照
$ heroku info

# リモートリポジトリの確認
$ git remote -v
```

###4. リモートリポジトリへプッシュ(デプロイ)

```
$ git push heroku master
```
PostgreSQLでcontribの機能を使う

この記事は ユニークビジョン株式会社 Advent Calendar 2020 の8日目の記事です。

## 1.はじめに
PostgreSQLにはソースコードのcontribディレクトリ以下に拡張機能のライブラリー群があります。これらはニッチな機能であるとか実験的な機能であるなどの理由で組み込み関数には含まれていませんが、有用性に乏しいということでもないので活用できそうなものがあれば積極的に使っていくのがよいでしょう。[こちら](https://www.postgresql.jp/document/12/html/contrib.html)から一覧を確認できます。この記事ではcontribのライブラリ群を使えるようにする方法と、独断と偏見で選んだ有用なライブラリをいくつか紹介していきます。ちなみに想定しているPostgreSQLのバージョンは12.4です。

## 2.拡張を有効にする
ソースコードからbuildしたPostgreSQLを使用している場合、build時にcontribをbuildの対象に含めるような指定が必要になります。そうでない場合、基本的に使いたいライブラリ名を確認し、スーパーユーザーでCREATE EXTENSION ライブラリ名;とクエリを実行するだけで使えるようになります。例えばintarrayのライブラリを使いたい場合はこのようになります。

```sql
CREATE EXTENSION intarray;
```
これに追加し、各々のライブラリでセットアップの手順が指定されている場合はそれも行うという形になります。

## 3.intarrayモジュール
intarrayモジュールは整数の配列の操作に役立つ関数を提供してくれます。arrayをよく使うような運用をしている場合におすすめです。PostgreSQLのarray周りの関数は少し物足りない感があるので、複雑な集計をしているなどであれば役に立つのではと思います。
例えば組み込み関数だけだと配列と配列の共通部分をとるのはかなり大変です。ダイレクトでそれを返す関数がないので、unnestでそれぞれ行にバラし、intersectをかけたのちarray_aggをかけなおすなどしないといけません。intarrayモジュールでは2つのarrayを&でつなぐだけで共通部分が得られます。
ただし、整数配列でしか使えないのでそこは気をつけましょう。

## 4.pgcrypto
暗号化に関するライブラリーです。パスワードにソルトつけたりハッシュ化してくれる関数や、ランダムな値を返してくれる関数が入っています。バージョン4のUUIDを作ってくれるgen_random_uuid関数が便利です。よく言われていることですがこれでパスワードを暗号化する場合、DBまでの経路でのパスワードの扱いには注意した方がよいです。生のパスワードを引き回すようなことだけはないようにしましょう。

## 5.まとめ
contribのモジュールは、知っていなければ使おうという発想にもなかなかいかないので知っておくのは有意義かなと思います。awsのRDSなどでもサポートされているので引き出しにいれておきましょう。
2つの配列を比較

``` vb

Option Explicit

Dim Arr1
Dim Arr2

Sub 配列比較()
  Dim ws As Worksheet: Set ws = Sheets(1)
  Dim r1 As String, r2 As String
  r1 = "A2"
  r2 = "E2"
  '取得
    Arr1 = GetArr(ws, r1)
    Arr2 = GetArr(ws, r2)
  
  '比較
    Dim ub1, ub2
    ub1 = UBound(Arr1)
    ub1 = UBound(Arr2)
    

  '同じ名前を探す
  Dim i, j, k
  For i = 1 To ub1
    For j = 1 To ub1
      If Arr2(i, 1) = Arr(j, 1) Then
        For k = 2 To 3
          If Arr2(i, k) <> Arr1(j, k) Then
            Debug.Print i, j, Arr2(j, k)
          End If
        Next
      End If
    Next
  Next
  
  For i = 1 To ub1
    For j = 1 To 3
      If Arr2(i, j) <> Arr1(i, j) Then
        Debug.Print i, j, Arr2(i, j)
      End If
    Next
  Next
  
End Sub

Function GetArr(ws As Worksheet, address As String)
  Dim buf
  Set buf = ws.Range(address).CurrentRegion
  GetArr = buf
End Function



```

``` vb

Option Explicit

Dim Arr1
Dim Arr2

Sub 配列比較()
  Dim ws As Worksheet: Set ws = Sheets(1)
  Dim r1 As String, r2 As String
  r1 = "A2"
  r2 = "E2"
  '取得
    Arr1 = GetArr(ws, r1)
    Arr2 = GetArr(ws, r2)
  
  '比較
    Dim ub
    ub = UBound(Arr1)

  Dim i, j
  For i = 1 To ub
    For j = 1 To 3
      If Arr2(i, j) <> Arr1(i, j) Then
        Debug.Print i, j, Arr2(i, j)
      End If
    Next
  Next
  
End Sub

Function GetArr(ws As Worksheet, address As String)
  Dim buf
  Set buf = ws.Range(address).CurrentRegion
  GetArr = buf
End Function

```
CloudFrontのキャッシュをコマンドから手っ取り早くパージする

[株式会社シンプルウェイ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/simpleway) の8日目です。

昨日は[Cloudflareのキャッシュをコマンドからパージする](https://qiita.com/AnaKutsu/items/3322f6e7e7f8fce44a7a)方法を書きましたが、今日はCloudFrontでの方法を書きたいと思います。

## マネージメントコンソールでAPIユーザーの作成

### ポリシーの作成

まずキャッシュパージのみが実行できる権限を作成しておきます。

[IAM](https://console.aws.amazon.com/iam/home#/home)の[ポリシー](https://console.aws.amazon.com/iam/home#/policies)へアクセスします。

「ポリシーの作成」ボタンを選択します。

![ポリシーの作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/55130f42-7867-f606-fcff-f25bdba8f4f0.jpeg)

[サービス]で「CloudFront」を選択、[アクション]で「CreateInvalidation」を選択を選択します。[リソース]は「すべて」にしてしまいましたが、可能であれば制限しておいたほうがいいでしょう。

![権限設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/0f4428fe-9cb8-34a8-fb1b-2d6cdebd638e.jpeg)

設定したら「ポリシーの確認」ボタンを選択します。

確認画面で[名前]を入力して「ポリシーの作成」ボタンを選択します。

### ユーザーの作成

続いて、API実行用のユーザーを作成します。

[IAM](https://console.aws.amazon.com/iam/home#/home)の[ユーザー](https://console.aws.amazon.com/iam/home#/users)へアクセスします。

「ユーザーを追加」ボタンを選択します。

![ユーザーを追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/acdf247c-15a3-29c2-cc64-ef9771dc208e.jpeg)

[ユーザー名]で適当な名前を入力、[アクセスの種類]で「プログラムによるアクセス」を選択を選択し、「次のステップ: アクセス権限」ボタンを選択します。

![cf04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/721357a2-ce96-7271-3e19-2a4eeea6e2a3.jpeg)

「既存のポリシーを直接アタッチ」を選択して、ポリシーの一覧から先程作成したポリシーを選択します。

![ポリシー選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/eebde742-f6f9-ba2b-3177-af391cbe753c.jpeg)

「次のステップ: タグ」ボタンを選択、「次のステップ: 確認」ボタンを選択、「ユーザーの作成」ボタンを選択してウィザードを完了させます。

完了画面で表示される[アクセスキー ID]と[シークレットアクセスキー]をメモしておきます。

![cf06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/c3d00504-f7a6-da82-b593-3689e3d443b3.jpeg)

### ディストリビューションIDの確認

CloudFrontのディストリビューションIDを確認しておきます。

[CloudFront](https://console.aws.amazon.com/cloudfront/home)へアクセスして、パージしたいディストリビューションのIDをメモしておきます。

![cf07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/cb88a1c7-3302-ae60-a542-1119606d0565.jpeg)

## プロファイルの作成

コマンドを実行したいマシンにクレデンシャルを登録しておきます。

コンソールで``aws configure``コマンドを実行します。

```
$ aws configure
AWS Access Key ID [None]: [アクセスキー ID]
AWS Secret Access Key [None]: [シークレットアクセスキー]
Default region name [None]: ap-northeast-1
Default output format [None]: json 
```

[アクセスキー ID]と[シークレットアクセスキー]は上でメモしたものを入力します。

## パージコマンド

おもむろに下記コマンドを実行します。

```
aws cloudfront create-invalidation --distribution-id [ディストリビューションID] --paths '/*' 
``` 

[ディストリビューションID] は上でメモした値に置き換えてください。
iTerm2 3.4 のComposer的な機能をFishで使えるようにする

この投稿は[あくあたん工房クリスマスアドベントカレンダー7日目](https://adventar.org/calendars/5541)の記事です。ですが、遅刻したため投稿日が8日になってしまいました……



iTerm2 3.4 の新機能Composerが良さそうなので、Fishで似たようなことができるプラグインを作りました。
Github: <https://github.com/nishi-yuki/composer.fish>
![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360160/a432324e-9baf-04e2-8d89-faee677e9222.gif)

`Alt->`（ほとんどのキーボードでは`Alt-Shift-.`と同じなはず）を入力すると、エディタが起動し、コマンドを編集できます。

導入には[fisher](https://github.com/jorgebucaran/fisher)を使います。

```shell-session
$ fisher install nishi-yuki/composer.fish
```

やっていることは単純で、`Alt-Shift-.` が入力されたときに、一時ファイルの中にコマンドラインバッファの内容を流し込み、それをエディタで編集し、終わったらバッファに戻すだけです。
なので、iTerm2 のものとは挙動が違い、エディタを閉じた後にエンターを入力しなければ実行されません。

そのうちシンタックスハイライトはつけたいですね。勢いで作ったプラグインですがもし使っていただければ幸いです。
リアル「クソ」Ｗｅｂアプリ「i wanna be the UNCHI」を作った。

「クソアプリ2 Advent Calendar 2020」12/4に駆け込めればと思い書きます。
作ったものは非常にお粗末で何番煎じかわかりません。暖かく見守っていただければと思います。

# はじめに作ったもののご紹介
カメラデバイスを利用してブラウザ上で💩に自身の表情を映し出すアプリケーションです。
深夜テンション続き（不眠症）のこの一週間で考案、実装しました。

[i wanna be the UNCHI](https://hoshizima.com/sub/2DVtuber/web/index.html)
(12/21現在サーバーの移行のため上記アドレス無効となっています。申し訳ございません。→正常に接続できます。改修完了したらまた別記事でお知らせ、まとめたいと思います。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/053cb348-6279-3258-e0cb-4d1d51566384.png)
# 利用したＡＰＩ
[face-api.js](https://github.com/justadudewhohacks/face-api.js)
まだまだ触り始めで理解しきっていませんが、表情の検出や顔の検出、特徴点の検出等ができます。現状瞬きは検出できない？ようでazure等が提供しているＡＰＩと比べると見劣りすると思いますが、なかなか面白いです。
# 今回行動してみてよかったこと学んだこと

- まず、nodeでlocalhostを立ち上げる方法を知ることができました。（それまでgithubにプッシュしてgithub.ioでチェックという作業をしていた）
- 非同期処理なるものの一片を知ることができた。
- フロントのフレームワークを触る機会ができた（bootstrapを導入予定）

# 今後の展望

- フロントエンドをなんらかのフレームワークを使って整える。
- 画像が💩固定、座標も固定だが、自由に変更できるようにするなど諸々フレキシブルにして、顔出しに抵抗がある人等が動画配信で利用できるようなものにできればと思う。
- ゆくゆくはディープラーニングを触って自分でより精度の高いモデルを作成したい（言うは易し）

# おわりに
ソースコードは[こちら](https://github.com/hoshizima/2DVtuber)非常にお粗末なコードですが、ご指摘等ありましたらありがたいです。
くだらない内容で申し訳ない。
が、この記事がすこしでもくだらない考えを行動に移すことをためらっている人の後押しになればと思う。（深夜テンション）

以上、ありがとうございました！！
【WordPress】標準の投稿アーカイブのパーマリンクを任意のURLにする方法いろいろ【備忘録】

毎回忘れるので、備忘録として書いとこうと…

# やりたいこと

- WordPress標準の投稿（post）のアーカイブページを作って、`https://www.example.com/スラッグ/`みたいな任意のパーマリンクにしたい。
- 標準の投稿のシングルページのパーマリンクを、`https://www.example.com/スラッグ/ページスラッグorID`みたいな感じにしたい。

早い話が
「カテゴリとかもないただのお知らせ的なの実装するだけでわざわざカスタム投稿タイプ作るのめんどいし抵抗がある、かといって標準の投稿だとアーカイブがカテゴリーベースの`https://www.example.com/category/hoge/`みたいな感じでシングルページが`https://www.example.com/123/`みたいな感じになってなんか気持ち悪い」
という人向け。

## やり方

### 方法①　カスタム投稿タイプをつくる。

上に書いた早い話の鉤括弧内を見て**『いやカスタム投稿でよくね？』**と思う方はカスタム投稿タイプ作るほうが圧倒的に早いし、パーマリンク的にはすごい素直な感じの挙動します。標準の投稿が完全に無用の長物と化すけど。
やり方は`register_post_type`するときに

```php
'rewrite' => array( 'slug' => '任意のスラッグ', 'with_front' => true),
'has_archive' => true
```
とするだけ。ググればたくさん情報出てきますのでググってください。標準の投稿？　隠せばいいのだ。

### 方法②　アーカイブページ用の固定ページを作る

標準の投稿を活かすならこっちの方法。解説は後ほど。

### 方法③　`'has_archive' => true`にして~~うまいことする~~　→できない
この「うまいことする」をやろうとして調べて結局キレイな形でできないから②のやり方に移行する、というのを毎回やってます。
アーカイブページなのに固定ページってなんか気持ち悪いし、無駄な固定ページがあるのも気になるし、ていうかアーカイブページがarchive.phpじゃなくてpage-{slug}.phpで動いてるのがなんか気持ち悪いんでこのやり方でやりたいんですが、アーカイブページのパーマリンクをどう頑張っても取得できません。

カテゴリでも日付でもない通常のアーカイブページを有効にするのは以下で可能。ググれば出てくる。

```php:function.php

// 通常アーカイブを有効にする
function post_has_archive( $args, $post_type ) {
    if ( 'post' == $post_type ) {
        $args['rewrite'] = true
        $args['has_archive'] = '任意のスラッグ';
    }
    return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );

```
で、例えばスラッグを`news`とかにした場合、`https://www.example.com/news/`とURLを叩くとarchive.phpのテンプレで投稿一覧が表示される。
のだがこの`https://www.example.com/news/`は**WordPressの関数ではどう頑張っても引っ張ってこれない。**
`get_post_type_archive_link('post')`で引っ張ってこようとしても、引数が`'post'`だと無常にも`false`が返ってくる。
URL直接叩かせるなり、アーカイブのリンク返す関数やショートコードを適当に自作するなり、`post_type_archive_link`にフィルターフックしてうまいことするなりでなんとかしようと思えばできるけど、
アーカイブをarchive.phpで表示するという**『当たり前にできそうなこと』をしたいから頑張ってるのにそんな力技で解決するのはなんか気持ち悪い。**

というのと、WordPressのシステム上ではアーカイブページが無いものとして扱われるので（厳密には違うが）、例えばサイトマップ生成プラグインとか使ってるとアーカイブページが含まれなかったり、
それを解決しようとするとリライトルールをゴリゴリ書くハメになったりと、
とにかく不具合や複雑化の温床になりやすい。

ので、最終的に固定ページが1ページ増えるだけで特に他には影響が出ない【方法②】に落ち着くわけである。一応WordPress推奨の方法だしな…
今更説明するまでもないと思うけど、一応手順は以下の通り。

## 方法②-手順1.　アーカイブ用の固定ページを作る

タイトルは任意のタイトル、本文は空でよい。このページのパーマリンクがアーカイブページのパーマリンクになる。
当然ながら、テンプレートとなるPHPファイルは用意しておくこと。

## 手順2.　表示設定・パーマリンク設定を変更

![2020-12-08_03h38_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284502/82f8a163-390e-2351-4adb-9e356d2b3d5e.png)
↑表示設定の【投稿ページ】で今しがた作った固定ページを選択する。
![2020-12-08_03h42_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284502/04e51aaf-a878-5e2f-20e1-76b5735fd8b9.png)
↑パーマリンク設定。【カスタム構造】のラジオボタンをチェックして、`/任意のスラッグ/（任意のパーマリンク構造）`とする。画像では`%post_id%`にしているが`%post_name%`でも構わない。


## 手順3.　アーカイブのパーマリンクの取得方法
```php:example.php
echo get_permalink( get_page_by_path( '固定ページのスラッグ' )->ID );
```
**これで引っ張ることになる。**うーん、やっぱりなんか…

ほんとお知らせ機能とか標準の投稿タイプそのまま使えたらそれで良いんだけど、パーマリンクが何か気持ち悪い感じになるのが如何ともし難い。
管理画面の見え方からカスタマイズするようなレベルならカスタム投稿タイプ使うことに抵抗はないんだけど、固定ページいくつか＋αくらいのサイトを作るときはこの辺の仕様で毎回もにゃる。自分だけかもしれないけど。
それっぽい歌詞ジェネーレータを作りたい 0日目

##はじめに
音楽を愛するエンジニアの皆さん、こんにちは。

自分の好きなアーティストっぽい歌詞が自動で作れたら楽しそうですよね。
ということで、__それっぽい歌詞ジェネーレータ__と題して作っていきます。

（Webスクレイピング学習の備忘録です。クオリティ等は期待しないでください。
Python・プログラミング初心者さんの学習の参考になれば幸いです。）

##機能のイメージ
アーティストとテーマとなる単語を設定すると、そのアーティストがそのテーマで作ったっぽい歌詞が生成される。

【例】
アーティスト：BUMP OF CHICKEN
テーマ：筋トレ
⇛BUMP OF CHICKENが筋トレをテーマにして作ったっぽい歌詞が生成される。

##仕組み
1. Pythonで歌詞サイトから対象アーティストの歌詞情報をスクレイピングし、頻出単語などの"クセ"を抽出。
1. テーマの周辺キーワードを取得。(Wikipediaに登場する単語や一緒に検索されている単語など)
1. 歌詞情報＋周辺キーワードから歌詞を生成。

PythonはGoogleが提供している__Google Colaboratory(Colab)__というサービスから実行する想定です。

__Colab__はGoogleアカウントさえあれば誰でも簡単にWebブラウザからPythonを実行できるサービスです。環境設定が不要なため、とっかかりにはオススメらしいです。

## 歌詞の著作権について
歌詞はアーティストの著作物ですので、むやみにスクレイピングしまくるのはどうかと思い、著作権周りについて調べてみました。

[【スクレイピングと法律】スクレイピングって法律的に何がOKで何がOUTなのかを弁護士が解説。【２０１９年１２月６日加筆】](https://it-bengosi.com/blog/scraping/)

こちらのサイトによると、解析用にデータを収集することは問題ないようです。

他のサイトから情報を読み込んで自サイトに表示するなどすると、著作権侵害にあたるそうです。詳しくはリンク先を御覧ください。

##最後に
次回から実際にコーディングを絡めながら動かしていければと思います。

Colabよりおすすめのサービスがあるよとか、著作権危ないよとかご指摘があればお待ちしております。
Azureメディアサービスをv2からv3に移行あれこれ

# 追記

2021/02/17 「v2 API に関する機能のギャップ」の記事URLが変更になっていたため、リンク先を変更しました。

# はじめに

この記事では、Azureメディアサービスのv2 APIからv3 APIへ移行するときに考えたいろいろを挙げさせていただきます。
メディアサービスには様々な機能が実装されていますが、今回触れるのはあくまで私が利用した範囲のものだけであることご了承ください。

また、Azureメディアサービスのv2からv3への変更の概要については下記の記事を参考してください。

- Media Services v2 対 v3
https://docs.microsoft.com/ja-jp/azure/media-services/latest/media-services-v2-vs-v3
- Media Services v2 から v3 への移行のガイダンス
https://docs.microsoft.com/ja-jp/azure/media-services/latest/migrate-from-v2-to-v3


# v3に移行するデメリット

実のところ、v3に移行するデメリットは比較的少ないと思います。最大の難点はAPIの構造が大きく変わり、SDKも大きく変わっているので移行コストがかかることではないでしょうか。

とは言いつつ、個別の機能の中にはv2では出来ていたのに、v3で出来なくなることがあります。先にも上げた記事の中に「[v2 API に関する機能のギャップ](https://docs.microsoft.com/ja-jp/azure/media-services/latest/migrate-v-2-v-3-differences-feature-gaps)」 の記載があります。

まず、Premium Encoder（または Media Encoder Premium Workflow）は現時点で、v3 APIではサポートされていません。公式にアナウンスが出ているわけではありませんが、おそらく今後もv3に移行はされないのではないかと思われます。Premium Encoderを利用している場合は

1. Azure Media Encoder Standardで代替できるか
2. クラウド上での利用が可能なライセンス形態のエンコーダを探し、Azure Batchで実行する
3. 他のクラウドサービスのエンコーダが利用できるか

など検討を進めるべきです。

また、Media Encoder Standardでトリミングや無音オーディオトラックの挿入がサポートされていないといったあたりも利用シーンによっては移行に致命的な問題になる可能性がありそうです。

#v3に移行するメリット

## SDK 周りのメリット

- .Net Coreに対応している
- v3のSDKはBlobのSDKと依存関係にない

などv3のSDKは色々とメリットがあります。

例えばAzure Functionsの最新版を利用しようと思うと.Net Coreを使わなくてはなりませんが、v2のSDKは.Net Frameworkしか提供されていません。しかも、v2のSDKは WindowsAzure.Storageに依存していますが、その更新は2018年11月に止まっていて、既にdeprecated扱いになっています。
（詳しくは以前書いた記事[「AzureのメディアサービスとFunctionsとBatchのバージョン問題」](https://qiita.com/m-otoguro/items/6b45a74ca19f6ab6d547)など御覧ください）

一方で、 v3ではAsset Fileという概念がなくなり、AssetとBlobの結合を疎にしたおかげで、v3のSDKはBlob Storage クライアント ライブラリに依存していません。このため、Blobクライアントライブラリはv11/v12のどちらを使っても構わないというメリットがあります。

## Dynamic Encryptionがより容易に

v2では基本的に暗号化の設定はAssetに紐づけていましたが、v3ではロケータに紐づける形に変更されました。この結果、同じファイルで異なる暗号化設定のコンテンツ再生URLを生成することができるようになりました。
例えば、新しい配信形式を追加で配信したい場合、v2の場合は同じMP4ファイルを持つAssetを別途作る必要があり、移行期間中、Blobの利用量が2倍になってしまう等の問題がありました。v3では同じAssetを利用したまま、別設定のURLを発行できますので、より移行が簡単になります。

## 音声の非暗号化に対応

v3のStreamingPolicyの設定では、[CommonEncryptionCbcs](https://docs.microsoft.com/en-us/rest/api/media/streamingpolicies/create#commonencryptioncbcs) と [CommonEncryptionCenc](https://docs.microsoft.com/en-us/rest/api/media/streamingpolicies/create#commonencryptioncenc)　のどちらにも clearTracksというプロパティが容易されています。ここで指定されたコーデックは、暗号化されない状態で配信されます。

例えば、Widevine L1端末に対してハードウェアセキュリティレベルのライセンスを設定した場合、VideoトラックとAudioトラックが同じKeyIdで暗号化されていると端末側が不具合を起こし、正常に再生できないといった問題が起こりえます。
こういった問題が発生した場合に、clearTrackでAudioトラックを指定してあげれば、再生できるようになります。
（欲を言うと、オーディオトラックを別KeyIdで暗号化できるようにしてほしいのですが・・・）

# 最後に

私が感じているAzureメディアサービスのv3 APIへ移行するときに考えるべきことについて、つらつらと書いてみました。
個別の設定方法のTipsも色々とあるので、追々書けていけたらなぁと思っております。
2月、バーチャルキャストで冬キャスマーケット2021をやります！

![Header.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938265/ddaf9a96-3abe-518e-3d85-bbaf6b54da2e.png)
##概要
バーチャルキャストでのVRアイテム、VCIの制作ノウハウを寄稿する「[VCI Advent Calendar 2020](https://qiita.com/advent-calendar/2020/vci)」の
12/8、8日目の記事です。
2月1日に、バーチャルキャストで__冬キャスマーケット2021__を開催することについて書きます。

#自己紹介
みなさん、バーチャルオカマの__ベッラパスタ__よ💗
3Dモデリングをしたり毎週木曜日にVRオカマバーをしているわ。
初めてQiitaを書いてみますが、プログラミングは全くといって書けないのでベッラパスタ主催のイベントについて書きます。

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938265/9df32e2c-a755-2c7d-83e6-a1208d6bcc5a.png)
##①夏キャス
VRでの展示会はVRChatを中心として近年盛んに行われるようになりました。
そして2020年8月、オリンピック等様々なイベント中止の最中、__バーチャルキャストで初めてのユーザー開催マーケット__となる__夏キャスマーケット2020__を開催しました。


##②秋キャス
夏キャスを無事開催でき、バーチャルキャストでも少なからずマーケットの需要があることが分かりました。
他バーチャル展示会には無い試みとして、第2回目は__3ヶ月後すぐ__の2020年11月に、__データ提出__を行わない方法で__秋キャスマーケット2020__を開催しました。


##③冬キャス
現在第3回目を2021年2月1日～8日、ブースや商品を新機能__ルーム__に設置して
__冬キャスマーケット2021__を開催予定です。


##キャスマーケットの特色
###データ提出は不要です！
これをキャッチコピーにすることにしました。
VCIは__The Seed Online__というVRモデルのハブサイトにアップロードすることで、
ユーザー間でデータをやり取りせずに共有することが可能です。
connpassで出席の際に共有URLを渡すだけでバーチャル展示会__最速入稿__が可能です。

###その場で取り込み可能！
上記の仕組みを利用しているので、その場で__購入__して取り込み、
すぐに自分のアイテムとして__取り出し__が可能です。

###年4回の開催！
__年間スケジュール__を公開し、制作参加しやすくしました。
分かりやすさ重視で、__毎月1日__に必ず__告知・募集・開催__を繰り返すようにしています。
![キャスマーケット年間スケジュール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938265/fcd56433-e061-5cd7-6c04-57b8dda9452f.png)

#出展募集
冬キャスマーケット2021は__2月1日～8日__(画像の日時変更)、
高さの概念や自由にアイテムを設置し保存できる__ルーム__で開催予定です！
今回は__VCIの無料・有料の商品販売__から、__ブースによる表現物・作品__など、幅広い展示物に対応します。
![フロー (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938265/dd7e0484-42e1-ae6f-e01d-3633cc410f08.png)
今回も恐らく先着順のため、1月の募集開始時にはお早めにご応募いただければと思います。

#リンク
__キャスマーケット__
[Twitter](https://twitter.com/virtualcast_fes)
[キャスポータル(Webサイト)](https://id.pokemori.jp/virtualcast-fes/)
[THE SEED ONLINE](https://seed.online/users/113542)

__ベッラパスタ__
[Twitter](https://twitter.com/VR_pasta)
[THE SEED ONLINE(プレミアムストア)](https://seed.online/users/100117)
[THE SEED ONLINE(無料配布)](https://seed.online/users/103970)
Next.jsでRouter.pushを使うときに「No Router instance found」のエラーが発生

## 概要
[Next.jsのルーティング](https://qiita.com/tetsutaroendo/items/e444bd606c5fa79d2209)の記事にある通り、Next.jsでは`Router.push`を使うことでURL履歴のpushとreplaceが可能です。例えば、コンポーネントに渡ってくるプロパティなどをチェックして不備があれば、別のパスに遷移するような使い方が考えられます。
今回はこの`Router.push`を使うときに、「No Router instance found」のエラーが発生するケースがあったので、それについて書いてみたいと思います。

## どんなときにエラーが起きるのか
[こちら](https://github.com/vercel/next.js/issues/6713#issuecomment-703443039)のissueのやりとりにある通り、SSRでRouterのメソッドを使うことはできません。ので、コンポーネントがマウントされる前に呼び出しを行うとエラーが発生します。

## 対応
上記issueのコメントにある通り、`componentDidMount`の中で呼び出しを行うか、windowsが読み込まれたタイミングで呼び出しを行えば、エラーが発生するのを防げます。windowsが読み込まれたタイミングで、呼び出しを行う実装サンプルは以下の通りです。

```Sample.js
import Router from "next/router";

export default function Sample(prop) {
  if (typeof window !== "undefined") {
    if (!prop.userId) {
      Router.push("/");
    }
  }

  return (
    <div>
      propチェックOK
    </div>
  );
}


```
親子3世代のバケツリレーが辛いのでVuexを使わずに状態管理

こんにちは。
株式会社アドベンチャーで、UI/UXデザイナーとフロントエンド周りの開発をしている@f-umebaraと申します。
株式会社アドベンチャーの[Advent Calendar 2020](https://qiita.com/advent-calendar/2020/adventure) 7日目です。
前回参加した[Adventure Advent Calendar 2018](https://qiita.com/advent-calendar/2018/adventure)が2年前ということに驚愕です。:(；ﾞﾟ'ωﾟ'):ｶﾞｸﾌﾞﾙ。

さて、最近vue.jsの開発をしておりまして、
内容としてはよくあるものですが自分の忘備録も兼ね、行なったことを書いてみます。

## Vuexを使わずに状態管理
Vuexを使うまででもない規模の場合にて、コンポーネント間の親子３世代のバケツリレーが辛くなりました。（↓私の中でこんな感じです）
![store_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/ad75be44-bc1f-4bdb-1196-7e6b95dc514b.png)
propsとemitが複雑に。。
おばあちゃん辛いよ。孫よ、直接やりとりして欲しい〜。

何か良い方法がないかと調べたところ、オブジェクトをリアクティブにする`Vue.observable`を使ってVuexライクにシンプルな状態管理ができるとのことで、やってみる。

```javascript:store.js
import Vue from "vue";
import axios from "axios";

// state 状態
export const state = Vue.observable({
  userNumber: 0,
});
// getters これで呼び出す
export const getters = {
  getUserNumber() {
    return state.userNumber;
  }
}
// mutations 状態を変更
export const mutations = {
  updateUserNumber(userNumber) {
    state.userNumber = userNumber;
  }
}
// actions api呼び出して状態を変更するmutationsを呼ぶ
export const actions = {
  async fetchUserNumber(){
    const res = await axios.post(apiUrl,{
      "userNumber": '1'
    })
    const userNumber = res.data.userNumber;
    mutations.updateUserNumber(userNumber);
  }
}
```

上記をvueから呼び出して使用します。

```javascript:component.vue
<template>
　<p>状態管理した値は{{ getUserNumber }}です</p>
</template>

<script>
import { getters, actions } from "../store";

export default {
 methods: {
   fetchUserNumber() {
     actions.fetchUserNumber();
   }
 },
 computed: {
   getUserNumber() {
     return getters.getUserNumber();
   }
 }
}
</script>
```

![store_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/d2b11da5-6d9e-bc36-8323-4eee453f0656.png)
こうなったイメージ。
storeて便利だなぁと改めて感じました。

しかしvue3からの変更で書き方は変更した方が良さそうです。
#### 将来の互換性を考えると、Vue.observable に渡したオブジェクトではなく、返されたオブジェクトを使うことを推奨

[TypeScriptでVuexを使わないという選択肢](https://qiita.com/hiroiku/items/e6b3a5c823c367c8e45b)

[Vue.js公式より](https://jp.vuejs.org/v2/api/index.html#Vue-observable)
> Vue 2.x では、Vue.observable は渡されたオブジェクトを直接操作するため、ここでデモされる ように戻り値のオブジェクトと等しくなります。Vue 3.x では、代わりにリアクティブプロキシを返し、元のオブジェクトを直接変更してもリアクティブにならないようにします。そのため、将来の互換性を考えると、Vue.observable に渡したオブジェクトではなく、返されたオブジェクトを使うことを推奨します。

```javascript:store.js
class Store {
　// 状態管理部分
}
export default Vue.observable(new Store());
```

上記はまだ実装できていないですが、vue3を考えて変更を検討したいと思います。
6日目：クマ耳カチューシャで学ぶ装着アイテム

この記事はアドベントカレンダー「[【VCI】テーマパークを作ろう](https://adventar.org/calendars/5855) 」の6日目の記事です。

# 今回の内容
今回はクマ耳カチューシャを作りながら以下の内容を学んでいきます

* 自由に持ち運べる「SubItem」の概要とその作り方
* ボタンを押して何かを動かすスクリプトの書き方

# VCISubItemとは？
今回はクマ耳カチューシャを作るにあたり、「持ち運びができ」「他の人と位置が同期される」アイテムを作る必要があります。
その様な場合は「**VCISubItem**」(以降Subitem)というVCI専用に用意されたコンポーネントを使用する必要があります。
SubItemには主に以下の機能があります。
　・他の人と位置情報が同期される。
　・手に持って移動させたり、拡大・縮小することができる。
　・グリップを押して何らかの処理を実行させる事ができる。
公式参考ページ：[VCI SubItem Component](https://virtualcast.jp/wiki/doku.php?id=vci:component:sdk:subitem)

上記のいずれかを実現したいときはほぼSubitemを使うことになり、かなり頻出するコンポーネントですのでここでおさえておきましょう。

# Subitemの設定する
今回は以下のクマ耳を装着できるようにしていきます。
早速SubItemコンポーネントをつけていくのですが、以下のように**SubItemは空オブジェクトにつけその中にモデルを入れることをお勧めします。**
(新しくモデルを追加したくなった時、サイズ変更したくなった時などにSubItemとモデルが分かれていると何かと便利です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/044e252d-52d4-6219-dc50-c21c123136a2.png)
補足：SubItemはVCIObjectコンポーネントの設定されているオブジェクトの直下にのみ設置で済ます。
(今回の例だとThemeParkの下の階層のみ)

VCISubItemにはいろいろな設定がありますが、今回は必要な部分だけ説明していきます。他の設定以下の公式ページを御覧ください
　・[VCI SubItem Component](https://virtualcast.jp/wiki/doku.php?id=vci:component:sdk:subitem)
今回は以下の設定をしました。
　○ VCISubItem
　　・GrabbableをON (持ち運べるようにするため)
　　・ScalableをON  (頭に合わせてサイズ調整できるように)
　○ RigidBody
　　・Use GravityをOFF (地面に落ちると取りづらいので)
　　・IsKinematicをON  (これがOFFだと手を離すとふわふわ飛んでいってしまう。)
また、つかめるようにするためにコライダーが必要なため、コライダーも追加します。こちらはModelの方のオブジェクトへの追加でいいと思います。(そのほうがモデルのサイズを変更したときに一緒にコライダーのサイズも変わってくれるため便利です。)
コライダー追加の際には体にぶつからないようにするためIsTriggerをオンにしてください。

# アイテムを装着可能にする
上記でSubItemの設定は完了しましたが、これではまだ装着はできない状態です。
装着するためにはVCIAttachableコンポーネントを使用します。

VCIAttachableはSubItemと違いどの階層のオブジェクトにも追加できるため、今回はモデルのオブジェクトに追加します。
設定の詳細は以下をご覧ください。
　・[VCI Attachable](https://virtualcast.jp/wiki/doku.php?id=vci:component:sdk:attachable)
今回は以下のように設定します。
　・Attachable Human Body Bones：頭のボーンにつけたいため、sizeを1でHeadを選択
　・Attachable Distance：Sceneの緑の円を見ながら適切なサイズに調整
　・Scalable：拡縮に連動して変わってほしいためONにする
　・Offset：Sceneの緑の円を見ながら適切なサイズに調整。
1点注意点として、装着可能な位置は装着対象の**ボーンの始点の位置**となります(多分)
Headボーンの場合、だいたい首と顔の境目位が始点となるのでそこに当たるようにOffsetとDistanceを調整してください。
以下が設定後の図です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/3db3e18b-6f26-60ef-1a37-5b33cc180921.png)

最後に、複数人がつけられるようにSubItemがついたオブジェクトをコピーして複製します。
コピーする際、SubItemがついたオブジェクトは同名は避け、別々の名前をつけるようにしてください。
最終的には以下のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/1f94b007-413a-fa82-e951-5472229752ae.png)


完了したらエクスポートしてseedOnlineに取り込んでみましょう。
以下のように装着できることが確認できたら完了です。
![2020120802152379.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/009975b8-5505-fbce-bd32-1c3195444a3a.jpeg)


# 終わりに 
いかがでしたでしょうか？
今回は頭への装着でしたが、腕や足を装着対象にすることもできますので、腕輪や靴といったものを装着することも可能です。
次回はアニメーションについて書く予定です。
カスタマーサポートがクラッシュの原因を突き止めた話

この記事は[クラスター Advent Calendar 2020](https://qiita.com/advent-calendar/2020/cluster)の12日目の記事です。
昨日はclngnさんの「[clusterのアバターサムネイルを変えた話](https://note.com/clngn/n/nae39e286aec6)」でした。影のこだわりはさすがですね。

# はじめに

みなさんこんにちは、スワンマンです。
![正装スワンマン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58380/165e6536-3c3c-a4ef-87ce-478f0d30ef91.png)
普段はクラスターでイベントスタッフをやったり、イベントのMCをやったり、アバターの調整をしたり、スタジオの整備をしたり、Twitterの中の人をやったり…等々色んなことに携わっていますが、その中のメイン業務のひとつとしてカスタマーサポートもやっています。
今回はそのカスタマーサポートに寄せられた不具合の原因を自分で突き止めた時の話です。

# 原因不明のクラッシュが頻発…しない

カスタマーサポートには日々不具合の報告が寄せられます。その中には自分だけで解決できるものもあればそうでないものもあり、そうでないものは開発チームへと送られます。
しかし開発チームのリソースも有限であり、全ての不具合を調べてもらえるとは限りません。

当時たまに寄せられる不具合がそれで、「clusterを立ち上げることはできるものの、アバターを選択するとクラッシュする」というものでした。
これが頻発するのであれば当然本腰を入れて調査が始まったりするんですが、たまーに来るくらいという頻度だった（特に3月より前のclusterはまだワールドという概念が無かったのでイベントのある日にしかそういう報告が無かった）ため軽い調査をしたのみで一旦保留となっていたわけです。

# さりとて報告は寄せられる

頻度が低いとは言え不具合の報告は来るわけで、カスタマーサポートとしてはそれに答えないといけないんですが、原因不明ということになっている不具合への返答はとても難しい…。
そこで「もうこうなったら自分で調べるしかないな！」と思い立ち、ひとまずUnity Dashboardのログを見ることにしました。

clusterはUnity製アプリなので、クラッシュが起こった場合Unity Dashboardにクラッシュログが残ります。そしてそのログからの事前調査で特定のDLL内でクラッシュしていることは分かっていました。しかしC#で書かれたアセンブリではなくネイティブDLLだったため、ここで一旦調査が打ち切られたようです。
つまり、この続きをやれば分かるのでは…？ということでデバッガを立ち上げました。

# まずクラッシュ箇所を見に行く

clusterは64bitアプリなので、ネイティブDLLも64bitです。そのため普段使っている[OllyDbg](http://www.ollydbg.de/)というデバッガが使えず、今回は64bitアプリにも対応している[x64dbg](https://x64dbg.com/)を使いました。
![x64dbg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58380/0a4be0ae-b06a-f113-60c9-3992f21461e1.png)

まずどこでクラッシュしているかを見ようとしたものの、Unity Dashboard上にログとして表示されているスタックトレースは実際のユーザー環境におけるメモリアドレス（絶対アドレス）のため、自分がローカルでデバッグする時とはアドレスが異なる可能性があります（[ASLR](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E7%A9%BA%E9%96%93%E9%85%8D%E7%BD%AE%E3%81%AE%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E5%8C%96)があるため、異なるアドレスにDLLが配置される可能性がある）。

これを回避するにはベースアドレス（DLLが配置された時の先頭アドレス）からのオフセットが必要になるんですが、Web上には表示されていないだけで実はUnity DashboardからエクスポートできるJSONファイルより「relative_pc」として取得できます。なのでローカルでDLLをロードした時のベースアドレスにこのオフセット値を足せばクラッシュ箇所を辿ることができます。

# ついに原因が判明

クラッシュ箇所はポインタを逆参照してその値を代入するというコードだったため、「これは環境によってポインタがnullになってエラーが発生しているのでは？」と最初に考えました。ところがそのポインタを参照している箇所を探したところ、読むところはあるものの代入しているところが一箇所もない、つまりはただの定数でした。

単なる代入でどうして死んでしまうん…と諦めかけたところでしたが、実はこの代入こそが原因そのもので、ここで呼ばれていたのはMOVやLEAといったx86命令ではなく、AVX拡張命令セットに含まれるVMOVDQUという命令だったんです。
![それっぽい場面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58380/de403153-b150-c695-8603-f5899303591a.png)

AVXはMMXやSSEみたいなCPUの拡張命令セットのひとつで、CPUによって実装があったりなかったりします。あったりなかったりするということは、なかった場合は命令が正常に実行できずに死んでしまうわけですね。
あとは答え合わせとしてそれまでクラッシュしていたPCがどのCPUを使っているか調べたところ、見事に全てAVX命令非対応CPUだった…ということで、ついに原因を突き止めることができました。

# おわりに

原因を突き止めた結果、案内したくてもできない状態だったのが「CPUが原因」ということを伝えられるようになったのは大きかったですね。
実際に「使用するPCを変更することでclusterを使えるようになった」というユーザーの方もいました。わいわい。
ということでクラスターのカスタマーサポートは答えが分からない時は自力で答えを出すぞ！というお話でした。

明日はurauraさんの「nanka...」です。nankaとは一体何なのか…これは興味深い話になりそうです。
$ brew upradeを実行したら権限系のエラーが出た

# 目的

- `$ brew upgrade`を実行したときに出た権限系のエラーを解決するまでの経緯をまとめる

# 詳細

1. `$ brew upgrade`を実行したら下記のエラーが出た。

    ```
    Error: Can't create update lock in /usr/local/var/homebrew/locks!
    Fix permissions by running:
      sudo chown -R $(whoami) /usr/local/var/homebrew
    Error: The following directories are not writable by your user:
    /usr/local/lib/python3.7/site-packages
    /usr/local/share/zsh
    /usr/local/share/zsh/site-functions
    /usr/local/var/homebrew/locks
    You should change the ownership of these directories to your user.
      sudo chown -R $(whoami) /usr/local/lib/python3.7/site-packages /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew/locks
    And make sure that your user has write permission.
      chmod u+w /usr/local/lib/python3.7/site-packages /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew/locks
    ```

1. ディレクトリの所有権限を変更してくれって言われたら下記を実行する。

    ```
    $ sudo chown -R $(whoami) /usr/local/lib/python3.7/site-packages /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew/locks
    ```
1. もう一回下記を実行した。

    ```
    $ brew upgrade
    ```
1. ちょっと進んだけどエラーが出た。

    ```
    Error: An exception occurred within a child process:
      Errno::EACCES: Permission denied @ dir_s_mkdir - /usr/local/Cellar/openssl@1.1/1.1.1g
    ```
1. 下記を実行してみる。

    ```
    $ chmod u+w /usr/local/lib/python3.7/site-packages /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew/locks
    ```
1. もう一回下記を実行した。

    ```
    $ brew upgrade
    ```
1. 改善せずエラーが発生した。

    ```
    Error: An exception occurred within a child process:
      Errno::EACCES: Permission denied @ dir_s_mkdir - /usr/local/Cellar/openssl@1.1/1.1.1g
    ```
1. 下記のようなエラーが出ていることがわかった。

    ```
    touch: /usr/local/Homebrew/.git/FETCH_HEAD: Permission denied
    touch: /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask/.git/FETCH_HEAD: Permission denied
    touch: /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/FETCH_HEAD: Permission denied
    fatal: Unable to create '/usr/local/Homebrew/.git/index.lock': Permission denied
    fatal: Unable to create '/usr/local/Homebrew/.git/index.lock': Permission denied
    ```
1. エラーで検索したが下記がヒットした。
    - [https://qiita.com/aves/items/1195e64fa30402b7e1f6](https://qiita.com/aves/items/1195e64fa30402b7e1f6)
1. 下記を実行してディレクトリの権限を変更する。

    ```
    $ sudo chown -R $(whoami) $(brew --prefix)/*
    ```
1. 下記エラーが出た。

    ```
    Error: No such file or directory - /usr/local/Cellar/docker/19.03.13
    ```
1. 下記の知見が出てきた。
    - [https://stackoverflow.com/questions/64729870/fastapi-docker-compose-file-not-found-error](https://stackoverflow.com/questions/64729870/fastapi-docker-compose-file-not-found-error)
1. 下記を実行してみる。

    ```
    $ brew install docker docker-machine
    ```
1. 再度下記を実行したら正常エラーが出ず実行できた。

    ```
    $ brew upgrade
    ```
Cloudflareのキャッシュをコマンドから手っ取り早くパージする (APIトークン利用)

[株式会社シンプルウェイ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/simpleway) の7日目です。

参加人数少ないのでカレンダーに穴があきそう。。。

-----

Cloudflare便利ですね。無料でキャッシュつきリバースプロキシが使えるなんて素敵です。

Cloudflareでキャッシュを活用する目的は、負荷対策だったり転送量対策だったりするので、キャッシュ対象のファイル範囲が広かったり時間が長かったりと、大概キャッシュを強めに設定すると思います。

ところで、キャッシュを強めにするとコンテンツを更新したときに反映されるまでのタイムラグが気になります。管理画面からキャッシュパージすればすぐに反映させることは可能ですが、いちいちログインするのが面倒です。

そんなときにはAPIを使ってコマンド一発でキャッシュ削除しちゃいましょう。

### APIトークンの準備

APIの実行はトークンを利用することとし、トークンには特定サイトのキャッシュパージのみ実行できる権限にしておきます。万が一トークンが漏洩しても影響を最小限にできます。

まずCloudflareの[APIダッシュボード](https://dash.cloudflare.com/profile/api-tokens )にアクセスします。

「トークンを作成する」ボタンを選択します。

![「トークンを作成する」ボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/185992e7-555d-939a-056a-6f47740e05db.jpeg)

「カスタム トークン」セクションの「始める」ボタンを選択します。

![「カスタム トークン」セクションの「始める」ボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/c7b5832e-08ed-01df-0465-010fc7afc848.jpeg)

画像のようにAPIトークンの権限を設定します。

![APIトークンの権限設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/baeed761-8506-f4c8-09d5-1956b0f63d35.jpeg)

確認画面で「トークンを作成する」ボタンを選択します。

![「トークンを作成する」ボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/3d5aa586-501c-feec-4cc5-688afd797e78.jpeg)

発行されたトークンをメモしておきます。

![トークンをメモ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/c49094bd-06c3-7c71-c326-abb9df08bec3.jpeg)

### ゾーンIDの確認

次にサイトのゾーンIDを確認します。

サイト設定のダッシュボード画面右下に表示されているゾーンIDをメモしておきます。

![ゾーンID](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219010/65be00d9-1246-9bcf-c4b5-15cfd9e4b981.jpeg)


### パージコマンド

おもむろに下記コマンドを実行します。

```
curl -X POST "https://api.cloudflare.com/client/v4/zones/[ゾーンID]/purge_cache" -H "Authorization: Bearer [APIトークン]" -H "Content-Type: application/json" --data '{"purge_everything":true}' 
```

[ゾーンID] と [APIトークン] は上でメモした値に置き換えてください。

JSONがレスポンスされるので、その中に ``"success": true`` が含まれていれば成功です。
オンラインイベント配信 with COVID-19

昨日は @akipon1206 の「[AWSを始めたい人向け](https://qiita.com/akipon1206/items/aa3b0f5a5df7c84e0175)」でした。

---

株式会社ラクスでガンプラ部の部長をやっている @moomooya です。

さて今年はCOVID-19によってイベント開催が軒並みオンライン化しました。弊社が主催するイベントも社内で検討した結果、6月からオンライン開催していくことになりました。これまでの数倍のペースで開催するようになったというのは謎ですが、社外登壇者も多く敷居の低い登壇の場として活用していただけているようです。

で、手探りしながら開催してきたオンラインイベントですが、配信周りの話を「はじめての○○ 超LT会」

[![はじめての○○ 超LT会 vol.1](https://connpass-tokyo.s3.amazonaws.com/thumbs/f5/32/f532b3e0de09fae17611b1fd12867062.png)](https://rakus.connpass.com/event/188470/)

という**1分間でLTする**というイベントで発表したのですが、まさかの機器配線図が不完全だったというポカをやらかしました。やっと修正版の検証もできたのでバグ修正版を元に紹介していきたいと思います。

[![はじめてのオンラインイベント配信 with COVID-19](https://files.speakerdeck.com/presentations/3ec0112ce9064e5d9a08fdb1c1fee32b/slide_0.jpg)](https://speakerdeck.com/moomooya/online-event-bugfixed)

## 前提条件

- Zoomを使用
- 感染対策で運営スタッフが同じ部屋から配信できない
    - 参加者と同じく1参加者としてログイン
    - 全員がワンオペ状態
- 効果音とかないと寂しい
- 機材の持ち込みは可能
    - ただしデータストレージ機能が有効になるような接続は不可
        - 自動検知で弾かれるらしい

## さっそく機器配線図

![機器配線図](https://files.speakerdeck.com/presentations/3ec0112ce9064e5d9a08fdb1c1fee32b/slide_12.jpg)

アドベントカレンダーということで出来るだけ2020年に話題になった機材を導入しています。

### 各種入力制御（切り替えとか）

中心に据えるのはビデオスイッチャ [BlackmagicDesign Atem mini](https://amzn.to/36QtIB3) （読みは「えーてむみに」）です。2019年末に発売され元々10万円～だったビデオスイッチャを3万円台で入手可能にしたことから人気でしたが、2020年4月頃にリモートワーク需要で入荷を数ヶ月待たないと手に入らない大人気機材になりました[^atemmini]。

[^atemmini]: 今は流通も安定しています。転売ヤーも在庫を吐き出したようで中古市場もあふれかえっている様子。

ビデオスイッチャ（映像入力の切り替え）というものの、音声ミキサー（入力された音声ソースをオンオフしたり、音量調整したり）やビデオキャプチャ（映像入力をPCにWebカメラ扱いで入力）の機能も持っている多機能機材です。

### 映像入力、映像モニタ

手持ちのデジタルカメラをつなげています。レンズもいくつか試しましたが、最終的にはワンマン配信なら3mくらいの距離から100mmのレンズを使うのが背景もしっかりボケてちょうど良かったです。2人とかで配信するときには35mmとか28mmを検討すれば良さそう。

使っている[SONY α7II](https://amzn.to/3mRXb3r)はバッテリーが保たないことで有名ですが、1時間半ほどで切れてしまい勉強会1回分保ちませんでした。充電しながら映像出力もできない残念仕様なのでバッテリーグリップ必須です。まあ予算が許すなら同じSONYでも[SONY α7III](https://amzn.to/3gkUqVL)にしておけばモバイルバッテリーなどから充電しながら使えるので幸せになれますし、BlackmagicDesignの [Pocket Cinema Camera](https://amzn.to/3mWEITd) あたりを使うとAtem mini経由でカメラ操作できたりするみたいです。

またZoomは配信マシンで画面共有を行うと自分の画面を確認するのが困難になります。なのでAtem miniのモニタ出力にフィールドモニタをつなげて映像入力を別途確認できるようにします。フィールドモニタは今年発売された [Feelworld F6 Plus](https://amzn.to/36OyH5n) を使っています。いわゆる中華製フィールドモニターで安いですがなかなか使い勝手は良いです。

### 音声入力

音声入力は2系統でヘッドセットと効果音サンプラー代わりのiPadです。どちらも Atem mini に接続します。

イベント配信中はかなり頻繁にマイクのON/OFFを切り替えます。Atem mini に接続したことで物理ボタンによるON/OFFもできるようになっているのですが、音声のON/OFFは Atem mini からではなく、Zoomクライアントの方からまるごとミュートかけています。

用途として音声入力すべてをミュートするかどうかという使い方なので、個別のON/OFFを意識せずにZoomクライアントからミュートの設定を行っています。画面上でも状態がわかるのでうっかりマイクをミュートにしたまましゃべっていた、という事故にも気づきやすいです。

### 音声モニタ

Zoomに入力している音声（自分の声や、iPadから入力する効果音）は通常聞くことができません。特に効果音を入れている時は音声がモニタできないと音量や聞こえ方などの確認ができず不便です。
macOSの場合、LadioCastというソフトウェアでZoomへの入力している音声入力を通常の音声出力にも出力することで音声の確認ができるようになります。

---

といった方法でオンラインイベント配信を行っていました。
配信機材はもっと少なくすることもできますが、適宜導入することで快適な配信を行うことができるようになりました。

さて、明日は @MasaKu の「[【2020年版】明日話せる！PHP Weekly News 注目記事をご紹介！](https://qiita.com/MasaKu/items/e3b375e58301e416efbb)」です。
cp コマンド Linux




# ディレクトリの中身`だけ`全て、別のディレクトリ内にコピーする

例： target_dir/* を dist_dir/ にコピーする

```zsh:カレントディレクトリ確認
tree

#├── goal_dir
#│   ├── cottino.gif
#│   ├── houni.png
#│   ├── ne.jpg
#│
#├── start_dir
#    ├── korewo.txt
#    ├── idou.txt
#    ├── sitainda.py 
```
```zsh:コピー元ディレクトリ内でコピー実行
cd start_dir

cp　-r　`ls　-A`　../goal_dir
```

# 参考

>lsの「-A」オプションは
「.」と「..」以外の全てのファイルを表示するオプションです

https://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=4857&forum=10
LINE WORKSでBotを使う三歩手前(準備の準備編)

LINE WORKSでBotを使いたい！けどど素人！という人のために少しずつプロセスを書き留めます。
こちらは第一弾、「三歩手前：準備の準備編」です。

####参考ドキュメント
 [LINE WORKS Developers](https://developers.worksmobile.com/jp/?lang=ja)
 [LINE WORKS Developers API 認証の準備](https://developers.worksmobile.com/jp/document/1002002?lang=ja)

####LINE WORKSのアカウントと権限
・LINE WORKSのアカウントを用意し、権限を確認します
　-Developer Console の利用には、管理画面から以下のいずれかの権限を付与する必要があります。
　　→最高管理者 or 副管理者 or カスタム権限の「Developers」が含まれた管理者
　　→今回筆者は最高管理者のアカウントを使用

####Developer Console
LINE WORKS Bot Platform API 利用に必要な設定は、[Developer Console]( https://developers.worksmobile.com/console/openapi/main)で行うため、ログインし使えるようにする。（規約への同意等）

####余談：Service API Consumer Keyはライトプラン以上
「Service API Consumer Key」についてはライトプラン以上で利用できます。（筆者はフリープランのため利用できません）
![ServiceAPI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79466/50e59750-f753-a768-5ba3-f550d70be9ad.png)

####Server API Consumer Key
Server API Consumer Keyとして活用するAPI権限設定を選択できます。
（下記キャプチャは全てにチェックを入れちゃってます）
![kengensettei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79466/b33486a7-49ad-c80a-f3d2-bf4b6ec1c1a1.png)

次は、Tokenの設定画面に遷移します。
有効期間は最大365日まで選択でき、有効期間を自動延長するかどうかも設定できます。

![kanri.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79466/5f636a00-3301-123e-2dcf-ba5abbaf4b44.png)

####Server List
続いてServer Listの設定・・・ですが、スキル不足のためここは次回以降とさせてください。（ごめんなさい）
続いてはHeroku！！


####Herokuのアカウント作成
Botを運用するサーバーを用意しなければなりません。
今回は無料でWebアプリケーションの公開ができるPaaS「[Heroku](https://jp.heroku.com/home)」を使うことにしました。
アカウントは無料で発行できます。

アカウント作成は[こちら](https://signup.heroku.com/login)から

・メールアドレス
・名前
・役割（役職？）など属性の入力
などを行い、

メールアドレスに届いたURLをクリックして
・パスワード（英数字と記号が必要）

を設定し、登録完了です。

####今日はここまで・・・
果たしてBot作成までたどり着けるのか、次回頑張ります！
【Swift5】UITableViewCellで画像や色を変えたのにも関わらず同じセルが表示されるバグの対処法

#はじめに#
UItableViewCellのセルの再利用の仕組みによって、指定したcellの見た目を変える処理をした際に、過去のセルの変更が残ってしまうというちょっとしたバグが発生したので今回はUItableviewのセルの仕組みをみていきます
##セルの再利用

TableViewは、大量にある同じ種類の情報をリスト表示する際に利用されます。そのため実装方法によってはセルの描画数が非常に多くなり、特にスクロール時には、パフォーマンスの低下が考えられます。これを解決するのがcellの再利用です。毎回新しくviewを作るのではなく以前に生成したcellを利用することで、メモリ割り当てを最小限にできます。
まずセルの再利用の際にはUItableviewにデフォルトで設定されているこのメソッドを使います

公式ドキュメント参照
https://developer.apple.com/documentation/uikit/uitableview/1614891-dequeuereusablecell


```swift
func dequeueReusableCell(withIdentifier identifier: String, for indexPath: IndexPath) -> UITableViewCell
```

そしてこのメソッドを、cellの生成されるタイミングで上のメソッドを発火させます

```swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//処理
}
```

このメソッドは、再利用可能なcellがあればそれを、なければ新しく作成したcellを返します。再利用可能なcellは、reuseIdentifierに紐づけられた`reuse queue`という場所に格納されています。

##Reuse Queue
tableviewは裏側で`reuse queue`という、データの箱のようなものを持っており、reuseIdentifierごとにreuse queueが存在します。画面外に出たcellは、自身のidentifierに紐づいたreuse queueに追加されます。そして、同じidentifierのcellが表示されようとする時、queueから取り出されます。
下の図のようにスクロールしたら次のcellがqueueから取り出されるイメージ
![dequeue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670219/8882eb57-6a47-a59f-7c3f-477b3069f4de.png)


##セルの再利用の落とし穴

```swift
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得(セルの再利用メソッド発火)
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cellidendifier", for: indexPath)
        print(indexPath.row)
        //セルのviewを変更する処理
        cell.textLabel!.text = "\(self.data[indexPath.row])"
        if indexPath.row == 3{
            cell.backgroundColor = UIColor.red
        }

        return cell
    }
```
例えばこんな感じで指定したセルの色を変えたい時にこのような処理を書くと、背景色を赤に変えたセルは、他のセルにも再利用されてしまいます。
指定した以外の色は元に戻す必要があります

```swift
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得(セルの再利用メソッド発火)
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cellidendifier", for: indexPath)
        print(indexPath.row)
        //セルのviewを変更する処理
        cell.textLabel!.text = "\(self.data[indexPath.row])"
        if indexPath.row == 3{
            cell.backgroundColor = UIColor.red
        } else {
            cell.backgroundColor = 元の色               
        }

        return cell
    }
```


カスタムセルの中身の画像を動的に変更したい場合はこのようにカスタムセルの画像を初期化する必要があります

```swift
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得(セルの再利用メソッド発火)
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cellidendifier", for: indexPath)
        //画像を初期化
        cell.sampleimage.image = nil
        return cell
    }

```

##最後に
セルを再利用してることで前の状態が残るので、想定とは異なるview状態になります
今後似たような症状が起きた場合は、再利用によるセルリセットし忘れを疑いましょう
VPCのCIDRブロックって何？

## 発端
いつもなんとなく使っていたVPCですが、IPアドレスの設定やCIDRがよく分からなかったので調べました。

## IPアドレス
今回はVPC内の話なのでプライベートIPについての話となります。ちなみにIPv4
32bit2進数で割り当てられるので$2^{32}$個あることになります。人間には分かりにくいので8桁ずつで分けてそれを10進数に割り振っています。

## CIDR
サイダーと呼びます。使えるIPアドレスの範囲を示します。例えばVPCのCIDRを

```math
10.0.0.0/16
```

と指定してあげるとVPC内で使えるIPアドレスの範囲は

```math
10.0.0.0 \approx 10.0.255.255
```

となります。
/より後でIPアドレスの範囲(サブネットマスク)を指定してあげてどのネットワークに所属しているのかを表しています。このようなサブネットマスクの表記法を***CIDR表記***と呼びます。

またCIDRではどこまでをネットワーク部分、どこまでをホスト部分にするかを自由に選ぶことができます。この数字は32bitの桁数に対応しており10.0.0.0/16では

```math
\underline{00001010}.\underline{00000000}.00000000.00000000
```

までをネットワーク部分として使うということを宣言しています。

VPCの中でサブネットを構築しようとなると基本的に

```math
10.0.10.0/24
```

このようにすると思います。この場合ネットワーク部分の宣言は左から24桁となるので

```math
\underline{00001010}.\underline{00000000}.\underline{00001010}.00000000
```

ここまでとなります。つまり残り8桁がホストとして使用可能となります。

ここで筆者が作成したEC2のプライベートIPアドレスを見てみましょう。設定は上記のCIDRです。

![2020-12-08_01h33_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667634/360b8eb0-673d-b767-9fd4-2ed2f6150cb1.png)

確かにサブネット内(***10.0.10.0/24***)に指定したマスクの範囲内でIPアドレスが割り当てられていました。

## 所感
ネットワークの分野はちょっと地味ですが面白い。アカデミックさがあってなんだか学生に戻った感じでした。
【Nuxt/Composition API】Cannot read property '$auth' of undefined の解決法

## はじめに
@nuxt/authを使ってログイン認証をしようとしていたがエラーが出て詰まったのでメモ。
※ めちゃくちゃ初歩的なミスです。
### 環境

```json
"nuxt": "^2.14.6",
"@vue/composition-api": "^1.0.0-beta.20",
"@nuxtjs/auth": "^4.9.1"
```

## 問題のコード
`onSubmitButtonClick`でリクエストを送りたい

```javascript:signIn.vue
<script lang="ts">
import { defineComponent, reactive, ref } from '@vue/composition-api'
export default defineComponent({
  setup() {
    const email = ref('')
    const password = ref('')
    const onSubmitButtonClick = (e: Event) => {
      this.$auth
        .loginWith('local', {
          // emailとpasswordの情報を送信
          data: {
            email: email,
            password: password,
          },
        })
        .then(
          (res:any) => {
            // 認証成功後に実行したい処理
          },
          (e: Error) => {
            // 失敗時の処理
          }
        )
    }
    return { email, password, onSubmitButtonClick }
  },
})
</script>
```

```nuxt.config.ts
export default {
  ...
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
  ...
}
```

```json:tsconfig.json
{
  ...
  "types": [
    "@types/node",
    "@nuxt/types",
    "@nuxtjs/axios",
    "@nuxtjs/auth",
  ],
  ...
}
```

### エラーメッセージ

```shell
Cannot read property '$auth' of undefined
```

`nuxt.config.ts`の設定もしてるのになぜ、、、

## 解決法

composition APIの理解の甘さでした。
Vue 2.xまで`this.$~`で取得していたものは、compositionAPIではsetup関数の第二引数である`context`から取得する様変更された様です。

公式ドキュメントにもありました。

> The second argument provides a context object which exposes a selective list of properties that were previously exposed on this in 2.x APIs:

https://composition-api.vuejs.org/api.html#setup

```javascript

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}
```

今回の場合は

`this.$auth` → `context.root.$auth`

に変更した所、解決しました。

```javascript:signIn.vue
setup(_props, context) {
...
  const onSubmitButtonClick = (e: Event) => {
    context.root.$auth.loginWith('local', {
...
```

## まとめ
今回はcompositionAPIもnuxtも理解が曖昧なまま進めた結果詰まってしまいました、、
勿体ないのでインプットも丁寧にしていきたい。



---
Twitterやってるのでフォローお願いします！
https://twitter.com/1keiuu
AWS Lambda（Node.js）でSORACOMのAPIを使うための準備

AWS LambdaからSORACOMのSIM情報などを取得する場合、[Naotaka Saito](https://github.com/NaotakaSaito)さんのSORACOM APIのライブラリを使うと便利です。
本記事は自らの備忘を兼ねて残しておきます。

# 前提
Lambdaでライブラリを使用する場合、Zipファイルでアップロードする必要があるようです。
Zipファイルの作成にはあらかじめNode.js、npmが動作する環境が必要となります。
本記事ではLinux環境（CentOS7）を前提とした手順を説明します。

# Linuxでの操作
例として、lambdaディレクトリを作成し、Zipファイルを作成します。

```
mkdir ~/lambda
cd ~/lambda
npm install soracom_api
vi index.js
（コード記述）
zip -r lambda.zip *
mv lambda.zip ../
```

index.jsは適当にデフォルトソースでも書いておきます。

```JavaScript
exports.handler = async (event) => {
    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};
```

# AWSでの操作
作成したZipファイル（例ではlambda.zip）をAWSコンソールを操作するPCにコピーしておきます。  
その後の手順は以下の通り。

1. AWS ConsoleでLambdaを開き、「関数の作成」をクリックする。
2. 「一から作成」を選択し、任意の関数名を指定し、ランタイムで「Node.js …」を選択し、「関数の作成」をクリックする。  
![soracom_api101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/187ddbeb-8098-b87e-ba9b-7e5d1bc21d3e.png)
3. 「アクション」「.zipファイルをアップロード」をクリックする。  
![soracom_api102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/0714eb63-8a54-62f0-ca8b-56f1914366fe.png)
4.  作成しておいたZipファイルをアップロードし、保存する。  
![soracom_api103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/127160c2-e817-febd-87a3-eb05fd585481.png)

以上でsoracom_apiのライブラリが使えるようになります。
![soracom_api104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916611/9d94f621-16b1-7bcb-07c6-c8d8d6e5a903.png)


# 使い方
ライブラリの詳細については[GitHubのドキュメント](https://github.com/NaotakaSaito/soracom_api)を参照してください。