OmniAICreator/Qiita-1.07M huggingface dataset:
【gitコマンドについて(余談あり)】

こんばんは。
入社2年目文系出身のエンジニアです。
私が良く業務で使うgitコマンドをまとめてみました。

## git init
リモートリポジトリを作成するコマンド

#### そもそもリモートリポジトリとは？
ネットワーク上やWebサービス上に作成するプロジェクトを管理するもの
自分のPCのフォルダ上に作る「ローカルリポジトリ」と連携させることで、
開発者とソースコードを共有することができる。

## git clone
リポジトリ一覧のgitのURLをコピーし、自分のPCのフォルダ上に複製するコマンド
実行後、remote...と出てきたら成功(5~10分かかる)

## git pull
リモートリポジトリの最新の内容をローカルリポジトリに引っ張ってくる(更新する)コマンド
【余談】
コマンドの中で一番git pullを使用しています。
古いソースコードだと後々怖いので、毎日冷や冷やしながら打っている自分がいます笑

## git status
ファイルの最新の状態を表示するコマンド
【余談】
コミットする前に一度このコマンドを使用すると安心します。
なぜならコミットする前に追加されるべきファイル名を緑色で表示してくれるので、
確認のために非常に有効だと思うからです。

## git commit -m ""
変更内容をローカルリポジトリに登録するコマンド
【余談】
git commitをよく使用する方が多いと思いますが、
私はgit commit -m ""でコミットします。
なぜなら、""の中にどういった内容でコミットされているか
コメントを残すことができるからです。

## git merge 
各ブランチで編集した作業を一気に反映するコマンド
【余談】
feature/〇〇の内容をdevelopにマージする、もしくはdevelopの内容をmasterにマージすることが多いです。masterにマージするときはいつも緊張しながら打っています。

## git reset --hard HEAD^
マージを間違えて行ってしまった時、取り消すコマンド
【余談】
手慣れている時に、最新ソースを取り込まないまま、マージしてしまいました。
一時は頭真っ白になりかけましたが、お客様に教えていただき、無事もう一度マージすることに成功しました。見直しすることは大事だなと再認識しました。

## git push
コミットした内容をリモートリポジトリに反映するコマンド
【余談】
プッシュしているときは、ちゃんと反映されているかドキドキしながら、
BacklogなりSourcetreeを見守っています。(成功できたら一安心！)

## git checkout -b feature/〇〇
新しくブランチを作成かつ作成したブランチに移動もしくは切り替えるコマンド

#### そもそもブランチとはなんぞや？
プロジェクトから分岐させることで、プロジェクト本体に影響を与えず開発ができる機能
主にmasterブランチ、developブランチ、featureブランチで分けられる

#### masterとは？
本番環境のブランチ

#### developとは？
開発環境のブランチ
主にmasterからブランチを切らないといけない

#### featureとは？
機能の追加や改修を行うブランチ
主にdevelopからブランチを切らないといけない

##さいごに

拙い文章だったかもですが、ここまで読んでくださりありがとうございました。。
人が密集しないようにGoogleFormを使いたい

タイトルには具体的なものを書くべきなのだが、この抽象的なタイトルが実は具体的にやりたいことの文字化なのである。

これは、このコロナ禍で**PTA活動**に参加し、今までのように人を集めたイベントができない中で、どのような活動であれば再開可能であるか模索し、実行した記録のイントロダクションである。

#何が出来上がったのか#

GoogleFormとその回答シートで使うGoogleAppScript

* GoogleForm
  + 回答入力用のGoogleForm（一般会員用）
  + 返信メールの件名と本文を入力するGoogleForm（運営用） 

* GoogleAppScript
    * 二重エントリー防止のマクロ（運営用）
    * メール送信用マクロ（運営用）
    * マクロのヘルプを表示するマクロ（運営用）

#具体的な中身については？#

