OmniAICreator/Qiita-1.07M huggingface dataset:
BERTを用いた日本語文書分類で起きたエラーとその解決方法

# 元の記事
https://qiita.com/yamaru/items/527ca7d814534beca56a

こちらの記事を参考にして日本語の文書分類を試したのですが、いくつかのエラーが出てきて詰まってしまったのでその報告と解決方法を載せます。

# 作業環境
|項目|バージョン等|
|--|--|
|OS|mac Mojave|
|python|3.8.2|
|pyenv|1.2.26|
|pandas|1.3.4|
|scikit-learn|1.0.1|
|transformers|4.12.2|
|torch|1.10.0|

# エラー1 (pandasのwarning)
pandasに関するエラーです。
### エラー内容
```
/Users/local/.pyenv/versions/3.8.2/lib/python3.8/site-packages/pandas/compat/__init__.py:124: UserWarning: Could not import the lzma module. Your installed Python is incomplete. Attempting to use lzma compression will result in a RuntimeError.
  warnings.warn(msg)
```
調べてみたところ、pyenvでpythonを使っているときにこのエラーが出てしまうみたいです。
これはエラーではなくwarningであり、出たままでも問題なく動くため解決方法はここでは割愛します。
（解決方法などは以下のサイト等に記載あり）
https://zenn.dev/grahamian/articles/f292163325653dbe2c42

# エラー2 (fugashiの不足)
使っている日本語BERTモデルに必要なモジュールがないって怒られたのでそれを入れる必要がありました。
### エラー内容
```
ModuleNotFoundError: No module named 'fugashi'
```
### 解決方法
pipでfugashiをインストールするだけです。（mecabとかcabochaもそうだけど、なんで食べ物の名前つけるんでしょうね...笑）

```
$ pip install fugashi
```

#エラー3 （ipadicの不足）
モジュール不足2個目です。
### エラー内容
```
ModuleNotFoundError: The ipadic dictionary is not installed. See https://github.com/polm/ipadic-py for installation.
```
### 解決方法
こちらもモジュールをインストールするだけです。

```
$ pip install ipadic
```
# エラー4 （dropoutの引数がおかしい）
元の記事とのバージョン違いによるエラー。
なかなか調べるのに苦労しました...。
### エラー内容
```
TypeError: dropout(): argument 'input' (position 1) must be Tensor, not str
```
### 解決方法
```
# BERT分類モデルの定義
class BERTClass(torch.nn.Module):
  def __init__(self, pretrained, drop_rate, otuput_size):
    super().__init__()
    self.bert = BertModel.from_pretrained(pretrained)
```
上は、元の記事でBERTClassを定義しているところの一部です。
こちらの最終行を以下のように変更します。

```
self.bert = BertModel.from_pretrained(pretrained, return_dict=False)
```

# まとめ
いくつかエラーが出て結構大変でしたが、なんとか動かすことに成功しました。同じエラーにはまっている方はぜひ参考にしてください。

# 参考記事
* https://qiita.com/yamaru/items/527ca7d814534beca56a
* https://zenn.dev/grahamian/articles/f292163325653dbe2c42
* https://qiita.com/Afo_guard_enthusiast/items/88ce7d9610073ac1eca2
* https://github.com/huggingface/transformers/issues/8879

# 追記
下のコマンドで、fugashiやipadicなど必要なものを一括でインストールできるようです！

```
pip install transformers["ja"]
```
spring が読み込まれない

## 開発環境
ruby 2.6.5
Ruby on Rails 5.2.5
Bundler 2.2.24

## 本題

以前いろいろあってruby をアンインストールした
その関係で rails を再インストール

その後

```
rails new アプリ名 -d postgresql -d --skip bundle`
```

をすると下記のエラー

```
bundler: failed to load command: spring (/Users/isamutatsuya/workspace/nokogiriapp/vendor/bundle/ruby/2.6.0/bin/spring)
```

`bundle install` をスキップしてるのになんでこんなエラーが出るかは不明
しかしどうやら `spring` が読み込まれていない

___

https://qiita.com/KONTA2019/items/1d2fc90b5020486b0504

上の記事を参考にして

```
gem update --system
```

するとエラーがでなくなった

`bundler` のバージョンと `gem
 のバージョンの関係のエラーみたい
dockerを使ってLaravel６系の環境構築するとき、つまづいたディレクトリ階層について。【初投稿】

【Dockerを使って環境構築しようとしたきっかけ】
チーム開発する上でDockerを使う機会があると聞いたので、就活のポートフォリオでLaravelの環境構築をDockerを使ってみたいから。

（参考記事）
https://www.engilaboo.com/how-to-use-docker-for-laravel/

今回、以下の環境を構築する。
Laravel 6.0
PHP 7.3
Nginx
MySQL 5.7

まずディレクトリの作成。(今回はdocumentの下でtestディレクトリを作成)
$ cd document
$ mkdir test
$ cd test

testディレクトリに以下のファイルを作成。
php.ini
default.conf
Dockerfile
docker-compose.yml

４つのファイルの記述を記事を参考にコピペして以下のcomposeコマンドを実行。
$ docker-compose up -d

ここでエラーが発生。
エラー内容：docker-compose.ymlのBildで設定したパスが見つからない。
![スクリーンショット 2021-11-04 14.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123646/b934b5eb-06c4-9615-ebc5-1f3077ebd07c.png)


ツリー構造にて誤りがあった。
Docker.file
php.ini
こちらのファイルをdocker/phpの階層下に置くこと。

default.conf
こちらのファイルをdocker/nginxの階層下に置くこと。

以下のコマンドで親ディレクトリを作成し、ファイルを作成。
$ mkdir -p docker/php
$ touch docker/php/Dockerfile
$ touch docker/php/php.ini

$ mkdir -p docker/nginx
$ touch docker/nginx/docker.conf

以下のcomposeコマンドを実行し、コンテナを立ち上げる。
$ docker-compose up -d

http://localhost:8000/
こちらにアクセスし以下の画面表示で成功！
![スクリーンショット 2021-11-04 15.03.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123646/f910969b-e995-6444-f6b3-2df64625d3bd.png)
Docker まとめ

自分のなかで一段落したので `Docker` についてまとめる
正直全然理解できていないけど
自分の感じたことが中心なので間違っているかもです

勉強させて頂いた教材は以下

https://datawokagaku.com/startdocker/

https://www.youtube.com/watch?v=lZD1MIHwMBY&t=9s

https://y-ohgi.com/introduction-docker/

https://www.amazon.co.jp/dp/B07GP1Q3VT

https://www.udemy.com/share/101XUu2@PkdjVFpcTF0Ne0VFBGJNfg==/

https://qiita.com/Michinosuke/items/5778e0d9e9c04038903c

https://ver-1-0.net/2017/11/29/docker-rails-nginx-postgres

https://qiita.com/sho_U/items/a1b5e4ddf13f3c42a722

## Docker とは
・自分の中では環境構築の `Github` というイメージ
・hub上 にイメージという雛形を上げることで他の人と環境が共有できる
・環境をコード化するのでチーム開発では必須
・開発環境と本番環境をほとんど同じ条件で実装できる
・故にモダンな企業ではほとんどの割合でつかわれているとのこと

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

参考　Docker超入門②〜Dockerの始め方〜【初心者向け】

https://datawokagaku.com/startdocker/

流れは上の画像のとおり

① `Dockerfile` という 環境の設計図からイメージを作成
②その後コンテナというものを作成
③コンテナ内に再現性のある環境が構築される

## Dockerfile とは

・共有する環境の設計図
・共有したいフォルダと同じ階層に作成
・ビルドすることで共有するフォルダのイメージ（環境の雛形）が作成される

ソースコードの一例は以下

```
FROM ruby:2.7

ENV RAILS_ENV=production

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && apt-get update -qq \
  && apt-get install -y nodejs yarn
WORKDIR /app
COPY ./src /app
RUN bundle config --local set path 'vendor/bundle' \
  && bundle install

COPY start.sh /start.sh
RUN chmod 744 /start.sh
CMD ["sh", "/start.sh"]
```
参考　Docker超入門講座 合併版 | ゼロから実践する4時間のフルコース

https://www.youtube.com/watch?v=lZD1MIHwMBY&t=11s

## イメージ コンテナとは

・`Dockerhub` というサービス上からイメージをローカル上にインストールして使う
・`ubuntu` などの `OS` や `postgresql` `MySQL` などのミドルウェア
　`ruby` `PHP` などのプログラミング言語などがイメージにある
・`Dockerfile` からイメージをつくるということは
　`Dockerhub` からソフトウェアをインストールするということ
・そしてそのイメージからコンテナを立ち上げることで
　作業環境をコンテナ内に再現する

