OmniAICreator/Qiita-1.07M huggingface dataset:
プロジェクト管理で重要なこと〜仕様を把握すること編〜

#はじめに
SEとして働き出して3年目になり、プロジェクト管理の仕事をお手伝いする機会がございました！
そこで、プロジェクト管理に関して今回学んだ内容を展開したいと思います！

#プロジェクトマネジメントの目的

プロジェクトマネジメントの目的は、『プロジェクトの成功率を高めること』です。
プロジェクトは、定常業務のように全てスムーズに進むとは限りません！
（その原因は、後日展開予定の「プロジェクト管理で重要なこと〜リスク編〜」に記載いたします。）

そのため、プロジェクトを管理するプロジェクトマネージャーが存在するのです。

#プロジェクト管理の仕事
プロジェクトリーダー(PL)やプロジェクトマネージャー(PM)の仕事は多岐にわたります。

 + プロジェクト目的/成果物の理解
 + 必要なスキルを持ったメンバー集め
 + WBSの作成、工数見積
 + スケジュールの作成/見直し
 + チーム内の進捗報告の手段や進め方の決定
 + 問題に対して対策を立てる

ほんの一部を書き出しただけで、少し汗が出ます。（上記の仕事をさくっとこなせる人になりたい...。）

#管理業務で重要なこと
さて、次からは私レベルまでに落として、今回大変だと感じたこと/勉強になったことに関して書いていきます！

##大変だったこと　
今回の私の大きな役割が「サービスの仕様の理解」です。
「え？仕様理解...？別に簡単じゃない..？」そう思われるかもしれません。笑

立ち上げ→設計→開発と進むなかで、お客様の要望や開発側からの提案等により、仕様変更が増える場合がございます。
仕様を認識していない場合、戻り作業が増えたり最悪の場合は、お客様の要望と違うものが成果物として出来上がる場合が出てきます！（少し大袈裟ですが..。）

お客様と直接やり取りをしないメンバーや途中から案件に参加したメンバーから質問が来た場合に、
抜け漏れなく情報共有をする必要があるため、非常に責任ある仕事でございました。

##学んだこと 
成果物の仕様理解を行ううえで重要なことはいくつもございます！

+ <dt>議事録を正確に取ること</dt>ー当たり前のことですが、非常に重要な作業です。<br>　仕様の再確認をする際やお客様とのやり取りを確認する際に、見返すことがございます。

+ <dt>不明点はすぐに解決</dt>ーこれも当たり前のことですが、不明点を残したままにしないことが重要です。<br>　クライアントとの確認漏れがあった場合、戻り作業が増える場合がございます。<br>　ミーティング内で、要点をまとめて再確認する時間を取ることがリスクヘッジにつながります。

+ <dt>チーム内への素早い連携</dt>ー仕様の変更があった場合や複雑な処理が追加になりそうな場合は、<br>　早めにチーム内へ連携し、スケジュール調整を行う必要がございます。

+ <dt>情報共有のための工夫</dt>ーファイルが増えると、どこに何があるのかわかりにくくなる場合がございます。<br>　ファイル整理を定期的に行うことで、内部での作業がスムーズに進みます。

今回は、仕様を把握する立ち位置におりましたので、上記のことに注意いたしました。

ただし、本来プロジェクト管理者は情報を仲介するために努力するのではなく、
**クライアントとチームメンバー間の情報が滞りなく流れる仕組み作り**に注力する必要がございます！
情報を一手に集約するのではなく、**情報の流れを制御する**ことが重要になります！

#最後に
今回、管理の仕事を一部任され、「サービスの仕様の理解」を行うにあたって
身をもって感じた重要な点について書き出しました！
プロジェクト管理について知識も経験もまだまだですが、勉強と実績を積んで
チームメンバーやお客様から安心して任してもらえるPMを目指します！
[jQuery]　モーダルの作り方　

今回は例として新規登録のモーダルを作ります。


```html:index.html
<!--新規登録ボタン↓-->
<div class="btn signup signup-show">新規登録はこちら</div>

<!--モーダル↓-->
<div class="signup-modal-wrapper" id="signup-modal">
    <div class="modal">
      <div id="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>
      <div id="signup-form">
        <h2>Emailで新規登録</h2>
        <form action="#">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <div id="submit-btn">新規登録</div>
        </form>
      </div>
    </div>
  </div>
```

```js:script.js
//新規登録ボタンを押すとモーダルが表示される
  $('.signup-show').click(function() {
    $('#signup-modal').fadeIn();
  });

//とじるボタンを押すとモーダルが消える
  $('#close-modal').click(function() {
    $('#signup-modal').fadeOut();
  });
```

```css:stylesheet.css
#signup-modal {
  display: none;
}
```

- モーダルを`display: none;`で隠しておく
- 新規登録ボタンととじるボタンにclickイベントをつける
- セレクタがclassの場合->'`#`セレクタ名'<br>セレクタがidの場合->'`.`セレクタ名'
- `fadeIn`->要素を表示させるメソッド<br> `fadeOut`->要素を隠すメソッド
Laravel ログインしていない状態でもURLを直接入れると見れてしまう現象を一行で解決させる方法(Middleware)

未ログインユーザーに記事投稿画面を表示しないようにするためには、

```php:web.php
Route::resource('/articles', 'ArticleController')->except(['index'])->middleware('auth'); 
```

上記にmiddlewareを入れるだけでログインしていない状態であれば、

ログイン画面に遷移されます。

```
.
└──laravel
    └── app
        └── Http
            └── Middleware
                └── Authenticate.php
```

```php:Authenticate

<?php

namespace App\Http\Middleware;

use Illuminate\Auth\Middleware\Authenticate as Middleware;

class Authenticate extends Middleware
{
    /**
     * Get the path the user should be redirected to when they are not authenticated.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return string
     */
    protected function redirectTo($request)
    {
        if (! $request->expectsJson()) {
            return route('login');
        }
    }
}
```
`login`のところをいじれば遷移されるところを、アレンジすることができます。

以上です:relaxed:
Markdown記法を知って、愛される質問者になる方法 - 初学者が質問サイトで気をつけたいことと対策-

# はじめに

私自身プログラミング初学者ですが
プログラミング質問・回答サイトでと、ひたすら回答するという経験をもとに記事を書いています

プログラミングを学ぶと必ず自己解決できない場面があります
そういった場面で他者に質問して助けを求めることはとても有効だとも思います

ただ、質問する際にも**流儀**があって、
それは初学者が気づきにくいことであり、知っていると一目置かれるものであると感じています
初学者かつ、回答者という両視点を経験したからこそ、
以下のことを知って実践していただき、**愛される質問者を目指してください**

**もし、お役に立てたらLGTMいただけましたら嬉しく思います**

# 質問サイトでやってはいけないこと

## コードをスクリーンショットで貼るのをやめましょう

- 小さい文字は読めません

- コピーできないため、検証や回答に不便です

- 回答する側にも、回答が得られないあなたにも不都合です

  

## 外部リンクをベタ書きするのはやめましょう

- URLをベタ書きすると、読み手はコピー、貼り付けの作業が必要で面倒です



**相手への優しさや感謝が、あなたの問題解決につながります**

では、具体的にどうすればよいのか以下に書きますので上から3つまでは必ずおぼえてください

# Markdownという書式を覚えましょう

必須の3書式
これを覚えられなければエンジニアを目指すことを諦めてください

## 1 コードブロック

### 書式

複数行のコードを貼るときは`(バッククォート)3つでコードを囲います`
 `macユーザーなら ` (Shift + @)

\`\`\`
コード
\`\`\`

### サンプル

> \`\`\`html
\<!DOCTYPE html>
\<title>Title\</title>
\<style>body {width: 500px;}\</style>
\<script type="application/javascript">
  function $init() {return true;}
\</script>
\<body>
  \<p checked class="title" id='title'>Title</p>
  \<!-- here goes the rest of the page -->
\</body>
\`\`\`



> ```html
<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
</script>
<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>
```

### Tips

\`\`\`に続けて言語名を書くと、コードがハイライトされて読みやすいです（シンタックスハイライト）

## 2 コード

### 書式

改行やインデントが不要なコードは`(バッククォート)１つで囲います

