OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio Codeで「拡張子を指定してエンコードを設定」しているのに上手くいかないとき確認する箇所

# はしがき
近頃は大体UTF-8で何でもイケる時代になりましたが、それでもWindows環境で作業をしているとShift-Jis(CP932)から逃れることはまだ出来ないわけです。特に古いコードなんかいじってると「これコメント化けてるじゃん」みたいなことになりがち。そこで先人達は「Visual Studio Codeに特定の拡張子の場合のエンコーディングを指定しよう」と設定をする方法を指南してくれているわけです。

* [Visual Studio CODEで拡張子ごとにdefaultの文字コードを設定する (ぺんちゃん日記)](https://yasushiito.hatenablog.com/entry/2019/04/15/190940)
* [VSCode 拡張子に応じてエンコードを設定する方法(lisz-works)](https://www.lisz-works.com/entry/vscode-ext-encoding)

ところがどっこい「この設定をしても上手いこと行かねぇぞ💢」となったので原因と対策をまとめておきます。

# 原因
```"files.autoGuessEncoding": true```が各拡張子の設定よりも前にあると自動推測モードが優先されちゃう。

# 対策
各拡張子のエンコード設定の後に```"files.autoGuessEncoding": true```を持ってきてやる。

# 例
それでは具体例を挙げてどうすれば良いか見ていきましょう。

## ダメパターン
この順番で記述すると、```autoGuessEncoding```が優先して動いちゃうので後ろの各拡張子の設定が効かない。

```json
{
    "files.autoGuessEncoding": true,
    "[bas]":
    {
        "files.encoding": "shiftjis"
    },
    "[frm]":
    {
        "files.encoding": "shiftjis"
    },
    "[bat]":
    {
        "files.encoding": "shiftjis"
    }
}
```

## OKパターン
ですので、```files.autoGuessEncoding```の設定を後ろに持ってくる。
本例だと

* ```.bas```(VB6.0の基本ファイル)、
* ```.frm```(VB6.0のフォームプログラムファイル)、
* ```.bat```(Windowsのバッチファイル)

はShift-Jisで開いて欲しいので```"files.encoding": "shiftjis"```と設定しています。

```json
{
    "[bas]":
    {
        "files.encoding": "shiftjis"
    },
    "[frm]":
    {
        "files.encoding": "shiftjis"
    },
    "[bat]":
    {
        "files.encoding": "shiftjis"
    },
    "files.autoGuessEncoding": true
}
```

# 終わりに
気づいてしまえばなんてこと無い話ですが、意外とポンコツな一面もあるVisual Studio Code。
それでも良い物なのは確かですのでこれからも使っていきたいと思います。
0歳の俺がモダンJavaScriptを勉強する③

こんにちは！
今日もモダンJavaScriptについて学んだことをアウトプットしていきたいと思います。

# mapやfilterを使った配列の処理

## 従来の処理

```javascript
const specialSkills = ['無量空処', '自閉円頓裹', '嵌合暗翳庭', '伏魔御厨子', '蓋棺鉄囲山'];
for (let index = 0; index < specialSkills.length; index++){
  console.log(specialSkills[index]);
};
```

![スクリーンショット 2021-10-31 11.11.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/3889ac66-206c-50cf-d14e-f90e514cacff.png)


配列の中の要素を取得したり、表示させたい時は従来ではfor文を利用していました。

 ##　mapを利用した配列の処理

```javascript
const specialSkills = ['無量空処', '自閉円頓裹', '嵌合暗翳庭', '伏魔御厨子', '蓋棺鉄囲山'];
specialSkills.map((specialSkill)　=> console.log(specialSkill));
```

mapはアロー関数を利用して、引数の中に配列の一つ一つの要素を取得することができます。
アロー関数で記述を省略ができるので、for文で配列を処理するよりも構文がスッキリしましたね。

Rubyでもmapメソッドってあるので、使ってみました。

```ruby
specialSkills = ['無量空処', '自閉円頓裹', '嵌合暗翳庭', '伏魔御厨子', '蓋棺鉄囲山']
specialSkills.map{|specialSkill| puts specialSkill}
```

![スクリーンショット 2021-10-31 11.29.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/011b59b6-0986-f69c-8165-0a150339f311.png)

irbで試してみるとうまく出力されました！！
僕、Rubyのmapメソッドってpaizaのスキルチェックでしか使ったことないんですよね。
しかも入力された値を数値に変える時だけ使ってました。
モダンJavaScriptを学習する中で、Rubyのメソッドと関連付けて学習ができているので非常に楽しいです。

##filterを使った配列の処理

```javascript
const numbers = [1,2,3,4,5];
const newNumbers = numbers.filter((number) => {
  return number % 2 === 1;
})
console.log(newNumbers);
```

filterは条件に合致したものを処理することができます。
上記の例だと、newNumbersと言う配列を新しく用意しnumbersの中で奇数のものだけをnewNumbersに格納していきます。

![スクリーンショット 2021-10-31 11.41.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/54842e0a-3f10-f831-a4e4-a1a4bdfe8e81.png)


# 三項演算子

三項演算子は別にES2015で追加されたものでもないらしいですが、Reactでよく使うそうなので学習していきたいと思います！

```javascript
const num = 1 < 0 ? 'trueです': 'falseです'; 
console.log(num)
```
出力結果
![スクリーンショット 2021-11-02 10.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/7873515c-0cf7-d368-bd8d-4185e7ea107b.png)

*条件式　? trueの処理: falseの処理;*
と書くことでif、elseみたいなことを1行にまとめれるので便利ですね。


次は関数内で三項演算子を利用する方法です。
メッシのあるシーズンの記録です。メッシはリーグ戦とカップ戦の合計が70得点以上だとtrueの処理をして、70以下だとfalseの処理を返します。
まあ、あのレベルの相手に対してシーズン通して70得点取るとかバケモン以外無理ですからね。
流石のメッシでも無理でしょ。

```javascript
const messiScore = (reague, cup) => {
  return reague + cup > 70 ? 'メッシ気持ちいい〜〜':'不調のメッシです';
}

console.log(messiScore(50,23));
```

出力結果

![スクリーンショット 2021-11-02 10.58.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/ec26f138-2a25-4765-bc6d-dd5af919c06b.png)

メッシすげえ‥。
実際2011-2012シーズン（バルセロナの時）のメッシは73得点とってました‥。
もうこんな選手現れないんでしょうねえ。。。
【備忘録】10年前のサーバーをPCとしてきちんと動かせるようになるまで

## ことの始まり
友人とminecraftで遊ぼうと思い、サーバー運用の勉強も兼ねて物理サーバーを見切り発車で購入。
そののち、利用しているプロバイダの固定IPサービス料金がバカ高いことがわかり、VPS使ったほうがまだ安いという結論に至ってしまったため、購入した物理サーバーの使いみちがなくなってしまった。
そこで、PCいじりの勉強のため、ふつうのPCとして動かそうと考えた。

## 購入したサーバと、追加購入したPCパーツ
* PC
    * Express 5800 gt110e
        * ヤフオクで購入したジャンクなのでHDDなし
* HDD
    * HITACHI製の1TB 3.5inch HDD
* Graphic Card
    * GTX650
        * ヤフオクで購入したジャンク
        * 接続まわりに動作異常あり

## つまったところ
### ubuntuインストールしようとしたらパーティションに設定できない！
どうやら先にRAIDの設定を入れてしまうとubuntuでインストールできないらしい。なんで？
RAIDの設定を初期化→ubuntuインストール→RAID再設定と進んだらうまく行った。

### ubuntuが起動するまでは行ったのに、ログイン画面が出ない！
GTX650は最新のnvidiaドライバと相性が悪いのかなんなのか、正常に動作してくれないらしい。
古いドライバをインストールする必要あり。

Ctrl + Alt + F1 でコマンドラインを表示し、インストール時に設定したアカウントでログイン

``` sh
# nvidiaのドライバをインストール
sudo apt install nvidia-384

# ubuntuを更新、ubuntu-desktopの再インストール
sudo apt -f install
sudo apt upgrade
sudo apt dist-upgrade
sudo apt install --reinstall ubuntu-desktop
sudo apt autoremove
sudo apt clean
```

## さらなる改修と失敗

HDDがひたすらガリガリと音を立ててやかましかったのと、マイクラなどを起動するとたまにフリーズするのでメモリとHDDを交換してみることに
Amazonが信頼できなくなったのでTSUKUMOで購入

* SSD
    * CrucialのSSD
        * https://shop.tsukumo.co.jp/goods/0649528788238/
* メモリ
    * Panram社のDDR3-1600
        * https://shop.tsukumo.co.jp/goods/4988755012690/

メモリを刺してみたところ、けたたましく鳴るヒープ音…。
もともとのメモリを刺したら復活したので、おそらくメモリが対応していない？
仕様書を見る限り、規格に違いはなさそうなのだが…。刺す場所変えたりしてもだめだったので断念。

SSDはデータの引っ越しなどを行わず、ささっとインストールからやり直す方針で、なんとかうまくいった。
HDDから大きく性能を引き上げることができたが、メモリが結局６GBのままなのでちょっと不安。
Firebase Authenticationでアカウントが作成出来ないときの原因はこれかも？...

#はじめに
躓いた人のための、軽いメモ用に書くので、そもそも「Firebase Authenticationが何か」などは説明しません。要点絞って説明します。

##開発環境
Android Studio(Java)

##僕が躓いたところ
Firebase Authenticationの「メール/パスワード認証」で躓きました。(詳しいコードは下をご覧ください。)

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

下の画像のようにパスワードを適当に設定して、アカウントを作ろうとしても、はじかれました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1925070/ce499d11-546f-d890-85c1-89de4329c34c.png"width="350px">

##解決法
どうやら、認証のときのパスワードは「6文字以上」でないと、いけないみたいです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1925070/df5b1e64-65cd-2c31-3ccf-836e34710f94.png"width="350px">

このように6文字以上にすると、認証出来ました。

##結論
パスワードは6文字以上にしよう！
入力した一年後の日付を別のフィールドに自動入力する

やりたいこと：date_fieldに入力した値から一年マイナス1日の日付を別のdate_fieldに自動表示させる。
Ex applied_date columnに2021-01-01と入力したなら
   expired_date columnに2022-12-31と自動表示させる。


```ruby:qiita.js
$(document).ready(() => {
  var applied = document.getElementById("applied_date");
  applied.addEventListener("change", (event) => { 
    var appliedDateInput = new Date(event.target.value);
    appliedDateInput.setFullYear(appliedDateInput.getFullYear()+1);
    appliedDateInput.setDate(appliedDateInput.getDate() - 1);
    var expiredDateInput = document.getElementById("expired_date");
    expiredDateInput.value = appliedDateInput.toISOString().substring(0,10);
  })
})
```
Try adding an explicit type, or remove implicit-dynamic from your analysis options file.の対処法

deeplで翻訳すると明示的な型を追加するか、解析オプションファイルからimplicit-dynamicを削除してみてください。

基本は型を最後までしっかり明示すると治った。ex ListではなくList<クラス名>まで記載しよう

## ダメな例

```dart
import 'dart:async';
import 'dart:math';

import 'package:camera_platform_interface/camera_platform_interface.dart';
import 'package:camera_platform_interface/src/events/device_event.dart';
import 'package:camera_platform_interface/src/method_channel/method_channel_camera.dart';
import 'package:camera_platform_interface/src/types/exposure_mode.dart';
import 'package:camera_platform_interface/src/types/focus_mode.dart';
import 'package:camera_platform_interface/src/types/image_format_group.dart';
import 'package:cross_file/cross_file.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

List get mockAvailableCameras => [ // エラー原因✨
  CameraDescription(
      name: 'camBack',
      lensDirection: CameraLensDirection.back,
      sensorOrientation: 90),
  CameraDescription(
      name: 'camFront',
      lensDirection: CameraLensDirection.front,
      sensorOrientation: 180),
];

```

これだとタイトルのエラーが発生

## 良い例

```dart
import 'dart:async';
import 'dart:math';

import 'package:camera_platform_interface/camera_platform_interface.dart';
import 'package:camera_platform_interface/src/events/device_event.dart';
import 'package:camera_platform_interface/src/method_channel/method_channel_camera.dart';
import 'package:camera_platform_interface/src/types/exposure_mode.dart';
import 'package:camera_platform_interface/src/types/focus_mode.dart';
import 'package:camera_platform_interface/src/types/image_format_group.dart';
import 'package:cross_file/cross_file.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

List<CameraDescription> get mockAvailableCameras => [ // ここ✨
  CameraDescription(
      name: 'camBack',
      lensDirection: CameraLensDirection.back,
      sensorOrientation: 90),
  CameraDescription(
      name: 'camFront',
      lensDirection: CameraLensDirection.front,
      sensorOrientation: 180),
];
```

特にnull-safetyが導入されたdart2.0から結構このエラーが頻発するようになったので気をつける。
もし補足や間違った点があったら教えてください。お願いします！
ESP32とTello EDUを使ってTCASをドローンに移植する

##はじめに
チーム課題を大学の授業において課されたので、ESP32とTello EDUを使ってTCASをドローンに移植するというテーマを行うこととなった。その参考として本記事を作成する。備忘録的な感じで。

##環境
ドローン:Tello EDU
マイコン:ESP32-DevKitC-32D
GPSモジュール:GYSFDMAXB(秋月電子通商)

##目標
TCASの実装が第一目標。具体的には、複数台のドローンが接近した状況で操縦制御に介入し、自動的に衝突回避操作を行うこと。学校の許可得たのちに、安全に充分配慮し実験を行う予定。

##ESP32について
ESP32を一言で表すと、Arduinoの派生版。基本的にArduinoにはWi-FiとBluetoothを搭載していないが、ESP32はこれらを搭載している。また、今回使用しているESP32-DevKitC-32Dは、簡単に開発が行えるようにいろいろな部品がくっついたもの。具体的には、MicroUSBでPCと接続を行い適切な通信を行うことで簡単にファイルをESP32に書き込み、実行することができる。初期状態ではC/C++に似たArduinoの開発言語に対応しているが、本環境ではMicroPythonに対応させるために必要なプログラムを書き込み、MicroPythonが実装できるようにしてある。

##ESP32でプログラムを実行するまでの手順
ESP32でプログラム(MicroPython)を実行するためには、
1.MicroPythonでプログラムを書く
2.ampyを使ってファイルをESP32を転送する
3.PCからシリアル通信を行うコマンドを用いてESP32と接続、コード実行の必要があれば対話環境で実行する
以上の手順となる。

1から順に解説する。
初めに、MicroPython(.py)でコードを記述する。MicroPythonについては、以下のサイトが参考になる。
今回は例として、ESP32に接続したLEDを点滅させるコードを記述した。

```Python:blink.py
import time
from machine import Pin

led = Pin(27, Pin.OUT)

def run():
    for i in range(10):
        led.value(1)
        time.sleep(1)
        led.value(0)
        time.sleep(1)
```

次に、作成したファイルをESP32に転送を行う。
まず、自身の環境にampyをインストールする。

Mac OSでの例

```vsh:
$ pip install adafruit-ampy
```

次に、PCとESP32を接続しているポートを調べる。筆者の環境では、USBポートによってポートの名称が変わるので、その都度調べるか常に決まったポートを使い続けるのが良いだろう。

Mac OSでの例

```vsh:
 % ls -l /dev/tty.*
crw-rw-rw-  1 root  wheel    9,   6 11  6 01:32 /dev/tty.usbserial-14220
```

この、「/dev/tty.usbserial-14220」がポートの名称である。

Windowsでの例
デバイスマネージャーを開き、そこから接続されているポートを調べる。どうやらCOM*と出るらしい。

ここまでできればあとは転送を行うのみである。

```vsh:
% ampy -p /dev/tty.usbserial-14220 put ./ESP32/blink.py
```

これは、上で調べて判明したポートに対して現在のディレクトリ下のESP32ディレクトリ下のblink.pyというファイルをESP32に転送している。
何もエラーが出てこなければ正常である。
次に、このコマンドをPythonの対話環境で実行する。まず、ESP32と通信しコマンドライン環境を表示させる。

```vsh:
% screen /dev/tty.usbserial-14220 115200
```

これは、ESP32とシリアル通信を行うコマンドである。115200とは、シリアル通信のレートのようなものを指定している。初期設定では115200としておけば良い。なお、他の都合で変更した場合はその数値を設定して通信を行うようにすれば良い。
このコマンドを一度行うと何も出てこない状態となるため、一度Ctrl+Cでリセットさせると、Pythonの対話環境が出てくる。

```REPL:
>>>print('hello')
>>>hello
```

以上のように正しくPythonの対話環境を実行できていることがわかるだろう。
さて、ampyを使ってblink.pyを転送したが、それを実行しよう。その前にblink.pyがESP32に正しく存在しているかどうかを調べよう。
以下のようにすれば良い。

```REPL:
>>>import os
>>>os.listdir()
['blink.py', 'boot.py']
```

blink.pyがESP32に正しく転送されていることがわかる。
さて、blink.pyのrunメソッドを実行する。

現在の対話環境において、

```REPL:
>>>import blink
>>>blink.run()
```

とすればESP32に繋がれたLEDが点滅を始めるだろう。
なお、配線は、LEDのプラス側を27ピンに、マイナス側をGNDピンに接続する。なお、ESP32の出力電圧は3.3Vである。必要に応じて抵抗値を計算し抵抗をLEDと直列に接続することでLEDにかかる電圧を調整して欲しい。

ここで、blink.pyはインポートをした後にメソッドを実行する形で実行を行なったが、main.pyという名前で保存されたファイルは、ESP32の起動すると実行が行われる。この機能も用途に応じて使い分けて欲しいと思う。

さて、ここまでできたところで、PCとESP32との通信の切断方法である。
Ctrl+A+Kでyes,noの選択が出てくるのでyと入力すれば良い。

とりあえず以上。GPSとESP32との接続や、Micropythonを用いたマルチスレッドプログラミング、ESP32同士の有線通信等は後にまとめようと思う。


##個人的な願い
ラズパイZERO 2 マジで早く出てくれ。
【Dart】シングルトンクラスの生成

#シングルトンクラスの生成
以下のコードでシングルトンクラスが生成できます。


```dart
class Singleton {
  Singleton._privateConstructor();

  static final Singleton instance = Singleton._privateConstructor();

  factory Singleton() {
    return instance;
  }
}
```

#参考
https://codezine.jp/article/detail/13665

https://pgcodetutor.com/%E3%80%90dart%E3%80%91%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%88%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B/
Bash で Tab を 2 回押した時と同じ一覧を取得する

## compgen でコマンド一覧を取得する

Bash で Tab を 2 回押すと、コマンドの一覧を表示できます。

```
$ [TAB][TAB]
Display all 836 possibilities? (y or n)
...
```

`compgen` を使うと、上記と同じ一覧を取得できます。

```bash
$ compgen -ac
...
```

`-ac` の `a` はエイリアス、`c` はコマンドを意味します。`compgen` の詳細は以下で確認できます。

 * [Programmable Completion Builtins (Bash Reference Manual)](https://www.gnu.org/software/bash/manual/html_node/Programmable-Completion-Builtins.html)

# ビルトインコマンドを少しずつ覚えるためのワンライナー

`compgen -b` でビルトインコマンドの一覧を取得できます。次のようにすると、ビルトインコマンドの説明をランダムに 3 つ表示できます。毎日、少しずつ覚えたい場合に使えるかもしれません。

```bash
$ compgen -b | shuf -n 3 | xargs -I{} bash -c 'help -d {}'
wait - Wait for job completion and return exit status.
exit - Exit the shell.
command - Execute a simple command or display information about commands.
```
mp3ファイルをbashで等間隔に分割するスクリプト

```
#!/bin/bash

#ffprobe -hide_banner input.mp3 ⇨ファイルの長さを調べる　その値を秒数に変換してmp3_lengthに入れる
mp3_length=14473 
# mp3_length=7455

file_name=input.mp3
duration=$((5*60))
st_time=0
i=0
while [ $st_time -lt $mp3_length ]
# while [ $i -lt 10 ]
do
  echo "ffmpeg -i $file_name -ss $st_time -t $duration $i.mp3"
  ffmpeg -i $file_name -ss $st_time -t $duration $i.mp3
  i=$((i+1))
  st_time=$((st_time+duration))
done
```
ファイルの最後の方はうまく切り出せなかった。
ffprobeの表示されているdurationを計算してサイズギリギリの数値を指定するとファイルが空で生成される
GitHubのPrivate Repositoryで作ったものをpackage.jsonのdependenciesに登録する方法

## これは何

- 公開するレベルではない自分で作ったライブラリを他のリポジトリで書いているコードのdependenciesに指定する方法をまとめた記事です
    - 過去に自分で書いたコードを掘り返してはコピペしているので記事にしてみました

## やり方

通常の`npm install`などで入れたものは以下のように記載されています。

```json
{
  "dependencies": {
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
}
```

例えば

- `my-own-personal-library`という名前のパッケージとして
- `ssh`接続で
- `https://github.com/xrxoxcxox/very-small-library`というリポジトリ

でインストールするとしたら以下のようになります。

```diff_json
  {
    "dependencies": {
      "next": "11.1.2",
+     "my-own-personal-library": "git+ssh://git@github.com/xrxoxcxox/very-small-library",
      "react": "17.0.2",
      "react-dom": "17.0.2"
    },
  }
```

`git+ssh`以外の書き方でいうと`git`, `git+ssh`, `git+http`, `git+https`, `git+file`が取れます。

また、試しにブランチを切って書いた内容を試してみたい場合は以下のように変更します。

```diff_json
  {
    "dependencies": {
      "next": "11.1.2",
-     "my-own-personal-library": "git+ssh://git@github.com/xrxoxcxox/very-small-library",
+     "my-own-personal-library": "git+ssh://git@github.com/xrxoxcxox/very-small-library#branch-name",
      "react": "17.0.2",
      "react-dom": "17.0.2"
    },
  }
```

## 参考

https://docs.npmjs.com/cli/v7/configuring-npm/package-json#urls-as-dependencies
M1 Mac で Docker の x86_64 向けイメージを使う

## 概要
M1 Mac 上で `x86_64` (`amd64`) 向けのものしかない Docker イメージを使おうとすると、以下のように怒られます。要するに ARM 向けには用意されていないよ〜〜という内容です。

```sh
docker run なんかのイメージ uname -m
# ...
docker: no matching manifest for linux/arm64/v8 in the manifest list entries.
See 'docker run --help'.
```

筆者が最近遭遇したものだと Haskell の公式イメージがこれにあたります。

本稿では、このようなイメージを M1 Mac 上で動かす方法を残しておきます。

## Docker CLI をそのまま使うとき
`docker run` にプラットフォーム指定 (`--platform=linux/amd64`) をつける。

```sh
docker run -it --rm --platform=linux/amd64 ubuntu uname -m
# x86_64
```

## Dockerfile を使うとき
CLI と同じように、 `FROM` インストラクションに `--platform` オプションをつけることができます。

```dockerfile
FROM --platform=linux/amd64 ubuntu
CMD uname -m

# x86_64
```

## まとめ
上に書いた二つの方法のほかに、イメージのハッシュを直接指定する方法などもあると思います。

また、 docker compose を使用する場合も Dockerfile を利用することでプラットフォームを指定できます。

以上です。

## 参考文献
- [Dockerfile reference | Docker Documentationhttps://docs.docker.com › engine › reference › builder](https://docs.docker.com/engine/reference/builder/#from)
- [docker run | Docker](https://docs.docker.com/engine/reference/commandline/run/)
【Writeup】WaniCTF 2021-autumn

# はじめに
WaniCTF は大阪大学 CTF サークル Wani Hackase が開催する初心者向けの CTF です。

- WaniCTF 公式HP
https://wanictf.org/

- 開催時間 (JST)
2021/11/5(金) 20:00 ~ 2021/11/7(日) 20:00

- スコアサーバー
https://score.wanictf.org/#/

# Web Writeup
# sourcemap

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/f3c6713f-9545-a54e-7442-7b507c5c2a6e.png)
ブラウザの開発者ツールからいろいろ探せば見つかりそう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/2133003f-5ae6-7718-c5e0-cacc1c501692.png)

`/js/app.bcff35da.js`にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/b553d64b-2d03-0625-5d6a-c885866db9f7.png)

`//# sourceMappingURL=app.bcff35da.js.map`を見つけた。
これを見ると、、、FLAG発見。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/9f8b06df-6859-eebf-964d-4653ba710b4a.png)


# POST Challenge
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/ed59739e-fb63-9e88-2bb2-9d36eeac75a0.png)
POSTメソッドに関しての知識が問われている？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/528ae0f0-42e9-ec11-01fa-abfece6cfb86.png)