## コンテナと仮想マシンの違い

個人的にわかりやすいのは以下

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

参考　Docker超入門①〜Dockerってなに？〜【初心者向け】

https://datawokagaku.com/whatisdocker/

・がっつりリソースをつかうのが `VM`　省エネなのが `Docker`
・`VM`は `windows` の `pc` ゲームができる　`Docker` では `mac` では `window` の `pc` ゲームができない

## 学習するメリット・デメリット

#### メリット
・インフラの知識がつく
・`AWS` や `heroku` が怖くなくなる
・インターネットの知識もつく
・将来的にテストの自動化とかするなら知識が必須
・つまり就職してからも必須となると思われる
・就活での評価が高いらしい

#### デメリット
・学習コストがかかる
・よくわからないことが多く、心が折れる
　正直言うとこれが全て

## その他
・`Docker-machine` とか `docker-compose` とか `Docker-swarm` とかそのへんはまだよくわかっていない
・`VPC` とかも本当によくわかっていない。インターネットの基本的な知識が不足している
・開発で実際使ってみてのメリットはまだよくわからない
【Android】ビューの高さを変更するアニメーション作成

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/66a55827-81ae-2b5c-e964-802e9a1970fa.gif" width="40%">

#はじめに
`ValueAnimator`を使用してビューの高さを変更するアニメーションの作成方法について記述。ここでは、折り畳みビューを作成し、高さ変更時にアニメーションを付与する。

#レイアウト作成

トグルボタンで折り畳みを行うようにする。高さを変更するビューはConstraintLayout部分。

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<androidx.constraintlayout.widget.ConstraintLayout
		android:id="@+id/view"
		android:layout_width="0dp"
		android:layout_height="24dp"
		android:layout_margin="24dp"
		android:background="@color/gray"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent">

		<ToggleButton
			android:id="@+id/button"
			android:layout_width="24dp"
			android:layout_height="24dp"
			android:background="@drawable/button"
			android:checked="false"
			android:textOff=""
			android:textOn=""
			app:layout_constraintEnd_toEndOf="parent"
			app:layout_constraintTop_toTopOf="parent"/>
	</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```

#処理部分作成

`ValueAnimator`を用いてアニメーション処理を実装。

```MainActivitiy.kt
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		val binding = ActivityMainBinding.inflate(layoutInflater)
		setContentView(binding.root)

		//トグルボタン押下時
		binding.button.setOnCheckedChangeListener { _, b ->
			//開く場合:高さ1000pixel / 閉じる場合:高さ24dp
			val height = if (b) 1000 else (24 * resources.displayMetrics.density).toInt()
			val anim = ValueAnimator.ofInt(binding.view.measuredHeight, height)
			anim.addUpdateListener { valueAnimator ->
				val layoutParams = binding.view.layoutParams
				layoutParams.height = valueAnimator.animatedValue as Int
				binding.view.layoutParams = layoutParams
			}
			anim.duration = 300
			anim.start()
		}
	}
```
createContext（useContext）の内部でstateを扱う簡易的な方法

createContext により生成した Contextオブジェクト で扱う変数に状態をもたせたいことはあるかと思います。
テスト的なコードを書いていたのでついでに記事にしてみました。

簡易的な内容なので記事というよりTIPS的な感じでみてもらえればと。

## createContextをラップした別ファイルを作っておく

変数NumContext にはグローバルに扱いたい変数の初期値を適当にを設定。
変数NumContextProvider には　戻り値にJSXエレメントの NumContext.Provider を設定することでラップしておきます。

```NumContext.jsx
import { createContext, useState } from "react";

export const NumContext = createContext({
  number: 0,
  handlePlusCountNum: () => null
});

export const NumContextProvider = ({ children }) => {
  const [number, setNumber] = useState(0);
  const handlePlusCountNum = (number) => setNumber(number + 1);

  return (
    <NumContext.Provider
      value={{
        number,
        handlePlusCountNum
      }}
    >
      {children}
    </NumContext.Provider>
  );
};

```

NumContext　の変数で指定している number の値を状態管理したいとします。
この NumContextファイル の中で useState をセットしてあとは handleHoge関数 を用意しておき任意の場所で呼び出して状態管理ができます。

```
  const [number, setNumber] = useState(0);
  const handlePlusCountNum = (number) => setNumber(number + 1);
```

## numContextを呼び出してみる

index.jsにはNumContextProviderを呼び出しておく。

```index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { NumContextProvider } from "./NumContext";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <NumContextProvider>
      <App />
    </NumContextProvider>
  </StrictMode>,
  rootElement
);

```

App.jsに NumContext を呼び出して Context の状態をカウントアップさせる適当なonClick関数を書く。

```App.js
import { useContext, useEffect } from "react";
import { NumContext } from "./NumContext";

export default function App() {
  const numContext = useContext(NumContext);

  return (
    <>
      <div>{numContext.number}</div>
      <button onClick={() => numContext.handlePlusCountNum(numContext.number)}>
        Count UP
      </button>
    </>
  );
}

```


## useReducerを使う方法も
扱う状態が多い場合は useReducer を使いたくなると思うので一例を用意しました。
useReducer　の　state として number　を用いています。

```NumContextReducer.js
import { createContext, useReducer } from "react";

export const NumContextReducer = createContext({
  number: 0,
  dispatch: () => null
});

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { number: state.number + 1 };
    default:
      throw new Error();
  }
};

export const NumContextReducerProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { number: 0 });

  return (
    <NumContextReducer.Provider
      value={{
        number: state.number,
        dispatch
      }}
    >
      {children}
    </NumContextReducer.Provider>
  );
};
```

今回の useState と useReducer を使った<a href="https://codesandbox.io/s/usecontex-test-kfgqs?file=/src/index.js">デモページ</a>も用意したので置いておきます。

## おまけ： 複数の Contextオブジェクト の使用は処理がややこしくなるかもしれない
備考として更新回数を減らす目的で今回の手法を使って２つの Contextオブジェクト を用意してグローバルの状態を扱っていました。
しかし違う Contextオブジェクト 同士をクロスする処理は思わぬところで扱いにくくなる可能性があります。

原因をまだ把握できていないため詳細はひとまず省きますが現在制作しているサイトで複数の Contextオブジェクト を使っておりうまくクロスした際に想定した順序で値が更新されず処理に不具合が生じて扱いにくいコンポーネントになってしまいました。（時間があれば詳細をまとめたい）

回避する方法もあるかと思いますが最初からContextオブジェクトを分割してから実装するより後から分割した方が問題を切り分けやすいかなと。（先に分割してから実装してしまった）
WEBアプリ開発に向けてのリアルタイムメモ

#何を作りたい？
・お菓子関係
　⇒お菓子に決定
　　LINE Botだと入力したキーワードを元にデータを取得していたけど、ちゃんとした画面になるから、辞典風にしてみよう
・猫ちゃん

#色々整理
・JavaScriptライブラリって何があるのか・・・
　これ可愛いhttps://tipsy.github.io/bubbly-bg/
　背景に使用する

・LINE Botでお菓子のランダム検索にしたから、今度は地域限定のお菓子一覧にしよう
⇒ご当地のお菓子をお土産に買いやすくなる！
⇒地域で引っ張れない・・・。
⇒お菓子の種類で検索に切り替え
⇒タブでお菓子の種類を切り替えて、ランダムで表示されるようにしよう！

・試しにアップロードすると、連続読み込み？が発生して大変…。
　⇒データを再取得するために付けた画面更新用にリロード機能が悪さしていた。
　⇒ボタンを押したらAPIが動くように設定変更

・LINE Botで動いていたAPIが動かない
　⇒元データのAPIはちゃんと動いていた記述だから、原因が分からず・・・
  ⇒APIのURLの前にプロキシサーバーを付けたら取得できるようになった！

・画面上に西暦年度を入力したいけど、console.logだと入力値が取れるのにURLに入れると「object HTMLInputElement」と出てしまう。
⇒Formに入力した値は、typeをnumberにしても、文字型となるため、「number();」で数値型に変換する必要がある。

#結果
無事作成できた

https://qiita.com/ikumi623/items/be75e4e7ae24f24c7835
Laravel6｜コントローラーからViewへの値の渡し方


##配列としてviewに渡す

配列としてセット

```php:controller.php
$user=Auth::user();
$data=['user_id'=>$user->id, 'user_name'=>$user->name];

