OmniAICreator/Qiita-1.07M huggingface dataset:
YAMAHAルーターでL2TP/IPsecの再接続を早くする

# 事象
YAMAHAルーターにWindowsやiPhoneからL2TP/IPsecで接続しているときに、回線断するとしばらく再接続できなくなる。

# 対象
 - YAMAHAルーター(RTX1300、RTX1230、RTX1220、RTX1210、RTX830、FWX120など)
 - [アグレッシブモード](http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ipsec/ipsec_chapter.html)での取り回し(一方のルーターしか固定のグローバルアドレスを持たないとき)

# 取り扱わないこと
 - ip filterまわり

# 原因
このような感じでSAが残存するから。SAが残存している間は、再接続できなくなる。

```
> show ipsec sa
Total: isakmp:1 send:1 recv:1

sa    sgw isakmp connection    dir  life[s] remote-id
----------------------------------------------------------------------------
1     88   -     isakmp        -    3589    バインドされたIPアドレス
2     88   1     tra[0088]esp  send 3590    〃
3     88   1     tra[0088]esp  recv 3590    〃
```

SAの削除は**ipsec sa delete**か、**ipsec refresh sa**でできる。
このようなケースにおいて手動でSAを削除する場合は、どちらのコマンドを使用しても構わない。

 - [ipsec sa delete, YAMAHA](http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ipsec/ipsec_sa_delete.html)
 - [ipsec refresh sa, YAMAHA](http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ipsec/ipsec_refresh_sa.html)

SAを指定する場合は、isakmp(connection列でisakmpとなっているsa)を指定する。

```
# ipsec sa delete 1
```
これで再接続できるようになる。

# 対策
要するに、再接続を早くできるようにしたいのであればSA (ISAKMP SA)が早々に削除されるようにすればよい。

## 設定例
おわかりいただけると思うが、88や8888といった数字に特段の意味はない。ぱっと見たときに本題ではない変数的要素をわかりやすくするためにそうしているだけ。

```
tunnel select 88
 description tunnel "Source any"
 tunnel encapsulation l2tp
 ipsec tunnel 88
  ipsec sa policy 8888 88 esp aes-cbc sha-hmac
  ipsec ike duration isakmp-sa 88 300
  ipsec ike keepalive use 88 on dpd 10 6
  ipsec ike local address 88 ローカルIPアドレス
  ipsec ike nat-traversal 88 on
  ipsec ike pre-shared-key 88 text 共通鍵
  ipsec ike remote address 88 any
 l2tp tunnel disconnect time off
 l2tp keepalive use on 10 3
 l2tp keepalive log on
 l2tp syslog on
 ip tunnel tcp mss limit auto
 tunnel enable 88
```

## ipsec ike duration isakmp-sa
ひとつはipsec ike duration isakmp-saでSAの寿命を設定している。

しかしながら、IKEv1では(VPNの)始動側が寿命を決められる([15.47.1 SA の寿命の設定](http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ipsec/ipsec_ike_duration.html))ようなので、このような接続元が不定なケースでは役に立たなさそう。

仮に機能したとしてもminimumが300秒であるため、少なくとも5分は待たされることになる。

## ipsec ike keepalive
もうひとつはipsec ike keepalive([15.19 IKE キープアライブ機能の設定](http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ipsec/ipsec_ike_keepalive_use.html))でIKEキープアライブをコントロールしている。

仮にこのように書くと、キープアライブパケットのintervalは10秒、障害とみなすまでの試行回数は6回となる。
すなわち60秒そこらで打ち切りになることが期待される。
```
  ipsec ike keepalive use 88 on dpd 10 6
```

