OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】 Gem Rubocop 静的コード解析ツール

#Rubocopとは
Rubyのコーディング規約に準拠しているかどうか静的に解析するツールです。.rbファイルに記述してあるコードを全て解析し、インデントやメソッド名等、ターミナルに出力してくれます。
※rbファイルのみなので、.erbは解析してくれません。
#導入方法

Gemfileに以下を追記します。

```Gemfile
gem 'rubocop', require: false
```
インストール

```
$ bundle install
```

#使用方法
https://docs.rubocop.org/rubocop/1.7/usage/basic_usage.html

##コマンド


```terminal
$ rubocop
#解析して、結果をターミナルに出力
```
```terminal
$ rubocop -a
 #or
$ rubocop --auto-correct
#解析して、自動修正
```

#設定
.rubocop.ymlに設定を記述していきます。
(私の設定)

```.rubocop.yml
AllCops:
inherit_from: .rubocop_todo.yml
AllCops:
  Exclude:
    - bin/*
    - config/**/*
    - db/schema.rb
    - vendor/**/*
    - Gemfile
  NewCops: enable
Style/Documentation:
  Enabled: false
Style/EmptyMethod:
  Enabled: false
Style/FrozenStringLiteralComment:
  Enabled: false

```
vim学習ゲーム「PacVim」をGoで作ってみた

## 前置き
パックマンをvimコマンドで操作するゲーム「[PacVim](https://github.com/TurtleBuild/pacvim)」をGoで作ってみました。

Goなので、バイナリをダウンロードしていただければ簡単に実行できます。
https://github.com/TurtleBuild/pacvim/tree/master/bin

興味があれば遊んでみてください。
趣味で作った程度のものなので期待しないでください。。。

## ゲーム仕様
![objects.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7342/c3aed761-439a-738f-9cf7-5d0c948b0a66.png)

### オブジェクト
| char | what it does |
|:-:|:-:|
| o  | 餌  |
| X  | 毒  |
| G  | ゴースト  |

### ゲーム状態
| state | conditions |
|:-:|:-:|
| ゲームクリア  | 全10ステージをクリアする  |
| ゲームオーバー  | 計４回ステージを失敗する  |
| ステージ成功  | すべての餌を食べる  |
| ステージ失敗  | 毒を食べてしまう<br>ゴーストに捕まってしまう  |

### 操作方法
| key | what it does |
|:-:|:-:|
| q  | ゲーム終了  |
| h  | 左に１マス移動  |
| j  | 下に１マス移動  |
| k  | 上に１マス移動  |
| l  | 右に１マス移動  |
| w  | 次の単語の先頭に移動  |
| e  | 次の単語の末尾に移動  |
| b  | 前の単語の先頭に移動  |
| $  | 行末に移動  |
| 0  | 行頭に移動  |
| gg/1G  | 最初の行の行頭に移動  |
| NG  | N行目の行頭に移動  |
| G  | 最後の行の行頭に移動  |
| ^  | 現在の行の最初の単語の先頭に移動  |

### 補足
#### w,e,b
* 一気に移動するイメージ
* 移動間のオブジェクトすべてに当たり判定が適用される
![w.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7342/e3db97d2-88a5-fe7f-9b7b-063e5faa13e3.gif)

#### $,0,gg,NG,G,^
* ワープのイメージ
* 移動先の１マスのみ当たり判定が適用される
![dollar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7342/fb333435-c5af-4782-7a6b-c2284fcbff79.gif)

### 自作マップで遊びたい場合
1. マップファイルを置き換える（./files/stage/）
2. statikを実行する

```
$ statik -src=files
```

## 参考
C++版：[PacVim](https://github.com/jmoon018/PacVim)
[statik](https://github.com/rakyll/statik)
RStudioの日本語入力をポップアウト後も表示する方法

Rstudio のエディタ（Sourceペイン）に関して、一番左のタブのエディタは、日本語入力が確定する前は表示されないという事象が起こっていました。

まず、ダミーのエディタを開いて、編集したいエディタを2つ目以降に開くという解決方法[^1]がありますが、ポップアウトして別ウィンドウで開くと再度日本語入力が表示されないという問題が生じていました。

## 解決法

1.ダミーのエディタ（１）と編集したいエディタ（２）をそれぞれポップアウト表示にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237617/b4589a6d-f249-9ce9-4f4c-6c1149bfc54b.png)

2.編集したいエディタ（２）のタブをダミーエディタ（１）のタブの隣にドラッグアンドドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237617/7681ed21-4691-b6a2-bbbb-7acd4fa8f4df.png)

3.編集したいエディタ（２）の日本語入力が再度表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237617/3a8efedc-abd4-500f-c3c3-8dae88716e7f.png)


このように、ポップアウトした後も2つ目以降に編集したいエディタを持ってくると、日本語入力が楽になります。簡単な方法なので、ぜひ試してみてください。

[^1]: https://qiita.com/it_tan/items/91081a04d942b9b2cb99
node.js + express + nodemailer



<h1>node.jsでmail機能を実装するには…</h1>
node.jsでmail機能を実装するにあたってnpmのnodemailerというパッケージを使っていきます！

```
$ express app --view=ejs
$ cd app
$ npm install
```

ルートフォルダーにcontact.jsファイルを作って下記の記述をします

```js:contact.js
"use strict";
const nodemailer = require("nodemailer");
async function main() {

  let transporter = nodemailer.createTransport({
    ignoreTLS:true,
    port: 1025,
    secure: false, // true for 465, false for other ports
  });

  let info = await transporter.sendMail({
    from: '"Fred Foo 👻" <foo@example.com>', // sender address
    to: " s@gmail.com", // list of receivers
    subject: "成功！！！！", // Subject line
    text: "サンプルテキストです", // plain text body
  });

  console.log("送られたメッセージ: %s", info.messageId);

}

main().catch(console.error);


```



参考）https://nodemailer.com/about/

メールが送信されているかをチェックするために[mailcatcher](https://www.npmjs.com/package/maildev)を使います
mailcatcherを使うためのパッケージをインストールして起動してみます

```
$ npm install -g maildev
$ maildev
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977422/bf5fee42-2cbf-c1e7-f2de-4651e52d2192.png)

```
$ node contact.js
```

localhostの1080ポートが起動しているのでhttp://127.0.0.1:1080 にアクセスすると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977422/87e71520-5d18-fe5a-b4b0-ad379692fa40.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977422/f8caad8f-9cde-00c7-32df-9bed190482e9.png)


ポート1025でメールを受け取ることができました！

<h1>あとがき</h1>
mail機能を実装するためにはamazon SESでもできるようです
今回nodemailerを使ってみましたが、圧倒的にメールサーバについての理解が乏しいと実感しました(´;ω;｀)
mailについて学習し、また記事を書きます！
Reactでいい感じのサブウィンドウを実装する  ④ ウィンドウ動かす機能をON/OFF切り替える


シリーズ記事です。
初めての方は、[こちら](https://qiita.com/aokisinn1192/items/dd5f2598aef88d5a824f) を最初に読んでください

Reactでいい感じのサブウィンドウを表示する際にウィンドウ動かす機能をON/OFF切り替えたい場面がよくあるので、

今回は、この方法について紹介します。

![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606623/bc2a0542-7c5a-8c4b-bc18-45469f53c891.gif)

# やり方

RndのdisableDraggingというプロパティに値を指定してあげるとON/OFFの切り替えがでできます。

## 例1 ウィンドウを動かす機能 ON　

```javascript
<Rnd disableDragging={false}>test</Rnd>
```
※ デフォルトは　falseなので指定しなくても大丈夫です。

## 例2 ウィンドウを動かす機能 OFF

```javascript
<Rnd disableDragging={true}>test</Rnd>
```

## 例3　サンプルGif

```javascript
import "./App.css";
import React, { useState } from "react";
import { Rnd } from "react-rnd";

function App() {
  const [isDisableDragging, setDisableDragging] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setDisableDragging(!isDisableDragging)}>
          ウィンドウを動かす機能 {isDisableDragging ? "OFF" : "ON"}
        </button>
        <Rnd
          style={{
            backgroundColor: "#fff0d8"
          }}
          default={{
            x: 0,
            y: 0,
            width: 320,
            height: 200
          }}
          disableDragging={isDisableDragging}
        >
          <span
            style={{
              color: "#000f27"
            }}
          >
            {isDisableDragging ? "動きません" : "動きます"}
          </span>
        </Rnd>
      </header>
    </div>
  );
}

