OmniAICreator/Qiita-1.07M huggingface dataset:
Java基礎学習内容8（Java API）

# java.lang.Obcect
全てのクラスのスーパークラスとなるもの。
**boolean equals(Object hoge)** → オブジェクトのインスタンスが等しいかを比較
**final Class<?> getClass()** → オブジェクトの実行時のクラスを返す
**int hachCode()** → オブジェクトのハッシュコード値を返す
**String toString()** →オブジェクトをStringに変換する


# java.lang.Math
数学ライブラリを提供するもの。

**static final double E** → 定数e(自然対数の定数)
**static final double PI** →定数π(円周率)

**static double random()** → 0.0～1.0の一様分布乱数を返す

## java.time
日付・時間を扱うもの。
java.util.Dateの不備を解消するため導入された（？）

日付をLocalDate、時間をLocalTime、日付+時間をLocalDateTime、期間をPeriodで扱う。

現在時刻によるインスタンス化(now)、時刻などを設定したインスタンス化(of)に加え、文字列からの変換(parse)や日付の加減算(plusDays)など、様々な機能を備える。
Fragmentの初期配置ってどうすのがいいんだっけ

## 調べたこと

FragmentをActivityにaddする処理の書き方について

## 背景

コードレビューにてこんなコードを見つけました。

```.java
savedInstanceState ?: run {
    val fragment = HogeFragment.newInstance（）
    supportFragmentManager
            .beginTransaction()
            .add(R.id.container, fragment)
            .commit()
}
```

`savedInstanceState` を確認して、
Activityの再生成時にFragmentが重複しないようにしてくれてるね。
いいじゃん、いいじゃん。

あれ...？
だけど、なんか懐かしさを感じる。
最近これを自分で書いた記憶ないぞ..!?

## 自分の最近のプロジェクトを覗いてみる

```.java
supportFragmentManager.findFragmentById(R.id.container) ?: run {
    val fragment = HogeFragment.newInstance（）
    supportFragmentManager
            .beginTransaction()
            .add(R.id.container, fragment)
            .commit()
}
```

思い出しました。
指定したViewのIDにFragmentが登録されているかを確認して、
Fragmentが登録されていなければaddする、としていました。

## どっちがいいの？？

それぞれ、僕の理解で日本語に落とし込みます。

- Activityが初回生成時には、Fragmentをaddする
- ViewにFragmentが登録されていなければ、Fragmentをaddする

どうでしょう？
個人的には、後者の方が考えやすいです。
当然、画面回転などのActivity再生成はどちらでもハンドリングできます。
なので、最近僕は `savedInstanceState ?: run {}` を書いていなかったんです。

## 最後に

ちなみに、背景で書いたコードレビューではコメントを付けずにスルーしました。
なぜなら、これは好みの範疇だと思ったからです。

