OmniAICreator/Qiita-1.07M huggingface dataset:
Ruby | Qiita API で自分の記事全てを編集してリンクを追加したスクリプトの例

# 概要

自分の記事全てを取得し、元のテキスト本文にテキストを追加して編集リクエストを続けていく。

ちなみに2000記事ほどを連続で編集しようとすると、途中で制限されたのか、Fobbiden扱いになった。

# コード

```rb
require 'net/https'
require 'uri'
require 'json'

uri = URI.parse("https://qiita.com/")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request_header = {'Content-Type' =>'application/json', "Authorization" => "Bearer #{ENV['TOKEN']}"}

round = 0

# 100はQiita APIのページめくりのMAX
(1..100).each do |i|
  get_url = "https://qiita.com/api/v2/users/#{ENV['USER_ID']}/items?page=#{i}&per_page=100"

  get_request = Net::HTTP::Get.new(get_url, request_header)

  get_response = http.request(get_request)

  items = JSON.parse(get_response.response.body)

  items.each do |item|
    patch_url = "https://qiita.com/api/v2/items/#{item['id']}"
    patch_request = Net::HTTP::Patch.new(patch_url, request_header)

    round += 1
    puts "#{round} #{item['url']}"

    # すでにリンクが付いている記事はスキップ
    if item['body'] =~ /\n
   EOM

    patch_request.body = { 'body' => edit_body, 'title' => item['title'] }.to_json

    patch_response = http.request(patch_request)
    puts patch_response.code
  end
end

# PATCH /api/v2/items/:item_id

# https://qiita.com/api/v2/docs#patch-apiv2itemsitem_id
```













<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
RDBMSごとのダミーテーブルについて 

SQLを書く際、以下のような場合に、1行だけのダミーテーブルが欲しいことがある。その際に利用できるダミーテーブルをRBDMSごとに記載する。

例：
- 関数で現在日時だけ取りたい (`SELECT sysdate FROM ～`)
- シーケンス採番したい (`SELECT test.test_sql.nextval FROM ～`)
- 計算機代わりにしたい (`SELECT 60 * 60 * 24 * 365 FROM ～`)
- 正規表現があってるか確認したい (`SELECT REGEXP_LIKE('ABC', '[0-9][A-Z]*') FROM ～`)

## Oracle
Oracleの場合はDUAL表を利用する。
``` sql
SELECT * FROM DUAL
```
実行結果：
|DUMMY|
|:--|
|x|

参考：https://docs.oracle.com/cd/F19136_01/sqlrf/Selecting-from-the-DUAL-Table.html

## DB2
DB2の場合はSYSDUMMY1表を利用する。
``` sql
SELECT * FROM SYSIBM.SYSDUMMY1
```
実行結果：
|IBMREQD|
|:--|
|Y|

参考:https://www.ibm.com/docs/ja/db2/11.1?topic=cv-sysibmsysdummy1

## Symfoware
Symfowareの場合はRDBII_ASSISTTABLEを使用する。
``` sql
SELECT * FROM RDBII_SYSTEM.RDBII_ASSISTTABLE
```
実行結果：
|ASSISTCOLUMN|
|--:|
|1|

参考：https://software.fujitsu.com/jp/manual/manualfiles/M080271/J2X02268/03Z201/aplsqae/aplsq179.html

### 上記以外のDB
上記以外のDBでは、基本的に`FROM`句が省略可能となっているため、単純に**FROM句を記載しないだけでよい**。

以下は、事情により`FROM`句を省略できない場合に利用できる方法を記載する。

``` sql
SELECT * FROM (SELECT 1 AS DUMMY) AS DUAL
```
実行結果：
|DUMMY|
|--:|
|1|

対象：
- SQL Server
- Postgresql
- MySQL
- SQLite
- etc.
100日後くらいに個人開発するぞ！day027

## 今日もHTML＆CSS中級編を復習してみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/f22d0fac-beb0-9239-52cb-945895a741cd.png)


## 今日の備忘録

### 影をつける方法
- box-shadowプロパティを用いて「影の位置」と「影の色」を指定することで影をつけることができます
    - 例：20px左で10px真下に黒の影を付けたい場合
        - `box-shadow:20px 10px #00000d`

### マウスのカーソルの形を変える方法
- cursorプロパティを用いることでマウスのカーソルが要素に乗った時の形を変えることができる
    - 例：I字型のカーソルに変えたい場合
        - `cursor:text;`
    - 例：指型のカーソルに変えたい場合
        - `cursor:pointer;`
    - 例：矢印型のカーソルに変えたい場合
        - `cursor:default`

### クリック時に変化をつける方法
- セレクタに:activeを用いると要素がクリックされる間のCSSを指定できる

    - 例：クリック時にbuttonクラスの影を無くして要素を10px下げたい場合
        - `.button:active{`
        - `box-shadow:none;`
        - `position:relativel;`
        - `top:10px`

- プロパティにnoneを指定することでCSSを打ち消すことができる
    - 例：影を消したい時
        - `box-shadow:none`
- `position:relative`を用いることで要素の位置を変えることができる
    - 例：要素を下に5px左に10px動かしたい時
        - `position:relative`
        - `top:5px;`
        - `left:10px;`
Navigation2+GPS+IMUのDEMOのやり方について

# はじめに

Navigation2のGPS+IMUでのDEMOが存在しないので、やり方を紹介します。

# 概要
Packageとしては、RobotLocalizationというパッケージを利用し、GPSとIMUから、自己位置を推定します。

# DEMO
このサイトを参考にします。
https://automaticaddison.com/how-to-use-gps-with-the-robot-localization-package-ros-2/

コードはここに落ちているのでコピー
https://drive.google.com/drive/folders/1NSJhg-omJ9IPQStsJ7scKiCSropqwM3Z

buildして
~~~
ros2 launch basic_mobile_robot basic_mobile_bot_v6.launch.py 
~~~
で起動


~~~
ros2 service call /datum robot_localization/srv/SetDatum '{geo_pose: {position: {latitude: 33.83, longitude: -84.42, altitude: 254.99568}, orientation: {x: 0.0, y: 0.0, z: 0.0, w: 1.0}}}'
~~~

を実行すると初期位置のLAT、LONの情報が設定され、MAPとODOMの関係性が、修正されていきます。２分位放置すると、正しいODOMの位置が計算されます。


~~~
ros2 launch nav2_bringup bringup_launch.py map:=/home/ubuntu/ros2_ws/src/basic_mobile_robot/maps/smalltown_world.yaml
~~~
でNavigation2を起動し、

~~~
ros2 launch nav2_bringup rviz_launch.py
~~~
でrvizを起動します。


あとはゴールを設定すると動きます。
![Peek 2022-05-16 08-36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/3b98f79e-9c9b-50f8-64ba-4d22ec7b0ce4.gif)
【Flutter】_TypeError (type 'Timestamp' is not a subtype of type 'DateTime')の解決法

# Firestoreから取得した段階では`TimeStamp`型
provider+Firebaseの構成で、Firestoreから値を取得するような以下のコードがあったとします。

```dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:lovedan/models/comment.dart';

class CommentProvider with ChangeNotifier {
  List<Comment>? comments;

  void fetchComments(String postId) async {
    final QuerySnapshot snapshot = await FirebaseFirestore.instance
        .collection('posts')
        .doc(postId)
        .collection('comments')
        .orderBy(
          'datePublished',
          descending: true,
        )
        .get();

    final List<Comment> _comments =
        snapshot.docs.map((DocumentSnapshot document) {
      Map<String, dynamic> data = document.data() as Map<String, dynamic>;
      final String commentId = data['commentId'];
      final DateTime datePublished = data['datePublished']; // ここでエラーが発生！！！
      final String text = data['text'];
      final String uid = data['uid'];
      return Comment(commentId, datePublished, text, uid);
    }).toList();

    this.comments = _comments;

    notifyListeners();
  }
}
```

