OmniAICreator/Qiita-1.07M huggingface dataset:
Cloud Firestoreからデータを取り出しvue-chartjsで表示する

##【説明】
https://view-fire.web.app/
社内で外注するときにコミュケーションツールや案件を列挙する想定で作ったアプリです。
その部分のアナリティクス部分にてFIrestoreから受けった情報をvue-chartjsで表示した方法です。

サイトはログインオーサライズがあり、私が認証しないと中に入れないようになってるので、、、すいません。

##【仕様】
FIrestoreからデータを取り出して子コーポネントに値を渡して表示する方法


##【事前に必要なもの】
vue.js
vue-chartjs


##【FIrestoreのデータ】
- 名前
- 金額
- LIKE数
- 日数
という感じになってます。

```vue:parent.vue
 data() {
    return {
      msg: "アナリティクス",
      products: [
        {
           label: [],
           date: []
         },
        {
           date: []
         },
         {
           date: []
         }
      ]
    };
  },
   created() {
    this.db = firebase.firestore();
    this.todosRef = this.db.collection("todos");
    this.todosRef.onSnapshot((querySnapshot) => {
      const obj = {};
      querySnapshot.forEach((doc) => {
        obj[doc.id] = doc.data();
      });
      this.todos = obj;

      var my_obj = this.todos;

      for (let country of Object.keys(my_obj)) {
        var capital = obj[country];
        
        //name
        this.products[0].label.push(capital.name);

       //like count
        this.products[0].date.push(capital.todosPush.length);

        //budget
        var Normalization1 = Number(capital.budget)/100000;
        this.products[1].date.push(Normalization1);

        //period
        this.products[2].date.push(capital.period);
      }
    });
  },
```

```vue:child.vue
  props: {
    products: {
      type: Array,
    },
  },
  data() {
    return {
      db: null,
      todosRef: null,
      data: {
        labels: this._props.products[0].label,
        datasets: [
          {
            label: "LIKE",
            data: this._props.products[0].date,
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgba(255, 99, 132, 0.2)",
            borderWidth: 1,
          },
          {
            label: "予算",
            data: [10, 50],
            borderColor: "#60253F",
            fill: false,
            type: "line",
            lineTension: 0.3,
          },
          {
            label: "工数",
            data: [20, 40],
            borderColor: "#d35871",
            fill: false,
            type: "line",
            lineTension: 0.3,
          },
        ],
      },
      options: {
        scales: {
          xAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: "Project",
              },
            },
          ],
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                stepSize: 10,
              },
            },
          ],
        },
      },
    };
  },
  mounted() {
      this.renderChart(this.data, this.options);
  },
```

##表示はこんな感じです
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f313937303931342f35643739303832382d333731662d356432632d646264352d303139393937643761663766.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1970914/1bf2adaf-51d9-5fec-5304-e04543ea4f31.png)
Github collaboratorsを使って複数人で開発する手順

#はじめに
Githubでは複数人で開発する方法が色々とあるが、今回は会社のような組織というより、「友達と一緒に何かを作る時」を想定した内容となっております。

わかりやすくするために、ここでは登場人物を2人だけとする。

**Aさん→「リポジトリX」を作成した人**

**Bさん→Aさんと一緒に「リポジトリX」を開発してくれる友達。Bさん開発する場合はプルリクエストを出して、Aさんが承認する**

こんな形態を実現するにはどうしたらいいか？



#collaboratorsに追加する
Aさんが作成した「リポジトリX」に、collaboratorsとしてBさんを追加します。

![スクリーンショット 2021-09-03 10.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/f878fd17-39c6-7ff0-6f7b-6790d836b407.png)


詳しいやり方は👇を参考に！

https://docs.github.com/ja/github/setting-up-and-managing-your-github-user-account/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository

#クローンする
BさんはAさんが作成した「リポジトリX」を`clone`します。

![スクリーンショット 2021-09-03 10.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/905b9b12-f797-33ce-7153-ab67b22c0231.png)

この時点でBさんは「リポジトリX」に対して`push`したり色々できるようになります。

#collaboratorsの権限を変更する
（「権限を変更する」って言葉の意味があってるかは分かりませんが、、、）

実現したいことがもう一つあり、**「Bさんがプルリクエスト出す→Aさんが承認する」**という流れがあります。

ただcollaboratorsに追加しただけだと、BさんはAさんの承認なしに色々とできます

>個人リポジトリでのコラボレーターの主要な権限には以下のものがあります。

>リポジトリに関する権限
プッシュ (書き込む)、プル (読み取る)、フォーク (複写)
プルリクエストに関する権限
オープン、マージ、クローズ
イシュ―に関する権限
オープン、再オープン、割り当て
コミット、プルリクエスト、イシュ―に対するコメントの編集と削除
リリースの作成と編集
Wikiの作成と編集
パッケージを公開、表示、インストールする
会話のロック
http://www.y2sunlight.com/ground/doku.php?id=github:collaborator

https://docs.github.com/ja/github/setting-up-and-managing-your-github-user-account/managing-user-account-settings/permission-levels-for-a-user-account-repository#collaborator-access-on-a-repository-owned-by-a-user-account


いくら友達とはいえ「親しい中にも礼儀あり」と言うことである程度の制限を設けることにします。

![スクリーンショット 2021-09-03 10.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/d1b84536-eac6-5d3a-9428-9ddea7cdfc35.png)

これで特定のブランチに対してルールを設けることができます。


ルールの詳細ややり方は👇を参考に！

https://qiita.com/da-sugi/items/ba3cd83e64c689795c50

https://docs.github.com/ja/github/administering-a-repository/defining-the-mergeability-of-pull-requests/managing-a-branch-protection-rule
Mac上のqutebrowserでspawnが動作しないとき 備忘録

謎にハマったのでメモ。

#TL;DR
・Mac上のqutebrowserからspawnをつかってコマンドを叩きたい(mpv + youtube-dlなど)
・$PATHが反映されない事が原因
・config.pyに書きこめば解決

#経緯
qutebrowserにはspawnというコマンドがあり、OSのコマンドを直接叩ける。が、mpv + youtube-dlを試した所、エラーを吐いてURLが送れない。
どうやらMacOSのGUIからアプリケーションを起動すると.profileのpathが反映されない、これが原因らしい。
ということで絶対パスでコマンド打てばいいけどあまりスマートじゃない~~というか一々打つのが面倒くさい~~ので設定ファイルにパスを書き込んでしまおう

#手順
##step1
まずはmpvの居場所を確認しメモしておく

```console
$ which mpv
/opt/homebrew/bin/mpv
```
>インストール方法によって異なる。/usr/local/binにいる事も多い

##step2
次にqutebrowserに反映されているパスを確認、こちらもメモしておく

```
:debug-pyeval __import__('os').environ['PATH']

'/Applications/qutebrow:ser.app/Contents/MacOS:/usr/bin:/bin:/usr/sbin:/sbin'
```
>結果は新しいタブでブラウザ上に表示される

#step3
両方確認できたらqutebrowserの設定ファイル(config.py)に書きこむ。
パスの内容は環境に合わせて変える。
どこでも良いです。とりあえず最下部にでも

```python:config.py
import os

os.environ['PATH'] = 
'/Applications/qutebrowser.app/Contents/MacOS:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin/'
```
>osモジュールのインポートを忘れずに。
importはファイルの先頭でするものだけど今回は別に困らないので、os.environ[]より前に入ってればどこでも良い(雑)

###config.pyについて
Macなら`~/.qutebrowser/config.py`にいるはず。
みつからなければ`:config-write-py --default`でqutebrowserが初期設定を出力してくれるし、もちろん1から書いても○

#参考
https://qutebrowser.org/doc/help/configuring.html
AWSのCodeCommit 利用手順

#CodeCommitを利用するための手順
備忘録として

## リポジトリ作成

CodeCommitにアクセスして、「リポジトリ作成」を押下します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/76ad2881-f81b-47cd-0580-bbacf422e175.png)

リポジトリ名を入力して、「作成」を押下します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/c9bf5fe2-2646-255d-3703-89f6b95f3f4c.png)

これで空のリポジトリが完成します。

## ユーザー作成

ローカルからアクセスするためのユーザーを作成します。

IAMコンソールからユーザーの「ユーザー作成」を押下します。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/869dde44-22c3-810c-4e8d-e3c8a861fd93.png)

ユーザー名を入力して、「プログラムからのアクセス」にチェックを入れ次に進みます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/fc11f4b8-e2fa-8f4e-386d-3c3a9b31c56c.png)

続いて、アクセス権限「AWSCodeCommitPowerUser」を付与します。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/b9a05989-a173-b5e7-254c-f2ec775847b6.png)

