OmniAICreator/Qiita-1.07M huggingface dataset:
Mockeryでメソッドチェーンのテスト

このようなメソッドチェーンしてるPHPコードのテストコードが書きたいとき、

```PHP
$this->logger
    ->channel('channel_name')
    ->info('success!', ['id' => 1]);
```

一旦andReturnSelf()して自身を返せば良い。

```PHP
$this->logger = m::mock(LoggerInterface::class);

$this->logger
    ->shouldReceive('channel')
    ->with('channel_name')
    ->andReturnSelf()
    ->once();

$this->logger
    ->shouldReceive('info')
    ->with('success!', ['id' => 1])
    ->once();
```
Vueを使っているサイトが動かなくなった件

# 概要
VueをCDNから読み込む形式で使っているサイトが動かなくなった


# 原因
以下のようにVueを読み込んでいたせいで動かなくなっていた模様。
Vue2系からVue3系に中身がアップデートされていたっぽいです。

```html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```


# 解決方法
明示的にvue2系を読み込むように以下の記述に変更する。

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```


# 感想
そもそも`<script src="https://cdn.jsdelivr.net/npm/vue"></script>`みたいな指定をしている時点で危険ですね・・
（当時のvueのドキュメントに沿って記述したはずですが・・）
ライブラリをCDNから読み込む場合はきちんとバージョン指定されているか確認した方が良さそうです。
後方互換性があるはずなので、自分のようなケースは滅多に無いかと思いますが・・

ちなみにvue3系は`<script src="https://unpkg.com/vue@next"></script>`で読み込めます。
これまでに出会ったことのある最高のソースコード内のコメントとは

# はじめに
* こんにちは ! KDDI アジャイル開発センターの小板橋です。
* この記事は、あくまで楽しみとして取り扱ってください。
* くれぐれも使用しないことをお勧めします。w

下記は、実際にプロダクションコードで遭遇したコメントです。
[こちらのStackoverflowにあったものを翻訳しています。](https://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered)



## 自信喪失系コメント
```
// ごめん。
```

```
// お願い…動いてくれ…
```

```
// このコードは最低だ。知ってるだろ？俺もわかってるんだよ。
// 俺をバカだと呼んでくれ。
```

```
// これが機能する理由はわかりません。
```

```
// このコードが必要あるのかわかんないけど、なんか消すのがこわい
```

```
// なにが何だかわからない
```

```
// ジョー、ごめんなさい
数百行後... 
// ハリーもごめんなさい
```

## 報告系コメント

```
// 昼食はチキン・ベーコンラップ
```
```
// 修正するにはコーヒーが必要
```

```
// ヒューストン、問題があります
```

```
// David S.Millerによって追加されたバグです。
```

## ToDo系コメント

```
// TODO: 動作させる
```

```
// TODO: もう全部消す
```

```
// todo： 実装されることはありません
```

```
// TODO： これを修正します。何を修正しますか？
```

```
// TODO: return this;
```

### 強迫系コメント
```
// 解雇したい場合は、これを削除します
```

```
// このコメントが削除されると、プログラムは爆発します
```

### ふっwとなるコメント
```
int main（void）
/ *プログラムはここから始まります* /
```


```
// 上司の気が変わったために追加：20020111,20020501,20020820、... 
// 上司の気が変わったためにコメントアウト：20020201,20020614,20020908、.. ..
```

```
// 酔った。後で修正する。
```

```
// なんで動作してるのかわかんないけど、とりあえずここの問題は、このコードで解決した
```

```
// これは明らかに強要の下で書かれました
```

```
Catch (Exception e) {
// who cares?
}
```

```
##                               
##  _._ _..._ .-',     _.._(`))
## '-. `     '  /-._.-'    ',/
##    )                     '.
##   / _    _    |             
##  |  a    a    /              |
##     .-.                     ;  
##   '-('' ).-'       ,'       ;
##      '-;           |      .'
##                        /
##         | 7  .__  _.-   
##         | |  |  ``/  /`  /
##        /,_|  |   /,_/   /
##           /,_/      '`-'
##
```

### このコード最強だから、いじるんじゃねえ系コメント
```
// これは魔法。触っちゃダメ。
```

```
// コメントは書かない
// 説明しづらい
// だから読みづらいはず
```

```
# ==== このコードいじっちゃだめ。絶対だめ。いじったら蹴り飛ばしちゃうよ ===
```







# 参考
* https://medium.com/javascript-in-plain-english/30-funny-code-comments-that-will-make-you-laugh-1c1b54d4ab00

* https://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered

* https://www.webcreatorbox.com/webinfo/comments-source-code
Git超初心者向けド入門

#Gitド入門
##最初に
プログラミング超初心者の大学生の私が`Git`という概念を理解するまでに人よりも時間がかかってしまったので概念の簡単な説明と、ド入門的なちょっとした用語の説明を行います。
Gitという言葉を聞いたばかりのレベルの人に対する説明ですので、超初心者以外にはあまり役立たないかもしれませんのでご了承ください。
##Gitとは
>Git【ぎっと】とは、簡単に行ってしまうとプログラムや画像などといったファイルを、「いつ」「誰が」「どんな変更を行った」等といった情報（以降、変更履歴）を管理するソフトウェアです。

>この様なソフトウェアはバージョン管理システム（Version Control System）と呼ばれVCS【ぶいしーえす】と略されます。

「初心者にgitの概念を説明してみる」より引用
https://qiita.com/t-kubo0325/items/5a2b15cef0aaa92c9713

この説明が非常にわかりやすかったので引用させていただきました。
とはいえPCを触り始めてすぐくらいの人（私)にはそれでもわからない場合があると思いますので、例を用いて説明します。
###例
数十人のグループで半年かけて一つの絵を描くことになりました。（`日本の田園風景`の絵とします）
誰がいつどのように描き加えても良いというルールを決めたので、皆はより良い作品にするため、どんどん色を加えたり、細かいところを書き込んだりしていました。
しかし、数人がお題を勘違いしていたため、日本の民家を消してアメリカの田舎の絵を描いていました。
誰が勘違いをしてどこにアメリカの田舎の絵を描いているのか、判別がつきません。

ここで便利なのが`「Git」`だ！

誰がいつアメリカの絵を描き始めたのか誰でもすぐ調べることができ、それを取り消したりすることもできるんだ！
もちろん誤って描かれたものの前には何が描かれていたかも見ることができるぞ！

ここでもしGitが無いと、最初からやり直し、もしくは制作自体中止になってしまうかもしれません。
Gitは便利ですね。

（*普通にわかりづらかった場合、この例はスルーしてください。）

##Gitの簡単な使い方
これさえわかっておけばなんとかなるという用語を説明いたします。
超初心者向けにあえて用語はあまり用いず概念だけで説明いたしますので、しっかりと学びたい人はこの記事だけでは十分では無いと思います。ご了承ください。

先ほどの絵の例を用いて説明いたします。
###clone(クローン）
数十人のグループで書いている絵を自分の手元（ローカル)に持って来ること。
修正したり、付け加えたり、消したりすることができるが、自分の手元（ローカル）で行うことでこの変更は大元（リモートリポジトリ）の皆が書いている絵には反映されない。
ある意味`コピー`して持ってくることに近いが、`add`などで変更を大元に反映させることも可能なので少し概念が違う。
(例)
`git clone 田園風景の絵(URL)`
###pull(プル)
12/22に皆で書いている絵をクローンして手元に持ってきたとしても、12/23には誰かが大元の絵に変更を加えていることがある。
ということは12/22にクローンした絵は12/23には古いバージョンのものになっているということである。
ここで、`プル`が必要になってくる。
プルはクローンした手元の絵を`最新の大元の状態`にすることができる。
(例)
`git pull`
###add(アド)
クローンして修正した絵のどの部分を、大元の皆が書いている部分に反映させるかというのを決めるのが`アド`である。
自分が修正した全てを指定することもできるし、一部だけを指定することもできる。
(例)
`git add 民家の屋根`
###commit(コミット)
アドで指定した部分を自分の手元で確定させるのが`コミット`である。
どの様な修正で誰がやったかはこの作業で確定させる。
(例)
`git commit -m '民家の屋根の修正'`
###push(プッシュ)
コミットしたものをプッシュすることで大元に反映させることができる。
(例)
`git push`
##最後に
Gitはプログラミングをする上で必須と思いますのでサクッと覚えて次のステップへ是非進んでください！
ASP.NETCoreで作成したAPIの脆弱性を改善する

ASP.NETCore でAPIを作成したので
はじめて自分で脆弱性診断を行ってみた。診断結果をもとに改善してみる。
そのときの備忘録としてここに記す。

## 参考サイト

脆弱性の解決に導いてくれたサイト達

- [ASP.NET Coreでセキュアなレスポンスヘッダーを設定する](<https://blog.beachside.dev/entry/2020/06/10/183000>)
- [ASP.NETでカスタムHTTPヘッダを追加する方法](<https://blog.shibayan.jp/entry/20130518/1368861454>)

## 環境

- .NETCore3.1
- OS: Windows
- OWASP ZAP 2.9.0

## 改善作業

### Server Leaks Information via "X-Powered-By" HTTP Response Header Field(s)

- 原因：Web /アプリケーションサーバーは、1つ以上の「X-Powered-By」HTTP応答ヘッダーを介して情報を漏えいしている。  
  このような情報にアクセスすると、攻撃者はWebアプリケーションが依存している他のフレームワーク/コンポーネントや  
  そのようなコンポーネントがさらされる可能性のある脆弱性を特定しやすくなる可能性がある。
- 解決：不要なレスポンスヘッダを削除する。  

ASP.NETWebApplicationプロジェクトにweb.configファイルを追加。

```xml:web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <security>
      <requestFiltering removeServerHeader="true" />
    </security>
    <httpProtocol>
      <customHeaders>
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>
```

web.configはIIS環境での設定ファイルなので、Linux環境用にコードでも制御する。

```C#:Program.cs
public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.ConfigureKestrel(serverOptions => serverOptions.AddServerHeader = false)
                    .UseStartup<Startup>();
            });
}
```

※web.configを追加せず、Program.csだけの修正では動かないようです。  

### X-Content-Type-Optionsヘッダの設定ミス

原因：Anti-MIME-SniffingヘッダーX-Content-Type-Optionsに _nosniff_ が設定されていない。

```xml:web.config
<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-Content-Type-Options" value="nosniff"/>
    </customHeaders>
  </httpProtocol>