ただ、世間ではjetpackの[navigation](https://developer.android.com/guide/navigation/)を使う流れがきています。
自分でFragmentをaddするなんて時代遅れなのかもしれません。
QN8035をArduinoで制御　DSP　FMラジオモジュール　

#はじめに
* 電子工作の初心者としてDSPラジオに挑戦。
* メジャーなモジュールは一通りさわってみたので、作例の少ないICにも挑戦。データシートがあれば何とかなりそう。
* 今回のCHIPは外部からクロックを供給する必要あるため、32.768kHzの水晶発振回路を利用しています。[他記事](https://qiita.com/dabodabo/items/87996b067e15a7e9b029)をご参照ください。

#Chipについて
* 今回はQN8035。中国のメーカー（Quintic）なのかな？　ChipはAliexpressで調達。10個で210円（送料込み）。安すぎ。
* Aliexpressで検索すると、多数出てくるので、中国ではメジャーなChipなのかも。百度で検索すると資料が出てくるが、利用しにくい。
* Aitendoさんで同じ会社のQN8065というChipを販売していますが、データシートが心許ない感じ。調べてみると、このQN8035については、データシートがそろっていたので、こちらのChipを選んでみました。
* 実はQN8065も入手したのですが、試行錯誤の上受信に成功しました。時間があれば別途投稿します。

#使用したもの
* QN8035　Quintic社　Aliexpress
* AitendoさんのDIP化基板(http://www.aitendo.com/product/17448) 
* IC（QN8035)のデータシート　検索してください。
* パスコン　0.1μF
* Arduino Uno互換機(ELEGOO)
* 32.768kHzの[水晶発振回路](https://qiita.com/dabodabo/items/87996b067e15a7e9b029)

#DIP化
* Chipが0.5ミリピッチなのではんだ付けは少し苦労しました。AitendoさんのDIP化基板を利用。* パスコン（0.1μF）を空中配線しています。
* パスコン以外はそのままはんだ付けしています。本CHIPは出力コンデンサも不要で、そのままイヤフォンで聴けます。
![QN8035_module.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482773/b85d0c83-43a5-d1c3-502f-9e27f6da0bfd.jpeg)



#配線
* 他のモジュールと同様にArduinoとつなぐだけ。電源は3.3Vを使っています。
* XCLKピンには、水晶発振回路からの出力を接続。INTピンは今回は使いません。
* 添付画像ご参照ください。
![QN8035_kairo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482773/527ad09d-7234-49ea-4a6d-15fbc90f5328.jpeg)

#I2C通信、Slaveアドレスについて
* ArduinoのI2C Scanner によると、Slave addressは"0X10"でした。
* I2C通信は、普通のコードで読み書きともOK。下にあるように、各レジスタが1バイトなのですが、特に難しいところはありません。コード例は割愛します。

#コード作成のポイント
* このCHIPもレジスタにデータを書き込むことで制御しますが、他のモジュールと違い「各レジスタは1バイト」となっています。他モジュールでは2バイトのことが多いのですが、本CHIPは1バイト。
* コードとしては特に難しいことはなく、「レジスタ番号」+「1バイトデータ」の形でOkです。
* 幸いなことにデータシートにPrograming Guideもあるので、それに従ってコードを書けばよい。
* ①まず初期化。ソフトウェアリセットを行うことで、各レジスタが初期値になる。具体的には、レジスタ00h[7]を1にすればよい。
* 次にクロック周波数の選択ですが、初期値が32.768kHzなので、ここでは操作不要。
* ②次に周波数を書き込み。「（周波数-60）/0.05」を07hと0Ahに分けて書き込みます。80mHzならば、400(=190h)を次のように書込み。0Ah:01, 07h:90。
* ③ChipをReceiveモードに。同時に、SEEK機能をOFFにして、Manual選局を選択。具体的には00hに0b00010001を書き込めばよい。
* ④ボリュームの設定など。MUTEをオフにして、ボリュームを適当に設定する。具体的には14hに0b00000111等と設定する。
* 以上で受信できるはず。クロックなど初期値のままで変更不要なため設定項目は意外と少ない。

#動作コード
* 特定の周波数を書き込むシンプルなコード。レジスタの書き込みにWhile文を使ってみました。

```
#include <Wire.h>

const unsigned int QN8035[]=
{
0x00,0x80, // initialize ①
0x0a,0x01, // 80.0mHz　②
0x07,0x90, // 
//0x0a,0x01, //82.5 ②
//0x07,0xC2, //
0x00,0b00010001, // receive, seek0　③
0x14,0b00000111, //mute0,de50,vol111　④
0xff,0xff,
};

void setup() {
Wire.begin();
int i=0;
while (QN8035[i] !=0xff) {
Wire.beginTransmission(0x10);  // slave address 0x10
Wire.write(QN8035[i]);      // Register i
Wire.write(QN8035[i+1]);      // data
Wire.endTransmission();     // 
i+=2;
delay(100);
}
}

void loop() {
}
```
#おまけ
* 少しノイズが多い気がしました。Arduinoからの電源を（USBを抜いて）乾電池経由にすると、Noiseが減少したように感じました。
* 本件は、水晶発振回路の作成や、Chipのはんだ付け、データシートの読込など、かなり自力で作業することができ、楽しかったです。
Java基礎学習内容7（例外）

# 独自例外クラスの定義方法

```java:独自例外
  public class MyException extends Exception {
    ...
  }
```

# try
tryブロック内で例外が発生した場合処理を中断し、catchブロックの処理を行う。

```java:try
  ...
  void method(){
    try{
      ...
    } catch (MyException1 | MyException2 e){
      ...
    } catch (MyException3 e){
      ...
    } finaly {
      ...
    }   
  }

# throws, throw
メソッドから呼び出し元に例外を渡す可能性がある場合、throwsを用いる。
また、明示的に例外を投げる場合throwを用いる。ｌ

```java:throws
class classA {
  void methodA() throes MyExceptionA {
    ...
    if(isError){
      throw new MyException();
    }
    ...
  }

}
```

※スーパークラスのメソッドでthrowsを定義していたとしても、サブクラスの同意メソッドでthrowsを記述しないことは可能・
d3のforcesimulationで自分の指定したidを使う(Uncaught Error: missing: hogehoge)

# はじめに
`d3-force`のドキュメント([github - d3/d3-force](https://github.com/d3/d3-force))で、`id`は自分で決めてもいいよとあったので試したらハマった。

```javascript

var nodes = [
  {"id": "Alice"},
  {"id": "Bob"},
  {"id": "Carol"}
];

var links = [
  {"source": "Alice", "target": "Bob"},
  {"source": "Bob", "target": "Carol"}
];
```
# 対処法
以下のような感じで`simulation`を定義する際に`link`で`id`を指定する。

```javascript
const simulation = d3.forcesimulation()
  .force("link", d3.forceLink().id((d)=>d.id))
```

# おわりに
> If id is specified, sets the node id accessor to the specified function and returns this force. If id is not specified, returns the current node id accessor, which defaults to the numeric node.index
[github - d3/d3-force](https://github.com/d3/d3-force)

ドキュメントを読んだら普通に書いてあった。説明書を読む習慣をつけないと...
[Android] adbコマンドが覚えられない。。。

`adb`コマンド便利なんだけど、機能多すぎて覚えられない。。。
そんな折、AOSPで[bashの補完スクリプト](https://android.googlesource.com/platform/sdk/+/refs/tags/android-8.1.0_r68/bash_completion/adb.bash)を用意してくれていることに気づいて感動したので、備忘メモ。

`source`等で読み込むと、adbのサブコマンドに対してTAB補完が効くようになる（そのまま）。

```shell-session
$ source sdk/bash_completion/adb.bash
```

[![asciicast](https://asciinema.org/a/X36P5wHRFTLYDyvLjOW3Zr1lY.svg)](https://asciinema.org/a/X36P5wHRFTLYDyvLjOW3Zr1lY)

上記動画のように、`dumpsys`の引数まで補完可能。
他にも、ターゲット側のファイルパスやパッケージ名など、かなり幅広く補完してくれる。
bashを使っている場合はとりあえず有効にしておくことをオススメします。

確認環境は、Android 8.1、PCはUbuntu18.04です。

# 参考
[adb.bash](https://android.googlesource.com/platform/sdk/+/refs/tags/android-8.1.0_r68/bash_completion/adb.bash)
[adb command reference - Android Developer](https://developer.android.com/studio/command-line/adb.html#issuingcommands)
[記事にAsciinemaを埋め込むことができるようになりました](https://blog.qiita.com/update-article-asciinema/)
Java基礎学習内容6（継承・抽象クラス・インタフェース）

# 継承
既存クラスを元に新しいクラスを定義する。(元となるクラス=スーパークラス、新しく定義するクラス=サブクラス
この際、スーパークラスのメソッドやフィールドは受け継がれる。
※アクセス修飾子がprivate,修飾子なしのメソッド・フィールドにはアクセス不可
※複数のスーパークラスを継承する(多重継承)は不可(ただしサブクラスをスーパークラスとした継承は可)
※final修飾子のついたクラスは継承不可

```java:継承
class SubClass extends SuperClass {
  ...
}
```

サブクラスでは、スーパークラスのメソッドの処理を上書きするオーバーライドが可能

```java:オーバーライド
class SubClass extends SupreClass {
  @Override methodA() {
    super.methodA(); //既存メソッドの処理を実行
    ...
  }
}
```

オーバーライドするためには以下の条件を満たす必要がある。
・メソッド名、引数が同一であること
・戻り値は元メソッドと同じかサブクラスであること
・アクセス修飾子は元メソッドと同じかより公開範囲が広いこと
・final修飾子のついていないメソッドであること

# 抽象クラス
処理内容を定義しないメソッドを含むクラス。
※abstract修飾子はアクセス修飾子より後、class・戻り値の型より前に記述すること。
※abstractをつけたメソッドには{}を付けないこと。

```java:抽象クラス
abstract class AbsClass {
  public abstract void methodA();
}
```

#インタフェース
実装が必要なメソッドを定義したクラス。
※SE8からはデフォルトの実装とstaticメソッドが定義できるようになった。

```java:インターフェイス
public interface InterfaceSampl(){
  public abstract void methodA();
  default void methodB(){
    ...
  }
}
```

※インターフェイスは多重継承が可能である。
※private,protectedなメソッドはコンパイルエラーとなる
※コンパイル時に暗黙でpublic abstractに変換される。
共用施設の技術員が受託解析の電子受付システムをGoogleのサービスで組み立てた

#自己紹介(2019-09-26時点)
はじめましての方ははじめまして。
私はUmi_largeです。
いろいろ縁があって、現在はとある学校法人の共用施設で技術員をしています。

私の所属する共用施設は、人によっては共通機器室と呼ぶような、化学分析や生物・医学系実験や物理測定などのための研究機器を大部屋や建物の中に集めて、利用者登録の契約を結んでいるユーザーに有償での機器利用や受託解析(DNAシーケンシングやサンプル調製など)のサービスを提供する機関です。

私の仕事は機関のほとんどの研究機器についてのメンテナンスやユーザー管理やその他利用講習などの技術的支援です。

#なぜ受託のサービスを電子化するか
今年度は5月にめでたく新元号「令和」が始まり、またとないシステム改革のチャンスの年が来ています。

私の機関でも、昨年まではユーザーの機器利用や受託サービスを提供した際のサービス利用料の請求根拠としてカーボン複写紙(感圧紙)に書かせた「紙(物理)」の利用記録を用いていました。
受託解析のサービスの場合は、さらに解析の依頼票を事前に提出してもらっていたのですが、これも手書きでサービスの内容とサンプル名や利用者の情報を**†すべて手書き†**で書いてもらっていたので、サンプル数が多い時などは持参USBメモリー経由もしくはメール経由でリストを直接送付などユーザーにも手間のかかるステップがふんだんに盛り込まれていました。

しかしながら、法人のルールでこうした紙媒体記録は数年間保管することになっており、毎年50 cm近くの棚がこれで埋まっていく上、利用記録はMicrosoft Accessに手打ちでレコードを写して請求管理のマスタを作成していたため、請求にかける時間的コストが膨大でカーボン複写紙に読めない文字を書く人などでデータ入力のミスが発生しやすい環境でした。

この問題を解決するためには、ユーザーがサービスを要求する段階からサービスを実行して利用記録を作成し請求処理に進むまでのシステムを電子化し、マニュアル作業を極力しなくて済むようにシステムを作り直す必要がありました。

#システムの電子化にあたってあらかじめ決めた要件・仕様
1. **ユーザーがサービスをリクエストする方法を電子化する**<br>
   (ここはGoogle Formで解決する)
2. **リクエスト内容はクラウド上データベースに保存してExcelみたいなユーザーインターフェースで確認できる**(職場の他の人たちが扱い方を覚えられる限界)<br>
   (ここはGoogle SpreadSheetで解決する)
3. **サービスの進度状況を先のインターフェースで入力してもらい管理させる**<br>
   (Google SpreadSheetのデータのうち特定の列を進度管理用に編集可能にしておく)
4. **サービスの結果生じたなんらかの産物を手渡しする必要があった場合に、引き渡し用のID**(今回はQRコード)**の提示・交換を産物の引き渡し条件とし、引き渡しと同時に引き渡ししたレコードを先のデータベースに入力させる**(引き渡しがない場合はサービス終了時に似たようなレコードを入力させ利用記録とする)<br>
   (Google Apps Scriptのスクリプトを作ってなるべく自動化する)

#なぜGoogleのサービスで完結させようとしているのか
これはとても単純な理由で、私のいる法人がG Suiteを契約していて容量などの利用制限をそこまで心配しなくてもよいからです。
そうでなくとも、Google Accountを持っている人は世界的にもかなり多く利用者向けの案内が整備されているために、まずニッチもサッチもいかなくて調べる能力がなくて使えないという人はかなり稀(多分。。。)だと思うからです。

今回作成するシステムはG Suiteの契約がなくても利用可能なもので構成されているので、他の法人の同様な共用施設に対しては非常に汎用的なものになると思います。つまりは無料で可能で、同人的なシステムです。

#今後の予定
先に挙げた要件一題ずつについて、新たな記事を追加していきます。追加次第、こちらのページにリンクをつけて更新していきます。

1. [Google Formを使った依頼の収集](https://qiita.com/Umi_large/items/9447f8aa2df3b9a5055a)
2. [Google SpreadSheetとGoogle Apps Scriptを使った依頼管理と引換用ウェブアプリの作成](https://qiita.com/Umi_large/items/9619a9d541678aeb52f3)
3. [Google Apps Scriptで作ったウェブアプリケーションにアクセスするためのQR codeをSpreadSheetの対応するセルに反映する](https://qiita.com/Umi_large/items/9bccc1c801b3d4f92286)
Null 合体演算子（??）とエルビス演算子（?:）（三項演算子（A?B:C））の違いについて

## 空白の場合
```php
// null 合体演算子は空白は、true 扱い
>>> '' ?? false
=> ""

// エルビス演算子と三項演算子は、fales 扱い
>>> '' ?: false
=> false
>>> '' ? true : false
=> false
```

## undefined の場合 
```php
// $hoge は未定義の変数
>>> $hoge
PHP Notice:  Undefined variable: hoge in Psy Shell code on line 1

// null 合体演算子は空白は、評価でき、fales 扱い
>>> $hoge ?? ''
=> ""

// エルビス演算子と三項演算子は、評価できない
>>> $hoge ?: ''
PHP Notice:  Undefined variable: hoge in Psy Shell code on line 1
>>> $hoge ? 'hoge'  : ''
PHP Notice:  Undefined variable: hoge in Psy Shell code on line 1
```
go で float32 を JSON にするとちょっと意外なことになる

まあタイトルのとおり。
ちょっと意外なことがあったので。

## go の場合

まずはソースコード:

```go
package main

import (
	"encoding/json"
	"fmt"
)

type Hoge struct {
	Foo float32
	Bar float64
}

func main() {
	hoge := Hoge{Foo: 0xa0000000, Bar: 0xa0000000}
	j, _ := json.Marshal(hoge)
	fmt.Println(string(j))
}
```

実行すると、出力は以下のようになる:

```json
{"Foo":2684354600,"Bar":2684354560}
```

ぱっとみわかりにくいけれど、 float32 に由来する Foo は下二桁が `00` なのに対し、float64 に由来する Bar は、下二桁が `60` になっている。

同じ `0xa0000000` を入れているのに違う値になる。困る。

## C# の場合

こちらもソースコードから。

```c#

using System.IO;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;

[DataContract]
public class Hoge
{
  [DataMember]
  public float foo { get; set; }
  [DataMember]
  public double bar { get; set; }
}

internal class JsonSerializer
{
  public static DataContractJsonSerializer Serializer<t>()
  {
    System.Type type = typeof(t);
    return new DataContractJsonSerializer(type);
  }
}

partial class Program
{
  static void Main(string[] args)
  {
    var t = new Hoge();
    t.foo = 0xa0000000L;
    t.bar = 0xa0000000L;
    using (var fs = System.Console.OpenStandardOutput())
    {
      JsonSerializer.Serializer<Hoge>().WriteObject(fs, t);
    }
  }
}
```

結果は次の通り:

```json
{"bar":2684354560,"foo":2.68435456E+09}
```

出力する書式は異なるものの、実質的に同じ値になっている。
これなら困らない。

## Java + Gson の場合

やっぱりソースコードから。

```java
import com.google.gson.Gson;

class Hoge {
  public float foo;
  public double bar;
}

public class Main {
  public static void main(String[] args) {
    Hoge hoge = new Hoge();
    hoge.foo = 0xa0000000L;
    hoge.bar = 0xa0000000L;
    Gson gson = new Gson();
    System.out.println(gson.toJson(hoge));
  }
}
```

Java には標準となる JSON Serializer がない模様なので Gson を使ってみた。

出力結果は:

```json
{"foo":2.68435456E9,"bar":2.68435456E9}
```

出力形式も値も同じ。
困らない。

## node.js の場合

ここでもまずはソースコード:

```javascript
o = {
  foo: new Float32Array([0xa0000000]),
  bar: new Float64Array([0xa0000000])
}
process.stdout.write(JSON.stringify(o));
```

出力はこうなる:

```json
{"foo":{"0":2684354560},"bar":{"0":2684354560}}
```

Float32Array とかって配列にならないんだへー、みたいな気持ちにはなるが、Float32Array でも Float64Array でもおなじになっている。

## まとめ

32bit および 64bit の浮動小数点型変数に `0xa0000000` を入れて、それを JSON にしてみた。
結果は下表の通り。

|言語など|型|JSON内の表現|JSON内の表現を16進数で表現したもの|
|:--|:--|:--|:--|
|go|float32|`2684354600`|**`0xa0000028`**|
|go|float64|`2684354560`|`0xa0000000`|
|C#|float|`2.68435456E+09`|`0xa0000000`|
|C#|double|`2684354560`|`0xa0000000`|
|Java+Gson|float|`2.68435456E9`|`0xa0000000`|
|Java+Gson|double|`2.68435456E9`|`0xa0000000`|
|node.js|Float32Array|`2684354560`|`0xa0000000`|
|node.js|Float64Array|`2684354560`|`0xa0000000`|


go で float32 型の値を JSON にした場合だけ、`0xa0000000` にならない。
困る。

対策は「float32 を使わない」なんだけど、float32 をわざわざ使っているんだからなんか理由があるに違いなくて、簡単にはやめられないよね。
どうしたものか。

## 追記

というわけで、ライブラリ書いた。

see https://github.com/nabetani/marshaljsonf64
pandas→networkx→pyvisでネットワーク分析＆可視化(その２）

[前回の記事](https://qiita.com/niship2/items/9d7e2b6ab2ca1be18eaf)の続き。
pandasからnetworkxのデータへ直接流し込みが可能な[from_pandas_edgelist](https://networkx.github.io/documentation/latest/reference/generated/networkx.convert_matrix.from_pandas_edgelist.html)。

    import networkx as nx
    edges = pd.DataFrame({'source': ["A","A","A","B","B","C","C","D","E"],
                          'target': ["B","C","D","D","C","E","D","E","A"]})
    G = nx.from_pandas_edgelist(edges, edge_attr=True)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385220/55659c32-8b74-c2a2-b20f-4efe78202c23.png)


これでedgeのリストからnetworkxの形式のデータへ変換できる。
が、エッジの属性は指定できるが、ノードの属性（サイズとか重みとか色とか）の指定ができない。
どうすればいいのか迷った結果、下記のように、ノードとその属性を表すdataframeを作ってから、to_dictを使ってdic形式に出力
     
    nodes = pd.DataFrame({'node':["A","B","C","D","E"],
                     'weight':[1,2,1,4,3],
                     'color':["red","red","yellow","blue","~~"],
                     'label':["a","b","c","d","e"]})
　   node_attr_dic = nodes.set_index("node").to_dict(orient="index") 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385220/dea88e5d-9d37-103a-3005-173129576cf0.png)


で、これらを組み合わせるのは以下のとおり。

    nx.set_node_attributes(G, node_attr_dic)


ミソは、

* edgelistから生成した（edgelistに存在する）Gのノード名とnodesの列の１つに入っているノード名を同じにした上で、set_node_attributesでノードに属性を設定する。
* その列をnodesのindex列に指定する点（例で言えば「node」の列）＋to_dictの出力で、orient="index"にする点。
node_attr_dicの中身は下記のような感じで、node:{各属性の値}という感じに入っている辞
書を使えばよい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385220/99498a25-e425-af72-43c0-0ac2db442ea7.png)


確かめると、ちゃんと属性が入ってくれている！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385220/5dfb83a1-51f1-e469-baec-b43bc4aa89dd.png)


あとは、graphmlなどネットワーク系の拡張子で出してもよいし、前回どうようpyvisで出力してもいい。これも今度書こうと思う。
networkxの開発者はpandasのto_dictを組み合わせることを念頭にX2.~系では
from_pandas_edgelistを追加したのだろうか？頭いいなあ。
networkx様様<(_ _)>

追記：少し修正があったので[別の記事](https://qiita.com/niship2/items/61e704e90762642b8e01)で
SwiftUIでWeb APIから取得した結果を表示する


SwiftUIのViewを更新するためにはデータに応じて、適切な状態の宣言をする必要があります。

ここでは、Web APIと通信し結果を表示するという、よくあるアプリをSwiftUIで実装することで、その方法を紹介します。
必要な実装は以下の2つです。

1. `ObservableObject` に準拠するクラスを作成し変更の通知を発行
1. SwiftUIのViewで通知を監視

それでは、GitHubのフォローしているユーザー一覧を表示するアプリを例にし、実装していきます。

## ObservableObjectに準拠するクラスを作成し変更の通知を発行

通信を行い取得したユーザーを保持するクラスを作成し、`ObservableObject` に準拠させます。(準拠させると言ってもクラスであれば特に何かを実装する必要は無いです)
そして、保持したユーザーの変更を通知するためには、 `@Published` 属性をプロパティに付与します。

```swift
import Foundation
import Combine

class FollowingUserStore: ObservableObject {
    @Published var users: [User] = []

    init() {
        load()
    }

    func load() {
        let url = URL(string: "https://api.github.com/users/maoyama/following")!
        URLSession.shared.dataTask(with: url) { data, response, error in
            DispatchQueue.main.async {
                self.users = try! JSONDecoder().decode([User].self, from: data!)
            }
        }.resume()
    }
}

struct User: Decodable, Identifiable {
    var id: Int
    var login: String
}
```
たったこれだけの実装で、通信を行いユーザーを取得できた際の通知を発行することが可能になります。

## SwiftUIのViewで通知を監視

今回のような、あるViewだけで使用するデータの通知を監視すれば良い場合はProperty Wrapperの`ObservedObject` を使う方法が適切です。
`ObservableObject` をプロパティに保持し、`@ObservedObject` を付与します。

```swift

import SwiftUI

struct ContentView: View {
    @ObservedObject var store = FollowingUserStore()

    var body: some View {
        List(store.users) { (user) in
            UserRow(user: user)
        }
    }
}

struct UserRow: View {
    var user: User

    var body: some View {
        Text(user.login)
    }
}

```

これで `FollowingUserStore.users` の変更を監視できます。

## まとめ
これだけの実装でWeb APIから取得した結果を表示することができました。

![Sep-27-2019 00-01-57.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151036/147687a4-a552-1c41-2c23-0d7ffe180d2d.gif)

また、適切な宣言をするだけで、データの同期を手動ですることなく、SwiftUIとCombineが自動で行ってくれています。これにより、コードがとてもシンプルで読みやすくなることが期待できそうです。



## 参考資料
https://developer.apple.com/documentation/swiftui/state_and_data_flow
https://developer.apple.com/videos/play/wwdc2019/226/
https://developer.apple.com/documentation/combine/observableobject
メモ「Automate the Boring stuff -chapter1 Python Basics」

https://automatetheboringstuff.com/chapter1/

```
Data type  Examples
Integers  -2, -1, 0, 1, 2, 3, 4, 5
Floating-point numbers  -1.25, -1.0, --0.5, 0.0, 0.5, 1.0, 1.25
Strings  'a', 'aa', 'aaa', 'Hello!', '11 cats'
```
```
Operator　　Operation　　Example Evaluates to...

**　　Exponent　　2 ** 3　　8

%　　Modulus/remainder　　22 % 8　　6

//　　Integer division/floored quotient　　22 // 8　　2

/　　Division　　22 / 8　　2.75

*　　Multiplication　　3 * 5　　15

-　　Subtraction　　5 - 2　　3

+　　Addition　2 + 2　　4
```

https://www.youtube.com/watch?v=7qHMXu99d88

`The str(), int(), and float() Functions`

```
>>> str(0)
'0'
>>> str(-3.14)
'-3.14'
>>> int('42')
42
>>> int('-99')
-99
>>> int(1.25)
1
>>> int(1.99)
1
>>> float('3.14')
3.14
>>> float(10)
10.0
```
healthzの由来

# これは何？
Kubernetesの`livenessProbe`や`readinessProbe`を設定する際とかの`/healthz`をパスに指定するのは「どこから来たんだろうなあ」と気になったので調べたことをメモしておく。

# Googleの慣習が由来？
[Where does the convention of using /healthz for application health checks come from? - Stack Overflow](https://stackoverflow.com/questions/43380939/where-does-the-convention-of-using-healthz-for-application-health-checks-come-f)
Stack Overflowで過去に似たようなニュアンスの質問があり、それによると

> It historically comes from Google’s internal practices. They're called "z-pages".
> 歴史的には、Googleの内部慣行に基づいています。それらは「zページ」と呼ばれます。

で、エンドポイントの衝突を避けるために`z`を付与しているらしい。
`Prometheus`がまさに例として挙げられている。

> Open source tools like Prometheus implement this pattern (since original authors of Prometheus are also ex-Googlers) by coming to a well-known endpoint to collect metrics from your application.
> Prometheusのようなオープンソースツールは、有名なエンドポイントにアクセスしてアプリケーションからメトリックを収集することで、このパターンを実装します（Prometheusの元の作成者も元Google社員であるため）。

# おわり
由来がわかっただけなんだけど、こういうのは大事だと思っている。
エンジニアスタンプラリー～フロントエンド編＃3

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画 
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
パッケージマネージャー
>npm improved a lot, post v5+, but is still behind yarn in some features; nothing serious though. Pick any!

Pick any! と言われても、黄色は必ず通るというルール。

## Package Managers

#### npm 
後続フェーズもあるため、ここでは一旦インストールと動作確認のみ。
よって[npm入門](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)を一通り実施する。
使うかわからないけど、指示通りjQueryをインストール。

```json:package.json
{
  "name": "wdr-frontend",
  "version": "1.0.0",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tonchan1216/WDR-frontend.git"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}
```


#### yarn
Getting Started的なものが公式であったので[Usage | Yarn](https://yarnpkg.com/ja/docs/usage)を参考。
npm経由でインストールできたため、今回のスタンプラリーはいい流れ。

いろいろ使ってはみたいけど、今まで達成したスタンプ内ではあまり使う当てがない。
次タスクがSASSなので、その布石かな。

## 成果物
今回はインストールのみ。今後の発展に期待。
https://github.com/tonchan1216/WDR-frontend/tree/v3.0
【Swift入門】オプショナル整数型の「?」や「!」について、整理してみた

##1. コードを接続した際に自動的に追加されたコードを一つずつ紐解く


```swift:ViewController.swift
// ---(略)---
@IBOutlet weak var label: UILabel!
// ---(略)---
```

###1-1. `@IBOutlet`
`@IBOutlet`は、変数labelがプロパティとしてストーリーボードと接続できることを表している。

###1-2. `weak`
`weak`は、メモリ管理の設定。

###1-3. `var label`
`var label`は、varキーワードを用いて、変数labelを宣言している。

###1-4. 「:」の後の`UILabel`
 「:」の後の`UILabel`は、変数labelの型がUILabelクラスであることを表す。

###1-5. `!`
キーワードは「オプショナル」。2. につづく。


##2. オプショナル整数型（= nilを取り得る整数型）について

###2-1. オプショナル整数型とは？

__nil__を変数に代入する場合は、下記のように型を明示することが必要。そして、型の後に「__?__」を付ける。

```swift:example
var age:Int? = nil
```
この`Int?`は、__オプショナル整数型（= nilを取り得る整数型）__と呼ばれる。


###2-2. オプショナル整数型を使った計算
####2-2-1. 問題点

```swift:
// オプショナル整数型と整数型は型が異なるため、エラーが返る
var age:Int? = 25
print(age + 1)
```
↓↓↓

####2-2-2. 解決策
変数名の後に「!」を書く。このように指定することで、オプショナル整数型の値が格納されている変数の中から、整数値のみを取り出すことができる。

```swift:
// 「オプショナル整数型」の変数から整数を取り出す
var age:Int? = 25
print(age! + 1)
```

####2-2-3. 注意点
変数ageにnilが代入されているときに「!」をつけると、アプリがクラッシュするので注意。

```swift:
// nilが代入されている変数から値を取り出すと、アプリがクラッシュ
var age:Int? = nil
print(age! + 1)
```


####★ つまり
オプショナル型の変数から値を取り出すときに「!」を付けることで、__変数の中身がnilでない__ことを宣言していることになる。


##3. オプショナル整数型のメリット：きちんとエラーが表示されるようにして、謎のクラッシュ防ぐ

####3-1.NG例

```swift:Swiftのチェックは通るは、アプリがクラッシュする
var age:Int = nil
print(age + 1)
```
####3-2. OK例

```swift:型が異なるため、Swiftのチェックできちんとエラーが表示される
var age:Int? = nil
print(age + 1)
```

##4. 「!」を省略した書き方

###4-1. 省略前

```swift:「!」を省略する前
var age:Int? = nil
print(age! + 1)
```

###4-2. 省略後

```swift:「!」を省略したあと
var age:Int! = nil
print(age + 1)
```


=> `4-1.` と `4-2.`　は、同じ働きをするが、`4-2.`の方がシンプルに書くことができる。


##5. まとめ

```swift:ViewController.swift
// ---(略)---
@IBOutlet weak var label: UILabel!
// ---(略)---
```

つまり、下記の`UILabel!`は、labelプロパティから値を取り出すときに「!」を書くのを省略するための書き方。labelプロパティは、これ以降、プロパティのあとに「!」を付けることなく値を取り出すことができる。
【Swift】Alamofire, MoyaのURLEncodingで、Boolが0,1になってしまうことへの対応

# 事象: Moyaを使ってAPIをリクエストしたが、Boolが0/1で送られていた

API系のライブラリとしてよく用いられるのが、 [Moya](https://github.com/Moya/Moya) というライブラリだと思います。

私自身も99%のプロジェクトでMoyaを使っています。

Moyaでリクエストパラメータを送る際に以下の形式で送っています。

```Swift:
requestParameters(parameters: [String : Any], encoding: Moya.ParameterEncoding)
```

しかしながら、この形式で送ると、Bool型が一度Any型に変換され、そして、最終的にNSNumberとしてリクエストされるようです。

詳しくは [こちら](https://github.com/Alamofire/Alamofire/issues/1056#issuecomment-189703428) 

とはいえ、↑この人が言うように、BoolをAnyにすると、NSNumberになる的な事象は、playground上では確認できませんでした。。

# 対応: Bool.description で、Bool型をString型に変更して対応

Bool型→Any型: NSNumber (0/1)
Bool型→String型→Any型: Bool (true/false)

↑のようになるようです。

元々のコード

```Swift:
var parameters: [String: Any]? {
    return ["key" : boolParam]
}
```

↓↓↓↓↓↓↓↓↓

修正後のコード

```Swift:
var parameters: [String: Any]? {
    return ["key" : boolParam.description]
}
```

# その他

パケットキャプチャで確認しましたが、こちら↓とても参考になりました。
[通信系のデバッグには Charles が便利](https://qiita.com/usagimaru/items/d340e87da98e62f99b60)
ポートフォリオで使おうと思ったVueTyperについて

# VueTyperについて

## VueTyperとは
タイピングアニメーションを簡単に実装するVueのライブラリ
ちなみに似たようなライブラリにvue-typed-jsというライブラリもあります。
[GitHub：vue-typed-js](https://github.com/Orlandster/vue-typed-js)

## 参考URL
- [GitHub リポジトリ](https://github.com/cngu/vue-typer)
- [VueTyper Demo](https://cngu.github.io/vue-typer/)
  - 各種値とかのシュミレーションができるページ

## 導入方法
### npmからvue-typerをインストール
`npm install --save vue-typer`
※CDNもあります。

## コンポーネントへの読み込み
### グローバル設定
```JS
import VueTyperPlugin from 'vue-typer'
Vue.use(VueTyperPlugin)
```

### 使用するコンポーネント毎に設定
```JS
import { VueTyper } from 'vue-typer'

export default {
  components: {
    VueTyper
  },

  ...
}
```

## 使用方法
タイピングさせたいテキストをテンプレート内に記述。
`<vue-typer text="Hello World!"></vue-typer>`
`text="〜"`の部分がタイピングアニメーションで表示される。

## アニメーション設定の各種値について
各種値を設定することで、カーソルの動きや表示までの速度等を調整出来ます。
設定できる項目と概要は以下のとおりです。

| 項目名 | 説明 | 設定可能な値 |
| ------- | -------- | -------- |
| text | アニメーションさせるテキストを設定します。 | 文字列<br>配列 |
| repeat | テキストを何回入力させるか数値で設定。<br>デフォルトは`Infinity`(永遠に) | `Infinity`<br>数値 |
| shuffle | Boolean値でテキストを入力する前にシャッフルし、ランダムにテキスト入力します。<br>デフォルトは`false` | `true` <br> `false` |
| initial-action | 最初の入力テキストに対するアクションを設定します。<br>デフォルトは`typing`(入力から) | `typing` <br> `erasing` |
| pre-type-delay | 入力前の待機時間を数値で設定します。<br>デフォルトは`70` | 数値 |
| type-delay | 次の文字を入力するまでの時間を数値で設定します。<br>デフォルトは`70` | 数値 |
| pre-erase-delay | 文字列が完全に入力されたあとの消去アクションまでの待機時間を数値で設定します。<br>デフォルトは`2000`<br>※消去アクションとは、テキストの選択ハイライトなどのこと | 数値 |
| erase-delay | 消去アクション後、実際に消去されるまでの待機時間を数値で設定します。<br>デフォルトは`250` | 数値 |
| erase-style | 消去アクションのスタイルを設定します。<br>デフォルトは`select-all`(全選択) | `backspace` <br> `select-back` <br> `select-all` <br> `clear` |
| erase-on-complete | Boolean値で最後に入力されたテキスト消去を設定。<br>デフォルトは`false`<br>※`repeat === Infinity`の場合効果はない | `true` <br> `false` |
| caret-animation | カーソルのアニメーションを設定します。<br>デフォルトは`blink` | `solid` <br> `blink` <br> `smooth` <br> `phase` <br> `expand` |

## CSS(スタイル)調整
[GitHubのReadme Styles](https://github.com/cngu/vue-typer#styles)の項目にSCSSが載っているのでそこを参考にカーソル等の色やアニメーションの調整が可能。

## イベントの取得
デフォルトでいくつかのイベントが用意されている。※近日中に追記
詳しくは[GitHubのReadme Events](https://github.com/cngu/vue-typer#events) の項目参照
Redis Command Reference が便利になっていた件


タイトルのまま。

https://redis.io/commands が便利になっていた。

何が便利かというと、repl 的なあれが付いていて、いちいち docker や local redis server を起動しなくてもコマンドの動きが確認できる。

スマホでもできるぞ！

こんな感じ

### 1


<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/36605881-307c-203d-c1d4-2ebb6db3a143.png width=40%>

### 2

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/0834731d-d274-ddc8-ed6c-437ad9970560.png width=40%>

### 3

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/71e2dff8-ad15-3c13-1620-700d3ee29e8c.png width=40%>

### 4

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/88bf57f5-b810-699c-1fb0-2b944bacfb00.png width=40%>



これで電車の中や病院の待ち時間といったスキマ時間を利用して、 redis commands のお勉強ができますね！
【RPA】Automation Anywhere Object Cloningコマンド

#楽しいコマンドObject Cloning
今日は自分が一番初めにRPAが楽しいと思ったObject Cloningコマンドを紹介します。



**Object Cloningコマンドはデスクトップ アプリケーションおよびウェブベースのアプリケーションから、
オブジェクトの座標および画像をキャプチャできます。**


よくわからないです。


自分は

**開いているアプリやウェブサイトにテキストを挿入したり、クリック操作ができるコマンド!!**


って覚えました！


早速使用例に移ります！


##amazonで簡単な自動検索##
とっても簡単ですがアマゾンでの検索を自動化してみます。
今回は検索ワードを入力し、実行までの簡単な動作まで行います。

まずはワークベンチのコマンドからWeb Racorderコマンドの中から
Open Browserをダブルクリック又はドラッグ&ドロップしてウィンドウを開きます。

![webRecorder.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/99d01d98-d1b6-9f22-c87e-1d61d0e6a457.jpeg)

ここのURL To OpenにアマゾンのURLを入力します。

セーブして試しに実行してみましょう！

するとIE(インターネットエクスプローラーです。始めはアイイーって何？と思っていました。)
でアマゾンのサイトが開きます。

そのままアマゾンを開いたままコマンド一覧からObject Cloningを選択します。
**※必ず開いたサイトをアクティブに(一番先頭です。他のサイトを開いて隠れないように)したままにして下さい。**


![Oblect.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/b2246858-757c-bf01-56bb-8b2a9582c861.jpeg)

まず、Select Windowの下のドロップダウンメニューをクリックします。
するとリストの中に「Amazon | 本, ファッション, 家電から食品まで | アマゾン - Internet Explorer」
がありますのでそれを選択します。

![Objec2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/2dc9588c-d0a7-7439-dc4a-64b97126d6c9.jpeg)

**もしリストにアマゾンがなければ、Refreshを押してみて下さい、それでもでないようであれば再度Open Browserをやり直してみてください*
**


次にCaptureのボタンを押します。

**ここで注意です。Captureはクリックではなく押しっぱなしです**

するとアマゾンのサイトに遷移してかつ赤枠のようなものがカーソルについてきます。
この赤枠ををサイトの検索フォームに合わせます。そしてそこでクリックを話します。

すると
![Objec3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/e22c5a2f-e0f6-edb6-4173-e8528ec0df74.jpeg)

このようにObject Detailsに指定した場所のパスや要素が入ります。

このまま次にSelect Action To Platformのドロップダウンメニューを開き、Set Textを選択します。
![Objc4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/097b9ab9-e40a-972c-97d3-6fa18a876b90.jpeg)

このText To Setに検索したいものを入力します。
![Objec5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/1e4d427c-dfeb-207e-6230-77023ca632fe.jpeg)

そのままセーブを押してもう一度Object Cloningコマンドで次は「🔍」をキャプチャしましょう！
次のSelect Action To PlatformはClickを選択します。
![Objec6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/f585048f-a068-993b-1557-96734df706f9.jpeg)

![Objec8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/4ec7e66a-e2ab-7f5e-e2ed-3fee98852721.jpeg)

これで準備ができたので実行してみましょう！

するとブラウザーを開き検索結果画面まで遷移します。
![Objec7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395789/cf2cd6f7-bfa5-4ace-185e-6ba4e2f9563a.jpeg)

RPAの本たくさんありますね！RPAの威力が個人的に気になります。

今回は以上です。ぜひこのコマンドで遊んでみて下さい！

最後まで読んでいただきありがとうございました！
【図解】LINE Notifyのトークンを取得する話

<h3>LINE Notifyのトークンを取得するだけの話</h3>
ラズベリーパイで呼び出しボタンを作った話にてLINE Notifyトークンを使用するので、こちらで先にLINE Notifyトークン取得のおさらいをします。

##LINE NotifyのHPへ
<link>https://notify-bot.line.me/ja/</link>　にアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471662/e086b6be-2adb-6f40-c3e7-23b19e389016.png)
右上のログインをクリックします。
###ログイン
![topImage_pc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471662/ad30ff63-b57c-e8b0-609b-1db02a10c253.png)
ログインします
###マイページへ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471662/17a64c45-449b-c8d7-7173-e6e8079d4f69.png)
ログイン後、右上の自分のユーザー名をクリックし、マイページをクリックします。
###トークン発行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471662/e67a0c6f-7228-3ad1-5d04-5bef2bb2c32f.png)
まだ連携中サービスがない場合はこのような画面が出ます。
<h4>アクセストークンの発行(開発者向け)</h4>
の<strong>トークンを発行する</strong>をクリックします。
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471662/da66b266-3906-00ee-2306-10a1de9f2ecd.png)
通知を受け取るトークルームを選択します。
自分の場合は1：1トークルームを選択しましたが、グループなどに通知し複数人が同時に通知を受け取ることも可能になっています。
トークン名は適当に好きな名前に設定します。自分の場合はラズパイ呼び出しボタンに使用するので画像のような名前になっています。
###トークン発行完了
トークンが表示されます。<strong>これは二度と表示できない</strong>ので、<strong>必ずコピーし保存してください。</strong>

では。
配列の操作（forEach・map・filter・find）

この四つの違いがよく分からないので復習を兼ねて自分なりにまとめてみた。

#forEach
- 配列内の要素を指定したコールバック関数で<b>順に処理する（配列の各要素に対して一度ずつ実行する）</b>ためのメソッド。

```js
const array = ['北海道','青森','岩手','秋田','宮城'];
array.forEach(function(pref){
  console.log(pref);
});
//北海道
//青森
//岩手
//秋田
//宮城
```
コールバック関数の引数にprefと設定しているが、この変数に配列の値が1つずつ代入される。

#map
- 配列を指定したコールバック関数で加工した結果をコールバック<b>関数の戻り値として返し、新たな配列を作成する</b>ためのメソッド。

```js
const array = [10,20,30,40,50];
let result = array.map(function(num){
  return num * num;
});

console.log(result);
// [ 100, 400, 900, 1600, 2500 ]
```

#filter
- 指定されたコールバック関数で個々の要素を判定し、<b>条件に合致した要素を取り出す</b>ためのメソッド。

```js
const array = [10,20,30,40,50];
let result = array.filter(function(num){
  return num % 3 === 0;
});

console.log(result);
// [ 30 ]
```

#find
- 配列の要素にしていされたコールバック関数を適用していき、<b>条件に合致した最初の要素の値を取り出す</b>メソッド。見つからない場合はundefinedを返す。

```js
const boat = [
    {name: '蒲郡', code: 7},
    {name: '平和島', code: 4},
    {name: '住之江', code: 12},
    {name: '平和島', code: 44}
];

const result = boat.find( race => race.name === '平和島' );

console.log(result) // { name: '平和島', code: 4 }
```
以下、見つからない場合。

```js
const boat = [
    {name: '蒲郡', code: 7},
    {name: '平和島', code: 4},
    {name: '住之江', code: 12},
    {name: '平和島', code: 44}
];

const result = boat.find( race => race.name === '園田' );

console.log(result) // undefined
```


アロー関数の書き方も入っているが、当初raceって宣言してないのになんで使えるんだと
とても気持ち悪かった。

#最後に

もっとわかりやすくまとめられるようになろう汗

#参考文献・サイト
- 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- https://developer.mozilla.org/ja/
Ubuntu 18.04で便利ツールのインストール纏め

Ubuntu 18.04で便利ツールのインストール纏め

# 画面キャプチャ Shutter
```console
sudo add-apt-repository -y -n ppa:ubuntuhandbook1/shutter 
sudo apt update 
sudo apt install shutter 
```

# 画面録画 SimpleScreenRecorder
```console
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder
```

# 翻訳 StarDict
```console
sudo apt-get install stardict

```

### 辞書の追加
- 辞書のダウロード

[Resources for Stardict](https://kdr2.com/resource/stardict.html) 

- stardictのdicにコピー

```
sudo tar jxvf /tmp/stardict-jmdict-en-ja-2.4.2.tar.bz2 -C /usr/share/stardict/dic/
```

# Ubuntu 18.04に、ログイン前にVNC接続するには 

https://www.ninton.co.jp/archives/3064


# 【Python】VSCode で外部モジュール・外部ライブラリも含めてデバッグする方法

https://daeudaeu.com/import_debug/

# VSCode で Python と OpenCV を混合でデバッグ（ステップ実行）する方法！

https://daeudaeu.com/opencv_debug/

PythonからOpenCVのcontribを使用する

https://qiita.com/0x0c@github/items/b3104e30c46db42dea25

```
cmake ../ -DCMAKE_BUILD_TYPE=Debug -DOPENCV_EXTRA_MODULES_PATH='/home/k-koh/gitlab/opencv_contrib/modules_custom' -DOPENCV_ENABLE_NONFREE:BOOL=ON
```

https://ddkang.github.io/2019/03/23/opencv-3.4.html
Linux基礎(ファイルシステムの管理)

#ファイルシステムの管理
ファイルシステムの空き容量やinodeの使用状況は、<strong>df</strong>コマンドで確認できる。Linuxでは、以下2つが別々に保存されている。2を格納しているのが<strong>inode</strong>と呼ばれる管理領域です。inodeはファイルシステムの作成時に自動的に用意されてファイルやディレクトリ作成時に1つずつ使用される。ディスク容量に空きがあっても、サイズの小さなファイルを大量に生成してinodeが不足すれば新規ファイルの生成が不可になる。

1. ファイルのデータ
2. ファイルの属性や管理情報


- <strong>df [オプション] [デバイス名/ディレクトリ]</strong>

|オプション|説明|
|---|---|
|-i|inodeの使用状況を表示|
|-h|容量を単位(MBやGB)で表示|
|-k|容量をKB単位で表示|
|-m|容量をMB単位で表示|

ディレクトリやファイルの容量を表示するためには、duコマンドを使用する。引数にディレクトリ名を表示しない場合、カレントディレクトリを対象として表示する。

- <strong>du [オプション] [デバイス名/ディレクトリ]</strong>

|オプション|説明|
|---|---|
|-a|ディレクトリだけでなく、ファイル容量も表示|
|-c|合計容量も同時に表示|
|-h|容量を単位(MBやGB)に変換して表示|
|-k|容量をKB単位で表示|
|-m|容量をMB単位で表示|
|-s|指定したファイルやディレクトリのみの合計を表示|
|-S|サブディレクトリ内の容量を含まずに合計を表示|

|コマンド|説明|
|---|---|
|df|Disk Free|
|du|Disk Used|

#ファイルシステムのチェックと修復
システム障害によりファイルシステムに障害が発生した場合、fsckコマンドにより、ファイルシステムの整合性チェックと障害箇所の修復を試みることができる。ディスクチェックと修復はファイルシステムのアンマウント状態で行う。

<strong>fsck [オプション]　デバイス名</strong>

|オプション|説明|
|---|---|
|-t|ファイルシステムの種類の指定(ext2、ext3、xfsなど)|
|-a|自動的に修復を実行|
|-r|対話的に修復を実行|
|-A|/etc/fstabに記述されている全てのファイルシステムの検査|
|-N|実際には修復を行わず、コマンドが実行する内容を表示|

```shell
# ext3のファイルシステムの/dev/sda1をチェック
$ fsck -t ext3 -a /dev/sda1
```

<strong>fsck [オプション]　デバイス名</strong>

|オプション|説明|
|---|---|
|-c|不良ブロックの検査|
|-p|全ての不良ブロックを自動的に修復|
|-v|詳細情報を表示|
|-y|全ての問い合わせに対して、自動的に「yes」と回答|
|-n|全ての問い合わせに対して、自動的に「no」と回答|

```shell
# ext3のファイルシステムの/dev/sda1をチェック
$ e2fsck -y /dev/sda1
```

#ファイルシステムのチューニング
<strong>tune2fs</strong>コマンドはext2、ext3、ext4のファイルシステムの色々なパラメーターを設定できるコマンド。またパラメーターの設定だけでなくext2形式からext3形式へファイルシステムを変換することができる。
<strong>tune2fs [オプション] デバイス名</strong>

|オプション|説明|
|---|---|
|-c 回数|ファイルシステムをチェックすることなく、マウントできる最大回数の指定|
|-i 時間|ファイルシステムのチェック間隔の指定|
|-j|ext2形式から、ext3形式へファイルシステムの変換|
|-L|ファイルシステムのボリュームラベルの設定|

```shell
# /dev/sda5のファイルシステムをext2形式からext3形式へ変換
$ tune2fs -j /dev/sda5
```

<strong>dumpe2fs</strong>コマンドはext2、ext3、ext4のファイルシステムの各種情報を表示する。
<strong>dumpe2fs [オプション] デバイス名</strong>

```shell
# /dev/sda1のスーパーブロックの内容を表示
$ dumpe2fs -h /dev/sda1
```

#XFSとReiserFSファイルシステム
多くのLinuxディストリビューションはext3, ext4が標準のファイルシステムになっているが<strong>XFS</strong>や<strong>ReiserFS</strong>のファイルシステムも利用可能。ファイルシステムごとに専用コマンドが用意されている。

|ファイルシステム|説明|
|---|---|
|XFS|SGI社が開発したファイルシステム。大容量のファイルを扱うのに適する。|
|ReiserFS|Linux向けに開発されたジャーナリングファイルシステム。ファイル検索が高速|
エージェント指向＋サブジェクト指向＋オブジェクト指向＝新たなプログラミングパラダイム～プログラミングのあり方についての研究と考察④

#まえがき

どうも、お久しぶりです。
前回の投稿から約１か月経ちましたが、(決して)筆者の情熱が失せたわけではありません。
自分でも頭の中をうまく整理できなかったので、随分と時間がかかってしまいました。
いよいよ話が最後の辺りまで来て、どのようにまとめていけばいいのかが分からなくなっていたからです。
「エージェント指向」「サブジェクト指向」「オブジェクト指向」についての解説もそろそろ終わりに近づいています。
今回は、落穂拾い的な話になるかと思います。(間違いの訂正もさせていただきます・・・)。
では、しばしお付き合いください。

#本題
以前、”エージェントが周囲の状況を分析する”と書きましたが、これは正しくは、”サブジェクトが周囲の状況を分析して、シーンを判別する”ということになります。ここで、シーンとは、「状況をあらわすパラメータの集合」もしくは「状況を定義づけるもの」だということです。筆者の考え違いから、以前コメント欄に投稿してくださった方には、”エージェントが(独自に)状況を分析する”かのように伝えてしまいました。ここでお詫びをさせてください。(・・・申し訳ございませんでした)。

さらに詳しく書くと、サブジェクトがシステムの外部と直接つながるインターフェイスの役割を担うので、外部からの刺激・入力をいったんサブジェクトが受け取ります。これはサブジェクトが(システムにとっての)周囲の状況を分析する上で必要な情報を得ることに当たります。そして、サブジェクトが周囲の状況を分析して、現在システムがどのシーンにあるのかを探り当てます。この結果得られたシーンと、シーンに対応するポリシー(アクセス権限を司るもの)をエージェントに通知・受け渡しします。ここで最後に、エージェントがサブジェクトから受け取ったシーンとポリシーから、行動を決定します。

ここで、なぜ、サブジェクトが”周囲の状況を分析する機能を担う”のかについて解説します。エージェントは当然のことながら、現在のシーンがわからなければなにもできません。ここで、シーンを判別する処理はエージェントに担わせればいいではないかとの考え・意見も当然出てくるかと思いますが、シーンを判別するような普遍的な処理を(各自が特色のある)エージェントに実装するのは設計上あまりよろしくありません。しかも、「現実の状況」というのは、まず主観による決定以前に、客観による決定がなされるべきものだと筆者は考えます。つまり、状況については常に主観よりも客観が先行・優越するものであり、「客観」とは、”主観を超えた枠組み”であり、(状況については)ある一定の妥当性を担保するものだからです。ここで注意していただきたいのは、「客観」＝「(複数の)主観の合計」ではないということです。あくまでも、”客観は客観”という立場です。

#あとがき
いかがでしたでしょうか？
シーンについては、筆者の構成力がもっと高ければ、以前の記事に織り交ぜることもできたとは思いますが、なにぶん、力不足のゆえ、それは難しかったのです。今回は雑記のような稚拙な形になってしまったことについて、読者の方にお詫びしなければならないかもしれません。(・・・ゴメンなさい)。
さて、今回の記事をもって、わたしの当初伝えたかったことは伝えられたかなあといった具合です。
つぎもあるかもしれません。またお付き合いくださると嬉しいです。それではまた。
kotlin 高階関数の使い方

# 高階関数とは
高階関数とはパラメータとして関数を取るか、関数を返す関数のことです。

## 高階関数の例
以下の処理は引数で渡した処理を2回実行する

```kotlin
fun <T>twiceExecute(
    inputVal: T, executeFunc: (T) -> Unit) {
    executeFunc(inputVal)
    executeFunc(inputVal)
}

fun main() {
    val helloWorld = "helloWorld"
    twiceExecute(helloWorld, { println(it)})
}
```
- `fun <T>twiceExecute` のTは引数の型
- `executeFunc: (T) -> Unit` のUnitは関数の戻り値の型

実行結果

```
helloWorld
helloWorld
```
### 拡張関数の例
map()の処理を関数名を変更して抜粋

```kotlin
fun <T,R> List<T>.mapImitation(transform: (T) -> R): List<R> {
    val result = arrayListOf<R>()
    for (item in this) {
        result.add(transform(item))
    }
    return result
}

fun main() {
    val intList = listOf(1,2,3)
    val doubled = intList.mapImitation({ it * 2 })
    println(doubled)
}
```
- `mapImitation(transform: (T) -> R)` Tは関数の引数の型。Rは関数の戻り値
- `: List<R>` 高階関数(mapImitation)の戻り値

実行結果

```
[2, 4, 6]
```
ラムダが唯一の引数の場合のみ括弧を省略可能

```kotlin
val doubled = intList.mapImitation { it * 2 }
```
Ubuntu 18.04 に ROS2 のIDE開発環境構築 ROS Qt Creator Plug-in

ROS2 のIDE開発環境構築 ROS Qt Creator Plug-inの設定を纏めます。

# Qt Creatorのインストール
1. [QT](https://www.qt.io/offline-installers)の左メニュー「Qt Creator」リンクより最新版（現在：4.10.0）をダウロード

```console
$ chmod 755 qt-creator-opensource-linux-x86_64-4.10.0.run
$ ./qt-creator-opensource-linux-x86_64-4.10.0.run
```

# ROS Plug-inのインストール
1. [ROS Qt Creator Plug-in](https://ros-qtc-plugin.readthedocs.io/en/latest/_source/How-to-Install-Users.html)リンクより最新版をダウロード

```console
$ chmod 755 qtcreator-ros-bionic-latest-online-installer.run
$ ./qtcreator-ros-bionic-latest-online-installer.run
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/2e41a47e-b693-b360-e568-85dc3251969d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/ec1bfc91-fff3-5dfd-2997-91550bd20826.png)

# ROS Plug-inの設定
## Debug許可
```console
$ sudo gedit /etc/sysctl.d/10-ptrace.conf
change kernel.yama.ptrace_scope to 0
$ sudo systemctl restart procps.service
```

## Syntax Color Schemes設定
```
Tools > Options > Text Editor > Font & Colors
Monokai(1)を選択
```

## ROS Code Format設定
```
Tools > Options > C++ > code style
ROSを選択
```

## ROS 設定
オプション > ROS
Set Build System to Colcon
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/5ec41c3e-fa6e-ee82-c543-6fe22f27e2db.png)



## Import a ROS Workspace
New Project > Other Projects > ROS Workspace
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/e4d7fd2c-6a20-772f-fd77-738ade510216.png)

Set Build System to colcon for ros2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/0d6b9818-6a2f-a0e8-73dc-8fb6a33f1347.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/c23161c1-903b-1b90-7b59-fe928400449e.png)