少しずつ、記事にしていきます。元々は上に記載した「メール送信マクロ」のみを記事にする予定だったのですが、[積極的に記事を投稿すべきという記事](https://qiita.com/Shi-raCanth/items/efb34868368b970d8f00 "qiitaに記事を投稿してみての気づき(積極的に記事を投稿すべき！)")を見つけたことにより、それに甘える形で記事を書いてみました。なので、この記事にはまだ技術的な内容がありません。ただ、最後に説明を加えてこの記事を締めたいと思います。
私は今回のプロジェクト（PTAの専門委員会活動）に一委員として参加しましたので、詳しいことは知りません。あくまでも想像・憶測・妄想が含まれていることを念頭に置いていただいてお読みいただければ幸いです。そして、今回のプロジェクトは例年通りの活動をするために**グーグルフォームを使って**行うということが示されていたのです。しかも、これを伝えている本人もよく分かっていないという状態です。
私はてっきりGoogleを活用して在庫管理をするイメージでして、[こんなもの](https://qiita.com/Daisuke-Mo/items/78268778bdcd7ac8e03a "【LINEBot】で店舗の在庫を確認出来るものを作りたい。プログラム初心者の苦闘・・")が作れたら良いなと考えていました。
幸いにして、別の学校のPTAでGoogleFormを作成されたことのある方がおりましたので、私はその方のサポートという形で関わらせて頂けたのですが、本当にイメージのギャップが深過ぎて危険なプロジェクトでした。結果的には好評（もちろん先生から）で終われたので良かったのですが、パソコンの影に隠れたかなりの人的作業（私ではなく他の委員さんたち）に支えられたシステムでした。
ということで、個別の記事は個別の記事でノウハウ的にまとめますが、PTAでGoogleFormを採用する方には技術の裏に隠れたポイントもお伝えできればと考えております。

最後までお付き合いいただきありがとうございます。
AndroidStudioでのFlutter開発スッキリ設定

AndroidStudioでFlutterを開発していると、
エミュレータがIDEと統合されておらず、画面の確認が面倒であったり、
エミュレータのストレージが確認できないなど不便をしていました。
これが簡単に解消できたので、メモがてら投稿します。

# Before
AndroidStudioとエミュレータが分離してて良くない、、、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/69cf4618-c7eb-8fea-b443-6cc46b9f2164.png" width=70%>

# 解決策
[File] > [Project Structure] > [Modules]の構成にAndriodを追加してOK
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/aa27ec19-2ebc-cc16-57fb-5d7d6a4927e7.png" width=30%>

[View] > [Tool Windows]にEmulatorとDevice File Explorerが表示される(´；ω；｀)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/7a880ca8-7258-ed09-6ce2-2f1be80262ac.png" width=30%>

# After
しっかりエミュレータと統合できました！
新規プロジェクト作成ごとに設定必要ですが、この程度の手間なら良いかなと思います。
※統合設定は別途実施しないといけないので、参考を確認してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/4d9087c0-af2f-521a-499c-a46d78010d88.png" width=70%>

# 参考
[Android Studio で Android Emulator を直接実行する](https://developer.android.com/studio/run/emulator?hl=ja#run-emulator-studio)
【C#】init アクセサーについてのメモ

blogで雑にまとめたC# 9.0から使えるinit アクセサーについて、
ちゃんと検証したので記事にした

https://gtakeshi.hatenablog.com/entry/2022/01/23/091359


# 公式ドキュメント

**公式は正義**  
https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/classes-and-structs/properties


C＃8.0 以前では model 定義の際には

``` c#
public class HogeClass
{
  public string hoge { get; set; }
}

```

のように、値取得のためのgetアクセサーと値を格納するためのsetアクセサーを使用できた
ただし、setをつけると後から値が変更されてしまい、具合がよくないことがあるので
読み込み専用の model として

``` c#
public class GetOnlyClass
{
    public string? property { get; }

    public GetOnlyClass()
    {
    }
    public GetOnlyClass(string property)
    {
        this.property = property;
    }
}

// get の場合はコンストラクタで値を設定する
var getOnlyClass = new GetOnlyClass("hoge");
Console.WriteLine(getOnlyClass.property);

// getOnlyClass.property = "fuga"; // NG　値の更新はできない
```
と、書いていた
ちなみに、set アクセサーがないとオブジェクト初期化子も使用できないので、

``` c#
var getOnlyClass = new GetOnlyClass { property = "hoge" }; // NG
```

もできないといった制約があった
↓のように、読み取り専用だよって言われる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/21011d7a-ed71-66a4-b3db-ad797c6cc4d2.png)

# init アクセサーについて

C# 9.0 からはオブジェクト初期化子のみで値の設定ができる、initが使用できるとのこと
書き方は簡単で、set アクセサーの変わりにinit を使用するだけでよい

``` c#
public class InitClass
{
    public string? property { get; init; }
}

// オブジェクト初期化子で値の設定ができる
var initClass = new InitClass { property = "hoge"};
```

ちなみに、↑の状態でコンストラクタ内で値を設定しようとすると
怒られる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681992/2092efd6-d4a6-f373-ed5e-b6d6eb08c55b.png)

ので、コンストラクタを書けば、コンストラクタでの値の設定をすることができる

``` c#
public class InitCconstructorClass
{
    public string? property { get; init; }

    // 引数なしのコンストラクタを定義する
    public InitCconstructorClass()
    {
    }

    public InitCconstructorClass(string property)
    {
        this.property = property;
    }
}

```

この書き方なら、コンストラクタと初期化時両方で値の設定ができる（かつ、後で変更ができない）
ので、get onlyよりも使い勝手がよい
GCP Professional Data Engineer 資格勉強方法

GCP(Google Cloud Platform)のProfessional Data Engineer 認定資格に2021年12月に合格したので、勉強方法を共有します。

# 試験概要
試験ガイドを読み込み出題範囲を理解する。

https://cloud.google.com/certification/guides/data-engineer

# 勉強方法

## Coursera
CourseraにてGoogle Cloudが提供しているプロフェッショナル認定がある。資格合格に必要なこと内容がほとんど充足している。

https://ja.coursera.org/professional-certificates/gcp-data-engineering

下記、6つのコースが入ったものとなっている。
1. Google Cloud Big Data and Machine Learning Fundamentals
2. Modernizing Data Lakes and Data Warehouses with Google Cloud
3. Building Batch Data Pipelines on GCP
4. Building Resilient Streaming Analytics Systems on Google Cloud
5. Smart Analytics, Machine Learning, and AI on GCP
6. Preparing for the Google Cloud Professional Data Engineer Exam

## 書籍
GCP全体のサービス概要の知識習得して以下書籍がおすすめです。

https://www.amazon.co.jp/gp/product/B07S1LG1Y1

https://www.amazon.co.jp/gp/product/B0721JNVGT

https://www.amazon.co.jp/gp/product/B07C85YMCW

AIやGCPを用いたデータ分析構築関連などこの試験にフォーカスした書籍として以下がおすすめです。

https://www.amazon.co.jp/gp/product/B00UAAK07S

https://www.amazon.co.jp/gp/product/B07F6YR7XT

https://www.amazon.co.jp/gp/product/B07R39RLSQ

## Udemy
模擬試験よりやや難しいが、日本語で試験を受けるときの独特な日本語訳感は模擬試験よりこっちが近い。
問題数も多く理解している部分を広く確認することができる。

https://www.udemy.com/course/gcp-pde-test-ja/

https://www.udemy.com/course/google-cloud-professional-data-engineer-ja/

## 模擬試験
模擬試験を提供しているで腕試しに。
理解が十分なところ不十分なところの把握および実際の試験の感じがわかる。

https://cloud.google.com/certification/sample-questions/data-engineer

模擬試験では結果と簡易な解説しかないので、詳細な解説が欲しい場合に。

https://cloud-ace.jp/tech_blog/professional-data-engineer-practice-exam-vol1/

https://cloud-ace.jp/tech_blog/professional-data-engineer-practice-exam-vol2/

# TIPS
状況に応じた最適なサービス、ベストプラクティスなサービスを選択するに当たって似たようなサービスの違いやメリット/デメリットを理解する。
Google Cloudの下記に記載するサービス群は試験ではコアとなる部分なので、公式ドキュメントの概要やはじめに、ベストプラクティスを一読することをおすすめです。

## データベース、ストレージサービス
Firebaseサービスは範囲外なので不要だが、モバイル向けの場合に該当する。どの場面でどのサービスが選択すべきか理解が必要。

*  Cloud Storage
*  Cloud SQL
*  Cloud Spanner
*  Datastore(Firestore)
*  Cloud Bigtable 
*  BigQuery

## データ処理サービス
EL/ELT/ETLと呼ばれるサービス。似ているものが多いので違いを理解する必要がある。

* Dataproc
GCP上でHadoopやSparkを動かせられる。GCE部分はマネージドで提供。

* Datafusion
　DataprocのGUIバージョン。

* Dataflow
　GCPの推しサービス。

* Dataprep
　DataflowのGUIバージョン。

## メッセージングサービス
保存期間やスケールしやすさなどの違いがある。

* Cloud Pub/Sub
* Apache Kafka
SSH接続でパスワードログインができない時に確認すること

#説明
LinuxでパスワードによるSSH接続を行い、ログイン不可能な場合に確認を行う箇所です。


###①アカウントのロック状態を確認する
・アカウントの状態確認

```
passwd -S ユーザ名
```
2番目のブロックに
PSまたはLKの文字が表示されます。

PS　利用可能
LK　アカウントロック状態


LKの場合は、アカウントロック解除を行います。

・アカウントロックの解除

```
usermod -U ユーザ名
```


###②/etc/shadowを確認
シャドウファイルの確認を行います。
/etc/shadowの中身を確認し、対象のユーザの名前の横を確認します。
ロックされている場合は、名前の横に「!!」マークが表示されます。
「!!」マークを削除することでロック解除ができます。



###③ログイン失敗回数の確認

①の手順でアカウントの状態がPS（利用可能）であっても、
ログイン回数で引っかかっている可能性があります。

・ログイン失敗回数の確認

```
faillock --user ユーザ名
```


ログインに失敗していた場合は、情報が表示されます。


・ログイン失敗回数リセット

```
faillock --user ユーザ名 --reset
```






※もしも、ユーザ作成後一度もログインできていないアカウントであれば
　パスワードが未設定の可能性も確認します。
ProcessingをVSCodeでコーディングするメモ

#はじめに
ProcessingにはデフォルトのIDEもあるが、VSCodeでProcessing開発できるようにするメモ。
##Processingのインストール
何はともあれ、Processing本体のインストールが必要。
公式サイト　https://processing.org/

現在(1/23/2022) 4.0b3が公開されているが、今回はすでに私の環境でインストール済みだった 3.5.4 を使用。

##VSCodeのインストール
VSCodeのインストール、日本語化などはここでは割愛。
VSCodeのバージョンは 1/3/2022 時点で 1.63.2

##拡張機能をインストール
1/23/2022時点で数種類の拡張機能が存在する。

* Processing Language(https://marketplace.visualstudio.com/items?itemName=Tobiah.language-pde)
* Processing VSCode(https://marketplace.visualstudio.com/items?itemName=Luke-zhang-04.processing-vscode)
* processing-language-server-vscode(https://marketplace.visualstudio.com/items?itemName=kgtkr.processing-language-server-vscode)

processing-language-server-vscodeはサポートされているProcessingバージョンが4以降だったこと、残りの二つでは後者の方が更新が新しいため　今回はProcessing VSCodeをインストールした。

##コードの記述
* プロジェクトとなるフォルダを作成。
* プロジェクトフォルダ直下にフォルダ名と同じソースファイルを作成。拡張子はpde。

<img width="500"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/8ba7d74c-9031-eeae-0738-6a1e756f47f7.jpeg">
ソースファイルとプロジェクトフォルダ名は同じでないとだめらしいので注意。

##ビルドタスクの作成
VSCodeからProcessingのコードを実行するにはビルドタスクが必要となる。
ビルドタスクが無い状態でControl＋Shift＋Bを押すとビルドタスクを作成を促されるので下記の順番で選択していく。
* ビルドタスクを構成する…
* テンプレートから tasks.jsonを作成
* Other 任意の外部コマンドを実行する例

そうするとプロジェクトフォルダ直下に .vscodeフォルダが作成され、その中にtasks.jsonも作成される。
<img width="400" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/f79f69dd-e019-6bd7-6c6f-b08ab968643b.jpeg>

中身を下記のように書き換える。
command の　<b>${config:processing.path}</b>の部分は個人の環境に合わせて、Processingの実行ファイルのパスを指定する。
例）C:\\Program Files\\processing-3.5.4\\processing-java.exe

```tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Sketch",
      "type": "shell",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "command": "${config:processing.path}",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "dedicated"
      },
      "args": [
		"--force",
		"--sketch=${workspaceRoot}",
		"--output=${workspaceRoot}/out",
		"--run"
	  ],
      "windows": {
        "type": "process",
        "args": [
          "--force",
          {
            "value": "--sketch=${workspaceRoot}",
            "quoting": "strong"
          },
          {
            "value": "--output=${workspaceRoot}\\out",
            "quoting": "strong"
          },
          "--run"
        ]
      }
    }
  ]
}
```
##おわりに
これでProcessingをVSCodeで使う手順は完了。
コーディングして、Control＋Shift＋Bで実行できる。

繰り返しになるところもあるが注意点としては

 * tasks.jsonの作成と実行ファイルProcessing-Jave.exeのパス指定
 * プロジェクトフォルダとソースファイルは同じ名前であること
 * ライブラリはオリジナルのIDEから
Blender ショートカットメモ

#Blender3.0 ショートカットキーメモ
インストールしたばかりでショートカットキーが覚えられず、
自分用にまとめます。発見・理解次第、追加・整理していく予定です。

※ホイール＝マウスのホイール
※テンキー無しの場合、表の下の「テンキー、マウスなし」を参照

| キー(Win) | (Mac) | 説明 |
|:-----------|:------------|:------------|
| Control + X | Command + X | オブジェクトの削除 |
| Shift + X | X | オブジェクトの削除 |
| Shift + A| 同じ | オブジェクトの追加 |
| G | 同じ | 選択したオブジェクトの移動 |
| G , X | 同じ | 選択したオブジェクトの移動(X軸(水平)方向) |
| G , Y | 同じ | 選択したオブジェクトの移動(Y軸(垂直)方向) |
| G , Z | 同じ | 選択したオブジェクトの移動(Z軸(上下)方向) |
| S | 同じ | 選択したオブジェクトの拡大縮小 |
| S , X | 同じ | 選択したオブジェクトの拡大縮小(X軸(水平)方向) |
| S , Y | 同じ | 選択したオブジェクトの拡大縮小(Y軸(垂直)方向) |
| S , Z | 同じ | 選択したオブジェクトの拡大縮小(Z軸(上下)方向) |
| R | 同じ | 選択したオブジェクトの回転 |
| R , X | 同じ | 選択したオブジェクトの回転(X軸(水平)方向) |
| R , Y | 同じ | 選択したオブジェクトの回転(Y軸(垂直)方向) |
| R , Z | 同じ | 選択したオブジェクトの回転(Z軸(上下)方向)、捻り |
| ホイールを押下 | 同じ | 視点の回転 |
| Shift + ホイールを押下 | 同じ | 視点の移動 ​|
| Ctrl + ホイールを押下 | 同じ | ズームINorOUT ​|
| ホイールを操作 | 同じ | ズームINorOUT ​|
| Shift + D | 同じ | 複製 |
| Shift + R | 同じ | 前の動作を繰り返し |
| Ctrl + B |  | ベベル（面取り） |
| Ctrl + B + ホイール |  | ベベルの面を増やす |
| Z ＋ 数字 | 同じ | 3D表示モードの切り替え |
| Tab | 同じ | 編集モード |
| I | 同じ | 面の追加など（編集モード時、Insert） |
| E | 同じ | 面の押し出しなど（編集モード時） |
| E + Z | 同じ | Z方向に押し出し（編集モード辺選択時など） |
| Alt + クリック | Option + クリック | 辺をまとめて選択 |
| 0（テンキー） |  | カメラからの視点 |
| 1（テンキー） |  | -Y（正面） |
| 2（テンキー） |  | Z軸に沿って15°ずつ移動 |
| 3（テンキー） |  | X（右正面） |
| 4（テンキー） |  | 左斜めから |
| 5（テンキー） |  | 透視/平行投影の切り替え |
| 6（テンキー） |  | X軸に沿って15°ずつ移動 |
| 7（テンキー） |  | 真上から |
| 8（テンキー） |  | Y軸に沿って15°ずつ移動 |
| Ctrl + Alt + 0 |  | 今の視点をカメラビューに反映 |

#テンキー、マウスなし
テンキーがないPCを使用している場合は、以下にチェックを入れると使えるようになる。
編集＞プリファレンス＞入力＞テンキーを模倣

#参考

参考にさせていただきました。ありがとうございます。

https://uxbear.me/blendar-tenkey/

#おすすめチュートリアル

すごくわかりやすくてかわいいので勉強しながら楽しんでます

https://www.youtube.com/watch?v=S6aAvxUx2ko

https://www.youtube.com/watch?v=DsNZzUZPhw4
OverleafのLaTeXでsvgパッケージを使ったら他の画像が表示されない件

# 忙しい人へ
- graphicx パッケージのインポートを消す
- jpgやpngをeps形式にして `includegraphics[任意のオプション]{~.eps}

# ゆっくり
困ってる人にとって情報を見つけやすいタイトルを付けるのは難しいなあ。

Overleafを使っていて、

```tex
\usepackage{svg}
```

をすると、 `jpg` や `png` といった画像が

```tex
\includegraphics[~]{hoge.png}
```

こんなスクリプトを書いても表示できなくなる。

原因は、（中のコードを読んでないから真偽はわからないが）おそらく `\usepackage[]{graphicx}` に相当する記述がsvgパッケージに含まれているからだと思われる。というのも、`graphicx` パッケージを消してもコンパイルが通ったためである(`svg` を消すと通らない）。

というか、`graphicx` パッケージのインポートを消すと画像が表示されるようになってしまう。
しかし、`\centering` は利かなくなるしサイズの指定ができなくなる。これは、`svg` パッケージの持つ画像読み込み系は Bounding Box の指定をjpgやpngファイルから読み込めないためだ（`[dvipdfmx]{graphicx}`を読み込めていた時代なら勝手に解析してくれるみたいなのですが）。

epsファイルなら Bounding Box の情報を持っている。そのため表示させたい画像ファイルをepsファイルに変換し取り込んで、利用しよう。
[Android]忙しい人のためのアーキテクチャガイド~UI Layer編~

#はじめに

https://qiita.com/reo-androider/items/1ca168e290568a578cd6

こちらの続きです。
前回は、UI Layerを責務の分離において「表示」を担当すると簡略化して表現しましたが、今回はそれに関して詳しく見ていきます。

###対象
- 忙しくてアーキテクチャガイドを読んでいる暇などない人
- Androidにおいて、推奨されるアーキテクチャを知りたい方
- アーキテクチャガイドを読んだけども、何を言っているのか分からなかった人

#目次
内容は次の4つです。

###・UI状態の定義
###・データフローについて
###・データの監視
###・データの更新
 

#UIレイヤーでやること（手順）
ここでは、ニュース記事をAPIから取得するアプリを例に出しています。

##UI状態の定義
UIが保持するデータやロジック＋UIコンポーネントでUIが構成されていることを示しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599059/e07e9794-2403-793d-6224-0087636f34b8.png)

```kotlin
data class NewsUiState(
    val isSignedIn: Boolean = false,
    val isPremium: Boolean = false,
    val newsItems: List<NewsItemUiState> = listOf(),
    val userMessages: List<Message> = listOf()
)

data class NewsItemUiState(
    val title: String,
    val body: String,
    val bookmarked: Boolean = false,
    ...
)
```

読み込みプロパティをデータクラスに渡しています。
これにより、状態に関するデータを保証でき、本来の責務である「表示」に集中することが出来ます。
また、不変性が担保されてないと、データレイヤーと競合をおこす可能性があります。

#データフローについて
単一データフロー（UDF）が好ましいです。（理由は後ほど説明）
上方向には、イベント通知、データソースの変更。
下方向には、データの更新、UI状態を渡す。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599059/eae72a75-8bf3-bcda-775c-ccd386df32f5.png)


行われていることは下記の連続です。

- UIは、ViewModelにイベントを通知する
- ViewModelがユーザーアクションを処理して、保持しているデータを更新する
- 更新されたデータは、UIに反映させる

#ロジックの仕分け
- ビジネスロジック(状態の変化を保存) -> Data Layer
- UIロジック（状態の変化をUIに表示させる）-> UI Layer(State holder)

#UDFにする理由
- データに一貫性を持たせる
- ViewModelに状態を分けているので、UIテスト可能（？）
- 状態の変化は、ユーザーイベントかデータソースの両方なので、責務が明確に切り分けられており、メンテナンスが用意

#状態の公開
ここは、State holder -> UI elementsのデータフローについてです。

今までは、LiveDataが具体例に出てきましたが、改定後はKotlin Flowが登場してますね。
どちらかの監視可能なデータを用いることで、状態の更新とUIの更新を同期させることを目指します。

```kotlin
class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())
    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                _uiState.update {
                    it.copy(newsItems = newsItems)
                }
            } catch (ioe: IOException) {
                // Handle the error and notify the UI when appropriate.
                _uiState.update {
                    val messages = getMessagesFromThrowable(ioe)
                    it.copy(userMessages = messages)
                 }
            }
        }
    }
}
```

#その他注意点

- ViewModelはUIスレッドから安全に呼び出せるようにスレッドセーフティにする
- 長時間処理をバックグランドスレッドに移すのもViewModelの責務
- `PagingData`には、不変のアイテムが含まれるので独自のストリームを作成する（？）


#おわりに
いかがでしょうか。
全てを理解するのが難しかったので、飛ばし飛ばしになりました。

次回はData Layerについてまとめます。

#参考
https://developer.android.com/jetpack/guide/ui-layer?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-architecture%23article-https%3A%2F%2Fdeveloper.android.com%2Fjetpack%2Fguide%2Fui-layer
久々にAzure Functionsを触ろうとして出たエラーなど


久々にAzure Functionsを触ろうとして雰囲気だけしか覚えてなくエラーが出たので回避メモなど残しておきます。

## 基本の手順

https://fwywd.com/tech/azure-functions-basic


この記事どおりにハローワールドしようとしてます。

## Azure Functions Core Toolsのバージョンによるエラー

現時点でAzure Functionsで利用できるNode.jsは16系が最新っぽいので16系を使おうとしましたが以下のエラー

```bash
・
・
・
Azure Functions Core Tools
Core Tools Version:       3.0.3233 Commit hash: d1772f733802122a326fa696dd4c086292ec0171 
Function Runtime Version: 3.0.15193.0