</system.webServer>
```

### 不完全なキャッシュ制御やPragma HTTP ヘッダー設定

- 原因：Cache-Controlにpragma HTTP Headerを適切に設定していない

- 解決

```xml:web.config
<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Cache-Control" value="private, no-store, no-cache, must-revalidate"/>
    </customHeaders>
  </httpProtocol>
</system.webServer>
```

おまけ：👇のようにControllerの属性に付与しても対応できるが、各Controllerに追加しないとなのでめんどくさい。

```C#:HogeController.cs
// no-store, no-cache
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
```
OSまとめ


# OSとは

「パソコンとはソフトがなければただの箱」です。
その箱にOS（オペレーティングシステム）が入れられるとこによって、パソコンの電源ボタンを押したら電源がついて、
クリックしたらファイルが開くようになります。
このようにパソコンを操作するために必要なベースとなるソフトがOSなのです。

OSには種類がいくつもあってそれぞれに特徴があります。
なので、パソコンという箱にどんなOSをいれるかによって、そのパソコンがどんな性格になるかが変わります。

# OSの主な機能

*タスク管理*
タスクを行うのに必要なメモリ（テーブル）や、CPU（頭脳）を割り当てます。
タスクにはアプリケーション（ブラウザ、wordなど）の実行やキーボードやマウスからの入力処理などがあります。

*メモリ管理*
メモリの開放などを行います。

*ファイル管理*
ファイル構造を管理しています。

*周辺機器の管理*
周辺機器とパソコンをつなぐ役割も担っています。
例えば、入力をディスプレに出力したり、外付けハードディスクに書き込んだりします。


# WindowsとmacOSの歴史
Appleはハードウェア（mac）からソフト（macOS）まで自社で開発管理しています。一方、マイクロソフトは、自社ハードウェアを作らずにOSを広げることに注力しました。その結果、Sonyや富士通など他社が作ったハードウェアに標準的で乗っけられるようになりました。
macOSは、Macのために作られたものでWindowsほど爆発的に利用されなかったが、ハードウェアとの相性は抜群で高いグラフィックインターフェースとユーザビリティを実現しました。

#UnixとLinuxの歴史
当時ベル研究所によって、Unixが開発されました。UnixはそれまでのOSとは違い軽くてシンプルで使いやすいOSでした、そのUnixのソースを全世界に公開しました。それによって、多くのユーザーが商用化してそれを面白く思わなかった結果、Unixはライセンス契約というかたちになっていきました。

ライセンス契約という言葉の響きでわかる通り、縛りがきつくなっていく。それにつれて、「Unix面倒臭い・・・」という気持ちがエンジニアたちの中で出てきました。

そこで登場したのがLinuxです。

Linuxはsリーナス（Linus）がUnixを真似て独自に開発したものです。Linusが作ったUnixライクなOSということで、Linuxです。

LinuxはUnixのようにライセンスをもうけず、オープンソースでとにかく無料にしたため、市場に広がり、多くのエンジニアによって改良されました。

結論的には、UnixとLinuxの違いは**親戚関係でライセンスのあり方が違う**くらいの認識で問題ない。



# macOS
macOSはUnixを元にしてできています。

# シェル
OSは、いろいろなことができるカーネルとその手足となるシェルやデーモンで成り立っています。
人間はカーネルに直接命令できないので、シェルを介してカーネルに命令をします。
Windowsのコマンドプロンプトもシェルと同様の働きをしますが、**シェルとはUnix系（Linuxなど）OS**でカーネルに命令を出すものたちのことを言います。
なので、コマンドプロンプトとシェルではコマンドが違いますが、UnixベースのmacOSやLinuxではコマンドが同じです。



#おまけ
昔のwindowsにはいっていたOS（MS-DOS）では、GUIがなく全てCUIでした。なので全ての操作は黒い画面に対してコマンドを入力して行っていました。
そして、GUIが一般的になっている今でもターミナルやコマンドプロンプトなどCUIで直接命令することができます。
昔は、ターミナルが画面いっぱいにあるだけって考えると大変ですね。
[Unity][IOS] ITMS - 90109に泣かされる

開発環境
Mac OS Catalina 10.15.7
Unity 2019.4.10.f

#問題点
なんか今まで動いていたのにこんなエラーが出てきた。
出てきた原因の方が知りたい・・・

Terget Minmum iOSversionを一度変えたからか？？

```
ITMS-90109: This bundle is invalid - The key UIRequiredDeviceCapabilities in the Info.plist may not contain values that would prevent this application from running on devices that were supported by previous versions. Refer to QA1623 for additional information:
```
#解決策

UIRequiredDeviceCapabilities　を消せよとのことらしい。ので
コンパイル時に勝手に消すスクリプトを探してきて実装する。
（いままで入ってなかったから動いてなかったのか他の原因なのかは不明）

```C#

// 実際に使ったやつの一部抜粋
public class HogeHoge : IPostprocessBuildWithReport
{

     /// 実行順を指定(0がデフォルト、低いほど先に実行される
    public int callbackOrder => 1;

    //このクラスを用意すれば勝手にビルド後に動く
    public void OnPostprocessBuild(BuildReport report)
    {
#if UNITY_IOS
        if (report.summary.platform == BuildTarget.iOS)
        {
            // InfoPlistから不要な物を取り除く
            RemoveArm64FromRequiredDeviceCapabilities(pathToBuiltProject);
        }
#endif
    }

    internal void RemoveArm64FromRequiredDeviceCapabilities(string pathToBuiltProject)
    {
　　　　　//infoPlistを読み込む
        string plistPath = Path.Combine(pathToBuiltProject, "Info.plist");
        var plist = new PlistDocument();
        plist.ReadFromString(File.ReadAllText(plistPath));
        var rootDict = plist.root;

        //【今回の肝】 UIRequiredDeviceCapabilities の中身を消す
        var capabilities = rootDict["UIRequiredDeviceCapabilities"].AsArray();
        capabilities.values.Clear();
        //capabilities.values.RemoveAll(item => item.AsString() == "arm64");　//こんな感じで個別ににも消せる

        File.WriteAllText(plistPath, plist.WriteToString());
    }
}
```

#解決策できなかった策
・Auto Graphics APIにOpenGLES3 と　OpenGLES2　を追加する
　→エラーのまま特に変わらず
![スクリーンショット 2020-12-22 13.23.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182971/1bbe8f5f-5496-fa37-2032-8c4cab7bc173.png)




参考資料
https://staff.qualias.jp/technology/this-bundle-is-invalid-the-key-uirequireddevicecapabilities-in-info-plist-may-not-contain-values-that-would-prevent-this-application-from-running-on-devices-that-were-supported-by-previous-version/

https://forum.unity.com/threads/this-bundle-is-invalid-uirequireddevicecapabilities.862570/
[Rails]seed作成でコンパクトに書きたい（%w記法、each_with_index、番号指定パラメータ）

seed登録にて、rubyの記法など使ったものを色々まとめてみました。

## 基本
```rb
User.create!(name: '田中', email: 'tanaka@test.com')
User.create!(name: '鈴木', email: 'suzuki@test.com')
```

## 二次元配列
```rb
array = [ ['田中', 'tanaka@test.com'], ['鈴木', 'suzuki@test.com'] ]
array.each do |first, second|
  User.create!(name: first, email: second)
end
```

## 二次元配列（コンパクトに）

```rb
[
  ['田中', 'tanaka@test.com'], ['鈴木', 'suzuki@test.com']
].each do |first, second|
  User.create!(name: first, email: second)
end
```

## %w記法
```rb
array = %w[田中 tanaka@test.com], %w[鈴木 suzuki@test.com]
array.each do |first, second|
  User.create!(name: first, email: second)
