OmniAICreator/Qiita-1.07M huggingface dataset:
Font Awesomeの利用方法

TwitterやFacebookのアイコンを使いたい場合、`Font Awesome`というものを利用できます。
たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことが出来ます。
https://fontawesome.com に詳しい使い方やアイコンの一覧が載っています。

#利用方法
Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeのCSSファイルを読み込む

```index.html
...
<head>
    ...
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
...
```

②`<span>`タグに`fa`クラスと`fa-アイコン名`クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が載っています。）
これだけで簡単にアイコンを表示させることができます。

```index.html
<span class="fa fa-facebook"></span>
<span class="fa fa-twitter"></span>
```
ThinkPad X280用のLinux用ドライバー


トラックポイントがやたらめったら動くのでドライバーをちゃんとインストールしてみた。
けどあまり変わらないかもしれない。。。

# 構成
- Thinkpad x280
- Ubuntu 20.04

## WiFiネットワークドライバー

```
sudo add-apt-repository ppa:canonical-hwe-team/pc-oem-dkms
sudo apt update
sudo apt install backport-iwlwifi-dkms
```

```
wget https://wireless.wiki.kernel.org/_media/en/users/drivers/iwlwifi/iwlwifi-cc46.3cfab8da.0.tgz
tar xvzf iwlwifi-cc-46.3cfab8da.0.tgz 
cd iwlwifi-cc-46.3cfab8da.0/
sudo cp iwlwifi-cc-a0-46.ucode /lib/firmware/
modprobe iwlwifi
```

## グラフィックドライバー

```
sudo add-apt-repository ppa:graphics-drivers
sudo apt -y update 
sudo apt -y install nvidia-driver-430
```

## 参考
https://download.lenovo.com/pccbbs/mobiles_pdf/tp_p1_gen2_ubuntu_18.04_lts_installation_v1.0.pdf
「margin: 0 auto」と 「text-align: center」の使い分け

要素を中央寄せにする方法として、`margin: 0 auto`と`text-align: center`がありますが、2つの使い分けについて説明します。
`div`などで広い範囲を囲うようなブロック要素の場合は`margin`を、テキストやボタンのようなインライン要素・インラインブロック要素の場合は`text-align`を使うようにしましょう。
カーソルが乗った時のスタイルを指定する

カーソルが乗ったときの状態を`hover`と言います。
CSSで、`セレクタ:hover`とすることで、カーソルが乗ったときのCSSを指定することができます。

```style.css
div:hover {
  background-color: red; /* カーソルが乗った時に背景色を変更 */
}
```
displayプロパティの利用方法

ボタンを`<a>`タグで実装しようと思ったときなど、
`<a>`タグはインライン要素なので`width`や`height`が指定できないなど不都合がある場合があると思います。
そんな時は`display`プロパティでインラインブロック要素に変更することができます。

#インラインブロック
ブロック要素とインライン要素の特徴を併せ持つ`インラインブロック要素`というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。

||ブロック要素（`<div>`タグなど）|インラインブロック要素|インライン要素（`<a>`タグなど）|
|---|---|---|---|
|width, height  |指定できる  |指定できる  |指定できない|
|margin, padding  |指定できる  |指定できる  |左右のみ指定できる|
|配置|縦並び |横並び |横並び |

#`display`
`<a>`タグは初期状態でインライン要素になっていますが、`display`プロパティを使うと、インラインブロック要素に変更することができます。
`display`プロパティは`block`（ブロック要素）, `inline-block`（インラインブロック要素）, `inline`（インライン要素）を指定することができます。

```style.css
a.btn {
  display: inline-block;
}
```
WorkSpacesの構築をやってみた

#はじめに
リモート環境の検証でAmazon WorkSpacesに開発環境を構築してみた。

#構築内容
構築インスタンス
　・Windows10

導入アプリ
　・VSCode
　・eclipse
　・maven
　・OpenJDK11

#構築メモ
　・VSCode
　　https://azure.microsoft.com/ja-jp/products/visual-studio-code/
　　その他設定
　　　日本語設定
　　　https://qiita.com/nanamesincos/items/5c48ff88a4eeef0a8631

　　　プラグイン導入
　　  https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234

　・eclipse
　　Spring環境を動かしたかったので、Eclipse Pleiades All in One (STS, Lombok 付属) を導入。
　　（ダウロード）https://mergedoc.osdn.jp/
  　（参考サイト）https://spring.pleiades.io/guides/gs/sts/

　　その他設定
　　　eclipseがそのままだと重いので下記のページに書いている設定を実施

　・maven
　　本家よりダウンロード（導入は、3.6.3） https://maven.apache.org/
　　
　・OpenJDK11
　　JDKダウンロードサイトより取得
　　http://jdk.java.net/java-se-ri/11

#書簡
##構築作業について
・2VCPU 7.95GBのWindows10を作成してみたが、
　インスタンス作成からログインまで30分ほどかかった。
##端末の動作・速度に関して
・思った以上に普通に動いた。というか、ノーマルのPCとの差は触った限りだとわからないくらいだった。
・ログインして動かした感じは、それほど重たくなかった。
　まだ何もインストールしてないのでこれから重くなっていくかもしれないが、
　思った以上に軽快に動作している。
・途中4vCPU 16GBを動かいてみたが、やはりこちらのほうがサクサク動作している（まぁ、当たり前か）
・ネットワーク通信で、それほどレイテンシーを感じることはないが、試しにYoutubeで動画を流してみたが、遅延でカクカクになって遅さを体感することができた。
　オフィス系、開発系のアプリケーションを使っている分には、問題なく利用ができそうだ。

#次に向けて
・クライアント端末を変えて引き続き確認をやっていこう。
  対象:　iPad,ChromeOS,MacBook
要素を中央に配置する

中央に寄せるためには`margin`の左右に`auto`を指定する。
`margin`に`auto`を指定するときは必ず`width`も併せて指定しましょう。
なお、上下の`margin`に`auto`は指定できません。


```style.css
.box {
 width: 300px;
 margin: 0 auto;
}
```
WEBページの背景画像を指定する

背景画像はCSSで指定します。
CSSで背景画像を指定するには`background-image`プロパティを使います。
ただ`background-image`で指定された背景画像は表示範囲を埋め尽くすまで、繰り返し表示される性質があります。
そんなときは`background-size: cover;`を指定して、1枚の画像が表示範囲を埋め尽くすように画像の大きさを拡大縮小します。

```style.css
.background {
 background-image: url(画像URL);
 background-size: cover;
}
```
【やってみた】Spring チュートリアル

springのチュートリアルでの学習をまとめる

##やったこと
[タスクのスケジュール](https://spring.pleiades.io/guides/gs/scheduling-tasks/)


##【環境】
- Spring Tool Suite 4
:Version: 4.4.1.RELEASE
- ProductName:Mac OS X
- ProductVersion:10.14.6


## 【作るアプリ】
Spring の `@Scheduled`アノテーションを使用し、5秒ごとに現在時刻を出力するアプリを作成する

- 適当なディレクトリに移動

```
$ git clone https://github.com/spring-guides/gs-scheduling-tasks.git
$ cd gs-scheduling-tasks
```

- 編集：pom.xml
 - awaitility 依存関係の追加(cheduledTasksTest.java のテストのため)

- スケジュールされたタスクを作成
 - 作成：新規ファイル (src/main/java/.../schedulingtasks/ScheduledTasks.java)

- スケジューリングを有効にする
 - 編集：(src/main/.../schedulingtasks/SchedulingTasksApplication.java)

```java
import org.springframework.scheduling.annotation.EnableScheduling;
```

- 実行可能 JAR を構築する
 - 移動：mavenディレクトリに移動する
 - 実行1:「./mvnw spring-boot:run」 を使用してアプリケーションを実行する
 - 実行2:「./mvnw clean package」のあとログに表示されるパスをコピペして貼る。


```
[INFO]
[INFO] Results:
[INFO]
[INFO] Tests run: 1, Failures: 0, Errors: 0, Skipped: 0
[INFO]
[INFO]
[INFO] --- maven-jar-plugin:3.2.0:jar (default-jar) @ scheduling-tasks ---
[INFO] Building jar: /Users/#{myname}/projects/gs-scheduling-tasks/initial/target/scheduling-tasks-0.0.1-SNAPSHOT.jar
[INFO]
[INFO] --- spring-boot-maven-plugin:2.3.2.RELEASE:repackage (repackage) @ scheduling-tasks ---
[INFO] Replacing main artifact with repackaged archive
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  9.307 s
[INFO] Finished at: 2020-08-08T21:52:43+09:00
[INFO] ------------------------------------------------------------------------

#実行、アプリ起動
$ /Users/#{myname}/projects/gs-scheduling-tasks/initial/target/scheduling-tasks-0.0.1-SNAPSHOT.jar


``` 

- アプリ起動
 - $ /Users/#{myname}/projects/gs-scheduling-tasks/initial/target/scheduling-tasks-0.0.1-SNAPSHOT.jar
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313771/bf54b491-2cc2-09d6-a632-f2ff74ef61a3.png)