[2022-01-23T12:06:20.317Z] /usr/local/Cellar/azure-functions-core-tools@3/3.0.3233/workers/node/dist/src/nodejsWorker.js:35
[2022-01-23T12:06:20.318Z]         throw message;
[2022-01-23T12:06:20.318Z]         ^
[2022-01-23T12:06:20.318Z] Incompatible Node.js version (v17.3.0). Refer to our documentation to see the Node.js versions supported by each version of Azure Functions: https://aka.ms/functions-node-versions
```

と途中で転けました。

## v4のインストール

[ドキュメント](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-run-local?tabs=v4%2Cmacos%2Ccsharp%2Cportal%2Cbash%2Ckeda#install-the-azure-functions-core-tools)によるとv16系だとAzure Functions Core Toolsの4系を使う必要がある模様ですが、インストールされているのが3系だった模様です。

```bash
npm i -g azure-functions-core-tools@4 --unsafe-perm true
```

少し時間がかかりましたがインストールできた模様です。

## 再チャレンジ

```bash
 npm start                                               

> fpbot@1.0.0 start
> func start


Azure Functions Core Tools
Core Tools Version:       4.0.3971 Commit hash: d0775d487c93ebd49e9c1166d5c3c01f3c76eaaf  (64-bit)
Function Runtime Version: 4.0.1.16815