export default App;
```

# 最後に

プロパティを一つ指定するだけでウィンドウを動かす機能のON/OFFの切り替えができるようになりましたね

次は、ウィンドウの初期表示の設定方法
ついて紹介していきます。

最後まで読んでよかったらLGTMお願いします！

[まとめ記事](https://qiita.com/aokisinn1192/items/32ade691b0fc60dedef0) もあるのでよければこちらもみてください
[Next.js] Herokuでdeployするのに必要な設定

Next.jsのアプリをそのままHerokuにdeployするとdeployは成功しますが、表示しようとするとエラーになります。

原因はHerokuだと[portを$PORTで指定してやる必要がある](https://devcenter.heroku.com/articles/dynos#web-dynos)ためです。

よってPackage.jsonのscripts.startのところを以下のように変更します。

```json
  "scripts": {
    ...
    "start": "next start -p $PORT",
  },
```
[Next.js] NextAuth(v3)でGoogle Sign inをつける

こちらはv3の実装方法で、v4でかなり変わっています
v4については[こちらの記事](https://qiita.com/yanamura/items/f5e23d549535a7b881dd)をご覧ください

## 手順

next-authを追加します。

```
npm install --save next-auth
```

`pages/api/auth/[...nextauth].js`を作成します。

`[...nextauth].js`はこのように実装します。

```javascript
// [...nextauth.js]
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // emailのドメイン制限を入れたい場合は以下のcallbacksを入れてください
  callbacks: {
    signIn: async (user, account, profile) => {
      if (
        account.provider === 'google' &&
        profile.verified_email === true &&
        profile.email.endsWith('@example.com')
      ) {
        return Promise.resolve(true)
      } else {
        return Promise.resolve(false)
      }
    },
  },
  // A database is optional, but required to persist accounts in a database
  database: process.env.DATABASE_URL,
}

export default (req, res) => NextAuth(req, res, options)
```

`.env.local` を作成し、中身にGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを記載します。

```
GOOGLE_CLIENT_ID=xxxxxx
GOOGLE_CLIENT_SECRET=yyyyyyy
```

client idとsecretは https://console.developers.google.com/apis/credentials で作成・取得できます


あとは認証をかけたいところでuseSession()するだけです。

```react

import React from 'react'
import { signIn, signOut, useSession } from 'next-auth/client'

export default function Page() {
  const [ session, loading ] = useSession()

  return <>
    {!session && <>
      Not signed in <br/>
      <button onClick={signIn}>Sign in</button>
    </>}
    {session && <>
      Signed in as {session.user.email} <br/>
      <button onClick={signOut}>Sign out</button>
    </>}
  </>
}
```

本番環境にdeployするときは環境変数にNEXTAUTH_URLを設定する必要があります。

```
NEXTAUTH_URL=https://example.com
```

## 環境

next-auth v3.1.0

## 参考

https://next-auth.js.org/getting-started/example
Reactでいい感じのサブウィンドウを実装する  ③ リサイズ機能をON/OFF切り替える


シリーズ記事です。
初めての方は、[こちら](https://qiita.com/aokisinn1192/items/dd5f2598aef88d5a824f) を最初に読んでください

Reactでいい感じのサブウィンドウを表示する際にリサイズ機能をON/OFF切り替えたい場面がよくあるので、

今回は、この方法について紹介します。

# やり方

RndのdisableDraggingというプロパティに値を指定してあげるとON/OFFの切り替えがでできます。

## 例1 リサイズ機能ON　

```javascript
<Rnd enableResizing={true}>test</Rnd>
```
※ デフォルトは　trueなので指定しなくても大丈夫です。

## 例2 リサイズ機能OFF

```javascript
<Rnd enableResizing={false}>test</Rnd>
```

# 最後に

プロパティを一つ指定するだけでリサイズ機能のON/OFFの切り替えができるようになりましたね

次は、ウィンドウ動かす機能のオンオフのやり方について紹介していきます。

最後まで読んでよかったらLGTMお願いします！

[まとめ記事](https://qiita.com/aokisinn1192/items/32ade691b0fc60dedef0) もあるのでよければこちらもみてください
ログイン要求処理の実装方法（Rails・初心者向け）

ログイン要求処理とは、ログインしていないユーザーに対して特定のページを見せないようにするための処理です。
この記事では、ログイン要求処理の実装方法を簡単に解決しています。

`$ rails g helper sessions`でhelperを用意して、`current_user`と`logged_in?`を実装します。

```app/helpers/sessions_helper.rb
module SessionsHelper
  def current_user
    @current_user ||= User.find_by(id: session[:user_id])
  end

  def logged_in?
    !!current_user
  end
end
```

`def current_user`は、現在ログインしているユーザーを取得するメソッドです。

`@current_user ||= User.find_by(id: session[:user_id])`は
`@current_user`に現在のログインユーザーが代入されている場合　→　何もしません。
`@current_user`に現在のログインユーザーが代入されていない場合　→　`User.find_by(...)`からログインユーザーを取得し、`@current_user`に代入します。

`def logged_in?`はユーザーがログインしている時はtrueを、ログインしていなければfalseを返します。

コントローラーについて考えていきます。

```Ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base

  include SessionsHelper

  private

  def require_user_logged_in
    unless logged_in?
      redirect_to login_url
    end
  end
end
```
`ApplicationController`に書いたメソッドは、すべてのControllerで使用できるようになります。

`require_user_logged_in`メソッドを定義します。
`require_user_logged_in`メソッドはログインの状態を確認して、ログインしていれば何もせず、ログインしていなければ強制的にログインページに戻します。
`include SessionsHelper`を書いた理由としては、Helperで定義した`logged_in?`メソッドを使えるようにするためです。

では`require_user_logged_in`メソッドを`UsersController`で使ってみます。

```Ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
  before_action :require_user_logged_in, only: [:index, :show]

  #以下省略