#### challenge1
zipファイルのapp/app.jsを確認します。
https://weblabo.oscasierra.net/curl-post/
`curl -X POST -d 'data=hoge' https://post.web.wanictf.org/chal/1`

#### challenge2
zipファイルのapp/app.jsを確認します。
https://hacknote.jp/archives/25378/
`curl -X POST -A "Mozilla/5.0" -d 'data=hoge' https://post.web.wanictf.org/chal/2`

#### challenge3
zipファイルのapp/app.jsを確認します。
https://wagby.com/wdn8/restapi-curl.html
`curl -X POST -H "Content-Type: application/json" -d '{"data":{"hoge":"fuga"}}'  https://post.web.wanictf.org/chal/3`

#### challenge4
zipファイルのapp/app.jsを確認します。
文字列ではなく数字やnullなどを送信したい場合はJSON形式で送信します。
https://qiita.com/Hyuga-Tsukui/items/e64477094f433ffbb9c1
`curl -X POST -H "Content-Type:application/json" -d '{"hoge":1, "fuga":null}' https://post.web.wanictf.org/chal/4`

#### challenge5
zipファイルのapp/app.jsを確認します。
これが一番難しかった。以下の記事から`-F`の使い方を学んだ。
https://www.webdevqa.jp.net/ja/shell/curl%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B-post-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E4%BB%98%E3%81%8D%E3%83%87%E3%83%BC%E3%82%BF/1069416089/
zipをダウンロードし、「wani.png」があるディレクトリ(僕の場合は`/Downloads/web-http-post/app/public/images`)で以下のコマンドを実施。
`curl -X POST -F data=@./wani.png https://post.web.wanictf.org/chal/5`