end
```

## %w記法（コンパクトに）
※空文字を使う場合(バクスラ+半角スペ)

```rb
[
  %w[田中 tanaka@test.com 東京都\ 出身は八王子市です],
  %w[鈴木 suzuki@test.com 沖縄県\ 出身は那覇市です]
].each do |first, second, third|
  User.create!(name: first, email: second, birthplace: third)
end
```

## each_with_index
i=1, i+=1 とかインクリメント処理を書かなくていい。indexを扱いやすくする。
※i=0から始まる。

```rb
array = [ ['田中', '鈴木'] ]
array.each_with_index do |first, i|
  User.create!(name: first, index_no: i)
end
```

## each.with_index(n)
開始番号を指定する。

```rb
[
  ['田中', '鈴木']
].each.with_index(5) do |first, i|
  User.create!(name: first, index_no: i)
end
```

## each_with_index（二次元配列の場合）
```rb
[
  ['田中', 'tanaka@test.com'], ['鈴木', 'suzuki@test.com']
].each_with_index do |(first, second), i|
  User.create!(name: first, email: second, index_no: i)
end
```

## 番号指定パラメータ
do |first, second|といった記載が不要になります。
※注意：_1〜_9まで使用でき_10は使用不可です。

```rb
[
  ['田中', 'tanaka@test.com'], ['鈴木', 'suzuki@test.com']
].each do
  User.create!(name: _1, email: _2)