```

4系が読み込まれてます...よかった

やっときた

> ![スクリーンショット 2022-01-23 21.03.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ea906a03-7771-b625-856c-8b34ab806991.png "スクリーンショット 2022-01-23 21.03.38.png")

> ![](https://i.gyazo.com/d6089f51c00d86e3ad6ad7e3f377846c.png)

## その他

v17系で利用しようとしたらエラーは出なかったですが、リクエストの処理をしてくれなかったです... 大人しくv16で進めてみます。

> ![](https://i.gyazo.com/2f38641c512b3ee2880f16b7b4ae4386.png)
React の学習でお世話になったYouTube動画集

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/d0de00d4-26ea-79d0-83ac-7d94b59dcb8d.png)

#Reactの学習でお世話になった動画をご紹介します

学習のコツは、毎日寝る前とか、隙間時間繰り返しみると少しずつ覚えていきますよ〜😊
###React + Firebase (firestore storage hosting auth)

https://youtube.com/playlist?list=PL4cUxeGkcC9jERUGvbudErNCeSZHWUVlb

https://youtube.com/playlist?list=PL5hvzfkGwJaMn-pcutYW0ctZfwbcZDPQd

https://youtu.be/zL0dKETbCNE

https://youtube.com/playlist?list=PLqFvlDFoiZ-2SAX7YXCYtb28K4IooCIlS

https://youtu.be/vUe91uOx7R0

https://youtube.com/playlist?list=PLqFvlDFoiZ-3HoHuYfqc4SrId1JbrtTnA

https://youtube.com/playlist?list=PLgNEd6Q0CH8E6zHmqsO7EIcqsDEeVD089



###React tutorial

https://youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d

https://youtu.be/w7ejDZ8SWv8

https://youtu.be/ABQLwlE8MUA

https://youtube.com/playlist?list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k


###React + Database(MySQL MongoDB)

https://youtube.com/playlist?list=PL6QREj8te1P7VSwhrMf3D3Xt4V6_SRkhu

https://youtube.com/playlist?list=PLpPqplz6dKxW42HMj6iuiA45d4xqP9ICq

###React + UI (Material UI, Chackra UI, styled-components)

https://youtu.be/-bll7l-BKQI

https://youtu.be/YyGgqmIjR-M

https://youtu.be/tiOChpaiFBc

https://youtu.be/QVnkGqEsbK0

###React + Redux

https://youtu.be/k68j9xlbHHk

###Reactアプリケーション

https://youtu.be/QaYts9sPmcY
【Unity】GetComponent<>って何を取得しているか

Unityでよく見る `GetCompoent<>` が何なのかよくわかっていなかったので備忘録として記事にいたしました。

完全個人メモです。

# そもそもUnityにおけるComponentとは？

https://docs.unity3d.com/ja/2018.4/Manual/Components.html

Unityの概念として `GameObject` という「物/入れ物」に対して、`Component` は「物」の見た目や振る舞いなどの機能群を提供する「部品」になります。

各 `GameObject` に紐づいている `Component` を確認するには、「Inspector」の欄を確認します。

![Screen Shot 2022-01-23 at 20.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/d8ba11c8-f599-242a-e9f7-1007b3bb9529.png)

上記、赤枠部分が「Cube」という `GameObject` に紐づいている `Component = 部品` です。

この場合、`Mesh Renderer` `Box Collider` などが、`CubeというGameObjectに紐づいているComponent` ということになります。

「Add Component」とあるように、必要な部品を適宜追加していきます。

# では、GetComponent<>とは？
では、本題の `GetComponent<>` とは？ですが、先ほどお伝えした `GameBojectに紐づいているComponent` を指定して取得します。

```C#:例
using UnityEngine;

public class Sample : MonoBehaviour
{
    public MeshRenderer meshRenderer;

