OmniAICreator/Qiita-1.07M huggingface dataset:
rails font-awesome導入

今回はrailsでアイコンことfont-awesomeの導入について説明します。

ツイッター、facebokkといったアイコンをしようしたい場合このgemで導入できます。
今回はhamlとsassの導入した形でやってみます。


# gemfile

```ruby:gemfile
em "font-awesome-sass"
```
書いた後忘れずターミナルでbundle installします。


# sass

```sass:applicaiton.sass
@import "font-awesome-sprockets";
@import "font-awesome";
```

# haml

gemを用いることでfontawsomeアイコンをヘルパーメソッドで導入することができます。
アイコンの名称等はfontawesomeの公式Webページから確認することができます。

```haml:haml
  = link_to "https://www.facebook.com/", class: "contents__btn" do
    = icon('fab', 'facebook-square')
    Facebook
  = link_to "https://twitter.com/", class: "contents__btn" do
    = icon('fab', 'twitter')
    Twitter
  = link_to "https://www.instagram.com/", class: "contents__btn" do
    = icon('fab', 'instagram')
    Instagram
```

導入結果はこちらになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430767/9911d50d-3793-bf7f-77b1-4bc3f0a0053c.png)
AKS で Pod を監視する

今回は AKS で Pod の監視をしてみます。前回までの AKS 記事までがデプロイできていることを前提としています。
前回記事 -> https://qiita.com/komiyasa/items/cfe13566e2f57d7d39d2
AKS では Liveness Probe という仕組みを使用して Pod を監視します。この方法を見ていきましょう。

#Liveness Probe を使用した Pod の監視
Web App なので HTTP リクエストの戻り値をチェックすることで、アプリケーションが正しく動いているのかどうかを判断します。下記の様なマニュフェストファイルを作成します。

```livenesssample.yaml
apiVersion: v1
kind: Pod
metadata:
  labels:
    test: liveness
  name: liveness-http

spec:
  containers:
  - name: liveness
    image: k8s.gcr.io/liveness
    args:
    - /server
    livenessProbe:
      httpGet:  # HTTPリクエストの戻り値によるチェックを行う
        path: /healthz
        port: 8080
        httpHeaders:
        - name: X-Custom-Header
          value: Awesome
      initialDelaySeconds: 10
      periodSeconds: 5
```

このマニュフェストファイルで　Pod を作成すると、liveness-http という Pod が作成されます。livenessProbe の中の `initialDelaySecounds` は最初の監視を始めるまでの時間(秒)を定義しています。また、`periodSecounds` の部分では、livenessProbe の実行間隔を定義しています。実際にマニュフェストファイルを実行してみましょう。

```
$ kubectl apply -f livenesssample.yaml
pod/liveness-http created
```

このあとで、作成した Pod の詳細を確認します。詳細は `describe` 文を使用し、`kubectl describe pod liveness-http` を実行します。すると以下の結果となります。

```
Events:
  Type     Reason     Age                   From                                        Message
  ----     ------     ----                  ----                                        -------
  Normal   Scheduled  3m3s                  default-scheduler                           Successfully assigned default/liveness-http to aks-nodepool1-20426113-vmss000002
  Normal   Pulled     2m7s (x3 over 2m57s)  kubelet, aks-nodepool1-20426113-vmss000002  Successfully pulled image "k8s.gcr.io/liveness"
  Normal   Created    2m7s (x3 over 2m56s)  kubelet, aks-nodepool1-20426113-vmss000002  Created container
  Normal   Started    2m7s (x3 over 2m55s)  kubelet, aks-nodepool1-20426113-vmss000002  Started container
  Warning  Unhealthy  105s (x9 over 2m45s)  kubelet, aks-nodepool1-20426113-vmss000002  Liveness probe failed: HTTP probe failed with statuscode: 500
  Normal   Pulling    104s (x4 over 2m59s)  kubelet, aks-nodepool1-20426113-vmss000002  pulling image "k8s.gcr.io/liveness"
  Normal   Killing    104s (x3 over 2m33s)  kubelet, aks-nodepool1-20426113-vmss000002  Killing container with id docker://liveness:Container failed liveness probe.. Container will be killedand recreated.
```

これをみると、Liveness probe が Failed になっていることが分かります。これはまだネットワークの設定をしていなので Web Server として機能していないということが分かります。

#まとめ
Liveness Probe があるからといって AKS のコンサンプションが上がるわけではないのと、マニュフェストファイルを書き換えるだけで監視を実施できるので、Pod 作成時には念のため作成しておいてもいいですね。

#参考URL
Configure Liveness, Readiness and Startup Probes
https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/
rails gemインストールの環境指定

gemの導入について
範囲を変える方法があるので備忘録として書きます。

# 全ての環境で

```ruby:gemfile

# いずれの環境でも必要
gem 'devise'
```

# 開発環境のみ

```ruby:gemfile

# 開発環境にのみ必要
group :development do 
     gem 'rspec'
end
```
# テスト環境のみ

```ruby:gemfile

# テスト環境にのみ必要
group :test do 
     gem 'rspec'
end
```

# 本番環境のみ

```ruby:gemfile

# 本番環境にのみ必要
group :production do 
     gem 'unicorn'
end
```
【Linux】ディレクトリ以下のファイルの容量を確認する

カレントディレクトリ以下のファイルごとの容量を確認できるコマンドとオプションです。

## duコマンド

```
$ du -a ディレクトリ名
```

### 便利な追加オプション

* -h：容量をK, M, G単位で表示
* -s：合計容量を表示


## lsコマンド

