OmniAICreator/Qiita-1.07M huggingface dataset:
【イベントレポート】Ruby on Railsハンズオン @株式会社スタメン

みなさんこんにちは！
現在Webフロントエンドを主戦場にしている学生エンジニアの黒ちゃん改め，くろっちです！
今日は先日[TechBowl](https://techbowl.co.jp/)さんが主催していただいたRailsハンズオンイベントの事後報告をしたいと思います．

## イベント概要
### タイムスケジュール
| 時間  | 内容 |
| -------- | -------- | 
| 10:00     | 開場     | 
| 10:30     | オープニング     | 
| 11:00     | ハンズオンイベント     | 
| 14:00     | パネルディスカッション     | 
| 15:00     | 懇親会     | 
| 16:30     | 終了     | 

当日はこのような流れでRailsアプリケーションの勉強と先輩エンジニアの方々のお話を聞けるという1度で2度美味しいイベントとなりました．懇親会では一緒に参加していたエンジニア学生と先輩エンジニアの方とでお菓子と飲み物を囲みざっくばらんな会話をすることができました．

## Railsハンズオン
### 完成作品イメージ
[](https://shindan.iriam.com/)
![スクリーンショット 2019-04-20 12.19.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/eba86b90-1402-9c3f-fa08-1dda525213f1.png)

### アプリケーションの内容
質問に答えて，ユーザの選択によって結果を表示するWebアプリケーション

### ハンズオンの流れ
- Railsの開発環境の構築，サービス設計
- 回答データをサーバーに送信，結果を表示
- CSSで回答，結果ページをデザイン
- 自由にカスタマイズ

### 当日の資料（ぽこひでさん作成）
ぽこひでさんの作ってくださったわかりやすいスライドのおかげで，Rails初心者の僕でも簡単にアプリケーション作りを体験できました！！

アプリケーション作りを通して，MVCの考え方やDockerによる環境構築の手軽さについても学ぶことができる内容になっていました．

<a href="https://speakerdeck.com/hyde2able/techtrain-rorhansuon"><img src="https://i.imgur.com/QQXOp6J.png"></a>
## 社会人エンジニアによるパネルディスカッション
実際の現場で働く先輩エンジニアの方に対してざっくばらんな質問を投げかけることができ，「エンジニアとしてのキャリアの話」や「プログラミングの勉強方法」など大変有益な情報を手に入れることができました．

### 実際の質問の一部抜粋
#### Q.開発のモチベーションを維持するためのコツは？
* 仕事か個人開発の趣味か？
    * 仕事はやるしかない
        * モチベーションに左右されるな！
    * 個人開発については疲れたらデザインを変える
        * 同じサービスでもデザインが違えばモチベーションが上がる
* 自分の特徴を知っておくと良いかも
    * 目標を期限を決めて設定してしまう
* やりたいことと仕事から求められる物をマッチさせることが大切

#### Q.Railsのいいところ，悪いところ
* ベンチャーでよく使われている
* 一人でバックエンドからフロントエンドまで出来る
    * 大規模アプリケーションになってくると分けるのが難しく，やりにくくなってくる
    * 大規模向きではない
    * 分離のタイミングが重要
⭐️Tips：言語の選定はあとで考えた方がいいよ

## 最高のイベントでした！！
Railsハンズオンを通してWebアプリケーションの仕組みを理解することができ，更には先輩エンジニアの方から経験談やアドバイスを聞くことができたので，収穫の多い1日になりました．

今回のイベントを企画・開催してくださったTech Bowlさん，株式会社スタメンさん，株式会社ZIZAIのぽこひでさん，OthloTechさん，C0deさんには感謝しています．

また名古屋でこのようなイベントを開催していただけるのを心からお待ちしています！東海圏にお住いのエンジニア学生の皆さん，一緒にこのような素晴らしいイベントに参加して，IT業界を盛り上げていきましょう！

### イベント開催にご尽力いただいた皆様
[TechBowl](https://techbowl.co.jp/)
[株式会社スタメン](https://stmn.co.jp/)
[株式会社ZIZAI](https://zizai.co.jp/)
[OthloTech](https://www.othlo.tech/)
[C0de](https://c0de-web.club.nitech.ac.jp/)
Apex Design Patterns(Template)

#1.Template Patternとは？
スーパークラスで処理の流れを定義し、その処理の詳細はサブクラスで定義する。

**UML構造図**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/c1518119-6dba-0c85-4be5-44bc35eadef7.png)
◆AbstractClass（抽象クラス）
　　テンプレートメソッドを実装する。 また、 テンプレートメソッドで使用するメソッドおよび抽象メソッドを定義する。

◆ConcreteClass（具象クラス）
　　[AbstractClass] で定義した抽象メソッドを実装する。

◆Client （利用者）
　　[Template Method] パターンを利用し処理する。

#2.実装例
##2.1.AbstractClass 実装
```java

public abstract class AbstractClass{
    public void templateMethod(){
        outPutLog('AbstractClass/templateMethod：処理開始');
        
        method1();
        method2();
        
        outPutLog('AbstractClass/templateMethod：処理終了');
    }

    private void outPutLog(String strLog) {
        system.debug(strLog);
    }
    
    protected abstract void method1();
    protected abstract void method2();
}
```
##2.2.ConcreteClass (具象クラス)
```java

public class ConcreteClass extends AbstractClass{
    public override void method1(){
        system.debug('method1');
    }

    public override void method2(){
        system.debug('method2');
    }
}
```

##2.3.Client (利用者)
実行匿名ウィンドウで下記のソースを実行する。

```java

new ConcreteClass().templateMethod();
```

##2.4.実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/5c4fe141-fa96-9f4d-e0b9-f3bca9b8e790.png)
routingのresourcesとネスト　メモ

##resourcesメソッド
Railsにデフォルトで設定されている７つの基本アクション

:writing_hand_tone1:書き方：routes.rbに　resources:ルーティングを設定したいコントローラ名

| アクション      |     役割    |
|:-----------------|:------------------:|
| index           |          リソースの一覧を表示 |     
| show          |            リソースの内容を表示 |     
| new       |              リソースを追加 |     
| create              |                リソースを追加し作成 |     
| edit       |             リソースを更新するためのフォームを表示 |     
|  update         |           リソースを更新 |     
| destroy          |              リソースを削除 |      
　
:star:リソース：テーブルにとっての１ツイートのこと

例）bookというリソースに対して基本の７つのアクションをリクエストする

```ruby:coning/routes.rb
Rails.application.routes.draw do
  resources :books
end
```

```
#ターミナルでrake routesを実行

Prefix Verb         URI Pattern               Controller#Action
    books GET    /books(.:format)          books#index
          POST   /books(.:format)          books#create
 new_book GET    /books/new(.:format)      books#new
edit_book GET    /books/:id/edit(.:format) books#edit
     book GET    /books/:id(.:format)      books#show
          PATCH  /books/:id(.:format)      books#update
          PUT    /books/:id(.:format)      books#update
```

:point_up:onlyオプションやexceptオプションが使える

例）

```config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root 'tweets#index'
  resources :tweets
  resources :comments, only: [:create]
  resources :users, only: [:show]
end
```

```
#発行されるパス

Prefix Verb     URI Pattern           Controller#Action
# 中略
comments POST   /comments(.:format)   comments#create
# 中略
```

→どのツイートに対するコメントなのかわからない→ネストを使う

##ルーティングのネスト

ある記述の中に入れ子構造で別の記述をする方法
:writing_hand_tone1:書き方：（コントローラ）do(別のコントローラ)end

例）tweets_controllerのルーティングの中にcomments_controllerのcreateアクションのルーティングを記述


```config/routes.rb
Rails.application.routes.draw do
  root 'tweets#index'
  resources :tweets do ←
    resources :comments, only: [:create]
  end←
  resources :users, only: [:show]
end
```

```
#ターミナルでrake routes

Prefix Verb           URI Pattern      
                      
tweet_comments POST   /tweets/:tweet_id/comments(.:format)   
　　　　　　　　　　　　　　　　　　　↑キーが設定される
```

```tweets/show.html.erb
<%= form_tag("/tweets/#{@tweet.id}/comments", method: :post) do %> 
                         ↑ここ
```

```comments_controller.rb
def create
    Comment.create(text: params[:text], tweet_id: params[:tweet_id], user_id: current_user.id)
end
```

##ルーティングをネストする理由

####アソシエーション先のレコードのidをparamsに追加してコントローラに送るため:relaxed:

今回の場合はコメントと結びつくツイートのid情報をコントローラに送るためにネストを使う
menoh @ mac のインストール

PFN から公開されてる推論エンジン, Menoh．

インストールしようとしたら，MKL-DNNがないとか怒られる．．．．いや入ってる．

今一度，BLUIDページを見てみる．


- Xcode
- Homebrew <===== え！？
- CMake 3.1 or later
- Python 2.7 or later

ググると，以下のGitにたどり着く．

https://github.com/pfnet-research/homebrew-menoh

なんだ，MacはHomebrewでインストールできるのか．
俺的Javaリファレンス

__俺的Javaリファレンスを書くのだ！ﾍｹｯ__
Javaブロンゴ取得目指してメモしていく、
間違えてるとこもあると思うから指摘よろ

#基本

####はろーわーるど
```java
System.out.println("ハローワールド");
System.out.print("ハローワールド");
```

printで出力,print __ln__で出力してから改行。
lnはlineという意味。つまりprintlnはプリント->ライン(改行)ということ。

####変数宣言
```java
int i = 0;
```
`型 変数名 = 値;`
みんな知ってるいつも使うやつ
public, private, protected, とか static とかを型名につける。
__static__ってなんじゃろか(いつか書く)

####配列
```java
int[] hoge = new int[3];
int hoge[]; 
```

`型[] 変数名 = new 型[長さ];`
`型 変数名[];`の書き方でも変数の型は宣言できるが(初期化ではないことに注意)、C言語の名残で一般的ではない。
実際にIntelliJ IDEAで書くとJavaスタイルにしてくださいと警告が出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108767/6e2cb799-7db0-2d11-577a-cca7b36cc157.png)

####配列を宣言と同時に初期化する
```java
int[] hoge = new int[] {0, 1, 2, 3, 4};
int[] hoge = {0,1,2,3,4}; //↑の省略形
```
`型[] 変数名 = new 型[] {値1, 値2, 値3, 値4, 値5...};`
ちなみに、`new 型[]`を下記のように省略することもできる。一般的にはこちらの方がよく使われる。
`型[] 変数名 = {値1, 値2, 値3, 値4, 値5...};`

####配列の長さを取得する
```java
int n = hoge.length;
```

配列名.lengthで配列の長さを取得できる。戻り値はint型
要素数ではないことに注意。`型[] 変数名 = new 型[3];`で初期化した場合、`変数名.length`は`3`を返す。
Googleカレンダー使ったら祝日判定が非常に楽になった話

# はじめに
僕のインターン先では曜日ごとに担当を決めて定常業務を回しています。
先日、その日の担当をslackに通知するbotをGASで作ったのですが、最初の実装だと来たる10連休中も通知が来てしまいウザいなということに気づき、土日祝日は通知を飛ばさないようにしようと思いました。

土日に関しては普通に`Date.getDay()`の値で出し分ければいいのですが、祝日はどうしたらいいのかと調べても面倒そうな方法ばかりで手を出したくありませんでした。
さて、どうしたものかと思っていた時に「Googleカレンダーに日本の祝日表示されてるやんけ！」ということに気づきました。

# 実装
```code.js
function isHoliday(){//Googleカレンダー「日本の祝日」にイベントがあれば祝日と判定する
  var today = new Date();

  var calendars = CalendarApp.getCalendarsByName("日本の祝日");
  var holidays = calendars[0];
  
  var events = holidays.getEventsForDay(today);
  
  if(events.length > 0){
    return true;
  }
  
  return false;
}
```

GASには`CalendarApp`というクラスがありGoogleカレンダーを扱うことができます。
  参考： [今日からGoogleカレンダーで使えるGASのコード一覧](http://google-apps-script.net/instructions/?p=249)

`getCalendarsByName(name)`というメソッドにより、自分のGoogleアカウントに登録されたカレンダーを名前で検索して取得できます。このメソッドの戻り値は`Calendar`オブジェクトの配列となるので、`calendars[0]`として「日本の祝日」カレンダーにアクセスします。(「日本の祝日」という名前で登録されているカレンダーは当然一つだけなのでindexは0です)

`Calendar`オブジェクトを取り出せたら`getEventsForDay(date)`メソッドにより指定した日付に登録されているイベントを配列で取り出します。
「日本の祝日」カレンダーに登録されているイベントは祝日だけなので、指定した日付にイベントが存在すれば(`events.length > 0`)、その日は祝日であると判定できます。

# おわりに
Googleカレンダーで祝日判定するメリットは、イレギュラーな祝日(例えば今年5月1日の「天皇の即位の日」)があったとしてもGoogleさまが勝手に追加してくださるのでこちらでわざわざ書き足したりする必要がないことですね。

GAS APIの便利さに慣れすぎちゃってどうしよう。

# 追記
### 2019/04/21
ほぼ同内容で記事を書かれている先人たちがいらっしゃったようですので紹介しておきます。

- [GoogleAppsScriptで日本の祝日を取得する](https://qiita.com/kamatama_41/items/be40e05524530920a9d9)
- [【GAS】休日・祝日を判定する関数](https://qiita.com/jz4o/items/d4e978f9085129155ca6)

### 2019/04/24
実際に土日祝以外のみに処理を行うにあたっては、以下のような`isWeekend()`を用意して週末でも祝日でもないことを確認して処理を行なっています。(上記では`today`を`isHoliday()`の内部で定義していましたが、実際には下記のように`main()`内で定義しています。)

```code.js
function isWeekend(today){
  var dayNum = today.getDay();//Date.getDay()は曜日番号として日曜始まりで0~6の値を返す

  if(dayNum == 0 || dayNum == 6){
    return true;
  }
  
  return false;
}
```

```code.js
function main(){
  var today = new Date();

  if(!(isWeekend(today) || isHoliday(today))){//平日=週末でも祝日でもない
    //ここで処理をする
  }
}
```
PCLのビルドが急にできなくなった問題

# TL;DR
再起動しよう！

# 問題

- PCLで直前までビルドできていたものができなくなった．
- コードをビルドできていた時点まで戻してもビルド不可
- cmakeからやり直してもビルド不可
- 以前にビルド完了を確認したプロジェクトもビルド不可


```:makeの出力
[ 50%] Linking CXX executable proj
/usr/lib/x86_64-linux-gnu/libvtkIOMPIParallel-6.3.so.6.3.0: undefined reference to `vtkWindBladeReader::GetFieldOutput()'
collect2: error: ld returned 1 exit status
CMakeFiles/proj.dir/build.make:367: recipe for target 'proj' failed
make[2]: *** [proj] Error 1
CMakeFiles/Makefile2:67: recipe for target 'CMakeFiles/proj.dir/all' failed
make[1]: *** [CMakeFiles/proj.dir/all] Error 2
Makefile:83: recipe for target 'all' failed
make: *** [all] Error 2
```
# 対処〜失敗〜

>undefined reference to `vtkWindBladeReader::GetFieldOutput()'

とあったので，vtkの何かが足りないのかと思い，

    $ apt search vtk
とvtkパッケージを検索し，

    $ sudo apt install vtk6.*
などを試したが，解決しなかった．

この時，PCLの依存関係を確認するためには

    $ apt depends libpcl
とすると良い．

# 対処〜成功〜
その他試行錯誤したが解決せず，最終的には

    $ reboot
と再起動したら解決した．

再起動最強
MacにPCLをインストールする

# はじめに

普段からPCLを使用していて，それはUbuntu上で動作させていた．
最近Macbook Proを購入して，そちらでの環境はずっと無視していたのだが，そちらでも動作環境があると便利だなと急に思い立ち，すぐにインストールを完了した．

# PCL(Point Cloud Library)とは
公式のページは[こちら](http://www.pointclouds.org/)にある．

>What is it?
The Point Cloud Library (PCL) is a standalone, large scale, open project for 2D/3D image and point cloud processing.
PCL is released under the terms of the BSD license, and thus free for commercial and research use. We are financially supported by a consortium of commercial companies, with our own non-profit organization, Open Perception. We would also like to thank individual donors and contributors that have been helping the project.

と説明されている．簡単に和訳したものがいかである．どうも英語が苦手なので，間違っていたら指摘していただけるとありがたい．

>PCLはスターンドアローンで動作する2D/3D点群処理プロジェクトである．
PCLはBSDライセンスでリリースされており，自由に商用利用および研究利用できる．複数の商業会社によってサポートされている独自の非営利組織である．加えて，プロジェクトを支援する個人にも感謝したい．

点群を処理するためのライブラリである．

# インストール方法
調べたところ，MacではHomebrewを用いてコマンド一発でインストールできるようだ．

## Homebrewとは
Homebrewを使用していない人はここからやらなくてはいけない．
Homebrewはユーザごとにパッケージを管理してくれる便利なヤツである．
[インストール方法はこちら](https://brew.sh/index_ja)に記載されており，

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

とコマンドを実行すると良い．

## PCLのインストール
[公式のドキュメンテーション](http://www.pointclouds.org/documentation/tutorials/installing_homebrew.php)にPCLインストール用のコマンドが記載されており，

    $ brew install pcl

とするだけで良い．

## cmakeのインストール
PCLのプロジェクトをビルドする際にはcmakeを利用することが推奨されている．なのでこちらもhomebrewからインストールしてしまうと良い．

    $ brew install cmake

## ビルドエラーが起こるかもしれない
実際にプロジェクトをビルドする際に，以下のエラーがおこった．

```:buildError
$ make
[ 50%] Linking CXX executable proj
ld: library not found for -lflann
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make[2]: *** [proj] Error 1
make[1]: *** [CMakeFiles/proj.dir/all] Error 2
make: *** [all] Error 2
```
解決方法は[こちら](https://qiita.com/ysuzuki19/items/044a85efb03f3c290a95)に記載した．
circleciでcloud-sdkを使用してapp engineにデプロイする

下記のようにgoogle/cloud-sdkイメージを使用して「initialize gcloud」内のような形でgcloudの設定を行う。
quietオプションがないとインタラクティブになるので注意。

```yaml
version: 2
jobs:
  deploy_production:
    docker:
      - image: google/cloud-sdk
    steps:
      - checkout
      
      - run:
          name: initialize gcloud
          command: |
            echo $GCLOUD_SERVICE_KEY | gcloud auth activate-service-account --key-file=-
            gcloud --quiet config set project ${GOOGLE_PROJECT_ID}
            gcloud --quiet config set compute/zone ${GOOGLE_COMPUTE_ZONE}

      - run:
          name: deploy production
          command: |
            curl -sL https://deb.nodesource.com/setup_10.x | bash -
            apt-get install -y nodejs
            npm i
            npm run build
            gcloud app deploy --quiet --project=hogehoge prod-app.yaml
```
Siv3DでJSON to Stringを実装した

# はじめに

:::note warn
OpenSiv3D v0.6.6時点では
`JSON`classに統合され
標準でStringへの変換が可能になりました。
:::

```cpp
Format(json)
```

## Siv3D とは

[Siv3D](https://play-siv3d.hateblo.jp)

> Siv3D は C++ で楽しく簡単にゲームやメディアアートを作れるライブラリです。

なお現在はOpenSiv3Dの開発がメインとなっており旧Siv3Dの開発は終了しています。

今回は旧Siv3Dでの実装ですが、OpenSiv3Dでも参考にすることはできます。

## 問題点

Siv3D/OpenSiv3Dには`JSONReader`というクラスが用意されており簡単にJSONファイルをパースして使用することができます。

**しかし`JSONWriter`はない**

なので、ふと必要になった時に困ると思い簡単に実装してみた。

# JSONエンコードの実装

`JSONReader`でパースした際は`JSONValue`型で取得できるので、流用し
`JSONValue`から`String`への変換を実装する。

```cpp:JSONEncode.hpp
#pragma once
#include<Siv3D/JSONValue.hpp>

namespace JSON
{
	s3d::String Encode(const s3d::JSONValue& json);
	void Encode(const s3d::JSONValue& json, s3d::String& out);
}
```
```cpp:JSONEncode.cpp
#include "JSONEncode.hpp"
using namespace s3d;

namespace
{
	void Dump(const JSONValue& json, String& out);

	// json array
	void Dump(const JSONArray& json, String& out)
	{
		out += L"[";
		bool first = true;
		for (const auto& value : json) {
			if (!first) {
				out += L", ";
			}
			first = false;
			Dump(value, out);
		}
		out += L"]";
	}

	//json object
	void Dump(const JSONObject& json, String& out)
	{
		out += L"{";
		bool first = true;
		for (const auto& value : json) {
			if (!first) {
				out += L", ";
			}
			first = false;
			out += L'"' + value.first + L'"' + L": ";
			Dump(value.second, out);
		}
		out += L"}";
	}

	// json
	void Dump(const JSONValue& json, String& out)
	{
		if (json.isNull()) {
			out += L"null";
		}
		else if (json.isBool() || json.isNumber()) {
			out += json.to_str();
		}
		else if (json.isString()) {
			out += L'"' + json.getString() + L'"';
		}
		else if (json.isArray()) {
			Dump(json.getArray(), out);
		}
		else if (json.isObject()) {
			Dump(json.getObject(), out);
		}
	}
}

namespace JSON
{
	String Encode(const JSONValue& json)
	{
		String out;
		Encode(json, out);
		return out;
	}

	void Encode(const JSONValue& json, String& out)
	{
		::Dump(json, out);
	}
}
```

# 使ってみる

```cpp:Main.cpp
#include <Siv3D.hpp>
#include "JSONEncode.hpp"

void Main()
{
	JSONObject json;
	json[L"number"] = JSONValue(1.0);
	json[L"bool"] = JSONValue(true);
	json[L"string"] = JSONValue(L"Hoge");
	json[L"array"] = JSONValue(JSONArray{ 
		JSONValue(0.1),
		JSONValue(L"Foo")
	});
	json[L"object"] = JSONValue(JSONObject{
		{L"key1",JSONValue(false)} ,
	});
	json[L"null"] = JSONValue(JSONValue::ValueType::Null, true);

	// 文字列型に変換
	String str = JSON::Encode(JSONValue(json));
	Println(str);
	WaitKey();
}
```
コンストラクタが`explicit`指定されているため、ちょっと使いにくい…
(JSONValueに関してはラッパーを作ればもう少し楽にかける)

Stringにできれば`TextWriter`を使って、そのままjsonファイルとして書き出しもできます。

# まとめ
- JSONValueをStringに変換できた。
- OpenSiv3DにJSON書き出し(to String)のほうも公式実装されると嬉しいなぁ
[Vue.js]propsは単方向のデータフロー?場合によってそうでもない

##単方向のデータフローは何か
`全てのプロパティは、子プロパティと親プロパティの間に、 単方向のバインディング を形成します: 親のプロパティが更新されると、子へと流れ落ちていきますが、それ以外の方法でデータが流れることはありません。これによって、子コンポーネントが誤って親の状態を変更することがなく、これによって、アプリのデータフローを 理解しづらい 可能性のある子コンポーネントによる誤った親の状態変更から、防ぎます.....。`----vue.js公式ドキュメントより

##具体例を見てみましょう
下記の様に親コンポーネント(Parent)と子コンポーネント(Child)が存在します

```vuejs:parent.vue
<template>
  <div id="app">
    <child :msg="msg"></child>
  </div>
</template>

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

export default {
  name: 'parent',
  data: function () {
    return{
      msg:'ご飯だよ'
    }
  },
  components: {
    Child
  }
}
</script>
<style>
</style>
```
```vuejs:Child.vue
<template>
  <div class="hello">
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'child',
  props:[ 'msg' ],
}
</script>

<style scoped>
</style>
```
parent.vueからプロパティー`msg`をChild.vueに渡しています、何の問題もありません
<img width="942" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/e30e6555-1b84-050d-e0e1-3e7b0350929b.png">
**ここでChild.vueに一つのクリックイベントを追加します**

```vuejs:Child.vue
<template>
  <div class="hello">
    <p>{{msg}}</p>
<!--追加-->
    <button @click="childMsg">食べたくない</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  props:[ 'msg' ],
//追加
  methods:{
    childMsg:function () {
      this.msg = '食べたくない'
    }
  }
}
</script>

<style scoped>

</style>
```
実際クリックしたら,parent.vueから渡された値は変換しましたが警告も一つ出てます
<img width="950" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/eadfc499-6524-c012-394f-2db19a35d6aa.png">
訳すと
`親コンポーネントが再レンダリングされるたびに値が上書きされるため、propsを直接変更しないでください。`
Child.vueで値を上書きしようとしても、結局画面再度読み込みすれば、また値が元に戻ってしまう,parent.vueで定義された値を影響出来ません,公式ドキュメントが書いた通りで結果ですね
##単方向のデータフローではない場合
`JavaScript のオブジェクトと配列は、参照渡しされることに注意してください。参照として渡されるため、子コンポーネント内で配列やオブジェクトを変更すると、 親の状態へと影響します。`---vue.js公式ドキュメント

##具体例を見てみます

```vuejs:parent.vue
<template>
  <div id="app">
    <child :messge="messge"></child>
  </div>
</template>

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

export default {
  name: 'parent',
  data: function () {
//オブジェクトプロパティーに修正
    return{
      messge:{msg:'ご飯だよ'}
    }
  },
  components: {
    Child
  }
}
</script>

<style>

</style>
```

```vuejs:Child.vue
<template>
  <div class="hello">
    <p>{{messge.msg}}</p>
    <button @click="clickFunction">食べたくない</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  props:[ 'messge' ],
//イベント追加
  methods:{
    clickFunction:function () {
      this.messge.msg = '食べたくない'
    }
  }
}
</script>

<style scoped>

</style>
```
<img width="956" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/2f6f7ee2-a7a1-5682-ea86-281a4295ce28.png">

この場合データ変換しても、警告はされません
##結論
警告されない理由は与えるプロパティーのtypeと関係してます,もしプロパティーが`Array`あるいは`Object`の場合,親コンポーネントから子コンポーネントに渡すのはプロパティーの`index`になります,つまりコンポーネントの間でプロパティーを共有してる形になります。
github private public 変更

無料でprivateのリポジトリが作成可能になったGitHub。
さっそくprivateリポジトリを作ってコードを入れていたが、
ある勉強会でコードを見たいという要望があったのでpublicにすることになってちょこっと調べたメモ。

他の人もきっとDanger Zoneのボタンは押したらなにが出てくるのか気になると思うので載せてみた。

# githubおなじみの「Danger Zone」

メニューの「Settings」でページの一番下にスクロールしましょう。

![github_public01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/5e5b845f-20b9-553f-4ea6-f1ffcdebc843.png)

# private → public

![github_public02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/671958a1-45fc-dc5b-8e7c-3e2050ccb2e9.png)

「Danger Zone」に「Make this repository public」と書いている部分の`Make public`ボタンを押す。

![github_public03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/d1ff12c8-fbf0-9b5c-ea11-a720c4fb8ed3.png)

ポップアップの確認に変更するリポジトリ名を入力すると、ボタンが赤くなので押すとOK。

# public → private

![github_public04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/a29bc8e1-38fd-a0c4-2ea2-21cd9893e2aa.png)

「Danger Zone」に「Make this repository private」と書いている部分の`Make private`ボタンを押す。

![github_public05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/d1910991-4ce4-2e09-8923-3b50c0d905e4.png)

ポップアップの確認に変更するリポジトリ名を入力すると、ボタンが赤くなので押すとOK。
キャッシュメモリとは

#キャッシュメモリとは
CPUは、コンピュータの動作に必要なデータやプログラムをメモリ(主記憶装置)との間でやり取りをします。
しかし、CPUに比べるとメモリは非常に遅いので、読み書きの度にメモリはアクセスしていると、待ち時間ばかりが発生してしまいます。
そこでメモリとCPUの間に、より高速に読み書きできるメモリを置いて、速度差によるロスを吸収させます。
これを<font color="red">キャッシュメモリ</font>と呼びます。

#構成
　CPUの中にはこのキャッシュメモリが入っていて、処理の高速化が図られています。
　キャッシュというのはひとつではなくて、１次キャッシュ、２次キャッシュ……と、重ねて設置することができる装置です。
　CPUに内蔵できる容量はごく小さいものになりますから、<font color="blue">それより低速だけど、その分容量を大きく持てる</font>メモリをCPUの外側にキャッシュとして増設したりすると、よりキャッシュ効果が期待できるわけです。
この時用いるのが<font color="blue">SRAM</font>です。
DRM(メモリ)との違いは<a href="https://www.mataro1.com/entry/2015/02/26/DRAM%E3%81%A8SRAM%E3%81%AE%E9%81%95%E3%81%84%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E6%AF%94%E8%BC%83%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F">こちら</a>の記事をご参考に。

#おまけ
上に行くほど高速で、下に行くほど低速になる。

・レジスタ
・キャッシュメモリ
・主記憶装置(メモリ)
・ディスクキャッシュ
・磁気ディスク装置
Excel VBAコース第3回内容

全12回 Excel VBAコースの第3回の内容です。

#条件分岐(If文)
```
If 条件１ Then
　　処理１
Elseif 条件２
　　処理２
Else
　　処理３
End If
```

#よく使う演算子
・論理演算子(Or・And・Not)

・比較演算子(等号・不等号)

|                  |         例        |        意味        |
|:-----------------|------------------:|:------------------:|
| 等号             |      A = B        |    AはBと等しい       |
|                  |      A <> B      |    AはBと等しくない   |
| 不等号            |      A < B      |    AはBより小さい  |
|                  |      A <= B      |    AはB以下　   |
|          |      A > B      |    AはBより大きい  |
|                  |      A >= B      |    AはB以上　   |

#条件分岐(Select case ～)
```
Select Case 変数
    Case 条件１
　     処理１
    Case 条件２
　　   処理２
    Case Else
　　   処理３
End Select
```
Phoenix Frameworkでデータベースを使う

[Phoenix Framework を導入からの続き](https://qiita.com/shio1997/items/d03cf9d5335376098584)

# 動作環境
elixir1.8
Phoenix Framework1.4.3
# PostgreSQL
MySQLなど他のデータベースを使用することも可能ですが、
Phoenix FrameworkのデフォルトデータベースはPostgreSQLのため、
PostgreSQLを使用します。

※WSL2でPostgreSQLを使用する場合、下の設定が必要

```postgresql.conf
 data_sync_retry = on
 fsync = off
```

# Ecto
Phoenix Frameworkで使用されているElixir用のクエリ作成ツールとデータベースラッパーです。
mixからectoを実行してデータベースを作成します。

mixから利用できるectoのコマンドは下のコマンドで確認ができます。

```shell
mix help | grep ecto
``` 

```
mix ecto               # Prints Ecto help information
mix ecto.create        # Creates the repository storage
mix ecto.drop          # Drops the repository storage
mix ecto.dump          # Dumps the repository database structure
mix ecto.gen.migration # Generates a new migration for the repo
mix ecto.gen.repo      # Generates a new repository
mix ecto.load          # Loads previously dumped database structure
mix ecto.migrate       # Runs the repository migrations
mix ecto.migrations    # Displays the repository migration status
mix ecto.reset         # Alias defined in mix.exs
mix ecto.rollback      # Rolls back the repository migrations
mix ecto.setup         # Alias defined in mix.exs
mix phx.new.ecto       # Creates a new Ecto project within an umbrella project
```

# 初期設定
``` config/dev.exs``` にDBへの接続設定を記入します。

PostgreSQLを使う場合下のコマンドでユーザーとデータベースを作成しておく必要があります。

```
createuser --createdb --username=postgres --pwprompt ユーザー名
createdb データベース名 --encoding=UTF-8 --lc-collate=C --lc-ctype=C --owner=ユーザー名 --template=template0
```

```config/dev.exs
config :app, App.Repo,
  username: "ユーザー名",
  password: "パスワード",
  database: "データベース名",
  hostname: "ホスト名",
  pool_size: 10
```


# データベース作成
下のコマンドでデータベースを作成します。

```shell
mix ecto.create
```

初期設定で設定したdatabaseの値でデータベースが作成されます。

# データベース削除
データベースを削除する場合は下のコマンドで削除できます。

```shell
mix ecto.drop
```


# テーブル作成
Phoenix Frameworkのリファレンスに書かれているテーブルをそのまま作成してみます。
下のコマンドで下の2ファイルが作成されます。

```shell
mix phx.gen.schema Blog.Post blog_posts title:string views:integer
```

*lib/app/blog/post.ex* ⇒モデルファイル
*priv/repo/migrations/xxxxxxxxxxxxxx_create_blog_posts.exs*⇒マイグレーションファイル

下のコマンドでマイグレーションファイルを元にテーブルを作成します。

```shell
mix ecto.migrate
```

Phoenix Frameworkがサポートしているデータ型などは下のページに掲載されています。
https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Schema.html
Gnuplotで生成したファイルを自動更新する方法 for Mac

#何がしたいか
1.Gnuplotのスクリプトを編集
2.スクリプトを実行する
3.epsを表示かつ自動更新
4.嬉しい！！！！！！！！！！

#結論
1.Skimをダウンロード
2.自動更新を設定
3.スクリプトファイルでepsを出力するコードの後に以下のコードを追加
`system "open -a skim hoge.eps"`

#はじめに
初めましてaokkeyです．この記事をご覧になっているということは，きっとMacを使っていてGnuplotでグラフを描いている方だと思います．つまり皆さんはGnuplotを**編集し，実行し，epsを開き，編集し，閉じ，実行し...(以下ループ）**の苦しみに苛まれていることでしょう．僕もその一人でした...
そんなある日，先輩から「Gnuplotの編集めんどくさいからなんか考えて〜」と言う鶴の一声がかかったのです！！！！
自分なりに良いと思った方法をまとめました．

#何をやれば良いのか
結論を読んでいただければ大体の人はできると思いますが，そんなんわかんねーよと言う人はここから下も読んでいってください．
##Skimのダウンロードと自動更新の設定
[Skim](https://skim-app.sourceforge.io/)とはmac用のpdfリーダーです.
プレビューあるからいらねーじゃんと言ったそこのアナタ！早まらないで！
Skimの最大の特徴は**ファイルの更新を監視**してくれることです．
そのため，MacでTexを書く方はお世話になっている人も多いと思います．

[こちらから](https://skim-app.sourceforge.io/)Skimをダウンロードしてください．
無事にダウンロードできたら自動更新の設定をします．
画面一番上のSkim>環境設定>同期する>ファイルの変更をチェック,自動的にリロードするにチェックをつける

##Gnuplotにepsを自分で開かせる
Skimの設定が完了したら，GnuplotからepsをSkimで開かせないといけません.
Gnuplotのスクリプトファイルに以下のように追加してください.

```Gnuplot:huge.gp
plot~~~
rep~~~~
set output 'hoge.eps'
replot

system "open -a skim hoge.eps"
```
systemはGnuplotからシェルコマンドを叩くもので，-aはアプリケーションを指定するopenのオプションです．

ここまでできればあとは実行するだけです！！
Skimが起動すること，編集して実行すると反映されることを確認してください！！
AppEngine Node.js Standard Environment 備忘録

## force https
app.yaml内で下記のように記述する。

```yaml
handlers:
  - url: /.*
    script: auto
    secure: always
    redirect_http_response_code: 301
```

## 基本0台
Node.jsに限らず、app.yaml内で下記の記述を行えば基本的に0台で運用できるはず。

```yaml
automatic_scaling:
  min_instances: 0
  min_idle_instances: 0
```


## 参考
[app.yaml構成ファイル](https://cloud.google.com/appengine/docs/standard/nodejs/config/appref?hl=ja)
Visual Studio 2019でVimキーバインド設定を行う

##記事概要
Visual Studioの拡張機能「VsVim」をインストールし、Visual Studio上でVimが
使えるように設定します。

##手順
メニューバー「拡張機能」➞「拡張機能の管理」からVsVimをインストール
<img width="706" alt="vsvim.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109300/fa086a1b-fe2e-9ab9-f8dd-bc4f91bc3abc.png">

左のメニューの「オンライン」をクリックし、検索で「VsVim」とするとVsVimが出てくるので、インストールします。

再起動すれば、Visual Studioで快適なVim生活を送れるようになります。

##ショートカット設定
Visual StudioとVimのショートカットが被っているものは設定で変更できます。
メニューバーの「ツール」➞「オプション」➞「VsVim」から設定可能です。

<img width="523" alt="Vs.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109300/fa8f314d-d902-520d-e220-0f92adae28d5.png">
npm概要メモ

# 概要

npmとはの概要をメモ書き程度に

# npmとは

node.jsのツールやパッケージをインストールしたり管理するもの。

# install

## ローカルとグローバルの違い

ローカルの場合、カレントワーキングディレクトリのnode_modulesフォルダーにパッケージをインストールします。グローバルはrootが所有する{prefix}/lib/node_modules/にパッケージをインストールします（ {prefix}は通常/usr/か/usr/local）。基本的に開発時にはローカルでinstallすることのほうが多い。下記だとローカルに落ちる。

```
npm install package_name
```

# npmコマンド

https://qiita.com/_daisuke/items/d7c8f0aec9730be36267
フロントエンド開発者向けのDockerによるPython開発環境構築

# 概要
機械学習、AI、データサイエンス領域が熱い今、最も注目を浴びてる言語の1つがPythonだと思います。
ここではPythonをこれから学ぶ方へのファーストステップとしてフロントエンド開発者的にはとっつきやすい簡易API作成をDocker,Pythonを使って行います。
それによってPython開発環境の準備ができればと思います。

# 環境
* Mac
* [Docker for Mac](https://docs.docker.com/docker-for-mac/)が既に入っている

# 環境構築
https://github.com/hikarut/Python-dev
### Docker準備
以下ファイルを作成します。

```yml:docker-compose.yml
version: '3'
services:
  python3:
    restart: always
    build: .
    container_name: 'python3'
    ports:
      - "8000:8000"
    working_dir: '/root/'
     tty: true
     volumes:
       - ./src:/root/src/
       - ~/.zshrc:/root/.zshrc
```
※`.zshrc`ファイルはローカルで使っているものとコンテナにログインした時に同じようにシェルを使ってみたかったという理由でマウントしてあります。あまり本質的ではないので、不要なら削除しておいた方が良いです。

```docker:Dockerfile
FROM python:3
USER root

RUN apt-get update
RUN apt-get install -y vim less
RUN apt-get install -y zsh less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

EXPOSE 8000
CMD ["bash"]
```

### Dockerコマンド
以下よく使うDockerコマンドです。

* コンテナを起動

```zsh
$ docker-compose up -d
```

* プロセス確認

```zsh
$ docker-compose ps
```

* コンテナ内に入る(zsh)

```zsh
$ docker-compose exec python3 zsh
```

* bashで入る場合

```zsh
$ docker-compose exec python3 bash
```

* ビルド処理の反映(Dockerfileの反映)

```zsh
$ docker-compose up -d --build
```

* log確認

```zsh
$ docker-compose logs python3
```

* コンテナ削除

```zsh
$ docker-compose down
```

### Python開発用のエディタ
Kiteというエディタが良さそうだったので試してみます。
Kiteを入れるだけでAtom、VSCode、Vim、PyCharmなどのエディタで補完をしてくれます。
フロントエンド開発で普段使っているエディタをそのまま使えそうで良いです。
参考：[Pythonで開発するならKiteを導入して爆速開発 - Qiita]
(https://qiita.com/KeisukeToyota/items/75c3b4964b65a18d46d4)

# FastAPIを試してみる
### 概要
FastAPIはPython製のAPIフレームワークです。名前の通り非常に高速なのが特徴です。
また自動でSwaggerのドキュメントも生成してくれるのでフロントエンド開発のAPIモック作成とかにも使えそうです。
https://fastapi.tiangolo.com/

### インストール
* 準備したdockerコンテナ上にFastAPIをインストール

```zsh
$ docker-compose exec python3 pip install fastapi uvicorn
```

* ローカルでマウントされている`/src`以下に`main.py`ファイルを作成

```python:main.py
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}
```

* FastAPIを実行

```zsh
$ docker-compose exec python3 zsh -c "cd src && uvicorn main:app --host 0.0.0.0 --reload"
```
※uvicornはデフォルトホストが`127.0.0.1`になっていますが、ローカルからポートフォワードされている`0.0.0.0`を指定します。
参考：[Uvicorn](https://www.uvicorn.org/)


* 以下URLで確認
  * http://localhost:8000/
  * http://localhost:8000/items/5?q=somequery
  * http://localhost:8000/docs

# 感想
今回はフロントエンド開発者がまずはPythonの開発環境になれるようにFastAPIを使って簡単なAPIを作成するのを試してみました。Dockerの環境で自由にPythonを触れるのでそこでAPI以外にも色々な開発ができるかなと思います。
FastAPIのように軽量で高速なフレームワークがあると、フロントエンドで使うAPIの開発でも今後Pythonが選択されることが増えてくるかなと思うので、Pythonに慣れておくのは非常に重要だなと感じています。

# 参考
* [docker-composeファイルリファレンス](http://docs.docker.jp/compose/compose-file.html)
* [dockerで簡易にpython3の環境を作ってみる - Qiita](https://qiita.com/reflet/items/4b3f91661a54ec70a7dc)
【Inkscape】オブジェクトを回転させる

環境メモ
⭐️Mac OS Mojave バージョン10.14.4
⭐️Inkscape 0.92
⭐️Mac book

クリック又は、Shift＋Sで回転できる
<img width="691" alt="スクリーンショット 2019-04-20 16.09.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c88a2429-4be4-b4b4-296e-5696d5516cb9.png">
Ruby on Rails 画面表示

#Rails基礎知識

+ ルーティング(route)
+ コントローラー(controller)
+ ビュー(view)

ここでは、Railsの基礎中の基礎であるルーティングからビューまでの作成の流れを記載していきます。
##RailsでWEBページを表示する
まずはじめに、シンプルなWEBページを表示するための仕組みを知りましょう。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391854/7c5a616d-e5b1-fe7d-de15-cba4c45d762e.png)
このようにサーバーにリクエストを送り、サーバーがレスポンスを返すというような仕組みになっています。
これを踏まえてRailsでは、下記の画像の左側の流れになります。
<img width="512" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3238353131342f65326435623531342d343134372d623562352d343238352d3635353834363035663639332e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391854/a322fd7f-7cd6-3730-3f3e-db4cc786c35c.png">
ブラウザからアクセスすると「ルーティング」「コントローラー」「ビュー」の順を辿ってレスポンスが返っているのがわかりますね。
以下で、詳しく解説していきます。
###ルーティング(route)
送られてきたリクエストに対してどの「コントローラー」のどの「アクション」を動かすのかを設定します。
####ルーティングファイル
config/routes.rb
にルーティングの設定を記載します。
ここで新しいルーティングを記述したり、削除する記述をしたりします。

```
Rails.application.routes.draw do
  get 'tweets', to: 'tweets#index'
end
```
###パスとアクション

```
get 'tweets', to: 'tweets#index'
```
左側の'tweets'はURLのパスで、左の'tweets#index'はコントローラー名#アクション名というような意味になります。
まだ、コントローラーがありませんので、次にコントローラーを作っていきましょう。
###コントローラー(controller)
ルーティングとビューを繋ぐ役割を持っています。ブラウザからリクエストが送られて来たらルーティングが読まれ、それに対応するコントローラーが動きます。
####コントローラーを生成する
現段階では、まだコントローラーのファイルがないので下記のコマンドを実行してコントローラーを生成します。

```
$ rails g controller コントローラ名
```
このコマンドだけでコントローラーに必要なファイルができました。
では、コントローラーにアクションを追加していきましょう。
app/controlers/生成したコントローラー

```
class TweetsController < ApplicationController
  def index
  end
end
```
このdefのあとがアクションになります。ルーティングのアクションと同じになっているか確認しましょう。アクションは#のあとでしたね。

```
get 'tweets', to: 'tweets#index'
```
上記はルーティングですが、indexと同じになっていることがわかります。
これで、ルーティングとコントローラーができたので最後にビューを作っていきます。
###ビュー(view)
ビューは、アクセスしたときに表示されます。HTMLファイルのようなイメージをしていただければわかりやすいと思います。
####ビューを作成する
app/views/生成したディレクトリ
にindex.html.erb　といファイルを作りましょう。
エディタ左のディレクトリの上で右クリックすればファイルを作成することができます。
Railsでは、　html.erb というファイルを使用するので .erb のつけ忘れには注意しましょう。
作成した白紙の　index.html.erb　に以下を記述しましょう。

```
<h1>ハローワールド</h1>
```
これで、ルーティング、コントローラー、ビューの準備ができたのでブラウザでビューを表示させてみましょう。
###ローカル環境でブラウザにアクセスしてビューを表示する
ターミナルで、Railsを起動します。

```
$ rails s
```
これで、起動できました。
それでは、URLの欄で　http://localhost:3000/　と記述してアクセスしてみましょう。
![images.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391854/e6368bba-fc2c-94a5-c837-97aff7d6339b.jpeg)
がでていれば成功です。続いて先ほど作成したページにアクセスしていきましょう。
http://localhost:3000/tweets
上記のようにルーティングのパスを記述すればアクセスできます。
####ローカル環境から抜ける
controlキー　と　cキー　の同時押しで抜けることができます。
また、起動したい場合は、

```
$ rails s
```
で起動できます。ターミナル上で過去のコマンドを再実行したい場合は　↑キー　で選択できます。
###おまけ
ターミナルで、Railsを起動している場合は別のターミナルや別タブを開いたほうが使いやすいです。
ターミナル上で、下記のショートカットキーを実行してみてください。
####新しいターミナルを開く
command + N
####ターミナルの別タブを開く
command + T
#さいごに
これで、画面を表示することだけができましたが、まだ「データ」を保存したりできません。
それでは、データベースを扱っていくのは別の章で学習していきましょう。
Craft CMS のテンプレート（Twig）で今月末を取得する

Craft CMS のテンプレートの中で今月末の日付を取得するには下記のように書けばOK。

```twig
{% set thisMonth = 'now'|date('Y-m') %}
{% set lastDayOfThisMonth = 'last day of ' ~ thisMonth %}
{{ lastDayOfThisMonth|date('Y-m-d') }}
```
Mistel Barocco MD600 RGBの左右を繋ぐケーブル

# 概要
Mistel Barocco MD600 RGBというキーボードを使っているのですが（[参考](https://qiita.com/hidehiro98/items/838b59f8bc4ba7fa2608)）、これの左右を繋ぐ両方USB Micro-B（いわゆるmicro USB）のオスのケーブルが短いので探していきます。
なんかMD600は無印とRGBというのがあるのですが、無印ではいけるがRGBではだめというケーブルがあるらしい。

# 結論
- いけた カモン 【(COMON)製】USB2.0(MicroB)ケーブル(オス←→オス)/黒/1m【MB-10】
https://www.amazon.co.jp/dp/B0088EIC6O/

- だめだった エレコム USBケーブル オーディオ用 変換ケーブル (microB to microB) 金メッキコネクター採用 0.8m DH-MBMB08
https://www.amazon.co.jp/dp/B01FTF06GS/ （OTG (On the Go)ケーブルと書いてあるがだめだった）

# 参考
http://anekos.hatenablog.com/entry/2017/06/03/211851
https://scrapbox.io/nillpo/Mistel_Barocco%E3%81%AEmicroUSB_to_microUSB%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E3%81%84%E3%81%8B%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C
最近のUnicodeDecodeError

Windowsで作業していたら `pip install` や `flake8`, `mypy` 等いろんなところで `UnicodeDecodeError` が出て困ったので調べた。

```
Python 3.6.8 (tags/v3.6.8:3c6b436a57, Dec 23 2018, 23:31:17) [MSC v.1916 32 bit (Intel)] on win32
```

調べてみてわかったのだけど、昔より悪くなってますね・・・

# 結論: モンキーパッチで対抗だ(無保証)

`%APPDATA%\Python\Python36\site-packages\usercustomize.py` に下記のコードを書いて、 `encoding` 引数なしの `open` の挙動を変えた。

```py
import builtins

__original = open
def __open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True, opener=None):
    # ここでprintデバッグすると状況が分かる
    if 'b' not in mode and not encoding:
        encoding = 'utf-8'
    return __original(file, mode, buffering, encoding, errors, newline, closefd, opener)

builtins.open = __open
```

`'b' not in mode` というのがポイントでひと手間かかった。
Windowsが `cp932` 止めるまで耐え忍ぶしかない。

# 調査過程
## エラー発生

```
UnicodeDecodeError: 'cp932' codec can't decode byte 0x83
```

以前遭遇したことがあるのでデフォルトエンコーディングを変更する方向で調べる

## sys.setdefaultencoding は既に死んでいる

```python
import sys
reload(sys) # 無い(importlib.reload)
sys.setdefaultencoding("utf-8") # 無い(たぶん python-3.3 以降)
```

しかし、

```
AttributeError: module 'sys' has no attribute 'setdefaultencoding'
```

* https://stackoverflow.com/questions/3828723/why-should-we-not-use-sys-setdefaultencodingutf-8-in-a-py-script
* https://bugs.python.org/issue9549 # python-3.3 2012-09

`setdefaultencoding ` は、以前から使うなって言われていて完全に無くなった様子。
`reload` で使えていたのが救済措置だったということですね。

## 環境変数PYTHONIOENCODING

`PYTHONIOENCODING="UTF-8"`

だめです。標準入出力用らしい。

## localeが関係あるぽい

* https://docs.python.org/ja/3/library/locale.html

openのencoding引数無しのときは `locale.getpreferredencoding` が使われるらしい

```python
>>> import locale
>>> locale.getpreferredencoding()
'cp932'
```

たしかに

## Windowsのpythonで locale.getpreferredencoding() を変える方法は無い

無いんだなこれが。

```python
>>> locale.setlocale(locale.LC_ALL, 'ja_JP.UTF-8')
'ja_JP.UTF-8'
>>> locale.getpreferredencoding()
'cp932'
```

ぐぬぬ

外側で `LANG=ja_JP.UTF-8` とか `chcp 65001` とかやっても変わりません。

モンキーパッチ作戦その1

```python:usercustomize.py
import locale

def getpreferredencoding():
    return 'utf-8'
locale.getpreferredencoding = getpreferredencoding
```

```python
>>> import locale
>>> locale.getpreferredencoding()
'utf-8'
```

いけるか？と思ったが `encoding` 引数無しの `open` の挙動が変わりませんでした。
で、最初の `open` を置き換える方法に辿り着いた。

# 参考になりました

* [Python 3の各種エンコーディングについて](https://qiita.com/methane/items/6e294ef5a1fad4afa843)
* [sitecustomize.py を使わず usercustomize.py を使おうね](https://qiita.com/tukiyo3/items/06c0821e5002eb73d43f)
YAML アンカーを使って Bitbucket Pipelines 構成を簡潔にする

YAML アンカーを利用して Bitbucket Pipelines 構成の重複が減らせることが分かったので紹介します。

# YAML アンカーを利用した例

`bitbucket-pipelines.yml` にはこのように記述します。アンカーの前方参照はできないようなので、 `definitions.steps` を上にして、 `&test` をアンカーとして使っています。

```yaml
definitions:
  steps:
    - step: &test
        caches:
          - pip
        script:
          - pip install setuptools
          - python ./setup.py test
pipelines:
  default:
    - step: *test
```

これだけでは利点があまり大きくありませんが、 Bitbucket Pipelines では `<<` によるオーバーライドも可能なので、パイプラインの数が増えたら便利になりますね。

```yaml
pipelines:
  default:
    - step: *test
  branches:
    python3:
      - step:
          <<: *test
          image: python:3
```
Ruby on Rails + puma + nginx でアプリを立ち上げる

# 目的
centos + nginx で railsアプリケーションを立ち上げたい
その作業をした際の備忘録

# 作業内容
### 前提
ruby on rails はインストール済み

### nginx のインストール

```
[root@localhost ~]# yum install -y n nginx
```

### nginx の設定変更
rails_app の部分は自分の作成しているアプリ名に書き換える

```/etc/nginx/nginx.conf
user  root;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    error_log  /var/log/nginx/error.log warn;

    upstream app {
        server unix:/var/work/<rails_app>/tmp/sockets/puma.sock;
    }

    server {
        listen 80;
        server_name localhost;

        location / {
        proxy_pass http://app;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_redirect off;
        }

    }
}

```

### nginx 起動

```
[root@localhost ~]# service nginx start
```

### puma の設定

####pumaとは
https://github.com/puma/puma/
webアプリケーションサーバーの一つ、並行処理が得意らしい

rails のpuma用設定ファイルに以下を追記する

```config/puma.rb
# 以下を追記
bind "unix://#{Rails.root}/tmp/sockets/puma.sock"
```

### rails 側で本番環境立ち上げ用の設定
本番環境用の設定で起動する場合は、秘密鍵を取得して環境変数に設定する必要がある

```
[root@localhost ~]# bundle exec rake secret
[root@localhost ~]# export SECRET_KEY_BASE= #上記コマンドで取得したキーを設定
```

本番用の環境設定ファイルを書き換える
ここ不要かもしれない

```config/environments/production.rb
~
  #config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.public_file_server.enabled = true
~
```


### サーバー起動

```
[root@localhost ~]# rails s -e production
* Version 3.12.1 (ruby 2.6.2-p47), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: production
* Listening on unix:///var/work/<rails_app>/tmp/sockets/puma.sock
Use Ctrl-C to stop
```

### アプリにアクセス
http://localhost:80 にアクセスし、表示ができることを確認する

### We're sorry, but something went wrong.エラーが出た
エラーが出てページが表示できなかったので、画面の指示通りにログファイルを確認する

```log/production.log
ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):
      5:     <%= csrf_meta_tags %>
      6:     <%= csp_meta_tag %>
      7: 
      8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      9:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     10:     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     11:   </head>
 FATAL -- :  app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb'
```

application.html.erb の8行目でエラーと出たが、テストサーバーで起動しても問題なく表示されるし心当たりがない

いろいろ調べて以下のページをもとに解決
https://teratail.com/questions/56995
パーミッションが適切でなかったようなので、キャッシュクリアなどを試す

```
[root@localhost ~]# bin/rails tmp:cache:clear 
[root@localhost ~]# bin/rails assets:precompile 
```

→ もう一回本番サーバー起動したら表示できた
Windowsでdocker-composeしてvolumesでハマった時に個人的に気にするリスト

# これは何？

``docker-compose``で**Windowsのディレクトリを指定してマウント**しようとして``volumes``辺りでハマった時、同じことを何度か調べた気がするのでメモにしました。

うまくいったりいかなかったりしてるので、フワッとしたことばかり書いています。
「これで大体うまくいくよ～」っていうのがあったら教えてください…。

# リスト

* 環境変数
* Shared Drives / Reset credentials
* docker-compose / docker-compose.yamlのバージョン
* ディレクトリの権限
* コンテナ削除
* volume削除
* Docker再起動
* volumesの書き方

---

### 環境変数

```
COMPOSE_CONVERT_WINDOWS_PATHS=1
```

気になる人は検索してもらえればたくさん出ると思う。
「**Docker for Windowsの人はそもそも関係ありません**」という記述も見た気がするが、これで直ったという記述も見た気がする。
環境変数いじったら、コマンドラインは立ち上げ直す。

### Shared Drives / Reset credentials

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145628/e5b89632-2789-260f-3827-2664a2df201a.png)

``Shared``をチェック入れ直して``Apply``し直したり、``Reset credentials``してやり直したりして解決することはある。

### ``docker-compose`` / ``docker-compose.yaml``のバージョン

とりあえず公式を見て最新にした方が良いとは思う。
ただ、最新を追いすぎても別の何かにハマる可能性は一応あることは頭に入れておく。

### ディレクトリの権限

変なことになっていないか見る程度。

### コンテナ削除

うまくいかなかったコンテナは消す。

### ``volume``削除

うまくいかなかった``volume``は恐らく残るので消した方が良い。

### Docker再起動

これのおかげで直ったパターンはあまり無い気はする。

### ``volumes``の書き方

いろいろ試してみて、うまくいったりすることもあった気がする。
``postgres``特有のバグとの合わせ技だったりすることもあって、正直よくわからない。

```パターン1.yaml
services:
  mysql:
    image: mysql
    volumes:
      - C:\temp:/var/lib/mysql
```

```パターン2.yaml
services:
  mysql:
    image: mysql
    volumes:
      - /C/temp/data/mysql:/var/lib/mysql
```

```driver_optsを付与するパターン.yaml
version: "3.7"
services:
  database:
    image: postgres:9.6-alpine
    volumes:
      - database:/var/lib/postgresql/data
volumes:
  database:
    driver_opts:
      type: none
      device: /c/temp/data
      o: bind
```

他にもこんな案も見た。

* https://stackoverflow.com/questions/50959475/docker-compose-on-windows-volume-not-working
* https://superuser.com/questions/1051520/docker-windows-container-how-to-mount-a-host-folder-as-data-volume-on-windows

# 参考にさせて頂いたもの

* [docker compose volume mounts not work on Windows #4303]
(https://github.com/docker/compose/issues/4303)
* [Docker for Windowsでpostgresのデータマウントができない人へ](https://qiita.com/kyo-bad/items/47b96883144a5bf1cb1e)
npm でコト始め

```bash:今のバージョン
$ node -v; npm -v
v10.15.3
6.4.1
```

```bash:初手
$ npm init -y; touch .npmrc
```
 
```json:package.json
"engines": {
  "node": "10.15.3",
  "npm": "6.4.1"
},
```

```bash:.npmrc
engine-strict=true
heading = "🤪"
progress = false
save = true
save-exact = true
```

```bash:パッケージの確認
$ npm v <package>
```

```bash:パッケージのインストール
$ npm i <package>
$ npm i -D <package>
```

```bash:設定(.npmrc)確認
$ npm c ls
```
カスタムLightGBMコードをGit管理する時に便利な設定

こんにちは、最近本家LightGBMに2つほど機能追加を実装して、PRが採用された[^1]ので喜んでいる@kenmatsu4です。  
[^1]: (1)複数metricsを指定している時にearly stopかける対象を1つ目に限定する機能 [[link](https://github.com/Microsoft/LightGBM/pull/2049)]と、 lgb.cv()を実行する時にtrainのmetricsも計算して表示する機能[[link](https://github.com/Microsoft/LightGBM/pull/2089)]の２件です。


Git管理されたLightGBMのコードを編集して実行させたいとき、 Forkした自分のlightGBMのpythonコードを直接参照して欲しいのでそのための設定です。

何もしないとpipやcondaでインストールした先のpythonコードを参照してしまうので、その向き先を変えます。自分のカスタムコードをGit管理しないのであれば直接`site-packages`配下の`lightgbm`にある.pyコードを直接書き換えてしまえばいいのですが、Git管理するのであればこの方法が自分はいいと思っています。

### 前提条件
* すでに動作するLightGBMがインストール済み（ビルド済みオブジェクトを参照するので）
* MacOS High Sierra 10.13.6（17G3025）で試しています。（他の環境でもそんなに変わらないはず）
* Anacondaで試しています（が、別な環境でもパスだけ注意すれば多分できる）
* Pythonコードのカスタマイズが対象です。（C++でIDEをうまく使う方法誰か教えてください！）


### 手順
1. https://github.com/Microsoft/LightGBM.git をForkして自分のアカウントにLightGBMを持ってくる。
1. git cloneでForkしたソースコード一式をダウンロード。（僕の場合は`git clone https://github.com/matsuken92/LightGBM.git`を実行）
1. `sys.path` からいま参照されている`site-packages`の場所を探してインストール済みの`lightgbm`フォルダを特定
1. 3.で見つけた`lightgbm`フォルダにある`lib_lightgbm.so`を`＜cloneしたLightGBMのパス＞/python-package`配下にコピー


### Notebookコード
以下Jupyter Notebookでの利用を想定しており、１つの区切りが１つのboxをイメージしています。

```py
import sys

# customしたライブラリを変更した時にimportするたびにリロードしてくれるように設定する。
%load_ext autoreload
%autoreload 2
```

```py
custom_lgb = "＜cloneしたLightGBMのパス＞"

 # Pythonが読み込むパスをsys.pathの先頭に追加
sys.path = [f"{custom_lgb}/python-package/"] + sys.path
```


```py
import lightgbm as lgb
```

これだけです！
例えば`＜cloneしたLightGBMのパス＞/python-package/__init__.py` にprint文を入れるとちゃんと表示されることが確認できます。
独自LightGBMにしてKaggleでライバルに差をつけよう！w
The Google Mobile Ads SDK was initialized incorrectly.のエラーでアプリがクラッシュした際の対処方法

#  概要
Admobのバージョンを上げたところ、クラッシュが発生したので、原因と対処方法についてまとめたいと思います。

# エラーログ
```
*** Terminating app due to uncaught exception 'GADInvalidInitializationException', 
reason: 'The Google Mobile Ads SDK was initialized incorrectly. 
Google AdMob publishers should follow instructions here: https://googlemobileadssdk.page.link/admob-ios-update-plist to include the AppMeasurement framework, 
set the -ObjC linker flag, and set GADApplicationIdentifier with a valid App ID.
 Google Ad Manager publishers should follow instructions here: https://googlemobileadssdk.page.link/ad-manager-ios-update-plist'
*** First throw call stack:
```

# 原因
Google Mobile AdsのSDKのverを7.42.0以上にあげるとInfo.plistにAdMobを追加しなくてはいけない仕様変更があったため。

# 対処方法
Info.plistの更新を行う。
Keyに GADApplicationIdentifier、ValueにAdMobのアプリIDを追加する。アプリID取得方法については[こちら](https://support.google.com/admob/answer/7356431)を参照してください。

```xml
<key>GADApplicationIdentifier</key>
<string>AdMobのアプリID</string>
```


# 参考資料
*Google AdMob*
https://developers.google.com/admob/ios/quick-start?hl=ja
MySQLの外部キー制約

# TL;DR

- 参照整合性とは、データを操作しても保証されるテーブルの構成のこと。具体的には以下の3つの事を指す。
    - FOREIGN KEY 制約
    - NOT NULL 制約
    - UNIQUE 制約
- FOREIGN KEY 制約とはテーブル間にまたがった**データの一貫性を保証する**制約。

# 環境

MySQL Version : 8.0.15-1debian9

# FOREIGN KEY 制約

FOREIGN KEY 制約を使ってテーブル間のデータの一貫性を保証することができる。

```
-- 基本的な構文
FOREIGN KEY 
  [インデックス名] (カラム名) 
  REFERENCES テーブル名 (カラム名) 
  [ON DELETE reference_option]
  [ON DELETE reference_option]

reference_option:
  RESTRICT | CASCADE | SET NULL | NO ACTION | SET DEFAULT
```

ここで、インデックス名とは制約IDのこと。指定しなければ自動生成される。

以下のようにテーブルを作成する時に設定できる。

``` sql
-- 図書館のデータを扱う例
create database `library`;
use `library`;

-- 利用者
create table USER (
	id integer primary key,
	name varchar(256) not null
);

-- 本
create table BOOK (
	id integer primary key,
    title varchar(256) not null
);

-- 貸し出し
create table LENDING_BOOK (
	user_id integer,
    book_id integer,
    foreign key user_id_foreign_key (user_id) references USER (id),
	foreign key book_id_foregin_key (book_id) references BOOK (id)
);

INSERT INTO USER VALUES (1, 'Jhon');
INSERT INTO BOOK VALUES (1, 'Essential Scrum');

-- ジョンがEssential Scrumを借りる
INSERT INTO LENDING_BOOK VALUES (1, 1);

-- ジョンが存在しない本を借りようとすると FOREIGN KEY 制約違反で貸し出しできない
INSERT INTO LENDING_BOOK VALUES (1, 2);
```

FOREIGN KEY 制約違反になるとエラーメッセージが出力される。上記の違反の場合には以下のメッセージが出力される。

```
14:26:45	INSERT INTO LENDING_BOOK VALUES (1, 2)	Error Code: 1452. Cannot add or update a child row: a foreign key constraint fails (`library`.`LENDING_BOOK`, CONSTRAINT `book_id_foregin_key` FOREIGN KEY (`book_id`) REFERENCES `BOOK` (`id`))	0.0059 sec
```

# オプション

FOREIGN KEY 制約には UPDATE または DELETE の際にどのような制約をつけるか選択できる。

- RESTRICT ... 更新、削除を拒否する。何も指定しない場合はこの制約が付与される。
- CASCADE ... 参照先データが削除、更新されると、参照元も削除、更新する。
- SET NULL ... 参照先データが削除、更新されると、参照元はnullになる。この時、カラムには NOT NULL 制約を付与できない。
- NO ACTION ... RESTRICTと同じ。
- SET DEFAULT ... RESTRICTと同じ。

例えば、ジョンが図書館から退会した場合、借りていた本を全て返却するルールだとすると以下のような制約が考えられる。

``` sql
create table LENDING_BOOK (
	user_id integer not null,
    book_id integer,
    foreign key user_id_foreign_key (user_id) references USER (id)
		ON DELETE CASCADE,
	foreign key book_id_foregin_key (book_id) references BOOK (id)
);
```

# 参考

* [MySQL Reference Manual | 13.1.20.6 Using FOREIGN KEY Constraints](https://dev.mysql.com/doc/refman/8.0/en/create-table-foreign-keys.html)
* [MySQL Reference Manual | referential integrity](https://dev.mysql.com/doc/refman/8.0/en/glossary.html#glos_referential_integrity)
Scratch3でFPSを計測したら32FPSだった（ただし例外あり）

# tl;dr

FPSを計測するためのScratchプロジェクトを作りました。
https://scratch.mit.edu/projects/300570488/

需要がほぼ０なのでは、、、と思いますが、興味がある方はプロジェクトを動かして、中のスクリプトを見てください。

# 背景

息子がScratchでアクションゲームっぽいやつを作っていて、その中でスプライトをジャンプさせる動きがキレイに作れないと悩んでいました。
そこで、加速度などを考慮したジャンプの実装を教える前に、そもそもScratchがどの程度のFPSで動いているか確認したいと思いました。

# 結果

32FPSでした。
ただしこの数値はスプライトを動かしながらの計測です。

スプライトを動かさない場合はだいたい、500,000〜600,000FPSになりました。
※Zenfone4（Snapdragon660）でやってみたら150,000〜160,000FPSでした。


# やらなかったこと

* スプライトが多い場合のFPSを計測
* Scratchじゃなくて、ただのJavaScriptを走らせた場合の計測
HTMLタグ_3 リンク 画像

#リンク
\<a href = "リンク先">  表示内容　\</a>

###記述例

```

<a href = "# AAA ">    </a> 　　　　　同じ文書内のAAAという場所へリンク
<a href = "lesson.html"> レッスンへ </a>　　　別のページへリンク
<a href = "lesson.html　#AAA "> レッスンへ AAA </a> 　　別のページの途中へリンク
<a href = "https://google.com" > googleへ　</a>　　　　外部リンク
<a href = "https://google.com　＃ AAA" > googleへ　</a>　　　　外部リンクの途中へ

```

###ページ内のリンク
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML入門</title>
  </head>
  <body>
    <h1　id = "top">最初</h1>　　　id属性を指定する。
    <p>こんばんは </P>
    <a href = "#top" >最初に戻る　</a>　  
  </body>
</html>

```
#画像
```
< img src = "画像ファイル名" >
```

###記述例
```
<img src="apple.gif" alt="りんご">
//alt属性　画像が表示されない場合、テキストが表示される

```

#target
##a要素に target="" を追加すると、リンク先の文書をどのフレーム（ウィンドウ）に表示するかを指定できる
```
target="_blank"   //新規のウィンドウに表示
target="_self"   //現在のフレーム（ウィンドウ）に表示
target="_parent"  //親フレームに表示
target="_top"    //フレーム分割を解除してウィンドウ全体に表示
target="フレーム名、ウィンドウ名"  // 任意のフレーム（ウィンドウ）に表示
```