OmniAICreator/Qiita-1.07M huggingface dataset:
tabeで開いているファイルはそのタブにジャンプする

# tabeで開いているファイルはそのタブにジャンプする

こんな感じで,どんどん同じファイルが別タブで増えるのが嫌だったけど情報か見つからなかったので, vimrcを書きました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250644/06c47e7b-d195-3867-cc63-4d230262d3f9.png)




## 中身
これを`$MYVIMRC`にコピペすればtabeでできるはず

``` vimscript
command! -nargs=1 -complete=file Tabe call MyTabEdit(<f-args>)
function! MyTabEdit(...) abort
    let l:sbuf = &switchbuf
    if bufexists(a:1)
        let l:bufnr = bufnr(a:1)
        if l:bufnr is bufnr("%")
            " いま開いているなら何もしない
            return 
        endif
        for i in range(tabpagenr('$'))
            let l:bufs = tabpagebuflist(i+1)
            for j in l:bufs
                if j is l:bufnr
                    " 別タブで開いているならsbufferで飛ぶ
                    set switchbuf=usetab
                    execute "sbuffer" j
                    let &switchbuf = l:sbuf
                    return 
                endif
            endfor
        endfor
        " 見えていないバッファなら, 別タブで開く
        execute "tab split" a:1

    else
        " バッファがなければ開く
        execute "tabe" a:1
    endif
endfunction


cnoremap tabe Tabe
cnoremap tabedit tabedit

```


- `command! ...` 
:TabeでMyTabEdit関数を呼び出せるようにコマンド登録する. `-complete=file` を入れとくとtabキーでファイル補完ができるらしい
- MyTabEdit
コメントにあるとおり.
別タブで開く時は, switchbuf=usetabにして, sbufferでバッファを開くようにしている. 
- `cnoremap ...`
`:tabe`と入力したときに`:Tabe`と自動で変換する
同様に`:tabedit`と入力したときは`:Tabedit`とならないように, `:tabedit`と変換する.

- 
## その他 
変数の展開の仕方から, 関数の作成, 実行方法まで何もかもわからなかった.
勉強しながらかいたのでもっといい方法あるのかも...
ご存知でしたらおしえてください
Pardot のリード生成 (Salesforce Classic) ⇒ Pardot のフォームおよびフォームハンドラーの使用

１．次のうち、Pardot でフォームを作成する利点はどれですか?
２．Pardot でプログレッシブプロファイリングの基盤として使用できるデータの種類はどれですか?
３．連動項目を使用する理由は何ですか?
４．会社が Pardot 内で、フォームではなく、フォームハンドラーを使用するのはどのような理由からですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/21c36fd8-d134-c259-dd2c-f78e42a80089.png)
STM32L010F4P6と液晶、ACM1602K-NLW-BBWでHello Worldを表示(信号線10本)


x 原因は、わからないが液晶がちらつく場合は、ウェートを調整してね!!


STM32L010F4P6でmbedを使い8ビットモードで16文字2行液晶に
Hello Worldを表示するプログラム

いろいろ 2021/10/09

選定の理由は、単純に安いから秋月で400円
液晶の電源は、絶対5Vでそれ以下だと、濃度が調整
出来ない。やってみそ
電池でも使える事を考えて3.3Vから5VにDCDCしている

実験用の原型モデルとしては、自分の言うのもなんだけど
わかりやすいく、良く出来ていると思う。

注意としては、濃度調整を付けて調整してね!!

メリットは、わかりやすい(初心者向け)

デメリットは、遅いくて、最適化されていない
　まず、シフトが遅い　一般的には、シフトの回数分
　クロックが掛る。表引きがおすすめ
　コマンドは、表引きにした方がスッキリする。
　表引きかオペランドにダイレクトに描いた方が速い。
　わかりやすくする為にデータを8本使っている
　思ったより配線が大変で間違えやすい。
　



```c++

#include "mbed.h"

// 8bit hellworld
 
//*          *****  *****       ***  * *
//*         *       *    *     *   * * *
//*         *       *    *     *   * * *
//*         *       *    *     *   * * *
//*         *       *    *     *   * * *
//********   *****  *****       ***  * *
 

DigitalOut sl(PC_14); //RS
DigitalOut d0(PC_15); //D0

DigitalOut d1(PA_1); //D0
DigitalOut d2(PA_2); //D1
DigitalOut d3(PA_3); //D2
DigitalOut d4(PA_4); //D3
DigitalOut d5(PA_5); //D4
DigitalOut d6(PA_6); //D5
DigitalOut d7(PA_7); //D6

DigitalOut en(PB_1); //E

 
 
//Serial pc2(USBTX, USBRX); // tx, rx

 
int v;
int rs;
void seg1()
{
    d7=((v>>7)&1); //7
    d6=((v>>6)&1); //6
    d5=((v>>5)&1); //5
    d4=((v>>4)&1); //4
    d3=((v>>3)&1); //3
    d2=((v>>2)&1); //2
    d1=((v>>1)&1); //1
    d0=((v>>0)&1); //0
    sl=rs;   //delay(500);
    en=1;    //delayMicroseconds(40);
    wait_ms(1);
    en=0;    //delay(500);
}
 
 
int main() {
        
    //pc2.baud(9600);
    
    //pc2.printf("Hello World!");

    en=0; 
    
    //ファンクションセット1
    rs=0;
    v=0x30;seg1();
    wait_ms(5);
 
    //ファンクションセット2
    rs=0;
    v=0x30;seg1();
    wait_ms(1);
 
    //ファンクションセット3
    rs=0;
    v=0x30;seg1();
 
    //ファンクションセット 2ラインモード
    rs=0;
    v=0x38;seg1();
 
    //表示オフ
    rs=0;
    v=0x08;seg1();
 
    //画面クリア
    rs=0;
    v=0x01;seg1();
    wait_ms(2);
 
    //エントリーモードセット
    rs=0;
    v=0x06;seg1();
 
    //表示オン
    rs=0;
    v=0x08+0x04;seg1();
 
    //@文字の表示
    rs=1;
    v='@';seg1();
    wait_ms(2); 
    
    //1ライン目にカーソルを移動
    rs=0;
    v=0x80+0x00;seg1();
    wait_ms(2); 
 
    int ii;
    char ss1[]="Hello World !";
    ii=0;
    while(ss1[ii]!=0){
        //文字の表示
        rs=1;
        v=ss1[ii];ii++;seg1();
        wait_ms(2); 
    }

    while(1) {} //無限ループ
}



```

![9202F8BD-F3B6-4F8A-8559-53EC31630D1F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/464f5471-e86d-155f-ef39-ac39ea2b637a.jpeg)
【シェル】0埋めの連番を作成するときはseq -w を使うといいぞ


ちょっとした小ネタ

ターミナルで連番をつけたファイルを作ったりHTTPリクエストを投げるときに便利です。
for文とセットで使うと便利なのでコピペして使えるようにしました。

## かんたんなシェルスクリプトの例

```bash
#!/bin/bash
for i in `seq -w $1` ＃実行引数で取ると楽
do
    echo "hoge$i" #単純化するため標準出力するだけ
done
```

引数で指定した数までのhoge+０１~連番するだけのスクリプト

## 出力サンプル

```bash
＄ ./QiitaSample.sh 10                                                                    
hoge01
hoge02
hoge03
hoge04
hoge05
hoge06
hoge07
hoge08
hoge09
hoge10
```
期待値の結果としてはこんな感じになります。

