OmniAICreator/Qiita-1.07M huggingface dataset:
VscodeでtailwindCSSの拡張機能が効かないときに確認すること

意外と詰まったので記録を残す。

自分の場合は、2番めのtailwind.config.jsがなかったのが原因だった。
Nuxtのcreate appコマンドでtailwindを選択しても、tailwind.config.jsは作ってくれないみたいで
ファイルが無いことに気づかなかった。

## vscodeのsetteings.jsonに以下を追加する

```setteings.json
"tailwindCSS.includeLanguages": {
    "plaintext": "vue"
  },
  "tailwindCSS.emmetCompletions": true
```

参考：https://qiita.com/ikkei12/items/ea78cf8d74912781a438

## プロジェクトディレクトリにtailwind.config.jsがあるか確認。

これがないとtailwindがないと見なされるらしく、拡張機能が働いてくれない。

ルートディレクトリに以下の内容でファイルを追加すればよい。

参考：
tailwind.config.jsがないと動かないよとアドバイスが載っているissue
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/49

tailwindcssの公式(tailwind.config.jsの書き方が載っている)
https://tailwindcss.com/docs/configuration#creating-your-configuration-file

```tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```
東芝 dynabook Satellite Pro 50-E　突然電源入らず・・・

職場で、個人で所有しているdynabook Satellite Pro 50-Eの電源が、お昼から
入らなくなったと申し出があったため、見てみた。

電源は入るが、BIOSの起動とWindowsの起動が始まった瞬間に電源が切れる。

困った・・・

私自身もdynabookを愛用していたことがあり、似たような現象で悩まされたことを思い出した。

###バッテリーや!


試しに、バッテリを外して電源を入れようとすると、入らない。バッテリを取り付けるで電源ボタンを押すと、
一瞬でも電源は入る。

なので、東芝のノートパソコンって、バッテリ回路を通ってマザーボードに電気が流れる仕組みになってるの？
ということになる。でも、そんなことどこにも書いてないし。
しかし、私自身が愛用していたDynabookも、たしかバッテリがダメになって電源が入らなくなり、バッテリを
交換したら電源が入った記憶がある。確証はないが、類似現象なので、たぶんそうだと思う。


とりあえず、Amazonでバッテリ（互換品）を頼んでみた。

まだ、届いていない・・・
pip install しようとしたら SSLError が出た

### pip install しようとしたら下記のようなエラーが発生

```console
Requirement already satisfied: certifi in /XXXX/yyyy/.pyenv/versions/3.9.1/lib/python3.9/site-packages (2020.12.5)
WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/certifi/
WARNING: Retrying (Retry(total=3, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/certifi/
WARNING: Retrying (Retry(total=2, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/certifi/
WARNING: Retrying (Retry(total=1, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/certifi/
WARNING: Retrying (Retry(total=0, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/certifi/
Could not fetch URL https://pypi.org/simple/certifi/: There was a problem confirming the ssl certificate: HTTPSConnectionPool(host='pypi.org', port=443): Max retries exceeded with url: /simple/certifi/ (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))) - skipping
```

- さっきまでinstall できてたのに

### ネットで調べてみた
- proxyを使用しているのがあかんよう
- でもproxyサーバなんぞたてとらん（なぜ。。。）