```
$ ls -l
````

合計容量も先頭に表示されます。

### 便利な追加オプション

* -h：容量をK, M, G単位で表示
【90日目】Linux上のMySQLの権限・動作確認、ログの監視方法まとめ

先日より神里さんのサロンの課題を進めようとしているのですが、Cloud９上のRailsとMySQLとの接続を苦戦したことをきっかけに、MySQLとCloud9の使用方法を基礎から勉強しようと思いました。

そこで「これからはじめるMySQL入門、小笠原種高、株式会社技術評論社、ISBN9784774197593」を図書館で借りて学習しまして、気になった点を備忘録としてまとめます。

今日は１３章の内容についてです。
この記事では、

- LinuxOS上のファイルの所有者や権限を確認できるようになる。
- MySQLの動作状態を確認できるようになる。
- MySQLのエラー時にエラー詳細を確認できるようになる。
- Linuxのログを確認できるようになる。

ための方法が学べます。
なお、初版2018年6月の書籍のため、バージョンなどについては保証しかねますので、うまくいかない場合コメント等いただけますと幸いです。

なお、明日は１４章で「プログラムからMySQLの接続」という（個人的な）一番の目玉に入っていきたいと思います。

# Chapter13  データベースの運用と管理
# Chapter 13-1 Linuxの基本
## 13-1-1 LinuxとMySQLサーバーの動作の仕組み
MySQLはOS上で動作する。多くの場合はLinuxサーバー上で構築されている。
サーバー上で動くプログラムをサービスと呼ぶ。
サーバー上では`mysql.service`という名前で動いている。

## 13-1-2 MySQLの操作とLinuxの操作
MySQLを直接操作する場合とLinuxサーバー上で操作する場合がある。

◇MySQLを直接操作する場合

- データベース自体を操作する場合 など

-> MySQLモニタ(mysqlコマンド)かバックアップツール（mysqldumpコマンド）を使用する
　MySQLモニタはサーバー上でコマンドラインを使って操作するためのツール


◇Linux上で操作する場合

- 設定ファイルの変更
- 起動
- 停止 など

## 13-1-3, 4, 5 Linuxの操作方法, ログイン, ターミナルからのログイン
操作の際にサーバーにネットワークで接続した他のコンピュータから操作することを「ターミナル」と言う。
その時使用するソフトをターミナルソフトと呼ぶ。
この際の接続方法が「SSH」で、通信網を暗号化したもの。
Linuxにログインして、さらにMySQLにログインしてそれぞれを操作する。
個別環境に対する内容なので割愛

## 13-1-6, 7 Linuxの基本的な操作
省略

## 13-1-8 ディレクトリの詳細の見方
ディレクトリの詳細は`ls-l`で表示できる

```
drwxrwxr-x 2 user01 user01 4096 x月　xx xx:xx Work
```

### １先頭の文字

- d ディレクトリ
- - ファイル
- 1 シンボリックリンク、エイリアス

### ２パーミッション（アクセス権限）
所有者、所有グループ、その他に関する情報
それぞれ、read, write, executeのどれが付与されているか確認できる

### ３ハード・リンク数
なにもなければ自分を数えて１

ハードリンクとは
・ファイルに付けたあだ名
・元のファイルとハードリンクは（ほぼ）同じ物
・状況によっては、ハードリンクが削除されると元のファイルも削除される
・同じパーティションにしか作れない
・フォルダに対しては作れない

### ４、５所有者と所有グループ
２の権限を持っている主体が確認できます

### ６ファイルサイズ
単位はバイト
ディレクトリについては、管理している総ファイル数になる。

### ７更新日時

### ８ファイル名/ディレクトリ名

## 13-1-9 サーバーのシャットダウンと再起動
シャットダウンはコマンドで行う

```
$ sudo shutdown -h now
```

`sudo`コマンドはroot権限が必要なコマンドを実行できる。substitute user doの略。
`sudo`が使えるのはsudoグループに登録されたユーザのみ。

# 13-2 MySQLの管理　〜管理と停止〜
## 13-2-1 MySQLサービスの動作状態を確認する
サービスはLinuxOS起動と同時起動して、OS停止まで常駐してユーザーに機能を提供する。
Linuxサービスの制御は

```
$ systemctl 行いたいこと　サービス名
```

コマンドで行う。MySQLの動作確認は

```
$ systemctl status mysql.service
```

で行う。
結果の中の`Active`で確認できる。
他にもロードされているパスなども見られる。

## 13-2-column エラー詳細コマンド
起動できない場合のエラー詳細を見るコマンド

```
$ journalctl -u mysql.service
```

# 13-3 MySQLの管理ツール　〜MySQLモニタでの操作〜
省略

# 13-4 バックアップとリストア
省略

# 13-5 ログ監視
## 13-5-2 Linuxログは/var/logディレクトリ
Linuxログの確認方法

```
$ cd /var/log
$ ls-l
```

## 13-5-3 ログを開く
ログはGバイト以上の膨大なテキストを持つ場合があるため、`less`コマンドで開く。

```
$ sudo less logファイル名
```

その後は`space`で1画面分、`Enter`で１行スクロールできる。

## 13-5-4 ログを監視する　`tail`コマンド
ファイルの末尾から開くコマンド

```
$ sudo tail -n  開きたい行数 ログファイル名
```

### 更新監視機能

```
$ sudo tail -f
```

ファイルを表示し続け、変化があれば都度画面に表示される。
【初心者】AWS PrivateLink を使ってみる

# 目的
- PrivateLinkは既に登場して2年ほどになる、ある程度枯れたサービスだが、構成を理解するため触ってみることにした。

# AWS PrivateLink とは（自分の理解）
- 自分のVPCのNLB配下のWEB等のサービスを、同一リージョン内の他のVPCに公開できるサービス。VPCピアリング等と異なり、IPアドレスレンジの重複等の考慮が不要で、AWS内に閉じた安全なNW接続を実現できる。
- PrivateLinkは、サービスを公開する側（エンドポイントサービス）と、サービスにアクセスする側（インターフェースエンドポイント）のセットで構成される。

# やったこと
- VPC(Provider)側にNLBとEC2(nginx)、VPC(Consumer)側にEC2(WEB Client)を作成する。
- VPC(Provider)側で「エンドポイントサービス」を作成し、NLBを指定する。
- VPC(Consumer)側で「インターフェースエンドポイント」を作成し、接続先として、「エンドポイントサービス」を指定する。
- VPC(Provider)側で、「インターフェースエンドポイント」の接続要求を承認し、接続を確立する。
- EC2(web client)からEC2(nginx)へPrivateLink経由でhttpアクセスする。

# 構成図
![pl-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189302/976fb10a-bddb-bdd4-942d-4fca8572a1af.png)


# 作業手順

## VPC(2個)及びEC2(WEBサーバ/クライアント)の作成
- VPC(Provider)を作成し、NLBとEC2(nginx)を作成する。NLBのスキームを「内部」で設定する。
- VPC(Consumer)を作成し、EC2(WS2019,Web Client用)を作成する。

## エンドポイントサービスの作成
- VPCのメニューから、「エンドポイントサービスの作成」を選択し、VPC(Provider側)にて既存のNLBを指定してエンドポイントサービスを作成する。「エンドポイントサービスの作成」とは、NLBの配下のサービスを、他のVPCに対しての公開サービスとして登録するイメージ。2019/11現在、エンドポイントサービスとして公開設定できるのはNLBのみ。

![pl-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189302/d70085fb-f2d8-bdad-0fe7-4af6eb6390c5.png)

## インターフェースエンドポイントの作成
- VPCのメニューから、「エンドポイントの作成」を実行し、VPC(Consumer側)にてインターフェースエンドポイントを作成する。「インターフェースエンドポイント」は、「エンドポイントサービス」とつながる道の入口のようなもの。エンドポイントサービスの「サービス名」（com.amazonaws.vpce.ap-northeast-1.vpce-svc-xxxxxxxxxxxxxxxxx）を入力することで、エンドポイントサービスとの紐づけ要求を作成することができる。

![pl-02a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189302/95d1f7bc-855a-e158-e8d4-2e44fdee6811.png)

## エンドポイントサービス側での承認
- エンドポイントサービス側の設定に戻ると、エンドポイントからの接続リクエストが「承諾の保留中」の状態になっているため、「エンドポイント接続リクエストの承諾」を実行する。これにより、接続が確立される。
![pl-04a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189302/45fc77d0-572d-d7ae-eca9-481544f0b3ce.png)

## PrivateLink経由での接続確認
- VPC(Consumer)側で起動したEC2(WEB Client)のブラウザで、URLにインタフェースエンドポイントのDNS名を入力して、PrivateLink経由でNLBの先のEC2(nginx)へアクセスする。
![pl-05a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189302/7ab894d7-ef7b-e062-85c6-32ebc9f49029.png)


# 所感
- VPC PrivateLinkというサービスメニューがあるわけではなく、「エンドポイントサービスとインターフェースエンドポイントをつなげること」＝「PrivateLink」という感じなので、ちょっと分かりにくいなと感じた。

# 参考
- [【新機能】PrivateLinkで独自エンドポイントを作ってアプリをプライベート公開する #reinvent](https://dev.classmethod.jp/cloud/aws/aws-reinvent-vpc-privatelink-endpoint/)
    - ほとんどこの記事の内容を実施して自分なりにまとめなおしただけ、、
curlで文字数の多いファイルの内容をPOST

## 概要
結論だけ言うと`curl`コマンドを使って長い文字列をPOSTするときは`@-`を使って、

```bash
$ cat hoge | curl -X POST "http://xxxx.xxx" -d @-
```

のように書くとうまくいくという話で、いろいろなWebサイトにかかれているけど自分で検証してみたかっただけです。

## 背景
ファイル内容を`curl`でPOSTしようとすると、

```bash
$ curl -X POST "http://xxxx.xxx" -d "$(cat hoge)"
```

や

```bash
$ cat hoge | xargs -IXXX -0 \
curl -X POST "http://xxxx.xxx" -d "XXX"
```

で実現しようと思うがコマンド長に制限があるため、

```
/usr/bin/curl: Argument list too long
```

というようにエラーが出てしまう。

## 環境
- WSL(Windows10)上のUbuntu18.04
- 引数の最大値は以下のとおり

```bash
$ getconf ARG_MAX

2097152
```

## 実験

### 準備
長めのファイルを作成。

```bash
$ python3 -c "print(('x'*500+'\n')*500)" > file.txt
$ wc file.txt 
   501    500 250501 file.txt
```

送れているか確認するためのTCPサーバ作成（受信データをファイル出力）。

```bash
$ nc -l 8000 > serverout
```

### エラーが出ることを確認

上記の方法で実行してみる。

```bash
$ curl -X POST "http://localhost:8000" -d "$(cat file.txt)"
-bash: /usr/bin/curl: Argument list too long
```

```bash
$ cat file.txt | xargs -IXXX -0 curl -X POST "http://localhost:8000" -d "XXX"
xargs: argument line too long
```

が、駄目。


### うまくいくことを確認

ようやく、`@-`を試す。

```bash
$ cat file.txt | curl -X POST "http://localhost:8000" --data-binary @-
```

サーバ側のデータが受信できることを確認（内容省略）。

```bash
$ head serverout

