OmniAICreator/Qiita-1.07M huggingface dataset:
Remote TestKit基本機能をWeb版とソフトウェア版で使う

## はじめに

Remote TestKitのWeb版とソフトウェア版で基本的な機能を使ってみました。

### 使用するツール

- [Remote TestKit](https://appkitbox.com/testkit/)
    - アカウント登録済みで、端末レンタルできる状態。
    - 本記事では、ユーザ専用の環境を構築して使う**オンプレミス版**（[Remote TestKit Enterprise](https://appkitbox.com/testkit/enterprise/)）を使用します。
    - クラウド版に読み替えていただいて差支えない範囲です。

## Remote TestKitとは

公式ページ：https://appkitbox.com/testkit/
クラウド上のスマホをレンタルし実機検証を行うことができるサービスです。

### 環境

**Web版**と**ソフトウェア版**があり、それぞれの対応環境は以下の通り。
ざっくり言うと、ソフトウェア版の方が、端末に対してできる操作が多いです。

- Web版
    - Google Chrome、FireFox、Safari の最新バージョン
- ソフトウェア版
    - Windows 10（64bit）
    - macOS high sierra, mojave, catalina

### Remote TestKitでできること

- クラウド版
    - 約700機種以上がレンタル可能
    - 初期構築のコストがかからず申し込み後すぐに利用できる

- オンプレミス版
    - ユーザが購入済みの端末をRemote TestKitで使える
    - 社内ネットワークで利用できる
    - キャリア通信、Bluetooth接続など、柔軟な検証に使える

- クラウド版/オンプレミス版共通
    - アプリのインストール
        - akpファイルやipaファイルがあればOK（普段ストアからインストールするのと同じくらいの時間でできました）
        - ストアからのインストールも可能
    - 静止画や動画の撮影
    - Magic Podといった自動テストツールとの連携
    - Android Studioといった開発ツールとの連携
    - 複数端末同時利用

## 使い方

### 端末をレンタルする

1. Remote TestKitへログイン
2. 端末一覧から「利用可能」な端末とレンタル時間を選択する

※同一アカウントであっても、Web版でレンタルした端末は、ソフトウェア版で操作できません。（逆も同様）

▼Web版の画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/14c11374-50af-cedb-0b93-f2135ac2c7ec.png" width="70%">

▼ソフトウェア版の画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/9d052158-3326-8a07-59b6-0718a2dded61.png" width="70%">

▼この画面上で操作します（左：Web版、右：ソフトウェア版）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/2bb3413d-591f-8e44-291e-96181c567bce.png" width="40%" >　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/d309c557-80d5-bee0-9148-63adb24e1f68.png" width="25%" >

### 端末を返却

返却したい端末を選択し、「返却」します。
レンタル時に設定した利用時間を超過すると、自動的に「返却」されます。
※返却後、５分間は同じ端末を使うことができないため注意。

### 端末のレンタルを予約

あらかじめ使う機種や使う時間が決まっている場合は、端末のレンタル予約ができます。

- クラウド版の場合
    - オプションプラン[端末人気パック](https://appkitbox.com/testkit/price/?entry=header#Option)を契約すると、端末を予約できます。

- オンプレミス版の場合
    - Remote TestKit管理者ページより、「ユーザ・機種・日時・クライアントタイプ・言語」を指定してレンタル予約ができます。

### 複数端末レンタル

複数端末を同時にレンタルすることができます。
※クラウド版の場合、[料金プラン](https://appkitbox.com/testkit/price/?entry=footer)によって同時利用端末数が異なります。

#### Web版
Web版の場合は、同ページ内で対象端末を切り替えて操作を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/45853d97-1a52-bf92-8a0a-761714d40833.png" width="70%">

#### ソフトウェア版
ソフトウェア版の場合は、端末ごとにウィンドウが開きます。
複数端末に対して同じ操作を行いたい場合は、「同時操作」ができるソフトウェア版がおすすめです。

▼「URLを入力してブラウザを起動」を同時操作
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/d6677274-7818-5c18-dfee-496f4ba86fda.png" width="70%">

## 利用してみた所感

- 実機を直接操作するよりはもたつくものの、思ったよりサクサク。
- 複数端末の同時レンタル、同時操作ができるのは検証にかかる時間を効率化できそう。
- 長時間の検証や決まった端末での検証を行いたい場合、レンタル予約は必須に感じた。
    - オンプレミス版だと、端末を初期化しないようにしたり、占有端末として設定したりできるそうなので便利そう。
- Magic Podなどの自動テストツールとの連携も試してみたい。
Python上でintのFourCCを文字列に復元する雑なメモ

GStreamerやOpenCVで動画のFourCCを取得すると、以下のように数値で帰ってくる

```python
 In [1]: import cv2
 
 In [2]: cap = cv2.VideoCapture('./XXXXXX.avi')
 
 In [3]: cap.get(cv2.CAP_PROP_FOURCC)
 Out[3]: 844713045.0
```

これをリトルエンディアンでbyte化 -> UTF-8でデコードすると、4文字の文字列に変換できる

```python
 In [4]: fourcc = list((fourcc_int.to_bytes(4, 'little').decode('utf-8')))
 
 In [5]: fourcc
 Out[5]: ['U', 'L', 'Y', '2']
```
RustでもExponential backoff and jitterアルゴリズムでリトライしたい


# はじめに
[ハンズラボ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/handslab) 6日目を担当します[@ryosukeeeee](https://qiita.com/ryosukeeeee)です。

RustでExponential backoff and jitterアルゴリズムでリトライしたくなって、良さげなCrateを見つけたのでご紹介します。
Crate名は「exponential-backoff」です。最終更新は2年前ですが、Rust 1.48.0でも問題なく動作しました。
[exponential-backoff - crates.io: Rust Package Registry](https://crates.io/crates/exponential-backoff)


Exponential backoff and jitterの詳細はこちらの記事をご覧ください。めちゃくちゃ分かりやすいのでおすすめです。
[AWS Solutions Architect ブログ: Exponential Backoff And Jitter](https://aws.typepad.com/sajp/2015/03/backoff.html)


# サンプルコード
README.mdのコードを元にしたサンプルコードがこちらです。
設定は以下の通りです。

- 最大リトライ数: 8
- 最小待ち時間: 100ms
- 最大待ち時間: 10s
- ジッター: 0.3
- 繰り返し毎の倍率: 2倍

```rust
extern crate exponential_backoff;

use exponential_backoff::Backoff;
use std::{fs, thread, time::Duration};

fn main() {
    let retries = 8;
    let backoff = Backoff::new(retries)
        .timeout_range(Duration::from_millis(100), Duration::from_secs(10))
        .jitter(0.3)
        .factor(2);

    for duration in &backoff {
        match fs::read_to_string("README.md") {
            Ok(string) => println!("{}", string),
            Err(_) => match duration {
                Some(duration) => {
                    println!("{:?}", duration);
                    thread::sleep(duration);
                }
                None => {
                    println!("finish");
                    return;
                }
            },
        }
    }
}
```

実行してみると、待ち時間が指数関数的に増加していることが確認できます。

```sh
$ ./target/release/backoffsample 
100ms
240ms
284ms
960ms
1.92s
2.592s
5.504s
10s
finish
```


# 終わりに

[ハンズラボ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/handslab) 明日の7日目は、 [@shnskfjwr](https://qiita.com/shnskfjwr) さんです！お楽しみに🎉
ブロックチェーンを理解するために行ったこと

KIT Advent Calender 3日目 元気よくやっていきましょう。

ブロックチェーン技術はエンジニアであれば一度は触ってみたいものだと思います。
難しそう！というイメージがつきがちなブロックチェーンですが、なんとか「#ブロックチェーンなんもわからん」程度まで理解できるようになった僕の軌跡をお伝えしようと思います。
言語はC#に寄っています。

# bitcoin のソースコードを読みにいく
https://github.com/bitcoin/bitcoin 

結果：**挫折した**

そもそもC++に慣れ親しんでないというのもあって「さーてどこから読めば良いのかな」状態だったのと、ブロックチェーンに関する用語がわからないので名前だけでどのようなクラスなのか判断出来なかった。

# MinChain ライブラリのソースコードと資料を読み漁る
竹井悠人氏が教育用として公開されている[MinChain](https://github.com/yutopio/MinChain) 、 [VS2017リリース記念勉強会のアーカイブ](https://youtu.be/tDyBxcMv3u8) と[スライド](https://www.slideshare.net/YutoTakei/0-blockchain)をとにかく見て読んで使った。


結果：ブロックチェーンに使われている技術用語(Merkle Root Hash や Nonce や UTXO)の意味と処理の流れ、通信の流れが大体理解できた。

MinChain や資料がとても分かりやすく書いてあり、1~2週間の短期間でかなり理解が進んだと思います。特にネットワーク関連の知見が得られたのが凄く大きかったです。

# Programming The Blockchain in C# を読んだ。
C# 用 Bitcoin ライブラリの NBitcoin を使って学習するドキュメントで、分かりやすい図解とユーモアが含まれた文章のおかげで学習意欲を失わずに進めることができました。

結果：トランザクションの部分が詳しく理解できたのと、ウォレット部分の知見を得ることができました。

トランザクションインプットとトランザクションアウトプットの関係、「おつりのアウトプットを作る」ことが理解出来たのは大きかったですね。

# 『ゼロから創る暗号通貨』と Mastering Bitcoin を読みながらコードを書く
そろそろ学んだことをコードに落とそう！ということで、濵津誠氏の[『ゼロから創る暗号通貨』](https://peaks.cc/books/cryptocurrency)とMinChainを参考にC#で作ってみた。
章に関連する部分の理解を [Mastering Bitcoin](https://bitcoinbook.info/wp-content/translations/ja/book.pdf) と Bitcoin のソースコード、テストコードで補った。

それが[これ](https://github.com/AntiquePendulum/AntiquerChain)

結果：なぜこういった実装がされているのかを突き詰めた感覚を得ることが出来ました。なぜ Merkle root Hash を使うのか、 Block ではなく Block Header をマイニングするのかやDifficulty がありなぜ変動するのかという色々な疑問が一気に解消されました。


# その他みた資料
学習の補助として用いた資料の一覧です。
* [Bitcoin Developer](https://developer.bitcoin.org/index.html)
    トランザクションやブロックの中身、Difficulty の計算の調査に
* [Recommended Elliptic Curve Domain Parameters](https://www.secg.org/sec2-v2.pdf)
    secp256k1 とはどんなパラメータなのかを調べるために
* [Bouncy Castle For CSharp](https://github.com/bcgit/bc-csharp)
    開発に利用するために
* [Bitcoin WIki](https://en.bitcoin.it/wiki/Main_Page)
    Proof of Work の仕組み調査
* [NEO](https://github.com/neo-project/neo/)
    C#実装の実際に動いている暗号通貨を見てみようと思ったので。

# まとめ
さっくりと書いてしまいましたが、こうしてみるとかなりの数の資料を読み漁った感じがしますね。でもやはりコードを実際に考えて書いてみるのが一番理解に繋がるなぁと思いました。
今後の学習としてはオレオレ Mastering Bitcoin を書くつもりです。
これから(C#で) ビットコインを学習したいという方の参考になれば嬉しいです。
Pythonの文字出力（Ruby学習後のPython初学）

#Pythonの文字出力(Rubyとの比較もほんの少し)
##text出力
print("**hello world**")

で **hello world** がtext出力される。

'''
比較# Rubyの場合は print "hello world"
違い# <b>( )</b>で閉じない
'''

##HTML出力
print("< h1 >hello world< /h1 >")

で< h1 >タグで囲まれた **hello world** の見出しが出力される。　#タグ内スペースは通常不要

参照# < h1 >や< p >タグなどの**段落**をもつタグは閉じタグまで１行で出力されるので、

print("< p >hello")
print("world< /p >")

と書いてもHTML上では１行となる。
注意# ただし、段落を持つタグで閉じられていない場合は**print**ごとに改行される。

他の記述の仕方として

print('''< p >hello
 world< /p >''')

や

print("< p >"hello","world"< /p >)

と書き換えられる。

##今回のRubyとの比較
・( )で囲むのが違う。
・ダブルクォーテーションとシングルクォーテーションの文字列に対しての使い方は変化ないが、
シングルクォーテーション三つで囲むのはPython特有だと感じた。

#変数

変数の定義はRubyと同様

string = "1"
integer = 1

などで定義できる。

さらに

int += 1 などの演算子も同様に扱える。

文字列の場合は、print(str + str) で 1 1 など出力、
数値の場合は、print(int + int) で 2 など出力できる。

ただし文字列と数値は同時に計算は出来ないので
str + int は出来ないので（エラーとなる）
str(integer)にして、 "1" と文字列に変化させたり、
int(string)にして、 1 と数値に変化させることが必要。
Amazonで本の目次を確認するブックマークレット【2020年版】


#まえがき

少し前、とある事情で療養中のこと。
ツイッターを見ていると、アマゾンで目次を読むことが出来ないというツイートを目にしました。
以前はどうだったのか記憶が定かではありませんが、仕様が変更になったようです。
そこで、ブックマークレットを用いて簡単に目次（内容紹介）を確認できる方法を探りました。

#説明

その成果がこちらです。

```z_contents.js
javascript:location.href='https://www.hanmoto.com/bd/isbn/'+document.querySelector('link[rel="canonical"]').href.split('/').pop();
```

アマゾンの書籍ページには、

`<link rel="canonical" href="https://www.amazon.co.jp/title/dp/ISBN">`

という形式でURLが記述されているので、ここからISBNを取得します。それをもとに版元ドットコム（本の情報サービス）のサイトを開きます。これでOK。

何の問題もありませんが、単純過ぎてつまらないのでページ遷移がないタイプもつくりました。次のコードです。
fetchを使い、非同期的にデータをやり取りするやつです。
版元ドットコムは、カーリル（図書館の蔵書検索サービス）とともに書誌情報API（openBD）を提供しています。これを利用しました。

```alert_z_contents.min.js
javascript:(()=>{const e=document.querySelector('link[rel="canonical"]').href.split("/").pop();fetch("https://api.openbd.jp/v1/get?isbn="+e).then(e=>e.json()).then(e=>{let t=!1;if(null!==e[0]){const n=e[0].onix.CollateralDetail;Object.keys(n).length>0&&Object.keys(n.TextContent).length>0&&(alert(n.TextContent.pop().Text),t=!0)}t||alert("目次は見つかりませんでした。")})})();
```

上記のコードは以下のコードを短縮したものです。

```alert_z_contents.js
(()=>{
    const asin = document.querySelector('link[rel="canonical"]').href.split('/').pop();
    fetch('https://api.openbd.jp/v1/get?isbn=' + asin)
    .then(response => response.json())
    .then(data => {
        let c_flag = false;
        if (data[0] !== null) {
            const d = data[0].onix.CollateralDetail;
            if (Object.keys(d).length > 0) {
                if (Object.keys(d.TextContent).length > 0) {
                    alert(d.TextContent.pop().Text);
                    c_flag = true;
                }    
            }
        }
        if (!c_flag) alert('目次は見つかりませんでした。');
    });
})();
```

openBDから返ってくるJSONの構造に注意しながら、必要なデータがカラでないことを確認して目的の値を取得します。

#注意点

+ openBDに、すべての書籍が登録されているわけではありません。
+ 目次といっても、ページ数を明記していないことがあります。
+ iPhone版Chromeでは、alertが縦に長くなると、OKボタンをタップしづらいです。また、ブラウザによっては、alertで表示できる文字数に上限があります。気になるなら、alertを次のような感じに置き換えるといいです。

```js
document.body.innerHTML = d.TextContent.pop().Text.replace(/\n/g, '<br>');
document.body.style.padding = '10px';
```

#あとがき

たくさんの情報を得られる、1つ目のブックマークレットをおすすめします。
openBDについては、他にも面白いことが出来そうです。
本日もありがとうございました。

#参考

お世話になりました。
https://togetter.com/li/1587135
https://www.hanmoto.com
https://openbd.jp
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
https://javascript-minifier.com/
[解決]Vueで、2つエラー""./src/main.js Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): と、Error: Cannot find module 'eslint/lib/formatters/stylish' Require stack:""

## 背景

vue(vue CLI)で

```javascript
$ vue add axios
```
をした時に、compileエラーが出た。(タイトルに書いてあるエラー。)

## 解決方法

package.jsonをこのように変更

```javascript
"resolutions": {
- "eslint-loader": “2.1.2”　←削除
+ "eslint-loader": "3.0.3"　←追加
}

```
その後

```javascript

$ yarn add -D eslint-loader
```

僕の場合は、Dockerを使っていたので、コンテナを起動し直す。

↓

エラー解消


参考: 
https://tmegos.hatenablog.jp/entry/package-json-dependencies-caret
AWS WorkSpaces内に構築したJenkinsにローカルPCからアクセスする方法

# はじめに

普段自動テスト実行環境としてAWS WorkSpacesを使うことがあります。
毎回Workspacesへログインするのではなく、ローカルPCからJenkinsの設定をすることも多いです。
よく設定するため、備忘録として残しておきます。

# 環境情報

* 使用するWorkSpaces
    * Windows10
        * Jenkinsをインストール（port:8080）


# 設定方法

### WorkSpaces側の設定

* WorkSpacesにログインし、Firewallをすべて無効化する
    * セキュリティ上あまり良くないかもしれませんが、自動テストでも影響を受けることがあるので無効化しています。

### AWSコンソールからおこなう設定

* AWSコンソールにログインする
* サービスから「WorkSpaces」を開き、左メニューから「ディレクトリ」を選択する
* ①ディレクトリIDをコピーする
    * ※ローカルからアクセスしたいWorkSpacesが使用しているもの
    * ※使用しているディレクトリ名が分からない場合、WorkSpaces内にログイン後、コントロールパネルからネットワーク接続で確認することも可能。
* サービスから「EC2」を開き、左メニューから「ネットワーク＆セキュリティ > セキュリティグループ」を選択する
* ①でコピーしたディレクトリ名を検索窓に入力し、検索する
    * 検索すると以下のような2件（セキュリティグループ名）に絞れる
        * ディレクトリID_workspacesMembers
        * ディレクトリID_controllers
* セキュリティグループ名「ディレクトリID_workspacesMembers」のセキュリティグループを開く
* インバンウンドルールで、接続を許可したいグローバルIPを設定する
    * 例
        * タイプ： カスタムTCP
        * ポート範囲: 8080
        * ソース: カスタム + グローバルIP/32
        * 説明: Sample
* ルールを保存する
ruby ハッシュのキー名を変更する


# ハッシュのキー名を変更する

rubyハッシュのkeyを書き換える必要がありまして

~~~original
{
"hoge-01"=>{"a"=>"hoge", "b"=>"hogehoge", "c"=>"giko", "d"=>["gikogiko"]}, 
"hoge-01_org"=>{"a"=>"hogee", "b"=>"hogehhoge", "c"=>"giko", "d"=>["neko", "geko"]}
}
~~~
上記を、

~~~target
{
"hoge01"=>{"a"=>"hoge", "b"=>"hogehoge", "c"=>"giko", "d"=>["gikogiko"]}, 
"hoge01org"=>{"a"=>"hogee", "b"=>"hogehhoge", "c"=>"giko", "d"=>["neko", "geko"]}
}
~~~
こうしたい。


# コード

ruby2.5以降は、以下で可能です。(subdataがハッシュ)

~~~ruby
subdata.transform_keys!{ |k| k.delete("-_") }
~~~

私のケースではkeyから"-"と"_"を排除したかったので上記のコードになってますが、下記「追記」のように変換用のハッシュを作成して、storeしてるところを任意に書き換えていただければ他の文字列への変換も可能です。

# 追記
[scivola](https://qiita.com/scivola)さんから、単に任意の文字列を削除したいだけならばString.deleteのほうが簡単とのコメントがありまして確かにそのとおりなので本文に反映しました。もともとのコードは以下の通りです。

~~~ruby
key_map = {}
for i in subdata.keys do
  key_map.store(i,i.gsub(/-|_/,""))
end
subdata.transform_keys! {|k| key_map[k]}
~~~

key_mapにオリジナルのキー名と新しいキー名をstoreしておき、最後に一括でtransform_keys!しています。
第６回



# variable　


# お題

受け取った引数ARGV[0]をnameという変数(variable)に代入してそれを打ち出すcodeを書け．

    > ruby name_variable.rb
    Ruby


# Rubyでの変数

rubyの変数は型宣言の必要性がなく，文脈に合わせて適当に型が定められます．イコールで代入されます．

```ruby
name = 'Rudy'
```


# method


# お題

    > ruby hello_method.rb Rudy
    Hell Rudy.

と返すhello methodを作りなさい．


# 解説

Rubyではfunctionやprocedureなどのまとまりはmethodを定義(definition)することになります．methodは0個以上の引数(argument)を取ることができます．

```ruby
def hello name
  puts "Hello #{name}."
end

name =ARGV[0]
hello(name)
```



------
 - **source** ~/grad_members_20f/members/Kazufumi0823/a3.org
グリッドレイアウトの auto-fit でオーバーフローする件



# 概要

グリッドレイアウトの`grid-template-columns: repeat(auto-fit, ...)`を使うと、グリットコンテナに収まる範囲でグリットアイテムを生成するが、一定の条件でオーバーフローしうる。

<p class="codepen" data-height="623" data-theme-id="light" data-default-tab="result" data-user="lhankor_mhy" data-slug-hash="RwGWRNM" style="height: 623px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Overflow in auto-fit grid">
  <span>See the Pen <a href="https://codepen.io/lhankor_mhy/pen/RwGWRNM">
  Overflow in auto-fit grid</a> by lhankor_mhy (<a href="https://codepen.io/lhankor_mhy">@lhankor_mhy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 再現しうる条件

`minmax(min, max)`について、min > max かつ max が確定値（長さまたはパーセンテージ）の時。

# どうしてそうなるか

仕様書を読んでの私見ですが、以下のような感じではないかと思います。

```css
section{
  width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100px));
}
```

## auto-fit の解決

まず、`auto-fit`が解決されます。

>the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, flooring the max track sizing function by the min track sizing function if both are definite, and taking gap into account);
[7.2.3.2. Repeat-to-fill: auto-fill and auto-fit repetitions | CSS Grid Layout Module Level 2](https://drafts.csswg.org/css-grid/#auto-repeat)

_（勝手訳）繰り返し回数は、グリッドがグリッドコンテナのコンテントボックスをオーバーフローしない範囲で最大の正の整数になります。（それぞれのトラックは、`max track sizing function`確定的である場合はそれを、そうでない場合は`minimum track sizing function`を、両方とも確定的である場合は`max track sizing function`が`min track sizing function`を上書きする）_
[^1]




直訳したら、なんだかひどく悪文になってしまいました。

0. トラック幅は、`minmax(min, max)`として、`min` `max`両方が【長さ・パーセンテージ】である時は両者の最大値、`max`が【長さ・パーセンテージ】である時は`max`、それ以外は`min`
0. 繰り返し回数は、前項の幅を基にした、オーバーフローしない最大の正の整数

ということのようです。

---

上記に従って解決すると、トラック幅は`100px`になるので、300/100=3 で、

```css
section{
  grid-template-columns: repeat(3, minmax(max-content, 100px));
}
```

と同等ということになります。

## minmax の解決

次に、実際のトラック幅ですが、グリッドアイテムの画像幅が`150px`なので、`minmax(max-content, 100px)`は`minmax(150px, 100px)`です。

> If the max is less than the min, then the max will be floored by the min (essentially yielding minmax(min, min)). 
[minmax(min, max) | CSS Grid Layout Module Level 2](https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax)

_（勝手訳）max が min よりも小さい場合、max は min に上書きされます（本質的に minmax(min, min) と同じ）_
[^2]

---

上記に従って解決すると、150px になりますので、

```css
section{
  grid-template-columns: repeat(3, 150px);
}
```

と同等ということになり、実際に同じ表示になります。

# まとめ

以上のようなふるまいのため、min > max であっても、`max`が確定値ではない場合は、`auto-fit`が`min`を参照して繰り返し回数を決めるので、`minmax()`の結果と矛盾せず、オーバーフローしません。
逆に言えば、`max-content`などを参照させて繰り返し回数を決めるのが難しいので、幅を拘束せずに`auto-fit`を使ってフレックスレイアウトのような自動折り返しをするのは困難です。

[^1]: （flooring ... by の部分の訳が微妙？）
[^2]: （floored by の部分の訳が微妙？）
yarnを用いてのESLintの初期設定方法（備忘録）

#はじめに

Qiita初投稿です。
ESLintはこれからもお世話になると思うので、自分用の備忘録としてESLintの初期設定の方法を記録しておこうと思います。

#前提
この後の話は、yarnがインストールされていることを前提として話が進みます。

#設定ファイルの作成（package.json）
まずは設定ファイルである「package.json」を作成するため、プロジェクトフォルダ内に移動します。プロジェクトフォルダ上で以下のコマンドを打ち「package.json」作成します。
「-y」オプションは「yarn init」を打つとターミナル側から質問される項目に対して、自動で「yes」と返してくれるオプションになります。

```
yarn init -y
```

上記コマンドによって、プロジェクトフォルダ内に「package.json」ファイルが作成されました。

#ESLintのインストール
次にESLintのインストールを行います。プロジェクトフォルダ内で以下のコマンドを実行してESLintのインストールを行います。
「-D」オプションは開発環境用にのみインストールするという意味です。

```
yarn add -D eslint
```

#PATHを通す
先程の工程でESLint自体のインストールは完了していますが、eslintのコマンドを直接打ってもPATHが通っていないためにエラーとなるため「PATHを通す」という作業を行って、「eslint」でコマンドを使えるようにします。
しかし、今回自分はPATHを通さずに実行していたためすみませんがここは割愛させてください。下の方に、今回参考にさせていただいた記事を引用しています。そちらに詳しく載っているのでそちらをご参照下さい。

今回私はPATHを通していませんが、PATHが通ってない状態でも「./node_modules/.bin/eslint 打ちたいコマンド」で、eslintのコマンドを実行することが出来ます。

#ESLintの初期設定
ESLintの初期設定をします。そのためにプロジェクトフォルダ上で以下のコマンドを打ちます。
以下は前の手順でPATHを通した人用です。PATHを通すのが面倒臭い人はその下のコマンドを打つことで同じことを実行することが出来ます。

```:PATHを通している人
eslint --init
```

```:PATHを通していない人
./node_modules/.bin/eslint --init
```

このコマンドの細かな設定については、以下のQiita記事がとても参考になりました。
[ESLint簡単導入 × VSCode](https://qiita.com/koukibuu3/items/c850aff54d4e015fe997)
[eslintの設定からprettierとの併用までの流れ](https://qiita.com/imamura_sh/items/0ba005889e3e90ee66d9)


あくまで自分用の備忘録なので今回はこの辺で。
functions predeploy errorの回避及び対処方法について

#Firebaseでdeployコマンドを実行したところエラーが発生

```
i  deploying firestore, functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/tarou/test/app/functions
> eslint "src/**/*"


/Users/tarou/test/app/functions/src/index.ts
  9:33  error  Missing trailing comma  comma-dangle

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! functions@ lint: `eslint "src/**/*"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tarou/.npm/_logs/2020-12-03T07_41_54_419Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code1
```

# firebase.jsonの中にある、functionsのpredeployをまんま削除し対応

```
"functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
```
↑こんなやつです。（ビルドの記述もあるかも、それも削除）

参考記事（感謝）
[firebase deploy時のeslintを無効にする](
https://tsukada.sumito.jp/2019/12/11/firebase-deploy%E6%99%82%E3%81%AEeslint%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B/)

間違い、または、これはこうしたほうがいいかも？等々ございましたらご指摘いただけますと幸いです。
最後までみていただきありがとうございます。
dxlib　小技集（役に立つかは保証できません）

　さて、初めての記事なので、markdownを少しでもうまく使って、わかりやすい記事にできたらなと思います。（見やすくするアドバイスがあったら是非コメントで教えてください）
　なお、記事の内容の都合で別サイトの内容に対して否定の言葉の使っている箇所が何個かありますが、あくまでも個人的な意見として参考にしてください。（ここら辺の言い回しって良い表現ないですか？）、
　ネットで見つけたものや個人的に考えたものもdxlibの小技を書いていきます。
#１．キー入力
　dxlibにはキー入力の方法として、いくつかあります。たぶん多く使われるのはCheckHitKeyかなと思います。一番使うのが簡単ですし。
　ただ実際にゲームで使おうとすると、関数が実行されるたびにキーが押されているかを取得しているので速度もおそらく遅いです。（といっても計測したことないですけど）
　そこで、dxlibにあるGetHitKeyStateAllを使います。この関数はすべてのキー入力について配列に代入してくれる関数です。この関数を実行して配列にキーの入力状態を配列に代入したら、後はその配列を参照することで、処理速く複数のキーの入力状態を取得できます。
　で、前置きが長くなりましたが、ここからが本題で、この関数を使ったとしても、キーが押されているか押されていないかしかわかりません。実際にゲームで利用するとなると、

- キーが押された瞬間
- キーが押している間
- キーが離れた瞬間
- キーが押されてない

とかを取得したいものです。この中でキーを押された瞬間というのは特にゲームで使うでしょう。ゲームの仕様として、キーの長押しを禁じたい場合は数多く存在するでしょう。
　そこで、ネットでは何人かの人が専用の関数を作ることを思いつきました。
https://dixq.net/g/02_09.html
がわかりやすいでしょうか。このサイトは他にも役に立つ情報が多いので参考にしてる人も多いと思います。
　しかし、上記のgpUpdateKeyではキーが離れた瞬間というのは取得できません。まあ使うゲームは限られているでしょうが。去年のアドベントカレンダーでこれを解決しようとした人がいました。
https://qiita.com/legohasiri/items/ff258bb3cb4522b4aa66
　けどここの方法だと使うキーが増えるたびにオブジェクトを作る必要があります。しかもよく読んでみるとわかるんですけど、キーの数だけupdateを実行する必要がありますし、僕の勘違いでなければGetHitKeyStateAllは本来1フレーム（ゲームのメインループ一回）に一回呼べばいいのにこれじゃキーの数だけ呼ばれてしまいます。
　じゃあどうすればいいのかと。方法としては、gpUpdateKeyを改良すればいいんです。僕が考えたのは、配列をもう一個作って、キーが押されてないときにその配列の対応するところを１にする。すでに１だったら0にするという方法です。そこまで作って、ふとこのぐらいの仕組みなら作った人いないかなと思いました。検索して見つけたのは
https://dixq.net/forum/viewtopic.php?t=8685
の一番下にあるものです。
　配列を一個も増やさずに見事に作られています。見つけて以降僕はこれを使っています。
#２．画像のカラーバリエーション
　ゲームによっては画像をたくさん使うと思います。それこそ色違いとか。そんな色違いの画像を用意するのを楽にする方法です。
　まず、色を白にした画像を用意します。それをLoadGraphで読み込んで、実際に表示するときには以下のようにします

```cpp:test.c
SetDrawBright(表示色のR、表示色のG、表示色のB)
DrawGraph(表示するX, 表示するY, 画像のハンドル, ここはご自由に);
```
　SetDrawBrightは描画するときの色を重ねてくれる？関数で、白の画像に対して使えば指定した色に画像を塗ることができます。こうすることで、カラーバリエーションが必要な時でも画像は一つで済みます。
　今某落ち物ゲームを作っていて、この方法を使わせてもらってます。白の画像を用意するというのはどこかのサイトを参考にしたと記憶してるのですがどこだったか忘れたので思い出したら追記しておきます。
　なお、この方法は問題があって、（気づいたときは驚きました）上記のように画像を描画した後DrawLineなどを使って白い直線を描画すると、描画されるのはなんとさっき指定した色になります。なのでSetDrawBrightで白を指定して戻す必要があります。画像のみに適用する方法誰か知りませんか？

#まとめ
 ~~記事を書くときは内容をもう少し考える。~~
　間違った情報はたぶんないとは思いますがあったらあったらコメントお願いします。
　また、このサイトでリンクを張らせてもらったサイトを書いた人へ、今回の記事の内容はサイトが無ければ書けませんでした。ありがとうございます。
AWS CDK で Docker イメージを Lambda にデプロイする


AWS Lambda でコンテナイメージがサポートされました🎉
https://aws.amazon.com/jp/blogs/aws/new-for-aws-lambda-container-image-support/

また、AWS CDK 1.76.0 で早速サポートされたのでデプロイしてみました。
https://github.com/aws/aws-cdk/releases/tag/v1.76.0

# CDK プロジェクト作成

まずは CDK プロジェクトを作成します。今回は TypeScript で書きます。

```zsh
mkdir cdk-lambda-container
cd cdk-lambda-container
cdk init --language=typescript
```

# Lambda Function 作成

作成されたファイルの中にある Stack を編集します。

DockerImageFunction のドキュメントは以下の URL です。
https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_aws-lambda.DockerImageFunction.html

必須プロパティーは code のみのようです。
ここでは src ディレクトリーを作成して、そこに Lambda に配置するファイルを作成していきたいと思います。

```typescript:lib/cdk-lambda-container-stack.ts
import * as cdk from "@aws-cdk/core";
import * as lambda from "@aws-cdk/aws-lambda";

export class CdkLambdaContainerStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    new lambda.DockerImageFunction(this, "cdk-docker-container-lambda", {
      code: lambda.DockerImageCode.fromImageAsset("src"),
    });
  }
}
```

# コンテナイメージ作成

src ディレクトリーの中を作成していきます。

```zsh
mkdir src
cd src
yarn init --yes
touch app.ts
touch Dockerfile
```

app.ts の中は JSON を返すだけのシンプルなものです。

```typescript:src/app.ts
export const lambdaHandler = async (event: any, context: any) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      key: "value",
    }),
    headers: {
      "Content-Type": "application/json",
    },
  };
};
```

Dockerfile は以下の内容です。

```dockerfile
FROM amazon/aws-lambda-nodejs:12
COPY app.js package*.json ./
RUN npm install
CMD [ "app.lambdaHandler" ]
```

# デプロイ

CDK を利用してデプロイします。
AWS の認証情報は事前に設定されている想定です。

```zsh
cd ..
yarn build
yarn cdk deploy
```

# コンソールから確認

デプロイされたコードは見ることできません。
ECR に作成されたイメージはアップロードされ、そのリンクが表示されます。

![Screenshot 2020-12-03 at 17.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/886596/061dfdbd-dde5-6e24-7df7-e05d442ba7f0.png)

![Screenshot 2020-12-03 at 17.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/886596/aa8d4bec-d9f5-1253-3ea2-095814f8b51b.png)

ECR ではアップロードされたイメージが表示されます。

![Screenshot 2020-12-03 at 17.25.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/886596/2c02575d-ae20-b1fb-87a9-15affd2cc5fc.png)


# Lambda 実行

空のテストイベントを作成し実行してみます。

初回は起動時間があり少し時間がかかります。

![Screenshot 2020-12-03 at 17.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/886596/dae8fa33-bb78-87bb-09b8-09af228b4176.png)

2 回目以降はコンテナが使いまわされて、実行されます。

![Screenshot 2020-12-03 at 17.21.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/886596/8810dec8-f83d-6109-c931-2396818c8625.png)

同じタイミングで Lambda の課金が 100ms 単位から 1ms 単位になっているので、課金時間が上記の実行では 5ms になっています。


# まとめ

Node モジュールの中には OS や CPU プラットフォームに依存するものもあるので、
モジュールを含めてローカルで開発している環境と Lambda で動作する環境を揃えられるようになりました。

re:Invent で新しいサービスや機能がどんどん出てくるので次はどんな発表があるか楽しみですね。
量子コンパイラを作る。 その7

# 概要

量子コンパイラを作る。
練習問題、3bit加算器、やってみた。

# コードを書く。


```
make 18
in 0 5
wire 6 13
xor 0 3 14
and 0 3 6
xor 1 4 7
and 1 4 8
xor 6 7 15
and 6 7 9
or 8 9 10
xor 2 5 11
and 2 5 12
xor 10 11 16
and 10 11 13
or 12 13 17
out 14 17
```

# コンパイル結果


```
from blueqat import Circuit

print (Circuit(18).h[ : 6].cx[0, 14].cx[3, 14].ccx[0, 3, 6].cx[1, 7].cx[4, 7].ccx[1, 4, 8].cx[6, 15].cx[7, 15].ccx[6, 7, 9].ccx[8, 9, 10].cx[8, 10].cx[9, 10].cx[2, 11].cx[5, 11].ccx[2, 5, 12].cx[10, 16].cx[11, 16].ccx[10, 11, 13].ccx[12, 13, 17].cx[12, 17].cx[13, 17].m[ : ].run(shots = 1000))


```

# 成果物

https://embed.plnkr.co/plunk/XJBhrjJwZTuH5BRr


# 真理値表で確認。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/0d82e16b-1443-5c50-c771-057a8bf19384.jpeg)


# 成果物

https://embed.plnkr.co/plunk/Lvw8FtpmrWm4PMAe


# 回路図で確認。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1a9d2dc9-9747-18f2-7530-72554e2d79e2.jpeg)


# 成果物

https://embed.plnkr.co/plunk/GEaZOnZHFcPV3Tge


# 実行結果


```


Counter({
'010001010001000110': 25, 
'011100010001001110': 23, 
'110011001011011001': 22, 
'100110110110000010': 22, 
'111011001010101011': 21, 
'010010001010000010': 21, 
'011101010000101101': 21, 
'011111001010101011': 21, 
'010000010000000100': 21, 
'110111101011010101': 20, 
'110100110110000010': 20, 
'110001010001001110': 20,
'100010010000001100': 19, 
'111101110110100011': 19, 
'010101010001001110': 19, 
'101101100000100101': 19, 
'000000000000000000': 19, 
'111110101011010101': 19, 
'011110001011011001': 18, 
'100100100000000100': 18, 
'111010001011011001': 18, 
'010110001010001010': 18, 
'111100110111010001': 18, 
'100101100001000110': 18, 
'111111101010100111': 17, 
'110000010000001100': 17, 
'011001010000100101': 17, 
'000101000001001010': 16, 
'001110010001001110': 16, 
'001100000001001010': 16, 
'010011001011010001': 16, 
'001000000001000010': 16, 
'110101110111010001': 16, 
'000110010000001100': 15, 
'011011001010100011': 15, 
'101111110110100011': 15, 
'000111010001001110': 14, 
'100011010001001110': 14, 
'011010001011010001': 14, 
'001101000000101001': 14, 
'101010010001001110': 14, 
'100000000000001000': 13, 
'001011010000100101': 13, 
'100111110111010001': 13, 
'111000010001001110': 13, 
'001111010000101101': 13, 
'101110110111010001': 13, 
'000010010000000100': 12, 
'010100010000001100': 12, 
'001010010001000110': 12, 
'101000000001001010': 12, 
'000001000001000010': 12,
'110010001010001010': 12, 
'011000010001000110': 12, 
'100001000001001010': 12, 
'101001000000101001': 11, 
'000011010001000110': 11, 
'111001010000101101': 11, 
'000100000000001000': 11, 
'101100100001000110': 10, 
'010111001011011001': 10, 
'101011010000101101': 8, 
'110110101010000110': 8, 
'001001000000100001': 5
})


```


以上。
ubuntu18.04LTSでのZSTD_compressStream2エラー

ubuntu18.04LTSのaptでインストールできる、zstdは1.3.3でちょっと古いために起こります。zstd-1.4.5が必要のようです。

下記でインストール可能です！

```
$ sudo apt remove libzstd-dev
$ wget https://github.com/facebook/zstd/releases/download/v1.4.5/zstd-1.4.5.tar.gz
$ tar xvf zstd-1.4.5.tar.gz
$ cd zstd-1.4.5
$ make
$ sudo make install
```

#参考
https://matoken.org/blog/2020/07/17/a-little-experiment-with-the-new-features-of-rsync-3-2-0/
WEB世界のストーカー

## マウスストーカーとは…
[![Image from Gyazo](https://i.gyazo.com/3bb3203b3983077d967743f4000ea825.gif)](https://gyazo.com/3bb3203b3983077d967743f4000ea825)
> ズバリ！コレですね。　マウスにストーカーするもの =　マウスストーカー




## STEP1 ▶ body要素内にストーカーにする要素を設置する。　

HTML

```html
<div id = "stalker"></div>
```

HAML

```HAML
#stalker
```



適当なstalker要素を作ってください。

## STEP2 ▶ CSSで見た目を作る　→　位置を決める　→　アニメーションの設定

SCSS CSS

```css
#stalker{
  
  //🔻見た目の部分(ストーカーの本体)

  width: 16px;   //マウスストーカーの直径(横幅)

  height: 16px;  //マウスストーカーの直径(縦幅)

  background-color: rgba(228, 58, 210, .9);　(ストーカーの色)

  border-radius: 50%; //要素を丸くします
  
  //🔺見た目の部分 (ストーカーの本体)
  
  //※ココを簡潔に言うと、丸を作ってます。個々のプロパティは勉強してみてください。
  
  
　//🔻位置に関してのCSS
  
  position: fixed; //要素を特定の位置に固定させる
  
  top: -8px;     //座標調節（カーソル位置と円の中心を合わせる）

  left: -8px;    //座標調節（カーソル位置と円の中心を合わせる）
  
  z-index: 999; //レイヤーを引き上げる(レイヤー調整・奥行き調整)
  
  pointer-events: none; //マウスイベントを消す。通常はdiv要素をクリックしたことになり、
     　　　　　　　　　　　　aタグなどを押せなくなってしまう現象が起きるが、それを防ぐ為の記述。)
  //🔺位置に関してのCSS
  
  //※ここまでで簡潔に言うと、丸の位置を調整しています。個々のプロパティは勉強してみてください。
  
  //🔻アニメーションに関してのCSS

  transform: translate(0,0); //()内の数字に応じて移動するプロパティ,
  　　　　　　　　　　　　　　　　　 後でJSで変更する処理を書くので、とりま入力だけ。

  transition: transform 0.2s;  //要素の動き　要素が変化するまでの時間を0.2秒にする。1秒じゃ遅い。

  transition-timing-function: ease-out;　//変化の度合い,開始時が早く→終了が緩やか↪

  //🔺アニメーションに関してのCSS

}

```

## STEP3　▶　要素の操作を行う　→　終了

jQuery

```jQuery
if(location.pathname === "/"){
  //今回はルートパスの場合のみの処理にしました。
  function cursor() {
    const stalker = document.getElementById('cursor'); 
    //stalker定数に要素を取得して入れてましょう。
    //上記のdivタグをマウスに追従させる処理
    document.addEventListener('mousemove', function (e) {
        stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
        //マウスが動いた時に動きを与えます。
        //動いたときには、ストーカー要素の位置を変更します。イベントが発生した時の位置をcilentXとYで指定してあげてるという感じです。
    });
  }
  window.addEventListener('load',cursor);
}
```



一応動きは理解できましたが、個々のプロパティは、無数に生かせる場所が見いだせそうなので研究を重ねます。


以下のサイトを参考にさせていただきました。

https://wemo.tech/3214

https://qiita.com/7968/items/812d6a21fc4dd9ae9c75
【javascript, css】iframe の読み込み時のGIFロード画像表示【SAMEORIGIN】

# iframe の読み込み時のGIFロード画像表示
・検索画面の結果表示用として iframe を利用
・spring framework の環境ではデフォルトでは使えないので オプション設定 も載せます

## 環境
・Windows10 64bit
・SpringFramework 4
・Java 8
・jQuery 3.4.1

## web.xml 設定追加
設定しないとブラウザで表示してくれないので・・・
今回は同じドメインでの利用なので SAMEORIGIN 設定にしてます。

```xml
  <!-- クリックジャッキング対策 -->
  <filter>
    <filter-name>SecurityFilter</filter-name>
    <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
    <init-param>
      <!-- iframe 用 -->
      <param-name>antiClickJackingOption</param-name>
      <param-value>SAMEORIGIN</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>SecurityFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
```

## ロード中の画像を準備
https://loading.io/
すばらしく簡単にカスタマイズできるロード中画像が作れます。
![loading.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108113/1544abfe-16ea-0ea4-fcf5-4cf8d2ed7ab0.gif)

## iframe の css
iframe の真ん中に表示設定

```css
<style>
.iframe-placeholder {
   background-image: url('${imagePath}/loading.gif');
   background-position: center center;
   background-repeat: no-repeat;
}
</style>
```
## iframe
```html
      <iframe id="iframeResults" class="results_area iframe-placeholder" src="about:blank" name="results">
        この部分はインラインフレームを使用しています。
      </iframe>
```


## javascript

```javascript
    // iframe ロード時に css 無効化 (画像撤去)
    $('#iframeResults').on('load', function(){
    	$(this).removeClass('iframe-placeholder');
    });
    // フォームサブミット時に css 有効化 (画像表示)
    $('#myForm').on('submit', function(evt){
    	$(this).addClass('iframe-placeholder');
    });
```

関係ないですが、Edge が chromium 系になって本当に良かった・・・。

以上です、お疲れさまでした！
コンパイラ言語とは

#コンパイラ言語
英語で書くと『`compile`』日本語での意味は「`編集する`」
インタプリタ型言語と同じく機械語に翻訳してハードウェアに実行してもらう為の言語。
より機械語に近くインタプリタ型言語に比べると習得しにくい面があります。
ですが実行速度が早く、ケアレスミスなどのミスを発見してくれるなどのメリットがあります。
　
　

###★　コンパイラ言語の処理方法
　ソースファイルをコンパイルして機械語になったファイルを作成します。

　<b>Fail.java　→　コンパイル　→　Fail.class →　実行</b>　（Javaファイルの場合）

　1度コンパイルしてしまえば次回以降は Fail.class を使うので速度が早い。
　（ C言語の場合は　 .c 　→　.obj　 ）
　

###★　インタプリタ型言語の処理方法
　ソースファイルを実行する時に、１行ずつ丁寧にコンパイルしながら処理します。

　<b>Fail.java　→　１行ずつコンパイル　→　実行</b>
　
　次回以降も同じ手順になります。
　
##種類
###・　C言語 
 　　 言語の中で最も歴史が長く、最も有名な言語
　　 最も処理が早く、使い勝手の良いプログラミング言語として未だ人気の高い言語
　　 ロボット開発や OSのシステム開発、Iot、WindowsのOSなどに使用される。

###・　C＃
　　 マイクロソフトが開発したプログラミング言語であり、オブジェクト指向を持ちます。
　　 『.NET Framework（ドットネットフレームワーク）』と共に誕生しました。
　　 C++ の影響を受けており、C++ より先に進んだと言う意味で C++ ++ 
　　 ++ ++がくっ付いて`＃`となり `C#` と言う名前になった。
　　 Javaに文法が似ている。
　　 VRとかゲーム開発に用いられており、Unityでも使われています。

###・　Java
　　 Oracle社が作ったオブジェクト指向のプログラミング言語
　　 Javaの登場でオブジェクト指向が主流の時代を作った。ゴール・D・ロジャー みたいな存在
　　 OSに依存しないプログラミング言語で、キャッチフレーズは『 Write once, run anywhere 』
　　 `一度書けば、どこでも実行できる` と言う意味です。　カッコイイです！！
　　「 <b>Minecraft</b> 」もJavaで作られています。
　　 
###・　Go
　　 Google社の作ったプログラミング言語　　
　　 めちゃめちゃ有能で、コンパイラ言語なのに扱いやすくWebアプリケーションの開発から
　　 Webサーバの構築まで様々に使えます。
　　 プログラムの実行処理に、1度コンパイラされたファイルを作って.....とせずに直接機械語へ
　　 コンパイルします。処理速度も早く、メモリソースの使用量やバッテリー消費も抑えられて
　　 エコな言語です。これからますます需要が増えてくだろうと考えられています。
　　 下の絵はGo言語のマスコット「 Gopher 」 可愛いですね:blush:
　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/836751/6d27efee-c649-7353-9e33-1d74df80e72d.png" width="130" height=470px> 
　　 by Renée French

　
　
コンパイラ言語は強面だけど実は影でしっかり支えてくれてる優しいヤツなんですね〜:smiley:
　
　
　


##参考
https://www.geekly.co.jp/column/cat-technology/1902_041/　
https://anken-hyouban.com/blog/2020/07/05/compiler-language/　
https://www.modis.jp/staffing/insight/column_76/　
https://wa3.i-3-i.info/word12701.html　
https://itpropartners.com/blog/10984/
スクリプト言語とは

#スクリプト言語
比較的簡単に読み書き出来るプログラム言語。
OSやアプリケーションソフトの作成・実行に用いられる。
定義がハッキリとしておらず`インタプリタ言語`と`LL言語`との境があいまいになっています。

※ インタプリタ言語 ・・・・・　プログラミング言語で書かれたソースコードや中間表現（ソースコードと機械語の間）の処理形式の１つ（もう1つは、コンパイラ言語）
英語で書くと『interpreter』日本語訳では『翻訳』と言う意味。
上から順に翻訳をしていく為、時間が掛かるが実行がうまく行かなかった時点でデバックに移れる。

※ LL言語 ・・・・・　軽量プログラミング言語（英: Lightweight Language）略して`LL言語`と言う。 学習・習得・使用が簡単な言語のことを言います。

　
##種類

###・　JavaScriput
<b>オブジェクト指向型スクリプト言語</b>
Web上にてHTML　CSSと組み合わせてWebページを作る。
HTML　CSSが静的な物を作るのに対し、動的な物を作るのに使われます。

###・　Python
<b>汎用スクリプト言語</b>
コードが読みやすく、少ないコード量で動くため学習しやすく世界中で人気があります。
使いやすいので色々な所に使用されています。
組み込み系の開発やデータ分析、機械学習などがそうです。
` YouTube `　` Instagram ` などなど
 
###・　Ruby
<b>オブジェクト指向型スクリプト言語</b> 
日本人によって作られた日本産のプログラム言語。
日本語で理解しやすい部分が多くとっつき易い。
WebサイトやWebアプリケーションの開発に用いられ Ruby on Rails というフレームワークがあります。


###・　PHP
<b>オープンソース用のスクリプト言語</b>
Webアプリケーショ開発に適しています。JavaScriptと似てWeb上で動的な物を作ります。
JavaScriptがブラウザ上で動く`フロントサイド`のプログラム言語なのに対し、PHPは`サーバーサイド`で動くプログラム言語です。
正式名称は「 Hypertext Preprocessor 」です。

　

スクリプト言語とは『フットワーク軽めで親しみ易い言語』って感じですね〜:grin:

　　
##参考
https://it-trend.jp/development_tools/article/32-0031　
https://www.modis.jp/staffing/insight/column_77/　
https://qiita.com/tomokichi_ruby/items/73b0e7924a9f83fe45c6
OSについて　２

#はたらく OS

<b>OS</b>とは<b>オペレーションシステム(英: Operation System)</b>の略であり、パソコンを動かすのになくてはならない基本ソフトの事です。
<b>ハードウェア</b>と<b>アプリケーションソフトウェア</b>の間を取り持っている無くてはならない存在です。

では、どのように動いているのでしょうか。

① <b>OS</b>は通常 <b>HDD</b>（ハードディスク） にインストールされており、当たり前ですが電源がOFFの時は動いていません。電源がONになると、ハードウェアにある<b>`BIOS`</b>が働きOSに「起きて！仕事だよ！！」と連絡をいれます。

##BIOS
<b>BIOS</b> ( バイオス ) とは Basic Input/Output System (ベーシック インプット／アウトプット システム)の略であり、ROMに組み込まれマザーボードに搭載されており、OSを起動させるためのファームウェアです。
現在は <b>`UEFI・BIOS`</b> （Unified Extensible Firmware Interface） が使われています。理由はBIOSよりもセキリュティにすぐれ、大容量ドライブをサポートでき、起動が早いなどUEFIはBIOSの後継、拡張されたものになります。
<img>&emsp;&emsp;&emsp;&emsp; ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/836751/d1703de2-19c3-2f44-51c0-65e5a1796500.png)
② BIOSから「起きて！」の連絡が入るOSですが、悲しいかなその声はダイレクトには届きません。<b>ブートローダー</b>と言う「OS起動用のソフトウェア」が間に入ります。

##ブートローダー
ROMに組み込まれている小さなプログラム。役割は寝ているOSを起こすこと。OSを起こすためにROM上にいる小さなプログラム達と力を合わせて仕事を行います。ただ起こすだけでは無く、OSがメモリ上で働けるように準備をしておいてくれる優しい子です。
　


③ やっと起きたOSさん、そのOSの核を担っているのが <b>カーネル</b> と言う部分になります。

##カーネル (kernel)
メモリの制御やCPUの制御を行います。ハードウェアとアプリケーションとの架け橋のような存在で、ユーザーから直接の指示を受け付けないプログラムです。
アプリケーションがハードウェアに直接命令できるとしましょう。そうすると、色々なアプリケーションが好き勝手にメモリやCPUなどを使ってしまい大混乱が引き起こされます。その混乱を防ぐためカーネルが間に入り割り当てを調整してくれます。パソコン内の交通整備をしてくれてるいます。

<img>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;  　　![インターネット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/836751/1cbc2a5e-e764-c495-3f6b-a301a199a6f9.png)

<b>※</b> カーネルとユーザーがやり取りを行うには<b>シェル</b>というプログラムを使います。

##シェル
シェルはカーネルとユーザーの中間役です。ユーザーからみてカーネルの周りをすっぽり覆っている「殻」(shell) のように見えることからシェルと呼ばれます。

<img>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/836751/1705d35a-5764-2d68-e890-770c1a7b4189.png)

④ 寝起きのOS (カーネル) に対し、容赦無く様々なアプリケーションからの要求が来ます。それらの要求は<b>システムコール</b>が間に入り行われます。

##システムコール
シェルがユーザーとカーネルとのやり取りの中間役なら、<b>システムコール</b>はアプリケーションとカーネルのやり取りの中間役になるアプリケーションプログラムです。*<b>API</b>* とも呼ばれます。

⑤ こうして様々なアプリケーションが働きパソコンを動かしています。OSによってパソコンは動く事が出来るようになりますが、そのOSも中で色々な働きをしているプログラムによって成り立っている事がわかりました。

OSってまだまだ奥が深いです............:laughing:

　
　
　

###参考にした記事
https://www.pc-master.jp/mainte/bios.html　
https://behind-memoirs.hatenablog.com/entry/2017/11/14/021856　
https://wa3.i-3-i.info/word15558.html　
http://www.tohoho-web.com/ex/shell.html　
http://www.cc.kyoto-su.ac.jp/~hirai/text/shell.html　
http://curtaincall.weblike.jp/portfolio-unix/api
第４回



# github共有

・git config &#x2013;global core.eitor emacs

・git pull origin main

・git add -A

・git commit -m 'hoge hoge'

・git push origin main


# qiita check

・gem install qiita\_org

・qiita config

・qiita config global access\_token YOUR\_TOKEN

・qiita post README.org private



------
 - **source** ~/grad_members_20f/members/Kazufumi0823/a.org
Huggingface datasets を使って オリジナルデータでNER

BERTも使うし、どうせ後でコードが散らかるよりはということで、
huggingface の datasetsライブラリを使ってみる
# とりあえず辞書から
```python
from datasets import Dataset, DatasetDict
tokens = [["I", "love", "you", "."], ["I", "hate", "you", "."]]
ner_tags = [[0, 1, 0, 0], [0, 1, 0, 0]] 
# [["O", "B-Aspect", "O", "O"], ["O", "B-Aspect", "O", "O"]]
train = Dataset.from_dict({"tokens": tokens, "ner_tags": ner_tags})
DatasetDict({"train":train})
```
一応これでDataset自体は整形できる
# 型情報追加
上のままだと、型情報を見てくれないので、型情報を追加する。

こうしておくと、transformers側で logitじゃなくてlabelを予測してくれるなどのメリットがあるほか、datasets に元から登録されている NER のデータセットのように共通して扱えるメリットがある。

手順は次のとおり
- datasets.Features を利用して、DatasetInfoを作る
- Datasetにinfoを渡す

```python
import datasets
ner_label_names = ["O", "B-Aspect", "I-Aspect"]
info = datasets.DatasetInfo(
                features=datasets.Features(
                    {
                        "tokens": datasets.Sequence(datasets.Value("string")),
                        "ner_tags": datasets.Sequence(
                            datasets.ClassLabel(names=ner_label_names)
                        ),
                    }
                )
)
train = Dataset.from_dict(
                {"tokens": tokens, "ner_tags": ner_tags}, info=info
            )
```
# 参考資料
- https://huggingface.co/docs/datasets/loading_datasets.html
- https://huggingface.co/docs/datasets/add_dataset.html

本当はDatasetBuilderっていうのを使うらしいけど、使い方がよくわからない...
Kubernetes v1.20のDockershim非推奨 よくある質問FAQ

Kubernetes v1.20 において、Dockershim非推奨がかなり話題になっているので、
2020年12月02日(水)の 公式ブログを読み、和訳しました。
間違いなどありましたら、コメントでご指摘ください。


## なぜdockershimが非推奨になるのか？

結論から言えば、dockershimを維持することは、Kubernetesにとって、あまり嬉しいことじゃないのです。
これはなぜかというと、DockerとKubernetesでコンテナランタイムがサポートしているAPIの規格がことなるからです。
Kubernetesがコンテナランタイムと連携する際にCRI標準というAPI規格を用いていますが、Docker自体は現在CRIを実装していないため、問題が起きています。

そもそも、Dockershimは常に一時的な解決策を意図していました。それゆえにshimという名前がついています。
さらに、cgroups v2やNamespaceなど、dockershimとは大部分互換性がなかった機能が、新しいCRIランタイムに実装されています。dockershimのサポートの継続のためにこれらのAPIを利用できないということになってしまっています。

これらの問題から、コミュニティでは、dockershimのサポートを継続しないという結論に至ったのです。

## Kubernetes 1.20でもDockerは使えますか？
使えます。1.20で変わったことは、ランタイムとしてDockerを使用している場合、kubeletの起動時に警告ログが1つ表示されることだけです。

## dockershimはいつ削除されますか？

早くても、2021年後半の1.23になる予定らしいです。

## 既存のDockerイメージは今まで通り使えますか？
はい、docker buildから生成されたイメージはすべてのCRI実装で動作します。既存のイメージはすべてまったく同じように動作します。

## プライベートなイメージは今まで通り使えますか？
はい。すべてのCRIランタイムは、Kubernetesで使用されているのと同じプルシークレット設定を、PodSpecまたはServiceAccountを介してサポートしています。

## 現在、本番環境で他のランタイムを使っている例はありますか？

kindプロジェクトでは以前からcontainerdを使用しており、ユースケースの安定性が向上しています。kind と containerd は、Kubernetes コードベースへの変更を検証するために毎日活用されています。
また、OpenShift 4.xでは2019年6月からCRI-Oランタイムを本番で使用しています。

その他の例についても、containerdとcri-oの採用者を下記のページから見ることができます。

https://github.com/containerd/containerd/blob/master/ADOPTERS.md
https://github.com/cri-o/cri-o/blob/master/ADOPTERS.md

## 人々は常に OCI を参照していますが、それは何ですか？

OCIはコンテナツールとテクノロジー間のインターフェースの多くを標準化したものです。
OCIイメージ仕様(コンテナイメージをパッケージングするための標準仕様)とOCIランタイム仕様(コンテナを実行するための標準仕様)を維持します。

## どのCRIの実装を使えばいいのでしょうか？
Dockerを使用している場合には、コンテナに移行するのは比較的簡単です。
しかし、あなたの環境に適したものがある場合に備えて、CNCFのすべてのオプションを検討することをお勧めします。
これは、複雑な質問です。

## CRI の実装を変更する際に注意すべき点は？
基本的なコンテナ化コードはDockerとほとんどのCRIで同じですが、周辺にはいくつかの違いがあります。移行時に考慮すべき一般的なことは以下の通りです。

- 設定のロギング
- ランタイムリソースの制限
- ノードプロビジョニングスクリプト
- docker CLI またはKubectl プラグイン
- Dockerへの直接アクセスが必要なKubernetesツール（例：kube-imagepuller
- レジストリミラー、安全でないレジストリのようなレジストリの設定
- dockerを利用するKubernetesの外で実行される他のサポートスクリプトやデーモン (監視やセキュリティエージェントなど)
- GPUや特殊なハードウェアと、それらがランタイムやKubernetesとどのように統合されているか
- dockerd の設定をカスタマイズしている場合、可能な限り新しいコンテナランタイムに適応させる。(Kubernetes のリソース要求/制限やファイルベースのログ収集 DaemonSets を使用している場合は問題なく機能する。)

ただし、システムメンテナンスのために実行するものと、イメージを構築するときにコンテナ内に入れ子になっているものは動作しません。
前者については、crictlツールを使うことができます。
後者については、Dockerを必要としないimg, buildah, kanikoなどの新しいコンテナビルドオプション利用してください。



## 参考
https://kubernetes.io/blog/2020/12/02/dont-panic-kubernetes-and-docker/
https://kubernetes.io/blog/2020/12/02/dockershim-faq/
https://github.com/kubernetes/enhancements/tree/master/keps/sig-node/1985-remove-dockershim
メテオフォール型開発がクリスマスまでに彼女を作る方法を砕く様を考えてみる

[アジャイルを使ってクリスマスまでに彼女を作る方法を考えてみる](https://qiita.com/Let_kdm_free/items/7287325f4a3541e4551e) が理想的にすぎるように思えたのでメテオフォール型開発に基づく破綻が起こらないよう検証しておきたいと考えた。


## メテオフォール恋活・婚活の流れ（アジェンダ）とは


0. アジャイルの各役割（ロール）説明
1. プロダクト・ビジョン（Product Vision）
2. プロダクト・ロードマップ（Product Roadmap）
3. プロダクト・バックログ（Product Backlog）
4. スプリント計画（Sprint Planinng）
5. スプリント（Sprint）
6. デイリー・スクラム（Daily Scrum）
7. スプリント・レビュー（Sprint Review）
8. スプリント・レトロスペクティブ（Sprint Retorspective）


→すべてを破壊するメテオフォール。詳細は [メテオフォール型開発とは](https://eiki.hatenablog.jp/entry/meteo_fall) 参照のこと

## アジャイル型恋活・婚活が破綻する可能性

スクラムマスター「母」への大きな依存がリリース直前に明らかになることでこれは重大な要件未達ではとの意見がステークホルダー「恋人」から噴出する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/825f3ee2-b188-05f3-cb24-1886a45f759e.png)

などなど

## なぜこのような恐ろしいことが起こるのか
メテオフォール型開発は基本的には[ウォーターフォール型開発](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%BB%E3%83%A2%E3%83%87%E3%83%AB)と同じだが、「神」が存在し、気まぐれに「メテオ」を落として要件定義や基本設計、詳細設計、実装をぶち壊していく点が異なる。つまりアジャイル型恋活・婚活に置いては不確定要素の高い「恋人」それ自体が「神」となり設計を揺らがせる危険があると考えられる。


## どうすれば回避できるのか

[【vsメテオフォール】エンジニアらしく組織を変える為のプログラミング・マネジメント](https://qiita.com/0w0/items/49357b3ff91135893624) が詳しい。


###「プログラミング原則」でプロダクトオーナーの問題を炙り出しておこう

- 母や友人、兄弟という各役職が自身の「役割」から逸脱した行動を取らないか → 「[単一責任の原則](https://note.com/erukiti/n/n67b323d1f7c5)」
- 同じく母や友人、兄弟という各役職の意思決定が他層の情報に強く依存しないか → 「[依存性逆転の法則](https://ja.wikipedia.org/wiki/%E4%BE%9D%E5%AD%98%E6%80%A7%E9%80%86%E8%BB%A2%E3%81%AE%E5%8E%9F%E5%89%87)」や「モジュール結合度」
- 父・母という経営層がマネージャーの頭を跨いでしまっている → 「[デメテルの法則](https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%A1%E3%83%86%E3%83%AB%E3%81%AE%E6%B3%95%E5%89%87)」etc...
- あるいは「役職の責務」がボヤけてしまっている点。本人の、他への依存度が強すぎる点に根本的な原因が無いか。このあたりに焦点を絞り、「プログラミング的手法」を通じて依存度をリファクタリングしていくとよい。


## 参考

[メテオフォール型開発とは](https://eiki.hatenablog.jp/entry/meteo_fall)
[「神様が来て全てを壊した」　繰り返される仕様変更、本当にあったAIプロジェクトの怖い話](https://www.itmedia.co.jp/news/articles/1903/20/news092.html)
[Rails6.0]〇〇.js.erb内でjQueryを使う

#前提
* webpackを使用している
* application.jsに紐付けているファイル（`require(〇〇);`）は問題なく、動作する
* `remote: true`でフォームからコントローラーにHTTPリクエストを投げると、` Uncaught ReferenceError: $ is not defined`とエラーが出る


# 結論
結論から言うと,
以下のコードを追加する。

```JavaScript/packs/application.js

// 省略
require("../new")
require("../pulldown")
require("../flash")

// ここから
window.$ = jQuery;
// ここまで追加
```
これで`$("#hoge").html("<%= j(render "Fuga") %>");`のように〇〇.js.erbでjQueryが使えるようになる。


# remote: trueを使ったAjaxの流れ

1. 【view】フォームからHTTPリクエストを送る。`form_with`のオプションは`remote: true`を選択
2. 【routes】HTTPリクエストを元にコントローラーとアクションを決める
3. 【controller】アクション内の動作を行う。ここでjs形式でデータを返す
4. 【controller】`アクション名.js.erb`を`views/コントローラー名`から指定する
5. 【view】指定された`アクション名.js.erb`が動作を行う
MEOについて

#MEOについて

MEOとは『Map Engine Optimization（検索マップ最適化）』の頭文字の略称で、Google検索エンジンやGoogle Map内の検索において、対象のGoogleマイビジネスを上位に表示させる対策のことです。

■MEOとは？
MEOとは『Map Engine Optimization（検索マップ最適化）』の頭文字の略称で、Google検索で「地域名＋キーワード」で検索された際、検索結果の上部にGoogleマップが表示されますが、その表示されたGoogleマップ内で上位に表示させる対策のことを指します。

■MEOが注目される背景
現在、Googleで「地域名＋キーワード」で検索した際、検索結果の上部にはGoogleマップが表示されます。自然検索結果よりも上部に表示されるため、ローカルビジネスを展開する企業にとっては、SEO対策よりも集客の効果が高いと考えられます。

※Googleマップが表示される条件（スマートフォンで閲覧した場合）
└　Googleにログインをしていない場合
検索結果の最上部に表示される
　　→Googleマップ　/　自然検索結果　/　リスティング広告　/　の順で表示される

└　Googleログインしている場合
自然検索よりも上部に表示される（最上部にはリスティング広告が表示される）
　　　→リスティング広告　/　Googleマップ　/　自然検索結果　/　　の順で表示される

※パソコンの検索結果でもスマートフォンの検索結果でも自然検索結果よりも優位な場所にGoogleマップは表示されます。

#■Googleマップの掲載順を決める要素とは
Googleマップの掲載順位については、以下のような公式発表が出ています。

ローカル検索結果では、主に関連性、距離、知名度などの要素を組み合わせて最適な検索結果が表示されます。たとえば、遠い場所にあるビジネスでも、Google のアルゴリズムに基づいて、近くのビジネスより検索内容に合致していると判断された場合は、上位に表示される場合があります。

関連性
関連性とは、検索語句とローカル ビジネス プロフィールが合致する度合いを指します。充実したビジネス情報を掲載すると、ビジネスについてのより的確な情報が提供されるため、プロフィールと検索語句との関連性を高めることができます。

距離
距離とは、検索語句で指定された場所から検索結果のビジネス所在地までの距離を指します。検索語句で場所が指定されていない場合は、検索しているユーザーの現在地情報に基づいて距離が計算されます。

知名度
知名度とは、ビジネスがどれだけ広く知られているかを指します。ビジネスによっては、オフラインでの知名度の方が高いことがありますが、ローカル検索結果のランキングにはこうした情報が加味されます。たとえば、有名な博物館、ランドマークとなるホテル、有名なブランド名を持つお店などは、ローカル検索結果で上位に表示されやすくなります。
ビジネスについてのウェブ上の情報（リンク、記事、店舗一覧など）も知名度に影響します。Google でのクチコミ数とスコアも、ローカル検索結果のランキングに影響します。クチコミ数が多く評価の高いビジネスは、ランキングが高くなります。ウェブ検索結果での掲載順位も考慮に入れられるため、検索エンジン最適化（SEO）の手法も適用できます。


上記の「関連性」「距離」「知名度」を噛み砕くと以下のようになります。

Googleが発表している内容で注目するべき内容は以下になります。
■関連性
・検索語句とローカル ビジネス プロフィールが合致する度合い
・充実したビジネス情報を掲載する
これにより、店舗の情報をより詳しく掲載するほどGoogleマップの掲載順位が上がる可能性があります。
※詳しく掲載するためには、Googleマイビジネスに登録する必要があります。


■距離
・検索語句で指定された場所から検索結果のビジネス所在地までの距離
Googleは検索しているユーザーの場所を把握して、検索場所から近い距離にあるサービスを上位に掲載する傾向があります。


■知名度
・ビジネスがどれだけ広く知られているか
・オフラインでの知名度の方が高いことがありますが、検索結果にはこうした情報が加味されます
・ビジネスについてのウェブ上の情報（リンク、記事、店舗一覧など）も知名度に影響します
・Googleでのクチコミ数とスコアも、ローカル検索結果の掲載順位に影響します
Googleでは、世の中でローカルビジネスがどれだけ話題になっているかなどの知名度が、Googleマップの掲載順位に影響を与えている可能性があります。
知名度とは「Web上でローカルサービスの情報がどれだけ話題になっているか？」ということです。

#■MEO対策としてのサイテーション
【サイテーションとは】
ビジネス名、店舗名、住所、電話番号やサイト名などがWeb上（Webサイト、SNSなど）に掲載される行為のことを指します
Googleでは、Web上に掲載された情報も収集して、どれだけ掲載されているサービスが世の中から支持されているかを評価しています。

■MEO対策としてのサイテーション
Googleマイビジネスに登録した情報と検索された検索結果が正確に一致することが重要になります。
Googleマイビジネスにサービス名や店舗名を掲載する際には、半角、全角などの違いで評価が変わる可能性があるため、半角、全角どちらの検索結果が多いかなどにも気を付けて掲載させます。
また、Web上により多く、「ビジネス名、店舗名、住所、電話番号やサイト名など」が掲載されることが重要となるため、SNSで情報発信する際にサービスや店舗名の認知度を向上させるため、より多くの情報を正確に掲載させより多くWeb上に拡散させることが重要になります。

また、Googleマイビジネスに登録する情報は、企業のコーポレートサイトに掲載されている情報と完全に一致していることが望ましいといわれております。
海外版アプリの気にしたいこと4選

# はじめに
最近ではアプリの海外展開が当たり前のように行なわれるようになりました。
ただ、海外版アプリのQA方法はまだ検討段階のところが多いとは思います。

今回は私自身この海外版アプリのQAを体験して、個人的に気にしたいところを
**4つ**選んできました！
少しでも参考になれば幸いです。


<留意事項>
弊社では、海外版アプリのQAを以下の2種類に分類しており、ここでは機能QAについてお伝えします。

【機能QA】・・・　国内との機能差分等、動作的な確認
【LQA】・・・　言語、翻訳周りの確認

# 1. 「課金」
一番重要と言っても過言ではないと思うので、気にしない方難しいですが、課金は特に気をつけましょう。
　**・VPNを使っての通貨表示**
　　└　少なくともリリースする国で使われる通貨の種類毎に確認するべきです。文字化け、表示崩れが発見されやすいです
　**・実際の購入疎通確認**
　　└　購入できることもそうですが、購入処理がバックエンドで正常に処理されているかも重要です

他にも、未成年や成年の年齢判定や課金上限、各国の規約(GDPR等)でそれぞれ動作に差分がでるものは注意しましょう。

# 2. 「文字」
文字にも注意が必要です。
言語によっては、文字化け、文字の非表示、表示崩れが発生しやすいです。
確認方法については、使用する文言すべてを表示させるような仮データを作成してもらうのが効率的かもしれません。

さらに注意点としては、不具合修正時に影響範囲が広くなり、**テストの再実施**が必要になる可能性があることです。
例えば、「G」という文字が出ない時、アプリで使用しているベースのフォント自体を変更することになり
この変更によって確認済みの箇所にも影響を及ぼし、

　不具合発見 → フォント修正 → 再確認 → 不具合発見 → フォント修正 → ...

のような連鎖にも陥る可能性があるからです。

また、画面によって使用するフォントが内部的に分けられている、ということもありますので
特殊な切り分けがされている箇所がないかは、エンジニアさんにヒアリングして進めるのが良いです。

# 3. 「ビルド方式」
ビルド方式についてはアプリ毎で様々で、私が経験したのは下記の2つとなり、
それぞれに検証時のメリット・デメリットがありました。
<table><th style="text-align: left">方式
<th style="text-align: left">メリット
<th style="text-align: left">デメリット
<tr><td style="text-align: left">1つのビルドで国や言語の切替ができる1ビルド方式
<td style="text-align: left">基本的に1つの確認で済むことが多く、工数が低い
<td style="text-align: left">同アプリが端末にインストールできない為、言語別に端末が必要
<tr><td style="text-align: left">リージョン毎にビルドが別れている複数ビルド方式
<td style="text-align: left">1端末に複数アプリを入れることができ、管理が容易
<td style="text-align: left">ビルド毎に異なった不具合が出ることがあるので工数が高くなる</table>

QA側で、たとえ表面的でもどのような方法をとっているのかを把握しておくことで
テスト方法の提案や、工数削減に繋がる場合があるので気にするのがいいかと思います。

# 4. 「時間」
国、地域によっては時差があります。イベントやログイン時間が変化するので
アプリのリリース前後それぞれで気にする点がありました。

#####4-1.リリース前
まず、時間が関わってくるものすべてテスト範囲と思うのが良いでしょう。
「**国内と違う時間**で開催される機能」はもちろんですが、「**国内と同じ時間**で開催される機能」についても
正しく動作しているかの確認は行うのがいいと思います。

また、端末でも時間が変更できるので、その設定時の挙動の確認や
サマータイムを考慮した検証も必要になってきます。


#####4-1.リリース後
個人的にリリース後は、日が経つほど「時間」についての注意する人が減少するとおもっています。
QA側で「時間」が関わるものを見たときは真っ先に気をつけたい点かなと思います。

例えば、イベントは全世界共通で日本時間をベースとしている状態で
新規イベントで1時間だけ報酬が多い時間を作った際に、
時差が多い地域ではこの恩恵を受けられず終了してしまう。
ということも起こる可能性があると思っています。

「海外はどうなりますか？」
この一言を言えるQAがいるだけで、全然違うと思います。

# 最後に
4つの事を挙げましたが、正直この他にもやることは多いです。
まだまだ、海外版のQAについては難しいことが多く、日々学び試行錯誤を繰り返しますが
これは開発者の方も同じかと思います。
QA⇔プロダクト双方で気にして話し合い一緒に作って、というのが理想の形だと思います。