OmniAICreator/Qiita-1.07M huggingface dataset:
[NestJS]複数のExceptionFilterを使用する

# ExceptionFilterとは
https://docs.nestjs.com/exception-filters

NestJSでbuilt-inで例外を処理する機構が組み込まれていますが、例外クラスによって独自の処理を挟むことができます。

## 例:`HttpException`
例として`HttpException`を継承している全ての例外をキャッチするのが以下のようなExceptionFilterです。
```
@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const request = ctx.getRequest<Request>();
    const status = exception.getStatus();

    response
      .status(status)
      .json({
        statusCode: status,
        timestamp: new Date().toISOString(),
        path: request.url,
      });
  }
```

このように例外をCatchしたあと、ロガーを差し込んだり、レスポンスを好きな形に整形したりという便利なことができます。


## NestJSのExceptionFilterで複数のFilterを使う

とはいえ、１つのExceptionFilterで書くと見ずらいことになってしまったり、クラスごとに違う処理を挟みたい場合がありますので調べた結果を共有します。

### 結論
https://stackoverflow.com/questions/54727103/nestjs-how-to-pass-the-error-from-one-error-filter-to-another

以下の２つのExceptionFilterがあると想定します。

- NotFoundFilter(NotFoundExecptionをCatchする）
- GlobalErrorFilter（それ以外をCatchする）

要求としては、まずNotFoundをCatchし、それ以外はGlobalErrorFilterで処理したいとします。

その場合の記述方法は以下のようにします。

```
# メソッドレベルで設定する場合
@UseFilters(GlobalErrorFilter, NotfoundFilter)
//          ^^^ 2番目に実行される            ^^^ 最初に実行される

# globalに設定する場合
app.useGlobalFilters(new GlobalErrorFilter(), new NotfoundFilter());
         //          ^^^ 2番目に実行される            ^^^ 最初に実行される 

```

ちなみに、ExceptionFilterでは複数の例外を設定することができます


```
@Catch(ExceptionA, ExceptionB, ExceptionC)
export class ExampleExceptionFilter implements ExceptionFilter {
    // something
}

```

これらの活用をすることで、エラー群ごとに別々の処理を挟むことができます。

便利ですね:airplane_small:
なぜ区間は[closed, open)での半開区間で表現すべきか？

以下の記事で再考しています。

https://qiita.com/aosho235/items/95b81b339b53ecd4f2de

# TL;DR
離散量（整数型や時刻を含まない日付型）の場合は、`[closed, closed]` が優位である。
連続量（floatや秒未満の精度の日時型）の場合は、`[closed, open)`が優位である。

どちらを選ぶにせよ、終端を含むかは必ずドキュメントに明記すべきである。

# [1982年のエドガー・ダイクストラによる説明](https://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EWD831.html)

a, bは非負整数とする。
1. [a, b)
1. (a, b]
1. [a, b]
1. (a, b)

0以上の区間を表すために、2と4だとa = -1にしなければならない。非負整数のみを考えていたのに負数を使わなければならない。
空の区間を表すために、3だと[1, 0]や[2, 1]のようにa > bにしなければならない。これは見苦しい。
よって残る1が良い。


Xerox PARCにおいて開発されたMesa言語には、`[a, b]` `[a, b)` `(a, b)` `(a, b]`の4種類の方法で区間を表す記法があったそうだ。しかし`[a, b)`以外はバグを生じがちなので非推奨になったという。

## 上記の説明への反論
上記では定義域を非負整数としていたが、コンピュータで扱える整数には上限がある。[a, b)だと、最大値を含む区間を表せない。
例えば定義域がuint8の場合、0 <= x <= 255を[a, b)で表すには[0, 256)としなければならないが、256はuint8に属さないのでこれはできない。

もしnullが使えるなら[0, null)でx >= 0を表せる。

[a, b]ならuint8の任意の区間を表せる。空の区間は確かにa > bになり見苦しいが、許容できる。

# 連続量を分割する場合は[closed, open)にすべきである
例えば1日を1時間ごとに分割したい場合、
[closed, open)なら`[0,1), [1,2), [2,3), [3,4), ..., [23,24)`とできる。
[closed, closed]だと`[0,0:59:59], [1, 1:59:59], ... [23,23:59:59]`としなければならない。
これは秒単位という精度情報をハードコーディングしてしまっていることになる。
もしミリ秒単位にしたくなったら、`[0,0:59:59.999], [1,1:59:59.999], ... [23,23:59:59.999]`に書き換えなければならない。

時間に限らず、実数を扱う場合は同様である。

<!--

# 整数の区間の長さを計算しやすい
整数の区間の場合、
`[a, b)`の長さは単純に`b - a`となる。
`[a, b]`の長さは`b - a + 1`となる。

# 参考2

https://waken.hatenablog.com/entry/2018/07/30/170604

>Random.Range(min,max)は、引数がfloatの場合、maxはinclusiveになりますが、intの場合はmaxがexclusiveになります。
>
>つまり、Random.Range(0.0f,10.0f)の場合、10.0fが返ってくるときがありますが、Random.Range(0,10)では10は返ってきません。最大でも9です。

らしい。
-->

# 付録：区間の表記法
数学では `[a, b]` と `(a, b)` のように角括弧と丸括弧で端点の包含を区別するのが一般的だが、プログラミングにおいてはこれらの表記は他の意味で使われることも多く、まぎらわしい。そこで、他の表記法が用いられることがある。

Unityでは
`[minInclusive..maxInclusive]`
`[minInclusive..maxExclusive)`
のように、カンマの代わりに `..` を用いることで、配列の表記等と区別しているようだ。良いと思う。

https://docs.unity3d.com/ja/2021.1/ScriptReference/Random.Range.html

終端のみの区別になってしまうが、各言語で次のような表記法がある：
Rust: `1..5` は [1, 5)（右端を含まない）
Rust: `1..=5` は [1, 5]（両端を含む）
Swift: `1..<5` は [1, 5)
Ruby: `1..5` は [1, 5]
Ruby: `1...5` は [1, 5)

# 付録：「取りうる値の中で最大のもの」でないならmax exclusiveと呼ぼう

数学において、最大値（maximum）とは「集合に属する要素のうち最大のもの」を意味する。a, bを実数としたとき、実数の部分集合 `[a, b)` は最大値なしとなる。bを最大値やmaxと呼ぶのは誤りである。

なので、`[min, max)` という表記は好ましくなく、 `[min, maxExclusive)` とすると良い。もちろん min側も明示して `[minInclusive, maxExclusive)` でも良い。

また、「パラメータAに指定可能な最大値は10である」と書いてあれば10は許容される。

```c
// Bad
for (i = 0; i < MAX; i++)
```
という書き方も、MAXは「iの取りうる値の中で最大のもの」ではないので好ましくなく、
```c
// Good
for (i = 0; i < MAX_EXCLUSIVE; i++)
```
と書く方が誤解の余地が無い。
2022/11/22主にITとかセキュリティの記事

静脈の色でディープフェイク動画をリアルタイムで見破る技術開発、Intel(11/20)
https://news.mynavi.jp/techplus/article/20221120-2516444/

金融庁、ネット不正送金対策強化　銀行業界に要請、偽サイト排除(11/20)
https://news.goo.ne.jp/article/kyodo_nor/business/kyodo_nor-2022112001000288.html

金融庁、ネット不正送金対策強化　銀行業界に要請、偽サイト排除(11/20)
https://www.47news.jp/economics/8594944.html

担当者は頻度も内容も「不十分」と認識  企業における訓練・演習の実施状況（1）(11/20)
https://www.risktaisaku.com/articles/-/74354

仮想通貨のスキャム（詐欺）とは？ | 事例と対策を紹介(11/20)
https://crypto-times.jp/cryptoscam/

感動与える手間と店舗の効率展開を両立　相反する取り組みをDXで支える(11/21)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600001/111500124/

SaaSを最大限活用　肝は変化への対応力(11/21)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/111500325/111500002/

「持たない」を徹底　異色のDXで成長加速(11/21)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/111500325/111500001/

ZOZOTOWN初の刷新　5年かけた移行の全貌(11/21)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600014/111400131/

既存Oracleの移行先、Oracle Exadata Database Serviceが有力な理由(11/21)
https://xtech.nikkei.com/atcl/nxt/column/18/01924/111100012/

東北大学がスピントロニクス研究を加速、半導体の消費電力を100分の1に(11/21)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/07351/

Windowsから離れられない、そんな人がLinuxを使うための秘策とは(11/21)
https://xtech.nikkei.com/atcl/nxt/column/18/02231/102100001/

防衛施設の工事作業員は機密情報を盗み放題(11/21)
https://xtech.nikkei.com/atcl/nxt/mag/ncr/18/00061/111000073/

トマトの収量をAIが5週先まで予測　安定供給でぶれない商談実現へ カゴメ(11/21)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600004/111000117/
Flutter・webViewで、Webサービスをモバイルアプリ上に実装し、個別通知機能を追加した話

# 🎅 はじめに 🎅
アドベントカレンダー参加したいなということで・・・
今日は、「Flutter × webView で開発したサービスに個別通知機能を追加」した話をします。
同じような境遇の方がいたら、ぜひ実装方針参考にしてみてください。
また、他の方法がある方はアドバイスお願いします。

# 🎁 個別通知を実装したい！ 🎁
高速な検証をする上で、昨今、webviewを活用したアプリリリースが流行っています。

モバイルの開発よりも学習コストが低く、ウェブ系のエンジニアが世の中的に多いため、この形式でリリースする手法が採用の容易さなどから、ベンチャー界隈で増えています。React Nativeを用いた開発ももちろんその一環です。我々の場合、ゆくゆくのリプレイスも考慮しつつ、Flutterを採用しました。

Flutterを採用した場合、プッシュ通知を実装する上で、Firebase Cloud Message（FCM）を用いるのが王道だと言われています。

しかしながら、webviewで実装したモバイルアプリの場合、個別プッシュ通知を実装するのは非常にめんどくさいです。それが今回の本題です。

### 何故めんどくさいのか？
全てをモバイルで実装するのと違い、webviewで実装すると、UserIDはウェブクライアント側に保持し、プッシュ通知を送るためのFcmTokenはアプリ側に保持する形になります。

つまり、表面にUserID、裏側にFcmTokenという状況が生まれます。これが厄介。。。
UserIDとFcmTokenが紐付けられたテーブルを作成したいけど、一緒にしてAPIを叩けない。

そんな時に、便利な [JavaScript Channel](https://pub.dev/documentation/webview_flutter/latest/webview_flutter/WebView/javascriptChannels.html)というものがあります。これは、ウェブクライアント側が持っている情報をflutter側に送り、イベント発火時にflutter側で所定の動作をすることができるというものです。（逆で、モバイル側からウェブ側に情報を送ることもできます）。

今回の課題を解決する上で、このJavaScript Channelを用いて、UserIDをモバイルクライアント側に送信して、イベント発火した際に、サーバサイドにUserIDと既に保持したFcmTokenをサーバにPOSTする、この形で無事個別通知ができる準備が整いました！

その後は、サーバサイドからFcmTokenを用いて指定の通知を送るようにすれば完成！

https://github.com/decision-labs/fcm

上みたいなgem入れればすぐ送れますね！

# 🦌 まとめ 🦌
今回は、Flutterのwebviewを用いたアプリで個別通知をする際の辛さを書きました。

Flutterで全て実装する場合は、このようなMobileとWebの行き来はないです。一方で、スピード感のある開発をする場合、webViewを用いてリリースするケースも増えています。

個別プッシュ通知の実現には今回のような方法が一個あるので、是非試してみてください。

# 参考記事 👍
webview実装のアプリケーションをリリースする際の注意点！

https://pentagon.tokyo/app/3512/#toc_id_1

JavaScript Channel に関して！

https://diamantidis.github.io/2021/10/17/two-way-communication-between-flutter-webview-and-a-web-page

最後まで読んでいただきありがとうございました！
railsにActionTextを導入したら、showページで投稿が変になっちゃったので対処

プログラミング学習2か月ちょいのクソ雑魚初心者です。
現在ポートフォリオでActionTextを導入した際に起こったエラーについて忘れないためにメモ書きと同時に、こちらへ初投稿しようと思い立ちました。

# 発生した問題
Ruby on Railsで投稿サイトを作っていて、下の画像みたいな感じに投稿画面にActionTextを導入しました。
![222222222222.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885423/6438cce8-4a4e-5d75-fccc-fc89e6f5d2df.jpeg)

# で、投稿フォームは問題なかったけど投稿後のshowページが…
試しにテストで投稿します。
![222222222222.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885423/19c7312e-aea3-d702-84a3-a76d45a19134.jpeg)
すると、、、
![333333333333333.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885423/1880702d-23f1-e499-e233-c74c51b272ab.jpeg)
**なんか変！！コードで書いちゃったみたいになってる！！**

ということでこちらの投稿文が正しく表示されるように修正していこうと思います。

# 結論から言うと原因は、、、

**データベースが問題でした！！！**

自分の投稿(post)のmigrateファイルが

```:~~~~_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.1]
  def change
    create_table :posts do |t|

      t.string :title, null: false
      t.string :introduction, null: false
      t.integer :user_id
      t.integer :post_tag_id
      t.boolean :status, default: true
      t.boolean :is_ban, default: false

      t.timestamps
    end
  end
end
```

そしてpostのモデルファイルが
```:post.rb
class Post < ApplicationRecord

---省略---

  has_rich_text :introduction

---省略---

end
```

上記の2ファイルを見比べると
**「introduction」のカラムが被ってしまっています**。
これが原因だったんですねぇ…

# てことで、解決法いきます。
### ①まずはデータベース修正
まずマイグレーションファイルのintroductionのカラムを消します

```:~~~~_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.1]
  def change
    create_table :posts do |t|

      t.string :title, null: false
      - t.string :introduction, null: false #←ここの行を消す
      t.integer :user_id
      t.integer :post_tag_id
      t.boolean :status, default: true
      t.boolean :is_ban, default: false

      t.timestamps
    end
  end
end
```

### ②マイグレートしなおし
そしてターミナルでデータベースをマイグレートをしなおします。

```
rails db:migrate:reset
```


※ここで自分はデータベースをリセットしちゃってますが、それが嫌な人は下記URLを参照してください
https://qiita.com/pyon_kiti_jp/items/a23660d20e76fffa5dd4
### ③これで治ってるはず…！
てことで、投稿してみます。
以下の様に投稿すると、、、
![44444444444.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885423/953493c6-2ba6-cd5e-a497-51774bed3c4e.jpeg)

![55555555555555555555555.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885423/cef9e93e-4270-39a8-e87b-65cc8c975a0a.jpeg)

**改行や太字、リスト表示も問題なく表示されました！！！！！！**

# 最後に
プログラミング初心者でこちらに投稿するか迷ったのですが、こちらについてのエラーはどこにも記載がなかったため投稿しようと思いました。
同じエラーに当たった人のお役に立てれば幸いです。
paizaラーニング「積の最小化 Python3編」

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_boss
私の回答
```Python
a,b=[int(x) for x in input().split()]
if a<0 and b<0:
    print(b*b)
elif a<0 and b>0:
    print(a*b)
elif a==0 or b==0:
    print(0)
elif a>0 and b>0:
    print(a*a)
```
elifでプログラムを終了してしまい、中途半端になってしまいました。


模範回答
```Python
a, b = [int(x) for x in input().split()]

if a <= 0 and b >= 0:
    # a から b の間に 0 が含まれる
    print(a * b)
elif a > 0:
    # a と b が両方とも正の数
    print(a * a)
else:
    # a と b が両方とも負の数
    print(b * b)
```
paizaラーニング「タイルの敷き詰め Python3編」

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_step8
私の回答
最初値が0のときを想定せず、何度もトライしました。
```
h, w = [int(x) for x in input().split()]

if h==0 and w==0:
    print("NO")
elif h==0 or w==0:
    print("NO")
elif h%2==0 and w%2==0:
    print("YES")
else:
    print("NO")
```
模範回答
```
h, w = [int(x) for x in input().split()]

if h == 0 or w == 0:
    print("NO")
elif h % 2 == 0 and w % 2 == 0:
    print("YES")
else:
    print("NO")
```
- 1 つだけ注意点があります。本問は「この箱を 1 つ以上の高さ 2 、幅 2 の四角いタイルで敷き詰めます。」と書かれているため、 1 つもタイルを敷き詰められない場合はNOを出力する必要があります。 1 つもタイルを敷き詰められない場合とは、Hが 2 未満、またはWが 2 未満のときです。
今後NeDBを使うのはやめよう

既にメンテナンスされていません。セキュリティ対応もされません。

https://github.com/louischatriot/nedb

> ⚠️ ⚠️ ⚠️ WARNING: this library is no longer maintained, and may have bugs and security issues. Feel free to fork but no pull request or security alert will be answered.

非バイナリ依存でデータはファイル保存、そしてファイルはテキスト形式なので容易に閲覧することができる、と、SQLiteではかゆいところに手が届かなかったのがNeDBなら届く。素晴らしいNoSQLデータベースであっただけに、非常に残念です。

教材向けで使いやすいNoSQLデータベース無いですかね。
paizaラーニング「池の周回 Python3編」

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_step6
私の回答
```
n,k,t=[int(x) for x in input().split()]
if (k*t)%n==0:
    print("YES")
else:
    print("NO")
```
模範回答
```
n, k, t = [int(x) for x in input().split()]

if k * t % n == 0:
    print("YES")
else:
    print("NO")
```
今回は模範解答と私の回答がほぼ同じでした！！
paizaラーニング「終了判定 2 Python3編」

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_step5
私の回答
whileとbreakを同時に使う必要がなかったようでした。
長い回答にしてしまいました。
```
n,k=map(int,input().split())
count=0
while (n<=k):
    if n>=k:
        break
    n=n*2
    count=count+1
print(count)
```

模範回答
```
n, k = [int(x) for x in input().split()]

m = 0
while n < k:
    n *= 2
    m += 1

print(m)
```
paizaラーニング 「終了判定 Python3編」

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_step4
私の回答
```Python
n=int(input())
array=list(map(int,input().split()))
sum=0
for i in range(n):
    if array[i]%2!=0:
        break
    sum=sum+array[i]
print(sum)
```

模範回答
```Python
n = int(input())
a = [int(x) for x in input().split()]

ans = 0
for ele in a:
    if ele % 2 == 1:
        break

    ans += ele

print(ans)
```
【JavaScript】HTML文字列を改行できない、innerTEXTとinnerHTMLの違い

# 概要
JavaScript(Vanilla JS)でのアプリを開発中に、HTML文字列を改行できない点で悩んだことがありました。
この記事では、その原因と解決方法を書いています。

## やりたかったこと
- JavaScriptのテンプレートリテラル内に記載したHTML文字列を、改行して表示したい
  - 下画像のように、ステータス状態とそのタスク数を改行して表示させたい
    （イメージ図が雑な点はお許しください）

今回開発したのは、TODOリストアプリです。各タスクステータスを表示するという仕様の実装段階でつまづきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1976485/52435933-e394-3113-32b6-acd94665613f.png)

## できなかった内容詳細
- 下記画像のように改行なしで、1行で表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1976485/4c31be73-845c-5018-ef2a-ecbab256dbf8.png)

