OmniAICreator/Qiita-1.07M huggingface dataset:
AizuOnlineJudgeを始めてみる

プログラムの勉強のために課題を探している人のための入門記事。  
初心者向けのつまりそうなとこだけ補足してます。

# AOJとは
https://onlinejudge.u-aizu.ac.jp/courses/list
様々なプログラム課題が用意されており、多数の言語で課題の回答を提出、回答を判断してくれるサイトです。
最初は難易度低いですが、速度やメモリ制限などもあるので難しい課題はかなり頭を使いそう（まだあんまりやってない）。

# 課題提出の注意
## Inputの受け取り方
問題文には記載していないのですが、AOJのInputは標準入力から受け取るようです。
言語によって多少受け取り方が異なるので受け取り方法をメモしておきます。

### JavaScript
```javascript
let x = require('fs').readFileSync('/dev/stdin', 'UTF-8');
```
※ /dev/stdinはLinuxなどで使われる標準入力にアクセスするためのデバイス

### Python
```python
x = input()
```

# 補足
## そもそも標準入力とは何か
プログラムを動作させるためには入力を受け取らなければならないことがあります。
入力の受け取り方としては、以下のようなものがあります。

* 引数で渡す
* 標準入力で渡す
* プログラム内でファイル／DBなどの外部情報を読み込む
* APIコール時のget, postパラメータ

ざっくり言うと標準入力とは、数ある情報の受け取り方の1つです。

### 引数で入力を受け取る方法のサンプル(JS)
```javascript:input_arg.js
for(var i=0; i<process.argv.length; i++){
    console.log("argv[" + i + "] = " + process.argv[i]);
}
```
```shell-session
$ node input_arg.js arg1 arg2
argv[0] = /home/foobar/.nodebrew/node/v6.10.2/bin/node
argv[1] = /home/foobar/work/wk_20181106_175738/input_arg.js
argv[2] = arg1
argv[3] = arg2
```

### 標準入力で受け取る方法のサンプル(JS)
```javascript:input_stdin.js
let x = require('fs').readFileSync('/dev/stdin', 'UTF-8');
console.log("stdin: " + x);
```
```shell-session
$ echo "foobar" | node input_stdin.js
stdin: foobar
```
C++ - forward declaration

```c++:A.h
class B; // Forward declaration, just let compiler know that B is a class type. (In fact, compiler didn't know the B class content.)
class A
{
public:
   int fun(B& b);
private:
    B* ptrB;
};
```
```C++:A.cpp
#include "A.h"
#include "B.h" // Need include real B class header to let compiler find B class content.

int A::fun(B& b)
{
    ptrB->fun(); // fun() is a function in B class.
    b.fun();
}

```


http://ascii-iicsa.blogspot.com/2010/12/forward-declaration.html

http://squall.cs.ntou.edu.tw/cpp/1042/labtest/test2/MutualReferences.html
初めてaws・terraform触ってみてどぶ沼に落ちた。

静的ページをs3 + cloudfrontで構築した時つまづいたことを汚い箇条書きでまとめます。
エンジニアもどき＋論理的思考がないので読みにくい記事かと思います。

背景
--- 
もともと、ec2で静的ページ見ていたところをs3 < - cloudfrontで見られるようにするタスクいただいて、多々つまづきました。
awsのリファレンスを見るべきだったり、terraformのリファレンス見るべきだったり、どちらにも乗ってなかったり、まとまってる方が助かったので、qiitaに載せます。

対象
---
1. AWS初心者
2. terraform初心者
3. s3 + cloudfrontでサービス公開する人

基本的に公式リファレンスor terraformのgitに書いてあることしか書いていないです。（＋しょうもない経験談）

学び
--- 
- terraformで作ったらawsコンソールからいじっちゃいけない。
  - そのあとにterraformから修正しようとするとコンフリクト起こして何もできなくなることがある。
- ディレクトリ構成を大幅に変更するとterraformが動かなくなる。
    - terraform.tfstateを頑張っていじればなんとかなったりする。
        - terraform.tfstate.backupはいじらなくても良い
- lambda@edge使う
    - ソースはローカルでzipファイルを作成しておくか、あらかじめS3にアップしておく必要がある
- lambda@edgeが削除できない
    - cloudfrontが紐づいていると削除できない。
- s3のbucket policyでIP制限したい。
  - cloudfrontからs3が見られなくなる。
      - cloudfront通す場合はs3でip制限しちゃダメ。ip制限するならwafでやる
- webhostingしていないs3のhostをcloudfrontに設定する
    - webhostingしていない場合は、`${bucket_name}.s3.amazonaws.com` が紐づけるhostになる。
- cloudfront + s3 はindex documentが404
    - ドメイン直下のルートパスはcloudfrontから設定できるが、サブディレクトリはcloudfrontからは設定できない。
    -  subdirectoryのindex documentの設定はs3でwebhostingするのがスタンダード？
        - webhostingするとs3が直で見えてしまうので、googleのインデックスに引っかかる可能性がある。見えてもいいのか注意が必要。
    - terraformからcloudfrontにwebhostingされたs3のhostを設定すると、cloudfrontのorigin typeがうまく機能しなくてerrorになるっぽい
        - `custom_origin_config`を設定すると、cloudfrontのorigin typeの解決ができる？とりあえず、うまく行く。
            - terraformのgit-issueになってるっぽい。
- `terraform destroy` でcloudfrontが削除できない。
    - cloudfrontを削除する前にdisableにしなければいけない。
        - delete自体は早いが、disableには3時間くらいかかるので要注意
- エラーページはルートパスにリダイレクトする
    - cloudfrontで `custom_error_response` を設定する。
        - 3xx系ではリダイレクトができないのがawsの仕様。
- route53でnakedなドメインにcloudfrontを適用
    - cnameだけは登録できない。
    - 各ドメインにはAレコードの登録が必要なので、cnameではなく、aレコードで登録する。
        - aliasという概念でドメインをaレコードにいい感じで登録できる。（正直、あまりよくわかってない。）
        - aliasで指定する場合はttlをセットできない。
- importしたssl証明書をcloudfrontに紐づける(awsが発行してないもの) 
    - `aws_acm_certificate.acm.types = IMPORTED` を使う
EgretEngineでポップアップを出したい

# デモ

Egret Developer Centerから配信されているこちらのソシャゲ風デモのタブ右端の「关于」ボタンを押したときに出てくる
http://developer.egret.com/cn/article/index/id/833

こちらの画面のようなポップアップを実装したい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/335fdeb5-7f11-a3a5-eaed-b8e2ae9b4b8b.png)

# やること
## レイアウトの定義ファイルを作成する
1. `resource/custom_skins`ディレクトリを作成する
2. メニューから`New From Template`→`New Exml Component`を選択する
3. できたファイルのうち`GameOverScene.ts`を`src`へ移動、`GameOverScene.exml`を`resource/custom_skins`へ移動

## レイアウト定義

```xml:GameOverScene.exml
<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="GameOverSceneSkin" width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
	<w:Config id="1670ba1839b" ></w:Config>
</e:Skin>
```
ここの`width`と`height`を下記の`index.html`にあわせて

```html:index.html
<body>
    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         :
         data-content-width="640"
         data-content-height="1136"
```

こちらにする

```xml
... <e:Skin class="GameOverSceneSkin" width="640" height="1136" ... 
```

Previewしてみるとこうなります

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/d995c98c-d1b1-9328-65de-edcfca16bf7a.png)

## 背景を作成する
ポップアップの背面に透明度50%の黒い板を置きます

- 画面左端のコンポーネント一覧から`Rect`をドラッグ＆ドロップして
- 画面右の`Property Panel`から、x/y座標とwidth/heightを設定して、FillのAlphaを0.5にします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/bcdafa51-d449-54b3-b72f-f36c6dc0bdce.png)

あとはポップアップのウインドウの面(Rect)と、ゲームオーバーのタイトルとスコアを表示するLabelを配置して調整します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/1702e03b-e709-4403-dad3-6526efd17784.png)

スコアを表示するLabelは、PropertyPanelのIDフィールドに名前をつけてください。
今回は`lastScoreLabel`としました。

## ポップアップ画面の実装

自動で生成された`GameOverScene.ts`クラスを以下のように書き換えます

1. コンストラクターの`this.skinName = "resource/custom_skins/GameOverScene.exml";	`で、読み込みたい定義済みのレイアウトを指定します。
2. レイアウトで定義したコンポーネントをプログラムで使いたい場合は、レイアウト定義ファイル上でIDを指定します。そのIDと同じコンポーネントをクラスのプロパティーとして実装してください。
3. 今回の場合は、`private lastScoreLabel: eui.Label;`で定義されたプロパティーに、先ほどのレイアウト定義で、IDをLastScoreLabelに設定したLabelコンポーネントが自動でBindされます。