FLAGの形式は`FLAG{[Challenge1のFLAG]_[Challenge2のFLAG]_[Challenge3のFLAG]_[Challenge4のFLAG]_[Challenge5のFLAG]}`なので、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/2aa89da9-062c-bed1-dda4-2cc5cb6276cb.png)
RSAの処理時間の測定

非常に今さら感がありますが、ちょっとRSAの処理時間を測ってみました。

【実行環境】
・Lenovo ThinkPad Edge E520
・Intel(R) Celeron(R) CPU B800 @ 1.50GHz (2コア)
・DDR3 8GB
・KEIAN SSD 30GB
・Lubuntu 20.04.3
・Python 3.8.10
・実行スクリプト https://github.com/fukuda123/crypto/blob/main/20211106-rsa_time/rsa_time.py
・実行結果 https://github.com/fukuda123/crypto/blob/main/20211106-rsa_time/result.txt

![rsa_enc_time_20211106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358381/4b454f1c-7ebf-f5dc-f2ac-546ad9b309b3.png)

![rsa_dec_time_20211106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358381/22514f85-e68a-f157-c12a-0db49f6ca4d6.png)


この結果では、鍵長をNとした時、暗号化・署名検証はO(N^1.56)、復号・署名生成はO(N^2.55)ぐらいですね。

