OmniAICreator/Qiita-1.07M huggingface dataset:
Microsoft Azure でリソース作成するときに「無効なサブスクリプション」と出てしまった時の対処法

#概要

　普段はクラウドと関係のない組込み関連の仕事をしております。IoTの流れもありクラウドを学ぼうと**[Mcrosoft Azure](https://azure.microsoft.com/ja-jp/)**を使い始めたところ、表題にある問題が発生しました。

【実際の画面】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/1f97aa46-8e2a-d65c-de07-e5a295f206c0.png)

#原因調査

　まず、サブスクリプションの状態を確認してみました。
ネットで検索すると、[こちら](https://docs.microsoft.com/ja-jp/azure/cost-management-billing/manage/subscription-states)に情報がありました。

で、Microsoft Azureのportalにはいり、サブスクリプション状態を確認します。
ホーム画面からサブスクリプションを選択すると状態を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/88f3996e-9ada-a282-fc93-2feb58139808.png)

次の画像が確認した様子です。きれいに無効になっていますね👍

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/9e2ce2fc-f9e9-e7f7-15c3-deb2daf930dc.png)

さらに、この無効部分をクリックするとサブスクリプションの詳細を見ることができます。
次のような画面となりました。

「無料クレジットの期限が切れました。アカウントを維持するにはアップグレードしてください」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/cd941966-4ab2-7b9c-15ec-fdd1240f22e8.png)


#結果

つまり、Azureの無料アカウントは30日間なので、それ以降はアップグレードしないと使えないということ。
従量課金されるアカウントにしましょう。

#おわりに
　見落としていた...。クラウド難しい...。クラウドのインフラエンジニアさんが神様のように見える。

