OmniAICreator/Qiita-1.07M huggingface dataset:
MIPSでもmpg123

mpg123は依存もないのでZRouter.orgに追加してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/1ed188ad-e9e5-2128-27c8-8374096fb0ff.png)

ビルドして試したところCPUを使いきって音トビが発生します。

mpg123はx86やarmではMMXなどのCPUの機能を使ってアセンブラで最適化されてますが、MIPSには最適化コードがありません。

mpg123のページを見るとSGIではテストしているようですが、MIPSにはまったくふれられてません。

しかしそんなに遅くはないだろうと思って調べてみたところ、--with-cpu=generic_nofpuでconfigureしたら問題なくなりました。

```
procs  memory       page                    disks     faults         cpu
r b w  avm   fre   flt  re  pi  po    fr   sr fl0 md0   in    sy    cs us sy id
1 0 0  45M   45M     0   0   0   0     0    3   0   0  458   149   628 14  7 79
1 0 0  45M   45M     0   0   0   0     0    2   0   0  443   142   595 16  6 78
0 1 0  45M   45M     0   0   0   0     0    2   0   0  457   142   639 15  6 79
0 0 0  45M   45M     0   0   0   0     0    3   0   0  442   143   599 15  7 78
0 1 0  45M   45M     0   0   0   0     0    2   0   0  438   141   603 15  6 80
```

mpg123のデフォルトはgeneric_fpuで、MIPSの場合はFPU処理は例外でソフトウエアで処理するのでCPUを使い切ってしまうのかもしれません。

整数演算で精度が出ないのか、ノイズがあります。ちょっと対策を考えないとダメそうです。
【学習記録㉒】Vuexのactionsを用いて非同期処理を実装する！

# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`actions`を用いて非同期の処理を実装します。

