OmniAICreator/Qiita-1.07M huggingface dataset:
AWS上のシステムを維持管理して得たハマりポイント

#はじめに

* 現在、とあるAWSのシステムのインフラの維持管理を担当しているが、AWSやパブリッククラウドならではのところでハマったポイントについてとりとめもなくご紹介したい。

* WEBではAWSの新機能の紹介や構成検討の情報は結構載っているものの、このあたりの地味な情報はなかなか見た事がなかったので記載しようと思った次第。

* 特にオンプレからAWSへの移行を検討されている方に参考なれば幸いです。

* 記載内容に誤りがありましたら、ご指摘頂けれると大変ありがたいです！

#ハマりポイント1. Auroraはバージョンダウンできない！

* Auroraはバージョンダウンの機能が(今のところ)無い。

* バージョンアップ作業における業務閉塞中のコンチプランとして、事前に取得したスナップショットからAuroraクラスタの再作成等が考えられるが、**業務閉塞解除後だとスナップショット取得以降の全ての更新を手動で追い付く必要があるため、実質不可能。**

* そのため、私の担当しているシステムでは業務閉塞解除後に問題が発生した場合は、対策前進の方針としている。

* 業務閉塞解除後もコンチ発動できる様にするためには、DMSで同期させておく、等の個別の検討が必要。

![aurora_versionup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1905292/62996015-2b0a-48cb-8ffc-085ace649b92.jpeg)

#ハマりポイント2. Aurora(PostgreSQL)のバージョンを指定できない！

* Aurora (PostgreSQL)のパッチバージョン(2.5.1の1の部分)はDBエンジンのバージョンアップ時に明示的に指定できず、常にバージョンアップ時点の最新のものが適用される。

* **そのためバージョンアップ対応の際、開発環境でのノンデグテスト実施時とその後の本番環境でのリリース時で異なるパッチバージョンとなる可能性がある。**

* 私が担当しているシステムではノンデグテストを実施していないパッチバージョンでのリリースを避けるため以下の対応方針とした。

1. リリース直前に開発環境Auroraでバージョンアップを実施し、万が一パッチバージョンがテスト時より新しいものになったらリリース中止。新しいパッチバージョンで再度ノンデグテスト実施。

1. バージョンアップリリース後の確認でパッチバージョンが新しいものとなっていたらコンチ発動で旧戻し。

* どこまで神経質になるのかという話ではあるが、、、テストしていないものはリリースできないという原則に従った方針。
  Aurora(MySQL)だとパッチレベルまでユーザが指定できるらしい。Aurora(PostgreSQL)でも指定できる様にしてほしい！
React.js 勉強 #2

React.jsを学んでいく学習記録になります。
今までの記録はこちらから。

