OmniAICreator/Qiita-1.07M huggingface dataset:
Mac環境設定メモ

MacOS Catalina 10.15.5 USキーボードをセットアップしたときの極めて個人的なメモです。

2021-11-18 追記:
MacOS Monterey 12.0.1 Macbook Pro(14インチ、2021) M1 Pro セットアップ時のメモ追記

## PCのパスワード設定

- システム環境設定 > セキュリティとプライバシー > 「一般」タブ > 「パスワードを変更」

## Touch ID登録（指紋認証）

- システム環境設定 > Touch ID > 「一般」タブ > 「パスワードを変更」
- 指紋を追加
- 「Touch IDを使用」の全項目にチェックついていることを確認

## caps lockをcontrolキーにする

- システム環境設定 > キーボード > 「キーボード」タブ > 右下の「修飾キー」ボタン
- Caps Lockキーを「Control」に変更

## トラックパッドでカーソルを早く移動できるようにする

- システム環境設定 > トラックパッド > 「ポイントとクリック」タブ
- 「軌跡の速さ」を一番右の「速い」へ

## 日本語キーボード設定

- システム環境設定 > キーボード > 「入力ソース」タブ
- 左下の+から「日本語」を追加
- 入力モード
    - ひらがな、英字のみチェック
- ライブ変換チェック外す
- タイプミスを修正チェック外す
- Windows風のキー操作チェック
- 推測候補表示チェック外す
- "¥"キーで入力する文字を `\（バックスラッシュ）` へ変更
- 「US」を消す

## キーのリピート調整

- システム環境設定 > キーボード > 「キーボード」タブ
- 「キーのリピート」を一番右の「速い」へ
- 「リピート入力認識までの時間」を一番右の「短い」へ
 
## Cmd + スペースで日本語入力へ切り替えできるようにする

- システム環境設定 > キーボード > 「ショートカット」タブ
- 左メニューから「入力ソース」を選択
- 右の「前の入力ソースを選択」のデフォルトでは「^スペース」ってなってる部分をクリック
- 選択状態になるので、Cmd + スペースを入力
- 「ほかのアクションで使用済みのショートカット」って警告が出る
    - Spotlight のショートカットを option + スペースに変更して無効化しとく（あとでAlfredに割り当てるので）

## ユーザ辞書登録

- システム環境設定 > キーボード > 「ユーザ辞書」タブ
- あどれす → example@example.com みたいなのを登録してます

## メニューバーに音量表示

- システム環境設定 > サウンド > 「サウンドエフェクト」タブ
- 「メニューバーサウンドを表示」にチェックつける
- 右のプルダウンを「常に」へ変更

## 起動音とサウンドエフェクトを消す

- システム環境設定 > サウンド > 「サウンドエフェクト」タブ
- 「起動時にサウンドを再生」のチェックを外す
- 「ユーザインターフェイスのサウンドエフェクトを再生」のチェックを外す

## メニューバーにバッテリー残%表示

- ※ Big Sur で変わりました

- システム環境設定 > Dockとメニューバー > サイドバーの「バッテリー」
- 「メニューバーに表示」と「割合（%）を表示」にチェックをつける

<details>
<summary>Catalinaの場合はこちら</summary>
- システム環境設定 > 省エネルギー > 「バッテリー」タブ
- 「メニューバーにバッテリーの状況を表示」にチェックつける（デフォルトでついてるかも）
- メニューバーのバッテリーアイコンクリック＞「割合（％）を表示」にチェックつける

</details>

## メニューバーに日付表示

※Monterey　からデフォルト表示

- システム環境設定 > Dockとメニューバー > サイドバーの「時計」
- 日付のオプション: 「日付を表示」にチェックつける

## Siri無効化

- システム環境設定 > Siri
- 左の「Siriに頼むを有効化する」のチェックを外す
- 「メニューバーにSiriを表示」のチェックを外す

## Touch BarからSiriを消す

- システム環境設定 > キーボード > 「キーボード」タブ
- 「Control Stripをカスタマイズ」ボタン
- マウスカーソルをTouch Barに持っていき、Siriのアイコンをディスプレイ上にドラッグ＆ドロップで「Touch Barから削除」

## ssh key作成してGitHubへアップロード

- 以下コマンドでssh key作成
  - 参考： https://qiita.com/suthio/items/2760e4cff0e185fe2db9

```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

- ssh keyをクリップボードにコピー

```
pbcopy < ~/.ssh/id_rsa.pub
```

- 気合でGitHubログイン
    - 1PasswordやBitwardenへのログインはよしなに。。
- https://github.com/settings/ssh/new へアクセス
    - Title: 何用の鍵なのか判別できるような情報を適当に入力
    - Key: さっきコピーした鍵をコピペ
- Add SSH Key押して完了

## dotfilesとアプリ一式インストール
- ターミナルを開く
- 以下コマンド実行

```
bash -c "$(curl -fsSL https://raw.githubusercontent.com/mishiwata1015/dotfiles/master/etc/install)"
```

- 完了までひたすら待つ・・・
- brew対応してないアプリは手動でインストール


## アプリセットアップ

- ひたすら、起動、必要な権限許可、ログイン・・
- Chromeをデフォルトブラウザにする


## 完了

これ全部自動化できるんだろうか :thinking:
Amazon Transcribeを使って音声ファイルを文字越しする

Amazon Transcribeが日本語に対応していたので使ってみたかった。
Terraformスクリプト全体は[こちら](https://github.com/nittyan/transcribe)にあります。

# 全体概要
音声ファイルをS3のバケットにアップロードすることをトリガーにして、S3がLambdaを実行し、LambdaはS3にアップロードされたファイル名をキーにしてTranscribeを呼び出す。

![Google.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65020/364e3a58-febe-0578-acb0-2c0e3529b46f.png)

# Terraformのディレクトリ構成
以下のようにディレクトリをきっている。
terraformのディレクトリの切り方はいっつも迷う・・・・

```
root
  ┣ iam      # 権限まわり
  ┣ lambda   
  ┗ s3
  main.tf
  variable.tf # これは各自作る
```

# 注意どころ
何も考えないでterraformを記述していくと、以下のエラーが出る。

```
[ERROR] BadRequestException: An error occurred (BadRequestException) when calling the StartTranscriptionJob operation: The S3 URI that you provided can't be accessed. Make sure that you have read permission and try your request again.
```
TranscribeがS3へアクセスできないということは分かったが、解決するのにてこずった。
一連の流れのトリガーとなるS3へS3へのアクセス権を与えるという、卵と鶏のような権限をアタッチする必要がある。


```tf:lambda/role.tf
resource "aws_iam_role_policy_attachment" "transcribe_access_s3_policy_attachment" {
  policy_arn = aws_iam_policy.transcribe_access_s3_policy.arn
  role = aws_iam_role.execute_transcribe_role.name
}
```
Javascriptでモーダルウィンドウを生成する

JavaScriptを使ったモーダルウィンドウについての解説です。
実装例として、ボタンをクリックすることでモーダルウィンドウを呼び出す処理のサンプルを記載します。

## HTML
ボタンをひとつ用意します。
要素を取得する為、`id="modal-btn"`とします。

```html
<button id="modal-btn">ボタン</button>
```

## CSS
生成するモーダルに付与するCSSを設定します。
中央配置にする為に`left: 50%`、`top: 50%`、`transform: translate(-50%, -50%)`を設定しています。

```css
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.inner {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: solid 3px #dfe4ea;
  border-radius: 10px;
}
```
## Javascript
はじめに作成したHTMLのボタンをクリックした時の処理を記述します。
クリックを起点としたイベントを設定し、`showModal`メソッドを発火させます。

```javascript
document.getElementById('modal-btn').addEventListener('click', showModal);
```
`showModal`メソッドの詳細を記述します。

```javascript
function showModal() {
    // モーダルウィンドウと中身の要素を生成・クラスを付与
    const modalElement = document.createElement('div');
    modalElement.classList.add('modal');
    const innerElement = document.createElement('div');
    innerElement.classList.add('inner');

　　 // モーダルウィンドウに表示する要素を記述
    innerElement.innerHTML = `
        <p>モーダルウィンドウ</p>
    `;

    // モーダルウィンドウに中身を配置
    modalElement.appendChild(innerElement);
    document.body.appendChild(modalElement);

    // 中身をクリックしたらモーダルウィンドウを閉じる
    innerElement.addEventListener('click', () => {
        closeModal(modalElement);
    });
}
```

モーダルを閉じる処理を用意します。

```javascript
function closeModal(modalElement) {
    document.body.removeChild(modalElement);
}
```

これでシンプルなモーダルウィンドウが完成しました。

## モーダルウィンドウの使いどころ
モーダルウィンドウは、Webサイトの様々な箇所で使われています。
画面を覆うように表示されるため、ユーザーへの警告や確認の為に使われることが多い機能です。

- ポップアップ広告
- 警告メッセージ
- エラーメッセージ
- ロード中

モーダルウィンドウを使ったポップアップ広告などはユーザーから嫌われる傾向にある為、使用には注意が必要です。
【JavaScript 】Node.jsとは

# はじめに
Node.jsとはサーバーサイドのjavascriptのプラットフォーム（実行環境）である。
javascriptは本来クライアントサイドで動作するプログラミング言語だが、Node.jsを使用することでサーバーサイドでもjavascriptが利用できるようになる。

公式サイト、またはOSのパッケージ管理ツールを使用してインストールすることでNode.jsが使用できる。
・[公式サイト](https://nodejs.org/ja/)
・[色々なパッケージ管理ツールでのインストール](https://nodejs.org/ja/download/package-manager/)

#### クライアントサイドとサーバーサイド

🌟　WEBページをブラウザで閲覧する場合の仕組み

```
1. ブラウザ（クライアント）でURLを指定、サーバーにリクエスト
2. リクエストを受けたサーバーはページを表示するために
   必要なhtmlやそれに関連するCSSやjavascriptをブラウザ（クライアント）に返す
