OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】ポリモーフィック関連先の項目で検索する方法

# はじめに

ポリモーフィック関連先の項目の検索方法を時間をかけて調べたのですが、なかなか出てこなかったためまとめておこうかなと思います。

ポリモーフィック関連の作成方法などはやりません。
関連リンクを下記に載せておくので、必要であれば参考にしてください。。

* Railsガイド - ポリモーフィック関連付け
    * https://railsguides.jp/association_basics.html#%E3%83%9D%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E9%96%A2%E9%80%A3%E4%BB%98%E3%81%91





# 関連性

以下のような```Animal```モデル、```Panda```モデル、```Cat```モデルの構成を作成します。

```ruby:animal.rb
class Animal < ApplicationRecord
  belongs_to :animalable, polymorphic: true
end
```


```ruby:panda.rb
class Panda < ApplicationRecord
  has_many :animal, as: :animalable, dependent: :destroy
end
```


```ruby:cat.rb
class Cat < ApplicationRecord
  has_many :animal, as: :animalable, dependent: :destroy
end
```

# ポリモーフィック関連先の項目の検索方法

手順としては、以下となります。

1. ```Animal```モデルに```Panda```モデルを```JOIN```
2. ```where```句で検索を実行

まずは、```Panda```モデルの例を見ていきます。

```ruby
# join SQL
join_sql = <<-"EOS"
  JOIN pandas
    ON pandas.id = animals.animalable_id
    AND animals.animalable_type = 'Panda'
EOS

animals = Animal.joins(join_sql)
# search SQL
animals.where("pandas.name LIKE '%ran%'")
```

次に```Cat```モデルです。まぁ同じですが。。

```ruby
# join SQL
join_sql = <<-"EOS"
  JOIN cats 
    ON cats.id = animals.animalable_id 
    AND animals.animalable_type = 'Cat'
EOS

animals = Animal.joins(join_sql)
# search SQL
animals.where("cats.name LIKE '%dora%'")
```




# まとめ

ActiveRecord を使っていろいろと試してみたのですが、期待する動作をしてくれませんでした。
力技であまり良くないんだろうなぁと思いましたが、SQLを直接書きました。
もっといいやり方をご存知の方がいれば、教えていただきたいです。


# 参考
* Rails4: ActiveRecord polymorphicのjoins検索？
    * https://smallmakeprgnote.wordpress.com/2014/09/11/rails4-activerecord-polymorphic%E3%81%AEjoins%E6%A4%9C%E7%B4%A2%EF%BC%9F%EF%BC%88%E3%83%A1%E3%83%A2%EF%BC%89/

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
JEP 400: UTF-8 by Default

動きがあったので備忘。

https://openjdk.java.net/jeps/400

* file.encodingやnative.encoding(SE 17以降)で  
  Java SE API default文字セットに一律：UTF-8が指定される仕様変更。  
  従来はplatform defaultでした。
* JEPで提唱の通り、主にアジアロケール設定のWindowsユーザに影響あり。  
  つまり日本っすね。。。

>In other environments, the risk of changing the default charset to UTF-8 after more than twenty years may be significant. 
We expect the main impact will be to users of Windows in Asian locales, and possibly some server environments in Asian and other locales.
Possible scenarios include:(割愛)

* JEP現時点(2021/7/15)での情報によれば、コード変更したくない場合には`-Dfile.encoding=COMPAT`で回避。

* 今般OpenJDK masterブランチに修正がcommitされました。
https://github.com/openjdk/jdk/pull/4733/commits/107210cf466f87ca84c1209e33934565576c6f59
【React】チェックボックスのチェックが付かない現象の解決

本記事では、チェックが付かない問題を解決するためある記述をしますが、その記述をすることでなぜ「チェックが付かない問題」が解決されるのかわかっていません。(わかったら追記していきます)。

# チェックが付かないコード
まずはチェックが付かなかったコードを以下に記載します。  

```javascript
  //チェックボックスの処理
  const switchCheckBox = (e) => {
    e.preventDefault();
    const todoId = todo.id;
    const newTodos = todos.map((todo) => {
      if (todo.id === todoId) {
        return {
          id: todo.id,
          title: todo.title,
          checkFlug: !todo.checkFlug,
        };
      }
      return todo;
    });
    setTodo(newTodos);
  };
```
# 処理の解説
onClickでswitchCheckBoxが呼ばれることでチェックが付きます。　

### switchCheckBox関数　
todosというtodoを持つ配列をmap関数で回しています。その際、一致したidのチェックボックスのみがtrueになった配列をnewTodosとして新たに生成しています。それをsetTodo（useState）に引数として渡すことで再レンダリングが起きるので、チェックボックスが更新されるはずなのですが更新されませんでした。  
todoがもつcheckFlugが更新されていないのかとDeveloperToolで確認したのですが、しっかりと更新されていてわけワカメでした。

# 解決
e.preventDefaultが必要なかったみたいです。
以下で解決でした。

```javascript
  //チェックボックスの処理
  const switchCheckBox = () => {
    const todoId = todo.id;
    const newTodos = todos.map((todo) => {
      if (todo.id === todoId) {
        return {
          id: todo.id,
          title: todo.title,
          checkFlug: !todo.checkFlug,
        };
      }
      return todo;
    });
    setTodo(newTodos);
  };
```

# 原因
e.preventDefault();についての理解ができていなかった。勉強します。
応用情報技術者試験に合格した勉強法

# はじめに
先月、合格発表のあった
令和3年度4月試験 **応用情報技術者試験**に合格しました。

![名称未設定のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1762956/a368d602-3f2a-c16f-7af1-03c38cafda1c.png)


3度目の挑戦だったのですが、**合格できた一番の要因は実践した勉強法**だと思います。
応用情報技術者試験は合格のためにどのような対策を取るかが大事です。

この記事では**私が実践した勉強法**を記事として整理しました。

# 勉強に使用したもの

