OmniAICreator/Qiita-1.07M huggingface dataset:
【Kotlin 初心者】画面遷移スライド

みなさんこんにちは
新米Kotlinエンジニアです

今回はスライド式の画面遷移にかなりざっくりと書いていきます。

画面遷移を実装する際にstartActivity(intent)の下にoverridePendingTransitionを書いてあげましょう
animディレクトリーを作成し、slide_in_left,slide_out_leftをそれぞれ作成します。

```
省略

startActivity(intent)
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left.xml)

```

```slide_in_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>
```

```slide_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
</set>

```

かなり簡単にできるのでもしよかったらぜひ使ってみてください
CPU性能とクロック周波数色々

# CPU性能とクロック周波数色々
基本情報技術者試験の勉強をしていて，クロック周波数について調べたので備忘録
## クロック周波数には，内部クロックと外部クロックがあり，それぞれ別のものを指す．
## 内部クロック
CPUの動作，処理能力を示す．
CPUのカタログに書いてある周波数はコレのこと．
intelでは基本周波数(Base Freqency)と表記し，AMDでは基本クロック(Base Clock)と表記している．
WikipediaではCPU周波数(CPU clock rate)と表記している．
CPU-Zでは，Core-Speed (=Bus-Speed $\times$ Multiplier)で表される．

他の呼び名
* 内部動作周波数
## 外部クロック
CPUと，RAMやキャッシュ間のデータの伝送路(バス)の動作周波数．
一般に内部クロックよりも数倍小さい．
CPU-Zでは，Bus-Speedで表される．

他の呼び名
* バスクロック
* システムクロック
* ベースクロック
* 外部動作周波数
## CPUと外部クロックの関係
内部クロック$f_{in}$と，外部クロック$f_{out}$ の関係は，倍率$n$を用いて以下のように表せる．

$$f_{in} = n \times f_{out}$$
$$n \in \mathbb{N}$$

基本的に倍率$n$は定数であり，倍率$n$を初期値のまま動作させるものが定格クロックと呼ばれるものである．
よく聞くOver Clock(OC)は，倍率$n$を上げて動作させることである．
OCの限度はCPUごとに決まっており，OCが不可(倍率$n$が定数)なCPUも多い．
## 所見
一般にベースクロックは外部クロックのことを指すのに，CPUメーカー(intel, AMD)では基本周波数や基本クロックで内部クロックのことを指すのが意味分からん．
### P.S.
間違い等ありましたらご指摘いただけると喜びます．
## 参考Links
 * [CPU-Z](https://www.cpuid.com/softwares/cpu-z.html)
MATLABでキーワード引数をつかうには

# 概要

調べた限りでは，MATLABでは位置引数による代入しかなく，Pythonにあるキーワード引数がないっぽいです．(R2021a現在．実はあるとかだったらコメント欄で教えてくださいm(_ _)m)
のでキーワード引数による代入を無理やりしてみました．


## その前に 「位置引数」「キーワード引数」 

通常，関数に値を代入する時，関数側で定義された順番で変数に値が渡されます.（位置引数)

↓Pythonの例

```python
def Subtract(a, b):
    return a - b
```

```python
Subtract(4, 3)
```
この場合，aに4が，bに3が渡されて，値1が返ってきます．

```python
Subtract(b=5, a=9)
```
しかし，= を使って，bに5を代入して，aに9を代入してやるんだ! 
とすれば，a, bにそれぞれ9, 5が代入され，値4が得られます．
このように，= を使って，代入先の変数とその値を紐づけて指定してあげるこの引数を，
キーワード引数と言います．

この機能がMATLABにはないため，MATLABでもこれっぽいことを無理やりしたのが，以下の内容です．


# 成果

がこちらです．

```matlab
function Subtract(a, b, varargin)

if nargin > 2 %関数へ渡された値が3つ以上ある時 True
    for i = 1:size(varargin, 2) 
        c = cell2mat(varargin(i));
        eval(c)
    end
end
a - b

end
```

例1

```matlab
Subtract(4, 3)
```
1が出力されます．

例2

```matlab
Subtract(0, 0, 'b=5', 'a=9')
```
4が出力されます．

## 説明

