OmniAICreator/Qiita-1.07M huggingface dataset:
WordPress | WP REST API | "rendered"うざい

# "rendered" いらない
WordPressのAPIは便利ですが・・・

```
"title":{
  "rendered": "記事タイトル"
}
```
 `postData.title[0]` とか `postData.title["rendered"]` とか
付けないと取得できない。これ地味にめんどい。

###functions.php に追記

```
function X()
{
    register_rest_route(
                        'custom/v0',
                        '/posts',
                        [
                            'methods' => WP_REST_SERVER::READABLE,
                            'callback' => 'Y'
                        ]);
}

add_action('rest_api_init', 'X');


function Y()
{
    $_RESULT_ = [];

    $_POSTS_ = get_posts([
                    'post_type' => 'post',
                    'posts_per_page' => -1,
                    'order' => 'DESC'
                  ]);

    if ( $_POSTS_ ) {

        foreach ( $_POSTS_ as $_P_ ) {

            $ID = $_P_ ->　ID;

            $DATE = mysql2date('Y/n/j', $_P_ -> post_date);

            $TITLE = $_P_ -> post_title;

            $_KEY_ = [
                  'id' => $ID,
                  'date' => $DATE,
                  'title' => $TITLE
                 ];

            array_push(　$_RESULT_, $_KEY_　);
        }

    }
    return $_RESULT_;

}
```


これで、独自のURLができます。
http://localhost:8080/wp-json/custom/v0/posts

###参考リンク
https://knowledge.cpi.ad.jp/cms/wp-rest-api2/
https://notes.sharesl.net/articles/751/
VirtualBOXにubuntu20.04の仮想マシンを構築する

## はじめに
本記事ではVirtualBOXにubuntu20.04serverの仮想マシンを構築する方法をまとめます

## VirtualBoxをダウンロード/インストールする
https://www.virtualbox.org/wiki/Downloads

## ubuntu20.04serverのISOファイルをダウンロードをする
https://jp.ubuntu.com/download

## 仮想マシンを構築する
![VirtualBox仮想環境作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637823/bcbb7dee-130a-2410-576c-3ad47d3a8144.png)

## 仮想マシンでubuntuを起動する
![VirtualBox仮想環境作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637823/8fde212f-61cb-5ee5-8f91-2a6d4a26f815.png)


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

## アダプタ設定

### NAT (Network Address Translation)
- **特徴**: ゲストOSからインターネットやホストOSへの通信が可能。ただし、ホストOSからゲストOSへの通信はデフォルトでは不可。
- **ホストからゲストへの通信**: ポートフォワーディングの設定が必要。
  - 例: SSH通信の場合、ホストOSの特定ポート（例えば2222）をゲストOSの22番ポートにフォワードする設定を行う。

### ホストオンリーアダプター (Host-Only Adapter)
- **特徴**: ゲストOSとホストOS間の通信専用。外部ネットワークへのアクセスは不可。
- **IPアドレスの設定**: 通常、192.168.x.xのIPアドレスが自動的に割り当てられる。
- **ホストからゲストへの接続**: SSHなどのプロトコルで直接接続可能。

### ブリッジアダプター (Bridged Adapter)
- **特徴**: ゲストOSがホストOSと同じネットワーク上に直接接続される。これにより、ゲストOSはホストOSや外部ネットワークと自由に通信できる。
- **IPアドレスの設定**: 通常、192.168.x.xのIPアドレスがDHCPサーバー（ルーターなど）から割り当てられる。
- **ホストからゲストへの接続**: SSHなどで直接接続可能。また、ゲストOSから外部インターネットへのアクセスも可能。

##### 参考URL: [VirtualBoxのネットワーク設定まとめ](https://shin569.hatenablog.com/entry/2020/04/11/220835)
------
Rails 開発環境を準備する！

①AWS Cloud9 で新しくIDE（開発環境）を立ち上げ
　　⑴AWS Educateにログインし、マネジメントコンソールにアクセスするよ。
　　⑵Cloud9にアクセスするよ。
　　⑶AWS Cloud9 のトップ画面にて、「Create environment」をクリックするよ。
　　⑷「Name」を入力し、「Next step」だよ。
　　⑸Platform の「Amazon Linux 2 (recommended)」を選択して、「Next step」だよ。
　　⑹Review(最終確認画面)が表示され、「Create environment」だよ。
　　⑺以上！

②AWS Cloud9の設定について
　これは、改善の余地ありですが、お勧めされているのは、
⑴右上の歯車マークにて
＊Project Settings
 　・Soft Tabs: 4から2に変更するよ。（タブサイズを2に変更）
　・On Save, Strip Whitespace: チェックを入れるよ。（余計なスペースの自動削除）
＊Experimental
　・Auto-Save Files:「Off」から「After Delay」に変更するよ。(ファイルの自動保存)
⑵左のサイドバー上部にある歯車マークにて
＊「Show Hidden Files」にチェックを入れるよ。
隠しフォルダ・ファイルの可視化を行う目的だよ。隠しフォルダ・ファイルは、「.」から始まるフォルダ・ファイルのことをいうよ。開発において、隠しフォルダ・ファイルを作成または修正するともあり得るよ。

③Githubとの連携
④Githubとの接続確認
⑤Railsのバージョンアップ
⑥ImageMagickのインストール

＃編集途中だよ
画像ファイルのRGBの数値をcsvファイルに出力する

ドット絵をBlender(3Dモデリングソフト)に取り込むために作ったもの。
https://twitter.com/gtyksculpt/status/1436290905221189636?s=20

```Python
# ファイル名などに日本語があるとエラーになります。
# 画像のピクセルごとにBlue(RGBのB)の数値0-255をcsvファイルに出力する。

import cv2
import csv
import numpy
import os

ext = "png" # 画像ファイルの拡張子
img_name = "imgfile" # 画像ファイルの名前
csv_name = "csvfile" # csvファイルの名前

fdr = r'C:\Users\User\Documents\python\pixcel' # 画像を置く場所
csvfdr = r'C:\Users\User\Documents\python\pixcel\csv' # csvファイルを出力する場所


fname = img_name + "." + ext
fpath = os.path.join(fdr, fname)
bgr_array = cv2.imread(fpath) 

data = numpy.array(bgr_array[:, :, 0]) 
# ここでは[:, :, 0]の部分が0なのでBlueの値(0～255)が出力される。
# [:, :, 1]ならGreen、[:, :, 2]ならRedの数値が出力される。
    
csvname = csv_name + ".csv"
csvpath = os.path.join(csvfdr, csvname)
numpy.savetxt(csvpath, data,fmt="%.0f", delimiter=",")
```
STM32L010を使た、MbedでHALの入力 (約5Kバイト)


目的
最軽量化

PA0(6ピン)から入力してPA4(10ピン)でLチカする。

x Mbedのリビジョンは、143


![h_con58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f4756fb1-9761-b555-c460-c5389cb7b1d6.jpeg)



![h_con57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d8d6cb94-865a-a4a0-f46c-9c2fec46163c.jpeg)



```c++

#include "mbed.h"

//DigitalOut myled(PA_4);

int main() {

  __HAL_RCC_GPIOA_CLK_ENABLE();
    
  GPIO_InitTypeDef GPIO_InitStruct = {0};

  GPIO_InitStruct.Pin = GPIO_PIN_0;
  GPIO_InitStruct.Mode = GPIO_MODE_INPUT;
  GPIO_InitStruct.Pull = GPIO_NOPULL;
  HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);
    
  GPIO_InitStruct.Pin = GPIO_PIN_4;
  GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
  GPIO_InitStruct.Pull = GPIO_NOPULL;
  GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
  HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);
    
    
    HAL_GPIO_WritePin(GPIOA, GPIO_PIN_4, GPIO_PIN_SET);
    
    while(1) {
        if(HAL_GPIO_ReadPin(GPIOA, GPIO_PIN_0)!=0) {
            //myled = 1;
            HAL_GPIO_WritePin(GPIOA, GPIO_PIN_4, GPIO_PIN_SET);
        } else {
            //myled = 0;
            HAL_GPIO_WritePin(GPIOA, GPIO_PIN_4, GPIO_PIN_RESET);
        }
    }
}



```
JupyterからQtアプリケーションを動かす

