OmniAICreator/Qiita-1.07M huggingface dataset:
nancy CShapePrinting

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Printing;

namespace CShapePrinting
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        public Graphics _output;

        private void button1_Click(object sender, EventArgs e)
        {
            PrintDocument pd = new PrintDocument(); 
            pd.PrintPage += new PrintPageEventHandler(pd_PrintPage);
            

            pd.Print();            
        }
        private void pd_PrintPage(object sender, PrintPageEventArgs e) 
        {
            #region ComentOut Fit    
     
            //拡大率を指定．
            //float zoom = 1;
            //float padding = 20;

            //これはフィットさせる仕方なのでのこしておく
            //if (_bitmap.Width > e.Graphics.VisibleClipBounds.Width)
            //{
            //    zoom = e.Graphics.VisibleClipBounds.Width /
            //        _bitmap.Width;
            //}
            //if ((_bitmap.Height + padding) * zoom >
            //        e.Graphics.VisibleClipBounds.Height)
            //{
            //    zoom = e.Graphics.VisibleClipBounds.Height /
            //        (_bitmap.Height + padding);
            //}
            #endregion 

            GraphicsUnit _printpage_unit = GraphicsUnit.Millimeter;

             e.Graphics.PageUnit = GraphicsUnit.Millimeter;

            string[] dir = System.IO.Directory.GetFiles(@"D:\dakarakuji_img\","*.jpg", System.IO.SearchOption.AllDirectories);
            
            foreach ( string n in dir )
            {

            }
            
            Bitmap _bitmap1 = new Bitmap(@"D:\dakarakuji_img\1.jpg");
            Bitmap _bitmap2 = new Bitmap(@"D:\dakarakuji_img\2.jpg");
            Bitmap _bitmap3 = new Bitmap(@"D:\dakarakuji_img\3.jpg");


            //int Width = _bitmap1.Width;
            double PhigicalWidth = (double)_bitmap1.Width / (double)200 * 25.4;
            //int Height = _bitmap1.Height;
            double PhigicalHeight = (double)_bitmap1.Height / (double)200 * 25.4;
            
          
           
            //パーツとなるイメージのサイズ
            RectangleF rectFpartsOfImage = new RectangleF(0, 0, (float)PhigicalWidth, (float)PhigicalHeight);

            e.Graphics.DrawString(DateTime.Now.ToString("yyyy年MM月dd日 (dddd) tt hh時mm分ss秒"),
                                 new Font("MS UI Gothic", 11), Brushes.Black, new Point(10, 0));

            e.Graphics.DrawImage(_bitmap1, 10, 10, rectFpartsOfImage, _printpage_unit);
        
            //二個目
            
            e.Graphics.DrawImage(_bitmap2, 10, 110, rectFpartsOfImage, _printpage_unit);

            //三個目　 
            
            e.Graphics.DrawImage(_bitmap3, 10, 210, rectFpartsOfImage, _printpage_unit);
            
        } 
    }
}
競プロ　デビュー戦記　AtCorder Beginner Contest 160 

#デビュー戦　〜AtCorder Beginner Contest 160〜 
データサイエンティストとして勤務してちょうど1年が経ち、自分のコーディングの実力を客観的に知りたいと思いAtCorderに挑戦してみました。

と言っても普段業務で使っているSASでは参加できないので、ひまひまに触っていたPythonの文法をさらっと復習しAtCorderの使い方を覚えvscodeでテストできる環境を整えいざ出陣!!

とりあえず3完ぐらいできればいいかなくらいのノリで!

実際の問題は以下のリンク参照
https://atcoder.jp/contests/abc160/tasks

##A - Coffee
与えられた長さ6の英小文字がcoffeeに似ているかを判定する問題。
競プロ経験者からすると瞬殺する問題らしいのだが文字列を1文字づつ取りだすという基礎中の基礎もおろそかだったのでこの問題で9分消化(泣)

```Python
N = input()
if N[2] == N[3] and N[4] == N[5]:
    print("Yes")
else:
    print("No")
```
##B - Golden Coins
両替を扱ったAtCorderの序盤では定番の問題。
数値変数の入出力と四則演算をコードに落とせれば特に問題なし。
と言いつつもこの問題でも10分消化。我ながら変数名のセンス無さすぎる(笑)

```Python
N = int(input())
ppp = N // 500
NN = N-500*ppp
pp = NN //5
ans = 1000*ppp+5*pp
print(ans)
```
##C - Traveling Salesman around Lake
ここからが自分的には山場のC問題
AB問題では設問内容をそのままコードに落とし込めば良かったのだが、
C問題からはそういう訳にはいかないのでちょっと厄介。

今回は池の周りに立っている全ての家を訪問する為の最短経路を求める問題
処理自体はすぐに思いついたのだが実装できるかは別問題(泣)

提出した間違っているコード⬇︎

```Python
K, N = map(int, input().split())
arr = list(map(int, input().split()))
for i in range(N-2):
    sa =int(arr[i+1]-arr[i])
    ssa =int(arr[i+2]-arr[i+1])
    max_num = max(sa,ssa)
 
hasi = K-arr[N-1]+arr[0]
ans =K-(max(max_num,hasi))
print(ans)
```

List.appendの処理をループする方法(超基礎)を思いついたので
なんとか制限時間内に完成できた!!（この時点で80分経過)

エラーが出た訳ではないのでデバッグにかなり時間がかかってしまった。
ちなみにこの問題はC問題にしてはかなり簡単な方らしい
⬇︎通ったコード

```Python
K, N = map(int, input().split())
arr = list(map(int, input().split()))
List=[]
for i in range(N-1):
    sa =int(arr[i+1]-arr[i])
    List.append(sa)
 
max_num = max(List)
hasi = K-arr[N-1]+arr[0]
PPP = (max(max_num,hasi))
ans = K-PPP
print(ans)
```

##D - Line++

なんかグラフとか最短経路とか出てくる問題だった。
到底残り15分で解ける問題じゃないのでここでギブアップ
ちなみにweb系エンジニアの友達は解けたらしい

##結果

![スクリーンショット 2020-04-04 11.27.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546892/b27cbfad-4b89-2028-3095-023afc08228b.png)

9767人中7167位とまあデビュー戦にしては健闘したのでは(笑)
ただ思ったよりレーティングが上がらない。
コロナで時間あるし暫く本腰入れてやってみよう!!
git submodule

# 課題
submoduleを持つリモートリポジトリをローカルにgit cloneした際に、submoduleがあるはずのフォルダが空になっている。

# 解決
git cloneした後に、以下のコマンドを打つ

```
git submodule init
```

```
git submodule update
```

該当のフォルダをlsするとsubmoduleのフォルダやファイルがきちんと存在している。
Systems Managerエージェントが通信できないEC2一覧の取得


### 環境
以下の条件に当てはまる環境で、よく発生する問題です。

 - 多数のEC2を構築・運用している
 - Systems Manager(SSM)を使用できるように各種セットアップ済みである
 - Systems ManagerのランコマンドやPatch Manager等を利用している
 
### 多数のEC2でSystems Managerを利用すると

正しく構成していれば、各EC2のSystems Managerエージェント（SSMエージェント）はSystems Managerサービスと通信できます。
通常は、何ら問題ないです。

しかしながら何らかの原因で、一部のEC2でSSMの通信ができないケースが出てきます。
（原因は本当に色々あって、*IAMの設定不備、VPCルーティング設定不備、セキュリティグループ設定不備、SSMエージェントが落ちている、SSMエージェントのバージョンが古い、169.254.169.xxx の通信など、、*多岐にわたります）
多数のEC2を運用していると、SSMの通信できないEC2の原因を調べるよりも、**どのEC2が通信できててどのEC2が通信できてないかをそもそも見つけにくい** 状況だったりします。

### SSMの通信NGをなぜ見つけにくいのか

マネージメントコンソールで、Systems Managerのマネージドインスタンスを見ると、対象EC2のリストが確認できます。
ただし表示されるのはSSMエージェントと通信が確立できたEC2であり、**全く通信できていないEC2はリストに表示されません。**
また、EC2を停止すると**リストからも消えてしまいます。**

### API/CLIで通信できないEC2一覧の取得

そこで２つのコマンドを使います。

**コマンド１つ目**
``aws ec2 describe-instance-status``
APIの場合は、
``ec2:DescribeInstanceStatus``
を実行すると、稼働している(runningステータス)のEC2一覧が取得できます。

そして**コマンド２つ目**
``aws ssm describe-instance-information ``
APIの場合は、
``ssm:DescribeInstanceInformation``
を実行すると、SSMエージェントの通信OKなEC2一覧が取得できます。

欲しいのはrunningのEC2にもかかわらずSSMの通信NGの一覧です。
それを得るには、**コマンド１つ目のEC2一覧　から　コマンド２つ目のEC2一覧を引いたもの** を抽出すればよいです。
インスタンスIDで突き合せられます。

インスタンスIDじゃ分からないよ！という場合はさらにタグなどを取得します。
https://qiita.com/t-fujiwara/items/835cccbef7ec6d199251


なお、停止しているEC2は調べようがありません。まずは開始させましょう。

---

