OmniAICreator/Qiita-1.07M huggingface dataset:
Laravelで画像ファイル等を受け取り、DB保存したい。

#目的
Laravelでフロントから送信された画像ファイル＆文字データをDB保存します。
以下の方の参考になれば幸いです。
・画像ファイル＆文字データをDB保存してみたい。

#関連Episode
①[Reactで画像ファイルを送信するAPI送信の方法](https://qiita.com/Ryotaross/items/abdcb3540d0f4f9e2406)


#マイグレーション
マイグレーションはDBのテーブルの内容を定義するようなもの。
以下のコマンドをターミナルで実施すると、マイグレーションファイルが作成される。

```php:ターミナル
 php artisan make:migration create_posts_table --create=posts
```

<br>

database/migrationsに```****_**_**_******_create_posts_table```というファイルが作成される。
up() の部分を更新する。画像データ（image）,文字データ(title)どちらもstring型のカラムにする。

```php:****_**_**_******_create_posts_table
public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('image');
            $table->string('title');
            $table->timestamps();
        });
    }
 
```

<br>
ターミナルでコマンドを実行して、マイグレーションを行う。

```php:ターミナル
 php artisan migrate
　　Migrating: 2021_11_02_000009_create_posts_table
　　Migrated:  2021_11_02_000009_create_posts_table (30.15ms)
```
 
#modelの作成
下記のコマンドで、modelを作成します。
 
```php:ターミナル
 php artisan make:model Post
```
 
<br>
 
今回、modelの変更は行ないません。(App/Post.js)
 
```php:Post.js
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}

 
```
 
#Controllerの作成
ターミナルでControllerを作成します。
今回はAPIで通信を行うことを想定しているので、API/配下にcontrollerを作成する。
 
```php:ターミナル
php artisan make:controller Api/PostController
```
 
<br>
 
App/https/database/...に作成されたControllerを下記の通り変更を行います。
 
```php:postController.js
<?php

namespace App\Http\Controllers\Api; //追記

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;　　//追記

class PostController extends Controller
{
  public function create(Request $request)
  {
    $post = new Post;
    $post->title = $request->title;
    $path = $request->file('image')->store('public/image/');
    $filename = basename($path);
    $post->image = $filename;
    $post->save();
    return response()->json($golf, 200);
  }
}

 
```
 
##解説
DBとの接続を行うためにmodelをcontrollerに読み込みます。
 
```php:post.js
 use App\Post;
```

<br>
 
フロントから送られてきたデータをDBに保存します。
まず、空っぽのPostを作成します。
次に、title。最後に画像ファイルであるimageをpostしていきます。
storeメソッドは、引数内のディレクトリ(今回ならpublic/image)にファイルを保存し、そこへのディレクトリパスを返します。(今回のpath)
そのため、imageはpublic/image内に保存(store)し、そこへのアドレスを$pathへ定義しています。

```php:post.js
  $post = new Post;
  $post->title = $request->title;
  $path = $request->file('image')->store('public/image/');
```
 
<br>
 
その後、$pathをファイル名だけ抜き出してDBに送信しています。
 
```php:post.js
  $filename = basename($path);
  $post->image = $filename;
```

<br>
最後にDBへ保存します。

```php:post.js
  $post->save();
```
 
#ルーティング設定
routes/apiにて先程作成したControllerにAPIアドレスを割り当てます。

```php:api.php
Route::group(['middleware' => 'api'], function(){
    Route::post('post/create','Api\PostController@create');
}); 
```

###POSTMANでテストしてみる
テストは、POSTで```http://localhost/api/post/create```
Body->formDataでtitle->テキスト形式、image->file形式で送信します。
(POSTMANの使い方は別でまとめますね。)

#まとめ
今回はLaravelで受けた画像ファイル、文字データをDB保存してみました。
作成したAPIを使用することで、フロント側からデータ保存を受け付けることができます。
今後、このデータをReactで表示させる方法もまとめますね
Windows 11 のタスクバーでアイコンを結合しない方法

1. https://github.com/valinet/ExplorerPatcher/releases から dxgi.dll をダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/059820e1-2b64-6c07-7089-621e606b1466.png)

2. dxgi.dll を C:\Windows\ に配置 (管理者権限が必要)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/b0f1b74d-9fe6-ee2c-e5c7-86bd1e8b9edc.png)

3. Windows Explorer を再起動 (タスクマネージャー)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/b3cb2151-850b-2a17-8521-1f20edcea293.png)

5. Start 右クリック -> Properties
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/1623b1c3-2c44-bf64-23d3-8f3b97d7d779.png)

6. Never combine を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/841313cc-7879-6b20-b815-da759d99475b.png)

7. 終わり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/64f56c0b-b49a-4aee-3b11-1e8185a84eb4.png)

8. アンインストール
C:\Windows\dxgi.dll を C:\Windows\dxgi.dll.old 等に名前変更し再起動

9. おまけ T-Cock Redux は動作した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101023/b3fea58e-fa0c-f655-75af-4baac143c5fb.png)
Google Apps Script『SalesforceのOAuth 2.0 更新トークンフロー』について

# はじめに
- Salesforceの、OAuth 2.0 更新トークンフローについて知りたい方
- Salesforceで、アクセストークンの有効期切れの対処法について知りたい方
- ※今回はGASを使用します。

## OAuth エンドポイント
OAuth認証で必要なURLのこと。また、OAuth認証で行いたい認証の種類によりエンドポイントが異なる。
**以下今回使用するエンドポイント↓**

>|OAUTH エンドポイント|説明|
|:---:|:---:|
|https://login.salesforce.com/services/oauth2/token|Salesforce インスタンスの OAuth 2.0 トークンエンドポイント。接続アプリケーションは、このエンドポイントに OAuth トークン要求を送信します。|
引用 [OAuth エンドポイント]("https://help.salesforce.com/s/articleView?id=sf.remoteaccess_oauth_endpoints.htm&type=5")



## 更新されたアクセストークンの要求




######サンプルコード
```javascript:token.gs
function refreshToken() {
  const payload = {
    "client_id": ここにコンシューマ鍵
    "client_secret": ここにコンシューマの秘密
    "grant_type": "refresh_token",
    "refresh_token" : ここにアクセストークン
  }
  const options = {
    "method" : "POST",
    "headers" : {
      "Authorization": "Bearer " + "ここにアクセストークン"
      
    },
    "payload": payload
  }
  const response = UrlFetchApp.fetch("https://login.salesforce.com/services/oauth2/token", options);
  Logger.log(response);
}

```

## 参考サイト

- [OAuth エンドポイント]("https://help.salesforce.com/s/articleViewid=sf.remoteaccess_oauth_endpoints.htm&type=5")
- [更新セッションの OAuth 2.0 更新トークンフロー]("https://help.salesforce.com/s/articleViewid=sf.remoteaccess_oauth_refresh_token_flow.htm&type=5")
React axiosを使用して画像ファイルをAPI送信したい

#目的
Reactで画像などのファイルデータをAPIに送信する方法をまとめてみました。
以下の方に、参考になれば幸いです。
・Reactの画像ファイルの送り方がわからない。
・axiosを使用して送信したい。
 
今回は、画像ファイルと文字ファイルを同時に送っています。
 
#導入
axiosライブラリを使用する準備をします。
 
```react:ターミナル
npm install axios
```
 
#画像ファイルの送信方法
以下のコードで送信することができた。
 
```react:send,js
import React from 'react';
import { useState } from 'react';
import axios from 'axios';
 
function Send() {
 const [title,setTitle] = useState();
 const [image,setImage] = useState();
 
 const handleSubmit = () => {
 
   const file = new FormData()
   file.append("title",title);
   file.append("image", image[0]);
 
axios
      .post('http://localhost/api/sendimage',file,
        {
          headers: {
          'content-type': 'multipart/form-data',
          },
        }
      )
      .then(response => {
        console.log(response);
      })
 }
 
   return (
     <>
      <p>ファイル送信</p>
       <input type="text" placeholder="写真のタイトル"
onChange={event => setTitle(event.target.value)} />
 
      <input accept="image/*" multiple type="file"
onChange={event => setImage(event.target.files)} />
<button onClick={handleSubmit}>送信</button>
</>
);
}
 
export default Send;
```
 
#解説
まずは、axiosライブラリをimportする。
 
```react:send,js
import axios from 'axios';
```
 
<br>
 
画像ファイル、文字データ（写真タイトル）をuseStateに保管し、送信ボタンクリックでAPI通信が発火します。
ここでの注意点はonChangeでファイルを保管する際に、画像ファイルはevent.target.filesを使用し、
文字ファイルはevent.target.valueを使用する。
 
```react:send.js
<input type="text" placeholder="写真のタイトル"
onChange={event => setTitle(event.target.value)} />
<input accept="image/*" multiple type="file"
onChange={event => setImage(event.target.files)} />
<button onClick={handleSubmit}>送信</button>
```
 
<br>
 
API通信のところとなります。
 