#参考サイト
[無効な Azure サブスクリプションを再度有効にする](https://docs.microsoft.com/ja-jp/azure/cost-management-billing/manage/subscription-disabled)
Vuexでストア内容の永続化を部分的に行う

## 方法
ストアの永続化にはvuex-persistedstateを使い、ストアのインスタンス生成時のplugins指定で``createPersistedState()``にオプションとして``paths``を付ける。
https://github.com/robinvdvleuten/vuex-persistedstate

```js
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
    paths: ['※パス']
    ...
  })],
});

```
※ パスはステート内のパスになります。
例：``namespaced: true``でモジュールとしてUser.jsを作成した場合は``'User'``


オプションの詳細は[API説明](https://github.com/robinvdvleuten/vuex-persistedstate#api)で確認ください。

## 参考にしたページ
https://stackoverflow.com/questions/55319006/making-only-one-module-persistent-with-vuex-persistedstate
calendarライブラリを利用して月終わりの日程を取得する

API開発の過程で手軽に12ヶ月分の月はじめ〜月終わりの日付を取得したいと思い、作ってみました。簡単に試せるように、入力値をYYYYMMで取得して変換できます。需要あるかわかりませんがお好みにカスタマイズしてご利用ください。

```
import sys
import calendar

print('please indicate you wanna retrieve monthly data')
input_data = input()

# validation
if input_data.isdecimal() == False:
    print('please input only numbers!')
    exit()
elif len(input_data) != 6:
    print('please input in 6 digits(like 202004)!')
    exit()

year = int(input_data[:4])
month = int(input_data[4:6])
first_day = '01'

def lastDayOfMonth(year, month):
    _, last_day = calendar.monthrange(year, month)
    return last_day

# output
def converter(year, month):
    print(f"{year}-{str(month).zfill(2)}-{first_day}, {year}-{str(month).zfill(2)}-{lastDayOfMonth(year, month)}")
    for i in range(0, 11):
        month -= 1
        if month == 0:
            month = 12
            year -= 1
        print(f"{year}-{str(month).zfill(2)}-{first_day}, {year}-{str(month).zfill(2)}-{lastDayOfMonth(year, month)}")

converter(year, month)
```



```
# 出力データ(202004と入力した場合)
2020-04-01, 2020-04-30
2020-03-01, 2020-03-31
2020-02-01, 2020-02-29
2020-01-01, 2020-01-31
2019-12-01, 2019-12-31
2019-11-01, 2019-11-30
2019-10-01, 2019-10-31
2019-09-01, 2019-09-30
2019-08-01, 2019-08-31
2019-07-01, 2019-07-31
2019-06-01, 2019-06-30
2019-05-01, 2019-05-31
```
Springで、特定の例外のみトランザクションをロールバックする / しない方法

# はじめに
Springの一般的なトランザクション管理において、
@Transactionalを使用するケースが多いと思いますが、
あまり知られていない？設定があったのでご紹介します。

## 概要
@Transactionalの属性にrollbackFor（特定例外でロールバックする） / noRollbackFor（特定例外でロールバックしない）が存在し、
これらを設定することにより特定例外によるロールバックの管理を行うことができます。
@Transactionalのjavadocは[こちら](https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/transaction/annotation/Transactional.html)

## 利用シーン
私はSpring Securityを利用した認証失敗時のアカウントロック処理に使用しました。

### サンプル

下記のサンプルにおいて、属性未指定の@Transactionalを指定していたらどうなるでしょう。
フレームワークが例外を検知して、ロールバックしてしまいます。（アカウントロックは無かったことに・・・）

```java
public class MyAuthenticationProvider implements AuthenticationProvider {

    @Autowired
    MyAuthenticationService myAuthenticationService;

    @Override
    @Transactional(noRollbackFor = AuthenticationException.class)
    public Authentication authenticate(Authentication authentication) throws AuthenticationException {

        // doAuthはアカウントロックなどのDB更新もする
        boolean isAuthenticated = myAuthenticationService.doAuth();
        
        // 認証失敗時は例外を投げる
        if (!isAuthenticated) {
            throw new AuthenticationException("認証失敗");
        }
        
        // ～認証成功時の処理は省略～
        
    }
}
```

## おわりに
今回のサンプルでは、Serviceに@Transactionalを付与するのも正解だと思います。
ただ、私の担当したシステムでは「1リクエスト=1トランザクション」というルールで、
Serviceに@Transactionalを付与することが難しい状況でした。

色々な制約下で開発している人がいるので、この記事が誰かの役に立てればと思います。
Flutter desktopで自分用Macアプリを作る

初投稿です．
以前Androidアプリをバイトで作っていたのですが，Macのアプリも作れるようになったため試してみます．

# Flutter
* １つのコードでiOS，Android両方動く．
* ボタンなどのUI要素もコードに含める．
* "Hot Reload機能"により，アプリのデバッグ中でもソースコードの変更を反映できる．


## 開発環境
* iMac (27-inch, 2019)
* Visual Studio Codeにて開発 

## Flutterインストール & Macアプリ開発の設定
1. [flutter公式サイト](https://flutter.dev/)の"Get Started"からインストールします．
1. このページ（[Desktop support for Flutter](https://flutter.dev/desktop)）を参考にデスクトップアプリ開発機能を有効にします．

## 作ったもの
今やりたいことを入力し，ランダムで決めてくれるアプリ．
* [制作物のGithubリポジトリ](https://github.com/qwertyrc/random_choice_app)
![RandomChoiceApp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590618/84271792-61b0-9455-1f17-d4329a9c1ec3.gif)


## 使ったライブラリ
* [rxdart](https://pub.dev/packages/rxdart) & [provider](https://pub.dev/packages/provider)
やりたいことリストのデータを複数のWidgetで共有するために使用しました．
rxdartはReactive Extentionsのライブラリで，
「やりたいことを入力するWidget -> Subject -> グラフなどの表示Widget」
 と，変数の更新を伝えることができます．
providerは親Widgetから子Widgetへ，上記のSubjectを持ったBlocインスタンスを渡すために使いました．

* [charts_flutter](https://pub.dev/packages/charts_flutter)
グラフ描画のために使用しました．
円グラフのほかにも，様々なグラフを描くことができます．
【Flutter】Dartにおける名前衝突の解決方法について

# 概要
あまり多くはないかもしれませんが、同じ名前のクラスを二つ作り
それぞれを同じファイルで使用しようとした場合、名前解決が出来ずエラーが起きます。

具体的には以下の様な場合です。

```dart:sample_a.dart
class Foo {
  final int value;
  
  const Foo(this.value);
}

class Bar {
  final int value;

  const Bar(this.value);
}
```

```dart:sample_b.dart
class Foo {
  final String value;

  const Foo(this.value);
}
```

```dart:main.dart
import './sample_a.dart';
import './sample_b.dart';

void main() {
// ここでコンパイルエラー
//  Foo(1);
}
```

この様な場合に、両ファイルで定義されているのは `Foo` クラスです。
`main.dart`としては、どちらの`Foo`を使って良いかわかりません。

こんな時に名前解決をする手段は二つあります。

# showキーワードを使う

実は、`sample_a.dart`をimportしたのは`Bar`クラスが使いたかっただけ。
そんな時はこちらの解決策が有効です。

```dart:main.dart
import './sample_a.dart' show Bar;
import './sample_b.dart';

void main() {
  Foo("1"); // コンパイル出来る
}
```

この様にすると、mainにはBarしか読み込まれず、無事にFooが解決出来ます。

# asキーワードを使う

両方のFooクラスを使いたい！
そんな時はこちらの解決策が有効です。

```dart:main.dart
import './sample_a.dart' as a;
import './sample_b.dart';

void main() {
  var a = a.Foo(1);
  var b = Foo("1");
}
```

この様に名前空間の様なものを定義する事が出来ます。
これで無事に名前解決が出来ます。

誰かのお役に立てば。
Hugoで「折りたたみ」を作る方法

設定ファイルを変更する

```config.toml
[markup.goldmark.renderer]
      unsafe = true
```

.mdファイル
> \<details\>
> \<summary\>タイトル\</summary\>

> \`\`\`bash
> $ echo Hello
> \`\`\`

> \</details\>


## 参考
[Details tag for collapsible section not working in 0.64.0 ](https://github.com/gohugoio/hugo/issues/6865)
OSSとクラウドで作るシストレDevOps

# シストレ＝システムトレード
機械学習がもてはやされる以前より、ExcelやVBA等のデータ集計ソフトウェアを活用し、
金融商品の優位性のある売買方法を見つけ出して、人の裁量を極力排除した形でシステマチックに
運用する投資手法＝システムトレードは、個人の間において知る人ぞ知る形で取り組まれていた。

昨今、pythonのpandas、jupyter notebookをはじめとするデータ分析ライブラリ・ソフトウェアの流行に伴い、　　
その活用のネタとして金融時系列データが使われることも珍しくなく、システムトレードやアルゴリズムトレードという 
言葉は身近になったように思う。

Qiitaにも[システムトレードタグ](https://qiita.com/tags/%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0%e3%83%88%e3%83%ac%e3%83%bc%e3%83%89?page=1)が登場し、これに関連した技術を語る人も増えてきた。
また、[機械学習による株価予測　いろはの”い”](https://qiita.com/blog_UKI/items/25dc1c2559c61890a449)、[ディープラーニングでFXシステムトレード](https://qiita.com/ryo_grid/items/7746528f8cae8026b936)のように、かなり専門的な投稿も見られ、　
これまで以上に興味を持つ人も増えてきたのではと思われる。

私もシストレに興味を持つ1人だ。

前置きはこのくらいにして
本稿では、個人で取り組み可能なシストレを開発するためのシステム基盤や、運用を回すための仕組みについて、想像を膨らました考えを紹介しようと思う。


# シストレDevOps
いきなりシステム構成図を貼ってみる。
![シストレDevOps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121442/2b8649bb-5d87-8ee9-2632-98954c868d32.png)

こんな感じでどうだろうか。
[Shopify] 4月の更新をまとめました

開発タスクなどに埋もれ・・窒息状態のため更新が遅れてしまいました・・

そして、4月も一瞬で終わりましたね。4月ってどうでした？と聞かれたら、コロナ・・。もう・・それだけ・・

でしたが、2020-04バージョンのGAリリースなど、Shopifyの更新（API周り）はありましたのでまとめます。

# 04/22/2020 プランのポーズ（一時停止）機能の一部変更

プランの一時停止に一部変更があります。新たに3ヵ月間プランをプランを一時停止することができます。リリースしようと思っていたストアーがリリース延期（涙）となった時も3ヵ月ストアを一時停止することができます。（お金払わなくていい）

一時停止中はアプリなどはインストールされた状態となりますが、アプリの利用などはできません。

# 04/17/2020 `DraftOrderAppliedDiscountInput`にて`amount`を指定する必要がなくなりました

DraftOrderAppliedDiscountInput (仮オーダーに対しての割引オブジェクト）を作成する際に、以前はamount（金額）を指定する必要がありましたが、必要なくなりました。ValueとValueTypeからよしなに計算してくれます。

詳細はこちら
https://shopify.dev/docs/admin-api/graphql/reference/mutation/input-object/draftorderapplieddiscountinput

# 04/14/2020 ストアーデザイン（開発用プレビュー版）が更新されました。

開発用プレビュー版にてストアーデザイン機能が増強されました。
開発用プレビューに関してはこちら参照ください。
https://help.shopify.com/en/partners/dashboard/managing-stores/development-stores#developer-previews

新たにCart, Password, 404 ページでも利用できるようなっています（対応しているテーマであれば）。これらのページでセクションを編集することが可能です。
詳細はこちらを参照ください。
https://shopify.dev/tutorials/develop-theme-edit-store-with-online-store-design

セクションを描画するAPIを使うとセクション単位でHTMLコンテンツを取得して表示することができます。パーツごとに描画することによってページパフォーマンスが向上されます（正しく設計すれば）。
詳細はこちらを参照ください。
https://shopify.dev/docs/themes/sections/section-rendering-api

よりモジュール化されたデザインプロジェクトの場合はwrapperプロパティーを使い、wrapper内のHTMLを指定し管理することができます。 wrapperに関してはまた別途まとめたいと思います。
先に詳細を知りたい方はこちらを参照ください。
https://shopify.dev/docs/themes/sections/theme-frames#the-wrapper-property

Section内ではtext input や URL picker を下記のよう使うことができます。

```
{
   "type":      "text",
   "id":        "id",
   "label":     "Text",
   "default":   "value",
   "info":      "Text",
   "placeholder": "Text"
}
```
開発用プレビューに関しては、特設フォーラムがありますのでこちらで質問などなど参加してみてください。
https://community.shopify.com/c/New-Online-Store-Design/bd-p/storedesign

# 04/09/2020 アプリマーケット内の表示優先順ロジックに変更がありました。

より最近のコメントやレートを参考に順番を決めるそうです。

# 04/01/2020 Shopify access token のサイズが32文字から38文字になりました。

パブリックアプリの場合は shpat_ カスタムアプリの場合は shpca_がアクセストーケンの前に付与されるようになりました。特に影響はないと思いますが、一応お知らせまでに。

# 04/01/2020 関税に関するAPIが開発用プレビューでリリースされました。

越境ECをやっている方対象に、関税を設定できるようになりました。開発用プレビューとなりますので、開発用ストアーにて一度お試しください。
詳細はこちらを参照。
https://shopify.dev/tutorials/refund-shipping-duties


# 2020/04/01 API 2020-04 バージョンが一般（GA）リリース

もうすでに利用されている方が多いようですが、2020-04バージョンが一般リリースされました。
リリースノートはこちら
https://shopify.dev/concepts/about-apis/versioning/release-notes/2020-04

次回はぜひこのリリースノートも日本語で紹介したいと思います。
vue-cliで環境ごとに異なる静的ファイルをコピーする

 　最近地味に困ってあれこれ調べたことの記録です。

# public配下においた静的ファイルをビルド対象によって切り替えたい

　`vue-cli`のプロジェクトで静的ファイルを`public`配下に置いていたのですが、`production`で切り替えたい事案が発生しました。具体的には`vue-router`でhistoryモードを使っていたがために`.htaccess`を置いていたのですが、開発環境ではサブディレクトリでデプロイ先が切られていたために、ルートディレクトリを指定したかったのです。

```text:public/.htaccess
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /test/ [L] <-- 本番では / にしたい…
</IfModule>
```

　最初ここに`<%= PUBLIC_PATH %>`とか書いてみたのですが、そのまま文字列として出力されてしまいました。どのみちAPIのスタブJSONとかも置いていたので、これらが出力されるのも困るのでこの方法は早々に諦めました。手動でビルドしたファイルを毎回編集したり削除したりするのは死んでも嫌だったので、`vue-cli`先生にはそのくらいの気は利かせてくれるようにしたいと思います。

　「そもそもここに`.htaccess`置くな」と言われれば最もだとは思います。スタブもjsonじゃなくてexpressとかでやった方がスマートではあるのですが、まぁそれはそれとして…。

# ビルドモードごとに異なる静的ファイルを参照させる

　`public`配下に静的ファイルを置くのではなくて、ビルド時に環境ごとに用意したディレクトリから静的ファイルを配置するように変えてみます。

## ディレクトリを用意する

　特に指定された箇所があるわけではないので、自分で `src/static/`ディレクトリを作成し、その中で環境ごとにそれぞれサブディレクトリを掘ります。今回は本番環境とそれ以外の環境で分けたかったので、`src`配下に以下のようにディレクトリを切りました（不要なところは省略）。

```terminal
% tree -d  
.
├── static
│   ├── develop
│   └── production

```

　各ディレクトリに、それぞれビルド時にコピーしたいファイルを配置していきます。

## プロダクションと開発環境のビルドを分ける

　`npm run build`だと`production`でビルドされるので、`develop`用のビルドコマンドを追記してそれぞれにビルド出来るようにします。

```json:package.json（抜粋）
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:develop": "vue-cli-service build --mode develop", <--追加
    "lint": "vue-cli-service lint"
  },
```

　`.env`もそれぞれ用意しておきます。

```:.env.production（抜粋）
NODE_ENV=production
```

```:.env.develop（抜粋）
NODE_ENV=development
```

　これで`npm run build:develop`を打ったときには、`development`でビルドしてくれるようになっているかと思います。

## ビルドモードに応じたディレクトリ内容を`dist`へコピーする

　`vue-cli`はデフォルトで`public`からコピーするようになっているようですが、先程追加したディレクトリからビルドモードに応じたファイルをコピーするように追記します。前述のように`production`かそれ以外かで分けられれば今回はOKだったので、以下のように追記しました。

```javascript:vue.config.js（抜粋）
const isProduction = process.env.NODE_ENV === "production"; // <-- productionビルドかどうかを判定
const path = require("path"); // <-- ディレクトリ操作をしてなければ追記

module.exports = {
  assetsDir: "assets",
  lintOnSave: false,
  chainWebpack: config => {
    // 静的ファイルのコピー処理
    config.plugin("copy").tap(args => {
      args[0].push({
        from: path.resolve(
          __dirname,
          isProduction ? "src/static/production" : "src/static/develop" <--先程作成したディレクトリをそれぞれ指定
        ),
        to: path.resolve(__dirname, "dist"),
        toType: "dir",
        ignore: [".DS_Store"]
      });
      return args;
    });
  },
};
```

コピー処理は以下を参照して記述しました。
https://stackoverflow.com/questions/60304092/how-to-copy-assets-with-vue-cli-service-build-command

# ビルドしてみる

　`npm run build`時には`src/static/production`内が出力され、`npm run build:develop`では`src/static/develop`が出力されるようになっているのが確認出来ればOKです。今回はproductionか否かしか判定していませんが、環境がもっと増えた場合は判定を追加すればコピー元ディレクトリもそれぞれに用意出来るかと思います。
java(ソースファイル分割)

##元のソースファイル
```java
public class Calc {
    public static void main(String[] args) {
        int a = 10; int b = 2;
        int total = tasu(a, b);
        int delta = hiku(a, b);
		System.out.println("足すと" + total + "、引くと" + delta);
	}
    public static int tasu(int a, int b) {
	    return (a + b);
	}
	public static int hiku(int a, int b) {
	    return (a - b);
	}
}

```

##複数のクラスに分割

main() と tase(),haiku()でファイルを分割

```java
public class Calc {
    public static void main(String[] args) {
        int a = 10; int b = 2;
        int total = CalcLogic.tasu(a, b);
        int delta = CalcLogic.hiku(a, b);
		System.out.println("足すと" + total + "、引くと" + delta);
	}
}
```
`CalcLogic.`を追加しないと読み込まれない


```java
public class CalcLogic {
    public static int tasu(int a, int b) {
	    return (a + b);
	}
	public static int hiku(int a, int b) {
	    return (a - b);
	}
}
```
`tase()、haiku()`を移動する
【DBエラー解決】Error: Duplicate column name ''"

#はじめに
$ rails db:migrate　した際にDBには反映されているがエラーが起こっている解決策について調べたのでまとめました。


#今回の状況

$ rails db:migrate
⬇︎
エラー発生
⬇︎
エラーなのにDBにはカラムが反映されている


#エラー内容

```
andardError: An error has occurred, all later migrations canceled:

Mysql2::Error: Duplicate column name '' ・・・・・
・
・
・
・
```

これはカラムが重複していますと言うエラーだそうです。


#解決策

command + f でmigrationファイルの中身を空にする。

```
class AddCategoryToItems < ActiveRecord::Migration[5.2]
  def change

   ここを空にする

  end
end
```

空の状態で　$ rails db:migrate　すると通る。

command + f で切り取ったコードをペーストしてもとに戻しておく。

以降　$ rails db:migrate　してもエラーになりません！

#まとめ

Mysql2::Error: Duplicate column name ''

このエラーはカラムが重複していますよと言うエラー内容でした

migrationファイルを空にしてから　$ rails db:migrate

その後migrationファイルの中身はもとに戻しておく。
【Docker】Dockerについて

Dockerについて様々なサイトを参考にさせていただき、あくまでも自分の備忘録としてまとめました。
なのでわかりやすく書いてはいないので詳細を知りたい方は参考URL欄にあるリンクに飛ぶようお願いします。

#image
コンテナを起動するのに必要な設定ファイルをまとめたもの。
「imageはコンテナの元であり、imageからコンテナを起動する」と理解すると良いと思います。

・イメージの構造
一度作成されたイメージは読み取り専用であり、イメージからコンテナを起動した際に作成されるコンテナレイヤーのみが編集可能になっている。
イメージレイヤの内容を変更する際は変更対象のレイヤを１度コンテナレイヤにコピーしてから変更内容を反映する。これを`コピーオンライト`と呼ぶ。

また同一のホスト上で動く複数のコンテナがある場合はイメージレイヤを共有することができます。
これにより、ホストのストレージ容量の圧迫を抑制することができる。

#Dockerfile
Dockerfileはコンテナの構成情報を定義したファイル。
何回もDockerコマンドを打たなくても１回コマンドを打てばDocker imageを生成できる。
Dockerfileからベースイメージを作成することを`ビルド`といい、Dockerコンテナからイメージを作成することを`コミット`と呼びます。

#Dockerにおけるデータ管理
起動したコンテナ内で扱う動的なデータは、読み書き可能な最上レイヤー（コンテナレイヤー）に置くことも可能ですが、
→コンテナが削除された時点でそのコンテナ内のデータは消える
→コンテナ間でデータ共有できない
→コンテナレイヤーへのデータ書き込みは、通常のファイルシステムと異なるユニオンファイルシステムが使われているため、書き込み速度が遅いというデメリットがあり、Dockerではホストマシン上にデータを管理し、それをコンテナにマウントする方式がとられている。

#volume
ホストマシン上に自動生成される指定ディレクトリをコンテナにマウントする手法。

#コンテナの性質
コンテナはホストOS上のプロセスとして扱われます。なのでデータ処理が途中で削除されるとデータが保存されないようにコンテナが削除されるとデータは保存されず再度起動しても削除前のデータが戻りません。このような性質のことを『ステートレス』といいます。

一方、コンテナが削除されてもボリュームがあればデータを残すことができます。
データをコンテナの削除から退避させることを「データの永続化」といいます。また、コンテナが削除されても退避していたデータに引き続きアクセスできることを「ステートフル」といいます。

Dockerではコンテナを明示的に削除しない限りデータは保持されます。（一時停止や停止コマンドではデータは保持される）

#複数のコンテナの管理方法
Dockerには『１つのコンテナが扱うプロセスは１つのみ』という考え方があります。
２つの異なるプロセスを１つのコンテナに内包した場合に片方のプロセスにアップデートがあった場合にもう片方のプロセスにも影響が出てしまうためです。

#Dockerネットワーク
複数立ち上げたコンテナ間を通信する方法。
例えば、Webページの運用を行う場合、WordpressコンテナとMySQLコンテナを立ち上げとすると、WordpressコンテナはMySQLコンテナと通信する必要があります。
その手段としてDockerネットワークが使用される。

##Bridgeネットワーク
デフォルトで存在するネットワークで、作成されたコンテナがデフォルトで接続されるのがbridge network。
同じネットワーク内に存在するコンテナとIPアドレス指定で通信はできるが、DNSが定義されていないのでコンテナ名では他のコンテナには通信できない。

##独自ネットワーク
独自のネットワークを作成することで、コンテナ名でコンテナ通信が可能になる。

#Docker Compose
Docker Comaposeは複数コンテナのDockerアプリケーションを事前定義して実行するためのツール
またWebサービスの実行環境をDockerで構築している場合にWebサーバー、DBサーバー、Cacheサーバーなどの定義を１つのdocker-compose.ymlファイルに記述しておくことによって、それを元に実行に必要なコンテナをまとめて起動・設定することがでそれを元に実行に必要なコンテナをまとめて起動・設定することができる。

#Docker Machine
Docker Machineは、Docker Engineを搭載した仮想マシンの管理（作成、起動、停止、再起動など）をコマンドラインから実行できるツール。
Mac OSの場合は、仮想化ソフト（Virtul Box）をドライバーに使用して、Docker  Engine を搭載した仮想マシンを管理するのがDocker Machineです。

#AWSにDockerを組み込む
Docker Machineを使用してlocalのコマンドラインからAWSやGCPなどにDocker Engineを搭載した仮想マシンを作成・管理する。

#DockerSwarm
複数台のDockerホストマシンの間でコンテナ間通信の設定・管理を自動化する手法の１つ。
Docker Swarmには動作モードの１つとしてSwarm Modeがあり、下記を持ちます。
・クラスタ管理機能：複数台のマシンをネットワーク接続してひとまとまりのシステムとして管理する機能。
・オーケストレーション機能：複数のマシンを自動で管理する機能（負荷分散、コンテナ起動など）

###まとめるとDocker Swarmは、
・Dockerホストマシン同士をネットワーク接続する
・その上で「複数のホストマシン」と「その中で動作するコンテナ達」を管理・運用する様々な機能を提供する

##参考URL
【図解】Dockerの全体像を理解する -前編-
https://qiita.com/etaroid/items/b1024c7d200a75b992fc
コンテナにもエンジンが必要! ―その代表格と言える「Docker」とは
https://thinkit.co.jp/article/17349
ESLint（Standard Styleなど）とPrettierを快適に共存する in VS Code

**2020/7/6 本記事に記載している方法は今はもううまく動かないです。
今ESLint＋Prettierを一緒に使うなら以下を使って.eslintrcを編集するしかなさそうです。**
https://github.com/prettier/eslint-config-prettier
https://github.com/prettier/eslint-plugin-prettier


# はじめに
PrettierとESLintを共存させる方法としては`eslint-config-prettier`を使用する方法が[Prettier公式で紹介](https://prettier.io/docs/en/integrating-with-linters.html)されていますが、ESLintとPrettierでルールが競合した場合Prettierが優先されてしまうため、Standard Styleなどのセミコロンレスが実現できません。

以前に[似たような環境構築記事](https://qiita.com/LeftLetter/items/319cf1526b2fc5d5e775)を書いたのですが、プラグインのアップデートで非推奨となった機能も使用していたため、その最新版としても記します。


# 実現したいこと

* PrettierとESLintを共存させる。この際、Prettier→ESLintの順でかけることでなるべくESLintの設定を反映させる（セミコロンレスなど！）
* Ctrl+Sで保存したら即フォーマットされる

# 事前準備
* PrettierとESLintが`npm i -D`されており、好みの設定になっている

※本記事ではPrettierは初期設定、ESLintはStandard Styleそのままでやっています。

# 必要な設定

## 拡張機能のインストール
以下の2つをインストールします。

* dbaeumer.vscode-eslint
* esbenp.prettier-vscode

.vueファイルにも適用したい場合は以下も。

* octref.vetur

## VS Codeの設定ファイルの編集
`settings.json`に以下を追記します。

```json:settings.json
"editor.formatOnSave": true
```

.vueファイルにも適用したい場合は以下も。

```json:settings.json
"vetur.format.defaultFormatter.js": "prettier-eslint"
```

※この方法でやる場合、ESLintでよくやる以下の設定は不要。

```json:
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
```


## モジュールのインストール
Prettier→ESLintの順でかけるためのモジュールです。

```
npm i -D prettier-eslint
```

詳細は以下をご参照ください。
https://github.com/prettier/prettier-eslint


# 結果
こんな感じの汚いファイルを保存すると・・・

```vue:App.vue
<template>
  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App"             />

  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue"

const a = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
console.log(a);

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {

  font-family: Avenir, 
  Helvetica, Arial, sans-serif;
}
</style>
```
↓こう！

```vue:App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

const a =
  'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
console.log(a)

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>
```

HTML、CSS部がフォーマットされつつ、ESLintのStandard Styleが採用され、セミコロンが消えていることがわかります。また、Prettierによって長い文字列が改行されています。

# 留意点
* この方法では拡張子が.jsでないと効きません。.jsがついていないファイル（express-generatorで生成した`bin/www`など）は拡張子をつけてあげる必要があります。
* 設定してもうまくいかない場合はVS Codeを再起動したり、ちょっと待つと反映されると思います。
* 今のところ自前のいくつかの環境では動いています。

# おわりに
JavaScriptはセミコロンがない方が好き。でもESLintの設定カスタマイズなんかしたくない。
SPA + WEB API のCSRF対策とCORSについて

この記事は`SPA + WEB_API`で構築するWEBサービスのセキュリティの脆弱性を考える時に必ず出てくる、CSRF対策やCORSの考察をした記録です。
SPAでWEBサイトを構築する方、または既に持っていて脆弱性がないか調べている時にお役に立てる内容となります。

CSRFについてはこちらのサイトがとてもわかりやすいです。
https://qiita.com/okamoai/items/044c03680766f0609d41


# 大前提

ブラウザで非同期通信を行う際には、同一生成元ポリシー(Same Origin Policy)によってWebページを生成したドメイン以外へのHTTPリクエストができません。

**SPA + WEB_APIのパターンなど異なるドメインのリソースにアクセスしたいという需要があります**
→ 昔はJSONP使ってたがセキュリティだめ
→ より手軽に、より安全にクロスドメインアクセスを実現したいという要求に応えるために作られたのがCORSという手法

## CORSの設定方法

- クロスドメインアクセスされるサーバー側（=API)でアクセスを制御するルールを設定
- ブラウザとサーバー側でHTTPヘッダを使ってアクセス制御に関する情報をやりとりしながらドメインをまたいだアクセスをする
- サーバー側で設定するアクセスを制御するルールは下記
    - クロスドメインアクセスを許可するWebページのオリジンサーバーのドメイン(通常SPAドメインを指定）
    - 使用を許可するHTTPメソッド（GET,POSTなど）
    - 使用を許可するHTTPヘッダ

### 実際の設定例
- AWS S3

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://sample-domain.cdn.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
```

- Rails API `rack-cors使用`

```
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins Rails.application.config.x.cors_allowed_origins

    resource 'sample-domain.cdn.com',
             headers: :any,
             methods: %i[get post put patch delete options head]
  end
end

```

### CORSのチェックはどういう時に行われる？

- 非同期かつクロスオリジンリクエストの場合のみ行われる、`プリフライトリクエスト` でCORSチェックを行う。http methodは `OPTIONS`

- 必ずプリフライトリクエストを伴うようになっていればよいということ。（非同期でのoriginヘッダーの偽装はできない）

- プリフライトリクエストが起こらない単純リクエストというのもある。
    - https://developer.mozilla.org/ja/docs/Web/HTTP/CORS 参照：「アクセス制御の例 」

- SPA + APIのパターンでは `Content-Type: application/json` にすることが多い。→ 原則としてプリフライトリクエストを伴う。

- API側でリクエストの受付をapplication/jsonのみにしておくと確実である。

### CORSのチェックが行われない場合はどういうとき？

- 同期リクエスト（curlなどでAPI叩いたり、ブラウザの標準リクエスト）

- この場合CORSチェックを伴わないAPIリクエストが可能になってしまう == **CSRF攻撃が可能**

## CSRF対策
同期API直リクエストや非同期の単純リクエストの際に起こりうるCSRF、その対策はどうすれば良いか？

#### それぞれのリクエストの特徴がある!

非同期リクエスト
- カスタムヘッダを追加できる
- プリフライトリクエストを伴うことが可能

同期リクエスト
- カスタムヘッダの追加が不可能（標準ヘッダの変更しかできない）

#### 対策方法

CSRF対策はいくつかの方法があります。

1. CSRFトークンを使用した方法
2. プリフライトリクエストとカスタムヘッダを使用
3. Cookieの `SameSite` オプションを使用

3については下記サイトをご参照ください。ここでは主に2の方法を説明します。
https://qiita.com/okamoai/items/044c03680766f0609d41

##### 2. プリフライトリクエストとカスタムヘッダを使用

- 同期リクエストはそもそもできなくしたい
    - → APIサーバーでカスタムヘッダの検証をさせ、非同期リクエストではカスタムヘッダを付与してリクエストする。同期リクエストはカスタムヘッダの追加ができないので全て防ぐことが可能。
    - → カスタムヘッダを下記のようにすることで **1. CSRFトークン** も合わせて可能 

```
# APIで生成し保存されているユーザー固有のランダム文字列
request.headers: { x-csrf-token: 'ランダム文字列', ... }
```

- 非同期リクエストへの対応
    - → APIでapplication/jsonのみ受付け可能にする ＝ プリフライトリクエストが必ず行われる
    - → APIでCORS設定を行う（許可したオリジンアクセスのみリクエストできる）


## あとがき

WEB API + SPA パターンは先行してWEBを作成、後追いでアプリを作る場合などにもよく使われます。
最近ではかなり案件数も増えている構成なので、これを気にちゃんと勉強できてよかったです。


ここまで読んでくださいまして、ありがとうございました！
誤りなどあれば、問題になることもあると思いますのでご指摘いただけると幸いです！


### 参考にさせていただいた記事

[Web API の CSRF 対策まとめ【追記あり】](https://qiita.com/okamoai/items/044c03680766f0609d41)
[MDN WEB Docs オリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
100人規模の学生団体にSlackを導入した話

# はじめに
今年の2月から、所属している国際交流系団体でビジネスチャットツールであるSlackを導入し、運用しているので、そのtipsを共有できればと思いこのような記事を書きました。導入の手順も書くので、これからSlackの導入を考えている学生団体の方々にとって参考になれば幸いです。少し長いですが、最後までお付き合いいただければと思います。

# そもそもSlackって何？？
端的にいうとビジネス向けの「チャットツール」です。チャンネルがコミュニケーションの場になります。ファイル、メッセージを簡単に共有できるため業務を効率化することができます。また、チャンネル内での情報がオープンなため、組織的が拡大したとしてもその文化を維持していくことが可能です。さらに詳しくは [こちら](https://slack.com/intl/ja-jp/help/articles/115004071768-Slack-%E3%81%A3%E3%81%A6%E4%BD%95%EF%BC%9F-) をご覧ください。

# 導入経緯
弊団体には3つの部署があります。これまでは、それぞれがLINE グループを作りそこで業務内容のやりとりをしていました。そこで以下の問題点を感じました。
・ 後からグループに入った時に、トークの履歴が見れない。
・ 部門間で共通の業務があるにも関わらず、他部門がどんな業務をやっているのか把握するのが難しい。
・ 業務単位でもグループを作るのでグループの数が多くなってしまう。
・ プライベートでも使っているツールなので情報の取り扱いに不安が残る。

これらを解決するためにSlackの導入をしてみてはどうかという提案をして、導入に至りました。

## 導入におけるメリット、デメリット
これはあくまで主観的な意見になります。
### メリット
・ 他部門の業務を把握しやすい
・ データの共有が楽
・ 後からチャンネルに入っても、履歴を確認できる
・ 代表が情報をコントロールしやすい
などなど

### デメリット
・ 馴染みがないので使ってもらえるか怪しい
・ 柔軟にメンバーの管理や、チャンネルの管理をする人が必要になる
・ 情報系の知識がある人が必要になる

# 導入手順
ここからは、自分がどのように導入したかについてお話しできればと思います。ツールについての説明というよりは、団体でどう動いていくかを説明していきます。Slackの導入などは既に済んでいる状態で話を進めます。Slackのはじめ方は[こちら](https://slack.com/intl/ja-jp/help/articles/217626298-Slack-%E3%81%AE%E3%81%AF%E3%81%98%E3%82%81%E6%96%B9-%E2%80%94-%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E4%BD%9C%E6%88%90%E8%80%85%E7%B7%A8)を参考にしてください。

## 環境
・ ワークスペース作成済み
・ 学生代表、部門代表のみSlackに参加済み
・ 組織の全体像が分かっているSlack運営者2人以上

## 1. 必要なチャンネルの洗い出しと作成
各部門ごとに何のチャンネルが、どういった目的で必要なのかを書き出してみましょう。そこから本当に必要なチャンネルを作成していきましょう。
併せて、他の学生にどういったチャンネルがあるか共有するために、一覧を作りましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256549/f83a26ca-f3a7-52c0-8ec2-49b4c73ef325.png)


### 1.1  まず運営側が1~2週間業務のやりとりをSlackで行なってみましょう
そもそも先輩や、上の役職の人が使えていないと後輩も使いにくいので、試行錯誤しながら業務のやりとりをして慣れておきましょう。  

## 2. Slackを使う上でのルールを決める
Slackはコミュニケーションを取る場所なので、ある程度の使用ルールは決めておいた方が良いです。以下に、自分が提示したルールを例として載せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256549/c2428a28-87d7-334e-79b0-861bd61f4253.png)


などなど。弊団体では、業務に関する会話をDMで行わないように口を酸っぱくして言っています。各部門がどういった業務を確認しやすくするためです。

## 3. 団体内に向けて広報を行う
ここから団体メンバーに使ってもらえるようにする地道な作業が待っています(苦笑)
どこの団体にも多くの人が集まる会議やタイミングがあると思うので、そこでスライドを用いてSlackに関しての広報を行います。そこでは以下のような内容を話しました。
・ Slackとは何か？
・ 団体内での解決すべき課題、それを解決するためにSlackを使うこと
・ Slackを導入するメリット、デメリット
・ Slackのインストールをしてもらう

〜 団体メンバーをSlackに招待 〜

・ 各部門の人が入るべきチャンネル一覧
・ 使用上のルール
・ Slackの使い方(主にメンション機能)を練習してもらうために、チャンネルを作り、団体メンバーに参加してもらう。そこで練習時間を設ける
・ わからないことがある時に、誰に聞けばいいかわかるようにSlack管理者を伝える

これらが完了した段階でSlack導入の8割が終わりです！残りの2割は何をすればいいの？という疑問のこの後お答えしたいと思います！

## 4. Slackに親しみを持ってもらう(難しい)
残りの2割です。これには様々な方法があると思います。各々の団体がやりやすい方法で行なっていただくのが一番かと思います！
弊団体では、一人一人に名前スタンプを作成しました！疏通確認や雑談でも使えるためです！また、スタンプの作り方も教えることで一部の後輩が積極的にスタンプを作りSlackの会話を盛り上げてくれました。

以上がSlackの導入手順になります！割とざっくり書いていますが、安定して運営できるようになるまで2ヶ月もかかりました、、、(涙)
もう少し効率よくできた部分もあるので、その部分を今後記事にできたらと思います。

# 終わりに
長く、稚拙な文章を最後まで読んでいただき本当にありがとうございます。こう言った記事を書くのが初めてのため至らない部分が多々あると思いますがご容赦ください。こうした方が良かったんじゃない？や自分たちの団体ではこうしたよ！などのコメントをいただけたら幸いです。
最後までお付き合いいただきありがとうございました。
1秒でも早く表示したい！Webサイトのパフォーマンス改善

せっかく作ったWebサイトも、なかなか表示されない！イライラする！となると、
閲覧しているユーザの離脱につながってしまいます。

今回は、お手軽にWebサイトのパフォーマンス改善する方法を紹介します。

## 『画像は減色』して軽くしよう
重たい画像をそのまま使ってないですか？
javaScriptのチューニングや、CSSをコンパクトにと、他にも色々試しても変わらない時は、
画像の減色を試してみましょう。
特にモバイル向けのサイトで力を発揮しますよ。

https://tinypng.com/
![tiny20200513.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273801/a02375c3-a491-8990-7347-f03972cea8a5.png)
## 使い方
このサイトに減色したい画像をドラッグアンドドロップするだけの手軽さです。
この記事の画像も**742KB　→　200KB**と大幅に軽くなりました！

他にも減色を無料で出来るサービスはありますが、tinypngは減色したとあまり感じさせずに軽量化できておすすめです。


他にもおすすめの減色サービスがあればぜひ教えてください！
【UiPath】テキストを1行ずつ取得する

# [繰り返し (コレクションの各要素) (For Each)] アクティビティ を使う

![captcha1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271563/9fa93822-3315-ae24-e57a-6647e3c5fb41.png)

# コレクションに File.ReadAllLines() を指定する

![captcha2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271563/0e2e9f44-d41b-cbdb-434b-8b666527c934.png)

File.ReadAllLines()には引数の異なる２つのメソッドが用意されている。

- ReadAllLines(String) 
- ReadAllLines(String, Encoding) 

File.ReadAllLines() の詳細に付いては[このリンク](https://docs.microsoft.com/ja-jp/dotnet/api/system.io.file.readalllines?view=netcore-3.1)を参照

File.ReadAllLines() を実行すると、ファイルのすべての行を含む文字列配列が返却されるので、 [繰り返し (コレクションの各要素) (For Each)] アクティビティのコレクションに指定することで、要素に指定された item に各行のテキストが格納される。 


ネットで実現する方法を検索した際、[このような](http://rpa-navi.com/archives/1020)記事を目にしたが、かなり冗長的なコード（？）の印象を受ける。

世間では RPA はノンプログラミングで誰でも使えると喧伝されているようだが、プログラミング経験者でないと勘所がわからず、メンテナンスしづらい冗長的なシナリオとなり、結果的に RPA は使えないとの結論になってしまうのだろう。
【Udemy Python3入門+応用】　61. 辞書内包表記

**※この記事はUdemyの
「[現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル](https://www.udemy.com/course/python-beginner/ "現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル")」
の講座を受講した上での、自分用の授業ノートです。
講師の[酒井潤](https://twitter.com/sakaijun "酒井潤")さんから許可をいただいた上で公開しています。**

##■辞書内包表記
#####◆普通に記述した場合
```python
week = ['Mon', 'Tue', 'Wed']
drink = ['coffee', 'milk', 'water']

d = {}
for x, y in zip(week, drink):
    d[x] = y

print(d)
```
```:result
{'Mon': 'coffee', 'Tue': 'milk', 'Wed': 'water'}
```

#####◆辞書内包表記で記述した場合
```python
week = ['Mon', 'Tue', 'Wed']
drink = ['coffee', 'milk', 'water']

d = {x: y for x, y in zip(week, drink)}

print(d)
```
```:result
{'Mon': 'coffee', 'Tue': 'milk', 'Wed': 'water'}
```
【初心者向け】ニューラルネットワークの「重み」と「バイアス」ってなんで必要なの？

#〇 ニューラルネットワークの「重み」はなんで必要なの？
![Twitter用.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/01173f14-84e1-f515-6cda-0f659b2d561a.jpeg)

【結論】
重みを変化させたらグラフが変化します。
　▷重みの値を大きくしたら、活性化関数のグラフは急になっていく
　▷重みの値を小さくしたら、活性化関数のグラフは緩やかになっていく

【解説】
1つの入力ニューロンが順伝播するシンプルな例を考えました。
活性化関数にはSigmoid関数を使用しました。

最初の計算では、出力 y は線形（まっすぐ線）なグラフになります。
　▷　y=wx+b

その結果を活性化関数に通すと、非線形（ぐにゃぐにゃ線）なグラフになります。
　▷　y'=1/(1+(-y))

重みの値を変化させたら、グラフの形が変化していくことが分かります。


![3FAB52D9-CB24-4667-B66D-D751E4AA4235.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/07e04525-0abf-69e8-4503-de1ed295bdd1.jpeg)




#〇 ニューラルネットワークの「バイアス」はなんで必要なの？
![Twitter用.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/d366611c-445b-e064-67aa-166dfa25e2b7.jpeg)

【結論】
バイアスを変化させたらグラフが変化します。
　▷バイアスの値を大きくしたら、活性化関数のグラフは右（プラス）方向に平行移動していく
　▷バイアスの値を小さくしたら、活性化関数のグラフは左（マイナス）方向に平行移動していく
![IMG_0485.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/0bc7742d-626a-b596-be72-c5176b434af4.jpeg)



#まとめ

重みとバイアス（あわせてパラメータ）の値を変えると、グラフの形を自在に変化させることができます。

機械学習ではこれを自動で行ってくれて、理想のグラフに近づけていきます。

#人工知能/AI/機械学習をもっと詳しく

![Youtube宣伝画像.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458623/3ea56f6c-6abb-e13c-4300-ef2d9a6f4d8b.jpeg)

**「ねこアレルギーのAI」**
https://t.co/4ltE8gzBVv?amp=1

YouTubeで機械学習について発信しています。
お時間ある方は覗いていただけると喜びます。
FizzBuzzと1から100までの足し算をElixirで書いてみる (ElixirLS extensionをいれてみる)

# はじめに
- @aaabb6211 さんの[fizzbuzzを噛み砕く](https://qiita.com/aaabb6211/items/f1ec6d32075a96598ba0)を拝見しまして、ぜひ[Elixir](https://elixir-lang.org/)で書いてみようとおもいました。
- ↑ こちらの記事にあります「**本気でそれをなしたいと思えば世界があなたに味方をしてくれる（アルケミスト）**」は、この本の一節でしょうか
    - [アルケミスト − 夢を旅した少年](https://www.amazon.co.jp/dp/404275001X)
    - ちなみに[Elixir](https://elixir-lang.org/) ーー不老不死の霊薬であるこの言語の使い手のことをアルケミスト(錬金術師)と呼ばれます
- We are the Alchemists, my friends !!!
- [Elixir](https://elixir-lang.org/)は1.10.3-otp-22 を使いました

# 書いてみる

```elixir:lib/awesome.ex
defmodule Awesome do
  # Thanks for プログラミングElixir
  def fizz_buzz(n) do
    do_fizz_buzz(rem(n, 3), rem(n, 5), n)
  end

  defp do_fizz_buzz(0, 0, _n), do: "FizzBuzz"
  defp do_fizz_buzz(0, _, _n), do: "Fizz"
  defp do_fizz_buzz(_, 0, _n), do: "Buzz"
  defp do_fizz_buzz(_, _, n), do: n

  def sum_100, do: 1..100 |> Enum.sum()
end
```
- FizzBuzzは[プログラミングElixir](https://www.amazon.co.jp/dp/4274219151) という本のおかげです

```elixir
$ iex
iex> 1..15 |> Enum.map(&Awesome.fizz_buzz/1)
[1, 2, "Fizz", 4, "Buzz", "Fizz", 7, 8, "Fizz", "Buzz", 11, "Fizz", 13, 14, "FizzBuzz"]
iex> Awesome.sum_100
5050
```

# ところで
- 最近、[The Pragmatic Studio](https://pragmaticstudio.com/)という動画でプログラミングを教えてくれるサイトがありまして、いまならEarly Access!ということで無料で[Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)の動画教材がみれるのでそこで学んでいます(後半部分は現時点では未公開なのですが有料になるのかも?)
    - https://pragmaticstudio.com/courses/phoenix-liveview
- そのサイトでの環境構築のおすすめVSCode extensionとして、[ElixirLS](https://marketplace.visualstudio.com/items?itemName=JakeBecker.elixir-ls)が紹介されていました
- さっそく素直にそれをいれてみたのですがなんと、うっすらと `@spec` なるものがみえるではありませんか！
    - [Elixir](https://elixir-lang.org/) 界では常識なのかもしれませんが、ついさっき気づいた次第です :rocket: :rocket: :rocket: 
    - うっすらのところを押すと、ソースコードに反映してくれます
    - これを自分で書く自信はない。。。

<img width="476" alt="スクリーンショット 2020-05-13 23.48.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/62558c58-9b8e-94bc-435b-ae1dc6d4a647.png">


Enjoy!!!
【備忘録】 ObjectのKeyを取得して、keyとObjectの中の要素を取得する

何度か直面したときの調べたので残しておく。

```
const hoges = {
  names: [
    { id: 1, name: 'taro' },
    { id: 2, name: 'hanako' }
  ],
  place: [
    { id: 1, val: 'tokyo' },
    { id: 2, val: 'kanagawa' }
  ]
}
```
keyがnamesのものを取り出したい。

```
const names = Object.entries(hoges).find(hoge => hoge[0] === 'names')
```

####出力結果

```
console.log(names)
//→ ['names', [{ id: 1, name: 'taro' },{ id: 2, name: 'hanako' }]]

console.log(names[1])
//→ [{ id: 1, name: 'taro' },{ id: 2, name: 'hanako' }]
```
linuxで使うコマンド・パッケージ・用語等備忘録(随時更新)

調べても忘れてを繰り返すのが面倒になったのでこちらに記載します。
コピペで済ませるのが怖くなってきたので、何をしているのかふんわりと分かる程度の理解を目指しています。
※自分用なので正確ではありません。

##apt
後述の`apt-get`の設計上のミスをなくしたもの。
推奨されているコマンド。

##apt-get（これよりaptを使う。）
パッケージの操作・管理。
Debian系のパッケージ管理システムであるAPT(Advanced Package Tool)ライブラリを利用してパッケージを操作・管理するコマンドラインツール。


##apt-get install
指定したパッケージをインストールする。

```
$ apt-get install curl ca-certificates gnupg
```
のように、複数のパッケージを同時に指定できる。

##apt-get update
パッケージの再同期を行うのに使用。
新しいバージョンはインストールせず、アップグレードが必要なパッケージのアップグレード用のパッケージリストと、リポジトリに到着したばかりの新しいパッケージを更新する。
パッケージのインデックスは、`/etc/apt/sources.list `に記述した場所から取得。`update`は、`upgrade`や`dist-upgrade`を行う前に常に実行する。

##apt-key
aptがパッケージを認証するのに使用するキーの一覧を管理するのに使用。このキーで認証されたパッケージは、信頼するに足るとみなせる。
Ubuntu公式以外からパッケージを取得するときは、このコマンドで認証する鍵情報を取り込んでおく必要がある。

##apt-key add ファイル名
信頼キーのリストに新しいキーを追加。
ファイル名を`-`にすると、標準入力から読み込む。

```
$ curl 鍵のURL | apt-key add -
```
であれば、`curl`でURL先のファイルを受信し、`apt-key add -`で左の鍵のファイルを読み込むということ？

##ca-certificates
パッケージであり、基本的なCA証明書が提供されている。
これがインストールされていない状態で`npm install`や`curl`コマンドでHTTPS通信しようとすると、CA証明書のエラーが発生する。通常は`curl`パッケージをインストールする際に推奨パッケージとしてインストールされる。

##curl
URLシンタックスを用いてファイルを送信・受信するコマンドラインツール。
様々なプロトコルを用いてデータを転送するためのライブラリとコマンドラインツールを提供するプロジェクトである`cURL`の成果。

##deb
例

```
$ deb URL(パッケージをダウンロードするリポジトリ先) buster　main
```
`deb`はコマンドではない。
コマンドのように勘違いされやすいが、`sources.list`にデータ取得元のURLを形式に沿ってエントリーするためのもの。
`buster`は`Debian 10`の開発コードネームで、データ取得元のURLの後にディストリビューションを記述する必要があるから記述されている。
`main`は、DFSG準拠のパッケージで構成されており、この領域外のソフトウェアに依存せずに動作する。これらはDebianディストリビューションの一部と見なされる唯一のパッケージ。

##finger ユーザー名
システム内のユーザーの情報を表示するコマンド。
`ユーザー名@ホスト名`、`ホスト名`と指定すると、指定したホスト内のユーザー情報も確認できる。
最近はセキュリティの観点から使えなくなっている場合が多い。


##gnugp
コマンドラインツールで、豊富なフロントエンドアプリケーションとライブラリが利用可能。
データと通信を暗号化して署名できる。あらゆる種類の公開鍵ディレクトリ用のアクセスモジュールとともに、多目的な鍵管理システムを備えている。

##passwd
パスワードを変更。
オプションでユーザーをロックしたり、有効日数を決定したりできる。

```ruby:今ログインしているユーザーのパスワードを変更
 $ passwd 
```

```ruby:root以外が指定したユーザーのパスワードを変更
 $ sudo passwd ユーザー名
```

##psql
PostgreSQLのターミナル型フロントエンド。
対話的に問い合わせをし、それをPostgreSQLに対して発行して結果を確認できる。

#sh
よくわからない。
シェルの実行？
`-c`を付けたら既に存在したファイルをリダイレクトで上書きしないという意味。

##sources.list
APT のデータ取得元の設定リスト。

##su
他のユーザーに一時的に変更。
`exit`すれば元のユーザーに戻る。

##yum
CentOSやFedoraのパッケージ管理。

##ディストリビューション
Linuxが配布される形態のこと。

例を挙げると。

- Red Hat Enterprise Linux (RHEL)
- Fedora
- Debian
- CentOS
- Ubuntu

##標準入力
コンピュータ上で実行されているプログラムが、特に何も指定されていない場合に標準的に利用するデータ入力元。
ライブ配信周りの技術について調べたよ（HLS / RTMP / WebRTC / MPEG-DASH...）

仕事でライブ配信のシステム開発に携わることになりいろいろと調べていたのですが、

今回自分の中でライブ配信周りについてまとめたかったのは、一口に`ライブ配信`と言っても、ユースケースの違いによって技術的には180°変わってしまうということがあるようなので、**クライアントへ正しく説明**し、**開発者やディレクターに共有する**ためにも記事にしました。

# ライブ動画配信とリアルタイム動画配信
![img-page-low-latency-figure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114895/3af6b9aa-b6c1-48d7-6f2d-f6283d429682.png)
*WOWZA media systems / DPSJより引用*

一般的に**ライブ動画配信**というのは、あるところで撮影している動画を、**最大数分程度の時差＝遅延**で視聴者に見せるようなもののことをいうようです。例えるならテレビの**スポーツライブ**のようなものです。

一方で**リアルタイム動画配信**というのは、**zoom**などのようにインタラクションを行うために**ほぼ同時のタイミング**で視聴者に動画を配信するようなもののことです。双方向にコミュニケーションするためには、遅延は数秒以内にチューニングされている必要があります。

上記の図にある通り、一般的には**HLS ≒ MPED-DASH > RTMP > WebRTC**の順に遅延が少ないです。

# HLS / MPEG-DASH / RTMP / WebRTC
### HLSとは
HLS（HTTP Live Streaming）はAppleが手動するフォーマットで、2017年に**IETF**で承認され、標準的に使用されています。
動画を`.ts`というチャンクファイルに分割し、それをまとめた`.m3u8`というフォーマットのファイルを参照します。

### MPEG-DASH (DASH)
MPEG-DASHは**ISO国際標準規格**です。HLSと同様にファイルを分割して配信しますが、**コーデックを必要としない**ため、tsファイルを用いる場合のHLSとは異なり、**H265への対応が可能**だったりします。そのほかの仕様はだいたいHLSと同じで、1つのチャンクファイルが小さいために高速でチャンネルを切り替えることが可能です。
一方で、**チャンクファイルが小さいことでパフォーマンスに影響を与える可能性**があります。

### RTMP （Real-Time Messaging Protocol）
RTMPは超低遅延、リアルタイム配信を目的に作られたプロトコルです。**flashベース**のため**2020年末にサポートが終了**するということになっていますが、未だにRTMPが使われているケースが多いのは、対応している**エンコーダ**（後述）が多いためです。そのため新規案件であっても対応せざるを得ない場合があります。

### WebRTC （Web Real-Time Communications）
P2Pのリアルタイム通信もともとはWebの規格として生まれたものですが、実際には**WindowsやMac、iOS、Androidにも対応**しています。ミリセカンドレベルの超低遅延のため、コミュニケーションツールなどで良く使われています。
一方、WebRTCは**P2Pの通信**であるため、**配信側は視聴者の分のデータ変換を行う必要**があります。つまり視聴者が増えれば増えるほど、配信側の負担が増加していきます。そのため、**大人数が視聴する場合には向いていません**。

# CMAFとは
CMAFというAppleとMicrosoftがMPEGに提出した、分割ファイルをさらに細かいセグメントに分ける仕組みのことです。これによってHLSなどでも低遅延が実現できますが、対応しているエンコーダーやプレイヤーが少ないため実用的に使われるには壁がありそうです。

# Wirecast / TriCaster / OBSとかって？
ライブ配信を行う時に良く使われる**RTMPエンコーダ**です。クライアントによってはこういった機材に依存している可能性もあるので、確認しておきましょう。

# ユースケースごとに使うべき技術
ここまで技術的仕様や特徴をだらだらと書いてきましたが、だいたいユースケースによって使う技術が決まってくるはずです。
**双方向チャットなどのように少人数ならWebRTC**、インタラクティブ機能がなく、**遅延を許容できる場合はHLSやDASH**、大人数で尚且つ低遅延を実現したいのであれば、**CMAFなどを使ってチューニング**するしかない、というような感じだと思います。

僕もこの辺りは調べ始めたばかりなので、もしこれ以外のソリューションをご存知の方は教えてほしいです。

# まとめ
おそらくCMAFの登場もあって、HLSやDASHでもチューニングを頑張れば低遅延が実現できる時代がやってきそうです。このチューニングの部分は開発者としては楽しい部分だと思うので、僕ももう少し調べてみようと思っています。

参考になれば幸いです。
sinatraとrailsで比較！ページが表示されるまでの流れ

![sinatraとrailsを比較！ (1)-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269844/f338c7cd-5221-ef99-1a8f-597ad4dc555d.jpeg)



railsとsinatraの表示までの流れを比較してみました。

この記事は、sinatraとrailsでテストアプリを作った時に、「こんな図があればもっと分かりやすかったなー」をまとめてみました。


## sinatraの流れ
１、アクセスがある。
２、処理が実行される。
３、htmlが表示される。

スライドにしてみました。
![sinatraとrailsを比較！ (1)-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269844/539284aa-da7e-4623-8288-fc07fbf0230e.jpeg)



## ruby on railsの流れ
１、アクセスがある
２、アクセス先のルーティングから、コントローラーとアクションの指定がある。
３、２で指定したアクションが実行される
４、users/show.html.erbファイルをもとにhtmlが生成され表示される。

スライドにしてみました。
![sinatraとrailsを比較！-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269844/2fe1f197-2336-3ec3-2caa-1c211182606f.jpeg)


## まとめ
簡単になんですけど、sinatraとrailsでルーティングにアクセスがあってhtmlが表示されるまでをスライドで作ってみました。

少々粗めの説明になってるのですが、知っておくともっと理解しやすいかも？と思ってます。

公開するか迷ったくらい情報的に必要なのかどうかがよくわかってないのですが、一応作ったので公開してみます。

この記事の反応をみて次をつくるかどうかは決めます！
コピペでできるボタン連打防止（android)

![disable_repeat.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367893/47da233c-af36-8d6e-e42b-7fcd281e85e2.gif)


上記は一度クリックされたら2000msだけクリックを禁止しています。
isEnabled = falseにしたりtrueにしたり、あまり綺麗ではないので拡張しました。

```kotlin:Button.kt

import android.os.Handler
import android.widget.Button


fun Button.disableClick(milliSec: Int) {
    // clickの制御
    if (!this.isEnabled) {
        return
    }
    this.isEnabled = false
    Handler().postDelayed( {
        this.isEnabled = true
    }, milliSec.toLong())
}

```

…これだけですｗ

使い方は

```kotlin:MainActivity.kt

class MainActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setStopRepeatButton()
    }

    private fun setStopRepeatButton() {
        // countの初期値を０にします
        button.text = "0"

        // ここで設定しています
        //（単位を明らかにするために書きましたが
        //milliSecは省略できます）
        button.setOnClickListener {
            button.disableClick(milliSec = 2000)

            val count = Integer.parseInt(button.text.toString())
            button.text = (count + 1).toString()
        }
    }
}

```
【Docker】Docker基本コマンド集

##ディレクトリ移動

対象のディレクトリに移動する。

```
# 公式：
$ cd /対象ディレクトリ
# 例：
$ cd /Users/名前/Develop/laravel-sns/laradock
```

##コンテナ起動

コンテナを指定して起動する。

```
# 公式：
$ docker-compose up -d コンテナ名
# 例：
$ docker-compose up -d workspace php-fpm nginx postgres
```

##コンテナ起動停止

コンテナの起動を停止する。

```
$ docker-compose stop
```

##コンテナ一覧表示

コンテナ一覧を表示する。

```
# 起動しているコンテナ一覧表示
$ docker ps
# 全てのコンテナ一覧表示
$ docker ps -a
```

##ログ確認

コンテナを指定してログを確認する。

```
# 公式：
$ docker logs コンテナID
# 例：
$ docker logs 4ad7c576bd1c
```

##コンテナ削除

コンテナを指定して削除する。

```
# 公式：
$ docker rm コンテナID
# 例：
$ docker rm 4ad7c576bd1c
# 強制削除：
$ docker rm -f 4ad7c576bd1c
```
rootログイン出来なくなった時の対処法

###はじめに

パスワードを忘れてログイン出来ない！
そんな時に対処した方法をさらっと自戒の意味も込めて書きます

###前提
OS:RHEL7
接続端末：teraterm

###やり方

①下記コマンドを実行する

```
# sudo su -
```

説明すると、
sudo　は昇格コマンド
su　はユーザー切り替えコマンドです

強制的にrootに昇格する方法です

②上記コマンドでrootになった後、下記コマンドを実行します。

```
# passwd root
　New Password : 新しいパスワードを入力する
```

以上が対処方法です。

同じ悩みを抱えていた方のお役に立てれば幸いです。
マイグレーションファイルを修正する

【開発環境】
macOS Catalina
バージョン 10.15.3
ruby 2.5.1
Rails 5.2.4.2
visual studio code

#DB反映後のマイグレーションファイルを修正する
マイグレーションファイルをrails db:migrateでDBに反映した後に、「カラム名間違えた、、、」などミスに気づくことがあるかと思います。
ミスを訂正してまた反映させればいいんじゃね？と思うのですが、そうもいきません。
反映ずみのマイグレーションファイルは修正できません。修正してしまうと、DBとの整合性が取れなくなり、エラーなどの原因になります。
しかし、順を追えば修正可能ですので、その方法を書いていきます。

##マイグレーションファイルをDBから戻す
ではどうすればいいかと言いますと、まず、DBに反映させているマイグレーションファイル一度DBから差し戻します。

マイグレーションファイルの状態を見てみます。

```
$ rails db:migrate:status
```

このコマンドで、マイグレーションファイルの状態がわかります。
statusがupだとDBに反映されている状態です。
逆に、statusがdownだとDBに反映されていない状態を意味します。

```
$ rails db:rollback
```
こちらのコマンドでマイグレーションファイルを差し戻すことができます。

もう一度、ステータスを見て、downとなっていれば成功です。

##マイグレーションファイルを修正する
down状態のマイグレーションファイルのミスのあるところを修正します。
DBに反映はされていないので、修正しても問題ありません。

##もう一度DBに反映させる
マイグレーションファイルを修正した後は、もう一度DBに反映させる必要があります。

```
$ rails db:migrate
```

これで修正は完了です。

##おわりに
今回はDB反映後のマイグレーションファイルの修正方法について書いてみました。
間違いなどがありましたらご指摘いただければ幸いです。
最後までご覧いただきありがとうございました。
【Udemy Python3入門+応用】　60. リスト内包表記

**※この記事はUdemyの
「[現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル](https://www.udemy.com/course/python-beginner/ "現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル")」
の講座を受講した上での、自分用の授業ノートです。
講師の[酒井潤](https://twitter.com/sakaijun "酒井潤")さんから許可をいただいた上で公開しています。**

##■リスト内包表記
#####◆普通に記述した場合
```python
t = (1, 2, 3, 4, 5)

r = []
for i in t:
    r.append(i)

print(r)
```
```:result
[1, 2, 3, 4, 5]
```
タプルを作って、そのタプルの要素を1つずつ取り出して空のリストに追加している。

#####◆リスト内包表記で記述した場合
```python
t = (1, 2, 3, 4, 5)

r = [i for i in t]

print(r)
```
```:result
[1, 2, 3, 4, 5]
```
`[]` 内に上のように記述することで、リストに直接追加していくことができる。

##■if文がある場合
#####◆普通に記述した場合
```python
t = (1, 2, 3, 4, 5)

r = []
for i in t:
    if i % 2 == 0:
        r.append(i)

print(r)
```
```:result
[2, 4]
```

#####◆リスト内包表記で記述した場合
```python
t = (1, 2, 3, 4, 5)

r = [i for i in t if i % 2 == 0]

print(r)
```
```:result
[2, 4]
```
if文も、後ろに付け足して記述することで追記できる。
このようにどんどん追記していくことはできるが、あまり追記していくと読みにくくなるので、適度に使うようにしよう。
新しく作成した.jsファイルが読み込まれない

#新しく作成した.jsファイルが読み込まれない
jQueryで追加機能を新しいファイルに書き込み実装したところ、うまく起動しなかった。
つまり読み込まれていないという状況であった。
その時の解決方法を備忘録的に記入する。

##状況
![スクリーンショット 2020-05-13 23.33.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/206c12a6-a80c-c6e6-39b7-cdbcafe2dc14.png)

新たに「searches.js」を加えたがうまく実装しない。

##結論
![スクリーンショット 2020-05-13 23.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/6f8e4d5c-4d35-36ee-2c7f-985d69eed22c.png)
「application.js」に
`//= require_tree .`
を追記するだけ

##軽く説明
`require_tree`で指定されたディレクトリは以下の全ファイルの内容を結合し読み込む
`require_tree .`の「.」によってapplication.jsが配置されているディレクトリ配下全てが読み込まれるようになる。

ちなみに今回の場合は
`//= require_tree .`ではなくて
`//= require researches`で指定しても問題ない。

##今後課題
もう少しアセットパイプラインについて勉強する必要があると感じた。
知識をつけしだいこの記事も改善する予定である。
Anaconda + VSCode + Tensorflow2.1 で intellisense が効かない場合の対処法

#Anaconda + VSCode + Tensorflow2.1 で intellisense が効かない場合の対処法
VSCodeでTensorflowを利用していると、intellisenseが効かない。(理由はよくわからない。)
そんなときは下記の手順を試してみると、改善する。

**～環境～**
・Windows10
・Anaconda3
・Tensorflow2.1
・VSCode ver.1.45.0

**～手順～**
**1. tensorflowフォルダ(anaconda3\envs\\(tensoflow仮想環境)\Lib\site-packages\tensoflow)を適当にrenameする。tensorflow_bkとか何でもいい。**

**2. tensorflow_coreフォルダ(anaconda3\envs\\(tensoflow仮想環境)\Lib\site-packages\tensoflow_core)をtensorflowにrenameする。**

**3. tensorflowフォルダ内にある\_\_init\_\_.pyに下記のコードを追記する。**

    from .python.keras.api._v2 import keras
    from tensorflow_estimator.python.estimator.api._v2 import estimator

引用
　https://github.com/tensorflow/tensorflow/issues/32982
　https://qiita.com/artemis5656/items/e8e464510a7d907e1feb
conway's game of lifeのアルゴリズムのメモ

## 目的
conway's game of lifeのアルゴリズムを知り、並列分散処理を勉強するためのモデルとして適している理由を考える。

## アルゴリズム
https://marcocrosa.wordpress.com/2012/09/25/the-b3s23-rule/

b3/s23というルールで動いている。
bはbornでsはsurvivesです。

1が生、0が死になってます。

### b3/s23
#### b3
自分の周りのcellを見て、3つ生きてるやつがいると新しいやつが生まれる。

#### s23
自分の周りのcellを見て2つか3つ行きている場合、生き残ります。また、ここで2未満4以上の場合は死にます。

conway's game of lifeの以下のコードがこのルールに該当する。

```c

// cell dies
  if(count < 2 || count > 3)
    M[threadId] = 0;

// cell stays the same
  if(count == 2)
    M[threadId] = C[threadId];

// cell either stays alive, or is born
  if(count == 3)
    M[threadId] = 1;
```

### 自分の周りの定義
自分の周りの定義が「conway's game of life」では以下のコードのようになっている。

このコードでは自分の周りの生きているcellを数えてカウントに入れている。
このカウントをb3/s23で示した、if文に投げる。


```c

  count = C[j*n_x+i_left] + C[j_down*n_x+i]
    + C[j*n_x+i_right] + C[j_up*n_x+i] + C[j_up*n_x+i_left]
    + C[j_down*n_x+i_right] + C[j_down*n_x+i_left]
    + C[j_up*n_x+i_right];
```


https://github.com/ynkmr0/studying_game_of_life

各cellが独立して動いていて、周りのcellの状態を見るため各cellが同期している必要があるため並列分散処理の勉強のモデルとして適しているんだと感じました。

## やること
自分の周りに関する部分のソースを読む。
pycudaがユーザのコードをどう処理しているか調べる。
AdaBoost(アダブースト)

* 参考にしたもの
  * [東京大学のデータサイエンティスト育成講座](https://www.amazon.co.jp/%E6%9D%B1%E4%BA%AC%E5%A4%A7%E5%AD%A6%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%82%B9%E3%83%88%E8%82%B2%E6%88%90%E8%AC%9B%E5%BA%A7-%E5%A1%9A%E6%9C%AC-%E9%82%A6%E5%B0%8A-ebook/dp/B07PD237GQ/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E6%9D%B1%E4%BA%AC%E5%A4%A7%E5%AD%A6%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%82%B9%E3%83%88%E8%82%B2%E6%88%90%E8%AC%9B%E5%BA%A7&qid=1588468608&s=digital-text&sr=1-1)
  * https://scikit-learn.org/stable/modules/ensemble.html#adaboost

# 「AdaBoost(アダブースト)」の概要

* 機械学習の、教師あり学習に使われる手法。
* 分類問題、回帰問題どちらにも使える。
* 「やってみて、ズレ見て、修正して、やってみて、・・・」というPDCAを細かく回していくイメージ
* 今回は、決定木を用いてアンサンブル学習（Ensemble methods）を行い、精度を高める
  * 決定木の考え方は[コッチ参照](https://qiita.com/kazuya_minakuchi/items/85f919b8a95ea8825190)

# 考え方

## 学習の流れ

1. モデルとして適当な定数を設定する。（最初のみ）
2. 作ったモデルで予測をする
3. 予測と正解とのズレ（損失関数）を求める。
4. ↑で計算したズレを埋めるようなモデル（決定木）を作り、学習率（0~1）をかけて、元のモデルに足す。
5. 2-4を繰り返す。決められた回数繰り返したら終了。

# サンプル

## 回帰

↓のような教師データの回帰を考える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/3327239c-f941-06ce-a3e0-14b7a08492eb.png)

学習を進めていくと、↓のようになる。（学習率0.1で、少しずつ合わせに行っている）

|1回目（平均の線引いただけ）|2回目|3回目|
|---|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/c6864096-7ff3-9b34-24ba-11704bf51cb8.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/50a63784-294b-dfc3-0fe5-37b2bb68c219.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/520234e2-68f3-237e-c433-04345755f4c1.png)|

|10回目|50回目|100回目|
|---|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/357ff278-542b-c873-8125-4e21d295a983.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/f675dd74-31e2-1862-2187-7d5c138c1ba9.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563901/70abfe73-a5c8-0abd-b7d4-0d4cabc76118.png)
|

* グラフ作ったときのスクリプトはココ：https://github.com/kzy611/qiita/blob/master/AdaBoost_sample.ipynb

## 過学習しないための工夫（Regularization）

* **学習率（learning rate）**
  * ↑でズレを埋めるモデル（決定木）を作った後、足すときに掛ける係数（0より大きく、1以下）
  * 「一発でズレを埋めに行くと、いきなり全ての値に合わせに行って過学習するため、少しずつ合わせに行く」、というイメージ
  * 小さい定数（0.1以下）が推奨されている。（scikit-learnでは、デフォルト値は0.1）
  * コレを小さくすると、「ズレを埋めるモデル（決定木）を作る回数」は大きな値が必要になる。
aタグ href属性で、link_toと同じようにmethod指定する方法

####結論
・aタグhref属性を使う際にも、
　例えば"data-method" => "delete"と記述することでmethod(Verb)を指定でき、
　link_toのように柔軟なリンク設定ができます。
・また、"data-confirm" => "この投稿を削除してよろしいですか?"というように、
　アラート設定することもできます。
・2行目の:titleで設定したテキストは、アイコンにマウスオンすると表示されます。

```
%a.btn.btn-danger{"aria-label" => "Delete", :href => "/posts/#{@post.id}", "data-method" => "delete", "data-confirm" => "この投稿を削除してよろしいですか?"}
　%i.far.fa-trash-alt{"aria-hidden" => "true", :title => "この投稿を削除しますか？"}
　%h.about_delete_button 削除する
```
仕上がりはこんな感じになります。

[![Image from Gyazo](https://i.gyazo.com/de4e9c88950826135911184ca2edc9cc.gif)](https://gyazo.com/de4e9c88950826135911184ca2edc9cc)

####経緯
・font-awesomeのアイコンを利用し、それにリンクを貼るコードを記述する際に、
　コーディングをググってみたところ、href属性を使う必要性があるようでした。
・link_toではmethod指定することに慣れていたのですが、今回は記述方がすぐには分からず。
・該当する記事がすぐに見つからなかったので、簡単ですがメモとして残しました。


####参考にさせていただいた記事
https://qiita.com/haruya_hamasaki/items/b69de2c680bb01d88017
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

ご指摘等ありましたらコメントいただければ幸いです、