## 参考リンク
[seq invocation (GNU Coreutils)](https://www.gnu.org/software/coreutils/manual/html_node/seq-invocation.html#seq-invocation)

#development/terminal
【HTML】<textarea>の内容を表示する際に<pre>でフォントを変えず、折返しさせる方法

###<pre>タグを使用すると改行はちゃんと改行されるが、フォントが変わってしまう。

####デモ

<p class="codepen" data-height="262" data-theme-id="dark" data-default-tab="html" data-user="rjwxfqli" data-slug-hash="YzGggBz" style="height: 262px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;textarea&amp;gt;と&amp;lt;pre&amp;gt;">
  <span>See the Pen <a href="https://codepen.io/rjwxfqli/pen/YzGggBz">
  &lt;textarea&gt;と&lt;pre&gt;</a> (<a href="https://codepen.io/rjwxfqli">@rjwxfqli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


####white-spaceプロパティなるものを利用すれば改行も反映される

改行ありのテキストを表示したいなら、表示するタグのCSSに以下を追加する。

```css
white-space: pre-wrap;
```

これで、preのように整形してくれるし、preだとフォントが変わっちゃうのも変わらなくしてくれる。

問い合わせフォームとかの長い文章を入力して、確認画面などに表示する際に使えるのかなと思います。
DNSSEC とは

## 勉強前イメージ

SECってことはセキュアなDNSってことかな？

## 調査

### DNSSEC とは

DNS Security Extensions の略で、
DNSの情報に電子署名を付けることで、
DNSのデータが正しい発行元のデータであることを検証することができるようにする拡張仕様です。

### なぜ正しいデータであることを検証しないとならないのか

DNSはドメイン名から対象のIPアドレスを教えてくれるシステムです。
webページを見る際にもDNSは使用されます。
このような重要なシステムですが、通信の殆どはUDPを使っており、また受け取った情報が正しいのかなどチェックしていなかったりします。
そこを突いた攻撃があります。

基本的なDNSの通信は以下になります。
ユーザが www.test.co.jp を見たい時、キャッシュサーバに問い合わせて
キャッシュサーバが各権威サーバに順番に問い合わせを行います。
キャッシュサーバがIPアドレスを取得したらユーザに返して、ユーザがそのIPアドレスでアクセスするという順番になります。

![2021-01-15 基本的なDNSの通信Untitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/022e30dd-e063-cdad-5382-f2788b65d3ea.png)


ですが、↑でも話したようにDNSの通信はUDPが多く使用されており、受け取り確認などもされていません。
チェックがされていないため、攻撃者が不正な応答を紛れ込ませてユーザに嘘のIPアドレスを教え、偽のサイトに誘導されるという攻撃方法があります。
そこでクレジットカードの情報が盗まれたりするなどフィッシング詐欺が考えられます。
これをキャッシュポイズニング攻撃と言います。

![2021-01-15 DNSポイズニングUntitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/c818035d-7692-c2bb-8a76-13412a886969.png)

### DNSSECの仕組み

DNSSECは公開鍵暗号のデジタル署名の技術を使用されています。
httpsのような汎用的なデジタル署名ではなく、DNSSEC専用のフォーマットが用意されています。
公開鍵暗号のデジタル署名されたDNS応答をキャッシュサーバが確認し、正しいDNS応答だと判断できれば
ユーザにIPアドレスを返すような形になっています。

![2021-01-15 DNSSEC Untitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/4f1659f9-41c1-70e1-2b76-5c3791cc62e2.png)


## 勉強後イメージ

まだDNSSECの詳細まで来てないのに結構難しい...
今度鍵の種類とか見ていきます....

## 参考

- [DNSサーバーへの「キャッシュポイズニング攻撃」対策について](https://www.ntt.com/business/services/network/internet-connect/ocn-business/ocn/customer/set_up/poison.html)
- [【図解】初心者にも分かりそうなDNSSECの仕組みと機能,シーケンス～キャッシュポイズニングと対策,普及/対応状況,KSKとZSKを分ける意義～](https://milestone-of-se.nesuke.com/l7protocol/dns/dnssec-summary/)
- [DNSSECとは](https://www.designet.co.jp/faq/term/?id=RE5TU0VD)
- [DNSSECとは](https://jprs.jp/dnssec/doc/dnssec.pdf)
- [DNSと脆弱性](https://www.nttpc.co.jp/technology/dns_security.html)
Markdown で表を書くVSCodeの拡張機能を作った

Markdown 記法で表を書くときに「表の構成」と「セルの内容」を分けて記述できる VSCode の拡張機能「markdowncat」を作りました。
コードブロック名を mdcat.table にすると ↓ のような表が書けます。

|コード|プレビュー表示|
|:----:|:----:|
|![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663/a7cafc78-181e-6b26-48f4-8b76b495c9b5.png)|![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663/46c8a51f-5a39-deac-4ce6-d8ccc0b68b0d.png)|
拡張機能の詳しい使い方は、[こちら](https://poyonshot.hatenablog.com/entry/2021/01/09/103522)にあるので参考にして下さい。

## 方針
VSCode のマークダウンのプレビュー表示は、markdown-it というライブラリを使っています。そして、markdown-it はプラグインで機能を追加できます。ということで markdown-it 用のプラグインを作って、Markdown 記法をカスタマイズすることにしました。

## npm ライブラリにする
せっかく markdown-it のプラグインとして機能を実装するので、マークダウンのカスタムコードを html に変換する部分を npm ライブラリにして公開しました。
https://www.npmjs.com/package/markdown-it-mdcat-table

## 最後に
markdowncat は、VSCode の拡張機能で検索してインストールできますので遊んでみて下さい。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663/d7b3d580-423d-a346-10d1-eac754e620ff.png" width=50%>
また、npm ライブラリにしたので、他のマークダウンライブラリで利用しやすくなったんじゃないかと思います。markdowncat と markdown-it-mdcat-table がお役に立てれば幸いです。

## 参考資料
https://code.visualstudio.com/api/extension-guides/markdown-extension
https://code.visualstudio.com/docs/languages/markdown
[My SQL] 複数のテーブルを1つに結合する方法

複数のテーブルを1つに結合する方法は大きく２つあり、内部結合と外部結合があります。

#内部結合とは？
テーブルの両方に結合条件で指定したレコードが存在しないと、結合後のテーブルに表示されないので、どちらか一方にしかないレコードは表示されません。

##内部結合の方法
テーブルAとテーブルBを `内部結合` する場合、以下のようになります。

```
SELECT　テーブルAから抽出するカラム
FROM 基準にしたいテーブルAの名前
JOIN　結合させたいテーブルBの名前
ON　結合条件（テーブルAの名前.基準にするカラム名 = テーブルBの名前.基準にするカラム名）
```


#外部結合とは？
外部結合には2種類あり、左外部結合と右外部結合があります。全データを表示する範囲をテーブルA（左側）か、テーブルB（右側）かを決められます。
テーブルの両方に結合条件で指定したレコードが存在しなくても、結合後のテーブルに表示されます。存在しない時は、全データを表示するテーブルではない方に `NULL` が表示されます。

##左外部結合の方法
テーブルAとテーブルBを `左外部結合` する場合、以下のようになります。
この場合、テーブルBに存在しない時は　`NULL` が表示されます。

```
SELECT テーブルAから抽出するカラム
FROM 基準にしたいテーブルAの名前
LEFT JOIN 　結合させたいテーブルBの名前
USING　結合条件
```

##右外部結合の方法
テーブルAとテーブルBを `右外部結合` する場合、以下のようになります。
この場合、テーブルAに存在しない時は　`NULL` が表示されます。

```
SELECT テーブルAから抽出するカラム
FROM 基準にしたいテーブルAの名前
RIGHT JOIN 　結合させたいテーブルBの名前
USING　結合条件
```
AWSのアクセスキーを間違えないようにする方法

　2社以上の案件を同時にこなしている場合など、AWS Access Key IDを複数切り替えて使いたい場合にキーを間違えて使しまうと、大変なことになってしまいます。そこで、以下のようにすると明示的に切り替えられるので、間違いが減るのではないでしょうか。

### aaa社向けのプロファイルを作成する。
\>aws configure --profile aaa
AWS Access Key ID [None]: AKIASHE7LMTU4XXXXXXX
AWS Secret Access Key [None]: RlMpPqE19cnfwIS6XGatw3Y5RncQYpIdL+XXXXXX
Default region name [ap-northeast-1]:
Default output format [None]: json

### デフォルトプロファイルが存在するかどうかを確認する。
\>aws configure
AWS Access Key ID [****************26WM]:
AWS Secret Access Key [****************h4DB]:
Default region name [ap-northeast-1]:
Default output format [json]:

%USERPROFILE%\.aws\config　および　%USERPROFILE%\.aws\credentialsの、[default]という項目を消すと、デフォルトプロファイルが消される。

### デフォルトプロファイルでs3のバケットリストを取得
\>aws s3 ls
Unable to locate credentials. You can configure credentials by running "aws configure". 
というエラーが発生。

### aaaプロファイルを使ってs3のバケットリストを取得
\>aws s3 ls --profile aaa
--profileを明示的に指定しないとコマンドを実行できないようになった。
Developer Roadmapsをエンジニア採用に利用できるか

# Developer Roadmapsとは

ご存知の方も多いと思いますが、フロントエンド、バックエンド、DevOpsに携わるエンジニアが「次に何を学べばいいんだろう」を示したロードマップです。

[Developer Roadmaps](https://roadmap.sh/roadmaps)
[Developer Roadmaps -GitHub](https://github.com/kamranahmedse/developer-roadmap)

## 突然何を思ったか

最近、エンジニアの採用活動などに携わっています。

採用に携わる方は、みなさん同じことを考えると思います。
それは**良いエンジニアを採用したい**ということ。

でも良いエンジニアってなんだろう・・・
色々な本があったり記事があったり、定義は山程あります。
なのでここでは割愛しまして、**Developer Roadmapsをどこまで走っているかが一つの指標になるのでは？**と思った次第です。

## やってみた

以下の観点でやってみました。

- 経歴書を拝見
- スキル欄をロードマップの要素と紐付ける（私はDevOpsを参照）
- 線で繋がっていく方か見てみる

対象は以下の感じです。

- 対象：100名ほど
- 属性：大手SIからベンチャーまで様々

## 所感

具体的に言えないところもあるので所感ですが、以下の感じでした。
注：完全な所感です。あとで綺麗にするかもしれません。

- 大手SIでもAWSなどのクラウド経験者が少ない（検索やサジェストに出てこない）
- 監視・運用系だとSIは長く同じ場所にいるため深堀り傾向（特に年代が中堅の転職経験ないエンジニア）
- 30代でSIからスタートアップやWEB系に転職している方は良い感じにスキル転換していて魅力的
- 若手はクラウドネイティブなのかと思っていましたが、SIだとやはりそうではない
- コンサルや提案をしている方は多いが、実務としてIaCでコード書けます、とかは本当に少ない

###このロードマップ完走している人っているのかな・・・？

もちろんスーパーエンジニアの方はQiitaにも沢山いらっしゃいまして、日々参考にさせていただいています。
しかし、**まず自分が完走していません。**
そんな人間がロードマップを利用して人様を見るなんて、**おこがましいにも程があるのでは・・・と。**

### では全く利用できないのかというと・・・？

とはいえ、技術要素が多くなってきてマッピングが大変なときの分類には大いに役立つものだなと感じました。
ああ、このサービスあったなぁとか・・・

そして何より、自分自身の至らなさに気付けます。
これが一番の収穫で、何事もやってみたほうがいいですね。

## まとめ

- 以下で紹介されているので利用価値はあるはず
    - [良いエンジニアを採用するための方法論](https://qiita.com/dorarep/items/b9f7f6ff6e1bc344cf0a)
- ただし半端な使い方だと逆に混乱する
- しばらく手を動かしていないで管理ばかりしているなぁと感じたときに見るといいかも

お読みいただき、ありがとうございました！
rails test がデータベースの参照エラーで失敗する

# 経緯

Docker の中で Rails と MySQL を立て、 rails test でテストを実行しようとしたところ、エラーとなりました。

```yml:docker-compose.yml
services:
  mysql_test:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: aaa
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
```

```shell
$ rails test test/integration/aaa_test.rb
Error:
AaaTest#aaa:
ActiveRecord::ConnectionNotEstablished: Access denied for user 'user'@'%' to database 'aaa-1'
```

エラー内容を見ると `aaa-1` を参照しており、そのデータベースはないのでエラーとなっています。

# 解決策

test_helper.rb にある `parallelize(workers: :number_of_processors)` の影響なので、 PARALLEL_WORKERS を変更して suffix がつかないようにします。

```shell
$ PARALLEL_WORKERS=1 rails test test/integration/aaa_test.rb
```

これで動作します。
[Swift] UIButtonクラスをコードで作る


#UIButtonクラスを作る
ボタンはUIButtonクラスなので、インスタンスでボタンを作れます。

#準備
ボタンのバックグラウンドの画像を適当にダウンロードします。
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839966/56d71413-775d-31d5-87f1-297647fa69a5.png)

上の画像をAssetsフォルダの中に入れます。
これで準備完了です。
#やってみる

```swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //ボタンを作る
        let okButton=UIButton()
        //領域とボタンの位置
        okButton.frame=CGRect(x:100,y:100,width: 120,height: 120)
        //背景画像
        let bkgImage=UIImage(named: "maru.png")
        okButton.setBackgroundImage(bkgImage, for: .normal)
        
        view.addSubview(okButton)
    }
}
```
まず、UIButtonのインスタンスをokButtonに格納します。
そして、ボタンの位置とサイズをCGRect型で決定します。
背景画像をUIImage型で読み込んで,setBackgroundImageメソッドの引数に値を渡します。

最後に、`view.addSubView`メソッドの引数にokButtonを渡します。
これは、viewにボタンを表示するためのメソッドです。
AngularFire　Firestoreからコレクションを取得して*ngForでリストを表示するまで

#はじめに
環境は以下の通りです。
・[AngularFire](https://github.com/angular/angularfire)がプロジェクトに入ってる
・UIフレームワークにIonicを使用

こんな感じのリストを取得します。
![スクリーンショット 2021-01-20 22.34.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/154fda0a-2234-c865-b780-eefb4e669a1b.jpeg)


#Firestoreのデータはこんな感じ
![スクリーンショット 2021-01-20 22.35.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/c61c3810-4696-46d4-656d-c4ca0d24993d.jpeg)

#TypeScript側

```typescript
import { map } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  monthCounts = [];

  constructor(
    private afAuth: AngularFireAuth,
    private db: AngularFirestore
  ) {
    afAuth.auth.onAuthStateChanged((user) => {
      if (user != null) {
        this.getMonthCounts(user.uid);
      } 
    })
  }
   
  ngOnInit() { }
      
  getMonthCounts(userId: string) {
     this.db.collection(`users/${userId}/counts`).snapshotChanges().subscribe(colSnap => {
      this.monthCounts = [];
      colSnap.forEach(snap => {
        const monthData: any = snap.payload.doc.data();
        monthData.id = snap.payload.doc.id;
        monthData.monthDate = monthData.monthDate;
        console.log(monthData.id);
        this.monthCounts.push(monthData);
      })
    })
}
```

#HTML側

```html:home.page.html
 <ion-grid>
     <ion-row>
        <ion-col>
          <ion-list>
            <ion-list-header>毎月の回数</ion-list-header>
            <ion-item-group>
              <ion-item *ngFor="let monthCount of monthCounts" class="ion-text-center">
                <ion-col>{{ monthCount.monthDate }}</ion-col>
                <ion-col>{{ monthCount.monthCount }}回</ion-col>
              </ion-item>
            </ion-item-group>
          </ion-list>
        </ion-col>
      </ion-row>
    </ion-grid>
```

もっと`Observable`を使ったり色々なやり方はありそうですが`RxJS`をあまり理解していない僕には、これくらいがちょうどいいですw
アプリ開発ゼロから記

今日やったこと

アプリ開発しよ、と決心する。
→スマート工場のしくみ(松林光男監修，川上正伸，新堀克美，竹内芳久編著)の中にアプリケーション技術が求められるという文面を発見。何か作らねばと一念発起。

とりあえず調べる「アプリ開発　初心者」

Android Studioをインストール
参考にしたサイト：https://matchinghack.jp/develop-app-for-beginners

20分くらいで全部インストールできた。

Android Studioを起動、実際に触ってみる。
→感想：すげ。むず。
多分、いじるのは
java>com.example.myapplication>MainActivityファイルかなと思う
参考にしたサイト：https://qiita.com/qiiChan/items/861052bf723ecf84a1aa


次にやりたいこと：アプリ云々の前に何作ろう状態
hello worldはしたい
この前業務で書いたテキストデータを特定の単語で区切って配列に収納するコードをどこかで使いたい。これは正直アプリではないのではという気持ち。

webアプリでもいいかなとか思うし困ったな。
まあどちらかに絞ることもないか。


今日はここまで　続け
モトローラ形式（S-Record）（.motファイル）のチェックサムを付与するツールつくった【自分用】

モトローラ形式の文字列をぶちこむと、末尾のチェックサムをいい感じにしてくれるツールをつくってみた

<p class="codepen" data-height="409" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="JjRzxYE" style="height: 409px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MotCheckSumCalculator">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/JjRzxYE">
  MotCheckSumCalculator</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# きゃぷちゃ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/fc7e959f-19c7-c43a-c659-86d73cdd7538.png)

# サンプルmotデータ(参考サイト1より)

```text

S00F000068656C6C6F202020202000003C
S11F00007C0802A6900100049421FFF07C6C1B787C8C23783C6000003863000026
S11F001C4BFFFFE5398000007D83637880010014382100107C0803A64E800020E9
S111003848656C6C6F20776F726C642E0A0042
S5030003F9
S9030000FC
```


# 参考サイト

 - [S-record - Wikipedia](https://ja.wikipedia.org/wiki/S-record)
ちょっとニッチなNotionのショートカット

#はじめに
相変わらず、notionを色々使って試しています。ずっと不満だったことが、改行するたびにブロックが変わってしまうことです。しかし、自分が知らなかっただけで、ブロック内でも改行できるようなので、紹介します。
合わせてそんなに頻繁に使うことは無いけど、覚えておいて損はないショートカットも紹介します。

以前にもショートカットを紹介しています↓
[Notionでもショートカットを使って、効率爆上がりを目指す
](https://qiita.com/TerToEer_sho/items/6e4902c0d755bb18db3a)

##ニッチなショートカット一覧
※コマンドはmacのものです。

|コマンド|機能|
|---|---|
|Tab|インデント|
|Shift + Tab|インデントを戻す|
|Enter|ブロックを変えて改行
|Shift + Enter|同じブロックのまま改行|
|Command + n|新しいページを作成|
|Command + [|1ページ前に戻る|
|Command + ]|1ページ先に戻る|
|altを押しながらドラック＆ドロップ|複製|
|文頭or文末で/color(具体的な色でも可)|文字の色や背景色を変えられる|

##終わりに
ショートカット覚えると、キーボードから手を離す回数が減るので、生産性がupします。
MacBook Air (M1, 2020)にOSを再インストールしたとき，アカウント作成が失敗した場合の解決法

## 概要
MacBook Air (M1, 2020)にOS (Big Sur)を再インストールをしたところ，アカウント作成できない状態になりました．解決法を探したのですが，英語のサイトしか見つからなかったので，見つけた解決法を書いておきます．

記事を書いた時点で解決できた方法ですので，今後も同じように解決できるとは限りません．また，最善の方法かも分かりません．

## 症状

MacBook Air (M1, 2020)にOS (Big Sur)を再インストールしました．インストールは成功し，アクセシビリティなどに関する問いに答えていきます．しかし，アカウント作成のときフォームに必要事項を入力しアカウント作成をするのですが，何分かたった後アカウント作成に失敗した旨のダイアログボックスが表示されます．電源を落として，OSを立ち上げると作成に失敗したはずのアカウントが表示されるのですがログインできません．何度か再インストールし直しても同じ症状になります．

## 解決手順

1. コンピュータをシャットダウンします．
2. 電源ボタンを長押しし，起動オプション画面を表示させます．
3. オプションを選びます．
4. メニューからターミナルを立ち上げます．
5. resetpasswordを入力します．
6. パスワードリセットのウインドウが立ち上がるので，メニューからMacの削除を選びます．
7. 削除画面になるので，そこで削除を選択します．
8. OSを再インストールします．
9. そうするとアカウントが作れるようになります．
create-react-appについて

typescriptの環境構築方法は多岐に渡り混乱するのでメモを残しておきます。

`create-react-app`はReactが提供している全自動で環境構築できるコマンドです。
ここから派生して色んな書き方があるから余計にややこしい。。

`create-react-app {プロジェクト名} --template typescript`のように`--template typescript`を末尾につけることでtypescript用のプロジェクトが作成できます。プロジェクト名にはお好みの名前を入れてください。

reduxを使う場合は`create-react-app --template redux-typescrip {プロジェクト名} `
でreduxが使えます。

色々書き方があって混乱しますが、`create-react-app`か`create-react-app {プロジェクト名} --template typescript`を覚えていれば問題なさそうです。

プロジェクトが作成し終わったら`Happy hacking!`と表示されます。

自動で環境構築していくのも便利ですが、一度勉強のために自分で一からファイルを作っていくのもありだと思います。

いちからファイルを作りたい方はこちらの記事が参考になります。
[TypeScript + Node.js プロジェクトのはじめかた2020](https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49)

自動実装のやり方はこちら
[Reactの環境構築](https://future-architect.github.io/typescript-guide/react.html)
[超基本]jQueryのプラグインが起動できない時の解決法

# 問題
jQueryのプラグインである「JapanMap」を使おうと思い、記事にあるとおりに進めたところ、なぜか読み込んでくれず、2時間ほど模索した結果、超基本のところでつまづいていたので、忘れないために、そして戒めとして記録します。

# 結論
jQueryのプラグインを使う時は、アプリ本体にjQueryをダウンロードしなければ使えない！

jQueryを使うにはいろいろな方法がある。

１、jQueryをダウンロードする方法
２、CDNを使う方法
３、Gemを使う方法

など色々あるが、プラグインを使う時は、jQueryをアプリにダウンロードしないと使えないのであった。
ここで時間を使わないようにこの記事が役に立つことを願っています。
Rakuten Casa設置方法

回線名：フレッツ光コラボ
ルーター機種：wxr-5950AX12　NDプロキシON
Rakuten Casaのwanではなくlanにケーブルを接続すると、LTEが接続された

追記
wxr-5950AX1の調子が悪くなったので取りやめ
初心者のためのワイヤーフレーミング

ワイヤーフレーミングは、UXデザイナーやその他のエクスペリエンスデザイン参加者にとってとても重要な**スキル**です。
単なるテクニックではなく、**スキル**です。
上手にできることもあり下手にできることもあります、
それによっては最終製品の結果に大きな影響を与えることがあります。

# ワイヤーフレーミングとは何ですか？

ワイヤーフレーミングは、ユーザーエクスペリエンスデザインのコンテキストでは、
ユーザーインターフェイスワイヤーフレームを作成する行為です。

> ワイヤーフレームは、コンピューターインターフェイスの概略図またはその他の忠実度の低いレンダリングであり、製品の視覚的なデザインを明示的に指定せずに、主に機能、機能、コンテンツ、およびユーザーフローを示すことを目的としています。

# ワイヤーフレーミングの2つのフェーズ
ワイヤーフレームはツールです。ワイヤーフレーミングを成功させるには、ワイヤーフレームを使ってリアルな問題を解決することです。
1- ワイヤーフレーミングの最初の課題は、「製品が顧客の目標達成に役立つ方法は何ですか？」です！
2- 2番目の課題は、「このソリューションが課題に答えているかどうかどのように確かめられるか」です。ここで、有益なフィードバックを引き出し、問題を早期に診断するワイヤーフレーミングの能力が本当に輝いくところです。
これらの課題は、構想フェーズと検証フェーズの2つの異なるフェーズに分けることが重要です。

## 構想フェーズ(発想?)
最初の課題は、製品が顧客の目標達成にどのように役立つかを理解しようとすることであり、ワイヤーフレーミングプロセスの創造的な構想段階で対処されます。ここで、より良いソリューションに向けて反復するために、できるだけ多くのアイデアを生成します。
構想段階は、量が質と同じくらい（またはそれ以上に）重要な数少ない場所の1つです。1つのアイデアに対して複数のアイデアとバリエーションを生成する機能により、それぞれの欠点とハイライトを確認できます。ページに配置するデザインが多いほど、より多くの個別のアイデアを選択する必要があります。結局のところ、「クリエイティブ」のルーツは「クリエイト」です。それがここでの戦略です。
できるだけ多くの悪いアイデアを作成してみてください。これにより、クリエイティブブロックが削除され、自由に制作できるようになります。

### 構想段階のヒント
- あまりにも早く洗練したり、深く潜ったりしないでください。散らかってください。増算、増算、増算、、後で減算。
- ページに載せる前にあなたのアイデアを判断しないでください。最初に作成し、後で判断。
- 構造、レイアウト、コンテンツ、および機能について個別に考えることを学びましょう。
- 適切な量の詳細になるまでさまざまな詳細レベルの配置を練習してください。

## 検証フェーズ
提案されたソリューションが成功するかどうかを判断する2番目の課題は、ワイヤーフレーミングプロセスの検証フェーズになります。
構想フェーズには、小規模な内部検証フェーズが含まれます。このフェーズでは、設計者（デザイナー？）が自分でソリューションの検証を試みます。
しかし、構築するために必要な情報と知識が少なくともいくつか不足しているはずです（顧客に関する重要な情報やテクノロジーの制限、、）なので他の利害関係者の関与が必要です。他の人があなたのアイデアを検証して改善するのに役立ちます。
このフェーズではワイヤーフレームが会話のスターターであり、完成品ではありません。
ワイヤーフレームを通信アーティファクトと考えることが重要です。

### 検証フェーズのヒント
- 複数のアイデアを見せる
- ワイヤーフレームを他人に見せる準備をする
- 説明しながら見せると改善点が思いつきます
- 必要に応じて注釈を追加する

# プロセスから学ぶ
ワイヤーフレーミングは時間の経過とともに改善できるスキルです。
マスターするには2つの方法があります。

1- 最初は練習です。練習するほど、（自分のスキルWFも）より良くなるでしょう。
練習は、効果のない努力を減らし、実りある仕事を増やすのに役立ちます。
2- 両方のフェーズで改善するための2番目の最も重要な方法は、検証フェーズからのコメントを意識的に統合し、次回はそれを構想フェーズにフィードバックすることです。
練習するときは、デザインのアイデアを繰り返して改善するという同じループを、ワイヤーフレーミングプロセス全体に適用してみてください。

まとめるとワイヤーフレーミングプロセスでは
構想フェーズで時間かけずいろんなパターンを作る、その後検証フェーズで他の人に見せてフィードバックもらって構想フェーズに戻ってブラッシュアップするという永遠ループでよりいいWFが出来上がるでしょう

# TODO（深掘りの予定）
1- WF種類とユーズケース
2- 作成するには何が必要？
2- WF設計
3- 作り方

つづく、、
Amazon linux2 でsshpassを使う

# Amazon linux2 でsshpassを使う

## 概要
Amazon Linux2でsshpassを使う場合はEPELのリポジトリを有効化する一手間が必要でしたので、その手順をご紹介します。

## 手順

### 1. RHEL 7 用の EPEL リリースパッケージをインストールし、EPEL リポジトリを有効にします。

```bash
sudo amazon-linux-extras install epel -y
sudo yum-config-manager --enable epel
```

### 2. sshpassをインストール
```bash
sudo yum install -y sshpass
```

### 3. sshpassの設定
```bash
sshpass -p {パスワード} ssh {user名前}@{SSH先}
```

## 参考
- [CentOS、RHEL、または Amazon Linux を実行している Amazon EC2 インスタンスの EPEL リポジトリを有効にするにはどうすればよいですか?](https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-enable-epel/)
- [sshpass をインストールするには](https://sig9.hatenablog.com/entry/2015/03/10/233527)
谷藤賢一『いきなりはじめるPHPワクワク・ドキドキの入門教室』でPHPを勉強してみた(3)

以下の内容を学習。
chapter3-12　さらに次のページへいこう！

【やらかしたミス】
次のページへ飛ぶボタンを押したらエラーが出る。

【原因】
’（シングルクォート）の位置が間違ってただけ。
【Bootstrap】いきなりログアウトできなくなった〜なんでや？CSRF問題らしい〜

### 解決したいこと
Bootstrapを導入してからログアウトができなくなってしまった。



### 発生している問題・エラー

ログイン後、ヘッダー部分にあるログアウトボタンを押すとエラーメッセージが出て、一生ログアウトできない。


![a746095752c272c27d28d5b332bbf41f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887559/8c4f8248-c4ee-02db-b5e4-69f0d14a7892.png)

### 該当するソースコード
```application.html.erb
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Party Freak</title>

    <%= stylesheet_link_tag 'application', media: 'all'%>

〜以下略〜

```

### 以前のソースコード
```application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Party Freak</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

〜以下略〜
```



### 自分で試したこと
`<html>`の`<head>`部分の記述を導入前に戻すと、ログアウトができるようになる。
最終的には`<head>`から下を入れ替えることでエラーが出ず、以前のようにログアウトができるようになった。
なお、ログインと新規投稿については問題のあったソースコードでもできていた。
部分的に入れ替えてみたり色々試してみて数十分、記述を追加するとログアウトできるようになるものを発見。

```application.html.erb
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

```
この二つでした。
調べてみるとクロスサイトリクエストフォージュリに関する記述。
Railsが**セキュリティ的に危ないからやめときなさい！**と注意をしてくれているということでした。
ありがとうRailsさん、いつもエラーで怒ってごめんね。



### エラーが出なくなったソースコード（head以下を変更しました
```application.html.erb

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Party Freak</title>
    <%= csrf_meta_tags %>　　　　　　　⬅️追加
    <%= csp_meta_tag %>　　　　　　　　⬅️追加　　
    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>　　　⬅️なぜかこれも追加
〜以下略〜
```

一番下のJSを入れないとログアウトできなかったのが謎です。
何度やってもこれがないとダメなようですが理由がわかりません。
どなたか理由がわかる方がいらっしゃれば教えていただければ幸いです。
PostgreSQLのsu - postgresでつまづいた話

# はじめに
[PostgreSQL を CentOS にインストールするには](https://qiita.com/tom-sato/items/e1903cb974fb6c6d5664)を参考に、PostgreSQLをCentOS7にインストールして使える状態にしようとしたが```su - postgres```でパスワードを求められた。心当たりのあるパスワードを適当に打ち込んでみたがうまくいかなかった。
結論から言うと、原因はユーザーpostgresにパスワードが設定されていないからだった（それはそう）。
# 解決方法
```su - root```でrootに切り替えて```passwd postgres```でユーザー postgresのパスワードを変更する。「passwd: すべての認証トークンが正しく更新できました。」と出ればOK。rootから抜けて続きの作業をする。

# 参考資料
[PostgreSQL を CentOS にインストールするには](https://qiita.com/tom-sato/items/e1903cb974fb6c6d5664)
[PostgreSQLではじめるDB入門](http://db-study.com/archives/121)
N予備校の入門編で建てたvagrantインスタンスにvscodeのターミナルからssh接続する

N予備校「【2020年度】プログラミング入門 Webアプリ：第2章 02.LinuxというOS」の設定を完了した状態で
vscodeのターミナルからssh接続するために行った設定の備忘録。

※上記のテキストの通りにVagrantとVMを立ち上げている前提で書いています。

#目次
1. [vscodeのターミナルを表示してvagrantを起動する](#1. vscodeのターミナルを表示してvagrantを起動する)
2. [VMのIPアドレスを調べる](#2. VM のIPアドレスを調べる)
3. [ssh接続のconfigファイルを作成する](#3. ssh接続のconfigファイルを作成する)
4. [configファイルの権限を変更する](#4. configファイルの権限を変更する)

#1. vscodeのターミナルを表示してvagrantを起動する
vscodeを管理者で起動して`ctrl + @`でターミナルを表示、`powershell`が選択されていることを確認して
ターミナルで以下のコマンドを実行

```powershell
cd ~/vagrant/ubuntu64_18/
vagrant up
```


#2. VM のIPアドレスを調べる
ssh接続するためにIPアドレスを調べる
ターミナルで`ipconfig`を実行し、`VirtualBox Host-Only`というアダプターのIPv4アドレスをメモ。

#3. ssh接続のconfigファイルを作成する
ターミナルで以下のコマンドを実行して
vagrantのssh設定情報を`config`ファイルに追記。ファイルがない場合は新規作成される。

```powershell
vagrant ssh-config --host "2で調べたIPアドレス" >> ~/.ssh/config
```
#4. configファイルの権限を変更する
win10 1904以降の問題なのか、`private_key`ファイルと`config`ファイルのアクセス権限設定が異なっていると
"Bad owner or permissions on"のようなエラーが出て接続に失敗するため`config`ファイルの権限を変更する。

- [vagrantインスタンスのkeyファイルの権限を確認する。](#configファイルの権限を変更する)
- [configファイルの権限を変更する。](#configファイルの権限を変更する)

###vagrantインスタンスのkeyファイルの権限を確認する
ターミナルで以下のコマンドを実行して`private_key`ファイルのディレクトリを開く

```powershell
invoke-item ~/vagrant/ubuntu64_18/.vagrant/machines/default/virtualbox/
```
`private_key`ファイルを右クリック`プロパティ - セキュリティ - 詳細設定`を開いておく。

###configファイルの権限を変更する
ターミナルで以下のコマンドを実行して`config`ファイルを作成したディレクトリを開く

```powershell
invoke-item ~/.ssh/
```

`config`ファイルを右クリック`プロパティ - セキュリティ - 詳細設定`を開く

先ほど開いた`private_key`のアクセス許可エントリと内容が同じならどちらのプロパティ画面も閉じてしまってOK
異なっている場合は`config`のアクセス許可エントリを`private_key`の設定に合わせてから閉じる。

アクセス許可されているユーザーやグループを削除する際に「親からアクセス許可を継承～」のようなエラーが出た
場合は左下の【継承の無効化】というボタンをクリック、表示されたダイアログの【継承されたアクセス許可を～】
を選択すれば削除できるようになる。

#5. 接続
ターミナルで以下のコマンドを実行

```powershell
ssh "2で調べたIPアドレス"
```
これでssh接続できるはず。
できなかった場合、私にはサッパリわからないので頑張って調べてください。
サブネットの考え方 

# はじめに
とりあえずインフラ知識が弱いので、備忘録を兼ねて記事を書いてこうと思う。
今回はサブネットについて！ただ、細かく記載しないでざっくりとしたイメージを書いていきます！

## サブネットとは

- ネットワークを細かく分けるイメージ
- 10.10.0.0/16みたいな書き方

## 例1
例えば、IPアドレス範囲を10.25.5.0/24で設定するとなると、その範囲は下記のような物になる
- 10.25.5.0 ~ 255

どういう事かと言うと、上記の/24は先頭の24ビットを固定するよってこと。
もう少し細かく書くと、IPアドレスは下記のように表せる

```
# 10.25.5.0
00000010.00011001.00000101.0
```
ピリオドごとをそれぞれ第1オクテットから第4オクテットでわけており、それぞれ8ビットの二進数で表せる
/24は第1オクテットから第3オクテットまで(8ビット * 3)を固定するよって意味。

## 例2
上記を踏まえ、IPを10.0.0.0/16の範囲で設定すると、サブネットは次のように設定できる

```
# 1つめのサブネット範囲
10.0.1.0/24


# 2つめのサブネット範囲
10.0.2.0/24
```

上記のように分けると、さらに１つ目と２つ目のサブネットの範囲を10.0.1.0~255や10.0.2.0~255でより細かく分けることができ、それぞれに通信制御を行う事で、セキュリティを高めることができる。

## まとめ
ざっくりとですが、ネットワークをわけるってイメージで理解していただければ幸いです!
入力フォームを使いやすくするHTML(備忘録)

電話番号を入力時に数字キーボードを表示する
---
![EoE6kTGVcAE9wLz.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241068/9611f284-afc5-08b5-05a2-ae05c0b50c4c.jpeg)


```
<input type="tel">
```

`type="tel"`を入れることでキーボードが数字入力になります。
チェックボックスの選択部分を文章もまるごとにする
---
![EoE6lMjVcAImnVM.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241068/88f838a8-7d08-9b2b-76bc-16375eaad00b.jpeg)


```
<label>
  <input type="checkbox" >選択肢A
</label>
```
`<label>`タグで囲むことでテキスト部分も選択範囲として認識します。

自動入力機能をつかう
---
![EoE6mBsVkAAUvIs.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241068/cd3b09c1-ff4c-e837-d1ee-a0a34e2c661c.jpeg)


```
<input type="text" autocomplete="street-address" >
```

こちらで指定した入力候補を出す
---
![EoE6mymVcAE1wuo.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241068/b6cf1945-e268-01f9-1da1-5969d6d3079e.jpeg)


```
<input type="text" list="samplelist" >
<datalist id="samplelist">
  <option value="埼玉県"></option>
  <option value="東京都"></option>
  <option value="神奈川県"></option>
</datalist>
```



参考
---
[池田泰延さんTwitter](https://twitter.com/clockmaker/status/1333413864998801410)
Centosでbat(バッチではない)を使う。

batというcatコマンドをよりモダンにしたものがあります。
[公式Github](https://github.com/sharkdp/bat)
これをCentosにインストールする方法がわかりにくかったのでメモ。

#ダウンロード
[リリースページ](https://github.com/sharkdp/bat/releases)の最新版からお使いの環境のものをダウンロード。
私は`bat-v0.17.1-x86_64-unknown-linux-musl.tar.gz`をダウンロードしました。
intel 64bitのCentOSならこれでいいと思います。

#インストール
```sh
wget -O bat.zip https://github.com/sharkdp/bat/releases/download/v0.17.1/bat-v0.17.1-x86_64-unknown-linux-musl.tar.gz

tar -xvzf bat.zip -C /usr/local

cd /usr/local && mv bat-v0.17.1-x86_64-unknown-linux-musl bat

cd ~

alias bat="/usr/local/bat/bat" #エイリアスの追加
```

#使い方
```sh
$ bat test.txt
```
これで使えます。catコマンドと同じですね。
他にも他のコマンドと合わせて使う方法などがあるので[公式の日本語ページ](https://github.com/sharkdp/bat/blob/master/doc/README-ja.md)が参考になると思います。

#参考文献
batを教えてくれた記事
https://qiita.com/navitime_tech/items/c249269a3b47666c784b

公式Github
https://github.com/sharkdp/bat

issues325
https://github.com/sharkdp/bat/issues/325
RustでOSを作るためのRust環境構築

掲題の通りのことをやるためにまず実行することをまとめます。

参考資料
RustでOSを書いてみる(環境構築編)
https://qiita.com/kotetuco/items/54af67d5663013ad0db7
30日でできる！OS自作入門 in Rust
https://github.com/woodyZootopia/30daysOS

正直参考資料を見てもらった方がわかるかと思いますが、最初が肝心と思い、Rustの環境構築とつまづいた点をつらつら書いていきます。
環境はVirtual BoxにUbuntu Server 20.04のちDesktopインストールです。

#Rust install
以下実行。これはつまづかないはず。

```shell:terminal
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```

#パッケージインストール
これもそのまま実行する。

```shell:terminal
sudo apt install build-essential
```

```shell:terminal
cargo install cargo-xbuild
```

#nightlyモード
ここでひとつまづきしました。普通のRustだと成功しません。（多分）

```shell:terminal
rustup override add nightly
```

さらにcomponentを追加します。

```shell:terminal
rustup component add rust-src
```

Rustの環境は構築できましたので、
あとは参考資料を見ながら好きに作成する。

私は以下の参考資料通りに実行してOSを勉強してます。
参考資料
https://yoshitsugu.net/posts/2019-06-04-haribote-os-in-rust-day3.html

以上
【C++20】 operatorのconstが今まで以上に重要になった

# 結論
現状のC++20バックドラフトでは以下ソースではoverloadの曖昧さを指摘するようになった。

```main.cpp
struct Hoge
{
    bool operator==(const Hoge& other)
    {
        return true;
    }
};
int main()
{
    Hoge t1, t2;
    if (t1 == t2)
        return 0;
}
```

問題は単純でC ++ 20では、比較演算子の反転を新しい概念として追加しているからです。
式**a == b**を検索すると、**b == a**も同時に検索されることになります。
それを可能にするために以下のような比較演算子の反転関数が自動で追加されます。

```main.cpp
bool operator==(/*this*/ Hoge&, const Hoge&); // 上で定義してるもの
bool operator==(const Hoge&, /*this*/ Hoge&); // 反転関数
```

**==**は両方と一致するため**あいまい**を指摘するようになってました。
なのでHogeは以下のように書く必要があります。

```main.cpp
struct Hoge
{
    bool operator==(const Hoge& other) const
    {
        return true;
    }
};

// 定義される比較演算子
bool operator==(/*this*/const Hoge&, const Hoge&); // 上で定義してるもの
// 同じものになる
// bool operator==(const Hoge&, /*this*/const Hoge&); // 反転関数

// 一応これでもOK
struct Hoge2
{
    bool operator==(Hoge2& other)
    {
        return true;
    }
};
```

# 余談
VC++はこれを指摘しててくれませんでした...
clangに変えた時初めて気づきました。
画像のプレビュー機能

## はじめに
画像投稿時に、画像ファイルの名前だけが表示されるだけで、きちんと出来ている分かりづらいと感じたので、プレビュー機能を実装しました。
<br>

**プレビュー機能実装前**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941480/fc0734f2-a182-fde8-8a35-7b5525b0f1f7.png" width=70%>

##1.準備
**1. プレビュー機能を実装させるためのjsファイルを作成する。app/javascript/packsにpreview.jsを作成**
→  **app / javascript / packs / preview.js**

**2.preview.jsを読み込めるようapplication.jsを編集する。**

```ruby:app/javascript/packs/application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require('./preview') # 追記する
```
**3.viewファイルに画像が表示される場所を指定する。**

```html:views/ideas/new.html.erb
<div class="img-upload">
  <div class="left-img-upload">
    <div class="weight-bold-text">
      関連画像(関連する画像があれば添付してください)
    </div>
    <div class="click-upload">
      <p>クリックしてファイルをアップロード</p>
      <%= f.file_field :image, id:"idea-image" %>
    </div>
  </div>
  <div class="right-img-upload">
    <div id="image"></div>  <!--追記する-->
  </div>
</div>
```

##2.プレビュー機能実装
**1 で作成したpreview.jsにプレビュー機能のコードを記述する。**

```javascript:app/javascript/packs/preview.js
if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('image');

    const createImageHTML = (blob) => {
       // 画像を表示するためのdiv要素を生成
      const imageElement = document.createElement('div');
      // 表示する画像を生成
      const blobImage = document.createElement('img');
        blobImage.className="preview"; //←createElementで生成したimgにクラス名を付けている
      blobImage.setAttribute('src', blob);
      // 生成したHTMLの要素をブラウザに表示させる
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    };
    document.getElementById('idea-image').addEventListener('change', function(e){
      // 画像が表示されている場合のみ、すでに存在している画像を削除する
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }
      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}
```
<br>
**最後にCSSで画像のサイズを指定する。**

```css:
.preview {
  height: 250px;
  width: 250px;
  object-fit: contain;
}
```

##実装完了
画像が表示されるようになったおかげで、自分が選択した画像が分かりやすくなりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941480/75b62153-6ef4-4754-13dd-6cfefb3bf8e4.png" width=70%>

##最後に
javascriptを用いた実装はあまり行っていなかったため、いい復習となりました。
また、createElementで生成した要素にクラス名をつける方法など学ぶことができ、勉強になりました。
Python 高速で最小値を取れる優先度付きキュー heapq AtCoder頻出



# 概要

リストから最小値を高速で取り出したいときに用いる優先度付きキューがPythonにはheapqという便利なものがあるのでさくっと見直しましょう。AtCoderでも頻出内容


# 急いでる人向け

この記事のすべて。三行目を
q = heapq.heapify(a)
としても動かないため注意

```python
import heapq

a = [1,2,3,4,6,7,8]
#list をheapifyでヒープ化する。
heapq.heapify(a)

#heappush で５を追加する。
heapq.heappush(a,5)

#heap内のの要素を小さい順にheappopで取り出す。
while a:
  print(heapq.heappop(a))
    
######実行結果######
1
2
3
4
5
6
7
8
```


# かんたんな説明

・heap**.heapify(list)**
リストを与えるとヒープ化してくれる

・heap.**heappush(heap,要素)**
heapに新しい要素を追加する（listにおけるappendのheap版）

・heap.**heapop(heap)**
heap内の最小の値を取り出す。取り出した要素はheapから削除される。



# 応用

最大値を取り出す優先度付きキューを作りたい

**すべての値の符号を逆転させればよい。**


```python
import heapq

a = [1,2,3,4,6,7,8]

#要素の符号を逆転
for i in range(len(a)):
  a[i] = a[i]*(-1)
heapq.heapify(a)

while a:
  #出力の符号を戻してやる
  print(heapq.heappop(a)*(-1))

######実行結果######

8
7
6
4
3
2
1
```

# 参考にしたサイト

より詳しい解説はこっち
https://docs.python.org/ja/3/library/heapq.html
Vuexについて

はじめまして。私３０代未経験でエンジニア転職を目指して日々勉強しています。

nuxt.jsでポートフォリオを作っていてvuexの理解があまりにも浅いのでアウトプットの意味で投稿しようと思います。
###state
日本語で状態を意味します。
基本一番上に記述してデータを書きます
vue.jsでいうデータオプションに近い
###getters
stateのデータをちょっといじってその値を返す
###actions
外部APIとの通信を行い、mutationsを呼び出す役割
非同期通信が必要な時はここに書く
this.$store.dispatch( '第１引数'第２引数,)で実行
commitの前には必ずdispatchをする、actionsからのみcommitを使う
○○({commit}, number)
commit("○○", number)

###mutations
vuexのストアの状態を唯一変更できる存在
必ずstateはmutationsから書き換える
this.$store.commit('第１引数',第２引数)で実行する
○○(state, number){
状態を変更する
state.stateのデータ=number
}
例でいうとTODOの追加とか削除とか

ちょっとこれだとわかりにくいですが、日記みたいにして書いてアウトプットしていこうと思います。
Chromebook にAnydeskのLinux版をインストール【結果NG】

Lenovo ideapad duet にて、Android版がフリーズして使えないため。

AnydeskのLinuxのリポジトリの画面を表示
[AnyDesk DEB repository how-to](http://deb.anydesk.com/howto.html?_ga=2.30094397.303148941.1611146097-794327168.1611146097)


sudo su
wget -qO - https://keys.anydesk.com/repos/DEB-GPG-KEY | apt-key add -

ここで失敗する
ブラウザで
https://keys.anydesk.com/repos/DEB-GPG-KEY
を開き、ファイルをLinuxフォルダに保存

apt-key add DEB-GPG-KEY
で正常終了

echo "deb [arch=amd64] http://deb.anydesk.com/ all main" > /etc/apt/sources.list.d/anydesk-stable.list
多分これでOK。だめならviで [arch=amd64] を追記

あとは手順通りやったらだめだったというオチ
E: Unable to locate package anydesk

ファイル版を試すが、ChromeOS上からNG
sudo apt i-install anydesk_x.x.x-x_amd64.deb
エラーホニャララ

sudo dpkg --install anydesk_x.x.x-x_amd64.deb
でようやく

実施端末、アーキテクチャがマッチしないことがわかる（amd64 / arm64）
そりゃそうか。
ん？までよ、ラズパイ用があったな。

sudo dpkg --install anydesk_x.x.x-x_armhf.deb
アーキテクチャがマッチしないことがわかる（armhf / arm64）

駄目か、hfって32bitだっけかな？まぁ違うもんは違うと。とほほ

…ダメ元で…
sudo dpkg --add-architecture armhf
でupdateしてやってみたけど駄目だった。
これ絡みのライブラリを削除するのにげんなりだった

https://ubuntuforums.org/showthread.php?t=2444884&p=13963124#post13963124
おまっ怒

https://www.labohyt.net/blog/server/post-4721/
感謝

時間があればラズパイ用のリポジトリを設定して…
C#でAtCoder Beginners Selection（ABC081B - Shift only）

####準備
[C#でAtCoderデビューのための準備]
(https://qiita.com/azumabashi/items/7aa9e4b77c10970cc30a)
のあとで AtCoder Beginners Selection　をやってみました。

####問題文
ABC081B - Shift only
[https://atcoder.jp/contests/abs/tasks/abc081_b]
(https://atcoder.jp/contests/abs/tasks/abc081_b)

####提出結果

```
using System;
using System.Linq;

class Program
{
	static void Main(string[] args)
	{
		int n = int.Parse(Console.ReadLine());
		string[] value = Console.ReadLine().Split(' ');
		var a = Enumerable.Repeat(0, n).ToArray();
		for (int i = 0; i < n; i++)
		{
			a[i] = int.Parse(value[i]);
		}
		int kaisuu = 0;
		bool owari = false;
		while (owari == false)
		{
			for (int i = 0; i < n; i++)
			{
				int amari = a[i] % 2;
				if (amari == 0)
				{
					a[i] = a[i] / 2;
				}
				else
				{
					owari = true;
					break;
				}
			}
			if (!owari) kaisuu++;
		}
		Console.WriteLine($"{kaisuu}");
	}
}
```

####テスト実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/517b6afe-d79b-dec0-a66b-8ed16ffe9b4d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/73fc8d05-3826-b8b3-c7d5-2de5b225ca27.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/72e961cd-1fff-6aea-e7ef-c44074f3d905.png)
【010_トイレットペーパー】コマ大数学科

#【010_トイレットペーパー】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/cb2cc97d-269b-61a3-c8c1-6c7edc4cba5c.png)



```latex
\begin{tikzpicture}[>=stealth]
% 右側の楕円をかく
  \filldraw [fill=black!20!white](4,0) ellipse [x radius=0.1,y radius=0.4];
  \draw (4,0) ellipse [x radius=0.5,y radius=2];
% 右側の芯の楕円を描く
  \draw [dashed] (0,0) ellipse [x radius=0.1,y radius=0.4];
% トイレットペーパーを描く
  \draw (0,2)--(4,2);
  \draw (0,-2)--(4,-2);
  \draw [dotted](0,0.4)--(4,0.4);
  \draw [dotted](0,-0.4)--(4,-0.4);
% 点線部分を描く
  \draw [dashed] (0,-2) arc [start angle=-90,end angle=90, x radius=0.5,y radius=2];
  \draw (0,2) arc [start angle=90,end angle=270, x radius=0.5,y radius=2];

  \draw (4,2)--(7,2);
  \draw (4,-2)--(7,-2);
  \draw [->](6.5,0)--(6.5,2);
  \draw [->](6.5,0)--(6.5,-2);
  \node at (7,0){$11$cm};

  \draw (4,0.4)--(6,0.4);
  \draw (4,-0.4)--(6,-0.4);
  \draw [->](5,0)--(5,0.4);
  \draw [->](5,-0)--(5,-0.4);
  \node at (5.5,0){$4$cm};
\end{tikzpicture}

```
【014_アルキメデス】コマ大数学科

#【014_アルキメデス】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/507cc192-3e91-80c7-46e9-0d6d5fd58489.png)

```latex
  \begin{tikzpicture}
    \coordinate (A) at (0,3) node at (A)[left]{A};
    \coordinate (B) at (4.2,3.9) node at (B)[right]{B};
    \coordinate (C) at (3,0) node at (C)[below]{C};
\filldraw [orange!20!white](A)--(B)--(C)--cycle;
    %　塗り 
    \fill [color=cyan!10!white](1,1)--(1.4,1.3)--(2,1.3)--(2,1)--(1,1)--cycle;
    \fill [color=cyan!20!white](1,1)--(1.4,1.3)--(1.4,2)--(1,2)--(1,1)--cycle;
    \fill [color=cyan!40!white](1.4,3.3)--(1.8,3.3)--(1.8,3.6)--(1.4,3.3)--cycle;
    \fill [color=cyan!20!white](1.8,3.6)--(2.8,3.6)--(2.4,3.3)--(1.8,3.3)--cycle;
    \fill [color=cyan!30!white](1.4,1.3)--(1.4,1.6)--(1.8,1.6)--cycle;
    \fill [color=cyan!50!white](1.4,1.3)--(1.8,1.6)--(1.8,1.3)--cycle;
    \fill [color=cyan!70!white](1.8,1.3)rectangle(2,1.6);
    \fill [color=cyan!60!white](1.4,1.6)rectangle(1.8,2);
    \fill [color=cyan!90!white](1.8,1.6)rectangle(2,2);
    \fill [color=cyan!40!white](3.4,1.3)--(3.8,1.6)--(3.4,1.6)--cycle;
    \fill [color=cyan!20!white](3.4,2.3)--(3.8,2.6)--(3.8,1.6)--(3.4,1.6)--cycle;
% 大きい四角形
     \draw [very thick](0,0) rectangle (3,3);
% 小さい四角形
     \draw [very thick](1,1) rectangle (2,2);
% 奥行きのある四角形
     \draw [very thick](0,3) -- (1.2,3.9)--(4.2,3.9)--(4.2,0.9)--(3,0);
     \draw [very thick](3,3) --(4.2,3.9);
    %  真ん中の線
     \draw [thick](1,1) --(1.4,1.3)--(1.4,2);
     \draw [thick](1.4,1.3)--(2,1.3);
      \draw (1.4,1.3)--(2,1.75);
      \draw (1.8,2)--(1.8,1.3);
      \draw (1.4,1.6)--(2,1.6);
     %  上の小さい四角
     \draw [very thick](1.4,3.3) -- (2.4,3.3)--(2.8,3.6)--(1.8,3.6)--(1.4,3.3)--cycle;
     \draw [thick](1.8,3.6) --(1.8,3.3);
%  右の小さい四角
     \draw [very thick](3.4,1.3) -- (3.8,1.6)--(3.8,2.6)--(3.4,2.3)--(3.4,1.3)--cycle;
     \draw [thick](3.8,1.6) --(3.4,1.6);
% 縦の点線         
\draw [dotted](1.4,3.3)--(1.4,0.3);
\draw [dotted](2.4,3.3)--(2.4,0.3);
\draw [dotted](2.8,3.6)--(2.8,0.6);
\draw [dotted](1.8,3.6)--(1.8,0.6);
%  下の小さい四角
\draw [dashed](1.4,0.3) -- (2.4,0.3)--(2.8,0.6)--(1.8,0.6)--(1.4,0.3)--cycle;
% 横の点線         
\draw [dotted](0.4,1.3)--(3.4,1.3);
\draw [dotted](0.8,1.6)--(3.8,1.6);
\draw [dotted](0.8,2.6)--(3.8,2.6);
\draw [dotted](0.4,2.3)--(3.4,2.3);
%  左の小さい四角
\draw [dashed](0.4,1.3) -- (0.8,1.6)--(0.8,2.6)--(0.4,2.3)--(0.4,1.3)--cycle;
% 奥の小さい四角形
\draw [dashed](2.2,1.9) rectangle (3.2,2.9);
% 斜めの点線         
\draw [dotted](1,1)--(2.2,1.9);
\draw [dotted](2,1)--(3.2,1.9);
\draw [dotted](2,2)--(3.2,2.9);
\draw [dotted](1,2)--(2.2,2.9);
% 透明の点線
\draw [dashed](0,0)--(1.2,0.9);
\draw [dashed](1.2,3.9)--(1.2,2);
\draw [dashed](1.2,0.9)--(4.2,0.9);

\end{tikzpicture}
```
【013_ソファー問題】コマ大数学科

#【013_ソファー問題】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/d9e1543a-77a1-498c-8b47-c133b6248e47.png)

```latex
   \begin{tikzpicture}
      \draw [line width=1.3](0,0)|-(3,3);
      \draw  [line width=1.3](1,0)|-(3,2);
      \filldraw [fill=orange!30!black,rotate around={-27:(1.2,1.6)}](0.2,1) rectangle (0.8,2.5);
      \draw  [->,line width=4.3](0.5,0)--(0.5,1);
      \draw  [->,line width=4.3](1.5,2.5)--(3,2.5);
      \draw [line width=0.3](3,3)|-(4,3);
      \draw [line width=0.3](3,2)|-(4,2);
      \draw [<->,line width=0.3](3.5,2)|-(3.5,3);
      \node at (3.5,2.5)[right]{$1$};
    \end{tikzpicture}
 ```
bashの先頭に書くやつ

シェルスクリプトの一行目に書く `#`から始まるコードのことをshebang(シェバン）という。


## シェバン
絶対パスで指定。このパスに`bash`が無ければエラーになる。

```
#!/bin/bash
```
`env`で指定。このパスに`bash`が無ければエラーになる。$PATH上の`bash`を探す。
この書き方のほうがエラーになる率が低いので、こちらで書く。

```
#!/usr/bin/env bash
```


## オプション

エラーが出たら終了してくれる。

```
-e
```
デバッグ情報を出力してくれる

```
-x
```

##結論
バッシュのスクリプトの先頭には、こう書いておく。

```
#!/usr/bin/env bash
set -ex
```

## 参考
https://moneyforward.com/engineers_blog/2015/05/21/bash-script-tips/
https://qiita.com/d_shimizu/items/c01f29f8398cc7f5c396
【012_1000】コマ大数学科

#【012_1000】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/c62171cf-995d-df73-d562-63cf392963ee.png)

```latex
\begin{tikzpicture}
% 最初にグレーの電球を表示します
\foreach \x in {1,...,10}
\foreach \y in {0,1,2,3,4,5,7}
{
\filldraw[fill=gray!50!white] (\x,-\y+1) circle (0.4) node {\x};
\draw[fill=black] (10.7,-\y+1) circle (0.05);
\draw[fill=black] (11.0,-\y+1) circle (0.05);
\draw[fill=black] (11.3,-\y+1) circle (0.05);
\draw[fill=black] (11.6,-\y+1) circle (0.05);
\draw[fill=black] (11.9,-\y+1) circle (0.05);
\draw[fill=black] (12.2,-\y+1) circle (0.05);
\draw [font=\small] ({10+3},1) circle (0.4) node {1000};
\node at (-1,1){最初};  
}
% 1の倍数を表示します。
\foreach \x in {1,2,...,10}
{
\filldraw[fill=yellow] (\x,0) circle (0.4) node {\x};
\draw[->,thick] (\x,0.6)--(\x,0.2);
\draw [font=\small] ({10+3},0) circle (0.4) node {1000};
\node at (-1,0){1の倍数};  
}
% 2の倍数
\foreach \x in {1,3,5,7,9}
\foreach \y in {2,4,6,8,10}
{
  \filldraw[fill=yellow] (\x,-1) circle (0.4) node {\x};
  \draw[->,thick] (\y,-0.4)--(\y,-0.8);
  \draw [font=\small] ({10+3},-1) circle (0.4) node {1000};
  \node at (-1,-1){2の倍数};  
}
% 3の倍数
\foreach \x in {1,5,6,7}
\foreach \y in {3,6,9}
{
  \filldraw[fill=yellow] (\x,-2) circle (0.4) node {\x};
  \draw[->,thick] (\y,-1.4)--(\y,-1.8);
  \draw [font=\small] ({10+3},-2) circle (0.4) node {1000};
  \node at (-1,-2){3の倍数};  
}
% 4の倍数
\foreach \x in {1,4,5,6,7,8}
\foreach \y in {4,8}
{
\filldraw[fill=yellow] (\x,-3) circle (0.4) node {\x};
\draw[->,thick] (\y,-2.4)--(\y,-2.8);
\draw [font=\small] ({10+3},-3) circle (0.4) node {1000};
\node at (-1,-3){4の倍数};  
}
% 5の倍数
\foreach \x in {1,4,6,7,8,10}
\foreach \y in {5,10}
{
\filldraw[fill=yellow] (\x,-4) circle (0.4) node {\x};
\draw[->,thick] (\y,-3.4)--(\y,-3.8);
\draw [font=\small] ({10+3},-4) circle (0.4) node {1000};
\node at (-1,-4){5の倍数};  
}
\node at (1,-4.6) {1 個};
\node at (4,-4.6) {2 個};
\node at (6,-4.6) {3 個};
\node at (7,-4.6) {4 個};
\node at (8,-4.6) {5 個};
\node at (10,-4.6) {6 個};

% 1000の倍数
\foreach \x in {1,2,...,10}
{
\filldraw[fill=white] (\x,-6) circle (0.4) node {\x};
\draw [font=\small] ({10+3},-6) circle (0.4) node {1000};
\node at (-1,-6){1000の倍数};  
}


\end{tikzpicture}
```
【011_アインシュタインに挑戦】コマ大数学科

#【011_アインシュタインに挑戦】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/e22aea2d-1bb9-0421-d738-f7bf268407c0.png)



```latex
\begin{tikzpicture}[xscale=2,yscale=2]
\coordinate (G) at (0,0);
\coordinate (A) at (120:2);
\coordinate (B) at (60:2);
\coordinate (C) at (150:{sqrt(3)});
\coordinate (D) at (120:1);
\coordinate (E) at (60:1);
\coordinate (F) at (30:{sqrt(3)});
\coordinate (H) at (240:1);
\coordinate (I) at (300:1);
\draw[thick] (A)--(C)--(D)--cycle;
\draw[thick] (D)--(G)--(E)--cycle;
\draw[thick] (B)--(E)--(F)--cycle;
\draw[thick] (G)--(H)--(I)--cycle;
\draw[thick] (A)--(G)--(B)--cycle;
\draw[thick] (D)--(I)--(F)--cycle;
\draw[thick] (C)--(H)--(E)--cycle;
\node [draw,rectangle,fill=white,text centered,thick] at (G){G};
\node [draw,rectangle,fill=white,text centered,thick] at (A){A};
\node [draw,rectangle,fill=white,text centered,thick] at (B){B};
\node [draw,rectangle,fill=white,text centered,thick] at (C){C};
\node [draw,rectangle,fill=white,text centered,thick] at (D){D};
\node [draw,rectangle,fill=white,text centered,thick] at (E){E};
\node [draw,rectangle,fill=white,text centered,thick] at (F){F};
\node [draw,rectangle,fill=white,text centered,thick] at (H){H};
\node [draw,rectangle,fill=white,text centered,thick] at (I){I};


```