OmniAICreator/Qiita-1.07M huggingface dataset:
【10日目】on_messageについて知ろう【PythonでDiscordBOTを作ろう！】

# `on_message`
これもイベントハンドラの一種です。

![D97CEE3F-1F9E-4811-B439-CC740C82F6D3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/a34cf888-ccf2-3da1-fff4-3bef99c8a13b.jpeg)

翻訳の通りで、「メッセージで」駆動する関数を定義できます。

試しにやってみましょう。

# 試してみよう

```py
import nextcord
from nextcord.ext import commands

bot = commands.Bot()

@bot.event
async def on_ready():
    print(bot.user.name)
    print("BOTが起動したよぉ！")

@bot.event
async def on_message(message):
    print("なんかどっかからメッセージがきたよ！")

bot.run("TOKEN")
```

さて、`on_message`関数には、送信されたメッセージのデータが格納されています。
今回はちょっとそれは一旦無視しましょう。

さて、これで実行してみましょう。

BOTが起動したら、BOTがいるチャンネルで何かメッセージを送信してみましょう。

```sh
$ python main.py 
ChristmasBOT
なんかどっかからメッセージがきたよ！
```

こんな感じで、コンソール画面にメッセージの通知が飛んできたら成功です。

つまり！
このBOTを起動させておけば、Discordにメッセージが飛んできた時にわかりますね！()

# メッセージオブジェクト
Pythonがオブジェクト指向なプログラミング言語なので、メッセージやユーザー情報はそれぞれ「メッセージオブジェクト」「ユーザーオブジェクト」として扱う事が出来ます。

これが大変便利ですが、初見では理解できないかもしれないです。
試しに先程のプログラムで、メッセージが飛んできたら関数に渡される`message`をprintしてみましょう。

```sh
$ python main.py 
ChristmasBOT
<Message id=1039831480895029288 channel=<TextChannel id=1039201042916708435 name='一般' position=0 nsfw=False news=False category_id=1039201042916708433> type=<MessageType.default: 0> author=<Member id=669178357371371522 name='NattyanTV' discriminator='6507' bot=False nick=None guild=<Guild id=1039201041520001164 name='アドベントカレンダー！' shard_id=0 chunked=False member_count=2>> flags=<MessageFlags value=0>>
```

なんか沢山出てきて怖いですね（？）

この`<>`に囲まれたものがPythonではオブジェクトとして扱われています。

すこし前の記事でも紹介した様に、Pythonのオブジェクトにはピリオドでアクセスしていきます。
例えば、`hoge`オブジェクトの`name`にアクセスしたい場合は`hoge.name`と書く事で使用出来ます。

そして、今回`on_message`の`message`に渡されたオブジェクトは「メッセージオブジェクト」です。
メッセージオブジェクトに何が格納されているかはー...
**APIリファレンスを読みましょう！**

## APIリファレンス...？
さて、APIリファレンスとはなんでしょうか。
早々に答えを出してしまうと、各ライブラリの説明書みたいなものでしょうか。
今回は、nextcordを使用しているので、読むのであればnextcordのリファレンスを読みましょう。

https://docs.nextcord.dev/en/stable/api.html

英語で難しいかもしれませんが...
慣れれば簡単です！

# メッセージ本文が欲しいよ！
さて、次回は「メッセージオブジェクト」から、メッセージ本文やユーザー情報を取得してみましょう。
APIリファレンスをちょっとでも読む事を宿題にしますのでやってみてください！

というわけで、今日の記事はここまでです。 もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【9日目】イベントハンドラについて知ろう【PythonでDiscordBOTを作ろう！】

# What is イベントハンドラ...？

ここ、DiscordBOT界隈では、何かDiscord側でイベントが発生した場合に実行される関数と思ってください。

## デコレーター？
みなさん、Pythonの関数ってこんな感じに定義しますよね
```py
def main():
    print("main dayo")
```
実は、関数には「デコレーター」というものをつける事ができます。
デコレーターは`@`から始まるものを関数の前の行に書くことで、その関数にデコレーターを適応させることができます。

```py
@hogehoge
def main():
    print("main dayo")
```

こんな感じです。

さて、デコレーターとはなんだと思いますか？
実は中身は「関数」なんです。

```py:コード
def deco07(func):
    def wrapper(*args, **kwargs):
        print('LETS FUNCTION')
        func(*args, **kwargs)
        print('END FUNCTION')
    return wrapper

@deco07
def main():
    print('Hello!!!!')

main()
```
```sh:結果
LETS FUNCTION
Hello!!!!
END FUNCTION
```
という感じになります。

デコレーターをつけると、その関数を上書きすることが出来ます。
まぁ、難しいことがあんまり理解しなくてもいいんです。
とりあえず、「関数に拡張機能をつける」ものとでも覚えておいてくれたら嬉しいです。

デコレーターについて知りたい方はこちら...

https://www.sejuku.net/blog/25130

## `@bot.event`

さぁ、早速デコレーターです。
このデコレーターをつけた関数は、BOTのイベントが発生した際に実行されます。

```py:main.py
import nextcord
from nextcord.ext import commands

bot = commands.Bot()

@bot.event
async def on_ready():
    print(bot.user.name)

bot.run("TOKEN")
```

どのイベントが発生した際にどの関数が実行されるかは、関数名で指定します。
今回の`on_ready`は、「BOTが起動した際に実行される」イベントです。

そして、`bot.user.name`についてです。
`bot.user.name`は、`bot`の中の`user`というデータです。
この中には、BOT自身のユーザー情報が表示されます。

さらに、その`user`の中には`name`というデータがあります。
`name`には、そのユーザーの名前が入っています。

つまり、`bot.user.name`は「BOT自身のユーザーの名前」ということになります。
それを`on_ready`時に`print`しているので、BOT起動時に自身の名前を画面に表示するというコードになっています。
それでは実行してみましょう。

```sh
$ python main.py
ChristmasBOT
```
こんな風に、BOTが起動したと同時にユーザー名が表示されたと思います。

これがイベントハンドラについてのおおまかな説明です。

# さて、まだまだBOTではないですよね

イベントハンドラについて大雑把に理解してくれたと思います。
次回からはもうちょっとイベントハンドラについて紹介しながら、メッセージに反応するものを作ってみましょう。

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【8日目】BOTをとりあえず起動してみよう【PythonでDiscordBOTを作ろう！】

# 実行
ついに、BOTの起動をしてみましょう。
BOTの起動にはトークンと呼ばれるものが必要ですので、まずはそれを取得しましょう。

## トークンの取得