## ビルド設定
プロジェクト > Build & Run > Build
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/aff277b6-9076-9702-5b55-2417a24b6936.png)

プロジェクト > Build & Run > Run
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/36b3adb3-b431-7bde-76df-37c48a664381.png)
エンジニアスタンプラリー～フロントエンド編＃2

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画 
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
JavaScript基礎
前回と同様、基本的にMDN Web docs（初学者バイブル）を参考にする。

## Basic of JavaScript

#### Syntax and Basic Constructs
MDN-Mozillaの[JavaScript basics](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)を参考。
次ステップがDOM操作なので、DOMに触っていはいけません。あくまで文法と構成。
HTMLのonclickから無理やり呼び出す。

```javascript:main.js
function sorry() {
    var result = "Sorry, Backend Stamp Rally is under construction";
    alert(result);
}
```

#### Learn DOM Manipulation
前項同様、MDN-Mozillaの[Getting started with HTML](https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started)を参考に実装。
雑、汚、古。しかし、これもルール。

```javascript:main.js
function addSkill() {
    var skillBox = document.getElementById('skill-box');
    var skillName = skillBox.value;

    if (skillName == "") {
        return
    }

    skillBox.value = "";

    // article要素を生成
    var article = document.createElement('article');
    article.className = 'skill';

    // h3要素を生成
    var h3 = document.createElement('h3');
    h3.textContent = skillName;

    // p要素を生成
    var p = document.createElement('p');

    article.appendChild(h3);
    article.appendChild(p);

    // 生成したdiv要素を追加する
    document.getElementById('contents').appendChild(article);
}
```

