OmniAICreator/Qiita-1.07M huggingface dataset:
webプログラミングで作る最初の題材は掲示板だよね、本気で作った結果

#最終的にはレンタル掲示板になるよね
無料レンタル掲示板NIERU.NET
http://nieru.net
掲示板サンプル
http://nieru.net/sample/
PHP7.4
mysql
##自分が利用してたサービスだからこそ作れるよね
携帯専用掲示板サイトを5年以上利用してそのサイトを10年以上運営して
掲示板サイト利用者からレンタル掲示板運営者になれて１つの夢が叶った感じ
##最初は挫折するよね
2013年頃、PHPの勉強がてら掲示板を作ろうと努力したけど検索機能を実装する辺りで挫折した
当時は何がダメなのかも分からなかった
##フレームワークは便利らしいよね
コードの書き方は全て自分ルールになっている
共同開発しないから問題はなし
何処かの会社で働くこともしないから問題なし
仕事を受注しないから問題なし
##ソースコードは見せられないよね
if,swtich,includeのオンパレード
自分がわかれば問題ない
##機能は沢山付けるよね
いろんなレンタル掲示板サイトを参考にして取り込める機能は全て取り込んだ
一部の有料レンタル掲示板より機能が豊富になった
##バグはたくさん出るけど気付かないよね
レンタル掲示板を開始して利用者が増えたおかげで見つかるバグがある
バグを報告してくれる方もいるので、利用ユーザーと一緒に作り上げてる感が良いよね

http://nieru.net
【GAS】スプレッドシートにカレンダーを生成したい

#日付コピーしてカレンダーつくんのめんどくさい

これを
![こうして.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241926/5d71527a-f49c-45fb-6a99-bf6b848de56a.png "これを")
こうして
![日付を.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241926/632d7f5a-b1c6-fbd9-eea4-b3d4d38d6a53.png "こうして")
こうすんのが
![いちいちコピーしてつくるのは.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241926/01ad3e26-8fe1-165d-f573-ef3f07408587.png "こう")

面倒くさい。

1ヵ月分とかでも面倒なのに、これが1年分とかってなってくるとカーソルドラッグしながら「何に時間かけてるんだろう自分」って気持ちになってきませんか。

#Dateをぐるぐる回してカレンダー配列からスプレッドシートにドバっと吐き出したい
###Dateを開始日から終了日までぐるぐる回して、二次元配列で格納していけばええんとちゃう
こういう二次元配列
`[[null, 3/1, 3/2, 3/3, 3/4, 3/5, 3/6][3/7, 3/8, 3/9, 3/10, 3/11, 3/12, 3/13]...]`

###今回は日曜始まりのカレンダーをぐるぐる回して生成します。
実装コードは下記の通り。

```javascript:カレンダー生成.gs
/**
* 定数系
*/
//カレンダー生成の開始日付用（スプレッドシートのセルから取得するように変えるといい）
var targetYear = 2021;
var targetMonth = 1;
var targetDate = 1;

// 今回、1週ごとに下に空白行をいれたいので、何行空行を生成するかの変数
var brCount = 2;

// Dateオブジェクト生成 new Data(年、月、日、時間、分、秒);
// 月に関してはインデックスが0スタートなので、-1しています
var countUpDate = new Date(targetYear, targetMonth - 1, targetDate, 0, 0, 0); //開始日付からの加算用
var endDate = new Date(targetYear, targetMonth - 1, targetDate, 0, 0, 0); //終了日付

// 今回は1年分出力しようと思うので、終了日付のYearを+1します。
endDate.setFullYear(endDate.getFullYear() + 1);

var monChkCd = countUpDate.getMonth(); // 月変わり判定用の変数

var w = 0; // 1行あたり列数カウント用
// 開始列を設定したいので開始日の曜日を取得
//(月曜スタートの場合は開始日付の列-1からスタートするといいです)
w = countUpDate.getDay();

var r = 0; // 行数カウント用
var calArr = []; // カレンダー配列
calArr[r] = []; // 1行分の配列を初期化

/**
* メイン処理
*/
while(countUpDate.getTime() < endDate.getTime()) {
	// カレンダー配列に日付を格納
	calArr[r][w] = Utilities.formatDate(countUpDate, 'JST', 'yyyy/MM/dd');
	countUpDate.setDate(countUpDate.getDate() + 1); // 日付加算
	w++; // 列数加算

	if(w > 6) {
		// 1週間分セットしたら改行
		w = 0; // 列数を初期化
		r++; // 行数を加算
		calArr[r] = []; // 次の行を格納するために配列初期化
		for (var j = 1; j <= brCount; j++) {
			//空行追加処理
			calArr[r] = [null,null,null,null,null,null,null]; // 空行埋める用
			r++;
			calArr[r] = [];
		}
	}

	if (countUpDate.getMonth() > monChkCd || (countUpDate.getMonth() === 0 && monChkCd === 11)) {
		// 月が変わった OR 年を越したら改行
		monChkCd = countUpDate.getMonth();
		if (w != 0) {
			// 行内が詰まっていない場合は残り列を詰める処理
			for (var j = w; j <= 6; j++) {
				calArr[r][j] = null; // null埋め
			}
		} else {
			calArr[r] = [null,null,null,null,null,null,null];
		}
		r++;
		calArr[r] = [];
	}
}

//終了日付まで処理したら処理を終了し、残り列のnull埋め処理
for (var j = w; j <= 6; j++) {
	calArr[r][j] = null; // null埋め
}
```

もうちょっとサクッとやる方法もあるかも…？　と思いながらまずは愚直にぐるぐる回してみました。
あとは

```javascript

SpreadsheetApp.getActiveSheet().getRange(2, 1, r + 1, 7)
    .setValues(calArr)
    .setHorizontalAlignment('center') //中央揃え
    .setVerticalAlignment('middle')
    .setNumberFormat('MM/dd');
```

って感じで配列をシートに出力してあげればOK。

###曜日ごとの色処理について
曜日ごとに色付けする処理も考えたんですが、その日が祝日か判定して色を付けたりする処理を考えたときに一回一回セルにアクセスする必要が出そうだなぁと思ったので、いったん保留にしました。
（セルへのアクセス回数が増えると処理も遅く重くなるので……）
あ、でも祝日マスタ作って条件付き書式とかで処理できるようにしたらいけるか……？

後日ちょっと追加で考えてみます。
プログラマーが筋トレする意味


みなさん、こんばんは