POST / HTTP/1.1
Host: localhost:8000
User-Agent: curl/7.58.0
Accept: */*
Content-Length: 250000
Content-Type: application/x-www-form-urlencoded
Expect: 100-continue

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
```

## 課題
- `--data`で渡すか`--data-binary`で渡すか、`--data-urlencode`で渡すか
- `ARG_MAX`よりも随分小さいサイズでエラーが起きている気がする。

## リンク
- [curl - How To Use](https://curl.haxx.se/docs/manpage.html)
    - `--data`のところに`@-`の説明あり
androiddebugkey(SHA-1)の取得法(windows)

jdkのbinにpathを通す。

cmdにて。

```cmd
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
```


参考
https://codeday.me/jp/qa/20181223/13733.html
React Routerと動的インポートを使う

React Routerを使ってページを分割するときに各コンポーネントを動的インポートで使いたい場合は以下のようにする。

まず必要なライブラリの追加。

```
$ yarn add @loadable/component
```
デモとして次のようなファイルを作成する

```demo-import-async.tsx
import React from "react";

const now = new Date().toLocaleString();
const DemoImportAsync: React.FC = () => <div>{now}</div>;
export default DemoImportAsync;
```

```demo-import-sync.tsx
import React from "react";

const now = new Date().toLocaleString();
const DemoImportSync: React.FC = () => <div>{now}</div>;
export default DemoImportSync;
```
中身は実質同じだがこの二つのファイルを静的・動的の二つの方法で読み込む。
機能としては時刻を表示するだけである。

```App.tsx
// 他のimport省略
import DemoImportSync from "./demo-import-sync";
import loadable from "loadable-components";

// こうすることで動的インポートをするコンポーネントが作られる
const LoadableComponent = loadable(() => import("./demo-import-async"));

const App: React.FC = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <Link to="/import-sync">import-sync</Link>/
          <Link to="/import-async">import-async</Link>
        </div>
        <Switch>
          <Route path="/import-sync" exact={true}>
            <hr />
            <DemoImportSync />
          </Route>
          <Route path="/import-async" exact={true}>
            <hr />
            <LoadableComponent />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
};

export default App;
```

このコンポーネントを表示させるとわかるが `/import-sync` のほうはページをロードした時刻が表示され `/import-async` のほうは実際に対象のURLにアクセスした時刻が表示される。

* https://reacttraining.com/react-router/web/guides/code-splitting
* https://github.com/smooth-code/loadable-components
OctoPiをRaspberryPi 1B+で動かそうとした話

## 経緯

3Dプリンタを買ったのですが、自分のノートPCでSTL→gcodeにして、SDカードで別室の3Dプリンタまで持っていくのがめんどうだな。というのと、外出後とかでも監視したい。タイムラプスも撮れたら楽しそう。
ということで、Raspberry Piを3Dプリンタ用のサーバーにしてみようと思いました。

調べてみると、有名なのが

- repetier server (https://www.repetier-server.com/)
- OctoPrint (https://octoprint.org/)

の2種類があるようです。
Curaというスライサーを使っているのですが、Plug-inでOctoprintに接続できるものがあったので、OctoPrintを導入しようと思いました。
今回は環境設定などが面倒くさかったので、OctoPrintがデフォルトでインストール & 設定されているOctoPiというイメージをダウンロードして、設定してみようと思いました。

## セットアップ

設定はイメージのダウンロードサイトにも詳しく書いてあって、
https://octoprint.org/download/

1. いつものようにddコマンドで `.img`をSDカードに書き込み
2. SDカードをマウントし、`octopi-wpa-supplicant.txt`を編集して、ネットワークのSSIDとパスワードを設定
3. SDカードをRaspberryPiに入れて、Boot
4. ssh octopi.local でセキュリティやタイムゾーン等設定 (スキップ可)
5. ブラウザで http://octopi.local にアクセス

という手順です。

推奨はRaspberryPi 3ですが、ネットを見ていたら古いRaspberryPiでも動かしている人がちらほらいたので、もしかしてと思い、家に昔買ったRaspberryPi1B+が残っていたので、Wi-Fiドングル([こういうの](https://amzn.to/2OuLXlv))をさして、試してみました。

すると、Boot と SSHまではでき、http://octopi.local にもアクセスできたのですが、 ブラウザで、 "OctoPrint is still starting up, please wait..." と表示されたままで、5分程待っても変わらず、リロードしてみると、サーバー自体がダウンしていました。

ssh はまだ生きていたので、`~/.octoprint/logs/octoprint.log` も見てみましたが、分かりやすい理由っぽいエラーはパッと見当たらず、3,4回ほどRebootするなどして試していましたが、症状は同じ感じでした。

諦めて、Raspberry Pi 3Bをamazonで購入して、↑で使っていたSDカードを3Bに移して起動して、http://octopi.local にアクセスしてみたところ、無事、起動画面が表示されました。

細かい設定などはこちらのサイトが日本語でわかりやすかったです。
https://terutakke.com/diary/octoprint/

やはり、ケチらないで推奨を使ったほうがいいですね。

無事、こういう感じで、モニタリング&制御できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38001/ae2d5ef6-6971-b6a1-74ae-b826cf08650d.png)

ちなみに、カメラはこういう感じで3Dプリンタにマウントしてあります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">うまく撮影できるか、実験してる <a href="https://t.co/UD8WdcpAVz">pic.twitter.com/UD8WdcpAVz</a></p>&mdash; Keisuke KAWAHARA (@ktansai) <a href="https://twitter.com/ktansai/status/1195981112398381056?ref_src=twsrc%5Etfw">November 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

データはhttps://www.thingiverse.com/thing:2568708 で公開されているSTLを出力しました。

## 追記:
OctoPrintのPlug-inを導入して、APIキーの接続を試してみたところ、このように直接gcodeをoctoprint側に送ることができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38001/e13b07a3-3670-e145-4398-382ffb0a8a20.png)

さらに、USBで接続したときに見えるMonitorの画面も、RaspberryPi経由で見れるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38001/bcfbca44-1bc1-a26e-0af6-1f7ee0e6ecbe.png)
年末まで毎日webサイトを作り続ける大学生 〜32日目 codepenを活用する〜

##はじめに
こんにちは！@70days_jsです。
普段qiitaの記事を見ていて気になっていたcodepen。ついに今日使い方を知りました。
結論を言うと、めっちゃ簡単でした。

扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は32日目。(2019/11/19)
よろしくお願いします。

##サイトURL
- https://sin2cos21.github.io/day32.html

##やったこと
今日はcodepenの使い方を学びました。
といってもとても使いやすくてすぐに終わってしまったので、オマケ的に、クリックしたらcodepenが見えるみたいなサイトにしました。↓

![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/69b1c15d-a9fc-0766-fc6e-469755ff7e97.gif)



クリックしたあとにcodepenが2つ並んでいますよね。
1つ目はソースコードがすでにでています。
2つ目はrun penを押したらソースコードが見えるようになっています。
この設定は簡単で、codepenのこのページで↓
![スクリーンショット 2019-11-19 22.46.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/322aaf68-8cb6-4ec7-83d5-e3a3658c0bbe.png)
このようにチェックを入れるだけで簡単に設定を変更できます。

ちなみにcodepenを使うときはgithubアカウントやfacebookアカウントで簡単に使えます。
僕はこのサイトを管理しているgithubのアカウントを使いました。

ちなみにちなみに、codepenと関係ないですが、gifに載せたクリックして画面が変わるやつはjsを使わずに全てcssで実装しています。

```html
<body>
<input type="checkbox" id="click">
    <label class="start-click" for="click">
        クリック here...
    </label>
    <div class="contents-body-wrapper">
        //codepenのソースコード
    </div>
</body>
```

htmlはこんな感じです。
cssは隣接（間接？）セレクタを多用して実装しました。肝はここです。↓

```css
        .contents-body-wrapper {
            display: none;
        }
        #click:checked + .start-click + .contents-body-wrapper {
            display: block;
            background-color: black;
            width: 100vw;
            height: 100vh;
        }
        #click:checked + .start-click {
            display: none;
        }
        #click {
            display: none;
        }
```

htmlでクリックの検知をcheckboxで行なっているので、checkされたらクリックボタンのdisplayを見えなくして、隠してあったcontents-body-wrapperクラスのdisplayを表示します。


##感想
cssだけで色々やってみようという縛りを設けてみたら、javascriptの偉大さが少し分かってきた気がしました。
同時にhtmlの書き方も大事だなぁと思えたり、なんというかhtmlとcssとjavascriptは3つとも絡み合ってできているんだなと実感しました。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

 ##参考
1. codepenでウェブ開発入門 (https://qiita.com/InoueDaiki/items/1ee988d8e1f43bc205de9)

大変参考にさせていただきました。ありがとうございます！
データベース設計その3 正規化

データベースを整理すること。
第一正規系や第三正規系など種類があるが原則わかりやすく
管理しやすいように作り替えること

# 正規形とは
* 正規形・・・正規化を行ったあとのデータベースの構造
* 非正規化・・・正規化を行っていないデータベースの構造

# 正規化の順番
基本第一から順番に正規化を行って行きますが、第二と第三は近似してる
ので第二は割愛して第一と第三正規形を説明します。

## 悪い例
先に悪い例を紹介すると
したのような形になります。
問題点は2点

* 重複する情報が存在する・・・教科書の情報が1~3ある
* エンティティの属性の中に他のエンティティの情報が含まれる・・・bookのテーブルがある

| id | student | class | book1 | book2 | book3 |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 0 | 田中1郎 | 1-2 | 国語 | 英語 | 数学 |
| 1 | 鈴木2郎 | 3-4 | 英語 | 物理 | 数学 |


## 第一正規形

テーブル内に繰り返されるレコード（例ではbookレコード）をなくすことです。
先ほどの例では、bookというレコードが繰り返されていました。
第一正規化に従って、繰り返されるレコードをなくすと以下のようなテーブルになります。

| id | student | homeroom | class |
|--:|:--|:--|:--|
| 0 | 田中1郎 | 1-2 | english |
| 0 | 田中1郎 | 1-2 | science |
| 0 | 田中1郎 | 1-2 | math |
| 1 | 鈴木2郎 | 3-4 | japanese |
| 1 | 鈴木2郎 | 3-4 | japanese history |
| 1 | 鈴木2郎 | 3-4 | world history |

## 第三正規形

複数のレコードで重複している内容を別のテーブルとして管理することです。
先ほど、第一正規形を行ったテーブルには生徒の属性と教科書の属性が含まれているので
属性ごとにテーブルを分けると以下のようなテーブルになります。

クラスメートテーブル

| id | name | class |
|:-:|:-:|:-:|
| 0 | 田中1郎 | 1-2 |
| 1 | 鈴木2郎 | 3-4 |

教科書テーブル

| name | student_id |
|:-:|:-:|
| english | 0 |
| science | 0 |
| math | 0 |
| japanese | 1 |
| japanese history | 1 |
| world history | 1 |
#5 iOSアプリのLabelの編集1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
編集したいLabelを選択する．

<img width="444" alt="スクリーンショット 2019-11-19 午後11.37.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/c8027cd9-91c2-ebc1-d393-b92312420dea.png">



##part2
`Attributes inspector`からtextや色，大きさを変更する．

<img width="258" alt="スクリーンショット 2019-11-19 午後11.09.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/63f24c83-c9da-8e12-b553-847a7c5a60e5.png">

###追記
`Shadow`を`System Backgroung Color`にして，`Shadow Offset`の`Width`と`Height`をそれぞれ-1にする．

<img width="260" alt="スクリーンショット 2020-02-24 午後1.26.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/fe0ed57b-1b4f-72c1-a4b3-22fe9d80c7f6.png">
よく使うディレクトリに簡単にアクセスできるようにする方法

##シンボリックリンクとは?
シンボリックリンクとは一言でいうと
「既存のファイルを別の経路からアクセスできるように新たなパスを作成すること。」
##シンボリックリンクの作成
lnコマンドを使用する。
lnコマンドとは、ファイルやディレクトリへのリンクを作成するコマンドである。`-s`オプションによってシンボリックリンクを作成する。

```
ln -s [既存のファイルパス名] [新しいパス名]
```

ここでの新たなディレクトリ（ファイル）に既存のものとは異なる名前をつけることができる。
また、パス名は絶対パスで書いた方がよい。

##リンクの確認
`ln -l`で確認できる。

##シンボリックリンクの消去
リンクの消去には複数の方法がある。

###`unlink`
```
unlink [リンク名]
```

###`rm`
```
rm [リンク名]
```
【Linuxコマンド】圧縮ファイルの行数を取得

## テキストファイルが対象
```bash

cat ファイル名.txt | wc -l
```

### 複数ファイルを対象にバックグラウンドで実行

```bash

nohup *.txt | wc -l >> ログファイル名.log &
```

## bzip2で圧縮されたファイルが対象
bzcat: 「bzip2」形式で圧縮したファイルを展開して、結果を標準出力に出力する。

```bash

bzcat ファイル名.bz2 | wc -l
```

オプション名:	説明
-h:	ヘルプメッセージを表示
-s:	天花寺に使うメモリ量を軽減する。


## gzipで圧縮されたファイルが対象
zcat: gzip形式(拡張子「.gz」)やcompress形式(拡張子「.Z」)で圧縮されたファイルの内容を表示します。

```bash

zcat ファイル名.gz | wc -l
```

オプション名:	説明
-f, --force:	gzip形式やcompress形式の圧縮ファイルではないとき、解凍せずにそのまま標準出力します。
-l, --list:	圧縮ファイルに収められているファイルを一覧表示します。
-h, --help:	使用方法を表示します。
-V, --version:	バージョン情報を表示します。
Go言語のインストール方法(Mac)

## はじめに

私の感覚ですが、Vimを使っている人はGo使いが多い気がします。
私もVimを使いたいのでGoを書くことにします。(手段が目的)

## 「Go言語」とは？

Googleが2009年に発表した、オープンソースのプログラミング言語です。

## 環境

- OS：macOS Catalina 10.15
- Go：1.13.4

## セットアップ

### インストール

公式サイトからパッケージファイルをダウンロードします。
https://golang.org/dl/

<img width="1005" alt="スクリーンショット_2019-11-19_22_47_36.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/6572f2de-b8ed-7ace-6147-b77482c397f2.jpeg">

パッケージファイルを実行し、ウィザードに従ってインストールします。

[続ける]をクリックします。
<img width="620" alt="スクリーンショット 2019-11-19 22.53.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/80ded468-a74d-be64-8b6e-bbe48ad5d9a1.png">

[インストール]をクリックします。
<img width="620" alt="スクリーンショット 2019-11-19 22.54.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/f281ca4d-0b9c-85c8-d85f-eb096d15d977.png">

インストールが始まります。
<img width="620" alt="スクリーンショット 2019-11-19 22.54.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/5130edb4-c27d-4ed2-6ba0-1dfac4843b38.png">

インストールが完了しました。

[閉じる]をクリックします。
<img width="620" alt="スクリーンショット 2019-11-19 22.58.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/69d832db-78f7-713c-e175-05cfa37e38c9.png">

### バージョンとインストール先の確認

バージョンとインストール先を確認します。

```shell-session
$ go version
go version go1.13.4 darwin/amd64

$ which go
/usr/local/go/bin/go
```

## ビルドの確認

ビルドできるか確認します。

以下のファイルを作成します。

```go:hello.go
package main

import "fmt"

func main() {
    fmt.Printf("hello, world\n")
}
```

`go run` コマンドでプログラムをビルドして実行します。

```shell-session
$ go run hello.go
hello, world
```

「hello, world」が出力されたため、Go言語のインストールに成功しています。

## おわりに

Go言語のインストールは非常に簡単でした。

次は開発環境を構築します。

チュートリアルもやります。
https://go-tour-jp.appspot.com/list

## 参考リンク

- [Go言語とは - golang.jp](http://golang.jp/about_go)
- [Go言語のインストール - golang.jp](http://golang.jp/install)
- [Downloads - The Go Programming Language](https://golang.org/dl/)
システム分散についてのメモ描き

# 分散システムで理解する必要のある事
プロセス間メッセージ
リソースロック
一貫性
水平分散
垂直分散
ACID
コンセンサス

## 分散の目的
・可用性の向上
・スループットの向上
・レスポンス速度の向上

分散した時に本当にこの目的が保てるのか、仕組みを理解して扱う必要がある。
整合性を保障するためにアプリケーションレイヤーでの処理とリクエスト回数が増え、レイテンシーが大きくならないか。

## OSとDB
OSは複数のプロセスが一つのリソース(ストレージやメモリなど)を同時に利用しないようにロックをかけることによってアプリケーション同士が独立するようになっている。

DBを分散させる場合、複数のシステムにまたがったリソースをどう一貫性を保ちながら管理するかが問題となる。


## NoSQLが水平分散可能なのは
ACID(CAP定理)に対する妥協による。
基本的にRelationalDB的にインデックスを貼るためにはデータを分散して持つことが出来ない。

## NoSQLのJOIN
一般的にJoinをしようと思うと分散したシステム間のデータを全て検査してJoinする必要がある。JOIN複雑になるため基本的には出来ない。JOINはDBレイヤーではなくアプリケーションレイヤーで解決する。

## RDBMS
読み取りの水平分散、垂直スケーリングは可能。
複数のノードで書き込みは基本不可。ACIDを保障しようと思っても、複数のOS間でリソースをロックするすべがない。リーダーフォロワー型のレプリケーションのみ可能。

RDBのレプリケーションにはいくつか種類がある。
Async Replication
Sync Replication

https://vshosting.eu/blog/horizontal-scaling-of-mysql

## コンセンサス
分散型データベースで整合性を取るために使われている考え方。
[Raftとか。](https://raft.github.io/)

## 一貫性
強整合性
Eventual Consistency

## 強整合性が保障されない場合の考慮
整合性が保障されずに問題となるケースはないか
アプリケーションレイヤーで整合性を担保できるか
アプリケーションレイヤーで整合性を担保できるとして実装するコストを払うか
アプリケーションレイヤーで整合性を担保できないとして正しくメッセージをどう出すか
#4 iOSアプリでの画面遷移の1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
`UIViewController`と検索する．

<img width="684" alt="スクリーンショット 2019-11-19 午後10.56.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/72d8a1af-ef23-128b-adc1-586f3aaa2bb0.png">



##part2
`UIViewController`を`Main.storyboard`に追加する．

<img width="864" alt="スクリーンショット 2019-11-19 午後10.57.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/4ec58e98-0499-9bbc-d7c4-380ca9157e7a.png">



##part3
`UIButton`を先ほど追加した`UIViewController`に追加する．

<img width="866" alt="スクリーンショット 2019-11-19 午後10.58.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/b55c00b1-63d4-dc34-fc24-847529989a1e.png">



##part4
Buttonを選択した状態で，`control`キーを押しながら遷移先のViewへドラッグ・ドロップする．
`Show`を選択する．

<img width="866" alt="スクリーンショット 2019-11-19 午後10.59.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/13a8b256-4dfd-873f-5e63-5cb84dd02aa4.png">



##part5
すると，2つのViewが矢印で繋がる．

<img width="860" alt="スクリーンショット 2019-11-19 午後11.00.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/621a17f4-7fa5-fd4e-f9b1-e1852f98aec7.png">



##part6
赤枠の矢印を移動させることで，アプリ起動時に表示されるViewを変更する．

<img width="858" alt="スクリーンショット 2019-11-19 午後11.00.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/51e09d71-6f47-dbbc-9cec-7692f8e70869.png">
#3 ViewControllerにNavigationControllerをつける1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
`NavigationController`を付けたい`ViewController`を選択する．

<img width="1171" alt="スクリーンショット 2019-11-19 午後10.47.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/87e89a60-5618-704f-e1d1-fd55ace0b2dd.png">




##part2
Xcodeのツールバーから`NavigationController`を選択する．

<img width="451" alt="スクリーンショット 2019-11-19 午後10.47.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/21ef48a1-dce3-4120-663f-f617556a44ba.png">



##part3
下のようになればOK．

<img width="1170" alt="スクリーンショット 2019-11-19 午後10.48.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/bf36d83f-d1ab-52e3-6db3-685828e3ef46.png">
Microsoft Docsの機械語訳が残念なときの対処法

Microsoft Docsで~~くそみたいな~~機械翻訳に出くわしたらコレ！
日本語が破綻している文章だったり、識別子が日本語に変換されてたり、明らかに識別子が抜けてる文章とかに遭遇して困ったら、お試しください。

# 例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/23a91d37-743d-e6b3-689f-8fdc445367b8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/99d46ab1-7f09-99ca-a89b-2aef0c3caef0.png)
↓ 原文はこれ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/7c0e55ad-e96e-e6d6-7a5e-3bad05e44651.png)

# 対処法

<b>URLの`ja-jp`を`en-us`に変えるだけ！</b>

https://docs.microsoft.com/ja-jp/dotnet/api/system.random?view=netframework-4.8
↓
https://docs.microsoft.com/en-us/dotnet/api/system.random?view=netframework-4.8

# おまけ - ブックマークレット

ブックマークレットにしておけば、ブックマークをクリックするだけで、英語サイトを開いてくれる。(`/ja-jp/`がなくても開いてしまうが・・)

```js

javascript:(function(){window.open(location.href.replace('/ja-jp/','/en-us/'))})();
```

## 参考サイト - ブックマークレット

Edgeは登録するまでが面倒くさいっぽい

- [ブックマークレットの登録方法](https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04)
- [[Windows 10]Microsoft Edgeでブックマークレットを使う。](https://www.ka-net.org/blog/?p=6000)
- [現在開いているwebページのURLを変換して別窓で表示するブックマークレット](https://teratail.com/questions/11472)

日本語(ja-jp)のURLに戻せるものを見つけました。
https://qiita.com/ishiayaya/items/8e7a330b729c9ef2f074
ionicでadmobを使用する

# IonicでAdmobを使用する

Ionicを使用してクロスプラットフォームのアプリを開発したし、折角なので、収益化をしたいという方のための記事です。(私はAngularベースで開発をしていますので、他のVue等では異なる可能性がございます。)

色々なドキュメントで書かれていることが違い、時間を消費してしまったので、まとめてみます。
もしかすると、不要な記述もあるかもしれませんので、コメントなどで、教えていただけると幸いです。

##　手順
1. Admobに登録し、アプリIDを取得する。
簡単ですので、以下のヘルプを参考に登録してください。
https://support.google.com/admob/answer/7356219?hl=ja

1. プラグインのインストールをする。
https://github.com/ratson/cordova-plugin-admob-free
に従い、Install する。

```sh
cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"
```

また、iPhone用に`<platform name="ios">`内に

```xml
<config-file target="*-Info.plist" parent="GADApplicationIdentifier">
    <string>YOUR_IOS_ADMOB_APP_ID_AS_FOUND_IN_ADMOB</string>
</config-file>
```

をconfig.xmlに追加します。

3 . Angularの設定を行う。
ProvidersにAdMobFreeを追加

```typescript:app.module.ts
import { AdMobFree } from "@ionic-native/admob-free/ngx";
...
 providers: [
    ...
    AdMobFree,
  ]
```

config.xmlの</widget>の直前に以下の記述を追加

```config.xml
    <plugin name="cordova-plugin-admob-free" spec="^0.27.0">
        <variable name="ADMOB_APP_ID" value="{AdmobAPPID}" />
    </plugin>
```

4 . 表示したい場所での設定

```typescript

import { AdMobFree, AdMobFreeBannerConfig } from "@ionic-native/admob-free/ngx";
...
export class AppComponent {
  bannerConfig: AdMobFreeBannerConfig = {
    isTesting: true,
    autoShow: true
  };

  constructor(
    ...
    private platform: Platform,
    private admobFree: AdMobFree
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.admobFree.banner.config(this.bannerConfig);
      this.admobFree.banner
        .prepare()
        .then(() => {
        })
        .catch(e => console.log(e));
    });
  }
```

注意点としてはthis.admobFree.banner.prepare()はthis.platform.ready().then()の中で呼ばないと、エラーとなってしまいます。
onInit()の間で呼ぶことも試しましたが、駄目なようです。

# まとめ
Ionicの公式ドキュメントはかなり初心者には難しい部分がある気がします。。。
HTMLやCSS, Javascriptの知識だけで、クロスプラットフォーム開発ができるIonic素晴らしいです！
固定ナビゲーションを設定した際にリンク先要素が隠れてしまう件

こんばんわ:smile:

先日はスクロールした際にナビゲーションバーの背景色を変える方法について記事にしました。

しかし、ナビゲーションバーのリンクを選択するとナビゲーションバーを固定させているため、飛んだ先では固定しているナビゲーションバーの高さ分だけ、ズレが生じていました。

![Qiita_191119_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319138/48c81989-7e56-4f03-d46e-b1fe8ed6d986.png)

そこで、今回はこの方法についてアウトプットしたいと思います。

- 使用言語
    - HTML5, CSS3, jQuery3.3.1, BootStrap4

- テキストエディタ
    - Visual Studio Code

現状を整理するとナビゲーションバーの高さ分だけ、隠れてしまっているため、その分余白をとると上手くいけそうな気がします。

Google Chromeのデヴェロッパーツールより高さはpaddingの上下含めて約85px、padding入れないと約60pxであることがわかりました。

![Qiita_191119_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319138/0bd8b645-3380-00d6-e8b3-9c3fe53e3391.png)

つまり、その分の余白をリンク先でとればいいので、固定ナビの高さ分のネガテイブマージンと打ち消し用のパディングをとればOK！

```css:qiita.css
#service, #point, #about, #faq, #contact {
  margin-top: -70px;　/* 固定ナビの高さのネガティブマージン */
  padding-top: 70px; /* 打ち消し用のパディング */
}
```
リロードすると、↓この通りに余白がとれたため、表示されるようになりました！

![Qiita_191119_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319138/fb0ae8c2-5ded-aa96-88a5-a7b55cf7ab3d.png)
RHEL カーネルリリースバージョン確認方法

#Linux Redhatカーネルのリリースバージョン確認方法
##unameコマンドの利用
Linux RedHat7.7のカーネルバージョンを確認する為には、unameコマンドを利用します。
実行コマンドは下記の通りです。

```
# uname -r
  3.10.0-1062.X.X.el7.x86_64