## actionsとmutations
[前回の記事](https://qiita.com/Ooooooomin_365/items/37b2e9752f781a855ee2)では`mutations`を用いて`state`へアクセスしていましたが、mutationsでは非同期の処理を書くことはできません。

[Mutations Must Be Synchronous](https://next.vuex.vuejs.org/guide/mutations.html#mutations-must-be-synchronous)

非同期の処理を書くためには`actions`で非同期の処理を書きます。`actions`は`mutations`へ処理をcommit(委託)することで状態を変更しています。

## 実際にactionsへ非同期処理を書いてみる
今回は前回の記事で作成した「ボタンをクリックしたら数字がカウントアップされていく」という内容に非同期の処理を足してみます。
と言っても凄く単純で、「ボタンクリック後1秒経過したのちに数字がカウントアップされていく」というようにしていきます。

### サンプルコード

```js:store.js
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    getters: {
        count: state => state.count
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        incrementAsync(context) {
            setTimeout(() => {
                context.commit('increment')
            }, 1000)
        }
    }
});

export default store;
```

```vue:count.vue
<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    },
  },
};
</script>
```

```vue:increment.vue
<template>
  <button @click="increment">+1</button>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch("incrementAsync");
    },
  },
};
</script>
```

### 結果
以下のようにクリック後、遅れてカウントアップされていることが分かります。
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/6b9b684c-f430-0d58-b548-efde57b7b9c7.gif)

# おわりに
今回はVuexのactionsについて学びました。
Vuexも色々と機能が多くて覚えるのが大変ですが、しっかりと理解して使いこなしていけるよう引き続き頑張っていきたいと思います。
【学習記録⑱】$routerを用いてページ遷移を行う！

# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
[前々回の記事](https://qiita.com/Ooooooomin_365/items/f655e714223e9d654120)にて、`router-link`を用いてページ遷移する方法について記載しましたが、今回は`$router`を用いてページ遷移を行う方法について記載します。

なお、以下の公式ドキュメントによると`router-link`の動作の中身が`$router`とのことなので、両者での挙動の違い等はないようです。

https://next.router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location

## サンプルコード
上記のドキュメントを参考に、`$router`を用いてページ遷移を行ってみます。
今回は「朝食ボタン」「詳細ボタン」をクリックすると、それぞれのページに遷移するという内容にします。

```vue:App.vue
<template>
  <button @click="toBreakfast">朝食ボタン</button>
  <button @click="toDetails">詳細ボタン</button>
  <router-view></router-view>
</template>

<script>
export default {
  methods: {
    toBreakfast() {
      this.$router.push({ path: "/Morning/breakfast"});
    },
    toDetails() {
      this.$router.push({ path: "/Morning/details" });
    },
  },
};
</script>
```

```js:router.js
import Morning from './views/Morning.vue';
import MorningDetails from './views/MorningDetails.vue';
import MorningBreakfast from './views/MorningBreakfast.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/Morning',
            component: Morning,
            children: [
                {
                    path: 'details',
                    component: MorningDetails
                },
                {
                    path: 'breakfast',
                    component: MorningBreakfast
                }
            ]
        },
    ]
});

export default router;
```

```vue:Morning.vue
<template>
  <div>おはよう</div>
  <router-view></router-view>
</template>
```

```vue:MorningBreakfast.vue
<template>
  <div>朝ごはんはパンです。</div>
</template>
```

```vue:MorningDetails.vue
<template>
  <div>だんだん冷えてきたので体調には気を付けていきましょう。</div>
</template>
```

## 結果
それぞれのボタンをクリックすると対象のページへ遷移することが確認できます。

**朝食ボタンクリック**
![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/78b64ea8-1b14-ac8d-fa70-f7545181324e.png)
**詳細ボタンクリック**
![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/44c8fdac-bc56-7a99-7ae4-34a3408d1cf5.png)

# おわりに
今回は`path`オプションを用いて遷移先の指定等を行いましたが、調べてみると`name`オプションなどを利用して遷移先を指定することもできるようなので次回はそちらの方法について調査して記事にしていきたいと思います。
Ubuntu で Node の最新版/推奨版を使う (n コマンド編)

Ubuntu 20.04 に Node の最新版、安定版を切り替えて使うために n コマンドを導入します。
nコマンドは npm から導入できます。

## nコマンド導入
```bash
sudo apt install nodejs npm
sudo npm install n -g
```

## 推奨版(lts) のインストール
```bash
sudo n lts
#   installed : v16.13.0 (with npm 8.1.0)
```

## 最新版(latest)のインストール
```bash
sudo n latest
#   installed : v17.0.1 (with npm 8.1.0)
```

## 古い nodejs npm の削除
```
sudo apt purge nodejs npm
```

## 各バージョン
無事にインストールされましたか、バージョンを確認します。

```bash
npm -v
# 8.1.0

node -v
# v17.0.1

n --version
# v8.0.0
```

## インストール済みのバージョンを切り替える (推奨版/最新版を切り替える) (sudo n)
`sudo n` で切り替えることができます。
カーソルキーで選択しリターンキーでインストールできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1982/3db9254a-f8c8-5fba-91a6-58c37c3c3c06.png)
【学習記録⑰】childrenオプションを用いてネストしたルートを設定する。

# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はVue Routerにて、`children`オプションを用いてネストしたルートが正しく認識されるように設定していこうと思います。

## ネストしたルート
[前々回の記事](https://qiita.com/Ooooooomin_365/items/7b29806171d7b220ba6f#%E3%83%AB%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%A8%AD%E5%AE%9A)にて、ルートファイルの設定を行いました。
しかしながら、上記の設定のみでは対象の`path`以降、例えば`/test`ルートをセットしていた場合は`/test/1`や`/test/details`などのそれに続くpathに対応ができません。
その対応を行うのが今回の記事で記載する`children`オプションです。

## childrenオプション
childrenオプションの使い方は以下のように対象の親pathのオブジェクト内に`children`オプションを追加して親path同様に再度`path`, `component`を追加していきます。

```js:router.js
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/test',
            component: Test,
            children: [
                {
                    path: 'details',
                    component: TestDetails
                }
            ]
        },
    ]
});

export default router;
```

Testファイルは以下のようにさらに`router-view`タグをセットします。
`/test/details`へアクセスされた際に以下へ記載した`<router-view></router-view>`が`TestDetails`の内容へ変換されます。

```vue:Test.vue
<template>
  <div>Test</div>
  <router-view></router-view>
</template>
```

## 以上を用いてサンプルを作ってみる
それではVue Routerとchildrenオプションを用いて簡単なサンプルを作ってみます。
内容としては、`/Morning`ルートの先へ`breakfast`, `details`ルートを設定し、それぞれの出力内容が正常に行えることを確認していきます。

```vue:Morning.vue
<template>
  <div>おはよう</div>
  <router-view></router-view>
</template>
```

```vue:MorningBreakfast.vue
<template>
  <div>朝ごはんはパンです。</div>
</template>
```

```vue:MorningDetails.vue
<template>
  <div>だんだん冷えてきたので体調には気を付けていきましょう。</div>
</template>
```

```js:router.js
import Morning from './views/Morning.vue';
import MorningDetails from './views/MorningDetails.vue';
import MorningBreakfast from './views/MorningBreakfast.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/Morning',
            component: Morning,
            children: [
                {
                    path: 'details',
                    component: MorningDetails
                },
                {
                    path: 'breakfast',
                    component: MorningBreakfast
                }
            ]
        },
    ]
});

export default router;
```

```vue:App.vue
<template>
  <router-link to="/Morning">朝の挨拶</router-link>
  <router-view></router-view>
</template>
```

## 結果
以下のようにそれぞれのURLで正常に文字が表示されていることが分かります。
![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/5daf6003-3bee-17c5-c0d9-2a3783303a5e.png)
![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/aa22ac96-9178-33aa-d390-b0b948ef9723.png)
![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/61230bce-98f5-6a24-0088-1a770831f1f3.png)

# おわりに
今回は`children`オプションを用いてネストしたルートの設定を行いました。
こちらも実際のアプリ開発で利用する場面は多いと思うのでしっかり理解していきたいと思います。
【学習記録⑯】router-linkタグを用いてページの切り替えを行う方法。

# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`router-link`タグを用いてページの切り替えを行う方法について記載していきます。

## router-linkタグ
router-linkタグを利用することで、特定のページへ遷移することが可能になります。
通常別のページへ遷移する際は`<a>`タグを利用します。
しかしながら`router-link`はaタグとは動きが少し異なり、一つのhtmlファイル内で表示を切り替える、いわゆるSPA（シングルページアプリケーション）の動きを可能にします。

https://next.router.vuejs.org/api/

## 実際に動作を見てみる

今回は`朝の挨拶`と`昼の挨拶`を`router-link`タグを用いて切り替えてみます。
以下ではrouter-linkタグのpropsの`to`と`active-class`を使用しています。

**to** → 遷移先
**active-class** → 現在ページの際に指定されているclass名が付与される

```vue:App.vue
<template>
  <router-link to="/" active-class="selected-link">朝の挨拶</router-link>
  <router-link to="/Afternoon" active-class="selected-link">昼の挨拶</router-link>
  <router-view></router-view>
</template>

<style scoped>
.selected-link {
  font-size: 20px;
}
</style>
```

```vue:Morning.vue
<template>
  <div>おはよう</div>
</template>
```

```vue:Afternoon.vue
<template>
  <div>こんにちは</div>
</template>
```

## 結果
以下のように朝の挨拶と昼の挨拶を切り替えることができたことが確認できました！
![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/16fe07f2-2164-3949-3933-7b38910985bc.png)
![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/284c28d2-c2bb-3731-662a-e6c6ad3e4183.png)

Chromeの検証ツールでネットワークの確認を行ってみると、ページを切り替えても毎回htmlファイルを呼びにいっていないことが分かります。
（写真だと分かりにくいですね...すみません。）
![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/92f4e065-baa1-09aa-11dc-58a0b995b485.png)

`router-link`ではなく、aタグで作成するとページを切り替えるたびに毎回htmlファイルが呼ばれていることが見られると思います。

# おわりに
面白いことに、`router-link`タグで記載しても実際にhtmlファイルに出力された際はaタグに置き換わっているんですよね。
おそらく`Vue Router`がよしなにやってくれているのだと思うのですが、余裕があったらこの辺りの挙動の違いとかも調べてみたいと思います！
Linuxコマンド一覧




# find
```
$ find /test | xargs grep "AAA"
$ find /test -name "index.html"
```
・/testは階層
・xargs→中の文字列検索

# ping
```
ping 142.250.196.99
```
・142.250.196.99はwww.google.co.jpに対応している。

# tail
```
$ cd /var/log/apache2
$ tail -f access_log
$ tail -f error_log
$ tail -n 10 access_log // 10行分出力
```

# ユーザー関連
```
$ id username
$ cat /etc/passwd
$ cut -d: -f1 /etc/passwd
$ sudo su - username // ユーザーの切り替え
```

# UMASK
・/etc/login.defsに記載されており、デフォルトの禁止事項を設定できる。
・ファイルはデフォルトで666, ディレクトリはデフォルトで777になっている。
・例えばディレクトリのUMASK値が022ならば、777 - 022 = 755 がデフォルトの権限となる。

# SSH接続
・鍵作成

```
ssh-keygen -t rsa -b 4096 -f authorized_keys
```
・authorized_keysは変えてOK
・-t　RSAは暗号手段の名称
・-b　バイト数
・-f　鍵の名前

```
$ sudo apt update
$ sudo apt install openssh-server
$ sudo systemctl status ssh
```
・３行目は確認コマンド

参考URL
https://codechacha.com/ja/ubuntu-install-openssh/


# パスワードを自動生成する
```
$ sudo apt install pwgen
$ pwgen --help
$ pwgen -y -s 10 3
```
・３行目は例。
・-y　最低でも１つの記号を入れる（helpオプションで確認できる）
・-s　偏りを一切つくらない（helpオプションで確認できる）
・10文字／3通り　→このくらいの長さならそれなりに頑丈。
・鍵認証できるならどうでも良い？→結論はNG。秘密鍵を紛失したり、サーバー会社の仕様変更などにより鍵認証ができなくなった場合などの際には、一生ログインができず泣き寝入りとなる。必ず設定しておくこと。

# Ubuntuのパスワード再設定
```
$ sudo su -
# passwd ubuntu
```
・上の自動生成したものを設定するとよい

# フォルダごと削除
```
$ rm -rf [DirectoryName]
```

# ディレクトリ構造のみコピーする
```
$ ./src -type d -print0  | xargs -0 tar zcf src.tar.gz --no-recursion
```


# tar

```

```
【初心者向け】GraphQLの公式サイトを読んでみた

##GraphQLの勉強を始める
REST APIを勉強した後にGraphQLが気になったので調べてみました。
GraphQLについて色々と解説してくれているサイトはあったのですが、
[公式サイト](https://graphql.org/
)が一番いいよねっていうことで公式サイトの超入門的な部分をかいつまんでみました。
英語力はあまりないので、間違えてたらこっそり教えて下さい。

##特徴
###A query language for your API
**GraphQLはクエリ言語である**
クエリ言語は、GraphQL APIのリクエストのための言語である
（クエリなんで問い合わせしますよってことですね。）


###Ask for what you need, get exactly that
**必要なものだけ取得する**
REST APIだと必要のないパラメーターも取得できるが、
GraphQLだと必要なパラメータを指定できる


###Get many resources in a single request
**一つのリクエストで多数のリソースを取得できる**
REST APIだとリソースごとにURLを分ける必要があるが、
GraphQLだと一つのリクエストで全てのデータを取得できる


###Describe what’s possible with a type system
**型が使える**
フィールドに型の定義ができる


##GraphQLの実装例

###Describe your data
**データを定義する**

```GraphQL
type Project {
  name: String
  tagline: String
  contributors: [User]
}
```

###Ask for what you want
**必要なデータを書く**

```GraphQL
{
  project(name: "GraphQL") {
    tagline
  }
}
```

###Get predictable results
**結果を得る**

```JSON
{
  "project": {
    "tagline": "A query language for APIs"
  }
}
```

##公式サイトを読んでみて
公式サイトの１ページ目に記載されている部分を抜き出してみました。
これだけでもほんの少しだけGraphQLの雰囲気が分かりました。
REST APIと比較してGraphQLの特徴が書かれていたので、
REST APIが分かっているとより理解がしやすいんじゃないかと思います。

これの通りに動かしてみるのも大きな一歩だった。
https://graphql.org/graphql-js/

もっと勉強するなら公式サイトへ
[公式サイトLearn More](https://graphql.org/learn/)

Apolloのチュートリアルもおすすめの勉強
https://www.apollographql.com/docs/tutorial/introduction/
Dockerの備忘録 #3

# ビルドコンテキスト
Dockerイメージをビルドする際にDockerデーモンに送信するホストOS側のディレクトリのことをビルドコンテキストと呼びます。
ホストOS側に置いてあるファイルをDockerイメージに内包する場合は、ビルドコンテキスト上にファイルが存在する必要があります。
ビルドコンテキスト上のファイルはビルド時に全てDockerデーモンに送信されるため、ビルドに不要なファイルは含めないことが推奨されています（ビルドコンテキスト上のファイルサイズが大きいとビルドの時間が長くなるため）。
ビルドコンテキストのファイルが全てイメージに取り込まれる訳ではないので注意してください。
あくまで一時的にDockerデーモンに送信されるだけで、どのファイルをイメージに含めるかどうかはDockerfileに定義します。

# デーモン
Linuxにおいて常駐型のプログラムのことをデーモンと言います。
例えば、Webサーバーのプログラムなどはデーモンとして起動し続け、クライアントからのリクエストがあった際に常に応答を返せるように常駐します。
【python3】AttributeError: partially initialized module 'XXX' has no attribute 'make'への対処

## 環境
Windows 10 Home
python 3.10

## 状況
小さなコードをテスト実行中に遭遇した。
その時のコードと、実行したときのエラー内容を以下に示す。

```gym.py
import gym

env = gym.make('Pendulum-v1')
env.reset()

for i in range(20):
    action = env.action_space.sample()
    state, reward, done, info = env.step(action)

    print(f"action:{action}, state:{state}, reward:{reward}, done:{done}")
```

```
Traceback (most recent call last):
  File "C:\Users\work\gym.py", line 1, in <module>
    import gym
  File "C:\Users\work\gym.py", line 3, in <module>
    env = gym.make('Pendulum-v1')
AttributeError: partially initialized module 'gym' has no attribute 'make' 
(most likely due to a circular import)
```
「部分的な初期化」とは何を意味するのだろう？
circular importが原因と言われても、具体的にどうすれば？

## 結論
問題なのはgym.pyというファイル名である。

インストールしたモジュール(もしくは標準モジュール)と同じファイル名をつけていると、循環参照が発生しAttributeErrorが起きる。ファイル名を「gym_test.py」など適当に変更するとエラーが消える。

## 参照
後ほど調べたところ、ファイル名とモジュール名を同じにした時にエラーが起きる旨が書かれていた。

https://qiita.com/VDiUZnM1hUIzKvb/items/4d18ca1d781ed6ff2b2f

## 記事投稿者様へ

参考としてコードを載せることが頻繁にあると思います。その時にファイル名にも(ほんの少しだけ)気を払っていただくと、予期せぬエラーで新しく学ぶ方が詰まるということが減るかもしれません。
Visual Studio for Mac インストール方法と起動できないときのエラー解決

### 1.環境
・Mac OS (Big Sur 11.6)
・Xcode 13.1(現状の最新版)

### 2.最終目的
Visual Studio 2017 for MACが起動できるようになること！

### 3.現在のエラー状況
#### 3-1.MicrosoftのHPにてインストーラーをDL

https://docs.microsoft.com./ja-jp/visualstudio/mac/installation?view=vsmac-2017

ダウンロード後にインストーラーを起動。
画面に沿って進めていく。
![スクリーンショット 2021-11-03 10.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/eee76939-4dff-4f30-13fc-3d2d5001c2a0.png)

![スクリーンショット 2021-11-03 10.39.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/fb284abc-12d4-0e50-b6a1-2d2171a4b5cd.png)

![スクリーンショット 2021-11-03 10.39.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/bc939c23-cca7-cc0e-da06-05cadd45bf62.png)

![スクリーンショット 2021-11-03 10.39.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/f5864105-4c0e-4085-bf62-239f33304bad.png)

※この画像の時はインストールを終えているので右下のボタンが「完了」になっています。


#### 3-2.アプリを起動からのエラー
![スクリーンショット 2021-11-03 10.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/dd9e794a-6846-85da-34b0-1a76befea855.png)

起動すると画像のようなエラー表示が出ます。

![スクリーンショット 2021-11-03 9.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/1f3f8395-ed23-2049-e983-456639306ca4.png)


### 4.エラーで試していること
1.再起動　→ダメ
2.アンインストールして再インストールをする →2017版はやはりダメ
アンインストール方法はこちら

https://docs.microsoft.com/ja-jp/visualstudio/mac/uninstall?view=vsmac-2019

3.2019版をインストール　→正常に起動！
![スクリーンショット 2021-11-03 12.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/013c0123-a18a-04b1-0eb2-ed45a3246228.png)

### 5.結論
Visual Studio 2017 for mac　は結局起動できませんでした！
2019では正常に起動したので、まず動かしたい方は2019の方でインストールをしてみてください！
※同環境で2017が動いている方がいたら教えて欲しいです・・・
Android + FirebaseAuth で Twitter OAuth認可時の accessToken, secret の取得方法（Kotlin）

# 概要

Android アプリで FirebaseAuth を使って Twitter OAuth の認可を受けた後、サーバに accessToken と secret を送り、サーバ側で Twitter API を用いて認可されている情報の参照などを行います。

クライアント（Android アプリ）側の実装については、基本的に公式ドキュメント（以下）に記述されている通りの方法でできますが、**accessToken と secret の取得方法** で少し迷ったので、備忘録を兼ねてその解決方法を記します。

https://firebase.google.com/docs/auth/android/twitter-login?hl=ja

# accessToken, secret の取得方法

Androidアプリが Firebase SDK の Twitter OAuth で認可を受けると、`OnSuccessListener::onSuccess` がコールバックされ、その引数（`AuthResult`）から accessToken と secret を取得できます。

以下、公式ドキュメントよりその部分のコード（Java）を抜粋します。

```java
firebaseAuth
    .startActivityForSignInWithProvider(/* activity= */ this, provider.build())
    .addOnSuccessListener(
        new OnSuccessListener<AuthResult>() {
          @Override
          public void onSuccess(AuthResult authResult) {
            // User is signed in.
            // IdP data available in
            // authResult.getAdditionalUserInfo().getProfile().
            // The OAuth access token can also be retrieved:
            // authResult.getCredential().getAccessToken().
            // The OAuth secret can be retrieved by calling:
            // authResult.getCredential().getSecret().
        })
```

ただし、上述のコメントで記載されている内容通り `getAccessToken()` と `getSecret()` を実行することができません。

# 解決方法

`authResult.credential`（`AuthCredential`型）を `OAuthCredential`型 にキャストすれば大丈夫です。

以下、公式のサンプルコードをKotlinに修正しつつ accessToken と secret を取得するサンプル（抜粋）を示します。

```kotlin
firebaseAuth // ← ついでにこれも公式ドキュメントで説明漏れているけど FirebaseAuth.getInstance() です
    .startActivityForSignInWithProvider(/* activity= */ this, provider.build())
    .addOnSuccessListener {
        val credential = it.credential as? OAuthCredential
        val accessToken = credential?.accessToken
        val secret = credential?.secret
        TODO("Send `accessToken` and `secret` to your server.")
    }
```
railsのdb:createのときにエラーでつまずいたのでその時の対応したメモ

環境：postgresql-10

$ bin/rails db:create をしたら下記のエラーがでました


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
could not connect to server: No such file or directory
        Is the server running locally and accepting
        connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
Couldn't create 'scaffold_app1_development' database. Please check your configuration.
rails aborted!
PG::ConnectionBad: could not connect to server: No such file or directory
        Is the server running locally and accepting
        connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
/home/shunsuke/scaffold_app1/bin/rails:9:in `<top (required)>'
/home/shunsuke/scaffold_app1/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)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
参考にしたサイト
https://teratail.com/questions/47554


試したこと

ポート番号５４３２で受け付けていますか？とエラーで書いてあるので
$service postgresql start で再度サーバーを動かしておなじコマンドを打ってみても変化なし


解決方法

動いているPostgresqlの受け付けているポート番号を確認してみる
$sudo pg_lsclustersで確認したら
10  main    5433 online   postgres /var/lib/postgresql/10/main /var/log/postgresql/postgresql-10-main.log

と表示され5433で受け付けているのでconfig/database.ymlにポート番号を記述した↓

default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # http://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  port: 5433 #ここにportを記述しました

そしてbin/rails db:createしたら

WARNING:  could not flush dirty data: Function not implemented
Created database 'scaffold_app1_development'
WARNING:  could not flush dirty data: Function not implemented
Created database 'scaffold_app1_test'

警告メッセージは出たものの何とか作ることができました！
bin/rails sで無事動いたのでとりあえず解決ということで...

おまけ？
関係ないと思い書いていないですがポート番号を追加したときに同時にした対策を書きます
何かのサイト？を見たときに書いてあった対策
下記のコマンドでpostgresql.confを開く
sudo vi /etc/postgresql/10/main/postgresql.conf

その中の#fsync=onのコメントを外しfsync=offします
その下にdata_sync_retry = trueを追加しました↓

fsync = off                             # flush data to disk for crash safety
data_sync_retry = true                  # (turning this off can cause

これは効果あったのかわからないですが一応...
これはなにしているのかよくわからない。。。
WSL2でUbuntuデスクトップ環境をインストールするときのメモ書き

- WSL2とUbuntu20.04をインストールする
- VcXsrvをwindows側にインストールする
- windows側でVcXsrvを起動する
    - DisplaySettingは「One large window」を選択
- WSL2でUbuntu20.04を起動する

以下のコマンドを実行

```
sudo apt upadate -y
sudo apt upgrade -y

sudo apt install -y libgl1-mesa-dev xorg-dev xbitmaps x11-apps

export DISPLAY={windows側のIPアドレス}:0.0
#ex export DISPLAY=192.168.XX.XX:0.0
```

以下のコマンドでディスプレイが正しく設定できているのかを確認する

```
xeyes
```
目のウィンドウがwindows側に表示されればOK
ウィンドウを閉じる

以下のコマンドでubuntu-desktopをインストールし、GUIを起動

```
sudo apt -y install ubuntu-desktop
sudo service x11-common start
sudo service dbus start 
gnome-shell --x11 -r
```
インストール直後は、正しく動作しないかもしれないので、一度再起動したほうがよいかもしれない。

- 引用
https://astherier.com/blog/2020/08/install-ubuntu-desktop-on-wsl2/
WinMerge


# 特定の文字を無視
* ツール＞フィルター
* 行フィルター
* 行フィルターを有効にする☑
* 新規＞正規表現☑
 
# テキスト比較
* ファイル＞新規＞テキスト
* 左右のテキストに対象の分をセット
* 右上の更新ボタンを押下<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637823/50944c8c-f912-b96e-b2b9-3b66e4c24eff.png)

# HTMLへ吐き出し
* ツール＞レポートの生成

#エクセルブック比較
###プラグインと自動モード
|比較前処理プラグインタイプ||
|----|----|
|手動比較前処理|★|P案件|
|自動比較前処理|||


|展開プラグインタイプ||
|----|----|
|手動展開|||
|自動展開|★|P案件|

https://manual.winmerge.org/jp/Plugins.html

### プラグインの設定
* CompareMSExcelFiles>プラグインの設定

|オプション||
|----|----|
|ワークブックの情報を複数ファイルに展開する|★|P案件|
|名前の定義を比較する|★|P案件|
|各セルの値を比較する|★|P案件|
|数式を比較する|★|P案件|
|図形内テキストを比較する|★|P案件|
|ゲッターとフッターを比較する|★|P案件|
|VBAマクロを比較する|★|P案件|
【JavaScript】関数とオブジェクト⑲　Symbol



#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/fdbfb7935863f2aa1fe3

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.Symbol

Symbolとはプロパティの重複を避けるために必ず一意の値を返す関数


####例1

Symbolの使い方

```js
// Symbolを定義
// コンストラクター関数とは違い、new演算子を使わない
const a = Symbol();
// Symbol()と出力される
console.log(a);
// 文字列や数値も引数として渡せる
const b = Symbol("hello");
// Symbol(hello)と出力される
console.log(b);
// 例えば同じ値を別な変数に入れると
const c = Symbol("hello");
console.log(c);
// 下記の結果はfalseとなる
console.log(b === c);
// 一意の値なのでそれぞれ別な値として識別される
// Symbolはプリミティブ型のひとつなので、typeofで確認するとsymbolというデータ型となる
console.log(typeof c);
```

####例2

どのように利用されているのか

````js

// new演算子を使用して文字列を作る
const str = new String("Jun");
console.log(str);
// 下記のように記述するとSymbolをキーにしたプロパティがプロトタイプに格納される
String.prototype[s] = function(){

}
// 出力結果の中にSymbol(hello): ƒ ()　が追加される
String.prototype[s2] = function(){

}
// このようにしても同じ名前のプロパティが格納されているが、別々のプロパティとして認識される
````

####例3

より詳しい使い方

````js
const s = Symbol("hello");
const s2 = Symbol("hello");
console.log(typeof s);

const str = new String("Jun");
console.log(str);
String.prototype[s] = function(){
  // returnでhello とthis(外で定義した値)を返す
  return "hello " + this;
}

const jun = "Jun";
// Symbolを使っているので、ドット記法ではなくブラケット記法で書く
console.log(jun[s]());
// hello junと出力される
````

今日はここまで！

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

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
DFS とは

## 勉強前イメージ

聞いたことあるけどわからんな....

## 調査

### DFS とは

Distributed File System の略で、分散ファイルシステムと読みます。
windowsサーバのネットワーク機能の一つで、DFS名前空間と呼ばれる機能によって
複数のファイルサーバにある共有フォルダの一元管理を行います。

### 仕組み

普通のファイル共有では、 `\\コンピュータ名\共有名\フォルダ名\` でアクセスが出来るが、
DFS名前空間サーバを経由すると `\\ADドメイン名\共有名\フォルダ名\` でアクセスでき、
1台のサーバにあるような階層構造でアクセスできます。

図で説明すると以下のようになります。

複数のファイルサーバにアクセスするには、 ファイルサーバを指定する必要がありました。

![12021-11-03 # DFS とは - diagrams.net - Google Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/ce24cd27-b2ab-25c9-5c19-b0620927f6ed.png)


しかしDFSにすると、サーバ名がパスに入らず1つのファイルサーバの下にあるように
パスとしてみることができます。
また、サーバ名がパスに影響ないのでファイルサーバのリプレイスもユーザには影響しません。

![22021-11-03 # DFS とは - diagrams.net - Google Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/effe5100-e039-263c-44a4-3fc21083eac8.png)

## 勉強後イメージ

あれって一つのサーバじゃなくても出来るのね、知らなかった
確かにいちいちサーバ名入ってたらユーザもめんどくさいよね。

## 参考

- [DFS 【Distributed File System】](https://e-words.jp/w/DFS.html)
- [DFSについて](http://qa.elecom.co.jp/faq_detail.html?category=&page=1&id=8063)
djangoテンプレートのエスケープについてまとめる

今回のお題
-
今回はdjangoテンプレートのエスケープについてまとめます。

例によって自分用のメモです。

目次
-

- エスケープとは
- safeフィルター
- autoescapeフィルター
- escapeフィルター
- templatetag、verbatimブロック

エスケープとは
-
エスケープとは、`{{}}`や`{%%}`で囲まれた部分の特殊文字、すなわち`<`や`&`などを他の文字に置き換えることを言います。

なぜこのようなことをしているのかというと、`{{}}`や`{%%}`の中の特殊文字が有効になっているとページの内容を書き換えることが可能になるからですね。

例えば以下のようなテンプレートがあったとして、フォームに入力された文字列が表示されるとします。

```django:テンプレート
<!-- フォームに入力された内容を表示 -->
{{ msg }}
```
このときにもし以下のようなメッセージが作られると、フォームには文字列ではなく画像が表示されることになります。

```django:入力されるメッセージ
msg = "<img src='xxxxxx'>"
```

```django:テンプレート
<!-- 特殊文字をエスケープしなかった場合 -->
<img src='xxxxxx'>
```

このような状況を回避するために、`{{}}`や`{%%}`には特殊文字をエスケープする仕組みが備わっているというわけです。

safeフィルター
-
では、逆に何らかの事情でエスケープを無効化したい場合にはどうすれば良いのでしょうか。

その場合には`safeフィルター`をかけることで特殊文字をそのまま解釈させることができます。

```django
msg = "<strong>python</strong>"
```
```html
<div>{{ msg }}を勉強する</div>
<!-- 以下のように解釈される -->
<div><strong>python</strong></div>
```

autpescapeフィルター
-
複数箇所でエスケープをまとめて無効化したい場合には、`autoescapeタグ`が便利です。

```django
{% autoescape off %}
{% for msg in msgs %}
{{ msg }}
{% endfor %}
{% endautoescape %}
```
また、`autoescapeブロック`の中で特定箇所だけエスケープを有効にしたいという場合には、`escape`フィルターを用います。

```django
{% autoescape off %}
{{ msg1 }}
{{ msg2 }}
{{ msg3|escape }}<!-- ここだけエスケープあり -->
{% endautoescape }}
```

templatetag、verbatimブロック
-
これらのタグは、`{{}}`や`{%%}`などのテンプレート予約文字をそのまま出力するのに使います。

まず`templatetag`に関しては、`{% templatetag xxx %}`というコードをテンプレートに埋め込むことでそれに対応した予約文字が表示されます。

templatetagの一例

| 入力 | 出力 |
|:-:|:-:|
| openvariable  | {{  |
| closevariable | }}  |
| opencomment  | {#  |
| closecomment  | #}  |
| openbrace  | {  |
| openbrace  | }  |

例えば

```django
{% templatetag opencomment %}
  <span>テスト</span>
{% templatetag closevariable %}
```
上記のコードであれば、

```
{# テスト }}
```
となりますね。

また、複数の予約文字をそのまま表示したい場合には`verbatim`ブロックが便利です。

このブロックで囲まれた部分は予約文字が全てそのまま出力されるので、例えば

```django
{% verbatim block %}
    {{ msg }}
{% endverbatim block %}
```

とすれば

```
{{ msg }}
```

とそのまま出力されます。

`block`は`verbatimブロック`ごとの識別子なので、ブロックが一つであれば省略可能です。

終わりに
-
エスケープについては以上です。

もちろんサイトの脆弱性を考慮するとエスケープを使わないに越したことはないですが、仕組みは知っておいて損はないですね。
美しきRubyリファクタリング(Part1)

## イントロダクション

Part1で終わるかもしれませんが、シリーズ化決定。

その名も「美しきRubyリファクタリング」。
名前が映画みたいでカッコいいね。



## 今日のリファクタリング

RSpecを書いているときに出くわしたリファクタリングのチャンス。

before:

```ruby
let(:process) do
  if process_type.is_a? Array
    process_type
  else
    [process_type]
  end
end
```


after:

```ruby
let(:process) { process_type.is_a?(Array) ? process_type : [process_type] }
```


これでとても簡潔なコードになった！


## 最後に

三項演算子が好きではない方にはグッと来ないリファクタリングだったかもしれないことに少し反省。
だが、私は「1行で書けるところは1行で書く」ということを愛している（茶番）

<br>

機会があれば、次の「美しきRubyリファクタリング(Part2)」でお会いしましょう〜( ´ v ` )

それでは〜( ´ v ` )
jqはLDJSON（1行に1個のjson）を扱える

jqは一度に1個のjsonしか扱えないと思い込んでいたが、そんなことはなかった。

`man jq`に「The input to jq is parsed as a sequence of whitespace-separated JSON values」（jqへの入力はホワイトスペースで区切られた一連のJSON値にパースされる）とある。

なので、例えば下記ファイルから各行の`name`だけ取り出したいという場合

```data.ldjson
{"user_type":0,"name":"red","date":"20200401"}
{"user_type":1,"name":"blue","date":"20200402"}
{"user_type":null,"name":"yellow","date":"20200403"}
{"user_type":1,"name":"green","date":"20200404"}
{"user_type":2,"name":"pink","date":"20200405"}
{"user_type":1,"name":"perple","date":"20200405"}
```

シンプルに下記で得られる。

```
$ jq '.name' < data.ldjson
"red"
"blue"
"yellow"
"green"
"pink"
"perple"
```

1行1JSONのログファイルを扱う場合なんかに便利そう。
途中でパースエラーとなる行があると、そこで処理ストップしてしまうのには注意です。そんな場合は[jq -R 'fromjson? | .name'](https://qiita.com/minamijoyo/items/95f8e60d2fe9509f0b7e)という風にすると良いらしい。
中華EtherCAT スレーブを買ってみた その1


Aliexpressでまた変な物を買ってしまったorz(1.8万)
TwinCAT3を勉強するのに何かEtherCATスレーブが欲しく探してみたけど中古でもよい値段なので。
ここはブログのネタにもなるので中華製品に手を出してみた。
なおTwinCAT3もEtherCATも全くよくわからんです。これから勉強するので。

https://aliexpress.com/item/4000898527207.html

EtherCat IOモジュール IN:16/OUT:16/AI:2/AO:2/エンコーダー/CAN/RS-485　という豪華仕様（使えるかはしらん）
どこのメーカなのか全くロゴもなくわからないですがInexbotという中華産業用ロボットを作ってる会社のところに説明書がありました。
ロボットコントローラのオプションボードなのでしょうか？
ちなみに届いたとき何も紙類も入ってなく、箱は適当な関係ない商品の段ボールにプチプチで巻かれて送られてきました。

http://en.inexbot.com/product/controlSys/34.html

(追記)よく見るとECAT-IO-R4(纳博特IO_R4使用说明书)のマニュアルの方が基板が似ている。基板を眺めてもTTL-485変換らしきものが見当たらないので
http://en.inexbot.com/manual/

# 構成
```
Microchip LAN9252(EtherCAT Slave Controller)
STMicroelectronics STM32F407 VET6(STM32 ARM Cortex-M4,168MHz,FLASH 512KB,RAM 192KB)
Texas Instruments ISO1050(Isolated CAN Transceiver)
```
LAN9252という割と定番のやつなんでなんかちゃんと使えそう。ワクワク＾＾
1万以下のEtherCATボードだとAliexpressの写真見る感じではASIX AX58100が多い。
次人柱で買うならASIX AX58100の激安(6000円台)のやつ試してみたい

DINレールにマウントできるケース付きです（裏側のみ）
![DSC_0376.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146151/172d26d5-a465-f375-5b4e-4bc8c796eaf1.jpeg)
![DSC_0383.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146151/be627e56-b997-a988-e174-bac25f1a9a18.jpeg)

#接続してみる
電源は端の4Pinコネクタで通信回路は+24V/GND、IO関係はVCC,VSSに電源供給しないといけない。
VCC,VSSをつなげないとLEDもリレーも動かない。

TwinCat3に接続してみてスキャンしたらこのように認識した

```
INEXBOT-IO-R2
VendorID:0x25(Inexbot NanJing Technology Co., Ltd.)
ProductCode:0x519
RevisionNo:0x1
```
|Object|名称|bit|説明|範囲|
| :--- |  :---  | :--- | :--- | :--- |
|0x7011|DO_OUTPUTS|16bit|デジタル出力 Y01-Y16|0-0xFFFF|
|0x7012|DA1_OUTPUTS|16bit|アナログ出力チャンネル1|0-0x0FFF(4095)|
|0x7013|DA2_OUTPUTS|16bit|アナログ出力チャンネル2|0-0x0FFF(4095)|
|0x6001|DI_INPUTS|16bit|デジタル入力 X01-X16|0-0xFFFF|
|0x6002|AD1_INPUTS|16bit|アナログ入力チャンネル1|0-0x0FFF(4095)|
|0x6003|AD2_INPUTS|16bit|アナログ入力チャンネル2|0-0x0FFF(4095)|
|0x6004|ENCODER|32bit|エンコーダのAB相カウント|0-6000|

CANとRS-485はどこへ？

TwinCat->TwinCat(Configモード)->フリーランモード
DO_OUTPUTSに書いてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146151/cac4e8d1-fbe4-9d8d-8f18-9e9713d7e4b8.png)

やったね＾＾
![IMG_20211103_083737.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146151/97f9a804-134c-554f-90ab-c52f1de9cc3f.jpeg)

# TwinCat3とEtherCAT

インストール方法は日本語サイトをみてやります

https://sites.google.com/site/twincathowto/home

EtherCATとはについてはこの連載を一通り読むとなんとなくわかります

https://eetimes.itmedia.co.jp/ee/series/1861/

TwinCat3はPCのネットワークアダプタのドライバをTwinCAT用に置き換えます。
問題はIntel系以外のLANには対応してないようです。
USB接続のLANアダプタも対応って書いてあるけど手持ちのやつは全部ドライバ入れようとするとBSODになりました。

https://sites.google.com/site/twincathowto/insutoruto-ji-ben-she-ding/riarutaimuisanettodoraibanoinsutoru

中古で買ったLet's note NX4(CF-NX4ED6CS)はIntel® Ethernet Connection I218-LMなので使えました。
最近はLANがないノートが多いので注意ですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146151/82d5f24c-8daa-14c1-e0dd-06f44811f485.png)
ubuntu 20.04環境に手軽に最新のnodejs + npm環境を構築

# 概要

neovimなんかを使ってると、システムにnodeの環境が欲しい時があるけど、aptで配信されているnodejsは古いので、システムにうまいことnodejsをインストールするための手順。

# 手順

1. 配布されているnodejsとnpmをインストール
1. nコマンドをインストールする
1. nコマンドで安定板をインストールする
1. aptで入れたnodejsとnpmをパージする

```bash
$ sudo apt update
$ sudo apt install nodejs npm
$ sudo npm -g install n
$ sudo n stable
$ sudo apt purge nodejs npm
```

nコマンドでインストールされたnodejsとnpmは `/usr/local/bin` にインストールされるので、シェルを起動しなおして `which` コマンドで確認出来たらインストール完了。

```bash
$ which npm
/usr/local/bin/npm
```

```bash
$ which node
/usr/local/bin/node
```

開発はnvmやnodenvを使おう。
プログラミング言語を暗記するのは効率が悪い

プログラミング言語を暗記するのは非常に効率が悪い

初めて機械学習のプログラミングをやった時
いろいろな言語を暗記して勉強していたけど
とても効率が悪かった

プログラミング初心者の人は
右も左もわからないから
暗記してしまう人もいると思います。

暗記するのではなく
メモ帳にまとめるだけで
暗記するという無駄な時間がなくなり

勉強効率がすごく上がるとおもいます。
raspberry pi 1 model bで、navit その16

#概要

raspberry pi 1 model bで、navitやってみる。
ワイヤレス　キーボードを導入してみた。

#写真

![DSCN0553.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9770396f-f493-374c-ffb5-52b7a2c090ed.jpeg)

#設定

ドライバーは、いらない。HIDで、認識。
キーボードを英語に設定。




以上。
raspberry pi 1 model bで、navit その15

#概要

raspberry pi 1 model bで、navitやってみる。
gpxでlog採ってみた。

#設定

/etc/navit/navit.xml

```
<log enabled="no" type="gpx" attr_types="position_time_iso8601,position_direction,position_speed,profilename,position_radius" data="track_%Y%m%d-%i.gpx" flush_size="1000" flush_time="30"/>
		


<log enabled="yes" type="gpx" attr_types="position_time_iso8601,position_direction,position_speed,profilename,position_radius" data="track_%Y%m%d-%i.gpx" flush_size="1000" flush_time="30"/>
		
```

#結果

![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F18104%2Fd8d3dd46-1672-981c-1aa5-c29d5041e83c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=b52c4b13fdf6dfaca6f4ce5693ad826b)


以上。
【Java】【Spring】Pointcut is not well-formed: expecting 'name pattern' エラーの解決法

#はじめに
今回は`Pointcut is not well-formed: expecting 'name pattern'`というエラーにハマったので、メモしておきます。

#エラーコード

```java
package com.example.demo.aspect;

import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.After;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.springframework.stereotype.Component;

import lombok.extern.slf4j.Slf4j;

@Aspect
@Component
@Slf4j
public class LogAspect {
	
	/**
	 * サービスの実行前にログ出力する
	 * 対象:[UserService]をクラス名に含んでいる
	 */
	@Before("execution(**..*.*UserService.*(..))")
	public void startLog(JoinPoint jp) {
		log.info("メソッド開始:" + jp.getSignature());
	}
	
	/**
	 * サービスの実行後にログを出力する
	 * 対象:[UserService]をクラス名に含んでいるs
	 */
	@After("execution(**..*.*UserService.*(..))")
	public void endLog(JoinPoint jp) {
		log.info("メソッド終了:" + jp.getSignature());
	}

}
```

エラーが出たのはPoiontcut部分の正規表現の部分だが、パット見間違ってなさそうに思えます。

#結論
ただの**ケアレスミス**というのが結論です。
というのも、正規表現の先頭部分のアスタリスク間に空白がなかったというだけでした。

なので、正しいコードとしては以下のようになります。
(※アノテーション部分だけ記載)

```java
@Before("execution(* *..*.*UserService.*(..))")

@After("execution(* *..*.*UserService.*(..))")
```

これだけでエラーは解決しました。
プログラミングにはあるあるですが、スペルミス、半角・全角スペースなどエラーの原因の8割はケアレスミスです。

ただ自分では見つけにくいのが難点ですが、、、

##executionの構文

`"execution(<戻り値> 空白 <パッケージ名>.<クラス名>.<メソッド名>(<引数>))"`

今回使用したPointcutのexecutionの構文は上記の構文なので、ケアレスミスを起こさないようにするためにも、ルールに従って記述することが重要です。

#参考文献
> [【Java】【Spring】Pointcut is not well-formed: expecting 'name pattern' エラーの対処法](https://stsa.hatenablog.com/entry/2020/06/12/200111)
iPhoneのショートカットにて時間を減算する

# ショートカットで時間を減算すると午後になる

https://discussionsjapan.apple.com/thread/250899633

この質問では不具合ですと結論づいていますが、解決しました。
めでたし。

# 方法

アラームに代入する値の設定をします。

日付フォーマットを`カスタム`にし、内容を`HH:mm`とします。

![E31DAAB1-3936-4AAE-92CD-658D7437470A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274492/426a384c-ba5f-d3b9-22da-d1d329fb1418.png)

そうすれば、5分前や10分前の時間も無事に設定することができました。

# 理由はわからず。

上の記事の通り、アラームに代入するときに時間がずれるみたいです。
その直前の`調整済みの日付`までは正常な時刻になっています。
データ・機械学習パイプラインをシンプルにするDatabricksジョブオーケストレーションの正式提供

[Now Generally Available: Simplify Data and Machine Learning Pipelines With Jobs Orchestration \- The Databricks Blog](https://databricks.com/blog/2021/11/01/now-generally-available-simple-data-and-machine-learning-pipelines-with-job-orchestration.html)の翻訳です。

Databricksの利用者が、容易に依存関係のある複数のデータパイプライン、機械学習パイプラインを構築できる様にする新機能である、ジョブオーケストレーションのGA(General Availability)を発表できることを嬉しく思います。

今では、データパイプラインは、自信の複雑性を緩和するために、一連の依存関係のあるタスクとして定義されるのが一般的です。しかし、この作業はいまだに、データチームにとって負荷の高い作業を必要とし、これらのパイプラインを開発、管理、監視し、信頼性高く実行するための特別なツールが必要となります。通常これらのツールは、実際のデータや機械学習タスクとは分離しています。インテグレーションの欠如は、企業における作業リソースを分断し、ユーザーは数多くのコンテキストスイッチを行う必要が出てきます。

本日のローンチによって、パイプラインのオーケストレーションは劇的にシンプルなものになります。複数ステップから構成されるジョブは、ノートブック、Pythonスクリプト、JARから構成される、モジュール化され依存関係のあるタスクを用いることで、データ・MLパイプラインの定義をシンプルなものにします。データエンジニアは、馴染みのあるDatabricksワークスペースの中で、データを変換・洗練し、機械学習アルゴリズムをトレーニングするマルチステップのジョブを容易に定義できるようになり、膨大な時間と労力を削減することができます。
![](https://databricks.com/wp-content/uploads/2021/10/ga-task-orch-blog-new-img.png)

*上の例では、ジョブはデータを取り込む2つのタスク:Clicks_IngestとOrders_Ingestから構成されています。この取り込まれたデータは、"Match"タスクで共に集計、フィルタリングされ、そこから機械学習用の特徴量を生成(Build_Features)し、永続化(Persist_Features)、新規モデルのトレーニングに使用(Train)されます。*

複数タスクを伴うジョブオーケストレーションのパブリックプレビュー中にいただいた、数多くのお客様からのフィードバックに大変感謝しております。これらのインプットに基づき、我々はさらなる改善を加えました。デバッグワークフローの改善、常にジョブの概観を知らせる情報パネル、そして新たなオーケストレーション機能をサポートする、Jobs API([AWS](https://docs.databricks.com/dev-tools/api/latest/jobs.html)|[Azure](https://docs.microsoft.com/en-us/azure/databricks/dev-tools/api/latest/jobs)|[GCP](https://docs.gcp.databricks.com/dev-tools/api/latest/jobs.html))のバージョン2.1の提供です。

> 「ジョブオーケストレーションは素晴らしいものであり、ノートブックのオーケストレーションよりもはるかに優れています。今や我々のジョブは複数のタスクを持っており、思ったよりもこれらの実装が簡単であることがわかりました。Databricksなしにこのようなデータパイプラインを実装することは想像もできません。」 - Omar Doma、BatchServiceのデータエンジニアリングマネージャー

**ご自身のワークスペースでジョブオーケストレーションを有効化([AWS](https://qiita.com/taka_yayoi/items/5dafcd0a275e2267aba2)|[Azure](https://docs.microsoft.com/en-us/azure/databricks/administration-guide/workspace/enable-mt-jobs)|[GCP](https://docs.gcp.databricks.com/administration-guide/workspace/enable-mt-jobs.html))して使い始めてみてください。**そうしない場合でも、向こう数ヶ月で自動的に有効化されます。

向こう数ヶ月間で、ジョブの複数のタスクで同じクラスターを再利用できる機能、全体の再実行を行わずに失敗したジョブを復旧する機能をサポートする予定です。また、既存のオーケストレーションツールとのインテグレーションを容易にする機能をローンチする予定です。

**ワークスペースでの有効化手順**

- [Databricks on AWS](https://qiita.com/taka_yayoi/items/5dafcd0a275e2267aba2)
- [Azure Databricks](https://docs.microsoft.com/en-us/azure/databricks/administration-guide/workspace/enable-mt-jobs)
- [Databricks on Google Cloud](https://docs.gcp.databricks.com/administration-guide/workspace/enable-mt-jobs.html)

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
Azure Container Apps でコンテナアプリケーションを簡単にデプロイしてみた

2021年11月のMicrosoft Igniteで、 **Azure Container Apps** が発表されました。

https://twitter.com/s2terminal_tech/status/1455585981050933250

https://techcommunity.microsoft.com/t5/apps-on-azure/introducing-azure-container-apps-a-serverless-container-service/ba-p/2867265

コンテナ化されたアプリケーションをデプロイできるサーバレスなサービスです。

サーバレスということで**使われていない間はゼロスケールして料金がかからなくなる（Azure Container Apps scale to zero and pause billing when not in use）** 点が特徴だと思います。これは、類似するコンテナ系サービスと比べると [先行しているGCP CloudRunの持っている特徴](https://cloud.google.com/run/pricing#billable-time)でもあり、また[AWS AppRunnerでは要望はあるもののまだ対応していないようです](https://github.com/aws/apprunner-roadmap/issues/9)。

とりあえず使ってみました。

## 環境
2021年11月2日 時点のAzureポータル

## 構築手順
[Quickstart: Deploy your first container app \| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/container-apps/get-started?tabs=bash)のとおりですが、ここではAzureポータル画面からデプロイしてみます。

[Azureポータル](https://portal.azure.com/)から「コンテナーアプリ」→「作成」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/6fd8042b-f554-d9ab-ed51-675159be0fe9.png)

- Subscription: Azureのサブスクリプションを選択
- Resource group: 「Create new」ですきな名前をつけて作成
- Container app name: すきな名前をつける
- Container App environment: 「Create new」から、好みの設定で作成

他の設定はデフォルトでOKです。
「App Settings」で「Use quickstart image」を使うことで、サンプルとして用意されたコンテナイメージ（おそらく`mcr.microsoft.com/azuredocs/containerapps-helloworld:latest`）がデプロイされます。コア数やメモリもサンプルとして最低限のものが自動的に選択されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/d88bba87-370e-6794-2ed5-1d4f6b9de948.png)

「作成」すると、しばらくしたら適当なドメインが払い出されてデプロイが完了します。

![Screenshot 2021-11-03 02.00.56 - Display 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/e0702cd9-5931-0326-37b5-ac350bed9bd6.png)

以上です。たったこれだけの手順で、コンテナアプリケーションが簡単にデプロイできました。

ここではサンプルのコンテナイメージを使いましたが、手元でビルドしたイメージや[Azure Container Registory](https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tutorial-quick-task)等でビルドしたイメージを指定するだけで、インフラの構築等をすることなくコンテナアプリケーションをデプロイできます。

## そのほか試してないけど気づいたこと
- ゼロにスケールすることもできるし、させないこともできる（Minimum number of replicas running for 
your container app を設定できる）
    - https://docs.microsoft.com/ja-jp/azure/container-apps/scale-app
    - 見た所、minReplicasの数がデフォルト`0`だけど最小値`1`なので、ちょっと謎
- 「継続的デプロイ」からGitHubと連携してデプロイしたりできるようです
- スケールしたインスタンス数などのモニタリング指標の見方はよくわからない
- 「simply run as always-on background jobs」とのことなので、サーバレスなサービスによくあるタイムアウトの厳しさとかが無くバックグラウンドジョブ等にも使える？

## 参考
- [Azure Container Apps \| Microsoft Azure](https://azure.microsoft.com/ja-jp/services/container-apps/)
- [Introducing Azure Container Apps: a serverless container service for running modern apps at scale](https://techcommunity.microsoft.com/t5/apps-on-azure/introducing-azure-container-apps-a-serverless-container-service/ba-p/2867265)
BigQueryで数字を3桁カンマ区切りにする（小数点以下の表示もOK）

# 背景
業務で小数点を含む数（のうち整数部のみ）を3桁カンマ区切りにする必要があり、実装してみました。

# 結論
## 小数点を含まない場合
整数のみを3桁カンマ区切りにするのは、FORMAT関数を使えば簡単にできました。
https://cloud.google.com/bigquery/docs/reference/standard-sql/string_functions#format_string

```sql
SELECT FORMAT("%'d", 1234567) # => 1,234,567
```

## 小数点を含む場合
SQLで頑張る手もありますが、こういう処理は集合指向よりも手続き型の方が書きやすくて保守しやすいと思っています。
BigQueryではユーザー定義関数（UDF）という機能でJavaScriptが使えるため、JavaScriptで書きました。
https://cloud.google.com/bigquery/docs/reference/standard-sql/user-defined-functions#javascript-udf-structure

こちらの記事に、JavaScriptで小数点を含む値を3桁カンマ区切りにする方法があったため参考にしています。
https://www.yoheim.net/blog.php?q=20190702#t7

アレンジとして、第2引数で小数点以下の表示桁数を指定できるようにしています。
（丸めは四捨五入にしています）

```sql
CREATE TEMP FUNCTION FORMAT_NUMBER(num FLOAT64, digits INT64)
RETURNS STRING
LANGUAGE js AS r"""
    if (num === null) return null;
    var s = String(Math.round(num * (10 ** digits)) / (10 ** digits)).split('.');
    var ret = String(s[0]).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
    if (s.length > 1) {
        ret += '.' + s[1];
    }
    return ret;
""";

SELECT FORMAT_NUMBER(1234567, 0) # => 1,234,567
SELECT FORMAT_NUMBER(1234567.123, 1) # => 1,234,567.1
SELECT FORMAT_NUMBER(0.567, 2) # => 0.57

```
npmとは？


## 目標
・npmの概要をザックリ理解する
・npmの頻出コマンドを理解する。

## きっかけ
・Laravelアプリ開発中にnpmで詰まったから
・過去、何となくで進めてた気持ち悪さから


## 結論
#### 「npmとはNode.jsのパッケージを管理するツール」

## 詳しく
#### Node.jsとは？
Node.jsはJavaScriptの実行環境のことです。

PHPやRubyは、サーバーサイドで動作します。
Webアプリ開発では必須の言語になります。
しかし、 JavaScriptはブラウザ上でしか動作しません。
よって、DBと連携したりする複雑なWebアプリは作れませんでした。

そこで誕生したのがNode.js

サーバーサイドで動くことが可能になり、多くの開発者が使用するようになりました。
現在は、便利なパッケージが追加されているため、クライアントサイド（ブラウザ上）でも多く利用されています。

#### パッケージとは？
パッケージは、ライブラリやフレームワークなどの詰め合わせです。
Vue、React、webpack、jQueryなどです。

使いたいJsライブラリがある場合、
```<script src="xxx.js"></script>```
などと記載はせず、npmを使ってインストールします。

## 基本コマンド
#### バージョン確認
```npm -v```
#### 最新にアップデート
```npm update npm```
#### npmを管理するディレクトリ作成
```npm init```
このコマンドでpackage.jsonファイルが作成されます。
#### パッケージのインストール
```npm install パッケージ```
package.jsonファイルがあるディレクトリにて実行します。
#### package.json記載のパッケージをインストール
```npm install```
#### package.json記載のパッケージをアップデート
```npm update```
#### インストール済のパッケージの一覧表示
```npm list```
#### タスク実行
```npm run タスク```
package.json内に書かれたシェルスクリプトを実行します。

##あとがき
最後まで読んで下さり、ありがとうございました。
間違った記載や表現などありましたら、コメントいただけると幸いです。
PassRoleってなんやねん！

今回は備忘録程度のちょっとした記事です。タイトルの通りIAMロール関連で耳にするPassRoleについて軽く触れます。
・どうやってIAMロール作るんだ」のざっくりとした流れ
・実際にアタッチするポリシーの例
・これらを経て作成したIAMロールの用途

を順に紹介します。

#作り方
PassRoleは

IAMロールを作成する
↓
IAMポリシーを作成する
↓
カスタムを作成する
↓
IAMロール作成完了

という流れで作りアタッチします

###ポリシーの記述例


```ruby:「CloudFormation経由でだけリソースを作る」IAMポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "iam:PassRole",
            "Resource": "*",
            "Condition": {
                "StringEqualsIfExists": {
                    "iam:PassedToService": "cloudformation.amazonaws.com"
                }
            }
        }
    ]
}

