OmniAICreator/Qiita-1.07M huggingface dataset:
Linuxで作業のlogをこっそりとる

# できること

linuxサーバーでの作業履歴を記録する。
履歴をとっていることがバレにくい。
ssh接続時はアクセス元の記録もできる。

# 前提条件

OS: Linux
シェル: bash

# やり方

結論から。

```bash:.bashrc
if [ "$SHLVL" = "1" ] && [ ! -z "$PS1" ]
then
    [ -d ~/scripts/ ] || mkdir ~/scripts
    find ~/scripts/ -type f -mtime +60 -delete
    export Guest=`who am i`
    date=`date +script_%F_%T`
    LANG=C script -qft 2>~/scripts/$date.time ~/scripts/$date.log
    exit
elif [ `ps aux | grep $PPID | grep -v grep | awk '{ print $11 }'` = "script" ]
then
  echo $Guest
fi
```

## scriptで履歴を取得

:::note warn
単体で `.bashrc` に書くと **無限ループ** になります。
:::

```bash
date=`date +script_%F_%T`
LANG=C script -qft 2>~/scripts/$date.time ~/scripts/$date.log
```

- dateコマンドで、日付をフォーマットする。「script_2022-12-31_12:59:59」
- scriptコマンドで履歴を取得
    - `LANG=C`: 日本語だと後に利用する`scriptreplay`がうまくいかないため。`scriptreplay`を使わないならなくてもいい。
    - `-q`: scriptコマンドを開始、終了した旨のメッセージを非表示にする。これがないと記録してるのがバレバレ。
    - `-f`: 記録をリアルタイムで参照できるようにする。なくても構わない。
    - `-t`: 文字を入力した時間を標準エラー出力に出力する。`scriptreplay`を使うなら必須。
    - `2>~/scripts/$date.time`: `-t`で出力された時間をファイルにリダイレクトする。これがないと色々と大変なことになるので、`-t`をつけるなら絶対つけること。
    - `~/scripts/$date.log`: ログ出力先のファイル。

`script`は子シェルを生成し、その中でコマンドを実行させる。そのため、これを単体で書くと生成されたシェルでさらに`script`がシェルを生成し、無限ループになる。

## 無限ループにならないようにする。

```bash
if [ "$SHLVL" = "1" ] && [ ! -z "$PS1" ]
```

`$SHLVL`はシェルの深度。`script`コマンド下ではこれが2になるため判別できる。
`$PS1`はプロンプト。空文字でないことを実行条件としている。

## アクセス元を記録

アクセス元のIPは、アクセス直後のシェルで`who am i`を実行すると取得できる。
ただ、`script`下で実行しても取得できない。
そこで、`script`実行前に取得して環境変数に入れておき、`script`下で出力することで記録させている。

```bash
if [ "$SHLVL" = "1" ] && [ ! -z "$PS1" ]
then
    export Guest=`who am i`
elif [ `ps aux | grep $PPID | grep -v grep | awk '{ print $11 }'` = "script" ]
then
  echo $Guest
fi
```

`ps aux | grep $PPID | grep -v grep | awk '{ print $11 }'`で親プロセスの名称を取得している。
- `ps aux`: プロセス一覧を取得
- `grep $PPID`: 親プロセスのPID(`$PPID`)が含まれるもので絞り込み
- `grep -v grep`: 上記にはこのコマンド自身も含まれてしまうので、`grep`が含まれていないものを抽出。これで親プロセスだけになった。
- ` awk '{ print $11 }'`: スペース区切りで11個目であるプロセス名を取得。親プロセスが`script`コマンドであれば`script`が入る。

## 諸々追加

### 保存先のフォルダがなければ作る (任意)

```bash
[ -d ~/scripts/ ] || mkdir ~/scripts
```
### 60日以上前のログを削除 (任意)

```bash
find ~/scripts/ -type f -mtime +60 -delete
```

### `exit`コマンドを一回で済ませる

```bash
LANG=C script -qft 2>~/scripts/$date.time ~/scripts/$date.log
exit
```

通常、`script`コマンドを実行中にシェルを抜けるには`exit`を二回入力する必要がある。
しかし、`script`終了時に自動的に`exit`を実行すれば、一回で済ませられる。
これにより、ログの取得がほぼバレなくなる。

# 結果の再掲

```bash:.bashrc
if [ "$SHLVL" = "1" ] && [ ! -z "$PS1" ]
then
    [ -d ~/scripts/ ] || mkdir ~/scripts
    find ~/scripts/ -type f -mtime +60 -delete
    export Guest=`who am i`
    date=`date +script_%F_%T`
    LANG=C script -qft 2>~/scripts/$date.time ~/scripts/$date.log
    exit
elif [ `ps aux | grep $PPID | grep -v grep | awk '{ print $11 }'` = "script" ]
then
  echo $Guest
fi
```
for文比較

for文を比較してみます。
・for文で10回「hello」と表示させるプログラムです。
・終わったら、「end」と表示させます。

```python:python
for i in range(10):
    print("hello")
print("end")
```
シンプルでスッキリしてますね。

```ruby:ruby
for i in 1..10 do
    print("hello")
end
print("end")
```
同じく

```c:c言語
#include <stdio.h>

int main(void) {
    int i = 0;
    for (i = 0;i < 10;i ++) {
        printf("%s\n", "hello");
    }
    printf("%s\n", "end");
}
```
少しコードが多い？でもこれくらいが普通かも

```go:go言語
package main

import "fmt"

func main() {
	for i := 0 ; i < 10 ; i++ {
		fmt.Println("hello")
	}
    fmt.Println("end")
}
```
まぁ、こんな感じでしょう

```php:php
for ($i = 0; $i < 10; $i++) {
   echo "hello"."<br />";
}
echo "end";
```
なるほど

```javascript:javascript
let i;
for (i = 0;i < 10;i++) {
    console.log("hello");
}
console.log("end");
```
※javascriptはもっと色々なやり方があります
【小ネタ】続・長文matplotlibをやめるぞジョジョ 〜multiplot編〜

前回の記事のちょっとした続きです｡
今回の記事は実用的なコードというよりもアイデアの紹介になります｡


https://qiita.com/mochi_gu_ma/items/aea51bb986092783f073


前回のタイトルオチをひきずっています｡

# 記事の背景

前回の記事でmatplotlibを簡潔に書く話を書きました｡