```ts:GameOverScene.ts
class GameOverScene extends eui.Component implements  eui.UIComponent {
	private lastScoreLabel: eui.Label;
	private lastScore: number;

	public constructor(lastScore: number) {
		super();
		this.lastScore = lastScore;
        this.addEventListener( eui.UIEvent.COMPLETE, this.uiCompHandler, this );
        this.skinName = "resource/custom_skins/GameOverScene.exml";		
	}

    private uiCompHandler():void {
		this.lastScoreLabel.text = `${this.lastScore}`;

        this.addEventListener( egret.TouchEvent.TOUCH_TAP, ( evt:egret.TouchEvent )=>{
            this.parent.addChild(new TitleScene());
            this.parent.removeChild(this);            
        }, this );
    }
	
}
```

## ポップアップ画面の呼び出し

```ts:GameScene.ts
class GameScene extends egret.Sprite {
:
            this.parent.addChild(new GameOverScene(scoreUi.lastScore));
            this.parent.removeChild(this);		
:
```
Sherlock.appを利用してみました

Sherlock.appを利用してみました
https://sherlock.inspiredcode.io/

既存のシミュレーターで表示しているプロジェクトに対して、Viewの構造や、Constraint・設定値の調整を起動しながら行うことができるアプリケーションのようです。
Androidの開発者向オプション並みまではできないですが、XCodeのViewDebuggerとは異なる用途で使えそうな感じがしました。
特に、デザイナーとのレイアウト調整時等に、値をいじると、画面上が直接変化するので、画面を見ながら相談できるので良さそうだなという印象です。

## 1. 準備

現在(2018年11月)はbeta版のようで、以下サイトからダウンロード、メアドを登録します。
https://sherlock.inspiredcode.io/
インストール後、アプリケーション起動時に、アクティベーションコードを求められるので、
メールで送られてきたものを入力する必要があります。
アプリケーションからSherlockを起動すると、ステータスメニュー上に表示されます。

<img width="261" alt="スクリーンショット 2018-11-12 17.10.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/71946/71214eb6-6ef8-955b-b78e-e645fd37a7ea.png">

## 2. Explore

Viewの構造を調べられる機能です。
cmd + EでSherlockをアクティブ化し、対象とするViewをクリックすれば見ることができます。

<img width="500" alt="スクリーンショット 2018-11-12 17.22.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/71946/91d09c84-47b5-89ca-fd2a-943102ba4b43.png">

## 3. Edit constraints and properties in real-time

シミュレーターで表示されている制約やViewのプロパティをリアルタイムに変更できる機能です。
ImageViewだと、ContentModeであったりAlpha値等のAttributeInspectorで
設定できる値の一部がいじることができ、それがリアルタイムにシミュレータ上で反映されます。
また、Constraintsまわりもいじることができ、制約値や優先度等がいじることができます。

<img width="500" alt="スクリーンショット 2018-11-12 18.07.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/71946/27593f9f-76e9-975f-3015-d78052b8d22e.png">

## 4. Resizable Screen

他のシミュレータを起動しなくても、他の端末でどのように表示されるのかを確認できる機能です。

ステータスメニューに表示されているShelockを選択後、対象とするプロジェクトを選択します。
現在は画像のとおり、4端末のサイズを比較できるようです。
ここでAutoLayoutがどのようにきいているか確認できるようです。

<img width="600" alt="スクリーンショット 2018-11-12 17.17.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/71946/2e086b01-3ace-4e75-51b9-a79e20d2a0ec.png">
[iOS][iOS12]UIWebViewにおいて動画再生後にステータスバーが変更されてしまう

UIWebViewでiOS12の場合に、以前のOSと挙動が変わったのでメモ。

[現象]
UIWebViewで動画を再生後、閉じるとステータスバーの色が変わってしまう。

[ソース元]
https://stackoverflow.com/questions/52136497/status-bar-disappeared-after-full-screen-video-in-wkwebview-only-in-ios-12

[条件]
Info.plistのみにステータスバーの設定を実装している場合に発生する。

・Status bar is initially hidden
・View controller-based status bar appearance
・Status bar style : UIStatusBarStyleLightContent

[解決策]
Info.plistに記述したステータスバーのプロパティをすべて削除し、代わりに実装ファイルに記述をする。
ちなみに、ソース元では「Status bar style:UIStatusBarStyleLightContent」で試してあったが、手元でUIStatusBarStyleDefaultを試したところ正常に動作した。プロジェクトのUIに合わせて実装すると良い。

[実装例]

```UINavigationControllerExtension.h
#import "UINavigationControllerExtension.h"

@interface UINavigationControllerExtension()

@end

@implementation UINavigationControllerExtension

- (void)viewDidLoad
{
    [super viewDidLoad];
    [UIApplication sharedApplication].statusBarHidden = NO;
}

- (BOOL)prefersStatusBarHidden
{
    return NO;
}

- (UIStatusBarStyle)preferredStatusBarStyle
{
    return UIStatusBarStyleDefault;
}


@end
```

[追記]
※走り書きで書いてしまったため、記述を若干修正しました。
Laravelのsession.phpでlifetimeを設定したものの反映されなかった時の解決策

##Laravelのsession.phpでlifetimeを設定したものの反映されなかった時の解決策です
#解決策
###session.phpではなく.envファイルのSESSION_LIFETIMEをいじることで解決できるらしい..envファイルの方が優先されるみたいですね。知らなかった…
Homebrew インストール時にパーミッションエラーが出た時の対策

Macで別ユーザーを追加して、追加したユーザーによってHomebrewからインストールを試みた際に権限エラーになりました。

`/usr/local` の所有者など権限を設定しておく必要があるのでコマンドを備忘録として残します。

```shell-session
$ sudo chown -R $(whoami):admin /usr/local
$ sudo chmod -R g+w /usr/local
```
MySQLとOracleのテーブル定義表示方法の違い

普段 MySQL ばかり使っていると久々に Oracle で作業した際に「show tables」が使えなくてちょっと焦るんですよね。
都度調べるのも手間なので、自分がよく使用するテーブル定義表示コマンドをまとめてみます。
**※ただ、自分の使い勝手に合わせたコマンドなので「≒」な実行結果です。**

# 環境
- MySQL 5.1.67
- Oracle 12c(12.1.0.2)

# 実行コマンド

**・テーブル一覧表示**
MySQL：`show tables;`
Oralce：`select table_name from user_tables order by table_name;`

**・ビュー一覧表示**
MySQL：`select table_name,table_schema from information_schema.tables where table_type = 'VIEW' and table_schema = 'データベース名';`
Oralce：`select view_name from user_views order by view_name;`

**・シーケンス一覧表示**
MySQL：シーケンスオブジェクトが無い
Oralce：`select sequence_name from user_sequences order by sequence_name;`

**・インデックス一覧表示**
MySQL：`select table_name,index_name from information_schema.statistics where table_schema = 'データベース名';`
Oralce：`select table_name,index_name from user_indexes order by index_name;`

**・テーブル構造表示**
MySQL：`desc テーブル名;`
Oralce：`desc テーブル名;`

**・オマケ　sqlplus の出力変更**
1行の長さ変更：`set linesize '文字数'`　（例：set linesize 1000）
ページ行数変更：`set pagesize '行数'`　（例：set pagesize 1000）
区切り文字変更：`set colsep '区切り文字'`　（例：set colsep , ） 
ヘッダ表示ON/OFF：`set heading 'on または off'`　（例：set heading off）
右側の余白ON/OFF：`set trimspool 'on または off'`　（例：set trimspool on）
spark conf  azureメモ

- orcファイルを使うときの設定

http://mogile.web.fc2.com/spark/cloud-integration.html

- orcファイルの読み込みを低減
https://jp.hortonworks.com/blog/bringing-orc-support-into-apache-spark/

```
spark.sql.orc.filterPushdown true
spark.sql.orc.splits.include.file.footer true
spark.sql.orc.cache.stripe.details.size 10000
spark.sql.hive.metastorePartitionPruning true
```
- Spark2.3でのORCの設定

http://lab.astamuse.co.jp/entry/2018/05/30/114500

```
spark.conf.set("spark.sql.orc.impl","native")
```

- ログ表示を消す

```
spark.sparkContext.setLogLevel("ERROR")
```

- hdinsight チューニング

https://docs.microsoft.com/ja-jp/azure/hdinsight/spark/apache-spark-perf

- azure datalake gen2 チューニング

https://docs.databricks.com/spark/latest/data-sources/azure/azure-datalake-gen2.html

- azcopy v10

https://docs.microsoft.com/ja-jp/azure/storage/common/storage-use-azcopy-v10

- hadoop コマンド

https://docs.microsoft.com/en-us/azure/storage/data-lake-storage/use-distcp
webcomponentsjs (WebComponents v1 polyfills) についての備忘録

