OmniAICreator/Qiita-1.07M huggingface dataset:
階層化した Pythonのimportでハマった

#概要
初めてpythonファイルを階層化したとき
import周りでハマった為、自分用に

#環境
- python 3.8.3

#フォルダ構成
>AAA/
&emsp;├AA.py
&emsp;├BBB/
&emsp;&emsp;&emsp;├BB.py
&emsp;&emsp;&emsp;└CC.py

#ソース
```python:AA.py
from BBB.BB import B

class A():
    def __init__(self):
        pass
```

```python:BB.py
from CC import C

class B():
    def __init__(self):
        pass
```

```python:CC.py
class C():
    def __init__(self):
        pass
```

#行動したこと
BB.pyとCC.pyを実装して、動作確認した後
階層化して外から呼び出すため、フォルダ:BBBとAA.pyを作成した
AA.pyを実行したら予想外のエラーが出た

#発生したエラー
```text:AA.pyのerror
    from CC import C
ModuleNotFoundError: No module named 'CC'
```

#敗因
**BB.py単体**では実行できたから、import文は間違ってないはず
なんで存在するのに呼び出されないのか

#解決
BB.pyのimport文にディレクトリ名を追加する

```python:newBB.py
from BBB.CC import C
```
とても単純なことですが、実行できないことが意外だったため
自戒として心に刻みます

#本当の敗因
フォルダ名,ファイル名,クラス名をすべて同じ名前にして作ったため
**解決**と同じ手段を取ったのに解決できず、発見が遅れた

フォルダ名とファイル名が同じだと、importで自身を参照し、同じエラーが発生する
本当に戒めるべきなのは、ファイルの命名規則ですね
「【Ruby】4乗ガウス問題」を参考にWolframAlphaとSymPy Liveでやってみた。

(オリジナルポスト)

https://qiita.com/YotaHamasaki/items/c0c69377ff3e3453981a


#WolframAlphaで

https://ja.wolframalpha.com/input/?i=Sum%5Bi%5E4%2C+%7Bi%2C1%2C50%7D%5D+

総和で

https://ja.wolframalpha.com/input/?i=%E7%B7%8F%E5%92%8C&assumption=%7B%22F%22%2C+%22Sum%22%2C+%22sumupperlimit2%22%7D+-%3E%2250%22&assumption=%7B%22F%22%2C+%22Sum%22%2C+%22sumfunction%22%7D+-%3E%22x%5E4%22&assumption=%7B%22C%22%2C+%22%E7%B7%8F%E5%92%8C%22%7D+-%3E+%7B%22Calculator%22%7D&assumption=%7B%22F%22%2C+%22Sum%22%2C+%22sumlowerlimit%22%7D+-%3E%221%22

#SymPy Liveで
https://live.sympy.org

```python
i=symbols('i',integer=True)
print(summation(i**4, (i, 1, 50)))
#65666665
```
【CentOS7】sambaでの共有フォルダへのアクセスが遅いことへの対処法

# 環境
* CentOS7
* Sambaを使用したファイルサーバ

# 対処法
###１．`/etc/samba/smb.conf`の[global]に以下の設定を追加する
`vi /etc/samba/smb.conf`で編集する。

```:/etc/samba/smb.conf
[global]
...
dfree cache time = 60
...
```

###２．firewalldに80/tcp(http)ポートの開放設定を追加する
以下コマンドを実行する

```
# firewall-cmd --add-service=http
```

以下実行し、httpがservicesに追加されていることを確認する。

```
# firewall-cmd --list-all
...
services: dhcpv6-client http samba ssh
...
```
【M1 mac】docker-composeでMySQLを使用した時のエラー解消法

Laravelのwebアプリ作成のためにdocker-composeで環境構築をしており、MySQLを使用しようとしたらエラーが発生しました。
無事にエラーを解消できたので、エラー解消方法についてメモします。

## 開発環境
M1 mac使用
docker-compose version'3'
MySQL '5.7'

##docker-compose.ymlの記載内容

docker-compose.ymlには以下のような内容で記載していました。

```:
version: '3'
services:
  web:
　     〜中略〜
  app:
　     〜中略〜
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: sample
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
volumes:
  mysql-data:
```

##発生したエラー

上記の内容の通り、docker-composeでMySQLを使用したところ以下のようなエラーが発生しました。

```
docker: no matching manifest for linux/arm64/v8 in the manifest list entries.
```

##エラーの原因と解消方法

調べたところM1macを使用していると発生するエラーとのこと。
解決方法としてdocker-compose.ymlにplatform指定をすれば良いらしい。


```:
version: '3'
services:
  web:
　     〜中略〜
  app:
　     〜中略〜
  mysql:
　　　　　　　　　platform: linux/x86_64 #M1　mac対応のためこのコードを追記
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: sample
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
volumes:
  mysql-data:
```

これで無事にdocker-composeでMySQLを使用することができました！！
残プロ　第-5回　~今週のまとめ~

#　一週間のまとめ

第-0回　自分に残された時間(60年:21915日)を計算しメメントモリ．LINENotifyで通知．
第-1回　Taskクラス追加．
第-2回　taskをcsvデータで管理．pandasを使用．
第-3回　pandasに触れる．タスクを使い捨てか習慣的か判別．
第-4回　実用例【LINENotifyを利用して生存確認】


# 現状確認

作成目標　**【タスク管理システム】**
未確定部分は「やりたい」よりも，「出来る」優先で実装していきます．タスク以外にもいろいろなものを統括して管理できるようにしたいなぁ．

![タスク管理_概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578927/ac0866ea-d82b-317a-7139-8c7e54bd2bb3.png)


# 来週の予定

タスク管理部分を完成予定．csv形式で仮確定．
あと21910日！
optionの値によって表示する画像を変える方法

#やりたかったこと
・selectタグのoptionの値によって表示させる画像を変えたい。

```
//bladeファイル

 <select name="grade" id="grade">
   <option value="チャンピオン">チャンピオン</option>
   <option value="ダイヤ">ダイヤ</option>
   <option value="プラチナ">プラチナ</option>
   <option value="ゴールド">ゴールド</option>
   <option value="シルバー">シルバー</option>
   <option value="ブロンズ">ブロンズ</option>
   <option value="コッパー">コッパー</option>
 </select>

//ダイヤを選んだらダイヤの画像を表示させたい
```

controller

```
	public function index(){
		$posts = Post::get();
		return view('posts.index', compact('posts'));
	}

	public function add(Request $request){
　　　　　//selectで選んだデータをgradeに入れる
		$param =[
			'grade' => $request->grade,
		];
　　　　　//DBにgradeのデータを格納
		DB::table('posts')->insert($param);
		return redirect('/posts/index');	
	}
```

表示させたいbladeファイル

```
//posts/index.blade.php
//画像の名前をoptionの名前と同じにする
<img src="/images/{{$post->grade}}.png" alt="" class="post-list-img">
```

そしたら表示できた。
ArduinoのVScodeを使った開発環境構築

# ArduinoをVScodeで書けるようにしたい。

Arduinoのソースコードを書きたい。でもArduino IDEはやだ！というわけでArduinoを万能エディタのVScodeで使えるようにする設定です。

## 手順
1. 拡張機能のArduino for Visual Studio Codeをインストール
2. 拡張機能の設定
3. 起動テスト

# 1. 拡張機能のArduino for Visual Studio Codeをインストール

まずは拡張機能のArduino for Visual Studio Codeをインストールしていきます。

拡張機能をクリックし、検索ボックスに`Arduino`を入力します。

マーケットプレースの一覧に`Arduino`が出てきます。

この時、`Arduino`の名前の拡張機能がいくつか出てくると思います。`Microsoft`の拡張機能を選択してインストールしてください。
![スクリーンショット (203).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844088/1601eb17-c6fc-6934-2785-2fee51445b94.png)

# 2. 拡張機能の設定

次にVScodeとArduino IDEの設定を行います。

vscodeの上部タブから`ファイル`→`ユーザ設定`→`設定`を選択すると設定タブが開かれます。そして`よく使用するもの`の下部にある`拡張機能`から`Arduino configuration`をクリックします。以下のような画面にたどり着きます。

![スクリーンショット (205).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844088/24f0ed86-f992-67e2-7ada-f2f77a9c5496.png)

次に`Arduino: Path`と`Arduino: Command Path`をそれぞれ設定します。
設定画面の順番は上に`Command Path`、下にいくと`Path`がありますが説明手順の関係上先に`Path`の方を紹介します。

## Path
説明文のGoogle翻訳は以下です。

```
Arduinoへのパス。この設定を変更してフルパスを含めることで、Arduinoのカスタムバージョンを使用できます。
 例: Windows の場合は「C:\Program Files\Arduino」、Mac の場合は「/Applications」、Linux の場合は「/home/$user/Downloads/arduino-1.8.1」。
（変更後は再起動が必要）
```
Pathに関しては`C:\Program Files\Arduino`か`C:\Program Files(x86)\Arduino`がデフォルトの設定でインストールされるっぽいです。ただ違う場所にインストールしたけどどこだっけという方もいると思います(私もそうでした)