\`code\`

### サンプル

> \`hogehoge\`

> `hogehoge`

## 3 外部リンクURL

### 書式

リンクのタイトルを`[]`で囲い、URLを`()`で囲います

\[リンクタイトル\]\(リンクURL\)

### サンプル

> \[naokit-dev - Qiita\]\(https://qiita.com/naokit-dev\)

> [naokit-dev - Qiita](https://qiita.com/naokit-dev)



## その他

知っていると便利です

### 見出し

\# (# + space)に続けて書くことで見出しになります
\#の数が見出しの強さを反映します

> \# h1 hello world
>
> \#\# h2 hello world
>
> \#\#\# h3 hello world
>
> \#\#\#\# h4 hello world

> # h1 hello world
>
> ## h2 hello world
>
> ### h3 hello world
>
> #### h4 hello world

### リスト

\- (\- + space)でリストを表現できます

> \- hoge
> \- fuga
> \- hogefuga

> - hoge
> - huga
> - hogehuga



# 宣伝

プログラミング初学者がコードをスクショで共有しているのを見て
なにかいい方法はないかと思いアプリを開発してみました

Markdown書式の練習用や、実際の問題解決に役立てていただけると嬉しいです

[mdClip ＜オンラインmarkdownエディタ＞](https://mdclip.xyz/)

- オンラインMarkdownエディタ
- 生成したMarkdownをURLで共有可能（URLをTwitterに共有可能）
- ユーザー登録不要ですぐ使える
【firebase】firebase.関数名() is not a function がでた際に確認する事【Javascript】

# はじめに

特に難しい内容ではないのですが躓いたのでメモ。

何かしらの記事を参考にしながらfirebaseの接続を行った際に

```
firebase.firestore() is not a function
firebase.storage() is not a function
firebase.auth() is not a function
```
等のエラーが発生したことがありませんか?

今回はこのエラーが出現した際に行う対処法の紹介です。

# 1.Nuxtでモジュールとして読み込む場合

モジュールとして読み込む場合、firebase.js等のファイルを作成して、以下の記述をするかと思います。

```
import * as firebase from 'firebase';
```

実は、firestore等を利用する際はこれだけでは記述が不足しています。

```
import * as firebase from 'firebase';
// 新規追加
import 'firebase/auth';
import 'firebase/firestore';
```
のように、使いたいサービスのモジュールを新しく読み込む必要があります。

参考:https://stackoverflow.com/questions/46636255/firebase-firestore-is-not-a-function-when-trying-to-initialize-cloud-firestore

# 2.Nuxtでモジュールとして読み込む場合(firebase , firebase-admin両方使用している場合）
本来であれば、両方が同じプロジェクトに存在する事はない？のですが、様々な理由で使用せざるを得なくなる場合があると思います。

ですが、fierbase,firebase-adminの両方を使用しているプロジェクトの場合、```npm i``` でインストールするタイミングによりエラーが発生するバグがあるそうです。

手順としては、
1. node_modulesの削除
2. package-lock.jsonの削除
3. ```npm i```を実行

以上の事を行えば、firebaseとfirebase-adminが正しい順序でインストールされ、エラーが発生しなくなるかもしれません。

参考:https://github.com/firebase/firebase-js-sdk/issues/752

# 3.CDNから配信されたものを使用する場合

1.と同じです。

```
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
```
上記のようにCDNを用いて.vueファイル等で直接firebaseを読み込んでいる場合、

```
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
// 新規追加
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-auth.js"></script>  
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-database.js"></script>
```

firebase-app.jsのみだと、 authやfirestoreが使用出来ません。
なので、使いたいサービス（firestore,auth,function等)を明示的に読み込む必要がありました。

参考:https://qiita.com/sota0726/items/e9ab104df3ec77d00f8e

# 4.もしかして

1.と 2. を実施しても治らない場合、firebaseがインストールされていない可能性があります。

私はこれでした。　
当たり前にインストールしているだろうと思って確認しなかったのですが、案外気づかないものですね。

packeage.jsonのdevDependencies またはdependenciesの中に,

```
"firebase": "^7.19.0",　　　（バージョンは異なります）
```
と記述はありますか？
Linux 環境構築について(VirtualBOX)

後輩に共有する為の記事となります。

やる事は二つだけ
1.VirtualBOXをインストール
2.CentOS isoをダウンロード

ここでは１を説明します


①https://www.virtualbox.org/ でDownloadをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/d78e443d-8864-6b54-e0c5-0e063b4d6582.png)

②下記の画面のWindows hostsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/d9513702-0865-a5ff-f887-d41b519a79c1.png)

③セットアップ画面へ、nextをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/37f79be0-6f0e-0cc1-5bcf-ce713f915b2d.png)

④Custom setupが出てきますが、デフォルトの設定で問題ないのでnextをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/f73c4482-8a76-4d37-98c9-58c02d34ba12.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/7b090acb-696a-bd49-60d5-4f375ba6a519.png)

⑤Warning:Network Interfacesが出てきますが、YESで次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/8748c949-23f0-3f46-925f-444ce68df1ca.png)

⑥Ready to Installが出てくるので、installをクリック
これでインストールされて、デスクトップ上にアイコンが表示されると思います。
もしくはダウンロードフォルダとかにあったりすると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697209/45e1d014-70af-4310-533c-798e2c2e932a.png)


VitualBOXは仮想マシンです。
Windowsとかmacで違うOS使って、勉強する時に使えますよ。

次CentOSを落としましょう→<a href="https://qiita.com/larcmiya/items/0de9b7ea224d47699d15">その２</a>
GoogleDriveAPI を使用するための設定（認証情報の作成）手順

設定した手順の備忘録

## プロジェクト作成

https://console.developers.google.com/apis/dashboard

- Googleにログインし、上記URLにアクセス
- 左上のメニューから、「IAMと管理 > リソースの管理」を押下
- 「プロジェクトを作成」リンクを押下
- プロジェクト名を入力し、（デフォルトで入力されている）「作成」押下

## プロジェクトで使用するAPIを指定する
- Google Cloudプラットフォームの画面上部からプロジェクトが選択されている状態で
「APIとサービス > ライブラリ」または「APIとサービス > API とサービスの有効化」を押下
- Google Drive API を選択し、「有効する」を押下

## 認証情報の作成
- リダイレクト後の画面（APIの概要画面）で「認証情報の作成」を押下 または
Google Cloudプラットフォームの画面上部からプロジェクトを選択した状態で、「認証情報 > 認証情報の作成」を押下
- 「OAuthクライアントID」を選択 または 「クライアントID」リンクを押下
    - 初回の場合は「OAuth クライアント ID を作成するには、まず同意画面でサービス名を設定する必要があります。」という文言と「同意画面を設定」というリンクが表示されるので、リンクから同意画面を設定
- OAuth クライアント ID の作成画面で「ウェブアプリケーション」を選択
- OAuthクライアントIDの名前を入力
- 承認済みの JavaScript 生成元にサイトのURLを入力
- 承認済みのリダイレクト URIに認証後リダイレクトさせたいURLを入力
- 「作成」を押下し保存する

## OAuth同意画面の設定
- OAuth同意画面を開き、「外部」を選択
- アプリケーション名を入力し、スコープの設定を行い保存
pythonで並列処理のサンプル

2020/09/25 バグがあったので追記


単純に複数CPUを使ってみる

[ALL about Linux: お手軽なベンチマークあれこれ](https://luna2-linux.blogspot.com/2015/05/blog-post.html?m=0)

```
$ time for ((i=0;++i<1000000;)); do :; done

real    0m4.698s
user    0m4.663s
sys     0m0.000s
```

```py:a.py
import multiprocessing
import time
import subprocess

class CmdProc(multiprocessing.Process):
    def __init__(self, number):
        super().__init__()
        self.number = number

    def run(self):
        subprocess.run("for ((i=0;++i<{};)); do :; done".format(self.number), shell=True)
        return


def main():
    procs = []
    for number in [1000000, 1000000]: # 上記コマンドを2個並列実行
        proc = CmdProc(number)
        proc.start()
        procs.append(proc)

    for proc in procs:
        proc.join()


if __name__ == '__main__':
    main()
```

起動コストからしてこれぐらいで妥当

```
$ time python3 a.py

real    0m4.909s
user    0m9.416s
sys     0m0.012s
```


```py:b.py
import multiprocessing
import subprocess
from multiprocessing import Pool


def cmd_proc(number):
    subprocess.run("for ((i=0;++i<{};)); do :; done".format(number), shell=True)

def main():
    n_cores = multiprocessing.cpu_count()
    p = Pool(n_cores)
    res = p.map(cmd_proc, [1000000, 1000000])

if __name__ == '__main__':
    main()
```

```
$ time python3 b.py

real    0m4.894s
user    0m9.398s
sys     0m0.029s
```

2020/09/25 追記
さて、`b.py`には重大なバグが存在する。このように書き換えてプロセスを見ると・・・・

```py:b_loop.py
import multiprocessing
import subprocess
from multiprocessing import Pool
import time

def cmd_proc(number):
    subprocess.run("for ((i=0;++i<{};)); do :; done".format(number), shell=True)

def main():
    n_cores = multiprocessing.cpu_count()
    p = Pool(n_cores)
    res = p.map(cmd_proc, [1000000, 1000000])
    print("OK")

    while True:
        time.sleep(1)

if __name__ == '__main__':
    main()
```

終わっていない。

```bash
$ python3 b_loop.py &
OK
$ ps awx | grep b_loop.py | grep -v grep
  83031 pts/0    Sl     0:00 python3 b_loop.py
  83032 pts/0    S      0:00 python3 b_loop.py
  83033 pts/0    S      0:00 python3 b_loop.py