```react:send.js
 
const handleSubmit = () => {
 
  const file = new FormData();
  file.append("title",title);
  file.append("image", image[0]);
 
axios
    .post('http://localhost/api/sendimage',file,
      {
         headers: {
          'content-type': 'multipart/form-data',
          },
       }
     )
    .then(response => {
        console.log(response);
     })
}
```
 
<br>
 
まず、FormDataを定義します。
FormDataに、先程useStateに保管した画像ファイル及び文字データを追加します。
 
```react:send.js
 
const file = new FormData();
file.append(“title”,title);
file.append("image", image[0]);
 
```
 
<br>
 
axios.postでAPI送信します。
先程定義したFormData={inputでuseStateに保管した画像ファイル}を送ります。
その際に、headerとして 'content-type': 'multipart/form-data'を指定します。
'multipart/form-data'は文字、ファイルなどの複数の種類のデータを一度に送信できる形式です。
 
```react:send.js
axios
  .post('http://localhost/api/sendimage',file,
    {
      headers: {
        'content-type': 'multipart/form-data',
      },
    }
  )
 
```
 
#まとめ
今回は、Reactで画像ファイルをAPI送信する方法をまとめてみました。
Laravelで受け取る側も作っているので、今後まとめますね。
【electron】mac向けのbuildはuniversalにすべし

初書：2021/11/2
mac : 11.6
node： v16.6.1
electron : v15.1.2

# 前置き

electron-builderを使ってmac向けにパッケージ化をした時に起こったメモ。

# パッケージングする

electronで作成したプロジェクトをパッケージングするとき、大抵はelectron-builderを使用すると思う。
今回も調べたらelectron-builderが出てきたので、これを参考にパッケージングしてみる。

```zsh
% npx electron-builder --mac --x64
```

実際には`package.json`か専用ファイルを作って設定が必要だが、本趣旨とは外れるので省略。

これで無事にパッケージングでき、DMGファイルを公開することで他のmacユーザーも使用できる。

# 起きた問題

こちらintelのCPU使い。パッケージングしたファイルを使っても特に問題はなかった。
問題は配布先。相手はM1のCPUを使用していた。

M1のmacでも特に問題なく動くのだが、１つだけ動かないものがあった。

今回、GUI版のEmacsを開く動作が必要だったため、child_processを使用してEmacsを起動していた。
これが、M1のmacだと動かず、Emacsがクラッシュしてしまった。

クラッシュレポートを見せてもらうとだいたいこんな感じ。

```txt
Thread 0 Crashed:: Dispatch queue: com.apple.main-thread
Thread 1:: com.apple.rosetta.exceptionserver
Thread 2:
Thread 3:
Thread 4:
Thread 5:
Thread 6:
Thread 7:: com.apple.NSEventThread

Thread 0 crashed with X86 Thread State (64-bit):
```

なんかrosettaが悪さしているような気がしている。
ということで試行錯誤した記録を書いていく。

## 現在の呼び出し方法

最初書いていたコード。
`exec`はzshとかbashとかではなく`sh`[^1]を使っているので、パスが通っているか分からないので絶対パス指定。

[^1]: これシェルと読むのだろうか、意外に詳しくないこの辺り。

```ts
    exec(`/Applications/Emacs.app/Contents/MacOS/Emacs "${ExecPathEscape(dirPath)}"`, callback);
```

intelでは正常にEmacsが開く。
M1ではここが呼び出されると、一瞬だけ開いたのち、落ち、callbackで`error`が返される。

## 原因特定をする

ここは試行錯誤のメモ。結論はその下。
とりあえず呼び出し方を変えてどうにかならないか考えてみる。

1. `exec`ではどうにもならないかもしれないと思い、大元である`spawn`を叩いてみる。

```ts
      const exe = spawn('/Applications/Emacs.app/Contents/MacOS/Emacs', [ExecPathEscape(dirPath)], {
        shell: true,
      });
      exe.stdout.on('data', stdoutCallback);
      exe.stderr.on('data', stderrCallback);
```

変化なし。

2. この時は、自分のアプリケーションがM1で適切に動いていて、Emacsが何故かX86_64で動いていると思っていた。
ので、シェルコマンドをX86_64で動かせば動くのでは？と思い以下のコードに変更

```ts
      exec('arch -arch x86_64 /bin/bash -c "/Applications/Emacs.app/Contents/MacOS/Emacs ' + ExecPathEscape(`"${ExecPathEscape(dirPath)}"`) + '"', callback);
```
`-c`以降が文字列になるため、ファイルパスを２重エスケープするという複雑な構造に。
もちろん変化はなかった。

3. electronのshellを叩いてみる。
もしかして`shell.openExternal`で開けるのでは？と思い書いてみたが動くはずもなく。

4. Emacsをrosettaで起動にチェックをつける
Emacsを右クリックし、`情報を開く`から、`rosettaを使用して開く`にチェックを入れて起動してみた。
まあこれでもないですよね。

他にも2,3個ためしたがどれも上手くいかなかった。とある事情でログを消してしまい何試したか覚えていないが。

# 解決方法の発見

M1ユーザーの方にも色々と試してもらっていて、それぞれ１つずつ解決策が見つかった。

1つは、叩いていた`/Applications/Emacs.app/Contents/MacOS/Emacs`ファイルは、中はただのRubyなので、
読んでみると、どうやら実行環境に応じて開くファイルを変えているらしい。
これで、何故かX86_64が選択されてしまっているので、直接Arm64のEmacsを起動させるという方法。
コマンドだと`/Applications/Emacs.app/Contents/MacOS/Emacs-arm64-11_2`とかになるだろうか。
これで正常起動が出来た。

もう一つがタイトルにもあるように、自分のアプリケーションがintel専用で配布していることに気がつき、
universalに変更してパッケージングするというもの。
この場合は`/Applications/Emacs.app/Contents/MacOS/Emacs`を叩いても正常に起動できた。

ということで、上記二つから考えると、
- M1のMacでEmacsの`Emacs-x86_64-10_14`が何故か起動できない。
- M1のMacでintelのアプリケーションを起動すると、シェルはX86_64で呼び出される。
- これにより、EmacsがチップをX86_64だと判断し、Emacs-x86_64-10_14を起動しようと試みた。
という原因で開けないという事態が起きた。

# 結論

M1のMacに対応できるなら対応したものを配布した方がこんなことにならないですよね。
ということで最低でも`universal`、容量とか気にするならM1とintelそれぞれに対応したパッケージを作成しよう。

という忘備録でした。

```zsh
% npx electron-builder --mac --universal
```
【Houdini】クリーンアップに使えるSOPまとめ

Houdiniで不正ポリゴンの修正やノーマルの平坦化といったデータのクリーンアップに使えるSOP群。随時追加。

#Cleanup	
クリーンアップの王道。不正ポリゴンや孤立点を削除したり、NaN浮動小数点を含んだPointを削除できる。
HoudiniはMaya等と違ってPointを単独で扱える関係上孤立点が発生しやすく、Booleanで不正ポリゴンを発生させながら強引にモデリングせざるを得ない場面も多いので、エクスポート前にこのノードを挟むのはほぼ必須である。

#Fuse
王道その２。近接点や重複したPointをスナップ・結合する。Booleanを使った場合にこれを挟むことが多い。
これを使うと結合したPointに帰属したNormalが荒れるので、基本的に後述のNormal SOPとセットで使う。

#Normal
Normalを計算するSOPであるが、歪んだNormalが混在していても全て再計算するので、Normalの正規化・平坦化に使える。
特にBooleanを使った際、Fuse SOPを使ってクリーンアップするとほぼ間違いなくNormalが荒れるので、Vertices(必要ならPrimitivesも)を対象にこれを挟んでおくことはほぼ必須になる。Cusp Angleは30~60がおすすめ(高すぎても不必要な対象を拾いすぎてあまり良くないようである)。

#Facet
汎用性の高いノードであるがクリーンアップにおいてもポイントの結合からNormalの正規化・平坦化、縮退ポリゴンの削除など、幅広い需要を単独で満たせる。

#Divide
凹ポリゴンを修復したり、Primitivesを全て三角ポリゴンや四角ポリゴンに変換できる。
これを挟んでおくだけで多角形ポリゴンは一掃でき、ポリゴンの最大頂点数（三角形か四角形か）も出力先のソフトに合わせてコントロールできるので非常に便利。
パケットトレーサーでネットワーク学習1102

・サブネットマスク、255.255.255.252の際に割り当てられるホスト部のアドレスは２つ。

・PCとスイッチを繋げるケーブルはストレートケーブル

・スイッチのCLI→Switch>enable（スイッチのユーザーモードーから、管理者の設定モードに切り替わる。）

・MACアドレスのテーブルをみる。コマンド：show mac-address-table 

・PCのMACアドレスを調べる。コマンド：ipconfig /all

・clear mac-address-table 
※スイッチのmacアドレステーブルの削除
.gitignoreを反映させる方法

#.gitignoreを書く

Githubにあげないディレクトリを記載する。