return view('create',$data);
```


```php:view.php
{{ $user_id }}//1234
{{ $user_name }}//hogehoge

```

##compactでviewに渡す

:::note info
compact — 変数名とその値から配列を作成する
:::

```php
$flowers = compact('sakura', 'ume', 'himawari');
```

下記で書いたものと同じ意味になる


```php
$flowers = array(
  'sakura' => $sakura,
  'ume' => $ume,
  'himawari' => $himawari,
);
```
なので

```php:controller.php
$user=Auth::user();

return view('create',compact('user'));
```

```php:view.php
{{ $user['id'] }}//1234
{{ $user['name']}}//hogehoge

```
with構文について

#with構文とは
Pythonでの```with```構文とは、***ある処理の開始時と終了時の処理をセットで実行してくれる構文***。
ファイルのオープンとクローズ処理やデータベースの接続処理などを行う際に使用される。
自動的に終了処理が行われるため、リソースの解放忘れなどを防ぐことができ、コードも簡潔にすることができる。

#with構文の書き方
with構文は次のように書くことができる。

```python
with <開始処理> as <変数>
    # 処理内容
```

ここで「開始処理」には、ファイルのオープンやデータベースの接続処理などを記述する。

# 使用例
PythonからSQLite3を操作してテーブルを作成する部分をwith構文を使って書いてみた。

```python
with sqlite3.connect("sample.db") as connection:
    cursor = connection.cursor()
    cursor.execute("CREATE TABLE sample_table (id INTEGER, name TEXT) ")
```

もし、ファイルやデータベースに対する処理の途中でエラーが発生した場合も自動的にクローズなどの処理が行われる。
【mt4/mql4】一定期間の最高価格を算出する


# はじめに
<!-- 発端や概要を記載 -->
システムトレードプログラマのmt4/mql4のメモノートです。
初心者向けの簡単なトピックから公開していきます。
.noteでEAそのものも公開していますので良ければそちらも見てください。


# 目次
<!-- タイトルとアンカー名を編集 -->
1. [処理内容](#処理内容)
1. [mql4ソースコード](#mql4ソースコード)

<!-- 各チャプター -->
<a id="#処理内容"></a>
# 処理内容
任意に指定した一定期間の最高価格を算出するコードです。
使うシーンとしては
現在値と最高値の剥離額でエントリーするかどうかを判断するとか
期間別に最高値を算出して、トレンドを解析するとか
色々なシーンで使えるコードだと思います。

ちなみに期間は時間足で指定します。何本前から何本前までという感じです。
なので、算出した時間は足種によって異なりますので注意してください。

使いたいシーンに挿入して使ってください。


<a id="#mql4ソースコード"></a>
# mql4ソースコード

こちらがソースコードです。
High_Priceに最高価格が入ります。


```c++:test.mq4


//---一定期間内の最高値確認
int Start_bar = 1;//検索開始するバーの本数　3であれば3本前の足から検索
int count = 100;//検索開始するバーから何本前まで検索するか？

int h_Index = iHighest(“USDJPY”,PERIOD_H1,MODE_HIGH,End_bar,Start_bar);//MODE_HIGHで期間中の高値を配列に格納
double High_Price = iHigh[h_Index];//格納した配列から最高値を抽出する。
   
//---

```



皆様の手助けになりますように。
間違いなどあればご指摘いただけると助かります。
以上です
お菓子様がお菓子辞典からピックアップするで～ #codepen #HTML

#やはりお菓子は素敵
以前LINE Botでお菓子ガチャを作成したが、キーワードでピックアップする仕様のため、「チョコレート」で引いてもお煎餅のチョコ味等が出てくる事が…。（チョコ掛けの柿の種も美味しいけどね）

https://qiita.com/ikumi623/items/96aa2a8e371e40974ec8


なので、例えばチョコだけのピックアップが出来れば、甘いものだけを眺めたいときにより活用できるはず！
しかも、今回はWEBアプリにしたので、お菓子が登録された年度も指定できるようバージョンアップ！！
「この年にはこんなお菓子があったのね～」と懐かしみつつ、お菓子ライフを楽しみましょう！

#お菓子辞典できました
お菓子様に辞典を引いてもらえる仕様にしました。

https://angry-edison-7f89f1.netlify.app/

#こんな感じで引いてくれます

https://twitter.com/momoiku3/status/1456081548940169216

#作り方
##使用環境
・CodePen
・Netlify
・[背景](https://tipsy.github.io/bubbly-bg/)
　[→使い方](https://www.webcreatorbox.com/tech/javascript-particles)
・[お菓子の虜API](https://sysbird.jp/toriko/webapi/)

##プログラム
CodePenのリンクを付ければプログラムが載るので便利
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abyLQOZ" data-user="ishikawaikumi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ishikawaikumi/pen/abyLQOZ">
  お菓子</a> by IshikawaIkumi (<a href="https://codepen.io/ishikawaikumi">@ishikawaikumi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

###APIが通らない事件
LINE Botと同じお菓子の虜APIを使用しているのだが、今回まったくAPIが通らない問題が発生。
どうやら、CORSエラーというものが発生していたようで、axiosが叩くAPIのURLの前にプロキシサーバーのURLを付ける形で無事取得できるようになりました。

https://zukkiblog.com/cors-error/

###画面上に入力した西暦年をJavaScriptで使いたい
任意の西暦年を入力したら、その値をAPIの抽出条件に入れたところ、うまく数字が取れない…。
console.logだと値が表示されるのに、URLに組み込むと年部分が「object HTMLInputElement」と表示されてしまう。
どうやら、画面の入力エリアに値を入れると文字型と認識されるため、数字に変換する必要があるとのこと。

https://goworkship.com/magazine/javascript-beginner-mistakes/

変数「year」に画面の入力エリアに入れた値を一度格納し、文字型を数字に変換する「Number();」を使用して、数字として認識してもらえるよう変換して使用しました。

```javascript
    //画面上の西暦情報を取得
    let year = document.getElementById('Y').value;
    year = Number(year);
```

#最後に
当初、地域ごとの限定お菓子をピックアップする作りを考えていましたが、APIでのデータ抽出条件に地域コードが入っていなかったため、急遽お菓子のジャンルごとに仕様を変更しました。
APIも奥深く、環境によってプロキシサーバーを使用しないと取得できなくなるケースもある事を学んだので、今後の活用の参考になりました。
ルネサス　RXファミリ　開発環境

Renesas RX周辺機器セットアップ備忘録

RXファミリ用C/C++コンパイラパッケージ ツールチェーン チュートリアル

#統合環境
e2studioを使用する

e2studio　ユーザーマニュアル入門ガイド

https://www.renesas.com/jp/ja/document/man/e-studio-integrated-development-environment-users-manual-getting-started-guide-rx-rl78-rh850-family?r=1175496

e2studioにおいてスマートコンフィグレータを利用する場合のAPnote（RX用）

https://www.renesas.com/jp/ja/document/mat/rx-smart-configurator-users-guide-e-studio-rev140?r=1170091
#コンパイラ
## Renesas CCRX
純正Cコンパイラ（有償）60日は無料で使用可能

## GNU gcc
GCC for Renesas GNURX Toolchain (ELF) または GNURX Toolchain (ELF)が適用可能

##ツールチェーンの追加方法
e2 studio 「ヘルプ」－「Ｒｅｎｅｓａｓツールチェーンの追加」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/973387/b0049a3c-1a8f-24bc-c681-4e62a1b04a73.png)
Cコンパイラのセットアップがされているものはバージョン含め表示されるので
チェックボックスを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/973387/c1ad6387-22fd-89aa-5f49-9d24324da3d1.png)

##ツールチェーンを有効にする方法
プロジェクト－「プロパティ」－「設定」－「Toolchain」タブより
ツールチェーンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/973387/dbacbc93-a2c8-72c4-bfbf-0ff6f0e35344.png)


https://ja.na4.teamsupport.com/knowledgeBase/17797635
無料登録でDL可能

https://llvm-gcc-renesas.com/ja/


#デバッガ情報
E2エミュレータLite

https://www.renesas.com/jp/ja/document/qsg/e2-emulator-lite-rte0t0002lkce00000r-users-manual?language=ja&r=488806

E2エミュレータ、RX接続時の注意事項

https://www.renesas.com/jp/ja/document/mat/e1e20e2-emulator-e2-emulator-lite-additional-document-users-manual-notes-connection-rx-devices?language=ja&r=488806

#ツールチェーン情報
##スマートコンフィグレーターファイルの互換性
scfgファイル（スマートコンフィグレータファイルはツールチェーンの依存性が存在する。
下記にcfgファイルの冒頭部分の比較を示す。
（左がCCRX系、右がGNU系）
単純にこの部分を使用したいツールチェーン用に書き換え修正してあげればツールチェーン間の移植が可能。
![スクリーンショット 2022-02-23 103658.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/973387/199bb3ec-09fc-b3a0-ab5a-7aa97ce3715c.png)
Laravel6｜Class 'App\Http\Controllers\Auth' not found

事象：下記ログインユーザー取得時にエラー

```controller.php
$user=Auth::user();
```


結論：以下をコントローラーに追加する

```controller.php
use Illuminate\Support\Facades\Auth;
```


|  　| バージョン  |
|:-----------|------------|
| Laravel       | 6.20.37            |
| MySQL     | 5.7.34             |
| PHP       | 7.4.21           |
docker-compose で postgresql が migrate できない

`docker-compose` を使って `rails` の 環境構築
`postgresql` が `migrate` できなかった

設定ファイルは以下

```:docker-compose.yml
version: "3"
services:
  db:
    image: postgres
    volumes:
      - pgdatavol:/var/lib/postgresql/data
  web:
    build: .
    command: bundle exec rails s -p 3000 -b "0.0.0.0"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  pgdatavol:   
