OmniAICreator/Qiita-1.07M huggingface dataset:
Gatsby.js向けに書いた記事をQiita向けに変換したい

# やりたいこと

- `Gatsbyjs`向けに書いた記事を
- Qiita 向けの記事の書き方にしたい

## ちょっとよくわからないので噛み砕いて

- `Gatsbyjs`向けに書いた記事をコピーし
- 正規表現で Qiita 向けの記述になるように変形し
- なんでもいいのでテキストとしてすぐ扱えるようにする

じゃあやってみましょう。

以前、`A to Bな変換系WebアプリをFlaskで作ろう！`という記事を書きましたが、  
こんな変換のためにいちいち Web アプリをローンチするのもかったるすぎるので  
PC 上で完結できるようにしましょう。

### そもそも〜向けの記事って何？

**コードブロックの書き方がちょっと違います。**  
そのせいで片方向けの記事を書いてもう片方で公開したいとなるとちょっとめんどくさいです。

Gatsby 向けの記事だと`python:title=hoge`。
Qiita 向けの記事だと`python :hoge`みたいな感じ。

これをごちゃごちゃにするとこうなります。

```python:title=script.py

```

これではちょっと嫌ですね。
それでは、やっていきます。

## 材料

- ShellScript もとい bash

以上。

## 早速組み立てていく

できたものがこちらになります。

```sh:script.sh
# クリップボードから文字列を変数に代入する
copied=`pbpaste | nkf -w`

# Qiita <- Gatsby
pat_1_before='(`{3,4})(.+):title=(.+)'
pat_1_after=':'
strings=`echo "$copied" | sed -E "s/$pat_1_before/$pat_1_after/g"`
echo "$strings" | open -f
```

- 変数`copied`を作る。
- `copied`に`pbpaste | nkf -w`で、  
  クリップボードの中身をエンコードしたのちぶち込む。
- 正規表現のパターンを用意する。
- 変換する
- `open -f`でテキストエディタ上に開く。

これで、

- Gatsby 向けに書いた記事をコピーする
- スクリプトを実行する
- 変換されて、テキストとしてアウトプットされる

といった感じで使えるようになりました、やったね。

…

**まあ、ShellScript 初見で挑んで**  
**こんな簡単に終わったわけがないんですけど**

## 詰まったところ

Q. `pbpaste`使うなら相方の`pbcopy`でコピーすればスマートじゃね？  
A. **何故か知らないんですけどそれができなかったのです。**  
できなかったので、妥協案として「テキストエディタ上に開く」という動作にしました。  
これはこれでファイルが生成されないのでスマートです。

以上です。
`pbcopy`使えないじゃん！って気づくのに 1 時間位かかりました。

### 参考

[sed を使って": 1 not defined in the RE"などと出たらキャプチャの構文が間違っている  Bye Bye Moore](https://shuzo-kino.hateblo.jp/entry/2017/06/21/235134)

[文字コードと改行コード  UNIX & Linux コマンド・シェルスクリプト リファレンス](https://shellscript.sunone.me/character_code.html)

[［clip / pbcopy・pbpaste］クリップボードにコピー \| 日経クロステック（xTECH）](https://xtech.nikkei.com/it/atcl/column/15/042000103/080400036/)
【Rails】画像プレビュー機能実装【初心者向け】

#目標
下記デモのような、画像プレビュー機能を実装する
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771476/3e37317c-8d84-1c22-cd1b-051be9825c19.gif)

#前提
* 既に画像を表示、登録できる状態であること<br>
私は、`gemのrefile`を使用して実装しています。

#実装
ソースコードは下記の通りです。
解説は、丁寧にやっていきます！

```ruby:new.html.erb
.....

<div class="form-group row">
  <div class="col-lg-6">
    <%= f.label :"スタジオ写真" %>
    <%= f.attachment_field :studio_image, id: "image" %>
  </div>
  <div class="item-image col-lg-6">
    <%= attachment_image_tag @studio, :studio_image, class: "card img-square", fallback: "no_img.png", size: "300x200" %>
  </div>
</div>