[Discord Developer Portal](https://discord.dev)から、以前アプリケーションを作成したのと同様に、`Application`から、今度は自分が作成したアプリケーションを選択します。
次に`Bot`を選択して、`Reset Token`を押します。

![22CB5707-6D12-44BE-B6DF-9B9A0F716BDC.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/4a4347a0-63bf-f9c1-a6fa-25a9cc427f8a.jpeg)

なんか警告が表示されますが、`Yes, do it!`を押します。

トークンが表示されますのでそれをコピーしてどこか「誰にもみられない安全なところ」へ置いておきます。


## プログラミング
```py
import nextcord
from nextcord.ext import commands

bot = commands.Bot()

bot.run("TOKEN")
```
TOKENの所は先ほどコピーしたトークンを貼り付けてください。

では、このプログラムを実行してみてください。
そしたらDiscordを起動して、あなたのBOTを見てみましょう。

![5A107F67-C913-4B28-940B-D09AD07AD05F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/a469478e-4a17-3ed6-3c3e-f85ccefc5379.jpeg)


ﾃﾞﾃﾞｰﾝ
なんと！　緑色のマークがついてオンラインになっているではありませんか！
と、こんな風にBOTを起動させるだけなら凄く簡単なのです！

### `from ... import ...`

from 〇〇 import ××文は、〇〇というモジュールから××をインポートするという感じです。
なので、今回は`nextcord.ext`から`commands`をインポートしています。
この`commands`の中には、DiscordのBOTを作る上で必要なものたちが含まれています。
基本的にこれを使ってBOTを作っていきます。

### `bot = commands.Bot()`

Pythonにはクラスとかインスタンス化というものがあります。
これは、オブジェクト指向プログラミングによく見られるもので、`class`というのは簡単に言えばテンプレートです。
このテンプレートを使うことで、中にある関数とかデータを使用することができ、大変便利となっております。

classオブジェクトを使うには、`インスタンス化`をする必要があります。
インスタンス化は、普通に関数として実行するようにクラス名の後に`()`を付けることで、インスタンス化されます。インスタンス化されたオブジェクトは、テンプレートをまんまコピーしたような感じで、扱うことができます。
今回は、`bot`という変数に`commands.Bot`のオブジェクトをインスタンス化しています。

「テンプレートをコピー」という所からわかる方もいるかと思いますが、コピーしているので、中のデータを変更しても、元のオブジェクトのデータは変更されません。
これが、オブジェクト指向プログラミングのお話です。

気になった方はいろいろ調べてみてください！

### `bot.run(TOKEN)`

`bot.run`は、そのインスタンス化されたBOTを起動する関数です。
その際、渡されたトークンで起動します。

というわけで、この`bot.run()`が実行されて、BOTが起動するというわけです。

## とりあえず終わらせよう

BOTを終了するには、`Ctrl + C`を押して、現在実行中のPythonプログラムを終了します。
`Ctrl + C`はよく使われるショートカットキーなので覚えておきましょう。
でも、強制終了に近いのでそれも覚えておきましょう。

## ...これじゃ、寂しいよね？

さて、BOTをオンラインにすることはできました。
しかし、今の状態では「何かメッセージに反応する」とか「コマンドを使用する」とかはありません。

これじゃ、寂しいですし、BOTとは言えませんよね。

というわけで、実際に次回からもうちょっとだけ踏み込んで「イベント」について紹介していきます。
ここからはAPIリファレンスの時間です。

これであなたもBOT開発者へと近づきました！ 

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【7日目】Discord APIってなんぞや【PythonでDiscordBOTを作ろう！】

# Discord API？
おいしそうですね。

## APIとは？

APIとは、`Application Programming Interface`の略で、外部から何か特定のサービスを使用したりすることが出来ます。
うーん難しいですね...

例えば、TwitterにはTwitterAPIというAPIがあります。
本来、Twitterへのツイートは公式のTwitterアプリやページからしかできません。
しかし、TwitterAPIというものを使用することで、ちょっとプログラムを書けば、公式アプリ以外からツイートとかが出来たりします。
こんな感じです。~~感覚で理解してください。~~

Discordにも同様にDiscordAPIというものが存在します。

1. 最初にWebSocketで接続する
2. Discordから`Hello`が送られる
3. DiscordにWebSocketで`Identify`を送る（BOTの証明？）
4. メッセージを送信したいなら専用のURLにHTTPリクエストを送る
5. BOTがメッセージを受信するとWebSocketで送信される
6. WebSocketで定期的に送られてくる「HeartBeat」にはWebSocketで応えなければならない

というような感じの流れでやります。
もちろん、こんなのを全部手動でやっていったら流石にクリスマスまでには間に合いません。

ということで、主要なAPI×主要な言語には「ラッパー」というものが存在します。

## ラッパー。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/7fbdcc4d-206a-6570-ab52-ca08de3c2714.png)

違います。
「wrap」（包む）+「er」で、ラッパーです。
「ｩラッパー」とでも発音するのが正しいのでしょうか？

ラッパーを使うと、難しいことをあんまり考えずにAPIを使用することが出来ます。

DiscordAPIとPythonにも色々なラッパーがあります。
`Discord.py`とか`Pycord`とか`nextcord`とか...
今回は、私の勝手ですが`nextcord`を使います。
もちろん本来はどれを使ってもいいと思います。
が、気分的に...ね？
どのラッパーを使ってもほとんど変わりませんが、多少変わってくる部分はあると思うので、少なくともこのシリーズでは`nextcord`と明言させてもらいます。

では、さっそくラッパーをインストールしていきましょう。
Pythonはモジュールをインストールすることで使用することが出来ます。

```sh
$ pip install nextcord
# または
$ python -m pip install nextcord
```
こうすることで、Pythonに`nextcord`をインストールすることが出来ます。
他にも、`pip install XXX`というような感じで指定すれば色々なモジュールをインストールすることが出来ます。

終わったら、ちゃんとインストールが成功しているか対話モードで試してみましょう。

```sh
$ python
Python 3.10.0 (default, Dec 11 2021, 16:18:22) [GCC 8.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import nextcord
>>> nextcord.__version__
'2.1.0'
>>>
```

こんな風にちゃんとバージョン情報が表示されたら成功です。
`ModuleNotFoundError: No module named 'nextcord'`と表示された場合はモジュールのインストールに失敗しています。
もう一回インストールを試してみたりしてください。
（もし、discord.pyやpycordを以前にインストールしている場合は、正常に動作しない場合がありますので、出来ることならアンインストールしておくことをお勧めします。）

以降も、コードを書いていくうえで必要だなーと思うモジュールについては適時書いて、インストールを促していきます。
記入漏れもある場合がありますが、その場合はご自身でインストールしていただければ嬉しいです。

# インストール完了！

さて、これでインストールまでは完了しました。
ついに次回からBOTを起動させてみたいと思います！！！
楽しみですね！！！！

とりあえず今日はお休みしましょう！

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【6日目】DiscordのBOTアカウントを作ろう【PythonでDiscordBOTを作ろう！】

# DiscordのBOTアカウントを作ろう

既に、Discordのアカウントは作っているものとします。

## Developer Portal
まずは、Discord Developer Portalに行きます。

https://discord.dev/

画面左の`Applications`を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/38c63d4a-bb2e-ade3-beef-1ae613e5f626.png)

そしたら多分右上の`New Application`を押します。

`Create an application`が表示されますので、適当に~~かっこいい~~名前を決めて、`NAME`に入れましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/a2b9b29e-54f9-92e8-692a-55caacd64b4c.png)

下の`By clicking Create, you agree to the Discord Developer Terms of Service and Developer Policy.`にチェックを入れて、`Create`を押します。

こんな感じにアプリの情報が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/c3984a35-5886-4b31-ff09-25b601481cc7.png)

さぁ、これであなたのアプリが出来上がりました。
そしたら左から`Bot`を選択します。

Build-A-Botの画面で`Add Bot`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/a600675d-fb50-1227-9792-a0a02cb8eb9f.png)

`Add a Bot to this app?`と表示されます。
要は、`BOTを作るとDiscordでアプリが他の人の目に見られるよ。この操作は取り消せないけど大丈夫？`というような内容です。
`Yes, do it!`をかっこよく押しましょう。BOTが出来上がります。

そしたら、画面左から`OAuth2`>`URL Generator`を押します。
とりあえず`bot`にチェックを入れて、画面の一番下に表示されたURLを開いてください。
サーバーを選択して「認証」ボタンを押せば、そのサーバーにBOTが入ります。
やったね！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/e7b766af-cdc0-41f8-af51-8fe536b5be27.png)

さて、BOT君はオフラインです。
静かですわ。
クリスマスまでにこいつはちゃんと動くのだろうか...。

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【4日目】クライアントサイドの環境構築【PythonでDiscordBOTを作ろう！】

# クライアントサイドの環境構築

*よきエディターはよき開発への第一歩
nattyan-tv (2020～2022)*

## エディター選び

もし、プログラミングをWordでやろうとしているのであれば今すぐにやめた方がいいです。
もちろん「Wordが最高のIDE」だと提唱する方もいらっしゃいますが...()

https://www.youtube.com/watch?v=X34ZmkeZDos

と、当然のように書いてしまいましたが`IDE`とは`Integrated Development Environment`（統合開発環境）の略で、プログラミングをするのに便利なエディターのことです。
**ここ！　テストに出ます！！！！**（いやマジで冗談抜きで()）
エディターには色々な種類のものがあります。
というわけで、一緒に自分に合うエディターを見ていきましょう。

### VSCode
本名を「Visual Studio Code」と言い、Microsoftが開発したエディターになります。
拡張機能を入れて便利にしていくタイプのエディターです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/2c58fb65-8bca-6880-8bbb-e50dad5fef0c.png)

こんな感じのエディターです。
GitHubとの連携が便利だったり、下からターミナル（PowerShell）を引っ張り出せたり、実行とデバッグが出来るのでよく使われてる便利なエディターです。

また、VSCodeにはWeb版もあり、外出先からでもプログラミングをすることが出来ます。
一応これは私のメインエディターです。

https://code.visualstudio.com/download

### Vim
ほぼ宗教みたいな感じですよねこれもう()

Vimとは、多くのLinuxマシンにビルトインされているテキストエディターです。
ヴィムと読みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/404eef1a-d169-080c-cbcc-f7020ecaae87.png)

カスタムスクリプトなどなど、拡張性も充実しており、シンタックスハイライトなども利用でき、またなにより多くのLinuxマシンにデフォルトで入っていることからよく使われています。
（ちなみに画面はなぜか色がつかなくてちょっと困ってる図）
また、Vimの画面上で分割表示が出来たり、コマンドを実行出来たり...なんか色々何でもできたり...とりあえずなんでもできますが、ちょっと初心者にはレベルが高いです。

Vimのカスタマイズ性は高く、いかようにもなります。
「Vim かっこいい」とでも調べればいくらでもかっこいいVimの画面が出てきます。

### nano
こいつは...エディター...？

こいつも、多くのLinuxにビルトインされているエディターです。
一応シンタックスハイライトなどもあるので、エディターとして使えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/57047659-cfae-1f0b-4824-04ac4239257a.png)

残念ながらmacOSでは`nano`ではなく`pico`が入ってます。
初見ではかなり面白いなと思いました。

これは、あくまでもちょっとコードを書くぐらいのエディターとなりそうですが、もちろん常用もできると思います。
私は、ほんとにちょっとコードを修正する時とかに使います。

### Sublime Text

名前好き。

GUIエディターの中では軽い方だと思います。
私のクソザコスペックノートPCでは、VSCodeは動きませんでしたが、Sublime Textは動きました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/2f7e47a9-6c28-ca6a-d1e8-c34da7644876.png)

Sublime Textでも拡張機能が使えたりします。
VSCode重いなーって人はぜひ使ってみてください。

https://www.sublimetext.com/3

### Emacs

GUI版もCUI版もある凄いエディター。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/9f9ee2e9-9637-dc1c-4a5b-681ea1b542f0.png)

初見ではなかなかに操作が分かりにくかったです。
ですが、使えてるとかっこいいですよ。...多分。

Emacsについては全然触らないんで分かりません。
~~分かる人に聞いてください。~~

### その他

秀丸エディタとかが有名なんでしょうか。
私は使ったこともないです。でもきっと有名なんでしょうね。

たくさんのエディターを触りましょう！
そして、自分に合うものを見つけましょう！

誤っても`notepad.exe`とか使わないでくださいね...？？？？

## ちょっと番外編

中にはパソコンでエディターを使わない人もいるでしょう。
私も、外出先での開発はiPadを使ってますし...
iPadでの開発はどうすればいいのか、私が少しだけ説明します。

### SSH Client

iPadにはいくらなんでもデフォルトでSSHクライアントは入ってません。（ショートカットの`SSH`は例外/macOS Mendocinoとかいう知らない子も例外）
なので、サードパーティーのSSHクライアントを入れる必要があります。

#### Termius
基本無料のSSHクライアントです。
SSHやSFTP、ポートホワーディングなどが出来ます。
とりあえずこれをiPadとiPhoneに入れておけばいいでしょう。

