OmniAICreator/Qiita-1.07M huggingface dataset:
平日または休日に自働でズレて通知されるリマインダー、ホリデーリマインダー

<a href="https://figreen.org/holiday/">ホリデーリマインダー</a>は、リマインダーの繰り返し設定で、通知日が土日祝日になった時だけ前営業日(もしくは翌営業日)の平日に自働でズレてリマインダーメールが送られるというサービスです。

また、その逆の、設定日が土日祝日になった時だけ通知するということもできます。具体的には下記のようなシーンでライフハックを発揮します。

・毎月の25日にATMからお金を引き出しているのに、今月の25日は土曜だったせいで手数料がかかってしまった。←ホリデーリマインダーで前日の金曜日に通知できる。

・毎週火曜日がゴミの日で火曜にリマインドをセットしてるのに、たまたま今週は火曜が祝日だったから収集日は前日だった←ホリデーリマインダーで前日の月曜日に通知できる。

・いつも通り電車に乗ろうとして駅のホームで待ってたら、祝日ダイヤだった←ホリデーリマインダーで祝日の通知ができる。

・最終営業日から数えて10営業日前といった繰り返し処理がしたい←ホリデーリマインダーを使えば可能。

曜日感覚がいつのまにか無くなり、気がつくと休日や祝日を忘れてしまって、ついいつも通りの日課をこなしてしまうという事はよくあります。そんな凡ミスを防ぐために是非ホリデーリマインダーをお役立て下さい！
<a href="https://figreen.org/holiday/">ホリデーリマインダー</a>は2016年に制作したwebサービスです。
【AWS】CloudFormationで Type: AWS::EC2::VPC や AWS::EC2::Subnet ってどういうこと？

初めまして、AWSクラウドエンジニアのルビコンと申します。

突然ですが、CloudFormationを使われているでしょうか？
リソースをコードで作れるのでインフラ構築・管理で毎日使っているサービスです。
初めて学習される際につまずかないよう、Tipsを提供させて頂きます。

## Typeとは？
TypeにはAWSリソースの種類を書きます。公式ドキュメント ([AWS resource and property types reference \- AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-template-resource-type-ref.html)) には `service-provider::service-name::data-type-name` を書くと定義されています。

例えば下記YAMLではRubiconLinkという名前のユーザーを作成できます。

```yaml
Resources:
  UserRubiconLink:
    Type: AWS::IAM::User
    Properties:
      UserName: RubiconLink
      LoginProfile:
        Password: ILoveQiita!
        PasswordResetRequired: true
      Groups:
        - !Ref GroupAdministrators
```

Type: `AWS::IAM::User` や `AWS::IAM::Group` は抵抗ないでしょう。IAMでUserやGroupを作るということですね。確かにIAMの管理画面でもUserやGroupのメニューがあります。

## `AWS::EC2::VPC` や `AWS::EC2::Subnet` に違和感
下記YAMLではVPCを作成できます。

```yaml
Resources:
  VPC:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: 10.0.0.0/19
      EnableDnsHostnames: true
      EnableDnsSupport: true
      InstanceTenancy: default
      Tags:
        - Key: Name
          Value: awsmaster-prod-vpc
```

AWSを少しでもかじったことがあると、Type: `AWS::EC2::VPC` や `AWS::EC2::Subnet` は抵抗ありますね。というのもAWSの管理画面からすると、VPCというサービスの中にVPCやSubnetのメニューがあるので `AWS::VPC::VPC` や `AWS::VPC::Subnet` の方が自然に思えるからです。

実はAWSの裏側としてはCFnの方が正解で、VPCやSubnetなど「VPC」の画面にまとめられているリソースは全て「EC2」のリソースなのです。なので Type: `AWS::EC2::VPC` や `AWS::EC2::Subnet` となります。

### 歴史的経緯
AWSでEC2がリリースされた2006年当初、VPCは存在しませんでした。その後、EC2をネットワーキングするための機能として2009年にVPCがリリースされた経緯があるのでしょう。

実はその名残がAWSの画面でも残っており、Security Groupというリソースは全く同じものを「EC2」の画面でも「VPC」の画面でも見ることができます。さらにRDSでは「VPC Security Group」という表記があります。普段「EC2」の画面でSecurity Groupを触っていると違和感がありますが、EC2とVPCの関係を知っていると謎が解けます。

### EC2-Classic
蛇足ですが、VPCが存在しない時代のEC2は「EC2-Classic」と呼ばれていました。下記のサイトも参考まで。