<script>
$(function() {
    $('#image').on('change', function() {
        var selectedFile = this.files[0];
        var fileReader = new FileReader();

        fileReader.onload = function(event) {
            var loadedImageUri = event.target.result;
             $('.img-square').attr('src', loadedImageUri);
        };

        fileReader.readAsDataURL(selectedFile);
    });
});
</script>
```
では、解説をします。<br>

```
$('#image').on('change', function() {
```
まずここでは、`id = "image"`の部分に変化があった場合、発火します。
`<%= f.attachment_field :studio_image, id: "image" %>`
ここですね。つまり、画像が選択された時に発火します。

```
var selectedFile = this.files[0];
```
`this.files[0]`は、選択された画像のことです。
ここでは、`selectedFile`に、選択された画像を格納しますよと宣言しています。

```
var fileReader = new FileReader();
```
ここで、FileReaderを起動してます。

```
fileReader.readAsDataURL(selectedFile);
```
ちょっと飛びますが、ここでは`selectedFile`(選択された画像)を base64 文字列に変換します。
HTML上で画像を表示するには画像を文字列に変換する必要があるためこの処理をします。

```
fileReader.onload = function(event) {
```
`.onload`は、処理が成功したら次に行きますよっていうこと。
ここでは、画像ファイルが文字列に変換成功したらイベントが発火しますよっていうことです。

```
var loadedImageUri = event.target.result;
```
ここでは、`loadedImageUri`に、文字列化した画像ファイルを格納します。

```
$('.img-square').attr('src', loadedImageUri);
```
`img-square`っていうクラスがあるところの`src`を`loadedImageUri`（文字列化した画像）に置き換えてます。
`<%= attachment_image_tag @studio, :studio_image, class: "card img-square", fallback: "no_img.png", size: "300x200" %>`
この部分ですね。
はて、`src`なんてどこにあるのかというところですが、これがHTML上で表示されると<br>

```
<img class="attachment studio studio_image card img-square fallback" src="/assets/no_img-83551f2520af3f77b3cdac4e4405d3b6a66b8e2308418fb0e0793c084b8bb009.png" width="300" height="200">
```
このように表示されます。
今は、no_imageの画像が表示されてますが、これを選択した画像に非同期で切り替えようというのがプレビュー機能の中身なわけです。<br>
ちなみに、`.attr()`メソッドは、`.attr( 属性, （変更する値） )`のように引数へ任意の属性を指定します。
また、属性を変更する場合のみ第2引数へ変更したい値を指定します。<br>
つまり、今回でいうと`src`の中身を`loadedImageUri`に置き換えますよという処理をしているわけです。

以上で、プレビュー機能の完成です。
javascript初見の人はなんのこっちゃだと思いますが、少しずつ勉強すればわかるとおもいますので、頑張ってください！
作成例


'Property Get
'プロパティの値を取得するプロシージャ
'取得とは、クラスを使う側（オブジェクトを使う標準モジュールのプロシージャ）から見て取得ということ
'変数 = Range("A1").Value
'このValueプロパティがGet
'
'Property Let
'プロパティの値を設定するプロシージャ
'設定とは、クラスを使う側（オブジェクトを使う標準モジュールのプロシージャ）から見て設定ということ
'Range("A1").Value = 100
'このValueプロパティがLet
'
'Property Set
'プロパティのオブジェクトを設定するプロシージャ
'オブジェクトの場合は､Letではなく､Set





```
Option Explicit




```
携帯のバッテリー残量風デザインをCSSで再現

# どうも7noteです。身の回りのものをCSSで再現するシリーズのバッテリーマーク版です。

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7bee4c4d-fea9-fbc2-7864-e9a477f019a1.png)
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/71aee877-067f-34e6-5197-baa77623af0f.png)

ゲームやらLINEやらネットサーフィンをしていたら、警告してくるバッテリー表示。
赤色になった時は死ぬわけでもないのになんだかソワソワするような焦りがでますね。

いつでもそんな気持ちになれるようCSSで作ってみました。

## 作り方

```index.html
<div class="battery"></div>
```

```style.css
.battery {
  width: 100px;               /* 電池の横幅 */
  height: 40px;               /* 電池の高さ */
  background: #000;           /* 真っ黒 = 充電100% */
  border: 2px solid #FFF;     /* 白い線を引く */
  box-shadow: 0 0 0 2px #000; /* 白い線の外側の黒い線を引く */
  border-radius: 3px;         /* 軽く丸くする */
  position: relative;         /* 基準位置とする */
}
.battery::after {
  content: ""; /* 疑似要素に必須 */
  width: 5px;  /* +極のちょぼの幅 */
  height: 8px; /* +極のちょぼの高さ */
  border-radius: 0 2px 2px 0; /* ちょっとだけ丸くさせる（右上、右下） */
  background: #000;           /* 背景色を黒に指定 */
  position: absolute;         /*　相対位置に指定　*/
  top: 50%;                   /* 上から50%の位置に指定 */
  right: -8px;                /* 右に8pxはみ出させる */
  transform: translateY(-50%);/* 上下中央にするため */
}
```

これは100%の時。
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/6dcf5e93-c03d-2dfa-fc26-0f5b3a0a2fa8.png)

20%以下にするなら、背景の指定をグラデーションにして、このように変更

```style.css
/* 電池がやばい時 */
.battery {
  background: linear-gradient(to right , #f00 , #f00 20%, transparent 21%);
}
```
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/23b9fca6-b018-f92b-3c9f-7dde71191035.png)


## まとめ

js等も組み合わせれば、スライダーなどの動きに合わせてバッテリー残量を変更するなんて遊び方もできます。
誰かのお役に立てればと。

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

## はじめに

サーバサイドの開発歴は1年程度で、最近初めて業務でフロントエンド開発を担うようになりました。
フロントエンド開発めちゃくちゃ楽しいです。

## 記事の目的

さて、JS のライブラリとして Vue.js を使っているのですが、 Vue-infinite-loading という無限スクロールを簡単にに実現できるライブラリがあります。

この無限スクロール機能では API を叩いて データを取得する処理が必要となります。これらの処理を状態管理のライブラリである Vuex で扱いたい、というのが本記事のモチベーションです。

ググってみたのですが、ドキュメントには記載がなく、 Issue にコードの一部が載っている程度でした。私はフロントエンド歴が浅いためか、 Issue だけではすぐに理解が出来ず、試行錯誤の末にやっとできましたので、コードの全体像を載せてみようと思います。

## 参考

[Guide | Vue-infinite-loading](https://peachscript.github.io/vue-infinite-loading/guide/)

https://github.com/PeachScript/vue-infinite-loading/issues/276

## 実装例

ドキュメント例と同様に Hacker News の API を利用してニュース記事を取得する想定です。
実際に動かしたわけではないので、あくまでもイメージです。

ポイントは `NOTE:` としてコメントで記載しております。


```store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

const store = new Vuex.Store({
  state: {
    page: 1,
    hits: []
  }

  mutations: {
    incrementPage(state) {
      state.page++
    },
    addHits(state, hits) {
      state.hits.push(...hits)
    }
  }

  actions: {
    async fetchHits({commit, state}, loadState) {
      const { data } = await axios.get(api, {
        params: {
          page: state.page
        }
      })

      if (data.hits.length) {
        commit('incrementPage')
        commit('addHits', data.hits)

        // NOTE: loadStateには $state が入っているので、loadState をレシーバとして、 loaded や complete を 呼び出すことで、読み込み状態の制御をできる
        loadState.loadState.loaded()
      } else {
        loadState.loadState.complete()
      }
    }
  }
})

export default store

```

```application.vue

<template>
  <div v-for="(hit, $index) in hits" :key="$index">
    <!-- Hacker News item loop -->
  </div>

  <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['hits'])
  },
  methods: {
    ...mapActions(['fetchHits']),
    // NOTE: $state を受け取るメソッドを定義し、ディスパッチ時にに引数として $state を渡す
    infiniteHandler($state) {
      this.fetchHits($state)
    }
  }
}
</script>
```

## 最後に

よりよい実装方法などありましたら、教えていただけると幸いです🙏
記事が参考になりましたら、「LGTM」お願いします🙏
RxSwiftのreturnがVoidの時subscribeには何が流れてくる？

Voidを使用してるので当然だが、RxSwiftでreturn<Void>を使用した場合subscribeしても何も流れてこない。

```
example().subscribe(
        onSuccess: { result in
            // 実行されない
        }, onError: { error in
            // 実行されない
        })
        .dispose()
```
Gatsbyでシンタックスハイライトをキメるまでの手順

# Gatsby 上でシンタックスハイライトをきかせる

`gatsby-starter-blog`を使用している場合、
余計な設定は不要で使用可能。
`4.`,`5.` だけ読んどいたほうがいいかも。

### 1. 以下のモジュールをインストールする

- `prismjs`
- `gatsby-remark-prismjs`
- `gatsby-remark-prismjs-title`

```sh:terminal
npm install -S prismjs gatsby-remark-prismjs gatsby-remark-prismjs-title
```

### 2. `gatsby-config.js`の書き換え

※ `gatsby-starter-blog`を使用しているのでこの手順はスキップ可能。

```js:gatsby-config.js
resolve: `gatsby-transformer-remark`,
options: {
  plugins: [
    `gatsby-remark-prismjs-title`,
    `gatsby-remark-prismjs`,
  ]
},
```

### 3. `gatsby-browser.js`の書き換え

[Prism](https://prismjs.com/) を参考に好きなテーマで設定します。

例えばデフォルトなら、

```js:gatsby-browser.js
// Highlighting for code blocks
import "prismjs/themes/prism.css"
```

例えば`Tomorrownight`を適用させたいなら、

```js:gatsby-browser.js
// Highlighting for code blocks
import "prismjs/themes/prism-tomorrow.css"
```

みたいな感じです。

### 4. ハイライトにタイトルをつける

ここまで正常に設定できていると、

これが

````markdown
python:title=aiueo
````

`gatsby develop` するとこうなります。

```html
<div class="gatsby-code-title">
  <span>aiueo</span>
</div>
```

これに対してスタイルシートを設定していきます。
なんでもいいので`import`している CSS を書き換えます。
今回は、`style.css`に全部ぶち込んでいるのでここに書きます。

ここはテーマに合わせて好きなように書き換えましょう。

```css:style.css
.gatsby-code-title {
  background: #F5F2F0;
  color: #000;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  margin: 20px 0px -24px;
  padding: 8px 1rem 20px;
  font: size 1em;
  line-height: 1;
  display: table;
}

```

### 5. 記事がハイライトされ…ないときの Tips

Q. ここまでちゃんと設定したはずなのにシンタックスハイライトが効きません…

A. Markdown の書き方がおかしい可能性があります。

例えば、

```markdown:index.md
python :aiueo
```

ではタイトルもつかないしシンタックスハイライトもつかないので

```markdown:index.md
python:title=aiueo
```

とする。  
**ハイライトしたい言語のあとにスペースを挿入しない**のがコツ。

### できあがり

![スクリーンショット 2021-02-09 16.10.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207577/4f92fcb4-8d62-5154-d1bc-532118a06919.png)


参考

> [GatsbyJS で作っているブログでシンタックスハイライトが適用されるようにした  キクナントカドットコム](https://kikunantoka.com/2019/12/03--install-syntax-highlight/)  
> [GatsbyJS ブログのコードブロックにタイトルと指定行のハイライトを追加した  のふのふろぐ](https://rpf-noblog.com/2020-05-02/gatsby-code-title-highlight/)
vs2010でmfc

#概要

vs2010でmfcやってみた。

#手順

- mfcアプリケーション、ダイアログベースでプロジェクト名は、mfc0で作る。
- IDD_MFC0_DIALOGを開く
- OKボタンをクリック。
- コードを書く。
- 実行。

#サンプルコード

```

void Cmfc0Dlg::OnBnClickedOk()
{
	// TODO: ここにコントロール通知ハンドラー コードを追加します。
	//CDialogEx::OnOK();
	AfxMessageBox(_T("hello world!")); 
}
```

以上。
macのローカルから秘密鍵を仮想マシンへ送りたい

macから対象のサーバに鍵を送りたいのに送れなくて詰まったので、
備忘録として以下に記します。

##前提
OS:mac 11.2
送りたいサーバ：RHEL7
送りたいサーバへログインする時の秘密鍵：login-key.pem
送りたい秘密鍵名：test-key.pem

##手順
①対象仮想マシンへSSH接続できるようにする
　AWSに仮想マシンを作っている場合は、セキュリティグループの設定をいじってください。

②送りたい鍵をローカルのホームディレクトリに持ってくる

③macのターミナルを開いて以下コマンドを実行

```
# scp -i /Users/test/login-key.pem test-key.pem ec2-user@192.168.X.X:/home/ec2-user/
```

一応意味を説明すると、
scp -i [接続したいサーバのログイン鍵] [送りたい鍵] ec2-user@送りたいサーバのIPアドレス:送りたいサーバのディレクトリ

です。

同じようにはまってしまった人の助けになれば幸いですー
Pardot Lightning アプリケーションを使用した対ビジネスマーケティングの自動化 ⇒ Einstein の基本 (Pardot Lightning アプリケーション) ⇒ Einstein の使用開始 (Pardot Lightning アプリケーション)

１．Pardot Einstein を有効化する前に必要なのは次のどれですか?
２．Einstein 行動スコアは、どの条件が満たされると最もよく機能しますか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/f287ab12-1304-58ed-fe85-1508a7c00979.png)
Gatsby + material-ui：GraphQLを触る


## やること
- GraphQL Interface を触ってみる
- page query / non-page query で情報を取り出す


## サイト情報を登録

前準備として、サイトのタイトルや著者名を登録します：

```js:gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "Ataru Kodaka Site",
    author: "Ataru KODAKA",
    description: ''
  }
}  
```

この情報をプログラムからどうやって取り出すのかを見ていきます。

## GraphQLを使ってみる
これちょうだい、ってツリー構造でお願いすると、同じツリーの形で返ってきてくれます。RESTだと１リクエストで１データしか取れませんでしたが、GraphQLだといろいろ一度に取れます。実際触ったほうが早いです。

<a href="http://localhost:8000/___graphql">http://localhost:8000/___graphql</a> にアクセスすると、なにやらツリーやら表示されてる複数ペインが出てきます。試しにexplorer からsite - siteMetadata - title,authorと順にチェックすると、真ん中のペインに

```graphql:graphql-query
query MyQuery {
  site {
    siteMetadata {
      title
      author
    }
  }
}
```
と表示されます。再生ボタン(？)を押すと、右のペインに

```graphql:graphql-query
{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "Ataru Kodaka Site",
        "author": "Ataru KODAKA"
      }
    }
  },
  "extensions": {}
}
```
と返ってきます。これをプログラム中で取得できれば data.site.siteMetadata.title として参照できるわけです。

## クエリー処理
そのやり方として、大きくわけてPage Query と Non-Page Query の２つがあります。

### Page Query
ページを処理するときに（だけ）使えます。コンポーネント内ではダメです。

```js:src/pages/about.js
import React from "react"
 import { graphql } from 'gatsby'