するとこの部分でエラーが発生しました。。。

```dart
final DateTime datePublished = data['datePublished'];
```

ちなみにmodelはこんな感じです。

```dart:models/comment.dart
class Comment {
  Comment(this.commentId, this.datePublished, this.text, this.uid);
  String commentId;
  DateTime datePublished;
  String text;
  String uid;
}
```

どうやらFirestoreから取得した段階では`TimeStamp`なので、Commentモデルで指定されてある`DateTime`に変換してあげないとダメなようです:frowning2:

# `DateTime`に変換

```dart
final DateTime datePublished = data['datePublished'].toDate();
```

`toDate`というメソッドがあるようで、これを追加するだけで`DateTime`に変換できます！！:v:


# 参考

https://www.codegrepper.com/code-examples/whatever/_TypeError+%28type+%27Timestamp%27+is+not+a+subtype+of+type+%27DateTime%27%29

https://stackoverflow.com/questions/52996707/flutter-app-error-type-timestamp-is-not-a-subtype-of-type-datetime
Laravelのベストプラクティスを読んでみた

# なぜベストプラクティスが必要なのか？

### Laravelの自由度が高すぎるから

Laravelは便利ですが、記述やディレクトリなどの自由度が高すぎてしまうという悩みどころがあります。
プロジェクトが進むにつれて、多くの人が自由にコードを書いてしまってすごく複雑になってしまう前に、コード記述の指針を示しておく必要があります。

### 初学者のために

巷にあふれているチュートリアルや本の通りに学習してしまうと、それに沿い過ぎた変な癖がついてしまう場合があります。
そこで、改めてベストプラクティスに目を通すことで、よりよいLaravelのコードを知ることができます。

# Laravelのベストプラクティスとは？