# はじめに

Jupyter NotebookやJupyter QtConsoleでQtの`QWidget`や`QMainwindow`などを`show()`で動かそうとするとイベントループの関係でフリーズするか"Kernel died"になります。マジックコマンド`%gui qt`でこれは解決しますが、毎回これを実行するのもだるいし、同じコードブロックで実行すると意味がないとか結構謎な挙動を示します。

ここでは、`%gui qt`の実行を、Qtウィジェットの`__init__`内で勝手にやってくれる便利な方法を紹介します。

# ポイント

- `QWidget.__init__`の前に`QApplication`を走らせる。
- `QApplication`を走らせる前に`%gui qt`を走らせる。
- Garbage collectionで`QApplication`が持っていかれないようにする。

# 方法

まずは`%gui qt`を走らせてから`QApplication`を立ち上げる関数です。

```python
from qtpy.QtWidgets import QApplication

APPLICATION = None

def gui_qt():
    try:
        from IPython import get_ipython
    except ImportError:
        get_ipython = lambda: False

    shell = get_ipython()
    
    if shell and shell.active_eventloop != "qt":
        shell.enable_gui("qt")
    return None

def get_app():
    gui_qt()
    app = QApplication.instance()
    if app is None:
        app = QApplication([])
    global APPLICATION
    APPLICATION = app
    return app

```

関数`gui_qt`内でipythonのシェルを取得し、`enable_gui`で`%gui qt`を実行します。Jupyter以外の環境でも問題ないように、try/exceptや場合分けを慎重に行います。

関数`get_app`では、`gui_qt`を呼んでからQApplicationを走らせます。すでに走っている場合、クラスメソッド`QApplication.instance`で`QApplication`のインスタンスが取得できるので、これがNoneの場合のみ`QApplication([])`で新しく用意します。

最後に、グローバル変数`APPLICATION`に残しておくことで、garbage collectionを回避します。

---

この`get_app`関数をコンストラクタ内で実行します。ここでまた、`app = get_app()`のように`QApplication`インスタンスを取っておかないとなぜかフリーズします。

```python
from qtpy.QtWidgets import QMainWindow

class MyWidget(QMainWindow):
    def __init__(self):
        app = get_app()
        super().__init__()
```

以上で問題なく起動します。例えば`mywidget`モジュールにこれがあれば

```python
from mywidget import MyWidget

widget = MyWidget()
widget.show()
```

だけでOKです。起動したアプリケーションとJupyterが同時に動かせます。
Python3について(＠,デコーダーについて)

#デコーダについて

関数を装飾するとか、よく分からなかったので、自分で検証しました。
また、ふわっとしていますが、覚書として書きます。

```deko.py
def deko(func):	#デコレータ
	def tent():
		print("This")
		result = func()	#これはpen()のこと
		print("a")
		return result
	return tent

@deko
def pen():#デコレーションされる関数
	print("is")
	return "Pen"

if __name__ == "__main__": #deko.pyで直接呼ばれた場合、Pen関数をプリントします
	print(pen())


>>>This
>>>is
>>>a
>>>Pen
```

1.＠が付いている関数（今回だとpen()）が実行される際に、print("is")ではなくdeko(func)が実行されます
2.deko(func)の中のfuncは、pen()の関数が実行されます
3.deko(func)の関数が終了すると、pen()に戻って来ます
4.最後にpen()のreturnが返されます
【Docker】Rails6×react×MySQL環境構築

Dockerでrails api×react×MySQLの開発環境を構築する



## 1. 各種ファイルの準備

### ディレクトリ構成

```
rails_react
├── api/
│   ├── Dockerfile
│   ├── entrypoint.sh
│   ├── Gemfile
│   └── Gemfile.lock
├── front/
│   └── Dockerfile
└── docker-compose.yml
```



### docker-compose.yml

```yaml
version: "3"

services:
  api:
    build:
      context: ./api/
      dockerfile: Dockerfile
    ports:
      - "3333:3333"
    volumes:
      - ./api:/var/www/api
      - gem_data:/usr/local/bundle
    command: /bin/sh -c "rm -f /var/www/api/tmp/pids/server.pid && bundle exec rails s -p 3333 -b '0.0.0.0'"
  my-database:
    image: mysql:5.7
    environment:
      - MYSQL_ALLOW_EMPTY_PASSWORD=yes
  phpmyadmin:
    image: phpmyadmin
    ports:
      - "1080:80"
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=my-database
      - PMA_USER=root
  front:
    build:
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/var/www/front
    command: sh -c "cd react-app && yarn start"
    ports:
      - "3000:3000"
volumes:
  gem_data:
```

### api/Dockerfile

```dockerfile
FROM ruby:2.7.1

ARG WORKDIR=/var/www/api
# デフォルトの locale `C` を `C.UTF-8` に変更する
ENV LANG C.UTF-8
ENV LC_ALL C.UTF-8
# タイムゾーンを日本時間に変更
ENV TZ Asia/Tokyo

RUN apt-get update && apt-get install -y nodejs npm mariadb-client
RUN npm install -g yarn@1

RUN mkdir -p $WORKDIR
WORKDIR $WORKDIR

COPY Gemfile $WORKDIR/Gemfile
COPY Gemfile.lock $WORKDIR/Gemfile.lock
RUN bundle install

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3333

# Start the main process
CMD ["rails", "server", "-p", "3333", "-b", "0.0.0.0"]
```



### api/Gemfile

```ruby
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.6'
```



### api/entrypoint.sh

```sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"
```



### front/Dockerfile

```dockerfile
FROM node:12.18.2-alpine  

ARG WORKDIR=/var/www/front

RUN mkdir -p $WORKDIR

WORKDIR $WORKDIR
```



## 2. コマンド実行

```bash
$ docker-compose run api rails new . --force --no-deps --database=mysql --api
$ docker-compose build
$ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-app"
```



### api/config/database.ymlの書き換え

```yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  host: my-database

development:
  <<: *default
  database: api_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: api_test
```



```bash
$ docker-compose up -d
$ docker-compose run api rake db:create
```

以上で環境構築完了
Wordpress | WP REST API | /wp-json が見えない（無効化されている）

#wp-jsonが見えない
`WP REST API` はWordPressの標準装備なので、見えないはずがない。
`docker-compose` でインストールしただけなのに、見えない。
StackOverflow を見ても書いてない。と、困った時の備忘録です。

http://localhost:8080/wp-json/wp/v2/posts

## 結論：パーマリンクの設定を変える
デフォルトで 「基本」 が選ばれている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/552d774d-b9e0-13a3-7224-abc9be4cc58e.png)
　↓
「基本」じゃないやつを選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/2f24e8a0-624c-6f87-1eef-71e3d4e6503b.png)
これだけ。

## パーマリンクの設定を変えたくない場合

`docker-compose` で立てたら、すぐに使いたい。
そういう場合は、URLは `/wp-json` ではない。

http://localhost:8080/?rest_route=/wp/v2/posts

`/wp-json` を `/?rest_route=` に変える事で動きます。

###参考リンク
https://stackoverflow.com/questions/44750315/404-on-http-localhost-wp-json-wp-v2-posts-in-wordpress-using-rest-api-v2
fastlane match で既存の秘密鍵、証明書、プロビジョニングを取り込む

## 想定ケース

- 諸事情により Apple Developer Portal へのアクセス権限がない
- 手元に秘密鍵、証明書、プロビジョニングのファイルはある、もしくは Keychain に取り込み済み
- ファイルで直接やりとりするのではなく、 fastlane match で管理したい

## 作業手順

### 前提

- fastlane 2.193.1
- fastlane match 導入済みで、Storage の整備や Passphrase についても設定済み
- 秘密鍵、証明書については有効なものを Keychain に取り込み済み
- プロビジョニングについては有効なものがファイルとして手元にある