#### Learn Fetch API / Ajax (XHR)
[Fetching data from the server](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)を参考に実装。
CORSの制約が面倒だったので、ローカル資材からFetch。(API ??)

```javascript:main.js
function fetchApi() {
    var url = "assets/tenki.json";
    fetch(url).then(function(response) {
        response.text().then(function(text) {
            var json = JSON.parse(text);
            var json_forecasts = json["forecasts"][0];
            var weatherItem = document.getElementById('weather-news');
            weatherItem.textContent = json_forecasts["date"]+"："+json_forecasts["telop"];
        });
    });
}
```

#### ES6+ and modular JavaScript
ES6の内容が重すぎて、チュートリアルな記事が見つからない。
従って、筆者の偏見で以下の機能を重点的に追加。

* let, const
* アロー関数
* import, export

```javascript:main.js
import { fetchApi } from "./fetch.js";
import { addSkill } from "./skill.js";

document.getElementById("backend").addEventListener("click", (event) => {
    event.preventDefault();
    alert("Sorry, Backend Stamp Rally is under construction");
}, false);

document.getElementById("add").addEventListener("click", (event) => {
    event.preventDefault();
    addSkill();
}, false);

fetchApi();
```

#### Understand the concepts Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict, how browsers work, DNS, HTTP
急に詰め込みだしてやっつけ感が垣間見える。
一通り用語をググった。以上。
※後続課題で反映させる予定