    private void Start()
    {
        // アタッチされているGameObjectのComponentから「MeshRenderer」を取得する
        meshRenderer = GetComponent<MeshRenderer>();

        // 取得できた「MeshRenderer」に対して、Scriptで動的に操作する
    }
}
```

そして、**どのGameObjectから取得するのか** ですが、
このScriptがアタッチされているGameObjectからになります。

# GameObjectを取得するには？
ここまでは、**Componentの取得方法** でした。

では、**GameObjectの取得方法** はどのようになるのでしょうか？

それはいくつかの方法があります。

## GameObject.Find

https://docs.unity3d.com/ja/current/ScriptReference/GameObject.Find.html

これは、シーン内に存在するゲームオブジェクトの名前で取得します。
名前は完全一致で取得するので、動作の負荷としては高いです。

## GameObject.FindWithTag

https://docs.unity3d.com/ja/2017.4/ScriptReference/GameObject.FindGameObjectsWithTag.html

これはGameObject.FindWithTagの複数オブジェクトを取得するバージョンです。
タグの性質上、複数のオブジェクトに同一のタグを保有することがよくあるので、検索するタグを持つオブジェクトをすべて取得します。
なので、返り値は配列となっており、該当するものがない場合はからの配列が帰ってきます。

# まとめ
- UnityにおけるComponentは、GameObjectに紐づいた部品である
- GetComponent<>は、アタッチされたGameObjectの中から指定したComponentを取得するためのもの
- GameObjectを取得するものではない
- GameObjectの取得は、「Find/FindWithTag」がある

# 参考文献

https://tech.pjin.jp/blog/2020/09/29/unity-component

https://creive.me/archives/16164/

以上となります。
iOS アプリにおける画像の大量表示に起因するメモリ枯渇への対応

# 問題
開発中の　iOS　アプリにおいて、写真を大量に表示した際にメモリ枯渇によりアプリが突然終了してしまう問題に直面した。

Simulator 上で問題を再現させた際には、以下のエラーメッセージが出力された。

```
Domain: IDEDebugSessionErrorDomain
Code: 4
Failure Reason: Message from debugger: Terminated due to memory issue
User Info: {
    IDERunOperationFailingWorker = DBGLLDBLauncher;
}
```

具体的には、以下のように SwiftUI の `LazyVGrid` を使って画像を大量に表示させた際にこの問題は発生した。

```swift
LazyVGrid(columns: self.columns, alignment: .center, spacing: 0.0) {
    ForEach(entries, id:\.self) { entry in
        EntryView(entry: entry)
    }
}
```

# 解決方法

**表示させる画像の解像度を下げる**ことで、この問題を解消することができた。
具体的には、以下のページで紹介されている **downsampling** の処理を利用した。
https://swiftsenpai.com/development/reduce-uiimage-memory-footprint/
N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる〜

みなさんこんばんわ。”にょろぼん”でございます。

冬のコンテスト出品したいですよね。（去年間に合わず出せずじまい。泣）
下記のような悩みを抱えている方も多いのではないでしょうか。
なにかご参考になればと、今回の制作過程を実験的に晒してみます！
◎冬コンテスト（お題：サーバーサイドアプリ）に何か作って出品したい！
◎イチから作るのしんど。。⇒💡ピコーン！夏コンテスト作品をちょっといじってサーバー対応にすればよくね？！
◎でも、サーバーアプリ化改造どこから手をつけたらいいの？？取っ掛かかりが分からないぜ。ぐぬぬ。

〜悩みと試行錯誤の日々〜

『こうなったら、N予備４章のテキスト内容に全のっかりするしかない！』
『”予定調整くん”の構造（完成コード）にそっくりそのまま乗っかるッ、そして部品だけ入れ替えて作るッ！』
『要件定義だけきっちりやって、最後にVSCodeで”すべての出現箇所を変更”で変数名と関数名をごっそりまるごと入れ替えるぞッ！！ウリィィィィ！』

と、いうことで、以下は４−１６テキストを加工して作った”covidリスク確認くん（開発用）”のアプリ設計書です。
具体的には”【サービス開発1】「予定調整くん」の設計”テキストを全選択してコピペ貼り付けして、「予定調整くん」アプリの中で置き換え可能な部品を（ここでは”予定”を”データセット”に、”出欠”を”摂取状況”に）すべて書き直しています。
あとはこの流れでコード描くだけでなんかいける気がする！！！
![covidリスク確認くん（開発用）のコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345137/238b0b86-59ea-9078-9b46-963cefe701d3.jpeg)

![covidリスク確認くん（開発用）01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345137/e6da843c-90ed-46fa-b1fe-13ace6a84ff6.jpeg)

![covidリスク確認くん（開発用）02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345137/80e21222-0fbb-6a86-6012-105959970b94.jpeg)

![covidリスク確認くん（開発用）03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345137/c12fdcd9-6c2c-7cf5-7b53-b997f8d23007.jpeg)
ターミナル用フォント選定


[Starship](https://starship.rs)などターミナルのUI/UXを改善するツールがあり、こうしたツールでは、ディレクトリ内のGitのステータスをアイコンフォントによって表示しています。

アイコンフォントを含むフォントを導入する方法を解説します。

## NERD FONTS

[NERD FONTS](https://www.nerdfonts.com/#home)

![スクリーンショット 2023-01-20 22.21.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15414/f05c72fd-de2b-1d44-b126-195a9530c84c.png)


NERD FONTSは、プログラミングに適したOSSのフォントに3600以上のアイコンフォントを追加したフォント群です。NERD FONTSのフォントを使うとStarshipが要求するアイコンフォントを簡単に表示できます。

## 第一候補

NERD FONTSには現在50種類のフォントが用意されています。この中から独断と偏見で、

- 平均より細いフォント・太いフォント
- 平均より大きいフォント・小さいフォント
- 個性が強いフォント

を除いた以下のフォントを第一候補としました。

- [FiraCode](https://www.programmingfonts.org/#firacode)
- [DejaVu Mono](https://www.programmingfonts.org/#dejavu)
- [Meslo](https://www.programmingfonts.org/#meslo)
- [Noto Mono](https://www.programmingfonts.org/#noto)
- [Hack](https://www.programmingfonts.org/#hack)
- [Bitstream Vera Sans Mono](https://www.programmingfonts.org/#bitstream-vera)
- [Roboto Mono](https://www.programmingfonts.org/#roboto)

## 第二候補

さらに候補を絞り込んでいきます。

### gが独特なので除外

![スクリーンショット 2023-01-20 22.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15414/8daf1514-e690-0718-7d5c-2a69445bbf6d.png)

- [FiraCode](https://www.programmingfonts.org/#firacode)

gの表記などセリフ体の要素が、過剰に感じられたので除外。



### アンダースコアが __ 繋がって分かりづらいので除外

- [DejaVu Mono](https://www.programmingfonts.org/#dejavu)
- [Meslo](https://www.programmingfonts.org/#meslo)
- [Noto Mono](https://www.programmingfonts.org/#noto)

スマートには見えますが、プログラミングでは個数が分かった方が良いので除外。

## 最終候補 Hack, Bitstream Vera Sans Mono, Roboto Mono

以下３つが残りました。ぱっと見i,lのセリフ（下や上の横棒状のもの）が異なります。

- [Hack](https://www.programmingfonts.org/#hack): iもlも下部セリフが右のみ
- [Bitstream Vera Sans Mono](https://www.programmingfonts.org/#bitstream-vera): iの下部は左右のセリフ,lの下部は右のセリフ。-がかなり短い。
- [Roboto Mono](https://www.programmingfonts.org/#roboto): iもlも下部は左右にセリフ。Cなどの窄みが大きい。

ここまでくると好みの問題ですが、

- すっきりとしたHackとBitstream Vera Sans Monoが好み
- -が短すぎないほうが好み

ということで消去法で[Hack](https://www.programmingfonts.org/#hack)を選びました。

![スクリーンショット 2023-01-20 22.20.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15414/23f70124-e472-4e87-e30c-eb61c145099f.png)


## インストール

homebrewでインストールできます。

```
brew tap homebrew/cask-fonts
brew install font-Hack-nerd-font
```

あとは各種ツールで設定するだけです。

以上
OSSECについて学び始めた その７

#はじめに
ふとセキュリティについて何か学習を始めたいと思いました。オープンソースのプログラムを解読しながら、理解を深めていきたいと思います。
まずはオープンソースのOSSECについて学習します。まずはドキュメントを読むことから始めます。
https://www.ossec.net/docs/

今回は第七弾としまして、OSSECのSyscheckについて読んでいきます。
https://www.ossec.net/docs/docs/manual/syscheck/index.html

#すいません、執筆中です。

#おわりに
今回は以上です。では、また。
【Flutter】画面遷移アニメーションの不自然さを改善する方法

# はじめに

David Serrano Canales氏が投稿した記事を読みました。
[The dark side of Flutter: 4 inconveniences that every Flutter developer should know](https://davidserrano.io/the-dark-side-of-flutter-4-inconveniences-that-every-flutter-developer-should-know)

> Flutterの暗黒面 : Flutterの開発者が知っておくべき4つの不便さ。

その1つ

> Janky animations at app start

> (アプリ起動時のジャンキーアニメーション)

が個人的に最も興味深かったです。

内容は、

> The issue is a noticeable delay the first time the application runs an animation, such as opening a dropdown menu, or transitioning between two screens.

> (この問題は、ドロップダウンメニューを開いたり、2画面間を遷移したりするようなアニメーションをアプリケーションが初めて実行する際に、顕著な遅延が発生するものです。)

というもの。

これは自分も気になっていた問題でした。
画面遷移した際、不自然さがあるんですよね。

　　(左) 実際の画面遷移　　　　　　(右) 期待する画面遷移
![画面遷移](https://docs.flutter.dev/assets/images/docs/perf/render/shader-jank.gif)

この問題について、公式も問題視しているらしく、
その改善方法を提示していました。

https://docs.flutter.dev/perf/rendering/shader

本記事では、この改善方法について記載します。

# 画面遷移アニメーションの不自然さを改善する方法

> If the animations on your mobile app appear to be janky, but only on the first run, you can warm up the shader captured in the Skia Shader Language (SkSL) for a significant improvement.

モバイルアプリのアニメーションが、初回実行時だけジャンキーに見える場合、Skia Shader Language（SkSL）でキャプチャしたシェーダーをウォームアップすることで、大幅に改善することができます。

### SkSLウォームアップの使用方法

> As of release 1.20, Flutter provides command line tools for app developers to collect shaders that might be needed for end-users in the SkSL (Skia Shader Language) format. The SkSL shaders can then be packaged into the app, and get warmed up (pre-compiled) when an end-user first opens the app, thereby reducing the compilation jank in later animations. Use the following instructions to collect and package the SkSL shaders:

リリース1.20以降、Flutterはアプリ開発者向けに、エンドユーザーにとって必要と思われるシェーダーをSkSL (Skia Shader Language) フォーマットで収集するコマンドラインツールを提供します。
SkSLシェーダーはアプリにパッケージされ、エンドユーザーが最初にアプリを開いたときにウォームアップ（事前コンパイル）されるため、後のアニメーションでコンパイルの手間を減らすことができます。
SkSL シェーダを収集し、パッケージ化するには、次の手順を使用します。

#### SkSLでシェーダーをキャプチャするため、-cache-skslをONにしてアプリを実行

```bash
flutter run --cache-sksl
```

(※) 以前に同じアプリを --cache-sksl なしで実行したことがある場合は、 --purge-persistent-cache フラグが必要な場合があります。

```bash
flutter run --cache-sksl --purge-persistent-cache
```

このフラグは、SkSL シェーダのキャプチャを妨害する可能性のある、SkSL 以外の古いシェーダキャッシュを削除します。
また、SkSL シェーダをパージするので、最初の --cache-sksl の実行時のみ使用します。

#### SkSLのウォームアップをONにして、アプリをBuild

##### Android

```bash 
flutter build apk --bundle-sksl-path flutter_01.sksl.json
```

or

```bash
flutter build appbundle --bundle-sksl-path flutter_01.sksl.json
```

##### iOS

```bash
flutter build ios --bundle-sksl-path flutter_01.sksl.json
```

(※) test_driver/app.dartのようなドライバーテスト用にビルドする場合は、-target=test_driver/app.dartも必ず指定してください
　　例: flutter build ios --bundle-sksl-path flutter_01.sksl.json --target=test_driver/app.dart 

# おわりに

フラグを設定するだけで、簡単に改善できるみたいです。
自分の方では未検証のため、なにか誤りorこうした方が良い等あれば指摘下さい。
では。
[Github] 自分用メモ：failed to push some refs to URLのデバッグ

## エラー
いつものようにローカルから`git push`をすると以下のエラーが

```
error: failed to push some refs to 'https://github.com/nagaoka1166/rubybook-service-examinee.git'
```

## 原因
リモートからREADME.mdをいじってしまっていたから、ローカルとリモートで差異が起きてコンフリクトが起きってしまったみたいでした。
他の原因でもこのような結果になるみたいです。

### 参考サイト

https://qiita.com/chiaki-kjwr/items/118a5b3237c78d720582
できるだけシンプルに公式イメージの1コンテナで個人使用用途のRedmineを起動、運用する(Redmine+SQLite(Docker))


備忘

# できるだけシンプルに1コンテナで個人使用用途のRedmineを起動、運用する。
Dockerhubの公式イメージを使用。
DBも別途立ち上げることはせず、デフォルトのSQLiteをそのまま使用。

# 検証環境
- Fedora Linux 35 (Workstation Edition)
- Docker version 20.10.11, build 485636f
    - 一般ユーザーで使用
- podman version 3.4.4
    - 以下はdockerコマンドをそのままpodmanコマンドに置き換えても動作する。
 




# Redmineサーバーの起動

```
$ docker run -d --restart always --name myredmine -p 3000:3000 docker.io/library/redmine:latest
```

この場合、http://<サーバーのアドレス>:3000で接続。
初期ユーザー/パスワードはadmin/admin


# Redmineサーバーのバックアップ

## db本体のバックアップ

```
$ docker cp myredmine:/usr/src/redmine/sqlite/redmine.db ./redmine.db
```

## 添付画像ファイルなどのバックアップ

```
$ docker exec myredmine tar zcvf - files > ./files.tar.gz
```
コンテナ内のWORKDIRは/usr/src/redmine。


# Redmineサーバーのリストア

## dbリストア、オーナー、グループの戻し、リスタート

```
$ docker cp ./redmine.db myredmine:/usr/src/redmine/sqlite/redmine.db
$ docker exec myredmine chown redmine.redmine sqlite/redmine.db
$ docker restart myredmine
```
オーナー、グループが変更されてしまうのでchownにて戻す。
docker cp --archiveでバックアップ、リストアとしても良いかもしれないが、バックアップファイルの扱いが面倒となりそうなので避けている。
スクリプトなどで連続して実行する場合は、間にsleepなどをいれないと失敗するケースがあったので注意。



## 添付画像ファイルなどのリストア

```
$ docker cp ./files.tar.gz myredmine:/usr/src/redmine
$ docker exec myredmine tar zxvf files.tar.gz
$ docker exec myredmine rm files.tar.gz
```
こちらはredmine.dbとは異なり、docker restartで消えてしまったのでrestart後に実施。
コンテナ内で実行するtarコマンドのstdinに直接繋らなかったので、ファイルをcpしてtarにて展開。



# 参考
Redmine(docker) + MariaDB(docker)からバックアップとリストア
https://qiita.com/HyunwookPark/items/128130b9c69ea328bff4
CMake でファイルごとに define などを指定するメモ

## 背景

特定のファイルだけコンパイル設定(e.g. define)したい...

## 方法

CMake 3.18 以降で, set_source_files_properties でいけます.

https://cmake.org/cmake/help/latest/command/set_source_files_properties.html

例

```cmake
set_source_files_properties(
  ${PROJECT_SOURCE_DIR}/src/external/tinyexr.cc
  PROPERTIES COMPILE_DEFINITIONS "TINYEXR_USE_MINIZ=0")