### 秘密鍵、証明書、プロビジョニングの用意

秘密鍵と証明書を Keychain からファイルに書き出します。

この際、開発者間でやりとりする場合のように、 Keychain 上で秘密鍵と証明書を2つ選択して1つの p12 ファイルとして書き出すのではなく、秘密鍵と証明書それぞれ1つずつ選択した状態でファイルに書き出していきます。

ファイルの拡張子については、以下のように選択。

|対象|拡張子形式|
|:-:|:-:|
|秘密鍵|.p12|
|証明書|.cer|

秘密鍵の書き出し時にはパスワードを設定しないようにします。

書き出し時のファイル名については、 fastlane match の Storage 内でもそのまま利用されるため、気にする場合は `team id` を利用してください。

同様に、プロビジョニングプロファイルのファイルについても、必要あれば `app identifier` を利用したファイル名に変更しておきます。

### match import で Storage に取り込み

```sh
$ fastlane match import --skip_certificate_matching true
```

で、 import 作業を開始します。

`--skip_certificate_matching true` については、 証明書の有効性チェックやプロビジョニングの紐付けの確認のための Apple Developer Portalへのアクセスをスキップする（ Apple Developer Portal にログインしない）ためのオプションとなっています。

```sh
$ fastlane match import --skip_certificate_matching true
[✔] 🚀
[09:41:00]: Successfully loaded '${path to Matchfile}' 📄

+--------------+------------------------------------------+
|        Detected Values from './fastlane/Matchfile'      |
+--------------+------------------------------------------+
| git_url      | ${fastlane match storage repository url} |
| storage_mode | git                                      |
| type         | appstore                                 |
+--------------+------------------------------------------+

[09:41:00]: Certificate (.cer) path:

[09:41:00]: Private key (.p12) path:

[09:41:00]: Provisioning profile (.mobileprovision or .provisionprofile) path or leave empty to skip this file:

```

import 作業を開始すると、 `Matchfile` の読み取りが行われます。
`Matchfile` に未記載 or 上書きしたい設定については、 `fastlane match import` コマンド実行時のオプション指定も可能です。

この際、 `type` について意図したものが設定されていることを確認してください。
（主な利用ケースでは、 Distribution 用途で `adhoc` や `appstore` が多いかと思います。）

未設定の場合はデフォルト値の `develop` が利用されてしまいます。

その後

1. 証明書（ Certificate ） 
1. 秘密鍵（ Private key ）
1. プロビジョニング（ Provisioning profile）

の順で、ファイルのパスを聞かれるため、用意したファイルの**フルパス**を入力します。

問題なければ作業はこれで完了です。

### 参照する場合

Apple Developer Portal へのアクセス権限がない前提なので、 fastlane match で参照する際には、 `--readonly true` とします。

## 参考

https://docs.fastlane.tools/actions/match/#import

irb を利用する方法もあります。

https://qiita.com/de_kichi/items/4a67ca3f6b0c13882912

https://jonathancardoso.com/en/blog/using-fastlane-match-existing-certificates-without-revoking/
よく使うCSSの技

# はじめに
最近CSSを書くことが多くなったので、書きながら覚えたCSSの技をまとめていこうと思います。随時追加する予定です。

## 要素を中心に配置
* marginを使って中心に配置したいとき```margin: 0 auto;```を使います。

|![FireShot Capture 077 - Document - .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/88c4eb54-23e9-5754-9dc3-144c8b79912e.png)|
|:-:|
 
```css:css
body {
  margin: 0;
}

.container {
  width: 500px;
  margin: 0 auto;
}
```

```html:html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>header</header>
    <div class="container">
      <nav>left</nav>
      <main>center</main>
      <aside>right</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>
```

## 要素を横並びにする

* 要素同士を横並びにしたいとき、```display: flex;```を使います。

|![FireShot Capture 078 - Document - .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/053dda07-3bde-408d-a611-1d9929528a3f.png)|
|:-:|


```css:css
body {
  margin: 0;
}

.container {
  width: 800px;
  margin: 0 auto;
  display: flex;
}
```


```html:html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>header</header>
    <div class="container">
      <main>center</main>
      <aside>right</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>
```

## 要素を比率で配置する
* 要素を比率で配置したい場合、```flex: 比率;```を使います。

|![FireShot Capture 079 - Document - .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/2f20ff55-f181-7a63-b0c6-727925639c5a.png)|
|:-:|

```css:css
body {
  margin: 0;
}

.container {
  width: 800px;
  margin: 0 auto;
  display: flex;
}

main {
  flex: 2;
}

aside {
  flex: 1;
}
```

```html:html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>header</header>
    <div class="container">
      <main>center</main>
      <aside>right</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>
```

## レスポンシブデザイン対応
* レスポンシブデザイン対応は、```@media screen and (max-width: 数値) ```を使います。

下記のコードの場合、横幅が1000px以下になった場合、スタイルを適用させることができます。

```css:css
@media screen and (max-width: 1000px) {
  main {
    flex: 1;
  }
}
```

## ダミーテキストの生成
* Visual Studio CodeではEmmet記法が使え、その中のloremを使うとダミーテキストを生成させるものです。
* 使い方は、Visual Studio Code上で```lorem```と入力するだけで、サジェストに表示されるようになります。
* ```lorem数値```と入力すると、数値の数だけダミーテキストを用意してくれます。

![スクリーンショット 2021-09-07 11.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/56460b75-0d64-14a2-4157-4045573a057f.png)
Flutterのユニットテスト。Sqfliteをローカルファイルで動かす

sqlite大好き！どうも、赤ちゃんです。ばぶー。男の子です。

Flutterでsqliteを使ったアプリを作りたいのですが、わざわざユニットテストで毎回XCodeでビルドなんてしているとパソコンの寿命と◯玉がどんどん縮んでいきそうですので、出来ればテストはさっぱり終わらせたい。

Flutterでお馴染みであろうsqfliteがあるのですが、これはiOSやAndroidなどには対応しているものの、Webに非対応になっています。つまり、sqlfliteをちゃんと動かそうと思ったら、その度にXCodeでビルドして、その間にせんべえをバリバリ食べなければならない。XCode重すぎ湿りすぎ。

そこで色々探してみたら、良いものを見つけましたので、シェアさせていただきます。

## sqflite_common_ffi

その名も、sqflite_common_ffiです。ネイティブコードを実装しているらしく、sqfliteがiOSなどのシミュレーターのみであるに対し、sqflite_common_ffiはパソコン（Web）も対応しています。

ただラップされていないので、条件に応じて書き換える必要があります。以下、条件分岐でsqfliteとsqflite_common_ffiを使い分けているコードです。このような感じにデータベースを初期化すれば、後はどちらも通常通りに使えます。パソコン（Web）で実行した場合、ローカルにファイルが保存されますので、チェックも簡単ぴーこです。なお、文法チェックのみしています。動作確認は勘弁してください。


```dart:test.dart
import 'dart:async';
import 'dart:io';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:sqflite_common_ffi/sqflite_ffi.dart';

const String dbFile = "data.db";
const String subDir = "data";
late String dbPath;
const version = 1;
late Database db;

//on database created
FutureOr onCreate(db, value) async {
  //Write here on database created
  //...
  //...
}

//initialize database
void initDB() async {
  late String path;

  //pc or others
  if (Platform.isLinux || Platform.isMacOS || Platform.isWindows) {
    //pc

    path = join(Directory.current.path, subDir);
    Directory(path).create();
    sqfliteFfiInit();
    final options = OpenDatabaseOptions(
      version: version,
      onCreate: (db, version) => onCreate(db, version),
    );
    db = await databaseFactoryFfi.openDatabase(path, options: options);
  } else {
    //others

    Directory dir = await getApplicationDocumentsDirectory();
    path = dir.path;
    db = await openDatabase(
      path,
      version: version,
      onCreate: (db, version) => onCreate(db, version),
    );
  }
}

```

以上、sqflite_common_ffiの回し者がお送りしました。
Log4Netは開発休止になったのか？