// page query を投げる
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        author
      }
    }
  }
`
const AboutPage = ({ data }) => {  // data に返ってくる
    return (<ul>
        <li key="title">{data.site.siteMetadata.title}</li>
        <li key="author">{data.site.siteMetadata.author}</li>
    </ul>)
}
export default AboutPage
```

graphql() 関数を使うので "gatsby" からimport します。
それを使って当該クエリを投げて、返ってきたのをconst値に入れてexportしておくと、
別に作った関数で結果が引数dataとして受け取れます。よく分からんがすごい。

結果が JSONで入ってるので好きなように使います。

### Non-Page Query
今度はページ処理ではなく、コンポーネント内から読んでみます。
前述の方法は使えなず、その代わりに useStaticQuery()というのを使います。

```js:src/components/hello.js
import React from "react"
import { graphql, useStaticQuery } from "gatsby"

const Hello = ( ) => {
    const data = useStaticQuery(graphql`
    {
        site {
            siteMetadata {
                author
            }
        }
    }        
    `)
    return (
        <big>HELLO {data.site.siteMetadata.author}!!!</big>
    )
}

export default Hello
```

これで著者に向かって挨拶してくれるタグができました。
Gatsby + material-ui でサイト作ってみる


## TL;DR
React, GraphQL, webpack などのフロントエンド、クエリ各種技術を詰め込んだ静的サイトジェネレータらしい。
以前はmiddlemanを使っていたが、gatsbyに乗り換えてみたのでその記録。

なるべくプレインな状態から始めて、少しずつ肉付けしていく。

## 前提知識

javascriptはjquery 全盛時代脳のままなので、ES6程度までにはアップデートしないといけない模様。

- export, module, default, named あたりの意味と役割
- 配列：map, forEach の使い方
- アロー関数、引数の扱い
- `` によるリテラルテンプレート

```js
// map, forEach
nodes.map(node => {}>)
nodes.forEach(nodes => {})

const set = [...new Set(nodes)] // uniq
const compact = ndoes.filter(v=>v) // compact

// 大体同じ
const foo = function(a){ }  
const foo = (a) => { }

const foo = a => {} // 引数が一つのときは括弧省略可能
const foo = ( { data, pageContext } ) => {} // TODO
```
## インストール
nodejsベースなので適宜入れる。

```sh
sudo apt install -y nodejs npm
sudo npm install n -g
npm install --global gatsby-cli
```

### hello world starter から始める
starter としてdefault や blog　があるが、それらよりhello-worldのほうが余計なのが少ないのでそれを使う：

```sh
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
cd my-hello-world-starter/
gatsby develop
(あるいは npm run develop)
```

で localhost:8000 にアクセスできる。

```sh
gatsby build
(あるいは npm run build)
```

で public/ 以下に出力される。

## sourth filetype

src/pages/ 以下は自動的に読んで出力してくれる。

```js:title=src/pages/about.js
import React from "react"

const AboutPage = () => {
    return (<div>I AM A PEN.</div>)
}

export default AboutPage
```

のように、about.jsにHTMLっぽいけどXMLを返す関数を作って export すると、 /about で出力する。返り値は必す単一要素で括ること。

関数名は何でもよくて、default を named とすれば

```js
import React from "react"

export default function () { return (<div>I AM A PEN.</div>)}
```

でも構わない。

## コンポーネント

