OmniAICreator/Qiita-1.07M huggingface dataset:
AWSアカウント初期準備

# 準備
## AWSアカウント契約
今まで使用していたアカウントもありましたが、今回のシステム構築を機に個人のAWSアカウントを作成しました。今から12か月は無料枠を使用できます。

### 無料枠について
最初のころはよくある動画、音楽サブスクのように12か月は完全に無料と思っていましたが、そうではないらしいです。
EC2ならt2,t3.microが750時間、S3は5GBまでと各々のサービスに上限があるようです。
確かに完全に無料となったら高いインスタンスタイプでEC2をつくれちゃいますもんね。。

[AWS無料利用枠](https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all
 )

ちなみに750時間は約31日(750/24=31.25)。使用するときだけEC2を起動させておけば月に同時に4,5台は立てれそうですね。

## 初期設定
### アカウント全体
AWSアカウントを作成したら基本的にしておいたほうがいい設定があります。

個人のアカウントなのでログの設定等はしなくてもいいとは思いますが、セキュリティの設定は絶対にするべきです。
アクセス情報が流出してログインされたら高額なサービスを使用されてしまい多額の請求が来るということもあります。

また、利用料金が何円以上になったらメールが飛んでくる請求アラートも設定をお勧めします。
AWSは機能が多岐にわたるので知らず知らずのうちに課金されてしまうということもあるかと思うのでその予防です。