最後に確認が出て下記のようになればOKです。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/2f89c58a-01b3-0e02-286a-209df32ccbff.png)


## Git用アクセス情報作成

IAMコンソールのユーザーの作成したユーザーを押下します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/f6100835-6087-2419-ce6b-81598101a35c.png)

AWS CodeCommitのHTTPS Git認証情報の「認証情報を生成」を押下します。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/46864ce9-d2ae-a29f-5319-8f64637284dc.png)

ユーザー名とパスワードが出るため、メモしておきます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/e5d73fef-f992-bcde-4941-f7a972508608.png)

## Git Pull

CodeCommitのリポジトリーより対象の「URLのクーロン」よりHTTPSを押下します。
(この時クリップボードにコピーされます。)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/79872665-69b1-af4e-5d89-1b2252d97aec.png)

ローカルPCの任意の場所で、「`git clone <URL>`」をコマンドで実行します。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/1194740f-a996-4c01-814f-691554376f1c.png)

実行するとユーザー名/パスワードが聞かれるので先ほどのユーザー名/パスワードを入力します。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269756/ca3021e6-9048-54cc-61ea-eb1ae1e232cc.png)


## おしまい
あとは通常通り利用できると思います。
Macターミナルでの圧縮・解凍コマンド備忘録

##はじめに
ターミナルでのファイル圧縮のコマンドが圧縮形式によってさまざまで，その時々で調べるのが大変なので，簡便なコマンドのみにしぼって備忘録としてまとめました。本記事ではzip，gzip，bzip2およびtarファイルについてのコマンドを記載しております。各種圧縮形式の特徴については参考記事をご覧ください。

##環境
macOS Big Sur (バージョン11.5.2)