3. クライアント側でそれらを受け取ることでWEBページが閲覧できるようになる
```

**クライアントサイド**
クライアントサイドの言語とは、クライアント（WEB上であればブラウザのこと）からサーバーにリクエストして得られた結果をブラウザで処理（表示）する際に使われる言語のこと。
javascriptがクライアントサイドの言語として挙げられる。

**サーバーサイド**
サーバーサイドの言語とは、クライアントに結果を渡すためにサーバー内で処理を行う言語のこと。
PHP、Ruby、Pythonなどの言語がサーバーサイドで使用される。

## npm
npmとはNode.jsのパッケージを管理するツールで、Node.jsをインストールすることで自動的に使えるようになる。
ここでいうパッケージとは、あらかじめ用意されているNode.jsの便利な機能をまとめたもののこと。
npmで様々なパッケージのインストールやアップデートをコマンドラインから行うことができる。
npmでインストールされたパッケージは```node_modules```ディレクトリにインストールされ、```package.json```ファイルで管理ができる。

### npmのインストールの種類
npmでパッケージをインストールするには```グローバルインストール```と```ローカルインストール```の2種類の方法がある。

**グローバルインストール**
npmをインストールした場所にパッケージがインストールされる。全てのプロジェクト（フォルダ）でインストールしたパッケージが使用できるようになる。

↓下記コマンドを打ち込むことでグローバルにインストール

```
npm install -g パッケージ名
```

**ローカルインストール**
任意のプロジェクト（フォルダ）内にだけパーケージをインストールする。インストールしたプロジェクト内でしかパッケージが使用できない。

↓下記コマンドを打ち込むことでローカルにインストール

```
npm install パッケージ名
```

### npm コマンド色々

```
npm install　は　npm i　と省略して記述することもできる

＊ 作成したものを動かすために必要なパッケージをインストール
（package.json の dependenciesに追加される）
npm i -S

＊ 開発に必要なパッケージをインストール
（package.json の devDependenciesに追加される）
npm i -D

＊ パッケージのインストールリスト
npm list

＊ パッケージをアンインストール
npm rm

＊ node_modulesフォルダを削除
rm -rf node_modules
```
VueでRailsのactive_storageに保存した画像を表示する

Railsアプリ内でVueを使用し、SPAを実装しました。
その中で、VueからRailsのactive_storageを使おうと思いましたがそれっぽい方法を見つけられず、自分でとりあえず実装してみたので残します。
プログラミング初心者かつVue自体も初めてなので間違いもだいぶあると思います。見つけたら指摘していただいたら嬉しいです。

version
Rails 6.0.3.2
ruby 2.6.3
@vue/cli 4.4.1

active_storageに保存するまでは
https://qiita.com/ozin/items/5ec81a4b126b8ebf7a96
この記事でやりました。

このあとvue側に表示するまでを書きます。Vueでは単一ファイルコンポーネントで実装しています。
ライブラリのインストール方法は省略します。

## モデル

```diary.rb
has_one_attached :image

# 省略
```

## コントローラ

```diaries_controller.rb
  def index
    diaries = Diary.all
    diaries_array = []
    diaries.each do |d|
      hash = d.attributes  # インスタンスをハッシュにする
      if d.image.attached?
        # imageのパスを取得
        image = Rails.application.routes.url_helpers.rails_blob_path(d.image)
        hash["image"] = image  # ハッシュに新しいkeyと値を追加
      else
        hash["image"] = ''
      end
      diaries_array << hash  # 配列にハッシュを要素として追加
    end
    render json: diaries_array
  end
```

## axiosでリクエストを送る

```diareis.vue
// 省略

<script>
  export default {
    data: function() {
      return {
        diaries: ''
      }
    },
    mounted() {
      let that = this;
      axios.get('/APIなどのパス/'）.then(function(response) {
        that.diaries = response.data;
      }
    }
  }
<script>
```

## バインドして表示

```diaries.vue
  <template>
    <div>
      <div v-for='diary in diaries' v-bind:key='diary.id' >
        <div v-if='diary.image'>
          <img v-bind:src="diary.image">
        </div>
      </div>
    </div>
  </template>
```

これで表示できました。
指摘などありましたらお願いします！
【rails6・RSpec】Rspecのテストのエラーの中にBlocked host~が含まれる際の解決法

テストが通らない。

##解決法
```config/application.rb```の中の```config.hosts << "hostname"```をコメントアウトする。

これでテストが通ります。


##【2020/7/4追記】
上記、コメントアウトするだけだとそのあとでまた戻したりする必要が出てくるようです。
したがってこの場合は```config.hosts << "hostname"```の記述を```config/application.rb```から```config/environments/development.rb```に移動させると良いです。
CodeIgniterのルーティング設定

#前提条件
ルートURLにアクセスすると
CodeIgniterのwelcomeページが表示される
(例)http://example.com/

<img width="1438" alt="スクリーンショット 2020-07-03 11.33.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557018/8f51b484-eb1b-230b-9407-fc6b3d1497d9.png">


#課題
application/config/routes.phpの設定で、

```php
$route['home']='home/index';
```
というルーティングを設定しても
/index.php/home
にアクセスしなければindexメソッドが実行されない

これを/homeで実行できるようにしたい。


#apacheのmod_rewriteモジュールを使う
mod_rewriteでは、アクセスURLを別のURLに変換してアクセスさせる

つまり、/exampleというアクセスを/index.php/exampleに変換してアクセスさせるように
設定すると上記の課題は解決できる。

流れとしては、mod_rewriteモジュールを有効にし、
.htaccessでmod_rewriteの設定をapacheの設定に加える

```shell
#apacheのmod_rewriteモジュールを読み込む
$ a2enmod rewrite
```

```shell
#apacheの設定にて、公開ディレクトリでの.htaccessを有効にする
$ vi /etc/apache2/apache2.conf
```
```shell:apache2.conf
#加える設定
<Directory /var/www/html/>
        Options Indexes FollowSymLinks
        #↓これ
        AllowOverride All
        Require all granted
</Directory>
```

その後公開ディレクトリ(/var/www/html)配下に、下記の内容の.htaccessを作成

```shell:.htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
```

設定が完了したら、apacheをリスタート

```shell
$ service apache2 restart
```

これでルーティングは正常に機能する。
【AWS】AWS SDK for PHPを使ってSESでメールを送信する

## はじめに
PHPでSESを使ってメールを送信したいが、ちょっとAWSの認証まわりが面倒くさかったり、
検索しても以前の情報とかがヒットしたりするので書いておきます。
認証まわりは色々やり方がありますが、AWS認証情報用のiniファイルを作成して実行する方法です。

## 送信用のポリシーを作成する
SES送信用のポリシーを作成してください。

``` JSON
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "ses:SendEmail",
      "Resource": "*"
    }
  ]
}
```

## SES認証用のユーザーを作成して、iniファイルを作成する
AWSのIAMでSES認証用のユーザーを作成してください。
ポリシーは上で作ったやつ。
作成すると、「Access key ID」、「Secret access key」が表示されるので、それを元に以下のiniファイルを作成してください。

```aws_credential.ini
[default]
aws_access_key_id = XXXXXXXXXXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXX
```
## composer
composerでAWS SDKを取得してください。
requireに「"aws/aws-sdk-php": "3.*"」を追加して、composer updateする。

## PHP
```aws_ses.php
include_once dirname(__DIR__) . '/vendor/autoload.php';
use Aws\Credentials\CredentialProvider;
use Aws\Ses\SesClient;
use Aws\Exception\AwsException;

