OmniAICreator/Qiita-1.07M huggingface dataset:
UiPathで営業日を算出する

※と、タイトルで申していますが、ちょっとエクセルの関数も使ってます。(タイトル詐欺)

#解説に入る前に
UiPathには、営業日を算出してくれるアクティビティは存在しないため、(※当事者調べ)
エクセルのWORKDAY関数を利用するしかありません。

なので、1～2個の日付から営業日を算出する場合、エクセルだけで大丈夫だと私は思っています。

ただ、もし仮に、営業日の算出で使用する元データが「大量・可変・量が決まっていない」等の要素があれば、UiPathを取り込んだ営業日算出が便利だと思います。
![ui2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/75a763a5-ace6-7fbf-45b3-0f0327ff115e.jpeg)

#準備
今回は、下記のシートが用意された前提で解説します。
![ui3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/b0b35a95-f789-af46-45a2-4e0d9964a8de.jpeg)

#営業日を算出
まず、WORKDAY関数を利用して、営業日を算出します。
![ui4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/81b0f7fe-4e78-bd39-4fb8-59a07db24358.jpeg)

そして算出された数値を、日付の形に変更すれば完了です。
![ui5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/de7f1d5f-b8a7-fe07-d3f8-2ad6884c5f0e.jpeg)
バリデーションの実装

#バリデーションとは？
　レコードをテーブルに保存する時には、値が正しいかどうかの検証が必要になります。この検証を簡単にこなすのがRailsに用意されたバリデーション(validatesメソッド)です。

#バリデーションの書き方と具体例
①Railsアプリケーションフォルダのapp/models/___.rbにソースコードを記述

```csharp:book.rb
  validates :title, presence: true
  validates :body, presence: true,length: {maximum: 200 }
```
【意味】バリデーションによって、空白のデータが入力されていなければ、saveメソッドでfalseが返される。

【詳細】
⇒(title)と(body)に「presence: true」を指定することで「空白を禁止(値を必ず入れなければいけない)」という指定を行います。

⇒length: {maximum: 100 }というものを設けて最大値を設定することもできる。反対にminimum:2（最低でも2文字以上入力が必要）で最低数も設定できる。



②コントローラで設定を行う

```csharp:books_controller.rb
  def create
    @book = Book.new(book_params)
    if@book.save
      redirect_to book_path(@book)
    else
      render 'index'
    end
  end
```
【意味】新規投稿などでデータを作成する際にアクションとしてcreateが作動します。その時に入力フォームに不備がある場合の処理方法をコントローラーに記載。

【詳細】

```
    if@book.save
      redirect_to book_path(@book)
```
⇒もし保存することができる場合には、投稿を保存後book_path(@user)へ移動します。今回は投稿した際にbook/1に遷移したいためこのような設定。
※ルートパスは随時確認して設定する必要がある。

```
    else
      render 'index'
```
⇒入力フォームに問題があり保存ができないと判断された場合の処理を書くところ。renderでコントローラーの処理を返さず直接indexの表示画面へ遷移します。その他newなど設定可能。


③viewページへエラー分を表示することを書く
バリデーションの記述が行われても、エラーの内容が表示されません。次が最後エラーの内容が確認できるようする。


```csharp:new.html.erb
    <% if @book.errors.any? %>
      <h3><%= @book.errors.count %>errors prohibited this obj from being saved:</h3>
      <% @book.errors.full_messages.each do |message| %>
      <ul><li>
        <%= message %>
        </li>
        </ul>
      <% end %>
    <% end %>
```
【詳細】
<% if @book.errors.any? %>
⇒errors.any?は、発生したエラーの内容を確認できany?と組み合わせることで、エラーの判定できる。

<%= @book.errors.count %>errors prohibited this obj from being saved:
⇒errors.countでエラーの個数を表示してくれます。%>以降では表示したい文字を記入する。（例）<%= @book.errors.count %>個エラーがあります。

<% @book.errors.full_messages.each do |message| %>
⇒また、full_messageと組み合わせることで、エラーの内容を出力できます。
エラー文は配列で保存されているため、eachを使う。

#最終イメージ図
下記のようにエラーコードを表示することができる。
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/a28f6ecf-58ec-954c-8eca-d26335924484.png)
※文字の色などはCSSやBootstrapで設定する。
clang-cl で C++11 or later で RapidJSON 1.1(2016-8-25) をコンパイルするメモ

clang-cl で C++11 or later で RapidJSON 1.1(2016-8-25) をコンパイルしようとすると, コンパイルエラーがでます.

`rror: calling a private constructor of class 'rapidjson::GenericValue<rapidjson::UTF8<>>'` など.

https://github.com/Tencent/rapidjson/issues/1770

`RAPIDJSON_HAS_CXX11_RVALUE_REFS` の定義がうまくいっていないためです.

とりあえずは `RAPIDJSON_HAS_CXX11_RVALUE_REFS` を明示的に定義してあげればいけます.

CMake ですと以下のようになるでしょうか.

```
if (MSVC AND (CMAKE_CXX_COMPILER_ID STREQUAL "Clang"))
  target_compile_definitions(${TARGET} PUBLIC RAPIDJSON_HAS_CXX11_RVALUE_REFS)
endif ()
```
いつも忘れる Vue.jsクラスバインディングの三項演算子

## 課題
vueのクラスバインディングをいつも忘れてしまうので、コピペできるようにメモ
## これ
### ①データの悟空の状態がスーパーサイヤ人なら `super` クラスを付与、そうでないなら `saiyazin` のクラスを付与

```
:class="goku === 'super' ? 'super-saiyazin' : 'saiyazin'"
```

### ②配列構文で書き換えた短縮バージョン

```
:class="{'super-saiyazin': goku === 'super'}"
```
ページに埋め込んだYoutube動画による遅延を緩和する方法

## はじめに

- 昨今のランディングページは動画を使用しているところが多くて、私自身も制作しているとよく使うのがYoutube動画。Youtubeから簡単に埋め込みコードが発行できてコピペするだけですぐ使えるのが大きなメリットですよね。
- ただその代わりに大きなデメリットがあります。それがページの読み込み速度の低下です。
- その読み込み速度の低下を改善する方法を備忘録として書いておこうかと思います。

## Youtube動画のメリット・デメリット

- 前述したとおり、Youtube動画の埋め込みには簡単というメリットが大きく、Youtubeの共有ボタンから埋め込みコードが発行されるのでコピペするだけです。
- 逆に読み込み速度が低下しやすいのが大きなデメリットで、単純に読み込み容量が大きいことと外部サイトから参照していることが主な原因です。

## コード

### HTML

```html
<div class="play-btn">動画を見る</div>
<div class="movie">
  <div class="movie-close"></div>
  <div class="movie-window"></div>
</div>
```

### CSS(SCSS)

```scss
.play-btn {
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background-color: #4169e1;
  border-radius: 15px;
  cursor: pointer;
}

.movie {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  
  &.inview {
    opacity: 1;
    visibility: visible;
  }
  
  &-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    
    &::before,
    &::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
    }
    
    &::before {
      transform: rotate(20deg);
    }
    &::after {
      transform: rotate(-20deg);
    }
  }
}
```

### Javascript

```javascript
const playBtn = document.querySelector('.play-btn');
const movie = document.querySelector('.movie');
const movieClose = document.querySelector('.movie-close');
const movieWindow = document.querySelector('.movie-window');

playBtn.addEventListener('click', () => {
  movie.classList.add('inview');
});

movieClose.addEventListener('click', () => {
  movie.classList.remove('inview');
});

playBtn.addEventListener('click', () => {
  movieWindow.innerHTML = 'Youtubeで発行した動画の埋め込みコード';
});
```

## 仕様

- 今回はボタンを押すと動画が表示される仕様です。
- HTMLには埋め込みコードを貼り付けていないので、ページの読み込み時には動画が読み込まれずボタンを押して初めて動画が読み込まれる流れになっています。
- ページ表示の際の読み込みに動画の分が含まれないので、結果的に表示速度が上がります。

## 最後に