```

```:database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgresql
  password: 
```

このあと `docker` コンテナを立ち上げてから

`docker-compose run web rake db:create`

`docker-compose run web rake db:migrate `

すると以下の内容のエラー

```
ConnectionBad: could not translate host name "db" to address: Name or service not known
```

なんかわかんないけど `host` の `db` が認識されてない

___

https://qiita.com/at-946/items/2fb75cec5355fad4050d

上の記事を参考にさせていただき、以下のように設定ファイルを変更

```:docker-compose.yml
version: "3"
services:
  db:
    image: postgres
　 environment:
      POSTGRES_USER: 'postgresql'
      POSTGRES_PASSWORD: 'postgresql-pass
    volumes:
      - pgdatavol:/var/lib/postgresql/data
  web:
    build: .
    command: bundle exec rails s -p 3000 -b "0.0.0.0"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  pgdatavol:   
```

```:database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgresql
  password: postgresql-pass
```

なんか `postgresql` のセキュリティの観点から
明示的に環境変数に設定するようになったっぽい
Couchbase Lite 機能解説：ライブクエリ

※ Couchbase Mobile(Couchbase Lite, Syncgateway)に関する記事について、[こちら](https://qiita.com/yoshiyuki_kono/items/6a5bbad1b02196a25417)も、参照ください。

## ライブクエリとは

ライブクエリは、データベースの変更を監視するクエリです。
ライブクエリは、変更が発生するたびに結果セットを更新します。これは、リアクティブにデータを最新の状態に保つ必要のある、ユーザーインターフェイス（特にテーブル/リストビュー）を構築するための優れた方法です。

ライブクエリ駆動のUIはユーザーが手動で更新しなくても自動的に更新され、データ表示に反映されます。

## 実装解説

### ライブクエリの開始

```java
Query query = QueryBuilder ①
    .select(SelectResult.all())
    .from(DataSource.database(database));

// Adds a query change listener.
// Changes will be posted on the main queue.
ListenerToken token = query.addChangeListener(change -> { ②　
    for (Result result : change.getResults()) {
        Log.d(TAG, "results: " + result.getKeys());
        /* Update UI */
    }
});

// Start live query.
query.execute(); ③
```

- ① `QueryBuilder`を使用してクエリステートメントを作成します
- ②　リスナーをアタッチしてライブクエリをアクティブにします。後でライブクエリを停止するためにトークンを保存します
- ③ クエリを開始します。これにより、ライブクエリがすぐに実行され、結果がチェンジリスナーに送信されます。変更が検出されると、クエリが自動的に実行され、新しいクエリ結果が任意のオブザーバー（チェンジリスナー）に送信されます。

### ライブクエリの停止

```java
query.removeChangeListener(token); 
```

トークンを使用してリスナーを削除します。これにより、ライブクエリが停止します。

## 参考情報

https://docs.couchbase.com/couchbase-lite/current/java/query-live.html
Couchbase Lite機能解説：ドキュメントの構造と制約

## はじめに


## ドキュメントの構造
Couchbase　Liteのデータ単位はドキュメントであり、これはRDBの行またはレコードに相当します。

ドキュメントは、一意で不変のキー、Id、およびユーザーのデータを表す値（JSONオブジェクトまたはバイナリブロブ）で構成されるキーと値のペアとして保存されます。

### キー

ドキュメントキー/IDの特徴は次のとおりです。

- スペースを含まないUTF-8文字列(％、/、 "、_などの特殊文字を許容)
- 250バイト以下
- バケット内でユニーク
- （UUIDとして）自動的に生成されるか、保存時にユーザーまたはアプリケーションによって設定されます
- 不変; つまり、一度保存するとIDを変更できません。

### 値

ドキュメントの値は次のいずれかです。

#### ドキュメントと呼ばれるJSON値。

このJSONオブジェクトは、それ自体がキーと値のペアのコレクションであり、値は数値、文字列、配列、またはネストされたオブジェクト自体である可能性があります。その結果、ドキュメントは、非常に複雑なデータ構造を、簡単に解析可能で自己組織化された方法で表すことができます。

#### バイナリオブジェクト（blobまたは添付ファイルとも呼ばれます）

これらの添付ファイルは、大きなメディアファイルやその他の非テキストデータを保存する手段を提供します。Couchbase Liteは無制限のサイズの添付ファイルをサポートしていますが、Sync Gatewayは現在、同期される添付ファイルに20MBの制限を課しています。

### ドキュメント属性

各ドキュメントには次の属性があります。

- ドキュメントID
- 現在のリビジョンID（ドキュメントが更新されるたびに変更されます）
- 過去のリビジョンIDの履歴（通常は線形ですが、ドキュメントに競合がある場合、または競合した場合は分岐ツリーを形成します）
- JSONオブジェクトの形式の本文、つまりキーと値のペアのセット
- 0個以上の名前付きバイナリ添付ファイル

### ドキュメントの変更履歴

Couchbase Liteは、GitやSubversionなどのバージョン管理システムのように、すべてのドキュメントの変更履歴を一連のリビジョンとして追跡します。その主な目的は、レプリケーターが同期するデータと発生する競合を判別できるようにすることです。

ドキュメントの変更ごとに、一意のリビジョンIDが割り当てられます。過去のリビジョンのIDが利用可能です。リビジョンがローカルで作成され、データベースがまだ圧縮されていない場合、過去のリビジョンのコンテンツが利用できる場合があります。



## ドキュメントの制約

### 概要

ここに記載されている制約は、Sync Gatewayを使用して複製する必要がある、または必要になる可能性のあるデータバケットとドキュメントの設計に関連しています。

### 避けるべきこと
アンダースコア文字「_」（ASCII &#095）を前に付けたユーザープロパティ名の設計は避ける。

### なぜそれが問題なのか
アンダースコア文字は、（「_」）で予約された接頭辞のためのドキュメント（文書の識別子：例えば、システムプロパティ_id（）とリビジョン属性_rev）。

先頭にアンダースコアが付いたユーザープロパティを含むドキュメントは、Sync Gatewayによって拒否されます。エラーの詳細については、例1を参照してください。

プロパティプレフィックスエラーメッセージの例

```
"{"error":"Bad Request","reason":"user defined top level properties beginning with '_' are not allowed in document body"}"
```

### 適用される場所
このルールは、次の方法で実行される書き込みに適用されます。

- Couchbase Lite SDK
- Sync Gateway　REST　APIの同期
- 共有バケットアクセスが有効になっている場合のCouchbase　Server　SDK

### エラーが発生する可能性があるケース
特に、次の展開状況でエラーが発生する可能性があります。

- フィールドレベルの暗号化が有効になっているモバイルからWebへのデータ同期(ルールがデフォルトのフィールド暗号化形式と競合するため)

- Node.js　SDKとOttoman.js（Couchbase用のNode.js ODM）を使用したモバイルからWebへのデータ同期（はOttoman.jsによって自動的に追加されるプロパティ`_type`と競合するため）。
 - このシナリオで推奨される回避策は、Ottoman.jsライブラリをフォークし、`_type`プロパティの検索置換を実行して、先頭にアンダースコアを付けずに置換することです。





## 参考情報

https://docs.couchbase.com/sync-gateway/current/data-modeling.html
RDSメンテナンス、PHDやメールで通知されないものも取得&通知するLambda


RDSのメンテナンス情報はその全てがメールやPHD(Personal Health Dashboard)に通知されるわけではありません(サポート確認済み)。そのようなものも把握したい場合は [describe-pending-maintenance-actions](https://docs.aws.amazon.com/cli/latest/reference/rds/describe-pending-maintenance-actions.html) コマンドで取得する方法があります。

ということで describe-pending-maintenance-actions して結果が空でなければ、SNSに通知するLambdaを書いてみました。 [CloudFormationのテンプレート](https://gist.github.com/shu85t/cc304146b0e05a32a7439a7b3f042a5e) としてまとめています。

定期実行しておけば、これまでPHDやメールだけでは把握ができなかったメンテナンス情報も拾えます。

# 構成
![構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/30be1554-1273-dc28-1008-2d0d87e0e3b6.png)

# 利用手順

## SNSの準備
通知対象のSNSトピックを準備してください。
ARNはあとで使います。

![SNS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/835e93c7-a169-6507-2b20-e5919bbb5cb0.png)


今回は楽にコード書かずSlack通知したかったので、通知したいSlackチャンネルのインテグレーション設定からメールアドレスを払い出して、そのアドレスをSNSにサブスクリプション登録しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/c11111a4-016c-10f8-914b-504cf0e55556.png)


## Lambdaの作成(CloudFormation利用)

 [Notify_RdsMaintenancePendingActions.yml](https://gist.github.com/shu85t/cc304146b0e05a32a7439a7b3f042a5e) を使ってCloudFormationスタックを新規作成します。

![CloudFormation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/25b46290-cd3e-c7c9-8edf-c573fffe398a.png)

スタック名と、通知先SNSのARNを入力してください。AppNameはリソースのプレフィックスとして使います、こだわりがなければデフォルトのままで。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/118bac43-05bb-3a53-62d0-642854178cad.png)

IAM作成の許可にチェックを入れてスタックを作成してください。

## 実行テスト

デフォルトだと「DescribeRdsMaintenancePendingActions」というLambdaができているので、テスト実行してみてください。RDSのペンディングアクションがあればSNSに通知が飛ぶはずです。

### SNS -> EMail -> Slack の例

ペンディング中のメンテナンスアクションが２つ存在するリージョンで試すと、以下のように２つ通知が飛んできました。
![NotifyResult.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/7daf2225-c419-c184-0f5e-85144062d075.png)


## 定期実行

EventBridgeのスケジュール実行をこのLambdaに関連づけておけば定期的なチェックが行えます。
CloudFormationにはスケジュール実行部分は含めていないので手動で設定が必要です。

# コード
CloudFormationの中に以下のコードをインラインで埋め込んでいます。(Python3.9)
ひとまずプレーンなもので動作を見てみたかったのでフィルタなどはせず、そのままメンテの数だけ通知しています。

```python3:
import json
import boto3
import os