### 原因はWeb Debugging Proxy Tool！！！！
- Web Debugging Proxy Toolに[Fiddler](https://www.telerik.com/fiddler)を使用していた。。。。うっかり！！！
- Live Traffic を `OFF` にしてあげたらinstallできました！

![スクリーンショット 2021-07-17 14.15.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226953/925d82b2-7bdc-150a-c27e-0564d609be85.png)
[React]React×Expressで爆速環境構築[Express]

こんにちは。ゆうじろうです。
この記事では、Reactで作成した画面からExpressで作成したAPIを叩いて、取得したデータを画面に表示するところまでを爆速で構築していきます。
つよつよJavaScriptエンジニアになりたい方は必見の書物です。

## 使用する環境について
まずは何がともあれ、環境構築を行います。
筆者はMacを使用しているので、ターミナルを使用しますが、Windowsの方もコマンドプロンプトやgitbashを使用していただければ同じ動作になります。

事前にinstall しておきたいのは以下3点です！

- node.js

https://nodejs.org/en/

- Express

```bash
npm install -g express-generator
```

- create-react-app

```bash
npm install -g create-react-app
```

では、はじめましょう！


## 環境構築
では、ターミナルを開き、以下のコマンドを打ち込んでください。

まずはプロジェクトのディレクトリを作成します。

```bash
mkdir react-express
cd react-express
```

そして、npm initを実行

```bash
npm init -y
```

今回は爆速でいくので、 -yオプションで実行します。(npm initの設定を全部yesで設定するオプション)

続きまして、Expressのinstallです。

```bash
express react-express
```
サンプルができたら、cd で移動してnpm installです

```bash
cd react-express
npm install
```

ここで、nodeの便利パッケージnodemonをinstallしておきましょう。

```bash
npm install nodemon
```

expressとReactを同時に立ち上げないといけないので、concurrentlyをintallします。

```bash
npm install concurrently
```

Expressで作成したプロジェクトのuser.jsを修正します。

```js:user.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.json([{
  	id: 1,
  	name: "yujiro1"
  }, {
  	id: 2,
  	name: "yuziro2"
  }]);
});

module.exports = router;
```

app.jsのポート設定を記載します。app.jsの最後らへんに追記してください。

```js:app.js
const port = process.env.PORT || 3001;
app.listen(port, () => console.log(`Server running on port ${port}`));

module.exports = app;
```

expressのpackage.jsonを修正します。

```json:package.json
"scripts": {
    "start": "node ./bin/www",
    "server": "nodemon ./bin/www"
 }
```

クライアント側のアプリを作成していきましょう！

```bash
create-react-app client
```

クライアント側のpackage.jsonを開いて以下の設定をしてください。

```json:package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
```

client側のApp.jsをExpressで作成したAPIを取得するように記載します。

```js:App.js
import React, { useEffect,useState } from 'react';
import './App.css';

const App = () => {
 const url = "/users";
 const [users, setUsers] = useState([])

 useEffect(() => {
   fetch(url, { method: "GET" })
     .then((res) => res.json())
     .then((data) => {
       setUsers(data);
     })
     .catch((err) => {
       console.log(err);
       console.log("err");
     });
 }, []);

    return (
      <div classname="App">
        <h1>Users</h1>
        {users.map((user,index) =>
          <div key={index}>{user.name}</div>
        )}
      </div>
    );
}

export default App;
```

ここまできたらExpress側のpackage.jsonを追記します。

```json:package.json
  "scripts": {
    "start": "node ./bin/www",
    "server": "nodemon ./bin/www",
    "client": "PORT=3002 npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\" "
  }
```

これで、npm run devとすれば完了です！

```bash
npm run dev
```

お疲れ様でした！
【Nuxt.js】vue-awesome-swiperを導入

# はじめに
Nuxt.jsにて作っているサイトにてスライドショーを取り入れたかったので`vue-awesome-swiper`を導入してみました。

https://github.com/surmon-china/vue-awesome-swiper

# 導入
1.ライブラリのインストール

```sh:ドキュメントルート
npm install swiper@5.x vue-awesome-swiper

```
（追記）
Swiperのバージョンを6系だとペジネーション等がうまく動作しなかったため、明示的に5系をインストールするようにしました。公式でも推奨されていました。

2.プラグインに追加

plugins/vue-awesome-swiper.jsを作成

```javascript:plugins/vue-awesome-swiper.js
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

Vue.use(VueAwesomeSwiper);
```

3.nuxt.config.jsに追記

```javascript:nuxt.config.js
build: {
        vendor: ['vue-awesome-swiper']
    },
plugins: [
        { src: '@/plugins/vue-awesome-swiper.js', ssr: false }
    ],
```

以上で導入は完了です。

# 利用
試しにindex.vueに実装

```vue:index.vue
<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>スライダー１</swiper-slide>
      <swiper-slide>スライダー２</swiper-slide>
      <swiper-slide>スライダー３</swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 1, // 1枚に表示するスライド数
        loop: true // 最終ページの次にまた1枚目が表示される
      }
    };
  }
};
</script>
```
![スライダー1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378711/bb514a8b-5191-635c-1f43-151e24ca15b4.gif)

あれっ？

調べてみたところcssファイルの読み込みも必要でした。


```javascript:plugins/vue-awesome-swiper.jsを作成
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // 追記 swiper5系だとこれ

// import 'swiper/swiper-bundle.css' ちなみに6系だとこちらです

Vue.use(VueAwesomeSwiper);
```

![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378711/dd5a1d44-74a3-bdaa-d133-8b3304cae200.gif)


動いた〜！

# おわりに
とりあえず最低限ですがスライダーの導入ができました！
カスタマイズ性も高そうですのでこちらを使っていきたいと思います！

# 参考
[【Vue.js】Vue.js(Nuxt.js)でスライダーを導入してみた【vue-awesome-swiper】](https://qiita.com/nakanishi03/items/c12221be7645b84016c8)
[Nuxt.js環境下にSwiperを導入してみる。](https://note.com/toom_design/n/nb635e9e90545)
[ShopifyのBuy Button機能の活用 〜2.vue-awesome-swiperを使って多数の商品をスライダー表示する〜](https://sodane.hokkaido.jp/tech/202010261724000412.html)
[Nuxtにvue-awesome-swiperを入れてスライドショーを実装する](https://mykii.blog/nuxt-vue-awesome-swiper/)
pandasから株価のデータ取得できなくなった件

2021/7/1からpandas_datareaderから株価のデータを取得すると以下のエラーが発生

```
pandas_datareader._utils.RemoteDataError: Unable to read URL: https://finance.yahoo.com/quote/004840.KS/history?period1=1623006000&period2=1626548399&interval=1d&frequency=1d&filter=history
```

### 解決方法

```python
import pandas
from pandas_datareader import data as pdr
import yfinance as yfin
yfin.pdr_override()

>>> df = pdr.get_data_yahoo('1514.T',start ='2021-06-07', end='2021-07-07')
[*********************100%***********************]  1 of 1 completed
>>> df
             Open   High    Low  Close  Adj Close  Volume
Date                                                     
2021-06-07  130.0  131.0  129.0  131.0      131.0  510300
2021-06-08  130.0  131.0  129.0  130.0      130.0  289200
2021-06-09  131.0  131.0  128.0  129.0      129.0  279600
2021-06-10  129.0  129.0  126.0  128.0      128.0  742700
2021-06-11  128.0  130.0  126.0  130.0      130.0  369300
2021-06-14  130.0  130.0  128.0  128.0      128.0  101700
2021-06-15  129.0  129.0  126.0  128.0      128.0  417900
2021-06-16  128.0  131.0  127.0  129.0      129.0  733900
2021-06-17  128.0  129.0  127.0  127.0      127.0  457600
2021-06-18  128.0  128.0  125.0  125.0      125.0  842300
2021-06-21  124.0  124.0  121.0  122.0      122.0  789900
2021-06-22  124.0  125.0  123.0  125.0      125.0  293200
2021-06-23  125.0  126.0  125.0  126.0      126.0  285800
2021-06-24  125.0  126.0  125.0  126.0      126.0  148800
2021-06-25  126.0  129.0  125.0  127.0      127.0  675100
2021-06-28  126.0  128.0  126.0  128.0      128.0  240200
2021-06-29  127.0  128.0  125.0  125.0      125.0  371500
2021-06-30  126.0  128.0  126.0  126.0      126.0  205200
2021-07-01  126.0  128.0  126.0  126.0      126.0  227500
2021-07-02  127.0  128.0  126.0  128.0      128.0  220200
2021-07-05  128.0  128.0  126.0  126.0      126.0  240000
2021-07-06  127.0  128.0  126.0  127.0      127.0  212600

```

### issue リンク
https://github.com/pydata/pandas-datareader/issues/868#issuecomment-873381817
郵便番号検索　住所自動入力 JavaScript

## はじめに
javascriptで郵便番号を検索して住所をフォームに自動入力するスクリプトを作りました。
既存の物は非同期のため入力後の処理が出来ませんでしたが、今回作ったものは関数を渡すことで入力後の処理が出来ます。

## 使い方
### 導入
以下をHTMLに追加します。

``` html
<script src="https://mao2009.github.io/zipToAddress/zipToAddress.js"></script>
```

フォームを作り、ボタンなどのイベントにzipToAddressを登録します。
zip1, zip2, prefecture, city, streetにはセレクタの文字列
funcには自動入力後に処理したい関数を指定します。
必須はzip1、zip2、prefectureですが郵便番号が一つのフィールドの場合はzip2には""を指定してください。
郵便番号にハイフンが入っていても全角数字でも問題ありません。

``` js:zipToAddress
zipToAddress(zip1, zip2, prefecture, city, street, func)
```

### 住所フィールドが1つの場合 

``` html:html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    住所 :
    <input type="text" id="address"></input>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#address")'>住所検索</button>
</div>
```
### 住所フィールドが2つの場合 

``` html:html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    住所 :
    <input type="text" id="pref"></input>
    <input type="text" id="city"></input>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#pref", "#city")'>住所検索</button>
</div>
```

### 住所フィールドが3つの場合 

``` html:html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    住所 :
    <input type="text" id="pref"></input>
    <input type="text" id="city"></input>
    <input type="text" id="street"></input>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#pref", "#street")'>住所検索</button>
</div>
```

### 住所を取得後の処理をする場合

``` html:html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    <input type="text" id="pref"></input>
    <input type="text" id="city"></input>
    <input type="text" id="street"></input>
</div>
<div>
    住所 :
    <textarea id="massage"></textarea>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#pref", "#street", sampleFunc)'>住所検索</button>
</div>
<script id="sample_script">
    function sampleFunc(data) {
        const zip = document.querySelector("[name=zip1]").value + "-" +document.querySelector("[name=zip2]").value;
        const massage = document.querySelector("#address");
        const prefecture = data.results[0].address1;
        const city = data.results[0].address2;
        const street = data.results[0].address3;

        massage.value = zip + "\n" + prefecture + city + street;
    }
</script>

```

## My Accounts
<a href="https://github.com/mao2009"><img src="https://mao2009.github.io/qiita_template/GitHub-Mark-64px.png" width="50px"></a><a href="https://twitter.com/loach_mao"> <img src="https://mao2009.github.io/qiita_template/Twitter_Social_Icon_Circle_Color.png" width="50px"></a>
PHP基本事項まとめ

#PHPの基本事項まとめ

1.複数行では終わりにセミコロン必要！
2.500エラーはプログラムでなにかエラーがあった時に起こる
3.PHPタグの後になにも記載しない場合は閉じタグをかかない
→閉じタグの後はHTMLと認識され空白も認識されてしまうため。
4.コメントアウトは＃でもいける
5.文字列結合はドットを使う
6.ダブルクォーテーションとシングルクォーテーションの違い
 ・ダブルクォーテーション内では変数が使える、かぶる場合は｛｝をつける
 ・ダブルクォーテーション内ではエスケープシーケンスが使える
7.自己代入演算子

```
$i = $i + $j
//同じ意味
$i += $j
```
8.動的型付け言語
9.issetは変数が定義されていて、null以外のときtrueを返す
10.emptyはissetがfalseまたは、値がfalsyなときにtrueを返す
【Docker】MySQL接続エラー「php_network_getaddresses: getaddrinfo failed: Name or service not known」

## はじめに

コンテナの初回起動（DBマイグレーション）時に表題エラーが発生しました。
[こちらの記事](https://qiita.com/uta3chame/items/47b393e5887530573118)の方法を試すも、直らず。。。

同事象の方の参考になれば幸いです。


## エラー内容

Docker Composeでイメージビルドとコンテナを起動し、コンテナ内でマイグレーションを実行すると下記エラーが発生

```terminal
$ docker-compose exec app php artisan migrate:fresh --seed

   Illuminate\Database\QueryException 

  SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Name or service not known (SQL: SHOW FULL TABLES WHERE table_type = 'BASE TABLE')

  at vendor/laravel/framework/src/Illuminate/Database/Connection.php:671
    667|         // If an exception occurs when attempting to run a query, we'll format the error
    668|         // message to include the bindings with SQL, which will make this exception a
    669|         // lot more helpful to the developer instead of just the database's errors.
    670|         catch (Exception $e) {
  > 671|             throw new QueryException(
    672|                 $query, $this->prepareBindings($bindings), $e
    673|             );
    674|         }
    675| 

      +45 vendor frames 
  46  artisan:37
      Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))


```

DB接続で落ちているエラーっぽい。

試しにコンテナ起動をしてみると、

```
$ docker-compose up
Docker Compose is now in the Docker CLI, try `docker compose up`

// 略

db_1   | 2021-07-17 02:15:11+00:00 [ERROR] [Entrypoint]: MYSQL_USER="root", MYSQL_USER and MYSQL_PASSWORD are for configuring a regular user and cannot be used for the root user
db_1   |     Remove MYSQL_USER="root" and use one of the following to control the root user password:
db_1   |     - MYSQL_ROOT_PASSWORD
db_1   |     - MYSQL_ALLOW_EMPTY_PASSWORD
db_1   |     - MYSQL_RANDOM_ROOT_PASSWORD
XXXX_db_1 exited with code 1
```

MYSQL_USERとMYSQL_PASSWORDには、rootを使用するな(通常ユーザーを使用しろ)というエラーっぽいですね。
root以外の任意の値を指定すれば良さそうです。

## これで解決

.envのDB_USERNAMEのvalue値(root)を削除して、


```env
// 略

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3308
DB_DATABASE=laravel
DB_USERNAME=
DB_PASSWORD=

// 略

```

コンテナ再起動して、DBマイグレーション再実行で解決！

```terminal
docker-compose down
docker-compose up -d
docker-compose exec app php artisan migrate:fresh --seed
// エラー出ない！よっしゃ！
```

## 最後に
```
MYSQL_USER="root", MYSQL_USER and MYSQL_PASSWORD are for configuring a regular user and cannot be used for the root user
```
これを読むと、MYSQL_USER（とPASSWORD）は通常ユーザーのためのもので、rootユーザーには使用できないと書かれてますね。
前は、rootのままで行けた気がしますが。。。とりあえず直ったのでよし！ですね！！！
BeautifulSoupによるHTML解析でのエラー

HTMLからデータをスクレイピングする際に、BeautifulSoupを使用する。

Python上でBeautifulSoupを使用する際に以下のようなコードを記述した。

```php
import requests
from bs4 import BeautifulSoup

url = "https://www.python.org/"
r = requests.get(url)
soup = BeautifulSoup(r.content,"lxml")
print(soup)
```

これを実行しようとしたところ以下のエラーが出た。

```php:error
Couldn't find a tree builder with the features you requested: lxml. Do you need to install a parser library?
```

##解決策

BeautifulSoupのインストール関係に問題があった。
標準のimportでは"lxml"はインストールされていない。
よってこれをインストールする必要がある。

```php:解決策
pip install lxml
```

これをすることにより、正常に動かすことができた。

長いためここには記載しないが、実際に動かしてみて確認してみてください。
画像変更したらstorage内に画像データを溜めないようにしたい。

# はじめに
画像を変更すると、`元の画像は削除`して`新しい画像データを保存`するようにしたい。
DBでは画像データの入れ替えはできているが、`storage内の画像データは溜まっていく一方`...。

という状況であったため、更新すると`storage`内の画像データの入れ替えができるよう実装しました。

# 条件
```
macOS: "11.2.3 Big Sur"
Laravel Framework: "6.20.27"
PHP: "8.0.7"
nginx: "1.18"
mysql: "8.0"
vue: "2.6.14"
```

# 画像の保存

すでに何枚か入っていますが、投稿された画像データは以下のように保存されています。
今回は、赤枠で囲った画像をピックアップして見ていこうと思います。
![スクリーンショット 2021-07-16 16.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/39dcfb11-3eea-c936-5d34-dfb30588fa83.png)


# 画像変更処理

以下のコードは、`画像の変更処理のみ`を書いています。


```php:Controller
class RecipesController extends Controller
{
    // 省略
 
    public function update(RecipeRequest $request, Recipe $recipe)
    {
        // 省略

        // 変更前のレシピのIDを取得
        $editRecipeId = $recipe->find($recipe->id);
        
        // 画像更新処理
        // requestに変更のファイルがあれば画像の変更処理を行う
        if($request->hasFile('cooking_img_file')) {
            // 変更前の画像データを削除
            $this->recipe->deleteRecipeImage($editRecipeId);
            // 変更後の画像データを取得
            $path = $request->file('cooking_img_file')->store('public/recipes');
            $recipe->cooking_img_file = basename($path);
            $recipe->save();
        }

        $recipe->save();
    }
}
```

`$editRecipeId`の内容は以下のように渡ってきます。
![スクリーンショット 2021-07-16 17.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/3a4873e0-ff47-5ca5-9721-1b9201fb0e54.png)
`cooking_img_file`には、変更前の画像データが渡ってきているのがわかります。
そして、渡ってきた変更前のデータを`deleteRecipeImage`メソッドに渡します。

```php
$this->recipe->deleteRecipeImage($editRecipeId);
```

`deleteRecipeImage()`メソッドの内容は、以下となります。

```php:Model
class Recipe extends Model
{
    // 省略

    // 
    public function deleteRecipeImage($delRecipeId)
    {
        // storage/app/public/imagesから画像ファイルを削除
        $delPath = '/public/recipes/' . $delRecipeId->cooking_img_file;
        if(Storage::exists($delPath)) {
            Storage::delete($delPath);
        }
    }
}
```
ここでは、`storage`内の画像データの削除を行っています。

削除が終わり次のコードでは、新たに取得した画像のパスを取得しています。

```php
 $path = $request->file('cooking_img_file')->store('public/recipes');
```
`$path`の内容は以下のようになっています。
![スクリーンショット 2021-07-16 17.22.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/6496779d-54bd-fef0-080f-9482845a9d3f.png)
新しい画像のパスが渡ってきていることがわかります。
パスの、`public/recipes/`の部分は保存する際に必要ないため、以下のコードで保存したい部分のみを抽出します。

```php
$recipe->cooking_img_file = basename($path);
```

最後に`$recipe->save();`をして更新処理完了！

<br>
テーブルを確認するとちゃんと画像データが変更されていることがわかります。
![スクリーンショット 2021-07-16 17.43.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/f87ee6fc-dcce-2219-4e06-7d898de96b85.png)

![スクリーンショット 2021-07-16 16.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/28a960f5-a71a-bf6e-b661-e8f4ae75342f.png)
![スクリーンショット 2021-07-16 17.49.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/5736dba0-a4e8-e982-445f-6cb88488f9b0.png)
途中、デバッグを繰り返したため数枚画像データが入っていますが変更前の画像データは消えて、変更後のデータが入っていることが確認できます。

これで画像の更新処理が完了しました！

# おわり
画像データがどのように渡ってくるか、デバッグしつつ追うことで理解が深まりました。
デバッグ大事！

# 参考
今回の実装にあたり、以下の内容も参考にさせて頂きました。

https://teratail.com/questions/278729
アスペクト比・画面解像度の求め方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686943/11b25588-d4c9-2d8e-95f0-39637a636ca2.png)

##アスペクト比・画面解像度
　DCCツール等で特殊なアスペクト比を使うときや一辺の解像度だけがわかってる時があります。その時に手動で解像度を求める方法です。単純な計算ですが意外と分からなかったりします。

- - -

　例えばアスペクト比16:9で横1920のとき、縦はいくつでしょう？
　これはフルHDを知っていればすぐに1080と出てきます。

　それではアスペクト比16:10、横1920のとき、縦はいくつでしょう？
　答えは1200です。

　ではアスペクト比20:9のときは？

　これは計算式でカンタンに求めることができます。

##計算式
　**解像度(長辺) ÷ アスペクト比(長辺) × アスペクト比(短辺) = 解像度(短辺)**
　**解像度(低辺) ÷ アスペクト比(低辺) × アスペクト比(長辺) = 解像度(長辺)**

　これで割り出せます。
　これを先ほどの式に当てはめると、、、

　1920 ÷ 16 × 9 = 1080
　1080 ÷ 9 × 16 = 1920
　1920 ÷ 16 × 10 = 1200
　1920 ÷ 20 × 9 = 864

　これで解像度とアスペクト比に困ることは無いと思います。
深層学習。GPUでのソフトエラーの現場をおさえたー！

# GPUでのソフトエラーの現場をおさえたー！

深層学習を実行する場合に、NVIDIA GPUのGEFORCEを使うことがあると思います。
GEFROCEは、ECCがついていません。

# でたー、ソフトエラー。

↓　これがそうである可能性は１％ぐらいかもしれませんが。。。どうでしょう。

>Traceback (most recent call last):
  File "<string>", line 1, in <module>
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\spawn.py", line 105, in spawn_main
    exitcode = _main(fd)
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\spawn.py", line 115, in _main
    self = reduction.pickle.load(from_parent)
MemoryError
Traceback (most recent call last):
  File "train_cifar10.py", line 213, in <module>
    trainloss = train(epoch)
  File "train_cifar10.py", line 144, in train
    for batch_idx, (inputs, targets) in enumerate(trainloader):
  File "C:\Users\sXYZZ\AppData\Roaming\Python\Python37\site-packages\torch\utils\data\dataloader.py", line 291, in __iter__
    return _MultiProcessingDataLoaderIter(self)
  File "C:\Users\sXYZZ\AppData\Roaming\Python\Python37\site-packages\torch\utils\data\dataloader.py", line 737, in __init__
    w.start()
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\process.py", line 112, in start
    self._popen = self._Popen(self)
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\context.py", line 223, in _Popen
    return _default_context.get_context().Process._Popen(process_obj)
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\context.py", line 322, in _Popen
    return Popen(process_obj)
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\popen_spawn_win32.py", line 89, in __init__
    reduction.dump(process_obj, to_child)
  File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python37_64\lib\multiprocessing\reduction.py", line 60, in dump
    ForkingPickler(file, protocol).dump(obj)
BrokenPipeError: [Errno 32] Broken pipe

# コメント
もしも、エラーが起こるかもしれない環境で、深層学習を動かしているとしたら、、、かなり違和感があります。
どうなんでしょうか。
のべ１万人の一生で一度あるかないかとかの率だったら気にしませんが。。。

# まとめ
情報などあればお願いします。
マテリアルズインフォマティクス旅行記　0

化学に精通した人で、マテリアルズインフォマティクス（以下MI）をやってみたい、なんかMIがすごいらしい、みたいな人は結構いると思います。

ただ、とにかく情報（特に日本語）が少ないです。普通の機械学習や化学に関する情報は大量にあるし、初心者用から上級者用まで参考書もそろっていますが、MIに関しては、情報が少ないし、入り口となる初心者用の参考書も見当たりません。


今回はそんなまだまだ成熟していないMIの世界に挑戦したい工学部大学生が、MIを学習していく旅を、旅行として記録していこうと思います。

これから先MIを始める人たちの役に立てば良いなと思います。
7200系 LEDライトキットを組み立てる

7200系　LEDライトキットの組み立て方になります。
https://www.tclub.jp/7200-light.html
#部品の確認
部品がキチンと入っているか確認しましょう。
テールの赤LEDが非常に明るくヘッドライトへの光漏れが酷かったために輝度が低いLEDにし大きな抵抗にしています。
抵抗をCRD(3225)に変更しても良いでしょう(パターンはCRD用に3225サイズです）
ヘッドライトには黄色LEDを使用していますが、色味が気になる方は変えてみてください。

|部品 |数量  |
|---|---|
|基板 |2  |
|ブリッジダイオード  |2  |
|LED(黄）1608サイズ |8  |
|LED(赤）1608サイズ  |4  |
|LED(白）1608サイズ |2 |
|抵抗（560Ω）2012サイズ  |4  |
|抵抗（1KΩ） 2012サイズ|4 |
<img src="https://www.tclub.jp/7200-light-1.jpg">
#別途用意すると良い物
- 配線材
- 両面テープ
- 12VテープLED

#回路図
回路図になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/18a90d0e-ae0b-8e78-7545-b7fc986aae67.png)
#通常の場合
普通のパワーパック等で使用する場合は、説明書通りに組み立てます。
<a href="https://www.tclub.jp/7200-light-kit.pdf">https://www.tclub.jp/7200-light-kit.pdf</A>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/76f9ed72-3b9c-b06b-7e6a-eb48513a5590.jpeg" alt="通常" width="300" height="200">
#DCCの場合
DCCの場合、JMPにダイオードを取り付けます。(フラックスが汚いですね・・・）
この場合、DCCと通常のDCのどちらでも使用可能になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a9288024-dd0c-8c2e-ac71-1bcf1b5cbd57.jpeg" alt="DCC" width="300" height="200">
#室内灯を付ける場合
基板と配線材をつなげるとともに、テープLEDを取り付けます
基板上部に12VとGNDのパターンがありますのでこちらに取り付けます。
![DSC_0476 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/357f8648-731f-8737-b08c-d3f8b27105a1.jpeg)
![DSC_0276 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5781756c-1eda-0e32-705e-efb423c3daf9.jpeg)
#車両の改造
光漏れ対策の為にヘッドライトとテールライトを分割します。
<B>車両の改造は細かい改造の為、破損、紛失がある為、十分注意してください</B>
まずは、分解しましょう
![DSC_0259 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0bd729b8-8b1c-e9da-d674-d43b42f61b65.jpeg)
前面の樹脂パーツも分解します
私はヘッドライトのレンズが1個外れませんでした。
![DSC_0265 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4c1a86c7-37b5-7bd0-9098-9a190bea0ce7.jpeg)
次にヘッドライトとテールライトも分割して接着します
<B>ニッパを使った場合、写真のように割れてしまうので要注意です</B>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9f545866-51a8-a1ae-cd5a-09f7e3ed0454.jpeg" alt="ライト部品" width="300" height="200">
#組立
テープLEDと基板を両面テープ等で固定します
試作時点ではマーカーで遮光しましたがうまくいきませんでした。
![DSC_0283 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6dff8805-da59-42e7-3429-92e0683fe1dc.jpeg)
![DSC_0288 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/792c25f8-89ab-0088-4f0a-19fb3d90be16.jpeg)
#完成
ヘッドライトは問題ありません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7c3b9ec4-2bb7-d9cf-0955-9dade92df4b2.jpeg" alt="ヘッドライト" width="500" >
テールライトはやはり光漏れしてしまいます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/93f9384d-6522-d25d-d792-b0c6a5eef419.jpeg" alt="テールライト" width="500" >
【備忘録】pgAdmin4の「ユーティリティが存在しません」というエラーを解消

## 概要
pgAdmin4をWindows環境にインストールして操作していた際に発生した「ユーティリティが存在しません」というエラーを解消した。
設定項目を修正するだけだが、日本語記事はあまりなかったので備忘録を残す。

###  解決方法
pgAdmin4の[ファイル]>[設定]>[パス]>[バイナリパス]>[PostgreSQL バイナリパス]を`$DIR/../runtime`から`$DIR/../../bin`に変更する。

## 事象
Windows10にインストールしたpgAdmin4でデータベースのメンテナンス機能を立ち上げようとしたところ、「ユーティリティが存在しません」というエラーが発生した。
※私の環境ではPostgreSQLをDドライブにインストールしているため、`D:\DataBase`は適宜読み替えてください。デフォルト設定でインストールした場合、`C:\Program Files`と読み替えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/1e0399bf-f1bb-736e-818b-6546049e4f89.png)

## 対応
エラー文に書いてあるとおりだが、必要なバイナリへのパスが間違っているようなので、修正する。

まず、呼び出そうとしていた`D:\DataBase\PostgreSQL\11\pgAdmin 4\runtime\psql.exe`を確認しようとしたが、`runtime`フォルダ以下が存在していなかった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/0d104b0d-ed9d-6cf8-06c3-d3ec736540ff.png)

`psql.exe`を探したところ、`D:\DataBase\PostgreSQL\11\bin`配下に存在することを確認した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/fa5e2573-9e27-0bf3-6bd1-266c91f90252.png)

pgAdmin4に戻り、設定を修正する。
[ファイル]>[設定]を選択して設定ダイアログを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/d1816d40-0e46-b4f9-777e-874d7015797f.png)

設定ダイアログのナビゲーションから[パス]>[バイナリパス]を選択し、[PostgreSQL バイナリパス]を確認したところ`$DIR/../runtime`となっており、pgAdmin4のインストールされている`D:\DataBase\PostgreSQL\11\pgAdmin 4\bin`からの相対パスで`runtime`フォルダが指定されていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/1e22933b-b34c-2e51-1cec-fbf2bd06eaf1.png)

相対パスで`D:\DataBase\PostgreSQL\11\bin`配下を参照するように、`$DIR/../runtime`を`$DIR/../../bin`に変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/ba774add-8a73-f385-e64e-5fad002af8cd.png)

[保存]をクリックして設定ダイヤログを閉じ、再度メンテナンスを立ち上げると起動した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208441/56d18109-8a05-8c50-75de-369dd10ba8e4.png)

## 疑問
インストーラでPostgreSQL本体と同時にインストールしたのだが、初期設定で存在しないフォルダが指定されているのは何故なんだ……。

以上。
ASK CLI 環境構築

#　ゴール
- ASK CLIのインストール
- ASK CLIでプロジェクト作る
- デプロイしてEcho Show 実機に反映

# 対象
[スキル開発 基礎トレーニングシリーズ](https://developer.amazon.com/ja-JP/alexa/alexa-skills-kit/get-deeper/tutorials-code-samples/build-a-skill)を一通りやっていること。
nodeインストール済み

コンソールでやって慣れたので、そろそろCLIでやろうかなって人

# 環境
mac
ask version 2.22.4
node 14.15.1
Echo Show 5 実機



# インストール

[クイックスタート： Alexa Skills Kitコマンドラインインターフェース（ASK CLI）スタート](https://developer.amazon.com/ja-JP/docs/alexa/smapi/quick-start-alexa-skills-kit-command-line-interface.html)
に沿って行う

```
$ npm install -g ask-cli
$ ask --version
2.22.4
```

```
$ ask configure
------------------------- Configuration Complete -------------------------
Here is the summary for the profile setup:
...
```

.ask/cli_config
っていうファイルができる

# プロジェクト作成
[ask new](https://developer.amazon.com/ja-JP/docs/alexa/smapi/ask-cli-command-reference.html#new-command)を使用

```
$ ask new
プロジェクト作成
? Choose the programming language you will use to code your skill:  NodeJS
? Choose a method to host your skill's backend resources:  Alexa-hosted skills
  Host your skill code by Alexa (free).
? Choose the default region for your skill:  us-east-1
? Please type in your skill name:  Hello World Skill
? Please type in your folder name for the skill project (alphanumeric):  HelloWo
rldSkill
```

作ったら言語が英語になった。最初から日本語で作りたいが、そのやり方がわからない。
とりあえず後からlocalesを変えている
https://qiita.com/makishy/items/52bd191e288c6b9dbe2f

# 作業ブランチ、デプロイ


![スクリーンショット 2021-07-17 11.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/54a226ff-7fda-78e7-7731-50847dabac50.png)

最初から3つのリモートブランチができている。

|ブランチ名|概要|
|:--|:--|
|dev|Alexa Consoleで見てる環境。**masterにプッシュすると自動的に更新される**|
|master|stg環境。開発中はここにプッシュする。gitflowでいうところのdevelop|
|prod|本番反映用|

基本的に作業するブランチはmaster。

反映、テストの流れ
1. masterで作業して、masterにプッシュ
2. 自動ビルドされて、devに反映されるのを待つ。(console側でみるのが早い)
3. consoleのテスト画面を使用
GitHub PagesにSubmoduleを使う時の注意点

以下の2つの制約を守る必要があります。

- httpsで使用されていること
- submoduleがパブリックリポジトリであること

## GitHub Pagesのデプロイに失敗してしまった時

制約を守れなかった場合は、以下のような警告文が表示されます。(`discogs-python-api`というsubmoduleを、SSHで使用してしまいました)

![github-pages-build-error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251749/fe07fb8a-ec57-3f33-c6e0-34c0d9a128ba.png)

この状態になると、GitHub Pagesのデプロイに失敗しているので、サイトも404になってしまいます。

また、警告にあるリンクを辿るとSubmoduleを削除する手順が記載されています。
[GitHub Pages サイトの Jekyll ビルドエラーに関するトラブルシューティング - GitHub Docs](https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/troubleshooting-jekyll-build-errors-for-github-pages-sites#invalid-submodule)

```bash
git submodule deinit PATH-TO-SUBMODULE
git rm PATH-TO-SUBMODULE
git commit -m "Remove submodule"
rm -rf .git/modules/PATH-TO-SUBMODULE
```

GitHub Pagesをデプロイするリポジトリにsubmoduleを使う場合、
制約を守って使うか、守れない場合はsubmoduleを使わないで管理する必要があります。

## Reference

https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/troubleshooting-jekyll-build-errors-for-github-pages-sites
safari アンカーリンク付きページ遷移時 offsetTopを0で返してくれない

この書き方で検証

```js
$(function () {
   $(window).on('load', function() {
    console.log($('body,html').offset().top);
} 
```

Chromeの場合
この様なurlでページ遷移した時、コンソールログは「0」
https://qiita.com/drafts/edit#qiita

Safariの場合
この様なurlでページ遷移した時、コンソールログは「-1111」
アンカーリンクのある場所からの数値
https://qiita.com/drafts/edit#qiita

つまり
Chromeはページ遷移時、アンカーリンクのある場所の値を返さない。
Safariはページ遷移時、アンカーリンクのある場所の値を返す。
【React】タブの名前を変える方法

<h2>タブの名前を変えたい</h2>
Reactをセットアップした後に、タブの名前が初期のままだと「React APP」になっているかと思います。
せっかくアプリを作ってもタブの名前がアプリ名でないともったいないです。

今回はタブの名前の変更方法について紹介します

<h2>実装方法</h2>
public以下にあるindexファイルのタイトルタグの個所を変えればOKです。
初期値の「React APP」を任意の名前に変えたら、タブの名前が変わります。

```index.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>HOGE APP</title><!--ここを変える-->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```
AtCoderログ：0020 - ABC 068 B

# 問題
https://atcoder.jp/contests/abc068/tasks/abc068_b

## 問題文
> 高橋君は $2$ で割れる数が好きです。
> 正整数 $N$ が与えられるので、$1$ 以上 $N$ 以下の整数のうち、最も $2$ で割れる回数が多いものを求めてください。答えは必ず $1$ つに定まります。
> なお、$2$ で割っていき、何回あまりが出ずに割れるかを、$2$ で割れる回数と呼ぶことにします。
> 例えば
> ・$6$ ならば、$6$ -> $3$ で、$1$ 回 $2$ で割れます。
> ・$8$ ならば、$8$ -> $4$ -> $2$ -> $1$ で、$3$ 回 $2$ で割れます。
> ・$3$ ならば、$0$ 回 $2$ で割れます。

## 制約
> ・$1 \le N \le 100$

## 収録されている問題セット
- [AtCoder に登録したら次にやること](https://qiita.com/drken/items/fd4e5e3630d0f5859067#%E7%AC%AC-3-%E5%95%8F--abc-081-b---shift-only-200-%E7%82%B9) [[第03問類題]](https://qiita.com/drken/items/fd4e5e3630d0f5859067#%E7%AC%AC-3-%E5%95%8F--abc-081-b---shift-only-200-%E7%82%B9)

- [[BfB-E]\(AtCoder Problems Boot camp for beginners Easy 100\)](https://kenkoooo.com/atcoder/#/training/Boot%20camp%20for%20Beginners/1) #011 

# 回答1 (AC)
整数 $n$ を受け取った後、変数 $i$ を $1$ から $n$ まで変化させ、$i$ が $2$ で割り切れる回数 division を求める、最終的にその最大値を出力するようにしました。$2$ で割り切れる回数の最大値 dmax とそれを実現する整数値を imax に保持しています。コードは以下のようになりました。

```C++:abc068b-1.cpp
#include <bits/stdc++.h>
using namespace std;
 
int main() {
  int n;
  cin >> n;

  int dmax = -1, imax = 1;
  for ( int i=1; i<=n; i++ ) {
    int m = i, division = 0;
    while ( m%2==0 ) {
      division += 1;
      m        /= 2;
    }
    if ( division>dmax ) {
      dmax = division;
      imax = i;
    }
  }

  cout << imax << endl;
}
```

# 回答2 (AC)
$2$ で割り切れる回数が $0$ 回の整数は奇数です。$2$ で割り切れる回数がちょうど $1$ 回である整数は、$2$ で割り切れるが $4~(=2^2)$ では割り切れない整数です。$2$ で割り切れる回数がちょうど $2$ 回である整数は、$4~(=2^2)$ で割り切れるが、$8~(=2^3)$ では割り切れない整数です。
この問題で与えられる整数 $N$ に対し、$2^m \le N < 2^{m+1}$ となる $m$ が見つかったとすると、$1$ 以上 $N$ 以下の整数のうち $2$ で割り切れる回数が最も多い整数は $2^m$ となります。つまりこの問題は、上記のような整数 $m$ を求めれば良いことがわかります。ここで $m$ は $m=\lfloor \log_2{N} \rfloor$ と表せるので、コードは以下のようになりました。

```C++:abc068b-2.cpp
#include <bits/stdc++.h>
using namespace std;
 
int main() {
  int n;
  cin >> n;

  cout << pow(2,floor(log2(n))) << endl;
}
```

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/abc068/tasks/abc068_b/editorial) → [ユーザの解説](https://blog.hamayanhamayan.com/entry/2017/07/30/025435)
回答1と同じ方針でした。

## [AtCoder の解説](https://atcoder.jp/contests/abc068/tasks/abc068_b/editorial) → [コンテスト全体の解説](https://img.atcoder.jp/abc068/editorial.pdf)
回答2と同じ方針でした。

# 学んだこと
- C++の標準ライブラリ (log2, floor, pow)

# リンク
- 前の記事 → [AtCoderログ：0019 - ABC 082 B](https://qiita.com/RoadLynton/items/bbcae9be35cbd142d087)
- 次の記事 → [AtCoderログ：0021 - ABC 210 に参加しました](https://qiita.com/RoadLynton/items/40418cb138f03b3c0bc7)
2.10(標準) 積率母関数，変数変換 2(1.方針で積率母関数を解説)

## 1.方針

確率変数Xの積率母関数とは，

```math
M_X(t)=\mathbb{E}_{X\sim f_X}[e^{tX}]
```

というtについての関数である．これを微分し，t=0を代入したものはXの期待値である．

```math
\begin{align}
\left.\frac{d}{dt}M_X(t)\right|_{t=0}&= \left.\frac{d}{dt}\mathbb{E}_{X\sim f_X}[e^{tX}]\right|_{t=0}\\
&= \left.\frac{d}{dt}\int e^{tx}f_X(x)dx\right|_{t=0}\\
&= \left.\int e^{tx} xf_X(x)dx\right|_{t=0}\\
&= \int xf_X(x)dx\\
&= \mathbb{E}_{X\sim f_X}[X]
\end{align}
```

同様に，これをk階微分し，t=0を代入したものはXのk階モーメントである．

```math
\begin{align}
\left.\frac{d^k}{dt^k}M_X(t)\right|_{t=0}&= \left.\frac{d^k}{dt^k}\mathbb{E}_{X\sim f_X}[e^{tX}]\right|_{t=0}\\
&= \left.\frac{d^k}{dt^k}\int e^{tx}f_X(x)dx\right|_{t=0}\\
&= \left.\int e^{tx} x^kf_X(x)dx\right|_{t=0}\\
&= \int x^kf_X(x)dx\\
&= \mathbb{E}_{X\sim f_X}[X^k]
\end{align}
```

## 1.答案

```math
\begin{align}
M_X(t)&= \int_0^\infty e^{tx}e^{-x}dx\\
&= \int_0^\infty e^{x(t-1)}dx\\
&= \left[\frac{1}{t-1}e^{x(t-1)}\right]_0^\infty\\
&= \frac{1}{1-t}
\end{align}
```

## 2.方針

1で求めた積率母関数をk階微分することでk次モーメントを求める．答案では1~4階微分まで求めることで法則性を見つけている．

## 2.答案

```math
\begin{align}
\frac{d}{dt}M_X(t)&= \frac{1}{(1-t)^2}\\
\frac{d^2}{dt^2}M_X(t)&= \frac{2(1-t)}{(1-t)^4}=\frac{2}{(1-t)^3}\\
\frac{d^3}{dt^3}M_X(t)&= \frac{3(1-t)^2\times 2}{(1-t)^6}=\frac{3!}{(1-t)^4}\\
\frac{d^4}{dt^4}M_X(t)&= \frac{4(1-t)^3\times 3!}{(1-t)^8}=\frac{4!}{(1-t)^5}\\
&\vdots\\
\frac{d^k}{dt^k}M_X(t)&= \frac{k(1-t)^{k+1}(k-1)!}{(1-t)^{2(k+1)}}=\frac{k!}{(1-t)^{k+1}}\\
\therefore\mathbb{E}_{X\sim f_X}[X^k]&= \left.\frac{d^k}{dt^k}M_X(t)\right|_{t=0}=k!
\end{align}
```

## 3.方針

変数変換の際はまず分布関数から考える．分布関数ができたらそれを微分することで確率密度関数を求める．

## 3.答案

Yの分布関数は，

```math
\begin{align}
F_Y(y)&= P[Y\leq y]\\
&= P[\sigma X+\mu\leq y]\\
&= P[X\leq \frac{y-\mu}{\sigma}]\ \ (\because\sigma>0)\\
&= \int_0^{\frac{y-\mu}{\sigma}}e^{-x}dx\\
&= \left[-e^{-x} \right]_0^{\frac{y-\mu}{\sigma}}\\
&= -e^{-\frac{y-\mu}{\sigma}}+1\ \ (\mu<y)
\end{align}
```

なので，Yの確率密度関数は

```math
f_Y(y)=\frac{d}{dy}F_Y(y)=\frac{1}{\sigma}\exp(-\frac{y-\mu}{\sigma})\ \  \ (\mu<y)
```

## 参考文献

- 『[現代数理統計学の基礎](https://www.kyoritsu-pub.co.jp/bookdetail/9784320111660)』(久保川達也　著)
PHPバージョンを切り替える

phpのバージョンを更新したくて、homebrewでphpをインストールして、今まで使っていた7.3から8に切り替える。

シンボリックリンクの張り替え
※ここら辺は色々やったのでどのコマンドで反映されたかわからない

```bash
$ brew unlink php@7.3 && brew link --force php
$ brew unlink php && brew link php
```

.bash_profileからphp@7.3のパスを削除(コメントアウト)

```bash
# export PATH="/usr/local/opt/php@7.3/bin:$PATH"
# export PATH="/usr/local/opt/php@7.3/sbin:$PATH"
```

.bash_profileを反映

```bash
$ source ~/.bash_profile
```

まだパスにphp@7.3が残っているので、最終的に使ってるターミナル（iterm）を再起動する。

```bash
$ php -v
PHP 8.0.0 (cli) (built: Nov 30 2020 13:43:08) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.0-dev, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.0, Copyright (c), by Zend Technologies
```

無事にphp 8.0が使えるようになった。

参考：

- https://dev.to/mmp4k/php-8-on-macos-installation-guide-11ca
PHPのmemory_limitのデフォルト値を変更する

次のようなメモリ制限のエラーが出た時の対処法。デフォルトでは128Mになっているので、-1(上限なし)に変更する。

```terminal
PHP Fatal error:  Allowed memory size of 2097152 bytes exhausted (tried to allocate 4096 bytes)
```

現在のメモリ上限を確認する。

```terminal
$ php -r "echo ini_get('memory_limit').PHP_EOL;"

128M
```

php.iniファイルの場所を確認する。

```terminal
$ php --ini
Configuration File (php.ini) Path: /usr/local/etc/php/7.3
Loaded Configuration File:         /usr/local/etc/php/7.3/php.ini
Scan for additional .ini files in: /usr/local/etc/php/7.3/conf.d
Additional .ini files parsed:      /usr/local/etc/php/7.3/conf.d/ext-opcache.ini
```

/usr/local/etc/php/7.3/php.ini ファイルの `memory_limit` の値を書き換える。

```scheme
; Maximum amount of memory a script may consume (128MB)
; http://php.net/memory-limit
memory_limit = -1             ; この行を128から-1に書き換える
```

メモリ上限を確認して、変更が反映されていたらOK。

```bash
$ php -r "echo ini_get('memory_limit').PHP_EOL;"

-1
```

参考資料:
[https://getcomposer.org/doc/articles/troubleshooting.md#memory-limit-errors](https://getcomposer.org/doc/articles/troubleshooting.md#memory-limit-errors)
Laravelのプロジェクト作成手順

作る際に調べてしまうので備忘録としてまとめます。

#手順
以下のいずれかのコマンドを実行する。

```
laravel new [project]
```
```
composer create-project --prefer-dist laravel/laravel [Project]
```
こうなればOK
![スクリーンショット (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/982909/0d3363ab-fd89-761a-f330-5bbaf6f228cf.png)

##ユーザー認証機能を追加したい場合は以下を実行。
laravel/uiをインストールする。
```
composer require laravel/ui
```
Auth関連ファイルを生成する。
```
php artisan ui vue --auth
```
フロントエンド側のモジュールを組み込む。
```
npm install && npm run dev
```
こうなればOK
![スクリーンショット (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/982909/b7d44455-abd6-be71-6e73-bc253786b6e0.png)
DrushコマンドでDrupalをインストールして起動する

## ComposerでDrupalをダウンロード

composerでdrupalプロジェクトを作成し、プロジェクトルートに移動します。

```terminal
$ composer create-project drupal/recommended-project drupal-demo
$ cd drupal-demo
```

デフォルトではDrushは入っていないので、別途composerでダウンロードします。

```terminal
$ composer require drush/drush
```


## インストール

DrushでDrupalのインストールを行います。

例では  `$ ./vendor/bin/drush` で作成したDrupalプロジェクトのDrushを指定していますが、Drush Launcherをインストールしている方は `$ drush` コマンドで実行できます。

```terminal
$ ./vendor/bin/drush site:install standard --db-url=sqlite://sites/default/files/.ht.sqlite

...省略...
[notice] Performed install task: install_finished
[success] Installation complete.  User name: admin  User password: R75E6JeDfJ
```

コマンドの第一引数でインストールプロファイルを指定しています。デフォルト値は `standard` です。初期インストールでは、データベースURLを指定するための `--db-url` オプションが必須です。今回はSQLiteを使用します。

ユーザー名とパスワードは入力がなければDrush側で自動的に発行して、標準出力してくれます。

## 起動

ポート番号を指定してWebサーバーを立ち上げます。下のコマンドでは、8080ポートで起動する例です。

```terminal
$ ./vendor/bin/drush runserver 8080
```
Powershellでの日付け取得、ファイル出力

基本的なPowershellのコーディング


```Powershell
$date = Get-Date -Format "yyyyMMddHHmmss"
$script_file="c:\work\20210711\log\test2$date.log"
$result_file="C:\work\20210711\resulttest2$date.txt"
function START_DISP{
    echo "START" >> $script_file 2>&1
}
function END_DISP{
    echo "END" >> $script_file 2>&1
}
START_DISP
Get-command | Out-File $result_file -Append
if ($? -eq "True" ){
    Write-Output "OK" >> $script_file 2>&1
} else {
    Write-Output "NG" >> $script_file  2>&1
} 
$result = Test-Path $result_file
if ($result -eq "True"){
    Write-Output "ファイル取得に成功" >> $script_file
} else {
    Write-Output "ファイル取得に失敗" >> $script_file
}
```
ざっくりのWEBの知識メモ

ざっくりとWEBの知識を書いて行きます・

1. hrefでパスは指定するときは**絶対パス**を使うべき！！<br>
>>URLはサーバーにあげたときにドメイン、ポートが変わる、外部サイトへのアクセスには使える<br>
>>相対パスはhtmlファイルの場所変更に対応できない<br>
bash + git環境でプロンプトにブランチ名と作業ツリーの状態を表示させて快適な開発環境を作る

## tl;dr

bash + git環境で開発中にいまのブランチがわからなくなって、いちいち`git status`をたたいて状態確認するのがめんどうでたまらない人向けに、プロンプトにgitのブランチ名と作業ツリーの状態を表示させる方法をまとめます。

## 用意するもの・動作確認環境

bashならどんな環境でも動くはずですが、わたしの環境は下記の通り。

- Windows 10 Pro
- WSL2 (Windows Subsystem for Linux 2)
- Ubuntu 20.04.2 LTS

[WSL2の公式ドキュメントはこちら](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)

## 結論

.bashrcに下記のように記述する。

``` bash
# for prompt
source ~/.git-completion.bash
source ~/.git-prompt.sh

GIT_PS1_SHOWDIRTYSTATE=true
GIT_PS1_SHOWUNTRACKEDFILES=true
GIT_PS1_SHOWSTASHSTATE=true
GIT_PS1_SHOWUPSTREAM=auto

PS1="\[\e[1;32m\]\u@\h\[\e[m\]:\[\e[1;34m\]\W\[\e[m\]\[\e[33m\]\$(__git_ps1)\[\e[m\]\$ "
```

プロンプトが下記のようになる。

```bash
user_name@machine_name:directory(branch_name branch_status)$
```

実際は色が付くのでこんな感じになる。
![2021-07-17_09h45_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389719/f5edfdf4-bfa0-82ae-a081-ab9c99df9e3b.png)

## 導入方法

`git-completion.bash`、`git-prompt.sh`を取得して、.bashrcを編集するだけでok。

```bash
$ wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -O ~/.git-completion.bash
$ wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh -O ~/.git-prompt.sh
```

## 取得するシェルスクリプト

### git-completion.bashとは
gitコマンドの補完スクリプト。

### git-prompt.shとは
プロンプトに各種追加情報を表示可能にするスクリプト

## 設定値の解説

### 環境変数

| 設定値 | 意味 |
|:-----------|:------------|
| GIT_PS1_SHOWDIRTYSTATE=true | addされていない変更の存在を「*」で示す <br> commitされていない変更の存在を「+」で示す |
| GIT_PS1_SHOWUNTRACKEDFILES=true | addされていない新規ファイルの存在を「%」で示す |
| GIT_PS1_SHOWSTASHSTATE=true | stashがある場合は「$」で示す |
| GIT_PS1_SHOWUPSTREAM=auto | upstreamと同期している場合は「=」で示す <br> upstreamより進んでいる場合は「>」で示す <br> upstreamより遅れている場合は「<」で示す |

### PS1

| 設定値 | 意味 |
|:-----------|:------------|
| \u | ユーザ名 |
| \h | ホスト名 |
| \W | カレントディレクトリ |
| \w | カレントディレクトリのパス |
| \n | 改行 |
| \d | 日付 |
| \\[ | 表示させない文字列の開始 |
| \\] | 表示させない文字列の終了 |
| \\$ | $ |
| 1;32などの数字 | 表示色指定 |

わたしのPS1は一例です。
他にもいろいろ設定できるので、ご自分の好みの設定をみつけてください。

## 参考URL

https://qiita.com/amidaku/items/841d62335a03792424d5

https://qiita.com/varmil/items/9b0aeafa85975474e9b6

https://tm.root-n.com/unix:command:git:bash_prompt

http://d.hatena.ne.jp/gnarl/20110901/1314846241
CakePHP4で.envが反映されないときの対処

# やりたいこと

* CakePHP4で.envに設定した値をControllerで読み込んで使いたい。


# 問題点

* .env に設定した値をController側で取得できない。

# 前提

* .env への設定やController側での読み込み処理は正しく実装されている。

# 原因

config/bootstrap.php
に下記の記述がある。デフォルトでコメントアウトされている。
このコメントアウトを外して有効にしないと、.envが反映されない。


```php
 if (!env('APP_NAME') && file_exists(CONFIG . '.env')) {
     $dotenv = new \josegonzalez\Dotenv\Loader([CONFIG . '.env']);
     $dotenv->parse()
         ->putenv()
         ->toEnv()
         ->toServer();
 }
```
【Unity】Unity純正でiOS ATT許可ダイアログを出す

元ネタはここです。
>[App Tracking Transparency in Unity (IDFA Popup)](https://alanyeats.com/post/unityapptrackingtransparencypopup/)

#パッケージをインストール
Package ManagerのUnity RegistryからiOS 14 Advertising Supportをインストールします。
![スクリーンショット 2021-07-17 8.51.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1772485/0778c50f-abba-f923-a74d-deb3e4fee1a6.png)
このパッケージは以前はプレビュー版でしたが現在（Unity 2021.1.15f1）はPackage Managerに出てきます。
将来はUnity本体に内蔵されると思われます。

#コード

```c#
#if UNITY_IOS

using Unity.Advertisement.IosSupport;

#endif

#if UNITY_IOS

    if(ATTrackingStatusBinding.GetAuthorizationTrackingStatus() == 
    ATTrackingStatusBinding.AuthorizationTrackingStatus.NOT_DETERMINED)
    {
        ATTrackingStatusBinding.RequestAuthorizationTracking();
    }

#endif
```

#NSUserTrackingUsageDescriptionをInfo.plistに追加する
これも将来はUnityに内蔵されると思いますが、現在はないのでEditorフォルダにビルドの後処理を書きます。

```c#
using UnityEditor;
using UnityEditor.Callbacks;
#if UNITY_IOS
using UnityEditor.iOS.Xcode;
#endif
using System.IO;

public class PostBuildProcessing : IPostprocessBuildWithReport
{
    //  実行順
    int IOrderedCallback.callbackOrder => 100;

    // ビルド後処理
    public void OnPostprocessBuild(BuildReport report)
    {
#if UNITY_IOS

        PlistDocument plistObj = new PlistDocument();
        string projectPlistPath = report.summary.outputPath + "/Info.plist";
        plistObj.ReadFromString(File.ReadAllText(projectPlistPath));
        PlistElementDict plistRoot = plistObj.root;

        plistRoot.SetString("NSUserTrackingUsageDescription", "This identifier will be used to deliver personalized ads to you.");
        File.WriteAllText(projectPlistPath, plistObj.WriteToString());

#endif
}
```
## 追記
NSUserTrackingUsageDescription は Localization を使えばいいそうです。
>[アプリ名(Display Name)やiOSの広告トラッキング許諾文言(NSUserTrackingUsageDescription)をLocalizationで簡単ローカライズ(多言語対応)　【Unity】【Localization】【iOS】【Android】](https://kan-kikuchi.hatenablog.com/entry/Localization_AppName_Tracking?utm_source=feed)
2.9(易) 変数変換

## 方針

問9以降変数変換するような問題が続くが，確率変数の扱いと定数の扱いをしっかりする必要がある．例えば，今回の

```math
Y=\sigma X+\mu
```

という変数変換だが，

```math
P[Y\leq y_\alpha]=P[Y\leq \sigma x_\alpha+\mu]
```

という式変形はしても意味がない(定数の表記を変えてるだけ)．「確率変数Yがある定数y_alpha以下であるような確率は，確率変数Xが何以下である確率と等しいのか？」を知りたいので，

```math
P[Y\leq y_\alpha]=P[\sigma X+\mu\leq y_\alpha]
```

として考えるのが良い．

## 答案

確率変数Yの上側alpha分位点をy_alphaとおくと，定義より

```math
P[Y\leq y_\alpha]=1-\alpha
```

である．今，

```math
Y=\sigma X+\mu,\ \sigma>0
```

を用いて

```math
\begin{align}
P[Y\leq y_\alpha]&= P[\sigma X+\mu\leq y_\alpha]\\
&= P[X\leq\frac{y_\alpha-\mu}{\sigma}]=1-\alpha
\end{align}
```

従って，

```math
\frac{y_\alpha-\mu}{\sigma}=x_\alpha\ \Rightarrow\ y_\alpha=\sigma x_\alpha+\mu
```

## 参考文献

- 『[現代数理統計学の基礎](https://www.kyoritsu-pub.co.jp/bookdetail/9784320111660)』(久保川達也　著)