# 追記
:::note info
コメントで情報提供いただいたところによると2020/4/13に復活していたようです。
:::

自分でも一次ソース[mail-archives.apache.org](http://mail-archives.apache.org/mod_mbox/logging-dev/202004.mbox/browser)を確認してきました。

>[2020/4/04 に休止するための意見合意のための投票が開始しました。](http://mail-archives.apache.org/mod_mbox/logging-dev/202004.mbox/%3C23C8219B-5274-4008-9D57-FACAF50E0FE8%40dslextreme.com%3E)
>[2020/4/05 に非アクティブになることが公開されました。](http://mail-archives.apache.org/mod_mbox/logging-dev/202004.mbox/%3C60DF2D76-84D6-4D21-8B33-5C0152C319CE%40dslextreme.com%3E)
>[2020/4/06 に再開要望の意見が提示され議論されました。](http://mail-archives.apache.org/mod_mbox/logging-dev/202004.mbox/%3CCAJjP%3DBt6yJTGZVb2JHTXCcEhG2HqYp2ukzhFN-Ze7nG52Z2OOg%40mail.gmail.com%3E)
>[2020/4/13 に正式に再開していました。](http://mail-archives.apache.org/mod_mbox/logging-dev/202004.mbox/%3CMailbird-9f5a510b-6200-4c4b-b30f-e2f4377e1bac%40codeo.co.za%3E)

ひとまず当面安心して使えそうですね。


# 元post
ログ出力ライブラリ [Log4Net は2020年4月1日に開発休止宣言を行った…そうで](https://clown.cube-soft.jp/entry/2020/06/01/log4net-to-nlog)、当時報告されていた脆弱性([CVE-2018-1285](https://nvd.nist.gov/vuln/detail/CVE-2018-1285))の修正がリリースされるかどうかが危ぶまれる状況になっていた。

ところがどういうことだろうか、問題になっていた脆弱性は無事に2020年9月7日にリリースされた2.0.10で修正され、さらに2020年9月18日には 2.0.11 が、2020年10月19日には 2.0.12 が…と立て続けにリリースされている。
また、現時点で [Log4Net のサイト](https://logging.apache.org/log4net/)からは開発終了宣言が削除されているし、[Apache Logging Services の休止状態のプロジェクト一覧](https://logging.apache.org/dormant.html)にも Log4Net の姿はない。

少なくとも積極的なアップデートはされておらず、メンテナンスモードに入っているとみるのが妥当なのだろうか。
早期に NLog 等の他のログ出力ライブラリに置き換えていくべきなのは確かだと思われるが、Log4Net もまだ使えるのであればどうしても優先順としては低くなってしまう。

しばらく状況ウォッチしていくのが必要かなぁ。
ノンコーディングでSalesforceにメール情報を取り込む方法（Mail2X）

社内での導入事例も増え、それに伴い質問されることも多くなってきたのでまとめてみました。

#Mail2Xとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/c4a070a5-2227-f097-af66-50617048b9ca.png)

Salesforceのメールサービス宛に送られてきたメールの情報を項目として取得して、任意のオブジェクトに作成することができる無料のコンポーネントです。（ただしノンサポート）

従来であればApexによる開発を必要としていたため、設計、コーディング、ステージング環境でのテスト、本番環境へのデプロイなどが必要であったため工数もそれなりに掛かりますし、誰でも構築できるわけではありませんでしたが、Mail2Xを使えば誰でも簡単に構築でき、本番環境に直接構築することも可能です。

#取り込みイメージ
メール本文や本文内の項目、ヘッダー情報を個別に格納できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/997e76f1-3a1a-c46a-f632-1a3516896135.png)


#環境構築
下記のドキュメントに記載されている通りに設定します。
https://salesforce.quip.com/mBiKAqI5vFTd

インストール後の簡易的な流れは以下の通りです。
①クイック検索で「メールサービス」を検索
②「新規メールサービス」ボタンを押下
③「メールサービス名」「Apex クラス」（MailMatchingHandler）などを設定し作成
④作成したメールサービス内にあるメールアドレスを新規作成
⑤Mail2X設定を新規作成・設定
⑥作成した設定からマッチングを設定
⑦メールサービスで作成したメールアドレス宛にテストメールを送信し、マッチングに問題がないことを確認
⑧メールサービスで作成したメールアドレスへの転送設定を行い、正しくレコードが作成されているか確認

#導入事例
###不動産
Mail2Xを使って下記２系統のメールをカスタムオブジェクトに取り込みました。
・自社HP経由の本登録完了メール
・SUUMOからの反響お知らせメール

活用方法：
・メール情報を元に個人取引先を作成・紐付け（フローによる自動化）
・Pardotでの自動追客
・レポート・ダッシュボードを使ったメール情報の可視化
・商談への活用

#導入時に気をつけること
・ノンサポートであるため将来的に利用できなくなったり、バグがあっても修正されないなどのリスクを許容する必要がある
・Ver 1.7で最終転送アドレスが指定できなかった（Salesforceのメールサービスから見てFrom,Toのいずれかを受信対象として設定する必要がある）

#Mail2Xでよく使う設定項目の説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/5bf6cee6-4b53-005d-8594-d868f45a70cc.png)

#転送設定で確認コードを確認する方法（gmailなど）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/3f070245-08b3-85de-2779-0aaf386d3dd4.png)




#エラー対応
#####System.LimitException: Regex too complicated
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/d4b209e2-d994-2052-f2f0-bc8b6f544c9a.png)

マッチング設定をしているのにメール内にその値がなかった場合に発生する事があります。
回避策：
・メールによって変動する項目は個別の項目としてマッチング設定をしない
・設定を分けてマッチング設定をする
・正規表現を使ったマッチングを行う
#####転送しているのにレコードが作成されない
①メールサービスでApexクラスを「MailThrowErrorLog」に設定して、実際にSalesforceに転送されてきているのかの疎通確認を「Mail2Xエラーメール」で行う
②転送されていれば「Mail2Xエラーメール」にレコードが作成されるので、その情報を元に「Mail2X設定」「Mail2Xマッチング設定」を見直す

※見落としがちな失敗例としては、マッチング設定の開始テキストなどで余分なスペースが挿入されているためにうまくマッチングできないということもあります。（レコードの詳細画面ではスペースがないように表示されるが、実際に編集画面を開いてみるとスペースが表示されていたりなんてことも。。）

#感想
・メールがどの経路から流れてきて、それをどう加工するのかが明確であれば意外と簡単
・基本公式ドキュメントしか情報源がない
【AWS】Amazon Pollyでテキストを生きた音声に変換してみた

#はじめに
みなさんYoutubeや仕事でテキストを音声に変えることってありますか？
自分で声を収録してもよいですが、恥ずかしいし・・・

ネット上にはテキストを音声に変えてくれるサービスはいろいろありますが、正直どれもいまいち。
AWSのAmazon Pollyではテキストを「生きた音声」に変換することができます。

私が触った感触では他のどの変換サイトより「生きた音声」だと思います。
（特に英語はすごい）
是非みなさんも試してみて下さい。

AWSは１年間は無料期間なのでどんどん試してみましょう！

#手順
1.AWSマネジメントコンソールにログインします。（登録は済ませておいて下さい）
上部の検索バーで[Amazon Polly]と検索して下さい。
![スクリーンショット 2021-09-10 18.49.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966337/bd604f2e-4638-aad9-fb02-1ba776e5ea27.png)

2.[入力テキスト]欄に音声に変換したいテキストを入力して[音声を聴く]をクリックします。
![スクリーンショット 2021-09-10 18.50.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966337/44b39021-345f-da4c-7e44-3aa48decc79e.png)

それだけです。とても簡単に音声化出来ます。出来上がった音声は[ダウンロード]をクリックすると取得できます。

なお現時点では、日本語のエンジンは残念ながら[スタンダード]しかありません。
音声は男性と女性から選べます。

　Mizuki,女性
　Takumi,男性

個人的には[Takumi,男性]の方がよりスムーズな印象です。

#ちなみに
エンジン[ニューラル]で言語を[英語(米国)]にしてみて下さい。
特に以下は個人的にとてもすごいと思います。(TOEICの問題くらい自然)
　
　Matthew,男性
　Salli,女性

![スクリーンショット 2021-09-10 18.55.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966337/015ee06a-9c5c-7de5-c9db-325a85512a41.png)

日本語にも早く対応して欲しいですね。
ご参考になれば幸いです。
Python で静的メソッドベース API っぽいのを実現するメモ

## 背景

インスタンスでメソッド呼んだりするのが好きくない.
(インスタンスの内部状態に依存しないようにしたい)

```
bora = Bora()
dora = bora.Dora("test")
```

みたいなの, 好きくない.

インスタンスをメソッドで作る API を Python で実現したい

```
obj = Bora.Dora.NewObject("test")
```

みたいな? 名前空間(namespace)で機能を切り分けして.

## 名前空間の階層?

ディレクトリを作ればいいですが, ファイルが増えて面倒です.

とりあえず inner class でいけるっぽい.

```python

class Bora:
   class Dora:
     ...
```

## class method

静的メソッドは `@staticmethod`, `@classmethod` でいけます. 
ここでは `@classmethod` 使います.

```python
class Bora:
   class Dora:
     @classmethod
     def NewObject(cls, name: str):
       obj = cls()
       obj.name = name
       return obj
```

Voila!
NginxというWEBサーバを導入するための予備知識 ②

いつもサーバーを動かす時に打ち込む <code>rails s(server)</code>
このとき**<font color=red>rack</font>**というものが立ち上がる。

## 1. rack？
Rubyで書かれたwebフレームワークをうまく動かすための**<font color=red>アプリケーションサーバ</font>**
rackはrailsの起動をうまく行ってくれて(アプリケーションサーバとしてのメイン)、
かつ、webサーバがなくてもうまい具合に処理してくれるもの(おまけ)
👇
rackのおかげでrailsがうまくリクエストを返せるようになっている
だからローカルでも立ち上がるようになっている
[rackについて詳しく](https://naoty.hatenablog.com/entry/2015/01/10/215538)（よくわからなかった）
	
## 2. **Nginx**をインストールしてみる。
できた！（[**Nginxをインストールしよう①**](https://qiita.com/yuri0225/items/521c9a6c34a3034cd5b3)をみる）
Nginxは**webサーバ**の1つ
Nginxを調べるとなんだか**<font color=red>Unicorn</font>**っていうやつとセットで記事が出てくる
なんで？Nginxだけじゃだめなの？（白目）
理由：**NginxとRackは直接つなげることができない。だからUnicornを挟む必要あり**
	
## 3. Unicorn
NginxとRackをうまく繋いでくれるWebサーバとアプリケーションサーバの中間のような存在
RubyアプリケーションとWebサーバーの間をつなぐ役割
	
---

RackだけだとWebサーバがなく、高速な処理や高負荷に耐えることができない。
nginxやunicornといったwebサーバを用意することでうまく負荷分散をして、
大勢のクライアントからのアクセスに耐えるためこの組み合わせがUnicornドキュメント上でもNginxを推奨されている。

---

【参考Qiita】
https://qiita.com/takahiro1127/items/fcb81753eaf381b4b33c
@EqualsAndHashCode

### @EqualsAndHashCode(callSuper = false)
@EqualsAndHashCode
equals, hashCode 自動生成
equals :  二つのObjectの値が一致するか、同等性(equality)を比較する演算子

hashCode : 二つのObjectが同じであるか, 同一性(identity) を比較する演算子

Java beanで同等性の比較のためequalsと hashcode methodをoveridingして使うんだが、

@EqualsAndHashCode Annotationを使ったら自動的にこのメソッドを生成できる。

callSuper 属性を通じて、eqaulsと hashCode メソッド自動生成し親クラスのフィールドまでカバーするかを設定できる。

@EqualsAndHashCode(callSuper = true)の設定し、親クラスのFieldの値も同一であるか確認しfalse(Default)の場合
自身(this)クラスのFieldだけを考慮する。


https://blog.y-yuki.net/entry/2016/10/14/003000
【Rails6.1.4】Nginxをインストールしよう①

【環境】Ruby 3.0.1  Rails 6.1.4  M1 mac 

### 1. homebrewでインストールする

```:ターミナル
$ brew install nginx
```

インストール完了後のメッセージメモ

```
Docroot is: /opt/homebrew/var/www

The default port has been set in /opt/homebrew/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /opt/homebrew/etc/nginx/servers/.

To have launchd start nginx now and restart at login:
  brew services start nginx
Or, if you don't want/need a background service you can just run
```

### 2. バージョンチェックしよう

```:ターミナル
$ nginx -v
 nginx version: nginx/1.21.0
```

### 3. プロセスが利用しているポート確認

```
$ lsof -c nginx -P | grep LISTEN
nginx   51826 [name]    6u    IPv4 0xd08bea881e96c6d3      0t0                 TCP *:8080 (LISTEN)
nginx   51829 [name]    6u    IPv4 0xd08bea881e96c6d3      0t0                 TCP *:8080 (LISTEN)
```
※ -cオプションは特定のプロセスが利用しているファイルなどを表示
※-P ポート番号をサービス名に変換しない(8080のとこがポート)

### 4. http://localhost:8080でアクセス
![スクリーンショット 2021-06-29 18.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/3b9241f0-4e8a-deb8-1d5d-31dc84ee78c2.png)

### nginxを停止する

```:ターミナル
$ nginx -s stop
```

| シグナル名 | 意味 |
|:-:|:-:|
| nginx -s stop | 停止。リクエストを待たずに停止。 |
| nginx -s quit | 停止。処理を待つ。 |
| nginx -s reopen | ログファイルを開き直す |
| nginx -s reload | 設定ファイルを再読み込みする |

### nginxの設定ファイルの場所（ターミナル全文メモ）

```
$ brew info nginx
nginx: stable 1.21.0 (bottled), HEAD
HTTP(S) server and reverse proxy, and IMAP/POP3 proxy server
https://nginx.org/
/opt/homebrew/Cellar/nginx/1.21.0 (25 files, 2.2MB) *
  Poured from bottle on 2021-06-29 at 18:20:06
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/nginx.rb
License: BSD-2-Clause
==> Dependencies
Required: openssl@1.1 ✔, pcre ✔
==> Options
--HEAD
	Install HEAD version
==> Caveats
Docroot is: /opt/homebrew/var/www

The default port has been set in /opt/homebrew/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /opt/homebrew/etc/nginx/servers/.

To have launchd start nginx now and restart at login:
  brew services start nginx
Or, if you don't want/need a background service you can just run:
  nginx
==> Analytics
install: 35,250 (30 days), 124,846 (90 days), 499,935 (365 days)
install-on-request: 35,178 (30 days), 124,586 (90 days), 495,649 (365 days)
build-error: 0 (30 days)
```

上記抜き出し
nginx will load all files in /opt/homebrew/etc/nginx/servers/.
/opt/homebrew/etc/nginx/nginx.conf

【参考】https://blog.mothule.com/web/nginx/web-nginx-getting-started-step1-on-mac
複数台に死活監視 ping for Windows

複数台の古い Windows PC をサーバーとして使っているので、時々死活監視をする必要がありました。
コマンドプロンプトから ping を打てばよいのですが、コマンドを作成してみました。
ファイルサーバー上でも使えるように、ファイル名前の先頭は「%~dp0」を付けています。

```HealthChk.cmd
@echo off
rem ===============
rem  状態確認ツール
rem ===============

echo ### Health checker ###
echo.

for /f "tokens=1,2 delims=," %%i in (%~dp0pc.list) do (
  ping -n 1 %%i | find "ms TTL=" >NUL 2>&1
  if ERRORLEVEL 1 (
    echo 　　%%j	%%i	[--NG--]
  ) else (
    echo 　　%%j	%%i	[  OK  ]
  )
)
echo.
pause
```

```pc.list
; [Windows PC]
192.168.0.11,PC#1
192.168.0.12,PC#2
192.168.0.99,PC#3
```

実行結果はこんな感じ。

```　実行結果
### Health checker ###
　　PC#1        192.168.0.11    [  OK  ]
　　PC#2        192.168.0.12    [  OK  ]
　　PC#3        192.168.0.99    [--NG--]

続行するには何かキーを押してください . . .
```

以上。
【Rails6.1.4】GraphQL導入まで

### 0. 導入　GraphQLってなに？
コントローラなしで動くAPIで、routeとviewがダイレクトに繋がっているようなイメージ
SQL/RESTと比較されることが多い
SQL：データベース専用のクエリ言語
GraphQL：インターネットのためのクエリ言語

### 1. まず初めに アプリケーションの作成

```ruby:ターミナル
$ rails new [アプリ名] -d postgresql   
$ cd [アプリ名]
$ rails db:create && rails db:migrate
```

作成が終わったら一旦アプリ動作確認をする。（rails s）

### 2. scafforldでCRUD機能を作成

```ruby:ターミナル
$ rails g scaffold blog title:string text:string
$ rails db:migrate
```

一旦アプリ動作確認（rails s）


### 3. gemの追加

公式Githubを確認します。
[GraphQL　Github公式](https://github.com/rmosolgo/graphql-ruby)

![スクリーンショット 2021-07-01 12.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/61ac45c4-af50-b836-cf39-89c3130c5b16.png)

公式の通りバージョン指定なしでgemfileに追加

```ruby:gemfile
gem 'graphql'
```

```ruby:ターミナル
$ bundle install
```


### 4. Getting Started
終わったら[Getting Started](https://graphql-ruby.org/getting_started.html)に飛ぶ。

![スクリーンショット 2021-07-01 12.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/32b1b28b-5b88-17df-e60d-7ad5baf6065f.png)

公式の通り

```ruby:ターミナル
$ rails g graphql:object Blog title:String text:String
```

この時に生成されるblog_type.rb
![スクリーンショット 2021-06-30 18.00.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/fdeaec23-a0b3-8d8c-970e-bb9762fbf2fb.png)


下2行はコメントアウトする＆2重で追加されるtitleとtextの行は削除しました。
![スクリーンショット 2021-07-01 12.38.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/4795b0af-4025-f26a-4247-afaebf50ffe1.png)


・　ここで一旦アプリ動作確認（rails s）

### 発生したエラー（ActionView::Template::Error (graphiql/rails/application.css):）
(app/assets/config/manifest.js)に追記し解決

```js:app/assets/config/manifest.js
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js
```

### 5. ターミナルで追加したマニフェストファイル分をプリコンパイル
```ruby:ターミナル
$ rails assets:precompile
```


Getting Started公式以下
![スクリーンショット 2021-07-01 12.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/f3b06709-cde7-eb57-4d13-d470daef7bb9.png)

公式ではschemaに記述👉QueryTypeにquiery
直接query_typeに書き込みました。
![スクリーンショット 2021-07-01 12.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/6f6fb9f4-b23e-2b7c-9991-9d3a506cdab1.png)


公式の書き方を利用して
![スクリーンショット 2021-07-01 12.30.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/02b8b4fa-3843-cbe7-f6bc-38c61020012f.png)

このようになりました。
![スクリーンショット 2021-07-01 12.31.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1447987/f5cfca22-9978-286b-ec5b-e6978b479b94.png)

最後のGraphQLの画面が見れていてエラーが起きているのであれば書き方の問題。

【参考】
https://qiita.com/jerrywdlee/items/a08589ea160c470e67f6
https://qiita.com/jintz/items/4ddc6bf4f95238eff5e9
https://qiita.com/sakupa80/items/e65f1ecc513306edf9e9
JavaScript/TypeScriptにおけるimport/exportについての個人的な方針

JavaScript/TypeScriptにおけるimport/exportについて、個人的な方針を考えてみました。

## デフォルトエクスポートは使わない

値や型をエクスポートするときは、常に名前付きエクスポートを使います。

:thumbsdown: デフォルトエクスポートを使っている

```ts:foo.ts
export default function foo (): void {}
```

```ts:main.ts
import foo from './foo'
```

:thumbsup: 名前付きエクスポートを使っている

```ts:foo.ts
export function foo (): void {}
```

```ts:main.ts
import { foo } from './foo'
```

なぜなら、名前付きエクスポートにはデフォルトエクスポートに勝るいくつものメリットがあるからです。

- [Avoid Export Default - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/main-1/defaultisbad)
- [なぜ default export を使うべきではないのか？ - LINE ENGINEERING](https://engineering.linecorp.com/ja/blog/you-dont-need-default-export/)

詳しくは上記を参照していただくといいかと思いますが、自分が特によいと感じるのは以下の点です。

- インポート時の名前を統一できる
- インポート時にエディタで補完が効く

ただし、[Next.js](https://nextjs.org/)や[Nuxt.js](https://ja.nuxtjs.org/)などのフレームワークがデフォルトエクスポートを要求している場合など、デフォルトエクスポートを使わなければならないケースにおいてはその限りではありません。

## 1つのファイルにおける役割は1つ
デフォルトエクスポートが1つのファイルに1つしか存在できないのに対し、名前付きエクスポートは複数存在できます。
そうなると役割がまったく異なる複数の値や型をエクスポートすることもできるわけですが、1つのファイルにおける役割は1つに留めます。

:thumbsdown: 1つのファイルに複数の役割が存在する

```ts:foobar.ts
export function foo (): void {}
export function bar (): void {}
```

```ts:main.ts
import {
  foo,
  bar
} from './foobar'
```

:thumbsup: 役割ごとにファイルが分割されている

```ts:foo.ts
export function foo (): void {}
```

```ts:bar.ts
export function bar (): void {}
```

```ts:main.ts
import { foo } from './foo'
import { bar } from './bar'
```

なぜなら、1つのファイルに複数の役割を持たせるとメンテナビリティが低くなるからです。
ただし、1つのファイル内に複数の名前付きエクスポートが存在すること自体は、それらの役割が同じものであればかまいません。
たとえば、エクスポートしたい関数の引数の型もエクスポートする場合などがあてはまります。

```ts:foo.ts
export interface Options {
  bar: boolean
}
export function foo (options: Options): void {}
```

```ts:main.ts
import {
  foo,
  Options
} from './foo'

const options: Options = {
  bar: true
}
foo(options)
```

## 参考リンク

- [エクスポートとインポート](https://ja.javascript.info/import-export)
【JSON】jackson で JSON化したくないプロパティをプログラムで設定

## まえがき
・Jackson を使ってオブジェクトを JSON 形式に変換
・アノテーションを使わない（使えない）場合
・具体的には "beanClass" を除外したかった

## 環境
Java 8
jackson 2.6

## ObjectMapper で設定
```sample.java
			ObjectMapper mapper = new ObjectMapper()
			// ... 設定
			mapper.setAnnotationIntrospector(new JacksonAnnotationIntrospector() {
				private static final long serialVersionUID = -1L; // <- 適宜設定
				@Override
				public boolean hasIgnoreMarker(final AnnotatedMember m) {
					List<String> exclusions = Arrays.asList("beanClass");
					return exclusions.contains(m.getName()) || super.hasIgnoreMarker(m);
				}
			});
```

以上、お疲れさまでした！
Azure Boards でクエリを作成するときに Backlogs の並び順を反映させる方法

内容としてはタイトルの通りとなりますが、以下補足です。

+ 実際に動作を確認した環境として、プロジェクトの `Process` は `Scrum` となります
+ Azure Boards の機能上の名称とスクラムにおける用語が混在しますので適宜読み替えてください
    + ex) プロダクトバックログは Backlogs -> Backlog のことを指します

# はじめに
Azure Boards ではクエリの機能により任意の条件でプロダクトバックログアイテムを抽出した一覧を表示することができます。
スクラムにおいてはプロダクトバックログアイテムの優先順（並び順）は非常に重要な意味を持ちます。そのためクエリにより抽出した項目一覧の並び順に関してもプロダクトバックログの並び順を反映したものであってほしいケースは多く考えられます。

しかし通常、新規作成（New query）から作成したクエリの一覧結果は `ID` 順に並びます。この ID は項目作成時に附番されるものですので、**ID の大小に関しては現在のプロダクトバックログの並び順の関係と必ずしも一致しません。**スクラムにおいてプロダクトバックログアイテムはプロダクトオーナーによって並び替えられ、その状況は常に可視化されていなくてはいけません。よってこの ID フィールドはプロダクトバックログの優先順を制御するためには使用できないことがわかります。

# 本題
作成したクエリの並び順をプロダクトバックログにおける並び順と同様にしたい場合には下図に示す通りクエリ編集画面上から

`Column options > Sorting > Backlog Priority`

と設定してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174132/c4da57b0-ee59-3217-33bd-68c3e278fc2f.png)

# 補足
詳細については docs.microsoft.com の [バックログの優先度またはスタックのランク順](https://docs.microsoft.com/ja-jp/azure/devops/boards/backlogs/backlogs-overview?view=azure-devops#backlog-priority-or-stack-rank-order)　に記載あります。[バックログの優先順位またはスタック順位のフィールドの詳細](https://docs.microsoft.com/ja-jp/azure/devops/boards/queries/planning-ranking-priorities?view=azure-devops#more-on-backlog-priority-or-stack-rank-fields) も関連するかもしれません。

Backlog Priority フィールドに関してはプロダクトバックログにはデフォルトで表示されないフィールドとなっています。またプロダクトバックログにおいては `Order` という並び順に対応したフィールドが表示されていますが、こちらは Column Options からは選択できず Sorting に使用できません。これらの理由から Azure Boards 上の操作だけでは Backlog Priority に辿り着くのが難しかったです。

なお、プロダクトバックログの一覧画面から下図に示すように `Create Query` からもクエリを作成することができ、ここから作成されたクエリはプロダクトバックログの現在の Column Options の設定が反映されているようですので Backlog Priority 基準の並び順が反映されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174132/163541aa-4113-2a2b-1342-82dbceec30f9.png)
ブラウザ上でプレビューを表示せずにカメラキャプチャする方法

javascript を使うとウェブブラウザからカメラにアクセスして画像をキャプチャできる。が、多くのサンプルプログラムではプレビュー表示（カメラから取り込んだままの画像の表示）があったり、さらにその画像を取り込むためのキャンバスエリアがあったりするので、画面のレイアウト上で問題になることがある（なにか悪い目的で使うわけではない。ブラウザ上に必ず警告なりアイコンなりが出るし）。では、プレビュー表示なしにキャプチャができるか？というと、出来ますという話。

##ポイント

- `<video>` タグの領域を隠すのに css で `display: none` を指定する
- そうすると画像が取り込まれなくなる（画像が更新されなくなる）ブラウザがあるので、`play()` を呼び出す
- 画像の取り出しのための canvas は `createElement()` で作成するが `appendChild()` しない

具体的には以下のような感じ。Mac の Chrome と Safari で動作確認。

```javascript
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => {
        video.srcObject = stream;
        video.play(); // これがないと video タグを不可視にしたときに止まるブラウザがある
        setInterval(copyFrame, 30); // copyFrame 関数を 30msec に１度呼び出す
    }).catch(err => alert(`${err.name} ${err.message}`));
}, false);
```

##プログラム例
動作の様子とソースコード全体は <a href="https://shiura.com/html5/aa2.html">https://shiura.com/html5/aa2.html</a> から見てみてください。取り込まれた画像を以下のようにアスキーアートで表示するプログラムになっています。説明はコメントでソースコード中に書いてあります。

<img width=700 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003223/c35c5a3a-9df2-ecae-42b2-c303cc38c097.jpeg"><br>

##参考資料
このプログラムを作成するにあたり、以下の記事を参考にしました。

- <a href="https://qiita.com/024t910/items/ad8d3144873e565a3539">[iOS11]WebRTCでカメラアクセス＆ピクセル取得する</a>
- <a href="https://qiita.com/qiita_mona/items/e58943cf74c40678050a">HTML5のWebRTCでPCに接続されたカメラ映像をウェブブラウザー上に表示してコマ画像を保存したい</a>
[CS] n進数を10進数へ　基数変換

##はじめに
n進数を10進数に変換する方法をまとめてみました。
そもそも進数ってなんすかって人は、進数の概念をこちらの記事にまとめております。↓

https://qiita.com/minhee/items/646b8587d3bcd5111545

##n進数の重み
n進数を10進数に変換したいときはn進数の重みについて学ばなければなりません。

例えば2進数であれば、桁が増えたときに１０進数ではどの数字を表しているか見てみましょう。

```:２進数の桁が増えたとき
1, 10, 100, 1000, 10000, 100000, 1000000 ...
```

上記が2進数で桁が増えた時の数字です。
これを10進数で表します。この程度であれば頭の中でできますね。

```:10進数に置き換える
1, 2, 4, 8, 16, 32, 64 ...
```

これでわかるように、桁が増えるごとに倍になっていっています。
2の(桁数-1)乗と考えると楽です。

これが2進数の桁の重みと言います。

小数点の桁の重みは？？
小数第一位から、2進数だったら
```1/2, 1/4, 1/8, 1/16 ...```となっていきます。

##10進数へ基数変換
重みが理解できたら10進数に変換する方法を説明します。

```
①それぞれの桁にその桁の重みをかけます。

②全部の結果を足し算をする
```

これだけです。


例えば2進数の```110.011```を10進数に直してくださいって問題だったら、

```
1    1    0    .    0    1    1
↓    ↓    ↓         ↓    ↓    ↓
×4   ×2   ×1      ×1/2  ×1/4 ×1/8
↓    ↓    ↓         ↓    ↓    ↓
4    2    0         0   0.25  0.125

上記の結果を全て足すと
=> 6.375
```        


##最後に
基数変換はこのn進数を10進数に直す以外にも、10進数の数字を2進数へ変換したり、2進数の数字を16進数に変換したりすることが想定できます。

それらの変換の仕方はまた別になります。
私には文字だけで説明できる自信がありませんので今回は省いておきます。
また、説明できる時がきたら記事にまとめたいと思います。
Raspberry pi SVN サーバ 環境構築メモ

# はじめに
github が Password を使ったプッシュができなくなったので、
自分でバージョン管理サーバを立てることにしました。
別に git じゃなくても良さそうなので svn にしました。

サーバ　　　：raspberry pi4
クライアント：PC（ubuntu18.04）

# サーバ側（raspberry pi 4 @192.168.2.107）
```
$ cat /etc/debian_version 
10.9
```
## 1. SVN インスコ
``` 
$ sudo atp install subversion
$ sudo apt install subversion-tools
```

## 2. apache2 インスコ
```
$ sudo apt-get install apache2
$ sudo apt-get install libapache2-mod-svn
$ sudo systemctl enable apache2
$ sudo systemctl restart apache2
```

## 3. 設定
```
$ sudo vim /etc/apache2/mods-available/dav_svn.conf
```
以下を追記

```
<Location /svn>
  DAV svn
  SVNParentPath /var/svn/repos
</Location>
```
```
$ sudo systemctl restart apache2
```
apache 再起動

## 4. svn ディレクトリ設定
```
$ sudo mkdir -p /var/svn/repos
$ sudo svnadmin create /var/svn/repos/testrep
$ sudo chown -R www-data:www-data /var/svn/repos
$ sudo reboot
```



# クライアント側（ubuntu 18.04 LTS）
## 1. SVN インスコ
``` 
$ sudo atp install subversion
```

## 2. checkout
```
$ svn co http://192.168.2.107/sv/testrep/
リビジョン 0 をチェックアウトしました。
```
ip アドレスは適宜変更

## 3. 変更を加えてみる
```
$ cd testrep
$ echo "Hello World" > hoge
$ ls
hoge
$ cat hoge
Hello World
```

## 4. add
```
$ svn add *
A hoge
```

## 5. commiしてみる
```
$ svn commit -m "add hoge"
追加しています              hoge
ファイルのデータを送信しています .done
Committing transaction...
リビジョン 1 をコミットしました。
```

## 6. 確認してみる
```
$ cd ..
$ rm -rf testrep
$ svn co http://192.168.2.107/sv/testrep/
A    testrep/hoge
リビジョン 1 をチェックアウトしました。
$ cd testrep
$ cat hoge
Hello World
```
環境毎でGit除外したいファイルは.git/info/excludeに追記する

# 環境毎でGit管理したくないファイルがある

## 管理したくない環境:
サーバ側

```terminal
$ ls -al
.
..
.git
.gitignore
README.md
docker
└default.conf  ←管理したくないファイル
docker-compose.yml
src
```

## 方法:
各リポジトリの`.git/info/exclude`に追記

```
# git ls-files --others --exclude-from=.git/info/exclude
# Lines that start with '#' are comments.
# For a project mostly in C, the following would be a good set of
# exclude patterns (uncomment them if you want to use them):
# *.[oa]
# *~
docker/default.conf ←追記
```

## 反映させる：

```terminal
$ git update-index --assume-unchanged docker/default.conf
```

## きっかけ:
サーバ側だけdefault.confを変えたかったから。

## 詳細：
ローカル環境のdefault.confは80番ポートのままで、サーバは常に443ポートにリダイレクトさせる為。


### サーバのdefault.confはこれ

```
server {
    server_name  example.jp;
    listen 80;
    
    # 全てのリクエストをSSLサイトにリダイレクト
    location / {
        return 301 https://$host$request_uri;
    }
}
server {
    server_name  example.jp;
    listen       443 ssl;

    ssl_certificate      /etc/letsencrypt/live/example.jp/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/example.jp/privkey.pem;

    root  /var/www/html/public;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;
}
```


### ローカル環境のdefault.confはこれ


```
server {
    listen       80;
    server_name  localhost;

    root  /var/www/html/public;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;
}
```

# 結果
サーバでdefault.confを変更してもgit pushしなくて良くなった！
【Laravel】テーブル名の複数形に迷わない方法

Laravelは命名規則としてテーブル名には複数形を付ける。
user→users
item→items
のような形。
https://naoya-ono.com/blog/laravel-naming-rule/

今まではGoogle検索で「movie 複数形」のように調べていた。
ちょっとめんどくさい。でも念のため調べておかないとスペルミスしたときは後々さらにめんどくさい。

# 解決法
```bash
php artisan tinker
>>> echo Str::plural('単語名');
```

これだけ！シンプル。
functions.phpの中でis_front_page()やis_home()を使いたい時の書き方

テンプレートファイルの中ならis_front_page()が正しく動作するのにfunctions.phpの中に書くと常にfalseしか返ってこない。

```php
if(is_front_page()) {
    // トップページのみの処理
}
```

つまり上記のように書いて動作しない。たぶんフックを使ってないからです。

## 解決方法

選ぶフックは、functions.phpが読み込まれた直後の `after_setup_theme` でよさそうです。

```php
add_action('after_setup_theme', function() {
    if(is_front_page()) {
        // トップページのみの処理
    }
});
```

上記のように書きます。

```php
add_action('wp', function() {
    if(is_front_page()) {
        // トップページのみの処理
    }
});
```

覚えやすい `wp` とかでもいいと思います。なんでもいいので、とにかくフックに紐付けます。

# 解説

functions.phpでカスタマイズを加える場合、基本的にフックを使うべきです。functions.phpが読み込まれるタイミングではページ情報の判定はできません。フックに登録した処理が呼び出される時点でないとページ情報の判定はできません。

https://github.com/WordPress/WordPress/blob/5.8.1/wp-settings.php#L543-L557

functions.phpが読み込まれるのは上記のタイミング。

```php
// Load the functions for the active theme, for both parent and child theme if applicable.
foreach ( wp_get_active_and_valid_themes() as $theme ) {
	if ( file_exists( $theme . '/functions.php' ) ) {
		include $theme . '/functions.php';
	}
}
unset( $theme );

/**
 * Fires after the theme is loaded.
 *
 * @since 3.0.0
 */
do_action( 'after_setup_theme' );
```

上記のような処理になっています。
バリデーションを日本語に変える

バリデーションを日本語に変えるにはいくつかの手続きを踏まねばなりません。



1,日本語設定に変更


config/application.rbに以下の記述を追加。

config.i18n.default_locale = :ja 


```ruby:config/application.rb
（略）

module BandStarter36553
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0

    config.i18n.default_locale = :ja
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end


```

2, gem

gem 'rails-i18n'
をインストールします。

3, config/locales/devise.en.yml　作成

以上を経ても基本的な箇所しか日本語化されていないので、ymlファイルを作成し、以下の内容を丸ごとコピペします（一語一語の翻訳が記述されているよう）
[devise.ja.yml](https://github.com/tigrish/devise-i18n/blob/master/rails/locales/ja.yml)


4, config/locales/ja.yml 作成
ほぼ 3の内容と同じですが、更に翻訳が必要なワード、主に自分で追加したカラムの日本語訳を一つ一つ設定していきます。

以下、開発中のオリジナルアプリ第一号より抜粋。

```ruby:config/locales/ja.yml
ja:
  activerecord:
    attributes:
      user:
        nickname: ニックネーム
        active_day_id: 活動できる日
        genre_id: ジャンル
        leader_or_member_id: 募集希望または加入希望
        prefecture_id: 居住都道府県
        sex_id: 性別
        skill_id: 演奏力の目安
        what_play_id: 演奏パート
        character_id: 性格
```

注意点として
・ attributes: の下はモデル名（ここではuser.rbのバリデーションに関するので、:userと記述）
・ モデル名より下は、バリデーションのカラム名。アソシエーションのあるカラムは　_id までの記述が必要
・ エラーメッセージが日本語化しているので、それに伴い単体テストの内容を合わせる必要がある

なお関係ないですが、エラーメッセージの表示順は、モデル.rbのバリデーションに記述したカラムの順に表示されるようです。formの項目の順序に合わせて、バリデーションを記述するのがベターなよう。

以上です。

お読みくださりありがとうございました！
pip error: invalid command 'dist_info'

```
$ python -m pip install dist/slz-0.0.0.1.tar.gz
DEPRECATION: Python 2.7 reached the end of its life on January 1st, 2020. Please upgrade your Python as Python 2.7 is no longer maintained. pip 21.0 will drop support for Python 2.7 in January 2021. More details about Python 2 support in pip can be found at https://pip.pypa.io/en/latest/development/release-process/#python-2-support pip 21.0 will remove support for this functionality.
Defaulting to user installation because normal site-packages is not writeable
Processing ./dist/slz-0.0.0.1.tar.gz
  Installing build dependencies ... done
  Getting requirements to build wheel ... done
  Installing backend dependencies ... done
    Preparing wheel metadata ... error
    ERROR: Command errored out with exit status 1:
     command: /usr/bin/python /usr/local/lib/python2.7/dist-packages/pip/_vendor/pep517/_in_process.py prepare_metadata_for_build_wheel /tmp/tmpZQQe8U
         cwd: /tmp/pip-req-build-VTEQLP
    Complete output (6 lines):
    usage: _in_process.py [global_opts] cmd1 [cmd1_opts] [cmd2 [cmd2_opts] ...]
       or: _in_process.py --help [cmd1 cmd2 ...]
       or: _in_process.py --help-commands
       or: _in_process.py cmd --help
    
    error: invalid command 'dist_info'
    ----------------------------------------
ERROR: Command errored out with exit status 1: /usr/bin/python /usr/local/lib/python2.7/dist-packages/pip/_vendor/pep517/_in_process.py prepare_metadata_for_build_wheel /tmp/tmpZQQe8U Check the logs for full command output.
```

Somehow my machine had several setuptools installation. Removing them all and reinstalling only 44.1.1 fixed the issue.