rds = boto3.client('rds')
sns = boto3.client('sns')
TOPIC_ARN = os.environ["TOPIC_ARN"]

def main(event, context):
    # Describe
    paginator = rds.get_paginator('describe_pending_maintenance_actions')
    iter = paginator.paginate()
    for res in iter:
        for action in res["PendingMaintenanceActions"]:
            # Publish
            message = json.dumps(action, default=str)
            print(f"publish {TOPIC_ARN=} {message=}")
            sns.publish(
                TopicArn=TOPIC_ARN,
                Subject="RDS Pending Maintenance Action",
                Message=message
            )
    
    # return
    return {
        'statusCode': 200,
        'body': "ok"
    }
```
Docker precompile エラー

https://www.youtube.com/watch?v=lZD1MIHwMBY&t=11070s

上の動画で Docker の学習させていただいた。

rails 環境を heroku にデプロイの際に`heroku logs` で以下のエラー

```
 ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
```

本番環境のプリコンパイルが出来なかったというエラー

Docker ファイルと本番環境で読み込まれるファイルのタイポがあったので修正

再度イメージをビルドしリリース。

しかし解消せず

___

イメージのビルドのあとに
以下のコマンドで再度 migration を実施

```
 heroku run bundle exec rake db:migrate RAILS_ENV=production -a rails-docker-isamu
```
すると本番環境で `hello world` 

特にDBにデータはなくてもイメージに変更があったら migration の必要があるのかも
AWSパブリックIPにドメインを関連させてかつhttpsにする方法

##手順
・まずドメインを外部で手に入れる（私はお名前.comを使用した）
・Route53でホストゾーンを作成。
・ネームサーバーを設定する
・ACMで証明書を発行する（バージニア北部で行うこと）
・Cloudfrontでディストリビューションを作成する。
　　→オリジンドメインはEC2のパブリックIPv4DNSを貼り付ける
・Route53の設定を変更（typeAでレコードセットを作成、エイリアスを”はい”にする。

参考になった動画は
https://www.youtube.com/watch?v=kFj_mdW7Sy8&t=860s
ほとんどこの通り実行したらできましたが、freenomを使用せずお名前.comを使用したこと。
Cloudfrontでディストリビューションを作成していなかったことが相違点としてあったため自分なりにおかえながら実行してみた。しっかりポートフォリオサイトを保護された通信環境のもとにおけたので嬉しかったです！！
【Flutter】NullSafetyにおけるfactoryコンストラクタを用いたシングルトンの実装

# 概要
アプリで同じインスタンスを使い回したい場合、シングルトンを検討すると思います。
シングルトンはDartのfactoryコンストラクタを使えば実現できます。今回はNullSafetyでの書き方を整理しました。
※コードの書き方についてフィードバックあればぜひお願いします。

参考にさせていただいた記事は[こちら](https://tkzo.jp/blog/dart-singleton-pattern/)

# 環境

```shell-session
$ flutter --version
Flutter 2.5.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 18116933e7 (3 weeks ago) • 2021-10-15 10:46:35 -0700
Engine • revision d3ea636dc5
Tools • Dart 2.14.4
```

pubspec.yaml

```yaml
environment:
  sdk: ">=2.12.0 <3.0.0"
```

# 実装
```dart
class Singleton {
  static Singleton? _instance;

  factory Singleton() {
    if (_instance == null) {
      _instance = const Singleton._internal();
      try {
        /// 初期化処理色々...
      } on Exception catch (e) {
        throw Exception(['例外発生: ${e.toString()}']);
      }
    }
    return _instance!;
  }