src/components/*.js でコンポーネント（部品っぽいの）を定義できる。
自作タグみたいなもの。

```js:title=src/components/hello.js
import React from "react"

const Hello = ( ) => {
    return (
        <big>HELLO GUYS!!!</big>
    )
}

export default Hello
```

これをimport してあげると、大きな声で挨拶してくれる Hello タグを使うことができる：

```js:title=src/pages/about.js
...
import "../components/hello.js"

const AboutPage = () => {
    return (<div><Hello/></div>)
}
...
```

## まとめ

- インストールできた
- src/pages/ から　localhost:8000/ に出力できた
- コンポーネント（独自タグ）を作って使えた
Pardot Lightning アプリケーションを使用したエンゲージメントの向上とリードの育成 ⇒ Pardot のリード育成 (Pardot Lightning アプリケーション) ⇒ オーディエンスの構築

１．プロスペクトはどのようにしてエンゲージメントプログラムに追加されますか?
２．セールスサイクルのフェーズを定義することが、Engagement Studio の戦略となるのはなぜですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/70956f4c-0e03-d0a9-419d-7384bbb30074.png)
Hölderの不等式(ヘルダーの不等式)の拡張

#Youngの不等式の拡張
Youngの不等式の拡張として以下が成り立つ. $a, b \geq 0$, $p, q, r \geq 1$, $\frac{1}{p} + \frac{1}{q} = \frac{1}{r}$とすると,
$$ (ab)^r \leq \frac{r}{p}a^p + \frac{r}{q}b^q $$
証明は詳細は略すが, $x = \frac{a^{p-r}}{b^r}$とすると $\frac{\frac{r}{p}a^p + \frac{r}{q}b^q}{(ab)^r} = \frac{r}{p}x + \frac{r}{q}x^{1 - \frac{q}{r}}$であるのでこれが $x \in (0, \infty)$で1以上であることを言えればよく, これを $f(x)$とすると
$$ f'(x) = \frac{r}{p}(1 - x^{-\frac{q}{r}}) $$
であるため $x = 1$で最小値をとり, そのとき $f(x) = 1$である.

#Hölderの不等式の拡張
- Hölderの不等式
Hölderの不等式とは以下のようなものだった. $1 \leq p, q \leq \infty$, $\frac{1}{p} + \frac{1}{q} = 1$とすると $f \in L^p(\Omega)$, $g \in L^q(\Omega)$に対して,
$$\int_{\Omega} |f(x)g(x)| dx \leq \\|f\\|_{L^p(\Omega)} \\|g\\| _{L^q(\Omega)}$$
となる.

- Hölderの不等式の拡張
上記のHölderの不等式を拡張して以下が成り立つ. $1 \leq p, q, r \leq \infty$, $\frac{1}{p} + \frac{1}{q} = \frac{1}{r}$とすると $f \in L^p(\Omega)$, $g \in L^q(\Omega)$に対して,
$$ \\|fg\\| _{L^r} \leq \\|f\\| _{L^p} \\|g\\| _{L^q} $$

- 証明
$f, g$をそれぞれ$\\|f\\| _ p, \\|g\\| _ q$で割ることで$\\|f\\| _ p = \\|g\\| _ q = 1$である場合に帰着できる.
Youngの不等式の拡張で$a = |f(x)|, b = |g(x)|$とすると,
$$|fg(x)|^r \leq \frac{r}{p}|f(x)|^p + \frac{r}{q}|g(x)|^q$$
が成り立つ. $x$に関して両辺積分すると,

```math
\|fg\| _{L^r}^r = \int_{\Omega} |f(x)g(x)|^r dx \leq \frac{r\|f(x)\|^p_p}{p} + \frac{r\|g(x)\|^q_q}{q} = 1
```

$\hspace{10pt}$となり, 

```math
\|fg\| _{L^r} \leq 1 = \|f\|_{L ^p} \|g\| _{L ^q}
```
$\hspace{10pt}$より求める式が得られた.

#より一般的な拡張
上記の不等式を複数回用いることで以下の不等式が得られる. 
$n \in \mathbb{N}$, $1 \leq p_i \leq \infty$, $r < \infty$, $\sum_{i = 1}^n \frac{1}{p_i} = \frac{1}{r}$ とすると $f_i \in L^{p_i}(\Omega)$ に対して, 
$$ \\|\prod_{i = 1}^n f_i\\| _{L^r} \leq \prod _{i = 1}^n \\|f_i\\| _{L^{p_i}} $$
【Express】環境変数を取得する方法

#プログラミング勉強日記
2021年2月9日
ネットで調べると`process.env`を付けると環境編集を取得できるとあったが、それだけでは取得できなかった。その方法をまとめる。

#失敗した環境変数を取得する方法
　`process.env`で環境変数を取得できる。

```js
const env = process.env.変数名;
console.log(env);
```

```:実行結果
$ node app.js
undefind
```

#dotenvで.envを読み込む
　dotenvは.envファイルを読み込んで、`process.env`に設定するモジュール。

##1. dotenvをインストールする

```
$ npm install --save dotenv
```

##2. 環境変数を取得する

```js:app.js
require('dotenv').config();
const env = process.env.変数名;
console.log(env);
```

```:実行結果
$ node app.js
環境変数の値が表示される
```
ナビゲーションガードを利用して未ログインのアクセスを不可にする

#概要
特定のURLにログインしていないユーザーが入れないようにするためにフロント側で制御できないか模索していたら、ナビゲーションガードという機能が`Vue-router`に存在することを知ったので備忘録としてメモします。

#ナビゲーションガードとは
[公式](https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%AC%E3%83%BC%E3%83%89)
>ルーティングが行われる前にバリデーションをすることで、アクセスを制御できる機能

ナビゲーションガードは何種類か用意されており、用途によって使い分けることができます。
大きく２つに分かれており、**1.全てのルーティングに対して行われる処理**と**2.特定のルーティングに対して行われる処理**です。
今回は、**1.全てのルーティングに対して行われる処理**を利用していきたいと思います。

#処理内容
未ログインのユーザーは全てのページに対して`/login`にリダイレクトする処理にします。
全てのルーティングに対して行う場合は、`beforeEach`を使います。
ルーティングが呼び出されるたびに、毎回beforeEachの中に書かれた処理を行ってくれます。

```router.js
import Vue from "vue";
import VueRouter from "vue-router";
import store from './store'; //ストア

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes:[
        {
            path: '/',
            name: 'home',
            component: HomeComponent,
        },
        {
            path: '/photo/:postId',
            name: 'individual',
            component: Individual,
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
        },
    ]
})

router.beforeEach((to,from,next)=>{
    if(!store.getters["auth/check"]){  //ログイン済み:true,未ログイン:false
        next('/login')  // /loginにリダイレクトされる
    }else{
        next()
    }
})

export default router;
```

##参考文献
[Vue beforeEnter でルート単位のナビゲーションガード](https://qiita.com/yuzgit/items/2497a7a459a9f2917358)
[Vue-Routerのナビゲーションガードを使ってみる](https://qiita.com/SatohJohn/items/cd7067ac64d8e45da4dd)
コントローラー名の記述ミスによるRoutingError修正の例題

ローカルホストにアクセスすると下記エラー

Rouitng Error
unitialized constant PostController Did you mean? PostContrtoller


PostControllerが定義されていません。
PostControllerが原因では？というエラー文です。

ルーティングエラーなのでroutes.rbを確認します。
ローカルホストにアクセスしのでrootが読み込まれています。

root to:"post#index"

この記述は、rootでパス指定がない場合
post_controller.rbファイルのclass Post Controller内で定義されている
indexアクションを実行するという内容です。

しかし、実在するのはpost_controller.rbファイルのclass Posts Controllerのindexです。
したがってrootに記述されているpostをpostsに修正してエラーの確認をします。
Tips: RougeにDiffシンタックスとと各言語のシンタックスを一緒にかけるLexerを追加する

コードのシンタックスハイライトを行うgemとして、[Rouge](https://github.com/rouge-ruby/rouge)が有名だと思います。
RougeにはDiffのシンタックスはありますが、Diffと各言語のシンタックスを同時に適用することができないので、それを実現するためのTipsを紹介します。

実は実現する方法は[Rouge内のIssue](https://github.com/rouge-ruby/rouge/issues/642)で議論されていました。これを使って作ってみます。

まずは１つのLexerに対してDiffの指定も行えるようにしてみます。

```ruby:rubyの場合(Rouge::Lexers::Rubyはロードしている前提)
module Rouge
  module Lexers
    class DiffRuby < Ruby
      prepend :root do
        rule(/^\+.*$\n?/, Generic::Inserted)
        rule(/^-+.*$\n?/, Generic::Deleted)
        rule(/^!.*$\n?/, Generic::Strong)
        rule(/^@.*$\n?/, Generic::Subheading)
        rule(/^([Ii]ndex|diff).*$\n?/, Generic::Heading)
        rule(/^=.*$\n?/, Generic::Heading)
      end
    end
  end
end
```

これだけでRubyのシンタックスでDiffの指定も行えるようになります。
しかし、このままではRouge全ての言語に対してカスタムLexerを作成する必要があります。愚直にかくとかなり大変そうです。
そこで、以下のようなモンキーパッチを作成してみました。

```ruby
(::Rouge::Lexer.all - [::Rouge::Lexers::Diff]).each do |lexer|
  next unless lexer.ancestors.include?(::Rouge::RegexLexer) # RegexLexerを継承していないと構文の追加が行えないのでスキップ
  klass_name = "Diff#{lexer.name.demodulize}"

  ::Rouge::Lexers.const_set(klass_name, Class.new(lexer) do |_klass| # クラスを生成する
    title "Diff of #{lexer.title}"
    tag klass_name.underscore

    prepend :root do
      rule(/^\+.*$\n?/, Generic::Inserted)
      rule(/^-+.*$\n?/, Generic::Deleted)
      rule(/^!.*$\n?/, Generic::Strong)
      rule(/^@.*$\n?/, Generic::Subheading)
      rule(/^([Ii]ndex|diff).*$\n?/, Generic::Heading)
      rule(/^=.*$\n?/, Generic::Heading)
    end
  end)
end

```

これをRailsであればinitializerなどで実行すれば、Diffを適用したカスタムLexerを全ての言語に対して生成することができます。

Diff以外でも、全ての言語のシンタックスを拡張した別のシンタックスを追加したい時などで、同じ方法が使えると思います。
誰かの参考になれば幸いです。
next.js で /api 以外をAPI endpointとして公開する方法

# 概要
next.js にはVercelの[serverless functions](https://vercel.com/docs/serverless-functions/introduction) を土台とした[API routes](https://nextjs.org/docs/api-routes/introduction)機能があり、APIを公開できる
このエンドポイントは `/api/*` となっている
これを違うパスからアクセス可能にしたい需要があった
しかし規約が強く、基本的には `/api` からのエンドポイント変更は無理そうだった
そのときに思いついてうまくいった方法

# 方法
[Rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites) を設定する

```javascript:next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/hoge/:hoge*',
        destination: '/api/:hoge*',
      },
    ];
  },
};
```

これで `/hoge/*` は `/api/*` と同等になる

# 懸念
`/api` は消えない（隠せない）ので、エンドポイントを１つにしたいという需要があった場合は満たせない

# 他に方法があるか
https://vercel.com/docs/configuration#project/builds
や
https://vercel.com/docs/configuration#project/functions
には直接的に書いておらず、そもそもbuild設定変更は強く非推奨となっているので、自分が読み解く限りでは基本的に無理そう

[追記]
vercel自体が /api を serverless function endpointにしているので、もしnext.js (@vercel/next) を使わずvercelだけ使っている場合は[vercel.jsonのroutes設定](https://vercel.com/docs/configuration#routes) を使えばできるかもしれない
手元のnext.js & vercelで試した結果、 [以下のメッセージ](https://github.com/vercel/vercel/blob/master/errors/next-legacy-routes-optimized-lambdas.md)にあるように無効化されたようで、望みの挙動は得られなかった

```
WARNING: your application is being opted out of @vercel/next's optimized lambdas mode due to legacy routes in vercel.json. http://err.sh/vercel/vercel/next-legacy-routes-optimized-lambdas
```

next.jsを使っていたらrewrites/redirectsを使うべきらしい
【CSS】途中で色の変わる線の作り方。下線と擬似要素の線を重ねる。

CSSを使って途中から色が変わる線を作成する方法。下記のようなイメージ。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b94fdc65-4224-9607-00b4-8096705dbbe5.png)



##考え方
(1)boxの下側に下線を作成し、(2)その上に擬似要素(::after)で作った線を重ねる。


```html:.html
<div class="headline">
  <h2 class="headline_title">title</h2>
  <p class="headline_subtitle">subtitle</p>
</div>
```

```css:.css
.headline {
  margin: 0 16px;
  color: #333;
  border-bottom: solid 4px #222222;
  position: relative;
}
.headline::after {
  content: "";
  position: absolute;
  width: 80%;
  border-bottom: solid 4px #f47aa9;
  bottom: -4px;
  right: 0px;
}
.headline_title {
  font-size: 22px;
  font-weight: bold;
}
.headline_subtitle {
  font-size: 15px;
}
```


##1. 親要素
`::after`で線を重ねるため`position: relative;`を指定しておく。

```
.headline {
  margin: 0 16px;
  color: #333;
  border-bottom: solid 4px #222222;
  position: relative;
}
```

※注意点
枠線は枠の外側に広がる。このため、擬似要素の線の高さのスタートラインはこの線の太さの分だけ下げる。


<br>
##2. 擬似要素
`position: absolute;`で位置を指定する。

`right: 0px;` 右端からスタート。
`bottom: -4px;`　親で作成した線の太さだけ開始位置を下げる。




```
.headline::after {
  content: "";
  position: absolute;
  width: 80%;
  border-bottom: solid 4px #f47aa9;
  bottom: -4px;
  right: 0px;
}
```


以上。


<br>
おまけ

##レスポンシブデザイン
メディアクエリを使って、スマホサイズになった時は文字の太さや線の太さを小さくする。

また、SASS(scss)で記述。


```html:.html
<div class="headline">
  <h2 class="headline_title">title</h2>
  <p class="headline_subtitle">subtitle</p>
</div>
```

htmlは変更なし。scssのみ追記。

```scss:.scss
.headline{
  margin: 0 16px;
  color: #333;
  border-bottom: solid 4px #222222;
  position: relative;
  @media screen and (max-width: 671px) {
    border-bottom: solid 2px #222222;
  }
  &::after{
    content: "";
    position: absolute;
    width: 80%;
    border-bottom: solid 4px #f47aa9;
    bottom: -4px;
    right: 0px;
    @media screen and (max-width: 671px) {
      border-bottom: solid 2px #f47aa9;
      bottom: -2px;
    }
  }
  &_title{
    font-size: 22px;
    font-weight: bold;
    @media screen and (max-width: 671px) {
      font-size: 18px;
    }
  }
  &_subtitle{
    font-size: 15px;
    @media screen and (max-width: 671px) {
      font-size: 12px;
    }
  }
}
```
カテゴリー別、最大いいね数の投稿を別途表示

#概要
投稿別に、いいね数が最大値の回答を別途表示できる方法について述べている。

#バージョン
rubyのバージョン　ruby-2.6.5
Railsのバージョン Rails:6.0.0

#前提
・いいね機能を実装済み

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/8d465574-4aba-4926-bad6-d209aca5d3ca.png)


#できること
いいね数、最大の投稿を別途表示できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/28b61d61-1699-5bef-2a9b-6bc89675ca4d.png)

#今回の例（テーブルについて）
投稿・・・definition
回答・・・answer
いいね・・like


#実装の全体像
①コントローラーにインスタンス変数を定義
↓
②viewに、表示のためeachメソッドを用いた記述

#実装
##①コントローラーにインスタンス変数を定義

```app/controllers/definitions_controller.rb
def show
〜省略〜
    @rank = Answer.find(Like.where(definition_id: params[:id]).group(:answer_id).order('count(answer_id) desc').limit(1).pluck(:answer_id))
  end
〜省略〜
```

※limit(1)の( )内の数値を変更すればランキング表示として実装もできる。

##②viewに、表示のためeachメソッドを用いた記述

```app/views/definitions/show.html.erb

〜省略〜

   <% @rank.each do |rank| %>
      いいね数が最も多い回答</br>
       <%= link_to rank.user.nickname, "/users/#{rank.user_id}" %>
         <div class="box"><%= rank.answer %></div>　#←記述はここ
         <i class="fas fa-heart"></i><%= rank.likes.count %>
   <% end %>

〜省略〜
```
※i class以下はFont Awesomeを使用している
※CSSは任意の指定

完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/2293bf86-575a-c450-8f41-19368a0ac409.png)

この方法だと、カテゴリー別に最大のいいね数の投稿を表示することができます。
コントローラーでwhereメソッドを用いなければ、画像ピンク色の投稿が、カテゴリーをまたいでも永遠繰り返されます。

以上です。
#ADX2 ロボット機能でCSVの内容に従ってキューを再生する

#はじめに
[ADX2ロボット機能](https://game.criware.jp/manual/adx2_tool/latest/criatom_tools_atomcraft_api.html)で、
自動再生するようなスクリプトを作ってみた。

今回は、CSV形式の情報を読みつつ再生しています。

##用途は
- とりあえず登録したデータを音で聞いて変なところが無いかとかチェック
- テキストの内容をあっているかをざっくりと確認する
- 流して聞いておかしなことが無いか（音質が他と違うなど）

といった時に使えるかもしれない。
スクリプトを使わなくてもツリーやリスト上で再生していけばよかったりもしますが、
CSVで再生内容とかも同時に表示してあげているので、よりチェック力があがるかもしれません。

# やっていること
選択しているキューシートの
キューを集めて
csvを読み込んで
ログも表示しつつ
キュー名と同じものがあれば、

# CSVのフォーマット

こんな感じで、
最初のところに番号（これがキュー名）
英語のテキスト、日本語のテキスト

といったCSV（今回はカンマじゃなくてタブ区切りですが）を用意しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/874ecfa9-1d9c-cc00-7e40-5df727750674.png)

# スクリプト

``` PreviewVoice.py
# --Description:[tatmos]ボイスの内容を表示しつつ再生する
import sys
import cri.atomcraft.project
import cri.atomcraft.project as acproject
import cri.atomcraft.debug as acdebug
import cri.atomcraft.preview as acpreview
import csv

# 選択しているキューシートを得る
selected_CueSheets = acproject.get_selected_objects("CueSheet")["data"]
if not selected_CueSheets :
    acdebug.warning("生成するキューシートを選択してください.")
    sys.exit()

cues = list()
#キューを取得
for cusheet in selected_CueSheets:
    acdebug.log("cusheet Path:\"{0}\"".format(acproject.get_object_path(cusheet)["data"] ))
    #キューを集める 
    cues = acproject.find_objects(cusheet, "Cue")["data"]    
    
#csvを読む
with open('C:/MyDearest/UranusSenarioText.csv', 'r', encoding="utf_8") as f:
    reader = csv.reader(f, delimiter='\t')
    for row in reader:      
        acdebug.log("{0},{1},{2}".format(row[0],row[1],row[2]));
        for cue in cues:
            cue_name = acproject.get_value(cue, "Name")["data"]
            if cue_name == row[0]:
                # キューを再生
                acpreview.start_playback_cue(cue)
                break
```

#実行すると
ログにCSVの内容を表示しつつ音を再生していきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/918fe1db-cb1a-b56d-88a9-7c9c4388ec44.png)



#改善点としては
- UIをつけて、一時停止や、任意送りできるようにする
- 再生が終わるまで待ってから次のものを再生する
- テキストIDを入れたら、それだけを再生する

など、UIをつけると良さそう。（現状だとUIはリモート型にする必要があるので今回はパス）

#おわりに

現状のADX2ロボットでできることは、キューの再生・停止のみなので、
今後もっと拡張されていくといろいろできるようになると思う。
Azure VMのCentOSをマイナーバージョンアップしたらAzure Portal上の表記はどうなるのか

CentOSを7.8→7.9にマイナーバージョンアップした際に、Azure Portal上のバージョン表記がどうなるのか、気になったので試してみました。

* Azure VM概要ページのここと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/8a770ff6-3001-b45e-bc95-e53f6d2e2de7.png)


* ここ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/0f641dbf-2972-ecff-5d44-6db7fb055163.png)

# CentOSマイナーバージョンアップ
* まずはCentOS 7.8イメージを準備します。あえて1つ古いバージョンで構築しています。
* OS上からもバージョンを確認しておきます。

```
$ cat /etc/redhat-release
CentOS Linux release 7.8.2003 (Core)
```

* yumでバージョンアップします。

```
$ sudo yum update -y
```

# 結果確認

* OS上でバージョン確認します。7.9に上がってますね。

```
$ cat /etc/redhat-release
CentOS Linux release 7.9.2009 (Core)
```

* Azure Portal上を確認してみます。[プラン]以外は7.9で表記されてますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/dca918aa-0757-bb68-e3fb-29afc40943fa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/bf9cacc2-04a7-30ee-ec5d-70d27ebea0da.png)

* ここのバージョン情報はOS上にインストールされたAzure Linux Agentが取ってきているようです。Linux Agentのログを見ても、あるタイミングからバージョンが変わったことを検知しています。

```
$ grep "OS: centos 7." /var/log/waagent.log
2021/02/08 05:31:44.976346 INFO Daemon OS: centos 7.8.2003
2021-02-09T02:39:48.477325Z INFO Daemon OS: centos 7.9.2009
```

* プランに関しては最初に選んだVM Imageの情報なので、ここが変わることはないということですね。az vm image listで表示されるSkuにあたります。

```
$ az vm image list --offer CentOS --publisher OpenLogic --sku 7_8 --all --output table
Offer       Publisher    Sku       Urn                                           Version
----------  -----------  --------  --------------------------------------------  --------------
CentOS      OpenLogic    7_8       OpenLogic:CentOS:7_8:7.8.2020051900           7.8.2020051900
```

以上
コンストラクタって、なによ !??

#経緯
コンストラクタってなんぞ!??という学習履歴を体系的にまとめたかった為

##コンストラクタの書く時のルール(特徴)

 + voidはつかない(但し、戻り値はない)
 + 命名はコンストラクタが存在するクラスの名前と同じものにする
 

##コンストラクタの機能
+ newで変数にクラスを呼び出して定義した際に**最初に呼び出され**て**実行される**メソッド
+ もちろん引数を渡せばそれを使用した内容を実行してくれる
+ 全てのクラスにコンストラクタは与えられる(記述していなくても、コンパイラが自動で生成してくれる ← これをデフォルトコンストラクタと言う)

そう！結局、一番初めに実行されるメソッドだってことです!!
ポケモンでいうところの、モンスターを呼び出した時に最初の鳴き声ということです!!(よね!??)

[ポケモン モンスター召喚時のコンストラクタ](https://youtu.be/P5E_1Cvkr5k?t=1632)


いざ書いてみましょう。

```C#:program.cs
using System;

namespace test_constract
{
    class Program
    {
        static void Main(string[] args)
        {
            
            Console.WriteLine("January");

            // コンストラクタの呼び出し
            Programs programs = new Programs();

            Console.WriteLine("February");

            // programsインスタンスを破棄
            programs = null;

            Console.WriteLine("March");
            Console.WriteLine("April");
            Console.WriteLine("May");
        }
    }

    class Programs
    {
        // コンストラクタの定義
        public Programs()
        {
            Console.WriteLine("コンストラクタが自動で呼ばれました");
        }
    }
}



```


```terminal:出力結果(ターミナル)
January
コンストラクタが自動で呼ばれました
February
March
April
May
```


そういうことですね、
完全ニ理解シタ

もう少し書いてみましょう

##複数あるコンストラクタを実行する

基本的に実行されるコンストラクタは１つのみで、複数あったとしても2つ目以降は実行されない。
ただし、複数のコンストラクタを実行する方法がある。
  **:this()** を付けることで呼び出したいコンストラクタの前に基底となっているコンストラクタを呼び出して実行できる。

```C#
using System;

namespace test_constract
{
    class Program
    {
        static void Main(string[] args)
        {
            int num = 10;
            
            Console.WriteLine("これからコンストラクタを実行します");

            // コンストラクタの呼び出し
            Programs programs1 = new Programs();

            Console.WriteLine("");
            Console.WriteLine("~~~次は引数がintのコンストラクタも実行します~~~");
            Programs programs2 = new Programs(num);

            Console.WriteLine("");
            Console.WriteLine("~~~次は引数がstringのコンストラクタも実行します~~~");
            Programs programs3 = new Programs("Let's C#!!");

            Console.ReadLine();
        }
    }

    class Programs
    {
        // コンストラクタの定義
        public Programs()
        {
            Console.WriteLine("引数が無いコンストラクタです");
        }

        public Programs(int num):this()
        {
            Console.WriteLine("引数がint型 {0} のコンストラクタです",num);
        }

        public Programs(string str):this(4)
        {
            Console.WriteLine("引数がstring型 {0} のコンストラクタです", str);
        }
    }
}

```

```terminal
これからコンストラクタを実行します
引数が無いコンストラクタです

~~~次は引数がintのコンストラクタも実行します~~~
引数が無いコンストラクタです
引数がint型 10 のコンストラクタです

~~~次は引数がstringのコンストラクタも実行します~~~
引数が無いコンストラクタです
引数がint型 4 のコンストラクタです
引数がstring型 Let's C#!! のコンストラクタです

```

基底となっている引数のないコンストラクタは２回呼び出されて、合計３回実行しています。
あと、引数がstringをとっているコンストラクタはthisの引数にintの値を与えることでその引数を利用して2番目のコンストラクタを実行しています。
変数の種類について

# はじめに
Rubyでミニアプリを作成中に、変数について再度学び直したので、備忘録として付けたいと思います！



# 変数の種類について

## ローカル変数

ローカル変数は、変数が宣言されたメソッド内やブロック内でのみ使用できます。


```
class Menu
 def name(str)
   food = str
   puts food
 end

 def show
   
 end
end


```

## インスタンス変数
インスタンス変数は、@変数名として定義します。
@をつけることにより、同クラスの別のインスタンスメソッド内でも使用することが出来ます。

```
class Menu
 def name(str)
   @food = str
   puts @food
 end
 
 def show
   puts @food
 end
end
```

## グローバル変数
グローバル変数は、$変数名として定義します。
$をつけることにより、メソッド外や、クラス外からも使用できます。
しかし、注意が必要となります！
広い範囲で使用できることから、変数名が重複してしまうなど、書き換えが行われる場合があります。

```
class Burn_cal
   def aim_cal
     $total_cal = aim_bm
   end
end

class Pfc_balance
  def fat
    @fat_cal = $total_cal * 0.25
    @fat_g = @fat_cal / 9
  end

 
end
```


# さいごに
Rubyだけでミニアプリを作ってみることで、クラスや変数についての理解も少し深まったと実感しました。
しかし、勉強不足だなと実感することが多いので、ハンズオンで学んでいきたいと思います！

ここまで、読んでいただきありがとうございました！
TF-IDFってなに？(logが出てきて訳分からん。。。)

# 背景
「TF-IDF」は**文章中の単語の重要度**を測るのに使われる。
ex) **自然言語処理・レコメンド・検索**などで活躍します


今回はYahoo!,Googleなどの検索エンジンで**あるワードを入力した**時に、どのようなページを上位に載せるべきか、ということを考えながら進めると理解が容易くなります。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/d2102b99-4c70-6187-1699-a2f2401f3878.png" class="img" alt="自然言語処理の流れ"> <img width="330" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/87d2d128-c9ce-4339-9578-62767302f648.png" class="img" alt="自然言語処理の流れ">

例えば、**"自然言語処理とは"**と調べると。。。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/0c92b5a2-5cb9-d219-ef54-b209381840cd.png" class="img" alt="自然言語処理の流れ">　<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/f9b476e2-4cee-f45e-e234-5a3890ec1bf8.png" class="img" alt="自然言語処理の流れ">


どのようなサイトを上位に載せるべきでしょうか？
例えば、

+ **「自然言語処理」「とは」**の２単語が多く含まれているサイトを上位に出力する

とするのがシンプルな考えだと思います。

しかしこのままでは、いくつか問題点があります。

①　**長文**のサイトが圧倒的に有利になる
② **「とは」**のみが多すぎるサイトだと意味を為さない

このような問題を解決できる単語の重要度の指標として、**「TF-IDF」**があります。

#TFの定義

```math
\begin{align}
TF(t,d) &= \frac{単語tの登場回数}{文章dの単語数} \\
&= \frac{\# \ \ of \ \ t \ \ in \ \ d}{\#d}
\end{align}
```

**「TF」**は**"文章dの中の単語tの割合”**を意味するため、
先程述べた、"①**長文**のサイトが圧倒的に有利になる"の問題を解消できる！

#IDFの定義

```math
\begin{align}
IDF(t) &= log \frac{全文章数}{単語tを含む文章数} \\
&= \frac{\#D}{\# \{d∈D | t∈d\}}
\end{align}
```

**「IDF」**は**"単語tを含む文章の割合、確率の逆数"**を表す。
先程述べた、"②**「とは」**のみが多すぎるサイトだと意味を為さない"の問題を解消できる！

##logを用いる理由


```math
\begin{align}
p(t) &=  \frac{単語tを含む文章数}{全文章数}とすると、 \\
\frac{1}{p(t)}&= \frac{全文章数}{単語tを含む文章数} は単語tのレア度を表していることが分かる。
\end{align}
```


突然だが、**「情報量」の定義**をしておく。
**「情報量」**…あるできごと（事象）が起きた際、それがどれほど起こりにくいかを表す尺度。ありふれたできごとが起こったことを知ってもそれはたいした「情報」にはならないが、逆に**珍しいできごと**が起これば、それは**より多くの「情報」を含んでいる**と考えられる。

**【具体例】**
ルーレットには１～４０までの番号が振られています。
そして、あなたは「ルーレットが出た目」を当てればお金がもらえます。

A：１～２０のうちのどれかの目が出るよ
B：１～１０のうちのどれかの目が出るよ

**Q.ルーレットを当てるにはAとBのどちらの手がかりを得たいですか？**

**【答え】**
Aが発生する確率は2分の1。
Bが発生する確率は4分の1。
そして、Bのほうが**情報量が多い**。

これを一言でいうと**「発生する確率が低いこと（珍しいこと）が分かった時のほうが、情報量が多い」**ということになります。


以上より、
確率p(t)が小さいほど、$\frac{1}{p(t)}$ が大きくなる。
確率p(t)が大きいほど、**$\frac{1}{p(t)}$**が小さくなる。
これは情報量の意味と等しいため、より定量的に扱いやすい**「情報量」**を採用するべく、 **log**を用いている。

```math
\begin{align}
log\frac{1}{p(t)}は”情報量”を表す
\end{align}
```


#具体例

+ 文章１："犬","は","可愛い"
+ 文章２："猫", "は","小さい"
+ 文章３："猫", "は", "可愛い"

**【TFを計算する】**
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/1cf62964-708f-e533-45e4-6998d35b78b0.png" class="img" alt="自然言語処理の流れ">

**【IDFを計算する】**
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/030d8a4b-1436-b9c1-a780-adbc27945e20.png" class="img" alt="自然言語処理の流れ">

**【TF-IDFを計算する】**
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/c38d39c2-735e-3b5c-eee7-49ce69b65585.png" class="img" alt="自然言語処理の流れ">

**「は」**は特徴的なワードではないため、TF-IDFの値が他のワードに比べて低くなっていることが分かる。(文章１では、「犬」という特徴的なワードが値が高くなっていることが分かる。)
エクセル上の画像サイズはいつ変更されるのか？

# エクセルで画像管理


エクセルにも「画像として保存」機能が使えるようになりました。
画像の挿入もできるので、画像管理ソフトとして使えないか？と思っています。
しかし、画像の大きさを変更していないのに、保存すると以前に保存した画像と異なってしまいます。


# いつ画像のサイスが変わるのか？


## 元画像

![org.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/a1527e91-262a-cb47-ffad-924d93cc7920.png)

## 右に移動

![move.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/c8939ca0-aecb-9685-9a4e-c5afbc69e36b.png)

## 縮小表示する


表示倍率を100％に戻しても、小数の桁が一致してるのかどうか？

![mini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/bb2a0725-d343-ce91-d17f-1fd2e81a8d43.png)

# 元に戻すには？


[リセット]クリック
1回で戻らないときは、2回クリック

![reset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/de85feb5-9efd-50e6-599e-b0db11c63f70.png)
型定義の文脈で三項演算子ってナンジャコリャ

# 型定義の文脈で三項演算子ってナンジャコリャ

## ことの発端

```ts
type abc_def_t = "abc" | "def";
type CHECK_ABC_DEF<A> = A extends abc_def_t ? A : never;
```

TypeScript初心者が初見で「コイツは何やってるん？」ってなるやつです。
まず、abc_def_t は共有型なのはさておき、CHECK_ABC_DEF は何者って感じになります。
何といっても、型定義の文脈に三項演算子「？」が入るって衝撃的。
そして、C++やってる人にとってneverってrxやってると出てくるアレ？的な。
usingに使い慣れていないと、型定義に「＝」がノイズを増大させます。

## で、何なの？

単に三項演算子のインパクトが大きくて頭に入って来ないだけで、実は単純です。

```ts
type CHECK_ABC_DEF<A> = A extends abc_def_t ? A : never;
```

* CHECK_ABC_DEF という「型」が定義されている（結構、ここが重要で、これ型の定義です）
* <> 使っているし、コイツは generics （C++でいうtemplate）だね
* ```A extends abc_def_t```って、こいつは型定義中では真偽値の扱い（正確には値じゃない、そして、これがTypeScriptの特殊な機能で、Condisional Types といいます）
* 即ち、Aがabc_def_tを継承しているなら「A型」、そうじゃなきゃ「never型」

ちなみに、この手で使う際の never 型はエラーを誘発させるために使うと思って差し支えない。

C++で表現するとこんな感じかな？

```cpp
template <typename T> using check_int_like_t = typename enable_if< is_integral< T>::value, T>::type;
auto n = check_int_like_t<int>();
auto s = check_int_like_t<std::string>(); /* エラー */
```

## サンプルコード

```ts
type abc_def_t = "abc" | "def";
type CHECK_ABC_DEF<A> = A extends abc_def_t ? A : never;

