OmniAICreator/Qiita-1.07M huggingface dataset:
【KPI】C#の基本的な画面の作り方 - 01：プロジェクトの新規作成 -【C#】

とても大雑把に、私がよく仕事で作るようなC#画面の作成方法を載せる。
Windowsフォームアプリケーションを使用して作成する為、興味があれば。

Visual Studioを起動した後、下記、[ファイル][新規作成][プロジェクト]を選択。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/e0a1d8f6-1aff-3a92-763d-7165d4f8c5bd.png)

下記、[Visual C#][Windows][Windows フォーム アプリケーション]を選択。
プロジェクト名は画面IDをつける。（今回はFrm100）
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/d54814ff-2879-801e-8543-94f81635dae1.png)

下記が完了する。
![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/62f8ad76-11b8-89a9-7685-7cdea55d8dba.png)



次回以降、これに対してデザインや処理の追加を行っていく。
JavaScript 学習用 関数

### 基礎
```javascript

function sayHello(){
    return "Hello";
}
sayHello();

```

```javascript

function sayHello(name) {
    // ここに戻り値を書いてください
    return `Hello ${ name }`;
  }
```

### 引数がない場合
```javascript

function sayHello(name) {
// ここに戻り値を書いてください
  if (!name) {
    return "What is your name?";
  } else {
    return "Hello " + name;
  }
}
```

### 文字列を数値に
```javascript

function add(a, b) {
  // ここに戻り値を書いてください
  return parseInt(a, 10) + parseInt(b, 10);
}
```

### 配列処理
```javascript

function sum(array) { 
  let sum = 0;
  for(let i = 0; i < array.length; i++){
    sum += array[i];
  }
  return sum;
}
```

### fizzBuzz
```javascript

function fizzBuzz(number){
  if(number % 5 === 0 && number % 3 === 0){
    return "fizzBuzz";
  } else if(number % 3 === 0){
    return "Fizz";
  } else if(number % 5 === 0){
    return "Buzz";
  } else{
    return number;
  }
}
```
補足：Linuxの概念とコマンド最低限