[React.js 勉強 #1](https://qiita.com/hase01234/items/82924c7d675587de3366)

# 手を動かしてみた
調べてみると、Reactはコンポーネントベースで構築していく必要があるっぽいので、とりあえず慣れるためにも触っていきます。
Vue.jsでもコンポーネント化をしてきたので、僕の中ではコンポーネント = パーツ化レベルの認識ですが、一旦コンポーネント化を進めていこうと思いました。

僕の中で作りたいアプリケーションがあったので、とりあえずHeaderとFooterを作成していきます。

前回作成したアプリケーションの中身を見てみると、```src/index.js```にAppコンポーネントを読み込んでいる記載があったので、index.jsにHeaderとFooterのコンポーネント読み込めばいいんじゃね？ということで・・・

# Headerコンポーネント作成＆読み込み

まずは、srcディレクトリ内にcomponentsというフォルダを作成し、Header.jsを作成。
どうやらReactのコンポーネント化は

* クラスコンポーネント
* 関数コンポーネント

があるみたい。

## クラスコンポーネントの作り方
```src/components/Header.js
import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <header>
        ここはヘッダーになります。
      </header>
    )
  }
}

export default Header
```

クラスコンポーネントには```render()```が必ず必要で、```return```内で書いた記述が呼び出し先で描画されてるのかな。
ちなみに```return```では1つの要素で囲む必要あり。つまり、

```src/components/Header.js
import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <header>
        ここはヘッダーになります。
      </header>
      <div>
        ほげ
      </div>
    )
  }
}

export default Header
```
上記だとエラーになるので、注意。

## 関数コンポーネントの作り方
```src/components/Header.js
import React from 'react'

const Header = () => {
  return (
    <header>
      ここはヘッダーになります。
    </header>
  )
}

export default Header
```

クラスコンポーネントと比べると、かなりスッキリしたプログラムコードになる印象。
どっちがいいかとかはまだ分からないのですが、コードの見やすさ的にも関数コンポーネントのほうが推奨されてる気がします。

Headerのコンポーネントファイルを作成したら、あとは読み込みだけ！

Appコンポーネントを読み込んでいた```src/index.js```に

```src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Header />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();
```

importでHeaderファイルを指定して、Headerを読み込む用記述すると・・・
![スクリーンショット 2021-11-29 14.41.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99346/81686332-7e79-fb22-4347-0522ed8eaea3.png)

無事、Headerを表示することに成功しました！

# 同じようにFooterコンポーネントの作成＆読み込み
同じようにFooterも作っていきます。（今回はクラスコンポーネントで作ってますが、後々関数コンポーネントに切り替える予定です）

```src/components/Footer.js
import React from 'react'

class Footer extends React.Component {
  render() {
    return (
      <div>
        &copy;
      </div>
    )
  }
}

export default Footer
```

``` src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
import App from './App';
import Footer from './components/Footer';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Header />
    <App />
    <Footer />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();
```

index.jsにFooterコンポーネントを読み出してみると・・・
![スクリーンショット 2021-11-29 14.45.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99346/6be68552-65bc-effc-21c1-833de3617568.png)

無事、Footerにコピーライトを表示することができました！

まだまだ表示を行っただけなので、レイアウトは酷いものですが、これからCSSフレームワークを使って整えて行きたいと思っています。
考えているのはmaterialuiっていうのを考えています！

CSSフレームワーク自体、ほとんど使ったことがなく（bootstrapぐらい）、これもなかなか苦戦しそうですが・・・
頑張っていきます！
マネーフォーワードの請求書自動作成の件名で使える変数

マネーフォーワードの請求書自動作成のテンプレートで、自分の場合、件名に前月を「X月の開発費」などとして記載しているが、これを自動的に入れてくれる変数があることがわかった。

「X月の開発費」の「X」を前月の数字で置き換えたい場合、下記のようにテンプレートに入れておけば良い。

```
##請求月前月##月の開発費
```


↓詳しくはこちら

https://biz.moneyforward.com/support/invoice/guide/document02/do14.html#change

以前調べたときにはこの情報を見つけることができず、無いものと思っていたが、再度頑張って探したら見つけることができた。

テンプレート作成画面のフォームにリンクを張っておいてくれたら、すぐに分かったのになぁ。
ArduinoとMax30102でSpO2を計測する

#はじめに
東京工芸大学工学部電子機械学科大海研究室のインです。
ArduinoとMAX30102センサでSpO2(酸素飽和度)の計測をしてみたので報告します。

グローバルに新型コロナウイルスの感染が拡大する中で生活にも影響が出ています。感染の可能性があり、症状が現れても、なかなか検査が受けられない状況にまたなるかもしれません。新型肺炎患者が自宅療養となることもあります。患者の健康状態や症状の変化を迅速に把握するため、自宅で小型パルスオキシメーターでSpO2が計測できれば安心します。SpO2は96%以上あれば少なくても軽症であると判断でき[^spo2]、コロナの重症化の早期発見に有効な医療機器となると考えています。

#使用したもの
* Arduino uno (model R3)
* MAX30102
* ブレットボード
* ジャンパワイヤ
* PC

#組み立て方法
回路の構成は以下のとおりです[^max30102]。
<img width="600" alt="Max30102" src="https://i.gyazo.com/5144552f90a9cd547f17147d8c566715.png">

<!-- <img width="500" alt="Max30102_kumitate.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488322/f5371755-7b84-b445-76e0-ffe52e598e8e.png">-->

実際に接続したところを以下に示します。
<img width="500" alt="dennshikairo.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488322/6242cb97-10e2-f7c6-b6b5-983261d87d01.jpeg">

#プログラム
Arduino IDEで以下のSparkfun社のライブラリを使用しました。
<img width="700" alt="MAX30102ArduinoLibrary.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488322/23164d7f-80a6-0c09-ffb4-89bfad917ac6.png">

ライブラリはArduino IDEで以下のようにしてインストールしました。
1.「Tools」→「Manage Libraries」と進む。
2.検索バーに「max30」と入力する。
3."Sparkfun MAX3010x Pulse and Proximity Sensor Library"をインストールする。(ここではVersion 1.1.1)

使用したプログラムコードはsparkfunのサンプルコードで、Arduino IDEのメニューの
「File」→「Examples」→「Sparkfun MAX3010x Pulse and Proximity Sensor Library」の中にあるExample8_SPO2です[^code]。

#出力確認
Arduino IDEのシリアルモニタに出力された、自分のSpO2を測定した結果を以下に示します。見辛いですが、右から2つ目のSPO2の値から98%になっていることが分かります。
<img width="800" alt="SpO2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488322/024a0ca7-11d6-8f7f-9a80-c285c8eb43cd.jpeg">

指を押してから穏やかなSpO2値が出るまで45秒以上かかりました。今後は測定速度や精度、測定のしやすさ、配布方法などについて検討していきたいです。

#参考資料
[^max30102]: Amazon.co.jpのMAX30102のページ：https://amz.run/52rC
[^spo2]: 新型コロナウイルス感染症診療の手引き第6.0版, p.34: https://www.mhlw.go.jp/content/000851077.pdf
[^code]: プログラムコード：https://github.com/sparkfun/SparkFun_MAX3010x_Sensor_Library/blob/master/examples/Example8_SPO2/
<!-- ディスプレイをつける実験：https://create.arduino.cc/projecthub/SurtrTech/measure-heart-rate-and-spo2-with-max30102-c2b4d8 -->
laravel uuidを生成する 個人メモ

# 目的

- laravel8でuuidを生成する方法をまとめる

# 方法

- 下記のように記載することで`$uuid`にuuidが生成されて格納される。

    ```php
    use Illuminate\Support\Str;

    $uuid = Str::uuid();
    ```



# 参考文献

- [https://laravel.com/docs/master/helpers#method-str-uuid](https://laravel.com/docs/master/helpers#method-str-uuid)
- [https://qiita.com/miriwo/items/e40a8f5d03541eed7e7b](https://qiita.com/miriwo/items/e40a8f5d03541eed7e7b)
独自KVSデータベースを作ってみた

# 初めに
オークファンの開発部に2021年新卒入社した@isodaです。
題名の通り、独自KVSデータベースの設計と開発（実装は途中）を行いました。


# 経緯
通信プロトコル、ファイルシステム、バイナリなどの理解。
Goを使用した開発や1から設計を行う経験の為、研修の一環として、今回の独自KVSデータベースの設計と開発を行わせて頂きました。


# 通信プロトコルの設計
通信はTCPを使用し、バイナリデータでのやり取りを行います。

- DBサーバーへのリクエスト
    - KeyとValueを送る際に、どこまでがKeyでどこまでがValueなどを識別するために、識別文字を入れる方法もありますが、
今回はバイナリセーフにしたいためKeyとValueのサイズを通信に内包する方法にしました
- DBサーバーからのレスポンス
    - Create/Update/Deleteの際は正常を示す値(0x00) or 異常ならエラーコード
    - Readの際は正常系はリクエストのKeyに対応するValueの値 or 異常ならエラーコードが返ってくる


## Create/Update(Request)
CreateとUpdateは以下のよう定義します。
Mode + KeySize + Key + ValueSize + Value


具体例：key=hoge value=fugaでcreateを行った時のイメージ

```
echo "\x00\x05hoge\x00\x04fuga" | hexdump -C
00000000  00 05 68 6f 67 65 00 04  66 75 67 61 0a           |..hoge..fuga.|
```

|  | 開始アドレス | サイズ(byte) | 値|
| -------- | -------- | -------- |-------- |
| Mode     | 0x00    | 0x01    |0x00(C) or 0x02(U)|
| KeySize |  0x01   |   0x01   | 0x01 ~ 0xFF |　
| Key  |  0x02   | 0x01 ~ 0xFF  |KeySizeの値と同じバイト数の任意の値|
| ValueSize |  0x02 + Keyのサイズ   | 0x02  | 0x0001 ~ 0xFEFD | 
| Value  |  0x04 + Keyのサイズ   | 0x0001 ~ 0xFEFD |ValueSizeの値と同じバイト数の任意の値 |



## Read/Delete(Request)
ReadとDeleteは以下のよう定義します。
Mode + KeySize + Key


具体例：key=hogeでreadを行った時のイメージ

```
echo "\x01\x05hoge" | hexdump -C
00000000  01 05 68 6f 67 65 0a                              |..hoge.|
```

|  | 開始アドレス | サイズ(byte) | 値|
| -------- | -------- | -------- |-------- |
| Mode     | 0x00    | 0x01    |0x01(R) or 0x03(D)|
| KeySize |  0x01   |   0x01   | 0x01 ~ 0xFF |　
| Key  |  0x02   | 0x01 ~ 0xFF  |KeySizeの値と同じバイト数の任意の値|



# ファイルシステムの設計
ファイルに実際どのように、読み書きされるかを設計しました。
バイナリファイルの中身はこんなイメージです。

![スクリーンショット 2021-11-26 17.55.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303126/3071cc36-9cd4-5b7b-648a-6c4a3a2fe16c.png)



- バイナリファイルへの読み書きはビッグエンディアン
- KeyとValueとそのサイズを1つのセットとして、1ブロック0x10000byteでファイルに書き込まれる
- KeyとValueも0埋めを行い固定長で保存
- KeySizeに0x00が入っている場合は論理削除とする



# 実装
Goで実装を行なっています。

- Client
    - 入力した値を通信プロトコルに沿ったバイナリ形式に変換してServerへ送信
    - ClientでServerから受け取ったレスポンスを表示
- Server
    - 受け取った値をGolangの構造体に入れて、その構造体をバイナリファイルへ読み書きする処理を行い、Clientにレスポンスを返す。

ServerのCreate処理部分のソースコード

```
package crud

import (
	"bytes"
	"encoding/binary"
	"fmt"
	"os"
)

func (b *Block) Create() error {

	// キーの存在確認
	bf, err := b.Read()
	if err != nil {
		return err
	}
	if bf.Ks != nil {
		return fmt.Errorf("key already exist")
	}

	buf := new(bytes.Buffer)
	var data = []interface{}{
		b.Ks,
		b.Vs,
		b.K,
		b.V,
	}

	for _, v := range data {
		err := binary.Write(buf, binary.BigEndian, v)
		if err != nil {
			fmt.Println("binary.Write failed:", err)
		}
	}

	file, err := os.OpenFile(b.Cnf.FILE.Path, os.O_RDWR|os.O_CREATE|os.O_APPEND, 0666)
	if err != nil {
		return err
	}
	defer file.Close()

	_, err = file.Write(buf.Bytes())
	if err != nil {
		return err
	}

	err = file.Close()
	if err != nil {
		return err
	}

	return nil
}
```

# 終わりに
今回の経験を通して、設計では、どの様に通信プロトコルを定義すれば、バイナリセーフになるのか。
どの様な形でバイナリファイルに書き込みば、読み書きがしやすいかなどを考える良い機会になりました。
また設計をするのは殆ど初めての経験だったのですが、とても大変だが大切な工程であると感じました。
実装ではGoでの開発が初めてなので、戸惑うことも多かったのですが、今後業務でGoを使う機会もあるので勉強になりました。
設計でも実装でも先輩にレビューを頂いたり、レクチャーをして頂いたりしたのでスムーズに進めることができ、感謝しております。
MagicPodで作るE2Eテストのメンテナンス性を上げるために気を付けていること。

##　この記事の目的
MagicPodを利用したE2E自動テストを作るときにメンテナンス手法やちょっとしたTipsなどがWebで探してもないので、自分でずっこけながら、学んだMagicPodでのメンテナンス向上策を記載しています。

##対象者
- MagicPodを利用してみたいと思っている人
- MagicPodをこれから始める人
- MagicPodを利用しているけど、メンテを少しでも楽にしたいと思っている人。


## わかること。
- メンテナンス性を上げるために気を付けていること。
    - MagicPodを利用したちょっとした裏技的な使い方。
    - メンテナンスを自分で辛くしないためのちょっとしたひと手間。

## メンテナンス性を上げるために気を付けていること。
### 全てのステップを共通ステップ化する。
ステップはできるだけ、テストケース内だけに閉じないように、共通ステップに落とし込んでいます。
ステップ名を記入する時は、Gherkin記法をできるだけ意識するようにしています。
こうすることで、以下の効果を狙っています。

```
１）テストケースで確認したいユーザーの動きを共通ステップ名から連想しやすい。
２）他のケースとステップを共通化できることで、メンテナンスが必要な箇所を減らせる。
３）共通ステップ選ぶだけで基本的なフローを作れるので、新しいテストケースを作る時にも手間がかからない。
```

１は、いざテストが落ちた時に、ユーザーがどのような操作をした時に失敗するのかすぐにわかることで、
「このテストどういう流れなんだっけな。。」みたいな一手間を減らすことに役立てることができます。

また、Gherkin記法では、各ステップごとの頭につきますが、ステップにこれらを記載すると同じようなステップが山ほど増えてしまうため、未だ実現していません。
![スクリーンショット 2021-11-28 11.27.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869052/404f1b57-ea1b-5042-7743-0be6e0292cbd.png)


### 画面キャプチャは必ず、命名し、バージョニングする。
同じ画面なのに、複数枚キャプチャをとっていて、ステップごとに別のキャプチャを利用すると、画面のUIが丸ごと変更になった場合の更新に非常に時間がかかります。
なので、同じ画面でのキャプチャが増殖しないように気をつけるために以下の命名規則で、記載しています。


```
命名規則："画面名_バージョン_特殊操作"
例："コース一覧_1.1.1_検索窓表示"
```

![スクリーンショット 2021-11-29 13.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869052/c3e369f2-470b-16da-43c3-ac72249221ef.png)

こうすることで、キャプチャを減らしながら、同じ画面であっても操作が必要なものについてもカバーしています。
また、バージョニングしている理由については、リファクタリングや機能追加を行われる時に、改修していない画面の要素の変化に気づき、意図的ではない修正にも気付けるようにするためです。



### 新規作成や編集などの操作をする時は、乱数を利用する。
MagicPodでデータの新規作成、編集などを利用する時は、乱数を利用しています。
その理由は、作ったデータを検索する時に、その乱数を元に検索を行うことで、データの消し忘れなどで既存のデータとかち合うことをなくすことを目的としています。

そして、その乱数が格納された変数を以下のように、xpathで検索する際も利用することができます。
![スクリーンショット 2021-11-28 12.05.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869052/43eb747b-8ee0-57d1-ef58-baa486f6b927.png)

最悪aiのタグで、乱数を探しに行かせてもいいのですが、aiはまだ要素の検索速度も遅いです。
そのため、可能な限りai以外のタグを利用して、要素を指定して行く方がデバッグ時に時間がかかりません。


裏技としてMagicPodでは、今のところ共通ステップや通常のステップを跨いで変数を利用可能です。
なので、他の共通ステップで作成した、変数も利用できます。
乱数を変数に格納するステップを共通化しても良いのですが、このスコープを想定していない変数の利用できること自体bagなので、積極的に利用すべきではないと考えています。
https://github.com/Magic-Pod/japanese-issue-and-doc/issues/69


## 今後の課題
今後、自動テストを進めるにあたって直近見えてきている以下のような課題があります。

- 並列実行時に生成された乱数が重複する課題
- 複数ブラウザでのテストをする環境を作る課題

今はこれらの課題を解決している途中ですので、話が進み運用が決まり出したらまた記事作ります。
読んでいただきありがとうございました。
flexboxについての何か

CSSのFlexboxを適用すると思うような表示が出来ず表示が崩れる事が多々あると思います。
そんな時は「display:flex」直下の子要素として＜div＞や＜span＞等で囲うと高確率で直ったりしますので一度お試しあれ。
eclipseのSQLエディタのフォントを変更する方法

`設定>一般＞外観>色とフォント>基本>テキストフォント`


でフォントを好みのものに変える

以下の感じです

![SQLフォント適用.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279965/946e2d08-90fa-e26a-5c97-422ab7074e84.png)
チームで内部API開発をするときのツール

# まえがき
- 最近はBFFアーキテクチャの採用により、サーバサイドは内部(Internal)APIとしてAPIを作成することが多い
- チームで開発するために、どのAPIが何を示しているかはわかりやすくしておきたい
    - サーバ・フロントどちらを触るときでもAPI定義を見れば実装できるようにしたい
    - 各エンドポイントが何をしているか、コードを見ればわかるけど毎回したくはない


- チーム開発でAPI開発をするときにどのようなツールを利用していたかについて記載する。

# 前提
- いわゆるREST APIを採用 (gRPCではない）
- OpenAPI3.0 を仕様


# VSCode拡張機能
- [Swagger Viewer](https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer)
- API定義をプレビューできる拡張機能
- 拡張機能名はSwaggerとついているが、OpenAPI3.0でも問題なくプレビューが可能
- いわゆるライブリロード機能があり、編集→反映がスムーズに行えるのが良い
- 図はサンプルなAPIを表示した例
![スクリーンショット 2021-11-29 13.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57634/6c08adf4-1811-c879-7ff5-5b0761217008.png)



## OpenAPI extension for Visual Studio Code
- [OpenAPI extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=42Crunch.vscode-openapi)
- 新規作成時にテンプレートから生成が可能
- 一方previewのような形では使えないのでそこまでは利用していない。


# Redoc
- [Redoc](https://github.com/Redocly/redoc)
    - デモはこちら : https://redocly.github.io/redoc/
- OpenAPIの定義からPreviewを生成するOSS
- [example](https://github.com/Redocly/redoc#tldr-final-code-example)  にあるように、API定義と、cdnの読み込みさえ書けば良い

```html
<body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"> </script>
</body>
```
- oapiの場合 sepc.yamlを指定すれば良い。
- 実運用上は GitHub Pagesのようなところにホスティングして開発者が確認できるようにしている
- 図はサンプルAPIを表示した例
![スクリーンショット 2021-11-29 13.32.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57634/ad23a9b1-32d5-3ceb-7415-3fded7fef44e.png)




# oapi-codegen
- [oapi-codegen](https://github.com/deepmap/oapi-codegen) 
- Goでサーバサイドを書くために、oapi-codegenを利用してサーバサイドのコードを生成している


# まとめ
- 各種ツールを利用することで、内部API開発を効率的にできるようになった。
- API定義があることで、サーバー <-->フロント間でやり取りする際の共通言語として利用できるようになった。
- また、サーバーサイドを主としていた人がフロント側を行う際にもよい取っ掛かりとなった。
Bot 送信用 token 取得の Server List(固定IPタイプ) で FileMaker から送信する cURL オプション

#タイトルにそって解説
本題に入る前にまずは長いタイトルについて順に説明します。
本記事で使用する cURL オプション はなにも FileMaker 専用ではなく、
使用するパラメータが動作するバージョン以上の curl を使用すれば同様に動作すると思われます。
##Bot 送信用 token
LINE WORKSでは API をリクエストする際に token が必須です。
token の取得は2つの方法のどちらかを選択する必要があります。
<dl>
  <dt>サービス API</dt>
  <dd>ユーザーのログインが必要なAPI用。
      具体的には Service API Consumer Key を使います。</dd>
  <dt>サーバー API</dt>
  <dd>ユーザーのログインが不要な API用。
      Bot の API はこちらを使用します。
      具体的には Server API Consumer Key をつかます。</dd>
</dd>
</dl>
##token 取得
Server API Consumer Key を使いますが、
token 取得するにはさらに2つのどちらかを選択する必要があります。
<dl>
  <dt>Server List(固定IPタイプ)</dt>
  <dd>利用サーバーの IP を用いた認証形式。
      これは本来固定 IP のサーバーを想定しているんでしょうが、
      変動するIP環境であっても送信する方法をこのあと書きます。</dd>
  <dt>Server List(ID登録タイプ)</dt>
  <dd>認証キー等を使って、 JWT(RS256) を作成し、token を取得します。
      こちらの方法でも FileMaker は CryptGenerateSignature 関数を使用して作成可能ではありますが、今回無理はしません。</dd>
</dl>
##FileMaker
Apple の子会社 Claris が開発している ローコードツール。
古くはデータベースとして有名だったが、最近では ローコードツール としていろいろ Leader を受賞しています。

FileMaker はクラウド上はもちろん、オンプレでサーバー設置できたり、
Windows / macOS / iOS 向けにオフラインで動作するアプリケーションが使えたりなど、
自由度が非常に高いうえに、動作環境もさまざまです。
その分常にグローバルの固定 IPからという制限はせっかくの動作環境を限定することになります。
そこで本投稿がお役立ちできれば幸いです。
##
##FileMaker から送信する cURL オプション って
FileMaker は curl アプリケーション libcurl/7.76.0 (2021年11月現在) を内蔵しています。
FileMaker のスクリプトステップ「URL から挿入」を使用し、
「cURL オプション」にパラメータを渡すことで実行可能です。
#本題: cURL オプション
今回は
・サーバー API
の
・Server List(固定IPタイプ)
を選択しています。

```
"-X POST -S -m 5
 -H \"consumerKey:" & $consumerKey & "\"
 -H \"Content-Type:application/json;charset=UTF-8\"
 -H \"Authorization: Bearer " & $token & "\"
 -d @$body "

 & " -H \"X-Forwarded-For: x.x.x.x\""
```

 ＄consumerKey や $token は、LINE WORKS Developer Console からコピーしたものを指定します。
$body には Bot メッセージ送信に必要な JSON を入れます。

そして本投稿のミソが、「X-Forwarded-For ヘッダー」です。
Server List(固定IPタイプ)で token 作成時に登録したグローバルIPを x.x.x.x と仮定した場合の例になります。
固定 IP ではないのに、 Server List(固定IPタイプ) を使うため、
cURL オプションでこちらの IP アドレスを偽装する必要があるためです。
これにより、どこからでも Bot 送信が可能になります!
##セキュリティーについて
「X-Forwarded-For:」で偽装 ! 大丈夫か !? と気になるところですね。

まず自分が使っていた IP アドレスが今後他の方に割り振られて、偽装されたとしても、
API ID、Consumer Key、token の3つが流出しない限りは送信できないので安心かなと。

逆に他の人が利用中の グローバルIP を自分が偽装して指定しても動作すると思われます。
過度な負荷を LINE WORKS API サーバーに掛けて IP アドレス がブラックリスト化（そもそもそんな管理されているか確認したことない）にならないように注意したいとことです。
#最後に
この手法は LINE WORKS が想定している使い方ではないと思われるため、
ある日突然通用しなくなる恐れはあります。
その場合は本当に固定IP環境のサーバーから送信するか、
Server List(ID登録タイプ) で token を取得することになります。

初めて Qiita に投稿したので、文章の流れや markdown 記法の不慣れによるお見苦しい点はご容赦ください。
docker-compose.ymlのversionについて

# 結論

```yml
version: '3.8'

services:
  web:
    ...
  db:
    ...
```

のように、`docker-compose.yml` の一番上に、versionを指定している記事がよく見られますが、
このversion表記は実は`deprecated (非推奨)`であり、現在は一切使用されていない値になります。
なので、書くときやコピペする時は書く必要はありません。

# 詳しく見ていく
docker-composeの仕様を定めている [compose-spec](https://github.com/compose-spec/compose-spec/blob/master/spec.md#compose-file) を読むと、[Compose fileの章](https://github.com/compose-spec/compose-spec/blob/master/spec.md#compose-file)でversionにDEPRECATEDを書いてあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108767/06d02bb1-1b8c-9060-5326-470435c1eb7c.png)
[理由](https://github.com/compose-spec/compose-spec/blob/master/spec.md#version-top-level-element)を見るとこう書いてあります。
下記は意訳になります。

> トップレベルにおける`version`プロパティは、後方互換性のために仕様で定義されたプロパティですが、現在は参考程度(=コメント)にしかなりません。
> Composeの実装は、この値を使用してCompose fileを検証するための正確なスキーマを**決めてはいけません**。常に、設計された時点での最新のスキーマを選択すべきであります。

とかかれています。

# おわりに

何かといろんな記事で見かける`docker-compose.yml`の`version`ですが、必要ないなら書かなくても良いかと思います。
コメント程度に残しておく分には良いかもしれませんね。
「Git リポジトリにアクティブな変更が多いため、 Git 機能の一部のみが有効になります。」への対処法

タイトルの通り、`Git リポジトリにアクティブな変更が多いため、 Git 機能の一部のみが有効になります。`という
アラートが表示されてしまった時の解決策を記載いたします。


## 環境

```
-> %  sw_vers
ProductName:	macOS
ProductVersion:	12.0.1
BuildVersion:	21A559
```

## 対処法

ユーザーディレクトリ配下に`.git`のディレクトリが誤って生成されてしまっていたことが原因でした…

本来`.git`ディレクトリは各プロジェクトのディレクトリ配下に作成されているのですが、
誤ってユーザーディレクトリ配下に作成されてしまった結果、大量の差分ファイルが出てしまっていました。

Finder → ユーザーディレクトリ を確認し、`.git`のディレクトリを削除すれば解決します!
(隠しフォルダは `shift` ＋　`command` ＋`.`　で表示できます)
bash起動に関して

わかりやすい説明があったので
https://blog1.mammb.com/entry/2019/12/01/090000#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%A8%E3%81%AF

https://blog1.mammb.com/entry/2019/12/01/090000#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%A8%E3%81%AF


なんで以下の順番でプロファイルを読み込んでいるのかわからなかった。。。

https://qiita.com/yunzeroin/items/480a3a677f78a57ac52f

気になって調べてみた。

bashコマンドのソースに記載があった。
version：4.2

SYS_PROFILEは、「/etc/profile」のこと

```shell.c

 /* Execute /etc/profile and one of the personal login shell
	 initialization files. */
      if (no_profile == 0)
	{
	  maybe_execute_file (SYS_PROFILE, 1);

	  if (act_like_sh)	/* sh */
	    maybe_execute_file ("~/.profile", 1);
	  else if ((maybe_execute_file ("~/.bash_profile", 1) == 0) &&
		   (maybe_execute_file ("~/.bash_login", 1) == 0))	/* bash */
	    maybe_execute_file ("~/.profile", 1);
	}

      sourced_login = 1;
    }
```

```pathnames.h

/* The default login shell startup file. */
#define SYS_PROFILE "/etc/profile"

#この「SYS_PROFILE」が「/etc/profile」のこと
#宣言は、
```

Redhatでログインして、psコマンドを実行すると、bashだけが実行されている。
なのでbash関連のファイルが読み込まれている。

OS上で「~.profile」を作成しただけでは、bashがまた起動された。
仕方ないので「/etc/passwd」のシェルの部分を変更した。
そうしたら「.profile」が読まれた。

ということは、ユーザがログインする際に、/etc/passwdをチェックしているんだなぁということが
わかった。
誰が犯人なんだろうって思って調査開始。

よくよく考えてみたら
Redhatのログインを制御しているのってsystemdだと仮定して再調査

/etc/passwdから以下のファイルを読んでいることがわかった。
version:systemd 219

```util.c

        if (shell)
                *shell = p->pw_shell;

        return 0;
}

```

systemdが、ログイン時に「/etc/passwd」ファイルを読み込んで
ユーザのシェル情報を取得している。
それをもってシェル設定を行っている模様。。。。
有料G Suiteに別のドメインを追加する方法


複数のプロダクトを運用している時って、各ドメインごとにメールアドレスを持っていたい。例えば、コールドメールを送る時に送っている内容と、送り元のメールアドレス先にあるランディングページが全然違うと「お前は一体誰なんだ！」状態になったりする。（実際なった。）

こんなことでイケるはずだった営業候補を落としたら勿体ない。

そのために、新しいドメインに紐づくメールアドレスを作りたいと思ったんだけど、メールサーバーを用意したり、普段から作っているGmailと紐づけたりするのがマジで面倒臭かった。

なので、今回やったことを備忘録的にまとめておく。

## ユーザーエイリアスにセカンドドメインを追加する

まずは、Google 管理コンソールの[ドメイン管理](https://admin.google.com/ac/domains/manage)より**[ドメインを追加]**する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116375/8bec9dea-6c6b-013a-c41f-e48ecb03a336.png)

ここでは「セカンダリドメイン」を選択して、所有権を証明していく。所有権を証明する際には、TXTレコードをドメインプロバイダーの方で設定する。だいたい数分以内でアクティベート完了する。

## セカンダリドメインにユーザーとメールアドレスを追加する

ドメインが無事追加されたら、[ユーザーの管理](https://admin.google.com/ac/users)よりエイリアスのメールアドレスに送受信したいメールアドレスを追加していく。

![alternative.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116375/35af7653-bc17-c5c8-ed69-a68c34133563.png)

## エイリアスアドレスからメールを送信する

Gmailを開いて、**[設定]**をクリック。**[アカウントとインポート]タブをクリックして、**[他のメールアドレスを追加]**をクリックする。流れに沿って、エイリアスアドレスを[エイリアスとして扱う]チェックボタンをオンにすれば、送信ができるようになる。

ちなみに、上の手順をちゃんと踏んでいないと下記のようなエラーが発生する。

![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116375/0ed54eaf-400c-da76-cda6-246397a8707a.png)

## エイリアスアドレスからメールを受信する

上の設定が済んでいれば、メールは受信できるようになっているはず。
XAMPPでローカルDB開発環境(確認編)

<h2>ブラウザで確認する</h2>


<p>cmderからphp artisanコマンドを使用し、サーバーを立ち上げます。<br>
Laravelフォルダ内に移動します。</p>

<div class="code-snippet">
<div class="hcb_wrap">
<pre class="prism undefined-numbers lang-php">cd C:\xampp\htdocs\Laravel_CRUD
</pre>
</div>
</div>

<p>ローカルサーバを立ち上げます。</p>

<div class="code-snippet">
<div class="hcb_wrap">
<pre class="prism undefined-numbers lang-php">php artisan serve
</pre>
</div>
</div>

<p>「php artisan serve」のコマンドを実行後、「http://~」と表示されたURLをブラウザに入力することで、LaravelのWEBページを確認することができます。</p>
<p>※ルーティングで設定したURLを「http://~」の末尾に追加してブラウザから各ページを確認してください。</p>
<p>例：表示されたURLが「http://127.0.0.1:8000」の場合→「http://127.0.0.1:8000/login」</p>
<p>※ターミナルからコマンド入力に戻る場合は、「command+C」でサーバーを落とし、入力画面に戻ってからコマンド入力してください。</p>


<h2>XAMPPのMySQLにログインする</h2>
<p>ターミナルからXAMPPのMysqlにログインします。</p>
<p>XAMPPのmysqlコマンドが使用できる階層に移動します。</p>

<div class="code-snippet">
<div class="hcb_wrap">
<pre class="prism undefined-numbers lang-php">cd C:/XAMPP/mysql/bin/
</pre>
</div>
</div>


<p>mysqlログインコマンド</p>

<div class="code-snippet">
<div class="hcb_wrap">
<pre class="prism undefined-numbers lang-php">mysql -u root -p
</pre>
</div>
</div>
<p>mysqlのログインコマンドを入力、パスワードは変更していなければ入力せずにそのままEnterでログインできるはずです。</p>
MAMPでローカルDB開発環境(確認編)

<p>このページでは、下記の内容を解説していきます。</p>
<ul>
<li>Laravelで作成したページを確認する</li>
<li>ターミナルでMAMPのMySQLにログインする方法</li>
</ul>

<p>MAMP環境にLaravelを制作された方は、このページを参考に、それぞれブラウザで開いて確認してみましょう。</p>

<h2>Laravelで作成したページを確認する</h2>

<p>Laravelでは、artisanコマンドでビルトインWEBサーバーを起動することができます。<br>
まず、Laravelの中にcdコマンドで移動します。</p>
<p>ターミナルで以下のコマンドを入力して下さい。</p>
<pre class="prism undefined-numbers lang-plane"><code>cd /Applications/MAMP/htdocs/Laravel</code>
</pre>
<p>続けて、サーバーを起動します。</p>
<pre class="prism undefined-numbers lang-plane"><code>php artisan serve</code>
</pre>
<p>上記のコマンドを入力するとURLが発行されますので、ブラウザにURLを入力してページを開きます。</p>
<figure class="wp-block-image size-large">
    <img src="https://dawn-phase2-dev.s3-ap-northeast-1.amazonaws.com/curriculum/uploads/2020/06/20210212_L6_12_1_curriculum_img.png" alt="URL発行画面" class="">
</figure>
<p>すると作成中のWEBページを確認することができます<br>
あとはLaravelのルーティングで設定した後でブラウザから各ページを確認してください。<br>
例：php artisan serveで表示されたURLが「http://127.0.0.1:8000」で、Laravelで「/login」というURLをルーティングした場合は、「http://127.0.0.1:8000/login」とすることでページを開くことができます。</p>

<p>サーバー起動中はターミナルにアクセスログが表示されます。</p>
<p>コマンド入力で、Laravelを編集する際は「command + C」でサーバーを落とし、入力画面に戻してください。</p>

<p>MAMP環境のMySQLヘログイン</p>

<p>MAMP環境にアクセスします。<br>
MAMPのコマンド群は「/Applications/MAMP/Library/bin/」に格納されていますので、cdコマンドで階層へ移動し、コマンドを入力することでMAMPのログインコマンドを使用することができます。</p>
<p>ターミナルで以下のコマンドを入力して下さい。</p>
<pre class="prism undefined-numbers lang-plane"><code>cd /Applications/MAMP/Library/bin/</code>
</pre>

<p>移動したら、MAMPのMySQLにログインします。</p>
<p>下記のコマンドを入力して下さい。</p>
<pre class="prism undefined-numbers lang-plane"><code>./mysql -u root -p</code>
</pre>

<p>パスワードの入力を求められますが、MAMPのWEBスタートページに記載されているので、確認して入力して下さい。</p>
<figure class="wp-block-image size-large">
    <img src="https://dawn-phase2-dev.s3-ap-northeast-1.amazonaws.com/curriculum/uploads/2020/06/20210212_L6_12_2_curriculum_img.png" alt="MySQL情報" class="">
</figure>
<p>MAMPのデータベースにMySQLでログインできましたか？</p>

<p>ここからはサーバーサイドLESSON3で学習したように、コマンドで操作してデータベースを確認してみて下さい。<br>
以上で、MAMPでLaravel環境構築は終了になります。<br>
ここからは、もとのカリキュラムを進めてみてください。artisanコマンドを入力する箇所は、カリキュラム内容と異なるので、カレントディレクトリの表示を確認して、MAMPのLaravel直下で行う様に注意してください。<br>
ご不明点はお問い合わせチャットからご質問ください。</p>
<h2>まとめ</h2>
<ul>
    <li>artisanコマンドを使用するときは、「/Applications/MAMP/htdocs/Laravel_CRUD/Laravel/」階層で実行する。</li>
    <li>artisan コマンドでサーバーを立てる。</li>
    <li>MySQLにログインする時は、「Applications/MAMP/Library/bin/」階層でログインコマンド「./mysql -u root -p」を実行する。</li>
</ul>
React.js 勉強 #1

# React.jsを選んだきっかけ
特にありません！(笑)
ただ、業務でVue.jsを触る機会が多く、ある程度慣れてきたので、Vue.js以外がいいなーとググったところ、
知名度もあるReact.jsを知ったので一度触ってみようと考えた次第です。

まあVue.jsも触ったことあるし、サクサク進むだろうと安易な気持ちで挑んだ結果、大苦戦中・・・。

# 環境構築
[公式サイト](https://ja.reactjs.org/tutorial/tutorial.html)を参考に進めていきます。

nodeがインストールされているかを確認

```
$ node -v
```
上記コマンドを打ってエラー吐かなかればOK！
僕はVue.jsを触ってきたので、インストール済みでした。

同じようにnpmがインストールされているかを確認

```
$ npm --version
```

エラー吐かなければ、Reactプロジェクトを作成していきます。

```
$ npm install -g create-react-app
$ npx create-react-app 好きなプロジェクト名
```
上記なぜnpxにしなければいけなかったのが不明・・・。
公式によると、
> npx は打ち間違いではありません — これは npm 5.2 から利用できるパッケージランナーツールです。

と記載してあったので、その通りに打ちましたが、npmでもよかったんかな？（エラー吐いた気が）

何はともあれ、上記コマンドを叩いてエラーが発生しなければ

```
$ cd 好きなプロジェクト名
```

でディレクトリ移動し、

```
$ npm start
```

で無事に起動ができれば成功です！

# 今後について
勉強がてらReact.jsを触り始めましたが、ところどころ躓いて、やっぱり自分レベル低いなーと痛感しています・・・。
今後は考えているアプリケーションがあるので、それを作成しながら、都度学習記録として更新していけたらと思っています。
Laravel Eloquentとクエリビルダの違いを整理してみた

## はじめに
株式会社じげんの藤井です。
リフォームマッチングサイト　リショップナビの開発を担当しています。

今年度の６月に現場配属され、半年ほどLaravelを使った開発に携わってきたので、
混同しがちなクエリビルダとEloquentとの相違点をまとめます。

これからLaravelを触り始める方の参考になれば幸いです。
## クエリビルダとは？
LaravelのDB関連の機能として代表的なものに、クエリビルダがあります。

こちらはPHPを使ってSQL文を構築する仕組みで、メソッドチェーンでSQL関連のメソッドを並べてSQLを発行できるので、SQLがわかる人には直観的に理解しやすいという特徴があります。

具体的には、以下のように使用します。

```PHP
use \Iluminate\Support\Facades\DB;

$posts = DB::table('posts')
		->select('id', 'author_id')
		->where('author_id', '10')
		->orderBy('created_at', 'desc')
		->get();
```

DBファサードのtableメソッドで、扱う対象となるDBのテーブルを指定しています。
select, where, orderByに関しては生のSQLと同じで、クエリをgetメソッドで実行し、結果を$postsに格納しています。

クエリビルダは、SQLインジェクションからアプリケーションを守る機能を備えています。（Eloquentも同様）
不正なSQL文が送られてきた場合、それをSQL文ではなく単なる文字列として扱う（エスケープする）ことで、DBに対する攻撃を防ぎます。

具体的には、PHPのプリペアドステートメントに対してPDOパラメータを後からバインディング（PHPのbindValue()のような処理が内部的に走る）することで、挿入されたパラメータが生SQLとして解釈され、意図しないSQL文が発行されてしまうのを事前に防いでいます。


## Eloquentとは？

Laravelの機能として提供されているO/Rマッパーです。

RDBのテーブルとモデルを関連付ける機能を実現しており、PHPの書き方でDBを操作することを可能にします。

関連付ける具体的な方法としては、作成するモデルのクラス名を単数形で、DBのテーブル名をその複数形で作成することによって、自動的に紐づけることができます。

具体的には、以下のように使用します。

```PHP
use App\Models\Post;

$posts = Post::where('author_id', 10)
              ->orderBy('created_at', 'desc')
              ->get();
```
Postモデルに紐づいた、DBのpostsテーブルから、author_idカラムが10のものを検索し、created_atカラムを降順に並べて返却したデータを$postsに格納しています。

また、DB間の差異をEloquentが吸収する（例えば、本来MySQLとPostgreSQLで異なる書き方をするべきであるところを、Eloquentが各々に適したSQLを自動的に発行してくれる）ため、アプリケーション側からDBの種類や仕様を意識しなくて良くなります。

「アプリケーションとDBを疎結合にする」と言い、保守性が高まります。

## クエリビルダとEloquentの返り値の違い

クエリビルダとEloquentの大きな違いとして、返り値の形式があります。

### クエリビルダの返り値
```PHP
DB::table('posts')
   ->get();
```
stdClassのオブジェクト、またはそのCollectionとなります。

stdClassとはPHP標準で搭載されているClassで、プロパティやメソッドが一切定義されていないクラスです。
オブジェクトの代替として利用することがあるようです。

### Eloquentの返り値
```PHP
Post::all();
```
モデルオブジェクト、またはそのCollectionとなります。

Collectionの各要素がそのままPostクラスのインスタンスになっているため、foreachなどを使って個別の要素を取り出せば、クラス内に実装されたメソッドなども使えます。

## クエリビルダとEloquentはどのように使い分ける？

Eloquentは、実は内部処理でクエリビルダを利用しています。そのため、クエリビルダで使用できるメソッドは全てEloquentでも使用可能です。

### クエリビルダの方が適している場合
- パフォーマンスを重視する場合：一覧画面の実装など、多くのデータを取得する必要がある場合、よりパフォーマンスの良いクエリビルダが適しています。
- 複雑な条件を扱う場合：SQLに慣れていれば、クエリビルダはEloquentよりも発行されるSQLを把握しやすく、複雑な条件を適切に指定することができます。

### Eloquentの方が適している場合
- 記述を簡潔にしたい場合：Eloquentではモデル同士にリレーションを貼ることができ、関連したモデルを簡単に呼び出すことが可能です。そのため、join句を使う必要のあるクエリビルダよりも相対的に記述が短くなります。
- クエリスコープを使いたい場合：上記の「記述を簡潔にする」と近い項目ですが、クエリの共通条件をメソッド化してしまい切り出すことで、同じクエリを繰り返し書かなくて良くなる「クエリスコープ」という機能がEloquentに実装されています。繰り返しを避けることができるようになるだけでなく、条件の一部が変更になった際に修正が１箇所で足りるといったメリットがあります。

こうして、両者を使い分けていくと良いのではないかと考えています。

##　〆
私自身、両者の違いを曖昧に理解していたまま使用していましたが、今回まとめてみることで大変勉強になりました。
皆さまの参考になれば幸いです。

今回は以上となります。
絵文字が地図で使えるアイコンサーバーを作ってみたらめちゃくちゃ便利すぎた

こんにちは、[ベクトルタイルアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/vt) の2日目担当の大橋直記です。

普段は、[株式会社 Geolonia](https://geolonia.com/) でスタイルの開発を担当しています。また UNVT のメンバーとして [Charites](https://github.com/unvt/charites) にコントリビュートもしています。

前回の @hfu さんの [なぜ地図に関わり続けるのか](https://qiita.com/hfu/items/786bcc5e6dac97c4e894) の記事に引き続き書いていきます。

https://qiita.com/advent-calendar/2021/vt?fbclid=IwAR0ki1aTHCDv22rUx2nX8MBAsbgFL65vAem1rpva3662kriSusz5iCNCFaM

先日、あるプロジェクトをやっている時に 絵文字をスプライトに使えれば良いよねという話になりました。

なので、絵文字（[Twemoji](https://twemoji.twitter.com/)）を地図アイコン(Mapbox GL JS)として配信しているアイコン用のサーバーを作ってみました。

## デモ

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142797/a4eaf4e1-c266-8f63-b3b8-dda5a85bfa37.png)|
|:--|


デモURL
https://naogify.github.io/emoji-style/

レポジトリ
https://github.com/naogify/twemoji-sprites


## 使い方

以下 URL を `style.json` の `sprite` の値にセットしてください。

```
https://naogify.github.io/twemoji-sprites/icons
```

次に、style 内でアイコンを指定する場合は指定したい絵文字を `icon-image` に指定してください。

### 例

🚌 をアイコンとして使用する。

```
icon-image: 🚌
```


実際にスタイルとして実装しているレポジトリもあるのでご参考ください。
https://github.com/naogify/emoji-style


### 使用可能な絵文字一覧

使用可能な絵文字一覧はこちらをご参考ください。

https://raw.githubusercontent.com/naogify/twemoji-sprites/gh-pages/icons.json

顔文字や、人、記号系のアイコン及び、上記のURLを開き  豆腐文字になっている文字はご使用いただけません。ご了承ください。

Windows 環境では使用できる絵文字がかなり制限されてしまいます。（Macで指定した絵文字アイコンの閲覧は可能ですが、Windows で指定できる絵文字に制限があります）申し訳ありません。

不具合があれば [Issue](https://github.com/naogify/twemoji-sprites/issues/new) にてご報告頂けると助かります。

## 課題
- Windows環境ユーザーが使用可能な絵文字の種類が少ない。

絵文字を直接指定できるようにではなく [CodePoint](https://ja.wikipedia.org/wiki/%E7%AC%A6%E5%8F%B7%E7%82%B9) `例: 26f1 ⛱` 等も検討していたのですが、指定方法が直感的でないので、絵文字を直接指定する方法にしました。もし CodePoint 指定の方が良いなどフィードバックがあればお聞かせください。

## 感想

自画自賛でなんですが、`icon-image: 🎁`のように絵文字を直接指定できるの **便利すぎない** ですか？(Macユーザーにとっては) GIS界隈の方だけでなく、Webの方にも普段使っている絵文字が地図のデザインに使えるようになったので、地図開発参入のハードルが下がったと思います。ぜひお試しください！

## 貢献

プルリクエストや Issue はいつでも歓迎です！

[https://github.com/naogify/twemoji-sprites](https://github.com/naogify/twemoji-sprites)

## おわりに

次は @T-ubu さんが「ArcGIS onlineで地理院地図Vector（仮称）のベクトルタイル（ArcGISサーバー以外から供給されているもの）を表示してみる」について書いてくれるそうです。楽しみです!
振り返り②(これいる？作っとく？の会話記録)

振り返り２回目です。
今回もどうしようね？って３人で話した結果の記録です。

#決まったこと
######サーバーのお金、どうする？
→会社の人に要相談(AWS1年間無料プランがあったけど…)
→後日菊池さんに聞いたところ、お金は気にしなくていいよとイケメンな回答された



######toolとfrontいる？
→stgとprodいる？金銭的な問題のため自分たちでは決められないねえ。。。
→菊池さん「dev環境だけ作ればいいよ」



######アカウント制限どうする？いる？
→必要ないかと思ったけど、Laravelでアカウントの権限のところを作るのは調べたところ、
　容易そうなので、やってみたいかもってことで作ることに



######マスター権限だけでできることって何かある！？
→アカウント削除とかユーザー一覧が見られるくらいになりそう
→とりあえず作っておこ！


######画面仕様書とかテーブル設計書とかワイヤー作る？
→そのほうが管理しやすいと思われる
→個人的にドキュメント作るのはいい経験だと思うので、作っておきたい
→菊池さん「簡易的なシステム構成図とか書くと整理できていいかもね」
 私「じゃあ作ってみよう〜」




進めていくうちに他にも決めることがいろいろ出てくるだろうけど、
とりあえず始まったばかりはこんな感じだろって思いました。



written by 大森
複数のAWSアカウントにあるAWS CodeCommitリポジトリを切り替えて使用する

## Goal

AWS CodeCommitで複数のAWSアカウントにあるAWS CodeCommitリポジトリを適宜切り替えて使用する際の手順を示します。

### Authoring Guidelines

* 後日、修正する予定です。

## References

本文の手順は、次の文書を参考に作成しました。

* "[I need to access CodeCommit repositories in multiple Amazon Web Services accounts with SSH credentials](https://docs.aws.amazon.com/codecommit/latest/userguide/troubleshooting-ssh.html#troubleshooting-ssh-multi)". Amazon Web Services, Inc. Retrieved November 29, 2021.

## Pre-Requisites
本文の手順は、次の環境で実施、検証しました。

* Windows 10, build 19043.1348

## How To

以下の場所にあるSSHのコンフィグレーションファイルを任意のエディタで編集します。

* Linux, macOS - ~/.ssh/config
* Windows - %USERPROFILE%\.ssh\config

コンフィグレーションファイルに書き込む内容は、次の通りです。

```text
Host codecommit-1
  Hostname git-codecommit.ap-northeast-1.amazonaws.com # 1つ目のAWSアカウントで実際の接続に使用するホスト名
  User xxxxxxxxxxxxxxxxxxxxx # 1つ目のAWSアカウント用のSSHキーID
  IdentityFile ~/.ssh/codecommit_rsa_1 # 1つ目のAWSアカウント用のSSH秘密鍵へのパス
 
Host codecommit-2
  Hostname git-codecommit.ap-northeast-1.amazonaws.com # 2つ目のAWSアカウントで実際の接続に使用するホスト名
  User xxxxxxxxxxxxxxxxxxxxx # 2つ目のAWSアカウント用のSSHキーID
  IdentityFile ~/.ssh/codecommit_2_rsa # 2つ目のAWSアカウント用のSSH秘密鍵へのパス
```

Gitコマンド発行時に、これまで指定していたホスト名部分をコンフィグレーションファイルに記載した "Host" の値で指定します。

```bat
REM これまでの書き方
git clone ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/%REPOSITORY_NAME%

REM これからの書き方
git clone ssh://codecommit-1/v1/repos/%REPOSITORY_NAME%
```
MySQLで変数を便利に使ってみる

この記事は[スタンバイ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/stanby)の1日目の記事です。

MySQLで変数を使用して便利だと感じた機能を書きます。

# TL;DR
  - MySQL上で変数を使用できる
  - selectの結果を変数に使用できる

# MySQL上の変数とは
MySQLをコンソールから操作をする際、MySQL変数を使用して、決まった作業、複雑なデータのとり方を簡単に行う事ができるようになります。
特にMySQLはWith句を使用できないので、簡易なものは変数で代替することも可能であります。

## MｙSQL変数で出来ること・出来ないこと
### 出来ること

- 変数に任意の文字列、数字を格納することが出来る
- select文の結果を使って変数を格納することが出来る

### 出来ないこと
- DBセッションをまたいだ変数は宣言できない
- テーブルデータを配列的に持つことは出来ない


## 変数の使い方
最も簡単な変数宣言方法、呼び出し方です。

```
### 変数の設定
mysql>  set @user = "scott";

### 変数の使い方
mysql> select @user;
+-------+
| @user |
+-------+
| scott |
+-------+
```

設定した変数は検索キーワードにも使用できます。

```
mysql> select * from user where name = @user;
+-------+----------+
| name  | password |
+-------+----------+
| scott | tiger    |
+-------+----------+
```

# select 文で変数を定義する
返り値が1個の場合に限り、select文の返り値を変数に指定することができます。宣言方法は2通りありますが、どちらでも同じ宣言が出来ます。

```
### select文で変数の宣言。into @[変数名]で変数定義できます
mysql> select password into @password from user where name = @user;
（or)
mysql> select @password := password from user where name = @user;

mysql> select @password;
+-----------+
| @password |
+-----------+
| tiger     |
+-----------+
```

日時の取り扱い（15分前、1日前、1ヶ月前など）にも便利です。時系列の履歴データを扱うときには必須と言ってもいいかもしれません。

```
### 15分前、1日前、1ヶ月前を変数に追加
mysql> select
  @now        := now() ,
  @15min_ago  := now() - interval 15 minute,
  @1day_age   := now() - interval 1 day,
  @1month_ago := now() - interval 1 month;

###参照する
mysql> select @15min_ago, @1day_ago, @1month_ago;
+---------------------+---------------------+---------------------+
| @15min_ago          | @1day_ago           | @1month_ago         |
+---------------------+---------------------+---------------------+
| 2021-11-28 00:43:22 | 2021-11-27 00:58:22 | 2021-10-28 00:58:22 |
+---------------------+---------------------+---------------------+
```
上記で宣言した変数を使用することで、「現在から1日前までに修正されたレコード一覧。複数のテーブルから取得する」みたいなことが楽にできるようになります。

```
mysql> select * from user_data 
       where updated_at between @now and @1day_ago;

mysql> select * from user_history 
       where updated_at between @now and @1day_ago;

mysql> select * from event_history 
       where updated_at between @now and @1day_ago;
```


# 感想
* 変数を使用することで実行するSQLが簡単になるので、ミスの要素が少なくなる
* 定型的な手順を作成しやすくなる
* procedureや他の言語に置き換えがやりやすくなる
[Swift] Compositional Layouts で Readable Width の対応をする


# 前置き

多くの会社で ``Compositional Layouts`` を使っているところが増えてきたのではないでしょうか？

今回は ``Compositional Layouts`` におけるiPad対応（Readable Width）を考えてみました。実際のリリースしているプロダクションの事例を元に紹介していきたいと思います。



# 考察

## 1. 既存の方法

実装方法によって対応方法が変わってきます。

① デフォルトの``UITableView`` のセルは ``cellLayoutMarginsFollowReadableWidth`` を `true` にすることで対応可能です。

```.swift
tableView.cellLayoutMarginsFollowReadableWidth = true
```

② `Interface Builder` で行う場合、親の`View`で`Follow Readable Width` にチェックをつけ、`Constraints`を調整することで対応が可能です。

![check](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/1e9be019-d7c1-d83e-ffa4-50539ffca6b5.png)

③ `Autolayout` で行う場合、`readableContentGuide` に設定することで対応できます。

```.swift
NSLayoutConstraint.activate([
    tableView.leadingAnchor.constraint(equalTo: readableContentGuide.leadingAnchor),
    tableView.trailingAnchor.constraint(equalTo: readableContentGuide.trailingAnchor)
])
```

<br>

↓ 具体的な実装事例はこちらを参考にすると良いでしょう

https://qiita.com/0eta0/items/56709b068069e8e5f15a



## 2. 既存の問題点

`Compositional Layouts`を導入した画面に既存の方法を取り入れた場合、先程の ② or ③ で `UICollectionView` の全体に `Constraints` を設定することになるかと思います。

この方法は、数行のコードで済み、メンテナンスしやすいですが、**スクロールのタップ範囲が狭まってしまう**という問題があります。

- 動作例

![scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/e4641d3e-31b7-375b-b52e-ff29d8883f1b.gif)

この場合、左右スクロールバーより外は触っても何もスクロールが起きません。


まだ、iPadのデザイン対応が間に合っていない場合に、恒久対応としてはすぐに導入するくらいの温度感が良いでしょう。


## 3. Compositional Layouts での対応方法

`Compositional Layouts` は コードの`frame`でレイアウトを設定していくので、これに合わせて幅を調整していくことになります。

```.swift
// 画面幅
let viewWidth = view.frame.width

// 端末ごとの readable width を取得
let readableWidth = view.readableContentGuide.layoutFrame.width

// 左右のマージン
let margin = (viewWidth - readableWidth) / 2

// 横幅の最大値
let dimension: NSCollectionLayoutDimension = .absolute(readableWidth)
```

画面から `readableContentGuide` の `layoutFrame` が取得でき、ここから各端末の `readable width`  を取得することができます。また、中央寄せにするために、左右のマージンを差分から計算します。

実際に設定するコード例としてはこのような形です。

```.swift
let item = NSCollectionLayoutItem(layoutSize: .init(
    widthDimension: .fractionalWidth(1),
    heightDimension: .fractionalHeight(1)
))

let group = NSCollectionLayoutGroup.horizontal(layoutSize: .init(
    widthDimension: .absolute(readableWidth), // readableな横幅を指定する
    heightDimension: .absolute(100)
), subitem: item, count: 3)

let section = NSCollectionLayoutSection(group: group)
section.contentInsets = .init(top: 0, leading: margin, bottom: 0, trailing: margin) // 中央寄せ
```

`section` の `contentInsets` を調整することで中央寄せにしています。

<br>

- プロダクションでの画面例

![diff](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/8d268da4-caae-d604-b8a3-4b702c048652.png)

このように `frame` を操作することで `Compositional Layouts` でも iPad の `readable width` に対応することが可能となります。

## 4. iOS14 以降

ここまで実装方法を書いてきましたが、iOS14 以降の `Compositional Layouts` では `contentInsetsReference` で設定するだけで済みます。

![Screen Shot](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/f07b2135-af7a-288f-25b6-80e6e5f7b713.png)

https://developer.apple.com/documentation/uikit/uicontentinsetsreference



# 終わりに

iPad 対応は後回しにされがちですが、そこまで手間もかからず実装できるので、是非試してみて欲しいです。

皆さんも iPad 対応をすることで、快適な iPad ライフを実現しましょう！
WebブラウザでOSのダークモード判定 ~社内で大不評の【誰得？】シリーズ~

[パーソンリンク アドベントカレンダー](https://qiita.com/advent-calendar/2021/personlink)2日目です！🎉

# 内容
```
window.matchMedia('(prefers-color-scheme: dark)').matches
```
これがtrueの場合にはdarkモード。


# なにこのシリーズ
社内で不評なたまに呟く「誰の得になるの！？」シリーズです。

さようならー
アルファベット順で指定のアルファベットを「何番目」かを出力する

何度かアルファベットの取り扱いがあったので、メモとして残します。

## 1.アルファベットを変数に代入
```
import string

alphabets = string.ascii_uppercase
alphabets
# ABCDEFGHIJKLMNOPQRSTUVWXYZ
```


## 2.str.index()でインデックス番号を取得
```
alphabets.index("D") + 1
# 4

```

## 3.typeを調べる
```
type(alphabets)
# str
```
Webブラウザの判定 ~社内で大不評の【誰得？】シリーズ~

[パーソンリンク アドベントカレンダー](https://qiita.com/advent-calendar/2021/personlink)9日目です！🎉

# 内容
```
const UA = window.navigator.userAgent.toLowerCase();

if (UA.indexOf('msie') != -1 || UA.indexOf('trident') != -1) {
    console.log('IE');
} else if (UA.indexOf('edge') != -1) {
    console.log('Edge');
} else if (UA.indexOf('chrome') != -1) {
    console.log('Chrome');
} else if (UA.indexOf('safari') != -1) {
    console.log('Safari');
} else if (UA.indexOf('firefox') != -1) {
    console.log('Firefox');
} else if (UA.indexOf('opera') != -1) {
    console.log('Opera');
} else {
    console.log('None');
}
```
ブラウザによって内容変えたいのであればこれでいけるはず。


# なにこのシリーズ
社内で不評なたまに呟く「誰の得になるの！？」シリーズです。

さようならー
macOS に phpenv で PHP 8.1 をインストールする

[PHP 8.1.0 が2021年11月25日にリリースされて](https://www.php.net/archive/2021.php#2021-11-25-1)、 phpenv + php-build では2020年11月29日に PHP 8.1.0 が追加された（ちなみに、 [PHP 8.1.0 を追加する PR は私が送った](https://github.com/php-build/php-build/pull/691)）ので、早速 macOS にインストールしてみた。

といっても [PHP 8.0 のとき](https://qiita.com/dounokouno/items/0883ff318846072efbc4)と変わらず、下記のコマンドでインストールできた。

```
$ PHP_BUILD_CONFIGURE_OPTS="--with-bz2=/usr/local/opt/bzip2 --with-iconv=/usr/local/opt/libiconv" phpenv install 8.1.0
```

下記のような感じで、問題なくインストールできていることを確認した。

```
$ phpenv versions
  5.6.40
  7.0.33
  7.1
  7.1.33
  7.2
  7.2.34
  7.3.32
* 7.4 (set by /Users/tagawa/.anyenv/envs/phpenv/version)
  7.4.26
  8.0
  8.0.13
  8.1
  8.1.0
$ phpenv shell 8.1.0
8.1.0
$ php -v
PHP 8.1.0 (cli) (built: Nov 29 2021 11:23:44) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.0, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.0, Copyright (c), by Zend Technologies
    with Xdebug v3.1.1, Copyright (c) 2002-2021, by Derick Rethans
```

以上です。どなたかのご参考になれば幸いです。

---

以下、インストールした環境やエラーメッセージなどのメモ。

# 環境

- macOS: 12.0.1
- phpenv: v0.9.0-rc.1
- php-build: v0.11.0dev

# はじめに実行したコマンド

phpenv を最新の状態にして、

```
$ phpenv update
```

PHP 8.1.0 をインストールしようとしたところ、 [PHP 8.0 のとき](https://qiita.com/dounokouno/items/0883ff318846072efbc4)と同じように `bzpi2` と `iconv` でエラーが発生した。

```
$ phpenv install 8.1.0
```

# エラーメッセージ

## bzip2

```
configure: WARNING: unrecognized options: --with-png-dir, --with-libxml-dir, --with-icu-dir
configure: error: Please reinstall the BZip2 distribution
```

## iconv

```
configure: WARNING: unrecognized options: --with-png-dir, --with-libxml-dir, --with-icu-dir
configure: error: Please specify the install prefix of iconv with --with-iconv=<DIR>
```

# 解決方法

[PHP 8.0 のとき](https://qiita.com/dounokouno/items/0883ff318846072efbc4)と同じように、 `brew` で `bzip2` と `iconv` をインストールして、冒頭のコマンドのように `phpenv` でインストールする際にパスを渡す。
AWS Lambda + S3 + Python で PDF を扱う際のTips


# 初めに

PDF を `AWS` で扱う際に、ローカルの環境と `Lambda` や `S3` では少し扱いに注意が必要だったので、忘れないようにまとめておきます。



## 1. S3 から PDF を読み込む

`Python` で PDF を扱う場合は `PyPDF2` を使うことが多いかと思います。


ローカル環境で読み込む場合は


```.py
# example code
from PyPDF2 import PdfFileReader

PDF_PATH = 'pdf/xxx.pdf' # ローカルのディレクトリ
pdf = PdfFileReader(PDF_PATH)
```

とパスを指定するだけで簡単に読み込むことができます。

`S3` から PDF を読み込む場合は少し工夫が必要です。


```.py
# example code
import boto3
from PyPDF2 import PdfFileReader
from io import BytesIO

PDF_PATH = 'data/pdf/xxx.pdf' # S3バケットのディレクトリ
BUCKET_NAME = 'your-bucket-name'

bucket = boto3.resource('s3').Bucket(BUCKET_NAME)
pdf_obj = bucket.Object(path).get()['Body'].read() # S3からの取り出し
bytes = BytesIO(pdf_obj) # 変換する
pdf = PdfFileReader(bytes)
```

バケットからただ読み込むだけでは機能せず、`BytesIO` で 変換することで扱うことができます。



## ２. Lambda上で PDF の一時編集する

これは PDF に限らずですが、`Lambda` で書き込む際は `/tmp/` 配下でないとエラーになります。

- 実際のエラーログ
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/0a1fa5c3-b331-015a-168b-a6fe2977ef3a.png)

他のディレクトリを指定すると、このようなエラーになります。

## 3. Lambda から PDF ファイルを取得する

API として PDF を返却する場合があると思います。


```.py
# example code
with open(output_file, 'rb') as data:
    pdf = data.read()
```


PDF を開いて `Lambda` 上でクライアント側に `return` した場合、自動で `utf-8` に変換されるようで、日本語など無効な文字があるとエラーが発生します。

```
[ERROR] UnicodeDecodeError: 'utf-8' codec can't decode byte 0x80
```

そこで、`base64`で変換します。そうすることでエラーを回避することができます。

```.py
# example code
import base64

with open(output_file, 'rb') as data:
    pdf = data.read()
    return base64.b64encode(pdf).decode('utf-8')
```

当然ながらクライアント側でも対応が必要になるので注意してください。

### HTMLで表示する場合

デコードは必要ないですが、特定の書き方が必要です。

```.html
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);">

  <embed style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf"
    src="data:application/pdf;base64,/* base64 の文字列を入れる */" />

</body>

</html>
```

(引用：[ブラウザでbase64エンコードしたPDFファイルを表示する](https://qiita.com/k_hoso/items/7043104ad2e111dc2f7d))

### iOS(Swift)で表示する場合

クライアント側では、変換した後に `PDFKit` の `PDFDocument` に Data型でセットします。

```.swift
import PDFKit

let pdf = PDFView()
pdf.autoScales = true
pdf.displayMode = .singlePageContinuous

// 変換する
if let data = Data(base64Encoded: str) {
    pdfView.document = .init(data: data)
}

pdfView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(pdfView)
NSLayoutConstraint.activate([
    pdfView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    pdfView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    pdfView.topAnchor.constraint(equalTo: view.topAnchor),
    pdfView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
```

# 終わりに

`Lambda` 上で実行しないと分からないエラーがそれなりにあるので、１つずつクリアしていくのが苦労しました。また、知見が増えたら追加していこうと思います。



## 参考文献

https://stackoverflow.com/questions/48373967/issue-with-pypdf2-and-decoding-pdf-file-from-s3

https://qiita.com/namkim/items/3edb9abe3871963bf0f7

https://qiita.com/k_hoso/items/7043104ad2e111dc2f7d
Gitリポジトリを古いAWSアカウントから新しいAWSアカウントへ移行する

## Goal

AWS CodeCommitに既にあるGitリポジトリを古いAWSアカウントから新しいAWSアカウントへ移行する際の手順を示します。

### Authoring Guidelines

* AWS CodeCommitに限らず、GitHubからAWS CodeCommitへの移行、GitHubからGitHubへの移行でも、読み替えによって手順の大筋が把握できるようにAWS Management ConsoleとGitコマンドでの手順で主な流れを記載します。
* 自動化のため、将来的にAWS CodeCommitのAPIをコールするAWS CLIによる手順も追記する予定です。

## References

本文の手順は、次の文書を参考に作成しました。

* "[Migrate a Git repository to AWS CodeCommit](https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/how-to-migrate-repository-existing.html)". Amazon Web Services, Inc. Retrieved November 29, 2021.
* "[How to Rename the master branch to main in Git](https://www.git-tower.com/learn/git/faq/git-rename-master-to-main)". Tower. Retrieved November 29, 2021.

## Pre-Requisites

本文の手順は、次の環境で実施、検証しました。

* Windows 10, build 19043.1348

## How To

### 新しいリポジトリを作成する

次の任意の手段で、新しいリポジトリを作成します。

* AWS Management Console
* AWS CLI
* AWS CloudFormation

### 古いリポジトリの内容を新しいリポジトリへ反映する

> [!IMPORTANT]
> この手順では、一度もコミットされていない新しいリポジトリへ古いリポジトリの内容を移行します。既に何らかのコミットがなされている新しいリポジトリへ古いリポジトリの内容を増分移行する手順ではありません。

古いリポジトリのベアリポジトリをローカルに作成し、古いリポジトリの内容を新しいリポジトリへ反映します。

```bat
git clone --mirror %OLD_REPOSITORY_PATH%
CD %OLD_REPOSITORY_NAME%.git
git push %NEW_REPOSITORY_PATH% --all
git push %NEW_REPOSITORY_PATH% --tags
```

> [!IMPORTANT]
> `git push --all` だけではタグが反映されないため、別途 `git push --tags` を実行する必要があります。

成功したら、ローカルに作成した古いリポジトリのベアリポジトリを削除します。

```bat
CD ..
RD /S %OLD_REPOSITORY_NAME%.git
```

### 新しいリポジトリのデフォルトブランチ名を変更する

BLM後の世界情勢に合わせて、新しいリポジトリのデフォルトブランチ名を "master" から "main" へ変更します。
新しいリポジトリをローカルへクローンし、ローカルリポジトリでブランチ名を変更します。

```bat
git clone %NEW_REPOSITORY_PATH%
CD %NEW_REPOSITORY_NAME%
git branch -m master main
```

ローカルリポジトリでブランチ名変更により作成したmainブランチをリモートリポジトリに反映します。

```bat
> git push -u origin main
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
To %NEW_REPOSITORY_PATH%
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

次の任意の手段で、新しいリポジトリのディフォルトブランチを "master" から "main" へ変更します。

* AWS Management Console
* AWS CLI

ローカルリポジトリでブランチ名変更により削除したmasterブランチをリモートリポジトリに反映します。

```bat
> git push origin --delete master
To %NEW_REPOSITORY_PATH%
 - [deleted]         master
```

> [!IMPORTANT]
> ディフォルトブランチを "master" から "main" へ変更せずにmasterブランチの削除をリモートリポジトリに反映しようとすると、エラーにより失敗します。
期間限定でCSSを切り替える ~社内で大不評の【誰得？】シリーズ~

[パーソンリンク アドベントカレンダー](https://qiita.com/advent-calendar/2021/personlink)16日目です！🎉

# 内容
```
<link id="StyleSheetFilePath" rel="stylesheet" href="base.css" />
<script>
window.onload = function() {
  var nowDate = new Date();
  var startDate = new Date('2021/12/24 0:00:00');
  var endDate = new Date('2021/12/25 23:59:59');
 
  if ( startDate <  nowDate && nowDate < endDate ) {
    var styleSheetFilePathElement = document.getElementById("StyleSheetFilePath");
    styleSheetFilePathElement.href = "xmas.css";
  }
}
</script>
```
クリスマス限定でCSSを切り替えたいのであればこれでいけるはず。
（試してないので多分としか言いようがないけど。。。）

JavaScriptで日付とかは持たない方がいいけどね。PCの時間変えられたら意味ないので。。。

# なにこのシリーズ
社内で不評なたまに呟く「誰の得になるの！？」シリーズです。

さようならー