[公式(英語版)](https://laravel.com/docs/9.x)は、ベストプラクティスというよりも、Laravelによって提供される機能のHow Toって感じですよね。

そこで、[alexeymezenin氏](https://github.com/alexeymezenin)や有志によって作成されている[laravel-best-practices](https://github.com/alexeymezenin/laravel-best-practices)を、ここではLaravelのベストプラクティスとして紹介します。

https://github.com/alexeymezenin/laravel-best-practices

↓英語版より若干差分がありますが、日本語版もあります

https://github.com/alexeymezenin/laravel-best-practices/blob/master/japanese.md

BadなケースとGoodなケースがそれぞれ書いてあり、わかりやすいですね。

## 個人的に、大事だなーと思っている項目

（全部大事だと思いますが

### その1

> ファットモデル、スキニーコントローラ
DBに関連するすべてのロジックはEloquentモデルに入れるか、もしクエリビルダもしくは生のSQLクエリを使用する場合はレポジトリークラスに入れます。

> バリデーション
バリデーションはコントローラからリクエストクラスに移動させます。

> ビジネスロジックはサービスクラスの中に書く
コントローラはただ1つの責任だけを持たないといけません、そのためビジネスロジックはコントローラからサービスクラスに移動させます。

上記に則り、DB処理はRepositoryクラスに、ビジネスロジックはServiceクラスをそれぞれ作成して記述すれば、Controllerは単純なif文等の処理 + レスポンスの処理になるのが理想的だと思います。

### その2

> JSとCSSをBladeテンプレートの中に入れない、PHPクラスの中にHTMLを入れない
（中略）
もっとも良い方法は、データを転送するためJSパッケージに特別なPHPを使用することです。

これをやることで、JS/CSSファイルのHighLightがVScodeなどのIDE上で適応されるので、見やすいコードになります。
JSに値を渡す際は、[PHP-Vars-To-Js-Transformer](https://github.com/laracasts/PHP-Vars-To-Js-Transformer)を別途使用すると、更にスッキリ＆楽です。

### その3

> コード内の文字列の代わりにconfigファイルとlanguageのファイル、定数を使う
> (中略)
> Good:
> ```php
> public function isNormal()
> {
>     return $article->type === Article::TYPE_NORMAL;
> }
> 
> return back()->with('message', __('app.article_added'));
> ```

特に文言系の多言語化はやっておいて損はないです。
将来的に文言変更などを行う際、とても楽になります。

個人的に、特にクラスに持たせる必要のない定数チックなものが出てきた場合、安直に`config/{project名}/xxxx.php`を切って色々置いていきたいんですが、割とチーム内で議論を呼んだのでここでは言及しません。w

バリデーション系のメッセージの日本語化の用意は、下記のコマンドでやると楽です。
プロジェクト開始時等にやっておきましょう。
https://readouble.com/laravel/9.x/ja/validation-php.html
```bash
php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
php -f install-ja-lang.php
php -r "unlink('install-ja-lang.php');"
```

# 最後に

このように、Laravelのベストプラクティスを読んで実行してみるのはいかがでしょうか。

個人的には、「best-practicesにこう書いてあったから、こんな感じで書いてみたよ」「書いてあるから、こういう感じにしてみて」と言えるのが特に楽です。w
前職時代からお世話になってます。

また、100%準拠する必要はなく、チーム内で柔軟に適用していく感じがいいかと思います。
（特に命名規則など

他に、こういうのもあるよーというのがあれば、コメントにて教えていただければと思います！
ありがとうございました。
【Rails】Dockerで環境構築

Dockerを利用してrailsを起動させる方法を備忘録として

# 前提条件として

開発に使用するPCに Docker をインストール。
[Docker公式](URL "https://www.docker.com/")

次に任意のファイルを作成。
ここでは`rails-docker`としたが、何でもok
```
$ mkdir rails-docker
$ cd rails-docker
```

# 必要なファイルの作成
まずは rails-docker ディレクトリローカルの中に
以下の 5 つの空ファイルを作成する

・Dockerfile
・docker-compose.yml
・Gemfile
・Gemfile.lock
・entrypoint.sh

下記コマンドを打てば一回で作成可能
```
$ touch {Dockerfile,docker-compose.yml,Gemfile,Gemfile.lock,entrypoint.sh}
```

# Dockerfile　を編集

※rubyのバージョンは要確認

```ruby:Dockerfile
FROM ruby:2.7.5

# yarnパッケージ管理ツールをインストール
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn

RUN apt-get update -qq && apt-get install -y nodejs yarn
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

RUN yarn install --check-files
RUN bundle exec rails webpacker:compile

# コンテナ起動時に実行させるスクリプトを追加
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Rails サーバ起動
CMD ["rails", "server", "-b", "0.0.0.0"]
```

# docker-compose.yml を編集
MySQL (DB) を動かすコンテナサービスを起動し、サービス間での連携が必要な場合には
`Docker Compose` というツールを利用
ymlに記述することでビルドやコンテナの起動を一括で行うことが可能。

・db欄でMySQL (DB) の起動に関する設定
・web欄でrailsの起動に関する設定

```ruby:docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "3306:3306"
    volumes:
      - ./tmp/db:/var/lib/mysql

  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
```

# Gemfile の編集

```rubu:Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6.1.4'
```

# entrypoint.sh の編集
```ruby:entrypoint.sh
#!/bin/bash
set -e

rm -f /rails-docker/tmp/pids/server.pid

exec "$@"
```

# プロジェクトのビルド
以下のコマンドをターミナルで実行
`docker-compose run`を行うことで設定ファイルで定義された通りに、新たなコンテナを作成できる。
```
$ docker-compose run web rails new . --force --no-deps --database=mysql
```

次に下記を実行。サービスのビルドを実行
```
$ docker-compose build
```

# config/database.ymlファイルの書き換え
```config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  host: localhost

development:
  <<: *default
  database: myapp_development
  host: db
  username: root
  password: password

test:
  <<: *default
  database: myapp_test
  host: db
  username: root
  password: password

production:
  <<: *default
  database: myapp_production
  username: myapp
  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
```

# ブラウザで立ち上げ
`rails s`でサーバー起動
ブラウザのアドレスバーに http://localhost:3000/ と入力して立ち上がれば成功

# 参考にした記事
[docker公式](URL "https://docs.docker.com/compose/profiles/")
[docker-composeでRails 6×MySQLの開発環境を構築する方法](URL "https://tmasuyama1114.com/docker-compose-rails6-mysql-development/")
【Springboot】HTMLと@RequestPramで簡単に検索機能を実装する。URLへパラメータを設定し、ページ間で値を受け渡しする

# 1. はじめに
写真管理アプリを制作する中で、キーワードを用いた検索機能を実装したかったです。
ブラウザの履歴に残るよう検索毎に URL を分けたかったので、URL にパラメータを含めるのが理想でした。
結果的に `http://hogehoge.com?fruit=apple`のような URL を作成し、そのパラメータを次の画面に渡すことができたので、まとめました。

# 2. 対象読者
- 検索機能を実装したい方
- ブラウザに検索履歴を残したい方（ URL にパラメータまで含めることによって、ブラウザの履歴も細分化される）
- HTML と　Springboot で素早く実装したい方（JavaScript は使わない）

# 3.結論
下記の通り実装すれば OK です。
完成後イメージは下図の通りです。
![Qiita図解｜パラメータを用いた検索機能.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675074/c7944cfa-79dd-66b8-7fd4-b1c77cabb684.jpeg)


## 3-1. 下準備（フォームモデルの準備）
検索ワードを入力するために input フォームを用いる必要があるため、モデルクラスを作成します。
※ lombok を使用しています。

```HogeForm.java

package com.hoge.form;

import lombok.Data;

@Data
public class HogeForm {
	
	private String fruit;

}

```

## 3-2. 検索ワード入力側

``` searchInput.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"xmlns:th="http://www.thymeleaf.org">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{css/reset.css}">
    <link rel="stylesheet" th:href="@{css/****FIXME*****.css}">
    <title>タイトル</title>
</head>
<body>
	<h1>入力エリア</h1>
		<form type="search" action="/search-word" method="get" th:object="${hogeForm}">
			<input type="text" th:field="*{fruit}" name="fruit" />
		<button class="btn">Send</button>
	</form>
</body>
</html>

```


```SearchInputController.java
package com.hoge.controller;

@Controller
public class InputController {

@GetMapping("/search-input")
	public String getMediaList(Model model, @ModelAttribute HogeForm form) {

	return "searchInput";
}

@PostMapping("/search-input")
	public String getMediaList(Model model, @ModelAttribute HogeForm form) {

	return "searchResult";
}
```

## 3-2. 検索結果出力側

```searchResult.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"xmlns:th="http://www.thymeleaf.org">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{css/reset.css}">
    <link rel="stylesheet" th:href="@{css/****FIXME*****.css}">
    <title>検索結果</title>
</head>
<body>
	<h1>検索結果</h1>
		<p>
        <span th:text="${fruit}"></span></span>
    	</p>
	</form>
</body>
</html>

```
`@RequestParam`　を用いて URL 上のパラメータを取得します。

```SerchResultController.java
package com.hoge.controller;

@Controller
public class InputController {

	@GetMapping("/search-result")
	public String searchMedia(Model model @RequestParam String fruit) {
		model.addAttribute("fruit", fruit); 
		return "SearchResult";
	}
}

```

# 5. おわりに
最後までお読みいただきありがとうございました。

本記事は正確な内容となるように、可能な限り、調査・表現をしていますが、誤植などが含まれる可能性がございます。
もし、お気づきになられた場合には、ご指摘いただけますと幸いです。
Excelより情報を取得し、任意のフォルダにファイルを作成する

## 概要
Python勉強中です。
Excelよりフォルダを読み取ってファイルを作成します。

```
import os
import pathlib
import openpyxl

WORK_BOOK = r"C:\work\it\python\sample_image\sample.xlsx"
TARGET_SHEET = r"test2"
COLUMN_INDEX = 14

wb = openpyxl.load_workbook(WORK_BOOK, data_only=True)
ws = wb[TARGET_SHEET]

for row_no in range(1, ws.max_row + 1):
    id = ws.cell(row_no, COLUMN_INDEX).value

    if (not id) or (not id is None):
        folder_path = ('.\\' + str(id))
        output_path = pathlib.Path(folder_path + '\\output.txt')

        # フォルダがなかったら作成
        if not os.path.exists(folder_path):
            os.makedirs(folder_path)

        # ファイルが存在しなかったら作成
        if not os.path.exists(output_path):
            with open(output_path, 'w', encoding="utf-8") as w:
                w.write('test')
```
CURLのHeaderやBody（JSON）を指定文字で置換する

# 概要
pthon勉強中です。
curlのテキストを読み込み、header、bodyの任意項目を置換して出力します。

```
import pathlib
import re
import json


curl_path = pathlib.Path('.\\curl.txt')
output_curl_path = pathlib.Path('.\\curl_new.txt')


# 正規表現
BODY_PATTERN = r"-d \'([^*]*?)\'"
ID = "id"
HEADER_PATTERN = r"-H \'" + ID + ": ([^*]*?)\'"

# ファイルを読み込む
with open(curl_path, 'r', encoding="utf-8") as f:
    with open(output_curl_path, 'w', encoding="utf-8") as w:
        data = f.read()

        # Headerを取得
        replace_header_pattern = re.compile(HEADER_PATTERN)
        id = "2"
        new_data = replace_header_pattern.sub(r"-H '" +  ID + ": " + id + "'", data)
        print(new_data)

        # Bodyを取得
        r_body = re.findall(BODY_PATTERN, new_data)

        # JSONを変更
        body = json.loads((r_body[0]).encode())
        body['review_user_id'] = 3
        print(json.dumps(body, ensure_ascii=False))

        # 置換したBodyを出力
        replace_pattern = re.compile(BODY_PATTERN)
        new_data = replace_pattern.sub(r'-d \'' + json.dumps(body, ensure_ascii=False, indent=2, skipkeys=True) + '\'', new_data)

        w.write(new_data)
```
LaTeX-Workshopの数式ホバー表示における外部パッケージの追記

# みんなホバー表示使ってる？？
LaTeX-Workshopには数式にカーソルを合わせるだけで自動で変換した結果を出力してくれるホバー機能がついています。([LaTeX-Workshopのホバーに関するドキュメント](https://github.com/James-Yu/LaTeX-Workshop/wiki/Hover))
しかも`\newcommand`で新たに定義した数式でも、複雑でなければ反映します！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269455/6570e539-b8b0-b8f0-b8ad-1e5da5f85249.png" width=450 />
(これは`\newcommand{\g}{\mathfrak{g}}`という定義をしていますが、ちゃんと反映してますね）


# 問題点
ただし、プリアンブルで持ってきたパッケージに関しては標準では反映しません。。以下では`physics`の便利な括弧`\qty()`を用いているのですが、赤くエラーになってしまっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269455/cf6cc019-a4f5-f116-e3ff-e1e03d5f2454.png" width=550 />
そこで、公式ドキュメントをよく読んでみました。

# 解決策
ちゃんと表記されていました！([ハイライトリンク](https://github.com/James-Yu/LaTeX-Workshop/wiki/Hover#:~:text=%22%22-,latex%2Dworkshop.hover.preview.mathjax.extensions,-MathJax%20extensions%20to))

`設定`$\to$`mathjax`と検索$\to$`LaTeX-Workshop > Hover > Preview > Mathjax: Extensions`
へと移動していただくと、プルダウンで追加することが可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269455/d57ff8d9-c927-7e2c-fb54-5f5bc4cd3b7a.png" width=550 />

# 最後に
これで`physics`のパッケージがちゃんと追加されました！！ありがたしありがたし！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269455/20de9705-ad38-46ba-c1f0-843ea937e7ac.png" width=550 />
確認はしていませんが、`MathJax`の標準で仕様可能なパッケージでしたら、リスト内になくとも`setting.json`から利用可能かもしれません。([MathJax: The TeX/LaTeX Extension List](https://docs.mathjax.org/en/latest/input/tex/extensions/index.html))
2022/5/16主にITとかセキュリティの記事

スマホ盗聴の脅威　半導体回路の改ざん、専門家が警鐘　(5/14)
https://www.nikkei.com/article/DGXZQOUC10DNW0Q2A510C2000000/

国立情報学研究所とKDDI総合研究所が共同で、アメリカの教育データに関する調査報告書を公開(5/13)
https://edu.watch.impress.co.jp/docs/news/1402453.html

Classiqが世界最高レベルの量子回路の設計を競う、コーディングコンテスト「Classiq Coding Competition」の開催を発表効率的で革新的な量子回路を開発した参加者へ総額2万5千ドルの賞金とパブリシティの機会を提供する世界規模のコンテスト(5/13)
https://prtimes.jp/main/html/rd/p/000000001.000101286.html

「穴になりかねない」　ネットデータ保護、改正法に弱点(5/14)
https://www.nikkei.com/article/DGXZQOUA27CMX0X20C22A4000000/

中高年がやりがちな「スマホ・SNS」のしくじり事例、“ゆがんだ正義”にご注意を(5/14)
https://article.auone.jp/detail/1/2/2/100_2_r_20220514_1652475942346090

「中央銀行デジタル通貨に関する連絡協議会」第３回会合の議事要旨(5/13)
https://www.boj.or.jp/announcements/release_2022/rel220513a.pdf
【husky】モノレポにhuskyを導入する【ESLint】【Prettier】

## モノレポにhuskyを導入する方法
### huskyをインストール
`.git`があるディレクトリで`husky`をインストールします。
```:ターミナル
$ npx husky install
Need to install the following packages:
  husky
Ok to proceed? (y) y
husky - Git hooks installed
```

### `.husky/pre-commit`を作成
上記と同じディレクトリで`.husky/pre-commit`を作成します。
```:ターミナル
$ npx husky add .husky/pre-commit "cd frontend && yarn lint-staged"
husky - created .husky/pre-commit
```
すると以下のようになります。
![スクリーンショット 2022-05-16 午前1.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/6f633727-0830-c51e-fdf7-1e648fb5eec3.png)
```:pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd next-tailwind && yarn lint-staged
```

### lint-stagedなどをインストール
以降プロジェクトのディレクトリで作業を行います。
lint-staged, ESLint, Prettierをインストールします。
```:ターミナル
$ yarn add -D husky lint-staged eslint-config-prettier
$ yarn add -D --exact prettier
```

### lint-stagedの設定
lint-stagedの設定をします。
`package.json`に以下を追記します。
```package.json
{
  ...

  "lint-staged": {
    "*.{js,ts,tsx, jsx}": [
      "eslint --quiet --fix"
    ],
    "*.{json,md,html,js,jsx,ts,tsx}": [
      "prettier --write"
    ]
  },

  ...
}
```

### ESLint, Prettierの設定
`.eslintrc.json`や`.prettierrc.json`などを作成しESLint及びPrettierの設定を行います。

https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats

https://prettier.io/docs/en/configuration.html


### 動作確認
`git commit`して確認します。
```:ターミナル
$ git add .

$ git commit -m "test"
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 8068baf] test
 312 files changed, 17269 insertions(+), 3 deletions(-)
```
【React】react-hook-formで`errors`を参照時にundefinedになる

## 概要
[react-hook-form](https://react-hook-form.com/jp/)は、Reactでそこそこ使用されているバリデーションのライブラリです。`errors`は各入力項目でvalidateを設定して、それに適合しない場合はメッセージが入るような位置付けになっています。使い方の概要は、[React Hook Formによるフォームバリデーション](https://www.wakuwakubank.com/posts/764-react-react-hook-form/)の記事を参照ください。
今回は、この`errors`のオブジェクトが、なぜか参照時にundefinedになってしまい少しハマったので、状況や対応方法などメモ書きします。

## エラー時の状況など
今回使用したreact-hook-formのバージョンはv7になります。
react-nativeのアプリで、errorsは以下の通りに定義しました。

```react
 const {
    handleSubmit,
    errors,
    formState,
    control,
  } = useForm({
    mode: "onChange",
  });

 return (
  <View>
    <Controller
     name="hour"
     control={control}
     rules={
       min: {
        value: 0,
        message: "0以上の数を入力してください",
       },
     }
     render={({ field: { onChange, value } }) => (
       <TextInput
         label="時間"
         placeholder="時間"
         style={styles.hour}
         keyboardType="numeric"
         onChangeText={(text) => onChange(text)}
         value={value}
        />
     )}
    />
   {errors.hour && (
     <View style={styles.error}>
   　  　　<Text style={styles.errorText}>
      　 　{errors.hour.message}
       </Text>
     </View>
   )}
　　 </View>
 );
```

## 原因
[undefined errors object in react-hook-form](https://stackoverflow.com/questions/67195712/undefined-errors-object-in-react-hook-form)の記事にある通り、v7からは`errors`は`formState`の配下になりました。この事は、react-hook-formの[migrate-v6-to-v7](https://react-hook-form.com/migrate-v6-to-v7)の`errors`の項にも記載があります。

## 修正後
`formState`から`errors`を参照すれば、基本的には問題ありません。

```react
 const {
    handleSubmit,
    formState,
    control,
  } = useForm({
    mode: "onChange",
  });

 return (
  <View>
    <Controller
     name="hour"
     control={control}
     rules={
       min: {
        value: 0,
        message: "0以上の数を入力してください",
       },
     }
     render={({ field: { onChange, value } }) => (
       <TextInput
         label="時間"
         placeholder="時間"
         style={styles.hour}
         keyboardType="numeric"
         onChangeText={(text) => onChange(text)}
         value={value}
        />
     )}
    />
   {formState.errors.hour && (
     <View style={styles.error}>
   　  　　<Text style={styles.errorText}>
      　 　{formState.errors.hour.message}
       </Text>
     </View>
   )}
　　 </View>
 );
```
image_pickerで取得した画像をcloud storageに保存する（flutter）

# 処理の大まかな流れ
1. image_pickerで画像データを取得する
2. 取得したデータをcloud storageに保存し、保存したURLを取得する
3. firestoreにURLをパスとして保存する

# 環境設定
※ Firebaseの設定は別記事を参照ください。

### pubspec.yaml
[image_picker](https://pub.dev/packages/image_picker)と[firebase_storage](https://pub.dev/packages/firebase_storage)のパッケージを入れましょう。

```pubspec.yaml
image_picker: ^0.8.5+3
firebase_storage: ^10.2.16
```

### iOSの設定
今回はiOSアプリを作成していたのでiOSの設定のみ記述します。
以下のコードを、</dict>の上に貼り付けてください。
```ios/Runner/Info.plist
    <!-- ここから -->
    <key>NSPhotoLibraryUsageDescription</key>
    <string>This app requires to access your photo library</string>
    <key>NSCameraUsageDescription</key>
    <string>This app requires to add file to your camera</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>This app requires to add file to your photo library your microphone</string>
    <!-- ここまで -->
</dict>
</plist>
```

# サンプルコード
## 画像データをギャラリー（端末）から取得
```dart
  final String imagePath;
  final String imageName;
  File? file;
  final picker = ImagePicker();

  // ImagePicker（ギャラリー）
  Future getImageFromGallery() async {
    final image = await picker.pickImage(source: ImageSource.gallery);
    // 空の場合終了
    if (image == null) {
      return;
    }
    imagePath = image.path;
    imageName = image.name;
    file = File(imagePath);
  }
```

## Cloud Storageに保存
```dart
Future storeToStorage() async {
  FirebaseStorage storage = FirebaseStorage.instance;
  try {
    String imageUrl = '';
    final task = await storage.ref('images/$imageName').putFile(file!);
    imageUrl = await task.ref.getDownloadURL();
    // cloud storeに保存されたURLが表示されます
    print(imageUrl);
    // firestoreに保存する処理
  } catch (e) {
    // エラー処理
  }
},
```

## メインの部分
ここで、Cloud Storageに保存をしています。
「保存したいファイル名」はユニークになるようにしましょう。
```dart
final task = await storage.ref('images/$imageName').putFile(file!);
// final task = await storage.ref('保存したいフォルダ/保存したいファイル名').putFile(取得したファイルデータ);
```
なお、「取得したファイルデータ」は以下の処理のような値になります。
```Dart
File file = File(imagePath);
```

登録後、この処理でCloud Storageに登録されたURLが取得できます。
```Dart
imageUrl = await task.ref.getDownloadURL();
```
SDCTF

# 初めに
SDCTFで学んだことをまとめていきます。
全然時間が取れず期間内にはほとんど触ることができなかった（educationalしかできてない...）ので、次のCTFの時には解く時間をしっかり確保するようにしたいです。
間違ってたら教えていただけるとありがたいです。


# OSINT

## This flag has been stolen

### Wayback Machine
Wayback Machineを使うことでサイトが過去にどのようなものだったのかを見ることができる。

# REVENGE

## A Bowl of Pythons
わかった部分から少しずつコードを修正していくことで、コードを見やすくしていく。
関数化、コード化されている部分を自分で実行してみることでコードをより簡単にしていく。
pythonのコードを見るときは横にpythonのターミナルを開いて、逐次実行しながら理解していくとよい。

### eval
pythonでは`eval`関数を用いることで引数のコードを実行することができる。

### format
pythonでも`print`関数でフォーマットを用いることができる。
`{}`で囲まれた部分はその後ろの`.format()`に存在する配列に対応している。

### -1
pythonの配列においてインデックスがマイナスの場合は後から数える。
-1だと配列の最後の値を指す。

### xor
`g xor fib = f`のとき、`f xor fib = g`となる。

# PWN

## printfailed

### ダイレクトパラメータアクセス
`printf`関数において、`%N$d`とすることで、N番目の引数を表示させることができる。

### CyberChef
シーザー暗号を解くにはCyberChefが有効。
https://cyberchef.org
rotを用いることで文字のASCIIはいじることができるが、記号はいじることができないので、subを用いて調整する。

### Pwntool
pwntoolを使ってctfを解くときは、手元にバイナリと自分で作ったダミーのflagファイルを用意する。
pythonでソルバーを書く。
`process()`に処理したい内容（たとえばバイナリを実行するであったり、netcatで接続するであったり）を書くことで、その環境でソルバーを実行することができる。
`recvline`で出力された内容を受け取り、`sendline()`で括弧の内容を入力する。


# JAIL

## haxlab

### シェルを開く
```python
import os
os.system("sh")
```
でシェルを開くことができる。

### dir
dir関数を用いることで、引数に指定したオブジェクトのアトリビュート（変数や関数）を表示することができる。
このとき`__`で始まるものは特殊なアトリビュートである。

### getadder
`getadder(object,"attribute")`でもアトリビュートを参照することができる。

### __dict__
`__dict__`にはすべてのアトリビュートが格納されている。

### 配列
flagを取り出すことができなくても、flagを配列のように扱い、要素を順番に取り出すことによって表示させることができる。

### monkey patch
pythonでは`__builtins__`に含まれている関数も実行時に上書きすることができる。

### lambda
pythonでは`lambda 引数:式`で関数を定義することができる。（ただし名前なし）

#FORENSICS

## needle-in-a-haystack

### cyberchef
cyberchefにバイナリファイルをぶち込むことも可能。
`render image`で画像ファイルとして出力する。
【html】tableタグの使い方_列と行

htmlのtableタグについてメモを残します。
今回は特に列と行について記述します。
<h1>【trとth(td)について】</h1>
trタグは列(縦の個数)を決定します。

th(td)タグは行(横の個数)を決定します。

コード1の場合、
trタグは1個なので**列は1個になります。**
thタグは3個なので**行は3個になります。**

コード1
![html_code_ver1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/9ebd5d79-26d8-ee7b-e86c-d87eae72a65e.png)

コード1の実行結果が表示1になります。
表示1
![html_view_ver1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/f711bc62-be99-0b39-5de0-807966f81bb4.png)

コード2の場合、
trタグは3個なので**列は3個になります。**
thタグは1個(tr中の個数)なので**行は1個になります。**

コード2
![html_code_ver2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/8bc5bcc3-6cf4-e5b4-e0ea-54eb597e6a6a.png)
表示2
![html_view_ver2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/a47e8ba3-61f8-90dc-8876-7a7e13c75929.png)


<h1>【th:eachとtableタグ】</h1>
th:eachの要素をtableタグを使用して表示する方法を記述します。

コード3の場合、itemListの中身を横並び(列1個)に表示しています。
trタグは1個なので**列は1個になります。**
tdタグは1個ですが**行は3個になります。**
※itemListの要素数は表示3の通り3つになります。
tdタグはitemListの要素数分だけ行を表示します。


コード3

![html_code_ver3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/70f57779-6885-9fd1-7279-474198da628b.png)

表示3
![html_view_ver3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/57e9f003-125f-545a-9cb7-d97f8d4bf005.png)

コード4の場合、itemListの中身を縦並び(列3個)に表示しています。
trタグは1個ですが**列は3個になります。**
tdタグは1個なので**行は1個になります。**

コード4
![html_code_ver4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/e4a0da43-f1b2-649e-b59a-ff174a00c8dd.png)
表示4
![html_view_ver4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665680/b2b9570f-cb5d-dad5-5203-83e98f8a2ff8.png)
4Kホームページ制作メモ Part4 大手サイトの4K対応状況

## これを見れば、大手企業の恥がご確認いただけると思います

スクリーンショットにつきましては、TOPページのみ基本的に取得しており、それぞれの企業に著作権は帰属します。

スクリーンショットは論理解像度が1920に満たないブラウザーで、30%まで縮小して取得しています。

### NTT東日本
全般的に中央に寄りすぎている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/cc92a1a0-b051-172a-4fa5-bfd75abd6277.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/ace088ac-bf8c-2d7f-07f0-6ba2d18912f3.png)


### NTT西日本
全般的に中央に寄りすぎている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/335add03-17cb-acb9-288a-38dcbcfe734f.png)

### Yahoo! JAPAN
中央にしか寄っていない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/bb27ac5a-687b-e202-7c6c-d42aed939187.png)

### amazon
中央に寄りすぎている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/b158c806-8eb0-3d89-eab1-81402d43c657.png)

### 楽天市場
中央に寄りすぎている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/7e2e486c-b126-4eb3-a143-11845b650318.png)

### google
中央に小さく寄っている
左に寄っている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/84e67507-ec62-877d-dd35-6441ba37eb30.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/5796b9aa-e594-81ad-2276-18e1aec3ec15.png)

### duckduckgo
中央に寄りすぎている
左に寄りすぎている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/26302a97-c489-ec16-1f7c-82defcf84595.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/555b23fc-cc20-e1a5-07a0-b80b7c5e2096.png)

### bing
左に寄ってる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/09b2ce78-2c2b-1aa6-4fc0-9edca2ffe16c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/852aec03-642c-99c4-998f-d1eb3407f545.png)

### パナソニック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/4012f0e3-1f36-9863-de4f-7a73b34ec667.png)

### ソニー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/87f5b26d-029b-ea02-10f8-4793e907d8da.png)

### プレステ
ある程度対応しているっぽいがやはり中央に寄ってる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/9b090e59-9803-a743-20fb-074aad6b2255.png)

### 比べて、当社サイトは？
もう数日後に掲載できても良いレベルだが、ベータ版サイトよりスクリーンショット
※ベータ版であるため、実際に掲載される内容とは異なる可能性があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/68ab7985-be10-5d16-e13d-f6090788b9f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/61028742-7f02-4e82-2cb4-cc2befb99270.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/daa48372-86a5-c520-f21e-44bf82e751bd.png)

記事も画面全般を使用している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/7391f581-da90-9109-7245-6b239ddedb08.png)
AWS Glueの前処理として、S3のUTF-8以外のファイルの文字コードを変換する

# 課題
AWS Glue * S3 ではUTF-8のみ処理可能。
このため、事前にUTF-8以外の文字コードであるファイルは、UTF-8へ変換する必要がある。

## SJIS→UTF-8の例1
```py
df = spark.read.csv('s3://path_to_input_prefix/', encoding='sjis')
df.write.parquet('s3://path_to_output_prefix/')
# もしくは以下なら1ファイルでCSV出力される
df.write.csv("s3://path_to_output_prefix/")
```

### 引用元
https://github.com/aws-samples/aws-glue-samples/blob/master/examples/converting_char_encoding.md

## SJIS→UTF-8の例2
https://dev.classmethod.jp/articles/change-file-encoding-with-glue-python-shell/

JOBパラメータとして、以下を定義。JOBと1:1なのであまり意味はないように思われる。

* ソースバケット名
* ソースパス
* ソース文字コード
* ターゲットバケット名
* ターゲットパス

# Workflowに組み込む場合
ワークフロープロパティを活用することで、上記のパラメータをJOBではなく、ワークフローごとに分けることができるので、文字コード変換JOBを汎用的に利用できる。

https://docs.aws.amazon.com/ja_jp/glue/latest/dg/workflow-run-properties-code.html
ブラウザで中国語のサイトと認識されるとき

## 言語の設定

headの中にmeta要素を追加、content属性を指定する。

#### HTMLの場合
```html
<meta http-equiv="content-language" content="ja">
```

#### CakePHPの場合
```php5
<?= $this->Html->meta(['http-equiv' => 'content-language', 'content' => 'ja']) ?>
```
競プロででてくる剰余の演算のメモ

# 剰余演算に関して

atcoderでたまに見かける答えに剰余を解答にする問題を見る。
競プロと剰余の記事としてはこの辺がまとまっている。
https://qiita.com/drken/items/3b4fdf0a78e7a138cd9a
大きな値はとれないので剰余にしていると思われるが、計算でよく使う分配則が本当に成り立つのかとか
これマイナスになったらどうすんの？という疑問があった

剰余はこれ
https://ja.wikipedia.org/wiki/%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97
問題の一例はこれ
https://atcoder.jp/contests/abc178/tasks/abc178_c
## 剰余の分配則について
剰余の分配則はwikiの分配則参照してほしいがよく使うのは以下の式

```math
(a+b) \bmod n = ((a\bmod n) +(b \bmod n))\bmod n
```

ちなみに分配則の証明は調べても出てこない。なんとなくmodの定義見てたら
いいかなという気になります。

n個の場合に成り立ちそうかどうかはここにある
https://pokuwagata.hatenablog.com/entry/2020/08/30/134727

## 剰余の分配則で負の値をとってしまう場合
引き算したときには分配則の左辺と右辺が異なる場合がある。 a=4,b=-3,n=2として分配則に適用すると
```math

(a+b) \bmod n =(4-3) \bmod 2 = 1 \\
((a\bmod n) +(b \bmod n))\bmod n=((4\bmod 2) -(3 \bmod 2))\bmod 2 = (0 - 1)\bmod2 = -1  

```
となる（上段が分配則の左辺、下段が右辺）。
bがそもそも負の数をとってはいかんのだがそれはさておき競プロでは剰余にした結果
そういう計算が生じることもある。今回の問題なんかはそれである。
さて、どう対策するかというと解答を見てみるとどうやら
```math
(a-b) \bmod n = ((a - b)\bmod n + n) \bmod n 
```
が成り立ちそうな気配である。
```math
\begin{align}
((a - b)\bmod n + n) \bmod n &= ((a-b) \bmod n + n \bmod n) \bmod n\\
&=((a-b) \bmod n) \bmod n \\
&=(a-b) \bmod n
\end{align}
```
確かに成り立ちそう。
求めたいのは最終行だがそのまま分配則で計算すると上の例の通りマイナスになってしまうため
nを足してあげているということだ。誰が考え付いたのかわからんが有り難く使わせてもらう。

## オーバーフローする値の剰余を求めるとき
簡単に言うとpythonのpowなんかでは問題がでないが素直にコーティングするとオーバーフローするやつである
https://qiita.com/R_olldIce/items/ab3f382643e92122f8ef
↑はpythonのpowの話

例えば10^45の剰余をとろうとする

```rust
fn main() {
let x: i32 = 10; // or any other integer type
println!("{}",x.pow(45 as u32) % 3);
}
```
これはもうエラーである（thread 'main' panicked at 'attempt to multiply with overflow'～）
ここで出てくるのが二分累乗法という方法です。
原理はここ参照
https://qiita.com/drken/items/3b4fdf0a78e7a138cd9a#4-%E7%B4%AF%E4%B9%97-an

rustでは以下のようになります（binary_poweringで実装）
https://zenn.dev/yuucu/scraps/df5c890cd38777
からもらってきました

```rust
fn main() {
let x: i64 = 10; // or any other integer type
println!("{}",binary_powering(x,45,3) );
}

pub fn binary_powering(mut a: i64, mut n: i64, m: i64) -> i64 {
    let mut res = 1i64;
    let m = if m != 0 { Some(m) } else { None };
    while n > 0 {
        if n & 1 != 0 {
            res *= a;
            if let Some(m) = m {
                res %= m
            }
        }
        a *= a;
        if let Some(m) = m {
            a %= m;
        }
        n >>= 1;
    }
    res
}
```
論文まとめ：ArcFace: Additive Angular Margin Loss for Deep Face Recognition

# はじめに
CVPR2019より以下の論文
[1] J. Deng, et. al."ArcFace: Additive Angular Margin Loss for Deep Face Recognition". CVPR2019
のまとめ

CVF open access:
https://openaccess.thecvf.com/content_CVPR_2019/html/Deng_ArcFace_Additive_Angular_Margin_Loss_for_Deep_Face_Recognition_CVPR_2019_paper.html

official なcode:
https://github.com/deepinsight/insightface

<font color="red">書きかけ</font>

# 概要
- 顔認証を行うモデル
- ArcFace(Additive Angular Margin Loss)なるlossを導入し、高い精度を達成

# 背景
顔認証を行うモデルのlossは主に以下の２つ

1. softmaxで多くの人を分類する
1. triplet lossを使いembedする

それぞれ以下のような欠点がある。

## 1. softmaxで多くの人を分類する
欠点１：学習する人の数が増えると最後の全結合層における行列演算が線形に増える
欠点２：学習した特徴量はより多くの人に汎化する時にうまくいかない

## 2. triplet lossを使いembedする
欠点１：学習する人の数が増えるとtripletな組み合わせが階乗爆発的に増え、学習に時間がかかる
欠点２：semi-hard sample miningは学習が難しい

# 手法
本論文の主題は ArcFace loss だが、概要はこちら
https://qiita.com/masataka46/items/e069384c2622f3b722f9
MobileFaceNetの記事に書いたので、そちらを参照してください。

ここでは数式で中身を追っていく。

まず
$x\_i \in \mathbb{R}^d$ : i番目サンプルの特徴量で、d 次元を想定
$y\_i$ : i番目のサンプルが屬するクラス
$W \in \mathbb{R}^{d \times n}$ :最後の重み
$W\_j \in \mathbb{R}^d$ :その重みの j 番目の列
として、バイアスを無くせば、softmax lossは

```math
L_1 = - \frac{1}{N} \sum^N_{i=1} \log \frac{e^{W^T_{y_i} x_i}}{\sum^n_{j=1} e^{W^T_{j} x_i}} \tag{1}
```

であるが、

```math
W^T_{j} x_i = \| W_j\| \| x_i \| \cos \theta_j \tag{C1}
```

において重みも特徴量も正規化して入力すると（C1）式は

```math
\frac{W^T_{j}}{\| W_j\|} \frac{x_i}{\| x_i \|} =   \cos \theta_j \tag{C2}
```

なので、（１）式は


```math
\begin{eqnarray}
L_2 &=& - \frac{1}{N} \sum^N_{i=1} \log \frac{e^{s \cos \theta_{y_i}}}{\sum^n_{j=1} e^{s \cos \theta_j}}  \\
&=& - \frac{1}{N} \sum^N_{i=1} \log \frac{e^{s \cos \theta_{y_i}}}{e^{s \cos \theta_{y_i}} + \sum^n_{j=1, j≠y_i} e^{s \cos \theta_j}} \tag{2}
\end{eqnarray}
```

となる。正解のクラスに対して角度ベースで m のマージンを与えると（２）式は

```math
L_2 =  - \frac{1}{N} \sum^N_{i=1} \log \frac{e^{s \cos (\theta_{y_i} + m)}}{e^{s \cos (\theta_{y_i} + m)} + \sum^n_{j=1, j≠y_i} e^{s \cos \theta_j}} \tag{3}

```

となる。これがArcFace loss。

以下は softmax と ArcFaceとの比較図。


![ArcFace_img00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/ab14bc2c-109c-e2ad-cc91-bf5c4ae7e54c.png)

８クラス分類で２次元の特徴量とした場合の両lossの特徴量空間（の正規化後）

以下、この図の解釈。

まず特徴量 $x\_i$ を２次元と考えると、それぞれ以下の薄い紫や薄い青のように分布しているだろう。

![ArcFace_img03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/00b83506-0499-d4ac-9aee-845d78269241.png)

これを正規化すると、矢印のように大きさ１の円上に移動させればこのようになるだろう。

さて、右のArcFace loss の場合を考える。正規化され移動した青点と各クラスの代表ベクトル（を正規化したもの）とのコサイン類似度をいったん求める。これにsoftmaxを作用させると、コサイン類似度が最も高いクラスが選択される。

ここでmargin m を角度ベース加えると、より角度に対して近目の位置に分布が制約されるだろう。そうすると、上図の薄い青の分布のようになると考えられる。
golang インターフェースからコードの自動生成

調べているうちにそもそもVSCodeにこの拡張機能があったのでやめたが、その作業記録として。

# Work
https://github.com/progllama/interface-realize

# .gitignoreの導入
## OS
### macOS
https://github.com/github/gitignore/blob/main/Global/macOS.gitignore

## IDE
### VSCode
https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore

## Language
### Go
https://github.com/github/gitignore/blob/main/Go.gitignore


# VSCodeの設定
## Official
https://code.visualstudio.com/

## spell checker
https://qiita.com/diescake/items/98c5a099e85775cd917d

## 自動フォーマット(no extension)
https://qiita.com/mitashun/items/e2f118a9ca7b96b97840

## フォーマッタ
基本的には対象のファイル拡張子名で検索すればよしなにやってくれる奴らが出てくる。
ただ、それらがない時に関してはPrettierをインストールして設定する必要があると思われる。
Go拡張にデフォルトで入っている。

## IntelliSense(自動補完機能)
基本的には対象のファイル拡張子名で検索すればよしなにやってくれる奴らが出てくる。
Go拡張にデフォルトで入っている。

## Lint
基本的には対象のファイル拡張子名で検索すればよしなにやってくれる奴らが出てくる。
Go拡張にデフォルトで入っている。

## Debug
Go拡張にデフォルトで入っている。

https://qiita.com/yagi_eng/items/1c34f9691128c51846e7

## ブラケットのカラーライズ(Bracket Pair Colorizerが非推奨となっていたため載せてます)

https://dev.classmethod.jp/articles/replace-bracket-pair-colorizer-2-to-vscode/

## docker
https://docs.microsoft.com/ja-jp/learn/modules/use-docker-container-dev-env-vs-code/

リモートコンテナ上で作業するメリット、デメリットはツールの制限。これはメリットにもデメリットにもなる。

## VSCode 設定関連
https://www.mitsue.co.jp/knowledge/blog/frontend/202108/30_1016.html

https://www.cview.co.jp/osakatech/2021.04.20.dYMmFSxAihNBwoEkCys_X


# ビルドツール
Make


# circle ci
https://qiita.com/tatane616/items/8624e61473a9957d9a81


# github

## Dependabot
https://dev.classmethod.jp/articles/github-dependabot-2021/

## Template
prepare template for issue and pull request.


# Produce
## 下調べ
### 使用ライブラリ・作成フローなど
#### リファレンス
[静的解析をはじめよう - Gopherをさがせ！](https://golangtokyo.github.io/codelab/find-gophers/?index=codelab)
[型チェックでインターフェースを実装しているか調べよう](https://golangtokyo.github.io/codelab/first-step-type-check)

#### メモ
大きく分けてやることは3つ
1. 構文解析
1. コードの生成
1. コードの出力(整形などもこのフェーズ)

+ 構文解析には標準ライブラリのgoパッケージを使用
+ コード生成、出力には[github.com/dave/jennifer](https://github.com/dave/jennifer)を使用
+ CLIには[github.com/spf13/cobra](https://github.com/spf13/cobra)を使用

### ライブラリの動作検証
#### go/ast
##### 概要
抽象構木の作成をする。

#### go/types
##### 概要
astは構文技を作るだけで肩情報までは取得してくれない。
それをしてくれるのがtypes。

#### jennifer

# 失敗、反省
* コミット絡みはちゃんと確認してからする。(メッセージ内容、変更内容の確認。今まではそこんとこは適当だったのとpushした後に修正するのはめんどい)
* goenvは使わないで良い。goが後方互換を意識して作っているし。そもそもgoenvの開発自体の頻度が低いし、goenv作者本人もそんなに使わないと明言しているとのこと。


# 感想
qiitaではリンクを直に貼ると何のリンクなのか編集していてわからなくなるし場所も取るのでタイトルをちゃんとつけたほうがいいなと思った。
初めてツールとかをちゃんと設定してやったのでそのあたりの勉強になった。

# 最後に
```Go generate interface stubs```
That's all !!!
This version of ChromeDriver only supports Chrome version ◯◯な時、君はどうする！？

久々にwebdriverを使おうと思ったら動かなくなったので備忘録です。

久々にwebdriverを使おうと思ったらこんなエラー文が...

```terminal:terminal
selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 99
Current browser version is 101.0.4951.64 with binary path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
```

簡単に言うと、
「YouのダウンロードしているChromeDriverはChormeのver.99までしかサポートしてないんだけど、Youが使ってるchromeブラウザのバージョンは101で合わんからダメですわ」 ということを言っています。

ここであなたが取れる手段は3つ
1. あなたが設定しているchrome driverをアップグレードする
2. あなたが使っているchromeをダウングレードする
3. ChromeDriverを諦める 

3はもちろんあり得ませんよね。

1の場合は下記のコマンドでアップデート可能です

```terminal:terminal
brew upgrade chromedriver

```


2の場合はなかなかに面倒なのですが、下記のURLからアプリケーションを刷新する形でダウングレードが可能です。
(https://google-chrome.jp.uptodown.com/mac/versions)
ただ、こちらはお勧めしません。これまでの設定も上書きして消してしまう可能性があるので、これまで育て上げた設定が消えてしまう可能性があります。

今回は1の方法で対処しました。
めでたしめでたし。


### 後書き

今後のver管理が色々と面倒くさいのでwebdriver-managerを使おうと決心した夜でした。


### 参考リンク

https://yuki.world/python-selenium-chromedriver-auto-update/

ChromeDriverをアップデートする方法
https://doku-pro.com/chromedriver_upgrade/


https://yuki.world/python-chrome-driver-version-error/
Navigation2で複数の目的地を設定する

## はじめに
Navigation2で複数の目的地を設定するやり方です。




## DEMO
Simulation起動は下記を参照してください。
https://qiita.com/porizou1/items/d63a41fc1e478dfa5ab6


1. Waypoint/Nav Through Poses Modeをクリック

![Screenshot from 2022-05-15 23-04-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/6d833c83-580e-2d34-121b-4a994cf2e022.png)


2.Nav2　Goalをクリック

![Screenshot from 2022-05-15 23-11-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/78accbd6-9b03-319e-1b30-ad4814e6f0ef.png)


3.複数Goalを設定

Goalを複数設定してください。
![Screenshot from 2022-05-15 23-13-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/56d2ef97-4f59-c720-247e-0b44cf4ea060.png)


4.Start WayPoint Followingのボタンを押します

![Screenshot from 2022-05-15 23-04-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/d36fa2b8-756a-850a-9f8e-93647e21ee8e.png)


5.複数ポイントを移動していきます。
![Peek 2022-05-15 23-24.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/d1717764-02ea-e7de-5b9a-838d642ed1f4.gif)


6.４と同様にStart Nav Through Posesを押すと、最終地点に複数ゴールに沿いながら、たどり着くルートが作成されます。

![Screenshot from 2022-05-15 23-13-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/fd76aa95-a76a-7e18-93c1-79a06b3bd54d.png)


![Peek 2022-05-15 23-27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/ece27520-8688-417a-8838-9a53940ac94f.gif)
CLionの表示言語を日本語から英語に戻す

# はじめに

CLionのアップデートで表示言語が日本語になるようになった。表示言語は英語のほうがいい方向けに戻し方を説明。

![Screenshot from 2022-05-15 23-25-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123822/64d2d38b-bcb0-1ddb-ff81-92021abdb158.png)

# 環境
- CLion 2022.1.1

# 方法



画面上部タブ「ヘルプ(H)」から「アクションの検索(F)」すると、検索窓が出てくる。

検索窓に「日本語」と入力すると、プラグイン:Japanese Language Pack/日本語言語パック　が表示できる。ここで日本語になってる場合はオン担ってると思うのでクリックしてオフにする。その後再起動すると英語に戻っている。

![Screenshot from 2022-05-15 23-24-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123822/b753509d-06eb-03cf-bce4-d2000b43a195.png)

![Screenshot from 2022-05-15 23-26-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123822/81f14cac-1c43-6013-569a-3490fcf43756.png)
参照関係と主従関係

# 1. オブジェクトリレーションとは
「オブジェクトリレーション」とは、異なるオブジェクト間の関連性を表すデータの紐付きのことを指します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/8eeb9325-b775-1643-a8ea-defda71a1422.png)

# 2. 参照関係とは？
異なる2つオブジェクト同士をつなぎ、片方のオブジェクトをもう片方のオブジェクトの関連項目から参照できるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/6c80e12f-1705-9c1c-6328-7924d86f277b.png)

# 3. 主従関係とは？
主従関係のリレーションでは、片方のオブジェクトが「主」になり、もう片方のオブジェクトが「従」になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/a9714ba1-134f-2d13-1729-1bef41da71f3.png)

# 4.参照関係と主従関係の違い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/d24d26a5-b623-0d51-0dad-2c1a917681c1.png)
## 4.1 参照関係と主従関係の違い①
◆親オブジェクトの必須
子オブジェクトにレコードの親オブジェクトは必須です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/10a0722b-50d9-3326-326a-c8fd948cb2a3.png)
## 4.2 参照関係と主従関係の違い②
◆子オブジェクトとするリレーション
子オブジェクトに参照関係項目、主従関係項目を作成する時の制限です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/c706fdb6-2d03-2b2c-8b7d-5bec6699c4ac.png)
## 4.3 参照関係と主従関係の違い③
◆リレーションの制限
1つのオブジェクトからリレーションを結べるオブジェクト数の制限です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/6e9fe992-c42d-872a-b2dc-2e6a28f0b216.png)
## 4.4 参照関係と主従関係の違い④
◆連動削除復元
親オブジェクトレコードが削除・復元されるときの子オブジェクトレコードの連動です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/f296c272-ad0a-6452-d6dd-483b24b0ffb7.png)
## 4.5 参照関係と主従関係の違い⑤
◆段階制限
1つのオブジェクトからリレーションを結べる段階オブジェクト数の制限です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/5c702429-cda6-621e-192d-903ad5353665.png)
## 4.6 参照関係と主従関係の違い⑥
◆積み上げ集計
関連リストにある関連レコードなどから値を計算し、従レコードの項目の値に基づいて主レコードの値を表示できる項目です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/e3d2d96c-1dc3-7895-62af-c2f241c64fd7.png)