https://termius.com/

#### Blink
iPadでやってるなら本当におすすめのSSHクライアントです。
また、VSCode使いの人にも本当にお勧めしたいです。

Blinkを使えば、アプリ内でSFTP&VSCodeを使うことが出来ます。
これが大変便利です。
また、文字サイズも凄い自由にいじれたり...
とりあえず入れておいて損はないと思います。

https://blink.sh/

#### JucieSSH
Androidの方はこのJucieSSHを使うといいと思います。
大変便利でした。

https://juicessh.com/

# さぁ！　レッツ開発！

...明日から。

とりあえず、環境の構築は十分できたと思います。
あとは、実際にコードを書いていくだけです。
これからが本番ですよ！！！

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【3日目】サーバーサイドの環境構築②【PythonでDiscordBOTを作ろう！】

# サーバーサイドの環境構築

今日は、実際にサーバーサイドの環境構築を行っていきます。

サーバーサイドは、マシンが存在して、OSがすでにインストールされているものとします。

SSHを使って環境構築を行っていきます。

## Pythonのインストール

昨日の記事で記載したようにLinuxでの環境構築を想定しております。
Linuxでのインストールは各ディストリビューションのパッケージマネージャーを使用します。

```sh
# Debian派生
$ sudo apt-get install python3

# Red Hat派生
$ sudo yum install python3

# SUSE派生
$ sudo zypper install python3
```

これらのコマンドを使用することで~~きっと~~インストールできます。

(WindowsやmacOSであれば、[こちら](https://www.python.org)からPythonをダウンロード/インストールすることが出来ます。)

とりあえずインストール出来たら、ちゃんと動くか確認してみましょう。

```bash
$ python --version
Python 2.7.16
```

こんな感じに、Pythonのバージョンが表示されれば正常です。
ちなみに、これはRaspberryPiビルトインのPythonなので、バージョンが古いのです。

これから開発していくうえで使うPythonは`3.10`以上のものが必要です。

もし、私の環境のように複数バージョンのPythonがインストールされている場合は、`pythonXX`と指定することでバージョン指定が出来ます。

```bash
$ python3.10 --version
Python 3.10.0
```

こんな感じに。

以降は、（忘れなければ）`python`と書きますので、ご理解いただければ嬉しいです。

## プロジェクトの設定

とりあえず、これからBOTを作っていくフォルダーを作りましょう。
```sh
$ mkdir discord_bot
$ cd discord_bot
```
これで、`discord_bot`というフォルダーを作れました。
これからはここで作業をしていきます。

もし、Gitの設定をするのであれば、今のうちにしておきましょう。

さて、試しにファイルを作ってみましょう。

```sh
$ touch main.py
```

この拡張子`.py`がPythonのファイルとなります。
まずは、適当にコードを書きこんでみましょう。

echoでもnanoでもvimでもなに使ってもいいです。
```py
print('Hello')
```

っていう感じのコードを書きこみましょう。


```sh
# echo
$ echo "print('Hello')" > main.py
# nano
$ nano main.py
# vim
$ vim main.py
```

そしたら実行してみましょう。

```sh
$ python ./main.py
Hello
```

と、`Hello`という文字列が表示されれば成功です。

今回のコードの説明、すなわちPythonの書き方についてはもうちょっとだけ後で紹介します。

# ってなわけで...
ちゃんと`Hello`できたら成功です。

次は、クライアントサイドの開発環境構築をしていきましょう。
そうですね、エディターとかの話です。

自分に合うエディターを選べば、開発モチベも上がります。

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
【2日目】サーバーサイドの環境構築①【PythonでDiscordBOTを作ろう！】

# サーバーサイドの環境構築

今日は、サーバーサイドにおける環境構築の概要を説明していきます。

## マシン
Discordに限らず、BOTとかを動かすには**サーバー**が必要です。
サーバーにはVPSと呼ばれるようなレンタルサーバーや、自宅で動かす自宅サーバーがあります。
そして、ノートパソコンがあれば自宅でそれをサーバーとすることが出来ます。
ということで、今回は自宅サーバーを使ってBOTを動かしたいと思います。

## OS
サーバーにはOSが必要ですね...
WindowsやLinux、macOSなどいろいろな選択肢がありますが...
「サーバーといえばLinux」みたいな暗黙の了解があるので、今回はLinuxマシンを使ってBOTを動かしたいと思います。

## 言語
これからDiscordのBOTを動かすために、自分でプログラムを書いていきます。
プログラムといえども、色々な種類の言語があります。
CとかPythonとかJavaとかJavaScriptとかC#とか...なんか色々...

さて、この記事シリーズのタイトルにもあるように、今回は`Python`を使ってプログラムを書いていきます。
Pythonは、インタプリタ言語だのオブジェクト指向だの...色々な情報があります。
もちろんこんな情報は、プログラミングしていく上では正直どうでもいいと思います。
知りたい方はご自身でたくさん勉強してください...Wikipediaでも何でも見てください...

## SSHなどの設定
SSHとは、`Secure Shell`の略で、サーバーとかを遠隔操作するためのプロトコルで...ごにょごにょ...
とりあえず、設定しておけばサーバー機にHDMIを指さなくても、他のPCやiPadとかから遠隔操作をすることが出来ます。
ここら辺の設定はご自身にお任せしますので、ご自身が開発するうえで便利なようにお願いします。

https://hnavi.co.jp/knowledge/blog/ssh/

## GitHub
これは本当に任意での設定ですが、ちゃんと使うと便利です。
例えば、プログラムがミスって動かなくなっちゃったときに、前にどうなっていたかとかを確認できたりもすることが出来ます。

## ってなわけで...
実際の環境構築をやりましょう。...明日から！
...やっぱり、何をするにも適度に休まなきゃいけないですよね...()

まぁ、これぐらいの内容だったら毎日読んでも飽きないだろうというぐらいの分量で書いてます。
いや正確にはこれ以上やると私が読み飽きちゃうだろうというレベルで攻めてます()

というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
@DataJpaTestでJPAのレポジトリをテスト時、使えるDBについて

## インメモリDBを使用
メリットとしては以下の2点があげられます。
1. メモリで実行されるため、アプリケーションを再実行するたびにデータが初期化されること
2. 実際のDBをインストールせずに依存関係を追加ができること

@DataJpaTestに基本的に内蔵されているインメモリDBは`H2, HSQL, Derby`がありますが、
今回の記事では`H2`を使う方法についてご紹介します。
そのために以下の2点を設定し、テストコードを実行しましょう。
### H2の依存関係を追加
・Gradle
```
dependencies {
    testImplementation 'com.h2database:h2:2.1.214'
}
```
・Maven
```
<dependency>
    <groupId>org.hsqldb</groupId>
    <artifactId>hsqldb</artifactId>
    <version>2.7.1</version>
    <scope>test</scope>
</dependency>
```
他のバージョンは↓を参考にしてください。
https://mvnrepository.com/artifact/org.hsqldb/hsqldb
### schema.sql作成
`src/test/resources`の下にテーブルを定義した`schema.sql`を追加してください。
ちなみに作成したテーブルにデータを追加する際は`data.sql`を追加し、そこにinsert文を追記しましょう。
## 物理DBを使用
任意のDBを使用するためにテストクラスに
`@AutoConfigureTestDatabase(replace = AutoConfigureTestDatabase.Replace.NONE)`を付与します。
でなると、ご自身の`application.properties`に設定したPostgresql,MySQLなどの物理DBに対してレポジトリのテストを行います。
```
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
import org.springframework.boot.test.autoconfigure.jdbc.AutoConfigureTestDatabase;

@DataJpaTest
@AutoConfigureTestDatabase(replace = AutoConfigureTestDatabase.Replace.NONE)
public class WordsRepositoryTest {
}
```
【1日目】DiscordBOTとは？【PythonでDiscordBOTを作ろう！】

# はじめまして！
いい感じに寒い季節がやってきましたね。
ほんとに。
寒い季節には...そう！
**DiscordBOTが合いますね！！！**

というわけで、アドベントカレンダーをお借りして、12月の1か月間、DiscordBOTを1から作り始めるような記事を発信させていただきます！
この機会にDiscordBOTを作ってみたい方！　Pythonについて学んでみたい方！　
ひとつひとつの記事は、朝の通勤や通学の時間に読めるぐらい短い記事にしていく予定ですので、皆様と一緒に楽しめたら嬉しいです！

# DiscordBOTとは？

## Discordとは？

Discordとは、簡単に言えばグループ型SNSです！
近いもので言うとSlackやTeamsなんかがあります！

「サーバー」と呼ばれるグループを作って、そこに色々な人を招待していきます。
サーバーの中では「カテゴリ」「チャンネル」という風に細分化され、それぞれのチャンネルで会話をしたりします。

基本的にDiscordはゲーマー向けSNSとはなっておりますが、この便利さから企業なんかにもよく使われています！
さぁ、皆さんも使ってみましょう！

...まぁ使ってなかったらこの記事読んでないでしょうが...

## DiscordBOTとは？

皆さんは、Discordの中でこんなマークを目にしたことはないでしょうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/ad45fc3e-64f7-b91c-8f5e-fb6fa7358929.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/ebe35ce2-1b5d-4ee8-065d-cc37ce321ce7.png)
これは、そのユーザーがBOTであることを示すものです。
BOTとは、プログラムで動作しており、（基本的に）人が操作してメッセージを送信したりしていないもののことを指します。
DynoやProBot、FredBoatやcarl-botにMEE6、RTなんかが有名なDiscordBOTですね。

これらのBOTは、「ユーザーによる何かしらのインタラクション」を起点としてメッセージを返信したり色々な動作を行ったりします。
というわけで、このシリーズではこの「BOTというもの」を作成していきたいと思います。

BOTを自分で作ることが出来れば、自分で欲しい機能を誰かに頼むことなく自作したり、サーバーの専属便利BOTなんかを作ることが出来ます。

# つづく...
というわけで、今日の記事はここまでです。
もしよろしければ記事へのいいねをして、次回記事をお楽しみに！
Splunk: timechartコマンドの結果の日時情報の連続性をデータの範囲で維持する方法


###### 実施環境： Splunk Free 8.2.2

### やりたいこと

 _time フィールドはデータの日時情報を格納するフィールドです。
 SPL 実行で検索期間を指定する際も、この _time フィールドの値を参照して検索期間内かどうかを判定します。

そのためこのフィールドを書き換えることはあまりないのですが、それでも時々別のフィールド値で書き換えることがあります。

ここで timechart コマンドを使用した場合、以下のようにデータの日時情報が連続しない場合があります。

```Splunk:Splunk
index="_internal"
| eval _time = _indextime
| timechart span=1s count
```

![WS000351.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/73df764f-dea4-c517-0301-1d56693049ff.jpeg "timechart")

これは、 timechart コマンドが連続データを作成する範囲が検索時に指定した検索期間であるためです。
そのため、検索期間と結果の日時情報がずれると上画像の通りデータが飛んだり、逆にデータが存在しない範囲も連続データとして作られてしまうことがあります。

これを、ちょうど結果の日時情報に合わせた期間だけ連続させるにはどうすればよいでしょうか。

### 方法

答えは、「オプションの fixedrange を false にする」です。

```Splunk:Splunk
index="_internal"
| eval _time = _indextime
| timechart fixedrange=false span=1s count
```

![WS000354.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/9d7b58c2-a0e0-4972-42ae-0f58fd79c1fb.jpeg "fixedrange1")

![WS000353.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/ba3f2357-ea2c-211f-6bec-1fbff6383b5b.jpeg "fixedrange2")

このオプションは timechart の結果の連続箇所を検索期間に限定するオプションであり、デフォルトでは true になっています。
これを false にすることで、連続箇所を結果データの範囲に合わせることができます。
MediasiteAutoPlayerの使い方


## MediasiteAutoPlayerの使い方
こちらはmacOS用です。
## 1.ダウンロード/zipファイル解凍

まず送られてきたMediasite_AutoPlayer2022xxxx-2022xxxx.zipの使用期間が正しいか確認してください。讃岐先生は毎週リンクを変えるので、プログラムも毎週変わります。
ダウンロード後zipファイルを開くと自動的に解凍されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/34c909c3-5f88-55e2-c497-b20dccdd293f.jpeg
" width="50%">

## 2.ファイルパス取得

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/a69d6dd3-d1c1-4279-a683-ee2eb81e24d4.jpeg
" width="100%">


解凍されたたファイルを開くと写真のように４つのテキストが入ってます。その中のterminalMain.shってやつを右クリックしてください。そしたら写真のようになると思うんで、その状態でoptionキーを押してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/c1797e85-ecee-535f-d7a1-dfb5031defcd.jpeg
" width="100%">

"terminalMain.sh"のパス名をコピーが出てくると思うんでそれをクリックしてください。
## 3.ターミナル実行

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/ced4b485-165e-13a6-8713-2392218f999d.jpeg
" width="100%">


Finderの検索窓で「ターミナル」って検索するとこういう黒いやつが出てくるんでそれをクリックしてください。
で、出てきたやつの%のとなりにshって打って、一個英数字のスペースを押した後command+Vでパス名を貼り付けてください。

```shell:terminal
yamada@tarounoMacBook-Air ~ % sh /Users/yamada/Downloads/Mediasite_AutoPlayer2022X
XXX-2022XXXX/terminalMain.sh
```


コンソール画面はこんな感じになると思います。
そしたらEnterボタンを押してください。
## 4.コマンドライン・デベロッパーツールが入ってなかった人
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/3feb1237-ced7-3e23-e4c5-4bd66ad82276.jpeg
" width="50%">
こういうメッセージが出てきた人は、インストールしてあげてください。
Apple公式のものなので大丈夫です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/327eb12f-8f39-a6cf-1282-15094021352a.jpeg
" width="50%">
まあまあ時間かかります。許してください。
インストールが完了したら、3.で打ったsh+パス名のやつをもう一回打ってください。
## 5.UserID・パスワード登録
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916343/99db3a75-89b6-72e4-ab6b-1e6324aad43d.jpeg
" width="50%">
このようにいろいろ出てくると思うんで見守ってください。
一番下の行にUserID:と出てきたら、s20XXXXXのやつか0012020XXXXXXの１３桁のやつのどっちかを半角英数字で書いてEnter押してください。
Password:と出てきたら、manabaのパスワードを入れてEnter押してください。
## 6.自動動作確認

勝手にchromeでmanabaのログインが始まります。manabaのあの緑色のページが出てきたら2秒後に自動で閉じるので、自分でxボタンは押さないでください。
5.のID/パスワード入力は最初だけですが、この自動動作確認はターミナルで実行するたびに起こります。
## 7.２回目以降

ターミナルの実行が止まった時は、3.で書いたプログラムを書いてもらえればまた動きます。
yamada@tarounoMacBook-Air ~ %が出てこない場合は、ctrl+Cで出てくると思います。
## 8.注意点

ターミナルが動いてないとこのプログラムは動かないので、ターミナルのｘボタンは押さないでください。ーボタンは押してもらって大丈夫です。
同様に、自動で開いたchromeもｘボタンは押さないでください。ーボタンはおｋです。
また、実行時はmacbookを開いたまま充電コードに繋いでいてください。1週間ごとの更新なので、月曜日の朝実行してこのまま置いといたら金曜まで動いてくれることになります。


## 9.細かい話

読まなくても大丈夫です。

- このプログラムは授業開始の2分前に作動するので、それまでには実行しといてください。
- また１−２限で連続で授業があるときに、プログラム実行が１限のプログラム開始（8:38)に間に合わなかったら３限からしかプログラムは動かないので、２限は手動でお願いします。３−４限も同様です。
- UTID・パスワード登録時に間違えた場合は、zipファイルを解凍するところからやり直すか、guestInformation.txt内に直接ID/パスワードを記入（１行目がID,２行目がパスワード）を行ってください。
- セキュリティについてですが、登録したUTID・パスワードは暗号化されずにそのままスクリプト内に保存されます。なのでもしパソコンにウイルスが侵入してファイルが盗まれたらパスワードがバレるかもしれませんのでその点はご了承ください。なるべく早くハッシュ化などで暗号化しようと思います。
- UTID・パスワードは個人のパソコンにのみ保存されます。僕のとこにパスワードが送られてくることはないです。不安な方はmain.pyを見てそのようなプログラムが組まれていないことを確認してください。
Vue.js 入門 忘備録

