OmniAICreator/Qiita-1.07M huggingface dataset:
【個人開発】DeepL×Google画像認識の和訳LINEアカウント「瞬間Deep和訳」をリリース！

個人開発したLINEアカウント「瞬間Deep和訳」をリリースしました。

世界一の翻訳AIのDeepLとGoogleの画像認識によるOCR和訳サービスを、日本No1メッセージアプリLINEを使って実現しました。

**※(2022年2月8日追記)多くの方のLGTMありがとうございます。スクショ画像が古いものだったので更新しました。LINE友達追加すれば無料でOCR和訳ができるサービスなので、ぜひご活用ください！**

**※(2022年2月12日追記)リリース後10日間の各種数値レポートを公開しました。**

https://qiita.com/Tyamamoto1007/items/2ebef0fb44f42a2ab34c

# 瞬間Deep和訳って？

「瞬間Deep和訳」は2022年2月2日に個人開発したLINEアカウントです。

LINEトークにスマホで撮影した写真を投稿すると、写真に写った英文をOCRして和訳した翻訳結果を返信するサービスになります。

下記のQRコードまたはリンクからLINEアプリで友達追加できます。
![](https://storage.googleapis.com/zenn-user-upload/04f7d07c86c7-20220205.png)
https://line.me/R/ti/p/%40546jpbvi

![20220208_deep_001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365005/3462c798-1784-d760-626c-5bd68e49d0ee.jpeg)


実際に使う方法はとても簡単で、「瞬間Deep和訳」のトーク画面に翻訳したい英文が写った写真を送れば、和訳結果を返信してくれます。

![20220208_deep_003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365005/a88e5990-689c-10e0-3aba-37fc5d718291.jpeg)
![20220208_deep_004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365005/5a63b42e-b92a-fdf6-61f1-54486ff4c555.jpeg)

簡単・スピーディかつ、高性能な翻訳結果をLINEで得ることができます。

# 個人開発の経緯

瞬間Deep和訳を開発してみようと思ったのは、DeepLに無料APIがあることを知ったのがきっかけです。

DeepLはその翻訳精度の高さから世界一とも言われ、英語→日本語の翻訳文がめちゃくちゃ読みやすいです。

これがあれば英語ページでも抵抗感なくアクセスできるため、私もGoogle翻訳から乗り換えました。

そんな超高性能なDeepLにAPIがあることを知り、APIを使って何か個人開発できなかいかなと思い、考えたのがLINEアカウントによる和訳サービスです。

# ターゲットはスマホユーザー

翻訳のニーズを考えたときに、**「日本人ってどういうときに翻訳サービス使うか？」** を考えました。

そもそもDeepLがWebサービスを提供しているので、ウェブアプリでは車輪の再発明です。

ウェブアプリはダメなので、パソコンがない場合に、翻訳したいシチュエーションを考えたところ、

「英語の書類や論文、洋書などの出版物を読んでいるとき」

が思い浮かびました。

こうしたケースで「スマホで写真撮影して、英文を読み取って和訳できたら便利だな」と考えました。

# スマホのOCR和訳アプリを調査

先程の利用シーンに対し、現状では以下の3つのスマホアプリが解決策としてありました。

* Google翻訳のスマホアプリ
* DeepL翻訳のスマホアプリ
* LINEアプリのOCRと翻訳

これらの和訳サービスを検証したところ、以下のことが分かりました。

* Google翻訳アプリはOCRの文字認識率は高いが、日本語が読みにくい
* DeepL翻訳はOCRの文字認識率が低いが、日本語が読みやすい
* LINEのOCR&翻訳は文字認識率は高いが、日本語が読みにくい

現状のところ、OCR性能と翻訳性能を両立したサービスは存在していないと判断しました。

# 競合サービスよりもちょっと良いがコンセプト

そうした調査を経て、LINEアカウント「瞬間Deep和訳」を開発しました。

「瞬間Deep和訳」は **「類似サービスよりちょっと良い」** がコンセプトです。

瞬間Deep和訳はGoogle Apps Scriptで開発しています。

1. GoogleのDriveAPIでOCR画像認識
2. DeepLのAPIで英語→日本語の和訳
3. フロントはLINEアカウント(Messaging API)

GoogleのDriveAPIのOCR画像認識は世界一の性能と言われています。

そこに世界一の翻訳性能と言われるDeepLをAPIで組み合わせることで、文字認識率と翻訳精度の両立を目指しました。

さらに、スマホアプリはインストールする必要があるので、ほぼすべての日本人が持っているLINEで使えるよう、LINE Messaging APIも利用しました。

これによって、世界一(OCR画像認識)×世界一(翻訳)×日本一(メッセージアプリ)を実現しています。

前述したすでに存在してい競合サービスよりも、どこか一箇所優れているメリットがある状態です。

実際に使用してみると、利用シーンとして考えた、洋書での検証では文字認識も100%かつ、自然な日本語訳が出力されています。

※写真に英語の写り切れがあると、それが残ってしまう場合があります。

ただ、3つの競合サービスで同じ写真を翻訳した場合よりも、翻訳結果は優れたものになっています。

# 終わりに

今回、個人開発したLINEアカウント「瞬間DeepL和訳」を紹介しました。

開発の経緯や開発に際して、検討したプロセスやサービスのコンセプトをまとめてみました。

DeepLのすごい翻訳性能をLINEで手軽に利用できます。

ぜひ、英語論文や洋書を読む機会が多い方は試してみてください。

QRコードまたはリンクからLINEアプリで友達追加できます↓
![](https://storage.googleapis.com/zenn-user-upload/04f7d07c86c7-20220205.png)
https://line.me/R/ti/p/%40546jpbvi

# 参考リンク

https://auto-worker.com/blog/?p=5075

https://qiita.com/Tyamamoto1007/items/2ebef0fb44f42a2ab34c
Docker composer のインストールでバージョンを固定する方法

# 概要

- DockerのPHPコンテナにcomposerをインストールする時のDockerfileの記載でcomposerのバージョンを固定する方法をメモ的にまとめる

# 方法

- 下記の様にPHPのDockerfileのcomposerインストール部分を記載することでcomposerのバージョンを2.2.4に固定する。

    ```Dockerfile
    # composerのインストール
    RUN php -r "readfile('https://getcomposer.org/installer');" > composer-setup.php && \
        php composer-setup.php --filename=composer --version=2.2.4 && \
        php -r "unlink('composer-setup.php');" && \
        mv composer /usr/local/bin/composer
    ```
laravel uuidの生成（uuid version4のみ）

# 概要

- laravelにてuuidを生成する方法をまとめる

# 方法

### Str::uuid()を用いる

- 下記のように記載することでuuidを生成することができる。

    ```php
    use Illuminate\Support\Str;

    $uuid = Str::uuid();
    ```

- ただ本方法だとuuid version4のみ使用可能である。
- 別バージョンのuuidを生成したい場合は下記の方法を取る必要がある以下も知れない。
    - [laravel PHP バージョンを指定してuuidを生成する](https://qiita.com/miriwo/items/0831eaeda66d0a3be7c5)

# 参考文献

- [https://laravel.com/docs/master/helpers#method-str-uuid](https://laravel.com/docs/master/helpers#method-str-uuid)

![Cursor_と_Helpers_-_Laravel_-_The_PHP_Framework_For_Web_Artisans.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/815d1846-39f8-caf8-e1c2-0da705ac7094.png)
laravel PHP バージョンを指定してuuidを生成する

# 概要

- uuid バージョン4の生成方法は下記で説明したが、その他のバージョンのuuidを取得する方法をまとめる
    - [laravel uuidの生成（uuid version4のみ）](https://qiita.com/miriwo/items/25d2331dff5549d2a834)
- 本方法でバージョン1〜6までのuuidの生成をする事ができる。

# 方法

- ramsey/uuidというcomposerのライブラリを取得して使用する。
    - [https://github.com/ramsey/uuid](https://github.com/ramsey/uuid)
- 下記コマンドを実行してramsey/uuidを取得する。

    ```terminal
    $ composer composer require ramsey/uuid
    ```

- 下記の様にuseを記載することですぐにuuidを生成する事ができる。（下記はuuid バージョン４を生成）

    ```php
    use Ramsey\Uuid\Uuid;

    $uuid4 = Uuid::uuid4();
    ```

- いろいろなバージョンのuuid生成方法は下記に記載されているのでご参考に！
    - [https://uuid.ramsey.dev/en/stable/quickstart.html#using-ramsey-uuid](https://uuid.ramsey.dev/en/stable/quickstart.html#using-ramsey-uuid)

    ![Cursor_と_はじめに—_ramsey___uuid安定版マニュアル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/92172d8a-94a9-b7da-b9d8-c44c011f21bb.png)


# 参考文献

- [https://github.com/ramsey/uuid](https://github.com/ramsey/uuid)
- [https://uuid.ramsey.dev/en/stable/](https://uuid.ramsey.dev/en/stable/)
- [https://ja.wikipedia.org/wiki/UUID#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B31](https://ja.wikipedia.org/wiki/UUID#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B31)
Vim -> Neovim + Copilotに移行した

# 背景
かなり前に申し込んでいた[GitHub Copilot](https://copilot.github.com/)ですが、そういえば最近ようやくinvitationが来てました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/0e074663-dbe9-14a8-dd3a-a728be3c98b7.png)

しかし！
スタートガイドがあるのは下記3つのエディタ

- [Visual Studio Code](https://code.visualstudio.com/)
- [JetBrains](https://www.jetbrains.com/)
- [Neovim](https://neovim.io/)

Vimがない。。。
ということでNeovimをインストールするところからはじめました。


# Neovimのインストール
Neovim は0.6以上とのことで
AppImage ("universal" Linux package)からインストールします

```shell
curl -LO https://github.com/neovim/neovim/releases/latest/download/nvim.appimage
chmod u+x nvim.appimage
sudo mv nvim.appimage /usr/local/bin/nvim #こちらはお好みで
```

そのままvimの.vimrcが動くのと思いきやPlug周りが動かないので
Neovim用にPlugだけ追加でインストールします

```shell
curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
```

因みに私のvimrc周りは [こちら](https://github.com/freddiefujiwara/dotfiles/tree/master/vimrc) に掲載してます

# Copilotのセットアップ
インストラクションに従って

```shell
git clone https://github.com/github/copilot.vim.git  ~/.config/nvim/pack/github/start/copilot.vim
```

```shell
$ nvim
```

して

```vim
:Copilot setup
```

でセットアップします


# ゴール

こんな感じでNeovim+Copilotの移行は完了しました
![ezgif-5-17ddecc9e5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/248bd395-baa7-45bf-a902-c90dec016cb0.gif)
TortoiseGitがWindows11のコンテキストメニュー(右クリックメニュー)に対応したみたい

Windowsを使用している方なら利用している方も多いかと思うTortoiseGitですが、最新版にアップデートしたらWindows11のコンテキストメニュー(右クリックメニュー)に対応したようで、下記のように一発アクセス可能になってました！

![tg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272546/49b51d9b-cd25-d12c-49da-c6c2dfc1b65f.png)

以前までも別に対応できていなかったわけではないのですが、以前までは `そのほかオプションを表示` を一度選択してから、さらに表示されたコンテキストメニューから選択という２段階の手順が必要でした。
意外と面倒だったんですよね。。。（旧コンテキストメニューに戻す方法もあったようですが。）

なので、TortoiseGitを利用している方は、ぜひ最新版へアップデートしてみると良いかと！

[TortoiseGit](https://tortoisegit.org/) とは？
エクスプローラからGitを操作できるアプリです。
コマンド操作も良いのですが、やはりエクスプローラから視覚的に編集状況が確認できるのは便利なので、愛用してます。
不要ファイルをGithubから消しつつローカルには残したい場合の手順

開発をしていてGithubにあげる必要がないけれどローカルに残しておきたいファイル群が存在する場合があります。自分はDocker環境で開発しているのでdocker-compose.ymlはローカルで必要だけれどGithubにはあげる必要がありません。

その場合はまず`$ echo "docker-compose.yml" >>.gitingore`のように.gitingoreに記述することが一般的です。
しかし、.gitingoreに記述し忘れてうっかりGithubにあげてしまった場合はどうしましょう。あげた後に.gitingoreに記述してもそれだけでは取り消せません。その場合は`git rm --cached ファイル名`を活用すると良さそう。

例えばファイル名がdocker-compose.ymlの場合、

1. `$ git rm --cached docker-compose.yml` 

1. `$ git add docker-compose.yml`

1. `$ git commit -m "DELETE docker-compose.yml"`

1. `$ git push origin master`　　これでローカルにはdocker-compose.ymlが残るけどGithubのものは消せたはず。
 
1. `$ echo "docker-compose.yml" >>.gitingore`　　最後に.gitingoreに書いておけば間違ってGithubにあげることも防げるので書いておいたほうが良い。


git rm --cachedで--cachedを忘れるとローカルのファイルも削除してしまうので慎重に。

自分用メモですが誰かの役に立てば。
ABC238-D AND-and-SUM

## 問題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2013882/e7c9b34d-eea0-1db4-9f85-fbcf6d38e234.png)

https://atcoder.jp/contests/abc238/tasks/abc238_d

## 提出コード
(テンプレート部分は、省略)

```cpp
void yesno(bool flag, string yes = "Yes", string no = "No")
{
    if (flag) {
        cout << yes << endl;
    } else {
        cout << no << endl;
    }
}

int main(){
    int T;
    cin >> T;
 
    rep(_, T)
    {
        ll a, s;
        cin >> a >> s;
 
        yesno(a <= s && (a & (s - a)) == a);
    }
}
```

## 考えたこと
入力例1.の１つ目
確かに$(x,y)=(3,5)$は$x$ AND $y=1, x+y=8$で条件を満たすけど、$(x,y)=(1,7)$でもOKじゃん
→ $3=11_{(2)}$の先頭の1を5=$101_{(2)}$

条件は、
- $x$ AND $y=a \cdots$(1)
- $x+y=s \cdots$(2)

まず、(2)より、$y=s-x$となるので、(1)は、
$x$ AND $(s-x)=a \cdots$(1)'

ここで、AND演算の結果が$a$になるということは、$x, (s-x)$はそれぞれ下位bitに$a$を持っていることが必要。
（例えば、$a=5=101_{(2)}$なら、$x=????101_{(2)}$, $s-x=???????101_{(2)}$のように表されることが必要。）
嘘でした。

問題は、$?$の部分だが、まず、$2$進数で表したとき、$a$の桁数より大きい部分を上位bitと呼ぶことにする。
例えば、$x=b$が条件を満たす、つまり、
$b$ AND $(s-b)==a$
とする。
このとき、$b$の上位bitの中の$1$を$s-b$の同じ位の方に移し$\cdots$(3)ても、条件を満たす。
[理由]
- まず、$b$と$s-b$の上位bitにおいて、同じ位に1が両方とも立っていることはない。(ANDが$a$にならないので。)
- (3)の操作によっても、$b$と$s-b$の和もANDも変化しない。
(例)
入力例1の1つ目、$a=1, s=8$のとき、
$x=3=11_{(2)}, y=5=101_{(2)}$は条件を満たすが、3の最高位の1を5の方に移してできる、
$x'=1=1_{(2)}, y'=7=111_{(2)}$もまた、条件を満たす。

よって、結局、(3)の操作を行い続けた結果である、$x=a$のとき、$a$と$s-a$が条件を満たすか否かが答えになるので、
$s-a≥0$のもとで、 $a$ AND $s-a==a$の真偽を答えれば良い。)
DeepLearningを始めた人に見てもらいたい動画

さてさて、ＡＩの勉強と並行して進めているのが、英語の勉強である。
最近、聞いている動画は下記の動画である。

ＧＡＮを発明したことで知られているイアングッドフェローさんの動画
とにかくAIで押さえておきたい単語がワンサカ。多少早口であるが、これぐらいのヒアリングが出来ないと、世界の一線では仕事はできません。（俺も生まれる時代が悪かった・・・）

https://www.youtube.com/watch?v=HGYYEUSm-0Q

AI革命のきっかけについて、この動画は見ておくべきでしょう。

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

![a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/6819589c-fde5-0be4-f761-2f5f24b2ca2d.jpeg)


#ＡＩリサーチャ

とにかく世界は広い、凄い人がワンサカいます。
日本人は一体、何人出てくるのでしょうかねえ・・・

https://www.aminer.org/

ALEXNETを発明された方

https://www.aminer.org/profile/alex-krizhevsky/53f433bfdabfaec22ba66fb5
PythonからCeVIO AIの外部連携インターフェイスを叩く

勉強がてらCeVIO AIの外部連携インターフェイスを叩くラッパーを作ってみました。
（`pip install sasawrapper`でインストールできます。）

https://github.com/takana-v/sasawrapper

https://takana-v.github.io/sasawrapper/

これを作った時の備忘録です。

## PythonでCOMコンポーネントを使う
https://cevio.jp/guide/cevio_ai/interface/com/

COMコンポーネントの形で公開されているのでこれを使用します。

PythonからCOMコンポーネントを使用するにはpywin32を使用します。
pipでインストールします。

https://github.com/mhammond/pywin32

```bash
pip install pywin32
```

## COMコンポーネントを読み込む
CeVIOの外部インターフェースのコンポーネントは2つあるのでそれぞれ読み込み、インスタンスを作成します。
service_controlは制御機能、talker2はトーク機能です。

```python
import win32com.client
service_control = win32com.client.Dispatch("CeVIO.Talk.RemoteService2.ServiceControl2V40")
talker2 = win32com.client.Dispatch("CeVIO.Talk.RemoteService2.Talker2V40")
```

## 実際に操作する
### 制御機能
#### CeVIO AIを起動する
```python
service_control.StartHost(False)
```
#### バージョンを確認する
```python
print(service_control.HostVersion)
```
```
8.1.34.0
```
#### CeVIO AIに終了を要求する
```python
service_control.CloseHost(0)
```

### トーク機能

#### 予めCeVIO AIを起動する
```python
service_control.StartHost(False)
```
#### キャストを確認する

```python
string_array = talker2.AvailableCasts
print([string_array.At(i) for i in range(string_array.Length)])
```
```python
['さとうささら']
```
#### キャストを設定する
```python
talker2.Cast = "さとうささら"
```
#### 音量を設定する
```python
talker2.Volume = 60
```
#### 感情を確認する
```python
component_array = talker2.Components
print([component_array.At(i).Name for i in range(component_array.Length)])
```
```python
['元気', '普通', '怒り', '哀しみ']
```
#### 感情を設定する
```python
component_array.ByName("元気").Value = 0
component_array.ByName("普通").Value = 0
component_array.ByName("怒り").Value = 50
component_array.ByName("哀しみ").Value = 50
```
#### 再生する
```python
text = "こんにちは"
talker2.Speak(text).Wait()
```
#### 音素のデータを取得する
```python
phoneme_data_array = talker2.GetPhonemes(text)
result = []
for i in range(phoneme_data_array.Length):
    phoneme_data = phoneme_data_array.At(i)
    result.append((phoneme_data.StartTime, phoneme_data.EndTime, phoneme_data.Phoneme))

print(result)
```
```python
[(0.0, 0.005, 'sil'), (0.005, 0.125, 'k'), (0.125, 0.20500000000000002, 'o'), (0.20500000000000002, 0.25, 'N'), (0.25, 0.34500000000000003, 'n'), (0.34500000000000003, 0.4, 'i'), (0.4, 0.51, 'ch'), (0.51, 0.5700000000000001, 'i'), (0.5700000000000001, 0.635, 'w'), (0.635, 0.78, 'a'), (0.78, 0.905, 'sil')]
```

### おまけ：sasawrapperを使って呼び出す
#### バージョンを確認する
```python
import sasawrapper
print(sasawrapper.get_cevioai_version())
```
```python
8.1.34.0
```
#### キャストの情報を確認する
```python
print(sasawrapper.get_cast_info())
```
```python
{'さとうささら': ['元気', '普通', '怒り', '哀しみ']}
```
#### 再生する
```python
sasawrapper.speak("こんにちは", volume=60, cast="さとうささら", emotion={"怒り":50,"哀しみ":50})
```
#### 音素のデータ(モノフォンラベル)を取得する
```python
print(sasawrapper.get_monophone_label("こんにちは", volume=60, cast="さとうささら", emotion={"怒り":50,"哀しみ":50}))
```
```
0 50000 sil
50000 1250000 k
1250000 2050000 o
2050000 2500000 N
2500000 3450000 n
3450000 4000000 i
4000000 5100000 ch
5100000 5700000 i
5700000 6350000 w
6350000 7800000 a
7800000 9050000 sil
```
composer インストール時にバージョンを指定する

- 2.2.4に固定したい時は下記

```
$ php -r "readfile('https://getcomposer.org/installer');" > composer-setup.php
$ php composer-setup.php --filename=composer --version=2.2.4
$ php -r "unlink('composer-setup.php');"
$ mv composer /usr/local/bin/composer
```

# 参考文献

- [https://getcomposer.org/download/](https://getcomposer.org/download/)

```
--version
You can install composer to a specific release by using the --version option and providing a target release. Example:

php composer-setup.php --version=1.0.0-alpha8
```
error: failed to push some refs to <リポジトリURL>

別リポジトリからcloneしてきて、ブランチ作成する際につまづいた時のmemoです。

こんな感じで別リポジトリからcloneしてきました。

```:Teminal
git clone <別リポジトリURL>
```

次にbranchを作成して、myリポジトリにpushしたところ、エラーが発生しました。

```:Teminal
git checkout -b develop main
error: failed to push some refs to <自分のリポジトリURL>
```

branchを調べてみると、作成した [develop]ブランチには[origin/main]がついていない。。。

```:Teminal
git branch -vv
* develop
* main [origin/main]
```
つまり、作成したbranchは別リポジトリをリモート先として作成しているため、push時にエラーが発生していると思われる。

調べたところ、branch作成時に自分のリポジトリをちゃんと指定してあげる必要があるみたいです。

```:Teminal
git checkout -b develop origin/main
```

もう一回branchを調べると...

```:Teminal
* develop [origin/main]
* main [origin/main]
```

これで自分のリポジトリにpushすればOK


```:Teminal
git push -u origin develop
```
Google Mapのマーカーを好きな画像にして角丸にする【1日10行コーディング】

## 概要

### 1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる...)

### 実装するもの

最終的に作りたいのは自分でピンを立てた店のアイコンとかを自由に変えられたり、カテゴリごとにアイコン変えたりとかするものが作りたいという気持ち。Google Map my place??とかいうのに近いというか多分おんなじようなのになると思う。

ただ、今日はその前の前の前の前段階くらいのマップのマーカーを変更するところをしたいと思います。

## 手順

### 1.マーカーの変更

下記のiconの部分で写真の設定をできます。

```js
const marker = new google.maps.Marker({
    position: uluru,
    map: map,
    icon: {
        url: 'niku.jpg',                      //アイコンのURL
        scaledSize: new google.maps.Size(40, 40) //サイズ
    }
});

```

![スクリーンショット 2022-02-06 9.19.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/11e7a29e-c0f3-f998-9851-603d6f301d7b.png)

### 2.マーカーを丸くしたい

まぁ画像自体を丸く加工しろよって意見もあると思うんですけど、写真の加工とかいちいちしたくないので...

Google Map　APIのスタイルではできないみたいで、いくつか文献を見てみたところマーカー自体にcssでスタイルを適応するやり方があるみたいでそれを試しました。

#### 1. 脳死でやってみた

ディベロッパーツールで見てみたらimg要素でアイコンが設定されてたので

```css
img{
    border-radius: 50%;
}
```

って書いてみた。
![スクリーンショット 2022-02-06 9.30.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/1849d661-1741-9d5c-bcdc-0fa52e6aecc7.png)

色々まるくなっちゃった...笑

#### 2. ちゃんとマーカーにセレクタを設定

じゃあ、セレクタちゃんと設定すればいいじゃんって思ったんだけど、簡単には行かないみたい...
https://stackoverflow.com/questions/22047466/how-to-add-css-class-to-a-googlemaps-marker
探ってみると、名前の一致とかでやってる人が多いみたい..(嘘だろ？？)
まぁ、別に自分はできればいいのでその方法を採用

#### 3. 独自の名前設定

さっきのマーカーロジックをちょっと修正

```js
const marker = new google.maps.Marker({
    position: uluru,
    map: map,
    className: "ssss",  
    icon: {
        url: './img/niku.jpg',//アイコンのURL
        scaledSize: new google.maps.Size(40, 40), //サイズ
    }
});

```

画像用にファイルパスを切って、定義する。

そしてCSSで下記のように定義

```css
img[src*="/img/"]{
    border-radius: 50%;
}
```

名前でファイルパスにimgがあるものに対してスタイルを適応するように修正。

![スクリーンショット 2022-02-06 9.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/297d25d5-b76d-739e-d210-4968d8a80dc0.png)

とりあえずやりたいことはできた。
けど、これここまで微妙な実装しなきゃいけないってことは画像自体を丸くするとかがいいんだろうなと思いました。
Kepler世代のグラボ向けにMMDetectionをビルドする

この記事では、古いグラフィックボードでMMDetectionを使う方法を紹介します。
MMCV, MMDetectionのビルドが必要でした。

# CUDAとPyTorchのインストール

[この記事](https://qiita.com/kyad/items/cd2deb0e2086d12e4bf3)の方法でインストールします。PyTorchはビルドが必要です。私はCUDA 11.3, PyTorch 1.10.2を入れました。

# なぜMMCV, MMDetectionのビルドが必要か
[公式のインストール手順](https://github.com/open-mmlab/mmdetection/blob/master/docs/en/get_started.md
)でインストールしてみます。

```
pip install openmim
mim install mmdet
```

[Verificationサンプル](https://mmdetection.readthedocs.io/en/latest/get_started.html#verification)を動かします。

```verification.py
from mmdet.apis import init_detector, inference_detector
config_file = 'configs/faster_rcnn/faster_rcnn_r50_fpn_1x_coco.py'
checkpoint_file = 'checkpoints/faster_rcnn_r50_fpn_1x_coco_20200130-047c8118.pth'
device = 'cuda:0'
model = init_detector(config_file, checkpoint_file, device=device)
inference_detector(model, 'demo/demo.jpg')
```

すると、このようなエラーが出てしまいます。

```
Traceback (most recent call last):
...
ImportError: libtorch_cuda_cu.so: cannot open shared object file: No such file or directory
```
[この記載](https://github.com/open-mmlab/mmdetection3d/issues/438)によると、MMCVもビルドする必要があるようです。


# MMCVのビルド
[公式の手順](https://mmcv.readthedocs.io/en/latest/get_started/build.html)に従ってビルドします。

```
git clone https://github.com/open-mmlab/mmcv
cd mmcv
git checkout v1.4.4
MMCV_WITH_OPS=1 pip install -e .
```

# MMDetectionのビルド
[公式の手順](https://mmdetection.readthedocs.io/en/latest/get_started.html#a-from-scratch-setup-script)に従ってビルドします。

```
git clone https://github.com/open-mmlab/mmdetection.git
cd mmdetection
git checkout v2.20.0
pip install -r requirements/build.txt
pip install -v -e .
```

# テスト

```
pip install openmim
mim download mmdet --config faster_rcnn_r50_fpn_1x_coco --dest checkpoints
python verification.py
```
私のGeForce 710では、メモリ不足のため動きませんでした。そこで、より軽量なモデルでテストしました。

```verification_ssd.py
config_file = 'configs/ssd/ssdlite_mobilenetv2_scratch_600e_coco.py'
checkpoint_file = 'checkpoints/ssdlite_mobilenetv2_scratch_600e_coco_20210629_110627-974d9307.pth'
device = 'cuda:0'
model = init_detector(config_file, checkpoint_file, device=device)
result = inference_detector(model, 'demo/demo.jpg')
print(result)
show_result_pyplot(model, 'demo/demo.jpg', result)
```
```
mim download mmdet --config ssdlite_mobilenetv2_scratch_600e_coco --dest checkpoints
python verification_ssd.py
```
フロントエンド初心者は何のテストを学習するの？①

## はじめに

TestについてJestやTesting Libraryを学習し始めましたが、テストって具体的に何をテストすれば良いのか…

調べた内容をアウトプットします。


## 【前提】本題に入る前に
テストの記事を調べてく中でaccessibilityとUsabilityに関するテストをする必要があるようです。

この2つはテストをするにあたって抽象的な項目だということを頭に入れておいてください。５W1HでいうWhyの部分です。


### accessibility
- ユーザーが使えるかどうかを基準にアプリケーションの挙動を確認する。
   - 例：情報を取得できない、操作ができないなど
- 受動的に起こる問題やエラー

### Usability

**accessibilityが確保されていることが前提**

- ユーザー視点での使いやすさ、わかりやすさなど

***

### 【本題】フロントエンド初心者は何のテストを学習するの？

accessibilityとUsabilityのどちらを優先してテストするのか。

私の意見では、**Usabilityに関するテストの学習を優先**して行う方が良いと考えます。(理由は次回以降の記事で書かせていただきます。)

具体的にaccessibilityとUsabilityにはどんなテストがあるのでしょうか。

### Usabilityテスト

| Usabilityテスト | 技術 |
| ------------- | ---  |
| ユニットテスト | Jest, Mocha, AVA, Jasmine, ... |
| 結合テスト | Jest, Testing Library, AVA, ... |
| E2Eテスト | Cypress, Puppeteer, ... |
| ビジュアルリグレッションテスト | Cypress, Percy, Applitools, ... |

### accessibilityテスト

| accessibilityテスト | 技術 |
| ------------- | ---  |
| アクセシビリティテスト | AccessLint, axe-core, Lighthouse, pa11y, ... |
| パフォーマンステスト | Lighthouse, PageSpeed, Insights, WebPageTest, YSlow, ... |

次回の記事で、Usabilityテストについて調べたことを書かせていただきます。

ご指摘、ご意見がありましたら是非おっしゃっていただけると助かります。

下記の記事を参考にしました。
記事投稿者の方、ありがとうございます。

***

参考にした記事
1:[フロントエンド(Next.js)のテストについてまとめる](https://qiita.com/suzu1997/items/e4ee2fc1f52fbf505481#%EF%B8%8Eprops%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88)
2:[フロントエンドのテストは皆のためのもの](https://postd.cc/frontend-testing-is-for-everyone/)
[アクセシビリティとユーザビリティ](https://weba11y.jp/basics/accessibility/usability/)
LINEトークの移行

iPhoneを変えたら、LINEトークの移行に一度失敗したっぽくて思い出が消滅するか焦りました。
しかし、バックアップをきちんと取っていたので、やりなおしをしたら、ほぼ問題なく移行できました。
備えあれば憂いなし。
https://guide.line.me/ja/signup-and-migration/talk-backup.html

上記は非常に役立つのですが、字が多いので、自分が実施した手順のスクリーンショットを貼ります。

-------------------------------------------------
![IMG_0013.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518192/c64098b7-caf4-b5ba-2f86-a21476f57486.png)
-------------------------------------------------
![IMG_0014.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518192/ce8ba9a6-a94e-3bf9-ab83-fae75e44eb69.png)
-------------------------------------------------
![IMG_0015.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518192/588568e8-fffc-aa3b-8eb4-026eb41e672b.png)
-------------------------------------------------
![IMG_0016.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518192/f9439a3d-dea8-8e93-224f-a306cb593ff4.png)
-------------------------------------------------
![IMG_0017.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518192/e3d90cd0-edae-a225-17e4-227ff8736087.png)
flutterのmarkNeedsBuildとは何か？

# markNeedsBuild「再構築、必要、マークつけとくから頼んだ🙋‍♂️」

Elementが「再構築(re**build**)が必要(**Needs**)になりました🙋‍♂️」とrebuildを希望します。

rebuildを希望するElementは自身にマーク(**mark**)をつける決まりになっています。
(ここからは再構築とrebuildはrebuildで統一して表現します)

![](https://storage.googleapis.com/zenn-user-upload/a9791ee4b64a-20220204.png)


解説していきます。

## マークとは具体的に何？
=> Elementが持つpropertyの**dirty**(bool)のことです
https://api.flutter.dev/flutter/widgets/Element-class.html#:~:text=read%2Donly-,dirty,-%E2%86%92%20bool



## dirtyとは？
=> Elementの持つpropertyで型はboolです。


要素が再構築が必要であるとマークされている場合はtrueを返します。(google翻訳)
https://api.flutter.dev/flutter/widgets/Element/dirty.html


雰囲気を実際のコードで伝えます

```dart
class Element {
    //...
    /// Returns true if the element has been marked as needing rebuilding.
    bool get dirty => _dirty;
    bool _dirty = true;
    //....
}
```

正確なコードはこちら
https://github.com/flutter/flutter/blob/57d522287686792964545692862ba3128b572b61/packages/flutter/lib/src/widgets/framework.dart#L4402




ここまでがmarkNeedsBuildの簡単な説明です。

------

# Q&A形式で理解を深める

ここからはmarkNeedsBuildが
flutterの他の機能とどのように関わり
何を実現するかなどをQ＆A形式で書いていきます



## rebuildは誰に要請するの？
=> [BuildOwnerクラス](https://api.flutter.dev/flutter/widgets/BuildOwner-class.html)です。

## BuildOwnerクラスとは何？
=> **Elementツリーを管理**するクラスです

## rebuildはBuildOwnerクラスのどこでされるの？
=> BuildOwnerの[buildScopeメソッド](https://api.flutter.dev/flutter/widgets/BuildOwner/buildScope.html)です

フレーム毎に呼ばれる[drawFrame](https://api.flutter.dev/flutter/widgets/WidgetsBinding/drawFrame.html)がbuildScopeを呼び出すようです。

## markNeedsBuildのメソッドの中身は？何をしているの？

=> dirtyをtrueにしBuildOwnerのクラスのscheduleBuildForメソッドを呼びます。引数は自身(Element)

### まずBuildOwnerのクラスのscheduleBuildForメソッドの説明をします

=> _dirtyElementsというprivateなpropertyに引数として渡されたElementを追加します
_dirtyElementsとはrebuild待ちElementリストのことです。


## （まとめます）markNeedsBuildのメソッドの中身は？何をしているの？
ElementのmarkNeedsBuildメソッドの処理の流れを見てみましょう

1,ElementクラスのmarkNeedsBuildメソッドは
BuildOwnerクラスのscheduleBuildForメソッドを呼び出します。
引数として自身(Element)を渡します。

2,呼び出されたBuildOwnerクラスのscheduleBuildForメソッドは渡されたElementを
rebuild待ちElementリストである_dirtyElementsプロパティに追加します。

少々複雑な説明になってしまったので
最低限必要な部分のみを切り出した簡単なコードを見てみましょう

#### Element
```dart
//色々と省略...
void markNeedsBuild() {
 //色々と省略...
 _dirty = true;  
 owner!.scheduleBuildFor(this); //1
}
```

#### BuildOwner
```dart
//色々と省略...
final List<Element> _dirtyElements = <Element>[];
void scheduleBuildFor(Element element) {
//色々と省略...
_dirtyElements.add(element); //2
}
```

### その_dirtyElementsはその後どのように使われるの？

=> フレーム毎に呼ばれる[WidgetBinding](https://api.flutter.dev/flutter/widgets/WidgetsBinding-mixin.html)の[drawFrame](https://api.flutter.dev/flutter/widgets/WidgetsBinding/drawFrame.html)がBuildOwnerの[buildScope](https://api.flutter.dev/flutter/widgets/BuildOwner/buildScope.html)を呼び出しrebuild待ちElementリストである_dirtyElementsを順に取り出しrebuildしていきます

### buildScopeのコードを見てみる（抜粋し4行にした）

```dart:framework.dart
for (final Element element in _dirtyElements) {
//...
 try {
        element.rebuild();
      } catch (e, stack) {
        // ...
      }
//...
}
```


気になる方はgithubで確認してみて下さい。


https://github.com/flutter/flutter/blob/fd8d035921574d69a789201f5f707f94971b6edc/packages/flutter/lib/src/widgets/framework.dart#L2759
iPhoneを変えて、契約プランを変えた

昨日、古いiPhone6SからiPhone8に変えました。

会社から支給されているiPhoneはiPhoneXですが、顔認証があまり好きではないので指紋認証ができる古い機種にしました。
無線技術と和解した(そして、平均の人よりは無線を使い倒している)ものの、なるべく携帯電話に電話をかけたくないという反発心は残るので、メルカリで中古を買いました。最新版というこだわりがなければ、メルカリで十分だし、仕様がわかっているのでバッテリー残高以外は不満はないです。

ちなみに、今までau回線を使っていて、1GBプランのようなミニマム契約で、当初はそんなに通信しないだろうと思っていたところ、スマートフォン生活を始めて数ヶ月後にドラクエウォークに出会い毎月の使用量が平均2GBくらいになったので、プラン変更もついでにしようと思ってauショップに予約をして相談してきました。
すると、既存のものでも1-5GB、5-7GBと料金が変わるだけで特に問題はないんですよと言われました。自分は1GBを超えると従量式で課金されているのだと思っていました。XGBまでは定額で、それ以降は課金レートが高くなるものだと思い込んでいました。
いろいろと話しているうちに、UQmobileにしたらどうですか?と言われました。
5GBまで使える、月額は安くなる、スピード感はそんなに変わらない、au家族割引が使えなくなる(けど、そんなに不利益はない)という説明だったので、これに乗り換えました。

携帯電話の料金体系はわかりにくいですが、説明を受けるとスムーズな感じがしました。
とはいえ、第三者システムの料金体系を聞くと勤務先のライセンス体系と同じような複雑さを感じて、料金体系を考案する人は偉いと思いました。

-

日常レベルでの計量というガリレオの習慣があると、こういう日常の判断もしやすいと改めて思いました。
ターミナル忘備録

| コマンド  |　略  | 使い方 |
|:-----------|:-----------|:------------|
| ls | list segments | 現在のパスのファイルたちを表示。|
| cd | change directory | ワーキングディレクトリを変更する |
|
| open | |Finderで開く|
| which || 
| where ||
| chmod | change mode||
|||
| ffmpeg | |https://qiita.com/cha84rakanal/items/e84fe4eb6fbe2ae13fd8|
なぜ我々はLabelboxに投資するのか：レイクハウスにおける非構造化データワークフローをスムーズに

[Why Databricks Ventures Invested in Labelbox: Streamline Unstructured Data Workflows in a Lakehouse \- The Databricks Blog](https://databricks.com/blog/2022/01/06/why-we-invested-in-labelbox-streamline-unstructured-data-workflows-in-a-lakehouse.html)の翻訳です。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

先月、DatabricksはデータとAIの力を結びつける次世代イノベーション、テクノロジーを促進するための戦略的投資機関である[Databrics Ventures](https://databricks.com/databricks-ventures)の創立を発表しました。我々は、レイクハウスによって支援されている、あるいはレイクハウスのエコシステムを拡張している初期段階、成長段階の企業をサポートするレイクハウスアーキテクチャの急激な普及に刺激され、このファンドを設立しました。我々はここでDatabricks Venturesの最初の投資を発表できることを嬉しく思います。Labelboxに対してです。

Labelboxは機械学習アプリケーションの先進的なトレーニングデータプラットフォームです。企業が自身で高価かつ不完全な内製ツールを作るのではなく、Labelboxは、データサイエンティストが分散しているアノテーションチームとコラボレーションするための司令センターとして動作するコラボレーティブトレーニングデータプラットフォームを開発しました。

[DatabricksとLabelbox](https://databricks.com/blog/2021/05/25/announcing-labelspark-the-labelbox-connector-on-databricks.html)は、共に非構造化データワークフローに対する理想的な環境を提供します。ユーザーはシンプルに非構造化データ(画像、動画、テキスト、地理情報など)をデータレイクから取り出し、Labelboxでアノテーションを行い、Databricksでデータサイエンスを実行します。

今年の初めに、[LabelboxはDatabricksコネクターをローンチ](https://databricks.com/blog/2021/05/25/announcing-labelspark-the-labelbox-connector-on-databricks.html)し、お客様は迅速に非構造化データから構造化データを生成し、Databricksのレイクハウスで非構造化データに対するAIをトレーニングできるようになりました。また、[LabelboxはDatabricks Partner Connectにおけるパートナー](https://labelbox.com/blog/announcing-labelbox-on-databricks-partner-connect/)にもなっており、これによって、お客様は容易にDatabricksとLabelboxのインテグレーションを実現できます。彼らと共に働き始めてから、我々はLabelboxチームと会社のモーメンタムに感銘を受けています。Labelboxへの投資は自然な次の一歩であり、非構造化データワークフローを管理する共通のお客様に対して、整理され、かつ強力な機能を提供するという共通のコミットメントを強固にするものです。Databricks Venturesは、Labelboxをサポートすることで、将来に渡って共により多くのお客様を支援できることを嬉しく思っています。

Databricksの[Labelboxコネクター](https://databricks.com/blog/2021/05/25/announcing-labelspark-the-labelbox-connector-on-databricks.html)をチェックしてみてください。

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
httpについて

自分用の学習メモです。

■httpとは？

・Hyper Text Transfer Protocol

・Hyper TextとはHTMLを指す

・httpとはhtmlファイルを転送するプロトコル（＝ルール）

・プロトコルとはルールの集まり

・http + (over SSL/TLS)　→ httpsとなる

・httpはOSI参照モデルの第7層（アプリケーション層）に該当する


■「http://example.com/」を例に解説

・本来は「http://example.com/(index.html)」だがindex.htmlは省略されている

・本来は「http://example.com(:80)/」だが:80というポート番号は省略されている
httpを使う時はポート番号80番を、httpsを使う時は443番を利用する決まり


■リクエストメソッド（GET、POST、PUT、DELETE）

・Webサイトを閲覧するときは基本的にGETメソッドを利用している
パラメータを指定することで特定の情報のみを取ってくる

・ログインフォームなどを利用するときはPOSTメソッドを用いる
IDやパスワードを送信するときはPOSTを使うことでURLに表示されてしまうのを防げる

・PUT、DELETEはリクエストに意味を持たせる
Chromebook 個人的設定メモ


**SQLクライアント**
[Beekeeper Studio]("https://chromebooker.net/departure/?url=https%3a%2f%2fwww.beekeeperstudio.io%2f")
filezilla
fcitx mozc [面倒]("https://okayu-moka.hatenablog.com/entry/2020/03/14/180000")
terminator
【Git】refspecを世界一かみくだいて説明する

<p>Push/Pullで実は必ず活用している、Gitにおける「refspec」の概念を紹介します。なおここでは、Gitのpush/pullについての解説はしません。</p>

<!-- wp:heading {"level":1} -->
<h1 id="refspecとは">refspecとは？</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>git pushをする場合を考えます。初学者さん向けの記事では、その構文は以下のように書かれていると思います。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">$ git push origin master
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>解説としては、「”origin”という名前で登録してあるGitHub上のリポジトリにmasterブランチをプッシュする」というかたちになるでしょうか。わたしも、新人さん向けにはそういう風に言うことが多いです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>が、ここではもう少し深掘りしてみたいと思います。４語目”master”の部分です。これは正確には<strong>refspec</strong>（多分reference specificationの略）と呼ばれるもので、「参照元と参照先との情報」を表しています。git pushの時には参照元＝ローカルブランチで、参照先＝リモートブランチです。git pullする際にはこの関係が逆になります。</p>
<!-- /wp:paragraph -->

上にあげたように”master”ひと単語で済ますのは、実はrefspecの省略記法で、...（以下詳細は[こちら](https://tubuyaki-tech.com/tubu-git-refspec/)で公開中です）
VisualStudioから接続文字列の取得

接続文字列、毎回どうやって書くんだっけとなるので備忘

サーバーエクスプローラー開いて、プロパティの接続文字列からコピーできる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687054/8caa9fd0-4135-6c05-2d1c-0376e1321fe6.png)

ConnectionStringsにそのまま貼り付ければ繋がる
AtCoder Beginner Contest 238 - D AND and SUM なんとなく解説

#はじめに

コンテスト時に発想した内容をメモしておこうと思います。結局解説と同じような話・・・のはず。もし嘘回答とかなら教えてください。

#コード
```:Python
T = int(input())

ret = []
for i in range(T):
    a, s = map(int, input().split())
    x = a
    y = s - a
    if y >= 0 and (x & y) == a:
        ret.append("Yes")
    else:
        ret.append("No")

print(*ret, sep="\n")
```

回答時は下記。ただ余計なコードが多いので、上記は整理したものになります。

https://atcoder.jp/contests/abc238/submissions/29094116



#整理

入力例1の一つ目のクエリについて考えます。

```
a=1
s=8
```

まず、ANDのほうに着目します。

```
a=1=0x0001　#変則2進数表記、後続の説明のため2進数を左からゼロ埋めしています
```

ということは
一番右のbitはxもyも1になるはずです。
一方、それ以外のbitはどちらかが1、もしくは0になるはずです。

もし上記の状態のビットを?と書くならば、x,yはそれぞれ下記の通りになります。

```
x=0x???1 y=0x???1

#?の条件を満たす組み合わせの例、ただし問題全体の条件を満たすものとは限らない
x=0x0101 y=0x0001
x=0x1101 y=0x0011
x=0x1001 y=0x0001
x=0x0001 y=0x1011
```


さて、xとyにおいてある桁の?の中身が両方0もしくはどちらかが1なわけですが、
どちらに1が立っていたとしてもx+yは変わりません。

であれば、xの?は0に決めてしまって、yだけに?を残すようにしましょう。すなわち、

```
x=0x0001 y=0x???1
```

こうすると、x=aになります。


この情報を用いて、sとaの条件を満たすか確認していきましょう。

```
s=x+y => y=s-x
```

となるので、x=aを代入すると

```
y=s-a
```

になります。この時点でこのxとyはsの条件を満たします。
ただし、yがマイナスにならないようにチェックが必要になります。

次に、aの条件を満たすか確認しましょう。具体的には、

```
x & y = a & (s-a)
```

これがaと一致するか否かチェックしてあげればOKです。

# メモ
Pythonの&とANDは違う
【Django】UNIQUE constraint failed. のエラーが出たときの原因 

# Djangoで UNIQUE constraint failed エラーが出たときの原因

カスタムユーザモデルのemailフィールドの`unique=True`にした後、
`migrate`しようとすると↓のエラーが

```
django.db.utils.IntegrityError: UNIQUE constraint failed: new__users_customuser.email
```

## 解決方法

いったんrunserverして、User DBを確認
→emailがすでに重複しているユーザがあったため、1ユーザだけ残してあとは削除
→解決

## 原因

まれなケースかもしれませんが、
unique=True に変更する前に同じemailでユーザ登録を行ってしまっていたために出たエラーでした

## おわり

UNIQUE contraint failed のエラーが出たとき、
unique=Trueにする前に、DBの中にすでに重複したレコードを登録してしまっていないか確認してみてください
adobe ExtendScriptの個人用TIPS

## 外部ライブラリを取り込む
外部ライブラリによく使う関数とかを詰めておくと良い。

```javascript
//@include "functions.jsx"
```
## コンソール出力関数をわかりやすく
これでd(hogehoge)でコンソール出力が出来る。

```javascript
function d(obj) {
    $.writeln(obj);
}
```


## 配列の合間を詰める。
例えばarray[10] = "test" とかをすれば、配列の0から9まで空の配列が出来る。それを埋めて詰める。

検索すると.filterが使えれば早いらしいのだけれど、無理。for(...on...)を使うと何か逆順になる。ということで、lengthを使って配列数の最大値が取れるのを利用し、undefinedなら飛ばし、間を詰める関数を作った。

```javascript
function array_close_gap(array) {
    var result = [];
    var j = 0;
    for (i = 0; i < array.length; i++) {
        if (array[i] === undefined) continue;
        result[j] = array[i];
        j++;
    }
    return result;
}
```
2022/2/6主にITとかセキュリティの記事

将棋動画配信サービスで不具合、個人情報が流出
https://www.security-next.com/133826

秋葉山公園県民水泳場がエモテットに感染、利用者らにメール攻撃の可能性(2/4)
https://cybersecurity-jp.com/news/63256

オンライン決済の需要拡大が生体認証の利用浸透に大きく影響、日立調査(2/4)
https://s.netsecurity.ne.jp/article/2022/02/04/47082.html

「みんなやってる」許さない　著作権侵害、狭まる包囲網―官民連携、摘発相次ぐ(2/4)
https://www.jiji.com/sp/article?k=2022020300920&g=soc

「漫画天国」運営者が書類送検--海賊版サイトに誘導する「リーチサイト」を運営(2/3)
https://japan.cnet.com/article/35183050/

UPnPの脆弱性悪用してルータのNAT侵害するEternal Silence攻撃に注意(2/2)
https://news.mynavi.jp/techplus/article/20220202-2262862/

AirTagでストーカー行為をしようとした男が逮捕〜米コネチカット州(2/3)
https://iphone-mania.jp/news-436038/

暗号資産（仮想通貨）取引所アプリのおすすめ5選｜選び方やメリットを説明(2/4)
https://www.kobe-np.co.jp/media-money/archives/59

プレゼンテーションに欠かせない「Googleスライド」を活用する(2/4)
https://news.mynavi.jp/techplus/article/google_workspace-27/

米国土安全保障省、過去のサイバー事件から学ぶ「サイバー安全審査委員会」を設置(2/4)
https://jp.techcrunch.com/2022/02/04/2022-02-03-homeland-security-cyber-safety-review-board/

好調続くアマゾンのクラウド「AWS」、四半期2兆円の売上(2/4)
https://forbesjapan.com/articles/detail/45696

プロ野球×NFTで何が変わる？　メルカリはWeb3時代を見据え参画(2/4)
https://xtrend.nikkei.com/atcl/contents/casestudy/00012/00809/?i_cid=nbpnxr_right_ranking_y

Teamsの使い方を解説! 基本から共有フォルダーの活用方法について(2/4)
https://news.mynavi.jp/article/20220204-2258636/

日本企業の脆弱性管理に苦言を呈するテナブル日本代表の危機感とは(2/4)
https://japan.zdnet.com/article/35183071/

韓国当局、Appleのサードパーティー決済案は詳細に欠けると指摘(2/4)
https://iphone-mania.jp/news-436120/

Windows 11ミニTips
フォントサイズの変更でアイコン間隔が広がった？(2/4)
https://news.mynavi.jp/article/win11tips-42/

パソコン操作中に「ウイルスに感染している」　北九州市小倉北区でサポート詐欺か　高齢男性が電子マネー利用権だまし取られる(2/3)
https://www.nishinippon.co.jp/sp/item/n/871658/

情報セキュリティ・セミナー開催のお知らせ(2/22開催)
https://www.imes.boj.or.jp/jp/conference/citecs/22sec_semi01.html

スパイウェア「Pegasus」と同様のiPhone向けゼロクリックエクスプロイトが別のイスラエル企業にも使われていた(2/4)
https://gigazine.net/news/20220204-iphone-zero-click-exploit-quadream/

政府が、情報管理責任者に解任命令を出す未来が来る？(2/4)
https://www.orangeitems.com/entry/2022/02/04/004428

64ビット版「Raspberry Pi OS」、正式リリース(2/4)
https://japan.zdnet.com/article/35183080/

GPU製造時のバラツキ使い個人を追跡する技術　コーネル大の研究(2/4)
https://www.zaikei.co.jp/article/20220204/658908.html

インテル、バグ報奨金プログラム拡大--"エリート"ハッカーのグループによる脆弱性発見を強化へ(2/4)
https://japan.zdnet.com/article/35183088/

すべてのWin32アプリにWindows 11の「マイカ」効果を強制適用する「Mica for Everyone」(2/4)
https://forest.watch.impress.co.jp/docs/serial/win11must/1385918.html

警察庁、「仮想通貨を採掘するツールに関する注意喚起」削除(2/3)
https://news.biglobe.ne.jp/it/0203/imn_220203_0257935705.html

国内企業で進みつつある「Branch of One」、5G普及で加速の可能性も――IDC調べ(2/4)
https://www.itmedia.co.jp/enterprise/spv/2202/04/news054.html

総務省のIT規制強化案、新経連が反発意見(2/3)
https://www.nikkei.com/article/DGXZQOUC0396W0T00C22A2000000/

サポート終了、知らずに使い続けると危ないMicrosoft製品主要リスト（2021年／2022年版）(2/4)
https://atmarkit.itmedia.co.jp/ait/spv/2202/04/news017.html

【米国】SNSは詐欺師にとって金鉱　被害額、4年で18倍(2/4)
https://www.jc-press.com/?p=7834
【React】.envで定義した環境変数がundefinedになった場合の対応方法

# 概要

`React`の学習の一環で外部APIを利用するための`APIキー`を`.env`で管理することにした

いざ、`process.env.環境変数のキー名`で読み込むと`undefined`が戻ってきた場合の対応方法をまとめる

## 参考資料

https://stackoverflow.com/questions/53237293/react-evironment-variables-env-return-undefined

# 環境変数の定義

- `REACT_APP_xxxx` としないと認識してくれないので注意
- .envは `package.json`と同階層に作成すること

```env:.env
REACT_APP_DEMO_API_KEY=xxxxhoge
```

# 環境変数の呼び出し

```tsx:App.tsx
`/hoge?api_key=${process.env.DEMO_API_KEY}`
```

# サーバーの再起動

```bash
yarn start
```

ここまでの手順を踏めば環境変数の値を取得することができます


# さいごに
いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！
TP-Link TX401のドライバを入れたい

# TL;DR
TP-Link TX401をubuntu 20.04 LTSに入れたいときにかなり悩んだのでメモ。
AQtionのAQC107 10GbEをUbuntu 18以上で使うときはgitから最新版を持ってこよう。

多分AQtion AQC107を使う他のNIC、2022/2現在だと

- LR-LINK LREC6880BT
- IO-DATA ET10G-PCIEB
- Buffalo LGY-PCIE-MG2
- (Aquantia AQR105だけど)StarTech.com ST10GSPEXNBも？

あたりにも適用できると思います。

# 環境
Ubuntu 20.04 LTS
i9-10980XE

# 手順

[公式ページ](https://www.tp-link.com/jp/home-networking/usb-converter/tx401/)からダウンロードできるドライバではmakeも.debビルドしてからのインストールも通りません。

よって、githubに公開されているAQtionのリポジトリから最新版を取って来て、makeからインストールします。(2022/2現在はdebでは通らない)

```
git clone https://github.com/Aquantia/AQtion
cd AQtion
sudo apt install  linux-headers-$(uname -r)  build-essential
make
sudo rmmod atlantic #古いversionが存在する場合
sudo make load
sudo make install
```

以降確認

```
sudo dmesg | grep -i atlantic
ip addr show #デバイス名を確認、以降ethXとする
ip addr add <IP_address> dev ethX #ipアドレス設定
ethtool -i ethX
```

# ついでに
AQtion AQC107は不安定さが[指摘](https://reviewdays.com/archives/64360)されているようです。
半導体不足が叫ばれる中だとかなり高額ですが、intelのX550-T1を購入することをお勧めします。(これはかなり簡単にドライバが入ったはずです。)
AtCoder Beginner Contest 238  D - AND and SUM の解説をもう少し噛みくだいてみた

# 問題
![スクリーンショット 2022-02-06 2.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/57eee0b0-3eca-54d5-6504-8b7f58dcf9b1.png)

---
# ユーザ解説

解説があること自体がありがたいです、ありがとうございます。
![スクリーンショット 2022-02-06 2.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/5f05e0a7-abcc-268d-b8c3-b35b04495bab.png)

---
# 噛みくだき
![Image from iOS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/45f2f42d-c33b-d6b5-c4ee-e8052d5b0940.jpeg)

---
# ここがポイント
・x+yを論理演算（半加算器）に分解する
・繰り上がり桁、繰り上がらない桁のうち、 繰り上がらない桁に着目
・問題の条件から判定式を求める

---
分かると楽しい

---

# 参考
[https://atcoder.jp/contests/abc238/tasks/abc238_d](https://atcoder.jp/contests/abc238/tasks/abc238_d)
ローカル環境のWordPressでテーマをアップロードできない

先日から仮想マシンにXAMPPをインストールしまして、WordPressの開発環境を作り、作業を続けてきました。

WordPressの復旧案件なので、ローカルでテストが必要でした。

今回は、XAMPPのProFTPDを使いアップロードできるように試みました。

前回までのXAMPPのインストールで、セキュリティの設定の中で、ProFTPDのパスワードを変更していました。

XAMPPを下記のコマンドで起動しました。
```bash
sudo /opt/lampp/lampp start
```
ですが、エラーが出たのです。

```bash
Starting XAMPP for Linux 8.1.2-0...
XAMPP: Starting Apache...already running.
XAMPP: Starting MySQL...already running.
XAMPP: Starting ProFTPD...fail.
Contents of "/opt/lampp/var/proftpd/start.err":
2022-02-06 00:26:56,500 hoge-VirtualBox proftpd[10237]: fatal: unknown configuration directive 'function' on line 44 of '/opt/lampp/etc/proftpd.conf'
```

色々調べたところ、海外の記事を見つけました。

https://stackoverflow.com/questions/68677283/xampp-starting-proftpd-fail-with-password

この回答によると、ソースの一部をコメントアウトしているようでした。

```bash
#UserPassword daemon <?
#	function make_seed() {
#	    list($usec, $sec) = explode(' ', microtime());
#	    return (float) $sec + ((float) $usec * 100000);
#	}
#	srand(make_seed());
#	$random=rand();
#	$chars="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz./";
#	$salt=substr($chars,$random % 64,1).substr($chars,($random/64)%64,1);
#	$pass=$argv[1];
#	$crypted = crypt($pass,$salt);
#	echo $crypted."
#";
#?>
```
私も、同じように書き換えました。
無事に、起動できました。

```bash
Restarting XAMPP for Linux 8.1.2-0...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.
```

ですが、テーマをアップロードしようとしたら、エラーが出ました。
初めは、アップロードするデータ量を調整して直るエラーでしたので、下記の記事を参考に直しました。

https://xn--v8jtdudb.com/%E3%81%AD%E3%81%93/Ubuntu/XAMPP%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%80%90%E7%B4%A0%E4%BA%BA%E5%90%91%E3%81%91%E3%80%91


[辿ったリンクは期限が切れています？](https://bigbell.co.jp/%E8%BE%BF%E3%81%A3%E3%81%9F%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AF%E6%9C%9F%E9%99%90%E3%81%8C%E5%88%87%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%EF%BC%9F%EF%BC%8Dwp%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97/)

##アップロードできない
![スクリーンショット 2022-02-06 01-51-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/2d98b009-b5e2-8179-b444-a6f15f47c884.png)

こちらのproftpd.confでユーザー名とパスワードを確認したのですが、認証できなかったのです。
アップロードできないので結局直接テーマのフォルダの中に、テーマのフォルダをコピペして対応しました。

##感想
今までXAMPPでWordPressのインストールをしたことは、何度もあります。
でも、テーマをサーバーにアップロードすることは、なかったです。
WordPressの画面でFTP認証できるとよかったのですが、また時間を見つけて調べたいと思います。

今回の事象の直し方をご存知の方が見えましたら、ご教授頂けましたら幸いです。
"Error: Fetching /usr/local/Homebrew failed!"で、brew updateが失敗した時の対処法

# 経緯
以下のエラーでbrew updateが失敗した。

```shell:
$ brew update
Error: Fetching /usr/local/Homebrew failed!
Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask failed!
Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core failed!
Fetching /usr/local/Homebrew/Library/Taps/aws/homebrew-tap failed!
Fetching /usr/local/Homebrew/Library/Taps/weaveworks/homebrew-tap failed!
```

# 解決策
以下のコマンドで解決した。

```shell:
$ brew update-reset
```

# 参考
- https://github.com/Homebrew/homebrew-core/issues/30917#issuecomment-411688866
スマホの誘惑を断ち切る箱

iPhoneなどの誘惑を断ち切るための便利ツールをご存知でしょうか？
'タイムロッキングコンテナ'で[検索](https://www.google.com/search?q=%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%AD%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A)するとたくさんでてきます。

例えば[こんなもの](https://www.amazon.co.jp/dp/B09JSCLDXP/ref=cm_sw_r_tw_dp_118DN101JJZMMY7X46V7)。
![Screen Shot 2022-01-10 at 11.26.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/7678eaad-7e96-50dd-eb7b-6c25dad470b2.png)

私の欲しかったのは、娘が「今から2時間勉強するからスマホの誘惑を断つよー」を家族に宣言できるものでした。また、遠隔からロックの予約・解除・状況把握ができることも要件です。

これが探した限り見つかりません。
なので、冬休みの自由研究として娘と作りました。

#SmartLock
![SmartLock001-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/4e127fc6-1e83-6463-5914-2a6ea75fa57c.jpeg)

'SmartLock'と呼んでいます。
本体には３つのボタンと２つのLEDのみ。あとは全てLINEから操作します。
家で大活躍中。

# できること

### LINEから

- ロック解除
- ロック解除する日時の予約指定
- ロック解除までの残時間確認
- ロック状況の確認
- 写真撮影とLINEへ画像送信
- ロック予約キャンセル（管理者のみ）
- 本体の終了・再起動（管理者のみ）

![SmartLock画面遷移図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/61bfafc6-fdf0-5728-4f07-b94e0fd4ddb9.png)


### SmartLock本体ボタンから

- 起動・終了とLINEへ通知
- ロック解除とLINEへ通知
- 写真撮影とLINEへ画像送信

# 動画で紹介
<iframe width="560" height="315" src="https://www.youtube.com/embed/BBYeqdzHavM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 全体構成

Raspberry Pi zeroがソレノイドとカメラを操作する構成です。
LINEからの操作はCloudflare Tunnelを利用して手元のRaspberry Pi zeroに直接Web hookさせています。
Raspberry Pi zero上はすべてNode-REDで完結しています。いわゆるノーコードです。最近は便利ですね。
※ Cloudflareに関しては[別記事](https://qiita.com/urakarin/items/ea27c132cadce0b66203)で紹介しています。

![SmartLock.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/791a6d5c-eff5-c821-3ed4-2ee4358124eb.png)


# ケース内構成
詳細は省きますがこんな感じです。

![SmartLock_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/41dcc34e-3b20-7269-232b-5eedc8d3f4fb.png)

![SmartLock7017-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/f985f54f-30a2-50b2-d9db-c2dc1affb260.jpeg)

![SmartLock7019-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/124feea5-a8da-8b9d-d18a-43d10cecdf99.jpeg)

![IMG_6958.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/e3f88203-6fce-e7f7-8768-89f42651737e.jpeg)

# Node-RED

こんな感じで。
![NodeRed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/5031fdb0-7bd9-78b9-4d4e-5caacb3457a5.png)



# おまけ
残り時間をケース上の7SEGで表示しようとしましたが、時限爆弾のようになってしまったのでやめました。
![7seg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82958/5c200510-ee95-eb9b-32f4-1affa53cd3a9.png)


おわり
良い感じのphpのクエリビルダを探して

さくっとphpを書く時に、フレームワークを導入するまでも・・・。な時に一番困るのがmysql用のライブラリ。直書きはちょっとめんどい。と言うわけで良い感じのクエリビルダを今のうちに探してメモしておくまん。

https://packagist.org/packages/usmanhalalit/pixie

シンプル。グループの記法が個人的に結構好み。

```php
QB::table('my_table')
            ->where('my_table.age', 10)
            ->where(function($q)
                {
                    $q->where('name', 'LIKE', '%usman%');
                    // You can provide a closure on these wheres too, to nest further.
                    $q->orWhere('description', 'LIKE', '%usman%');
                });
```

複数joinもグループと同じ感じでいけるのが良い。扱いやすそう。

```php
->join('another_table', function($table)
    {
        $table->on('another_table.person_id', '=', 'my_table.id');
        $table->on('another_table.person_id2', '=', 'my_table.id2');
        $table->orOn('another_table.age', '>', QB::raw(1));
    })
```

他にも色々探しているけれど、joinまで出来てわかりやすいのがなかなかないのがねぇ。
Androidアプリ開発での音声認識の権限でハマった話

## ハマったエラー
```
System.err: java.lang.SecurityException: Not allowed to change Do Not Disturb state
```
## 解決法
いろいろ調べた結果，海外サイトしかなかったが頑張って読んで解決した．
なぜかわからないが，サイレントモード系の権限が関係しているらしい．

```AndroidMainifest.xml
<uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY" />

```
で，下のやつをエラー発生箇所(僕の場合は，音声認識開始ボタンを押したところでエラーが発生したので，そこらへんの動作付近)に入力.

```
NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !notificationManager.isNotificationPolicyAccessGranted()) {
                        Intent intent = new Intent(android.provider.Settings.ACTION_NOTIFICATION_POLICY_ACCESS_SETTINGS);
                        startActivity(intent);
                    }
```
import等は適当に頑張ってください．
## ハマったエラー(2回目)
これでなんとか動くだろうと思ったらまた違うエラーが出た．

```
'Bind to recognition service failed' on android device
```
## 解決法(2回目)

```AndroidMainifest.xml
<queries> <package android:name="com.google.android.googlequicksearchbox"/> </queries>
```
issueに上がってた.

https://github.com/react-native-voice/voice/issues/236

ようやく，これで正常に動き出した．．．よかった．
`x + y = (x XOR y)  +  2*(x AND y)`とbit演算にすることができる件について

`x + y = (x XOR y)  +  2*(x AND y)`とbit演算にすることができる件について、情報の教科書に記載されていたことを思い出した。

> [基本情報でわかる 論理演算 「真理値表を書けば、半加算器と全加算器の仕組みがわかる」](https://www.seplus.jp/dokushuzemi/fe/fenavi/mastering_tech/digital_logic/#i-2)                                         

```
# x + y = (x XOR y)      +  2*(x AND y)
#         繰り上がらない       繰り上がり
```

コードで確認

```python:test.py
x = 4   # 0x0100                                                                                                                                                                                            
y = 12	# 0x1100                                                                                                                                                                                            

print("-- AND")
print(x & y)
print(bin(x & y))

print("-- OR")
print(x | y)
print(bin(x | y))

print("-- XOR")
print(x ^ y)
print(bin(x ^ y))
```

実行すると確かにそうなる

```
-- AND
4
0b100
-- OR
12
0b1100
-- XOR
8
0b1000
```

# 参考
[基本情報でわかる 論理演算 「真理値表を書けば、半加算器と全加算器の仕組みがわかる」](https://www.seplus.jp/dokushuzemi/fe/fenavi/mastering_tech/digital_logic/#i-2)
誰でもできる！paizaでAランクを取るまでにやったこと

# paizaでAランクを取るまでにやったこと
エンジニアとして就活していると、コーディングテストを突破する必要が出てきます。
そのときに、9割以上の企業は、paizaでAランクを取るぐらいの実力があれば、突破できます。
私が受けたなかでは、Aランクでも突破できないぐらい難しい企業は、数えられるほどしかありません。
では実際にどうすれば、Aランクまで辿り着けるのか、Aランクを取るまでにやったことを紹介します。

## 1. とりあえず基礎知識や基礎文法を頭に入れる(1日から3日)
コードを書く上で利用する変数や関数のような基礎知識、if文やfor文のような基礎文法は、ささっと頭に入れてください。
ここでは、どのように使うのかなどは知る必要はありません。
**とにかく暗記してください！**

## 2. Dランクでコーディングテストの仕様を理解する(1日から3日)
基礎知識や基礎文法を暗記できれば、次はコーディングテストの仕様を理解します。
コーディングテストは、ある入力値があり、それを問題文の通りに変換して、出力することで解答します。
しかし、この入力値の取得方法や出力方法を知らなければ、解答すらできません。
また、入力値の取得方法や出力方法は、言語によって異なります。
例えば、上はSwift、下はPythonで、入力値を取得する方法です。

``` swift
let input = readLine()!
```

```python
input = input()
```
そのため、とにかくDランクの問題を最低10問は解いて、仕様を完全に理解してください。

## 3. Cランクで基礎文法の使い方を理解する(7日から14日)
Cランクの難易度が低い問題からどんどん解き、1段階目で暗記した基礎文法の使い方を理解してください。
このときに、**平均解答時間より短い時間で解くこと**、**満点を取ること**を意識してください。
その理由は、BランクやAランクに昇格するには、この2つをクリアする必要があるからです。
Cランクで安定して、満点が取れるようになりましょう。

## 4. Bランク、Aランクに挑戦する(7日から21日)
BランクとAランクは、Cランクで利用した基礎文法の組み合わせで満点を狙えます。
ただし、上位ランクに行くほど、処理時間を意識する必要があります。
例えば、よくある1000円札、500円玉、100円玉の特定の組み合わせを考える場面で、必要ないところまでfor文を全て回していると、処理が間に合わない可能性があります。
そのため、問題文を読んで、どのように効率よく、for文、while文、if文を利用するのかを意識する必要があります。
もしBランクで詰まってしまった場合は、Cランクの問題に戻りましょう。
私自身、Cランクの問題を数十問解きました。
これを繰り返すことで、おのずとAランクを取得できます。

## まとめ
基礎文法と基礎知識さえあれば、あとは練習次第で、Aランクを取得できます。
少しでもプログラミング経験がある場合は、1ヶ月真剣に頑張れば、Aランクを取得できるでしょう。
**ぜひ、頑張ってみてください！！**

また、修正点や追加情報があれば、ぜひ教えてください。
A→Bにデータを送る時に起こること

#主な流れ
１・・Aが送りたいデータを用意し、アプリケーション層からデータを送出
２・・トランスポート層を通過するとデータにヘッダと呼ばれる制御データがつく。ヘッダとデータの塊をセグメントと呼ぶ
３・・インターネット層を通過すると、IPヘッダと呼ばれる制御データがさらにつく。この塊はパケットと呼ばれる
４・・最後にネットワークインタフェース層を通過すると、フレームヘッダとフレームフッダと呼ばれる制御データがつく。この塊をフレームと呼ぶ。このフレームがネットワークで転送されます。
５・・ネットワークインタフェース層を通過するときにフレームヘッダとフレームフッダが削除されインターネット層を通過するときにIPヘッダが削除されトランスポート層を通過するときにヘッダが解除されBにデータが届く
mysqlで絵文字以降が消える問題の対策（PHP）

表題通り。

複数データをserializeしてmysqlに収納していたら、一部データが吹っ飛ぶことがあった。調べると絵文字のせいで、そこ以降の文字列が全てふっとび、serializeとしてのデータを保持できずに、変換できなくなっていた。これの対策をする。

mysqlのバージョンが低いと、UTF-8環境で絵文字が吹っ飛ぶらしい。なので、これを回避するために、文字列を全てエンコードしちゃうという力業にでる。

 ```php
function my_serialize($obj) {
    return json_encode(serialize($obj));
}

function my_unserialize($obj) {
    $temp_obj = json_decode(@unserialize($obj), true);
    if ($temp_obj) $obj = $temp_obj;
    return $obj;
}
```

シリアライズした文字列をjsonでエンコードすることで、絵文字用の文字列も全てエンコードしてしまう。それをデコードするときは、扱いやすいように配列オプションをtrueに。エラーでデコードできなかった場合、そのまま文字列で返すように、またアンシリアライズでエラーがでないように@がついている。これで問題無く絵文字が扱えている。