トレーニングを進める上での最低限のコマンドを紹介します。
なお、自習する場合は[こちら](https://dotinstall.com/lessons/basic_unix_v2)を見ることをおすすめします。

## コマンド

### cd

* ディレクトリを移動します。
* 単に cd と打つとhomeディレクトリに移動します。
* windowsと同じ。

### ls

* ディレクトリの一覧表示
* ls -aとすることで隠しファイルも表示します。

>Windowsだと dir 。

### cat

* ファイルの中身を表示します。

>Windowsだと type test.txt などとする。

### pwd

* 現在いるパスを表示します。

>Windowsだと dir で互換とする。

### touch

* ファイルを生成します。

>Windowsだと copy nul test.txt もしくは type nul > test.txt などとする。

### rm

* ファイルやディレクトリを削除します。
* ディレクトリを削除する場合は rm -rf dirname などとする。

>Windowsだと del 。

## ファイルシステム

* 最上位は / で表します(ルートディレクトリ）。windowsでいうC:¥
* ファイルの区切り文字は / です。（インターネットのURLの区切り文字を思い出しましょう）。Windowsは¥(\)。
* ./ はカレンドディレクトリ。
* ../ は１つ上位ディレクトリを表す。


## 参考

### Windowsコマンド対応

* https://qiita.com/asmin/items/d53e71ed98a377ca7823 （外部リンク）
Growiの定期バックアップ - AWSを利用しない場合

## はじめに
どうも！生産技術部のエンジニアです。growiの定期バックアップ方法を検討しましたので、参考までにどうぞ。

## 環境
* CentOS : 7.6.1810
* Docker-CE : 19.03.1
* Docker Compose : 1.25.0
* Growi :以下
![versioon_info.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451049/35ea5c9a-040a-a261-7f7b-b6c384b1d75e.png)

## 定期バックアップ

### バックアップ用のスクリプトを作成
バックアップは、**mongodump**コマンドを利用し、アーカイブファイルを作成します。作成するアーカイブファイルのファイル名には、日時とgrowiのバージョン番号を付けました。バックアップファイルからの復元には、**mongorestore**コマンドを利用します。バックアップは一週間経過したファイルから削除します。
**※growi/docker-compose.ymlのFILE_UPLOADをlocalに設定している場合は、別途バックアップが必要だと思われます。mongodbにしておけば不要かどうかも謎です。**

```bash:growi_backup.sh
#!/bin/sh

BKDIR=/srv/growi/data/backups

# Creating backup archive
docker exec -d growi_mongo_1 mongodump --archive=mongodb.archive
docker cp growi_mongo_1:mongodb.archive $BKDIR/$(date --date '1 day ago' "+%s_%Y_%m_%d_3.7.1_mongodb.archive")

# Create config backup archive

# Delete old backups
find $BKDIR -mtime +6 | xargs rm -rf
```

### crontabでスクリプトを定期実行
crontabにバックアップを取りたい時刻を設定し、スクリプトを実行する。

```bash
# crontab -l
0 2 * * * /root/Docker/growi/growi_backup.sh CRON=1
```

## :cherry_blossom:ご参考
* [dockerで動いているgrowiのmongodbをバックアップ・リストアする](https://nomusicnolife.hatenablog.com/entry/docker-growi-backup)
Apollo-Client のネットワークエラーを表示する

Apollo-client では 400 エラー等を受け取った際、デフォルトではエラーメッセージが表示されない。
Apollo-Client 内部でエラー処理され、エラーステータスに沿ったメッセージが`error.message`に格納される。

- 400 エラーの例

```bash
Error: Network error: Response not successful: Received status code 400
```

## 環境

```json
{
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link-error": "^1.1.12",
    "apollo-link-http": "^1.5.16"
  }
}
```

## apollo-link-error

apollo-client では、link という仕組みがあり、単純に言えばミドルウェアのような働きをします。

> 簡単に言うと、Apollo Links は連鎖可能な「ユニット」であり、これを組み合わせることで、各 GraphQL リクエストが GraphQL クライアントでどのように処理されるかを定義することができます。GraphQL リクエストを実行すると、各リンクの機能が次々と適用されます。これにより、アプリケーションに適した方法でリクエストのライフサイクルを制御することができます。例えば、リンクはリトライ、ポーリング、バッチ処理などを提供することができます。

[Composable networking for GraphQL - Apollo Link - Apollo GraphQL Docs](https://www.apollographql.com/docs/link/)

エラー文表示にはエラーハンドリングのための link である apollo-link-error を使用します。

```bash
$ yarn add apollo-link-error
```

## client に link を追加

- before

```ts
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const link = new HttpLink({
  uri: "https://sample.com/graphql/",
  fetch: fetch
});
const cache = new InMemoryCache();
const client = new ApolloClient({ link, cache });
```

- after

```ts
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { onError } from "apollo-link-error";
import { HttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const httpLink = new HttpLink({
  uri: "https://sample.com/graphql/",
  fetch: fetch
});
const cache = new InMemoryCache();
// errorLink
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});
const link = ApolloLink.from([errorLink, httpLink]);
const client = new ApolloClient({ link, cache });
```

errorLink を作成し、onError 関数を定義します。
ApolloLink.from で link を連結し、ApolloClient に渡します。

**注意**
ApolloLink.from でリンクを連結する際、順番には気を付ける必要があります。

```ts
// error
const link = ApolloLink.from([httpLink, errorLink]);
```

自分の環境では、以下のようなエラーメッセージが出ました。

```bash
Error: You are calling concat on a terminating link, which will have no effect
```
【KPI】Cloudのサーバを使用した所感など

ある仕事で、とある会社が提供しているCloudのサーバを使用したシステムを構築した。
1プログラマの視点で、その所感を書くことにする。
##仕様
###存在するもの
サーバA：システムの中心となるサーバ。（データの修正が可能）
サーバB：Cloudに存在するサーバ。（下記の送受信のみが可能）
テーブルC：サーバAからサーバBに送ったデータを登録するテーブル。
テーブルD：作業現場からサーバBに上げられたデータを登録するテーブル。テーブルCの明細となる。
テーブルE：テーブルDのデータをサーバAに受信し、登録するテーブル。
###動き
①サーバAよりデータを送信し、サーバBに存在するテーブルCに登録する。（データ送信）
　同じキー項目のデータを送信した場合は上書きされる。
②作業現場より、テーブルCに対して紐づく明細データが、テーブルDに登録される。
③テーブルDのデータがサーバBより送信され、サーバAのテーブルEに登録される。（データ受信）
##気を付けるべきこと
###サーバBデータのキー項目の変更ができるか？　できない場合はどうするか？
人的ミス、あるいはサーバAの仕様などで、テーブルCに送るデータのキー項目が変更されたとしても、テーブルCのキー項目をそのまま書き換えられる仕様が存在するかが重要。
仕様がない場合は注意してシステムを組む必要がある。（サーバB（クラウド）側の仕様を変更できない場合。
###サーバBより受信したデータは定期的に消さないと容量を圧迫する
テーブルEにはどんどんデータが蓄積される。サーバBのテーブルDにはデータを保存してあるはずなので、テーブルEのデータは定期的に消去するほうがいい。
（ただし仕様による）
##所感
この場合で最も問題なのは、サーバAとサーバB、更に作業現場の仕様は、よほど注意深く作るか、意志疎通が図れなければ、仕様が一致しないことになる。（私のときは、項目の桁数などの差異も多かった）
私の場合は、私が修正やシステムの構築が可能なサーバAで、ほぼ全ての整合性を合わせるハメになった。
他にCloudサーバを利用される方が、私と同じ問題が発生しないように祈る。
開発用プロビジョニングを使いたいのに、Provisioning profile "{プロファイル名}" doesn't include signing certificate "{Distribution証明書名}" エラー

開発用プロビジョニングを使って実機でバッグしたいのに、なぜか以下のようにDistribution用証明書が含まれていないよというエラーになってハマった。

```
Provisioning profile "{プロファイル名}" doesn't include signing certificate "{Distribution証明書名}" 
```

Build Settings > Signing > Code Signing Identity でConfiguration毎に使用する証明書を設定できるので、そこを修正することで開発用証明書を使用するように設定できる。

manuallyにしたらSigning & Capabilitiesの方で設定させてほしい。がっつりハマった。
【備忘録】react-native-modal-datetime-picker導入手順

#はじめに
今回の記事は完全俺得な、備忘録になっています。
[公式](https://github.com/mmazzarolo/react-native-modal-datetime-picker)

#導入しようと思ったきっかけ
日付の入力欄を作ろうとすると結構面倒なことが増える
　・型チェック
　　→文字列と日付型以外はNG
　・うるう年の確認
　　→ただめんどくさい
　etc...
そうゆう入力チェックとかめんどくせえなって思っていい感じのライブラリないかなと思ったらあった
それでいて使いやすい。最高
共有します。

#導入コマンド

####expoを使わない場合
```console
#npmをご利用の方
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

#yarnをご利用の方
$ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker
```

####expoを使う場合
```console
expo install react-native-modal-datetime-picker @react-native-community/datetimepicker
```

#利用例

```App.js
import React, { useState } from "react";
import { Button, View, StyleSheet } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const App = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = date => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View style={styles.container}>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  }
})
export default App;

```
公式に乗っているサンプルを少しだけいじっただけです。はい。
このサンプルでいうことがあるとしたらmode="date"と設定されていますが、もちろんいろんなタイプがあります。
'time'と'datetime'あるそうです。
要は時間も設定できるやつもあるよってことです。試してみてください。
またIOSのみですが、isDarkModeEnabledを使うことでダークモードにも対応。

他にもいろいろ属性あるので試してみてください。
何か良さげな使い方見つけたら更新しますのでチェックしててください！
それでは！
matplotlibで画像を表示する時に気になったこと

matplotlibで画像を表示させた時にちょっと気になった点がいくつかあったので，それをまとめておきました．
きっと気になっている人もいると思うので(特に使い始めの方)，ちょっとでも検索の手間が省けたら良いなぁと思ってます．
私はjupyter notebookをよく使うので，そこでの使用を前提としてます．

# １．あれ？グレースケールのはずなのに色が付いてるな？
百聞は一見に如かず．とりあえず画像を表示させてみます．

```python:
# いつもの色々インポート
import cv2
import numpy as np
from matplotlib import pyplot as plt

im = np.array(cv2.imread('lena.png',0)) #画像を読み込んでnumpy形式にする
```

`cv2.imread('lena.png',0)` は"lena.png"を 0 すなわちグレースケールで読み込んでね，ということです．
ではmatplotlibで画像を表示させてみます．

```python:
# matplotlibで表示させます
plt.imshow(im)
plt.show()
```
するとこんな感じで表示されます．

![スクリーンショット 2020-03-31 21.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/b84eb464-529f-aea6-54c9-08d9dfd3fc7b.png)

なんだか色が付いちゃってます．
matplotlibはデフォルトでカラーマップが設定されているのでこんな感じになってしまうんですね．
これを解除するためには`plt.gray()`を入れてあげるだけです．

```python:
plt.gray() # カラーマップを"gray"に設定
plt.imshow(im)
plt.show()
```
![スクリーンショット 2020-03-31 21.46.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/8a4ae5a3-766a-92bc-6f4b-f78539ca5012.png)
ちゃんと期待通りになりました．
実はここまではいろんなところに情報があるんですけど，私はこう思ってしまったことがあるんです．

### でもなんかいい感じだったから元のカラーマップに戻したいな？
<br>


案外見つからなくて，「もとに戻したいと思ってる人いないのかな…」って思ってました．
デフォルトのカラーマップが何なのかわからなかったので，元に戻すのを諦めてましたが，[公式](https://matplotlib.org/api/pyplot_summary.html)にちゃんと書いてありました．

![スクリーンショット 2020-03-31 21.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/58b96c74-5b7b-fb51-eec9-2fbdf983b587.png)

この*viridis*がデフォルトのカラーマップのようです．
早速設定してみましょう．

```python:
plt.viridis()
plt.imshow(im)
plt.show()
```
![スクリーンショット 2020-03-31 21.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/c87c9613-5c5e-a8a3-df3c-145477013b60.png)
これで元に戻りました．めでたしめでたし．



# ２．あれ？コントラストがおかしいな？
これに気づけたのは奇跡だと思っているんですが，なんかちょっと色がおかしいなって思ったんです．
なので，テストでこんな画像を読み込ませてみました．
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/f3ffa024-0ece-a65a-ed0b-82711cb4475e.png)
まっくろです．…が，matplotlibで表示させると
![スクリーンショット 2020-03-31 22.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/e007252f-94b7-dffc-4495-2fbc0b1cc95b.png)

どうやら色の階調が正規化されているみたいです．これを解消するためには下記のようにvminとvmaxを指定してあげないといけないようです．

```python:
plt.imshow(im, vmin = 0, vmax = 255) 
```

![スクリーンショット 2020-03-31 22.27.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608854/9e33e0db-5a21-7b7e-318b-29c04ceba15a.png)
目を凝らすとわずかに見えます．

きっと他にも私が気づいていないデフォルト設定があるんでしょうね．
以上です．間違いなどありましたら教えて下さい．
bootstrapでプラスからマイナスへ変化するアイコンを作る

####最近
最近はコロナのせいで引きこもっています。楽しみがパンケーキを作ることしかないです。何かちょうど良い趣味教えてください。

##bootstrapでプラスからマイナスに変化するアイコンを作る
まずはHTML

```html:index.html
<div class="" id="collapseListGroupHeading">
  <a href="#switch" class="collapsed" data-toggle="collapse"></a>
  <div class="collapse" id="switch" aria-expanded="false">
  </div>
</div>
```

そしてCSS

```css:style.css
#collapseListGroupHeading a[data-toggle="collapse"]{
  padding: 10px;
  text-decoration: none;
  position: relative;
}
#collapseListGroupHeading a[data-toggle="collapse"]::before,
#collapseListGroupHeading a[data-toggle="collapse"]::after{
  content:"";
  width: 8px;
  height: 0;
  border-top: #000000 1px solid;
  border-bottom: #000000 1px solid;
  position: absolute;
  right: 15px;
  top: 12px;
  bottom: 12px;
  margin: auto;
}
#collapseListGroupHeading a[aria-expanded=false]::after{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition-duration: 0.3s;
}
#collapseListGroupHeading a[aria-expanded=true]::after{
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 0.3s;
}
```
Python＆機械学習 勉強メモ②：ライブラリの導入

https://qiita.com/yohiro/items/04984927d0b455700cd1
の続き

# matplotlibとnumpy
matplotlibは、グラフ描画ライブラリ。pyplotをよく使うっぽい。
numpyは、数値計算ライブラリ。
この二つを組み合わせて数学グラフの描画ができるようになる。

## インポートの仕方

```python
import matplotlib.pyplot as plt
import numpy as np
```

## グラフ描画の仕方

$y = 2x + 1$であれば、

```python
x = np.arange(0, 10, 0.1) # 0から10まで0.1刻みのリストxを作成
y = 2*x + 1 # x各要素の2x+1の写像としてyを作成

plt.plot(x, y) # (x, y)のグラフを描画
plt.show() # グラフ表示
```

と書くことで以下のグラフを描ける
![capn.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571638/7716f081-2524-77d7-69d8-75d05617fe73.jpeg)

#シグモイド関数
以下のような曲線を描く関数のこと。
式は$y=\frac{1}{1 + e^x}$で表される。
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571638/01e642a4-5384-1460-ab4c-446ccab961ff.png)

ニューロンの「入力が閾値を超えたら発火する」という性質と親和性が高く、活性化関数としてよく使われる（と思われる）。
Pythonによる実装例は下記の通り。

```python
import math
def sigmoid(a):
    return (1.0 / (1.0 + math.exp(-a)))
```
【爆速メモ】コンポーネントにヘルプボックスを出したい(unity)

コンポーネントにヘルプボックスが表示されていると非常にわかりやすいですよね。
自分はわかりやすいです。
たぶん一週間後の自分とかが非常に助かると思います。
<img width="326" alt="a05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/fe0bb843-5522-e45f-4d03-8ef3bbe6278f.png">

なので、自分でもコピペして使えるよう爆速しています。

---

まずはスクリプトを2つ作ります

ひとつは、コンポーネントをカスタマイズする用
(InspectorのEditの意でテスト命名しました)
<img width="125" alt="a01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a2398b3d-20ca-59d1-e02b-5cde62a8e61c.png">

ふたつめは、普段どおりのスクリプト
(みんな大好き、当記事で好評のxyzの数値入力で自動回転する用のスクリプトです)
<img width="72" alt="a02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d0735cfe-8a76-e4f2-4de4-c3c5d9532177.png">

---

【コンポーネントをカスタマイズする用のスクリプトはこんなかんじ】
(今回だと、InsEdit.csで作ったやつ)
*はじめてさわる場合(自分がそうだった)、ものびへいばーが、えでぃたーに変わったり、
ぱぶりっく　おーばーらいど　とか書く必要があったり、
そもそも対象のスクリプトと双方向で指定し合う必要があるので、*
**そのあたりは、「自分はいま、なんのスクリプトを書いているんだろう？」の認識が求められます。**

```
using UnityEngine;
using UnityEditor;

[CanEditMultipleObjects]
[CustomEditor(typeof(autorot))]
public class InsEdit : Editor
{
    public override void OnInspectorGUI()
    {
        //ヘルプボックスを表示 
        EditorGUILayout.HelpBox("x,y,zの数値入力で自動回転します", MessageType.Info);

        base.OnInspectorGUI();

        GUIStyle style = new GUIStyle(EditorStyles.label);
    }
}

```

---

【autorot.csは、カスタマイズするので少し追記するところがあります】

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[AddComponentMenu("InsEdit")]
public class autorot : MonoBehaviour
{
    public float Rot_x;
    public float Rot_y;
    public float Rot_z;

    void Update()
    {
        transform.Rotate(Rot_x, Rot_y, Rot_z);
    }
}
```

---

【できあがり】
<img width="326" alt="a04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/04a98402-7fa1-606a-f3c9-de0442c510eb.png">

---

カスタム元の自動回転は、こちらの記事からどうぞ!!

【unity】x,y,zを数値入力すれば、ひたすら自動回転するオブジェクトであそぼう
https://qiita.com/sanpeita/items/96b937f3bfcf93382852
AtCoder 生活　12日目

[前回](https://qiita.com/flandrescarlet237/items/1827b2b98d798c584a02)

#12日目
今日は、ABC065からABC067のB問題を解きました。

##ABC065_B

問題:[Trained?]
(https://atcoder.jp/contests/abc065/tasks/abc065_b)


```c++

#include<bits/stdc++.h>
using namespace std;

int main() {
    int N;
    cin >> N;
    vector<int> A(N);
    for (int i=0; i<N; i++) cin >> A.at(i);
    int p=0;
    for (int i=0; i<N; i++) {
        if (A.at(p)==2) {
            cout << i+1 << endl;
            return 0;
        }
        p = A.at(p)-1;
    }
    cout << -1 << endl;
}


```

解くのにかかった時間：67分44秒
感想：網羅して解くやり方に慣れてない事がよく分かる

##ABC066_B

問題:[ss]
(https://atcoder.jp/contests/abc066/tasks/abc066_b)


```c++

#include <bits/stdc++.h>
using namespace std;
int main(){
      string S;
    cin >> S;
    for (int i = 1; i < S.size(); ++i) {
        if ((S.size() - i) % 2 == 0) {
            if (S.substr(0, (S.size() - i) / 2) == S.substr((S.size() - i)/2, (S.size() - i) / 2)) {
                cout << S.size() - i;
                break;
            }
        }
    }
    return 0;
}

```
解くのにかかった時間：43分46秒
感想：問題を回文と勘違いしてしまって時間がかかってしまった。


##ABC067_B

問題:[Snake Toy]
(https://atcoder.jp/contests/abc067/tasks/abc067_b)


```c++

#include <bits/stdc++.h>
using namespace std;
int main(){
    int N,K;
    cin >> N >> K;
    vector<int> l(N);
    for(int i=0;i<N;i++) cin >> l[i];
    sort(l.rbegin(),l.rend());
    int total = 0; 
    for(int i=0;i<K;i++){
        total += l[i];
    }
    cout << total << endl;
}

```

解くのにかかった時間：23分35秒
感想：ソートをすることに慣れてきた

###最後に
解くのにかかった時間の平均は4５分
もっと早く正確に解けるようになりたい
【MySQL】mysqldump restoreでちょいハマり

異なるDockerコンテナに同一構造のテーブルを持つデータベースがあり、
両方動かさねば！テストで動かしたい！ということで上司にどうすれば？と確認したところ、
「**ダンプレストア！んじゃやってみよう！**」とのことでやってみた。

# まずはダンプ

```console
$ mysqldump -u root -p -h $IP -P $PORT DATABASE_NAME TABLE_NAME > dump.sql
```

いけー！と思ったらエラー。

```:実行結果
$ mysqldump: Couldn't execute 'SELECT COLUMN_NAME, hogehogefugafuga
```

SELECT COLUMN_NAMEを実行できない？的な？

ということらしくちょいハマりしたが、以下のオプションをつけることで解決。

```console
$ --column-statistics=0
```

実際の使用例はこんな感じ。

```console
$ mysqldump -u root -p -h $IP -P $PORT DATABASE_NAME TABLE_NAME --column-statistics=0 > dump.sql
```

パスワードの入力が求められるので入力する。

これでダンプ完了。

# ダンプで生成したファイルについて

dump.sqlの中身はこんな感じ。

```:dump.sql
DROP TABLE IF EXISTS `TABLE_NAME`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!50503 SET character_set_client = utf8mb4 */;
CREATE TABLE `TABLE_NAME` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `hoge` varchar(20) NOT NULL,
  hogehogefugafuga
```

`DROP TABLE IF EXISTS`で既存で同名のテーブルがあった場合はそれを削除してから、
`CREATE TABLE`で再度新しく同様のテーブルを作成するクエリが盛り込まれていますね。

dump.sqlには続きがあり、それが以下の処理です。

```:dump.sql
LOCK TABLES `TABLE_NAME` WRITE;
/*!40000 ALTER TABLE `TABLE_NAME` DISABLE KEYS */;
INSERT INTO `TABLE_NAME` VALUES (hogehogefugafuga
```

`LOCK TABLES`でテーブルをロックして、書き込みができないようにしているみたいです。

これは、ダンプを作成したあとに、別でDB（テーブル）への新規の書き込みがあった場合などに、
ダンプファイルとの整合性が取れなくなってしまうことを避けるためです。

その後```INSERT INTO `TABLE_NAME` ```で値を挿入していく。

まとめると、

1. テーブル削除
2. テーブル作成
3. レコード挿入（作成）

というファイル内容になっています。

# 次はレストア

ファイル内容がわかったところで、実際にdump.sqlを新テーブルへと流し込みましょう（レストア）。

（今回ファイルはローカル上で移動させてあります。）

```console
mysql -u root -p -h $IP -P $PORT DATABASE_NAME < dump.sql
```

ダンプ時とレストア時で＜＞の向き先に注意です。

またまたパスワードの入力を求められるので入力して、レストア完了です。

あとはmysqlにログインして確認するでもよし、
phpMyAdminにアクセスして確認するでもよし。

# やってみて

MySQLは自己開発でも副業でも触ってますし、CUIでの操作もアレコレやったことありますが、
mysqldumpコマンドは初めて使いました。

テーブル被りは削除とか、ロックかけて整合性の保持をするなど、
気の利いてるコマンドだなぁ、なんて思いました。

最初はコマンド打つのアレコレ分からないしなんとなく怖いしって
感じなんですが、、慣れると便利ですね。
（万が一にも変なコマンド打たないようにせねば。。）
Nuxt.jsでModule not found: Error: Can't resolve 'fs' in ' エラーが出た時の対処法

Nuxt.jsで外部ライブラリを導入後`Module not found: Error: Can't resolve 'fs' in ' `と言うエラーでコンパイルできず。

## 対処した方法
 
```js:nuxt.config.js
export default {
  build: {
    extend (config, ctx) {
      config.node = {
        fs: "empty" 
      }
    }
  }
}
```

nuxt.config.jsに上記を追記することでコンパイルできました。
(2)-2 -1 自作の関数、作ってみる


##(2)-2 同じ文章をまとめてすっきりさせたい

先生に相談したら**関数**を作るとよい。**引数ありで**と助言を頂いたのでやってみた結果のまとめ
##お題


```csharp

    void Update()
    {
        if (Input.GetKey(KeyCode.A))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, Vector3.down);
            this.transform.rotation = myQuaternion * rot;
        }

        if (Input.GetKey(KeyCode.D))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, Vector3.up);
            this.transform.rotation = myQuaternion * rot;
        }

        if (Input.GetKey(KeyCode.W))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, Vector3.right);
            this.transform.rotation = myQuaternion * rot;
        }

        if (Input.GetKey(KeyCode.S))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, Vector3.left);
            this.transform.rotation = myQuaternion * rot;
        }
    }
