OmniAICreator/Qiita-1.07M huggingface dataset:
vs-code mysetting

    "files.associations": {
        "*.erb": "erb"
    },
    "emmet.includeLanguages": {
        "erb": "html"
    },
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "editor.tabSize": 2,
    "editor.minimap.enabled": false,
    "workbench.activityBar.visible": true
    "files.eol": "\n",
    "vim.vimrc.enable": true,
    "vim.vimrc.path": "c:\\Users\\hirok\\.vimrc",
    "vim.useSystemClipboard":true,
    "vim.hlsearch": true,
    "vim.easymotion": true,
    "vim.easymotionKeys": "hksdgjf",
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": ["f"],
            "after": ["leader", "leader", "s"],
        },
        {
            "before": ["<Esc>"],
            "commands": [":nohl"]
        },
        {
            "before": ["p"],
            "after": ["\"", "0", "P"],
        },
        {
            "before": [">"],
            "after": [">", "g", "v"]
        },
        {
            "before": ["<"],
            "after": ["<", "g", "v"]
        },
        {
            "before": [";"],
            "after": [":"]
        }
    ],
    "vim.insertModeKeyBindings": [
        {
            "before": ["j","j"],
            "after": ["<Esc>"]
        }
    ],
    "vim.visualstar": true,
    "vim.useCtrlKeys": true,
    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": true,
    "files.trimTrailingWhitespace": true,
    "editor.copyWithSyntaxHighlighting": false,
    "vim.leader": "<space>",
    "workbench.editor.enablePreview": false,
    // Vimのモードごとで色を変える設定
    "vim.statusBarColorControl": false,
    "workbench.colorCustomizations": {
        "statusBar.background": "#8FBCBB",
        "statusBar.noFolderBackground": "#8FBCBB",
        "statusBar.debuggingBackground": "#8FBCBB",
        "statusBar.foreground": "#434C5E"
    },
    "editor.fontSize": 14,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    // 色を変える設定 ここまで
    "ruby.intellisense": "rubyLocate",
    "workbench.colorTheme": "Monokai",
リモートリポジトリとの通信ができなくなった際の確認事項

<!-- リモートリポジトリとの通信ができなくなった際の確認事項 -->

ある日、`git pull` を実行した際、以下のようなエラーが出力された。

```
fatal: remote error: 
   is not a valid repository name
  Visit https://support.github.com/ for help
```

## 対処方法
リモートリポジトリの設定の確認を行う。

```
$ git remote -v
origin	git@github.com::USERNAME/REPOSITORY_NAME.git (fetch)
origin	git@github.com::USERNAME/REPOSITORY_NAME.git (push)
```

もし、上記のように、`:` が２つ続いていたら、以下のコマンドを実行する。

```bash
$ git remote set-url origin git@github.com:USERNAME/REPOSITORY_NAME.git
```

リモートリポジトリの設定の確認を行い、`:` が１つになっていることを確認する。

```
$ git remote -v                                                            
origin	git@github.com:USERNAME/REPOSITORY_NAME.git (fetch)
origin	git@github.com:USERNAME/REPOSITORY_NAME.git (push)
```

再度実行してみる。

```
$ git pull
Already up to date.
```

通るようになった。めでたしめでたし。
Jquery アコーディオン　最低限