探索方法は単純です。タスクバーにある検索ボックスに`Arduino`と入力するとArduinoのアイコンが表示されます。
その下にある`ファイルの場所を開く`をクリックします。
![スクリーンショット (207).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844088/2d89e91d-3af7-856c-152c-abea4af6fd76.png)

エクスプローラーに自身がインストールしたArduinoのフォルダが表示されます。
この時、エクスプローラーに表示されるPathを`Arduino: Command Path`の設定画面で指定します。

自分の場合は`C:\Users\~いくつかのディレクトリ~\arduino-1.8.13`でした。



## Command Path
説明文をGoogle翻訳にかけたのがこちらです。

```
「arduino.path」に関連するスクリプトへのパス。この設定を変更することで、カスタム起動スクリプトを使用して Arduino を実行できます。
 例: Windows の場合は「run-arduino.bat」、Mac の場合は「Contents/MacOS/run-arduino.sh」、Linux の場合は「bin/run-arduino.sh」。 
（変更後は再起動が必要） 
```
こちらは、先ほど指定した`arduino-1.8.13`の中にある`arduino_debug.exe`を指定します。こちらはexeファイルのみで問題ないです。

これで設定は終わりです。
# 3. 起動テスト
VScodeは説明文にある通り、再起度してinoファイルをVScodeで開いてください。

VScodeの画面右下の表示が画像のようになります。
![スクリーンショット (210).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844088/74d42bfa-1c03-2274-48ea-8bc70c7221be.png)

もし、変化しない場合でも、画面右上に画像のような表示になっている場合は箱に下矢印が向いてるマークをクリックしてください。`Arduino : upload`と表示されて、右下画面が先ほどの画像の通り変化します。

![スクリーンショット (209).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844088/277c8ffa-3e95-c5a7-f3b4-ca1c9e709d96.png)

ここまでできていたらVScodeからArduinoのコードを書くことができます。
Windows 10 にNetBeans 12.4 をインストールしてみる

# 目的
Apache管理下になってからまだNetBeansを設定していなかったので試してみる