```
bin/
.bin/
gradle/
.gradle/
```

#反映

プロジェクトのルートで以下のコマンドを実行。

```
$ git rm -r --cached .
$ git add .
$ git commit -m "ignore 反映"
```

仕組みとしてはキャッシュを全部削除してからすべてaddしている。
addのタイミングで` .gitignore`が動いてくれるのでそのタイミングで反映してくれる。
ネットワーク/セキュリティのシミュレーター/エミュレーター情報収集 

自分向けネットワークシミュレーター/ネットワークエミュレーターに関する情報まとめです。

https://nil.uniza.sk/network-simulation-virtualization-software-list/


https://www.brianlinkletter.com/open-source-network-simulators/


https://geekflare.com/cyberattack-simulation-tools/


https://tekunabe.hatenablog.jp/entry/2019/01/16/nw_auto_test_too
【初投稿】対話型ラインBotを作るには？

# 目次
* 最初に
* 目標
* LINE Notifyでは無理?
* LINE messagingAPIを使おう!
* herokuを使ってみる



# 1.最初に
自分のポートフォリオとして記事を残そうと思い、投稿を始めました。
Qiitaの書式のやり方におすすめなどアドバイスあれば教えていただきたいです。

# 2.目標
今回はLINEで混雑状況botを作ります。


# 3. LINE Notifyでは無理?

LINE Notifyを触ったことがなかったのでどういうものか調べ、pythonで簡易的なコードを書いてみました。

```python
import requests
import datetime
import pytz

#取得したトークン・API
TOKEN='???'
api_url='https://notify-api.line.me/api/notify'

#時刻の処理
time=datetime.datetime.now(pytz.timezone('Asia/Tokyo'))
time=time.strftime('\n%Y年%m月%d日　%H時%M分%S秒')
send_message=time

#情報を辞書型にする
TOKEN_dic={'Authorization': 'Bearer'+ ' '+TOKEN}
send_dic={'message': send_message}

#LINE通知を送る(200: 成功 400:リクエストが不正　401:アクセストークンが無効)
requests.post(api_url,headers=TOKEN_dic,data=send_dic)
```

しかしこれではLINE Notify→自分しか通知がいかない!
ということで

# 4.LINE messagingAPIを使おう!

仮想環境を設定し、

LINE Developersでpythonのサンプルコードを入手、拡張し目標達成!