```

withでcloseする必要がある。

```py:b_loop_fix.py
import multiprocessing
import subprocess
from multiprocessing import Pool
import time

def cmd_proc(number):
    subprocess.run("for ((i=0;++i<{};)); do :; done".format(number), shell=True)

def main():
    n_cores = multiprocessing.cpu_count()
    with Pool(processes=n_cores) as p:
        res = p.map(cmd_proc, [1000000, 1000000])

    print("OK")
    while True:
        time.sleep(1)

if __name__ == '__main__':
    main()

```

```bash
$ python3 b_loop_fix.py &
OK
$ ps awx | grep b_loop_fix.py | grep -v grep
  83170 pts/0    S+     0:00 python3 b_loop_fix.py
```
[Pythonの並列処理・並行処理をしっかり調べてみた \- Qiita](https://qiita.com/simonritchie/items/1ce3914eb5444d2157ac#multiprocessingpool%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A8%E9%80%9F%E5%BA%A6%E7%A2%BA%E8%AA%8D)
【Vue.js】Vue.js devtoolsが表示出来ない時にみる

vue.js備忘録、第二弾。
誰かの参考になれば幸いです。

## Vue.js devtoolsとは
![スクリーンショット 2020-08-24 22.38.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/8f79cb9f-ac62-3db1-4487-3c357c711b19.png)

Vueのデバッグを行う際に非常に便利な拡張機能です。
コンポーネント構造を直感的操作で確認出来て、プロパティーの中身も見る事が出来ます。

導入方法は非常に簡単で[こちら](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)からダウンロードしてくるだけです。

## 正しい動き
検証でデベロッパーツールを開き、Vueタブが表示されていればOK
![スクリーンショット 2020-08-24 22.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/091eb2a2-4830-e5ed-e074-3b40d15867db.png)

## Vueタブが表示されないパターン①
「ファイルの URL へのアクセスを許可する」がオフになっている場合はオンにしてみましょ。
![スクリーンショット 2020-08-24 22.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/18a9d067-b475-e77d-2a7a-ee72e047845e.png)

## Vueタブが表示されないパターン②
当たり前ですが、productionモードでは表示されないです。
開発モードで検証しましょう。
![スクリーンショット 2020-08-24 22.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/9aef204c-58e6-2b9d-08d6-8aeca2dc97fa.png)

## Vueタブが表示されないパターン③
ここまで見てもVueタブが出てきてくれなかったら、キャッシュを疑いましょう。
NetworkタブのDisable cacheにチェックを入れて再読み込みして改善するか確認しましょう。

![スクリーンショット 2020-08-24 22.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/66f50f6c-a421-cade-ea04-3e784f16a180.png)

これで大体解決出来るはずですm(__)m
[GPUを簡単に高速化・省メモリ化]  NVIDIAのapex.ampがPyTorchに統合されたようです


#対象とする読者
**PyTorch 1.6を利用できる環境**にあって**Volta以降のGPUの計算を簡単に高速化・省メモリ化**したい方


#はじめに

Volta以降のGPUでは**float16/float32混合精度演算**により計算の高速化・メモリの節約を行うTensorCoreが搭載されています。

しかし、特に明示的にプログラムを書かない限り?はfloat32による計算が行われ、TensorCoreを有効活用することはできません。かといって単に全てfloat16化して計算を行うだけだと、表現力が少なかったり、勾配でアンダーフローしてしまったりとモデルの性能が維持できません。

そこで、**Automatic Mixed Precision (amp)機能**によってfloat32の保持や勾配の値のスケーリング等を自動的に行うことでTensorCoreを有効活用し、GPU計算の高速化・省メモリ化が実現されます。

もう少ししっかり知りたい方は以下の記事・論文を参照してみてください。

- [MIXED PRECISION TRAINING (ICLR 2018)](https://arxiv.org/pdf/1710.03740.pdf)

- [Pytorchなら同じGPUで2倍早い学習ができるっていったんだよ！](https://qiita.com/arutema47/items/a507a3a8ee10654d5d1f)

- [Automatic Mixed Precision (amp) でニューラルネットワークのトレーニングを高速化](https://qiita.com/ksasaki/items/52a829b63c8deb022c50)



# PyTorchにおけるampの利用

PyTorchにおいてはamp機能として[NVIDIA社のapex](https://github.com/NVIDIA/apex)がよく利用されていると思います。しかし、環境によってはいくつかのライブラリのversionを上手く対応させたり、gitのcommitを少し戻したりしないと上手く動かないことがあります。（僕はインストール時に沼にハマりました。）

**PyTorch 1.6からはこのapex.ampがPyTorchに統合**されています。apex.ampにあった問題が何点か解消されてより簡単に導入できるようになりました。公式でも**PyTorchに統合した方への移行が推奨**されています。

#使い方

```python
import torch 
# スケーラーを定義
scaler = torch.cuda.amp.GradScaler() 

for data, label in data_iter: 
   optimizer.zero_grad() 

   # 演算処理をampの対象にキャスト
   with torch.cuda.amp.autocast(): 
      loss = model(data) 

   # スケールした勾配を作る
   scaler.scale(loss).backward() 

   # 勾配をアンスケールしてパラメータの更新
   scaler.step(optimizer) 

   # スケーラーの更新
   scaler.update() 
```


# おわりに
見ていただきありがとうございます。
怪しい箇所があれば、お気軽にコメントしていただけると幸いです。


# 参考

[Introducing native PyTorch automatic mixed precision for faster training on NVIDIA GPUs](https://pytorch.org/blog/accelerating-training-on-nvidia-gpus-with-pytorch-automatic-mixed-precision/)
PHP Quickstartを使用したGoogleDriveAPIの導入手順

GoogleDriveAPIを使用することがあったので備忘録


# Quickstartを使用して接続の設定


## Google Client Libraryのインストール
- 下記をコマンドラインで入力

```
composer require google/apiclient:^2.0
```

## 認証情報をダウンロード
※すでにOAuth 2.0 クライアントの設定を済ませている場合
（未設定の場合は先にOAuth 2.0 クライアントの設定を行う）

- Google Cloudプラットフォームから「認証情報」を押下し、認証情報画面を開く
- OAuth 2.0 クライアント ID 一覧の中から、作成したIDの右端のダウンロードボタンを押下し、ファイルをダウンロードする


## サンプルプログラムの作成
PHP Quickstart  |  Google Drive API  |  Google Developers
https://developers.google.com/drive/api/v3/quickstart/php

- Google Drive API のドキュメント内から、PHP Quickstart のページを開く
- Step 3: Set up the sample に記載されている quickstart.php をコピーする
- OAuth 同意画面で設定したアプリケーション名をsetApplicationName()に指定、ダウンロードした認証情報のパスをsetAuthConfig()に指定する

``` quickstart.php
<?php
require __DIR__ . '/vendor/autoload.php';

if (php_sapi_name() != 'cli') {
    throw new Exception('This application must be run on the command line.');
}

/**
 * Returns an authorized API client.
 * @return Google_Client the authorized client object
 */