もともと[あきとしのスクラップノート](https://akitoshiblogsite.com/)さんの以下の記事に触発されて書いた記事でした｡

[[python] context manger を使ってmatplotlibの図を大量生産する](https://akitoshiblogsite.com/context-manager-matplotlib/)


が､なんとコメント欄でご本人からコメントをいただきまして…！

そこで複数のグラフをシンプルに書く方法がないかという話になり､
自分のアイデアを整理してIssueに出したので､その内容を記事にもしておきます｡

今回は実用性度外視で､アイデアを伝える最小限のコードに絞っています｡
コンテキストマネージャでこういう書き方もできるんだな〜､
くらいに捉えていただければ｡

# 要点
1. fig,pltの処理とaxを設定する処理を分ける
1. axの設定をクロージャに移譲する
1. コンテキストマネージャにクラスではなく､関数を渡す

# コード
```python
import numpy as np
import matplotlib.pyplot as plt


class CorePlot():
    def __init__(self):
        self.fig = plt.figure(figsize=(5,3))

    def __enter__(self):
        return(self)

    def __exit__(self, exc_type, exc_value, exc_traceback):
        plt.show()


def plot(ax_func):
    cp = CorePlot()
    ax = cp.fig.add_subplot(111)

    ax = ax_func(ax)
        
    cp.ax = ax
    return cp


def multiplot(ax_funcs, indices):
    cp = CorePlot()
    axes = []
    
    for func, index in zip(ax_funcs, indices):
        ax = cp.fig.add_subplot(index)
        ax = func(ax)
        axes.append(ax)
        
    cp.axes = axes
    return cp


def set_ax(xlim:list[float]):
    # 今回は簡単のためxlimだけ設定する
    def _set_ax(ax):
        ax.set_xlim(*xlim)
        return ax

    return _set_ax

# 使用例
xx = np.linspace(-5,5,20)
yy = xx*xx

ax = set_ax(xlim=[0,5])

with plot(ax) as p:
    p.ax.plot(xx,yy)

ax0 = set_ax(xlim=[0,5])
ax1 = set_ax(xlim=[0,2])
ax2 = set_ax(xlim=[-5,0])

with multiplot([ax0, ax1, ax2],[221,222,223]) as p:
    p.axes[0].plot(xx,yy)
    p.axes[1].plot(xx,yy)
    p.axes[2].plot(xx,yy)
```

# 動かしてみる
まずは1つのグラフのplotから｡
```python:
ax = set_ax(xlim=[0,5])

with plot(ax) as p:
    p.ax.plot(xx,yy)
```

![single_plot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602439/cb6b08b8-aced-5448-be72-a91ccf83f4a0.png)


めちゃくちゃ簡素ですが､できてますね｡

次に本題の複数のグラフの描画｡

```python:
ax0 = set_ax(xlim=[0,5])
ax1 = set_ax(xlim=[0,2])
ax2 = set_ax(xlim=[-5,0])

with multiplot([ax0, ax1, ax2],[221,222,223]) as p:
    p.axes[0].plot(xx,yy)
    p.axes[1].plot(xx,yy)
    p.axes[2].plot(xx,yy)
```
![multi_plot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602439/19668c7d-e412-cc20-849c-1178e1e93411.png)


こちらもめちゃくちゃ簡素ですが､できてますね｡

ただ､グラフごとに軸が表示されて見にくいですね…｡

ここらへんはまだ詰めれてないのですが､
機会があればもう少し実用的なものも考えてみます｡

# まとめ
- 複数のグラフをシンプルに書くことができる(気がする)
- コンテキストマネージャは直接クラスを渡さなくても返り値がインスタンスならOK
  だから `with open() as f`とか書けるんですね〜
「Hello World!」比較

「Hello World!」を各言語で比較してみます

```python:python
print("Hello World!")
```
うん、すごいシンプル。

```ruby:ruby
puts "Hello World!"
```
これもシンプル

```c:c言語
#include <stdio.h>

int main(void) {
    printf("%s\n","Hello World!");
    return 0;
}
```
まぁまぁかな？

```go:go言語
package "main"
import "fmt"

func main() {
    fmt.Println("Hello World!")
}
```
Cと同じくらいかな？

```php:php
echo "Hello World!";
```
短いね

```javascript:javascript
console.log("Hello World!");
```
javascriptだといろいろなやり方がありますが、今回はこれで。
4.17 (標準) 繰り返し分散，相関係数，条件付き分布

## 答案

![4.-24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/96ed24cd-d50b-3728-25d5-1d5536fdf45a.jpeg)
![4.-25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/80e29cd5-6bbe-2f0d-5a27-ff31d6f26fd5.jpeg)


## 参考文献

- 『[現代数理統計学の基礎](https://www.kyoritsu-pub.co.jp/bookdetail/9784320111660)』(久保川達也　著)
100日後くらいに個人開発するぞ！day017


## 今日はHTML＆CSS初級編を復習してみた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/87f6c6a9-cba6-a85d-9158-50d3e6c5b5f4.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/508f60b7-7cfb-d39b-9fce-5b6558aee2c4.png)

## 今日の備忘録

### テキストにリンクをつける方法
* `<a>`タグを用いることでテキストにリンクをつけることができる
    * 定型文：`<a ref="URL">アンカーテキスト</a>`

### 画像をつける方法
* `<img>`タグを用いることで画像をつけることができる
    * 定型文：` <img src="画像URL">`
    * `<img>`タグはテキストを囲むことがないので終了タグが不要

### リストをつける方法
* `<ul>`や`<ol>`という親要素と`<li>`という子要素でリストをつけることができる
    * `<ul></ul>`の親要素で囲むと黒点が先頭につく
    * `<ol></ol>`の親要素で囲むと数字が連番でつく

### 文字の種類を指定する方法
* 文字の種類はfont-familyプロパティで変更できる
    - `font-family:フォント名;`で変更できる
        - 例：h1のフォントをserifにしたい場合
            - `h1{font-family:serif;}`
- フォント名にスペースがある場合はダブルクォーテーションで囲む
    - 例：h1のフォントをAvenir Nextにしたい場合
        - `h1{font-family:"Avenir Next";}`
- font-familyには様々なフォントを指定できる
    - 「明朝体」：serif,YuMicho
    - 「ゴシック体」：sans-serif,"Lucida Grande"



### コメントをつける方法
* HTML内にコメントをつける場合は`<!-コメント-->`で囲う
* CSS内にコメントをつける場合は`/*コメント*/`で囲う
【HTML】「tr」「th」「td」 の違い

# 「tr」

tr= 「Table Row」
「表の行」という意味。
つまり、「tr」は「表の行」の要素に値する。


# 「th」
th= 「Table Header」
「表の見出し」という意味。
つまり、「th」は「表の見出し」の要素に値する。

# 「td」
td= 「Table Data」
「表のデータ」という意味。
つまり、「td」は「表のデータ」の要素に値する。

# コード
```haml:index.html
<table>
	<thead>
		<tr>　←表の行
			<th>見出し1</th>
		</tr>
	</thead>
	<tbody>
		<tr>←表の行
			<td>データ1</td>
			<td>データ2</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>←表の行
			<td>データ1</td>
			<td>データ2</td>
		</tr>
	</tfoot>
</table>
```

# まとめ
- 「tr」は「表の行」の要素に値する。
- 「th」は「表の見出し」の要素に値する。
- 「td」は「表のデータ」の要素に値する。
Leap Motion の JavaScriptライブラリ（leap.js）のプラグイン「leap-plugins.js」を試す： Hand Entry のお試し（p5.js Web Editor上で）

以下の記事で書いた JavaScript で Leap Motion を扱う話の続きの記事です。
この記事では、ライブラリの「leap.js」と合わせて、プラグインを使ってみるというのをやっていきます。

●バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用） - Qiita
　https://qiita.com/youtoy/items/efc4da1feee26186f565

## leap.js について
Leap Motion用の JavaScriptライブラリを使った話は、冒頭で掲載した記事を書いた時より前に書いた、以下の記事で扱ったことがありました。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う - Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

この記事では詳細は割愛しますが、以下に公式のリポジトリと CDN に置かれているファイルのアクセス先の URL を書いておきます。

●leapmotion/leapjs: JavaScript client for the Leap Motion Controller
　https://github.com/leapmotion/leapjs
●leapjs CDN by jsDelivr - A CDN for npm and GitHub
　https://www.jsdelivr.com/package/npm/leapjs

## leap.js のプラグインの情報
leap.js のプラグインとして「leap-plugins.js」というものがありました。

●leapmotion/leapjs-plugins: A collection of plugins available to be used with LeapJS.
　https://github.com/leapmotion/leapjs-plugins
![leap-plugins.js](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cd5453f8-023f-83dc-d395-8303012b79af.png)

CDN からの読み込みもできそうです。

●leapjs-plugins CDN by jsDelivr - A CDN for npm and GitHub
　https://www.jsdelivr.com/package/npm/leapjs-plugins
⇒ `https://cdn.jsdelivr.net/npm/leapjs-plugins@0.1.12/main/leap-plugins-0.1.12.min.js`

GitHub のページを見ていくと、このプラグインは中でいくつかの機能を含んでいるようです。

### プラグインの1つ「Hand Entry」
プラグインの中の機能の 1つ目に、「Hand Entry」というものがあります。名前からも少し分かるように、「Leap Motion の検出エリア内に手が入ってきた、または、その検出エリア内から外に手が移動した」というイベントをとれるようです。

●LeapJS-Plugins by Leap Motion
　http://leapmotion.github.io/leapjs-plugins/docs/#hand-entry
![Hand Entry](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6c3244b5-cfc8-c9af-ef8b-dc26b12c5f1a.png)

シンプルで、また使いどころがありそうなので、こちらを試してみます（更新が長らく行われていなのが、不安ではありつつ）。

## leap-plugins.js の「Hand Entry」を試してみる
それでは、実際に「Hand Entry」を試してみます。このプラグインを使って取得できる情報を可視化するのに p5.js を使うのが便利そうなので、[p5.js Web Editor](https://editor.p5js.org/)上でプログラムを作っていきます。

### ライブラリの読み込み
まずは、p5.js Web Editor上の index.html でライブラリの読み込みを行います。具体的には、Leap Motion関連で以下の 2つを追加で読み込むようにします（CDN からの読み込み）。

```html
    <script src="https://cdn.jsdelivr.net/npm/leapjs@1.1.1/leap-1.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leapjs-plugins@0.1.12/main/leap-plugins-0.1.12.min.js"></script>
```

### JavaScript のプログラムでお試し
それでは、p5.js Web Editor上の sketch.js を作っていきます。ドキュメントを見つつ、簡単な動作確認用のものを作ってみました。

```javascript
const controller = new Leap.Controller();

function setup() {
  createCanvas(500, 500);
  noLoop();

  controller.use("handEntry");
  controller.on("handFound", function (hand) {
    console.log("検出");
    background(100, 100, 200);
  });

  controller.on("handLost", function (hand) {
    console.log("ロスト");
    background(200, 150, 150);
  });

  controller.connect();
}

function draw() {}
```

以下が、実際に動作している時の様子です。

https://twitter.com/youtoy/status/1522013855530233856

手が検出エリアに入るときや、そこから出て行く時に、p5.js Web Editor上のキャンバスの背景の色が変わっているのが分かると思います（あと、ログ出力も行われています）。

手や指の動きや向きといった情報を使うまでもない、シンプルな近接検知のようなことを行う場合には便利そうです。
jQueryを少しだけ使って「簡単に画面を切り替える」

# はじめに
今回は、他のページに遷移するわけではなく、１ページの中で画面が切り替わったように見せる方法です!
 jQueryの```hide()```と```show()```を使います!
短いコードでできるので使ってみてください!
[デモ]
![画面切り替え最新.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096105/993382b2-bf04-d4ef-7c2a-7d188a6301e3.gif)


イメージしやすいよう、
「input要素に入力された値を、ボタンがクリックされたら次のページに表示する。」という形にしていますが、そこのコードは無視して頂いて大丈夫です!

## 1:htmlの用意
このコードでは、最初の画面を```input_area```、
切り替え後の画面を```output_area```としています。
```html
  <div class="input_area" id="input_area">
    <h1>最初の画面</h1>
    <input type="text" class="input" id="input">
    <button id = "btn">登録</button>
  </div>

  <div class="output_area" id="output_area">
    <h1>切り替え後の画面</h1>
    <p>この下に入力結果を表示</p>
    <p class="output_text" id="output_text"></p>
  </div>
```
この時点では、下記のように1画面に「両方の画面」が表示されている状態です。
![スクリーンショット 2022-05-05 0.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096105/d51045ce-c33e-113f-82ad-28f2f40f54c4.png)

## 2:cssで切り替え後の画面を非表示にしておく
```output_area```に下記のcssを適応させて、ただ単に「切り替え後の画面(output_area)」を非表示にします!
```css
.output_area{
  display: none;
}
```

## 3: jQueryで、最初の画面の非表示と、切り替え後の画面の表示
ボタンが押されたら、「```input_area```を非表示に」し、
「```output_area```を表示させる　」という処理を書きます。
```js
<script>
  
  $("#btn").on("click", function(){  //ボタンがクリックされたら下記の処理を実行
    let text = $("#input").val();   //ここは無しで大丈夫です
    $("#output_text").text(text);   //ここは無しで大丈夫です
    $("#input_area").hide(); //最初の画面を非表示にする
    $("#output_area").show(); //次の画面を表示する
  });

</script>

```
```.hide()```で「表示されている要素」を「非表示」にします。
```.show()```で「非表示になっている要素」を「表示」します。

これで完成です!

## 4:まとめ
この方法でしたら、1画面で見た目上画面が切り替わっているだけので、ページ間でのデータのやりとり等も考えなくで良いので、シンプルでいいなーと思っています!
どなたかの参考になれば幸いです。

[twitter] https://mobile.twitter.com/tatsuki_kt
[備忘]Sourcetree使用。git hubの認証方法。git hubのpushできなくなったとき。

2022年5月5日(木)
Sourcetreeからgit hubのリモートリポジトリにpushしようとしたら、エラー。
自分がpush成功した設定を書き出しておきます。

「結論」
1.パスワードとして利用するtokenを発行(下記リンクをご参考に)
https://qiita.com/kanta_yamaoka/items/1a59892028b9c422df22

2.Sourcetreeの上タブのSourcetree>環境設定>アカウント
認証タイプ:Basic
ユーザー名:githubログイン時のもの
パスワード:先ほどのtokenをペースト
プロトコル:HTTPS


以上の設定で自分の場合、無事pushでき、リモートリポジトリの方に無事pushされていました。
ご参考までに。
neosでlogix その68

# 概要
neosでlogixやってみる。
メッシュオーブを、ファイルエクスポートしてみる。

# 手順

- インベントリーから、メッシュオーブをダブルクリックして、セッションにスポーン。
- divtooltipを装備。
- インスペクターを表示。
- メッシュオーブのrefarenceproxyを、グラブして、ｔで、コンテキストメニューを表示。
- インベントリーに保存をクリック。
- 保存したアイテムをダブルクリックして、セッションにスポーン。
- それを、グラブして、ファイルブラウザの緑のプラスをクリック。
- エクスポートウィザードが開始される。
![2022-05-04 23.07.33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1216c702-b209-aaea-c7ab-638c57022de8.jpeg)

- objを選択して、エクスポートする。



以上。
Markdownエディタ Webアプリを作成する

# 書籍
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596059/3030f3a5-9fd6-278a-b841-21088c7af2d3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596059/759d7398-438f-db9c-6c11-20150469f9de.png)
RubyエンジニアだけどRuby Silver の対策練習問題を解いてみたい



# 問題


http://www.minituku.net/drills/775230600.html


>以下の選択肢のうち、エラーにならずに正常に実行が完了するコードを1つ選択してください。



```rb
(a) 1..10.to_s
```

1から10の範囲を文字列にしている。to_sでエラーが起こるのはnilぐらいで、あとは何でも文字列にできそうな気がするが。
やや安直な気もするけどこれを回答として選んだ。

```rb
(b) 10.*(0xFace)
```

数字の10に掛け算をして、なにかバイト列のようなものを渡してる。
いかにもエラーが起こりそうな気がするけど、これ何？



```rb
(c) 10.+("10")
```

数字の10にメソッドチェーンして + メソッドを実行し、引数に文字列を渡している。いかにもエラーが起きそうだが。

ところでRubyでは数値もオブジェクトであり、 + もメソッドとして実行できそうな気もするけれど。


```rb
(d) Time.now.strftime(1999, 12, 11)
```

現在時刻に対して strftime してるけど、 strftime って何をなにするんだっけw
少なくとも現在時刻に対して特定の日付を渡しているのはおかしいので、エラーが起きそうな気もする、

# 実行結果

## a

```rb
1..10.to_s
# ArgumentError: bad value for range
```

引っ掛けだった…。(?)
どこが何の引数よ。

文法を正せば範囲をStringにもできる

```rb
(1..10).to_s
# => "1..10"
```

## b

```rb
10.*(0xFace)
# => 642060
```

よくわからないがこれが正解だった

調べると `0x` に続く Face は16進数の様子。

```rb
"%#x" % 64206
#=> "0xface"
```

```rb
"%#x" % 1
# => "0x1"
"%#x" % 2
# => "0x2"
"%#x" % 15
# => "0xf"
"%#x" % 16
# => "0x10"
```

https://docs.ruby-lang.org/ja/latest/method/String/i/=25.html

## c

```rb
10.+("10")
# TypeError: String can't be coerced into Integer
```

やはり引数の文字列がネックのようだ

```rb
10.+(10)
# => 20
```



## d

```rb
Time.now.strftime(1999, 12, 11)
# ArgumentError: wrong number of arguments (given 3, expected 1)
```

strftimeは文字列の引数を1個だけ渡すやつだった

```rb
Time.now.strftime("%m/%d/%Y")
# => "05/05/2022"
```



# 結果

Rubyエンジニア惨敗。がんばれ！




# チャットメンバー募集


オープンチャット「アジト 〜プログラマの巣窟〜」

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ









<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用）

最近だと、昨年末に以下の記事を書いたりして扱った「Leap Motion」の話題です。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う - Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

↓ Leap Motion はこちら
![Leap Motion](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/91ef70f8-5d23-6432-dcdb-c07eb57d857c.jpeg)

そして上記の記事と同じで、JavaScript で扱う話です。しかし、今回の内容が上記の記事と違っている点は公式ライブラリ「leap.js」を利用せずに情報を取得する部分です。

## Leap Motion の情報を WebSocket で取得するための接続先
冒頭の記事でも少し触れていた部分があったのですが、PC向けの Leap Motion用アプリをインストールしてから、PC に Leap Motion をつなぐと、Leap Motion で取得された情報が WebSocket で取得できるようです。
Leap Motion用アプリの中に、WebSocketサーバーとして動作する処理が含まれている感じだと思われます。

### Leap Motion の情報を WebSocket で取得する際の接続先
Leap Motion の情報を WebSocket で取得する際の、WebSocketサーバーの接続先アドレス・ポートは
 `ws://【IPアドレスなど】:6437`
になるようです。
ローカルで動かしてアクセスする場合は、例えば `ws://localhost:6437` を指定してやれば OK です。

## Leap Motion の情報を WebSocket で取得する
それでは、簡単なプログラムを使って、情報を取得してみます。

### HTML＋JavaScript で情報取得
まずは、HTML＋JavaScript のファイルをブラウザで動かす方法でやってみます。具体的には以下の内容です。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      const URL = "ws://localhost:6437";
      const exampleSocket = new WebSocket(URL);
      exampleSocket.onopen = function (event) {
        console.log("open!");
      };
      exampleSocket.onmessage = function (event) {
        console.log(event);
      };
    </script>
  </body>
</html>
```

WebSocketサーバーに接続する処理を行い、その後の WebSocket によるメッセージ受信のイベント発生時に、受信した内容をログに書き出すだけというシンプルなものです。これを実行した結果、コンソールに以下のような情報がどんどん出力されてきました。

https://twitter.com/youtoy/status/1521994995741630464

今回は情報が取得できることを確認するだけにして、中身の細かな部分は、また後で見ていこうと思います。

### p5.js（p5.js Web Editor上）で情報取得
次は、p5.js Web Editor上の p5.js のプログラムでの情報取得です。以下は、p5.js Web Editor上で動かした sketch.js の内容です。

```javascript
const WSURL = "ws://localhost:6437";
let exampleSocket, eventLeapMotion;

function setup() {
  createCanvas(500, 500);

  let exampleSocket = new WebSocket(WSURL);
  exampleSocket.onopen = function (event) {
    console.log("open!");
  };
  exampleSocket.onmessage = function (event) {
    eventLeapMotion = event;
    console.log(eventLeapMotion);
  };
}

function draw() {
  background(220);
  // ここで、 eventLeapMotion を使う何かの処理を実行すると良さそう？
}
```

上記のプログラムを動かして、p5.js Web Editor のコンソールに情報が随時出力されるのを確認できました。

![p5.js Web Editor上で試す](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b056a396-5057-b83e-08be-e105ea05ce98.png)

## おわりに
今回、Leap Motion の情報を WebSocketサーバー経由で取得するのを試しました。
ブラウザ上で JavaScript のプログラムを使うなら、ライブラリを使うほうが情報取得の後の処理を進めるのには良さそうな気がしますが、一方、何らか Leap Motion を接続した PC にネットワーク経由で接続している別デバイスなどで、この　Leap Motion の情報を取得したいという場合などは、この仕組みが便利に使えそうです。
4.16 (易) 繰り返し期待値

## 答案

![4.-23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/35b9eee2-c4db-aedd-d345-1719cdcad149.jpeg)


## 参考文献

- 『[現代数理統計学の基礎](https://www.kyoritsu-pub.co.jp/bookdetail/9784320111660)』(久保川達也　著)
Dockerが有料化！？

皆様こんにちは。
最近になって、DockerDesktopが有償化されるとのことで、企業で利用されている方では、騒ぎになった方もいるのでは。

というところで、確認してみましたが、企業での利用は有償化されるケースもありますが、ちゃんと読んでライセンス違反にならない用にするために、おまとめ。

# [公式ページ](https://www.docker.com/products/docker-desktop/) からの引用
* 中小企業（従業員数250人未満、年間収益1,000万ドル未満）、個人使用、教育、および非営利のオープンソースプロジェクトでは「無料のまま」
* 大企業での専門的な使用には、ユーザーあたり月額わずか5ドルの有料サブスクリプション（Pro、Team、またはBusiness ）が必要です。
* これらの条件の発効日は2021年8月31日です。DockerDesktopを使用するために有料サブスクリプションが必要な場合は、2022年1月31日までの猶予期間があります。
* Docker Pro、Docker Team、およびDocker Businessのサブスクリプションには、DockerDesktopの商用利用が含まれるようになりました。

というところで、個人利用する場合や、非営利の場合は、無償のまま！
ということは、学習用途や研究している分には、そのまま無償で使えるんですね～

使途が、無償範囲かどうか正しく確認する必要がある場合は、サポートに確認したほうが良いと思いますが、
自己学習や調査で使っている分には（個人で）、今まで通り利用できるということなので、
何も８月になったら、DockerDesktopもう使えない！というわけではない、と。

というところなので、焦らずこの慣れ親しんだツールを使っていきましょ～👌👌

Thank you for reading this article!
See you next time!
neosでlogix その67

# 概要
neosでlogixやってみる。
メッシュオーブを取得してみる。

# 手順

- インベントリを開いて、Essential Tools>MeshTipをクリック。
- MeshTipを装着。
- グラブして、rでメッシュを取得。
- 装備を外し。
- グラブして、メッシュオーブを取り出す。
- グラブして、ctrl + sで、インベントリーに保存。

以上。
neosでlogix その66

# 概要
neosでlogixやってみる。
マテリアルオーブを取得してみる。

# 手順

- インベントリを開いて、Essential Tools>MaterialTipをクリック。
- MaterialTipを装着。
- 地面をグラブして、rでマテリアルを取得。
- 装備を外し。
- グラブして、マテリアルオーブを取り出す。
- グラブして、ctrl + sで、インベントリーに保存。


以上。
neosでlogix その65

# 概要
neosでlogixやってみる。
ワールドオーブを取得してみる。

# 手順

- ワールド画面を開く。
- 取得したいワールドをクリック。
- 右上の青い地球儀をクリック。
- アクションの項目の「ワールドオーブ取得」をクリック。
- セッションに、ワールドオーブがスポーンされる。
- グラブして、ctrl + sで、インベントリーに保存


以上。
viteを使ってみようと思ったら最初から詰まった

# 起きたこと
viteを使って開発を始めようと思ったらはじめから躓いた
[こちら](https://zenn.dev/sprout2000/articles/60cc8f1aa08b4b)の記事を参考にさせていただき、開発を進めようと思った矢先のことだった。

# エラー
ターミナル上で以下の[入力]を行い、開発を始め湯としたところ、次の[出力]が返され、行き詰まった。
```ターミナル:入力
npm init vite
```
```ターミナル:出力
'create-vite' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

# やったこと
いろいろ調べてみると、コマンドが認識されていない時はPathが通っていない、`名前 -v`でバージョンを確認して表示されれば問題ないとのことで、自分の場合はPathが通っていないことはないと判断した。
結局、以下のコマンドを実行することで解決した。
```ターミナル:入力
npm install create-vite
```
そりゃそうだと思ったが、プログラミング初心者にとってはけっこうわからない物だと思う（ことにして自己肯定した）。
もしかしたら、以前に書いた`create-react-app`もインストールすることができるかも知れないと思うので、今度試してみようと思う。

# 参考資料
[React Hooks と TypeScript で簡単 TODO アプリ](https://zenn.dev/sprout2000/articles/60cc8f1aa08b4b)
neosでlogix その64

# 概要
neosでlogixやってみる。
3Dモデルをインポートしてみた。

# 手順

- ファイルブラウザを開く
- cube.objをダブルクリック。
- セッション内で、インポートウィザードが開始される。
![2022-05-04 21.30.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9bb8b002-12cb-170b-0bbb-d3c8c160037e.jpeg)

- CADモデルをクリック。
- 単位を指定。
- インポート実行。

以上。
neosでlogix その63

# 概要
neosでlogixやってみる。
パソコン、買ってみた。VR-HMDは、無い。


# 要件

||システム要件（最低）|購入したパソコン|
|:--|:--|:--|
|os|64 ビットプロセッサとオペレーティングシステムが必要です Windows 8.1| Windows 10 Pro 64-bit |
|プロセッサー| Intel Core i5-4590 AMD FX 8350 (equivalent or better)|Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz|
|メモリー| 4 GB RAM|8192MB RAM|
|グラフィック| NVIDIA GTX 970 AMD Radeon R9 290 (equivalent or better)|NVIDIA GeForce GTX 970|
|DirectX| Version 11|DirectX 12|
|機能レベル||12_1,12_0,11_1,11_0,10_1,10_0,9_3,9_2,9_1|
|ネットワーク| ブロードバンドインターネット接続||
|ストレージ| 1 GB 利用可能|1000 GB|

# 結果

60FPS出ました。


以上。
【python】openpyxlで罫線の設定の取得方法

# きっかけ
pythonにてopenpyxlを使用し罫線を引くところまではできたのだが、一つのファイル内に複数のフォーマットが存在し、フォーマットに合わせて罫線を引き直したかったため。
検索したが情報がほとんどない状態だった為メモ。

# 元の条件分岐による罫線の引き方
※前提として既にフォーマットに合わせて罫線が引いてあるセルとする。
※最終行だけ他の行とフォーマットが異なるため再設定をする。
罫線を引くきっかけとなるセルの値で分岐させて罫線の種類を設定していた。
```python
from openpyxl.styles.borders import Border ,Side

side_dotted = Side(style='hair', color='000000')
side_thin = Side(style='thin', color='000000')

#　最終行の罫線のtopをフォーマットに合わせてhairかthinにしたい
if cell.value == '〇〇':
    cell.border = Border(...(省略)..., top=side_thick, ...(省略))
else:
    cell.border = Border(...(省略)..., top=side_dotted, ...(省略))
```
しかし条件分岐の設定が増えるとその分コードの行数が増えて馬鹿馬鹿しくなる。
条件分岐の設定が変わった時の対応も面倒くさい。

# 検索してみた
結果ですが「日本語」で有益な情報はコレくらいでしょうか。

https://twitter.com/macaron_mou_k/status/1318902628189786112?lang=ja

# 足りない頭で理解してみた
マカロンさんのツイートを見て思い付いたのはブレイクポイントを設定し、セルのオブジェクトを覗き込んでみた。
そしたら…
```
border > top > border_style:thin
```
とあるじゃないですか！
もちろんbottom, left, rightもあります。

# 試行錯誤の時間
おバカだったから
```python
cell.border = Border(...(省略)..., top=cell.border.top.border_style, ...(省略))
```
なんて書いてエラーを出しました。

# 良い子のみんなはこう書きましょう！
多分ですが
```python
side_border_top = Side(cell.border.top.border_style, color='000000')
cell.border = Border(...(省略)..., top=side_border_top, ...(省略))
```

# 最後に
なんかまとまりの無い記事になってしまいましたが、セルの罫線の設定の取得方法になります。
条件分岐しなくても元のフォーマットを生かしつつ一部変更が可能になりコーダーさんが楽になればと思います。
2022/5/5主にITとかセキュリティの記事

Windows更新プログラムにランサムウェア(5/3)
https://jp.sputniknews.com/20220503/windows-11006930.html

露のIT技術者、すでに15万人が国外脱出…宇侵攻受け　国家競争力に長期打撃(5/3)
https://news.nifty.com/article/world/korea/12329-1611998/

新政府の「未来金融」・・・デジタル「革新金融システム」の構築(5/3)
https://m.jp.ajunews.com/view/20220503151043955

デジタルはアナログでもある(5/2)
https://www.orangeitems.com/entry/2022/05/02/140354

ブロック報酬とは？【GWに考える暗号資産の基本】(5/3)
https://www.coindeskjapan.com/141478/

JVNVU#92363469
Apache HTTP ServerにおけるNULLポインタ参照の脆弱性(5/2)
https://jvn.jp/vu/JVNVU92363469/

クラウドとは？　ネット介してシステム利用(5/3)
https://www.nikkei.com/article/DGXZQOUA027YK0S2A500C2000000/

2022年6月15日にサポートが終了するInternet Explorerをただちに廃止するようにMicrosoftが警告(5/2)
https://gigazine.net/news/20220502-microsoft-warn-internet-explorer-retirement/

テレ朝社員も加担のＩＴ導入詐欺　経産省はなぜ騙されたのか(5/3)
https://www.sankei.com/article/20220503-DFDIUAH3QRITJMPLGZTTNGGIAU/?ownedutm_source=owned%20site&ownedutm_medium=referral&ownedutm_campaign=ranking&ownedutm_content=%E3%83%86%E3%83%AC%E6%9C%9D%E7%A4%BE%E5%93%A1%E3%82%82%E5%8A%A0%E6%8B%85%E3%81%AE%EF%BC%A9%EF%BC%B4%E5%B0%8E%E5%85%A5%E8%A9%90%E6%AC%BA%20%E7%B5%8C%E7%94%A3%E7%9C%81%E3%81%AF%E3%81%AA%E3%81%9C%E9%A8%99%E3%81%95%E3%82%8C%E3%81%9F%E3%81%AE%E3%81%8B

Windows 11移行、既に減速か(5/3)
https://www.zaikei.co.jp/article/20220503/670787.html

北朝鮮の人々は検閲を逃れるべく、政府公認スマートフォンをハッキングしている(5/3)
https://wired.jp/article/north-korean-phone-jailbreakers/

メールアドレスの漏洩を極力防ぐ　自衛の策を徹底研究(5/2)
https://news.goo.ne.jp/article/nikkeistyle/bizskills/nikkeistyle-DGXZQOUC0377U003032022000000.html

宮崎謙介＜巷の陳情＞突撃調査隊「デジタル庁は何をやっているのか」(5/3)
https://www.asagei.com/210465

日本のCIOが2022年に注力すべき3つの重要課題--ガートナーがデジタルビジネス推進で提言(5/1)
https://dxmagazine.jp/news/trend/r1eL6

ツイッター、フェイクアカウントの割合は5％以下と推計(5/3)
https://jp.reuters.com/article/twitter-users-idJPKCN2MP04K

アップルペイ、独禁法違反も
EU、認定なら巨額制裁金(5/2)
https://nordot.app/893833583531982848?c=768367547562557440

Apple M1チップとA14チップの欠陥発見！Augury攻撃によりデータ漏えいの可能性(5/3)
https://www.appps.jp/365184/

財務省資料「防衛」を読んでみた：コスパだけで防衛を語る愚かしさ(5/3)
https://agora-web.jp/archives/2056274.html

EUが新たにロシアの銀行をSWIFTから除外＝EU上級代表(5/3)
https://jp.sputniknews.com/20220503/euswifteu-11008238.html

｢本当に銀行の職員なの？｣フィッシング詐欺犯を捕まえた食堂のオーナー＝韓国(5/3)
https://s.wowkorea.jp/news/read/346296/

暴露されたランサム攻撃グループの実態(5/4)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/111900071/042100030/
【PUN2】AllBufferedViaServerのRPCは後から入った環境においてStart()より前に呼ばれる

# 概要
PUN2(Photon Unity Networking 2)において、`photonView.RPC()`に`RpcTarget.AllBufferedViaServer`を渡して呼び出したRPCは後から入った環境において`Start()`より前に呼ばれるようです。それによって自分が少し嵌りました。検証した内容を備忘録的に記載しておきます。

検証した環境は下記です。
- Unity2019.4.15f1
- Photon Unity Networking 2.32

# 検証

RPC呼び出し可能な`HogeRpcFunction()`とイベント関数の`Start()`に確認用にログ出力を追加します。

```csharp
public class Hoge : MonoBehaviourPunCallbacks
{
	[PunRPC]
	public void HogeRpcFunction()
	{
		Debug.Log("HogeRpcFunction()");
	}

	public void Start()
	{
		Debug.Log("Start()");
	}
}
```

後から入った環境においてRPCが実行されるように、RPCの呼び出しにおいて、下記コードのように`RpcTarget.AllBufferedViaServer`を指定します。

```csharp
photonView.RPC(nameof(HogeRpcFunction), RpcTarget.AllBufferedViaServer);
```

最初の環境を起動し、上記の`HogeRpcFunction()`のRPCの呼び出しを行います。
その後、別のクライアント環境を起動します。
そのクライアント環境において、`Start()`が呼ばれるよりも前に`HogeRpcFunction()`が呼ばれることが確認できました(ログ出力の下記画像を参照)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29542/f4373e89-c871-9876-2e6e-85ab655fc842.png)


`RpcTarget.AllBufferedViaServer`で呼び出したRPCが`Start()`で何かしら処理を行っていることを前提にしている場合、正しく動作しないので注意が必要そうです。
Unity Animatorに隠された仕様

# この記事は？
メモみたいなもん

## 共通
### TransformのプロパティはLocal系を使っている。
つまり親オブジェクトによる微調整が可能

## ApplyRootMotionオフ時
### Animatorで利用しているプロパティは現在のアニメーションが使用しているかに関わらず変更ができない
### 必ずアニメーション作成時の決められた絶対値から始まり絶対値で終わる

## ApplyRootMotionオン時
### アニメーションの再生中でもプロパティを変更できる
### アニメーションの値は開始時の場所から始まるため、開始と終了の値が一致しない場合や、一致していても再生が終わる前に再生を行うとどんどんずれていく(Humanoidは例外)

## 編集
### ボーンが入ったモデルをHumanoidとして編集した場合、デフォルトだと床に埋まる。
そのままじゃ編集は困難。アニメーションリギングとか入れたら解決するのかしら。
簡単にアニメーションを作りたい、人型で流用できなくても良いならGenericでインポートすれば解決。

## うまく扱うために
もしいくつかの要素が組み合わさって思うようにいかないなら、Animatorのenabledをその場に応じて切っちゃう判断もできると良い。
NUCLEO-F303K8 Arduinoでちょっとだけ使い込んでみた (I2C/ADC/DAC)

「ちょっとだけ使い込む」って変な日本語だけどまあいいか。
SSD1306接続しています。

```platformio.ini
[env:nucleo_f303k8]
platform = ststm32
framework = arduino
board = nucleo_f303k8
lib_deps = olikraus/U8g2@^2.33.2
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/fc72b612-b232-bc27-8554-5b2ad55019b1.png)


# I2C

デフォルトでは以下に接続するとArduino環境で使いやすいようです。

```
CN3 (Left Side)
Adruino STM32  
  D1     PA9   
  D0     PA10  
  RST    NRST
  GND    GND
  D2     PA12
  D3     PB0   
  D4     PB7   <<-- SDA
  D5     PB6   <<-- SCL
...
```

お世話になる SSD1306 w/u8g2 が

```
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
```

であっさり使えました。

# ADC

```main.cpp
  analogReadResolution(12);
  a=analogRead(A0);
```
であっさり A0=PA0 のAD値が12ビットで読めます。互換性を重視しているのか，`analogReadResolution(12)` を指定しないと10ビットでした。

# DAC

これも簡単に

```main.cpp
    dac_write_value(PA_4, a, 1);
```

で PA_4 = A3 に出力されました。指定値は12ビットです。線形性もいいようです。表示機がアレなので際のところはよくわかりませんが。バッファードとして使えるピンですが，実際にバッファードかどうかは検証していません。

# おしまい

あと OPAMP と PWM と RTC でもテストできれば，かなり使いこなせたことになるかな... 

（宣伝）
安価で，非常に使いやすいシンプルなマイコンですね。Arduino環境を併用することでだいぶ楽になります。STM32CubeIDEを使うことでフル機能を使いこなせますが，手軽に使うならPIO+Arduinoもかなり良いと思いました。

DAC/OPAMPも内蔵してるのは珍しいです。アナログ屋さんにはありがたいです。

NUCLEOならSTLINK内蔵で，スケッチのアップロードやシリアルモニターを使うのに不都合なくて快適です。ピンが上にも出ているので，ちょっとした実験も簡単です。

# おまけ コピペ用

```
CN3 (Left Side)

Adruino STM32  Function
  D1     PA9   USART1 TX
  D0     PA10  USART1 RX
  RST    NRST
  GND    GND
  D2     PA12
  D3     PB0   TIM3_CH3
  D4     PB7
  D5     PB6   TIM16_CH1N
  D6     PB1   TIM3_CH4
  D7     PF0
  D8     PF1
  D9     PA8   TIM1_CH1
  D10    PA11  SPI_CS || TIM1_CH4
  D11    PB5   SPI1_MOSI || TIM17_CH1
  D12    PB4   SPI1_MISO
```

```
CN4 (Right Side)

Adruino STM32  Function
  VIN    VIN   Power Input
  GND    GND
  RST    NRST
  +5V    +5V
  A7     PA2   ADC1_IN3 connected to VCP_TX
  A6     PA7   ADC2_IN4
  A5     PA6   ADC2_IN3 || I2C1_SCL -SB16- PB6
  A4     PA5   ADC2_IN2 || I2C1_SDA -SB18- PB7
  A3     PA4   ADC2_IN1
  A2     PA3   ADC1_IN4
  A1     PA1   ADC1_IN2
  A0     PA0   ADC1_IN1
  AREF   AVDD
  +3V3   +3V3
  D13    PB3   SPI1_SCK connected to LD3, H=ON
```
AWS Amplify基本編

![aws-amplify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173182/29f8d74d-7229-2a63-9291-64dfcf705e2e.png)

AWS Amplifyを触ってみたのでその備忘録して記事にまとめました。本編ではあくまで基本と公式のチュートリアルを触ったインプレッションです。

### 今一度AWSとは
Amazonにより提供されているクラウドコンピューティングサービス（元々は社内用に使っていたのを外部にサービス提供始めた）AWS、Microsoft Azure, Google GCPが3大インフラサービス。
ウェブサービスと称しているが、ウェブサービスに限らない多種多様なインフラサービスを提供している。これを使えばなんでもできるので、全容を把握するのは厳しいし、公認資格も何個もある代物。

### では本題のAmplifyとは
AWSが提供するサービスの１つ。
ウェブ/モバイルのフロントエンドエンジニアがAWSでフルスタックアプリケーションをすばやく簡単に構築できるようにする専用のツールと一連の機能を揃えたプラットフォーム。Amplify を使用すると、ウェブ/モバイルアプリケーションのバックエンドを設定し、数分の内にアプリを接続して、ウェブフロントエンドUIを視覚的に構築できます。クラウドの専門知識がなくても、より速く、簡単に拡張できます。
（FireBaseが類似サービス）

Amplifyでアプリケーションを構築すると、
・静的ホスティング（Amplify Console, S3)
・認証（Cognito）
・データAPI（AppSync + DynamoDB）
がすべて数コマンドで作成でき、これらのリソースをAmplify上で統合的に管理ができます。
これによりバックエンド開発に習熟していないフロントエンドエンジニアでも難なくフルスタックアプリケーションが構築可能となります。
175個もあるAWSサービスから上記サービスを個別に選定、設定、アーキテクトし同等な環境を構築できますが、かなり時間がかかります。
そのコストをAmplifyが解決してくれる。

### チュートリアルが充実してる
AWS Amplify を通して Amazon DynamoDB や AWS AppSync 、Amazon Cognito などを利用した、ログイン機能付き ToDoアプリを構築するチュートリアルが[公式](https://docs.amplify.aws/start/)に用意されている。

React, Vue, JS, iOS, Android, Flutterと至れり尽くせりです。
![スクリーンショット 2022-05-03 15.27.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173182/aa2b9b48-996c-5fc7-3c37-15593cd684c7.png)

チュートリアル通りに進めて詰まる事はないと思うので詳細は割愛しますが、Amplify CLIを入れてターミナルからAmplifyで機能の追加、拡張、デプロイができて、コードもちょろっと書くだけで認証付きのToDoアプリができてしまった。（所要時間30分程）

schema.graphqlを作り、amplify pushコマンド実行すると、それを起点に、AWS上にAPIがデプロイ、アップデートされて、コード側にmutation、queryファイルも自動で生成、更新される。

そして、認証も数回のコマンドで作れ、こんな認証画面のUIもライブラリで用意されている。
![スクリーンショット 2022-05-04 0.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173182/3bcd2e56-cb77-fdb5-6ef7-00d5b14de2b5.png)

そしてデプロイまで一瞬。。

こんな設計のアプリを構築するのにAWSのこれらのサービスを一つ一つセットアップして連携させて、デプロイするとなると結構大変なのがAmplifyだと30分程なのですごいですね。
![Amplify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173182/04bf26ac-2eb9-2715-c029-c4bcd2cc08d2.png)


### AppSyncとは
AppSyncは、GraphQL APIの開発を容易にする、AWSの完全マネージド型サービス。
平たくいうと、サーバーレスなGraphQLサービス。
このサービスは、DynamoDB などのデータソースとの接続に必要な、面倒な作業を自動的に処理してくれます。
（同じくAPIを作成できるAPI GatewayはREST API形式）

BFF開発でGraphQLを採用する場合にこのAppSyncを使い、サーバーレスで開発するのが主流になりつつある。

### GraphQL APIとREST APIの違い
通常のREST APIでは複数のURLからロードが必要ですが、GraphQLのAPIは１回のリクエストで多くのソースにアクセス可能であることから、アクセスに関わるネットワークやサーバーの負荷軽減、パフォーマンスの向上、データ管理の簡素化を行います。

REST APIだと必要なリソースを得るために複数のエンドポイントが必要
GraphQLでは単一のエンドポイントへの1回のリクエストで必要なリソースを取得

つまり、GraphQLではフロントから欲しいデータを指定できて効率がいい。

GraphQLのオペレーションには
・データを取得する **Query**
・データを書き換える **Mutation**
・リアルタイムに通知のやり取りができる仕様 **Subscription**
がある。


### まとめ
チュートリアルだけなら本当に簡単にできてしまいました。
次はAppSync（スキーマとかリゾルバーとか）をもっと深堀してみようと思います。
UniVRMを使ってビルドする時はStandardをビルトインに入れた方が良さそう

# 概要
タイトルのとおりです。

# 理由
UniVRMはVRM以外もGLBが読める実装を持っていて、コレでGLBを読むとシェーダはStandardになるみたいです。また、あまり無いですがVRMでもStandardを使用することは出来るみたいです。なので、マテリアルがStandardの設定を持っている場合を想定した方が良い、という話です。

# 現象
UniVRMは一部バージョンを除いて、対になるSampleのUnityPackageが存在します。これをビルドして実行して、GLBを読むと、CutoutやFadeの設定が適用されずにモデルが表示される場合があります。これらの挙動はバージョンによって違ったりするみたいです。なぜか標準設定のStandardは、特に何もしなくても問題なかったりするのでハマりがちな気がします。（書いていて気付きましたが、後述のように初期配置の地面が標準Standardだからかも……）

# 対応
Standardのマテリアルを適用したオブジェクトをダミーとして配置しておく、という方法もあるのですが、この場合、どうやらCutout用、Fade用、のように個別に対応しないとダメみたいなので、大人しくタイトルのとおり「UniVRMを使ってビルドする時はStandardをビルトインに入れた方が良さそう」という話になります。

# 参考
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286581/db7b302d-fb08-62de-4085-7421f64ee714.png)
VimでCTRL-Yが便利だった。

# 概要
Vimで、CTRL-Yが便利だったので、簡潔にまとめてみる。

挿入モードのCTRL-Yでの貼り付け。

# 内容
## 環境
VIM - Vi IMproved 8.1 (2018 May 18, compiled Nov  3 2021 04:38:26)
macOS version
## 典拠
https://vim-jp.org/vimdoc-ja/usr_24.html#24.5
## 実践
### 目的
```Python:a.py
a = lambda x: (x + 2) ** 2

```
から
```Python:a.py
a = lambda x: (x + 2) ** 2
b = lambda x: (x + 3) ** 2
```
### 手順
```Python:a.py
a = lambda x: (x + 2) ** 2

```
2行目で挿入モードにしてbを押下。
```Python:a.py
a = lambda x: (x + 2) ** 2
b
```
18回CTRL-Yを押下。
```Python:a.py
a = lambda x: (x + 2) ** 2
b = lambda x: (x + 
```
3を押下。
```Python:a.py
a = lambda x: (x + 2) ** 2
b = lambda x: (x + 3
```
残りもCTRL-Yを押下。
```Python:a.py
a = lambda x: (x + 2) ** 2
b = lambda x: (x + 3) ** 2
```
完。
# 蛇足
下の行に合わせるときは、CTRL-E。
# まとめ
挿入モードのCTRL-Yは便利だった。
Oakbridge-CXスーパーコンピュータにVScodeでログインする

## はじめに

本記事は東京大学情報基盤センターのスーパーコンピュータである[Oakbridge-CX](https://www.cc.u-tokyo.ac.jp/supercomputer/obcx/service/)にVS codeでログインする方法を備忘録的な感じで紹介します．
注意点として，利用契約を結んでいないと本記事は特に参考にならないと思います（外部のサーバーにSSH接続する点では同じなので，参考程度に読んでください）

## この記事の読者
- Oakbridge-CXが使える，もしくは使おうとしている方
- Visual Studio codeでSSH接続したい方

## 公式の講義資料の方法の問題点

東京大学情報基盤センターは親切に定期的に講義を行ったり，講義資料や映像を残してくれています．
[公式Youtubeチャンネル](https://www.youtube.com/channel/UC2CHaGp1AO-vqRlV7wmU0-w)
[講義資料HPページ](https://www.cc.u-tokyo.ac.jp/events/lectures/index.php)
まず，初心者の方だとログインの段階から躓くと思いますが，以下の資料を読めばWindows環境下であれば問題なく動くでしょう．
https://www.cc.u-tokyo.ac.jp/events/lectures/163/tut163_1st_putty.pdf

さて，ここで問題なのがPuttyというソフトを用いたSSH接続とWInSCPを用いたファイル管理になるのですが，数ヶ月利用し，通信がかなり短時間で切断されてしまうこと．エディタとターミナルが別で二つのソフトを同時に起動しなければならない煩わしさがあるように感じました．
また，vimやEmacsといったエディタの扱いやCLIの操作に慣れている人ならともかく，最近のIDEのような環境に慣れている人にとっては使いにくいと感じる人は少なくないでしょう．
また，MacOSだとそもそもPuttyやWinSCPをそもそも入れることはできません．

## VS code
Micorosoft社が提供しているエディタであるVisual Studio Code（以降VS codeと呼称します）ですが，プラグインが豊富で自分が使いやすいようにカスタマイズすることがあります．（Atomなんかと似ています）


並列プログラミングを勉強しようとYoutubeチャンネルで講義を見ていたところVS codeでもログインが可能らしいということがわかりました．しかし，ログインには成功していますが，公式にやり方がちゃんと書いておらずどうすれば良いか試行錯誤した結果．うまくいったので後述にやり方を記載します．

下記のリンクから無料でインストールできますのでまずは入れてみましょう

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

## Remote Developmentのインストール

VS codeを起動したら，左側に並んでいる拡張機能というアイコンを押し，検索機能でRemote Developmentと入力してプラグインをインストールします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318447/6e0ae992-3a48-fa3b-3ba8-9a4683f10039.png)

インストールしたらVS codeを再起動しましょう．

## 秘密鍵と公開鍵の作成

次にWindowsならコマンドプロンプト，MacOS(Linux)ならターミナルを開いて公開鍵と秘密鍵を作成しましょう．

```terminal:
$ ssh-keygen 鍵のファイル名
```

:::note alert
注意点
秘密鍵は自分以外の誰にも公開しないようにしましょう．
:::

ユーザーディレクトリ下の隠しディレクトリ(.ssh)の中にid_rsa（秘密鍵） id_rsa.pub（公開鍵）が作成されます．

## 公開鍵の登録
[利用支援ポータルサイト](https://obcx-www.cc.u-tokyo.ac.jp/cgi-bin/hpcportal.ja/index.cgi)にログインし，SSH公開鍵登録のところから，先程作成した公開鍵(id_rsa.pub)をファイルアップロードで登録します．RSA公開鍵で問題ありません．
複数の鍵の登録ができますので，デスクトップ用とノートPC用の２つ鍵の登録をするといった使い方も可能です．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318447/20ff79d1-b54f-72c3-9c11-481f1411dc42.png)

## configの編集

ユーザーファイル下の隠しフォルダ(.ssh)内のconfigを編集します．

```config:
Host OBCX
  HostName obcx.cc.u-tokyo.ac.jp
  User Oakbridge-CXのログインID
  IdentityFile 秘密鍵のパス
```


Host ：接続時の名前（わかりやすい名前なら何でも良い）
Hostneme ：obcx.cc.u-tokyo.ac.jp 
User : スパコンのログインID
IdentityFile : 登録した公開鍵に対応する秘密鍵のパスを入力

## VS codeからログイン
先程インストールしたRemote Developmentのアイコンが左側に追加されているはずなので，クリックし，左上のREMOTE EXPLORERをSSH Targetに変更します．
すると，先程入力したHostの名前が出ると思うので入力するとログインが可能です．

![スクリーンショット 2022-05-05 2.12.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318447/258dc1ce-01a3-5f98-4e11-bc7c7841b02c.png)

## 補足
ファイル->フォルダをワークスペースに追加
よく使う作業ディレクトリを保存できたりします．
Glideで作成したアプリを使って、業務監査に役立つかどうか試してもらった


# 業務監査とは

「業務監査」　この言葉は、企業で働く人にとっては身の引き締まる言葉だ。
　一般の説明を調べてみると「企業の会計業務以外の業務活動に対する監査と定義されますが、要は会計以外の業務まで広くチェックする活動」とある。
　詳しく説明すると長くなるが、個人的にはお店の通信簿のように考えている。良い点数を取ればそれだけ信頼できるお店として評価されるからだ。私が働く店舗でも1年に1回、その監査が行われる。**そのチェック項目は多岐にわたり、一つ一つをチェックしながら監査の準備をするのは非常に大変な業務といえる。**
　お客さんのいないバックルームでは、大きな張り紙が掲示され、店の従業員全員で取り組むべき課題ともなっていて、この時期の仕事は非常に忙しくなる。
　今回、自分が学んでいることを生かして、この業務監査の負担を少しでも減らすことができないかチャレンジしてみた。

![業務監査⑤.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620988/e1b16e4f-1e31-4107-80ac-7e55632791c5.jpeg)



# 業務監査におけるチェック体制での課題

　業務監査での課題はたくさんあるが監査項目を消し込んでいくうえで、それぞれグループや個人として対応すべき課題が沢山ある。その項目は自分の部門や役割によって異なり、それが対応を煩雑にすることになる。わかりやすくするために現状では次のような方法をとっている。


![業務監査④.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620988/45407f00-1052-ca54-266a-4eb49a057ab6.jpeg)

　大きく掲示してあるものの項目一つ一つを確認しながら、押印によって消し込んでいく方法は良いものだ。そうすることによってだれがどの項目を実施しているか、していないかが分かる。そしてチェック項目が該当しないグループの部分は黒く塗りつぶしてある。
　しかし大きく印刷してあるものの、字は**小さくて読みやすいとは言えない**、老眼が入っている私は老眼鏡をかけないと見えない。さらに、**項目をチェックするために売場とこの表を行ったり来たりして消し込んでいかなくてはならない**。店内は広いので、それだけでも大変な作業だ。

# 課題の解決に向けてアプリ作成

　そこで**Glide**を使って、簡単なアプリを作ってみた。

![2022-05-04_02h34_24_AdobeCreativeCloudExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620988/ce5b00b7-0e58-db20-555a-239239029c69.gif)

　 Glideはノーコードでアプリが作れるツールだ。基本的なアプリは、スプレットシートを1から作成するかサンプルから転用して編集して作成する。つまり**作成したスプレットシートとGlideがあればそれだけで作れる。**
　Glide上でスプレットシートを選択するとそれだけで基本のアプリが作成される。この画面を見ただけで、うれしくなる。
　最初のタブでは、監査項目の全体像を入れる。そして他のタブでは、それぞれのグループと監査項目を確認できる。自分のグループには当てはまらない項目は既に削除されているので、書かれているすべて項目は自分に当てはまると一目で確認できる。スマホに入れるので、売場にいながら項目をチェックできる。

# 実装してみた結果と課題

　作成した後、QRコードを会社のスマホで読み込み、アプリを立ち上げてみる。少し感動。その後、同僚に声をかけて試してもらう。「すごいね、こんなのよくできるね」と上々の評価。何か改善点や問題点を挙げてもらうと、次のような意見が…。

- 目立たせたい部分は**字を大きく**した方が見やすい。

- 避難経路が言えるの項目などは、なぜそうするのか**理由なども含め**たらいいのではないか。

- グループとしての項目と個人としての**項目を分ける**ようにすればいいのではないか。

- **他店の取り組みや結果から生かせる点**を記したらいいのではないか。

　聞いてみるといろいろと意見をくれる。確かにそうだと思うものばかりだ。ちなみに上司の「他店の取り組みや結果から生かせる点を参照できるように」という点はすでに対応する準備ができている。
　体裁やチェックの仕方などについてもまだまだ改善の余地がありそうなので、相談しながら実際に使ってもらえるようなアプリにしていきたい。

:::note info
会社のスマホにアプリを入れることは、セキュリティ上も問題ないことを上司に説明したうえで1台のみインストールし、実際に使ってもらった結果です。
:::


# まとめ　チャレンジしてみて分かったこと

　今回は、直近の課題をもとに、Glideでのアプリがどのように役立つかを実際に考え、作成し、実際にやってみてフィードバックをもらうことまで経験できた。
　プロトタイプを作成し、実際にアウトプットする、「プロトアウト」とはこういうものなのか、それを体験できたことはとてもうれしい。まだまだ足りない部分は多いが、チャレンジしていく。
独立系Sier経営へのデータサイエンス適用の検討メモ

# この記事は何なのか
独立系Sierの経営にデータサイエンスを適用する検討を個人的にしていたんだけど、もう一人だけではモチベーションが保てそうにないので、いったん全部ここに吐き出して他の人に見てもらう。他者の目や意見やご協力等で、最終的な結果を出したい。今までやってきたことを無駄にしたくない。

## 将来の目標
以下、これから書いてく。
【Swift】オリジナルのSFSymbolを作成する

# 素材
![スクリーンショット 2022-05-05 0.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5a400211-3a69-4471-0893-ffc7179d0f0e.png)
今回はTwitterの公式から提供されている「[Twitter logo](https://about.twitter.com/en/who-we-are/brand-toolkit)」をSFSymbol化していこうと思います。

# 手順1
![スクリーンショット 2022-05-05 0.18.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7d12d4bc-eba0-e8a7-e763-dc20a0af5b55.png)

初めに「circle」を選択します。

![スクリーンショット 2022-05-05 0.19.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e8763971-0973-8f2e-b1eb-bc0580b29980.png)

「circle」を選択した状態で
ファイル → カスタム・シンボル・テンプレートを書き出す
実行してファイルを保存しましょう。

![スクリーンショット 2022-05-05 0.19.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4a55affa-3f38-f39d-53c2-55993bff1a72.png)

私は「twitter.svg」で保存しました。

# 手順2
Twitter公式からダウンロードしたデータの「Logo black.svg」を使用します。
![スクリーンショット 2022-05-05 1.02.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/618fd52f-ca6c-db3d-642e-5f857b4ab3e2.png)

「Logo black.svg」を開くとこのようになっています。
`<path>`がSVGの形を作っています。
こちらをコピーしてください。

![スクリーンショット 2022-05-05 0.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a9cfcc1a-a40f-37f3-c21b-4737135d232e.png)


続いてSFSymbolsで書き出したファイルを開いてください。
下の画像で選択している箇所に先ほどコピーしたものをペーストしましょう
![スクリーンショット 2022-05-05 0.25.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/2248cbb2-e134-c086-1df8-6c2008c099ec.png)

このようになったはずです。
高さと大きさがおかしいですね
調節していきます。
![_nts_twitter.svg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a4712128-df3a-0ef1-b254-53162d57ac73.png)

下の画像で選択している箇所で大きさと位置を決めています。
![スクリーンショット 2022-05-05 0.26.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/fe71b6bb-3880-8cdd-3115-0208ed17c0be.png)
調節が終わるとこんな感じになります。
今回はWeightの違いはないので全て同じにしています。
これをあと2行やっていきます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b989544c-708a-0f39-0f47-3887e609550b.png)

こうなったらCustomSymbolの完成です。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/bd410d06-e4df-aaad-ebd1-eb705806bf58.png)

# 手順3
XCodeで読み込んでいきます。
通常の画像と同様に「Assets.xcassets」にドラッグするだけで大丈夫です。
![スクリーンショット 2022-05-05 1.20.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7a2b2bd4-63e2-7d8c-2ce5-cecdbe77720a.png)

あとは通常の画像のように使用が可能です。
![スクリーンショット 2022-05-05 1.22.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/619148a6-5a1a-d833-43bd-da3e684dc4e5.png)

# 追記
https://iconscout.com/unicons/explore/line

↑ こちらのサイトのアイコン約1200個をSFSymbolにしました。 ↑
↓ ぜひ使ってみてください ↓

https://github.com/SNQ-2001/unicons-symbols

# おわり
現在、SwiftUIでSVGを扱おうとするとちょっと苦労するのでこれは楽ちんで良いです。
よく使うSVGなどはSFSymbolに変換後、パッケージ化して再利用可能にしておくと開発がスムーズに進んで良いかもしれないですね！
さん
サンプルを上げておくので参考にしてください

https://github.com/SNQ-2001/Custom-Symbol-TwitterLogo
saveAsJSONL.js【JSON Lines】

```javascript
function saveAsJSONL(data, name=new Date().toLocaleString('sv').replace(' ','T').replaceAll(':','_')+'.jsonl') {
  const a = document.createElement('a')
  a.download = name
  a.href = URL.createObjectURL(new Blob([data.map(JSON.stringify).join('\n')], {type: 'application/jsonlines+json'}))
  a.click()
}
```
### JavaScriptのデータを保存する
Usage
```javascript
saveAsJSONL(['pen', 'pineapple', 'apple', 'pen'])

// ファイル名を指定
saveAsJSONL(['pen', 'pineapple', 'apple', 'pen'], 'hoge.jsonl')
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/92b9ef9c-bb34-00d4-059e-b99d0478185a.png)

### Pythonでデータを読み込む

```python
import pandas as pd

pd.read_json('hoge.jsonl', lines=True)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/854380f3-c01b-08e0-08c6-d2f1f3e23774.png)

https://colab.research.google.com/drive/1hPT9_ImTj4YPHyH6UhTWOj_N2ejK7bks?usp=sharing

### JavaScriptでデータを読み込む

```javascript
const url = 'https://gist.githubusercontent.com/GitHub30/7599230721e390ec51345f7db3e930db/raw/4ebb3c648499200593e84315c362105008d01869/hoge.jsonl'
const array = await fetch(url).then(r=>r.text()).then(text => text.split('\n').map(JSON.parse))
console.log(array)
```

<p class="codepen" data-height="300" data-slug-hash="RwQPxgE" data-user="04" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/04/pen/RwQPxgE">
  Untitled</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 参考

https://stackoverflow.com/questions/51690624/json-lines-mime-type#comment122920211_67807011

https://mailarchive.ietf.org/arch/msg/json/dWMWD0JDa2HiUYjWjLjrQExeIx4/

https://github.com/wardi/jsonlines/issues/9
【Unity】コード内で動的にSkyBoxを変更する方法（自分用メモ）

今回のSkyBoxには[AllSky - 220+ スカイ / スカイボックスセット
](https://assetstore.unity.com/packages/2d/textures-materials/sky/allsky-220-sky-skybox-set-10109?locale=ja-JP)の「Anime Day Equirect」を使用しています。

# 初めに
UnityでSkyBoxを設定するためには、Window-Rendering-Lightingメニュー、Environmentタブの「SkyBox Material」の欄を変更する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681124/e02b5c29-7a14-7e03-e01c-8aeaeb484b52.png)

今回はSkyBoxを動的にコード上で変更したかったので、やり方を調べた。

# 結論
void Startで夕方のSkyBoxに変更するコード。
```cs
public class BackGroundController : MonoBehaviour
{
    [SerializeField] Material sunsetSkyMaterial;

    void Start()
    {
        RenderSettings.skybox = sunsetSkyMaterial;
    }
}
```

あらかじめ用意しておいたSkyBoxのMaterialを、RenderSettings.skyboxプロパティにセットするだけ。

# おまけ

SkyBoxをゆっくり回転させて雲が動いているように見せる方法を教えてくれる記事があったので、備忘に貼っておく。

「Unityで空の雲を動かす」https://gametukurikata.com/basic/rotateskybox
Firebase に Next.js のアプリケーションを Hosting する


`Firebase`はランニングコストが無料なので今回は`Next.js`のアプリケーションを公開するところまでやってみる。

# Next.jsのアプリケーションをcreateする

[アプリケーションを新規作成](https://nextjs.org/docs)

```bash
npx create-next-app@latest --typescript
```

上記で作成したプロジェクトはデフォルトのままだと静的ファイルを export したときにエラーが出るので一部を編集。

```diff:pages/index.tsx
         >
           Powered by{' '}
           <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+            {/* <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> */}
           </span>
         </a>
       </footer>
```

# 手動で Firebase にデプロイする

Firebase cliをインストール。

```bash
npm install -g firebase-tools
```

初期設定 & [firebase.json](https://firebase.google.com/docs/hosting/full-config) 生成する。公開ディレクトリは out に変更する。

```bash
$ firebase login
$ firebase init hosting
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: <YOUR-PROJECT-NAME>
? What do you want to use as your public directory? (public) out
? Configure as a single-page app (rewrite all urls to /index.html)? No
```

npm script に export を追加。

```diff:package.json
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "next": "12.1.6",
```

build & export

```bash
npm build && npm export
```

デプロイ。

```bash
firebase deploy --only hosting
```

# github actionsで自動デプロイする

mainブランチを push したときに自動で Firebase にデプロイする。

```yaml:.github/workflow/firebase-hosting-merge.yml
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches: main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Cache node modules
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Build to Static file Export
        run: npm ci && npm run build && npm run export
      - name: Firebase Hosting Deploy
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_<YOUR-PROJECT-NAME> }}'
          channelId: live
          projectId: <YOUR-PROJECT-NAME>
```

# アプリケーションを実装する

割愛。