```
画像をアニメーションで切り替えたい！オシャレに！

？？？？？「これデザインです！ここの画像は切り替わるようにしてください」
エンジニア「ありがとうございます！切り替え…どのように…」
？？？？？「よしなにお願いします！なんかイケてるオシャレな感じで！！」
エンジニア「承知しました。（オシャレというのは主観であって…）」

ありますよね。
こういうこと。

イケてる！オシャレな！しかも手軽な！
切り替わりを実装してアッと言わせちゃいましょう。

そんなアニメーションを4種ご紹介いたします。

## ブラシで塗りつぶし
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/46471a48-7c59-f1e4-80f0-0bff94564228.gif" width="300">

ポップで元気な印象のサイトデザインに合いそうですね。

詳細記事リンク： [【ブラシ】画像をアニメーションで切り替えたい！オシャレに！【塗りつぶし】](https://qiita.com/drooooopp/items/58ae4baeb863e52e64ce)

## 斜めのグリッド
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/ca764c62-8410-f5de-f920-739f48251e17.gif" width="300">

シャープでスタイリッシュなサイトデザインに合いそうです。

詳細記事リンク： [【斜め】画像をアニメーションで切り替えたい！オシャレに！【グリッド】](https://qiita.com/drooooopp/items/daae7613269d41d612b7)

## スライド
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/41567b57-ecc8-e0c1-fbd2-2cba659fcc56.gif" width="300">

Swiper？Slick？いいえ、それらとは違った見え方になります。
スライダー系のプラグインでは1番目と2番目に表示される画像の位置は、スライドしながらスライドすると思います。（語彙力）
こちらは位置はそのままでスライドするのです。（語彙力）
詳細記事では、わかりやすいサンプルをご用意しています。

詳細記事リンク： [【スライド】画像をアニメーションで切り替えたい！オシャレに！【縦 横 斜め】](https://qiita.com/drooooopp/items/94eb6f8e1e5009ab75d9)

## フリップ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/d8ee62d0-bc25-c726-71e7-68e5141e32c5.gif" width="300">

こちらもポップで元気なサイトデザインに合いそうです。
ただのスライダーではなく、デザイン上もカードのようにしたりすることで凝った見え方にできそうですね。

詳細記事リンク： [【フリップ】画像をアニメーションで切り替えたい！オシャレに！【くるっと】](https://qiita.com/drooooopp/items/586813b06591af3ef37b)
Djangoでページを追加する手順

# Djangoでページを１つ追加する手順
Djangoの関数ベースビューでページを一つ追加する手順についてまとめました。
初めての投稿で、読みづらい部分多いと思います。。。ご容赦ください。。。

## 1. urls.pyにpathを追加
例：
`path(r'post/<int:post_id>/', views.post_detail, name='post_detail'), `
第一引数：適当に他と被らないように(ユーザごとに表示を変えたい場合&lt;int:user_id>、投稿ごとに表示を変えたい場合&lt;int:post_id>などをつける)
第二引数：「views.関数名」でviews.pyの関数に飛ぶ
第三引数：name='文字列'でpathの名前を決める

## 2. views.pyに関数を追加
1の第二引数で決めた関数名で関数を定義

- 第一引数にはrequestを入れる。1の第一引数で&lt;int:post_id>などを指定した場合は
- 第二引数にpost_idなどを書く

```python:views.py
def post_detail(request, post_id):
    # 必要なオブジェクトを取得して適当な変数に入れる(この場合、投稿ごとに表示を変えたいから第二引数のpost_idを利用して一つの投稿を取得)
    post = Post.objects.get(pk=post_id)

    # フォームが必要なページの場合、適当な変数にforms.pyにあるformを代入する(この場合CommentForm)(forms.pyのクラス名を書くと呼び出せる)
　　　　　　　　# 画像のアップロードがある場合は、第二引数にrequest.FILES or None をつける
    comme_form = forms.CommentForm(request.POST or None) # フォームのボタンが押された場合入力済みフォームが入る。押されてない場合、空のフォームが入る。

    # フォームのボタンが押された場合フォーム.is_valid()でバリデーションしてくれる。(Getリクエストの時は実行されない)
    if comme_form.is_valid():
        # バリデーション成功なら フォーム.save()でフォームの内容をデータベースに保存
        comme_form.save()
        # 無事保存できたらリダイレクトさせる
        return redirect('アプリ名:top')

    # 投稿についたコメント一覧を取得
    comments = post.comment_set.all()

    # バリデーション失敗の場合、もしくはフォームのボタンが押されてない場合(Getリクエストの場合)、そもそもフォームのないページの場合などはreturn renderでhtmlを表示する
    # 第一引数にrequest、第二引数にhtmlへのpath、第三引数に必要なオブジェクト(フォームとか)を辞書形で渡す
    return render(request, 'アプリ名/post_detail.html', context={'post': post, 'form': comme_form, 'comments': comments})
```

## 3. htmlを作る

```html:post_detail.html
<!-- 親html(全体設定が書いてある)を継承 -->
{% extends 'アプリ名/base.html' %}

{% block title %}ここにタイトルを書く{% endblock %}
```

- {% block content %}ここに本文を書く{% endblock %}

```
{% block content %}
    <!-- 2のrenderの第三引数で書いたオブジェクトが使える -->
    <!-- {{ オブジェクト.カラム名 }} でそのオブジェクトのカラムの内容を取得(モデルを参照)
    <h1>{{ post.title }}</h1>
    <p>{{ post.text }}</p>

    <h2>コメントする</h2>
    <form method="POST">
    <!-- 画像のアップロードがある場合は、enctype="multipart/form-data" も付ける -->

        {% csrf_token %} <!-- CSRF検証 -->

        <!-- 2で辞書形で渡したフォームは {{ 渡されたフォーム.as_p }} などと書くと自動でフォームを生成してくれる -->
        {{ form.as_p }}

        <!-- 送信ボタンだけは自分で書く -->
        <input type="submit" value="送信">
    </form>