- [SSMのススメ〜運用自動化への一歩〜 (Qiita)](https://qiita.com/takuya_tsurumi/items/1f419a9c7638498d4af1)
- [AWS Systems Manager Session Manager でセッションを開始できない時に確認すること (Qiita)](https://qiita.com/kyoshidajp/items/16364b5c9b7ae161a7b6)
jQueryでページ離脱直前(ページを閉じる前)にリクエストを投げる(sendBeaconを使用)

WEBサイトやWEBアプリケーションを開発していると、
ページ滞在時間を計測したい場合など、
ページを離れる直前にどこかにリクエストを投げたいケースがあるかもしれません。

僕は、ユーザーがどのページにどれくらいいるのか計測したいシーンがありました。

ただ、ページを離れる直前にどこかにリクエストを投げる方法は案外出回っておらず、
かつ普通にページ遷移直前にサーバーにリクエストすると
ページ遷移したあとリクエスト処理が中断されるみたいなことがあり、
僕は割と困ったのでシェアします。

注意点は、POSTリクエストしか送れないこと。（GETやPUTを送る方法があればぜひ教えてください。）

そして今回はjQueryを想定して書いてます。
ReactやVueなんかだともっと簡単に書けるのかな？

結論からいうと以下のコードでできます。

```app.js
$(window).on('beforeunload', e => {
    const blob = new Blob([{}], { type: 'application/x-www-form-urlencoded' });
    navigator.sendBeacon('送りたいURL', blob);
    e.preventDefault();
})
```
## 使用環境
Chrome
Laravel
ES6

## 解説

### beforeunload
beforeunloadでページ遷移直前の処理をかけます。
通常はなにか編集中の画面で保存せずに画面遷移をしようとした時に、
「このままページを離れますか？」
といったメッセージを出す用途で使われるっぽい。

### sendBeacon
sendBeaconを使います。
ベーコンじゃないです。
センドビーコンです。

「ビーコン」とは何かを誘導したり、信号を送ったりするものを指す言葉です。
灯台や狼煙（のろし）という意味があるので、
複雑なことは考えずとりあえず投げつけますよ的なニュアンスで僕は捉えています。

axiosだったり他の方法でリクエストすると、リクエスト直後にページ遷移した場合に、そのリクエスト処理が中断されるっぽい。
だから、リクエストをサーバーに投げつけてかつちゃんと処理をやってもらうには、sendBeaconを使わないといけないっぽい。

ただし、sendBeaconはPOSTしか投げられないので要注意。GETとかでこれやりたいシーンもあるよなぁ。わかる方いれば教えてください。

かつ、Content-typeが`application/json`だとcorsに引っかかる（ブラウザの仕様？）ので、
`application/x-www-form-urlencoded`で送っています。
[Blobの第一引数にリクエストボディをセットしてあげることも可能です。](https://hokaccha.hatenablog.com/entry/2018/11/08/231130)

### e.preventDefault()
これをいれることによってデフォルトの挙動をキャンセルしてます。
デフォルトの挙動だと
「このままページを離れますか？」
っていうメッセージが出ちゃうみたいなので。（この辺曖昧）
引数のeを受け取らず、かつこのe.preventDefault()を受け取らないって方法も全然ありな気がする。
めんどくさいので試してないし、あんまりこの辺わからないので、気になる方はやってみてください。


以上！
Docker Executor内に構築したDockerコンテナへのWebアクセス方法

本記事は以前書いた記事から最もハマった場所を抜粋したものです。
簡潔にトラブルシューティングのみ記載していきます。

全体の流れが知りたい方は以下の記事をご覧ください。
[Docker in Dockerを利用してCIを構築してみた](https://qiita.com/zousan010sanpotyu/items/8dcc2634d55d45895497)

# やりたいこと
Docker Executor内に構築したDockerコンテナに対してcurlコマンドでアクセスを行い、応答が返却されるかをテストします。
用途はCI環境をDockerを利用して構築し、WebアプリもDockerコンテナとして作成したいケースが考えられます。

<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314894/5791964a-0ada-427d-56e6-3583bb81b80b.png">


# ハマったこと
IPアドレスを動的に取得してアクセスを試みましたができませんでした。
IPアドレスは取得できているにも関わらずTimeoutエラーが発生します。

```
 $ export CONTAINER_ADDRESS=$(docker inspect -f "{{.NetworkSettings.IPAddress}}" 
 ${CONTAINER_NAME})
 $ echo ${CONTAINER_ADDRESS}
 172.18.0.2
 $ curl http://${CONTAINER_ADDRESS}:80/${APP_NAME}/hello
   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                  Dload  Upload   Total   Spent    Left  Speed
   0     0    0     0    0     0      0      0 --:--:--  0:00:31 --:--:--     0
 curl: (28) Failed to connect to 172.18.0.2 port 80: Operation timed out
```

# 解決策
GitLabCIではservicesで定義したコンテナにアクセスする場合、定義した時の名前を使用する必要があります。
今回は.gitlab-ci.ymlファイル内で

```yml
services:
    - docker:dind
```
と定義していたため、dockerをホスト名として指定します。

```
 $ curl docker:80/${APP_NAME}/hello
   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                  Dload  Upload   Total   Spent    Left  Speed
 100    13  100    13    0     0     55      0 --:--:-- --:--:-- --:--:--    55
 Hello, World!
```

# 参考URL
[Accessing the services](https://docs.gitlab.com/ee/ci/docker/using_docker_images.html#accessing-the-services)
[Docker Container Networking with Docker-in-Docker](https://stackoverflow.com/questions/44830663/docker-container-networking-with-docker-in-docker)
Django REST frameworkでpreflight requestが上手くいかない

# 概要

※ 調査中。未解決です。暫定的な方法で解決しています。

フロント側から`axios.post` でDjango(REST framework)にPOSTリクエストを送ると、Response to preflight request doesn't pass access control となってしまう。ajaxで送ってみたところ、正常にレスポンスが返ってきました。
色々試してみた結果、おそらくaxiosかdjango-cors-headerの使い方が悪そうです。


環境

- Django 3.0.3
- djangorestframework 3.11.0
- django-cors-header 3.2.1
- heroku

# 経緯

Django REST frameworkで作ったAPIを、Vue.jsで作った画面から呼び出して使うアプリケーションを作ろうとしておりました。某イベント開催に向け、便利なLINEアプリを作るためです。

## Django REST frameworkでviewの作成

本家の[チュートリアル](https://www.django-rest-framework.org/tutorial/1-serialization/)をChapter3 くらいまで呼んで、簡単なviewを作成しました。
そして、ブラウザからAPIが想定通り動作することを確認。

## django-cors-headerでCORSの設定

フロント側にVue.jsを使うため、CORSを許可します。

django-cors-headerで以下のように設定。
これによって、GETリクエストが通るようになりました。
しかし、POSTの時に送られるpreflight requestが正常に帰ってこない...

``` python:settings.py
# 変更部のみ抜粋
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app.apps.AppConfig',
    'rest_framework',
    'corsheaders'  # 追加
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 追加
    'django.middleware.common.CommonMiddleware',  # 追加
]
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',  # フロントのサーバー
]
```

# 調査

## preflight requestの行き先

preflight requestは、optionsで飛ぶようなので、APIサーバ側でoptionsリクエストが受け取れないようになっているのかもしれません。
そこで当該viewにoptionsを処理する部分を明示的に作り、Pycharm のデバッガでOPTIONSリクエストの行き先を確認してみます。

```python:views.py
from rest_framework.views import APIView

# --- 中略 ---

class ClassBasedView(APIView):

    def post(self, request, format=None):
        # 処理

    def options(self, request, format=None):
        # 処理
```

viewsの`axios.post` からのリクエストは、`options`の部分には到達していない様子。
しかし、curlでリクエスト送ると、`options`に到達します。
また、viewを関数ベースのものに変えてみても状況は同じでした。

ということは、django-cors-headerの使い方がどこか間違っているのでしょうか。。。

## axiosの調査

一方で、試しにajaxでpostリクエストを送ってみると、正常にレスポンスが帰ってきました。
Django側のログを見てみると、OPTIONSリクエストは受け取っていない模様。
つまり、preflight requestの受け渡しが上手くいっていないようです。

```javascript
// headerの設定
axios.defaults.headers.post['Access-Control-Allow-Origin'] = 'http://localhost:3000';
axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';

axios.post(url, params) // こっちはだめ

$.ajax({url:url, type:'POST', data: params}) // こちらはリクエスト成功
```

# まとめと今後

ajaxでデータ取得できたので、~~当面はajax使って開発を進めることにしました~~ 。
(コロナショックでアプリ自体が不要になってしまいました...)

今後は、以下を調べてみようと思います。

- Djangoでpreflight requestがどう処理されるのか(django-cors-header の詳細な使い方)
- axiosでpreflight requestがどうやって送られるのか
「Arduinoで学ぶ組込みシステム入門」をテストエンジニアやQAにおススメする3つの理由

##1. はじめに
「[Tomorrow's software testing for embedded systems～明日にでも訪れてしまう組込みシステムのテストの姿～](https://www.slideshare.net/YasuharuNishi/tomorrows-software-testing-for-embedded-systems-japanese)」で登場するMBD(モデルベース開発)やMBT(モデルベーステスト)をイマイチ理解していない感じがあったのですが、たまたま本屋で手にした「[Arduinoで学ぶ組込みシステム入門](https://www.morikita.co.jp/books/book/3253)」がArduinoでモデルベース開発を謳っていて読んだところ、下記の理由でテストエンジニアやQAにおススメと思いました。

- コンピュータアーキテクチャの基礎的なところが整理されている
- モデルベース開発がわかる
- 組込みシステムを開発できるとテストツール開発やテスト自動化に役立つ

今時の大学生は組込みシステムの基礎的なところを大学で学べてちょっと羨ましいですね。

##2.コンピュータアーキテクチャの基礎的なところが整理されている
主なキーワードを以下に挙げます。

###2.1 ハードウェア
- コンピュータを構成する5大装置
- コンピュータに求められる性能とトレードオフ
- アーキテクチャ(フォン・ノイマン型、ハーバード型)
- CPUの構成要素(ALU、レジスタ、アキュムレータ、プログラムカウンタ、スタックポインタなど)
- 命令に関するもの(命令の種類、命令の実行サイクル、命令体系、パイプライン)
- 消費電力
- メモリの種類と入出力インターフェース

###2.2 ソフトウェア
- アプリケーション、デバイスドライバによるハードウェア制御、マルチタスク、組込みソフトウェアの階層構造
- リセット解除からプログラムがロードされて実行されるまでのシーケンス
- オブジェクトとセクション、コンパイルとリンク、ROM化
- メモリ配置(プログラム、スタック)
- 割込み処理
- プログラムの実行とメモリの状態
- プログラムの実行順序の制御

なお、スタック領域は登場するもののヒープ領域は登場しないことから本書のテーマはあくまでも(Arduinoを題材にした)組込みシステムであってOSを使う組込み機器の開発ではないことが読み取れます。

##3. モデルベース開発がわかる
5章～8章がモデルベース開発の話になります。

5章はモデリングとモデルの書き方です。状態遷移関数δや出力関数ωといった用語も登場します。順序機械の表現に用いられている状態遷移図や状態遷移表はテストの教科書でも出てきますが状態遷移表に出力の欄が追加されている記法はこういう書き方もあるのだなあと。

6章は組込みシステムの実装法です。システムを構築しようとするとモデル、ハードウェア制御、電子回路が登場して煩雑にならざるを得ないのですが、6.6節(順序機械の配列による実装)の実装はモデルとハードウェア制御が切り離されて見通しが良く、この方法を知れただけでもモトを取った感じです。この章のおかげでMBD/MBTの理解がだいぶ進みました。モデルそのものを実装できればテストしやすくなりますね。

7章はチャタリング除去やビジーウェイト、ポーリング、割込み、デッドロック、ビット演算といった、ソフトウェア開発の足回りが取り上げられています。

8章はテストの章です[^1]。テスト技法は、動的テストとして同値分割、境界値分析、制御パステスト、状態遷移テストが取り上げられているほか、詳細は割愛されているものの静的テストとしてデータフロー解析やモデル検査、形式手法といったワードが登場します。章の最後はありがちな回路実装ミスやコーディングミスが紹介されています。

##4. 組込みシステムを開発できるとテストツール開発やテスト自動化に役立つ
組込みシステムの概要や仕組み、データの扱いは1章に、入出力のための主な電子部品は2.4節に、Arduinoを使った組込み機器の開発[^2]は4章にまとまっているほか6章以降に適宜登場します。最後の9章で組込みシステムとパソコンの協調動作を題材にした実践的な組込みシステム開発が取り上げられています。

必ずしもArduinoでなくても構わないのですが代表的なArduinoであるUno R3はオリジナルが[3,300円(税込)](https://www.switch-science.com/catalog/789/)、互換品なら1,000円程度、ブレッドボードや各種電子部品を揃えても数千円程度と入手性が良く、自分は「[ストップウォッチを使う性能テストを実ステップ300行に満たない自動テストシステムで自動化する](https://qiita.com/pbjpkas/items/d525d7d19095d1e26452)」に使用しています。組込みシステムを開発できるとテストツールの開発やテストの自動化に役に立ちます。

##5. おわりに
これ一冊で、1)コンピュータアーキテクチャの基礎の振り返りができる、2)モデルベース開発がモデリングから実装、テストまで押さえられている、3)Arduinoを活用した組込みシステムの実装方法がわかる、と3度おいしい＆大学の教科書なので基礎的なトピックスが多く賞味期限の長い本でした。本来の対象者である大学生だけでなくテストエンジニアやQAの方にもおススメです。

[^1]: 8章の一番最初が「品質保証のためのテスト」で、学生のうちから品質保証を知ってもらえると思うとQAとしては大変嬉しいですね。
[^2]: Arduino IDEを使ったプログラムの書き方と、LEDや圧電スピーカー、サーボの接続の仕方のようなArduinoで電子工作するときの基本的な話
Linux(ubuntu）にruby on rails 6.0の環境構築をする（2020.4.1）

どうものぶおです
今回はubuntuでruby on rails6の開発環境を作っていきます

これまでmacで開発していたんですが、別に持っていたwindowsのPCをHDDからSSDに変換して超サクサクに動くようになったため、こちらでruby on rails を使えるようにしていきたいと思います

#Rubyをインストール
インストールに必要なaptを更新します

```
sudo apt-get update
```

``` ~/
sudo apt-get -y install git curl g++ make zlib1g-dev libssl-dev libreadline-dev libyaml-dev libxml2-dev libxslt-dev sqlite3 libsqlite3-dev nodejs
```

ホームディレクトリに移動します

```
cd
```

```
git clone git://github.com/sstephenson/rbenv.git .rbenv
```
パスを通します

```
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
```
```
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
```
```
exec $SHELL
```
```
mkdir -p ~/.rbenv/plugins
```

作成したディレクトリに移動

```
cd ~/.rbenv/plugins
```

git上のファイルをクローンします

```
git clone git://github.com/sstephenson/ruby-build.git
```

rubyのバージョン(今回は2.6.3)を指定してinstallします

```
rbenv install 2.6.3
```

使用するrubyのバージョンをコンピュータに知らせます

```
rbenv global 2.6.3
```

rubyが正常にインストールされているか確認します（バージョンが表示されます）

```
ruby -v
```

## Ruby on railsをインストール
(最新版の6.0がインストールされます)

```
gem install rails
```

###実際にRailsで作成できるか確認
まずはアプリを作成します

```
rails new sampe-app
```
作成したアプリのディレクトリに移動します

```
cd sample-app
```
サーバーを起動

```smaple-app
rails s
```

しかし以下のようなエラーが・・・。


```
︙
 Webpacker configuration file not found /home/nobu/.rbenv/plugins/sample-app/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory

```
書いてあるとおり　`rails webpacker:install`を実行してみると今度は別のエラーが

```
Yarn executable was not detected in the system.
```

Yarnがないのでインストールすることに

```
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
```

```
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
```

```
sudo apt-get update && sudo apt-get install yarn
```

完了しました。
もう一度`webpacker`をインストール

```
rails webpacker:install
```

完了したらもう一度'rails s'でサーバーを起動し、ブラウザ（chromeやexplolerなど)でいかにアクセスします
(わからない人はコピーして検索欄に貼り付けましょう)

```
localhost:3000
```
これで以下のような画面がでたら完了です
（わーい）

![Screenshot from 2020-04-01 23-22-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522280/0134dd53-7d79-95f0-b076-ad5a2722db99.png)
Flutter 画面遷移でデータを渡す

こちらの記事の続きになります。
https://qiita.com/kasa_le/items/8c80ae565186c9ac275a

# ゴール
List-Detailな画面構成などで、次に遷移しようとしている画面に動的にデータを渡せる。

# 参考サイト

こちらのそのままです。
https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

# 実装
上記の記事の、

- [Alternatively, extract the arguments using onGenerateRoute](https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments#alternatively-extract-the-arguments-using-ongenerateroute)

のパターンで行くことにしました。
各画面クラスで`ModalRoute.of(context).settings.arguments`として取得するのは、AndroidでいうIntentっぽくて良いかなと思ったのですが、テストするときに問題があると判明し、そのようにしました。

## 1.引数クラス

```Dart
class RecordData{
  RecordData(this.datetime, this.message, this.count);

  final DateTime datetime;
  final String message;
  final int count;
}
```

こんなクラスのデータをまるっと渡したいとします。

## 2.マテリアルルートの変更

```Dart
   return MaterialApp(
      // Navigator
      navigatorKey: locator<NavigationService>().navigatorKey,
      routes: {
        '/': (context) => HomePage(),
        '/next': (context) => NextPage(),
      },
      initialRoute: "/",
```

こうなっていたのを、次のように書き変えます。

```Dart
      navigatorKey: locator<NavigationService>().navigatorKey,
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/':
            {
              return MaterialPageRoute(
                  builder: (context) => MainPage());
            }
          case '/input':
            final RecordData args = settings.arguments;
            return MaterialPageRoute(
                builder: (context) => NextPage(date: args));
          default:
            return MaterialPageRoute(
                builder: (context) =>
                    Scaffold(
                      body: Center(
                        child: Text('No path for ${settings.name}'),
                      ),
                    ));
        }
      },
```

## 3.遷移時にデータオブジェクトをセットする

前回の記事でViewModel側に書いた遷移処理を修正します。

```dart
  void navigateNextPage(RecordData record) {
      // ルート遷移
      final NavigationService _navigationService = locator<NavigationService>();
      _navigationService.navigateTo('/input', args: record);
  }
```

`args:`で渡すだけですね。

テストのためと書いたのは、`NextPage`を単体テスト(Widget Test)するときに、コンストラクタでデータを渡したいからです。
そのように作ってしまったので、既に作成済みのテストコードを生かすためこの方法を採りました。
テーブルを作成するSQL文

今回は、ターミナルでテーブルを作成していきたいと思います！

どういう風に作成するのか、以下のSQL文を見てみましょう＾＾

```
CREATE TABLE テーブル名 (カラム名 カラム名の型, ……);
```
Railsでテーブルを作成するときは、`rails g model モデル名`でテーブルに紐付けるモデルを作成
して、その時に作成されたマイグレーションファイルを`rake db:migrate`で実行！という順序でやってきました

この`rake db:migrate`が実行される裏では、この`CREATE TABLE`というSQL文が動いていたのです！

それでは、実際にテーブルを作成していきましょう！
と、その前にMySQLでの数字型や文字列型の定義方法を確認しておきましょう＾＾

Railsでは、数字を入れる型には"**Integer**"、文字列を入れる型には"**String**"が使われていました

MySQLではそれらを以下のように定義します

| 型名 | 保存できる値 |
| :----|:----|
| INT | 数字 |
| VARCHAR(M) | 最大M文字の文字列 |

これらを使い、"**INT**"型のカラム"**id**"と、"**VARCHAR(250)**"型のカラム"**subject**"のある"**lessons**"テーブルを作成してみましょう！

```
CREATE TABLE lessons (id INT, subject VARCHAR(250));
```

以下のように表示されれば、SQLは正しく実行されています＾＾

```
mysql> create table lessons (id int, subject varchar(250));
Query OK, 0 rows affected (0.17 sec)

mysql>  
```

下の画像のように、`SHOW TABLES;`で"lessons"テーブルが確認できれば、テーブルが正しく作成れたことが確認できます！
![スクリーンショット 2020-04-01 23.26.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555660/ad737a11-4a3c-67ba-ae42-90f4c5689507.png)


本日はここまで！お疲れ様でした＾＾
[Nuxt.js] アップデート後にスーパーリロードを促す

# 背景

Nuxt.js（SPA）＋APIでWebサービスを公開しているのですが、SPA側をアップデート後に

ユーザ「エラーが出ます / 表示が崩れます」
私「キャッシュを消して再読み込みしてみてください」
ユーザ「直りました」

の流れが良くあります。
（キャッシュの消し方がよくわからないという問い合わせも受けたりします）  

キャッシュさせずに毎回読み込ませれば良い話ではあるのですが、
SPAなので初回読み込みに時間がかかるため、
できれば必要な時だけうまく再読み込みさせたい・・・という悩みがありました。

# 解決方法の概要

以下のようにして解決しました。

**処理**

* API側に「期待するクライアントのバージョン」を返すエンドポイントを作成する
* クライアント側はページ遷移ごとにそのAPIをコールし、  
「期待するクライアントのバージョン」と実際に動作しているクライアントのバージョンを比較  
クライアントのバージョンのほうが古い場合はスーパーリロードを促す

**アップデート時の手順**

* アップデートさせたい更新がある場合はクライアント側バージョンをインクリメントしてデプロイ
* クライアント側のデプロイが完了したらAPI側が「期待するクライアントのバージョン」を上げる  
（先にAPI側を上げると無限スーパーリロード地獄になるので注意）

# 詳細

簡略化して雰囲気で記載しています。

## API側

省略。ここでは `http://localhost:8080/version` をコールしたら以下のレスポンスが返ってくるものとします。

```json
{
  "expect_client_version": 1
}
```

私はサボってDBでバージョン番号を管理し、それを返すだけにしています。

## Nuxt.js側

ページ遷移ごとにチェックさせたいので、`middleware`を使います。
`axios`については設定の記載を省略していますが、
`baseURL`に`http://localhost:8080`が設定されています。

```js:middleware/version.js
const version = 1 // 簡単のためここにクライアント側バージョン直書き

export default async function({ app }) {
  const res = await app.$axios.$get('/version')
  // 期待するバージョン以上なら何もしない
  if (res.client_version <= version) return
  // 反映させるためにスーパーリロードを促す
  if (
    window.confirm(
      '新しいバージョンが配信されているため最新バージョンに更新します。'
    )
  ) {
    location.reload(true)
  }
}
```
コメントにある通り、クライアントが期待されるバージョンよりも低かった場合はダイアログでスーパーリロードを促します。

```js:nuxt.config.js
export default {
  // ...省略

  router: {
    middleware: ['version']
  },
  
  // ...省略
}
```

これでページ遷移ごとに`version.js`の内容が実行されるようになります。

## アップデート時

### クライアント側のバージョンを上げる

```js:middleware/version.js
const version = 2

// ...省略
```
  
### クライアント側をデプロイする

この時点で以下の状態になります。

* APIから返ってくる「期待するクライアントのバージョン」は1
* ユーザが利用しているクライアントのバージョンは1と2が混在

### APIが返す「期待するクライアントのバージョン」を上げる

DB管理ならupdateなど。

```json
{
  "expect_client_version": 2
}
```

を返すようにします。
これでバージョン1のクライアントを使用している人だけ再読み込みを促され、
再読み込みするとバージョン2になります。

# 余談

要件次第ですが、APIのレスポンスに常に「期待するクライアントのバージョン」を含めて、
`axios`の呼び出しの度にチェックするのもありだと思います。
Twitter API 申請時の失敗と改善方法(API の使い方追加しました)

## (追記)Twitter API の活用・使い方はこちらから
[Tweepyでツイートを取得](https://qiita.com/i_am_miko/items/a2e5168e619ed37afeb9)
[【Python】tweepyを使ってツイートを全取得し、エクセルファイルに落とし込む](https://karupoimou.hatenablog.com/entry/2019/07/04/185418)
[TwitterAPIを用いた会話データ収集](https://qiita.com/gacky01/items/89c6c626848417391438)

[初心者向け！PythonでTwitterに自動ツイートするプログラムを作る方法](https://i-yusuke.com/entry/twitter-bot/)
[Twitterデータを用いたチャットボットの訓練
](https://qiita.com/gacky01/items/b786b2a097bf473176e8)
[【Python】ドナルド・トランプにおけるTwitter民の感情分析](https://note.com/octoparsejapan/n/n7ddb205ca0f8)


# 経緯
2020年1月時点の情報となります。
Twitter API 登録 (アカウント申請方法) についてちょっと苦労したのでまとめました。
結果としてTwitter API 登録は承認されましたが、途中少し苦労したので備忘録。
API 初心者向けです。

# 環境
Macbook: MacOS Mojave

# 準備
ある程度の英語力( Google 翻訳でもOK! )
*API の利用目的を英語で書く必要があります。

# Twitter API 登録 (アカウント申請方法)

### *Twitter API 登録申請手順
[Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ　※2019年8月時点の情報](https://qiita.com/kngsym2018/items/2524d21455aac111cdee)
*上記記事に画像付きで手順が載っているのでとても分かりやすいです。参照ながら登録してみてください。


# まさかの申請却下！！！...からの判明した注意点
この記事の本題。
私は[上記記事](https://qiita.com/kngsym2018/items/2524d21455aac111cdee)の手順でサクサク申請を進めたところ、申請を2度却下されてしまいました。。。


その後、申請文の内容や利用目的を変更するなど色々試したところ、
「Twitter API使用用途の入力」の「３．Twitterデータを外部公開する場合はその方法と公開場所を説明」について
#####「外部公開を "yes" にしていたことが原因」だったと分かりました。
##### どうやら分析内容に関わらず、外部公開をしようとすると申請が却下されやすくなるようです。

私はどうしても外部に公開しないといけない状況ではありませんでしたので、"No"にしました。
(もしかしたら将来的にデータ分析の結果を外部に発表するかも? と思い、念の為に "yes" にしていたのがいけなかったようです。)

## まとめ
Twitter API を申請する際はなるべく「外部公開」を "No" にしておきましょう！
*虚偽の報告はダメです。外部公開を予定されている方はきちんと報告しましょう。

## 参考・引用元

[開発者契約およびポリシー (公式)](https://developer.twitter.com/ja/developer-terms/agreement-and-policy)
[Automation rules (公式)](https://help.twitter.com/en/rules-and-policies/twitter-automation)

API 申請方法
[Twitter Developer (公式)](https://developer.twitter.com/en)
[Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ　※2019年8月時点の情報](https://qiita.com/kngsym2018/items/2524d21455aac111cdee)
Racketで抽象データ型を作る

Racketで抽象データ型（実装を捨象して、コンストラクタとデータを操作する関数だけを意識して使えるデータ型）を定義するのどうやればいいんだろう、となり、とりあえずスタックを書いてみた。

`struct`を使うやり方と、`class`を使うやり方、両方試してみる。

## 例題

* `pop!` `push!`が可能なスタックを作る。
* リストとベクタによる二種類の実装を提供し、それぞれのコンストラクタも用意する。

## `struct`による解法

* `define-generics`でインターフェースを定義
* データの表現を`struct`として定義し、`#:methods`キーワードでインターフェースを実装
* コンストラクタは関数として用意

```scheme
#lang racket
(require racket/generic)
(require racket/vector)

(define-generics stack
  (pop! stack)
  (push! stack v))
(provide stack? pop! push!)

(struct list-stack (lst)
  #:mutable
  #:transparent
  #:methods gen:stack
  [(define (pop! s)
     (define lst (list-stack-lst s))
     (define ret (car lst))
     (set-list-stack-lst! s (cdr lst))
     ret)
   (define (push! s v)
     (set-list-stack-lst!
      s
      (cons v (list-stack-lst s))))])

(define (make-list-stack)
 (list-stack '()))
(provide make-list-stack)

(struct vector-stack (vec top)
  #:mutable
  #:transparent
  #:methods gen:stack
  [(define (pop! s)
     (define top (vector-stack-top s))
     (define ret
       (vector-ref (vector-stack-vec s) top))
     (set-vector-stack-top! s (sub1 top))
     ret)
   (define (push! s v)
     (set-vector-stack-top! s 
      (add1 (vector-stack-top s)))
     (vector-set!
      (vector-stack-vec s)
      (vector-stack-top s)
      v))])

(define (make-vector-stack)
  (vector-stack (make-vector 1000) -1))
(provide make-vector-stack)
```

## `class`による解法

Javaとかに慣れてる人はこっちの方がわかりやすいかも？

* `interface`でインターフェースを定義
* クラス定義の一部で、フィールド初期化方法としてコンストラクタを用意
* クラス定義の一部で、メソッドとしてインターフェースを実装
* （必要なら）クラスであることを隠蔽する関数を用意

```scheme
#lang racket
(require racket/vector)

(define stack<%>
  (interface () pop! push!))

(define (pop! s)
  (send s pop!))

(define (push! s v)
  (send s push! v))

(define (stack? v)
  (is-a? v stack<%>))
(provide pop! push! stack?)

(define list-stack%
  (class* object%
    (stack<%>)
    (super-new)
    (define current-lst '()); フィールド初期化
    (define/public (pop!)
      (define ret (car current-lst))
      (set! current-lst (cdr current-lst))
      ret)
    (define/public (push! v)
      (set! current-lst (cons v current-lst)))))

(define (make-list-stack) (new list-stack%))
(provide make-list-stack)

(define vector-stack%
  (class* object%
    (stack<%>)
    (super-new)
    (define current-vec (make-vector 1000)); フィールド初期化
    (define current-top -1); 初期化続き
    (define/public (pop!)
      (define ret
        (vector-ref current-vec current-top))
      (set! current-top (sub1 current-top))
      ret)
    (define/public (push! v)
      (set! current-top (add1 current-top))
      (vector-set! current-vec current-top v))))

(define (make-vector-stack) (new vector-stack%))
(provide make-vector-stack)
```

## 感想

コンストラクタを関数として別に用意しなくてよいところは`class`を使う記法のほうが綺麗な気がするが、記法としては`struct`の方がずっとスッキリしている。

継承が必要になったりすると`class`の方が楽だったりするのかな。
iOSアプリのバージョニング方針草案

# 目的
バージョニングのプラクティス化

#前提環境
iOSApp/MacApp開発、CI/CDが構築されている。

#iOSのバージョニング概要
iOSのバージョン管理では、以下の二つが利用されます。

- CFBundleShortVersionString
- CFBundleVersion

詳しくは[こちら](https://tech.ryukyu-i.co.jp/2017/01/01/ios-versioning/)に書いてあります。

一言で説明すると
`CFBundleShortVersionString`: ユーザーから見えるバージョン。セマンティックバージョニングが推奨。2.3.0のようなピリオド区切りでメジャー、マイナー、パッチを管理する。
`CFBundleVersion`: アプリの内部バージョンでユーザーからは見えない。しかし、AppStoreConnectへバイナリをアップロードする際に、前のビルドよりも数値が上がっている必要がある。

となります。

# 草案

#1. `CFBundleShortVersionString`はセマンティックバージョニングで手動管理
こちらは、プロダクトの意図に合わせて変更する必要があるので、手動でplistを弄って変更を行いコミットします。

## 他に考えられる案
CIを前提にしているので、git tagをトリガーにデプロイフロー→gitのバージョンタグを拾って`CFBundleShortVersionString`にセット。のようなフローも考えられます。

ただ、`2.0.0`のようなタグを打ってバイナリをアップデートし終わった後に問題が発覚すると、修正し終わった後に前のタグを消して同じタグを新しいコミットに付けるか、もしくは`2.0.1`のようなパッチバージョンで新しいタグをつけるかしかないので、開発側にある程度パッチバージョンレベルの決定権がないと難しそうです。

#2. `CFBundleVersion`はCIでの自動管理に任せる
## 要件
この内部バージョンでまず必須なのは
**バイナリアップロード時に前のバージョンより大きいこと**

そして、あると便利なのが
**問題が発生した時にコミットを一意に特定できること**

だと考えています。前者はApple側の仕様ですが、後者はこのようなケースが考えられます。

> 「ユーザーからエラー報告が上がってきたが、ユーザーから見えているバージョンと内部番号は必ずしも一致しないので(リリースはひとつだがビルドが複数存在するケース)、内部番号を使ってどのコミット/ビルドで問題が発生していたのか一意に特定して追跡したい。」

上記の要件を踏まえて「毎回数値が増えていて一意で特定可能」であれば良いので、バイナリアップデートごとにまめに手で数字を増やしても実現可能なのですが、かなり面倒でミスの入り込む余地がありそうなので、CI/CDでの自動管理を提案したいです。

## 提案手法
**自動デプロイフローの際に、CI/CDでのビルド番号を`CFBundleVersion`にセットする。**

[TravisCI](https://docs.travis-ci.com/user/environment-variables/)では`TRAVIS_BUILD_NUMBER`、[CircleCI](https://github.com/circleci/circleci-docs/blob/master/jekyll/_cci1/environment-variables.md)では`CIRCLE_BUILD_NUM`として環境変数でビルド番号が取得でき、特にBitriseではステップとして`Set Xcode Project Build Number`というステップを用意しており、plistのパスを指定するだけでCIのバージョン番号を自動設定してくれます。

このCI/CDのビルド番号は、**毎回インクリメントされ**、かつ、**ビルド番号からビルドを特定でき、クローンしているgitのコミットハッシュを特定する事が可能**なので、先ほど上げた2つの条件を満たしていると言えます。

ただ1つ問題として、内部バージョンはアーカイブ後に毎回捨てられ、コミットには載らないので気になる人もおられるかもしれません。

# まとめ
今回はこのように**「`CFBundleShortVersionString`はセマンティックバージョニングでプロダクトに応じて手動管理し、`CFBundleVersion`は手元では一切触らず、CI/CDのビルド番号をセットする自動管理に任せる」**というバージョニング方針を提案させて頂きました。

「~な理由でこうした方が良いよ！」「これは~な理由でやめた方が良いよ！」など、ご意見是非コメントいただけると助かります。
awscli v2でタブ補完が効かない場合の対処(macOS Catalina)

# 環境
- mac
- macOS Catalina(10.15.4)
- zsh 5.7.1
-aws-cli/2.0.6 Python/3.7.4 Darwin/19.4.0 botocore/2.0.0dev10

# 事象
mac OS Catalinaでawscliv2をインストールした際にタブ補完が効かない事象に遭遇した。
結論から言うと、macで使用しているデフォルトのzshで`complete`コマンドが `command not found` なのが原因

# 解決策

bashの互換モードを有効にしてcompleteコマンドを読み込ませる。

~/.zshrcに以下3行を追加して様子を見てみる。
追記したら~/.zshrcを再度読み込みます。

```
autoload bashcompinit
bashcompinit
complete -C '/usr/local/bin/aws_completer' aws
```

**aws_completer**の場所は事前に`which aws_completer`で調べ、自身の環境の値に変えてください。




下記コマンドを実行して`~/.zshrc`に追加します。.zshrcなければ作ってください。

```sh:command
cat << _EOF_ >> ~/.zshrc
# awscli
autoload bashcompinit
bashcompinit
complete -C '/usr/local/bin/aws_completer' aws
_EOF_
source ~/.zshrc
```

とりあえずこの方法で自分の環境では補完が効くようになりました。(2020年4月 現在)
そのうち何かしなくても補完効くようになるかもしれませんが同様の事象の方は試してみてください。


# 参考
[macOS での AWS CLI バージョン 2 のインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-mac.html)
[コマンド補完](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-completion.html#cli-command-completion-enable)
[v2 : AWS ZSH completer does not exist #4950](https://github.com/aws/aws-cli/issues/4950)
vue-unity-webglの使い方メモ

# Vue.jsからUnityのWebGLビルドを扱いたい

Vue.jsからUnityのWebGLを扱いたいタイミングがあったので調べると[votetake/vue-unity-webgl](https://github.com/votetake/vue-unity-webgl)があることを知り使ってみました。

- [Unityで吐いたWebGLをPWAで動かしてみた](https://qiita.com/MizoTake/items/7089494d7bd3e700e34b)
- [箱庭の音](https://maketake.hatenablog.com/entry/2020/03/19/080817)

二つともVue.jsでUnityのWebGLビルドを扱った記事です。

ただ、二つとも詳しい使い方は書いてなかったので改めて記事に残しておこうと思い記事しました。

## 導入と準備

[Unityで吐いたWebGLをPWAで動かしてみた](https://qiita.com/MizoTake/items/7089494d7bd3e700e34b)の記事は少し古いためnpmで扱っていましたが[箱庭の音](https://maketake.hatenablog.com/entry/2020/03/19/080817)を作る際にyarnで管理する必要があることを知ったのでyarnを使って導入します。

`yarn add vue-unity-webgl`

で大丈夫です

そしてUnityをビルドして成果物をvueのプロジェクトの `public` ディレクトリに入れておきます。

```html:index.html
<script src="<%= htmlWebpackPlugin.files.publicPath %>unitybuild/TemplateData/UnityProgress.js"></script> 
<script src="<%= htmlWebpackPlugin.files.publicPath %>unitybuild/Build/UnityLoader.js"></script> |
```

index.htmlでunityのjsを呼び出す用意をして完了です。

## .vueで扱う際のパラメータ

基本的にvue-unity-webglのREADME.mdに書いてある通りで問題はないのですが中身を見ると追加でパラメータが渡せる様だったので残しておきます。

```vue
<unity
   src="unitybuild/Build/unitybuild.json"
   v-bind="{
      width: 640,
      height: 480,
      hideFooter: true,
      externalProgress: true,
      module: { TOTAL_STACK: 6 * 1024 * 1024 }
   }"
   unityLoader="unitybuild/Build/UnityLoader.js"
></unity>
```

- `width` `height`はわかりやすくunityを表示する大きさになります。

- `hideFooter`はUnityのWebGLにデフォルトでついているフルスクリーン機能などを使わない設定です
本当に非表示にする場合はcssの方で隠せば大丈夫のはずです。

- `externalProgress`はfalseだとカスタムのprogress操作ができるそうですがUnityデフォルトのProgressを使いたい場合にtrueで設定します。
カスタムのProgress操作はvue-unity-webglのREADME.mdにあるので興味がある人は確認してみてください。
- `module`は扱えるスタック領域などの値を変えれる設定のようです。ここに関しては [Unity：WebGLでメモリエラーに苦しんだ話](https://www.fast-system.jp/unity-webgl-memory-stack-error/)を参考に設定させていただきました。

## おわり
vue-unity-webglについて扱う話は以上になります。基本的にはREADME.mdをみつつ操作したら大丈夫だと思いますが中身を覗くと追加で設定できるパラメータがあったのでメモがてら記事にしました。
そしてもっとProgressをカスタムして扱いたい場合は、vue-unity-webglを参考にすれば自前で呼び出してコントロールも可能かなと思っています。Vueじゃなくても扱えるような中身になっていると思うので興味ある人はのぞいて見てください。
Windows+VS CodeでSpring Boot環境を作る

# やりたいこと
WindowsでSpring Bootを動かす環境を作りたい。
せっかくWindowsでやるならWSL上で作ってそれをVS Codeでよしなに開発するのが今風な気がするのでそれを目指す。
まずはWindows上のみで動かし、そのあとWSL上で動かす。

# やったこと
## Windows上のみで動かす
### OpenJDKのインストール
http://jdk.java.net/14/ からWindows用のJDKをzipでダウンロードして展開する。
出来たフォルダを適当なパスへ移動する。今回は`C:\Program Files\Java\jdk-14`以下に置いた。

また、システム環境変数に下記を設定する。

変数|値
---|---
JAVA_HOME|C:\Program Files\Java\jdk-14
Path|先頭に %JAVA_HOME%bin を追加

### VS Codeの設定
#### 拡張機能のインストール
下記をインストールした。

- Language Support for Java(TM) by Red Hat
    - https://marketplace.visualstudio.com/items?itemName=redhat.java
- Gradle Language Support
    - https://marketplace.visualstudio.com/items?itemName=naco-siren.gradle-language
- Java Extension Pack
    - https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack
- Spring Boot Extension Pack
    - https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack
- Lombok Annotations Support for VS Code
    - https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok

### java.homeの設定
settings.jsonに下記のようにJDKのパスを指定する（他に項目があれば追加する形で）。

```
{
    "java.home": "C:\\Program Files\\Java\\jdk-14"
}
```

設定画面で`java.home`と入れて検索すると、settings.jsonで編集するリンクが出て来る。

### Javaのプロジェクトを試しに作って動かす
Ctrl+Shift+Pでコマンドパレットを開き、`Create Java Project`を実行する。
保存場所・プロジェクト名を適当に入力したらプロジェクトが作成されてVS Codeで開かれる。
F5でデバッグ実行して、`Hello Java`と表示されるか確認出来ればOK。

### Springのプロジェクトを試しに作って動かす
Ctrl+Shift+Pでコマンドパレットを開き、`Spring Initiallizr: Generate a Gradle Project`を実行する。
（Mavenで作成してもいいけどGradleで）

依存パッケージはひとまず空で作成して、実行する。デバッグコンソールにSpringのロゴが出て実行されればOK。

## WSLで動かす
### OpenJDKのインストール
WSL上でOpenJDKをインストールする。
aptコマンドでインストール出来るのはOpenJDK11のようなのでこれを使う。

```
$ sudo apt update
$ sudo apt install -y openjdk-11-jdk
```

### gradleのインストール
aptで入れると古いようだが、ひとまず入れる。

```
$ sudo apt install -y gradle
```

### VS Codeの設定
#### 拡張機能のインストール
まず下記をインストールする。

- Remote Development
    - https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

インストール後にWSLターミナルで`code`と打つと、WSLの環境を向いたVS Codeが立ち上がるようになる。
その状態でWindows向けのVS Codeでインストールした拡張機能を改めてインストールする。
※インストールボタンのラベルが`Install in WSL:Ubuntu`になる。

### java.homeの設定
settings.jsonに設定したjava.homeの値を変更する。

```
{
    "java.home": "/usr/lib/jvm/java-11-openjdk-amd64"
}
```

### Javaのプロジェクトを試しに作って動かす
Ctrl+Shift+Pでコマンドパレットを開き、`Create Java Project`を実行する。
保存場所・プロジェクト名を適当に入力したらプロジェクトが作成されてVS Codeで開かれる。
F5でデバッグ実行して、`Hello Java`と表示されるか確認出来ればOK。

### Springのプロジェクトを試しに作って動かす
Ctrl+Shift+Pでコマンドパレットを開き、`Spring Initiallizr: Generate a Gradle Project`を実行する。
依存パッケージはひとまず空で作成して、実行する。デバッグコンソールにSpringのロゴが出て実行されればOK。

### Spring Webを試す
Spring Initiallizrでプロジェクト作成時にSpring Webを利用する設定で作成する。
main()があるApplicationクラスに`@RestController`アノテーションを付け、クラス内に適当に下記のようなメソッドを作成する。

```
@GetMapping("/")
String home() {
    return "Hello!";
}
```

アプリケーションを動かし、http://localhost:8080/ にアクセスして`Hello!`が表示されればOK。
リポジトリ：https://github.com/stamefusa/spring-web-demo

# 参考にしたエントリ
https://qiita.com/dongsu-iis/items/6c7974022083d3036dc8

https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4
https://qiita.com/gitcho/items/147a3ce2536ae3035bb8
Pythonの例外処理

#はじめに
プログラミンを勉強し始めて3カ月ほどたったのでそろそろアウトプットをしていこうと思い
今日からQiitaに記事を書き始めることにしました。

また、自分が今までQiitaの記事に何回もお世話になったのも書こうと思った理由の内の一つです。
初投稿なので温かい目で見て下さい。

今回は、例外処理についてです。(使用する言語はPython)

#目次
1. 例外処理とは

2. Pythonの例外処理
 2-1. 基本的な例外処理の書き方 try except
 2-2. 例外をキャッチしても処理をスルーするpass
 2-3. 例外が発生しなかった場合に処理をするelse
 2-4. 例外の発生に関わらずに処理をするfinally 

3. おわりに

#1.例外処理とは
まず最初に例外処理とは以下のようなことです。

>例外処理とは、プログラムの実行の継続を妨げる異常な事象（「例外」と呼ばれる）が
発生した際に、その内容に応じて実行される処理のこと。(IT用語辞典から引用)

下記は例外処理の書き方です。(Python)

```python

try:
    # 何らかの処理
except:
    # エラーが起きた時に実行される処理
```

例えば、二つの数字を使った割り算では0で数字を割った時にエラーが起きてしまいます。

```python

print(1 / 0)
# 上記の処理ではエラーが発生してしまう
```
そんな時に、例外処理を使うことによってエラーが出たとしてもそのまま処理を実行することができ、そのエラーの内容をキャッチすることが出来ます。

```python
try:
    print(1 / 0)
except ZeroDivisionError:  # 0で割るとZeroDivisionErrorが発生する
    print('0による除算')
```
このように、エラーが起きた時に処理を実行し続けたい時に使います。

# 2.Pythonの例外処理
先ほどから、例外処理を書いていますがここまでの記述はすべてPythonで書かれています。
これから、さらにPythonについての例外処理を深堀していきたいと思います。

<b>2-1. 基本的な例外処理の書き方 try except</b>
基本的には、Pythonの例外処理の書き方は下記のものになります。

```python
try:
    # 何かの処理
except:
    # エラーが起きた時に実行される処理
```
上記の状態ではすべての例外処理をキャッチしている状態になっています。なので、exceptの後に発生するエラー(例外の型)を書いておいてそのエラーに対応される処理を書くべきです。

```python
# 例
# 0で割ることによる除算に対応する処理
try:
    print(1 / 0)
except ZeroDivisionError as e:
    print(e)
# division by zero
```
また、上記のようにexcept 例外の型 as 変数名とすることで変数の中に例外オブジェクトが格納されます。

<b>2-2. 例外をキャッチしても処理をスルーするpass</b>
passは、例外が発生してそれをキャッチしても処理をそのままスルーします。

```python
try:
    print('hello' / 'a')
except TypeError:
    pass
```
無責任にpassしてくるなんてけしからんですな(笑)

<b>2-3. 例外が発生しなかった場合に処理をするelse</b>
elseはtryの中で例外処理が発生しなかった場合に実行される処理を書きます。

```python
try:
    print(2 / 2)
except TypeError as e:
    print('TypeError:', e)
else:
    print('処理に成功しました')

# 1
# 処理に成功しました
```
上記のような処理になります。

<b>2-4. 例外の発生に関わらずに処理をするfinally</b>
finallyは例外処理が起きた場合にも起きなかった場合にも処理を実行してくれる

```python
try:
    print(2 / 1)
except:
    print('Error')
else:
    print('処理に成功しました')
finally:
    print('ここで終了')

# 2
# 処理に成功しました
# ここで終了
```
このように、処理が成功した場合にelseの次にfinallyの処理が実行されます。
例外処理が起きた場合には、elseの中の処理が実行されずにfinallyの処理が実行されます。

#おわりに
いかがだったでしょうか、初心者の方たちは最初は例外処理を使う機会はそこまでないと思いますがのちのち例外処理を使う場面が増えていくので簡単な処理だけでも覚えておきましょう。
また、さらに深く知りたい方などは公式のドキュメントを見ることをオススメします。

#参考
[公式ドキュメント](https://docs.python.org/ja/3/tutorial/errors.html)
[Pythonの例外処理（try, except, else, finally)](https://note.nkmk.me/python-try-except-else-finally/)
[CentOS8]Pythonの標準出力をsystemdのログに吐く方法

#はじめに
PythonでTwitterのボットを作ったのだが、print関数で出力したログ`systemctl status`コマンドでみることができずはまったので解決方法を覚え書きです。もっといい方法があったら教えていただけると嬉しいです。

#環境
CentOS Linux release 8.1.1911 (Core)


#Unitファイルの記述
`etc\systemd\system\`におくUnitファイルの記述

```bot.service
[Unit]
Description=Python Tweet Collector

[Service]
ExecStart=実行ファイル(ここではBotを起動するシェルスクリプト)のパス
Type=simple
StandardOutput=journal　#標準出力をjournalctlで見られるようにする
StandardError=journal #標準エラーをjournalctlで見られるようにする

[Install]
WantedBy=multi-user.target

```


#Pythonコマンド実行時のオプション
上記の設定だけだとPythonの標準出力がバッファされてprint文の出力が表示されないことがあるらしい...
ということでシェルスクリプトを書き、そこからBotを起動するようにしました

```start_bot.sh
#!/bin/bash

cd $(dirname $0) #このファイルがあるディレクトリに移動

. venv/bin/activate #Pythonの仮想環境を有効化

python -u bot.py # -u オプションでバッファを無効化
```

最後に`chmod 744 start_bot.sh`でシェルスクリプトに実行権限を付与

Botを起動

```
systemctl start bot.service
```
Botの状態を確認

```
systemctl status bot.service
```

ログを確認

```
journalctl -u bot.service
```

Pythonのプリント文で出力した内容がログに表示されているのが確認できると思います


#おわり
Linuxのことはまだまだ初心者なので、不適切な箇所の指摘、アドバイス等ありましたらご教授いただけるととてもうれしいです。
JavaScriptでポップアップウィンドウを作成

### 完成品
<img width="147" alt="スクリーンショット 2020-04-01 22.34.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/d5374c2a-3973-967a-2fb0-d0122d93ee26.png">
<img width="249" alt="スクリーンショット 2020-04-01 22.35.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/3d2ee3ca-5b89-0b76-8e72-8915e29f2813.png">

### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <input type="button" id="btn" value="押す"> <!-- 変数に格納 -->
    <div id="box"> <!-- 変数に格納 -->
        <p id="close">× <!-- 変数に格納 -->
            <h2>ポップアップ</h2>
        </p>
    </div>
    
</body>
</html>
```

###CSS
```css

@charset "UTF-8";

#box {
  background: #FFF;
  border: 1px solid #333;
  box-shadow: 0 10px 10px #999;
  display: none;  /*! id要素に対してdisplay:none  */
  font-family: serif;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 200px;
}

#box > #close {
  background-color: #EEE;
  color: #333;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  margin: 0;
  position: absolute;
  right: 1px;
  text-align: center;
  top: 1px;
  width: 30px;
}

#box > #close:hover {
  background-color: #F9F9F9;
  color: #999;
}

#btn {
  background-color: rgb(20, 114, 236);
  border: 0;
  color: #FFF;
  cursor: pointer;
  padding: 5px 20px;
}

#btn:hover {
  color: rgb(20, 114, 236);
  border: 1px solid rgb(20, 114, 236);
  background-color: rgb(255, 255, 255);
}

#btn:active {
  background-color: #4A4;
}

```
### JavaScript
```javascript

window.onload= function(){ //window の load イベントに対応するイベントハンドラ

let box = document.querySelector("#box"); //id要素取得
let btn = document.querySelector("#btn"); //id要素取得
let close = document.querySelector("#close") //id要素取得

let boxstyle = box.style; //boxのstyle値をboxstyleに格納

btn.onclick = function(){ //btnがクリックされた時動かす関数
    if(boxstyle.display === "block"){ 
        boxstyle.display = "none";
    }else{
        boxstyle.display = "block";
    }
};

close.onclick= function(){ //closeがクリックされた時の関数
    boxstyle.display = "none";
};

}
```
JavaScript の論理演算子 (&&, ||) の応用

#基本
- <FONT COLOR=RED>**JavaScript の処理は左から右へ進む!**</FONT>
- AND / OR 演算子は2つの値を左から順に Boolean にキャストしてチェックし、どちらかの値を返す.
- Boolean を返すわけではない.


```JavaScript:例
x = {foo:4} && null; // = null
y = 1 || window; // = 1
```
##AND 演算
AND 演算 `a1 && a2` の返り値は `Boolean(a1)===false ? a1 : a2` と等価.
<FONT COLOR=#bbb>~~AND 演算は〔先に false と判定された値〕or〔最後の値〕を返す.~~</FONT>
計算効率を上げるために、**false 判定される可能性が高い方の値を先(左)に置く**.

```JavaScript:AND_演算子(&&)
//  1        2
   true && true  // = true   ← 2
   true && false // = false  ← 2
  false && true  // = false  ← 1
  false && false // = false  ← 1
```
##OR 演算
OR 演算 `a1 || a2` の返り値は `Boolean(a1)===true ? a1 : a2` と等価.
<FONT COLOR=#bbb>~~OR 演算は〔先に true と判定された値〕or〔最後の値〕を返す.~~</FONT>
計算効率を上げるために、**true 判定される可能性が高い方の値を先(左)に置く**.

```JavaScript:OR_演算子(||)
//  1        2
   true || true  // = true   ← 1
   true || false // = true   ← 1
  false || true  // = true   ← 2
  false || false // = false  ← 2
```

#応用: 論理演算をたくさん直列した場合
**JavaScript の処理は左から右へ進む**ので、まず最も左の演算子が評価される。
その返り値に基づき次の演算子が評価され、右へと進んでいく。

```JavaScript:例-1
       a || b && c && d && e || f && g || h
=((((((a || b)&& c)&& d)&& e)|| f)&& g)|| h
```
```JavaScript:例-2
//    1         2       3      4
  undefined && true ||  0  && [6] // = 0  ← 3
=(undefined && true)||  0  && [6]
= undefined         ||  0  && [6]
=(undefined         ||  0 )&& [6]
=                       0  && [6]
=                       0
```
上記の例のように括弧を一切使わずに論理演算を直列すると、**必ず全ての値がチェックされることになるので計算効率が悪い**。
各値が true / false 判定される確率を考慮し、適切に括弧で括るべき.
HTML


HTML CSSとは
HTMLは簡単に言うと構造です。
具体的にいうと見出しや文、画像、リンク、箇条書きを作成します！

CSSは装飾です。
具体的には文字の大きさ、色、種類、高さ、幅、背景の色、タグ付けをします！

HTMLと CSSの基礎的なことについて説明していきます。
まず、HTMLから説明しています。
HTML＝構造
1見出し
2段楽
3コメント
4リンク
5画像
6リスト
順番に説明していきます。

1見出し
見出しはh1...h6まであります。数字が大きくなると文字は小さくなります。
HTML上で〈h1〉テキスト〈/h1〉とうつと画面の見出しに文字が表記されます。
〈h1〉テキスト〈/h1〉のようにテキストを開始タグと終了タグではさみます。
終了タグには/をいれる。

2段落
段落はpを使います。見出し以外の分にはpようそを使用します。
〈p〉テキスト〈/p〉

3コメント
ペイジに表示されない文章。メモ書きとして使用する。
＜!--コメントｰｰ＞

4リンク
リンクを作成するときはa要素を使用する。｀
＜a＞文章＜/a＞
文章がページに表記される。
＜a＞要素にリンクを飛ばすとき
＜a href =URL＞とかきURLのページに移動することができる。
＜例＞
＜a heaf="https://prog-8.com">progeto</a>

5画像
Ing srcにurlを指定することで画像が表示される。
＜ing src="url"＞
テキストを囲まないため、終了タグは要らない。
必ずダブルクォーテーションで値を囲む。

６リスト
箇条書き西田井テキストを＜li＞`タグで囲む。
＜ul＞`で囲むと黒い点が出る

囲む要素が→親要素
囲まれる要素→個要素
未経験エンジニアがscalaを使うってよ

## 僕はscalaを学ぶことにした
こんにちは未経験エンジニアのイヴです！

2019年の9月末に某プログラミングスクールへ入学し卒業後、求職活動を経て2020年4月1日より都内のベンチャー企業で開発に携わることになりました。

メイン言語がscalaということもあり学んで行くこととなりましたので、学びで得たことを今後アウトプットしていきますのでどうぞよろしくお願いいたします。

## scalaは完全にノータッチ
scalaの名前くらいは聞いたことがあったけれど構文はおろか、scalaで開発されたサービスに何があるのかすら知りませんでした。
スクールではRubyを触っていましたし、卒業後はprocessingとReact.jsを少しかじったくらいでしたので、開発を始める前にscalaについて基礎知識を調べていきたいと思います。
内容に関しては [scalaプログラミング入門](http://bach.istc.kobe-u.ac.jp/lect/ProLang/org/scala.h・tml) 様から学ばせていただきました。
初学者でも学びやすいようにまとめてくださり本当にありがとうございます。

## scalaの基本情報
・scala言語の生みの親はスイス連邦工科大学の[Martin Odersky](https://en.wikipedia.org/wiki/Martin_Odersky)様
・オープンソースであり、活発に開発が行われている
・Twitterの分散DBフレームワークGizzardはScalaで記述されている
・Foursquare, Tumblr, LinkedIn, Amazon, VMware, はてな, ドワンゴなどでも利用されている
・言語別年収ランキングでは上位に輝いている
・オブジェクト指向プログラミング言語に、関数型プログラミング言語をミックスした新しいタイプの言語である(マルチパラダイム言語)
・強力な型推論
・高階関数
・Immutable Collections
・平行計算
・Java言語もJava8から関数型プログラミングの特徴が取り入れられている
・主にJVM(Java Virtual Machine)上で動作する
・インタラクティブな実行環境(REPL)も用意されている
・Javaや.Netのクラス・ライブラリ、リソースをそのまま利用できる
・拡張性が高い
などの特徴がある

正直わからない単語がたくさんありますね・・・
次の投稿では用語について調べていきます
Github  flow とはなんぞや？

Github flowについて調べたので自分なりにまとめてみました。
#Github flowとは？
Githubで開発をするときに主に使用されるワークフローであり、以下の６つのルールのもとに使用される。
1　masterブランチは常にデプロイ可能にしておくこと
2　作業用ブランチをmasterから作成すること
3　作業用ブランチを定期的にプッシュする
4　プルリクエストを活用する
5　プルリクエストが承認されたらmasterへマージする
6　masterにマージが完了したら直ちにデプロイを行う

https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html

##詳細
1　**masterブランチは常にデプロイ可能にしておくこと**
- masterブランチにあるソースコードを常にデプロイできる状態にしておくこと
※デプロイ・・・アプリケーションを本番環境にアップロードすること。

2　**作業用ブランチをmasterから作成すること**
- masterブランチから新しいブランチを作成する。その際は作業している内容がわかるような名前をつけることが大切！

3　**作業用ブランチを定期的にプッシュする**
- 2で作ったブランチはローカルリポジトリ内に存在するためチームで開発しているとき、他の開発者は誰がどのようなブランチを作って何を変更したのかがわかりません。なのでブランチを作成したときや、コミットした際はリモートリポジトリにプッシュすることが必要。

4　**プルリクエストを活用する**
-　フィードバックをもらうことによりミスなどを防具ことができ、質の高いコードをmasterにマージすることができます。また困ったときに助けてもらうことができるため効率が良いです。

5　**プルリクエストが承認されたらmasterへマージする**
これはそのまんま....

6　**masterにマージが完了したら直ちにデプロイを行う**
プルリクエストをしてもらってもミスがmasterブランチに混ざることがあるため、master
ブランチにマージされた後はすぐに正常にデプロイできるかどうかチェックする必要があります。


#実際の流れ
**developブランチをmasterブランチから作成**
　　　　　　　　↓
　　　　　**機能実装を開始**
- developブランチからフィーチャーブランチを作成し、機能実装作業を開始
            　　　　　　　　↓　
        　　　　  **機能実装を完了する**  
-フィーチャーブランチでの作業が完了したら、フィーチャーブランチをdevelopブランチにマージ
　　　　　　　　↓               
　　　　**リリース準備を開始する**
-機能実装が終わりリリースできる状態になったら、developブランチからリリースブランチを作成
　　　　　　　　↓
      　　　　**リリース準備を完了する**
-リリースブランチでの作業が完了したら、リリースブランチをmasterとdevelopブランチにマージ


#感想
まだ実際に開発をしたことがあるわけではないですがGithub flowというのがなんとなくわかった気がします。調べているときにやはり用語がわからないために理解するのにかなり苦労しました。自分が調べた用語を載せときたいと思います。（自分のためにも！！）
ーメインブランチ〜[master][develop]の２種類がある
ーサポートブランチ[フィーチャー][リリース][ホットフィックス]の３種類がある。
・フィーチャー〜機能実装やバグ修正などの開発作業を行う
・リリース〜リリース準備作業を行う
・ホットフィックス〜緊急の修正作業を行う

参考サイト
https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html
https://nvie.com/posts/a-successful-git-branching-model/
【初心者向け】ある条件式を満たす要素のインデックスを取得したい

# 背景
プロpythonistからすれば普通のことなのかもしれないんですが、
自分は理解するのに時間がかかり、
理解できたらその強さに感動した。。。ので。。。

#ndarray[条件式]

行列のままで各要素がある条件を満たすか満たさないかを判別し、
その結果のTrue/Falseを同じ形状の行列として出力してくれます。

### 例

```python 
arr = np.array([[0,1,2,3],[0,2,4,6]])
print(arr<3)
# [[ True  True  True False]
#  [ True  True False False]]
```

#numpy.nonzero
行列の0でない要素のインデックスを取得してくれ、x,y別のndarray配列として出力されます。

```python

# 例の定義
arr_int = np.array([[3,5,0],[0,4,0]])
arr_bool = np.array([[True,True,False],[False,True, False]])

# np.nonzeroの利用
nonzero_int_row, nonzero_int_column = np.nonzero(arr_int)
nonzero_bool_row, nonzero_bool_column = np.nonzero(arr_bool)

# 各変数の値
# row: array([0, 0, 1])
# column: array([0, 1, 1]))
```
この例では、0でないのがarr[0,0],arr[0,1],arr[1,1]なのでこういう結果になります。

# 合体！

```python
arr = np.array([[0,1,2,3],[0,2,4,6]])
arr_bool = arr<3
nonzero_row, nonzero_column = np.nonzero(arr_bool)
# row: [0 0 0 1 1]
# column: [0 1 2 0 1]
```

# コメント
コメントいただきました！
np.whereが同じ機能で便利ということです！
僕が見てたサイトはなぜこれを使わなかったんだろう…
Steamのプレイ時間を取得する

ふと今までどれくらい~~Steamに無駄な時間を費やしたか~~Steamでプレイしたか確認できるwebアプリを作成したくなったのでちょっとAPIを調べてみました。

まずはSteamでプレイ時間の取得が出来るか

最初にSteamのAPI使いたいのでAPIキー登録します。

[ここから](https://steamcommunity.com/dev/apikey)登録するだけです。
ドメイン名は適当。

APIキーはめっちゃつかうので登録出来たら控えておきます。

出来たら使えそうなAPIを調べます。

https://partner.steamgames.com/doc/webapi/IPlayerService
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/5f5d4557-5d68-92f5-e988-819a2ba6828f.png)
このAPI呼ぶとゲーム情報が取得できるらしいです。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/2be326d4-f904-a1c8-1742-ab0d62a5c6df.png)

いいかんじ。playtime_foreverの値ですね。
[ここ](https://developer.valvesoftware.com/wiki/Steam_Web_API)によると2009年のはじめらへんから起動していた分数がカウントされているらしいです。
>playtime_forever The total number of minutes played "on record", since Steam began tracking total playtime in early 2009.