```

###引数になんて書けばプログラムが通るのかをもんもんとやっていきます。

```csharp

    void Update()
    {
        //回転2
        Kaiten(A, down);
        Kaiten(D, up);
        Kaiten(W, right);
        Kaiten(S, left);
    }

    void Kaiten(string moji, string angle)
    {
        if (Input.GetKey(moji))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, Vector3.angle);
            this.transform.rotation = myQuaternion * rot;
        }
    }

```

###👆ＮＧ
名前は存在しない、定義がないと。
文字列をダブルクオーテーションで囲ってないから！？

```csharp

    void Update()
    {
        //回転2
        Kaiten(”A”, ”down”);
        Kaiten(”D”, ”up”);
        Kaiten(”W”, ”right”);
        Kaiten(”S”, ”left”);
    }

    void Kaiten(string moji, string angle)
    {
        if (Input.GetKey(moji))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, Vector3.angle);
            this.transform.rotation = myQuaternion * rot;
        }
    }

```

##👆ＮＧ
予期しない文字、構文エラー、定義がありませんと。
もう、そのまま入れたらどう？心折れそうやし。


```csharp

    void Update()
    {
        //回転2
        Kaiten(KeyCode.A, Vector3.down);
        Kaiten(KeyCode.D, Vector3.up);
        Kaiten(KeyCode.W, Vector3.right);
        Kaiten(KeyCode.S, Vector3.left);
    }

    void Kaiten(KeyCode moji, Vector3 angle)
    {
        if (Input.GetKey(moji))
        {
            Quaternion myQuaternion = this.transform.rotation;
            Quaternion rot = Quaternion.AngleAxis(2, angle);
            this.transform.rotation = myQuaternion * rot;
        }
    }