  const Singleton._internal();
}
```
【メモ】tree コマンド

- 製造業出身のデータサイエンティストがお送りする記事
- tree ディレクトリやファイルをツリー状に表示するコマンドです。ディレクトリ構成を整理する際に便利だったのでメモとして残しておきます。

## インストール
Homebrew からインストールできます。

```
brew install tree
```

## 確認方法
下記のコマンドでtree のバージョンを確認できます。

```
tree --version
```

## 基本的な実行方法
tree の基本的な実行方法は下記です。

```
tree [オプション] [ディレクトリ ……]
```

## tree のオプション（表示対象関係）

|オプション|内容|
|---|---|
|-a|・名前がドットから始まるディレクトリも含めて表示する（「.」と「..」は対象外）|
|-d|・ディレクトリだけを表示する|
|-l|・シンボリックリンクをたどる|
|-f|・各ファイルやディレクトリを指定したディレクトリからのパスを付けて表示する（指定しなかった場合はカレントディレクトリから）|
|-x|・他のファイルシステムを対象としない（findコマンドの-xdevオプション相当）|
|-L 深さ|・表示するディレクトリの深さ（1以上の整数を指定）|
|-P パターン|・パターンにマッチしたファイルだけを表示する（該当するファイルがない場合もディレクトリは表示）。パターンにはパス名展開と同様に「*」「?」「[A-Z]」などを用いた指定が可能|
|-I パターン|・パターンにマッチしなかったファイルだけを表示する|
|-o ファイル名|・指定したファイルにtreeの出力を保存する|
|--prune|・空のディレクトリを出力しない（-Pや-Iで、表示対象のファイルが見つからなかったディレクトリを表示しない）|
|--filelimit エントリ数|・指定した数を超えるエントリを持つディレクトリの内部を表示しない（--filelimit 10では、表示内容が10以内のディレクトリの内部のみを表示する）|

## tree のオプション（並べ替え関係）

|オプション|内容|
|---|---|
|-t|・ファイルの更新時刻順に表示|
|-c|・ファイルのステータス変更時刻順で表示|
|-r|・アルファベットの逆順で表示（-tや-cと併用した場合は時刻の逆順）|
|-U|・並べ替えずに表示（デフォルトはアルファベット順）|
|--dirsfirst|・ディレクトリを先に表示（-Uを指定している場合は無効）|

## tree のオプション（表示内容関係）

|オプション|内容|
|---|---|
|-q|・表示できない文字を「?」で置き換えて表示|
|-N|・表示できない文字を8進数で置き換えて表示|
|-Q|・ファイル名を二重引用符で囲んで表示|
|-p|・パーミッションを表示（「ls -l」相当）|
|-u|・ファイルの所有者を表示|
|-g|・ファイルの所有グループを表示|
|-s|・ファイルのサイズ（バイト数）を表示|
|-h|・ファイルのサイズを単位付きで表示|
|-D|・ファイルの更新時刻を表示（「-c」を併用している場合はステータスの変更時刻を表示）|
|-F|・ファイルの種類を表示（「ls -F」相当）|
|--si|・ファイルのサイズをSI系（1000の倍数）の単位付きで表示|
|--du|・ディレクトリのサイズ（「du -c」相当）を表示|
|--timefmt フォーマット|・タイムスタンプの表示フォーマットを指定（%Y、%m、%dなどが使用可能 ※1）、「-D」オプションを指定した扱いとなる|
|--inodes|・ファイルのiノード番号を表示|
|--device|・ファイルのデバイス番号を表示|
|--noreport|・表示したディレクトリとファイルの個数を表す末尾のレポート行を表示しない|

## tree のオプション（グラフィックおよびHTML/XML関係）

|オプション|内容|
|---|---|
|-i|・ツリー状にインデントせずに表示|
|-A|・ツリー表示の線を滑らかなけい線で表示|
|-S|・ツリー表示の線をASCIIのけい線文字で表示（「--charset=IBM437」相当）|
|-C|・常に色付きで表示|
|-n|・常に色なしで表示（「-C」を打ち消す）|
|-H URLの起点|・HTML形式で表示。ファイル名部分は「URLの起点」とパスを組み合わせたリンクとなる|
|-T タイトル|・HTML出力時のタイトル|
|-X|・XML形式で出力|
|--charset 文字セット|・ツリーを表す線に使用する文字セットや、HTMLやXML出力時に指定する文字セットを指定|
|--nolinks|・HTML出力時にリンクを出力しない|
【python初学者】csv 書き出しができないケース（tensor→numpy変換、次元数調整）

###上手くいかなかった事例

予測
score = net(x_test)

score.dtype
→torch.float32

csv 書き出し
pd.Series(score, name='score').to_csv('submission.csv', index=None, line_terminator='\n')

---------------------------------------------------------------------------
RuntimeError                              Traceback (most recent call last)
<ipython-input-94-618cbf3cee41> in <module>()
      1 # csv 書き出し
----> 2 pd.Series(score, name='score').to_csv('submission.csv', index=None, line_terminator='\n')

5 frames
/usr/local/lib/python3.7/dist-packages/torch/_tensor.py in __array__(self, dtype)
    641             return handle_torch_function(Tensor.__array__, (self,), self, dtype=dtype)
    642         if dtype is None:
--> 643             return self.numpy()
    644         else:
    645             return self.numpy().astype(dtype, copy=False)

RuntimeError: Can't call numpy() on Tensor that requires grad. Use tensor.detach().numpy() instead.

###上手くいった事例

エラー文のUse tensor.detach().numpy() instead.を参考に
以下のようにしてみました。

score = score.detach().numpy()

これでnumpy形式になったので行ける！
と思いきや、

csv 書き出し
pd.Series(score, name='score').to_csv('submission.csv', index=None, line_terminator='\n')
---------------------------------------------------------------------------
Exception                                 Traceback (most recent call last)
<ipython-input-158-618cbf3cee41> in <module>()
      1 # csv 書き出し
----> 2 pd.Series(score, name='score').to_csv('submission.csv', index=None, line_terminator='\n')

1 frames
/usr/local/lib/python3.7/dist-packages/pandas/core/construction.py in sanitize_array(data, index, dtype, copy, raise_cast_failure)
    494     elif subarr.ndim > 1:
    495         if isinstance(data, np.ndarray):
--> 496             raise Exception("Data must be 1-dimensional")
    497         else:
    498             subarr = com.asarray_tuplesafe(data, dtype=dtype)

Exception: Data must be 1-dimensional


今度は、「Data must be 1-dimensional」と言われたので

再度、次元数を確かめたところ
score.ndim
→2

と返されたので
score = np.squeeze(score)
を適用し
score.ndim
→1
次元数を1に変換。

csv 書き出し
pd.Series(score, name='score').to_csv('submission.csv', index=None, line_terminator='\n')

→書き出し成功！！

ポイントは、tensor→numpy形式への変換と、次元数でした。

参考
https://note.nkmk.me/python-numpy-squeeze/
複数のKubernetes yamlファイルに書かれたコンテナイメージを一括pullするコマンド

# 動機
サーバに複数のk8sのyamlファイルがあり、
再セットアップ時などで逐次イメージ名を確認してpullするのが面倒なので、
一括でpullしたい

# コマンド
```bash
cat *.yaml | grep image | sed -e "s/image: //" | xargs -I{} docker pull {}
```
WordPressコンテンツの復元

# はじめに

* 社内WordPressサイトを収めていたQNAPがハードウェア故障した
* WordPressコンテンツを別サーバに復元した時の手順と内容を記す

---

# WordPressコンテンツのサルベージ

よく知られているように、次の２つのデータを新サーバに持っていく

1. MySQL(MariaDB)のWordPressデータベースをバックアップ
2. WordPressコンテンツファイルをバックアップ

```sh:sh
# 1.
mysql -u root -p WORDPRESS_DATEBASE > /tmp/wp-content.sql
# 2.
cd /var/www/html/wordpress/ && tar cvzf /tmp/wp-content.tar.gz wp-content/
```
---

# 新サーバにWordPressの環境構築

0. 新サーバにログイン
1. php、MySQL(MariaDB)、phpmyadmin、apache2
2. WordPressのインストール
3. WordPressコンテンツファイルをコピー
4. WordPressデータベースの復元とWordPressのDB接続設定を編集
5. WordPressサイトにアクセス

```sh:sh 
# 0.旧サーバの名称はqnapとする
# 1.は省略
# 2.
wget https://ja.wordpress.org/latest-ja.tar.gz -O /tmp/latest.tar.gz
tar xvzf　/tmp/latest.tar.gz

# 3. 
scp USER@qnap:/tmp/wp-content.sql /tmp
scp USER@qnap:/tmp/wp-content.tar.gz /tmp

# もし、中間ファイルを作りたくない場合は
# cd /var/www/html/wordpress/
# ssh USER@qnap "cd /var/www/html/wordpress/ && tar cvzf - wp-content/" | tar xvzf -
# 旧サーバからなら
# cd /var/www/html/wordpress/
# tar cvzf - wp-content/ | ssh USER@新サーバ "cd /var/www/html/wordpress/ && tar xvzf -"


# 4.
sudo mysql -u root -p WORDPRESS_DATABASE < /tmp/wp_content.sql
cd /var/www/html/
sudo tar xvzf /tmp/wp-content.tar.gz
sudo cp -pr wp-config-example.php wp-config.php
sudo chown -R www-data:www-data .
sudo vi wp-config.php
# db接続設定を編集
define('DB_NAME', '${WORDPRESS_DATABASE}');
define('DB_USER', 'root');
define('DB_PASSWORD', '${PASSWORD}');
define('DB_HOST', 'localhost');
define('DB_CHARSET', 'utf8mb4_general_ci');

# 5.
# Webブラウザで新サーバへアクセス http://qnap/wordpress/index.php 
```

---

#問題と対策

## phpのエラー

挙動がおかしい時は、wp-config.phpのWP_DEBUGをfalseからtrueにすること。

## 旧URL参照でのリンク切れ

phpmyadminからWORDPRESS_DATEBASEデータベースのwp_optionsテーブルの次の項目を修正

* siteurl: http://新サーバ/wordpress
* home: http://新サーバ/wordpress

もし、データベース名で振り替えているなら新サーバでシンボリックリンクを貼っておく

* siteurl: http://新サーバ/WORDPRESS_DATABASE
* home: http://新サーバ/WORDPRESS_DATABASE

```sh:sh
cd /var/www/html/
sudo ln -s wordpress WORDPRESS_DATABASE
```


## リンク切れ対策

これまでの手順では、index.htmlは表示されるけれども、個別記事の参照で404 Not Foundが出る可能性がある
その場合は、apacheの設定の問題なので追加設定。

```sh:sh
# 0.WordPressでパーマリンクの設定を保存しておくと、.htaccessが生成される
# 1. apacheにmod_rewriteを組み込む
e2enmod rewrite
```

AllowOverrideをNoneからAllに。

```sh:/etc/apache2/apache2.conf
<Directory /var/www/>
        Options Indexes FollowSymLinks ExecCGI
        AllowOverride All
        Require all granted