// iniファイルで設定した[]のテキストを設定
$profile = 'default';

// ini指定
$path =  dirname(__DIR__) . '/aws_credential.ini';

// iniファイルでの認証するための処理
$provider = CredentialProvider::ini($profile, $path);
$provider = CredentialProvider::memoize($provider);

// SES用オブジェクト生成
$client = new Aws\Ses\SesClient([
    'region' => 'us-east-1', // SESを設定しているリージョン
    'version' => '2010-12-01',
    'credentials' => $provider
]);

// 送信元メールアドレス
$from_mail = 'no-reply@test.com'; // SESで設定したメールアドレス

// 送信先メールアドレス
$to_mail = 'test@gmail.com';

//送信者名
$from_name = mb_encode_mimeheader("テスト送信者",'utf-8');

// 文字コード
$char_set = 'UTF-8';

// 件名
$subject = '件名でーす';

// 本文
$body = '本文でーす';

try {
    // メール送信
    $result = $client->sendEmail([
        'Destination' => [
            'ToAddresses' => [$to_mail],
        ],
        'ReplyToAddresses' => [$from_mail],
        'Source' => $from_name,
        'Message' => [
            'Body' => [
                'Text' => [
                    'Charset' => $char_set,
                    'Data' => $body,
                ],
            ],
            'Subject' => [
                'Charset' => $char_set,
                'Data' => $subject,
            ],
        ],
    ]);
    
    // 送信ID
    $messageId = $result['MessageId'];
} catch (AwsException $e) {
    $this->log("SES送信失敗。" . $e->getAwsErrorMessage());
}
```

以上でございます！
hdfsの容量が枯渇した時に大きいファイルを探す方法

hdfsの容量枯渇でhadoopが動作しなくなり、てんやわんやしたので一時対応方法を残しておく。

コマンド一覧
https://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-common/FileSystemShell.html#df


### ディスクの確認をする
```
hadoop fs -df -h

hadoop dfsadmin -report
```

### フォルダとファイルの使用量確認

フォルダごとのディスク使用量を確認

```
hadoop fs -du -s /${folder}/* | sort -n
```

ファイルごとのサイズを確認

```
hadoop fs -du /${folder}/* | sort -n
```

### 削除方法

ファイルの削除方法

```
hadoop fs -rm ${file}
```


フォルダ内のファイルを全部削除する方法

```
hadoop fs -rm -r /${folder}/*
```

しかしこれだけだとtrashフォルダに移動するだけなので、trashも削除する必要がある。

```
hadoop fs -expunge
```

か以下コマンドで削除をする

```
hadoop fs -rm -r /user/${whoami}/.Trash/*
```

### まとめ

そもそもhdfsのディスク監視の必要性があるのでは。
【一番簡単に】とりあえずCSSだけで要素を〇〇秒後に表示したい



## Keyframesを使う
Keyframesを使えば簡単にできます。
[Keyframes](https://qiita.com/7968/items/1d999354e00db53bcbd8)が分からなくても以下をコピペすればとりあえず動きます。

```html
<div class="hoge-box">
    10秒後に表示されるBOX
</div>
```

``` css

/* 10秒後に0.5秒かけて"late-open"を実行する */
.hoge-box {
    display: none;
    animation: late-open 0.5s ease-in 10s forwards;
}

/* late-open = display: block; */
@keyframes late-open {
  to {
    display: block;
  }
}

```


`display: none;`だった要素が10秒後に`display: block;`で上書きされることで表示されます。
pandasのデータフレームにgroup_idを付与したい

# はじめに
pandasで重複削除したい場合や、集約したいときにはdrop_duplicatesやgroupbyを使えばやりたいことができます。

[PandasのDataFrameやSeriesで重複要素を取り除く方法
Python](https://qiita.com/kira4845/items/6798e54eb76b15329e3c)
[Pandas の groupby の使い方](https://qiita.com/propella/items/a9a32b878c77222630ae)


ただ、groupbyするときと同じような条件で、各groupにgroup_idを付与したい、みたいなこともたまにありますが、やりかたがわからなかったので実装してみました。(bestプラクティスじゃないかもだけど簡単に実装できた)


# group_idの付与

```Python
# pandasのimport
import pandas as pd

# データフレームの用意
df = pd.DataFrame({
    'building_name': ['Aビル', 'Aビル', 'Bビル', 'Cビル', 'Bビル', 'Bビル', 'Dビル'],
    'property_scale': ['large', 'large', 'small', 'small', 'small', 'small', 'large'],
    'city_code': [1, 1, 1, 2, 1, 1, 1]
})
df
```

| building_name | property_scale | city_code |
|:--|:--|:--|
| Aビル | large | 1 |
| Aビル | large | 1 |
| Bビル | small | 1 |
| Cビル | small | 2 |
| Bビル | small | 1 |
| Bビル | small | 1 |
| Dビル | large | 1 |


```Python
# グループobject化
group_info = df.groupby(['property_scale', 'city_code'])
```

```Python
# 一応中身みておく
group_info.groups
```
{('large', 1): Int64Index([0, 1, 6], dtype='int64'),
 ('small', 1): Int64Index([2, 4, 5], dtype='int64'),
 ('small', 2): Int64Index([3], dtype='int64')}

```Python
# こちらも見ておく
group_info.get_group(('large', 1))
```

| building_name | property_scale | city_code |
|:--|:--|:--|
| Aビル | large | 1 |
| Aビル | large | 1 |
| Dビル | large | 1 |


```Python
# group_idの付与
df = pd.concat([
    group_info.get_group(group_name).assign(group_id=group_id)
    for group_id, group_name
    in enumerate(group_info.groups.keys())])
df
```

| building_name | property_scale | city_code | group_id |
|:--|:--|:--|:--|
| Aビル | large | 1 | 0 |
| Aビル | large | 1 | 0 |
| Dビル | large | 1 | 0 |
| Bビル | small | 1 | 1 |
| Bビル | small | 1 | 1 |
| Bビル | small | 1 | 1 |
| Cビル | small | 2 | 2 |



いちおう関数化もしておきます


```Python
import pandas as pd
from pandas.core.frame import DataFrame

def add_group_id(df: DataFrame, by: list) -> DataFrame:
    """byの値が重複しているレコードにgroup_idを付与する.

    Args:
        df (DataFrame): 任意のデータフレーム
        by (list): グループ化するカラム名

    Returns:
        DataFrame

    """
    # すでにgroup_idカラムが入っている場合はbyにgroup_idも追加する
    if 'group_id' in df.columns:
        by += ['group_id']
    group_info = df.groupby(by=by)
    new_df = pd.concat([
        group_info.get_group(group_name).assign(group_id=group_id)
        for group_id, group_name
        in enumerate(group_info.groups.keys())])
    return new_df
```

# 追記

@r_beginners さんにコメントいただき、そもそもgroupbyにgroup_id算出の機能があるみたいです。

```Python
import pandas as pd
from pandas.core.frame import DataFrame

def add_group_id(df: DataFrame, by: list) -> DataFrame:
    """byの値が重複しているレコードにgroup_idを付与する.

    Args:
        df (DataFrame): 任意のデータフレーム
        by (list): グループ化するカラム名

    Returns:
        DataFrame

    """
    # すでにgroup_idカラムが入っている場合はbyにgroup_idも追加する
    if 'group_id' in df.columns:
        by += ['group_id']
    new_df = df.assign(group_id =df.groupby(by).ngroup())
    return new_df
```

@nkay さんのコメントにもあるように、pd.factorize()も使えそうですね。

pandasのメソッドもっと勉強しよう。。
tkinterでBMIを測定してみた

#はじめに
僕は最近、バイトや教習所に行っているせいで深夜にご飯を食べることがよくあります。なので、太ったのではないかと思い、自分が今どういった体系なのか知りたくなったのでBMIを測定するツールを作ってみました。

#手順
###1.ウィンドウを表示する
```python:qiita.py
root=tk.Tk()
root.geometry("400x300")
root.title("BMI診断ツール")
```

###2.ウィンドウに必要なものを表示する
身長、体重のラベルと、身長、体重、BMI、体系のテキストボックス、ボタンををそれぞれ用意する。そして、それらを適切な場所に配置する。

```python:qiita.py
#ラベルを作る
height_lavel=tk.Label(text="身長(m)")
height_lavel.place(x=60,y=50)

weight_lavel=tk.Label(text="体重(kg)")
weight_lavel.place(x=60,y=80)

bmi_lavel=tk.Label(text="BMI")
bmi_lavel.place(x=60,y=200)

result_lavel=tk.Label(text="あなたの体系は？")
result_lavel.place(x=50,y=240)