## 成果物
裏では色々変えているのに、見た目はほぼ変わらないのがこの企画の醍醐味。
https://tonchan1216.github.io/WDR-frontend/v2/
https://github.com/tonchan1216/WDR-frontend/tree/v2.0
STM32L4がSTOPモードに入らないときの対処法

# 環境
- NUCLEO-L432KC(STM32L432KC)
- STM32CubeMX
- STM32Cube FW_L4 V1.14.0

# 症状
STM32L4には、省電力モードがいくつか用意されていて、用途に合わせてモードを切り替えることができる。
ファームウェア付属のサンプルを参考にして、Runモードから以下のようにしてSTOP2モードに入り、

```c
    /* Enter STOP 2 mode */
    HAL_PWREx_EnterSTOP2Mode(PWR_STOPENTRY_WFI);
```

一定時間経過後RTCからの割り込みをトリガにRunモードに復帰して色々しようとしたところ、どうもSTOP2に入らずすぐに次のRunモード部分に飛んでいるようだった。
色々コードをいじってみたが直らず、ある時成功したかと思いきや、同じコードを書きこみなおすと再び症状が現れた(！？)ので、どうも直っていないようだった。

# 解決
以下のサイト(STのコミュニティ)
[STOP2 mode not Entering from HAL_PWREx_EnterSTOP2Mode](https://community.st.com/s/question/0D50X00009XkY7aSAF/stop2-mode-not-entering-from-halpwrexenterstop2mode)
の書き込みによると、
*```Try to disable the Systick timer. If any IRQ is pending, the core does not enter stop2 mode.```*
とのこと。そこで、HAL_Delay()やTimeoutの管理に使われているTimebaseのSourceをSysTickから使っていないTIM1に変更すると、STOP2モードに入るようになった。

↓ここを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269891/5f702041-e5ca-7943-afa8-6195763f7556.png)
↓こうした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269891/caf3f270-5f2d-376b-46d5-91cf4d5399db.png)