```

- {% if ~~ %}{% elif ~~ %}{% else %} などと書くとif文で表示を変えられる(最後に {% endif %} と書くのを忘れない)
- {% if user.is_authenticated %} と書くとログインしてる人だけの表示にできる
- {% for ○○ in 「2の辞書形で渡した複数インスタンスの入ったオブジェクト」 %} と書くと繰り返し処理ができる(ループの終わりで{% endfor %}書くのを忘れない)

```html:post_detail.html
    <h3>コメント一覧</h3>
    <ul>
        {% for comment in comments %}
           <li>コメント主: {{ comment.user.username }}, コメント: {{ comment.text }}</li>
        {% endfor %}
    </ul>
{% endblock %}
```
ダークファイバー とは

## 勉強前イメージ

光ケーブルを不正に利用する的な？
ファイバー

## 調査

### ダークファイバー とは

通信事業者などが設置した光ファイバーのうち、通信がされていない(光信号が走っていない)未使用のケーブルが
光が通らず暗いため `ダークファイバー` と呼ばれています。
逆に、通信されているケーブルについては `ライトファイバー` と呼ばれます。

### ダークファイバーなケーブルってあるの？

実は結構あるみたいです。
光回線が普及し始めた際にNTTは需要を見越して全国に大規模な光ファイバー網を敷設しました。
しかし、伝送技術の発展により1本で転送出来るデータの量が増加したため、光ケーブルが余ってしまっており
これが `ダークファイバー` と呼ばれる事になっていました。

しかし、使ってなくても維持費はかかるのでNTT等事業者は `ダークファイバー` を民間に貸し出すサービスを始めています。

## 勉強後イメージ

なるほど？
NUROとかもこれに当たるみたいね、光コラボは多分違う。
でも余るってことあるんやな

## 参考

- [ダークファイバーとは](https://www.otsuka-shokai.co.jp/words/dark-fiber.html)
- [ダークファイバーを徹底解説！NURO光が速くて安い理由とは？](https://www.hikari-au.net/nuro/speed/dark-fiber)
Ubuntu＋SAMBAで構築したファイルサーバー環境を外付けHDDに対応させるぞい！

# 前回の内容の続きでございます

UbuntuにSAMBAインストールして **ローカルストレージ** の1フォルダーをファイルサーバー化するところまでやりました！
今回は **Ubuntuに繋げた外付けHDDをファイルサーバー化** してみようと思います！

https://qiita.com/waokitsune/items/27047b2ec3f2db8698c4

# 外付けHDDのマウントオプション設定

外付けHDDを繋いだらユーティリティの **ディスク** を起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/8300b4e2-7a77-d11c-f6c8-3907fcab3772.png)

下図はただ外付けHDDを差しただけの状態。
マウント先がなんかよく分かんない場所になってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/ef40d1ca-6046-09a7-b422-5378fc74c46d.png)

マウントオプションの編集を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/96dcc566-57c3-9a87-6b32-32761d42ac4d.png)

設定するのは下図の二つ！

* 再起動とかした際にログインしなくてもマウントされるように **システム起動時にマウントする** をONに。
* **マウントポイント** は読んで字のごとく。ここで指定してる/mnt/testerがSAMBAの設定ファイルで指定している共有フォルダーです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c3d90b34-0856-4506-6842-eee1b238eb91.png)

設定終了したら、一旦アンマウントして、再度マウント！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/620321d0-2553-9b26-6f29-6250a7033842.png)

指定した場所にマウントされてればOK！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/e14c50e7-e099-d16c-647d-7a02341140ec.png)

これで終わり！
SAMBAの環境さえできてれば全然難しくなかったです。

# 外付けHDDのフォーマット

今回使った外付けHDDは、元々CentOS 8で同じように同じように使っていたものなので、フォーマットとかは不要でした。
なのでフォーマットについてはこの記事には書いてないです。

# SAMBAの停止と再起動

マウントオプション変更とか再マウントしている最中、SAMBAは止めずにやっちゃいました…。
特に問題起きなかったけど、念のために変更の最中はSAMBAを止めておいた方がいいかも…。

SAMBAの停止コマンドは下記。

```shell:端末で実行したコマンド
sudo systemctl stop smbd nmbd
```

SAMBAの再起動コマンドは下記。

```shell:端末で実行したコマンド
sudo systemctl restart smbd nmbd
```

# バージョン

Ubuntu 20.04.3
SAMBA 4.13.14-Ubuntu
HTMLの基本文

## htmlをサクッと書きた人へ

（コピーして使ってください）

```html
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style></style>
<body>

</body>

```

##本題

皆さん、htmlを書くときに（例えばAtomやVScodeなど）それぞれ好きなエディタを使っているかと思いますが、拡張機能やパッケージの追加によって予測変換を使って楽に書いてる人は多いと思います。

ですが、一番最初、htmlと入力したときに一度に出てくるこれ↓
（ここではAtomの例）

```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>
```

**HTML5では不要な要素がいくつかあります。**
**それに加え、このまま書いていくとインデント（段落）がついて、とても見にくくなります。**


毎度書き換えるのはめんどくさいので、一番上に載せたコードをテンプレートとして使っていくことにしました。（bodyもいらないんだろうけど見やすさで入れてます）
皆さんにも、このhtmlファイルを一つ作っておいて、新たに作るときはそのファイルを複製して活用いただければと思います。


他に便利な方法があれば、ぜひ教えてください。
YAMAHAルーターのVLAN設定時の基本的なコマンド集

# はじめに

この記事は、YAMAHA社製のRTXから始まるルーターの設定コマンドについて記述します。
自分への備忘録的な意味も込めながら、他の人でも理解できるようにまとめようと思います。
今回は、`RTX830`を実際に弄った際のコマンドをまとめます。

## 前提条件

既に下記の状態になっていることから始めます。
・プロバイダーの設定は済んでいる事。
・これからVLANを切ろうとしている事。
・SWX系などのスイッチは使わずルーターのポートのみでVLANを切ろうとしていること。
・コンソールケーブルを接続して`TeraTerm`でコマンドが叩ける環境であること。

この記事は、「インターネットにはアクセスできるようになった。これからVLANを切るぞ！」の状態の人に向けています。

『プロジェクトごとにVLANを切ってプロジェクト間で関係ない接続できないようにする』的なときにやるやつです。

それでははじめていく！

# 管理者権限でコマンドを叩く

`administrator`を入力してパスワードを入力すると、下記のように`#`が表示されて管理者権限のコマンドが叩けるようになります。

```
> administrator
Password:
2022/01/23 19:02:53: 'administrator' succeeded for Serial
#
```

# LAN分割機能設定を行う。

下記のコマンドを実行します。

```
lan type lan1 port-based-option=divide-network
```

# VLANのIP体系の設定を行う。

今回は、VLANを4つ定義します。

|vlan1|vlan2|vlan3|vlan4|
|:---:|:---:|:---:|:---:|
|192.168.11.1/24|192.168.12.1/24|192.168.13.1/24|192.168.14.1/24|

上記の構成をする場合は、下記のコマンドを実行して使用するIP体系を定義します。

```
ip vlan1 address 192.168.11.1/24
ip vlan2 address 192.168.12.1/24
ip vlan3 address 192.168.13.1/24
ip vlan4 address 192.168.14.1/24
```

# 各ポートにVLANをマッピングする。

`RTX830`のLAN1にはポートが4つあります。
今回は、それぞれのポートに上記のコマンドで定義した別々のVLANを割り当てます。

|lan1.1|lan1.2|lan1.3|lan1.4|
|:---:|:---:|:---:|:---:|
|vlan1|vlan2|vlan3|vlan4|

実際は、下記のコマンドで各ポートにVLANをマッピングしていきます。

```
vlan port mapping lan1.1 vlan1
vlan port mapping lan1.2 vlan2
vlan port mapping lan1.3 vlan3
vlan port mapping lan1.4 vlan4
```
# VLANのマッピング結果を確認する。

下記のコマンドで設定したマッピング内容を確認します。

```
show config | grep ^vlan
```

下記は実行結果の例です。しっかり各ポートにVLANが切られました。

```
# show config | grep ^vlan
Searching ...
vlan port mapping lan1.1 vlan1
vlan port mapping lan1.2 vlan2
vlan port mapping lan1.3 vlan3
vlan port mapping lan1.4 vlan4
```

# DHCPの設定

今回は、すべてのVLANで動的IPアドレスを使用する仕様にします。
各VLANの動的IPの範囲は下表のようにします。

|vlan1|vlan2|vlan3|vlan4|
|:---:|:---:|:---:|:---:|
|192.168.11.2-192.168.11.99/24|192.168.12.2-192.168.12.99/24|192.168.13.2-192.168.13.99/24|192.168.14.2-192.168.14.99/24|

上記の範囲でDHCPの設定を行う場合は、下記のコマンドを実行します。

```
dhcp service server
dhcp server rfc2131 compliant except remain-silent
dhcp scope 1 192.168.11.2-192.168.11.99/24
dhcp scope 2 192.168.12.2-192.168.12.99/24
dhcp scope 3 192.168.13.2-192.168.13.99/24
dhcp scope 4 192.168.14.2-192.168.14.99/24
```
# DNSの設定

