OmniAICreator/Qiita-1.07M huggingface dataset:
はじめてのマイコン　Arduino・ESP32＆M5Stack事始め

マイコンというものを触ってみたいと思った方が躓くであろう導入について少し書きます。
##マイコンって何？
マイコンとは、半導体の部品です。
といっても、半導体がすべてマイコンではなく、中に演算処理を行うものが入ったSoC（SystemOnChip）などがマイコンに属します。
*人によってはマイコンやSoCの定義が色々あるので話すときは注意しましょう
#マイコンで何が出来るの？
何でもできます
と言う人が居ますが、正直、「なんでも」はできません。
例えば気温や時間を測るなどという事を行うのも、単体では行えません。
センサーやクリスタルなどの外部部品が必要になることが多いです。

じゃあ、何ができるか？
外部部品を使って何かが行えるもの
と思ってください。
#はじめての人にお勧めなのは？
Arduinoという環境が使えるものをお勧めしています。
Arduinoの代表となるArduinoUnoは純正品は3千円程度しますが
Shigezoneさんでは互換品が ~~450円~~800円で購入できます。
https://www.shigezone.com/?product=arduino-uno
*Arduino Unoという基板をArduinoと言う人がいますがArduino UnoはArduinoプラットフォームの基板の一つになります
##無線通信可能なESP32
私がお勧めするのは無線通信が行えるESP32というマイコンが搭載されているデバイスをお勧めします。
その中でもケースに入っているM5Stack社の製品をお勧めしています。
#M5Stackのどれを選べばいいか？
M5Stack社はいくつかのバリエーションがあり、どれを選べばいいかわからないと相談されることがあったので少し解説します。
M5Stackには主に

+ M5Stack Core　https://m5stack.com/collections/m5-core
+ M5Stick
+ M5Atom　https://m5stack.com/collections/m5-atom

があり、バリエーションとしてPaperやInkなどがあります。
https://docs.m5stack.com/#/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9f5825fb-f618-e0e3-51a9-8a86743b98d3.png)
すべてではありませんが、中にESP32というマイコンが入っており、Wi-Fi／Bluetooth 通信を行う事が出来る上に、上記のArduino環境やブロックプログラミングのUIFlowが使えます。