{
  type abc_t = "abc";
  {
    type check_t = CHECK_ABC_DEF<abc_t>;
    const val: check_t = "abc";
    console.log("abc->", val);
  }
}

{
  type xyz_t = "xyz";
  {
    type check_t = CHECK_ABC_DEF<xyz_t>;
    const xyz: check_t = "xyz"; /* ERROR */
    console.log("xyz->", xyz);
  }
}

{
  type abc_xyz_t = "abc" | "xyz";
  {
    type check_t = CHECK_ABC_DEF<abc_xyz_t>;
    const abc: check_t = "abc";
    const xyz: check_t = "xyz"; /* ERROR */
    console.log("abc->", abc);
    console.log("xyz->", xyz);
  }
}

{
  type abc_t = "abc";
  const abc = (): abc_t => "abc";
  {
    type check_t = CHECK_ABC_DEF<ReturnType<typeof abc>>;
    const value: check_t = abc();
    console.log("value ->", value);
  }
}

{
  type xyz_t = "xyz";
  const xyz = (): xyz_t => "xyz";
  {
    type check_t = CHECK_ABC_DEF<ReturnType<typeof xyz>>;
    const value: check_t = xyz(); /* ERROR */
    console.log("value->", value);
  }
}
```

## 用途は？

型チェックで使用する。
自分に想像力がなくて、他には思い浮かばない。

## 戒め

enable_if の仕様を読んでて、自分の日本語読解能力が低いと認識。
ちなみに、下記のコードがエラーで悩んでいた。。。orz

```cpp
template <typename T> using check_int_like_t = typename enable_if< is_integral< T>::value>::type;
auto n = check_int_like_t<int>();
```
HTML/CSS概要【初心者向け】

#導入
HTMLやCSS、Rubyを学習し始めてから2年弱が経過しました。

先日友達から「プログラミングを学ぼうと思う」と言われ、アウトプットの意味を込めて「教える！」と返事をしました。しかし、「自分が知っている」と「他人に教えること」では大きな違いがありました。実際に教えてみると、うまく伝わらず不明点が多く残ってしまったのです。

このことから、自分の知っている知識を正しく、わかりやすく説明する必要があると気がつきました。
そのための練習として、基礎的なHTML・CSSをここでアウトプットしたいと思います。

#概要(ゴール設定)
こちらんの記事ではHTMLとCSSの役割とウェブブラウザで表示する方法について説明します。


#Webサイトの見た目は2つの言語からできている。

![スクリーンショット 2021-02-09 17.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792954/b5a56dec-7796-0b65-2eb0-9b69e0e6c1c6.png)


webサイトというと様々な言語で構成されていると思われがちですが、実際はHTMLとCSSの2つの言語によって構成されています。

##どんな関係性か？
![スクリーンショット 2021-02-09 18.10.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792954/5684b4f4-00b8-4e1b-3901-1ca662172b46.png)
CSSがHTMLを装飾してwebブラウザに表示します。

実際ブラウザ上でどのような違いがあるのか、CSS有り、無しで表示した画像を並べてみました。

![スクリーンショット 2021-02-09 18.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792954/1fd3bb00-6935-366b-2883-f623f8e0ec49.png)
両者をみると明らかに左の方がそれっぽいページの見た目をしています。
CSSを使い見た目を整えることで、ユーザーにとって使いやすいサイト・サービスが構築可能です。
よってこの2つの言語はセットて使うことが一般的です。

#まとめ
#####次回はブラウザ表を行います。
初心者が躓くオブジェクト指向の理解方法とその使い方 【基礎】

<h1>オブジェクト指向とは概念である</h1>

<p>そもそもオブジェクト指向とはどんなものなのか...</p>
<オブジェクト指向（Object Oriented Programming : OOP)とは
プログラムを手順ではなく、モノの作成と操作として見る考え方。オブジェクトとは「モノ」を意味する。

<ul>オブジェクト指向を使うと...
<li>プログラミングの全体像を把握しやすい</li>
プログラミング全体の構造を把握でき、物をつくるイメージでプログラムを設計できる。
<li>分業や共同作業がとても捗る</li>
大きなプロジェクト（大人数）でも分業などとてもしやすい。
<li>改良や修正がとても簡単</li>
大部分が定義できていれば、改良も修正も小さな部分を増やしたり減らしたりするだけで一気に修正が可能。
</ul>

<h1>クラス</h1>
クラスとは...オブジェクトを作る<b>テンプレート（設計図）</b>
クラスの中には変数や関数が含まれ、クラスを軸にオブジェクトを作っていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078759/8bb5e66a-b556-1d31-8d75-25dd799edb7f.png)

```PHP:class
class クラス名　{

//この中にプロパティとメソッドを記述する。

}
```

<h1>プロパティ（インスタンス変数）</h1>
プロパティとはオブジェクトを説明するデータの事で、オブジェクトの属性や状態・特質や特性を指す。
<b>クラスの中で定義された変数の事をプロパティと呼ぶ。</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078759/2bfb8eaf-98a4-6543-00a6-0054928239d3.png)
※クラスの中で定義されている場合のみ、プロパティと独自の名前がつく

```PHP:propaty
//プロパティの宣言
public/private/protected $変数名 = 値;
/*
publicはクラス内・クラス外のどこからでもアクセス可能。
privateは同じクラス内からのみアクセス可能。
protectedは同じクラス、および子クラスからアクセス可能。
*/
```

<h1>メソッド</h1>
メソッドとはなにかしらの処理をまとめ、その一連の処理に名前をつけたもので共通して持つ機能。
<b>クラスの中で定義された関数の事をメソッドという。</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078759/6f0d18dc-d9b4-da35-5076-99a698359a36.png)


■メソッドの種類...
・インスタンスメソッド：クラスのインスタンス(実体)に対して紐づけられるメソッド
・クラスメソッド：クラスオブジェクトから実行可能なメソッド

```PHP:method
public/private/protected function 関数名(){
//この中に関数を定義

}
```

<h1>某キャラクターを作成してみた</h1>
#####頭の中でどのように組み立てるかイメージ・・・#####
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078759/c55e1df2-89bd-771f-1f9d-a6dd13000a70.png)

#####まずはクラスとプロパティの作成#####

```PHP:Chocobo.class
Class Character {
//プロパティ
    public $name;
    public $color;
    public $length;
    public $weight;
    public $hp;
```
#####次にメソッドの設定#####

```PHP:Chocobo.method
    public function introduce(){
    //紹介メソッド※改行コードを書くとechoした時見やすい。
        echo "名前：" .$this->name;
        echo "色：" .$this->color;
        echo "体長:" .$this->length ."cm";
        echo "体重:" .$this->weight ."kg";
        echo "体力:" .$this->hp;
    }
```

#####キャラクターの生成（チョコボ）#####

```PHP:Chocobo.instance
$yellow = new Character();
    $yellow->name ="チョコボ";
    $yellow->color ="黄";
    $yellow->length = 50;
    $yellow->weight = 15;
    $yellow->hp = 100;
/*結果
名前：チョコボ
色：黄
体長:50cm
体重:15kg
体力:100*/
```
#終わりに#
今回は、初心者が躓くオブジェクト指向の基本の部分、クラス・プロパティ・メソッドについて記述しました。
次回、継承・コンストラクタについて詳しく書いていこうと思います。

また、作成者本人もPHPを学習中のため、勉強用のメモとして、この記事を活用しております。
もっとわかりやすく教えていただける方いれば、コメント欄にてお待ちしております。

ではでは♪
【Webクリエイター能力認定試験（エキスパート）】合格体験記

## はじめに
先日、Webクリエイター能力認定試験（エキスパート）を受験しました。
結果はおよそ2週間後に発表され、無事合格しました！

## Webクリエイター能力認定試験とは
WWWで利用される技術の世界的な標準化を図るW3Cに完全準拠した、セマンテックなマークアップスキルを測定する認定試験です。
簡単に説明すると主にHTML、CSSの知識問題と実技が問われる試験となっています。
合格率は89.9％（2018年度平均合格率）となっているので、頑張れば合格できるラインです！
結果は約90％の得点率でした！
#### 詳しくはこちら！
https://www.sikaku.gr.jp/web/wc/contents/about/


## 経歴
新卒2年目の文系出身のSEです。

- 2019年 7月～現在：webアプリケーションの運用保守を担当（主な言語はJava）
- 2020年12月～現在：kintoneのカスタマイズ（主な言語はjavaScript）

他にはHTML,CSS,JavaScriptを活用し自作のWebサイト作成を行ったり、 
HTML5プロフェッショナル認定　レベル1の資格を取得していたりします。

## 資格取得までの流れ
勉強を開始したのは2021年1月の中旬です。
主な勉強内容は公式サイトに掲載してあるサンプル問題を1回ほど解きました。
(1回目で約8.5割の得点率だったのということもあり満足して1回だけしかやっていません。）
後は、HTML,CSSの総復習をしました。サンプル問題はある程度できたもののHTML,CSSの忘れている知識が無いよう勉強を行いました。
そして、2021年2月6日に試験を受けました。

## 試験の感想
### 知識問題について
Webサイトに関する問題が出題されます。一部分からない問題がありましたが、基本的にはHTML,CSSに関する内容が出題されます。後はユーザビリティに関する問題など。公式のサンプル問題の内容に似た問題も出されていたので、サンプル問題はやっておいてよかったです。

### 実技問題について
Webページの作成を行います。試験ではメモ帳を使用して実技を行いました。全て自分で打つのでタイプミスや後から見直しがしやすいようにインデントを揃えたりするというのが大変でした。（Webページ作成ソフトを選ぶこともできましたが、使い方がわかるか不安だったのでやめておきました。。）
メモ帳を使用した場合、時間は110分あります。急いで実装を行ったものの時間はギリギリで全てを見直す余裕はありませんでした:disappointed_relieved:
また、試験中にはHTMLとCSSの各要素の一覧を見ることができるので要素を忘れてしまっても安心です。ですが、時間があまりないので見てばっかりいると時間が無くなってしまう可能性があります。
あとは、ブラウザで作成しているWebページを見ることができるのでレイアウトがおかしかった場合はすぐ治せるのでそこは助かりました。

### さいごに
公式サイトに掲載してあるサンプル問題に目を通しておいたので、試験当日はあまり戸惑うことなく操作を行うことができました。これは必ずやるべきです！公式の問題集を買うか悩みましたが、買わなくても問題ありませんでした。
また、普段からHTML,CSSに慣れている人はあまり勉強しなくても試験に臨むことができると感じました。HTML,CSSに慣れている人はぜひ受けてみてください！
docker-composeで固定IPアドレス指定

# Docker便利ですよね。
ソフト開発という荒波に、Docker艦隊は強大な味方です。
ただし、指示書がなければこの優秀な艦隊は動いてくれません。

# 今日はその通達文、docker-composeのTips
コンテナに固定IPアドレスを振りたい場合は以下のように指定する。

```
version: "3"
services:

  main-server:
    restart: always
    image: main_server:v0.0.1
    container_name: "main-server"
    ports:
      - "8080:80"
    networks:
      app_net:
        ipv4_address: 172.30.0.2

  sub-server:
    restart: always
    image: sub_server:v0.0.1
    container_name: "sub-server"
    ports:
      - "8080:80"
    networks:
      app_net:
        ipv4_address: 172.30.0.3

networks:
  app_net:
    driver: bridge
    ipam:
     driver: default
     config:
       - subnet: 172.30.0.0/24
```
内部ネットワークドライバとして、bridgeを指定して使っていきます。

公式ドキュメント
https://docs.docker.com/compose/compose-file/compose-file-v3/#ipv4_address-ipv6_address

現場からは以上です。
会社のプロキシ：Zscaler環境下でAWS CLIやGitが繋がらない場合

# まとめ
証明書マネージャーから、Zscaler Root CAをBase64エンコード版でエクスポートし、ローカルマシン上に保存する。

### AWS CLI
.aws/configに
`ca_bundle = C:\FullPath\ZscalerRootCA.cer`
を設定する
### Git
.gitconfigに

```
[http]
	sslCAInfo = "C:\\FullPath\\ZscalerRootCA.cer"
```

を設定する

#補足
## 環境
Windows 10
会社支給PC
Zscaler導入済み

## 遭遇するエラー内容
### AWS CLIの場合
`[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1091)`

### Gitの場合
`SSL certificate problem: unable to get local issuer certificate`

### pipの場合
`There was a problem confirming the ssl certificate: HTTPSConnectionPool(host='pypi.org', port=443): Max retries exceeded with url: /simple/pip/ (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] 
certificate verify failed: unable to get local issuer certificate (_ssl.c:1122)'))) - skipping`

## 参照記事
https://qiita.com/sta/items/9a8b9612af518c7639cc
こちらの記事が大変まとまっていて分かりやすいです。
ここで述べられている、「証明書 > インターネット上」についても、
通常の対応ではだめで、ZscalerのRoot CAを指定しないと繋がらないという現象でした。
Zscalerがインターネットとの通信の間に割り込むようで、その時に問題が起こるようです。

https://www.javaer101.com/ja/article/1937017.html

https://qiita.com/kekosh/items/e96e822bf9cb6ca1aff8

https://limitusus.hatenablog.com/entry/20120529/1338306372