```
before_actionで指定されたindexとshowは、事前処理として`require_user_logged_in`メソッドが実行されます。

例えばある人がusers#indexにアクセスした際に、その人がログインしいればusers#indexが見れます。
しかし、ログインしていなければログインページに飛ばされます。
このようにして、会員制のサービスなどを作ることが出来ます。
以上です。
material-tableで先頭行を固定する方法

テーブルの先頭行を固定したい。
たったこれだけのことでハマってしまったので備忘として残します。

#まず material-table とは

この説明を省くと誤解される可能性があるので。
これです↓
https://material-table.com/#/

material-uiをベースに作られた簡単にデータテーブルを実装できるOSSです。
簡単にフィルター、検索、ソートなどの機能をつけられるので、
material-uiのDataGridで頑張る必要がありません。

#先頭行を固定する方法
material-tableを編集したい場合は
`<MaterialTable />`内にプロパティを設定することで簡単に編集できます。

プロパティ一覧↓
https://material-table.com/#/docs/all-props

先頭行を固定したい場合は`headerStyle`を編集すればいいので

```table.js
const DataTable = () => {
    return (
      <MaterialTable
        title="DataTable"
        columns={[
            //省略
        ]}
        data={[
            //省略
        ]}        
        options={{
            headerStyle: {position: 'sticky', top: 0},
        }}
      />
    )
}
```

このようにプロパティに`options`と`headerStyle`と書いて
`position: 'sticky', top: 0`とするだけ。

...と思っていたのですが、これだけでは効きませんでした。
###効かなかった理由
material-tableを使うと`table`より上の階層にいくつか`div`が作られるのですが、
そのうちの2つで`overflow`が初期値ではなく別の値に書き換えられていたことが原因でした。

https://termina.io/posts/position-sticky-and-overflow-property
>position: stickyは祖先要素にvisible以外のoverflow属性が指定してあると期待通りに動作しない場合があります。

###解決方法
原始的な方法ですが、対象のスタイルを上書きして解決しました。

```App.css
.Component-horizontalScrollContainer-19,
.Component-horizontalScrollContainer-19 div {
  overflow: visible !important;
}
```

#最後に
もっと綺麗な解決方法がないかなーとドキュメントを眺めていたらこんな一文が。
https://material-table.com/#/docs/features/component-overriding
>Container that everything renders in

これを見る限り`Container`コンポーネントのオーバーライドで解決できそうな気がしますが、ちょっと難しそうなので触れていません。笑

もし詳しい方がいましたら教えてください！
【AZ-900】「クラウドの概念」について整理

## 本記事の目的
* 本稿はAZ-900を受験するにあたり参考とした教材「合格対策 Microsoft認定 AZ-900:Microsoft Azure Fundamentalsテキスト&問題集」について学習した内容を、自身の備忘録としてまとめたものです。
    * 参考(amazon url)：[合格対策 Microsoft認定 AZ-900:Microsoft Azure Fundamentalsテキスト&問題集](https://www.amazon.co.jp/dp/4865942319/) 
* AZ-900は2020年11月9日に試験内容が変更されており(詳しくは[公式サイト参照](https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-900))、上記本は2020年3月8日時点での内容のため、章の構成が最新状況と異なります。
* しかし、求められているスキルを確認すると、**求められる内容自体に大きな変化はない** ため、こちらの参考書は未だ有効であると判断しました。
    * 試験内容を日本語訳した記事もQiitaで作成しました。→ [【AZ-900】試験範囲の変更内容の翻訳【2020年11月9日更新内容】](https://qiita.com/picato0511/items/114693650c9eb062c0f5)
* この記事を参考にされる方は、上記背景をよくご理解の上、ご活用ください。

## クラウドの種類

* パブリッククラウド
    * クラウドサービスプロバイダーが提供するクラウド環境
* プライベートクラウド
    * 自社で保有するクラウド環境
* ハイブリットクラウド
    * パブリッククラウドとプライベートクラウドを組み合わせて構築したクラウド環境

## (パブリック)クラウドのメリット

* コストは運用コスト(OpEx：Operational Expenditure)のみ
    * 自社で設備を調達するための費用、資本コスト(CapEx：Capital Expenditure)はクラウドの場合不要となる
* オンデマンドセルフサービス
    * ユーザー側で自由に環境を操作できる
* 高スケーラビリティ
* 高可用性
* 高弾力性

## (パブリック)クラウドのデメリット
* パブリッククラウドはあくまで社外扱い。また、複数の企業が利用していることを忘れずに
    * 個人情報や機密情報などの管理にパブリッククラウドを利用する場合、組織のコンプライアンスとして許容されるか注意が必要。

## クラウドのサービスモデル

* IaaS：Infrastructure as a Service
    * データセンターの設備、ネットワーク、ハードウェアを提供
    * ユーザー側の自由度は高いが、管理負担も大きい
    * Azureの仮想マシンを利用することはIaaSに該当
* PaaS：Platform as a Service
    * IaaSで提供されるものの他、OS、開発ツールなどを提供
    * Azure Web AppやAzure SQL Databaseなどを利用することはPaaSに該当
* SaaS：Software as a Service
    * IaaSで提供されるものの他、アプリケーションを提供
    * ユーザー側での管理負担は小さいが、自由度も低い

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/3a7cb805-391e-083d-572b-e2b621f14361.png)
参考画像：[Microsoft Learn：Azureの基礎第1部:Azure の主要概念に関する説明/Azureの基本的な概念を説明する/クラウドサービスのさまざまなカテゴリを説明する](https://docs.microsoft.com/ja-jp/learn/modules/fundamental-azure-concepts/categories-of-cloud-services)
nth-child()とnth-of type()の違い

##結論
<strong>順番を数えるときに指定した要素のみを数えるかどうか


##それぞれの挙動の違い
例として以下のようなコードを使用します。

```html

<body>
  <h1>国民の祝日</h1>
  <h2>１月</h2>
  <p>元日</p>
  <p>成人の日</p>
  <h2>２月</h2>
  <p>建国記念の日</p>
  <p>天皇誕生日</p>
  <h2>３月</h2>
  <p>春分の日</p>
</body>
```

ブラウザ表示は以下のようになります。
<img width="200x" alt="ブラウザ表示" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/f72b93e5-5389-26b9-3e15-52e662a45625.png">

今回はpタグに対して指定をしていきたいと思います。
nth-child()とnth-of type()共に３番目を指定して色を変えてみます。

```css

p:nth-child(3) {
  color: red;
}

p:nth-of-type(3) {
  color: blue;
}
```

結果としてブラウザの表示は以下のようになりました。


<img width="200x" alt="ブラウザ表示" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/8e4c5565-a521-24b9-5e3f-f4b5b1701201.png">

``nth-child``は３番目の要素であるpタグに対してプロパティが適用されています。
これは上から数えて３番目がpタグだったため``color: red;``が適用されて色が赤くなっています。
これを

```css

p:nth-child(1) {
  color: red;
}
```

とすると１番目の要素は``h1``タグで囲まれているためプロパティは適用されず文字は赤くなりません。

それに対して``nth-of-type``はpタグの３番目にプロパティが適用されています。
このことから``nth-of-type``は指定した型で順番を数えるという特徴があります。

以上、nth-child()とnth-of type()の違いでした。
【Rails】ActionMailbox + Sendgrid + AWS(Route53) を実装してみた

#課題
Action Mailbox を実装してみたら意外と苦戦したので、未来の自分の為に纏め。
最低限の実装で取り敢えず動くところが目標です。

#前提
1. 既に記録対象となるRailsサーバはAWS(EC2)で動作
1. DNSはAWS(Route53)を使用
1. メール配信サービスはSendgridを使用 

#やること
1. ActionMailbox を導入して受け取ったPOSTをRailsでよろしく処理する準備
1. メールをSendgridに送る為、Sendgrid宛のmxレコードをRoute53に作成
1. Sendgridから受け取ったメールをRailsの特定URLにPOSTする設定を投入

#ActionMailboxの導入
Rails6では初期状態から以下コマンドでActionMailboxをインストールできます。

```zsh:ActionMailboxをインストール
$ rails action_mailbox:install
```

ActiveStorageとActionMailboxのMigration Fileが作成されるのでmigrateして置きます。
この二つのテーブルの役割の説明は割愛します。

```zsh:migrate
$ rails db:migrate
```

以下作成されたばかりの app/mailboxes/application_mailbox.rb です。
ここに受け取ったメールの処理を加えて行きます。

```ruby:app/mailboxes/application_mailbox.rb
class ApplicationMailbox < ActionMailbox::Base
  # routing /something/i => :somewhere
end
```
細かい事は沢山できますが、まずは単純に受けとった全てのメールに対して処理する内容とします。


```ruby:app/mailboxes/application_mailbox.rb
class ApplicationMailbox < ActionMailbox::Base
  routing all: :replies
end

class RepliesMailbox < ApplicationMailbox
  def process
    #Do something!!
  end
end
```

この時点で、以下URLにアクセスするとローカルで挙動が確認できます。
http://localhost:3000/rails/conductor/action_mailbox/inbound_emails/new
![スクリーンショット 2021-01-03 11.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/52a31dda-34b0-bf07-b4a9-07b2c0e19f70.png)


外部からメールを受け取るようのパスワードを設定します。

```zsh:credentialの設定
$ EDITOR="vi" bin/rails credentials:edit -e production
```
```yml:credential
action_mailbox:
  ingress_password: 'greatpassword'
```
最後に何処のメール配信サービスからリクエストが来るのか(今回はsendgrid)設定して完了です。

```ruby:config/environments/production.rb
class ApplicationMailbox < ActionMailbox::Base
  ##省略##
  config.action_mailbox.ingress = :sendgrid