# 5. 連結オブジェクト
2つの主従関係を持つカスタムオブジェクトです。カスタム連結オブジェクトを使用して、2 つのオブジェクト間の「多対多」リレーションをモデル化できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/f0806b8d-2e99-fda5-4f4f-0059a49995d0.png)

# 6. SOQLでリレーションの情報を取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1835427/f0aa924f-aeac-f93f-2bb4-c7b0c5cdf018.png)

# 6.1 標準オブジェクトの場合
◆親オブジェクト：取引先（Account）
◆子オブジェクト：取引先責任者（Contact）
### 親 (Account) から子 (Contact) を参照
```
SELECT Id, Name, (SELECT Id FROM Contacts) FROM Account
```
### 子 (Contact) から親 (Account) を参照
```
SELECT Id, Name, Account.Id, Account.Name FROM Contact
```
# 6.2 カスタムオブジェクトの場合
◆親オブジェクト：ParentObj__c
◆子オブジェクト：ChildObj__c
◆子リレーション名:ChildObjs
### 親 (ParentObj__c) から子 (ChildObj__c) を参照
親オブジェクトから子オブジェクトをSOQLで使用したい場合は、対象の子オブジェクトで定義されている主従関係もしくは参照関係の項目の子リレーション名により子オブジェクトの所定の項目を指定できます。
カスタムオブジェクトの場合には、子リレーション名に__rを付与して記載することになります。
```
SELECT Id, Name, (SELECT Id, Name FROM ChildObjs__r) FROM ParentObj__c
```
### 子 (ChildObj__c) から親 (ParentObj__c) を参照
子オブジェクトから親オブジェクトをSOQLで使用したい場合は、対象の子オブジェクトで定義されている主従関係もしくは参照関係の項目により親オブジェクトの所定の項目を指定できます。
カスタムオブジェクトの場合には、項目のAPI参照名の__cの部分を__rに変換して記載することになります。
```
SELECT Id, Name, ParentObj__c, ParentObj__r.name FROM ChildObj__c
```
# 


##
EditTextで文字の入力を検知する方法



# はじめに
今回はEditText内の文字が入力された時に動きを加えたいと思い、今回の方法を調べました
↓の記事を参考にしました

https://qiita.com/kuluna/items/8d2bafd1f03376ac3ce0


# LiveData
↑の記事を参考にしましたが、それをLiveDataの中で使えるようにしました
今回はEditText内の文字が入力、削除されたことを検知し動きを加えたかったので
対象のEditTextに

```
android:afterTextChanged="@{viewModel.EditTextChanged}"
```
この一文を加え、DataBindingで指定しているViewModelに
EditTextChanged()という関数を作りました
```
fun EditTextChanged(editable: Editable) {}
```
あとはこの{}に文字が入力、削除された時にやりたい処理を追加するだけです

# 終わりに
今回は文字の変更された事を検知したかったのでXML内で
```
afterTextChanged
```

をつかいましたが、
参考にした↑の記事内にもある
beforeTextChanged（文字の変更前に呼ばれる）
onTextChanged（文字の変更中に呼ばれる）
この二つもそれぞれLiveDataを使ったXML内で使えるので状況に応じてうまく利用できればいいなと思います
その時にはそれぞれViewModelで呼び出すときの引数の違いに気をつけたいところですね！