vararginは，関数に渡された値の中で，余ったものを全部格納する変数です．詳しくは以下のドキュメンテーションを見てください．
[MATLAB documentation : 可変長の入力のサポート](https://jp.mathworks.com/help/matlab/matlab_prog/support-variable-number-of-inputs.html)

また，evalはStringやchar等の文字をコードとして実行する関数です．
[MATLAB documentation : MATLAB式を評価する](https://jp.mathworks.com/help/matlab/ref/eval.html)
Pythonのeval関数の解説のページでも貼っときます．
MATLABとPythonのeval関数は機能一緒です．↓の解説の方が100倍分かりやすいです．
[TechAcademy : Pythonのeval関数について現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/40662)

で，上のコードは，
・値の入力が2つなら，それらを左からa, bへ代入
・値の入力が3つ以上なら，3つ目以降の文字列をコードとして実行
するようになってます．

つまり，例1では上で説明した位置引数による代入され，
そのまま引き算が計算されることで，値1が出力されます．

例2ではa, bにそれぞれ0が代入されたのち，b=5, a=9 のコードが実行されることで，
a, bそれぞれが9, 5に上書きされ, 値4が出力されます．
ちなみに，aとbに0を代入しているのは，エラー回避のためです．

#最後に

既存の関数の入力引数を指定するところの一番右にvararginを追加して，
二行目以降にifの下をコピペして，
if文の条件であるnarginの右の値を調整すれば，
すぐにでも関数をキーワード引数対応にできるかと思います．
Rubyをインストールする！(Mac)

#はじめに

Railsを使ってポートフォリオを制作するにあたり、Rubyをインストールしました！
その手順をまとめました。参考になれば幸いです！

##環境
MacBook Pro

#インストール

###Homebrewをインストール
まずはパッケージ管理システムであるHomebrewをインストールします。
Homebrewをインストールするにはまず[Homebrew](https://brew.sh/index_ja)のwebサイトへ移動します。
画面中央のインストールの文字の下にあるコマンドをコピーしてターミナルで実行します。

```
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

これでHomebrewのインストールは完了です。

###rbenvをインストール
続いてRubyのバージョン管理システムであるrbenvをインストールします。

```
% brew install rbenv
```
続いて以下のコマンドを実行して初期設定を完了します。

```
[シェルがzshの場合]
% echo 'eval "$(rbenv init -)"' >>  ~/.zshrc
% source ~/.zshrc

[シェルがbashの場合]
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

###Rubyをインストール
まずはrbenvでインストール可能なRubyのバージョンを確認します。

```
% rbenv versions
2.5.9
2.6.7
2.7.3
3.0.1
jruby-9.2.17.0
mruby-2.1.2
rbx-5.0
truffleruby-21.0.0
truffleruby+graalvm-21.0.0
```
最新バージョンの3.0.1をインストールしてみます。

```
% rbenv install 3.0.3
```

インストールできたか確認してみましょう。

```
% rbenv versions
* system (set by /Users/satoyusuke/.ruby-version)
  3.0.1
```

3.0.1が表示されているのでインストールが完了です。
続いて使用するRubyの設定を変更します。

```
rbenv global 3.0.1
```

もう一度確認してみましょう

```
% rbenv versions
  system
* 3.0.1 (set by /Users/satoyusuke/.ruby-version)
```

＊が3.0.1に移動していれば成功です！
CSSの基礎

CSSでidをセレクトするには先頭に「#」を付けます「#」は「id」を意味です。
class属性の場合は「＃」が「.」に代わります。

一件同じように見える
id属性、class属性ですが
使い方のルールにそれぞれ違いがあります。

id属性
同じWebページ内でid属性の値が重複してはならない

class属性
同じWebページ内で同じclass属性の値を何度でも用いることができる


ポイントですが、
「id」とは「識別」の役割を担っていて、
オンリーワン（重複しない）ということが前提です。
プログラムの世界では「一意」や、「ユニーク」と言ったりもします。

「class」とは「部類、共通する」役割を担っています。
Vue.jsの導入

# Vue.jsの導入

Vue.jsを使用するためには、インストールする必要があります。
以下の公式を参考にインストールをします。
[Vue.js公式](https://jp.vuejs.org/v2/guide/)

まずは基本構文から。

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <p>HelloWorld!</p>
</div>
```

公式からVue.jsを導入。
そしてお馴染みのHelloWorld!をHTMLに記述

```vue
new Vue ({
  el: '#app'
})
```

そしてVue.jsの記述。
１行目でVueインスタンスを宣言して、これからVueを使用する準備をします。
中身にはオブジェクトを取り、elプロパティ(elementの略)を記述します。
この記述は、このVueは、HTMLのどこをターゲットにしているかを示しています。
今回の#appは、idがappのタグがターゲットになっています。
クラスがappの場合は.appと記述します。

作成したVueインスタンスはオブジェクトなので中身にdataを取ることが出来ます。

```vue
new Vue ({
  el: '#app',
  data {
    message: 'HelloWorld!'
  }
})
```

それに合わせてHTMLを編集。

```html
<div id="app">
  <p>{{message}}</p>
</div>
```
 二重かっこにすることでVue.jsとHTMLを対応させることが出来ます！

# まとめ

今回はVue.jsの導入についてまとめました。
公式などを見ているとやはりJavaScriptそのものについての理解も深めていかないと完璧に使いこなすのは、難しそうです。

JavaScript、Vueについて学習した都度アウトプットしていきます。
PHP/Laravel/で開発環境を整える

PHP、Laravelで開発環境の設定をやったことがなかったので、まとめました。

## MAMPをインストール

※MAMPとは....PHPが動くために必要なものという認識で大丈夫です
(Laravelアプリはローカル開発用のサーバー機能があり
MAMPがなくても大丈夫なのですが実際に公開する場合とローカルサーバーとの環境の違いで
トラブルが発生する可能性があるのでそれを防ぐためインストールします)


https://www.mamp.info/en/downloads/
よりダウンロードしましょう！！

![スクリーンショット 2021-04-21 17.14.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/de84e8ea-8d08-5e4d-c986-446f59d7e19d.png)

今回はmacを選びましたが、windowsの方はそちらを選んでください。


## Composerをインストール
※Composerとは....PHPのライブラリ依存関係を管理するものです

ターミナルを立ち上げ、
まずはComposerをインストールするためのスクリプトをダウンロードします

```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
```

次に以下を実行しComposerをインストールします

```
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer
```

```
composer -V

#以下のような感じならOK
Composer version 2.0.12
```

## Laravelでアプリケーションを作成する

1.MAMPに移動

```
cd /Applications/MAMP/htdocs/
```

2.Laravelでアプリケーションを作成する

```
composer create-project --prefer-dist laravel/laravel simple
```

## 起動する


MAMPを起動し、startをクリックします

http://localhost:8888/simple/public/
にアクセスします。


もしくはMAMPを使用しない場合

```
cd simple
php artisan serve
```
で
http://localhost:8000/
にアクセスします。

デフォルト画面が表示されれば成功です！！
![スクリーンショット 2021-04-21 17.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/1ee538b0-f1ac-b9ab-f67a-c03e57e91df2.png)
Herokuの期限の対応方法(The Heroku-16 stack is deprecated)

# 概要
![スクリーンショット 2021-04-21 17.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/4a8fb230-fcd4-8520-f189-83a05f37b2bf.png)

結構前から<font color="Red">The Heroku-16 stack is deprecated</font>が出ていて、参考のため、対応方法の記事を載せておきます。

影響もわからないし、本番環境をいじるのは躊躇してしまいますが
やらないと5月以降止まってしまいます。

#対応方法
流れは簡単でスタックの変更をするコマンドをheroku-cliで実行します。
その後masterブランチを更新して完了です。
下記はアプリ名がhogehogeの例

```sh
// heroku-cliを使用してheroku loginしておく
$ heroku stack:set heroku-18 -a=hogehoge
// masterブランチに再アップロード
$ git push heroku master
```

# まとめ
自分と同じようにherokuの更新に困っている人の役に立てば幸いです。
データベースにおけるクエリと全文検索機能の統合に関する覚書 (Oracle, MongoDB, Elasticsearch, Couchbase)

# はじめに

今時のアプリケーションでは、SQLで実装されるような一般的な検索の他にテキストに対する全文検索が必要とされる事が珍しくありません。ほとんどのRDBMSは、前者のニーズを満たすためにBツリーベースのインデックス機能を提供しています。テキスト検索の要件については、ElasticSearchやSolrなどのLuceneベースの検索エンジンの利用が一般的です。

# Oracleにおける全文検索機能との統合

さらに、既存のデータベースに全文検索の機能を統合する動きが見られます。その、一つひとつを詳述することはできませんが、例えば、以下は、Oracleにおける適用例となります。

- [Oracle B2B ServiceにおけるElasticSearch機能提供](https://www.oracle.com/webfolder/technetwork/tutorials/tutorial/cloud/r13/wn/engagement/releases/20B/20B-engagement-wn.htm)
- [Oracle NoSQLとElasticSearchとの統合](https://docs.oracle.com/en/database/other-databases/nosql-database/18.1/full-text-search/index.html#NSFTL-GUID-E86A1933-C1D6-4FEE-825F-2DEE0712BF2D)


一方で、RDBMSと、ElasticSearchの機能を統合するにあたっては、固有の課題が見られます。以下はその例です。

- Luceneベースの検索はJOINをサポートしていないため、データモデルを大幅に非正規化する必要がある
- ElasticSearch APIを使用して検索を実装するための開発作業。
- ElasticSearchをセットアップするためのリソース要件、およびElasticSearchへRDBMSのデータを取り込むためのストレージ要件。

# MongoDBにおける全文検索機能との統合

MongoDBは、マネージドサービスであるAtlasでそのクエリ言語であるMQLにLuceneによる検索機能を追加しました。
- [MongoDB Atlas Search](https://www.mongodb.com/atlas/search)


MongoDB MQLへの検索機能統合については、下記のような制限が知られています。

- Atlasでのみ利用でき、オンプレミス製品では利用できない。
- 全文検索は、aggregate（）パイプライン内の最初の操作としてのみ実行可能


# ElasticSearchからのSQLへのアプローチ

反対に、ElasticSearch側からSQLを利用可能にする動きも見られます。

- [ElasticsearchにおけるSQLの使用](https://www.elastic.co/what-is/elasticsearch-sql)
- [Open Distro for Elasticsearch](https://opendistro.github.io/for-elasticsearch/features/SQL%20Support.html)

当然のことながら、このアプローチにも固有の限界があります（下記の公式サイトで整理されています）。

- [SQL Limitations](https://www.elastic.co/guide/en/elasticsearch/reference/current/sql-limitations.html)

# CouchbaseにおけるSQLと全文検索の統合

Couchbaseには、クエリ言語と全文検索機能の両方をサポートしてきた歴史があります。Couchbaseのクエリ言語であるN1QLは、成熟したデータベースで利用可能と予期されるほとんどの操作をサポートしています。例えば、RDBMS同様の結合や集計操作、ルールベースおよびコストベースのクエリ最適化をサポートします。加えて重要なのは、NEST、UNNEST、ARRAY操作などの追加の機能が含まれ、N1QLでは、JSONドキュメント固有のデータ構造に対する操作が、SQLへ統合されています。

CouchbaseのN1QLにおける重要なポイントは、全文検索機能がN1QL言語にシームレスに統合されていることです。

- [Couchbase 6.6 Flex Index](https://docs.couchbase.com/server/6.6/n1ql/n1ql-language-reference/flex-indexes.html)

もちろん、Couchbaseにも固有の課題があり、例えば、CJK（中日韓）言語のサポートは、Unicodeで規定されている基本的なレベルに止まり、ユーザ定義辞書はサポートされていません。

# 最後に

本稿では、全文検索機能のニーズの高まり・一般化に伴って実現されてきた、様々なデータベースにおける全文検索機能とクエリ言語との統合に関する取り組み状況を整理しました。

# 参考情報

[オラクルが作るNoSQL DBの正体は？](https://www.atmarkit.co.jp/fdb/rensai/dbwatch2011/dbwatch201111_01.html)

[Announcing Flex Index With Couchbase](https://blog.couchbase.com/announcing-flex-index-with-couchbase/)
いい加減に「Laravelの命名規則」を覚えたいのでまとめてみた

#はじめに
こちらの記事を参考にさせていただきました!!

+ [【laravel】laravelの命名規則](https://qiita.com/gone0021/items/e248c8b0ed3a9e6dbdee)

#この記事を書こうと思った理由

+ **自分で書いてしっかりアウトプットしたかったから(１番の理由です)**
+ いい加減に命名規則を覚えたかったから
+ 誤った命名規則の書き方をもうしたくなかったから
+ 今後の開発で命名規則に沿ってコーディングしていきたいから

#概要
+ LaravelのコーディングスタイルはPHP-FIGが定めた規約のPSR-2に準拠している。
+ PSRにはPSR-0、PSR-1、PSR-2、PSR-4などがあり、PSR-0とPSR-4はPHPのオートローダーのための規約で、 PSR-1とPSR-2は標準コーディング規約になっている。
+ PSRの記事ではございません。
+ 万が一間違っている場所がございましたら指摘していただければ嬉しいです!!


#table名

| 記法 | 複数or単数 | 例 |
|:----------|:-----------|:------------|
|スネークケース|複数|users<br>item_tables|

＊その他の注意点など
特記なし。


#model名

| 記法 | 複数or単数 | 例 |
|:----------|:-----------|:------------|
|アッパーキャメル|単数|userData<br>itemList|

＊その他の注意点など
テーブル名を単数系に変換したファイル名にする。


#migrationのファイル名

| 記法 | 複数or単数 | 例 |
|:----------|:-----------|:------------|
|スネークケース|単数|xxx_create_users_table<br>xxx_add_to_items_table|

＊その他注意点など
*「artisan make:migration ファイル名」になる。
*「xxx」には作成日時が自動的に入る。
*「add_to_xxx_table」とする事で、「xxx」がテーブル名として認識される。




#seedsのファイル名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|アッパーキャメル|指定なし|UsersTableSeeder<br>ItemTableSeeder|

＊その他の注意点など
ファイル名の最後を「Seeder」とする。


#Controllersのファイル名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|アッパーキャメル|指定なし|UserDataController<br>ItemListController|

＊その他の注意点など
ファイル名の最後を「Controller」とする。


#viewsのファイル名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|スネークケース|指定なし|index<br>users_add|

＊その他の注意点など
blade.phpも同様。


#一覧

注記を省略して一覧としてまとめてみた。

| 種類 | 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|:--------|
| table名  | スネークケース  | 複数  | users_table  |
| model名  | アッパーキャメル  | 単数  | UserData   |
| migration名  | スネークケース  | 単数  | xxx_create_users_table  |
| seeder名  | アッパーキャメル  | ---  | UsersTableSeeder  |
| Controllers名  | アッパーキャメル  | ---  | UsersDataController  |
| views名  | スネークケース  | ---  | users_add  |


#その他の命名規則

命名規則のアウトプットをしているため、備忘録として書く!!
Laravel(PHP)では変数を、$xxxと表現するため問題ないが、他言語ではメソッド名やデータベース名と混同しないように注意する。


#class名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|アッパーキャメル|---|UserData<br>ItemList|


#method名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|ローワーキャメル|---|userData<br>itemList|


#変数名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|スネークケース|---|＄user_data<br>＄item_list|

※キャメルケースだとクラス名やメソッド名との混同しやすいため、変数はスネークケースで統一している。また、PSRで変数名に指定はないが一貫性を持たせるべきという文言はある。


#ディレクトリ名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|アッパーキャメル|---|UserData<br>ItemList|


#ファイル名

| 記法 | 複数or単数 | 例 |
|:--------|:--------|:--------|
|スネークケース|---|user_data<br>item_list|
[素人向け] キーボードを閉じる際にリビルドされる原因の一つ

#画面タップでフォーカス解除をしている場合(私的備忘録)

※素人が同じく素人向けに情報をシェアすることを目的にこの記事を書いています。


##経緯
私（素人）は、TextFieldのFocusを画面のどこかをタップすると、解除される方法を探しているとき、

>ウィジェットの上の方で、GestureDetectorでFocusScope.of(context).unfocus()すればいいよ

というのを目にして、ただそれだけを鵜呑みして、コードを追加しました。

その後、キーボードを開く/閉じる際に、ほぼ全体がリビルドされていることに気づきました。


##どうする

今のところは、画面のどこかをタップしてFocus解除を諦める以外、私は知らないです。

誰かが、解決案を出していることを願います。


##続き
解決案が見つかれば更新予定。
レイヤー効果の境界線が表示されない時は

レイヤー効果の境界線が表示されないのは、該当のレイヤーに何もないから。

>何もないレイヤーを重ねても、効果は出ません。
>何らかの色がそのレイヤーに乗っている必要があります。
>
>試しにその透明なレイヤーを黒や白で塗りつぶして効果を確認してみてください。

https://oshiete.goo.ne.jp/qa/9600492.html
データ品質 ⇒ データ品質の使用開始

１．会社の役員チームのために、データ品質の重要性について概説するプレゼンテーションを作成しています。データ品質を決める主な要因として、何を組み込みますか?
２．プレゼンテーションでは、不適切なデータの落とし穴に言及します。品質が低いデータに一貫して関連する結果は次のうちどれですか?
３．適切なデータのメリットについても言及します。適切なデータに関連することが多いのは、次のうちどの結果ですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/21210f4f-191b-b1e0-beb0-bb9801971109.png)
wordpressの小さいエラーを解決していく

# wordpressのエラー解決その１　DBが立ち上がってなかったとき

初投稿です。これからQiitaで日々のQuickFixを記録に残していこうと思います。
以下の環境でWordpressサイトを構築しており、関連したTipsになる予定です。

## 環境
AWS EC2　Amazonlinux2
Nginx　
MariaDB
wordpress
Rails

## 問題と解決
今までアクセスできていたトップページにアクセスすると502エラーが発生
The page you are looking for is temporarily unavailable. Please try again later.

原因調べようとエラーログを見ようとしたが特に何も出力されてなかったので原因はwordpressのほうにありそうだ

/etc/nginx/nginx.conf

```
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
```

起動しているサービスを調べたらmariaDBが起動していない

```
$ sudo service mariadb status
Redirecting to /bin/systemctl status mariadb.service
● mariadb.service - MariaDB database server
   Loaded: loaded (/usr/lib/systemd/system/mariadb.service; disabled; vendor preset: disabled)
   Active: inactive (dead)
```

wordpressとかの更新で再起動した際に止まったのかも
自動開始する設定を入れる
disabledなので現在は自動開始しない

```
$ systemctl is-enabled mariadb
disabled
```

以下のコマンドで自動開始するよう設定を変更

```
$ sudo systemctl enable mariadb
Created symlink from /etc/systemd/system/multi-user.target.wants/mariadb.service to /usr/lib/systemd/system/mariadb.service.
```

## 引用
[一行で終了]　Next.jsの新規プロジェクトをTypeScriptで実行する方法

## 開発環境
・Mac Catalina(10.15.7)
・npm (7.6.1)
## 結論
以下のコードをターミナルにて実行する。

```
npx create-next-app --example with-typescript 【プロジェクト名】
```
[Next.jsの公式ホームページ](https://nextjs.org/learn/excel/typescript)では、create-next-appしてから、tsconfigなどの導入をする手順ですが、こっちの方がシンプルなので、自分はこっちを使用しています。

## 参考記事
[Next.jsのプロジェクトをTypeScriptにする](https://zenn.dev/kazto/articles/f94fe7172cdfcf066544)
位置情報の取得



```index.js
<p id="loc" class="position"></p> 　緯度経度
<span id="accuracy" class="position"></span> mです。</p>　精度
</section>
```



```index.js
function success(pos) {
    const lat = pos.coords.latitude;
    const lng = pos.coords.longitude;
    const accuracy = pos.coords.accuracy;

    $('#loc').text(`緯度：${lat} 経度：${lng}`);
    $('#accuracy').text(accuracy);
}

function fail(error) {
    alert('位置情報の取得に失敗しました。エラーコード：' + error.code);
}

navigator.geolocation.getCurrentPosition(success, fail);

```



定数lat,lng,accuracyに代入していきます。
この処理内容をHTMLに出力するために、テンプレート文字列を使って整形します。
id属性loc。textメソッドの()内に含まれる出力するテキストを入れます。
精度も出力するので、同じようにid属性accuracyを処理していきます。

>[確かな力が身につくJavaScript「超」入門 第2版](https://book.studio947.net/title/3719/)
cakephp3 インストール時のエラー解決方法

#cakephp3インストール時にターミナルにエラーが出た話

```
php composer.phar create-project --prefer-dist cakephp/app:^3.8 blog
```
上記コマンドでcakephp3をインストールしていた際、ターミナルに

```
Action required!                                                           
                                                                                
     The CakePHP plugin installer v1.3+ no longer requires the                  
     "post-autoload-dump" hook. Please update your app's composer.json          
     file and remove usage of                                                   
     Cake\Composer\Installer\PluginInstaller::postAutoloadDump   
```
上記のエラーが出た。
どうやらcomposer.jsonの

``` "post-autoload-dump": "Cake\\Composer\\Installer\\PluginInstaller::postAutoloadDump",```
上記記述がもう不要だから消してと言っているらしい。

参考：[CakePHP 4 インストール時などに plugin installer v1.3+ no longer ... が出た際の対応方法](https://tt-computing.com/cake4-remove-post-autoload-dump)

![スクリーンショット 2021-04-21 17.04.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/de18b658-5e82-70af-7794-20e48cf0c744.png)

今回のディレクトリ「blog」内のcomposer.jsonを開き上記該当コードを削除し完了。
Excel の表から Json を出力する関数

## つまり

|ID | NumberProp | ArrayProp | StrArrayProp | BoolProp |
|:--|:---|:---|:---|:----|
|Areare | 1 | [1,2,3] | ["aaa", "bbb"] | TRUE |
|Hugahuga | 2 | [4,5,6,7] | ["ccc", "ddd", "eee"] | FALSE


こんな表を

```json
[
  {
    "ID": "Areare",
    "NumberProp": 1,
    "ArrayProp": [1,2,3],
    "StrArrayProp": ["aaa", "bbb"],
    "BoolProp": true
  },
  {
    "ID": "Hugahuga",
    "NumberProp": 2,
    "ArrayProp": [4,5,6,7],
    "StrArrayProp": ["ccc", "ddd", "eee"],
    "BoolProp": false
  }
]
```

こうしたい。
関数として独立した処理にしましょうね。責任分界点はちゃんとしようね。シートの中でも使えるよ。

## ほかに試した方法

### Excel から CSV を出力してそれを Json にする

https://qiita.com/yamazon/items/ee343202be8ee7dcdb53

値がぜーんぶ文字列になる。そらそうだ。 CSV 上じゃ数字も真偽値も全部文字列だ。

## コード

* 上に書いたみたいなフラットなJsonしか出てこないよ
* ファイルに出力したい時とかはこれ挟んだマクロまた書いてね
* 「`[` で始まる文字列として扱いたいもの」が来たらアウトだね。そもそも DynamoDB の設定ファイル量産するためのマクロだから、多少はね。

```visualbasic
Function rangeToJsonString(rangeP)
    '入力は二次元配列とかセル範囲とか行けるはず
    Dim range
    range = rangeP 'なんかこうするとセル範囲オブジェクトが渡ってきた時に .Value2 がいいかんじに入ってくれる。
    
    len_row = UBound(range, 1) '行数
    len_col = UBound(range, 2) '列数

    ReDim heads(len_col - 1) '見出し、0から列数-1まで
    ReDim recs(len_row - 2) 'レコード、0から行数-2まで
   
    'データの取得とJSONの生成
    For c = 1 To len_col
        '1行目の各セルを見出しとして取得。
        heads(c - 1) = range(1, c)
    Next c
    For r = 2 To len_row
        '2行目から最下行まで処理。
        ReDim temps(len_col - 1) '0から列数-1まで
        For c = 1 To len_col
            cellData = range(r, c)
            dataStr = ""
            'データ種別の判定
            dataKind = VarType(cellData)
            Select Case dataKind
                Case 8 'Stringの時
                    If Left(cellData, 1) = "[" Then '配列ならそのまま
                        dataStr = cellData
                    Else
                        dataStr = Chr(34) & cellData & Chr(34) '文字列ならダブルクォーテーションをつける
                    End If
                Case 11 'bool
                    If cellData Then
                        dataStr = "true"
                    Else
                        dataStr = "false"
                    End If
                Case Else 'そのほかはそのまま
                    dataStr = cellData
            End Select
            
            '各行の各セルを取得し見出しと組み合わせる。
            temps(c - 1) = "    " & Chr(34) & heads(c - 1) & Chr(34) & ": " & dataStr
        Next c
        recs(r - 2) = "  {" & vbCrLf & Join(temps, "," & vbCrLf) & vbCrLf & "  }"
    Next r
    rangeToJsonString = "[" & vbCrLf & Join(recs, "," & vbCrLf) & vbCrLf & "]"
   

End Function

```
【カテゴリ機能】destroyアクションでのエラー[FOREIGN KEY constraint failed]

#はじめに
データ削除時に`ConstraintException: FOREIGN KEY constraint failed`というエラーがでたのでその解決方を書く。

　　
#モデル
今回扱ったモデルは次の様なアソシエーションである。
![スクリーンショット 2021-04-21 16.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1293843/31777cf0-4ed9-4bca-1c93-63ced3064dda.png)

Noteモデルが複数のカテゴリーをもつ。
　　
この時`Noteコントローラー`で`@note.destroy`と書いたところ、次の様なエラーが発生した。
![スクリーンショット 2021-04-21 16.29.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1293843/4cc68248-5b81-244e-903d-a2c2366a7c70.png)
　　
#原因
このエラーの原因は`Note_category_relation`モデルに、
`note_id`を外部キーとして持っているためである。
　　
つまり、`Note`を削除する際、`note_id`を外部キーにもつ`Note_category_relation`のデータも一緒に削除しなければいけないと言うこと。
　　
#エラー処理
これは編集前の`Note`モデル。

```ruby:app/models/note.rb
class Note < ApplicationRecord
  has_many :note_category_relations #ここが問題
  has_many :categories, through: :note_category_relations
end

```
　　
このファイルを次の様に編集する。

```ruby:app/models/note.rb
class Note < ApplicationRecord
  has_many :note_category_relations, dependent: :destroy #追加部分
  has_many :categories, through: :note_category_relations
end
```

`has_many :note_category_relations, dependent: :destroy`とすることによって、`Note`が削除された時に、その`Note`を外部キーとして持っている`note_category_relations`も削除できる。

　　
これでエラー解決です。
配列と繰り返し文を組み合わせて使用する代表的なパターン3つ

***
###①　ループによる全要素の利用
カウンタ変数 i を0からインクリメントで要素数（ scores.length メソッド）まで繰り返すことで配列の添え字を順に指定し、格納した要素に1つずつアクセスする

```Java
int[] scores = {10, 20, 30, 40, 50};
for(int i =0; i < scores.length; i++){
    System.out.println(scores[i])
}
```
num [0] から num [4] まで順に表示される
要素数の増減に対して、記述は何ら変わることはない

***
###②　ループによる集計

```Java
int[] scores = {10, 20, 30, 40, 50};
int sum = 0;
for(int i =0; i < scores.length; i++){
    sum += scores[i];
}
int avg = sum / score.length;
System.out.println("合計点:" + sum);
System.out.println("平均点:" + avg);
}
```
まず合計値の変数 sum を0で初期化し、インクリメントでカウンタ変数を1つずつ増やして要素1つずつ指定し、sum に足していく作業を要素数分（ score.length ）繰り返すことで、要素の合計を sum に入れる
要素の合計である変数 sum を要素数（ score.length ）で除し、変数 avg に入れることで、要素の平均値が取得できる
この他にも、ある条件と一致する要素の数を数える、"カウント集計"という処理にもよく使用される

***
###③　添え字に対応した情報の利用
0~3の整数がランダムに格納された5個の要素を持つ配列 x から、それぞれに対応したH,E,L,Oという文字で表示させたい場合

```Java
int[] x = new int[4];
for (int i = 0; i < x.length; i ++) {
    x[i] = new java.util.Random().nextInt(4);
} 
for(int i = 0; i < x.length; i ++) {
    switch (x[i]){
        case 0:
            System.out.println("M");
            break;
        case 1:
            System.out.println("A");
            break;
        case 2:
            System.out.println("I");
            break;
        case 3:
            System.out.println("N");
            break;
    }
}
```
for文でカウンタ変数を0~3まで繰り返し、x[ 0 ]~x[ 3 ]の要素にはランダムで0~3の値を格納する
その後、別のfor文でカウンタ変数を繰り返しながらswitch文で、要素 x [ 0 ]の値が 0 のとき' M '～ 3 のとき' N ' までを分岐で表示させ、x [ 3 ]まで繰り返し、文字を4つ表示させる

また、この switch 文の冗長な記述は

```Java
char[] y = {'M','A','I','N'};
System.out.println ( y[x[i]]);
```
という簡単な 2 行で書き換えられる
これは配列 x に対応する、A~Dまでの文字を格納する配列 y を初期化し、その [] の中に x [ i ] を入れてfor文で繰り返し、1つずつ y の要素に対応させている
例えばランダムに格納した x [ 0 ]の値が' 2 'だった時、出力されるのはy [ 2 ]となり、配列 y の要素に対応して ' I 'が表示される
画像ファイルをPDFに変換する

##PYTHON で画像ファイルをPDFに変換する

python3.7.9で実装。
pyinstaler で exe 化すれば、ドラッグ＆ドロップで変換するツールになります。


```python:
import sys
import os
import img2pdf
from PIL import Image, ImageSequence
from pikepdf import _cpphelpers
import tkinter as tk
from tkinter import messagebox

#透過処理を外す、jpegに変換する
def RemoveAlpha(src):
    dstPath = os.path.dirname(src)
    dstImg = []
    img = Image.open(src)

    # マルチページ対応
    for i, page in enumerate(ImageSequence.Iterator(img)):
        page = page.convert("RGB")
        basename_without_ext = os.path.splitext(os.path.basename(src))[0]
        dstImg.append(os.path.join(dstPath, '{}_{}.jpeg'.format(basename_without_ext,i)))
        page.save(dstImg[-1], format='jpeg')
#       page.save(dstImg[-1], quality=95)

    return dstImg

try:
    target_ext  = ['.JPG','.JPEG','.PNG','.GIF','.BMP','.TIFF','.TIF']  # PDFにするファイルの拡張子
    alpha_ext   = ['.PNG','.GIF','.BMP','.TIFF','.TIF']                 # JPEGに変換するファイルの拡張子
    output_ext  = '.pdf'

    root = tk.Tk()
    root.withdraw()

    for argv_idx in range(1,len(sys.argv)):
        filename = sys.argv[argv_idx]
        root, ext = os.path.splitext(filename)
        for ext_idx in range(len(target_ext)):
            if ext.upper() == target_ext[ext_idx]:
                srcImages = [filename]

                # 透過処理を外す、またはサイズ縮小するファイルかチェック
                for ae in alpha_ext:
                    if ae == ext.upper():
                        srcImages = RemoveAlpha(filename)

                # PDF 変換処理
                with open(root + output_ext,'wb') as f:
                    f.write(img2pdf.convert(srcImages))

                # 一時ファイルを削除
                for srcImage in srcImages:
                    if srcImage != filename:
                        os.remove(srcImage)
    
    if len(sys.argv) <= 1:
        output_ext_mes = ''
        for ext_idx in range(len(target_ext)):
            if output_ext_mes != '':
                output_ext_mes += ' | '
            output_ext_mes += target_ext[ext_idx].lower()

        messagebox.showinfo('確認', 'PDFに変換する画像ファイルをドラッグ＆ドロップしてください\n※拡張子は [ {} ] のみ'.format(output_ext_mes))
    else:
        messagebox.showinfo('確認', '処理が完了しました\n画像ファイルと同じ場所にPDFが作成されています。')

except Exception as e:
    messagebox.showerror('エラー', e)
```
LaravelでIPによるアクセス制限をする

#はじめに
管理画面であったり開発環境であったり、アクセス拠点元のIPで制限を行いたい場面に出くわすことがあるかと思います。
.htaccessファイルで制限したり、AWSのALB（Application Load Balancer）で大本から制限する事もできますが、
手軽に実装しつつも画面によってIP制限を切り分けたい～だとか、許可されないIPの場合でも任意のメッセージを表示してあげたい～…
といった場合は、ミドルウェアで実装してrouteに対して割り当ててやるのが一番簡単かなと思います。

Laravelのバージョンは5.7にて確認しています。

#Middleware
本番環境とステージング環境の場合だけ、特定のIPアドレスでアクセスを制限してみます。

下記では予め許可されたIPの一覧を配列に用意しておき、アクセス元のIPが配列に含まれているかどうかで制限しています。
どのIPがどの拠点か分かるようにIPアドレスと共に拠点の名前などを残しておくと管理する上で便利でしょう。

今回は許可されていないIPアドレスの場合は403エラーへ飛ばしています。

```php:app\Http\Middleware\CheckIPAddress.php
<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\App;

class CheckIPAddress
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @param  string|null  $guard
     * @return mixed
     */
    public function handle($request, Closure $next, $guard = null)
    {
        if (App::environment(['staging', 'production'])) {
            $ip = [
                ['id' => 1, 'ip' => '192.168.0.1', 'name' => 'office-1'],
                ['id' => 2, 'ip' => '192.168.0.2', 'name' => 'office-2'],
                ['id' => 3, 'ip' => '192.168.0.3', 'name' => '自宅'],
            ];

            // check your ip
            $detect = collect($ip)->contains('ip', $request->ip());

            if (!$detect) {
                abort(403);
            }
        }

        return $next($request);
    }
}
```

次に、上記のミドルウェアを登録します。

routeに対してミドルウェアを割り当てる場合はルートミドルウェアに登録し…

```php:app\Http\Kernel.php
<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'checkIP' => \App\Http\Middleware\CheckIPAddress::class,
    ];
```

routeでミドルウェアを割り当ててやります。

```php:routes\web.php
Route::group(['middleware' => 'checkIP'], function () {
    Route::get('mypage/{slug}', ['uses' => 'MypageController@index'])->name('mypage.show');
});
```

そもそもアプリケーションの全HTTPリクエスト対して制限したいんだ、という場合はグローバルミドルウェアに登録すればOKです。

```php:app\Http\Kernel.php
<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\CheckIPAddress::class,
    ];
```

#おわりに
調べれば同じような情報はいくらでも出てくるんですが、自分用の備忘録として…
C言語入門　データ型の考慮

#c言語におけるデータ型への配慮

今までpythonしか触ったことがなく、最近になってc言語の勉強を始めたのだがデータ型への配慮が足りなくて、ケアレスミスを起こした。自分への戒めとしてここに記事にしておく。

~~c言語では異なるデータ型同士で演算を行うときにはキャストが行われ、片方のデータ型に変換が行われる。~~
　変数やオブジェクトを宣言する時に定義した型とは型の方に変換することを型変換という。型変換には明確に記述しないでも自動で行われる_暗黙的型変換_と_明示的型変換（キャスト）_がある。
暗黙的型変換では基本的に型の精度が高い方に合わせられるが、商を求める場合などでは、暗黙的型変換が行われない場合があり、その場合望んだ結果が得られない場合がある。そこで、エラーを避けるためにキャスト（明示的型変換）を行う。

　これには明確なランクがある。ランクも重要であるが今回私の犯した間違いはそこではないので割愛する。

　型変換はchar型にも対応しており、int型からchar型に型変換することもできる。また、ポインタ型へのキャストもある。ポインタについては現在勉強中なので、ポインタについての記事を書いた時にそちらの方で説明できればと思う。

　混合演算の勉強過程で以下のようなコードを書いた。

````diff_c
main()
{
    char c1, c2, c3;
    int i1, i2, i3;
    float f1, f2, f3;
    
    c1 = 'x';
    c2 = 1000;
    c3 = 6.02e23;
    printf("%c %c %c\n", c1, c2, c3);
    
    i1 = 'x';
    i2 = 250;
    i3 = 6.02e23;
    printf("%c %c %c\n", i1, i2, i3);
    
    f1 = 'x';
    f2 = 14;
    f3 = 1.603e19;
    printf("%c %c %c\n", f1, f2, f3);
}
```
このコードの実行結果は以下のようになる。

```
x \350 \300
x \372 7
  7
Program ended with exit code: 0
```
このコードの間違いはフォーマット指定子が全て%cになっておりcharにしか対応できなくなっている点にある。
正しいコードは以下のようになる

```diff_c
main()
{
    char c1, c2, c3;
    int i1, i2, i3;
    float f1, f2, f3;
    
    c1 = 'x';
    c2 = 1000;
    c3 = 6.02e23;
    printf("%c %c %c\n", c1, c2, c3);
    
    i1 = 'x';
    i2 = 250;
    i3 = 6.02e23;
    printf("%d %d %d\n", i1, i2, i3);
    
    f1 = 'x';
    f2 = 14;
    f3 = 1.603e19;
    printf("%f %f %f\n", f1, f2, f3);
}
```
実行結果は

```
x \350 \260
120 250 989593624
120.000000 14.000000 16029999923671859200.000000
Program ended with exit code: 0
```
となる。
これは1行目が全て文字型(char)、2行目が整数型(int)、3行目が浮動小数点型(float)で表されている。

ちなみに、全て正しいフォーマット指定子で出力してあげると以下のようなコードと結果になる。

```diff_c
main()
{
    char  h1;
    int h2;
    float h3;
    
    h1 = 'x';
    h2 = 1000;
    h3 = 1.603e19;
    
    printf("%c %d %f\n", h1, h2, h3);
    
}
```
```
x 1000 16029999923671859200.000000
Program ended with exit code: 0
```

参考URL

https://www.sejuku.net/blog/25737
DMS-59　というコネクタは普及しているのだろうか？？？

[DMS-59 - Google 検索](https://www.google.com/search?q=DMS-59&oq=DMS-59&aqs=chrome..69i57j0l7.1031j0j7&sourceid=chrome&ie=UTF-8)
ググって
[DMS-59 - Wikipedia](https://ja.wikipedia.org/wiki/DMS-59)
wikiみると

```wiki
DMS-59 (Dual Monitor Solution, 59 pins) とはデスクトップ用PCグラフィックボードに用いられる特殊ポートであり、主にNVIDIAのNVSシリーズの一部やAMDのFireMVシリーズの一部に搭載される。文字通りデュアルモニター機能を備えたグラフィックスボードの場合、出力ポートが2個必要となるが、ロープロファイルサイズでは制限が生じるので、2ポートに分岐するための特殊なポートの規格が存在する。

但し、見た目は26ピンのDVIとは違い59ピンのものとなっている為、使用の際は別途モニターを2台接続できるように設計されている、専用の変換コネクター（DVI-DまたはVGA対応）を用意しておく必要がある。
```
との事
10分で完了、エンジニアの為のWordPressサーバーお引越し手順

#0 前提
この記事はエンジニア向けに解説しています。
FTPの利用やレンタルサーバーの用意、DB、その他、エディタの利用等の知識がある前提で解説していきます。


・サービスのソースコード
・DBのデータ

この2つを**旧サイト**から**新サイト**へ移行することが全体の流れになります。

今回は旧サーバーからロリポップサーバーへ引っ越す流れを例として使用します。


#1. 旧サイトで行うこと
##1-1. サイトのディレクトリをまるっとDL
FTP等で接続し、サービスのディレクトリをまるごとDLします。
![グループ 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54862/7b0078df-c2bf-7b2c-b1ec-cd8d68463aeb.png)

今回FTP接続に使用したのは**Cyberduck**
https://cyberduck.io/

##1-2. phpMyAdminでSQLをエクスポート
phpMyAdminを利用しSQLをエクスポートします。
phpMyAdminにログイン後、エクスポートのタブを選択、実行をクリックします。
![グループ 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54862/da50d165-ef99-40d9-e1ce-63a10f67709e.png)

## 1章のまとめ
・サービスのソースコード
・DBのデータ
の2つを取得することができたので、次に新サイトへと移行を進めます。


#2. 新サイトで行うこと
新しいサイトでは、
・新規のDB
・新規のwp-config.php
を用意したのちに、
・サービスのソースコードを設置
・DBのデータを流し込む

このような流れで進めます。

## 2-1. 仮設WordPressの用意
新しいDBの作成とwp-config.phpの作成をサクッと済ますために仮設でWordPressを用意します。

**①新規のDB**
**②新しいDBとの紐付けが指定されたwp-config.php**

この2つ以外は不要なので後の工程で仮説WordPressは削除します。

レンタルサーバーで用意されている**「WordPress簡単インストール」**等の仕組みを使って新しくWordPressをインストールしてください。

![グループ 20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54862/cae6237e-c60b-d70e-4be4-0ecd6d640985.png)



ロリポップの場合は「サイト作成ツール」→「WordPress簡単インストール」より新しいWordPress環境を用意することができます。

指定する公開フォルダ名は旧サイトからDLした「サイトのディレクトリ名」を指定してください。

※ここでの目的はDBを新規作成し、wp-config.phpでDBとの紐付けを行うことです。

## 2-2. wp-config.phpをダウンロード&修正
インストール後、作成されたwp-config.phpを一度ローカルにダウンロードします。
FTP等で新しい環境にログインし、前行程で仮設で作成したWordPressのwp-config.phpをダウンロードしてください。

ダウンロードが済んだら、wp-config.phpに以下を書き加えます。

```
define('WP_HOME','https://あなたのサイトURL');
define('WP_SITEURL','https://あなたのサイトURL');
```

## 2-3. サイトのディレクトリをアップロード
旧サイトからDLしたサービスのディレクトリをアップロードします。
FTP等で新環境にログイン後、仮設で用意したWordPressは用済みなので削除し、
同じ公開フォルダ名でサイトをアップロードします。

## 2-4. wp-config.phpをアップロード
ダウンロード&修正しておいたwp-config.phpをアップロードします。


## 2-5. DLしたSQLファイルを修正
続いてSQLファイルの修正を行っていきます。
WordPressはサイトのURLや画像のパス等もテーブル内のデータで管理しているので、
旧サイトのURLを指しているデータを新サイトのURLに書き換える必要があります。

**① テーブル名の修正**
接頭語を新サイトの接頭語に修正します。
DBを新規で作成したので接頭語が新しくなります。

新しい環境のphpMyAdminにログインし、テーブルの一覧を確認してください。〇〇_のようにテーブル名の序盤に共通の文字列が設定されているので、その文字列をコピーします。

![グループ 24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54862/cabf1510-1745-f0d6-01e7-a142859ead47.png)


SQLファイルをエディタで開き、閲覧するとテーブル名の頭に共通の文字列が含まれているのが確認できるかと思います。
その接頭語で検索をかけ、一括置換します。

SQLファイルの接頭語は旧サイトのテーブルの接頭語なので、新サイトに合わせて接頭語を上書きします。
先程コピーした文字列を旧サイトの接頭語に当たる箇所に上書きしてください。

**② データの修正**
データ内に、URLを含むデータがあるので、旧サイトのURLを新サイトのURLに修正します。
旧サイトのURLで検索をかけ、新しいサイトに一括置換してください。

VSCodeで一括置換する場合は以下の記事を参考にするとよいです。
https://qiita.com/hayatokunn/items/76b41e00f114cf9a9f14

## 2-3. phpMyAdminでSQLをインポート
修正が完了したらSQLファイルを新しい環境のDBにアップロードします。
新しい環境のphpMyAdminにログインし、インポートを選択し、SQLファイルをアップロードしてください。
![グループ 21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54862/a84fa035-9675-7872-0901-ac2d8b3f57c6.png)



すでにあるテーブルは一度すべて削除し、DBのテーブルが0件の状態でSQLをインポートします。
インポートが無事成功したら引っ越し完了です。
Ajax,JSON

#非同期通信とは
通常HTTPを使って、データ通信を行います。クライアントからリクエストを送ったときに（リクエスト）中は、新たにリクエストを送ることはできません。そこで、Ajaxを使うことで、リクエストを出してから、レスポンスを受け取るまでに処理を完了することができます。ページ変移をすることなく処理を実行することができます。
Javascript側がWebサービスにリクエストを送り、返されてきたデータもJS自身が受け取るという流れです。したがって、ページを変移するというユーザーへのストレスがないのがメリットです。

#Ajaxの記述方法

```index.js
$.ajax ({url : "データのURL", data_type: "json"})
```
urlには、ダウンロードしたいURL。date_typeにはjsonを追加します。

 http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

公式のページがわかりやすかった。


```index.js
$(document).ready(function() {
    //ファイルの読み込み
    $.ajax({url: 'data.json', dataType: 'json'})
    .done(function(data) {
        data.forEach(function(item, index) {
            if(item.crowded === 'yes') {
                const idName = '#' + item.id;
                $(idName).find('.check').addClass('crowded');
            }
        });
    })
    .fail(function(){
        window.alert('読み込みエラー');
    });

    //クリックされたら空き席状況を表示
    $('.check').on('click', function() {
        if($(this).hasClass('crowded')) {
            $(this).text('残席わずか').addClass('red');
        } else {
            $(this).text('お席あります').addClass('green');
        }
    });
});
```
ダウンローされたデータ（ajax）は関数（data）に保存されます。データが保存された後の処理に移ります。
dataの中には、JSONデータが入っています。

```data.json
[
    {"id":"js","crowded":"yes"},
    {"id":"security","crowded":"no"},
    {"id":"aiux","crowded":"no"}
]
```
この中身は、１つの配列の中に、３つのオブジェクトがあります。
これら、配列の内容を呼び出すには、forEachメソッドを使用します。
コンソールに出力するために、呼び出します。

#JSONとは
ざっくり行ってしまうと、配列とオブジェクトの融合ですね。
配列のように[]で囲まれていますね。更に、オブジェクトのように｛｝で囲まれています。
このJSONデータの中身は、３つの配列で成り立っていて、中身は、２つのプロパティのオブジェクトで成り立っています。
すべての値をダブルクオーテーションで囲む形になっています。

#要素にクラス属性を追加する
関数内のitemにはJSONのオブジェクトが入っています。

ここからif文での条件分岐を行います。
trueになったときに、定数　idNameにid名文字列を代入します。(#js)

```index.js
$('セレクタ<idName>').find('.check').取得した要素<addClass>.('クラス名<crowded>')
```

取得した要素にクラスがあるかどうかを調べる

```index.js
$('セレクタ名<this>').hashClass('クラス名<crowded>')
```

>[確かな力が身につくJavaScript「超」入門 第2版](https://book.studio947.net/title/3719/)
Gatsby.jsでGraphqlを使ってSEO対策する方法

今回もGatsby.jsについての記事を書いていこうと思います。

今回の内容は、Graphqlからデータを取得しそれをメタタグとして、タイトルやらディスクリプションを設定してSEO対策しようって話です。

早速ですが説明していきます。

# パッケージのインストール

まずは必要なパッケージをインストールしてみましょう。

```powershell
npm i gatsby-plugin-react-helmet react-helmet
```

# gatsby-configの設定

そしたら以下のように``gatsby-config.js``を設定。

```
module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
  ],
  siteMetadata: {
    title: "test",
    description: "テストサイトです"
  },
}
```

# コンポーネントの作成

``src\components\SEO.jsx``を作成して以下のようにコンポーネントを作成。

```jsx
import { graphql, useStaticQuery } from 'gatsby'
import React from 'react'
import { Helmet } from 'react-helmet'

const SEO = () => {
  const { site } = useStaticQuery(query)

  return (
    <>
      <Helmet>
        <html lang="ja" />
        <title>{site.siteMetadata.title}</title>
        <meta name="description" content={site.siteMetadata.description} />
      </Helmet>
    </>
  )
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`

export default SEO
```

あとはこれをLayoutの中身に呼び出してあげましょう！

```Layout.js
import React from 'react'
import { SEO } from '@/SEO.js'

const Layout = (props) => {
  return (
    <>
      <SEO />
      // 省略
    </>
  )
}

export default Layout
```

これで各ページごとにタイトル、ディスクリプションの設定を行うことでSEO対策ができます！

意外と簡単。

Thank you for reading

# 参考記事

・[もう迷わないGatsby SEO メタタグの設定方法](https://reffect.co.jp/react/gatsby-react-helmet-seo#i-2)
【論文紹介】Implicit Latent Variable Model for Scene-Consistent Motion Forecasting(ECCV2020)

##はじめに
自動運転を実現するアプローチの１つとして、センサーデータから自動運転車両の未来軌跡予測(生成)までをend-to-endで実装する手法が研究されています。本記事では、自動運転車両が他車両とのインタラクションのある環境下で自動運転を実現する技術について、Uber ATGのSergioさんが執筆した論文を紹介します。図番号と文献番号は論文内の記載のまま表記します。
####Implicit Latent Variable Model for Scene-Consistent Motion Forecasting
ECCV 2020
Paper: https://www.ecva.net/papers/eccv_2020/papers_ECCV/papers/123680613.pdf

この論文をざっくり言うと、グラフニューラルネットワークを使い、自動運転車両と周辺車両の関係性を潜在空間にエンコードし、自動運転車両とその周辺車両の未来軌跡予測を生成する技術です。（論文の理解不足から誤った記述があるかもしれませんが，ご了承ください．）

##論文のポイント
* Lidarのセンサーデータと地図情報を入力とし、他車両を認識し特徴量として出力させる。
* 自動運転車両と他車両の特徴量から提案手法のImplicit Latent Variable Model with Deterministic Decoder(ILVM)によって、自動運転車両と周辺車両の分布ではない(文中はdeterministicと記述)複数のの未来軌跡を生成(サンプリング)する。
* 生成されたサンプルからSOTAのモーションプラン手法[49]を適用し、安全性と快適性を評価するコスト関数によって最適なサンプルを選択する。(このコスト関数の説明は記述されていない）

##手法の構成要素
####Actor Feature Extraction
![fig3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1351474/6b3915c7-5962-9e63-4591-0e9ec676b93d.png)
図３は過去の時系列センサーデータと高精度地図から車両ごとの特徴量を抽出する流れを説明しています。この部分で物体(車両)認識を行い、車両毎の特徴量を出力させている。モデルは[10][54]を参考にCNNベースのDNNを実装している。
####Inplicit Latent Variable Model
![fig4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1351474/555094b2-c317-ae79-8928-f93b31fc090a.png)
この部分が論文のContributionである。Fig.4によるとコアの部分はScene Interaction Module(SIM)であり、任意の車両と他の車両間の関連性をグラフで表現されている。この表現方法をエンコードおよびデコードに使い、SIMを複数サンプリングし全車両の複数の未来軌跡を出力している。

####Motion Planner
自動運転車両を制御するために[49]の手法によって最適なサンプルを選択している。下記の式のcは安全性と快適性を評価するコスト関数であり、この関数の設計によって自動運転車両の性格(攻めた運転とか慎重な運転とか)を如何様にも持たせることができる。本論文の第4章実験評価ではその中身の説明はない。
![equation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1351474/f18231dc-28a2-dc0a-1924-9fbe29d756da.png)


##実験評価
![table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1351474/c8aff58d-b8a3-e952-8d11-56a2eac0aa19.png)
Collisionは5秒先までに発生する衝突率であり、L2 humanは5秒先までの自動運転車両と他車両との距離であり、他の項目は論文中に詳しく説明はないが、おそらく快適性を評価する指標と思われる。結論として、安全性と快適性ともにBaselineを上回っていると主張している。
##おわりに
車両(エージェント)間の関係性をグラフニューラルネットを利用し、生成モデルとして学習させサンプル生成させるところまではend-to-endであるが、後処理において自動運転車両の未来軌跡を独立して選択できることが非常に面白いとおもいます。これによって、最終的な出力はend-to-endで決定されず、任意の手法で意思決定を実装することができます。このことは[39]で既に研究された方法とコンセプトは同じですが、その計算過程のexplicitnessのレベルが異なります。この差が車両運動のパフォーマンスへどれくらい影響するか検証されると良いと思います。
##参考文献
論文記載の文献番号で記載しています。
[10]Casas, S., Luo, W., Urtasun, R.: Intentnet: Learning to predict intention from raw sensor data. In: Conference on Robot Learning (2018)
[39]Okamoto, M., Perona, P., Khiat, A.: DDT: Deep driving tree for proactive planning in interactive scenarios. In: 2018 21st International Conference on Intelligent　Transportation Systems (ITSC). pp. 656–661. IEEE (2018)
[49]Sadat, A., Ren, M., Pokrovsky, A., Lin, Y.C., Yumer, E., Urtasun, R.: Jointly learnable behavior and trajectory planning for self-driving vehicles. arXiv preprint　arXiv:1910.04586 (2019)
[54] Yang, B., Luo, W., Urtasun, R.: Pixor: Real-time 3d object detection from point　clouds. In: Proceedings of the IEEE CVPR (2018)
アドミニストレーター認定の準備: セキュリティとデータ管理 ⇒ データ管理の確認

１．Salesforce 認定アドミニストレーター試験のうち、「データの管理」セクションが占める割合は何パーセントですか?
２．Salesforce 認定アドミニストレーター試験の「データの管理」セクションで取り上げる主なトピックはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/2d6661d5-706c-c526-a9f9-6f0acc69d3ce.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/49d3bb5e-e44a-172b-7309-816f8593b5a5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/a00a0c8c-09de-56ce-3682-3afd383ff0f9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/a7709a11-6a60-7787-9109-a7e4685c457f.png)
PhpStorm で @internal アノテーションを活用する方法

PHP には現在、クラスの利用をパッケージプライベートアクセスに制限する方法がありません。他人に直接使われたくない内部用クラスを切り出すのを躊躇してしまいます。

Doc コメントでクラスに `@internal` アノテーションを付けると、むやみに外から使わないでほしい意図を表明はできます。が、これだけでは気休めにしかなりません。

```php
<?php
namespace App\Module1;

/**
 * @internal
 */
class InternalClass
{
}
```

PhpStorm でこのアノテーションをじっさいに活かす方法を紹介します。

PhpStorm は `@internal` を名前空間ローカルではなく、パッケージ全体のローカルな内部クラスとして扱います。ここでいうパッケージというのは、vendor のサブフォルダに入るディレクトリ粒度のイメージです。

プロジェクトの src 内にある「別のパッケージのように扱いたい横並びのディレクトリ」を、それぞれ再度、Source Root と定義すると、そこから下が独立したパッケージのように認識されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/cafd41d4-0476-89a1-75b0-86298830f274.png)

Module1 と Module2 を異なるパッケージとすると、Preferences の Directories はこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/2d7d214e-9caa-b32c-cbed-abab91e2eedb.png)

同一パッケージ内でならなんの警告もなく利用できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/0c823b19-828e-2655-c545-96621a691fea.png)

しかし、異なるパッケージからの InternalClass の名指しは警告になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/7396a1e4-5928-6caa-675b-90414273a5fa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/65ec9148-57e6-ae3e-45ab-3126e74a2f38.png)

独立したライブラリのようなきれいに切り出した部分にそれぞれ Source Root 定義をしておけば、うっかり内部利用専用のクラスを使ってしまうミスに気づくのに役立ちます。

という警告のサポートがあるとはいえ、コード補完にはサジェストされるし、プロジェクトツリーでは他のクラスと同じアイコンに見えるので、いざ書いてみるまではダメが出るかわかりません。

他人の理解を促す (外からどのクラスを使ったらいいのか初見でわかるなど) には向いていないかもしれませんが、自分が `@internal` を付けて表明するべきかどうかを考える習慣づけにはなると思います。
Swiftでスマホ / PC用ページのスクレイピング切り替え

# したいこと
**「SwiftからHTMLをリクエストするときに、スマホ用ページとPC用ページを切り替えたい」**

同じURLのサイトでもPCでみた時と、スマホでみた時はレイアウトが変わっている。
スマホ版は情報を少なくするため、PC用のHTMLだと一発で取れた値でも、スマホ版では隠されていることがある。
場合によって、PC版とスマホ版のアクセスを切り替える。


# PC版とスマホ版は何が違う？

URLをリクエストするときにヘッダに `User-Agent` という情報を付加して、どちらのHTMLを要求するかを決めている。
なので、スマホ版のHTMLが欲しければスマホのUser-Agentを、PC版のHTMLが欲しければPCのUser-Agentを付加しなければいけない。

User-Agentに関してはこちらを参照した。
https://qiita.com/kapiecii/items/093ffd6f0b09ad775250

# 方法

* URLリクエストにはAlamofireを使用した。
* HTMLのparseには、Kannaを使用した。


```swift:
import Alamofire
import Kanna
```

```swift:
override func viewDidLoad() {
    let url = "https://qiita.com/"
    let parameters: Parameters = [:]

    // PC版
    let headers: HTTPHeaders = ["User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"]

    // スマホ版
    // let headers: HTTPHeaders = ["User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"]

    AF.request(url,
            method: .get,
            parameters: parameters,
            encoding: URLEncoding(destination: .queryString),
            headers: headers
    ).responseData(completionHandler: { (data) in
        if let d = data.data {
            self.parse(data: d)
        }
    })
}

func parse(data: Data) {
    do {
        let articles = try HTML(html: data, encoding: .utf8).css("article")
        for article in articles {
            if let h2 = article.css("h2").first?.text {
                print(h2)
            }
        }
    } catch {
        print("error while parsing")
        print("data:", data)
    }
}
```


# 感想

`Alamofire.request` じゃなくて `AF.request` なのにちょっとつまづいた。
あまり記事がなかったので、最近の変更？
PHPのDockerイメージでpathinfo関数がマルチバイト文字を扱えない問題

`setlocale(LC_ALL, 'ja_JP.UTF-8');`しても、そもそもja_jp.UTF-8が入っていませんでした。

備忘録代わりに記録しておきます。

```Dockerfile
RUN apt-get -y install ...(必要なパッケージ類)... locales # localesがないと以下がコケる
RUN localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG="ja_JP.UTF-8" \
    LANGUAGE="ja_JP:ja" \
    LC_ALL="ja_JP:UTF-8"
```
NSX-T 3.1におけるロードバランサーのリソース情報（Edge Nodeのサイズごとに最大値など）

#1. はじめに
VMware社のdocsには、NSX-T 2.4までは[ここ](https://docs.vmware.com/en/VMware-NSX-T-Data-Center/2.4/administration/GUID-19B12230-8BF4-4AF7-9EB7-3701B0A0A439.html)にあるようにSmall/Medium/LargeのLoad Balancerでそれぞれどれぐらいのpool memberを持てるか、などを表にしてくれていたのだが、NSX-T2.5からは[Configuration Limits](https://configmax.vmware.com)を見ろとしか書いていない。Configuration Limitsはそのままでは読みにくいので、表にしてみた。ただし、以下の表は**Edge Nodeに他のサービスが載っている場合の影響については考慮されておらず、あくまでサポートされる最大値**であることに注意。

なお、以前のバージョンからの違いは以下の通り。

- NSX-T 2.5からは（本番環境での利用は非推奨だが）`NSX Edge node VM - Small`での`Small Load Balancer`がサポートされるようになった。
- NSX-T 2.5からは`NSX Edge node VM - Medium`での`Small Load Balancer`が1から10に増加した。また`NSX Edge node VM - Medium`での`Medium Load Balancer`がサポートなしから1に増加した。
- NSX-T 3.0からは`Extra Large Load Balancer`と`NSX Edge node VM - Extra Large`がサポートされるようになった。






#Load Balancer Scale for Load Balancer Service(NSX-T 3.1)

|Load Balancer Service| Small Load Balancer  |  Medium Load Balancer |Large Load Balancer |Extra Large Load Balancer |
|:--|:---|:--|:--|:--|
|Number of virtual servers per load balancer |20|100|1000|2000|
|Number of pools per load balancer |60|300|3000|4000|
|Number of pool members per load balancer |300|2000|7500|10000|


# Load Balancer Scale for NSX Edge Node(NSX-T 3.1)

|Load Balancer Per NSX Edge Node| Small Load Balancer  |  Medium Load Balancer |Large Load Balancer |Extra Large Load Balancer |Maximum Pool Members|
|:--|:---|:--|:--|:--|:--|
|NSX Edge node VM - Small<br>[本番環境での利用は非推奨](https://docs.vmware.com/en/VMware-NSX-T-Data-Center/3.1/administration/GUID-19B12230-8BF4-4AF7-9EB7-3701B0A0A439.html)|1|N/A|N/A|N/A|N/A|
|NSX Edge node VM - Medium|10|1|N/A|N/A|2000|
|NSX Edge node VM - Large|40|4|1|N/A|7500|
|NSX Edge node VM - Extra Large|80|8|2|1|10000|
|NSX Edge node Bare Metal|750|75|18|9|30000|



#Edge Node Resource Requirements(NSX-T 3.1)
https://docs.vmware.com/en/VMware-NSX-T-Data-Center/3.1/installation/GUID-22F87CA8-01A9-4F2E-B7DB-9350CA60EA4E.html
https://docs.vmware.com/en/VMware-NSX-T-Data-Center/3.1/installation/GUID-22F87CA8-01A9-4F2E-B7DB-9350CA60EA4E.html

|Appliance Size|Memory|vCPU|DISK space|用途|
|:--|:---|:--|:--|:--|
|NSX Edge node VM - Small|4GB|2|200GB|Proof-of-concept deployments only.|
|NSX Edge node VM - Medium|8GB|4|200GB|Suitable when only L2 through L4 features such as NAT, routing, L4 firewall, L4 load balancer are required and the total throughput requirement is less than 2 Gbps.|
|NSX Edge node VM - Large|32GB|8|200GB|Suitable when only L2 through L4 features such as NAT, routing, L4 firewall, L4 load balancer are required and the total throughput is 2 ~ 10 Gbps. It is also suitable when L7 load balancer, for example, SSL offload is required.|
|NSX Edge node VM - Extra Large|64GB|16|200GB|Suitable when the total throughput required is multiple Gbps for L7 load balancer and VPN.|
|NSX Edge node Bare Metal|32GB(Minimum)<br>256GB(Recommended)|8(Minimum)<br>24(Recommended)|200GB|
MPDyn(分子動力学計算)

# MPDyn
## 1. インストール
1. 以下のMPDyn公式サイトからMPDynの圧縮ファイルをダウンロードする。  
[http://www.chembio.nagoya-u.ac.jp/labhp/physchem1/member/wshinoda/MPDyn2/index.html](URL)  
1. 以下のコマンドで圧縮ファイルを展開する。  
```
tar -xvf [圧縮ファイル名]
```  
展開するとMPDynPFF(またはMPDyn2)というディレクトリができる。  
1. MPDynPFFに移動し、binというディレクトリを以下のコマンドで作る。  
```
mkdir bin
```  
1. MPDynPFFの下にあるsourceに移動し、gnuコンパイラの場合は以下の前者、intelコンパイラの場合は後者のコマンドを実行する。  
```
make -f Makefile.gnu -j 8
```  
```
make -f Makefile.intel -j 8
```  
※intelコンパイラを用いた方が計算が速くなるので推奨  
ビルドが正常に終了するとbinのディレクトリにMPDynの実行バイナリMPDynSが作られる。  
MPDynではその他にも様々な便利なツールを使うことができる。（公式HP参照)  
これらをビルドするには以下のコマンドをsourceディレクトリで入力する  
```
make -f Makefile.gnu TOOL -j 8
```  
```
make -f Makefile.intel TOOL -j 8
```  
ビルドが正常に終了するとbinディレクトリに様々なツールの実行バイナリが作られる。  
  
## 2. 分子動力学計算  
MPDynで分子動力学計算を行う際には以下のものが必要
Rails includesした子テーブルの要素をpluckする

検索しても、有るようで無かったのでメモがてらに記載しておく


```
Client.where(id: ids).pluck(:name)
```

みたいな書き方が一般的だが、シンボルを使うとincludes等を使った際に、どう記述してよいのか悩む時が有る。

```
Client.includes(:client_sheet).where('client_sheets.id in (?)', cs_ids).pluck('id', 'client_sheets.name')
```

その場合は、シンボルではなくて、文字列にして記載すればOK。その際は、親に対して子が1つであっても`client_sheets`の様に複数形にする必要が有るので注意。