# 概要
これからVue.jsを学習するにあたり、最初の取っ掛かり部分を備忘録として残しておきます。
同じく、これから新しくVue3を学習されていく方の取っ掛かりになると幸いです。

# Vue.js導入方法


# テンプレート
・view部分のことをさす。
・中でも「ルートテンプレート」とは、ルートとなるテンプレートのことをさす。
```html:HTML
<!-- ルートテンプレート -->
<div id="app"></div>
```

# マウント
・Vue.jsのインスタンスを生成し、テンプレートにマウントします。

```javascript:JavaScript
const app = Vue.createApp({
  // options
})
app.mount('#app')

// or

const app = Vue.createApp({
  // options
}).mount('#app')
```

# データバインディング
・データと描画を同期する仕組みのこと。
・下記例の場合、入力フォームの値を変更すると、自動的pタグ内の表示も切り替わります。
・とりわけ、View側とJS側双方向でデータが同期していることを「双方向データバインディング」といいます。
```html:HTML
<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
    message: 'Hello World'
  })
})
app.mount('#app')
```

# Mustache(マスタッシュ)構文
・{{}}で囲った構文のこと。
```html
<p>{{ message }}</p>
```

# ディレクティブ
・v-ではじまるもの。

## v-bind
・入力フォームの値(value)をバインディングする際に使用します。
  ※入力フォームの値(value)にはMustache構文は使用できないため、v-bindを使用します。
・下記例で、入力フォームの値(value)に「Hello World」と表示されます。
```html:HTML
<div id="app">
  <input type="text" v-model="message">
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
    message: 'Hello World'
  })
})
app.mount('#app')
```

## v-if
・条件分岐による要素の表示/表示切り替えが可能。
・JavaScriptの「isDisplay: true」を「isDisplay: false」に変更すると、Hellow Worldは非表示になります。
```html:HTML
<div id="app">
  <p v-if="isDisplay">Hello World</p>
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
    isDisplay: true
  })
})
app.mount('#app')
```

## f-for
・繰り返し描画が可能。
### 配列の描画サンプル
```html:HTML
<div id="app">
  <ul>
    <li v-for="fruit in fruits">
      {{ fruit }}
    </li>
  </ul>
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
    fruits: [
      'apple',
      'banana'
    ]
  })
})
app.mount('#app')
```

### オブジェクトの描画サンプル
```html:HTML
<div id="app">
  <ul>
    <li v-for="(value, key) in user">
      {{ key }}: {{ value }}
    </li>
  </ul>
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
    user: {
      firstName: Taro,
      lastName: Yamada,
      Age: 30
    }
  })
})
app.mount('#app')
```

## v-on
・イベント処理を実装可能。
```html:HTML
<div id="app">
  <button v-on:click="onClick">Click!</button>
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
  }),
  methos: {
    onClick: function(){
      console.log('Run onClick()!');
    }
  }
})
app.mount('#app')
```

# コンポーネント
・名前付きの再利用可能なインスタンス。
・ページを構成するUI部品で、テンプレートとそのロジックから構成される。
・よく使う機能をコンポーネント化して利用可能。
・下記例の場合、「sample-component」という名前でコンポーネントを作成。
  「Hello World」が2行描画される。