## 表示される数字部分をXとしています
```

##その他オプションについて

他のオプションについては下記の通りです


| オプション  |  説明　　　　                |
|:-----------|:----------------------------|
| -a         | 全てのシステム情報を表示する                 |
| -i         | ハードウェアのプラットフォームを表示する      |
| -m         | コンピュータのマシンタイプを表示する         |
| -n         | ホスト名を表示する                         |
| -o         | OS名を表示する            　　　　　　　　   |
| -p         | CPU情報を表示する                          |
| -r         | カーネルのリリース情報を表示する             |
| -v         | カーネルのバージョンを表示する               |



##引用

uname-システム情報を表示 Linuxコマンド
>https://webkaru.net/linux/uname-command/

unameコマンドの使い方
>https://eng-entrance.com/linux-command-uname

以上がカーネルのリリースバージョン確認方法でした。
最後までご覧くださりありがとうございました！
RETROF-16　使用部品一覧




  


本ページはQiitaへの投稿の練習用です。
マークダウン記法は初めてなので、結構戸惑ってます。




##使用半導体一覧（電源関係は除く）
単価は参考。税込か税別を含め実勢価格とは異なります。
「店」の意味は後日加筆します。

|使用目的（品名）&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;|型番|個数|店|単価|小計
|---|---|--:|:-:|--:|--:|
|命令レジスタ|SN74LS377|1|M|669|669|a|
|ワーキングレジスタ| SN74ALS569|4|M|617|2468|b|
|プログラムカウンタ|  SN74ALS561|4|M|669|2676||
|アキュムレータ| SN74LS395|4|S|200|800||
|算術論理演算器|SN74LS181|4|A|140|560 |
|フラグレジスタ|  SN74LS175|1|S|100|100|
|フラグ一致検出|  SN74LS151|1|S|90|90|
|ステージカウンタ|  SN74LS163|1|S|75|75|
| 出力ポート |SN74ALS563 | 4 |S|220|880|
| 入力ポート |SN74LS257 | 4 |S|100|400|
|命令デコード、他|  SN74LS155|2|S|300|600|
|命令デコード、他|  SN74LS138|4|S|260|1040|
|バスバッファ、他|  SN74LS541|6|S|150|900|
|バストランシーバ|  SN74LS245|1|S|150|150|
|チャタリング防止|  SN74LS279|1|S|120|120|
|補助ゲート(NAND)|  SN74LS00|1|S|40|40|
|補助ゲート(NOT)|  SN74LS04|1|S|60|60|
|ピクセルカウンタ|SN74HC4520|2|S|110|220|
|ピクセルカウンタ|SN74HC163|2|S|70|140|
|同期信号デコーダ|SN74HC139|1|S|48|48|
|USB I/F <br>秋月オリジナル品|AE-FT245R| 1| 秋 |980|980|
|発振素子 CPU用<br>16.000MHz 5V　 |SG8002DC| 1|秋| 300 |300  |
|発振素子 画像用<br>27.000MHz 5V |SG8002DC| 1|秋|300 |300  |
|LED 5mm 広角<br>出力ポート直結用|OSY5EA5B61A|32|秋|10個<br>100|400|
|LED 3mm 砲弾形<br>内部状態視認用<br>1mA以下で光る物|OSR5PA3E34B|15|秋|10個<br>110|220  |
|超低Vfダイオード<br>181の演算種別指定<br>命令デコード、他|1S3|67|秋|13|871|
|主メモリ 70ns<br>（ROM 256Kbit）| 27C256<br>非必須部品|  2|OC|時価<br>500|時価<br>1000|
|主メモリ 70ns<br>（RAM 256Kbit）| HM62256|  2|OC|時価<br>500|時価<br>1000|
|画像メモリ 70ns<br>（RAM 1Mbit） |HM628128|  1|OC|時価<br>600|時価<br>600|
楽に英語サイトを検索できるようにするための設定

# 楽に英語サイトを検索できるようにするための設定

プログラミングに限らず情報源は圧倒的に英語サイトが多い。"How to ~" のように英文で検索すれば英語サイトに行き着きやすい。が、それでも日本語サイトが多くヒットするし、単語の列挙による検索よりもハードルは上がる。
そこでChromeの設定を英語にすると単語の列挙でも多くの英語サイトがヒットし、日本語サイトはほとんど排除できる。
そのかわり普段の検索ももちろん英語になる。

## Chromeの設定は日本語のまま英語サイトも検索する

Chromeで検索したときにURLパラメータに"hl=en", "gl=us"を追加すると、言語設定は英語・地域設定はUSで検索したときと同じ検索結果が得られる。

例）javascriptを検索
https://www.google.com/search?q=javascript
https://www.google.com/search?gl=us&hl=en&q=javascript

これを利用して英語サイトを楽に検索するための設定を二つ記載する。

## Chromeの既定の検索エンジンを設定して実現する

こちらは別記事で解説されていたのでリンクを張る。
[Chromeで簡単にアメリカ(USA)版のGoogle(Google.com)を利用する方法](https://qiita.com/murata0705/items/f16c73d7bbbdb52322c3)

## Vimiumを使って実現する

### Vimium

[Vimium](https://qiita.com/murata0705/items/f16c73d7bbbdb52322c3)はブラウザ操作のほぼすべてをキーボード操作できるとても便利なChrome拡張機能。
これがあればマウスはほぼ用無しになる。

### VimiumのCustom search enginesを設定する

VimiumのCustom search enginesに関して別記事で解説されていたのでリンクを張る。
[VimiumのCustom search enginesを使って検索をスムーズに](https://qiita.com/evistream/items/70ad2916b01dee33ad52)

Vimium OptionsのCustom search enginesに以下を追加する。

`us: https://www.google.com/search?gl=us&hl=en&q=%s Google US`

