OmniAICreator/Qiita-1.07M huggingface dataset:
Colabのnotebookを記事にする

データサイエンスの勉強をしているmatsunori39です。

# 動機

私は普段、知りえた情報や知見をDiscordの仲間に共有しているのですが
知見に関しては、就活も兼ねてQiitaに記事を書いてみようかと思い投稿しています。

データサイエンスということでGoogle Colabを使っており
notebookを書くのに苦手意識はなく、Colabならそのまま共有することができますが
Qiita等のブログに載せるにはどうしたらいいのか分かりませんでした。

もしかして
1.　Colabのリンクを踏んで飛んでもらう
2.　Codeブロック(In, Out), Textブロックを一つずつコピーする
といったことをしなくてはならないのか...

と考えていましたが、
「ipynb形式から今書いているmd形式にすればそのまま貼り付けられるんじゃね？」

と考え、さっそくやってみました。

# Colabでの操作
`ファイル`>`ダウンロード`>`.ipynbをダウンロード` からnotebookをローカルにダウンロード

# .ipynb to .md
以下を参考にさせてもらいました。

https://cartman0.hatenablog.com/entry/2016/03/29/131903


Jupyter Notebookを使います。(インストールしてない人は[Anaconda](https://www.anaconda.com/)からダウンロードしてね)
Jupyter Notebookを起動して先ほどダウンロードしたnotebookを開いて
`File`>`Download as`>`Markdown (.md)` を選択して.mdに変換
後は.mdを開いて内容をコピーしてQiita等のmd対応のブログサイトにUPすれば、
notebookの内容を記事として投稿できます。

# (以下、投稿内容)
(サンプル内容が貧弱でごめんなさい。)

# 見出し1


```python
# this is code.
print('Hello Qiita!')
```

    Hello Qiita!
    

## 見出し2


```python
for i in range(5):
  print(i)
```

    0
    1
    2
    3
    4
    

0. 起
0. 承
0. 転
0. 結

# 見出し1-2


```python
my_list = [j for j in range(10)]
my_list
```




    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]





# (本題に戻る)
# 感想
CodeブロックのInputとOutputの区別がつかないのが少し残念ですが、
これでColabで作ったnotebookの内容を記事として投稿できますね。
javascriptでクリックやタップの長押し処理をする方法

# はじめに
散々出尽くされていると思いますが備忘録として残しておきます。極力シンプルな方法かつPCとスマホ両対応のつもりです。

# 実装例
クリック押しっぱなしで数値が加算され続けます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKXrLjd" data-user="rahhi555" 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/rahhi555/pen/KKXrLjd">
  Untitled</a> by rahhi555 (<a href="https://codepen.io/rahhi555">@rahhi555</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# コード解説
## html
~~~html
<p id="target">0</p>

<!--
touch-action: none; スマホでタップしたままスワイプするとpointerupイベントが発生しない現象の防止
user-select: none;　及び oncontextmenu="return false;" 長押し時のポップアップ停止
-->

<button
        id="btn" 
        style="touch-action: none; user-select: none;"
        oncontextmenu="return false;">
  クリック
</button>
~~~

## javascript
~~~javascript
/**
* 押下時にインクリメントし続ける処理を登録し、解放時に登録した処理を削除する 
*/
document.getElementById('btn').addEventListener('pointerdown', () => {
  const intervalId = setInterval(increment, 50)

  // document要素にイベント登録することで、クリックした後ボタンから動かしてもOK
  // once: true を指定して一度発火したらイベントを削除する
  document.addEventListener('pointerup', () => {        
    clearInterval(intervalId)
  }, { once: true })
})


const increment = () => {
// インクリメント処理は記事の趣旨と関係ないので省略
~~~

# あとがき
スマホの動作はchrome dev toolsで確認しただけなので、実機だと不具合があるかもしれません。
SansanにSimpleSAMLphpでSSO

SansanのSAML認証を、[SimpleSAMLphp](https://simplesamlphp.org/)のIdPと連携させようと試行錯誤したので、その時の設定です。
Sansan側の設定や、各ユーザの「SAML Name ID」は済んでいるものとします。

```metadata/saml20-sp-remote.php
$metadata['https://ap.sansan.com/saml2/XXXXXXXXXXXXXXXX'] = array(
   'AssertionConsumerService' => array(
      'https://ap.sansan.com/v/saml2/YYYYY/acs',
      'https://internal.api.sansan.com/saml2/YYYYY/acs'),
   'attributes' => array('sn', 'givenName', 'cn', 'mail', 'sAMAccountName'),
   'signature.algorithm' => 'http://www.w3.org/2001/04/xmldsig-more#rsa-sha256',
   'simplesaml.nameidattribute' => 'sAMAccountName',
   'NameIDFormat'  => 'urn:oasis:names:tc:SAML:2.0:nameid-format:persistent',
);
```

`XXXXXXXXXXXXXXXX`の部分は、Sansanの「新規IdP設定追加」のページで取得できますが、このページを表示するたびに変わるので注意が必要です。
`YYYYY`の部分は社名が入ります。同じく「新規IdP設定追加」のページで「PC用」、「スマートフォンアプリ用」として表示されますが、特に区別なくこの順で記載すれば良いようです。
`'attributes' => array('sn', 'givenName', 'cn', 'mail', 'sAMAccountName')`はおそらくこれだけあれば大丈夫だろうと入れたので、もっと削れると思います。
`'signature.algorithm' => 'http://www.w3.org/2001/04/xmldsig-more#rsa-sha256'`は現状だとデフォルトなので多分不要。
`'simplesaml.nameidattribute' => 'sAMAccountName'`としているので、各ユーザの「SAML Name ID」にも`sAMAccountName`に相当する文字列を入れておきます。
`'simplesaml.nameidattribute' => 'mail'`として、メールアドレスを入れておくことも可能です。
GitHubのデフォルトのブランチ名変更方法

# デフォルトのブランチ名を何故変更しようとしたのか
2021年からGitHubのデフォルトブランチが"master"から"main"に変更されたはずでしたが、何故か私のアカウントでは新規のリポジトリのデフォルトブランチが未だに"master"のままだったので自力で変更しました。

# デフォルトブランチ名変更の経緯
https://sfconservancy.org/news/2020/jun/23/gitbranchname/

# デフォルトブランチ設定箇所
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/f302a7c9-9d0b-7423-e8c7-277bf2dbba0e.png)
ConstraintLayoutでつまずきやすいViewが重複した時の解決策

#はじめに
ConstraintLayoutでつまずく中でも頻出するのがViewの重複問題、押出し問題かと思います。
そこで、今回自分が役立った二つの要素を紹介したいと思います

###layout_constrainedWidth

```xml:
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!Hello World!HelloHello World!Hello World!HelloHello World!Hello World!Hello"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toSraerOf="@+id/view"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/text_view"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```


こちらは、wrap_contentを設定した際に隣り合ってるViewを押し出してしまう状態のものに設定することで隣り合ってるViewの制約を破らない様に設定することができます。
そうすることで、重なってしまったり、押し出したりしてしまうことがなくなります。

###layout_constraintHorizontal_bias
```xml:
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```
次にこちらです。
こちらはbiasを0から1の間で少数で指定することにより制約を設けてる間での位置を決めることができます。
0に近ければ左により1に近ければみぎによっていきます。

###最後に
上の2つは組み合わせることが多く、併用することにより綺麗なUIを作成することができるかと思います。
【個人開発】全くのRails初心者が一人でwebサービスを作ってみた

初投稿です。昨日で、一通り制作が完了したので、11月～1月前半までの二か月半を時期ごとに振り返ってみようと思います。

#開発環境
ruby on rails(6.1.4.4)
heroku
S3
cloudflare
#開発開始(11月前半)
掲示板的なそれぞれの人がそれぞれの目的でゆるーく使えるwebサービスを作ろうと思い、開発を開始しました。
開発言語はRailsが一番情報が多そうだと思い、Railsに決定。
どこから制作を初めていいかもわからない状況だったので、「rails webサービス 作り方」でググっていたところこのような記事を発見。

https://zenn.dev/odentravel/books/e69a157daeecb3/viewer/5611c3

こちらの記事には大変お世話になりました。。。こちらを参考にしながら一通り作ってみようと思いました。

#bootstrapとHTMLとCSSに触れる(11月後半)
先程の記事を参考にしながら、順調に開発は進んでいました。
ですが、bootstrapの導入が上手くいかず、ここで1週間ほど苦戦。。。。
それもそのはず、自分はrails6を使っていたのでgemでの導入ではなく、yarnからのインストールが必要でした。その時参考にさせていただいたのが、以下の記事です。

https://medium-company.com/rails-bootstrap/

これを参考にして、無事bootstrapが導入できました。
今までPythonしかプログラミング言語に触れてこなかったので、railsどころかHTMLやCSSに関しても全くの無知でした。
この開発を通して、少しは理解できたと思います。。。

#開発中盤①(12月前半)
参考にさせていただいた記事を一通り読み終わり、ある程度bootstrapもいじれるようになったので、レイアウトを整えていき、それっぽい見た目になってきました。
ですが、ここで問題が発生。投稿画面にRails6から導入されたAction_Textの導入が上手くいかない。
これで5日間ほど苦戦。。。12月中にはリリースしてみたかったのに。。。。
結局、Railsのファイルを最初から作り直して解決しました。

https://railsguides.jp/action_text_overview.html


#開発中盤②(12月後半)
結構形になってきました。googleログイン認証とか、当初は予定していなかった機能も結局付けることになりました。
タグ機能もあったら便利だろうな～と思い、以下の記事を参考にしながらタグ機能を付けることができました。

https://qiita.com/ki_87/items/a344ea566c88b10b950c

こうして、必要な機能がだんだんと揃ってきたので、正月休みが終わったら公開してみようと決めました。

#開発後半(1月前半)
正月休みが終わり、まずは、サーバー選び。今回はherokuとs3を用いて実装を行うことにしました。
理由は、何としてでも無料で運用したかったからです。そして、herokuでは独自ドメインも使えるらしいので、お名前ドットコムにて取得。
クレジットカードも持っていなかったので、即日発行のカードを後先何も考えずに発行してしまいました。。。

準備は完了したので、いざ実装。。。って言っても何をどうすれば良いか分からない。。。
なので、「rails heroku」でググり散らかしていると以下の記事を発見。

https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39

さらに独自ドメインをfreeplanで適用するために以下の記事を参考にさせていただきました。

https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d

無事に独自ドメインでの公開が完了いたしました。
本当に色々な方の記事を参考にさせていただきました。本当に感謝しています。

#完成！！

https://lisdom.jp/

無事に完成させることができました。これから実装しなくてはならない機能がありますが、キリがないのでこれから修正していきます。もしよろしければ覗いてみてください。。。
日記やブログ、質問や、雑談など、それぞれの人がそれぞれの使い方をゆる～く出来るサービスです。

#終わりに
一人での開発で、初めての言語でしたので公開すらできないかもという不安もありました。
この記事がこれからRailsに触るという方やプログラミング初心者の方のお役に立てればそれほど嬉しいことは無いです。
以上、長文、駄文失礼致しました。

以下参考にした記事です。本当に感謝しています。ありがとうございました。

https://zenn.dev/odentravel/books/e69a157daeecb3/viewer/5611c3

https://medium-company.com/rails-bootstrap/

https://railsguides.jp/action_text_overview.html

https://qiita.com/ki_87/items/a344ea566c88b10b950c

https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39

https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d
【Git】マージ

# 【Git】マージ

# 【基本のマージ ～ プルリクエスト】
**環境** :  visual studio 2019 professional

````
① 「ローカルブランチのfeature（ワーキングツリー）」を「git commit」する。
    「git push」は、まだしない事。

② 「origin/master」ブランチを、「git fetch + git merge」or 「git pull」する。
    (最新化する）

③ 「origin/master」ブランチ（元）を、「ローカルブランチのfeature」へマージする。

④  「競合を解決する」
   「ファイル比較」：差分を確認する。
   「左右どちらか」 or 「左右両方」を、選択する。
   「マージボタン押下」
    ※上手くいかない時は、「WinMerge」など使うこと。

⑤  VS再起動

⑥ 「ビルドされること（動作確認）」を確認したら、「git push」する。

⑦ 【プルリクエスト】
  「プルリクエスト先」のブランチを確認すること。
````
- (※) VSでは、「プロジェクトのファイル」(.csproj)
   (プロジェクトの直下あたりに配置されている。)
   は、手動でマージします。
- 「プロジェクトのファイル」(.csproj)で、エラーがあっても、
   「ビルドエラー」は出ません。。

# 【ローカルブランチに、リモートブランチを取り込む】
````
① 「ローカルブランチのfeature（ワーキングツリー）」を、「git stash」 or 「git commit」 or 「git push」する。

② 「origin/master」ブランチを、「git fetch + git merge」or 「git pull」する。
    (最新化する）

③ 「origin/master」ブランチ（元）を、「ローカルブランチのfeature」へマージする。

④  スタッシュがあれば、「ローカルブランチのfeature」へ、スタッシュを戻す。
   (※ 「現在のブランチ」を、必ず確認すること！！)
````
[Ruby]downcaseとsliceメソッドの併用

学習したことのアウトプットとして

メソッドの引数に、任意の2つの文字列を指定し、引数に指定された2つの文字列のうち、どちらかがもう一方の文字列の末尾にある場合はTrueを、満たせていない場合はFalseを出力するend_otherメソッドを実装する。
この時、入力された文字が大文字でも小文字でも、同一の文字として処理を行う。
　
例えば、"abc"と"HiAbc"の文字列を引数とした場合、"HiAbc"の末尾に"abc"という文字が存在しているのでTrueと出力される。

## 使用するメソッド
### downcase
大文字を小文字に変換するメソッド

```zsh
# 大文字を含んだ文字列を定義
irb(main):001:0> name = "Hiabc"
=> "Hiabc"

# downcaseメソッドを使用し、小文字に変換
irb(main):002:0> name.downcase
=> “hiabc”
```

### slice
文字列から指定した要素を取り出すことができるメソッド
`負の数を指定すると末尾からカウントしてくれる`
こちらでもう少し詳しく記事にしてます→[Stringクラスのsliceメソッド](https://qiita.com/Shi-raCanth/items/44c8426128d8e652e879)

```ruby
array = "Hiabc"

#配列番号（インデックス番号）の-3から-1の範囲の文字列を切り取る
array.slice(-3..-1)
#=> abc
```

## 模範解答

```ruby
def end_other(a, b)
  a_down = a.downcase
  b_down = b.downcase
  a_len = a_down.length
  b_len = b_down.length
  if b_down.slice(-(a_len)..- 1) == a_down || a_down.slice(-(b_len)..- 1) == b_down
    puts "True"
  else
    puts "False"
  end
end
```

## 解説
２〜５行目

```ruby
  a_down = a.downcase #aの文字列を小文字に変換して代入
  b_down = b.downcase #bの文字列を小文字に変換して代入
  a_len = a_down.length #aの文字数を代入
  b_len = b_down.length #bの文字数を代入
```

6行目

```ruby
b_down.slice(-(a_len)..- 1) == a_down || a_down.slice(-(b_len)..- 1) == b_down
```

左辺の条件は「bの文字列の末尾〜（aの文字数）分の文字がaの文字列と等しい」かどうか、右辺はその逆。
この二つを「||（または）」の論理演算子を用いて条件付けしている。
あとは条件分岐で出力するものを分ける、といった感じ。
　
問題はともかく、使用したメソッドがどんなものなのかは覚えておきたいところ
　
　
※補足等ございましたらコメントいただけると幸いです。
メモ：Pytonのテストフレームワークpytestの基本

Pythonは軽く触ってはいたが、本番プロダクトでの利用は殆どなかったのでテストフレームワークを使っていなかった。
pytestというテストフレームワークがPythonには存在しているので見ておく。

基本的にはdefで定義されるメソッドに対して、引数を与えて正しい結果が返ってくるか、
を実行して確認するための単体テストツール。

# 準備

`pip install pytest`
でインストール可能

mainフォルダとtestsフォルダにわけてソースコードを管理して、
testsフォルダ内のtest_xxx.pyのtest_xxxメソッドを順次実行していくので、各フォルダに配置する。

なお、アドオンだと

* pytest-covでcoverage（テスト網羅率）を取れる。
* toxを使うと仮想のテスト環境を設定出来るので、バージョン依存を知りたい時等には使える。
* pytest-mockでモック

# テスト記述方法

基本的にはtest_メソッドを用意すればいいのだが、

インスタンスをテストメソッド内で作成してテストしても良い。

```
def test_action(self,x):
    o = cls()
    assert o.action(2) == 1
```

エラーがraiseされるのが正しい処理の場合は`pytest.raises`を利用する。

```
def test_action(self): 
    with pytest.raises(ValueError):
        o = cls()
        o.action('2')
```

何かをテスト前に実行したい場合はfixtureを利用。[ここ](https://qiita.com/_akiyama_/items/9ead227227d669b0564e)とか参照

```
@pytest.fixture
def init_xxx(self):
	xxx
```

# 実行

`pytest`
コマンドで流せばテストが実行されて
` 8 passed in 0.06s`
のように表示される。

`ImportError: cannot import name ...`
のようにエラーが出る場合は__init__.py（空ファイル）をmainやtestsに配置すればOK


# その他

時間がかかる処理を特定するには
`--durations=10`
のようにオプション指定すると上位10個の遅い処理が出てくる。

あと、[少し前](https://logmi.jp/tech/articles/322612)の情報だと、VSCodeの設定は
`linting.flake8.enabled、mypy.enabled,enabled false`
が良いらしい。

なお、AWSのCodeBuildで自動テストを実行する場合は以下を参考にする
https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/test-report-pytest.html
https://dev.classmethod.jp/articles/codebuild-test-reporting-ga/
Mac（PC）にてバックスラッシュ（\）を入力する方法

#はじめに
こちらの投稿は、Apple社のデスクトップPC、iMacに付属されているキーボード「Magic Keyboard（JIS）」をお使いの方に向けてです。
***
#環境
・macOS バージョン11.6にて動作確認をしています。
***
#バックスラッシュの入力に仕方
macOSを付属のキーボード（JISキーボード）お使いの場合、バックスラッシュの入力の仕方は、
・キーボードの左下にある、「option」＋右上にある「￥」

#どういうときに使うか
・主にプログラミングを描くときに使います。
・PHPのエスケープシーケンスをするときに使います。
・一つのタグの中に、シングルクォーテーション('')やダブルクォーテーション("")を複数個使うことは出来ないため、
```<?php echo 'I'm Taro'; ?>```
などと入力しようとするとエラーが出てしまうので、それを回避するために
```<?php echo 'I\'m Taro'; ?>```と入力することでエラーを回避することができます。
【Gitコマンド】Git初心者のためのTips

# 【Gitコマンド】

## 【現在のブランチ】は、「どこ？」
````
「ブランチ情報」を確認する。
$ git status

「ブランチと追跡情報」を確認する。
$ git status -sb

「ブランチのコミット履歴」を確認する。
$ git log
````

## 【スタッシュ】
````
「スタッシュのリスト」を確認する。
$ git stash list

「スタッシュ」を実行する。
$ git stash save " {コメント} " -u
 // -u は  --include-untracked の略。
 //「コミットしていない変更」の(「addしたファイル」・「addしていないファイル」の両方)「変更した部分」が退避されます。
 //「ワーキングディレクトリ上」は差分がない状態。

「スタッシュを元に戻す」: 直近のスタッシュ（一番上)が戻る。
$ git stash apply

「スタッシュを元に戻す」: 指定バージョンが」戻る。 
$ git stash apply stash@{0}

「スタッシュを削除する」
$ git stash drop stash@{0}

「退避した変更の詳細」を確認する。
$ git stash show stash@{0} -p

ある時点のスタッシュとの差分
$ git diff stash@{0}
````

## 【マージした後、衝突したとき】
````
「mergeを取り消す」
$ git merge --abort

「マージした後、まだコミットしていない場合」
$ git reset --hard HEAD^
 //HEAD^ : ^の数がn個前になる。1個のとき「HEAD@{1}」ということ。

「マージした後、コミットもした場合」
$ git reset --hard ORIG_HEAD
````
**「Pullに失敗した時」**は、この記事が参考になります。
[【初心者向け】git fetch、git merge、git pullの違いについて](https://qiita.com/wann/items/688bc17460a457104d7d)


## 【Gitの基本♪】
````
【 準備 】
① 「Git for Windows」をインストールする。
② フォルダを作成する。
  コマンドプロンプトで、このフォルダに移動する。
③ 最初の設定
$ git init
④ 「Git リモートリポジトリ」をクローンする。
$ git clone "Git リモートリポジトリのアドレス"

その他
↓

「ブランチを切り替える」: 「stash or commit or push」のどれかを実行してから
$ git checkout

「リモートから最新情報をローカルに持ってくる」
$ git fetch

ローカルの「origin/master」ブランチ ⇒ ローカルの「master」ブランチ
$ git merge

自動的に「リモートリポジトリの内容のマージ」をする。
「git fetch + git merge 」をしている。
$ git pull

# 特定ファイルを特定のコミットの状態にする
$ git checkout <commit> -- <filename>
$ git restore --source <commit> <filename>

差分を確認
$ git diff

「すべての新規ファイル」をインデックスに追加する。
$ git add .

「新規ファイル」をインデックスに追加する。
$ git add [ファイル名]


コミット内容を、修正する。
$ git commit ammend

複数コミットを、「１個のコミット」にまとめる。
$ git squash

【基本_他の方のコードを、Pullする】
①自分のコードを「スタッシュ or コミット」する。
②最新ブランチを「フェッチ」「Pull」する。
③スタッシュしていたら、「git stash apply」で戻す。
（最新ブランチへ、自分のコードをマージしている。）
````
**「git fetch、git merge、git pull」**も、下記の記事がわかりやすいです。
[【初心者向け】git fetch、git merge、git pullの違いについて](https://qiita.com/wann/items/688bc17460a457104d7d)

# 【おまけ～】
## 【Git：ローカル ～ リモートへ】

````
ワーキングツリー ⇒ インデックス ⇒ ローカルリポジトリ ⇒ リモートリポジトリ の順

ワーキングツリー   : 最新の状態(addされていないものも含まれる）
インデックス     　: コミットするためのファイル状態(addした）
ローカルリポジトリ : ファイルの変更履歴を記録(ここまでローカル環境)
リモートリポジトリ : ファイルの変更履歴を記録(リモート環境にて共有できる)
  
変更履歴を反映する。
$ git add    :  ワーキングツリー   ⇒  インデックス
$ git commit :  インデックス       ⇒  ローカルリポジトリ
$ git push   :  ローカルリポジトリ ⇒  リモートリポジトリ
````

## 【オプション】
````
-s
--short
ショートフォーマットで出力します。

-b
--branch
ショートフォーマットでもブランチと追跡情報を表示します。
````

# 【おまけ 2 ～】
- HEAD　：　
  最新のコミットの状態を表している。


# 参考記事
[【初心者向け】git fetch、git merge、git pullの違いについて](https://qiita.com/wann/items/688bc17460a457104d7d)
Brainf*ckの基本構文

#Brainf*ckとは

```brainfuck:brainfuck
.,
```

Brainfuckの基本構文
C言語の基本構文と照らし合わせて考える

#printf文
printf文はある特定の値を出力するプログラムだ。
まずは"A"を出力するプログラムを考えてみる。
ところで、brainf*ckではもともとの仮想セルに値は入っていないため値を入力する必要がある。
"A"のASCIIコードは65のためセルにまず65を入力するが数値は1ずつしか増やせないため65回インクリメントする。

```Brainf*ck:Brainf*ck
++++++++++ ++++++++++ ++++++++++ ++++++++++ ++++++++++ ++++++++++ +++++
```

その後出力する。
指定しているセルは変わっていない（＜や＞が入力されていない）ため、そのまま出力する。

```Brainf*ck:Brainf*ck
.
```

これで文字Aを出力するプログラムができた。

#scanf文
scanf文は入力された値を読み取るプログラムである。
操作は","のみでできる。
何文字でも","コンマ一文字で可能となる。

#echo入力された値をそのまま出力するプログラムは次のようになる。

```Brainf*ck:Brainf*ck
,.
```

これは"echo"や"echoコマンド"と呼ばれている。

#for文
for文ではカウンタセルと処理セルという二つの仮想セルを利用してループ処理を行う。
文字を繰り返し出力するには"."を繰り返し出力するだけなので今回はASCII文字を先頭から合計10文字出力するプログラムを考える
まずはカウンタセルに繰り返し回数を入力し、隣のセルへ移動する。

```Brainf*ck:Brainf*ck
+++++ +++++>
```

次に値を一つ増やす、出力、値を一つ増やす、カウンタセルへ移動、カウントを一つ減らすという処理を行う

```Brainf*ck:Brainf*ck
+.+<-
```

最後にfor文のいわゆる括弧{}にあたるかっこ[]で処理内容をまとめる。

```Brainf*ck:Brainf*ck
+++++ +++++[>+.+<-]
```

これでASCIIコードの1から10文字分を取り出すことができた。

#最後に
今回はprintf文、scanf文、for文しかできなかったがほかにもif文なども実装してみたいと思った。
[UE4]エディタのビューポートにおけるカメラの画角情報を取得する方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363889/331eaecb-de1d-65cc-55ca-82119dccca1d.png)

エディタのビューポートにおける現在の画角情報（Field of View(H)）は

```cpp
GCurrentLevelEditingViewportClient->FOVAngle;
```

を使うことで取得することができます。なので、

```cpp:MyBlueprintFunctionLibrary.h
#pragma once

#include "CoreMinimal.h"
#include "Kismet/BlueprintFunctionLibrary.h"
#include "MyBlueprintFunctionLibrary.generated.h"

UCLASS()
class MYPROJECT_API UMyBlueprintFunctionLibrary : public UBlueprintFunctionLibrary
{
	GENERATED_BODY()
	
	UFUNCTION(BlueprintCallable)
	static float GetLevelViewFov();
};
```

```cpp:MyBlueprintFunctionLibrary.cpp
#include "MyBlueprintFunctionLibrary.h"
#include "LevelEditorViewport.h"

float UMyBlueprintFunctionLibrary::GetLevelViewFov()
{
	return GCurrentLevelEditingViewportClient->FOVAngle;
}
```

```cpp:MyProject.Build.cs
using UnrealBuildTool;

public class MyProject: ModuleRules
{
	public MyProject(ReadOnlyTargetRules Target) : base(Target)
	{
		PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;

		// UnrealEdを追加
		PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "HeadMountedDisplay", "UnrealEd" });
	}
}
```

という感じでプロジェクトのC++コードを書いて、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363889/01929da8-df29-2d39-cc10-6b8fc24f782b.png)
ノードを配置すると、
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363889/7a0fa5e4-3a33-a068-de00-92d28a17f25e.gif)
現在の画角情報を取得できます。EditorUtilityWidgetで実装すると、レベルを実行しなくても取得できるので便利です。

今回使用したGCurrentLevelEditingViewportClientは他にもプロパティが沢山あったり、UEditorLevelLibraryにもカメラ情報取得用の関数が色々用意されているのでご興味のある方はぜひ一度見てみてください！
[【UE4】【C++】メモ：EditorのViewportの設定をBlueprintに公開してみる【★★★★】](https://kinnaji.com/2021/03/21/editorviewportutility/)

最後に、今回のコードはエディタ専用機能なので、実際に組み込む際はエディタモジュールで実装することをおすすめします。
おしまい
npm installが失敗する時に見てみるメモ

npm install でエラーが出たが、意外と対処法が出てこなかったのでメモ

# エラーの内容

~~~
> npm install -g @vue/cli
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.0
npm notice Run npm install -g npm@8.3.0 to update!
npm notice
npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! invalid json response body at http://localhost:44117/0bndqa11b4crxxqne19ku5lnbqctvck1/blockpage?id=ieaz9jyqk510tlnunv3pngmuudxk57l3 reason: Unexpected token < in JSON at position 0

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Local\npm-cache\_logs\2022-01-13T02_57_23_072Z-debug.log
~~~

# npm の確認

~~~
> npm doctor
npm WARN verifyCachedFiles Content garbage-collected: 19 (710276 bytes)
npm WARN verifyCachedFiles Cache issues have been fixed
Check                    Value   Recommendation/Notes
npm ping                 ok
npm -v                   not ok  Use npm v8.3.0
node -v                  not ok  Use node v16.13.2 (current: v16.13.1)
npm config get registry  not ok  Try `npm config set registry=https://registry.npmjs.org/`
which git                ok      C:\Program Files\Git\cmd\git.EXE
Verify cache contents    ok      verified 802 tarballs

npm ERR! Some problems found. See above for recommendations.
~~~
3か所エラーが発生していることを確認

# 対応
## npm-v
~~~
> npm -v
8.1.2
~~~
npm のバージョンがv8.3.0じゃないといけないみたいなのでアップデートする

~~~
> npm install -g npm

added 2 packages, and audited 39 packages in 28s

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
> npm -v
8.3.0
~~~

## node -v
node.jsのバージョン確認

~~~
> node -v
v16.13.1
~~~

v16.13.2　を使わないといけないみたいなので、アップデートする
https://nodejs.org/ja/download/

~~~
> node -v
v16.13.2
~~~

## npm config get registry
以下のコマンドを実行する

~~~
> npm config set registry=https://registry.npmjs.org/
~~~

# 確認
~~~
> npm doctor
Check                    Value  Recommendation/Notes
npm ping                 ok
npm -v                   ok     current: v8.3.0, latest: v8.3.0
node -v                  ok     current: v16.13.2, recommended: v16.13.2
npm config get registry  ok     using default registry (https://registry.npmjs.org/)
which git                ok     C:\Program Files\Git\cmd\git.EXE
Verify cache contents    ok     verified 807 tarballs
~~~
全部OKになりました

# 再実行の結果

ここまでの対応を実施し、npm install が正常に終了することを確認しました。
全ての原因をこれで解決出来るかは分かりませんが、私の場合はこれで解決できました。
terraformのfor_eachで連想配列を使う場合


## やり方
- lookupと組み合わせる

## 例

```locals.tf
  project = {
    calamity = {
      majour_number        = 1
      maintenance_mode = false
    }
    forbidden = {
      majour_number        = 1
      maintenance_mode = false
    }
  }
```


```main.tf
module "backend" {
  for_each         = local.project
  source           = "./services/app"
  majour_number    = lookup(each.value, "majour_number")
}
```
gitのcommit数を簡単に集計する方法

## はじめに

メンバーの評価まわりをする背景から、ふとgitのcommitを人単位で集計したくなったことがありました。

* 誰がどれくらいcommitしているのか
* 対象期間(評価期間)に1番commitしてるのは誰なのか
* このリポジトリに関して1番詳しいのは誰なのか

集計することでこのあたりが知れるようになります。

## コマンド

```
git shortlog -nse
```

gitに既に用意されていました。
オプション指定なしだとアルファベット順に表示されます。
-n: コミット数多い順
-s: コミット数のみ表示
-e: メアドも表示

期間指定は以下の通りです。

```
# 直近半年の間でコミットの多い人を調べる
git shortlog -nse --since="6 month ago"

# 2021年でコミット数が多い人を調べる
git shortlog -nse --since="2021-01-01" --until="2021-12-31"
```

```:実行結果例
コミット数 人
5000  hoge
4000  foo
3000  bar
```

### マッピング

人によっては異なるメールアドレスでのコミットがありました。
これらを同一人物として扱って集計するために.mailmapを作成しました。
必要に応じて使ってください。
こちらを参考にしました。
https://git-scm.com/docs/gitmailmap
分かりにくかった点としては2つしか横並びで書けないようで3つ以上並べても適用されませんでした。
3つ以上の場合は縦に並べて書くと反映されました。

```:.mailmap
Joe R. Developer <joe@example.com>
Joe R. Developer <joe@example.com> Joe <bugs@example.com>
Jane Doe <jane@example.com> <jane@laptop.(none)>
Jane Doe <jane@example.com> <jane@desktop.(none)>
Jane Doe <jane@example.com> Jane <bugs@example.com>
```

## 別の方法

ちなみに後から知ったんですが、githubを使っている場合はリポジトリの「Insights」タブの「Contributors」から同じような情報を得ることができます。
こちらだとコマンド実行も不要でアクセスするとすぐ見れるのでおすすめです。（こっちの方が楽）
最上部のグラフをドラッグすると範囲指定も可能です。

![スクリーンショット 2022-01-13 12.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67471/e1555491-af98-4356-65d3-b8579671675b.png)



## まとめ

「誰がどれだけ詳しいか？」
「困った時に誰に聞けば良いか？」
みたいな指標にも使えるかと思います。
色んなプロダクトで色んな範囲指定で集計して遊んでみてください！
2万クラスの物体検出を使うと、かゆいところに手が届き過ぎる

#超高精度の物体検出とセグメンテーション機械学習モデルを使う方法です
PythonでDeticという機械学習モデルを使って、細かく検出します。
<img src=https://user-images.githubusercontent.com/23278992/149261510-ac5f9d2e-05d6-413f-b06c-f0f67920f983.png>

#従来の物体検出では検出できない、密集したものを一つ一つ検出して仕分けしたい

#FaceBookReseachの最新モデルがすごい

2022年に発表されたDeticというモデルは2万分類ができ、高精度。
<img src=https://user-images.githubusercontent.com/23278992/149261545-7d76ed86-72a1-4d3a-8c6b-6df19471f2c7.png>

#使用方法

公式のColabで推論ができる。

https://colab.research.google.com/drive/1QtTW9-ukX2HKZGvt0QvVGqjuqEykoZKI#scrollTo=PIpJ9klCZt_y

基本的には、リポジトリをクローンして、必要なモジュールをインストールして、構成ファイルと重みからPredictorを初期化して、画像を入力するだけである。

```python
predictor = DefaultPredictor(cfg)
outputs = predictor(im)
```
![ダウンロード (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/c29b7330-0cce-1890-1b72-5b4157081f7d.png)

#アプリケーションも進化する

これだけのモデルが無料で使えるのだから、アプリケーションもどんどん進化しそうである。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
pythonの実行モード

pythonの実行モードには以下の二つがある

インタラクティブ・モード
スクリプト・モード

＜定義＞
インタラクティブ・モードとは、コマンド・プロンプト上で直接プログラム・コードを入力しながら、プログラムを1行1行の対話形式で実行する方法だ。一方のスクリプト・モードとは、一連のプログラム・コードを書き込んだスクリプト・ファイル（.pyファイル）を作成しておき、そのスクリプト・ファイルを一気に実行する方法である。

＜自分なりの定義＞
インタラクティブ・モード：双方向
スクリプト・モード　　　：一方向
Watson Speech to Textのリアルタイム文字起こしをJavascriptで使う

WatsonのSpeech to Text([デモ](https://speech-to-text-demo.ng.bluemix.net/))はWebsocketをサポートとしていてブラウザから直接使えるみたいなのでちょっと試してみる。


# APIの開通
[IBM Cloudにアクセス](https://cloud.ibm.com)して上の検索からSpeech to Textのページへ移動します。
![Screen Shot 2022-01-13 at 10.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4471/b4b2605e-0e01-d79a-ed93-1748ba8b1c76.png)

初めてのアクセスの場合、右下の「Create」を押してインスタンスを作成します。
![Screen Shot 2022-01-13 at 10.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4471/0801d071-440e-c523-1d90-49fc8ed5d05f.png)


サイドバーからService credentialsを選択して「New credential」をクリックして作成します。
![Screen Shot 2022-01-13 at 10.03.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4471/bdb54726-1a9d-346f-2a2a-6a535cc8c788.png)
![Screen Shot 2022-01-13 at 10.03.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4471/44181c1a-b766-ba38-35a1-bd3ecc516ed7.png)

新しいcredentialのコピーを押してそれを適当なエディタにコピーします。

```
{
  "apikey": "XXXXYYYYZZZZ",
  "iam_apikey_description": "Auto-generated for key crn:v1:bluemix:public:speech-to-text:jp-tok:a/8XX7-470XXXXXcea:resource-key:b9052XXX27",
  "iam_apikey_name": "Service credentials-1",
  "iam_role_crn": "crn:v1:bluemix:public:iam::::serviceRole:Manager",
  "iam_serviceid_crn": "crn:v1:bluemix:public:iam-identity::a/0fcXXf81f3XX",
  "url": "https://api.jp-tok.speech-to-text.watson.cloud.ibm.com/instances/XXXXXXX-72be-4b4a-8bc7-47XXXXXXea"
}
```

# アクセストークンを取得する

nodeを使ったアクセストークンと接続するURLを取得するAPIを作ります。認証やCORSの部分は各自で実装をお願いします。

`apikey`の部分を上記のcredentialの`apikey`の部分に置き換え、`url`の部分はcredentialの`url`の`https://`から`wss://`に置き換えて指定します。

```server.js
const watson = require('watson-developer-cloud');
const { IamTokenManager } = require('ibm-watson/auth');

const app = express();

const sttAuthenticator = new IamTokenManager({
  "apikey": "XXXXYYYYZZZZ"
});

app.get("/watson/speech-to-text/token", function(req, res) {
  return sttAuthenticator
    .requestToken()
    .then(({ result }) => {
      res.send({
        accessToken: result.access_token,
        url: "wss://api.jp-tok.speech-to-text.watson.cloud.ibm.com/instances/XXXXXXX-72be-4b4a-8bc7-47XXXXXXea"
      });
    })
    .catch(console.error);
});

```

# ブラウザ上でSpeech to Textを動作させる

```App.js
import WatsonSpeech from 'watson-speech';

fetch('/watson/speech-to-text/token')
  .then((response) => response.json())
  .then((response) => {
    let stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
      accessToken: response.accessToken,
      url: response.url,
      model: "ja-JP_BroadbandModel",
      objectMode: true,
      extractResults: true,
      // speakerLabels: true, // 重いらしい
    });

    stream.on('data',(data) => {
      if(data.results && data.results[0].final) {
        console.log(data.results[0].alternatives[0]);
      }
    });

    stream.on('error', console.error);
  }).catch(console.error);
```
レイヤ1まとめ

３分間 Networking を見ていて忘れてしまいそうな単語などを備忘録としてまとめました。
内容的にはレイヤ1までです。

http://www5e.biglobe.ne.jp/~aji/3min/index.html

## ホスト

通信機能を持つデバイス（コンピューター、ルーター、プリンターなど）

## データユニット

データ本体と付加情報をひとまとめにしたもの

## NIC

NICがPCとLANケーブル（メディア）を繋ぐ。
NICはマザーボードのPCIスロットに差し込む。
ノートPCだとPCMCIA（PC）カードが内蔵されている。

## ネットワーキングデバイス

基本的には、複数のPCからのデータがLANに流れることになる。その為通信（データの流れ）を制御する機器が必要。それがネットワーキングデバイス。レイヤごとに存在している。

|  レイヤ  |  ネットワーキングデバイス  |
| ---- | ---- |
|  レイヤ1  |  リピーター、ハブ（パッシブ）、リピーターハブ  |
|  レイヤ2  |  ブリッジ、スイッチ  |
|  レイヤ3  |  ルーター  |

## データ

データがメディア（LANケーブルなど）をデータが通るときは信号の形で伝わる。

|  メディア  |  信号種別  |
| ---- | ---- |
|  銅線  |  電気  |
|  光ファイバ  |  光信号  |
|  無線  |  電波  |

信号にはアナログとデジタルがある。
アナログは連続的な波であり、デジタルは非連続的なON/OFFで表される。

![信号](https://www.lapis-tech.com/jp/common/wp-content/uploads/2018/06/01f83d7da723e43d4bc1e59902025e42.jpg)
[参照元](https://www.lapis-tech.com/jp/common/miconlp/tips/2-10-%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E4%BF%A1%E5%8F%B7%E3%81%A8%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E4%BF%A1%E5%8F%B7%E3%81%A8%E3%81%AF/)


## モデム

信号の変調と復調を行う。
一般電話回線の場合は普通のモデムだが、ADSLであればADSLモデム、CATVであればケーブルモデムが使用される。
普通のモデムはアナログ信号をデジタル信号に復調するが、モデム自体はアナログ<=>デジタルの変調・復調をする機能を持つものではなく、信号を変調・復調する機能を持つものなので、デジタル信号をデジタル信号に復調する場合もある。

## スプリッタ

ADSLは普通の電話の音声信号と通信用のデータ信号の２つの信号が同じ回線に流れている。
その２つを電話機とADSLモデムに分配するのがスプリッタ。

## メディア

情報伝達を媒介する手段

LANのネットワーキングメディアは3種類存在する。
銅線２種、光ファイバ１種。
それらの規格を決める団体の中では、IEEE(アイ・トリプルイー)、EIA/TIAの２つの規格団体が有名。

|  ネットワーキングメディア  |  説明  |
| ---- | ---- |
|  同軸ケーブル  |  LANケーブル、TVのアンテナ線など中心に銅の導体がある  |
|  ツイストペアケーブル  |  8本の細い銅線を2本ずつ捻ってまとめて４つの組にしたものが中心にある  |

ケーブルの型式などの最初の数字は伝送速度、次に伝送方式、末尾の-Tはツイストペアを表す。
-T以外の表記は光ファイバ。-がなく数字のみの場合は同軸で数字は最長距離を表す。


1000BASE-T
上記は伝送速度100Mbps、ベースバンド伝送、ツイストペアケーブルを表す。

10BASE2
などの場合、伝送速度10Mbps、ベースバンド伝送、同軸ケーブル、185m。
最長距離は100m単位だが、2の場合は200mではなく185m。

LANケーブルには伝送速度で分けられたカテゴリがある

|  カテゴリ  |  伝送速度  |
| ---- | ---- |
|  1  |  電話回線用  |
|  2  |  電話回線用  |
|  3  |  10Mbps  |
|  4  |  16Mbps  |
|  5  |  100Mbps  |
5より上もあるがとりあえず5まで。


## 衝突ドメイン
レイヤ１のハブに関係がある。
ドメインという言葉は範囲を持つ。
ハブを使用したLANでは、
>ハブは繋がっているホスト全てに信号を垂れ流す→データが衝突するとデータの形式が変わって不正なデータになる→不正なデータを垂れ流す

ということが起こる。
このデータの衝突が発生する可能性がある範囲を衝突ドメインという。
ハブは衝突ドメインを広げる。
その為、伝送速度でホスト同士がやり取りする際に途中経由するハブの数が決められている。

|  伝送速度  |  ハブの数  |
| ---- | ---- |
|  10Mbps  |  2  |
|  100Mbps  |  4  |

## トポロジ
トポロジはノード(コンピューター、ネットワーキングデバイスなど)とリンク（メディア）で表現する。
物理トポロジと論理トポロジがあり、物理トポロジと論理トポロジは必ずしも一致しない。

物理トポロジには、バス型(バスは母線の意味)、リング型、スター型、ツリー型、メッシュ型がある。
論理トポロジには、リング型とバス型がある。

物理トポロジ

|  トポロジ  |  説明  |
| ---- | ---- |
|  バス型  |  母線に支線を追加する度にT字コネクタが必要になる。同軸ケーブルを使用。電柱から各家庭に電気を引っ張るイメージに近そう。  |
|   リング型 |  信号が一方通行。２重リングもあるが、伝送速度に影響はなく、冗長性を確保する為。  |
|  スター型  |  中心のノードはハブなどのネットワーキングデバイスになっている。スター型にさらにハブを繋げて拡張する拡張スター型も存在する。  |
|  ツリー型  |  階層構造を持つ。  |
|  メッシュ型  |  全てのノードが相互に直接接続される。余程のことがない限り必ずどこかを経由して他のノードと接続できる。通信が取れなくなると困るような重要な部分で使用される。LANの一部をメッシュ型にした部分メッシュ型、全てをメッシュ型にした完全メッシュ型などが存在する。  |

論理トポロジ
データの流れに注目する。
データが全てのノードを巡回するような流れであれば、リング型。
データが全てのノードに伝送されるような流れであれば、バス型。

## まとめ
レイヤ1で忘れそうな単語をまとめました。
Sway firefoxの日本語入力がxwaylandに邪魔された話

# FireFoxで日本語入力ができなくなった
日頃使いのArchLinux環境を構築しよう話の一貫として、構成をちょこちょこといじり続けています。
構築初期にfcitx5の環境を整えて、Firefoxでも日本語入力ができるところまで整理していたのですが、、
ふと気がついたらNGになってまして。。

その関連のTipsをまとめます。

# 何が悪かったの？
結論から言うと、xwaylandです。

構築初期はxwaylandなしのピュアなwaylandで構築を進めており、その状態でFirefox + fictx5は特に特殊な設定なく動いていました。

で、virtualboxを導入したのですが、こいつは残念ながら現状ではまだwayland単独で動かすことができないらしく。
仕方なくxwaylandを導入しました。
その後から、Firefoxの日本語入力ができなくなってたみたいです。。

症状としては、右上のアイコンが困ったマークになる、ターミナルなど日本語入力ができるアプリを立ち上げればmozcマークが表示されるが、この状態でFirefoxにカーソルもってっても英語入力になってしまう、ですね。
![icon-ng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587269/f1b3d2ff-0070-52ac-77e3-ef323ab41b2b.png)


細かな調査はできてませんが、xwaylandが導入されることでwaylandとxのどちらも選択できるようになってしまうので、そのせいで明確な指定（/etc/environment)がないと適切に動作できなくなってしまった、というところでしょうか。

virtualbox君さぁ、、
残念ながらグラフィカルにインストールして試すケースもあるので、（うまく行くかは調べてませんが）フルコマンドラインで対応したり、dockerってわけにも行きません。
KVMは昔GUI持ってた気もしますが、そのためだけにKVM調べ直すのもなぁ、、
悩みの種ですが、背に腹は変えられないので、xwaylandは仕方無しとするしかないかな。。。

以下、今回のTIPSです。

## xwaylandがない場合のOK設定

### そもそものインストール

```
# pacman -S fcitx5-mozc fcitx5-qt fcitx-config-qt qt5-wayland

```

で、swayを利用している際は最初から最後までfctixが起動していてくれてないといけないので、、

```
$ echo "exec fcitx5 >> ~/.config/sway/config

```

以上です。
ただし現状は検証の関係でかなりの数のパッケージ入れているので、上記で足りてないものもあるかも。

### 必要な追加設定
ありません。
インストールが終わったら、すぐFirefoxで日本語入力ができます。

## xwaylandを入れた場合のOK設定

### xwaylandのインストール

```
# pacman -S xorg-xwayland
```

### 必要な追加設定
/etc/environmentに以下を配置しないといけません。

```
$ cat /etc/environment
export MOZ_ENABLE_WAYLAND=1
export XDG_SESSION_TYPE=wayland
```

これで、また日本語入力ができるようになります。

# まとめ
xwaylandを入れてしまうと、意図せずx11依存のアプリを混ぜ込んでしまいかねないので、一刻も早く手切れをしたいところです。
ただし、現状はchromeもwaylandで動かそうとすると長いオプション叩かないといけませんし、、、現状はまだ仕方ないのかなぁ、、
なんとも。。。
[py2rb]　仮引数の既定値

# はじめに
移植やってます。
( from python 3.7 to ruby 2.7 )
# 仮引数 (Python)
```python
def func(a, b=1, c=2, **kwargs):
    print(a, b, c)

func(0, 4, 5)
func(0, d=4, c=5)

# 0 4 5
# 0 1 5
```
`d=4`が実引数の2番目にありますが、辞書扱いとなり仮引数の2番目の`b`には格納されないようです。

独習Python 330p

https://www.shoeisha.co.jp/book/detail/9784798163642
# 仮引数 失敗 (Ruby)
```ruby
def func(a, b=1, c=2, **kwargs)
  p [a, b, c]
end

func(0, 4, 5)
func(0, d=4, c=5)

# [0, 4, 5]
# [0, 4, 5]
```
`d=4`の戻り値である`4`が`b`に格納されます。
# 仮引数 成功 (Ruby)
```ruby
def func(a, b: 1, c: 2, **kwargs)
  p [a, b, c]
end

func(0, b: 4, c: 5)
func(0, d: 4, c: 5)

# [0, 4, 5]
# [0, 1, 5]
```
独習Ruby 387p

https://www.shoeisha.co.jp/book/detail/9784798168845

プロを目指す人のためのRuby入門［改訂2版］ 186p

https://gihyo.jp/book/2021/978-4-297-12437-3
# 仮引数 成功2 (Ruby)
```ruby
def func(a, b: 1, c: 2, **kwargs)
  p [a, b, c]
end

func(0, b: 4, c: 5)
func(0, 'd' => 4, c: 5)

# [0, 4, 5]
# [0, 1, 5]
```
このほうが紛らわしくないかも。
# メモ
+ Python の 仮引数の既定値 を学習した
+ 百里を行く者は九十里を半ばとす
WSLでUbuntu + RStudio Server

## はじめに
UbuntuでRStudioを使うには主にデスクトップ版Rstudioか、RStudio Serverを使うかどちらかです。
デスクトップ版RstudioですとUbuntu14.04以降だとこのままだとRStudio上で日本語入力ができないため、RStudio Serverを入れることをお勧めします。

##WSL2インストール
WSL2が入っていないとUbuntu 20.04で動かない機能があるの、インストールしないといけません。
管理者として開いたPowerShellで

```html
wsl -l -v
```
と入力。
versionが1となっていた場合、以下を実行してください。
まず、WSL2を使えるようにします。管理者として開いたPowerShellで

```html
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
PCを再起動します。
次に、WSL2をデフォルトにします。再び、管理者権限で起動したPowerShellで、

```html
wsl --set-default-version 2
```
とします。

##Rのインストール
Ubuntuを起動して諸々アップデートします。ここからのコマンドはUbuntuに入力してください。

```html
sudo apt-get update
sudo apt-get upgrade -y
```

Rの使えるUbuntu 20.04のリポジトリを登録。今回はR4.0です。（ここでWSL1だと動かないので、WSL2が必要にらしい。）

```html
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys E298A3A825C0D65DFD57CBB651716619E084DAB9
sudo add-apt-repository 'deb https://cran.r-project.org/bin/Linux/ubuntu focal-cran40/'
```

Rのインストール

```html
sudo apt install -y r-base r-base-core r-recommended r-base-dev gdebi-core build-essential libcurl4-gnutls-dev libxml2-dev libssl-dev
```

##RStudio Serverのインストール
RStudio Serverのインストールします。

```html
wget https://rstudio.org/download/latest/stable/server/bionic/rstudio-server-latest-amd64.deb
sudo gdebi rstudio-server-latest-amd64.deb
```
RStudio Serverを起動します。

```html
sudo rstudio-server start
```
その後、
ブラウザから
```http://localhost:8787
```で接続できます。
また、RStudio Serverでもユーザー名とパスワードを聞かれますが、OSユーザーとパスワードで開けます。

参考までに、
サーバの停止，起動，再起動を手動で行うには以下のコマンドを使います。

```html
sudo rstudio-server stop
sudo rstudio-server start
sudo rstudio-server restart
```
【Ruby】if → unlessへの書き換え　unlessメソッド

※初心者向け
※アウトプット練習の為

開発環境
rails 6.1.4.1
ruby 2.6.5

##問題内容##
次のif文をunlessというメソッドを用いて書き換えてください。

```ruby
if a + b > 0
  puts "計算結果は0より大きいです"
end
```
**ヒント**
**unless**
unlessとはifとは逆で、条件式がfalseの場合に処理が実行されます。

**ifを使用した場合**

```csharp
if 条件式
  条件式がtrueの時に実行する処理
else
  条件式がfalseの時に実行する処理
end
```

**unlessを使用した場合**

```csharp
unless 条件式
  条件式がfalseの時に実行する処理
else
  条件式がtrueの時に実行する処理
end
```

##解答##

```ruby
unless a + b <= 0
  puts "計算結果は0より大きいです"
end
```

##解説##
まず問題のコードについて解説を行います。**a + b > 0**という式は、**「a + b が0より大きいとき」にtrue**となり、その結果**end**までの処理が実行され文字列が表示されます。

```ruby
if a + b > 0
  puts "計算結果は0より大きいです"
end
```
では、上記のコードのifを**unless**に変更したらどうなるかを見てみましょう。

```ruby
unless a + b > 0
  puts "計算結果は0より大きいです"
end
```
この場合、**「a + b が0より大きい」という条件式がfalse**の時に文字列が表示されます。つまり、**「a + b が0より大きくないとき」**に文字列が表示されます。

しかし、これだと条件式と行いたい処理の内容に齟齬があるため、編集が必要です。
このように演算子を**>**から**<**に変更するとどうでしょうか。

```ruby
unless a + b < 0
  puts "計算結果は0より大きいです"
end
```
この場合は、**「a + b が0より小さい」**という条件式がfalseの時、つまり**「a + b が0より小さくないとき」**に文字列が表示されます。
しかしa + bが0の場合でも、**「a + b が0より小さい」という条件式がfalse**となるため文字列が表示されてしまいます。

**a + bが0**の際に文字列を表示させないようにするには**「a + b が0以上のとき」**にfalseになる条件式に変更します。下記のような演算子**<=**を使用したコードとします。

```ruby
unless a + b <= 0
  puts "計算結果は0より大きいです"
end
```
非同期処理を含む終了処理はTaskをawaitせずにWait()で同期的に待たなければならないケースもあるよ

# 非同期処理を含む終了処理
特にアンマネージリソースを扱う場合において、終了処理（キャンセルを含みます）では非同期処理を行うことがよくあります。

* `IAsyncDisposable`インターフェイスを実装するクラス
* `System.Threading.Channels`クラスの`CompleteAsync()`メソッドのような、適切なタイミングで明示的に実行する終了処理
* アンマネージリソースを使って終了時のログを書き込む場合に１回だけ行う`WriteAsync`的な普通の非同期メソッドの実行
* RDB処理が終わったときに行うトランザクションの後片付け

最近のAPIには`Async`メソッドが標準搭載されているものも多いため、終了イベントに行うメソッドを`async`にして`await`したくなります。しかし、**一部の終了処理では`await`すると処理の完了を待たずに終了してしまう**こともあり、ハマることがあります。
本稿では`await`してはいけない処理を２つ紹介します。
# `WinForms`の`FormClosing`イベントおよび`FormClosed`イベント
`WinForms`には画面を閉じるときのイベントとして以下があります。

* `FormClosing`イベント
    * 画面を閉じる直前に発動します。
    * キャンセルして閉じないことも可能です。
    * `FormClosing`イベントを抜けるまでに閉じるのをキャンセルされていなければ画面を閉じて`FormClosed`イベントに進みます。
* `FormClosed`イベント
    * 画面が閉じたあとに発動します。
    * もう閉じているのでキャンセルはできません。
    * スタートアップオブジェクトの場合、`FormClosed`イベントを抜けるとアプリケーションが終了します[^1]。

イベントハンドラは当然ですが`async`にできます。`async`にして内部で`await`した場合、**メソッドを一回抜けて**非同期で処理を待ちます。
・・・おわかりでしょうか？`FormClosing`イベントも`FormClosed`イベントも、メソッドを抜けた段階で次のイベントに進んでしまいます。そのため、この２つのイベントハンドラで`await`すると**その行以降の処理が行われずにそのまま画面が閉じます**。スタートアップオブジェクトでこれをやると、**`await`している`Task`が未完了でもアプリケーションが即終了します**。
このため、`FormClosing`および`FormClosed`では非同期処理を`await`してはいけません。

# コンソールアプリの`CancelKeyPress`イベント
コンソールアプリは`Ctrl+C`キーでアプリケーションを終了させることが可能です。この`Ctrl+C`キーが押されたときになにか処理をしたい場合、`Console.CancelKeyPress`イベントにイベントハンドラを登録できます。このイベントハンドラで終了をキャンセルすることもできます。なお、このイベントが抜けるとコンソールアプリは終了します。

・・・もうお気づきですね？`WinForms`の場合と同様に、**`CancelKeyPress`イベントのハンドラで`await`すると完了を待たずにアプリケーションが即終了します**。

# まとめ
以上、２つのケースを紹介しました。私はこの他にも、ほとんどFire-And-Forgetな長命のスレッド処理（アプリケーションと寿命がほぼ同じになるように作る１個だけのスレッドループ）を`CancellationToeknSource`でキャンセルする場合に、`Cancel()`メソッド実行後に長命スレッドの`Task`を`Wait`することが多いです。このような`Task`はアプリを終了させるときとかリトライで長命スレッドを即復活させるときにしかキャンセルしないため、キャンセル処理全体が同期処理になりがちなので`Wait`してOKなためです。

「`Task`は`Wait()`や`Result`プロパティにアクセスしてはいけない」という説明はよくありますし私も全面的に同意です。ただしそれは通常の場合であって**よくわかって使うならOK**です。それが適切なケースならば適切なやり方を行いましょう。ただし、急に`Task.Wait()`されるとぎょっとするので**「終了処理のため同期的に行う」みたいなコメントがあると大変助かります**。

そもそも終了時に行わなければいけない処理なら、それが完了するまで正常終了させることはできません。終了時に行う処理は同期処理として実装するか`Task`が完全に終わるまで`Wait()`で同期的に待ちましょう。複数の`Task`を終了させる場合は`Task.WhenAll(~~).Wait()`すれば並列したうえで同期的に待てばOKです。
ただし`IsCancellationRequested`でキャンセルを判定してキャンセルされていたら終了処理する、みたいな場合にその中で`await`しているとデッドロックを起こす可能性があります。初期化処理や終了時処理はセンシティブなのでよく考えてプログラミングしましょう。

[^1]: 正確にはエントリポイントの`Run`メソッドの次に行く
カレンダーを表示⇒日付をクリックすると入力フォームに自動入力される【Django】

# カレンダーを表示⇒日付選択で入力フォームに反映
カレンダーボタンから、カレンダーを表示し日付をクリックできます。
その後選択した日付が入力フォームに自動で反映される設定です。
※めちゃくちゃ簡素に書いてますｍｍ

## フォーム（forms.py）の設定
```python:forms.py
from django import forms
#(中略)

class EnqueteForm(forms.Form):
    birth = forms.DateField(
        label='生年月日',
        widget=forms.DateInput(format='%Y-%m-%d', attrs={'type': 'date'}),
        # required=False
        ) 

# 表示するための記述
    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)

      self.fields['birth'].widget.attrs['class']='form-control col-11'
```
Tabがこちらで反映されてない部分がありますので、適宜修正をお願いします。

## ビュー（views.py）の設定

```python:views.py
from .forms import EnqueteForm
# (中略)

class EnqueteView(generic.FormView):
    template_name = "enquete.html"
    form_class = EnqueteForm #forms.pyで作ったクラス名
    success_url = reverse_lazy('information:enquete')
```

## JavaScriptの設定（base.html）


```html:base.html
    <script>
        $(function () {
            // 日付は、年-月-日 の形式でお願いする。
            let dateFormat = 'yy-mm-dd';
            $('#id_created_at').datepicker({
                dateFormat: dateFormat
            });
        });

        // drag and drop event
        $(document).ready(function() {
            var obj = $("#dragandrophandler");
            obj.on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                $(this).css('border', '2px solid #0B85A1');
            });
            obj.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            obj.on('drop', function(e) {
                $(this).css('border', '2px dotted #0B85A1');
                e.preventDefault();
        
                var files = e.originalEvent.dataTransfer.files;
                
                // Modal dialog
                popupImage(file, obj);
            });
        
            // Avoid opening in a browser if the file is dropped outside the div
            $(document).on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
        
            $(document).on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                obj.css('border', '2px dotted #0B85A1');
            });
        
            $(document).on('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            
        });
    </script>
```

今回もJS部分はhtmlにべた書きしましたが、他にいい方法があったらご教示いただけますと幸いです。
homebrew > インストール時 > Warning: /opt/homebrew/bin


いっけん成功したかに見えたがWarningが出ててインストールできていなかった時

## 現象

以下のような場合。Installation successfulと表示されているが、brewコマンドを打っても反応しない


```
==> Downloading and installing Homebrew...
HEAD is now at 3ba6afb1d Merge pull request #12648 from bevanjkay/cask-comma-separator-style
Updated 1 tap (homebrew/cask).
Warning: /opt/homebrew/bin is not in your PATH.
  Instructions on how to configure your shell for Homebrew
  can be found in the 'Next steps' section below.
==> Installation successful!

中略

==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/xxxx/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh
    
```


## 解決法

パスを通す

```
export PATH="$PATH:/opt/homebrew/bin"

brew -v
```
【React】【Vue】 など流行りのフレームワークを使うもののためのJS基礎 [this, call(), apply(), bind()]


<h2>this</h2>
thisは、その関数を呼び出しているオブジェクト
グローバルスコープで呼び出した場合は、グローバルオブジェクト
javaScriptは一番外におおきなグローバルオブジェクトで囲まれているため。

<h2>bind()</h2>
thisが参照するオブジェクトを指定する

※

```typescript

const myButton = {
    content: 'OK',
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
  };

myButton.click();

//コンソール
{ content: 'OK', click: [Function: click] }
OK clicked

```

この場合の this は myButton のオブジェクトを示している

では次の場合はどうなるだろうか

myButton クラスのメソッドを変数 looseClick に代入している

```typescript

const myButton = {
    content: 'OK',
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
  };

const looseClick = myButton.click;
looseClick();

//コンソール
Object [global]
undefine clicked

```

この場合の this はグローバルオブジェクトを示している

なぜかというと looseClick には

```typescript
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
```

が代入されている

記事の最上部に書いたが、この時の this は myButton のようなクラスに囲まれていない
→ グローバルオブジェクトを示している

これを※と同じ動きにするには bind を使用する

```typescript

const myButton = {
    content: 'OK',
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
  };

const bindClick = myButton.click.bind(myButton);
bindClick();

//コンソール
Object [global]
undefine clicked

```

click メソッドの中にある this が myButton オブジェクトを指していることを bind をつかって指定する

追記予定
call
applay
Warning: React has detected a change in the order of Hooks called by X　でハマる 

# 何をしていたか（悪いコード）
　React Native で、とあるアプリで、アカウント情報を表示する画面を作成していた。
　ReactNavigation を利用していた。

　処理の概要は以下

```javascript
export default function MyPage {
  // ユーザ情報
  const [user, setUser] = useState();

  // ユーザ情報取得処理（あとで再利用する）
  const userCheck = async () => {
    const user = await getUser();
    setUser(user);
  }

  // 画面表示開始時に一度だけ読み取る
  useEffect(userCheck, []);

  // ユーザ情報がなければ処理中を表示
  if (!user) {
    return (
      <Text>処理中</Text>
    );
  }

  // ここから本画面　画面遷移用にnavigation 確保
  const navigation = useNavigation();

  return (
    <Text>本画面</Text>
    {/* 実際は、画面遷移などをする処理がある */}
  );
  
```

# 先に結論
　useNavigation も立派な Hook なので、条件によって呼ばれたり呼ばれなかったりするとこのエラーになります。

# 何が起きたか
　処理的には問題はないが、以下のエラーが表示されてビビる

```
Warning: React has detected a change in the order of Hooks called by MyPage.
This will lead to bugs and errors if not fixed.
For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useState                   useState
3. useEffect                  useEffect
4. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
```

# 何をしたか
　ひとまずURL　https://reactjs.org/link/rules-of-hooks
　の記載があるので、皿の目で読む。
　翻訳などを使って、以下のように理解

:::note understood
Hooks は、レンダリング毎に、同じ順序、同じ量、同じものを毎回呼ばれるようにしなきゃいかんよ
:::

# 上を読んでもハマる。どう考えたか

- useState は毎度同じものが同じ順序で呼び出されるはず
- useEffect も useState の後に呼び出されているし、👆のURL記載事項には反していないはず
- あれ？ useContext ってなんだっけ？　使ってたっけ？

# 結局何だったか
　useNavigation がHookであることを忘れていた。
　useNavigation は、内部で useContext を使っているので、この順序になっていた。
　state の条件により、 useNavigation が呼ばれたり呼ばれなかったりすると、このエラーになるようだ。

# 良いコード

```javascript
export default function MyPage {
  // ユーザ情報
  const [user, setUser] = useState();

  // ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  // 画面遷移用にnavigation 確保（条件に左右されず useNavigation は呼ばれるようにしないとエラーになるぞ）
  const navigation = useNavigation();
  // ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

  // ユーザ情報取得処理（あとで再利用する）
  const userCheck = async () => {
    const user = await getUser();
    setUser(user);
  }

  // 画面表示開始時に一度だけ読み取る
  useEffect(userCheck, []);

  // ユーザ情報がなければ処理中を表示
  if (!user) {
    return (
      <Text>処理中</Text>
    );
  }

  // ここから本画面
  return (
    <Text>本画面</Text>
    {/* 実際は、画面遷移などをする処理がある */}
  );
  
```

# 教訓

- ライブラリをじゃんじゃん使うのはいいが、中で何をしているのか、特に Hooks については気を付けよう
- use という言葉から、Hooks だと連想できるようになろう
- 正常に動作するので、最悪放置しようと思ったけど、そんな自分にばいばいきん
Reactのindex.htmlのコメントを翻訳

今後Reactの知識を徐々に共有していきます。

## 翻訳に使用したもの
[DeepL](https://www.deepl.com/ja/translator)(ディープエルと呼びます。)
Google翻訳よりも日本語らしく翻訳してくれるので、オススメです。

## public/index.htmlを翻訳したコード

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json は、ユーザーのモバイルデバイスまたはデスクトップにWebアプリをインストールする際に使用されるメタデータを提供します。
      https://developers.google.com/web/fundamentals/web-app-manifest/ をご覧ください。
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      上のタグで`%PUBLIC_URL%`を使っていることに注目してください。
      これは、ビルド時に`public`フォルダの URL に置き換えられます。
      HTMLから参照できるのは、`public`フォルダの中のファイルだけです。

      "/favicon.ico "や "favicon.ico "とは異なり、"%PUBLIC_URL%/favicon.ico "の場合は、
      クライアントサイドのルーティングと非ルートのパブリックURLの両方で正しく機能します。
      非ルート公開URLの設定方法は、`npm run build`を実行することで確認できます。
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      このHTMLファイルは、テンプレートです。
      ブラウザで直接開くと、空のページが表示されます。

      このファイルには、ウェブフォント、メタタグ、アナリティクスを追加することができます。
      ビルドステップでは、バンドルされたスクリプトを<body>タグに配置します。

      開発を始めるには、`npm start`または`yarn start`を実行します。
      本番用のバンドルを作成するには、`npm run build`または`yarn build`を実行します。
    -->
  </body>
</html>
```

## まとめ

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)