# 5.herokuを使ってみる
常時起動するために今回はherokuを使いました。(初心者)
セットアップの過程を示していきます。
まずはherokuをダウンロードします。
その前にherokuへ登録を[登録はこちら](https://signup.heroku.com)

こちらはMacOSのダウンロード方法です。
その他は公式サイトに記載しています。
```brew tap heroku/brew && brew install heroku```
ここでエラーが!

###エラー文
Error:Your Command Line Tools are too outdated.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you any updates,run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo Xcode-select --install



と表示されたので
```sudo rm -rf /Library/Developer/CommandLineTools
  sudo Xcode-select --install
```
と実行するとかなり時間がかかりましたが無事herokuがインストールできました!



次に外部ライブラリをテキストに書き込みます。
その前に、herokuの上でwebサーバーとして動かすために準備、、
```pip install gunicorn```
とコマンドで動かします。
テキストに自動で書き込むためには、
```pip freeze > requirments.txt```
次にherokuでファイルを起動するために、Procfileを作ります。
中身はこんな感じ。
```web: gunicorn app:app --log-file -```

その後gitのダウンロードを行いました。

次に```heroku login```
でログインし
```git init```
```heroku git:remote -a "herokuで作ったapp name"```
で
残りはgitにadd,commit,pushするだけです。
#### デプロイ完了!
heroku公式サイトにわかりやすく説明が載っているので簡単でした。
python以外にも様々な言語の説明が載っています。
[heroku pythonスターターガイドはこちら](https://devcenter.heroku.com/ja/articles/getting-started-with-python)
情報処理技術者試験を使ったスキルアップ方法

# １．はじめに
私が実践して、最もよかったと感じる情報処理技術者試験を使ったスキルアップの方法を記載します。
ソフトウェア関連のスキルをアップ目指す方のご参考になればと思います。
特に若い方には、有効だと思います。


ちなみに、短期間の試験合格を目指す方には、向いていない勉強方法です。
ただ、長い目で見て、スキルを身に着けたい方や、試験区分を徐々に上げていきたい方や、向いている勉強方法だと考えています。

# ２．用意するモノ
- 過去問　　　　　　　　　　　　　・・・毎年、最新の過去問を買ってください
- インターネットが使える環境　　　・・・スマホなど
- ルーズリーフ　　　　　　　　　　・・・必要に応じて複数枚準備ください
- ルーズリーフ　バインダー　　　　・・・複数の色から選べるバインダーがおすすめです
- ボールペン　　　　　　　　　　　・・・鉛筆・シャーペンは、おすすめしません
- 裏紙　　　　　　　　　　　　　　・・・書き損じたルーズリーフを使います

# ３．やり方 
このやり方は、まず午前の問題を中心に実施します。
午前の知識が付いたら、同様に午後の問題に取り掛かります。


１. 過去、３~５回分の過去問を解いていく

２. この時、知らない単語・分からない単語を裏紙にメモ
 　 問いに対する答えだけでなく、問題、回答の選択肢すべてが対象です。

３. インターネットを使って、知らない単語を調べます。

４. ルーズリーフに調べた内容をまとめます。
　　理解した内容を整理してボールペンでまとめていきましょう。
　　書き損じた場合は、新しいルーズリーフにはじめから書き直しましょう。

　  このとき、ルーズリーフ１枚に１つの内容だけを記載していくことがポイントです。
　 他の問題で、同様の単語が出てきた場合、予め用意しておいた空白に記載します。

５. 同様の内容単位で、ルーズリーフを分類し、バインダーに挟んでいきます。
 
６. 暇なときに見返します。


# ４．ポイント
１．午後の問題よりも、午前の問題が重要
　　午前の問題を甘く見ている人がいると思います。

　　例えば、問題と選択肢のキーワード、問題と回答の組を覚える人などです。
　　この勉強方法は、時間を無駄にするだけで、勉強になっていないと考えています。

　　まず午前の問題を使って、地道に用語を理解することがスキルアップの近道だと感じました。
　　午前の問題で得た知識は、そのまま午後の対策に繋がります。
　　知らない単語は、全て調べて、知識として身につけましょう。

２．インターネットで調べながら手書きでまとめることで内容が覚えられる
　　覚えるための時間を設けなくても良いです。
　　その後、寝る前に見返すだけで、記憶に定着します。
 　　
３．自分の理解度を振り返ることができる
　　自らの理解をルーズリーフにまとめるため、以下が紙に残ります。
　　　・正しく理解した内容
　　　・間違って理解した内容
　　重要なのは、理解した内容を紙に残すことです。　　
　　理解内容が紙に残るため、間違いに気づいた時に軌道修正が容易です。

４．体系的な知識が身に付く
　　ここで紹介した方法を使って、ルーズリーフ、バインダーに整理していくと、
　　全体の体系が見えてきます。
　　「これは通信かな？」・「これはデータベースかな？」などと考えながら、
　　知識を整理していきましょう。

５．最後に、、、
　　この方法を続けていくと、最終的に自分専用のBoK（知識体系）が出来上がります。
　　書き溜めたルーズリーフ・バインダー　＝　自分の知識量が目に見えます。
　　このため自信が付きます。
Kotlinの言語特性やJavaとの違い

## イントロダクション

かれこれ3年前からRailsエンジニアだったはずの私harakazu_nanfgは、どうやらこの11月からサーバーサイドKotlinを使ったエンジニアになりそうなので、先日よりKotlinの学習を始めた。

また、学習本には「<a href="https://www.amazon.co.jp/dp/B095RYQRSQ?tag=keiji009-22&linkCode=ogi&th=1&psc=1">Kotlinハンズオン</a>」を採用しており、この記事はそれらの前半を要約したものである。

ちなみに、私はC言語は好きだが、Javaに関しては何も知らない。
（なお、私は「JavaScriptとJava」は「メロンとメロンパン」くらい違うという比喩が好きである）


## Kotlinとは？

2011年にチェコのJetBrain社によって開発されたプログラミング言語。
「Android = Kotlin」の印象が強い。
しかし、実際にはJava同様、サーバーサイドなどでも使用されている汎用性の高い言語である。

## Kotlinの特徴

### Java仮想マシンで動く
Kotlinは「JVM言語」と呼ばれるものの１つ。

JVM言語とは、、、
→ Java仮想マシン上で動くプログラミング言語のこと。
Kotlin,Javaの他には、「Scala, Clojure, Groovy」などがある。

[参照] JVM上で動作する言語の一覧 -wiki
https://ja.wikipedia.org/wiki/JVM%E4%B8%8A%E3%81%A7%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E8%A8%80%E8%AA%9E%E3%81%AE%E4%B8%80%E8%A6%A7


### Javaとの互換性
Kotlinのコードをビルドして生成されるのは、Javaのクラスファイルである。
なのでKotlinは「Javaのプログラムを作る言語」なのだと考えて良い。

また、クラスファイルが互換があるということは、つまり「Javaのクラスファイルがそのまま使える」ということでもある。


### Javaをベースにした文法
Kotlinの基本文法は、Javaのそれをベースに設計されている。
全く同じではないが、Javaを分かっていれば比較的簡単に習得できるはず。

Kotlinの文法は「Javaをより使いやすくする」ことを念頭において作られている。
いわば、「Javaの理想的な将来」をイメージした言語だと言えるだろう。


### 簡潔に書ける
プログラミング言語としてのKotlinの最大の特徴は「コーディングの簡潔さ」。
なので、Kotlinでコードを書くと、Javaよりもはるかにシンプルに記述できることが分かるはず。


### 安全性
Javaなどのオブジェクトを多用する言語では、変数にオブジェクトが参照されていないことに起因する問題がよく起こる。
一方、Kotlinではnullセーフティな作りになっている。





## JavaとKotlinの違い

Kotlinは「理想のJava」である。
Javaをよりシンプルに、そして強力に、さらに安全にしていくとどうなる？
その一つの答えがKotlinだと言っても良い。

それでは、具体的にどのような点が違うのか。


### 型推論の採用
Javaは、Java10から型推論が導入されたが、Kotlinでは標準で型推論が用意されている。

Kotlinでは、これを使った変数宣言の方が圧倒的に多いだろう。

また、Javaには定数がなく、static finalなどで代用しているが、Kotlinには標準で定数が備えられている。

これにより、堅牢なプログラムの作成ができるだろう。



### 簡潔なクラス

クラス宣言に直接引数を指定するプライマリコンストラクタ。
メソッドの名前付き引数や初期値の指定。
フィールドを廃止して、全てプロパティにする。

単に簡潔なだけでなく、Kotlinは、わかりやすく安全であることがわかる。


### 強力なオブジェクト
Kotlinには、Javaにはないオブジェクトが色々と用意されている。

例えば、クラス内にstaticデータをまとめた「コンパニオンオブジェクト」や、データだけをまとめる「データクラス」など。

一度使うとJavaには戻れなくなる。


### null safetyとオプショナル
もっともKotlinの良さを感じるのは「nullに関する扱い方」である。

Kotlinでは変数にnullを代入できない。

また「nullである可能性のある変数」「nullでは絶対にできない変数」などの指定をしてコードを書くことで、nullをうまく処理できる。





## Kotlinで開発可能な世界

### Android開発は当然！
Kotlinを学ぶための最初の一歩としてAndroid開発は良い選択。
ただし、Androidは独自のAPIを持っているため、ここで得た知識はAndroid以外で利用できないだろう。


### PCのアプリ開発
何度もいうように、KotlinはJavaの互換性がある。

なので、当然PCのデスクトップアプリも開発できる。


### Webのクライアント＆サーバー開発
Kotlinには、JavaScriptに変換する機能があり、Kotlinを使ってWebのクライアント開発をすることもできる。

また、サーバーサイドの開発ももちろんできる。
Kotlinには「Ktor」というフレームワークが用意されており、これによりサーバープログラムを作成できる。
WSLでPythonのGUI表示をどうにかする

# WSLでGUI表示したいという話
こんな話，インターネットの海には無限に転がっている
転がっているからといってできるとは言ってないのがこの分野ですよね
  
以前にWSLのUbuntuからPyQt5で作ったアプリを立ち上げようとして，GUI周りで挫折したので，今回はリベンジ ~~(コマンドプロンプトはやっぱり作業しづらい)~~ 

## 環境
* Windows10
* WSL1(Ubuntu)
* Python3.7→3.8

## とりあえず実行しようとしてみる

GUIの基本(?)「とりあえず画面を出す」をするため，matplotlibを使ったプログラムでグラフを画面出力しようとしてみると...  
エラーが出た

```shell
WSL UserWarning: Matplotlib is currently using agg, which is a non-GUI backend, so cannot show the figure.
```

とりあえずこちらを参考にVcXsrvを導入

https://qiita.com/rhene/items/ff11c7850a9a7617c50f

記事通りに終わらせて，いざ実行してみるとまたエラーが．

```shell
ModuleNotFoundError: No module named '_tkinter'
```

https://ai-gaminglife.hatenablog.com/entry/2019/04/29/204841

を参考に，

```bash
$ sudo apt install python3-tk
$ sudo apt install tk-dev
```

を実行．記事ではここでエラーが消えるかのように書いてあるが，ここではエラーが消えなかった．

ウンウン悩みつつ，短いエラー文とにらめっこすると...

```shell
import _tkinter # If this fails your Python may not be configured for Tk
```

コメント部分に気になることが書いてある．どうやらPython自体が現状だとTkに対応していないらしい．

なので，この時まで使っていたPython3.7の対話モードを立ち上げ，`import tkinter`を走らせると，同じエラーが出た．

試しにPython3.8で同じことをしたところ...
**エラーなくimportできた．** なんで？

python3.8で先ほどのプログラムを指定して動かすと問題なく動いた．理由が分からない...
一応，WSLに乗っているPythonでは，3.8が現状の最新版である．そのせいなのか...？

## PyQt5入りプログラムを動かす

なにはともあれmatplotlib入りのプログラムは動いたため，次は本命のPyQt5入りプログラムを実行する．

出たエラーは

```shell
qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "***" even though it was found.
```

https://qiita.com/fukasawah/items/99219e1ff7d08915952f

こちらを参考に，`/usr/lib/rstudio/plugins/platforms/libqxcb.so`を探す．

ないことを期待していたのだが，存在していた．

理由が分からなくなったので，環境変数に`QT_DEBUG_PLUGINS=1`を追加してもう一度実行した．

するとこの行が主原因らしいと分かった．

```
QObject::moveToThread: Current thread (***) is not the object's thread (***).
Cannot move to target thread (***)
```

どうやら，pipで入れていた**opencv**が，PyQtと競合してしまうらしい．
なので

```bash
$ pip uninstall opencv-python    # 今あるライブラリを削除
$ pip install opencv-python-headless    # headlessモードのライブラリを導入
```

これですべてのエラーが出なくなった．

# まとめ

* Xserverを導入
* tk関係のパッケージをインストール
* PythonがそもそもTkを実行できるか確認
* OpenCV関係のライブラリはheadlessで入れる

ちなみに，matplotlib入りのプログラムを動かすとき，

```python:
import matplotlib
matplotlib.use('TkAgg')
```

を追加すると微妙なエラーも出ずに済む．

おわり．

# その他参考

https://qiita.com/NOSS/items/bd286f039e28b5679465

https://thegoodbadugly.hatenadiary.org/entry/20171024/1508812045
Unity+AdMob+iOSビルドが失敗したときに試したこと

# 環境
macOS Big Sur 11.6.1
Unity Version 2020.3.21f1 Personal
GoogleMobileAds-v5.4.0.unitypackage
Xcode Version 13.1
CocoaPods Version 1.11.2
# 現象1
AdMobを導入したUnityプロジェクトをXcodeプロジェクトとして書き出して実行すると、以下のエラーメッセージが出てしまった。

```
'GoogleMobileAds/GoogleMobileAds.h' file not found
```

## 試したこと
iOSの依存関係のエラーを解決してくれるらしいので、以下の記事を参考にExternal Dependency Manager for Unity をインポートした。
記事には自分でDependencies.xmlを準備するとあったが、GoogleMobileAds-v5.4.0の中にそれらしきファイル（Assets/GoogleMobileAds/Editor/GoogleMobileAdsDependencies.xml）が存在したので、自分の環境では作らなかった。

https://qiita.com/nekojoker/items/231273c8422a88485b27

#現象2
最初は気づかなかったのだが、UnityでXcodeプロジェクトを書き出すと以下のエラーメッセージが出ていた。

```
iOS framework addition failed due to a CocoaPods installation failure. This will will likely result in an non-functional Xcode project.
```

##試したこと
どうやらCocoaPodsが正しくインストールされていないようだったので、以下の記事を参考にCocoaPodsをインストールし直した。

https://qiita.com/noprops/items/f997a438fabb64c15f10

自分の環境ではそれでもエラーが出たので、Unityのエラーメッセージに「実行しろ！」と書いてあったコマンドをそのままターミナルで実行してみた。

```
sudo gem install -n /usr/local/bin cocoapods
pod setup
```

コマンドを実行して

```
Setup completed
```

と表示されれば成功。
#現象3
現象2と同じエラーメッセージがまた出ていたので、下にスクロールしてみるとCocoaPodsが以下のエラーメッセージを吐いていました。

```
CocoaPods requires your terminal to be using UTF-8 encoding.
```

##試したこと
ターミナルのエンコードの問題だったので .bash_profile に以下の記述を追加

```
export LC_ALL="en_US.UTF-8"
```

これで自分の環境ではビルドに成功しました。
お役に立てば幸いです。
【Git】ローカルで開発している間にリモートの更新があったとき、差分を取り込む手順

チーム開発において、ローカル（featureブランチ）で自分が開発している間に、リモート（developブランチ）の更新があった際、その差分を取り込む手順。

下記の順番にコマンドを実行する。


```
$ git stash -u
  //-uオプションを付けることで、新規作成したファイルも保存する

ステージングした変更を元に戻す（VSCodeで操作）

$ git checkout develop 

$ git pull origin develop

$ git checkout feature

$ git rebase develop

$ git stash apply
```

### もしコミットしてから、リモートの更新に気付いたら…

自分の開発が終わったので、コミットを作成してリモートへプッシュしようとしている時。
リモートに更新があったことに、コミットを作成してから気付いてしまった場合は、下記コマンドで一旦コミットを取り消ししてから、上記の手順を行う。

```
$ git reset --soft "HEAD^"
  //WindowsではHEAD^を""で囲む必要がある
```

## 参考記事

https://cm3.hateblo.jp/entry/2015/08/01/211355
Swift 簡単なハーフモーダルを作成 

#今回の内容

* 簡単なハーフモーダルを作成 


#コードと簡単解説

##表示するViewを作成 (modalPresentationStyle = .customの場合)

* `modalPresentationStyle = .custom`で作成する場合、表示したViewを下にスワイプする事でViewを閉じる為に`UISwipeGestureRecognizer`の`.direction`を`.down`で設定します。

```Swift:
import UIKit

class ModalView:UIViewController{
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let downSwipeDetection = UISwipeGestureRecognizer(target: self, action: #selector(downScreenSwipe))
        downSwipeDetection.direction = .down
        view.addGestureRecognizer(downSwipeDetection)
        
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        view.frame.origin.y = UIScreen.main.bounds.maxY / 2
        view.frame.size.height = UIScreen.main.bounds.height / 2
        view.layer.cornerRadius = 20.0
        view.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
        view.backgroundColor = .systemGreen
    }

    @objc func downScreenSwipe(){
               
        dismiss(animated: true, completion: nil)       
    }
   
}
```

##表示するViewを作成 (modalPresentationStyle = .automaticの場合)

```Swift:
import UIKit

class ModalView:UIViewController{
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        view.frame.origin.y = UIScreen.main.bounds.maxY / 2
        view.frame.size.height = UIScreen.main.bounds.height / 2
        view.layer.cornerRadius = 20.0
        view.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
        view.backgroundColor = .systemGreen
    }
   
}
```

##ViewController

<img width="150" alt="8BA36CEB-9CCC-4127-A34E-377A61DD5DB3_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/2b7784e6-475e-dc0c-2d71-f9688fed96df.jpeg"> <img width="150.5" alt="EBEBF012-9567-4FC0-AA57-9F5EBC5BD70C_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/16857426-6f48-7c1d-6211-aec6a1d0a180.jpeg">

* `.modalPresentationStyle = .automatic`は左側の画像の様になります。
* `.modalPresentationStyle = .custom`　は右側の画像の様になります。

```Swift:
import UIKit

class ViewController: UIViewController {
    
    let showModalViewButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let showModalViewButton = UIButton()
        showModalViewButton.frame = CGRect(x: view.frame.maxX / 4, y: 100, width: view.frame.width / 2, height: 40)
        showModalViewButton.backgroundColor = .systemGreen
        showModalViewButton.setTitle("showModalView", for: .normal)
        showModalViewButton.titleLabel?.textColor = .black
        showModalViewButton.addTarget(self, action: #selector(showView), for: .touchDown)
        view.addSubview(showModalViewButton)
    }
    
    @objc func showView(){
        
        let modalVC = ModalView()
        modalVC.modalPresentationStyle = .custom //または.automaticなど 
        self.present(modalVC, animated: true, completion: nil)
    }
    
}
```

#終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
IIS とは

## 勉強前イメージ

略だけじゃなにがなにかわからん・・・

## 調査

### IIS とは

Internet Information Servicesの略で、アイアイエスと読みます。
Microsoft社のWindows Serverシリーズに入っているwebサーバのソフトウェアになります。
他にもapache,nginxなどもあります。
IISはapache,nginxとは違い、OSSではないです。

### IISのメリット

IISはwindowsベースなのでGUIを多用しており、
CUIより直感的な操作ができるという点がメリットになります。
コマンドを扱う必要がないので、直感的に開発することができます。
また、日本語の公式マニュアルが多いのも特徴です。

## 勉強後イメージ

IIS知らなかった・・・
windowsサーバ使ったことないけど、IISはwindowsだと使いやすいってことかな

## 参考

- [（Apache/Nginx/IIS）Webサーバー機能とは？よく使われるサーバーごとの違いについても解説](https://www.rworks.jp/system/system-column/sys-entry/16296/)
- [今さら聞けない「IISとは？」Windowsサーバーソフトを分かりやすく解説](https://www.kagoya.jp/howto/it-glossary/server/iis/)
RxJSのswicthMapを動かしてみる

# switchmapとは
switchMapとはoperatorの一つです。
ただし挙動が特殊です。しかも日本語の資料がほとんどインターネット上にないのでわかる範囲で挙動をまとめてみました。
ちなみに私の場合はAngularのプロジェクト内でRxJSを使っています。
**※素人が書いているので間違っているところがあれば指摘していただけると助かります**

# 動かしてみる
switchMapを一言でいうと受け取ったObservableが持っている値を下流に流すoperatorです。
とりあえず今回書いたコードを以下に転記します。

```src\app\app.component.html
<input type="button" value="rxjs" id="rxjsSample">
```

```src\app\app.component.html
  ngAfterViewInit() {
    let element = document.getElementById('rxjsSample');

    // クリックイベント時に1を流すObservableを作成する
    let click$ = fromEvent(element, 'click').pipe(
      mapTo(1)
    );

    // click$が流した値をコンソールに吐いた後、流れてきた値を3倍にするObservableを作成する
    click$.pipe(
      switchMap(
        value => this.innerObservable(value)
      )
    ).subscribe(value => console.log(`subscribe: ${value}`))
  }

  innerObservable(value) {
    console.log(value);
    return of(value * 3);
  }
```

実行結果
ボタンをクリックするたびに`1、subscribe: 3`がコンソールに出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/8fbab914-7e57-0818-3717-9a81501b0122.png)


Angularを勉強したことがない方向けに説明すると`ngAfterViewInit`は`window.onload`のようなもので、画面読み込み時に実行される関数だと思ってください。
switchMapはoparatorなので、当然pipeメソッド内で使用します。
とりあえずお作法としてswitchMapの引数には`関数オブジェクト`を渡します。また、関数オブジェクトの戻り値は`Observable`でなければいけません。
今回でいうとswitchMapには`value =>this.innerObservable(value)`という関数オブジェクトを渡していて、`of`で作成されたObservableが関数から返されます。
ここでswitchMapはボタンクリック時に`mapTo(1)`により流れてきた1を受け取り、`innerObservable`を実行しています。`innerObservable`では受け取った値（ここでは1）をコンソールに出力して`3`(正確には1 * 3)を流すObservableを返しています。
**switchMapはof(3)を受け取り、of(3)が流す値（つまり3）を下流に流します。**
つまりここでは`click$`が流した`1`をもとに新しいObservableを作成することで値を作成しています。**（ここ重要）**


# もう一つの特徴
さっきの例ではクリックしたらすぐに3が流れますが、もし`of(3)`ではなく`interval(1000)`のような何秒も値を流し続けるObservableを使った場合、注意するべき挙動があります。

```src\app\app.component.html
<input type="button" value="rxjs" id="rxjsSample">
```

```src\app\app.component.ts
  ngAfterViewInit() {
    let element = document.getElementById('rxjsSample');

    // クリックイベント時に1を流すObservableを作成する
    let click$ = fromEvent(element, 'click').pipe(
      mapTo(1)
    );

    click$.pipe(
      switchMap(value => {
        return interval(1000).pipe(take(5))
      })
    ).subscribe(value => console.log(value));

  }
```

結果
of(3)の代わりに`interval(1000).pipe(take(5))`を使用しているので一回クリックすると0, 1, 2, 3, 4が1秒おきに流れます。
**値が流れている途中にもう一度クリックを押すと1回目にクリックに対応する値は流れなくなり、2回目のクリックに対応する値のみが流れます。**
つまり、新しい値が流れてくると内部Observableによる値の放出が止まるということです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/39f70984-f73f-8396-83bd-336aeeb8ef4c.png)

[引用（日本語訳）](https://rxjs.dev/api/operators/switchMap)
>ソースObservableによって発行された各アイテムに指定した関数を適用することに基づいて、アイテムを発行するObservableを返します。この関数は、（いわゆる「内部」）Observableを返します。これらの内部Observableの1つを監視するたびに、出力Observableは、その内部Observableによって発行されたアイテムの発行を開始します。新しい内部Observableが放出されるとswitchMap 、以前に放出された内部Observableからのアイテムの放出を停止し、新しい内部Observableからのアイテムの放出を開始します。後続の内部オブザーバブルでは、引き>続きこのように動作します。
chroot環境内でターミナルエミュレータを起動すると"Failed to open PTY: そのようなデバイスはありません"と表示されるときの対処法

debootstrapコマンドでDebian環境をセットアップし、chrootて起動させた簡易Debian環境でも、tightvncパッケージをインストールし、vncserverコマンドを実行することで、VNC経由でGUI環境にすることができる。 

しかしながら、そのままの状態ではXtermが起動せず、試しにxfce4-terminalをインストールして試すと、"**Failed to open PTY: そのようなデバイスはありません**"と表示され、ターミナルが起動しなかった。 

#環境
ホスト : Ubuntu 20.04.3
chroot環境 : Debian GNU/Linux 11
 
#対処法
この問題は、**/dev/pts**デバイスがマウントされていないと発生するらしい。
##/etc/fstabの編集
root権限で、適当なテキストエディタで**/etc/fstab**を開き、末尾に以下の行を挿入する。

```/etc/fstab 
none /dev/pts devpts gid=5,mode=620 0 0
```

##/dev/ptsのマウント
root権限で、以下のコマンドを実行する。

```sh
mount /dev/pts
```

これにより、chroot環境内でもXtermなどのターミナルエミュレータが利用可能となる。
MySQL 既存データを使ったデータでupdateを行う方法

## 目的

- 既存データに文字列を追加した値でupdateを行う方法をまとめる

## 何をしたいか

- 下記のようにデータが格納されている`update_tests`テーブルがあったとする。

    | id | url |
    | --- | --- |
    | 1 | 681ff186f4d6f9057135 |
    | 2 | 545180847dcb9cb4ba8 |
    | 3 | eb09c065ee9bb7e8fe06 |

- update文で下記の様にデータを修正したい。

    | id | url |
    | --- | --- |
    | 1 | https://qiita.com/miriwo/items/681ff186f4d6f9057135 |
    | 2 | https://qiita.com/miriwo/items/545180847dcb9cb4ba8 |
    | 3 | https://qiita.com/miriwo/items/eb09c065ee9bb7e8fe06 |

## 準備

- 下記のSQLを実行してテーブルを作成し、update前の状態を作った。
    1. `create database update_test;`
    1. `use update_test;`
    1. `create table update_tests (id int, url text);`
    1. `insert update_tests (id, url) values(1, '681ff186f4d6f9057135');`
    1. `insert update_tests (id, url) values(2, '545180847dcb9cb4ba8');`
    1. `insert update_tests (id, url) values(3, 'eb09c065ee9bb7e8fe06');`
- 下記SQLを実行して下記と同じ表示が出力されることを確認する。
    - テーブル構造

        ```sql
        mysql> show full columns from update_tests;
        +-------+------+--------------------+------+-----+---------+-------+---------------------------------+---------+
        | Field | Type | Collation          | Null | Key | Default | Extra | Privileges                      | Comment |
        +-------+------+--------------------+------+-----+---------+-------+---------------------------------+---------+
        | id    | int  | NULL               | YES  |     | NULL    |       | select,insert,update,references |         |
        | url   | text | utf8mb4_0900_ai_ci | YES  |     | NULL    |       | select,insert,update,references |         |
        +-------+------+--------------------+------+-----+---------+-------+---------------------------------+---------+
        ```

    - 格納されているデータ

        ```sql
        mysql> select * from update_tests;
        +------+----------------------+
        | id   | url                  |
        +------+----------------------+
        |    1 | 681ff186f4d6f9057135 |
        |    2 | 545180847dcb9cb4ba8  |
        |    3 | eb09c065ee9bb7e8fe06 |
        +------+----------------------+
        ```

## 方法

1. 下記SQLを実行して既存データを使ってupdateを実行する。

    ```sql
    update update_tests
    set url = concat('https://qiita.com/miriwo/items/', update_tests.url);
    ```

1. 下記を実行して確認するとurlカラムの情報がupdateされたことがわかる。

    ```sql
    mysql> select * from update_tests;
    +------+-----------------------------------------------------+
    | id   | url                                                 |
    +------+-----------------------------------------------------+
    |    1 | https://qiita.com/miriwo/items/681ff186f4d6f9057135 |
    |    2 | https://qiita.com/miriwo/items/545180847dcb9cb4ba8  |
    |    3 | https://qiita.com/miriwo/items/eb09c065ee9bb7e8fe06 |
    +------+-----------------------------------------------------+
    ```

## 参考文献

- [https://style.potepan.com/articles/19076.html](https://style.potepan.com/articles/19076.html)
- [https://zenn.dev/kurosu66/articles/1f8822cfda6d19](https://zenn.dev/kurosu66/articles/1f8822cfda6d19)
- [https://dev.mysql.com/doc/refman/8.0/ja/update.html](https://dev.mysql.com/doc/refman/8.0/ja/update.html)
apexchartsでデータが無いときに任意のテキストを表示する

#はじめに
react-apexchartsを用いてグラフの描画を行っています。
データが無いときに、「まだデータがありません」というテキストを表示させるのに少し手間取ったのでメモします。

#option: noDataを使う
データが無いときのテキストの指定には、`noData`というoptionを使います。
以下は円グラフをReactで表示させるときの例です。
グラフの代わりに「データがありません」のテキストを表示できます。

```PieCharts.js
import React from 'react';
import Chart from 'react-apexcharts';

const PieCharts = (props) => {

  const [options, setOptions] = useState({
    labels: ['A', 'B', 'C', 'D'],
    colors: ['#FADE03','#33691E', '#0D47A0', '#B71C1C'],
    noData: {                
      text: 'データがありません'                //noDataにデータが無いときに表示するテキストを指定する
    }                              
  })

  const [series, setSeries] = useState([])   // seriesに[]を渡す→データなし

  return (
    <React.Fragment>
        <Chart
          options={options}
          series={series}
          type="pie"
        />
    </React.Fragment>
  );
}
export default PieCharts
```

#noDataに指定できる項目
noDataには以下の設定をすることでテキストの表示を編集できます。
詳細は[公式](https://apexcharts.com/docs/options/nodata/)をご確認ください。

```noData.js
noData: {
  text: undefined,
  align: 'center',              //または left, right
  verticalAlign: 'middle',　    //または top, bottom
  offsetX: 0,
  offsetY: 0,
  style: {
    color: undefined,
    fontSize: '14px',
    fontFamily: undefined
  }
}
```


#noDataが適用されるときの条件
noDataに指定したテキストが表示される条件は、
__`series`の値が`[]`となっていること__です。
`series`が`undefined`, `null`, `0`となっているときは適用されません。
私はここでつまづきました・・・。

#参照した記事
・[apexcharts公式](https://apexcharts.com/docs/options/nodata/)
・[公式のissue](https://github.com/apexcharts/apexcharts.js/issues/361)→noDataの適用条件がコメントされています。
djangoの条件分岐処理についてまとめる

今回のお題
-
今回のお題は条件分岐です。

djangoテンプレートの条件分岐処理はpythonのそれとは勝手が違う部分がいくつかあるのでそこに関してまとめます。

繰り返し処理でも似たような試みをしているのでよろしければどうぞ。

https://qiita.com/keishi04hrikzira/items/93ac3727306bbc97b6c9

目次
-
- and, orについて
- yesnoフィルター
- firstof

and, orについて
-
djangoテンプレートのandとorは`andを先に処理する`というルールが決まっており、かつ()で無理矢理順番を変えることはできません。

なので、orを先に処理して欲しければif文をネストさせることになります。

```django
{% if x % 2 == 0 or y == 10 and z != 0 %}
<!-- 上記は次のものと等価 -->
if x % 2 == 0 or (y == 10 and z != 0):

if (x % 2 == 0 or y == 10) and z != 0:
<!-- ↑のようにしたければ↓のように書く -->
{% if y == 10 and z != 0 %}
  {% if x % 2 == 0 %}
```

また、`10 < x < 30`のような書き方もできません。

```python
if 10 < x < 30:
# これは次のように書く
{% if x > 10 and x < 30 %}
```

yesnoフィルター
-
yesnoフィルターを用いると、対象の値が`true`, `false`, `none`のいずれかによって表示する値を変えることができます。

```django
{{ is_teacher?|yesno:"教師,生徒,部外者" }}
```

上記の例であれば、`is_teacher?`という変数の真偽値に応じて教師・生徒・部外者のいずれかが出力されるようになっています。

なお、Noneの場合の値を省略した場合には、Noneの場合もfalseの値が表示されます。

firstof
-

```django
{% first 値1 値2 ... 値n %}
```
とすることで、falseではない最初の値を出力します。

値1 ~ 値nに関しては変数とそれ以外を混ぜることができるので、

```django
{% firstof 変数1 変数2 ... 変数n "文字列" %}
```
のようにしておけば、`変数が全てfalseもしくはivewsから与えられていない場合には"文字列"を出力する`というようにすることもできます。

終わりに
-
以上、djangoに特有の(pythonにはない）条件分岐処理についてまとめました。

慣れるのが若干大変ですが、うまく使いこなせればコードが楽に描けるようになるので早く身につけたいですね。
【PHP】エクスクラメーションマーク2つでbooleanに型変換する

PHPのコードを読んでいて、以下のような書き方を見かけた。

```php:
$count = $this->user->where('name', $name)->count();
return !!$count;
```

$countには0もしくは1の数字が入っている。

この$countに対して「!」の否定演算子を2回連続で行うと、boolean型に変換できるらしい。

つまり、以下の2つは同じ意味になる。

```jsx
return (boolean)$count;
return !!$count;
```

初めて見た書き方だったので、覚書き。

### 参考記事

https://techgekka.hateblo.jp/entry/2018/01/24/133933
【@firebase/rules-unit-testingを使おうとしたら、Cannot find module 'firebase/compat/~' エラーが出た。解決法】

firestoreのテストをしようとしていたときに遭遇したエラーの解決方法です。

```jsx
Cannot find module 'firebase/compat/database' from 'node_modules/@firebase/rules-unit-testing/dist/index.cjs.js'
```

【解決した方法】
エラーにもある`'node_modules/@firebase/rules-unit-testing/dist/index.cjs.js'` 内のcompatモジュールを挟み込んでいる`require`を修正。

```jsx
// ・・・

// firebaseV9対応問題を後回しにして、testが通るように修正したcode
require('firebase/database');
require('firebase/firestore');
require('firebase/storage');
var fetch = require('node-fetch');
var firebase = require('firebase/app');

// もともとのfirebaseV9に対応させるように互換性をもたせていたcode
// require('firebase/compat/database');
// require('firebase/compat/firestore');
// require('firebase/compat/storage');
// var fetch = require('node-fetch');
// var firebase = require('firebase/compat/app');

//・・・
```

【予想される原因】

もともとfirebaseはバージョン8で利用していた。

その後firebaseバージョン9がリリースされた。

その後、**@firebase/rules-unit-testingのバージョンが2系に上がり、firebaseバージョン9互換のcodeになっていたが、もともとバージョン8を使っていたため互換性を持たせるためのcompatライブラリがinstallされておらず、エラーが出た。**

##compatライブラリとは？

version9に対応するための互換ライブラリ
[Upgrade from version 8 to the modular Web SDK | Firebase Documentation](https://firebase.google.com/docs/web/modular-upgrade#about_the_compat_libraries)
> 現在FirebaseWeb SDKバージョン8以前を使用しているアプリは、このガイドの手順を使用してバージョン9への移行を検討する必要があります。
> 

バージョン9への移行を徐々に実施するためのライブラリ。

**使い方としては、バージョン８のアプリをcompatライブラリで書き換えていき、バージョン９と共存させる。最終的に`modular` を使うように更新していく。**

firebaseのバージョンを9に上げた際にコメントアウトしたところは戻すことになりそうだ。
canvasを使って、Imageオブジェクトにアウトラインを引く方法


## 目標
透過色付きpngを読み込んで、その画像の縁に沿ってラインを引きます。
今回の方法はブラウザでもnode上で動くnode-canvasでも使える方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294146/d8eaf671-0a7d-f106-0874-56961ab9fb6d.png)

## コード
一例として、読み込んだImageの縁に黒いラインをつける。

```javascript
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // Imageオブジェクトを読み込む。今回はネット上の画像を使う。
  // node-canvasの場合`const img = await loadImage(imagePath)`とかで可能
  const img = new Image;
  img.onload = draw;
  img.src = "http://i.stack.imgur.com/UFBxY.png";

  const s = 10; // thickness scale
  const x = 0; // final position
  const y = 0;

function draw() {
  for (let i = 0; i < 360; i++)
    ctx.drawImage(img, x + Math.sin(i) * s, y + Math.cos(i) * s);

  ctx.globalCompositeOperation = 'source-in';
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 合成モードを'source-over'に戻して上書き
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(img, 0,0,img.width, img.height);
}
 
 

```



## 参考
[Draw outline from image](https://stackoverflow.com/questions/61419819/draw-outline-from-image)
複利を活かした積立ってすごい

複利で資産を積立運用するシミュレーションをよく見ますが、実際どんな計算式で計算されているか気になったので求めてみました（高校生の数学でできるので、まったく大した内容ではありません）。ついでにiDeCoの効果をシミュレートしました。



## 複利で積立運用するときの式

$N$: 積立する年数 [年]
$M$: 毎年積み立てる額 [万円]
$r$: 年利 [割合]
であるとき、複利が働く場合に得られる金額は以下になります。

```math
\sum_{i=1}^{N} (1+r)^{i} M
```

積立する年数が指数に入ります。だから複利を使った運用はすごいんですね。$r = 0.1$、$N = 30$なら、$(1+r)^{30} = 17.450$です。30年目以降は、毎年積み立てる額$N$が17倍以上増えるわけです。すごい！



## 例（iDeCoを使った場合）
$N = 30$年、$M = 27.6$万円（iDeCoで1年に積み立てられる満額）、$r = 0.05$のときは

```math`
1925.398 万円
```

$r = 0.1$のときは

```math`
4994.039 万円
```

のお金を運用で得ることができます。

なおiDeCoであれば、運用益が非課税になるので、20.315 %も普通に積み立てるよりお得になります。なので$r = 0.05$のときは

```math`
1925.398 万円 x 0.20315 = 391.145 万円
```

$r = 0.1$のときは

```math`
4994.039 万円 x 0.20315 = 1014.539 万円
```

もお得になります。

更にiDeCoだと、投資に回した額が控除になります。もし所得税20 %、住民税10 %だとすると、27.6万円 x 0.3 = 8.280万円も毎年節税になります。つまり、もし$r = 0.1$だとすると

```math`
1014.539 万円 + 8.280 万円 x 30 年 = 1262.939 万円
```
がトータルで節税されます。日本人の平均年収3年分ぐらいの節税になっていますね。iDeCo、すごい。
AWS CLIを使ってAMIからEC2をリストアする際に、リストア元のAMIのタグを引き継ぐ方法

#はじめに
今携わっているシステムでは、ＡＷＳを使っています。
通常時はＥＣ２インスタンスを東京リージョンで稼働させ、月次でバックアップ（ＡＭＩ、ＥＢＳスナップショット）を取得したうえ大阪リージョンに転送しています。
東京リージョンに大規模災害が発生する際に、大阪リージョンに転送されたAMIから、ＥＣ２インスタンスをリストアするためです。

#リストア方法
世の中的にCloudformationやTerraformなどのＩａＣを活用してリストアする方法が主流になっていますが、おとなの事情により、シェルスクリプトにAWS CLIを叩く処理を記載し、リストア時に実行するというやり方を取っています。
なお、パラメータ等は外部ＪＳＯＮファイルに記載し、ＡＷＳ　ＣＬＩコマンドのオプションとして渡すようにしています。


#AMIのタグが引き継がれない問題
ＡＭＩからＥＣ２をリストアするには、以下のようにrun-instancesコマンドにＡＭＩ IDを渡すという方法を取りますが、このまま実行してもＡＭＩに含まれるタグが引き継がれないので、リストア後に手動でタグを付与するという手間が発生する（一部オプションを省略しています）。
`aws ec2 run-instances --image-id $IMAGE-ID`　


#ＡＭＩからタグを取得してインスタンスに付与する
run-instancesコマンドを実行する際に、tag-specificationオプションで
>ResourceType=string,Tags=[{Key=string,Value=string},{Key=string,Value=string}] 

のフォーマットに従ってタグを渡せば、タグ付きのインスタンスを作成できます。

でしたら、ＡＭＩからタグを取得し、それをtag-specificationに渡せば手動でタグをつける手間がなくなります。

ＡＭＩからタグを取得するには、以下のようにdescribe-imagesコマンドをフィルター付きで実行します。
`aws ec2 describe-images --filters "Name=image-id,Values=$IMAGE_ID" --query 'Images[0].Tags[*]'`

そしたらこのように、ＡＭＩのタグが返されます。
>[
      　　{
        　　　　"Key": "Key1",
        　　　　"Value": "Value1"
      　　},
      　　{
        　　　　"Key": "Key2",
        　　　　"Value": "Value2"
      　　}
    ] 

しかし、これをそのままtag-specificationに渡しても、エラーで終わってしまいます。
なぜなら、tag-specificationが必要としているフォーマットと異なるからです。

#解決方法
以下のように、ＡＭＩから取得したタグから、
 - 角括弧を削除
 - ダブルクォーテーションを削除
 - スペースを削除
 - 改行を削除
 - コロンを＝に置換
などをし、整形します。

```
TAGS=`aws ec2 describe-images --filters "Name=image-id,Values=$IMAGE_ID" --query 'Images[0].Tags[*]' |tr -d '['|tr -d ']'|tr -d '"'|tr -d ' '|tr -d '\n'|tr ':' '='`
```

整形したタグを、変数化し、tag-specificationに渡します。

```
aws ec2 run-instances \
--image-id $IMAGE_ID \
--tag-specification ResourceType=instance,Tags="[$TAGS]" \
--cli-input-json file://${INSTANCE_NAME}.json \
--query "Instances[*].InstanceId" \
--output text
```

#スクリプト
以上をまとめると、以下のようなスクリプトが出来上がります。

```shell:ec2-restore.sh
#リストア先のリージョン。今回は大阪リージョン
REGION="ap-northeast-3"

#インスタンス名。インスタンスのＮａｍｅタグとしても定義されています。
INSTANCE_NAME="SAMPLE-INSTANCE"

#インスタンス名をキーに、作成日が一番新しいＡＭＩのＩＤを取得する
IMAGE_ID=`aws ec2 describe-images \
--filters "Name=tag:Name,Values=$INSTANCE_NAME" \
--query "reverse(sort_by(Images[].{CreationDate:CreationDate, ImageId:ImageId},$CreationDate)) | [0].ImageId" --region $REGION |tr -d '"'`

#AMIから、タグを取得する
TAGS=`aws ec2 describe-images --filters "Name=image-id,Values=$IMAGE_ID" --query 'Images[0].Tags[*]' |tr -d '['|tr -d ']'|tr -d '"'|tr -d ' '|tr -d '\n'|tr ':' '='`

#ＡＭＩからインスタンスをリストアする。諸々パラメータは、${INSTANCE_JSON}.jsonという外部ファイルで渡しています。
INSTANCE_ID=`aws ec2 run-instances \
--image-id $IMAGE_ID \
--tag-specification ResourceType=instance,Tags="[$TAGS]" \
--cli-input-json file://${INSTANCE_NAME}.json \
--query "Instances[*].InstanceId" \
--output text`


```
AfterEffects　3Dレイヤー　カメラ

■3Dレイヤー
奥行きを作る。
右の立体□マークをつける。

![スクリーンショット 2021-11-02 19.20.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/5f6a6e62-992d-d41e-1bd1-db24a4c047f4.png)

位置　右に奥行き用0.0が表示。
方向
X回転
Y回転
など3D奥行きを駆使した調整ができるようになる。

###▼位置奥行き変更時(カスタムビューで見た場合)
![スクリーンショット 2021-11-02 19.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/d1ef705b-2df8-da80-f0a3-6bd3c07a0e74.png)
注意：奥行きを変更すればサイズが小さくなるので奥行き変更後元のでかさに戻す。

###▼方向変更時
立体に見える。
![スクリーンショット 2021-11-02 19.24.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/d721ac8f-5130-3604-42f1-d183324a507f.png)

#■カメラ
あたかもカメラを自分で動かして見えるようになる。

新規ー＞カメラ

下記設定
![スクリーンショット 2021-11-02 19.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/dafe0dfd-71d2-fc69-ed68-21e77adc6000.png)

レイヤーにカメラが追加される。

![スクリーンショット 2021-11-02 19.28.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/39b86de6-79da-beb0-ec43-d32b2074d110.png)

カメラのZ位置を変更しキーフレームを打てば奥行きにズームできる。

![3d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/329d5c9e-71c8-3971-be4e-53f0a80fee20.gif)

###■参考Youtube
https://www.youtube.com/watch?v=WquPI-XhDtI
clocコマンドを使ってステップ数(Lines of code)を計測する

## 対象

- ステップ数を計測してと言われて、「???」となった方。
- IDEではなく、コマンドラインから計測する方法を探している方。

## 結論

以下のコマンドラインツールを使う

https://github.com/AlDanial/cloc

公式ドキュメントが詳しいので、以下は不要だが、パっと見で、後で自分で見るためのメモみたいなもの

### ローカルマシンに色んなものを入れたくない人

Dockerが入っていれば以下を使うことができる。

```
docker run --rm -v $PWD:/tmp aldanial/cloc
```

### Mac, Homebrewな人

```
brew install cloc
```

### よく使いそうなオプション

```
# ファイル除外 (正規表現)
cloc . --fullpath --not-match-f='(package-lock.json)|(yarn.lock)'
```

```
# ディレクトリ除外 (正規表現)
cloc . --fullpath --not-match-d='dist/'
```

```
# 指定の拡張子ファイル除外
cloc . --exclude-ext=svg,md
```

```
# git管理下ファイルのみ対象とする (内部でgit ls-files)
cloc . --vcs=git
```

```
# ignoreされたファイル一覧と、ignoreされた理由をファイル出力する (以下では例のため、git管理下という縛りを入れている)
cloc . --vcs=git --ignored=ignored.txt
```

```
# 結果をcsv形式で出力する
cloc . --csv
```

```
# 結果を(csv形式で)ファイル出力する
cloc . --csv --report-file="result.csv"
```

```
# clocコマンドで対応済みだが、自分のプロジェクトで拡張子が違う場合 (Velocity Template Languageは.vmと.vtlという書き方があるらしい)
cloc . --force-lang="Velocity Template Language",vtl
```
Power Queryの日本語教材まとめ(入門者向け)

# はじめに
「Power Queryの勉強法を教えてください！」と言われる機会が増えてきたので、まとめてみた。


# 補足
- いわゆる技術者向けの記事ではなく、Excel文化に親しみのある方を対象にした記事。
- 日本語教材で学習したい方を対象として、日本語教材に絞って紹介する。
- Power Pivot・Power BIの領域(≒データモデリング・データビジュアライズ)は対象外とする。
- 本記事で掲載する教材はあくまでも一例。他にもたくさんあるが、個人的にオススメなものを抜粋して掲載した。
- 紹介した教材に対する感想・コメントは主観的・個人的なもの。(「案件」等では全くありませんのでご安心ください。)


# 教材の種類
- Microsoft Docs
- 無料の動画教材(Youtube)
- 有料の動画教材(Udemyなど)
- 書籍


# Microsoft Docs
https://docs.microsoft.com/ja-jp/power-query/power-query-what-is-power-query

※公式ドキュメントには公式の良さがあると重々理解したうえで、個人的には入門者にはオススメしない。
和訳が読みにくいことと、入門者にとっては情報過多であると考えるため。
ある程度操作に慣れてきてから、正確な理解のために読むのは良いと思う。(上級者を目指すのであれば、公式ドキュメントの理解はもちろん必須)


# Youtube
https://www.youtube.com/watch?v=NbcKL1awWH8

Power Queryの全体像を短時間で大まかに理解したい方にオススメ。


# Udemy
https://www.udemy.com/course/masukawa_021/

情報量がちょうどよく、解説もとてもわかりやすいので、途中で挫折することなく学びやすい。
「動画で学びたいけど、Youtubeでは少し情報量が少ないと感じた方」にオススメ。
※Udemy for businessが使える会社に勤務している方には、無料で視聴可能なので特にオススメ。


# 書籍
https://www.amazon.co.jp/dp/B08R9JJ5D5

「動画教材の情報量に物足りなさを感じた方」にオススメ。
書籍ならではの充実した情報量がGood。
また、個人的な感想として、量だけでなく解説もとてもわかりやすかった。


# その他
https://tlp.edulio.com/excel-labo/cart/detail/3287

個人的には、入門者に１番オススメ。
M言語の基礎やEditor画面の解説が極めて丁寧で、Power Queryの原理・操作感を正確に理解することに重点を置いている点において、他の教材と一線を画している。
(他と比べて高額だが、受講した感想として、その価値は十分にあると感じた。)


# まとめ
- 出費を抑えたい方(&Udemy for businessで無料視聴できない方)：Youtube→書籍
- 出費を厭わない方：パワークエリ・ラボ→Udemy→書籍
- 時間もお金も無限にある方：Youtube→パワークエリ・ラボ→Udemy→書籍

非技術者の入門者(日本人)がいきなり公式ドキュメントを読み込もうとしても挫折する可能性が高いと思う。
まずは、親しみやすい動画教材をベースにして、とりあえず手を動かして全体像をイメージできる(E→T→Lのイメージをつかむ)ようになることが大切ではないだろうか。


# おわりに
中級者向けの記事を別途作成予定。
※ここでの「中級者」とは、GUI操作を一通り理解して、作りたいものをとりあえず作れるレベルと定義する。
(M言語の読解や、パフォーマンス改善等はあまり考えたことがないようなレベル)
SnowflakeのSnowsightを日本語UIにする方法

# このページは？

Snowsightを日本語UIで使うための方法を書いておきます。（2021/11時点の操作方法なので、UIがアップデートで変わったらすいません）

# 日本語UIの設定方法

1. プロファイルをクリック
1. 言語から日本語を選択
1. 日本語化完了

以下スクショ

### プロファイルをクリック
![hoge1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/4dad1af3-8317-1f41-6364-5580b3a399a2.png)

### 日本語を選択
![hoge2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/568f318c-18d2-f003-9513-8f538f110eb4.png)


**以上です!!!**

# 画面がなんか違うぞ？

と思ったら、コメント頂けたら更新します。