OmniAICreator/Qiita-1.07M huggingface dataset:
日経先物のSQ日を取得(毎月の第二金曜日)

今回は完全にメモ用である。過去から第二金曜日の一覧を取得したいと思う。
[こちらのサイト](https://note.nkmk.me/python-calendar-day-of-nth-dow/)を参考にさせていただいた。

```python
import calendar
import datetime

def get_day_of_nth_dow(year, month, nth, dow):
    '''dow: Monday(0) - Sunday(6)'''
    if nth < 1 or dow < 0 or dow > 6:
        return None

    first_dow, n = calendar.monthrange(year, month)
    day = 7 * (nth - 1) + (dow - first_dow) % 7 + 1

    return day if day <= n else None


#実行
dates = []

for year in range(2000, 2021):
    for month in range(1, 13):
        day = get_day_of_nth_dow(year, month, 2, 4)
        dates.append(["{}-{}-{}".format(year, month, day)])
dates = pd.DataFrame(dates, columns=["date"])
dates["date"] = pd.to_datetime(dates["date"])
dates
```

出力
<table border="1" class="dataframe">  <thead>    <tr style="text-align: right;">      <th></th>      <th>date</th>    </tr>  </thead>  <tbody>    <tr>      <th>242</th>      <td>2020-03-13</td>    </tr>    <tr>      <th>243</th>      <td>2020-04-10</td>    </tr>    <tr>      <th>244</th>      <td>2020-05-08</td>    </tr>    <tr>      <th>245</th>      <td>2020-06-12</td>    </tr>    <tr>      <th>246</th>      <td>2020-07-10</td>    </tr>    <tr>      <th>247</th>      <td>2020-08-14</td>    </tr>    <tr>      <th>248</th>      <td>2020-09-11</td>    </tr>    <tr>      <th>249</th>      <td>2020-10-09</td>    </tr>    <tr>      <th>250</th>      <td>2020-11-13</td>    </tr>    <tr>      <th>251</th>      <td>2020-12-11</td>    </tr>  </tbody></table>

# 結論
過去の日経先物のSQ日が一瞬で計算できる。（祝日の例外は無視しているが、、、
HTMLのタグの性質について

# 自己紹介
こんにちは、私はプログラミングを勉強し始めたばかりです。
先日HTML勉強した時に<font color="Teal">HTMLのタグに意味がある事</font>を知りました。
以前見様見真似で書いた時に適当にタグをつけて書いてしまっていたので勉強も兼ねて今回はタグに意味について書こうと思います！
# はじめに
HTMLのコードを描く前に設定する<font color="Teal">決まり事</font>がいくつかあります。
見ていきましょう！

```html:Hello.HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
DOCTYPE宣言
```
##1.DOCTYPE宣言
`<!DOCTYPE html>`はDOCTYPE宣言といい性質は
・ <font color="DarkBlue">書く文書がHTMLであることを宣言する</font>。
・ <font color="DarkBlue">HTMLのバージョンを明記する</font>。
・ <font color="DarkBlue">DTD（文章の構成要素）がなにか明記すること</font>。

の３つが目的です。ブラウザは宣言の内容に従って、文書を表示します。

##2.言語の指定 

- `<html lang="ja">`の`""`（ダブルクォーテーション）の中で表示する言語を設定します。
- “ja”で日本語のWebページになります。

##3.headとbody
* headタグとbodyタグはhtmlタグの直下で<font color="Teal">1度だけ</font>使用するHTMLタグです。
* `<head>`にはtitleなどの文章情報要素が入ります.
* `<body>`には文章を構成する要素が入ります。

##4.ページのタイトル
- `<title>タイトル</title>`と入力します。
- ページを開いた時にタブに表示される部分です。
- どのページにも必ずタイトルがあります。検索する際のデータにもなるで<font color="Crimson">必ずきちんと</font>つけましょう。



# タグの基礎
###:question:そもそも何故タグを変えるのか

- 人間は文字の太さや大きさで見出しと判断できますが機械はできないので<font color="Crimson">見出しの場所を教えてあげる必要</font>があります。
- そのためにそれぞれ<font color="Crimson">役割を持ったタグ</font>を入力します。
- 今回はよく使うタグを数個ご紹介します！


##Webページの構築によく使われているタグ
###1.`<p></p>`
- pタグはよく使われるタグです。
- <font color="DarkBlue">ひとつの文書のかたまり・段落</font>で使用されます。

###2.`<b></b>`
- bタグは文章内で強調したい部分等に使用されるタグです。
- 挟まれた文字は太字になります。

###3.`<strong></strong>`
- 文章内でさらに<font color="DarkBlue">強調したい部分、重要な部分</font>に使われます。 　
- strongタグで挟まれた文章内に、さらにstrongタグで囲むことで強調の段階をつけることができます。

##リスト関連タグ
###1.`<ul></ul>`
 - ul要素は配置する文章のリストに、番号などの情報を<font color="Teal">持たせない場合</font>に使用します。

###2.`<ol></ol>`　

- ol要素配置する文章のリストに、番号の<font color="Teal">情報を持たせる場合</font>に使用します。

###3.`<li></li>`
- 1つのリストの要素を意味するタグで、必ずulリストかolのリストのタグに囲まれます。

##リンクタグ
###1.`<a></a>`　
- a要素はWebページ内で<font color="Crimson">別のページをリンクさせる時</font>などに使用します。
- aタグの中の`href=""`でURLを指定します。
- また、`target=""`でリンク先の開き方を指定することができます。　
- `_self` :現在のウィンドウに表示
- `_new` :新規ウィンドウ（1つ）に表示
- `_blank`:新規ウィンドウ（複数）に表示などがあります。

###2.`<img>`
- img要素は<font color="Crimson">画像を配置するタグで、終了タグを必要としない</font>タグです。
- `src=""`で画像のあるURLを入力します。
- `width`や`height`で<font color="Crimson">画像サイズの指定</font>もできます。

#まとめ
今回紹介したタグ以外にもいろいろなタグがたくさんあります。
 是非タグをもっと詳しく調べて上、使い分けてよりよくコードを書きましょう！
最後まで読んでいただき有り難う御座います

#参考リンク
https://tree-file.com/web-design/htmltag-basic/
puppeteer はじめの一歩

# Install

```shell
npm init -y
npm install --save puppeteer
```

* node.js がインストールされていれば良く、Chrome をインストールしておく必要は無い

# Basic

## example (Google のトップページのスクリーンショットを撮るだけ)

```js
const puppeteer = require('puppeteer');
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://google.com');
    await page.screenshot({
        path: 'ss.png',
        fullPage: true
    });
    await browser.close();
})();
```

## ヘッドフルモードとスローモーション再生

```js
const browser = await puppeteer.launch({
    headless: false,
    slowMo: 500 // ms
})
```

## シークレットモード

```js
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();
```

## DOM 指定

* CSS セレクタ
  * <https://webliker.info/css-selector-cheat-sheet/>
  * `page.$()` 複数の場合は `page.$$()`
* XPath セレクタ
  * <https://qiita.com/rllllho/items/cb1187cec0fb17fc650a>
  * `page.x$()`
* 操作
  * [class: ElementHandle](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-elementhandle) のメソッドが利用できる
  * [class: Page](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page) のメソッドも利用できる

## 待機

`waitFor` 系のメソッドを使用する。

ただし、「クリック後、画面遷移を待つ」ような場合は、その二つの動作を並列に実行しておくこと。

```js
await Promise.all([
    page.waitForNavigation(),
    page.click('.button'),
]);
```

上記ふたつを `await` で並べてしまうと、タイミングによってはクリック後ずっと待ち状態に入ってしまうため。

## example (Google で「puppeteer」と検索した結果のスクリーンショットを撮る)

```js
const puppeteer = require('puppeteer');
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://google.com');
    
    await page.type('.gLFyf', 'puppeteer')
    
    await Promise.all([
    page.waitForNavigation(),
    page.click('.gNO89b'),
    ]);
    
    await page.screenshot({
        path: 'ss.png',
        fullPage: true
    });
    await browser.close();
})();
```

# memo

* Puppeteer は Chrome に特化している。Selenium は WebDriver を挟むことで、他ブラウザにも対応できる

# 参考

* Web+DB Press Vol.109 『[速習] Puppeteer』
  * ここまでの話以上に、テストでの実践やスクレイピングサンプルもあり、オススメな記事
* <https://github.com/puppeteer/puppeteer>

-----
PHP LaravelをIISで稼働させる

PHP LaravelをIISで構築します。

OS：Windows10 Pro
Webサーバー：IIS10

IIS10でPHPを稼働させるには、「CGI」を有効にする必要があります。
「コントロールパネル」から「プログラムと機能」を選択します。
「Windowsの機能の有効化または無効化」を選択して表示されたウインドウから
「インターネットインフォメーションサービス」を選択して、
「World Wide Webサービス」-「アプリケーション開発機能」-「CGI」にチェックを入れて「OK」してください。

インストールが完了したら、IISマネージャーを立ち上げてください。
<https://windows.php.net/download/>
からNon Thread SafeのZIPファイルをダウンロードします。

ZIPを解凍したら、[php.ini-production]を[php.ini]にリネームしてコピーしてください。

php.iniファイルをエディタで開いて、以下の設定を追加・変更します。

fastcgi.impersonate = 1
fastcgi.logging = 0
cgi.fix_pathinfo = 1
cgi.force_redirect = 0

展開したフォルダ内にある、[php-cgi.exe]を実行してください。

エラーが出ていないことを確認してくださいね。

次に、ACLを設定します。
PHPフォルダにデフォルトのIIS起動ユーザである「IIS_IUSRS」にアクセス権を追加します。
アクセス権はデフォルトのまま、変更の必要はありません。

次に、PHPランタイムを登録します。
IISマネージャーを起動して、左側の接続ペインからコンピュータ名をクリックします。
真ん中のビューの下側に、機能ビューとコンテンツビューが表示されていますが、
そのうち、機能ビューを選択して、「ハンドラーマッピング」をダブルクリックします。
右側の操作ペインから「モジュールマップの追加」を選択して、以下の内容を登録してください。
・要求パス　　*.php
・モジュール　FastCgiModule
・実行可能ファイル　PHPのインストールパス\php-cgi.exe
・名前　　　　　PHP

「要求の制御」ボタンをクリックして、マップタブの「要求のマップ先が次の場合のみハンドラーを呼び出す」に
チェックをいれて、「ファイルまたはフォルダ」を選択して「OK」します。

動作確認
<c:\inetpub\wwwroot>にinfo.phpファイルを作成します。
エディタで開いて、以下を入力してください。
<?php phpinfo(); ?>

ブラウザを開いて、
<http://localhost/info.php>にアクセスしてPHP情報が表示されていることを確認できれば完了です。
【Rails】Vagrant環境でRailsチュートリアル１章のHerokuデプロイができない

RailsチュートリアルではCloud9での開発を前提に解説されているが、今回Vagrant環境で進めることにした。
```1.5.3 Herokuにデプロイする (2)```でRailsチュートリアル通りに最後までデプロイしたが、ブラウザには｢Heroku | Welcome to your new app!｣のメッセージが表示され、設定したHTMLが表示されない...


## 結論
~~~
$ heroku git:remote -a [Herokuアプリ名] 
~~~
が必要。


[Herokuアプリ名] は```$ heroku create [Herokuアプリ名] ```した際の[Herokuアプリ名]。アプリ名を指定せず単に```$ heroku create```した場合はそのあとのメッセージに出てくる下記```saXX-meXX-XXXXX```部分のこと。

```ruby:参考
 $ heroku create
Creating app... done, ⬢ saXX-meXX-XXXXX
https://saXX-meXX-XXXXX.herokuapp.com/ | https://git.heroku.com/saXX-meXX-XXXXX.git
```


## どういうことか

調べてみるとどうやら「Herokuのサーバーにリポジトリを紐付けていないためエラーが表示される」ようだ。


```$  git remote -v```コマンドを試してみると、GitHubは接続されているようだが、やはりリポジトリ一覧にherokuが表示されてない。（本当は下記に```heroku URL```が出るはず）

~~~
$  git remote -v
origin  git@github.com:example.git (fetch)
origin  git@github.com:example.git (push)
~~~
    
下記を入力しherokuを紐付け。

~~~
$ heroku git:remote -a Herokuアプリ名
~~~

すると下記のメッセーが出てsetされた模様。

~~~
% heroku git:remote -a saXX-meXX-XXXXX
set git remote heroku to https://git.heroku.com/saXX-meXX-XXXXX.git
~~~
    
再度リポジトリ一覧確認　→　Herokuも接続できている！

~~~
% git remote -v
heroku	https://git.heroku.com/saXX-meXX-XXXXX.git (fetch)
heroku	https://git.heroku.com/saXX-meXX-XXXXX.git (push)
origin	git@github.com:example.git (fetch)
origin	git@github.com:example.git(push)
~~~
    
そして再度、

~~~
＄　git push heroku master
~~~
    
ブラウザにHTMLが表示され、できた！！！

## まとめ
Vagrantで開発する場合だとチュートリアルの指示の他にこのような手順が必要なようです。

*** 
### 参考サイト
* [Herokuで「Error: Missing required flag」が出る場合](https://blog.tanebox.com/archives/630/)

* [[Herokuエラー]Error: Missing required flagが出た](https://qiita.com/hirokik-0076/items/71c104158fa8b963ba8)
TensorFlow 2.0 の Frechet Inception Distance (FID) の計算の tf.linalg.sqrtm() で Nan が出るときの応急処置

# 概要

[[1]](https://machinelearningmastery.com/how-to-implement-the-frechet-inception-distance-fid-from-scratch/) の numpy で書かれたコードを TensorFlow 2.0 に移植するため、FID の計算を TensorFlow のみでしようとしていたところ、`scipy.linalg.sqrtm()` では計算可能な `2048x2048` の `ndarray` の平方根を求めようとしても、TensorFlow 側だけ `Nan` になってしまう現象にぶつかった。

- TensorFlow 1.0 でも同じ現象が起こるというイシューが GitHub に立っている (同じことをすれば対処できるはず)

# 対処法

対処には二段階必要です。

まず、`tf.linalg.sqrtm()` の一個前の計算である、$\Sigma_r \Sigma_g$ の時点で、`tf.cast` を噛ませて `float64` に設定しないといけません。TensorFlow のデフォルトは `float32` のため、計算が失敗する可能性があるらしい[^issue]です。

[^issue]: https://github.com/tensorflow/tensorflow/issues/31731#issuecomment-522617924

```
sigma1, sigma2 = tf.cast(sigma1, tf.float64), tf.cast(sigma2, tf.float64)
```

次に、[[2]](https://github.com/bioinf-jku/TTUR/issues/4) を参考に、微小の数値 `eps` を対角行列として加え、その後行列の掛け算を行います。ここでは、全て型を `tf.float64` に設定しないといけません。

```
eps = tf.constant(1e-6, dtype=tf.float64)
offset = tf.eye(2048, dtype=tf.float64) * eps
tdot = tf.tensordot(sigma1+offset, sigma2+offset, axes=1)
```

これで対処が終わりました。あとは、

```
covmean = tf.linalg.sqrtm(tdot)
```

で、一応計算が通り、ほぼ同じ計算結果になります。

# 問題点

計算は止まらなくなったものの、TensorFlow 側の計算が、Scipy の計算より数十倍遅いので、修正方法が分かり次第追記する。

# 参考
- [1] How to Implement the Frechet Inception Distance (FID) for Evaluating GANs: https://machinelearningmastery.com/how-to-implement-the-frechet-inception-distance-fid-from-scratch/
- [2] FID get "nan" or "complex number": https://github.com/bioinf-jku/TTUR/issues/4
【WSL2】Windows10 & ubuntu20.04 の環境作成

#概要
WSL2(Windows Subsystem for Linux 2)を使ってWindowsPC上でUbuntuを動作させる。

# 1. Windows OS のバージョン確認

WSL2を使う為にはWindows のビルドバージョンが18917以降である必要がある為、まずはWindows10のビルドバージョンを確認する。

Windows -> 設定 -> システム -> バージョン情報
または、WindowsPowerShellを起動して下記を実行することでも確認できる。

```powershell:PowerShell
systeminfo | Select-String "^OS"
```
OS バージョン:          10.0.18363 N/A ビルド 18363

上記のようにOSバージョンが要件を満たしていない場合は、Windows Insider Programから更新バージョンを入手する必要がある。

Windows -> 設定 -> 更新とセキュリティ -> Windows Insider Program

規約確認とアカウント連携を行った後、Slow(推奨)またはfastを選択して再起動する。
（Slowだと月に1,2度のアップデート、fastだと週に1度程度のアップデートがある。アップデートの度に再起動が必要なのでよくわからない場合はSlowでよい）

再起動後、Windows Updateから更新バージョンを入手する。
更新バージョンのダウンロード、インストール、再起動などで時間がかかるので注意。

更新を行ったところ以下の様にバージョンが更新された。
OS バージョン:          10.0.19041 N/A ビルド 19041

# 2.WSLの設定

WindowsPowerShellを管理者権限で起動後、下記のコマンドでWindowsの仮想化機能の有効化し、PCを再起動する。

```powershell:PowerShell
Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform
 ```

再起動後、同様にPowerShellでWSLの有効化を行う。

```powershell:PowerShell
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
 ```
# 3.Ubuntu のダウンロード
MicroSoft StoreからUbuntu20.04をダウンロードする
MicroSoft Storeを開いてUbuntu20.04 LTS を選択し、ダウンロードを行う。

インストールしたUbuntu20.04を起動し、usernameとpasswordを設定する。

#4. WSLの切り替え

まずは下記コマンドでWSLのバージョンを確認する。

```powershell:PowerShell
> wsl -l -v
  NAME            STATE           VERSION
* Legacy          Stopped         1
  Ubuntu-20.04    Running         1
```

次に、下記コマンドでwslのバージョンを変更する。

```powershell:PowerShell
2> wsl --set-version Ubuntu-20.04 2
変換中です。この処理には数分かかることがあります...
WSL 2 を実行するには、カーネル コンポーネントの更新が必要です。詳細については https://aka.ms/wsl2kernel を参照してください
```

上記のようにカーネルコンポーネントの更新を求められた為、下記のサイトに行って wsl_update_x64.msi をインストールする。
https://aka.ms/wsl2kernel

インストール後、再度コマンドを実行しところ無事にWSL2へ変更することができた。

```powershell:PowerShell
> wsl --set-version Ubuntu-20.04 2
変換中です。この処理には数分かかることがあります...
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
変換が完了しました。

> wsl -l -v
  NAME            STATE           VERSION
* Legacy          Stopped         1
  Ubuntu-20.04    Stopped         2
```

#参考
https://www.geekfeed.co.jp/geekblog/wsl2-with-windows10-insider-preview-build
[Python]04章-03 いろいろなデータ構造（多次元リスト）

#[Python]04章-03 多次元リスト
前回まではリストを作成して、そこから操作する方法を学びました。
今まで作成したリストは、1次元のリストでした。今回は2次元以上のリストの作成についてみていきます。

##多次元リストの作成
今まで学んだリストは1次元のリストでした。このリスト内には、文字列や数値を入れられ、任意のデータ型を入れることができました。

実は、リスト内にはさらにリストも入れることができます。これを**多次元リスト**と言います。

具体的に見ていきましょう。
**Python Console**に以下のコードを入力してください。

```.py
>>>lsls = [[23, 24], [37, 38], [41, 42]]
>>>lsls
[[23, 24], [37, 38], [41, 42]]
```
リストの各要素がリストとなっている形です。これを表で表すと以下のようになります。

| 番号| 0 | 1 | 2 |
|:-:|:-:|:-:|:-:|
| 要素 | [23, 24]  | [37, 38]  | [41, 42]  |

上の表を参考にしながら、**lsls**に要素番号を指定すると各要素を確認できます。

```.py
>>>lsls[2]
[41, 42]
```

では、[41, 42]の42を取り出すにはどうしたらよいでしょうか？
[41, 42]の42は、2番目の要素の中の1番目の要素となりますので、以下のように指定します。

```.py
>>>lsls
[[23, 24], [37, 38], [41, 42]]
>>>lsls[2][1]
42
```

なお、紹介程度としてとらえてほしいのですが、以下のように3次元リストも作成が可能です。

```.py
>>>lslsls = [[[1, 2],[5, 6]], [[10, 11],[15, 16]], [[26, 27],[28, 29]]]
>>>lslsls
[[[1, 2], [5, 6]], [[10, 11], [15, 16]], [[26, 27], [28, 29]]]
>>>lslsls[2]
[[26, 27], [28, 29]]
>>>lslsls[2][0]
[26, 27]
>>>lslsls[2][0][1]
27
```

表で表記すると以下のようになります。リストの要素の中に、2次元リストが格納されている様子がわかります。

| 番号| 0 | 1 | 2 |
|:-:|:-:|:-:|:-:|
| 要素 | [[1, 2],[5, 6]] | [[10, 11],[15, 16]] |[[26, 27],[28, 29]]|

##最後に
最後の3次元のリストは複雑なので、2次元リストまでで問題ありません。
実際のデータを表形式で表すことはよくあります。そういったデータを2次元リストに保管して処理することも可能なので、こういうこともできるということを知っておいてください。

###[【目次リンク】へ戻る](https://qiita.com/ko0821/items/379e8bd9e6ea01089419)
大阪府のコロナ追跡システムを考えてみる3

大阪府のコロナ追跡システムの開発費が80万円以内、14日間で納めるシステム開発続き。
初めての方は1からご覧ください。

#詳細設計(内部設計)
DFD(データフロー図)とデータベース設計書を作成する。

DFD
<img width="1366" alt="20753BFF-5B9F-428B-BB2B-A30F5D51651D.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640053/52c8857f-3abf-f3a5-0b44-3960ed08f3f2.jpeg">
事業者情報ばっかり。。。

##登録画面設計
Htmlを用いて事業者ごとに登録画面を作成する。


##データベース設計(covid.db)

###事業者管理テーブル(store)
|名前|カラム名|データ型|制約|
| :-- | :-- | :-- | :-- |
|事業者ID|Store_id|char|Primary,Not NULL|
|事業者名|Store_name|varchar|Not NULL|
|登録日|Reg_date|date|Not NULL|


###来客管理テーブル(visiter)

|名前|カラム名|データ型|制約|
| :-- | :-- | :-- | :-- |
|来客ID|Vis_id|char|Primary,Not NULL, AUTO_INCREMENT|
|事業者ID| Store_id|char|Foreign,Not NULL|
|メールアドレス|Address|varchar|Not NULL|
|来店日|Vis_date|Timestamp|Not NULL|


##QRコード作成システム設計
URL(https://covid-19tsuuchi.com/Store_ID) をQRコードとして発行してする。

##通知システム
感染者の情報を受けたら、来客テーブルを基に接触可能性がある者に通知する。
通知のフローは以下のフローチャートに従う。

<img width="735" alt="C1863FCC-6722-48BB-90D1-0DFDACF88792.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640053/1223bb0c-0b72-122a-1e39-e2bc484ba799.jpeg">


#まとめ
運用でカバーという言葉は好きではないですが、そうなりそうですね。
次回はプログラミングに入ります。先に宣言しますが、テストはしません。

※筆者のPCが絶賛故障し、新しいPCの到着を待っている状態のため、一度休止とする。
残りはhtmlでページ作成とDB作成程度であるが、現在iPadしかないため、そこまでするのは難しい。

ここまで書いた結論としては、予算80万でも意外とイケそう。である。
Githubに画像をアップロードする小技

新しいissueを作成

<img width="1051" alt="Screen Shot 2020-05-22 at 22.31.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196544/09d4cf7b-ad8b-bbc2-2f4b-2907d8da16a9.png">

矢印の辺りをクリックorドラック&ドロップで画像をアップロード

<img width="770" alt="Screen Shot 2020-05-22 at 22.33.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196544/c0c79333-11ce-8779-6f4d-cbaafcb0c095.png">

少し待つとリンクが生成される。このリンクをコピーをメモしておく。作成しようとしていたissueは破棄してOK。

<img width="795" alt="Screen Shot 2020-05-22 at 22.33.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196544/03dc17d0-9fca-e16c-4d78-62565a3bc3bc.png">

README等の本来画像を貼り付けたい位置にリンクをペースト

<img width="1033" alt="Screen Shot 2020-05-22 at 22.37.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196544/ac552219-83c9-20f6-fe53-a7d0734f30ae.png">

画像を埋め込むことが出来る
Javaのdouble型

###double型
double型は小数点以下を持つ数になります。
int型は整数で、1とか3とかです。
対してdouble型は1.2とか3.5とかの少数点以下に定義します。
####小数同士の計算
【例】

```Main.java
class Main {
  public static void main(String[] args) {
    double number1 = 8.9;
    double number2 = 1.2;
    System.out.println(number1 + number2);
    System.out.println(number1 - number2);
    
  }
}
```
上記の例だと結果は11.1と7.7になります。
はじめてのThree.js 2章 日記

[はじめてのthree.js](https://www.amazon.co.jp/dp/4873117704)

#新たに知った知識
- ceil関数はmathの切り上げ

```javascript
Math.ceil(.95) //1になる
```
- fogは一行

```javascript
scene.fog = new THREE.Fog(色, nearプロパティ, farプロパティ)
```
- 3dモデリングでは三角形派と四角形派がある
- faceは何番のポイントを3つ指定して生成する
- 鳥類にはfov(視野)が360°の生き物もいる, 通常は60-90(デフォルト50)


#気づいたこと
- オブジェクトを生成する時にnameプロパティを追加しておくと操作しやすい
- 一つのオブジェクトに対してのプロパティ多すぎ笑　早く覚えよう
- メインのプロパティはほとんどp5と同じ


#wow moment
- 

#まだ解決していない点
- 

[3章はこちら](https://qiita.com/asadsexyimp/items/0988fea78c0a825a9dfc)
Laravelでseederをsubdirectoryに設置したい時

Laravel 5.8

Seederの中でディレクトリを切りたい時。単にディレクトリを切るだけだとダメ。
composer.jsonのclassmapに追加する。

```composer.json
"autoload": {
    "classmap": [
        "app/commands",
        "app/controllers",
        "app/models",
        "app/database/migrations",
        "app/database/seeds",
        "app/tests/TestCase.php",
        "app/database/seeds/SubDirectory"  // <-- 追加
    ]
}
```

ついかしたら下記を実行

```
composer dump-autoload
```

参考
https://stackoverflow.com/questions/23919825/call-database-seeder-from-a-subfolder
Vivaldiで木タブを使いたい

#概要
vivaldiを再起動すると木タブが蒸発してしまうため，拡張機能のフォルダのパーミッションを変更し，このフォルダからパッケージを自作した上で再び読み込む~~する~~ことでこの問題を解決した．(2020/5/22訂正)

#環境
* Catalina 10.15.4
* Vivaldi 3.0.1874.38 (Stable channel) (64-bit)
* Tree Tabs 1.9.1 Vivaldi

Tree Tabs 2.xシリーズは，蒸発以前の問題が生じたので使っていません．

#現象
ExtensionフォルダにコピーすることでTreeTabsをインストールした．一度目は無事使えるが，再起動後は何も表示されず詰む．

#原因と解法
よくよく挙動を見ていると，Vivaldiを落とした際にExtensionフォルダからTreeTabsが消えていた．パーミッションを見ると，

```bash
$ ls -la
total 8
drwx------  6 kopli staff  192 May 22 22:15  ./
drwx------ 80 kopli staff 2560 May 22 22:16  ../
drwxr-xr-x 18 kopli staff  576 May 22 22:15 'Tree Tabs 1.9.1 Vivaldi'/
drwx------  3 kopli staff   96 May 22 21:53  任意のID/
drwx------  3 kopli staff   96 May 22 21:53  任意のID/
```

こんなことになっていたので，パーミッションを変更してあげた．

```bash
$ sudo chmod 700 
$ ls -la Tree Tabs 1.9.1 Vivaldi
total 8
drwx------  6 kopli staff  192 May 22 22:15  ./
drwx------ 80 kopli staff 2560 May 22 22:16  ../
drwx------ 18 kopli staff  576 May 22 22:15 'Tree Tabs 1.9.1 Vivaldi'/
drwx------  3 kopli staff   96 May 22 21:53  任意のID/
drwx------  3 kopli staff   96 May 22 21:53  任意のID/
```
これで再起動後もきちんと使えるようになると見せかけて，やっぱり消えてしまうのでさらに対策する(2020/5/22訂正)．

##パッケージ化(2020/5/22追記)
* 1.chrome拡張設定から，拡張機能のパッケージ化を選択し，導入に成功したTreeTabsを選択する．ルートディレクトリはめんどくさい回避のためにTreeTabsと同じディレクトリとする．
* 2.TreeTabsをchrome拡張設定から消去する
* 3.生成された```Tree Tabs 1.9.1 Vivaldi.crx```をchrome拡張設定にドロップしてインストールし，新たに付与されるIDからページの設定をする．

これで再起動後もきちんと使えるようになる．

#参考文献
 １.[Vivaldi で Firefox の ツリースタイルタブ (Tree Style Tab)の機能を実装させる方法](https://michaeluno.sakura.ne.jp/technotes/vivaldi-%E3%81%A7-firefox-%E3%81%AE-%E3%83%84%E3%83%AA%E3%83%BC%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%BF%E3%83%96-tree-style-tab%E3%81%AE%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%95/)
CircleCIについて

#前提
本日学んだことを書いていきます。

#本題

#CI（継続的インテグレーション）
変更されたソースコードがGitHubなどのリポジトリに提出(プッシュ)されるたびに自動でテストを行うことで、変更後のソースコードをリポジトリのメインライン(masterブランチなど)に統合(gitで言うところのマージ)可能な状態にする仕組み

#CD（継続的デリバリー）
メインラインのソースコードが変更されるたびに、自動で本番環境などにデプロイする仕組み

#RefreshDatabase
TestCaseクラスを継承したクラスでRefreshDatabaseトレイトを使用すると、データベースをリセットする

なお、トレイトは継承と似たPHPの機能で、汎用性の高いメソッドなどをトレイトとしてまとめておき、他の複数のクラスで共通して使う、という使い方をする

#テストのメソッド名
Laravelでは、テストにPHPUnitというテストフレームワークを使用する
PHPUnitでは、テストのメソッド名の先頭にtestを付ける必要がある
ここではindexメソッドのテストであるとわかるよう、testIndexという名前にすることにした

```
public function testIndex()
```
※メソッド名をtest始まりにしたくない場合は、以下の例のようにメソッドのドキュメントに@testと記述する

```
/**
 * @test
 */
public function initialBalanceShouldBe0()
{
    $this->assertSame(0, $this->ba->getBalance());
}
```

assertRedirect
引数として渡したURLにリダイレクトされたかどうかをテストする

```ArticleControllerTest.php
$response->assertRedirect(route('login'));
```
route('login')は、ログイン画面のURLを返す

factory関数とcreateメソッド
factory関数を使用することで、テストに必要なモデルのインスタンスを、ファクトリというものを利用して生成できる
factory(User::class)->create()とすることで、ファクトリによって生成されたUserモデルがデータベースに保存される
また、createメソッドは保存したモデルのインスタンスを返すので、これが変数$userに代入される

actingAsメソッド

```ArticleControllerTest.php
$response = $this->actingAs($user)
            ->get(route('articles.create'));
```
引数として渡したUserモデルにてログインした状態を作り出す
その上で、get(route('articles.create'))を行うことで、ログイン済みの状態で記事投稿画面へアクセスしたことになり、そのレスポンスは変数$responseに代入される


Arrange-Act-Assertについて

テストの書き方のパターンとして、AAA(Arrange-Act-Assert)というものがある
日本語で言うと、準備・実行・検証

```ArticleControllerTest.php
public function testAuthCreate()
    {
        // テストに必要なUserモデルを「準備」
        $user = factory(User::class)->create(); 

        // ログインして記事投稿画面にアクセスすることを「実行」
        $response = $this->actingAs($user)
            ->get(route('articles.create'));

        // レスポンスを「検証」
        $response->assertStatus(200)
            ->assertViewIs('articles.create');
    }
```

引数と戻り値の型宣言

```
public function isLikedBy(?User $user): bool
```
isLikedByメソッドの引数$userの手前には、?Userと記述されている
Userと記述されていることで、引数$userの型はUserクラスのインスタンスであることが宣言されている
さらにUserの手前に?があることで、引数としてnullが渡されることを許容している
PHP7.1から、このnullableな型宣言が使用できる
: boolとあるのは、このメソッドの戻り値が論理型(trueかfalse)であることを宣言している

三項演算子の利用

```
return $user
    ? (bool)$this->likes->where('id', $user->id)->count()
    : false;
```
$userがnullでなければ、

```
(bool)$this->likes->where('id', $user->id)->count()
```
の結果をメソッドの呼び出し元に返す
$userがnullであれば、falseを返す
[Python]関数

#関数定義
**def 関数名():**
□□**実行する処理**

```python
def hello():
    print("hello")
```

#関数の呼び出し
**関数名()**

```python
def hello():
    print("hello")

hello()
```

#多引数の関数
引数をカンマで区切る

```python
def hello(name , greeting):
    print(name + "さん、" + greeting)

hello("tanaka" , "こんにちは")
```
出力結果
tanakaさん、こんにちは
ESP32の書き込み時のエラー(Warning: Could not auto-detect Flash size (FlashID=0x0, SizeID=0x0), defaulting to 4MB)

#ESP32の書き込み時のエラー

```
esptool.py v2.6
Serial port COM6
Connecting........_
Chip is ESP32D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse, Coding Scheme None
MAC: **:**:**:**:**:**
Uploading stub...
Running stub...
Stub running...
Configuring flash size...
Warning: Could not auto-detect Flash size (FlashID=0x0, SizeID=0x0), defaulting to 4MB
Compressed 8192 bytes to 47...

A fatal error occurred: Timed out waiting for packet header
```

問題なのはこの部分

```
Warning: Could not auto-detect Flash size (FlashID=0x0, SizeID=0x0), defaulting to 4MB
```

チップとの通信はできているが、Flashへの書き込みエラーである
（通信が正常にできていなかったり、Boot modeに入っていなかったりすると、
これ以前で止まるため、その２点は正常なはず）

まず、CMD、CLK、SD0、SD1、SD2、SD3の6ピンが何かに接続されていないか確認。
→これらは内部フラッシュに接続されているため、何か接続するとFlashへの書き込みに悪影響を及ぼす可能性がある。

それらを外してもエラーが出る場合はチップが破損している可能性が高い。

しかし、以下を試して見る価値はあるかもしれないです。

下記を参考に工場出荷時にリセットしてみる。
[Tools | Espressif Systems](https://www.espressif.com/en/support/download/other-tools)
[AT | Espressif Systems](https://www.espressif.com/en/support/download/at?keys=&field_type_tid%5B%5D=13)
[ATコマンドモードのセットアップ](https://trac.switch-science.com/wiki/esp32_setup)


#参考URL
[A fatal error occurred: Timed out waiting for packet content](https://github.com/espressif/esptool/issues/394)
[Tools | Espressif Systems](https://www.espressif.com/en/support/download/other-tools)
[AT | Espressif Systems](https://www.espressif.com/en/support/download/at?keys=&field_type_tid%5B%5D=13)
[ATコマンドモードのセットアップ](https://trac.switch-science.com/wiki/esp32_setup)
シーザー暗号を噛み砕く

## 近況報告
　最近は就活（企業にひたすらESを送るだけの作業）ばっかで空いている時間にテックキャンプのドリルをしこしこ解いています。githubの草は生やし続ける。今日受けた企業さん，無事通っているといいな。

# 本題　シーザー暗号
　辞書順に3文字分シフトして暗号文を作る暗号
　　ex.　abc　⇨　cde

　シーザーというのは高校世界史を履修していたら知らない人はいないあのシーザー，カエサルさんのことを指します。ガリア戦記とか，「ブルートゥスお前もか」とかかなりの人が認知しているのではないのでしょうか。

　昔はパソコンもケータイもないアナログの時代，かろうじてエジプト文明がパピルスとか発明していたので文字を記録する文明はあったでしょう。ただ，文書の輸送手段は人の足です。となれば機密文書が道中で奪われてそれが原因で亡国の危機に晒されることは度々あったでしょう。

　カエサルは重要な情報の漏洩を防ぐためにこのような暗号を用いました。ちなみに甥のアウグストゥスも用いていたとか。なお，現代における**シーザー暗号はセキュリティの観点からは非常に脆弱である**ことは認識しておきましょう。

## パソコン上でのおおまかな方法
1.文字列を文字コードに変える
2.文字コードに任意の数を足す（引く）
3.文字コードを文字列に変更する

## サンプル　シーザー暗号の生成解読メソッド
前後させる数の大きさは任意です。

```
def cipherAction
  result = []　←配列の箱用意
  puts "暗号化したい文字は?"
  x = gets.to_s　←str型で定義
  x.chars.each do |i|　←文字列を１文字単位で分解
    code = (i.ord + 3)　←ordは文字コードに変換するメソッド
    result << code.chr　←継承
  end
    puts result.join("")　←1文字単位で格納されているのを文字列に整える
end

def deciperAction
  result = []
  puts "元に戻したい文字は？"
  y = gets.to_s
  y.chars.each do |j|
    code = (j.ord - 3)
    result << code.chr
  end
  puts result.join("")
end

puts "Select Action"
puts "１:暗号化"
puts "２:元に戻す"
input = gets.to_i
if input == 1
  cipherAction
elsif input == 2
  deciperAction
else
  puts "不正な入力です"
  exit
end
```

## おわりに
安直ではありますが，暗号化された分は何文字前後しているか分からないので解読は手間（まあパソコン使えばサクッとできますが）ですので日常レベルではまあつかえますね。
ベイジアンネットワークについての説明　イメージ、自作だから称えよ

ベイジアンネットワーク

ー＞　確率度数間の因果関係を視覚的に表現する方法

![コメント 2020-05-22 224357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641728/99ca0ee1-9c27-06f6-9b76-0049222d9fc7.png)

ー＞　わかりやすくベイズ統計ができるようになる図　

定義
基本知識：

加法定理　・乗法定理
加法　P(x)　= Σy p(x,y) ==周辺化

乗法　P(x,y) = P(x|y)p(y)

変形した乗法定理：P(x|y) = P(x,y)P(y)

この2つの定理を式変形して式を変化させて解いていくよ

ベイジアンネットワークを使うには必要最低限として三つの確率がある

P(a,b,c) = p(c | a.b) p(a,b) 
            = p(c | a,b ) p(b | c) p(a)

親と子ノードが一目瞭然
独立性や関係性を分かりやすく調べることが可能。

ノードの条件付け

3つのノードの関係性は3種類に分けられる
１．head to tail
2. head to head
3. tail to tail



１．head-to-tail
p(a,b,c) = p(b|c)p(c|a) p(a)　関連しているなら
cの条件によってa b がどうなるかを調べる。
p(a,b | c) = p(a,b,c) / p(c) = p(b | c) p(c|a) p(a) / p(c)==>
 p(b | c) p(a | c) 条件付き独立  

![コメント 2020-05-22 224933.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641728/a3850fb9-181b-d8d7-b190-98f944cc7d87.png)

例：プログラミングの勉強をする（A）　プログラムの仕事を受注する（B）　プログラムのスキルを取得する（C）
プログラムの勉強したらプログラムのスキルを取得できる可能性が上がる。つまりスキルがあれば関連の仕事を取得できる可能性が上がる。

また勉強しなければ、スキルを手にする可能性は影響しない。また関連の仕事を得る可能性も変わらない。　事象が独立している状態である。

いい例考えたわ、天才の類かな。



２．tail-to-tail 
p(a,b,c) = p(a|c)p(b|c) p(c)

cの条件によって‘a、bがどうなるかを調べる
p(a,b | c) = p(a,b,c) / p(c) = p(a|c) p(b|c) p(c) / p(c)
= p(a|c) p(b|c) 条件付き独立
![コメント 2020-05-22 224558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641728/ff9c59fe-9dbe-d9ee-365b-a1ba651e20f1.png)

例えば、お金が融資される場合（C）、PCの増設をする（A）またはおいしいものを食べに行く(B)確立に影響が起こる。
お金が融資されない場合（！C）、またA・Bにも影響がないかも。つまり条件CによってAとBが独立したイベントである。

３．head - to -head

p(a,b,c) = p(c| a,b) p(a) p(b)
 どう式変形しても独立の形にならない
![コメント 2020-05-22 224954.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641728/40e2c9eb-17d0-49e6-e28a-9e61c9531a2d.png)

例えば、AとBは2人の数学のテストの結果で、
Cはその間の差とかだとするとどうやっても関連性ができてしまうという話。
ラズパイ パイカメラの使い方 Python

#0.最初に
今回作るものがどういう感じで動くのか見てみたい方は、[こちら](https://youtu.be/G8aAlgi1hKs)(youtubeの動画)からどうぞまた、カメラを動かすプログラムだけ知りたいという方は、[パート2](https://youtu.be/KY1VbA7Ruac)(youtubeの動画)
[パート3](https://youtu.be/OHbWBUV033Y)(youtubeの動画)からどうぞ
#1.ラズパイのセットアップ
![alt](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616944/af827017-ab4b-fdb1-10c3-8a73641ecc98.png)

- ラズパイの専用スロットにパイカメラを青い線を右側(スロットの向きに合わせて)にして差し込む。スロットに
差し込むときは白いカバーを上に引いてから差し込み、終わったら押して戻す。なお、ラズパイにはスロットが２つあるがどちらでも可。　
![alt](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616944/5e7caf2d-4c24-3727-de00-36a4f67f49cd.png)
写真のとうりに差し込めば使えます。どのスロットにつけたにしてもカバーの方を青い線が向いていたら大丈夫です。　

- カメラも同様に取り付けます。
![alt](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616944/411cbd99-3c8c-9c7c-83d8-5ed71efa3ba6.png)


青い線がカバーの方に向いていたら大丈夫です。

- ラズパイの設定でカメラを有効にする。
コマンドラインで次のように打つとウィンドウが出てくるのでそこでカメラの項目を探し、有効にしてください。有効にしたら一度再起動します。

```
sudo raspi-config
```

#2.カメラのテスト
今度はもう一度コマンドラインで以下のように打つとディスプレイにプレビューが5秒間表示され、写真がtest.jpgという名前で保存されます。

```
raspistill -v -o test.jpg
```
#最後に
今回作ったものは[Youtube](https://youtu.be/G8aAlgi1hKs)でも解説しているのでそちらも良かったらご覧ください。質問、アドバイスなどがございましたらぜひコメントしてください。また、いいなと思ったら[チャンネル登録](https://www.youtube.com/channel/UCDYbu9aViDvkubFcwgbbKDA)お願いします。
pipreqsがUnicodeDecodeErrorになるときの対処法

#pipreqsとは
pythonの外部モジュールを使用した際のrequirements.txtを自動で書きだしてくれる奴。
プロジェクトフォルダ/hoge.pyとなっているときに、

```
cd プロジェクトフォルダ
pipreqs .
```

でhoge.pyのrequirements.txtがプロジェクトフォルダ以下に出るはずだったのが、

```
UnicodeDecodeError: 'cp932' codec can't decode byte 0x81 in position 239: illegal multibyte sequence
```

エンコードわかんねーぞでよく出るエラーが出た。

リファレンスを読む。
https://pypi.org/project/pipreqs/
--encodingオプションがあるらしい。

#解決コマンド
```
pipreqs --encoding UTF8 .
```

これで解決。

```requirements.txt
networkx==2.3
plotly==4.4.1
pandas==1.0.3
streamlit==0.60.0
```
無事に出てきました、おしまい。
OpenGLについて～超概要編

先日の記事でOpenGLというキーワードにぶち当たって、自分には耳馴染みのないワードだったので、簡単に特徴をまとめることにした。
*前回記事：【はじめての】WSLでubuntu18.04からIntel・Realsense435を動かそうとした結果* 
https://qiita.com/hanba-gu/items/7aabf62f47afab2ce5e4

#概要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411736/a54926dd-8e6b-89ea-5d6e-ce2e46cc7870.png)

OpenGLはSilicon Graphics社が開発したグラフィックス・インターフェイスAPI。オープン標準規格。
そもそもグラフィックス・インターフェイスAPIは簡単に言うと、ポリゴンや3Dグラフィックを表示させ、GPUの機能をMAXに活用できるようにするもの。

##OpenGLの特徴
1.**OSに依存しない**（Windows、UNIX系OS、Mac OS問わず利用可能）　
もともとはSGI社が開発したものですが、Microsoft社がライセンスを買って自社製品に搭載したため業界標準まで上り詰めたらしいが、OSを選ばないというのが広く使われた大きな理由。
※IphoneやAndoroidでは、OpenGLから派生したOpenGL ESを利用

2.機能がシステムと切り離されているため、ウィンドウ・システムと**連携するためのライブラリが必要**。
→上記1のOSを選ばないというメリットの反面、Windowsやlinuxで利用するための準備が必要になります。そこで利用されているのが、以下のツールキット。

GLUT - The OpenGL Utility Toolkit
→上記が古い？ため互換性のある「freeglut」のツールキットが使われることが多い 

Unix系

```Bash
$ sudo apt-get install freeglut freeglut-devel
(Debian, Ubuntu)
$ sudo apt-get install freeglut3 freeglut3-dev
(RedHat, Fedra)
$ sudo yum install freeglut
$ sudo yum install freeglut-devel
```

3.Direct Xとの違い
OpenGLと類似のテクノロジとしてMicrosoft DirectX(Direct 3D)があるが、Microsoftが開発した製品のため、Microsoft社製品に依存している。Windows、Xboxなどに利用。
OpenGL2.0リリースされた頃は、DirectXと比較しポリゴン数を稼いで高精度なグラフィックは得意だったが、ゲーム用のエフェクトが苦手だったため、CADなどで利用される場面が多かったが、OpenGL4.3以降は主な機能は同じレベルになっている。

4.**C言語でコーディングが出来る**
C/C++で提供されているが、FortranやJavaなど多言語向けのラッパー/バインディングも存在する

##参考

https://tokoik.github.io/opengl/libglut.html#1

https://ja.wikipedia.org/wiki/OpenGL

https://tokoik.github.io/opengl/libglut.html#2.3

https://ja.wikipedia.org/wiki/Microsoft_DirectX

https://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%AA%E3%82%B4%E3%83%B3
※ポリゴン画像引用
（小ネタ）pandas.DataFrameでワンライナーで列名順に列をソートする

pandasのDataFrameで、列を「列名」でソートしたいときに、さくっとワンライナーで実行する方法です。

※ (6/9） コメントでご指摘をいただき、一部書き換えました。


次のようなDataFrameがあったときに

```python
df = pd.DataFrame({4:[1,2,3], 2: [1,2,3], 1:[1,2,3], 3: [1,2,3]})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254095/005d7d3b-1293-2db9-54c9-9aea6fdfa2f1.png)

下のコードで実行できます。

```python

df.sort_index(1)
#または
df.T.sort_index().T
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254095/ed58c5a5-24d7-40eb-0407-0b65b923575a.png)

アルファベットの列名でも同様に実行可能です。

```python
df = pd.DataFrame({'d':[1,2,3], 'b': [1,2,3], 'a':[1,2,3], 'c': [1,2,3]})
df.sort_index(1)
#または
df.T.sort_index().T
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254095/b21bae9c-0284-c8a8-959c-4378ee8f2488.png)


ひらがなも上手くいきました。

```python
df = pd.DataFrame({'え':[1,2,3], 'い': [1,2,3], 'あ':[1,2,3], 'う': [1,2,3]})
df.sort_index(1)
#または
df.T.sort_index().T
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254095/7a8ae167-fa97-0b66-785e-a122863c0a8d.png)

漢字はダメでした。（なんか惜しいけど。）

```python
df = pd.DataFrame({'四':[1,2,3], '二': [1,2,3], '一':[1,2,3], '三': [1,2,3]})
df.sort_index(1)
#または
df.T.sort_index().T
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254095/4bac73e0-6845-8509-8257-9002b224f45f.png)

以上、どこかで使えるかもしれない小ネタでした。
ポインタ型変数自体にあるアドレスと、ポインタ型変数に代入されたポインタの示すアドレス

何言ってるんだってなると思うのでコードで。
ポインタ型変数自体のアドレスっていうのに一瞬混乱した。

```go
	// ポインタを格納する変数
	var test *int
	var test2 *int

	// ポインタを格納する変数に対して、ポインタを代入
	a := 1
	test = &a
	test2 = &a

	fmt.Printf("%#v\n", "aのポインタ(アドレス)")
	fmt.Printf("%#v\n", &a)    // (*int)(0xc000010108)


	fmt.Println("")
	fmt.Println("")
	fmt.Println("変数test")
	fmt.Println("")
	// 「ポインタを格納する変数に代入された変数」のアドレス
	fmt.Printf("%#v\n", "「ポインタを格納する変数に代入された変数」のアドレス")
	fmt.Printf("%#v\n", test)    // (*int)(0xc000010108)

	// 「ポインタを格納する変数に代入された変数」のアドレスからたどった値
	fmt.Printf("%#v\n", "「ポインタを格納する変数に代入された変数」のアドレスからたどった値")
	fmt.Printf("%#v\n", *test)    // 1

	// 「ポインタを格納する変数自体」のアドレス
	fmt.Printf("%#v\n", "「ポインタを格納する変数自体」のアドレス")
	fmt.Printf("%#v\n", &test)    // (**int)(0xc000006030)

	// 「ポインタを格納する変数自体」のアドレスからたどった値(つまり、変数に代入された値)
	fmt.Printf("%#v\n", "「ポインタを格納する変数自体」のアドレスからたどった値")
	fmt.Printf("%#v\n", *&test)    // (*int)(0xc000010108)

	fmt.Println("")
	fmt.Println("")
	fmt.Println("変数test2")
	fmt.Println("")
	// 「ポインタを格納する変数に代入された変数」のアドレス
	fmt.Printf("%#v\n", "「ポインタを格納する変数に代入された変数」のアドレス")
	fmt.Printf("%#v\n", test2)    // (*int)(0xc000010108)

	// 「ポインタを格納する変数に代入された変数」のアドレスからたどった値
	fmt.Printf("%#v\n", "「ポインタを格納する変数に代入された変数」のアドレスからたどった値")
	fmt.Printf("%#v\n", *test2)    // 1

	// 「ポインタを格納する変数自体」のアドレス
	fmt.Printf("%#v\n", "「ポインタを格納する変数自体」のアドレス")
	fmt.Printf("%#v\n", &test2)   // (**int)(0xc000006038)

	// 「ポインタを格納する変数自体」のアドレスからたどった値(つまり、変数に代入された値)
	fmt.Printf("%#v\n", "「ポインタを格納する変数自体」のアドレスからたどった値")
	fmt.Printf("%#v\n", *&test2)   // (*int)(0xc000010108)
```
UE4で先行入力を実装する

# 概要
世間一般的なアクションゲームでは、ジャンプや攻撃など様々なプレイヤーの操作に対して先行入力が効くようになっている。
今回はUE4のTimeline機能を使ってお手軽に実装しようという話。

# 実装
実装はとっても簡単に入力の直後にTimelineを差し込むだけ。
![timeline2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16285/a025d0e9-2bf7-1a1f-f01a-e9ca25842633.png)

タイムラインの中身は猶予時間だけを入れておく（今回は0.1秒6Fくらい）
![timeline1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16285/70150a7b-554a-0341-8920-26261fc4fb7d.png)

これで実入力から6F間はジャンプコマンドが繰り返され、着地の6F前の入力でジャンプすることができるようになる。
ちなみに2段ジャンプを許可する場合は、2段目を即受け付けないようにしておく必要がある。

おわり
defer属性で外部JavaScriptファイルはheadタグ内に

覚えたてため、記録に残しておく。

#これまではHTMLのbodyタグの1番最後に置いていた

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>title</title>
</head>

<body>
★<script src="./main.js"></script>
</body>
</html>
```

何故かというとHTMLのheadタグ内に外部JavaScriptファイルを読み込ませようとすると、HTMLのbodyタグ内を読み込む前にJavaScriptの内容を実行しようとするためエラーが発生する。そのため、HTMLのbodyタグ終了直前に外部ファイルを置いていた。そうすると、HTMLを読み込み終わってからJavaScriptが実行されるためエラーが発生しない。

#defer属性を追加すると
しかしながら、scriptタグにdefer属性というものを使用すると、外部JavaScriptファイルが非同期でダウンロードされ、HTMLファイルを読み込み終わってから外部JavaScriptファイルが実行されるためエラーが発生しない。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
★<script defer src="./main.js"></script>
  <title>title</title>
</head>

<body>
</body>
</html>
```

#参考
https://www.wakuwakubank.com/posts/614-javascript-async-defer/
【Salesforce】コンソール環境でレコードIDの確認方法

コンソールの場合、Classic／LEXの画面と異なり、URLにレコードIDが表示されない。 

以下の方法で確認可能、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625521/8c9b8cfc-e696-7b37-bc11-34506cd2bd3f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625521/2128ca48-c0c3-8ba6-599a-fcc2d58b05a5.png)

レコードを表示し画面右上の ▼ をクリック
↓
「共有するリンクを取得」をクリック
↓
[共有するリンク] 画面が表示され、「このタブのみを含める」を選択
↓
Classicと同様なURLが表示される。

また、
複数階層のタブがある場合、
　下位階層の▼で、上位階層含んだレコードの共有リンクが確認できる。
Javascriptの復習（1）

# この記事について
プログラミングスクールでJavaScriptを勉強した初心者がアウトプットの場として書いたものなので、偶然見つけてしまった人は閉じてください(見る価値がないと思います)。Rubyも既に学習したのでRubyと比較しつつ書いていきたいと思います。

# JavaScriptについて
スクリプト言語（習得が簡単になるように工夫されている）の一種で、ブラウザに動きのある変化を加えるのに必須な言語だそうです。Javaと名前が似ていますが、全くの別物です。

# JavaScriptの書き方
主に2つあり、①コンソール上に直接書く、②html上にscriptタグで呼び出す　の2通りです。
①の方法についてですが、コンソール上ではJavaScriptのコードの実行結果をその場で確認できます。
②については、以下のようにhtml上に書くことで呼び出すことができます。

```index.html

<body>
    <script>
        // この中にJavaScriptのコードを記述すれば実行結果が出る。
    </script>
</body>

```

また、JavaScriptのコードが書かれた別のファイルの名前を書くことでファイルごと呼び出すこともできます。

```index.html

<body>
    <script src="script.js"></script>
</body>

```

# console.log()
Javascriptの書き方を学ぶにあたって初めて使った関数で、括弧の中に文字列や数字を入れるとコンソール上で表示されます。

```script.js

//文の終わりに;をつける（無くても問題ない時もあるが念のため）
console.log("Hello World");

```

# 変数の定義
変数を定義すれば、関数に使用することができます。
Rubyと違い letという文字から定義を始める必要があります。

```script.js

//変数の定義(let 変数名 = 値や文字列)
let name = "猫";
//これで実行するとコンソールには"猫"と表示される
console.log(name);

//変数は上書きすることもできる
let name = "猫";
name = "犬"
//猫ではなく犬と表示される
console.log(name)

```

# 定数の定義（変数との違い）
定数も定義して使用するものですが、変数と違い上書きができないです。

```script.js
//定数の定義(const 変数名 = 値や文字列)
const name = "猫";
console.log(name);
//これで実行するとコンソールには"猫"と表示される
//定数を上書きしようとするとエラーが出ます。
name = "犬"

```
<img width="556" alt="スクリーンショット 2020-05-22 21.26.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614523/d6b69158-33a9-235c-0a67-05f63334e123.png">




一旦ここで区切ろうと思います。
次回は条件式について書こうと思います。
フィールドとプロパティの違い

#背景
入社して2年。なんちゃってSEになる気がしてきたので。。。
（まともにプログラム勉強する時間なんかねーよ）
C#をこれからまじめに勉強する。（つもり）

初めて２週間さっそく、フィールドとプロパティの違いがわからなくなり
ここに備忘録として記す。

#実行プログラム
本の値段を変数へ格納して、割引した値段を出力する。

```
	class Program
	{
		static void Main(string[] args)
		{
			//オブジェクト
			Book0 book0 = new Book0();
			Book1 book1 = new Book1();
			Book2 book2 = new Book2();

			//価格
			book0.price = 100;
			book1.set(1000);
			book2.price = 10000;

			//値引き率
			book0.rate = 0.8;
			book1.rate = 0.8;
			book2.rate = 0.8;

			//表示
			Console.WriteLine(book0.price * book0.rate);
			Console.WriteLine(book1.get());
			Console.WriteLine(book2.price);

			Console.ReadKey();
		}
	}

	//フィールドのみのクラス
	class Book0
	{
		public double price;
		public double rate;
	}

	//フィールドとメソッドを持つクラス
	class Book1
	{
		private double _price;
		public double rate;

		public double get()
		{
			return _price * rate;
		}
		public void set(double value)
		{
			_price = value;
		}
	}

	//プロパティのみを持つクラス
	class Book2
	{
		public double rate { get; set; }
		private double _price;
		public double price
		{
			get
			{
				return _price * rate;
			}
			set
			{
				_price = value;
			}
		}
	}
```
#違い
・プロパティを用いると、setとgetで別々の処理をすることができる。
　つまり、値段を変えず(setせず)に、値を取得(get)することができる。
・クラスBook1で記述している通り、プロパティはgetメソッド・setメソッドの関数が入っているようなものである。
・クラスBook0：フィールド同士の掛け算、クラスBook1：getメソッド、クラスBook2：プロパティ
　で、割引した値段を取ることができる。
【git】コミットのやり直し（pushしていない場合）

## 前提
さっきコミットしたファイルの記述を一部間違えたので訂正してコミットをやり直したい時。
pushしていないことが前提。


## A：直前のコミットをやり直す
~~~
①　(ファイルを修正する）
②　% git add .
③　% git commit --amend
(vim立ち上がりコメントを修正)
~~~
* 上記が終わったら、念のため```git --oneline log -p -n 3```などでうまくいってるか確認。

* 【vimの使い方】
  ```i```と打つと入力できるようになる→コメント入力やEscキーで切り替え→```:wq```と入力。

* コメントも修正したい場合はここで修正できる。

## B:何個か前のコミットをやり直す
~~~
①　% git rebase -i コミットID
②　ファイル修正
③　% git add ファイル名
④　% git commit --amend
(vim立ち上がりコメントを修正)
⑤　% git rebase --continue
~~~

###  ①について

例えば、直前３つのコミットをやり直すときは、

~~~
% git rebase -i HEAD~3
~~~
すると下記のようにvimが立ち上がる。
![799445A1-AF73-4FAF-8AE2-86383EA73DC2_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642283/db7ea296-8e7e-a5f4-a02b-b94c79bb32de.jpeg)
例えば、この３つのファイルのうち```first.html```を修正したいなら```pick```を```edit```に変更しEscキーで切り替え→```:wq```で閉じる。変更したくないファイルは```pick```のままにする。

### ②について

エディタで修正したいファイル（ここでは```first.html```）を開き、正しく修正し保存。


### ③、④のコマンドを入力
【vimの使い方】
iと打つと入力できるようになる→コメント入力やEscキーで切り替え→:wqと入力。

コメントも修正したい場合はここで修正できる。

これで```first.html```の修正は終了。

### ⑤について
次のコミット修正に進むために```git rebase --continue```入力。

①の時点で３つのファイルのうち他の```socond.html```と```third.html```は```pick```にしてたのでこのまま終了となる。もし他のファイルも```edit```にしていた場合はvimが立ち上がり同じ手順を繰り返す。

### 念のため```git --oneline log -p -n 3```などでうまくいってるか確認。

>参考文献：Udemy　もう怖くないGit!チーム開発で必要なGitを完全マスター (山浦 清透)
rspecでGraphQLのresolverをテストする

# はじめに
graphqlのテストってみなさんどう書いてますか？
queryを定義してテストもできますが、少し面倒だど感じている今日この頃。
そこで、queryとかmutationに定義されているresolverをrspecでテストする方法について説明します。

# mutationの例
例えば、以下のようなmutationを定義しているとしましょう。

```mutation.rb
module Mutations
  class CreateUser < BaseMutation
    argument :id, ID, required: true
    field :user, ObjectTypes::UserType, null: false

    def resolve(id: nil)
      user = ::User.create!(id: id)
      {
        user: user
       }
    end
  end
end
```
単純ですが、idをもらってuserを作成するmutationです。
今回のテスト対象はこのresolveになります。

# rspceを書く
ではさっそくrspecを書きたいと思います。

```create_user_rspec.rb
require 'rails_helper'

RSpec.describe CreateUser, type: :request do
  describe 'resolver' do
    it 'userが作成されていること' do
      mutation = CreateUser.new(field: nil, object: nil, context:{})
      mutation.resolve(id: [作成するuser_id])
      expect(..).to eq ..
    end
```
まず、mutationのクラスである`CreateUser`クラスのインスタンスを作成します。
引数のfieldとobjectは基本的にnullで良いと思います。
contextについては、場合によっては`current_user`を入れることもできます。その場合は `context:{current_user: User.first}`となります。

contextを直接入れられるのが便利ですよね。
そして、作成したmutationのresolveメソッドを読んであげればテスト上で定義したresolve内の処理が実行されます。
これだと、graphqlのテストがかなり楽にかけます！
[1/10]Google のベストプラクティスから生まれた Kubernetes のオープンソースエコシステム 受講メモ

Google Cloud で実現するモダンなアプリケーション開発 1/10


Googleのサービスは100%コンテナで運用されている

# コンテナのメリット

* 高速 : VMより早くて数msで起動
* ポータビリティ : 実行環境の統一で、安定性を保つ。依存関係もパッケージされているのでどのサーバーでも動く
* 効率性 : 低オーバーヘッドでリソース制限可能

コンテナだけだと起動はできるが、スケールの制御はできない。
どうするか↓

# コンテナオーケストレーション

## Kubernetes

コンテナの管理をする。

Googleで使われていたBorgの知見を元にさらに進化させてオープンソース化したもの
どこでも動くようにするのがゴールだった。GCPでもオンプレでもAWSでも。
ベンダーロックインを防止するというのが重要な視点

アプリ単位では管理できないからサービスメッシュを使う。

## Istio

サービスの管理をする。サービスの安定を考える
サービス間のセキュリティーポリシーも設定できる

Managed Service が Anthos

## Knative

アプリケーションの管理をする

アプリケーションのコードを書いて、それをデプロイすると、自動でスケーリングしてくれたりする
Dockerファイルさえ書けばインフラの管理をしてくれる

Cloud Run がこれに近い。


https://cloudonair.withgoogle.com/events/app-modernization-1/resources?mkt_tok=eyJpIjoiWmpOalpETXpNR0ppT0RSaiIsInQiOiJHUUZcL3B5SjNyTGlBSVhHbDU0dk16VU5nWFNPVkc1aTJzaHFcL1lZcEIzYXRyRklhZXlJVFhwTitzOHZ3M1wvOTZtcnBRUTZhK09EWTNcL3FcLzNPdnhIWjFST0tDcFhcL3EzV2VETUE5V2dEYmhMSG8yTHdFaXpha2REMzB1a2pxMVM5byJ9#?utm_medium=email&utm_source=google&utm_content=thankyou
はじめてのThree.js 1章 日記

[はじめてのthree.js](https://www.amazon.co.jp/dp/4873117704)

#始めた理由
- ある程度htmlとcssの知識があり、p5.jsのコーディング経験があったため
- 自作のポートフォリオサイトを作るためと将来仕事にするならリッチなサイトを作成したいため
Three.jsを勉強し始めた
- オライリーはdeep learningの本など質が良かったのと、three.jsを調べているとほとんどこの本がはじまりっぽかったので記録してみた


#新たに知った知識
- デスクトップでもモバイルでも結構webGLはサポートされてる(１部のみだと思っていた)
- Unix/Linuxシステムにはデフォルトでpythonがインストールされてる
- pythonのmオプションはmoduleのm
- npmのgオプションはglobalのg
- monogooawの存在
- webGLレンダラー以外にもCSS,SVG,canvasなどがある
- lookAtでカメラが対象物に向く
- shadowの計算は重いのでデフォルトではoffになってる
- statsはアニメーションをするのを手伝ってくれるライブラリ
- three.jsでよく見るGUIライブラリはgoogle発

#気づいたこと
- 環境構築段階でc9の話が出ていたけど、この時点ではまだamazonに買収されていないのでテック業界のスピードの速さを感じた
- VS codeのlive serverめちゃ便利
- 本の文字を追うよりもコードを読んだ方が早い時もある
- renderSceneはP5でいうdrawみたいな概念


#wow moment
- このサイトが一番最初に来たのはびっくりした
http://www.vill.ee/eye/

#まだ解決していない点

[２章はこちら](https://qiita.com/asadsexyimp/items/d54ab917500c53ba3b4d)
LaravelでUnitテストだけ実行する

結論、以下のようにしてtestスイートを指定してテストが実行できます。

```terminal
php vender/bin/phpunit --testsuite Unit
```

# 説明
プロジェクトが大きくなってくるとテストも増えてきて、テストを実行するときに部分的に実行したくなると思います。

LaravelだとテストはデフォルトでUnitとFeatureの2つのテストの種類がありますが、このうち高速なUnitテストだけをより高頻度で実行したすることができたら便利ですよね。

Laravelには、デフォルトでphpunit.xmlにテストの設定が書かれていてUnitテストとFeatureテストはそれぞれ別々のtestスイートとして設定されています。

```xml:phpunit.xml
    <testsuites>
        <testsuite name="Unit">
            <directory suffix="Test.php">./tests/Unit</directory>
        </testsuite>
        <testsuite name="Feature">
            <directory suffix="Test.php">./tests/Feature</directory>
        </testsuite>
    </testsuites>
```

これによりphpunitを実行するときに特定のtestスイートを指定するとその部分だけ実行できます。
【Golang】パニック、リカバー

#【Golang】パニック、リカバー
Golangの基礎学習〜Webアプリケーション作成までの学習を終えたので、復習を兼ねてまとめていく。 基礎〜応用まで。

```
package main
//パニック（例外）、リカバリー（復帰）
//パニックより推奨されているのは、エラーハンドリング
//強制的に終了する強力な機能な為、あえて使わない方がいい

import (
	"fmt"
)

//外部DB接続をイメージ
func thirdPartyConnectDB() {
	//パニックを起こす。例外を発生させる。
	panic("Unable to connect database!")
}

func save() {
	//deferを先に書く
	defer func() {
		//リカバリー システム終了をキャッチして復帰させる。
		s := recover()
		fmt.Println(s)
	}()
	thirdPartyConnectDB()
}

func main(){
    save()
	fmt.Println("リカバーしているので表示される")
}
```
例外のまとめ　自分用


## 記事まとめ 

https://speakerdeck.com/jnchito/number-rubykansai-2018-01-13?slide=28


## 例外の基本

```

パターン1
def some_method
  
  1 / 0
rescue ZeroDivisionError => e
  puts e.class
  puts e.message
  puts e.backtrace
end


パターン2
def some_method
  begin
    1 /0
  rescue ZeroDivisionError => e
    puts e.class
    puts e.message
    puts e.backtrace
  end
end

```

## 使っていい場合

仲間を道ずれにしたくない場合など

```
users.each do |user|
 beginn
  send_mail_to(user)
 rescue => e
   puts e.backtrace
 end
end

```


## 例外をかくポイント

- ログを残す
  - backtraceを
- 通知する
  - slackなどに

- 例外の対象範囲は狭くする
- 例外もテストする

## 例外の対応方針

- 業務エラーとシステムエラーに切り分ける
  - 業務エラー
    - ユーザーミス
    - 権限エラー
  - システムエラー 
    - バグ（シンタックなど）
    - ネットワーク、DBエラー

- 業務エラー
=>がモデルで対応
=> 返り血を検証する（saveなども true falseが返ってきている）

- システムエラー
DribbbleでFlutterのUI実装力を高める

みなさん、こんにちは
とあるサラダ🥗の会社で開発やってます umatoma です。

最近はFlutterのUI実装力を高めようと、
Dribbbleで公開されているデザインをFlutterで再現してみているので、紹介したいと思います。


# Dribbble

https://dribbble.com/
> Dribbble is the world’s leading community for creatives to share, grow, and get hired.

Dribbbleには👇のように、様々なデザインが投稿されていて、
アプリUIに関するデザインも沢山🤩あります。

また、動画で投稿されているものもあったりして、
アニメーションを含んだデザインが見れる点はとても良いです👍

で、このDribbleで公開されているデザインをFlutterで再現して、
FlutterのUI実装力を高めようと試みています💪💪💪

![スクリーンショット 2020-05-22 19.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632977/00303e72-339c-062c-94a0-0daf74ff6887.png)


# DribbbleのデザインをFlutterで再現してみる

今の所、こんな感じでDribbbleのデザインをベースにFlutterで再現してみました。

| デザイン | Flutterで再現してみたやつ |
| :---: | :---: |
| [Mobile Digital Wellbeing Application by Umar Abdul Azis on Dribbble](https://dribbble.com/shots/11372128-Mobile-Digital-Wellbeing-Application) | ![sign-in-sign-up.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632977/bd924a58-c665-23ce-4d43-c3225aabccbf.png) |
| [Sign In/ Sign Up Page App UI by Md. Hafizur Rahaman on Dribbble](https://dribbble.com/shots/11433513-Sign-In-Sign-Up-Page-App-UI) | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632977/597a3e4d-e801-0fa5-1ecc-7b296b090148.png) |
| [Flight and Hotel Booking App by Subash Chandra on Dribbble](https://dribbble.com/shots/11424144-Flight-and-Hotel-Booking-App) | ![flight-booking.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632977/29731f15-241e-5ef3-f686-9130d816920a.png) |
| [UI modeling. Admin mobile main views set by Maxim Aginsky on Dribbble](https://dribbble.com/shots/11474230-UI-modeling-Admin-mobile-main-views-set) | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632977/2d282784-7152-9e33-3f47-28939ca626e8.png) |

詳しい実装方法の説明は👇で紹介しているので、良かったら見てみて下さい👀

- [様々なUIを作ってみる | Flutterで始めるアプリ開発](https://www.flutter-study.dev/create-ui/top)
  - [Sign In / Sign Up](https://www.flutter-study.dev/create-ui/sign-in-sign-up)
  - [Admin Mobile](https://www.flutter-study.dev/create-ui/admin-mobile)
  - [Flight Booking](https://www.flutter-study.dev/create-ui/flight-booking)
  - [Battery Optimizer](https://www.flutter-study.dev/create-ui/battery-optimizer)

# Flutterで再現してみて

形状が複雑でない多くのパーツは
標準で提供されいるWidgetを組み合わせることで簡単に実装することができました。

ですが、少し凝った形状になるとただWidgetを組み合わせるだけで
実現するのが難しくなりました😥

そういった時は `ClipPath` や `CustomPaint` などを使って、
自分で `Path` を描きデザインを実装する必要があります。

それがデメリットかと言うと、そうでもないかなと思っています。

[UI modeling. Admin mobile main views set by Maxim Aginsky](https://dribbble.com/shots/11474230-UI-modeling-Admin-mobile-main-views-set) のインジケーター部分のように、
複雑なデザインのパーツがあたっとしても
`CustomPaint` などを使えば自分で描画すれば実装できてしまうという事です。

Flutterは提供されているWidgetを組み合わせるだけでも整ったUIを実装することができますが、
やはり、凝ったデザインを実装するには `CustomPaint` などを使いこなす必要がありそうです💪

今後は、アニメーションを含めたUIの実装にチャレンジして行きたいと思います。


# まとめ

- Flutterに限らず、UI実装力を高めたい時のデザインを探すにはDribbbleを使うと良い
- FlutterのUI実装力を高めるには `CustomPaint` などを扱えるようにする


# 最後に

今回のデザインの実装方法を含めた、
Flutter入門用のWebサイトを公開しているので、興味があったら使ってみて下さい。

Flutterで始めるアプリ開発
https://www.flutter-study.dev/
テーブルのデータを分割して全件取得する　パフォーマンス

パフォーマンスについて
例えば、データ数が多いため分割取得するためのselect文はどのようにすればよいか。

あまり、詳しくはないのですが最近調べたことをメモします。

分割取得でたまに見かけるのが、limit offsetです。
ただ、並び順を担保するために、order byが必要となります。（DBによって違う？？）

こういう風にソートをしてしまうと、テーブルのデータをいったんメモリに展開して並び替えを行うため、テーブルのデータサイズに比例して使用メモリが増大する。
また、CPUの負荷も高い。

ではどうすればいいか。
分割をwhere条件でいい感じに分けた方がパフォーマンスが良い。

例えば、更新日を持っているのであれば、全件のカウントと、minとmaxの更新日をとっていい感じに等分して、結果limit offsetのように分割できるようにすればいい。

そうすると、order byが不要。ということは、メモリ使用量がへり、CPU負荷も低く抑えられる。

と思っています。あっていますかね～(=_=)

こちら、参考にさせてもらいました。

>なぜ、SQLは重たくなるのか？
>https://employment.en-japan.com/engineerhub/entry/2017/06/26/110000
エラー対応方法 


- ログをみる観点
  - エラーは自分が書いたところからのエラーの確認
  - ライブラリーのエラーの確認
  - ユーザーはどんな操作をしたのかの確認



## 参考

https://qiita.com/jnchito/items/056325421b7e36f02335

長くて飽きてしまった
atcorder 勉強になる記事まとめ



基本
https://qiita.com/drken/items/fd4e5e3630d0f5859067


初級
https://qiita.com/drken/items/e77685614f3c6bf86f44

中級
https://qiita.com/drken/items/2f56925972c1d34e05d8

上級

https://qiita.com/drken/items/9b311d553aa434bb26e4
【言語処理100本ノック 2020】第3章: 正規表現

## はじめに
自然言語処理の問題集として有名な言語処理100本ノックの[2020年版](https://nlp100.github.io/ja/)が公開されました。
この記事では、以下の第1章から第10章のうち、「第3章: 正規表現」を解いてみた結果をまとめています。

本編は以下のリンク先に移転しました。
https://amaru-ai.com/entry/2022/10/06/084919

[全100問の解答へ](https://amaru-ai.com/entry/2022/10/15/204035)