```
###👆まぐれだけど、正解な気がする。
##何を覚えたか？
・Vector3は型かもって気がするけど、KeyCode型を発見
・関数の実行部分には、型.変数 て書かないとだめ
・諦めなければいつかは、通してくれる

###参考にさせて頂いたサイト
[Unityプログラミング基礎 (変数からclassまで)](https://qiita.com/iwaken71/items/3629ae1fa47eba9a38d7)
Exclusive Mobile App: Best Solution To Take Your Business To New Heights

Highly sophisticated gadgets have changed the way businesses run their business all over the world. Smartphones and on-demand apps are a big booster for all businesses and users. Users can have quick access to anything online through the internet on their smartphones or tablet as per their convenience.

On-demand applications have gained huge popularity among the users in lesser time. One of the main reasons behind the popularity of all on-demand applications is that it is very user-friendly and offers great convenience to the users. Customers can get anything from anywhere with a few simple steps on their smartphones.

## Technological Advancement: Know Why Businesses Must Pay Attention To It
The need for technology in the business industry has become mandatory these days. Businesses have understood that technological advancement can offer robust changes that help them to meet the demand of the present generation. One of the best examples of technological advancement is Uber.

Advance applications of today's offer great relief to users as they can order things as per their convenience from anywhere. Even it has proven to be boon for businesses as it offers them with various benefits which they haven't imagined before.

## Enhance Your Business Visibility
Once you develop an exclusive mobile app for your business, you can surely grasp wide visibility in the market.  The developed app solution will not only improve your business visibility but will also a great level of customer engagement. For instance, when tourists visit the new place, then they will go online and search on search engines like Google to know about the nearby services provider to get the best service as soon as possible.

## High-Profit Rate
Businesses can reach more and more consumers worldwide with the help of a mobile app. Thus if any of the businesses that want to earn more profit and aim to reach a huge customer base have to make sure they develop advanced applications by assigning the task to [angularjs development company](https://www.appemporio.com/angularjs-development-company/). Once you get your own app solution, you can easily save huge commissions that you previously have to pay to the aggregators to use the app platform, which ultimately increases your business sales and results in increasing profit.

## Leverage Employees Performance
Using the developed app solution, your ideal customers can easily interact with your business in real-time. This app solution will not only offer the best experience to your customers but will also reduce the dissatisfaction level to a great extent. Businesses can also bring down a certain cost as you can handle everything on your own through the app.

## Conclusion
The success of the taxi giant Uber has encouraged various businesses to opt for a mobile app solution for their business. Hence many of the businesses are hiring professionals and taking the support of mobile app development firms for developing an exclusive mobile app solution for their business.
Ubuntuの起動が遅くなったので直した

# 現象
起動に5分以上かかった。

# 解析
以下のコマンドで、プロセス毎の起動に要した時間を見られる。

```bash
systemd-analyze blame
```

network.serviceの起動に5分以上かかっていた。

# 原因
/etc/network/interfaces に、不要な設定を書き込んでいたため。

# 解決方法
不要な設定を削除した。

# 結果
直った。
AtCoderにJavaScriptで挑む方法

[AtCoder](https://atcodern.jp/)にJavaScript（またはTypeScript）で挑むときに最低限押さえておいた方が良いと思われるポイントを紹介します。競プロ初心者の方が対象です。

## その1: 提出言語にJavaScriptでなくTypeScriptを選択する

JavaScriptでコードを記述する場合でも、提出言語はTypeScriptを選択した方が良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323684/42b8506e-407b-8bf6-581a-88fb7cbf7984.png)

というのも、AtCoderのサポートするJavaScriptランタイムはNode.js v5.12のみであり、これはいまや使いものになりません（例えばアロー関数や分割代入が使えません[^1]）。

[^1]: https://node.green/

TypeScriptもv2.1.6とそれほど新しいわけではありませんが、ES2015が問題なく利用できますし、AtCoderのTSはコンパイラオプションが緩いのでJSのコードがそのまま実行できます。

# その2: ts-nodeとonline-judge-toolsを使ってローカルでコーディング／テストする

AtCoderはブラウザ上でコーディングやテストをすることが出来ますが、やはり慣れたエディタで作業したり、テストを効率良く行うためにはローカル環境が便利です。

ここでは[ts-node](https://github.com/TypeStrong/ts-node)と[online-judge-tools](https://github.com/kmyk/online-judge-tools)を使った簡単なローカル環境構築方法を紹介します。

### Step1. ts-nodeをインストール

前述のとおり提出言語にTypeScriptを選択するので、ローカルでもTSの実行環境があったほうが安心です。
適当な作業用ディレクトリで以下のようにts-nodeをインストールします。

```sh
$ npm init -y
$ npm install typescript@2.1.6 ts-node @types/node
```

### Step2. online-judge-tools をインストール

online-judge-toolsは、[競技プログラミングを行う上で存在する典型作業を自動化する](https://online-judge-tools.readthedocs.io/en/master/introduction.ja.html)ためのツールです。

色々な機能があるようですが、例えばAtCoderの問題ページにあるテストケース（入出力例）をCLIでダウンロードすることができます。

個人的にはAtCoderのためだけに余計なツールを導入したくなかったのですが、問題を読んだ後に手動でテストケースを用意するのはかなり気持ちの萎える作業ですので、このツールだけはインストールしておいた方が良いと思います。

[こちら](https://github.com/kmyk/online-judge-tools#how-to-install)を参考にインストールを行ってください。

### Step3. コーディングとテスト

対象となる問題のテストケースを online-judge-toolsでダウンロードします。

```sh
$ oj dl https://atcoder.jp/contests/abs/tasks/practice_1
```

好みのエディタで問題を解きます。

```sh
$ vi main.ts
```

ts-nodeとonline-judge-toolsでテストを行います（先ほどダウンロードしたテストケースを自動で読み込んでくれます）。

```sh
$ oj t -c 'sh -c "npx ts-node main.ts"'
[*] 1 cases found