function getClient()
{
    $client = new Google_Client();
    $client->setApplicationName('Google Drive API PHP Quickstart');　// 設定したアプリケーション名を指定
    $client->setScopes(Google_Service_Drive::DRIVE_METADATA_READONLY);
    $client->setAuthConfig('credentials.json');　// ここに取得したJSONのパス
    $client->setAccessType('offline');
    $client->setPrompt('select_account consent');

    // Load previously authorized token from a file, if it exists.
    // The file token.json stores the user's access and refresh tokens, and is
    // created automatically when the authorization flow completes for the first
    // time.
    $tokenPath = 'token.json';
    if (file_exists($tokenPath)) {
        $accessToken = json_decode(file_get_contents($tokenPath), true);
        $client->setAccessToken($accessToken);
    }

```

## サンプルプログラムの実行
- 下記をコマンドラインから実行

```
php quickstart.php
```

## 接続の同意
- サンプルプログラム実行後、URLが表示されるのでコピーし、ブラウザからアクセスする
- アクセスすると、OAuth 2.0の同意画面が表示され、画面に従って許可を行う
    - アクセスし、「このアプリは確認されていません。」と表示された場合は、左下の「詳細」から「〇〇（安全ではないページ）に移動」から移動する
- 許可を行い、「このコードをコピーし、アプリケーションに切り替えて貼り付けてください。」と書かれた下のコードをコピーする
- コマンドライン上のEnter verification code: に貼り付け実行する

```
[hoge@hogehoge hoge]$ php quickstart.php
Open the following link in your browser:
https://accounts.google.com/o/oauth2/auth?response_type........
Enter verification code: 
````
【Laravel】バリデーションルールの書き方のミスでSQLエラー “SQLSTATE[42S22]: Column not found:”

###phpMyAdminでは存在するカラム名がないと言われる

```
SQLSTATE[42S22]: Column not found: 1054 Unknown column ' image_path' in 'where clause'
```

`image_path`というカラムがありませんよ
って言われているけど、phpMyAdminで確認するとちゃんとある。


###バリデーションルールの書き方が間違っている?

```php5:CharacterRequest.php
    public function rules()
    {
        return [
            'name' => 'required | max:100',
            'image_path' => 'required | unique:characters', // uniqueの第2引数にimage_pathを入れていた 
            'genre_id' => 'required',
        ];
    }
```

どうやらuniqueの第2引数にimage_pathを入れていたのが間違いだったよう。
消したらエラーが出なくなりました。

###第2引数はカラム名
https://readouble.com/laravel/5.8/ja/validation.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/016f04e7-dd8c-4dd3-e8b5-097c5546744b.png)

公式の説明では上記のように書いていますが、フィールド名とカラム名の違いがわかっていません。。。

とりあえず、同じものが挿入されないようにするなら

```
unique:テーブル名
```
としておけば良さそうです。


素人記事ですが、一応これでバリデーションはうまく行きました。

別の原因で発生することもあるようなので、他の記事も参考にしてください。
CSSでカーソルが画像の上に来ると何かが起きるようにしよう。

#この記事の対象者
・cssで簡単なアニメーションを付けたい人
・写真に動きを付けたい人
#下準備
毎度のことながら始めにfinderからcss_hoverなどと言う名前のフォルダーを作成します。そしたら**brackets**を起動して新規ファイルを2つ立ち上げて、それぞれ**index.html、style.css**と名前をそれぞれ付けます。そしたら**index.html**に**!**と入力してtobキーを押して、プログラムを展開します。そうしたら、langを"ja"に変更して、**head**内にlinkと入力してからtobキーを押してプログラムを展開してhrefにstyle.cssと入力して準備完了です。
※念の為にソースコードを入力して置きます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
```
#hoverを使ってみる
始めに写真を表示させる為のコードを追加します。**body要素**にこのコードを記述します。

```html
<div class="img_block">
	<img src="IMG_0186.jpeg" alt="サンプル画像">
</div>
```
finderに自分の好きな写真を入れて名前をその写真に変更して下さい。次はcssのコードをいじっていきます。![スクリーンショット 2020-08-24 22.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/00dee76d-b944-6f60-a82d-b3d6b76f3534.png)
cssを何も書かないとたまにこんな感じで写真が見にくいので始めに写真を整えるコードを書きます。

```css
.img_block img {
/*	始めに二行で写真を真ん中に移動させています。*/
	display: block;
	margin: auto;
/*	ここで写真のサイズを調節します。*/
	width: 50%;
/*	ここで上の隙間を作ります*/
	margin-top: 100px;
}
```
コードの解説はコメントの通りです。次に画像を半透明にします。
これはとても簡単でこの一行を加えるだけです。
※コメントはコピーしなくても問題ありません。

```css
/*	0.8の値をもっと小さくするもっと透明になります。*/
opacity: 0.8;
```
最後に**hover**を使ってカーソルが押された時のコード書いて完成です。
始めにhoverの使い方について軽く解説します。

```css
指定した要素名:hover {
/*	ここにアニメーションを書きます*/
}
```

実際に使って見ましょう。
コード完成版

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

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>

<body>
	<div class="img_block">
		<img src="IMG_0186.jpeg" alt="サンプル画像">
	</div>
</body>

</html>
```

```css
.img_block img {
/*	始めに二行で写真を真ん中に移動させています。*/
	display: block;
	margin: auto;
/*	ここで写真のサイズを調節します。*/
	width: 50%;
/*	ここで上の隙間を作ります*/
	margin-top: 100px;
/*	0.8の値をもっと小さくするもっと透明になります。*/
	opacity: 0.8;
}

.img_block img:hover {
/*	ここにアニメーションを書きます*/
	opacity: 1;
}
```

![スクリーンショット 2020-08-24 22.22.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/4acc024d-24d7-503a-b6aa-23f06a11c7af.png)
カーソルはスクショなので上手く写っていませんがちゃんと動作しましたね。
※今回使った写真を載せて置きます。
![IMG_0186.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/0dd5dad6-c9f2-b03b-50c2-180899beb22c.jpeg)

#最後に
記事を読んでくれてありがとうございました。
最近はなんとなく毎日更新をしています。pythonとhtmlの記事を投稿していくつもりです。
よければ他の記事も見て下さい。

初心者なので間違った所があったらコメントで教えて下さい。早めに修正します。


今回参考にした素晴らし記事：[サルワカ](https://saruwakakun.com/html-css/basic/opacity)
Ubuntuで使えるスクリーンショット加工ソフト

## はじめに

「Shutterでいいじゃんよー」という方もいるかもしれませんが、現状[Shutter](https://launchpad.net/shutter)はあまりメンテナンスが進んでおらず衰退の一歩をたどっています（現に公式リポジトリからは削除されました。）。なので別の移住先を探しておきましょう。

※Snap版、PPA版があるじゃないか！って思われる方もいらっしゃるかもしれないですが、メンテが進んでいないのは同じなので個人的にはあんまりおすすめしないです。

## Kritaの使い方

いきなりですが自分はこれを使用してスクリーンショットの編集を行うことにしました。個人的にPintaとかGimpとかも試したのですがイマイチ肌に合わなかったです。各ソフトウェアの使い心地については最後におまけで書いておきます。

操作に関してはスクリーンショットを加工する上でよくする操作のみ記載しておきます。（[公式マニュアル](https://docs.krita.org/en/)）

### インストール方法

https://launchpad.net/~kritalime/+archive/ubuntu/ppa

### 枠線のひき方

1. Sidebars（デフォルトでは左）の**矩形ツール**を選択する（四角いやつ）

1. Sidebars（デフォルトでは右）の**拡張色選択**で色を選択する

1. 必要に応じてToolbar（デフォルトでは上）の**サイズ**で先の太さを調節する

1. 枠線を引きたい範囲を選択する

### 特定範囲の塗りつぶし方

1. Sidebars（デフォルトでは左）の**矩形選択ツール**を選択する（破線の四角いやつ）

1. Sidebars（デフォルトでは右）の**拡張色選択**で色を選択する

1. Sidebars（デフォルトでは左）の**塗りつぶしツール**で色を選択する（バケツからペンキが溢れてるやつ）

### 文字挿入の仕方

1. Sidebars（デフォルトでは左）の**SVG Text Tool**を選択する（Tみたいなやつ）

1. 文字を入れたい箇所を選択すると入力画面が出てくる為、そこで書体や色などを選択する

## おまけ

### 自分が使ってみたツールの使い心地

|  ツール名  |  使い心地など  |
| ---- | ---- |
|  shutter  |  元々標準だけあって使いやすいが、よくエラーが出る。また、メンテがほとんどされていない  |
|  Pinta  |  使おうと何度がチャレンジをしたが、Ctr + zで作業を戻した際などにエラーでよく落ちてしまった。また、気がついたら固まっていることが多かった  |
|  Gimp  |  毎回やり方をググっていたので枠線をひくなどの操作が直感的ではない気がする。やれることが多すぎて戸惑う。  |
Mixed Content: The page at 'https://〜〜〜' was loaded over HTTPS,というエラーが出た時の対処

#はじめに
サイトに`jQuery`を拡張するライブラリ（プラグイン）の一種で`jQuery UI`を利用し`ダイアログ`を表示しようとしたときに出たエラーです。

`HTML`の`header部分`にライブラリを読み込むため、以下のような記述をプラスし

```html

<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
```

今回は`heroku`を利用してデプロイしました。

#エラー内容



そうするとクリックしても`ダイアログ`がうまく表示されず。

検証ツールでコンソールを見てみると赤文字でエラーの表示がでてました。

```console
Mixed Content: The page at 'https://home-game-center.herokuapp.com/' was 
loaded over HTTPS, 
but requested an insecure stylesheet 'http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css'.
This request has been blocked; the content must be served over HTTPS.
```
「`http`からのリンクなんで読み込めませんよ」とのことのようです。実際そのページだけ必要なものが読み込めていない。

調べてみると、『`HTTPS`と`HTTP`の混合サイトで外部リンクが読み込めない』みたいです。

#解決策

解決策としては
『（’https:/ or ‘http:/）は省略できる』
とのことなので記述を以下のようにしました。

```html

<link type="text/css" rel="stylesheet"
  href="//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
```
`href=`のあとの`http:`を省略して再度デプロイすると本番環境でも正常にダイアログが出て解決しました！

しかし今度はローカルではうまく動作せずになりましたが（涙）

#参考
リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる
・https://qiita.com/arai-wa/items/d9b73539898d658b58c5
プロパティの値の代入はアクセサメソッドを使う

# クラスのプロパティに値を入れる

クラスでインスタンスを作り、プロパティに値を入れる場合は
***インスタンス->プロパティ名 = 値；***で実装可能。

```php:CalBMI.php
class CalBMI {

  public $_weight; // 体重(kg)
  public $_height; // 身長(m)

  public function __construct($weight,$height){
      $this->_weight = $weight;
      $this->_height = $height;
  }

  public function getBMI(){
      return $this->_weight / ($this->_height * $this->_height);
  }

}
```
```php:accessor1.php
require_once 'CalBMI.php';

$calBMI = new CalBMI(60,1.6);
echo $calBMI->getBMI(); //23.4375

```

しかし、ユーザーはいつも自分が想定した通りには動いてくれない。
なので、数字を入れるところに文字を入れる場合もある

```php:accessor1.php
require_once 'CalBMI.php';

$calBMI = new CalBMI(60,'身長');
echo $calBMI->getBMI(); // Warning: A non-numeric value encountered

```

このような不祥事を防ぐため、クラスのプロパティは基本privateでユーザーが直接アクセスできないようにし、
***アクセサメソッド***を使ってアクセスさせる.

```php:CalBMI.php
class CalBMI {

  private $_weight; // 体重(kg)
  private $_height; // 身長(m)

  public function __construct($weight,$height){
      $this->setWeight($weight);
      $this->setHeight($height);
  }

  public function setWeight($weight){
      $this->_weight = is_numeric($weight) ? $weight : 60; // 数字以外のものが入るとDefaultで60を体重に設定
  }

  public function setHeight($height){
      $this->_height = is_numeric($height) ? $height : 1.6; // 数字以外のものが入るとDefaultで1.6を身長に設定
  }

  public function getWeight(){
      return $this->_weight;
  }

  public function getHeight(){
      return $this->_height;
  }

  public function getBMI(){
      return $this->getWeight() / ($this->getHeight() * $this->getHeight());
  }

}
```

```php:accessor2.php
require_once 'CalBMI.php';

$calBMI = new CalBMI(60,'身長');
echo $calBMI->getBMI(); // 23.4375

```

# 参考
[独習PHP第3版](https://www.amazon.co.jp/%E7%8B%AC%E7%BF%92PHP-%E7%AC%AC3%E7%89%88-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/479813547X/)
本で学んだこと(HTML , CSS編)

HTMLとCSSで苦手なところを本で調べて学習し、記録しています。

#表を作りたい

表を作る時はtableタグを使用する。

>trタグは行を表すもので、今回は、４つあるので４行の表が完成する。
>tdタグは、列を表すもの。それぞれ行の中に２つずつあるので２列できる。


```html
<table border=1>
<tr><td>品物</td><td>金額</td></tr>
<tr><td>りんご</td><td>３００円</td></tr>
<tr><td>もも</td><td>４００円</td></tr>
<tr><td>メロン</td><td>９００円</td></tr>
</table>
```


|品物|金額|
|:---:|:---:|
|りんご|３００円|
|もも |４００円|
|メロン|９００円|



#フォームを作りたい

フォーム記入欄を作る時はformタグを使用する。

>text欄を作る時

```html
<input type="text" name="">
```



>e-mail欄を作る時は type は text となる。

```html
<input type="text" name="email">
```

>password欄を作る時

```html
<input type="password" name="pass">
```

>ラジオボタンを作る時
2つ以上作る場合、typeやnameを同じにしておく。

```html
<input type="tadio" name="名前" value="値1">
<input type="tadio" name="名前" value="値2">
```

>チェックボックスを作る時

2つ以上作る場合、typeやnameを同じにしておく。

```html
<input type="checkbox" name="名前" value="値1">
<input type="checkbox" name="名前" value="値1">
```

>選択欄を作る時

```html

<select name="furuits">
<option name="apple">りんご</option>
<option name="peach">もも</option>
<option name="melon">メロン</option>
</select>

```



>送信ボタンを作る時

```html
<input type="submit" name="submit">
```
【Rails】rails g controller コマンドで作成されるファイルを制限

## 開発環境
*rails 6.0.3*
（*`Minitest`を使用していないプロジェクトを想定しています*）

## 説明

`rails g controller <コントローラー名> <アクション名>`
を実行すると、`controller`と`view`以外に、**特に必要のないファイル**が作成される。


これを回避するために、`rails`プロジェクト内に、次のファイルを作成しておけば，
`rails g controller`コマンドを実行時に、
`controller`と`view`以外のファイルが**作成されないように**なる。

```ruby:config/initializers/generators.rb
Rails.application.config.generators do |g|
  g.assets false
  g.helper false
  g.skip_routes true
end
```

上記ファイルの作成が面倒なときは、
`rails g controller`コマンドを実行時に下記3つのオプションを追加して実行する。

```ruby:ターミナル
rails g controller <コントローラー名> <アクション名> --no-assets --no-helper --skip-routes
```

<br>

上記によって、下記のメリットがある。
・`app/assets/` 配下に**stylesheetsのファイルが作成されない**。
・`app/helpers/` 配下に**helperファイルが作成されない**。
・`config/routes.rb` に**ルーティングが追加されない**。
Laravelでroute一行のみでCRUDを定義する方法

記事投稿画面や記事登録処理などの記事関連機能のルーティングについて、ひとつひとつ自分で考えて設計することもできますが、

- 一覧表示
- 個別表示
- 新規登録
- 更新
- 削除

といった、よく使われる機能のルーティングをひとまとめにしたメソッドがLaravelでは用意されています。

```
Route::resource('/articles', 'ArticleController'); 
```

と定義してあげるだけで一気にCRUDのuri等を設定してくれます。

```
+--------+-----------+-------------------------+------------------+------------------------------------------------------------------------+------------+
| Domain | Method    | URI                     | Name             | Action                                                                 | Middleware |
+--------+-----------+-------------------------+------------------+------------------------------------------------------------------------+------------+
|        | GET|HEAD  | /                       |                  | App\Http\Controllers\ArticleController@index                           | web        |
|        | POST      | articles                | articles.store   | App\Http\Controllers\ArticleController@store                           | web        |
|        | GET|HEAD  | articles                | articles.index   | App\Http\Controllers\ArticleController@index                           | web        |
|        | GET|HEAD  | articles/create         | articles.create  | App\Http\Controllers\ArticleController@create                          | web        |
|        | DELETE    | articles/{article}      | articles.destroy | App\Http\Controllers\ArticleController@destroy                         | web        |
|        | PUT|PATCH | articles/{article}      | articles.update  | App\Http\Controllers\ArticleController@update                          | web        |
|        | GET|HEAD  | articles/{article}      | articles.show    | App\Http\Controllers\ArticleController@show                            | web        |
|        | GET|HEAD  | articles/{article}/edit | articles.edit    | App\Http\Controllers\ArticleController

```

とても便利なので、是非使ってみてください。

以上です:relaxed:
Scalaのコレクションたち〜immutable編〜

# はじめに
Scalaのコレクションには色々な実装が存在します。
今回はその中でも『イミュータブル』なコレクションにフォーカスをあてて、各コレクションの特徴をまとめていきたいと思います。以降、ミュータブル/イミュータブルの明記がない場合はイミュータブルコレクションのことを指します。
（ミュータブル編は必要性に駆られたら調べますが、多分やらない・・・）

- ここで書くこと
  - 各コレクション実装の特徴

- ここで書かないこと
  - 『Seqとは？』のようなコレクション概念
  - ミュータブルコレクションに関すること

内容は[公式ドキュメント](https://docs.scala-lang.org/ja/overviews/collections/introduction.html)に沿ってまとめています。図も公式ドキュメントから拝借したものです。

## 動作環境
- OS
    - MacOS Catalina
- CPU
    - Corei9(2.4GHz 8コア)
- メモリー
    - 64GB 
- Scalaバージョン
    - 2.13.2

# Scalaのコレクション
以下の図は公式ドキュメントに使用されているものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64360/2f401218-67ee-8360-ac82-8b8521b2a556.png)
資料：https://docs.scala-lang.org/ja/overviews/collections/overview.html
ただ、上記の図は少し古いようでScala2.13で追加されたコレクションが反映されていません。それらについても拾える範囲で拾っていきます。

コレクションにはざっくり以下の３つが存在します。

- Seq
- Map
- Set

これらの３つの種類のコレクションについて、各実装の特徴を調べていきたいと思います。当初は１ページに収める予定だったのですが、思ったよりも分量が多くなってしまったので、各コレクションごとにページを分割しています。詳細はリンク先のページでご確認ください。

- [Seq編](https://qiita.com/louvre2489/items/f16db1e9d7f88fdeb04c)
- [Map編](https://qiita.com/louvre2489/items/7da49953b5c959ee9f1c)
- [Set編](https://qiita.com/louvre2489/items/036973b8cccc867dd6e0)
Gorm(Golang)で、DBから取得したデータ(複数個)にアソシエーションをつける

現在、個人開発中です。
普段はWEBフロントエンドとしてNuxt.jsとFirebaseくらいしか触らないのですが、個人開発でならもっとモダンな技術をガッツリと使いたいという事で、API開発にGolang + Gorm(ORM)で開発しています。


Gormの公式ドキュメントに載ってある、DBから引っ張ってきたデータへのアソシエーションの組み方は↓こうです。
(参照先：　http://gorm.io/ja_JP/docs/has_many.html)

```
db.Model(&user).Related(&emails)
//// SELECT * FROM emails WHERE user_id = 111; // 111 is user's primary key
```
データが1つの時であれば↑これでOKなのですが、
userが複数の時には、下記の通りにする事で各々のユーザーへリレーションが組めます。

```
db.Where("user_id = ?", id).Find(&users)
　for i := range users {
　db.Model(users[i]).Related(&users[i].emails)
}
```
公式ドキュメントには記載が無く、僕はハマってしまいました (Golang経験者の皆様からすれば基本的な事かも知れませんが…)
Golang(Gorm)初心者の方々を救う1手になればと思い、ここにペンを置かせて頂きます。
japanese-addressesを使ったジオコーディング

## はじめに

「[Geolonia 住所データ | japanese-addresses](https://geolonia.github.io/japanese-addresses/)」で住所データと代表点の緯度経度が公開されました。

参考： [無料で使える「住所マスターデータ」公開、表記統一や緯度経度への変換に活用可能 - INTERNET Watch](https://internet.watch.impress.co.jp/docs/news/1271/298/index.html)

このデータを使って、住所⇔緯度経度変換のコマンドを作ったので紹介します。
Python3.8が必要です。

## インストール＆設定

まず、上記サイトで「ダウンロード」からCSV（latest.csv）をダウンロードしてください。ダウンロードしたパスを「`/path/to/latest.csv`」とします。
下記コマンドを実行してください。

```
pip install simple-geocoding
python -c '__import__("simple_geocoding").Geocoding("/path/to/latest.csv")'
```

2つ目のコマンドでCSVから「住所リスト、KDTree、住所をキーとした緯度経度の辞書」を作成してインストール先にpickleで保存しています。

## 使い方

### 住所→緯度経度

```
simple-geocoding 東京都千代田区丸の内一丁目
>>>
(35.68156, 139.767201)
```

引数が1つのときは、住所とみなして、緯度経度に変換します。
これは、単純に住所をキーにした緯度経度を返しています。
なお、単純化のため同一の住所に対して複数の緯度経度が存在しても1つだけ返しています。

### 緯度経度→住所

```
simple-geocoding 35.68156 139.7672
>>>
東京都千代田区丸の内一丁目
```

引数が2つのときは、緯度と経度とみなして、住所に変換します。
これは、[KD-Tree](https://docs.scipy.org/doc/scipy/reference/generated/scipy.spatial.KDTree.html)で最寄りの登録地点を求めています。

## 補足

KD-Treeというデータ構造を使うことで、不均一に存在する地点を効率よく管理できます。
また、PythonではKD-Treeがscipyに含まれているので、簡単に利用できます。

参考
- [Kd木 - Wikipedia](https://ja.wikipedia.org/wiki/Kd木)
- [simple_geocoding/\_\_init__.py](https://github.com/SaitoTsutomu/simple-geocoding/blob/master/simple_geocoding/__init__.py)
【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法

# どうも7noteです。親は中央、子は左寄せにする方法について

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/center_leftbox/
JavaScriptのクラスと継承

JavaScriptはこれだけ広く使われている言語にしては、意外と今回のような情報は見つからなかったりします。

まずはおさらい。

* 全てはオブジェクトである。
* 継承はプロトタイプチェーンによって行う。
* 関数名にnewをつけて呼び出すと、その関数はコンストラクタと呼ばれ、新たなオブジェクトを作る。

このへんでつまづく人はいないと思うのです。

でも、具体的にBaseというクラスをDerivedというクラスが継承し、そのオブジェクトをnewで作ったという場合に、プロトタイプチェーンがどのように構築されるかをはっきり説明できる人は少ないような気がします。
文章でだらだら説明しても必ずわかりにくくなるので、結論から図で描いてしまうとこうなっているわけです。

![prototype (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242745/d38892d1-c6ec-5887-89a6-fc5c26d841dc.png)


コンストラクタとクラスオブジェクトは別物で、 constructor と prototype というフィールドで相互参照しているという点が初心者にはわかりにくいと思います。
なお、 `__proto__` というフィールドは内部的なプロトタイプチェーンを実装するための参照であり、コードから[直接アクセスしてはいけません](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)。

このような継承関係が構築されていることは、下記のようなコードで確認できます。

```javascript
class Base{
}

class Derived extends Base{
}

const base = new Base()
const derived = new Derived()

console.log(derived.__proto__.__proto__ === base.__proto__)
console.log(base.constructor === Base)
console.log(derived.constructor === Derived)
console.log(Derived.prototype.__proto__ === Base.prototype)
console.log(Base.prototype.__proto__ === Object.prototype)
console.log(Derived.__proto__ === Base)
console.log(Base.__proto__ === Function.__proto__)

console.log(function(){}.__proto__ === Function.prototype)
console.log(function(){} instanceof Function)
```

## ES5以前

ES5以前は、 Java 風の class 構文はありませんでしたので、次のような書き方をよくしました。

```javascript
Derived.prototype = new Base()
```

しかし、実はこれでは前述の継承関係を構築するには不十分で、プロトタイプからコンストラクタへの `constructor` フィールドによる参照が構築されません。相互参照すべきところが片参照になっています。
これを正しく実現するには、古いブラウザへの互換性も考慮して以下のような関数を定義する必要がありました。

```javascript
/// Custom inheritance function that prevents the super class's constructor
/// from being called on inehritance.
/// Also assigns constructor property of the subclass properly.
function inherit(subclass,base){
	// If the browser or ECMAScript supports Object.create, use it
	// (but don't forget to redirect constructor pointer to subclass)
	if(Object.create){
		subclass.prototype = Object.create(base.prototype);
	}
	else{
		var sub = function(){};
		sub.prototype = base.prototype;
		subclass.prototype = new sub;
	}
	subclass.prototype.constructor = subclass;
}
```

使い方はこんな感じです。

```javascript
function Base(){
}
function Derived(){
    Base.call(this)
}
inherit(Derived, Base)
```

まあ、面倒ですよね。
ES6で class 構文が導入されたのはいいことですが、なんで最初から用意してくれなかったんだと言いたくもなります。これは[関数型](https://qiita.com/msakuta/items/e723bbb889c9bba464b3)の継承とプロトタイプベースの継承を好みに応じて選べるようにするためではないかと私は考えています。

# なぜこうなってしまったのか

コンストラクタとプロトタイプ・オブジェクトが異なるのはなぜなのでしょうか。考えてみればわかりますが、コンストラクタはあくまでも関数なので、プロトタイプに Function を持ち、 `call` や `apply` といったメソッドを継承しています。新しく定義するクラスは、もちろん関数のお仲間とは限りませんので、プロトタイプチェインに Function を含めたくはないですよね。

オブジェクト・モデルを考えればこのような仕様になることは納得できなくもないですが、 C++ や Java のオブジェクト指向に慣れた人には馴染むのが難しいのではないでしょうか。まあ、 Brendan Eich は半意識的にこのようにした[^1]ようですが。

[^1]: JavaScript 20years という論文でそこらへんの詳細が振り返られています。 JavaScript は10日で最初のバージョンが書かれたという伝説についても、本人が実際のところを明かしている興味深い読み物です。 https://dl.acm.org/doi/10.1145/3386327
『Kaggleで勝つデータ分析の技術』の誤植情報を集める

門脇大輔，阪田隆司，保坂桂佑，平松雄司『Kaggleで勝つデータ分析の技術』(技術評論社)

- 出版社サイト： https://gihyo.jp/book/2019/978-4-297-10843-4
- GitHubリポジトリ： https://github.com/ghmagazine/kagglebook

誤植情報のまとまったページを見つけられなかったので集めてみます。
まだ読み終えてないので読み終えたら問い合わせフォームからお知らせしようと思います。
他にも見つけた方はコメントか編集リクエストで教えてください。

|頁|誤|正|
|:---:|:---:|:---:|
|2|図1.1の年齢と性別が逆||
|90|与えられた学習データの目的関数の対数をとって変換し|与えられた学習データの目的**変数**の対数をとって変換し|
|172|ユーザ過去の利用時間|ユーザ**の**過去の利用時間|
|189|歪んだ分布を持つ変数などを主成分分析に適用する|歪んだ分布を持つ変数など**に**主成分分析**を**適用する|
|218|ハイパーパラメータによって学習の方法や速度、どれだけ複雑なモデルにするかを定め、これらはモデルの精度に影響します|※誤植ではないが文章がなんか変|
|233|それまでに作成した決定木の予測値を新しい決定木の予測値を加える|それまでに作成した決定木の予測値**に**新しい決定木の予測値を加える|
|250|`input_shape=(train_x.shape[1],)`|`input_shape=(tr_x.shape[1],)`|
|266|目的変数は$n_f$個の配列|目的変数は$n_{tr}$個の配列|
|313|`int(prms['max_depth'])`|`int(params['max_depth'])`|
|319|depthの最適化|max_depthの最適化|
|320|colsample_levelの最適化|colsample_bylevelの最適化|
|329|$x_n$は$x$の平均、$y_n$は$y$の平均|$x_\mu$は$x$の平均、$y_\mu$は$y$の平均|
（´-`）.｡oO(標準出力の『Hello』をお手軽に探したい。

Ruby初心者です。

今日は「Hello World」を出力するだけのrakeタスクを作りました。

```
# rake hoge:hello 
"Hello World"
```
結果に「Hello」が含まれていることを確認するテストを書いてて、簡潔に文字列指定で探せる方法があれば良いと思ったのですが。。。


## コード

```hoge_spec.rb
require 'rails_helper'
require 'rake'

RSpec.describe 'Hoge', type: :task do

  # 中略

  describe 'rake hoge:hello' do
    let(:task) { 'hoge:hello' }

    context '標準出力のHelloを探せ' do

      it '標準出力でHello #1　outputマッチャーの引数に文字列' do
        # ※理想型。ただし完全一致しないので失敗する。。。
        expect{ @rake[task].invoke() }.to output('Hello').to_stdout
      end

      it '標準出力でHello #2　outputマッチャーの引数に正規表現' do
        # ※うまくいくけど正規表現のマッチ使いにくい。。。
        expect{ @rake[task].invoke() }.to output(/Hello/).to_stdout
      end

      it '標準出力でHello #3 includeで部分一致' do
        # ※うまくいくけどコードが長い。。。
        $stdout = StringIO.new
        @rake[task].invoke()
        output_text = $stdout.string
        $stdout = STDOUT
        expect(output_text).to include 'Hello'
      end
    end
  end

end
```

## 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/5486c453-ed31-bb80-574b-5fad6ce5de31.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/efce300c-ecc0-9084-3642-6e83368f6b7a.png)


・・・文字列指定(#1)でできたら良いなと思ってたのですがエラー。
目的を実現するには正規表現（＃2）にするか標準出力を変数に代入する（＃3）しか方法が見つからず。。。 
何か良い方法がないものかと思ってます。
開発(ほぼ)未経験がDDD本を読んだので解説する②

どうも、最近引っ越しが決まった人です

今回は[開発(ほぼ)未経験がDDD本を読んだので解説する①](https://qiita.com/bouitengineer12/items/29605cebe415e0fa618f)の続きを書いていこうと思います

前回のあらすじ

 - 良いシステムって何？？について考えてみた
 - DDDで使っているレイヤー化アーキテクチャーを学んだ
 - ユビキタス言語を学んだ

今回はドメイン層の中身の話をしていきます！

#エンティティ(entity)
「属性は変わっているが、同一性が保たれているもの」をエンティティとします

どういうことかというと…

人間は生まれてから死ぬまでに成長したり、取引を行ったり、名前が変わったりしますが、一度生まれた人間は何年経とうと別の人間になることはありません
こういうもののことをエンティティとして区別します

エンティティは同一性を保つためにユニークな値(識別子)が必要になります
○○番号、○○IDのようなものが必要です

#値オブジェクト(value object)
「同一性を追跡する必要が無いもの」を値オブジェクトとします

どういうことかというと…

「100」という値はどこまでいっても「100」です
元からある「100」と新しくできた別の「100」は区別しません
「100」は「100」です
こういうもののことを値オブジェクトとして区別します

値オブジェクトは不変になるようにする必要があります
不変オブジェクトについては下記を参照してください
[不変オブジェクトって何？【作り方も解説】](https://qiita.com/bouitengineer12/items/d2222e4a9afee554a2c7)

#サービス(service)
ほとんどはエンティティや値オブジェクトとして区別されますが、それ以外のものもいくつかあります
その内のひとつがサービスです

>ドメインにおける重要なプロセスや変換処理がエンティティや値オブジェクトの自然な責務ではない場合、その操作はサービスとして宣言される独立したインターフェースとしてモデルに追加すること
モデルの言語を用いてインターフェースを定義し、操作名が必ずユビキタス言語の一部になるようにすること
サービスには状態を持たせないこと

つまり、サービスとしてドメイン層にインターフェースを用意する、ということです！
このインターフェースから他システムの呼び出しを行ったりします

○○サービス、○○マネージャーという名前が付けられることが多いみたいです

#集約(aggregates)
ドメイン層にあるオブジェクトに境界線を引いて、その中で一番偉いオブジェクトを決めます(これを集約ルートと言います)
集約内のあるオブジェクトを変更したい、と思った時にはその集約の一番偉いオブジェクト(集約ルート)に問い合わせて変更を行います

このようなルールを用いることで、集約ルートが集約内のオブジェクトの変更の一貫性を担保するため、気づいたらオブジェクトが変更されていた…という事態をなくすことができます

集約内のオブジェクトの管理を集約ルートで一括で受け持つイメージです

#ファクトリー(factories)
あるオブジェクトを生成する責務をそのオブジェクトに任せるのは適切でない場合が多いです
そのようなときにファクトリーをドメイン層に作ってあげると役に立ちます

ここで問題になるのはどこにファクトリーを配置するか、ということですがそのオブジェクトをコントロールさせたい場所に置くことが多いようです
集約ルートに配置してしまうことも多いようです

ファクトリーは新しいオブジェクトの生成の他にも、一度DBに格納したオブジェクトの再構成に使うことができます

#リポジトリー(repositories)
各オブジェクトがDBからデータを取り出してオブジェクトの再構成を行おうとすると煩雑になり、集約のルール(集約ルートを経由させること)やカプセル化が壊れてしまいます
更に、各オブジェクトはデータアクセスのことしか考えられなくなってしまうため、モデルの持つ本来の役割が薄れてきてしまいます

それを防ぐためにDBアクセスを責務とするリポジトリーを作ります
大抵の場合集約ルートに紐づく形で作られます

#まとめ
駆け足でしたが、今日は疲れてしまったのでこのくらいで…ｗ
次回はしなやかな設計について解説していこうかなと思います

[DDDについてのまとめページ](https://qiita.com/bouitengineer12/items/dbd79df4b58932a9bccc)
Promise~JavaScript

JavaScroptのPromise処理についてちょっと理解できた気がしたのでアウトプットとして。

では早速

#基本的な書き方
```javascript
function test(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value) {
        resolve(value)//成功
      } else {
        reject('値がありません')//失敗
      }
    }, 3000)
  })
}

//実行
test('Hello').then(response => {
  console.log(response)//結果 setTimeoutの処理の後(約3秒後)に Hello　となる
}, error => {
  console.log(`エラー:${error}`)
})
```
Promise処理の関数を作りその引数に値を入れたりして
処理が完了(成功)したら__resolve()__に
今回の場合だと引数に__'Hello'__と文字列を入れているのでresolve()の方の処理になる。
これを引数なしで実行すると__reject()__の方の処理になる。
resolve()に引数を入れると、その引数の値を__.then()__で受け取れる。

__この様にPromiseを使う事で同期処理の様な形で処理ができる。__

#__.then()の中でreturnして繋ぐこともできる__

```javascript
test('Hello').then(response => {
  console.log(response)//約3秒後に　Hello
  return test('Bye')
}).then(response => {
  console.log(response)//更に3秒後に Bye
  return test('Wao!!')
}).then(response => {
  console.log(response)//更に3秒後に Wao!!
})
```

結果、上記の処理は全体で約9秒かかる事になる。

##複数の処理をまとめて実行 Promise.all

```javascript
Promise.all([
  test('Hello'),
  test('World'),
  test('!!')
]).then(response => {
  console.log(response)//結果 [ 'Hello', 'World', '!!' ]
})
```
__Promise.all__には配列で渡す。
全ての処理が完了したら__.then()__に値が入る。
この時__.then(response)__には配列として値が返ってくる

##普通に書いた場合

```javascript
function sample1() {
  setTimeout(() => {
    console.log('Promise-1')
  }, 1800)
}
function sample2() {
  setTimeout(() => {
    console.log('Promise-2')
  }, 1000)
}
function sample3() {
  setTimeout(() => {
    console.log('Promise-3')
  }, 600)
}

sample1()
sample2()
sample3()

//結果 Promise-3　Promise-2　Promise-1

```
間に時間のかかる処理等(__非同期処理__)があったりすると順番通りにいかない

上記を__Promise__で書くと

```javascript
function sample1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Promise-1')
      resolve()
    }, 1800)
  })
}
function sample2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Promise-2')
      resolve()
    }, 1000)
  })
}
function sample3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Promise-3')
      resolve()
    }, 600)
  })
}