改行していてもしていなくても、どちらでもユーザが得られる情報に変わりはないのですが。。。
個人的に、改行有りの方がより見やすいかなと思い、修正したかったのです。

## 原因
- `innerHTML`で文字列を置き換えていたため

## 解決方法
- `innerTEXT`で改行を`<br>`要素に置き換える

`innerHTML`を用いて要素を置き換えたことにより、改行が空白1文字に変換されていました。
そのため、要素内の全ての改行（今回は`\n`）を`<br>`要素に置き換える`innerTEXT`を用いることで解決しました。

```javascript:修正前
const taskState = document.createElement("li");
taskState.innerHTML = `${taskStatus.label} \n ${taskStatus.count}`;
```
- 検証ツール出力結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1976485/53e79610-76db-84e3-a2ad-673c819496bb.png)


```javascript:修正後
const taskState = document.createElement("li");
taskState.innerTEXT = `${taskStatus.label} \n ${taskStatus.count}`;
```
- 検証ツール出力結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1976485/9df52f37-7146-2ea8-1b65-2176ac4068fd.png)

## 終わりに
個人的なこだわりを実現すべく調べた内容でしたが、上記2つのプロパティの違いを理解することができました。

### 参考
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/innerText

https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
pyinstallerで作成した実行ファイルだとpydrive2が失敗する