# 追記(動作未確認)
Systickを止めるには`HAL_SuspendTick()`、再開には`HAL_ResumeTick()`を使うのかもしれない。

# 参考
[CubeMX/HALのSystick割り込みについて - 滴了庵日録](https://lipoyang.hatenablog.com/entry/20180131/p1)
ゼロからAmazon S3

データのバックアップにAmazonのストレージを使いたいと思ったのだけれど、用語がちんぷんかんぷんだったのでまとめる。

# 参考

- [Amazon S3のご紹介 (Amazon)](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/Introduction.html)
- [Amazon S3 (Qiita)](https://qiita.com/leomaro7/items/e6bfc93f03ca4235f14a#_reference-90de274a783a113f69c0)

# サービスのイメージ

Amazon S3 (Simple Storage Service)は、クラウド上にある倉庫サービスのようなもの。

## バケットとオブジェクト

- **バケット**（Bucket, バケツ）：最も大きな管理の単位で、コンテナのようなもの。ここにたくさんのファイル（オブジェクト）を入れていくことができる。
- **オブジェクト**：データの管理単位で、一意な**キー**（識別子、名札のようなもの）と関連づけられている。単一オブジェクトのサイズは5TBまでのようだ。便宜上ではあるが、PCのファイルシステムのように階層的なキーの仕組みにすることもできる。

原則としては「バケット」と「キー」を指定することで、特定のオブジェクトを参照することができる。

## バージョニング

ユースケースとして、同じデータの異なるバージョンを管理したい場合が多い。こういった場面に備えて、S3にはバージョニングの機能をつけることができる（デフォルトではオフになっている）。この場合は「バケット」「キー」「バージョン」の組み合わせで一意なオブジェクトが取り出せる。

## データの出し入れ

基本的には「[AWSマネジメントコンソール](https://aws.amazon.com/jp/console/)」なるウェブアプリケーションがコンシェルジュ的な役割を果たしてくれ、このコンソール上でほとんどの操作を実行することができる：

- 格納（PUT）
- 取り出し / キーのリスト (GET)
- 削除（DELETE）

各オブジェクトの操作１つ１つに応じて、料金がかかってくる（操作の種類やストレージクラスによっても料金が違う；後述）。

当然のことながら、ライブラリを用いたアクセス方法やREST APIも存在する。その場合は[AWS Identity Access Management (IAM)](https://aws.amazon.com/jp/iam/)を利用したアクセス権の管理が必要になってくるけれど、今回の目的（データのバックアップ）とはずれてくるので省略。

## 取り出しやすさ（ストレージクラス）

倉庫サービスの用途には、大まかに分けると２種類ある（もっと細分化することはできるけれど、ここでは無視する）：

1. **普段使い**：よく出し入れする、それほど大きな容量は必要ない
2. **保管目的**：あまり出し入れしない、大きな容量が必要

これらを基本とした仕様用途に対応して、S3には**ストレージクラス**（ストレージの階層）なるものが存在する。普段使い向けには`STANDARD`クラスが、あまり使わないもの向けには`STANDARD_IA` (たぶん"infrequent access"の略)が、ただ保管するだけのもの向けには`GLACIER`（氷河）というクラスがある（実際には、それぞれが細かく分かれている）。

- オブジェクトごとにストレージクラスを設定することができる（倉庫の奥の方に置くか、手前に置くかみたいなもの）。
- 仕様状況に応じてクラスを自動変更するように「ポリシー」を設定することもできる。
- クラスによってオブジェクトの出し入れにかかる時間、レスポンスの速さ、保管と出し入れにかかる料金が違ってくる。
- とくに`GLACIER`系は「アーカイブクラス」と呼ばれ、保存に特化している。データ取り出しの際に余分に「復元」と呼ばれる処理を行う必要があり、データが取り出し可能になるまでに1日~数日待たなければならない。

# おわりに

- 手数料等も考えると、10TBを単に保管するだけで1年で最低6000円くらいかかってくる。しかも多少なりとも出し入れしたいと思うともう少し（IAで90円/10GBくらい？）上乗せされるし、取り出しの際にいちいち時間をかけなければならない。
- 一方で、これだけの料金でメンテナンスの心配から解放されるし、それなりにデータの冗長化もしてくれる。

これを高いとみるか、安いとみるか… EC2のようなクラウドコンピューティングと組み合わせるなら使い勝手が高そうだけれど、ただ保存するだけならどうなんでしょうね。やはり外付けHDDから溢れた、ずっと残しておきたいデータを保管する、というレベルの使い方になりそうな気がする。
初心者によるプログラミング学習ログ 111日目

# 100日チャレンジの111日目

Twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

111日目は、

* メンターさんのオリジナル課題をやりました。（ただし、終わっていません）
* Udemyでwebデザイン。架空のサイトのサイドバーの残り仕上げとメインコンテンツ部分作成

# MENTA でメンターを雇う

ぱぺまぺは、独学では限界があると思っているので、MENTAというwebサービスでメンターさんを雇いました。
月額料金かかりますが、独学よりはいいかと。

```qiita.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript sample</title>
</head>
<body>
  <div id="sample">
  <P>textcontent</P>
  </div>

<script src="scripts/text.js"></script>
</body>
</html>

```


```scripts/text.js


//textcontent:内容を取得

var sample = document.getElementById("sample");
console.log(sample.textContent); 

//textcontent:内容を設定
document.getElementById("sample").textContent = "testtesttest";


``` 


メンターさんの課題をやっていて、.textcontentを使ったほうがいい、といわれたので。
簡素になってしまいましたが、あとで修正。


## webデザイン・・・photoshopで架空のサイトのメインコンテンツ作成

* altキー押しながらドラッグで複製つくれる
* ガイドは必須です
* ガイド引く→長方形選択ツールで幅or高さ調べる→ガイド引く
* ズームで1ピクセルもムダにしないこと。
Laravel + Nuxtで急にGmailが送信できなくなった件について

# 事象
本番環境でメール送信をメールホストをGmailのSMTPで送信していたが急遽エラーが発生した

```
Failed to authenticate on SMTP server with username 
"XXXXXXXX@gmail.com" using 3 possible authenticators.
 Authenticator LOGIN returned Expected response code 235 but got code
 "534", with message "534-5.7.14
```

# 参考サイト
http://raichel.hatenablog.com/entry/2015/04/17/003021

# 解決方法
Gmailの外部アプリケーションで使用するパスワードをアプリケーションごとに固定化したpasswordを設定する必要がある

[アプリ パスワードの固定化](https://support.google.com/accounts/answer/185833?authuser=2)を参考に下記の手順でやったら解決できました

##### ①2段階プロセスの有効化
##### ②アプリパスワードを作成
アプリの選択でその他を選択肢、アプリ名を記載する
CentOS 8にPython 3.6をインストール（ApStream）

# はじめに

CentOS8にOS標準のPythonをインストール
親記事：そのうち作成予定
参考：[RHEL8のパッケージ構成 - BaseOSとApplication Stream - 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## note

- AppStreamレポジトリにあるけどLife Cycleのページには掲載がない。これはOS標準ということなのだろうか？？

## LOG

### インストール

```shell-session
# cat /etc/redhat-release
CentOS Linux release 8.0.1905 (Core)

# yum install -y python3
... 略
```

### 各種確認

```shell-session
# which python3
/usr/bin/python3

# python3 -V
Python 3.6.8
```