ざっくり、O(N^2)とO(N^3)よりは小さいはずだと予想していましたので、概ね予想通りで満足しました。
FadeToggleに勝手にdisplay:noneがついてメニューが消えた時の対象法

#FadeToggleについて厄介なdisplya:noneについて
FadeToggle等を使うと閉じた時にdisplay:noneがつくのは仕様らしい・・・
そこで色々調べて掲示板などをみたり試した結果！！
良い方法が見つけた、知っているひとは多いと思うが初心者や知らない人のために残して置きます。

まず今回自分が試したのはwindow.matchMediaを使う方法です。
window.matchMediaの説明は今回は省略させていただきます。
では今回の本質であるwindow.matchMediaを使った書き方を紹介します。

```

window.matchMedia('(max-width: 768px)').addEventListener('change', e => {
    if (!e.matches) $('.p-header__nav').attr('style', null);

});

```

ただこれだけじゃ一つ問題が出ます。
この状態からブラウザーサイズを大きくして、また小さくするとこうなります。
<p>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2074932/459c2394-cd98-df18-94f3-f3861409bf6c.png"  width="400">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2074932/80706810-0561-27b6-df57-ce103194d9a9.png" width="400">
</p>

##解決策
上記でかいたコードに１行追加するだけ！！

```

window.matchMedia('(max-width: 768px)').addEventListener('change', e => {
    if (!e.matches) $('.p-header__nav').attr('style', null);
    $('.p-header_bagger-btn').removeClass('cross');//追加したコード
  });

```
ハンバーガーメニューとかはFadeToggle以外ににもCSSでやる方法でもあるのでそっちでも試してみようと思う。
初心者のためにでも役に立ては嬉しいです。
link_toの適用範囲を広げる


## 修正前

```erb
     <table class="table table-hover offset-md-1">
        <% users.each do |user| %>
          <tbody>
            <tr>
              <td>
                <%= link_to  user_path(user) do %>
                  <%= attachment_image_tag(user, :profile_image, format: 'jpeg', fallback: "user_image.jpg", size:'50x50', class: "user-image") %>
                <% end %>
              </td>
            </tr>
          </tbody>
        <% end %>
      </table>
```
このままだと、attachment_image_tagの範囲しかlink_toが適用されない、、

## 修正後

```erb
     <table class="table table-hover offset-md-1">
        <% users.each do |user| %>
          <tbody>
            <tr onclick='window.location="<%= user_path(user) %>"' role="link">
              <td>
                <%= attachment_image_tag(user, :profile_image, format: 'jpeg', fallback: "user_image.jpg", size:'50x50', class: "user-image") %>
              </td>
              <td><%= user.name %></td>
            </tr>
          </tbody>
        <% end %>
      </table>
```
 tr に JavaScript の windowオブジェクトを追加して遷移させることができる。

```erb
<tr onclick='window.location="<%= user_path(user) %>"' role="link">
```

## 問題点
画面遷移はできるがマウスオーバーした時にポインターにならない。

```css
tr {
  cursor: pointer;
}
```
これで改善！
【Python × bottle】 PCで立ち上げたローカルのサーバーに、スマホからアクセスする方法

# 目的
Python のライブラリ bottle を使用してローカルなサーバーを作成する
手持ちのスマホから作成したサーバーにアクセスする
(作成したサーバーへPC以外を使用して接続するのに少し詰まった。備忘録として載せる。)

# 手順
① : bottle でサーバーを作成
② : PCとスマホ　の wifi環境 を統一する
③ : PCから wifi のIPアドレスト取得する
④ : ③のIPアドレスをもとに スマホからサーバーへアクセス

# ① : bottle でサーバーを作成

※Pythonの環境構築 や bottleのインストール については省略

```BottleSample.py
from bottle import route, run, template

@route('/hello/<name>')
def index(name):
    return template('<b>Hello {{name}}</b>!', name=name)

# ポートは任意 (スマホから接続するときに使用する)
run(host="0.0.0.0", port=200)

```

# ② : PCとスマホ　の wifi環境 を統一する
PCとスマホ で使用する wifi を同じにする

# ③ : PCから wifi のIPアドレスト取得する

この記事を参考に IPアドレス を調べる

https://qiita.com/k3ntar0/items/16047db352236b1ffe09#方法ローカルネットワークのipアドレスで接続する


# ④ : ③のIPアドレスをもとに スマホからサーバーへアクセス

URL : http://③で調べたIPアドレス:①で決めたポート番号/
(例 : http://192.168.~~~.~~~:200/ )
※ ~~~ には適切な数字を入れてください


↓赤丸のところにURLを入力する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764557/15d8e454-4f1c-7d49-d3ad-5871fe9f8085.png" width=200>

```http://192.168.~~~.~~~:200/hello/Qiita```   を入力


**結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764557/f6333923-5e5b-c68c-d153-71d4813f9aed.png)
Laravel 【入門】 チーム開発で.env.exampleファイルを書き換えた時にやること