</Directory>
```

```sh:sh
sudo apachectl restart
```
【Rails】f.labelで最初の文字のみ大文字になってしまう

##環境
Ruby 3.0.2
Rails 6.1.4.1

##状況

```html.slim
...
= f.label 'ID'
```

最初の文字のみが大文字で、「Id」と表示されてしまう

##解決法

```html.slim
...
= f.label :id, 'ID'
```

```
f.label(メソッド名 [, ラベル配下のコンテンツ, オプション])
```

第1引数にオブジェクトのメソッド名が来ることを想定しているため、第2引数にラベル名を指定する

https://railsdoc.com/page/label
make docker-compose database same as host

```docker-compose.yml
db:
        image: mysql:5.6
        ports:
            - 3308:3306
        restart: always
        environment:
            MYSQL_DATABASE: db
            MYSQL_USER: user
            MYSQL_PASSWORD: pwd
            MYSQL_ROOT_PASSWORD: pwd
            BIND-ADDRESS: 0.0.0.0
        volumes:
            - MysqlVolume:/var/lib/mysql
```
SQLiteでカラムの型をタイポしても自動判断された件

SQLiteでテーブル定義をするときにアレっと思ったのでメモ。

# 公式より
https://sqlite.org/datatype3.html

>3.1. Determination Of Column Affinity
The affinity of a column is determined by the declared type of the column, according to the following rules in the order shown:
  1. If the declared type contains the string "INT" then it is assigned INTEGER affinity.
  2. If the declared type of the column contains any of the strings "CHAR", "CLOB", or "TEXT" then that column has TEXT affinity. Notice that the type VARCHAR contains the string "CHAR" and is thus assigned TEXT affinity.
  3. If the declared type for a column contains the string "BLOB" or if no type is specified then the column has affinity BLOB.
  4. If the declared type for a column contains any of the strings "REAL", "FLOA", or "DOUB" then the column has REAL affinity.
  5. Otherwise, the affinity is NUMERIC.
Note that the order of the rules for determining column affinity is important. A column whose declared type is "CHARINT" will match both rules 1 and 2 but the first rule takes precedence and so the column affinity will be INTEGER.

らしいです。今回、自分が不思議に思ったのは上記の1.について。

# 起きたこと
以下のCREATE文を実行しました。

```
CREATE TABLE IF NOT EXISTS foo (
  id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  bar_id INTEGET NOT NULL,
  ...
);
```

「bar_id」の型をよく見ると「 **INTEGET** 」になっています。タイポですね、はい。お恥ずかしい。

ところが、このSQLを実行してもなんのエラーも起きず正常に完了し、テーブルは作成されていました。クライアントで確認してみても、以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376864/2373ccf6-2c9a-16ec-c969-1e3c95a4151a.png)

データ型のところが思いっきり「INTEGET」になっていますね…。このテーブルを使うアプリケーションからも全く問題なくORマッピングでき、データ操作ができていました。

> 1. If the declared type contains the string "INT" then it is assigned INTEGER affinity.

ということで、「INTEGET」の中にはちゃんと「INT」という文字列が入っていたので、INTEGER扱いでカラムが作成されているようです。実際、整数値が登録できました。

その後、あるタイミングでSQLを見直したときにタイポに気付いた、というわけです。

# まとめ
- タイポしても自動的に近いものに解釈される
- 解釈できなかったものは全てNUMERICになる

優しい仕様な気がしますが、知らないとちょっと怖いですね、これ…。あと、これSQLite固有なのかな？　PostgreSQLとかMySQLとか、どうなんだろう。
Android TV buildする方法

## 概要
Chromecast with Google TVをAndroid Studioでビルドする方法を解説します。

必要なもの
- ディスプレイ
- Chromecast with Google TV
- AndroidStudio
- adb

## 手順
-  ディスプレイにChromecastを接続する
-  Chromecastを起動し、設定 > システム > デバイス情報 > Android TV のOSビルド項目を複数回タップすると「開発者向けオプション」が表示されます
-  ChromecastのIPアドレスを調べます
-  設定 > ネットワークとインターネットで接続済みのWifiを選択しIPアドレスを確認します
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320838/20217208-68de-1775-86c1-577621845144.png" width="600">
- adbコマンドを使えるようにする

## adbコマンドを使えるようにする
terminalにて下記を実行

```
$ nano ~/.bash_profile
```

bash_profileにexportを追加する

```
export ANDROID_HOME=/Users/$USER/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
```
反映させる

```
$ source ~/.bash_profile
```

adbのバージョン確認ができたらadbの設定は完了になります

```
$ adb version

//Android Debug Bridge version 1.0.41
```

>設定 > ネットワークとインターネットで接続済みのWifiを選択しIPアドレスを確認します

上記で確認したIPアドレスを以下のコマンドを入力すればAndroid TVアプリをビルドできます

```
$ adb connect xxx.xxx.x.xxx:xxxxxx
```
Django を gunicorn で Nginx にデプロイする

こちらのページを参考にしました。
[nginxとgunicornでDjangoをデプロイする](https://www.codetd.com/ja/article/12872591)

Django のプロジェクトが /var/www/html/proj01 にあるとします。

```text
$ tree -L 1 /var/www/html/proj01/
/var/www/html/proj01/
├── api
├── db.sqlite3
├── home
├── manage.py
└── proj01
```

#gunicorn の設定ファイルの作成#

```text:/etc/systemd/system/gunicorn.socket
[Unit]
Description=gunicorn socket

[Socket]
ListenStream=/run/gunicorn.sock

[Install]
WantedBy=sockets.target
```

```text:/etc/systemd/system/gunicorn.service
[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=www-data
Group=www-data
WorkingDirectory=/var/www/html/proj01
ExecStart=/usr/bin/gunicorn \
          --access-logfile - \
          --workers 3 \
          --bind unix:/run/gunicorn.sock \
          proj01.wsgi:application
[Install]
WantedBy=multi-user.target
```

サービスの起動

```bash
sudo systemctl start gunicorn
```

確認

```bash
sudo systemctl status gunicorn
```

socket の確認

```bash
curl --unix-socket /run/gunicorn.sock localhost
```

#Nginx の設定ファイルの修正#

```text:/etc/nginx/sites-available/default
server {
（省略）
location /api/ {
     include proxy_params;
     proxy_pass http://unix:/run/gunicorn.sock;
     }
}

確認

```bash
sudo nginx -t
```

Nginx の再起動

```bash
sudo systemctl restart nginx
```

アクセスして確認

```bash
http http://localhost/api/
```
djangoのバリデーションについてまとめる（第2回〜cleanメソッド編)

今回のお題
-
今回はdjangoの`clean`メソッドについてまとめます。

以下の記事の続きですね。

https://qiita.com/keishi04hrikzira/items/1cdace38179ab0ac3d55

目次
-
- cleanメソッドとは
- clean_xxxを作る
- cleanメソッドを作る
- まとめ

cleanメソッドとは
-
独自のバリデーションを設定するためのメソッドで、その名の通り`clean()`または`clean_フィールド名()`という形式で命名します。

単一のフィールドを検証する場合であれば`clean_xxx()`、複数のフィールドにまたがった検証を行うのであれば`clean()`メソッドを用います。

clean_xxxメソッドを作る
-
まずは単一のフィールドを検証する`clean_xxx()`メソッドを作ります。

`cleanメソッド`は基本的にforms.pyに定義します。

```python:forms.py
class ReviewForm(ModelForm):
  def clean_body(self):
    body = self.cleaned_data.get("body")
    if body == "ばか":
      raise forms.ValidationError("ばかと入力しないで下さい")
    return body

  class Meta:
    fields = "__all__"
```
ポイントは3つで、

- 検証するフィールドの値は`cleaned_data`を用いて取得する
- 検証に引っかかった場合には`forms.ValidationError`を投げる
- 最後にフィールド値を返す。

この3つを行う必要があります。

ちなみに、`cleanメソッド`全般に言えることですが、組み込みバリデーターや自作メソッドと違って`models.py`で適用するバリデーターとして登録する必要はありません。

なぜかというと、djangoでは`is_valid`メソッドが実行された時点で`clean_フィールド名`メソッドや`clean`メソッドが自動で実行される仕様になっているからのようです。