```
```ruby:「EC2インスタンスに特定のIAMロールのみアタッチする」IAMポリシー
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "IAMPassRoleForEC2",
      "Effect": "Allow",
      "Action": [
        "iam:PassRole"
      ],
      "Resource": "arn:aws:iam::12345:role/EC2Role",
      "Condition": {
        "StringEquals": {
          "iam:PassedToService": [
            "ec2.amazonaws.com"
          ]
        }
      }
    }
  ]
}
```
※arnの部分は変更してください

#用途

IAMユーザーがリソースに対してIAMロールを与える際に制限できる



参考リンク：
https://blog.serverworks.co.jp/tech/2018/12/19/post-68316/
https://dev.classmethod.jp/articles/restrict-pass-ima-role-with-passrole/
https://dev.classmethod.jp/articles/iam-role-passrole-assumerole/
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_use_passrole.html
[nvtop] インストールが"nvtop : Depends: libnvidia-compute-418 but it is not going to be installed"で失敗したときの対処法

# 動作環境
- Ubuntu20.04LTS

# 対処法
2021/11/2 時点：
nvtopの安定版(ver1.1.0)ではこの問題は[解決されていません](https://github.com/Syllo/nvtop/issues/51)
よって[Debianのパッケージリスト](https://packages.debian.org/sid/nvtop)からベータ版(ver1.2.2)のamd64のdebファイルをダウンロードしてインストールします

```console
wget http://ftp.jp.debian.org/debian/pool/contrib/n/nvtop/nvtop_1.2.2-1_amd64.deb
sudo apt install ./nvtop_1.2.2-1_amd64.deb
```
以上です
VSCodeの拡張機能Stylelintがアップデートで動かなくなった時の対処法

2021年10月22日、Stylelint（拡張機能）のv1.0.0がリリースされました。

https://github.com/stylelint/vscode-stylelint/releases/tag/v1.0.0

このアップデートで既存の設定ではStylelint（拡張機能）がVSCode上で動かなくなったので記録しておきます。

※2021年11月3日現在、v1.0.3がリリースされています。

この記事ではややこしいので以下のように記述します。
VSCode拡張機能のStylelint: Stylelint（拡張機能）
npm/yarnモジュールのStylelint: `stylelint`

# 要約

settings.jsonに以下を記述すればOK

```json
{
    "stylelint.stylelintPath": "node_modules/stylelint,
    // css/postcss以外を解析対象にしたい場合は以下も追記
    // 以下の例はSCSSを解析対象に加えている
    "stylelint.validate": [
        "css",
        "scss",
        "postcss"
    ],
}
```

以上の記述は`stylelint`をローカルインストールした場合（node_modules/stylelintが存在する場合）。
グローバルインストールしている場合はそのPathを指定すれば良いと思います（未確認）。

## v1系の主な変更点

* `stylelint` v13系のサポート終了→v14系に移行が必要
* 拡張機能自体に`stylelint`が同梱されなくなった→Path指定が必要
* デフォルトでcss/postcss以外を解析しなくなった→SCSS等別途指定が必要

# Stylelint（拡張機能）v1系の詳細

## `stylelint` v13系のサポート終了
v13系のサポートが終了し、現行のv14系以降がサポートされるようになりました。
執筆時時点ではv14.0.1が最新バージョンです。

https://github.com/stylelint/stylelint

13系を使っていると14系に移行しようねというポップアップが表示されます。
僕はWordPressのプラグイン開発をやっている関係で、環境構築は以下のコマンドで行っています。

```bash
$ npx @wordpress/create-block <project-name>
```

2021年11月3日現在、このコマンドでインストールされる`stylelint`はv13系です。
そのため別途`stylelint`は自分でインストールし直すのが良いかと思います、そのうちWordPress側でもv14系が採用されると思いますがそれまでサポートを打ち切ったと公言されているバージョンを使うのもアレなので・・・。

```bash
$ npm i -D stylelint
```

## 拡張機能自体に`stylelint`が同梱されなくなった
って言われるまで知らなかったんですが、どうやらStylelint（拡張機能）自体に`stylelint`が同梱されていたようです。
それが同梱されなくなったので、settings.jsonにPathを指定する必要があります。

```json
"stylelint.styelintPath": "node_modules/stylelint"
```

大半の環境ではこれで動くようになるんじゃないかなと思います。
もちろんグローバルインストールしている方はグローバルのPathを指定してください。

## デフォルトでcss/postcss以外を解析しなくなった
設定を変更しない限り、css/postcss以外の解析を行わなくなりました。
特に利用者が多いであろうSCSS等は別途していする必要があります。

```json
"stylelint.validate": [
    "css",
    "scss",
    "postcss"
],
```

SCSSは利用されるプロジェクト量を考えてもデフォルトでよくない？とは思いますが、ミニマムシンプルなのは最近の流行りなので「必要になったとき追加する」方がスマートかも知れませんね。

# 自動更新されたくない場合は設定でオフに
もしVSCodeの拡張機能を自動でアップデートしてほしく無い時はsettings.jsonで無効化しておくと良さそうです。

```json
"extensions.autoUpdate": false
```

とはいえ僕はめんどくさがりやなのでデフォルト設定で自動更新バンバン受け付けてますが、大きな変更の時は何らかの方法で通知があるとありがたい・・・笑。