## ファイルのダウンロード
・本体のダウンロード
　[Apache NetBeans Releases](http://netbeans.apache.org/download/index.html)よりApache NetBeans 12 feature update 4 (NB 12.4)のダウンロードボタンを押下する
・日本語化ファイルのダウンロード
　[junichi11/netbeans-translations-ja](https://github.com/junichi11/netbeans-translations-ja/releases)より最新版のnbmをダウンロードする
　今日現在では org-apache-netbeans-localise-ja-0.0.2.1.nbm

## NetBeansのインストールと日本語化

※諸事情によりVerupできないのだが、Verupしろと文句を言ってくる・・・
<pre>
PS C:\> java -version
java version "1.8.0_291"
</pre>
・netbeans-12.4-bin.zipを解凍して、適当なフォルダに配置する
・Tools -> Plugins -> Download タブより Add Plugins ボタンを押下して上記でDLした nbm を読み込む
・再起動後メニュー等が日本語化されます

## ペインのフォントサイズ指定の変更
\path\to\netbeans\etc\netbeans.confに以下の修正を行う
netbeans_default_options の最後に' --fontsize 16'を追加する
<pre>
netbeans_default_options="～ -J-XX:+IgnoreUnrecognizedVMOptions --fontsize 16"
</pre>

## tomcatと連携してみる
※tomcatは既にインストール済
環境変数の確認は以下で行う

Windows Powershell
<pre>
PS C:\> $env:CATALINA_HOME
C:\tomcat90
</pre>

コマンドプロンプト
<pre>
C:\>echo %CATALINA_HOME%
C:\tomcat90
</pre>

サービスペイン -> サーバーを右クリック -> Apache Tomcat or TomEE を選択
　-> インストールとログインの詳細
　　　サーバーの場所：C:\tomcat90(環境に合わせる)
　　　ユーザー名：C:\tomcat90\conf\tomcat-users.xml の記述に合わせる
　　　パスワード：C:\tomcat90\conf\tomcat-users.xml の記述に合わせる
　-> 終了ボタンを押下

サービスペイン -> Apache Tomcat or TomEE を右クリック後起動

### NetBeans + Tomcat のコンソールの文字化けの解消
・\path\to\netbeans\etc\netbeans.confの修正
Apache Tomcat or TomEE の出パネル力が文字化けする
netbeans_default_options の最後に'-J-Dfile.encoding=UTF-8'を追加する
ペインのフォントサイズと出力パネルの文字化けの修正は以下になる
※修正ミスはNetBeansが起動しなくなる場合もあるのでnetbeans.confのコピーをとっておく
今回の追加修正は以下になる
<pre>
netbeans_default_options="～ -J-XX:+IgnoreUnrecognizedVMOptions --fontsize 16 -J-Dfile.encoding=UTF-8"
</pre>

### Apache Tomcat or TomEEログとPowershellから起動した場合の文字化けの解消
C:\tomcat90\conf\logging.properties で起動方法に応じて修正する

・NetBeansから起動する場合は以下の様に修正する
Apache Tomcat or TomEE
<pre>
java.util.logging.ConsoleHandler.encoding = UTF-8
&#035;java.util.logging.ConsoleHandler.encoding = SJIS
</pre>

・Powershellから起動する場合は以下の様に修正する
<pre>
&#035;java.util.logging.ConsoleHandler.encoding = UTF-8
java.util.logging.ConsoleHandler.encoding = SJIS
</pre>

## JDBCドライバの設定
各ドライバは以下のサイトよりDL後解凍して適当なフォルダに配置する
[Microsoft SQL Server 用 JDBC Driver のダウンロード](https://docs.microsoft.com/ja-jp/sql/connect/jdbc/download-microsoft-jdbc-driver-for-sql-server?view=sql-server-ver15)
[PostgreSQL JDBC Download](view-source:https://jdbc.postgresql.org/download.html)
[MySQL :: MySQL コネクタ](https://www.mysql.com/jp/products/connector/)

サービスペイン -> データベース -> ドライバをクリックする
・SQL Server
　　ドライバを右クリック -> 新規 より追加を押下後 mssql-jdbc-9.2.1.xxx.jar を指定してOKボタンを押下する

・MySQL (Connector/J driver)
　　MySQL (Connector/J driver)を右クリック -> カスタマイズより追加を押下後 mysql-connector-java-8.0.24.jar を指定してOKボタンを押下する

・PostgreSQL
　　PostgreSQLを右クリック -> カスタマイズより追加を押下後 postgresql-42.2.20.jar を指定してOKボタンを押下する

サービスペインを右クリック -> 新規接続よりドライバを選択後、DBに応じた設定を行う

# 参考にしたのは以下のサイト
[【Java】Apache NetBeans 12 をインストール、日本語化してみた](https://www.doraxdora.com/blog/2020/08/06/post-12450/)
[NetBeansのメニュー等のフォントサイズ](https://motoshikishi.blogspot.com/2020/07/netbeans.html)
[NetBeans の出力ウィンドウで文字化けする場合は](https://blog1.mammb.com/entry/20130309/1362812169)
クラウドネイティブとコンテナ

# クラウドネイティブって何だろう

定義を確認して意識を合わせることは大事だろう、もしかしたら『クラウド』AWSやGCPを使えばクラウドネイティブと考えているのではないだろうか？

## クラウドネイティブの定義
簡易に言うと、
**疎結合なシステムで、自動化と組み合わており、変更を最小限の労力で頻繁に行うことができる状態**

[CNCFの定義](https://github.com/cncf/toc/blob/main/DEFINITION.md)

```
日本語版：

クラウドネイティブ技術は、パブリッククラウド、プライベートクラウド、ハイブリッドクラウドなどの近代的でダイナミックな環境において、スケーラブルなアプリケーションを構築および実行するための能力を組織にもたらします。 このアプローチの代表例に、コンテナ、サービスメッシュ、マイクロサービス、イミュータブルインフラストラクチャ、および宣言型APIがあります。

これらの手法により、回復性、管理力、および可観測性のある疎結合システムが実現します。 これらを堅牢な自動化と組み合わせることで、エンジニアはインパクトのある変更を最小限の労力で頻繁かつ予測どおりに行うことができます。

Cloud Native Computing Foundationは、オープンソースでベンダー中立プロジェクトのエコシステムを育成・維持して、このパラダイムの採用を促進したいと考えてます。 私たちは最先端のパターンを民主化し、これらのイノベーションを誰もが利用できるようにします。
```

## 類似語の種類
- クラウドファースト
    - 一般的なシステム構築のトレンドを指す言葉
    - クラウドサービスの導入を前提とし、IaasやPaasなどのクラウドサービスを利用して構築
- クラウドバイデフォルト
    - 「政府情報システムの構築・整備に関しては、クラウドサービスの利用を第1候補（デフォルト）として考える」という方針

クラウドネイティブとクラウドファーストとクラウドバイデフォルトでは全然違うことがわかる、定義を考えない人はクラウドファーストとクラウドネイティブを一緒に考えている可能性があるので注意しよう

## クラウドネイティブを進める方法
しかし、一番の問題はそんなクラウドネイティブをつくれと言われても、どうしたらいいかわからない。

そこでこれもCNCFの情報でありクラウドネイティブを進める方法として下記進め方をおすすめされている。

* クラウドネイティブの進め方 
 1. コンテナ化
 2. CI/CD
 3. オーケストレーションとアプリケーションの定義
 4. 可観測性と分析
 5. サービスプロキシ、ディスカバリ＆メッシュ
 6. ネットワーク＆ポリシー
 7. 分散データベース/分散ストレージ
 8. ストリーミング＆メッセージング
 9. コンテナレジストリ＆ランタイム
 10. ソフトウェアディストリビューション

参照元[CNCFのクラウドネイティブの進め方](https://github.com/cncf/trailmap)
![クラウドネイティブの進め方 ](https://raw.githubusercontent.com/cncf/trailmap/master/CNCF_TrailMap_latest.png) 


ここでいう1のコンテナ化がマイクロサービス化を目指したかきかたというわけではなく、コンテナを使えばいいということだ。
# 終わりに
クラウドネイティブ化したら、いい影響は受けるだろう。
しかし既存システムをクラウドネイティブ化するにはどのようにすればいいかは、この考え方だけでは足りない。
新規システムはクラウドネイティブ化に乗ったアプローチが優先されていくだろう。そのためコンテナに関する知識は必須になってくるだろう。

最後に一言だけ言いたい。
**経験重視の日本はついていけるのか？**
wordpress カテゴリ別ページの表示方法

# はじめに
wordpressでカテゴリ別ページにアクセスできると可読性が上がると思ったので、そのために行った方法をメモしました。上記は、wordpressの無料テーマCocoonで行っています。

# 表示方法
今回は以下の３つの方法について説明します。

## サイドバーからのアクセス
外観 > ウィジェットを選択。
サイドバーに、カテゴリーのウィジェットを追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397136/ef31c8d7-7c39-7c7f-295b-f4c4d19722bf.png)


ページを表示すると、サイドバーにカテゴリが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397136/f4a5a0e0-0b0e-440e-d293-9a37c545e090.png)


## ナビゲーションバーからのアクセス
外観 > メニューを選択。
メニュー項目のカスタムリンクに、サイドバーのカテゴリのURLを指定して追加。

（ex: https://ドメイン名/category/it/）

メニュー設定の部分では、ヘッダメニューにチェックを入れることで、ナビゲーションバーが表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397136/cfb4d79c-751c-2295-584d-425f9906a058.png)


## 固定ページ + ショートコードの利用

まず、ナビゲーションバーから固定ページにアクセスするためには、上記の画像における外観>メニューの固定ページをメニュー項目に追加する必要がある。

固定ページに以下のショートコード記述する。

```
[new_list count="10" type="default" cats="12" children="0" post_type="post"]
```

パラメータはとりあえず以下を指定すれば大丈夫。

- count：記事の表示数を指定
- cats: カテゴリIDを指定

詳しくは参考のリンクを確認してみてください。

# 参考

- [https://ikuzoblog.com/cocoon-globalnavigation](https://ikuzoblog.com/cocoon-globalnavigation)
- [https://tarakochan.com/cocoon#mottomiru](https://tarakochan.com/cocoon#mottomiru)
【CentOS7】日本語処理のnkfコマンドインストール

# 環境
* CentOS7

# 手順
以下コマンドを実行

```
# yum install -y  epel-release
# yum install -y nkf --enablerepo=epel
```

# 確認
以下のように出ればOK

```
# nkf -v
Network Kanji Filter Version 2.1.3 (2013-11-22)
Copyright (C) 1987, FUJITSU LTD. (I.Ichikawa).
Copyright (C) 1996-2013, The nkf Project.
```
JavaScriptで範囲指定乱数生成

#はじめに
JavaScript(TypeScript)で乱数を作る時、いつも迷うのでここにメモしておく

## やりたいこと
最小値(min)以上、最大値(max)以下の乱数を取得する。

```random.js
const rand = (min, max) => {
  return (Math.floor(Math.random() * (max - min + 1)) + min);
};
```

```random.ts
const rand = (min: number, max: number): number => {
  return (Math.floor(Math.random() * (max - min + 1)) + min);
};
```
【エラー】管理者画面（Active Admin）に新たに管理するモデルを追加する際に経験したエラー

#はじめに
新たに管理するモデルを追加しようとした際に、エラーが出てしまった時の備忘録記事となります。
インストールの詳細は省きます。
  
同じ現象であれ？となった人の解決きっかけになれればと思います。
＊ **ActiveAdmin 特有のエラーではありません。その他エラーの際にも参考になれば幸いです。**
  　　
##環境
macOS Bigsur
Rails 6.1
Ruby 2.7

##インストール
- `gemfile` に追記

```ruby
gem 'activeadmin'
gem 'devise'
gem 'rails-i18n', '~> 6.0'
gem 'devise-i18n'
```
- ターミナルで実行

```
bundle install
```
  
##エラー
***【今回追加するモデル】　Movie***

### uninitialized constant モデル名 (NameError)   Did you mean?
  
- 初期化されていない定数があるときにエラーが発生
- 管理者画面で管理するデータを登録するテーブルがないときにエラーが発生
(例) uninitialized constant Movie(NameError)   Did you mean?
  
- 下記を実行しテーブルを作成することで解決

```ruby
rails g model User
rails db:migrate
```
  
### conflict config/initializers/devise.rb　Overwrite /Users/ユーザー名/アプリ名/config/initializers/devise.rb? (enter "h" for help) [Ynaqdhm]

- `rails g devise:install` を　インストールしてから `rails g active_admin:install`をインストールしないと`devise.rb`ファイルがコンフリクトする
  
- `[Ynaqdhm]`の後に入力を求められるので、問題がなければ `y` を入力することで上書きできる。

### PG::DuplicateTable: ERROR:
  
- テーブルが重複しているときに発生
- エラー詳細
  - (例)movies が重複

```
rails db:migrate
== 20210605042245 CreateMovies: migrating =====================================
-- create_table(:movies)
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DuplicateTable: ERROR:  relation "movies" already exists
```

- データベースの重複しているテーブルを削除することで解決

```
drop table テーブル名;
```
```
rails db:migrate
```
(例) movies テーブルを削除

```
drop table movies;

rails db:migrate
```
T4（Text Template Transformation Toolkit）のTips



T4はC#でC#を作れる便利な子（C#じゃなくてもいいけど）
実装していて迷ったことをメモします。



* Visual studio 2019
* .net 5

# 開発環境のとり方

何処かのフォルダーに置かれている、CSVだったりXMLだったりExcelだったりをもとに大量にソースコードを生成したい場合などあると思います。
そんな時に例えばVisual studioのソリューションフォルダを取得するには次のような感じにします。

~~~ C#
<#@ template debug="true" hostspecific="true" language="C#" #>
<#@ assembly name="System.Core" #>
<#@ assembly name="EnvDTE" #>
<#@ import namespace="EnvDTE" #>
<#@ output extension=".txt" #>

<#
    var serviceProvider = this.Host as IServiceProvider;
    var dte = serviceProvider.GetService(typeof(EnvDTE.DTE)) as EnvDTE.DTE;
    var solutionFolder = System.IO.Path.GetDirectoryName(dte.Solution.FullName);
#>
<#=solutionFolder#>
~~~

*ポイント*
hotspecific="true"
⇒Hostを使用するようにします。

EnvDTEを使えるようにする
⇒ここから開発環境情報を取得します。

参考にしたMSDNはココ
https://docs.microsoft.com/ja-jp/visualstudio/modeling/writing-a-t4-text-template?view=vs-2019

# インクルードガード

C#をメインにしていると忘れてしまいがちな多重インクルードの防止です。↓

~~~
#ifndef HOGE
#define HOGE


#endif 
~~~

~~~
#pragma once
~~~

T4でも対策しておかないと多重インクルードで怒られます。

## ダメな例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675344/ff63d6e4-7d03-3c86-7a02-b1ac15baed1d.png)


**Main.tt**

~~~ C#
<#@ template debug="true" hostspecific="true" language="C#" #>
<#@ assembly name="System.Core" #>
<#@ include file="file1.ttinclude"#>
<#@ include file="file2.ttinclude"#>
<#@ output extension=".txt" #>

<#
    var str1 = ReturnString1("test print1");
    var str2 = ReturnString2("test print2");
#>
<#=str1#>
<#=str2#>
~~~

**file1.ttinclude**

~~~ C#
<#@ template debug="true" hostspecific="true" language="C#" #>
<#@ assembly name="System.Core" #>
<#@ include file="file2.ttinclude"#>
<#+
    static string ReturnString1(string message)
    {
        return ReturnString2(message);
    }
#>
~~~

**file2.ttinclude**

~~~ C#
<#@ template debug="true" hostspecific="true" language="C#" #>
<#@ assembly name="System.Core" #>
<#+
    static string ReturnString2(string message)
    {
        return message;
    }
#>
~~~

怒られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675344/e8ae6ee2-5ac6-6da7-1133-ab23be083c4d.png)

## 対策

他のファイルをインクルードしているところに **once="true"**をつけます。

~~~ C#
<#@ include file="ファイル名" once="true" #>
~~~

MSDNはここ
https://docs.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2015/modeling/t4-include-directive?view=vs-2015&redirectedfrom=MSDN

# ファイル出力したくない場合

カスタムツールTextTemplatingFileGeneratorでT4実行すると<# output extension="xxxx" #>で指定した拡張子でファイルが生成されます。
しかし一つのT4から複数のファイルを生成したかったり、生成するファイルの名前、場所をカスタマイズしたい場合に、T4のファイル生成機能が邪魔になる場合があります。
カスタムツールとして使いたいけどファイル生成は抑制したい。そんな時は拡張子として"/"を指定してやるとファイル生成されなくなります。

~~~ C#
<#@ output extension="/" #>
~~~

MSDNにはこのような情報はなく、StackOverFlowから見つけました。
https://stackoverflow.com/questions/12909097/t4-templates-generates-unwanted-output-file

# 複数ファイル出力

（追記予定）
Visual StudioでAzure Fucntionsのアプリケーションをデバック実行する際に毎回ダウンロードさせられる不具合を直す。

#はじめに
これはVisual StudioでAzure Fucntionsのアプリケーションをデバック実行する際に、
毎回ダウンロードされて効率が悪い不具合を修正した際の備忘録として記述。

#下記のメッセージのせいで作業が全然進まない。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496296/0ffd5fc2-356d-5334-3519-23cb8fab3949.png)
###なんかCliが無さそう。。
#cliが保存されているディレクトリを見てみる
Google先生に聞いてみると下記にcliが保存されているらしい。
`C:\Users\{UserName}\AppData\Local\AzureFunctionsTools\Releases`
早速自分の最新のバージョンを確認してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496296/fcf48a04-046c-b9ec-8262-24cc8d8b59c2.png)
圧倒的に空。。

#なのでcliを追加する
普通に[github](https://github.com/Azure/azure-functions-core-tools)からダウンロードした方がよさそうだが、自分は別のバージョンに入っていたのを確認したので、それをまるまるコピーした(笑)


以上でデバック実行を行うと毎回のダウンロードする処理が走らなくなった！！

##参考
https://stackoverflow.com/questions/58658348/visual-studio-2019-re-downloads-azure-function-cli-tools/60342560#60342560
Laravelルートパラメータ解説

# ルートパラメータとはURLのパスの設定の事である。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/a1b1ab28-b98a-00b4-39a8-b6263828ce48.png)



# ルーティング

```PHP
<?php
Route::get('/route_parameter/{id_01}/comments/{id_02}', 'SampleController@routeParameter');
```

# コントローラー

```PHP
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
 
class SampleController extends Controller
{ 
    public function routeParameter($id_011, $id_021){
      return view('samples.route_parameter', [
        'title' => 'ルートパラメータのサンプル',
        'id_0111' => $id_011,
        'id_0211' => $id_021,
      ]);
    }
}
```

# ビュー

```PHP
@extends('layouts.default')
 
@section('title', $title)
 
@section('content')
<h1>{{ $title }}</h1>
<p>id: {{ $id_0111 }}</p>
<p>comment_id: {{ $id_0211 }}</p>
@endsection
```

# 共通レイアウトファイル

```PHP
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <style>
        .header_nav {
            display: flex;
            list-style: none;
            padding-left: 0;
        }
        .header_nav li {
            margin-right: 30px;
        }
    </style>
</head>
<body>
    @yield('header')
    @yield('content')
</body>
</html>
```
シェルスクリプトでフィボナッチ数を求める

# はじめに

以前に[【Oracle】PL/SQLでフィボナッチ数を求める](https://qiita.com/nkojima/items/a046b4c295ed75977626)という記事を書いたので、同様にシェルスクリプト（Bash）でもフィボナッチ数を求めるスクリプトが作れるのではと思い、実際に試してみることにしました。

# 使用した環境

* [paiza.ioのBashエディタ画面](https://paiza.io/ja/projects/new?language=bash)を利用して、作成したスクリプトを実行しました。
  * 無料で実行環境を使わせてもらえるのはありがたいですね。

# 作成したコード

* 最初はPL/SQLと同様に再帰させてフィボナッチ数を求めようと思っていましたが、 **シェルスクリプトは戻り値が存在しない** ということに気が付いて断念しました。
  * 日常的にシェルスクリプトを使っている方には当たり前の話かもしれませんが、たまにしか使わない自分には衝撃的でした...
* そこで、[アルゴリズムで天地の差: 計算の手間](http://www.aoni.waseda.jp/ichiji/2014/ruby-01/ruby-14-1.html)の「再帰も配列も使わないフィボナッチ数の計算」という章に書かれているRubyのコードを参考にして、再起を使わない方法でフィボナッチ数を求めることにしました。
* なお、参考にしたページでは第2項目～第n項目までのフィボナッチ数を求めていますが、そのアルゴリズムを少し変えて第0項目～第n項目までのフィボナッチ数を求めるコードを作成しました。
  * ただし第n項目の「n」が大きくなると処理に時間がかかるため、「0～100までの間のフィボナッチ数を求める」という形に修正しました。

```bash:calc_fibonacci.sh
#!/bin/bash

# 再帰も配列も使わず、0～100までの間のフィボナッチ数を返す。
# http://www.aoni.waseda.jp/ichiji/2014/ruby-01/ruby-14-1.html

result=0              # フィボナッチ数の計算結果
p1_result=0           # 1つ前のフィボナッチ数の計算結果
i=0                   # ループのカウンタ変数

while true
do
  if [ $i -eq 0 ]; then
    result=0
  elif [ $i -eq 1 ]; then
    result=1
    p1_result=1
  else
    p2_result=$p1_result  # 1つ前の計算結果を2つ前の計算結果に代入
    p1_result=$result     # 直前の計算結果を1つ前の計算結果に代入
    result=$(($p1_result+p2_result))
  fi
  
  if [ $result -gt 100 ]; then  # 計算結果が100より大きい時は処理を抜ける。
    break
  fi

  echo $result
  i=$((i + 1))
done
```

# 実行結果

```text:実行結果
0
1
2
3
5
8
13
21
34
55
89
```

# 参考URL

* [アルゴリズムで天地の差: 計算の手間](http://www.aoni.waseda.jp/ichiji/2014/ruby-01/ruby-14-1.html)
Python でも Composer や NPM みたいに依存パッケージをプロジェクトごとにインストールしたい

## はじめに
`PHP` だと [Composer](https://getcomposer.org/)、`JavaScript` だと [NPM](https://www.npmjs.com/) といったパッケージマネージャーがあります。
`Python` だとそれが、 [pip](https://pypi.org/project/pip/) になるわけですが、`Composer`や`NPM`と違い、（標準では）プロジェクト別のパスにパッケージをインストールしないので、複数プロジェクトを管理するのが難しくなったりします。 　
この記事では、`Python`プロジェクトの依存パッケージをプロジェクト別のパスにインストールし、`Docker`化する方法について記載します。

## 構成
シンプルな`Flask`のアプリをビルド、起動します。

`docker-compose.yml`

```yml
version: "3"

services:
  app:
    build: .
    working_dir: /app
    volumes:
      - ./app:/app:cached
      - ./vendor:/vendor:cached
    expose:
      - 5000
    ports:
      - 127.0.0.1:5000:5000
    environment:
      PYTHONUSERBASE: /vendor
      PATH: $PATH:/vendor/bin
```

`Dockerfile`

```Dockerfile
FROM python:3-slim

RUN apt-get update && apt-get install -y build-essential aptitude
# その他、必要なものをインストール
```

`app/requirements.txt`

```txt
boto3
Flask
```

`vendor/.gitignore`

```
*
!.gitignore
```

`app/main.py`

```python
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello !!'

if __name__ == '__main__':
    app.run(host='0.0.0.0')
```

`Makefile`

```
install:
	docker-compose build --no-cache
	docker-compose run --rm app pip install -r requirements.txt --user

run:
	docker-compose run --rm --service-ports app python main.py
```

　ローカルで、プロジェクトをビルドし、`Flask`アプリを起動するには、以下のコマンドを実行します。

```bash
$ make install && make run
```

## ポイント
ポイントは以下の2点です。

- `pip install` する際に `--user` オプションを付与
- 環境変数 `PYTHONUSERBASE` にプロジェクトごとのパッケージをインストールするパスを指定する

## 参考にしたリンク
- https://asukiaaa.blogspot.com/2020/07/docker-python-pip-install-without-rebuilding.html

## おわりに
`Composer` だと `vendor`、`JavaScript` だと、 `node_modules` ようにサブディレクトリに依存パッケージがインストールされるので、`Python` もそういう風にできないかなと思って調べていたら、やり方が見つかったので、記事にしてみました。

誰かのお役に立てれば幸いです。
ではでは。
ラズパイ教室の初期負担を減らしたい

# 背景
プログラミング教室などで小中学生にラズパイを教えたい場合を想定しています。
ここでWindowsのノートPCを全員持っているとします。

普通にセットアップする場合、ラズパイと電源のみではなく周辺機器（有線ディスプレイ・有線マウス・有線キーボード）が必要になります。これら全てを全員分用意するのはやはり金銭的な負担が大きくなります。しかも周辺機器が必要なのはラズパイを直接触る場合のみであり、最初に起動して画面上で無線LANに接続するなど設定をした後は、SSH接続などをしてノートPCから操作できるようになります。初期設定のためだけに色々購入してもらうのは正直煩わしいですね。実際、毎回ごちゃごちゃ繋いで使うよりもノートPCからリモート接続して操作する方が教室運営上も楽だと思います。

これらの理由から周辺機器を各自に購入してもらわずに、ノートPCだけでラズパイのセットアップを済ませる方法を調べてみました。
※ここで、運営当局である程度作業してしまうか、最初から全部生徒に作業させるか、といった実際の教室運営方法は特に指定しません。

# ノートPCだけでセットアップする方法
参考：https://qiita.com/Mitsu-Murakita/items/c70c44a30ac72dbbb6c2
1. RaspbianをmicroSDへ書込み（ここまで普通）
2. エクスプローラでmicroSDを開き、ルートに「ssh」という空ファイルを作成（SSH接続を可能にするため）
3. ルートに以下の内容で「wpa_supplicant.conf」ファイルを作成（無線LAN接続のため）

```
country=JP
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
    ssid="SSID"
    psk="暗号化キー"
}
```
※ラズパイをネットワーク接続するには別の方法もある（後述）
4. ラズパイにmicroSDを差し込み、起動
5. コマンドプロンプトで`ping raspberrypi.local`で疎通確認
6. Teratermなど使い、ssh接続（ユーザ名：pi、パスフレーズ：raspberry）
※Windowsでは「Bonjour Print Services」をインストールする必要があるかも
※`arp -a`コマンドでIPアドレスを探す人もいるらしい：https://tech-blog.rakus.co.jp/entry/20200924/raspberrypi
7. いつものやつ

```
$ sudo apt-get update
$ sudo apt-get -y upgrade
```
※この辺は普通のラズパイセットアップの方法を参照してください。
8. `$ sudo raspi-config`でVNCの有効化など各種設定
9. RealVNCビューワなど使い、VNCで接続。日本語化など初期設定を済ませる
    - 接続先：raspberrypi.local
    - Username：pi
    - Password：raspberry
10. 再起動

# ラズパイをネットワーク接続する別の方法
参考：http://independence-sys.net/main/?p=975
ラズパイにmicroSDを差し込んでから、LANケーブルを用意する。
有線LANで繋ぐか、無線LANにつながっているノートPCにブリッジ接続する。
ラズパイを起動し、5から続きを行う。
予め無線LANのSSIDなどが分からない現地でラズパイを使用する場面で役立ちそう。
scrollMagic　スクロールでふわっと要素が出るやつ

# ScrollMagicを使ってふわっと要素を出す方法

スクロールと連動させて何かをしたいならScrollMagic一択かなと自分は思っています。
自分が忘れないための備忘録


scrollMagicの公式のデモサイトはこちら
https://scrollmagic.io/

## サクッとデモだけ見たい人

サクッと実装だけみたい人は下記より見てください
CodePenのリンク
https://codepen.io/xhisashix/pen/YzZLJqY

## ディレクトリの構成

```
.
├── css
│   └── style.css
├── index.html
└── js
    └── scrollMagic.js
```

## CDNの読み込み

bodyの閉じたタグの上に記載
CDNのリンクに付いては上記のScrollMagicのデモサイトのページにも記載があります。

```index.html
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
```

## サンプルHTML

htmlはこれだけ

```index.html
    <div class="section">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
```

## CSS


```style.css
.section {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}
.section .box {
  margin-top: 20px;
  margin-left: 20px;
  width: 200px;
  height: 200px;
  background: #eee;
  opacity: 0;
  transition: 0.5s;
  transform: translateY(15%) rotate(-45deg);
}
.section .box:nth-child(odd) {
  transform: translateY(-15%) rotate(45deg);
}
.section .box.active {
  opacity: 1;
  transform: translateY(0);
}
```

## js

特定のクラスがついてるものずべてにアニメーションを適応點せたかったので
今回は下記のような、実装を行いました。

```scrollMagic.js
class ScrollFadeIn {
  constructor() {
    let box = document.querySelectorAll('.box:not(.active)');
    console.log(box);
    if (box.length === null) {
      return;
    }
    let controller = new ScrollMagic.Controller();
    for (let i = 0; i < box.length; i++) {
      let scene = new ScrollMagic.Scene({
        triggerElement: box[i],
        triggerHook: 'onEnter',
        reverse: false,
        offset: 150,
      })
        .addIndicators()
        .addTo(controller);
      scene.on('enter', () => {
        box[i].classList.add('active');
      });
    }
  }
}

new ScrollFadeIn();


```

### ちょっと説明

#### querySelectorAll

条件に該当する要素をすべて取得する

```js
let box document.querySelectorAll('.box:not(.active)');
console.log(box);
// ログの結果
NodeList(３) [div.box, div.box, div.box]
```

上記を使ってあとはループを回すだけ

```js
    for (let i = 0; i < box.length; i++) {
      let scene = new ScrollMagic.Scene({
        triggerElement: box[i],
        triggerHook: 'onEnter',
        reverse: false,
        offset: 150,
      })
        .addIndicators()
        .addTo(controller);
      scene.on('enter', () => {
        box[i].classList.add('active');
      });
    }
```



イベント発火のタイミング

```js
triggerHook: 'onEnter',
```

- onEnter
- onCenter
- onLeave


クラスの追加

triggerElementが特定の位置に来たときクラスを付与
このクラスをつけアニメーションはCSSで調整を行っている

```js
scene.on('enter', () => {
        box[i].classList.add('active');
      });
```

## 最後に

vue-scrollmagicは使ったことがあり、なんとなく理解していたが、
scrollMagicを使うのが初めてだったため、忘れないための備忘録として書かせてもらいました。

誰かの参考になれば幸いです
最後まで読んでいただきありがとうございました。
iOS14時代のSVG表示設定方法

デザイナーからFigmaのURLが1つ送られてきて「後は勝手にやれ」と言われる機会が増えてきたこの頃。
iOS14時代のアプリでSVGを扱う方法は何が最適か試行錯誤してみました。
(Xcode 12.5, Deployment Target = iOS 12.0 と 13.0)

# Devployment Target = 13.0 以降
ImageSetにSVGを直接登録して構いません。

1. Asset Catalogに```Image Set```を作成する。
2. Resizing ```Preserve Vector Data```にチェックする。
3. Scalesは ```Single Scale```にセットする。
4. SVGを```All```にセットする。

(Dark Mode対応の場合)
![スクリーンショット 2021-04-01 21.00.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/a2cdeaab-f633-505b-c5b1-c91405c57aec.png)


# Devployment Target = 12.0
残念ながらSVGをPDFに変換する必要があります。
そうしないと、画像がギザギザになってしまいます。
Figmaだと画像をPDFで保存できるので少し楽になりましたね。

1. Asset Catalogに```Image Set```を作成する。
2. Resizing ```Preserve Vector Data```にチェックする。
3. Scalesは ```Single Scale```にセットする。
4. *PDF*を```All```にセットする。

| SVG          | PDF          |
|:------------:|:------------:|
|  ![iOS12_SVG_x1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/f8459a61-fbe0-20a4-9b9f-e5a41af5adb4.png)|  ![iOS12_PDF_x1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/f50a90e9-e0b0-8b08-9f5b-462955e92072.png)  |

---
それでは、”iOS15時代の〜”でお目にかかりましょう。
Rustとwio-terminalでギターチュナーを作る（ギター以外も可？）

#始めに
 最近Rustをかじってみました。普通にPCで動かすのも何かな？と思っていたところ、[『基礎から学ぶ 組込みRust』](https://tomo-wait-for-it-yuki.hatenablog.com/entry/2021/04/04/140831)なる本が出ました。この中ではseeedの[wio-terminal](https://www.seeedstudio.com/Wio-Terminal-p-4509.html?gclid=Cj0KCQjw5PGFBhC2ARIsAIFIMNcLR1wSWMvZORqT8F-DoolBTiS5VpHskiMMUE5Xpj2zmHwZdGp-EIkaAl_ZEALw_wcB)という端末を使用して、組み込み向けのRustプログラミングを行っています。早速書籍とwio-terminalを購入しやってみました。本では最終的にwio-terminalのマイク入力のFFTを行い、LCDにリアルタイムに表示するアプリケーションを作成いたします。これに刺激を受け何か作りたいなーと思い、そういえば、ギターに使えるチュナーなどもできないかと思いつき、プロジェクトをスタートさせました。ググると[アナログをうまく使った方法](http://mukudori-noise.skr.jp/elect1.html)や[ストロボLEDを使った方法](https://w.atwiki.jp/ecopa/pages/37.html)がありますが、今回考えている、周波数を計算して平均律との差を出力する方式は見つかりません。なければ作ってしまおうということで、一から作ることとしました。

https://twitter.com/yoshiki9636/status/1401453621888180225?s=20

#参考文献、サイト

- [『基礎から学ぶ 組込みRust』](https://tomo-wait-for-it-yuki.hatenablog.com/entry/2021/04/04/140831)  
この本が無ければ始まっておりませんでした。wio-terminalでRust使うときの環境設定がすべて書かれております。
- [上記本のgithubサイト]( https://github.com/tomoyuki-nakabayashi/wio-examples-template)  
用例のファイルが入っております。が、虫食いになっており本が無いと使えません・・・。
- [12平均律と周波数](https://www.aihara.co.jp/~taiji/browser-security/js/equal_temperament.html)  
12平均律についての数式とサイン波のサンプルが付属しています。このサイトをもとに計算式を作成しました。

#作り方

1. 前提条件：上記『基礎から学ぶ 組込みRust』をもとにwio-terminalの環境構築を行ってあること。基本はarmのthumbv7em-none-eabihfのクロスコンパイル環境とRust環境(cargo等)、そしてwio-terminalのUSB接続設定、シリアル設定が必要です。筆者はひねくれているので、Raspberry pi 4のサーバ上に環境を構築し動作に成功しております。もちろんPCのUbuntuなどでも動くはずです。

2. 以下のアドレスからRustのプロジェクトをダウンロードします。

```
$ git clone https://github.com/yoshiki9636/gtuner_wio_terminal
```

3. 接続したwio-terminalを書きこみモードにして、プロジェクト内でrunさせます。この時--releaseオプションをつけてください。（つけないとADCが動作しないようです。）

```
$ cd gtuner_wio_terminal/
$ cargo run --release
```

#使い方

1.楽器で音を出すと、LCDにその時の音名と高さ、どれだけ平均律からずれているかが表示されます。

2.ピッチは初期値がA=440Hzに設定されています。変えたい場合は、上部のボタンで変更できます。左のボタンで1Hzずつ上昇します。真ん中のボタンで1Hzずつ降下します。

#アルゴリズム
難しくないので、コード見てください。一応コメントもつけております。

#最後に
かなり久々に新しい言語でプログラムを書いてみました(試しにPHP書いて以来)。基本的にPythonみたいなものとCを知っていれば、概念的なものの理解にはそう難しくないかもと感触を受けました。(まだ知らない大変なものが居るのかもしれませんが・・・) wio-terminalはコンパクトにI/Oが揃っていて、お手軽にプロトタイプを作れそうな気がしますので、また何か思いつくことがあったら、これで作ってみようと思います。最後に数々の情報を与えてくれた『基礎から学ぶ 組込みRust』の作者の方々に感謝いたします。
SCSSでアニメーション（初心者向け）

○SCSSでアニメーションを使うための方法をまとめました。
　本当に初めて使う人向けのため、濃い内容ではありません。ご了承ください。

SCSSでアニメーションを使おうと思った時にヒットする記事が古いものばかりだったため、
今の条件で動く記事を書いてみました。
なお、scssのファイル構成はこちらの方のやり方を参考にさせていただいております。
他の方とはファイル構成が異なっていたりする場合もございます。ご了承ください。
https://tsudoi.org/guide/detail/9.html



```_animation.scss
@mixin keyframes($animation-name) {
  @keyframes #{$animation-name} {
    @content;
  }
}
@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@include keyframes(fadein) {
  0% {
    opacity: 0;
    font-size: small;
  }
  100% {
    opacity: 1;
    font-size: larger;
    }
  }
@include keyframes(slidein) {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
      }
}
```

※SCSSのコンパイラーに読み込ませないように「_animation.scss」にしています。


今回は使い回しができるということが、わかりやすいように「fadein」と「slidein」という二つのアニメーションを作ってみました。
実際にアニメーションを当てるページごとのscssに先ほどの「_animation.scss」をインポートして使います。

```_top.scss
@import "./../../mixin/animation";

.fadein {
  @include animation(fadein 3s);
}
.slidein{
  @include animation(slidein 3s);
}
```

それを大元のSCSSファイルである「style.scss」で読み込みます。

```style.scss
@import './top/top';

```

コンパイラされたcssを該当ページのhtmlファイルで読み込めばで起用されます。

```style.css
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    font-size: small;
  }
  100% {
    opacity: 1;
    font-size: larger;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
    font-size: small;
  }
  100% {
    opacity: 1;
    font-size: larger;
  }
}

@-webkit-keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

.fadein {
  -webkit-animation: fadein 3s;
  animation: fadein 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slidein {
  -webkit-animation: slidein 3s;
  animation: slidein 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
```


```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./../../scss/style.css" />
    <link rel="stylesheet" href="./../../scss/page/style.css" />
    <title>Document</title>
  </head>
  <body>
      <p class="fadein">フェードインテキスト</p>
      <p class="slidein">スライドインテキスト</p>
  </body>
</html>

```

以上簡単ですが、SCSSでアニメーションを使う方法でした。
細かい解説などはしていませんので、気になる方は自身で調べてみてください。
django管理ユーザーの作成方法

djangoで管理ユーザーを作成すると、admin/にアクセスして、データベースを直接編集することができるようになります。

# 管理ユーザーの作成
下記コマンドを実行します。

```bash
$ python manage.py createsuperuser
```

ユーザー名を入力してエンター。

```bash
Username:hoge
```

続いてEメールアドレスを入力。入力せずにエンターでもOK。

```bash
Email address: foo@example.com
```

パスワードを2回入力したら作成完了です。

```bash
Password: **********
Password (again): *********
Superuser created successfully.
```

パスワードが簡単すぎると怒られたら、

```bash
このパスワードは短すぎます。最低 8 文字以上必要です。
このパスワードは一般的すぎます。
このパスワードは数字しか使われていません。
```

yを入力してエンターでOK。

```bash
Bypass password validation and create user anyway? [y/N]: y
```

# サーバー起動
最後に以下のコマンドでサーバーを起動しましょう。

```bash
$ python manage.py runserver
```

ブラウザを起動してhttp://127.0.0.1:8000/admin/ にアクセスします。

ログイン画面が表示されたら、無事に成功です。

お疲れ様でした。
VSCode 上で快適に Scala を書くための dev container 定義を作ってみた

`VisualStudio Code development container`（以下 `dev container`）、いいですよね。リポジトリに `dev container` 定義を同梱することで、VSCode のフル機能を備えた開発環境を簡単に配布できます。チームでの共同開発だけでなく、個人開発の場合でも、破壊・運搬可能な開発環境の利点を上げるとキリがありません。

公式の `dev container` 定義は [GitHub レポジトリ](https://github.com/microsoft/vscode-dev-containers/tree/main/containers)から参照できますが、残念ながら Scala 環境の定義は用意されていません。この記事では、公式の Java 開発用定義から派生させた Scala 開発用定義をご紹介します。

定義だけが必要な方は、こちらのリポジトリをご参照ください：
<https://github.com/yokra9/vscode-dev-containers-scala-sbt>

## `devcontainer.json`

Scala 用の `dev container` 定義ファイルです。公式の Java 開発用定義から派生しているため、凡その内容に変化はありません：

```javascript:devcontainer.json
{
  "name": "Scala",
  "build": {
    "dockerfile": "Dockerfile",
    "args": {
      // Update the VARIANT arg to pick a Java version: 11, 15
      "VARIANT": "11",
      // Options
      "INSTALL_MAVEN": "false",
      "INSTALL_GRADLE": "false",
      "INSTALL_NODE": "false",
      "NODE_VERSION": "lts/*",
      "INSTALL_SBT": "true", //　追加: sbt の要否
    }
  },
  /* （中略） */
  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "vscjava.vscode-java-pack",
    "scalameta.metals" // 追加: Scala 開発に便利な拡張機能
  ],
  /* （中略） */
}
```

まず、Docker イメージのビルド時に渡すオプションの中に、`INSTALL_SBT` フラグを追加しています。このフラグは `Dockerfile` 内で参照され、イメージに sbt をインストールするかどうかの判断に用います。

また、デフォルトの拡張機能として、[Scala (Metals)](https://marketplace.visualstudio.com/items?itemName=scalameta.metals) ( `scalameta.metals` )を追加しています。Metals は Scala 用の言語サーバで、VSCode を IDE のような使い勝手に向上させます。

![Completions](https://user-images.githubusercontent.com/1408093/56036958-725bac00-5d2e-11e9-9cf7-46249125494a.gif) [^1]

[^1]: https://marketplace.visualstudio.com/items?itemName=scalameta.metals

## `Dockerfile`

前述の `INSTALL_SBT` フラグが `true` である場合（デフォルト）、公式リポジトリから sbt をインストールします：

```Dockerfile
# [Option] Install sbt
ARG INSTALL_SBT="true"
RUN if [ "${INSTALL_SBT}" = "true" ]; then \
    echo "deb https://repo.scala-sbt.org/scalasbt/debian all main" > /etc/apt/sources.list.d/sbt.list \
    && echo "deb https://repo.scala-sbt.org/scalasbt/debian /" > /etc/apt/sources.list.d/sbt_old.list \
    && curl -sL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x2EE0EA64E40A89B84B2DF73499E82A75642AC823" | apt-key add \
    && apt-get update \
    && apt-get install sbt \
    && apt-get clean -y && rm -rf /var/lib/apt/lists/* ; fi
```

## 参考リンク

* [VS Code Remote / GitHub Codespaces Container Definitions](https://github.com/microsoft/vscode-dev-containers/)
* [Metals · Scala language server with rich IDE features](https://scalameta.org/metals/)
* [Ubuntu and other Debian-based distributions](https://www.scala-sbt.org/1.x/docs/Installing-sbt-on-Linux.html#Ubuntu+and+other+Debian-based+distributions)
Djangoの環境をDokcerで作る【メモ】

Pythonを普段から触っているため、何かしらWebアプリのフレームワークなどを使ってみようと思い、Djangoを軽くどんな感じか触ってみる。
手順を適当に書いていく。

# 目次
1. DockerでDjangoの環境を適当に作成
2. VSCodeでDockerの環境にアクセスする
3. 雛形？を作る

とりまえずここまでやってみる

# DockerでDjangoの環境作る
DockerHubには、すでにDjangoのイメージがあるみたいですが、練習がてらUbuntuから作ってみる。

```Dockerfile
RUN apt update && apt upgrade -y && apt install -y tzdata
ENV TZ Asia/Tokyo
```
自分の買った書籍にPostgreSQLを使ってるみたいなので、タイムゾーン用の設定をする

```Dockerfile
RUN apt install -y wget postgresql python3 python3-pip && pip install django
```
これ書いてて思ったけど、wgetいらないですね…（今のところ）
PythonとDjangoをインストールします
これをビルドして一応DockerHubにあげてあります。
[https://hub.docker.com/repository/docker/sugimochi/django_env](https://hub.docker.com/repository/docker/sugimochi/django_env)

# VSCodeでアクセスする
今まではやる機会がなかったんですが、これを機に使ってみようかと。
とは言っても簡単で、Dockerの拡張機能を入れて、Docker-compose使ってUPする。

```yaml
version: '3'

services:
  django:
    image: sugimochi/django_env
    volumes:
      - './work:/work'
    ports:
      - '8000:8000'
    tty: true
    stdin_open: true
```
Docker-composeはこのように記述。ポートはとりあえずの番号。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/2ef05124-de32-8ea5-3336-d0f9265710ca.png)
この画面から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/8b7872ff-fa30-b355-49e2-a629a3f53017.png)

これを選ぶ。
そうすると、Dockerコンテナの環境でVScodeを開くことができる。

# 雛形を作る
まず、マウントしてるディレクトリに移動する。

```terminal
$ cd ../work
```
そこでプロジェクト作成のコマンドをうつ。

```terminal
work$ django-admin startproject private_diary
```
次にこれをうつ（まだこれを打つ理由はよくわかってない）

```terminal
private_diary$ python3 manage.py startapp diary
```
以上！

# 今後の展望
今回は時間がないのでこれくらいで…
色々なサンプルとか見ながら触ってみようと思います…

### 参考文献
 * [動かして学ぶ！Python Django開発入門](https://www.amazon.co.jp/%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6%EF%BC%81Python-Django%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E5%A4%A7%E9%AB%98-%E9%9A%86-ebook/dp/B07YY5RDPC/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=django%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80&qid=1622986914&sr=8-1)
 * [米国AI開発者がゼロから教えるDocker講座](https://www.udemy.com/share/103aTRAEESeFlURHUD/)
 * [Docker for Visual Studio Codeでコンテナ操作](https://qiita.com/trakkyo/items/c0bde6d5bd12c3f69e51)
 * [はじめての Django アプリ作成、その 1 | Django ドキュメント | Django](https://docs.djangoproject.com/ja/3.2/intro/tutorial01/)
 
### GitHub
 * [Dockerfile等](https://github.com/sugimochi97/docker_django_env)
HTML5では要素ごとの意味を意識する

#セマンティクスを意識する

HTML5初学者の備忘録
１８歳のときHTML4なら学校で学んで以来なのでそもそも基礎から怪しい。ただでさえ知識も浅いのに浦島太郎状態。自分の言葉で超当たり前のことをまとめておく。

要素ごとに、ここはなんについて記述しているかを機械が認識できるようにしておく。。。
みたいな。SEO対策とかを考えるなら必要かもしれない。

昔はボックスを分けるときたしか、全部divタグで囲んでclassなりidを設定していた記憶がある。

しかし今はなんでもdivタグとはいかないらしい。
たとえばsectionタグを使ってセクションを切り分けたり、navタグでナビゲーション要素を囲み、articleタグは固有のコンテンツを指す。

divタグには意味がない。
それに対して上述のタグは意味がある。それこそがセマンティクス。。。class分けをして名前をつければ人間はそれを理解できるけど、機械がその要素の意味を理解するためにタグを使い分けるみたい。

ぱっと見は正直どのタグも意味は変わらない。

ブラウザのデフォルトのCSSによってある程度スタイルは変わることがあるかもしれないけれど、HTML5においてはブロックやテキストのスタイルはすべてCSSで管理されるべきであって見た目を変える目的でstrongタグやsmallタグは使わない。リセットCSSを使うと色々作りやすい。

機械に優しくコードを組めば割と人間にも解りやすいコードになる気がする。。。
Ubuntu 20.04 に xrdp を入れてリモートデスクトップできるようにする

Ubuntu 20.04 に X11 + VNC でいい感じのヘッドレスリモートデスクトップ環境を作ろうとして一週間くらい苦戦していたた、VNC を諦めて xrdp を入れたら一瞬でできてしまった。まとめるほどの内容ではないがまとめておく。

## やりたかったこと
自宅ネットワークに Ubuntu Desktop 20.04 が入ったサーバがあるが、このサーバは自宅 LAN には接続されているがディスプレイは接続されておらず、これを自宅 LAN 内の MacBook からリモートデスクトップして使いたい。

## VNC でうまくできなかった件
ディスプレイが無いので、vino のような「既に起動しているセッションを VNC 経由で遠隔操作する」ようなやりかたではできず、またリモート接続のたびにセッションを起動できるように Xvnc + inetd を試みたがこれはうまく設定できなかった。(力不足)

そんな矢先に「試しに VNC じゃなくて RDP でやってみるか」と xrdp を入れてみたら一瞬で動いてしまったので、もうこれでいいかとなった。

## xrdp の導入
前提として、Ubuntu 20.04 Desktop を minimal install した状態でやっている。

### インストール
``` console
$ sudo apt install xrdp
```

### xrdp の設定
`/etc/xrdp/startwm.sh` の冒頭に以下を追加して、RDP 接続時に GNOME セッションが起動するようにしておく。

``` sh:/etc/xrdp/startwm.sh
export GNOME_SHELL_SESSION_MODE=ubuntu
export XDG_CURRENT_DESKTOP=ubuntu:GNOME
```

これだけでもひとまず接続できるようにはなるが、そのままだと RDP 接続中に `Authentication is required to create a color managed device` というダイアログがたびたび出てめんどくさいので、以下のファイルを作成することでこれを表示されないようにする。

``` :/etc/polkit-1/localauthority/50-local.d/45-allow-colord.pkla
[Allow Colord all Users]
Identity=unix-user:*
Action=org.freedesktop.color-manager.create-device;org.freedesktop.color-manager.create-profile;org.freedesktop.color-manager.delete-device;org.freedesktop.color-manager.delete-profile;org.freedesktop.color-manager.modify-device;org.freedesktop.color-manager.modify-profile
ResultAny=no
ResultInactive=no
ResultActive=yes
```

### RDP クライアントから接続する
macOS からなので Microsoft Remote Desktop アプリを入れて接続してみたが、普通に接続できた。めでたしめでたし。

## 備考
Ubuntu 21.04 以降はデフォルトのディスプレイサーバが X.org から Wayland に変わったので、Wayland のままではこの方法はできなさそう。

## 参考
- [第621回　Ubuntu 20.04 LTSでxrdpを使用する：Ubuntu Weekly Recipe｜gihyo.jp … 技術評論社](https://gihyo.jp/admin/serial/01/ubuntu-recipe/0621)
    - `allowed_users=anybody` の設定はやらなくても普通に接続できてしまった、理由はよくわからない
Androidアプリのパフォーマンス 改善②（RecyclerView.Adapter）

この記事では、Androidアプリのパフォーマンス改善のための、方法について記載しています。

### 改善対象
リストなどを表示する場合、RecyclerViewを使うことがあると思います。
RecyclerViewはとても便利なクラスですが、パフォーマンスには注意が必要です。

### 計測
下記の[RecyclerViewを使ったカレンダー](https://qiita.com/yoshihiro-kato/items/619b4d42f741a1ef0d63)のパフォーマンスを[Systrace](https://qiita.com/yoshihiro-kato/items/bcce0363243523355625)を使って計測しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254520/4de25718-dd71-9bfa-80f5-0d64acc47e3d.png" width=30%>

すると、AdapterのonCreateViewHolderのinflateに時間がかかっている（下記の場合は、15.506ms）ことがわかりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254520/22d5c245-b695-55a0-c8a1-42302d272aa7.png" width=５0%>

onCreateViewHolderはRecyclerViewのitemの数だけ呼ばれるので、onCreateViewHolderに時間がかかるとパフォーマンスにかなり影響があります。

### 改善方法
改善には、RecyclerViewのitem生成にinflateを使用せず、Viewを生成（CustomView）する方法があります。

```diff
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DateAdapterHolder {
-        val view = inflater.inflate(R.layout.calendar_item, parent, false)
-        return DateAdapterHolder(view)
+        return DateAdapterHolder(
+                CalenderItemView(parent.context).apply {
+                    layoutParams = LinearLayout.LayoutParams(parent.width / 7, ITEM_HEIGHT.toInt())
+                }
+        )
     }
```

```kotlin:CalenderItemView.kt
class CalenderItemView @JvmOverloads constructor(
        context: Context,
        attrs: AttributeSet? = null,
        defStyle: Int = 0
) : LinearLayout(context, attrs, defStyle) {
    companion object {
        private val TEXT_SIZE = 20f.sp
        private val MARGIN_SIZE = 5f.sp
        val ITEM_HEIGHT = TEXT_SIZE + MARGIN_SIZE * 2
        private val textPaint = Paint().apply {
            textSize = TEXT_SIZE
        }
    }

    var date: String = ""
    var color: Int = Color.BLACK

    init {
        gravity = Gravity.RIGHT
        setBackgroundColor(Color.WHITE)
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        textPaint.color = color
        canvas?.drawText(
                date,
                if (date.length == 1) TEXT_SIZE / 2 else 0f.sp,
                TEXT_SIZE + MARGIN_SIZE,
                textPaint
        )
    }
}
```

この修正により、onCreateViewHolderの時間（Systraceで計測）は1/10(平均6.638msから0.735ms)に改善されました。

実装の詳細は下記を参照してください。
https://github.com/yoshihiro-kato/android-samples/tree/4e8ca216a71bf4f147ff854e4a8872b889639ea3/KotlinSampleApplication

### 補足

CustomViewにするとCanvasにテキストやBitmapを直接描画することになるので、[TextViewのellipsize](https://qiita.com/yoshihiro-kato/items/fe98fb9fd6ce194c4964)等が使えなくなります。
Reactでコンテキストメニューを作るライブラリの比較

# 目的
Reactでコンテキストメニューを作るライブラリが数種類あるので、比較の覚書です

# 環境
- React 17.0.1
- react-dom 17.0.1


# 比較
## react-contextmenu
https://github.com/vkbansal/react-contextmenu
動作サンプル
https://vkbansal.github.io/react-contextmenu/#/

### 良い点
- サポートされているブラウザが多い
- 複雑なメニューも実装できる
- Right to Leftに対応している
- ダウンロードが随時50,000前後と多く、よく選ばれている

### 課題
- 2020/8にサポートを停止したため、自分でforkしてメンテナンスする必要がある
    - https://github.com/vkbansal/react-contextmenu/issues/339
- スタイル管理機能はない
    - 標準でCSSは用意されていないため自分で指定する必要がある
    - [サンプル](https://github.com/vkbansal/react-contextmenu/blob/master/examples/react-contextmenu.css) は提供されています
    - styled-componentsなどStyles in JSなフレームワークと組み合わせにくいかもしれない


## react-contextify
https://github.com/fkhadra/react-contexify
動作サンプル
https://fkhadra.github.io/react-contexify/

### 良い点
- ある程度サポートやライブラリの更新が行われている
- TypeScript対応している
- サブメニューが簡単に作れる
- ドキュメントが充実している
- [スタイル管理機能](https://fkhadra.github.io/react-contexify/how-to-style) がある
    - Sass, styled-component を利用できる
    - テーマを利用できる

### 課題
- サポートやメンテナンスが少し停滞気味
- 2021/06の最新は [2020/12リリースのv5.0.0](https://github.com/fkhadra/react-contexify/releases/tag/v5.0.0) で半年更新がない

## Material UI
https://material-ui.com/
動作サンプル
https://material-ui.com/components/menus/

### 良い点
- サポートや機能開発が定期的に行われる
- 細かくスタイルを設定できる
- TypeScript対応している

### 課題
- 将来的にはMaterial UIのv5とv4どちらを採用するか、周辺ライブラリが対応しているMaterial UIのバージョンと合わせて判断が必要
  - 2021/06/06時点でMaterial UI 5は[アルファ版](https://twitter.com/MaterialUI/status/1399674100872777734) 
- UIしか提供されないので基本は全て実装が必要
  - サブメニューや、コンテキストメニューでよく使われるロジック、Hookなどは標準で用意されていない
  - [material-ui-nested-menu-item](https://github.com/azmenak/material-ui-nested-menu-item) などMaterial UIベースのライブラリがあるが、更新頻度が低かったり要件に合わなかったりする

## まとめ
Reactでコンテキストメニューを作るライブラリは

- サポートや継続的な機能開発がないライブラリもある
- スタイル管理、TypeScriptサポートの有無はライブラリによる
- 作者は react-contextify を採用しましたが、更新頻度が落ちているので今後のメンテナンスは要検討だと思いました

他にも良いライブラリがあったら是非教えてください。
１時間かかった作業が0.22秒で終わってしまった話

#Day1

「ある日のテストで作成したデータAと別の日に作成したデータBに差異がないことを比較してほしい」と僕にタスクが割り振られた。
こんな手順でエビデンスを作った。

```
１．データAとデータBを抽出するSELECT文をそれぞれ実行。
２．１の結果をcsvファイルにそれぞれエクスポート。
３．２のcsvファイル2つをシートを分けてExcelに貼り付け。
４．３の各シートで、抽出結果の文字列結合を各行で行う。
５．４で文字列結合した結果が、データAのシートとデータBのシートに互いに存在するかExcel関数で確認。
```

データAとデータBはそれぞれ2万件程度あり、エクスポートと貼り付け作業にそれなりに時間がかかった。文字列結合や存在チェックのためのExcel関数は8万セルに及び、Excelは山のように大きく重たくなった。
この作業は気合と根性で1時間程度で終わらせた。

# Day2

別の日に同じタスクが割り当てられた。
違うのはデータAとデータBが100万件程度に膨らんでいたことであった。
「今までのやり方が通用しないのでは？？」と気づいたのは、データAのエクスポートを開始して20分が経過した時であった。

この作業は定時までに終わらせなければいけない。定時まで１時間を切っている。
藁にもすがる思いで、「データ 存在チェック SQL」とGoogleの検索窓に入力し、ボタンを押下する。
エクスポートするのに20分経っても終わらないデータ量だ。SQLを実行したとて結果は返ってこないだろう。一番最初に検索に引っかかったSQLをエディタに入力し、半ば諦めながら実行ボタンを押下した。

```
SELECT 項目A以外 FROM テーブルX WHERE 項目A = ‘データA’
minus
SELECT 項目A以外 FROM テーブルX WHERE 項目A = ‘データB’
```

#後日談というか、今回のオチ。
ーー0.22秒であった。
「さあ上司にタスク遅延の報告をしなければならないぞ。その前にトイレでも行っとくか」と思う間も無く結果が返ってきた。

「SIerのエンジニアはExcelのプロ」と揶揄われている記事を「そうだそうだ」と他人事のように読んでいた僕であったが、この時ばかりは頭にブーメランが刺さった音がした。

論理差。取得結果Aと取得結果Bを比較し、その差異を算出する演算であった。
そういえば一昨日読み始めたデータベーススペシャリストの教本に書いてあった。
「こんなの知ってるし。余裕で合格だな。」と流し読みした記憶がある。

山のように重くなったExcelと、0.22秒で返ったSQLの結果を見て僕はこう呟いた。
「さい、なし。」