[*] sample-1
[x] time: 1.705760 sec
[+] AC

[x] slowest: 1.705760 sec  (for sample-1)
[+] test success: 1 cases
```

テストがパスしたらAtCoderのサイトから提出を行いましょう（提出言語をTypeScriptにするのを忘れずに！）

## さいごに

AtCoderでは[JSやTSはかなりマイナーな言語](https://qiita.com/knakajima3027/items/809be5abe5c3d9f29ee7#%E6%8F%90%E5%87%BA%E6%95%B0%E3%81%8C%E6%80%A5%E5%A2%97)のようです。

[言語仕様レベルの根深い問題もいくつかある](http://tatamo.81.la/blog/2018/02/09/competitive-programming-using-js-and-ts-02/)ようなのですが、それ以前にNode.jsのバージョンを見てあきらめてしまう人も多いような気がしました（私自身がそうでした）。

この記事を見てAtCoderに挑戦するJSerが増えてくれたら嬉しいです。
AI方面の試験スケジュール

新型コロナウイルスのせいで２０２０春の試験が中止になったので、次の試験をどうしようか検討するための備忘録。
普通のコロナウイルスは風邪のウイルスらしいですね？


試：試験

## [IPAの試験](https://www.jitec.ipa.go.jp/1_11seido/seido_gaiyo.html)
一応IPAも載せておく。

|試験名|1|2|3|4|5|6|7|8|9|10|11|12|
|----|----|----|----|----|----|----|----|----|----|----|----|----|
|基本情報処理技術者(FE)|-|-|-|試|-|-|-|-|-|試|-|-|
|応用情報処理技術者(AP)|-|-|-|試|-|-|-|-|-|試|-|-|
|情報処理安全確保支援士(SC)|-|-|-|試|-|-|-|-|-|試|-|-|
|プロジェクトマネージャ(PM)|-|-|-|試|-|-|-|-|-|-|-|-|
|データベーススペシャリスト(DB)|-|-|-|試|-|-|-|-|-|-|-|-|
|エンベデッドシステムスペシャリスト(ES)|-|-|-|試|-|-|-|-|-|-|-|-|
|システム監査技術者(AU)|-|-|-|試|-|-|-|-|-|-|-|-|
|ITストラテジスト(ST)|-|-|-|-|-|-|-|-|-|試|-|-|
|システムアーキテクト(SA)|-|-|-|-|-|-|-|-|-|試|-|-|
|ネットワークスペシャリスト(NW)|-|-|-|-|-|-|-|-|-|試|-|-|
|ITサービスマネジメント(SM)|-|-|-|-|-|-|-|-|-|試|-|-|

## [統計検定](http://www.toukei-kentei.jp/)
2級のCBTに関しては、通年で受けられる。

試験名|1|2|3|4|5|6|7|8|9|10|11|12
----|----|----|----|----|----|----|----|----|----|----|----|----
１級|-|-|-|-|-|-|-|-|-|-|試|-
準１級|-|-|-|-|-|試|-|-|-|-|試|-
２級|-|-|-|-|-|試|-|-|-|-|試|-

## [ディープラーニング協会](https://www.jdla.org/certificate/)
試験名|1|2|3|4|5|6|7|8|9|10|11|12
----|----|----|----|----|----|----|----|----|----|----|----|----
E検定|-|試|-|-|-|-|-|試|-|-|-|-
G検定|-|-|試|-|-|-|試|-|-|-|試|-

## これからの方針
上記の中で自分が持っているのはAPとPM。

G検定は技術的なものっていうより、教養科目の「ディープラーニング概論」1単位的な印象を受けます。
E検定は多分もっとしっかりしてるんだろうけど、受けるためのトレーニングコースが結構お金がかかる。。。

というわけで、統計検定２級（CBT）を受けますかね。
そろそろ勉強を開始して、余裕がありそうだったら

- SAも受ける
- もっと学習して準１級か１級を受ける

って進めようかと検討しています。
これから年に２回は試験を受けていくつもりなので、放送大学の学生になって試験料の減免制度を活用したいですが、それはそれでめんどくさいかも。。。
基本情報3月23日(２３週目)

##目標と結果##

##目標##

•過去問1回分を午前、午後共に150分計測し、取り組む。
•自分の苦手な分野の部分をピックアップし、集中的に取り組む。(アルゴリズム、表計算を重視)
•学習時間14時間確保する。
##結果##
アルゴリズムがかなり苦手だということ。
##振り返り##
14時間の時間は確保することができた。自分の苦手なアルゴリズムをピックアップし、取り組んだもののやはり解説がないとできない状態が未だ続いている。昨日行った研修では、問8の1問目すらも解けていなかったため、かなり追い詰められていることが分かった。
__KEEP__
勉強時間を確保すること。
__TRY__
アルゴリズムを解けるようにすること。
__PROBLEM__
アルゴリズムが解けていない。
##次週 and more...##

3/16
Pythonで毎日AtCoder #22

### はじめに
[前回](https://qiita.com/taxfree_python/items/34a14d0d07e309829357)
今日は最近のCをやります

### #22

**考えたこと**
[ABC160-C](https://atcoder.jp/contests/abc160/tasks/abc160_c)
コンテスト中は$N!*N$の全てを考えようとしていましたが、それではTLEしてしまいます。N個全て訪問するので1つ通らない区間があります。$A_i$から時計周り、反時計周りすると考えると左右どちらかは通りません。ですので$A_i$と左右の距離の最大値が答えになります。注意点は$A_N$→$A_1$の場合はそのままでは計算できないので、別で計算しました。

```python
k, n = map(int,input().split())
a = list(map(int,input().split()))

