OmniAICreator/Qiita-1.07M huggingface dataset:
Ruby スクリプトで「もしかしてこれ？」と言ってみたい


# はじめに

Ruby で，メソッド名を少しだけ間違うと，「もしかしてこれ？」と言ってくれる。
たとえば円周率を表示しようとして

```rb
puts Math::PI
```

のつもりで

```rb
pots Math::PI
```

とやったら

```
NoMethodError (undefined method `pots' for main:Object)
Did you mean?  puts
```

のように表示される。
意訳すれば

> `pots` なんつーメソッドはねーよ
> もしかしてこれ？　`puts`

となる。
存在しないメソッドを呼び出そうとしたときに，存在するメソッドの中からよく似た名前のものを探してきて，候補として表示してくれるンである。

こういう機能を自作のスクリプトにも組み込めないか？
つまり，ユーザーに何か入力させるのだが，受け付ける文字列があらかじめ限られていて，そこから外れているときに，「もしかしてこれ？」とやるわけだ。

# お題

こんなプログラムを考える（実用性は考えていない）。
Ruby 関係のよく見るウェブサイトをブラウザーで開くだけ。
サイトにはあらかじめ略称を決めておき，それをコマンドライン引数として与える。
ターミナルで，たとえば

```shell
ruby open_site.rb rubima
```

と打てば [Rubyist Magazine](https://magazine.rubyist.net/) のページが開く。
また，

```shell
ruby open_site.rb rurema
```

と打てば [Ruby リファレンスマニュアル](https://docs.ruby-lang.org/ja/) のページが開く。「rurema」は Ruby リファレンスマニュアルの（たぶん公式の）英字略称だ。

ウェブサイトをブラウザーで開くには，[launchy](https://github.com/copiousfreetime/launchy) という gem を使う。

こんなコードになる：


```rb:open_site.rb
require "launchy"

case ARGV.first
when "rubima"
  Launchy.open "https://magazine.rubyist.net/"
when "rurema"
  Launchy.open "https://docs.ruby-lang.org/ja/"
else
  puts "Unknown"
end
```

`ARGV` はコマンドライン引数を収めた文字列配列だ。

`ARGV.first` がどれにも当てはまらなかった場合，現状では「Unknown」とだけ表示されるが，さらに「もしかしてこれ？」を表示させたい。

# 実装

Ruby の「Did you mean?」機能は，[did_you_mean](https://github.com/ruby/did_you_mean) という gem で実現されている。
この gem は Ruby にバンドルされている。

そして，ありがたいことに，この記事で意図している機能を実現する手助けをしてくれるのだ。

とても簡単なので，修正後のコードをまるごと提示しよう：

```rb:open_site.rb
require "launchy"

names = %w[rubima rurema]
checker = DidYouMean::SpellChecker.new(dictionary: names)

name = ARGV.first
case name
when "rubima"
  Launchy.open "https://magazine.rubyist.net/"
when "rurema"
  Launchy.open "https://docs.ruby-lang.org/ja/"
else
  puts "Unknown"

  candidates = checker.correct(name)
  unless candidates.empty?
    puts "Did you mean?"
    candidates.each do |candidate|
      puts "  #{candidate}"
    end
  end
end
```

簡単に説明する。
まず受け付ける文字列の配列を元に `DidYouMean::SpellChecker` オブジェクトを作っておく。
そして，そいつの `correct` メソッドを呼び出す。すると候補の文字列の配列が返る。
近い文字列が存在しないときは空配列が返る。
ただそれだけ。
メール受信プログラム作ったときのまとめ（マルチパートとMIME）

# POPサーバよりメールを受信してWebAPIで外部システムへ連携するプログラムを作成

半分仕事、半分趣味でメールを外部システムに連携するプログラムを作ろうと思った。強制の仕事ではないので、じっくりと調べられた。せっかくなので、後で見たときに忘れないように、まとめてみる。

メールの仕様についてまとめてみたので言語依存はしないと思うが、引用や参考URLはPHPのプログラムサンプルとなっているので、ご注意を。

# マルチパートの構造について

テキストとHTMLとマルチパートでメールが送信される場合、ヘッダ部に続いているボディー部が、テキストパート、HTMLパートに分かれる構造となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274506/791fa955-2fd8-4a5c-c5cf-f0129ab07fd3.png)
**引用**
[HTMLメールとテキストメールを同時に送信するマルチパートメールとは](https://q.hatena.ne.jp/1394702372)

ここに添付ファイルや絵文字が含まれた場合のマルチパートの構造については、入れ子構造をとった複雑な構造となる。メールヘッダ部の「Content-Type」で内容を判別できるが、再帰処理が必要になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274506/e54be11f-ea50-b009-2eca-096e30ae71e7.png)

**引用**
[メールヘッダー。～ファイルを添付したらどうなるの？～](http://labs.opentone.co.jp/?p=1359)

メールの解析については、下記の解説を読むと詳しく記載されている。
-[メールを分解する。の解説。](https://shiranuik.hatenablog.jp/entry/20100624/1277391796)

##参考
- [php]Gmailから送信されたメールの本文が取得できません<br/>
https://q.hatena.ne.jp/1394702372

# メールヘッダに日本語を含めるには

受信メールの解析ライブラリで自動的に判別することが多いと思うが、ライブラリ自体のバグでうまく変換できないこともありえる。日本語（8bit）をメールヘッダで利用する場合は、下記の様な仕様となる。

```
 =?文字セット?エンコード方式?エンコード後の文字列?= 
```
>
文字セットには、メール本文と同様「UTF-8」や「ISO-2022-JP」といった値が入り、エンコード方式には、Base64の場合「B」、Quoted-Printableの場合「Q」いずれかの値が入ります。上述の本文のエンコード方式で利用できる「7bit」（無変換）に相当するものはありません。「B」と「Q」の使い分けについてはRFC 2047が参考になると思います。

**引用**
- [日本語メールの仕組み](https://sendgrid.kke.co.jp/blog/?p=10958)

# MIME関連のメールヘッダ一覧
おもな設定値と概要を一覧にまとめた。詳細は下記URL参照。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274506/c1e5f5ab-c997-22e8-6716-d5255c454ba7.png)

**引用**
- [MIME関連のメールヘッダ一覧](https://www.atmarkit.co.jp/fnetwork/rensai/netpro03/mail-header-mime.html)

# 別のアイデアとして・・・
サーバ上では、POPやIMAPからデータ取得し、WebAPIで外部システムに連携する。外部システム側で各データに分けるような方式もよいかもしれない。メールのデコードがあればと思って探せればよかったが、さくっと調べた感じだとなかったので、今回はあきらめた。

## 参考
- [javascriptで文字コード変換](https://qiita.com/weal/items/3b3ddfb8157047119554)


# メモ

- [POP3（Post Office Protocol version 3）：インターネット・プロトコル詳説（7）  ＠IT](https://www.atmarkit.co.jp/ait/articles/0106/05/news001.html)
- [メールアドレスをBase64でエンコードして、jQueryで実装](https://qiita.com/schabibi/items/43bdc7c85a5e8bcf1df4)
- [Mail_mimeDecode で base64 デコードできないメールがあった](https://qiita.com/1000k/items/2f3105f06cfeada5b348)
- [日本語メールの仕組み](https://sendgrid.kke.co.jp/blog/?p=10958)
- [86. stdinからのメール処理でメール情報を取得する](https://xtech.nikkei.com/it/article/COLUMN/20080508/301027/)
- [PHPでメールの中身をフルに分解して出力する（日本語＆添付ファイル対応）](https://www.meiseid.co.jp/article/mail-full-decode-use-php)
- [PHPで添付ファイル付きのメールを送信する](https://complesso.jp/1203/)
- [Content-Transfer-Encoding【メールヘッダ】](https://wa3.i-3-i.info/word11117.html)
- [コンテンツ変換](https://docs.microsoft.com/ja-jp/exchange/mail-flow/content-conversion/content-conversion?view=exchserver-2019)
herokuデプロイ

url:
https://devcenter.heroku.com/articles/getting-started-with-python#set-up

### heroku cli install
```
brew tap heroku/brew && brew install heroku
```

### heroku login
```
heroku login
```

### sample クローン
```
git clone https://github.com/heroku/python-getting-started.git
cd python-getting-started
```

### app作成
```
heroku create
```

### push
```
git push heroku master
```
### 起動
```
heroku ps:scale web=1
```

```
heroku open
```


### ※ remote設定
```
heroku git:remote -a (app名)
```
Ruby on Rails チュートリアル 24日目

今日はほんの少し残っていた13章を終わらせてから14章の[14.2.2 統計と [Follow] フォーム](https://railstutorial.jp/chapters/following_users?version=5.1#sec-stats_and_a_follow_form)まで終わらせました。
ようやく終わりが見えてきました。明日で終われるように頑張っていこうと思います。
Rails モデルを紐付ける「関連(Association)」

#関連（Associationとは）
データベース上の紐付けを前提にして、モデルクラス同士の紐付けを定義することができる。
これにより、オブジェクト指向に沿った方法で関連するデータにアクセスすることができるようになる。

```models/user.rb
class User
  has_many :tasks
