OmniAICreator/Qiita-1.07M huggingface dataset:
ReactNative　出会ったエラーと解消の記録

# 記事の目的
私の ReactNative 勉強＆制作の記録メモ

# 教訓：要素数が少ない、一定である配列要素のレンダリングは、FlatList ではなく、単純ループで記述せよ

## 何が起きたか
`VirtualizedLists should never be nested inside plain ScrollViews`
のエラーに出会った

要は、FlatList を ScrollView の中で使うなよ、と怒っている

## FlatList と ループの使い分け をちゃんとする
### FlatList
複数ある配列要素を、ダイレクトローディングしながらレンダリングしてくれる
要素数が多い、不定、サーバサイドから供給されるなど、配列全要素をレンダリング前にロードするのはパフォーマンス的に問題となるケースの時に使う

### ループ
配列要素が一定、少ないときには、単純なループで記述すべきだった


# 教訓：条件で表示・非表示するときの条件記述をBoolean型に矯正せよ

## 何が起きたか
`Text strings must be rendered within a Text component`
文字列は、ちゃんと <Text>コンポーネントを使え、って怒っている
文字列要素を <Text>でちゃんとくくっているのに、上記のエラーに苛まれる

https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

これを見てようやく理解した。

## 3項演算子条件をBoolean型以外が使われている

### ダメな例

```javascript
<View>
  <Text>ほげほげ</Text>
{ errorMessage && (
  <Text>{errorMessage}</Text>
)}
  <Text>ほげほげ</Text>
</View>
```

上記例で `errorMessage == '必須入力です'` ならば問題ないけど `errorMessage == ''` の時、 `''`をレンダリングしようとするらしい
結果、View 直下に 文字列要素がレンダリングされてしまう

### イケてる例

```javascript
<View>
  <Text>ほげほげ</Text>
{ !!errorMessage && (
  <Text>{errorMessage}</Text>
)}
  <Text>ほげほげ</Text>
</View>
```

上記例ならば、文字が Boolean として評価され、結果 true or false となるので、Reactさんが期待通りに判定してくれる


# 教訓：import を一方通行にせよ

## 何が起きたか
`Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.`
のエラーに出会った

要は、

```javascript:A.js
import B from './B';
```

```javascript:B.js
import A from './A';
```

すんなよということ

## 👆がしたけりゃ、別ファイルにしよう
以下が私がやっていたこと

```javascript:App.jsx
import Register from './screen/Register';
import View from './screen/View';
...
<Stack.Screen
 name={Screen.REGISTER}
 component={Register}
/>
<Stack.Screen
 name={Screen.VIEW}
 component={View}
/>
...
export const Screen = {
 REGISTER: 'Register',
 VIEW: 'View',
};
```

```javascript:Register.jsx
import { Screen } from '../App';
...
navigation.navigate(Screen.VIEW);
...
```

```javascript:View.jsx
import { Screen } from '../App';
...
navigation.navigate(Screen.REGISTER);
...
```

ほんとは👆の形のほうが整理できるんだけどなぁ～
リテラル書くの嫌だしなぁ～
定数だけのファイルにするのも嫌だし、Definition.js に Screen 定数持ってくるのもなんかなぁ～

みなさん、どうやってるんだろ
画像を用いた語学学習支援

GECアドベントカレンダー20日目の記事です。

# はじめに
所属しているラボで画像を用いた語学学習の研究を2019年から始めています。既存のGEC課題では誤りを含む文を入力としてそれを訂正した文を出力する研究がほとんどだと思いますが, 我々のグループでは語学学習支援という点で画像を活用することで学習者がより豊富な語彙や英文の記述能力を高めることを目的としています。

![スクリーンショット 2021-12-17 4.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277159/19226ece-9a43-a5d2-ddc0-e0d80b34f8b7.png)