cost = max(a[0]+k-a[-1],a[-1]-a[-2])
for i in range(1,n-1):
    cost = max(a[i]-a[i-1],a[i+1]-a[i],cost)
print(k-cost)
```

[ABC159-C](https://atcoder.jp/contests/abc159/tasks/abc159_c)
直方体の時に体積が最大になるので3で割って三乗するだけ

```python
print((int(input())/3)**3)
```

[ABC158-C](https://atcoder.jp/contests/abc158/tasks/abc158_c)
計算するだけ。前回解いた時にもっと余裕持ってfor回せると言われたので10000まで計算しています。//1で切り捨て処理しています。

```python
a, b = map(int,input().split())
for i in range(10000):
    if (i * 0.08)//1 == a and (i * 0.1)//1 == b:
        print(i)
        quit()
print(-1)
```

[ABC157-C](https://atcoder.jp/contests/abc157/tasks/abc157_c)
問題見た時は簡単だと思ったけどできなかった。strにして桁ごとに比較してもできなかった。結果を見る限りうまく場合分けでできてない。リベンジする

[ABC156-C](https://atcoder.jp/contests/abc156/tasks/abc156_c)
$N$が小さいので$N$以下の全ての整数でコストを計算します。中央値付近で最小になる?

```python
n = int(input())
x = list(map(int,input().split()))

ans = 10**9
for i in range(101):
    cost = 0
    for j in range(n):
        cost += (x[j]-i)**2
    ans = min(ans,cost)
print(ans)
```

[ABC155-C](https://atcoder.jp/contests/abc155/tasks/abc155_c)
$S$をcollections.Counterに入れて、most_commonして最頻値を求めています。あとは出力するだけ

```python
import collections
n = int(input())
s = [str(input()) for _ in range(n)]
s = collections.Counter(s)
s = s.most_common()
c = s[0][1]
ans = []
for i in range(len(s)):
    if s[i][1] == c:
        ans.append(s[i][0])
ans.sort()
for i in ans:
    print(i)
```

### まとめ
Cは楽しい。では、また
変動係数

# 変動係数
分散で散らばり具合を比較できない場合がある

例）１人あたりの県民所得の平均（p38）
地域間の所得格差は広がったか？

|年度|平均 $\bar{X}$ |標準偏差 $S$|変動係数 $C.V.$|
|---|---|---|---|
|1965|26.6万円|7.5万円|7.5/26.6 $\fallingdotseq$ 0.28|
|1975|117.5万円|23.8万円|23.8/117.5 $\fallingdotseq$ 0.20|

$$C.V.=\frac{S_x}{\bar{X}}$$

単純に標準偏差を比較すれば３倍になっているが、平均も約４.5倍に増えている
平均１あたりの標準偏差である変動係数（単位無し）を比べると地域格差は小さくなっていると言える。
【Git】git stash save "スタッシュ名"でstashに名前を付けられる。

## コマンド

```terminal
git stash save "スタッシュ名"
```

こちらでgit stashするとスタッシュ名という名前がstashに付きます。
今まで名前つけずに整理が大変だったのでメモ。
Swift4以降のKVOについて

## はじめに
KVOとは`Key-Value Observing`の略で、対象のObjectの値を監視し、変更のタイミングで通知を行ってくれるものです。
とても簡単に特定の値の監視を行うことができますので、今回はその使い方についてまとめてみました。

## KVOの使い方
### 監視の登録方法について
Objectの値の監視を登録するには`observe(_:options:changeHandler:)`を使用します。
各引数の説明を簡単に行います。

```
func observe<Value>(_ keyPath: KeyPath<T, Value>, options: NSKeyValueObservingOptions = [], changeHandler: @escaping (T, NSKeyValueObservedChange<Value>) -> Void) -> NSKeyValueObservation
```

- `keyPath` : `KeyPath`形式で監視したいObjectの値を指定
- `options` : 変更前後、どの値を通知してもらうか指定するオプション
- `changeHandler` : Value変更時に呼ばれるHandler
    - `T` : 対象のObject
    - `NSKeyValueObservedChange<Value>` : 監視対象の値の変更時の値を格納

### 実例
では実例を見ていきましょう、使い方は簡単です。
下の例では`view`の`frame`の変更時に通知をするよう処理を記述しています。

```
/// インスタンスを保持
var observations = [NSKeyValueObservation]()

/// Objectの値の監視を追加
func addKeyValueObserver() {
    let observation = view.observe(\.frame, options: [.new, .old], changeHandler: { object, change in
        // value変更時の処理を記載
        print("変更前の値: \(change.newValue), 変更後の値: \(change.oldValue)")
    })
    observations.append(observation)
}

/// 監視を停止し、インスタンスを削除
func removeKeyValueObserver() {
    // 監視を停止
    observations.forEach({ $0.invalidate() })
    observations.removeAll()
}
```
`options`で設定している値は`new`で変更後の値を通知するよう指定、`old`で変更前の値を通知するよう指定できます。
ちなみに変更が通知された際に、変更された値の中身を確認する必要がない場合は`options:`は省略することができます。
その場合は、`newValue`および`oldValue`は`nil`になります。

## KVOの使い所
#### プロパティを外から監視できる
既存のframeworkのプロパティなど、変化を検知したいが検知するための`delegate`が存在しない場合などは、KVOを使用して該当のプロパティ対して外から監視を行い、プロパティの変更を検知をすることができます。

## おわりに
KVOを使用することで簡単にプロパティの監視を行うことが出来ますので、是非使い所を見つけて使ってみてください。


## 参考文献
- [Using Key-Value Observing in Swift](https://developer.apple.com/documentation/swift/cocoa_design_patterns/using_key-value_observing_in_swift)
Flutter/WidgetTestでUnsupported operation: Cannot set value in unmodifiable Mapエラーが出る

# 環境
訳あって最新版を使っていません(macをCatalinaにアップデートできない==Xcodeの最新版を入れられないので)。
従って、バージョン違いによる不動作などあるかも知れません。お気づきの点があったら是非コメント下さい。

```console
$ flutter --version
Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (4 months ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0
```

# 現象

WidgetTestで、`pumpWidget(MyApp())`しているテストを、他のテストと連続実行したときのみ、以下のエラーが出る。
単独実行したときは、出ない。

```console
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following UnsupportedError was thrown building MediaQuery(MediaQueryData(size: Size(800.0,
600.0), devicePixelRatio: 3.0, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding:
EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets.zero, physicalDepth:
1.7976931348623157e+308, alwaysUse24HourFormat: false, accessibleNavigation: false, highContrast:
false,disableAnimations: false, invertColors: false, boldText: false)):
Unsupported operation: Cannot set value in unmodifiable Map
```

# 原因

どうやら、ローカライゼーション用の設定が悪さをしているようです。
Flutterをそのまま実行すると、日本語フォントがおかしくありませんか？それを解消するため、`MaterialApp`に次のように指定していました。

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
      // 日本語フォント設定
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('ja', ''), // Japanese
      ],
     ....
```

これの設定を無くすと、大丈夫でした。

このテストの前に実行するテストでは、

```dart
return MaterialApp(
      home: HomePage(),
    );
```

としてダミーの`MaterialApp`を起動していて、どうやらそのクラスはテストの間で再作成していないらしく、`MyApp`の設定でImuutableなMapを上書きしようとして怒られているようです。
`group`を変えてみても同じでした。


# 解決策

## 1.MyAppを起動するテストを先に持ってくる
未設定のプロパティは、特に値が上書きされることはないようなので、

`MyApp`→ダミーMaterialApp

の順の起動になれば、エラーが起きなくなります。
なので、テストの順番をそのように変えます。
JUnitと違い、Dartのテストは書いた順番に実行されますから、メソッドをカット＆ペースとして動かすだけです。


## 2.TestAppクラスを作ってローカライゼーション設定を入れる

ダミーのMaterialAppを作っていたのを、`TestApp`クラスとして次のようにします。

```dart
class TestApp extends StatelessWidget {
  TestApp(this.widget);

  final Widget widget;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 日本語フォント設定
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('ja', ''), // Japanese
      ],
      home: widget,
    );
  }
}

///テストコード
await tester.pumpWidget(TestApp(HomePage()));
```

でも、テスト時にフォントは関係ないしなあ・・・
ということで、悩ましいですが、いったん1の対応を取っています。

なお、テストファイルが違う場合は、作り直されるみたいです。というかファイル毎に別スレッドでテストしているようなログの出方をしていますので、当然ながらファイルが違うテストは全部別インスタンスでしょうね。

というかFlutterのテストレポート見づらい・・・
Azureのメッセージングサービス4種

## はじめに

Azureのメッセージングサービスを[MS Learn](https://docs.microsoft.com/ja-jp/learn/modules/choose-a-messaging-model-in-azure-to-connect-your-services/3-choose-azure-storage-queues)で勉強していたが日本語が難解なのでQiita上に翻訳しつつ理解する。 

## Azureのメッセージングサービス4種

- メッセージ系
    - Queue Storage
        - シンプルなメッセージキュー、データ量が多い場合
    - Service Bus
        - キュー：単一の受信者（サブスクライバ）
        - トピック：複数の受信者（サブスクライバ）
- イベント系
    - Event Grid
        - シンプルなイベント
    - Event Hubs
        - 高スループット、多数のパブリッシャー、セキュリティ、回復性を持つイベント

## メッセージとイベントの違い

|項目|メッセージ|イベント|
|:--|:--|:--|
|データ|含まれる|含まれない（参照のみで軽量）|
|送信側が受信側を意識するか|する|しない|
|特徴|分散アプリで通信の処理を保証したい|ブロードキャストで利用、多くの場合一時的|

## メッセージ
### Queue Storageの特徴

- シンプルなキュー
- Azure Storageを利用
- 無制限のキューサイズ
- RESTベース
- ストレージの容量で課金
- 単一の送信先

### Service Bus
#### Service Bus キューの特徴

- 柔軟なキュー
- 容量は最大80GB
- 以下のいずれかを選択可能
  - At-Least-Once：最低1回（重複あり、損失なし）
  - At-Most-Once：最大1回（重複なし、損失あり）
- トランザクション有（複数メッセージをグループ化）

#### Service Bus トピックの特徴

- 複数の送信先
  - 複数クライアントからのサブスクライブ・処理が可能

### キューのメリット

- 信頼性向上
    - メッセージの読み取り側の準備ができるまで待機させられる（非同期に処理できる）
- メッセージの配信保証
    - At-Least-Once
        - 少なくとも1回。つまり1回は確実に配信されるが、重複(２回以上同じメッセージ)がありうる。
    - At-Most-Once
        - 最大1回。つまり0回=配信されないことがある。重複はない。
    - 先入れ先出し法(FIFO:First in, First out)
        - 通常、先にいれたメッセージが先に出て行く(FIFO)だが、そうでない(順序が保証されない)ものがある。順序が入れ替わると困る場合はFIFO保証を含むシステムを選択する必要がある。
- トランザクションのサポート
    - グループ化されたメッセージが全て処理されるか、どのメッセージも処理されないかのいずれかの状態になるか。

### サービスの選択

Queueストレージ、Serviceバス（キューorトピック)の選択基準は以下の通り。

Queueストレージを選択（最も単純)