end
```
```models/task.rb
class Task
  belong_to :user
end
```
Userが親分、Taskが子分のイメージ。一つのUserに対して多くのTaskがぶら下がっていることを定義している。
##何ができる？
この定義によってUserクラスのインスタンスに対しては、user.tasksといったメソッドで紐づいたTaskオブジェクトの一覧を得られることができる。

例） ログインしているユーザーのTaskデータの登録

```task_controller.rb
def create
  @task = current_user.tasks.new(task_params)
end
```
#参照
[【初心者向け】丁寧すぎるRails『アソシエーション』チュートリアル【幾ら何でも】【完璧にわかる】🎸](https://qiita.com/kazukimatsumoto/items/14bdff681ec5ddac26d1)
ゼロから始めるLeetCode Day17「169. Majority Element」

#概要
海外ではエンジニアの面接においてコーディングテストというものが行われるらしく、多くの場合、特定の関数やクラスをお題に沿って実装するという物がメインである。

その対策としてLeetCodeなるサイトで対策を行うようだ。

早い話が本場でも行われているようなコーディングテストに耐えうるようなアルゴリズム力を鍛えるサイト。

せっかくだし人並みのアルゴリズム力くらいは持っておいた方がいいだろうということで不定期に問題を解いてその時に考えたやり方をメモ的に書いていこうかと思います。

[Leetcode](https://leetcode.com/)

[ゼロから始めるLeetCode 目次](https://qiita.com/KueharX/items/6ee2502c3b620c795b70)

前回
[ゼロから始めるLeetCode Day16 「344. Reverse String」](https://qiita.com/KueharX/items/27554500d3c7b2347b4c)

基本的にeasyのacceptanceが高い順から解いていこうかと思います。

# 問題
[169. Majority Element](https://leetcode.com/problems/majority-element/)

難易度はeasy。Top 100 Liked Questionsからの抜粋ですね。

与えられた`n`のサイズ配列の中で過半数を占める要素を見つけなさいというものです。
なお配列は空ではなく、過半数の要素が常に存在するものとする。

>Example 1:
Input: [3,2,3]
Output: 3

>Example 2:
Input: [2,2,1,1,1,2,2]
Output: 2

両方とも過半数を占める物を返しています。

# 解法
組み込み関数`count`を使うのも良いですが、Pythonには`Counter`関数があるのでそちらを使った方が簡単かと思います。

なお、両者の違いとしては、

```Python
# count:importしなくても使える。各要素の個数を数える。
nums = [2,2,1,1,1,2,2]
print(nums.count(0))
# 0

print(nums.count(1))
# 3

print(nums.count(2))
# 4
```

```Python
#counter:importしないと使えない。出現回数が多い順に要素を取得できる。
from collections import Counter
nums = [2,2,1,1,1,2,2]

num = collections.Counter(nums)

print(num)
# Counter({2: 4, 1: 3})

print(type(c))
# <class 'collections.Counter'>

print(issubclass(type(c), dict))
# True
```

といったような違いがみられます。今回は過半数を占めるものを返せばいいので`counter`を使って考えます。

```Python
from collections import Counter
class Solution:
    def majorityElement(self, nums: List[int]) -> int:
        ans =  collections.Counter(nums)
        return ans.most_common(1)[0][0]
#Runtime: 172 ms, faster than 79.63% of Python3 online submissions for Majority Element.
# Memory Usage: 15.1 MB, less than 7.14% of Python3 online submissions for Majority Element.
```

最初はans.keys()[0]でいけんじゃね？って思ってましたがdictionaryはそれだとエラーになるんですね・・・
なのでCounterに含まれているmost_common()メソッド((要素, 出現回数)という形のタプルを出現回数順に並べたリストを返す)を使ってシンプルに書きました。

良さげな方法が他にあれば追記します。
#Vue ( #Nuxt 環境) 複数選択可能なselectでv-modelを利用する、初期値を配列で指定する例 – form select multiple  v-model bind code example 

## Code

```vue
<template>
  <div>
    <h1> v model selected </h1>
    <select v-model="selected" multiple>
      <option>AAAAA</option>
      <option>BBBBB</option>
      <option>CCCCC</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: ["BBBBB"]
    }
  },
}
</script>

<style>
body {
  padding: 1em;
}
</style>

```

![image](https://user-images.githubusercontent.com/13635059/81025759-a57d5a00-8eb2-11ea-81bd-be78056ea513.png)
![image](https://user-images.githubusercontent.com/13635059/81025760-a615f080-8eb2-11ea-941e-668a86b30173.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3145











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Google Document と Google Spreadsheet でリッチテキストをやりとりしたい

# 背景

![fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133383/d4440245-efb1-0284-7f82-125c5871b3e6.png)

Google Spreadsheet のセル内にはテキストスタイル付きのリッチテキストを入力することができます。Spreadsheet service には [Class RichTextValue](https://developers.google.com/apps-script/reference/spreadsheet/rich-text-value) や [Class RichTextValueBuilder](https://developers.google.com/apps-script/reference/spreadsheet/rich-text-value-builder) がありますが、残念ながらこれらを使ってもセル内のリッチテキストを直接 Google Document へコピーすることはできない仕様です。逆も同じです。そこで、このようなリッチテキストをスクリプトを使って Google Document と Google Spreadsheet 間でシームレスにやりとりするための GAS ライブラリを作成しました。

リポジトリは[こちら](https://github.com/tanaikech/RichTextApp)です。

# ライブラリのプロジェクトキー

```
1Ka6RcIG6G9P8AhkJtjy1DAnHk1_rShFPWtdCQ2bxwMsrRE8cfn0cDXBv
```

インストール方法は[こちら](https://developers.google.com/apps-script/guides/libraries)でご確認いただけます。

# 使用方法

ご使用中の GAS プロジェクトへライブラリをインストールした後、下記のサンプルスクリプトを使用することができます。

## Google Document ---> Google Spreadsheet

このサンプルスクリプトでは、Google Document の内容がリッチテキストとして Google Spreadsheet のセルへコピーされます。

```javascript
function DocumentToSpreadsheet() {
  // From
  var doc = DocumentApp.openById("###");

  // To
  var ss = SpreadsheetApp.openById("###");
  var sheet = ss.getSheets()[0];
  var range = sheet.getRange("A1");

  var res = RichTextApp.DocumentToSpreadsheet({ range: range, document: doc });
  console.log(res);
}
```

## Google Spreadsheet ---> Google Document

このサンプルスクリプトでは、Google Spreadsheet のセルのリッチテキストが、Google Document へコピーされます。

```javascript
function SpreadsheetToDocument() {
  // From
  var ss = SpreadsheetApp.openById("###");
  var sheet = ss.getSheets()[0];
  var range = sheet.getRange("A1");

  // To
  var doc = DocumentApp.openById("###");

  var res = RichTextApp.SpreadsheetToDocument({ range: range, document: doc });
  console.log(res);
}
```

## 注意点

このライブラリは、V8 が有効であることを前提としています。
#Vue ( #nuxt 環境 ) で v-model を使って input 入力の文字列を template の変数として利用する簡単な例

# NOTE

[フォーム入力バインディング — Vue.js](https://jp.vuejs.org/v2/guide/forms.html)

# Code

```vue
<template>
  <div>
    <h2>
      {{ message }}
    </h2>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "Please change message"
    }
  },
}
</script>