[AWSアカウントをつくったら最初にやるべきこと](https://dev.classmethod.jp/articles/aws-1st-step-2021/ )

### IAM設定
最初にアカウントを作成した際にログインしているユーザーはRootユーザー（最も強い権限）です。
AWSアカウントの契約などの操作もできてしますのでできるなら普段は使用しないほうがいいです。
なので、作業用のIAMユーザーを作成しました。

基本なんでも操作できるAdministrator権限をつけています。会社のアカウントで運用ユーザーを作成するなどの場合はもっと権限を絞る必要がありますが、個人であればAdministratorでよいと思います。（Rootのように契約に関する設定はいじれません）

![スクリーンショット 2022-09-10 234108.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823786/47368c1e-081d-0c0d-f883-70db99345a3b.png)
※AWSコンソールの画像を添付する際は重要な情報が含まれていないか注意しましょう。
ID,パスワード以外にも洩れたらまずい情報（IAMアクセスキー,EC2インスタンスidなど）あります。1つ1つ細かい判断はできないので重要そうな情報はとりあえず隠すでいいと思います。

## まとめ
簡単なAWSの初期設定を行いました。次回はシステムのインフラレベルの要件、方式を決めていこうかなと思います。
Laravel 8 へアップグレードしてからシーダーを使う際の変更


## はじめに

Laravel 6から8へアップグレードした際にアップグレード自体は問題なくできたのですが、
シーダーの実行につまずいたので残しておきます。


## 事象
シーダーを実行すると以下のようなエラーが出ました。
```
$ php artisan db:seed
```
```
  Illuminate\Contracts\Container\BindingResolutionException

  Target class [DatabaseSeeder] does not exist.
```



# 変更箇所
Laravel 8へアップグレードした後にシーダーを使うための変更箇所をまとめます。


### 1. composer.jsonの変更

変更前
```json:composer.json
    "autoload": {
        "psr-4": {
            "App\\": "app/",
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ]
    },
```

変更後
```json:composer.json
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
```
変更後に`composer dump-autoload`を実行します。
```
$ composer dump-autoload
```

### 2. フォルダ名称の変更
`database/seeds`フォルダを`database/seeders`フォルダへ名称を変更します。

変更前
```
└── database
    ├── factories
    ├── migrations
    └── seeds
```

変更後
```
└── database
    ├── factories
    ├── migrations
    └── seeders
```

### 3. seederのファイルの変更
seederのファイルに`Database\Seeders`名前空間を追加します。

変更前
```php:database/seeders/DatabaseSeeder.php
<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
```

変更後
```php:database/seeders/DatabaseSeeder.php
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
```

## つまずいた原因
[2. フォルダ名称の変更](#2-フォルダ名称の変更)

これを見落としていました。
composer.jsonやseederのファイルの変更に気がとられて
単純なところが抜けていました。

Laravelの公式ドキュメントにもしっかりと、しかしそっと書いてあります。
なんで見落としたんだ。。。

>シーダとファクトリの名前空間
>影響の可能性： 高い
>
>シーダとファクトリは名前空間になりました。これらの変更に対応するには、Database\Seeders名前空間をシードクラスに追加します。さらに、**以前のdatabase/seedsディレクトリの名前をdatabase/seedersに変更する必要があります：**

Laravelの公式ドキュメントより引用

https://readouble.com/laravel/8.x/ja/upgrade.html#seeder-factory-namespaces

<br>
<br>

抜けていたフォルダ名称の変更も含めて
3点を変更することによって問題なくseederが実行できました。
```
$ php artisan db:seed
Database seeding completed successfully.
```

<br>


## 参考記事

https://readouble.com/laravel/8.x/ja/upgrade.html#seeder-factory-namespaces
https://www.itsolutionstuff.com/post/solved-laravel-8-target-class-databaseseeder-does-not-existexample.html
SwiftUIでViewを拡張してViewModifierを使いやすくする。

## 概要
SwiftUIでViewを拡張してViewModifierを実装する方法を紹介します。
ViewModifierを使ってViewをカスタマイズした時に呼び出しを簡単にすることができるようになります。

## ViewModifierの作成
まずは、ViewをカスタマイズするViewModifierを作成します。

```Swift: ViewModifierの作成
struct ExampleViewExtensionView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
	    //ViewModifierの適用
            .modifier(ExampleViewModifier())
    }
}


//ViewModifierの作成
struct ExampleViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.quaternary, in: Capsule())
    }
}
```

自分で作成したViewModifierを適用する際には.modifier()を使う必要があります。
機能的には全く問題はありませんがVieｗModifierに引数を与えたりするようになると冗長になります。

## Viewのextension
先ほど作成したViewModifierをViewをextensionすることで使いやすくしていきます。
```Swift: Viewのextension例
extension View {
    func ViewModifierの名前() -> some View {
        modifier(自分で作成したViewModifier)
    }
}
```

このようにViewをextensionすることでViewModifierを使いやすくすることができます。



```Swift: Viewのextension
struct ExampleViewExtensionView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            //ViewModifierの適用
            .exampleViewModifier()
    }
}


//ViewModifierの作成
struct ExampleViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.quaternary, in: Capsule())
    }
}


//Viewの拡張
extension View {
    func exampleViewModifier() -> some View {
        modifier(ExampleViewModifier())
    }
}
```

Viewをextensionで拡張することでViewにViewModifierを適用することが簡単になります。先ほども述べたようにViewModifierの引数を使うようになるとViewをextensionしたほうが使いやすくなると思います。

## まとめ
ViewModifierを適用するためにはViewの拡張は必ずしも必要ではありませんが、知っておくと便利な機能です。ViewModifierメソッドの戻り値にsome Viewを使用していることを知っているとよりSwiftUIに対する理解が深くなるとも思います。
機会があればぜひ試してみてください。
PyCharmのコード領域で、ショートカットキー["⌘" + "+"]で、展開ができない問題(日本語キーボード)

○問題点
日本語キーボードだと、"Command" + "+"  が他のキーとして認識され、コード領域が展開できない既知問題があります。

○参考サイト
https://youtrack.jetbrains.com/issue/IFT-113

○確認環境
OS:macOS Monterey 12.0.1
キーボード:JIS配列 
機種名:MacBook Pro 
機種:MacBookPro16,1 
プロセッサ名:8コアIntel Core i9

○回避方法
以下の手順にて、[折りたたみ]を展開し、[展開]のショートカットキーとして、
"Command" + "^"(ハット) を追加することで、問題が解消します。

1. [PyCharm]-[Preferences]を選択する。
2. [環境設定]
 　　　キーマップ
　　　　　　└メインメニュー
　　　　　　　　└コード
　　　　　　　　　└折りたたみ
　　　　　　　　　　　├展開			★ショートカットキー追加対象★		
　　　　　　　　　　　├再帰的に展開		
　　　　　　　　　　　└すべて展開

○補足
その他にも、以下２項目を追加することで「再帰的に展開」と「すべて展開」が可能になります。
再帰的に展開：”option” + "command" + "^"(ハット)
すべて展開："shift" + "command" + "^"(ハット)
jupyte labでパスワードを求められたとき


# jupyte labでパスワードを求められて操作できなくなった。

![スクリーンショット 2022-09-10 21.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323010/70dfd1da-ce1f-6395-1b63-f57f24744fa4.png)


このような画像に
# 【解決策】config.pyを編集する。

## jupyter_notebook_config.pyを作成

ターミナルで下記のようにコマンドを打って
jupyter_notebook_config.pyを生成
ファイルを編集するためにファイルを開く
※編集するツールは好みのものを、今回はvscodeを使用。

```
jupyter notebook --generate-config
code /Users/hoge/.jupyter/jupyter_notebook_config.py
```
hogeはPCのユーザネーム


## jupyter_notebook_config.pyのpasswordとtokenを編集

下記のようのtokenとpasswordにコメントアウトを外して任意の文字列を追加。
![jupyter_notebook_config_py.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323010/e8e59e0f-0172-30c2-4197-ecbfd4b15f3c.png)
![jupyter_notebook_config_py.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323010/d726d135-6615-0114-3219-92a3251e7693.png)



# 参考資料

https://nw.tsuda.ac.jp/lec/python/jupyter/www/

https://teratail.com/questions/300298
iOSDC Japan 2022 day0 前夜祭で視聴したセッションとその感想

# はじめに
今年もiOSDC Japanに参加しているので、私が視聴したセッションとその感想をまとめました。day0 前夜祭のセッションになります。

**iOSDC Japan 2022**については[こちら](https://iosdc.jp/2022/)をご覧ください。

# ノートアプリのテキストエディタの解体新書
最初に参加したセッションはこちらでした。noteアプリのテキストエディタに関するセッションです。私はnoteをよく使っており、昨年のアクセシビリティに関するセッションも面白かったので、今年も楽しみにしていました。

UITextViewを複数配置することで、拡張性高く機能追加に柔軟に対応可能できるというお話が印象的でした。また、iPadのレイアウト用に[readableContentGuide](https://developer.apple.com/documentation/uikit/uiview/1622644-readablecontentguide)を使用しているというお話も非常に参考になりました。

普段何気なく使っているnoteアプリのエディタの裏側を知ることが出来て、とても面白いセッションでした。昨年に引き続き、文字起こし版があるので後で見返せる点がとてもありがたいです。ここでもアクセシビリティへの意識を感じました。

**↓文字起こし版はこちら**
[ノートアプリのテキストエディタの解体新書](https://fromkk.me/n/ne14f81e62e3f?gs=12d91d562ff4)

**↓参考までに、こちらが昨年のセッションです。こちらも文字起こししてくれています🙏**
[noteのiOSアプリで実装したアクセシビリティの全て（文字起こし）](https://fromkk.me/n/n2dbeb54cdf0d?gs=39304c6fe6be)

# PiPを応用した配信コメントバー機能の開発秘話と技術の詳解
配信アプリ、ミラティブのPiP(ピクチャーインピクチャー)に関する開発秘話が紹介されていました。
[ミラティブのアプリ](https://www.mirrativ.com/)

まずミラティブの配信コメントバーのデザインが洗練されていて、とても良いなと感じました。
また、動画配信アプリということもあり、描画コストを下げる為に、様々な工夫をしているんだなと勉強になりました。
更新頻度の高いものと低いものを別に管理するという話を聞いて、ユニークな発想だと思いました。

これだけのものをエンジニアが主導してスピーディーに対応するチームは素晴らしいですね👏

**↓資料はこちら**
[PiPを応用した配信コメントバー機能の開発秘話と技術の詳解](https://speakerdeck.com/narujpn/pip-streaming-comment-bar-efc40239-22e5-420a-b084-a799eaf91f1c)

# CICD構築・自動化入門
CI/CDの構築によって業務を自動化して、不要なコミュニケーションや単純作業を削減する方法が紹介されていました。

セッションの中では、fastlaneとDangerを使った具体例が紹介されていましたが、初心者にも分かりやすいとても丁寧な説明でした。私もチームでの開発経験があり、自動化したいポイントにとても共感しました。エンジニアの手を止めない自動化って素晴らしいと思います👍

また自動化によって、些細なミスを防ぐという話がとても印象的だったので、自分も積極的に自動化していきたいと思いました。
**※資料は見つけたら追記します。**

# 20分間で振り返るIn-App Purchaseの歴史
アプリ内課金(In-App Purchase)の10年以上の歴史を振り返るセッションでした。

2009年から10年以上にわたって追加された様々な機能が紹介されていて、アプリ内課金を深く知らない人にとっても、これまでの機能や背景について分かりやすくまとめられていました。時系列の表がとても見やすかったです。

また[StoreKit Testing　in Xcode](https://developer.apple.com/documentation/xcode/setting-up-storekit-testing-in-xcode)によってテスト機能が拡充されたという話が印象的でした。テストのし易さは実装を進めるにあたって大事な要素ですよね。歴史を重ねるにつれて、In-App Purchaseで出来ることがどんどん増えているんだなという印象でした。
**※資料は見つけたら追記します。**

# さいごに
2022年のiOSDC Japanはオフラインとオンラインのハイブリッド開催です。
私はday0をオンラインで試聴しましたが、Twitterのハッシュタグなども盛り上がっており、とても一体感がありました。

オフラインの熱狂ぶりも楽しそうだなと思いましたが、オンラインでも家でゆっくりしながら楽しめたのでどちらもオススメです👍
Truffleでコンストラクタに引数があるコントラクトのテスト方法

Solidityを使用したブロックチェーン技術に興味があり、PoligonチェーンでNFT発行を目指しています。
いきなり本番環境にデプロイするのは怖いので、テストを作って動作を確認していたところ、
ContractのConstructorに引数があるケースのテストにハマってしまった・・・。

以下で`truffle test`コマンドでテストがPassしますのでご参考に。

#### ファイル構成
- contract
  - Test.sol
- migration
  - 1662781893_deploy_test.js
- test
  - test.js

#### ソースコード

```Test.sol
pragma solidity ^0.8.16;

contract Test {
    string public test;
    constructor(string memory _test) {
        test = _test;
    }
}
```

``` 1662781893_deploy_test.js
const Test = artifacts.require("Test");
module.exports = (deployer, network, accounts) => {
  deployer.deploy(Test, "test");
};
```


``` test.js
const Test = artifacts.require("Test");

contract("Test", (accounts) => {
  it("should init", async () => {
    const instance = await Test.new("test", { from: accounts[0] });
    const result = await instance.test();
    assert.equal(result, "test", "info is not equals");
  });
});

```
世界一優しいReactの基本その7 -exportの種類とは-

## はじめに
前回はReactの再レンダリングを学びました。最後にReactのexportの種類についてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/c31dd0dc57a0b2bed902

## 通常のexport
Reactではexportすることによって、コンポーネントの取り込みを行ってきました。

通常のexport
```components/SampleComponent.jsx
export const SampleComponent = () => {
   //　実装
};
```

import側
```App.jsx
import { SampleComponent } from "./components/SampleComponent"
```

ただし、分割代入のイメージと同じで、対象となるexportがないとエラーになります。
```App.jsx
// TestComponentはないのでエラーになる
import { TestComponent } from "./components/SampleComponent"
```


## default export
このような見慣れた形のほかにも`default export`というものも存在します。
export側は `export defalut XXX`と指定をし、import側は`{}`をつけずにimportをします。

default export
```components/SampleComponent.jsx
const SampleComponent = () => {
   //　実装
};
export default SampleComponent;
```

import側
```App.jsx
import SampleComponent from "./components/SampleComponent"
```

実はdafault exportの場合はSomeComponentでなくても大丈夫です。
これは、任意の名前をつけることができるので、対象となるものがなくてもエラーになりません。
import側
```App.jsx
// TestComponentという名前でimportする
import TestComponent from "./components/SampleComponent"
```
ただし、1つのファイルで1回しかdefault exportは使えません。
※全てをまとめて一つとしてexportするイメージです

## 通常のexportでエイリアスを使う
通常のexportでも実は自由に名称を変更できます。

```App.jsx
// TestComponentという名称でSampleComponentを使う
import { TestComponent as SampleComponent } from "./components/SampleComponent"
```

## まとめ
exportには単一の場合、default exportという違った書き方ができます。
しかしながら通常のexportがわかりやすいとおもうので通常のexportを使えば事足りると思います。
CloudFormationで構築したリソースの削除

## はじめに
CloudFormationで構築した不要なリソースを削除する機会があったので、対応方法について記事を書きたいと思います。

## 事前確認
- AWS Console から CloudFormation のダッシュボードを開く。
- Stacks内から削除対象のStackを開く。
- Templateのタブを開き、Templateが以下の状態であることを確認する。
    - `DeletionPolicy` が設定されていないこと
        - もし設定されていれば、`Template`から`DeletionPolicy`の記述を外す。

![スクリーンショット 2022-09-10 21.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/d9e12ab4-7348-953f-04a3-c7ec53218bc6.png)

## リソースの削除方法
削除対象のStack を削除する。

![スクリーンショット 2022-09-10 21.05.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/1160e734-20b5-4889-e9f7-1b47588165fc.png)

Resourcesのタブを開き、Stack内のリソースのStatusが`DELETE_COMPLETE`になっていることを確認する。

![スクリーンショット 2022-09-10 21.10.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/97feac41-f448-40d5-e036-66c059d2af3a.png)


## 備考
`DeletionPolicy`の設定については以下になります。

|  オプション  |  説明  |
| ---- | ---- |
|  Retain  |  スタックが削除された場合でもリソースを保持する。  |
|  Snapshot  |  リソースが削除される前にそのリソースのスナップショットを作成する。  |
|  未設定  |  スタックとともにリソースを削除する。  |


## 参考記事

https://aws.amazon.com/jp/premiumsupport/knowledge-center/delete-cf-stack-retain-resources/
第二新卒からフロントエンドエンジニアを目指す

# 自己紹介

初めまして、染井吉野です。
未経験からフロントエンドエンジニアとして就職できるように、日々学習を続けています。

Qiitaでは、日々の学習の記録と、知見のアウトプットを書き留めていこうと思います。
プログラミング自体は大学の授業で触れた程度であるため、理想を叶えるために覚えることはたくさんあります。しかし、めげずに頑張っていこうと思いますので、よろしくお願いします。

また、私自身は情緒的かつアカデミックな文章を書くことが好きですが、Qiitaでは端的に情報をまとめ、事実・知識ベースで書き進めていこうと思います。目指すはつよつよプログラマーですね。

## 現在の状況と次のステップ

プログラミング知識は大学の授業を少し履修した程度、です。
なので、まずは書学者向けのProgateで独学を進めておりました。
第1章とされる無料かつ基本の部分を修了することができたため、コーディングの感覚・HTML/CSSの基本は理解することができました。

次に、自作HPを作っていこうと思います。こちらは現在作業中です。
HPを作ることができたら、以下のタスクをこなします。
1. バックエンド系の知見をインプットし、業界理解を進めます。
1. 構築・組み込み系の知見のインプットする
1. 既存のHPのソースコードを写経

フロントエンド系の良き情報生産者になりたいです。
そして、web系エンジニアとして働けるようになりたいです。
まずは手を動かして、作れるものを増やしつつ、実際に作っていくことを目標とします。
【C】初めてのC言語（16. 文字列の基本）

# はじめに

* これまでの学習に続いて、今回は文字列の基本的なルールについて学んだ結果をまとめてみました。
  * [【C】初めてのC言語（1. Hello world）](https://qiita.com/nkojima/items/518c1a4ec06861d74b3c)
  * [【C】初めてのC言語（2. 四則演算とフォーマット指定子）](https://qiita.com/nkojima/items/36ea93b7296ce9e8a55b)
  * [【C】初めてのC言語（3. ポインタ）](https://qiita.com/nkojima/items/825bb9f931016faccd68)
  * [【C】初めてのC言語（4. 構造体）](https://qiita.com/nkojima/items/40a1101f2f6f5800bc2d)
  * [【C】初めてのC言語（5. 関数）](https://qiita.com/nkojima/items/1fa3317c04f25fe24276)
  * [【C】初めてのC言語（6. 配列）](https://qiita.com/nkojima/items/eda3ff6675b47e7ab5f0)
  * [【C】初めてのC言語（7. for文）](https://qiita.com/nkojima/items/a5659098f7e5275a96ec)
  * [【C】初めてのC言語（8. 2次元配列）](https://qiita.com/nkojima/items/f5eb25a4f8d1725faa89)
  * [【C】初めてのC言語（9. 関数のプロトタイプ宣言）](https://qiita.com/nkojima/items/57318d74bdfa670bf72e)
  * [【C】初めてのC言語（10. 構造体配列）](https://qiita.com/nkojima/items/75530a3ca63924a14397)
  * [【C】初めてのC言語（11. ヘッダファイル）](https://qiita.com/nkojima/items/a10cd943ed66e0cea7fd)
  * [【C】初めてのC言語（12. 3つのからくり構文＋ポインタ演算）](https://qiita.com/nkojima/items/83cb40ec01cd6a6e6a87)
  * [【C】初めてのC言語（13. メモリを扱う標準関数）](https://qiita.com/nkojima/items/13c8d942f282beb3c212)
  * [【C】初めてのC言語（14. ヒープの利用）](https://qiita.com/nkojima/items/837557cc86ce9697611a)
  * [【C】初めてのC言語（15. sizeofの注意点）](https://qiita.com/nkojima/items/6c9a3ba04c6348219578)

# 学習環境

* 今回は[paiza.io](https://paiza.io/ja/projects/new)のC言語のエディタを使いました。

# 文字列にまつわる業界ルール

* 「C言語の文字列に関する業界ルール」として、以下の2つのルールが挙げられていました。
  * 1. 先頭要素から順に1文字ずつ文字コードを格納して文字列を表す。
  * 2. 最後の文字の直後には「文字コード0の文字」を必ず格納し、それ以降のメモリ空間は利用しない。

```c:Main.c
#include <stdio.h>

int main(void){
    const char str1[10] = "Hello";
    const char str2[10] = "He\0llo";
    
    printf("%s\n", str1);
    printf("%s\n", str2);  // 「\0」が終端文字（ヌル文字）として扱われている。 
    
    return 0;
}
```

```text:実行結果
Hello
He
```

* 上記のルールを踏まえて、以下の様に「char配列から\0を探しながら1文字ずつ出力」すると、printf関数で文字列を全て出力するのと同じ結果が得られました。

```c:Main.c
#include <stdio.h>

int main(void){
    const char* str = "sumomomomomomomomonouchi";
    printf("%s\n", str);  // 文字列を全て出力
    
    while (*str!='\0') {
        printf("%c", *str);  // 1文字ずつ出力
        str++;  // ポインタを1文字分進める
    }
    
    return 0;
}
```

```text:実行結果
sumomomomomomomomonouchi
sumomomomomomomomonouchi
```

# 参考URL

* [スッキリわかるC言語入門 第2版](https://www.amazon.co.jp/dp/4295012785/)
  * p.396～p.402
【React・Redux】A non-serializable value was detected in an action, in the path エラーがでたら

### 背景
Reactでシステムの検索条件の日付部分の実装に`Material-UIのDate Picker`を使っていて、
その検索条件をReduxのstoreへ保存（dispatch送信）する際にブラウザのコンソールにエラーが出た。
ただし動作的には問題なさそう。

### エラー内容
```
index.js:1 A non-serializable value was detected in an action, in the path: `payload.xx保存値の名称xx`. Value: Tue Aug 02 2022 22:24:42 GMT+0900 (日本標準時) 
Take a look at the logic that dispatched this action:  {type: 'xxxアクション名xxx', payload: {…}} 
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) 
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)
```

直訳すると、
```
「index.js:1 アクションのパス: `payload.ｘｘ保存値の名称xx` でシリアル化できない値が検出されました。値: Tue Aug 02 2022 22:24:42 GMT+0900 (日本標準時)
このアクションをディスパッチしたロジックを見てみましょう: {type: 'xxxアクション名xxx', payload: {…}}
(https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants を参照)
(シリアル化できない値を許可するには、https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data を参照してください)」
```
とのこと。
エラーのリンクを参照すると、storeに入れる値はシリアライズ可能でなければならない、とある。
以下Redux Toolkitのサイトをみても、「シリアル化できない値を state または actions に入れるべきではない」と書いてある
https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data

### そもそも「シリアライズ」って何？となったので調べてみた。
シリアライズは「直列化」を意味する単語でオブジェクトが持つデータを、
コンピューターが読み書きできるようにバイナリデータへ変換する役割を持つ。
つまり今格納しようとしているのは変換できないデータってことと解釈。
そのため今回DATE型であることが原因のよう。

### 対応方法について検討
DATE型を止めればよさそうだが「Material-UIのDate Picker」を使うにあたり、
DATE型でなければならない。
悩んだ結果以下2つのパターンを検討。

### 対応方法.1
エラーが出ることを無視する方法
以下Redux Toolkitのサイトを参考に実装方法が書いてある
「ignoreActions」を使って無効にしたいアクションを指定すればよい。
”Take a look at the reducer(s) handling this action type: `XXXX`.”
の`XXXX`の部分を上記のignoredActionsに指定すればOK。
```
configureStore({
  //...
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore these action types
        ignoredActions: ['your/action/type'],
        // Ignore these field paths in all actions
        ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
        // Ignore these paths in the state
        ignoredPaths: ['items.dates'],
      },
    }),
})
```

### 対応方法.2
- storeへ値を保存する前に文字列化する
今回はこちらを採用した。
なんとなくだが、`対応方法1.`のエラーを無効にするのは気が引けたため。
どういう場合に無効にするかはもう少し調べる必要がありそう。
- 保存時
```
変数名.toString() でstring型に変換して保存
```
- 使用時
```
new Date(変数名)
```
でDATE型に戻して使う

### まとめ
このエラーに関する記事があまりなかったのでメモがてら書いてみました。
気づきがあれば追記・修正していきます。

### 参考記事
- Redux-ToolkitにFirebaseのTimestampをいれるときのエラー処理
https://www.ok-data.com/entry/redux-toolkit%E3%81%ABfirebase%E3%81%AEtimestamp%E3%82%92%E3%81%84%E3%82%8C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E5%87%A6%E7%90%86/
Excel VBA シートを指定したセルの値の取得方法

# 初めに
ExcelでVBAを書く際に、シート名を指定してセルの値を取得する方法について記載します。

# やり方
まずは基本的な書き方についてです。
```:基本的な書き方
Worksheets("対象のシート名").Range("対象のセル").Value
Worksheets("対象のシート名").Cells(行番号, 列番号).Value
```
では実際の値を取得してみましょう。
以下のようにシート名「__実行__」にある「__セル取得__」ボタンを実行するとシート名「__ターゲット__」の「__A1__」「__A2__」の値を取得するVBAを書くことを想定します。

シート名「__実行__」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/0aae6e7f-f7da-7585-c24c-190fef970e8a.png)

シート名「ターゲット」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/9a334c46-d4b4-9819-9f2c-f05c7cb78bfe.png)
コードは以下のようになります。
```:コード
Sub GetAnoterSheetValue_Btn()
    Debug.Print (Worksheets("ターゲット").Range("A1").Value)
    Debug.Print (Worksheets("ターゲット").Cells(1, 1).Value)
    Debug.Print (Worksheets("ターゲット").Range("A2").Value)
    Debug.Print (Worksheets("ターゲット").Cells(2, 1).Value)
End Sub
```
上記の実行結果です。
```:実行結果
ターゲットシートのA1
ターゲットシートのA1
ターゲットシートのA2
ターゲットシートのA2
```
以上になります。

# 最後に
ここまで見ていただきありがとうございます。
貧弱自宅環境：openstack構築膝栗毛

# podmanでopenstack環境を構築してみよう

09/10/2022 start

openstackは多様なコンポーネントの集合体であり、かなり高度な知識が必要だと思っている。
そんなopenstackを貧相な自宅環境(windows+WSL2+podman)で構築してみようかなと思う。

ちなみに自分は全く構築した経験がないため、途中であきらめてしまう可能性大。
日記的な感じで更新していこうかなと思う。

■ ざっくり構成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183599/88ceb1f7-11e6-4c3b-219e-a6df77d9c334.png)

■ 参考URL
[ここは大事]：https://www.openstack.org/
[そのほか]：https://www.slideshare.net/VirtualTech-JP/openstack-25078702

■ 膝栗毛
2日目：[やる気が起きず8日経過・・・k8s構築への道を進む。](https://qiita.com/nok-ay/items/3c84fd239b7949c9f0fa)
3日目：[全くやる気が起きず・・・はや何日目？podmanでtripleo挑戦](https://qiita.com/nok-ay/items/5de0648210c8d84a209d)
世界一優しいReactの基本その6 -再レンダリングとは-

## はじめに
前回はReactのStateを学びました。今回はReactの再レンダリングについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/07118dd9cf7290149ba5

## 再レンダリング
Reactの重要な機能のPropsやStateについてマン出来ましgたが、これらに加えて再レンダリングについて知る必要があります。前回作ったボタンを押すとカウントアップするAppですが、画面をリロードしていないのに、ボタンを押すとカウント数が自動で更新されていました。これは**コンポーネントが再レンダリング**されたからです。

![Screen Shot 2022-09-10 at 20.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/313ec0cc-441c-73f0-62cc-ccc5702b4c24.png)
sandboxApp: https://codesandbox.io/s/use-staet-test-xykxgd

setStateによってState変数が更新された時に、コンポーネントは再び最初の処理が実行されます。
試しに、console.logを仕込むとボタンをクリックするたびにconsole.logが表示されるのでわかりやすいです。

```App.jsx
import { useState } from "react";

export const App = () => {
    // ボタンをおすと、これが毎回実行される
    console.log("再レンダリング");
    
    // useStateを用いてnumを管理する
    const [num, setNum] = useState(0);

    // buttonを押したときにsetStateを用いてカウントアップする
    const onClickButton = () => {
        setNum(num + 1);
    };
    
    return (
    <div>
      <h1>カウント数</h1>
      <p>{num}</p>
      <button onClick={onClickButton}>クリック</button>
    </div>
    );
  
};

```
Stateが変更されると、最初から関数コンポーネントが処理され、差分があるDOM（要素）を検知し、変更を反映して画面病がをおこなっています。これを`再レンダリング`と呼びます。

ただし、再レンダリング時に全て関すを再実行するわけではなく、初回の実行時と再レンダリングの実行時では実行されるものとされないものがあります。例えば、`useState(0);`のような0として初期値を入れているものは再レンダリング時には実行されません。

## 副作用とuseEffect
React Hooksの便利機能でuseStateを使ってきましたが、`useEffect`という便利機能があります。
useEffectはコンポーネントの副作用を制御する機能です。

```jsx
import { useEffect } from 'react';
```

useEffecのフォーマットです。パッと見すごくわかりにくいですが、useEffectは**ある値が変わった時だけ、ある処理を実行する**という使い方になります。依存する値が変わった変わったときだけ、実行する関数を実行する、というだけです。
```jsx
useEffect(実行する関数, [依存する値]);
```

例えばnumという値が変わったときだけalertを実行する場合は以下のようにかけます

```jsx
import { useEffect } from 'react';

export const App = () => {
    // numかわったときだけalertが実行される
    useEffetct( () => {
        alert("Numが変更された！！);
    }, [num]);
}
```
第1引数にはアロー関数で処理を記載し、第2引数の依存する値にnum(必ず配列)を記載します。
この特定のときだけ、という制御をうまく使うことによって再レンダリングのときにこれだけ実行したいというような制御が可能になります。小さいアプリケーションを作っているうちは再レンダリングの処理はきになりませんが、規模が大きくなるほどこういった制御が必要になってきます。


## まとめ
Reactでは再レンダリングが実行されることによってブラウザをリロードしなくてもリアルタイムに画面が変更されます。
しかし、正しい制御をしないと再レンダリングが重くなってしまいます。そのためにuseEffectという機能を学びました。
Python Yahoo!ショッピングのAPIで検索上位調査

# Python Yahoo!ショッピングのAPIで検索上位調査

Yahooショッピングが提供しているAPIを利用して、ある検索ワードでの検索結果の上位1000件の商品の情報を取得する。下記がそのプログラムである。下記リンクにAPIの詳細が記載してあるが、制約として短時間でアクセスした場合はしばらく使えなくなることと、検索数は最大1000件までとなっている。

https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html

```python:auto_yahooshop.py
import sys
import os
import numpy as np
import requests
import json
import time

item_name = 'amazon'
appid = '******'

### 特定ワードで検索した結果上位1000件をcsvへ吐き出す
datray1 = np.array([])
datray1  = np.append(datray1 , "商品名,価格,URL,販売店,販売店のURL")
seller_id_list = []

for k in range(10):
    url = 'https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid={}&query={}&start={}&results=100'.format(appid, item_name, k*99 + 1)
    print(url)
    call = requests.get(url)
    res_dict = json.loads(call.content)
    print('検索結果: ',res_dict['totalResultsAvailable'])
    print('検索数: ',res_dict['totalResultsReturned'])
    print('順位位置: ',res_dict['firstResultsPosition'])
    count = len(res_dict['hits'])
    for i in range(count):
        name = res_dict['hits'][i]['name']
        price = res_dict['hits'][i]['price']
        url = res_dict['hits'][i]['url']
        seller = res_dict['hits'][i]['seller']
        seller_id = seller['sellerId']
        seller_id_list.append(seller_id)
        seller_name = seller['name']
        seller_url = seller['url']
        datray1  = np.append(datray1 , '%s,%s,%s,%s,%s'%(name, price, url, seller_name, seller_url))

DAT1 =  np.column_stack(datray1)
outname1 = './sample1.csv'
np.savetxt(outname1, DAT1 , delimiter=",\n", fmt="%s", encoding='utf8')

### 特定の販売店の商品の上位1000件を吐き出す
datray2 = np.array([])
datray2  = np.append(datray2 , "商品名,価格,販売店のURL")
seller_id_list = list(set(seller_id_list))
print(seller_id_list)

for i in range(len(seller_id_list)):
    for k in range(10):
        seller_id = seller_id_list[i]
        store_url = 'https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid={}&seller_id={}&start={}&results=100'.format(appid, seller_id, k*99 + 1)
        store_call = requests.get(store_url)
        store_dict = json.loads(store_call.content)
        store_count = len(store_dict['hits'])
        for j in range(store_count):
            name = store_dict['hits'][j]['name']
            price = store_dict['hits'][j]['price']
            url = store_dict['hits'][j]['url']
            datray2  = np.append(datray2 , '%s,%s,%s'%(name.replace(',', ''), price, seller_url))
        time.sleep(1)

DAT2 =  np.column_stack(datray2)
outname2 = './sample2.csv'
np.savetxt(outname2, DAT2 , delimiter=",\n", fmt="%s")
```

## まとめ
今回はYahoo ショッピングのAPIを利用して検索上位1000件を取得した。
Excel VBA 行列どっち?

# 初めに
VBAを書くときにいつも行列がどっちかを忘れてしまうのでまとめました。

# そもそも行列どっち？

そもそも行列がどっちかを忘れてしまった人もいるかと思いますので以下にまとめます。(投稿者のことです( ´∀｀ ))
```:行列どっち
行：縦 　　　# 「ぎ」をひらがなで書くときに1書目が横だから
列：横 　　　# 「れ」をひらがなで書くときに1書目が縦だから
Row : 行    # 「R」の1書目と2書目の終点を結ぶ横方向だから
Column : 列 # 「C」の1始点と終点を結ぶと縦方向だから
```
https://office-hack.com/excel/line-column-difference/#:~:text=%E3%81%B2%E3%82%89%E3%81%8C%E3%81%AA%E3%81%AE%E3%80%8C%E3%81%8E%E3%82%87%E3%81%86%E3%80%8D%E3%81%A8,%E8%A6%9A%E3%81%88%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

https://lambdalisue.hatenablog.com/entry/2013/07/18/134507

上記の内容からエクセルだと以下のようになります。
```:エクセルの場合行列どっち
数字：行(Row)
アルファベット：列(Column)
```
実際エクセルで表すと以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/862677f8-880b-ae2c-fc3a-1e75ed5c8dd2.png)

# セルの値を取得
実際にセルの値を取得してみます。
以下のような値を取得することを想定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/fae238fd-26f8-4d99-1000-289072a7c982.png)
まずは、「__Range__」で使用した場合は以下のコードになります。
```:Rangeを使用した場合
Sub GetRowColmunValue_Btn()
    Debug.Print (Range("A1").Value)
    Debug.Print (Range("A2").Value)
    Debug.Print (Range("A3").Value)
    Debug.Print (Range("A4").Value)
    Debug.Print (Range("A5").Value)
    Debug.Print (Range("B1").Value)
    Debug.Print (Range("B2").Value)
    Debug.Print (Range("B3").Value)
    Debug.Print (Range("B4").Value)
    Debug.Print (Range("B5").Value)
    Debug.Print (Range("C1").Value)
    Debug.Print (Range("C2").Value)
    Debug.Print (Range("C3").Value)
    Debug.Print (Range("C4").Value)
    Debug.Print (Range("C5").Value)
End Sub
```
上記の実行結果です。
```:実行結果
1行目A列
2行目A列
3行目A列
4行目A列
5行目A列
1行目B列
2行目B列
3行目B列
4行目B列
5行目B列
1行目C列
2行目C列
3行目C列
4行目C列
5行目C列
```
Cellsを使用する場合は、以下の書き方です。
```:
Cells(行,列).value
```
Rangeと同じ場所を取得する場合は以下のように書きます。
```:Cellsを使用した場合の書き方
Sub GetRowColmunValue_Btn()
     'A1
     Debug.Print (Cells(1, 1).Value)
     'A2
     Debug.Print (Cells(2, 1).Value)
     'A3
     Debug.Print (Cells(3, 1).Value)
     'A4
     Debug.Print (Cells(4, 1).Value)
     'A5
     Debug.Print (Cells(5, 1).Value)
     'B1
     Debug.Print (Cells(1, 2).Value)
     'B2
     Debug.Print (Cells(2, 2).Value)
     'B3
     Debug.Print (Cells(3, 2).Value)
     'B4
     Debug.Print (Cells(4, 2).Value)
     'B5
     Debug.Print (Cells(5, 2).Value)
     'C1
     Debug.Print (Cells(1, 3).Value)
     'C2
     Debug.Print (Cells(2, 3).Value)
     'C3
     Debug.Print (Cells(3, 3).Value)
     'C4
     Debug.Print (Cells(4, 3).Value)
     'C5
     Debug.Print (Cells(5, 3).Value)
End Sub
```
上記の実行結果です。
```:実行結果
1行目A列
2行目A列
3行目A列
4行目A列
5行目A列
1行目B列
2行目B列
3行目B列
4行目B列
5行目B列
1行目C列
2行目C列
3行目C列
4行目C列
5行目C列
```

# 最後に
ここまで見ていただきありがとうございます。
Flutter 文字列の途中の文字のみ色を変更したり、タップイベントを受ける方法まとめ


### はじめに
様々なサービスのログイン画面で、アカウントを持っていない方向けに
「アカウントを作成していない方はこちら」とあり
「こちら」や「ここ」の文字列色が違い、リンクになっている表示をよく見かけます。
登録を必要とするサービスを作成するにあたって必須となるアイテムです。

今回はこの実装をする方法を以下の3つ紹介します。
[1.TextButtonを使用する](#1textbuttonを使用する) 
[2GestureDetectorを使用する](#2gesturedetectorを使用する)
[3RichTextを使用する](#3richtextを使用する)

なお、Flutterでの開発経験が浅いため、至らぬ箇所があれば指摘お願いいたします。

#### 1.TextButtonを使用する
これは目的を達成できているか微妙なところですが一つの手法として記載します。
テキストの途中でテキストボタンを表示する方法です。
これには一つ注意点があり、無駄な空白をなくすことが出来ません。
（改善策はあるかもしれませんが、今の自分の技量ではなくすことはできませんでした。）
```
  // RowWidgetで横並びにする
  Row(
    // 中央寄せ
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('アカウントを作成していない方は'),
      TextButton(
        // できるだけボタンを小さくする
        style: TextButton.styleFrom(minimumSize: Size(1, 1)),
        onPressed: () {
            // タップ時の処理
            print('タップされました');
      },
        child: Text('ここ'),
        ),
        Text('をクリック'),
    ],
  ),
```
↓このように、少し空白ができます。
色をつけたり、タップしてみると分かりますが、あくまでボタンなので、ボタンのスペースがとられてしまいます。
![スクリーンショット 2022-09-05 21.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823638/905755ab-55d6-73cd-d1b0-751494d1a8f8.png)




### 2.GestureDetectorを使用する
テキストの途中に、ジェスチャー・タップなどのイベントを検出するウィジェットを配置する方法です。
このウィジェットをイベントを受けたいテキストにラップさせることで、onTapイベントを受けることができるようになります。

```
  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('アカウントを作成していない方は'),
      GestureDetector(
        onTap: () {
          // タップ時の処理
          print('タップされました!');
        },
          child: Text('ここ', style: TextStyle(color: Colors.blue),)),
      Text('をクリック'),
    ],
  ),
```
結果は↓の通りです。
![スクリーンショット 2022-09-05 20.52.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823638/d3141a2b-e146-efe7-5386-9c85b2b53344.png)




### 3.RichTextを使用する
```
  RichText(
    text: TextSpan(
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(text: 'アカウントを作成していない方は'),
        TextSpan(text: 'ここ',
          style: TextStyle(color: Colors.blue),
          recognizer: TapGestureRecognizer()..onTap = () {
            // タップ時の処理
            print('タップされました');
          }
        ),
        TextSpan(text: 'をクリック'),
      ]
    ),
  ),
```
こちらも2のGestureDetectorを使用した時と同じ見た目になります。
![スクリーンショット 2022-09-05 20.52.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823638/d3141a2b-e146-efe7-5386-9c85b2b53344.png)

### さいごに
今回のようなケースでは、TextButtonを使用することはほとんどないかと思います。
GestureDetectorを使用するか、RichTextを使用するかは、正直好みかと思います。
ケースバイケースで、コードをスッキリ書ける方を選択するのが良いでしょう。
世界一優しいReactの基本その5 -Stateとは-

## はじめに
前回はReactのPropsを学びました。今回はReactの重要なStateについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/99f7d34ac72b2f941404

## State
Reactでは**stateを用いて状態の管理**を行います。
例えば、以下のようなものが考えられます

- ボタンが押せるかどうか
- エラーがあるか
- テキストボックスの中身の値

このようにユーザーの操作によって値が変化する状態をstateを用いて管理します。

### useState
Reactでは`React Hooks`と呼ばれる機能の中で`useState`という便利な機能があります。
これをimportすることで簡単にstateの管理が出来ます

```jsx
import { useState } from 'react';
```

useStateの使い方は実にシンプルで、1つ目にState変数、2つ目にそのStateを更新するための関数を定義します。例えばnumという変数を管理したい場合以下のようになります。

```jsx
const [num, setNum] = useState();
```

numという変数を更新する場合はかならずsetNumという関数を用いて更新します。
またnumにデフォルト値を持たせたい場合以下のようかけます。


```jsx
const [num, setNum] = useState(0); // デフォルト値は0になる
```

### 実装例
ボタンを押したらカウントアップするような実装を考えてみます。
stateを用いて押した回数をnumというstate変数で管理し、ボタンを押すごとにsetNumで更新をしてみます。


```App.jsx
import { useState } from 'react';

export const App = () => {
    // useStateを用いてnumを管理する
    const [num, setNum] = useState(0);

    // buttonを押したときにsetStateを用いてカウントアップする
    const onClickButton = () => {
        setNum(num + 1);
    }
    
    return (
        <div>
            <h1>カウント数</h1>
            <p>{num}</p>
            <button onClick={onClickButton}>クリック</button>
        </div>
    )
}
```
onClickでonClickButton関数を呼び出し、その中でsetNumをよびだしnum+1することによって1個増やした値で更新をしています。
![Screen Shot 2022-09-10 at 20.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/3174c241-b0f2-e0e8-da25-711ade8f5b66.png)

参考sandbox: https://codesandbox.io/s/use-staet-test-xykxgd



## まとめ
今回のstateの説明は非常にシンプルですが、基本的な使い方はこのようになります。
Stateとして管理することによって、ユーザーが何かアクションをしたことにより値を変化させるという事が可能になります。
WindowsにClang＆gccの環境を作る

# 結論
1. 以下をダウンロード
[Releases · mstorsjo/llvm-mingw · GitHub](https://github.com/mstorsjo/llvm-mingw/releases)
llvm-mingw-*-msvcrt-x86_64.zip
※現時点は「llvm-mingw-20220906-msvcrt-x86_64.zip」

1. ZIPを展開
任意の場所に任意のフォルダ名で配置
例
    ```
    C:\llvm-mingw
        aarch64-w64-mingw32
        armv7-w64-mingw32
        bin
        i686-w64-mingw32
        include
        lib
        python
        share
        x86_64-w64-mingw32
    ```

1. 環境変数PATHに「C:\llvm-mingw\bin」を追加
コマンドプロンプトを起動し、Cソースをコンパイル（64bitバイナリが出力される）
    ```
    clang xxx.c
    ```

# ハマったこと

- LLVMを単体でインストールしてみた。
[Releases · mstorsjo/llvm-mingw · GitHub](https://github.com/mstorsjo/llvm-mingw/releases)
LLVM-15.0.0-win64.exe

- MinGWをC:\MinGWに配置してPATHに「C:\MinGW\bin」を設定してみた。
[Downloads - MinGW-w64](https://www.mingw-w64.org/downloads/)
MingW-W64-buildsリンク
→ Mingw-builds の Installation: GitHub リンク
[Releases · niXman/mingw-builds-binaries · GitHub](https://github.com/niXman/mingw-builds-binaries/releases)
x86_64-12.2.0-release-win32-sjlj-rt_v10-rev0.7z
(gccを含み、例外処理がSetJump/LongJumpのバイナリ)

- コンパイルしてもエラー。適当に環境変数CPATHとか設定してもダメだった。
    ```
    clang xxx.c
    clang: warning: unable to find a Visual Studio installation
    ```

- 公式にはWindowsはVisual Studio一択。
[Getting Started with the LLVM System — LLVM 16.0.0git documentation](https://llvm.org/docs/GettingStarted.html#requirements)

- gccでコンパイルすればできるみたい。
[clang/LLVMをWindowsでビルドする - 原色奈良阪](https://narazaka.net/o/konata/computing/build_clang_llvm_msw.html)

- MinGWにそれらしいものがあった気がした。
[Downloads - MinGW-w64](https://www.mingw-w64.org/downloads/)
LLVM-MinGWリンク
→ LLVM-MinGW の Installation: GitHub リンク
→ 冒頭の結論へ
WSLを使うために最低限覚えたいLinuxコマンド集

# はじめに
私は学生の頃から今に至るまで3年間、授業や実務においてWSLを使ってきました。
今回は使ってきた経験の中で考えた、WSLを使うために最低限覚えたいLinuxコマンド集を書きました。
なお、ディストリビューションは`Ubuntu`を前提とし、コマンドの詳細な内容は省きます。

:::note alert
あくまでWSLを使うことを前提をしているので、普通のLinuxを使う場合はもっと他にも覚えないと行けないコマンドがあります。
:::
# root権限でコマンドを実行
```
sudo コマンド
```

# ディレクトリ間移動に必要なコマンド
## cd 指定したディレクトリに移動
```
cd ディレクトリ名
```

## ls ディレクトリの中にあるファイルやディレクトリの情報を表示
### オプション無しの場合(隠しファイルは非表示になる)
```
ls ディレクトリ名
(指定しない場合は、カレントディレクトリの中身が表示される)
```
### オプション -a 隠しファイル・ディレクトリを表示させる場合
```
ls -a ディレクトリ名
```

### オプション -l ファイルやディレクトリのパーミッションを表示させる場合
```
ls -l ディレクトリ名

ls -la ディレクトリ名
↑オプション -a と組合せて、隠しファイル・ディレクトリのパーミッションも表示させることができる。
```

# ファイル・ディレクトリの閲覧・作成・編集・削除に必要なコマンド
## 指定したディレクトリをWindows Explorerで開く
```
explorer.exe ディレクトリ名
```
基本的にファイル・ディレクトリに対する操作は、Windows Explorer上で完結できます。
ファイル・ディレクトリの権限によっては操作が行うことが出来ませんので、次に紹介するコマンドで権限を更新してください。
# パーミッション(権限)関係
## ファイルやディレクトリのユーザーの権限変更
```
chmod 変更する権限 ファイル名やディレクトリ名
例：chmod 755 test.txt

ディレクトリの中身も権限を変更したい場合
chmod -R 変更する権限 ファイル名やディレクトリ名
```
## ファイルやディレクトリの所有権の変更
```
chown ユーザー名(：グループ名) ファイル名やディレクトリ名
例：chown myuser hoge

ディレクトリの中身も権限を変更したい場合
chown -R ユーザー名(：グループ名) ファイル名やディレクトリ名
```
# aptパッケージ関係
## アップデート
```
sudo apt update -y
sudo apt upgrade -y
```
OSのアップデート機能の要素も兼ね備えている。
基本的に2つのコマンドをセットで行う。
`sudo apt update -y`と`sudo apt upgrade -y`の違い
https://timetotravel.space/update_upgrade_chigai/
## インストール
```
sudo apt install パッケージ名 -y
```
## アンイストール
```
sudo apt remove パッケージ名 -y
```
## インストールしたパッケージ一覧表示
```
apt list --installed 
```

# 最後に
WSLでも実際にちゃんと使いこなそうとしたら、他にも覚えたいコマンドはありますが、これだけのコマンドを覚えておけば、なんとなくでも使えるようになります。
順列問題に再帰関数を利用し福岡の猫島を巡る

初投稿記事です。お手柔らかにお願いいたします。

# 順列・組み合わせを返す再帰関数のテンプレート
まずは雛形を示します。

```python
def create_lists(mylist=[]):
    if is_answer(mylist): # a boolean which indicates mylist could be an answer.
        return mylist
    result = []
    
    for c in get_appendable(mylist): # a list of elements which can be added.
        x = create_lists(mylist+[c])
        if len(x)!=0 and type(x[0]) is list:
            result.extend(x)
        elif len(x)!=0:
            result.append(x)
    return result
```
is_answer(mylist)はmylistが終了条件を満たしているかのBoolean値を返す関数です。
get_appendable(mylist)はmylistに追加可能な要素のリストを返す関数です。

# 利用例
問： 3以上7以下の自然数から3つ選び、いずれも互いに素である組み合わせをすべて挙げよ。

答えを先に言えば [3, 4, 5], [3, 4, 7], [3, 5, 7], [4, 5, 7], [5, 6, 7] の5組です。
当問題に適用できるis_answer関数とget_appendable関数は例えば下のように記述できます。
```python
def is_answer(mylist):
    return len(mylist) == 3

def get_appendable(mylist):
    primes  = [2, 3, 5]
    numbers = [3, 4, 5, 6, 7]
    appendable = []
    for n in numbers:
        if n > max(mylist,default=0):
            if all([[m%p for m in mylist+[n]].count(0)<2 for p in primes]):
                appendable.append(n)
    return appendable
```
is_answer関数は非常にシンプルです。要素数が3つのリストならTrueを返します。
[2, 5, 6] のような、問の要請を満たさない組み合わせにもTrueを返してしまいますが、
仕様上、そもそもこのような配列がcreate_lists関数に与えられることはありません。

get_appendable関数の動作としましては、mylistの最大値より大きいもので、
mylistに追加してもいずれも互いに素という条件を満たしうる自然数の配列を返すものです。
例えば [3] を与えると [4, 5, 7] を返しますが、これら1つ1つが追加可能ということです。

```python
print(create_lists())
# [[3, 4, 5], [3, 4, 7], [3, 5, 7], [4, 5, 7], [5, 6, 7]]
```

上述したis_answer関数とget_appendable関数を定義してからcreate_lists関数を呼ぶと、
上記の様な結果が返ってきます。先に示した答えと一致していることがわかります。



# 本題（福岡の猫島巡り）
![Fukuoka.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2841874/83cf06a1-2810-bb67-0430-51c6f24441ef.png)

福岡県には猫島と称される離島(上図赤字)が6つあり、全て本土から定期船が出ています。
上記の雛形を利用し、猫島全てを土・日の2日間で巡ることが可能な経路を導いてみました。
必要な情報は下記の2点です。いずれもWebサイトやGoogle mapで得て整形しました。

①各島への定期船の出港・帰港時刻
②本土側にある各港間の移動所要時間（移動手段は車を仮定）

出港・帰港時刻は個別に定義せず、必要な滞在時間を満足できる組み合わせで与えました。
例えば相島行11:10出港-14:10帰港のような形です。
ただし土日を入れ替えただけの順列を出力しないよう、相島行きは土曜日に限定しました。

本題に係るコードは私的かつ煩雑であるため割愛します。
得られた順列はわずか2パターンのみでした。下に示します。

```
【土曜日】
地島   行  07:45 発  09:05 帰港
大島   行  11:15 発  13:25 帰港
相島   行  14:30 発  16:00 帰港
玄界島 行  16:45 発  20:20 帰港
【日曜日】
小呂島 行  09:00 発  14:25 帰港
姫島   行  16:00 発  17:25 帰港
```
```
【土曜日】
姫島   行  07:50 発  10:05 帰港
大島   行  11:15 発  13:25 帰港
相島   行  14:30 発  16:00 帰港
玄界島 行  16:45 発  20:20 帰港
【日曜日】
小呂島 行  09:00 発  14:25 帰港
地島   行  15:10 発  17:55 帰港
```

地島も姫島も本土の港への公共交通機関を利用したアクセスは良くないため、
レンタカーを利用する場合には前入りが必須という結論となりました。
福岡近辺にお住いで、自家用車をお持ちの方ならば土日で巡れそうですね。

上記の旅程が実際に機能するかは波・道路の状態にも依存します。
またここで利用したダイヤは2022年9月現在のものであり、今後変わる恐れもあります。
実際に試されて損害を被られたとしても、私は責任を負えませんのでご留意ください。

以上となります。最後までお読みいただきありがとうございました。
LPC812MAXのMbedでのHT16K33でナイトライダー


x mbed2リビジョン144
x リビジョンを変更できる人むけ


目的
光らせて遊ぶ


![o_con739.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/7ad4ff74-15a3-24ff-e9d1-58bc65d0debd.jpeg)



```c++



//HT16K33_812_1

#include "mbed.h"

//HT16K33のアドレス
#define ADDR        (0xE0)  //  address

//       SDA    SCL
I2C i2c(P0_10, P0_11); //812

//メイン関数
int main()
{

//INIT start *********

    char data_read[8];  //i2cバッファー

    data_read[0]=0x21;
    i2c.write(ADDR, data_read, 1);
    wait_ms(1);

    data_read[0]=0x81;
    i2c.write(ADDR, data_read, 1);
    wait_ms(1);

    data_read[0]=0xef;
    i2c.write(ADDR, data_read, 1);
    wait_ms(1);

    for(int ii=0; ii<16; ii++) {
        data_read[0]=ii;
        data_read[1]=0x00;
        i2c.write(ADDR, data_read, 2);
        wait_ms(1);
    }//for

    wait_ms(2000);

//INIT end *********

    //無限ループ
    while(1) {
        for(int ii=0; ii<8; ii++) {

            //点灯パターンの設定
            data_read[0]=0;
            data_read[1]= (1<<ii);
            i2c.write(ADDR, data_read, 2);
            wait_ms(1000);

        }//for
    }//while

} // main





```


![o_con833.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d2562c13-1f69-1472-3934-d838d1df64a6.jpeg)



-21-
UnityからFirebase（主にFunctionsとAuth）のEmulatorを触ろうとしてハマった

<h2>馴れ初め

個人ゲームのデータをFirebaseのFireStoreにFunctions経由で保存しようとした
開発段階だからとemulatorをセッティングし、Unityからアクセスしようとした

<h2>つまづき

sdkのemulatorの対応状況がバラバラ
emulatorの設定メソッドくらい用意してください・・・

<h2>状況

Firebaseのemnulatorをセットアップし、Unityのsdkを入手した。
さて、emulatorに繋ごうとしてドキュメントを見ると

FireStore ⇨ settingsでemulatorに接続するように設定できる（ちょっとトリッキー）
Functions ⇨useFunctionEmulator というメソッドが用意されている（ちゃんとしてる）
authentication ⇨ねーよ

**Google?**

<h2>こまるポイントその１

authがGoogle鯖に繋ぎにいくので、
```cureateUser.cs
 auth.CreateUserWithEmailAndPasswordAsync(email, password).ContinueWith(task => {

```
とすると、普通にGoogleサーバにauthのユーザーが作られます。
（簡単すぎてびびるくらい）
そう、emulatorにはユーザーが作られない（当たり前）
でも、開発中はローカルのemulatorでやりたいわけです
色々試行錯誤するも、結局、emulatorコンソールまたは、functionsでメソッド書いてできた


<h2>こまるポイントその２

非同期処理が色々面倒ですが、Functionsもauthもsdkの使い方は簡単で
認証処理をして（省略）、サーバ接続のコードを書く（省略）と、接続時に認証情報を渡してくれるようです
（認証情報を自分で渡す必要がないらしい）
```signIn.cs
auth.SignInWithEmailAndPasswordAsync(email, password).ContinueWith(task => {
}
//hogehoge
await functions.GetHttpsCallable("helloWorld")
            .CallAsync(hogeData)
            .ContinueWith(task => {
            // HogeHoge
            }
    );
```

こうすることで、サーバ側にはcontextにauthとして情報が渡ります
多分、一般的にはサーバ側ではユーザーが認証されてる（auth情報を使う）かどうかを確かめて処理を動かすので

```index.js
exports.helloWorld = functions.https.onCall((data, context) => {
    if (context.auth === undefined || !context.auth.uid || context.auth.uid === 0) {
        throw new functions.https.HttpsError('unauthenticated');
    }
    return admin.auth().getUser(userId)
        .then(() => {
        // HogeHoge
        }};
```
ととなるかと思います。これは、Google鯖上では普通に動きます。
が、emulator上ではgetUser で例外がスローされます。ユーザーないので・・・

<h2>とりあえずの回避法

***ローカルでの開発中はgetUserをすっ飛ばす***

は、流石に強引すぎるので。
１）auth emulatorに　authと同じユーザーIDでユーザーを作る
２）クライアントでは、auth認証で得られたuserIdをなんらかの方法でFunctionsに渡す
　　（今回は普通にデータに突っ込んだ）
３）Functions側ではemulatorで動いているかをチェックして、emulatorの場合は、
 context.auth.uidの代わりに、送られてきたユーザーIDを使う

という回避方法を使ってみた

```index.js
    var userId = context.auth.uid;
    if (process.env.FUNCTIONS_EMULATOR === 'true') {
        userId = data.userId;
    }
    return admin.auth().getUser(userId)
    // HogeHogeな処理

```


<h2>結論

そもそもこれで正しいのかググってもあまり出てこない。が、開発中部分なんで良いんでは、という気がしている
（個人ゲームだし！）
困ってる人があまりいない、ということは、UnityでFirebaseを使う際にAuthentication使ってないのかなぁ

<h2>お願い

正しい（と思われる）方法があったら教えてください。
あとGoogleの人はさっさとUnitySDKにuseEmulatorを実装してください。
FireStoreも正式なメソッドではなく、Settingsメソッドでなんとかしてますよねぇ

<h2>蛇足

ちなみに、
```useEmulator.swift
func useEmulator(withHost host: String, port: Int)
```

```useEmulator.java
FirebaseAuth.useEmulator(withHost host: String, port: Int)
```

とネイティブ版にはあるので、ネイティブプラグインを使えばできそうですが、
**このためにそこまでやる？**
って感じなのでやめました

なお、Functions自身はonCallを使うととっても簡単にサーバとやり取りできます
UnityのWebRequestでJSONでうんたらこうたらするより随分簡単でした
（どのみち非同期処理はいるんだけど・・・）
3Dの散布図を見るツールをplotly.jsで作ってみた

# はじめに
以前、こちらの記事（[3Dの散布図をさくっと見るツールを作ってみた](https://qiita.com/yo16/items/b5af6d2e9d1bf5e8ab51)）で、three.jsを使って結構頑張って作ったのですが、[Plotly(JavaScript版)](https://plotly.com/javascript/)というライブラリがあって、それを使うと簡単に作れちゃうという噂を聞き、試してみました。
すごく簡単です。（涙）
そしてきれい。（涙）

いいんだ。前のはThree.jsの勉強になったからいいんだ。

# 作ったもの
- 初期データとしてサンプルのウサギの点群が入ってますが、ファイルを選択すればお手元のCSVを表示できます。
    - このウサギは、ポリゴン業界(?)で有名な[Stanfordのbunny](http://graphics.stanford.edu/data/3Dscanrep/)から拝借しました。
    - 向きがちょっとアレですが、元データのまま、あえて編集してません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0ab1cdb9-dcf3-dcec-ecf5-ce9772ffafce.png)

デモサイト
https://threed-scatter-app.onrender.com/

ソース

https://github.com/yo16/plotly_3d_scatter

# 特徴
- ブラウザで動作します。ドラッグでぐりぐり動かせます。
- 自分で用意したCSVのデータも描けます。
- htmlと必要なJavaScriptをダウンロードすれば、ローカルでも動きます。
    - データの収集等はしていませんのでご安心を。
- JavaScriptがわかる人なら、自分のサイトに組み込めます。
- ↑ [以前の](https://qiita.com/yo16/items/b5af6d2e9d1bf5e8ab51)と同じです。
- 上に出るメニューから、PNG保存や、回転･パンの片手操作ができます。
    - 水平の角度を調整したいときは、中心から少し外れた位置をつかんで、中心を囲むような円を描く操作をするといいです。（この手の3D操作のコツの１つ）

# plotly.jsの使い方
- グラフを描画するためには、この１文だけです。
- x,y,zの値のとこはそれぞれ配列にする必要があるので、この前の処理で元のCSVの形式（x,y,zで１データ）から加工して、`data_x`、`data_y`、`data_z`を作っていますが。
```javascript:/src/js/plotly_3d_scatter_main.js(10-40)
    Plotly.newPlot(
        'myGraph',
        [
            {
                x: data_x,
                y: data_y,
                z: data_z,
                mode: 'markers',
                marker: {
                    color: 'rgb(27,27,256)',
                    size: 3,
                    symbole: 'circle',
                    line: {
                        color: 'rgb(204,204,204)',
                        width: 1
                    },
                    opacity: 0.8
                },
                type: 'scatter3d'
            }
        ],
        {
            margin: {
                l: 0,
                r: 0,
                b: 0,
                t: 0
            }
        }
    );
```
- なんて簡単・・・。プロパティもわかりやすい。

# おわりに
plotlyは、ほかのグラフもたくさん描ける上に、JavaScript版以外にもPython版･R版などがあって、すごく良いです。グラフが必要になったらこれ使うと楽だなぁと思います。

あ、自分の作ってみたものの感想で言うと、青い〇のほかに、別の系列･色を追加したくなるなぁとは思いました。私自身が必要ではないので、今回は作りませんでしたが、JavaScript的には色を変えながら追加していくだけなので、簡単にできます。（ご要望があったらコメントください。）
【Docker】DockerfileのRUN周辺で出てくるコマンドに関するメモ

# RUN
Dockerfileを記述する際の命令の一つにRUNがある。これはコマンドの実行を命令するものである。
以下のコードではDockerfileを一部抜粋している。これはrailsアプリのDockerfileの一部で、rails6ではWebpackerがjavascriptの標準コンパイラとなるので、Webpackerのインストールに必要なyarnとnodejsをインストールし、その他画像処理に必要なimagemagickやデータベースのmysqlのサーバーとクライアントをインストールしているという内容である。
```dockerfile
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs \
  && apt-get update -qq \
  && apt-get -y install \
  yarn \
  nodejs \
  imagemagick \
  default-mysql-server \
  default-mysql-client
```
ここで書かれている記述について以下にいくつかメモをしておく。

# curl
client for url。URLに書かれている先とデータのやり取りを行う。 -sS というのは、 -s（実行時に表示される様々なメッセージを表示しない）というオプションと、 -S （エラーメッセージを表示する）というオプションの二つが組み合わさったもので、実行時にエラーメッセージがあればそれのみを表示する設定となる。逆にエラーメッセージ以外は表示しない。
ここでは```https://dl.yarnpkg.com/debian/pubkey.gpg```というURLから公開鍵をインポートする目的でcurlが使われる。
# |
パイプと呼ばれる記号。curlを使ってURLから取得した標準出力のデータを標準入力として次のコマンドに渡している。
# apt-key add -
aptはDebian系OSで使われるパッケージ管理コマンド。 key addは信頼キーリストに新たなキーを追加するコマンドで、addの後の - は先程のcurlのURLからの標準入力のデータをそのまま標準入力として使うという意味。(apt-key listを実行すれば信頼キーのリストを表示できる。)
ただしこのコマンドは現在非推奨となっており、これに代替するコードは調べたら結構出てくる。（個人的にも何か記事を書ければと思う）ここではyarnレポジトリを有効化するために、yarnレポジトリのGPGキーをリストに追加している。

# &&
前のコマンドが成功したら後ろのコマンドを実行するというSQLで言うところのAND的な役割を持つリナックスコマンド。
# echo〜tee
echoは文字列を表示するリナックスコマンド。teeは標準入力として受け取った内容をファイルに書き出すコマンド。ここでは```deb https://dl.yarnpkg.com/debian/ stable main```という文字列を```/etc/apt/sources.list.d/yarn.list```というファイルに書き出している。これにより、公開されているyarnのレポジトリのソースをリストに追加している。
# apt-get update
先程のecho〜teeにでリストに追加されたURLからパッケージファイルを
```/var/lib/apt/lists```に格納している。これによりパッケージファイルのインストールができるようになる。-qqはエラー以外は表示しないというオプション
# apt-get install
パッケージのインストールを行う。-yは質問に全てyesと答えるオプション。
# \
バックスラッシュはコードを複数行に分ける。コードの可読性を高める。
# default-mysql-server default-mysql-client
ここについては一応補足。これをmysql-server、mysql-clientと書いてあるコードも見かけるが、DockerのベースイメージがDebian10以降だと```exit code: 100```というエラーが出てしまうようなのでお気をつけて。
Electronアプリをプレゼンモードよりも前面に表示するテクニック


Electronアプリをほかの何よりも前面表示するテクニックです。
Googleスライドなどは全画面表示しても、さらに前面へと表示できるようになります。
※MacOSでしか動作確認できていません。

```javascript:main.js
const { app, BrowserWindow } = require("electron");

app.dock.hide() // Dockアイコンを非表示（MacOSのみ）

function createWindow() {
  const mainWindow = new BrowserWindow({
    transparent: true,  // 透明化
    frame: false,
    hasShadow: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })
  mainWindow.setAlwaysOnTop(true, "screen-saver") // 最前面表示
  mainWindow.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true}) // すべてのワークスペース(デスクトップ)で表示（MacOSのみ）
  mainWinsow.setIgnoreMouseEvents(true)           // マウスイベントを無効化
  mainWindow.maximize()                           // ウインドウサイズを最大化
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
```

ポイントは、。

```javascript
app.dock.hide(); // Dockアイコンを非表示（MacOSのみ）
mainWindow.setAlwaysOnTop(true, 'screen-saver'); // 最前面表示
mainWindow.setVisibleOnAllWorkspaces(true); // すべてのワークスペース(デスクトップ)で表示（MacOSのみ）
```

### 参考

https://github.com/electron/electron/issues/10078
様々な繰り返し処理

# 目的
- Enumberable処理について理解する

# ポイント
- Enumberable処理は、each などのブロックを呼び出してループを行う処理のこと
- while文は 変数の初期化 や ループ終了のためのコード が必要
- map はループの戻り値を配列で返す

# 書き方の例
```ruby
numbers = [1, 2, 3]

count = 0
while count < numbers.length do
  puts numbers[count]
  count += 1
end

numbers.each do |number|
  puts number
end



```
~実際の表示~
1
2
3

1
2
3



# 注意するポイント
- while文 はミスると無限ループになる
- each文 はオブジェクトの数ぶんしかループしない

# 具体的な例
```ruby
#配列の要素の数字1つ１つに10を足した結果を配列で出力
numbers = [1, 2, 3, 5, 6]

result =
numbers.map do |number|
  number + 10
end
p result


p result = numbers.map {|number| number + 10}


```
~実際の表示~
[11, 12, 13, 15, 16]
[11, 12, 13, 15, 16]