- データ量が多い(キューのサイズが80GBを超える)
- 簡単にコーディングできるシンプルなキューがほしい

Service Busキューを選択

- At-Most-Once保証(最大1回、重複なし)が必要
- 順序保証(FIFO)が必要
- トランザクションが必要（全て処理される or 何も処理されない)
- データ量が比較的少ない(キューのサイズが80GB未満)

Service Busトピックを選択（最も複雑）

- 複数のサブスクライバー（受信者）が必要

## イベント
### Event Grid

特徴

- フルマネージドのイベントルーティングサービス
- イベントベースのアプリや、サーバレスのアプリを簡単にビルドできるようになる
- ほとんどのAzureサービスからのPublish/Subscribeをサポート
    - サードパーティサービスとも連携可
- At-Least-Once（少なくとも1回、重複あり）
- 一度の配信でひとつのイベントを配信

イベントとは

- EventGridを通過するメッセージデータ
- イベントは最大64KB
- 変化の通知が目的でデータは含まれない。多くの場合、データを指すURLや識別子が渡される。

イベントソースとは

- Event Gridにイベントを送信するクライアント
- 種類
    - サブスクリプション、リソースグループ 
    - コンテナーレジストリ
    - イベントハブ
    - Service Bus
    - ストレージアカウント
    - Media Service
    - Azure IoT Hub
    - カスタムイベント

イベントトピックとは

- イベントをグループに分類するもの
- トピックはパブリックのエンドポイントであり、イベントの送信先となる。
- 以下の2種類がある
    - システムトピック
        - Azure組み込みのトピック。
        - Azureサブスクリプションには表示されないが、サブスクライブは可能。
    - カスタムトピック
        - アプリまたはサードパーティのトピック。
        - サブスクリプションに表示される。

イベントハンドラ（サブスクライバ）とは

- Event Gridからイベントを受信するコンポーネント
- 種類
    - Azure Functions
    - Webhook
    - Azure Logic Apps
    - Microsoft Flow

### Event Hubs

特徴

- Event Gridよりも高スループット、多数のパブリッシャー、セキュリティ、回復性を持つ
- キャプチャ機能を利用して、Azure Data LakeまたはBLOBストレージに永続化
- 全ての発行元（パブリッシャー）が認証・トークンが発行される
- At-Least-Once（少なくとも1回、重複あり）
テレワークを快適に行うために 〜ツール編〜

テレワークを行うにあたり、上司や同僚とコミュニケーションを図るために必要なツールを考え、集めてみました。

## Devhub
Devhubはプログラマのための開発支援コミュニケーションツールです。
こちらのツールを使うことで、チャット形式でコミュニケーションを図ることができます。

チャットはタブごとに話題を変え、
1. プロジェクト用の会話
2. 雑談
の2つのタブを作って運用します。

テレワークをするにあたって、他人と話す機会がなくなってしまうので案外「雑談」タブが*重要*な役割を果たすと思います！笑

## Wekan
こちらはカンバンツールです。
このツールを使用して、成果物な管理を行います。

カンバンは
1. Todo(これからすること)
2. Doing(着手中)
3. Done(完了したタスク)
の列を作って運用します。

それぞれの列に配置するタスクは出来る限りシンプルに作成します。
何をもって完了なのかを明確に記載します。

## まとめ
テレワークをするにあたって必要そうなツールを集め、導入しました。
今後は上記ツールをDocker上に構築して運用したいと思います。
他にもこんな便利ツールあるよ、こんな運用したら楽しく仕事できるよ等有ればコメントください。
仮想環境でRails API × Nuxt.jsのアプリケーション開発をしたいが、まずブラウザに表示されない！

## 自己紹介
- 現在プログラミングの学習中の者です
- 言い回しや知識に関して、諸所間違い等あるかと思います
- その際は、ご指摘いただけますと幸いです

## やりたいこと
RailsをAPIとして使用し、Nuxt.jsをフロント側に使用する開発において、
それらを**仮想環境で**開発を開始すること。

具体的には、@saongtx7様が書いてくださった
こちらの記事を仮想環境で進めたいと思ったことがきっかけです。

**[入門]Rails API × Nuxt SPA × Firebase Authで作る Todo Appチュートリアル**
https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f

本当に素晴らしいチュートリアルでした。
この場を借りて感謝申し上げます。

## 問題点
私の場合このような問題が起こりました。
#
- Rails側でポート指定をしてもブラウザに表在されない(rails s -b 5000)
- Rails側でポートを指定せずに起動した場合、Nuxt.jsとポート番号が競合する


## 結論
###1.Vagrantfileへ追記をする
まず、仮想環境のあるディレクトリに移動してください。
Vagrantfileがあると思いますのでテキストエディターで起動し、以下の追記をお願いします。

`Vagrantfile`