それでは、主要バリエーションを解説しましょう
##M5Stack Coreシリーズ
M5Stack社として一番最初に出した商品です。
2020年にCore2という製品が登場し、初代のCoreとCore2は併売されています。
様々な拡張ユニットが売られていますが、本体だけで3500円以上する為、本気でやる人向けです。
##M5Stickシリーズ
Coreのサイズを小さくし、拡張性を一部犠牲にしたモデルです。
現在はM5StickC PLUSに移行しています。
値段は1500円程度からで、LCDを搭載し、初心者にもお勧めです。
Coreシリーズの拡張モジュールが使えないデメリットはありますが、価格が安くお勧めです。
##M5Atomシリーズ
一番安いATOM Liteは1000円以下で売られています。
これ一つでマイコンのプログラミングやGPIO操作、Groveアクセサリーが使用できます。
ただし、バッテリーを搭載していないなどデメリットもあります。
なお、私はATOM MatrixというLEDが25個付いたモデルをお勧めしています。
#購入場所
日本では、主にスイッチサイエンスで購入可能です。
海外の大手サプライヤーであるDigiKeyやMouserでも取り扱っており、新製品はこちらでも確認することをお勧めします。
(DigiKey,Mouserは6千円以上送料無料です）
###本家M5StackStore（深圳）
https://m5stack.com/collections/m5stack-new-arrival
###国内オンライン
スイッチサイエンス　https://www.switch-science.com/catalog/list/770/
秋月電子　https://akizukidenshi.com/catalog/c/cwifi/
千石電商　https://www.sengoku.co.jp/
###秋葉原
秋月電子、千石電商など
###国外オンライン
DigiKey　https://www.digikey.jp/
Mouser　https://www.mouser.jp/
#もっと色々やりたい人には
M5Stack Core2 ESP32 IoT Development Kit for AWS IoT EduKitをお勧めしています。
https://m5stack.com/products/m5stack-core2-esp32-iot-development-kit-for-aws-iot-edukit
M5Stack Core2にセンサーやLEDなどが搭載されておりAWSを使用しない方でもCore2を検討している人にはお勧めです。
##セットアップなど
買った後に読むと良い資料として秋田先生の
M5Stackシリーズ製品をArduinoIDEで使う
をお勧めします。
https://qiita.com/akita11/items/f896346d4e8be4673553
【初学者備忘録】2：プログラミングで使用する用語と意味

#初学者備忘録2

##備忘録2
昨日は直近で触れた用語や開発言語についてまとめました。
今日はプログラミングを勉強する中でよく聞くけど、あまり理解できていなかった用語についてまとめてみたいと思います。

##用語まとめ

**①エディタ**
ソースコードやテキストなどを書くのに使うアプリ。
種類がたくさんあるので、ゆくゆくは種類なども把握していきたいと思います。
自分はプログラミングを始めた時に
Visual Studio codeを進めてもらって使用しています。

**②UI**
ユーザーインターフェース
利用者と製品やサービスの接点
レイアウト・画像・文字のフォント・メニューやボタンの操作性などユーザーが目にするもの・操作するものを指す

**③GUI**
グラフィカルユーザーインターフェース
マウスやタッチパネルなどで、画面を見ながら操作ができること
パソコン・スマートフォン・カーナビなどが該当する

**④CUI**
キャラクターユーザーインターフェース
キャラクターは英語で「文字」という意味
GUIとは逆にテキストデータのみで表示されるUI
ターミナルやコマンドプロンプトが該当する

**⑤ディレクトリ**
フォルダとほぼ同じ意味
GUIではフォルダ
CUIではディレクトリと呼ぶことが多い。
厳密には違う意味になるので、イコールではない
なぜ違う意味になるのかなどは別で調べて投稿できたらと思います。

**⑥パス**
日本語では「経路」という意味。
目的のフォルダに辿り着くための道順を表すときなどに使います。
ウェブサイトのアドレスもパスの一種。

- 絶対パス
    - フルパスとも呼ばれる
    - ルートディレクトリから目的地までの経路
    - どのフォルダにいても常に同じスタートから同じ経路を辿る
- 相対パス
    - 作業中のフォルダから目的のフォルダまでの経路
    - スタート地点が異なると経路も異なる


##今日の一言
今日は熟練のプログラマーの方にとっては、当たり前のように使われているけれど
自分が独学で始めた時になかなか理解出来なかった用語に絞ってまとめてみました。
恥ずかしくて人に聞くこともできず、始めたてで何もわからなかった自分はとても苦労しました。
特にパスについては、まだまだ理解が追いついていない部分があるのでパスの勉強をしながら
自分の作業環境も整理していきたいと思います。
しばらくは用語や使ってみたツールなどを記録していきたいと思います。
elm-liveでさくっとホットリロードするメモ

## 概要
[前回のDockerで動かす](https://qiita.com/hibohiboo/items/c408649941019ac3d3b5)とかはやらず、手元でさくっとelm-liveでやろうとしてハマったのでメモる。
Discordのelm-jpの皆様ありがとうございました。

## ハマったところ

`npx elm-live src/Main.elm --open`とするとブラウザで確認できるのに、
`npx elm-live src/Main.elm --open --hot`とするとブラウザまっしろになってしまう問題。

## 解決法
[ドキュメントに](https://www.elm-live.com/#hot)かいてあったもよう。
> This only works if you are outputting your compiled Elm into a js file using the --output flag for elm make.

まずは、index.htmlを作成。

```index.html
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Main</title>
    <script src="main.js"></script>
  </head>

  <body>
    <div id="myapp"></div>
    <script>
      var app = Elm.Main.init({
        node: document.getElementById("myapp"),
      });
    </script>
  </body>
</html>
```

改めて、以下を実行。

`npx elm-live src/Main.elm --hot --open -- --output=main.js`

みれた！ ファイルを更新するとちゃんとホットリロードもされる！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/85f917e8-114b-bd4b-5d19-f4260ad3309a.png)

[ソース](https://github.com/hibohiboo/todo-app-with-spreadsheet/tree/007bd1a217d33c1b0bbf66d919a44971d778db92)
C# / PowerShell で JSON に突っ込める DateTime 文字列を出力する

まさかの一発オプション… 知らなかった… (´・ω・｀)

C#:

```cs
DateTime.Now.ToString("o");
```

PowerShell:

```powershell
PS > Get-Date -Format o
```

出力:

```
2021-03-04T23:33:42.6791453+09:00
```

# JSON と DateTime

JSON には DateTime 型がないので、DateTime 値を文字列に変換する必要がある。ここで考慮しなければならないのが、「文字列で表現した DateTime 値をちゃんと逆変換できるのか？」という点。特に、 サードパーティ製サービスとの通信を JSON で実施する場合、そのサービスがちゃんと逆変換してくれる形式である必要がある (もちろんサービスがフォーマット指定してるならそれに習うべき)。
一般論としてどんな形式がよく使われているか？と考えてみると、 **ISO 8601** (ex: `2021-03-04T23:33:42.6791453+09:00`) が１つの候補として挙げられると思う。

- [ISO 8601 (Wikipedia)](https://ja.wikipedia.org/wiki/ISO_8601)

C# で DateTime 型をこの形式の文字列に出力する場合、これまで自分はフォーマットを指定していたのだが…

```cs
DateTime.Now.ToString("yyyy-MM-ddTHH:mm:ss.fffffffK");
```

色々と調べた結果、前述のように一発オプションで出力できることが判明…

# 背景

GCP の BigQuery でテーブルを作成する際、サンプルデータ (JSONL) を使ってスキーマ自動生成をしようとした。DateTime 型データを JSON でどのような形式にすれば BigQuery が DateTime 型として認識してくれるか？を色々と思考錯誤した結果、 ISO 8601 形式に落ち着いた。

# 参考資料

- [ラウンドトリップ ("O"、"o") 書式指定子](https://docs.microsoft.com/ja-jp/dotnet/standard/base-types/standard-date-and-time-format-strings#the-round-trip-o-o-format-specifier)
- [Windows ISO 8601 timestamp (Stack Overflow)](https://stackoverflow.com/questions/45689471/windows-iso-8601-timestamp)
【Intellij IDEA】特定の内容を除いてテストを実行する【JUnit】

`Intellij IDEA`の`Run/Debug Configurations`の`JUnit`の設定で、特定の内容を除いてテストを実行します。
例えば、「このパッケージ内のテストとこの名前を含むテストを除外する」というようなことをやります。

# やり方
`Configuration` -> `Test Kind`で`Pattern`を指定し、除外したい内容を正規表現で弾けばできます。
この正規表現は`Java`の`Pattern`で動いているので、正規表現の文法もそれに準じたものになります。
![スクリーンショット 2021-03-05 0.07.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/a1e68ba5-c8b9-b008-4268-e23a7b78d32a.png)
画像として貼っているのは、`foo`, `bar`という2種類のパッケージを除いて実行する正規表現です。

```
^(?!.*\.(foo|bar)\.).*
```

[ツールを用いて](https://www.debuggex.com/)可視化すると以下のようになります。
![スクリーンショット 2021-03-05 0.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/8fb35a64-9e2d-db4a-0793-56d46a0fcbc5.png)

# 参考にさせて頂いた内容
https://www.jetbrains.com/help/idea/run-debug-configuration-junit.html#configTab
Airtest + Poco を iOS で実行するのに引っかかったポイントまとめ

## はじめに
Airtest と Pcoo の説明は省きます
去年の CEDEC で発表があり話題になったツールですね
今回は iOS で Airtest と Poco を組み合わせた UIテストを行おうとした際に引っかかったポイントのまとめです
この内容は投稿時点でのポイントであり、数ヶ月後には参考にならない可能性がありますのでまずは公式の Issue を見ることをお勧めします

## 1. iOS-Target の セッションが作成されない
iOS で Airtest を実行するには Airtest 向けに改良した iOS-Target を端末にインストールする必要があります
プロジェクトURL : https://github.com/AirtestProject/iOS-Tagent

私の環境では初回のみ特に引っかかることなく iOS 端末でのテストを行えたのですが、それ以降繋がらない問題が発生しました
（繋がらないというのは AirtestIDE の Connect を押しても映像が映らないという意味です、ログをみる限り接続自体は出来ていました）
色々と調査をした結果、恐らくセッションが作成されていないことが問題であると判断し以下のコマンドを叩いてセッションを作成した結果 Connect を押して無事繋がることを確認できました。

```shell
curl --location --request POST ‘http://192.168.0.103:8100/session’ \
 --header ‘Content-Type: application/json’ \
 --data-raw ‘{“capabilities”:{}}’
```

iOS-Target を iOS 端末で実行している状態で `http://127.0.0.1:8100/status` へ接続すると以下のような画像の情報が表示されます
`sessionId` が `null` の場合はこの対応で解決しました
![スクリーンショット 2021-02-19 22.10.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153196/cb55cc47-d291-0a25-b71f-14732fc4dc54.png)

## 2. AirtestIDE `1.2.7` で `AttributeError: 'IOS' object has no attribute 'instruct_helper'` と表示される
恐らく Airtest のバグです
`1.2.6` ではこの問題は発生していないのを確認したので、`1.2.7` から `1.2.6` へバージョンを変えることをお勧めします
Issue は立っていました : https://github.com/AirtestProject/Airtest/issues/862

## 3. Landscape（横画面）でビルドすると Airtest が動作しない
これはかなり引っかかりました・・・
[こちらの方の記事](https://qiita.com/s_noza/items/f2cc1f398270d3572e5b)を見かけなければ更に沼にハマっていたかもしれません
修正を待ちましょう

## まとめ
書いてみると大したことなさそうな感じしますね・・・
あまり iOS 向けの記事を書いている方がいなかったのでどなたかの助けになれば幸いです
Javascriptのイテレーターについて

JavaScript学んでいる際にイテレーターについて出てきたのですが、いまいちイテレーターがどんなものかがイメージしにくかったので、調べてアウトプットしていこうと思います。

## イテレーターとは？

[wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF)さんから引用
>イテレータ（英語: iterator）とは、プログラミング言語において配列やそれに類似する集合的データ構造（コレクションあるいはコンテナ）の各要素に対する繰り返し処理の抽象化である。

[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)さんから引用
>JavaScript では、イテレーターはシーケンスおよび潜在的には終了時の戻り値を定義するオブジェクトです。

繰り返しの抽象化ということで、for文や、while文の元となっているものだと思います。
あんまりしっくりこないのですが、順々に処理をしていって、あるところまで到達したら終了するみたいな感じだと捉えました。


## イテレーターの書き方

[MDN イテレーターとジェネレーター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)を参考にしつつ、書き方をみてみると、

```js:iter.js
function makeIterator() {
    let i = 0;
    const iterator = {
        next: function() {
            if(i > 5){
                return {
                    done: true,
                }
            }else{
                return {
                    done: false,
                    value: i++
                }
            }
        }
    }
    return iterator;
}

const iter = makeIterator();
console.log(iter.next()) // {done: false, value: 0}
console.log(iter.next()) // {done: false, value: 1}
console.log(iter.next()) // {done: false, value: 2}
console.log(iter.next()) // {done: false, value: 3}
console.log(iter.next()) // {done: false, value: 4}
console.log(iter.next()) // {done: false, value: 5}
console.log(iter.next()) // {done: true}
console.log(iter.next()) // {done: true}
```

というような具合。

* イテレーターを作る関数(今回だと`makeIterator`)があって、その中にイテレーターというオブジェクトを用意する
* イテレーターはnextをという関数をもち、その関数はオブジェクトを返す。
* そのオブジェクトの中には`done`と`value`をもつ。
* `done`がfalseの時には更新処理をし、trueの時にはそれ以上の更新をしない（値を返さない）

こういったルールをもとに書かないとイテレーターにはならないらしい。

## 最後に

ちなみに、ジェネレーターというものを使えばもう少し楽にイテレーターを作れる。
イテレーターもジェネレーターも、反復可能オブジェクトの作成に利用される。

イテレーターがループ処理の基盤となるようなもので、普段は触れることがなかったが、だいぶ理解が深まったと思います。
Lightning Experience の Chatter ⇒ Chatter 環境のカスタマイズ

１．自分のプロファイルに投稿します。誰がこの投稿を表示できますか?
２．同僚のプロファイルに投稿します。誰がこの投稿を表示できますか?
３．たくさんのコメントと 2 つの添付ファイルがある投稿を共有しています。何が共有されますか?
４．誰かをフォローすると、どうなりますか?
５．アクセス権を持たないグループでメンションされると、メンションされた人は
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/cbe3b027-9e10-024d-e53d-4f64d8109960.png)
【Rails】Railsサーバーが起動してもlocalhost:3000で表示されなかった症状が、解決した件について【Ruby】

<h2>症状</h2>
rails sでサーバーを起動し、コンソール上では起動してそうな感じだが、locakhost:3000にアクセスしても全く反応しない事象が発生しました。


以下はターミナル

```
ubuntu:~/environment/hello_app (master) $ rails s
=> Booting Puma
=> Rails 6.0.3 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.6 (ruby 2.6.3-p62), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:8080
* Listening on tcp://[::1]:8080
Use Ctrl-C to stop
```

<b>実施したが解決しなかった対策</b>
・rails server起動しなおし
・adBlockerなどは無効化
・ブラウザの開き直し
・bundle install→updateのやり直し
・rails s -b 0.0.0.0→rails s -b $IP -p $PORT

<h2>解決方法</h2>

1.「preview」→「previewrunningapplication」で表示させた画面を閉じる
2.再度「previewrunningapplication」開きなおす
3.サーバーを起動下記画像の「Browser」の右側の■を押下

→別タブで「Yay! You’re on Rails!」の画面が開けるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/5e44d808-4e95-2162-4cb7-8d7f814ae819.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/53be88b0-2e4b-07ac-a3e9-ceaef39533a3.png)


<b>以下は成功時のターミナル</b>

```
ubuntu:~/environment/hello_app (master) $ rails s
=> Booting Puma
=> Rails 6.0.3 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.6 (ruby 2.6.3-p62), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:8080
* Listening on tcp://[::1]:8080
Use Ctrl-C to stop
Started GET "/" for 61.215.149.134 at 2021-03-04 14:18:46 +0000
Cannot render console from 61.215.149.134! Allowed networks: 127.0.0.0/127.255.255.255, ::1
   (2.7ms)  SELECT sqlite_version(*)
Processing by Rails::WelcomeController#index as HTML
  Rendering /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-6.0.3/lib/rails/templates/rails/welcome/index.html.erb
  Rendered /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-6.0.3/lib/rails/templates/rails/welcome/index.html.erb (Duration: 13.0ms | Allocations: 479)
Completed 200 OK in 64ms (Views: 27.3ms | ActiveRecord: 0.0ms | Allocations: 2758)


Started GET "/" for 61.215.149.134 at 2021-03-04 14:18:58 +0000
Cannot render console from 61.215.149.134! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by Rails::WelcomeController#index as HTML
  Rendering /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-6.0.3/lib/rails/templates/rails/welcome/index.html.erb
  Rendered /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-6.0.3/lib/rails/templates/rails/welcome/index.html.erb (Duration: 7.9ms | Allocations: 192)
Completed 200 OK in 12ms (Views: 10.8ms | ActiveRecord: 0.0ms | Allocations: 1165)
```
Power BI（クラウド）「月単位」集計グラフの注意点

##月ごとの集計は年をスルー
[先日作成した、月毎集計の折れ線グラフ](https://qiita.com/text_owleyes_0214/items/53048b7d8bef8bc5d75b)、**「ツールヒント」**を使うのが目的だったので触れませんでしたが、グラフとしては（振る舞いを認識していないと）意図しない集計となることがあります。

<img width="800" alt="月単位グラフ注意点1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e5eef106-e2b4-2c9b-a540-787fbd776a53.png">

例えば、前回配置した**「スライサー」**の期間を14カ月にします。
January（1月）、Feburary（2月）には、2020年と2021年の合算値がプロットされます。

<img width="800" alt="月単位グラフ注意点1_2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/b9f9e05b-1b21-cc29-eaf0-d53823c16d6c.png">

##集計を年ごとに分けます
年ごとに分けるための対処例として**「スライサー」**を使う手があります。

<img width="300" alt="月単位グラフ注意点2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e6f8c6dc-7727-4ff0-2fea-9dca427ea8d3.png">

**「スライサー」**アイコンをクリックすると、データが入っていない「枠」が表示されます。

<img width="700" alt="月単位グラフ注意点3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/5462ec77-8633-b8d2-3d9a-5af9185f2460.png">

右パネルから**「日付 Year」**を隣のフィールドにドラッグします。
（**「日付 Year」**や**「日付 Month」**は、日付型のフィールドを用意すると、自動で作成されるようです）

<img width="700" alt="月単位グラフ注意点4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/87a07c16-dab1-6b7f-5478-37e3e5f93970.png">

**「スライサー」**に「年」のデータが入ります。
このI/Fでは使いにくいので、**「一覧」**表示に切り替えます。
**「スライサー」**の枠の右隅の下向き矢印の先の部分だけの形状のアイコンをクリックし、**「一覧」**を選択します。

<img width="700" alt="月単位グラフ注意点5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/af3afe7f-a534-17fc-b8d3-c2bfa2d5ed89.png">

<img width="700" alt="月単位グラフ注意点6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/1d6e5afe-c167-b579-01df-7e2afee08902.png">

表示された**「2020」**をクリックすると、2020年のみ表示されます。

<img width="800" alt="月単位グラフ注意点7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/1faf47bf-85e0-70b5-1a5f-e4cd79e9ba84.png">

**「ツールヒント」**の説明のために作ったため、少々回りくどい方法での解説になってしまったかもしれません。
本来2020年から月ごとに2021年までの推移も表示したいところです。
デスクトップアプリケーションの**Power BI Desktop**だとその方法がわかるのですが、クラウド版ではわかりませんでした。

<img width="800" alt="月単位グラフ注意点8" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/21bb1835-a840-c88a-8e5d-aaac2fd16480.png">

作業の区切り区切りに忘れずに保存します。

**了**
ImportError: cannot import name 'PackagePath' from 'importlib_metadata' 対処備忘録

# なにが起きたか
pyinstallerでexeファイル化しようとしたときに

```
ImportError: cannot import name 'PackagePath' from 'importlib_metadata'
```

が出てきた。これの対処。

# エラーの意味
importlib_metadata から PackagePath がインポートできないよ。
とのこと。
・importlib_metadataはインストールされているか
・バージョンは最新か
このあたりを疑ってみた。

# 解決へ
```
$pip list
```
で一括表示させて、別件で悩んでるやつもインストールされているかついでに確認した。

```
importlib_metadata   0.0.0
```
入ってはいるけどバージョンが明らかに最新ではなさそうなのでアップデート。

```
$pip install -U importlib-metadata
>>>Successfully installed importlib-metadata-3.7.0 typing-extensions-3.7.4.3 zipp-3.4.0
```
無事アップデートできたようなのでexeファイル化に再挑戦。

# exe化
test.pyをtest.exeにしてみる。

```
$pyinstaller test.py
>>>132064 INFO: Building COLLECT COLLECT-00.toc completed successfully.
```
できた('ω')/
CSSで背景に画像を貼り付ける方法

今回は作成中のポートフォリオの背景が、
色をつけるだけでは寂しいので景色の画像を貼って見ました。
その時の貼る方法の備忘録を書いて行きます。
　　

##背景に画像を貼る

(例)

```
form__wrapper {
  background-image: url("sea.jpg");
  background-image: no-repeat;
  background-position: 50% 50%;
}
```

これで背景が変わりました。
`urlの中身は(貼りたい画像の名前を記入)`
**・**assetsのimagesファイルに画像を保存しておく必要がある。

**repeat**：背景画像を縦方向、横方向双方に繰り返し表示する（初期値）
**repeat-x**：背景画像を横方向に繰り返し表示する
**repeat-y**：背景画像を縦方向に繰り返し表示する
**no-repeat**：背景画像を繰り返さず1つだけ表示する
　　

marginを使うと背景の画像が微妙にズレていくので、
background-positionで調整してあげる。

　
　

こんなのもありました。↓↓
##background:

上記のプロパティーを使えば
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment

を、まとめて1行で指定するそうです。
めちゃくちゃ便利ですね。
最初からこれでもよかったってのが
結論でした。
そうだ、SQLの勉強をしよう25

#はじめに
以前投稿した、[そうだ、SQLを勉強しようⅫ
](https://qiita.com/TerToEer_sho/items/14ea788f5d29f8aa5523)で、そのときまでに学習していた命令文や句をまとめていました。
今回はその後学んだことをまとめておこうと思います。

---

|単語|意味|
|---|---|
|JOIN 〜 ON|テーブル結合|
|CREATE TABLE|テーブル作成|
|DROP TABLE|テーブル削除|
|DEFAULT|デフォルトの値指定|
|ALTER TABLE 〜 ADD|列の追加|
|ALTER TABLE 〜 DROP|列の削除|
|NOT NULL|NULLを入れない|
|UNIQUE|重複した値を入れない|
|CHECK|条件に合わない値を入れない|
|PRIMARY KEY|主キーに指定|
|REFERENCES|外部キーに指定|
|CREATE INDEX 〜 ON|インデックス作成|
|DROP INDEX|インデックス削除|
|BEGIN; 〜 COMMIT;|トランザクション|
|CREATE VIEW|ビュー作成|
|DROP VIEW|ビュー削除|
|AUTO_INCREMENT|自動連番|
|GRANT 〜 TO|権限付与
|REVOKE 〜 FROM|権限剥奪|

##最後に
やっぱり、これの単語カードが欲しい。（笑
VSCodeでsvelteファイルのインスタントビュワー拡張を作ってみた

##何を作ったのか
　VSCodeの拡張機能で、.svelteのファイルをブラウザに表示させる機能を作ってみました。「Svelte instant viewer」で公開しています。

##なぜ作ったのか
　VScode上で、svelteとbulma+scssの勉強をしているのですが、svelteのファイルを変更したときの変化を確認するのに、毎回コンパイル（トランスパイル？）するのも大変なので、素早く表示させてみるツールを作ってみました。（既にあったりして）

##注意
　この拡張機能は、HTMLの見た目を簡易に素早く出すことを目的としています。簡易の表示ですので、対象のファイルのみ表示するようにしており、そこで取り込んでいる別のコンポーネントは処理していませんし、スコープの処理やjavascriptの処理もしていないのでコンパイルした時とは異なるものになることをご承知ください。

##設定と動作
　.svelteのファイルを右クリックすると、メニューに「Svelte instant viewer」というの出てきますので、それを選択するとブラウザに表示されます。ただし以下の設定が必要です。

### Svelte-instant-view: Base File
　ブラウザに表示する基本のファイルです。デフォルトはsvelteのひな形を作った時の基本ファイル「public/index.html」です。このファイルに.svelteの内容を埋め込んで表示します。ローカルファイルを表示させますので、cssのソースはルート相対パスではなく、相対パスで記述してください。

###Svelte-instant-view: Browser
　表示させるブラウザを選択してください。chrome,firefox,edgeが選択できます。

###Svelte-instant-view: Disable Script
　基本ファイル内で実行したくないjavascriptを設定するとそのスクリプト参照を破棄します。ひな形の「public/index.html」に設定されている「build/bundle.js」をデフォルトに設定しています。これが有効だと「App.js」をコンパイルしたものが呼び出されて最初の.svelteファイルを取り込んでしまうので除外させています。

###Svelte-instant-view: Insert Tag Selector
　基本ファイルの埋め込む対象のタグを設定します。デフォルトはひな形と同じ「body」です。この値はセレクタとして検索して最初のエレメントのinnerHTMLに書き込みます。

##一時ファイルについて
　表示用のファイルを一時ファイルとして作成しています。基本ファイルのファイルの拡張子を除いた名前に「_tmpview.html」で表示用のファイルを、「_tmpview.css」でstyleシートを同じフォルダに作って表示させているので、初期設定だとpublicフォルダに余計なファイルができてしまいます。実行後、10秒で消すようにしていますので問題ないと思いますが、注意してください。

##スタイルシートについて
　一時ファイルについてに書きましたが、.svelteのスタイルシートも取り込んでいます。lang=sassやlang=scssの場合にもcssに変換して取り込むようにしていますが、スコープの処理はしていません。

##最後に
　拡張機能を作ってみたので、茶々っと作ってみました。面白そうなら使ってみてください。バグとか要望とかあれば対応を検討します。リポジトリも公開しているので、勝手にいじってくれてもいいです。

##追記（2021/3/18）
　ダメですねー、使えそうで使えなかった。やっぱり本気でこの手のツールを作ろうと思うと本格的にsvelteの構造解析できないと...。ASTとかやらないとむずかしい。VSCodeの拡張機能を作ってみるサンプルということでソースは置いときます。orz
TypeScript でインチネジとミリネジを混ぜないようにする方法

TypeScript は既存の型に別名をつけることができます。ただし通常の方法で作ると、ただ別名をつけるだけなので、別名同士は区別されません。言語によってはこのような機能を **弱い typedef** や **alias** などと呼びます。

```ts
// 弱い typedef
type Inch = number;
type Millimeter = number;

const screw: Inch = 10;
const hole: Millimeter = screw; // 型が違うのにコンパイルが通ってしまう
```

これに対し、このように書くと別名同士区別される型を作ることができます。言語によってはこのような機能を **強い typedef** などと呼びます。

```ts
// 強い typedef
type Inch = number & { _Inch: never };
type Millimeter = number & { _Millimeter: never };

const screw: Inch = 10 as Inch;
const hole: Millimeter = screw; // エラー！
const hole: Millimeter = screw as Millimeter; // これもエラー！
const hole: Millimeter = screw as number as Millimeter; // ここまでするとやっと通せる
```
Power AutomateでSharePoint上のExcelを毎月定期的にコピーする

# はじめに

SharePoint上にあるExcelを毎月コピーしたい、というシナリオを考えてみました。

元のファイルが「Book.xlsx」で、毎月サブフォルダに「Book-2021-03-01.xlsx」という名前でコピーするケースを想定してみました。

# 大事な前置き：ここに書いてある内容を実施する前に

Excelを月ごとに分けてコピーして利用する、というシナリオですが、のちのデータの活用を考えた場合にはあまり得策ではない場合もあります。

例えば、その月時点の社員の時給のスナップショットを取っておきたい、というシナリオを仮定します。

Book_2021-02-01.xlsxに2021年2月時点の時給情報が載っているとします。

| 社員番号 | 時給 |
|:-------:|:----:|
| 1001    | 1000 |
| 1002    | 900  |
| 1003    | 1100 |

最新（2021年3月）の時給一覧はBook.xlsxに載っています。

| 社員番号 | 時給 |
|:-------:|:----:|
| 1001    | 1100 |
| 1002    | 950  |
| 1003    | 1100 |

もしこのような情報を扱うならば、列を追加して以下のような一つのExcelで管理することも出来るかと思います。

| 社員番号 | 時給 | 給与設定日 |
|:-------:|:----:|:-------:|
| 1001    | 1100 | 2021-03 |
| 1002    | 950  | 2021-03 |
| 1003    | 1100 | 2021-03 |
| 1001    | 1000 | 2021-02 |
| 1002    | 900  | 2021-02 |
| 1003    | 1100 | 2021-02 |

一つのデータにまとめておけばフィルタなどで最新のデータでも過去のデータでも取り出せますし、変化を追うことも出来ます。
ファイルを分けてしまうと、そういったことが難しくなってしまうのでご注意ください。

では、以下本題となります。

# データの準備

SharePointのドキュメントライブラリに「Book.xlsx」と「sub」フォルダがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449038/0082a74d-e477-2777-6753-bd6b47e9cba5.png)

subフォルダの中身は現時点では空っぽですが、毎月のBook.xlsxのコピーをこのフォルダに保存していきます。

# Power Automate 全体像

こんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449038/b272c8bd-bb3c-e918-9584-83071ecbab64.png)

# 解説

## トリガー

毎月実行なので、繰り返しで一か月（毎月1日10時）にしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449038/fe6f70ba-12d6-076b-3fe1-3f51fc1074cd.png)

## 時間の取得

ファイル名の規則として2021-03-01のようにyyyy-MM-ddの形式でサフィックスをつけたいので、そのために実行時の日時を取得しておきます。

タイムゾーン変換で現在の時刻を日本時間に変換するついでに、yyyy-MM-dd形式にしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449038/42bf7822-a863-d462-e9f2-1b979ef5b6fa.png)

（※ 慣れてる人は文字列変数で式使ってformatdatetime(utcnow(),'yyyy-MM-dd')とかでOKです）

## ファイルのコピー

SharePointのアクションには「ファイルのコピー」というものもあるのですが、同じ名前でコピーする場合は使えますが今回は別名にしたいので使いません。代わりに、ファイルコンテンツの取得を行い、subフォルダに「Book-2021-03-01.xlsx」のような名前で保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449038/4577f905-61f3-816a-f398-40d33a1ff45e.png)

# 結果確認

こんな感じでコピーされました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449038/54630411-7c64-9072-3a0a-d302316f3f4b.png)


# 終わりに

今回も質問受けてやってみた系になります。

技術的にはできるのですが、まずは使わなくて済む運用を考えてもらうことを個人的にはお勧めします。
Macでの「Sourcetree」のインストールまとめ

ソース管理をするために「Sourcetree」をインストールしました。
誰かの役に立てればと思い、残しておきます。
もしかすると順番が前後している箇所があるかもしれません。ご了承ください。

環境：macOS Catalia/バージョン 10.15.7

**1.以下のサイトにアクセスする。「無料ダウンロード」をクリックする。**
「Mac OS X向けダウンロード」をクリックするのでもダウンロード可能。
https://www.atlassian.com/ja/software/sourcetree
![Sourcetree_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/ac324c17-a2dc-49fd-08d6-764497d476d1.png)

**2.規約に同意してダウンロードを行う。**
![Sourcetree_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/60639713-82d0-4ce3-3334-fc93b8ec2f50.png)

**3.解凍すると以下の「Sourcetree.app」が出来上がるのでダブルクリックで開く。**
![Sourcetree_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/9a17afd3-87e0-ad6a-db82-340b7808da38.png)

**4.「Sourcetree.app」をダブルクリック後、以下の画面が出てくるので「開く」を選択する。**
![Sourcetree_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/aec5e0b1-e4c7-8455-9793-57d939e500af.png)

**5.「開く」をクリックすると以下の画面が出る。「Move to Apprications Folder」を選択する。**
![Sourcetree_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/4d2076dd-36eb-1c2c-5984-f9c6c24aab2a.png)

**6.完了すると、インストーラが出現。アカウントがない場合はアカウント作成を行う。**
Bitbucketのアカウントを持っていない場合はアカウントの作成を行う。（赤枠部分をクリックする。）
アカウントを作成後、アンケートがあるが、回答せず、スキップすることも可能。
アカウントを持っている場合は青枠部分をクリックする。
![Sourcetree_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/e0c1e719-c6d1-d1f5-b10e-66f8428ce5ec.png)
6.1.赤枠部分をクリックした場合、ウェブサイトに飛び、アカウント作成を促される。
![Sourcetree_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/0d296c84-2833-3bd6-1a9b-abd43a326381.png)

**7.元の画面に戻って、「Bitbucketクラウド」を選択する。**

![Sourcetree_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/441f13a0-7abd-464a-5fc0-af0afd889436.png)

**8.ログイン画面に遷移する。**
![Sourcetree_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/95e4a322-21e5-6817-f558-0bd3f075f6dc.png)
**９.ログイン後、以下の画面に遷移するので、画面内の「アクセスを許可する」をクリックする。**
![Sourcetree_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/4e35f6a0-e9b5-5f9f-7483-15953385edaa.png)
クリックすると「Sourcetreeを開きますか？」と出てくるので「Sourcetreeを開く」をクリックする。
※私は1つ目にダウンロードしたものがうまく動かなくなってしまい、再度ダウンロードした関係で「Sourcetree２〜」になっています。余談ですが、１つ目にダウンロードしたインストーラを終了したくてもできなかったので強制終了しました。再度、開くと、うまく開くことができました。
強制終了方法はこちら→https://support.apple.com/ja-jp/HT201276
![Sourcetree_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/64dab711-b047-a552-fc8b-3755e05d9837.png)

**9.インストーラに戻り、「設定」を特に設定せずに右下の「完了」をクリックする。**
![Sourcetree_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/3632158c-7eca-aea1-b1fd-18f56eb77de5.png)

**10.インストール完了！！**
![Sourcetree_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659954/9d2d6ac9-2746-6493-6680-6e07c0c284ac.png)
私はこの画面が出ました！皆さん、お疲れ様でした！今回はここまでとします:wave_tone1:
LaravelのEloquentとCollection

##備忘録
主題の通り実務に入ってヒイヒイ言ってるクソ雑魚エンジニアの備忘録です。
では、

##Eloquent
Laravelに備わっているデータベースを簡単に扱える機能。
これがあることで生のSQLを書かなくてもデータを追加したり参照したり
様々なことが可能になる。すごい。

##Collection
Collectionとはリスト形式でデータを格納できるラッパー
のことらしい。
配列と何が違うの！と思うところ。
このCollectionめっちゃ便利

Collectionで使えるメソッド↓
https://readouble.com/laravel/6.x/ja/collections.html

Collectionは最初からwhereやsortBy,groupByなど様々なメソッドが標準で利用できて、
ソート、絞り込み、グルーピング、繰り返し、もうほんとになんでもできる

##本題
**EloquentのメソッドとCollectionのメソッド紛らわしくて混乱するわ！！**

転職して初めて基幹システムの開発に放り込まれて詰まったところ。ほんこれ。
- get()
- where()
- groupBy()
- orderBy()
- all()
- first()
上のはほんの一部だがこれ全部EloquentにもCollectionにもある。

メソッドの意味もほとんど変わらないんだけど
微妙に扱いが変わってくるから注意が必要。

##結論
EloquentとCollectionの使い方は記事が腐るほどあってすぐ慣れたので
要点をかいつまむと

**モデルからgetやallで複数件データを取り出すと取り出したデータはCollection型となって返る**
あらかじめ必要なレコードがわかっている場合はfirst()
まとめてデータを取得してそれぞれに処理を行いたい場合は
getやallで取得してforeachなどで都度取り出してデータ処理をかけばいい。

　　　　　　　／　DBインスタンス
Collection　ー　DBインスタンス
　　　　　　　＼　DBインスタンス

↑こんなイメージ

もうこれは使いまくって慣れるのが一番楽です。（脳筋）
それではまた。
React Native CLI環境構築手順

react nativeの立ち上げを行います。
まずexpo-cliをインストールするのですが、

```
npm install expo-cli --global
```
インストールしているのになぜかexpo not foundが表示される


```
export PATH=$PATH:~/.npm-global/bin

source ~/.bash_profile
```

ここで、だいぶ時間を食ってしまいましたが、pathが通っていなかったのが問題だったようです。
上記のコマンドを打てば解決しました。

```
expo init react-temp

```

expoを立ち上げます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429828/f5c08d80-bd39-7eac-5492-fe09be55d146.png)

ここではblankを選択します
続いて

```
cd react-temp
yarn start
```
で環境構築完了です
Ubuntu に Flutter 2 をインストール

Ubuntu に Flutter 2 をインストールします。

まずはすでにインストールされている場合は削除を行ってからインストールを行います。

````bash
sudo snap remove flutter ;
sudo snap install flutter --classic ;
````

次に開発環境のチェックプログラムの実行

````bash
flutter doctor ;
````

おそらく Android の SDK が無いと言われるのでリンクをクリックしてダウンロードします。

[Download Android Studio and SDK tools  |  Android Developers ](https://developer.android.com/studio/index.html)

ダウンロードをしたファイルを解凍して /usr/local/ にコピー後、インストールプログラムを起動します。

````bash
tar xvf android-studio-ide-*-linux.tar.gz ;
sudo cp -r android-studio/ /usr/local/ ;
/usr/local/android-studio/bin/studio.sh ;
````

Android のライセンスに同意をして、再び開発環境のチェックを行います。

````bash
flutter doctor --android-licenses ;
flutter doctor ;
flutter --version ;
````
もしかしたら vscode のインストールも促されるかもしれません。

サンプルプロジェクトの作成

````bash
cd ;
mkdir flutter_sample ;
cd flutter_sample/ ;
flutter create . ;
flutter run  ;
````
こんな感じで表示されるかと思います。
![Screenshot from 2021-03-04 23-08-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115935/46c7e07d-4d34-8986-6566-680e1fd0cc56.png)
私が Flutter を触ったのが初めてなのでよく分かりませんが、おそらく vscode で開発をしていくんだと思います。
####参考リンク
- [Linux install - Flutter ](https://flutter.dev/docs/get-started/install/linux)
- [[Flutter] デスクトップ 環境構築 for Linux - Qiita ](https://qiita.com/kurun_pan/items/47c25a4b2425725bc199)
Rina-chan Board Viewer公式？プリセット

#他の記事



#**プリセット一覧表**

2021年3月4日　　ver1.1公開

![A7A2B627-0778-45CC-B42D-76088AF9A872.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/967492/ee913244-ee2f-ef30-ec53-d55506d5834d.png)
![E1B721AE-5ADF-4F11-BE03-D61F45B801DB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/967492/108cb4c3-55a6-1df2-60a0-2ccf2cc6b629.png)
ShinyでPlotlyのevent_data関数を使う方法

R言語やShinyアプリで、グラフを表示したい場合は、まず、plotlyのパッケージを下記のように読み込みます。

```
library(plotly)
```

そして、グラフ表示したいデータ(仮にgraphDataとします。)を下記のように記し、実行すると、グラフが描かれます。

```
plot_ly(graphData, source = “A”)
```

描かれたグラフをクリックした情報を取得したい場合は、下記のように記し、実行します。

```
event_data(“plotly_click”, source = “A”)
```

上記を実行すると、クリック箇所のx座標、y座標、クリックしたグラフが描画された順番(curveNumber)、クリックしたグラフ上のcurveNumber上でのグラフが描画された順番(pointNumber)が取得できます。
ijenims record 2021.03.04

# Topics

> Panasonic号のanaconda3が不調。しばらく動かしていなかったし原因不明。Jupyter notebookは使えるがJupyter Labが使えない

## 学習記録

- SIGNATE pandas入門道場：94%クリア。あとは最終課題を残すのみ
- Jupyter Lab：上記pandas入門道場のカリキュラムを模写


## その他

- 3/2に「Pythonコードレシピ集 スグに使えるテクニック302」黒住敬之著（技術評論社）を購入
- 3/3、「その数学が戦略を決める」を読了
【GitHub】 プライベートリポジトリの草は他人からどう見えるのか

はじめに
---
最近初めてプライベートリポジトリを作成しました。
その際、プライベートリポジトリとは自分しか見る事は出来ないが、生やした草は他人から見た時にどうなっているのだろうか、と思ったことがありました。
今回は、そんな小話をテーマに記事を投稿させていただきます。

（参考）
・GitHubの公式ドキュメントより
https://docs.github.com/ja/github/setting-up-and-managing-your-github-profile/publicizing-or-hiding-your-private-contributions-on-your-profile
<br>

プライベートリポジトリの草は他人から見えるのか
---
結果は、``見えません!``
...正確にいうと、デフォルトでは見えませんが、設定を変更すると他人からも見えるようになります。
以下で設定の変更について書かせていただきます。
<br>

設定の変更方法
---
①GitHubの画面のヘッダー右上にある、自身のアイコンマークをクリックする。

②Your profileをクリックする。

③Contribution setting▼をクリックする。(参考画像あり)

④Private contributionsをクリックする。(左にチェックが付きます)
※ チェックが外れている状態は、非公開になります。
4ヶ月ほど前に学習を始めたばかりなので、草が全て隠れてしまい、ポツンと1つだけ表示されていて少しお恥ずかしいです。。。

以上の作業にて、プライベートリポジトリの内容も他人からも見れるように変わりました！
草が生えていることと、その草の件数だけが表示され、それ以上の詳細は表示されないようになっているので安心です。

<img width="900px" alt"[スクリーンショット 2021-03-04 22.28.17.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/2f55a32d-fe67-1bb1-5a05-5efe2fd4c527.png">
<br>

終わり
---
今回は以上になります。
せっかくなので学習を継続している記録を見えるように残しておきたいという、筆者の小さな見栄から生まれた記事でした！笑
同じように疑問を感じている方の参考になればと思います。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
ソフトウェアは書かれる回数より読まれる回数の方が多い

# 本書概要
名著として有名な
[レガシーコードからの脱却
――ソフトウェアの寿命を延ばし価値を高める9つのプラクティス](https://www.oreilly.co.jp/books/9784873118864/ "レガシーコードからの脱却
――ソフトウェアの寿命を延ばし価値を高める9つのプラクティス")
を読んだので，内容をまとめる．
本書は2部構成になっており，前半はレガシーコードの説明とコストについて，後半は”良い”ソフトウェアを書くための9つのプラクティスについての説明がなされる．
レガシーコードとは

* バグを多く含む
* 壊れやすい
* テストがない，あるいはテスト不可能
* 可読性が低い

といった特徴のコードである．
そしてレガシーコードで作られたソフトウェアの保守・拡張には多大な費用と時間と労力が必要となる．
よって，レガシーコードを書くのをやめよう，というのが前半である．
後半はレガシーコードではない，”良い”コードを書くためのプラクティス，つまりセオリー的なものの紹介だが，具体的な方法論はおまけ程度である．
メインは「なぜ」良くないのか，「なぜ」そうするのかという「なぜ」の部分だ．
「なぜ」ウォーターフォールからレガシーコードが生まれやすく，「なぜ」アジャイルではそうではないのか．
これをしろ，ではなくその背景にある原則についての本だから，多読に耐えうる名著といわれるのだろう．
話が逸れたが，後半のなかで特に強調されていたメッセージを抜粋すると，
**テストを先に書こう**
である．
いままでテストをコードを書き終えた後に作成していた人，あるいはほとんどテストを書いたことのない人も本書を読めば，どうしていままで先にテストを書いていなかったのだろうかと思うようになるはずである．

# 小さなバッチで作る
そもそもなぜウォーターフォール開発によって生まれたレガシーコードはバグまみれで，リリース直前にデバッグ作業に追われることになるのか．
それは個々のコードを最後の最後に統合し，テストするからである．
誰もその瞬間までソフトウェアが動くかどうか分からない．
そうならないよう小さなバッチでソフトウェアを作るべきなのである．
すなわち短いスパンで統合を行い，動くソフトウェアを開発し続けるのである．
そのためには統合する前に書いたコードが動くこと確認する必要がある．
**先にテストを書こう**．

# CLEANコードを書こう
CLEANコードとは
Cohesive：凝集性があり，各クラスが単機能
Loosely coupled：疎結合
Encapsulated：カプセル化されており，やろうとしていることからやり方が切り離されている
Assertive：メソッドを配置する場所は依存データがある場所であるという断定性がある
Nonredundant：意図しない冗長さがない
コードのことである．
著者はCLEANコードが"良い"コードであり，保守性の高いソフトウェアへの近道であるとしている．
そしてCLEANコードとはすなわちテスト可能なコードだ．
ふるまいの単位で分割され，単一の理由で失敗するユニットテストでテスト可能なコード．
逆に言うと先にテストを書き，のちにテストに合格するコードを書けば，それはテスト可能なコード，すなわちCLEANコードということになる．
**先にテストを書こう**．

# テストでふるまいを明示する
本記事のタイトルにもしたのだが**ソフトウェアは書かれる回数より読まれる回数の方が多い**そうだ．
コードは書いて終わりではない．
ソフトウェアは必ず変更が必要になる．
自分が書いたコードを変更するのは，数か月後の自分かもしれないし，チームの他の人かもしれない．
いずれにしろコードとドキュメントを行き来しながら，コードを壊さないように恐る恐る改変を加えるのは大変な労力だろう．
しかし，ユニットテストがあればコードのふるまいが把握しやすく，かつどこが動いていてどこが動いていないのかも一目でわかる．
これもテストを先に書き，それに合格するだけの最小のコードを書くからこそ，カバレッジ100％が達成できテストが生きた仕様書になるのである．
**先にテストを書こう**．


### 以下，読書メモ
既存の多くのコードは拡張性に乏しく、保守にも多大なコストを要する
要件を最初に全て書き出し、それらをコードに落とし込み、最後に統合するという開発手法では、そうならざるを得ない
要件（具象）からスタートすると、部分最適化された変更困難なものになる
そこでそのソフトウェアあるいは機能を、誰が何のために使うのかというストーリー（抽象）を起点として対話的に開発を進める
細かいやり方は開発者に委ねることで開発者の裁量が広がり柔軟で保守性に優れた製品になる
その際、開発者は全員共通の原則とプラクティスを持っていなければならない
原則とは目的、プラクティスとは手段である
プラクティス1 やり方より、先に目的・理由・だれのためかを伝える
ストーリーから明確な受け入れ基準を設けて開発に取り組むことで作り過ぎ、作り込み過ぎを防ぐことができる
プラクティス2 小さなバッチで作る
機能、タスクを適切な大きさまで細分化し、作る・統合・テストのサイクルを小さくする
これには機能をカプセル化できる、バグを混入した瞬間に見つけ潰すことができるというメリットがある
プラクティス3 継続的にデプロイ可能にする
継続的インテグレーションはプロジェクトの心臓の鼓動である
ビルドサーバーを用意し、新しいコードが追加されたら即時自動でシステム全体をリビルド・テストししフィードバックを返す
コードだけでなく関連する全てをバージョン管理しておくことも、フィードバックをバグ修正に活かすために必要である
プラクティス4 協力しあう
ペアプログラミングかそれに準じる協働作業によって開発することで、問題意識・目標水準・コーディングルールがチームメンバーで共有されシステムの保守性は格段に向上する
プラクティス5 CLEANコードを作る
高品質なコードは、各クラスが単機能であり（凝集性:Cohesive）、疎結合であり（Loosely coupled）、やろうとしていることからやり方が切り離されており（カプセル化:Encapsulated）、メソッドを配置する場所は依存データがある場所であり（断定的:Assertive）、意図しない冗長さがない（非冗長:Nonredundant）
プラクティス6 まずテストを書く
まずテストを書いてから，実装を書く
ゆえにテストはまず失敗してから，合格するがそれでいい
テストが失敗するのを確認するのはテストのテストであり，先にテストを書くことで，プログラマはテスト可能な，テストをパスするのに十分なコードだけを書くことができる
プラクティス7 テストでふるまいを明示する
ユニットテストはふるまいの単位で書く
そしてテストは単一の既知の理由で失敗するようにする
それによりテストは生きた仕様書になり，リファクタリング時のセーフティネットになる
プラクティス8 設計は最後に行う
”ソフトウェアは書かれる回数より読まれる回数の方が多い”
プラクティス9 レガシーコードをリファクタリングする
リファクタリングの際もテストファースト
機能追加の際もテストファースト
既存コードに対するテストを作り，テストをパスするように機能追加の準備をする
追加コードのテストを作り，実装を書く
意外と便利！？認証コードでよく使う一文字ずつ入力するinputは「vue-fake-input」で楽々実装！！

FirebaseでSMS認証を行っているときのこと。

認証コードって一文字ずつ入力するのをよく見かけたのような。。。

一から実装すると中々骨のある作業だと思い、コードは出来るだけ書きたくないので調べているとなんとお探しのものがあった！

その名も「vue-fake-input」

[こちら](https://www.kabanoki.net/5193/)の記事にやり方はすべて書いてあります。

ぜひ学習の参考に

Thank you for reading
bundler: not executable: bin/railsエラーがwheneverでパッチ処理しようとして出た時の対処法

wheneverを用いたパッチ処理の練習中のエラー。

```rb:log/cron.log
bundler: not executable: bin/rails
bundler: not executable: bin/rails
bundler: not executable: bin/rails
･･･続く
```

と同じエラーが続き、超初心者につきよくわからず悩んで途方に暮れていた時。。。

<h3>解決方法を見つけました！！！</h3>

参考：https://tebasaki.xyz/2019/01/19/bin-rails%E3%81%8C%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E6%99%82%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95/

```rb:ターミナル
$ bundle exec rake app:update:bin
```
をしてひたすらエンターエンターエンター
で解決しました！！！やった！！！！
API ドキュメント環境構築（aglio）

# 概要
シンプルにドキュメント生成環境を作るだけです。

# 前提環境
node
yarn

# 構築
yarn init
yarn add aglio


## 設計サンプル

API.md

```
FORMAT: 1A

<!-- include(SAMPLE.md) -->
<!-- include(DATA.md) -->
```

SAMPLE.md

```
# Group TEST

## register [POST /register/:id]
- 情報を更新する

+ Request (application/json)
    + Headers
    
            Authorization: token
            
+ Parameters
    + id: `id` (string, required)
    
+ Attributes (object)
    + name (string, required) taro
    + age (number, required) 30
    
+ Response 200 (application/json; charset=utf-8)
    + Attributes (User)
        + id (string)
        + name (string)
        + age (string)
```

DATA.md

```
 Data

## User (object)

+ id (string)
+ name (string)
+ age (number)
```


# 生成
```
aglio -i API.md -o output.html
or
aglio --theme-variables slate -i API.md -o output.html
```
など


# 参考
https://github.com/danielgtaylor/aglio
CRCをMacにインストールする

#背景
- Macが新しくなったのでローカルにOpenShiftが欲しかった
- シングルノードOpenShiftがCRCになったので試したかった



#参考
https://access.redhat.com/documentation/en-us/red_hat_codeready_containers/1.22/html-single/getting_started_guide/index#minimum-system-requirements-hardware_gsg


#手順
- ファイルダウンロード
- ファイル解凍
- PATH環境変数の場所に移動（例：/usr/local/bin）
- 設定のセキュリティでcrcの動作を許可
- crc setup
- crc start
- ちょっとまつ（2分ぐらい立たないとクラスターにアクセスできない様子）
- crc oc-env
- oc login
MLAPIでOculus Quest2のマルチプレイ ③実機でテストするまで

# レポジトリのリンク
https://github.com/TomohiroHibino600/TuneVisualizerNetwork

# シリーズ目次
[①プロジェクトを実装するまで](https://qiita.com/Hibiro22/items/d97b203dfaef734ff299 "①プロジェクトを実装するまで")
[②GCPにサーバー用ビルドをアップ・実行する](https://qiita.com/Hibiro22/items/b1a701d1f8b0b490953d "②GCPにサーバー用ビルドをアップ・実行する")
(今ここ→)[③実機でテストするまで](https://qiita.com/Hibiro22/items/e2313215b6e4bad1cfef "③実機でテストするまで")

# 開発環境
Windows10
Unity(AndroidモジュールとLinuxモジュールを開発に使った)
Quest2, RiftS(2機あれば何でも大丈夫です)

--------------------------------------
# 対象読者と本記事の目的
ネットワークプレイでOculusの実機テストをしたい人
↓
こんな工夫を思いついたので、ちゃちですが聞いて頂きたいです
実装結果の動画も貼ります。

# テスト方法
OculusQuest2 →　iPhoneでテザリング。楽天回線1年無料で無制限なのとても助かっております。
OculusRiftS →　光回線を繋げたPCに繋げる

こうすることで、自宅にいながら異なるネットワークからアクセスできます。楽天回線がミソです。確か1年無料なのは2021年4月までの申し込みに限定されていました。以降は2980円/月だとか。

接続先のアドレスはシリーズ②の記事で取得したGCPのVMの外部IPアドレスで、ポート番号は7777で繋がりました。

# テスト結果
https://www.youtube.com/watch?v=Nul-C4DowoE

# シリーズ目次
[①プロジェクトを実装するまで](https://qiita.com/Hibiro22/items/d97b203dfaef734ff299 "①プロジェクトを実装するまで")
[②GCPにサーバー用ビルドをアップ・実行する](https://qiita.com/Hibiro22/items/b1a701d1f8b0b490953d "②GCPにサーバー用ビルドをアップ・実行する")
(今ここ→)[③実機でテストするまで](https://qiita.com/Hibiro22/items/e2313215b6e4bad1cfef "③実機でテストするまで")
django-allauthでログイン画面やユーザー登録画面の見た目(UI)を美しくする方法

# やりたいこと
・django-allauthでは機能提供だけで見た目を整えられていないのでUIを整えたい

# 方法
・簡単にやりたいためBootstrapを導入する。

## bootstrap4の導入

```
$ pip install django-bootstrap4
```

settings.py の INSTALLED_APPS に 'bootstrap4' を追加します。

## django-allauthのテンプレートの編集

まず、django-allauth公式のGithubを`git clone`します。

[コチラからダウンロード](https://github.com/pennersr/django-allauth/tree/master/allauth/templates)

次に、django-allauthのテンプレートフォルダの中身を自分のプロジェクトのテンプレートフォルダにコピーします。(accountフォルダの中にlogin.htmlやlogout.htmlが入っているのが確認できます。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450257/f340eb01-e90e-653a-8675-0d0980d7859c.png)

ユーザー登録時に使われるsignup.htmlの見た目を変えたければformタグの中身を以下のように設定します。

```templates/accout/signup.html

{% extends "base.html" %} # ここを変更(元は'account/base.html')

{% load i18n %}
{% load bootstrap4 %} # この行を追加
{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
<h1>{% trans "Sign Up" %}</h1>

<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>

<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
  {% bootstrap_form form layout='horizontal' %} #ここを変更 (元は{{ form.as_p }})
  {% if redirect_field_value %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  <button type="submit">{% trans "Sign Up" %} &raquo;</button>
</form>

{% endblock %}
```

# 完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450257/7ab66509-30ca-5eb3-9ab6-7ed363d76a5a.png)

だいぶましな見た目になりました。まだまだ詰めるところがありますが、後はbootstrapを使えばすぐにできます。login.htmlやlogout.htmlも同じ要領で見た目を整えられます。
【DDD】わかる！ドメイン駆動設計 ～もちこちゃんの大冒険～【第2章】


# 前回
[【DDD】わかる！ドメイン駆動設計 ～もちこちゃんの大冒険～【第１章】](https://qiita.com/MegaChikoritaX/items/b5fe5319c841e86d6984)

# 第2章 ユビキタス言語って何？
## 2.1 ユビキタス言語とは
**ユビキタス言語** : ドメインエキスパートや、ソフトウェア開発者を含めたチーム全体で作りあげる共通言語のこと

## 2.2 ユビキタス言語を見つけるためには
以下の用語やフレーズを観察して見つけていく。

- ドメインエキスパートが使用している
- 業務のゴール(ユースケースやシナリオと呼ぶこともある)を反映している
- 既存のドキュメントを取りまとめている

すでにソフトウェアが存在し、ドキュメントやチームメンバー間で違う場合は、議論が必要

## 2.3 変化し続けるユビキタス言語
**ユビキタス言語は日々変化するため**、用語集にしようとするのは現実的ではない。
それを表すコード上のモデルにコメントを書く方が現実的

## 2.4 ユビキタス言語の適用範囲
適用範囲は、チーム内での会話・ドキュメント・ソースコード。適用させるのは大変だが、用語をを表すもの・概念の理解が全員に共通であるため、同じものをを表す別の単語が存在しなくなり、効果は絶大となる。 

## 2.5 ユビキタス言語の確立
ドメインモデル(ドメインを反映したモデル)はユビキタス言語で構成される。そのため、**実装におけるクラス名やメソッド名はユビキタス言語になっていなければならない。**

## 2.6 ユビキタス言語の確立
どのようにユビキタス言語を見つけるか？
<dl>
  <dt>1. 現在のドキュメントを調べ、ユビキタス言語の候補になりそうなもの・問題がありそうなもの(以下)をピックアップする</dt>
    <dd>同じものを表す用語が複数ある。</dd>
    <dd>概念はあるのに名前がない。</dd>
    <dd>ビジュアルはあるのに名前がない。</dd>
  <dt>2. ドメインエキスパートの話す言葉を観察し、用語やフレーズをピックアップする</dt>
  <dt>3. ピックアップした用語やフレーズをチームで議論し、ユビキタス言語として確立する</dt>
    <dd>単語だけではなく、振る舞い（登録する・表示するなど）にも注目する</dd>
  <dt>4. 名前のない概念や曖昧な概念ははっきりさせ、名前をつけてユビキタス言語として確立する</dt>
</dl>

# Next
WIP
[Drupal] バックエンドでViewsの結果を取得する

Viewsは通常ディスプレイ（ページ、ブロック、JSON、CSVなど）を通して結果を取得しますが、プログラムで取得することも可能です。

## サンプルコード

```php

use Drupal\views\Views;

// コンテンツ一覧のビューを取得.
$view = Views::getView('MY_VIEW_ID');

// ページディスプレイをセット.
$view->setDisplay('MY_DISPLAY_ID');

// 外部設置フィルターの値をセット.
$view->setExposedInput([
  'MY_KEY' => 'test',
]);

// ビューを実行.
$view->execute();

// 結果を取得.
$results = $view->result;
```

`MY_VIEW_ID`などの引数は対象のビューのものを使用する必要があります。ちょっとわかりづらいかもしれませんが、それぞれ以下の方法で確認できます。

- `MY_VIEW_ID`: **ビューのシステム内部名称**。`/admin/structure/views`で確認できる
- `MY_DISPLAY_ID`: **ディスプレイの内部名称**。ビューの編集画面で該当のディスプレイを表示するとURLの最後に表示される。コンテンツ一覧の場合、編集画面のURLは`/admin/structure/views/view/content/edit/page_1`なのでディスプレイの内部名称は`page_1`
- `MY_KEY`: 該当のフィルターの設定画面の**フィルターの識別子**

![title_key.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/3eab8162-baad-90d6-1f39-461551ed8f95.png)


## 参考

https://drupal.stackexchange.com/questions/280763/programmatically-get-the-results-of-a-view

https://www.drupal.org/forum/support/module-development-and-code-questions/2018-09-17/programmatically-set-exposed-input
MySQLエラー 

# エラー

/var/log/mysql/error.log

```
[Warning] [MY-010139] [Server] Changed limits: max_open_files: 1024 (requested 8161)
[Warning] [MY-010142] [Server] Changed limits: table_open_cache: 431 (requested 4000)
[Warning] [MY-010091] [Server] Can't create test file /var/lib/mysql/mysqld_tmp_file_case_insensitive_test.lower-test
[System] [MY-010116] [Server] /usr/sbin/mysqld (mysqld 8.0.19) starting as process 18977
[Warning] [MY-010091] [Server] Can't create test file /var/lib/mysql/mysqld_tmp_file_case_insensitive_test.lower-test
[Warning] [MY-010159] [Server] Setting lower_case_table_names=2 because file system for /var/lib/mysql/ is case insensitive
[ERROR] [MY-010846] [Server] MYSQL_BIN_LOG::open_purge_index_file failed to open register file.
[ERROR] [MY-010817] [Server] MYSQL_BIN_LOG::open_index_file failed to sync the index file.
[ERROR] [MY-010119] [Server] Aborting
[System] [MY-010910] [Server] /usr/sbin/mysqld: Shutdown complete (mysqld 8.0.19)  MySQL Community Server - GPL.
mysqld_safe mysqld from pid file /var/run/mysqld/mysqld.pid ended
```

# 解決策

sudo chmod 777 /var/lib/mysql/
sudo service mysql start
VoiceloidがChromeで開いているウェブページの文を読み上げてくれる仕組みを作ってみた(棒読みちゃん不要・ボイスロイド起動不要)

#初投稿
今回qiita初投稿です
ネットサーフィンしてたら面白い仕組みができたので共有
#動機
なろうの小説を棒読みちゃん不要で読み上げさせたかった
#用意するもの
ffplay(ffmpegとバンドルされています
ffmpegのインストールは、ほかの方のほうが詳しいので、この記事では割愛します)
VOICEROID2(exや+、無印はだめです。もちろん正規ライセンスが必要です)
VoiceroidDaemon
https://github.com/Nkyoku/voiceroid_daemon
NSSM
https://nssm.cc/
ooiyukari(Chrome拡張機能)
ooiyukari_host
https://chrome.google.com/webstore/detail/ooiyukari/iapfcgeenchbphdlcmimlgadchdgpnja?hl=ja
(ooiyukari_hostは上記のページの続きの中にあります)
#VoiceroidDaemonとは
Voiceroid2を起動せずに音声の読み上げができるオープンソースソフトウェアです
ライセンス認証はDLLレベルで動いているため、正規ライセンス認証が必要です
#手順1 VoiceroidDaemonのサービス化
まず、VoiceroidDaemonをCドライブ直下に置きます
(ほかの場所でもできなくはないですが、このあとWindowsサービス化するため、あまり触らない場所に置いたほうがいいです)
次に、https://nssm.cc/download からダウンロードしたnssm-2.24.zip(2021年3月4日時点のバージョンです。ダウンロードしたときのファイル名に置き換えてください)を、解凍し、中のWin32、またはWin64のフォルダの中にある、nssm.exeファイルを次の場所に置きます

```nssm.exe
\Windows\System32
```

pcを再起動し、コマンドプロンプトを**管理者権限で**起動します
コマンドプロンプトが開いたら次のコマンドを入力してください

```cmd.exe
nssm install (任意のサービス名)
```
すると次のような画面が開きます
![nssm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545477/50e08a06-b2d8-8e7b-f675-ea78ebce3b63.png)
そこで、Cドライブ直下に設置したVoiceroidDaemonの中にある、VoiceroidDaemon.exeファイルまでのフルパスをPathに。VoiceroidDaemonのフォルダまでのパスをStartupdirectoryに書き込み、Install serviceをクリックしpcを再び再起動します。
#手順2 Chrome拡張機能のインストール
https://chrome.google.com/webstore/detail/ooiyukari/iapfcgeenchbphdlcmimlgadchdgpnja?hl=ja
上記のリンクからooiyukari拡張機能をインストールし、
概要欄からooiyukari_host_v1をダウンロードします
ooiyukari_host_v1は解凍してCドライブ直下においてください

##ooiyukari_host_v1のインストール
Cドライブ直下に置いた後、中にあるインストール.batを管理者権限で開き、インストールを完了させてください。
#各種設定
ここまででインストールは完了しましたが、さらに設定が必要です
まず、VOICEROID2を**管理者権限で**起動してください
そのままVOICEROIDは放置し、次のアドレスに接続してください
http://localhost:8080
インストールがすべて終わっていれば、次のような画面が開くはずです
![voiceroiddaemon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545477/ecb7a434-a2f0-6bf2-c9dc-b61d6ff8d2d4.png)
上のシステムの設定をクリックしてください
![voiceroiddaemon2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545477/4a851d5b-442f-47d6-dace-99870e2a0a10.png)
この画面で、[起動中のVOICEROID２エディタから取得する]
というボタンをクリックしてください。
文字が入力されるはずですので下にスクロールして、[保存する]をクリックしてください。ポップアップで成功と出れば、起動中のVOICEROID2エディターは終了して構いません。
次に、ooiyukari_host_v1フォルダを開いてください
その中にある、ooiyukari.iniを次のように書き換えます。
(メモ帳は非推奨です)

```ooiyukari.ini
[basic]
debug=1
cmd=ffplay http://127.0.0.1:8080/api/speechtext/"{TEXT}" -autoexit -nodisp
escape_dquot=1
```

これでセットアップは終了です
#動作確認
適当なサイトで文字を選択して右クリックし
ローカルアプリを実行をクリックしてください。
ボイスロイドの声が聞こえれば成功です。
お疲れ様でした。
#関連リンク
AHS(VOICEROID販売企業)
https://www.ah-soft.com/
NSSM
https://nssm.cc/
VoiceroidDaemon
https://github.com/Nkyoku/voiceroid_daemon
ffmpeg
https://ffmpeg.org/
ooiyukari
https://chrome.google.com/webstore/detail/ooiyukari/iapfcgeenchbphdlcmimlgadchdgpnja
f-stringsでdict使う場合のエラー解消

## f-stringsでdictを使おうとした時にハマったエラー
何気なくいつも通りプログラム中でf-stringsを使おうとしたところ以下のようなエラーが発生

```:実行スクリプト例
ex_dict = {'a':'b'}

print(f'{ex_dict['a']}')
```
```:エラー文
SyntaxError: f-string: unmatched '['
```

# 原因と解決法
dictの要素指定のシングルクオーテーションをf-stringsのシングルクォーテーション内で使ってしまったことによるSyntaxエラー。
外側 or 中を**ダブルクォーテーション**`""`にすることで解決。

ただのstringであればエスケープシーケンスを使うこともできるがdictの要素指定の場合はエスケープシーケンスではエラーを吐かれてしまうので注意
IBM Cloudのコンソール画面にアクセスできない。

```
{"trace":"","errors":[{"code":"authentication_failure","message":"HWCSEC0005E: ログインのチェックに失敗しました。無許可アクセスが発生
```

このエラーでIBM Cloud上に構築しているDB2のコンソールに入れなかった際の対処法。

ダッシュボードから該当のDB2サービスを選択。サービス資格情報のJSONを開く。
https_urlのURLにアクセスし、同じくJSON中のusernameとpasswordを入力してログインすると表示されます。
django-allauthを使ってログイン機能を5分で実装する方法

# django-allauthのインストール
```
$ pip install django-allauth
```

# settings.pyの編集

```settings.py

AUTHENTICATION_BACKENDS = [
    ...
    # Needed to login by username in Django admin, regardless of `allauth`
    'django.contrib.auth.backends.ModelBackend',

    # `allauth` specific authentication methods, such as login by e-mail
    'allauth.account.auth_backends.AuthenticationBackend',
    ...
]

INSTALLED_APPS = [
    ...
    # 下の4つを追加
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    ...
]

SITE_ID = 1 # 忘れずに！
```

# urls.pyの設定

```urls.py
from django.urls import path, include #⇐includeを追加

urlpatterns = [
    ...
    path('accounts/', include('allauth.urls')),
    ...
]
```

# マイグレーションの実行

```
$ python manage.py migrate
```

以上です！
`accounts/login`がデフォルトのurlになっているのでそこから確認できます。以下のようなページが表示されます。もし`templates does not exists`が出る場合は一度`accounts/logout`でログアウトしてから確かめてみてください。ちなみに`accounts/profile`のURLが必要ない場合には`settigns.py`に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450257/9311a062-c4ad-5144-a92a-bc8d84b3bece.png)

# オススメなオプション
django-allauthは個人の好みによって色々な設定が簡単にできるようにしてくれています。
個人的によく使う設定は以下です。[こちら](https://django-allauth.readthedocs.io/en/latest/configuration.html)から必要な設定を探せます。

```settings.py
LOGIN_REDIRECT_URL = '/' # loginした後にリダイレクトされるところ
ACCOUNT_LOGOUT_REDIRECT_URL = '/' # logoutした後にリダイレクトされるところ
ACCOUNT_SESSION_REMEMBER = True # 自動でアカウントのセッションを保持(いちいちユーザーネームとパスワードを要求しない)
ACCOUNT_SIGNUP_PASSWORD_ENTER_TWICE = False # ユーザー登録時にパスワードの要求を一回にする
ACCOUNT_LOGOUT_ON_GET = True #ログアウトをクリックしたらログアウト確認画面を経由しないで直接ログアウト
```
# 次やること
- templatesの見た目の変更

# 参考サイト
[公式ドキュメント](https://django-allauth.readthedocs.io/en/latest/installation.html)
GAS(GoogleAppsScript)とLINE Notifyを使ってタスクを自動通知

# GAS(GoogleAppsScript)とLINE Notifyを使ってタスクを自動通知
GASとLINE Notifyを使ってタスクの状況を自動でLINE通知するようにしました。

#　準備
以下の三つを使えるように準備します。
・GAS(GoogleAppsScript)
・スプレッドシート
・LINE Notify

LINE Notifyは[ここから](https://notify-bot.line.me/ja/)ログインし、アクセストークンを発効します。

# コード
以下は今回のコードです。

```コード.js
//確認待ちの通知
function checkTaskAddStatus(){
  var lastRow = SHEET_TASK.getLastRow();
    for(i=1; i<lastRow+1 ; i++){
      var TaskStatus = SHEET_TASK.getRange(i, 4).getValue();
      if(TaskStatus === "確認待ち"){
        var taskDetail = SHEET_TASK.getRange(i, 3).getValue();
        var message = "[タスク確認待ち通知]\n・タスク内容:" + taskDetail + "\n・進捗状況:" + TaskStatus;
        SendToLine(message);   
    }
```

```setting.js
const NOTIFY_TOKEN = "アクセストークン";
//タスクシート
const SPREAD_SHEET_TASK = SpreadsheetApp.openById('シートid');
//const URl = "シートのURL";
const SHEET_TASK =  SPREAD_SHEET_TASK.getSheetByName("タスク状況");
```

```notify.js
//LINEに通知
function SendToLine(message){
    var token = [NOTIFY_TOKEN];
    var options = {
      "method": "post",
      "payload" : {"message": message },
      "headers": {"Authorization": "Bearer " + token}    
    };
    UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
```
#最後に

[GitHubのレポジトリ](https://github.com/Pkagin/memoStudy/blob/main/study/Gas/GAS%E3%81%8B%E3%82%89LINENotify%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%87%AA%E5%8B%95%E9%80%9A%E7%9F%A5.md)

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
[洗練](https://senren.work/)