Laravel Framework 8.35.1
開発環境
docker,vscode
今日はjqueryでアコーディオンを作成したいと思います
アコーディオンとは下の動画を見てください。
非同期で操作でできると思います。
![aaa](https://user-images.githubusercontent.com/72079540/113503273-bd020e80-956b-11eb-820c-9d2445dad872.gif)



今回はLaravelを用いて作成します
まずresourceフォルダにtop.blade.indexを作成します


```top.blade.php
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link href = "css/hoge.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<ul class = "faqs">
  <li class = "faq">
    <h1 class = "question">Windowsでも受講できますか</h1>
    <span>+</span>
    <div class = "answer">
      <p>Windowsでも受講は可能ですがMacをおすすめします</p>
    </div>
  </li>
  <li class = "faq">
    <h1 class = "question">年齢制限はありますか?</h1>
    <span>+</span>
    <div class = "answer">
      <p>年齢制限は特にありません</p>
    </div>
  </li>
</ul>
  <script src = "{{asset('js/hoge.js')}}"></script>
</body>

```
このようにcssファイルを読み込ませます
次にpublicフォルダにcssファイルを作成します

```hoge.css
.faqs{
    margin:10px;
    border-bottom:1px solid #ccc;
    position:relative;
    cursor:pointer;
    text-align: left;
}
.faq{
 cursor:pointer;
}
.answer{
 display:none;
}

```


次にpublicフォルダにjsファイルを読み込ませます

```hoge.js
$('.faq').click(function(){
  var $answer = $(this).find('.answer');
  if($answer.hasClass('open')){
    $answer.removeClass('open');
    $answer.slideUp();
    $(this).find('span').text('+');
  }else{
    $answer.addClass('open');
    $answer.slideDown('open');
    $(this).find('span').text('-');
  }


});
```


完成
SourceTreeでログインができない時の対処法

##現象
プッシュ時にSourceTreeからログインを求められ、
**正しいメールアドレス（orユーザーネーム）、パスワード**を入れたにもかかわらず、
以下のようなエラーが表示されてしまう

```
git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks push -v --tags origin ...(以下略)
```

##解決策

**Gitの再インストールのみ**でこの問題は解消できます。

Gitのダウンロードページはこちらから
>https://git-scm.com/download/win

##その他

こちらのエラーに見舞われて似たような記事を探したのですが、
今回のエラーに該当する記事が少ないと感じたので記事にさせていただきました。

先行文献としてGitとSourceTreeの再インストール＆SourceTreeのプロファイル削除が
解決策として挙げられています

>参考　2018-07-12　「SourceTree で GitHub Login 画面が連発する」
https://mseeeen.msen.jp/requires-github-authentication-many-times-with-sourcetree/#i

当記事で解決できなかった方は、こちらも見てみるとよいかもしれません。
GitHubとGitコマンド【学習記録】

◾️GitHubとは
リポジトリのポスティングサービス(コードを預かってくれる)
ソーシャルコーディングの場としても使われる
(オープンソースのコードに色んな人が集まって開発を進めることができる)

◾️Gitとは
バージョン管理システム
どのファイルの何を、誰が、いつ、
何のために、変更したかを残せる

■共同開発の流れ
`pull` ➡ `add` ➡ `commit` ➡ `push`
上記のコマンドを使うことでファイルを共有できる

■基本的なワークフロー
①ローカルリポジトリの新規作成
②ファイルの変更をインデックスに追加
③ローカルリポジトリにコミットする
④リモートリポジトリにプッシュする

〜Gitコマンド〜

■git init
Gitを使う準備をする
ローカルリポジトリの新規作成
ファイルや、その変更履歴がここに貯められる

■git add ファイル名
共有したいファイルを選択する
ファイルの変更をインデックスに追加
インデックスはコミットするファイルの控室的なもの

今ある変更をまとめて追加したい場合は`git add .`

■git commit -m "メッセージ"
選択したファイルをメッセージ付きで記録する

分かりやすいメッセージにする
例）index.htmlを作成
`git commit -m "Create index.html"`
例）タイトルの色を変更
`git commit -m "Change title color"`

初めてコミットする場合は`initial commit`とする

変更ごとにコミットすると良い
セーブポイントをたくさん作るイメージ

■git remote add origin URL
リモートリポジトリの準備

■git push origin master
リモートリポジトリにファイルをアップロードする

■git pull origin master
リモートリポジトリからファイルをダウンロードする

■共同開発の流れ
`pull` ➡ `add` ➡ `commit` ➡ `push`
上記のコマンドを使うことでファイルを共有できる

■git status
自分が変更したファイルを確認できる
変更されたファイルは赤で表示される

addされたファイルも確認できる
addされたファイルは緑で表示され、まだされていないファイルは赤で表示される

■git diff
変更内容を表示する
変更した部分は緑で表示され、変更前の部分は赤で表示される

■git diff HEAD
インデックスと最新コミットの差分を見る

■git log
自分や他人のコミットを確認できる

commit:ハッシュ値
Author:書いた人とそのメールアドレス
Date:日付

変更内容まで見たい場合は
`git log -p`

■その他
コミットしてしまったファイルをGitの管理から外すには以下のコマンドで実行できる
`git rm --cashed ファイル名`
その後ファイルを削除し、`.gitignore`ファイルに記載する

.gitignoreに指定することで
管理したくないファイルをGitの管理から外すことができる
自動生成されるファイルやパスワードが記載されているファイルなどが対象
github actions の定義について


## ■github actionsの定義ファイルの配置場所
```
【リポジトリ】/.github/workflows/【適当なファイル名】.yml
```

## ■github actions で使用する変数（ソースに値を見せない）

1. github の 「Settings」を開く
2. Secrets を選択して、キーと値を設定
3. 上記で設定後、github actions で secrets.XXX として使用できます

## ■stepsの処理

### ▽リポジトリのソースをsrcディレクトリに配置
```yml
      - name: checkout
        uses: actions/checkout@v2
        with:
          path: src
```

### ▽トリガーされていないリポジトリ（develop/test.comリポジトリ）のソースをtestディレクトリに配置
```yml
      - name: checkout
        uses: actions/checkout@v2
        with:
          repository: develop/test.com
          path: test
          # githubのPersonal access tokens
          token: ${{ secrets.GIT_PAT }}
```

### ▽コマンドを実行したい場合
```yml
      - name: command
        run: |
          # リポジトリ名を少しカスタマイズ
          NAME=$(echo ${{ github.repository }} | sed -e 's/^.\+\/\(.\+\)$/\1/g')
          # 次のステップで値を使用するために環境変数（NAME）に設定
          echo "NAME=$NAME" >> $GITHUB_ENV
```

### ▽slackに通知
```yml
      - name: complete
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
          SLACK_MESSAGE: "通知"
```
【脱獄不要】iPadにVMをサイドロードしてLinuxを動かしてみた【Windowsもいけるよ】

# 注意
本記事の内容はiOS/iPadOS11〜13向けです。
その他のiOS/iPadOSについては[UTM（今回使用したVM）のインストールガイド](https://getutm.app/install/)を読んでください。
また、本記事の内容はUTMの配布元様のガイドを和訳したものが中心となっています。

（2025/03/11追記）
TrollStoreが使える環境であれば、TrollStoreを使った方が楽です。
iOS（iPadOS） 14 - 16辺りかな？

# 使うもの
| 名称           | 説明                              |
| -------------- | --------------------------------- |
| AltStore       | サイドロード用ツール              |
| UTM            | 今回使用したVM                    |
| PC             | 節子はM1 Macを使用                |
| iOS/iPadOS端末 | 節子はiPad（iPadOS13）を使用      |
| OSイメージ     | 節子はDebian 10.4 (Minimal)を使用 |

# 方法
1. [AltStore](https://altstore.io/)をiOS端末にインストールする。
2. [最新のUTM（VMの名前）のIPA](https://github.com/utmapp/UTM/releases/latest)をiOS端末にDLする。
3. 上記IPAをAltStoreで開く。（UTMのサイドロード完了）
3. [UTM->User Guide->Quick Start](https://getutm.app/guide/#quick-start)に従い、好きなOSイメージをiOS端末にDL。（節子は[Debian 10.4 (Minimal)](https://mac.getutm.app/gallery/debian-10-4-minimal)をDLした。）
3. unzipして.utmをUTMで開く。（下図のようになる）
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188881/c93381e0-5bda-723a-8bcb-54aa81195404.jpeg)
6. タップしてLinuxを起動。（下図のようになる。ユーザー名、パスワードの変更をお忘れなく）
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188881/30e05df3-6afc-e852-7507-9ef332f4b568.jpeg)

# 素晴らし過ぎる配布元様
[UTM](https://getutm.app/)
[AltStore](https://altstore.io/)
配列の中身を小さい順に並び替えて出力してみた。[初心者向け]


こんにちは！！


今回は配列の中身を小さい順に並べてみました！！！


##問題

<b>l := []int{100, 300, 23, 11, 23, 2, 4, 6, 4}
中身を小さい順に並べます。</b>


こんな感じ。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1174366/e61aa030-af7f-d65a-5421-646851fcf825.png)



##回答
自分の回答こちら！！！

```
package main

import (
	"fmt"
	"sort"
)

func main() {
	l := []int{100, 300, 23, 11, 23, 2, 4, 6, 4}
	sort.Sort(sort.IntSlice(l))
	fmt.Println(l[0:9])
}

```


<b>sortのインターフェースというのがある</b>らしく、
勝手に小さい順にやってくれました。笑
理解していないからまだまだですな。。。


参考になるサイト
https://qiita.com/Jxck_/items/fb829b818aac5b5f54f7


いろんな書き方あるから引き出し（いろんなパターンのコードの書き方）を増やします。。
Zsh: sudo でも補完を有効にする

自作コマンドを `sudo` をつけて実行しようとしたときに補完できない場合は、以下を `~/.zshrc` に追加する。

```diff:~/.zshrc
+ zstyle ':completion:*:sudo:*' command-path $path
```

`$PATH` ではなく `$path` であることに注意。

# 参考サイト
* [Zsh初心者がzshrcを色々調べたの晒してみる](https://qiita.com/ryuichi1208/items/2eef96debebb15f5b402#zshrc%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E4%BB%98%E3%81%8D)
MongoDBのgolang-migrateでdate型のデータを登録したい場合

## 概要
[golang-migrateでMongoDBのマイグレーション](https://zenn.dev/someone7140/articles/cbbd4751b4373a)の記事にある通り、golang-migrateではMongoDBのマイグレーションが可能です。マイグレーションファイルでは、ドキュメントの更新も行えるのですが、今回date型のデータを登録したい場合、どうするかというのをまとめます。

## 対応
[How to insert date into mongo from JSON file](https://stackoverflow.com/questions/26901294/how-to-insert-date-into-mongo-from-json-file)の記事にある通り、` "createdAt": { "$date": "2018-11-10T22:26:12.111Z" }`のような形式でマイグレーションファイルを用意すれば日付型を登録できると思ったのですが、golang-migrateでは実行時にエラーになりました。
[こちら](https://github.com/golang-migrate/migrate/issues/340)のIssueにある通り、golang-migrateでは日付型への変換はサポートしていないそうです・・。代替案として`currentDate`を使ったupdateが紹介されています。つまり、一度データをinsertした後に、現在日付でupdateするということなら実現可能になります。

## 設定サンプル
上記のIssueで紹介されている内容ほぼそのままですが、現在日付で設定するサンプルを紹介します。
一度日付をnullで登録した後に現在日付でupdateします。

```json:001_create_sample_user.up.json
[
 {
    "insert": "sample_user",
    "documents": [
      {
        "_id": "id1",
        "name": "user1",
        "created_date": null
      }
    ]
  },
 {
    "insert": "sample_user",
    "documents": [
      {
        "_id": "id2",
        "name": "user2",
        "created_date": null
      }
    ]
  },
  {
    "update": "sample_user",
    "updates": [
      {
        "q": { "created_date": null },
        "u": {
          "$currentDate": {
            "created_date": true
          }
        },
        "multi": true
      }
    ]
  }
]
```
React Propsについて

## 始めに
reactに入門しました。reactを触って見てもっと触って見たいと言う気持ちがあり、フロントの習得はreact + typescriptを目指すべく、今回はpropsについて書学者なりにまとめていきます。

## Props
- 親コンポーネントから子コンポーネントにデータを渡してやる為の方法。
- 具体的には親で渡したいデータを属性値として定義して子に渡してやります。
- 子は引数として受けとります。そしてデータを使う際には {} ないで記述していきます。

```react
//親
import Childern from './Childerm';

const App = () => {
  return (
     <>
       <Childern testValue='this is data of children' />
     </>
  );
}
```
子で受け取る場合

```react

const Childern = (props) => {
   const {testValue} = props;
   return (
      <>
         <p>{testValue}</p>
      </>
   );
}

//ブラウザー上で
//thi is data of childern

```

## children
子コンポーネントを内包する全ての親要素をpropsとして渡してやる方法。

まずは子コンポーネントから

```react
import React from "react";
import Header from "../Header/Header";

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      {children}
    </>
  );
};

export default Layout;

```

親コンポーネント

```react
import React from "react";
//componets
import Layout from "../components/layouts/Layout";

const TopPage = () => {
  return (
    <>
      <Layout>
        <div>top page</div>
      </Layout>
    </>
  );
};

export default Top;
```

内包している全ての要素を渡している。
なのでcomponentや関数、はたまたHTMLで記述した要素全てを渡すことが出来ます。
共通のlayoutを作成する際は活用できる印象です。
layoutだけじゃなく、一覧表示ページを作成するにも役に立ちそうです。

----
### 終わりに
さらに実用的な記述方法があればアップしていきます。
laravel クエリビルダ saveしたカラムのIDを取得する 個人メモ

# 目的

- laravelのクエリビルダを用いてDBに値を新規で格納した時のレコードのIDを取得する方法をメモ的にまとめる

# 方法

- 下記のようにする事により新規でデータを格納したレコードのIDを取得する事ができる。

    ```PHP
    // $strにはDBに格納する値を連想配列状に格納済みであるものとする。
    $str->save();
    // 下記のようにすることで$strの内容を格納したテーブルレコードのIDを$idに格納する事できる。
    $id = $str->id;
    ```
Vuexとは何かを簡潔にまとめてみた

# Vuexとは
データとその状態に関する全てを一元管理する`状態管理`のこと
propsや$emitを都度使用することなくデータを参照できる。
アプリケーションの規模が大きくなればなるほど需要が高まる

# Vuexのメリット
先述したとおりpropsや$emitを都度使用せずにデータを参照できる。
Vuexによって管理されているデータもリアクティブになっているため、コンポーネント構造状態に関わらず、使用している場所で常に同期されている。
また、状態管理専用ライブラリのため、データを保持する以外にもアプリケーションレベルでデータを管理したり、いくつかの状態をグループ化して管理できるモジュール機能など、状態管理に様々な機能を持っている。![スクリーンショット 2021-04-04 16.30.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/804ad824-2aea-a9b5-601f-bf76ba93151b.png)

# コンポーネントとは
機能を持つUI部品ごとにテンプレートとJavaScriptを１つのセットにして、他のUI部品とは切り離した開発及び管理できるようにする仕組みのこと。
![スクリーンショット 2021-04-04 16.46.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/72b65c84-aedf-3582-4abf-2d1e2548c64c.png)

上記画像のトップ画面にログインボタンを表示するか否かはユーザーのログイン情報の有無によって変わるが、ここで出てきたユーザーのログイン情報をアプリケーション単位で一元管理してくれるのが`Vuex`となる。

# 参考文献

[基礎から学ぶVuejs](https://www.amazon.co.jp/%E6%94%B9%E8%A8%822%E7%89%88-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6Vue-js-2-x%E5%AF%BE%E5%BF%9C-mio/dp/4863543239/ref=as_li_ss_tl?ie=UTF8&linkCode=sl1&tag=cubix-22&linkId=c81b1475d7e571a98a525dc261bf5a12&language=ja_JP)
.NET Coreでshift-jis出力

# やりたいこと

Windowsでむにゃむにゃする前提の（マルチバイト文字を含む）CSVを入出力したい


# 何も考えずに書いてみる

```C#:sample1.cs
// using System.IO

StreamWriter sw = new StreamWriter("hogehoge.csv", false);
sw.WriteLine("はろーわーるど");
sw.Close();

```

Excelくん
![utf8excel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277708/6977545f-3672-be4d-2cca-c49e2c6a06dc.png)

はい。

# 本題

StreamWriterクラスはコンストラクタでエンコーディングを指定することができます（Encodingクラス、System.Text名前空間）。指定しなければドキュメント曰く「既定のエンコーディング」となっており、手元の環境では "BOMなしの" utf-8になったためお約束の文字化けが起こった次第です。

じゃあshift-jisを指定すればいいだろという話なのですが、.NET Core 3.1ではshift-jisが標準でサポートされていません。

https://docs.microsoft.com/ja-jp/dotnet/api/system.text.encoding?view=netcore-3.1


```C#:sample2.cs
// using System.IO
// using System.Text

StreamWriter sw1 = new StreamWriter("hogehoge.csv", false, Encoding.GetEncoding("utf-8"));
// -> OK

StreamWriter sw2 = new StreamWriter("hugahuga.csv", false, Encoding.GetEncoding("shift_jis"));
// -> 例外 ArgumentException: 'shift_jis' is not a supported encoding name.
```

ちなみに上のsw1のように明示的にutf-8エンコーディングを指定した場合は "BOM付きの" utf-8になります。Excelで読み込みたいだけとかならこれで問題ないですが、それはそれとしてエンコーディングにshift-jisを指定できないのは若干気持ち悪い。

どうも裸のままではどうしようもなさそうなので、以下パッケージを追加します。

https://www.nuget.org/packages/System.Text.Encoding.CodePages/

```bash:terminal
> dotnet add package System.Text.Encoding.CodePages
```

で、

```C#:sample3.cs
// using System.IO
// using System.Text

EncodingProvider ep = CodePagesEncodingProvider.Instance;
StreamWriter sw = new StreamWriter("hogehoge.csv", false, ep.GetEncoding("shift-jis"));
sw.WriteLine("はろーわーるど");
sw.Close();
```

![sjexcel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277708/bf28525d-68a9-ec25-7f49-99adf52a31a1.png)
binned errorbar plot with matplotlib

## 目的

左図のような散布図が描ける状況で, 右の図をmatplotlibなどで作成する手順を紹介すること. 
![test_scatter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228921/4bc1177e-bf21-8808-1fd0-cafee2d182aa.png)![test_linear.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228921/72654219-72db-93a5-06b2-3e3d25632789.png "After")

[両対数スケールでのplotを扱った記事](https://qiita.com/HajimeKoike/items/da76559c11283b140df4)があります. 線形スケールと両対数スケールではbin分けとfittingの部分が異なります. 



## 環境

Python 3.9
Numpy 1.20.1
Pandas 1.2.0
Matplotlib 3.3.3
scikit-learn 0.24.1

## 方法

**import**

```python
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from sklearn.metrics import r2_score
```

**データの概形**

データはpandasのDataFrameに入っているとします. 

```python
print(df.head())
```

```:output
          x         y
0  0.086787  0.296361
1  0.379250  1.195589
2  0.099694  0.207927
3  0.902494  2.255489
4  0.890014  2.071342
```



**binning, mean&std/quantileの計算, fitting**


```python

# 例えばxをbin幅 1/bins=1/20 で分割したい時
bins=20
df['xbin']=round(bins*df.x)/bins

# mean&std/quantilesの計算
m=df.groupby('xbin').mean()
s=df.groupby('xbin').std()

# 1次関数でfitting
c=np.polyfit(m.index,m.y,1)
l=np.poly1d(c)(m.index)
r2=r2_score(l,m.y)

print(df.head())
```

```:output
          x         y  xbin
0  0.086787  0.296361   0.1
1  0.379250  1.195589   0.4
2  0.099694  0.207927   0.1
3  0.902494  2.255489   0.9
4  0.890014  2.071342   0.9
```

**plot**

```python
plt.rcParams['font.family'] = 'Arial' 
plt.rcParams['mathtext.fontset'] = 'stix' 
plt.rcParams['font.size'] = 15 
plt.rcParams['xtick.labelsize'] = 9 
plt.rcParams['ytick.labelsize'] = 9 
plt.rcParams['xtick.direction'] = 'in' 
plt.rcParams['ytick.direction'] = 'in' 
plt.rcParams['axes.linewidth'] = 0.7 
plt.rcParams['axes.grid'] = False 

plt.title('binned errorbar plot test: linear')
plt.xlabel('$x$')
plt.ylabel('$y$')
plt.errorbar(m.index, m.y, yerr=s.y, fmt='o', marker='s', mfc='#000000', mec='#000000', 
             ecolor='#2e3436', elinewidth=0.5, capsize=1.0, capthick=1.0)
plt.plot(m.index,l, color='#2e3436', linestyle=':')
plt.text(max(m.index)/3.7, max(m.y)*6/8, '$y$={:.2f}$x$ + {:.2f}, \n$R^2$={:.2f}'.format(c[0], c[1], r2), fontsize=15)
plt.savefig('test_linear.pdf')
```

このようにして冒頭の右図```test_linear.pdf```を得た. 


## 背景

今回用いた例では有り難みが伝わりづらかったかもしれないが, 散布図そのものを用いると外れ値の影響のために乱雑になる場合が存在する. そのような時に, 横軸でbinをとり, 平均と標準偏差/四分位を用いることで見栄えをすっきりさせることを考えることがある. 


## リンク

以下の2リンクで勉強しました. 有難うございます. 

[matplotlib エラーバー付きのグラフを描く] (https://qiita.com/yuto_ohno/items/d2676e04f2d94fc30248)
```plt.errorbar```の使い方と1次関数によるfittingの例があります. 

[Matplotlibで綺麗な論文用のグラフを作る
](https://qiita.com/MENDY/items/fe9b0c50383d8b2fd919)```plt.rcParams['hoge']```を使ってmatplotlibのデフォルト設定から変更を加えることで, 見栄えをよくすることができます.
String[]をstrings.xmlで定義する

文字列の配列をstrings.xmlで定義する方法について
単純だが今まで知らなかったのでメモ
 
```xml:strings.xml
<string-array name="prefecture">
        <item>北海道</item><item>青森県</item><item>岩手県</item><item>宮城県</item><item>秋田県</item><item>山形県</item>
        <item>福島県</item><item>茨城県</item><item>栃木県</item><item>群馬県</item><item>埼玉県</item><item>千葉県</item>
        <item>東京都</item><item>神奈川県</item><item>新潟県</item><item>富山県</item><item>石川県</item><item>福井県</item>
        <item>山梨県</item><item>長野県</item><item>岐阜県</item><item>静岡県</item><item>愛知県</item><item>三重県</item>
        <item>滋賀県</item><item>京都府</item><item>大阪府</item><item>兵庫県</item><item>奈良県</item><item>和歌山県</item>
        <item>鳥取県</item><item>島根県</item><item>岡山県</item><item>広島県</item><item>山口県</item><item>徳島県</item>
        <item>香川県</item><item>愛媛県</item><item>高知県</item><item>福岡県</item><item>佐賀県</item><item>長崎県</item>
        <item>熊本県</item><item>大分県</item><item>宮崎県</item><item>鹿児島県</item><item>沖縄県</item>
</string-array>
```

```java:呼び出す
String[] prefectureArray = getResources().getStringArray(R.array.prefecture);
for (String prefecture : prefectureArray) {
    System.out.println(prefecture);
}
【C】コンパイル手順

<h2>ファイルのパスをコピーする</h2>
<strong>[Windows]</strong><n> Shift + 右クリック → パスのコピー(A)</n>
<strong>[Mac]</strong><n> Command + option + C</n>

<h2>コンパイル</h2>
####コマンドプロンプトで実行させる場合
<n>gcc test.c</n>
<n>a.exe</n>

####ターミナルで実行させる場合
<n>cd ファイルの存在するファイルパス</n>
<n>gcc ファイル名.c</n>
<strong>[Windows]</strong><n> .\a</n>
<strong>[Mac]</strong><n> ./a.out



<h2>コマンドプロンプトで文字化けする時の対処</h2>
<n>"chcp"と入力して，現在のコード　ページ： 932
と出たら，文字コードはShift_JISであることがわかる。</n>
<n>"chcp 65001"と入力することで，文字コードがUTF-8に変更される。</n>

<h2>Macでの改行</h2>
Macでは”¥n”では改行されずに，文字列¥nとして出力される。
<strong>¥n→\n</strong>にすることで解決される。
\ = Option + ¥
Go言語で配列内の数値を足して（足し算）出力してみたよ。。。【超初心者向け】

こんにちは！！

今回は、Go言語の配列内の数値を合計して出力してみました。
現在、
https://www.udemy.com/course/go-fintech/
こちらのUdemyのＧｏ言語の学習で出てきた問題です。

##問題
<b>
m := map[string]int{
    "apple":  200,
    "banana": 300,
    "grapes": 150,
    "orange": 80,
    "papaya": 500,
    "kiwi":   90,
}</b>
この数値の合計値を出力する問題です。
なので、<b>出力結果に1320が出力されればOK</b>ですね！！


こんな感じです。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1174366/b35f2510-5428-d6c7-4e19-d6e82849e9d7.png)


##回答

まず自分の回答はこちら。。。

```
package main

import "fmt"

func main() {
	m := map[string]int{
		"apple":  200,
		"banana": 300,
		"grapes": 150,
		"orange": 80,
		"papaya": 500,
		"kiwi":   90,
	}
		sum := 0
		for _, m := range m {
			sum +=	m
	}
		fmt.Println("sum:", sum)
	}
```




##解説

説明が下手ですが、ざっくり説明します。
<b>
１、sumという箱を作り、0を入れます。
<b>
２，次にfor文で、問題文の文字列と数値からm範囲をrangeで指定します。 ←（"apple":　200や"banana": 300等々の200の部分がmです。）
<b>
３，sumのという箱とmの中身を足し算します。
<b>
４，最後に作ったsumという箱の中を出力させたら完成！！！




###参考になるサイト
https://www.spinute.org/go-by-example/range.html
http://itdoc.hitachi.co.jp/manuals/3020/30203K5600/JPSU0144.HTM
https://qiita.com/k-penguin-sato/items/a320072fa09502bde3e9


※動画などで学んだ方が理解度が上がるので、動画で学びながらqiitaなどのサイトを利用した方がいいです。
挫折したり、わからない箇所が出で来る可能性があります。。。


##終わりに
書き方が様々あるとおもいます。
おそらく自分も、数か月、数年後見直したらクソコードだなと思う気がします。笑
いろんな書き方にチャレンジしてみましょう！！
初学者向け DB作成

データベース設計は、アプリ全体の仕様を決める上でとても大切な作業です。
ここでは、Ruby on railsを使ったアプリケーション作成におけるDB設計について、細かい部分の知識を自分の復習も兼ねて記載します。

## 開発環境
・Mac OS　Big Sur 11.2
・Ruby 2.6.5
・Rails 6.0.0


## DB(データベース)とは
データベースとは、情報の集合体、すなわちデータの集まりのことです。
データベースには、そのデータ自体の保存や検索を可能にし、それらを迅速に実行する役割があるため、ユーザーにストレスをかけない僅かな時間で、データの保存や取得が可能です。

## コマンドによるDB作成
ターミナルにコマンドを打ち込むことで、アプリケーションのDBを作成することができます。
DBを作成するにあたり、DB設定の変更が必要な場合があります。DBの設定は、database.ymlというファイルに記載してあります。
database.ymlは、RailsアプリケーションのDB設定ファイルです。
Ruby on Railsは、このdatabase.ymlを編集することで、DBの設定を運用環境ごとに変更できる仕組みになっています。

＊補足　運用環境とは、システムをどこで使用するか定められている環境のことを言い、開発環境、テスト環境、本番環境の3つに分けることができます。このように環境が分かれている理由としては、環境ごとに設定の変更が必要なケースが多く存在する、といった事情があります。
例） 開発環境であれば「バグを探しやすいツール」などを導入した方が便利だが、本番環境ではWebアプリケーションのパフォーマンスを上げるために、余分なツールは使わない方が適切、など。

それでは、database.ymlファイルを編集します。今回は、データの保存形式を変更するため、encoding: utf8mb4という記述を、encoding: utf8に変更します。

```config/database.yml
default: &default
  adapter: mysql2
  # encoding: utf8mb4
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock
```
encoding: utf8mb4とencoding: utf8は、MySQLで扱うための文字コードと呼ばれるものであり、utf-8は3バイトの文字まで扱うのに対し、utf8mb4は4バイトまで扱うことができます。難解な漢字や絵文字の多くは4バイトとして扱われるので、そうした場合にはencoding: utf8mb4を使う必要があります。そうでない場合には、基本的にutf8を使って問題ないようです。
ここまで出来たら、ターミナルでアプリケーションのディレクトリへ移動し、以下のコマンドを実行します。

```
rails db:create
```
これでDBの作成ができました。

## DBに関して知っておきたい基礎知識
- RDB(リレーショナル・データベース)
表形式でデータを管理するデータベースのこと。行と列を持っており、DBにおいては、行を「レコード」、列を「カラム」という。

- RDBMS（RDB・マネジメント・システム）
RDBを使用する際、それを管理するシステムのこと。

- MySQL
RDBMSの1つ。
RDBMS各種には大きな差がなく、他にも同じようなRDBMSがある。
  - PostgreSQL...オープンソースのRDBMS
  - DB2...IBM社のRDBMS
  - Oracle Database...Oracle社のRDBMS
  - SQL Server...Microsoft社のRDBMS
【React】関数コンポーネントのイベントハンドラに、引数とイベントオブジェクトを同時に渡す方法


## 結論

以下で可能です。

```javascript
function App() {
  function handleClick(suffix, e) {
    console.log('suffix', suffix);
    console.log('e', e);
  }

  return (
    <a href="#" onClick={handleClick.bind(this, 'a')}>
      React
    </a>
  );
}
```

bindメソッドならイベントオブジェクトが末尾に与えられます。関数コンポーネントなので`this.handleClick.bind()`ではなく`handleClick.bind()`にする必要があります。
Macへのフォントインストール方法

1. フォントファイルをダウンロードしてくる。
2. 拡張子.ttf のフォントファイルがフォントファミリーごとに複数あるので、それら全てを選択して、ダブルクリックして開く。
     ![Screen Shot 2021-03-09 at 10.39.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292215/0d996707-650f-e5ef-378c-7e54d2bd9a05.png)
3. ポップアップが出てくるので、「Install font」をクリックする。
    - 今回試した例では、「JetBrains Mono」と「JetBrains Mono NL」の2つ分のポップアップが表示された。
    - 「Medium」や「Bold」などの字体はポップアップとしては区別されず1つにまとめられているので、取り込み漏れは心配しなくていい。
    ![Screen Shot 2021-03-09 at 10.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292215/91f19277-47fd-4133-5c3d-f09391ddb690.png)
    ![Screen Shot 2021-03-09 at 10.39.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292215/b93c1a8b-cd3c-c8cc-31fd-258dcaf9a736.png)

4. ログインしているユーザーのみが使えるフォントデータとして、/Users/ユーザ名/Library/Fonts に保存されたのが確認できた。
    ![Screen Shot 2021-03-09 at 10.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292215/5d882317-4dc7-6d68-c51d-135188e5bae3.png)
5. あとは、使いたいアプリの環境設定で、このフォントを選べばいい。
    - Terminal, VSCode, Xcode などなど
DNN用関数 with Python 備忘録

#概要
CourseraのNLPコースの後半がTraxを使ったRNNだった。
最後のコースがBRATの実装でTensorflowやPyTorchではコードが複雑になりすぎるのでTraxを使う羽目になった。

https://www.coursera.org/learn/classification-vector-spaces-in-nlp/home/info

コーディング課題で使用した深層学習用の関数を残していく。
ちなみにTraxとはTensorflowをつかう新しいFrameworkのことでGoogle様が開発している。

https://github.com/google/trax

- 受講時期: 2021年2~4月
- Python: Google Colab

##ちょっとTraxの紹介

```python
!pip install trax==1.3.7 
import trax

# f(x) = 2x**2
def f(x):
  return 2.0 * x * x

# そのまま関数を渡すと導関数を返してくれて、
grad_f = trax.fastmath.grad(f)

# 指定のxで戻してくれるすごいやつ。
print(f'grad(2x^2) at 1 = {grad_f(1.0)}')
# grad(2x^2) at 1 = 4.0
```


##高階関数 higher-order function
関数の引数に関数を渡すPythonの機能
いわゆるコールバックのような感じ

####宣言
calc1関数, calc2関数の第一引数に別定義した関数を渡す仕様にした。

```python
def func_1(x1, x2):
    rtn = x1 * x2 + 10
    return rtn

def calc1(fn, wk_x1, wk_x2):
    rtn = fn(wk_x1, wk_x2) + 100
    return rtn

def calc2(fn, wk_x1):
    rtn = fn(wk_x1, 20) + 100
    return rtn
```

もちろん下記はSyntax errorとなる。

```python
def calc1(fn(wk_x1, wk_x2)):
    rtn = fn(wk_x1, wk_x2) + 100
    return rtn
```


####呼んでみる
```python
print(calc1(func_1, 10, 20))
print(calc2(func_1, 10))
```

calcの中では引数に渡された関数を呼び、その関数に同時に渡された変数を渡し、結果を戻している。
両方共301が返る。


##Data Generator
コーディング課題でPythonだけでデータを無限に生成するiterator関数を作成した。
Pythonのyield関数で戻し、呼ぶ方はnext関数で1個づつ取ってくる。
やっていることはtensorflowの[from_generator](https://www.tensorflow.org/api_docs/python/tf/data/Dataset#from_generator)や[from_tensor_slices](https://www.tensorflow.org/api_docs/python/tf/data/Dataset#from_tensor_slices)と同じ。
tfのgeneratorはtake関数で指定した個数を取ってくる点が違う。

####宣言
```python
def data_generator(batch_size, data_x, data_y):
    '''
      Input: 
        batch_size - integer describing the batch size
        data_x - list containing samples
        data_y - list containing labels
      Output:
        a tuple containing 2 elements:
        X - list of dim (batch_size) of samples
        Y - list of dim (batch_size) of labels
    '''
    
    data_lng = len(data_x) # len(data_x) must be equal to len(data_y)
    index_list = [*range(data_lng)] # Create a list with the ordered indexes of sample data
    
    index = 0
    while True:
        X = [0] * batch_size 
        Y = [0] * batch_size 
        
        for i in range(batch_size):
            
            # Wrap the index each time that we reach the end of the list
            if index >= data_lng:
                index = 0

            X[i] = data_x[index] # We set the corresponding element in x
            Y[i] = data_y[index] # We set the corresponding element in x
            index += 1
        
        yield((X, Y))
```

####呼んでみる
```python
x = [1, 2, 3, 4, 5, 6]
y = [xi ** 2 for xi in x]
batch_size = 3
generator = data_generator(batch_size, x, y)

for i in range(5):
    print(next(generator))
```

下記がtupleで戻る
([1, 2, 3], [1, 4, 9])
([4, 5, 6], [16, 25, 36])
([1, 2, 3], [1, 4, 9])
([4, 5, 6], [16, 25, 36])
([1, 2, 3], [1, 4, 9])
モーションブラーでスピード感を出す


スピード感を出す実装をするには、ブラーを使うとよりスピーディーに見えます。
色々調べて面白かったので自分用まとめです。


【通常のモーション】

<img src="https://www.actzero.jp/wp-content/uploads/2015/07/01.gif" />

【ブラーをつけたモーション】
<img src="https://www.actzero.jp/wp-content/uploads/2015/07/05.gif" />

【参考サイト】
https://www.actzero.jp/developer/report-13578.html

上記参考サイトから拝借しました「早い」の動きは、中間にぼかし加工を入れることによって、通常よりもスピードを出しているという面白い手法です。
<img src="https://www.actzero.jp/wp-content/uploads/2015/07/041.png" />

では、使用する画像を増やす以外にこのモーションブラーを実装する方法はあるのでしょうか？


## CSSでモーションブラーを実装するには
残念ながら現在では**CSSでモーションブラーはサポートされていません。**
なので力づくで実装することになります。

【参考サイト】
https://css-tricks.com/how-to-create-a-realistic-motion-blur-with-css-transitions/
こちらのサイトで紹介されているように、
**動きの中間状態のものを複製しまくってならべる**、というものです。
これは動きの速さに比例して必要な複製数が変わってきますが、場合によっては32もの複製を用意する必要があります...

参考サイトのサンプルそのまま拝借
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="Nealevf" data-slug-hash="oNxKZOx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Motion Blur Step 2">
  <span>See the Pen <a href="https://codepen.io/Nealevf/pen/oNxKZOx">
  Motion Blur Step 2</a> by Neale Van Fleet (<a href="https://codepen.io/Nealevf">@Nealevf</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

とてもしんどそうですが、確かにモーションブラーのような動きになっています。すごい。

## SVGでモーションブラーを実装するには
【参考サイト】
http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/
`stdDeviation` を用いて水平/垂直方向にブラーをかけることが可能です。
これをJSを利用して動的に操作することで、躍動感あるブラーを実装することができます。

```js
// エフェクトをかけたい要素を選択
var $element=$(".selector");
// 変化を取れるよう現在のpositionを取得
var lastPos=$element.offset();
// エフェクトの強さをコントロールするために倍率を設定する
var multiplier=0.25;

// 簡単にblurを設定するためのヘルパ関数
function setBlur(x,y){
	blurFilter.setAttribute("stdDeviation",x+","+y);	
}

(function updateMotionBlur(){
	// 要素の現在のpositionを取得
	var currentPos=$element.offset();
        // 前フレームからの変更を計算し、乗数を適応
	// calculate the changes from the last frame and apply the multiplier
	var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;
	var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;

	// set the blur
	setBlur(xDiff,yDiff);

	// 次のフレームのために現在のポジションを保存
	lastPos=currentPos;

	// 次のフレームを呼ぶ
	requestAnimationFrame(updateMotionBlur);
})();
```
上記参考サイトよりサンプル

<img src="http://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2015/04/blur_modal.gif" alt="Blur_modal" width="880" height="575" class="alignnone size-full wp-image-23832">
PyTorchの自動微分を用いて関数の接線を描画してみた

この記事では、fastbookのサンプルコード[04_mnist_basics.ipynb](https://github.com/fastai/fastbook/blob/master/04_mnist_basics.ipynb)をベースに自分の実験を入れながら、次のように関数の接線を表示するコードを書いてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407748/b4e29d5b-f337-9514-f99d-560f38169a26.png)
##モジュールのインポート
`plot_function()`や`tensor()`など、一部fastbookのツール関数を使っている関係で、サンプルコードに従って、次のようにfast.ai提供のモジュールをインポートしています。(`plot_function()`を自作すれば、普通に`numpy` `matplotlib` `torch`でOKです)

```python
!pip install -Uqq fastbook
import fastbook
fastbook.setup_book()

from fastai.vision.all import *
from fastbook import *
```
##接線の方程式を求める
まず、接線の方程式を求める必要があります。関数を$f(x)$とし、$x=x_0$での微分値を$a$とし、$y_0 = f(x_0)$として、接線の方程式を$y=ax+b$とすれば、その接線は$(x_0,y_0)$を通るので

```math
\begin{align}
y_0 &= a x_0 + b\\
\therefore\ y &= y_0 + a(x - x_0) = a x + y_0 - a x_0\\
b &= y_0 - a x_0
\end{align}
```
となります。次のコードは、この結果に基づいて接線の方程式を求める関数です。

```python
def tangent_line(f, x0:Tensor):
  y0 = f(x0)
  y0.backward()
  with torch.no_grad():
    a = x0.grad.clone()
    b = y0 - a*x0
  x0.grad.zero_()
  return lambda x : a*x + b
```
`x0.grad.zero_()`は、テンソル変数の微分値をゼロクリアするためのコードで、この`tangent_line`関数を単独にコールし引数$x_0$が使いまわさいれていると、関数`tangent_line`をコールする都度微分値(`grad`)が累積されるためです。また、`a = x0.grad.clone()`とするのは、そうしないと`a`と`x_0.grad`が同じメモリをシェアするらしく、`x0.grad.zero_()`をコールした時点で`a`が参照する値がクリアされるためです。
##接線を描画する
次のコードは、与えられた関数`f(x)`の指定されたx座標`x`での接線を描画する関数です。

```python
def plot_tangent_line(f, x, x_range=1.):
  xt = tensor(x).requires_grad_()
  tf = tangent_line(f, xt)
  with torch.no_grad():
    x_r = np.array( [x - x_range, x + x_range] )
    plot_function(f, 'x', 'f(x)', min=x_r[0], max=x_r[1])
    plt.scatter(xt, f(xt), color='red')
    plt.plot(x_r,tf(x_r))
    plt.show()
```
`tf`は接線の方程式で、`x_r`はx座標の描画範囲`[x-x_range, x+x_range]`です。また、`tensor`と`plot_function`はfast.aiが提供する関数です。そして、接線は`plt.plot(x_r,tf(x_r))`で描画しています。具体的には、`(x_r[0],tf(x_r[0]))`と`(x_r[1],tf(x_r[1]))`の2点を結ぶ直線になります。

たとえば、$f(x)=0.78x^2+sin(x)$の$x=-0.75$での接線を描画するには次のようにします。

```python
def f(x): return 0.78*x**2 + torch.sin(x)
plot_tangent_line(f, -.75)
```
次の図はこれを実行した結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407748/68130882-0882-2394-d61f-f3a8aa2abeb7.png)
##関連記事
[fast.aiで作るハンドメイドの超簡単な手書き数字判別器](https://qiita.com/kumagorou/items/dab8200d41f1714587b8)
[fastbookのサンプルコード(02_production.ipynb)をGoogle Colabで試してみた Part 1](https://qiita.com/kumagorou/items/6c9b92c1a9536cec888e)
[PyTorchの自動微分を用いて２変数関数の接平面を描画してみた](https://qiita.com/kumagorou/items/0cc1cc628107e5d67b64#%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B)
## fast.ai公式ページ
[Practical Deep Learning for Coders](https://course.fast.ai/)
[Lesson 3 - Deep Learning for Coders (2020)](https://course.fast.ai/videos/?lesson=3)
[Lesson 4 - Deep Learning for Coders (2020)](https://course.fast.ai/videos/?lesson=4)
mips-gcc492を用意してみる

bcmbm-mrubyとadmbm-mrubyのビルドになにかのGPLアーカイブに入っていたgcc4のLinuxのELFをFreeBSDのLinuxエミュレーションで動かしていたのですが、どこにあったものかわからなくなったので、ネイティブで用意する方法を考えてみました。

gcc4は4.9.4が最終バージョンだったようです。

FreeBSD/i386 12Rのpkgにはarm用のgcc4はあるのですがmips用のgcc4はありません。mips-gccは現在6になっています。

自力でgccとbinutilsをビルドする方法もありますが、簡単にできる方法がないか考えてみみました。

調べてみるとpkgのmips-gccは元々492だったようです。このpkgはpowerpc64-gccがマスターになっていて、これのバージョンアップで6になってしまったようです。どういう経緯かわからないですが、powerpc64もmipsもgcc6のpkgが別にあるのでmips-gccは4のままにしておいたほうが良かったような気がします。

mips-gccは元々FreeBSD/mipsのバイナリを作るためにadrianさんが用意されたようです。gcc4の頃のmips-gccはホストもgccだったと思われ、現在はclangになっているので、古いportsをcheckoutしてみましたが、そのままではビルドできませんでした。

現在のportsの構成を見てみると、devel/arm-none-eabi-gcc492をマスターにして作るのが良さそうです。

devel/mips-gcc492を作り以下のMakefileを置きます。

```makefile:Makefile
PKGNAMEPREFIX=  mips-
GCC_TARGET=    mips
BU_PREFIX=     ${PKGNAMEPREFIX}${OPSYS:tl}
PLIST=  ${.CURDIR}/pkg-plist
BINARY_ALIAS=      sed=${LOCALBASE}/bin/gsed
CONFIGURE_ENV=  ac_cv_path_AR_FOR_TARGET=mips-freebsd-ar ac_cv_path_RANLIB_FOR_TARGET=mips-freebsd-ranlib

MASTERDIR=      ${.CURDIR}/../arm-none-eabi-gcc492

.include "${MASTERDIR}/Makefile"
```

devel/arm-none-eabi-gcc492/files/に以下を追加します。

```patch:patch-gcc_mips.h
--- gcc/config/mips/mips.h.org
+++ gcc/config/mips/mips.h
@@ -2771,7 +2771,7 @@
 
 #undef ASM_OUTPUT_SKIP
 #define ASM_OUTPUT_SKIP(STREAM,SIZE)                                   \
-  fprintf (STREAM, "\t.space\t"HOST_WIDE_INT_PRINT_UNSIGNED"\n", (SIZE))
+  fprintf (STREAM, "\t.space\t" HOST_WIDE_INT_PRINT_UNSIGNED "\n", (SIZE))
 
 /* This is how to output a string.  */
 #undef ASM_OUTPUT_ASCII
```

mips-binutilsは古いものをビルドしましたがpkgでいけるような気がします。

pkg-plistを調整して、make package-noinstallするとパッケージができ、このファイルをpkgコマンドでインストールできます。

出来上がったmips-gccなどで[newlibがビルド](https://qiita.com/yamori813/items/3f87fe35acae2b4e442c)できました。

出来上がったmips-gccはデフォルトでビッグエンディアンなバイナリを出力しますが、-ELオプションをつけるとリトルエンディアンになります。ELなlibgcc.aも作るようにしてみました。

configureで--disable-multilibを指定するとTERGET(mips=big endian)以外のlibgcc.aを作らないのですが、指定しない場合はLittle Endianのlibgcc.aも作ります。

~~せっかくなのでレビューに入れてみました。~~ 諦めました。

https://reviews.freebsd.org/D29804

FreeBSD/amd64 13.0Rでもビルドしてみました。問題ありません。

armの方のgcc492はu-bootをビルドするために用意されているようです。

これに入れてあります。

https://yamori813.github.io/hp/ports.tgz
brew bundleでインストールが失敗する場合

## やりたいこと
Macをクリーンインストールしたので、
Dotfilesを使ってアプリなどを自動でインストール、設定したい。

## 何をしたときにエラーが発生したか
Brew bundleを実行した

## 発生した問題
Chromeなどのアプリはインストールできたが、tmuxやfishのインストールがエラーになる。

## 解決方法
`brew doctor`
を実行して原因を探る。

今回は、以下の注意が出た。
```
Warning: Some taps are not on the default git origin branch and may not receive
updates. If this is a surprise to you, check out the default branch with:
  git -C $(brew --repo homebrew/core) checkout master

↑翻訳
警告 一部のタップはデフォルトのgit originブランチにないため、アップデートを受け取れない場合があります。
アップデートを受け取れない場合があります。これに驚いた場合は、次のようにしてデフォルトのブランチをチェックしてください。
  git -C $(brew --repo homebrew/core) checkout master
```

上記に従い、以下を実行

`git -C $(brew --repo homebrew/core) checkout master`

そのあと、brew bundleを実行するとインストールできた。
tf.data.Datasetの注意点

TensorFlow 2には、`tf.data.Dataset`が用意されていて、データに関する操作や処理を簡単に行うことができます。
Datasetの使い方については公式チュートリアルを含め、多くの情報が存在しているので説明を割愛しますが、Datasetを使っていて「ハマるポイント」について紹介したいと思います。

## TL;DR
* shuffleはデータを取り出す度に再シャッフルされる
* シャッフル順序を固定したければ`reshuffle_each_iteration=False`を指定
* shuffle後にcacheを使うとシャッフルが機能しなくなる（cache→shuffleの順番で使う）
* batch→shuffleだと、バッチ単位でシャッフル（バッチ内部の並び順はそのまま）
* shuffle→batchだと、バッチ内部のデータもシャッフルされる
* take/skipでtrain/test用のデータ分割を簡単に行える
* shuffle後にtake/skipを使うとエポック単位にデータが混ざるので注意
* shuffle後にtake/skipする場合は`reshuffle_each_iteration=False`を指定
* takeしたデータ内でシャッフルしたければ、再度shuffleすれば良い

## Datasetに関する操作

今回は10個の数値（0～9）をDataset化して、`shuffle`,`cache`,`take`,`skip`,`batch`関数を使ったときの挙動をまとめています。また、実際には、これらの関数を組み合わせて使う場合も多いため、組み合わせたときの挙動についても試しています。

操作はJupyter Labを使って試しているため、実際のソースと実行結果を、GitHubにNotebook形式でそのままアップしています。そのため、詳細については、以下のNotebookファイルをご参照ください。

[https://github.com/KurozumiGH/tf2-note/blob/main/Notes/tf-data-Dataset.ipynb](https://github.com/KurozumiGH/tf2-note/blob/main/Notes/tf-data-Dataset.ipynb)

## よくある間違いパターンの抜粋（詳細は上記Notebook参照）

準備したDatasetをシャッフルして、それをtrain/test用に分けて使いたい場合、次のように書いてしまうとNGです。train/test用のデータは完全に分割して混ぜないのが鉄則ですが、次のような書き方では、train/testデータが混ざってしまいます。

```python
# この書き方だと各エポック単位にtrain/test用のデータが混ざってしまう
ds = make_ds().shuffle(10)
ds_x = ds.take(7) # 最初の7つをtrain用
ds_y = ds.skip(7) # 残りの3つをtest用
for i in range(LOOPS):
    print_ds(ds_x, ds_y)
```

上記コードの実行結果は以下のようになります。（1行が、1エポックで使われるデータセットに相当します）
見ての通り、train/test用のデータが完全に混ざってしまっています。

```
[0, 4, 6, 7, 3, 2, 8][4, 7, 9]
[1, 2, 8, 7, 3, 6, 5][8, 7, 9]
[0, 7, 2, 1, 4, 6, 9][8, 1, 7]
[5, 4, 9, 7, 2, 6, 0][9, 3, 7]
[5, 0, 3, 1, 8, 7, 9][0, 7, 4]
[6, 3, 0, 2, 1, 5, 4][4, 9, 5]
[6, 5, 7, 9, 2, 8, 0][9, 4, 7]
[0, 5, 8, 7, 1, 4, 9][1, 6, 0]
[9, 1, 4, 5, 3, 6, 7][1, 2, 5]
[4, 6, 0, 7, 1, 3, 8][4, 8, 3]
[4, 0, 8, 9, 5, 3, 1][4, 8, 9]
[9, 8, 4, 3, 5, 1, 6][2, 4, 5]
```
R事始め: インストール

研究のために新たにRをUbuntu20.04に導入したので、その備忘録。
Rは初心者なので、簡単な勉強記録もつける。

# 事前準備

いくつかのRパッケージは、blas, lapackなどの線形代数パッケージを利用するので、事前にそれを入れておく。

```shell
$ sudo apt-get install libblas-dev liblapack-dev
```


# R インストール

日本のミラーサイトの１つは以下のもの：
 https://cran.ism.ac.jp/

ここから、OSに合わせてダウンロードを行う。
.>> Download for Linux >> ubuntu >> 

```shell

# update indices
$ sudo apt update -qq

# install two helper packages we need
$ sudo apt install --no-install-recommends software-properties-common dirmngr

# import the signing key (by Michael Rutter) for these repo
$ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys E298A3A825C0D65DFD57CBB651716619E084DAB9

# add the R 4.0 repo from CRAN -- adjust 'focal' to 'groovy' or 'bionic' as needed
$ sudo add-apt-repository "deb https://cloud.r-project.org/bin/linux/ubuntu $(lsb_release -cs)-cran40/"

# ここからRをインストール
$ sudo apt install --no-install-recommends r-base

# ここで関連パッケージなどをインストールする（らしい）
$ sudo add-apt-repository ppa:c2d4u.team/c2d4u4.0+
```

# Rstudio

Rを動かすだけなら、以上の設定だけでOKである。
GUIを使うために、さらにRstudioを入れる。

　https://www.rstudio.com/products/rstudio/download/#download
. >> Ubuntu 18/Debian 10  [Ubuntu 20.04は明示的には書かれていない]
. >> rstudio-1.4.1106-amd64.deb をダウンロード。

```shell
$ sudo apt update
$ sudo apt -y install r-base gdebi-core
$ sudo gdebi rstudio-1.4.1106-amd64.deb
```
これでインストールは完了。

```shell
$ rstudio
```
このコマンドで起動できる。

参考・出典
https://linuxconfig.org/how-to-install-rstudio-on-ubuntu-20-04-focal-fossa-linux

# 環境について。



```R
# 今の作業ディレクトリを表示
> getwd()

#　作業ディレクトリを指定して移動
> setwd('/Users/myname/sandbox/projectA')
```

パッケージの読み込みなど

```R
> require(MASS)
Loading required package: MASS
```
[Swift]画面遷移先に値を送る

```swift
 override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let x = 10
        let test = segue.destination as! A　//遷移先の画面のscriptファイル名
        test.x = x
    }
```

**let test = segue.destination as! A**
test.x = x

とすることで、遷移先の画面に対して変数を参照できるようになる。

つまり、
現在の遷移元であるフィールド変数xを遷移先Aのフィールド変数xに代入できる

**override func prepare(for segue: UIStoryboardSegue, sender: Any?)**
は遷移というアクションが発生すると呼び出されるのか
。。。
今はそういうことにしておこう
Railsで誕生日のサーチ機能を作るときのビュー

Railsで誕生日のサーチ機能を作るとき
ただ単にオブジェクトに関連なくparamsを渡して検索結果をとってきたかったのでform_tagを使う。
form_forとかだとオブジェクトと紐づくので今回はform_tag

正直この書き方古いので正しい書き方は下の方に記述。

```ruby
<%= form_tag({controller: "/members", action: "search",remote:true} ,{method: "get",id: "form1"}) do %>
        <div>
          <p>
            <label class="center-block">名前</label>
          </p>
        </div>
        <p>
          <input class="center-block" type="text" name="name" required="required"><br>
        </p>
        <div>
          <p>
            <label class="center-block">生年月日</label>
          </p>
        </div>
        <div class="center-block text-center">
            <%= select_date(Date.today,:start_year=> 1970,name: 'birth')  %>
        </div>
        <div>
          <p>
            <%= submit_tag '検索する', name: 'public' , class: "center-block" %>
          </p>
        </div>
<% end %>
```

とした。コントローラー側で

```ruby
params[:birth] = [params[:date][:year],params[:date][:month],params[:date][:day]].join
```
としてあとはコントローラ側でゴニョゴニョ使う。
select_dateのタグでサーバに送ったデータは初期値でparams[:date]で取れる。
https://railsguides.jp/form_helpers.html#ベアボーンヘルパー


```ruby
  def search
    if params[:public]
      params[:birth] = [params[:date][:year],params[:date][:month],params[:date][:day]].join

      @gmaps = Member.includes(:gmaps).where('name = ? AND birth = ? AND magic_word = ?', params[:name], params[:birth],'').references(:gmaps).map(&:gmaps).flatten.uniq
    else
      @gmaps = Gmap.joins(:member).where('magic_word = ? AND magic_word != ? AND email = ?', Digest::MD5.hexdigest(params[:magic_word]), '', params[:email])
    end
    render 'gmaps/index'
  end
```

```ruby
<%= form_with url: users_path do |form| %>
　<%= form.date_select :bitrh %>

```

のように

rails6だと　form.date_selectでやっている記事も見るのでとりあえずそっちを使って欲しい。
コントローラ側の処理は参考程度で。
多倍長演算 加算

# 多倍長演算　加算
何百桁から何万桁の計算が必要な時がある。通常intやlongではそのような桁の数字は扱えないため、入力値をchar型の文字配列として受け取り、一桁ごとに加減算をする必要がある。一桁毎に計算する際、繰り上がり数が発生しうるため(carryと言う)、変数を一つ用意して格納しておく。

## 加算
筆算のように小さい桁から桁ごとに計算している。

```cpp
const int M = 10000;//桁数
//a + b を行い、resultに結果を格納する
char a[M] = {}, b[M] = {};
char result[M + 1] = {}; //carry 用に＋1しておく

void add(char* a, char* b, char* result) {
	int carry = 0;//carry 繰り上がり数のこと

  //各桁ごとに計算する。1の位から計算していく。
	for (int i = M - 2; i >= 0; i--) {
		int k = (a[i] - '0') + (b[i] - '0') + carry;
		carry = k / 10;
		result[i + 1] = k % 10 + '0';
	}
	//最後にcarryが発生していたら追加し、発生していなかったら'0'を追加
	result[0] = carry != 0 ? carry + '0' : '0';
}
```

### 備考
桁数が異なる場合は0のpaddingが必要であることに留意すること。入力値を配列で受け取るのではなくstring型で受け取ると入力値の桁数が一致しない。加減算では桁数をそろえて実行する必要があるため、0padding行う。

### 実験
10000桁の加算を10回繰り返す。計算内容に特に意味はないので同じ数を加算している。10000桁の加算10回でおおよそ0.01sの結果であった。

```cpp
#include <iostream>
#include <time.h>
using namespace std;
typedef long long ll;
#define rep(i,s,n)for(ll i = s;i<n;i++)

const int M = 100000;
char a[M] = {}, b[M] = {};
char result[M + 1] = {}; //carry 用に＋1しておく

void generate(char* x) {
	rep(i, 0, M - 1) {
		char c = (char)(rand() % 10 + '0');
		x[i] = c;
	}
}

void add(char* a, char* b, char* result) {
	int carry = 0;//carry 繰り上がり数のこと

	for (int i = M - 2; i >= 0; i--) {
		int k = (a[i] - '0') + (b[i] - '0') + carry;
		carry = k / 10;
		result[i + 1] = k % 10 + '0';
	}
	//最後にcarryが発生していたら追加し、発生していなかったら'0'を追加
	result[0] = carry != 0 ? carry + '0' : '0';
}

int main() {

	rep(i, 0, 10) {
		generate(a);
		generate(b);

		//速度計算のために同じ数の加算を繰り返している。
		clock_t start_clock = clock();
		rep(j, 0, 10) {
			add(a, b, result);
		}
		printf("clock:%f\n", (double)(clock() - start_clock) / CLOCKS_PER_SEC);
	}
}
```

```cpp
clock:0.010000
clock:0.010000
clock:0.010000
clock:0.010000
clock:0.010000
clock:0.009000
clock:0.009000
clock:0.010000
clock:0.009000
clock:0.010000
```

実行環境
OS Windows10
CPU Core i7
Memory
Google Compute Engineグループで定期的にインスタンスを再作成する

Google Compute Engineグループでインスタンス定期的に再起動して以下のメリットを得る方法です。

- インスタンスなんらかの状態が溜まっておきる問題を予防できる
  - disk full
  - メモリ full
  - なんらかのインスタンスの状態不整合
  - サーバー落ちてるけどヘルスチェックで検知できていないなど

## 方法

### 1. 起動後一定時間後にメンテナンス状態に入らせる

一定時間ごとにサーバーをメンテナンス状態に入らせます。使うフレームワークによって方法が違うと思います。railsでは、turnout gem + cronとかでできました。

### 2. ヘルスチェックの設定

Google Compute Engineグループの設定でヘルスチェックを設定して、メンテナンス状態に入ったインスタンスを置き換えるようにします。

## 付帯する問題

なぜか、インスタンスを再作成すると、Cloud SQLへのコネクションが残って、最大接続数に達してしまう問題がありました。

以下のWITH inactive_connections AS (から始まる方法を、Sidekiqで定期的に実行したら解決できました。

https://stackoverflow.com/questions/12391174/how-to-close-idle-connections-in-postgresql-automatically
Rustの環境構築してみた（VSCodeの初期設定まで）

# はじめに
以前から興味があったRust言語に触れてみたいと思って、学習を開始しました。
[実践 Rust プログラミング入門](https://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Rust%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-%E5%88%9D%E7%94%B0-%E7%9B%B4%E4%B9%9F/dp/4798061700/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Rust&qid=1617456833&sr=8-2)によると、以下の特徴があるみたいです。

> 
* とにかく実行速度が早い
* モダンな言語機能が一通り入っている
* OSからWebアプリケーションまで幅広く実装できる
* ツール群が充実している
* 「安全性」が強力に担保されている

↑と入門書の帯に書かれているのが印象的だったので、購入してみました。
ここでは、環境構築とエディタ(VSCode)の初期設定について記載してます。

# 環境構築
手持ちのPCがMacなので、brewを使ってインストールしてみました。
[（参考手順）] (https://www.soudegesu.com/post/rust/rust-with-rustup/)
↑の手順で進めると特に問題なく導入できたかなと思います。

* Mac:Big Sur(11.2.1) 

```:Terminal
$ brew install rustup
↓
$ rustup-init
↓
$ export CARGO_HOME="$HOME/.cargo"
↓
$ export PATH="$CARGO_HOME/bin:$PATH"
```

これで、一通りの初期導入は良さげなかんじになります。
パスとかが通ってそうであればバージョンが確認できると思います。

```:Terminal
$ rustc -V
rustc 1.51.0 (2fd73fabe 2021-03-23)

$ cargo -V
cargo 1.51.0 (43b129a20 2021-03-16)
```

最低限（Hello World）の動作確認ができる状態かと思います。
ちなみに、`cargo new hello`をターミナルで実行すると、helloというプロジェクトフォルダが作成されて、Hello Worldの出力処理を実行できるようになります。

```:Terminal
プロジェクト作成
$cargo new hello

実行ディレクトリへ移動
$cd hello 

実行
$cargo run
   Compiling hello v0.1.0 (/Users/********/development/hello)
    Finished dev [unoptimized + debuginfo] target(s) in 0.52s
     Running `target/debug/hello`
Hello, world!
```



# VSCodeの初期設定
普段VSCodeをエディタとして常用しているので、Rust用のプラグイン`rust-analyzer`をインストールします。
これを使用すると、コーディング中の構文チェックが有効になるので、開発効率が上がるかと思います。

* Extensionより、`rust-analyzer`を検索
* installを実行

![スクリーンショット 2021-04-04 0.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696120/2c3b3299-db23-e0a4-f101-5fbcff0a00ec.png)

上記の図のように有効化しておきます。

個人的に良さげな機能だと思ったのが、Rustの命名規則で関数名は`snake_case`を推奨しているため、
`camelCase`の箇所を`snake_case`に修正してくれる機能があります。
下図のようにユーザ定義と呼び出し元の両方を修正しています。

![rename.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696120/1ef25bc0-2747-5468-d1d9-2eb1e978adde.gif)



# おわりに
Rustについて、学習する分の環境はできてきたと思うので引き続き習得に努めたいと思います。
ここまでお読みいただきありがとうございました。
Atomic Designとは？（アトミックデザイン)

先日Reactのコンポーネントについて記事にしましたが、そもそもコンポーネントをどのくらいの粒度で分割すればよいのか判断する基準の一つにアトミックデザインというデザインシステムがあります。こちらは理解するのが難しかったですが自分なりに纏めてみました。

##Atomic Designとは？
Atomic Desingnはデザインシステムで、画面の要素を５段階に分けて組み合わせることでUIを構築させるという考え方に基づくものになります。ReactやVue用というわけではないがモダンなJavaScriptのコンポーネント化と相性が良いのでReactやVueで用いられることが多くなっています。

では５段階に画面を分けると前述しましたがどのようにで分けるのか。
粒度は小さい方からATOMS、MOLECULES、ORGANISUMS、TEMPLATES、PAGESの5段階で分割を行なっている。
そして、それぞれの役割が以下のようになる。

・ATOMS（基本的な要素である原子）
最も小さくこれ以上分解できない要素。
例）ボタン、アイコン、テキストボックスなど。

・MOLECULES（原子の組み合わせたグループである分子）
Atomを組み合わせて意味を持つデザインパーツ。
例）アイコンメニュー、プロフィール画像＋テキストボックスなど。

・ORGANISUMS（原子と分子の組み合わせて構成されるやや複雑な有機体）
AtomやMoleculeの組み合わせで構成される単体である程度の意味を持つ要素群
例）サイドメニュー、ブログなどの一つの投稿、ヘッダーなど。

・TEMPLATES（UIの骨組となる原子・分子・有機体のグループであるテンプレート）
ページのレイアウトのみを表現する要素。
例）Webサイトのヘッダー、フッター、サイドバー、レイアウト情報など。

・PAGES（実際の内容をテンプレートで組み込んだものであるページ(Pages)）
最終的に表示される一画面
例）ページ遷移毎に表示される各画面

##Atomic Designのメリットは？
コンポーネントとして使い回しが可能なのでコード量を減らせたりすることで、メンテナンス性が上がる。
デザインとコンテンツ内容を分離させることができる。


##最後に
個人レベルでしかアプリの開発はしていないのでマイルールでどの粒度に分類するかは融通をきかせて決められるが、大規模な開発となると全ての粒度を厳密に決める必要があるのかなと思いました。プロジェクトに途中から参加する際に既に決められたルールに従うためにも、今のうちにしっかりとAtomic Desigを意識した開発をして慣れる必要があると感じました。なので今後アプリを開発する際には最初からcomponetsディレクトリー配下にATOMS、MOLECULES、ORGANISUMS、TEMPLATES、PAGESを作って強制的に慣れていこうかと思います。

###追記
実際にAtomic Designを使って簡単なアプリを作ってみました。
一つ一つのコンポーネントの役割・意義は何か？ということを意識することがとても大切だと感じました。
この意識があるかないかで最終的なコードの可読性・メンテナンス性が左右されると思います。


参考記事

https://note.com/mhtcode/n/n49419507c9d1

https://www.weblab.co.jp/staff/creator/7352.html