```

# View
![image](https://user-images.githubusercontent.com/13635059/81025393-75818700-8eb1-11ea-80cc-4fc1aed026c2.png)
![image](https://user-images.githubusercontent.com/13635059/81025394-761a1d80-8eb1-11ea-955a-0ca249364fbd.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3144











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
AWS Lambda関数コードの参照とダウンロードをブロックする方法

# Lambda特有の情報漏洩リスク
AWS Lambdaベースのサーバレスアプリケーションならではの情報漏洩リスクとして、AWSマネジメントコンソールまたはAWS CLI経由で関数のコードが漏洩したり、zipファイルごとダウンロードされるケースが考えられます。

AWS CodeCommit等リポジトリ側の情報漏洩リスクに比べて、Lambda関数 (Function) 自体の情報漏洩リスクは言及すらされずに放置されるケースが多いようで、以下に備忘を兼ねてまとめてみました。

# 対応策
IAMユーザが上記の操作をしてもブロック (拒否) するためには、以下のIAMポリシーを設定します。

```json:IAMPolicy
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "DenyDownloadLambdaFunctionCode",
            "Effect": "Deny",
            "Action": "lambda:GetFunction",
            "Resource": "*"
        }
    ]
}
```

# 効果
AWSマネジメントコンソールの「設定」タブでは、本来は以下画像のDesignerより下に表示されるはずのLambda関数コード等の詳細情報が、全く表示されなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211986/dedb4e54-e8b7-ada3-7be8-ebe6359218d4.png)

また、Lambda関数をzipファイルでダウンロードできなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211986/5c7630a3-3507-895e-68c6-4b20dd7f2d39.png)

# 補足
* IAMユーザ・グループ単位で設定すれば、特定のユーザ・グループのみ適用できます。
* AWS OrganizationsやIAM Permissions Boundaryを併用すると、一元的に権限を適用できます。
* **Lambda関数としてデプロイされたコードの対策**であり、デプロイ前のコードについては別途対策が必要です。

# 参考文献
* [GetFunction](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/API_GetFunction.html) (From AWS Lambda 開発ガイド)
【JavaScript】Dateオブジェクトの時刻を操作

#【JavaScript】Dateオブジェクトの時刻を操作

以下の記事ではDate()を使い、現在時刻を取得する方法を記載しました。

【JavaScript】Dateオブジェクトで現在時刻を取得
https://qiita.com/kuro_96/items/d7aa9c97f941d02e8366

本記事では発展させ、取得した時刻を操作する方法について書きます。

##setFullYear
Dateで取得した定数、変数に対して.setFullYear(変更後の西暦年)とすることで西暦年を書き換える。

```js

    const d = new Date();
    console.log(d);　//Mon May 06 2020 09:54:38 GMT+0900 (日本標準時)

    d.setFullYear(2019);
    console.log(d);　//Mon May 06 2019 09:54:38 GMT+0900 (日本標準時)//2019年に変更
```

##setMonth
.setMonth(変更後の月-1)

```js

    d.setMonth(0);//1月に変更
    d.setMonth(1);//2月に変更
    d.setMonth(11);//12月に変更
```

##setDate
.setDate(変更後の日)
自動変換の機能がある。

```js

    d.setDate(1);//1日に変更
    d.setDate(2);//2日に変更
    d.setDate(32);//31日までの月なら翌月の1日に自動変換してくれる
```

以下、例は省略します。

##setHours
.setHours(変更後の"時")

##setMinute
.setMinutes(変更後の"分")

##setSeconds
.setSeconds(変更後の"秒")

##setMilliseconds
.setMilliseconds(変更後の"ミリ秒")

##setTime
.setTime()

UTC)1970年1月1日00:00:00 からの経過時間をミリ秒単位で表す時刻に設定。
タイムゾーンの影響を受けずに時刻を取得したい場合に用いる

##Date(西暦年, 月-1)
Date(西暦年, 月-1)で指定年月の月初を取得
Date(2019, 2)とすると2019/3/1 00:00:00

```js

    const d = new Date(2019,2);
    console.log(d);//Fri Mar 01 2019 00:00:00 GMT+0900 (日本標準時)
```
windows python初歩備忘録

# windows python のパス
cmdからpythonを実行してもpathを認識してないから、だめなとき
```py```
実は、c:\windows\py.exeでpythonをたたいてくれる
だから、pathを通さなくていい

# pip
cmdからpipを実行してもダメっぽい
script\pip.exeがパスらしい
しかし、面倒なので、下記で実行
```py -m pip```
you shuold upgrade と言われたので
py -m pip install --upgrade pip
Lubuntuで自宅IPの変更通知

#目的
1. 自宅のグローバルIPアドレスが変更されたら通知
2. 通知方法はEメール
3. 送信サーバーはGmailを使用

#環境
- Lubuntu 18.04

#作業内容
##Global IPを取得する
- [第9回　グローバルIPアドレスを通知する | shell-mag - Part 6](https://shell-mag.com/rensai-shellscript1-9/6/)

上記サイトより、Global IPの取得方（といううか、ほとんど全部）のお知恵を拝借しました。ありがとうございます。
シェルマグさんではLINEを使ってますが、私はメールがいいので、その辺は別からお勉強させていただきました。
よって、

```
gip_filename="/home/USER/ip/global_ipaddress"
gip_log="/home/USER/ip/logs/global_ip.log"
current_ip=$(curl -s ifconfig.io)
#global_ip="hoge" # For Debug
global_ip=$(cat ${gip_filename})

if [ ${current_ip} != ${global_ip} ]; then
    datetime=$(date "+%Y%m%d%H%M%S")
    echo ${current_ip} > ${gip_filename}
    echo "${datetime} : ${current_ip}" >> ${global_ip.log}

    #メール送信
fi
```

という形になりました。
後々いつIPが変わったか分かるように、比較用ファイルの他にlogファイルにappendするようにしました。

##メールで通知する
###どうやって送るか -> ssmtp
- [Ubuntu 16.04 コマンドラインから Gmail 送信 | off](https://off.tokyo/blog/ubuntu-mail-send/)

を参考にさせて頂きました。詳細は↑をご覧ください。掻い摘んでちょっとだけ

```
sudo apt-get -y install ssmtp
sudo vi /etc/ssmtp/ssmtp.conf
```

以下を追記

```
#/etc/ssmtp/ssmtp.conf

mailhub=smtp.gmail.com:587
AuthUser=アカウント@gmail.com
AuthPass=パスワード
UseSTARTTLS=YES
```

その後は、Googleアカウントから **安全性の低いアプリのアクセスをオンにする** で準備完了

###スクリプトにメール送信を追加
if文内の `#メール送信` 以下に追記

```
#/home/USER/ip/ip_notifyer.sh

    filename="/home/USER/ip/logs/mail_${datetime}.txt"
    touch ${filename}

    echo "From: アカウント@gmail.com" > ${filename}
    echo "To: 宛先メアド" >> ${filename}
    echo "Subject: Detected IP Address Change" >> ${filename}
    echo "" >> ${filename}
    echo "Detected IP address change. The new IP address is ${current_ip}" >> ${filename}

    /usr/sbin/sendmail -i -t < ${filename}
```

これでIPが変わった時にメールが送信されます。
こちらも送った内容を保存してます。そのうち止めるかもだけど。

##自動実行
監視してもらうために、作ったスクリプトをcron実行します。

```
crontab -e

#以下追記
*/10 * * * * /bin/bash /home/USER/ip/ip_notifyer,sh
```

これで10分毎にIPチェックしてくれますね。
IP変わらないから、`/home/USER/ip/global_ipaddress`の中身をいじって待機。無事に変更が検出されてメールが飛んできました。

#結果
とりあえず、これでIPの変更がどこでも分かるようになりました。
RDPとかで家PCにアクセスしたい人はいいのではないでしょうか。
Dtoに直接「更新者ID」と「登録者ID」を突っ込むデコレータ

```typescript

import { GqlExecutionContext } from "@nestjs/graphql";
import { createParamDecorator, ExecutionContext } from "@nestjs/common";

export const Dto = createParamDecorator(
  (data: string, context: ExecutionContext) => {
    const ctx = GqlExecutionContext.create(context);
    const args = ctx.getArgs();
    const user = ctx.getContext().req.user;
    // TODO これでぶっ込めるけど、型もあったもんじゃないし
    // updateの時はuseridはいらねーな
    // じゃあ、updateDtoとcreateDtoをつくるか？
    // 本当は@Argsを利用したい
    args[data].createdUserId = user.userId;
    args[data].modifiedUserId = user.userId;
    return args[data];
  },
);
```
mac vscodeでpythonをインストール