ここまでの状態だと、多分インターネットにつながらないかもです。
下記の設定を実施して、プロバイダーから提示されているDNSをそれぞれのVLANに設定します。
※ `XXX.XXX.XXX.XXX`と`YYY.YYY.YYY.YYY`は、各々プロバイダーから提示された内容に置き換えてください。

```
dns host vlan1 vlan2 vlan3 vlan4
dns server XXX.XXX.XXX.XXX YYY.YYY.YYY.YYY
dns private address spoof on
```

# 設定の保存

最後に忘れずに設定を保存しましょう。

```
save
```

# 最後に

各ポートにPCを接続して`ip config`を実施してみましょう。
それぞれ定義した通りのIPアドレスが取得出来てインターネットに接続できていれば成功です。

もし、不足しているコマンドがあれば後でいろいろ調べながら追加します。
多分、ポート分離も下記のコマンドのようにやった方がいいと思います。

```
lan type lan1 port-based-option=split-into-1:2:3:4
```

今後は、各フィルターについて記していく予定です。
よくありますよね？『このプロジェクトはＸＸＸＸに接続したらダメ』的なやつ。
それの対策を記していく予定です。

以上
GitのエディターをVS Codeに変えようとしたらはまった件

GitのエディターをVS Codeに変えようとしたらはまりました。

# 何が起きたか？
色々なサイトを見ていると、GitのエディターをVS Codeに変更するには、

```
git config --global core.editor 'code --wait'
```

と書くといいようなのですが、自分はこの設定でコミットしようとすると、

```
hint: Waiting for your editor to close the file... /c/Users/xxx/AppData/Local/Programs/Microsoft VS Code/bin/code: line 14: realpath: command not found
/c/Users/xxx/AppData/Local/Programs/Microsoft VS Code/bin/code: line 61: ./Code.exe: No such file or directory
error: There was a problem with the editor 'code --wait'.
Please supply the message using either -m or -F option.
```

というエラーになってしまいました。

# 対策
色々試行錯誤した結果、

```
git config --global core.editor 'code.cmd --wait'
```

とすれば無事VS Codeでコミットメッセージが書けるようになりました。エラーの原因はよくわかりませんでした・・・。codeにもcode.cmdにもパスは通っているはずです。

# 備考
ちなみに自分はVisual Studioと一緒にGitをインストールした（はずな）ためこうなりましたが、Git for Windowsを個別にインストールする際にVS Codeをエディターとして設定すれば、おそらくこの問題は起こらなかったと思います。

# 参考サイト
* https://qiita.com/takeo-asai/items/9bc7e25cd94cd8c9adee
* https://style.potepan.com/articles/31074.html
【Android Studio】string.xmlの使い方

##string.xmlとは
string.xmlはアプリ内で使用する文字列関連を管理するXMLファイルのことです。
文字列リソースとも呼ばれます。
string.xmlを使用せずに直接記述することもできますが、
ここでテキスト情報を管理しておくと, 多国語の対応, サーバのURLを変更する等が, コードをいじらずに容易に行えます。
また、文字列が長文になった場合でも別の場所に格納すると、構造が分かりづらくなることもないため可読性の向上にもなります。

##文字列を定義する方法
```xml:string.xml
<resources>
  <string name="app_name">TestApp</string>
  <string name="hello_world">Hello world!</string>
  <string name="apple">りんご</string>
</resources>
```
のように記述して使用します。

##レイアウトのxmlで取得するには
```xml:activity_main.xml
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/apple" />
```
@string/xxx でstringタグで指定したキーを指定すると紐づいている文字列が取得できます。
そのため、上記のように記述すればstring.xmlのnameで定義したappleから「りんご」という文字列を引っ張ってくることができます。

##Javaのプログラムで取得するには
```java:MainActivity.java
textView = findViewById(R.id.appTitle);
String title = getString(R.string.app_name);
textView.setText(title);
```
上記のように記述すれば、
idがappTitleであるtextViewのtextにstring.xmlのnameで定義したapp_nameから「TestApp」という文字列をセットすることができます。
【BibTex + ieice.bst】@MISCのタイトル後のカンマが連続する

# TL;DR

URLを記載するフィールドを`note`から`howpublished`に変更

# 問題
Texで参考文献を書くのに役立つBibTex。基本的に、アカデミックの世界で信用できる文献は論文とそれに準ずる文書のみですが、ソフトウェア実装で使用したライブラリなどWebページも文献として扱いたい場合があります。Webページは`@MISC`で追加し、`url`パッケージでリンクもフィールドに書いておきます。しかしスタイルによってはリンクを`note`フィールドにするとタイトル直後のカンマが連続してしまいます。

スタイル：[ieice.bst （電子情報通信学会）](https://www.ieice.org/ftp/)

```tex:refer.bib
@MISC{R_lidR,
        author  = {Jean Romain Roussel and David Auty and Florian De Boissieu and Andrew Sánchez Meador and Bourdon Jean François and Gatziolis Demetrios and Leon Steinmeier and Stanislaw Adaszewski},
        title   = {lid{R}: Airborne LiDAR Data Manipulation and Visualization for Forestry Applications},
        note    = {\url{https://rdrr.io/cran/lidR/}},
}
```

レンダリング結果：
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440643/f868c233-ce1a-0e4b-af89-996f5462242a.png" width="800">

# 解決
`howpublished`というフィールドも使えるようだ。

```diff:refer.bib
 @MISC{R_lidR,
         author  = {Jean Romain Roussel and David Auty and Florian De Boissieu and Andrew Sánchez Meador and Bourdon Jean François and Gatziolis Demetrios and Leon Steinmeier and Stanislaw Adaszewski},
         title   = {lid{R}: Airborne LiDAR Data Manipulation and Visualization for Forestry Applications},
-        note    = {\url{https://rdrr.io/cran/lidR/}},
+        howpublished    = {\url{https://rdrr.io/cran/lidR/}},
 }
```

良き。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440643/a52f0431-1780-2936-31c8-d60e771f62ce.png" width="800">
X座標から楕円のY座標を取得する関数


楕円というのは，結構汎用的なもので，下のように幾何学表現をしたい場合に結構使えます．円にもなるし，単位ベクトルを計算後のY座標にかければ，立体的にな表現もできる．2次元の楕円だけで，楕円体的な表現もできたりします．

![killua_lightning.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/166e172e-561e-c95a-82eb-cea030922357.gif)

ということで早速「X座標から楕円のY座標を取得する方法」は以下の通りです．

![Ellipse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/5a2a144d-6e56-9b78-e198-296dfb8aa59b.png)

これをHLSLで表記した場合は，以下の通りです．

```GLSL
//
// HLSLでの「X座標から楕円のY座標を取得する関数」
//
// 入力: 
//     変数: x
//     固定値: radiusX, radiusY
// 出力:
//     変数: y
float ellipse_y(float x) {
    float y = _RadiusY * sqrt(1 - (x * x) / (_RadiusX * _RadiusX) );
}
```
ActivityからFragmentへの遷移

#  初めに
MainActivityクラス、Fragmentクラス、activity_main.xml、fragment_layout.xml を用意します

# 実際にコードで書いていきます
Activity から　Fragment への遷移を
MainActivityの　onCreate内に　コードで書いていきます




```
val fragment = Fragment()
val fragmentTransaction = supportFragmentManager.beginTransaction()
fragmentTransaction.add(R.id.container, fragment)
fragmentTransaction.commit()
```


上から１行ずつ説明していきます

１行目　

```val fragment = Fragment()```

変数fragment の　宣言をします
その変数fragment は　作っておいた　Fragmentクラス になります



２行目　　
```val fragmentTransaction = supportFragmentManager.beginTransaction()```

変数fragmentTransaction の　宣言をします
そのfragmentTransaction は　supportFragmentManager.beginTransaction()
supportFragmentManager の　中にある　beginTransaction と言う機能です
FragmentManagerとは、フラグメントに対するアクションを実行するためのクラスで、
supportFragmentManagerとは、　ActivityからFragment対するアクションを実行するためのFragmentManagerの一種です
beginTransaction とは　Transaction(遷移) を　begin(開始)する　という意味です



３行目　　
```fragmentTransaction.add(R.id.container, Fragment)```

先ほど作った　変数fragmentTransaction に　add(追加) していきます
追加するのは　第一引数に　**Fragmentを表示させたい場所**のxml内のViewのid を
ここでは　activity_main.xml の　初めからあるFrameLayoutに　container と言うidをつけ、それを第一引数に指定
第二引数には　**表示させたいFragment**を
ここでは、先ほど宣言した変数fragment を指定します



４行目　　
```fragmentTransaction.commit()```

fragmentTransaction を　commit(反映) 画面に反映させます
commit() を忘れると画面に反映されないので注意です！

#最後に
以上が　Activity から　Fragment への遷移方法です
android開発では　当たり前の知識かもしれませんが、
androidアプリの開発者になる為に勉強中の方　初心者の方へ参考になればと思います