```html:HTML
<div id="app">
  <sample-component></sample-component>
  <sample-component></sample-component>
</div>
```
```javascript:JavaScript
const app = Vue.createApp({
  data: () => ({
  })
})
app.component('sample-component',{
  template; '<p>Hello World</p>'
})
app.mount('#app')
```
秋月電子で売ってるPICマイコンでMCCに対応しているもの

タイトルのまんまあですが、MCCでちゃちゃっと機能を追加してmainだけ編集して完成、
という開発スタイルが自分の中で定着してきたので、秋月で買えるMCC対応PICをリスト化しておこうと思いました。

こんなものをわざわざ記事化しようと思った背景にはこちらの記事の影響があります。
https://qiita.com/Potewo/items/4a15af87c87b0ed9a510
ちょっと調べれば分かるようなことをいちいち記事にしなくとも…と思わずにやっていこうかと。

ということで2022年11月6日現在の対応リストがこれです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/a6c9e947-7580-9c53-f559-cbbe25f664dd.png)

型番だけ列挙するとこれです。
PIC10F322-I/P,PIC10F322T-I/OT,PIC12F1501-I/P,PIC12F1501-I/SN,PIC12F1572-I/P,PIC12F1612-I/P,PIC12F1822-I/P,PIC12F1822-I/SN,PIC12F1840-E/P,PIC12F1840-I/P,PIC12LF1822-I/P,PIC16F1454-I/P,PIC16F1455-I/P,PIC16F1459-I/P,PIC16F1459T-I/SS,PIC16F1503-I/P,PIC16F1503T-I/SL,PIC16F1508-I/P,PIC16F1509-I/P,PIC16F15325-I/P,PIC16F1579-I/P,PIC16F1619-I/P,PIC16F1705-I/P,PIC16F1705T-I/SL,PIC16F1769-I/P,PIC16F1778-I/SP,PIC16F1779-I/P,PIC16F1783-I/SP,PIC16F1786-I/SP,PIC16F1788-I/SP,PIC16F1823-I/P,PIC16F1823T-I/SL,PIC16F1825-I/P,PIC16F1827-I/P,PIC16F1827T-I/SS,PIC16F1828-I/P,PIC16F1829-I/P,PIC16F1829T-I/SO,PIC16F18313-I/P,PIC16F18323-I/P,PIC16F18325-I/P,PIC16F18326-I/P,PIC16F18346-I/P,PIC16F18424-I/P,PIC16F18857-I/SP,PIC16F18857T-I/SO,PIC16F18877-I/P,PIC16F19155-I/SP,PIC16F1933-I/SP,PIC16F1933T-I/SO,PIC16F1936-I/SP,PIC16F1937-I/P,PIC16F1938-I/SP,PIC16F1938T-I/SO,PIC16F1939-I/P,PIC16F1939T-I/PT,PIC16LF1566-I/SP,PIC18F13K22-I/P,PIC18F13K50-I/P,PIC18F14K22-I/P,PIC18F14K50-I/P,PIC18F14K50T-I/SO,PIC18F14K50T-I/SS,PIC18F24K20-I/SP,PIC18F25K22-I/SP,PIC18F25K42-I/SP,PIC18F25K80-I/SP,PIC18F25Q10-I/SP,PIC18F26K22-I/SP,PIC18F26K80-I/SP,PIC18F26K83-I/SP,PIC18F26Q84-E/SP,PIC18F27J53-I/SP,PIC18F27Q43-I/SP,PIC18F45K20-I/P,PIC18F45K50-I/P,PIC18F46K22-I/P,PIC18F46K80-I/P,PIC18F47K42-I/P,PIC18F47Q10-I/P,PIC18F47Q43-I/P,PIC18F57Q43T-I/PT,PIC24FV32KA302-I/SP,

CSVファイルも置いておきます、と思ったらQiitaってファイル添付出来ないのね。
テキストデータくらい置かせてほしい。。


あとはデバイスのピン数とかROMサイズとかI2C対応してるかとかを追加できたらもっと使いやすくなりそうなので
その辺も時間があるときにやっていこうかと思います。
ファイルの置き場所を考えないとだなあ。
ラストのまほう　第8話『WASM-4で効果音を鳴らす』

そういえば無音だと少し寂しいので何かBGMを流したいです。あと、ジャンプしたときなどに効果音があるとゲームとして雰囲気が出てきそうな気がします。

筆者が以前ゲームを作っていたときは素材サイトからフリーの効果音を借りてきて使っていたのですが、WASM-4の場合はそういう現実の音を録音したサンプリング音源を流す機能はありません。ゲームボーイのような古いハードウェアは、サンプリング音源を乗せるメモリも無ければ、それを処理する強力な汎用CPUもありません。矩形波や三角波のような単純な波形を生成するサウンド専用ハードウェアを組み込んで、それを操作することで音を鳴らしていたらしいです。

WASM-4ではゲームボーイのサウンドを模したようなシンプルな機構があり、矩形波や三角波を音声として出力できるほか、ノイズを出力できます。矩形波はトランペットやエレキギターのような華やかではっきりした音が出ますし、三角波は比較的柔らかいストリングス系のような音がします。パーカッションにはノイズを流すといい感じになるみたいです。

# `tone`関数

WASM-4のサウンド関連の関数は、次の**tone関数1個だけ**です。シンプルってレベルじゃねーぞ！

```rust
tone (frequency: i32, duration: i32, volume: i32, flags: i32)
```

- `frequency` 周波数、つまり音の高さです。単位は hz.また、上位16ビットと下位16ビットで別々に指定することができ、連続的に変化させることができます。
- `durations` 音の長さ。単位はフレーム、つまり1/60秒。4ビットづつ、アタック、ディケイ、サスティン、リリースの長さを指定できます。
- `volume` 音の大きさ。0から100。上位16ビットと下位16ビットで、サスティンとピークを指定できます。つまり、音が立ち上がった瞬間の音量と、音を引き伸ばしているときの音量を指定できます
- `flags` チャンネル(0-3)とデューティ比(0-3)、パン(0-2)を指定するフラグ。チャンネルは 1:矩形波1、2:矩形波2、3:三角波、4:ノイズで、波形を指定します。デューティ比は簡単にいえば波形を変化させるもので、少し音質が変わります。パンは左右のどちらから音を出すかを指定します。

アタック、ディケイ、サスティン、リリースについては、WASM-4以外でもよく使われる一般的な仕組みです。このあたりの図を見るとわかりやすいです。

https://support.apple.com/ja-jp/guide/mainstage/lgsife419620/mac

波形とかデューティ比について細かく話し始めると、**ただでさえ過酷なひとりアドベントカレンダーが地獄になってしまう**ので割愛させていただきます。まあいろいろパラメータを変えると音質が変わるとだけ理解しておけばOKです。

# サウンドデモで音作り

理屈だけ頭に入れても、実際にどんな音がなるのかはやってみないとわかりません。あとは以下の公式デモでいろいろ試して好みの音を探っていくのが良さそうです。

https://wasm4.org/play/sound-demo

とりあえずジャンプの効果音をつけたいので、どうにかして「ぴょーん」という感じの効果音を作ってみます。筆者はもちろんこの種のサウンドプログラミングなどしたことがないので、勘で音を作ってみます。

なんか`FREQ1`より`FREQ2`を大きくして音程が上がる感じにして、`ATTACK`、`DECAY`、`SUSTEIN`はゼロにして、`Release`を短めにすることで素早く減衰する感じにしたら、ぴょーんという感じになりました。

![wasm4.org_play_sound-demo(iPad Air).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/781214cf-2c02-2f93-78d8-506cb80172a5.png)


# サウンドをコーディングする

サウンドデモのページのコメント欄に、デモと同じ入力項目のサウンドを作る関数をGoで書いてくれた兄貴がいたので、これをRustに移植して使います。

```rust
use crate::wasm4;

pub struct Sound {
    pub freq1: u32,
    pub freq2: u32,
    pub attack: u32,
    pub decay: u32,
    pub sustain: u32,
    pub release: u32,
    pub volume: u32,
    pub channel: u32,
    pub mode: u32,
}

pub fn play(sound: Sound) {
    let freq = sound.freq1 | sound.freq2 << 16;
    let duration = sound.attack << 24 | sound.decay << 16 | sound.sustain | sound.release << 8;
    let flags = sound.channel | sound.mode << 2;
    wasm4::tone(freq, duration, sound.volume, flags);
}
```

とはデモで作ったパラメータをそのまま設定すればOKです。

```rust
play(Sound {
    freq1: 490,
    freq2: 750,
    attack: 0,
    decay: 0,
    sustain: 0,
    release: 31,
    volume: 18,
    channel: 68,
    mode: 1,
})
```

これでぴょーんという音が鳴りました。簡単ですね。実際にどういう音になったかは、このゲームの最新のデモを見てください。

他にもいろいろ試してみました。

- チャンネルを３（ノイズ）にしてサスティンを10くらいまで下げ、周波数を100から1000まで一気に上げる→「ズシャッ！」という斬撃みたいな感じ
- チャンネルを３（ノイズ）にしてアタックやディケイを長めに取り、周波数を900くらいにする→「シャー……」という波打ち際の音みたいな感じ
- チャンネルを２（三角波）にして周波数を500から100くらいまでゆっくり下げると、「ヒューン」という落下音みたいな感じ
- チャンネルを３（ノイズ）にして周波数は100～200くらい、リリースだけを10くらいにすると、「ドッ」という衝突音みたいな感じ



# 参考文献

- https://wasm4.org/docs/guides/audio

# 次回予告

https://qiita.com/hiruberuto/items/7a5b96517d16d2bcb58e
入力された両隣のセルに自動で任意の値を入力してみた【GAS】