# 環境
<!-- 問題が発生したOS・ソフトウェアのバージョン等 -->
- Windows10
- poetry: `Poetry (version 1.2.2)`
- pyinstaller: `5.6.2`

# 問題
<!-- 具体的にどのような問題が発生したか, どのようなコマンドを試したか -->
- 通常環境だと成功するが、pyinstallerで作成した実行ファイルだと以下のエラーが発生
  - `googleapiclient.errors.UnknownApiNameOrVersion: name: drive  version: v2`

# 解決の経緯
<!-- どのような経緯で解決できたのか -->
- `google-api-python-client` が原因かと思ったが関係なかった
- もう少し調べると、Githubのissueを発見し、解決
  - [gdrive: raises unexpected error - name: drive version: v2 (again) · Issue #7949 · iterative/dvc](https://github.com/iterative/dvc/issues/7949)

# 原因
<!-- どのようなことが原因だと考えられるか -->
- 最新のpyinstallerのバグらしい

# 解決法
<!-- どのようなことをすれば解決できるか, 具体的なコマンド等 -->
- pyinstallerのバージョンを5.0にする
  - [gdrive: raises unexpected error - name: drive version: v2 (again) · Issue #7949 · iterative/dvc](https://github.com/iterative/dvc/issues/7949) の「efiop commented on Aug 27」の発言

# 参考
<!-- この問題を解決するにあたってどのようなソースを参考にしたか, タイトル・URL等 -->
- [gdrive: raises unexpected error - name: drive version: v2 (again) · Issue #7949 · iterative/dvc](https://github.com/iterative/dvc/issues/7949)
数式内のアンダースコアが強調に解釈されないようにしたい

# 数式内のアンダースコアが強調に解釈されないようにしたい

以下のような 1 行内にアンダースコア (`_`) による下付き文字のある数式が 2 つある文章を考える。

```markdown-math
$\mathbf{e}_{i}$ と $\mathbf{e}_{j}$
```

$\mathbf{e}_{i}$ と $\mathbf{e}_{j}$

Qiita Markdown では、1 行に 2 つ以上ある `_` は強調表示として認識され、数式が上手く表示することが出来ない。この場合、1 つ目と 4 つ目の `$` がリテラルになっているため、この行にもう 1 つ数式を挿入した場合、余計にややこしくなる。

これを回避して数式と強調表示がきちんと理解されるようにする方法を考えたい。

<!--
本記事では、`markdown-math` という存在しない言語を指定しています。
これは、Markdown で利用される MathJax や KaTeX で利用される数式を示すこととしています。
-->

## ■ 強調表示になる要件

`_` による強調表示には、以下の 2 点が要請される。

1. 強調される文と `_` が接している（間に半角スペースが入っていない）
1. `_` による強調表示には分かち書きが必要

    **分かち書き** については以下の記事を参照してほしい。

    > [Markdown における強調の分かち書き \- Qiita](https://qiita.com/Yarakashi_Kikohshi/items/f5ebd1273cb6c0681da1)

数式内の `_` が強調に解釈されないようにするには、複数の数式内で強調表示に要請された記述にならなければ良い。

上で示した数式について、強調表示の要請と照らし合わせると、以下のように見ることが出来る。

```markdown-math_description
          強調開きの右側が “}” で分かたれている
          ↓
$\mathbf{e}_{i}$ と $\mathbf{e}_{j}$
                                ↑
                      強調閉じの左側が “{” で分かたれている
```

もちろん、2 つの `_` に囲まれた `{i}$ と $\mathbf{e}` は `_` と接している。

したがって、2 つの強調表示となる要件を満たしているため、`{i}$ と $\mathbf{e}` が強調表示されることになっている。

## ■ 強調表示の回避

強調符号が分かち書きにならなければ良いので、`{` \~ `}` で囲わなければ問題ない。次の場合では、`_` は分かち書きとならないため、強調表示に解釈されることはない。

```markdown-math
$\newcommand{\e}{\mathbf{e}}$
$\e_{i}$ と $\e_{j}$
```

$\newcommand{\e}{\mathbf{e}}$
$\e_{i}$ と $\e_{j}$

このようにすることで、強調表示を回避できるものの、執筆中にかなり気にする必要がある。あまりオススメできる回避方法ではない。

強調表示の 1 つ目の要件を回避することを考えると、`_` の周囲に半角スペースを設けることで、強調表示に解釈されない。

```markdown-math
$\mathbf{e} _ {i}$ と $\mathbf{e} _ {j}$
```

$\mathbf{e} _ {i}$ と $\mathbf{e} _ {j}$

実際は一方の `_` の左右どちらかに半角スペースを挿入すれば十分だが、編集しているとき強調表示になるかどうかを判定することは難しい。そのため、このようにする方が簡便だろう。LaTeX から流用する場合には、`_` の周囲に半角スペースを挿入するように置換すれば良い。

あるいは、新たなコマンドを作成することで、`_` が本文中に複数回登場することを回避することが出来る。ここでは `\sb` コマンドを作成する。（`\sb` は LaTeX にある下付きコマンド）

```markdown-math
$\newcommand{\sb}[1]{_{#1}}$
$\mathbf{e}\sb{i}$ と $\mathbf{e}\sb{j}$
```

$\newcommand{\sb}[1]{_{#1}}$
$\mathbf{e}\sb{i}$ と $\mathbf{e}\sb{j}$

これであれば、`_` による強調表示の影響を何も考える必要がない。ただし、LaTeX から流用する場合には少し面倒になる。

# 余談

Markdown パーサによってはきちんと数式と強調が理解される。Qiita Markdown でもきちんと理解される日が来ることを願っている :1234:
【WinActor】＜シナリオGoTo変数値引継ぎ＞を３つ以上のシナリオで使用時、途中のシナリオだけで変数を削除したら

こんにちは。やまなかです。

WinActorでシナリオ開発をし始めて５年目になります。

便利なライブラリの１つである`「シナリオGoTo変数値引継ぎ」`を使っている際に生まれた疑問について書きます。

## 知りたいこと

* ３つ以上のシナリオで変数値引継ぎをして、途中のシナリオだけで変数情報を消したらどうなるのか？

* 変数情報は引き継がれるのか？

<details><summary>【補足】そもそもの「シナリオGoTo」と「シナリオGoTo変数値引継ぎ」について</summary>
　「シナリオGoTo変数値引継ぎ」と、絶対にセットで使う「シナリオGoTo」について、どのようなものかというと…

<dl>
<dt>【シナリオGoTo】</dt>
<dd>１つのシナリオから別のシナリオへ処理を飛ばす機能のこと</dd>
<dt>【シナリオGoTo変数値引継ぎ】</dt>
<dd>シナリオGoToで処理を飛ばした際に、変数値の情報を引き継ぐ機能のこと</dd>
</dl>

</details>

## 検証環境

* シナリオ…A、B、Cの３つ
* 使用変数…変数a
* シナリオAに変数aは？…○（使っている）
* シナリオBに変数aは？…×（使っていない）
* シナリオCに変数aは？…○（使っている）


上記を踏まえて、タイトルの検証結果は下記になります。

## 結果
* AとCで共通で使う（同名の）変数がある場合、`途中のシナリオであるBにその変数が存在しなくても`、裏で変数値情報を引き継いでいるため、`変数内の値はAからCへと引き継がれる。`

* つまり、途中のシナリオで変数を削除しても、その前後のシナリオで同名の変数があれば`「シナリオGoTo変数値引継ぎ」での変数値の引継ぎに影響は出ない。`
　`⇒途中のシナリオで不要な変数を削除する事で、シナリオの可読性UP`
Leetcode 169. Majority Element

# 169. Majority Element

https://leetcode.com/problems/majority-element/

## アプローチ
### HashMap

```java
class Solution {
    public int majorityElement(int[] nums) {
        HashMap<Integer, Integer> hashmap = new HashMap<>();
        for (int num : nums) {
            hashmap.put(num, hashmap.getOrDefault(num, 0) + 1);
        }
        int majority = nums.length / 2;
        return hashmap.entrySet().stream().filter(obj -> obj.getValue() > majority).findFirst().get().getKey();
    }
}
```
PHPUnit が exit code 255 で死ぬ

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.348 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Thu Oct 13 2022 01:01:48 GMT-0700 (PDT)
* Source doc: 2022-10-12 phpunit が exit code 255 で死ぬ
* Tables are currently converted to HTML tables.
----->



## 発生した事象

PHPUnit を実行すると、何も出力せず終わってしまった。

終了コードを確認すると、 255 が出力されていた。

## 解消方法


```
ini_set('display_startup_errors', 1);
```


display_startup_errors が 0 になっていたため、 `require_once` 周りのエラー出力が抑制されていた。

上記設定を入れるとエラー内容が出力されるようになった。

## Ref

[php - PHPStorm - Process finished with exit code 255 - Stack Overflow](https://stackoverflow.com/questions/36412004/phpstorm-process-finished-with-exit-code-255)
Azure File Syncのコンポーネントと実装手順

●Azure File Syncのコンポーネント

■ストレージ同期サービス
Auzre File Syncを行うために必要となる、Azure上に作成するリソース。使用するサーバーを登録するための最上位のオブジェクトであり、同期グループを管理する役割をもつ。

■登録済みサーバー
サーバーとストレージ同期サービス間の信頼関係を表すオブジェクト。Azure File Syncで同期を行うには、対象のWindows Serverをストレージ同期サービスに登録する必要がある。

■Azure File Syncエージェント（同期エージェント）
Windows Serverにインストールするエージェントプログラム。Windows Serverをストレージ同期サービスに登録するには、Azure File Syncエージェントをインストールしておく必要がある。

■同期グループ
クラウドエンドポイントであるAzureファイル共有とサーバーエンドポイント感の同期リレーションシップを定義するオブジェクト。

■クラウドエンドポイント
Azureファイル共有へのポインターとなるｐ部ジェクト。クラウドエンドポイントとして指定されたAzureファイル共有は全てのサーヴァーエンドポイントとして同期されるため、クラウドエンドポイントは同期を行う上での羽生として動作する。
指定するAzureファイル共有のストレージアカウントは、ストレージ同期サービスと同じリージョンに存在する必要がある。

■サーバーエンドポイント
登録済みサーバーのWindows Server上のディレクトリパスを表す情報。
サーバーエンドポイントには、ボリューム上の特定のフォルダまたはボリュームのルートを指定できる。


●Azure File Syncの実装手順

１、ストレージ同期サービスのデプロイ
２、Windows Serverの準備
３、エージェントのインストールとストレージ同期サービスへのサーバー登録
４、同期グループとクラウドエンドポイントの作成
５、サーバーエンドポイントの追加
vmstat の出力をファイルに保存する

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.378 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Thu Oct 13 2022 01:01:15 GMT-0700 (PDT)
* Source doc: 2022-10-11 vmstat の出力をファイルに保存する
* Tables are currently converted to HTML tables.
----->



## 方法

```
vmstat 1 1 > file
```



## 詳細

一つ目の「1」は実行する間隔です。単位は秒数です。

二つ目の「1」は実行する回数です。指定しないと無限に実行されます。

この場合、1回だけ結果を出力して終わります。
top の出力をファイルに保存する

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.338 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Thu Oct 13 2022 01:00:22 GMT-0700 (PDT)
* Source doc: 2022-10-11 top の出力をファイルに保存する
* Tables are currently converted to HTML tables.
----->


## 方法

```
top -b -n 1 > ./file.txt
```



## 詳細


### -b

これによって「バッチモード」となります。


### -n 1

これによって、何回実行するかが決まります。この場合は 1回実行して終了します。


## Ref

[How to Save Top Command Output to a File (tecmint.com)](https://www.tecmint.com/save-top-command-output-to-a-file/)
MIB とは

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.549 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Thu Oct 06 2022 23:55:22 GMT-0700 (PDT)
* Source doc: 2022-10-03 MIB とは
----->

## MIB とは

SMI で定義された、 SNMP管理対象オブジェクトの定義情報を格納したもの


## MIB ファイルとは

SMI で定義された SNMP 管理対象オブジェクトの定義情報を、ファイルに格納したもの。


## SMI とは

SMI (Structure of Management Information)。

SNMP エージェントが、論理的に SNMP 管理対象オブジェクトにアクセスできるように、SNMP 管理対象オブジェクトの情報の構造を定め、名前を付け、詳細の記述を行う。

名前として付与する OID や、書式として定めるデータタイプ、データ転送に用いるエンコード方式など。

データ転送には、 ASN.1 と BER を用いる。


## ASN.1

メッセージの抽象化方式。

INTEGER, OCTET STRING, OBJECT IDENTIFER, NULL などのデータタイプはこの抽象化方式の文法からきている。


### プリミティブ

* INTEGER
* OCTET STRING
* OBJECT IDENTIFER
* NULL


### コンストラクタ

* 集約


### 定義済み

* IpAddress
* TimeTicks
Leetcode 209. Minimum Size Subarray Sum

# 209. Minimum Size Subarray Sum
https://leetcode.com/problems/minimum-size-subarray-sum/

## アプローチ
### Sliding window（?） Two Pointer

 

```java
class Solution {
    public int minSubArrayLen(int target, int[] nums) {
        int start = 0;
        int end = 0;
        int sum = 0;
        int result = Integer.MAX_VALUE;

        while (start < nums.length) {
            sum += nums[start++]; // 合算
            while (target <= sum) { // 基準を超過した場合、範囲を小さくする
                result = Math.min(start - end, result);
                sum -= nums[end++]; // マイナス計算
            }
        }

        return result == Integer.MAX_VALUE ? 0 : result;
    }
}
```
ONLYOFFICE Desktop Editors for Windowsをパソコンにインストールする方法

[オンラインエディタ](https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/index.aspx)のデスクトップ版は、インターネットへの常時接続を必要とせず、コンピュータ上のオフラインファイルで作業することができます。そのため、こちらをご希望の場合は、弊社のウェブサイトからデスクトップエディタをダウンロードし、インストールしてください。

## 最新版のダウンロード

デスクトップエディタの最新バージョンは、常に[こちら](https://www.onlyoffice.com/ja/download-desktop.aspx)のWebサイト上のリンクを使用してダウンロードすることができます。お使いのコンピュータにインストールされているWindowsのバージョンに応じて、インストールアプリケーションを選択する必要があります。

* **Windows 32ビット版** - 32ビット版のMicrosoft Windows XP、Vista、7、8、8.1、10がインストールされている場合。
* **Windows 64ビット版** - 64ビット版のMicrosoft Windows Vista、7、8、8.1または10がインストールされている場合。

:::note warn
64ビット版のMicrosoft Windows XPがインストールされている場合は、32ビット版のアプリケーションを使用することができます。
:::


ダウンロードボタンを押すと、ブラウザによってはダウンロードフォルダを選択するように促されます。それを選択すると、ダウンロードが開始されます。

ダウンロードが完了したら、インストールを開始します。

## Desktop Editorsのインストール

ダウンロードした **.exe** ファイルを実行します。インストールウィザードが起動し、インストール手順が説明されます。

:::note warn
コンピュータにアプリケーションをインストールするために、管理者権限または拡張ユーザー権限が必要な場合があります。これらの権限がシステム管理者によってコントロールされている場合は、システム管理者に連絡して、インストールを続行できるようにしてください。
:::


ユーザー使用許諾契約に同意し、コンピュータのハードディスクにプログラムを配置する場所を選択し（またはデフォルトのまま）、デスクトップにアイコンを作成する（または作成を拒否する）必要があります。

すべてのアクションが完了すると、インストールプロセス自体が開始されます。お使いのコンピュータの速度によっては、インストールに時間がかかる場合があります（最大で数分）。

## Desktop Editorsの起動

インストールが完了したら、インストールウィザードからすぐにエディタを起動することができます。

後で起動したい場合は、スタートメニュー - プログラム - ONLYOFFICE - ONLYOFFICE Desktop Editorsで、いつでもエディタを見つけることができます。

[今すぐダウンロード](https://www.onlyoffice.com/ja/download-desktop.aspx?from=qiita)
わんちゃんに逃げられる私、、わんちゃんと仲良くなりたい！を叶えてくれるアプリを作りました。

## わんちゃんと戯れたいだけなのに、逃げられる私 ##
私は飼っていませんが、わんちゃんが大好きです。
しかし、**完全に一方的な片思い**。街中で会うわんちゃんみんなが、私を避けていくのです。
なぜでしょう。接し方が悪いのでしょうか。
それとも犬猿の仲という諺の通り、猿の遺伝子を残しすぎているのでしょうか。後者の方だったら諦めますが、接し方なら改められるはず！
ということで、**犬種を判別して、接し方を教えてくれるアプリ**を作成しました。

## 出来上がったアプリがこちら ##
スマホで使用することを想定して作成しました。
わんちゃんを発見したら、わんちゃんを発見ボタンを押してください。
推論結果と目の前のわんちゃんが一致していたら、性格・接し方欄を参考に、わんちゃんと戯れましょう。
推論が外れていたら、もう一回！ボタンを押せば再度読み込み、推論を行います。

https://loquacious-eclair-526432.netlify.app/

## 環境 ##
Teachable Machine
ml5.js
Vue.js
Bootstrap
Codepen

## 解説 ##
至ってシンプルな構造になっています。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjZrMbE" data-user="Masaedge" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Masaedge/pen/JjZrMbE">
  ワンダフルアプリ</a> by Masahiro Nishiguchi (<a href="https://codepen.io/Masaedge">@Masaedge</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

**①Teachable Machineでわんちゃんを分類できるように設定。**
今回はペットとして人気な５種（トイプードル、チワワ、柴犬、ポメラニアン、ミニチュアダックスフンド）を選別してくれるモデルを作成しました。
<img width="600" alt="スクリーンショット 2022-11-20 21.26.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884816/f42f4983-b1ef-6891-16d2-7f9fee261ba1.png">

**②Vue.jsでモデルを読み込み、カメラで撮影したわんちゃんを推論**
コードは以下の部分。
```Javascript
 async start() {
      //項目を初期化
      this.messe ='';
      this.messe1='';
      this.messe2='';
      this.messe3='';
      this.loading='';
      this.dog='';
      this.img_name='';
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: { width: 400, height: 250, facingMode: 'environment' },
        // フロントカメラ優先 { facingMode: "user" }
        // リアカメラ優先 { facingMode: "environment" }
    });
    console.log("スタート");
    this.loading='わんちゃんを読み込み中…';
  
  // 「id="webcam"」となっているパーツ（videoタグ）を取得
    const video = document.getElementById('webcam');
  
  // videoにカメラ映像ストリームをセット
    video.srcObject = stream;
  
   // Googleのサーバーにアップロードした自作モデルを読み込みにいきます
      this.imageModelURL = 'https://teachablemachine.withgoogle.com/models/jLLyXr_Rv/';
      const classifier = ml5.imageClassifier(this.imageModelURL + 'model.json', video, () => {
        // 読み込みが完了次第ここが実行されます
        console.log('モデルの読み込みが完了しました');
        this.loop(classifier);
      });
    },
```
**③推論結果に応じてわんちゃんの正確、接し方を記載**
最後に正確・接し方を記載し、Bootstrapで体裁を整えれば完成。

## 使ってみた感想 ##
トイプードル（正確にはマルプー）を飼っている知人にアプリを使用してもらったところ、無事トイプードルと判定してくれたようです。
これでわんちゃんとのワンダフルライフを送れるはずですね！！
これでダメなら自分の中にいる猿の遺伝子を排除しようと思います！！
Zsh プラグインに入門する

【完走賞】MxShun ひとりマラソン 🏃 Advent Calendar 2022 毎週水曜日は Advent Calendar を機になにかに入門しよう！1記事目です。

個人的事情で開発環境が Mac になりました。Mac ではターミナルが zsh 推奨だったので入門してみました。

これは入門したときのちょっとしたメモ書きです。

### 1. Zinit
zsh はプラグインが豊富。プラグインを入れていくとどうしてもターミナルの初期起動が遅くなるので lazy load ができるこいつを入れました。（ OSS としての不安定性は目をつむりました。）

```zsh
bash -c "$(curl --fail --show-error --silent --location https://raw.githubusercontent.com/zdharma-continuum/zinit/HEAD/scripts/install.sh)"
```

https://github.com/zdharma-continuum/zinit#install

### 2. Powerlevel10k
各所であまりにも激推しされていたので入れてみました。結果、満足しています。

```.zshrc
zinit ice depth=1; zinit light romkatv/powerlevel10k
```

https://github.com/romkatv/powerlevel10k#zinit

### 3. zsh-completions
コマンド補完の有効化。

```.zshrc
zinit ice wait lucid
zinit light zsh-users/zsh-completions
```
https://github.com/zsh-users/zsh-completions#zinit

### 4. zsh-autosuggestions
コマンドのサジェッション有効化。

```.zshrc
zinit ice wait lucid
zinit light zsh-users/zsh-autosuggestions
```

https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md

### 5. zsh-syntax-highlighting
シンタックスハイライトの有効化。

```.zshrc
zinit ice wait lucid
zinit light zsh-users/zsh-syntax-highlighting
```

https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/INSTALL.md

まだまだ `.zshrc` は荒削りなので、引続き更新していきます。
【GAS】会議の時間が近づいてきたら教えてほしい

会議をすっぽかすことが多いので、GASで通知させることにした。

# 目次
[1. 概要](#1-概要)
[2. スクリプト](#2-スクリプト)

# 1. 概要
サンプルコードはコンソールログ表示させるようにしていますが、
chatbotにpostするようにすれば、怒涛の通知を受け取れます。

# 2. スクリプト
```noticeYourSchedule.js
// ━━━━━━━━━━━━━━━
// 共通
// ━━━━━━━━━━━━━━━
var user = Session.getActiveUser().getUserLoginId()
var cal = CalendarApp.getCalendarById(user);

function getSchedule() {
  var currenttime = new Date();
  Utilities.formatDate(currenttime, "Asia/Tokyo", "yyyy/MM/dd HH:mm:ss");

  var endtime = new Date();
  endtime.setHours(23, 59, 59);
  Utilities.formatDate(endtime, "Asia/Tokyo", "yyyy/MM/dd HH:mm:ss");

  var events = cal.getEvents(currenttime, endtime);
  var eventsarr = [];

  for (var i of events) {
    var title = i.getTitle();
    var starttime = i.getStartTime();
    Utilities.formatDate(starttime, "Asia/Tokyo", "yyyy/MM/dd HH:mm:ss");

    var eventarr = [];    
    eventarr.push(starttime);
    eventarr.push(title);
    eventsarr.push(eventarr);
  }
  return eventsarr;
}

// ━━━━━━━━━━━━━━━
// 今日の残スケジュール
// ━━━━━━━━━━━━━━━
function noticeTodaysLeftSchedule() {
  var schedule = getSchedule();

  var currenttime = new Date();

  var schedule = schedule.filter(data => data[0] > currenttime);

  var messagearr = [];
  for (var i = 0; i < schedule.length; i++) {
    var starttime = schedule[i][0];
    var starttime = Utilities.formatDate(starttime, "Asia/Tokyo", "HH:mm");
    var title = schedule[i][1];
    messagearr.push(starttime + '　' + title);
  }
  messagearr.join('\n');
  var message = '▼本日の残スケジュール\n━━━━━━━━━━━━━━━\n' + messagearr + '\n━━━━━━━━━━━━━━━'
  Logger.log(message);
}

// ━━━━━━━━━━━━━━━
// まもなく始まるスケジュール
// ━━━━━━━━━━━━━━━
function noticeScheduleStartingSoon() {
  var schedule = getSchedule();

  var currenttime = new Date();
  var after10min = new Date();
  after10min.setMinutes(after10min.getMinutes(after10min) + 10);

  var schedule = schedule.filter(data => data[0] > currenttime);
  var schedule = schedule.filter(data => data[0] < after10min);

  var messagearr = [];
  for (var i = 0; i < schedule.length; i++) {
    var starttime = schedule[i][0];
    var starttime = Utilities.formatDate(starttime, "Asia/Tokyo", "HH:mm");
    var title = schedule[i][1];
    messagearr.push(starttime + '　' + title);
  }
  messagearr.join('\n');
  var message = '▼まもなく始まるスケジュール\n━━━━━━━━━━━━━━━\n' + messagearr + '\n━━━━━━━━━━━━━━━'
  Logger.log('も');
  Logger.log('う');
  Logger.log('す');
  Logger.log('ぐ');
  Logger.log('会');
  Logger.log('議');
  Logger.log('が');
  Logger.log('始');
  Logger.log('ま');
  Logger.log('る');
  Logger.log('よ');
  Logger.log('！');
  Logger.log(message);
}

```
新卒社員が助かったチームのFigma活用事例 7選

ディップ株式会社に2022年度に新卒入社しました。弊社はアルバイト求人媒体「バイトル」を主力とした人材×ITの会社で、社内業務効率化を主導する部署にて働いています。

:::note info
齋藤飛鳥が好きです。
:::

最近の楽しみは猫の画像を撫でること。PCの画面に指紋がつくけど気にしません。

そんな新卒入社の職場に入社して8ヶ月ほど、日々Figmaさんにお世話になっているので、感謝の気持ちを込めてクリスマス企画に参加させて頂こうと思いました。

## 新卒入社目線 オンボーディングに効果があったFigma運用ポイント

今回は、「Figmaが職場にあってくれて良かった〜！」と感じた、チームでの運用ポイントを7個ほど、オンボーディングツールとしてのFigjamを中心に、新卒で右も左もわからなかった僕の視点でご紹介致します。

### 暴れ出すみんなのカーソル、始まるハイタッチ祭り
まずは僕がFigmaの中で一番好きなところから紹介します。

Figmaはデザイン用のツールですが、ホワイトボードツールのFigjamもセットで使うことができ、チームで交流する際にはFigjamを頻繁に利用しています。

||
|:-:|
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957099/de725526-3612-aa35-7481-b31808b30a0b.gif)|


Figjamがとても好きな理由はFigjamではカーソルを振ることで手を振ることができ、カーソルがぶつかるとハイタッチできる機能があるところです。

入室した瞬間に人がたくさんいると部署の皆さんのカーソルが左右に荒ぶり始め、誰かが司会を始めるまでハイタッチタイムが始まり、落書きが描かれ、描かれた落書きは⌘+Vで増殖し画面を埋め尽くします。

混沌とした視覚的なうるささがチームアップを実感させてくれるのに加え、この「暴れている感」は現実世界でも味わえない程度に刺激的です。

弊部署は基本リモートワークで対面で話すことは少ないですが、対面で盛り上がって酒を飲んだ次の日くらい打ち解けた感覚になれてしまうところがFigjamの凄いところだと感じます。

### 半期の振り返りも、部署横断Pjの成果報告も、キックオフMTGもFigjam
入社してからこれまで、ほとんどの業務をFigjamとFigmaで済ませてきました。

Figjamはホワイトボードツールですが、作成物がデザイン的に綺麗な展開になるため、検討資料をブラッシュアップするとそのまま報告資料として使うことができます。

検討資料と報告資料を分けないことで、別の方に業務のやり方を説明するときにも画面遷移をしなくて済むのでオススメです。

### 使うツールが少なくて済み覚えやすいため、挫折しない
使うツールが少なくすめば、操作を覚える手間が小さくてすみます。

特に似たツールをいくつも使うとコマンドの記憶が混ざってミスが量産されることでしょう。ホワイトボードツールとデザイン作成ツールで操作が統一されているFigmaでは、操作に慣れがあり快適です。

Figmaはそもそも使い方がわかりやすいらしく、マニュアルなど必要なく直感的に操作しているうちに使いこなせるようになれました。

業務ツールの学習コストが低いことはもはや当然のように感じていますが、改めて振り返ってみるとオンボーディングしていく側としては難易度が大きく変わるポイントです。

### 過去に先輩が作った資料を遡れるので、「やり方がわからない」ということがない
あらゆる資料を作成できるFigma・Figjamですが、作成するほど資料が一箇所に集約されていきます。そのため、やったことのない業務を任されても過去の資料を遡って流れを確認したり、提案の土台にすることができます。

所属している課の中では、資料作成ツールはFigamaとNotionで完結しているため、わからないことがあればそれぞれの検索ボックスで調べるだけで理解できることが多く、質問しまくり期から早く卒業するのに役立ちました。

### 共同編集で、作成した資料をFBもらいながら一緒に修正したり作って行ったりできる
クラウド型で同時編集できることは、業務を覚えるための効率を底上げしてくれたと感じます。

これまでにオフラインツールのスライドアプリを利用していたこともあるのですが、箇条書きで修正指摘をもらい修正して提出し、解釈が違ったりしてまた再提出といった作業を1~2時間スパンで行っていました。

Figjamでは、指摘して頂きながら見本を作成してもらったり、修正箇所にメモを付けておくことが簡単になりました。

### Figjamで慣れてからFigmaに入れるので、UIデザインまでの距離が近かった
入社当初FigmaもFigjamも触ったことのない状態でしたが、現在ではFigmaでアプリのデザインを複製して新機能のプロトタイプを作成するといったことも行うようになりました。

Figmaを使ってみるまではFigjamでデザインを作っていたのですが、操作が本当に簡単な反面、用意された形以外のオブジェクトを使ったり、色を調整したりはできません。
そこで「Figmaを使ってみよう」と思い立ってすぐ使える状況と、基本の動きはFigjamでなんとなくわかっていることがハードルを下げてくれました。

||
|:-:|
|![figjam-figma.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957099/d917891b-44cb-63cd-3762-9555e013ccd4.jpeg)|
Figmaが隣にいてくれる|

Figmaを使うようになったきっかけは同じ業務をしている方がFigmaも使っているのを見たことなので、Figjamに慣れてきた新入りがいたらFigmaを簡単にレクチャーしてあげるとスムーズに使えるようになると思います。

### チーム全員がアプリのデザインにアクセスできる
Figmaの操作を理解すれば、自分が関わるアプリのデザインがどういった構成になっているのか理解することがとても簡単になります。

ワイヤーの下書きくらいであれば、既存のデザインのコピペ＆ちょっとした変更で作成できるため、デザイナーさんと相談〜開発までテンポよく進むになりました。

自分で出来る業務範囲が広がることは、自分のレベルアップを実感して嬉しくなると共に、チーム内での業務の巻き取りができるようになり、「臨機応変」の体得につながります。まだ勉強中ですけど。

## Figmaをどう運用するかは大事。巻き込まれる側の積極性も大事。
Figmaが導入されていることで、業務に慣れる労力が大幅に軽減されていると感じます。

しかし、入社すぐに「めっちゃ楽〜！」と思っていたかといえばそうではなく、1UPのために色々なアプローチを試してみる必要があったとは思いましたので、そんな新入りの意見も参考になればとても嬉しいです。
CoreDataのDeleteについて解きほぐす

# CoreDataテンプレートの削除部分が省略記述なので初心者にやさしくない。
何してるんだろう。

# テンプレ削除部分
```swift:CoreDataテンプレートレコードの削除部分
///$0は添字の先頭
    offsets.map { items[$0] }.forEach(viewContext.delete)
```

# 削除対象の行情報を配列化してから削除する
```mermaid

flowchart LR
    id(items_table)-->id0.1("offset.map{ }")-->id0.2(items_table)
    id1[("item\n0:りんご\n1:ばなな\n2:みかん\n3:すいか\n4:いちご")] -->|削除データ抽出|   id2("消去要素\n配列化\n0:ばなな\n1:みかん\n2:いちご")--"消去要素を利用して\nviewContext.delete"-->id3[("item\n0:りんご\n　1:削除~~ばなな\n2:削除~~みかん\n3:すいか\n4:削除~~いちご")]-->
id4[("item\n0:りんご\n3:すいか")]

```

forループなどでひとつずつ削除するとindexがズレる
上記の配列化してindexを確定した状態で削除するとズレないイメージ

# 省略部分を展開
```swift:$0をindex表記にする
    offsets.map { index in items[index] }.forEach(viewContext.delete)
```

```swift:定数に格納する
    let hoge = offsets.map { index in items[index] }
        hoge.forEach(viewContext.delete)
```

```swift:playgroundでmapを知る
let fruits = ["りんご","いちご","めろん"]
let offsetsArray = [1,2,0,2,0]

let newFruits = offsetsArray.map { fruits[$0] }
print("元のDB\(fruits)")
print("配列 \(newFruits)")

// 配列を１つずつ抽出
newFruits.forEach { index in
    print("=>\(index)")
}
```
### 参考
[【SwiftUI】Core Dataの使い方：標準テンプレートを読み解く](https://capibara1969.com/3178/#toc14)
[Swiftのmap, filter, reduce（などなど）はこんな時に使う！](https://qiita.com/motokiee/items/cf83b22cb34921580a52)
ご教示いただけますと幸いです。
「トークン」という単語について

# 経緯
- アクセストークンを発行する、NFTを購入する等、なんとなくトークン（token）という言葉を使っていたが、エンジニアとしてはそもそもどういうイメージを持っておけばよいのか気になって調べた

# 調査方法
- Web検索
- 非エンジニアのアメリカ人Sさんに質問
- エンジニアのアメリカ在住メキシコ人Dさんに質問

# 結論
- 特にWeb開発においては、日本でいうメダルや引換券だと思っておけばよさそう
    - セキュリティトークンは、ユーザー名とパスワードを言うともらえる時間限定のメダル
    - 仮想通貨の文脈でのトークンは、払い戻し可能かもしれないメダル

下記の内容のより詳細は[**こちら**](https://lethediana.sakura.ne.jp/tech/archives/summary-ja/1209/)もどうぞ

# 調査手順
1. まずはそもそもtokenとは何なのか
    1. ということを辞書で調査
    1. Sさん、Dさんにコメントもらいながら意味を確認
1. 開発でよく聞くトークンを洗い出して分類
1. どういうイメージを持っておけばよいか考察
 
以降、それぞれの結果
## 1. token(名詞)の[辞書上での意味](https://www.vocabulary.com/dictionary/token)
1. _a metal or plastic disk that can be redeemed or used in designated slot machines_
Casinoで使うチップ、ゲームセンターのメダル等

2. _something serving as a sign of something else_
「兆候」としてのしるしのニュアンス

3. _something of sentimental value_
「これは私たちの友情の証（しるし）です」的なニュアンス

4. _an individual instance of a type of symbol_
一単語の中の一文字　等

- Sさんによると
    - tokenといえばsymbolと同じようなニュアンス
    - 3.の意味で、例えば "Please take this as a token of my appreciation." のような使い方が
    - お金が出てきたり、等価交換的なニュアンスがあると1.の意味になる
- Dさんによると
    - Webで使うトークンは、交換のニュアンスが含まれる1.が当てはまる
    - クレーンゲームで使うメタルコインと同じ
    - スペイン語ではmedallitasというのが同じような概念

## 2. トークンの種類
個人的に開発現場でよく耳にするトークンを分類した（ほかにも分類方法はある）
### セキュリティートークン
- ハードウェアトークン
    - 固定のトークンを物理デバイスに持たせた形式。USBドングル等
- ワンタイムパスワードトークン
    - ワンタイムパスワードを生成するハードウェアまたはソフトウェア。時刻に連動した同期トークン、チャレンジ レスポンス認証メカニズム (CRAM) を利用した非同期トークンがある
- APIトークン
    - サービスにリクエストしたときにトークンが発行される形式。APIトークンを用いた認証プロトコルにOAuth2.0等がある
- JSON Webトークン（JWT）
    - JSONデータに署名や暗号化を施す方法を定めたオープン標準 (RFC 7519)。header、payload、signatureを含んだJSON形式のトークン。OAuth2.0でJWTを使うこともできる（OAuthはプロトコル、JWTはトークンの種類）

（アクセストークンやリフレッシュトークンなど、そのトークンの目的に応じた名づけがされることもある）

### Blockchain・仮想通貨業界で出てくるトークン
- プラットフォームトークン
    - Blockchain上のDAppをサポートするためのトークン
- セキュリティトークン
    - 株式や不動産などの別の資産の所有権を表すもの
    - 例えば、金を持ちたくないので金の価格に応じて価値が変化するトークンを作るなど
    - 基本的にトークンを購入して、保管することが目的
- トランザクショナルトークン
    - 法定通貨のように何かを購入するときに使用される
    - 一般的に手数料が非常に安いなどの利点がある
- ユーティリティトークン
    - トークンが開発されたアプリやプラットフォーム内で特定の目的に使用されるもの
    - アプリ内のみの支払いなど
- ガバナンストークン
    - DAOの運営のための投票権として働くトークン

参考：[トークンとコインの違いなど](https://lethediana.sakura.ne.jp/tech/archives/summary-ja/1209/)

## 3. 所感・考察
- 考えてみれば「トークン」という言葉を開発現場以外で聞いたことがなかった。（あったとしても、スルーしている）
- 開発で耳にするどのトークンも、主に認証が完了している証として使われており、認証は情報の交換をすることで行っているため、Dさんの話をそのまま使うと、メダルゲームのメダルがイメージとしてよさそう。
- 先払いしたときの引換券でもよさそう。印鑑とかもある意味トークンなのかな？という気もする。

# 参考にしたサイト・動画
- https://zerion.io/blog/crypto-coins-vs-tokens-the-difference-explained/
- https://oauth.net/2/access-tokens/
- https://frontegg.com/blog/token-based-authentication
- https://anil-pace.medium.com/json-web-tokens-vs-oauth-2-0-85dd0b32057d
- https://blog.makerdao.com/the-different-types-of-cryptocurrency-tokens-explained/
- https://www.youtube.com/watch?v=422HORNUfkU&t=197s
- https://vivid.money/feed/what-types-of-crypto-tokens-exist/
cdkConnectedOverlay で、パネルを展開する

# 背景

ボタンクリックでパネルを展開するコードを書いてた時に、「Angular の機能で簡単に書けるよ〜」と教えてもらったので、cdkConnectedOverlay についてまとめてみる。


# cdkConnectedOverlay について

Overlay の Directive の一つ。

> FlexibleConnectedPositionStrategy を使用してオーバーレイの宣言的な作成を容易にするディレクティブ

https://material.angular.io/cdk/overlay/api#CdkConnectedOverlay

いい感じにボタンクリックでパネルを作ってくれます。

![スクリーンショット 2022-11-21 22.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599665/512db83c-0fcb-8b01-2a08-3bd9c56133db.png)


# コード例

```html: sample.html
<!-- オーバーレイの起点 -->
<div
  cdkOverlayOrigin
  (click)         = "open = !open"
  #trigger        = "cdkOverlayOrigin"
>
</div>

<!-- パネルを展開する部分 -->
<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayBackdropClass = "cdk-overlay-transparent-backdrop"
  [cdkConnectedOverlayOrigin]      = "trigger"
  [cdkConnectedOverlayOpen]        = "open"
  [cdkConnectedOverlayHasBackdrop] = "true"
  (backdropClick)                  = "open = false"
>
</ng-template>
```

```typescript: sample.ts
export class AAAComponent {
  open = false
}
```

backdrop を使用することで、パネル範囲外クリック時にクローズできる。

# 参考

https://stackoverflow.com/questions/52453331/angular-material-override-the-overlay-css-at-the-component-level

https://www.decodedfrontend.io/angular-cdk-overlay-module/

https://stackblitz.com/edit/material-overlay-close-on-outside-click?file=src%2Fapp%2Fcdk-overlay-basic-example.css,src%2Fapp%2Fcdk-overlay-basic-example.html

https://stackblitz.com/edit/cdk-overlay-base?file=src%2Fapp%2Fapp.component.html

https://blog.angulartraining.com/how-to-display-an-overlay-with-angular-38345414fdad
G検定に合格するためにやった勉強

## はじめに
2022年のG検定試験に合格することができました。合格するためにやったことや反省点などを記事にしてみました。トータル7,8割くらいの正解率だったと思います。

## 使用した参考書・アプリ

* [深層学習教科書 ディープラーニング G検定(ジェネラリスト)公式テキスト 第2版](https://www.amazon.co.jp/%E6%B7%B1%E5%B1%A4%E5%AD%A6%E7%BF%92%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-G%E6%A4%9C%E5%AE%9A-%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%A9%E3%83%AA%E3%82%B9%E3%83%88-%E5%85%AC%E5%BC%8F%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88/dp/4798165948/ref=pd_lpo_1?pd_rd_w=wN4c8&content-id=amzn1.sym.d769922e-188a-40cc-a180-3315f856e8d6&pf_rd_p=d769922e-188a-40cc-a180-3315f856e8d6&pf_rd_r=NMJ36DT28TJX3TBJF2SE&pd_rd_wg=ByCMY&pd_rd_r=42b0665c-368d-423f-918d-5957ca1ba739&pd_rd_i=4798165948&psc=1)

* [ディープラーニングG検定問題集](https://www.amazon.co.jp/%E6%9C%80%E7%9F%AD%E7%AA%81%E7%A0%B4-%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0G%E6%A4%9C%E5%AE%9A-%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%A9%E3%83%AA%E3%82%B9%E3%83%88-%E5%95%8F%E9%A1%8C%E9%9B%86-%E7%AC%AC2%E7%89%88/dp/4297129264/ref=sr_1_1_sspa?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=K83USIZEPWOX&keywords=%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0G%E6%A4%9C%E5%AE%9A%E5%95%8F%E9%A1%8C%E9%9B%86&qid=1669036079&qu=eyJxc2MiOiIwLjAwIiwicXNhIjoiMC4wMCIsInFzcCI6IjAuMDAifQ%3D%3D&s=books&sprefix=%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0g%E6%A4%9C%E5%AE%9A%E5%95%8F%E9%A1%8C%E9%9B%86%2Cstripbooks%2C174&sr=1-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzM0FMNzdDRUw3OEVFJmVuY3J5cHRlZElkPUEwMzA3NjMyR0hFRFNLMlg1Q1lZJmVuY3J5cHRlZEFkSWQ9QUFURFlCODVWV0lRMiZ3aWRnZXROYW1lPXNwX2F0ZiZhY3Rpb249Y2xpY2tSZWRpcmVjdCZkb05vdExvZ0NsaWNrPXRydWU=)

* [G検定対策アプリ](https://apps.apple.com/jp/app/g%E6%A4%9C%E5%AE%9A%E5%AF%BE%E7%AD%96%E3%82%A2%E3%83%97%E3%83%AA/id1569771968)

上のリンクの最新版のものを購入することをおすすめします。

## 合格するためにやったこと

試験勉強は2,3ヶ月くらいで、1日30分から1時間程度の勉強を毎日続けました。ディープラーニングG検定問題集とG検定対策アプリは、間違えた問題を何度も繰り返し勉強し、全て正解できるようにしました。間違えた問題は、カンペとしてテキストにメモしておくなど行いました。スマホのアプリが意外と優秀で通勤中などうまく活用できました。

## 試験当日

5割ほど、わからない問題で、またカンペが役に立たずわからない問題は、ほぼほぼGoogle検索で行いました。試験時間が足りず、1,2問だけ見直しが出来たくらいでした。

## 反省点

参考書は、「深層学習教科書 ディープラーニング G検定(ジェネラリスト)公式テキスト 第2版」と参考書1冊で十分かと思われます。自分は正直参考書類、買いすぎたかなとも思ってます。勉強時間は人によりますが、50時間くらいやれば受かるかと思います。自分は60~70時間くらい費やしてしまいました。1ヶ月で詰め込むのは精神的に大変だと思うので、2ヶ月くらいを目処に緩く頑張ってみたらいかがでしょうか。
陰キャが地方の大学院(学部無い)でLT会開いたらどうなるか検証してみた

日本陰キャ協会が設立された(消滅予定)ので、会員として会報1号を書いて盛り上げていきたく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873754/d127f199-761a-37ed-d5ff-d03be17679db.png)
https://twitter.com/mangatimekirara/status/1596519559745282049?s=20&t=2umYTsCIXBK6x4rk8mkSeQ
今回は初めて陰キャの著者がLT会開いたときのことを書きます。
# 基本事項
- **When**
2021/11/01(Mon) 夜
- **Where**
著者の所属するキャンパス(九州のどっか)の同期の研究室
- **Who**
著者含めた参加者（大学院の同期）
- **What**
コーヒー飲みながらLT会
- **Why**
・楽しそうだから
・私含めて同期の半数以上は他の大学や高専からやってきた学生のお互いのことをあまり知らないので、交流出来ればと思って。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873754/5b55267a-c48e-4d96-7d06-238729c37288.png) 
ティータイムできるようにケーキスタンドも買った。
- **How**
    - **準備**
        1. 入学当初に専攻科のDiscordチャンネル作成→イベントの告知
        1. プロジェクター＆炊事場がある研究室の同期に部屋貸してとお願い
あとは良しなに。
# 結果
**参加人数**
発表者、私含めて2名。聴講者3名（1人はバリスタ、1人は課題しながら）
**感想**
願望としては10人ぐらい来て3、4人発表してくれればいいな～と思っていましたが、想定より少なかったです。（来て下さった方ありがとうございます）  
あと、コーヒー美味しかった。（しかも発表者の１人は珈琲のドリッパに関する発表だったので雰囲気◎）  
実は第２回やりたいという話があったが、コロナ再流行によって流れてしまった…
![Inked0334.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873754/87dde3ee-97db-a5d7-c867-7a8d8b33d957.jpeg)
会の様子（テーブル右手にコーヒーサーバがある）
# 反省・考察
1. 学部がない。
    - 弊キャンパスは学部がありません。（一部を除いて、ほとんどの学生は院生）そのため、学生の絶対数が少ないです。サークル等もほとんどありません（学生プロジェクトはいくつかあります。）
1. 近隣に大学が少ない
    - 地方は関東、関西と違って大学が多くない＆それぞれ離れた場所にあるので他大学の学生に呼びかけても来ることはほぼ無い。
    - 近くに私大と公立大があるけど、私大の方は留学生がほとんどで公立大の学生はイベントに興味なさそう（偏見）
1. 著者（主催者）の友達が少ない
    - 著者は地元の大学院に通っているのにも関わらず、地元の友達が大学にいない（同級生のほとんどはすでに就職してる説もあるが一番の原因は著者が陰キャで友人少ない..）
1. 著者（主催者）の実力、知名度不足
    - 著者が某踏のスゴイクリエイターとかになってたら集客できたかもしれん。
1. その他
    - 夜もみんな真面目に研究してるから来れない（著者研究頑張れよ）
    - 同期「月曜の夜開催は厳しい～」
    - 他大学(本州)の某氏「九州は閉鎖的なイメージある（他人との交流少ない）」

など、様々な理由が考えられます。来年からは本州に行くので、そっちでも試しに１回ぐらいやってみたいですね。
以上、日本陰キャ協会会員からの報告でした。
https://twitter.com/mangatimekirara/status/1581303583764467713?s=20&t=2umYTsCIXBK6x4rk8mkSeQ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873754/f71a6098-eea1-18ae-4112-b72820936048.png)
JIS G5502球状黒鉛鋳鉄品の黒鉛球状化率の測定ソフトを作ってみた

2022年の4月にJIS G5502が改正され、これに伴って黒鉛球状化率の測定方法がJIS法とISO法という方法に変わりましたので、これらの方法で黒鉛球状化率を評価するソフトをPython＋OpenCVで作ってみました。以下のURLに入っています。ご参考になれば幸いです。

https://github.com/repositoryfiles/Nodularity
【Wordpress入門 : Cocoon】ウィジェットのプロフィール画像が表示されないときの対処法

# 目次
- はじめに
- [起こったエラー](#起こったエラー)
- [原因](#原因)
- [エラーを再現する](#エラーを再現する)
- [対処法](#対処法)
- まとめ

# はじめに

ワードプレスのテーマcocoonを使用してブログサイトを作成しようとしている方の記事になっています。なお、わかっているとは思いますが、テーマを使用する際は必ず子テーマを用意しそちらにカスタマイズを行なってください。

# 起こったエラー

ワードプレスのcocoon-childでブログサイトを作成する際に、ウィジェットのプロフィール画面が表示されない。
- [cocoonのDL](https://wp-cocoon.com/)

# 原因

cocoonの子テーマの方だけ「EWWW Image Optimizer」の遅延読み込みがうまく機能していない
親テーマはうまくいっている様子

# エラーを再現する

- ワードプレスのダッシュボードからテーマ、ダウンロードしたコクーンの子テーマをアップロード→有効化
- プラグインから「EWWW Image Optimizer」をインストール→有効化
- ユーザー設定→プロフィール画像の設定
- 設定→ディスカッション→アバターの表示をチェックする
- 外観→ウィジェット→プロフィールボックスをサイドバーに移動
- サイドバーに設定したはずの画像が表示されない

#### ワードプレスのダッシュボードからテーマ、ダウンロードしたコクーンの子テーマをアップロード
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/0e13ff11-c844-f98a-0aa6-813e310df913.png" width=80%>

#### プラグインから「EWWW Image Optimizer」をインストール→有効化
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/df4390bc-febc-6928-8a78-9f054360b3a6.png" width=80%>

#### ユーザー→ユーザー一覧→プロフィール画像の設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/92785da9-de48-e8a0-db86-d9c242ec0fb1.png" width=80%>

240x240ピクセルの画像が理想的らしい

#### 設定→ディスカッション→アバターの表示をチェックする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/22a11c64-ea5f-ecca-b859-dd35ba0f44b5.png" width=80%>

#### 外観→ウィジェット→プロフィールボックスをサイドバーに移動
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/655934a6-293a-5a78-42f1-30cac62e452c.png" width=80%>


#### サイドバーに設定したはずの画像が表示されない
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/09884061-a487-8a1e-9bd8-4361ea1a8ea8.png" width=80%>

赤枠の中に画像が入っていない

# 対処法

プラグイン→「EWWW Image Optimizer」設定→画像遅延のチェックマークを外す
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/e29030c5-fd99-c666-4722-2a75b6caab51.png" width=80%>

# まとめ
参考にしたサイト
[【EWWW Image Optimizer】画像が表示されない時の解決方法を紹介！](https://rinne-blog.com/how-to-display-images#:~:text=%E2%91%A0WordPress%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89%E3%80%8C%E3%83%97%E3%83%A9%E3%82%B0,%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82)