- 参考記事「**[応用情報技術者試験の勉強法を徹底解説！](https://shikaku-mafia.com/ap-study/)**」
- 参考書 1冊
- 問題集 1冊


## 参考にしたサイト様の記事

応用情報技術者試験では、**合格のために必要な対策**をイメージすることが大切だと思います。

何か参考にできる勉強法をインプットしておくと**「やるべき対策」**の全体像が見えて良いかと思います。

私はこちらのサイト様の記事が一番しっくりきたので参考にしました。

- **[応用情報技術者試験の勉強法を徹底解説](https://shikaku-mafia.com/ap-study/)**

本記事を参考にして頂いても良いですし、ぶっちゃけ
Google の検索エンジンで「応用情報 勉強法」などと検索して出てきた記事を参考にすれば何でも良い気がします。

**ただし、あからさまに信用度の低い記事もたまにあるのでそれは避けたほうが良いです。**

ある程度の数の記事を読めば、記事の信用度が判断できるかと思います。



## 参考書

参考書はあくまで**「辞書的に」**使います。

頭から参考書を読んでいくのは、
「よく分からない」 & 「その知識が出題されるときのイメージがしにくい」ので
あまりオススメしません。

参考書は近くの書店などで読んでみて使いやすそうなのを選んでも良いかと思います。

私は先ほどの参考記事で紹介されていた参考書を Amazon で購入しました。

**索引がついていたのが辞書的に使うのに便利だった**ので、そこらへんも考慮すると良いかもしれません。


## 問題集

問題集は**午後試験に特化したもの**が良いと思います。

後述しますが、
午前試験の問題演習は**[応用情報ドットコム](https://www.ap-siken.com/)** というサイトを使ったので、
午後試験の問題演習用に問題集を使いました。

さらに、**分野別に分けて**、解説されているものだと勉強しやすくて良いかと思います。

こちらも、私は参考記事で紹介されていた参考書を Amazon で購入しました。




# 実践した勉強法

用意した参考書 & 問題集を使って、勉強を行っていきました。

実際の勉強法は参考にしたサイトの記事を参考にして行いました。

ざっくり述べると**「問題演習中心」**の勉強を行いました。

具体的には、**前提知識0の状態で良い**ので、問題演習をガンガン行っていきます。



## 午前試験

午前試験は **[応用情報ドットコム](https://www.ap-siken.com/)** を使って、直近3年分の問題演習を行います。

その中で、分からない単語があれば、参考書で調べていきます。

このようにして、合格に必要な知識を固めていけば徐々に問題演習の正答率も高まっていきます。



## 午後試験

午後試験は **問題集** で行います。

私は「午後試験 & 分野別」の問題集を購入したので、自分が試験で選択する分野に絞って問題演習を行いました。

これにより効率的な勉強を実現できたのかなと思ってます。

問題演習をして、問題集の解説を読んで、「解答と自分の解き方」の違いを把握します。

こうすることで、合格に必要な知識と考え方を貯めていきます。



# まとめ

繰り返しになりますが、
応用情報技術者試験の合格は**「どのように対策するか」**が重要なカギです。

**次回試験は2021年10月です。**

急ピッチで対策を進めると大変ですが、
今の時期くらいから徐々に始めると余裕を持って合格できると思います。
【Go】入門（メソッドとレシーバ）


# はじめに
Go初心者です。
メソッドとレシーバについてまとめてみました。

# メソッド / レシーバとは
メソッドとはレシーバに呼び出される関数のこと。
レシーバとはメソッドを呼び出す側のオブジェクトのこと。

以下のコードだと、
(p Person)がレシーバで、 Greet()がメソッド。

```golang
type Person struct {
	Name string
}

func (p Person) Greet() string {
	return "Hi, " + p.Name
}
```

# メソッドを使ってみる
メソッドはレシーバで定義した構造体の変数から呼ぶことができる。
下の例では、Person型の変数personが、Greetメソッドを呼んでいる。

```golang
type Person struct {
	Name string
}

func (p Person) Greet() string {
	return "Hi, " + p.Name
}

func main() {
	person := Person{Name: "hoge"}
	fmt.Println(person.Greet())
}
```

# 値レシーバとポインタレシーバ
レシーバには値レシーバとポインタレシーバの2種類がある。
ポインタレシーバ：ポインタ型を引数に渡すので、関数内でオブジェクトの値を変更できる。
値レシーバ：元の値とは別のコピーした値を引数に渡すので、関数内で元の値は変更できない。

以下のコードでは、
（p Person）をレシーバとして定義しているのが値レシーバ。
（p *Person）をレシーバとして定義しているのがポインタレシーバ。

```golang
type Person struct {
	Name string
}

// 値レシーバ
func (p Person) Greet() string {
	return "Hi, " + p.Name
}

// ポインタレシーバ
func (p *Person) Rename(newName string) string{
	p.Name = newName
	return p.Name
}
```

# ポインタレシーバを使う場面
使う場面は2点ありそう

- その構造体型のデータの値を変えたい時
- メモリを効率的に利用したい時

値レシーバがコピーした引数を用いるのに対して、ポインタレシーバでは構造体そのもののデータを操作できる。
また、引数をコピーするとそれだけ余分にメモリを消費するため、メモリ消費を抑えたい場合はポインタレシーバを使うと良さそう。
対戦ゲームを作る。 その5

#概要

対戦ゲームを作る。
盤を描画して、クリックイベントを取るUIの実装。

#考え方

ライブラリーは、jqueryとtatenoを使う。
盤は、８マス×８マス。
石は、画像から切り出す。
６４個のスプライトに、クリックイベントリステナーを設置する。

#画像

![koma.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fd04cf42-9751-c39b-e112-8504223f7b2d.png)


#サンプルコード

```
var coma = 'koma.png';
var pl0 = 'anta';
var pl1 = 'ore';
var ban = [];
var flg = 1;
var game = new Game();
game.fps(5);
game.preload([coma]);
game.start();
var aLabel = new Label("a", 50, 330);
aLabel.size(20);
aLabel.label('白: ' + pl0 + '<br>黒: ' + pl1);
ban = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var field = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 64; i++)
{
	field[i] = new Sprite(40, 40, coma, 4, 1);
	field[i].frame(ban[i]);
	field[i].x((i % 8) * 40);
	field[i].y(Math.floor(i / 8) * 40);
	field[i].jq.click(function() {
		var n = this.id;
		n = n.replace("tsGameNode", "");
		n = n - 2;
		test(n);
	});
}


```

以上。
初期化済みの配列を用意する


## 初期化済みの配列
Pythonで初期化済みの配列がほしいことがあります
例えばこんなの

```python
ARRAYNUM = 3
array = [0, 0, 0]
```

しかしこれでは、ARRAYNUMが生きてません
そこでこんな書式が便利です

```python
array = [0] * ARRAYNUM
```

もちろん、Noneや空文字での初期化も出来ます

```python
arraynone = [None] * ARRAYNUM
arraystr = [''] * ARRAYNUM
```

## 配列の配列
もちろん配列の配列もやっちゃいましょう

```python
#間違ったコード
arrayarray = [[]] * ARRAYNUM
```

これは以下のコードと等価です

```python
a = []
arrayarray = [a, a, a]


# 同じインスタンスなのでどこか一箇所を変更すると全部変わる
arrayarray[0].append(0)
# aの中身は[[0], [0], [0]]
```

同じインスタンスをコピーしてしまうので、全部同じものになるんですね
もちろん、クラスなんかも同様なので、上記の書き方は問題になります
なので以下の書き方で対応しましょう

```
#正しいコード
[ [] for _i in range(ARRAYNUM) ]
```
DeepMind Perceiver (in PyTorch) 動かしてみた。MNISTですが。。（96%。)

# DeepMind Perceiver (in PyTorch) 動かしてみた。MNISTですが。。
以下のgithub
https://github.com/louislva/deepmind-perceiver

# 動かした結果
まだ、トレーニング中です。。。。
（都合により、PCを一度止めますが、もう、3epoch目に入っていて、精度も上がっていたので、うまく動くきるのは間違いありません、別途、再開させます。）

10epochにしました。
**0.9612 でましたー！(MNIST)。いいんじゃないでしょうか。**
もしかすると、Transformerよりいいのかも。。。期待！！！


>C:\_perceiver_mnist\deepmind-perceiver-master>python perceiver_mnist.py
EPOCH 0 [LEARNING RATE: 0.0031622776601683794; ACCURACY: 0.1028]
0.511: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [17:00<00:00,  1.84it/s]
EPOCH 1 [LEARNING RATE: 0.0031622776601683794; ACCURACY: 0.8363]
0.405: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:55<00:00,  1.85it/s]
EPOCH 2 [LEARNING RATE: 0.0031622776601683794; ACCURACY: 0.8999]
0.255: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:57<00:00,  1.84it/s]
EPOCH 3 [LEARNING RATE: 0.001; ACCURACY: 0.922]
0.134: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [17:22<00:00,  1.80it/s]
EPOCH 4 [LEARNING RATE: 0.001; ACCURACY: 0.939]
0.062: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [17:08<00:00,  1.82it/s]
EPOCH 5 [LEARNING RATE: 0.001; ACCURACY: 0.9436]
0.095: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:57<00:00,  1.84it/s]
EPOCH 6 [LEARNING RATE: 0.00031622776601683794; ACCURACY: 0.9448]
0.154: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:55<00:00,  1.85it/s]
EPOCH 7 [LEARNING RATE: 0.00031622776601683794; ACCURACY: 0.9554]
0.084: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:57<00:00,  1.84it/s]
EPOCH 8 [LEARNING RATE: 0.00031622776601683794; ACCURACY: 0.9557]
0.011: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:54<00:00,  1.85it/s]
EPOCH 9 [LEARNING RATE: 0.00010000000000000002; ACCURACY: 0.9556]
0.021: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:54<00:00,  1.85it/s]
EPOCH 10 [LEARNING RATE: 0.00010000000000000002; ACCURACY: 0.9607]
0.031: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:56<00:00,  1.84it/s]
EPOCH 11 [LEARNING RATE: 0.00010000000000000002; ACCURACY: 0.9615]
0.115: 100%|███████████████████████████████████████████████████████████████████████| 1875/1875 [16:57<00:00,  1.84it/s]
0.9612

C:\_perceiver_mnist\deepmind-perceiver-master>


# まとめ
Perceiverを動かしてみたかったので。
まだ、途中なので、特にコメントありません。
簡単に、普通のしょぼいPCで動くようなので、<font color="orange">**是非。**</font>
2021/07/13開催 Connpassイベントランキング

# 申込数TOP5