## 補足
メーカーページでは[L2TP/IPsec](http://www.rtpro.yamaha.co.jp/RT/docs/l2tp_ipsec/index.html)に関して次の記載がある。

> IKEv1にのみ対応しており、IKEv2は使用できません。

よって、設定例に記載のコマンドはIKEv1のものに特定している。
AndroidでNavigationを使ったDeep Linkの実装Part3

# 初めに
今回は、遷移情報を持った通知の作成方法を紹介していきます
### 本文
```kotlin
private fun sendNotification(
        title: String,
        body: String,
        deeplink: Deeplink?
    ) {
        val intent = Intent(this, MainActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
        deeplink?.let {
            intent.putDeepLink(it)
        }

        val pendingIntent = PendingIntent.getActivity(
            this,
            0,
            intent,
            PendingIntent.FLAG_ONE_SHOT or PendingIntent.FLAG_IMMUTABLE
        )

        val channelId = "channelId"
        val notificationBuilder = NotificationCompat.Builder(this, channelId)
            .setSmallIcon(R.drawable.ic_messaging_icon)
            .setContentTitle(title)
            .setContentText(body)
            .setAutoCancel(true)
            .setContentIntent(pendingIntent)

        val notificationManager = getSystemService<NotificationManager>().requireNotNull()

        val channel = NotificationChannel(
            channelId,
            "お知らせ",
            NotificationManager.IMPORTANCE_DEFAULT
        )
        notificationManager.createNotificationChannel(channel)

        notificationManager.notify(0, notificationBuilder.build())
    }
```
大事なのは
```kotlin
val intent = Intent(this, MainActivity::class.java)
        deeplink?.let {
            intent.putDeepLink(it)
        }
```
この部分になります
ここで`Main Activity`のintent情報に`Deep Link`の情報を詰め込みます
### 最後に
今回は通知の作成方法を紹介しました
前回の記事は下記になります
https://qiita.com/ryuji_sato/items/db6de3e447f83726a732
次の記事は下記になります
https://qiita.com/ryuji_sato/items/7e1a4289180922663782
マスコットから言語の特徴がわかる...はず

## 初めに
株式会社アイスタンダードの高野と申します。

昔にFlutterの公式ドキュメントを散歩していたらマスコットのドキュメントを見つけて、
「意外と言語に対する思想を表現してるんだなぁ」と思う事がありました。
いつか色んな言語のマスコットをまとめてみたいと思っていたところ、ちょうどいい機会を頂いたのでFlutterに限らずいろんな言語やフレームワークのマスコットをまとめて言語特性を知っていこうと思います。

## Dart&Flutter：Dash
モチーフはハチドリ、Dartが高速な言語だということを象徴している

元々はDartだけのマスコットでしたが、人々からの支持を得て現在はDartとFlutter両方のマスコットになっている。
Dartが元々学ぶ価値がない言語ランキング首位を記録していたところ、flutterが出たことで首位脱却できたことなどが表現されている気がしますね。
> The people have spoken, so Dash is now the mascot for Flutter and Dart.

一応女の子ですがジェンダーニュートラルな子の様です。これも今時な感じがして新しめのフレームワークであるFlutterの事を表現している気がします。
> Dash is female, but she doesn’t mind being called they, their, he, or him.

[参考](https://docs.flutter.dev/dash)


## Java：Duke
元々はStar7というタッチパネル付きの携帯情報端末内に出てくるキャラクターだったようです。
> Sun Microsystems’ Green Project team created its first working demo—an interactive handheld home entertainment controller called the Star7. At the heart of the animated touch-screen user interface was a cartoon character named Duke.

このStar7がOak（現在のJava）で動いていたりした繋がりもあって、気づいた時にはマスコットになっていたそうです。（Javaのマグカップのアイコンもそうですが、ここら辺のデザイン決定秘話はかなり曖昧なものが多いです。）

ちなみにDukeのデザイナーのJoeさんは映画シュレックなどの制作にも携わっていたそう。
>  Joe went on to work on popular animated movies such as Shrek, Over the Hedge, and Flushed Away.

マスコットとは関係ないですが1992年からタッチスクリーンが存在したことには驚きです。

[参考](https://www.oracle.com/java/duke/)


## Go：Gopher
モチーフはホリネズミ。

募金活動用のTシャツのデザインが後々Goのマスコットになった。
> the gopher first appeared as a promotion for the WFMU radio station in New Jersey. Renee French was commissioned to design a T-shirt for an annual fundraiser and out came the gopher.

Dukeと同じでほんとにただのマスコットっていう感じですね。

[参考](https://go.dev/blog/gopher)

## C#：Andy
アンディというおじさんがいたようですが、現在は引退してしまっている様子。
>  As some of you may already know, Andy, the original C# mascot, has been retired.

引退した情報は見つかりましたが、
引退したのが2004年でそれ以前に作成されたマスコットということもあり情報が少ないです。
なぜ彼がマスコットになったのか謎が残りました。

[参考](https://fernandez.life/blog/2004/01/29/andy-retires/)
[Andyはこちらで確認できます](https://matarillo.hatenadiary.jp/entry/20090328/p1)

## Kotlin：名前なし
モチーフは予想になりますがKotlinのロゴ。

どうやらマスコット自体は存在するようですが、現在名前を募集中のようです。
> このマスコットにはまだ名前がありません。皆さんに提案していただきたいと思います。

しかし2021年の年末から募集中のままその後の発表はない模様。
加えて特にマスコットに関する説明も見当たらない。
ですので完全に考察になりますが、
Kotlin自体がJavaをより簡潔に書けるように作られたということで「簡潔」がマスコットの色味に出ているのかもしれませんね。

[これだけ丁寧に日本語記事がありました：参考](https://blog.jetbrains.com/ja/kotlin/2021/10/introducing-the-kotlin-mascot/)

## 以下マスコットがいなかった言語/フレームワーク達
### Python
調査中に見つけて面白いと思ったので一応紹介しておきます。
Pythonエンジニア育成推進協会にはパイちゃんとソン君というマスコットがいるようです。
目に光があって全体的にいかにも日本っぽいデザインで、国ごとの感性の違いを感じることができて面白いですね。

[参考：Pythonエンジニア育成推進協会](https://www.pythonic-exam.com/official-dolls)

### flask
備考：Pythonのフレームワーク


### Ruby
いない

### Ruby on Rails
備考：Rubyのフレームワーク

### JavaScript
いない

### React
備考：JavaScriptのフレームワーク

### Scala
いない

### C
いない

### C++
いない


## まとめ
アイスタンダード内で使用者がいる言語/フレームワークから優先してマスコットを探したのでそんなに種類は網羅できなかったと思いますが、13言語中3言語存命で1言語退場は想像していたより大分少なかったです。
何でもかんでもマスコットいると思うのは日本に住んでいるからなのかもしれませんね。

という感じで締めようと思ったのですが、当初の目的の言語の特性を知ることはほとんど叶いませんでした。
言語のために言語の思いを込めてマスコットが作られること自体が珍しいことなのかもしれませんね。

著作権周りで念の為画像をなしにしています、すみません。
何か間違っている箇所があればコメントの方お願いいたします。
Netlify デプロイ Treating warnings as errors because process.env.CI = true.　解決方法

# はじめに

iphoneでも使えるアプリを作りたかったのですが、flutterを使ってもリリース時にmacパソコンがいるようなことが多く書かれていて後回しに。スマホでもサクサク動くものが作れると知り、reactを学び始めました。

今回はテスト用でreactアプリをGitHubからNetlifyへデプロイする際に、１時間弱かけてやっとわかったエラー？解決をメモとして残そうと思います。

## デプロイまでの流れ

・reactアプリ作成->githubにpush

ここで満足しちゃってましたが、使う際に、vscodeからnpm run startでいちいち動かすのも嫌なので、どうにかしたいと思っていたら、デプロイについて知りました。ほかの人に使って頂くためのアプリ開発であればなおさらのことでしたね。

・netlifyとgithubを連携し、デプロイへ

サイト記事を見ながら進めていましたが、いざデプロイを始めるときに、３回ほどトライして度々失敗しました。エラーのもとが、

```
Treating warnings as errors because process.env.CI = true.
```
のせいだということに気づき、解決方法を調べることに。

意味としては、CIという環境変数がtrueになっているせいで、warning(使っていないimport文)のことなどをエラーとして扱ってしまっている？らしい。　解釈違いでしたら大変申し訳ありません。ぜひ詳しい内容を教えて頂きたいです。

## 解決方法

Netlify で　ホーム画面から、

Sites-> デプロイ失敗したサイトへ -> Site Setting -> Environments -> Environments variables

add a variable をクリック -> keyに「CI」、valueへ「false」を設定して saveボタンを押す

リトライしてみると、無事にデプロイができ、自分のスマホからも使えました。とても感動しました。




## まとめ

いろんな記事には.envファイルの変更について書かれているものが多かったのですが、自分は作ってなかったので、調べ方も　Netlify や　デプロイ　などのキーワードを入れつつ、回答にたどり着くことができました。

デプロイに関してはithub Pagesでも、静的サイトなら公開できるそうで、あとはFirebaseなら、NoSQLを使ったアプリを作れそうなので試してみたいです。

## 参考サイト
・[Reactで作ったサイトをNetlifyにデプロイする方法](https://ralacode.com/blog/post/how-to-deploy-react-app-to-netlify/)
【git】SSH認証キーをGitLabに登録してclone

# 0. はじめに
SSH認証キーをGitLabに登録して、リモートリポジトリからクローンする方法についてです！

## 0-1. 全体の流れ
> [1.ssh](#1-ssh)
> [2.clone](#2-clone)
> [Reference](#reference)

## 0-2. 本記事の対象者
- SSH認証キーをGitLabに登録したい
- SSH接続でリモートリポジトリをクローンしたい

## 0-3. 前提条件
- GitLabアカウント作成済み
- GitLabでプロジェクト作成済み
- 隠しファイル表示設定済み

https://gitlab.com/

https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51

## 0-4.要件
- GitLab登録
- SSH秘密鍵 / SSH公開鍵 / OpenSSHキー
- git clone

# 1.ssh
## 1-1.キーペア作成(秘密鍵と公開鍵)
```terminal:local
$ cd ~/.ssh

$ ssh-keygen -t rsa -f gitlab_rsa -C hoge@gmail.com
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase): #お好みのパスワードを入力
Enter same passphrase again: #再度お好みのパスワードを入力
Your identification has been saved in gitlab_rsa
Your public key has been saved in gitlab_rsa.pub
The key fingerprint is:
SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx hoge@gmail.com

$ ls ~/.ssh
gitlab_rsa. gitlab_rsa.pub
```

## 1-2.GitLabに公開鍵を登録
```terminal:local
$ pbcopy < ~/.ssh/gitlab_rsa.pub
```

https://gitlab.com/-/profile/keys

1. GitLabの`SSH Keys`にアクセス
1. `SSH Fingerprints`に`pbcopy`でコピーした`gitlab_rsa`をペースト
1. Titleは任意(gitlab_rsaなど)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687994/f71fed28-79eb-0da2-9f26-03cc000e2b88.png)

## 1-3.ssh-agentに秘密鍵を登録
```terminal:local
$ ssh-add ~/.ssh/gitlab_rsa
Identity added: /Users/xxxxxxxxxxxxxxx/.ssh/gitlab_rsa (xxxxxxxxxxxxxxxxxxx@gmail.com)

$ ssh-add -l
xxxx SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx@gmail.com (RSA)
```

## 1-4.configに反映
```terminal:local
$ vim ~/.ssh/config
```
```terminal:
# GitHub
Host github.com
  IdentityFile ~/.ssh/github_rsa
  User git

# GitLab
Host gitlab.com
  HostName gitlab.com
  User git
  AddKeysToAgent yes
  UseKeychain yes
  TCPKeepAlive yes
  identitiesonly yes
  IdentityFile ~/.ssh/gitlab_rsa
```

## 1-5.SSH接続
```terminal:local
$ ssh gitlab.com
The authenticity of host 'gitlab.com (xxxx:xxxx:xx:x:xxxx:xxxx:xxxx:xxxx)' can't be established.
ED25519 key fingerprint is SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes #yesを入力
Warning: Permanently added 'gitlab.com' (ED25519) to the list of known hosts.
Enter passphrase for key '/Users/kishimotokazuma/.ssh/gitlab_rsa': #パスワード入力
PTY allocation request failed on channel 0
Welcome to GitLab, @kazumakishimoto!
Connection to gitlab.com closed.
```

# 2.clone
## 2-1.git clone
```terminal:local
$ cd /Users/xxxxxxxxxxxxxxx/Documents
$ git clone git@gitlab.com:kazumakishimoto/test.git
Cloning into 'test'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
```

# Reference
https://qiita.com/redamoon/items/07e445d1fce360cb5fa3

https://qiita.com/ucan-lab/items/21d62f1beaa8007c4ca9

https://zenn.dev/shotakaha/articles/ba3e97cfe0837721c3f3

https://laraweb.net/environment/8473/
The operand of a 'delete' operator must be optionalエラー

# The operand of a 'delete' operator must be optionalエラー
### 困ったこと
TypeScriptで開発中、バリデーションの結果をJSON形式で返すAPIを作成しようとした。
例
request
`
{
	code:"1234567890"
}
`
バリデーションOKのresponse
`
{
	result:true
}
`
バリデーションNGのresponse
`
{
	result:false  
	error:"codeの桁数が不正です"
}
`


上記機能実装のために以下のようにコーディングしたところ
「The operand of a 'delete' operator must be optional」というようなエラーが発生した。

```format.ts
interface resultFormat {
	result: boolean;
	error:string;
}
export { resultFormat } ;
```
```api.ts
import { resultFormat } from "./format.ts";
const exampleAPI = (
	req: Express.Request,
	res: Express.Response
) => {
	if (req.data.code.length === 10) {
		const resData: resultFormat = {
			result:false,
			error:"codeの桁数が不正です"
		};
	res.json(resData);
	} else {
		const resData: resultFormat = {
			result: true,
			error:""
		};
		delete resData.error;
		res.json(resData);
	}
};
```



### 解決策
```format.ts
interface resultFormat {
	result: boolean;
	error:string;
}
interface resultErrorFormat {
	result: boolean;
}
export { resultFormat,resultErrorFormat }  ;
```
```api.ts
import { resultFormat,resultErrorFormat } from "./format.ts";
const exampleAPI = (
	req: Express.Request,
	res: Express.Response
) => {
	if (req.data.code.length === 10) {
		const resData: resultFormat = {
			result:false,
			error:"codeの桁数が不正です"
		};
	res.json(resData);
	} else {
		const resData: resultErrorFormat = {
			result: true,
		};
		res.json(resData);
	}
};
```

### まとめ
TypeScriptでinterfaceにて定義した型から外れるようなオブジェクトのdeleteを行おうとすると
「The operand of a 'delete' operator must be optional」エラーが発生するようだ。
条件によって返すJSON（オブジェクト）の形式が異なる場合はそれぞれにintarface（型）を定義する必要がある。
nRF Connect SDK:Another WDT(笑)

# もう一つのWDT
プロジェクトにWDTを実装しようと思いたったものの、調べてもすぐ忘れる(笑)のでもう一度サンプルコードを呼び出してみたのですが・・・あれ、なんか前と違う気がするなぁ。SDKのバージョンアップ(2.1.2→2.2.0)でこんなに変わるの？と不思議に思っていました。
あまりにも違いすぎる気がするので自分のQiitaのメモを見てみると・・・なんと！僕が呼び出したサンプルコードは違うWDTだったのです。ここで初めてWDTのサンプルが複数(多分2種類)あることを知ったのです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340602/28e0750e-4d9c-c78f-2938-c3732d1a3e65.png)
ちなみに以前のWDTに関する記事はこちらです。この時はwatchdogというサンプルプロジェクトを使っています。

https://qiita.com/yoshihiro0709/items/c826edd41325900075ed

# task_wdtのほうが高機能っぽい
サンプルコードを読んでいくとWDTがメインとスレッドの2ヶ所に実装されており、複数のWDTを仕掛けることができるようになっています。Kconfigで設定を見てみるとデフォルトは5個まで実装できるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340602/28bcbd9a-5e55-fc7a-3851-49677a2b0fd6.png)
## いくつも実装する意味があるのかは分からないが・・・
RTOSなのでメインスレッドでWDTを監視しておけばいいような気がしなくもないですが、複数実装できるに越したことはないと思うのでこちらを推奨したいと思います。このあたりは実際の運用レベルになってみないと分からないですね。

::: note warn
運用でWDTに引っかかるような事件が発生するのは勘弁して！！！(笑)
:::
Laravel クエリビルダー更新と取得を1行で済ませる

### BEFORE:frowning2:
update()の戻り値は通常更新件数(INT型)なので、更新したモデルを返却したい場合取得処理を別で書く必要があります。

``` PHP
class Sample {
  public function sample(mixed $where, array $data): void
  {
    // 1.データ更新
    User::where('column', $where)->update($data);
    // 2.更新データ取得
    $user = User::where('column', $where)->first();
  }
}
```
### AFTER:relaxed:
1行で済ませましょう。
tap()ヘルパー関数を使うことで引数内の戻り値を強制的に返却することができ、update()をチェーンすることで更新したモデルが返却されます。
``` PHP
class Sample {
  public function sample(mixed $where, array $data): void
  {
    // データ更新And取得
    $user = tap(User::where('column', $where)->first())->update($data);
  }
}
```

### 引用
[Laravel 9.x](https://laravel.com/docs/9.x/helpers)
若者へ！仮想通貨に投資するなら自分に投資しよう！

２０２３年も終わりですが、現在、５０歳を過ぎたCTOから若手向けのメッセージです。
![25165513_s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/51a3bbd3-b906-1d19-f0b9-df1e0c29e086.jpeg)


# 仮想通貨に投資するなら自分に投資しよう
僕自身が２０年以上、CTOとして色々な会社の仕事をできている理由は、自分に投資してきたからだと思ってます。
仮想通貨や株等に投資したら、一瞬は儲かるかもしれません。しかし、一瞬です。１０億とか一生食べていける額を稼げれば良いですが、ほとんどの人は無理でしょう。ギャンプルで一発当てる様なものだと思います。

# 自分に投資したほうが良い理由、その１
自分の価値は一生続くからです。自分という投資対象は、２０年たってもシステム・開発に対してのノウハウが残っているし、マネージメントのノウハウも沢山あります。
そして、一番は、自分は絶対に裏切りません。自分ですから。投資した事が絶対にzeroにはなりません。蓄積されていきます。

# 自分に投資したほうが良い理由、その２
信頼という貯金が溜まっていくからです。自分の投資して常にアップデイトを続けていれば、周りから常に評価されれば、周りから信頼されます。この信頼は、実は貯金として溜まっていきます。１０年か２０年後に自分に帰ってきます。いざという時におろせる貯金になってます。

# 自分に投資したほうが良い理由、その３
人生が豊かになるからからです。仮想通貨に投資してお金を儲けても人生はつまらないかも知れません。その後にどんな人生を過ごすかによって変わってくるでしょう。でも自分に投資していけば、知識が貯まり、実力が付き、信頼が貯まります。これは、人生が豊かになります。行きていて一番大切な事を得る事が出来ます。

# 自分に投資したほうが良い理由、その４
全てが複利できいてくるからです。複利は、アインシュタインが「人類さい最大の発明」と呼んだと言われてます。１年で10%努力していけば、５年後には、１．６倍になります。１０年後には、２．５倍になります。何故なら自分に投資したものは自分となり失われる事が無いためです。ドンドン日々大きくなった自分を基準に努力が雪だるま式に大きくなっていきます。歳を重ねれる意味が膨らみます。

# 最後に
自分への投資いかがでしょうか？これは本当にオススメします。時々に森川さんは既にファイアされたと思ってたと言われたりしますが、僕自身は、上場経験者でもなければ、投資で儲かった経験もありません。全然働かないと生活できません。
でも僕には、信頼という貯金があります。ある意味信頼という貯金があるのでファイアできてるかの様に見えるのかもと思ったりします。
若手の皆さんも投資するなら是非、自分に投資しましょう。色々な事に惑わされるのではなく、自分を磨けば必ず報われます。
ファイアとは、若くして財をなして、アーリーリタイアを意味します。

未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
Dockerでよく使うコマンドまとめ

# Dockerでよく使うコマンドまとめ

## ログイン
コマンドからログインする。
GUIからログインすることも出来るのであまり使ったことない。
```
docker login
```

## dockerコンテナを1つ起動するコマンド

```
docker run image名
```

imageがローカルにない場合は、docker hubから自動取得する

### オプション
#### -- name
コンテナに任意の名前をつける

#### --rm
プロセスが終了したら、コンテナを削除する

#### --volume
コンテナにホストのディレクトリをマウントする

#### --it
コンテナの中に入る

#### --p
コンテナにアクセスするポートの解放

#### --env
環境変数を渡す

## 起動中のコンテナを表示するコマンド
停止中のコンテナは表示されないの注意
```
docker ps
```

### オプション
#### -a
停止中のコンテナも表示する

## コンテナを起動する
ID or 名前でコンテナを指定する
```
docker start xxxx
```
## コンテナを停止する
ID or 名前でコンテナを指定する
```
docker stop xxxx
```
## コンテナを再起動する
ID or 名前でコンテナを指定する
```
docker restart xxxx
```

## コンテナに入ってコマンドを実行する（★よく使う）
ID or 名前でコンテナを指定する
起動中のコンテナ内でコマンドを実行する

```
docker exec -it xxxx /bin/bash
```
bash(コマンドライン）にアクセスする

## 停止中のコンテナを削除する
コンテナを起動させまくっているとキャパオーバーになるのでたまに消すと良い
```
docker rm xxxx
```

### オプション
#### -f
起動中でも強制的に削除する。コンテナのデータは消える

## ローカルにあるimageを全て表示する
```
docker images　
```

## Dockerのイメージを削除する
こちらもキャパオーバー時しないようにたまに消すと良い
起動中のコンテナのイメージは削除できない

コンテナ　停止 → image
```
docker rmi xxxxx
```

## Docker fileからイメージを作成する
```
docker build
```

## コンテナとホストでファイルのやり取りを行うコピーコマンド
docker-composeファイルなどでよく使う

### ホスト → コンテナ
```
docker cp ホストのパス : コンテナ指定 パス
```

### コンテナ → ホスト
```
docker cp コンテナ指定 パス : ホストのパス
```


## Dockerコンテナのログ出力
Docker作成時にうまくいかない時などによく使う

```
docker logs コンテナID
```

### オプション
#### -f
リアルタイムログ


--------
ここからはあまり使わないけど、一応メモ
--------
## dockerの詳細情報出力
```
docker inspect
```

## Dockerイメージのダウンロード
```
docker pull
```

## コンテナのイメージ化
```
docker commit
```

## イメージをdocker hubにpush
```
docker push
```

## イメージの履歴を見る
```
docker history
```
Google Mobile Ads Unity Pluginのバージョンアップをしたらよくわからないエラーが出た話

# 前置き
- しばらくアップデートを放置していたアプリを色々アップデートしてたら、Androidビルドでエラーになってしまう状況に……

## 環境
- MacOS 12.6
- Google Mobile Ads Unity Plugin v7.3.1
- Unity 2021.3.16f1


# 事象
- Androidビルド時に以下のようなエラー
    ![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f38373731332f61663565346266382d616464612d343630332d633331332d6333663238656136356139652e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87713/a9608fcb-4a16-e621-930a-69e88bfed25b.png)
    ```sh
    java.io.IOException: Can't read [/Users/ユーザ名/.gradle/caches/transforms-2/files-2.1/40a5c5778e44c6cefe581fe0507a8adc/googlemobileads-unity-runtime.jar(;;;;;;;**.class)] (Can't process class [com/google/unity/ads/AdNetworkExtras.class] (Unsupported version number [55.0] (maximum 54.0, Java 10))) See the Console for details.
    ```

# 解決方法
1. `Player Settings` > `Publishing Settings` > `Buils`で、`Custom Base Gradle Template`をチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87713/d803cb0d-4882-64f9-5b81-ba20d6b8ff4c.png)

2. 1で追加された`.gradle`ファイルを修正
    ```gradle
    allprojects {
        buildscript {
            repositories {**ARTIFACTORYREPOSITORY**
                google()
                jcenter()
                mavenCentral()  // ★★★★★追記★★★★★
            }
    
            dependencies {
                // If you are changing the Android Gradle Plugin version, make sure it is compatible with the Gradle version preinstalled with Unity
                // See which Gradle version is preinstalled with Unity here https://docs.unity3d.com/Manual/android-gradle-overview.html
                // See official Gradle and Android Gradle Plugin compatibility table here https://developer.android.com/studio/releases/gradle-plugin#updating-gradle
                // To specify a custom Gradle version in Unity, go do "Preferences > External Tools", uncheck "Gradle Installed with Unity (recommended)" and specify a path to a custom Gradle version
                classpath 'com.android.tools.build:gradle:4.0.1'
                classpath 'com.guardsquare:proguard-gradle:7.1.0'  // ★★★★★追記★★★★★
                **BUILD_SCRIPT_DEPS**
            }
        }
    
        repositories {**ARTIFACTORYREPOSITORY**
            google()
            jcenter()
            flatDir {
                dirs "${project(':unityLibrary').projectDir}/libs"
            }
        }
    }
    
    task clean(type: Delete) {
        delete rootProject.buildDir
    }
    ```

3. そのまま再ビルド！
3. 無事`.aab`ファイルができた！

# 感想
- 最近`Unsupported version number [55.0] (maximum 54.0, Java 10)`をよく見かけるようになった気がするけど気のせい？


# 参考
- [Build Error on Android App Bundle](https://forum.unity.com/threads/build-error-on-android-app-bundle.1322166/)のレス
    - https://forum.unity.com/threads/build-error-on-android-app-bundle.1322166/#post-8546147
AWS Certified Solutions Architect - Associate(AWS SAA)に合格した際の勉強方法を紹介します。

# 私のAWSスキルについて
AWS触った経験は1か月、使ったことのあるサービスはLamdaです。
IT系資格としては、応用情報、情報セキュリティスペシャリスト（登録セキスぺ（SC) )、AWSCLFを保有しています。
実務経験は10年になります。

資格取得時期が去年の8月なので、試験バージョンはSAA-C02になります。

# 使用した教材と値段


[【ベストセラー完全日本語化】AWS 認定ソリューションアーキテクト アソシエイト SAA-C03 対応 2022 最新版](https://www.udemy.com/share/105rfG3@6LQFRBBvB9z2aLuhYniwBjL6SMdyP-u-ytAbV518FE-V-NZU6rFXcsyL_ODz9qCPag==/)
1,480（Udemyのセール時に購入）

[【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/share/101rfM3@KXfObNuyUv_seVsdKcCkEqsV3eCDyUmVMS2_0Yb1AUgiFL98LAwaang2CRp0fDTpfw==/) 1,480（Udemyのセール時に購入）

# 勉強方法

####  1. 【ベストセラー完全日本語化】AWS 認定ソリューションアーキテクト アソシエイト SAA-C03 対応 2022 最新版をひたすら見る。(30時間)
ハンズオン形式の動画もあるので、全部の動画を見ながらハンズオンは自分の環境で実施して、AWSのサービス名と大体の機能を掴む。動画全体で27時間くらいあるのですが、再生スピードを自分が理解できるレベルまで上げれば短縮できます。
動画の説明もわかりやすく、とても重要な教材となりました。

#### 2. Udemyで購入した模擬試験問題集を繰り返し実施。(15時間)
模擬試験一回当たり問題が65問あり、全部選択してからでないと解説が見れないのが地味に使いずらいです。
私は10問答えたら、テストを完了する、でテストを終わらせて該当箇所の開設を見る、という風にして、
通勤時や、昼休みなどの隙間時間に少しずつ進めていました。

試験問題との類似性という観点では、問題集と実際の試験問題は問題文の表現方法等、あまり類似していません。
試験範囲をカバーしているか、という観点では試験範囲以上の物を扱っています。

#### 3.AWS公式の模擬試験を実施(2時間)
AWS公式の模擬試験を実施して、間違えた問題は復習しました。
問題文の表現方法が実試験と同じなので、模擬試験は実施することをお勧めします。

# 資格を取得して
資格取得で得た知識よりも、ハンズオン動画で色々なサービスの動きを触ったことで
、AWS（ほかのクラウドも）を触るうえでのハードルがぐんとさがったと思います。
AWSと聞くとちょっと身構えてしまっていたのですが、特に抵抗感がなくなり自身につながりました。
【GAS】 文字列に変数を入れる

## テンプレート文字列

文字列に変数を入れたい

バッククォート「`」で文字列全体を囲み、
変数の部分は${変数名}にする

### コード

```javascript

function selfIntroduction() {

  let name = "りこ";
  let favorite = "GAS";
  let introducton = `私の名前は${name}です。好きなものは${favorite}です。`;

  console.log(introducton);

}

```
### 結果
![テンプレート文字列.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640876/dbe1ea32-06e4-f8dd-0cfd-aa4ad2b50cf1.png)
年末年始の勉強振り返り　※Python、JavaScript、Reactの本紹介

# 伝えたいこと：業務でプログラムを直接触らない管理職(おじさん)は定期的に学ぶべき！

## 問題（現状とあるべき姿とのギャップ）
おじさんは若者に、「開発」とか「自動化」とか簡単に言う。
しかし、言っているおじさん自身が、全く知識がないと、「言うだけ？」みたいな空気が流れる。

## 課題（ギャップを埋めるためにやるべきこと）
業務で機会がないなら、業務外で学ぶ！おじさんもチャレンジしている姿を見せ続ける！


### 去年(2021-2022)
Udemyの動画を甘く見ていた！
[Udemy「最新版：Python + Django3 Djangoを基礎から応用まで、アプリケーション開発マスターpython付き」を受けてみた！おじさんは動画時間を甘く見ていた。](https://qiita.com/tsunetsune09/items/3502812e8e41750163b7)


### 今年(2022-2023)
本で勉強する。以下、短期集中のために図書館で借りた本

##### 「1日で基本が身につく！Python」
- 単元が8項目に分かれていて、1項目1時間。
- 参考にできるプログラム
    - インターネットから複数の画像ファイルを集めるプログラム

##### 「1日で基本が身につく！JavaScript」
- 単元が8項目に分かれていて、1項目1時間。
- 参考にできるプログラム
    - APIを使ってflickrの画像検索アプリ
    - 日記アプリ
　　※JQueryやAPIはサラッと紹介

##### 「いちばんやさしいJavaScriptの教本」　←　　この中ではこの本が一番初心者に優しい！
- JQueryやAPIについても詳しく説明している。見やすく、説明も丁寧。
- 参考にできるプログラム
    - フォトギャラリー
    - yahooのカテゴリー別のランキング表示
    - JQueryを使ったスライドショー
    - JQueryとAPIを使ってyoutubeの動画ギャラリー

##### 「React入門」
- 概念はわかる。
- Reactをこの本だけで理解できるほどReactは甘くない！
- 結局JavaScriptで良いのではと思ってしまう。
- 参考にできるプログラム
    - yahooのカテゴリー別のランキング表示


元々年末年始にReactの勉強と思って、復習込みで上記本を選定した。
しかし、Reactについては理解度が低い状態のまま。。



結果的に上記を一通り読むことは出来たが、年末年始はコロナに感染し、大変だった。



# 以下、コロナ感染＆宿泊療養施設メモ
(こちらはオマケですが、オマケのボリュームが大きくなってしまった。)


2022/12/24(土)
　何だか疲れたので早めに寝る。
2022/12/25(日)
　咳、鼻水　⇒軟弱な自分と向き合う。
2022/12/26(月)
　怠さ継続だが、在宅勤務なので何とかなる。
　体温計がいつもの場所になくAMはそのまま過ごした。
12時
　お昼に息子からの申告で体温計発見。熱38度。
　家にある抗原検査で「陰性」だったが、かなり怠さがあり、薬をもらいたいため、病院を検索。
　掛かりつけおよび近所全滅。
　近所の病院の一つから発熱外来の窓口の電話番号(5つ)を教えてもらったのでそこにかける。
　発熱外来で状態を聞かれる。
　別途、別の担当者から紹介できる病院を連絡するとのこと。
　別の担当者から連絡あり。
　発熱外来に登録している病院を3つ教えてもらう。この時点ではお昼の休憩時間帯のため予約できず。
15時
　午後の診療が始まる15時に電話をかけ、ようやく1件予約。
　発熱外来は通常診療後で19時以降となるとのこと。
19時半ごろ
　ようやく受診。インフルエンザも確認できるため抗原検査を実施。
　あっさり「陽性」。

その後クリニックで東京都宿泊療養施設の案内をうける。
試しに連絡してみる。
優先順位に従ってホテルを割り当て。宿泊できない可能性があるとのこと。
試しに登録してみる。

2022/12/27(火)
　熱と咳。咳のため喉の痛み。
　会社も急遽休みをとった。
10時頃
　東京都から電話あり「ホテルに入れる」連絡うける。
　※それほど家から離れていない場所のホテル。なんとか自転車でいけるか！と思っていたら
　「東京都が迎えに来てくれる！」とのこと。
　ただし何時に迎えに行くかは当日じゃないとわからない。

2022/12/28(水)
　朝に宿泊療養施設の確認の電話あり。
　昼にワゴン車の運転手から電話あり。
　※「13:45に家の前にいる。」家の前に着いたら電話をしてくれる。


　ホテルでは
　　1階のエントランスで自分あての書類を受け取り(箱から取る)、いくつかアメニティを選ぶ。
　　(別にこの時点でとる必要なかった)

※私がお世話になった施設は「アパホテル」。ありがたや！
※12/28(水)の私がホテル受付した時点で私以外10個以上の受取書類があり、
　年末年始でも宿泊療養施設の需要は高い状態。


　11階に移動。
　このホテルの11階は1フロアすべてコロナ患者の宿泊療養施設になっている。
　共通の1部屋で血圧を測って、自分の部屋に入る。
　部屋には普通のアパホテル(タオルはない)
　受取書類にはA4で25枚程度の資料あり。久しぶりにこれほどの量の紙の束の資料を読んだ。
　(アプリによる健康報告方法、ホテルの注意事項、コロナの説明、小池百合子さんのメッセージ等)

　健康報告のタイミングで館内放送あり
　お弁当配給時の館内放送あり
　※ちょくちょく館内放送ある。

16時健康報告
18時夕飯

夕飯(お弁当を取りに行くため、食事時の1時間)時だけ部屋から出てよい。
　すれ違う人
　　皆寝巻
　　11階は男性のみ(なんとなく若者が多い雰囲気。一人暮らしの人が多い？)(男女フロアを分けている)
　　　少なくても5階～12階はコロナ患者がいる
　　上の階が男フロア、下の階が女フロア
　　※余っていれば弁当2個目配布サービス人気

20時
　また熱が上がる。咳がひどくて横になれない。
　健康状態(熱38度)を入力するとホテルの看護師から連絡あり。
　カロナールを飲むように指示あり。

2022/12/29
6時
　なんとか寝られた感覚あり
　熱は37度前後。咳あり。
　昼は36度台
　夜にまた37度台。咳が収まり助かる。

2022/12/30
　7時咳なし。
　だいぶ体調は落ち着いてきた。


その他
　ホテルの人件費　⇒かなりの人件費をかけている。東京都ありがとうございます！
--
お迎えワゴン車の運転手1名
ホテルでワゴン車を待ち構えていた2名。
ホテル内の受付1名。
ホテル入室後、事務連絡1名。
その後健康報告アプリでの入力結果を含め看護師1名から連絡あり。

ホテルでの受取書類には、封筒の表面以外の中の書類にも「個人」の名前もあり、個別対応がされていた。
そして宿泊初期には一日何度も体調確認の電話。

全フロアに3食毎回食事を用意するのも人の手による。感謝！
--
React初心者によるアウトプット

## React初心者によるアウトプット

## 自己紹介
SES企業勤務のフロントエンドエンジニアです。React/Next.js/Typescript中心に学習中です。
アウトプットの機会を増やし、自分自身の知識を増やすため、1月は平日毎日アウトプットすることが目標です。

## Reactのレベル感

hooksを使用できる程度でredux等は、なにそれ?難しそう...というレベル感です。。


## 便利機能
React Developer Toolsという拡張機能でstateをリアルタイムで確認することが出来ます！

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

## アウトプット
##### useStateについて
```import React from "react"; ```
でReactだけimportしている場合はReact.useState 、
```import React, {useState} from "react";```
のようにuseStateも個別にimportしている場合はuseState とReactを付けずに使います。

import文を極力シンプルにしたいのでこうしているのですが、個別にimportするとそのファイルで何のhookが使われているかが分かるので一長一短です。


##### イベントハンドラについて

わたしが最初躓いた部分として、e.target.valueが入るときと、set関数を渡す時の違いがわかりませんでした。

```
const handleClick = (e) => {
  setCount(count + 1);
}
 return (
 <div>
      <p>{count}</p>
      <button onClick={handleClick}>増やす</button>
    </div>
```
const handleClick = (e) => {
  setCount(e.target.value)
}
とすると、ここには何も入ってこないので、この場合は、クリックされたタイミングで何か処理を実行する　という意味のハンドラになります。
今回のようにカウントするため、数値の初期値を受け取りたいため、count+1という処理を記述するのが正しくなります！


## 最後に

アウトプットしつつ知識定着を図りたいと思い始めました。
7月から勉強中の初心者ですが、どうぞよろしくお願いいたします！
Googleトレンドで2022年のAWSを振り返る

あけましておめでとうございます。本年もよろしくお願いいたします。

新年一発目は、Googleトレンドで2022年のAWSを振り返ってみます。

[AWS - 調べる - Google トレンド](https://trends.google.co.jp/trends/explore?date=2022-01-01%202022-12-31&geo=JP&q=AWS)


## 2022年 人気度の動向

年間通じてそれほど上下はない印象です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d7fcb52e-48b8-86c3-cf0b-614335ff9e6d.png)

グラフがたまに下がっているところはゴールデンウィークやお盆、シルバーウィークなどです。なので皆さんお仕事中に検索してるんだと思います。

## 2022年 関連トピック（注目）

関連トピックとは
> 該当のキーワードを検索するユーザーは、これらのトピックも検索しています。次の指標ごとに表示できます。

> 注目 - 最後の期間からの検索頻度の増加が最も大きい関連トピックです。「急激増加」とマークされた結果は、極端な増加を示すもので、原因としては、そのようなトピックが新しいために以前の検索が（あったとしても）ほとんどなかったことが考えられます。

| 関連トピック | カテゴリ | 増加率 | 
| --- | --- | --- |
|テラフォーム | ソフトウェア | 80% 増加 |
|ビルド | ソフトウェア | 70% 増加|
|資源 | トピック | 70% 増加|
|Go | プログラミング言語 | 70% 増加|
|サイクリン依存性キナーゼ | トピック|60% 増加|
|コンピュータ・アーキテクチャ | トピック|50% 増加|
|GitHub | ソフトウェア | 50% 増加|
|React | トピック | 50% 増加|
|Bash | ソフトウェア | 50% 増加|
|工学者 | トピック | 50% 増加|

サイクリン依存性キナーゼという聞き慣れない単語が出てきたのですが、英語ではCyclin-dependent Kinaseらしく、略称が**CDK**とのこと。
AWS関係でCDKといえば、**Cloud Development Kit**ですね。テラフォーム（Terraform）もランクインしているので、IaCに皆さん興味が出てきた年ということでしょうか。


## 2022年 関連キーワード（注目）

関連キーワードとは
> 該当のキーワードを検索するユーザーは、これらのクエリも検索しています。次の指標で並べ替えることができます。

> 注目 - 最後の期間からの検索頻度の増加が最も大きいクエリです。「急激増加」とマークされた結果は、極端な増加を示すもので、原因としては、そのようなクエリが新しいために以前の検索が（あったとしても）ほとんどなかったことが考えられます。

| 関連キーワード | 増加率 |
| --- | --- |
|aws summit 2022|急激増加
|aws skill builder|650% 増加
|aws 資格 意味 ない|500% 増加
|aws クラウド プラクティ ショナー 過去 問|450% 増加
|cloudflare|450% 増加
|aws クラウド プラクティ ショナー 勉強 方法|130% 増加
|aws certified cloud practitioner|120% 増加
|aws 資格 一覧|120% 増加
|aws network firewall|90% 増加
|aws control tower|80% 増加
|terraform|80% 増加
|terraform aws|80% 増加
|aws cdk|70% 増加
|ざっくり aws|60% 増加
|aws secrets manager|60% 増加
|aws 求人|50% 増加
|aws クラウド プラクティ ショナー 申し込み|50% 増加
|aws エンジニア|50% 増加
|aws certified solutions architect|50% 増加
|aws 転職|50% 増加

**クラウドプラクティショナー**への関心が非常に高いです。「aws 資格 意味 ない」というキーワードは寂しいですが、会社から取りなさいと言われていたりするからでしょうか。求人や転職も、資格を取ってレベルアップという感じでしょうか。
先程紹介したterraform、cdkといったIaC関係がやはりランクイン。
サービス名としては、network firewall、control tower、secrets managerと、意外とマニアック（？）なサービス名が多いですね。

---

過去5年分のキーワードを抽出した追加して[こちら](https://moritalous.pages.dev/cb1f0a16a1c0a87011da)に投稿しました。よろしければ御覧ください。
FungusでInputSystemを使う

FungusとMRTK3を併用しようとしたら、InputSystemの問題がでてきましたので
以下の記事を参考に、解消していこうと思います。

https://kitty-pool.com/ss061/

https://qiita.com/Nucleareal/items/7a9274b0a6b8bc5b0c7b

InputSystemはBothにしていたのですが、古いほうのEventSystemを張り付けても反応がしなかったため、対処していく必要がありそうです。

## 設定ファイルの修正
まず、FungusのファイルにInputSystem利用に伴う許可設定をいれるため
「Fungus.asmdef」の「Assembly Definition References」に追加をしてApplyしておきます。
![aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/fc95820d-1dde-875d-cd2e-9e91f71faffe.png)


次に、会話を送る設定をしているcsファイルを探しだします。

![ii.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/cc68fa47-5e6f-ba54-360d-b839dd09dabc.png)

87行目からの内容を変更します。

![jj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/f61e34d9-402f-1952-b265-5a8628827f45.png)

```cs
using UnityEngine.InputSystem;
//割愛
[SerializeField] InputActionReference inputAction;

//89行目あたりを書き換え
 if (inputAction.action.IsPressed())
  {
    SetNextLineFlag();
  }
```
最後に、設定したいInputSystemをインスペクターから追加して完了です。
![bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/68004477-8bc9-29c1-9055-abe2f5fb1d8d.png)



## 会話が進行するようになったものの...
isPressedだと反応が良すぎる（１フレームごとの呼び出し）だそうで、
３ページくらいが一気に消化されてしまうようです。
別の何かいい方法がみつかったら追記しようと思います。

※追記
物凄く汚いコードですが、以下で回避しました...
InputSystem側で回避させる方法がありそうなのですが、調べきれませんでした。

```cs
 if (inputAction.action.IsPressed() && waitSay)
{
     waitSay = false;
     SetNextLineFlag();
     Invoke("ResetWaiting",2f);
}

//Update以外のところで生成
 private void ResetWaiting()
 {
      waitSay = true;
 }
```
【Python,Jupyter lab】自分でモジュールを作り、利用する。

自作のモジュールをjupyter lab上で利用する方法について

1,name.pyのファイルを作成
-
```python:name.py
import numpy as np

def heikin_ni_plus_one(x):
    '''
    dataはlist型でデータを渡すこと　#この部分にメゾットの説明文を記述できる
    '''
    return sum(x)/len(x) + 1
```

2,同じフォルダ内にpythonファイルを配置し、インポート
-
```python
import numpy as np
import name #ここで拡張子が.pyのファイル名をインポートする
```

3,モジュールの中のメゾットを呼び出し
-
今回は平均にプラス１した値を返すメゾットを利用する
```python
x = np.array([1,2,3]) #listを作成
name.heikin_ni_plus_one(x)　#ここでnameモジュール内のheikin_ni_plus_oneメゾットを利用
```

4,おまけ
-
helpメソッドで自分の作ったモジュールの説明文を確認できる
```python
help(name)
```
チャットGPT (ChatGPT) を触ってみた

# チャットGPT？
[ChatGPT（チャットGPT）](https://chat.openai.com/auth/login)とは、[OpenAI](https://openai.com/)が開発したチャットアプリケーションサービス。
GPT-3というモデルでつくれらてるぽい。
※12月12日現在では、無料

# 準備してみた
OpenAIのアカウントが必要みたい。
[ChatGPT（チャットGPT）](https://chat.openai.com/auth/login)にアクセスし、Sign　upを押下する。
![](https://storage.googleapis.com/zenn-user-upload/56b20f9b7d53-20221212.png)
アカウント作成が必要みたいなので、会社のメアドでやってみる。
![](https://storage.googleapis.com/zenn-user-upload/941286f0e258-20221212.png)
名前を入力して、
![](https://storage.googleapis.com/zenn-user-upload/a8836d04dbd7-20221212.png)
電話番号で認証するために入力し、
![](https://storage.googleapis.com/zenn-user-upload/4fd36b5639cd-20221212.png)
SNSできた番号を入力する。
![](https://storage.googleapis.com/zenn-user-upload/35984f9676eb-20221212.png)
これで、準備はおしまい。

画面は、こんな感じ。
![](https://storage.googleapis.com/zenn-user-upload/9874e062078d-20221212.png)

# 遊んでみた
日本語が使えるとのことで、ワールドカップやサイバーエージェントについて、聞いてみた。
![](https://storage.googleapis.com/zenn-user-upload/0bb9beefe321-20221212.png)
ちょっと、おもろいｗ

あ、あれ。みんな遊んでる？ｗ
![](https://storage.googleapis.com/zenn-user-upload/26a9c0895a15-20221212.png)

英語はもちろん、いけます。
![](https://storage.googleapis.com/zenn-user-upload/39100692bff0-20221212.png)

おしえてください！
fizz buzz をJSで。
![](https://storage.googleapis.com/zenn-user-upload/cb9af56b0728-20221212.png)

# おまけ
おしえてください！
プロダクトマネージャーとエンジニアリングマネージャーについて！！
![](https://storage.googleapis.com/zenn-user-upload/0df25871f5ce-20221212.png)
![](https://storage.googleapis.com/zenn-user-upload/44e78b66902c-20221212.png)

そりゃ、学習してないですよねｗ
![](https://storage.googleapis.com/zenn-user-upload/a9b1db1dfe0c-20221212.png)

すごい！やばい！って煽りの記事と、いつものとおり焦んな！って記事と。おもろ。
Raspberry Pi Model B にMacからリモート接続してみた

# Raspberry PiにVNCサーバをインストール
```shell
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install tightvncserver
```

# TightVNCサーバを起動
```
tightvncserver
```
初回のパスワード要求を適当にかわす

# MacからVNC接続
`Finderメニューの「サーバへ接続」 or command + k` だと思うけど、うまくいかず。
`ブラウザ or 画面共有.app` でやればよさげ。

```shell
vnc://raspberrypi.local:5901
```
Raspberry Pi Model B をMacでSSH接続してみた

# OSイメージをダウンロードする
https://www.raspberrypi.com/software/

# OSイメージをSDカードに書き込む
Raspberry Pi Imagerを使って、OSを選択しSDカードに書き込む
![](https://storage.googleapis.com/zenn-user-upload/e9c135f61908-20230104.png)

# SSHできるように準備する
/boot配下にsshファイルを書き込む
`$ touch /Volumes/boot/ssh`
![](https://storage.googleapis.com/zenn-user-upload/0ca1b6c18afc-20230104.png)
となったのでSDカードを再接続してできた

# SSH接続

アイパスがこんな感じで、
```
ID: pi
Password: raspberry
```
sshするときは、
```shell
ssh pi@raspberrypi.local
```
なんだけど、piでログインできないなーと思ってたら、
ラズパイ起動後にGUIで設定して、自分のユーザー名をつけてたのを忘れてた。

```shell
ssh toguri@raspberrypi.local
```
![](https://storage.googleapis.com/zenn-user-upload/eae072a7b7f9-20230104.png)

これでSSHできた。

参考にしたサイト
https://killtime.blog/raspberry-pi-getting-started-with-no-display/#toc5
AWSアカウントへのクレジット適用方法

# はじめに
ここではAWSアカウントにクレジットを適用する方法を記載する

# 前提
これからの作業はAWS Budgetsを利用可能なことが前提となります
また適用可能な有効なクレジットが存在することが前提となります

# 手順

## 1. AWS Budgetsのコンソールに移動し、左ペインの「クレジット」を選択する

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198480/e902ea51-c91c-adb2-3ca9-b93d36f3ace7.png)

## 2. クレジットの画面に遷移するので、「クレジットを適用」をクリックする

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198480/cf1b52dd-e9ee-762d-d9d5-2fdfbee085fd.png)

## 3. プロモーションコードと画面に表示されるセキュリティコードを入力し、「クレジットを適用」をクリックする

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198480/c2f16c9d-b5b7-c268-e053-82a778d7d872.png)

## 4. 正しくクレジットが適用されると、「クレジットの適用に成功しました。」と表示され、クレジット一覧に適用したクレジットが表示される

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198480/9a4e7ae2-73ca-2512-ee9c-091da4190516.png)


以上、お疲れ様でした
2023年1月 AIOps 定点観測

# 概要
AIOps の動向や学習のため、Google で AIOps を検索した結果を記録している記事です。

# 2023年1月4日の検索結果 (リスティング広告)

![20230104_AIOps_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/db53b714-afb0-c465-abb9-3196e8f58a53.png)

* Splunk
* ServiceNow
* Pure Storage
* Dynatrace

これまでトップ常連だった IBM がついに消えました。 今月は splunk がトップです。 先月に引き続き Pure Storage が入っています。

先月の結果はこちら --> [2022年12月 AIOps 定点観測](https://qiita.com/mkodera/items/ea956c3f2857460b77f8)

# 2023年1月4日の検索結果 (広告以外)

![20230104_AIOps_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/a3c8a327-6c5c-1e5f-5229-242bf74c1c8d.png)

* Splunk
* ServiceNow
* ITmedia
* JBSVC
* 日立
* CTC (ビジネス on IT)

広告以外でも Splunk がトップです。日立と CTC が初登場です。 最近になって AIOps の記事が増えてきたように感じます。

先月の結果はこちら --> [2022年12月 AIOps 定点観測](https://qiita.com/mkodera/items/ea956c3f2857460b77f8)
Growiの便利な設定

# 概要
社内のWIkiをpukiwikiからGrowiに移行しようかなということで、pukiwikiにはできるけどGrowiのデフォルト設定ではできないことと、Growiでは不便な部分を洗い出して、GrowiのGitHubのIssueにリクエストを出しつつ自分で何とかできる部分はカスタマイズしていこうかなという感じです。その過程を備忘録として残していきます。Growiが広まってもっと使いやすくなっていけばうれしいので...。
ということで、この記事は良い設定を見つけるたびに更新されます。

# 設定
Growiのおすすめ設定です。

## マークダウン設定
### Line Break設定
スペース2つで改行にするか、編集画面で改行したら改行として扱うかの設定。個人的にはスペース2つで改行というのは結構わかりづらいなといつも感じてたので、これはテキスト内の改行を<br>タグとして扱ってくれたほうが嬉しいなと思いました。ほかのwikiに移行するときとかにちょっと不便なのかなとも思いましたが、最近のwikiとかはどれも割と改行を改行として扱ってくれるのであまり心配しなくてもいいかなと思います。

### XSS(Cross Site Scripting)対策設定
基本的にはデフォルト設定で問題ないと思いますが、テーブルのcolspanとrowspanがないのは結構不便です。ここで許可するHTMLのタグと属性を設定できるので、追加しておきましょう。
![span.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524944/85c2bb17-1f16-5412-75b9-b77527322a29.png)

## カスタマイズ
### テーマ
デフォルトのテーマが正直かなりごてごてしていて見づらいのでいろいろ試しましたが、`jade-green`というテーマが比較的文書を読みやすいなと感じたのでお勧めです。
![色.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524944/4166e2be-6377-ac87-4b22-1e36fd0c95ab.png)


# カスタムスクリプト
Growiにはカスタムスクリプトというものがあり、Growiの挙動をカスタマイズすることができますが、そのやり方が意外とわかりづらかったので、ほかの方の記事のソースそのままですが、一か所にまとまってないと不便だと思うので、記載させていただきます。ぜひ[元の記事](https://qiita.com/k84rc/items/159a7399c11abd4e3587)にいいねを...！
以下のようなひな形で書くととても簡単にスクリプトを作れます。この記事ではこのひな形を使ってスクリプトを書いていきます。

```javascript:カスタムスクリプト
// 追加するスクリプトの定義を記述
function something() {
    ...
}
function something2() {
    ...
}
$(function() {
  var functions = [
    // ここに関数の名前を列挙する
    // 以下は例
    something,
    something2
  ];
  for (var i in functions) {
    functions[i]();
  }
});
```

## リンクをクリックしたときに別タブで開く
Growiってデフォルトだとリンクをクリックしたときにそのタブで開いちゃうんですが、これが結構不便で誰もが一度はどうにかしたいと思ったんではないでしょうか。ということで、別タブで開くようにカスタムスクリプトを入力してみます。
```javascript:カスタムスクリプト
function openExternalPageInNewTab() {
  $('a[href]').each((i, elem) => {
    var url = elem.href.match(/(?:https?:\/\/([\w:%#\$&\?\(\)~\.=\+\-]+))?(\/?[\w/:%#\$&\?\(\)~\.=\+\-]+)/);
    if (url[1] !== undefined && url[1] !== document.domain) {
      elem.target = '_blank';
    }
  });
}
$(function() {
  var functions = [
    openExternalPageInNewTab,
  ];
  for (var i in functions) {
    functions[i]();
  }
});
```
これもほかの記事のものを使わせていただいているので、下にリンクを貼っておきます。
この方法でリンクをクリックした際に別タブで開くように変わります。ただ、設定画面のリンクなどを押したときも別タブで開いてしまい煩わしいので、もう少し改善したいところ...。


# 参考にした記事
https://qiita.com/k84rc/items/159a7399c11abd4e3587
Vite + Vue3 + TypeScriptでAlias pathを設定する方法

# はじめに

`vue`や`react`、`svelte`でコンポーネントを呼び出す際、相対パスで`import`を記述していませんか？

そうしていると、コンポーネントの整理をしている中で動かない箇所が出てきます。
1つ1つチェックするのは非常に手間なので、`Alias`を設定して楽をしましょう～

# ./srcを@に設定

```typescript: vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'                     // ・・・・追加

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {                                // ・・・・追加
    alias: {                                // ・・・・追加
      '@': path.resolve(__dirname, './src') // ・・・・追加
    }                                       // ・・・・追加
  }
})
```

これでもアプリケーションは動くが、`TypeScript`のチェックが通らないので、
`tsconfig.json`も修正する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/cb7142d2-508f-bb4f-5d68-b5368cd78959.png)


```typescript: tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    ・ // 
    ・ // 省略
    ・ // 
    "baseUrl": "./src",  // ・・・・追加
    "paths": {           // ・・・・追加
      "@/*": [           // ・・・・追加
        "./*"            // ・・・・追加
      ]                  // ・・・・追加
    }                    // ・・・・追加
  }
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/12e73e9a-e319-ce75-fbb2-b69d39f3c50d.png)


OK
【Python】ModuleNotFoundError: No module named 'termcolor'　の対応方法！

# エラー内容
* Pycharmにて、`from termcolor import colored print('test')`で実行すると、以下エラーが表示された。

```terminal
ModuleNotFoundError: No module named 'termcolor'　
```
# 原因・解決方法
* PycharmでのPreferenceおよびconfigのinterpreterのパスを以下に変更したところ出力に成功。
```
/Users/xxxxxx/.pyenv/shims/python
```

* `which pyenv`では`/opt/homebrew/bin/pyenv`が表示されていたので、誤ってこれをPycharmでの環境設定で入れていた。ただ、これはpyenv自体の場所。上記の`.pyenv/shims/python`がpythonのバージョンを管理するパスとなるので、こちらを入れてあげれば解決しました。
* `which python`を実行すると上記のパスが確認できます。

# 備忘録
* PyPIからライブラリ導入することが可能だが、ターミナルから`pip install termcolor　`コマンドでもインストールすることも可能。
* 一度ライブラリ導入しても、pyenvで異なるバージョンにしたときは、そのバージョン下でもう一度インストールする必要がある。一度インストールすれば残るので、次回切り替えても問題ない。念のため、 `pip install --upgrade pip`をしておくとよい。
* pipコマンドを打つと、バージョンアップ可能であることがWARNINGで表示される。
twitterの埋め込みを軽くする

埋め込むとけっこう重たいみたいですが、調べても`widgets.js`を読み込むスクリプトタグを後から追加くらいしか見当たらなかったのでメモとして書きます。

### 前提となる技術

[IntersectionObserver](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)を使います。IEがさよならバイバイしたので便利な世の中になりました。

### コードスニペット

```html
<!-- 埋め込みのコピペ、aタグのclass属性の中身を変えて埋め込みが実行されないようにしてある -->
<a class="pre-twitter-timeline" data-height="500" href="https://twitter.com/elonmusk?ref_src=twsrc%5Etfw">Tweets by elonmusk</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- IntersectionObserverを使い、見えるようになったらaタグのclass属性を正しいものにして埋め込みを実行 --><script type="text/javascript">
  const elm = document.querySelector('a.pre-twitter-timeline');
  const observer = new IntersectionObserver((entries) => {
    if (!entries[0].isIntersecting) return;
    observer.unobserve(elm);
    elm.classList.remove('pre-twitter-timeline');
    elm.classList.add('twitter-timeline');
    twttr.widgets.load();
  });
  observer.observe(elm);
</script>
```

### 参考

https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization
【Windows10】別のGitユーザーからプッシュできなくて困った

## 状況
Githubにてリモートリポジトリを作成
コマンドプロンプトでgit initし、ローカルリポジトリ作成
コミットはできたが、プッシュしたところでpermission deniedエラー

```
remote: Permission to [使いたいアカウント名]/[プロジェクト名].git denied to [前のアカウント名].

fatal: unable to access 'https://github.com/[使いたいアカウント名]/[プロジェクト名].git/': The requested URL returned error: 403
```

## 試したこと
１．以下を叩いてからプッシュ（調べると一番よく出てきた内容）

```
git remote set-url origin https://[使いたいアカウント名]@github.com/[使いたいアカウント名]/[プロジェクト名].git
```

２．.git/configを確認
ローカルリポジトリのフォルダに.gitというフォルダが作成されています。
隠しファイル見れるようにしないと見れないかも…？

テキストエディタとかで開いて、userの部分が使いたいアカウントのものになっているか確認

## 解決
以下を参考にさせていただきました。
https://qiita.com/hiro9/items/19a415ed2349430663b3

#### 汎用資格情報
gitの行の赤丸部分をクリックするとユーザー名、パスワードの記載があります。
編集をクリックして使いたいアカウントのユーザ名とパスワードを入力


その後コマンドプロンプトに戻ってgit push -u origin masterでプッシュできました。
【webpack5】Webpack環境作成時のエラーと警告の解消記録

Gulp4からwebpack5に作業環境を移動するため調べながら作っている最中に出てたエラーをまとめてみました。
都度追加してゆきます。

js周りはwebpackに
- ES6
- vue
- typescript

で書けるようにしています。


## typescript
### ファイルが読み込めないエラー

画像をTypeScriptを通して読み込むため
`/src/js/definitions.d.ts`に記述してwebpackを起動（`npm run start`）した際に出ました。
```
ERROR in ./src/js/definitions.d.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/（環境までのパス）/（ディレクトリ）/src/js/definitions.d.ts.
    at makeSourceMapAndFinish (/Users/（環境までのパス）/（ディレクトリ）/node_modules/ts-loader/dist/index.js:52:18)
    at successLoader (/Users/（環境までのパス）/（ディレクトリ）/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (/Users/（環境までのパス）/（ディレクトリ）/node_modules/ts-loader/dist/index.js:22:5)
```

### 調べたこと・その他の可能性
エラーを調べていく中で`tsconfig.json`の中に`"noEmit": true,`が入っているのが原因という記事をよく見かけましたが、もともとコメントアウトしていたので今回の影響範囲ではなかったです。

### 原因
今回の原因はwebpackで管理(監視)しているjsのディレクトリにdefinitions.d.tsファイルを置いていたことが原因でした。

### 対応
webpackの監視下から外すため別ディレクトリを作ってその中に入れました。
`/src/js/`から`/src/ts/`にdefinitions.d.tsを移動。
念のためVScode再起動してから`npm run start`を実行で解消されました。

## Vue
### vue-loader v17の罠
webpackの書き方に問題がありました。
vue-loaderは系統によって書き方変わる恐れがあるので注意。

```
Error: Cannot find module 'vue-loader/lib/plugin'
```

```webpack.config.js
//（修正前:v15まではこの書き方でOKっぽい）
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//（修正後：v16以降）
const { VueLoaderPlugin } = require('vue-loader');
```

### 参考
https://github.com/vuejs/vue-loader/issues/1688

<hr>

### 2系統で書くと怒られる
```
"export 'default' (imported as 'Vue') was not found in 'vue'
```

vueを実行しているjsファイルのimportの書き方などを3系統の書き方に直す

### 参考
https://qiita.com/Annmann3/items/9c99b0f9df9861da548b


## Warning

### Mord（オプション）を設定してくれというWarning
```
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
```
developmentかproductionを設定すれば消える。
とりあえず最初は開発のみの予定だったのでdevelopmentで対応。
いずれ本番環境用も用意したい。




## ESLint
ESLintによる警告は出ていても問題ないとはいえ
毎回出てくるのが鬱陶しい...

しかしESLintをよくわかっていないので
取り急ぎの対応。

### コンソールをおいたら出てきた
```
Unexpected console statement.
```

### 対応
```app.ts
//（修正前）
console.log("test");

//（修正後）
console.log("test"); // eslint-disable-line no-console
```

`// eslint-disable-line no-console`の追加で警告は出なくなりました。
もっとスマートな方法を知りたい( ´ ∵` )
2023年01月何故かベストアンサーをつけてくれない質問

[2023年1月の質問の中から整理します](https://qiita.com/Keiji_otsubo/items/bb1c850ac15ed139658e)

# トレイルヘッド

+ [Error message Use External service in Flow Please help](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000JfkXI)
+ [New Oppty Compact Layout](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000JflJ1)
+ [ERROR running force:org:create: ENOENT: no such file or directory, open 'config/project-scratch-def.json' ](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000JfNdm)
+ [Create an Object-Specific Quick Action](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Jfqvv)
+ [Issue with "Meet the health cloud console challenge"](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000KgsMU)
+ [Challenging Aura component basic where I am facing problem](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000MfpHL)
+ [Trailhead Playground](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Jfz0b)
+ [Hola buen dia a todos, tengo un tema con la parte de generar mi viaje trailblazer, ya que me arroja ese error, cabe mencionar que ya elimine y volvi a crear el elemento, cambie el idioma a ingles y aun asi no lo encuentra..](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000NEpU3)
+ [Chatter para Lightning experience](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000NEinj)


# 開発

+ [Trigger : There's a problem saving this record. You might not have permission to edit it, or it might have been deleted or archived. Contact your administrator for help.](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Jg2b7)
+ ['There's a problem saving this record. You might not have permission to edit it, or it might have been deleted or archived. Contact your administrator for help.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000Df7ic)

I have the seem problem, but I'm admin to my sandbox, impossible to edit, field status to object order.
問題はあるようですが、私はサンドボックスの管理者なので、フィールドのステータスをオブジェクトの順序に合わせて編集することはできません。

+ [レコードトリガフローをある一定の条件下で起動させたい](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S000000GX5a)
PlantUMLで入れ子になった図を作成する

# 概要

PlantUMLで入れ子になった図、ネストした図を作成する方法を探してもなかなか見つからなかったので、備忘録として書き残しておきます。

# 動作を確認した環境

- Visual Studio CodeのPlantUMLの拡張機能（jebbs.plantuml, v2.17.5）

# 入れ子になった図を作成する方法

## 単純な例

入れ子にしたい部分を`{{  ...  }}`で括るだけです。
`{{`と`}}`の前後には改行を入れる必要があります。
具体的には以下のようにします。

```
@startuml nested-diagram-example
:開始;
:処理
{{
    :処理1;
    :処理2;
}}
;
:終了;
@enduml
```

上記のコードから、以下のような図が生成されます。

```plantuml
@startuml nested-diagram-example
:開始;
:処理
{{
    :処理1;
    :処理2;
}}
;
:終了;
@enduml
```

このように入れ子になった図を作成することができます。

## 入れ子部分の背景を透過させる例

入れ子の内側は別の図として扱われるせいか、先程の例では入れ子部分の図の背景が白くなっていました。
入れ子部分の図の背景を透過させたい場合は、入れ子の内側に`skinparam backgroundcolor transparent`の設定を追加します。
具体的には以下のようにします。

```
@startuml nested-diagram-example
:開始;
:処理
{{
    skinparam backgroundcolor transparent
    :処理1;
    :処理2;
}}
;
:終了;
@enduml
```

上記のコードから、以下のような図が生成されます。

```plantuml
@startuml nested-diagram-example
:開始;
:処理
{{
    skinparam backgroundcolor transparent
    :処理1;
    :処理2;
}}
;
:終了;
@enduml
```

このように入れ子の内側と外側で背景色を合わせた方が自然な見た目になります。

## その他の例

入れ子の内側は別の図として扱われるため、別の種類の図を組み合わせて使用することもできます。
以下の例では、アクテビティ図のノードの中に、シーケンス図を埋め込んでいます。

```
@startuml nested-diagram-example
:開始;
:
{{
    skinparam backgroundcolor transparent
    Alice -> Bob: Send request
}}
;
:終了;
@enduml
```

上記のコードから、以下のような図が生成されます。

```plantuml
@startuml nested-diagram-example
:開始;
:
{{
    skinparam backgroundcolor transparent
    Alice -> Bob: Send request
}}
;
:終了;
@enduml
```


# 補足（Visual Studio Codeでの図の文字化けについて）

Visual Studio Codeのプレビュー機能を使用すると、入れ子の内側に書かれた日本語などのテキストが以下のように文字化けしてしまう場合があります。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2585392/24ce5b37-4cc2-db7b-7f36-6467ee7723ce.png)
この文字化けを回避するには、Visual Studio Codeの`settings.json`で以下のようにエンコーディングを指定する必要があります。

```json
{
  "plantuml.commandArgs": ["-Dfile.encoding=UTF-8"]
}
```