# はじめに
別にLaravelに限った話ではありませんが、チーム開発で誰かが.env.exampleファイルを変更した際、その変更内容を自分のローカルファイルにどう反映させるか初心者は分からないと思いますので軽く解説します。

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [envファイルを削除する](#envファイルを削除する)
2. [envファイルを作成する](#envファイルを作成する)
3. [アプリケーションキーを作成する](#アプリケーションキーを作成する)

<!-- 各チャプター -->

# envファイルを削除する
普通に.envファイルを削除します。


# envファイルを作成する

フォルダ構成

```
backend
├── app
├── bootstrap
├── config
〜　色々と省略　〜
├── database
├── public
├── resources
├── routes
```

.env.exampleファイルの内容を.envファイルにコピーするコマンドでenvファイルを作成します。
.env.exampleファイルは超簡単に説明すると、ローカルで開発する際の設定を記載しているファイルになります。
<br>
上記フォルダ構成でbackendにあたるフォルダ内で以下コマンドを打ちます。

```
$ cp .env.example .env
```

# アプリケーションキーを作成する
.envファイルの「 APP_KEY=　」の部分は空になっているので、以下のコマンドでアプリケーションキーを作成します。
アプリケーションキーはハッシュ化やセッションなどの暗号化の処理を実行する際に用いるものです。

```
$ php artisan key:generate
```
MacにおけるLisaの日本語化手順

## はじめに
Macにおける Lisa painful の日本語化手順について解説します。

## Lisaのインストール
SteamからLisaをインストールしておいてください。

## .shファイルの入手
日本語化手順をバッチ化してくれた方がいらっしゃいます。
次のリンクから日本語化のための.shファイルを入手してください。
[リンク](https://gist.github.com/ryopei/8b9e8f67d259bb68590463a6a0fc4812)
![tejun.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138421/11045549-9824-2735-c401-202a28d4af70.png)
※赤矢印のDownload ZIPからダウンロード

## .shファイルの実行
### zipファイルの解答
zipファイルを解凍し、`painful_jp.sh`というファイルが解凍フォルダにあるのを確認してください。

### ターミナルの起動
ターミナルを起動してください。
Finderから、 アプリケーション->ユーティリティ->ターミナル　です。

### painful_jp.shファイルの実行
起動したターミナルに `bash` と入力し、1文字半角スペースを入力してください。次にターミナルに先程解凍した`painful_jp.sh`をドラッグ・アンド・ドロップします。エンターキーを押せば処理が始まります。
最後に`日本語化が完了しました`とのメッセージがでれば終了です。
ゲームを起動すれば日本語化されているはずです。

![terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138421/a2c7fb37-6212-e508-208b-185a9b35c7b7.png)

## 最後に
Lisa the joyful についてもバッチ化されており、同様の手順で日本語化が可能です。
[リンク](https://gist.github.com/ryopei/55696d86082c5f83d173c3b487cf3fb9)
Python リスト

---
title: Python リスト
tags: Python Python3
author: Hirakawa123
slide: false
---
#はじめに
基礎から定着させていこうということでリストについてまとめました。
Python 3.8.2


##リストの作成
```py
l = [1,2,3,4,5,6,7,8]
```
##リストを表示する
```py
l = [1,2,3,4,5,6,7,8]

print(l)
```
##リストのタイプの確認
```py
l = [1,2,3,4,5,6,7,8]

print(type(l))
```
##リストにいくつ値が入っているのか
```py
l = [1,2,3,4,5,6,7,8]

print(len(l))
```
##リストの一部を取得する
```py
l = [1,2,3,4,5,6,7,8]

print(l[0])
print(l[-1])
print(l[1:3])
print(l[:6])
```
##リストのスキップして取得する
```py
l = [1,2,3,4,5,6,7,8]

print(l[::2])
```
##リストの書き換え
```py
l = ["a","s","d","f"]

l[1] = "b"
print(l[1])
print(l)
```
##リストの複数の値の書き換え
```py
l = ["a","s","d","f"]

l[2:4] = ["c","d"]
print(l)
```
##リストの中身を空する
```py
l[1:3] = []
print(l)
```
##リストに追加するメソッド1
```py
n = [1,2,3,4,5]

print(n)
n.append(6)
print(n)
```
##リストに追加するメソッド2
```py
n = [1,2,3,4,5]

n.insert(0,0)
print(n)
```
##リストから値を取り除くメソッド
```py
n = [1,2,3,4,5]

n.pop()
print(n)
n.pop(0)
print(n)
```
##リストの削除
```py
n = [1,2,3,4,5]

del n[0]
print(n)
```
##リストの自体の削除を行ったため、printしてもnが定義されていないと出力される。
```py
n = [1,2,3,4,5]

del n
print(n)
```
##値に一致するものを削除する
```py
n = [1,2,3,4,5]

#3番目の位置にある値ではなく、3の値を取り除く
n.remove(3)
print()
```
##リストの結合
```py
l1 = [1,2,3]
l2 = [10,20,30]

l3 = l1 + l2
print(l3)

l1 += l2
print(l1)

l1.extend(l3)
print(l1)
```
##値がどこの位置に入っているかを確認するメソッド
```py
l = [1,2,3,4,5,4,3,2,1]

print(l.index(3))
##3を-3番目以降から探している
print(l.index(3,-3))
```
##値の個数をカウント
```py
l = [1,2,3,4,5,4,3,2,1]

print(l.count(6))
```
##リストのソート
```py
l = [1,2,3,4,5,4,3,2,1]

l.sort()
print(l)
```
##ソート&リバース
```py
l = [1,2,3,4,5,4,3,2,1]

l.sort(reverse=True)
print(l)
```
##リストのリバース
```py
n = [1,2,3,4,5]

print(n)
n.reverse()
print(n)
```
##スプリット
```py
x = "I have a pen"

to_split = x.split(" ")
print(to_split)

#スプリットをもとに戻す
y = " ".join(to_split)
print(y)
```

##ネストの作成
```py
l1 = [1,2,3]
l2 = [10,20,30]

x = [l1,l2]
print(x)
```
##ネストの取り出し方
```py
x = [[1,2,3],[10,20,30]]

print(x[0])
print(x[0][1])
```
WeAct STM32F411CEU6 Core Board で遊ぶ - Arduino編

# おことわり

いろいろ懸念がありました。私の環境の問題かもしれませんし，いつか解消されるのかもしれません。

# Windows10の場合

確認環境
- Windows10
- Arduino IDE 1.8.16

Board Manager は以下を指定
https://github.com/stm32duino/BoardManagerFiles/raw/main/package_stmicroelectronics_index.json
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/d65792ec-785a-118c-23cc-c3163a5b59ac.png)
書き込み時の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/78aa67da-6de4-9de0-23e8-000c845a5ae0.png)

**重要注意**

このままでは書き込めませんでした。

https://github.com/WeActTC/MiniSTM32F4x1/tree/master/Soft/WeAct_HID_FW_Bootloader
ここから`WeAct_HID_Flash-CLI.exe`をゲット。`hid-flash.exe`にリネーム

`C:\Users\****\AppData\Local\Arduino15\packages\STMicroelectronics\tools\STM32Tools\2.1.0\win`

にhid-flashを放り込んで書き込みができました。

**注意その2**

２回目以降は，以下の手順でHID Bootloaderモードにして書き込む必要があります。

- 普通にUSB接続するとArduinoが通常起動する。
- その後，[KEY] を押しながら [RESET] を押しリセット。[RESET]を離したのちに[KEY]を離す。（[BOOT]ボタンじゃないことに注意）
- HID Bootloaderモードになる。

この状態で Arduino IDE で書き込み操作をします。

# Macの場合

確認環境
- macOS Mojave 10.14.6
- arduino-1.8.16-macosx.zip

`hid-flash`がどうも動きません。
https://github.com/WeActTC/MiniSTM32F4x1/tree/master/Soft/WeAct_HID_FW_Bootloader
にはソースも置いてあるのですが，コンパイルしてみてもボードを認識できません。

DFUなら書き込みができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/4e2eadcf-d1b9-1b35-b473-2c7e12ccdfa7.png)

ただし...
HID Bootloaderは消えてしまいますので，2回目以降は頑張ってSTM32 Bootloaderを起動してから書き込む必要があります。

# 参考 URL
https://github.com/WeActTC/MiniSTM32F4x1
https://github.com/stm32duino/Arduino_Core_STM32
https://github.com/stm32duino/wiki/wiki/Getting-Started
https://qiita.com/numeru55/items/d90b4da142fc0fb58d75
ラズパイで動くPrometheusデータの永続化

# きっかけ

以前からラズパイにセンサーを付けて取得した自宅の環境（温度、湿度、気圧）をPrometheus+Grafanaで可視化したり、ラズパイ達のリソースを監視して楽しんでいたのだが、しばらくするとPrometheusが突然死を繰り返すように。

![grafana.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321595/21c7262d-55b7-2ff2-d14f-d196c68ed230.png)

当初はなす術もなく、数時間おきにPrometheusを再起動して逃げていたのだが、調べる内にPrometheusのデータ保存期間を延ばしたことが原因であることが判明。
※デフォルトは15日間。起動オプション（--storage.tsdb.retention 365d）を付けて１年分の保存を目論んでいた


# 対応策

私の調べた内容はざっと下記。

- そもそもPrometheusはデータの永続化に興味がない
- 永続化したかったらPrometheusから「remote_write」を使って外部に書き出すといいみたい
- 外部ストレージとして使えるのはInfluxDBとかPostgreSQLとか色々あるらしい

その中でVictoriaMetricsが簡単かつGrafanaのデータソースとしてもPrometheusからそのままリプレースできるということで使ってみることに。


# 環境

ちなみにVictoriaMetrics導入先の環境はこんなです。

- Raspberry Pi 3 Model B+
- Raspbian GNU/Linux 10 (buster)
- 温度・湿度計測用にDHT22センサーを装着し、Pythonのprometheus_clientを使ってメトリクス生成
- Prometheus関係で動いてるもの
  - Prometheus 2.29.1
  - Grafana Server 8.1.1 [可視化用]
  - AlertManager 0.22.2 [アラート発報用]
  - Blackbox Exporter 0.19.0 [URL監視用]
  - Node Exporter 1.2.2 [ラズパイのメトリクス取得&センサーデータ用]


# 導入

## Prometheus

設定ファイルにremote_writeを追記してあげて、サービス再起動
(VictoriaMetricsのリスナーポートは8428)

```prometheus.yml(追記箇所だけ)
remote_write:
  - url: http://localhost:8428/api/v1/write
```

## VictoriaMetrics

簡単。
下記からバイナリをダウンロードして解凍してその場にデータ書き出しでよければ実行するだけ。

https://github.com/VictoriaMetrics/VictoriaMetrics/releases

常駐させたいし、データもそれなりのところに放り込もうということで、サービス化。
予め/var/lib/victoriaディレクトリを作成し、データ保存期間は12ヶ月としてみた。

```victoria-metrics.service
[Unit]
Description=Victoria Metrics
Before=prometheus.service

[Service]
User=prometheus
ExecStart=/usr/local/bin/victoria-metrics-prod \
  -storageDataPath /var/lib/victoria/ \
  -retentionPeriod=12 

[Install]
WantedBy=multi-user.target
```

## Grafana

PrometheusデータソースとしてVictoriaMetricsのエンドポイントを指定するだけ。
![grafana-ds.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321595/c3451e6c-78f5-b61d-54b0-06df96990603.png)

PromQLがそのまま使えるので、ダッシュボードもデータソースを変えるだけ
![promql.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321595/2415d0b4-6ad9-dac5-1807-604c0f5d4c45.png)



# まとめ？

色々立ち上げているが、メモリはこれくらい。
安定している感じなので、当面これで使ってみる。
（あ、データのバックアップなにもしてない）
![mem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321595/fdc0bf72-2586-3f85-f584-cc8641e0a556.png)

ただ、VictoriaMetricsを立ち上げた当初、Grafanaのデータソースを設定してもデータが見えなかった。
が、２、3日した頃に改めて見たら見えるようになり、その後は安定。
Grafanaの設定は変えていないのだが。。
公式ドキュメントの何かを見落としていたか？（英語苦手）

Prometheus+Grafanaの日本語資料はいっぱいあって、私も色々参考にさせて頂いたのだが、
VictoriaMetricsの日本語資料があまりない上、上記問題があったおかげで難儀したなと。
laravel クエリビルダ or条件をグループ化する

# 目的

- クエリビルダでor条件をグループ化する方法をまとめる。

# 概要

- usersテーブルにflagカラムがあったとする。
- flagカラムにはintの0、intの1、nullいずれか格納されている。
- where句を用いてflagカラムが1もしくはnullのレコードを取得したい。
- 一見`where('flag', '!=', 0)`とすれば良さそうだが、nullはwhereでは判定できない。
- `orWhereNull('flag')`と`where('flag', '=', 1)`を用いれば良さそうだが、いずれこちらのクエリビルダが複雑になった時に`orWhereNull('flag')`があると絞り込み条件が「その他のwhere条件、もしくはflagカラムがnullのもの」となり、意図しない値が返される可能性がある。

# 方法

- 下記のように記載することで問題は解決する。（と思う。）

    ```php
    $users = DB::table('users')
        ->where(function($query) {
            $query->where('flag', 1)
                  ->orWhereNull('flag');
        })
        ->get();
    ```

# 参考文献

- [https://readouble.com/laravel/8.x/ja/queries.html](https://readouble.com/laravel/8.x/ja/queries.html)（OR WHERE句 部分）

# 関連記事

- [https://qiita.com/miriwo/items/2cbe413453eb0b35de0b](https://qiita.com/miriwo/items/2cbe413453eb0b35de0b)
ggpmiscを使用して時系列データをdata.frameに変換

```
install.packages("ggpmisc")
library("ggpmisc")

str(USAccDeaths)

start(USAccDeaths)
end(USAccDeaths)
frequency(USAccDeaths)

install.packages("ggpmisc")
library("ggpmisc")


USAccDeaths2<-try_data_frame(USAccDeaths,as.numeric = FALSE)
str(USAccDeaths2)
class(USAccDeaths2$time)
USAccDeaths2$time<-as.Date(USAccDeaths2$time)

ggplot(data=USAccDeaths2) +
  geom_line(mapping=aes(x=time,y=USAccDeaths)) +
  labs(x='年月',y='事故死者数') +
  scale_x_date(date_breaks = "1 month",
               date_labels = breaks)

# 雑だが１カ月単位でラベルを作成
breaks=rep(" ",72)
y<-1974
for (i in 1:nrow(USAccDeaths2)) {
  if (i %% 12 == 0) {
    breaks[i]= as.character(y)
    y <- y + 1
  }
}
```
最新のマイクロソフト認定資格を手に入れろ。英語配信の試験に合格するコツ。

# 「英語だから…」と諦めてはもったいない
今日ではマイクロソフト認定資格試験の多くが日本語で配信されています。しかし、配信して間もない試験は基本英語のみの配信となっており、日本語化され配信されるまでにはタイムラグがあります。そのため「英語で受験になるのかぁ…」と受験をためらっている方も多くいらっしゃるのではないでしょうか？

この記事では英語力皆無な筆者が英語配信の試験 MS-700 に合格した学習方法をご紹介します。


# 目次
1. [まずはとにかく日本語で！効率を落とさない学習方法](#1-まずはとにかく日本語で効率を落とさない学習方法)
2. [もはや教科書。公式ドキュメントで合格する](#2-もはや教科書公式ドキュメントで合格する)
3. [学習にブーストをかけろ! mstepクラスルームの試験対策講座](#3-学習にブーストをかけろ-mstepクラスルームの試験対策講座)
4. [学習教材についての注意事項](#4-学習教材についての注意事項)
5. [まとめ](#5-まとめ)

# 1. まずはとにかく日本語で！効率を落とさない学習方法

**注意　一夜漬けのような詰め込み学習を推奨しているわけではありません**

英語での資格試験にチャレンジする場合、とにかく最初にすべきことは**学習教材を片っ端から日本語に翻訳すること**です。自らの英語力で訳す必要はありません、[DeepL翻訳](https://www.deepl.com/ja/translator)など自然言語処理が得意であろうツールを使ってとにかく翻訳しましょう。


**資格試験の目的は試験に関する用語を英語を覚えることではなく、日本語で知識を定着させることです。**

試験は英語かもしれませんが学習過程も全て英語で頑張る必要はないはずです。多くの人にとって学習教材が英語であるという時点で日本語で学習する際と比較し、効率も低下するでしょうし何より集中力が持続しないと思います。英語でひたすら学習を進めようとしまうとダラダラと学習期間が長くなりかねません。学習する際は日本語と英語の比率は 8 : 2 ぐらいにして効率よく学習しましょう。

繰り返しになりますが、最初はひたすら日本語でインプットしましょう。英語での学習に切り替えるタイミングですが、翻訳した学習教材をぱっと見て何について書いてるか理解できるレベルになってからがオススメです。

### ワンポイント
翻訳した中に奇妙な単語がわりと頻繁に出てくると思います。これらは確実に英語で押さえておきましょう。**試験に出るはずです。**
(MS-700における例 : 法的保留 = legal hold , 情報の障壁 = information barriers など)



# 2. もはや教科書。公式ドキュメントで合格する

マイクロソフトは [MS Learn](https://docs.microsoft.com/ja-jp/learn/) という学習に特化したコンテンツを提供しています。モジュールやラーニングパスといった名前で単元ごとにまとめてあり、MS Learn 内の資格試験の詳細ページから各試験においてどのモジュール、ラーニングパスを学習すれば良いか記載されてあります。

**最新の試験は基本この MS Learn ぐらいしか学習教材がないです。**このモジュール、ラーニングパスを学習教材として学習をすすめることをオススメします。基本的に新しい試験の情報が出てしばらくするとしれっとモジュール、ラーニングパスが追加されてます、一日1回ぐらいチェックしてもいいかもしれません。ただし MS Learn は地味なんだけど試験に出るところがたま～～に端折られていることがあります。余裕があれば MS Learn と一緒に [Microsoft Docs](https://docs.microsoft.com/ja-jp/) も参照しましょう。

(2021/11/27 追記)
新しい試験のモジュール、ラーニングパスですが日本語ページだと表示されないようです。URLの ja-JP を en-US にして英語（アメリカ）のページに変更すればモジュール、ラーニングパスが表示される可能性があります。
(追記ここまで)


# 3. 学習にブーストをかけろ! mstepクラスルームの試験対策講座

不定期ですが[mstep クラスルーム](https://partner.microsoft.com/ja-jp/training/mstep-classroom)で試験対策講座が開催されています。日本人講師の方が日本語に翻訳した情報をもとに試験のコツを教えてくれます。平日の日中に開催されるため受講が難しいかもしれませんが、**めっっっっっっっちゃくちゃオススメです**。受ける予定の試験の対策講座がないか毎週チェックしましょう。
（資料のダウンロードも可能なので最悪受講登録だけするのもあり…）

# 4. 学習教材についての注意事項

巷には有料無料問わず、マイクロソフト以外から提供されている資格試験対策教材があります。購入前の判断は難しいかもしれませんが、例題集など記載のあるものは試験ポリシーに違反する可能性が高いので要注意です。

以下のURLから抜粋します。
(脳ダンプ = ブレインダンプ　翻訳もう少しどうにかならんのか…)

>脳ダンプは、web サイトなどのソースであり、認定試験のコンテンツが含まれています。この情報は、本書を共有する目的で、不正に取得されています。 **脳ダンプに含まれるコンテンツは、テストに表示される項目とまったく同じか、またはよく似ています。** 試験的なコンテンツは不正に取得されたため、この種類のマテリアルを使用して、試験の準備またはテスト中に、不正行為を行うことができます。 脳ダンププロバイダーは、マイクロソフトの知的財産権および守秘義務契約に違反しています。 Microsoft コンテンツを使用して脳ダンプサイトを見つけたと思われる場合は、この フォームに記入してください。
[試験のセキュリティポリシー](https://docs.microsoft.com/ja-jp/learn/certifications/exam-security-policy)

# 5. まとめ

- とにかく日本語に翻訳して読む。学習における日本語英語の比率は 8 : 2 ぐらいがオススメ。
- おかしな翻訳になっている単語は重要。試験に出るはずだから必ず英語で覚える。
- MS Learn のモジュールとラーニングパスで勉強をする。必要に応じて Microsoft Docs も見る。
- **mstep クラスルームの試験対策講座があったら絶対申し込む。**
- 試験ポリシーに違反した教材には気をつける。

英語の試験でも日本語で知識としてアタマに入っていればそんなに恐れることはないと思います。無理に英語で暗記するのではなく日本語で理解する学習方法を皆さんも模索してみてください。

資格試験のことをよく呟いている私の [Twitter](https://twitter.com/bory_kb) です、お優しい方よければフォローしてください。それでは！
WeAct STM32F411CEU6 Core Board で遊ぶ - Bootloaderについて

# 公式 github

https://github.com/WeActTC/MiniSTM32F4x1

# この記事の目的

このボードで遊ぶときに，Bootloaderの挙動を知るのが大切だと考えました。
その調査等の作業記録です。

# 作業環境

- ボード 上記の STM32F11CEU6 で，SPI Flashが実装されていないタイプです。
- 主に以下の環境で確認しました。
    - macOS 10.14.6 Mojave
    - Windows10
    - Arduino 1.8.16

以下，とくに記載がない時は，USB-Cコネクターにパソコンを接続した状態です。

# HID Bootloader - 出荷時のBootloader -

最初にMacに接続したらこれが見えました。
![GetImage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/6d55e337-b97c-827d-b033-fd61bc03d33f.png)

- このBootloaderが動いている時は，PC13（青）のLEDが「シュワンシュワン」と点滅します。

- Arduino IDEでスケッチ書き込みに使えます。（ちょっとクセあり？ 別途記事にする予定）
    - スケッチを書き込んだあとは，スケッチの実行が優先され，一時的に見えなくなります。
    - 以下の手順でこのBootloaderを再起動できます。再起動して2回め以降のスケッチを書き込みます。
        - [KEY]を押しながら[RESET]
        - [RESET]を離したあとに[KEY]を離す

- このBootloaderが動いている時に[KEY]を長押しして離すと，STM32 Bootloaderになります。（下記参照）

- なにかの拍子にこのBootloaderを消してしまったら，以下からダウンロードします。

https://github.com/WeActTC/MiniSTM32F4x1/blob/master/Soft/WeAct_HID_FW_Bootloader/Bootloader/WeAct_HID_Bootloader_F4x1.hex

# STM32 Bootloader

DFUモードなどとも書かれるアレです。

- HID Bootloaderからこちらを起動できます。（上記参照）
- Micropython動作中でもこちらを起動できます。（下記参照）
![GetImage (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/016615df-c6db-9935-8ed5-060b625bed26.png)

- 以下の方法でもSTM32 Bootloaderに入ることが出来ますが，なかなか成功しません...
https://github.com/WeActTC/MiniSTM32F4x1/tree/master/#how-to-enter-isp-mode

> Method 1: When the power is on, press the BOOT0 key and the reset key, then release the reset key, and release the BOOT0 key after 0.5 seconds
> Method 2: When the power is off, hold down the BOOT0 key, and release the BOOT0 at 0.5s after the power is on
> DFU Mode: Use the data line to connect to the computer. If there is an unrecognized problem, you can heat the chip appropriately (25°C) and then re-enter the ISP mode
Serial Port Mode: Connect PA9 and PA10 of core board with USB serial port

このBootloaderを起動すると，STM32CubeProgrammerで認識され，書き込みが出来ます。
以下画面右上，いつもは [STLINK] になっている水色ボタンを [USB] にして，Connectします。
![GetImage (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/e032b93b-0f03-48cd-9738-36758abea1ac.png)

こんな感じでファームの書き換えが出来ます。***（個人的に重要）***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/08062824-b969-3d5c-54e9-0cafad191ebc.png)

STM32内蔵のBootloaderです。DFUやシリアルで書き込みできます。STLINKを使えばもっと手軽にこのモードに入ることができるはずです。

# Micropython

HID Bootloaderを消してMicropythonのファームを入れることになります。でもSTM32 Bootloader経由で戻ることもできます。

以下から .hex をダウンロードして，STM32 Bootloader等にして書き込みます。私の場合はSPI Flash無しですので `firmware_internal_rom_stm32f411_v1.14-7.hex` になります。

https://github.com/WeActTC/MiniSTM32F4x1/tree/master/SDK/STM32F411CEU6/MicroPython/firmwares-v1.14

Micropythonで遊んだら，REPLで以下を実行すればSTM32 Bootloaderを起動できます！

```
import machine
machine.bootloader() 
```

# おしまい

ここまでの情報で，

```
HID Bootloader
 <->
STM Bootloader
 <->
Micropython
```
がある程度自由に行き来でき，思いついた時に手軽に作業環境を変えることができますね！
CYOD, BYAD, COBO, COPE とは

## 勉強前イメージ

BYADはやったけど、他にもあるのん？

## 調査

### CYOD とは

`Choose Your Own Device` の略で、
企業が社員に業務に使用する携帯端末をいくつか選定し、それぞれ選んで利用すること。
認められた範囲では私用を認める場合もあります。

![12021-11-25 # CYOD, BYAD, COBO, COPE とは - diagrams..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/483b1471-5528-7796-bbc1-b79b9858f8fd.png)


### BYAD とは

`Bring Your Own Device` の略で、
社員が私物の端末を業務で利用すること。
BYODを導入することで企業側は端末購入費や通信費の一部などのコストを削減することができ、
社員は私物と業務用で2台持ちする必要がなくなる。

![22021-11-25 # CYOD, BYAD, COBO, COPE とは - diagrams..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/44d9bf9b-4daa-7d41-f177-224a848f32cb.png)

### COBO とは

`Corporate Owned, Business Only` の略で、
企業が社員に業務で使用する端末を支給し、利用すること。
その端末は業務でしか使ってはだめです。

![32021-11-25 # CYOD, BYAD, COBO, COPE とは - diagrams..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/e67c1ef0-236c-8ed2-6003-53e023326516.png)


### COPE とは

`Corporate Owned, Personally Enabled` の略で、
企業が社員に業務に使用する支給し、利用すること。
認められた範囲では私用を認める場合もあります。

![42021-11-25 # CYOD, BYAD, COBO, COPE とは - diagrams..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/464ba9a1-4eb5-e08c-9aaf-a8eb22029108.png)


### まとめ

- CYOD
	- 端末の購入 : 企業
	- 私的利用 : 可能
	- 端末の選択 : 可能
- BYAD
	- 端末の購入 : 社員
	- 私的利用 : (可能)
	- 端末の選択 : (可能)
- COBO
	- 端末の購入 : 企業
	- 私的利用 : 不可
	- 端末の選択 : 不可
- COPE
	- 端末の購入 : 企業
	- 私的利用 : 可能
	- 端末の選択 : 不可

## 勉強後イメージ

業務で端末を使用する形態って結構いろいろあるのね。
BYADって言葉は最近まで知らなかったけど、ずっとだめなことだと思ってた。
でもありなのね。

## 参考

- [CYOD 【Choose Your Own Device】](https://e-words.jp/w/CYOD.html)
- [BYOD 【Bring Your Own Device】](https://e-words.jp/w/BYOD.html#Section_COPE)
- [1人1台の導入形態とは〜BYOD・BYAD・CYODを比較する〜](https://www.dsk-cloud.com/blog/what-is-introduction-form-for-each-person)
JSでCSV操作

##JavaScriptで
##CSVをDTOに

```csv→dto.js
  // CSVをDTOのListに直す
  let csvToDto = (csv) => {
    let rows = csv.split("\r\n");
    let header = rows[0].split(",");
    let records = [];
    for (let i = 1; i < rows.length; i++) {
      let row = {};
      rows[i].split(",").forEach((val, index) => {
        row[header[index]] = val;
      });
      records[i - 1] = row;
    }
    return records;
  };
```

##DTOをCSVに

```dto→csv.js
  // DTOのListをCSVに直す
  let dtoToCsv = (list) => {
    console.log(list);
    let csv = Object.keys(list[0]).join(",") + "\r\n";
    list.forEach((dto) => {
      csv += Object.values(dto).join(",") + "\r\n";
    });
    return csv;
  };
```
【Unity】WebGLでゲームを公開するときにUIが変になったときの対処法

#概要
Unityで作成したゲームをブラウザ上に公開するとき、WebGLは非常に簡単で便利な方法になります。しかし、通常の設定のまま公開してしまうと、UIや画面サイズが崩れてしまい、せっかくのゲームが台無しになってしまいます。

本記事は、Unityで作成したゲームをWebGLで公開するときに重要な設定をまとめたものになります。

#①Canvasの設定

* Canvasのインスペクターを開き、CanvasScaler を次のように設定する。
    * `UI Scale Mode` を `Scale With Screen Size`に変更
    * `Reference Resolution` の値をゲームシーンの画面サイズの値に変更  
         （画面サイズが大きすぎるとブラウザ上で見づらくなるので注意）
    * `Screen Match Mode` を `Expand` に変更  
![CanvasScalar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534232/2d555a9b-38ed-db82-2827-0b5e087fcb1f.png)  
![ScreenSize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534232/bbf88f65-947f-249b-2d5a-38da3e218aee.png)  

#②フォントの設定
* Unityのデフォルトのフォント (Arial) の場合、ブラウザ上では表記が乱れてしまうことがあります。これを避けるために、配布フォントを使用する必要があります。おすすめのサイトを載せましたので、参考にしていただければと思います。  
https://rwiiug.hatenablog.com/entry/font_matome  
※フォントの利用規約には十分注意してください！

#③ビルドの設定
* WebGLでビルドする時に、`Player Settings` を開き、`Player` > `Resolution and Presentation` > `Resolution` の値をゲームシーンの画面サイズの値に変更する。  
![BuildSettings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534232/014150fd-c675-f0df-0870-295452b3a5f1.png)  
![Resolution.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534232/c36dabb2-cc93-9b45-6486-02527659dc12.png)

##（おまけ）UnityRoomでゲームを公開する場合
* WebGLでビルドする時に、`Player Settings` を開き、`Player` > `Publishing Settings` > `Compression Format` を `GZip` に変更する。  
![CompressionFormat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534232/33df6129-ddf2-8ccf-b094-4511880c6cb3.png)

#まとめ
以上の設定をすることで、ブラウザ上でもUIが崩れずに正常にプレイすることができるかと思います。上記の設定をしてもUIが崩れることがあれば、コメントで教えていただければと思います。
WordPressで記事のタグ名を取得するショートコードを作成

WordPressで記事のタグ名を取得するショートコードを作成しました。

## 目的

WordPressで全記事に共通して表示されるキャッチコピーやマイクロコピー、固定の文言をより具体化したいと考えたため。

例)
Pythonの解説記事、PHPの解説記事、Javaの解説記事といった風に言語ごとに記事のタグが設定されているサイト構造の場合。

>[タグ名(PHPなど)]に関して分からないことがありましたらお問い合わせフォームへ。
[タグ名(PHPなど)]で困ったらこちらのプログラミングスクールがおすすめです。

といた風に表記内容を具体化できる。

## 作成方法

### 1. タグ名を取得するPHPファイルをテーマ内に作成

まずはタグ名を取得するためのPHPファイルをWordPressテーマ内に作成します。

```php:get_tag_name.php
<?php
//タグが設定されていないときに表示させたい文言
$ctaTagName = "不明";

//WordPressのタグを取得
$tags = get_the_tags();

//タグを取得できた場合の処理
if ($tags) {
  foreach($tags as $tag) {
    $ctaTagName = $tag->name;
  }
}
echo $ctaTagName;
?>
```
＊タグ名は１つしか取得できません。

### 2. functions.phpでショートコードを作成する

`functions.php`にショートコードを作成するためのPHPコードを書きます。

```php:functions.php
function tag_echo_php( $atts ){
  ob_start();
  get_template_part('get_tag_name'); 
  return ob_get_clean();
}
add_shortcode( 'TAG_NAME', 'tag_echo_php' );
```
これによって`[TAG_NAME]`というショートコードを書くことで`get_tag_name.php`が呼び出される`tag_echo_php`関数が読み込まれます。

### 3. ショートコードで確認

あとはタグが設定されている適当な投稿画面で`[TAG_NAME]`というショートコードを書いてタグを呼び出してみましょう。

## 参考
https://recooord.org/wordpress-get-the-tags/

## WordPressのお役立ち情報

https://wagtechblog.com/programing/wordpress-school

https://wagtechblog.com/programing/php-school
ocコマンドの補完をMacOS + zshで有効化する方法

# はじめに
OpenShiftのCLI(ocコマンド）は、サブコマンドやオプションが多岐にわたります。そのため、スムーズな操作のためにはコマンドライン入力の補完を使いたくなります。Linux+Bashの環境では、マニュアルのとおりに設定するだけで補完の有効化を行うことができました。
が、MacOS+zshだとどうやるんでしょうか。

>OPENSHIFT CLI の設定 --> タブ補完の有効化
>https://access.redhat.com/documentation/ja-jp/openshift_container_platform/4.8/html/cli_tools/cli-configuring-cli#cli-enabling-tab-completion_cli-configuring-cli

ターミナルとして使っているMac側にocコマンドを入れて使うために、ocコマンドの補完の有効化を行ってみました。
#前提条件
brewが導入されていること
ocコマンドが導入されていること

#設定手順

<ol><li> bash-completionの導入
補完スクリプトはbash-completionに依存しているため、これをインスールする必要があります。

````shell:
# brew install bash-completion
```

<li> 補完用スクリプトの生成

````shell:
# kubectl completion zsh > ~/oc_zsh_completion
```
<li> .zshrcに必要な設定を追加
.zshrc上でcompinitを有効化し、先程生成した補完スクリプトを実行します。

````shell:
# cat <<EOF >> ~/.zshrc
autoload -Uz compinit && compinit
autoload -U bashcompinit && bashcompinit

source ~/oc_zsh_completion
EOF
```
<li>ディレクトリのパーミッションを変更
更新した.zshrcをテストしてみると、以下のような入力を求められてしまいました。

````shell:
Ignore insecure directories and continue [y] or abort compinit [n]? 
```

どうやら、いくつかのディレクトリのパーミッションが気に入らないようです。
わたしの場合は、以下の２つのディレクトリを755へ変更したところ、入力を求められなくなりました。

````shell:
# chmod 755 /usr/local/share/zsh
# chmod 755 /usr/local/share/zsh/site-functions
```

# 完了
以上で、oc　コマンドの補完ができるようになりました。
CentOS Stream 8にOpenFOAM v2106をインストールする

この記事では，CentOS Stream 8にOpenFOAM v2106をインストールする際の手順についてまとめます．

# インストール手順
基本的には[公式サイト](https://develop.openfoam.com/Development/openfoam/-/wikis/precompiled/redhat)の手順通りに実行していきます．

# つまづきポイント
```sh
yum -y config-manager --set-enabled PowerTools
```
を実行した際に，

```sh
エラー: 修正用の一致する repo はありません: PowerTools.
```
と表示され，OpenFOAMがインストールできない．

# 対処法
[こちらのサイト](https://joruri-cms.jp/2020/spec/2020121700014/)によると，
>CentOS Stream 8でものPowerToolsリポジトリは用意されていますが、リポジトリ名が異なっているので下記のコマンドに変更して実施してください。

>＜コマンド＞
>dnf config-manager --set-enabled powertools

とのことである．このサイトの通りに

```sh
yum -y config-manager --set-enabled PowerTools
```

というコマンドを，

```sh
dnf config-manager --set-enabled powertools
```

に置き換え実行したたところ，PowerToolsリポジトリが有効化され，OpenFOAMが正常にインストールできた．
残りの手順は公式サイト通りでインストールできた．
UnityでWwiseの音を鳴らす 2（Unity組み込み編）

[UnityでWwiseの音を鳴らす 1](https://qiita.com/undertreem/items/d929e14cd5dd2f5070c3)の続きです。

##UnityとWwiseをIntegrateする
Wwise LauncherのUnityタブからIntegrate Wwise into...からIntegrateを進めていきます。
Integrate時は、UnityとWwiseは終了しておいてください。
![スクリーンショット 2021-11-25 20.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2270393/b99d71e0-e437-b01b-312f-8f5d6a04279e.png)
Wwise Project Pathでは前回作成したWwise Projectを選択します。
![スクリーンショット 2021-11-25 20.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2270393/5f7172e3-8218-7106-fb86-6bb19823f59a.png)

Integrate出来たらUnityプロジェクトとWwiseプロジェクトを起動します。

##Unityから音を鳴らす
いよいよUnityからWwiseを制御していきます。
Integrate出来ていればUnityのWindowメニューからWwise Pickerが開けるようになっていると思います。
<img width="500" alt="スクリーンショット 2021-11-25 20.42.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2270393/241e2ea1-be00-0f24-5d8a-d5051c6bc5ba.png">

###SoundBankのロード
適当にオブジェクトを作るなりして、Inspectorから「Ak Bank」を追加します。
Nameのところから作成したSoundBankを選択します。
このAk BankでSoundBankをロードさせないと一切音が鳴りません。
（今回は関係ありませんが、実際の実装ではどのSoundBank読み込ませる読み込ませないとかで軽量化や効率化を図ります）
<img width="300" alt="スクリーンショット 2021-11-25 20.52.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2270393/99ade154-dc63-3ec9-4f33-414f0f849054.png">

###スクリプトからEventを再生させる（ポストする）
EventをポストするScriptを書きます。

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class WwisePost : MonoBehaviour
{
    public AK.Wwise.Event Event;//宣言

    void Start()
    {
        Event.Post(gameObject);//Eventの再生
    }
}
```

単純にスクリプトから音を鳴らすだけなら2行書くだけです（超簡単）
作ったスクリプトと「Ak Game Obj」スクリプトを音を鳴らしたいオブジェクトに付けます。
※AkGameObjはWwise内の位置計算に使われるものです
あとはEventの欄に鳴らしたいEventを登録してあげればOK
<img width="300" alt="スクリーンショット 2021-11-25 21.19.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2270393/be204f00-66d7-4193-b094-effccfc61077.png">
Gameを再生すると音が鳴るはずです。
今回は分かりやすいようにStart関数に入れましたが、Eventのポストをお好きな位置に入れれば任意のタイミングで再生できます。

#おわりに
無事UnityとWwiseで音が鳴らせるようになったはずです。
ここで紹介したのは本当に初歩的なことなので、複雑な制御については今後追加で記事を書いていきます。
Wwiseならではのインタラクティブな実装方法までいけたらなーと。

## 参考文献
- [Wwise 101](https://www.audiokinetic.com/ja/courses/wwise101/)
- [Wwise 301](https://www.audiokinetic.com/ja/courses/wwise301/)