# 記事の目的
TODOリストを使ってタスクを管理している人は多いかと思われます。
僕もその一人で、スプレッドシートをGASを用いて作成したので、その過程で用いた入力されたセルの両隣に自動で任意の値を入力するやり方を紹介したいと思います。
(ちょっと何言ってるのかわからないかもしれないので、画像で説明)
下の画像は分かりにくいかもですが、Googleスプレッドシートの一部です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/a148ae6b-2652-ab91-faa7-27ed5db1327e.png" width=50%>
真ん中の列のセルにタスク名(今回は「タスク1」)を入力すると、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/b686e20e-fc8f-fd2a-a1d8-7a76aebaf97a.png" width=50%>
このように、タスク１の左のセルに入力した際の日付
右のセルにはプルダウン形式の「未着手」が自動で反映されます。
手入力すればいい話ですが、めんどくさがりなので自動化しました。
<br>
<font color="red">なお、「未着手」となっているプルダウンには「完了」と「未着手」の2つを設定しており、
スプレッドシートの上タブにある「表示形式」⇒「条件付き書式」を用いて「未着手」と選択された場合は赤色に、
「完了」と選択された場合は緑色にしています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/bcd871b0-4c09-b5ad-4720-0c1de5d9adb2.png"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/09ed282b-a2e7-27ff-d15f-260b0a964d1d.png" width=50%>
# 全体ソースコード
```javascript
function myFunction() {
 var sheet = SpreadsheetApp.getActiveSheet();
 var currentRow = sheet.getActiveCell().getRow();
 var currentCol = sheet.getActiveCell().getColumn();
 var updateRangeData = sheet.getRange('A' + currentRow);
 var updateRangeTask = sheet.getRange('C' + currentRow);

 if(currentRow > 1 && currentCol == 2){
   updateRangeData.setValue(new Date());
   updateRangeTask.setValue("未着手");
 }
} 
```
### 入力されたセルを取得
まずは、タスク名を入力したセルを取得します。
下記のプログラムで、選択されているセルの列を取得します。
```javascript
var currentRow = getActiveCell().getRow()
```
同様に行を取得する場合は下記のようにします。
```javascript
var currentCol = sheet.getActiveCell().getColumn();
```
### 入力された両隣のセルを取得
次に先ほど取得した入力されたセルの左隣のセルを取得します。
(下記のプログラムではA列を指定しています。)
currentRowには、入力されたセルの列数が入っています。
これで入力されたセルの列と同じ行を取得することが出来ます。
```javascript
var updateRangeData = sheet.getRange('A' + currentRow);
```
次に「未着手」を右隣(C列)に入れるため、そのセルを取得します。
```javascript
var updateRangeTask = sheet.getRange('C' + currentRow);
```
### 条件式
```javascript
if(currentRow > 1 && currentCol == 2)
```
上記の条件式は、1行目以降で条件を書いている理由は1行目には下図のようにタスクという項目名を入れているからです。2列目かどうかはB列の値かどうかを判定しています。
つまり、2行目以降のB列のセルが入力されたら～という条件式になります。
![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/50b86cf8-7a20-d4c7-bf01-1fa91564a78f.png)
### 任意の値をセルに入力
```javascript
   updateRangeData.setValue(new Date());
   updateRangeTask.setValue("未着手");
```
上記のプログラムにおける、setValueを用いて日付と「未着手」を入力しています。
new Data()で現在の日付を自動で取得してくれます。
「未着手」という文字列に関しては、プルダウン形式のセルでも問題なく入力されました。
## 最後に
こうして自分でTODOリストを作成すると、使いたくなりますよね(笑)
TODOリストの活用方法は人それぞれあると思うので、今後欲しい機能を見つけたら、どんどん機能追加していこうと思います。
とりあえずは、日付とタスクの状態を一目でわかる表が欲しかったので、大満足です。
お疲れ様でした！
超簡単！Railsでファビコンを設定してサイトをおしゃれにしよう

ファビコンを使って手軽にサイトをおしゃれにできたのでメモ感覚で投稿します。

# ファビコンとは？
検索したときのタブの左側にある小さなアイコンです！
手軽に作れてサイトを装飾できるのでとてもおすすめです！

# 実装
やることは２つだけ！
1  ファビコンを作成
2  HTMLファイルに記述　のみです！

# ファビコンを作成
私は以下のサイトを参照させていただきました

https://www.websiteplanet.com/ja/webtools/favicon-generator/

# HTMLファイルに記述

作成したアイコンを開発環境に保存した後に

``` application.html.erb
<head>
 #省略
  <%= favicon_link_tag('保存したアイコンのファイル名') %>
</head>
```
を記述
これだけでファビコンが表示されました！
ご参考になれば幸いです。
【Perl初学者】Perlの変数宣言

## 目次
- 変数宣言
- 変数の種類
- 変数の型
- 参考にした資料

## 変数宣言
Perlには変数を作るときに「今から作ります」と宣言する必要があります。

宣言方法は2つあり
「my」を使用するレキシカル変数、
「our」を使用するパッケージ変数

### レキシカル変数を宣言する時の例
```apple.pl
my $apple;
$apple =  = 'りんご';
```
変数宣言時に値を入れることもできる
```apple.pl
my $apple = 'りんご';
```

### パッケージ変数を宣言する時の例
```orange.pl
our $ORANGE = 'みかん';
# 変数宣言時に値を入れるパターン
our $ORANGE = 'みかん';
```
こちらは変数名を大文字にする御作法があるようですね。

### レキシカル変数とパッケージ変数
それぞれの変数宣言には特徴があります
* レキシカル変数
    * スコープ({}←これ)の中だけで使用できる変数。基本的に使う変数はレキシカル変数が多いと思っている
* パケージ変数
    * スコープ外でも使える、グローバル変数を採用
    * 呼び出す際は、print `$Foo::NUM;`のように宣言しているファイルと一緒に記述する
**完全修飾名**で記述する

# 変数の種類
### スカラー
`my $foo = 'scalar';`
1つの値を格納するために使用する変数
* 入れられるデータ
    * 文字列
    * 数値
    * リファレンス
    * 未定義(undef)
### 配列
`my @foo = ("one", 2, [3, 4, 5], {x => 6, y => 7}, sub { return 8 }, undef);`
入れられるデータはスカラ変数と一緒。リスト→()を必ずつける
ちなみに
`my @foo = ((1, 2), (3, 4));`を使用すると
`my @foo = ( 1, 2, 3, 4 );`と、配列の入れ子にはならないので注意
### ハッシュ
連想配列のことですね。入れるデータにキーと値を設定できます。
`my %foo = ('math' => 70, 'engligh' => 80);`
ハッシュを取り出す時は
`print $foo{'math'};`
というやり方です