##zip
最も有名な圧縮形式。ソースファイルが大きすぎたり(4GBくらい）圧縮後のファイルが大きすぎる(2GBくらい)場合は破損が起こるので注意。


```
zip [zip File Path] [Source File Path] #圧縮
unzip [zip File Path] #解凍
```

##gzip

```
gzip [Option] [File Path] #圧縮
gunzip [Option] [gzip File Path] #解凍
```

-k: ソースファイルを残す
-v: 圧縮率の表示

作成されるgzipファイルは元ファイル名に拡張子**.gz**がついたものとなる。

##bzip2

```
bzip2 [Option] [File Path] #圧縮
bunzip2 [Option] [bzip2 File Path] #解凍
```

作成されるbzip2ファイルは元ファイル名に拡張子**.bz2**がついたものとなる。

gzip，bzip2形式の圧縮ファイルはFinderでダブルクリックしても解凍できる。

##tar
tar(Tape ARchive)ファイルはアーカイブファイル。さまざまなファイルを一つのファイルへとまとめることで，メール等で大量のファイルを簡便に送ることができる。無圧縮で作成するか，または各種形式で圧縮して作成するかをオプションで選べる。

###tarファイルの作成

```
tar -cvf [tar File Path] [Source File Path]
```

-c: 新しいアーカイブの作成を意味するオプション
-v: 詳しい情報の表示
-f: アーカイブファイルのパスを指定するためのオプション

tar File Pathの拡張子には**.tar**を指定する。

###tarファイルの内容の表示

```
tar -tvf [tar File Path]
```

-t: 一覧を表示するためのオプション


###tarファイルの展開

```
tar -xvf [tar File Path] -C [Destination Path]
```

-x: 展開を指定するオプション
-C: 展開先のディレクトリを指定するためのオプション

###gzip形式の圧縮アーカイブファイルを作成する

```
tar -cvzf [tar File Path] [Source File Path]
```

**gzip**形式で圧縮されたtarファイルを作成するためには **-zオプション**を加える。
拡張子は**.tar.gz**または**.tgz**を指定する。.tgz形式のtarファイルの内容を表示，また解凍を行うためには，上記の各コマンドに同様に-zオプションを加えることで可能となる。


###bzip2形式の圧縮アーカイブファイルを作成する
```
tar -cvjf [tar File Path] [Source File Path]
```

**bzip2**形式で圧縮されたtarファイルを作成するためには**-jオプション**を加える。
拡張子は**.tar.bz2**。内容表示と解凍も同様に-jオプションを加える。

##参考にさせていただいたサイト，書籍，Qiita記事
[Macでの圧縮・解凍コマンドをメモっておく件](https://skume.net/entry/2020/06/03/023843#%60.bz2%60%20&%20%60.tar.bz2%60)
[ファイルの圧縮についてまとめ](https://qiita.com/shotets/items/b210e19b0b05513513da)
[これから学ぶmacOSターミナル](https://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6macOS%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB-%E5%A4%A7%E6%B4%A5-%E7%9C%9F-ebook/dp/B01NBK3TCY/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=mac+%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB&qid=1630190280&sr=8-1)
Pepper SDK入門(33) LookAtで見えないもの以外を見つめる

#はじめに
LookAtは特定の物や人を見たり、頭部とホイールでそれをトラッキングしたりするのに用いられます。魑魅魍魎や未確認生物の類は見えないはずですが、逢魔時とか丑三つ時とかに試してみるといいかもしれません👻👽
下はLookAtアクションをPepperに実行してもらう場合のサンプルコードです↓

```java
//LookAtのためのターゲットフレームを取得
Frame targetFrame = ...;

//アクションをビルド
LookAt lookAt = LookAtBuilder.with(qiContext)
                             .withFrame(targetFrame)
                             .build();

//非同期にアクションを実行
Future<Void> lookAtFuture = lookAt.async().run();

//実行キャンセルのリクエスト
lookAtFuture.requestCancellation();
```

#見て見てPepper
Pepperに何かを見てもらうにはFrameを使用します。
Frameを取得し、LookAtをビルドしましょう。Frameについては[前回の記事](https://qiita.com/kskrin/items/30de2ddc630f21f120b3)に詳しい記述がありますので、適宜振り返ってください↩️

アクションの実行中、Pepperはターゲットフレームをトラッキングします。
例えばヨカナーンの首[^1]がターゲットフレームである場合、ヨカナーンの首が動くとPepperは自動で向きを変更します。
[^1]: オスカー・ワイルド作の戯曲『サロメ』で、サロメが踊りの褒美に欲したもの。ヨカナーンのことが好きだったらしいです

#MovementPolicyをセットする
LookAtMovementPolicyで、Pepperの頭部のみを動かすのかホイールも動かすのかを設定しましょう。
HEAD_AND_BASEがデフォルトになっていますが、HEAD_ONLYにすることも可能です。
HEAD_ONLYだと頭部だけが特定のFrameに向きますが、HEAD_AND_BASEにするとホイールも動くのでやや懐いてくれた感が伴います🐥
MovementPolicyをHEAD_AND_BASEに設定した場合のサンプルコードは以下の通りです↓

```java
LookAt lookAt = ...;
lookAt.setPolicy(LookAtMovementPolicy.HEAD_AND_BASE);

lookAt.async().run();
```
HEAD_AND_BASEなのにホイールが有効でない場合(=電源フラップが空いている時)は、例外エラーで実行は失敗します。

<img width="200px" alt="lock_nankinjou_kusari.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574697/7d13a868-1c14-9f4d-14ec-c32f0b5ed5bf.png">
~~金縛られPepper…~~
HEAD_ONLYにセットし直してから、もう一度LookAtを実行してください。

LookAtアクションはキャンセルするまで実行を継続するため、使用時はキャンセルのタイミングについても検討が必要です🚨
また、RobotFrameで1m先を見ると俯いてしまいます。これはRobotFrameのZ座標が地表0mのため、1ｍ先の地面を見てしまうためです。Z座標を１.２m程度の位置に変更するか、1k先の地平線を見るように調整しましょう📏

#あとがき
今回も[PepperSDKforAndroid](https://android.aldebaran.com/sdk/doc/pepper-sdk/ch4_api/movement/reference/lookat.html)を参考に書かせていただきました。
さらに詳しい情報は[LookAtのAPIリファレンス](https://android.aldebaran.com/sdk/doc/javadoc/qisdk/com.aldebaran.qi.sdk.object.actuation/-look-at/index.html)を参照してみてください！

次回はトラベルしないタイプのGoToです🌺🎫それでは!
PythonanywhereでFlaskを完全に理解する

# この記事は以下のような人向け

* Pythonがほんの少しだけ読み書きできる
* Flaskなんて見たことも使ったこともない
* SQLAlchemyなんて見たことも使ったこともない
* なんかわからんけどとりあえず動かしてみたい

# Pythonanywhereアカウント作成～Flask導入

[Pythonanywhere](https://www.pythonanywhere.com/)というレンタルサーバ？統合開発環境？が無料が使えます。
日本語版などもちろんありませんが、高校卒業レベルの英語が読めれば十分です。メッセージに従ってボタンを押すだけでFlask導入までやってくれます。
以下の記事で詳しく紹介されています。

https://blog.codecamp.jp/programming-free-server-1

DatabasesからMySQLを使えるようにしておいてください。（PostgreSQLは有料）

# とりあえずflask_app.pyをいじってみる

PythonもFlaskもようわからんので、まずは最初から置いてある `flask_app.py` でDB接続ができるようにしてみます。

```Python:/home/cress/mysite/flask_app.py
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://cress:password@cress.mysql.pythonanywhere-services.com/cress$default?charset=utf8'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class Count(db.Model):
    id = db.Column(db.Integer, primary_key = True)
    count = db.Column(db.Integer, nullable = False)

    def __repr__(self):
        return '<Count %r>' % self.id

@app.route('/')
def hello_world():
    count = Count.query.filter_by(id = 1).first()
    if count is None:
        count = Count(id = 1, count = 1);
        db.session.add(count)
    else:
        count.count = count.count + 1

    db.session.commit()

    return render_template('index.html', count = count)
```

まずは初歩の初歩でアクセスカウンタのようなものを作ってみます。
countテーブルにレコードがあったらカウント+1、なかったらカウント1でレコード生成します。
いずれはMySQLのupsert機能で実現したいですね。

O/Rマッパーは一般的と思われるSQLAlchemyを採用しましたが、まったくわからんので以下のドキュメントを参考にしました。というかほとんどそのまんまです。

https://flask-sqlalchemy.palletsprojects.com/en/2.x/quickstart/

`flask_app.py`に全部書くと肥大化して管理が大変になるのは目に見えていますが、まずは動かすところを目標にします。モジュール分割とかはそのうち。

# テンプレートを作る

`flask_app.py` の `render_template()` で `count` という引数を渡しているので、これをHTML出力できるようにする。

```html:/home/cress/mysite/templates/index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8"/>
        <title>cress.py</title>
    </head>
    <body>
        <h1>cress.py</h1>
        <p>pythonanywhereのテストです。</p>
        <p>あなたは{{count.count}}番目のお客様です。</p>
    </body>
</html>
```

参考にしたのは以下のドキュメント。

https://flask.palletsprojects.com/en/2.0.x/quickstart/

# データベースを初期化する

コンソールから以下のように入力するとテーブルが生成されます。
なお、テーブル削除するときは `db.drop_all()` です。

```python:
from flask_app import db
db.create_all()
```

> ModuleNotFoundError: No module named 'pymysql'

生成されませんでした。
pymysqlが無いと言われます。なのでインストールします。
bash起動してpipコマンドを実行するだけ。

```bash:
pip install pymysql
```

インストールが済んだら、再度 `db.create_all()` を実行します。

# Reloadしてブラウザからアクセス

Web → Reloadボタンを押してアプリケーションを再読み込みします。
これを忘れると反映されません。

![2021-09-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147207/45b7484e-71bc-f977-77d1-b30b4bfc4ca4.png)

とりあえず画面が出ました。

# 課題

アプリケーションを再読み込み後、しばらく経ってからアクセスするとInternal Server Errorになる場合があり、再度アクセスすると解消します。~~そのうち対応します。~~

> Lost connection to MySQL server during query

以下の方法で解決しました。

https://qiita.com/cress_cc/items/7e68e535b405e1bb50a1
git init の後の unrelated histories で詰まった場合の原因と対処法

# 結論

```git init``` した直後に push できない場合は、```--allow-unrelated-histories``` オプションをつけて merge してから push する。

# どういう経緯だったか

## 1. ローカルレポジトリを新しく作った

ローカルレポジトリを新しく作成し、最初の commit を行います。

```bash
$ git init
$ git add .
$ git commit -m 'initial commit'
```

## 2. GitHub 上でリモートレポジトリを作った

ローカルレポジトリと同じ名前のリモートレポジトリを、GitHub 上で新しく作ります。このとき ```.gitignore``` を追加します。

![Screenshot 2021-09-03 11.56.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667942/b5ac5375-c9d2-a835-a537-b323fc2e462d.png)

## 3. エラーが出て push できない

ローカルレポジトリにリモートレポジトリを登録します。

```bash
$ git remote add origin https://github.com/hajime-f/sample.git
```

この後 push したら次のようなエラーが返ってきました。

```bash
$ git push origin master
To https://github.com/hajime-f/sample.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/hajime-f/sample.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

エラーメッセージで言われたとおりに pull したら、今度は次のようなエラーが返ってきて pull できませんでした。

```bash
$ git pull origin master
From https://github.com/hajime-f/sample
 * branch            master     -> FETCH_HEAD
fatal: refusing to merge unrelated histories
```

## 4. ```--allow-unrelated-histories``` オプションで merge したら push できた

```--allow-unrelated-histories``` オプションをつけて merge します。

```bash
$ git merge --allow-unrelated-histories origin/master
Merge made by the 'recursive' strategy.
 .gitignore | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 .gitignore
```

すると、正しく push できました。

```bash
$ git push origin master
...
remote: Resolving deltas: 100% (2170/2170), done.
To https://github.com/hajime-f/sample.git
   f86aa3c..1a66967  master -> master
```

# なにが原因だったか

共通のオリジナル（履歴）から分岐したブランチが存在し、これらが pull によって merge されるのが通常です。

しかし、今回のように ```git init``` した直後では、ローカルとリモートで共通のオリジナルが存在しないので、デフォルトでは merge が機能しません。そのため、pull すると「unrelated histories」とエラーが出てしまいます。

そこで、```--allow-unrelated-histories``` オプションで**「こまけぇこたぁいいんだよ！」**と叱咤すれば merge できます。
AWS IoT CoreをRaspberry Piで使ってみた その1

## 概要
* AWSにはIoT機器と接続、管理するためのAWS IoT Coreというサービスがある
* 公式にもハンズオンがあるが、最小限の手順、構成で動作を確かめてみる  
https://aws-iot-core-for-beginners.workshop.aws/phase2/step2.html
* まずAWS IoT CoreとRaspberry Piを接続してみて、動作を確かめてみる

![aws-iot-core.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/5b2e455f-a8b2-e09b-ba52-9fdeb020073d.png)

## 用意するもの
* Raspberry Pi4 (3でもおそらく大丈夫)
* Raspberry Pi用のケース
* Raspberry Pi用のヒートシンク
* Raspberry Pi4 対応 電源セット(5V 3.0A)
* DHT22 温湿度センサー
* AWSアカウント

## 環境構築
* Raspberry PiのOSをセットアップし、I2Cを有効化する  
https://www.raspberrypi.org/downloads/  
https://www.indoorcorgielec.com/resources/raspberry-pi/raspberry-pi-i2c/


## 組み立て
Raspberry Piと温湿度センサー(DHT22)をI2Cで接続する
![スクリーンショット 2021-09-03 12.46.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/7b55e564-7edb-5a7d-e7ef-56eda460c6db.png)

![IMG_2253.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/11103186-4b82-cff7-fa63-884c688608cd.jpeg)


※Raspberry Piのピン配置は割愛します。

## IoT Coreの操作
* モノをつくる  

AWS IoT Coreの画面より、「管理」→「モノ」を選択する
![スクリーンショット 2021-09-03 6.46.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/f20adb56-bece-ecd4-386e-193b6fab5e22.png)

「モノの作成」をクリックする
![スクリーンショット 2021-09-03 6.49.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/43086c0a-4eee-fa7e-3218-b9cbe04c3f9d.png)

「1つのモノの作成」をクリックする
![スクリーンショット 2021-09-03 6.50.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/ae99ca86-158c-9e4b-9f5f-c010801c8222.png)

「モノの名前」に任意の名前を入れる
![スクリーンショット 2021-09-03 6.50.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/c78f6e0a-af0e-0a99-b96e-81128e307e31.png)

Device Shadowは「シャドウがありません」を選択し、「次へ」をクリックする
![スクリーンショット 2021-09-03 6.53.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/16633888-4afc-4bea-b301-556d21cc86b3.png)

デバイス証明書の画面で、「新しい証明書を自動生成（推奨）」をクリックする
![スクリーンショット 2021-09-03 6.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/10e36961-b0a7-c0cb-962b-280ccc1493b8.png)

証明書をポリシーにアタッチ（オプション）の画面はスキップし、「モノを作成」をクリックする
![スクリーンショット 2021-09-03 6.59.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/540009c4-8f54-2d61-2921-ce0712e1c529.png)

表示されている全ての証明書をダウンロードする
全ての証明書は紛失しないようにご注意ください（同じモノに対して二度目の発行は不可）
![スクリーンショット 2021-09-03 7.01.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/1c129957-2d41-ce2e-3d5c-18e9b65be58f.png)

「完了」ボタンをクリックする
![スクリーンショット 2021-09-03 7.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/054be96c-6151-893f-f41a-e3ebfdde61a3.png)

「モノ」が作成されていることを確認する
![スクリーンショット 2021-09-03 7.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701445/7901949c-c3c1-2d1c-af37-5c0987bd040c.png)

## 次回
* Raspberry Piに証明書をインストール、AWS公式のサンプルコード(Python)を使って、温湿度情報がAWS IoT Coreと連携されることを確認する
elm327の研究 その7

# 概要

elm327を調べてみた。
取得できる、生データを列挙してみた。

|pid|名称|サンプルデータ|
|:--|:--|:--|
|0x03|Fuel system status|txData[0] = 0x03; txData[3] = 0xFA;|
|0x05| Engine coolant temperature|txData[0] = 0x03; txData[3] = 0xFA;
|0x0B| Intake manifold absolute pressure|txData[0] = 0x03; txData[3] = 0x64;
|0x0C| Engine RPM|txData[0] = 0x04; txData[3] = 0x9C; txData[4] = 0x40;
|0x0D| Vehicle speed|txData[0] = 0x03; txData[3] = 0xFA;
|0x0F| Intake air temperature|txData[0] = 0x03; txData[3] = 0xFA;
|0x11| Throttle position|txData[0] = 0x03; txData[3] = 0xFA;

以上。
数理計画（定式化①）

数理計画の参考資料を読んでいると、当然のことながら数式で記載されている。私のようにそこらへんが苦手な人間としては理解するのに苦労してます。
間違っているかもしれませんが、自分の解釈を書いていきたいと思います。
基本的にいろんな文書を見て自分に有益な情報を書いていこうと思います。

#差分合計

##目的関数で差分合計を最小化したい場合の考え方

```math
 min \sum_{i=1}^{n} |x[i] - A[i]|\\
 A[i] : 定数
```
絶対値が入っていると悩みますよね。

この場合、"z[i]"という説明変数を追加します。
"z[i]"は、差分値と考えます。

```math
min \sum_{i=1}^{n} z[i]\\

x[i] - A[i] \geqq -z[i]\\
x[i] - A[i] \leqq z[i]\\
z[i] \geqq 0
```

```
【自己解釈】

0を中心として"-z[i]～z[i]"幅の差分許容範囲が定義されます。
zを最小とするためのx[i]が求められます。

当然、x[i]は他に定義された制約条件を満足した値になります。　
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314982/8333e92d-9b16-7b88-918f-a158d0aec002.png)

赤の破線が０に近くなる、x[i]を求めることになるという事でしょうか。

これは、制約条件にも使用できそうです。

##目的関数で差分合計を最小化したい場合の考え方２
  マイナスを許容しない場合

```math
 min \sum_{i=1}^{n} (if\ x[i] - A[i]≧0\ \ then\ (x[i] - A[i])\ else\ 0)\\\
 A[i] : 定数
```

この場合、"z[i]"という説明変数を追加します。
"z[i]"は、差分値と考えます。
マイナスになる場合、z[i] =0 になることになります。

```math
min \sum_{i=1}^{n} z[i]\\

x[i] - A[i] \leqq z[i]\\
z[i] \geqq 0
```
マークダウン メモ

##アットマークのエスケープ
|項目|説明|備考|
|----|----|----|
|@test|リンク文字||
|<span>@</span>test|リンク文字解除|\<span\>\</span\>で囲む|

##強調
```
**文字**
<b>文字</b>
```
**文字**
<b>文字</b>

##コードブロック


\`\`\`:ファイル名等(スペースは使えない) 
コード
\`\`\`


```:ファイル名等(スペースは使えない) 
コード
```

##テーブル挿入
表内HTMLタグが利用可能

```:例：2行3列のテーブル
|名前|年齢|プロフィール|
|----|----|----|
|<b>鈴木 次郎</b>|<H1>20歳</H1>|趣味は野球<br>好きな食べ物はカレー
```

|名前|年齢|プロフィール|
|----|----|----|
|<b>鈴木 次郎</b>|<H2>20歳</H2>|趣味は野球<br>好きな食べ物はカレー

##引用
```
> 引用
```

> 引用

##箇条書き
```
* 箇条書き
* 箇条書き
```
* 箇条書き
* 箇条書き

https://qiita.com/t_wkm2/items/372fd1c851c4d221b1f3
【Azure】rhel7からrhel8に乗り換えて気付いたこと

・機能面
ディスクについてxfsフォーマットに対応している
時刻同期はntpでは無くchronyになっている
パッケージ管理はyumでは無くdnfになっている
TCPWrapper　が無くなっている
cockpitというサーバ管理用のウェブUIを標準搭載している

・Azureではまったこと
IPアドレスを固定するためにNWを付け替えるとNWアダプターが2つになるが、片方は機能しないため構築初期で1つにすると良い。
外部ストレージとしてNFSをfstabに記載するとOSが起動しない問題が有ったがサーバ起動時の設定を変更する事で対応できた。

例1
ファイル名：/var/lib/cloud/scripts/per-boot/test.sh
概要：サーバ起動時にシェルを実行させてNFSマウントを行う

例2
ファイル名：/etc/cloud/cloud.cfg
概要：mountsをコメントアウトする事でサーバ構築時のinit_modules実行を阻止
GoでS3の署名付きURLを作成

意外と見つけるまで時間がかかってしまったのでメモです。

## 参考

公式ドキュメントです。

https://aws.github.io/aws-sdk-go-v2/docs/code-examples/s3/generatepresignedurl/

https://aws.github.io/aws-sdk-go-v2/docs/configuring-sdk/

## 前提

- AWSの認証情報が環境変数として登録されている

```
export AWS_ACCESS_KEY_ID=yyyyy
export AWS_REGION=ap-northeast-1
export AWS_SECRET_ACCESS_KEY=xxxxxx
```

## コード

```main.go
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX - License - Identifier: Apache - 2.0
package main

import (
	"context"
	"flag"
	"fmt"

	v4 "github.com/aws/aws-sdk-go-v2/aws/signer/v4"
	"github.com/aws/aws-sdk-go-v2/config"
	"github.com/aws/aws-sdk-go-v2/service/s3"
)

// S3PresignGetObjectAPI defines the interface for the PresignGetObject function.
// We use this interface to test the function using a mocked service.
type S3PresignGetObjectAPI interface {
	PresignGetObject(
		ctx context.Context,
		params *s3.GetObjectInput,
		optFns ...func(*s3.PresignOptions)) (*v4.PresignedHTTPRequest, error)
}

// GetPresignedURL retrieves a presigned URL for an Amazon S3 bucket object.
// Inputs:
//     c is the context of the method call, which includes the AWS Region.
//     api is the interface that defines the method call.
//     input defines the input arguments to the service call.
// Output:
//     If successful, the presigned URL for the object and nil.
//     Otherwise, nil and an error from the call to PresignGetObject.
func GetPresignedURL(c context.Context, api S3PresignGetObjectAPI, input *s3.GetObjectInput) (*v4.PresignedHTTPRequest, error) {
	return api.PresignGetObject(c, input)
}

func main() {
	bucket := flag.String("b", "", "The bucket")
	key := flag.String("k", "", "The object key")

	flag.Parse()

	if *bucket == "" || *key == "" {
		fmt.Println("You must supply a bucket name (-b BUCKET) and object key (-k KEY)")
		return
	}

	cfg, err := config.LoadDefaultConfig(context.TODO())
	if err != nil {
		panic("configuration error, " + err.Error())
	}

	client := s3.NewFromConfig(cfg)

	input := &s3.GetObjectInput{
		Bucket: bucket,
		Key:    key,
	}

	psClient := s3.NewPresignClient(client)

	resp, err := GetPresignedURL(context.TODO(), psClient, input)
	if err != nil {
		fmt.Println("Got an error retrieving pre-signed object:")
		fmt.Println(err)
		return
	}

	fmt.Println("The URL: ")
	fmt.Println(resp.URL)
}

```

## コマンド

```
go run presigned/main.go -b my-bucket -k photo.png
The URL:
https://xxxx.s3.ap-northeast-1.amazonaws.com/photo.png?X-Amz-Algorithm=......
```
Chart.js で基準線(横線)を実装するときにハマったこと

`chart.js` がバージョン2.9.3、`chartjs-plugin-annotation` バージョン0.5.7 の組み合わせじゃないとだめ。
それぞれ、バージョン指定せずインストールすると、v3系とv1系が入る。
また、バージョン指定箇所に`^` を入れて `"chart.js": "^2.9.3",`と書くと`2.9.4` がインストールされてしまうので注意。
(↑に気づかず、結構な時間を溶かした....)

```json:package.json

"chart.js": "2.9.3",
"chartjs-plugin-annotation": "^0.5.7",

```
Python で csv に上書きする方法

# はじめに
Python で既存の csv ファイルに新しい結果を書き込みたいので、その方法について調査した。備忘録を兼ねて記事にしておく。

# データ準備
まず、簡単なcsvを用意する。以下に名前、年齢、性別が含まれているtest.csv を用意した。

```python
import pandas as pd

df_read = pd.read_csv("./test.csv")
print(df_read)
```

```
   NAME  AGE   SEX
0  Taro   33  Male
```

また、上書きする予定のデータフレームを用意する。二人分のデータを用意する。

```python
add = np.array([["Jiro", "27", "Male"], ["Hanako", "21", "Female"]]).reshape(2, 3)
df_add = pd.DataFrame(add, columns=["NAME", "AGE", "SEX"])
print(df_add)
```

```
     NAME AGE     SEX
0    Jiro  27    Male
1  Hanako  21  Female
```

このtest.csvにdf_add のデータを直接上書きしたい。

# `csv`モジュールを用いた上書きの方法
`csv`モジュールの`csv.writer`, `writerow`を用いて実装する。

```python
import csv

with open('./test.csv', 'a') as f:
    writer = csv.writer(f, lineterminator='\n')
    for ary in df_add.values:
        writer.writerow(ary)
```

実行結果の確認を行うと、

```python
df_read = pd.read_csv("./test.csv")
print(df_read)
```

```
     NAME  AGE     SEX
0    Taro   33    Male
1    Jiro   27    Male
2  Hanako   21  Female
```

追記されているのが確認できた。

# `to_csv`コマンドを用いた上書きの方法
書き出したいのがデータフレームの場合、`to_csv` コマンドでも追記することができる。

```python
df_add.to_csv('./test.csv', mode='a', header=False)
```

実行結果の確認を行うと、

```python
df_read = pd.read_csv("./test.csv")
print(df_read)
```

```
     NAME  AGE     SEX
0    Taro   33    Male
1    Jiro   27    Male
2  Hanako   21  Female
3    Jiro   27    Male
4  Hanako   21  Female
```

再度二人分追記されているのが分かる。


# おわりに
Python を実装する機会が増えてきたので、自分自身で調べたことはこうして記事に残していきたいと思う。
chatterの最近の稼働による並び替えとは？


英語では　Most Recent Activity　ですが、何でしょうねぇ。まぁ切り替えてもほとんど最近の投稿順とは変わらない。
ということで、全く無視（使わない）していました。

質問があって調べたのですが、よく分からん。
しかし、いい答えを得ました。

How I've explained it is that "latest post" is when the post was created vs. "most recent activity" is what was replied on a chatter post.

「最新の投稿」は投稿が作成されたときであるのに対し、「最近の稼働」はチャターの投稿に返信されたものであると説明しました。

へぇ、ってな感じ。
まぁ、よく分からないけど気にしないでそのままなことはSalesforceに限らず多いです。
考えても考えなくても実害がない。

https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000BroJiSAJ
GASでシフトを皆のカレンダーに一括登録：第2回(第1回で作成した表からイベント登録)

#前回の記事
https://qiita.com/meinai929/items/be1dff3cfff54740a0bf

今回はいよいよ↑の記事で作成した表を読み込んで、カレンダーにイベント登録していきたいと思います！

#シフト読み込み用の表
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650007/c0c18abc-089b-b52f-b098-465e8a7ba9fc.png)


#今回作成した関数

#関数1:eventCreate()
実行結果。塊でイベント登録しなおすため、関数2を実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650007/5720ffc6-ce0f-2062-d55b-9123ff3df5aa.png)
###コード

```js
function eventCreate(){

//シートの項目を以下変数定義
  var sht, i, eventday, eventname, endEventday,name;
  var mailList;

  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  sht = spreadsheet.getSheetByName("readSheet");
  var Cal =CalendarApp.getCalendarById('メールアドレス');


  for(j =1; j<= sht.getLastColumn(); j+=4) {
    for(i=2; i<=sht.getLastRow();i++){
    //i行2列目の値(イベント日)をeventdayへ格納
      eventday = new Date(sht.getRange(i,j).getValue());

      endEventday =new Date(sht.getRange(i,j+1).getValue());
      mailList = sht.getRange(i,j+2).getValue();
      name = "監視シフト1";
      eventname = sht.getRange(i,j+3).getValue();
      var option1 ={
      guests:mailList,
      description:name
      }
//指定のカレンダーへインベント登録
      Cal.createEvent(eventname,
      eventday,
      endEventday,
      option1

     )
    }　　　
  }　　　　　　　
}
```

#関数2:uniteEvents()&beforeEventDelete()
実行結果。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650007/ec43c2f6-3549-995f-f68f-3211360d7ac7.png)
###コード

```js
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1");
function uniteEvents(){
  
  var name = ["Aさん","Bさん","Cさん","Dさん","Eさん","Fさん"];
  var option2 ={
    description:"監視シフト2"
  }
  for(i=3;i<= sheet.getLastColumn(); i++){
    for(n in name){
      var options ={
        search:name[n]
      }
      var events = Cal.getEventsForDay(new Date(sheet.getRange(5,i).getValue()),options);
      if(events.length != 0){
        Cal.createEvent(name[n],events[0].getStartTime(),events[events.length-1].getEndTime(),option2)
      }  
    }
  }
  beforeEventDelete();
}

function beforeEventDelete(){
  var option1={
    search:"監視シフト1"
  }
  for(i=3;i<= sheet.getLastColumn(); i++){
    var beforeEvent = Cal.getEventsForDay(new Date(sheet.getRange(5,i).getValue()),option1);
    for(j in beforeEvent){
      beforeEvent[j].deleteEvent();
    } 
  }  
}

```

#関数3:deleteCalendarEvents()
塊で入れたシフトのイベントのみ消去。
###コード

```js
function deleteCalendarEvents(){
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("readSheet");
  var options ={
    search:"監視シフト2"
  }
  for(i=1;i<= sheet.getLastColumn(); i+=4){
    var events = Cal.getEventsForDay(new Date(sheet.getRange(2,i).getValue()),options);
    for(j in events){
      events[j].deleteEvent();
    }
  } 
}
```

#まとめ
細かい書き方の追記などもしていきたいと思います。
ご指摘などありましたらお願いいたします。
Promiseのresolve()を他の場所で呼び出してawaitでの待ちのを終了する


# 確認した環境

- Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)
- 今回、試した記述方法が、あらゆる環境で動作するかは把握できていない

# 内容

- Promiseのresolve()は、「Promiseクラスのコンストラクタの第1引数に渡す関数内」でしか呼び出してはいけないと思っていたが、
- resolve()を参照する変数を別のスコープに用意して、呼び出しても期待通りに動作した
- Pormiseオブジェクトを返却する関数を用意しないといけないとも勘違いしていた


```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise</title>
</head>
<body>
<div id="button" style="width:200px; background-color:darkgrey; border: 1px solid black;">Click me!<div>
</body>
<script>
    (async () => {
        let clicked;
        const waitingForYourClick = new Promise(resolve => clicked = resolve);
        const button = document.querySelector("#button");
        button.addEventListener("click", clicked);
        console.log("Waiting");
        await waitingForYourClick;
        console.log("Done");
        button.removeEventListener("click", clicked);
        button.innerHTML = "Clicked!";
    })();
</script>
</html>
```

![await.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083912/142482df-9519-c5fc-c1e7-05c971a70cbf.gif)

# 感想

- async/awaitが好きすぎて、Promiseは書きたくないと思っていたけど、Promiseも好きになれた
ffmpeg-pythonで置き換えの質問をしない

ffmpeg-pythonでメディアを変換するとき、

```console
File 'C:\Users\・・・\test.mp4' already exists. Overwrite? [y/N]
```
このように置き換えるか聞かれることがある。これをなくすには、

```Python
ffmpeg.run(stream, overwrite_output=True)
```
`overwrite_output=True`とする
aabをUSB経由で実機にインストールする方法

adbでapkをインストールするように、開発中のアプリのaabをインストールする方法を紹介します。

基本的には[公式ドキュメント](https://developer.android.com/studio/command-line/bundletool)のとおりです。

# 手順
* 以下からbundletoolをダウンロードし、/tmp/以下に保存します。  
  https://github.com/google/bundletool/releases
* 以下のコマンドでaabを複数のapkに分解します  

```
java -jar /tmp/bundletool-all-1.8.0.jar build-apks --bundle=release.aab --output=/tmp/signed.apks \
--ks={キーストアへのフルパス} \
--ks-key-alias={keyAliasで指定する値} \
--ks-pass='pass:{storePasswordで指定する値}' \
--key-pass='pass:{keyPasswordで指定する値}'
```

* 以下のコマンドでUSB接続されているデバイスに適したapkをインストールします  

```
java -jar /tmp/bundletool-all-1.8.0.jar install-apks --apks=/tmp/signed.apks
```

# まとめ
1コマンドで簡単にできると嬉しいなぁという印象です。スクリプト作るかなぁ。。
Redux入門[一週間前までRedux未経験だった僕が最低限学んだReact + Redux]

こんにちは　take-2405です。

今回はReact+Reduxの入門者向けに記事を書きたいと思います。
とは言いつつも、僕自身１週間ほど前まではReactは触ったことはあったものの、Reduxについては全くの初心者でした。

そんな僕が、Reduxを書かざるを得ない状況で、１週間で基本的な概念の理解～与えられたタスク（昨日の実装）まで行った際の経験について書き残したいと思います。

#### 注意
- この記事ではRedux-toolkitを使用する方を対象としています
- 理解が不十分で誤った知識を記載している場合があります（その際はご指摘ください）

## 目次
1. Redux toolkitとは. 
2. Redux(Redux toolkit)の基本的な概念(知識)の理解. 
3. 実際にコードを書く. 
4. 参考にさせていただいた記事.  
(1,2の手順が逆だと感じる方もいるかもしれませんが、今回はこの順番です。)

---

## 1. Redux toolkitとは
素のReduxを使う際に、簡単に・効率良く開発を行うためのツール
ReduxのチュートリアルをしてからRedux toolkitのチュートリアルを行うといかに簡略化してReduxを使用できるか実感できると思います。

## 2. Redux(Redux toolkit)の基本的な概念(知識)の理解
開発するために僕が最低限必要だと感じた概念のみを記載します。

- State
アプリケーション内の状態管理(変数の値の保持)を行うオブジェクト
MVCでいうところのModelなどに相当する

- Action
State(アプリケーション内の状態)を変更するためのオブジェクト
 
- Action Creater
アクションを生成するための関数
パラメーターを受け取り、Actionを生成し返す

- Reducer
現在の状態(State)とActionを引数にとり、更新された状態を返す

- Store
Status/Action/Reducerを結びつけるオブジェクト

- Selector
StoreからStateを引き出すための関数
Selectorを使わないとStateを参照したりReducerに渡したりできない

- Slice
 個別のストア(ストア全体の一部分のストア)
![Slice.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416512/238c758c-1db3-e3a2-c0ab-a216c297ce70.png)


## 3. 実際にコードを書く
実際にコードを書く際の順序についてです。(僕流の)
まずReduxの状態管理の流れを図で見てください。
![flux.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416512/25e81950-bf73-8b1f-fd36-f72cd0c4ff52.png)


上記の図と各用語の概念をなんとなく頭に入れたらいよいよコードを書いてみましょう。
以下の順序でコードを書くと個人的に書きやすいと感じました。

１. コンポーネント(UI)を作成する
２. Storeを作成する        
２-１. コンポーネント(UI)や必要な機能のロジックを踏まえてStateを作成
２-２. Stateをコンポーネント(UI)で利用可能にするためのSelectorを作成
２-３. Stateを更新するためにSliceを作成. 
(Stateの初期値を定義、想定するアクションとそれに伴うStateの変更を定義する)

３. コンポーネント(UI)とState、Dispatchを結びつける. 
（コンポーネントのソースコード内でSelectorを使用しStateを利用可能にする。ユーザーのアクションを検知し、Dispatchが発火するようDispatchを記述する）

実際のコード(State、Dispatch、Sliceの書き方など)は４の「参考にさせていただいた記事」を見てみてください。

## 4. 参考にさせていただいた記事
https://www.hypertextcandy.com/learn-react-redux-with-hooks-and-redux-starter-kit

https://redux-toolkit.js.org/
python３ 例外処理　（記録）

```python
class MyExcepiton(Exception):
  pass

def div(a,b):
  try:
    if (b < 0):
      raise MyExcepiton("not minus")
    print(a/b)
  except ZeroDivisionError:
    print("not by zero!")
  except MyExcepiton as e:
    print(e)
  else:
    print("no exception!")
  finally:
    print("計算が終了しました")
div(10,-2)
```

https://uxmilk.jp/39845
PythonのFFmpegで、ログを表示させない。

`ffmpeg-python`で、

```python
stream = ffmpeg.input(input_path)
stream = ffmpeg.output(stream, output_path)
ffmpeg.run(stream, quiet=True) # ここ
```
`quiet=True`をつけるとログがコンソールに表示されない。
https://pypi.org/project/ffmpeg-python/
https://kkroening.github.io/ffmpeg-python/
サウンド設定の直し方

メモ。
音声通話は
１．（PCによる）出力を受け付けるデバイス
２．（ユーザーが）入力を受け付けるデバイス
この２つに分かれる。

・相手の声が聞こえない→１が原因
・自分の声が入らない→２が原因　　となる。

たとえばイヤホンをつけた際、２のデバイスが入力装置を『ヘッドフォン／マイク』と認識した場合、
いくらPC本体に話しかけたところでPCは入力を受け付けなくなる。

デバイスマネージャーでアンインストールし、再起動すると自動的に再インストールしてくれるので、
それで解決することが多い。
59日後にITパスポートを受けるFラン私大文系既卒(37日目)

# 非機能要件
* 非機能要件とは?
 * システムに必要な性能
 * 応答時間やセキュリティ性など

# 回帰テスト
* 回帰テストとは?
 * システムに修正や機能追加をした際に、新たながバグがないか確認するテスト

# EUC(End User Computing)
* EUCとは?
 * システムの利用する部門が主体的にシステム開発や運用に関わること

# RAD(Rapid Application Development)
* RADとは?
 * 少人数でプロトタイピングを繰り返し、短い期間で開発すること

# スクラム
* スクラムとは?
 * アジャイル開発の1つ
 * 開発チームを一致団結させるにはどうしたら良いかに着目したソフトウェア開発手法
UnityでFBXキャラクタを操作する簡単な方法2021.09

#概要
　Unityちゃん以外の適当なキャラクタを使って、走るなどのシンプルな操作する手順を説明します。2021.09時点で使える方法です。

#使用環境
Unity2019.4.17
Starter Assets - Third Person Character Controller①
Adobe Mixamo（要アカウント）
※Unity2020.3が必須環境のようですが、動きました。

#参考サイト
https://tat1kun.hatenablog.com/entry/TPSController
https://www.youtube.com/watch?v=4QuPlKzdq14

#手順
▼キャラクタデータの作成（オンライン）
Adobeアカウントを使用してmixamoで上部のCharactersタブを選択し、好みのキャラクターを選ぶ。
右上のDownloadボタンで、FBX for Unity、T-Poseでダウンロード。
（Mixamoでは骨の入っていないモデルをUploadし、骨を入れる機能もある）

▼Unityの設定
①のアセットをストアからインストールする（ブラウザからでも可）
このアセットは2021.6に登場したようでまだ新しいv1.0.0。
StarterAssets>ThirdPersonController>Prefabs>PlayerArmatureをシーンにD&D。
Hierarchyウィンドウから、PlayerArmature>Geometryを選択し、Inspectorウィンドウの一番上のチェックを外す（デフォルトのキャラを非表示にする）

FBXファイルをアセットにD&Dし、読み込む。
読み込んだAssets内のFBXを選択し、InspectorウィンドウのRigタブのAnimation TypeをHumanoidに変更する。その下のApplyを押す。

そのFBXをHierarchyウィンドウに一旦配置する。そして、PlayerAmatureの下（子）に配置する。

HierarchyウィンドウのPlayerAmatureを選択し、Inspectorウィンドウ内のAvatarの右の◎ボタンを押す。すると、小さなウィンドウが開くので、FBXデータの方を選択する。

これで、WASDで動くようになり、ジャンプもできる。

#スケルトンだけのFBXを再生する
　ここまでで、mixamoを利用して、任意のモデルで走ったり、ジャンプさせることができるようになった。では、任意のアニメーションをさせたい場合は、どうするか。ここでは、BVHなどのモーションデータをキャラクタに反映させる手順を説明する。

まず、BVHのデータをFBXに変換し、骨だけのモーションデータを用意する。（変換する必要はないかもしれないが、ここではFBXに統一した。）どっかで拾ってくるか、モーキャプデータを使う。

モーションのFBXをAssetsにD&Dし、同様にInspectorウィンドウのRigタブのAnimation TypeをHumanoidに変更し、その下のApplyを押す。これで、ポリゴンモデルとモーションが人型として認識され、対応付けできるようになる。（もしかしたら骨の名前が変だと、骨の名前解決で失敗する可能性がある）

AssetsのFBXモーションの中にある三角のアイコンを見つける。
UnityのWindowからAnimatorウィンドウを表示させ、PlayerArmatureのアニメーションの遷移図を表示する。
先の三角アイコンを遷移図にD&Dする。追加された長方形を右クリックし、set as default stateにして、実行すれば、とりあえず、キャラクタがアニメーションするのを確認できる。

#備考
以下の古い情報はいろいろ使えなくなってた。
※Adobe Fuseはサービス終了
※Mecanim Locomotion Starter Kitはもうない
※Standard Assets(for Unity 2018)はエラーが出る
※Mecanim Animation Starter Pack？
ジェネリクスを使った関数で戻り値の型だけを指定する方法

# やりたいこと
- ↓みたいなようにジェネリクスを使った関数で戻り値の型だけを指定したかった。

```image.swift
func puipui<T>() -> T {
  return T型の値を返す処理
}
```

- 具体的な用途としては
  - ↓のような汎用的なAPIクライアントを作り、decodeまでをAPIクライアントに任せたかった。
  - そのためには使う側でレスポンスの型(decodeする型)を指定する必要があった。

```apiClient.swift
func resumePublisher<T: Codable>(path: String, method: HTTPMethod, params: [String: Any]) -> AnyPublisher<T, Error>{
  var request = URLRequest(url: 受け取ったpathやparamsを元に作ったURL)
  return URLSession.shared
     .dataTaskPublisher(for: request)
     .map({ $0.data })
     .decode(type: T.self, decoder: JSONDecoder())
     .eraseToAnyPublisher()
}
```

# 問題
- ジェネリクスを使った関数は、使うときに明示的に型を指定することはできない
- ↓のような使い型はできない

```bad.swift
func puipui<T>() -> T {
  return T型の値を返す処理
}

let mol = puipui<Int>()
>>これはエラーで怒られる
```

- 普通はジェネリクス型で指定した引数を受け取って、そこで暗黙的に型を判別している

```ok.swift
func puipui<T>(mol: T) -> T {
  return T型の値を返す処理
}

let car = puipui(car: 123)
>>puipuiはInt型を返すと判別される
```

# ジェネリクス型の引数を受け取らない場合の解決方法1
- 使う時に戻り値を受け取る変数の型を明示する。

```solution.swift
func puipui<T>() -> T {
  return T型の値を返す処理
}

let mol: Int = puipui()
>>puipuiは無事Int型を返すと判別される
```

# 2021/09/04追記：ジェネリクス型の引数を受け取らない場合の解決方法2
- ジェネリクス型のメタタイプを受け取る引数を持たせる
- こっちのほうがこなれ感があるのでおすすめかもしれない。

```solution.swift
func puipui<T>(type: T.Type) -> T {
  //　処理中で引数typeは利用しなくてよい
  return T型の値を返す処理
}

let mol = puipui(type: Int.self)
>>puipuiは無事Int型を返すと判別される
```


# あとがき
- 戻り値だけをジェネリクスで指定する方法が調べてもなかなか出てこなかった。
- 常識すぎて記事にもされないのか、あるいは戻り値だけ指定することが一般的ではないのかもしれないと思った。
- たとえば今回やりたかったことでも、decodeはAPIクライアントを利用する側で行えばジェネリクスを使わなくてもよいし、もしかしたらそっちのほうが正解なのかもしれない。
  - (でも、毎回decode処理書きたくないじゃん)

Twitterもやってるので、よければフォローお願いします。
→https://twitter.com/ObataGenta
seabornのload_datasetを認証付きproxy環境下で読み込む場合

## はじめに
seabornには、機械学習や統計分析で有名なサンプルデータを簡単にロードするスクリプトが用意されていますが、proxy環境下ではうまく動かず、いちいちgithub等からダウンロードして手動で読み込ませなければならない場合があり、その時点で挫折してしまいそうになります。
もっと簡単にproxyを突破してダウンロードできるようにならないかと思い調べましたが、簡単に見つからなかったので自分のメモとして記載します。（こんなのにこまるようなヤツは自分しかいないから情報を見つけられなかっただけかもしれませんが…


## 解決方法
以下を冒頭に入れるだけです

```py
import urllib.request
proxy = urllib.request.ProxyHandler(
    {'http': "http://<USERNAME>:<PASSWORD>@<HOSTNAME>:<PORT>",
    'https': "http://<USERNAME>:<PASSWORD>@<HOSTNAME>:<PORT>"})
opener = urllib.request.build_opener(proxy, urllib.request.HTTPHandler)
urllib.request.install_opener(opener)
```

あとは以下でロードができます

```py
import numpy as np
import pandas as pd
import seaborn as sns

x = np.random.normal(size=100) #ランダムデータをnumpy arrayとして作る

titanic = sns.load_dataset("titanic") ##kaggleで有名な、タイタニック号の生死者データ
tips = sns.load_dataset("tips")  ## お店の食事時間と会計総額とチップの関係のデータ
iris = sns.load_dataset("iris")  ## Rでお馴染みのアヤメの統計データ
```

##まとめ
seabornのload_dataset以外にも、よそからデータを引っ張ってこれるスクリプトを用意しているライブラリは多くあるので、これでもっと楽に読み込めるようになるのかも。。
Flutter開発環境をWindows10に構築

Windows10でAndroid向けにFlutterでアプリを作成できる環境を構築しました。

基本的に

https://qiita.com/smiler5617/items/fbfee798b641f0352176

こちらの記事を参考にさせて頂きましたがいくつか補足を。

## 追加でやったこと

### java8のインストール

JREが入っていなかったのでインストールしました。
java8必須のようです、バージョン指定なので注意が必要です。
PATHを通すのを忘れずに。
JDKは今のところ必要なさそうです。

### Android Studioの設定

自分の場合Android studioをインストールしただけでは
`$ flutter doctor`
でAndroid studioがインストールされていないというエラーになりました。
結果的に
`$ flutter config --android-studio-dir="Android studioをインストールしたパス"`
をやることで解決しましたがやらなくても良い場合もあるらしいです。

参考にさせて頂いたページ

https://qiita.com/sprout2000/items/508bc8a68756b3658bec
【AWS】HPを作って運用してみたら月額181円だった

#はじめに
友人の個人事業主のHPをAWSで作成しました。
EC2でWEBサーバを立てるより、S3で静的ウェブサイトをホスティングした方が安く済むとのことですが、実際いくらかかるのかも検証しました。

#前提
1.ドメインをAWSのRoute53で取得することとします。
2.HTTPのGETリクエストは月1500程度(実績)とします。
3.無料枠期間中の話です。(初年度)

#運用費
Route53でドメインを取得するのに[単位は＄]
・毎年12.0＋税金1.25
・毎月0.5+税金0.05がかかります。

もしドメインを取得しないと以下のようなURLとなります。
http://abc.s3-website-ap-northeast-1.amazonaws.com

これをドメイン取得すると
http://abc.com

のようにできます。なお、ドメイン取得には3日程度かかります。


#請求画面

13.75$は年間最初の月だけかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966337/c9824387-86ac-c410-b426-312bb7e4e9d8.png)

翌月からは0.55$となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966337/2b342ac5-feea-e669-aa8e-aea1068cf708.png)

#結論
よって、結論としては[単位は＄]
13.75 +（0.55×11か月）=19.8

日本円で年間2,178円(1$=110円)となります。
月間だとだいたい181円/月となりますね。

レンタルサーバーを借りてHP運用されている方のコスト削減に寄与できればと思います。
【AWS】AWSを勉強していく中で「？」ってなった単語をまとめていく①

#はじめに
昨日からAWSを勉強し始めました。わからない単語のオンパレードだったので、ここにメモしていこうと思います。まだ中途半端な状態なので、どんどん更新していきます。

#対象者

* AWSを学んでいる方

#目的

* AWSを学んでいく中で、わからなかった単語を理解した上で使用する

#AWS勉強中に出てきた用語

##AWS

* Amazon Web Services
* クラウドコンピューティングを使ったサービス
* クラウドコンピューティングとは、インターネットを介してサーバー・ストレージ・データベース・ソフトウェアといったコンピューターを使った様々なサービスを利用すること

[ AWSとは? わかりやすく解説 | SKYARCHのITあんちょこ ](https://www.skyarch.net/column/whataws01/)

##EC2

* Amazon Elastic Compute Cloud
* AWS上に仮想サーバーを構築して自由に利用できる
* 仮想サーバーではLinuxやWindowsといった標準的なOSが利用可能で、自動的にサーバーの構築とインストールが行われる

https://www.wafcharm.com/blog/ec2-for-beginners/

##EIP

* Elastic IPアドレスは、EC2インスタンスにパブリックIPアドレスを付与するサービスです。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html

##AMI

* EC2インスタンスの構成を取得し、テンプレートを作成するサービス
* AMIを用いることで、EC2インスタンスディスク内の全内容（たとえば、OSやミドルウェア、アプリケーションなど）をバックアップできます。


https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-instances-and-amis.html


##RDS

* Relational Database Service
* AWSが提供するクラウド型のデータベースサービス
* データベース管理システムは、それ自体がソフトウェアですので、EC2サーバーにインストールすればデータベースサーバーを構築できます。


https://aws.amazon.com/jp/rds/



##パブリッククラウド

* 不特定多数のユーザーに対してリソースを提供するクラウドコンピューティング
* AWSもその一つ
* [オンプレミスとは？](https://www.ntt.com/bizon/glossary/j-a/on-premises.html)

##VPC

* VPCは「Virtual Private Cloud」の略
* 物理的な環境（リージョン）上に構築する仮想ネットワーク


https://www.sbbit.jp/article/cont1/51188

###CIDR(サイダー)

* 「Classless Inter-Domain Routing」の略で、ネットワークを構成する際に必要なIPアドレスの範囲を決める方法

###サブネット

* VPCのIPアドレス範囲の中で、さらに小さな仮想ネットワークを作成するAWSのサービス
* データベースやウェブサーバー、社内向けシステムなどの用途に合わせて、必要な仮想ネットワークを作成する
* ネットワークをサブネット化しないと余計な通信が発生してしまう

http://www.runsurunet.com/2017/01/20/%E3%82%B5%E3%83%96%E3%83%8D%E3%83%83%E3%83%88%E5%8C%96%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88/#i

###ルートテーブル

* サブネット内のAWSリソース（EC2インスタンスなど）がどこに通信しにいくのか、そのルールを定める

###インターネットゲートウェイ

* EC2インスタンスなどのAWSリソースとインターネット間で通信できるようにする
* 主な役割
    * ルートテーブルにインターネットへのルートを追加
    * EC2インスタンスのプライベートIPアドレスをパブリックIPアドレスに変換


####投稿者コメント
AWSに入って環境面の勉強をはじめました。わからない単語だらけですが、一個一個積み上げて、まずは雰囲気から掴んでいきたいと思います。

####My Profile
プログラミング学習歴４ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。
AWS WEBサーバー用の起動からPHPファイルの表示まで


#AWS EC2インスタンス基本構成
アプリケーションデプロイ用の基本構成のEC2インスタンス起動方法とPHPファイルの表示を簡単なことですが一応まとめます。

パブリックサブネットにWEBサーバー用のEC2と
プライベートサブネットDBサーバー用のEC2を構築していきます。

##事前準備
###VPC
デフォルトのものではないVPCを用意（何用かわかりやすい名前を付ける）

###サブネット
上記のVPCにパブリック1aを用意
（冗長構成用にパブリック1cがあってもなくても）

##WEBサーバー用のインスタンス起動設定
###インスタンスタイプの選択
無料利用枠のt2.micro

###インスタンスの詳細設定
ネットワーク：事前に用意したデフォルトのものではないVPC
サブネット：パブリックサブネット1a
自動割り当てパブリックIP：有効

###タグの追加
キー：Name
値：アプリ名-webserver-1a

###セキュリティグループの設定
セキュリティグループの割り当て：新しいセキュリティグループを作成する
セキュリティグループ名:[アプリ名]-webserver-sg
説明：[アプリ名]-webserver-sg
ルールの追加：HTTP 0.0.0.0/0　　HTTPS 0.0.0.0/0

##WEBサーバーのインストール

###インスタンスにSSHで接続する

*WindowsはTeraTermなどを起動
*つなげたいインスタンスのパブリックIPv4アドレスをコピー
*ホスト(T)：[インスタンスのIPv4アドレス]
*ユーザー名：ec2-usr
*RSA/DSA/ECDSA/ED25519鍵を使う
*インスタンスを起動したときにダウンロードしたキーペアを選択

###LAMPをインストール
公式チュートリアルのこのページをすすめる
[チュートリアル: Amazon Linux 2 に LAMP ウェブサーバーをインストールする](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html)

続いてDBサーバー用のEC2の起動。
[DBサーバー用のEC2の起動からMySQLのインストール](https://qiita.com/ebtiag/items/4449825d2542bc961259)


####補足Appacheだけをインストールする場合
```sudo su
yum update -y
yum install httpd -y```

*WEBページの表示してみる
ディレクトリ移動
```cd /var/www/html```
htmlファイル作成
```vi index.html```
適当に入力後保存

Apache起動
```systemctl start httpd```
インスタンスが起動されるとApacheも起動させるようにする
```systemctl enable httpd```

WEBブラウザでインスタンスのパブリック IPv4 アドレスを表示
index.htmlの内容が表示されることを確認する
winter22アップデートでの問題のまとめ

Sandoboxのバージョンが上がってから、色々と関連する質問が増えてきたように思います(2021/09/03時点）

# Mass Action Scheduler

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/6ac04ef3-d1c7-3e27-787f-cda0dd270c06.png)


以下のリンクの「一括アクション設定の取得エラー：iframeへの接続を確立しようとするとタイムアウトしました」の手順に従いました 。VisualforceドメインをCORSメニューに追加することは私にとってはうまくいきました。   

[I'm noticing a problem with our sandboxes that are now up to Winter '22. Production is ok. We are running version 2.4. When I click into any of the configurations, I get these error popups. Has anyone else seen this?](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000CfUVk)
Linux ユーザー 確認

##Linuxユーザー確認
###ログインユーザー
```
who
```

###特定ユーザーの詳細
```
cat /etc/passwd |grep tomcat
```
tomcat:x :1002:1002::/opt/tomcat:/bin/false

|ユーザー名|パスワード（x表示）|ユーザーID|グループID|任意コメント|ホームディレクトリ|シェルの場所|
|----|----|----|----|----|----|----|----|----|----|----|----|----|
|tomcat|x|1002|1002||/opt/tomcat|/bin/false|


###ユーザー 詳細一覧
```
cat /etc/passwd
```

###ユーザー名 一覧
```
cut -d: -f1 /etc/passwd
```
###cutコマンド

|オプション|略|備考|
|----|----|----|
|-d|--delimiter|項目名を区切る際に、区切り文字を使用。-fオプションと組み合わせて使用する。|
|-f|--fields|必要な項目を項目数で指定する|

参考
https://eng-entrance.com/linux-command-cut

参考
https://www.sejuku.net/blog/54497
【超基本】文字コードについてざっくり理解

#はじめに#
　はじめにHTMLを学習する際に、headのmetaタグに*charset="utf-8"*なんて書いてあるのを見ると思います。最初は「なんだこれ？」と思いながらも、定型文的にとりあえず書いとく、という方も多いのではないでしょうか。
　今回は文字コードについて何も知らない方、なんとなくしか分からない方向け（＋自分の備忘録）に文字コードとは何かについてざっくりとまとめていきたいと思います。


#文字コードとは#
```head.html
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
```

　VSコードで！と打つとこんなものが出てきます。HTMLを書き始める際にまず最初に書く部分になります。今回はこの中の\<meta charset="UTF-8">というものに注目していきます。これは**文字コード**を指定しています。
　それでは、文字コードとは一体何なのでしょうか。

>文字コード（もじコード）は、コンピュータ上で文字（キャラクタ）を利用する目的で各文字に割り当てられるバイト表現。もしくは、バイト表現と文字の対応関係（文字コード体系）のことを指して「文字コード」と呼ぶことも多い。

↑(Wikipediaより引用)

　ご存知の通りコンピュータは0か1しか認識できないため、「あいうえお」と入力してもコンピュータには理解出来ません。そこで、「あいうえお」という文字を番号に変換し、さらにコンピュータが認識できる0と1(2進数)で表現ができるように作られた対応表があります。それが文字コードと呼ばれているものです。上記のように文字コードを指定していないと、番号との対応がズレて文字化けしてしまいます。
　

#文字コードの種類#
　文字コードにはいくつか種類がありますので代表的なものをご紹介していきます。

##ASCII##
　最も標準的な文字コードです。数字やアルファベットなどが1バイトで表現されます。1963年にアメリカで作られました。

##Shift-JIS##
　ASCIIコードの文字に日本語を追加した文字コードです。半角カタカナは1バイト、それ以外の全角文字は2バイトで表されます。

##UTF-8##
　現在最も多く使われているのがUTF-8です。日本語は3バイトで表されます。


#まとめ#
　非常にざっくりとですが、文字コードとは何かについて書いてきました。文字コードは文字と番号の対応表でコンピュータに我々が使う文字を認識させるために作られたルールのことです。それには色々種類があり、中でも最も多く使われているのがUTF-8になります。