#テキストボックスを作る
height_box=tk.Entry(width=20)
height_box.place(x=140,y=50)

weight_box=tk.Entry(width=20)
weight_box.place(x=140,y=80)

bmi_box=tk.Entry(width=20)
bmi_box.place(x=140,y=200)

result_box=tk.Entry(width=20)
result_box.place(x=140,y=240)

#ボタンを作る
buttonl=tk.Button(root,text="診断する",font=("Halvetica",14),command=Buttonclick)
buttonl.place(x=140,y=130)
```

###3.出力の条件を考える
BMIは体重(kg)/身長(ｍ)x身長(ｍ)なのでこの式に当てはめてBMIを出力させます。また今回はBMIが18.5を下回ると「瘦せ型」、18.5から25の間で「標準体型」、25以上で「肥満」というコメントも出力されるようにしました。

```python:qiita.py
    height=float(height_box.get())
    weight=float(weight_box.get())
    bmi=weight/(height*height)

    if bmi<18.5:
        result = "痩せ型"
    
    elif 18.5<=bmi<25:
        result = "標準体型"
    
    elif 25<=bmi:
        result = "肥満"
    
    result_box.delete(0,tk.END)
    result_box.insert(0,result)
```
###4.ボタンを押してプログラムが実行されるようにする
```python:qiita.py
def Buttonclick():
```

#結果
無事に出力できました。

![png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638200/d0169da7-a31d-3c71-4d3b-55ed2ba65a71.png)

#ソースコード
```python:qiita.py
#codimg:utf-8
import tkinter as tk

def Buttonclick():
    
    height=float(height_box.get())
    weight=float(weight_box.get())
    bmi=weight/(height*height)

    bmi_box.delete(0,tk.END)
    bmi_box.insert(0,bmi)

    if bmi<18.5:
        result = "痩せ型"
    
    elif 18.5<=bmi<25:
        result = "標準体型"
    
    elif 25<=bmi:
        result = "肥満"
    
    result_box.delete(0,tk.END)
    result_box.insert(0,result)

#ウィンドウを作る
root=tk.Tk()
root.geometry("400x300")
root.title("BMI診断ツール")

#ラベルを作る
height_lavel=tk.Label(text="身長(m)")
height_lavel.place(x=60,y=50)

weight_lavel=tk.Label(text="体重(kg)")
weight_lavel.place(x=60,y=80)

bmi_lavel=tk.Label(text="BMI")
bmi_lavel.place(x=60,y=200)

result_lavel=tk.Label(text="あなたの体系は？")
result_lavel.place(x=50,y=240)

#テキストボックスを作る
height_box=tk.Entry(width=20)
height_box.place(x=140,y=50)

weight_box=tk.Entry(width=20)
weight_box.place(x=140,y=80)

bmi_box=tk.Entry(width=20)
bmi_box.place(x=140,y=200)

result_box=tk.Entry(width=20)
result_box.place(x=140,y=240)

#ボタンを作る
buttonl=tk.Button(root,text="診断する",font=("Halvetica",14),command=Buttonclick)
buttonl.place(x=140,y=130)

root.mainloop()
```

#感想
初めて自分で何か動くものをpythonで作れました。なかなか時間はかかったけど、完成した時はとても嬉しかったです。また夏休みにでもpythonでこのようなものを作ってみようかなと思います。

#参考文献

- 「いちばんやさしいPython入門教室」大澤文孝[著]

- [[Python]TkinterでGUI付きBMIを計算するためのサンプルプログラム](https://pctraveljournal.com/?p=840)
Flutter辞書

##Widget

**ー部品**

##Constraint Programming

**ー制約プログラミング**

「問題を制約の集合として記述してコンピュータに与えると、コンピュータが制約を充たした答を見つけてくれる」

ことを目指すプログラミング・パラダイムのことだと言えます。

##Sandbox

コンピュータセキュリティ技術において、**サンドボックスは**、外部から受け取ったプログラムを保護された領域で動作させることによって、システムが不正に操作されるのを防ぐセキュリティ機構のこと

##ただの英和辞典

- anatomy:解剖学
- emulate:模倣する
- deploy:展開する
- configure:構成・機能
- resource hog: A computer function that slows processing time.

##その他

- みてから自分でやってみよう
- ノートをとるのはありだよ
- 動画は飛ばさない
- わからないことがあれば自分でググってみて、そのあと少し時間をおいてから見直すといいよ
- The most improtant thing is "Practice"
- 映画に出てくるような天才ハッカーはいない、エンジニアはその時間の９０％は、画面を見つめてるだけ→そういうときはGoogleとstack over flowに頼ろう！
- Struggle is Good!

[【The Complete 2020 Flutter Development Bootcamp with Dart】](https://www.udemy.com/course/flutter-bootcamp-with-dart/)
にてわからなかった単語を抽出

##そん他技術的なこと

- **10.15以降のCatalinaならシェルの変更を**

→AppleはmacOS Catalinaにおいてデフォルトのインタラクティブシェルをbashからzshに変更した。macOSとLinuxの双方を普段使いしているのであれば、macOSに合わせてLinuxのデフォルトシェルをzshに変更するのも1つの手と言える

-Piが出てこない問題

##リソース

[【トラブルシューティング】](https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/17130752#overview)

[【コースが出してる参考資料が詰まったGitHub】](https://github.com/londonappbrewery/Flutter-Course-Resources)
[Javascript]まちがえながらも感覚的に実装できるまで昇華していく[後編]

#目的
- 関数の実装を繰り返し実施し、実装までの思考法を身につける。
- 関数の概念を頭で理解するだけでなく、感覚的に操作できるまで昇華する。
- 英語でテクニカルな内容を理解する。


#今回やること
lodashのライブラリを実装しながら学んだことをアウトプットしていきます。
if文は三項演算子で対応するように意図する。

##_.lastIndexOf(array, value, [fromIndex=array.length-1])
第3引数のインデックスから逆方向に検索し、値と一致したインデックス番号を返す。なければ-1。

```
_.lastIndexOf([1, 2, 1, 2], 2);
// => 3
 
// Search from the `fromIndex`.
_.lastIndexOf([1, 2, 1, 2], 2, 2);
// => 1
```

###実装
特に問題なし。

```
lastIndexOf = (array, value, fromIndex = array.length - 1) => {
    for (let i = fromIndex; 0 <= i; i--) {
        if (array[i] === value) {
            return i
        }
    }
    return -1
}
```

##_.last(array)
配列の最後の値を取り出して返す。

```
_.last([1, 2, 3]);
// => 3
```

###実装
特に問題なし

```
last=(array=[])=>{
    return array[array.length-1];
}
```

##_.flatten(array)
渡した配列を一つずつなくしてくれる。

```
_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]
```


###学び

階層になっている時は、頭の中ではJSONを見るような気分になる。
(=階層を意識すること）

```
const num = [1, [2, [3, [4]], 5]];
　　num[0]// =>1
   num[1] // =>[2, [3, [4]], 5]

　　[2, 
　　[3, [4]], 5]

```

###実装
配列の中を取り出して配列があるかが重要。
再帰と似ていて、まずは、親子みて兄弟は親子見終わって見る。

```
function flatten(array) {
    const flattendedArray = [];
    for (let i = 0; i < array.length; i++) {
        const value = array[i]
        if (Array.isArray(value)) {
            flattendedArray.push(...value);
        } else {
            flattendedArray.push(value);
        }
    }
    return flattendedArray;
} 
````

#####################################################################################
vimでi love uと打つと愛が消える

![iloveu.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67471/40d7cff4-2128-5ac5-5039-80e906fc6081.gif)

vimで`i love u`と打つと愛は消えてしまいました。
儚いですね。















### 一応解説

i: insertモードに移行
love: 文字をinsert
(esc): insertモード抜ける
u: undoでinsertした文字が消える
Ruby on Rails　住所自動入力実装方法

# はじめに

現在のバージョン：
macOS Catalina 10.15.3

Ruby on Railsで住所自動入力を実装してみました。
備忘録として記述します。もし参考になれば幸いです。

# 手順