参考記事(いつもありがとうございます)
---
[タスクのスケジュール](https://spring.pleiades.io/guides/gs/scheduling-tasks/)
[Spring Bootでtaskを定期実行する方法](https://qiita.com/rubytomato@github/items/4f0c64eb9a24eaceaa6e)
ヘッダとフッターの実装

HTML5には`<header>`と`<footer>`というタグが用意されているのでヘッダとフッタを実装するときはこのタグを使いましょう

🙅‍♀️

```index.html
<div class="header"></div>
<div class="contents"></div>
<div class="footer"></div>
```

🙆‍♀️

```index.html
<header></header>
<div class="contents"></div>
<footer></footer>
```
[Heroku]Cloudinary環境においてCarrierwaveで画像をアップロード

#プログラミングの勉強日記
2020年8月9日　Progate Lv.226
[前回の記事](https://qiita.com/mzmz__02/items/e653cebf095a0aa9cf7c)に引き続きHerokuを扱う。
前回までにRailsアプリケーションをHeroku上で公開することができた。

#目標
　今回はすでにローカルでCarrierWaveを用いて画像の投稿ができるので、それをHeroku上でもできるようにする。

　現在、Cloudinary環境においてCarrierwaveで画像をアップロードしようとすると以下のエラーが出てしまう。

「We're sorry, but something went wrong.
If you are the application owner check the los for more information.」
<img width="376" alt="0808-5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/7e8cef26-f4e3-c434-c259-47586e4c0399.png">



#方法

##0.5. Herokuにクレジットカードを登録する
　Cloudinaryと連携するためには、クレジットカードを登録する必要がある。（無料で行える）

[こちら](https://dashboard.heroku.com/account)からログインをする。以下の手順に従ってクレジットカードを登録する。

###1. Account Settingsをクリック

<img width="472" alt="0809-5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/7d0908f6-53c1-9b12-53ba-dc02ef3e3c56.png">

###2. Billingタブをクリックし、Add Credit Cardをクリック

<img width="423" alt="0809-7.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/a23a480b-cef7-811b-74be-3edaf25811d3.png">

###3. カード情報を登録する

<img width="298" alt="0809-6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/8cf9fe96-660d-92a4-c69a-3649f620da70.png">


##1. HerokuとCloudinaryを連携する
　HerokuとCloudinaryを連帯するためのアドオン（追加機能）を追加する。Herokuのブラウザからでもコマンドからでも追加することができる。

###コマンドで追加する場合
 
```:ターミナル
$ heroku addons:add cloudinary:starter
```

###ブラウザから追加する場合

[こちら](https://elements.heroku.com/addons/cloudinary)から登録する。

####1. Install Cloudinaryをクリック

<img width="468" alt="0809-3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/c0a0e012-9bb2-90c3-ef08-4fc2e3246d9c.png">


####2. Add to provisio toにサービス名を入力し、Provision add-onをクリック

<img width="471" alt="0809-4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/2ba7be56-6275-75ac-b87f-2ad36e5dfa2b.png">


##2. アップローダーファイルの編集
　このアップローダーファイルはCarrieawaveを使って画像をアップロードするための設定ファイル。

```ruby:アップローダー(app/uploaders/image_uploader.rb)
#変更前
if Rails.env.production?
  include Cloudinary::CarrierWave
  CarrierWave.configure do |config|
    config.cache_storage = :file
  end
else
  storage :file
end

#変更後
#if Rails.env.production?
  include Cloudinary::CarrierWave
  #CarrierWave.configure do |config|
    #config.cache_storage = :file
  #end
#else
  #storage :file
#end
```


#感想
　Railsのバージョンが5.1.7だったので、バージョンをアップデートしたりmaster.keyを使ってみたり、Gemfileを変えたり、ビューファイルを変えてみたり、様々なことをしたが、クレカの登録が必要だった。
　最初にターミナルで`heroku addons:add cloudinary:starter`を実行したときに英語の文章をちゃんと読んでいなくてクレジットカードを登録する必要があるのにもかかわらず、それを飛ばしてしまってたのが大きな原因であった。
　基本的には、ローカルでCloudinaryとCarrierWaveを用いて画像を投稿する機能ができていれば、上記のようにすればHeroku上で問題なく動いた。
　ここまでするのに多くの時間を費やしてしまったが、勉強になった。

#参考文献
[Heroku + Cloudinary環境でCarrierwaveで画像アップロード](https://rails-ambassador.herokuapp.com/tips/HerokuCloudinaryCarrierwave)
[We're sorry, but something went wrong.If you are the application owner check the logs for more information.でハマる。](https://qiita.com/kentarothehusky/items/5a4fb20f3f3354f59dc7)
iOS13 で UILabel のスタイルが間違えて表示されている可能性がある

### 起きたこと

UILabel の `attributedText` を nil (リセット) にしてもラベルのスタイルが変わらないという現象が発生していました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292456/2e9a89b3-6880-1951-1262-7507cb8e308a.png)



### TL;DR

#### 原因

UILabel の attributedText の値が nil(リセット)になった場合、通常(iOS12以前)は Label の attributes もリセットされるが iOS13 ではリセットされないとの[報告](https://developer.apple.com/forums/thread/121366)があり、それが起因して考えられます。

#### 解決策

UILabel の `text`・`attributedText` はどちらか一方の値が変わるともう一方の値も変わるという連動性があることから(下記ドキュメント)、今回のように `text`・`attributedText` を共存させて更新することはシステムのバグに限らず望ましくないので、`attributedText` のみ明示的に更新処理を行うように修正したところ解決しました。

- [https://developer.apple.com/documentation/uikit/uilabel/1620542-attributedtext:title]

- [https://developer.apple.com/documentation/uikit/uilabel/1620538-text:title]


※ iOS13のバグかどうかについては現在のところ不明


### 具体的な発生タイミングと改善

#### Before

チャットに表示する UI で、コメントがリンクの場合は青く表示させて Clickable にさせるように UILabel を継承したサブラクス(以降: LinkLabel)を作成していました。基本的な仕様としては LinkLabel の `text` プロパティに didSet をセットし、更新されたタイミングでテキストをトリミングして `attributedText` を更新するという感じです。

```swift
final class LinkLabel: UILabel {
    override var text: String? {
        didSet {
            updateAttributedText()
        }
    }

    func updateAttributedText() {
        guard let text = text else {
            return
        }
        let mutableAttributedString = NSMutableAttributedString(string: text)

        // 省略....
        // いろいろ Attributes をセットする

        attributedText = mutableAttributedString
    }
}
```

上記で作成した LinkLabel を Cell に配置して TableView で表示した時に、Cell が再利用されるタイミングで以前の attributes がキャッシュされていて関係ないコメントも青く表示されることがたびたび起こるようになりました。

#### After

`TL;DR` にも記載してある通り、`attributedText` だけを明示的に更新することで改善できたので下記のように修正します。

```swift
final class LinkLabel: UILabel {
    var displayText: String?

    func setText(_ text: String?) {
        displayText = text
        updateAttributedText()
    }

    func updateAttributedText() {
        guard let text = displayText else {
            return
        }
        let mutableAttributedString = NSMutableAttributedString(string: text)

        // 省略....
        // いろいろ Attributes をセットする

        attributedText = mutableAttributedString
    }
}
```

使用する Cell 側でもキャッシュをリセットできるように `prepareForReuse()` セットします

```swift
final class CommentCell: UITableViewCell {
    let linkLabel = LinkLabel()

    override func prepareForReuse() {
        super.prepareForReuse()
        linkLabel.attributedText = nil
    }

    // 省略...
}
```


### 調べたこと

- UILabel の attributes がリセットされないという事例・報告がありました。
  - https://developer.apple.com/forums/thread/121366


- 解決のヒントは下記にありました。
  - https://stackoverflow.com/questions/58628067/cant-reset-uilabel-attributedtext-when-a-uitableviewcell-is-reused


- `typingAttributes` で attributes が保存されてるからか？と思いましたが、そもそも UITextView のプロパティで UILabel には存在しませんでした。
  - https://ios.developreference.com/article/15032664/Reset+attributes+of+attributedText+in+textView+when+clearing+it+-+Swift


- 公式ドキュメント
  - https://developer.apple.com/documentation/uikit/uilabel/1620542-attributedtext

  - https://developer.apple.com/documentation/uikit/uilabel/1620538-text
左右別々のセパレート型キーボード、Ergodox EZについて

#始めに

よくプログラミング関係に関わりのない人から「君のキーボードなんかすごいね」と言われるので珍しいセパレート型の自分のキーボードについて書いていきたいと思います。

![IMG_0137.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664274/42e4818e-785a-df1b-c521-66c4816d1457.jpeg)


#Ergodox EZ
qiitaでもちょくちょく見かけますが自分の使ってるキーボードはErgodox EZ、左右別々のセパレート型の直交配列キー(ortholinear) が一番の特徴です。購入に至るきっかけとしてはエンジニアとして１日８時間ぐらいタイピングしてるわけですから一番体に良い、健康的な姿勢を作ってくれるキーボードが欲しかったです。やはりどうしても普通のキーボードやラップトップのキーボードだと背中や肩が丸まったり、手首も自然体な角度で作業出来ないので自分の健康優先で選択しました。手根管症候群(Carpal Tunnel)になったら元も子もないですからね。

#慣れるまではむずい
慣れるまではただただ苦痛でしたね。僕のキーキャップはブランクを選んだので最初の一ヶ月程度はキーマップをパソコンの壁紙にしてました。また思ったより直交配列キーも慣れるのに大変でした。ついつい隣のキーを打ったりしてましたがこれも一ヶ月程度で克服しました。もしこのキーボードを購入する場合最初の少しは自宅で練習してからオフィスに持っていった方がいいですね。

# オープンソース
元々Erogodoxというのは[オープンソースプロジェクト](https://www.ergodox.io/)で僕が購入した[Ergodox EZ](https://ergodox-ez.com/)はプロジェクトの製品化した商品で全て完成した状態で送られてきます。オープンソースのため、qiitaでもPCBを直接頼み、半田付けをしたり、全て自分で製作し、ワイヤレスになるようカスタマイズしてる人を見かけます。僕の同僚の中ではPCBを製作し、レイヤー番を表示できるように外付けLCD画面をつけた人もいます。

#自由自在のキーマップ
キーマップの配置はErgodoxEZの作成元であるZSA社が[Oryx](https://ergodox-ez.com/pages/oryx)というGUIを公開しており、他の人のキーマップなどを参考に自分のキーマップを作ることができます。また直接キーマップのファームウェアをキーボードにブートロードさせたい場合はコマンドライン上で[QMK](https://docs.qmk.fm/)を使うことができます。キーマップの自由自在の醍醐味はやはり時間をかけて、「あのキー打ちにくい」、「このキーはよく使う」と自分のタイピングをアナライズしそれを元に少しずつ手を加えて行くのがいいと思います。またよく使うソフトウェアのホットキーなども変えてゆき、自分だけの開発環境を作る楽しさもあります。

#振り返り
このキーボードを購入し仕事で使い始めてから約一年が経とうとしてますが購入してよかったです。僕としては初のメカニカルキーボードでしたがそれ以上にエルゴノミクスの良さを感じております。キーボードの親指付近の四つの小さいキーは思った以上に使えなく、勿体無いなと思ってます。つい先日ZSA社が発表した[ムーンランダー](https://www.zsa.io/moonlander)というErgodoxをベースにした新たなモデルが発表され、この配置では4つの小さいキーを無くし、三つの大きいキーに変更されました。こっちのほうが使いやすいと思います。価格としては$365と安くはないですが、ErgodoxEZのモデルと比べると同じぐらいの値段です。（もしerogodox ezの購入を検討されるのなら、絶対アームレストとキーの高さを変えられるアジャスターは必須だと思ってます）。最後にキースイッチですが僕はオフィスでうるさくならないように Cherry Brownを選びましたが正直もうすこくクリック感がある Blueにすればよかったなと思ってます。特にニューヨークでは当分WFHなのでオフィスに戻ることはないと思うのでクリック音の心配はありません。
【Laravel】Migrationファイル　リレーション設定のちょっとした注意

Migrationファイルを使って、リレーション設定を行う際のちょっとした注意メモ。

```php:エラーがでたファイル
<?php
//-- 略
class CreatePostsTable extends Migration
{
    //-- 略
    public function up()
    {
        Schema::create('Posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->bigInteger('user_id');
            $table->foreign('user_id')->references('id')->on('users');
            $table->timestamps();
        });
    }
}
//-- 略
```

上記のようなマイグレーションファイルをコマンドでmigrateしたときエラーが発生。
どうやら`$table->foreign('user_id')->references('id')->on('users');`のように`user_id`を外部キーとして使用している場合は、カラム定義の際に`$table->bigInteger('user_id');`という記述を`$table->bigInteger('user_id')->unsigned();`という感じで`unsigned`をつなげて書く必要があるようです。（MySQLの場合）


```php:OKだったファイル
<?php
//-- 略
class CreatePostsTable extends Migration
{
    //-- 略
    public function up()
    {
        Schema::create('Posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->bigInteger('user_id')->unsigned(); // 変更
            $table->foreign('user_id')->references('id')->on('users');
            $table->timestamps();
        });
    }
}
//-- 略
```

ちょっとしたメモでした。
CPUとGPUの違い

#CPUとは？

- **C**entral **P**rocessing **U**nitの略で、コンピュータ内で制御や演算を行うための部品のこと。日本語では「中央演算処理装置」という。

- CPUはコア（演算器）を数個〜数十個持っている。


#GPUとは？

- **G**raphics **P**rocessing **U**nitの略で、コンピュータグラフィックスの演算などを行う画像処理装置のこと。

- GPUはコア（演算器）を数十個〜数千個持っている。


- GPUはもともと画像処理を高速に行うために開発されたものだが、GPUを機械／深層学習などの汎用計算に応用する**「GPGPU(General purpose computing on GPU)」**が広がってきている。

#CPUとGPUの違いは？

- CPUがOSのような複雑なプログラムの処理に適しているのに対して、GPUは大量の単純な計算が要求されるディープラーニングに適している。
死ぬときに遺言を実行してくれるオブジェクト(C++)

[Testate.h](https://gist.github.com/nariakiiwatani/c010dff2fb5bb045e10f4219bd404253)
（Testate＝遺言を残した状態を表す形容詞）

# 概要

みなさん、このスコープを抜けたときに〜したいとか、このインスタンスが死ぬときに〜したいとかいう場面は多いんじゃないかと思います。
スコープだと書き忘れによるバグが心配ですし、インスタンスの場合はデストラクタに書けばいいじゃんと思いがちですが、こんな風にデストラクタとかフィールドが汚れるの嫌じゃないですか？僕は嫌です。
それに、フラグを立てる箇所と回収する箇所が離れてるとバグを生みやすいと思うんですよね。
フラグは立てた箇所に回収処理を書きたいし、何かの後始末はそれが必要になった箇所に書きたいですよね。

```C++
class SomeClass {
public:
	~SomeClass() {
		// このチェックしたくない
		if(isProperlyCreated()) {
			destroy();
		}
		// このフラグ作りたくない
		if(is_opened) {
			close();
		}
	}
private:
	bool is_opened = false;
};
```

ということで、こちらを使えばスッキリ解決です。


```C++:Testate.h
#pragma once

#include <functional>

class Testate
{
public:
	using Will = std::function<void()>;
	Testate(){}
	Testate(Will lastword) {
		leaveWill(lastword);
	}
	void leaveWill(Will lastword) {
		lastwords_.push_back(lastword);
	}
	void expire() { is_expired_ = true; }
	~Testate() {
		if(is_expired_) return;
		for(auto &&lastword : lastwords_) {
			lastword();
		}
	}
private:
	std::vector<Will> lastwords_;
	bool is_expired_=false;
};

```

# 使用例

```C++:使用例(クラスメンバー)
#include "Testate.h"

class SomeClass {
public:
	void open() {
		// ...some stuff here to open something
		// and leave a last word
		// `close()` will be executed when this class dies.
		terminator.leaveWill([&](){close();});
	}
private:
	Testate terminator;
};
```


```C++:使用例(スコープ)
{
	Testate onScopeEnd([&](){popSomeThing();})
	pushSomething();
	// do something here

	// `popSomething()` will be executed when exiting this scope.
}
```


```C++:使用例(with_expiration)
{
	Testate if_succeeded([&](){submitSomething();});
	for(auto &&cond: conditions) {
		if(!cond.check()) {
			if_succeeded.expire();
		}
	}
	// when exiting this scope, `submitSomething()` will be executed
	// unless it is not expired.
}
```

# 名付けについて

[SFPC Summer 2019 in Yamaguchi](https://www.ycam.jp/events/2019/sfpc/)での経験と、昔読んだ[リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)の記憶が結ついて、ちょうど意味のある（リーダブルコードで言う「カラフルな」）名付けを意識し始めた時期だった。

クラス内に使われている語彙としては以下がある。
- testate : 遺言を残した状態
- will : 望み・遺言
- last word : 遺言・最後の言葉
- expire : （契約・有効期限の）期限切れ
（別にネイティブチェックを受けたわけではなく、辞書とフィーリングでやってしまっているので間違いがあれば教えて欲しい。。。）

もっと機能に寄せて
- `ScoredPromise`とか
- `Afterwards`とか
- `reserve`とか
- `task`とか
- `finally`とか
を名付けに使ってもよかったところかもしれないが、これらは僕の感覚ではあまりカラフルではなく、面白味が少ないと思ってしまう。
名付けで誤解を生んでは本末転倒、という人もいるかもしれないが（そしてそれには同意するが）、そこを保ったままで、どう人の心を動かすのかとか、どう自分の経験や思いをプロダクトに反映するのかという視点は継続して持っていたい。


# その他

あとでReactを勉強してから思いましたが、発生と回収を近い位置に書きたいという姿勢はReact hooksのuseEffectに近いかもしれない。
【Mongoose】2つのテーブルを関連付ける

##Mongooseにおいて、２つのデータベースを関連づける

例）UserデータベースとTaskデータベースを関連付けたい

→Mongooseが定義するUserデータベースのスキーマにtask配列をプロパティとして組み込む
→仮想プロパティ（virtual property)を作成する

##仮想プロパティとは
実際のデータではなく、２つの実体（エンティティ）の間の関係を示すもの。

・[Mongoose公式ドキュメント](https://mongoosejs.com/docs/guide.html#virtuals)
<img width="1169" alt="スクリーンショット 2020-08-08 22.53.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/a0544654-f0bf-1a01-72d9-c79c18bcae74.png">
<img width="1189" alt="スクリーンショット 2020-08-08 22.53.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/bd144687-3cb7-259a-34fa-a0328d589497.png">

・仮想プロパティの記述例

```javascript

userSchema.virtual('tasks', {　　//仮想フィールドの名前をつける（tasks)
  ref: 'Task',
  localField: '_id',   //userデータベース側の外部キー
  foreignField: 'owner' //taskデータベース側の外部キー
})
```


記述例）
・Usersテーブル

```javascript

const mongoose = require('mongoose')
const Task = require('./task')

const userSchema = new mongoose.Schema({   //データ型の設定
    name: {
      type: String, 
      required: true,
      trim: true
  },
  password:{
      type: String,
      required: true
      }
  })

userSchema.virtual('tasks', {   //仮想的なアトリビュートを１つ、付け加える
  ref: 'Task',
  localField: '_id',   //Userデータベース側の外部キー（_idは自動作成される）
  foreignField: 'owner' 　//Taskデータベース側の外部キー
})


//モデルを定義 Userドキュメントの定義
const User = mongoose.model('User', userSchema)

module.exports = User


```

・Tasksテーブル

```javascript
const mongoose = require('mongoose')

const taskSchema = new mongoose.Schema({  //データ型の設定
  description: {
    type: String,  
    required: true,
    trim: true
  },
  complete:{
    type: Boolean,
    default: false,
  },
  owner: {　　　　　　//外部キーとなるプロパティ
    type: mongoose.Schema.Types.ObjectId,
    require: true,
    ref: 'User'  
  }
})

const Task = mongoose.model('Task', taskSchema)

module.exports = Task

```
CakePHP3 の Cell を利用してアクセスカウンターを実装

# はじめに
私が運営しているブログ (駆け出しです) にサイトへの訪問者を表示させたかったので、アクセスカウンターを実装してみました。
CakePHP3 にはCell という機能があるので、こちらの機能を使ってみました。
※ブログ『CerisierAvantech FC-スリジエ・アバンテック FC』
URL：https://avantech-fc.com/

## 環境
* OS: Windows10
* PHP: 7.4.1

## 仕様
* リロードしてもカウントされない
* 自宅からのアクセスは対象外

# Cellのファイルを作成 (コントローラーの役割)
* display()では実行するための条件文、内部関数のgetCount()ではカウント処理を行なう。
* カウントを行う際は $counter_file で指定したファイルに書き込む。
* ○○○.○○○.○○.○○○ には自宅のIPアドレスが入ります。


``` php:site\src\View\Cell/CountsCell.php

<?php
namespace SiteApp\View\Cell;

use Cake\View\Cell;

/**
 * Counts cell
 */
class CountsCell extends Cell
{
    /**
     * count method
     * @return void
     */
    public function display()
    {
        session_start();
        $countTarget = false;

        if(@$_SESSION['access'] === 1) { // セッションが存在しているときはカウント対象外
            $countVal = $this->getCount($countTarget);

        } else { // セッションが存在していないとき
            if($_SERVER['REMOTE_ADDR'] !== '○○○.○○○.○○.○○○') { // 管理者のIPアドレス以外の時のみカウント処理を実行
                $countTarget = true;
                $_SESSION['access'] = 1;
            }
            $countVal = $this->getCount($countTarget);
        }
        $this->set('countVal', $countVal);
    }

    // *********************************************************
    // * User-defined functions
    // *********************************************************
    /**
     * Get Count Number
     * @param boolean
     * @return integer
     */
    private function getCount($countTarget) {
        $counter_file = 'avantech/counter.txt';
        $fp = fopen($counter_file, 'r+'); // ファイルがないときはエラーを返す
        $counter_length = 7;
        $countVal = fgets($fp, $counter_length);

        if ($fp && $countTarget) {
            if (flock($fp, LOCK_EX)) {// 排他ロック。読み取り/書き込みともに不可。
                $countVal++;
                rewind($fp); // ファイルポインタの位置を先頭に戻す

                if (fwrite($fp, $countVal) === FALSE) {
                    echo ('<p>'.'入場者数のカウントに失敗しました'.'</p>');
                }
                flock ($fp, LOCK_UN); // ファイルロックを解放。
            }
        }
        return $countVal;
    }
}
```

# テンプレート

```html:site/src/Template/avantech/Cell/Counts/display.ctp
<section class="access-counter">
    <p>ご来場ありがとうございます。<br>
    あなたは<span><?= $countVal ?>人目</span>のサポーターです。</p>
</section>
```

# Cell の呼び出し (サイドメニューで表示)
CountsCell.php から変数を受け取り表示させる。

```html:site/src/Template/avantech/Layout/default.ctp

    <aside class="sidebar">
      <?= $this->cell('Counts'); ?>
    <aside>
```

# さいごに
下記参考サイトを参考になんとか実装して、本番環境にアップはしてみたものの、正確にカウントされていない(Googleアナリティクスの訪問数よりもはるかに多い)ので、何かがおかしい状態だと思われます。。
まずは備忘録として残しておきます。
改善点等がありましたら、ご指摘いただけますと幸いです。


# 参考
*  [Let'sプログラミング 「テキストのアクセスカウンタ」](https://www.javadrive.jp/php/sample/accesscounter/index1.html)
* [LIFE TIPS 「PHPでアクセスカウンターを作りたい！第二回～リロード対策～」](http://blog.kamabokonet.com/2014/10/09/php%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%84%EF%BC%81%E7%AC%AC%E4%BA%8C%E5%9B%9E%EF%BD%9E%E3%83%AA/)
メモ：Elastic IPアドレスの一覧を取得する

# バージョン
```bash
$ aws --version
aws-cli/2.0.25 Python/3.7.4 Darwin/19.5.0 botocore/2.0.0dev29
```

```bash
$ jq --version
jq-1.6
```

# コマンド
```bash
aws ec2 describe-addresses | jq '.Addresses[].PublicIp' > eip.csv
```
【初心者でも分かる】定義リスト（dl）を使って、tableみたいな表組みデザインを作る方法（レスポンシブ対応）

# どうも7noteです。表組みを作る際にtableで作るのが普通ですがもう一段上級テクニックを目指して、定義リスト(dl要素)を使って表組みデザインを作る方法を書いていきます。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/dl_table/
アクセス許可が降りていない時、設定画面に飛ぶ処理


            let url = URL(string:UIApplication.openSettingsURLString)!
            //UIApplication.shared.openURL(url as! URL) //非推奨のため、下記のものを使う
            UIApplication.shared.open(url, options: [:], completionHandler: nil) //openURlが非推奨のためこちらを使用
ページネーション機能の実装

## バージョン
・ruby 2.5.7
・Rails 5.2.4.3

## ページネーション機能を使って１ページにつき１０件だけ表示させたい 
イメージはこんな感じ
<img width="209" alt="pagination_result" src="https://user-images.githubusercontent.com/63037931/89711473-7866a900-d9c5-11ea-80a4-d5178c6931fc.png">

## まずgemをインストール
ページネーション機能の実装には、gemの「kaminari」を使います。
まず、gemfileでkaminariを記述する。

```ruby:Gemfile
gem 'kaminari'
```

Gemfileに追記できたら、ターミナルでbundle installを実行して、kaminariをインストールします。

```terminal:terminal
bundle install
```

## さらに以下のコマンドを実行
kaminariの設定ファイルを作成の為、下記を実行します。このファイル内にある数字を動かせれば１ページにつき、何件表示出来るか設定出来ます。

```terminal:terminal
rails g kaiminari:config
```

下記を実行して生成されるものはkaminariのデザインの修正ができます。
詳しくはこちらの記事が分かりやすかったです。
https://qiita.com/you8/items/df68aaee3010e282d1ae

```terminal:terminal
rails g kaiminari:default
```

## viewとcontrollerをページネーション用に変更
kaminariを利用するには、利用したいviewファイルに以下のように追記します。

```java:user/index.html.erb
<% @users.each do |user| %>
:
:
<% end %>
<%= paginate @users %>

```


controllerの方もallで取得していたのを以下のように修正します。
reverse_orderを指定すると新しい順に表示されるようになります。

```ruby:users_controler.rb
def index
 #@users = User.all
 
 @users = User.page(params[:page]).reverse_order
end

```



## config/initializersフォルダのkaminari_config.rbに何件表示させたいか記入すれば完成！！

```ruby:config/initializers/kaminari_config.rb

Kaminari.configure do |config|
 config.default_per_page = 10
end

```
JupyterにGTFS Realtimeの位置情報をプロットしたい！（バルーン付き）

# はじめに
バスの現在位置は、Google Mapからでも見られる時代ですが、自分の手でマッピングしてみましょう。pythonにfoliumというWeb地図表示プラグインを用いて表示してみます。
地図のアイコンはクリッカブルで、詳細な情報を表示することも可能です。

# 実装

```python:realtimebus.py3
from google.transit import gtfs_realtime_pb2
import urllib.request, urllib.error
import folium
import pandas as pd

#GTFS-RTの公開されているURL(宇野バスさん）
url ='http://www3.unobus.co.jp/GTFS/GTFS_RT-VP.bin'
#カラム名の宣言
list_df = pd.DataFrame(columns=['id' , 'vehicle_id', 'trip_id','vehicle_timestamp','longitude','latitude','occupancy_status'])
feed = gtfs_realtime_pb2.FeedMessage()

#データダウンロードとフォーマット変換
with urllib.request.urlopen(url) as res: #データダウンロード
    feed.ParseFromString(res.read()) #プロトコルバッファをDeserialize
    for entity in feed.entity:
        tmp_se = pd.Series( [
              entity.id,                         #車両ID
              entity.vehicle.vehicle.id,         #車両ナンバー
              entity.vehicle.trip.trip_id,       #路線番号？
              entity.vehicle.timestamp,          #車両時刻
              entity.vehicle.position.longitude, #車両緯度
              entity.vehicle.position.latitude,  #車両経度
              entity.vehicle.occupancy_status   #混雑度
        ], index=list_df.columns )
        list_df = list_df.append( tmp_se, ignore_index=True )

#地図の中心地点を算出
average_pos = list_df.mean()
# 中心座標付近の地図を作成
m = folium.Map(location=[average_pos['latitude'], average_pos['longitude']], zoom_start=11)
# 各バスをプロット(色は青)
list_df.apply(lambda row:
             folium.Marker(
                 location=[row['latitude'], row['longitude']],
                 popup='<table border="1"><tr><th>occupancy_status</th></tr><tr><td>'
                 +str(row['occupancy_status'])
                 +'</td></tr></table>',
                 icon=folium.Icon(color='blue',icon='bus', prefix='fa')
             ).add_to(m), axis=1)
m
```
# 結果
ダウンロードされたリアルタイム位置情報が地図上にプロットされました

<img width="1011" alt="スクリーンショット 2020-08-08 22.43.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53918/b6e617f6-bebf-67f5-a02a-ca44b4af193d.png">

実行したタイミングは２２時半過ぎてますが、まだバス動いているのですね。。。
ターミナルがフリーズした時の対処法

ターミナルが固まってしまった原因は、
”Ctrl+s”　を押して、スクロールロックされてしまっているから！

その時は、 慌てずに“Ctrl+q” でロックを解除すると動かせるようになります。
“Ctrl+c” でも動かせるようになるよ！！
参考になるRailsのプロダクトコード（OSS）5選

# はじめに
「この設計でいいのかな〜」「クラス名や変数名はこれでいいのかな〜」と思ったときに参考にできそうな、Railsで書かれたOSSを5つピックアップしました。

# 参考になるRailsのプロダクトコード（OSS）5選
## GitLab
![gitlab-blog-cover.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459522/d718327f-fcc5-b4f2-be41-a1a352ef312f.png)

- GitHub: https://github.com/gitlabhq/gitlabhq
- Webサイト: https://about.gitlab.com/
- GitHubみたいな、Gitリポジトリのホスティングサービス
- 今回紹介する5つの中で、おそらく一番大規模なアプリ

## RubyGems.org
![スクリーンショット 2020-08-08 22.23.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459522/1cc47243-3626-62a1-2616-64abb0f2e7b9.png)

- GitHub: https://github.com/rubygems/rubygems.org
- Webサイト: https://rubygems.org/
- RubyのGemを検索できるサービス
- 今回紹介する5つの中で、おそらく一番小規模でシンプル

## Spree
![スクリーンショット 2020-08-08 22.26.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459522/45213714-d465-e43c-e01a-993e8618cfb8.png)

- GitHub: https://github.com/spree/spree
- Webサイト: https://spreecommerce.org/
- BASEやSTORES、Shopifyのような、ECサイトを手軽に構築するためのサービス
- Spreeから派生した[Solidus](https://github.com/solidusio/solidus)というサービスも存在している

## Discourse
![スクリーンショット 2020-08-08 22.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459522/97c9dc4e-f4b4-7d56-99c3-75b3c38d6b94.png)

- GitHub: https://github.com/discourse/discourse
- Webサイト: https://www.discourse.org/
- 掲示板アプリ

## OpenProject
![スクリーンショット 2020-08-08 22.40.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459522/7cda6093-c9a2-493a-d328-8ee0410dc0f9.png)

- GitHub: https://github.com/opf/openproject
- Webサイト: https://www.openproject.org/
- RedmineやTrelloのような、プロジェクト・タスク管理ツール


# さいごに
先人の知恵を借りて、きれいなコードを書けるように努めましょう🕺
【Python】データサイエンス100本ノック（構造化データ加工編） 022 解説

- データサイエンス100本ノックをやりきる会を作りました🎉
- こちらの[Slack招待URL](https://join.slack.com/t/data-science-100nocks/shared_invite/zt-gfncg9vm-8W8b3UrDg8R~TKaqUkQpgw)からご参加ください！！
- ぜひ一緒に励まし合いながら、データサイエンス100本ノックをやり切りたいと思っています！

##Youtube
[動画解説](https://youtu.be/kusTfHiuU6A)もしています。

##問題
P-022: レシート明細データフレーム（df_receipt）の顧客ID（customer_id）に対し、ユニーク件数をカウントせよ。

##解答
```:コード
len(df_receipt['customer_id'].unique())
```

```:出力
8307
```

##解説
・PandasのDataFrame/Seriesにて、ユニークな行数をカウントする方法です。
・ユニークな行数が全部で何件あるのかを確認したい時に使用します。

※ちなみに、以下のコードもユニークな件数をカウントするコードであり、同じ結果を出力します

```:コード
len(df_receipt['customer_id'].value_counts())
```
Visual Studio Code で Flutter のテンプレートプログラムを起動してみよう

Android Studio での[手順](https://qiita.com/bonkoturyu/items/2bf172c5f8ab24e1547f)を書いたので、
Visual Studio Code での手順も記載しておく。

---

#Flutter のテンプレートプログラム？
ようはサンプルプログラム。
Visual Studio Code で自動的に生成してくれるテンプレート。
生成されたテンプレートを変更していく事で、プログラムを作っていけるようになっている。
とりあえず「動いたのをみてみなきゃ、開発環境が正しいか分からないだろ？」ってこと。

#Visual Studio Code で Flutter テンプレートプログラムを作る
1. Visual Studio Code を起動する。
2. メニューの「View」から、「Command Palette...」を選ぶ
3. 入力欄に「Flutter」と入力すると、一覧が出るので、「Flutter: New Application Project」を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/7fdfe838-a6b8-20cc-d4db-afa3b0642246.png)
4. 名前を決めろと言われるので決める
5. フォルダの選択画面が出るので、新しくフォルダを作ったりして、作成する場所を決める
6. 赤文字が消えてテンプレートが生成完了するまで待つ。
7. メニューから「Run」の「Start Debugging」を選ぶと実行される。

#参考
- Visual Studio Codeを使ってFlutterでHello Worldまでの手順
  - https://www.virment.com/vscode-hello-world-flutter/
CakePHPでMigraitonファイルのタイムスタンプがUTCなのは複数Timezoneで協業してもいいためだった

以下みたいにbakeでMigrationファイル作る
```bin/cake bake migration CreateUsers ```

そうするとファイル名に付与されるタイムスタンプがUTCになっている。

Timezoneは`Asia/Tokyo`にしているのになんでかなーと思ったら、複数Timezoneで働くことを考慮して、UTC固定にしていた。

https://github.com/cakephp/phinx/issues/354
https://github.com/cakephp/phinx/pull/355

なるほどなと思ったのでメモ。
（プロジェクトごとにTimezoneを固定すれば解決する気もしたけども。。）
sshdのログを監査し、ログイン成功したら外部メール送信する

sshdで、linux-desktopを開放しているので、ログ監査をする。

- CentOS7.5
- ログイン成功したら、メールを送信する。
- メール送信は、swatchを使う。
- メール送信設定は、これを参考に。
[メール送信設定](https://qiita.com/harasakih/items/ec7c7cbf01b763b84ef0)


# ログ監査の検討

## ログサンプル

webarenavpsはホスト名

```:/var/log/secure
## 証明書
Aug  8 15:35:15 webarenavps sshd[21794]: Accepted publickey for USER from IP.ADDR.FROM.ANYONE port PORT ssh2: RSA ****:***** 
## PASSWORD
割愛
```

# ログ監査

## swatchをインストール
```bash
# yum install swatch
```


## swatchで /var/log/secure を監査する
swatchのスクリプト

```perl:
#
# Swatch for /var/log/secure on webarena (centos)
#   /lib/systemd/system/user_swatch_secure.service
#

## swatchを無視する。OR条件は複数行にする
ignore   /sshd.*from 192.168.*/
ignore   /sshd.*from MY.HOME.IP.ADDR.*/
## mail送信する条件。パスワードと証明書認証
watchfor /sshd.*Accepted password/
  mail=YOUR@MAIL.DOMAIN,subject="webarenavps:sshd with password"
    threshold track_by=/sshd.*Accepted password/,type=limit,count=1,seconds=300
watchfor /sshd.*Accepted publickey/
  mail=YOUR@MAIL.DOMAIN,subject="webarenavps:sshd with publickey"
    threshold track_by=/sshd.*Accepted publickey/,type=limit,count=1,seconds=300
```

MY.HOME.IP.ADDRからのsshdログイン成功は無視する。


## 作成したswatchスクリプトをsystemdにサービス登録する

```conf:/usr/lib/systemd/system/user_swatch_secure.service 
[Unit]
Description=secure-log Authentication
After=rsyslog.service

[Service]
ExecStart=/usr/bin/swatch -c /root/binbin/swatch.webarenavps.secure.sh -t /var/log/secure --pid-file /root/user_swatch_secure.pid > /dev/null 2>&1
PIDFile=/root/user_swatch_secure.pid
KillMode=process
Type=simple
Restart=no

[Install]
WantedBy=multi-user.target

```
## systemdでサービス登録
```bash:
# systemctl enable user_swatch_secure
# systemctl start  user_swatch_secure
```
git、githubを用いて日記を書く

##はじめに
目的はマークダウン方式に慣れる、Diariesの作成方法を覚える、この２つです。
windowsです
プログラム始めたてのひよこ作なので、お手柔らかにお願いします。
　　　**ではつくっていこう！**

##1.git上でbranchを切るまで
1`mkdir (任意のディレクトリ名)`
　でディレクトリの作成ができる
2`cd (1で作ったディレクトリ名)`
 　で打ち込んだディレクトリに移動できる
3`git checkout master`
　でマスターのブランチへ行ける
4`git branch (任意のブランチ名)`
  　でブランチ作成完了！
　　　　　　　　　　　　　**第一工程完了！**

##2.文章作成
　いろいろなものを使って記述できるが、今回はVScodeを使ってマークダウン方式で書いていく。
1.VScode起動
2.新しいファイルを作る
3.VSCode左上のfileボタンからsaveをクリック
4.見出し１で作ったディレクトリにマークダウンファイルとして保存
5.自由に記述する
　　　　　　　　　　　　　　　　**完了！**　　　
##3.gitで、作ったものをpushする　　
1.、見出し１.4で作ったブランチへ行く
2.`git add (ファイル名)`
3.`git commit -m ”(コミットメッセージ)” `
　※コミットメッセージは概要を分かりやすく書く
4.`git push origin (ブランチ名)`
　　~~ここでやっと英字だらけの面倒くさい~~**gitでの作業全て完了！**

##4.githubでpull requestを完了させる
1.githubで自分の作成したものが届いているか確認し、クリックする
2.概要と一言を書き、右下のボタンからpull requestを完了させる
　　　　　　　　　　　**これで晴れて日記作成完了！**

##感想（初心者目線として参考になれば）
始めは人に丁寧に説明してもらっても、機械的に真似することしか出来なかったが、２，３回繰り返すとだんだんわかってきた気がします
繰り返し実行するのが大切だと感じました
　　　　
　　　　　　もし最後まで読んでくれた人がいたらありがとうございました！
xrdpのログを監査し、ログイン成功したら外部メール送信する＃２

xrdpで、linux-desktopを開放しているので、ログ監査をする。

- CentOS7.5
- ログイン成功したら、メールを送信する。
- メール送信は、swatchを使う。
- メール送信設定は、これを参考に。
[メール送信設定](https://qiita.com/harasakih/items/ec7c7cbf01b763b84ef0)


# ログ監査の検討

## ログサンプル

```/var/log/xrdp-sesman.log
## ログイン
[20200808-21:39:26] [INFO ] ++ created session (access granted): username USERNAME, ip WWW.XXX.YYY.ZZZ:PORT - socket: 12
## ログアウト
[20200808-21:49:57] [INFO ] ++ terminated session:  username USERNAME, display :10.0, session_pid 17979, ip WWW.XXX.YYY.ZZZ:PORT - socket: 12
```

# ログ監査

## swatchをインストール
```bash
# yum install swatch
```


## swatchで /var/log/xrdp-sesman.log を監査する
swatchのスクリプト

```perl:/root/binbin/swatch.webarena.xrdp.sh
#
# Swatch for /var/log/xrdp-sesman.log on webarenavps (centos)
#   /lib/systemd/system/user_swatch_xrdp.service
#

## swatchを無視する条件
ignore   /from MY.HOME.IP.ADDR.*/
## mailする条件
watchfor /access granted/
  mail=YOUR@MAIL.DOMAIN,subject="webarenavps:xrdp login successful"
    threshold track_by=/access granted/,type=limit,count=1,seconds=300
```

MY.HOME.IP.ADDRからのxrdpログイン成功は無視する。


## 作成したswatchスクリプトをsystemdにサービス登録する

```conf:/usr/lib/systemd/system/user_swatch_xrdp.service 
[Unit]
Description=xrdp-log Authentication
After=rsyslog.service

[Service]
ExecStart=/usr/bin/swatch -c /root/binbin/swatch.webarenavps.xrdp.sh -t /var/log/xrdp-sesman.log --pid-file /root/user_swatch_xrdp.pid > /dev/null 2>&1
PIDFile=/root/user_swatch_xrdp.pid
KillMode=process
Type=simple
Restart=no

[Install]
WantedBy=multi-user.target
```
## systemdでサービス登録
```bash:
# systemctl enable user_swatch_xrdp
# systemctl start  user_swatch_xrdp
```
AutoHotKeyのメモ

##ダウンロード
https://www.autohotkey.com/ 


##デフォルトの保存場所
```
C:\Program Files\AutoHotkey
```

##スタートアップ起動設定
ファイル名を指定して実行「shell:startup」
ahkのショートカットを入れとく

##キー
無変換　：　~vk1D
変換　　：　~vk1C


##私のahkファイル
```MyAutoHotKey.ahk
;方向キー
~vk1D & H::Send,{Blind}{Left}
~vk1D & J::Send,{Blind}{Down}
~vk1D & K::Send,{Blind}{Up}
~vk1D & L::Send,{Blind}{Right}

~vk1D & A::Send,{Blind}{Left}
~vk1D & S::Send,{Blind}{Down}
~vk1D & W::Send,{Blind}{Up}
~vk1D & D::Send,{Blind}{Right}


;エンター
;~vk1D & E::Send,{Enter}

;バックスペース
~vk1D & B::Send,{BS}
~vk1C & B::Send,{BS}

;デリート
;~vk1D & D::Send,{Delete}
~vk1C & D::Send,{Delete}

;ブラウザ
~vk1D & Q::Send,{Browser_Back}
~vk1D & E::Send,{Browser_Forward}

;仮想デスクトップ移動
~vk1D & Z::Send,{Blind}#^{Left}
~vk1D & X::Send,{Blind}#^{Right}


```
MPU6050の値をarduinoのシリアルに書き出したい



![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) 6軸センサの結果をarduinoに理解させたい

## 前回記事

https://qiita.com/Ninagawa_Izumi/items/8d9e023547c20bc171a0

の続きです。

## やること
6軸センサーのGY-521(MPU6050)の値をarduino（手元のものはTeensy3.2）で読み取り、そのローデータをシリアルに書き出します。

## 6軸センサーとは？
加速度センサーは重力加速度を検知し、水平に対する傾きを捉えることができます。
ジャイロセンサーは角速度を検知し、回転の動きを捉えることができます。
それぞれxyz3軸ずつ、合計6軸のデータを検出できるのが6軸センサーです。
MPU6050のデータを使いやすく補正・加工して出力するパッケージの一つがGY-521です。

## 準備物・実施環境
- Arduino系のもの（今回の狙いはTeensy3.2)
- 6軸センサ　GY-521(MPU6050)
- 手元の環境はMac


## 接続

| GY-521 | Arduino |
|:-----------|------------:|
| VCC      | 5V| 
| GND     | GND| 
| SCL       | SCL(Pin19)|
| SDA       | SDA(Pin18)|
| XDA       | none|
| AD0   | none|
| INT   | none|

SCL0はArduinoUno,Teensy3.2共にPin19です。
SDA0はArduinoUno,Teensy3.2共にPin18です。
接続は電源2本、信号2本の計4本で動きます。


## プログラム

#### Arduino系のスケッチ

```c++:Arduino系

#include "MPU6050.h"
MPU6050 accelgyro;

int16_t ax, ay, az;//加速度　int16_tは2バイトの符号付き整数 
int16_t gx, gy, gz;//角速度　同上

void setup()
{
  Wire.begin();
  Serial.begin(115200);
  accelgyro.initialize();//I2Cデバイスの初期化
  delay(300);
}

void loop()
{
  accelgyro.getMotion6(&ax, &ay, &az, &gx, &gy, &gz);
  Serial.print(ax); Serial.print(", ");
  Serial.print(ay); Serial.print(", ");
  Serial.print(az); Serial.print(" : ");
  Serial.print(gx); Serial.print(", ");
  Serial.print(gy); Serial.print(", ");
  Serial.print(gz); Serial.println("");
  delay(100);//0.1秒停止。停止時間はお好みで調整。
}
```

### エラーが出る場合(2021.01.03追記)

冒頭の #include "MPU6050.h" のところでエラーが出る場合は、ライブラリをインポートします。
メニューの「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」でMPU6050を検索し、「MPU6050」を導入すればOKです。


### 実行

超シンプルですが、これだけでシリアルモニタ上でずらりとデータが表示されるのが確認できるようになります。
加速度x,加速度y,加速度z : ジャイロx,ジャイロy,ジャイロz の順で書き出されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/3e944174-66b9-0b81-60e8-2c1db54ecd1f.png" width = 300>
あくまで参考ですが、手元の基板では向きは上図のようになっていました。（※違っていたらすみません。）

## 次回記事
https://qiita.com/Ninagawa_Izumi/items/93e0d64d1c220cae940b

このセンサーの値を使ってProcessing3で書いた画面内のオブジェクトをグリグリ動かします。
Gridsome入門 SPAを作ってみよう 【1日目 要件定義編】

# スケジュール
- [1日目 要件定義編](https://qiita.com/Dev-kenta/items/b5c8ea6b432fe3594282)←今ここ
- [2日目 環境構築編](https://qiita.com/Dev-kenta/items/6ae251a648e04b9cf026)
- [3日目 ドーナッツグラフ編](https://qiita.com/Dev-kenta/items/9e141767c42deee743c8)
- [4日目 棒グラフ編](https://qiita.com/Dev-kenta/items/780c3cb4a4d0cf813824)
- [5日目 GraphQL編](https://qiita.com/Dev-kenta/items/1d08ef27aa877cfb6771)
- [6日目 GraphQL編2](https://qiita.com/Dev-kenta/items/e4281380da38f57495b6)
- [7日目 GraphQL編3](https://qiita.com/Dev-kenta/items/1bf6dc021ec08932233c)
- [8日目 GraphQL編4](https://qiita.com/Dev-kenta/items/fcc65b0106ba29626db7)
- [9日目 デプロイ編](https://qiita.com/Dev-kenta/items/14ae9fdc6eec76f63ba1)

# やろうと思ったきっかけ
お盆休みで9日もあるので続けて何かやってみようかなあと思ったという、ありがちなやつ。
自分が怠けなければ9回分続きます(怠けるな)

# Gridsomeとは
Vue.jsベースのフレームワークです。
Jamstack frameworkと呼ばれているもので、J(Javascript)A(API)M(Markup)の頭文字から取られています。
詳しくはこちらを参照
https://gridsome.org/

# 今回作ろうとしてるもの
最近自分が資産運用に取り組み始めたので、その一貫で円グラフを使って資産管理アプリをSPAで作ってみようと思います。
イメージとしては円グラフで資産割合がわかるようにして、色んなグラフを切り替えれるようにしたい。

## 技術要件
- 言語 Vue.js
- フレームワーク Gridsome
- データソース　CSV(もしくはAPI作るかも時間あれば)
- インフラ AWS Amplify(S3) ※API作る場合はAPI Gateway,Lambdaも必要なはず

## 機能要件
- Vue.jsのグラフライブラリでポートフォリオを見やすく表示する(vue-chartlessが良いかなあ)
- 円グラフは何種類かのカテゴリ別で表示
- 月ごとの資産推移も表示させるページを作る


# あとがき
とりあえず1日目なのでこんなところで。
今日は日中お出かけしてたので、夜しかできなかったなあ。というか夜に思いついた。よし明日から本格的に頑張ろう。
OpenPLCでラズパイ制御

#何ができるか？
OpenPLCを使ってラズパイの回路を制御できるようになる。

#OpenPLC環境構築
[ここからインストール](![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/c953d508-4a1e-6e78-9bf3-1c622876f295.png)
http://...)
左側のRuntimeをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/abea9950-cb55-b250-df50-7c7a9ceeed53.png)

Windowsを選択するとダウンロードが始まる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/d5be6068-e281-db9e-6512-b3e3f816a6bf.png)

#サンプルラダーを書いてみる
プラスボタンを押して要素を追加する。
上部のVARなどをクリックした後に、余白をクリックするとスイッチなどの挿入ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/99d6a48b-aad7-6bb2-4fbe-268f4af70235.png)

上部の青い人のマークをクリックするとデバッグが可能。
スイッチなどをクリックしてON/OFFすることができる。
電位の変化をDebuggerで観察可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/a33a807d-8b8a-39bb-0483-8f743b71440b.png)

↓向きマークを押してラズパイ転送用のファイルを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/4b054b02-6940-279a-24b8-4663047dd4b7.png)

#ラズパイにOpenPLC環境を構築する
ラズパイのコンソールでリポジトリをクローンした後に、フォルダに移動して、インストールを開始すると環境構築が完了する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/d28bf9cb-efea-63d6-1d99-7a10ff3da651.png)

インストール後にブラウザでラズパイのIPアドレス：8080でOpenPLCのサーバーに接続できる。
ログインIDとパスワードはopenplc。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/0eb52032-2f07-e11f-d4d5-e3b47e44f2e9.png)

ハードウェアをラズパイに変更し保存する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/c0229bd1-2791-28bc-d0d8-78f8392cc10d.png)

プログラムのアップロードから先ほど作成したファイルをアップロードしRun PLCで動作する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/3b3b8fde-a431-aa1d-dee5-c133b6b9e3be.png)

###参考文献
Interface9月号(2020)
Android Studio で Flutter のテンプレートプログラムを起動してみよう

#Flutter のテンプレートプログラム？
ようはサンプルプログラム。
Android Studio で自動的に生成してくれるテンプレート。
生成されたテンプレートを変更していく事で、プログラムを作っていけるようになっている。
とりあえず「動いたのをみてみなきゃ、開発環境が正しいか分からないだろ？」ってこと。

#Android Studio で Flutter テンプレートプログラムを作る
Android Studio を起動する。プロジェクトが開かれてたら閉じる。

1. ↓この画面の「Start a new Flutter Project」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/b0679248-3ad5-1c41-72b9-c6979201c9fb.png)
2. 何も考えずに「Flutter Application」のまま「Next」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/6bddb80b-2dd3-a365-99b5-9069cfdfa647.png)
3. 「Configure the new Flutter application」の設定をする。終わったら「Next」をクリックする。
   1. Project name を決める。アプリの名前のこと。
   2. Flutter SDK Path はスルー。大抵はそのままでいい。
   3. Project location を決める。アプリのフォルダ名のこと。
   4. Description を決める。アプリの説明のこと。
4. 「Set the package name」の設定をする。終わったら「Finish」をクリックする。
Package name は、あとでアプリを公開したりするときにも関わるので、ちゃんと決めておく事。
ソースを使い回すときにも関わるから気をつけてね。
   1. Package name を決める。アプリ公開時のパッケージ名にもなるので注意。
   2. AndroidX はほっといて良さそう。
   3. Include Kotlin ～は、関係ないのでほっとく。
   4. Include Swift support ～も、関係ないのでほっとく。
5. メニューから Run すれば Build されて、実行される。

実行結果が見れなかった場合は、環境作成がうまくいってないので確認する。

# 参考
- Windowsでflutterインストール
  - https://qiita.com/nkmk1215/items/2b741157bc253350ff18
【私的メモ】初めてのQiita ＆ わろさわHTML基礎

@kurosawa_kuro さんのHTML学習をMacでやってみます。

特に目新しいことはやれな、自分の気づきをまとめます…が、その前に書き方がわからないので、

#0.  Qiitaの書き方
をまずググりました。

＜参照＞
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1
「#」をつけると、見出しになるみたい。なるほど！でもなんで？


#1. MacなのでCotEditorインストール

Macユーザーなので、黒澤先生が言った通りに授業中やってもうまくいかない。

後日ツイッターで@takumajimaに「CotEditor」を教えてもらう。
＜参照＞
はhttps://techacademy.jp/magazine/4720

**私がやったこと**
1. ストアからアプリ（無料）をダウンロード
2. CotEditorで新規ファイル作成→保存。
3. ファイルを「index.html」に名前を変更→先生のコードを書いて保存
4. ファイルをダブルクリックする

すると
<font color="DeepPink">できたー❤️</font>
これも「<!--font color="DeepPink"></font>」でいろが変わるのね（<!--の使い方は合ってるのかしら）
※：https://qiita.com/twipg/items/d8043cd4681a2780c160 で、色の付け方を学ぶ。


本来は文字化けができるらしいけれどCotEditorは上にエンコーディングの選択がすでにあって、自動的にこうなった。
![スクリーンショット 2020-08-07 14.33.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680670/72e6c9b1-af67-e8d0-6586-d9c745ca923a.png)

なるほど。

でも、そもそもコピペする内容が分からないので一個ずつ調べてみる。


#2. 「<!--」ってなに
ええ、もうそこからわかりません。

>「!-- --」とは、HTMLソースの中にコメント（注釈）を記述するためのものです。!-- --は<>と組み合わせて使用し「<!」でコメントの宣言開始、「--」でコメントの開始、同じく「--」でコメントの終了、「>」でコメントの宣言が終了します。

><!-- -->で囲まれた部分はブラウザには表示されませんので、作者が見るための覚え書きや注釈、ソースコード内の目印、タグの無効化、一時的にコンテンツの一部をを非表示にしたい場合などに使用されます。
https://html-coding.co.jp/annex/dictionary/html/html-comment/



#とりあえず、全部書いてみて作ってみたのがこちら
<!--h1>などで、表題のように文字の太さが変えられるのね。

![スクリーンショット 2020-08-08 21.48.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680670/e9fc82ea-6b21-d4e2-4574-4bdfb6f592f0.png)

でも７はない…と。いろんな文法を覚えないといけないみたいです。

まだ画像の貼り方がわからないのですが、（画像、どこにおいとけばindex.htmlに見られるようになるのかしら）第三回が始まりそうなのでひとまず「なにかしらを頑張ったという形跡だけ残すため」にアップします。単純でごめんなさい。
【Django】adminページをカスタマイズしたいって？

# はじめに

「Djangoの管理者ページのカスタマイズなんて、今までしたことないよ〜」という方向け。
初級編です。

カスタマイズしなくても十分使えそうだが、エンジニア以外の人が触るようになると、デフォルトだと少し寂しい？

詳細な解説というより、ググると良い用語をパパッと上げていくスタイルです。
ちゃんとまとめると大変ですからね。。。

Djangoのドキュメント
https://docs.djangoproject.com/en/3.0/ref/contrib/admin/

# ModelAdminクラス

基本的には、`ModelAdmin`クラスのサブクラスを作成して、カスタマイズ内容を記述する。
例えばSampleModelという名前のモデルをカスタマイズしようと思ったら、以下のようにする。

```admin.py

from django.contrib import admin

# 通常は「モデル名＋Admin」という名前にする
class SampleModelAdmin(admin.ModelAdmin):
    '''
    このクラスの中にカスタマイズ内容を記述
    '''

# SampleModelにSampleModelAdminを適用
admin.site.register(SampleModel, SampleModelAdmin)
```

これ以降は、ModelAdminクラスの中の記述のみを書く。
例えば

```python

def hoge():
    return
```
と書いたら、実際は

```admin.py
class SampleModelAdmin(admin.ModelAdmin):
    def hoge():
        return
```

と読み替えてください。

# どんなカラムを表示するか

<img width="1016" alt="スクリーンショット 2020-08-08 20.38.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211271/75a2e938-261f-1bab-f92b-93489c648010.png">

レコード一覧の一番上にカラム名が表示されるが、どんなカラムを表示したいか設定しよう。
以下はモデルがtext,updated_atというフィールドを持っていた場合の例。

```python
list_display = ('__str__', 'text', 'updated_at')  # この３つのカラムを表示する
```

次に、フィールドにはない値を表示する場合。

```python
list_display = ('__str__', 'text', 'updated_at', 'get_owner_name')

def get_owner_name(self, obj):
    # 第二引数のobjはレコード自身を表す
    return "I am owner"
get_owner_name.short_description = 'オーナー名'
```

こうすると「オーナー名」というカラムが追加され、この場合は全てのレコードに「I am owner」と表示される。

# 検索対象を設定する

<img width="1014" alt="スクリーンショット 2020-08-08 21.08.22のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211271/a9058aaa-9976-9426-981a-2be5a2637e47.png">

上部に検索ボックスが存在するが、その検索対象を絞ることができる。

```python
# SampleModel.text, SampleModel.updated_at, SampleModel.owner.username を検索対象にする
search_fields = ('text', 'updated_at', 'owner__username`)
```


# 操作を追加する

<img width="676" alt="スクリーンショット 2020-08-08 21.32.13のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211271/a751ab88-5fed-ff72-6805-721644d38ef8.png">


デフォルトでは「選択された<モデル名>の削除」という操作が存在するはず。
自作のアクションは以下のように`actions`にリスト形式で記述するが、ここに明示的に含めなくても「選択された<モデル名>の削除」は存在し続ける。

```python
actions = ['my_custom_action']

def my_custom_action(self, request, queryset):
    # なんか処理
    return None
my_custom_action.short_description = '私だけのアクション'
```

`return None`とすれば操作完了時に何もしないが、例えばテンプレートを返してページ遷移なんかもできる。

# モデルの表示名を変更する

<img width="676" alt="スクリーンショット 2020-08-08 21.32.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211271/cc26f4e5-d64a-3f0f-38c4-220e0e3f4815.png">

これは`ModelAdmin`ではなく元の`Model`クラスに書いておく。

```python

class SampleModel(models.Model):
     class Meta:
         verbose_name = 'サンプルモデル'
         verbose_name_plural = 'サンプルモデル一覧'
```

# フィールドにリンクを貼るか

```python

list_display_links = ('text',)
```

# 応用編：検索処理のカスタマイズ

検索対象のカスタマイズを紹介しましたが、検索ワード（クエリ）が与えられた時に、実際にどのような検索を行うかもカスタマイズできます。
これは長くなるので概要だけにしますが、以下の関数を定義して検索処理を上書きします。

```python

def get_changelist(self, request, **kwargs):
```

# 最後に

以上のカスタマイズができれば、はじめはそこそこ満足ではないでしょうか？
adminページのテンプレート自体のカスタマイズや、admi内でのページ遷移については別の記事で書こうかと思います。
FortniteをWindows PowerShellから起動する※おまけあり

# こちらがそのコマンドです

## PowerShellから起動する
```powershell:PowerShell
Start-Process -FilePath com.epicgames.launcher://apps/Fortnite?action=launch"&"silent=true
```
## おまけ：コマンドプロンプトから起動する
```cmd:コマンドプロンプト
start com.epicgames.launcher://apps/Fortnite?action=launch"&"silent=true
```
[opacity]と[rgba]の使い分け(HTML,CSS)

#薄さを変える[opacity]と[rgba]の使い分け
どちらも対象を薄くすることが可能ですが違いは何でしょうか。

opacityは全部を薄くします。
rgbaは部分的に薄くすることが可能です(背景だけなど)。

例えば

.class{
opacity:0.5;
}

と書けばclass全体が半分薄くなります。ただ、classの中の背景だけは薄くしたいということもあるでしょう。その時は

.class{
background-color:rgba(〇,〇,〇,0.5);
}

とすると背景だけうすくすることができます。

ちなみにopacityは和訳すると不透明度なので、1が一番濃く、0に近づくにつれて薄くなります。
rgbaは左から順にred,green,blue,alphaで、このalphaが透明度を指定できるのですね。(opacityと同様に1が一番濃く、0に近づくにつれて薄くなります。)