###VSコードの拡張機能からインストールする。
拡張機能でpythonと検索すると表示される。

<img width="1792" alt="スクリーンショット 2020-05-06 9.51.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215898/da618eb9-e0e1-a3b9-f616-83f53d579e2e.png">

###コードチェッカーのpylintのインストール

```
>$ /usr/local/opt/python/bin/python3.7 -m pip install -U pylint --user
```

<details><summary>結果</summary><div>

```
Collecting pylint
  Downloading pylint-2.5.2-py3-none-any.whl (324 kB)
     |████████████████████████████████| 324 kB 1.3 MB/s 
Collecting astroid<=2.5,>=2.4.0
  Downloading astroid-2.4.1-py3-none-any.whl (214 kB)
     |████████████████████████████████| 214 kB 4.6 MB/s 
Collecting mccabe<0.7,>=0.6
  Downloading mccabe-0.6.1-py2.py3-none-any.whl (8.6 kB)
Collecting isort<5,>=4.2.5
  Downloading isort-4.3.21-py2.py3-none-any.whl (42 kB)
     |████████████████████████████████| 42 kB 1.4 MB/s 
Collecting toml>=0.7.1
  Downloading toml-0.10.0-py2.py3-none-any.whl (25 kB)
Collecting six~=1.12
  Downloading six-1.14.0-py2.py3-none-any.whl (10 kB)
Collecting lazy-object-proxy==1.4.*
  Downloading lazy_object_proxy-1.4.3-cp37-cp37m-macosx_10_13_x86_64.whl (19 kB)
Collecting typed-ast<1.5,>=1.4.0; implementation_name == "cpython" and python_version < "3.8"
  Downloading typed_ast-1.4.1-cp37-cp37m-macosx_10_9_x86_64.whl (223 kB)
     |████████████████████████████████| 223 kB 1.4 MB/s 
Collecting wrapt~=1.11
  Downloading wrapt-1.12.1.tar.gz (27 kB)
Building wheels for collected packages: wrapt
  Building wheel for wrapt (setup.py) ... done
  Created wheel for wrapt: filename=wrapt-1.12.1-cp37-cp37m-macosx_10_15_x86_64.whl size=32489 sha256=0a297079160037e04b26df3cbb8b03dbcee72c24a5bf70e57c0378900d80b4e9
  Stored in directory: /Users/Nagate/Library/Caches/pip/wheels/62/76/4c/aa25851149f3f6d9785f6c869387ad82b3fd37582fa8147ac6
Successfully built wrapt
Installing collected packages: six, lazy-object-proxy, typed-ast, wrapt, astroid, mccabe, isort, toml, pylint
  WARNING: The script isort is installed in '/Users/nagate/Library/Python/3.7/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
  WARNING: The scripts epylint, pylint, pyreverse and symilar are installed in '/Users/nagate/Library/Python/3.7/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
Successfully installed astroid-2.4.1 isort-4.3.21 lazy-object-proxy-1.4.3 mccabe-0.6.1 pylint-2.5.2 six-1.14.0 toml-0.10.0 typed-ast-1.4.1 wrapt-1.12.1
```

</div></details>