- [EC2-Classic - Amazon Elastic Compute Cloud](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-classic-platform.html)
- [EC2-Classic からの脱却！ VPC 完全移行 ~ Backlog 編 | 株式会社ヌーラボ(Nulab inc.)](https://nulab.com/ja/blog/backlog/move-vpc-ec2-classic/)

## おまけ
週4稼働の現役クラウドエンジニアと並行して、毎日AWSの個別相談やグループ指導もお受けしています。もしご興味あればTwitter [@RubiconLink](https://twitter.com/RubiconLink) のDMまでお問い合わせください。フォローも大歓迎です。
pipでパッケージを一括更新する手順

python 3.9.4 に入れ替えたとき、パッケージを一つずつ更新していくのが面倒で楽したときのメモ

## 事前準備

pip の更新や、パッケージ自体はインストール済みであること。
pip で過去のパッケージを入替後にインストール手順は前記事「[python 入替時に pip でパッケージを再導入する手順](https://qiita.com/net3/items/69939eead87eb11f441a)」を参照

パッケージ [pip-review](https://pypi.org/project/pip-review/) をインストール

```
pip install pip-review
```

## 全パッケージ更新

pip ではなく pip-review を使用する。

```
pip-review --auto
```
AWS 認定 デベロッパー – アソシエイト 合格までの道のり

## はじめに

みなさんこんにちは！
ハンズラボのサムです！

いつの間にか桜が咲いてもう散りかけてるという現実に衝撃を受けております・・・。
ゴールデンウィークも間近ですが、皆様如何お過ごしでしょうか！？

今回はAWS認定 デベロッパーアソシエイトのお話です！
直近アソシエイト系は
・ソリューションアーキテクトアソシエイト
・SysOpsアドミニストレータアソシエイト
を持っていたので、次資格を取るならデベロッパーアソシエイトかなと思い考えていたところ、
AWSの試験対策本を出されている山下先生が丁度デベロッパーアソシエイトの本を出版されていたので購入＆そこから流れで、
勉強会で登壇などやっていたのでつい1週間ちょっと前？ぐらい前の話になります！

詳しくは下記記事にて！
https://qiita.com/sam_eng3336/items/108dd6c3ff138b7a7ea2

その後、一昨日(4/16)に試験を受けてまいりました！

## 目的

全体目標の11冠(Alexaがなくなったから)で残ってる試験を考えた結果、
アソシエイト系でデベロッパーアソシエイトを取ってなかったので取ろうという流れだっただけです！

まずはアソシエイト3冠したいですからね〜

## スケジュール＆試験対策

登壇でデベロッパーアソシエイトの内容を扱ったので、その準備もいれるなら約2週間です！

- 1週間目は登壇の準備や事前知識、デモの準備など
- 2週間目は山下先生著書のデベロッパーアソシエイト本の読み進めとUdemyの模試を活用

こんな感じになっております。
また、2週間ずっと勉強してたと言うよりは隙間隙間で本を読んだり登壇資料をつくってたので、
実際に費やした時間は2週間よりは少ないです・・・。

## 実際のテストの雰囲気など

試験センターは定番の新宿駅前テストセンターに行きました！！
もう定番になりつつある試験センターなので迷わないですが、初めて行く人はGoogleMapなどでよく場所を確認してから行ってくださいね！
ここの試験場はトイレもあるしキレイなので好き・・・

試験の時間配分ですが、試験時間130分で実際に使った時間は見直し込で1時間半~2時間ぐらいでした！(ちゃんと時計見てなかった...)
問題文の分量の多いものもあれば少ないものも混じってるのであれですが、見直し含めても時間が余るぐらいの時間配分でした。
※定番の問題とか答えそれしかないやろって問題は即答できるからその分時間が余ったのかな？

申し込み機関：ピアソンVUE
試験会場：新宿駅前テストセンター

![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_181414_91bb1fb2-f732-f2c3-2048-08fd04a0743e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/a60b1a46-112e-6e7c-4c21-50967a639f14.png)

## 結果

### 模試の結果

実際のテスト前に一応公式の模試を受験したのですが、結果がこれ・・・
![スクリーンショット 2021-04-18 11.07.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/35ace6d5-778e-63d5-47bf-75e18f744dd2.png)

総合スコア30%ってやばいですよね・・・
これには理由があって朝模擬試験やったら会議があったのすっかり抜けてて、大慌てでポチポチしたらこんな結果に。
スケジュール管理大事！！

### 本試験の結果

実際の試験結果がこちら！
多分過去最高得点更新です！(900点台とかではないけど...

![スクリーンショット 2021-04-18 11.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/07f5077f-5999-87c9-b3f9-4f1e6b2fa4b9.png)

因みに初めてスコアと評価で全ての項目で十分な知識を有するになりました！やったね！

![スクリーンショット 2021-04-18 11.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/0f3d7bb7-6aa5-c327-84df-0968055c1531.png)

## 感想

今回AWSデベロッパーアソシエイト関連の登壇をした後だったので、合格するかヒヤヒヤしましたが、無事合格しました！
問題の傾向的を詳しく言うとNGなので言えないですが、公式の模試などを参考にすれば傾向は分かるかなと思います！
一応合格したものの、やはりAWSは奥が深いのでここで手を抜かずしっかり学習をして次の試験に備えて、
このまま流れで行けば次はAWS 認定 DevOps エンジニア – プロフェッショナル辺りかなと考えております。
プロフェッショナル系は一度落ちてるのでしっかり合格できるように知識を蓄えた上で受験したいと思います！

最後まで読んでいただきありがとうございました！
python 入替時に pip でパッケージを再導入する手順

python 3.9.4 に入替えたときのメモ

## python 入替前の作業

入替前に今入っているパッケージ一覧を作成しておく。

```
pip freeze > pip_freeze.txt
```

## python 入替後の作業

pip 自体を更新

```
pip install -U pip
```

freezeリストからパッケージをインストール

```
pip install -r pip_freeze.txt
```
sequelize-cliのmigrationディレクトリを変更したい

毎回忘れるので書いておく。

## まとめ

```shell
$ npx sequelize migration:generate \
  --config db/config.js \
  --migrations-path db/migrations \
  --seeders-path db/seeders \
  --name user
```

または、`.sequelizerc`に書き出す。

```js:.sequelizerc
module.exports = {
  'config': 'db/config.js',
  'migrations-path': 'db/migrations',
  'seeders-path': 'db/seeders',
}
```

## バージョン

- sequelize-cli [v6.2.0](https://github.com/sequelize/cli/releases/tag/v6.2.0)


## 調べるとき

ヘルプに書いてある。

```shell
$ npx sequelize-cli  migration:generate --help

Sequelize CLI [Node: 15.11.0, CLI: 6.2.0, ORM: 6.6.2]

オプション:
  --version          バージョンを表示                                                                                                                                [真偽]
  --help             ヘルプを表示                                                                                                                                    [真偽]
  --env              The environment to run the command in                                                                             [文字列] [デフォルト: "development"]
  --config           The path to the config file                                                                                                                   [文字列]
  --options-path     The path to a JSON file with additional options                                                                                               [文字列]
  --migrations-path  The path to the migrations folder                                                                                  [文字列] [デフォルト: "migrations"]
  --seeders-path     The path to the seeders folder                                                                                        [文字列] [デフォルト: "seeders"]
  --models-path      The path to the models folder                                                                                          [文字列] [デフォルト: "models"]
  --url              The database connection string to use. Alternative to using --config files                                                                    [文字列]
  --debug            When available show various debug information                                                                               [真偽] [デフォルト: false]
  --name             Defines the name of the migration                                                                                                      [文字列] [必須]
  --underscored      Use snake case for the timestamp's attribute names                                                                          [真偽] [デフォルト: false]
```
M1のMACでFirebaseを使うとstoryboardが真っ黒になる

# はじめに
M1のMACでXcodeにFrebaseを[pod install]すると、storyboardの画面が真っ黒になります。

# 解決方法
巷ではcomand+shift+Kなど色々ありますが、私が解決した方法解決方法は次の通りです。

* Xcodeを”Rosettaにしない”

常識なのかもしれませんが、私は知りませんでしたw
また、それでも治らない場合はXcodeを再インストールすると治るかもしりません。
初めはXcodeを再インストールすると治りましたが、[pod install]する度に真っ黒になったので、色々考えてたらRosettaにしないに行き着きました。
【Docker】Laravelのレスポンス改善

## はじめに
Docker上にLaravel環境を作成して開発をしていました。
なんてことないリクエストの処理に10秒程度かかることもあり、原因を調べてみたところDockerの設定に問題があるようなので対策をしました。

## 環境

- Windows 10
- Docker for Windows
- PHP 8.0.3
- Laravel 8.5.15

### ディレクトリ構成
```
.
├── app # アプリケーションのソース(Laravel)
├── docker-compose.yml
└── infra # Dockerfile等の設定ファイル
```

## 原因

ホスト側のvendorディレクトリをマウント(バインドマウントと言うらしい)しているのが原因でした。

## 対策

名前付きボリュームを利用します。

```docker-compose.yml
version: '3.5'

services:
  php:
    build: ./infra/php
    image: performance_test_fast
    container_name: performance_test_fast
    environment:
      VIRTUAL_HOST: 'fast.localhost'
      CERT_NAME: 'localhost'
    volumes:
      - ./app:/var/www/html
      - ./infra/apache/000-default.conf:/etc/apache2/sites-enabled/000-default.conf
      - vendor-store:/var/www/html/vendor # 追加
    networks:
      - performance-fast-network
      - proxy-network

networks:
  performance-fast-network:
    name: performance-fast-network
  proxy-network:
    external: true
    name: proxy-network

volumes:            # 追加
  vendor-store:     # 追加
```

## 結果

目で見てわかるレベルで速度が改善されました。

|改善前|改善後|
|------|-----|
|5100ms|137ms|



## 最後に

今までとりあえず動けばいいやという感覚で設定していたので、これを機にDockerの設定ファイルの見直しをしていきたいと思います。

間違いや改善点があればコメントにて教えていただければ幸いです。

## 参考

[ボリュームの利用](https://matsuand.github.io/docs.docker.jp.onthefly/storage/volumes/)
[Docker の Volume がよくわからないから調べた](https://qiita.com/aki_55p/items/63c47214cab7bcb027e0)
[Docker Composeのvolumesを使ってもっと効率的に](https://qiita.com/tanaken0515/items/a564d2c46b2942b83ebb#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95)
gitを使って間違って消してしまったディレクトリやファイルを復活させる

## 結論

下記のコマンドを使ってブランチを切り替えることで復活可能です。
``git checkout ブランチ名　-f``

■大まかな手順
１．今いるブランチの変更を全て破棄して、別のブランチに切り替える
２．また元のブランチに戻る（終わり）


## 例

例えば以下のような構成のviewディレクトリを間違って消してしまったとする

```
//間違って消す前のディレクトリ構成
sample
  |__app
  |   |__test.php
  |
  |__view　　←←←←←←←←今回はこのディレクトリを間違って消します
      |__sample.html

↓↓↓↓↓↓

//間違って消してしまった後のディレクトリ構成
sample
  |__app
　　　|__test.php

```

## 手順

消してしまった今のブランチの変更を全て破棄して、別のブランチに切り替えます

```terminal
// 今いるブランチを確認（今回の場合はhogeブランチにいるとします)
$ git branch
* hoge
  develop
  main

// 何でもいいので別のブランチに変更します。（-fを必ずつけます。）
$ git checkout develop -f

```

また元いたブランチに切り替えます
切り替えた時点で戻っているとディレクトリが復活していると思います。

```terminal
//　元のブランチに戻る（今度は-fつける必要はない）
$ git checkout hoge
```

## 解説 
ポイントとなる下記のコマンドの``-f``の意味は何か？
``git checkout ブランチ名　-f``

意味としては__そのブランチで行っていた変更内容を破棄する__となります。

今回の例で言うと、hogeブランチで行っていた作業内容を一旦破棄して、developブランチに移動するということになります。
そのため再びhogeブランチに戻ってきた時は、viewディレクトリを消す前の状態のhogeブランチに戻ってきたということになります。
【jQuery】追加した要素にイベント処理を設定することに失敗した

jQueryを使ってページに要素を追加し、その要素にイベント処理を設定しようとしたところ、失敗しました。
かなり初歩的なミスでした。

まず、こんな感じでボタンを用意します。

```html
<body>
    <button id="first">ボタンを追加する</button>
</body>
```

ボタンを押すとボタンを追加するようにします。
追加したボタンを押すと、メッセージが表示されるようにします。

```javascript
$(function(){

    $('#first').click(function(){
        $('body').append('<button id="second">メッセージを表示する</button>');
    });

    $('#second').click(function(){
        alert('このメッセージは表示されません！');
    });

});
```

しかし、このような書き方だと、メッセージは表示されません。
追加したボタン(`id="second"`)は、ページ読み込み時に存在していなかったため、イベント処理を設定できなかったようです。

```javascript
$(function(){
    $('#first').click(function(){
        $('body').append('<button id="second">メッセージを表示する</button>');
    })

    $('body').on('click', '#second', function(){
        alert('このメッセージは表示されます！');
    });
});
```

このように`on`メソッドを使うと、ページ読み込み時に存在しなかった要素にもイベント処理を設定できます。
proxy環境下でpythonのpipを使用する

# 環境
- OS：windows10

# 背景
proxy環境下ではpipを使用したインストールが上手く行かないケースに遭遇するかと思います。
これまでは、ネットワークを切り替えたりして煩わしい思いをしてきたかと思いますが、
環境変数にproxyの設定情報を登録することで、proxy環境下でもインストール可能になります。

# 手順
pipを使用してライブラリをインストールする際に、コマンドプロンプトにて下記コマンドを実行して環境変数を登録します。
システムの詳細設定から直接環境変数を登録してもOKです。

```
set https_proxy=http://<user>:<pass>@<host>:<port>
pip install hogehoge
```

- "https_proxy"です（私の場合、http_proxyでは上手くいきませんでした）
- &lt;user&gt;もしくは&lt;pass&gt;に@が含まれている場合、%40でエスケープしてください
    - 例）ユーザーにメールアドレスを使用している場合
        - xxx@jp　⇒　xxx%40jp
React Slickの基礎知識

## はじめに
業務の中で`react-slick`を使用する機会があったので
使用方法やオプションなどメモ代わりに書いていきたいと思います。
ユースケースは別で書こうと思います。

## アジェンダ
- React Slickとは
- 導入
- 使用方法
- 個人的よく使うオプション

## React Slickとは

[react-slick/git-hub](https://github.com/akiran/react-slick)
[React Slick Documentation](https://react-slick.neostack.com/)

スライダーやカルーセルを簡単に実装でき、
レスポンシブ対応や豊富なオプションを使用できるのが特徴です
元々jQeryのプラグインであるSlickを
Reactでも使用できるようモジュール化したものになります。

## 導入
npmを使用する場合の導入までを公式から拝借。
パッケージのインストール

```
npm install react-slick --save
```

CSSをインストール

```
npm install slick-carousel

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
```

これで準備は整いました。

## 使用方法

ここでは画像3枚を配列に入れて使用しています。
settingsにオプションを指定し、Sliderに渡すだけで
簡単にカスタムすることができます。

```react
import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
  };
  
  const images = [image, image2, image3]
  return (
    <Slider {...settings}>
      {images.map(img)=>
        <div>
          <img src={img} alt="pictuer" />
        </div
      }
    </Slider>
  );
}
```

## 個人的よく使うオプション
個人的によく使うオプションを中心に紹介します。
jQueryのSlickとは異なる部分もあるので注意が必要です。
なお主観で機能と見た目でオプションを分類しています。


### 機能に関するオプション

#### autoplay
スライドを自動再生します。
Type: bool
Default: false

#### infinite
コンテンツをループさせます(① -> ② -> ③ -> ① ...)
Type: bool
Default: true

#### initialSlide
最初に表示するスライドを指定します。
Type: int
Default: 0

#### lazyLoad
画像の読み込むタイミングを指定します。
progressiveは最初にまとめて、
ondemandは遅延読み込みをします。
Type: ondemand / progressive
Default: null

#### slidesToScroll
一度にスライドを何枚スクロールするか指定します。
Type: int
Default: 1

#### slidesToShow
フレーム内にスライドを何枚表示するかを指定します。
Type: int
Default: 1

#### speed
スクロール、フェードアニメーションの速度msで指定します。
Type: int
Default: 500

#### pauseOnHover
`autoplay`がtureの場合に
自動再生をマウスホバーで一時停止します。
Type: bool
Default: false


### 見た目に関するオプション

#### arrows
「前」「次」のスライドを操作する矢印を表示します。
Type: bool
Default: true

#### centerMode
現在表示しているスライドを中央に配置し、
次のスライドを少し見切れて表示させます。
Type: bool
Default: false

#### centerPadding
`centerMode`を指定した場合に
見切れて表示をさせる割合を指定します。
Type: string
Default: '50px'

#### customPaging
`dots`がtrueの場合ドットナビをカスタムできます。
Type: func
Default: i => <button>{i + 1}</button>

#### dots
ドットナビを表示します。
Type: bool
Default: false

#### fade
スライドの切り替え方をフェードにします。
Type: bool
Default: false

#### nextArrow
`arrows`がtureの場合に
「次」の矢印の見た目をHTMLでカスタムできます。
Type: html
Default: <button type=”button” class=”slick-next”>NEXT</button>

#### prevArrow
`arrows`がtureの場合に
「前」の矢印の見た目をHTMLでカスタムできます。
Type: html
Default: <button type=”button” class=”slick-prev”>Previous</button>

## おわりに
カルーセルも一から実装しようと思うと手間ですが
Slickだと、とても簡単に実装できます。

最後まで、見ていただきありがとうございました。
AWS Well-Achitected フレームワーク

# 概要

AWS、クラウドシステムを学び、運用する上で重要な概念である**AWS Well-Architected フレームワーク**について簡単にまとめました。本フレームワークは原則であって、厳守するものではないことが注意点です。
AWS CloudTech で学んだことのまとめです。

# AWS Well-Architected フレームワークとは

AWS の長年の知見が詰まったペストプラクティス集。5 つのカテゴリーに分かれる。

1. 運用上の優位
1. セキュリティ
1. 信頼性
1. パフォーマンス効率
1. コスト最適化

## 運用上の注意

開発をサポートし、ワークロードを効率的に実行し、運用に関する洞察を高め、ビジネス価値をもたらすためのサポートプロセスと手順を継続的に改善する能力

- ログを監視し、モニタリングする
- インフラをコード化し、安全に、頻繁にアップデートする

## セキュリティ

セキュリティの柱では、データ、システム、資産を保護し、クラウドテクノロジーを活用し、セキュリティを向上させる機能

- 権限管理、追跡調査ができる仕組み
- 全てのレイヤーへのセキュリティを適用
- 継続改善する仕組み
- リハーサルや自動復旧の仕組み作り

## 信頼性

期待されるタイミングで、意図した機能を正確にかつ一貫して実行するワークロードの能力。ライフサイクル全体 j を通じてワークロードを運用及びテストする機能を含む

- 単一障害点（一箇所の障害で全てがストップする箇所）がないか
- 自動的にリソース拡張する仕組み
- 障害の影響を軽減する仕組み
- 事前テストの実施

## パフォーマンス効率

システムの要件を満たすためにコンピューティングリソースを効率的に使用し、要求の変化とテクノロジーの進化に対してもその効率性を維持する能力

- 最新テクノロジーのメリットを理解し、選定する
- 価値の高い仕事に集中する
- 最新テクノロジーの比較、実験を頻繁に行う

## コスト最適化

最も低い価格でシステムを運用してビジネス価値を実現する能力

- コストを計測し、削減できる取り組みの実施
- 差別化に繋がらない高負荷の作業に費用をかけない
- 費用を分析・属性化（タグ付け）を行う

# 用語

|      用語      | 説明                                     |
| :------------: | :--------------------------------------- |
| リフト＆シフト | オンプレミスからクラウド環境への移管作業 |

# 参考

[AWS Well-Achitected フレームワーク](https://wa.aws.amazon.com/wellarchitected/2020-07-02T19-33-23/index.ja.html)<br>
[AWS CloudTech](https://aws-cloud-tech.com/)
Effective Java(第3版) 項目2 多くのコンストラクタパラメータに直面したときにはビルダーを検討する

インスタンスの生成に多数のパラメータ、特に多数のオプションのパラメータが必要な場合は、ビルダーを検討するべき、という内容です。

# 記載内容
## メリット

1. 多数のコンストラクタオーバーロードを用意するより、利用側のコードが分かりやすくなる
1. オプションの項目を後からsetするような状況を避けることが出来る
1. ビルダーが戻り値型の任意のサブタイプのインスタンスを返すことが出来る

## デメリット
特に記載されていません

# 考察
## メリットについて
ファクトリメソッドと同じく、不変クラスの生成に向いていると思います。
呼び出し側のコードが、他言語にある名前付きパラメータのようになるのも分かりやすいです。

ただ、呼び出し側のコードで、何番目のパラメータが何の項目を指定しているのかが分かりづらい、
というのは、IDEの補助があればさほど大きな問題にはならないかもしれません。

また、パラメータの数が多すぎる場合に、いくつかのパラメータをまとめたクラスを定義し、
そのインスタンスを渡すようにすれば解決できるかもしれません。

## デメリットについて
記載されていませんが、ファクトリメソッドと同様に、

1. サブクラスが作れない
1. プログラマがインスタンスの生成方法を見つけるのが難しい

というデメリットは発生します。

また、ビルダークラス分のコード量が増える、というのはデメリットと思われます。

## まとめ
本では「コンストラクタやstaticファクトリメソッドが多くのパラメータを持つクラスを設計する際には、Builderパターンは良い選択です」と記載されていますが、
実際にビルダーを導入するべきなのかは難しい判断だと思います。

ビルダー自体は決まりきったコードなので、実装は容易なのですが、
どの程度のパラメータ数なら導入するのか、
将来のパラメータ追加をどの程度考慮するべきなのか、
ビルダー分のコード量増加というデメリットとのバランスを考える必要が有ります。

一度publicコンストラクタを公開してしまえば、後からビルダーを導入することが難しくなる、
というのも判断を難しくしていると思います。
Powershell上でAzureADの認証エラーの対処法

#エラー発生
PowerShellでAzureADへの接続時、以下のエラーが発生した。
($credential = Get-Credentialは実行済み。)

```
Connect-AzureAD -Credential $credential
```

```
Due to a configuration change made by your administrator, or because you moved to a new location, you must use multi-factor authentication to access 'xxx'.

+ CategoryInfo : 認証エラー: (:) [Connect-AzureAD]AadAuthenticationFailedException
```

#対処法
今回はAzureAD上で多様素認証を有効にしていた。そのため`-Credential $credential`は必要なく、単純に`Connect-AzureAD`を実行すると自動で多様素認証の画面が出てくる。
そこで画面に従い必要情報を入力すれば、接続できる。

参考
https://docs.microsoft.com/ja-jp/microsoft-365/enterprise/connect-to-microsoft-365-powershell?view=o365-worldwide
https://nozangyo.com/powershell_office365_setting/
ひと目でわかるOffice 365導入・運用管理編 (マイクロソフト関連書)
GitHubリポジトリの公開/非公開を切り替える方法

#設定環境
Windows10

#内容
GitHubにある既存リポジトリを公開または非公開に切り替える方法を記載します。

1. 対象のリポジトリを表示
1. Settingsページ表示
1. Change repository visibilityで画面表示
1. Change repository visibilityで公開/非公開設定
1. 設定変更
1. 設定変更確認

#手順

1. GitHubにログインし、リポジトリ一覧画面設定を変更したいリポジトリを表示します。
![スクリーンショット (236).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092461/a187659c-be86-bc1d-1b38-884dd62e0c74.png)


1. settingsタブをクリックします。
![スクリーンショット (226).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092461/f67aeba3-371a-f936-34b7-7ddbe2c1df29.png)

1. settings画面の一番下にあるDanger Zoneの中にある、Change repository visibilityの
Change visibilityボタンをクリックします。
![スクリーンショット (228).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092461/0a52600c-dbcb-9383-af99-ccb8e66cff99.png)

1. Change repository visibilityポップアップが出てくるので、公開または非公開をラジオボタンで設定します。
![スクリーンショット (231).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092461/9dde48dc-e6e5-a569-338e-b0f0c3681cf0.png)
公開設定にする→Make publicを選択
非公開設定にする→Make privateを選択

1. 「Please type [アカウント名]/[設定を変更するリポジトリ名] to confirm.」の下のテキストボックスに[アカウント名]/[設定を変更するリポジトリ名]を入力し、「I understand, change repository visibility.」のボタンをクリックします。
![スクリーンショット (233).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092461/76136432-c0b6-2665-9ac5-ab90585e3da2.png)

1. 以上で、設定変更は完了です。リポジトリ画面に戻ると、非公開の場合、リポジトリ名の横にPrivateが表示されます（公開の場合は、何も表示されません）。
![スクリーンショット (238).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092461/06ae405c-c2e3-cbef-313c-31c5b42be867.png)

個人的な備忘録を兼ねて記事を書きましたが、どなたかのお役に立てれば幸いです。


>参考：
>[GitHub Docs リポジトリの可視性を変更する](https://docs.github.com/ja/github/administering-a-repository/setting-repository-visibility)
【Rails】RailsにおけるYAMLの基本的な書き方について

# 背景
railsを学習すると拡張子がymlになっているファイルをよく見かけるため、その書き方について調べてみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。

#Yamlとは
YAML(YAML Ain’t Markup Language)。構造化されたデータのフォーマットの一種で「.yml」で終わるファイル。他にXML、JSONなどがある。各種設定ファイル、ログファイル、データ保存・交換ファイルとして使われている。

#Yamlの書き方
①スカラー&データ型

- 文字列:  
'123'、"abc"
- 数値:  
123、0.01
- 真偽値:   
true、false、yes、no、on、off
- Null:  
null、 ~
- 日付:  
2021-01-01 
- タイムスタンプ:  
2021-01-01 00:00:00 +09:00
- シンボル:    
:hoge 

②配列
行頭に「-」をつける。「-」のあとは半角スペースを入れる。

```yaml
- apple
- banana
- orange

# ["apple", "banana", "orange"]
```
半角スペースでインデントを入れると、ネストさせることもできます。

```yaml
- fruit
-                  #空の「-」を付ける必要がある
  - apple
  - banana
  - orange

#["fruit", ["apple", "banana", "orange"]]
```

③ハッシュ
「キー: 値」で表す。「:」のあとは半角スペースを入れる。

```yaml
subject: "Email Changed"

#{ "subject" =>  "Email Changed"}
```
ハッシュと配列のネストも可能です。

```yaml
- name:  Tanaka
  email: hoge@mail.com
- name:  Suzuki
  email: fuga@mail.net

#[{"name"=>"Tanaka", "email"=>"hoge@mail.com"},
# {"name"=>"Suzuki", "email"=>"fuga@mail.net"}]
```
④rubyの記述を書く(ERB形式)
「<%= 内容 %>」という形式で表します。

```yaml
root: <%= Rails.root.join("tmp/storage") %>

#{ "root" => "<%= Rails.root.join("tmp/storage") %>"}
```

⑤アンカーとエイリアス
yamlの記述を保存&呼び出しするために使う記述。アンカーは「&」、エイリアスは「*」。

```yaml
name: &mark
      fuga
email: abc@mail.com
user: 
<<: *mark

#{ "name" => "fuga", "email => "abc@mail.com", "user" => "fuga" }

```


#参考サイト・記事
https://magazine.rubyist.net/articles/0009/0009-YAML.html
https://qiita.com/tfrcm/items/5f8e4c5795ce41b214d1
https://zenn.dev/shuichi/articles/7d4a171d87a8e4938f35
Privateリポジトリからgit cloneする方法

## SSH鍵認証を行っている場合

ssh鍵認証を行っている場合は以下のコードで`git clone`できる

```
git clone git@github.com:[リポジトリの所有アカウント]/[リポジトリ名].git
```

## SSH鍵認証を行っていない場合

ssh鍵認証を行っていない場合は以下のコードで`git clone`できる

```
git clone https://[リポジトリの所有アカウント名]@github.com/[リポジトリの所有アカウント]/[リポジトリ名].git
```

この場合，パスワードの入力が求められる．
なお，`git clone https://[リポジトリの所有アカウント名]:[パスワード]@github.com/[リポジトリの所有アカウント]/[リポジトリ名].git`でパスワードの入力を省略できる．

参考文献
- [GitHubのプライベートリポジトリをgit clone](https://qiita.com/ynaito/items/9171d13f21210da9a5c3)
- [【Git】チーム開発　メンバーがprivateリポジトリをcloneする手順](https://took.jp/post-402/)
Netgear MS510TXを設定したい

## 経緯
- 自社拠点のNWをまっさらな状態から構築することに
- 色々Network初心者は苦労しながら取り組むことに
- 最後はスペシャリストのレビューしてもらって実装する予定

## Overview
![L2SWConfiguration.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902999/a48be757-8018-d36d-52b7-2e7c63c92746.jpeg)

- 拠点内に2系統の回線を引き込み済み。ONUは計2台
- FWのあるサーバー室までは距離の関係で光ケーブルを敷設
- ONUのポートがRJ45であるため、L3SWを挟んで光変換してサーバー室まで

## 機器構成

|HostName|機種名|メーカー|
|-----|------|--------|
|onusw01|[MS510TX](https://www.jp.netgear.com/business/products/switches/smart/MS510TX.aspx)|Netgear|
|onusw02|同上|Netgear|

## 必要な要件整理
- 最低限の初期設定
    - adminパスワード変更
    - Host名設定
    - ファームウェア更新
- VLAN設定
    - ISP-A系、ISP-B系
    - Mgmt系
- RSTP設定
- リンクアグリゲーション設定
- スパニングツリー設定
- Syslog、SNMP設定

## 各種設定
#### 最低限の初期設定
書くほどではないので省略。

#### VLAN設定

※これから追記※

#### RSTP設定

※これから追記※

#### リンクアグリゲーション設定

※これから追記※

#### スパニングツリー設定

※これから追記※

#### Syslog、SNMP
- SNMPトラップ
[対応しているトラップ一覧](https://kb.netgear.com/ja/000055154/%E3%82%88%E3%81%8F%E4%BD%BF%E3%82%8F%E3%82%8C%E3%82%8BTrap%E4%B8%80%E8%A6%A7)を参照。
とりあえず公式HPからMIBファイルを取得後々設定する予定

## Updateメモ
- 2021/4/18 新規作成

## 参照
[MS510TX 製品マニュアルPDF](https://www.downloads.netgear.com/files/GDC/MS510TX/MS510TX_MS510TXPP_UM_EN.pdf)
DjangoでVue.jsを使う方法


# はじめに
DjangoのテンプレートにVue.jsを組み込み体時がある。
ただ普通に組み込もうとするとDjangoとVue.jsとでコンフリクトが起きてしまうので注意(以下で解説)

# コンフリクトが起きてしまう原因
DjangoとVue.jsでHTMLに組み込む際に{{}}が混同してしまい、
vue.jsの値が反映されなくなるのが原因

<a id="#Chapter2"></a>
# 解決策
```
    <div id="vue-app">
        <h1>[[ myTitle ]]</h1>
    </div>
```
```
    <script type="text/javascript">
        let app = new Vue({
          el: "#vue-app",
          delimiters: ['[[', ']]'],　　//これが重要
          data: {
            myTitle: 'Hello Vue!',
          },
        });
    </script>
```
<a id="#reference"></a>

現在、DjangoとVue.jsでのアプリを制作中なのでつまづきやすい部分があればまた投稿します。
Node.jsのインストール後について

こんにちは、seki_miです。
昨日、Node.jsのインストール方法について説明させて頂きましたが、1つ問題点がありますので今日はその問題点と解決方法について説明をしたいと思います。


#前提
・Mac 
・OS Catalin以降

# 問題点

ターミナルを閉じたら、実行できない...

初めてインストールした方なら何故？と思うかもしれません。
実際に下記コマンドを実行してみてください。

```
nodebrew ls
```
実行結果

```
zsh: command not found: nodebrew
```
「nodebrew?なんですかそれ？」とターミナルが何故か忘れているんです...

次に下記のコマンドを実行してください。

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
続いてもう一度最初の「nodebrew ls」コマンドを実行してください。
すると確認が出来るようになります。
つまり、ターミナルを閉じるたびに参照先を忘れてしまうということです。
そしてターミナルを起動する度に毎回上記のコマンドを実行しないといけない...面倒ですね。

安心してください。ちゃんと解決方法はあります！

# 解決方法

まず下記のコマンド入力してください。

```
touch .zshrc
```
続いて下記のコマンドを実行してください。

```
vi.zshrc
```
すると最下部に下記のような表示がされます。

```
".zshrc" 0L. 0c
```
この状態で「i」を入力してください。
すると、先ほどの「".zshrc〜"」の辺りに「-INSERT-」と表示されると思います。
ここで下記のコマンドをコピーして貼り付けを行ってください。
※Basic認証やHerokuにデプロイしている方はID、PASSが表示されますので一番下に入力してください。

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
入力が終了したら、「esc」キーを押し、「:wq」と入力して「return」キーを押してください。
すると元の画面に戻るかと思います。
続いてターミナルの環境設定に移動してください。
その画面で「プロファイル」タブ内の「シェル」をクリックして「コマンドを実行」、「シェル内で実行」にチェックを入れてください。

以上で設定は終了です。

最後に動作確認をしましょう。
一度ターミナルを閉じて、再度開いて下記コマンドを実行してください。

```
node v
```

Node.jsのバージョンの確認

```
nodebrew ls
```
インストールしているバージョンと現在設定しているバージョンが表示されるはずです。

これで以上になります。




初投稿がNode.jsと意味がわからなかったと思いますが、今後も自身のアウトプットの場として活用させて頂き、いずれ誰かのお役に立てることも載せられたらと思っております。

最後までお読み頂きありがとうございました。


seki_mi
データベースからViewに投稿者名表示させる方法いくつか（データベース検索方法）

PicTweetという以前作ったものを下に記事をまとめます。

環境
-
投稿したデータでデーターベースには情報が保存されている状態です。

Viewに表示するとは？
-

よくよく考えて見ると
####データベースの検索結果表示ということ

私の持つ教材からピックアップします。
Tweetモデルに対して「Tweet belongs to User」という形でアソシエーションを定義しているので、Tweetモデルのインスタンスが入った変数.userと記述すると、インスタンスが属しているUserモデルのインスタンスを取得できます。

（例１）アソシエーションなしの場合のコンソールを使用した取得情報

```ruby:ruby
% rails c
[1] pry(main)> tweet = Tweet.find(1)
[2] pry(main)> User.find(tweet.user_id)
=> #<User id: 1, email: "test@gmail.com", encrypted_password: "@@@@@@@@@@@@@@@@@", reset_password_token: nil, reset_password_sent_at: nil, remember_created_at: nil, sign_in_count: 1, current_sign_in_at: "2014-12-06 09:00:00", last_sign_in_at: "2014-12-06 09:00:00", current_sign_in_ip: "127.0.0.1", last_sign_in_ip: "127.0.0.1", created_at: "2014-12-06 09:00:00", updated_at: "2014-12-06 09:00:00", nickname: "test_ruby">
```

（例2）アソシエーションありの場合のコンソールを使用した取得情報

```ruby:ruby
% rails c
[1] pry(main)> tweet = Tweet.find(1)
[2] pry(main)> tweet.user
=> #<User id: 1, email: "test@gmail.com", encrypted_password: "@@@@@@@@@@@@@@@@@", reset_password_token: nil, reset_password_sent_at: nil, remember_created_at: nil, sign_in_count: 1, current_sign_in_at: "2014-12-06 09:00:00", last_sign_in_at: "2014-12-06 09:00:00", current_sign_in_ip: "127.0.0.1", last_sign_in_ip: "127.0.0.1", created_at: "2014-12-06 09:00:00", updated_at: "2014-12-06 09:00:00", nickname: "test_ruby">
```

私はもともとEXCEL VBAの集計を主に担当してたので、このデーターベース検索にはなレなくて
データベース検索用のメソッドfindとwhereで検索コードを４つ作りました。
（DRYという観点からはあまり良くないとは思うのですが。）

```app/controllers/users_controller.rb
#①上の教材通りの解答
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @prototypes = @user.prototypes
  end
end
```

```app/controllers/users_controller.rb
#別解②findを使って
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @prototypes = Prototype.find(user_id)
  end
end
```

詳細ボタンをクリックしたuser情報からfindを使ってprototypeテーブルを検索
*findメソッドに、idカラムの値を指定すると、その値を持つレコードを取り出すことができます。

参考：railsガイド「1.1 単一のオブジェクトを取り出す」

>https://railsguides.jp/active_record_querying.html

```app/controllers/users_controller.rb
#別解③findを使って
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @prototypes = Prototype.find(params[:id])
  end
end
```

②と同じ


```app/controllers/users_controller.rb
#別解④whereを使って
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @prototypes = Prototype.find(params[:id])
  end
end
```

```rb:whereシンボル指定方法
モデル名.where(カラム名: 条件)
```

```app/controllers/users_controller.rb
#別解⑤whereを使って
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @prototypes = Prototype.where(user_id=@user.id)
  end
end
```

```rb:where文字列指定方法
モデル名.where("カラム名 = 条件")
```

これなら今の僕の知識でもわかりやすいコードにはなっています。
さらに精進します。
plunkerでthreebsp その3

#概要

plunkerでthreebspやってみた。
intersect使ってみた。

#写真

![inter.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fd475529-6065-41f8-5bf8-8c2e46c2f176.jpeg)


#サンプルコード

```
var renderer, 
	scene, 
	camera, 
	light;
document.addEventListener("DOMContentLoaded", setTimeout(function() {
	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.getElementById('viewport').appendChild(renderer.domElement);
	scene = new THREE.Scene();
	light = new THREE.DirectionalLight(0xffffff);
	light.position.set(1, 1, 1).normalize();
	scene.add(light);
	camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.set(5, 5, 15);
	camera.lookAt(scene.position);
	scene.add(camera);

	
	(function() {
		var start_time = (new Date()).getTime();
		var sphere_geometry_1 = new THREE.SphereGeometry(2, 64, 8);
		var sphere_bsp_1 = new ThreeBSP(sphere_geometry_1);
		var sphere_geometry_2 = new THREE.SphereGeometry(2, 8, 32);
		var sphere_mesh_2 = new THREE.Mesh(sphere_geometry_2);
		sphere_mesh_2.position.x = 2;
		var sphere_bsp_2 = new ThreeBSP(sphere_mesh_2);
		var intersect_bsp = sphere_bsp_1.intersect(sphere_bsp_2);
		var result = intersect_bsp.toMesh(new THREE.MeshLambertMaterial({ 
			shading: THREE.SmoothShading, 
			map: THREE.ImageUtils.loadTexture('texture.png') 
		}));
		//result.position.x = 6;
		result.geometry.computeVertexNormals();
		scene.add(result);
		console.log('Example 3: ' + ((new Date()).getTime() - start_time) + 'ms');
	})();
	(function render() {
		requestAnimationFrame(render);
		renderer.render(scene, camera);
	})();
}, 1000))





```

#成果物

https://embed.plnkr.co/plunk/3Rd0QwlLJ6vTJd4O

以上。
PostgreSQLのJDBCはバインドできるパラメーター数に限界がある

ずいぶん昔の事ですが、
Javaで`List`に入った条件の数だけ`IN (?)`バインドパラメーターを増やすような実装で
条件を増やし続けると次のような`IOException`が`throw`されるという事象がありました。

```
 java.io.IOException: Tried to send an out-of-range integer as a 2-byte value: 32768
```

この問題に遭遇したのはかなり昔の事ですが、当時は何らかのデータ量制限に引っかかったのだろうと思い
`IN(?)`の使用を取りやめて`カラム名 = ANY(?)`にSQLステートメントを変更、
パラメーターを`java.sql.Array`に変換する事でパラメーター数を押さえたら
エラーが発生しなくなったのでそれ以上の深追いはしていませんでした。

この事象を思い出したので調べてみると、
どうやらPostgreSQLサーバーとの通信プロトコルのパラメーター数が2バイトを超える数値に対応していないようです。

GitHubにもissueが存在しました。

https://github.com/pgjdbc/pgjdbc/issues/1311

この制約は[org.postgresql.core.PGStream#sendInteger2(int)](https://github.com/pgjdbc/pgjdbc/blob/207ce36ec2c5cce30c454afa3e51f39bbe5bd26b/pgjdbc/src/main/java/org/postgresql/core/PGStream.java#L347-L354)に書かれており
パラメーター数に限らず、`sendInteger2(int)`でサーバーにデータを送る処理は32,767を超えることが出来ないようです。
MoneyForwardのruleの保存

# MoneyForward の 分類ルール をcsvで保存
(Chromeのconsole使用)

ちょっと整理するためにCSVに保存。その時のメモ。

```JavaScript
var downloadAsTextFile = function(fileName, content) {
  var a = document.createElement('a');
  a.download = fileName;
  a.href = (window.URL || window.webkitURL).createObjectURL(new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), content]));
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

var downloadAsCSVFile = function(fileName, rows) {
  var content = "";
  for(var i in rows) {
    for (var j = 0, m = rows[i].length; j < m; ++j) content += '"' + ("" + rows[i][j]).replace(/"/g, '""') + '"' + (j !== m ? ',' : '');
    content += '\n';
  }
  downloadAsTextFile(fileName, content);
};

rows = [];
$("section table:has(th:contains('金融機関') ~ th:contains('大項目')) tr").each(function() {
  row = [];
  $(this).find("th, td").each(function() {
    row.push($(this).text());
  });
  rows.push(row);
});
downloadAsCSVFile("rule.csv", rows);

```
Ansible 超入門

# Ansible 超入門

## 概要

この記事はAnsibleとは何か？、どう使うのか？を端的にまとめた記事です。

前提と対象読者は以下です。

- Ansibleってなんですかという状態かつ細かい説明はいいからとにかく使ってみたいという方向け

- Ubuntu 16.04上で動かす

- localhost上でAnsibleを動かしlocalhostの環境構築をすることを目的とする

- とりあえずnginxを入れてみる


## Ansibleとは

Ansibleとはなにか？

- 構成管理ツール
  開発・運用に必要なパッケージなどをスクリプトに従い自動でインストールしてくれる

- Ansibleの入っているサーバとPython導入済みでSSHサーバの稼働している対象サーバがあれば使用できる（エージェント不要）

- Ansibleの入っている対象サーバのみでもよい

  


## 使い方

### 1.Ansibleをインストール

```sudo apt install ansible```



## 2.hostsで対象サーバを指定する

`/etc/ansible/hosts`を以下のように編集

```
# This is the default ansible 'hosts' file.
...中略...
#db-[99.101]-node.example.com

[ansible-test] # Playbookの実行対象グループ
localhost # 実行対象のサーバ

```



## 3.Playbookを作成する

`ansible.yml`を作成する

```yml
- hosts: ansible-test
  connection: local
  tasks:
    - name: install nginx
      apt:
        name: nginx
        state: latest

```



## 4.playbookを実行する

`sudo ansible-playbook -i /etc/ansible/hosts ansible.yml`

こんな感じの出力が出ていればOK

```
PLAY RECAP ************************************************************************************
localhost                  : ok=2    changed=1    unreachable=0    failed=0
```
plunkerでthreebsp その2

#概要

plunkerでthreebspやってみた。
union使ってみた。

#写真

![union.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b0fee256-07a7-af93-304d-ef24265b2bae.jpeg)


#サンプルコード

```
var renderer, 
	scene, 
	camera, 
	light;
document.addEventListener("DOMContentLoaded", setTimeout(function() {
	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.getElementById('viewport').appendChild(renderer.domElement);
	scene = new THREE.Scene();
	light = new THREE.DirectionalLight(0xffffff);
	light.position.set(1, 1, 1).normalize();
	scene.add(light);
	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.set(5, 5, 15);
	camera.lookAt(scene.position);
	scene.add(camera);

	(function() {
		var start_time = (new Date()).getTime();
		var sphere_geometry = new THREE.SphereGeometry(2, 16, 16);
		var sphere_bsp = new ThreeBSP(sphere_geometry);
		var cube_geometry = new THREE.CubeGeometry(7, .5, 3);
		var cube_bsp = new ThreeBSP(cube_geometry);
		var union_bsp = sphere_bsp.union(cube_bsp);
		var result = union_bsp.toMesh(new THREE.MeshLambertMaterial({ 
			shading: THREE.SmoothShading, 
			map: THREE.ImageUtils.loadTexture('texture.png') 
		}));
		result.geometry.computeVertexNormals();
		scene.add(result);
		console.log('Example 2: ' + ((new Date()).getTime() - start_time) + 'ms');
	})();
	
	
	(function render() {
		requestAnimationFrame(render);
		renderer.render(scene, camera);
	})();
}, 1000))



```

#成果物

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

以上。
Effective Java(第3版) 項目1 コンストラクタの代わりにstaticファクトリメソッドを検討する

使用者がクラスのインスタンスを生成出来るようにするために、publicコンストラクタの代わりにstaticなインスタンス生成メソッドを提供することを検討するべき、という内容です。

# 記載内容
## メリット
以下の5つのメリットが挙げられています

1. 名前を付けられる
1. 呼び出しごとに新たなインスタンスを生成する必要が無い
1. 戻り値型の任意のサブタイプのインスタンスを返すことが出来る
1. 引数に応じて、返すインスタンスの型を変えらえる
1. 返されるオブジェクトのクラスは、ファクトリメソッドが書かれた時点で実装されている必要が無い

## デメリット
以下の2つのデメリットが挙げられています

1. サブクラスが作れない
1. プログラマがインスタンスの生成方法を見つけるのが難しい

# 考察
## メリットについて
ファクトリメソッドは特に不変クラスと相性が良いと思います。
特に「呼び出しごとに新たなインスタンスを生成する必要が無い」は、
実装当初は毎回インスタンスを生成していても、将来、インスタンスのキャッシュ等を追加できます。
(コンストラクタをpublicで公開してしまったら、利用側のコードを修正しないとなりません)

返すインスタンス型に関する3つのメリットは、インタフェースにstaticファクトリメソッドを定義すると、より良いかもしれません。
定義としてはインタフェース自身を返すように記載しておき、実際に返すのは、パッケージプライベートの実装クラスにしておけば、
利用側に実装クラスを隠すことが出来、将来の拡張が容易になります。

## デメリットについて
デメリットの1つ目「サブクラスが作れない」は問題ないと思われます。
機能追加時に、継承よりもコンポジションを選択すれば良いためです。
(むしろメリットだと思えるくらいです)

「プログラマがインスタンスの生成方法を見つけるのが難しい」は少し問題です。
IDEの助けがあっても、
ファクトリメソッドの名前が分かりづらかったり、JavaDocの記載が不十分だったりすると、
適切な生成方法を見つけるのが難しくなりそうです。
9ページの命名規約は確認しておいたほうが良いです。

## まとめ
特に、不変クラスを作成しているのであれば、ファクトリメソッドの提供(および、コンストラクタを非publicにすること)を検討したほうが良いと思います。
提供する場合は、命名規約に注意するべきです。
OpenRefineをド素人がインストールしてみる。


<font size='5'>０.はじめに</font><br>

各種の統計分析やデータサイエンスには欠かせない前処理、しかしいざ初めて見ると世の中にあるデータのほとんどが分析を始める前の処理段階で苦労するのが実際である。根性なしの私はここでやる気をなくしてしまうこと日常茶飯事。

そんな中、Ｑｉｉｔａのとあるサイトが目にとまってしまった。。。


<font size='5'>１.神エクセルという命名が秀逸！</font><br>

フェースブックで　＠higa4　さんの記事が出てきて、「神エクセル」というシニカルな表現が刺さったの素人ながらに完コピでやってみる。素人がこれだけを読むとできないので素人視点で必要な作業を並べてみた。またQiitaに初めて投稿をしてみたいという欲求にかられてしまったということもある（笑）


https://qiita.com/higa4/items/5c2b2630bfd91e064f67?utm_content=buffer5ab93&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer&fbclid=IwAR3iqisdZX3ALw1-aM993Nd9JZKJolCdZ6CinyYmjpD-kNWjcUEfYNq_qAM


さて、まず記事を読んでみて、日本の統計データの多くが神エクセルだな～とあらためて実感。SSDSEのように教育用に整備をしてくれているファイルもあるが極々一部でありこれらのデータがもっと整備をされることで統計を行う人、そこから発見されることがもっと増えてくるのになというのが実感としてある。（ある意味社会問題じゃ！）

https://www.nstac.go.jp/SSDSE/

<font size='5'>２.OpenRefineというツールのインストール</font><br>

話は戻って、まずはなんかよさそうだけどOpenRefineというツールがあったことをしらなかった。いそいそとこのツールを調べ始める。Googleで入れると会社のサイト、、、出た！英語だけのサイト（ここですでに億劫になる）

https://openrefine.org/

あきらめないで検索をつづけると、このサイトをみつけた（Qiitaじゃないけど）。＠Sakuraiさん　素敵！この順を追ってインストールの開始！

https://niigata.insight-lab.co.jp/blog/openrefine%E3%81%AB%E3%82%88%E3%82%8Brdf%E3%81%AE%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95#section_1openrefine_1

ちゃんとRDFのインストールができているかの確認を教えてくれているので素人の私も不安なし。

<font size='5'>３.いざ神エクセルのダウンロード</font><br>

さて、最初の神エクセルをダウンロードして、＠higa4さんの流れに従って作業を開始してみることにします！

https://www.pref.iwate.jp/kyouikubunka/kyouiku/ippan/toukei/1006311.html



最初の投稿は、ここまで（汗）　次は完コピの流れにはいって素人の迷いを書いていきたいと思います。




各章の文字の大きさ変える方法とかがわかっていないのでテキストを書くだけになってしまってすみません。ここもこれからの勉強ということで。
【いまさらシリーズ】SSLの整理

# 背景
普段、httpsやSSLというワードは当たり前のように目にするし、なんとなく暗号化する技術ということはわかっているけど、
仕組みや目的を今一度整理する

# SSLとは
- SSLとは何か？
	- クライアント-サーバ間の通信を暗号化する
	- SSLとはSecure Sockets Layerの略で、送受信しているデータを暗号化する通信手順
- じゃあTLSとは何か？
	- これも暗号化する手段です
	- SSLに脆弱性が見つかって、それを解決するために根本的に設計しなおされた結果がTLS
	- なのでSSLとTLSはニアリーイコール
- TLSで暗号化していても馴染みのあるSSLという呼び方で呼ばれる
- SSL通信の流れと仕組み
	- 受信者は送信者に公開鍵とSSLサーバ証明書を送付
		- これどうやって送付しているのか？
		- SSLサーバ証明書は公開鍵が正しいものかどうかを証明するためのもの
		- なりすまし防止
	- 送信者は公開鍵を使って共通鍵を暗号化
	- 送信者は受信者に暗号化された共通鍵を送付
	- 受信者は共通鍵を秘密鍵で復号
		- 受信者は公開鍵と秘密鍵のペアを持っている
		- 公開鍵で暗号化されたデータはペアとして用意した秘密鍵でしか復号できない
- SSL通信する目的
	- データの盗聴を防ぐ
		- 暗号化していないとブラウザ上で入力したデータはそのまま受信者に渡る
		- その間に攻撃者が通信データをハックすると入力したデータは丸見え！
	- データの改ざんを防ぐ
		- ブラウザで入力したデータとは別に改ざんを検知するための別データを用意
		- 攻撃者が通信データをハックして改ざんしても検知するために用意した別データで検知できる！
	- なりすまし防止
		- そもそも受信者が信頼できるサーバなのかどうかを証明する
		- SSL証明書がそれに当たる

# 終わりに
なんか記事のクオリティを気にしてアウトプットを敬遠してたけど、こういうしょーもないクオリティでも積極的にアウトプットしていきたい
データベースにデータのあるなしで分岐

先ほど閃きました。

Q：itemsテーブルにデータがあるかないかで分岐させる条件は？
-

A：id番号１のデータがあるかないかを検索すること（これは△）
-

なので

Viewには以下のように記述しました。


```rb
<% if Item.exists?(1) %>
<% else %>
<% end %>
```

（参考）メソッドの簡単解説
-

|メソッド名|働き|戻り値の型|
|--|--|--|
|exists?|指定した条件のレコードがデータベースに存在するか|真偽値で返す|

```rb
オブジェクト.exists?(条件)
```

参考：【Rails】exists?メソッドの使い方(基礎~応用編,present?との違い)

>https://pikawaka.com/rails/exists


A：id番号データがあるかないかを検索すること（これは◎）
-

もっと簡単な方法は

```rb
<% if Item.exists?%>
<% else %>
<% end %>
```

（１）もかかない
⇨というのも今はデータ１があるこご前提だが、全てデータを行削除して続けると
続きの番号しか取らないので１は永遠に存在しなくなり、データが溜まってもデータなしの状態で表示を続けるため。
JavaScriptを学ぶ―DOM操作とは―

#DOMとは#
- ***Document Object Model*** のこと


DOMはHTMLをツリー構造で表現をします。
下記のコードをツリー工場にして「ねこ」までを辿ると
`html ➡　body ➡　article　➡　ul　➡　li　➡　ねこ`
となります。

```html
<html>
  <head>
    <title>ぼくのサイト</title>
  </head>
  <body>
    <article>
      <h1>すきなどうぶつ</h1>
      <ul>
        <li>ねこ</li>
        <li>いぬ</li>
        <li>とり</li>
      </ul>
    </article>
  </body>
</html>
```

ブラウザ内にDOMデータが構築されます。
このDOMを取得し、内容を書き換える操作のことをいいます。

DOMが書き換えられると、自動的に新たなDOMに合わせてブラウザの画面も変わります。

#Document オブジェクトとは
JavaScriptを学習し始めてからしょっちゅう登場する`document.getElementById('the-button');`ですが、documentとは何でしょうか？

documentオブジェクトは、画面に表示されているWEBページを表すオブジェクトでDOM操作をするためのメソッドが含まれています。

`document.getElementById('the-button');`
この例だと、DOM構造に分解し、DOM構造内を検索し、id名「the-button」のノードを取得していをます。


メソッドには

- getElementById('the-button')  id名で検索
- querySelector('#the-button')　cssセレクタで最初に一致したものを検索
- querySelectorAll('.button')　cssセレクタで一致したすべてを検索

等がある。

#最後に
Javaをこれまで学習してからJavaScriptに手を出しましたが、考え方が違いすぎて理解がなかなかできません。
そのために基礎的なことを簡潔にまとめてみました。

https://www.hypertextcandy.com/vanilla-javascript-dom
こちらの記事を参考にさせて頂きました。
ありがとうございます。
authorized_keysをリネームしてしまってログインできなくなった！笑

# 環境
ConoHaVPS

# はじめに
今週vpsをはじめたのですが、公開鍵を追加しようとして「新しい公開鍵を追加するのにこのファイル名じゃ分かりづらいな～よし！わかりやすい名前に変更いしょう！」と何の躊躇もなくauthorized_keysリネームしてauthorized_key_wslとかにしました。
はい、ログインできません。なぜなら、rootログイン不可、パスワードログイン不可にしており、鍵認証方式でないとログインできない設定にしていました！٩(๑òωó๑)۶　おやすみー


# 一応解決

vpsプロバイダのコンソールアプリからrootログインできるので（以下省略）
初学者がVue.jsをRailsアプリに組み込めるようになるまでの学習ロードマップ

# この記事で得られること
はじめに、この記事の目的について。
この記事は一通りRailsアプリケーションを作り終えて、次のステップとして「自分のアプリをモダンなUI/UXを実現したい！」「今っぽいイケてる技術を使ってみたい！」といった動機から、Vue.jsをRailsアプリケーションに組み込みたいと考えている人向けに、学習ロードマップを提供できたら、という狙いです。
(2021/8追記)
※記事投稿後程なくしてこのポートフォリオを使用して自社開発企業から内定をいただくことができましたが、正直技術というよりも熱意を評価された結果かなと思います。
初学者の中で技術的に抜きん出ようとお考えであれば、末尾に記載している通りこの記事でできるようになること以上に、バックエンドとの連携を意識された方が良いのでは？と思います。

# 以下学習で作成した成果物
私はこれから説明する学習を通して、初学者なりのポートフォリオを作成しました。
~~ベースはRuby on Rails、ランディングページにVue.jsを使ったアプリです。~~
EC2インスタンスを削除したため、代わりにGithubのソースコードでご勘弁ください。
https://github.com/lyonsan/study-repo-app

こんなレベルでも、Vue.jsを使えるようになりたい！と考えている方には助けになる記事なのではないかと思います。

# この記事の対象者

- プログラミング初学者
- Ruby on Railsは一通り学習し、アプリケーションを作りきった。
- JavaScriptは多少触ったことあるかな程度
- とにかくVue.jsを入れたい
- お金はケチりたい

# 学習ロードアップ

## 1. まずは公式！

やはり最初は公式。
日本語で書かれているのでとてもわかりやすいですし、全ての基礎知識となりますので、やっときましょう。
（自分のアプリ内で応用する時に基礎知識があることが前提となるからです。）

個人的には、「コンポーネントの詳細」の章まで一通りやってみるのかいいかと思います。そのあとは必要に応じてやっていくのが効率が良いかと。

[Vue公式](https://v3.ja.vuejs.org/)

## 2. ここからはQiita記事

### まずはVue.jsのアプリ立ち上げ

つくづくQiitaの情報量には感服いたします。
まずはサクッとVue.jsアプリ立ち上げ。

#### 2-1 立ち上げ~vue-router
[こちら](https://qiita.com/abouch/items/35d7a202f3e74c7d4c3e)の記事を参考にしていただくと簡単にアプリ立ち上げができます。
またこの記事内ではSPA作成の基本となる`vue-router`について学べます！

#### 2-2　モダンなツールを学ぶ
[こちら](https://qiita.com/shoma3571/items/025a4e8aedeb62b1fed4)ではより見た目をかっこよくできるライブラリなどを学ぶことができます。
`vue-typer`とか`smooth-scroll`とか今っぽくてかっこいいですよね〜

#### 2-3　RailsにVueをいれる方法を学ぶ
[こちら](https://qiita.com/tatsurou313/items/4f18c0d4d231e2fb55f4)にはRailsをバックエンドに、Vueをフロントエンドに使ったアプリを作る方法が記載されています。
すでにRailsアプリがあって、追加でVueを入れたい!という場合には「Vue.jsでHello Vue!を表示する」という章から読んでいくのがいいかなと思います。


ここまでで私が作ったレベルのアプリならもうできてしまいますよ！
ちなみに私はここまでの学習の副産物として[ポートフォリオサイト](https://miro-p-site.netlify.app/)を作りました。ここでは見やすさの観点から`vue-router`は使っていないですが、挙動はそれなりに今っぽい仕上がりになっているのではないかと思います。


## 3.Railsデータとの連携(筆者積み残し)

本当はRailsのデータと連携して、一つの機能をSPA化できたら尚良しと思っていました。
結論、devise特有のヘルパーなどのVueでの使い方など難しい点が多々あり、今後の積み残しにしていますが、
一度トライはしてみたので、その際に学習した内容をお伝えします。

#### 3-1 いいね機能を作る
[こちら](https://qiita.com/TakeshiFukushima/items/a6c698fec648c11eee9a)ではRailsをバックエンド、Vueをフロントに使っていいね機能を実装しています。
ここでデータの渡し方などを学ぶことができます。

#### メモアプリを作る（有料）
ここまで公式やQiitaの記事でやってきましたが、だんだん高度になってきたこともあり、情報が複雑化してきました。
そのため私は[Techpit](https://www.techpit.jp/)の記事を参考に、RailsとVueを使ったメモアプリ作成ハンズオン講座を買いました。
[教材はこちら](https://www.techpit.jp/courses/123)
こう言ったベーシックな組み合わせ技術から初めて、高度なSPAを作り込んでいくのが良いのかなと思います。


## 4.まとめ

正直、あまり高度なことをやれるようになるわけではありません。
しかしVueを使えるようになること、Railsに組み込むことはこの記事の学習ロードマップに沿ってやっていくことで実現できると思います。

ご意見などありましたらコメントいただけると幸いです！


## 5.出典
- Vue.js公式 https://v3.ja.vuejs.org/
- (Qiita記事)【超簡単】Vue.jsを使って3時間で自分のホームページを作成&公開する https://qiita.com/abouch/items/35d7a202f3e74c7d4c3e
- (Qiita記事)Vue.jsでポートフォリオを書く https://qiita.com/shoma3571/items/025a4e8aedeb62b1fed4
- (Qiita記事)Ruby on Rails, Vue.js で始めるモダン WEB アプリケーション入門 https://qiita.com/tatsurou313/items/4f18c0d4d231e2fb55f4
- (Qiita記事)Rails + Vue.jsでいいね機能を実装する https://qiita.com/TakeshiFukushima/items/a6c698fec648c11eee9a
- (Techpit)Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！ https://www.techpit.jp/courses/123
Rails | at_beginning_of_month 日付操作 月初, 翌月の月初、先月の月初の取得 

# 月初を取得


```ruby
#月初を取得
Date.today.at_beginning_of_month
#=> Wed, 01 Dec 2010
```

# 翌月の月初を取得


```ruby
#翌月の月初を取得
Date.today.at_beginning_of_month.next_month
#=> Sat, 01 Jan 2011
```

# 翌々月の月初を取得

```
Date.today.at_beginning_of_month.next_month.next_month
#=> Tue, 01 Feb 2011
```

# 先月の月初を取得

```ruby
#先月の月初を取得
Date.today.at_beginning_of_month.prev_month
#=> Mon, 01 Mar 2021
```

# 4/1 - 4/15と、先月の同期間(3/1 - 3/15)の比較

```ruby
@last_month_conversions = Conversion.where(conversion_date: Date.today.Date.today.at_beginning_of_month.prev_month..Date.today.prev_month
)
@this_month_conversions = Conversion.where(conversion_date: Date.today.Date.today.at_beginning_of_month..Date.today)
```
OCaml関連の環境変数設定メモ

OCaml を新しい環境にインストールする前に私がやっておくことのメモ．
以下の内容を `.zshrc` か `.bash_profile` などに書いておく．

# .cmt ファイルを生成する

これは 今の dune を使う環境ではいらないのかもしれない

```sh
# OCaml
export OCAMLPARAM="_,bin-annot=1" # generate *.cmt (outside dune build)
```

# OPAM 設定 (並列ビルドなど)

並列ビルドは明示的に設定する必要はないかもしれない

```sh
eval `opam config env` # OPAM の初期設定を読み込む
export OPAMKEEPBUILDDIR=1 # let opam not remove sources
export OPAMJOBS=16 # 並列ビルド
```

# エラー時のスタックトレースをデフォルトで有効化

```sh
export OCAMLRUNPARAM=b # stack backtrace
```
VBAマクロの始め方(基本1)

# 概要
Excelマクロ作ってよ。でも自分も勉強しながらなんとかしたい！
と言うお話が来まして。どこまで自分としてはお手伝いできるか？
とりあえず言われたマクロは作成し、提供しました。
でも、まずはマクロを始めるにあたって色々、基礎的な所ってあるなぁと思い、一番最初にやらなければいけないことやその辺を少し書いておきます。

## Excelの設定
officeもバージョンが進化し、いつからか普通にはVisual basic(以後VB)画面が出なくなりました。
まずはそれを表示させるところから。

![view_dev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621314/6ff824ac-6b9a-dcb5-51bc-7d04c8f2dc45.png)
デフォルトだとファイル、ホーム、挿入、描画…
と言ったメニューに「開発」があります。これをまずは表示させる必要があります。
それにはクイックアクセスメニューの表示から「その他コマンド」を押してください。

![ribon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621314/3aef5462-02c5-848f-27ab-b60b5146739e.png)

左メニューから「リボンのユーザー設定」を押し、右にあるリボンのユーザー設定から「開発」にチェックを入れてOKを押してください。

![dev_menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621314/1f01f8d1-79f3-761b-beef-91855e3d33ee.png)
開発タブメニューが表示されるようになりました。

まずはこれができていなければマクロやVBなど何も始められません。
見た目重視でoutlineを消したいにしても、せめてこうしませんか？

## これは何

- （おそらく）見た目を重視して`outline: 0`を指定するのはやめて、こうしませんか？という提案の記事
    - UAで付与される`outline`がイケてなく感じる気持ちは分かります
    - しかし安直にoutlineを消すとアクセシビリティが下がってしまうので、代替案を提示してみます

## そもそもなぜoutlineを消すのが良くないのか

outlineは「今自分が何の要素にフォーカスを当てているか」を示してくれます。

そのoutlineを消してしまうと、ページの操作をキーボードで行っている人が非常に困ります。
マウスを使わず（あるいは使えず）操作をしている人にとっては、outlineが表示されていないと実質操作不可能なのです。

## せめてキーボードユーザーにだけはoutlineを出しておく

とは言え、マウスを使っているユーザーにとってはフォーカス位置が分かってもそこまでメリットがないと思います。
そこで提案するのが以下のライブラリを使用することです。

https://github.com/ten1seven/what-input

こちらを使うと、インプット方法が`mouse`, `keyboard`, `touch`のうちどれなのかを判定できるようになります。

「マウスを使っているユーザーのoutlineは消す」「キーボードを使っているユーザーのoutlineは表示する」と出し分けられるようになり、およその問題は解決すると思われます。

（[WCAGの達成基準2.4.7](https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html)に記載されているメリットによれば「**注意力欠如、短期記憶の制約、又は遂行機能における制限のある利用者が、フォーカスがどこにあるのかを見つけることができるようになる。**」ともあるので、これに該当する人たちへのフォローはできませんが……。）

## 具体的な導入方法

※ ここからは[what-input公式のドキュメント](https://github.com/ten1seven/what-input)に書いてある以上のことはほとんど記載していません。

まずはnpmかyarn、好きな方を選んでインストールしてください。

```shell:インストール
npm install what-input

# or

yarn add what-input
```

`script`タグで直接読み込むか

```html
<script src="path/to/what-input.js"></script>
```

以下のいずれかのimportをします

```javascript
import 'what-input'

// or

import whatInput from 'what-input'

// or

require('what-input')

// or

var whatInput = require('what-input')

// or

requirejs.config({
  paths: {
    whatInput: 'path/to/what-input',
  },
})

require(['whatInput'], function () {})
```

インポートできたら、以下のようにCSSに記載をすれば「マウスを使用しているユーザーにだけoutlineを非表示」を実現できます。

```css:グローバルなCSS
[data-whatinput='mouse'] *:focus {
  outline: none;
}
```

なお、公式では`[data-whatinput='mouse'] *:focus`ではなく`[data-whatintent='mouse'] *:focus`で記載されていますが、個人的には`data-whatinput`の方が良いと思いました。

少し分かりづらいので以下のgifをご覧ください。

| data-whatintent | data-whatinput |
| --- | --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/33a73f81-5ce9-d863-a311-d77396023ff8.gif) | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/54965ab2-9e8c-9fa4-2577-ef63e68b0ad9.gif) |

どちらも操作している内容は

- tabキーでフォーカスをあてる
- マウスを動かす
- 再びtabキーを押す

と変わりません。

`data-whatintent`の方は、ちょっとでもマウスを動かすと、例えクリックをしていなくてもフォーカスインジケータが消えてしまいます。
また、マウスを触った直後にtabキーを押しても、フォーカスは移動するのにインジケータが表示されません。

キーボード操作をしつつも一応マウスをつないでいる……といった人がいた場合、うっかりマウスを触ってしまったらフォーカスインジケータが消えてしまうので`data-whatinput`の指定の方が良いと思った次第です。