（1）はじめに下記からjsファイル(jQueryプラグイン)をダウンロード。
[jquery.jpostal.js](https://github.com/ninton/jquery.jpostal.js)

（2）ダウンロードしたjsファイルをapp/assets/javascriptsに配置。

（3）Gemfileに下記を追加後、ターミナルで```$ bundle install```。

```ruby:Gemfile
# RailsでjQueryを使えるようにするため
gem 'jquery-rails'
# 住所機能
gem 'jp_prefecture'
```

（4）Userモデルに下記カラムを追加後、ターミナルで```$ rails db:migrate```。

```ruby:ターミナル
rails generate migration AddColumnsToUsers postal_code:string prefecture_code:string address_city:string address_street:string
```

（5）Userモデルを編集する為、app/models/user.rbに下記追加

```ruby:user.rb
  include JpPrefecture
  jp_prefecture :prefecture_code

  def prefecture_name
    JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
  end

  def prefecture_name=(prefecture_name)
    self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
  end
```

（6）表示をさせるビューに下記追加(本記事はdeviseを導入して新規会員登録画面で実装)app/views/devise/registrations/new.html.erbに追加記述

```ruby:new.html.erb

<%= f.label :郵便番号 %>
<%= f.text_field :postal_code, autocomplete: "postal_code", id: "customer_postal_code" %>

<%= f.label :都道府県 %>
<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all,  :name, :name, autocomplete: "prefecture_code", id: "customer_prefecture_code" %>

<%= f.label :市区町村 %>
<%= f.text_field :address_city,  autocomplete: "address_city", id: "customer_address_city" %>

<%= f.label :町名番地 %>
<%= f.text_field :address_street,  autocomplete: "address_street", id: "customer_address_street" %>
```

（7）app/assets/javascripts/user.coffeeにjpostalメソッドを呼び出す為記述。

```ruby:user.coffee
$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city" : "%4",
                  "#user_address_street" : "%5%6%7"
                }
  })
  # 入力項目フォーマット
    #   %3  都道府県
    #   %4  市区町村
    #   %5  町域
    #   %6  大口事業所の番地
    #   %7  大口事業所の名称
```

（8）app/controllers/users_controller.rbに下記追加記述

```ruby:users_controller.rb
  private
  def user_params
    params.require(:user).permit(:postcode, :prefecture_code, :address_city, :address_street) #保存を許すカラム
  end
```

以上で郵便番号入力後、住所が自動で入力がされるかと思います。

#補足
住所自動入力を設定した画面に遷移してリロードしないと郵便番号の自動入力がしない場合、リンクの記述に data: {"turbolinks" => false} を追加すると解消できました。

```
<%= link_to '会員登録', '/customers/sign_up',  data: {"turbolinks" => false} %>
```


初めて実装した場合約20分はかかりました。
ご参考になれば幸いです。
PPAPを根絶したい

# Overview

公開鍵を使って暗号化zipを簡単に作れるユーティリティを作成しました.
https://github.com/sumeshi/ppap

PPAPを知らない人はこちら, 808使ってないほうです.
[JIPDEC - S/MIME利用の最新動向](https://itc.jipdec.or.jp/common/images/4_20170227_otaishi.pdf)

PPAPは嫌だけど, ファイルはいい感じに送信したいという方に

# Description

https://github.com/sumeshi/ppap

![ppap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250257/0b130629-668d-4bd9-2869-9ac5b3063f33.png)

やっていることは単純で,zipファイルが2重になっており,
内部に乱数パスワードで暗号化されたzipファイルと, その暗号化キーを公開鍵で暗号化し
たテキストファイルが入っています.

もうちょっと詳しく説明すると,
送信者側では128byteの乱数を生成して, その乱数を暗号化キーとして元ファイルを暗号化, 
さらにその暗号化キーを公開鍵で暗号化してそれらの2つをzipでまとめて吐き出します

受信者側では
zip内の暗号化されたキーを自分の秘密鍵で復号して, そのキーでzipファイルの復号をします.

# Usage
## 暗号化

```
$ ppap --encrypt /path/to/your/file --key ~/.ssh/your_key.pub
```

## 復号化
```
$ ppap --decrypt /path/to/your/ppap-yyyymmdd_HHMMssSSSSSS.zip --key ~/.ssh/your_key
```

現状RSA鍵のみに対応しています
鍵生成は `$ ssh-keygen -t rsa`とかしとくといい感じだと思います

# Installation
```bash
$ pip install ppapzip
```

PPAPなんて安易な名前つけたら先人がいて取れませんでした... 
使用する際はppapですが, インストールする際にはppapzipです

# TBA
https://github.com/ユーザ名.keys
にアクセスするとユーザが登録している公開鍵を見れるのはご存知でしょうか？

わざわざ公開鍵を事前に渡しておくのもバカらしいので, 本来はこの公開鍵を利用して暗号化して送信！ってしたかったんですが
普通は公開鍵なんていっぱい登録してるのでどれ宛に送るか結局ユーザが選ばなきゃいけないんだよな...と思って考え中です.

優しい人とか悪いことしてる人は自分のWebページとかに公開鍵貼ってたりするイメージがあるんですが, いいアイディアがあれば教えていただきたいです.


お わ り
ruby on rails  にて　閲覧機能をつけたい

プログラミングを初めて２週間ほどです。

NoMethodError in Todolists#index
Showing /home/vagrant/work/sample_app/app/views/todolists/index.html.erb where line #2 raised:

undefined method `each' for nil:NilClass
Extracted source (around line #2):
1NoMethodError in Todolists#index
Showing /home/vagrant/work/sample_app/app/views/todolists/index.html.erb where line #2 raised:

undefined method `each' for nil:NilClass
Extracted source (around line #2
１　<h1>投稿一覧</h1>
２　<% @lists.each do |list| %>　←ここがエラー
３  <p>タイトル</p>
４ <span><%= list.title %></span>
５　<% end %>

              

このようなエラーが出て解決方法がわかりません。　

余りにもわからないのでテキストをコピペしましたが未可決です。

どこを見直せば大丈夫ですか？
`Vue packages version mismatch` に対する対処メモ

Nuxt.js+Firebaseを勉強しています。

`npm audit fix` したら、ビルドが `Vue packages version mismatch` エラーになりました。本記事はそのときのメモです。

# 環境

- Firebase 7.3.0 → 7.15.5
- Vue 2.6.10 → 2.6.11

# 背景
サードパーティのバリデーションプラグインであるVee-validateをインストールすることにしました。
`npm install vee-validate --save` したときに次のようなメッセージが表示されました。

```
added 1 package from 1 contributor and audited 1300 packages in 66.018s
found 197 vulnerabilities (181 low, 16 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
```

脆弱性が疑われるライブラリバージョンを使っていると警告が出るとのことなので、 `npm audit fix` を実行しました。
`npm audit fix` は成功し、 Firebase 7.3.0 が Firebase 7.15.5 になりました。

# ビルド時のエラー

`npm run build` を実行したときのエラーは次の通りです。

```
Vue packages version mismatch:

- vue@2.6.10
- vue-server-renderer@2.6.11

This may cause things to work incorrectly. Make sure to use the same version for both.
```

# 対処

以下、私の判断が正しいのか分かりませんが。。。

私はvueのバージョンを上げるべきと判断して `npm i vue` を実行しました。実行結果は以下の通りです。

```
+ vue@2.6.11
removed 1 package, updated 1 package and audited 1165 packages in 13.653s
found 0 vulnerabilities
```

`vue-server-renderer@2.6.11` とバージョンが同じになりました。

再度 `npm run build` を実行したところ、さらにエラーが出ました。内容は次の通りです。

```
Vue packages version mismatch:

- vue@2.6.11 (xxx\node_modules\vue\dist\vue.runtime.common.js)
- vue-template-compiler@2.6.10 (xxx\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
```

`npm info vue-loader version` でvue-loaderのバージョンを確認したところ10.0以上だったので、 `npm install --save-dev vue-template-compiler` でvue-template-compilerのバージョンを上げます。

```
+ vue-template-compiler@2.6.11
removed 1 package, updated 1 package and audited 1169 packages in 9.933s
found 0 vulnerabilities
```

`vue@2.6.11` とバージョンが同じになりました。

`npm run build` を実行すると無事に成功しました。
失敗しない【filter】エフェクト５３選

[<img width="752" alt="スクリーンショット 2020-07-03 18.01.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e8029f7e-5041-c02f-b0c5-7f034fef9252.png">
](https://www.twinzlabo.com)



こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○


---

## １. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)
[![hover-animation-zoom-image-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/09c19143-ee41-b6c4-d505-e99761966969.png)
]

## ２. 【filter完全網羅】hoverでボタンが動き出す！filterを網羅できるCSSボタンアニメーション15選
[![hover-animation-bottons-filter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/6a2284b5-e643-424d-2df7-3641165d8c27.png)
]

## ３. hoverでボタンアニメーション！transitionを使いこなすCSSボタンエフェクト9選
[![css-effect-hover-button-animation-.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/fe5a80ec-97ad-9492-6fa1-dda6612296a3.png)
]

## ４. hoverとfilter:grayscaleで白黒に切り替え！CSS画像エフェクト３選
[![hover-animation-filter-grayscale.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/9a9a1631-942b-b010-ea66-b32beee38855.png)
]
## ５. hoverとfilter:brightnessで明るさ調節！CSS画像エフェクト３選
[![filter-brightness-topimage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/db13b9f1-af0c-c872-2172-eaaa2280800f.png)
]
## ６. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
[![click-animation-slider-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/6b47d11a-8adf-fed7-db00-b854ced53d82.png)
]
## ７. hoverで画像が鏡みたいに反射！position:absoluteとfilter多用でCSSアニメーション3選
[![css-effects-hover-filter-absolute.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3f231c07-4e43-c347-987a-3c955ff5caba.png)
]
## ８. hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
[![css-effects-hover-filter-hue-rotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/bbe1ca76-e1ce-a162-2231-b148fa1293fd.png)
]
## ９. transitionとfilterで美しく変化するCSS画像エフェクト５選(基礎から応用まで)
[![hover-animation-filters-transition.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3222eeec-e36d-8713-41fb-5bb24a52066d.png)
]

## １０. hoverでぼかし画像が動き出す！filter:blurとtransitionでCSSエフェクト3選
[![css-cool-effects-hover-filter-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0150566e-abe4-0a56-1988-98ef027aca67.png)
]

## １１. 【filterプロパティ】hoverすると美しさ100倍！CSS画像エフェクト３選
[![hover-effects-filters-mix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c015011d-5795-b6b9-ba03-d3cee7f5844a.png)
]

---
いかがでしたでしょうか？
お役に立てたら嬉しいです。

最後に注意書きとして
コメント欄に心ないコメントを投稿する方がまれにいますが迷惑なので問答無用で速攻ブロックします。
【.NET・Visual studio】簡単にwindow表示・アプリケーション開発

    



##❏対応pc・os
- windows7~10
- mac os
- linuxは対応してません。

##❏環境
- windows10

インストールサイト
https://visualstudio.microsoft.com/ja/downloads/


microsoftアカウントにサインインしないと最初の30日間の試し期間となり、その後にはライセンスが切れて、Visual Studioが使えなくなってしまいます。


##❏早速やろう
![コメント 2020-06-25 155302.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/7de6c4c1-d388-f73c-58ec-971ebb645948.png)
新しいプロジェクトの作成をクリックして、

![コメント 2020-06-26 162737.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/6b6f7f16-1f50-7dda-ea86-98255fa1c464.png)
wpfと検索し``wpf app (.NET Core)``を選択します。




![コメント 2020-06-25 190356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/3e7f3a1b-c01e-5475-2b5f-99eca247bd64.png)
プロジェクト名を入力します。

そうすると以下のような画面が表示されます。
![コメント 2020-06-25 174927.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/8bec4fd2-29ad-d7cb-5a27-f19846624d05.png)
これを実行します。
上の``ファイル 編集 表示 プロジェクト……``となっている部分があります。そこの``デバッグ＞デバッグなしで実行``をクリックします。
###実行結果
すると何も書かれてないwindowが表示されます。
![コメント 2020-06-25 175733.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/19b07c42-09cb-dc26-c7e2-38a24f16270d.png)
ではそこにボタンを追加します。
windowを閉じて左よこの``ツールボックス＞すべてのwpfコントール＞button``をクリックして
windowの好きな所にクリックします。するとボタンが出てきます。大きくします。
ツールボックスには他にもカレンダーやパスワードボックスなど沢山あるのでいじってみてください。
![コメント 2020-06-25 180914.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/3fdb5a83-da2a-fabc-a0d5-a2531a69b68c.png)


ボタンをダブルクリックするとボタンのプログラムが表示されます。
![コメント 2020-06-26 163509.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/6d679a5b-7ac1-e54d-69e6-518c6f33feb7.png)

`` private void button_Click(object sender, RoutedE...{}``となってる所の``{``の中に以下のように入力します。

```c#:button
MessageBox.Show(("ここに表示したい文字列を入力します。"));//ポップアップwindowを表示する
```

###実行結果
ボタンをクリックするとこうなります。

![コメント 2020-06-25 181735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/96533426-3f4d-5042-f4c1-ceba8a4880c2.png)

##❏挑戦
これであるコードを作っていきます。

```c#:tyousenn

int a=100;
            if (a == 100)
            {
                MessageBox.Show(("aの値は100です。"));
            } else { 
            
                MessageBox.Show(("aの値は100ではありません。"));
            }
```

![コメント 2020-06-25 183656.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/f434ab5e-b769-c55e-0ffd-ec65c21310a2.png)

実行してボタンをクリックするとこうなります。


![コメント 2020-06-25 183847.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641736/72e15cf3-c534-4acd-97e4-27627c0ec32d.png)

変数aの値を変えると実行結果も異なります。
###❏裏技
自分のユーザーフォルダーに移動して⇛source⇛repos⇛自分のプロジェクトの名前がついたフォルダー⇛自分のプロジェクトの名前がついたフォルダー⇛bin⇛Debug⇛netcoreapp3.1⇛自分のプロジェクトの名前がついた実行ファイルをクリックすると自分のプロジェクトが実行されます。

　
##❏おわりに
この記事は私が初めて投稿した記事です。
この記事を参考にしてリンクしてくれると嬉しいです。(まあ誰もしないと思うけど。(ﾃ‐ﾃ))

##❏参考記事
- [.NET Core 3.1とVisual Studioでデスクトップアプリ](https://qiita.com/Kosen-amai/items/a8df0f4acc877a249297)
Uncaught Error: Class 'ZipArchive' not found　でハマった件について

# 環境
PHP 7.3.19
mysql  Ver 8.0.20
Laravel Framework 7.7
centOS8
# エラーの出現
ローカル環境でアプリを作成し、
centOSにデプロイ作業をしている最中にこのエラーが発生しました。

```php:controller
$zip = new ZipArchive(); //オープン
```
と書いている部分が
```error
Uncaught Error: Class 'ZipArchive' not found
```
と表示されてしまいました。
#エラーの意味と解決策
##エラーの意味
ZipArchiveというクラスが無いと言っています。
その為php-pecl-zipというモジュールを入れてやればOK！
##解決策
私はPHP7.3を利用しているので「php73 php-pecl-zip」というモジュールをインストールするようです。

```:rootuser
yum -y install php73 php-pecl-zip
```
##インストールスタート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666799/67e95972-5b45-fb4d-70f2-106da7e0690d.png)


コンプリート！と表示されたのでサーバを再起動して変更を反映させます。

```:rootuser
systemctl restart httpd.service
```
無事zipのダウンロードが出来るようになりました。
JavaでMapのバリューを1行でインクリメントする方法


## 書き方（Java8以降）

```java:書き方
map.merge(key, 1, Integer::sum);
```

## 動かしてみる

```java:例示
jshell> Map<String, Integer> map = new HashMap<>();
map ==> {}

jshell> map.put("apple", 0);
$2 ==> null

jshell> map.get("apple");
$3 ==> 0

jshell> map.merge("apple", 1, Integer::sum);
$4 ==> 1

jshell> map.get("apple");
$5 ==> 1

jshell> map.merge("apple", 1, Integer::sum);
$6 ==> 2

jshell> map.get("apple");
$7 ==> 2
```

## なんで？

IntegerのsumメソッドとMapのmergeメソッドを調べましょう

### Integer.sum

2つの引数を単純に加算しているだけです。

>  sum
public static int sum(int a,
                      int b)
+演算子のように、2つの整数を加算します。
パラメータ:
a - 第1オペランド
b - 第2オペランド
戻り値:
aとbの合計
導入されたバージョン:
1.8

[Oracleのドキュメント](https://docs.oracle.com/javase/jp/8/docs/api/java/lang/Integer.html#sum-int-int-)

### Map.merge

> default V merge(K key, V value, BiFunction<? super V,? super V,? extends V> remappingFunction)
指定されたキーがまだ値と関連付けられていないかnullと関連付けられている場合、指定されたnull以外の値に関連付けます。それ以外の場合は、指定された再マッピング関数の結果で関連する値を置換し、結果がnullの場合は削除します。


[Oracleのドキュメント](https://docs.oracle.com/javase/jp/8/docs/api/java/util/Map.html#merge-K-V-java.util.function.BiFunction-)

つまり、第2引数の`value`はnullだった場合のデフォルト値で、nullでない場合は第3引数の関数の結果が設定されます。

第3引数の関数も引数を2つとります。
第3引数の関数の1つ目の引数はkeyに対してのvalueです。
第3引数の関数の2つ目の引数は第2引数と同じvalueがnullだった場合の値です。

[[Java] Map#mergeが分かりづらい。](https://qiita.com/naonaka/items/9bde0e274446b0ebbf46)

変数に名前をつけるとこんな感じでしょうか

```java
map.merge(key, defaultValue, (value, defaultValue) -> function());
```


### つまり？


`map.merge(key, 1, Integer::sum)`はデフォルト値をstep（１回の処理で加算される数）のように扱い、valueとデフォルト値をIntegerのsumをメソッド参照で合算しています。


## 参考

https://stackoverflow.com/questions/81346/most-efficient-way-to-increment-a-map-value-in-java

あと、『Effective Java 第3版』を読んでたら、項目43ラムダよりもメソッド参照を選ぶ（P199）にもこの書き方は言及されてました。
[Unity]マウスカーソルのサイズ変更  C# Windows実行環境

## 最初に
　・Unityのバージョンは[2019.4.0f1]です！
　・Windows環境のみです。

## やってること
　・画像を縮小拡大してマウスカーソルにあげるだけです。

# スクリプト

```C#:GameSetting.cs
using UnityEngine;
using UnityEngine.AddressableAssets;

public class CursorManager : MonoBehaviour {
    public Texture2D sprite;
    public CursorMode cursorMode = CursorMode.ForceSoftware;
    public Vector2 hotSpot = Vector2.zero;
    public int size;
    private void Update() {
        if(Input.GetKeyDown(KeyCode.D)) {
            Cursor.SetCursor(ResizeTexture(sprite,size,size)), hotSpot, cursorMode);
        }
    }
    static Texture2D ResizeTexture(Texture2D srcTexture, int newWidth, int newHeight) {
        var resizedTexture = new Texture2D(newWidth, newHeight, TextureFormat.RGBA32, false);
        Graphics.ConvertTexture(srcTexture, resizedTexture);
        return resizedTexture;
    }
}

```
# （使い方）上記のスクリプトを適当な汎用Ｏｂｊにアタッチします。
なんやかんやセット
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353494/7ae2fb4e-238a-8c71-f596-ce69d6491539.png)

# 結果
Ｄキーをプッシュ
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353494/b9b108e8-15c7-a573-d5d5-7a16a74d2514.png)

※何度も変更していると画像がぼやけるのでソースを修正。
React

Reactについて調べたので備忘録として残しておく

公式ページで体系的な知識が付けられる
https://ja.reactjs.org/docs/getting-started.html

VSCodeで開発する。インストールは以下からできる。
https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1


高さを100%にしても画面と同じ大きさにならないことがあった。以下が参考になる。
https://qiita.com/shouchida/items/205fed63b886681661bd

React、Recoilの基本（チェックボックス付きの一覧表に使えそう）
https://qiita.com/serinuntius/items/3d6519988233d7ba643c
cocos2d-x-3.17.2をios(Xcode)で実行時につまずくこと（CFBundleShortVersionString,CFBundleShortVersionString)

###参考記事
https://qiita.com/nekomimimi/items/fe47be63e53316b9e93c
https://qiita.com/mrkmyki/items/9679e162f5fcf7361478

###初回のHello Worldの実行
初回のHello Worldプロジェクトを実行しようとしたところ以下の2点でつまづいたのでまとめます。

####error : Argument value 10880 is outside the valid range [0, 255]
エラーの起きるファイルの42行目あたり

```
#define BT_SHUFFLE(x,y,z,w) ((w)<<6 | (z)<<4 | (y)<<2 | (x))
```

これを以下に変更

```
#define BT_SHUFFLE(x, y, z, w) (((w) << 6 | (z) << 4 | (y) << 2 | (x)) & 0xff)
```

####ビルド後のThe application's Info.plist does not contain CFBundleShortVersionString.
iosフォルダのInfo.plistを開くと

```html
    <key>CFBundleShortVersionString</key>
    <string></string>
```

となっているので

```html
    <key>CFBundleShortVersionString</key>
    <string>$(MARKETING_VERSION)</string>
```

としたらTARGETSのtest-mobileを選択肢Marketing Versionが空欄になっていると思うので1.0.0を入力する。

<img width="873" alt="スクリーンショット 2020-07-03 17.31.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405768/5d5e82ae-4694-82e5-9a87-d88a42dfd782.png">

これで動いた。
【初心者用】C#でChromium版MicrosoftEdgeを動かしてみた

# はじめに
Chronium版のEdgeを動かす資料があまりなかったので、記事を作成してみました。
サイトを開き、ログインするまで自動で動くシステムをC#で作成します。

ご参考になれば幸いです。

# 手順
１．Chromium版MicrosoftEdgeの取得
２．WebDriverの取得
３．パッケージの取得
４．コード記述
５．参考文献
６．最後に

# １．Chromium版MicrosoftEdgeの取得
Chromium版MicrosoftEdgeをお持ちでないかたは、[こちら](https://www.microsoft.com/ja-jp/edge?form=MA13DE&OCID=MA13DE)から入手してください。
<img width="490" alt="コメント 2020-07-03 160109.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666989/d2769637-2568-cb1f-7a5e-f3a00073d5cf.jpeg">

# ２．WebDriverの取得
[こちら](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/)から入手してください。
※Edgeのバージョンに対応したドライバを入手してください。
<img width="459" alt="edge.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666989/637767de-e8be-28d3-b375-2a3ef5aef137.png">
<img width="466" alt="edge2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666989/82299167-696c-9fe3-ae1c-c40d45c937fe.png">

# ３．パッケージの取得
・VisualStudio2019 起動
・ソリューションエクスプローラの該当プロジェクトを右クリック→NuGet パッケージの管理をクリック
・以下画像の参照をインストールする
<img width="541" alt="コメント 2020-07-03 152537.PNG.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666989/46068b35-bbdd-2653-2589-d73c8fadd178.jpeg">
※プレリリースにチェックをつけること

# ４．コード記述
```C#:
private void OpenEdge()
{
    try
    {
        // ドライバー起動時に表示されるコンソール画面を非表示にする
        var service = EdgeDriverService.CreateChromiumService();
        service.HideCommandPromptWindow = true;

        // EdgeChromium版を使用
        var options = new EdgeOptions;
        options.UseChromium = true;

        var driver = new EdgeDriver(service, options);
        
        // サイトを開く
        driver.Navigate().GoToUrl("https://aaaa");

        //ユーザーID
        driver.FindElement(By.Name("pid")).SendKeys("userId");
        //パスワード
        driver.FindElement(By.Name("password")).SendKeys("pw");

        //ログインボタン
        IWebElement findbuttom = driver.FindElement(By.Name("btnname"));
        //ログインボタンをクリック
        findbuttom.Click();
    }
    catch(Exception ex)
    {
        MessageBox.Show(ex.ToString());
    }
}
```

# ５．参考文献
[Selenium4のEdgeDriverでChromium版MicrosoftEdgeを動かす](https://qiita.com/yk109/items/41bf80a309bf20d5f1e6)
※とっっっっっても参考になりました！大感謝です！

# ６．最後に
PythonやPowerShellでChromeを動かす方法はたくさん情報があったのですが、Edge はなかなか資料が見つからず苦労しました。。また旧Edge版とChronium版で使用するドライバ、メソッドが違うのでお気をつけください。
rails capybara使用時に出たエラー

今回の目的として、以下の参考記事のように、
rspecテスト実行時にsign_inメソッドを利用できるようになることであった。
https://qiita.com/jnchito/items/a8360e5e7a829d1e19b2

そのために、railsでcapybaraの設定を試みたところ以下のエラーが出た
それぞれのエラーに参考になったリンクを貼っておく。
また、大まかな設定は次の記事を参考にさせていただいた。
https://qiita.com/morrr/items/0e24251c049180218db4

    undefined method `visit'
https://qiita.com/terufumi1122/items/aefd6c965e9e946efc3b
visitはcapybaraで使えるメソッドなので、設定したうえでないと上記のエラーになるらしい


    Failure/Error: fill_in 'email', with: user.email 
    Capybara::ElementNotFound:
    Unable to find field "email" that is not disabled
https://qiita.com/pooooon/items/4fbc429d07e4b65ed928
私の場合、下記のように変更したところエラーがでなくなった。
`fill_in 'user[email]', with: user.email`
`fill_in 'user[password]', with: 'password'`
記事通り、'session[email]'ではないパターンもあるので、きちんとブラウザで確認した方がよいだろう。
Firebase（デプロイ）

#Firebaseでのデプロイ
Herokuでのデプロイをやったところうまくいかず、firebaseを使用したアプリだから？と思い、firebaseでデプロイを行った。


##デプロイで出たエラー

###[最初にデプロイした時参考にした記事](https://qiita.com/isihigameKoudai/items/4d41dd083d04adb441c3)

####console logには
`Failed to load resource: the server responded with a status of 400 ()`

####画面には
`400 Bad Request`　& 　画面が真っ白


##実施したこと

###[参考記事](https://qiita.com/Satachito/items/4a00b402970d657a88f3)


```ruby:qiita.rb
  $ npm run build
```

dist という名前のフォルダ作成

####Firebase の初期化

```ruby:qiita.rb
  $ firebase init hosting
```


```ruby:qiita.rb
  $ ? What do you want to use as your public directory? `dist`
```

**ターミナルで聞かれるので、dist フォルダを指定すること**


firebase.json という名前のファイルが以下のような内容で作られます。

```ruby:qiita.rb
  firebase.json
{
  "hosting": {
    "public": "dist",　 ← distになっているか確認
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

##デプロイ

```ruby:qiita.rb
 $ firebase deploy
```


###firebaseのHostingからアプリ起動
【Nuxt.js】Nuxt文法編：v-bind

🎈 この記事はWP専用です
https://wp.me/pc9NHC-nh

#前置き

Nuxt.js Vue.js を使う上で必須の知識です！
これができるとコンポーネントを活かして
表現の幅を広げることができます🌟

例えば！
親によってクラスの有無を切り替えて
色分けをする、といったことができます💕

#基本的な使い方

**v-bind:{ 属性名 }="{ 変数 }"**

タグの属性を変数にしたい時に使います。
aタグのhref属性をv-bindしてみます。

飛びたいリンク先
http://localhost:3000/

```index.vue
<template>
 <div class="page">
   <a v-bind:href="url">リンク</a>
 </div>
</template>

<script>
export default {
 data () {
   return {
     url: '/',
   }
 },
}
</script>
```

🎈 この記事はWP専用です
　 続きはWPでご覧ください👀
https://wp.me/pc9NHC-nh
自動デプロイで目指す効率的な開発

# 問題点
- 開発を始めるまでが大変（新規メンバー、3ヶ月後の自分）
- アップロードが衝突する（開発用サーバ）
- 先祖返り（デグレード）
- Issueベースでタスクを振りたい
- バグが起きた時点を知りたい

---

# デプロイで解決
- 開発を始めるまで
  - Gitさえ分かればデプロイされる
- アップロード衝突
  - Gitのブランチで独立

---

# デプロイで解決
- 先祖返り（デグレード）
  - 手動アップロードからの解放
- タスクベースでタスクを振りたい
  - GitのIssueとPR、デプロイの紐付け
- バグ発生時
  - リリースをそれぞれデプロイ

---

# 開発を始めるまで
- 新規メンバーに環境を揃えてもらいたい
 - 修正箇所は検討がつくのに整備が大変
 - 3ヶ月前のコードがわからない
 - 3年前のコードは全然分からない😫

- 自動デプロイ🔧
 - Gitさえコミットできればデプロイされる
 - 一部のロジックに注力できる

---

# アップロード衝突
- 同時に開発環境を使うことができない
 - 「作業を止めてもらっていいですか？」
 - 3人ぐらいならまだしも、5人、10人となると…
 - どこにテストしているかわからない

- 自動デプロイ🔧
 - Gitブランチごとに独立したデプロイ
 - サブドメインやディレクトリで分割
 - http://example.com/feature/add-sidebar/
 - http://example.com/feature/reset-plugin/
 - ファイル、DB、を分ける

---

# 先祖返り（デグレード）🐛
- 先祖返りを起こしてしまう
 - アップロードした人が古いファイルを持っていた
 - ファイル管理が大変
 - Gitの導入だけでもかなり解決するが、手動部分でオペミス

- 自動デプロイ🔧
 - アップロードは「必ず」Gitのものをアップする
 - Gitに必ず注力することになる

---

# Issueベースでタスクを振りたい
- Issueベース
 - 「料金計算の修正」「フッターデザインの修正」
 - Gitのブランチ化、マージで衝突を防ぐ
 - それぞれ同時並行で進むと確認が大変（アップロード衝突と同じく）

- 自動デプロイ🔧
 - Gitブランチごとに独立したデプロイ

---

# バグが起きた時点を知りたい
- 「今回の修正をお願いしたところ、全部の計算がおかしくなりました」
 - 今回の修正が計算をおかしくしたのか、もともとそうだったのか
 - 「お客様への説明責任」と「原因の追跡」を行いたい
 - 旧バージョンをアップすれば再現

- 自動デプロイ🔧
 - リリースバージョンごとにデプロイ
 - http://example.com/release/v1.0/
 - http://example.com/release/v2.0/

---

# 自動デプロイ
- 開発の問題を解決し、持続的な開発を行いたい
- ソフトウェアの寿命
 - 開発者「2年」　発注者「10年」
  - ただし長年のメンテは大変…
- 開発者のスケールアウト

---

# 開発者のスケールアウト
- 開発メンバーを増やしたい -> 開発者のスケールアウト
 - テストの自動化、チームの組織化

- タスクの分割を行えばスケールできる
 - イメージとしてはWordPressのプラグインのようなエコシステム（相互独立性）

---

# まとめ
- 開発を取り巻く環境を良くしたい

- より良いシステムを より安価に提供したい
 - 利用者の利益につなげたい

- 更に先
 - システムテスト自動化
 - テストエンジニアのスケール
ESCにtargetGroupを2つ登録する際にコンソールからだとできないのでメモ

ESCにtargetGroupを2つ登録する際にコンソールからだとできないのでメモ

```
aws ecs create-service \
--cluster api \
--service-name api \
--launch-type FARGATE \
--load-balancers '[{"targetGroupArn":"arn:aws:elasticloadbalancing:ap-northeast-1:xxx:targetgroup/pro-api/xxx","containerName":"nginx","containerPort":80},{"targetGroupArn":"arn:aws:elasticloadbalancing:ap-northeast-1:xxx:targetgroup/pro-api-internal/xxx","containerName":"nginx","containerPort":80}]' \
--desired-count 2 \
--task-definition pro-api:1  \
--network-configuration "awsvpcConfiguration={subnets=[subnet-xxxxxx],securityGroups=[sg-xxxxxxx],assignPublicIp=ENABLED}" --profile
```
Firebase/Authenticationで匿名ログインにする方法

##Friebaseで匿名ログイン
よくメールアドレス認証などは見られますが、匿名ログインについてはあまり見られないように思いますので、自身の備忘録を含めて記事を書こうと思います。

以下のコードを例えばIBActionのなかに書くことで匿名ログインが可能になります。

```Swift
Auth.auth().signInAnonymously() { ( authResult, err ) in
            if let err = err {
                print("エラー\(err)")
                return
            }
            
            guard let user = authResult?.user else { return }
            let isAnonymous = user.isAnonymous
            self.uid = user.uid
            print("サインインに成功しました。\(self.uid)")
        }
```
ちなみにemail認証の時は`Auth.auth().createUser()`です。
IEEE754を理解しよう


# IEEE754ってなに
　浮動小数点の標準的な方式だよ

## そもそも浮動小数点ってなに
- 固定小数点だと桁数が多くなる数が無理なのでできたよ
- 符号,指数,仮数,基数でもとめるよ
- 基数は2進数なら絶対2だよ
- 仮数と指数は相補関係だよ
- 仮数はx.xxとかを0.xxxとか1.xxxとかにするよ
- その時にずれた分が指数になるよ

## なんで生まれたの

色々浮動小数点の方式がありすぎてめちゃくちゃだったので統一しました。(ex:IBM方式)

## どういう風に表現するの

単精度では
符号部(1bit)+指数部(8bit)+仮数部(23bit)だよ　他は難しいから今はやめようね

### 仮数部の表現

- 1.xxxxの形にするよ
- 1の位が1なのがきまってるので処理系による処理変化がなくなるよ
- 元に戻すときは+1を忘れないようにね

### 指数部の表現

指数部は+127するよ

#### なんで

- 8bitの範囲は16進数00~FFで0~255だよ
- でもそれだと負の指数を表せないよ
- だから+127することで0を127にずらして7bitの範囲0~127と符号ビット0=負1=正にするよ
- だから指数部で示せる範囲は2^-127^2^127になるよ

![2020-07-03-03-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572200/760417e9-7802-fd04-6f21-c7ab605c2eb0.png)

## 誤差のお話

- 浮動小数点は10進数の少数を含む数を2進数で表現しようとするよ
- だから2進数で表現できない少数(循環小数になる)はうまく表せないよ
- だけどそれでは困るから丸めてある程度の数にするよ
- そうするとたまに誤差が生まれるよ
  
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572200/b29beb78-412b-bbde-d61c-1386d2992b10.png)

- 誤差が生まれると困るときは整数にしてそれが10^-nだよってやつを使うよ
  - これがBCDとかBigDecimalとかいうやつだよ

# 最後に
学習中の自分用に書いたのでめちゃくちゃ間違ってるかもしれないので温かく見守ってください（？）