end
```

#Sendgridの登録と設定
1. [こちら](https://signup.sendgrid.com/)からSendgridに登録します。 
1. settings -> Sender Authentication -> Domain Authenticationと選択します。
1. CNAMEを3つ入力しろと言われるのでRoute53に記載して確認します。
![スクリーンショット 2021-01-03 11.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/43d68d4c-2bd2-0b13-97e2-e1c067fd5a58.png)

----------ここから先はRoute53の設定が完了していることが前提です-----------

1. settings -> Inbound Parse -> Add Host & URL と選択します。
1. MXレコードとして記載したホスト名とURLを入力します。また、'POST the raw, full MIME message'のチェックも入れてください

[URL Example]
https://actionmailbox:greatpassword@host.example.com/rails/action_mailbox/sendgrid/inbound_emails

#Route53の設定
1. MXレコードを設定します。Name: 'なんでもいい', Target: 'mx.sendgrid.net', Priority: '10'
![スクリーンショット 2021-01-03 12.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/80562918-721f-e563-1464-5f29aaf5981c.png)
1. Sendgridで指定されたCNAMEの登録


以上で取り急ぎ動作すると思います。

#参考情報
Action Mailbox Basics
https://guides.rubyonrails.org/action_mailbox_basics.html

Rails 6のAction Mailboxを使ってみよう（翻訳）
https://techracho.bpsinc.jp/hachi8833/2020_03_05/88539

Rails6で導入されるAction Mailboxを試してみた
https://bagelee.com/programming/ruby-on-rails/rails6-action-mailbox/
Multiple migrations have the name　エラーの解決方法

初投稿です。
Railsを用いたアプリ作成で、マイグレーションの際に

**Multiple migrations have the name**

というエラーが発生したので、対処方法を備忘としてメモ書きしておきます。

開発環境は **Ruby_on_Rails vesion6.0.0** です。

エラーについてですが、**既に同じ名前のマイグレーションファイルが存在している**ことが原因で発生しているようだったので、「dbディレクトリ」の「migratinディレクトリ」を確認。
案の定同名のファイル(作成日時は異なる)が存在していたので、使用しない側のマイグレーションファイルを削除。
その後マイグレーションを実行することでエラーを回避できました。
【Java】フォルダの作成方法

#プログラミング勉強日記
2021年1月3日
フォルダの作成方法について簡単にまとめる。Java7から機能を改善した`java.nio(NEW I/O 2)`でのフォルダ作成についてまとめる。


#フォルダを作成する方法
　作成するフォルダのパスの指定にはjava.niofile.Pathsクラスのgetメソッドで行う。フォルダを1つだけ作成する場合は、java.nio.FilesクラスのcreateDirectoryメソッドを使う。親フォルダを含めたすべてのフォルダ階層をまとめて作成する場合にはcreateDirectoriesメソッドを使う。

#サンプルコード
　ファイルがすでに存在する場合は、FileAlreadyExistsExceptionの例外が発生する。

```java
try {
    // 絶対パスで作成
    Path path1 = Paths.get("c:\\Test1");
    Files.createDirectory(path1);
 
    // 親フォルダを含めて作成
    Path pat<h2><span id="_PathsgetquotcTest2abcquot">= Paths.get("c:\\Test1\\abc");</span></h2>
    Files.createDirectories(path2);
 
    // 相対パスで作成
    Path pat<h3><span id="_PathsgetquotTest1quot">= Paths.get("Test1");</span></h3>
    Files.createDirectory(path3);
 
} catch (IOException e) {
    e.printStackTrace();
}
```

#フォルダの作成日時を取得する方法
　java.nioではフォルダの作成日時を取得することができる。getAttributeメソッドで引数にcreatiTimeを設定して取得する。

```java
Path path = Paths.get("c:\\Test1");
System.out.println(Files.getAttribute(path, "creationTime"));
```

```:実行結果
2020-01-03T02:54:45.903849Z
```



#参考文献
[【Java入門】フォルダを作成する方法（java.nio.file）](https://www.sejuku.net/blog/20071)
[ディレクトリを作成する](https://www.javadrive.jp/start/file/index5.html)
API GatewayでIAM認証してみた

公式ナレッジの[API Gateway API に IAM 認証を有効化するにはどうすればよいですか?](https://aws.amazon.com/jp/premiumsupport/knowledge-center/iam-authentication-api-gateway/)を参考に実装してみました！
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/1831b5a4-8cef-e1a3-dcfb-0fcc73d019b9.png">

## Lambda関数を作成
一から作成/ランタイムPython3.8/他はデフォルト

関数作成ユーザーが`iam:PassRole`の権限がないとエラーが発生します。
[AWS のサービスにロールを渡すアクセス権限をユーザーに付与する](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_use_passrole.html)

テストなので超超シンプルな関数です。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/fc03f45e-efb3-8df9-48ac-8639d4fbb2e3.png">

## API Gateway作成
- REST API > 構築 > 新しいAPIの作成
- アクションのプルダウンからメソッドの作成でGETを選択する。
- 先ほど作成したLambda関数と統合する。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/2bbd596e-2689-5b47-2d84-d0c8ecf2b087.png">


#####  保存が完了したらデプロイ　:rocket:
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/9cfa0e43-f77b-b832-a2df-2da24b6d7a21.png">

##### URLが発行されるので[Postman](https://www.postman.com/)から叩いてみます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/6c7127b4-199c-098a-81e8-dd24b1c02815.png">

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/a77e820f-0959-e654-cd70-73f163662897.png">

この時点では**パブリックAPI**です。

## API GatewayのIAM認証を有効化
API Gatewayでは、APIに対して以下のような認証方式が存在します。

- Cognitoを使った認証
- サードパーティの認証基盤とLambda Authorizerを使った認証
- IAM認証


今回はIAM認証での実装なので作成したメソッドリクエストの認可を`AWS_IAM`に変更し再度デプロイします。 :rocket:
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/5faa132f-ada3-c0be-bbf7-51032cf06c44.png">

##### 再度、APIを[Postman](https://www.postman.com/)から叩いてみます。
すると`"Missing Authentication Token"`とメッセージが返ってきます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/e40d358d-f929-379c-67f3-32b239418774.png">


### IAMの設定
- 作成したAPIのリクエストの権限ポリシーを作成
- IAMユーザー作成しポリシーをアタッチ

##### ポリシーの作成
作成したAPIの`arn`をResourceに指定しインラインポリシーを作成します。

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "execute-api:Invoke"
            ],
            "Resource": [
                "arn:aws:execute-api:........../*/GET/"
            ]
        }
    ]
}
```
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/732e2ee4-d388-dcde-e62e-f135e135e3c0.png">

##### IAMユーザーを作成し上記ポリシーをアタッチします。Postmanでテストする際に`Access key ID`と`Secret access key`を使うのでメモします。