sample1()
  .then(() => sample2())
  .then(() => sample3())
 //結果 Promise-1 Promise-2 Promise-3
```
と順番通りに処理できる。

#async~await
```javascript
async function test() {
    await sample1()
    await sample2()
    await sample3()
  }
  test()
```
結果は同じ``await``で待つという感じになるみたい
それと``async``を関数の前に
まだ理解が足りてないのでまた別で書こうと思います。

間違いがあれば指摘いただけると嬉しいです！


async,awaitもちゃんと覚えなければ、、、
【Haml】よく使う書き方まとめ

個人的に、業務で使うhamlの書き方をまとめました。

## head部分

```index.html.haml
= content_for :meta_head do
  %title hoge
  %meta{:content => "hoge", :name => "description"}/
  %meta{:content => "hoge", :property => "og:title"}/
  %meta{:content => "article", :property => "og:type"}/
  %meta{:content => "hoge", :property => "og:description"}/
  %meta{:content => request.url, :property => "og:url"}/
  %meta{:content => "Foo", :property => "og:site_name"}/
  %meta{:content => "Bar"}", :property => "og:image"}/
  = stylesheet_link_tag "hoge.css", media: "all"
  = javascript_include_tag "hoge"
```

## body部分

```index.html.haml
#content
  .content-head-img
    .top-image-pc
      =image_tag("pc.png")
    .top-image-sp
      =image_tag("sp.png")
    .content-head-inner
      .inner-txt
        hogehoge
      .inner-arrow
        = image_tag @event.eye_catch.to_s, size: "10x10", alt: "hoge"
      =link_to "hoge","/content/index", :class => "btn"