# 参考にした資料
[Perlゼミ-変数](https://perlzemi.com/blog/20161107147852.html)
[bioinformatics](https://bi.biopapyrus.jp/perl/syntax/hash.html)
Wikidumpのハイパーグラフでの分析（導入編）


# はじめに
本記事は、ハイパーグラフの考え方をSQLで実現し・操作することを目的に記載しています。まずは、簡単な検索ができるところまで記載します。

ハイパーグラフについての情報は、Google検索しても多くは出てきません。Qiitaでも記事が一つあるだけです。Amazonで検索したところ、和書では壊滅、洋書でも多くはありませんでした。Wikipediaに記事があるようです。

[ハイパーグラフ（Wikipedia）](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%82%B0%E3%83%A9%E3%83%95)を読むと、ハイパーグラフは、グラフ理論を一般化したものらしく、集合論の用語を利用しているとのことです。

私が注目したのは、集合論だったら「SQLで操作できるのではないか」と考えました。

グラフ構造をライブラリで操作するのは、Python製ではNetworkXが有名と思います。データベースとしてはNeo4jが有名です。Neo4jだと独自のクエリ言語（CypherQL）を覚える必要があるという点で、少々の学習コストがかかってしまいます。

なお、SQLで扱うだけなら、ミック氏の書籍で「入れ子集合モデル」等が紹介されています。本記事では、PostgreSQLの配列型を用います。どちらがいいかは評価していません。
PostgreSQLを選んだのは筆者が得意という理由だけです。



# データ
利用するデータです。
[ノード（内容：コンテンツのタイトル、形式：csv、サイズ：5.3M）](https://hypergraph.jp/dl/title.csv)
[エッジ（内容：コンテンツのタグ、形式：csv、サイズ：158M）](https://hypergraph.jp/dl/tags.csv)

Wikidumpをベースに作成しています。本書執筆者が運用しているサイトで公開しています。無断で商用利用等は構いません。突如、停止したり、消したり、場所を変えたりするかもしれません。

ノードは、Wikipedia記事のタイトルです。

エッジは、Wikipedia記事に含んでいる、他のWikipedia記事へのリンクのアンカーです。


## インポート
以下のようなテーブルを作成します。

```sql:ddl.sql
CREATE TABLE t_wh_contents_title (
    id INTEGER
    , title TEXT
    , PRIMARY KEY(id)
);

CREATE TABLE t_wh_contents_tags (
    id INTEGER
    , tags TEXT[]
    , PRIMARY KEY(id)
);
CREATE INDEX ON t_wh_contents_tags USING GIN (tags);
```

t_wh_contents_titleにノードのCSVを、t_wh_contents_tagsにエッジのCSVをインポートします。

本旨とは関係ないですが、[GINインデックス](https://www.postgresql.jp/document/14/html/gin.html)は、Generalized Inverted Indexの略で汎用転置インデックス、と訳されています。情報検索の世界で多用します。




# 検索

簡単な検索を行います。私が好きな俳優の「妻夫木聡」さんと女優の「黒木華」さんをキーに検索します。このお二人をエッジとして検索します。

```sql
SELECT id, title
FROM t_wh_contents_title
    LEFT JOIN t_wh_contents_tags USING(id)
WHERE 
    ARRAY['妻夫木聡', '黒木華'] <@ tags
;
```

「<@」は、[配列演算子](https://www.postgresql.jp/document/14/html/functions-array.html)の一つです。

USINGはPostgreSQL独自だったと記憶していますが、idで連結しているだけです。


なお、検索結果は以下のようなものになります。

```
id	title
8147	日本アカデミー賞
8148	ブルーリボン賞 (映画)
44503	山田洋次
107510	金曜ドラマ (TBS)
132490	鶴瓶のスジナシ!
235262	おしゃれイズム
421938	世にも奇妙な物語の放映作品一覧
1986518	あさイチ
2032970	北九州市
2385792	小野寺修二
3493509	第29回東京国際映画祭
3539652	第40回日本アカデミー賞
3763518	ぼぎわんが、来る
4060860	日本のテレビドラマ一覧 (2020年代)
4238953	2021年のテレビドラマ (日本)
4290679	第44回日本アカデミー賞
171948	キネマ旬報
569632	高崎映画祭
740989	ドラマW
862307	エランドール賞
1177970	ヨコハマ映画祭
1747566	A-Studio
1858052	オールナイトニッポンGOLD
1934058	ザテレビジョンドラマアカデミー賞
2913853	第37回日本アカデミー賞
2944911	櫻井・有吉 THE夜会
3211234	バナナマンのせっかくグルメ!!
3395793	2016年のテレビドラマ (日本)
3740167	GALAC
4040477	浅田家!
67309	サントリー
417883	日本映画プロフェッショナル大賞
541839	日刊スポーツ映画大賞・石原裕次郎賞
659548	TAMA CINEMA FORUM
1360378	埼玉県を舞台とした作品一覧
1498861	しゃべくり007
1970520	日本のテレビドラマ一覧 (2010年代)
2868848	小さいおうち
3733730	Template:エランドール賞新人賞
4010370	第71回毎日映画コンクール
4020798	2020年のテレビドラマ (日本)
```
PlantUMLをVSCodeでプレビューできる環境を作る

PlantUMLをVSCodeでプレビューできる環境を作る。

この手順は、

- WSL環境を利用する。
- PlantUMLローカルサーバーの立ち上げはDockerを利用する。

## 環境
- Ubuntu 20.04 LTS (WSL2)
- Visual Studio Code 1.73.0
- Docker Desktop 4.13.1 (90346)

## 手順
### 1. PlantUMLサーバーの立ち上げ

以下を実行する。

```sh
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
```

### 2. VSCodeにPlantUMLプラグインをインストールする

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

### 3. VSCodeとPlantUMLサーバの紐づけ

`.vscode/settings.json`ファイルを作成し、以下のように記載する。

```json
{
    "plantuml.server": "http://localhost:8080",
    "plantuml.render": "PlantUMLServer"
}
```

### 4. VScodeでプレビュー

VSCodeで任意のPlantUMLファイルを開き、コマンドパレット(CTRL + SHIFT + P)から、[PlantUML: Preview Current Diagram]を選択する。

### 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198108/34c6e844-e347-f079-c26a-e1a7794d25dc.png)

以上

## 参考
VS CodeでPlantUML with WSL2

https://qiita.com/whim0321/items/84baa0e6fd9f4a05f0f2
ショートカットキーを使いこなせるようになる秘訣

# はじめに
* ショートカットキーを使いこなしている先輩にあこがれる
* でも、どうやったらできるようになる？
* じゃあ、この記事を読んでくれ！

# 秘訣「15分間、マウス操作を禁じる」
たった一つのことを守ってほしい。
それは、
* **15分間、マウス操作をしないこと**
* ただし、**ネットで検索するときは除く**
    * 慣れてきたら、ネット検索もすべてショートカットキーでできるぞ
* ブラウザで自分が今、しようと思った操作を**ネットで検索する**
    * 検索例：**「（自分がしようと思った操作）　ショートカットキー」**

すべてキーボードでやるようにしよう。以上だ。
# さあ、やってみよう！
後は、実践あるのみだ。
15分はあくまでも目安だ。5分からでもいいから始めてほしい。

# まとめ
15分間マウスを操作しない
↓
普段の業務をする
↓
マウスがないとできない
↓
でも、マウスは15分禁止されている
↓
ブラウザでショートカットキーを調べる
↓
少しずつできるようになる

**「継続は力なり」** あきらめず、そして楽しんでやってもらいたい。
ぜひ、**「これはゲームだ」** と思ってやってほしい。
Goコードのクラス図をPlantUMLファイルとして自動生成する


Goコードのクラス図をPlantUMLファイルとして自動生成する (Goにはクラスはないため、正確には「structの関係図をクラス図として表現したもの」である)。

## 環境
- Ubuntu 20.04 LTS (WSL2)
- Go 1.19.3

Goはインストール済みであるとする。

## ツールのインストール

```sh
# goplantumlのインストール
go install github.com/jfeliu007/goplantuml/cmd/goplantuml@latest
```

## 手順

```sh
# クラス定義作成対象のコードを準備 (ここでは、goplantuml自体を利用)
git clone https://github.com/jfeliu007/goplantuml.git input 

# plantuml用のファイルを生成
goplantuml -recursive ./input/parser > ./parser.puml
```

ここまでで、`parser.puml`としてPlantUMLのファイルが生成できた。

## PlantUMLのファイルをクラス図として描画する

簡単には、以下のような公式のWeb Serverを使うことでクラス図の画像にすることができる。

https://www.plantuml.com/plantuml

また、Visual Studio CodeのPlantUML拡張機能を利用することでプレビューすることもできる。

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

以上

## 参考
go のプロジェクトでクラス図を生成する

https://qiita.com/egawata/items/3e9095daa65dabcf6948

jfeliu007/goplantuml

https://github.com/jfeliu007/goplantuml/
【TidalCycles】TidalCyclesをダウングレードする

# はじめに

[TidalCycles公式のインストール方法](https://tidalcycles.org/docs/getting-started/macos_install)でインストールすると、2022年11月現在ではバージョン1.9.0以上のTidalCyclesがインストールされます。

ただバージョン1.9からはresetCycles関数の仕様が変わった([参考](https://club.tidalcycles.org/t/resetting-cycle-start/546/12))らしく、以前紹介した指定したサイクルに移動できるresetCyclesTo関数が定義できないようになっています。

https://qiita.com/s2hap/items/88ab4ebb45882f7b339d

そのため今回は、初回インストール後にTidalCylesをダウングレードする方法を備忘として残しておきます。

# 環境

M1 Mac mini (OS Monterey)

# 初回インストール

[公式のインストール方法](https://tidalcycles.org/docs/getting-started/macos_install)にもある通り、以下のコマンドのみでインストール可能です。

```zsh
curl https://raw.githubusercontent.com/tidalcycles/tidal-bootstrap/master/tidal-bootstrap.command -sSf | sh
```

# インストール後の作業

まずTidalCyclesの再インストールをするためにはghcupコマンドが使えるようになる必要があるため、下記を実行します

```zsh
. "$HOME/.ghcup/env"
echo '. $HOME/.ghcup/env' >> "$HOME/.zshrc"
```

実行後にcabalコマンドが使えるようになっていると思いますが、私の環境ではghcのバージョン9.4.2がインストールされていて、これではtidalの1.9以前をインストールできないようなので、まずこれを9.2.2にダウングレードします。

```zsh
ghcup install ghc 9.2.2 --force
ghcup set ghc 9.2.2
```

これでダウングレードする準備が整ったので、今回はTidalCyclesのバージョン1.7.10をインストールします。

```zsh
cabal install tidal-1.7.10
```

ghcのバージョン9.4.2が不要であれば、Macの場合は`~/.cabal/store/ghc-9.4.2/`がパスとなるはずなので、削除しておきます

```zsh
rm -rf '~/.cabal/store/ghc-9.4.2/'
```

# テスト


この状態でTidalCyclesとSuperDirtを起動し、以下のコマンドを順番に実行していきます


```haskell
import qualified Sound.Tidal.Tempo as T

resetCyclesTo n = T.changeTempo (sTempoMV tidal) (\t tempo -> tempo {T.atTime = t, T.atCycle = n})

do
  resetCyclesTo (0-0.05) -- 再生するサイクル数を変えたい場合はこの0の部分を変更
  d1
    $ s "bd hc hc hc"

```

うまくいけば、0サイクルから再生されるため実行直後に`bd`のバスドラが最初に再生されるはずです。



# 追記

tidalの1.8以降では、以下のようにresetCyclesTo関数を定義できます

```haskell
streamResetCyclesTo s n = streamSetCycle s n

resetCyclesTo n = streamResetCyclesTo tidal (n+1)

resetCyclesTo (-0.05)
```
【色変記事】AtCoder始めて入茶まで

## 自己紹介
初めまして、dirardと申します。
普段は都内の企業でエンジニアとして働いております。
業務ではPythonを使うことが多いですが、使えるとかっこ良さそう！！という理由だけでAtCoderではC++を使っています。
今回はAtCoderという競技プログラミングのコンテスト(ABC, AtCoder Biginner Contest)に参加して入茶するまでにしてきたことを備忘録がてらまとめてみようと思います。

※調子にのって蟻本を買うも1日で挫折した経験あり…。

## 開始時期～色変時期
* 開始時期：2022/9/10のABC268
* 入茶時期：2022/11/5のABC276

開始してから毎週欠かさずABCに参加して、9回目で入茶に成功！(正直もっとかかると思っていました)
![スクリーンショット 2022-11-06 114933.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594896/f5b79ef8-0e6b-caad-7db2-821e64f3286b.png)

## やったこと
私は業務でプログラムを書いてはいますが、始めるまでは
* 競プロってなんやねん！
* どうせ業務で使わなさそう…。
* 凡人には楽しむ余地もなさそう…。
* 始めるにしてもなにからやればよいのかさっぱりわからない…。

と思っていました。

そんな時、Amazonのおすすめ商品に『問題解決のための「アルゴリズム×数学」が基礎からしっかり身につく本』が出てきました。
![画像](https://m.media-amazon.com/images/I/51Q+KKW3EyL._SX394_BO1,204,203,200_.jpg)
[Amazon](https://www.amazon.co.jp/%E5%95%8F%E9%A1%8C%E8%A7%A3%E6%B1%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%80%8C%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%C3%97%E6%95%B0%E5%AD%A6%E3%80%8D%E3%81%8C%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%E6%9C%AC-%E7%B1%B3%E7%94%B0-%E5%84%AA%E5%B3%BB/dp/4297125218) 

難しいアルゴリズムはさっぱりわかっていませんでしたが、試し読みで分かりやすそうだったし興味はあったので購入！

読み始めたのは2022/8末頃だったかと思います。
数学は学生時代に多少触れていたこともあり特に詰まらず読み進められました。アルゴリズムに関してもわかりやすい図があり理解することができました。
本も読んだしコンテストにも参加してみるか～と思い参加したデビュー戦(ABC268)、結果はAB2完のperf266…ムズイ…C問題わからない…でした。

戦うためにはまだ強くならねば…何をしようか…と思っていた時に現れたのが、『競技プログラミングの鉄則 ~アルゴリズム力と思考力を高める77の技術~』でした。

![画像](https://m.media-amazon.com/images/I/51vxPGkskeL._SX387_BO1,204,203,200_.jpg)
[Amazon](https://www.amazon.co.jp/%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E9%89%84%E5%89%87-%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E5%8A%9B%E3%81%A8%E6%80%9D%E8%80%83%E5%8A%9B%E3%82%92%E9%AB%98%E3%82%81%E3%82%8B77%E3%81%AE%E6%8A%80%E8%A1%93-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E7%B1%B3%E7%94%B0/dp/483997750X/ref=pd_lpo_3?pd_rd_w=Siy9U&content-id=amzn1.sym.d769922e-188a-40cc-a180-3315f856e8d6&pf_rd_p=d769922e-188a-40cc-a180-3315f856e8d6&pf_rd_r=RYJJ5GVFP7VA1SEDRN4F&pd_rd_wg=TMHxp&pd_rd_r=1df544f5-e822-4924-a5c1-a9dfbc038fa6&pd_rd_i=483997750X&psc=1)

この本は『問題解決のための「アルゴリズム×数学」が基礎からしっかり身につく本』と同じ著者により2022/9/16に出版された新しい激熱な本です。
前著で分かりやすいのは知っていたので、Amazonで即予約！(結局は発送が遅れそうだったので書店でGet！)

この本は問題→解説→コード(解答例)という流れが繰り返されており、一話完結の物語のように隙間にちょこちょこ読むことができました。(必要なところのみ読むということもしやすい)

この本(鉄則本)を始めてから、アルゴリズム・計算量・競プロにおける数学的考察について真面目に考えられるようになった気がします。
全くの初心者状態で鉄則本は個人的にはハードルが高いので前著を読んでから鉄則本に出合えてよかったと思います。
以下はAtCoder ProblemsのDaily Effortですが、ほぼ過去問は解くことなく(ABSの10問は解きました)茶色まで到達することができました。

![スクリーンショット 2022-11-06 114838.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594896/4854e723-b2b4-0761-5b81-c984b6f4c0e9.png)

## まとめ
* 全くの初心者→アルゴ数学本で雰囲気を知る
* 鉄則本でアルゴリズムにちょっと深く触れる
* 毎日コツコツ頑張る
* 毎週ABCに参加する
* 上記で入茶は可能
* ABSくらいは触れておいて損はない

私自身は次は入緑目指して頑張っていこうと思います！
拙い文章で恐縮ですが読んでいただけた方ありがとうございました。

競プロerの知り合い等いないので仲良くしてくださる方がいらっしゃると泣いて喜びます。
Laravel コレクション型のmapとpluckはどちらが早いのか

## 概要
Laravelで特定のコレクション型の変数から「idがkeyで名前がvalueの値を抽出したい」というケースがありました。

その時に`map`と`pluck`で両方の書き方がある（厳密にいうと全く同じ形式の値にはならないが、その後の使い方は似ることが多い）が、どちらの方がパフォーマンス的には良いのか疑問に思ったので検証してみました。


## 検証方法
・測定する項目は「メモリ使用量」と「処理時間」とする。
・対象のコレクション型の変数は100個のオブジェクトが入っているものを使用する。
・10回の測定を終えて、それぞれの平均値を比較する。

## 対象データの例
今回使用するのは下記のようなオブジェクトが100個ほどあるコレクション型の値である。
そこから「idがkeyで名前がvalueの値を抽出したい」というケースを実践する。
```
{
    "id":1,
    "name":"hogehoge",
    "birthday":"2022-11-05",
    "department":"Sales"
}
```

## 関数それぞれの使い方
```php:map
$fuga = $hoge->map(function ($value) {
    return [$value['id'] => $value['name']];
});
```

```php:pluck
$fuga = $hoge->pluck('name', 'id');
```

## 結果
|  関数名  |  メモリ使用量(MB)  |  [平均値] 処理速度（秒）  |
| ---- | ---- | ---- |
|  map  |  0.108...  |  0.001070356369  |
|  pluck  | 0.073...   | 0.001692199707   |

## 計測データ
|  [n回目]  |  関数名  |  処理時間（秒）  |
| ---- | ---- | ---- |
|  1  |  map  | 0.0026521682739258   |
|  1  |  pluck  | 0.0014410018920898　|
|  2  |  map      | 0.00081801414489746   |
|  2  |  pluck      |  0.0017158985137939  |
|  3  |  map      |  0.00068807601928711  |
|  3  |  pluck      |  0.0018410682678223  |
|  4  |  map      |  0.0010271072387695  |
|  4  |  pluck     | 0.002047061920166   |
|  5  |  map      |  0.00060510635375977  |
|  5  |  pluck      | 0.0014269351959229   |
|  6  |  map      | 0.00087904930114746   |
|  6  |  pluck      | 0.0018661022186279   |
|  7  |  map      |  0.00098681449890137  |
|  7  |  pluck      | 0.0016438961029053   |
|  8  |  map      |  0.0010371208190918   |
|  8  |  pluck      |  0.0013530254364014  |
|  9  |  map      |  0.00086712837219238  |
|  9  |  pluck      | 0.0017991065979004   |
|  10  |  map      |  0.0011429786682129  |
|  10  |  pluck      |  0.0017879009246826  |


## まとめ
Laravelで特定の値から「idだけ抽出したコレクション型の値を作りたい」「idがkeyで名前がvalueの値を抽出したい」などのケースにおいて、

処理速度ではmapの方が速そうだが、メモリ使用量ではpluckの方が優った。
結局、どっちを使ったら良いかはケースバイケースですね。
学会等のスライド作成の要点まとめ

本文は[こちらのサイト][url1]を簡潔にまとめた備忘録となります。
# 読みやすく
読みやすさ、認識しやすさ、誤読の少なさに気を付ける

 - 単位(ex.年、m/s...)は小さく
 
 - 和文は全角
     - 「（）」や「、」や「，」等

 - <font color="Red">()よりも|を使う</font>
     - 方法（定量的な評価）→　方法｜定量的な評価
    
 - 「!」、「?」は半角の方が良い場合がある
     - 頑張れ！！ → 頑張れ!!
     
 - <font color="Red">「:」はみずらいため、使わない</font>
     - 「／」や「｜」で代用する

# 見やすく
スライドを見た瞬間に内容や状況が把握できるようにする。

 - 表について
     - 線を減らして、行間を広げる
     - <font color="Red">項目名の欄は色を付けてもよい</font>
     - 情報が多い場合はストライプを付ける
    
 - 図について
     - 色覚バリアフリーも考慮する
     - 範囲や軸のメモリはデータに合わせる
     - 凡例(図中でも可)と軸の名前は必須
     - 円グラフの場合は、同じ色相の色の濃淡で各とよい
         - 凡例は円グラフ上で色は適宜
       
 - 画像について
     - 解像度不足に注意
     - 画像サイズは同じ大きさ
     - <font color="Red">引き出し曲線は補足、角度を揃える</font>
 
 - 図解と描画
     - 文章はなるべく図解で表現
     - <font color="Red">図形の塗りと枠線は片方のみ(図形内にテキストを入れる際)</font>
     - 異なる形の図形を使いすぎず、長方形を主に使う
     - 図形の形を歪ませず、統一性をだす
     - 矢印は控えめで良い
    
 - レイアウト
     - 余白をしっかりとる
     - <font color="Red">図形内テキストは枠と文字を別で作る</font>
     - 揃える
     - タイトルより上には内容を書かない
     - <font color="Red">図の背景に色を付けると見やすいこともある</font>
     - 内容に沿ったグループ化(ex.色、位置、スペース...)をする
     - 全体を通して同じ位置に繰り返し配置をする
     
 - 配色
     - 彩度、明度は低いものを使用
     - 色にも印象があり、使用を分けるべし(これ難しい...)
     - 同系色や灰色を使い、色を<font color="Red">4色以上使わない</font>
         - ex.背景=白、メイン=青、文字=黒、強調=オレンジ
# バリアフリー
多くの人に見やすい資料を作成するための考慮するべきポイント

 - 配色のユニバーサルデザイン
     - 色だけでなく、下線等も用いる
     - <font color="Red">色に頼りすぎない</font>(デザインを変えたり、、、)
     - グレーを使う
     - 真っ白の背景はかえって見ずらいかも、、、？
    
 - 文章のバリアフリー
     - 文章は短く、重要なところは強調する
     - 行間をゆったり
     - 文字は太めに
     


[url1]: https://tsutawarudesign.com/