個別の研究事例は, [(川端+ NLP20)](http://www.lsta.media.kyoto-u.ac.jp/mori/research/public/kawabata-NLP20.pdf)や[(田中+ JSAI21)](http://www.lsta.media.kyoto-u.ac.jp/mori/research/public/tanaka-jsai21.pdf)を当たっていただくことにして, この記事では研究のよもやま話を書こうと思っています。なお僕自身はGECについて詳しくないのでその点はご了承ください。

# 画像を使うことの意味
## モチベーション
研究を始めたての頃 (後輩が研究を始めることを聞いた時), 率直な疑問として, その課題において「画像を使う意義はどれくらいあるのだろうか」という点がよぎりました。
従来のGECでは取り組みづらい語彙能力を高める上で有用な点は認めますが, 一方で画像の内容を間違えるかしらといった疑問がはじめたての頃にはあったのです。そこで, [(田中+ JSAI21)](http://www.lsta.media.kyoto-u.ac.jp/mori/research/public/tanaka-jsai21.pdf)では, 簡易な英語のテストを非英語話者に行い, 誤りのラベルを人手で割り当てて結果を分析してみました。その結果が以下です。

![スクリーンショット 2021-12-17 4.31.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277159/4effb40c-77c9-d29b-b598-2cec0891ce93.png)

これをみると, 写真との関連性についての誤りは15%とそれなりにはあるものの, 71%が文法誤りと若干研究のモチベーションから見直す結果になったことを覚えています。この結果は<b>実験参加者のほとんどが京大関係者(ラボの学生など)</b>だったことが原因でした。京大生はかなり英語の能力が高いので, 間違えるとしたら文法的誤りなのです。
中高生に依頼して問題を解いてもらったところ, 写真との関連性が薄い回答や語彙誤りが多くなってきて, 研究のモチベーションが失われずほっとしたのを覚えてます。

## 画像を使った時の誤りのバリエーション
最初に載せた図を再掲します。MSCOCOの画像とキャプションを元に問題を作成していますが, こうしてみるとMSCOCOって説明しにくい画像多いですよね。(1)とかどこから見つけたんだその画像。
![スクリーンショット 2021-12-17 4.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277159/aa3b81a1-a817-32a3-0c1b-905839b9c3a4.png)
最近面白い傾向だなと感じたのは, (2)のdanboのようなケースです。画像の中の物体を表現しつつ解答文を作成してもらってますが, どうしても正しい単語が出てこない時、こういう有名なキャラクターやローマ字読みを書いたりするというのは結構起こってます。正しい語彙を教えるというモチベーションは達成できるんじゃないかなと研究を続けながらワクワクしています。

# おわりに
この記事では画像を用いた語学学習支援としてラボで取り組んでいるテーマを元に発表させてもらいました。研究のモチベーションそのものに最初はかなり懐疑的だったのですが、進めていくうちに色々な誤り, おそらくGECではなかなか出てこないんじゃないかというもの, が出てきて面白いです。今後もわくわくしつつ進めて行けたらなぁと思っています。

# 参考文献
- 川端ら, 画像キャプションを用いた日本語学習支援の検討, NLP2020
- 田中ら, 写真描画問題における自動採点手法の検討, JSAI2021
これからrakuten_rss(Python用の楽天RSSを使うためのモジュール)を使おうとしている人へ。

#楽天RSSとは？

RSS(RealTime Spread Sheet)とは、投資情報を、特殊な関数（RSS関数）を使ってExcelから利用できる機能です。取得した情報はExcel上で自由に編集することが可能なため、お客様が見たい情報だけにフォーカスしたモニターツールが作成できます。またヒストリカル情報やテクニカル指標などを使ってオリジナル指標を作成したり、リアルタイム情報を使った発注もできるようになります。

要は株価ファイナンスのデータサイエンス用に使うネットワークツールです。



# まず必要なもの

チャートや板を見るためには、Market SpeedⅡにログインする必要がある。

Market SpeedⅡにログインするには、楽天証券の口座を開設する必要がある。

楽天証券の口座を開設するにはマイナンバー情報さえあれば無料で開設できる。

# プログラミング言語

エクセルデータを扱うのはVBA、といったところでしょうが、私は良く知らない。ちょっととっつきにくくない？という印象。

そこで別言語を検討。一番メジャーでjupyter notebook上で実行しやすく、予約語が英語や数学に近いpythonを使用する。

最近は凄く使われているので、それだけQiitaのようなサイトやQ＆A
サイトでの登場頻度も高く、非常に展開がしやすい、というメリットがある。
!pip install rakuten_rss(jupyter notebook上で実行するときは先頭に！が要る。)
で上手くいかないときは
```
pip install https://github.com/zaq9/rakuten_rss
```
ダウンロードしたものをフォルダに直接入れる

ディレクトリ構造を以下の様にする
lib---ddeclient.py
|
rakuten_rss.py
|
実行したいpythonファイル

#サンプル

```python
from rakuten_rss import rss,rss_dict,fetch_open

rss('9501.T' , '始値')
#output'668.00'

rss('9501.T' , '現在値')
#output:'669.00'

rss('9501.T' , '銘柄名称')
#output:'東京電力ＨＤ'
```

# Market SpeedとReal Spread Sheet起動

楽天証券口座を開設したらマイページにログインして、RSSとマーケットスピードをインストールする。

Windowsの下の検索窓からマーケットスピードⅡとRSSを開く。
そしてPythonコードを実行。(必ずMarketSpeedとRSSを起動してから実行する。)

#　・・・上手くいかない

```
fail: code@ 9984.T
```
なぜかfail code@～とでて色々と上手くいかない。
pdbなど使って調査するが、DDE通信の同期が失敗する。（DDEのクライアントのトランザクションの返り値が0）

# こういうとき

大抵新しいものに手をだしたら泥沼にはまるパターン。

つまりバージョンアップ版のMarket Speed「2」を使ってしまっているのでダメ、ということを知り合いから教えていただきました。

古い方のMarket Speedを利用すると上手くいきました。



# 参考にしたサイト

https://qiita.com/zaq9/items/8cbcb04e6f9480077cc0
Rails 掲示板の検索機能 ransack 解説

Rails 掲示板の検索機能の実装　手順　（自分用）

#ransackを導入

```:Gemfile
gem 'ransack'
```
・Gemfileにransackを追加しインストール

```:ターミナル
$ bundle install
```
#コントローラーの設定

```rb:app/controllers/boards_controller.rb
class BoardsController < ApplicationController
  def index
    @q = Board.ransack(params[:q])
    @boards = @q.result(distinct: true).includes(:user).order(created_at: :desc).page(params[:page])
  end

  def new
  end

  def bookmarks
    @q = current_user.bookmark_boards.ransack(params[:q])
    @bookmark_boards = @q.result(distinct: true).includes(:user).order(created_at: :desc).page(params[:page])
  end
```

・検索フォームを配置するindexアクション（掲示板一覧）とbookmarksアクション（お気に入り一覧）を修正していく。

・`params[:q]`→フォーム（_search_form.html.erb＊後で作る）から送られてくるパラメーター。
・`ransackメソッド`→送られてきたパラメーターを元にテーブルからデータを検索するメソッド
・`@q = Board.ransack(params[:q])`→フォームから送られてきたパラメーターを元にboardsテーブルからデータを検索している。
・`resultメソッド`→ransackメソッドで取得したデータをActiveRecord_Relationのオブジェクトに変換するメソッド。
・`@q.result`→検索結果を渡している。
・`distinct: true`→レコードを取得する際に重複を防いでくれる。

#検索フォームの作成

```rb:app/views/boards/_search_form.html.erb
<%= search_form_for @q, url: url do |f| %>
  <div class="input-group mb-3">
    <%= f.search_field :title_or_body_cont, class: 'form-control', placeholder: t('defaults.search_word') %>
    <div class="input-group-append">
      <%= f.submit class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>
```
・`search_form_forメソッド`→ransackで用意されているメソッド（＊form_forやform_withのransack版のようなもの）
・引数に「q」を設定。これは、「app/views/boards/bookmarks.html.erb」、「app/views/boards/index.html.erb」のそれぞれで呼び出し時に、boardコントローラーの「bookmarksアクションの＠q」,「indexアクションの＠q」をそれぞれ代入したいので、使い回しやすくするために「q」とする。
・`url`には呼び出し先でパスを指定するためにurlにしている。
・`_contメソッド`→ansackで用意されている検索したワードが含まれているレコードを取得するためのメソッド。`検索したいカラム_cont`の形で使う。＊`title_cont`とすれば入力されたワードでtitleカラムに対してあいまい検索される。
・`title_or_body_cont`でtitleカラムとbodyカラムの両方であいまい検索をかけれる。
・`placeholder`で検索フォームに`こんな色`を設定する。（灰色にして見やすくする）

```rb:
<div class='input-group mb-3'>

<div class='input-group-append'> 
```
・これは、Bootstrapの部分で、検索するスペース（フォーム）の部分と検索ボタンの部分をそれぞれコードで囲っている。

#部分テンプレート「_search_form.html.erb」を呼び出す

```:app/views/boards/bookmarks.html.erb
<!-- 検索フォーム -->
<%= render 'search_form', url: bookmarks_boards_path, q: @q %>
```
・`url: bookmarks_boards_path`→「boards#bookmarks」を指定
・`q: @q`→boardコントローラーのbookmarksアクションで作ったオブジェクト「＠q」を代入

```:app/views/boards/index.html.erb
<!-- 検索フォーム -->
<%= render 'search_form', url: boards_path, q: @q %>
```
・`url: boards_path`→「boards#index」を指定
・`q: @q`→boardコントローラーのindexアクションで作ったオブジェクト「＠q」を代入

#参考

https://pikawaka.com/rails/ransack
ウマ娘のサポカ情報Excelでまとめてみた

#はじめに
皆さんはウマ娘のゲームを知っているでしょうか？ネット流行語の年間大賞になったり、日本ゲーム大賞2021でモンハンやFF7のリメイクなどと並んで優秀賞を取るなど、何かと話題になったので知っている人も多いかもしれません。
そんなウマ娘のゲームをより快適にしたかった私が行ったことをまとめようと思います。
#そもそもどんなゲームなの？？
![umamusume 2021_12_17 1_12_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301720/e02bb6bf-7ef3-062c-84aa-83ebcee3be86.png)

所持する育成ウマ娘の中から育成するウマ娘を1名選択し、能力を継承する継承ウマ娘2名とトレーニングを補助するサポートカード6枚をそれぞれ選択する。
![umamusume 2021_12_17 2_03_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301720/1915682d-8708-f682-9ca4-ba51276f0bac.png)

そこから練習を繰り返しながら
目標レースで勝利し、3年目のURAの優勝を目指すスマホ版のパワプロに近いゲームになっています。

ざっくり説明しましたが少々わかりずらいかもしれないですね。
[ウマ娘紹介動画](https://youtu.be/dZTR9esWBmk)https://youtu.be/dZTR9esWBmk
上記のリンクからいける動画が個人的に一番わかりやすかったので気になった方はぜひ一度見てみてください！


ウマ娘を育成するうえでサポートカード（以下サポカとします）の選択は大きなカギとなります。
1枚1枚の性能が異なるサポカの比較をしより効率的に取捨選択ができるようにサポカをまとめてみました
#サポカ情報Excel
https://1drv.ms/x/s!ApuJmPg1YM5GjBwvZzHkXX1F1KXo
2021年12月13日21時時点のものです。

#まとめ、感想
今回はゲーム上で数値としてみることができる情報のみをまとめた。しかし、実際使ってみると数値として表示されていない情報も意外とかかわりが深いと感じられた。
また、Excelで作ったために特定のデータだけを探し出すのが難しくなってしまったのでデータベースでまとめる方法も試してみたい。
ほかによい方法がございましたらコメントで教えていただけると幸いです。
お付き合いいただきありがとうございました。
OpenSiv3Dで3Dゲームを作る（未完成）

# はじめに
この記事はSiv3D Advent Calendar 2021の10日目の記事です[^1]。
OpenSiv3Dは、v0.6.0から基本的な3D描画に対応しています。そこで、その3D関連の機能を利用してマインスイーパーの3Dバージョンを作ることにしました。（現時点では完成していません……）
この記事を書いている時点での画面は下のような感じです。WASDキーで立方体の集合を回転させることができるようになっています。また、各立方体をクリックして、爆弾があれば``Print``でGame Overと表示し、そうでなければ周囲の爆弾の数を表示するようになっています。

![Siv3D App (Debug Build) _ D3D11 _ 61 FPS _ F 1920x1050 _ V 1280x700 _ S 1280x700 2021_12_17 0_58_59s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659015/0e6b0670-ca85-d149-e45a-c911147db7ff.jpeg)





# 実装

コードは長く、ここに載せると見栄えが悪いので[GitHubのリポジトリへのリンク](https://github.com/polyester-CTRL/Minesweeper3D)を代わりに貼ります。コードの全体像を確認したい方はご覧ください。

# 苦労した点
実装する上で苦労した点をいくつか書きます。

## 3D空間内で物体を回転させる
イメージとしては下の図のような回転を三次元空間で行う感じです。
![プレゼンテーション1 - PowerPoint 2021_12_16 22_54_23 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659015/7ba61923-2807-d729-7e79-362fdc713de7.png)

この処理は回転付きのBoxであるOrientedBoxとQuaternion を使うと簡単に書けました。具体的には、回転の中心から見たときのOrientedBoxの座標をVec3{x, y, z}、三次元空間の原点から見た回転の中心の座標をVec3{a, b, c}として、

```cpp:Main.cpp
OrientedBox{ Vec3{x, y, z} * quaternion + Vec3{a, b, c}, 1, 1, 1,  
             quaternion }.draw();
```

のような形で書くことで実装できました。本来なら複雑な処理を書かないといけないクォータニオンの掛け算[^2]を*で、Vec3同士の足し算を+だけで書けるのはとても便利ですね。

## 三次元配列を用意する
OpenSiv3DにはGridという二次元配列を扱うクラスが存在します。しかし、Siv3D作者のRyo Suzukiさんに相談したところ、Gridの三次元バージョンは現時点(v0.6.3)では存在しないとのことでした。そこで、Array3Dクラスを書いてそれを使うことにしました[^4]。
今回Array3Dに実装した主な機能は、

1. 座標またはインデックスによる要素の読み出し(get)
1. 座標またはインデックスによる要素の書き込み(set)
1. 幅、高さ、奥行きの取得

です。余裕があればoperator[]やVec3で要素にアクセスするようにもしたかったのですが、時間が足りないので後回しにしました。書いたコードは[こちら](https://github.com/polyester-CTRL/Minesweeper3D/blob/main/Minesweeper3D/Array3D.hpp)から確認できます。
Array3Dについてはあまりきれいなコードでない上に、今のところ最低限の機能しか実装できていないので、今後OpenSiv3D本体にいい感じの三次元配列が実装されることに期待したいです。

# 今後の予定

ゲームとして遊べる程度に仕上げる予定です。クリックしたマスに周囲の爆弾の数が表示される機能があるのですが、執筆時点ではまだバグがあるのでそれを修正する必要があります。また、ゲームオーバー時やクリアした時の表示もいい感じに仕上げたいです。[^3]

最後まで読んでいただき、ありがとうございました。


[^1]: 遅刻し過ぎでは？
[^2]: クォータニオンの計算方法について、詳しくは[drkenさんの記事](https://qiita.com/drken/items/0639cf34cce14e8d58a5#1-4-%E3%82%AF%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%8B%E3%82%AA%E3%83%B3%E3%81%AE%E3%81%8B%E3%81%91%E7%AE%97)をご覧ください。
[^4]: 書いたとは言ってもRyoさんが書いた大元の部分に自分が少し書き加えた程度です。
[^3]: 欲を言えば、3DゲームのサンプルプログラムとしてSiv3Dリファレンス等で紹介されたいという思いがあります。
「ほかのインストールが完了するまでお待ちください」と出てくる。

## トラブル

aws-sam-cliをインストールしようとして出来なかった。

```bash
$ brew tap aws/tap
$ brew install aws-sam-cli
Error: python@3.8: the bottle needs the Apple Command Line Tools to be installed.
You can install them, if desired, with:
    xcode-select --install
```

ガイドに従って　`xcode-select --install` を打とうとすると。

```bash
$ xcode-select --install
```

インストーラーが開くが、15分12秒で止まって全く進まなくなる。
強制終了してからもう一度打ってみても、同じように止まって進行しなくなる。

上手くいかないので、インストーラーをダウンロードすることにした。
[このリンク](https://developer.apple.com/download/more/)から、 `Command Line Tools` を絞り込んで、xcodeのバージョンに合ったものをインストールした。

そうすると、「ほかのインストールが完了するまでお待ちください」と出たまま、開始すらしない。
どうやら、先程強制終了したタスクのロックファイルが残ってしまったようだ。

![img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150799/1c01c558-9cdc-700d-2e04-6e6dec1230ff.jpeg)


## mds.install.lockファイルを削除

以下のファイルを消して、再起動すると、インストーラーは動くようになった。

```bash
$ sudo rm /private/var/db/mds/system/mds.install.lock
```

これも残り4分の表示が30分以上続いたが、なんとかインストールできた。
ただ、最初の手順でも、ちゃんと待てば解決したのかもしれない。などと思った。

![スクリーンショット 2021-12-17 2.20.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150799/f02adb92-cf82-92f0-c8fd-735494aeeab6.jpeg)

## 参考

[進行中の他のインストールがないにもかかわらず、インストーラーが「他のインストールが終了するのを待つ」でハングする](https://www.webdevqa.jp.net/ja/macos/%E9%80%B2%E8%A1%8C%E4%B8%AD%E3%81%AE%E4%BB%96%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%8C%E3%81%AA%E3%81%84%E3%81%AB%E3%82%82%E3%81%8B%E3%81%8B%E3%82%8F%E3%82%89%E3%81%9A%E3%80%81%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%A9%E3%83%BC%E3%81%8C%E3%80%8C%E4%BB%96%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%8C%E7%B5%82%E4%BA%86%E3%81%99%E3%82%8B%E3%81%AE%E3%82%92%E5%BE%85%E3%81%A4%E3%80%8D%E3%81%A7%E3%83%8F%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B/959442744/)
[macでのアプリインストール時に「ほかのインストールが完了するまでお待ちください...」と表示されて処理が進まない
](https://qiita.com/Yuya2218/items/ec67b79b6ddb2f1bffb0)
ソフトウェア演習D：NetBeans12.5でjsonを使えるようにする

こんにちは<a href="https://qiita.com/advent-calendar/2021/ipu">岩手県立大学とか、岩手の人たちAdvent Calender</a >18日目の記事です。


先日、ソフトウェア演習Dの課題でGsonを利用してjsonを使いました。
個人的にGsonを導入するのに詰まったので、NetBeans12.5にGsonの導入について書きたいと思います。


## NetBeansにGsonを導入する
### Gsonとは
Gsonとは、Googleが提供するライブラリでJSONデータとjavaオブジェクトを変換することができます

Gsonライブラリの使い方：https://sites.google.com/site/gson/gson-user-guide#TOC-Overview
Gson GitHub：https://github.com/google/gson

#####今回使用するGsonは外部ライブラリなので以下の手順で追加する必要があります。

注意：私の環境では日本語化プラグインを入れていないので`日本語(英語)`で表記します

###手順

① `依存性(Dependencies)`を右クリック

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2299400/e79766d0-c8bc-8efc-9e65-b58541c1bd40.png">

② `依存性を追加(Add Dependencies)`をクリック

 <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2299400/81f551af-e873-b187-4490-d8b824f0871b.png">

③ クエリ(Query)に`gson`と入力

④ `com.google.code.gson : gson`を選択

⑤ `2.8.9 [jar]`を選択して追加(Add)をクリックしてGsonライブラリを追加

 <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2299400/3bc4cb70-a8ad-c5a0-b784-5c1cb4a1aa50.png">

#####Gsonライブラリ追加後
`依存性(Dependencies)`の中にgson-2.8.9.jarが追加されているがわかります
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2299400/29f7bddf-6079-c933-9dda-9fe75131b593.png">

これでGsonライブラリを使ってjsonを使えるようになりました。

##終わりに
NetBeansへの外部ライブラリの導入は複雑に見えますが、意外と簡単にできるので他の外部ライブラリを入れて練習するのもいいかもしれません。

お疲れ様でした!!

<font color="#FFF">JetBrain使いたい</font>
Chromeでよく使うショートカットとオススメ拡張機能の紹介

私が普段使用しているChromeのショートカットキーと拡張機能を紹介します
## Chrome 既存のショートカットキー
| 操作                                | コマンド（Windows） | コマンド（Mac） | 
| ----------------------------------- | ------------------- | --------------- | 
| タブ切替                            | Ctrl + Tab          | control + Tab                | 
| 新しいタブを開く                    | Ctrl + T            |command + T                 | 
| タブを閉じる                        | Ctrl + W            |command + W                 | 
| アドレスバー（URL）にカーソルをあてる | Ctrl + L            |command + L                 | 
| 戻るボタン                          | Alt + ←（左）            | command + ←（左）                 | 
| 進むボタン                          | Alt + →（右）            | command + →（右）                 | 
| 上下スクロール                      | ↑ OR ↓            |↑ OR ↓                  | 
| ページ内の文字列を検索する            | Ctrl + F            |command + F                 | 
| ページ内の入力項目のカーソルを解除する  | Esc          |Esc                 | 

## より使いやすくなるオススメ拡張機能
既存のショートカットだけでもノーマウスで操作できるのですが

以下の拡張機能を使用することで更に高速操作ができるようになります
### Vimium

https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja

「Q」キーでページ内のボタンや入力欄にショートカットキーを付与します

### Google検索キーボードショートカット

https://chrome.google.com/webstore/detail/google-search-results-sho/dchaandmcifgjemlhiekookpgjmkcelg?hl=ja

Google検索にショートカットキーを付与します

## お役立ち記事
完全ショートカットで操作しているときにChromeの仕様で悩むときがあります。その際に役に立った記事をご紹介します！

 - Ctrl + L を行った際にURL欄にフォーカスされたままになってしまう

https://qiita.com/embokoir/items/603e55ecfb515ed6c378

 - ページ内の文章でカーソルが当てられてしまい、上下スクロール（↑ OR ↓）がしづらくなる

https://wariichi.com/what-is-this-flashing-cursor/
Next2D Framework routing設定[NoCode Toolの連携編]

今日は`Next2D Framework`と`NoCode Tool`の連携手法を紹介したいと思います。

# Framework側の処理

## routing.json
`type`に`content`を設定します。

```json:routing.json
{
  "top": {
    "requests": [
      {
        "type": "content",
        "path": "{{ content.endPoint }}content/sample.json",
        "name": "MainContent",
        "cache": true
      }
    ]
  }
}
```

プロパティ|値
---|---
type|content
path|{{ content.endPoint }}content/sample.json
name|MainContent
cache|true

### path
NoCode Toolで書き出したJSONデータが保管されているURLを追記します。

### name
cacheを利用する、もしくは、レスポンスデータを任意のクラスで取得したいケースの時は設定してください。JSONデータを取得するだけの場合は`name`の設定を行わなくても問題ありません。

### cache
jsonファイルのアニメーションデータは静的なデータなので、二度目からはキャッシュから再利用する事を推奨しています。但し、シーン数やアニメーションの数が多い場合はメモリリークする可能性がありますので、使い過ぎはお気をつけください。再利用性の高いものはキャッシュし、状況などで変化するようなアニメーションは`false`に設定するのがいいかと思います。

## シンボル名
NoCode Toolは、全てのDisplayObjectに任意のシンボル名を設定でき、設定したシンボル名を利用してFrameworkから動的にアクセスが可能です。

```javascript:TopContent.js
/**
 * @class
 * @extends {next2d.fw.Context}
 */
export class TopContent extends next2d.fw.Content
{
    /**
     * @return {string}
     */
    get contentName ()
    {
        return "MainContent";
    }

    /**
     * @return {string}
     */
    get namespace ()
    {
        return "TopContent";
    }
}
```

`get namespace`と`get contentName`のgetter設定は必須となります。
`contentName`でどのJSONかを判別する為、`routing.json`の`name`と一致させる必要があり、`namespace`で設定した文字列と`NoCode Tool`で設定したシンボル名が一致する必要があります。

Framework側での設定は以上となります。
次は、NoCode Tool側の設定を記載していきます。

# NoCode Tool側の設定

`Controller Area`の`Library`タブを開き、新しいMovieClipを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/52204c9c-10ba-d6a9-fff0-dc545501a6d7.png" width="400">
追加した、MovieClipのSymbol部分をダブルクリックして`get namespace`で設定した文字列と同じ文字を追記します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/d02a5408-f771-79f5-5120-99c42ece44b5.png" width="400">
これで、書き出しを行えば、Framework側で任意のタイミングで、任意の`MovieClip`を展開する事ができます。

アニメーション単体で管理するのもいいですが、シーン単位でアニメーションを管理した場合などに便利です。また、クリエイターとプログラマーがシンボル名を共有していれば、お互いに干渉する事なく作業を進められ、結合まで進められます。

明日は、ViewとViewModelの構成を記事にできればと思います。
gtkを用いたGUIテストアプリケーション作成環境について

# はじめに
　gtkを使うのは、修論ぶりなので今から約２０年以上前のことになります（当時、修士論文のためにgtkとtcl/tkを使い分けて、特定画像の特徴抽出プログラムを作成しました。。。。）。gtkを使っている間に先日見たNetflixの「ボクたちはみんな大人になれなかった」のラストシーンのように色々な思い出がフラッシュバックしました。笑
　今回は、Mac、Jetson、Kriaで動作するためのGUI作成のために、monoDevelopなどいくつか検討した結果、２０年以上の時を経て再び元の場所へ帰ってきました。

# 要件
　テスト用GUIアプリケーションを作成したい。ただし、要件は以下のとおり。

* Mac、Jetson及びKriaで同一の開発環境が欲しい
* 直接ハードウェアのレジスタを触る可能性がある
* CUDA Cを使用したい
* OpenCV（C++又はPython）を使用したい

# 結果
　上記の条件を満たそうとすると、「monoDevelopか」、「GTKを直接操作するか」、「Qtか」ということになり、**結局GTKで開発する**ことに決めました。以下、その理由です。

- Qt：良さそうなのはわかるが、お金の匂いがプンプンして、あとから面倒になりそう。
- monoDevelop：monoDevelopは良い。結構悩みました。 
 - C#ベース開発でき、GUIもセンスが良く、間違いなくGTKよりも開発スピードが上がると思う
 - C#からC又はC++を呼ぶ場合、ライブラリ化が基本になってしまう
 - C#、C++、Cが混在した場合のコンパイルシステムがよくわからない（勉強不足）
 - monoDevelopがcやc++のコンパイルをサポートしたという記載があるが、資料が少ない
 - オープンソースでcやc++を扱えるようだが、その構築で困りたくない（年齢からくるやる気の問題）
- GTK：よく知っている。扱いにくいこともよく知っている。
 - C/C++でのGUI開発のため、他の要件と親和性が高い
 - コンパイルシステム（make）を書くのが簡単
 - 当時から資料が多く、困ることはあっても、止まることはない（経験談）

　このような結論になってしまいましたが、もし、コメントがあればいただきたいです。本心としては、GTKを直接扱いたくなかった。。。

# 開発環境構築
* gtkラッパーであるgtkmmをインストールする（嵌まるのが嫌なのでgtkmm4.0をソースコードからコンパイルする方法は避けた。）。

```bash:gtk3.0
sudo apt-get install libgtk-3-dev
```
```bash:gtkmm3.0
sudo apt-get install libgtkmm-3.0-dev
```

※なお、Jetson(ubuntu)環境でgtkmm-3.0を使用してコンパイルを行うと以下のようなエラーが出ることがある  

解決方法については、[参考](# 参考)のとおり、object.hに make_managed のテンプレートクラスを追加する。

```bash:error-1
"Unable to resolve the identifier make_managed"
```

* gitをインストールする

```bash:git
sudo apt-get git
```
　なお、2021年8月13日からパスワード認証を廃止し、パーソナルアクセストークンで認証を行う必要があるので注意する。また、`git clone` 時には、githubでは、事前に設定した `http` or `ssh` のどちらか一方でしかアクセスできないので注意が必要です。 

# 開発環境
スクリーンキャプチャ

![Screenshot from 2022-01-01 07-37-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423321/bc6e935f-5879-0233-b6d0-ee8a46fedc3d.png)


# 参考
[お手軽Linux(Ubuntu) GUIアプリ開発　入門](https://qiita.com/iota_11/items/a5e72aa30053a54e931f)
[Programming with gtkmm 3](http://transit.iut2.upmf-grenoble.fr/doc/gtkmm-3.0/tutorial/html/index.html)
[stackoverflow:Why do I get the compile error, "make_managed" is not a member of 'Gtk'?](https://stackoverflow.com/questions/53334845/why-do-i-get-the-compile-error-make-managed-is-not-a-member-of-gtk)
[GitHubでhttpsのパスワード認証が廃止された。Please use a personal access token instead.](https://qiita.com/shunsa10/items/e43564cf48f84b95455b)
[Creating a personal access token](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
JavaScriptのDOMって？(初学者向け）

## 目次

|No|     目次     |
|:--|--------------|
|1|はじめに          |
|2|DOMって？           |
|3|DOMツリーって？|
|4|まとめ|
|5|おわり|


## 1.はじめに

JavaScriptを学び始めると<b>DOM</b>という言葉に必ず出会います。
ではいったいDOMとはなんなのかという部分にこの記事では触れていきます。

## 2.DOMって？

DOMについて触れていきます。
DOMとは「Document　Object　Model（ドキュメントを物として扱うモデル）」の略で、
HTMLなどの文書をJavaScriptなどのプログラムで扱いやすくするためのAPIです。

DOMを利用する事で、
HTML要素の取得,ユーザの操作時の処理,イベントの設定,
見た目の変更などが主に行えます。

## 3.DOMツリーって？

DOMを理解するために理解が必須となるのがDOMツリーです。
階層構造とは組織図のようなものだと考えると理解しやすいです。

（DOM上ではHTMLのタグのことをNodeと呼びます。）

下の図はブラウザ内部に構築されるDOMツリーの1例です。
DOMツリーのルートを親Node,子Node,兄弟姉妹Nodeを意識して見てみましょう。
(親Node,子Node,兄弟姉妹NodeはそれぞれHTMLの入子構造を意識しましょう！)

![ツリー構造の例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1784356/b8f4990c-97c5-453b-1e65-6791223f8d6b.png)

## まとめ


- DOMツリーのルートを理解し、意識することでDOM操作を行えるようになります
- DOMはWEBページとプログラミング言語を繋ぐ役割を持っている
- Nodeには親Node,子Node,兄弟姉妹Nodeなどがあり、HTMLの入子構造を意識する

## おわり
最後までご覧いただきありがとうございました。
それではまた別の記事でお会いしましょう〜👋
バグ・ストーリーは突然に

このコラムは [ソフトウェアテストの小ネタ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/software-testing-koneta)として12/21から公開になります。

さて、2021年も暮れようとしています。クリスマスといえば小田和正さんの「クリスマスの約束」という特別番組をご存じでしょうか。毎年このライブを楽しみにしているのですが、小田さんのシンプルな曲のタイトルを眺めていて、開発～テスト業務に関連するようなワードが出てきたのでネタコラムにしてみました。

:::note warn
このコラムは、私が好きな小田和正の曲のタイトルから、ソフトウェアテストや開発における大切なことを(半ば強引に)連想してみようという、ただそれだけのネタコラムです。公式に公開されている曲についてはリンクを張っています。ぜひ聴きながらお楽しみください。それ以外の曲もすべて素晴らしいので、興味あれば音源入手して楽しんで頂ければと思います。
:::

##オフコース時代 (1967～1989年)
####言葉にできない (1982年)
<iframe width="560" height="315" src="https://www.youtube.com/embed/_C4aranDbwE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
愛については言葉にできないことが最大の表現なんだと、切ないメロディが教えてくれます。

開発～テストでは言語化することが大切です。
言葉にできないものは作ってはいけません。

####あいつの残したものは (1976年)
この曲はオフコースのシングル「ひとりで生きてゆければ」のカップリングで鈴木康博さんの作曲です。洗練されたフォークソング調で始まりますが、サビでハッとする展開になっています。

なぜ今頃、打ちあけにきた
既にリリースした後なのに

なぜ今頃、打ちあけにきた
既にリリースした後なのに

####君が、嘘を、ついた (1984年)
イントロのギターリフのインパクトが凄いです。これを最後まで良い意味で引きずって成立させています。間奏の複雑で多重なコーラスも聴きどころですね。
何よりこの曲は凄くROCKしてるんですよね。小田和正はバラードのイメージが強いですが、こうしたROCKな一面も持っていることに驚かされます。

今、君が嘘をついた
「今週、直すから」
「バグはないですよ、たぶん」

また、君が嘘をついた
ギリギリの中での虚勢と言える言葉にいちいち噛みついてはいけません。

##小田和正ソロ (1986年～)
####ラブ・ストーリーは突然に (1991年)
<iframe width="560" height="315" src="https://www.youtube.com/embed/LDe0rbDromY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
あの日 あの時 あの場所で レビューしなかったら
僕等は いつまでも 見知らぬ仕様のまま

####伝えたいことがあるんだ (1997年)
<iframe width="560" height="315" src="https://www.youtube.com/embed/X_AfRlTGK5o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
この曲の冒頭から歌に込めている力強さは"決意"を意味しています。
こんな力強いラブソングは珍しいような気がします。

伝えたいことは、伝わるように伝えないと伝わらないです。
逆に言えば、自信の無さも伝わります。
自信無く伝えたテスト戦略を信じる人はいないでしょう。

####いつか　どこかで (1992年)
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZqTOds5zM28" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
いつか、どこかで　見た不具合だな・・・
・・・もう一度　(そのうち)見えるはず
なんてことのないように、再現手順やログは残しておきましょう。

####まっ白 (2004年)
<iframe width="560" height="315" src="https://www.youtube.com/embed/PK_dDkgbemU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
過ちも、許されない嘘も、時は消してくれたけど
今にしてまだ、本当の品質はわかってないみたいだ。

####たしかなこと (2005年)
<iframe width="560" height="315" src="https://www.youtube.com/embed/Nn_OTqn1blw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
忘れないで　どんな時も　きっと不具合はそばにいるから
そのために僕らはこの場所で　同じ時を生きているんだ

一番大切なことは　特別なことではなく
ありふれた日々の中で　今の気持ちのままで見つめていること

・・・いかがでしたでしょうか。
このコラムは曲を聴きながら書いたのですが、後半はシンプルでストレートな歌詞に聴き惚れていてどんどんヒネリがなくなってしまった点はご容赦ください。
Phoenixで作るGPS Logging System 7 GoogleMapの表示

[ひとりLiveView Advent Calendar](https://qiita.com/advent-calendar/2021/liveview_alone) の7日目の記事です

この記事は[Elixir Conf US 2021](https://www.elixirconf.com/)の[発表](https://www.youtube.com/watch?v=vHNqZmLLTj4)したシステムの構築と関連技術の解説を目的とした記事です

GPS Loggerアプリから送信されたデータを表示するためにGoogleMapAPIを使用してLiveView上にGoogleMapを表示させます

今回は以下の3つを実装します

- npmでライブラリインストール
- JS HookでGoogleMapApiを読み込む
- LiveView上で表示

# npm ライブラリの追加
phoenix 1.6になってからwebpackからesbuildに移行してnpm非依存になりましたが
npm installすれば普通に使用できます

assetsに移動してGoogleMap loaderを追加します 

```
cd assets
npm install @googlemaps/js-api-loader
cd ..
```


#JS HookでGoogleMapの表示
LiveViewにはJS Hookというものがあって、
backendとfrontendでデータをやり取りする場合は　APIを通すか、それ用のライブラリをインストールする必要があり、面倒くさいものですが

- JS側のhandleEvent, pushEvent 
- Elixir側のpushEvent

という関数を使って相互に JSONとMapのやり取りができます

mount時にGoogleMapを表示するようにします
実際に試す場合は GoogleMapAPIのキーを取得してください

```assets/js/hooks.js
import { Loader } from "@googlemaps/js-api-loader";
let Hooks = {}
const apiKey = "your api key"
Hooks.Map = {
  mounted() {
    const loader = new Loader({
      apiKey: apiKey,
      version: "weekly",
    })

    loader.load().then(() => {
      const map = new googlemaps.Map(
        document.getElementById("map"),
        {
          center: { lat: 33.30639, lng: 130.41806 },
          zoom: 9
        }
      );
      window.map = map;
    })
  }
}

export default Hooks;
```
mount()関数が LiveView のmount後に実行されるので、
初期データの作成他に待ち受けるイベントを記述したりします

hooksファイルができたら,liveSocketのoptionsの箇所に `hooks: Hooks` で追加します

```assets/js/app.js
...
import Hooks from "./hooks"
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
...
```
Hooksを読み込む際の注意点ですが
Hooksを読み込むタグにIDをつけて読み込むモジュールを`phx-hook="Map"`で指定します
また、canvasなどタグ内が頻繁に変化する箇所はLiveViewが変更を検知して再レンダリングされるので、
LiveViewが変更しないように`phx-update="ignore"`を指定します


```leex:lib/live_logger_web/live/map_live/show.html.heex
<h1>Show Map</h1>

<%= if @live_action in [:edit] do %>
  <%= live_modal LiveLoggerWeb.MapLive.FormComponent,
    id: @map.id,
    title: @page_title,
    action: @live_action,
    map: @map,
    return_to: Routes.map_show_path(@socket, :show, @map) %>
<% end %>

<ul>
  <li>
    <strong>Name:</strong>
    <%= @map.name %>
  </li>
  <li>
    <strong>Description:</strong>
    <%= @map.description %>
  </li>
</ul>
<!--- 以下追加 --->
<div id="googleMap" phx-update="ignore" phx-hook="Map">
  <div id="map"></div>
</div>

<span><%= live_patch "Edit", to: Routes.map_show_path(@socket, :edit, @map), class: "button" %></span> |
<span><%= live_redirect "Back", to: Routes.map_index_path(@socket, :index) %></span>
```

google mapの表示領域の高さを600pxに指定します。
heightを指定しないとmapが表示されないので忘れないようにしましょう

```assets/css/app.css
...
#map{
  height: 600px
}
```
GoogleMapが表示されました！

![スクリーンショット 2021-12-17 0.46.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/8ed11d8d-e70c-86b0-b35a-25f9fe50ca2e.png)

# 最後に
LiveView上にGoogleMapを表示することができました！
本記事は以上になります

次はBulmaを使用してスタイリングをしていきます

# code
https://github.com/thehaigo/live_logger/tree/day7
誰かに役立つかもしれない自分専用忘備録

# MySQL

## ログイン

- mysql -u *youraccount*
- mysql -u *youraccout* password=*password*

## 基本コマンド

```mysql:データベース変更
use *databese*;
```
```sql:パスワード変更  
set password for *user*@localhost=password('*password*');
```
```sql:ユーザー一覧表示  
select host,user from mysql.user;
```
# Python

## 非同期処理

### threadingによる監視処理

```python:hello_threading.py
# -*- coding: utf-8 -*-
import threading
import time

def anlyze():
    print('  + Calculation start...')
    time.sleep(10)
    print('  + Calculation end...')
    return 0 

def check():
    print('    - CheckInn...')
    while thread1.is_alive():
        print('      :Checking...')
        time.sleep(2)
    print('    - CheckOut...')
    return 0

print('* Process start...')
thread1 = threading.Thread(target= anlyze)
thread2 = threading.Thread(target= check)
thread1.start()
thread2.start()
thread1.join()
thread2.join()
print('* Process end...')
```

## Django

### 基本コマンド

```python:プロジェクト作成
django-admin startproject ProjectName
```

```python:アプリケーション作成
python manage.py startapp ApplicationName
```

```python:サーバ起動
python manage.py runserver {8080}
```

# VScode

## venv(Python)で作成した仮想環境を利用する方法

`Ctrl` + `Shft` + `'` → `Python: Select interpreter...` -> [仮想環境のpython.exe]を指定
Next2D Frameworkのrouting設定[カスタム設定編]

今日はroutingのカスタム設定の解説を書きたいと思います。
`requests`の配列は上から順番に実行されていきます。

今回は下記の設定値をroutingに設定します。

```json:routing.json
{
  "home": {
    "requests": [
      {
        "type": "custom",
        "class": "api.HomeText",
        "access": "static",
        "method": "get"
      }
    ]
  }
}
```

次に、`src/model/api`にHomeText.jsを作成します。

```javascript:HomeText.js
/**
 * @class
 * @extends {next2d.fw.Model}
 */
export class HomeText extends next2d.fw.Model
{
    /**
     * @return {Promise}
     * @static
     */
    static get ()
    {
        return fetch(`${next2d.fw.config.api.endPoint}api/home.json`)
            .then((responce) => { return responce.json() })
            .catch((error) => { console.error(error) });
    }
}
```

# サンプル設定

プロパティ|値
---|---
type|custom
class|api.HomeText
access|static
method|get

## class
`src/model`に設置したクラスはディレクトリ階層を`.`として分解され、`next2d.fw.packages`に登録されます。`src/model/api/HomeText.js`にアクセスするには`api.HomeText`とする事でアクセス可能です。

## access
`static`か`public`を設定する事ができます。`static`は`Class.method()`で、`public`は`new Class().method()`をコールします。

## method
コールする関数名を設定できます。今回は`get`っという関数をコールする設定をしていますので、`HomeText.get()`がコールされます。もし`public`とした場合は`new HomeText().get()`がコールされます。

# name設定の役割
`requests`の`name`を設定すると`next2d.fw.response`にレスポンスデータが格納されます。後続のリクエストでレスポンスデータを使用したい場合は、`next2d.fw.response.get(name)`とすることでレスポンスデータを取得する事ができます。例えば、後続処理でQueryStringもしくは、POSTで送信などした場合に役立つのではないかと思います。

# cacheの特性
また、`requests`の`cache`を`true`にすると、初回だけリクエストを送り、以後はキャッシュの値を再利用します。`next2d.fw.cache`のMapオブジェクトに格納されますので、値参照であるJSの特性的に、キャッシュのオブジェクトデータを書き換えた物が`next2d.fw.cache`に格納され続けます。

カスタム機能を利用する事で、Auth認証や外部APIとの連携をスムーズに行う事ができます。
明日は`NoCode Tool`との連携を紹介したいと思います。
Excel VBA チェックボックスがリンク切れでOnにならない場合のリンク先セルアドレスを消去するマクロ

# これ以外にチェックボックスがうまく動かないケース
[Excelのチェックボックスがチェックできない時の対処法 Office Hack](https://office-hack.com/excel/checkbox-cannot-check/)
これ以外にもあるということが判明した。
例えば、別のシートのセルにリンクを貼っていたのに、そのシートを削除したような場合、リンクがきれてエラーになっている。
このような場合、エラーメッセージもなにも表示されない。
ひどいときはプロパティすら表示されない。（なぜか一度プロパティを表示させると、数式バーにエラーが出現する）
これで手動で消去してもよい。
しかしプロパティの表示は面倒だし、なぜかプロパティの表示がエラーになる場合もある。

##ここで言っているチェックボックスはForm2.0を参照したときのものではない
[【エクセル】フォームコントロールのチェックボックスを使ってみよう！ ]()
[フォーム コントロールや ActiveX コントロールを選択できない](https://support.microsoft.com/ja-jp/office/%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0-%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%84-activex-%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84-4c822f4c-591f-46bd-90cc-dd3abb671c67)
>まず、選択するコントロールの種類を決定します。 一意に変更できるコントロールとオブジェクトには 3 種類あるため、見ているだけでどの種類のコントロールなのかが分からない場合があります。 操作しているコントロールの種類を確認するには、コントロールを右クリックし、次の点に注意してください。

>- ショートカット メニューに [マクロの登録] が表示される場合、そのコントロールはフォーム コントロールです。
  -     ヒント: グループ ボックスフォーム コントロールの正しいショートカット メニューを表示するには、グループ ボックスの内側ではなく、グループ ボックスの境界を選択してください。


> - ショートカット メニューに [プロパティ]コマンドが含まれている場合、コントロールはActiveXコントロールExcelデザイン モードです。
  - ショートカット メニューに [テキストの編集] コマンドが含 まれている場合、オブジェクトは描画ツール オブジェクトです。

#ポイントとコード
##ポイント
###Excelのフォーム コントロールのチェックボックスのリンク先セルのプロパティ
`Shp.linkedCell`
ではなく
`Shp.ControlFormat.LinkedCell`
このリンクを消すので
`Shp.ControlFormat.LinkedCell = ""`
となる。
~~現在リンク切れ。~~復活しました
Shape.ControlFormat プロパティ
https://docs.microsoft.com/ja-jp/office/vba/api/excel.shape.controlformat

###コントロールの名前が日本語で表示されても英語の時がある
また図形名が<b>名前ボックス</b>日本語でチェックボックスと書いていてもVBAではCheck Boxという名前で認識される場合がある。

[VBA｜クリックした図形の名前の取得方法 ](http://club-vba.tokyo/vba-zukei-name/)
>画像（図形）の名前は２種類ある

と説明されているが
間違いなくバグである。しかもMicrosoftが仕様と言いはる系のバグである。
これと似ているのが
NumberFormatLocalとNumberFormatである。
NumberFormatと同様に
本来は2つのプロパティのNameとNameLocalに分かれるのに、名前ボックスにはNameLocalしか表示されない、ということになる。

##コード
実際は除外等が必要になるので、バックアップをとって実験してから使用してください。
大抵の場合、リンクには重要な意味があるので、なんでも消してしまうとあとから困ることが多い。


```vb
Sub DellinkedCellAddress()

' For Microsoft Excel VBA
' アクティブシートのすべてのコントロールのチェックボックスのリンク先セルアドレスを消去するマクロ。

Dim wb As Workbook: Set wb = ThisWorkbook
Dim ws As Worksheet: Set ws = ActiveSheet
Dim shp As Shape

For Each shp In ws.Shapes
  If shp.Name Like "Check Box*" Then
    Debug.Print shp.Name & "Linkedcell Deleting..."
    shp.ControlFormat.LinkedCell = ""
  Else
    Debug.Print shp.Name
  End If
Next

End Sub
```

それにしてもリンク先がなくなるなどしてエラーを起こすとチェックボックスにチェックを入れることができないというのは驚いた。
しかもエラーもなにも表示されず、チェックボックスがOnにならない。
さらにプロパティを表示させようとしてもエラーになる場合すらある。
このマクロはチェックボックスの不具合をすべて解消するものではないので、かならず原因を特定し、エラーや余計なものを削除しないように設定を加えて使用する必要がある。
Windows11にWSLをインストールしてみる

# Windows11にWSLをインストール

まずWindows Terminalを管理者モードで立ち上げます。
（スタートメニューに表示されているWindows Terminalのアイコンを右クリックして表示されるメニューで、「管理者として実行」を選択）

管理者モードで立ち上がったWindows Terminal上で、インストール可能なWSLのディスとリビュージョンを確認します。

```
> wsl --list --online
インストールできる有効なディストリビューションの一覧を次に示します。
'wsl --install -d <Distro>' を使用してインストールします。

NAME            FRIENDLY NAME
Ubuntu          Ubuntu
Debian          Debian GNU/Linux
kali-linux      Kali Linux Rolling
openSUSE-42     openSUSE Leap 42
SLES-12         SUSE Linux Enterprise Server v12
Ubuntu-16.04    Ubuntu 16.04 LTS
Ubuntu-18.04    Ubuntu 18.04 LTS
Ubuntu-20.04    Ubuntu 20.04 LTS
```

今回はUbuntuをインストールするので、下記のコマンドを実行します。

```
> wsl --install -d Ubuntu
```
Ubuntuのパッケージをダウンロード後、PCの再起動を要求された場合には、再起動します。
再起動するとUbuntuが起動しインストールが継続されます。

```
Installing, this may take a few minutes...
```
しばらくすると、UbuntuにログインするためのUNIXアカウント名と、そのパスワードを聞いてくるので、入力します。

```
Enter new UNIX username: *********
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
```

すると「UNIXアカウント名@PC名:~$」というプロンプトが表示され、無事Ubuntuが利用できるようになります。

もし、別ウィンドウでUbuntuが起動した際に下記のエラーが出た場合には、Microsoftのサイトの「以前のバージョンの手動インストール手順」の手順を行ってから、リトライするとうまくいく場合があります。

```
WslRegisterDistribution failed with error: 0x800701bc
```

https://docs.microsoft.com/ja-jp/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package

# Ubuntuのアップデート

まず最初にUbuntuのすべてのパッケージを最新化するため、アップデートしましょう。

```
$ sudo apt update
$ sudo apt upgrade -y
```

# X Window環境の稼働確認

Windows11のWSLは、X Windowサーバ機能をもつ「WSLg」をサポートしています。
インストールしたUbutuでX Windowクライアントが動作するかの稼働確認をしてみましょう。
稼働確認のため、X11サンプルプログラムの「xeyes」をインストールしてから、起動しています。

```
$ sudo apt install x11-apps -y
$ xeyes&
```

別ウィンドウが開いて、おなじみの「目玉」が表示されれば正常です。
（ただし初回起動時には起動に時間がかかるので、慌てずに待ちましょう）

![xeyes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2369407/97d5af6d-9e3a-3df1-aee9-bfbec619ce9e.png)


もし下記のエラーが出て、環境変数DISPLAYを適切に設定（「export DISPLAY=:0.0」とか）しても継続する場合には、WSLのアップデートが必要です。

```
$ xeyes
Error: Can't open display: 0
```

WSLのアップデートするには、Windows Terminalを管理者モードで立ち上げて、wsl --updateコマンドを実行して、WSLをアップデートした後、wsl --shutdownコマンドで再起動します。

```
> wsl --update
> wsl --shutdown
```
raspberry pi がkernel panicに陥った時の対処法備忘録

# はじめに
録画用のラズパイが我が家にはあるのですが，録画中に電源をひっこ抜いたらKernel Panic になり，起動しなくなってしまいます．当然ですね，，おうちの配線が悪いみたいで頻繁にやらかしてしまうので備忘録にしておきます
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498814/c12fce11-b1cc-e8bc-0c60-3303728ed7a6.jpeg)

# 対処法
1. 起動ディスクを元気に動いている別のRaspberry piに接続（ほかのLinuxでもいいです）

2. `fdisk -l`で接続した起動ディスクを確認

```
pi@raspberrypi:~ $ sudo fdisk -l
...
...
Disk /dev/sda: 931.5 GiB, 1000204886016 bytes, 1953525168 sectors
Disk model: External USB 3.0
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0xfa690dd2

Device     Boot  Start        End    Sectors   Size Id Type
/dev/sda1         8192     532479     524288   256M  c W95 FAT32 (LBA)
/dev/sda2       532480 1953525167 1952992688 931.3G 83 Linux
```

`/dev/sda2`にありました．
3. マウントを解除しておきます．

```
pi@raspberrypi:~ $ umount /dev/sda
umount: /dev/sda: not mounted.
```
うまくできていそうですね！
4. `fsck` で修復

 ```
pi@raspberrypi:~ $ sudo fsck -f /dev/sda2
fsck from util-linux 2.33.1
e2fsck 1.44.5 (15-Dec-2018)
ext2fs_check_desc: Corrupt group descriptor: bad block for block bitmap
fsck.ext4: Group descriptors look bad... trying backup blocks...
Pass 1: Checking inodes, blocks, and sizes
Inode 2885617 seems to contain garbage.  Clear<y>? 
(このあとy連打)
...
Free inodes count wrong (61038581, counted=60599427).
Fix<y>? yes
rootfs: ***** FILE SYSTEM WAS MODIFIED *****
rootfs: 439165/61038592 files (0.1% non-contiguous), 126305797/244124086 blocks
```

終わりました!
5. 起動ディスクをラズパイに差し込んで電源ON．起動できるようになっていると思います
gradle プロジェクトのバージョンアップをしてみた

みなさん、ごきげんよう。最近（と言ってもちょい前だけど） kotlin の 1.6 が出たので、せっかくなら業務で触ってみたいと思ったので、手元の gradle + kotlin プロジェクトのバージョンアップをしてみました。バージョンアップでちょっとつまづいたところがあったので、メモっておきます。

# 結論

対象プロジェクトの主要なライブラリのバージョン変更前後をまとめました。

| ライブラリ | 変更前 | 変更後 | 備考 |
|:-:|:-:|:-:|:-:|
| kotlin | 1.5.10 | 1.6.10 | |
| gradle | 7.1 | 7.3.2 | |
| spring-boot | 2.5.1 | 2.5.7 | |
| springfox | 2.8.0 | 3.0.0 | |
| postgresql | 9.5 / 9.6.9 | 11.9 | 開発環境で別のバージョンが指定されてた |

## springfox のバージョンアップについて

[springfox](https://github.com/springfox/springfox) とは、アノテーションベースの swagger/openapi 定義プラグインです。バージョン 3.0.0 になって依存の書き方が変わったので、そこだけ注意です。

```gradle
//implementation('io.springfox:springfox-swagger2:2.8.0')
//implementation('io.springfox:springfox-swagger-ui:2.8.0')
//implementation('io.springfox:springfox-core:2.8.0')
implementation('io.springfox:springfox-boot-starter:3.0.0')
```

いわゆる bom が提供された感じですかね。1行で済むので楽になりました。

## spring-boot のバージョンアップについて

現時点(2021年12月)で、spring-boot の最新バージョンは 2.6.1 なのですが、[springfox のバージョンが 3.0.0 の場合、spring-boot のバージョンを 2.6.x にあげられない不具合があります](https://github.com/springfox/springfox/issues/3791)。仕方がないので 2.5 系の最終バージョンを設定しました。

https://github.com/springfox/springfox/issues/3791

## junit のバージョンアップについて

ちょっと詳しく調べてませんが、 junit4 の依存がなくなったため、テストは junit5 で書く必要があります。

## postgresql のバージョンアップについて

[最新の flyway のバージョンでは、postgresql のバージョン 9 系はサポートされなくなりました（有償でのサポートはある）](https://flywaydb.org/documentation/database/postgresql)。そのため（無料で頑張るなら） postgresql のバージョンは最低でも 10 系にする必要がありそうです。

https://flywaydb.org/documentation/database/postgresql

また、10 系からは `POSTGRES_HOST_AUTH_METHOD=trust` がないと GitLab CI とかで失敗するようです。

https://qiita.com/tomopict/items/23cc4332781bb28d2973

# 感想

最近はプロジェクトのフレームワーク/ミドルウェアのバージョンを上げることが多いのですが、たくさんのライブラリに依存しているといい感じの組み合わせを見出すのが大変ですね... 加えて、バージョンを揃えたところでやっとコンパイルが走るので、バージョンを揃えることってコンパイルの前段階の作業であり、バージョンアップによるIFの変更対応はこれから、と思うと骨が折れますね。皆さんも直近でライブラリの更新トリガーが入ったと思うので、一緒に頑張りましょう。

現場からは以上です。

そうだった、このバージョンアップが終わったら kotlin の最新機能とか使っていきたいと思います。
Unity シェーダーリファレンス

Visual Studio でシェーダー開発をしていても、マクロの定義の表示や参照の一覧なんて便利なことは出来ないので、あまり IDE の恩恵は受けられません。

複数のウインドウを開いてファイルを見たり全文検索して探したりするわけです。

> ※ [この拡張](https://github.com/wudixiaop/ShaderlabVS)も簡易リファレンスとインデント関連の面倒を解決してくれるだけ。
> ※ ShaderLab を最小限にして残りは `.hlsl` を `#include` ってやり方をすればもう少し便利になるらしい？？


そして今の時代、ローカルで全文検索するよりも GitHub で検索したほうが下手すれば早い → 結果有名どころが見つかります。

- [GitHub - TwoTailsGames/Unity-Built-in-Shaders: Unity Built in Shaders](https://github.com/TwoTailsGames/Unity-Built-in-Shaders)


コチラのリポジトリ、調べものとファイル閲覧が同じウインドウで完結できて便利、なんですが、GitHub は特定のタグやブランチのみを検索することが出来ないのでちょっとだけ不便でした。



なので、別のリポジトリを作りました。


- [GitHub - sator-imaging/Unity2018-ShaderReference: Builtin Shader Reference for Unity 2018.](https://github.com/sator-imaging/Unity2018-ShaderReference)


そしてメジャーリリース間の変更点を一覧する為のリポジトリも。

- [Commits · sator-imaging/UnityShader-Changelog](https://github.com/sator-imaging/UnityShader-Changelog/commits/master)



本当はビルトインシェーダーだけじゃなく URP や HDRP についても各 Unity バージョンに対応した最大バージョンを丸っとアップしたいところなんですが、ライセンスについてはビルトインシェーダーのように再配布について明記されておらず、、、

--

URP / HDRP は公式のリポジトリがあるからそれで、となればいいんですが、前述の通り GitHub は特定フォルダやタグ、ブランチが検索できないので、Unity 2019 がサポートされているの最大バージョンの検索可能なスナップショットが欲しいわけです。

- [Change min version to 2020.2b8 · stevie57/Unity-Graphics@320da10](https://github.com/stevie57/Unity-Graphics/commit/320da10c01550f013b59b539758328bff30e0b57)

- [Unity-Graphics/com.unity.render-pipelines.universal at master · stevie57/Unity-Graphics](https://github.com/stevie57/Unity-Graphics/tree/master/com.unity.render-pipelines.universal)





URP / HDRP は UI から操作する部分についてはドキュメントが整っていて差分とか分かりやすいんですが、流石にシェーダーコードまではって感じなので、悩ましいですね。


--


GitHub で Fork → 特定バージョンまで戻して URP / HDRP 以外を削除、てやり方ですかね。やるとしたら。


以上です。お疲れ様でした。
【css】90度以外のアローを再現する

ヒーローイメージが画面いっぱいに表示されるデザインだ。
ん？　スクロールを促す下向きのアローがある。
SVGでもいいけれど、cssでどうにかしようか。
あれ？　よく見たら角度が90度じゃないぞ。
あれ！？　さらによく見たらボーダーの角が丸いぞ！？
むー、SVGかー。cssで行きたかったなー。

と、デザインを見て思うことがある。（ないかもしれない）

これがもし90度の普通のアローであればなんてことはない。

1. 正方形を作って
1. 2辺に`borede`を指定して
1. 回転させる

これだけでできる。90度のチェックマークしたければ、正方形ではなくて長方形を作ればいい。

* 角度が90度じゃない
* なんかちょっと角丸
* SVG使いたくない（なぜ？）

というときのためのcss。

## サンプル

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

* `.sample`はただのレイアウトのための要素
* アローは左と右を疑似要素の`before`と`after`で表現する
* なんとなくわかりやすいように`p`に`border`つけた

## たとえばW60*H20のアローだったら

疑似要素のサイズはどうすればいいだろうか？
ここで、W60の半分なのだから`width:30px;`では？　とやると失敗する。
（そう思う人がどれくらいいるかはわからない。自分だけかもしれない）

考え方としては、W60/2*H20の四角形の対角線、となる。
四角形（ここでは長方形）の対角線の求め方は、

> `√(a^2 + b^2)`
> 
> 3秒で計算！？長方形の対角線の求め方がわかる公式
> https://media.qikeru.me/rectangle-diagonal/

今回の場合だと、`√30*30+20*20≒36`なので、`width:36px;`となる。
`height`は線の太さにするので任意。わかりやすく少し太く。

## ポイントは

* 親要素に`position:relative;`を指定して、疑似要素は`absolute`
* 今回は下向きのアローなので、`bottom:-4px;`
* `before`と`after`は`left:50%;`で位置を微調整する
* 今回は120度の角度で作りたいので、`(180-120)/2`の値を`transform:rotate(XXdeg);`で指定する（beforeは180degから解を引く）

この計算ができれば、ほしい角度のアローができる。
スマプロハッカソン参加してみた！

# 「スマプロハッカソン」とは…

**金沢工業大学スマートフォンアプリプロジェクトが主催する学内のハッカソンイベント**

※私は運営に関わっていません※

HP：https://smapro.wixsite.com/smapro-hackathon

協賛企業：合同会社DMM.com
特別協力企業：株式会社ハックツ

# 日程

|日付|内容|
|:---:|----|
|11/18|参加申し込み|
|12/2|アイデア出し|
|12/3|**キックオフ**|
|12/7|事前開発|
|12/8|タスク振り|
|12/11|**本番1日目**|
|12/12|**本番2日目**|
|12/16|事後開発|

# 11月18日　参加申し込み

聞いたところによるとこの時点で結構集まってたらしい！（すごい！）

23号館等いろいろなところで宣伝していたのが効果大きかったみたい・・・

# 12月2日　アイデア出し

テーマが「大学生活を便利にするもの」という事なので身近な問題について考えてみた

案として
- 家計簿系のアプリ
- 献立系のアプリ
- 学内の混雑状況把握アプリ
等が出ましたが、最終的には↓になった

## 作ったもの

**＜自習室内の現在地共有アプリ＞**

- ユーザー：自習室で友達と待ち合わせをしている人

- ニーズ：自習室内の現在地を待ち合わせている友達に送りたい

- ソリューション：いまいる席が写真として共有できるサービス

### UI

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/3fefb454-9afe-76b2-0fcd-d6cfcad6d8b3.png)


### 使用技術

- 言語：java

- エディタ：AndroidStudio

- 発表資料：Topa'z

- 議事録：notion

- UI作成：figma

- 画像生成：Google スライド

# 12月3日　キックオフ

これは学内のLab02で対面で行われた

DMMさんのLTも聞けたのでとても有意義な楽しい時間だった

ちなみにもらった物↓
![PXL_20211204_011949829.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/cf52b767-7ade-76a0-a21a-969bf41935c8.jpeg)

　↑開発中お世話になりました<(_ _)>

# 12月7日　事前開発

メンバーがアプリ開発初心者という事だったので私がたたき台のようなものを作った

そこにコードを追記してもらって後で合わせる予定

（初めて共有機能を付けたけど、めちゃくちゃ難しかった…）

# 12月8日　タスク振り

やっとコードができたので画面ごとにタスクを振った

私はコードをあわせる仕事が待ってるので画像を作るお仕事にさせてもらった（メンバーさん、ありがとう<(_ _)>）

# 12月11日　本番1日目

zoomで開会式があり、そのあとの開発はdiscordを使った

ここで問題発生！**コードがエラーを吐いて動かせない!**

作った私は動かせるので早速DMMさんに相談…

昼過ぎに解決し、そこからやっと開発スタート！

1日目の進捗はまあまあって感じかな…（？）

# 12月12日　本番2日目

以外に開発が終わらない！合わせる暇がない！

ということでデモはそれぞれの動いている所を動画で見せることに…（時間配分…）

発表資料：https://topaz.dev/projects/cca0d68474666836871a

私が発表したけど、時間が足りず全部のデモを見せきれなかった（くやしい(´；ω；`)ｳｯ…）

**総じて時間配分が今後の課題…**

# 12月16日　事後開発

こんなとこで終われない！ってことで事後開発しましたｗ

結構形になったのでGithubにあげたいけどそこまで間に合わなかった…←できたらこの部分にＵＲＬ貼ります

今年度中にリリース目指す！

# 最後に…

はじめてのハッカソン、とっても楽しかったです！

と同時に勉強になる事や課題も見つかりました

総じて有意義なイベントだったと思います

また、スマプロのメンバーという事もあって準備も見ていて、とても頑張っているなと感じていました！

運営お疲れ様です！ありがとうございました！
【Git】Gitコマンド早見表

## はじめに
　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## Gitコマンド早見表
```

# Gitの設定
 git init    # 現在いるディレクトリをgitで管理するための設定ファイルを生成する。

 git branch -M main  # デフォルトブランチをmasterからmainに変更する。

 git config --global user.name "ユーザーネーム"   # ユーザーネームの設定
 
 git config --global user.e-mail "メールアドレス"   # メールアドレスの設定(草を生やすのに必要)

 git config --global color.ui true   #メッセージをカラーで表示

 git remote add origin リポジトリURL   # originという名前でリモートリポジトリのURLを登録する。

 git config --global init.defaultBranch main   # デフォルトブランチをMasterからMainに変更

 git config -l   # Gitの設定の確認 


# データのやり取り系
 git add ファイル名   # 「ファイル名」の部分にファイル名を指定することで、指定したファイルをインデックスに追加することができます。

 git add .   #　現在のディレクトリの下にあるファイルを全てadd

 git commit -m "コメント"  # メッセージをつけて変更履歴を保存する。-m なしの場合にはエディタが開く

 git push origin ブランチ名  # ローカルリポジトリの変更をリモートリポジトリにアップロードする。「ブランチ名」にアップロードしたいブランチの名前を指定します。

 git clone リポジトリURL   # リモートリポジトリをローカルリポジトリに複製する（ダウンロード）

 git fetch origin   # リモートリポジトリからローカルにあるリモートリポジトリのコピーに最新情報をダウンロードする

 git merge ブランチ名   # ローカルブランチに反映する

 git pull origin ブランチ   # fetchとmergeをまとめて実行できるコマンド


# ブランチ系
 git branch   # ブランチの一覧を表示する

 git branch --show-current # カレントブランチを表示する。detached HEADは何も出力されない。

 git branch --marged [ブランチ名] # マージ済みのブランチを表示

 git branch ブランチ名   # ブランチを作成する。「ブランチ名」の部分に、作成するブランチの名前を指定

 git branch -d ブランチ名 # ブランチがマージされていれば削除

 git branch -D ブランチ名 # ブランチがマージされていなくても削除

 git checkout ブランチ名   # ブランチ名を指定して切り替える

 git checkout -b ブランチ名   # ブランチの作成と切り替えをまとめて実行できる


# 削除・取り消し系
 git checkout -- <file>   # 作業ディレクトリ内の指定したファイルの変更を取り消し

　　git stash   # 差分のデータを.git/refs/stashに移動する。別のブランチに移動する前に使用する。データが消えたことになるわけではない。


# 状況確認系
 git log   # コミットの履歴を確認する

 git log --goneline   # ID（先頭7桁）とコミットメッセージのみ出力

 git log -p   # 変更箇所を含めて表示

 git log --stat   # どのファイルが何箇所変更されたのか表示

 git status   # ファイルの追加/変更/削除の確認。次にやることがわからなくなったら使う。

 git diff   # ステージングエリアにあげていないものの差分を表示

 git diff --cached   #ステージングしているものの差分を表示


# ヘルプ系
 git config --help   # オプション一覧が表示される。qを押すと閉じる

 git help config   # 同上


# その他
　-bush: vim: コマンドが見つかりません　と表示される場合
　 sudo yum -y install vim-enhanced
　を入力してvimをインストール

 git config --global core.editor vim   # エディタにvimを指定

 git config --global core.editor vi   # エディタにviを指定

 git config --global core.editor "code -w" #エディタにvscodeを指定

```

新しいコマンドを学習したら都度更新する予定です。
SymfonyでLogチャンネルを変更する方法

Symfonyで用いられている`Monolog`には、`channel`という概念があります。`channel`はロガーインスタンスに対する識別子で、この`channel`を使うとログの出力先や出力形式を適宜変更することができます。


デフォルトのロガーは`app`という`channel`が割り当てられています。

```php
    public function foo(LoggerInterface $logger)
    {
        $logger->info('ok');
    }
```



```log:var/log/dev.log
[2021-12-16T14:12:10.924725+00:00] app.INFO: ok [] []   # appの部分がchannel
```


例えば、次のような設定を行うと`app`チャンネルのほかに`foo`というチャンネルが作られます。
Slackへ通知を行う`slack`ハンドラーを定義しハンドラーの`channel`に`foo`を設定すると、`foo`チャンネルに流れてきたログはSlackへ流れていきます。
また、`main`ハンドラーに設定してあるチャンネルは`["!event"]`ですが、こちらは「`event`チャンネル以外」を意味するので、`foo`チャンネルの内容もデフォルトのファイル出力の対象となります。

```yaml:config/dev/monolog.yaml
monolog:
    channels: ['foo']
    handlers:
        main:
            type: stream
            path: "%kernel.logs_dir%/%kernel.environment%.log"
            level: debug
            channels: ["!event"]
        slack:
            type: slack
            token: xxxxxxxx
            channel: xxxxxxxx
            channels: ["foo"]
```


図で表すと以下のような感じです。

![log.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614264/4bf7b033-a301-d78c-5542-e99a502c0a2d.png)


特定のチャンネルに設定されたロガーを取得するには、`LoggerInterface`をDIするときに引数の名前を`$<チャンネル名>lLogger`にします。`foo`チャンネルのロガーを取得する場合はこのようになります。

```php
    public function foo(LoggerInterface $fooLogger)
    {
        $fooLogger->info('ok');
    }
```

なんともPHPらしくて趣がありますね（）。