OmniAICreator/Qiita-1.07M huggingface dataset:
【プチDXコンテスト2022】kintone・obniz・MESHを連携する

# [プチDXコンテスト2022](https://page.cybozu.co.jp/-/dxcontest-2022?utm_source=Twitter&utm_medium=display&utm_campaign=CBDN_TWlink_KW_DXcontest_ITC)に応募しよう！
まずはkintone・obniz・MESHの3製品を連携させるところに挑戦しました！

# 環境
* kintone（お試し版アカウント）
* obniz Board 1Y（obnizOSバージョン3.5.0）
* MESH温度湿度センサー（バージョン1.2.5）
* Visual Studio Code

# やったこと
主にコンテストページにリンクのある[この記事](https://blog.obniz.com/make/mesh-obniz-kintone)を参考に進めました。いくつかつまづいた点があったので、順を追ってご説明します！

##### （1）kintoneの準備をします
* [kintoneのお試し版アカウント作成](https://kintone.cybozu.co.jp/trial/)
コンテストページでは開発者ライセンスを取得することが推奨されていましたが、ライセンス取得に必要なcybozu developer networkアカウント作成ページがサーバエラーで開けませんでした…
そこで、cybozu developer networkアカウントがなくても作れる30日間利用できる無料アカウントを利用することにしました。

* アプリ作成
記事記載のやり方でうまくいきます。

##### （2）MESHブロックの準備をします
* [Windows版MESHアプリダウンロード](https://support.meshprj.com/hc/ja/articles/360050022954)</dt>
64bit版をダウンロードしました。

* MESHとPCをBluetooth接続できるか確認
Windows版MESHアプリの指示通りに進めればOKです。MESHを電源につなぐことをお忘れなく！

##### （3）obnizの準備をします
* obnizの設定をする
wi-fi接続や開発者コンソールへのアクセスは、obniz付属の説明書を参考にしました。

* [node.jsのインストール](https://nodejs.org/ja/)
以下コマンドを打つ前にインストールする必要があります。

* ライブラリのインストール
記事記載の以下コマンドを、Visual Studio Codeのターミナルで実行しました。
```
npm install obniz@3.23.0 @kintone/rest-api-client
```

* プログラムの作成
thermohygrometer.jsというファイルを作成し、その中に記事記載のコードをコピペしました。
ちなみに、Config部分は以下のように書くとうまくいきます。
```javascript:thermohygrometer.js
const Config = {
  kintone: {
    apiToken: "kintoneのAPIトークンをコピペ",
    baseUrl: "https://サブドメイン.cybozu.com",
    appId: 5 //https://サブドメイン.cybozu.com/k/n ←nに当たる数字を入力
  },
  obnizId: "nnnn-nnnn",
};
```

# 困ったこと
### MESHとobnizが接続されない
##### 原因①：バージョン間違い
* MESHのバージョンは**1.2.5**以降である必要がありますが、手持ちのMESHのバージョンは1.1.6でした
* MESHのUpdateについては、Windows版アプリではできないようです（2022年11月時点）
* そのため、[iOSのMESHアプリ](https://meshprj.com/jp/products/app/index.html)をダウンロードしたうえでiPhoneとBluetooth接続し、[この記事](https://support.meshprj.com/hc/ja/articles/360044527434-MESH%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E6%96%B9%E6%B3%95)を参考にバージョンを1.2.5にアップデートしました。
##### 原因②：MESHには1台ずつしかBluetooth接続できない
* コンソールに以下メッセージが表示された後、1分以上表示が更新されない場合は、他端末がMESHとBluetooth接続していないかどうかを確認し、切断したうえで再実行してください
```
2022-11-18T05:07:56.214Z program start
2022-11-18T05:07:56.550Z obniz connected
2022-11-18T05:07:58.314Z name: MESH-100BU1011451
```

# 実行！
* Visual Studio Codeのターミナルで実行しました。
```
node thermohygrometer.js
```

* ターミナル表示
```
2022-11-18T05:07:56.214Z program start
2022-11-18T05:07:56.550Z obniz connected
2022-11-18T05:07:58.314Z name: MESH-100BU1011451
2022-11-18T05:07:58.575Z name: MESH-100TH1010406
2022-11-18T05:07:58.576Z found
2022-11-18T05:08:04.621Z connected
2022-11-18T05:08:04.848Z temperature: 27, humidity: 42
2022-11-18T05:08:04.848Z temperature: 27, humidity: 42
```

* kintoneのアプリ
うまくいくとこのような表が出力されます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/0d3152fc-7f29-3fc3-9067-bfd02950167b.png)

# まとめ
最後までお読みいただきありがとうございました。
コンテストに向けた作品は、人感センサーを使ったアイデアグッズを作る予定です！
python node内でroscoreの実行

pythonのrosプログラムを実行するときにroscoreの立ち上げを省略したい
pythonプログラムでrosnode実行前に以下を追加でOK
(※ tyr ..., except ...で囲むことでrosocreが起動している場合は,起動処理が無視できる)

```python:run_roscore.py

import roslaunch
try:
    uuid = roslaunch.rlutil.get_or_generate_uuid(options_runid=None, options_wait_for_master=False)
    roslaunch.configure_logging(uuid)
    launch = roslaunch.parent.ROSLaunchParent(uuid, roslaunch_files=[], is_core=True)
    launch.start()
except:
    pass

# ========= write ros node =======
import rospy
rospy.init_node("aaa")
rospy.spin()
```

参考

https://answers.ros.org/question/215600/how-can-i-run-roscore-from-python/
TestContainer for .Netを使い、まっさらなDBでUnitTestを行う

# 目的
Usecaseに対して初期化したDBをTestContainer for .Netで用意しUnitTestをする

# 環境
* .Net6
* Docker
* docker-compose.yml
* EntityFrameworkCore
* Postgres
* TestContainer for .Net
* xunit
上記を利用します

# TestContainer for .Net
アプリ上でContainerの起動＆停止を行ってくれます。今回はPostgresのコンテナの起動＆停止を行います。
TestContainerはContainerのPullは行ってくれないので、事前にPullしておく必要があります。

```
docker pull testcontainers/ryuk:0.3.4
```

# Postgres
TestContainer経由でPostgresを立ち上げますが、こちらもPullしてくれないので、事前にPullしましょう
```
docker pull postgres:14.4
```

# 成果物
[リポジトリ](https://github.com/kyamamoto03/TestContainerSample.git)
にコードがあるので参照してください。

このコードは
1. UnitTest開始
1. TestContainerでPostgresから作成（テストクラス毎）
1. テーブル作成
1. 初期データを投入
1. テスト
1. DB削除
です

# テーブルと初期データ
Postgres起動時にinit.sqlを実行します。init.sqlはpostgresql\initにあり
/docker-entrypoint-initdb.dにマウントすることによりユーザ作成、テーブル作成、初期データ投入します

スキーマや初期データに変更がある場合はinit.sqlを書き換えてください。

# テストクラス
```C#
public class UserUsecaseTest : IClassFixture<TestBase>
```
TestBaseというクラスにTestContainerでPostgres起動するロジックを記載しています
UserUsecaseTestはIClassFixtureを継承しており、クラスの初期化でTestBaseを呼ぶことになります。

```C#
public class TestBase : IDisposable
{
    public TestBase()
    {
        //EntityFrameworkCoreの設定、TestContainerで立ち上げたPostgresに接続
        _services.AddDbContext<SampleDbContext>(Options =>
           {
               Options.UseNpgsql(UnitTestConnectionString);
           });

        //UnitTestで使うサービスをDIに登録
        _services.AddScoped<IUserRepository, UserRepository>();
        _services.AddScoped<IUserUsecase, UserUsecase>();

        ServiceProvider = _services.BuildServiceProvider();
        //TestContainer起動
        Initialize();
    }
    public void Dispose()
    {
        //Postgresの停止＆削除
        Task.Run(_postgresqlContainer!.DisposeAsync).GetAwaiter().GetResult();
    }

}
```
TestBaseのコンストラクタでDIの設定、TestContainer起動
Disposeで後始末を行っています。

詳細はコードを参照してください

```
[assembly: CollectionBehavior(DisableTestParallelization = true)]
```
でテストは直列で行うようにしています。これは並列にするとDBが複数立ち上がりリソース圧迫を防ぐ目的です。

# おまけ
UT/docker-compose.ymlを置いているので
```
docker compose up
```
でUnitTestで使用するDBと同じものを違うContainerで立ち上げることができます。
デバッグや開発ではこちらを使い、スキーマや初期データがそろったら、init.sqlを変更しUnitTestを行うというフローが出来ます
その場合
Database名:test
ユーザ：user
パスワード：pass
docker-compose.ymlに記載しているので適宜変更してください

# 感想
DBをテストクラス毎に起動＆停止を行うので試験に時間はかかりますが、本番環境とは違うDB、例えばInMemoryやSQLiteなどを利用することなく、本番と同環境でUnitTestが出来ることに意義があると思っています。
【Unity基礎】どのタイミング(イベント関数)で自作関数を呼び出せばよいのか/

# はじめに
スクリプトを作るとデフォルトで、イベント関数といわれるStartとUpdateがありますよね。(これが関数ということすら最近知った)

初めは教材を見様見真似で、自作関数を作成してデフォルトであるStart関数やUpdate関数内で関数を呼び出していた。
なるほどなるほど〜。と思いながらも自分で1から作ると、どのタイミングで関数を呼び出せばよいのか全くわからない。スタートとアップデートは何が違うのだ。イベント関数外でなんでわざわざ関数を作らなければならないのかと疑問を抱いた。
その為、基礎に戻ってイベント関数について改めて行きたいと思います。

# スタートとアップデートに書く内容
Start　:
スクリプトが呼ばれた時に1回だけ実行したい内容を書く

Update　　:
スクリプトが呼ばれた毎に実行したい内容を書く

その他にも、多くのイベント関数がある。
リファレンスhttps://docs.unity3d.com/ja/2021.3/Manual/ExecutionOrder.html

呼び出されるタイミングや回数が異なる為、用途に分けて使い分けるとよい。

# 自作のメゾットは何の為に？

### 自作するメリット
何回も同じコードを書かなくて良い。
コードが見やすくなる。

関数を自作することにより、作成した関数を何回も使い回すことが可能。
```
例）　
     private void Start() //イベント関数
        {
            aaa();
        }

    void aaa() //自作関数
        {
        処理内容
        }
   

```

### 注意
関数は呼び出す必要がある（ただ関数を作成しただけではいけない）。
RecyclerViewのスクロールを減速させてふわっと着地させる方法

RecyclerViewのスクロールをふわっと着地させる方法の紹介です。
サンプルコードも掲載しますが、完全なコードはこちらにあります。list表示にGroupieを使っていますが、本記事では解説しません。
https://github.com/takarabe-hamuyatti/EasingTest
### 最終イメージ
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1816697/1d5b2491-161d-7f8f-1dc2-8ecdc152a6e6.gif)
カクカクでわかり辛いですが、それなりにふわっとしてます。

### 減速させるためには
![dt_decel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1816697/e4df5c4c-542e-a4e2-760e-a5e34171fdbe.png)
目的地に到達する辺りで望んだ通りに減速させるということは、時間あたりに進ませる距離を事前に指示するということです。
一定の間隔で加速させる場合は、目的地までの残り距離で調節する必要はありませんが、減速の場合速度が0になれば当然スクロールは止まってしまいます。
そのため上記画像のように速度を逓減させて目的地に到達するためには、__減速する前__ に __目的地までの距離__ を図る必要があります。

### RecyclerViewのつらみ
この目的地までの距離を図る点で、目的地が画面外にある場合RecycerViewだと困難な点があります。
RecyclerViewは名前の通り画面外にいったviewのことはリサイクルして、効率的な動作を可能にしています。そのため画面外の目的地までの距離を算出することはRecyclerViewだとできません。画面内に入ったviewまでのスクロール量を調べるとしても、画面に入ったタイミングを検知する方法が必要です。

### どうやるか
LinearSmoothScrollerを拡張して実現します。

``` kotlin 
class EaseOutScroller(
    context: Context,
    private val durationOnFindTarget: Int = 550,
) : LinearSmoothScroller(context) {

    override fun onTargetFound(targetView: View, state: RecyclerView.State, action: Action) {
        if (durationOnFindTarget <= 0) return
        val dy = calculateDyToMakeVisible(targetView, verticalSnapPreference)
        action.update(0, -dy, durationOnFindTarget, DecelerateInterpolator())
    }
}
```
こんな感じで作ったのを

``` kotlin
 class ListFragment : Fragment(R.layout.fragment_list) {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val adapter = Adapter()
        val scroller = EaseOutScroller(requireContext())

        FragmentListBinding.bind(view).let { binding ->
            binding.list.adapter = adapter
            adapter.showList()

            binding.fab.setOnClickListener {
                if (scroller.isRunning) return@setOnClickListener
                scroller.targetPosition = 0
                (binding.list.layoutManager as? LinearLayoutManager)?.startSmoothScroll(scroller)
            }
        }
    }
}
```
`LinearLayoutManager` の`startSmoothScroll`の引数で渡してあげればOKです。

---

### 解説
登場人物
| 名前 | 解説 |
|:-:|:-:|
|  **calculateDyToMakeVisible** |  **LinearLayoutManager**に用意されている関数で、viewのインスタンスを渡してあげればそのviewが完全に見えるまでに必要なスクロール量を教えてくれる。 |
|  **onTargetFound** | スムーズスクロール中に、目的地のインデックスが画面内に現れた時に呼ばれる関数。引数で目的地のviewを持ってきてくれる。 |
| **Action**  |  スムーズスクロールを司っているクラス。このクラスに対して距離やアニメーションを指定してスクロールをかけ直すことができる。 |
| **DecelerateInterpolator**  | animationの変化の比率を表す **Interpolator interface** を継承している。減速用のInterpolator |

`calculateDyToMakeVisible` と`onTargetFound`を組み合わせる点が重要です。
onTargetFoundを利用すれば目的地のviewが画面内に入ってきたことがわかり、距離を算出できるタイミングになったことがわかります。
onTargetFoundの中で目的地のviewのインスタンスを受け取ってcalculateDyToMakeVisibleで距離を算出し、actionをupdateしてあげればふわっと着地します。

### 問題点
この方法はあくまで目的地のviewが見えてから減速させる方法です。もし、目的地が見える遥か前から減速を始めたいといった場合、この方法は使えません。ただそういった動きをするアプリは現状見たことないので、この方法で十分なケースがほとんどではないかとも思います。
SCRAMBLE BALL

## 目次
[はじめに](#はじめに)
[ゲーム概要](#ゲーム概要)
[開発環境](#開発環境)
[技術的アピールポイント](#技術的アピールポイント)
　[オンライン環境の実装](#オンライン環境の実装)
　[AI制御の実装](#AI制御の実装)
　[トゥーンシェーダーの実装](#トゥーンシェーダーの実装)

## はじめに
この記事は「SCRAMBLE BALL」というオンライン対戦ゲームの開発秘話です。
ぜひ最後まで楽しんで読んでください。

## ゲーム概要
スクランブルボールは「チームと連携し、フィールドに隠されたボール見つけだし相手ゴールにトライを決める」
オンライン対戦型のパーティアクションゲームです。

オンラインでみんなと遊べるアクションゲームを目指しました。
<iframe width="1280" height="720" src="https://www.youtube.com/embed/0exQbIfZ8dk" title="AIプレゼン用" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 開発環境
使用言語　　　： C++
開発環境　　　：Visual Studio 2019 community Version 16.9. 0
開発エンジン　：Basecross64 ( https://github.com/WiZFramework/BaseCross64.git )

## 技術的アピールポイント
下記に技術的アピールポイントをまとめたURLを記載しています。
ぜひ読んでみてください。

#### オンライン環境の実装

#### AI制御の実装
https://qiita.com/Maru40/private/fe56d5b5fd927ad28454

#### トゥーンシェーダーの実装
Salesforce認定アドミニストレーター試験合格率調査

こんにちは

今回はSalesforce認定アドミニストレーター試験の合格率を調査しました

今回の内容は動画でも公開しています

https://www.youtube.com/watch?v=kNKTaZD1-Kg

<iframe width="560" height="315" src="https://www.youtube.com/embed/kNKTaZD1-Kg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

まずはSalesforce認定アドミニストレーター試験の概要についてまとめました

Salesforce認定アドミニストレーター試験の詳細はこちらの受験ガイドをご確認ください

https://quip.com/5FXlAAIRTrqo

受験ガイドには
・内容: 多肢選択/複数選択方式の 60 問
（つまり記述式ではない）
・合格点: 65%
と大事な情報が多数書いております

これを見ると問題60問中で65％（約39問）あっていれば合格しそうですね

では、このSalesforce認定アドミニストレーター試験の合格率はどのようなものでしょうか

残念ながら公式的には正確な合格率は出ていなかったです

しかしながら、SalesforceとDeloitteが共同でスタートしたDX人材育成プログラムによるとこのように興味深い内容がございましたので見てみましょう

https://www.salesforce.com/jp/company/careers/pathfinders/


![０２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/8c466b3b-f15d-3498-8b4e-eb733a6cff89.png)
ここを見ると

※昨年度Pathfinder受験者の7割が2回以内に合格されています

と小さく書かれていますね

これを見ると2か月ほどトレーニングを受けた方でも、全員が合格はできなく2回以内で7割ほどの合格率ということが分かります


いかがでしたでしょうか

こちらの内容が、唯一でている公式的な情報だと思います

こちらについて皆様の参考になれば幸いです

他の合格率の情報がございましたら情報お待ちしております
ゲーム理論から見るDAOやWeb3.0

![スクリーンショット 2022-11-18 11.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/d0f42c25-758a-0849-2ddb-57104616c92f.png)


囚人のジレンマの話は皆さん聞かれた事があるでしょうか？
ゲーム理論の書籍や記事にはよく出てきます。

# ナッシュ均衡とパレート最適
ナッシュ均衡とは、ゲームのプレーヤーがお互いに合理的な行動を取った結果、その状態から誰も行動を変更しようとせず均衡する状態です。
パレート最適とは、相手の状態を悪化させないかぎり、自分の状態が改善できない状態です。
一番良いのは、ナッシュ均衡になった時にお互いがパレード最適になっていることがベストです。

# ゲーム理論とは
自分にとって合理的な行動をとった結果、相手に対して好ましくない影響を及ぼし、両者の行動の結果として、両者ともに好ましくない状況に陥ってしまう事です。
交渉事とか、戦略を考える時に、このゲーム理論にそって考える事で勝つことが出来ます。
よく事例では、
二人の囚人がいます。
・両方黙秘の場合は、懲役は1年
・お前だけが先に喋った場合は、お前は釈放、相手は懲役5年
という状況です。
二人とも黙秘がパレード最適。どちらかが喋らざるおえない状況としてナッシュ均衡が存在します。
信頼している仲間で絶対に裏切らないと分かっていたら黙秘で二人して懲役年が良いでしょうか？
それとも、裏切らないので先に喋って釈放された方が得策かもしれません。
この裏には関係値や二人の人格が複雑絡みあいそうです。

# ゲーム理論って役に立つの？
最初、ゲーム理論って役に立つの？と思ってました。
結局、関係値や人格が複雑に絡み合う中で、この理論を知った所で最適解は見いだせないので、上手に使う方法ってなんだろうと思ってました。
値下げ競争に関しては、大体がパレート最適に動くので、通信会社は大体同じ値段です。
たまにベンチャー等がマーケットを取りたいためにナッシュ均衡を破って、値下げに踏み切ります。大手が値下げしてくると更に値下げするしかなく、結構、リスクをとった戦略になります。大手が値下げしなさそうな場合のみ値下げ戦略をしかけると効果がありそうです。
これって相手の様子を見ながらの動きなので非常に不安定でゲーム理論という感じもしません。

# ゲーム理論が使われているのがリニエンシー制度
リニエンシー制度は、カルテルや談合を防ぐために適用されていて日本の制度です。カルテルや談合に参加した企業であっても、自主申告により課徴金が減免される制度になってます。
実際にリニエンシー制度で自主申告で課徴金を免除されている企業は存在してるみたいです。
リニア工事の談合の話は有名な話です。
アメリカでは、司法での取引制度を映画等でよく目にしますが、日本でもあったという話で、実際に運用されてる様です。現状の制度自体は、色々と課題がありそうですが、この考え方は、企業のコンプライアンスにも適用できそうとも思います。

# ゲーム理論とブロックチェーン
ゲーム理論は、制度に適用すれば運用できそうだと思いました。
企業のコンプライアンスのために通報制度を導入したり、社員の不満の洗い出し等の社員の感情を揺さぶる様な制度にできそうな気もします。
しかし、もっとも有効そうなのは、国の制度や選挙とか。
そして、ブロックチェーンもゲーム理論の上に成り立ってます。
チェーンの改ざんを行うよりもマイニング報酬をもらった方が得策という考え方です。
これは、DAO辺りとは相性が良さそうです。共同で運用するものに関して、不正を洗い出し防ぐ仕組みです。
DAOの中では、各自もっているトークンの値下がりに繋がらない様に不正が起こりにくい状態が保たれてます。
Web3.0、DAO、ブロックチェーンに興味ある人は、ゲーム理論を勉強してみてください。
皆さんもゲーム理論の良い使い方・事例について、何か気付いたら教えて下さい。
Discord Active Developerバッジについて

# 新規情報(2022/12/13)
公式によるとアクティブデベロッパーバッジの配布は、2023年1月まで申請停止するようです。
すでに持っている人はそのままプロフィールにバッジが残ります


## Active Developerバッジとは
2020年8月に早期認証Botデベロッパーのバッジが審査停止しました。代わりにこのバッジ(下記画像参照)が配布されるようになりました。
![ActiveDeveloperバッジ](https://support-dev.discord.com/hc/article_attachments/10226714575639)

[Discord-ActiveDeveloper](https://discord.com/developers/active-developer)にて申請可能です
**ただし以下の制約があるそうです**
## 少なくとも1つのアクティブなアプリ
Bot作ってる人なら分かりますが[DiscordDeveloperPortal](https://discord.com/developers)にてアプリを作る必要があります。
また、アクティブである条件は過去30日以内に[アプリケーションコマンドを実行している必要があります。](https://discord.com/developers/docs/interactions/application-commands)

## 登録手順
1. [Discord-ActiveDeveloper](https://discord.com/developers/active-developer)にアクセスし、ログインします。

2. ドロップダウンからアプリを選択する (これは、「アクティブ」であることを確認するアプリです)。最もアクティブなアプリにする必要がありますが、過去 30 日以内にコマンドが実行されたアプリであれば、どのアプリでもかまいません。

3. 次に、アプリの公式サーバーを指定します (たとえば、アプリ サポート サーバー、アプリ コミュニティ サーバー、またはアプリ開発サーバー)。
サポートサーバーリストにサーバーが表示されない場合は、探しているサーバーがコミュニティサーバーとして設定されていることを確認してください。

4. 最後に、Developer News チャンネルが表示される指定されたサーバー内のチャンネルを選択します。これにより、Discord API と Developer News に関する更新がサーバーのチャンネルに直接送信されます。

5. 程なくしてプロフィールにバッジが追加されます。やったね
※プロフィールに出ない場合はDiscordを再起動するか、しばらく待ってみると出ると思います。
AlmaLinux OS 9にRuby 3.1をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してAlmaLinux OS 9にRuby3.1をインストール

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux Application Streams Life Cycle \- Red Hat Customer Portal](https://access.redhat.com/support/policy/updates/rhel-app-streams-life-cycle)より、2025-03がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

9.0系で出たプロダクトはモジュールではなかったが、9.1系で出たプロダクトはモジュールの模様

```shell-session
# cat /etc/redhat-release
AlmaLinux release 9.1 (Lime Lynx)

# yum module list ruby
Last metadata expiration check: 0:09:08 ago on Fri Nov 18 06:46:38 2022.
AlmaLinux 9 - AppStream
Name          Stream          Profiles           Summary
ruby          3.1             common [d]         An interpreter of object-oriented scripting language

Hint: [d]efault, [e]nabled, [x]disabled, [i]nstalled

# yum module install -y ruby:3.1
... 略
```

### 各種確認

```shell-session
# which ruby
/usr/bin/ruby

# ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]

# yum info ruby
Last metadata expiration check: 0:10:04 ago on Fri Nov 18 06:46:38 2022.
Installed Packages
Name         : ruby
Version      : 3.1.2
Release      : 141.module_el9.1.0+8+503f6fbd
Architecture : x86_64
Size         : 91 k
Source       : ruby-3.1.2-141.module_el9.1.0+8+503f6fbd.src.rpm
Repository   : @System
From repo    : appstream
Summary      : An interpreter of object-oriented scripting language
URL          : https://www.ruby-lang.org/
License      : (Ruby or BSD) and Public Domain and MIT and CC0 and zlib and UCD
Description  : Ruby is the interpreted scripting language for quick and easy
             : object-oriented programming.  It has many features to process text
             : files and to do system management tasks (as in Perl).  It is simple,
             : straight-forward, and extensible.

Available Packages
Name         : ruby
Version      : 3.1.2
Release      : 141.module_el9.1.0+8+503f6fbd
Architecture : i686
Size         : 40 k
Source       : ruby-3.1.2-141.module_el9.1.0+8+503f6fbd.src.rpm
Repository   : appstream
Summary      : An interpreter of object-oriented scripting language
URL          : https://www.ruby-lang.org/
License      : (Ruby or BSD) and Public Domain and MIT and CC0 and zlib and UCD
Description  : Ruby is the interpreted scripting language for quick and easy
             : object-oriented programming.  It has many features to process text
             : files and to do system management tasks (as in Perl).  It is simple,
             : straight-forward, and extensible.
```
AlmaLinux OS 9にNodejs 18をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してAlmaLinux OS 9にNodejs 18をインストール

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux Application Streams Life Cycle \- Red Hat Customer Portal](https://access.redhat.com/support/policy/updates/rhel-app-streams-life-cycle)より、2025-04がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

9.0系で出たプロダクトはモジュールではなかったが、9.1系で出たプロダクトはモジュールの模様

```shell-session
# cat /etc/redhat-release
AlmaLinux release 9.1 (Lime Lynx)

# yum module list nodejs
Last metadata expiration check: 0:00:44 ago on Fri Nov 18 06:46:38 2022.
AlmaLinux 9 - AppStream
Name            Stream          Profiles                                           Summary
nodejs          18 [e]          common [d] [i], development, minimal, s2i          Javascript runtime

Hint: [d]efault, [e]nabled, [x]disabled, [i]nstalled

# yum module install -y nodejs:18
... 略
```

### 各種確認

```shell-session
# which node
/usr/bin/node

# node -v
v18.10.0

# yum info nodejs
Last metadata expiration check: 0:02:08 ago on Fri Nov 18 06:46:38 2022.
Installed Packages
Name         : nodejs
Epoch        : 1
Version      : 18.10.0
Release      : 3.module_el9.1.0+13+d9a595ea
Architecture : x86_64
Size         : 43 M
Source       : nodejs-18.10.0-3.module_el9.1.0+13+d9a595ea.src.rpm
Repository   : @System
From repo    : appstream
Summary      : JavaScript runtime
URL          : http://nodejs.org/
License      : MIT and ASL 2.0 and ISC and BSD
Description  : Node.js is a platform built on Chrome's JavaScript runtime
             : for easily building fast, scalable network applications.
             : Node.js uses an event-driven, non-blocking I/O model that
             : makes it lightweight and efficient, perfect for data-intensive
             : real-time applications that run across distributed devices.
```
eksctlでクラスターを作成する時の事前準備

eksctlとは、AWSでKubernetesを操作するAWS EKSのコマンドラインツールのことを指す。
以下から、curlやhomebrewでインストールが事前に必要。

https://github.com/weaveworks/eksctl#installation

次のコマンドではデフォルトのクラスタが生成される。

```
eksctl create cluster
```
・自動生成された名前を持つ
・m5.largeの2台のworker nodes
・EC2は、公式AWS EKS AMI
・EKS用のvpcが生成される。

注意点は、リージョンがus-west-2になること。
リージョン指定は、以下のようなコマンドで指定できる。
```
ksctl create cluster --name 作成するクラスター名 --region ap-northeast-1 --profile 指定したIAMユーザー
```

もしも、カスタマイズが必要であれば、yamlファイルを作成し、コマンドからyamlファイルを指定して、
生成をする。yamlに記載する。
```
eksctl create cluster -f cluster.yaml
```

yaml例: https://eksctl.io/

```
apiVersion: eksctl.io/v1alpha5
kind: ClusterConfig

metadata:
  name: basic-cluster
  region: eu-north-1

nodeGroups:
  - name: ng-1
    instanceType: m5.large
    desiredCapacity: 10
  - name: ng-2
    instanceType: m5.xlarge
    desiredCapacity: 2
```
AlmaLinux OS 8にRuby 3.1をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してAlmaLinux OS 8にRuby 3.1をインストール

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux Application Streams Life Cycle \- Red Hat Customer Portal](https://access.redhat.com/support/policy/updates/rhel-app-streams-life-cycle)より、2025-03がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

```shell-session
# cat /etc/redhat-release
AlmaLinux release 8.7 (Stone Smilodon)

# yum module install -y ruby:3.1
... 略
```

### 各種確認

```shell-session
# which ruby
/usr/bin/ruby

# ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]

# yum info ruby
Last metadata expiration check: 0:07:55 ago on Fri Nov 18 06:23:25 2022.
Installed Packages
Name         : ruby
Version      : 3.1.2
Release      : 141.module_el8.7.0+3304+9392e77f
Architecture : x86_64
Size         : 89 k
Source       : ruby-3.1.2-141.module_el8.7.0+3304+9392e77f.src.rpm
Repository   : @System
From repo    : appstream
Summary      : An interpreter of object-oriented scripting language
URL          : https://www.ruby-lang.org/
License      : (Ruby or BSD) and Public Domain and MIT and CC0 and zlib and UCD
Description  : Ruby is the interpreted scripting language for quick and easy
             : object-oriented programming.  It has many features to process text
             : files and to do system management tasks (as in Perl).  It is simple,
             : straight-forward, and extensible.

Available Packages
Name         : ruby
Version      : 3.1.2
Release      : 141.module_el8.7.0+3304+9392e77f
Architecture : i686
Size         : 89 k
Source       : ruby-3.1.2-141.module_el8.7.0+3304+9392e77f.src.rpm
Repository   : appstream
Summary      : An interpreter of object-oriented scripting language
URL          : https://www.ruby-lang.org/
License      : (Ruby or BSD) and Public Domain and MIT and CC0 and zlib and UCD
Description  : Ruby is the interpreted scripting language for quick and easy
             : object-oriented programming.  It has many features to process text
             : files and to do system management tasks (as in Perl).  It is simple,
             : straight-forward, and extensible.
```
AlmaLinux OS 8にNode.js 18をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してAlmaLinux OS 8にNode.js 18をインストール

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux Application Streams Life Cycle \- Red Hat Customer Portal](https://access.redhat.com/support/policy/updates/rhel-app-streams-life-cycle)より、2025-04がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

```shell-session
# cat /etc/redhat-release
AlmaLinux release 8.7 (Stone Smilodon)

# yum module install -y nodejs:18
... 略
```

### 各種確認

```shell-session
# which node
/usr/bin/node

# node -v
v18.9.1

# yum info nodejs
Last metadata expiration check: 0:03:56 ago on Fri Nov 18 06:23:25 2022.
Installed Packages
Name         : nodejs
Epoch        : 1
Version      : 18.9.1
Release      : 1.module_el8.7.0+3343+ea2b7901
Architecture : x86_64
Size         : 47 M
Source       : nodejs-18.9.1-1.module_el8.7.0+3343+ea2b7901.src.rpm
Repository   : @System
From repo    : appstream
Summary      : JavaScript runtime
URL          : http://nodejs.org/
License      : MIT and ASL 2.0 and ISC and BSD
Description  : Node.js is a platform built on Chrome's JavaScript runtime
             : for easily building fast, scalable network applications.
             : Node.js uses an event-driven, non-blocking I/O model that
             : makes it lightweight and efficient, perfect for data-intensive
             : real-time applications that run across distributed devices.
```
Semantic Versioningの値は具体的にどうしてくれよう

作成したアプリケーション／サービスにバージョンを付与したい。付与する値は、[Semantic Versioning](https://semver.org)の考え方に則ったものにしたい。

とはいえ、具体的にどのような値を入れ込むと、運用が楽になるものなのだろうか？

参考がてらに、世間のアプリでの付与方法を眺めてみたい。

## 眺めてみたい

* `yyyy`はfull year、`yy`はlast 2 digits
* `mm`はmonth、`0m`はzero padding
* `dd`はday、`0d`はzero padding

|アプリ名|バージョン例|構成 (たぶん…)|感想|
|:-|:-|:-|:-|
|Apple Store|5.18|`${MAJOR}.${MINER}`|ごく普通|
|Netflix|15.8.0|`${MAJOR}.${MINER}.${PATCH}`|ごく普通|
|Windy|37.2.4.14|`${MAJOR}.${MINER}.${PATCH}.${PATCH2}`|階層が増えた|
|Gmail|6.0.221030|`${MAJOR}.${MINER}.${yy}${0m}${0d}`|年月日の足音|
|Google Drive|4.2022.44200|`${MAJOR}.${yyyy}.${PATCH}`|おもむろに西暦|
|Microsoft Outlook|4.2244.1|`${MAJOR}.${yy}${MINER}.${PATCH}`|年を混ぜていくスタイル|
|Amazon Music|22.14.5|`${yy}.${MINER}.${PATCH}`|年が台頭|
|Reddit|2022.42.0|`${yyyy}.${MINER}.${PATCH}`|完全に西暦|
|Xbox Game Pass|2210.44.908|`${yy}${MAJOR}.${MINER}.${mm}${0d}`|年月日の侵食が始まる|
|Xbox|2022.09.2|`${yyyy}.${0m}.${PATCH}`|年月の双頭体制|
|Microsoft Translator|22.10.2.2|`${yy}.${mm}.${PATCH}.${PATCH2}`|細かい階層で足掻く|
|Xbox Family Settings|20220429.220517.6|`${yyyy}${0m}${0d}.${yy}${0m}${0d}.${PATCH}`|覚醒気味|
|Slack|22.09.40|`${yy}.${0m}.${PATCH}`|シンプルに支配|
|Todoist|22.11.9|`${yy}.${mm}.${dd}`|年月日全肯定|

## 感想まとめ

* 年月日をいい感じに混ぜるのがコツなのかもしれない
  1. 相対的に、数値小は過去のとある点において作成された（旧）、数値大は未来のとある点において作成された（新）ということは分かる
  1. そこに年月日という絶対的な基準を持ち込むことで、過去と未来が時間軸上でより一層明確になるのでなんたらかんたら？
  1. [Calendar Versioning](https://calver.org/)なだけかもしれない…
* Microsoftの多彩なバージョニング
  * それに比べるとGoogleはもう一声欲しい
建設とITの類似性の考察

ITではエンジニアのことをDeveloperと言いますが、建設業者のこともDeveloperと言います。
なんとなくオフィスの中でパソコンとにらみ合う仕事と、かたや青空のもとで動き回る仕事と、イメージはかけ離れている中で、英語の呼び方が一緒というのは、意外な共通点ではないでしょうか。（ぼくは気づいたときに意外だと思いました）
Developはとても古い単語なので、ITエンジニアのことよりもずっと昔から、建設業者に用いられていたと思います。

建設業の中には施工管理という領域があります。施工とは工事を実施することで、施工を管理するから、施工管理です。
業務内容はIT業界で言うところの、広義のプロジェクト管理ととても近いと思います。

施工管理は大きくわけるとこの様に分類できます。
* 原価管理
* 工程管理
* 品質管理
* 安全管理

安全管理は建設業ならではですが、それ以外はほとんど同じことをIT業界でもやっています。

呼び名も同じで、管理方法も似ている業界なので、特にプロジェクト管理の部分の類似性について考察を行っていきたいと思います。

## 原価管理
お見積りの業務のことを原価管理といいます。
案件に応じて、工数見積を行って人工（ITの人日と同じ）で計算したり、水道管の長さで計算したりします。この積み上げの作業を積算と言って、ITの工数見積もりに似ています。
開発工数のバラつきは少ないためだと思いますが、ボトムアップ型の見積もりになっています。
ITと同じように、工数が読みにくいトンネルや橋などの難工事は、別の見積もり手法が用いられているかもしれません。

エンドに提示する見積もりは、原価に対して一定のマージンを乗せる方法が主流です。こちらもITとよくにています。
受注側がリスクをとる、請負契約（建築請負契約）が多いです。調査したことはないですが、ITだと発注側がリスクをとるほうが多い印象です。

建設は請負契約から引き渡しまで、半年〜１年は平気でかかる業界ですが、部材（建材・建具など）は必要なタイミングで都度発注します。通常は請負契約直後に部材を押さえるということはしません。場所も取りますし途中でお施主様からの仕様変更もありますし、そのあたりの効率やリスクヘッジを考えてこのやり方になっているものと推察します。
請負契約では、契約時に金額まで確定するので、引き渡しまでの半年〜１年の間に部材の価格が急速に値上がりした場合（直近2022年がまさにそう）、赤字工事になります。
受注側が赤字を引き受けて請負金額のまま引き渡しまで行うケースと、どうしても差額が大きい場合は施主に追加費用のご相談をするケースがあります。

ITの場合は、当初の見積もり以上に工数がかかって赤字プロジェクトということが多いと思います。
住宅の工事は工数が大きくずれるということは少ないですが、橋やトンネルのような難工事ではありえます。

工事は金額が大きいので、この原価管理で失敗すると、「忙しく仕事しているが何故か利益が残らない」ということにも繋がります。とても大切な業務です。

似ていないところは、関係する専門職の種類です。１つの住宅を建設するときには３０業種（工種とも。専門用語です。職人さんの種類だと思ってください。）と多様な職人さんが関係してきます。ITと比べて圧倒的に多いです。
それもあるのか、ITでは原価管理のための特別なシステムはあまりありませんが、建設業では原価管理のための特別なシステムが多数存在します。

## 工程管理
工程管理はITと全く同じ呼び方ですね。利用される帳票もガントチャートになります。
ガントチャートも[Wikipediaによると](https://ja.wikipedia.org/wiki/%E3%83%98%E3%83%B3%E3%83%AA%E3%83%BC%E3%83%BB%E3%82%AC%E3%83%B3%E3%83%88)、ダムや高速道路で使われたとのことで、もともとは建設領域で使われていたもののようです。
ITとの違いは以下のようになります。
* 人だけでなくモノや重機のアサインも管理が必要
* 移動時間も重要な要素
    * Aさんが１日で３現場回れるなら、１日で３プロジェクトに登場できます。
* 工種が多岐にわたる
    * 一度パスが乱れるとかなり複雑な予定調整が必要になります
    * そのため、工程管理は手配、差配に多くの時間を割く業務といえます。

このあたりの業務は、ITで解決できる事が多いですが、利用者側にもITリテラシーが求められるという制約があります。
IT業界向けのプロジェクト管理は、利用者が高いITリテラシーを持っていることもあって、IT業界以外が使うことが出来ないサービスが多く、ガラパゴス化してきています。

機能だけ見ると、BacklogやAsanaなどのプロジェクト管理ツールは、ほとんどそのまま建設業でも利用可能です。実際に海外ではAsanaを建設業の用途で利用しているケースがあるようです。
海外サービスは日本語訳がわかりにくいこともあり、ITリテラシーが低い人にはまだまだ使うのが難しいサービスだと思います。

わたしは車輪の再発明をしたくないと常々思っていますが、ITと建設業は共通点が多いため、いずれ全く同じプロジェクト管理ツールが使われることになると思っています。

プロジェクト管理ツールに携わられている方で、同じ考えをお持ちの方は、ぜひ情報交換を行いましょう！

## 品質管理
ITで言えば、単体テストや結合テストやテストコードや自動化テストやいろいろありますが、こちらも似ています。
品質をチェックするためのチェックリストがあり、工程に応じてチェックを行い、記録を残します。

パネル工法やプレキャストコンクリートやプレハブ工法など、工場で製造して、運んで、現場で組み立てるケースは、工場で単体テストを実施して、現場で結合テストをするイメージになります。
場合によっては工場の中で一度完全に組み立てのテストまでやってから、再度バラして現場で組み立てるようなこともするので、テスト環境やステージング環境で結合テストをやってから本番リリースをするのにも似ています。

## 安全管理
建設では安全管理がとても大切な業務です。
決められた手順で行っているか、衛生環境は清潔に保たれているか、健康やストレスはどうか、といったことをしっかり管理します。
それこそ人命に関わってくるので、安全管理者の選任や配置に関する条件は、法律で定められています。

ITでは安全管理はあまり言われることはありません。通常の労務管理以上には特段規制もありません。
それでも、過労などの問題も起きがちな業界ではあるので、建設から学ぶことはまだまだたくさんあるのかもしれません。

# まとめ
* ITと建設業界はDeveloper仲間。呼び方もやってることも実は似ている。
* 建設業界のほうが古く、IT業界はまだまだ学ぶことは多い。
* 工程管理のはIT業界が優れたサービスを利用している。将来はITも建設業も同じシステムを使えたら良いな

類似性の高い建設業界とIT業界が、もっと近くなるともっと面白い相乗効果があると思っています。

弊社マイホムは、テックドリブンで住宅業界をより良くしていきたいと思っています。
優れたエンジニアと優れた住宅業界出身者が集まって、ユーザーファーストの良いチームが作れているので、ご興味をお持ちの方はぜひ遊びに来てください。
【テトリス作成⑨】ゲームオーバーの実装について深掘る

こちらを元に解説しています。
https://qiita.com/hanatan079/items/3675855784e14acda119

★★★★★随時更新★★★★★
2022.11.22追記
2022.12.3追記
2022.12/9追記
★★★★★★★★★★★★★★★

(ライブラリ)
　　　【シーン移動】
```
using UnityEngine.SceneManagement;
```

(変数)
　　　【パネル格納】
```
    [SerializeField]
    private GameObject gameOverPanel;
```

　　　【ゲームオーバー判定】
```
    bool gameOver;    
```


　　　【ゲームオーバーパネルの非表示設定(スタート)】
```
        ①if (gameOverPanel.②activeInHierarchy)
        {
            ③gameOverPanel.SetActive(false);
        }
```

①ゲームオーバーパネルが現在表示されているのか
②Hierarchyで表示されているか
③~~falseならgameOverPanelを非表示にする~~
パネルが表示　されているなら、gameOverPanelオブジェクトを非表示にする

（関数）
　　　【ゲームオーバーになったらパネルを表示する】
```
           void GameOver()
    {
        activeBlock.MoveUp();
        if (!gameOverPanel.activeInHierarchy)
        {
            gameOverPanel.SetActive(true);
        }
        gameOver = true;
    }

```
　①activeBlockを一段上にあげる
　②ゲームオーバーパネルの非表示設定と反対の実装
　　　！否定→非表示だったら表示する

　　　【シーンを再読み込みする（ボタン読み込み）】
```
    public void Replay()
    {
       ① SceneManager.LoadScene(0);
    }
```
①File > BildSetteing のサンプルシーンが０番目になっている
　　　サンプルシーンを表示したい為０を入れる

【ゲームオーバーの時はプレイヤーの受付をしないようにする(アップデート)】
```
        if ①(gameOver)
        {
            return;
        }
```
①ゲームオーバーになったらパネルを表示する関数の受け取り


【線を超えたかどうか(Board.cs)】
```
    ①public bool OverLimit(Block block)
    {
        ②foreach (Transform item in block.transform)
        {
            ③if (item.transform.position.y >= heigt - header)
            {
               ④ return true;
            }
        }
        return false;
    }
```
①他から呼び出し可能なオーバーリミット関数
②ブロックがボードの枠からはみ出ていないかの確認
③線を超えたかどうか
　　　heigt - header現在表示されているブロック
　　　よりyが高い＝ボードからはみ出ていることになる
④超えた場合


【OverLimitを呼び出し(GameManeger.cs)】
```
(見本)
        //下に動かす
        else if (Input.GetKey(KeyCode.S) && (Time.time > nextKeyDownTimer) || (Time.time > nextdropTimer))
        {
            activeBlock.MoveDown();

            nextKeyDownTimer = Time.time + nextKeyDownInterval;
            nextdropTimer = Time.time + dropInterval;

            if (!board.CheckPosition(activeBlock))
            {
                //⑨OverLimitを呼び出し
                if (board.OverLimit(activeBlock))
                {
                    GameOver();
                }
                else
                {
                //底についた時の処理
                BottomBoard();
                }
            }
        }

```

解説
```
//追記
                ①if (board.OverLimit(activeBlock))
                {
                   ② GameOver();
                }
                else
                {
                ③
                }
```
①activeBlockが底についているのかの判定
②true　＝はみ出ている。その為GameOverにしたい
③GameOverでない場合、底についた時の処理をする
Misskeyのインスタンスをdocker-composeでサクッと建てる

Twitterが某氏に買収され暴走しているなか代替としてMastodonが挙げられます。しかしそんな中私は同じ分散型SNSであるMisskeyを推しています。今日はそんなMisskeyのインスタンスをサクッと建てる方法を紹介します。

## 前提
以下のものがインストール済み
 - Docker or Podman
 - docker-compose

## 構築
以下の２つのファイルを作成します。
### docker-compose.yml
```
version: "3"

services:
  web:
    image: misskey/misskey:latest
    restart: always
    links:
      - db
      - redis
    ports:
      - "127.0.0.1:3000:3000"
    networks:
      - misskey_db
      - external_network
    volumes:
      - ./files:/misskey/files
      - ./misskey.yaml:/misskey/.config/default.yml:ro

  redis:
    restart: always
    image: redis:alpine
    networks:
      - misskey_db
    volumes:
      - ./var/redis:/data

  db:
    restart: always
    image: postgres:15-alpine
    networks:
      - misskey_db
    environment:
      - POSTGRES_PASSWORD=misskey
      - POSTGRES_USER=misskey
      - POSTGRES_DB=misskey
    volumes:
      - ./db:/var/lib/postgresql/data

networks:
  misskey_db:
    internal: true
  external_network:

```
### misskey.yaml
```
url: https://[ドメイン]/
db:
  host: db
  port: 5432
  db: misskey
  user: misskey
  pass: misskey
redis:
  host: redis
  port: 6379
id: 'aid'
port: 3000

```

完了したら`docker-compose up`で起動させます。起動したら`http://[サーバーのアドレス]:3000`に接続し初期設定をしましょう。

初期設定が終わったら一旦サーバーを終了させ、systemdで自動起動するようにしたりリバースプロキシの設定をしhttps化を行います。ここではこれらの手順については解説しないので適当にググってください。[このページ](https://misskey-hub.net/docs/admin/nginx.html)とか見るとわかりやすいかもしれません。
nuxtでキャプション付き画像を横に並べる方法

# やりたいこと
動的にいくつ並ぶかわからない画像+キャプション(画像タイトルなど)をnuxtで表示したい

こんな感じに
![Screen Shot 2022-11-18 at 13.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2436967/d201c01f-f364-b9c0-c0b2-c80bc6380ee9.png)

# 結論


```vue:nuxt.js
<figure
  v-for="(file, index) in formData.files"
  :key="index"
  class="row-3 col-3 figure"
>
  <img
    class="rounded-1 w-100 mt-3"
    :src="images[index]"
    alt=""
    data-bs-target="#image-window-modal"
    data-bs-toggle="modal"
    @click="imageClick(index)"
  />
  <h6 data-dz-name="data-dz-name">
    {{ file.name }}
  </h6>
  <div class="d-flex align-items-center">
    <p
      class="mb-0 fs--1 text-400 lh-1"
      data-dz-size="data-dz-size"
    >
      {{ file.size.toLocaleString() }} Byte
    </p>
  </div>
  <div class="dropdown font-sans-serif">
    <button
      class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none"
      type="button"
      data-bs-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      <span class="fas fa-ellipsis-h"></span>
    </button>
    <div class="dropdown-menu border py-2">
      <a
        class="dropdown-item"
        href="#!"
        data-dz-remove="data-dz-remove"
        @click="onRemoveFile(file.name)"
      >Remove File</a>
    </div>
  </div>
</figure>


```

これでいけます。
文字列や配列等のオブジェクト内が空かどうか確かめるためのメソッド

# はじめに
文字列や配列を格納している変数の中に、要素が存在しているか確認するケースがあります。
それをまとめたいと思います。

## メソッド名とそれぞれの機能
- <strong>nil?メソッド</strong>
変数の値がnilまたは、値なしの場合、真となります。

- <strong>empty?メソッド</strong>
変数の値が""（文字列の場合）や値が空白の場合、真となります。

nil?との違いは、empty?は変数の値はあることはあるが、その値が空を示している、という点です。

- <strong>blank?メソッド</strong>
nil?が真となる場合、または、empty?が真となる場合に、blank?は真となります。
簡単に言えば、blank?は値といえるものがない場合、真となります。

- <strong>present?メソッド</strong>	
blank?とは全く逆の動作をします。present?は、値といえるものがある場合、真となります。
【React】UseContext、createContextの使い方

## Contextとは？？
`コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。`
参考:https://ja.reactjs.org/docs/context.html

Contextを使うことで別のコンポーネントにpropsを渡して、さらに別のコンポーネントに渡すといったバケツリレーをする必要がなくなります。

ここでは本当の基礎の基礎でコンポーネント間でcontextを使ってデータを渡します。
（本当はリファクタリングなどやることはいろいろありますが…）

* フォルダ構成
src
components
  ├ HelloChild.js
  ├ CountChild.js
Example.js
 
ちょっと分りにくいですが、
componentsフォルダの中にHelloChild.js、CountChild.js
srcフォルダ直下にExample.jsを配置しています。

Example.jsが親、HelloChild.jsとCountChild.jsが子です
HelloChildは単に「hello」と表示する、CountChild.jsは数字のカウントをするコンポーネントです。
* 使用するコード
src/Example.js
```typescript
import { createContext, useState } from "react";
import CountChild from "./components/CountChild";
import Hello from "./components/HelloChild";

// import OtherChild from "./components/OtherChild";
export const MyContext = createContext();

const Example = () => {
  const text = "hello";
  const [count, setCount] = useState(0);
  return (
    <div>
      {/* MyContext.Providerのvalueに渡したい変数などを入れる */}
      <MyContext.Provider value={text}>
        <Hello />
      </MyContext.Provider>
      <MyContext.Provider value={[count, setCount]}>
        <CountChild />
      </MyContext.Provider>
    </div>
  );
};

export default Example;
```
親コンポーネントでは`MyContext`という変数を`createContext`を使って作ります。
渡したい変数である`text`とカウントするために使う`[count,setCount]`を宣言しておきます。この2つをcontextを用いて渡します。

次に`MyContext.Provider`の`value`に渡したい変数などを入れます
helloを渡したければ、格納されている変数`text`をvalueに入れてあげます。
```typescript
<MyContext.Provider value={text}>
        <Hello />
</MyContext.Provider>
```

カウントのために使う`[count,setCount]`も同様です。

src/components/Hello.js
```typescript
import { useContext } from "react";
import { MyContext } from "../Example";

const Hello = () => {
  const helloText = useContext(MyContext);
  console.log(helloText);//hello
  return <h3>{helloText}</h3>;
};

export default Hello;
```

`Hello.js`では親コンポーネントで渡されてきたtextを受け取る処理をします。
まず、親コンポーネントでexportされている`MyContext`をimportします。
その`MyContext`をHooksである`useContext`で受け取ります。(helloText)
console.logで確認すると`hello`が格納されています。
あとは出力するだけです。

src/components/CountChild.js
```typescript
import { useContext } from "react";
import { MyContext } from "../Example";
const CountChild = () => {
  const [count, setCount] = useContext(MyContext);
  const clickHandler = (e) => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <button onClick={clickHandler}>+</button>
      <h3>{count}</h3>
    </div>
  );
};
export default CountChild;
```

`CountChild.js`ではカウントのために使う`[count,setCount]`が親コンポーネントから渡されてきてカウントアップの処理をします。

やっていることは`HelloText.js`と同じです。useStateで宣言した変数やセットするためのものもそのまま持ってこれるので便利です。

あとは`button`を使ってcountアップするだけです。


表示結果は以下の通りです
![スクリーンショット 2022-11-18 132509.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884542/eaad44e9-fc4a-4abc-5be2-1e370a712842.png)


このようにして`context`を使うと簡単にコンポーネント間で値などを渡すことができます。他の使い方や`Consumer`もあるので別に書きたいと思います。
【JavaScript】初心者が引っ掛かりがちな罠をクイズにしてみた

# 前書き
よくありそうな間違い、エラーの原因をクイズにしてみました。
エラーが起きてしまったコードを見て、その原因をお答えください。

# ①３つの`li`を取得して、先頭を出力するぞ！
間違いは３つあります。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>
    <ul>
        <li class="item">hoge</li>
        <li class="item">fuga</li>
        <li class="item">piyo</li>
    </ul>
</body>
</html>
```

```main.js
const items = document.getElementsByClassName("item");
const initialItem = items.shift;
console.log(initialItem);
```

## 結果

```
Uncaught TypeError: items.shift is not a function
```

## 脳内

```js
const items = document.getElementsByClassName("item");
```
で３つの`item`を取得して、
```js
const initialItem = items.shift;
```
`shift`でその先頭を変数`initialItem`に保存して、
```js
console.log(initialItem);
```
出力！
エラー！
出来ないぞ**オラ**👊


## 原因
<details><summary>クリックで表示</summary>
<h3> ① HTMLファイルで、scriptタグをheadタグに書いていること</h3>
bodyタグが読み込まれるより先にscriptが読み込まれるので、以下のいずれかの対策が必要になります。（ほかにもあるかもしれません）

+ bodyタグの一番下に書く
+ window.onloadで囲む

のようにして対策しましょう。

### ② 配列風オブジェクトに対して配列用のメソッドを使おうとしていること

`document.getElementsByClassName("hoge")`で取得出来るのは配列風オブジェクトです。

こちらをご覧ください。
```js
const items = document.getElementsByClassName("item");
console.log(items); // HTMLCollection(3)
console.log([1, 2, 3]); // Array(3)
```

配列を`console.log`した場合は下のように、`Array(3)`と表示されますが、`items`の場合は`HTMLCollection(3)`と表示されます。

配列風オブジェクトである`items`に対して`shift()`メソッドは使えないので、`Array.from(items)`として配列風オブジェクトから配列に変換してあげる必要があります。

### ③ `shift`に`()`を付けていないこと

`shift`は配列のメソッドです。


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift


### 以上をまとめて直してみると

```js
window.onload = () => {
    const items = document.getElementsByClassName("item");
    const itemsArray = Array.from(items);
    const initialItem = itemsArray.shift();
    console.log(initialItem);
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666100/7031ea5b-2427-f7f9-cf9d-5030110e39df.png)

うまく行きました。

</details>

# まとめ

他思いつかなかった
Intellijで始めるSpring Boot

# 概要
今回は、Java入門としてIntellijとSpringBootで始めるアプリケーション開発を公開したいと思います。

## Intellijとは
IntellijはJetBrainsという企業が開発するJVM言語向けのIDEで、インテリジェーと読みます。
IntellijはJVMデベロッパーの70％以上が利用するIDEで非常に高いシェアと機能性を備えています。

## Spring Bootとは
Spring bootとは、Java言語の環境化で使用できるWebアプリケーションの開発をサポートするフレームワークの一つです。
Spring Frameworkとは別物なので注意しましょう。
違いをざっくり説明すると、
●Spring Frameworkは、Java言語のアプリケーション開発のために作られたフレームワークの集合体。
●Spring bootは、集合体となった機能を使いやすくするためのフレームワーク。
となります。気になる方は自分で調べてみて下さい。

# 目次
1. Intellijのインストール
2. Spring Bootプロジェクトのひな型を作成し、アプリケーションを起動
3. おわりに

# 1.Intellijのインストール
まずはIntellijをインストールします。
Intellijには無料版と有料版がありますが、今回は無料版を使っていきます。

Intellijをインストールする時は、ToolBoxというアプリケーションを使うと便利です。
ToolBoxAppはIntellijの開発元であるJetBrainsが開発する、IDEを管理するアプリケーションになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/9f64c6f3-0524-3631-35de-063c9157f983.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/40172afd-8c3c-37c9-facf-11b02029a9db.png)

上記のWebサイトから、アプリをダウンロードをクリックしてダウンロードできます。
ダウンロードした後はインストーラに従ってインストールを進めていってください。

インストールが完了すると、以下の様にToolBoxを表示し、Intellij IDEA Community Editionをインストールしてください
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/08bcbe66-aec3-1aa0-b1ef-05a1c75516e3.png">

ここからIntellijを起動することが出来ます。
これでIntellijのインストールは完了です。

# 2.SpringBootプロジェクトのひな型を作成し、アプリケーションを起動
Spring Bootプロジェクトのひな型作成には**spring initializr**が便利です。
spring initializrでは、いくつかの設定項目を入力するとSpring Bootプロジェクトのひな型のZipファイルを作成できます。

以下のWebサイトにアクセスし、設定項目を入力していきます。
https://start.spring.io/

DependenciesにSpring Webを追加し、他の依存関係は都度必要になった際に足していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/4b537fdd-eb12-c961-a268-691033158ad4.png)

GENERATEをクリックし、Zipファイルを作成します。

次にこのプロジェクトを起動してみましょう。
Intellijを開き、ファイル→開くから先ほど作成して解凍したZipファイルの**build.gradle**を選択し、「プロジェクトとして開く」をクリックすると、IntellijにSpring Bootプロジェクトがインポートされます。
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/d2be1df7-27bc-f2c7-fa36-7c43c607610d.png">

インポートが完了したら、srcの中のDemoApplicationファイルを開き、右クリック→デバックを行ってみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/5db8d031-43ce-830c-c8b1-775ea96b863f.png)

無事起動されましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/da5e40e5-e199-0745-f428-c4f0cacbf05c.png)

コンソールを見ると、8080ポートで起動されていることがわかります。
実際にWebで以下のページが表示されていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2681113/7e1834af-a044-968e-f448-4cba88d18e9a.png)

# おわりに
以上でIntellijでSpring Bootプロジェクトを起動するデモンストレーションを終わりにしたいと思います。
また、IntellijとSpring Bootで簡単なWebアプリケーションの開発をレクチャーしている記事も公開しているので、興味があればご覧ください。
グローバルなignoreファイル

[~/.gitignore_global を指定するのをやめ、デフォルトの置き場に置こう](https://zenn.dev/qnighy/articles/1a756f2857dc20) 
これを読んで、
「ふんふん、で？」
と思った自分にビックリした。

自分で自分をお膳立てだ。コピペでいけるように整理する。
環境は macOS Ventura + zsh です。

`% vi ~/.config/git/ignore`

```~/.config/git/ignore
.idea
.DS_Store
```

## グローバルなignoreファイルを設定する
`% git config --global core.excludesFile ~/.config/git/ignore`

## 設定できているか確認する
```
% git config --global core.excludesFile
takepan/.config/git/ignore
```

## gitクライアントで除外されるか確認する
macOS + SourceTree な私は `command` + `r` です。

## .gitignore_global とか使うんじゃないよ勢が存在する

```
% git config core.excludesFile
takepan/.gitignore_global
```

オーマイガー。バッドプラクティスと言われているサムシングを体現していた。
【Linux】Linux Serverのawt使用不可の件


LocalPCではエラーなく運営できるが、サーバ－に乗せるとエラー(java.lang.NoClassDefFoundError: sun/awt/X11GraphicsEnvironment)が発生する場合があります。
OSによる設定の違いがエラーの原因で、
下記の中のどちらかを選び設定すれば、解決できます。

【プログラム内に組み込み】
System.setProperty("java.awt.headless", "true");

【Serverの設定を変更】
catalina.shファイルのCATALINA_OPTS部分にオプションを追加する。
-Djava.awt.headless=true
Plastic SCM（Unity のバージョン管理ツール）を使ってみた


## 1.準備

PlasticSCMのサイトでアカウントを作成
https://www.plasticscm.com/account/login


PlasticSCMをここからダウンロード
https://www.plasticscm.com/download

Unity のプロジェクトを開く。

Plastic SCM を開き、

Open or Create other Workspace

[![Image from Gyazo](https://i.gyazo.com/597deb98a4d25a799d7cc85fcc662e0e.png)](https://gyazo.com/597deb98a4d25a799d7cc85fcc662e0e)

新規ワークスペースを作成
[![Image from Gyazo](https://i.gyazo.com/5083ab82336eefe709f312ac058badca.png)](https://gyazo.com/5083ab82336eefe709f312ac058badca)

新規
[![Image from Gyazo](https://i.gyazo.com/4d5fe93d88ecdc8eb58dee23fb679280.png)](https://gyazo.com/4d5fe93d88ecdc8eb58dee23fb679280)

名前を入力、サーバーを選択し、OK
名前はなんでもいいけど、元プロジェクトと同じのほうが混乱しない
[![Image from Gyazo](https://i.gyazo.com/0a39feb1deb4466687a7c7745e841cad.png)](https://gyazo.com/0a39feb1deb4466687a7c7745e841cad)

ディスク上のパスを選択
Ｕnityにすでにプロジェクトがある場合は、そこのフォルダを選択

<font color="RED">※注意：よく注意しておかないと、空のフォルダが作成されることがあり、間違ってそことリポジトリを連携してしまうミスをする可能性があります。</font>

[![Image from Gyazo](https://i.gyazo.com/9695a7b36485267930e80b58a818fdff.png)](https://gyazo.com/9695a7b36485267930e80b58a818fdff)


新規ワークスペースが追加されました。
[![Image from Gyazo](https://i.gyazo.com/b18fd1b59235b0db70eec6b01aa53f49.png)](https://gyazo.com/b18fd1b59235b0db70eec6b01aa53f49)


## 2.最初のアップロード

開く
[![Image from Gyazo](https://i.gyazo.com/dd5b40ca71d28a7b1f1e34a6b5d90fb3.png)](https://gyazo.com/dd5b40ca71d28a7b1f1e34a6b5d90fb3)


Libralyフォルダを右クリックし、無視リストに追加
[![Image from Gyazo](https://i.gyazo.com/3a090f83b7d63c95b9361e19c059bff8.png)](https://gyazo.com/3a090f83b7d63c95b9361e19c059bff8)

上と同じようにTempフォルダを右クリックし、無視リストに追加




保留中の変更をクリック
[![Image from Gyazo](https://i.gyazo.com/16e39c7ca30cc0428bd4546a35ce109a.png)](https://gyazo.com/16e39c7ca30cc0428bd4546a35ce109a)


１，更新したいものにチェック
２，あとで何をしたか分かるようにコメント入れる
３，チェックイン

[![Image from Gyazo](https://i.gyazo.com/704836ac76877e4e5f679a40764788fc.png)](https://gyazo.com/704836ac76877e4e5f679a40764788fc)


## 3. チームメンバーを加える

Plastic SCMのダッシュボードにアクセスhttps://www.plasticscm.com/dashboard/cloud

「Configure」＞「Users and groups」

[![Image from Gyazo](https://i.gyazo.com/f2c6573b2998cdd2318ff8d42e12e6d9.png)](https://gyazo.com/f2c6573b2998cdd2318ff8d42e12e6d9)


[![Image from Gyazo](https://i.gyazo.com/cb0845ba7e0d80e2ddd3244af2ab1da5.png)](https://gyazo.com/cb0845ba7e0d80e2ddd3244af2ab1da5)


## 4. チームメンバー側

こんなメールが来る

[![Image from Gyazo](https://i.gyazo.com/8eed341372356943fe72143aa1b1b8c4.png)](https://gyazo.com/8eed341372356943fe72143aa1b1b8c4)

<br><br>

## 　（参考）自分が持ってる他のPCで開くには

Unity Hubで、
開く　＞　リモートから開く

[![Image from Gyazo](https://i.gyazo.com/9d9c92eed128dff488a2fb42f8c58dfc.png)](https://gyazo.com/9d9c92eed128dff488a2fb42f8c58dfc)

PlasticSCMのアイコン（下図）をクリック
[![Image from Gyazo](https://i.gyazo.com/9a880d34412bf1596abfa854780e83a8.png)](https://gyazo.com/9a880d34412bf1596abfa854780e83a8)

Incoming Changes に他のPCや他者が変更したファイルが表示される。
Update workpspace をクリックすると、今使用してるPCに反映される。

[![Image from Gyazo](https://i.gyazo.com/61c696ac06543d959d3f4440838f1f34.png)](https://gyazo.com/61c696ac06543d959d3f4440838f1f34)


以上です。
Cドライブのパーティションを 半分に分割するバッチ

Cドライブを分割してパーティションをCドライブとDドライブに分ける際、
ちょうど半分に分けたいといったときに使えるバッチです。

```bat:c_harf.bat
@echo off

rem 管理者権限強制実行
whoami /priv | find "SeDebugPrivilege" > nul
if %errorlevel% neq 0 (
 @powershell start-process %~0 -verb runas
 exit
)

powershell -ExecutionPolicy bypass -command  "get-partition -driveletter C | resize-partition -size ((GWMI win32_logicaldisk | where-object {$_.deviceid -eq \"C:\"}).size /2)"
```

Powershellにて現在のCドライブの容量を取得し、半分の値を計算、
Cドライブを半分に縮小しています。
パーティション分割には管理者権限が必要なので、
バッチの最初の部分で必ず管理者権限で実行するようにしています。

:::note info
ドライブ文字を変更すれば別ドライブでも対応可となります。
:::

:::note info
最後の **/2** は **\*0.5** と書いてもOKです。この値を変えることで、好きなサイズに変更することができます。
50%なので0.5となっていますので、70%に縮小の場合は **\*0.7** と記載してください。
また、空き領域がある場合は拡張も可能ですので、
110%にしたい場合は **\*1.1** と記載してください。
ただし、縮小できる、拡張できる最大値を超えてはできないので注意が必要です。

:::

Powershellで動かしていますので、ps1形式でも書くことができ、
ps1形式の場合は以下のようになります。

```powershell:harf.ps1
#管理者権限強制実行
if (!([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole("Administrators")) { Start-Process powershell.exe "-File `"$PSCommandPath`"" -Verb RunAs; exit }

get-partition -driveletter C | resize-partition -size ((GWMI win32_logicaldisk | where-object {$_.deviceid -eq \"C:\"}).size /2)
```
論文執筆用にmatplotlibを使ってグラフを作るときのおすすめ設定&メモ

# Matplotlibでグラフを作るときのおすすめ設定

- フォントのサイズ
サイズはこれ．ただし，グラフのサイズ次第で変更する必要がある．
`
plt.rcParams["font.size"] = 21
`
- フォントの変更
フォントを変更しないと日本語認識してくれない．これで一括に変更する．
`
plt.rcParams["font.family"]  = "MS Gothic"
`
- 図のサイズとバックグラウンドの色
図のサイズは(14，8)だけど基本横を長くしてね．バックグラウンドの色を設定しないと透過になってるから気をつけて．
`
plt.figure(facecolor="white",figsize=(14,8))
`
- 凡例
凡例の位置は，ベストにすると空いてるところに自動的に配置するよ．
`
plt.legend(title = "凡例",loc = 'best')
`
- グラフの保存
グラフ保存する時に，PDFで保存すると，Overleafで画像の表示するのにベスト．余白はtightじゃないとラベルが見切れたりするよ．
`
plt.savefig("OOO.pdf",bbox_inches='tight',pad_inches=0)
`