※ はてなブログから技術ネタを移動しました
※ [初稿](http://qpshinqp.hateblo.jp/entry/20170316/1489718036)：2017-03-16

とてつもなく久々の投稿ですが、ここのところ人柱コード書いていてところどころハマリポイントが見つかったりしているので、悩める人々の光になる可能性が0.0001%でもあればと思いメモ。


HTML5で好きなタグ名でカスタム要素を定義できる、CustomElementsで遊んでいます。
ShadowDOMなどと組み合わされるので、実装の瑣末なものを隠蔽したりして、よりセマンティックなウェブページを構成できます。

[GitHub - webcomponents/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs](https://github.com/webcomponents/webcomponentsjs)

~~loaderをカスタムしたりしています
[GitHub - misttechnologies/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs](https://github.com/misttechnologies/webcomponentsjs)~~
（追記）本家がアップデートされてloaderがマシな感じになったので、もうカスタムloaderは使っていません。

以下、ハマったポイント


1. ShadyDOM / ShadyCSSを使う場合は`ShadyCSS.prepareTemplate()`メソッドでtemplateをゴニョゴニョしてあげないといけない

    IEとFirefoxに該当。
    nativeのshadowDOM tree内のcssセレクタをエミュレートするために、cssスコーピングのためのクラスをshadowRootノードに, :hostセレクタなどをhostのタグ名に変換する必要がある.

    ```javascript
    if (ShadyCSS) { ShadyCSS.prepareTemplate(template, "hoge-element"); }
    ```
    てなノリで。


2. あるCustomElementのShadowDOMの中で別のCustomElementを使う場合（IE たぶん11以下 限定）

    外側クラスを先に`customElements.define()`してupgradeElementさせ、そのあとに内側クラスを`customElements.define()`してupgradeElementさせないといけない。
    少なくともIE11で、これに気づかないと動かない。他のChrome, Firefoxなどのモダンな奴らは大丈夫。
    これは、内側で使われているCustomElementの定義を先にした上で、外側のShadowDOMをtemplateを使って構築しようとすると、template内のdocumentFragmentがぶっ壊れるから。外側templateのDOMパース中に不意に内側customElementがupgradeされることが想定されていないらしい。


3. あと、polyfillのロード完了タイミング制御が割と難しい。

    WebComponentsReadyなるCustomEventも飛んでくるが、あんまりアテにならない。
ES6 (ES2015) のMapクラスに関しての注意点

※ はてなブログから技術ネタを移動しました
※ 初稿：2017-03-17

```javascript
new Map();
```

てな感じでマップ使える。

```javascript
new Map([
  [1, "value"],
  ["2", "valval"],
  [3, "hogehoge"]
]);
```

みたいな形での初期化はIE11では使えない。
Chrome, Firefox, Safariでは使えるが、互換性を考えると封じておいたほうが良い。
svgを使って、html要素をmask / clipする

※ はてなブログから技術ネタを移動しました
※ 初稿：2017/03/17

```html
<style>
.clipping-target {
  width: 100%;
  height: 100%;
  mask: url(./mask.svg) no-repeat 50% 50%;
}
</style>
<div class="clipping-target">
Yo!
</div>
```

などと, maskしたり, clip-path css propertyでclipさせたりできるのだが、
IE 11では動かない！ 別の手段を使いましょう。
svgでsvgの要素をclipするのはIEでもできるみたいです。svgをhtml要素に作用させるのが不可みたい。
【疑問点】iOS SafariでのJavascript Memory Profilingについて

※ はてなブログから技術ネタを移動しました
※ 初稿：2017/06/26

今作っているとあるWebアプリのJSが、旧端末で思うように動かない。
重さを感じていて、アプリの性質としてもメモリを食うものなので、決定的なメモリリークが起こっていることを疑っている。

macOS SierraのSafariを使うと、SafariのWeb Inspectorでメモリプロファイリングができると聞いて、遂にmacOS Sierraにアップグレード。こんな感じで取れます。これは凄い。ちなみに、iOS側がある程度新しいバージョンじゃないとダメっぽい。

![20170626164151.png](https://qiita-image-store.s3.amazonaws.com/0/7459/c2335d5d-992c-9db2-6b33-75620bec5312.png)

しかし、疑っていたJavascriptによるメモリ消費量は一定の範囲内を増減しているだけで、リークはしていなさそう（Categories: JavaScript）。それより気になるのが、Categories: Pageの単調増加するメモリ使用。下記リンクによると、
[Memory Debugging with Web Inspector | WebKit](https://webkit.org/blog/6425/memory-debugging-with-web-inspector/)
> Page – All other memory. This includes engine memory related to the DOM, styles, rendering data, memory caches, system allocations, etc.

とのことで、JSによる直接のメモリアロケーションではない間接的リソース使用量が単調増加しているように見えるが、内訳は分からない。
推測でしか無いが、"engine memory related to the DOM, styles"は数十MBも食わないだろう。"rendering data", "memory caches"あたりは怪しいが、表現が曖昧すぎて問題の追求に窮している。
誰かヒント下さい。
【仮説】requestAnimationFrameよりsetTimeoutでアニメーションした方が旧端末で安定感ある

※ はてなブログから技術ネタを移動しました
※ 初稿：2017/06/27

セオリーとしては、JavaScriptでアニメーション実装する場合はrequestAnimationFrameにコールバックを渡してやるわけですが、
setTimeoutでアニメーションしたほうが旧端末での安定感があると感じることが多々あります。
誰か検証してくれませんかね。
XcodeでサポートされていないiOSバージョンのビルド


## 状況
開発ターゲットのバージョン(ios11)があがったのでテスト端末のバージョン(ios10)上げようとしたら
Xcode(9)のサポートバージョン(ios12)以上にしかあげられない状況になったので対応メモ

## 対応
Xcodeのバージョン上げろでFAなんですが、それ以外の対応方法で

## 手順
1. Xcode10をダウンロード
    - Xcodeの共存環境に[Xcode::Install](https://github.com/KrauseFx/xcode-install)が便利です

2. DeviceSupportファイルのコピー
    - インストールしたXcode-10.1.appのパッケージの内容を表示
        - Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupportの12.1 (16B91)をコピー
    - 動かしたい対象のXcodeのパッケージの内容を表示
        - Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupportへ項目をペースト
    - Xcode再起動！

ターゲットを選択してビルド！
DOCTYPE宣言の有無で変わるレイアウト

※ はてなブログから技術ネタを移動しました
※ 初稿：2017/07/14

DOCTYPE宣言の有無でレイアウトが結構変わると今頃気づきました。理由はググれば分かるんですが、参考までに具体例を示しておきます。

使用したコード

```html
<!DOCTYPE html> <!-- この行の有無によって何が変わるか -->
<style>
video {
    background-color: black;
    width: 100%;
    height: 100%;
}
</style>
<video src="http://localhost:3000/media/video.mp4"/>
```

例として"width: 100%; height: 100%;"指定のHTMLVideoElementの高さの変化をご覧ください。これの1行目のDOCTYPE宣言の有無で比較しています。ブラウザはmacOS SierraのSafariですが、Chromeでもほぼ同様の変化でした。

例1: DOCTYPE宣言なし

![20170714125635.png](https://qiita-image-store.s3.amazonaws.com/0/7459/5363851d-0bb9-2c4b-2b2b-10af4eda473d.png)

例2: DOCTYPE宣言あり

![20170714125638.png](https://qiita-image-store.s3.amazonaws.com/0/7459/cbfb0d9a-77d8-bf55-dd15-51c0c5ce4cee.png)

ブラウザのウィンドウ枠とか見にくいんですが、DOCTYPEなしだと高さはブラウザのウィンドウ枠いっぱいまで。DOCTYPEありだと"height: 100%"のstyle指定があってもvideoHeightにフィットしてそれ以上の高さになりません。

DOCTYPE宣言って大事なんだね。
個人的に詰まったポイントメモ #docker

適宜追加/編集予定


# 軽量化
- 各ディストリビューションの違い
    - Ubuntu
        - 軽量化とか考えずにサンプルや書き捨て用に丁度いい。
    - alpine
        - 多分軽量ディストリビューションの中で一番有名。
            - 但しちょこちょこコマンドが無くてモチベが保たない。
            - 別ベース(Ubuntuとか)で書く→alpineへ移行が一番楽。

# 動作確認
- 立ち上がりきったったのか確認したい。
    - `docker ps`
        - STATUS欄が`(health: starting)`になら立ち上げ中。
    - portainer
        - containerから確認可能。
            - gitlab立ち上げ中の例。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/310705/d02b37b0-6f26-97fc-4083-97e154fb57ce.png)
文字化けせずにVSCodeでLaTeXのコンパイルをする方法 (Latexmk)

#Overview
- 日本語が入るLaTeXファイルを，文字化けせずにコンパイルしたい
- Latexmkを用いたい

# Environment
- Windows 10
- MacOS High Sierra
- VSCode
- LaTeX Extension ([ https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop ](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop))

# 方法
bibTeXを使うか使わないかで，タイプセットを書き直すのは非常にめんどくさいです．
なので，Latexmkを用いて，日本語が入るLaTeXファイルをコンパイルするためのタイプセットを作りました．

VSCodeのUser Settingsに，下記のオプションを追加してください．

```json:settings.json
{
    "latex-workshop.latex.tools": [
        {
            "command": "latexmk",
            "args": [
                "-pdfdvi",
                "-latex=platex -kanji=utf-8 -synctex=1 %O %S",
                "-e",
                "$dvipdf=\"dvipdfmx %O %S\";$bibtex=\"pbibtex -kanji=utf-8\";$makeindex=\"mendex\";",
                "%DOC%"
            ],
            "name": "latexmk build"
        }
    ],
    "latex-workshop.latex.recipes": [
        {
            "command": "latexmk",
            "tools": [
                "latexmk build"
            ],
            "name": "latexmk toolchain"
        }
    ]
}
```
DockerでLet's encryptを使う前には絶対に証明書のフォルダをマウントしろ!

[未踏ジュニア](https://jr.mitou.org)でのコミュニケーション基盤として採用している[Mattermost](https://mattermost.com/)はdocker-composeで動いている。その中で[Lets encrypt](https://letsencrypt.org/)を用いてhttps化している。
ある時メンテ中にサーバーを再起動した際に、急にSSLエラーによってサーバを起動しようとしてエラーが起きた。一見しがちなミスであるのに、大きな時間の損失にもなりうる今回の問題を紹介する。

## 週5証明書までのRate limitを超えないためにSSL証明書を永続化しよう

少なくともMattermostに関しては自身がlets encryptを用いたSSL証明書を発行できる機能がある。自前でWebサービスをホスティングする際には[https-portal](https://github.com/SteveLTN/https-portal)なども用いられるだろう。
どちらもSSL証明書が勝手に出てくれて便利なのだが、コンテナを立ては壊してを繰り返したとき再度SSL証明書が発行される。
再度発行されるだけなのが待ち時間の問題なら大した話ではない。この証明書、同一ドメインに対して毎週5個までしか発行できないのだ。
マウントしていないSSL証明書が5回失われると、来週までhttpsとはサヨナラすることになってしまう。
**このような理由でSSL証明書のフォルダをマウントして永続化を必ず行うことを推奨する。**
　
## 5回ではないかもしれない

この5回という制限、`XXX.AAA.YYY.com`なら、完全に一致する`XXX.AAA.YYY.com`なら週5個まで。`YYY.com`全体に対して50回となる。`YYY.com`のサブドメインを管理している人が自分だけではない場合、その週はすでに何回か使われているかもしれない。
そういう場合はcrt.shで特定のドメイン以下の証明書がどれだけ発行されているかを見ることができる。

https://crt.sh/?q=%mitou.org

上のURLの%以下は自分のドメインに置き換えよう。
横並びnavを作る3つの方法  ①float

＃　float を使う方法　：スタンダード

＃＃

```HTML
<nav id="nav01">
            <ul>
            <li><a href="#">たたかう</a></li>
            <li><a href="#">にげる</a></li>
            <li><a href="#">まほう</a></li>
            <li><a href="#">ぼうぎょ</a></li>
            </ul>
        </nav>

```





親ulに
```overflow: hidden;```

子のli　で、　横幅決定
```float: left;
width: 25%; /*均等割指定*/
```


```CSS
#nav01 ul {
    background-color: #ccc;
    overflow: hidden;
    border: 1px solid #000;
    border-right: none; 
}
#nav01 ul li {
    float: left;
    width: 25%;
    text-align: center;
}
#nav01 ul li a {
    background-color: #fcc;
    display: block;
    padding: 10px;
    border-right: 10px solid #000;
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/204239/666de720-59b4-1ab3-42b7-3207c327d8ee.png)
grepを使った検索結果で表示されるファイルの数を数える

##この記事の内容を一言で

```
$ grep -R "*" (ディレクトリ)  | grep -v "*" | wc -l
```

## grep -R "*" (ディレクトリ)
`(ディレクトリ)`以下のディレクトリから、`"*"`の内容が完全に一致した文字列を含んだファイルを表示する

## grep -v　"*"
`"*"`を含むファイルを検索結果から除外する

## wc -l
検索結果のファイルの数を数える

## まとめ

```
$ grep -R "1" (ディレクトリ)  | grep -v "2" | wc -l
```

`"1"`と完全一致した文字列を含んだ`(ディレクトリ)`以下のファイルから、`"2"`と同じ文字があるファイルを除外し、その数を数える。
CDN版のVue.jsとBabelを一緒に使うと上手くいかない(ReferenceError: i is not defined)

色々な事情でCDNのVue.jsを使っているのですが、CDN版のBabelを使おうとした場合に上手くいかなかった
ES2015の記法で書いていたのでIE11で動きません。当然と言えば当然なので普段は無視してるんですけど、今回は社内画面じゃなくて社外向けの画面のためIE対応もする必要がありました
CDN版のBabelもある事は知っていたので適応させてみる

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">                                               

new Vue({           
  el: '...',
  components: {     
    fugahoge: ...
  }                 
})                  

</script>
```

そうしてみると次のエラー。

```
[Vue warn]: Error in created hook: "ReferenceError: i is not defined"

found in

---> <Fugahoge>
```

うわ～これ何がエラーなのかわからないやつだ、Fugahogeコンポーネントの中身は読み込まれているのですがリファレンスエラーが起きているのでJSが動きません。
しかも、ブラウザ側で変換してるんでめっちゃ重いんですよこれ。描画速度が0.8秒くらいから1.5秒くらいまで跳ね上がりました（エラー出てる状態だからかもしれないですが）
やっぱり設計的によくないのでCDN版のBabelを使うことは断念。現状この画面以外IE11対応するつもりはないので、気合でES2015記法から古い記法に編集して戻しました。
そもそもCDN版のVue.jsとかBabelは使わない方がいいですね。勉強になりました。

解決策わかる方いましたらお待ちしています。
[illustrator_script]複数オブジェクトを選択→変形する

Illustratorで複数オブジェクトを選択→サイズ変更しようと思ったのですが結構難しかったので備忘録として。

## 環境
OS:macOS 10.14
editor:Sublime Text3
application:illustrator CC2018

## やりたいこと
ExtendScriptを使ってIllustratorで以下作業を実行する。

**1. ドキュメントにあるオブジェクトを全選択**
**2. 選択オブジェクトをグループ化**
**3. 選択オブジェクトのBounding Boxのサイズを取得**
**4. サイズを変更**

## やったこと
### 1. ドキュメントにあるオブジェクトを全選択

```javascript
for ( var i = 0; i < activeDocument.pageItems.length; i++) {
  try {
    activeDocument.pageItem[i].selection = true ;
  } catch(e) {
    //何もしません
  }
}
```

### 2. 選択オブジェクトをグループ化

```javascript
var selObj = activeDocument.selection,
    grpObj = activeDocument.groupItems.add();

for ( var i = 0; i < selObj.length; i++) {
  selObj[i].move(grpObj, ElementPlacement.PLACEATEND)
}
```

groupItemオブジェクトに提供されているmoveメソッドを使って`grpObj`にオブジェクトを追加（移動）させます。

`move(グループオブジェクト, グループ内の移動先 ※パラメータは下図参照)`

|パラメータ|移動先|
|---|---|
|ElementPlacement.INSIDE|指定したオブジェクトの内側|
|ElementPlacement.PLACEBEFORE|指定したオブジェクトの前|
|ElementPlacement.PLACEATBEGINNING|指定したオブジェクトの先頭|
|ElementPlacement.PLACEAFTER|指定したオブジェクトの後|
|ElementPlacement.PLACEATEND|指定したオブジェクトの末尾|

### 3. 選択オブジェクトのBounding Boxのサイズを取得
ここがかなり難しかったです。
今回作成したコードは以下の通り。

```javascript
// BoundingBoxのサイズを取得する関数を作成
function (target, boundsType) {
  
}
```
[Illustrator_script]アートボードのサイズを変更する

## やりたいこと
アートボードのサイズをスクリプトで変更する。

## やったこと
ソースコードは以下の通り。

```javascript:changeArtboardSize.jsx
var myDoc = app.activeDocument; //ドキュメント
var myBoard = myDoc.artboards; //アートボード
var boardRect = [0, 0, 60, -60];

myBoard[0].artboardRect = boardRect;
```

## 解説
**アートボードのサイズは`artboardRect`プロパティで設定**
<font color="RoyalBlue">`artboardRect`プロパティが使用出来るのはIllustrator CS4以降。
それ以前のIluustratorではスクリプトでアートボードのサイズを変更出来ない？ようです。</font>

**`attboardRect`プロパティの値は配列で指定**
artboardRect[0]:左上の座標X
artboardRect[1]:左上の座標Y
artboardRect[2]:右下の座標X
artboardRect[3]:左上の座標Y
[Illustrator_script]選択オブジェクトの座標を取得する

##やりたこと
選択したオブジェクトの座標をミリ単位で取得したい。

##やったこと

実際のソースコードです。

```javascript:getObjBounds.jsx
var doc = app.activeDocument;
var board = doc.artBoards;
var sel = doc.selection;
var rect = sel[0].visibleBounds;

alert(rect[0] + "," + rect[1] + "," + rect[2] + "," + rect[3]);
```

このままでは`Pt単位`で値を取得してしまいますので少し手を加えます。
合わせて小数点第1位以下も四捨五入してしまいます。

```javascript:getObjBounds.jsx
var doc = app.activeDocument;
var board = doc.artBoards;
var sel = doc.selection;
var rect = sel[0].visibleBounds;
var convMilli = 1 / (25.4 / 72);

for (var i = 0 ; i < rect.length; i++) {
    rect[i]  = Math.round(rect[i] * convMilli * 10) / 10;
}

alert(rect[0] + "," + rect[1] + "," + rect[2] + "," + rect[3]);
```
##解説
`var convMilli = 1 / (25.4 / 72);`
1ポイント = 1インチ　÷ 72
1インチ = 25.4mm
から計算。
Let's Encrypt のログローテイトを --max-log-backups オプションで制御する

ディフォルトだと /var/log/letsencrypt/ 以下のログは 1000個を越えないとローテイトされないが、 certbot 実行時に --max-log-backups オプションをつけることで指定した数でログローテイトが可能になっていた。

https://certbot.eff.org/docs/using.html#log-rotation

以下はログを20個残す場合の例。

```
certbot-auto renew --force-renew --max-log-backups 20
```
前略 HTMLベースで配布された文章はChromeの拡張が使えないから不便だなーって思ったけど、そんな大掛かりな事せずに楽したい貴方へ



#つまり何したい人向け？
Pythonで簡単にローカルホストするための手順

##以下の様な人におすすめします。
せっかくのHTMLベースな文章なんだから
・zen modeのような集中させる感じで読みたい。
・Save to Google Keepを要所々々に使う
・Mouse Dictionary等を使いたい
などなど欲が出てくる方

###ステップは以下のインストール 3ステップ
1.Python3.xをインストール
2.テキトーな場所にHTMLを置く
3.コマンドプロンプトでコマンド叩く
(2でおいたフォルダのルートディレクトリに移動し)
cd c:\XXXX
(local hostの1999ポートに置く)
python -m http.server 1999

使い方は至ってシンプル
ブラウザ（chrome等）URLに「http://localhost:1999/」を使う
→素晴らしい拡張を使う
→→Happy!

以上、ご閲覧頂きありがとうございました。
CloudSQLのGAE/go111での設定

旧 gae/go
=========

```
mysql:  <user>:<pass>@cloudsql(<project_id>:asia-northeast1:<instance_name>)/<mysql_db_name>
```

新 gae/go111
=========

```
mysql: <user>:<pass>@unix(/cloudsql/<project_id>:asia-northeast1:<instance_name>)/<mysql_db_name>
```
ミソクソみたいなモノでもPWAでアプリにする練習をしよう

#とりあえずPWAとは

Progressive Web Appsの略で、いわゆるウェブ上にあるものをアプリっぽく動かせるようにできるよ！という「仕組み」です。新技術とかどっちかというとそういう方向ではありません。が、スマホでアプリっぽく動く。これは色々勉強する上でものすごいモチベーションになると思うんですよね。

javascriptで書いた簡単なスクリプトから、Wordpressで作ったブログもPWA対応することが可能。自分で作ったjavascriptのゲームや、家族間だけで使うスクリプトなんかもPWA対応するだけでめっちゃ便利に使えると思うんですよね。

#クソアプリを作る

以下、例はミソクソなコードでご紹介しますが過去の遺産なので気にしないでください。


```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>位置情報取得マン</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="位置情報取得マン">
    <link rel="apple-touch-icon" href="icon.png">
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });
}
</script>
<body>
  <h1>位置情報取得マン</h1>
<script type="text/javascript">
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
        function (pos) {
                var locationlat = pos.coords.latitude;
                var locationlong = pos.coords.longitude;
                $('#location .lat').append(locationlat);
                $('#location .long').append(locationlong);
                var linktag = 'https://www.google.co.jp/search?q=' + locationlat + ',' + locationlong;
                $('#linktag').attr('href',linktag);

                var linelink = 'http://line.me/R/msg/text/?'+ '%20' + linktag;
                $('#linetag').attr('href',linelink);
        });
    } else {
        window.alert("本ブラウザではGeolocationが使えません");
    }
</script>
    <div id="location">
      <p class="lat">緯度: </p>
      <p class="long">経度: </p>
    </div>
    <p><a id="linktag" href="">現在地の地図を表示</a></p>
    <p><a id="linetag" href="">現在地をLINEで送る</a></p>
</body>
</html>
```

#PWAに必要なファイルについて

https://qiita.com/Gen6/items/25601c7a9da8bf958f26

上記記事をご参考ください。


#サーバーにアップロード

とりあえず適当なSSL化したレンタルサーバーに投げてください。
AndroidスマホからそのURLへアクセスすれば完成。

PWAはこれからなにか言語を学ぼう、という人にとって是非オススメしたいものだと思うんですよ、
URLQueryItemの罠〜Base64とエンコードされない+〜

`URLComponents`と`URLQueryItem`を使うことでGETパラメータのURL(%)エンコードをよしなにやってくれるようになってから久しいですが、何も考えずにそれで実装した結果痛い目に遭ったお話。

# やろうとしたこと
AES+CBCで暗号化した文字列と初期化ベクトルをbase64にしてクエリパラメータで送る。

# 当初の実装
```swift
func createURL(text: String, iv: String) -> URL? {
    var comps = URLComponents(string: "https://hoge.fuga")
    let queryItems = [
        URLQueryItem(name: "text", value: text),
        URLQueryItem(name: "iv", value: iv)
    ]
    comps?.queryItems = queryItems
    return comps?.url
}
```

# 何が起きた？
通信先で復号に失敗するケースが発生(発生頻度はランダム)。
ちなみに端末側では100%復号に成功する。

# 原因
復号に成功するパターンもあったため原因の特定に時間がかかりましたが、
失敗するパターンに共通していたのが、**base64化した文字列に`+`が含まれる**ということでした。

詳細は[こちら](https://www.glamenv-septzen.net/view/1170)の記事を見ると早いと思いますが、どうやらサーバ側でこの`+`を半角スペースと認識した結果文字列自体が壊れていたようです。

また、`URLComponents`は**RFC3986**に準拠しているため、`+`をエンコードしてくれません。
そのため、`URLQueryItem`に`+`を含んだ暗号化文字列/初期化ベクトルをそのまま突っ込むと壊れたデータとしてエラーが返ってくるという構図になっていました。

# 対策後の実装

```swift
var characterSet: CharacterSet {
    var set = CharacterSet.urlQueryAllowed
    set.remove("+")
    return set
}

func createURL(text: String, iv: String) -> URL? {
    var comps = // 略
    let queryItems = // 略
    comps?.queryItems = queryItems
    // 生成された生クエリを取り出す
    let query = comps?.query
    // ↑を手動でエンコードしたものをエンコード済みクエリとしてセットする
    comps?.percentEncodedQuery = query?.addingPercentEncoding(withAllowedCharacters: characterSet)
    return comps?.url
}
```

`comps?.percentEncodedQuery`を直接取り出して`replacingOccurrences(of: "+", with: "%2B")`したものを再度`comps?.percentEncodedQuery`に放り込んでもよかったのですが、`"%2B"`をハードコーディングしたくなかったので(`"+"`は良いのかっていうツッコミは置いといて)↑の形に落ち着きました。

# ちなみに
iOS11から`URLComponents`に`percentEncodedQuery`というプロパティが加わり、
予めエンコードした値をセットした`URLQueryItem`を放り込めるようになりました。

これを使うと以下の通りスッキリ書けるようになります。

```swift
// 前略
let encodedItems = queryItems.map { URLQueryItem(name: $0.name, value: $0.value?.addingPercentEncoding(withAllowedCharacters: set)) }
comps?.percentEncodedQueryItems = encodedItems
return comps?.url
```

更に、`URLQueryItem`にextensionを生やして

```swift
extension URLQueryItem {
    func addingPercentEncoding(withAllowedCharacters characterSet: CharacterSet) -> URLQueryItem {
        return URLQueryItem(name: name, value: value?.addingPercentEncoding(withAllowedCharacters: characterSet))
    }
}
```
```swift
// 前略
let encodedItems = queryItems.map { $0.addingPercentEncoding(withAllowedCharacters: set) }
comps?.percentEncodedQueryItems = encodedItems
return comps?.url
```

ともできますね。

# 参考
- https://www.glamenv-septzen.net/view/1170
- https://stackoverflow.com/questions/43052657/encode-using-urlcomponents-in-swift
- https://code.i-harness.com/en/q/1e1d464
ローカルプロジェクトをGitHubにアップロード

# はじめに
今の自分に必要な物だけを記述．

# ローカルのプロジェクトをGitHubにアップロードする方法
とりあえずコード保管のためにGitHubにアップロードする際に使用

```
# GitHubへアップロードしたいプロジェクトディレクトリ内へ移動
$ cd /path/to/your/project
$ git init

# 必要であれば.gitignoreを作成し、バージョン管理しないファイルやディレクトリを記載（例：*.log）
$ vim .gitignore

# プロジェクトディレクトリ内にあるファイルやディレクトリを全てコミット 
$ git add .
$ git commit -m "Initial Commit"

# リモートリポジトリの確認
$ git remote -v

# 先ほど作成したGitHubリポジトリのURLをコピー&ペーストして、リモートブランチとして設定
$ git remote add origin https://github.com/your-name/project-name.git

# 間違えてリモートリポジトリを指定してしまったらset-urlで変更
$ git remote set-url origin https://github.com/your-name/project-name.git

# ローカルのファイルをアップロード
$ git push -u origin master
```

ここで、アップロードできない場合はfetchとmergeをすればどうにかなることが多い．

```
$ git fetch
$ git merge --allow-unrelated-histories origin/master
```

※ 参考
[ローカルのプロジェクトをGitHubにアップロードする方法](https://qiita.com/devzip8/items/28ac253ea295ad6c2b73)
[初めてGitHubリポジトリにpushしたらrejectedエラーになったときの対応メモ](https://qiita.com/takanatsu/items/fc89de9bd11148da1438)
負荷テストの設定とグラフ化について

JMeterで負荷テストを行う際の基本的な設定とグラフ化についての共有です。１年に一度行うかどうかの業務ですが、設定内容をすっかり忘れてしまうため忘備録として記載しました。

## テスト計画の設定

各スレッドグループを別々に実行（上から順番にスレッドグループ単位で実行されるようになります）
<img width="1149" alt="jmeter01.png" src="https://qiita-image-store.s3.amazonaws.com/0/40217/212c94ba-6265-51e0-7892-f16c1baf8089.png">

## ベースとなるスレッドグループを作成

以下、ベースとなるスレッドグループを作成しリクエストが正常に計測できる状態にします。

1. JMeter のテスト計画にスレッドグループを追加
2. HTTPヘッダマネージャー追加（ヘッダ要件がある場合）
3. HTTPリクエスト追加
4. 統計を表で表示を追加（リクエスト確認用、計測時は無効に切り替え）
5. 統計レポートを追加（ここから数値を取り出してレポート化）

## スレッドグループを複製してリクエスト単位に設定
<img width="1147" alt="jmeter02.png" src="https://qiita-image-store.s3.amazonaws.com/0/40217/a9ae0471-9e3c-7b34-314b-34c401d806ca.png">

1.スレッドグループ名称を 10Req/Sec などわかりやすい名前に変更
2. スレッド数、Ramp-UP、ループを変更（10Req/Sec なら 100スレッドを 10秒間掛けて１ループ行うと秒間10リクエスト）
3.スレッドグループ分1,2を変えていく（10req/sec,50req/sec,100req/sec,150req/sec,200req/sec）

## 負荷テスト実行と統計データの取得
<img width="1144" alt="jmeter03.png" src="https://qiita-image-store.s3.amazonaws.com/0/40217/7dd36ac9-a2c7-34ad-b638-7d7bcc5d4e5d.png">

1. JMeterテストを実行し各スレッドグループの統計情報を目で監視する。
2. スレッドグループ単位で上から順番に統計情報が更新されていくのを確認する。
3. 各グループのThroughputと、90%lineをスプレッドシートに転記する。

```
Throughput = 1秒間で処理できたリクエストの件数
90%Line = リクエストを返却するまでの応答速度ので最大、最小値を省いた90%の平均応答速度(mmSec） 
```

## シートをグラフ化
グラフ機能のあるスプレッドシートで統計データを視覚化します。サーバの限界性能と処理能力を超えた場合の遅延状況が一目で分かるグラフが完成します。
![jmeter04.png](https://qiita-image-store.s3.amazonaws.com/0/40217/0cd4ad8b-c179-e25b-8d26-ed0c6a1162fe.png)

1.折れ線グラフは秒間10リクエストから200リクエストまでの負荷を与えたスループットを順番に並べたグラフです。サンプルでは１００リクエストを境に上がらなくなっています。
2.横棒グラフは秒間10リクエストから200リクエストまでの90%Lineのレスポンスタイムを順番に並べたグラフです。サンプルでは１ ５０リクエストを境に大幅に遅くなっています。ます。
埋め込み型としての構造体 ( Goは継承を使わない )

- Goには継承という概念がない。そのため構造体をうまく利用して埋め込み作業をしていく。
- Goでは構造体の中に構造体を埋め込むことで再利用性を高めたり、コード量を減らすことが出来る。
- person型とcitizen型はどちらも独立しており、親子関係にはならない。(is-a関係)

```go:main.go

package main

import "fmt"

type person struct {
	Name string
}

type citizen struct {
	Country string
	person
}

func (p person) greet() string {
	return fmt.Sprintf("Hello, %s", p.Name)
}

func main() {
	c := citizen{
		Country: "japan",
	}
	c.Name = "hoge" // c.person = &person{ Name: "hoge" } でも同じ

	// func(p Person)Greet()string が呼びだされる。
	// func(c Citizen)Greet()string を定義した場合はこっちが呼ばれる。
	greeting := c.greet()

	fmt.Println(greeting)
}

```

- 上記の例を違う関数から間接的に呼び出そうとすると失敗する

```go:main.go

package main

import "fmt"

type person struct {
	Name string
}

type citizen struct {
	Country string
	person
}

func (p person) greet() string {
	return fmt.Sprintf("Hello, %s", p.Name)
}

// この関数を追加
func speak(p person) string {
 	return p.greet()
}

func main() {
	c := citizen{
		Country: "japan",
	}
	c.Name = "hoge"
        
	// これはエラーになる
	greeting := speak(c) 
	// => speak(c.person) これはうまくいく

	fmt.Println(greeting)
}

```

- 埋め込まれている構造体でもそのまま呼び出せるようにするにはインターフェースを活用する

```go:main.go

 package main

import "fmt"

type person struct {
	Name string
}

type citizen struct {
	Country string
	person
}

type greeter interface {
	greet() string
}

func (p person) greet() string {
	return fmt.Sprintf("Hello, %s", p.Name)
}

// interfaceを使って引数を定義する
func speak(g greeter) string {
	return g.greet()
}

func main() {
	c := citizen{
		Country: "japan",
	}
	c.Name = "hoge"

	p := person{
		Name: "fuga",
	}

	greeting1 := speak(c)
	greeting2 := speak(p)

	fmt.Println(greeting1) // Hello, hoge
	fmt.Println(greeting2) // Hello, fuga
}
 
```

- 上記のようにすることでコードが見やすくなったり、共通化を行いやすくなる
- `interface`自体は関数をまとめて一つのオブジェクトを作ることができる便利なものである

参照
[Goはオブジェクト指向言語だろうか？](https://postd.cc/is-go-object-oriented/)
[オブジェクト指向言語としてGolangをやろうとするとハマる点を整理してみる-Qiita](https://qiita.com/sonatard/items/2b4b70694fd680f6297c/)
[インタフェースの実装パターン #golang](https://qiita.com/tenntenn/items/eac962a49c56b2b15ee8/)
新人との振り返りに合うのはYWT

**※KPTとYWTのそれぞれの説明については割愛させて頂きます**

## 結論
- 新人が溜めるものは**経験**と**自信**です！

## 経緯
新人が配属されOJT教育のために**KPT**で振り返りをしたところ、非常に困った事が発生しました
まず新人なので基本的には何も知らないし、何もできません
そんな状態で振り返りを実施すると**P**しか出てきません

- 次々に溜まり捲る**P**
- 少しも溜まらない**K**
- 教える全ての事が**T**

**P**ばかり溜まるのって本当にテンションが下ります
しかも新人です
スタートからいきなり壁にぶつかってテンションの上る人は非常に稀です
新人も教える方もモチベーションが上がりません

そこで振り返り手法を**YWT**に変更しました

- まず手順書を見せながら業務を説明して、新人にやってもらいます
→**(自動的に)Y(やったこと)が増える！**

- 初めての事をやって、できたらできた事がわかります
できなくても、できなかった事がわかります
→**(自動的に)W(わかったこと)が増える！**

- 新人の状況や成長を見ながらリーダーが次のOJT業務を指示します
→**(自動的に)T(つぎにやること)が増える！**

新人の最初のアウトプットは**W**ので「きたか、できなかったか」の選択のみです
これを週1で繰り返していくうちに**W**が選択ではなく自分の言葉で出てくるようになります
次に**T**も自分で発言が出来るようになり、遂に**T**にない**Y**も自分から発言ができるようになります

これはもう自転車の後ろを押さなくても自分で走っていける状態です
手を離しても定期的な進捗確認や質問の回答等のサポートは必要ですが、あとは本人の努力次第で成長できるでしょう

## 補足
何をやっても**P(問題)**ばかり出てくるとなると、何もやりたくなくなるのが人の心情ではないでしょうか
ゲームを始めて何かしてもエラーメッセージしか出なかったら、つまらないのですぐ止めてしまいます
チュートリアルのストーリーの中で画面の見方の説明、操作方法の解説をして覚える事に集中させるのがよいと思います

最初はやったことのない仕事をすることに躊躇します
しかし実際に進めていくことで**Y**と**W**が溜ると、その溜った**Y**と**W**がある事で
「前回のこれもできたから、今回もできるのではないか」
という根拠の無い(有る？)自信がでてきます
そうして次に進む事ができるようになるのではないでしょうか
次の新しい事に挑戦する気持を育てることが新人には大切だと考えます

## 補足2
本人が「自分でやる」という意識付けも成長には大切だと思います
Swift delegate

# delegate
あるクラスから他のクラスに処理を任せる

##### メリット
- どのクラスなのか、どんな処理をするのか、ということを意識しなくていい点
- ボタンを押したときに違う処理がしたいのであれば、処理を任されるクラスだけを新しく作ればいい

#### delegateを実装するには、3つの役割が必要
- 任せる処理をメソッドとして定義(このメソッドはデリゲートメソッドと呼ばれる)
- デリゲートメソッドを使用し、処理の流れを記述
- プロトコルで定義されたデリゲートメソッドを実装
Swift extension

# extension
クラス、構造体、列挙型に対して機能を拡張できる

``````
extension (拡張するものの名前){
// 追加メソッド・プロパティなどを定義
}
``````
- 継承の場合、あるクラスの機能を拡張するのに別のクラスを用意する必要がある。
それに対してextensionはすでにあるクラスを動的に拡張することができる。
- 継承の場合、既存のメソッドを上書きするオーバーライドの概念がある。
それに対してextensionはない。つまりもともとある機能の変更はできない。
Python split　文字列をリストに

文字列を空白やスラッシュなどで切り分けたいときには、split関数を使います。 例えば下記のように英文を空白で区切って単語のリストにすることができます。



```py:切り分けたい文字列
test_sentence = "this is a test sentence."
```


```py:splitでリストにする
test_sentence.split(" ")
```


```py:出力結果
["this", "is", "a", "test", "sentence."] 
```

splitの使い方は

```py
切り分けたい文字列.split("区切る記号", 区切る回数)
```

となっており、区切る回数を指定することで先頭から何回区切るかを指定することができます。

引用：[アイデミーデータクレンジングコース](https://aidemy.net/courses/4050/exercises/Hy7IYnIoLlz)
(弊社の上記サイトでは問題演習が可能です（この講座は有料です）)
[Firebase][JavaScript] プロジェクトにimportする際に警告文が出てくる

FirebaseでWebアプリを開発しようと、importした際に
コンソールに以下警告文が出てきました。
<img width="775" alt="スクリーンショット 2018-11-13 12.33.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/130896/c71fe571-6c9f-56bb-00af-c6e618b4384c.png">

```
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
```

## 解決法

言われたとおり、importの部分を書き換えます。

```.js
import firebase from 'firebase'

//...
```

:point_down:

```.js
import firebase from 'firebase/app'
import 'firebase/app'
import 'firebase/firestore' // ここには使用するFirebaseSDKモジュールを記載

//...
```

こうすると、警告文が消えます！

## 原因

* セキュリティの観点から、本番環境では使用するFirebaseSDKだけを選んでimportが推奨されているもよう(問題なく動作はする)。
python 　無名関数　lambda式　その３

lambdaはdefによる関数と異なり、返り値の部分には式のみ入れることができます。
例えばdefによる関数では、

```py:例１："hello."と出力する関数
def say_hello():
    print("hello.")
```

といった処理が可能でしたが、これをlambdaで表現することはできません。
追記：Python3ではPrintが関数となり式として使えるようになったのでlambdaでも表現可能です。shiracamusさんコメントありがとうございます。

ただし、ifを用いた条件分岐に関しては三項演算子（公式には条件式）という手法を用いることでlambdaでも作成することができます。
例えば


```py:例２：引数が3未満ならば2を掛け、3以上ならば3で割って5で足す関数
def lower_three1(x):
    if x < 3:
        return x * 2
    else:
        return x/3 + 5
```

上記の関数をlambdaで表現すると、


```py:例３：lower_three1と同じ関数
lower_three2 = lambda x: x * 2 if x < 3 else x/3 + 5
```

このように書くことができます。三項演算子の表記は以下のようになっています。

```py
条件を満たす時の処理 if 条件 else 条件を満たさない時の処理
```

このように、lambda以外にも様々な場面でコードの節約をすることができます。

[引用：アイデミー　データクレンジングコース](https://aidemy.net/courses/4050/exercises/S1MLF2LoUgz)
（上記の弊社サイトでは問題演習が可能です）


その１　https://qiita.com/vntomo/private/49cd45d3798bb66a3775
その２　https://qiita.com/vntomo/private/c041a004d60d00ad464b
その３　https://qiita.com/vntomo/private/fd16e40a21bde5dc03ae
もしQiitaでお金を稼げるようになったら闇落ちしたの私がやる事。絶対に質が悪い記事が増えます。

この記事は
[Qiitaでお金が稼げるなら質の高い記事がもっと増えるのではないかという提言](https://qiita.com/HiromuMasuda0228/items/aa3729882cb59fda9838)
に対するレスです。


コメントでやれば良いと思ったのですが記事にした方が良いね！してもらえると思うので記事にします。
*いいねの数に対してお金をもらえると仮定した話です。１いいね！はいくらかは知らないが、生活できるレベルのお金がもらえるとして。


## 1. 技術ブログの記事を転記します

会社ブログや他のテックブログ、それこそMediumの記事をQiitaに転記します。
元々が価値がある記事なのでいいね！されやすいはず。自分で記事を書くわけではないので労力も少ない。

## 2. ソーシャルワーカーにリライトを発注します

転記で稼いだお金で、よくいいねされる記事をリライトしてもらって再投稿します。
何度も再投稿することで新着に表示させ、いいね！を狙います。
もちろん、過去の他人の投稿もリライトしてもらいます。今でも重複記事多いから問題ないね！

## 3. Qiita転記システムを作成し情報商材として売ります

自分だけでやっても天井は知れているので、初動で稼いだあとはシステムを複製して売ります。
後は他の人が1,2を繰り返します。


# ほぼ確実にスパムらしき投稿が増えると予測されます。

え？スクリーニングすれば大丈夫って？それをやるのは運営で、もちろん運営コストが増える
そうすると、（仮にお金がもらえるとして）記事を書いた人への報酬が減る・・・という悪循環が発生します。

現にYoutubeのスパムや無断転載とか多いですしね。
Youtubeでアニメがあがっていたら明らかに無断転載って分かるので通報しているんですが、
技術記事の転載だと原本探すの大変そうですね。

# いまでもQiitaを使って利益を獲る方法　→　ポートフォリオとして使う

記事に対して報酬がもらえないQiitaでも十分に利益を享受する事ができると私は思います。

- 就活、転職活動にQiitaのアカウントを提出する
- 逆に最近、Qiitaをスクレイピングして転職オファーメールを送るとかいう会社があるっぽい
- [Stargzr](https://stargzr.net/) のような、Qiitaをベースにスコアリングしてランキング＆仕事につなげるサービスを利用する


# 最後に

私は闇落ちしないので、この記事に書いてあるような人でなしな行動は行いません。
あくまで私が考えつくコンテンツで収益を分けてもらえるようになった時に悪用できるパターンを考えてみただけです。
Kerasで1桁の足し算


「無から始めるKeras 第1回」
https://qiita.com/Ishotihadus/items/c2f864c0cde3d17b7efb


を参考に、0-5の乱数同士を足し合わせる、1桁の足し算を作ってみた。

```hoge.py
import numpy as np
from keras.utils import np_utils
from keras.models import Sequential
from keras.layers import Dense, Activation

# 足し算の問題と答えの配列作成
x_train = np.random.randint(0, 5, (1000, 2))
y_train = np_utils.to_categorical(np.sum(x_train, axis=1))

# model作って学習
model = Sequential()
model.add(Dense(20, input_dim=2))
model.add(Dense(9, activation='softmax'))
model.compile('rmsprop', 'categorical_crossentropy', metrics=['accuracy'])
model.fit(x_train, y_train, nb_epoch=300, validation_split=0.2)

# テストデータを作成して検証
x_test = np.random.randint(0, 5, (100, 2))
predict = np.argmax(model.predict(x_test), axis=1)
y_test = np.sum(x_test, axis=1)
print(sum(predict == y_test) / len(x_test))
```
python 　無名関数　lambda式　その２

lambda式で多変数の関数を作成したい時には、



```py:例１：２つの引数を足し合わせる関数add1
add1 = lambda x, y: x + y
```

とします。

lambda式は変数に格納できますが、変数に格納せずとも利用することができます。例えば上記のadd1のようなlambda式に２つの引数 3, 5 を代入した結果が直接欲しければ、

```py
(lambda x, y: x + y)(3, 5)
出力結果
8
```

とすることで値が得られます。

このままでは全く意味が無い上にむしろ手間が増えただけですが、この「変数に格納する」= 「関数に名前を付けて定義する」 必要が無いことは、関数の利用を大幅に簡単にします。


引用：[アイデミー　データクレンジングコース](https://aidemy.net/courses/4050/exercises/rk-IFnLiLeG)
（上記の弊社サイトでは問題演習が可能です）

その１　https://qiita.com/vntomo/private/49cd45d3798bb66a3775
その２　https://qiita.com/vntomo/private/c041a004d60d00ad464b
その３　https://qiita.com/vntomo/private/fd16e40a21bde5dc03ae
python 　無名関数　lambda式　その１

Pythonで関数を作成する際には

```py:例１：x^2を出力する関数pow1(x)
def pow1(x):
    return x ** 2
```

として関数を定義しますが、以下の 無名関数(lambda式) を用いることでコードを簡素化できます。


```py:例２：pow1(x)と同じ働きを持つ無名関数pow2
pow2 = lambda x: x ** 2
```

lambda式を用いることで、式をpow2という 変数 に格納できます。

lambda式の構造は

```py
lambda 引数: 式
```

となっており、上記のpow2では引数 `x` を `x**2` の式で計算した値にして返すことを意味しています。

lambda式に引数を渡して実際に計算する場合は、

```py:例３：pow2に引数aを渡して、計算結果をbに格納する
b = pow2(a)
```
とすればよく、defによって作成された関数と同様に使えます。

引用：[アイデミーデータクレンジングコース](https://aidemy.net/courses/4050/exercises/H1x8FnUjUeG)
（上記の弊社サイトでは問題演習が可能です）

その１　https://qiita.com/vntomo/private/49cd45d3798bb66a3775
その２　https://qiita.com/vntomo/private/c041a004d60d00ad464b
その３　https://qiita.com/vntomo/private/fd16e40a21bde5dc03ae
SwiftのOptional型なStringを連結させる

nilが入ってくるかもしれないStringの変数aとbを連結させたい場面があったのでメモ


# やりたかったこと

```swift
let a:String? = "Hello"
let b:String? = nil

print(a + b) //エラー
```

こんな感じで(実際にはAPIとかから値を取得してくるときにnilが帰ってくるかもしれない状況)OptionalなString同士を連結させて、片方がnilな場合はそれを無視し、nilでない方だけ出力したかった。
上記の例だと、実行結果を `Hello` としたい。
当然、a、bどっちもOptionalなのでアンラップしてくれとエラーが出る。 `Value of optional type 'String?' must be unwrapped to a value of type 'String'`

# 解決方法

```swift
let a:String? = "Hello"
let b:String? = nil

print("\(a ?? "")\(b ?? "")")
```

実行結果

```
Hello
```

こんな感じで、バックスラッシュ + カッコ　で解決。
`\(hoge)` は、文字列の中に変数を展開する方法。

`hoge ?? "piyo"` は、 `hoge` がnilだったときにデフォルト値( `piyo` )を設定するよという書き方。
今回はnilのときは無視したかったので、デフォルトは空文字とした。

例えば、

```swift
let a:String? = "Hello"
let b:String? = nil

print("\(a ?? "")\(b ?? " world")")
```

このようにすると、`b`のデフォルトが` world`になるので、実行結果は

```
Hello world
```
となる。
PlayFabでUnityを動かしてみる -その1下準備編-

公式ドキュメントをもとにPlayFabを動かしてみたいと思います

### (1)利用言語を選択する→Unity
PlayFabは主要なゲームエンジンや言語に対応しています

・Unity
・HTML5 (Javascript) 
・Flash (ActionScript3) 
・C# 
・Cocos2d-x 
・Xamarin 
・Node 
・Java 
・Defold (Lua) 
・Corona (Lua) 
・Windows - C++ 
・Linux - C++ 

なので今回は「Unity」で試してみたいと思います

### (2)UnityをDownloadする

Unity3Dをダウンロードする
https://store.unity.com/download
直近のバージョンはサポートされているそうですが、5.3以上が推奨とのこと
(2018年11月現在 最新はUnity 2018.2.15f1)

![Unity01.png](https://qiita-image-store.s3.amazonaws.com/0/313446/6ad9c25c-92e2-5ded-b8e8-58347314dcf7.png)


ダウンロードしたファイルをクリックしてインストールする
![Unity02.png](https://qiita-image-store.s3.amazonaws.com/0/313446/1f92022a-7d93-86ba-6ac5-884dd9101a22.png)


インストール完了したら新しいプロジェクトを作成する　
![Unity03.png](https://qiita-image-store.s3.amazonaws.com/0/313446/f256368d-91f6-70df-d445-ce31b70b6290.png)

必要事項を入れて「Create Project」をクリック
![Unity04.png](https://qiita-image-store.s3.amazonaws.com/0/313446/0e1a69c5-fe6e-18a1-fa0c-b771c08ea69f.png)

というわけでUnity側の準備完了
![Unity05.png](https://qiita-image-store.s3.amazonaws.com/0/313446/a2c45b3e-9545-f266-2367-a6bea8344563.png)



### (3)PlayFabSDKをDownloadする
PlayFabのUnitySDK拡張をインストールします
https://github.com/PlayFab/UnityEditorExtensions/raw/master/Packages/PlayFabEditorExtensions.unitypackage

![Unity06.png](https://qiita-image-store.s3.amazonaws.com/0/313446/c009c22c-fb59-e978-d4d8-8f0abec9dccb.png)

「Import」をクリックし拡張機能をインポートする
![Unity07.png](https://qiita-image-store.s3.amazonaws.com/0/313446/1d502736-6443-7feb-6bf0-5dfd405289d4.png)

拡張機能が利用できることを確認
アカウントを持っていれば「login」をクリック(わかりにくい)、
持っていなければ新規作成のため「CREATE AN ACCOUNT」をクリック
![Unity08.png](https://qiita-image-store.s3.amazonaws.com/0/313446/8dbdf206-7973-d11f-2004-246936ac9b0d.png)

ログイン後、SDKが入っていないと言われるので「Install PlayFab SDK」をクリック
![Unity09.png](https://qiita-image-store.s3.amazonaws.com/0/313446/7e2f89a4-0ba2-58c6-8112-bd0b4de14ffa.png)

インストール完了
![Unity10.png](https://qiita-image-store.s3.amazonaws.com/0/313446/50bf86c5-840d-68bc-5fdf-6cac883e0db7.png)


###(4)タイトルセッティング
PlayFabの拡張をインストールしたので設定を行う
「SETTINGS」を押す

![Playfab01.png](https://qiita-image-store.s3.amazonaws.com/0/313446/778113c9-7f26-716e-738e-74830845442e.png)

STUDIOを選択するとそれ以外の設定も自動的に変更される
マニュアルは「SAVE」ボタンが出るようですがでてこない・・・？
![Playfab02.png](https://qiita-image-store.s3.amazonaws.com/0/313446/77262034-cdc9-40d8-38e8-e9859961da9a.png)


一旦設定は完了
いよいよAPIの設定に入りたいと思います
jupyter notebook / UnrecognizedFlagError: Unknown command line flag 'f'

google colabolatoryやjupyter notebbok上で
tf.flagsを含むコードを実行しようとすると
```UnrecognizedFlagErrorUnknown command line flag 'f'```
が出現します。

いろいろ検索してみると、下記に解決策を見つけました。

https://github.com/tensorflow/tensorflow/issues/17702
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177689/4a6059db-10a8-110f-554e-bec70dbd1bfa.png)


```tf.app.flags.DEFINE_string('f', '', 'kernel')```
を一行加えてあげるとエラーが回避されるようです。
定義されてないと怒られるなら定義してしまえと逆転の発想ですね！