- [PageSpeedInSights](https://developers.google.com/speed/pagespeed/insights/)みたいなツールでランディングページの読み込み速度を図ったときに点数が低いとへこみますよね…。
- どこが原因か調べて埋め込んだYoutube動画が表示を遅くしているということでしたら、一度この方法を試してみてはいかがでしょうか。（少しでも埋め込みYoutube動画の遅延に苦しむ人が減ればいいな～と祈っております）
AWSサービス一覧(2021年) 気になったやつだけ アプリ関連編

##今回のフォーカス
下記ページのアプリに関わるサービスを簡単にサマリー。できれば1-2行でまとめたい。
【2021年】AWS全サービスまとめ
https://dev.classmethod.jp/articles/aws-summary-2021/#toc-196

##1.開発者用ツール
- CodeStar
    - プロダクトの開発環境テンプレート作成サービス。
    - CodeCommit,CodeBuild,CodeDeployなどをCodePipelineで連携する環境を作成する。
- CodeCommit
    - **`フルマネージドなGitリポジトリホスティングサービス。`**
- CodeBuild
    - フルマネージドなビルドサービス。ソースコードのコンパイルおよびテストを実行。
    - ビルド対象：S3,CodeCommit,Bibucket,GitHub,GitHub Enterprise
- CodeDeploy
    - **`アプリケーションのデプロイ自動化サービス。`**
    - S3,GitHub,Bitbucketに保存されているコンテンツをEC2やオンプレ、Lambda、ECSにデプロイできる。
- CodePipeline
    - **`ビルド、テスト、デプロイ、承認を視覚化および自動化するCICDサービス。`**
- CodeArtifact
    - フルマネージドなアーティファクトリポジトリサービス。
    - **`Mave/Gradle(Java),npm/yarn(Javascript),pip/twine(Python),NuGet(.Net)などのパッケージマネージャおよびビルドツールと連携して動作する。`**
- Cloud9
    - **`クラウドベースのブライザ上で操作できるIDE。`**
    - Lambdaのテストやデバックが可能。ペアプロもできる。

##2.モバイル
- Amplify
    - **`クラウドサービス(Default:AWS)を利用するフロントエンド・モバイル開発向けのJavascript/iOS/Androidライブラリ。`**
    - Amplify ConsoleはWebアプリの継続デプロイ、ホスティングサービスである。
    - Mobile Hubより、Amplifyが新規で作る場合には勧められている
        - モバイルアプリのためのCognito,Lambda,Device Farm,PinpointなどのAWSサービスと連携する統合コンソール。
- AppSync
    - **`フルマネージドなGraphQLを使用したオンライン/オフラインのリアルタイムデータ同期サービス。`**
    - 対応データソース：DynamoDB, Lambda, Elasticsearch Service, Aurora Serverless, HTTP endpoint。
- Location  Service
    - デバイスの位置情報を安全に利用できるサービス。
    - **`地図、POI(Point Of Interest)、ジオコーディング、ルーティング、ジオフェンス、トラッキングといった機能を簡単にアプリケーションに追加できる。`**

##3.ビジネスアプリケーション
- Chime(チャイム)
    - **`ビデオ、音声、チャット、スクリーン共有などの機能を提供するオンラインミーティングサービス。`**
    - Basic,Plus,Proの３種類がある。
- WorkMail
    - **`フルマネージドなWebメールおよびカレンダーサービス。`**
    - SimpleAD,Microsoft AD, ADConnectorといったDirectory Serviceを利用する。
    - モバイルアプリやデスクトップクライアントにも対応。
- Honeycode
    - **`コードを記述することなくモバイルおよびWebアプリを構築できるサービス`**
        - https://aws.amazon.com/jp/blogs/news/introducing-amazon-honeycode-build-web-mobile-apps-without-writing-code/

##4.アプリケーション統合
- Step Functions
    - **`Lambdaを利用したサーバレスワークフローをを作成するサービス。`**
    - ワークフローには、標準とExpressの2タイプがある。
    - JSON,ASL(Amazon States Language)を使用して定義する。
- AppFlow
    - フルマネージドなデータ連携サービス。
    - **`コードの記述なしで、SalesforceなどのSaaS、S3、RedShiftといったAWSサービス間でデータ連携ができる。`**
- EventBridge
    - **`イベント駆動型アーキテクチャを構築できるサーバレスイベントバサービス。`**
    - CloudWatch Eventsベース。CloudWatch Eventsは、将来的にEventBridgeに名前変更予定。
- MQ
    - **`フルマネージドなApache ActiveMQのメッセージブローカーサービス。`**
    - JMSなどのAPIや、AMQPやOpenWireなど多くのプロトコルをサポート。
- Simple Queue Service(SQS)
    - フルマネージドなプル型メッセージキューイングサービス。
    - スタンダードキューとFIFOキューがサポートされている。
- Managed Workflow for Apache Airflow
    - **`フルマネージドなApache Airflowのワークフロー管理サービス。`**
        - **`Airflowとは・・・ワークフローを記述、実行、監視するためツール`**(https://dev.classmethod.jp/articles/what-is-airflow)
    - 有向非巡回グラフ(DAG; Directed Acyclic Graph)でワークフローを表現。
        - 有向非巡回グラフとは、簡単に言えば、フローがループしない、スタートとゴールが異なるフローのこと。(https://mathwords.net/dag)

##感想
Chime/WorkMailなってサービスがあったのか。全然しらなかった。AWSの社員は、これらを使っているのだろうか。
ちょくちょくLambda連携できるサービスが多いのがわかる。やはり、今後はServerlessとなっていくほうこうであるとわかる。
【Nuxt.js】VueファイルのPugテンプレートをHTMLに変換する方法

Nuxt.jsでtemplate部分をpugで記述していたのですがHTMLに書き換えたときのメモです。

# なぜやめるのか？
やめた理由はeslint-plugin-vueが効かないからです。
これにより書き方に統一感がなくエラーも自力で発見しないといけないなどもろもろの問題が見えてきました。

他にもソースのサンプルがだいたいHTMLで書かれている、
pugでできることはだいたいvueでもできるなどから
pugからHTMLにすることにしました。

## どうやって書き換えるのか？

https://www.npmjs.com/package/@plaidev/pug-to-html

こちらのツールを利用しました。
vue-pug-to-htmlというのがもともとあったようなのですが

- Jadeにも対応
- テンプレートエンジンのオプションに doctype を指定する
- タグの属性中の HTML Entities の変換

を拡張してくれています。

## pug-to-htmlをインストール

npm

```
npm i -g @plaidev/pug-to-html
```

yarn

```
yarn global add @plaidev/pug-to-html
```
※どちらもglobalにインストールしてください。
`yarn add @plaidev/pug-to-html`でインストールしたら動かなかったので

## pug-to-htmlを使ってみる
例: Topのindex.vueを変換するとき

```
$ pugToHtml pages/index.vue
```
こちらのcmdを打つと
templateのpugからHTMLに変換してくれます。

# 一括変換したい。
こちらでpagesディレクトリ以下のvueファイルを一括で変換してくれます。

```
$ find ./pages -name "*.vue" | xargs -I {} pugToHtml {}
```

## 変換させたくファイルがある時
pagesディレクトリのtestフォルダ内は変換したいという場合はこんな風にcmsを打ち込みます。

```
$ find ./pages -name "*.vue" -not -path "/pages/test/*" | xargs -I {} pugToHtml {}
```
※こちらはpages配下の分だけなのでcomponents配下の分も必要なら変換しておいてください。

## 変換後の後処理
無事変換ができたら各vueファイルにESLINTが走り赤波のエラーや黄色波のwarnがでてくるので
それぞれを修正していきます。

※VS Codeを使っている場合の話です。

![スクリーンショット 0003-05-18 16.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163786/55fb89d0-d534-6309-9250-80f0248bed49.png)

![スクリーンショット 0003-05-18 16.09.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163786/d4641f62-d393-5a80-aeda-23ba82dda524.png)

黄色波のところにカーソルを合わせれば電球マークが表示するのでそこから
`Fix all auto-fixable problems`を選択すれば一括で自動修正してくれます。

以上でpugからHTMLに変換できました。

参考：

https://tech.plaid.co.jp/pug_to_html/

https://tech.smartcamp.co.jp/entry/enabling-eslint-to-vue-template#Pug-%E3%82%92-HTML-%E3%81%AB%E7%A7%BB%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF
入力フォームを作成する方法


#入力フォームを作成する方法
フォームの作成

```csharp   
<%= form_with model:@book,local:true do |f| %>
　　<h4>Title</h4>
    　　<%= f.text_field :title, class: "form-control" %>
    <h4>Opinion</h4>
        <%= f.text_area :body, class: "form-control"  %>
        <%= f.submit 'Create Book',class: "btn btn-success my-3"%>
<% end %>
```
※上記の内容では、Bootstrap（CSSのデザインテンプレート）を使用

①<%= form_with model:@book,local:true do |f| %>
　⇒@bookに入力フォームの内容を保存することを示している

②<%= f.text_field :title, class: "form-control" %>
　⇒text.fieldとすることで、一行のテキスト投稿フォームができる。
またclass：と設定し入力フォームのデザインを決めている。

③<%= f.text_area :body, class: "form-control"  %>
　⇒text_area とすることで、複数行のテキスト投稿フォームができる。
※areaとfieldの違いに注意

④<%= f.submit 'Create Book',class: "btn btn-success my-3"%>
　⇒submitでは、ボタンを生成する。
※myはBootstrapでのデザイン設定項目
　・m - for classes that set margin
　・y - for classes that set both *-top and *-bottom
　・3 - (by default) for classes that set the margin or padding to spacer

spacer の基準値は1rem=16px。spacers Sassマップ変数にエントリを追加することで, さらにサイズの追加が可能です。

#最終出来上がりイメージ
![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/655cb9c1-c1e4-9284-688b-caddb94a3750.png)


#画像を投稿する際

```
<%= f.label :image 'iamge' %>
<%= f.file_field :image %>
```

#カレンダーを入れたい場合

```
<%= form.date_field :bodyなど　%>
```


bootstrapの記述に関しては、https://getbootstrap.jp/docs/4.5/utilities/spacing/を参考にしました。
BigQuery error: Not found: Dataset xxx was not found in location US

Redashから、BigQueryのデータソースを使おうとする際に出るエラー。
ずっとRegionの問題かと思ってググっていたが、解決方法がわからなかった。

## 解決方法

こちらのブログを読んだところ、どうもLocation関係ないっぽかった。
https://sql.info/d/bigquery-error-not-found-dataset-xyz-was-not-found-in-location-us

ここをSQLのデータと一致させたら治った。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134704/e40aa283-a386-b7ff-fbda-b1ec4a73fbd3.png)
udunbuをmicrosoftアカウントなしでインストールする

windowsでPHP環境を構築しようとしたとき、ubunduをインストールする必要がありました。

ubunduインストールの方法は２つ。

１．isoファイルをダウンロードしてCDに焼きPCにインストールさせる
２．microsoft storeでubunduアプリをインストールする

ドライブ搭載されていない私のＰＣでは１の方法は不採用。よって２を行うことに。

ここで問題発生。アプリをインストールしようとしたら停止していたアカウントに切り替わる。サインアウトしてからインストールしようとしても、アカウントにサインインしてくださいの猛攻撃。

仕方がないので、データをすべてリセットすることに。

手順 ver.Windows10
１．microsoft storeをサインアウトする。（サインインしている場合）
２．ＰＣの設定画面→アプリ→アプリと機能→microsoft storeアプリ（クリック）→詳細オプション→リセット（ページの下にある）でリセット
３．microsoft storeアプリを起動
４．ubunduと検索
５．インストール（「入手」と書かれたボタン）
６．複数のデバイスで使用する→必要ありません（クリック）

完了！

おそらくこれでいけるはずです！お疲れさまでした！
ちなみに、無料のアプリのみアカウントなしでインストールできるようです。
Slimの書き方　メモ

#基本的な書き方

```
/ hello 　　　　　//　コメント
/! hello　　　　　//　ブラウザのhtmlに表示されるコメント
.test　　　　　　//　<div class="text"></div>
#test　　　　　　//　<div id="test"></div>
h3 hello　　　　//　<h3>hello</h3>
-　　　　　　　　//　<% %>　rubyのコードを書くとき
=　　　　　　　　//　<%= %>　変数などrubyの値を出力するとき
```

・クラスやidが複数になるときは、`div.btn.btn-primary.text-danger#test hello`のように繋げて書いていく

・htmlの文字列とコントローラーから持ってきた変数などの連携は、

```slim
p
  | 氏名：#{name}
```

と繋げる。
pタグの時はpタグのすぐ後ろに文字列を書いていくのではなく、段を下に下げて`|`を最初に加えて書いていく。
Railsのモデル命名規則

モデル名で単数形か複数形か迷ってしまったので、学び直しの意味を込める。

#モデルとは
コントローラとデータベースの中継を担う存在。
役割としては、アプリケーション固有のデータや処理を扱う。つまり、データベースへの読み書きを担当する。

アプリケーション固有の処理を「ビジネスロジック」と呼ぶらしい。

#モデルの作成
```ターミナル
rails g model モデル名 [カラム名:型]
```

モデル名は単数形を指定する。
この時に作られるテーブル名はモデル名の複数形になる。


#モデル名の命名規則

- 英大文字から始まる
- 英数字のみ
- 単語の区切りでは、先頭文字を大文字
- 単数形の名詞
- ファイルはapp/modelsディレクトリに格納
- ファイル名は、モデル名の単語区切りを「_」にし、すべて小文字にしたもの

種類	|説明	|例
-|-|-
モデル名	|先頭は大文字で単数形	|User
モデルのファイル名	|先頭は小文字で単数形	|user.rb
テーブル名	|先頭は小文字で複数形	|users
テストスクリプト名	|xxx_test.rb	|user_test.rb



参考もと
[Railsドキュメント](https://railsdoc.com/model)
[現場で使えるRuby on Rails5速習実践ガイド/著者:大場寧子、 松本拓也、 櫻井達生、 小田井優、 大塚隆弘、 依光奏江、 銭神裕宜、 小芝美由紀](https://book.mynavi.jp/ec/products/detail/id=93905)
EC2(aws linux2)上でWebDAVの有効化した時の設定

WebDAVとはHTTPの拡張プロトコルで、httpプロトコルを利用してファイルの共有ができるプロトコルです。
FTP/SFTPは使いたくない、という場合などに利用できます。
有効化に5時間ぐらいハマったので有効化の方法を記載します。
本プロトコルについては、ネット上にさまざまな情報が掲載されていることから、環境によってhttpd.confの設定を変えないと適切に表示されないようです。
本手順はあくまで参考程度にご覧いただければと思います。

# 前提条件
###基本条件
OS
　Amazon Linux release 2 (Karoo)
apache
　Server version: Apache/2.4.46 ()
　Server built:   Aug 24 2020 18:54:20

###その他の条件

* Basic認証で保護する
* 本手順はテスト用サーバーでIPによるアクセス制限を行なったサイトであるため、SSLの設定は実施しない
* SELinuxは無効化されている
* 投稿者はapacheビギナー。WordPressを数回構築したことがあるレベル。

# 公式手順とネット上の情報を元に設定を行う
apacheの公式手順とネット上のサイトの手順を参考にして設定を行うことにしました。

https://httpd.apache.org/docs/2.4/en/mod/mod_dav.html


#####実施した設定の一覧
上記サイトの手順を参考に行なった設定は以下の内容です。

* webdavで公開したいフォルダの作成と権限変更

```terminal
# mkdir /home/webdav
# chown apache /home/webdav
# chgrp apache /home/webdav
# chmod 770 /home/webdav
```

* webdav用lock databaseの作成

```terminal
# mkdir /var/lib/dav/lockdb
# chown apache /var/lib/dav/lockdb
# sudo chgrp apache /var/lib/dav/lockdb
```

* httpd.confの書き換え

```/etc/httpd/conf/.httpd.conf
DAVLockDB /var/lib/dav/lockdb
Alias /webdav /home/webdav
<Location /webdav>
    DAV On
    
    Options All
    AuthType Basic
    AuthName WebDAV
    AuthUserFile /etc/httpd/conf/.htpasswd
    <RequireAny> 
        Require method GET POST OPTIONS
        Require valid-user 
    </RequireAny>
</Location>
```

* Basic認証の設定

```terminal
# htpasswd -c /etc/httpd/conf/.htpasswd WebDAV
New password: 
Re-type new password: 
Adding password for user WebDAV
```

* サーバーリスタート

```terminal
# systemctl restart httpd
```

簡単ですね！
参考にしたサイトがOptions Noneにしていたため、403エラーから脱することができず5〜6時間悩みましたが、ちゃんとサイト上のコードは何が書いてある確認しなかった自分が悪いので今後の糧にします・・・。

これでブラウザからhttp://hogehoge/webdavにアクセスすると、ファイル一覧が閲覧できます。

しかし、有効になりましたが！**ブラウザで確認するとBasic認証なしで閲覧できてしまいます。**
＊参考のために/home/webdavフォルダに複数のファイルを置いてみました。
![スクリーンショット 2021-05-18 14.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239929/4f3393fd-457f-3f2c-374b-48b3c617aadf.png)

念の為CyberDuckから確認すると、こちらは認証情報を聞かれるので問題なさそうです。

少し調べてみたのですが、ブラウザからファイルが閲覧できる理由がわからず。
本番ではロードバランサの設定に、Cyberduckからのアクセスのみ許可するようにしました。

# 終わりに
今回WebDAVというプロトコルを初めて知り、ネットで調べてみると公式の手順以外にも様々な手順が掲載されていました。
そもそも公式手順を参考にしても動かなかったり(私の読解力のせい？)他のサイトには一つとして同じ設定を行なっているところはなく・・・。
記載されているhttpd.confの設定値を一つ一つ内容を確認しながら必要な設定を行なっていきました。

今回の設定でapacheへの理解を深めることができていい勉強になりました。
WindowsにAngularをインストールする方法

まずはNodeサイトにいって、Nodejsをダウンロードしインストールします。

https://nodejs.org/ja/download/

そしてWindowsからコマンドを開き、下記の命令でAngularをインストールします。

npm install -g @angular/cli 

これでngコマンドが使えるようになります。

Materialデザインを追加する場合、プロジェクトフォルダに入り、

ng add @angular/material

を実施すればOK
TidalCyclesのインストール Windows10 + VSCode

ライブコーディングによる音楽演奏をするためTidalCyclesと関連アプリをWindows10にインストールし、VSCodeでのコーディング環境を構築した。

つまづいたポイント2つと音を出すまでの流れを記す。

## インストール方法

[Qiita: TidalCyclesのインストール2018年版](https://qiita.com/yoppa/items/fe21d7136f8f3aafd55c)
[Qiita: TidalCyclesによるオーディオプログラミング例](https://qiita.com/aike@github/items/f75a54dd2ec65e458852)
[TidalCycles入門 (2): VS Code 上での実行環境](https://daw-jones.hatenablog.com/entry/2019/10/22/224347)

上の3記事を読んでいただければ事足りるので詳しくは割愛する。3つの手順にまとめると

1. Windows用のパッケージング管理ツールchocolateyをインストールする。
2. chocolateyでTidalCycles本体と関連アプリを一括インストールする。
3. VSCodeの拡張機能TidalCycles for VSCodeをインストールする。

## つまづきポイント1

2で一括インストールするとき、不要なアプリのインストールはスキップできる。エディタはVSCodeを使用するのでAtomエディタのインストールをスキップした。

するとTidalCycles本体のインストールに失敗してしまった。

エラーメッセージを読むと、Atomエディタ用のTidalCycles拡張機能のインストールに失敗したというようなことが書いてあったので、Atomエディタをインストールしたうえで再度TidalCycles本体をインストールしてみると上手くいった。

## 音を出してみる

3まで終えて必要なもののインストールは完了した。さっそく音を出してみる。

#### SuperColliderを起動する
![supercollider.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596144/1d49bf58-2044-6e53-7f88-e5fd40c16254.jpeg)

#### SuperCollider上でSuperDirtを起動する
`SuperDirt.Start`と書き、その行にカーソルを合わせて`Ctrl + Enter`で起動する
![supercollider2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596144/10670f98-32c2-3fe2-91f9-71d25f8c9755.jpeg)
右下のウインドウ`Post window`に`SuperDirt: listening to Tidal on port 57120`と表示されれば起動に成功している。

#### VSCodeでTidalCyclesのコードを書く
拡張子`.tidal`のファイルを作成し、キックドラムを演奏するコードを書く。

```tidal:test.tidal
d1 $ sound "bd"
```

この行にカーソルを合わせて`Ctrl + Enter`で音が鳴るはずであった。が、しかし・・・

## つまづきポイント2

VSCodeのコンソールにて下のエラーメッセージが出て音は出なかった。

```
Error: EntryNotFound (FileSystemError): GHCI path could not be found. Attempted paths: ghci, ghci, /usr/local/bin/ghci, C:\Users\PC_User/.ghcup/bin/ghci
```

どうやら`gchi`へのパスが見つからないらしい。

`ghci`について調べてみると
 
 - ghciはHaskell言語のインタープリタ
 - TydalCyclesはHaskellのライブラリ

らしい。兎にも角にもghciのパスを通す必要がある。方法は簡単。

#### VSCode拡張機能`TidalCycles for VSCode`の設定にてパスを設定する

設定(歯車マーク) > 検索バーにTidalCyclesと入力> `Tidalcycles: Ghci Path`の欄にghciのパスを記入する

![ghcipath.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596144/d1173686-a685-ce70-0985-e52964172ebb.jpeg)

私の環境ではパスは`C:\tools\ghc-9.0.1\bin\ghci.exe`であった。

念の為VSCodeを再起動後、`test.tidal`にて`ctrl + Enter`を押すと音が出た。

## おまけ: サウンドブラウザー

TidalCycleはSuperCollider上で起動したSuperDirtの音源を再生している。VSCodeで音源の一覧表示と視聴ができるようにすると便利。

方法は[TidalCycles入門 (2): VS Code 上での実行環境](https://daw-jones.hatenablog.com/entry/2019/10/22/224347)の`おまけの設定: サウンド・ブラウザー`の項の通りに設定すれば良い。

音源格納フォルダーは`C:\Users\(ユーザー名)\AppData\Local\SuperCollider\downloaded-quarks\Dirt-Samples`だった。
【Flutter】Melosの簡単な紹介メモ

# 前置き
Melosという便利なツールがあるみたいなので、紹介程度の軽いメモです。詳しい使い方などは参考に貼った公式ドキュメントを見てみてください。結構わかりやすくまとまっています。

# メモ
FlutterでNew Projectすると、rootに1つの `pubspec.yaml`と`lib`パッケージが作られて`lib`の中をいじって開発を進めていくと思いますが、普通に開発する`app`という実際のアプリが含まれたパッケージと`ui_catalog`のようなアプリが含まれたパッケージを1つのプロジェクトで管理したい場合、それぞれのパッケージに移動して `pubspec.yaml`の依存を取りに行く `flutter pub get`を実行する必要があったりと色々と管理が面倒です。

そこでMelosが複数パッケージが存在するDartプロジェクトを管理するCLIツールとして機能してくれます。

Melosではrootに`packages`というパッケージを作ってその直下に`app`や`ui_catalog`などのNew Projectしたときにできる`lib`パッケージレベルのものを複数置いて管理します。

以下の機能があるようです。

- Automatic versioning & changelog generation.
- Automated publishing of packages to pub.dev.
- Local package linking and installation.
- Executing simultaneous commands across packages.
- Listing of local packages & their dependencies.

Melosは有名なところでいうと、 [flutterfire](https://github.com/FirebaseExtended/flutterfire)で導入されているみたいです。

Melosを使えば例えば、1つのプロジェクトで複数のパッケージを管理したい場合に、例えばanalyzeをかけたいとき、`app`と`ui_catalog`それぞれのパッケージに移動して`dart analze`をかけないといけませんが、`melos.yaml`にscriptを設定することで自動で全パッケージに対して実行してくれるようになります。
他にも、 `pub run build_runner build`のようなコマンドも同様に動いてくれます。

コマンドラインで動かしたときもビジュアル的に使い心地が良いので使ってみてください。

# 参考
- https://docs.page/invertase/melos
- https://github.com/invertase/melos
AWS Lambdaの中からPythonでAWSアカウントIDを取得


Pythonで書かれたAWS Lambdaの中からAWSのアカウントIDを取得するには、

```python
account_id = boto3.client("sts").get_caller_identity()["Account"]
```

これで12桁の文字列を取得できす。

なお、リージョンやLambdaの名前などは環境変数から取得できます。

[AWS Lambda 環境変数の使用 - AWS Lambda](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-envvars.html)

例: `os.environ["AWS_REGION"]`

# 試したサンプルコード

ここではServerless Frameworkを使っています。

Serverless Frameworkのプロジェクト作成

```console
$ serverless create --template aws-python3
```

`serverless.yml` 作成

```yaml
 service: sample01
 frameworkVersion: '2'
 
 provider:
   name: aws
   runtime: python3.8
   lambdaHashingVersion: 20201221
 
   stage: dev
   region: ap-northeast-1
 
 functions:
   hello:
     handler: handler.hello
     events:
       - httpApi:
           path: /
           method: get
```

`handler.py` 作成

```python
 import json
 import boto3
 
 def hello(event, context):
     sts_client = boto3.client("sts")
     account_id = sts_client.get_caller_identity()["Account"]
 
     body = {
         "account_id": account_id
     }
 
     response = {
         "statusCode": 200,
         "body": json.dumps(body)
     }
 
     return response
```

デプロイ

```console
$ serverless deploy -v
```

デプロイするとURLが表示されますので、アクセスしてみます。

```console
$ curl 'https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/'
```

`{"account_id": "123456789012"}` というようなJSONが表示されます。

削除

```console
$ serverless remove
```
プロセスとは

コマンドが実行される流れから説明します。
Linuxカーネルがディスクから実行ファイルを読み出し
メモリに格納し
その内容にしたがってCPUがプログラムを実行しています。

メモリ上で実行状態にあるプログラムのことをプロセスと呼びます。

# 前提
ざっくりと雰囲気を掴むためにMacOS上のターミナルでの例を取り上げています。
MacOSもベースはLinuxですがUbuntuなどのLinuxディストリビューションとは
挙動が違う場合もありますのでご注意ください。

# psコマンド｜プロセスの表示
なにはともあれ見てみましょう。
ターミナルを立ち上げて以下のコマンドを入力してreturnキーを押してみましょう。

```sh

$ps
  PID TTY           TIME CMD
15834 ttys000    0:00.00 /bin/bash

```

これは現在のターミナルで実行されているプロセスだけを表示しています。
シェルのbashが動いていますよという意味です。
それぞれ項目を見ていきますと
PIDはプロセスID
TTYはターミナルのタブ（1プロセスの画面）とイメージするのが個人的にはわかりやすいと思っています。
ちなみにTTYのところが？となっているものはデーモンプロセスです。
TIMEはプロセスがCPUを動かしていた時間
CMDはコマンドの略で/bin/bashはbashというシェルスクリプトが動きましたよという意味。

# プロセスがどんな動きをするのかハンズオン
以下の操作をしてみてください。

アプリケーション→ユーティリティからターミナルを開きます。

```ps.sh

$ps
  PID TTY           TIME CMD
 1676 ttys000    0:00.06 /bin/bash -l
10593 ttys001    0:00.05 -bash

```

表示されるものはそれぞれ違いますが色々出てくるともいます。
ここで表示される１行がプロセスです。

command+Tで新しいタブを開き以下のコマンドを打ってみましょう。

```touch.sh

$echo test0214 > test0214.txt
$more test0214.txt

```

そしてcommand+Tで新しい３つめのタブを開き以下のコマンドを打ってみましょう。

```ps.sh

$ps
  PID TTY           TIME CMD
 1676 ttys000    0:00.06 /bin/bash -l
10593 ttys001    0:00.05 -bash
12082 ttys008    0:00.00 more test0214.txt

```

２つ目のタブで実行しているmoreコマンドが表示されました。

同じ形でcommand+Tで新しい４つめのタブを開き以下のコマンドを打ってみましょう。

```more.sh

$more test0214.txt

```

そしてcommand+Tで新しい５つめのタブを開き以下のコマンドで確認してみます。

```ps.sh

$ps
  PID TTY           TIME CMD
 1676 ttys000    0:00.06 /bin/bash -l
10593 ttys001    0:00.05 -bash
12082 ttys008    0:00.00 more test0214.txt
12573 ttys010    0:00.00 more test0214.txt

```

タブ２で実行中のmoreコマンドのプロセスと
タブ４で実行中のmoreコマンドのプロセスが
違うタブ（TTY)、別々のプロセス（PID）で走っているのが確認できると思います。
（test0214.txtを表示するという同じ動作をしていますが別々のプロセスとして実行されています）

今回はMacOSでの例でしたが、Linuxディストリビューションによっては動きが少し変わることもあるようです。
※@angel_p_57さんご指摘ありがとうございました。


# プロセスが実行される流れ
コマンドを実行するとLinuxカーネルがディスクから実行ファイルを読み出してメモリに格納します。その内容に従ってCPUがプログラムを実行します。

# プロセスは個別のメモリ領域を確保する
例えば同じmoreコマンドが３つ同時に実行されても
それぞれ別のプロセスとしてメモリ領域も違う形で実行されるため
処理が混じり合うことがありません。
またプロセスには実効ユーザーが設定されていて他のユーザープロセスは勝手に操作することが出来ないようになっています。
１つ１つのプロセスはプロセスID(psコマンドを打った結果のPIDという項目)という一意の番号をもっていて
Linuxカーネルが管理してくれています。
Linuxでプロセスが新しく作られる時は既に存在しているプロセスを元に作成されます。作成するプロセスを親プロセス、作成されるプロセスを子プロセスと呼びます。シェルからmoreコマンドを実行した際にはシェルが親プロセスとなり、moreが子プロセスとなります。


# 参考文献
この記事は以下の情報を参考にさせていただきました。
 -[新しいLinuxの教科書](﻿http://isbn.sbcr.jp/80941)
CookieとSessionについて説明できるようになる

#はじめに
新規登録やログイン認証に必要なCookieとSessionについて、ぼんやりした知識のままになっていたので、理解を深めるためにも書いていきたいと思います。
この記事を読むことで他者にも説明できるようになると思います。
間違いがありましたら、ご指摘お願い致します。
#そもそもCookieとSessionへの理解はなぜ必要なのか？
まずは、なぜcookieとsessionを理解する必要があるかについて触れていきます。  
**[事前知識]**
・webブラウザとwebサーバーが通信するための主な手段はHTTP通信となり、HTTPは**ステートレス(状態を保持しない)**なプロトコルであるということ。  
**[要因]**
・ログインなどのその時の状態に応じた表示の切り替えは通常の**HTTP通信では再現することができない**  
**[解決策]**
・CookieとSessionを用いて**ステートフル(状況に応じて切り替え)な状態な実現**すること    
まとめると、通常のHTTP通信ではログインなどのその状況に応じた処理の切り替えができないので、CookieをSessionを用いてその状況に応じた処理の切り替えを実装する必要があるということになります。
#Cookieとは
簡単に言うと、**状態を保存する場所であり、データそのもの**のことになります。  
Cookieのポイントは以下の通りです。  
・ユーザーの**webブラウザ上が保存領域**となる
・webブラウザからwebサーバーにリクエストが送信されると自動で**webサーバー上でユーザーに関する情報が記録されているCokkieが発行**される
・発行されたCookieの情報がユーザーのwebブラウザに一定期間保存される

**[余談]Cookieの由来について**
個人的にクッキーという名前のため、意味を想像しづらいかなと思ったので、由来について少し調べてみました。
・同じ意味を持つ「マジッククッキー」と言うIT用語の省略系
・フォーチュンクッキーのようにクッキーの中に大事なメッセージが入っていることから
諸説あるようですが、共通して言えることは、大事な情報だからクッキーと呼ぶみたいです。

#Sessionとは
簡単に言うと、**ステートフルな通信を実現するための仕組み**のことになります。  
Sessionのポイントは以下の通りです。
・通信の**開始(ユーザーがサーバーにアクセス)**から**終了(サーバーを切断)**までの流れのこと
・ユーザの識別は**SessionID**で行っている
・SessionIDはCookieに保存される

#処理の流れについて
CookieとSessionについては、なんとなく理解はできてきたと思うので、実際の処理の流れについて触れつつ、もう少し理解を深めていきたいと思います。

処理の流れは以下の通り
①webブラウザからHTTPリクエストをwebサーバーに送信
②webサーバー上でリクエストの情報をもとに、Cookieを生成
③webブラウザのCookieに情報を保存
ここまでの流れでwebブラウザ上にcookieの情報が保存される
④再度そのwebサーバーに接続した時に、webブラウザに保存しているCookieの情報を元にユーザーの状態を認識
⑤ユーザーに適した状態をwebサーバーが提供
上記で説明した内容を図にまとめてみました。
![スクリーンショット 2021-05-18 14.31.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613784/6c17c7a0-f82c-e3ee-7755-49026da7b51f.png)

この一連の処理の始まりから終わり(サーバー切断)までがSessionであり、その方法をSession管理という。
 

##cookieとsessionって何？と聞かれたら
いろいろCookieとSessionについて解説していきましたが、本記事のゴールとしては説明できるようになることなので、自分だったらこう説明するという例文を残して今回の記事を終えようと思います。
・ステートフルな状態を実現するための方法や手段のこと。Cookieはwebブラウザ上にユーザーの状態を保存できる領域、そのもののデータであり、SessionはCookieなどを用いたステートフルな処理の開始から終了までの一連の流れのことである。

#参考資料
[Cookieとセッションをちゃんと理解する](https://qiita.com/hththt/items/07136ad74127999df271)
[CookieとSessionの違いを説明できますか？](https://note.com/jurit/n/n025acb634da7)
[セッションとは](https://www.ntt.com/bizon/glossary/j-s/session.html)
[Railsガイド](https://railsguides.jp/security.html#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3)
[(山浦清透さん)Cookieとセッションってなに？ゼロからわかりやすく解説](https://www.youtube.com/watch?v=t8Xxp_dk214)
LogstashからのJDBC接続でPostgreSQLのstatement_timeoutを設定する

# LogstashからのJDBC接続でPostgreSQLのstatement_timeoutを設定したい

例えば
statement_timeout=0
を指定するには
例）
<pre>   jdbc_connection_string => "jdbc:postgresql://localhost:5432/hoge?options=-c%20statement_timeout%3D0"
</pre>
と書くことで実現できる

参考
https://github.com/jeremyevans/sequel/blob/master/doc/opening_databases.rdoc
https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING
LambdaからEC2に対してAWS Run Command を実行する手順


## 参考
[How to execute command remotely on EC2 via Lambda function using SSM](https://www.youtube.com/watch?v=l2NeAs2gNOo)
[コマンドのステータスについて](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/monitor-commands.html)

## 次の順番で進める
- ec2のためのiam roleを作成
- 既存のEC2にロールを割り当てる
- コンソールで`ssm sendCommand`できるか試してみる
- lambdaのためのiam roleを作成
- 既存のlambda functionにロールをわりあてる
- テストする


## ec2のためのiam roleを作成
1. awsマネジメントコンソールでIAMへ進む
2. ナビゲーションでロールへ進む
3. ロールの作成へ進む
4. 一般的なユースケースでEC2を選択
5. EC2がフォーカスされた状態で`次のステップ：アクセス`権限へ進む
6. `AmazonSSMManagedInstanceCore`のチェックボックスを選択
7. `次のステップ：タグ`へ
8. タグは必要に応じて
9. `次のステップ：確認`に進む
10. ロール名：`ec2_command_lambda_ssm`

## 既存のEC2にロールを割り当てる
1. サービスでec２を選択
2. インスタンス一覧を表示
3. 対象のインスタンスのチェックボックスを選択
4. アクション->セキュリティ->IAMロールを変更

## コンソールで`ssm sendCommand`できるか試してみる
下記で試す
[AWS CLI を使って AWS Systems Manager Run Command を実行する](https://qiita.com/kooohei/items/326f23989f4e4bb69547)

## lambdaのためのiam roleを作成
1. awsマネジメントコンソールでIAMへ進む
2. ナビゲーションでロールへ進む
3. ロールの作成へ進む
4. 一般的なユースケースでlambdaを選択
5. lambdaがフォーカスされた状態で`次のステップ：アクセス`権限へ進む
6. `AmazonEC2ReadOnlyAccess`と`AmazonSSMFullAccess`をアタッチする

## 既存のlambda functionにロールをわりあてる
1. 設定->実行ロールを確認
2. 対象のロールを割り当てる

## テストする
次のサンプルコード をlambdaで実行
サンプルコードは`serverless framework`を使う

```
'use strict';

const AWS = require('aws-sdk')
const ssm = new (require('aws-sdk/clients/ssm'))();
const REMOTE_WORKING_DIR = '/home/ec2-user'


module.exports.company_save = async event => {

  try {
    // 実行したいコマンド
    let command = 'sh test.sh'
    let params = {
      DocumentName: 'AWS-RunShellScript',
      InstanceIds: ['i-*************'],
      Parameters: {
        commands: [command, "echo hoge > /home/ec2-user/sample.txt"], // 配列で指定するので複数実行も出来る
        workingDirectory: [REMOTE_WORKING_DIR] // どの階層で実行するかを指定
      },
      // SSMの実行結果をCloudWatchにロギング
      CloudWatchOutputConfig: {
        CloudWatchLogGroupName: 'SSMLogs',
        CloudWatchOutputEnabled: true
      },
      // タイムアウト設定
      TimeoutSeconds: 3600 // 1 hour
    }
    
    const debug = (key, object) => { console.log(`DEBUG: ${key}\n`, JSON.stringify(object)); }
    const sendCommandResult = await ssm.sendCommand(params).promise();
    debug("sendCommandResult", sendCommandResult);    
  
  } catch(e){
    console.log("-----error");
  }

};
```
Bulma.cssでBrightcoveの動画をレスポンシブで埋め込む

# デモ

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="qwe001" data-slug-hash="RwpGQoz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwpGQoz">
  <span>See the Pen <a href="https://codepen.io/qwe001/pen/RwpGQoz">
  RwpGQoz</a> by qwe001 (<a href="https://codepen.io/qwe001">@qwe001</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# やり方

レスポンシブ対応したい動画要素に「has-ratio」クラスを追加して、 `figure.image.is-16by9` クラスで囲めばOKです。

Iframeの場合

```html
<figure class="image is-16by9">
  <iframe src="https://www.youtube.com/embed/YE7VzlLtp-4"
    class="has-ratio"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen></iframe>
</figure>
```

Brightcove(video-js)の場合

```html
<figure class="image is-16by9">
  <video-js id="myPlayerID"
    data-video-id="5165694790001"
    data-account="1752604059001"
    data-player="HJSEihoR"
    data-embed="default"
    data-application-id
    class="video-js has-ratio"
    controls></video-js>
  <script src="https://players.brightcove.net/1752604059001/HJSEihoR_default/index.min.js"></script>
</figure>
```


動画の画面サイズが16:9でなく、4:3なら `figure.image.is-4by3` クラスで囲みます

```html
<figure class="image is-4by3">
  <iframe class="has-ratio" width="640" height="480" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</figure>
```

# 参考サイト

https://bulma.io/documentation/elements/image/#arbitrary-ratios-with-any-element
https://bulmatemplates.github.io/bulma-templates/templates/modal-cards.html
https://player.support.brightcove.com/code-samples/brightcove-player-sample-display-related-link.html
1800 NY Carpet

Contact
Addrees:
185 W Broadway 
New York, NY 10013
Phone:
212-308-8878
Website:
http://www.1800nycarpet.com/
About US:
Welcome To 1800 NY Carpet. We understand that every successful business is built on happy customers. Our approach is dependable and dedicated. Let us bring your carpet back to life, with our thorough, professional cleaning services...
At 1800 NY Carpet we specialize in professional carpet cleaning service in throughout New York and NYC. We deliver a high quality clean that gives you long-lasting professional results you’ll love.
During our carpet cleaning service, our technicians use the best available cleaning machines. Our machines reach deep into the carpet fibers, down to the padding, and extract both fresh and step-in stains, top soil and embedded dirt, allergens and germs.
Our professional carpet cleaning process starts with a pre-conditioning treatment, followed by hot water extraction which removes the dirt, stains and messes, then a finishing treatment that covers your fibers with a clean, protective layer.
Trust 1800 NY Carpet to give you the best available carpet cleaning service for your home or office carpeting in New York. We leave you with a soft and comfortable feel, fresh and renewed smell, and a deep and professional clean that lasts.
Related searches:
Rug cleaning near me, carpet cleaning near me, best rug cleaner, best carpet cleaner, house carpet cleaning, house rug cleaning, oriental rug cleaning, wool rug cleaning, antique rug cleaning, silk rug cleaning, persian rug cleaning, area rug cleaning, rug cleaning, rug dry cleaning, commercial carpet cleaner, commercial rug cleaner, office carpet cleaning, office rug cleaning, shag rug cleaning, deep carpet cleaning, spotless carpet cleaning, upholstery service, Manhattan, NYC, New York, NY.
24 hours
Cash, cc
https://g.page/1800-ny-carpet-NYC?share
oh-my-zshを始めたら、brew ,ls コマンドが使えなくなった


前提
Homebrewがインストールされている。
zshがデフォルトのシェル

oh-my-zshをインストールし、テーマ、Flutter SDKのPAT を通した

以下、ターミナルから

[oh-my-zsh] Insecure completion-dependent directories detected:
drwxrwxr-x  3 takabatakesotaro  admin   96 Feb 28 16:22 /usr/local/share/zsh
drwxrwxr-x  6 takabatakesotaro  admin  192 May 10 05:06 /usr/local/share/zsh/site-functions

[oh-my-zsh] For safety, we will not load completions from these directories until
[oh-my-zsh] you fix their permissions and ownership and restart zsh.
[oh-my-zsh] See the above list for directories with group or other writability.

[oh-my-zsh] To fix your permissions you can do so by disabling
[oh-my-zsh] the write permission of "group" and "others" and making sure that the
[oh-my-zsh] owner of these directories is either root or your current user.
[oh-my-zsh] The following command may help:
[oh-my-zsh]     compaudit | xargs chmod g-w,o-w

[oh-my-zsh] If the above didn't help or you want to skip the verification of
[oh-my-zsh] insecure directories you can set the variable ZSH_DISABLE_COMPFIX to
[oh-my-zsh] "true" before oh-my-zsh is sourced in your zshrc file.

それをdeepl翻訳　
[oh-my-zsh] 安全でない補完依存のディレクトリが検出されました。
drwxrwxr-x 3 takabatakesotaro admin 96 Feb 28 16:22 /usr/local/share/zsh
drwxrwxr-x 6 takabatakesotaro admin 192 May 10 05:06 /usr/local/share/zsh/site-functions

[oh-my-zsh] 安全のため、これらのディレクトリからの補完は、次のようになるまで読み込みません。
[oh-my-zsh] パーミッションとオーナーシップを修正して zsh を再起動するまで、これらのディレクトリから補完をロードしません。
[oh-my-zsh] グループまたはその他の書き込みが可能なディレクトリについては、上記のリストを参照してください。

[oh-my-zsh] パーミッションを修正するには、以下を無効にします。
[oh-my-zsh] "group "および "others "の書き込み権限を無効にして
[oh-my-zsh] これらのディレクトリの所有者が、root または現在のユーザであることを確認します。
[oh-my-zsh] 以下のコマンドが役に立つかもしれません。
[oh-my-zsh] compaudit | xargs chmod g-w,o-w

[oh-my-zsh] 上記が役に立たない場合や、以下の検証をスキップしたい場合は、以下のコマンドを実行してください。
[oh-my-zsh] 安全でないディレクトリの検証をスキップしたい場合は、変数 ZSH_DISABLE_COMPFIX を次のように設定できます。
[oh-my-zsh] "true" に設定してから、zshrc ファイルで oh-my-zsh がソースされます。
//////////////////////////////////////////

試したこと。
ターミナルで
compaudit | xargs chmod g-w,o-w
を実行しましたが、xargs コマンドが通りません。

次に試したこと。
.zshrcファイルの、source $ZSH/oh-my-zsh.shの前に ZSH_DISABLE_COMPFIX=true を追記しました。

openが使えないので、Finderのhomeで
command　＋　shift + . 
で隠しファイルを表示し、
source $ZSH/oh-my-zsh.shの前に ZSH_DISABLE_COMPFIX=true を追記しました。

すると、brew、ls、flutter doctor が使えるようになりました。

ほっ。
Active Storageを用いて画像をアップロードする方法

### 画像加工ツールを導入します。
---
画像加工のために必要なImage Magickという画像変換ツールと、それをRailsから使うためのGemをインストールします。

```
% brew install imagemagick 　#Image MagickはGemではなくソフトウェアです。
```

GemではないImage MagickをRubyやRailsで扱うにはMiniMagickというGemが必要です。またImageProcessingというGemも必要です。こちらはMiniMagickでは提供できない、画像サイズを調整する機能を提供するGemです。以下のようにGemfileに追加します。

```
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
```
ターミナルでbundle install

```
% bundle install
```

ローカルサーバーを再起動してください。
以上で、Active Storageを使用するために必要なツールのインストールができました。

### Active Storageをインストールします。
---
下記を実行すると、Active Storageに関連したマイグレーションファイルが作成されます。

```
% rails active_storage:install
```
続けてマイグレート。

```
% rails db:migrate
```

### Active Storageのテーブルに画像を保存するための記述をします。
---

- Active Storageのテーブルとmessagesテーブルのアソシエーションを定義（このとき、messagesテーブルにカラムを追加する必要はありません。）

```
class Message < ApplicationRecord

  has_one_attached :image 

  validates :content, presence: true
end
```
- messages_controller.rbにて、imageカラムの保存を許可

```
# 中略

  private

  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end
```

### 画像を表示できるようにビューを編集します。
---

- image_tagメソッドを記述して、画像を表示させます。
- if message.image.attached?と記述することで画像が存在する場合のみimage_tagが読み込まれるようにします。
- 画像の横幅と高さを指定します。variantメソッドを使用することでファイルの表示サイズを指定できます。注：幅x高さのxは半角英数のx（エックス）を使用します。

```
<%= image_tag message.image.variant(resize: '450x450'), if message.image.attached? %>
```

上記の記述でアップロードされた画像を指定した大きさで表示させることができました。
【tmux】.tmux.conf

# 概要
.tmux.confの覚書

# 実物
```bash:ネタ
cozftro@Zumi-MacBookAir ~ % cat .tmux.conf 
set -s escape-time 0
set-option -g default-shell /bin/zsh
set-option -g default-terminal screen-256color
set -g terminal-overrides 'xterm:colors=256'
set-option -g status-position top
set-option -g status-interval 1
set-option -g status-bg "colour238"
set-option -g status-fg "colour255"
setw -g mode-keys vi
set -g window-style 'bg=colour239'
set -g window-active-style 'bg=colour234'
cozftro@Zumi-MacBookAir ~ % 
```
【Python】jepg形式の画像ファイルをppm形式へ変換する

# 経緯
業務にて、PPM形式の画像ファイルを要求されることがあった。
PPMに変換してくれるWebサービスの一つに[Convertio](https://convertio.co/ja/jpg-ppm/)といったサービスが存在するが、今回は大量にPPM形式の画像ファイルが必要であったため、自身で簡単なプログラムを作ることにした。

# 必要な環境
- python3.x
- opencv-python (上記pythonと互換性のあるバージョン)

# ppm形式とは
**PNM(Portable Any Map)**形式の画像フォーマットの一つであり、PPMはカラー画像を示す。JPEGやPNGは、画像を圧縮したフォーマットであるため、ファイルサイズが小さいが、PNMは圧縮されていないため、ファイルサイズは大きくなる。その代わりに圧縮されていないバイナリデータがそのまま記述されているため、**データの読み書きがしやすい**というメリットを持つ。

詳しくは[こちら](https://daeudaeu.com/pnm/#PNM)が参考になった。


# ソースコード
```python
# 必要なライブラリのインポート
import os
import sys
import glob
import shutil

import cv2

# 引数指定された変換対象のディレクトリの中身を全てリストで取得する
db_path = glob.glob(os.path.join(sys.argv[1] + "/*"))
# 変換対象一覧を表示
print("変換対象:{}".format([os.path.basename(name) for name in db_path]))

# 変換結果の格納先ディレクトリを作成
result_path = "./result/"
if(os.path.isdir(result_path) == True):
    shutil.rmtree(result_path)  # ./result/ が既に存在する場合は削除
os.makedirs(result_path, exist_ok=True)

cnt = 1
# 変換対象を1枚ずつ変換していく
for filename in db_path:
    # 画像を読み込み
    img = cv2.imread(filename)

    # ファイル名(拡張子無し)を抽出
    name = os.path.splitext(os.path.basename(filename))[0]
    # 出力名を作成
    resultname = result_path + name + ".ppm"

    # 画像を書き出し
    cv2.imwrite('{}'.format(resultname), img)
    print("変換結果({}件目):{}".format(cnt,resultname))
    cnt += 1
print("変換完了")
```
`※出力名を作成の部分の拡張子を変更してあげれば、ある程度どんな拡張子でも変換出来るかと思います。`

## 実行方法
```bash
$ python3 img2ppm.py <変換対象ディレクトリ>
変換対象:['00000.jpeg', '00001.jpeg', '00002.jpeg']
変換結果(1件目):./result/00000.ppm
変換結果(2件目):./result/00001.ppm
変換結果(3件目):./result/00002.ppm
変換完了
```

## ソースコード公開先
後程リンク貼ります。




以上!
Gitのリモートリポジトリとして個人用アクセストークンが必要なリモートリポジトリを複数設定する方法

# 概要

Gitのリモートリポジトリとして個人用アクセストークンが必要なリモートリポジトリを複数設定する方法について説明します。
例えば1つがAzure DevOps Services、もう1つがAzure DevOps Serverという場合に必要な手順となります。

# 手順

1. リモートリポジトリを追加します
    
    ```bash
    git remote add origin <RepoURL1>
    git remote add foo <RepoURL2>
    ```

1. gitリポジトリに接続先のURLを含めた`http.extraHeader`を指定します
    
    ```bash
    git config http.<RepoURL1>.extraheader "Authorization: Basic ${Your_B64_PAT_On_RepoURL1}"
    git config http.<RepoURL2>.extraheader "Authorization: Basic ${Your_B64_PAT_On_RepoURL2}"
    ```

|||
|--|--|
|Your_B64_PAT_On_RepoURL1|`<RepoURL1>`に接続するためのBase64にデコードしたパーソナルアクセストークン。後述の手順で生成する|
|Your_B64_PAT_On_RepoURL2|`<RepoURL2>`に接続するためのBase64にデコードしたパーソナルアクセストークン。後述の手順で生成する|


# 説明

Azure DevOps Services、Azure DevOps Server で個人用アクセストークン（PAT）を利用してクローンする方法として、PATからBase64にデコードしたトークンを生成し`http.extraHeader`を指定する方法が[公式ドキュメント](https://docs.microsoft.com/ja-jp/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=preview-page)に示されています。

```bash
MY_PAT=yourPAT      # replace "yourPAT" with your actual PAT
B64_PAT=$(printf "%s"":$MY_PAT" | base64)
git -c http.extraHeader="Authorization: Basic ${B64_PAT}" clone https://dev.azure.com/yourOrgName/yourProjectName/_git/yourRepoName
```

認証情報としてリポジトリに`http.extraHeader`を設定することで、push,fetch時にも認証することができます。

```bash
git config http.extraHeader "Authorization: Basic ${B64_PAT}"
```

しかし上記の方法では複数リモートリポジトリがある場合に対応できないため、URLごとの`http.extraHeader`を設定する必要があります。

# 参考

https://qiita.com/k-o-u/items/80b31679c41a6e65376e

https://docs.microsoft.com/ja-jp/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=preview-page
Link to 画像にリンクをつける方法

#リンクを作成する
サイトを作成する際に別記事やサイトへ移動する方法を記録します。

下記２つの方法を使用してリンクを作成します。
①HTMLのaを使用する場合
②link_toを使用する場合

#具体例
①HTMLのaを使用する場合

（１）文字列にリンクを行う場合

```csharp
<a href="URL">文字列</a>
```

（２）画像にリンクを付ける場合

```csharp
<a href="URL"><img src="assets/画像ファイル名"></a>
```

②link_toを使用する場合
（１）文字列にリンクを行う場合
 ⇒表示したい文字を一緒に作ることができ、移動先も設定する

```csharp
<%= link_to "表示したい文字列", root_path名 %>
<%= link_to("表示したい文字列", "URL") %>
```

（２）画像にリンクを付ける場合
⇒画像を押したときにリンク先に行く場合は以下のように、do＿endの中に画像データを指定する。

```csharp
<%= link_to [root_path名] do %> <%= image_tag '画像ファイル名' %> <% end %>
```

※<% end %>を忘れやすいので注意


#実際の使用例　紹介

下記は配列を用い、テーブルとして表記した場合の実際例です。
テーブルで一覧を表記している時に項目ごとにリンクを付ける方法です。
引数等は参考程度にご覧ください。

```csharp
              </thead>
                    <% @books.each do |book| %>
                  <tbody>
                    <td><%= link_to user_path(book.user.id) do %>
                    <%= attachment_image_tag book.user, :profile_image, :fill, 100, 100, format: 'jpeg', fallback: "no_image.jpg", size:'100x100'  %>
                    <% end %> </td>
                    <td><%= link_to book.title,book_path(book)%></td>
                    <td><%= book.body %></td>
                    <% end %>
                 </tbody>
            </table>
```

この中で特に難しかった点（下記）を解説します。
実際にbook.userの方の１つずつのimageを算出する。その際に表示画像の大きさを指定しています。またfallbackというもので画像がない場合にはno_image.jpgを表示するように記載しています。

![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/9ed9d571-2bf5-1580-a9a9-e8815a34379c.png)
※上記の記載名はサンプルです。また画像もリンクになっており、画像・文字がリンクになっている。またリンク先も指定することができる。

【リンクの設定した画像のサイズ感を設定する方法】

```
<%= attachment_image_tag book.user, :profile_image, :fill, 100, 100, format: 'jpeg', fallback: "no_image.jpg", size:'100x100'  %>
```
・size: "横幅数値x高さ数値"
・no_image.jpg:これはアプリケーションに直接入れ込んで実装
 (app/assets/imagesの中に入れました）

#リンクにボタンを実装する場合　実例（Bootstrap導入時に実装可能）
リンクボタンを作成しそこにリンクを張り付ける場合の実例を記載しています。

以下の内容で注目すべき点は、class:という記載からになります。
class:と記載することでbtnというボタンを実装できます。また今回はアイコンも使用しているためこのような仕様になっています。

```csharp
<%= link_to edit_user_path(current_user) ,class: "btn btn-outline-secondary btn-block fas fa-user-cog" do %>
<% end %>
```
※<% end %>を忘れやすいので注意


以下の赤枠の内容を表示しています。

![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/2d14fe0e-f9f3-bc8c-b463-895e477b5705.png)
【Access】コンボボックスの選択されている値を取得【VBA】

##はじめに
VBAでコンボボックスの値を取得する方法です。
コンボボックスに値を設定してから行ってください。

##取得方法
####コンボボックス
* 「テーブル／クエリ」の場合の以下の通りに行ってください。
* 「値リスト」の場合は__2.値を取得__はできないので飛ばしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482293/7303daea-de6b-10dc-aa96-b4934580632c.png)

1.キーを取得
`”コンボボックス名”.Value`
2.値を取得
`”コンボボックス名.”Text`

##コードサンプル

```
Private Sub コンボ1_AfterUpdate()    
    '変数宣言
    Dim cmbValue As Variant
    Dim cmbText As Variant
    
　　'値を取得
    cmbValue = コンボ1.Value
    cmbText = コンボ1.Text
    
    'イミディエイトに出力
    Debug.Print "Valueは" & cmbValue
    Debug.Print "Textは" & cmbText
End Sub
```
1.選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482293/4f6fe993-b1af-1424-a82b-f1c17252fec5.png)
2.値が出力される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482293/4cc7b022-fd44-8bb0-c703-bee66197cfa5.png)
Laravel セットアップ（覚え書き）

注）
自分用の覚え書きなので分かりづらいと思います。


セットアップ

https://getcomposer.org/download/

↑こちらのリンクへ飛び、下部のManual Downloadの下にあるバージョンを選択。

composerがダウンロードされたらコマンドを入力
　　　　↓
cd Downloads
sudo mv composer.phar /usr/local/bin/composer
chmod a+x /usr/local/bin/composer

↓ バージョン確認
composer -V


ここからLaravelでの開発に移る。

・プロジェクト作成
　　　　　　　　　　　　　　
composer create-project laravel/laravel ここにプロジェクト名 --prefer-dist

・ローカルサーバーを立てる

cd プロジェクト名
php artisan serve

・サーバー停止

control+C

・コントローラー作成
php　artisan make:contoroller HelloContoroller

※Helloの部分がコントローラ名
 コントローラー名の最初の文字は大文字で
 場所はHttpディレクトリ内のControllerディレクトリ内に作成される


※ルーティング、Blade等は別の記事を作成する。
vue 子から親 子コンポーネントから親コンポーネントのmethodを呼ぶ データ受け渡し

# 1）子コンポーネント内に、親に向けて呼びかける処理を書く

子コンポーネント `child.vue` 内に
`親に書かれた処理を実行` buttonがあるとする。

このボタンは、
押したら、子コンポーネント内の methods: の中に書いてる `hogehoge` メソッドを呼び出す。

```vuejs
<button @click="hogehoge">親に書かれた処理を実行</button>
```

呼び出した `hogehoge` メソッドの中に、
親に向けて「処理を実行して！」と呼びかけるために
`$emit`を使ってまずは「呼びかけ」る処理を書く。（イメージ）

親コンポーネント内に配置した、自分（child.vue）が
「 `〇〇` と呼ばれたら、親コンポーネント内でメソッドを呼び出す」という取り決めをする。
`$emit`を使って`〇〇` にあたる部分を決める。

以下は `child.vue` 内のソースコード。

```vue
<template>
  <button @click="hogehoge">親に書かれた処理を実行</button>
</template>

<script>
methods:{
  hogehoge: function(){
    this.$emit('fugafuga');
    /* 
     親コンポーネント内に配置した子コンポーネント（child.vue）に
     「@fugafuga」という形で「呼ばれたことを感知する窓口的なもの」をつけることで、
     ここからの呼び出しを感知することができるようになる。
    */
  }
}
</script>
```

## 今回の記事で一番言いたいこと

今回は「ボタンを押したら」というケースで書いてますが
<b>大事なのは `hogehoge` メソッドの中に書いてある `this.$emit('fugafuga');` の部分。</b>
クリックしたら、という起点じゃなくても構いません。
<b>何かしらのメソッドの中に`emit`が書いてあればそれが親コンポーネントに向かって呼びかけます。</b>

# 2）親コンポーネントで呼び出しを感知する→行いたい処理を実行する

今度は親コンポーネント内で
「あ、俺今呼ばれたな〜。はいはい、実行しますよ。」
となる部分を書いていく。

```vue
<template>
  <!-- 子コンポーネントを配置してるソースに対して
  先ほど決めた名前「@fugafuga」を書き、呼ばれたことを感知できるようにする。
   「@fugafuga」が、子コンポーネント内の$emitから呼ばれたことを感知したら、
   「honya」メソッドを実行する。 -->
  <ChildComponent @fugafuga="honya" />
</template>

<script>
  import ChildComponent from '~/components/child.vue'

  methods:{
    honya: function(){
      console.log('子コンポーネントから親コンポーネント内のメソッドを実行できたよ');
    }
  }
</script>
```

これでできるはず。
自分の中のイメージで書いちゃってるので、もし違ったらすみません。
正確なイメージについて教えていただけたら嬉しいです。m(_ _)m

追記：
コメントいただきました🙏ありがとうございます。
そちらについてもあわせて読んでいただけたら理解が深まると思います。
SinatraやRailsでRubyのベンチマークを取る

見出しはGitHubのリポジトリ名。 `bundle install` 以降の手順のみ紹介。

# benchmark-driver/sinatra

```bash
WARMUP=10000 REQUESTS=20000 ruby bench.rb
```

# k0kubun/railsbench

```bash 
bundle exec rake db:create db:migrate db:seed RAILS_ENV=production
bundle exec rake assets:precompile RAILS_ENV=production
WARMUP=10000 BENCHMARK=10000 ruby bin/bench
```

# k0kubun/rsb
noahgibbs/rsb の fork

```bash
cd rails_test_app
WARMUP=10000 BENCHMARK=10000 ruby bin/bench
```

# k0kubun/discourse
discourse/discourse v2.6.7 の fork

```bash
docker-compose up # leave it, and go to another window

bundle exec rake db:create db:migrate RAILS_ENV=profile
sudo apt install brotli # used by assets:precompile
ruby script/bench.rb # prepare seeds and precompile assets. this takes waaaaay long time. Be prepared.
WARMUP=1000 BENCHMARK=1000 ruby bin/bench
```

Content-Security-Policy ヘッダが壊れているので、ブラウザで動作確認する場合は `config.middleware.swap ActionDispatch::ContentSecurityPolicy::Middleware, ContentSecurityPolicy::Middleware` をコメントアウトする。