end
```

## 最後に

`rails db:seed`を実行してデータを反映しましょう。

どなたかのお役に立てれば幸いです。

## 参考にした資料
**%記法いろいろ**
https://qiita.com/mogulla3/items/46bb876391be07921743
https://www.sejuku.net/blog/46939
**each_with_index**
http://blog59.hatenablog.com/entry/2018/02/28/155417
**%記法で空文字を入れる**
https://qiita.com/nao58/items/d897c16c9513dcf54ade
**番号指定パラメータ**
https://qiita.com/jnchito/items/79f0172e60f237e2c542
Mobile Blazor Bindings を使用したMac版アプリケーションで最小化ボタンを有効にする方法

# 概要
Mobile Blazor Bindings を使用して Mac用アプリケーションを作っているときに、最小化ボタン(左上にある黄色のボタン)を有効化する方法

# 結論
AppDelegate.cs の style を設定している箇所に NSWindowStyle.Miniaturizable を追加する。


# 詳細
AppDelegate.csに書かれているAppDelegateクラスのコンストラクタにstyleの設定が定義されているので、style設定にNSWindowStyle.Miniaturizable を追加する。

```C#:変更前
public AppDelegate()
{
    var style = NSWindowStyle.Closable | NSWindowStyle.Resizable | NSWindowStyle.Titled;
    var rect = new CoreGraphics.CGRect(200, 1000, 1024, 768);
    MainWindow = new NSWindow(rect, style, NSBackingStore.Buffered, false)
    // 以下省略
}
```

```C#:変更後
public AppDelegate()
{
    var style = NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable | NSWindowStyle.Titled;
    var rect = new CoreGraphics.CGRect(200, 1000, 1024, 768);
    MainWindow = new NSWindow(rect, style, NSBackingStore.Buffered, false)
    // 以下省略
```

これだけでOK

# 終わり
多分将来の自分がまた同じように迷うと予想しているので備忘録として記事にしておく。
YouTubeのリアルタイム再生回数をスプレッドシートに自動で反映させる方法

#YouTubeのリアルタイム再生回数をスプレッドシートに自動で反映させる方法

##この記事の目的

国内のメディア企業でYouTubeチャンネルの制作とデータ分析を担当しているstNaoです。

弊社ではスプレッドシートを用いてYouTube動画の分析を管理しているのですが、
日々定期観察している動画の現在の再生回数を知りたいことがあります。

この記事では、下の画像のように動画の現在の再生回数をスプレッドシートで表示する方法を紹介いたします。

![Screen Shot 2020-12-22 at 12.54.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614701/e06236c2-9ba5-605b-eb84-3a33897c6d1e.png)


## YouTube APIの認証をもらっておく

事前に`YouTube API`の認証キーを入手しておく必要があるので、下記の記事などで準備しておきましょう。

YouTube API APIキーの取得方法
https://qiita.com/chieeeeno/items/ba0d2fb0a45db786746f


## 動画のIDを集める

下記の記事で説明したスプレッドシート を今回も用います。
再生回数を調べたい動画のIDをスプレッドシート に記入しましょう。

[YouTubeのサムネ一覧をスプレッドシートで一括取得する方法](https://qiita.com/stnao/items/fd129c33297c5d7e1f26)


##GAS

GASのエディタを開きます。
画像を参考に、スクリプトエディタを開いてください。

![Screen Shot 2020-12-22 at 13.00.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614701/f92747fa-a449-a61b-69b7-5ed70adb22ba.png)

次のコードを使用します。

```javascript:GAS
function myFunction() {

//sheetオブジェクト作成
  const sheet=SpreadsheetApp.getActiveSheet();

//動画IDが記入されたセルのrangeオブジェクトを作成
  const range_id=sheet.getRange(1,1,sheet.getLastRow())

//作成したrangeオブジェクトから動画IDを配列で作成する
  const values=range_id.getValues()

//YouTube APIに送信するクエリを作成する  
  const qury_array=values.map(id =>"&id="+id)
  var qury= qury_array.join("")
  var json_url="https://youtube.googleapis.com/youtube/v3/videos?part=statistics"+qury+"&key=あなたのAPIキー";

//YouTube APIからデータを受診する
  var json=UrlFetchApp.fetch(json_url).getContentText();
  var jsonData=JSON.parse(json);

//結果をセルに記入する
  for (let row=0; row<values.length; row++){
    Logger.log(jsonData.items[row]['statistics']['viewCount']);
    sheet.getRange(row+1,3).setValue(jsonData.items[row]['statistics']['viewCount']);
  }
}
```


##解説

`YouTube API`を使うことで、YouTubeに関連するデータをYouTubeから公式に受け取ることが可能です。
「APIキー」という鍵をクエリーという注文文に入れて注文することで、YouTubeから返事が返ってきます。

結果を入れるセルを変更したい場合は、以下のコード部分にある`getRange()'の()内を変更することで調節できます。

```javascript:GAS

//結果をセルに記入する
  for (let row=0; row<values.length; row++){
    Logger.log(jsonData.items[row]['statistics']['viewCount']);
    sheet.getRange(row+1,/*ここが列を記入する部分*/).setValue(jsonData.items[row]['statistics']['viewCount']);
```

##終わり

以上です。
画像のようにサムネイルを加えることで、より見やすくなります。
こちらの解説は下記のポストを参照してください。

[YouTubeのサムネ一覧をスプレッドシートで一括取得する方法](https://qiita.com/drafts/fd129c33297c5d7e1f26/)

YouTubeの分析について、「こうしたい」「ああしたい」といった疑問がありましたらコメントにてリクエストお願いいたします。


![Screen Shot 2020-12-22 at 12.54.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614701/d7fa945c-0370-8be9-48a0-1a6e6dcf1079.png)
[vscode]command+zを戻したい

# 概要
macでvscode入れるとデフォルトでcommand+y(編集を進める？)が効かない。
command+z(編集を戻す)はデフォルトで効くのだが、戻しすぎた時とか間違えて消してしまった場合にcommand＋yが使えないと結構困るのでメモとして残しておく。

# 設定
vscodeを開いて
```command+shift+p```を押すと以下画面が表示されるので
![スクリーンショット 2020-12-22 12.58.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/daf2cc71-566f-6c56-1a42-e759b4b4513f.png)

```>open keyboard shortcuts(json)```と検索すると項目が表示されるので上の方を選択する。

![スクリーンショット 2020-12-22 12.59.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/091ec4ca-393d-c827-809d-71c269ef26ac.png)

そうすると以下のようなファイルが開きます。![スクリーンショット 2020-12-22 13.00.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/79330a44-3833-d10d-7b2d-41ca8e45ffe5.png)

[]の中に
```
  {
    "key": "cmd+y",
    "command": "redo",
    "when": "editorTextFocus"
  }
```
を追加すればcommand+yが効くようになります。
window.performance.navigationが非推奨

MDNの[PerformanceNavigation.type](https://developer.mozilla.org/ja/docs/Web/API/PerformanceNavigation/type)に記載の通り、次のソースコードはVSCode上で非推奨と提示される。

```javascript
const isNavigate = window?.performance?.navigation?.type === 0;
```

[PerformanceNavigationTiming](https://developer.mozilla.org/ja/docs/Web/API/PerformanceNavigationTiming)の利用は正解ですが、具体的な使い方がよく分からなかった。

調べた結果、[Performance.getEntriesByType()](https://developer.mozilla.org/ja/docs/Web/API/Performance/getEntriesByType)で次のように行ける。

```javascript
const isNavigate = window?.performance?.getEntriesByType('navigation')[0].type === 'navigate';
```

`window?.performance.getEntries()`では全てのエントリーを調べられる。

### 参考記事

- [check-if-page-gets-reloaded-or-refreshed-in-javascript](https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in-javascript/53307588#53307588)
Figmaで資料作成するときに便利なプラグイン「Paginate」

UI DesignツールFigmaで資料作成する時にパワポと同じようにページナンバーを振りたいときがあります。下記の画像は各ページの共通フッターで右端の数字がページナンバーを想定してますがいちいち一個ずつテキストを入力するのは面倒ですよね。
なのでそんな時は「Paginate」というプラグインが便利です。

![スクリーンショット 2020-12-22 11.47.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549936/64ce9581-d2bd-62cb-f6fa-1ab6e8518738.png)


##使い方

使い方はとっても簡単。インストール後に「Plugins」→「Paginate」→「Open Paginate」でプラグインを開く。
開いた後は番号を振るコンポーネントを一つ選択して「Paginate」をクリック。するとそれぞれのコンポーネントに連番で数字が振られます。
※コンポーネントの名前は全部一致していることが前提。

![paginate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549936/d946b6fc-5253-3677-4c6b-7669173c3605.gif)

Figmaで資料作成時のページナンバー付与や連番で数字を振りたい時はおすすめです。
Nuxt axios module 認証用トークン付与する共通処理を書いた時の引っかかりポイント

nuxtではaxiosはmoduleの形で導入します。各ページで呼んでもいいんですが、ページごとにインスタンス化していくと複数のaxiosが作られ増えていってしまいます。また、共通処理のようなものを書くことができません。
[ Axios module ] https://axios.nuxtjs.org/
この記事ではaxios moduleを拡張してaxios pluginを作った際に引っかかったポイントを残しておきます。
# 引っかかりポイント
下のようにリクエストの際にaxiosのデフォルトとしてヘッダーを付与する方法
https://github.com/axios/axios#global-axios-defaults

```js
export default function({ $axios }) {
  $axios.onRequest((config) => {
    const token = "xxxx";
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
  })
}
```

$axiosが呼ばれた時にリクエストを生成してそれを引数としてonRequest()渡して、リクエストの生成後に実行される。
つまりリクエストの生成後にaxiosにデフォルト値としてheaderを追加しても、すでに生成されているconfigに入っているリクエストにヘッダーは追加されない。
NuxtのasyncDataで呼んでいるAPIの認証が１回目だけ認証エラーのような挙動になる。

# 修正
下のように生成されたリクエストにトークンを付与すればOK

```js
  $axios.onRequest((config) => {
     const token = "xxxx";
     config.headers.Authorization = 'Bearer ' + token;
  });
```

### あとがき
この記事の1番の引っかかりポイントは間違ったコードの方でも開発ビルド`npm run dev`の開発ビルドでは正常に動くというところです。この問題に気づくタイミングが本番ビルドをしたタイミング、さらにサーバーに乗せたタイミングだったため、本番用のtokenが違うせいか？SSRモードがうまく動いていないせいで、asyncDataの最初のデータだけ取れないのか？と違うポイントを調べて原因が見つからず四苦八苦してしまった。

ネット上には正しい記事も間違った記事もあり、今回は運悪く間違った記事を信じてしまった。このパターンに引っかかる人は少ないと思うが、いつか誰かの為になることを願って備忘録を残しておきます。今冷静に考えれば当たり前かと思うし悲しいし萎え。
Outputが出来るエンジニアを目指して 

本記事は2020年12月18日に行われた社内イベント「エニプラAwards」の記事です。

# 目次
- [エニプラAwardsとは](#エニプラAwardsとは) 
- [チームでの目標](#チームでの目標) 
- [チームでの取り組み](#チームでの取り組み)
- [1年を通しての実績](#1年を通しての実績) 
- [各メンバーのベスト記事](#各メンバーのベスト記事) 
- [チーム内ベスト記事](#チーム内ベスト記事)
- [1年を通して得た成果](#1年を通して得た成果)
- [来期の目標](#来期の目標)

# エニプラAwardsとは
株式会社エニプラでは、年末に「**エニプラAwards**」というイベントが開催されます。
各チームごとにテーマを決め年間活動をおこない、その成果を発表します。

# チームでの目標
私の所属するチームでは「**Outputが出来るエンジニア**」を目標としました。

# チームでの取り組み
目標を達成するために以下のことに取り組みました。

####**Qiita記事の投稿**
毎月2〜3人がQiitaに記事を投稿するようにしました。

####**記事の発表とメンバー全員で評価**
チーム会で記事の発表を実施。
メンバー全員で評価を行い、記事内容のブラッシュアップを行いました。

# 1年を通しての実績
1年を通して4つの実績ができました。
####**1. 全員が複数回投稿できた！**
全員が複数回投稿することが出来ました。
各メンバー、平均<font color="Orange">**5つ**</font>以上の記事を投稿しました。
####**２. 投稿数最大のチームとなった！**
エニプラ全チームの中で一番投稿を行ったチームとなりました。その投稿数は<font color="Orange">**39投稿**</font>です。
12月開催中のQiita Advent Calendar においても、全メンバーが記事を投稿しました。
####**3. エニプラの人気記事ベスト5を独占**
エニプラの<font color="Orange">**人気記事ベスト5**</font>は全てメンバーの記事です。チーム内で記事の内容について、
評価&ブラッシュアップを行った結果です。
####**4. Qiitaのトレンド・活動量ランク入り**
投稿した記事の一部が、Qiita全体における<font color="Orange">**トレンド**</font>入りを達成しました。
同日に複数の記事を投稿した事により、エニプラとして Qiita Organization (会社、組織等の団体メンバー)の<font color="Orange">**活動量ランク入り**</font>を達成しました。

# 各メンバーのベスト記事
各メンバーが自身の記事から選んだベスト記事です。

|メンバー|記事|内容|
|:-------|:---|:---|
|[A0yama_anpl](https://qiita.com/A0yama_anpl)|[Packstackを使ってCentOS7.7にOpenstack SteinのAll in One環境を立ててみる](https://qiita.com/A0yama_anpl/items/126dfdaffe884c0bd6cf)|自宅にOpenstack環境を構築した時の手順と失敗談と対応方法を紹介している記事|
|[Shiho_anyplus](https://qiita.com/Shiho_anyplus)|[UiPath実践ーロボットの開発から配布と実行までの流れー](https://qiita.com/Shiho_anyplus/items/eeb3400b0a7f43e1c232)|RPAツールのUiPathを導入を検討している人向けに、一連の運用の流れを紹介する記事|
|[t-namba](https://qiita.com/t-namba)|[初心者がAndroidアプリを作ってみる　～開発に必要なツールの設定～](https://qiita.com/t-namba/items/e9272635e9e85f25438d)|開発未経験者として学びながら開発を行っていく過程を連載形式で紹介している記事|
|[FJ-K](https://qiita.com/FJ-K)|[RFC2396とは](https://qiita.com/FJ-K/items/322171f63aace906d150)|現場で調べる機会のあったURLで利用可能な文字を定めたルールの1つRFC2396について更に調べてまとめられた記事|
|[yukina24](https://qiita.com/yukina24)|[VBAを組んでみた。閉じるときにダイアログを出さない。](https://qiita.com/yukina24/items/425c90cbc8dd5a4b6c33)|Excelを保存せずに閉じようとした時に表示されるダイアログをVBAで出さないように試してみた際の内容を紹介する記事|
|[sato_626](https://qiita.com/sato_626)|[エンジニアが効率よく仕事を進めるためのメモ術](https://qiita.com/sato_626/items/2e865d741f3eda033d82)|書籍を読んで学んだ、メモを取る理由とメモの残し方を紹介する記事|
|[y_ogawa_naaaa](https://qiita.com/y_ogawa_naaaa)|[SpringBootやってみるシリーズ](https://qiita.com/y_ogawa_naaaa/items/55ea48d4f163d8d7a241)|SpringBootフレームワークを使用して個人開発を行っている過程を連載形式で環境準備から順番に紹介している記事|

# チーム内ベスト記事
各メンバーがチームメンバーの記事から選んだベスト記事です。

**[エンジニアが効率よく仕事を進めるためのメモ術](https://qiita.com/sato_626/items/2e865d741f3eda033d82)**

LGTM数、ストック数ともに、Qiitaユーザーから大くの反響を貰っている記事です。公開した週には、Qiita全体でのトレンド入りもしました！
すべての人に参考になる記事なので、ぜひ読んでみてください。

# 1年を通して得た成果
メンバー全員が「記事投稿→発表→評価」を繰り返し実施を結果以下の成果を得ることができました。
・得た知識や経験をアウトプットする習慣がついた
・読みやすく分かりやすい記事が書けるようになった
・人に説明するスキルが身についた

# 来期の目標
来期もこの活動を継続し、アウトプットが出来るエンジニアを目指します。
また、チームで ITコンテストへ出展予定です。
.envファイルとは

昨日は、「.env」ファイルを使って秘密鍵やアクセスキーを管理する方法を
投稿しましたが、「.env」ファイルも気になったので今回記事を書くことを決めました

##概要
**UNIX系のOSで使えるコマンド「env」の本体ファイル**

.envファイルを使って開発環境と本番環境を切り替えたり、
DBなどの接続情報の変更を行うことができる

例えば開発環境ではsqlite、
本番環境ではmysqlのDBに接続といった変更が可能となる

.envファイルの中身は**複数のキーと値のペア**で記述されている

###「env」コマンドとは
コンピュータに対する命令の1つ
環境変数を設定してコマンドを実行する時に使うコマンド

##ルール
・**空行**は無視される
・「**#**」で始まる行は**コメント**だとみなされる
・値にスペースを含んでいても**クォーテーションで囲む必要はない**
・**シングル**クォートや**ダブル**クォートで囲んでもいい
・値の記載を**省略**した場合は**空文字**になる
(例: KEY1= とすると、{ KEY1: '' } になる)
・キーや値の**前後の空白は削除**される。削除したくない場合は、シングルクォートかダブルクォートで値を囲む必要がある
(例: KEY1=' AAA ')
・エンコーディング形式は「**utf8**」で保存する
→dotenv.configのオプションで変更できる


##参考記事
https://railsguides.jp/configuring.html
https://wa3.i-3-i.info/word14462.html
https://wa3.i-3-i.info/word11209.html
https://reffect.co.jp/laravel/env-file-basic-understanding
Ubuntu20.04にしたらMySQL5.7への接続ができなくなったので解消

# はじめに
## 対象読者
* まさに Ubuntu 20.04 へ ver.up したら MySQL 5.7 へ接続ができなくなった人

## 問題
* MySQL への接続時に、以下のようなエラー文が吐かれる

```sh
: No such file or directory - <中略>/mysql2.so
```

* `libmysqlclient.so.20` が動作してくれないとならないけれど、実際にサーバにインストールされているのが `libmysqlclient.so.21` のみになってしまっている


# 本題
## コンフィグ設定
### コンフィグツールの導入
```sh
wget https://dev.mysql.com/get/mysql-apt-config_0.8.12-1_all.deb
sudo dpkg -i mysql-apt-config_0.8.12-1_all.deb
# ここでプロンプトが表示される
```

### プロンプト上の操作
* 以下サイトの指示通り
    * [ComputingForGeeks - How To Install MySQL 5.7 on Ubuntu 20.04](https://computingforgeeks.com/how-to-install-mysql-on-ubuntu-focal/)

* `Ubuntu Bionic` を選択
* `MySQL Server` を選択
* `MySQL 5.7` を選択
* 最後に `Ok` でプロンプトから抜ける


## パッケージインストールと確認
### インストール
```sh
sudo apt update
sudo apt install libmysqlclient-dev=5.7.32-1ubuntu18.04
```

### 確認
* `libmysqlclient-dev` と `libmysqlclient20` とが `5.7.32-1ubuntu18.04` で入っていればよい。これで接続できるようになっているはず

```sh
sudo apt list --installed | grep libmysql
```

```sh
libmysqlclient-dev/unknown,now 5.7.32-1ubuntu18.04 amd64 [installed,upgradable to: 8.0.22-0ubuntu0.20.04.3]
libmysqlclient20/unknown,now 5.7.32-1ubuntu18.04 amd64 [installed,automatic]
libmysqlclient21/focal-updates,focal-security,now 8.0.22-0ubuntu0.20.04.3 amd64 [installed,auto-removable]
```

## バージョン固定
* 以下記事にあるように、このままだとバージョン更新の通知が来てしまうので、固定させておく
    * [Qiita - Ubuntu19.10でmysql5.7に接続できない](https://qiita.com/naoki_maeda/items/5b3984b94ab05968d013)

```sh
sudo apt-mark hold libmysqlclient20
sudo apt-mark hold libmysqlclient-dev
```


# おわりに
## 感想
* 使われていないと思っていたら使われているサーバだったという、嘘のような本当の話で起こったものです。

## 補足
* 本記事の内容は同僚の @hiroto_otake さんが調査・解消対応してくれたものを、まとめ直したものです。その節はありがとうございました🙏

## 参考記事
* [ComputingForGeeks - How To Install MySQL 5.7 on Ubuntu 20.04](https://computingforgeeks.com/how-to-install-mysql-on-ubuntu-focal/)
* [Qiita - Ubuntu19.10でmysql5.7に接続できない](https://qiita.com/naoki_maeda/items/5b3984b94ab05968d013)
テストコードって何？って人のための初めてのJest

先日、ある関数を書いていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579960/c00f15ed-a989-4c84-9c04-6a3411a96c33.png)


見る人が見ればすぐわかるらしいんですが、これだと一生"申込書到達"には到達しないそうです。ぴえん

ってことで、今日はこの関数を題材にテストコードを書いてみたいと思います。
今回はJestというフレームワークを使います。


## テストコードって何
- 自分が書いた関数って本当に仕様満たしてる？？
- リファクタリング、修正した時に仕様漏れ発生しない？
    - テスト通ってれば大丈夫でしょ！

みたいなことです。

## まずは書く

まず、この関数に期待することを列挙してみましょう。


```js:index.test.js
test('引数に0を渡した時に、"申込書到達"が返される', () => {
});
test('引数に1を渡した時に、"申込手続中"が返される', () => {
});
test('引数に2を渡した時に、"申込完了"が返される', () => {
});
test('引数に3を渡した時に、空文字が返される', () => {
});
```

期待することというか、要はここで仕様を網羅する必要があります。
そして、仕様が網羅されていなかったらテストの意味ないので、この段階でWIPでプルリクを出しておきましょう。

では、関数も追加しましょう。

```js:index.test.js
test('引数に0を渡した時に、"申込書到達"が返される', () => {
  expect(applicationProgressValue(0)).toBe("申込書到達");
});
test('引数に1を渡した時に、"申込手続中"が返される', () => {
  expect(applicationProgressValue(1)).toBe("申込手続中");
});
test('引数に2を渡した時に、"申込完了"が返される', () => {
  expect(applicationProgressValue(2)).toBe("申込完了");
});
test('引数に3を渡した時に、空文字が返される', () => {
  expect(applicationProgressValue(3)).toBe("");
});
```

`expect(applicationProgressValue(0)).toBe("申込書到達");`
これは、`applicationProgressValue`に引数`0`を渡した時に、`"申込書到達"`が戻り値となることを期待する、という意味です。


そして、スクリプトを追加します。

```json:pacage.json
  "scripts": {
    "test": "jest"
  }
```

ではターミナルでコマンドを実行してみましょう。

```
npm run test
```

うーん🤔


```
 FAIL  ./index.test.js
  ✕ 引数に0を渡した時に、"申込書到達"が返される (7 ms)
  ✕ 引数に1を渡した時に、"申込手続中"が返される (1 ms)
  ✕ 引数に2を渡した時に、"申込完了"が返される
  ✓ 引数に3を渡した時に、空文字が返される (1 ms)
```

エラーがめちゃくちゃ出てしまいましたね。


どうやらこの関数は、私の意図した通りの挙動はしてくれないみたいです。


という風に、自分が書いた関数が本当に正しいのかチェックしてくれるのがテストコードの役割になります。



では、コードを修正していきましょう。
この辺はお好みでいいんですが、私は下記のように修正しました。

```js:index.js
const applicationProgressValue = (num) => {
  if (num !== 0 && num !== 1 && num !== 2) {
    return "";
  };
  const progressValue = ["申込書到達", "申込手続中", "申込完了"];
  return progressValue[num];
};
```


で、もう一度スクリプトを走らせてみると。。。

```
 PASS  ./index.test.js
  ✓ 引数に0を渡した時に、"申込書到達"が返される (3 ms)
  ✓ 引数に1を渡した時に、"申込手続中"が返される
  ✓ 引数に2を渡した時に、"申込完了"が返される
  ✓ 引数に3を渡した時に、空文字が返される (1 ms)
```


素敵。

おしまい。


## 最後に

いや、自分が書いたテストコードって正しいの？！

元々の関数を壊してみましょう。
テストが通らなくなったらきっと大丈夫。
Rails チュートリアル 第3章 備忘録

第3章の備忘録です。

## 環境
Rails 6.0.3
Ruby 2.6.3

##目次
[1 コマンド操作で元に戻す方法](#1-コマンド操作で元に戻す方法)
[2 HTTPメソッド](#2-httpメソッド)
[3 空のメソッドでもRailsでは動作が異なる](#3-空のメソッドでもrailsでは動作が異なる)
[4 デフォルトテストを解読](#4-デフォルトテストを解読)
[5 ルーティング](#5-ルーティング)
[6 minitest reportersの導入](#6-minitest-reportersの導入)
[7 Guardのテスト自動化を導入](#7-guardのテスト自動化を導入)


###1 コマンド操作で元に戻す方法
たまに起こるコマンド操作の失敗。誤ったファイルだけを削除すると、そのファイルを生成した時に別ファイルに挿入されたコードが残ってしまうため、コマンドで生成したモデルやコントローラーは、同様にコマンドで削除する必要がある。

```
# コントローラー作成
$ rails generate controller StaticPages home help

# コントローラー削除
$ rails destroy controller StaticPages home help
```
モデルの削除も同様に行うことが可能。

次はマイグレーション

```
# マイグレーションの変更（更新）
$ rails db:migrate

# マイグレーションを1つ前の状態に戻す
$ rails db:rollback

# マイグレーションを最初の状態（VERSION=0）に戻したい
$ rails db:migrate VERSION=0
```
VERSION番号は```rails db:migrate```するたびに設定されているため、別の数字に置き換え可能


###2 HTTPメソッド
HTTP(HyperText Transfer Protocol)は```GET``` ```POST``` ```PATCH``` ```DELETE```の4つの基本的操作がある。

| GET |POST | PATCH | Delete |
|:-----------------:|:------------------:|:------------------:|:------------------:|
| ページを取得する |フォームに入力された値を基に作成する |      更新|削除|



###3 空のメソッドの挙動
Railsでは空のメソッドであっても、動作が異なる

```app/controllers/staticpages_controller.rb
class StaticPagesController < ApplicationController
  def home
  end
  .
  .
end
```

このような場合でも、StaticPagesControllerクラスはApplicationControllerというRailsのクラスを継承しているため、/static_pages/homeにアクセスすると、home.html.erbというビューが表示される。



###4 デフォルトテストを解読

```test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | Ruby on Rails Tutorial Sample App"
  end

  .
  .
end
```

このテストの確認は「アサーション（assertion:主張、断言）」と呼ばれる手法で、アクションをgetして正常に動作することを確認する。

上のテストの流れは、
1,homeアクションに対してGETリクエスト（ページを表示）
2,レスポンスが成功(200)になる
3,```<title>```タグに記述した文字列が表示されている



###5 ルーティング
```config/routes.rb
Rails.application.routes.draw do
  root 'static_pages#home'
  get 'static_pages/home'
  .
  .
end
```
rootルーティングを設定すると、root_urlというRailsヘルパーが使えるようになる。

###6 minitest reportersの導入
minitest reportes を導入すると、テスト結果が色付きで表示される。

```:Gemfile
.
group :test do
  .
  gem 'minitest', 'バージョン'
  gem 'minitest-reportes', 'バージョン'
  .
end
.
```

```test/test_helper.rb
.
require 'rails/test_help'
require "minitest/reportes"
Minitest::Reportes.use!
.
.
```

###7 Guardのテスト自動化を導入
Guardを設定することで、例えば```home.html.erb```を変更したら```static_pages_controller_test.rb```が自動的に実行される。

```:Gemfile
.
group :test do
  .
  gem 'minitest-reportes', 'バージョン'
  gem 'guard', 'バージョン'
  gem 'guard-minitest', 'バージョン'
end
.
.
```

#####初期化を行う

```
$ bundle exec guard init
```

生成された```Guardfile```をカスタマイズしていくがここは割愛。
Rspecを使う場合などで設定が変わるので、Rail Tutorialではテキスト通り進めるが、後々は自分で設定を行っていきたい。

```
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p
```
クラウドIDEの場合は、上の２行のコマンドを実行してプロジェクト内の全ファイルをGuardで監視できるよう設定

```
$ bundle exec guard
```
最後に新しいターミナルで上のコマンドを実行し、起動させる。

```
$ bin/spring stop
$ bundle exec guard 
```
もしテストが不必要に失敗する場合は、上のコマンドで再起動を行う。
Spring : Railsの情報を事前に読み込み、テストを高速化させるツール
Pepper SDK入門(21) PhraseとPhraseSetで親睦の深度をマリアナ海溝並みにする

#Phrase🔈 and PhraseSet🔉🔊？
PhraseにはPepperに言ってもらう、もしくは聞き取ってもらうフレーズを記述します。対してPhraseSetは同義語をカバーするなど、複数のフレーズを記述するものです。

それではこの二つで、Pepperとの親交を世界最深[^1]にする方法を見ていきましょう。
[^1]: 体感。個人の感想です。

#How to 異種族間交流
##Sayから始める交歓会
Phraseで発話するにはStringでPhraseを作成し、Sayをビルドします。[Sayの回](https://qiita.com/kskrin/items/15e5a5fb1c1d6d3b15d0)も参考にしてください。

```java
Phrase phrase = new Phrase("にゃーん");

Say say = SayBuilder.with(qiContext)
                    .withPhrase(phrase)
                    .build();

say.run();
```
<img width="250" alt="IMG_20201222_123024.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/e8978fd7-0d16-5da0-3117-d0c6cace99fa.png">$\tiny{にゃーん}$
ちなみに猫に胡椒などの香辛料をあげてはいけません。

##Listenでマイクをすませば
PhrasesetはListenをビルドするために使いましょう。

```java
PhraseSet phraseSet = PhraseSetBuilder.with(qiContext)
                                      .withTexts("たこ","たこたこ","墨スプラッシュ")
                                      .build();

Listen listen = ListenBuilder.with(qiContext)
                             .withPhraseSet(phraseSet)
                             .build();

ListenResult listenResult = listen.run();
```

ListenResultから聞き取ったPhraseと、該当するPhraseSetを取得します。

```java
ListenResult listenResult = listen.run();

//Pepperが聞き取ったフレーズはgetHeardPhrase()で取得可能
Phrase heardPhrase = listenResult.getHeardPhrase();
//Pepperが聞き取ったフレーズが含まれるPhraseSetはgetMatchedPhraseSet()で取得可能
//はい(はい,うん,そうです)、いいえ(いいえ,違います)など複数のPhraseSetでListenをビルドした場合に便利
PhraseSet matchedPhraseSet = listenResult.getMatchedPhraseSet();
```

**これでどんな異種族間交流も表面上は完璧です！**
時には形から入ってみましょう。

**:octocat:Pepperと人間の異種族間交流は、<ins>[Git](https://github.com/aldebaran/qisdk-tutorials/tree/master/app/src/main/java/com/softbankrobotics/qisdktutorials/ui/tutorials)</ins>のHello humanとCatch few wordsで手軽に体験ができます:cat::octopus:**

#あとがき
今回も[Pepper SDK for Android](https://android.aldebaran.com/sdk/doc/pepper-sdk/ch4_api/conversation/reference/phrase_phraseset.html#)を参考に書かせていただきました。
詳しくはそれぞれのAPIドキュメント([Phrase](https://android.aldebaran.com/sdk/doc/javadoc/qisdk/com.aldebaran.qi.sdk.object.conversation/-phrase/index.html)、[PhraseSet](https://android.aldebaran.com/sdk/doc/javadoc/qisdk/com.aldebaran.qi.sdk.object.conversation/-phrase-set/index.html)、[ListenResult](https://android.aldebaran.com/sdk/doc/javadoc/qisdk/com.aldebaran.qi.sdk.object.conversation/-listen-result/index.html))を参照してみてください。

次はChatbotの回です。喋るウマバエの幼虫[^2]の登場はありません。それでは次回〜:raised_hands:
[^2]: botには確かにウマバエの仔虫という意味がありますが、Chatbotにおけるbotはrobotの略です。
日本における®マーク使用時の注意を纏めてみました 

**はじめに**
こんにちは。私は知的財産部に所属していますが、常日頃に気を付けたい事項として、日本国内での**® マーク**の表示がありました。**® マーク**は国外における商標登録を示すもので、Registered Trademark **(登録商標)**を示すマークです。このマークは日常的に目にすると思いますが、自社の商品に付与する場合や、他社の商品に付与して表示する場合など、いろいろな使用のケースがあります。この使用で気を付けたい事項があったので纏めてみました。

**® マーク**とは、よく見かける**これ**です。
　　　　　　　![Rマーク.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645711/d340a485-56ce-9525-5727-3d57a017db20.png)
**日本における® マーク使用の前提**
次のことから、日本では**® マーク**使用には法的効力がないこと、日本で登録商標になっていない名称に**® マーク**を使うと虚偽表示になるリスクがあることがわかります。

①	日本の商標法は、商品名には商標登録表示を付けるように務めなければならない条文**(商標法73条)**がありますが、登録商標を意味する**® マーク**の使用については規定されていません。

②	**® マーク**を日本で使用しても法的効力がないばかりか、他の条文**(商標法74条)**により、登録商標でないものに**® マーク**を使うと、紛らわしい表示をしたとして虚偽表示とされる可能性があります。

③	商標権は属地主義です。これは権利を取得した国での権利であり、日本で商標権を取得した場合、日本での権利となります。**日本で取得した権利は他国には及びません。逆も同じです。**権利を主張したい場合は、その国で商標権を取得する必要があります。

**前提から考えられること**
日本の登録商標に**® マーク**を付与することは、その名称が登録商標であることを示しているだけなので問題ないです。しかし、登録商標と言えないものに**® マーク**を付与すると虚偽表示になる可能性があります。
![hyou.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645711/35ee0589-a969-3543-b4b4-13107f94bba6.png)

**リスクの回避策**
日本で商品名に**® マーク**を付与する場合、次の方法を意識することで虚偽表示とされるリスクを回避できると考えます。

①**® マーク**を付与する対象(商品名)が、日本で登録商標になっているかを確認します。
　確認方法：工業所有権情報・研修館[INPIT]
　　　　　　**特許情報プラットフォーム「J-PlatPat」**で登録商標になっているか確認
　　　　　　URL：https://www.j-platpat.inpit.go.jp/

②**® マーク**を付与する対象(商品名)が、日本の登録商標と全く同じではない場合、登録商標に**® マーク**を付与しているとは言えないです。**® マーク**を付与する対象が登録商標と全く同じ名称かを確認する必要があります。
例：登録商標が小文字、商品名が大文字の場合、登録商標と**全く同じとは言えない**です。

③**® マーク**を付与する対象(商品名)が、どこの国の登録商標かを確認し、当該国の登録商標であることを表示することでリスクを回避できます。また、対象の開発元が商標ガイドラインを発行していれば、そこに記述がある商標登録表示を参考にするのも有効です。
　　　例：「製品名称ABC」は、米国における登録商標です。
　　　　　「製品名称ABC」は、米国その他の国における登録商標です。

**まとめ**
・**® マーク**を付ける時は、それが日本の登録商標かを確認するのが有効です。
・日本では**® マーク**よりも商標登録表示が有効です。
・**® マーク**を付与しない選択肢もあります。

**おわりに**
今回の投稿は、日本での**® マーク**の使用について纏めたものであって、皆様の今後の活動において、少しでも商標リスクの低減に繋げられれば幸いと考えております。
本投稿にお付き合いくださり、ありがとうございました。

**ご参考**
（商標登録表示）
第七十三条　商標権者、専用使用権者又は通常使用権者は、経済産業省令で定めるところにより、指定商品若しくは指定商品の包装若しくは指定役務の提供の用に供する物に登録商標を付するとき、又は指定役務の提供に当たりその提供を受ける者の当該指定役務の提供に係る物に登録商標を付するときは、その商標にその商標が登録商標である旨の表示（以下「商標登録表示」という。）を付するように努めなければならない。

（虚偽表示の禁止）
第七十四条　何人も、次に掲げる行為をしてはならない。
一　登録商標以外の商標の使用をする場合において、その商標に商標登録表示又はこれと紛らわしい表示を付する行為
Webサーバーとアプリケーションサーバーについて

#はじめに

転職活動用のポートフォリオを作成中です。今回AWSを利用したデプロイを行いました。そこで「Webサーバー」と「アプリケーションサーバー」という概念が登場したため、違いや概要などを備忘録及び復習のため記事を投稿します。

#そもそもサーバーとは？？

サーバーって何？と聞かれて、詰まってしまったので今回は [こちら](https://umaroidblog.com/https-umaroidblog-com-webtechnology2)の記事を参考にさせていただきました。

👉「ユーザーのリクエスト（要求）を受け取り、正しいレスポンス（結果）を返す」という役割。「ユーザーがリクエストとして、URLをサーバーに送り、サーバーはレスポンスとしてビューページのファイルをユーザーに返す」イメージ。

上記に掲載している記事では「レストランのウェイター」というイメージで例えられていました。なるほど。。。

また、サーバーの中身は、ハードウェア・OS・ミドルウェア・アプリケーションで構成されており、今回のテーマである、Webサーバーとアプリケーションサーバーは「ミドルウェア」に位置するそうです。

それでは本題に入ります。

#Webサーバーとは

👉静的コンテンツ（リクエストの度に内容が変更されないファイル（画像・文章など）のこと）のみをリクエストとしてクライアントに返す役割。
ここで言う「クライアント」とは、サイトを閲覧するブラウザのことを示します。Nginxなど

#アプリケーションサーバーとは

👉動的コンテンツ（リクエストの度に内容が変更されるファイルのこと）を生成し、処理結果をWebサーバーに返すという役割を果たします。具体的にはアプリケーションサーバーが、アプリケーションサーバー内に設置されているアプリケーション本体にリクエストの指令を出します。アプリケーション本体が処理を完了すると、アプリケーションサーバーはその処理結果をレスポンスとしてWebサーバーに返します。Unicornなど

#処理の流れ

上記で記載した処理の流れを記述すると、
①クライアントからのリクエスト全てが、まずWebサーバーに送られる
②Webサーバーが、「Webサーバー内で処理することができる」と判断すれば、ブラウザにレスポンスを返す。
※Webサーバー内で処理できるものとは、データベースを介さず、静的コンテンツのみをリクエストとして返却するもの。
③「Webサーバー内で処理することができない」と判断されれば、処理をアプリケーションサーバーに依頼し、アプリケーションサーバー内で処理する。
④アプリケーションサーバーでの処理結果をWebサーバーに返す。
⑤Webサーバーはアプリケーションサーバーから帰ってくる処理をブラウザにレスポンスとして返す。

と言う流れになると思います。
個人的メモ(vim関連)


#はじめに

個人的なメモです


#molokaiの設定

```

$ mkdir ~/.vim
$ cd ~/.vim
$ mkdir colors
$ git clone https://github.com/tomasr/molokai
$ mv molokai/colors/molokai.vim ~/.vim/colors/
$ vi ~/.vimrc
```


```
syntax on
colorscheme molokai
set t_Co=256
```


#deinのインストール

```

mkdir -p ~/.vim/dein
cd ~/.vim/dein

# dein.vimのインストールスクリプトを導入（curlを利用）。
sudo apt install curl
curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
sh ./installer.sh ~/.vim/dein

```



#参考文献

- [dein.vimのインストール＆プラグイン導入](https://ashnoa.hatenablog.com/entry/2019/10/16/230202)
- [vimのカラースキームをMolokaiに変更する](http://pyoonn.hatenablog.com/entry/2014/10/04/225321)
[iOS] iPhone12 miniでStatusBarの高さ取得が期待した動作をしないのと対策

## 発生した事象
- iPhone12 miniで`statusBar height`をレイアウトの計算に使っていたら期待した結果にならず、レイアウトがずれてしまった。

## 環境
```
Xcode 12.3
Build version 12C33
Apple Swift version 5.3.2 (swiftlang-1200.0.45 clang-1200.0.32.28)
Target: x86_64-apple-darwin19.6.0
```

## 検証
- 実際にsampleアプリを作り、シミュレータで取得した値を表示してみた

#### iPhone12
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/8f9506b1-f999-3644-0c72-195311c2270b.png" width="320">

#### iPhone12 mini
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/4e25f9f9-86be-8c8d-d33c-bcd43cd8e296.png" width="320">

#### iPhoneSE 2nd
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/7f2fba9a-d36a-71dd-d5aa-b67a1bad698e.png" width="320">

- iPhone12 miniではsafeAreaとstatusBar heightで差分が発生していることがわかりました。
- 検証コード　[t-osawa-009/StatusBarTest](https://github.com/t-osawa-009/StatusBarTest/tree/main)

## 対策
- safeAreaの値を使って、レイアウトの計算に使うように変更しました

```swift
let height = navigationController?.view.safeAreaInsets.top ?? 
let height = view.safeAreaInsets.top
```

## まとめ
- `statusBar height == safeAreaInsets.top`ではない。
- 今後はsafeAreaを基準にレイアウトを組むことをおすすめします。

## 参考リンク
https://useyourloaf.com/blog/iphone-12-screen-sizes
https://developer.apple.com/forums/thread/662466
JetBrainsのフォントを1日で気に入った話

# はじめに
投稿者はフォントには疎い人間なので素人目線の話になってます。
ご了承ください...

# JetBrains Mono
今回紹介する1日で気に入ったフォントです！
IDEAやPyCharmでお馴染みのJetBrains社が開発しているオープンソースのフォントです。

公式サイトのトップに
**「 JetBrains Mono は開発者向けの書体です　」**
と堂々書かれています。
開発者の心を鷲掴みですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/0e3b60fb-0129-d4ff-da06-04fe131a4690.png)

# インストール
公式サイトからインストールできます。
https://www.jetbrains.com/ja-jp/lp/mono/

ちなみに最新のIDEAやPyCharmではデフォルトで入っているらしいです。

# 何が気に入ったか
## リガチャに対応
一番の衝撃はここでした。
そもそも**リガチャ**が何なのか知らなかった...
### リガチャとは
`->` や `<=`, `==` といった比較演算子などの文字を１つにまとめてくれる機能らしいです。
イメージを見て貰えばわかると思いますが、エディターの可読性が格段に向上します。
JavaScriptやKotlinでラムダ式などを多用する場合に重宝しそうですね。

*リガチャOFF*
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/e3679a37-886c-14f6-4f3f-84ef5436a3c5.png" width="320" />

*リガチャON*
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/6c938531-c0de-7ee6-89e4-5afddb1904ac.png" width="320" />



この機能を使うにはエディタ側で設定してあげる必要があります。

### 設定方法
#### JetBrainsのIDE
Editor -> Font から **Enable font ligatures** を **ON**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/ad7924c8-7d48-f896-96b2-b344017ddadf.png)


#### VSCode
設定から **Font Ligatures** を探し、 *setting.json* に飛びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/1d5f298e-5128-28aa-598a-796e2411780f.png)

`"editor.fontLigatures": true` にすればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/baf92649-71c5-1ede-bfc3-bc71e3198d7b.png)

設定ができればリガチャーが反映されるはずです
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/3ec882bb-31df-23f8-7b61-352a96c71f66.png" width="512" />

## 綺麗
個人的な感想

## 見やすい
個人的な感想

## PowerLineに対応
一部ですがPowerLineのフォントに対応してます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278251/05f4c129-0292-fca2-3808-aad02f552cb4.png)

# まとめ
もっと良いフォントもあるかと思いますが個人的にはいままで使ってきたフォントの中で一番気に入りました！
JetBrains社も大好きなので愛用していきたいですね。

# 参考文献
JetBrains Mono 公式サイト
https://www.jetbrains.com/ja-jp/lp/mono/
【初心者】PHPで累乗の計算がしたい

# 累乗とは…
おそらくこれに関しては書き残しておかなくても問題ないが、もしかしたら忘れてしまうことがあるかもしれない。
累乗とは何の何乗みたいな…説明が難しい。（2の3乗が8とか、5の2乗が25のような）

これをPHPで計算したい時の表記の仕方

```php
$n ** $m; // $nの＄m乗
```
掛けるの記号を二つ並べることによって、累乗の計算ができるようになった。
四則演算に加えて覚えておきたい。絶対どこかで使うはず。
【maya】名前順で同じディレクトリの次のシーンを開く

また書くことになりそうなのでメモです。
実際にはmaファイルでソートした方がよい。

```
#coding:utf-8

import maya.cmds as cmds 
import glob
def main():
    filepath = cmds.file(q=True, sn=True)
    filename = os.path.basename(filepath)
    
    paths = sorted(glob.glob(filepath.replace(filename,"")+"*"))
    
    isOpen = False
    for lp in paths:
        lp = lp.replace("\\","/")
        if filepath == lp:
            isOpen = True
            continue
        
        if isOpen == True:
            cmds.file(lp,open =True,f=True)
            return
    else:
        cmds.warning(u"次のシーンは存在しません。")
main()

```
[Heroku] index.html をダイレクトに開く静的コンテンツサイトを、すぐ公開したい

もうすでに何日も何日も経過していますが、これは [Heroku Advent Calendar 2020]()の 5日目、6日目はHeroku Master @zunda さんの[もう少しSIGTERMと仲良くする](https://qiita.com/zunda/items/5eb9d25e06aba1329847)です。毎度ありがとうございます。

最上級の小ネタで攻めます。本番は明日です。

## Heroku 史上最速に静的コンテンツをアップロードする

「Heroku 静的」とかで検索すると、`buildpack` を使ったり `index.php` から `index.html` 読み込ませるようなやり方をしているケースが多いです。多い。実は、php の `buildpack` を指定して、ダイレクトに `index.html` させる方法はもっと単純だったりします。

答え

```bash
$ git init
$ heroku create
$ touch composer.json
$ echo 'test' > index.html
$ git add . && git commit -m 'first commit'
$ git push heroku main
$ heroku open
```

どうだ。

※ `git config --global init.defaultBranch main` 済です

## 解説

`Heroku` は、official `buildpack` のとあるチェックを利用して、`git push` されたソースコードがどの言語であるかを判定しています。default で apache をすんなり動かしてくれる `php` の `buildpack` は静的コンテンツの配信にちょうど良いので、いかにして `php` であるかを認識させるかが勝負です。ぶっちゃけ `buildpack` 指定する方法もありますが、こっちの方がコードが短い(ぉぃ

そして、`php` であることの判断基準は `composer.json` か `index.php` のいずれかが、プロジェクトルートディレクトリにあることです!! Ω ΩΩ< な、なんだってー!!

ファイルの中身は検閲していないので、ファイルさえ置いておけば十分です。`index.php` をおいてしまうと、apache がそっちを見に行ってしまうので、`composer.json` の空ファイルを置いておくことで、`index.html` を読んでくれる、という仕様です。

※ 2020/12/22 現在

### build & deploy の結果

```bash
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> PHP app detected
remote:
remote:        NOTICE: Your 'composer.json' is completely empty!
remote:
remote:        A completely empty file is not a valid JSON document.
remote:
remote:        Heroku automatically corrected this problem, but it is strongly
remote:        recommended you change the contents to at least '{}'.
remote:
remote:        For documentation on Composer and dependency management, check
remote:        out the introduction at https://getcomposer.org/doc/00-intro.md
remote:
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^7.0.0
remote:        - php (7.4.13)
remote:        - composer (1.10.19)
remote:        - apache (2.4.46)
remote:        - nginx (1.18.0)
remote: -----> Installing dependencies...
remote:        Composer version 1.10.19 2020-12-04 09:14:16
remote: -----> Preparing runtime environment...
remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 14.1M
remote: -----> Launching...
remote:        Released v3
remote:        https://xxxxxx-yyyyy-000000.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
```

何も指定していないので、デフォルトの `heroku-php-apache2` が使われていたり、`composer.json` の中身が空だよって言われてます。
アナログ回路 その23

# 概要

circuit sandboxをplunkerでホスティングした。
アナログ回路をシュミレーションで、説明してみる。

# オペアンプ・ハイパスフィルター回路

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/a15025c4-9d6e-1bb8-ae6a-b8b7b8494bac.jpeg)


# 結果

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c53955ff-4e02-97df-2eef-2a699eab9370.jpeg)


# 説明

１ｋｈｚのハイパスフィルターです。


# 成果物

https://embed.plnkr.co/plunk/rsZ78sgTtVPccv9v


以上。
お問い合わせフォーム(iframe)をDjangoで利用する

自分が作成しているサービスの中にお問い合わせフォームを埋め込みたいときに詰まった部分があったため、同じことをしたい方へ向けてメモを残します。


## 利用環境について
下記を利用しています。

- Django 3.1.3
- Python 3.9.0

## フォーム作成サービスについて
- [formrun](https://form.run/ja)

簡単にセキュアなフォームが作成できて便利でした（フォーム作成は一つまで無料でできます）

## 事前準備
- サイトのSSL化を完了させておく（httpsでアクセスできる状態にする)

## 詰まったこと
- SSL化しても、フォームが指定したページに埋め込まれない

※[formrunのQ&A](https://faq.form.run/publish#5b752b237f0ebd16b000251e-1fcc79045c39f8e23a2ce5d3)を参考に、hogehogeを自分のフォーム名にしたら埋め込まれるものだと思ってhtml内に下記を記載していたもののうまく反映されなかった

```
<script src="https://sdk.form.run/js/v2/embed.js"></script>
<div
  class="formrun-embed"
  data-formrun-form="@hogehoge"
  data-formrun-redirect="true">
</div>

```

## 解決方法
#### ステップ1： `django-http-referrer-policy` をインストールする
コマンドは下記
`pip install django-http-referrer-policy`

#### ステップ2： `settings.py`の`MIDDLEWARE`に下記を追加
```
MIDDLEWARE = [
    ...
    'django_http_referrer_policy.middleware.ReferrerPolicyMiddleware',  # 追加
    ...
]
```

#### ステップ3： `settings.py`の空きスペースに下記を追加
```
REFERRER_POLICY = 'no-referrer-when-downgrade'
```
※referrerの値の種類は[こちら](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy)が参考になります



これで無事にフォームが指定したページで表示できました🙌

### 参考サイト
- [pypi：django-http-referrer-policy 1.1.1](https://pypi.org/project/django-http-referrer-policy/)
- [MDN：Referrer-Policy](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy)
アナログ回路 その22

# 概要

circuit sandboxをplunkerでホスティングした。
アナログ回路をシュミレーションで、説明してみる。

# オペアンプ・ローパスフィルター回路

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/2ddee81e-e1d3-5591-19fd-3b022291a16d.jpeg)


# 結果

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/794ef28d-07d1-440b-ef8e-7335647e1862.jpeg)


# 説明

１ｋｈｚのローパスフィルターです。

# 成果物

https://embed.plnkr.co/plunk/eLJDcw02sN7RCVXW


以上。
deviceでdefault_scopeを外す

対象のmodelでoverrideする
grepすると他にも気になる箇所は他にもあるけど、メール認証してない場合、取り敢えずこれで行けました
詳細は参考の一つ目が詳しいので参照ください

```
  class << self
    def serialize_from_session(key, salt)
      record = to_adapter.klass.unscoped.find(key[0])
      record if record && record.authenticatable_salt == salt
    end

    def find_first_by_auth_conditions(tainted_conditions, opts = {}) 
      to_adapter.klass.unscoped.where(devise_parameter_filter.filter(tainted_conditions).merge(opts)).first
    end
  end
```

参考
https://ja.ojit.com/so/ruby-on-rails/1631741
https://qiita.com/irisAsh/items/513b8b58f54421b9a1a0
https://qiita.com/shizuma/items/c8c2e71af8c1dcf3d1c2