|順位|イベント名|グループ|申込数|定員|
|:---:|:---|:---|:---:|:---:|
|:one:|[【デイトラ×Ptengine】LPO（LP最適化）基礎講座！Ptengineの使い方～事例を解説！](https://tokyofreelance.connpass.com/event/218864/)|[東京フリーランス](https://tokyofreelance.connpass.com/)|487|500|
|:two:|[Adobe XD Trail 部屋キャンプ 中級編！ 修正に強いレイアウトをつくる #AdobeXD](https://xdtrail.connpass.com/event/216531/)|[Adobe XD Trail](https://xdtrail.connpass.com/)|368|400|
|:three:|[シリコンバレーで働くエンジニアのキャリア論](https://findy.connpass.com/event/217498/)|[ファインディ／Findy](https://findy.connpass.com/)|298|350|
|:four:|[SmartHRの次なる課題「エンタープライズ開拓」についてIS・セールス・CSが一同に語る祭](https://smarthr.connpass.com/event/215054/)|[株式会社SmartHR](https://smarthr.connpass.com/)|178|180|
|:five:|[【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線](https://open8.connpass.com/event/216727/)|[株式会社オープンエイト](https://open8.connpass.com/)|174|200|
gem "devise"の使用：def configure_permitted_parameters end（ストロングパラメータへの項目追加によるエラー解消）

# 目的
## gem "devise"　ー　ログイン機能の実装（その中の新規登録時）

# 備忘録の流れ
######　　①新規登録フォームで、＜nickname・email・pass＞の３項目を登録しようとした。　
######　　②エラーの発生 { Field 'nickname' doesn't have a default value }
######　　③gem "devise"によるストロングパラメータの初期設定。{ email・password }のみの許可。
######　　④③について、ストロングパラメータ項目の追加を行った。
######　　⑤参考サイト (qiita記事3人程)

# 今回のエラー原因・結果
## ActiveRecord::StatementInvalid in Devise::RegistrationsController#create
###### Mysql2::Error: Field 'nickname' doesn't have a default value: INSERT INTO `users` (`email`,`encrypted_password`, `created_at`, `updated_at`)VALUES ( ~省略~ )

ニックネームのフィールドには"デフォルト値"が無いと言われました。
(localhost:3000の画面上でnicknameは入力している。)

原因は、gem "devise"上の機能が理由でした。
"devise"では、ストロングパラメータが初期設定されており
{ email・password }左記の２項目だけ許可されていました。

# codeの追加
```app/controllers/application_controller.rb
 before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
  end
```
###### 参考サイトから上記の記述２項目＜before_action　と　def configure_ ~ end＞ を書き加えました。

```app/controllers/application_controller.rb
before_action :configure_permitted_parameters, if: :devise_controller?
```
###### まずは、`application_controller.rb`の上の記述からdevise_controllerのコントローラーを使用した際にbefore_actionの `configure_permitted_parameters` というヘルパーメソッドが行われるみたいですね。

```app/controllers/application_controller.rb
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:deviseの処理名, keys: [:許可するキー])
  end
```
###### 次に、説明されたメソッドについて、このままでは初期設定の＜email・pass＞についてのみ許可されている状態なので、付け加える必要があるようです。今回は、 `permit(:sign_up, keys: [:nickname])` という形で設定しました。

###### こちらでエラー解消できました。無事、nicknameが登録されるようになりました。

## 解決のための参考サイト
＜@neojin、@kaito121855、@ohnitakahiro＞３名の方、参考にさせていただきました。ありがとうございました。
　　@neojin　`https://qiita.com/neojin/items/f03d8ebfc2e9e8a31daa`
　　@kaito121855　`https://qiita.com/kaito121855/items/e1a80da8557258c497dc`
　　@ohnitakahiro　`https://qiita.com/ohnitakahiro/items/4487aed43fa264ddcdee`
rails generate の使い方

# はじめに
rails初学者の私的にrails generateがややこしく感じたので、まとめる事にしました。
参考になることがあれば、幸いです。
# rails generateについて
rails generateとは簡単に言うと、いろんなファイルなどをテンプレートとして作ってくれるものです。
rails generateで作ったファイルなどは、rails destoryを使って削除することが出来ます。
generateで作れるファイルにはmodel,controller,migration,view,asset,root,test,helperがあります。
generateの後ろにいれる単語によって作られるファイルが変わります。
## scaffold
```
$ rails generate scaffold NAME　...
```
上記のように入力すると、generateで作れるファイルを全て作ることができます。

## scaffold_controller	
```
$ rails generate scaffold_controller NAME　...
```
上記のように入力すると、controller,view,test,helperを作ることができます。

## controller	
```
$ rails generate controller NAME　...
```
上記のように入力すると、controller,view,asset,root,test,helperを作ることができます。

## model	
```
$ rails generate model NAME　...
```
上記のように入力すると、model,migration,testを作ることができます。

## migration	
```
$ rails generate migration NAME　...
```
上記のように入力すると、migration,testを作ることができます。

# 終わりに
間違いがあれば教えてくだい。
busybox for tcc(windows) のメモ

tcc(tiny c compiler)素晴らしいですよね!

http://download.savannah.gnu.org/releases/tinycc/

downloads に busybox for win32 があるのが気になりました.

## busybox for tcc

gmake と sh(busybox)を tcc でコンパイルして動かすパッケージです.

ビルドには tcc がいります(詳細は about.txt 参照ください).

makebox.bat で諸々ビルドします.

sh.exe 動かしてみます.

![busybox-tfcc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/21a3657a-78c1-bc37-70c5-b07201b1b76e.png)

Voila! いろいろ遊べますね!
[2021年]herokuでrails + nodejsでnodeのバージョン指定する方法


# 前置き

railsアプリを構築し、webpacker用にnodejsを入れたアプリを作った際、
nodeのバージョンが12系なのが気になった。
現時点でのLTSは14系なので開発環境と差異が発生しており環境差異でハマるのが嫌なのでheroku側のnodeバージョンを上げる方法を追求してみた。

軽く検索するとよく引っかかるのが `heroku Buildpacks` を使うというもの。

## 公式ドキュメント
https://devcenter.heroku.com/ja/articles/buildpacks

だがしかし、上記を見てもバージョンを指定する具体的な方法自体は記載がない。

ググって見た感じ、 `package.json` にバージョンを追記するとバージョンが指定できるとある。

```json
  "engines": {
    "node": "14.17.2",
    "npm": "6.14.13"
  }
```

ただし、railsアプリでこれをやってpushしても

```
remote:        error app@1.0.0: The engine "node" is incompatible with this module. Expected version "14.17.2". Got "12.16.2"
remote:        error Found incompatible module.
```

と、出る。

# 結論

前置きが長くなったが結論。
上記が出るのにはいくつか原因がある。

```bash
$ heroku buildpacks
=== dev-playrooms-free Buildpack URLs
1. heroku/ruby
2. heroku/nodejs
```

`heroku buildpacks` このコマンドを打って

- 2にnodeが来ている
- そもそもnodejsが無い

上記のパターンでデプロイに失敗する。

# 解決方法

- Herokuのアプリ設定を開く
- Settingsタブを開く
- Buildpacksの項目で `add buildpacks` でnodejsを追加する
- ここの順番がデプロイの順番に影響するのでnodejsを一番上に持ってくる

上記のあと、デプロイすればnodejsのバージョンがpackage.jsonで指定したものにアップグレードされるようだ。

# 余談

```
remote:        engines.node (package.json):  14.17.2
remote:        engines.npm (package.json):   6.14.13
remote:        engines.yarn (package.json):  unspecified (use default)
```

enginesでnode, npm, yarnのバージョンが指定できるようだ。

その後、ローカルのdocker buildでnodeのバージョンが上がってyarnがエラーをはいた。
よって下記のように設定した。

```json
  "engines": {
    "node": "14.x",
    "npm": "6.x",
    "yarn": "1.x"
  }
```
これから学習する言語についてまとめた

はじめに
---
これからプログラミングを学習するにあたって、学ぶ言語について以下にまとめました。
（間違いがありましたら、ご指摘を頂けますと幸いです）

HTML
---

言語の正式名称　
　ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略
　
ハイパーテキスト
　文書・画像・図表・音声・動画などのリンクを貼ったり、埋め込むことができる仕組み
　
マークアップ
　サイト内の文書に意味づけをしていく作業。
　HTMLでは文書をタグで囲むことで意味をつけていくことで、
　コンピューターが正しく認識できるようにする。
　
ランゲージ
　言語

開発された経緯　
　WEBページを作成するために開発された言語である

主にどのように利用されているのか
　ほとんどのWEBページにおける基本的な骨組みはHTMLで構成されている

メモ
　SEO「検索エンジン最適化（Search Engine Optimization）」を意識しタグを使うことで、
　検索エンジンが、より正確に文書の中身を理解できるようになる。
　
　
CSS　
---

言語の正式名称
　カスケーティング・スタイル・シート（Cascading Style Sheets）

カスケーティング
　カスケードとは、何段も連なった小さな滝のこと。
　転じて、同じものがいくつも数珠つなぎに連結された構造や、
　連鎖的あるいは段階的に物事が生じる様子を表す。

スタイルシート
　構造化文書などにおける表示形式を制御する仕組み。
　・・・WEBページのデザインやレイアウトなどの見栄えを変更できる

開発された経緯
　WEBページの見た目の部分を編集するために開発された

主にどのように利用されているのか
　文字のサイズや色、レイアウトなどのWEBページ上で表現される部分を
　細かく編集する際に用いられる。

メモ
　HTMLとセットで使用されることが多い。
　HTMLは「ページの構造」cssは「ページの装飾」を指定する言語といえる。

JavaScript（JS）
---
言語の正式名称
　ジャバスクリプト（JavaScript ） 

開発された経緯
　元々はWEBページに動作をつけるために開発された

主にどのように利用されているのか　
　・ポップアップウィンドウを出現させる
　・ブラウザ上で画像を拡大表示してWebページを見やすくする
　・メッセージ送付フォームやパスワードの入力フォームなどを設置する　等
　
メモ
　クライアントサイドの言語である。（反対＝サーバーサイド言語）
　プログラミング言語のJAVAとは、全くの別物。メロンとメロンパンくらいの違う。


Ruby
---
言語の正式名称
　ルビー（Ruby）

開発された経緯
　まつもとひろゆき氏により開発されたオブジェクト指向言語・スクリプト言語である。
　全てのデータがオブジェクトとして扱う純粋なオブジェクト指向スクリプト言語であり
　可読性を重視した構文が特徴。

主にどのように利用されているのか
　Ruby on Railsというフレームワークを使うことで
　効率よくWEBサイトやWEBベースの業務システムを開発することができる

メモ
　フリーソフトウェアであるため、無料で利用でき、コピー・変更・再配布が自由である。
　

Ruby on Rails
---
言語の正式名称
　ルビー・オン・レールズ

開発された経緯
　Rubyを使用したフレームワークの一つ。
　Rubyを使って簡単なコードでWEBアプリケーションの開発ができるように作られた

主にどのように利用されているのか
　クックパッド（お料理レシピサイト）
　グノシー（ニュースアプリ）
　食べログ（グルメサイト）　等

メモ
　Ruby on RailsはMVCアーキテクチャ（アーキテクチャ＝構造）で構成されており
　Model（データを扱う箇所）
　View（ユーザーが直接目にする箇所）
　Controller（ModelとViewの連携を行う箇所）の要素に分解し、開発を行う。
　

調べていて気になった単語
---
クライアントサイドとサーバーサイド

・クライアントサイド言語
　（JavaScript・CSSなど）
　WEBサーバーから結果がプラウザに返ってきて
　プラウザ側で処理するときに動作する言語 

・サーバーサイド言語
　（Ruby・PHPなど）
　サーバー内部で動く言語でデータベースの処理を行う仕組みを作る言語
　
コンパイラ言語とインタプリンタ型言語
　前提として
　・プログラムを実行するには、
　　機械で理解するように言語を翻訳（コンパイル）する必要がある
　・翻訳の方法の違いにより呼び方が異なる
　
・コンパイラ言語
　記述したプログラムをコンピューターが理解可能な形式に事前に一括でコンパイルする言語

・インタプリンタ型言語
　記述したプログラムを１行ずつコンパイルする言語


＊気をつける点
　
インタプリンタ型言語≠スクリプト言語
　
スクリプト型言語とは
　開発で使用されるコードの内、読みやすく簡易的に記述できるプログラミング言語の汎称
RUNNING LEAN 2章

# 本記事の目的

書籍「RUNNING LEAN 実践リーンスタートアップ」を読んだ学びをアウトプットすること。

# 2章のまとめ

- [課題を理解するために、ユーザーインタビューしろ。](#課題を理解するためにユーザーインタビューしろ)
- [ソリューションを決定するために、リスクの高い部分を検証しろ。](#ソリューションを決定するためにリスクの高い部分を検証しろ)
- [ソリューションを改良するために、定性的に検証しろ。](#ソリューションを改良するために定性的に検証しろ)
- [ソリューションを改良するために、定量的に検証しろ。](#ソリューションを改良するために定量的に検証しろ)


# 課題を理解するために、ユーザーインタビューしろ。

潜在顧客、あるいは既存の顧客に

**既存の代替品に対するUVP**

についてインタビューを行う。その過程で課題（とソリューション）が見えてくる。

本書では、ユーザーインタビューを通して、
著者と同じように顧客開発に苦労しているという**課題**に対して、著者のブログ（のちの本著書）によって「段階的な」ガイドとして読んでいることが**ソリューション**になっていたということを著者は学んでいる。

# ソリューションを決定するために、リスクの高い部分を検証しろ。

最もリスクの高い部分は、顧客の購買意欲の軸になる部分である。

本の出版を例に取ると、これにあたってリスクの高い部分は、**書名でも書影でも価格でもなく、目次である。**

潜在顧客からのフィードバックによって、目次に改良を加えることで、ソリューションが決定する。


# ソリューションを改良するために、定性的に検証しろ。

検証するために、まず**MVP**を作る。

- 課金させる
- 反対する者が出てくるまで、値段を倍にさせていく

などの性質的な変化をさせた際の、見込みの高い潜在顧客からフィードバックを受けてコンテンツの改良を行う。


# ソリューションを改良するために、定量的に検証しろ。

こうして磨いたMVPをファーストリリースした後も、

売れ行きの規模に合わせてターゲット顧客を変化させるなどする。

本書では、以下のような変遷となっている。

- 1,000部売れたので、出版会社に委託して増刷。より多くのアーリーアダプターに広める。
- 10,000部売れたので、典型的なアーリーアダプター以外の読者に広める。


# 次回記事投稿

7月16日深夜投稿予定

# 前回記事

https://qiita.com/KentaroJay/items/51983c8e1ef7dacbf478
ピボットテーブルの接続先データを一括変更する方法

#はじめに
　仕事でピボットの接続先データを大量に変更する必要が生じました。一つ一つ接続先を変えていっても良いのですが面倒くさい。なので、シート内にあるピボットの接続先を全て変更するVBAを作成しました。

#前提
- 一つのシートに大量のピボットテーブルがある
- 既に接続しているデータと新しく接続したいデータのカラム名は同じだが、中身が違う。

#VBAのコード
今回対象とするエクセルはワークシート「ピボット」に変更したい多くのピボットテーブルが含まれており、変更後のデータの名前を「data2」とします。(Excelでデータに名前を付ける方法は補足で後述)このとき、接続先を一括変換するVBAのスクリプトは以下のようになります。

```vb
Sub 一括変換()
    sheet_name = "ピボット" 'ピボットテーブルが含まれるシートの名前を入れる
    change_data = "data1" 'データ名を入れる
    
    Dim ws As Worksheet
    Dim pivot As PivotTable
    
    Set ws = Worksheets(sheet_name)
    
    For Each pivot In ws.PivotTables
        pivot.ChangePivotCache ActiveWorkbook.PivotCaches.Create(xlDatabase, change_data)
    Next
End Sub
```

#補足
##データに名前をつける方法
1. 名前をつけたいデータが含まれているセルを全て選択する。
1. 「数式」タブの「定義された名前」グループ内の「名前の定義」のタブを押下する。
1. タブ内の「名前の定義」を押下。
1. 「新しい名前」ポップアップ内の「名前(N):」に好きな名前を入れる。(今回はdata2を入れた)
1. 「参照範囲(R):」が名前をつけたいデータを表しているか確認後、「OK」を押下で完了。

なおデータにつけた名前は、「数式」タブの「定義された名前」グループ内の「名前の管理」で確認することができます。
ransackで検索機能を追加する

## 検索機能をransackで導入してみた
作っているサイトの検索機能にransackを使ってみたので、備忘録
ほぼ参考資料の通りに行っています。

```ruby:Gemfile
gem 'ransack'
```
```ruby:ターミナル
bundle install
```

### routing
routes.rbにcollectionでsearchを加える

```rb:routes.rb
resources :institutions do
  collection do
    get 'search'
  end
end
```
```rb:ターミナル
search_institutions GET /institutions/search(.:format) institutions#search
```
普通にgetしてもルーティングはできた

```rb.routes.rb
get "institutions/search"
```
```rb:ターミナル
institutions_search GET /institutions/search(.:format) institutions#search
```

### controller
```rb:controller.rb
before_action :set_q, only: [:index, :search]

def search
  @results = @q.result
end

private
def set_q
  @q = Institution.ransack(params[:q])
end
```

### view
```erb:index.html.erb
<h1>医療機関検索</h1>
  <%= search_form_for @q, url: search_institutions_path do |f| %>
    <%= f.label :name_cont, '医療機関名' %>
    <%= f.search_field :name_cont %>
    <br>
    <%= f.submit '検索' %>
  <% end %>
```
```erb:search.html.erb
<% @results.each do |institution| %>  <!-- 検索結果を@resultsで受け取る -->
  <tr>
    <td>
      <% if institution.image? %>
        <%= image_tag institution.image.url, alt: "クリニック画像", class: "image" %>
      <% else %>
         <%= image_tag "default_institution_image.png", class: "image" %>
      <% end %>
    </td>
    <td><%= institution.name %></td>
    <td><%= institution.postcode %></td>
    <td><%= institution.address %></td>
    <td><%= institution.introduction%></td>
    <td><%= link_to "編集", edit_institution_path(institution.id) %></td>
    <td><%= link_to "削除", institution, method: :delete, data: {confirm: "本当に削除しますか"} %></td>
  </tr>
<% end %>
```

### メソッド
よく使いそうなものを抜粋しました。

|メソッド|_eq|_start|_end|_cont|_lt|_lteq|_gt|_gteq|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|説明|完全一致|前方一致|後方一致|部分一致|未満|以下|大きい|以上|


## 参考資料
[【Rails】 ransackを使って検索機能がついたアプリを作ろう！](https://pikawaka.com/rails/ransack)
Denoアプデ後deno/stdのバージョンが合わなくなった時のための備忘録

こんにちは(クソ深夜)。白羽です。
deno 1.12.0にアップデートしたらdenoが壊れたので、対処法の備忘録を取っておきます。
#発端
deno 1.7.5でdenon使って優雅にJavaScript/TypeScript開発をしていた私のPowerShellに、ある日アプデを促すメッセージが表示されました。
調べてみたらdenoのバージョンがなんと1.12.0にまで上がっていたので、気軽に`deno upgrade`。それ自体は難なく成功したので、`denon start`で開発を再開しようとしたところ……

```

error: TS2729 [ERROR]: Property 'boundary' is used before its initialization.
  readonly newLineDashBoundary = encoder.encode(`\r\n--${this.boundary}`);
                                                              ~~~~~~~~
    at https://deno.land/std@0.85.0/mime/multipart.ts:263:63

    'boundary' is declared here.
      constructor(reader: Deno.Reader, private boundary: string) {
                                       ~~~~~~~~~~~~~~~~~~~~~~~~
        at https://deno.land/std@0.85.0/mime/multipart.ts:268:36

TS2729 [ERROR]: Property 'boundary' is used before its initialization.
  readonly dashBoundaryDash = encoder.encode(`--${this.boundary}--`);
                                                       ~~~~~~~~
    at https://deno.land/std@0.85.0/mime/multipart.ts:264:56

    'boundary' is declared here.
      constructor(reader: Deno.Reader, private boundary: string) {
                                       ~~~~~~~~~~~~~~~~~~~~~~~~
        at https://deno.land/std@0.85.0/mime/multipart.ts:268:36

TS2729 [ERROR]: Property 'boundary' is used before its initialization.
  readonly dashBoundary = encoder.encode(`--${this.boundary}`);
                                                   ~~~~~~~~
    at https://deno.land/std@0.85.0/mime/multipart.ts:265:52

    'boundary' is declared here.
      constructor(reader: Deno.Reader, private boundary: string) {
                                       ~~~~~~~~~~~~~~~~~~~~~~~~
        at https://deno.land/std@0.85.0/mime/multipart.ts:268:36

Found 3 errors.
```

？？？？？？？？？？？？？？？？？？？？？？？？？？？

俺なんか悪いことしましたかね？

#原因
よく見るとエラーは全部stdから出ています。deno 1.12.0に対応するstdは`0.101.0`で、エラーが出ているのは`0.85.0`のstdなので、これがもう不一致を起こしています。でもそれ、まずもって何処から取ってきてるの？
毎回プログラム中にimportされている先から新しいソースコードを取ってくるなら、こんなことはあり得ないでしょうし……いや、denoって毎回ソースコード確認するんだったか？

……

…………

あっ………………

#対処
denoが過去に取ってきたソースコードを手放さない(すなわち**キャッシュが残り続けてしまっている**)のが悪いわけでした。
そうとなればキャッシュを消しに行きましょう。

`C:\users\(username)\Appdata\Local\deno`
というディレクトリがあるので、これを丸ごと削除します。

もう一度denoでプログラムを実行すると、改めて全てのプログラムが落とし直されてくるはずです。

#あとがき
これを見てくださった方へ。
これで治らなかったら、もうわかりません。ごめんなさい。

---

#追記
denoのコマンドライン引数でモジュールを強制リロードすることができ、上の問題を解決できるようです。詳細はコメへ
恐らく手動でファイル消すより安全なのでそちらを使いましょう。提供ありがとうございます、
QiitaでNote記法がサポートされてた


リリースノートを見てたら[Note記法](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#note---%E8%A3%9C%E8%B6%B3%E8%AA%AC%E6%98%8E)がサポートされてた！！
今まで・・・引用記法を流用してNoteっぽいこと記載してたけど、そんなことしなくてよくなる！！

### 今までの自分

> **NOTE:**
> 〇〇すると便利です。

---

> **WARN:**
> 〇〇には注意が必要です。

---

> **IMPORTANT:**
> 〇〇しないでください。


### これからの自分

:::note info 
〇〇すると便利です。
:::

:::note warn
〇〇には注意が必要です。
:::

:::note alert 
〇〇しないでください。
:::
QiitaでPlantUMLが使えるようになっていた

ふらっとQiitaのリリースノートを見たら、[PlantUML](https://plantuml.com/ja/)さんが使えるようになっていた。実際使うかどうかは置いておいて・・・へ〜って感じ！！

ER図：

```plantuml
@startuml
hide circle
Entity01 }|..|| Entity02
Entity03 }o..o| Entity04
Entity05 ||--o{ Entity06
Entity07 |o--|| Entity08
@enduml
```


```text:ソース
@startuml
hide circle
Entity01 }|..|| Entity02
Entity03 }o..o| Entity04
Entity05 ||--o{ Entity06
Entity07 |o--|| Entity08
@enduml
```
videoをpauseしてもloadは止まらない

# 概要
htmlのvideoタグをJavaScriptで操作する時の注意点です。
videoを`pause()`すると動画は停止するのですが、ロードは止まりません。複数の動画があり、一方を止めてもう一方を再生したら、両方ともロードし続ける場合があります。
videoタグの仕様を調べても解決方法は見つからず、ロードを止める方法を探すのに手間取りました。

# 解決方法
解決方法は以下の通りです。（解決してしまえば、納得）

- videoを`pause()`する。
- sourceの`src`を空にする。
- videoを`load()`する。

ちなみに、以下の方法はダメでした。ロードが続きます。

- `src`を空にした後、`load()`しない。
- JavaScriptでvideoタグを削除する。

# サンプルコード１
```:javascript
const video = document.querySelector('video');

// 再生
video.play();

// 一時停止
video.pause();

// ロードストップ
const source = video.querySelector('source');
source.src = '';
video.load();
```

#サンプルコード２
ロードを止めた後、もう一度再生するために`src`を扱いやすくしたサンプルです。

```:html
<video loop muted playsinline preload="none">
  <source src="" data-src="./mov/sample.mp4" type="video/mp4">
</video>
```
```:javascript
const video = document.querySelector('video');
const source = video.querySelector('source');

// 再生
source.src = source.dataset.src;
video.load();
video.addEventListener('canplay', () => {
  video.play();
});

// 一時停止
video.pause();

// ロードストップ
source.src = '';
video.load();
```
`data-src`を使用するとvideoの`preload`が機能しません。もし`preload`を使いたい場合は、`src`と`data-src`を両方書くか、JavaScriptで`src`の値を保持しておき、再再生時に使うと良いと思います。

# おわり
再生もロードも止まる`stop()`が欲しいところですが、無いので自分で止めました。
こちらを参考にしました。
https://stackoverflow.com/questions/4071872/html5-video-force-abort-of-buffering
オンプレ実務経験しかない私がAWS認定クラウドアーキテクト アソシエイト資格に合格した話

# 受験のきっかけ
とあるSIerで６年間基幹システムのSEをしていたのですが、まあほとんどオンプレ経験しかなく過ごしてきました。
長年勤めた企業を退職し、プログラミング以外の上流・下流工程の経験が多かったので、
「自分も開発できるようになりたいな～」ということで巷で有名なAWS使ってみるか！と触ってみて、あまりの便利さに驚愕したのがAWSとの出会い。

* えっ、サーバーすぐ設定して立ち上がるやん！（EC2）
* えっ、データベースインストールとかの作業いらんの？（RDS）
* えっ、ロードバランサーとかインフラガチ勢しか出来ないと思ってた（ELB）

丁度スタートアップの起ち上げのお手伝いでAWSのクレジットがあったこともあり、体系的に学んでみようかと思い、今回受けてみました。
結果は合格！

毎日１時間を３ヶ月、土日はプラス１～２時間というかんじで約１２０時間くらいでしょうか。

# 勉強法
色んな方が記事にしていたり、知人に聞いても評判だった勉強法がこちら。
Udemyの「これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）」

https://www.udemy.com/course/aws-associate/

ほんとうにこれだけで受かりました。ハンズオンが付いていて手を動かしながら学べるので実践的で内容も良いです。
各パートで小テストや模擬試験も３回分ついているので、間違ったところを見直して、分かるまで理解し、
関連することは調べるというような勉強のやり方で間違いなく合格できると思います。

# 受験当日
受験当日は**ピアソンVUE**で自宅から受験しました。
30分前になったらアカウントログインして机周りの撮影や本人確認などがPCや携帯カメラを使って行います。

受験ポリシーが思ったより徹底しているので、試験官から指摘されて慌てないよう、事前に目を通しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658983/76d8335a-24b4-f1f7-b473-510c1a7b4245.png)


私の場合は、以下のようなことがあったので、もし自宅で受験される方は気を付けてみてください

* 試験中におしっこにいきたくなる
* ノートパソコンの電源を付けるの忘れ、電源刺すための身動きがとれないため、電池切れないか焦る
* 机の上のパソコン以外のモニターやスタンドに服をかけて隠すことを指示され、ちょうど良い服がなくて焦る

# 頻出問題

模擬試験でもそうでしたが、傾向としてはVPC、EC2、ELB、S3に関する問題が多い気がしました。
問題文も一文章で終わるような簡単な問題はなく、ユースケースをしっかり把握していることが求められる印象でした。
問題文は多少違えど、特に以下の本質的な理解を問う問題が、3割～4割近く出題された気がします。要チェックですね。

* NATゲートウェイを使ったプライベートサブネットからのインターネットアクセス方法
* VPC内からのインターネットを経由しないVPCエンドポイントを使ったアクセス
* S3での静的ウェブサイトホスティング & CloudFrontでのキャッシュ高速化
* EBSやEFS、S3のストレージサービスの場面の使い分け
* SQSを使ったマイクロサービス連携

# 受験後の感想
問題文と選択肢が与えられると答え分かるんだけどねぇという感じです。
実務の場面で使いこなせて、べスプラ構成を設計できるようには、やはり自分で手を動かして実装してみるのが一番だなあと感じました。

AWS公式からもハンズオンが公開されているので、こちらで実際に手を動かして学ぶのもおススメです。
https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/
UnityとPython間でのデータのやり取り

#背景
Unityで計測したデータをPythonに送って、機械学習で推定した結果を可能な限りリアルタイムでUnity側に反映させたかったが、調べてもサーバーを使うものしか見つからず、リアルタイムにやり取りできなかった.

#目的
可能な限りリアルタイムでUnityとPythonでデータをやり取りする．

UnityとPythonのコード:https://github.com/sakamo1290/DataExchange

Unity:2019.4.28f1
Python:3.7.6

#方針
csv(Unity2Python.csvとPython2Unity.csv)を介してデータをやり取りする．

#実装
Unity側でFixedUpdateが呼び出されるたびにインクリメントされる変数(count)をcsvを介してやり取りする。

###Python側
まずPython側でデータを読み書きするスクリプトを作る。

```python:DataExchange.py
#実際に使うときはやり取りするデータは1つではないため、pandasのDataFrameでcsvに読み書きする
import pandas as pd

def main():
    #Unityから送られてきたデータを格納するDataFrame
    log = pd.DataFrame(columns = [0], index = [0], data = [0])
    #データが更新されているかを確認するための変数
    past = -1

    while True:
        past, log = ReadData(past, log)
        WriteData(past)

def ReadData(past, log):#Unityからデータを受け取る
    #データをUnityが書き込んでいるときはアクセスできずエラーになるためtryで回避
    try:
        a = pd.read_csv('Unity2Python.csv', encoding="ms932" ,sep=",")
    except:
        return past, log
    #データが更新されていない場合読み取りを終了する
    if past == a.columns[0]: return past, log

    log = log.append([int(a.columns[0])])
    print(a.columns[0])
    past = a.columns[0]
    return past, log

def WriteData(past):#Unityにデータを送る
    #Unityが読み込んでいるときはアクセスできずエラーになるためtryで回避
    try:
        pd.DataFrame([past]).to_csv(path_or_buf = 'Python2Unity.csv', header=False, index=False)
    except:
        return             
    
if __name__ == "__main__":
    main()
```
###Unity側
Unity側でもデータをやり取りするスクリプトを作成する(gitのDataExchange.unitypackage内に完成したものが入れてある)。
新しいプロジェクトを作成し、ヒエラルキーで右クリックして'Create Empty'を選択する。
名前を'DataExchanger'にしてインスペクターで'Add Component'をクリックしDataExchangerスクリプトを作成する。

```c#:DataExchanger.cs
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;

public class DataExchanger : MonoBehaviour
{
    int count = 0;
    string sendDataPath;
    string recieveDataPath;

    void Start()
    {
        sendDataPath = Application.dataPath + "/LogData/Unity2Python.csv";
        recieveDataPath = Application.dataPath + "/LogData/Python2Unity.csv";
    }

    void FixedUpdate()
    {
        WriteData(count.ToString(), sendDataPath);
        ReadData(recieveDataPath);
        count++;
    }

    void WriteData(string data, string _filePath)
    {
        string _path = _filePath;
        StreamWriter sw;
        FileInfo fi;
        fi = new FileInfo(_path);
        sw = fi.CreateText();
        sw.WriteLine(data);
        sw.Flush();
        sw.Close();
    }

    void ReadData(string _filePath)
    {
        Debug.Log(File.ReadAllText(_filePath));
    }
}
```
###DataExchange.pyを配置
Unityのフォルダ内にAssets/LogDataとなるようにLogDataフォルダを作成する。
LogDataフォルダ内にDataExchange.pyを配置する（場所はここでなくても問題ないが簡単のために。変える場合はスクリプトのパスを修正する。）。

#動作確認
おおむねよく動いているが、Unity側で数字が飛ぶ場合がある。
目的は機械学習の結果をUnityに反映することであるため、推定にかかる時間を考慮すると問題ない程度であると言える。と思う。
![Desktop-2021.07.15-00.47.26.01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590438/ce0fa2b5-466f-f544-5616-97e00c88e6b4.gif)
with_optionsで共通のバリデーションをまとめよう！

# with_options
「with_options 〇〇 」と書くことで、
複数の情報に対して共通したオプションを付けることが可能となる

## 記述例
「nickname, last_name, first_name それぞれのカラムが空だと保存できない」というバリデーションを設定する場合

    class User < ApplicationRecord
     validates :nickname, presence: true
     validates :last_name, presence: true
     validates :first_name, presence: true
    end

上記のようにカラムひとつひとつに`presence: true`（カラムが空だと保存できない）というバリデーションを記述することになる


**with_options使用した場合**

    class User < ApplicationRecord
     with_options presence: true do
      validates :nickname
      validates :last_name
      validates :first_name
     end
    end

 `with_options presence:true do 〜 end`の記述により、do 〜 endの情報に対して、値が存在 `presence` しなければならないという**制限を一括で設ける**ことができました。
PHP Laravel Artisanコマンドのメモ

##はじめに

Laravelの開発で色々なArtisanコマンドがあるため、よく使用するものを、

ここにメモとして残して、追加で必要なものは更新していこうと思う

##Artisanコマンドとは
* PHPのフレームワークであるLaravelのコマンドのこと
* Artisanコマンドを使用することでModelやControllerを作成することができる

##Artisanでのコマンドリスト
```:ターミナル
php artisan list
```
Artisanでのコマンドのリストをターミナルに表示できる

##サーバの起動コマンド
cd コマンドでLaravelのプロジェクトがあるとこまで移動しておくこと

```:ターミナル
php artisan serve
```
![87f3108030716942f8db77a22d768b50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1761711/f2ee5f22-3cc9-246f-b6a4-5f72cebf4021.png)

記載されているURL：http://〇〇〇.〇〇〇.〇〇〇.〇〇〇:8000

このURLにアクセスすればサーバーが立ち上がっているか確認できる

画像コマンドのミスがありますが見逃してください・・・

##tinker起動
Laravelの機能を試せるREPLが起動します。

```:ターミナル
php artisan tinker
```
###tinker終了コマンド
```:ターミナル
>>> exit
Exit:  Goodbye
```
##マイグレーション
###マイグレーションファイルの作成

マイグレーションファイルとは、Laravelからデータベースのテーブルを管理

するためのファイルのこと

```:ターミナル
php artisan make:migration create_messages_table --create=messages

php artisan make:migration //マイグレーションファイル作成のためのコマンド
create_messages_table //マイグレーションファイルの名前 名前を見て何をするかわかる名前にする

--create=messages //テーブル名を決定
--create=messages　←　すべて小文字で複数形

```
###マイグレーションのロールバックのコマンド

マイグレーションファイルをある地点まで戻すコマンド

```:ターミナル
php artisan migrate:rollback
```

###マイグレーションの実行

```:ターミナル
php artisan migrate
```

###マイグレーションの実行状況の確認

```:ターミナル
php artisan migrate:status
```

##モデルの作成

Modelはapp/ 直下に生成、配置される

```:ターミナル
php artisan make:model モデル名 ← 頭が大文字で単数形であること！
```
##Controllerの生成

```:ターミナル
php artisan make:controller コントローラ名
```

###RESTful Resource Controllerの生成

例文のルーティング

```:routes/web.php
<?php

Route::resource('messages', 'MessagesController');
```

この時のコントローラの生成コマンド

Routerに対応したController名をつけないとルーティングされないので注意

```:ターミナル
php artisan make:controller MessagesController --resource
```

##参考にさせていただいたサイト

[【Laravel】Artisanコマンド基礎]
(https://qiita.com/yusuke69/items/762d5e590c2b8e056502)
herokuにデプロイするときに5 apps for unverified accounts.と出た、、

#herokuでエラーが出た。
```Terminal:ターミナル
$ heroku create
```
##herokuとは、、
herokuとは、、アプリケーションを実行するためのサイトのことです。
herokuはPaaSというと呼ばれるサービスです。
PaaSはアプリを公開するのに、めちゃめちゃ面倒臭いことを代わりにするよ！というサービスのことです。
##出たエラー?
![スクリーンショット 2021-07-14 23.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1385887/a04fb816-239b-0b90-2582-ed8185878cf2.png)
##翻訳
認証されていないアカウントのアプリ制限（5アプリ）に達しました。削除
 またはクレジットカードを追加してアカウントを確認してください。
##herokuの制限
herokuでは、無料アカウントでは5個まで公開できますが、それを過ぎたら消すか、クレジットカードを登録して有料会員になるかを選ばなくてはなりません。
今回は間違えて公開してしまったアプリケーションなどを消して、またheroku createをしたら大丈夫でした！
##最後に
こうやって、アカウント管理や料金体制は覚えておかないといけないですね！！
最低限知っておくべきGitコマンド

# はじめに
Gitコマンドでこのくらいは知っておくべきかと思います。
コマンド操作をすると理解が深まります。

### リモートリポジトリをローカルにクローンする。

```
$ git clone  <リモートリポジトリ)>
```
### リポジトリを新規作成する

```
$ git init　　
```
### ブランチの作成／一覧表示

⚫︎```ブランチの一覧表示```

```
$ git branch   ブランチの一覧表示
```
⚫︎```　ブランチの作成```

```
$ git branch <ブランチ名>　　 　ブランチの作成
```

⚫︎```再度ブランチ名を表示し、確認```

```
$ git branch -a  
```

⚫︎```ブランチを作成し、<ブランチ名>に切り替わる```

```
$ git checkout -b <ブランチ名> 
```

⚫︎```ブランチ削除```

```
$ git branch -d <ブランチ名>　
```

### 対象ブランチの切り替え

⚫︎```<ブランチ名>に切り替わる```

```
$ git checkout　<ブランチ名　>　　 
```

⚫︎```ブランチを作成し、<ブランチ名>に切り替わる```

```
$ git checkout -b <ブランチ名> 
```

⚫︎```<ブランチ名>に切り替わる```

```
$ git switch  　<ブランチ名　>　　    
```

⚫︎ ```<ブランチ名　> を作成し、切り替わる。```

```
$ git switch  -c 　<ブランチ名　>  
```

### コミット対象のファイルを登録

 ⚫︎```変更したファイルが全部対象になる```

```
$ git add .　 変更したファイルが全部対象になる
```
⚫︎```［候補に加えたいファイル／ディレクトリ］が対象になる```

```
$ git add ［候補に加えたいファイル／ディレクトリ］
```

### addの取り消し

⚫︎直近の1件のaddを取り消す

```
$ git reset HEAD
```

### コミット

⚫︎```変更されたファイルをコミット（ローカルリポジトリに変更内容を入れ込む）```

```
$ git commit -m "commitメッセージ"　　
```

⚫︎補足
コミットメッセージを英語で書く時は***現在形かつ命令形***で書くといいみたいです。
コミットメッセージではそのコミットが「何をした」のかを書くよりも、
***「何をする」ためのものなのかを書く方が後から見返したときに分かりやすくなる***みたいです。

⚫︎```直近のcommitの変更点を確認する```

```
$ git diff HEAD~1
```

⚫︎```直近のcommitを取り消す```

```
$ git reset --soft HEAD^
```
--softなくても取り消せます。

⚫︎```コミットの履歴確認```

```
$ git log
```

### git stash
コミットを一時避難します。

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

### プッシュする

⚫︎```ローカルリポジトリの変更点をリモートリポジトリにマージ```

```
$ git push origin <ブランチ名>　　
```

### マージする

⚫︎```ブランチをマージ```

```
$ git merge ＜ブランチ名＞
```

⚫︎```GitHub上のブランチの内容を自分のローカル環境に反映```

```
$ git merge origin/main
```
***originはリモート名***、***mainはブランチ名***です。


### fetch

⚫︎```リモートリポジトリから情報取得```

```
$ git fetch origin(リモート名)
```

### プルする

⚫︎```リモートリポジトリの変更点をローカルリポジトリにマージ```

```
$ git pull origin <ブランチ名>  

$ git pull         //省略可能 
```

⚫︎***注意***
****実務ではそんなに何回も使いません。***

### Gitの状態確認

⚫︎```gitの作業ツリー内のブランチの差分、状態、変更ファイルを確認```

```
$ git status 
```

⚫︎```変更点を確認```

```
$ git diff
```

⚫︎```リポジトリとステージの差分を確認```

```
$ git diff -staged
```

### 元に戻す

⚫︎```ワークツリーの変更を取り消す```

```
$ git restore <ファイル名>
```

⚫︎```ステージ上の変更を```

```
$ git restore -staged <ファイル名>
```

# おまけ
- ***git commit 取り消し***

https://qiita.com/shuntaro_tamura/items/06281261d893acf049ed


- ***git blame***

https://qiita.com/annin_jp/items/44960964ecbac77fe19a


#  有益、参考資料

https://qiita.com/ki_shi_0922/items/988c9da48e9266665503

https://qiita.com/sekiyaeiji/items/d0312c90bff4c37bc5dc
UE4初心者が頑張って努力する日記的な　#1【あいさつ】


どうも初めまして！初投稿のほむたんです。

今日からUE4初心者である私が1から一つ一つ学んでいくことを日記のように
書いて共有していこうと思います。

目標としては売れるようなクオリティのゲームを作る事です。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1764696/885212ec-8f89-2d92-c252-f2f867683a8a.png)

とりあえずアセットを大量に配置しようと思い、DL中……
物凄い時間が掛かりますね(笑)

ではまた！
【TailwindCSS】スクロールバーを見えないようにする

###はじめに
普段開発でTailwindCSSを使用していますが、このスクロールバーを消したいです。
![画面収録-0003-07-14-23.06.52.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648295/8a712901-a6f2-9c9d-e6e2-8f98345020b9.gif)
CSSでは簡単に実装できるものの、TailwindCSSの標準でスクロールを消せませんでした。。。（Tailwindだと結構こういうことある）

```元々のコード.tsx
const Index: React.VFC = () => {
  return (
    <>
      <div className="flex overflow-x-auto mt-10 text-white text-xl">
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30 -mr-96">スクロール</button>
      </div>
    </>
  )
}
export default Index
```

###実装方法

TailwindCSSの穴はstyled-componentを用いて実装した方が良さそうです。
まずcommandでインストールします。

```
# with yarn and TypeScript
yarn add @types/styled-components
```
インストールできたらimportして実装します。

```実装したコード.tsx
import styled from "styled-components"
const Index: React.VFC = () => {
　// 追加したコード
  const HiddenScrollBar = styled.div`
    ::-webkit-scrollbar {
      display: none;
    }
  `
  return (
    <>
      // divからstyled-componentに定義したCSSに変更
      <HiddenScrollBar className="flex overflow-x-auto mt-10 text-white text-xl">
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30 -mr-96
        ">スクロール</button>
      </HiddenScrollBar>
    </>
  )
}
export default Index
```

無事に実装できました:sunny:
![画面収録-0003-07-14-23.10.49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648295/ac89964b-01d4-70f5-f28b-03568911c233.gif)

###さいごに
Tailwindのようでstyled-componentの説明になってしまいましたが、一番楽な方法かなと思います。

###参考サイト
https://taiseiwada.com/articles/css-scrollbar-hidden#toc2

https://styled-components.com/
残プロ　第-43回　~カメラで撮ったレジュメをいい感じに~

# 台形検出+射影変換

レジュメなんかをデータ化する際，印刷機でスキャンできればいいのですが，忙しいとスマホのカメラで済ませることもあるかと思います．そうするとレジュメが曲がっていたり，机の余計な部分が移ってしまいます．
下記のプログラムでは，射影変換を行うことにより，スキャン風のいい感じな画像に補正してくれます．

~~~ python:
import sys
import cv2
import numpy as np

def image2scan(src):
    # extract white
    hsv = cv2.cvtColor(src, cv2.COLOR_BGR2HSV)
    lower_white = np.array([0,0,100])
    upper_white = np.array([180,45,255])
    mask_white = cv2.inRange(hsv, lower_white, upper_white)
    res_white = cv2.bitwise_and(src, src, mask= mask_white)

    # detect trapezoid
    gray = cv2.cvtColor(res_white, cv2.COLOR_BGR2GRAY)
    tmp= cv2.findContours(gray, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
    contours = tmp[0] if len(tmp) == 2 else tmp[1]
    areas = [cv2.contourArea(cnt) for cnt in contours]
    max_area = contours[np.argmax(areas)]
    epsilon = 0.1 * cv2.arcLength(max_area, True)
    approx = cv2.approxPolyDP(max_area, epsilon, True)

    # projection transform
    length = np.max(approx, axis=0)[0]
    cor = np.float32([[0, 0], [length[0], 0], [0, length[1]], length])
    approx_sum = [a[0][0]+a[0][1] for a in approx]
    sorted_sum = list(np.sort(approx_sum))
    sorted_idx = [approx_sum.index(i) for i in sorted_sum]
    pts = np.float32(np.array([
        approx[sorted_idx[0]][0], approx[sorted_idx[1]][0], 
        approx[sorted_idx[2]][0], approx[sorted_idx[3]][0]]))
    if pts[1][0] < pts[2][0]:
        pts = pts[[0, 2, 1, 3]]
    M = cv2.getPerspectiveTransform(pts, cor)
    dst = cv2.warpPerspective(src, M, (length[0], length[1]))

    return dst


def main():
    path = sys.argv[1]
    camera_image = cv2.imread(path)
    scan_like_image = image2scan(camera_image)
    try:
        write_path = sys.argv[2]
    except IndexError:
        write_path = "dst_" + path
    cv2.imwrite(write_path, scan_like_image)


if __name__ == '__main__':
    main()
~~~
ThrowとCatchとRethrowの違い

この記事はUiPathブログ発信チャレンジ2021サマーの14日目の記事です。

先日のFriends女子イベントでも話があがったのですが、やっぱり**『ThrowとCatchとRethrow』**の３つの役割について、何となくイメージしづらいという噂を聞きましたので、ちょっと図式で残してみようと思います！

##Throw(スロー)は、エラーを投げることです。
意図的にエラーを発生させる時に使います。エラーは「投げる」という表現をよく使いますので、ボールのようなイメージで捉えてもらうと想像しやすいかなと思います。

スローくんが、エラーを投げました！　→　特に誰も間に居なければ　→　そのまま発生したままのエラーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356722/e6adcdcb-c95b-7fd5-c505-bc87b9251a2f.png)

##Catch(キャッチ)は、エラーを受け止めます。
このエラーというボール、結構、その時々で制御したい場面が出てくるんですよね。その時のために、途中で受け止める役割がキャッチくんです。
キャッチしたら、選別が出来るようになります。

スローくんが、エラーを投げました！　→　キャッチくんが受け止めます　→　予め決めた条件で選別します。
（この図の場合はエラーとエラーにしないのパターンに分けています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356722/4b8e51e3-680b-a987-b2d0-8169aaa07a57.png)

##Rethrow(リスロー)は、エラーを元の情報のまま流します
キャッチしたエラーは選別ができます。エラーとして取り扱いたい場合でも、「元のエラー情報をそのまま使いたい」というケースと「分かりやすいように改めてエラー情報を意図したものしたい」というケースが発生します。
キャッチくんは、一旦ボール（エラー情報）を止めてしまったので、再びフローにボールを流すには、何らかの「投げる」行為が必要となります。
そこで登場するのが、バレーボールのように華麗にボールをトスするリスローさんです。元のエラー情報をそのまま使いたい場合は、リスロー。改めてエラー情報を意図したものにしたい場合は、ここでもう一度、スローくんが出てきます。（このスローくんにどういうエラーにしたいか指定しないと、「不明なエラーが発生しました」という良く分からないものになります・・・）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356722/dd0c5358-8e55-6e9e-5872-9f4adb536e36.png)

##終わりに
こんな感じでイメージついてもらえれば、幸いです。
JavaScriptの基礎 Part1

#文字の出力

console.log();を使って出力します。
文末にセミコロンを付けるのを忘れないようにして下さい。


#変数の定義

ES5ではvarを使いますが、
ES6でJavaScriptの変数を定義するためにはletを使います。
let 変数名 = 値;

変数の更新の時にはletは使いません。

変数は後々変わるかもしれない値を代入する時に使います。
しかし、後々に変わらない値を代入する時はconstを使います。


#テンプレートリテラル

テンプレートリテラルを使うことによって、＋を使わなくても変数や定数を
代入することができます。

${}を使います。
ただし、テンプレートリテラルを使う時は全体を``（バッククォーテーション)を使います。

```JavaScript
const name = "たけし";
console.log(`こんにちは、${name}です`);
```

#比較演算子

JavaScriptの時の比較演算子で、等しいかどうかを調べる時は
A === Bを使い、違う時はA !== Bを使う。

#最後に
初心者ですので、拙い文章や書き方だと思いますが、最後まで見て頂き
ありがとうございました。もし、ご指摘等がございましたらよろしくお願い致します。
Sveltekitのadapter-staticについてまとめてみた

# Sveltekitのadapter-staticについて

https://github.com/sveltejs/kit/tree/master/packages/adapter-static

Sveltekitにはadapterという機能があり、
ビルドの生成物を制御できる

[adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)はそのひとつ

- 主な機能は以下の二つ
   - 全てのページをprerenderingして静的サイトして出力してくれる
   - SPA用のfallback HTMLを作成して、SPAとして出力してくれる

## 静的サイトの出力(SSG)

fallbackを指定しないと全てのページをprerenderingしようとする

実際にprerenderingされるのは以下のページ

- routes/index.svelte, routes/hoge.svelte など page paramsを使っていないページ
- 上記ページから　`<a>` でリンクが貼られている `routes/posts/[id].svelte` のようなpage paramsありのページ
   - [prerender.crawl](https://kit.svelte.dev/docs#configuration-prerender) が有効になっている必要がある (デフォルトで有効)
   - `<button on:click={() => goto('/hoge')}>` みたいなProgramaticに遷移させるのはだめ
- svelte.config.jsonのprerender.pages で指定されているページ
   - これがあると、指定されたページ**のみ**prerenderingされる

## SPAとしての出力

`adapter: adapter({  fallback: '200.html'})`

のように fallback に htmlファイル名を指定すると、SPAモードでの出力になる

挙動が変わるのは以下の点

- prerenderingされるページは一部指定したところのみ
   - `<script context="module">export const prerender=true;</script>`   を指定したRoute Paramsがないページ
   - **prender.pages での指定は無視される**
- 生成されるHTMLで `spa: true`が指定されている
    - `<script context="module">` 内でのloadがクライアント側実行されるようになる
    - ssr: false を指定したときとおそらく同じ


READMEで `200.html` になっているのは [Surge](https://surge.sh/help/adding-a-200-page-for-client-side-routing) という Hostingサービスを意識しているみたい？

これが実装されるようになった元のissueは多分こちら

https://github.com/sveltejs/kit/issues/754

## ssr: false を指定したときの挙動

fallbackを指定せずに sveltekitのssrを無効にしたときもSPAモードで出力される

ただしprerenderingできるところはしようとする

実際にprerenderingされるのは以下のページ

- routes/index.svelte, routes/hoge.svelte など page paramsを使っていないページ
- svelte.config.jsonのprerender.pages で指定されているページ
   - これがあると、指定されたページ**のみ**prerenderingされる

たとえリンクがあったとしても `routes/posts/[id].svelte`みたいなページはprerenderingされなかった

---

[Docs • SvelteKit](https://kit.svelte.dev/docs#ssr-and-javascript-prerender)
「チャネルに新しいメッセージが追加されたとき」のチームIDとチャネルIDを取得

Power Automateで「チャネルに新しいメッセージが追加されたとき」をトリガーにするとき「チーム」と「チャネル」とを指定しますが、なぜか以降のフローではこのチームIDとチャネルIDが補完されないため、移植性の悪いフローを書くハメになります。(現時点)

ので、取得する式を備忘として。

* チームID

```
triggerBody()?['channelIdentify']?['teamId']
```

* チャネルID

```
triggerBody()?['channelIdentify']?['channelId']
```

「メンションリストの取得」のように標準対応されることを期待。