cleanメソッドを作る
-
では、次に`cleanメソッド`を作ります。

```python:forms.py
# ...省略...
def clean(self):
  cleaned_data = super().clean()
  name = cleaned_data.get("name")
  nickname = cleaned_data.get("nickname")
  if name == nickname:
     raise forms.ValidationError("登録者名とニックネームを同じにしないで下さい")
  return cleaned_data
```
基本的には`clean_xxx`メソッドと同じですが、`clean`メソッドに関してはデフォルトで用意されているのでそれをオーバーライドする形になります。

参考：django/forms/forms.pyのcleanメソッド

```python:django/forms/forms.py
def clean(self):
        """
        Hook for doing any extra form-wide cleaning after Field.clean() has been
        called on every field. Any ValidationError raised by this method will
        not be associated with a particular field; it will have a special-case
        association with the field named '__all__'.
        """
        return self.cleaned_data
        # ただ単にcleaned_dataを返すだけ
```

まとめ
-
- forms.pyの中でcleanメソッドを定義すると自動で実行されるようになる。
- メソッド名は単一のフィールドを検証する場合には`clean_フィールド名`、複数のフィールドが絡む場合には`clean`
- メソッドの戻り値は検証しているフィールド値もしくは`cleaned_data`全体で、検証違反があった場合には`forms.ValidationError`を投げる。
- 後者の`clean`メソッドに関してはオーバーライド形式で定義する。

個人的には自作バリデータよりも便利だと感じたので、積極的に使っていきます。
爆速ターミナル

爆速と噂の`Alacritty` を導入した

![スクリーンショット 2021-11-04 12.08.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2245182/824699ad-9343-e040-eee8-2137713661a6.jpeg)


### 導入した環境

`Alacritty` 
`tmux `
`powerline-shell(プロンプト)`
`HackGen35Nerd(Font）`

### 導入するメリット

・かなりの爆速
　よくわからないが `GPU` 高速レンダリングというらしい
・拡張性がめちゃ高い
・導入するにあたって環境構築の知識がかなりつく
　一部コマンドラインで対応出来ない箇所があり、コンパイルする必要も
　その他 `.zshrc` 等を触る箇所もある
・したがって環境構築の自信がつく
・シェルスクリプトがなんとなくわかるようになる
　

### 導入するデメリット

・導入するのに時間がかかる
　自分は慣れてないので２日かかった
・`Alacritty` 単体では機能が少ない
　ネット上ではその補完として 
　`Alacritty + Tmux` がおすすめされていたので
　自分はこの環境を導入した
・`GUI` での操作が出来ない
　 `Alacritty` も `Tmux` も`CUI` 操作しか出来ないので
　 `ymlファイル`や`confファイル`を自分で設定する必要がある
・`Tmux` のカスタマイズ性とスペックが明らかに身の丈を超えている
　今思えば `Alacritty` だけでも充分よかった
・`powerline` の矢印の文字化けをなおすのに苦労する
  　フォントによっては文字化けが起こる
Vueを始めるにあたって参考にしたサイト・動画

#最近Vueの勉強を始めたので参考にした記事を貼っていきます

これまではJSとPHPとフレームワークのLravelの勉強をしていました

##バージョンについて
最初にどちらのversionでやるかで悩みましたがとりあえずV3にしました




##Vueの基本的なこと
https://www.youtube.com/watch?v=wlCwyouRbtE

https://www.youtube.com/watch?v=JxXtAsHR4K0

##ミニアプリを作成
https://www.youtube.com/watch?v=dP652Gi_57k

##コース
https://www.youtube.com/watch?v=YrxBCBibVo0
「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？#Webアプリ #料理 #献立 #家庭内戦争回避 #夕飯戦争回避

:egg::curry::fork_and_knife:<font color="#ff0000">**毎日毎日献立を考えるのって大変と母がよく言っていた**</font>:fork_and_knife::ramen::spaghetti:
「何食べたい？」って聞かれたら「なんでもいい」なんて言ってはいけないのです。
家族に夕飯を作ってもらっている人は文句は言えないんですよ・・・
「なんでもいい」なんて言った日には（一方的に受けるだけの）<font color="#ff0000">**家庭内戦争**</font>の開始ゴングが鳴るんです。
そんな:warning:**家庭内戦争**:warning:を回避したく、Webアプリを考えてみました。

<details><summary><font color="#ff0000">**戻れるなら「なんでもいい」という前に戻りたい・・・**</font>（クリックで開けます）</summary>
ささいなことで手がはなせなくて**つい**クチから出てしまった「なんでもいい」
「もう知らない！勝手に食べて！」と言われたあの日。
「はっ」としたときにはもう手遅れ。
冷蔵庫には納豆のみ、トースト1枚だけしかない、お米も炊けていない。
そんな夜・・・<font color="#4169e1">**あんなひもじい夜は二度と過ごしたくない**</font>:bread:
</details>

#「なんでもいい」という前に
このWebアプリを使って「なんでもいい」以外の言葉、探してみませんか？
付属しているお買い物メモも使って<font color="#ff0000">「買い物に行ってくるよ！」「一緒に買い物行こう！」</font>と提案できるかもしれません！:sparkles:**家庭内戦争回避**:sparkles:

https://keen-thompson-f973a4.netlify.app


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こんなんでいいのだろうか？と思いつつ、これ以上は無理だぁ・・・<a href="https://twitter.com/hashtag/protoouto?src=hash&amp;ref_src=twsrc%5Etfw">#protoouto</a> <a href="https://twitter.com/hashtag/%E7%8C%AE%E7%AB%8B?src=hash&amp;ref_src=twsrc%5Etfw">#献立</a> <a href="https://twitter.com/hashtag/%E6%96%99%E7%90%86%E8%A8%98%E9%8C%B2?src=hash&amp;ref_src=twsrc%5Etfw">#料理記録</a> <a href="https://t.co/hZlnPu42Gh">pic.twitter.com/hZlnPu42Gh</a></p>&mdash; yui-ko (@yui8686kouy) <a href="https://twitter.com/yui8686kouy/status/1455729906348802049?ref_src=twsrc%5Etfw">November 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwZjpGd" data-user="yui-ko" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yui-ko/pen/RwZjpGd">
  料理とお買い物メモ</a> by yui-ko (<a href="https://codepen.io/yui-ko">@yui-ko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#今回チャレンジしたこと
https://qiita.com/yui-kouy/items/b716484142bae22f1db0


#搭載したかった機能
・英語を日本語へ翻訳する
・お買い物メモを一個ずつ指定して削除する


#感想
・英語データを取得してくるため、日本語訳したうえで表示したかったのですが、上手くできませんでした。
　今までの課題でも日本語訳については何度もチャレンジするもうまくできない問題があるので、良い加減実装していきたいところです。
JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットする方法 (date-fnsなどのライブラリなしで)

JavaScriptで`Date`オブジェクトをdate-fnsなどのライブラリなしに年月日形式(`yyyy/MM/dd HH:mm:ss`)に変換する方法です。

日付のフォーマットには`Intl.DateTimeFormat`を用います。

```js
const date = new Date(2001, 0, 2, 3, 4, 5);
const d = new Intl.DateTimeFormat("ja-jp", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
}).format(date);
console.log(d); //=> "2001/01/02 03:04:05"
```
<abbr>タグの下線を非表示にするCSSコード

HTMLで<abbr>タグを実装する時に表示される下線をCSSで非表示にする方法です。

## abbrタグとは

「ABBR」とは、「abbreviation」の略で、略語を示すタグ。

> 例えばWWW（World Wide Web）やInc.（incorporated）、HTTP（HyperText Transfer Protocol）、HTML(Hypertext Markup Language)、XML(Extensible Markup Language)、Ltd.（Limited）などの言葉を略す際に使用されます。
https://html-coding.co.jp/annex/dictionary/html/abbr/

abbrタグの実装コードは以下の通り。

```html
<p><abbr title="World Wide Web">WWW</abbr></p>
```
これを実装すると以下の画像のように文字に下線が表示される。

![スクリーンショット 2021-11-04 11.57.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522445/63d1f123-f7db-185e-ed4e-d4718203fae5.png)

デザイン的に邪魔だと感じたのでこれをCSSで非表示にします。

## abbrタグの下線を非表示にするCSSコード

```css
abbr[title] {
    text-decoration: none;
    border: none;
}
```

この2行のCSSでabbrタグの下線を非表示に出来るかと思います。

## HTML/CSSのお役立ち情報

https://wagtechblog.com/programing/html-css-school