これで`ous javascript`でUSからjavascriptを検索したのと同じ結果が得られる。

ついでに
`t: https://translate.google.com/?hl=ja&op=translate&text=%s Translate`
これを追加すると`ot hogehoge`で翻訳してくれる。
tfjsで渋野日向子プロとボールを追いかける

Pythonが隆盛のAIプログラミングですが、私はWEB屋なのであくまでもJavascriptにこだわりたい、と思い、オブジェクト検出・CoCo-SSDの転移学習に挑戦してみました。ゴルファーが泣いて喜ぶ、壮大な野望を目論みつつ、日々勉強中です。

tfjsのMobilenet（画像分類）においては、[こちら](https://www.tensorflow.org/js/tutorials/transfer/image_classification)にチュートリアルがあり、比較的容易に転移学習が可能です。前回の「[渋野日向子プロのスイングを機械学習してみた](https://qiita.com/Chishiki/items/ce5d3359a097db884fcc)」は、これを改良しています。

##JSサンプルが無い
思った以上に、JSでのCoCo-SSD転移学習の事例が無いことがわかりました。
そこで、いずれにせよGPU環境が必要にもなるので、Google Colab上で、Pythonで転移学習させ、出来上がったモデルを [tfjs_converter](https://github.com/tensorflow/tfjs/tree/master/tfjs-converter) を使ってJSモデルに変換しよう、と思い、実践しました。
Pythonならいくらでも転移学習の事例が転がってますね。その中からとあるGithubのものを使用しました。小手始めに、画像・映像から「渋野日向子プロとボールを追いかける」ことを目標にしました。

##アノテーション作成が大変
オブジェクト検出を作った方ならご存知の通り、１枚の画像から「渋野プロ」と「ボール」を一つずつ正方形で囲ってXMLにするのが大変。。もちろんツールを使いましたが、２０枚作成が限界でした。。先人の皆さん、本当にご苦労様です。

##Pythonモデルは出来たが。。
Jupyter Notebook、便利ですね。作成した画像とXMLに入れ替えて、Google Colab上でipyonbに準じて実行し、無事Pythonモデルは出来ました。8000エポックで、誤差ほぼなし。ただし元画像２０枚は少ないので、どこかで影響は出るかも。
あとは、[こちら](https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd#technical-details-for-advanced-users)にある通りにJS版に変換すればOK、と思っていましたが、これがエラーを吐きまくり、何とか出来たと思っても今度はJS側で「Unknown op 'NonMaxSuppressionV5'」というエラーで動作しない。

##引数値が違ってる
[こちら](https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd#technical-details-for-advanced-users)にある通り、Python版のモデルはそのままJS版では動かないので、Pythonモデルからあれこれ取り除かないといけない、ということで、tensorflowjs_converterのヘルプをよく見ると、
「--output_node_namesは、--input_format=tf_frozen_modelでしか使えない」
とあったので、--input_format=tf_frozen_modelとして、入力ファイルに「./saved_model」ではなく、.pbファイルを指定して実行したら、無事変換成功しました。
Tensorflowはバージョン依存が激しいようなので、特に過去記事には要注意です。

##PC性能に依存します
![スクリーンショット 2019-11-19 22.09.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/617b6950-ba7f-e2e1-06d7-cf7de97143d0.png)
何はともあれ、ブラウザで動くので、PCのスペックと回線状況に依存します。モデル読み込み〜描画までに数十秒掛かることも。この辺りがJS版の弱点ですね。
予想はしていましたが、動画やライブで使えるようになるには、スマフォを含めたスペックアップと軽量モデルが必要に思います。
ただ、これが手持ちの機器でライブで軽快に動作するようになると、スポーツおいても用途が多くなると思っています。

##何に使う？
将来的には、高価な測定機器に匹敵するものを作ろうと模索中。
協力者を募っています。

あと、セマンティックセグメンテーションの転移学習にも挑戦しようかな。
お題は「渋野日向子プロを隠そう」かな。
【初心者向け】GitHub Pagesを使ってHPを爆速で公開する

https://qiita.com/turmericN/items/76559f0b70983469e7c7

上記の記事を読んで、転職活動のために自分のプロフィールやスキル、
成果物をまとめたHPを作ろう！と思って作成しました。
　
HP、作ったからには公開しないと誰にも見てもらえないです…(´・ω・`)
HPを作成する際、作ったは良いけど公開するのがちょっと手間ですよね。

HPを公開する際にはサーバが必要です。自前で用意するのは今回はナシとして、
レンタルサーバでも良いけど折角ならGitHubの機能の一つ、GitHub Pageを使って
めっちゃお手軽に自分の作ったページを公開しちゃいましょう！

最初に紹介した記事のドメインがGitHubのものだったのでどうやったんだろうと
調べて知りました。とっても便利ですよ！

ちなみに実際に作ったのは↓です。
https://stern118.github.io/
![portfolio_site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192097/f9c7d48e-cb8f-bb93-bc11-daa331c6b313.png)

# GitHub Pageとは
「GitHub Pages」とは、「GitHub」を使ってHPを公開することができる機能です。
サーバを用意する必要がなく、GitHubのアカウントを持っていれば誰でも使用することのできる機能です。

詳しくは下記の公式のHPをご参照ください。
https://pages.github.com/

GitHubを使用しているので以下の様なメリット、デメリットがあります。

- メリット
 1. Webサーバが不要！
 2. GitHubのアカウントを持っていれば爆速でHP公開できる
 3. 公開しているファイルを増やしたり、編集する際Gitの基本練習になる

- デメリット
 1. ソースコードが公開される
 2. 多数の人がアクセスするサイトには向いてない

# 実際やってみる
早速やろうぜ～！GitHubのアカウントがない人は作成してね！
PCにGitがインストールされていない人はまずGitをインストールしましょう。
[Git OS名 インストール]などで調べれば沢山の有益な情報がネットには転がっています。

## リポジトリの作成
公式HPを見ると、
> Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.

とありますので、[自分のユーザ名].github.ioというリポジトリを作成しましょう。

1. Repository nameの欄に「[自分のユーザ名].github.io」を入力
2. Create repositoryボタンを押下して、リポジトリを作成

![リポジトリ作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192097/697b6976-0cf0-4475-8e92-b6155d1ef85c.png)

## リポジトリのクローン
リポジトリをクローンします。
![URL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192097/aff1f9b1-0165-f6eb-f7e5-738420f70ca6.png)

上の画像のURL部分をコピーして、git cloneします。
(テキストボックスの横のボタン押すとコピーされます)

リポジトリを置きたい任意の場所に移動します。
OSがMacの人はターミナルで、Windowsの人はGit Bash上で、以下のように入力してください。
※Git Bashはクローンしたい場所で右クリックからGit Bash Hereを選べば使えます。

```sh
$ git clone https://github.com/stern118/stern118.github.io.git
```
警告が出ますが無視して大丈夫です。

## index.htmlの作成
以下のコマンドを実行して、index.htmlを作成します。

```sh
$ cd stern118.github.io               // クローンした場所へ移動
$ echo "Hello World" > index.html
```

## GitHubにindex.htmlをpush
あと一息です！
以下のコマンドを実行して、ローカルで作成したindex.htmlをGitHubにpushします。

```sh
$ git add --all                         // ステージングエリアに変更ファイルを追加
$ git commit -m "Initial commit"        // ローカルリポジトリにコミット
$ git push -u origin master             // リモートリポジトリにプッシュ
```

## ページにアクセス
公開の準備は整いました。
https://[自分のユーザ名].github.io.にアクセスしてHello Worldと表示されていれば成功です！
あとはこのページを充実させたり、新しくファイルを作ってリンクを繋いだりして
カスタマイズしていきましょう。

##やってみて感想
爆速すぎて感動しました。
静的なページを公開するのにお手軽で早くて本当におすすめです！

あとQiita初投稿なんですが、コンスタントに記事を投稿してる方々凄いなぁと思いました。
初投稿故色々見苦しいところがあるかと思いますが、参考になれば幸いです。

##参考
https://pages.github.com/
https://qiita.com/turmericN/items/76559f0b70983469e7c7

##最後に
転職活動中の人は一緒に頑張ろうな！！！！
Progateを使って、1ヶ月でプログラミングを学びなおしてみた

みなさんはプログラミングをどのように学びましたか？
自分は本や大学講義で学びました。言語はCでした。
しかし今やC言語はほぼ使わず、別の言語が多いです。使う頻度もそこまで高くないので、必要な時にその場その場で本やネットで調べながら書く程度。[^1]
そんな中、最近はオンラインでもプログラミングが学べる時代のようなサービス(Progate)もあることを知り、今までとは違う学習方法に興味がわき、勢いで有料プランに申し込み。
1ヶ月でざっと終えたので、初めてオンライン学習を使ってみた感想を共有します。

## Progate とは

Progateはオンラインプログラミング学習サービスです。「初心者から、創れる人を生み出す」ことが、私たちの理念です。プログラミング初心者のハードルを出来る限り取り払うこと、そして本当に創れるようになるレベルの高い学習を提供することを目指しています・・とのこと。

詳しくはこちらドゾ ->  

- 本家様：[https://prog-8.com/](https://prog-8.com/)
- ぐーぐるの上のほうの紹介記事 [https://www.sejuku.net/blog/11118](https://www.sejuku.net/blog/11118)

## オンライン学習

### やったこと

言語、技術ごとのコースがあり、コースの中に講義がいくつか入っている感じなので、

興味あるコースを全部受けました。（いちお全部少し触ったことあるくらいです。）

- HTML&CSS
- JavaScript
- jQuery
- Python
- git
- SQL
- Sass
- command line
- React

証拠画像

![progate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375620/68157322-978f-683c-b2ed-9fe9b799a1e8.png)


コースはうけなくてもスライド等はみれるのでRubyとrailsで何してるかは見ました。

### よかったこと

- スライドをみる -> コード書く　の繰り返しで手を動かしながら学べる
  - 特にHTML系では書いてその場で正解かどうかわかるのは面白かったです。
- 用意するのはブラウザだけでいい
  - ITあるある環境構築に躓くを感じさせないスタイル
- いつどのくらいやったかがわかる
  - gitみたいに草が生えます
- googleアカウントログイン、paypal支払い可能
  - 登録とかめんどくさいのですぐスタートできます。これが一番大きいです。
- 1章は無料、それ以降は有料
  - 自分にあう、あわないがすぐわかります。
- Progateの理念、目指しているところがわかるコンテンツ作り
  - ぶれてないのはいいですね。
  - （しいて言えばレベルの高い学習＝学習方法としてのレベルが高い・・ですかね？難しいレベルを学べるコンテンツではない気がしました。）

### もうひとつなところ

~~よくなかったこと~~

- コミュニティ機能は何に使うんですか・・（一人でやってたからかもですが。。）
- レベルアップウインドウが邪魔
- あくまで基礎レベル。
  - 他コンテンツと連携できると面白そう。（ビジネス向けには何かやってるみたい？）
- 日本語入力でUIがたまにバグる。
  - 文字があるところにカーソルがいかない＆delete backspaceがきかない。

## 感想

HTML&CSSは資格を暗記でとって書いたことなかったのでとても楽しめました。
ボタンとかあんな感じで実装するんですね。
プログラミング系は忘れてた基礎構文を振り返れてよかったです。
プログラム始めたり、触りにはちょうどいいですね。これがきっかけで、プログラムとかITが楽しいと感じる人は増えるコンテンツになっていると思います。さらに学んでいくきっかけまで提供するか、その人に調べてもらうかが難しい、、

## idle talk

個人的にはweb系の技術をあまり触ってこなかったので、HTML&CSSやReactはとても面白かったです。もう少し深く勉強していこうと思います。
前回記事で書いたAWS SAPのvoucherも届いたので、どれやるか迷います、、

あ、Progateは目的達成したので、解約しました。

<font color='gold'>ありがとうProgate。</div>

[^1]: 職はいちおIT系です。.
PythonでPDF結合GUIを作る その１

はじめてのQiita投稿です。
備忘録的にPython初心者の私が作成したものなどを公開していきたいと思います。

なるべく1回の投稿を簡潔にまとめたいので以下の3回に分けて投稿します。

　**その1　TkinterでUI作成**
　**その2　PyPDF2でPDF操作**
　**その3　pyinstallerでexe化＋アイコンを付ける**
# 背景
　・「いきなりPDF」や「PDF Mergy」を使わずにPDFファイルを結合したい
　・PythonでUI作成したい

# Tkinterでウィンドウ作成

```python
import tkinter
import PyPDF2
import os

root = tkinter.Tk()
root.title('PDFMerger')
root.geometry("800x700")
ver = '1.0.0' #バージョン

root.mainloop()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447145/41395a1a-a853-fda1-a116-3a325c790559.png)

# テキストボックス、ボタンを配置

以下5つのアイテムから構成する
　1. テキストボックス「パス」：結合するファイルのフォルダパス
　2. テキストボックス「ファイル名」：結合後の保存ファイル名
　3. ボタン「Open」：結合するファイルを表示
　4. ボタン「Merge」：結合してファイル保存
　5. テキストボックス（ラベルなし）：色々な表示

以下のコードをroot.mainloop()の上に書く
（commandはまだ設定していないのでコメントアウトしています）

```python
# Openボタン
button = tkinter.Button(root, text="Open", width=8, height=2, font=(u'Meiryo', 8), bg='#add8e6', fg='#000000')
#button = tkinter.Button(root, text="Open", command=clicked, width=8, height=2, font=(u'Meiryo', 8), bg='#add8e6', fg='#000000')
button.place(x=80, y=120)

# Mergeボタン
button = tkinter.Button(root, text="Merge", width=8, height=2, font=(u'Meiryo', 8), bg='#4169e1', fg='#ffffff')
#button = tkinter.Button(root, text="Merge", command=merge, width=8, height=2, font=(u'Meiryo', 8), bg='#4169e1', fg='#ffffff')
button.place(x=200, y=120)

# ラベル1　パス
lbl = tkinter.Label(text='パス', font=(u'Meiryo', 8))
lbl.place(x=25, y=30)

# テキストボックス１　パス
txt1 = tkinter.Entry(width=80)
txt1.insert(tkinter.END,"パスを入力してください")
txt1.place(x=80, y=30)

# ラベル2　保存ファイル名
lbl = tkinter.Label(text='ファイル名', font=(u'Meiryo', 8))
lbl.place(x=5, y=75)

# テキストボックス２　保存ファイル名
txt2 = tkinter.Entry(width=80)
txt2.insert(tkinter.END,"merged")
txt2.place(x=80, y=75)

# テキストボックス３　ファイル
txt3 = tkinter.Text(width=80, font=(u'Meiryo', 8))
txt3.place(x=80, y=200)
txt3.insert('1.0','version ' + ver + '\n\n１．結合するPDFファイルのパスを入力\n\n２．Openボタンでファイル確認\n\n３．Mergerボタンでデスクトップに  ファイル名.pdf  を作成\n')
```
できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447145/ed492334-9fa7-3074-84a5-b11015eb5d91.png)

# 参考
https://qiita.com/SquidSky/items/90eb450310f1697d03e9
PHPでのオートロードをやってみる

# PHPでのオートロード

オートロードとはなんぞやということでメモしていきます。


```php:auto01.php
<?php
include 'classFolder/person.php';
include 'classFolder/house.php';
include 'classFolder/job.php';
include 'classFolder/teacher.php'
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <?php
    $person1=new Person('Bob');
    echo $person1->personName(); //-->My name is Bob
     ?>
  </body>
</html>
```
```php:classFolder/person.php
<?php
class Person{
  public $name;
  public function __construct($name){
    $this->name=$name;
  }
  public function personName(){
    return 'My name is '. $this->name;
  }
}
 ?>

```
ここでは省略するためclassFolderの中にはたくさんのクラスファイルをまとめているとして、それぞれのクラスではPersonクラスと同様のフィールド、コンストラクター、ファンクションがあるとします。
このようにphpの冒頭で大量のincludeやrequireをしていくと、どのファイルを読み込んで、どのファイルを読み込んでないのか混乱するし、手間もかかる。


**ここでオートロードを定義してみる**

```php:auto01.php
<?php
 spl_autoload_register('myAutoLoader');//myAutoLoaderという名前の関数を作る

function myAutoLoader($className){ 
  $path="classFolder/";
  $extention=".class.php";
  $fullPath=$path.$className.$extention;
  include_once $fullPath;
}
 ?>
```
目的のクラスへのパスをとり、最後に引数へと渡す。
シェルスクリプト リスト

リストはパイプラインが改行や ; & && || で区切って並べられたもの。

```bash:list1
# cd と ls の2つのパイプラインが ; で区切られ1つのリストになっている
cd /home/my; ls -l
```

```bash:list2
# ; で区切られている場合、左から右に順番にフォアグラウンドで実行される
cd /home/my; cd /home/you; cd /home/who
```

```bash:list3
# & で区切られている場合、左から右に順番にバックグラウンドで実行される
# 最後のパイプラインもバックグラウンドにする場合は、&で終端すること
cd /home/my& cd /home/you& cd /home/who&
```

```bash:list4
# コマンドはパイプラインかつリスト
ls -alt

# リスト（コマンドでもパイプラインでもない）
cd /home/my; ls -alt

# グループコマンドにするとパイプラインかつリストになる
{ cd /home/my; ls -alt; }
```
2019-11-19 Zephyr + STM32F769 Discovery Kit > UDP > UDP echo server | FreeRTOS+LwIP時のUDP不具合は見られない

```txt:動作環境
Ubuntu 18.04 LTS
STM32F769 Discovery Kit (以下、STM32F769)
Zephyr 2.1.0-rc1
```

### 概要

- STM32F769にてUDP echo serverを動かす
    - RTOSとして[Zephyr](https://www.zephyrproject.org/)を使用する
- IP addressは以下とした
    - STM32F769 : 192.168.0.10
    - Ubuntu: 192.168.0.9

### 前準備

- [Zephyr: Getting Started Guide](https://docs.zephyrproject.org/latest/getting_started/index.html)にてLEDブリンクまで動作確認

## UDPサンプル

### 設定変更

- 対象ディレクトリ: `samples/net/sockets/echo_server`
- 変更ファイル
    - prj.confの以下の部分を下記のようにしておく
        - `CONFIG_NET_CONFIG_MY_IPV4_ADDR="192.168.0.10"`
        - `CONFIG_NET_CONFIG_PEER_IPV4_ADDR="192.168.0.9"`

### ビルドと実行

一つのターミナルで下記を実行する。

```
$ cd ~/Zephyr_191116/zephyrproject/zephyr
$ west build -p auto -b stm32f769i_disco samples/net/sockets/echo_server/
$ west flash
$ west debug
```

GDBが始まるのでcontinueしておく。

別のターミナルでUDPパケットを送信する。
ポートは`MY_PORT`として定義されている4242を指定する。

```
$ echo "Hello" | nc -u 192.168.0.10 4242
Hello
```

echo backされた。

### FreeRTOS+LwIP時のUDP不具合は見られない

- [2019-08-18 STM32F769 Discovery Kit > FreeRTOS + UDP > 一パケットしか処理されない > 解決のめどが立たない](https://qiita.com/7of9/items/98f9f052148be3eae085)

> UDPの受信は一回だけ成功し、二回目から無応答になる

FreeRTOSの時はUDPのecho backが正常に動かなかった。
Zephyrでは今のところ正常に動いているようだ。

STM32のファームウェアの問題かと思ったが、そうではないのかもしれない。
FreeRTOS + LwIPの組合せの問題だろうか。

Zephyrについてはまだ不明な部分が多い。
しばらく使ってみる。回避不能な問題がなければ良いが。


### 関連

- [linux > udpで "TEST2" を送信する > echo "TEST2" | nc -u 192.168.10.6 6000](https://qiita.com/7of9/items/fc97f966ac51b8a15d66)
python/pandas/dataframe/最もsimpleな行・列・index・columnの取得方法

## DataFrame作成

**▼ コード**

```python
df = pd.DataFrame([
    ['a0','b0','c0'],
    ['a1','b1','c1'],
    ['a2','b2','c2'],
    ['a3','b3','c3'],
], 
    columns=['a','b','c'],
    index=[0,1,2,3]
)
df
```
**▼ 出力結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71616/4800b58c-3514-a053-9263-f15a8cc84312.png)


## 行・列指定取得
**▼ コード**

```python
# locを用いたケース
df.loc[[0,2],['a','c']]
# ilocを用いたケース
df.iloc[[0,2],[0,2]]
```
**▼ 出力結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71616/d0932c6a-0009-6fec-288a-407a60e1c755.png)

## index,columnの取得

### indexの取得
**▼ コード**

```python
df.index
```

**▼ 出力結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71616/d48582da-d5b4-af3b-237e-68864c20ac23.png)

### columnの取得

**▼ コード**

```python
df.columns
```

**▼ 出力結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71616/5e9034be-9df5-06fb-935d-5c6f1bca512c.png)