## 動作確認
- [Postman](https://www.postman.com/)に作成したIAMの`Access key ID`と`Secret access key`をセットして叩いてみます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/f8b02878-610a-9149-af22-5ce7611049f4.png">

##### 出来ました！

:warning:ちなみに権限が足りないと下記のようなエラーが出ます。
ポリシーを確認してみてください。

```json
{
    "Message": "User: arn:aws:iam::123456789:user/api-unvalid is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api............../test/GET/"
}
```
【初心者向け】画像の加工や圧縮などに便利なWEBツール4選

#どうも7noteです。WEB開発で便利なおすすめ画像加工・圧縮ツール

WEB開発の際には画像の加工や圧縮など様々な処理が必要になります。
アドビのソフトを持っていればそこまで困ることは少ないのですが、アドビのフォトショップがなくても
WEB上で加工・圧縮ができるツールをご紹介。

## JPG↔PNGの相互変換ツール

![photo01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/70d28146-e655-13c5-dd4d-7a1fb16c8f6c.png)

https://jpg2png.com/ja/

製作の都合でjpgをpngに、もしくは逆にpngをjpgに変換したくなったらこれ。
画像をドラッグ&ドロップで変換可能です。
**複数枚同時に変換も可能！**

## PDFの圧縮（結合・分解・変換も可）

![photo02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/1367f7ac-8537-ab56-c45e-9cf35d535266.png)

https://www.ilovepdf.com/ja/compress_pdf


その名も**「I ❤(LOVE) PDF」**。
PDFに関することならこのツールですべてできるのではというくらい機能が盛りだくさんです。

私はPDFの圧縮によくこのツールを利用しています。

## JPG・PNGの圧縮

![photo03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/67bc7551-57da-b0ef-5575-15bc484474c7.png)

https://tinypng.com/

通称**「パンダ」**。
このツールも優秀でかつ有名なツールになります。
驚くくらい画像を圧縮してくれるので、とても頼りになる存在です。

なぜパンダがこんなにも主張しているサイトなのかは謎です。。。


## 画像の加工・編集サイト

![photo04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/09f0496e-a9b0-9688-943e-c0d9e0c6560b.png)

https://pixlr.com/jp/x/

「pixlr」
誰もが簡単にオンラインで画像編集できるようになりました。
スウェーデンの会社が開発しており、**会員登録不要で利用可能**です。

私は他の有料ソフトを普段利用しているので、そこまで使ったことはないのですが、
日本語の記事でも色々紹介されているので、使い方なども検索すれば色々確認できるので安心して使うことができると思います。

## まとめ

画像はWEB製作と切り離せない重要なものです。
その画像をオンライン上で簡単に編集・加工をできるスキルは地味ですが意外と重要だと思っています。

オンライン上で簡単に利用できるツールが増え、しかもpixlrのようにかなり高機能なものまで無料で使えるようになってきました。
今後もどんどん便利なツールが増えていくと予想されるので、しっかり最新情報についていきながら開発環境を整えていきたいものですね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
MAMPでのtimezone設定

#はじめまして
プログラミングの初学者ですが、学習する際につまずいたことや間違えてしまったことなどを、Qiitaにまとめていこうと思います。

同じように失敗してしまう方の参考になれば幸いです。

##PHP+MySQL入門講座
プログラミングの学習には、主に<a href="https://www.udemy.com">Udemy</a>   を使用しています。最近では、たにぐちまことさん(<a href="https://twitter.com/seltzer?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">@seltzer</a>）の動画を見てPHP やMySQL、WordPressについて学習しています。

初めに、<a href="https://www.udemy.com/share/103DL5AEcZcVZWQXgJ/">WordPress開発マスター講座</a>を受講し、初学者にも分かりやすく説明が丁寧でしたので、別の講座も受講することにしました。それが、<a href="https://www.udemy.com/share/101XkAAEcZcVZWQXgJ/">PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門講座</a>です。

##講師がWindows OS
前回の講座は2020年12月31日にやり終えました。なので、こちらの講座はちょうど新年の元日から開始する事ができ、とても気合が入っていました。講師のたにぐちまことさんは、windowsを使用されており、私のMacとは操作が少し違う点、気にはなっておりましたが、前回は問題なかったため、今回も大丈夫だろうと思っていました。

##XAMPP?MAMP?
受講に伴い開発環境を整えることになりましたが、WindowsはXAMPP、MacはMAMPというソフトがあり、講座はXAMPPの方で進めていくとの事。(えー大丈夫かな。)そして開始早々にもう完全に見た目が違う。

▼XAMPP
![XAMPP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996098/9675f4db-d5c9-3387-9475-5014d582f475.png)

▼MAMP
![MAMP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996098/596c054b-fef8-be9f-7963-2abae7ce18ca.png)
そして、ついに躓きました。

##現在の時刻を表示する
date関数を使用して、現在の時刻を表示する内容です。

>
print(date('G時 i分 s秒'));
>

ブラウザでは以下のように出力します。
![時刻.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996098/4e4c31cd-f542-78ea-748c-ce011af27fcd.png)
説明によると、タイムゾーンの設定が違うため、現時刻が表示されないとの事でした。php.iniファイルの内容を修正する必要があるのですが、ここからの説明は全てXAMPPで進みます。

講座の中では、MAMPでphp.iniファイルを操作する説明がありませんでしたので、そもそもファイルのパスがわからず検索しました。
参考サイト：<a href="https://webkaru.net/php/mamp-php-ini-file-locate/">php.iniファイルの場所／PHPのバージョン確認・変更 - MAMPの使い方</a>

##表示されている時刻が修正されない！
ファイル内を「date.timezone 」で検索し、以下のように修正するだけの簡単な作業でした。
>
date.timezone = "Europe/Berlin"
↓
date.timezone = "Asia/Tokyo"
>

しかし反映されない！9時間ずれている！なぜ？

このまま放置して講座進めれば解決するかもと思いましたが、そんな気配はない。色々見直したりして結局30分くらい経過してしまいました。

実際のvscodeのキャプチャがこちら。
![date.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/996098/55ab2fd8-7c45-68c6-8f1f-2073bc7949ff.png)
最終行がコメントアウトされていますね。
このせいで変更した設定が反映されていませんでした。
みなさんご注意ください(´･Д･)」
Mac > anyenv,nodenvをMacに設定


環境：Mac Big Sur
シェル：zsh
設定日：2021/1/3

nodeやpythonなどのバージョン管理を容易にしてくれるanyenvをMacに入れます。


以下の公式Gtihubに沿って進みます
[anyenv/anyenv: All in one for \*\*env](https://github.com/anyenv/anyenv#getting-started)


# 1. インストールと設定

## 1. Install anyenv

Homebrewを使って入れます

```
brew install anyenv
```


## 2. シェルの設定へ追加

#### シェルの設定へ追加

   * **bash**の場合

     ```
     echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
     ```
     
   * **Zsh**の場合

     ```
     echo 'eval "$(anyenv init -)"' >> ~/.zshrc
     ```

#### 確認

```
vi ~/.zshrc
```

## 3. シェルの再起動

変更を有効にするためにシェルを再起動、もしくは以下のコマンドを打ちます。

```
exec $SHELL -l
```


以下のようなメッセージが表示されたら

```
ANYENV_DEFINITION_ROOT(/Users/riywo/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init
```

設定を加えます

### Manual git checkout

#### 1. anyenvファイルをGithubから取得します

```
git clone https://github.com/anyenv/anyenv ~/.anyenv
```

  以下のようにすでに存在するメッセージが表示されたら
  
```
fatal: destination path '/Users/riywo/.anyenv' already exists and is not an empty directory.
```
  
  すでにあるフォルダを削除して、
  
```
rm -rf ~/.anyenv
```

再び、`git clone`

```
git clone https://github.com/anyenv/anyenv ~/.anyenv
```

#### 2. pathの設定

`~/.anyenv/bin` を `$PATH` に追加します

   * **bash**の場合

     ```
     echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
     ```
     
   * **Zsh**の場合

     ```
     echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
     ```

#### 3. Set up anyenv in your shell.

```
~/.anyenv/bin/anyenv init
```

```
exec $SHELL -l
```


#### 4. シェルの再起動


マニフェストディレクトリがない場合は、警告が表示されます。

```
ANYENV_DEFINITION_ROOT(/Users/riywo/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init
```



# 2. manifest directorのインストールと初期化

### anyenv install

```
anyenv install --init
```


質問されたら`y`と答えます

```
Do you want to checkout https://github.com/anyenv/anyenv-install.git? [y/N]: y
```


### Install nodenv

さっそく`nodenv`を入れていきます

```
anyenv install nodenv
exec $SHELL -l
nodenv -v
```

`nodenv 1.4.0` 等バージョン番号が表示されたら成功です

インストール可能なバージョンを表示

```
$ nodenv install -l

省略
14.15.2
14.15.3
15.0.0
15.0.1
省略
```

   * v10系をinstall

     ```
     nodenv install 10.23.0
     ```

   * v12系をinstall

     ```
     nodenv install 12.20.0
     ```

   * v16系をinstall

     ```
     nodenv install 16.13.2
     ```


有効なバージョンに設定

```
nodenv global 16.13.2
```

確認

```
$ node --version
16.13.2
```

yarnも入れておく

```
npm install -g yarn
exec $SHELL -l
yarn -v
```


# Update

Updateしたい時には以下

```
anyenv install --update
```



# 3. nodenvの更新

しばらく使っていると、`nodenv install -l`としても最新のnodeのリストがでてこない。
こういうときは、更新を行う。

```
mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
```

```
anyenv update
```


```
$ nodenv install -l
```
Splunk Validate Best Practiceについて

昔のSplunk Answersで[@sloshburch](https://community.splunk.com/t5/user/viewprofilepage/user-id/27103)が取りまとめていたSplunkのBest Practice集、ふと気になったので調べてみました。

- Burchは.conf20で[Best Practices for Workload or Infrastructure Licensing](http://splk.it/conf20-PLA1520)や[Splunk Talk @ .conf20](https://www.google.com/search?q=Splunk+Talk+%40+.conf20&tbm=vid)の発表をしていた。

#検索方法
今のSplunk Answersだと以下の検索でひっぱりだすことが可能

https://community.splunk.com/t5/forums/searchpage/tab/message?filter=location&q=validated_best-practice&noSynonym=false&location=category:en-us-splunk-answers&collapse_discussion=true

またBurch本人のプロフィールからも[ユースケース](https://community.splunk.com/t5/forums/recentpostspage/post-type/thread/user-id/27103)がひっぱり出せる。

これらの知識とかが結局
https://docs.splunk.com/Special:SplunkSearch/docs?q=Best+Practices
のようなドキュメントになったのかとか
[Splunk Lantern](https://lantern.splunk.com/hc/en-us)でまとめられたのかとかはよくわからない。

- Splunk JapanだとベストプラクティスがSplunk Lanternのサイトになっていますね

#まとめ
SPL関連だと
[Clara-fication site:splunk.com](https://www.google.com/search?q=Clara-fication+site%3Asplunk.com)で出てくるSplunk>のブログとかが有益だったり

- [Splunkの学習コンテンツをまとめてみました](https://qiita.com/maroon/items/86412cbeee156899a5a7)
- [Splunkについて、時間がある時に眺めておきたい情報リンク集](https://qiita.com/odorusatoshi/items/4c6bbda57e8818b56bee)

と日本語の情報が集まっていたりしています。

他の情報なんかだと[自分の代表作](https://community.splunk.com/t5/Archive/Can-Splunk-find-love/m-p/469347)もなんとか残ってますが、2020年6月にリニューアルされたSplunk Answersはデータは残っているとしても失われてしまったものも多いような感じがします。

Splunk Answersでいろいろとやって来た身としては複雑。
ローカルとCI/CD実行環境のterraformバージョンをtfenvで揃える

# やらかし
現在担当しているプロダクトではterraformでリソース管理をしており、CircleCIを用いてCI/CDを行っています。

ある日dev環境への反映ということもあり、CircleCIを使わずにローカルからterraform applyをした所、そのapply自体は通ったのですがその後のCircleCIからのterraform実行がエラーとなってしまいました。原因を確認した所、CircleCIで利用しているterrformバージョンより新しいバージョンでローカルから実行してしまったことが原因でした。terraformの仕様上、**terraform apply時に更新されるtfstateファイルに定義されているterraformバージョンを下回るバージョンでのterraform実行はできない**ようです。

この時はCircleCI側のterraformバージョンを上げることで解決しました。対応策としてローカルからのterraform applyは気安く行わないことが上げられますが、ローカルとCircleCIのterraformバージョンを揃えといた方が良いかとも思います。そこでterraformバージョンを管理する**tfenv**が利用できます。

# tfenvとは
[tfenv](https://github.com/tfutils/tfenv)は簡単にterraformのバージョンを切り替えられるパッケージマネージャです。詳しくは作成者の方の[記事](https://qiita.com/kamatama_41/items/ba59a070d8389aab7694)をご覧ください。

## .terraform-versionファイル
tfenvの特徴として.terraform-versionファイルを置いておくとファイルに書かれたバージョンを利用します。こちらをリポジトリ上で管理することで、ローカルとCI/CD実行環境側にtfenvを導入することでterrafromバージョンを揃えることができます。

# 最後に
今回はtfenvを紹介しました。tfenvを使って開発環境と実行環境のバージョン差異を無くしましょう！
MacOS Big SurでNFSをマウントする

Big SurでNFSをマウントしようとした際に、リモートサーバのロックが取れないとエラーが出る件についてメモ。

## 環境
- Client: MacOS Big Sur 11.1
- Server: Raspbian GNU/Linux 10 (buster)

## 状況
NFSマウント時に以下のようにエラーが発生した。

```
$ sudo mount_nfs -P 192.168.10.1:/mnt/disk/nfs ~/nas
mount_nfs: can't mount with remote locks when server (192.168.10.1) is not running rpc.statd: RPC prog. not avail
```

## 解決方法
Big Sur以降ではNFSマウント時のデフォルトの振る舞いが変化したみたい([こちらの記事参照](https://forums.macrumors.com/threads/since-upgrading-to-big-sur-i-can-not-longer-mount-remote-nfs-drives.2274862/))。

リモートサーバ側でrpc-statサービスを立ち上げればよかった。

```
sudo systemctl start rpc-statd.service
sudo systemctl enable rpc-statd.service
```

その後、Mac側でマウント。

```
mkdir -p ~/nas
sudo mount_nfs -P 192.168.10.1:/mnt/disk/nfs ~/nas
```

これでマウントできた。
少し複雑な条件分岐

数値numが1以上かつ10以下の範囲であればTrueを出力します。
または、outside_modeがTrueの場合は数値numが0以下、11以上であってもTrueを出力します。

この処理を条件分岐を使って記述していきます。

出力例:

```bash
in1to10(5, false)
 =>True
in1to10(11, false) 
=>False
in1to10(11  true)
=>True
```

今回は論理演算子を用います。

```ruby
# aもbもtrueの場合にtrue
a && b 

# aかbのどちらかがtrueの場合にtrue
a || b 
```

Rubyの論理演算子では左辺から右辺に条件式を評価し、もし式全体の評価が確定した場合、その時点で評価を行いません。

```ruby
def in1to10 (num, outside_mode)
  if (num >= 1 && num <= 10) || outside_mode
    puts "True"
  else
    puts "False"
  end
end
```
このような記述をすることで、出力例のようにし出力が可能となります。
Alma Linux 8 で DDNS の自動更新 (MyDNS.JP 専用)

既に同じ趣旨の記事がたくさん投稿されているので、屋上屋を架す憾みがあるが、いくつか新しい知見と工夫を追加できたと思うので、自分用のメモを兼ねて投稿する。

なお、Alma Linux (CentOS) 8 の環境である。

## /root/ddnscheck.sh

```ddnscheck.sh
#!/usr/bin/bash
# This script checks and updates ddns connection for this server.

# TARGET
TARGET="myserver.xxx.xx"

# Operating limit in seconds (default 16 hours : 4am to 8pm)
LIMIT=57600
if [ $# -ge 1 ]; then
  let LIMIT=$1
fi

# Sleep seconds between pings
SLEEP=15

# Forced update limit in seconds (1 hour)
UPDATE_LIMIT=3600

# Overall loop counter
I=0
# Updating loop counter
J=0

echo "Going to check ddns for $LIMIT seconds ..." 1>&2

while [ $I -lt $LIMIT ];
do
  echo -n "`date +"%m-%d %H:%M:%S"` " 1>&2
  ping -4 -c1 -w5 $TARGET >> /dev/null
  if [ $? == 0 ]; then
    echo " OK." 1>&2
  else
    echo " Not Connected."
    let J=$UPDATE_LIMIT
  fi
  if [ $J -ge $UPDATE_LIMIT ]; then
    echo " Going to update DDNS ..."
    wget -4 -O - https://mydns******:password@www.mydns.jp/login.html 1>&2
    wget -6 -O - https://mydns******:password@www.mydns.jp/login.html 1>&2
    let J=0
  fi
  sleep $SLEEP
  let I=$I+$SLEEP
  let J=$J+$SLEEP
done
echo "Operation finished." 1>&2

```

## /etc/cron.d/ddnscheck

```ddnscheck
55 3 * * * root /root/ddnscheck.sh &> /var/log/nginx/ddnscheck.log
```

## 説明

`ddnscheck.sh` は、デフォルトで 57600秒（16時間）にわたって動作する。15秒ごとに自宅サーバ（自分自身でも良い）に対して DDNS のサーバ名で `ping` を打ち、応答が返ってこなければ、自宅サーバのグローバル・アドレスが変更されたと見て、MyDNS.JP のアドレス通知 URL を叩く。アドレスが変っていない場合でも、1時間ごとに MyDNS.JP にアドレスを通知する。このスクリプトを `cron` で毎日 3:55 AM に起動する。

### ipv4 と ipv6

`ping` と `wget` で使用している `-4` および `-6` は、それぞれ `ipv4` または `ipv6` での動作を強制するスイッチである。これらのスイッチを付けずに `wget` で MyDNS.JP のアドレス通知 URL にアクセスした場合、私の環境では ipv6 のアドレスだけが更新された。それでは具合が悪いので、上記のようにしている。

なお、`wget` のスイッチを変更する代りに、MyDNS.JP の URL を次のようにそれぞれ専用のアドレスに変更しても良い。

```
    wget -O - https://mydns******:password@ipv4.mydns.jp/login.html 1>&2
    wget -O - https://mydns******:password@ipv6.mydns.jp/login.html 1>&2
```

## 参考

MyDNS.JP のドキュメントを参考にするのが良い。

- [MyDNS.JP](https://www.mydns.jp/)
  - [HOW TO USE](https://www.mydns.jp/?MENU=030)
  - [LET'S TRY](https://www.mydns.jp/?MENU=040)
【2D OD】YoloV4 : 最高のReal time Object Detection

<h1>YOLOv4: Optimal Speed and Accuracy of Object Detection</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/f7d5a9e1-f6c1-b07e-084f-5dc7ef253f11.png)
Real-time systemでベストパフォーマンスを叩き出したYoloV4。
YoloV4が精度高くて速い理由を大雑把に見ていきたい。

<h1>アルゴリズム</h1>
Backbone: Darknet-53 -> CSPDarknet53
Neck: FPN -> SPP, PAN
Head(Dense Prediction): YoloV3 -> YoloV3

<h2>BackBone</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/e6f39462-76e2-747b-cee6-a104c2913b90.png)
入力画像の解像度が512x512で画像全部をcover出来て、parameter数が多く、スピードが速い物という観点でCSPDarknet53を採用

<h3>Neck</h3>
Receptive Feildを広げる為にSPP採用
GlobalとLocalの両方にアクセスする為にPANet採用

<h3>Head</h3>
Anchor BaseのYoloV3 Headをそのまま採用


<h1>結果</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/d4dd788e-94eb-97f5-44d3-974ffa0c2b39.png)
・YoloV3よりYoloV4はスピードは変えず、精度が上がってる。


<h1>結論</h1>
・この論文の筆者よくこんなに実験したなと関心

<h1>参考文献</h1>
YOLOv4: Optimal Speed and Accuracy of Object Detection
https://arxiv.org/pdf/2004.10934.pdf
Feature Pyramid Networks for Object Detection
https://arxiv.org/pdf/1612.03144.pdf
Spatial Pyramid Pooling in Deep Convolutional
https://arxiv.org/pdf/1406.4729.pdf
Path Aggregation Network for Instance Segmentation
https://arxiv.org/pdf/1803.01534.pdf
Easy-ISLisp GPGPU計画

#復活
ずっとLispから遠ざかっていました。かれこれ2年くらいLispを弄ってませんでした。すっかり書き方も忘れていました。しかし2020年の後半、CUDAのMINTへの再インストールがうまくいかず、Deep-Learningを中断、ISLispとPrologを弄って遊んでいました。やはりこれらの言語は楽しいのでした。2021年の1月、最新のMINTにCUDAをインストールすることができました。ISLisp処理系であるEasy-ISLisp（以下EISLと略)にGPGPU機能を追加、Deep-Learning（以下DLと略）にも対応させたいという気持ちが湧いてきました。プロジェクト名はEaster　復活祭にあやかっています。

#計画
現行バージョンのEISL1.69はCUDA　nvccでコンパイルできるようにしてあります。これに以前、Elixir用に開発したCUDA利用の行列計算、畳み込み演算のライブラリを移植します。

専用の配列データ型を追加します。DLに必要な大量のfloat型の要素を格納するデータ型です。動的にメモリを確保します。#2f((1.0 2.2)(3.1 4.4)) のように表現します。create関数にオプションの引数を設けて通常の配列のほかにDL用の配列を生成できるようにします。

ガベージコレクションにも工夫が必要です。このfloat型の配列はセルはほとんど消費しない仕組みです。しかし、大量の動的メモリを消費しますので、適宜GCを起動しないといけません。現状、EISLはマーク＆スイープまたはコピーイングGCを搭載しています。これに部分的なGCを追加します。float型の配列が消費した動的メモリの総和とそのセルアドレス位置を記憶しておきます。消費メモリの総和が一定数を超えた場合には部分GCを実施します。局所環境から束縛されているかどうかを調べてうえで、不要なfloat配列をfreeしメモリを確保します。DLでの使われ方が局所環境での計算ですので、これでうまく回収できるのではないかと考えています。

元祖AIのLispとPrologに頑張ってほしいと思っています。Prologはこの手の大量計算に向いていませんが、LispはGPGPUにも向いています。Lispの復活を願ってEasterプロジェクトをスタート、2021年中の完成を目指します。
Swagger UIをS3でホスティングする

# 前提
- AWS CLIをインストール済
- AmazonS3FullAccessのポリシーがアタッチされ、クレデンシャル情報をもつユーザーを作成済

# AWS CLI で S3 操作用のプロファイルを追加する
```
$ aws configure --profile {プロファイル名}
AWS Access Key ID [None]: XXXXX
AWS Secret Access Key [None]: YYYYY
Default region name [None]: ap-northeast-1
Default output format [None]: json
```

# AWS_PROFILE 環境変数に名前付きプロファイルを設定する
```
$ export AWS_PROFILE={プロファイル名}
```

# S3にバケットを作成する
```
$ aws s3 mb s3://{バケット名}
```

# パブリックアクセスブロックの設定をする
```
$ aws s3api put-public-access-block --bucket {バケット名} \
--public-access-block-configuration \
"BlockPublicAcls=true,IgnorePublicAcls=true,BlockPublicPolicy=false,RestrictPublicBuckets=false"
```
反映状況の確認

```
$ aws s3api get-public-access-block --bucket {バケット名}
```

# バケットポリシーの作成とアタッチをする
ポリシーの作成

```policy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::{バケット名}/*" 
        } 
    ] 
}
```

ポリシーのアタッチ

```
$ aws s3api put-bucket-policy --bucket {バケット名} --policy file://policy.json
```

# Swagger UIをダウンロードする
```
$ mkdir {ディレクトリ名}
$ cd {ディレクトリ名}
$ git clone https://github.com/swagger-api/swagger-ui.git
```

# ローカルの Swagger ファイルをバケットにコピーする
```
$ aws s3 cp swagger-ui/dist s3://{バケット名}/{パス} --recursive
```

# S3でホスティングする
```
$ aws s3 website s3://{バケット名} --index-document index.html
```

# Swaggerファイルの参照先を指定する
index.htmlにSwaggerファイル(jsonかyaml形式)の参照先を追加する。
SwaggerUIBundleにurlを追加して、値としてSwaggerファイルのパスを設定する。

```index.html
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: 'Swaggerファイルのパス',
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })
      // End Swagger UI call region

      window.ui = ui
    }
  </script>
```
[超初学者向け]デザインの本質をジョブズ、アップルに学ぶ！

#はじめに
デザインとは何かみたいな簡単な導入記事を書いてみました。
webデザインを少しやっていて、デザインセンスがいいなと思っていた弟から勧められて読んだのが、[スティーブジョブス1](https://www.amazon.co.jp/dp/4062171260/ref=cm_sw_em_r_mt_dp_6XMXDDTMZ449RT0AHXND?_encoding=UTF8&psc=1)、[スティーブジョブス2](https://www.amazon.co.jp/%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%83%BB%E3%82%B8%E3%83%A7%E3%83%96%E3%82%BA-II-%E3%82%A6%E3%82%A9%E3%83%AB%E3%82%BF%E3%83%BC%E3%83%BB%E3%82%A2%E3%82%A4%E3%82%B6%E3%83%83%E3%82%AF%E3%82%BD%E3%83%B3/dp/4062171279/ref=pd_lpo_1?pd_rd_i=4062171279&psc=1)その他デザインの本を読んで、役に立った知見を共有したいと思います。

#デザインの本質は、見た目ではなくて、それがどう機能するか

以下ジョブズのデザインに関する発言です

>「多くの人はデザインを製品の見た目のことだと考えていますが、**本当は見た目ではなくて、それがどう機能するか**ということなのです。」

デザインは見た目のカッコよさのことではなく、それがどのように人にとって機能するかなのです。
デザインを学ぶ前はセンスがないとできないと思い込んでいました。

アップルの製品にもこのような、人にとって機能するデザインが多用されています。

#Airpod、付属のイヤホンは、なぜ黒でなく白なのか？
特にairpod、付属品、ケースiphoneなど白の印象が強いです
なんとなく白にしたわけではもちろんなく理由があります。

以下アップルのデザイナーであるアイブの言葉です
>「小さな消費者製品というのは、たいていは、ポイッと捨てても問題ないような雰囲気があります。文化的な重みがないのです。iPodについて私が一番誇らしいと思 う点は、重要性が感じられ、ポイ捨てできる雰囲気ではないところです」
単なる白ではだめ。ピュアホワイトでなければならない。 「機器だけでなく、イヤホーンやそのワイヤ、電源もピュアホワイトでなければ ならないと思いました」
当然ながら、イヤホーンは一般的な黒にすべきだとの意見が強かった。 「でもスティーブはその意味をすぐに理解し、ホワイトを支持してくれました。

つまり、当時（iPodを製作したいた）の捨てても惜しくないような、消費者家電のイメージを一新して、自己所有感を満たしてくれるような**重要感のある雰囲気をを持たせた**ということです。そのためにピュアホワイトを選択したのです、たしかにアップルの製品はどれも手放したくない雰囲気があります。
こういう話を聞くとapple製品により愛着が湧いてきます。

#まとめ

**デザインは人にとってどう機能するかということ。**
manimの作法 その5

#概要

manimの作法、調べてみた。
Clock、使ってみた。

#サンプルコード


```
from manimlib.imports import *

def rev_to_rgba(alpha):
	alpha = (0.5 - alpha) % 1
	hue_list = [0, 0.5 / 6.0, 1 / 6.0, 1.1 / 6.0, 2 / 6.0, 3 / 6.0, 4 / 6.0, 5 / 6.0]
	num_hues = len(hue_list)
	start_index = int(np.floor(num_hues * alpha)) % num_hues
	end_index = (start_index + 1) % num_hues
	beta = (alpha % (1.0 / num_hues)) * num_hues
	start_hue = hue_list[start_index]
	end_hue = hue_list[end_index]
	if end_hue < start_hue:
		end_hue = end_hue + 1
	hue = interpolate(start_hue, end_hue, beta)
	return color_to_rgba(Color(hue = hue, saturation = 1, luminance = 0.5))

def rev_to_color(alpha):
	return rgba_to_color(rev_to_rgba(alpha))

class test(Scene):
	CONFIG = {
		"run_time" : 90,
	}
	def construct(self):
		clock = Clock()
		clock.set_height(FRAME_HEIGHT - 1)
		clock.to_edge(LEFT)
		lines = [clock.hour_hand, clock.minute_hand]
		def update_line(line):
			rev = line.get_angle() / TAU
			line.set_color(rev_to_color(rev))
		for line in lines:
			self.add(Mobject.add_updater(line, update_line))
		run_time = self.run_time
		self.play(ClockPassesTime(clock, run_time = run_time, hours_passed = 0.1 * run_time))




```

#生成した動画

https://www.youtube.com/watch?v=04gvK-94CJ0


#以上。
サクラエディタの便利な使い方

サクラエディタの便利な使い方を紹介します。
複数行を一度に選択し、削除する場合。
選択開始箇所にカーソルを持っていきます。
Windowsの場合はAltキーを押しながら、選択したい幅分だけ横→を押します。
選択したい横幅になったら、次にAltキーを押したまま下↓を押します。
Macパソコンの場合は、Altキーの代わりにoptionキーを使います。
使い方はAltキーと同じです。
すると、下記の様になります。
![スクリーンショット 2021-01-03sakura22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909788/9055ebb6-ce28-f8f3-4d94-837da321bdc4.png)
消したい場合は、上記の状態でデリートを押すと選択した範囲がすべて削除されます。
もし、挿入したい場合は、上記の状態で挿入したい記号や文字列を入力すると、選択した範囲すべてに入力した記号や文字列が挿入されます。

不要な記号や文字列を削除したいとき
![スクリーンショット 2021-01-03sakura55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909788/d6ed3c7e-928f-0c0d-4c80-46e76d137320.png)
メニューバーの検索をクリックし、次に置換をクリックします。
![スクリーンショット 2021-01-03sakura77.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909788/d18d19bd-fdf4-a9a5-73ac-00e7e02e3387.png)
それから、置換前に消したい記号や文字列等を入力し、置換後は空欄ですべて置換をクリックします。すると、すべて削除できます。
![スクリーンショット 2021-01-03sakura99.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909788/ea1c6f12-eadd-ea73-2038-79e7e7f18df6.png)
個人的に気になる最近のサーバーレス事情(2021/01)

# 思い
EC2の管理~~なんて~~したくない。
個人開発の金銭的ハードルが高い。
バーストアクセスでダウン...？まじかよ。。。

**サーバーレス** って素敵なワード... :star2: 

# 気になったお話
それぞれわかりやすそうな記事を貼り付けていますが公式のものは各記事からリンクで飛んでください :pray: 
- [Lambdaの実行時間の課金単位が1ミリ秒に短縮されました](https://dev.classmethod.jp/articles/lambda-billed-duration-1ms/)
- [RDS ProxyがGAされました！！](https://dev.classmethod.jp/articles/rds-proxy-ga/)
- [Lambda 関数が VPC 環境で改善されます](https://aws.amazon.com/jp/blogs/news/announcing-improved-vpc-networking-for-aws-lambda-functions/)
- [Lambdaのメモリ割り当てを自動で最適化！！AWS Lambda Power Tuning](https://dev.classmethod.jp/articles/aws-lambda-power-tuning/)
- [Amazon Aurora Serverless v2(プレビュー)](https://aws.amazon.com/jp/rds/aurora/serverless/)

# Lambdaの実行時間の課金単位が1ミリ秒に短縮されました
https://dev.classmethod.jp/articles/lambda-billed-duration-1ms/
課金単位が短くなったので単純にコストがより最適化されるようになりました
個人開発としては嬉しいですね

# RDS ProxyがGAされました！！
https://dev.classmethod.jp/articles/rds-proxy-ga/
lambdaとRDSの組み合わせは今までタブーでした。
lambdaは実行毎でDBにコネクションを取りに行くのでRDSのmax connectionに引っかかってDBに接続ができなくなります。
従来のアプリケーションではアプリケーションでコネクションを保持して使い回すようにしており、これをコネクションプールといいます。
RDS ProxyはこのコネクションプールをAWSマネージドで行ってくれます。
=> 結果lambdaでもコネクションを食い潰すことがなくなりました。

アプリケーションからAWSマネージドに持っていくことで以下のメリットがあります(特に上はサーバーレス関係なくでかい！)

- アプリケーションを冗長構成にしていく時にmax connectionを気にして冗長上限を気にしなくて良くなる
- 複数の接続先(複数のアプリやBIやローカル...etc)でコネクションを使いまわせる(やった方がいいかはおいておいて)

# Lambda 関数が VPC 環境で改善されます
https://aws.amazon.com/jp/blogs/news/announcing-improved-vpc-networking-for-aws-lambda-functions/

今までは接続毎でENIを作成してVPC内にアタッチしていたことにより「初期起動に時間がかかる」「ENIの上限に引っかかる」という問題があったようです。(その時代に明るくなく...)
それをVPC to VPC Natを用意することによって解消されたようです

# Lambdaのメモリ割り当てを自動で最適化！！AWS Lambda Power Tuning
https://dev.classmethod.jp/articles/aws-lambda-power-tuning/

lambdaではメモリーを自分で指定する必要があります。
これは大概よくわからずちょっと多めに構えて徐々に調整するという感じだったと思います。(私は個人開発だったのでデフォルトで放置してました...)
最近のアップデートで最低なメモリーサイズをAWSの方で提案してくれるようになったようです。

# Amazon Aurora Serverless v2 ~~(プレビュー)~~ => GA
https://aws.amazon.com/jp/rds/aurora/serverless/

~~※ 2021/01段階でプレビューです！~~
追記：こちら2022/04にGAされました :tada: https://aws.amazon.com/jp/about-aws/whats-new/2022/04/amazon-aurora-serverless-v2/

RDSがついにサーバーレスで使いやすくなってきそうですね！
今まではRDSはスケールアップするにしても数秒のダウンタイムが発生したりとなかなか変更が難しいので普段から大きいサイズのインスタンスで構えることが多かったです。(しかしこいつまじで高いんですよね。。。。)
Aurora Serverlessでは自動でスケールアップをしてくれて、アクセスが低い時には自動でスケールダウンしてくれる。
> アプリケーションが消費する容量に対してのみ料金を支払い、ピーク負荷の容量をプロビジョニングするコストと比較して、データベースコストを最大 90% 節約できます。

> ほんの一瞬で数百から数十万のトランザクションに瞬時にスケールします。

夢のような言葉が綴られており見た瞬間お祈りポーズでした :star2: 

v1にはいくつか問題点もあるようで特に一定時間アイドルすると停止されて再開に1分程度かかるという部分はだいぶ致命的かなと思います。
こちらv2でどうなっているのか見れていないので情報あったら教えて欲しいです :pray: 
そのほかv1の問題点まとめられているのでぜひこちらも参考にしていただけるとです。
参考: https://dev.classmethod.jp/articles/lessons-learned-from-up-and-running-aurora-serverless/
eachの入れ子構造

同じ果物でも高級と言われるもの、大きさ、見切り品など金額が変わってきます。
そのような計算をしていきたいと思います。

```ruby
fruits_price = [["りんご", [200, 250, 220]], ["オレンジ", [100, 120, 80]], ["ぶどう", [1200, 1500]]
```

今回は配列のなかに配列が入っており、果物の名前とそれぞれの合計額を出力します。

初めにeach文を使用してそれぞれの果物を一つずつ取り出します。また合計金額を足していくための処理の記述をします。

```ruby
fruits_price = [["りんご", [200, 250, 220]], ["オレンジ", [100, 120, 80]], ["ぶどう", [1200, 1500]]

fruits_price.each do |f|
  sum = 0
end
```

この記述で、

```ruby
["りんご", [200, 250, 220]
["オレンジ", [100, 120, 80]
["ぶどう", [1200, 1500]
```
という形で取り出せるようにします。
次にそれぞれの果物の金額を足していく処理を記述していきます。

```ruby
f[1].each do |p|
  sum += p
end
```

fの1番目の値[200, 250, 220]から値を1つずつ取り出して、自己代入をしながら最後にsumを出力します。

最終的な記述は、

```ruby
fruits_price = [["りんご", [200, 250, 220]], ["オレンジ", [100, 120, 80]], ["ぶどう", [1200, 1500]]

fruits_price.each do |f|
  sum = 0
  f[1].each do |p|
    sum += p
  end
  puts "#{f[0]}の合計金額は#{sum}円です"
end
```

ちなみにf[0]は、[りんご]、[オレンジ]、[ぶどう]、f[1]は、[200, 250, 220]、 [100, 120, 80]、[1200, 1500]が入っていて、りんごの処理が終わったらオレンジ、ぶどうの順番で処理を処理を行っていきます。