```
//省略
  config.vm.network "forwarded_port", guest: 3000, host: 3000
  config.vm.network "forwarded_port", guest: 5000, host: 5000 #追記！
//省略
```
###2.Railsで起動をする際に-b 0.0.0.0を指定する。
大前提としてrails new --apiができており、アプリケーションのディレクトリは完成しているものとします。所定の場所に移動したら、ターミナルで以下を入力し、起動してください。

`rails s -b 0.0.0.0  -p 5000`

###3.Nuxt.jsのpackage.jsonを書き換える
こちらも大前提として、npx create-nuxt-appができているものとします。所定の場所に移動する前に、テキストエディターでディレクトリを開き、直下のpackage.jsonを開いてください。

```package.json
//省略

  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt", //変更後
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

//省略
```
これができたら、通常通り
`npm run dev`
(yarnでインストールしている方は違うかも…？)

そして、`locallhost:3000`にアクセス。
自分はこれで解決し、無事仮想環境でもRails/Nuxtの同時起動ができました！

## 参考


初学者ながら加筆させていただいた部分としましては、
#
- Rails s時の書き方
- Vagrantfileの書き方

以上になります。

超独学プログラマ様の以下の記事に救われました。
本当に何日も悩みましたので・・・

**Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう**
https://blog.cloud-acct.com/posts/spa-nuxt-firstapi/

最後に、初投稿となりますので至らない点もあるかと思います。
何かお気づきの点がございましたら、後学のためご指摘をお願いいたします。
この記事が誰かのためになれば幸いです。
Python で Fizz Buzz! の問題に5パターン挑戦（今だけ398までの数字）

[Python限定のもくもく会](https://tsfcm.connpass.com/event/171853/)で、個人的にFizz Buzz! の問題に取り組んだので、そこでの成果報告です！

# Fizz Buzz の問題にチャレンジ

1~398までの数字で、
3で割り切れれば、「Fizz!」を表示する
5で割り切れれば、「Buzz!」を表示する
3と5で割り切れれば、「Fizz Buzz!」を表示する
上記以外の場合は、そのままの数字を表示する
ヒント：for 文と if 文を組み合わせる

## シンプルにforとifしか使わない例
```sample1.py
for x in range(398):
    x = x + 1
    if x % 3 == 0:
        if x % 5 == 0:
            fb = "Fizz Buzz!"
        if x % 5 != 0:
            fb = "Fizz!"
    if x % 3 != 0:
        if x % 5 == 0:
            fb = "Buzz!"
        if x % 5 != 0:
            fb = x
    print(fb)
```

## andとかorとかelifとかいうものを使う例
```sample2.py
for x in range(398):
    x = x + 1
    if x % 3 == 0 and x % 5 == 0:
        fb = "Fizz Buzz!"
    elif x % 3 == 0:
        fb = "Fizz!"
    elif x % 5 == 0:
        fb = "Buzz!"
    else:
        fb = x
    print(fb)
```

## 関数を使う例
```sample3.py
def fb(x):
    if x % 3 == 0 and x % 5 == 0:
        fb = "Fizz Buzz!"
    elif x % 3 == 0:
        fb = "Fizz!"
    elif x % 5 == 0:
        fb = "Buzz!"
    else:
        fb = x
    print(fb)

for x in range(398):
    x = x + 1
    fb(x)
```

## 再帰呼出しを使った例
```sample4.py
def count(x):
    if x > 1:
        count(x - 1)
    fb(x)

def fb(x):
    if x % 15 == 0:
        fb = "Fizz Buzz!"
    elif x % 3 == 0:
        fb = "Fizz!"
    elif x % 5 == 0:
        fb = "Buzz!"
    else:
        fb = x
    print(fb)
        
count(398)
```

## クラスを使う例
```sample5.py
class FizzBuzz:
    def __init__(self, x):
        self.count(x)

    def count(self, x):
        if x > 1:
            self.count(x - 1)
        self.fb(x)

    def fb(self, x):
        if x % 15 == 0:
            fb = "Fizz Buzz!"
        elif x % 3 == 0:
            fb = "Fizz!"
        elif x % 5 == 0:
            fb = "Buzz!"
        else:
            fb = x
        print(fb)

FizzBuzz(398)
```

# 出力結果

```terminal
1
2
Fizz!
4
Buzz!
Fizz!
7
8
Fizz!
Buzz!
11
Fizz!
13
14
Fizz Buzz!
16
17
Fizz!
19
Buzz!
Fizz!
22
23
Fizz!
Buzz!
26
Fizz!
28
29
Fizz Buzz!
31
32
Fizz!
34
Buzz!
Fizz!
37
38
Fizz!
Buzz!
41
Fizz!
43
44
Fizz Buzz!
46
47
Fizz!
49
Buzz!
Fizz!

...
...
...

386
Fizz!
388
389
Fizz Buzz!
391
392
Fizz!
394
Buzz!
Fizz!
397
398
```

## 問題出典元
たまたまお題が出されたのでやったのですが、下記のURLの問題が大元かと思います。
https://qiita.com/Sekky0905/items/7e2b13f2a001384c7fc4
【vue】 Vueインスタンスの出力結果を調整したい

# はじめに
フロント側からAPIでサーバ側から情報取得する際に、取得データの日時がunixタイムで、このunixタイムをフロントで受けたときに、画面に表示したい場合の方法をメモします。


# 内容

## 結論

filtersプロパティを使う。

## 詳細

```vue 
<template>
    <div v-for="list in lists"> <!-- ←適当にv-forでぶん回して要素を持ってくる -->
        <p>
            {{ list.datetime | datetime }}
        </p>
    </div>
</template>
<script>
export default ({
    filters: {
        // 以下でunixタイムをフォーマットするようにする
        datetime: function(unixtime) {
            // フォーマット処理
        }
    }
})
</script>

```

上記のように、templateの内部のhtml要素に、変換したいものと実行したい関数をパイプで結ぶ。

```
filters はVueインスタンスの出力結果を調整するのに使います。
|(パイプ) で区切ることで呼び出せます。
```

ただし、構成によっては不必要に呼ばれる場合などあるので
computedプロパティの中で定義してもいいと思います。

```vue 

<script>
export default ({
    computed: {
        // 以下でunixタイムをフォーマットするようにする
        datetime(unixtime) {
            // フォーマット処理
        }
    }
})
</script>
```

以上。
Vue.js で Font Awesome を使う

Vue.jsでFont Awesomeを使うのに少しだけ詰まったのでメモ程度に残しました。

###npmインストールする

```bash
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/vue-fontawesome
```

### main.jsに以下のコードを追加

```main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
```

### Font Awesomeで使いたいマークを調べる（今回はsearch）
https://fontawesome.com/icons/search?style=solid
iタグをそのまま使わず、「これを使う」の部分のみvueでは使います。

<img width="681" alt="スクリーンショット_2020-03-31_19_35_43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491279/c11c9111-41e7-494d-73f8-b40881cbdac6.png">

```App.vue
<!-- 先ほどのfasとsearchを入れる -->
<template>
  <div class="app">
    <h1>検索<font-awesome-icon :icon="['fas', 'search']" /></h1>
  </div>
</template>
```
以下のように表示されるはず
<img width="200" alt="cT7UzMcaVUoQNx31585651451_1585651471.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491279/da63b09e-28f9-5724-a2ed-ae866a6663fd.png">

#詰まったところ

```vue
:icon="['fas', 'search']"
:icon="['far', 'building']"
:icon="['fab', 'artstation']"
```
このようにfas、far、fabの指定し、その後ろにアイコン名を入力する必要あり。

参考: https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs
Windows上のDockerコンテナ内でGitコマンドを実行しようとすると「Operation not permitted」というエラーが出るときの対応

# 環境
- Windows10 Pro 64bit
- VSCode 1.43.2
- Docker for Desktop 2.2.0.4
- VSCode Remote-Containers使用

# エラー内容
```
bash-5.0# git status
fatal: failed to read object xxxxxxxxx: Operation not permitted
```

# 対処方法
エクスプローラーで該当プロジェクトの`.git`フォルダのプロパティを開き、
`Read-only (読み取り専用)`のチェックを外すと問題なくGitコマンドが実行できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189802/d26c6095-ec77-5f88-87af-483abc30fa78.png)