【[watnowテックカレンダー](https://www.notion.so/watnow-TechCalendar-f65431b2ef1f4818a9372f7ea5626e42)の12日目】
今日は[watnow](http://www.watnow.jp/)のおかだが担当します
よろしくお願いします


##はじめに

みなさん筋トレしてますかーー??

ー>>私はしてます.

そして筋トレすることでいろんな良いことや辛いことが解消されたと実感しております.

そしてエンジニアこ筋トレするメリットを最大限に享受できると自信を持って言えます!

今回は私が約一年続けている筋トレについてプログラマー視点で見たメリット・デメリットについてお話していきたいと思います!!

##エンジニアが抱える問題点

まずひとつめ!
**①肩こり!!**
これはエンジニアだけでなく様々な職業の人が抱える問題点と言えます!
筋トレすれば解消されると言っても過言ではないでしょう.

2つ目に...
**②病む**
メンタル的な辛さもありますよね..
個人開発をしていて詰まって一日終わってしまった時などは結構病みました..

3つ目!
**③人間関係**
上司や先輩,同僚に怒られたり詰められたり...

##そこで筋トレすべき理由

筋トレすべき理由を説明したいと思います.

まず上で述べた問題点は筋トレで解決します

**①肩こり**
肩周りや僧帽筋,背中,腰,脊柱等を鍛えることにより姿勢が良くなり,また周辺の血流も良くなるので肩こりの解消に役に立ちます.
昔は肩が結構こって集中できないこともありましたが,今では肩こりとは何??ってレベルで肩こりとはお別れしました.

**②病む**
これはプログラマーならあるあるだと思います.
人はつらさAとつらさBがある時より辛い方に意識が傾きます.
コード書いてる時の辛さと筋トレの辛さを比べたときに筋トレは命に関わる!!て脳が感じ,一般的には筋トレのほうが辛く感じます.よって

コード詰まってる辛さ<<<<<<筋トレの辛さ

と脳内でアップデートされ頭が筋肉でいっぱいになります.
でも筋トレの辛さは一瞬なので終わった後にはスッキリしてると言うわけです!

**③人間関係**
筋トレをすることによって"俺本気出したら一発でKOできるぜ!!"状態になるので心にゆとりができ,
またなんか言ってるわこの人くらいな感じで聞き流せます.
(本気のアドバイスは真摯に受け入れましょう)

##エンジニアとトレーニーの共通点

(筋トレしている人のことをトレーニーと巷では言います)

上では問題点を解消するための筋トレをする意義について話しました.

ここからはプログラマー人生を豊かにする筋トレする意義について話します.

**筋トレとサービス開発はすごく似ているからです.**

理由は
**筋トレはPDCAの連続であるからです.**

PDCAとは
**P**...Plan(計画)
**D**...Do(実行)
**C**...Check(評価)
**A**...Action(改善)

筋トレしている人ってぱっと見脳筋な人が多いのかなと思いますが実際に筋トレで成果を出している人はすごく考えて筋トレを行っています.

**plan**では筋トレするスケジュール,どの部位をいつどんなメニューでやるかなど計画を建てます.食事するタイミングなども考えます.

**Do**では実際に筋トレを実践します.

**check**ではフォームの改善やメニューの取り入れ方の見直し,食事睡眠の時間やバランスが良かったのかなど改善点を探します

**Action**ではcheckの段階で見えたエラーを改善する方法について考えた後実行します.

このような流れを実行する必要があり,ひたすらPDCAを回すことで身体を成長させていきます.

これらはサービス開発に通ずるものであるといえるでしょう.

##おわりに

今回の記事を読んで筋トレを始めるきっかけになれば幸いです.
筋トレしていろんな悩みをふっとばしましょう!!!

watnowでは、チャレンジ精神旺盛な仲間を募集しています
興味を持たれた方はぜひ[@watnows](https://twitter.com/watnows)にDMしてください
Docker/React初心者が半日で構築するReact環境(1週間だけ頑張る Day3of9)

# はじめに
1週間N(E)ETになった社会人の学習記録です。
前回作ったFastAPIに対して、CRUDする予定だったのですが、まずは、Reactの環境をDocker上に構築しました。


https://qiita.com/tagawa0525/items/8fe2245fc85cdc7979dc

# 参考ページ
Google先生の教えの中から分かりやすそうな記事を参考にする。

https://zenn.dev/mochiblock/articles/3af073ff13c6e2

## 1. Dockerfile 作成
参考ページはディレクトリ作っているぐらいだったので、不要と判断。

## 2. docker-compose.yml 作成
できるだけデフォルトに寄せて設定項目を減らした。

```yml:docker-compse.yml
version: "3"

services:
# 略
  # React
  web:
    container_name: "web"
    image: node:15.14.0-buster-slim
    ports:
      - 3000:3000
    environment:
      LANG: ja_JP.UTF-8
      TZ: Asia/Tokyo
      NODE_ENV: deveropment
    volumes:
      - type: bind
        source: /mnt/c/Users/Public/GitHub/prac/docker/python_fastapi/web/app
        target: /app
    command: sh -c "cd /app && yarn start"
```

|設定項目    |備考|
|-----------|----|
|サービス名  |参考資料[^1]のTips|
|image      |nodeのデフォルトはdebian系だったから|
|ports      |Reactのデフォルトは3000っぽい|
|environment|下表参照|
|volumes    |お好み設定|
|command    |

|環境変数名  |設定値      |備考|
|-----------|------------|----|
|LANG       |ja_JP.UTF-8 |日本語[^2]|
|TZ         |Asia/Tokyo  |日本時間[^2]|
|NODE_ENV   |deveropment  |Docker使うならproductionでいいかなと思ったが、「To create a production build, use yarn build.」とでるのでdeveropmentにした。[^2] [^3] [^4]|

[^1]: https://zenn.dev/mochiblock/articles/3af073ff13c6e2
[^2]: https://qiita.com/daikideal/items/ac36987dca0fa742e193
[^3]: https://qiita.com/hasehiro0828/items/f4275c9a2175864c82e4
[^4]: https://qiita.com/habi16/items/497abe1f80228a2b4ff9

## 3./4./8. appフォルダの作成とReactの起動
参考資料のまま、以下のコマンドをWSLのUbutuで実行。
結構時間がかかるけど、/appフォルダ内にReact本体が作成される。
localhost:3000にアクセスすると、Reactのロゴがぐるぐる回る。

```sh
docker-compose build
docker-compose run --rm web npx create-react-app app --template typescript
docker-compose up
```

## 5./6./7. 多分不要
### 5. appフォルダ内の移し替え
Dockerfile内でWORKDIRを設定していないため、PWDは/(root)のまま。
/にて「npx create-react-app app --template typescript」を実行すると、
/app 内にReact本体が展開されたので、本手順は不要だった。

### 6. .gitignoreの編集
/app/node_modulesはgitなどで別途管理する必要があると思う。
この本体部分が/usr/local以下とかの全体にインストールされるようなら、そういうDockerイメージを公式が出してほしい。
Dockerhubに無い時点で今回の手順を参考にした。

### 7. portの変更
デフォルトの3000番を使うので変更不要。

## 所感
鶏と卵問題のせいで、一番最初はbuildとrunとupを別にするのはだるい（まあ、DockerのCLIを立ち上げて中で打つよりは幾分マシだが）。
同じ問題はRailsの構築[^5] [^6] でも見て取れるので、仕方ないような気がする。（Railsの開発時はRails createコマンドとかはコンテナ側で実行するのかホスト側で実行するのか気になる。）
コンテナの再立ち上げの際に数分待たされるほど遅いような気がする。（production版にすれば多少マシになるのかな？）
Reactのロゴが原子核っぽいのとReactorが原子炉ってことを考えると、開発陣に原子核物理の人でもいるのかな。

[^5]: https://qiita.com/kodai_0122/items/795438d738386c2c1966
[^6]: https://qiita.com/chisaki0606/items/a4b42af5c4735c94057a


## 免責事項（言い訳）
上記の記載は初心者の試行錯誤なので、あてにしないように!!!
シーケンス図とかアクティビティ図とか

シーケンス図やアクティビティ図というものを全く知らず、先輩方が作成していたので書き方を調べてみました。

[キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819)で勉強させていただいております。

## UML(Unified modeling Language)

シーケンス図やアクティビティ図というものは何故必要なのでしょうか？
オブジェクト指向プログラミングにおいて、その設計を分かりやすく可視化したものがあった方がスムーズに共有ができるからです。
確かに、共有することの難しさを毎日感じているのでシーケンス図を見たときに「分かりやすいな〜」と思いました。

このような記法を統一したものをUMLというそうです。

UMLは以下の13種類があります。

| 名前            | 説明                                                                |
|:--------------:|:--------------------------------------------------------------------|
| クラス図         | クラスの定義、関連付けなどのクラス構造をあらわす                               |
| オブジェクト図     | インスタンス(オブジェクト)の具体的な関係をあらわす                              |
| パッケージ図      | クラスなどがどのようにグループ分けされているかをあらわす                          |
| コンポーネント図   | 処理を構成する複数のクラスを1つのコンポーネントとみなし、その内部構造と相互関係をあらわす |
| 複合構造図       | 複数クラスを内包するクラスやコンポーネントの内部構造をあらわす                     |
| 配置図          | システムを構成する物理的な構造をあらわす                                     |
| ユースケース図    | 利用者や外部システムからの要求に対してシステムがどのような振る舞いをするかをあらわす    |
| アクティビティ図    | システム実行時における一連の処理の流れや状態遷移をあらわす。フローチャート           |
| 状態マシン図      | イベントによって起こるオブジェクトの状態遷移をあらわす                            |
| シーケンス図      | オブジェクト間のやりとりを時系列にそってあらわす                                 |
| コミュニケーション図 | オブジェクト間の関連とそこで行われるメッセージのやりとりをあらわす                    |
| 相互作用概要図    | ユースケース図やシーケンス図を構成要素としてより大枠の処理の流れをあらわす          |
| タイミング図       | オブジェクトの状態遷移を時系列であらわす                                     |


全部を使うのが正解というわけではなく、そのプロジェクトに応じて使うものとのこと。
今回は今現場で見させていただいているアクティビティ図とシーケンス図の書き方を調べてみました。

## アクティビティ図

アクティビティ図は`システム実行時における一連の処理の流れや状態遷移をあらわす。フローチャートのようなもの`です。

![スクリーンショット 2021-04-12 22.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/b6160cc7-ee21-d383-5879-2fd0e40a5a7b.png)

めっちゃくちゃ簡単な図ですが、

- 黒丸：スタート
- 枠のある黒丸：終了
- 角の丸い四角：アクション
- ひし形：分岐点

これで表します！


## シーケンス図

シーケンス図は`オブジェクト間のやりとりを時系列にそってあらわすもの`です。

![スクリーンショット 2021-04-12 23.11.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/931657d7-27e9-6fca-caa4-40cf08e53e7b.png)

オブジェクトごとに上から下に時系列になっています。
矢印は形の違いで意味があるんですね！

ツールとして一番有名なのは

[drawio](https://app.diagrams.net/)でしょうか。
無料でここまでできるのはすごいですね！

私は[Miro](https://miro.com/app/dashboard/)というアプリを元々使っていたのでこちらでも使えないか試しています！

以上です！
Jetson nanoにWiFiをつける

Jetson Xavier NXにはWiFiがついていますが、Jetson nanoにはついていません。
動き回るロボットやドローンにJetson nanoを搭載するためにはWiFiが必須…そう思っていたところに近場の某家電量販店が閉店セールで割引きということで、一番安いUSB WiFiアダプタを買ってきました。

ELECOM WDC-150SU2MBK ￥880

ubuntuで使えるという情報は購入時点で得られてませんでしたが、割引きで800円なら、まぁ許容範囲ということで。到達距離が少々不安ですが…

早速Jetson nanoに挿してみます。
認識されたかどうかdmesgで確認。

```command:command
$ dmesg
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641874/8aea203f-fc6e-608d-f46c-799df5f79c9e.png)

何もせずに認識されています。
WiFi設定はGUIからできました。

System Settings →　Nework →　Wireless　→　ON　→　(アクセスポイント選択、key入力など）→ save

一応ifconfigで確認してwlan0:にIPアドレスなどが表示されているのを確認。
到達距離は狭い木造住宅の１階～２階ではアンテナ１本、ちょっと心もとない感じですが、小さいので、こんなものでしょう。

結果、ホントに挿すだけ！
Qiita記事的には価値がなくなりましたが、簡単！素晴らしい！
UnityのInspectorで配列長を追加するとなんか適当に詰め込まれるのをどうにかする

そこそこ腹が立ったので書きました。
`Unity`のバージョンは`2019.4.13`です。

## Inspectorにて

```C#
// なんの変哲もないGameObjectの配列
[SerializeField]
private GameObject[] _gameObjects = default;
```

こんな感じで宣言した配列に対してInspectorから長さを追加すると、**最後のフィールドをそのまま複製して詰め込む暴挙**に出ます。

![output-palette.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146245/ae57a944-9d47-e95b-354f-f00b69a3fc35.gif)

## 対処

しょうがないので`Inspector`の変更によってキックされる[OnValidate](https://docs.unity3d.com/ScriptReference/MonoBehaviour.OnValidate.html)で面倒を見てやります。[^ToArray]

```c#:OnValidate
private void OnValidate()
{
    // Inspectorに入力された長さを覚えておく
    var beforeLength = _gameObjects.Length;

    // nullと重複を除く
    _gameObjects = _gameObjects
        .Where(o => o != null)
        .Distinct()
        .ToArray();

    // (入力された長さ) - (現在の長さ)
    // で足りない長さを調べる
    var length = beforeLength - _gameObjects.Length;
    if (length > 0)
    {
        // 不足がある場合は,足りない長さの空の配列を作ってConcatで追加
        _gameObjects = _gameObjects
            .Concat(Enumerable.Repeat<GameObject>(null, length))
            .ToArray();
    }
}
```

![output-palette2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146245/4cb8ce50-a03d-bc28-76cb-f7b343343ef4.gif)

## まとめ

**いいから`default`[^default]ブチこめ**:rage:

おしまい。


[^ToArray]: 毎回`ToArray()`で確定しているのは`IEnumerable`な変数をわざわざ用意するのがめんどいのと、以前遅延評価絡みでなんかよくわかんない目にあったからです

[^default]: `null`だと`Primitive`に対応できないので。しかし、この挙動って破壊と混乱を招くだけの気がするのですが、嬉しい人いるんでしょうか……？
(Ubuntu)Ruby on Rails6 環境構築のやり方【自分用メモ】

#はじめに
本記事はRuby on Rails を gem install rails コマンドを使わない方法で環境構築を行っていくものです。
また、本記事は自分用メモとして記述しています。ご容赦下さい。
#開発環境
Ubuntu 20.04.2
#コンパイラおよび必要なツールのインストール
```  shell:コンパイラおよび必要なツールをインストール
# パッケージ一覧を更新 (リポジトリ追加・削除時には必ず実行すること)
$ sudo apt update -y

# パッケージを更新 (通常のパッケージ更新時はこのコマンドを仕様する)
$ sudo apt upgrade -y

# 開発に必須のビルドツールを提供しているパッケージ
$ sudo apt install build-essential
$ sudo apt install -y libssl-dev libreadline-dev zlib1g-dev
```
#データベース管理システムのインストール
``` shell:データベース管理システム
# SQLite3を利用する場合にインストールするコマンド
$ sudo apt install libsqlite3-dev

# MySQLを利用する場合にインストールするコマンド
$ sudo apt-get install libmysqlclient-dev

# PostgreSQLを利用する場合にインストールするコマンド
$ sudo apt-get install Postgresql-common
$ sudo apt-get install libpq-dev
```
#Rubyをインストール
```shell:Ruby

# rbenv (パッケージ管理ツール) のインストール
$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

# 環境変数にPathを設定する
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc

#シェルを再起動
$ exec $SHELL -l

#ruby-buildをインストール
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

#Rubyをインストール(Rails6を動かすには、Ruby Version 2.5以上が必要)
$ rbenv install 2.6.2
$ rbenv global 2.6.2

#Rubyのバージョンを確認
$ ruby -v
#ruby 2.6.2　になっていることを確認
```
#Node.jsをインストール
```shell:Node.js
# node.jsとnpmをインストール
$ sudo apt install -y nodejs npm

#n packageをインストール
$ sudo npm install n -g

#n packageを使ってnodeをインストール
$ sudo n stable

# 最初に入れた古いnode.js, npmを削除
$ sudo apt purge -y nodejs npm

#シェルを再起動
$ exec $SHELL -l

# yarn packageをインストール
$ sudo npm install yarn -g

# node.jsのバージョンが最新か確認
$ node -v
```

#Railsのセットアップ
``` shell:セットアップ
# プロジェクトのディレクトリを作成
$ mkdir example_folder

# 作成したディレクトリに移動する
$ cd example_folder

# bundle init を実行してGemfileを作成
$ bundle init

# Gemfileを開き【# gem 'rails'】の部分をコメントアウトする
$ nano Gemfile

# rails をインストールするために bundle install
$ bundle install --path vendor/bundle

# rails new コマンドを実行して、rails に関する gem をまとめてインストールする
$ bundle exec rails new .
```

#サーバーを起動する
``` shell:起動
# サーバーを起動するコマンド
$ bundle exec rails s
```

#終わりに
プログラムの勉強をサボらないようにするために、Qiitaの投稿を１週間に1回投稿できたら良いな〜と思いました。
#参考資料
[aptコマンドチートシート](https://qiita.com/SUZUKI_Masaya/items/1fd9489e631c78e5b007)
[Rubyのインストール方法(Ubuntu編)](https://qiita.com/idaida_idaida/items/66db61b78c42a8521c3b)
[Ubuntuに最新のNode.jsを難なくインストールする](https://qiita.com/seibe/items/36cef7df85fe2cefa3ea)
IPアドレスとドメイン

# IPアドレス
**IPアドレス**はインターネットに接続された機器を特定し、データの行き先を管理するための標識番号である。この番号は一意のものであり、現在は32ビットの数字で表現されるIPv4が主に使われている。
## グローバルIPアドレスとプライベートIPアドレス
IPアドレスは用途と場所によって、２つに分けられる。

| IPアドレスの分類    | 利用用途                | 管理             | 説明                                                           |
| ------------ | ------------------- | -------------- | ------------------------------------------------------------ |
| グローバルIPアドレス  | インターネット通信に利用        | ICANNおよびその下部組織 | ネット上で一意である必要があるため、自由に変更できない（電話でいう外線）                         |
| プライベートIPアドレス | 自宅や会社内などLAN内での通信に利用 | 個人や会社          | 同一LAN内で同じIPアドレスは使えず、インターネット接続のためにルーター等でグローバルIPアドレスに変換する必要がある（電話でいう内線） |

## ポート番号
IPアドレスは接続したいコンピュータを指定できるが、提供するサービス（メールやWebサービスなど）までは指定できない。そのため**ポート番号**でコンピュータ内のサービスを識別している。コンピュータがマンションだとするとIPアドレスは住所、ポート番号は部屋番号のようなものである。
Webサーバー（HTTP）は８０番、といったようにポート番号でサービスを識別できる。

| ポート番号の範囲    | ポートの分類    | 説明                   |
| ----------- | --------- | -------------------- |
| ０〜１０２３      | ウェルノウンポート | 一般的なサーバーソフトウェアで使用    |
| １０２４〜４９１５１  | レジスタードポート | メーカー独自のサーバーソフトウェアで使用 |
| ４９１５２〜６５５３５ | ダイナミックポート | クライアント側で自由に使用        |

# URL
「`http://example.com/***`」というような文字列を**URL(Uniform Resource Locator)**と呼ぶ。
URLはWebサイトだけでなく、インターネットやLANなどのネットワーク上にあるデータやファイルの場所と、それらの取得方法を指定するために利用される。

## URL構文
![17D7EBA6-4F08-41C8-B5F5-F1A2F839F841_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999125/c7ccdbe6-ff6b-ace4-5418-1013b52d9e39.jpeg)


1. スキーム名
   プロトコルの指定。たいていはプロトコル名と同じ。
2. ホスト名（ドメイン名）
   接続先のサーバーの指定。IPアドレスでの指定も可能。
3. ポート番号
   接続先のサーバーのポート番号を指定。通常、指定せず省略される。省略した場合、下表のポート番号が適用される。
4. パス名
   接続先のサーバー上のディレクトリやファイルを指定。

### 主なスキーム名

| スキーム名 | 意味                |
| ----- | ----------------- |
| http  | Webサイト閲覧時に利用      |
| https | httpを暗号化（SSL）したもの |
| ftp   | ファイル転送で利用         |

### 省略時に使われるポート番号

| プロトコル | ポート番号           |
| ----- | --------------- |
| http  | ８０              |
| https | ４４３             |
| ftp   | ２０（転送用）、２１（制御用） |

# ドメイン
IPアドレスは数字で表記されるため、我々には覚えづらい。そのため、別名として**ドメイン**が利用される。
ドメインはIPアドレス同様、一意である。
## ドメイン名とホスト名、FQDN
ドメイン名とホスト名は同一視されるが、厳密には、ドメイン名は「ネットワークを特定するための文字列」、ホスト名は「ネットワーク上のコンピュータにつける識別用の文字列」である。両者をつなげたものをFQDN（Fully Qualified Domain Name：完全修飾ドメイン名）といい、これでネットワーク上のコンピュータを特定できる。
# 参考
[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/gp/product/B06XNMMC9S/ref=ppx_yo_dt_b_d_asin_title_o05?ie=UTF8&psc=1)
【node.js】画像をfetchしてきてtwitterで投稿する

node-fetchやtwitterモジュールの説明は割愛して、ハマったポイントのみ。

# 結論

こんな感じでうまくいった。

```javascript
const twitter = require("twitter")
const fetch = require("node-fetch")

class FetchImgAndTweet{
    static async tweet(text, url, tokenKey, tokenSecret) {
        const client = new twitter({
            consumer_key: "XXX",
            consumer_secret: "XXX",
            access_token_key: tokenKey,
            access_token_secret: tokenSecret,
        })

        const imgData = await FetchImgAndTweet.fetchImg(url)
        const imgId = await FetchImgAndTweet.uploadImg(client, imgData)
        await FetchImgAndTweet.update(client, text, imgId)
    }

    static async fetchImg(url) {
        const res = await fetch(url) //画像が返ってくる
        if (!res.ok) throw new Error("画像が正常に取得できませんでした")
        const blob = await res.arrayBuffer()
        return Buffer.from(blob)
    }

    static async uploadImg(client, img) {
        const media = await client.post("media/upload", { media: img })
        return media.media_id_string
    }

    static async update(client, text, imgId) {
        const status = { status: text, media_ids: imgId }
        const res = await client.post("statuses/update", status)
        return true
    }
}
```

# はまりポイント
画像のデータ形式がblobやarrayBufferだとうまくいかない。fetchしてきた画像を`res.arrayBuffer()`でarrayBufferに変換し、更に`Buffer.from()`でBufferに変換する。これをしないとtwitterモジュールくんがヘソを曲げて大変だった。
UbuntuのNvidia X Server Settingsで更新内容がリセットされるアレ

以前にもどっかに書いたきがするけど再度
タイトル通り自分の場合は３枚のディスプレイの配置の順番が毎回リセットされるパターン。

まぁこういうのは結果論だけ。

***このGUIツールはは起動後、/etc/X11/xorg.confを読み込む前に/etc/X11/xorg.conf.nvidia-xconfig-originalで上書きする。***

とりあえずそんなそんなにいじるものでもないので以下の方法で対処している。



必要な人はまず上書きする方のファイルをバックアップしておく。

```sh
# cp /etc/X11/xorg.conf.nvidia-xconfig-original /etc/x11/xorg.conf.nvidia-xconfig-original.bk
```

rootで起動

```sh
$ sudo nvidia-settings
```

毎度ツールでごにょった後保存時の「Save to X Configuration File」で
**/etc/X11/xorg.conf** を **/etc/X11/xorg.conf.nvidia-xconfig-original** としてオリジナルを上書き保存する


なにしろね。長い。ファイル名。
Javascript 備忘録5<関数>

■クラス定義

```js
// ES6以降の書き方
class Person {
// コンストラクタ
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
// メソッドの定義
    hello() {
        console.log('こんにちは');
    }
}

// インスタンス化
// JSではオブジェクトとなることに注意
const me = new Person('Mike', 23);
```

■クラス継承
→上で定義したPersonクラスを継承して、newManクラスを作成する

```js
class newMan extends Person {
    constructor(name, age, gender) {
        // superによりPersonのクラスを継承する
        // 親のメソッドを先に初期化しないとエラーになる
        super(name, age);
        this.gender = gender;
    }
    hello() {
        console.log('こんにちは');
    }
    // newManクラス特有のメソッドを定義する
    bye() {
        console.log('さようなら');
    }
}
```
Githubでローカルとレポジトリの連携がうまくいかない？！！(忘備録)

これは主に自分用忘備録です．人に説明するには雑すぎるので運良く(？)たどり着いてしまった人はよく読んで解決をしてください．
気が向いたらハードコピー使って説明します…

Gitさん，便利なんだけど初期設定ミスるとどこが間違えたかわかんなくなるんですよねえ

ここ最近Githubさん自動的にREADMEを作ってくれるのでその便利機能に乗っかってレポジトリ作るんですね

そのレポジトリとローカルの接続なんですけど，真っ先に```git clone "レポジトリURL"```をしてあげると連携があっさりうまく行きます．

```git init```してしまうとバージョンが古いのか，```commit```しようとしても「```main```ブランチなんて存在しないで」と怒られる始末．
```master```ブランチが勝手に作られる割と悲しいことになるので是非注意すべし
Djangoをcloudrunにデプロイするとき、開発と本番でDBを分ける方法

## はじめに
DjangoでDBを使用するとき、settings.pyにDBの情報を書くと思うんですが、本番と開発で分けるときに少しハマったので備忘録として書いておきます。
今回はGoogleのcloudrunでデプロイしました。

## 前提条件
・GCPでアカウントを作成している
・cloudsqlでインスタンスとDBを作成している
・cloudmigrate.yamlを作成している

## settings.pyを分割する
元々settings.pyがあるディレクトリにsettingsというフォルダを作成します。
作成したら、settings.pyをsettingsに移動します。
settings.pyの名前をbase.pyに変更し、別で＿init＿.py、local.py、production.pyをsettingsの中に作成します。
以下のようになっていればOKです。

```
settings/
    __init__.py
    base.py
    local.py
    production.py
```

## local.pyとproduction.pyを編集する
base.pyに書いてあるDBの情報を消して、開発のDBと本番（cloudsql）のDBの情報をlocal.pyとproduction.pyにそれぞれ追記します。また、はじめにbase.pyの情報をimportしておきます。

```local.py
from .base import *

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql'
        'NAME': 'DB_NAME'
        'USER': 'root'
        'PASSWORD': 'password'
        'HOST': 'localhost'
        'PORT': '3306'
    }
}
```
```production.py
from .base import *

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql'
        'NAME': 'DB_NAME'
        'USER': 'USER_NAME'
        'PASSWORD': 'password'
        'HOST': 'cloudsql/~'
    }
}
```

## base.pyを編集する
こちらのファイルではDBの情報を削除します。
またcloudrunにデプロイするときに使うimageをbuildするときにcollectstaticをする必要があるのですが、settingsにファイルを分割したことでディレクトリ構造が変わったため、base.pyの記述を少し変えます。

```base.py
from .base import *

STATIC_URL = '/static/'
STATICFILES_DIRS = {
    os.path.join(BASE_DIR, '../static'), #..を追加
}

STATIC_ROOT = os.path.join(BASE_DIR, '../staticfiles') #..を追加
```

##他にも少し修正する

```wsgi.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.production') #productionを追加
```
```manage.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.production')#productionを追加
```
manage.pyをproductionしているので、ローカルサーバを立ち上げるときは以下のコマンドを入力します。

```
% python manage.py runserver --settings config.settings.local
```

## おわりに
本番用にbuildするときは、通常通り以下のようにすれば大丈夫だと思います。

```
% gcloud builds submit --config cloudmigrate.yaml
   --substitutions _INSTANCE_NAME=~~~, _REGION=~~~
```

他にも本番と開発のsettingsファイルで分割できるところはあると思いますが、今回はDB中心に書きました。
参考になれば幸いです。
laravel/homesteadでシンボリックリンクを方法

#はじめに
laravel/homesteadでシンボリックリンクをはり、画像を表示させようとしたところなかなか苦戦したので皆さんの助けになればと思い記事にしました。
#やりたいこと
ユーザー登録の際にアイコン画像を登録し、表示させたい
#環境
windows8
laravel homestead(vagrant + virtualbox)
laravel 6
#やり方
homestead環境下でシンボリックリンクを行うには普通ですとエラーになります。
解決方法としては管理者権限でコマンドプロンプトを開くことです。これでエラーにならずシンボリックリンクを実行することができます。vagrant内にアクセスし、

```
php artisan storage:link
```
を実行します。
シンボリックリンクとは何かというと、laravelの画像の保存先はディフォルトでstorage/app/publicディレクトリ直下に保存されるのですが、外部からアクセスして画像を表示させるには一番上の階層のpublicディレクトリ直下に画像がある必要があります。そこでstorage/app/publicディレクトリへのショートカットを一番上の階層のpublicディレクトリ直下に作りアクセス可能にするものがシンボリックリンクです。シンボリックリンクを張ることで画像を表示させることが可能になります。
#あとがき
初めてQiita投稿、またプログラミング初心者のためわかりずらいところもあるかもしれませんが、今後も投稿を続けたいと思います。頑張ります！
QNAP NAS TS-253Dを3D Printer Serverにしよう


### QNAP NAS TS-253Dを3D Printer Serverにしよう

NASを使えば3D プリンタをネットワークプリンタにできます。
PCに3Dプリンタを直接つなげる必要がなくなります。
複数台プリンタがある環境、複数台PCがある環境に有効です。
USBケーブルなんかをつなぎ替える必要がなくなります。

### 用意するもの

* QNAP NAS TS-252D
* USBケーブル (TS-252Dと3D Printerを直結）
* USBSerialdrivers_4.5.2_x86_64.qpkg
* SNAPのContainer Station のDocker
* Dockerコンテナyadomi/repetier-server
* Ultimaker Cura (スライサーソフト)

### QNAP NAS TS-252D

市販のNASです。
NASが3D Printer Serverになります。

### USBSerialdrivers_4.5.2_x86_64.qpkg

以下のページからこのqpkgファイルをdownloadします。
https://www.qnapclub.eu/fr/qpkg/803
QNAPのApp Centerからこのqpkgファイルをインストールします。
このパッケージに3D PrinterのUSBドライバーが入っています。
USBケーブルでTS-252Dと3D Printerを接続します。

正常に繋がったかどうかはsshでTS-252Dにアクセスし
ls /dev/ttyUSB0
で確認します。

### SNAPのContainer Station のDocker

以下のDockerコンテナをContainer Stationのcreate applicationボタンで追加します。
コンテナのYAMLは以下の通りです。

```
version: "3.8"
services:
    repetier:
        image: yadomi/repetier-server:latest
        volumes:
            - repetier-data:/data
        ports:
            - 3344:3344
        devices:
            - "/dev/ttyUSB0"

volumes:
    repetier-data:
```

USB機器を複数台つないだ場合は/dev/ttyUSB0ではないかもしれません。
URLで使用するポートは3344です。


```
lsusb
ls /dev
```

で要確認。

### クライアントPCから以下のページにアクセス

http://192.168.2.109:3344
初回は設定ページが開きます。
192.168.2.109はNASのIPアドレスです。

### プリンタを追加します。

設定のデバイスポートに
/dev/ttyUSB0
を指定します。
この/dev/ttyUSB0はlinuxのUSBドライバーが自動で割り当てます。
プリンタとの接続テストを実行すれば設定は終了です。

### テストプリント

スライサーソフトのUltimaker Curaを起動します。
適当に印刷データを用意しデータをスライスしGコードファイルを作成します。
http://192.168.2.109:3344を開いてプリンタのページに移動します。
Gコードファイルをプリンタのページでアップロードし印刷ボタンをクリックします。
あとは数時間待てば出来上がりです。

### 使用した３D printer

Anet A8を使いました。
他の機種でもなんとかなるはずです。
プリンターは火災事故なんかもあるので放置したまま寝ないほうがいいです。
特に中国製は。
https://www.thissmarthouse.net/dont-burn-your-house-down-3d-printing-a-cautionary-tale/
ヘッド部を200℃位に加熱してフィラメントを溶かします。
やけど事故もあります。

サーバーのページからプリンターのステータスを確認できます。
残り時間とどのあたりを造形中かリアルタイムでみれます。
repetier-serverは優秀です。

Anet A8はfake品がものすごい数出回ってて本物がどれかわからないくらいです。
安いのはほぼfakeです。
shellscriptの関数

shellscriptでfunctionを勉強したので、まとめます。
#参考記事
https://shellscript.sunone.me/function.html
#書式
```func.sh
function 関数名(){
 処理 
}

関数名(){
  処理
}
```

#local
関数の中で変数を扱う。

```local.sh
HELLO=aaa
hello(){
  local HELLO=hello
  echo $HELLO  #hello
}
echo $HELLO  #aaa
```
localを使うことで関数ないでのみ変数を保持する。

#戻り値
戻り値が存在しないので変数に格納するなどする。

```return.sh
function(){
  echo 'return value'
}

RTN=`function`
echo $RTN
```

###FUNCNAME変数
使う機会はあるかわからないけど```help function```に載っていたので一応メモ。
自身の関数の名前を格納している変数。

```func_name.sh
function_name(){
  echo $FUNCNAME  #function_name
}
```

###readonly
変数や関数をreadonly(上書きできないよう)にする。
####変数
```ro.sh
var=10
readonly var  # $はつけない
var=20
```
####関数
```func_ro.sh
hello(){
  echo 'first Hello'
}

readonly -f hello  #  fオプションを指定しないとそのまま上書きされる

hello(){
  echo 'second Hello'
}
```
これらを実行すると上書き不可能のエラーが出る。

**間違いがございましたら、ご指摘ください。**
App Storeリリース時に提出するスクショを作成する時に役立つサイト集

#はじめに
いつも、検索かけるのでQiitaにまとめます。完全自分用です。

#端末の画像の入手
[Marketing Resources and Identity Guidelines | Apple Developer](https://developer.apple.com/app-store/marketing/guidelines/#section-products)

#提出に必要なスクリーンショットの枚数とサイズの確認
[スクリーンショットの仕様 | App Store Connect ヘルプ](https://help.apple.com/app-store-connect/?lang=ja-jp#/devd274dd925)

#Simulatorのスクリーンショット方法

```
// ターミナルにて
xcrun simctl io booted screenshot --mask black <画像名>.<拡張子>
```
#スクリーンショット後の端末の角やノッチ部分の加工を行う
[bannerkoubou](https://www.bannerkoubou.com/photoeditor/transparent/)

#画像の背景を削除する
[画像の背景を削除 - remove.bg](https://www.remove.bg/ja)

#JPGに変換したり、PNGに変換したりなど
[iloveIMG | 画像編集用オンラインツール](https://www.iloveimg.com/ja)

#gif作る
[Video to animated GIF converter](https://ezgif.com/video-to-gif)

#おわりに
良かったら参考にして下さい。
Macにgnuplotをインストール


## 環境
- macOS Big Sur


# Homebrewのインストール

次のコマンドをターミナルで実行 

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

URL: [Homebrew](https://brew.sh/index_ja)

## Homebrewとは

Wikipediaに次のようにある.

> Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである

引用: [Wikipedia](https://ja.wikipedia.org/wiki/Homebrew_%28%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%29)

# gnuplotのインストール

ターミナルで次のコマンドをそれそれぞれ実行.(`$`はコピーしない.)

```bash
$ brew upgrade
$ brew install gnuplot
```

## gnuplotの起動
```bash
$ gnuplot
```

で起動.
![スクリーンショット 2021-04-12 21.44.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262857/d099345a-f4b3-bb90-34b3-3ad5c2a8d658.png)

gnuplotをインストールできた！
備忘録: よく忘れる事たち

#プレフィックス
feat: 新機能
fix: バグの修正
docs: ドキュメントのみの変更
style: コードの意味に影響しない変更（スペース、フォーマット、セミコロンの欠落など）
refactor: バグの修正や機能の追加ではないコード変更のこと。
pref: パフォーマンスを向上させるコードの変更
test: 不足しているテストの追加や既存のテストの修正
chore: ビルドプロセスの変更、ドキュメント生成などの補助ツールやライブラリの変更

#cat
```terminal
$ cat ファイル名
```
catコマンドはconcatenate(文字列連結)の略
指定したファイルの中身をterminal上で確認できる

短いオプション	長いオプション	意味
-n	--number	行番号を付け加える
-b	--number-nonblank	行番号を付け加える。ただし空白行には付けない
-s	--squeeze-blank	連続した空行を1行にする
-v	--show-nonprinting	TAB、改行、改ページ以外の非表示文字を表示する
-t	―	非表示文字を表示、TABを"^I"、用紙送りを"^L"とする
-E	--show-ends	行の最後に"$"を表示する
-A	--show-all	全ての非表示文字を表示する（-vETと同じ）
-e	―	TABを除く全ての非表示文字を表示する（-vEと同じ）

##参考文献
- [catコマンド](https://atmarkit.itmedia.co.jp/ait/articles/1602/25/news034.html)

#grep
```terminal
$ grep 検索正規表現 ファイル名
```
ファイル内の文字列を検索する場合

```terminal
$ grep a work/*
```
上記だとworkディレクトリ配下の'a'という文字列があるがファイル内に含まれているファイルを検索する

#正規表現
[基本的な正規表現](https://murashun.jp/article/programming/regular-expression.html)

[RegExp](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

##上記サイトに記載のない個人的によく使う正規表現
### /i フラグ
大文字小文字を区別せずにマッチうる

```
preg_match('/XYZ/', 'xYz') → false
#大文字小文字を区別するため、マッチしていないと判断されてfalseになる
preg_match('/XYZ/i', 'xYz') → true
```
iフラグを使うと大文字小文字を区別しないため、マッチしていると判断されてtrueになる


#MacのControlコマンド系
- control + F：1 文字分進みます。
- control + B：1 文字分戻ります。
- control + P：1 行上に移動します。
- control + N：1 行下に移動します。
- control + H：挿入ポイントの左側にある文字を削除します。
- control + D：挿入ポイントの右側にある文字を削除します。


#囲う囲われてる系をvimで操作
https://vimblog.hatenablog.com/entry/vim_plugin_surround_vim

#参考文献
[ファイル検索](https://qiita.com/pokari_dz/items/0f14a21e3ca3df025d21)
[検索力が高まる！Google検索の超便利テクニック・コツ32選](https://www.webhack.jp/archives/2606?amp=1)
[grepコマンドの詳細まとめました](https://eng-entrance.com/linux-command-grep)
gradleでpluginのversionを変数で指定はgradle.propertiesを使用

たとえば、以下のようにspring-bootのversionを外部から指定可能にしたい、とする。

```gradle
plugins {
  id 'org.springframework.boot' version "${springBootVersion}"
}
```

この場合は```gradle.properties```に定義する。

```properties:gradle.properties
springBootVersion=2.4.4
```

以下によると```5.6```以降で使えるらしい。

https://stackoverflow.com/questions/37555196/in-gradle-how-to-use-a-variable-for-a-plugin-version/37749402
[C#/C++] サービスを作るうえで便利なコマンド

# サービス関連記事

https://tera1707.com/entry/2022/02/06/144447#WindowsService

# やりたいこと

下記で、C++とC#で、Windowsのサービスを作成した。

C++
https://qiita.com/tera1707/items/8f4246a5666a01134b59

C#
https://qiita.com/tera1707/items/47335420a1a91e2eaa4a

サービスは、ビルドしてexeが出来上がっても、そのままVisualStdio2019でF5を押して実行、とかはできない。
いったんサービスとしてPCにインストールして、そのサービスを「開始」したうえで、VisualStudioから「アタッチ」しないといけない。

そのインストールなどなどをするときに、**scコマンド**を使うのだが、速攻で忘れてしまいそうなので、使いそうなコマンドを下記に全部まとめておきたい。

# 使えそうなコマンドを一個にまとめたbat



```使えそうなコマンドを全部まとめた.bat

@echo off

set SERVICENAME="SvcName"
set SERVICEDISPNAME=%SERVICENAME%
set BINPATH=C:\Users\username\Desktop\test\serviceJikken1\Debug\serviceJikken1.exe
set DISCRIPTION="Svc Description..."

rem サービスのプロセスを無理やり終了させる
taskkill /f /im %BINPATH%

rem サービスをアンインストール
sc delete %SERVICENAME%
pause

rem サービスをインストール
rem 試した限り、binPathにはフルパスを指定しないとうまくいかない
sc create %SERVICENAME% start=auto binPath= %BINPATH% DisplayName= %SERVICEDISPNAME%
pause

rem 説明文を編集
sc description %SERVICENAME% %DISCRIPTION%
pause

rem サービスをスタート
rem sc start %SERVICENAME%
net start %SERVICENAME%
pause

rem サービスをストップ
sc stop %SERVICENAME%
pause

```

# コードをビルドしなおして、そいつでサービスを作り直してサービススタート

サービスを作っている最中に、コードをちょっと直したときに、いったんサービスをstopして、ビルドしなおして、サービス作り直して再度スタートさせて、、、とやっていると非常にめんどくさいので、下記のようなbatを作って簡単にビルド→サービス再起動までできるようにしておけば便利かもしれない。


```ビルドしなおして再スタート.bat

@echo off

set SOLUTIONPATH="C:\Users\username\Desktop\test\serviceJikken1\serviceJikken1.sln"

set SERVICENAME="SvcName"
set SERVICEDISPNAME=%SERVICENAME%
set BINPATH=C:\Users\username\Desktop\test\serviceJikken1\Debug\serviceJikken1.exe
set DISCRIPTION="Svc Description..."

call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\Tools\VsDevCmd.bat"

echo -サービスのプロセスを無理やり終了させる
taskkill /f /im %BINPATH%

echo -サービスをアンインストール
sc delete %SERVICENAME%

echo -ソリューションをリビルドする
MSBuild %SOLUTIONPATH% /t:clean;rebuild /p:Configuration=Debug;Platform="x86" > nul
if %ERRORLEVEL% neq 0 (
    echo ErrorLevel:%ERRORLEVEL%
    echo ビルド失敗
    pause
    exit
)

echo -サービスをインストール
rem 試した限り、binPathにはフルパスを指定しないとうまくいかない
sc create %SERVICENAME% start=auto binPath= %BINPATH% DisplayName= %SERVICEDISPNAME%

echo -説明文を編集
sc description %SERVICENAME% %DISCRIPTION%

echo -サービスをスタート
rem sc start %SERVICENAME%
net start %SERVICENAME%
pause

```


# プロセス名からサービス名を調べる

コマンドではないが、下記のようにすると、プロセス名だけわかっているときに、そのプロセスが何のサービスとして動いているかを調べることができる。

例：私のPCで動いている「MicronCacheMonitor.exe」は何のサービスか調べる

タスクマネージャーを開いて、「詳細」タブで、そのプロセス名を見つける。

そいつを右クリックして、「サービスの表示」を押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/83977f0d-1096-0e4f-261b-548e24f4019e.png)

そうすると、同じタスクマネージャーの「サービス」タブで、そのサービスの名前が表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/dced6707-a19b-6519-f5d1-566110c3ff6b.png)

scコマンドに渡すサービス名は、ここに出てるサービス名を指定してやればOK。

もしサービスの「表示名」が知りたければ、`sc GetDisplayName サービス名` で取れる。

コマンド

```
sc GetDisplayName MicronCacheMonitor
```

結果

```
C:\Users\masa>sc GetDisplayName MicronCacheMonitor
[SC] GetServiceDisplayName SUCCESS
名前 = Micron SSD Cache Monitor
```



# 参考

scコマンド

https://windows.command-ref.com/cmd-sc.html
【React Hooks】ライフサイクルについて

# 概要
　reactのライフサイクルを扱うフック`useEffect`について学んだことを共有する。


# ライフサイクルとは
　ライフサイクルとはコンポーネントの処理の流れを表しています。コンポーネントがいきなり画面に表示されるのではなく、constructorをコールして、render()をコールしてなど、手順を踏んでユーザーの画面に情報を描画されます。この処理の流れのことを**ライフサイクル**と呼びます。


# 3つのライフサイクル
　Reactのclassで設定できるライフサイクルは大きく分けて3つの処理があります。

- componetDidMount
- componentDidUpdate
- componentWillUnmount

です。それぞれ処理される順番を図にまとめると以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717054/06ee18e2-dad5-9ba5-11bb-040077d2b5d9.png)


- commponentDidMount
    - 一番始めのレンダーされた直後に一度だけコールされるメソッドです。
    - イベントリスナーの設定、API通信の記述などをする。

- componentDidUpdate
    - コンポーネントが表示された後、ユーザーによる操作（クリック、スクロールなど）によって、再レンダーされた直後にコールされるメソッドです。
    - ユーザーが操作し、再レンダーするたびにコールされる。

- componentWillUnmount
    - 画面遷移などして、コンポーネントが破棄される前にコールされるメソッドです。
    - イベントリスナーの解除、API通信の切断などに記述する。


# useEffectについて
　関数コンポーネントでは、フックであるuseEffectを使用して、ライフサイクルを代替的に実現するのですが、まずuseEffectがどういったものなのかを述べます。useEffectは副作用フックと呼ばれ、副作用を実現することができます。データの取得や、DOMの操作などは適切な箇所で操作する必要があります。例えば、DOM操作に関して、レンダーした後ではないと、DOM操作はできません。レンダーする前にDOM操作するとDOMが生成されていないためエラーになります。そのようにライフサイクルにおいて適切な箇所に適切な処理を記述してあげることを**副作用**と呼びます。
　useEffectの使用例を以下に示します。基本の形は、useEffectの第一引数にコールバック関数を指定すると、レンダーされるたびにそのコールバック関数がコールされます。

```tsx:useEffect.tsx
import {useEffect} from 'react';

userEfffect( () => {
  console.log('レンダーされるたびにコールされる');
]);
```

また、第二引数に配列を指定することができます。例えば、第二引数に`value`という変数を指定すると、`value`の値が変更するたびにコールされます。第二引数を指定しても初回レンダー時は必ずコールされるため注意する必要があります。第二引数の配列の中を空白にすると、初回レンダー時にしかコールされません。

```第二引数を指定
import {useEffect} from 'react';

userEfffect( () => {
  console.log('第二引数に指定された値が変化するたびにコールされる');
], [value]);
```

```第二引数を空白
import {useEffect} from 'react';

userEfffect( () => {
  console.log('初回レンダー時のみコールされる');
], []);
```

returnにはクリーンアップ関数を指定することができます。クリーンアップ関数とは、コンポーネントが破棄される際にコールされる関数です。主にメモリの開放処理などを行うため、クリーンアップ関数と呼ばれます。注意してほしいのは、再レンダーされるたびに、前回のクリーンアップコンポーネントが実行されます。動きとしては、再レンダー→以前のクリーンアップ関数を実行→今回のuseEffectの第一引数のコールバック関数を実行となります。


```クリーンアップ関数を指定
import {useEffect} from 'react';

userEfffect( () => {
  return () => console.log('コンポーネントが破棄されるときにコールされる');
]);
```

# フックによるライフサイクルの実現
　Reactのフックでは、`useEffect`を使用して前章で示したライフサイクルを代替的に実現することができます。

- componentDidMount

```tsx:example.tsx
import {useEffect} from 'react';

userEfffect( () => {
  console.log('componentDidMount');
], []);
```


- componentDidUpdate


```tsx:example.tsx
import {useEffect} from 'react';

userEfffect( () => {
  if(/* ユーザーの操作を指定 */'){
    console.log('componentDidUpdate');
  }
]);
```

- componentWillUnmaout

```tsx:example.tsx
import {useEffect} from 'react';

userEfffect( () => {
  return () => {
    console.log('componentWillUnmount');
  }
]);
```

# 活用例
　`componentDidMount`と`componentDidUpdate`の処理が同じで、`componentWillUnmount`も指定するのであれば、以下のように記述することで実現できる。

```tsx:example.tsx
import {useEffect} from 'react';

userEfffect( () => {
  console.log('componentDidMountとcomponentDidUpdate');
    return () => {
    console.log('componentWillUnmount');
  }
]);
```

あとは、以上のことを組み合わせることで自分が実現したい機能を実現すればよいです！


# 参考
https://ja.reactjs.org/docs/hooks-effect.html
複数の文字列から特定の文字が含まれた文字列を抽出する

#目的はタイトル通り
ですが、サブの目的として”もし特定の文字が含まれた文字列がなければ結果としてNoneを出力する”ことと、文字列は入力によって取得することとします。

1.まず入力される文字列の回数をnに代入します
2.次に入力される特定の文字をｇに代入します
3.Noneを出力するために、後々入力された文字列を格納する配列をs_arrayに代入していきます
4.ｎ回の処理を行うためn.times do〜endを記述します
5.処理内容としてまず審査する文字列をsに代入します
6.sにgが含まれているかをs.include?(g)で審査し、trueであれば下記の処理を行います
7.s_arrayにsを格納し、sを出力します
8.ここまでの処理で、もしs_arrayが空であった場合Noneを出力します

```Ruby
n = gets.chomp.to_i
g = gets.chomp

s_array = []

n.times do
    s = gets.chomp
    
    if s.include?(g)
        s_array.push(s)
        puts s
    end
end

if s_array.empty?
    puts 'None'
end
```

もしかしたらもっと効率的なやり方があるかもしれませんが、少しでも駆け出しエンジニアの方々の参考になれば幸いです。
では。
Cloudinaryで使える日本語フォント

# こんな人におすすめ
* cloudinaryで日本語をオーバーレイさせたい。
* 見た目に特に拘らない（最低限でいい）
* 設定触るのがめんどくさい

# 困ったこと
CloudinaryのテキストオーバーレイがGoogleのウェブフォントをサポートしていると書いてあるが実際に使えるフォントが見つからない。（Noto系が使えないのが致命的すぎる。。。）
公式で`supports all of Google's fonts`って書いてるのに、、、、
https://support.cloudinary.com/hc/en-us/articles/203352832-What-is-the-list-of-supported-fonts-for-text-overlay-transformation-
# 対応手段
1. カスタムフォントを使う
2. なんとか使える日本語フォントを探す

対応としてはカスタムフォントを使うのが一般的みたい。
でも、otfファイルDLしたり、uploadの設定したり必要なのが手間。
きっと同じく困ってる人いるんじゃないかな？ってことで意地で探すことに。

# 結果
この~~６~~7種類は大丈夫っぽい。(2021/04/12時点)
`TakaoExGothic`, `TakaoExMincho`, `TakaoGothic`, `TakaoMincho`, `TakaoPGothic`, `TakaoPMincho`
`Sawarabi Gothic`
こんな感じで試してみてください。
(フォント名に半角スペースを含む場合は「%20」で置き換えるが必要)
`~/l_text:TakaoGothic_40:くらうでぃなりー/~.png`
`~/l_text:Sawarabi%20Gothic_40:くらうでぃなりー/~.png`

# 最後に
cloudinaryは設定がすごく簡単で個人開発程度なら無料枠で全然余裕でいいなと。
ただ、既に動かしてるサイトに導入する際はこの辺気をつけた方がいいです。

* S3使ってると読み込みできなくなる。（設定すれば問題ない）
* railsの`image_tag`バグる。（ymlで設定すれば問題ない）
Rubyの環境構築の備忘録(アプリケーション開発のための環境構築編)

<h1>Rubyの環境構築(OSがMojave以前)

# Command Line Toolsをインストール

```:ターミナル
$ xcode-select --install
```
# Homebrewをインストール

```:ターミナル
$ cd  #ホームディレクトリに移動
$ pwd #ホームディレクトリにいるかどうか確認
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" # コマンドを実行
```
Password:と表示されたらPCのパスワードを入力

brew -vでインストールされているか確認

```:ターミナル
$ brew -v
Homebrew 2.5.1
```
Homebrewをアップデート

```:ターミナル
$　brew update
```

Homebrewの権限を変更

```:ターミナル
$ sudo chown -R `whoami`:admin /usr/local/bin
```

# 新しいバージョンのRubyをインストール

rbenv と ruby-buildをインストール

```:ターミナル
$ brew install rbenv ruby-build
```

rbenvをPCにおけるどこの場所からも使用できるようにする

```:ターミナル
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
```

bash_profileの変更を反映

```:ターミナル
$ source ~/.bash_profile
```

readlineをinstall
ターミナルのirb上で日本語入力を可能にする設定を行うため

```:ターミナル
$ brew install readline
```

readlineをどこからも使用できるようにする

```:ターミナル
$ brew link readline --force
```

rbenvを利用してRubyをインストール
Webアプリケーション開発用のRubyをインストール

```:ターミナル
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
$ rbenv install 2.6.5
```

利用するRubyのバージョンを指定
インストールしたRuby 2.6.5を使用するために、以下のコマンドを実行

```:ターミナル
rbenv global 2.6.5
```

rbenvを読み込んで変更を反映

```:ターミナル
$ rbenv rehash
```

Rubyのバージョンを確認

```:ターミナル
$ ruby -v
```

# MySQLをインストール

MySQLをインストール

```:ターミナル
$ brew install mysql@5.6
```

MySQLの自動起動設定

```:ターミナル
$ mkdir ~/Library/LaunchAgents
$ ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist
```

mysqlコマンドをPCのどこからでも実行できるようにする

```:ターミナル
# mysqlのコマンドを実行できるようにする
$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
# mysqlのコマンドが打てるか確認する
$ which mysql
# 以下のように表示されれば成功
/usr/local/opt/mysql@5.6/bin/mysql
```

mysqlの起動の確認

```:ターミナル
# mysqlの状態を確認するコマンド
$ mysql.server status

# 以下のように表示されれば成功
 SUCCESS! MySQL running
```

# Railsを用意
bundlerをインストール

```:ターミナル
$ gem install bundler --version='2.1.4'
```

Railsをインストール

```:ターミナル
$ gem install rails --version='6.0.0'
```

 rbenvを再読み込みして変更を反映

```:ターミナル
$ rbenv rehash
```

Railsが導入できたか確認

```:ターミナル
% rails -v
Rails 6.0.0 
```

# Node.jsを導入

Node.jsのインストール

```:ターミナル
$ brew install node@14
```

Node.jsへのパスを設定

```:ターミナル
$ echo 'export PATH="/usr/local/opt/node@14/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
```
 Node.jsが導入できたか確認

```:ターミナル
$ node -v
v14.15.3 
```

# yarnを導入
yarnをインストール

```:ターミナル
brew install yarn
```
yarnが導入できたか確認

```:ターミナル
$ yarn -v
```

終了
俺なりNode環境構築、ドラゴンボールを求めて

## はじめに
- 俺の考えた結果
- 開発環境
- 環境作っていくよーん
- 番外編
- まとめ
- 参考文献

## 俺の考えた結果
野暮用でReactをやりたくなって環境構築を思い立ったところ、いろいろなNodeの環境構築法があることを知った。nodebrewやらanyenv入れてnodenv入れてとか、、、。npmとかyarnとか、、、
私が個人的にpyenv + pipenvでPythonの環境を作っていることもあり、できるだけ似たようなもので整えたかった。
個人的に納得のいく環境構築ができたので、備忘録として残しておく。参考になるかは分からんが、、、

## 開発環境
- macOS Catalina

## 環境作っていくよーん
nodenvがpyenvとなんか親戚的な関係らしいので、nodenvを使っていこうと思うが、調べるとanyenv入れてやる方法がとても出てくる。しかし、pyenvはもうダイレクトにbrewから入れてるのでその方法はなんとなく気持ち悪い、、、。よし、nodenvもbrewから直接入れよう！！

```
brew install nodenv
```

よし、パスを通そう、私のMacはzshなので.zprofileに書いていく。調べると.zshrcで書いてる人も結構いる、、、。どっちがいいかはよくわかっていない。誰か教えてください。

```~/.zprofile
# 適当に追記
# nodenv
export PATH="$HOME/.nodenv/bin:$PATH"
eval "$(nodenv init -)"
```

もうこれで環境構築大体終わったも同然。あとはpyenv的な感じでnodenvに使いたいversionを入れていく。installできるversionを確認するには、こうやってやるっぽい。やっぱりpyenvと似てて使いやすい

```
nodenv install --list
```

今回は、なんとなく15.13.0を入れていく。インストールするには以下の方法で、入れたあとはrehashした方がいいらしい

```
nodenv install 15.13.0
nodenv rehash
```

これで入ってるか確認してみる。

```
nodenv versions
```

自分が入れたものが出てきたらOK!
複数のversionを入れてglobal, localでversionを管理することができる。とっても便利。
よし、早速Reactの環境を作っていこう。
任意のディレクトリを作って移動

```
mkdir test
cd test
```

試しにnodeコマンド使ってみよう、適当なファイルに書いてみて実行してみる

```sample.js
console.log('Hello!');
```

作成したら以下のコマンドで実行

```
node sample.js
```

Hello!が出たら成功です！！
よし、Reactやってみよう。Reactの公式によるとnpmではなくnpxで作るのがいいっぽい。

```
npx create-react-app sample
```

そうするとsampleってディレクトリができてるはず。

```
cd sample
npm start
```

これでなんとReact動いちゃうんですよ。
まあReact以外もできないと意味がないですよね。express入れてみよう。

```
cd ..
mkdir sample2
cd sample2
```

このsample2のディレクトリにexpress入れていこう、まずはnpm initでnpm環境を初期化、その後にnpm installでexpressを入れていく。

```
npm init
npm install express
```

これだけ！！これでexpressがこのディレクトリに入っちゃった。
追加したいパッケージはnpm installで入れていくことができる。

## 番外編
番外編って言っていいのか分からないが、npmとは別にyarnってやつもある。
どちらもNodeのパッケージマネージャーだが、デフォルのままだとyarnは使えない。yarnの方がインストールが早く、セキュリティが高い。こんなの入れるしかないでしょ！ってことで入れていきます！！

まず、`.nodenv/plugins`と言う場所にyarnを入れていくのだが、デフォルトだとないこともある。ってことで作成していく、確認してある場合は必要はない。

```
mkdir -p "$(nodenv root)/plugins"
```

そうしたら、そのディレクトリに

```
git clone https://github.com/pine/nodenv-yarn-install.git
```

を実行し入れていく。これでyarnを入れる準備が整った。しかしこれでは準備が整っただけでまだ入っていないので、一度installしたversionをuninstallしてinstallしていく。

```
nodenv uninstall 15.13.0
nodenv install 15.13.0
```

これで自動的にyarnが入っていく。
一応確認する方法は、

```
which yarn
```

これで入っていればOK!
これでyarnでもNode開発することができる！

## まとめ
いかがだったでしょうか。自分に向けた備忘録だったので、走り書きで拙い文章だったのですがお役に立てれば幸いです。もっといい方法とかあるかもしれないので、調べ次第追記しようかな、、、気が向けば。。。

## 参考文献
- https://qiita.com/ttokdev/items/3547587b0494dd624901
- https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
- https://ja.reactjs.org/docs/create-a-new-react-app.html
競プロ備忘録過去問編#1 ABC042

* ABCは毎週やるみたいではないので過去問も解いていく
* なんだかんだそこまで時間とれなそうで悲しい

#AtCoder Beginner Contest 042
* なぜか4問しかなかった。4問目までだったので易し目だった

#A.和風いろはちゃんイージー

https://atcoder.jp/contests/abc042/tasks/abc042_a

３つの数字A,B,Cが与えられるので、それを並び替えて5・7・5にできるかどうか判断する問題

>**入力**
A B C

>**出力**
できるなら"YES"、できないなら"NO"を出力

* A,B,Cを順番に見てって、5または7ならそれぞれカウント
* 最後に5のカウントが2、7のカウントが1なら"YES"、そうでないなら"NO"を出力

```python:解答
myList=input().split()
five=0
seven=0

for i in range(3):
  if int(myList[i])==5:
    five+=1
  elif int(myList[i])==7:
    seven+=1
if five==2 and seven==1:
  print("YES")
else:
  print("NO")
```

#B.文字列大好きいろはちゃんイージー

https://atcoder.jp/contests/abc042/tasks/abc042_b

長さがLの文字列がN個ある。これらを並び替えて繋げたもののうち、一番辞書順で小さいものを求めよという問題

>**入力**
$ N\quad L\\ $
$ S_1\\ $
$ S_2\\ $
$ S_3\\ $
$ \vdots\\ $
$ S_N $

>**出力**
答えを出力

* 辞書順に小さいものからつなげていけば終了
* ``list.sort()``で辞書順にリストを並び替える
* ``sorted(list)``で辞書順に並び替えたリストを返す

```python:解答
N,L=map(int,input().split())
S=[]
for i in range(N):
  S.append(input())
  
S.sort()
ans=""
for i in range(N):
  ans+=S[i]
  
print(ans)
```

#C.こだわり者いろはちゃん

https://atcoder.jp/contests/abc042/tasks/arc058_a

Kこの数字が与えられる。その数字を含まない数字のうちでN以上の数字のうち一番小さい数字を答えよという問題

>**入力**
N K
$ D_1\quad D_2\quad  \cdots\quad D_K\quad$

>**出力**
答えを出力せよ

* 数学の問題ではにのでどうプログラムを走らせれば良いのか考える
* 虱潰しは立派な方法
* Nから初めて、各数値で1桁目から調べていく。`cnt`で何桁目までオッケーかカウントしておいて答えかどうか判別
* while文とbreak組み合わせてもいけそう

```python:解答
N,K=map(int,input().split())
D=input().split()

for i in range(N,100000):
  cnt=0
  for j in D:
    if str(j) in str(i):
      break
    else:
      cnt+=1
      
  if cnt==len(D):
    print(i)
    break
```

#D.いろはちゃんとマス目

https://atcoder.jp/contests/abc042/tasks/arc058_b

縦H、横Wマスのマス目がある。下からAマス以内かつ左からBマス以内のマス目には入れない。左上から出発して左か下にのみ移動する時、右下にたどり着く道は何通りあるかという問題。答えは$10^9+7$で割った余りで求める。

>**入力**
H W A B

>**答え**
答えを$10^9+7$で割った余りを出力 

* 単純なマス目であればよくある数学の問題で、H+W-2会の移動のうち、W-1回の下への移動を何回目で行うかを求める問題、つまりH+W-2からW-1を選ぶ組み合わせの問題
* 今回もこれを応用
* いかなる道であれ、上からH-A-1マス目で左からBマス目より右のマスのどこかを通る。
* よって左上を(0,0)として、(0,0)→(H-A-1,i)→(H-A,i)→(H-1,W-1)(B≦i≦W-1)の順番に通る道順を数えて、それぞれ足していけばいい。
* 組み合わせは$\frac{n!}{r!(n-r)!}$で計算
* やっぱり数字がごっちゃになるのでちゃんと図を書く、かつ例題は1のような小さいのではなく、2のような中くらいの大きさの方が頭の整理しやすいかも
* 階乗は``math.factorial(n)``で計算できる。ループで回すよりははるかに早い
* ただし正面から計算すると数字が大きくなりすぎてオーバーフローする
* よって逆元を利用する
* 逆元とはa÷b=a×b^{-1}(mod p)となるようなb^{-1}でb^{p-2}(mod p)(pは素数)で求められる
* 逆元について、詳しくはググって
* 先にx!とその逆元を求めるとコスパ良し
* 冪剰余は`pow()`の第3引数を設定することで効率よく求められる。自作でやるとめっちゃ重い処理になるので注意
* `pow()`の返り値はfloat型なので注意
* 全部求めるならx!はいちいち`math.factorial(x)`で求めないで、`fact[x-1]*x`で求めれば良い

```python:解答
H,W,A,B=map(int,input().split())

fact=[[]for i in range(H+W-2)]
inv=[[] for i in range(H+W-2)]
fact[0]=1
inv[0]=1
ans=0

for i in range(1,H+W-2):
  fact[i]=fact[i-1]*i%(10**9+7)
  inv[i]=pow(fact[i],10**9+5,10**9+7)

for i in range(B,W):
  ans+=(fact[H-A+i-1]*fact[A+W-i-2]*inv[i]*inv[H-A-1]*inv[A-1]*inv[W-i-1])
  ans=ans%(10**9+7)

print(int(ans))
```
Git 紐付いているリモートリポジトリのアドレスを確認する

# 目的

- ローカルリポジトリに紐付いているリモートリポジトリのアドレスを確認する方法をメモ的にまとめる

# 方法

1. 下記コマンドを実行してリモートリポジトリのアドレスを確認する。

    ```terminal
    $ git remote -v
    ```

1. 「リモートリポジトリ名」と「リモートリポジトリアドレス」が表示される。
VueTyperを実装

Vue.jsで実装した機能を備忘録として記録する。

##VueTyperとは
タイピングをしてるかのようにテキストを表示するVue.js用のコンポーネントライブラリ。

##前提条件
・Vue-CLIをインストールしていること
※CDNでも実装可能ですが、今回はVue-CLIを使用して進めています。

##インストール
```
npm install --save vue-typer
```

##ライブラリの読み込み
```js:js
import { VueTyper } from 'vue-typer'
```

##コンポーネントに取り込み
```js:js

export default {
  components: {
    VueTyper
  }
}
```

##テンプレートに記述
```html:template
<template>
 <div>
   <vue-typer :pre-type-delay='1500' :type-delay='100' :repeat='0' text="表示させたい文字を入力">
</vue-typer>
</div>
</template>

```

##デモページ
下記ページで動きを確認することができます。
[https://cngu.github.io/vue-typer/](https://cngu.github.io/vue-typer/)