```

> \# = id属性 . = class属性
> =image_tag 第1引数は画像ファイルへのパスを指定 / 第2引数は表示したいサイズを指定 / 第3引数はalt属性の指定
> link_to 第1引数はテキスト / 第2引数はURLリンク先

同じdivでも、**class付与しただけのdivと**、**複数の属性を持っているdiv**では書き分けたりしていますが、この辺りは会社のコーディングルールに従うべきですね。

```index.html.haml
.hogehoge
%div{class:"hogehoge",:role=>"dialog", "aria-hidden"=>"false", :id=>"hogeeee"}
```

## if文とループ文の組み合わせ
bootstrapも途中で入っています。

```index.html.haml
- if @hoge.present?
  - @hoge.each do |hoge|
    - if @foo != hoge.id
      - @foo = hoge.id
      .hoge-section
        %li.hoge-recommend-item
          .row
            -if hoge.image.present?
              .col-xs-12.col-md-2.col-lg-12.hoge-container
                .hoge-container-content
                  %div
                    = image_tag(hoge.image.thumb)
            -else
              .col-xs-12.col-md-2.col-lg-12.hoge-container
                .top-recommend-profile-box
                  %div
                    = image_tag('default_story.jpg')
```

基本的に、view部分にロジックは書かずcontrollerに書くことで可読性を上げていることを重視しています。
DjangoでError: That port is already in use.が出たら

完全に備忘録です。

ポートを解放したいとき

```
ps aux | grep -i manage
```

下記が表示される

```
ユーザ名      778   0.0  0.1  4349020   4252   ??  S    31May20   0:39.16 /System/Library/CoreServices/RemoteManagement/SSMenuAgent.app/Contents/MacOS/SSMenuAgent
ユーザ名      775   0.0  0.0  4333584   1012   ??  S    31May20   0:02.50 /System/Library/CoreServices/backgroundtaskmanagementagent
ユーザ名      771   0.0  0.0  4337392   1720   ??  S    31May20   0:24.40 /System/Library/CoreServices/RemoteManagement/ARDAgent.app/Contents/MacOS/ARDAgent
ユーザ名    85298   0.0  0.0  4268040    788 s002  S+    9:15PM   0:00.00 grep -i manage
```

killしたいPIDを選択

```
kill -9 85298
```
DDDとは。。

##はじめに
チーム開発でロジックの部分を触る機会があり、クリーンアーキテクチャについての概念的な部分を調べました。クリーンアーキテクチャはRobert C. Martin(Uncle Bob)が2012年に提唱した、DBやフレークワークからの独立性を確保するためのアーキテクチャであり、以下の図が大変有名です。
しかし、この図を見ても僕は全く理解することができなかったので自分なりにわかりやすい記事やサイトを抜粋し、自分の中で落とし込んでみることにしました、。
そもそもクリーンアーキテクチャを理解するにはDomain Driven Design(ドメイン駆動設計)の理解が前提条件としてあります。僕はこのDDDさえも理解していなかったのでそこから調べることにしました、笑
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670219/3e2eaa70-ba18-73df-2bf3-ef86212120f9.png)

##Domain Driven Design(ドメイン駆動設計)
1.開発を進める上で実際の業務をきちんと理解せずに作るとリリースしても全然使われずに不評なものができる。

2.メンテナンス性が悪く整理されていないプログラムを書いたら、後から修正するのが大変になる。

DDDはこのような問題を解決するために生まれた開発手法だそうです。
###ドメイン
まず最初に理解する必要があるのがドメインです。
まずドメインとは『　専門領域　』のことです。専門領域と言われても意味が分からないので具体的な例えで説明していきます。

飲食店系列会社に依頼されて、セルフオーダーアプリを作ることになりました。
何から手をつければいいのか？
セルフオーダーのクラスを作るところからなのか？
キッチンのDBモデルを作るところからでしょうか？
そうではありません。
最初にやらなければいけないのは、実際にどのような仕組みでオーダーを取っているかを知ることです。

業務に対する十分な知識がないまま、システムを構築することは不可能です。

ではどのように知ればいいでしょうか。
一体、誰が飲食店のオーダーシステムについて一番詳しいのか？
それはもちろん、実際に飲食店で働かれている方です。
専門領域の話は専門家に伺うのが一番確実だということです。

要するにDDDとは、実際にあるドメイン(専門領域)をどの様に実装に落とし込み、開発に変換して行くかを考えた手法の一つです。

#まとめ
頭に思い浮かんだ実装が正しく思えても、実際にドメイン分析してみると、それが全く的を得ていないことがわかったりします。
その差異をできるだけ排除して、可能な限りドメイン(専門領域)に沿った仕様にモデリングをすることが大事なんだということがざっくりとわかりました。

※DDDのモデリングというのは何か問題を解決するために現実世界の一部を抽象化すること
react-router-domのプロパティ"exact"とは？

# 本記事を書いた経緯
Webアプリを開発するにあたって，ルーティングのために```react-router-dom```を利用しました．
その中でも，プロパティのうちの一つである```exact```がどのような役割なのか曖昧なまま利用していたのでこちらにまとめます．（Homeの```path```に指定するものだと思い込んでいた...）

# ```exact```とは？
[React Router](https://reactrouter.com/web/api/NavLink/exact-bool)の```<Route />```内に```exact```（bool）を記述すると指定した```path```とlocation.pathnameが「完全一致」した場合のみコンポーネントを返します．

## 例
ドキュメントの例をお借りすると，

| path | location.pathname | exact | maches? |
|:-:|:-:|:-:|:-:|
| /one | one/two | true | no |
| /one | one/two | false | yes |

のようになります．
上の例では，```exact=true```のため，完全一致でなければならずmachしません．
一方，下の例では，```exact=false```のため，部分一致する```one/two```とmachします．

## ```Home```で```exact```を指定する理由
私は，Homeで表示されるページに```exact```を指定すると勘違いしていましたが，上記のことを踏まえるとあながち間違えではないことが分かります．
つまり，

```react
<Route exact path="/" component={Home} />
```

のように```exact```を指定してあげないと．すべての```location.path```についてHomeの```path```と部分一致してしまうからです．

# 参考
[react-router](https://reactrouter.com/web/api/NavLink/exact-bool)
PhpSpreadsheetでメモリ爆喰い または、変更してないセルの書き込みで落ちる場合の対処法

# writeCellFormula, Cell , Coordinate 関係でエラー落ちする場合

どうやら、PhpSpreadsheetさんは式を解決してからファイルを保存してくれるらしい。
しかし、複雑な式を書いていると無限ループになったり、うまく計算できず落ちてしまうっぽい
Excel上でならうまく処理してくれる場合でも、だ。

そういう時（XlsxWriterに対して）は

```
$writer->setPreCalculateFormulas(false);
```

を加えて事前計算処理をスキップさせる事ができるようだ。

[https://phpspreadsheet.readthedocs.io/en/latest/topics/reading-and-writing-to-file/](https://phpspreadsheet.readthedocs.io/en/latest/topics/reading-and-writing-to-file/)
ここを読んでいて見つけた。

次同じようなハマり方をした同志の為になればと。