###参考
[VSCodeでPython開発構築の備忘録
](https://qiita.com/Toyoizumi-Hiroyuki/items/db8709e3dd821750d570)[Visual Studio Code で Mac に Python 開発環境を整える
](https://daeudaeu.com/programming/python/development-environment/vscode/)[Pythonの開発環境を用意しよう！（Mac）
](https://prog-8.com/docs/python-env)
[VS codeでpython3の実行(windows10)](https://qiita.com/aki34/items/6d5e4f5d6036b9bcd63e)
task_pramsメソッドとは

#task_paramsメソッドとは
登録アクションなどに使われるメソッド。
フォームからリクエストパラメータとして送られてきた情報の中から必要な情報だけを抜き取る役割がある。
悪意あるユーザーが有害なデータを送ってきた時に、不正なデータによって登録・更新されるのを防ぐことができる。

```task_controller.rb
def create
 task = Task.new(task_params)
 task.save!
end

private

def task_params
 params.require(:task).permit(:name, :description)
end
```
（意味）
task_paramsメソッド： taskオブジェクトからnameとdescriptionを取得。
create: task_paramsを引数としてtaskインスタンスを作成。save!メソッドでデータベースに保存。
ポートの使用が重複しているときの対処（Windows）

#はじめに
Web開発していると、裏でプロセスが生きていて、ポートが重複してしまうことはよくあります。

>The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured.

今回はポートを使用しているプロセスの調べ方です。

#1.ポートを使用しているPID（プロセスID）を調べる。
まずは、ポート8080を使用しているPIDを調べます。

```none
netstat -nao|find "8080"
```
オプションの意味は以下です。

 * a-> すべての接続を表示する。
 * o-> PIDを表示する。
 * n-> アドレスとポート番号を数値形式で表示する。

こんな感じで表示されます。一番右にあるのがPIDです。今回は「10536」です。
![2020-05-06_09h50_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/7ae24185-1b3c-713d-fdd9-9e79e7c8b272.png)


#2.PIDからアプリケーションを調べる。
PIDがわかれば、次にPIDからどのアプリケーションで使用されているかを調べます。

```none
tasklist /fi "pid eq 10536"
```
オプションの意味は以下です。

* /fi-> 条件で絞り込めます。
* pid-> pidで一致させます。
* eq -> 演算子「=」と同じです。

こんな感じで表示されます。nodeが専有してましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/01a093e9-571c-f213-a9af-1d1b8651fdbd.png)

最後に削除すれば解決です。

```none
taskkill /F /PID 10536
```

以上です。
ほとんど自分用のメモでしたが参考になれば幸いです。
SwiftUIで作るシンプルなログイン画面

GW中にSwiftUIで何かアプリを作るという個人目標を立てて、実際に作成した際に得られた知見を共有します。

今回は最低限の見た目のログイン画面の構成を紹介したいと思います。

## 実行環境
- Xcode 11.4.1
- macOS 10.15.4
- iOS 13.4.1

※ 2020年5月段階

## 完成品

App名、 入力フォーム、ログインボタンのシンプルな構成
App名をロゴに変えるなり、行間詰めたりなどはプロパティいじって調整してください

### ライトモード

<img width="375" alt="Simulator Screen Shot - iPhone SE (2nd generation) - 2020-05-06 at 09.36.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147358/4daec550-2554-b889-eb33-2708b86d1e47.png">

### ダークモード

<img width="375" alt="Simulator Screen Shot - iPhone SE (2nd generation) - 2020-05-05 at 23.17.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147358/d6028430-bba5-e064-ec57-8f5b8af3e714.png">

自動でダークモード対応&多端末のレイアウトに対応してくれます。


## コード

```swift

import SwiftUI

struct LoginView: View {
    @State var inputEmail: String = ""
    @State var inputPassword: String = ""
    
    var body: some View {
        NavigationView {
            VStack(alignment: .center) {
                Text("SwiftUI App")
                    .font(.system(size: 48,
                                  weight: .heavy))
                
                VStack(spacing: 24) {
                    TextField("Mail address", text: $inputEmail)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 280)
                
                    SecureField("Password", text: $inputPassword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 280)
                        
                }
                .frame(height: 200)
                                
                Button(action: {
                   print("Login処理")
                },
                label: {
                    Text("Login")
                        .fontWeight(.medium)
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                })
                               
                Spacer()
            }
        }
    }
}

```

UIKit時代を知っている身からすると凄くスッキリしてて、初学者やデザイナーでも理解しやすいですね。
Storyboardから脱却してコードのみで画面構成したいと思っていたけど、AutoLayoutの煩雑さやレイアウトの確認の手間などから出来てなかった自分からするとこれは革命的ですね。

おまけにグリッドレイアウトかつ宣言的シンタックスはReactなどのWeb界隈のフロントエンドの流れにも沿っていて親和性が高いかと。

ちょっと戸惑ったのは初期のころに触ったころは`margin`があったと思ったのだが、VStackの`spacing`に置き換わった気がしたけどどうだろう？
ボタンの中身の見た目を変える方法がググると色々出てきましたが、個人的には中身のTextビューを弄るのが1番シンプルかと思います。


## SwiftUIのこれから
2019年の6月にSwiftUIが発表されてすぐに触った頃よりプロパティや諸々のインターフェイスなどが変更されていたり、日本語の技術情報が少ないので少々手こずりましたが、Obj-CがSwiftに置き換わったようにこれからメインの開発はSwiftUIに移行していくと思っております。
現状、UIKitを使わないと実現できない実装があったり、込み入ったことをするのに向いていませんが、それもこれから解消されていくと思います。
それこそ来月のWWDCでSwiftUIは大きいアップデートがあると踏んでいます！
Heroku Postgresql からデータをバックアップ

### バックアップをダウンロード（CLI）
[Importing and Exporting Heroku Postgres Databases](https://devcenter.heroku.com/articles/heroku-postgres-import-export)

```
heroku pg:backups:capture
heroku pg:backups:download
```
一行目でバックアップを作成し、二行目でダウンロードする。
これでコマンドを実行した階層と同じところにlatest.dumpというファイルがダウンロードされる
### バックアップをダウンロード（管理画面）
バックアップを作成
Durability→Capture Backup
ダウンロード
Download

### 中身の確認方法
[HerokuのPostgreSQLにログインしてSQLを直接実行する。](https://qiita.com/ucan-lab/items/fb74af3d78e71407db7b)
[[PostgreSQL] よく使うコマンドまとめ](https://dev.classmethod.jp/articles/postgresql-organize-command/)

```
heroku pg:psql
```

|機能|コマンド|
|:--:|:--:|
|テーブル一覧|\d|
|テーブルの構造の詳細を表示|\d TABLE_NAME|
|テーブルの中身を取得|SELECT * FROM テーブル名;|
|データベースから出る|\q|
|データベース一覧表示|\l|
|ローカルでサーバーを立てる時|postgres -D /usr/local/var/postgres|


参考
-
[Heroku Postgres を利用してみよう](https://qiita.com/shosho/items/5ebabf11efb1f3b604f7)
【超初級】【お疲れ中級】「コマンドが見つかりません」「command not found」と表示されたとき　

## はじめに
CentOSを導入して、``ls`` ``update`` ``pip``、、、いろいろとセットアップしていると、突然、「コマンドが見つかりません」の連発、ネットを探るも**まさか**の原因。ちょっと恥ずかしいですが、書き留めておきます。私はこれで半日潰れました。。。

## 結論（恥ずかしい。情けない。）
コードブロックのコピーをクリックして、コマンドラインにペースト。実行。　→　コマンドが見つかりません
下記の例の右上にカーソルを持っていくと、![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362672/7d0825af-66fc-5c20-ac4a-5b3287de4738.png) こんなの出ません？これを押すとコピペできます。

```ruby:例
$ sudo apt-get update
```

正解は、``$``が先頭に引っ付いていた。これを消せば問題なし。
コードブロックのコピーボタンでは、$までコピーされます。

## コマンドが見つからないときの対処方法
ネットを探って出てくるものなので、ここでは列挙だけしておきます。
普通はここで解決です。
1. PATH　：　環境設定で追加
2. PATHを設定したあと、再起動かすぐに有効にさせるコマンド実行
3. インストールされていない　：　特定のコマンドで発生
4. **コピペしたら、先頭の``$``を消して実行**

## あとがき
コマンドを見ながら自分で入力していた間は問題なく動作してました。
そして、カーソルでコマンドをなぞって選択し、コピペしていることが多かったので、先頭の``$``はもちろん選択していません。
この段階まで問題なし。
コードブロックのコピーボタンを知ってから、やっちゃいました。
失敗(￣△￣；）
掲示板アプリに空の投稿を出来ないように制限をかける

【開発環境】
macOS Catalina
バージョン 10.15.3
ruby 2.5.1
Rails 5.2.4.2
visual studio code

勉強用に掲示板アプリを作成したので、その際に行ったバリデーションを記載します。
#バリデーションを設定し、空の投稿を制限しよう
掲示板アプリなどで空の投稿が出来てしまうというのは望ましくありません。
それを防ぐためにバリデーションを設定する必要があります。

##バリデーションとは？
バリデーション(validate)とは、データをDBに保存する前に無効なデータが保存されないように制限する機能のことです。

バリデーションの基本的な書き方です。

```
validates :カラム名(シンボルで指定),チェックの方法
```
##投稿機能にバリデーションを設定する
今回作成した掲示板アプリの投稿(post)のカラムはタイトル(title)と内容(content)です。
この二つのカラムが空の場合投稿できないようにバリデーションを設定します。

バリデーションはデータをDBに保存する前に行うので、モデルに記載する必要があります。
今回は投稿機能へ行うので、post.rbに記載します。

```post.rb
class Post < ApplicationRecord
  validates :title, presence: true
  validates :content, presence: true
end
```
presenceは空のデータを保存することを防ぐことができます。

空の投稿をしようとしてもできなくなりました。
[![Image from Gyazo](https://i.gyazo.com/fc2ebb90b776c1e750a9e6c2a67fad9c.gif)](https://gyazo.com/fc2ebb90b776c1e750a9e6c2a67fad9c)

#おわりに
今回はpresenceだけしか使っていませんが、チェック方法は他にもありますので、どんどん学んでいきたいと思います。
間違いなどございましたらご指摘いただければ幸いです。
最後まで読んでいただきありがとうございました。
コロナ＋リモートワークのお陰で、自分のＩＴスキルが伸び始めたという話（２）

話の続き
https://qiita.com/motochan1969/items/cc2922511e9b39e09e12

#このGW中に学んだこと

いろいろある。

実は、この連休前に勉強しなければならないタスクがあって、
それは仕事で作成しているツールの話であるが
（余談だが、会社ではシステム系のモノをすべて、ツールと呼んでおり
フタを開けたら、VBAを仕込んだEXCELだったり、
EXCELにマクロが入ったものだったり、単なるEXCELのピボットだったり）

　要するに、人がEXCELを触って何かをするのに
ちょっと塩を振ったりして、味付けされたものをツールと呼んでいる。

　つまり、何が言いたいのかと言えば、要するに中身で何をやっているのかは
問わず、アウトプットが便利だったらいい・・・
　という価値しか、誰にも認められない、やりきれない職場である。

#振り返り

　さて、こんな職場で、ＩＴエンジニアとしてのキャリアを積もうというのであるから
とんでもない苦労を強いられている。
（何せ、EXCELで出来て当然のスケジュールや、タスク管理を、
わざわざWEBベースのアプリケーションを構築しようなんて言うのは、
趣味以外の何物でもなく、そのスキル習得は休日を返上して取り組まなけばならない）

　そんな訳で、我がコロナが今回の連休中のプログラム学習の
良い機会を提供してくれたわけで・・・
（これに喜んでいるエンジニアは多いのではないかと思う。
リモートワークで通勤時間も節約できて、それに社会全体が
今後のＩＴ化の後押しになるのであるから、ＩＴ企業さまさまの
世の中になってきている。

　ちなみに、今回のコロナ騒ぎの中で、特にYOUTUBEの動画関係の
動向がかなり変わってきたように思う。
　最初は、コロナねたは殆ど無かった状況で、まず中国関係や、イタリア関係の
情報発信していた方々が、コロナ中心のネタに代わり、
　そして、後発的に医療関係者など、これまで動画での情報発信を
していなかった人たちが、こぞってYOUTUBEに参入して、
　最近になってくると、皆が家にいるものだから、動画配信に注目が集まり、
国会中継のライブ配信や、海外の時事ニュースなどをネットで閲覧したり
かなり、世の中が変わってきたように思える。

　しかしながら、いまなお動画サイトと言えば、Youtubeの独壇場であり、
他に競合できるサイトなどは存在していないし、これからの世の中、
マスコミ等は国産の動画サイトなど、付加価値の高いサービスを
提供しなければ、太刀打ちできない世の中が訪れるのだろう。

　そんな訳で、これからの世の中を見つめると、
総動員してＩＴエンジニアを育成していくのが、
今後の社会の責任であると考えている。

#この連休中に学んだこと

　まずフレームワークに関しての情報収集として、DJANGOから派生したDJANGO-RESTAPIの調査から入ったのであるが・・・
　最近のＷＥＢ業界と言うのは、javascriptエンジニアとバックエンドエンジニアの
分業がすさまじいが、これまでバックエンド側が主体になってきた
サービスの処理が、WEB-API化して、フロントエンド処理を中心にすることが
主体のようである。

フロント側ではシングルｗｅｂアプリケーションといった、
これまで階層構造を奥までほじくるような、ＷＥＢアプリでは無く
縦方向にスクロールすると、情報が上から下まで閲覧できる
いわば新聞の折り込みチラシのようなページが趣向される風潮になっている。

この背景としては、ネットをパソコンで閲覧するよりも、
スマートフォンやタブレットで見る人が多くなってきたことが
影響しているようだ。

　次に、フロント側ではjavascriptの情報を調査して、最初はAngular,React,Vue.Js
などのフレームワークから入り、出口としてはJAVASCRIPTのライブラリ集など
いかに早く立ち上げるのか？に注目した技術を調べていた。

　やはりＩＴエンジニアにとっては、学習コストというものは、
非常に重くのしかかってきており、ちょっとしたライブラリでさえも
学習しなくては使えないのが、非常に苦しく感じる。
（逆を言えば、さっくり実現できる方法を持っているのであれば、
わざわざ新しいフレームワークや、ライブラリを学ぶ必要はないと思える）


#出口の戦略について

　最近、コロナの収束に対して、どのような出口戦略を取るのかが、
世間で注目されているが、自分自身においても、このコロナＧＷにおける
出口戦略と言うものを、そろそろ立てる時期に来ていると感じる。

　テーマとして与えられていたことを整理すると、

１）スケジュール管理
　DJANGOのデータモデルに突っ込んだデータを、いかにブラウザに効率良く表示されるか
　これについては、DJANGO内部で処理をさせるよりも、FE側にJSON形式で返して、
JSの適当なライブラリで処理をした方が良い。

２）パラメータ管理
　画像と設定データを保持したデータベースから、ブラウザで閲覧するには、
シングルページアプリを目指した方が良い。
　そのためには、下記のサイトのようなアプリが今後のトレンドと思った。
https://dev.to/　

　とりあえず、5/10までには上記のアプリのたたき台を完成して、
5/Eの部門異動までに、ドキュメント等の作成、引継ぎまで完了しなくてはいけない。
[GitHub]issueとpull requestのテンプレートを作成する！

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#Issuesテンプレートを作成する
リポジトリに`.github`ファイルを作成する。
ファイル内に`issue_template.md`を作成！
マークダウン形式でテンプレートとして仕様したい内容を記述する。

``` issue_template.md
---
name: default
about: default template
title: 概要
---
# 親Issue

# 要件
  - 変更した内容

# タスク
  - [ ] 
```

#Pull Requestsテンプレートを作成する
ファイル内に`pull_request_template.md`を作成！

```pull_request_template.md
## 親チケット
  - #XXXX

## レビュー情報
  ### 要件(どう変えるのか)
  - 概要
```

これでいけました！

###[Issue作成テンプレート](https://github.com/hirokik-0076/portfolio_site/issues/new)

#参考記事
・[GitHub Issueはテンプレート化で、綺麗に書かせる！](https://qiita.com/yoshimikeisui/items/3e1873e3bf1bbafe8733/)
【JavaScript】Dateオブジェクトで現在時刻を取得

#【JavaScript】Dateオブジェクトで現在時刻を取得

Date()で現在時刻を取得する方法、注意点を整理。

##Date

```js

    const d = new Date();
    console.log(d);
```

曜日 月 日 西暦年 時:分:秒 を取得。
以下はconsole.log(d)の結果。

```js

    Wed May 06 2020 08:11:15 GMT+0900 (日本標準時)
```

定数の名前をdayやdateではなくdとしているのは、以降day,dateは別で使う可能性があるため。

##.getFullYear

```js

    const d = new Date();
    console.log(d.getFullYear());//2020
```

Date()の値に対して、西暦年を取得。

##.getMonth

```js
    const d = new Date();
    console.log(d.getMonth());//4
```

Date()の値に対して、月を取得(0-11)。
1月(January)は0,2月は1,3月は2...となることに注意。
実際の月として取得する場合はday.getMonth()+1が必要。

##.getDate

```js

    const d = new Date();
    console.log(d.getDate());//6
```

Date()の値に対して、日を取得(1-31)。

##.getDay

```js

    const d = new Date();
    console.log(d.getDay());//3…水曜日
```

Date()の値に対して、曜日を取得(0-6)。
日曜日:0,月曜日:1...土曜日:6

##.getHours();

Date()の値に対して、時間を取得(0-23)。

##.getMinutes();

Date()の値に対して、分を取得(0-59)。

##.getSeconds();

Date()の値に対して、秒を取得(0-59)。

##.getMilliseconds();

Date()の値に対して、ミリ秒を取得(0-999)。
1ミリ秒 = 1/1000秒

##使用例

```js

    const d = new Date();
    let year = d.getFullYear();
    let month = d.getMonth()+1;
    let date = d.getDate();
    let day = d.getDay();
    let hours = d.getHours();
    let minutes = d.getMinutes();

    switch(day){
        case 0:
            day = "日曜日";
            break;
        case 1:
            day = "月曜日";
            break;
        case 2:
            day = "火曜日";
            break;
        case 3:
            day = "水曜日";
            break;
        case 4:
            day = "木曜日";
            break;
        case 5:
            day = "金曜日";
            break;
        case 6:
            day = "土曜日";
            break;
    }
```

```js

    console.log(year+"年 "+month+"月 "+date+"日 "+day+hours+"時 "+minutes+"分");
```

または

```js

    console.log(`${year}年 ${month}月 ${date}日 ${day} ${hours}時 ${minutes}分`);
```

これでXX年 XX月 XX日 XX曜日 XX時 XX分と表示できる。

##memo
Chromeのコンソールで試すと文字化けしてしまったので、ローマ英数字で検証した。
meta charaset="utf-8"を書いているのになぜだろう。

RPGツクールMVだとCrSaveTimeValue.js（美波鶴香様）がこの応用でセーブ時刻を記録している。
勉強になりました。
https://plugin.fungamemake.com/archives/19607
【Python】PandasのDataFrameに合計行を追加する

下記２つのいずれかがおすすめ。

```py
def append_sum_row(df):
    return df.append(df.sum(numeric_only=True), ignore_index=True)
```
```py
def append_sum_row_label(df):
    df.loc['Total'] = df.sum(numeric_only=True)
    return df
```

##サンプル

それぞれを使ってみると下記のようになります。
行ラベル（index）の使用の有無によって使い分けると良いと思います。

```py:sample
import pandas as pd


def append_sum_row(df):
    return df.append(df.sum(numeric_only=True), ignore_index=True)

def append_sum_row_label(df):
    df.loc['Total'] = df.sum(numeric_only=True)
    return df

data_frame = pd.DataFrame([
    ["A", 100, 200],
    ["B", 300, 400],
    ["C", 500, 600]
])

print("append_sum_row:", append_sum_row(data_frame), sep="\n")
print("append_sum_row_label:", append_sum_row_label(data_frame), sep="\n")
```

```plaintext:print
append_sum_row:
     0      1       2
0    A  100.0   200.0
1    B  300.0   400.0
2    C  500.0   600.0
3  NaN  900.0  1200.0

append_sum_row_label:
         0      1       2
0        A  100.0   200.0
1        B  300.0   400.0
2        C  500.0   600.0
Total  NaN  900.0  1200.0
```
Vue の emit は カスタムイベントを発生させて 親component の method を実行することが出来る  ( #Vue #Nuxt )

# NOTE

>コンポーネント間のデータのやり取り」では「親から子」にdataを伝達する手段「props」、そして「子から親」にdataを伝達する手段「emit」が存在します。それでは下記にそれぞれの概念について述べてまいります。

https://orizuru.io/blog/vue-js/vue_emit-props/


[カスタムイベント — Vue.js](https://jp.vuejs.org/v2/guide/components-custom-events.html)

# 動作環境

nuxt環境にて

# pages/resetable-counter.vue

```
<ResetCounter @reset-parent-counter="reset"/>
```

この書き方で 子component からのイベントを待ち受けるっぽい
reset-parent-counter という名前のイベントを待ち受ける




```vue
<template>
  <div>
    <h2>
      Count: {{ parentCount }}
    </h2>
    <input type="button" @click="incrementParentCounter" value="Increment Parent">
    <ResetCounter @reset-parent-counter="reset"/>
  </div>
</template>

<script>
import ResetCounter from '~/components/ResetCounter.vue'

export default {
  data () {
    return {
      parentCount: 1
    }
  },
  components: {
    ResetCounter
  },
  methods: {
    incrementParentCounter (e) {
      this.parentCount += 1
    },
    reset (e) {
      this.parentCount = 1
    },
  }
}
</script>

```

たとえば @click= という書き方はクリックのイベントを待ち受ける (トリガーする)
同じ用に @event-name という書き方は、子 component でのカスタムイベントをトリガーにする

ということか、なるほど

# components/ResetCounter.vue


この例では 子componentでボタンを押すと 子componentのメソッドが実行される
子componentのメソッドが実行された時に emit で reset-parent-counter という名前付のイベントを発生させている


```
 this.$emit('reset-parent-counter')
```

```vue
<template>
  <div>
    <input type="button" @click="resetParentCounter" value="resetParentCounter">
  </div>
</template>

<script>
export default {
  methods: {
    resetParentCounter (e) {
      this.$emit('reset-parent-counter')
    }
  }
}
</script>

```

# View

child component のボタンを押して
parent component の counter をリセットできるのが分かる

![image](https://user-images.githubusercontent.com/13635059/81020008-d6ee2980-8ea2-11ea-972a-bf5a86cbe11e.png)
![image](https://user-images.githubusercontent.com/13635059/81020011-d786c000-8ea2-11ea-8308-628364036987.png)
![image](https://user-images.githubusercontent.com/13635059/81020013-d81f5680-8ea2-11ea-8508-5302db049de4.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3143











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
関数について

##関数とは
>頻繫に使われる機能をまとめて、何度でも呼び出せるようにしたもの。
何度でも使われる処理でなくても、処理に名前がつくたびに関数化した方がいい。
関数という名は、数学用語からきている。数学の関数は、ある値を入力すると、一定のルールに従った出力が得られます。
また、入力のできる値の範囲、出力して得られる値の範囲はしっかり決められています。
「C#」の場合、呼び名はメソッドと呼ばれる。

##定義
>`戻り値の型 関数名(引数一覧)
{
    関数本体(具体的な処理)
}`
先頭の**戻り値**の型というのが、関数の出力の型です。
()の中の**引数**一覧というのが、入力の型と入力された値を保持するための変数です。
{}の中身が関数の内部で行う処理です。そして、出力したい値(**戻り値**)は`return`というキーワードの後ろに書きます。

めんどくさいことは一つに詰め込もう!!
#Vue – mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "xxx"

# Guide

https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

# NOTE

You should have like "local variable in child component" by 

copy props to data or use computed

子compnentでpropsの値を直接変更すると、親componentが再描画されたときに上書きされてしまう
かわりに props の値をもととした data や computed として扱おう

# pages/counters.vue

```vue
<template>
  <div>
    <h2>
      parentCount: {{ parentCount }}
    </h2>
    <input type="button" @click="incrementParentCounter" value="Increment Parent">
    <input type="button" @click="reset" value="reset Parent">
    <LocalCounter :count="parentCount"/>
    <LocalCounter :count="parentCount"/>
  </div>
</template>

<script>
import LocalCounter from '~/components/LocalCounter.vue'

export default {
  data () {
    return {
      parentCount: 1
    }
  },
  components: {
    LocalCounter
  },
  methods: {
    incrementParentCounter (e) {
      this.parentCount += 1
    },
    reset (e) {
      this.parentCount = 1
    },
  }
}
</script>

```

# components/LocalCounter.vue

```vue
// https://vuejs.org/v2/guide/components-props.html

// mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "count"


<template>
  <div>
    <h2>
      Count: {{ localCount }}
    </h2>
    <input type="button" @click="incrementCounter" value="Increment!">
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number
    }
  },
  data: function () {
    return {
      localCount: this.count
    }
  },
  methods: {
    incrementCounter (e) {
      this.localCount = this.localCount + 1
    }
  }
}
</script>

```

# View

You can increment each child counter
You can 

![image](https://user-images.githubusercontent.com/13635059/81018337-4235fc80-8e9f-11ea-8275-949cc80a5ea2.png)
![image](https://user-images.githubusercontent.com/13635059/81018338-42ce9300-8e9f-11ea-9aa9-1ee4e760642f.png)
![image](https://user-images.githubusercontent.com/13635059/81018340-43672980-8e9f-11ea-9356-022e4906a1e8.png)
![image](https://user-images.githubusercontent.com/13635059/81018343-43ffc000-8e9f-11ea-9833-9101b8eae3ba.png)


# Warned child component example


```vue
<template>
  <div>
    <h2>
      Count: {{ count }}
    </h2>
    <input type="button" @click="incrementCounter" value="Increment!">
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 1
    },
  },
  methods: {
    incrementCounter (e) {
      this.count = this.count + 1
    }
  }
}
</script>

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3142











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
RPAのムダ使い Python+SeleniumでアイドルのSHOWROOM 50カウントを自動化

### まえがき
動画ライブ配信、視聴が無料で行える[SHOWROOM](https://www.showroom-live.com/)というサイトがある。SHOWROOMでは、日々、アイドル/タレント/お笑い/声優からアマチュアの方まで配信を行っている。SHOWROOMでは、視聴者がコメントしたり、無料もしくは有料のアイテムを配信中に投稿すると、配信者へポイントとして還元される。その還元ポイントの中でもカウントという仕組みがある。視聴者はコメントを投稿する代わりに1から50までの数字をコメント欄に入れて送信すると、コメントしたのと同じポイントが配信者に送付される。筆者も日々、好きなアイドルのSHOWROOMを見に行って、この50カウントを行っているのですが、これが面倒くさい。そこで、このSHOWROOMの50カウントをRPAを使って自動化する事を考えてみた。

###事前準備
自動化には、PythonとSeleniumを使って行って、Windows10とChromeの環境を使う。まず、[Python](https://www.python.org/)をインストールした後、pipを使って、Seleniumを準備する。
![pip-selenium.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606353/b5a16f98-c89c-5453-b4b6-af8845f3e9a1.jpeg)
続いてChromの[WebDriver](https://sites.google.com/a/chromium.org/chromedriver/downloads)をダウンロードして適当なフォルダに展開する。

###開発
SHOWROOMのコメントを送信するHTMLのソースは下記のようになっている。

```HTML:SHOWROOMコメント送信ソース
 <div id="js-room-comment-wrapper" class="comment-form l-comment-form" >
    <form id="js-room-comment">
      <select id="js-comment-input-fixed" class="comment-input-fixed hidden mb-b"></select>
      <input type="text" class="comment-input-text" id="js-chat-input-comment" placeholder="コメントを投稿" autocomplete="off">
      <button type="submit" class="js-room-comment-btn comment-btn">
        送信
      </button>
    </form>
  </div>
```

ここで、class:comment-input-textのテキストボックスに、1~50の数字を入れてclass:comment-btnのボタンを押す所を自動化する。

```python:countshowroom.py
from selenium import webdriver
import time

def cntshowroom():
    driver = webdriver.Chrome("chromedriver.exe")
    driver.get("https://www.showroom-live.com/")

    var = input("Login and Open target Room. After that input any key.:")

    elem_comment_text = driver.find_element_by_class_name("comment-input-text")
    elem_comment_send = driver.find_element_by_class_name("comment-btn")

    for i in range(1,50):
        elem_comment_text.send_keys(i)
        while True:
           time.sleep(1)
           elem_comment_send.click()
           vv = elem_comment_text.get_attribute("value")
           if vv=="":
               break
        print(i)

    print "50 count finish"

cntshowroom();
```

SHOWROOMのURLを起動して後、ログインと目的の配信者のルームに入る所は、利用者で行う。その間、inputで待機し、何らの文字が入力されると、50カウントを開始する。カウントが完了すると"50 count finish"と表示する。実行中の画面例が下記となる。
![showrrom-screenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606353/d73682d2-1ad8-2fbb-8f35-ab2b356b9b16.jpeg)

###まとめ
Pytho＋Seleniumを使って、SHOWROOMの50カウントを自動化するRPAを試してみた。本来の業務効率化の使われ方とは、異なるかもしれないが、同じ嗜好のエンジニアの方、Seleniumで本当の業務効率化を目指している方の一助になれば幸い。
今後は、ログインの自動化、星投げ、星集めについても自動化を目指す。
Linux:grub rescueで'grub_file_filters' not foundが出る場合の復旧方法

Linuxシステムの、アップグレード時の不具合などで、`'grub_file_filters' not found`が出る場合の対処方法は、すぐ思いつくものとして、grubの再インストールがあります。とは言っても、システムが起動しないのならどうしようもないので、LiveDVDなどを用意して、そちらから起動します。
そして、端末を起動して、rootになって、以下のコマンドを叩いてやります。

```
mount /dev/sdx /mnt
mount --bind /sys /mnt/sys
mount --bind /proc /mnt/proc
mount --bind /dev /mnt/dev
chroot /mnt
grub-install /dev/sdx
```
ここで、sdxはブートドライブを指すデバイスです。
iMovieを使いこなして！！ネットセッションを楽しむサイト構築構想


１、マイナスワン音源、マイナスワン動画、の準備。
　マイナスワン音源はマイナスワン動画の音ソースで、共演自撮りモニター音源として制作。
　マイナスワン動画演奏イメージを膨らますメディアとして参照、テスト的に動画を参照しながら練習する素材として制作。
２、デフォルト音源の制作。
　先ず選曲したら、コーラスチャート作成。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/d529e7b4-7519-3798-6488-8ca1b9cfdf4b.png" width="60%">
 コーラスチャートに基づいたデフォルト音源作成。
iMacのGarageBand(他のツールでも可能）等で、メトロノーム音、キーボード等のコード楽器音、更にベース音による音源作成。
３、ホスト役ミュージシャンによるホスト音源によるリーダーシップ音源および動画の作製。
　この音源、動画のプレゼンが参加者を募る意味での、キーソースとなるよう検討する。
　①、フロント楽器（サックス、トランペット、ギター等）用マイナスワン音源作成。
　②、リズムセクション（ドラムス、ベース、ギターパーカッション等）用マイナスワン音源作成。
　、ベースピアノ、ドラム
　作成したホスト動画から音ソース(MP3)を取り出す。下記サイト参照。
　　　https://note.com/moghr/n/nb2d551f300bb
　上記方法により分離したMP3とデフォルト音源(MP3)時間尺のズレ等の補正し、ホスト有りデフォルト音源作成。ホスト動画と合成し、ネットセッションデモ動画作成。

４、ネットセッションサイトの構築、会員の登録。

５、参加者への利用手順の案内。

６、コラボ作品への勧誘とその手順。

７、作成された、コラボ動画の公開作業と、その視聴への勧誘活動。
初心者によるプログラミング学習ログ 307日目

#100日チャレンジの307日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
307日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>307日目　6～8h<br>・xdからのサイト模写（メンターさん課題）6ｈ<br>・架空LP模写 2日目2h（<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a>）<br>・LP模写:FLOU設計、お問い合わせとナビ以外のhtmlと、ヘッダーのcss作成<br>・スマホ版から作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1257771478432399360?ref_src=twsrc%5Etfw">May 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Sequelizeのパフォーマンス備忘

# 基本的な動き
findAllは基本的に何も設定しないと、
・カラムはワイルドカードで全部取得
・Sequelizeのオブジェクトが返却
される。

これがボトルネックになってパフォーマンスが落ちることがある。

# カラムは必要な分だけ
あるテーブルで、カラムが８２個あったテーブルをinner joinしてattributeを書かなかった。
すると、すべてのカラムを取得してきて時間がかかった。
なおかつ、このテーブルではwhere句だけを利用するために結合していただけなので、

```
attributes: []
```

こう書くことで、5秒くらい早くなった。

# なるべくraw: true
基本的にSequelizeのオブジェクトが返却されるが、処理の順番的におそらく

```
1. レコードを取得
2. それぞれをオブジェクト化
```

っていうような流れになっている。

なので、２の処理をスキップできれば自ずと処理速度を改善できる。

なのでなるべく

```
raw: true
```

これを基本的には使うことをしていく。
ローデータは使いにくい場合があるので、全部これでやるというよりは、ケースで分ける。
ショートカットのアイコンが白一色だけの表示になった場合の対処法

inno setupでインストーラを作成し、それをインストールすると、デスクトップショートカットのアイコンが白一色だけの表示になってしまうことがあった
これの対処法を記載する

インストーラ内で以下を実行するようにする

```test.iss
Exec('cmd.exe', '/c "ie4uinit.exe -show"', '', SW_HIDE, ewWaitUntilTerminated, ret);
```
Makefileに書かれたコマンド一覧を出す

コマンドリスト一覧を出す

```
help:  ## Show all of tasks
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
```
UnityとMAYAでお皿を割る

## はじめに
Unityの破壊アセットが高かったので作ってみました。
Mayaで割ったお皿をUnityで落とします。
お皿以外のオブジェクトでも割ることができます。

![sara.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/a243ce47-ffea-e4f5-58ad-ce8cdb7172c0.gif)


## 私の開発環境
・MacBook pro
・Unity 2019.2.6f
・Maya 2018

## お皿の準備
1. Mayaでてきとうにお皿を作ります。既存のオブジェクトの場合はMayaにインポートしてください。
<img width="1669" alt="スクリーンショット 2020-05-06 3.58.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/1a01ff4a-722a-37d5-3588-260fbb8b59f9.png">

2. お皿を三角化します メッシュ>三角化
<img width="1673" alt="スクリーンショット 2020-05-06 4.01.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/d933c30f-3371-2a20-8bc0-6676a5556054.png">

3. ヒストリの削除をします　編集>種類ごとに全て削除>ヒストリ
4. (**これを忘れるとお皿が割れないことがあります！**)
<img width="1676" alt="スクリーンショット 2020-05-06 4.05.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/9a40138b-6b0b-6f59-ce20-d2f50a5df17f.png">

## お皿を割る
4. 左上をFxに変更します
<img width="1676" alt="スクリーンショット 2020-05-06 4.07.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/40dc50a5-c2ae-77ca-37c9-442d7aeab937.png">

5. エフェクト>粉砕 右側の四角をクリックします。
<img width="1677" alt="スクリーンショット 2020-05-06 4.07.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/67804753-b6d3-2a61-c65b-91134d10a6c6.png">

6. 割り方を設定します
粉砕にはサーフェス粉砕，ソリッド粉砕，クラック粉砕の3種類があります。違いについては下記を参照してください。
https://knowledge.autodesk.com/ja/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/JPN/Maya/files/GUID-3E8E9887-C26A-4E8E-AB37-4C9C8424AE30-htm.html#WS17956D7ADBC6E736512CD048117AE311422-7FE5
今回はソリッド粉砕にしました。破片の数を決めてオリジナルサーフェイスの削除にチェックを入れ、作成を押します。
<img width="548" alt="スクリーンショット 2020-05-06 4.10.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/d6ee61a5-a9eb-1ad8-aac4-e8bc4617f09c.png">

7. お皿を割ることができました。エラーが出る場合はヒストリを削除したか確認しましょう。

<img width="844" alt="スクリーンショット 2020-05-06 4.16.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/2eb37b57-61ef-7643-7db8-41048281b3ab.png">

## Unityお皿を落としてみる

8. 割れたお皿をFBXで書き出してUnityに持ってきます。
（床を用意してお皿に色をつけました）
<img width="1679" alt="スクリーンショット 2020-05-06 4.21.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/e6849a77-8e34-3d5e-3fa5-e847e506fb79.png">

9. お皿のパーツひとつひとつにRigidbodyとMesh Collider(convexにチェック)をつけます。physics materialを使って少しバウンドさせるとちょっとリアルになります。床にも忘れずにColliderをつけましょう。
<img width="757" alt="スクリーンショット 2020-05-06 4.22.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/7bd892d5-33eb-cef3-23a2-9f985efff617.png">

10. 落とします！再生！

**パリーん！**
![sara.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253009/a243ce47-ffea-e4f5-58ad-ce8cdb7172c0.gif)


## 参考
https://3dtotal.jp/tutorials/16956/