OmniAICreator/Qiita-1.07M huggingface dataset:
MacOSをアップデートして、gitがエラーを出して使えない場合

MacOSをアップデートして、git がエラーを出して使えない場合

````
git status
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
````

下記を実行する。

````
xcode-select --install
````

もし、アップデートが見つからないうんぬんのアラートが出た場合は下記を実行（自分がそれに該当した）

````
sudo su -
パスワード入力
xcode-select --switch /Applications/Xcode.app
xcode-select --switch /Library/Developer/CommandLineTools
````
fess設定サンプル（v12.3）

#はじめに
社内でFessサーバ立てた時の設定メモ。
[書いた記事（個人開発PaaS比較）](https://qiita.com/nh321/items/0373a740e56fad6a49d8)がちょっとバズって浮足立ってるので、（ほぼ確実に）バズらない記事を上げて心を落ち着けたい。

バージョン：12.3
公式ドキュメント：https://fess.codelibs.org/ja/

#設定ファイルとか画面外のヤツ
##もろもろ
以下を見ながら設定するだけなので、特に言うことないっす。
heapサイズ変えました。
https://fess.codelibs.org/ja/12.3/config/system.html

## /etc/fess/fess_config.properties
`jcifs.smb.SmbException`が発生して、アクセス出来ないときは、
jvm.crawler.optionsの以下のtrue/falseをいじれば、だいたいなんとかなるはず。[^設定]

[^設定]: ファイルサーバのセキュリティにも関わりそうなので、ここは実際の設定値とは違います。

```text:jvm.crawler.options
-Djcifs.smb.client.ipcSigningEnforced=true\n\
-Djcifs.smb.client.signingPreferred=true\n\
-Djcifs.smb.client.enableSMB1=true\n\
-Djcifs.smb.client.enableSMB2=true\n\
```

#管理画面設定
##全般
###除外するエラーの種類
ここで指定したエラーは、「障害数のしきい値」を超えても、クロール対象になります。[^除外するエラーの種類]
以下を指定しています。正規表現で複数指定できます。[^複数指定]

[^除外するエラーの種類]: 正確には「クロール除外対象から除外するエラーの種類」なので。
[^複数指定]: [公式掲示板](https://ja.osdn.net/projects/fess/forums/18580/36453/)より

```text
org.codelibs.fess.es.client.FessEsClientException|org.codelibs.fess.exception.ContentNotFoundException
```

**org.codelibs.fess.es.client.FessEsClientException**
URLエンコードに失敗して、対象が見つからず、タイムアウトしている様子。
何が原因かわからないが、連続で発生しているわけじゃなさそうなので、ひとまず指定。

**org.codelibs.fess.exception.ContentNotFoundException**
ファイルが存在しなかった時に発生します。今は無くなったかもしれないですけど、未来で復活するかもしれないので指定。


####除外してはいけないエラー
基本的に、以下は指定してはいけない。（はず）

**org.codelibs.fess.crawler.exception.MaxLengthExceededException**
ファイルサイズが大きい時に発生します。ファイルサイズが小さくなることは稀。指定した場合、クローラがout of memoryで死ぬ可能性が高くなると思われる。

###障害数のしきい値
とりあえず `5` にしてます。

###LDAP
以下記事参考にすればたぶんなんとかなるはず。
[Rocket.Chat 設定もろもろ#LDAP](https://qiita.com/nh321/items/7289e95c83108628eb24#ldap)

##クローラ
WEBは使ってない

###ファイルシステム
####パス

以下を対象にしたいなら

```
\\filesv\abc\def\
```

こんな感じ

```
smb://filesv/abc/def
```

要は以下。

- 頭の`\\`→`smb:`
- 頭以外の`\`→`/`


####除外するパス
重いことが多いファイルを除外してます。

```text
.*\.exe$|.*\.zip$|.*\.war$|.*\.jar$|.*\.tar\.gz$|.*\.tmp$|.*Thumbs\.db$|.*\.lnk$|.*\.accdb$|.*\.msp$|.*\.msi$
```

###ファイル認証

以下を対象にしたいなら

```:ファイルパス
\\filesv\abc\def\
```

上記ファイルサーバーにアクセスするためのユーザーID・パスワード
ドメイン：`xxxxx`
ユーザーID：`userid`
パスワード：`password`

**最終的な設定内容**

- ホスト名：`filesv`
- スキーム：`Samba`
- ユーザー名：`userid`
- パスワード：`password`
- パラメータ：`domain=xxxxx`
- ファイルクロール設定：クローラ＞ファイルシステムで作ったクローラの名前を指定



以上
fetch APIでJSONをPOSTしてPHPで受け取る

# 概要
fetch APIを使ってjson形式のデータをPOSTしてPHPで受け取るやり方について。

# 環境
## PHP
```bash
# php -v
PHP 7.2.11 (cli) (built: Oct 16 2018 00:40:40) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.11, Copyright (c) 1999-2018, by Zend Technologies
```

# 実装

```js:js
fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "id": "01",
    "title": "テスト01",
  })
})
  .then(response => {
    return response.json();
  })
  .then(json => {
    console.log(json);
  })
  .catch(e => {
    console.error(e);
  });
```

```php:PHP
$params = json_decode(file_get_contents('php://input'), true);
$id = $params["id"];
$title = $params["title"];
```

# 参考
[github/fetch](https://github.com/github/fetch)
[Fetch](https://github.github.io/fetch/)
[Fetch 概説](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch)

[[フロントエンド] fetchを用いたAjax通信を行う](https://www.yoheim.net/blog.php?q=20170107)
[fetch API でも POST したい！](https://qiita.com/legokichi/items/801e88462eb5c84af97d)
[Using the Fetch API to send and receive JSON with PHP.](https://codepen.io/dericksozo/post/fetch-api-json-php)
AndroidのPermissionの仕様についてのバッドノウハウ...

#この手順には問題がありました。(2018/11/1追記)
targetSdkVersionを23にした後に、22に戻しても既にインストールしているアプリには上書きできない仕様になっていました。Google Playでのアップロードは試していないですが、同様の縛りがある可能性があります。

- アンインストールしてから、インストールする

することで、一応使えるようにできます。それ以外では結局以下の対応が必要です。

- 設定　-> アプリ -> 当該のアプリと進んで権限を設定する
- 権限設定のフローをアプリ内に用意する(一番真っ当な対応)

#経緯
Android 6.0よりUser-Permissionの仕様が変わったことはググると相当出てきます。結構なポリシー変更だしトピックとしては熱いので、Qiitaにも結構記事がありますね。
変更点は、

- Permissionの確認タイミングが｢インストール時｣から**｢機能を使うタイミング｣**に変わった
- 自動的にONにはしてくれない。ユーザー承認が必須

といったところです。だいたいこの変更点に対するGoogleの意向に沿った対処について記述されています。当然重要なポイントなので、そういう書き方が真っ当な方向性です。ただ、

- 自動でONにはしてくれないので、**OFF状態でアプリが駆動してしまい、不具合が発生する**

しまうことになり、かつ想定ユーザーを信頼できない場合や極力手数を減らしたい場合

- 真面目に実装すると必須の確認ダイアログを、**表示させたくない**

等、その仕様じゃ困るという場合に、どうしたらAndroid 6.0以上の端末でインストール時の確認でOnに出来るかについて言及されているものがありませんでした。ちょっと考えたら対処は出来たんですが、そのちょっとに少し時間が掛かったので、メモ代わりに記事にすることにします。

**あんまり良い考え方、対処じゃないのは自覚しています。**時間と予算が許すならきちんと最新のポリシーに沿って実装することをお勧めします。
また対処方法をご覧いただくと分かると思いますが、sdkのバージョンが高く設定する必要があるなら、この方法は利用できません。

#対処方法
簡単です。この問題にぶち当たる時は、Buildの設定で真面目にtargetSdkVersionを最新に近い値を設定しているときです。この**targetSdkVersionを22にするだけ**でインストール時の確認に戻ります。

分かっている人からすると、当然と思うところかと思います。
targetSdkVersionを23以上にしていると、user-permissionの仕様変更が適用されます。インストール時に確認する方式にしたい場合、targetSdkVersionを確認して、23以上になっていれば、22にすることでインストール時の確認に戻すことができます。

結論の簡単さと比べ、思いつくまでの時間が長かった...
コロンブスの卵的な少し酸っぱい後味でした...

#よくありそうなケース
アプリ自体は、頻繁に更新されているが、**アプリを利用している端末の更新が遅い場合**。法人でタブレットを専用端末として開発した場合、そうそう端末を頻繁に変えないので、この問題は潜在的に長く潜伏しやすい性質があります。私の場合はこれです。
こういう場合、ユーザーの操作を極力減らしたい、分かりづらい権限の設定等はユーザーに触らせたくないという要件はあり得るかと思います。

#問題発生の兆候と迷走への序曲
私の場合、SD Card等の外部ストレージへのアクセス権限が無くなっていたのが問題表出の最初でした。logcatにPermission deniedと表示されている状態でした。この場合、AndroidManifestの記述を疑いますが、当然このケースではきちんと｢android.permission.WRITE_EXTERNAL_STORAGE｣が記述されていることになります。
それにより迷走の糸口になりやすい、というよりなりました。私はManifestの記述の仕方を変えれば何とかなるんじゃないかという方向で一生懸命ググってました。
Macを再起動したらSourceTreeでpermissionエラーになるときの解決方法

# 起こったこと
SourceTreeを使ってsshでgitやbitbucketのリポジトリ操作をしていたが、macを再起動したら
「Permission denied (publickey).」
と表示されて、操作ができなくなってしまった。

# 解決方法

SourceTreeにユーザーを追加した際に ~/.ssh/config に追記された部分を編集した。

1. Host がgit,bitbucketのユーザー名に基づいて設定されているので、それぞれ「github.com」、「bitbucket.org」に変更
2. User がgit,bitbucketのユーザー名に基づいて設定されているので、それぞれ「github」、「bitbucket」に変更

## スクリーンショット
![スクリーンショット 2018-10-31 13.47.47.png](https://qiita-image-store.s3.amazonaws.com/0/131949/b3483c21-2eb1-f234-9eb6-a3a2bb608d4e.png)
↓
![スクリーンショット 2018-10-31 13.48.29.png](https://qiita-image-store.s3.amazonaws.com/0/131949/4764590e-6a7c-1537-df26-4fb743a43de7.png)

## ※コピペ用
```~/.ssh/config
# --- Sourcetree Generated ---
Host github.com
    HostName github.com
    User git
    PreferredAuthentications publickey
    IdentityFile /Users/macのユーザー名/.ssh/gitのユーザー名-GitHub
    UseKeychain yes
    AddKeysToAgent yes
# ----------------------------

# --- Sourcetree Generated ---
Host bitbucket.org
    HostName bitbucket.org
    User bitbucket
    PreferredAuthentications publickey
    IdentityFile /Users/macのユーザー名/.ssh/bitbucketのユーザー名-Bitbucket
    UseKeychain yes
    AddKeysToAgent yes
# ----------------------------

```
iOSアプリで適当なタイミングにアプリレビューを促す

アプリのレビューはアプリがダウンロードされるためにとても重要です。
iOS11.3以降ではStoreKitを使ってアプリ上でレビュー（星）をつけることができるようになりました。
ただ、アプリがダウンロードされて１回目からアプリレビューをお願いします！とアラートが出ても無視されるか、星１をつけられてしまうことがあるので、ユーザーが継続的に使っている場合にのみアラートが表示されるようにします。
これはそのメモです。

#コード
```AppReviewManager.swift
import StoreKit

class AppReviewManager: NSObject {
    
    func request() {
        let userDef = UserDefaults.standard
        var requestedCounter = userDef.integer(forKey: "requestReview")
        if requestedCounter == 10 {
            SKStoreReviewController.requestReview()
        }
        requestedCounter += 1
        userDef.set(requestedCounter, forKey: "requestReview")
    }
}

```

#使い方
これをいい感じのところ（例えばアプリが表示されたタイミングなど）に書けばOK

```
AppReviewManager().request()
```
zabbixで6万itemに耐えれるようにパフォーマンスチューニングをしてみた

# zabbixで6万itemに耐えれるようにパフォーマンスチューニングをしてみた

## TL;DR

Mysqlが仮想メモリで動いていてI/O wait多発。
Mysqlのメモリチューニングしたら上手くいった。

## 背景

zabbixで使用するitemが増える(現在6万ぐらい)につれてwebインターフェースが繋がらなくなることが多発。
自動復旧用にitemを設定しているためitem自体を減らすことが難しく、zabbixサーバー自体のチューニングをすることにしました。

使用環境
- zabbix 3.4
- AWS上のubuntu端末で運用
- item 6万・ホスト数500程度
- t2.largeで運用
- zabbix proxyは使用せずzabbix serverのみの運用
- apache2/zabbix server/mysqlの構成

## 調査

zabbixの標準的なログとして

- apache2のログ `/var/log/apache2/access.log`
- zabbix serverのログ `/var/log/zabbix/zabbix_server.log`
- mysqlのログ `/var/log/mysql/mysql.log`


今回は事の発端がweb インターフェースから繋がらない、が問題だったのでapache2のログから調査を始めました。
`/var/log/apache2/error.log`に以下のようなログが吐かれてました。

```
[mpm_prefork:error] [pid 22269] AH00161: server reached MaxRequestWorkers setting, consider raising the MaxRequestWorkers setting
```
このエラーはapacheのMaxスレッド数を超えてアクセスが来た時に吐かれるエラーになります。
じゃあこの時間にめっちゃアクセスが来てるのを調べるべく、`/var/log/apache2/access.log`のアクセス数をshellで解析

```
LOG_FILE=$1
function print_apachelog () {
    DATE=$1  #24/Oct/2018
    for h in {0..23};
    do
        if [ ${h} -le 9 ]; then
            h=0${h}
        fi
        for m in {0..59};
        do
            if [ ${m} -le 9 ]; then
                m=0${m}
            fi
            DATETIME=`echo "${DATE}:${h}:${m}"`
            COUNT=`cat ${LOG_FILE}  | grep -c ${DATETIME}`
            echo "${DATETIME} ${COUNT}"
        done
    done
}

print_apachelog 25/Oct/2018
print_apachelog 26/Oct/2018
```
上記みたいにざっくりとしたアクセス数を解析。
該当時間帯には`100`程度しかアクセス数が無い。。じゃあ次はzabbix serverとmysql。

zabbix serverのログには目立ったエラーログがない。。
なのでもっと多くの情報を得るべく、zabbixでzabbixのインフラ情報を得ることにしました。
zabbix server自体に
`Template OS Linux`と`Template App Zabbix Server`のtemplateを追加。
標準的なcpu/memoryの状況とzabbixの内部チェックができます。
`latest data`か`Graph`から各メトリクスの状況を確認できます

内部チェックの詳しい仕様は以下で確認できます
https://www.zabbix.com/documentation/3.4/manual/config/items/itemtypes/internal

該当時間帯に発生していたこととしては

- cpu load average が5に達している
- cpu I/O waitの値も高い(60 ~ 80%)
- zabbixのqueueがめちゃくちゃ溜まってる(多い時で4000!!)
- zabbix history write cacheの値が該当時間帯に0%になっている
- history syncer processesもbusyになっていた。



どうやら
1. zabbixサーバー上のhistory syncer processesがI/O待ちで滞留
2. httpコネクションも滞留する
3. apacheのMaxリクエスト制限に引っかかりweb インターフェースが使えなくなる
という流れのようです。

では`history syncer processes`はどのような役割をしているのか？
zabbix japanの社長によると


> 収集したデータをメモリキャッシュからDBに書き込むためのプロセス

とのこと。なるほど。ということは

- zabbix serverのprocessが仮想メモリ上で動いており、I/Oが waitが発生
- Mysqlが仮想メモリ上で動いており、I/Oが waitが発生

の二択に絞られそうです。なんとなくcpuを食っているのはMysqlが怪しい気がするので、Mysqlのcpu使用率を調べてみます
zabbixのitemに以下のようにitemを追加。

- zabbxi agent item
- `system.run[ps auwx | grep -v grep | grep mysql | awk '{print $3}']`

結果としてMysqlがcpu食ってました。実memory自体は全然消費していなかったので、仮想メモリでsqlを実行しているので、I/Oが数値が跳ね上がったで間違いなさそうです。

## 結論

メモリの空きも結構あったので実際の変更点としては

```
innodb_buffer_pool_size 1024 -> 4096
```
に変更をしました。これだけ調査したのに、変更点これだけ。。
zabbixに繋がらなくなった時はまずはDB起因を疑ってもいいかもしれません。

実際のzabbix用のmysqlのチューニングは以下のサイトが参考になりそうです。
https://www.percona.com/blog/2014/11/14/optimizing-mysql-zabbix/
JavaScript,Node.jsで年月日ループを実装する

# 概要
探してもあまり見つからなかったので自分で実装することにしました。
startDateとEndDateの値を変えれば動くようになってるはずです。

# 準備
moment.jsが必要です。

npmまたはyarnでライブラリを導入できる場合は以下のどちらかのコマンドを使ってインストールしてください。

```
npm i moment
```

```
yarn add moment
```

# コード(古い版)
こちらのコードはやたら長い上に上位互換のものがあるので次の見出しにあるコードを使ったほうが見た目いいです。

```javascript
const moment = require('moment');

function loopYmd(startDate, endDate){
  const start = moment(startDate);
  const end = moment(endDate);

  let s = {
    year: start.get('year'),
    month: start.get('month') + 1,
    day: start.get('date'),
  };
  let e = {
    year: end.get('year'),
    month: end.get('month') + 1,
    day: end.get('date'),
  };

  for (let y = s.year; y <= e.year; y++) {
    const isStartYear = y === s.year;
    const isEndYear = y === e.year;
    const startMonth = isStartYear ? s.month : 1;
    const endMonth = isEndYear ? e.month : 12;

    console.log(y + '年');

    for (let m = startMonth; m <= endMonth; m++) {
      const isStartMonth = m === s.month;
      const isEndMonth = m === e.month;
      const startDay = isStartYear && isStartMonth ? s.day : 1;
      const endDay = isEndYear && isEndMonth ? e.day : getEndDay(y, m);

      console.log(m + '月');

      for (let d = startDay; d <= endDay; d++) {
        console.log(d + '日');
      }
    }
  }
}

function getEndDay(year, month) {
  const date = String(year) + '-' + String(month);
  return moment(date).endOf('month').get('date');
}

loopYmd('2017-12-01', new Date());
```

# コード(短い最新版)
@myrさん ありがとうございます！
moment.jsに加算すれば全部回せるみたいです。

```javascript:loopYmd.js
function loopYmd(startDate, endDate) {
    let start = moment(startDate);
    const end = moment(endDate);

    while(start.unix() <= end.unix()) {
        console.log(start.format('YYYY-MM-DD'));
        start.add(1, 'days');
    }
}

loopYmd('2017-12-01', new Date());
```


# おわり
ググってもいい感じのコードがなくて自分で実装したので時間がかかりました
皆さんは僕のコードをコピペして時間を有効に使ってください

追記
頑張って時間かけて実装したらめっちゃ短く書けることが発覚しました
Qiitaに書いてなければ知ることはなかったと思うのでアウトプットしてよかったです
IIS5・PHP5で該当ページの「http」から「https」にURLを飛ばしたい。

#やりたい事
・「http\://xxx.login.php」から「https\://xxx.login.php」に飛ばしたい。
・上記ページのみSSLでhttp;//xxxはそのままにしておきたい。

#環境
IIS 5.2
PHP Version 5.2.5
Windows server 2003 R2


#最初に試した事（※こちらでは問題は解決しませんでした）
IISマネージャーから該当ページのプロパティから下記のように設定。

<img width="408" alt="iis設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/92797/3ae9d909-f1be-9fe2-b704-a7d6d941b9ff.png">

参考：http://www.atmarkit.co.jp/ait/articles/0908/07/news108.html

しかし、Google Chrome・IE以外のブラウザではリダイレクトされませんでした。

#PHPで解決
login.phpにリダイレクト処理を入れたlogin_ssl.phpをincludeしました。

```login.php
<?php
  include_once('./login_ssl.php');
  ///
?>
```


```login_ssl.php
<?php
/*
http ⇒ httpsにリダイレクト
*/
if (!(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on')) {
	Header( "HTTP/1.1 301 Moved Permanently" ); 
	Header( "Location: https://xxx/login.php" );
}
?>
```

これで無事どのブラウザでもhttpsに飛ぶようになりました。
「ワタシハリナックスチョットデキル」を一人でも増やしたくて社内で勉強会を継続してみた

# 背景
私は、都内の某ITのインフラ部門に所属しているのですが、部内はWindowsサーバが得意な人が多い。
Linuxめちゃくちゃ詳しい人もいるけどどちらかというとWindowsサーバ寄り、みんな本気だして界王拳3倍だすか、ググればできるのでしょうが
Linuxちょっとできる人を増やしたくて、微力ながら勉強会を継続して実施してみようと思いました。

# 目的
ただ勉強会をやるだけだとつまらないので作った資料は全てQiitaに書いていこうと思います。
社内知識ではなく、なるべく一般的に使えるLinux知識を増やせることを目的とします。

　・ワタシハリナックスチョットデキル人を増やす
　・Linuxのウンチクは語らず、なるべく難しい用語もつかわず理解しやすいことを心がける
　・Windowsサーバとの比較をいれる(WIndowsサーバでいうところの○○です。みたいな解説)

# 実習環境
個人のパソコンに仮想環境を構築するVirtualBoxをインストールして、その上でCentOSをインストールします

# 勉強会目次
・[LinuxってどんなOS？](https://qiita.com/ksawada1979/items/30b59eac2d32ae179d9d)
・[CentOSとRed Hat Enterprise LinuxとFedoraの関係](https://qiita.com/ksawada1979/items/d1e7d66437b18efdc0d4)
・[CentOS7の業務に役に立つ基本コマンド](https://qiita.com/ksawada1979/items/cfd33b87d757fd8a18a1)
・[CentOS各バージョンについて(作成中)]()
・[実際にCentOSに触れてみよう(環境構築編)(作成中)]()
・[実際にCentOSに触れてみよう(インストール編)(作成中)]()
React hooksを中心にReactの変化をまとめてみた

どうも、[sakito](https://twitter.com/__sakito__)です。

今回は現在React界隈で起こっていることについて、プロダクトチームに共有したまとめをせっかくならパブリックにしようと思い投稿。

## 最近のReact界隈でなにが起こっているのか
- [v16.6.0](https://reactjs.org/blog/2018/10/23/react-v-16-6.html)で```React.memo```, Suspenseの一部機能として```React.lazy```の登場
- Suspenseについてはまだ機能が追加されていく予定  
 - [React - React.lazy: Code-Splitting with Suspense](https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactlazy-code-splitting-with-suspense)
 - React Conf 2018で[formik](https://github.com/jaredpalmer/formik)の開発者であるJared Palmerが[登壇した動画](https://www.youtube.com/watch?v=SCQgE4mTnjU&list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ&index=17&t=1352s)
- [React hooks](https://reactjs.org/docs/hooks-intro.html)の登場(v16.7でもまだbeta)
- [recomposeの開発ストップ](https://github.com/acdlite/recompose)、これからはバグfixのみ
- [react-reduxがhooksを使っていく姿勢](https://github.com/reduxjs/react-redux/issues/1063)
 - ```redux```ではなく```react-redux```による議論
 - ```useRedux```のようにhooksをカスタマイズして自作できるので、今後はその開発が進みそう

## React hooksとは?
- 要は```class App extends React.Component ```とするようなclassコンポーネントを使わずに、関数コンポーネントでstate操作やライフサイクル的なことをする
- reduxのconnect的なこともできる
- これからは```stateless components```はなく、```function components```という呼び方になる

こんな感じにclassコンポーネントが変わる。 
左が現在のclassコンポーネントで、右がhooksを使用した関数コンポーネント
https://twitter.com/andychilton/status/1057089468769828864
![Dqs9tU_UcAEHUFc.jpg](https://qiita-image-store.s3.amazonaws.com/0/108073/bedebb9a-5487-8992-30cb-2c330633c0ec.jpeg)




### なにがよいのか？
今まではライフサイクルやstateに副作用のない場合のみ```stateless components```にしていた。 
その後開発を進めるにつれて、```stateless components```で作ったものに副作用が必要になった場合、classコンポーネントにリファクタリングする手間があった。
hooksにより```function components```にできることで、開発途中に上記のようなリファクタリングの手間がなくなる。
さらに詳しい情報は[React - Motivation](https://reactjs.org/docs/hooks-intro.html#motivation)を読むとよい。

### 今すぐ使った方がよいのか？
まだhooksの仕様は固まっておらず、今後仕様が変わる可能性があるので、今すぐ使う必要はなさそう。
現在は[このIssue](https://github.com/reactjs/rfcs/pull/68)でhooksについてのフィードバックを集めている。  

## 今後の開発について
[hooks - Gradual Adoption Strategy](https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy)を読む限り、classコンポーネントは今後削除される予定もなく、Facebook自体もまだまだclassコンポーネントを使用しているそう。 
今後はhooksでclassコンポーネントをサポートする動きもある。
なので、無理にclassコンポーネントを無くしていく方向にしなくても良さそう。
  
hooksへ段階的に移行できるように、下記を行っておくと良さそうだと個人的に思う。 

- classコンポーネントはライフサイクルやstateのみに集中し、他のメソッドは書かない
- ライフサイクルやstateを共通化したコンポーネントを作りたい場合は、[render prop](https://reactjs.org/docs/render-props.html)コンポーネントにする


## もっと詳しく知りたい人への参考資料
- [React - Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
- [RWieruch - What are React Hooks?](https://www.robinwieruch.de/react-hooks/)
- [React Conf - React Today and Tomorrow and 90% Cleaner React](https://www.youtube.com/watch?time_continue=2303&v=dpw9EHDh2bM)
- [mizchi - What is React Hooks?](https://gist.github.com/mizchi/b7346bf448eb826a02e2176800ab40a5#react-hooks-)
全くのゼロから始めるボードゲームのプログラミングと機械学習 [0日目]

#はじめに
ボードゲームが好きなITエンジニアのcoshianと申します。
最近の悩みはIT企業に勤めながらプログラミングをする機会がないこと……。
趣味と勉強を兼ねてボードゲームのプログラミングを始めようと思い立ちました。また、今後この業界は「AI」の技術が不可欠になっていくと予想されます。そのためAIについても勉強したいと思いボードゲームを題材に機械学習についても挑戦いたします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/308584/c5cdbbb7-43b5-0123-0734-1965a7a1582a.jpeg" width=40%>

#現状の知識
全くもって0の状態です。

- ボードゲームをプログラミングしたことはありません
- 機械学習はディープラーニングとか言葉を知っているぐらい

IT系のスキルは以下の通りです。

- 実装経験：java、php（コピー＆ペーストして作りましたレベル）
- 保有資格：FE、AP、SC

#Qiitaにアウトプットする理由
こんな手探り状態の記事ですがアウトプットすることには以下のような理由があります。

- 自分なりに学んできたことを記録として残す
- 自分と同じようにゼロから始める人の役に立つかもしれない
- 単純にQiitaを使ってみたかった
- もしかしたらアドバイスがもらえるかもしれない……

などなど。

#今後の予定
1. ボードゲームをプログラミング
2. ボードゲームのAI作成
3. 機械学習によるAI強化

使用言語はゲーム作りや機械学習にも適している（と噂される）Pythonを想定しています。Pygameといったパッケージを利用することで簡単にゲームを作成できるとか……
機械学習については全く方針も見えていないため調査から。

#今回の振り返り
- やったこと
    - Qiitaをはじめてみた
    - TwitterやGitHub、Googleのアカウントを作成した
- わかったこと
    - Qiitaの記事の書き方
    - GitHubの使い方が分からない
- つぎにやること
    - PythonおよびPygameについて学ぶ
    - 開発環境の準備
text-overflow: ellipsisが上手く動作しない？ 解決してあげよう。

まず、`text-overflow: ellipsis`とは、オーバーした分の文字列を`...`で省略してくれるというものです。
詳しくは[MDN web docs: text-overflow](https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow)を参照してください。

## 前提条件
まず、`text-overflow: ellipsis`を有効にするためには、以下のプロパティ達を設定する必要があります。

```css:style.css
.over-text {
  /* オーバーした要素を非表示にする*/
  overflow: hidden;

  /* 改行を半角スペースに変換することで、1行にする */
  white-space: nowrap;

  /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */
  width: 120px;

  /* オーバーしたテキストを３点リーダーにする */
  text-overflow: ellipsis;
}
```
`text-overflow: ellipsis`だけ指定していて有効にならないという人は、まず上記のプロパティを設定してみましょう。

## それでも、動作しない場合
上記の、前提条件を満たしても動作しない場合は以下のような場合があります。

### `display: flex`を指定している
これは実際に僕が遭遇した事例で、調べてもなかなか出てこなかったことです。

```css:flex.css
.text-flex {
  display: flex;
  align-items: center;
}
```
と、上記のように指定して、テキストの高さの位置を真ん中にしようとしていたわけです。

ちなみにですが`text-overflow`が`flexbox`でうまく動作しなことがわかり、`css text-overflow ellipsis flex`などで検索をかけると結構な件数がヒットします。
ただ、`css text-overflow ellipsis 動作しない`とかだと`flex`関連のものがヒットしないのでハマりました。

## 解決策
`display: flex`が原因だとわかれば、あとは検索するだけで、様々な解決法が見つかると思いますが、それで終わりでは丸投げムーブすぎるので、ここでは僕のとった方法を紹介します。

```html:index.html
<div class="text-flex">
  <div class="over-text">
   鳴かぬなら 鳴かせてみよう ホトトギス
  </div>
</div>
```

```css:style.css
.text-flex {
  display: flex;
  align-items: center;
}

.over-text {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  text-overflow: ellipsis;
}
```
この方法では、`text-overflow: elipsis`をかけたい要素を`display: flex`を設定した要素でラップしてあげれば、`flex`をかけつつ３点リーダー`...`にできます。

階層が一つ深くなりますが、解決策としてはスタンダードなものだと思います。

## 最後に
間違っているところがあれば、コメントで教えていただけるとありがたいです。修正しますので。
ただ、執筆者は豆腐メンタルなので誹謗中傷はやめてください（土下座）
nuxt.jsで複数ページの共通処理を書きたい時の選択肢

# nuxtServerInit
最初にだけ呼ばれる処理を書く時有効（ページ遷移ごとには読み込まれない？）

# mixin
便利だが、asyncDataが使えないため、contextをもった処理はかけない
基本はメソッドなどの共通化に使うのが良い
参考 https://qiita.com/devneko/items/afe12b8acaf9648ccbb6

# middleware
contextも持てるので便利。基本はこれを使うのが良さそう。
IntelliJ(PhpStorm)でPHP_CodeSnifferを使う

# 前提
* IntelliJ IDEA(ULTIMATE 2018.2)
  * 多分PhpStormも似たような感じ?
* Mac
* メモ程度

# やりたいこと
* IntelliJ(ローカル環境)で、PHPコードの静的解析をしたい

# やること
* (まだであれば)Macにcomposerを入れる
* composerでPHP_CodeSnifferをinstall
* IntelliJ側を設定
* おしまい

# composer
さっくりと `brew` でインストールしておきます。

```shell
$ brew install composer
// 入ったかな
$ which composer
/usr/local/bin/composer
// 設定の確認
$ composer global  config --list
[bin-dir] {$vendor-dir}/bin (/Users/me/.composer/vendor/bin)
[home] /Users/me/.composer
```
configをみると、compserが`global` で利用するディレクトリが確認できます。
`.composer/` に composer.jsonなどが生成され、ライブラリなどは `.composer/vendor/bin` に入る、となっていました。


# PHP_CodeSniffer
* [squizlabs/PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer#installation)

## Installation
* GitHubのREADMEの通りcomposerを使ってインストール

```shell
$ composer global require "squizlabs/php_codesniffer=*"

Changed current directory to /Users/me/.composer
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing squizlabs/php_codesniffer (3.3.2): Downloading (100%)
Writing lock file
Generating autoload files

// 入ったかな
$ ls -lah /Users/me/.composer/vendor/bin
phpcbf -> ../squizlabs/php_codesniffer/bin/phpcbf
phpcs -> ../squizlabs/php_codesniffer/bin/phpcs
```
* とりあえず最新を使うようにしてみる(バージョン指定したければご自由に `3.*` など
* 特定のプロジェクトで使う訳ではないので `global` で入れてしまう

# IntelliJ側の設定
Preferenceより、

* `Editor > Inspections > PHP Code Sniffer validation` にチェックを入れる
* `Languages & Frameworks > PHP > Code Sniffer` の Configurationを `Local`、横の`[...]`から先ほどのphpcs本体を指定する
  * /Users/me/.composer/vendor/bin/phpcs
  * 選択Finderで不可視ディレクトリが出ない場合は、選択Finder画面で `Command + Shift + G` をやるとパスを直接入力できるダイアログが出るから便利 ([参考](http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-use-move-to-folder-command-in-a-open-or-save-dialog-in-macos.html))

# 結果
**指摘事項が大量発生して悲しい気持ちになった** :innocent: 

# おまけ
### CakePHPのCodesnifferのルール適用
```shell
$ composer global require "cakephp/cakephp-codesniffer=*"
```
`Editor > Inspections > PHP Code Sniffer validation` の `Coding standard` 欄を 「Custom」とし横の `[...]` から、
`/Users/me/.composer/vendor/cakephp/cakephp-codesniffer/CakePHP/ruleset.xml` のようにruleset.xmlを指定したところCakePHPのルールセットが適用されるようになりました。

# 参考
* 本家のマニュアル
  * https://www.jetbrains.com/help/idea/using-php-code-sniffer-tool.html

Configuring PHP Code Sniffer manually の方を試しました。
IntelliJでComposerの設定をして `Available Packages` から導入する公式おすすめ?のやり方が良いのかもしれませんが特に試していません(IDEを使いこなせていないだけ)

ルールセットはおいおい調整。
メモ程度の記事なので、もし記事内容がおかしかったらご指摘くださいませ。
Object detection実装：anchor regression target生成

この[コミット](https://github.com/festa78/objdet-tf/commit/c5962c96b3611c477d27d0393aa65467fa2bcd20)ではanchorに基づいたobject detectionに必要なanchor targetの生成コードを実装する。

Anchorは画像全体に張り巡らされたbounding boxのテンプレート群で、このanchorに基づいて
object detectionモデルは画像内の物体に対応する真のbounding boxへの相対位置および対応するクラスを推定する。
その際の相対位置・クラスをanchor/regression targetなどと呼び、学習時にラベルとして事前に作成しておく必要がある。

実際にanchor targetを作成するにあたっては、anchorと真のbounding boxとの間のIoUを計算し、
それが一定値を超えるものに対してのみanchor targetを計算する。これをforegroundと呼ぶ。
IoUが一定値超える物がないanchorはbackgroundと呼ばれ、anchor targetは計算されない。
ラベルとしてはこのforeground/background情報もobjectnessという二値ラベルとして設定しておく。
モデルはこのobjectnessも予測する事となる。
Proxyでいろいろ阻まれてしまう人用のメモ


すでに色んな人の記事があるけれども忘れてググることが多いのでメモ

検証環境：Ubuntu18、CentOS7
シェル：Bash

## 【UNIX共通】

wget

/etc/wgetrc

```
https_proxy = http://username:password@your.proxy.address:proxy.port/
http_proxy = http://username:password@your.proxy.address:proxy.port/
```

curl

~/.curlrc

```
proxy-user = "username:password"
proxy = "http://your.proxy.address:proxy.port"
```

git

~/.gitconfig

```
[http]
proxy = http://username:password@your.proxy.address:proxy.port/
```

以下コマンドでもOK

```
$git config --global http://username:password@your.proxy.address:proxy.port/
$git config --global http://username:password@your.proxy.address:proxy.port/
```



## 【Ubuntu】

apt

/etc/apt/apt.conf

```
Acquire::http::proxy "http://username:password@your.proxy.address:proxy.port/";
Acquire::https::proxy "http://username:password@your.proxy.address:proxy.port/";
```

Docker上での設定

例としてCentOSのDockerFileの場合

```
FROM centos:7.2.1511
RUN echo proxy=http://username:password@your.proxy.address:proxy.port/ >> /etc/yum.conf 
```

参考にした記事

[proxy環境下の設定（ubuntu 14.04)](https://qiita.com/showsuzu/items/9ee031208d38ff8ac889)
Processing GenerativeArt入門

![tri.jpeg](https://qiita-image-store.s3.amazonaws.com/0/307039/e4b1ff97-3742-4193-5237-d186d1dc840c.jpeg)

この作品，重要なのは三角形しているけど内側の線はランダムに引かれているところ。
さらによく見ると何層もの三角形が重なっているようになっているところもGood!

ProcessingでGenerativeな作品を作るときに初心者が意識するといいのは

#### 「円や四角形などellipse()やrect()で描ける図形を関数を使って書かない」 

これは，先ほどの作品でもそうだけどGenerativeな作品では
「有機性」や「無秩序さ」をうまく表現することが大切で，ellipse()やrect()を使った図形では
決められた関数に従って同じ図形が機械的に生成されてしまうからである。



ellipse()は，短い直線を繋げたり点を円状に配置すると良いだろう。
こうすることで「有機性」や「無秩序さ」を表現するのに重要な「ランダム」や「ノイズ」を使うことができる。
例えば，ellipse()ではただの円しか描くことはできないが，短い直線を繋いで円を作れば直線にノイズを乗せることができる。



おまけ(今回使用した作品のソースコード)

```noise_triangle
float ang,rad,x,y,radius,centx,centy;
float lastx,lasty;
float r_noise,r_random;
int i;

void setup(){
  size(displayWidth,displayHeight); 
  frameRate(60);
  background(0);
  
  stroke(255);
  strokeWeight(0.01);
  
  ang=0;
  radius=1;
  centx=width/2;
  centy=height/2;
  lastx=lasty=-999;
  i=0;
}

void draw(){
  i++;
  for(;ang<=360;){
    rad=radians(ang);
    radius=noise(random(r_noise))*i/2; 
    x=centx+radius*cos(rad);
    y=centy+radius*sin(rad);
    
    stroke(255,20);
    if(lastx > -999)
    line(lastx,lasty,x,y);
    
    ang+=120;
    r_noise+=1;
    lastx=x;
    lasty=y;
  }
  ang=120;
}
```
機械学習で不正を発見する。機械学習を騙す。

機械学習を実用化するにあたって考えておきたいこと。

#盗作・剽窃
盗作などの文章の剽窃は、機械学習で発見できるかもしれない。
しかし、盗作の基準をそれなりに決めると、機械学習で盗作にならないような文章の作成もできるかもしれない。

写真、画像の剽窃も、機械学習で一定の基準で候補を選び出せるかもしれない。
しかし、盗作の基準をそれなりに決めると、機械学習で盗作にならないような画像の生成ができるかもしれない。
その生成した画像の元データを参考文献として示し、著作権法上の引用、参照等の範囲であれば盗作、剽窃ではないかもしれない。

#機械学習を騙す

機械学習の論理に対して、間違ったデータを提供したり、誤判定しやすくなるデータを提供することにより、機械学習を騙すことができる。

悪意がある場合以外に、間違った処理をした結果もあるかもしれない。

＜この記事は書きかけです。順次追記します。＞
Go言語を真剣に勉強してみた〜Revel（環境構築）編〜

#はじめに
こんにちは。某学校でプログラミング等の勉強中のサーバーサイドのプログラマーのワタタクです。:relaxed:
さて今回は「Go言語を真剣に勉強してみた〜Revel編〜」です。
では、いってみましょう！！
#Revelとは？
- Goのフレームワーク
- ルーティングやテンプレート、セッションといったWebアプリケーションに必要な機能が大体揃っていく。

#環境構築
＊あらかじめGoのインストールはやっておいてください。（バージョン1.6以上）
＊Goのインストールは[こちら](https://qiita.com/watataku/items/c2b25ace1aeaaf0b75c0)を参照して下さい。
##1.Revelのインストール（準備編）
**①GOPATHが通っているかの確認**

```
$ echo $GOPATH
```
＊コマンド叩いても何も出ない場合は②をする。

**②GOPATHの設定**
隠しファイル*「.bashrc」*に以下を追加

```
export GOPATH=ホームディレクトリ/go
export PATH="$PATH:$GOPATH/bin"
```
②を記述した後、再び①のコマンドを叩く。
##2.Revelのインストール
お待たせしました。
いよいよRevelをインストールしていきましょう。
**①インストールのコマンド**

```
$ go get github.com/revel/revel

$ go get github.com/revel/cmd/revel
```
**②プロジェクト作成**

```
$ cd $GOPATH

$ revel new アプリケーション名
```
**③実行**

```
$ revel run アプリケーション名
```
http\://localhost:9000にアクセスする。
![58fff1175b3b51efe56ba051a7acf861.png](https://qiita-image-store.s3.amazonaws.com/0/116696/632c4b07-566d-262c-d952-443e028052f4.png)
以上です。
お疲れ様でした！！
#チュートリアル
ここではコードの解説とRevelの簡単な使い方を解説していきます。

**conf/routesにルーティングを登録。**

```
① GET           ② /          ③ App.Index
```
①アクセス方法
②アクセスルート
③アクセスルートにアクセスした時に実行するメソッド(コントローラー)

```golang:app/controllers/app/app.go
package controllers

import (
	"github.com/revel/revel"
)

type App struct {
	*revel.Controller
}

func (c App) Index(パラメータ データ型) revel.Result {
	return c.Render(テンプレートに送る値)
}
/*
リダイレクト
func (c App) Index() revel.Result {
	return c.Redirect(リダイレクト先)
}
*/
```

```html:テンプレート
{{ .コントローラーから送られた値 }}
```
以上。
もし何か間違っている等のご指摘があればご連絡ください。
最後まで読んで頂きありがとうございました。

次回はRevelを使った様々な実装の方法について書いていきます。
Atomをproxy環境下で使うとstatusCode=407が出る件

Atomの日本語化をしようとしてproxy設定でつまずいた。
ググっても解消方法がなかったので備忘録。

## 問題
proxy環境下だとPackagesの検索でエラーが出る。
ググっても`apm`への設定方法がヒットするが適用しても解消できなかった。

```terminal
Searching for “japanese” failed.Hide output…
tunneling socket could not be established, statusCode=407
```
これを解消する。

## 対応：proxy設定
https://github.com/atom/atom/issues/14866#issuecomment-409477707
ここに書いてる通り、atomの起動引数に`--proxy-server`のオプションを付けて起動したら繋がった。

```terminal
$ atom --proxy-server=http://127.0.0.1:3128
```

`apm`のproxy設定は入れてません。

日本語化できた！

## Automaterでproxy設定付きのapp作成
macだとAutomaterでオプション付きの起動アプリケーションの作成が簡単にできました。
（windowsはショートカットの起動パラメータに入れるだけで行けるっぽい。ぽい。）

こちらの方の記事を参考にちょちょいです。
https://qiita.com/rocca0504/items/63aaec72da88b13f8f51

`シェルスクリプトを実行`でatomの絶対パスを指定。

```termianl
/usr/local/bin/atom --proxy-server=http://127.0.0.1:3128
```

Atomのアイコンの所在。
`/Applications/Atom.app/Contents/Resources/atom.icns`
Vue.js 初心者がなにか作りきってみる（願望）

## なにか作りたい！

仕事だと同じ言語、同じフレームワーク、同じ…

代わり映えしないですよね。



なんとなくやる気になったので、使ったことない言語でなにか作り切ってみようと思います！



## この記事は…

社内向けのブログページなど作ろうと思いました。

空いた時間を使ってコーディングするので長いスパンになるもよう。



なのでこの記事は、今後書き溜めていく記事を纏める **インデックス** 的な位置づけ。

この記事自体に技術的メリットはないけど、似たようなことをしたい人にとってはこの記事からそれぞれの記事に飛ぶと見やすいかも？



（一記事にまとめろって方もいると思うんですけど、私自身あとで見たときにやりたい事ごとに分けられている方が好きなので、この書き方で）



## キーワード

タグにも設定しているけど、次のキーワードに関する実装をしていく予定です。（順不同）

### Vue.js

Vue CLI 3 系を使います。（ちなみに使うの初めて）

### Firebase

Google認証とか使います。（ちなみに使うの初めて）

### PWA

ちょっとやってみたい。書くのはだいぶ先？（ちなみにやるの初めて）

### Yarn

npmとの比較とか書けたらいいけど、ただの使い方かも。（ちなみに使うの初めて）

### Font Awesome

アイコン好きなので随所に散りばめるかも。v5.4.x 系を使うつもり。

### Bootstrap

まあ定番として。v4.x 系を使うつもり。

### Webp

PWAにするので速さ重視で試しに使ってみる。（ちなみに使うの初めて）



## インデックス

リンク先の記事は随時更新していきます。
（2019/1/18 更新しました！）


### 導入編

:link: [Yarn を導入しよう（Windows）](https://qiita.com/kurararara/items/21c70c4adfd3bb323412)

:link: [Vue.js を導入しよう（Windows）](https://qiita.com/kurararara/items/c92f58eee5c09f5aa0fa)

:link: [Font awesome を Vue.js で使ってみよう](https://qiita.com/kurararara/items/d76776a7dc2d763a068b)

:link: [Bootstrap を Vue.js で使ってみよう​](https://qiita.com/kurararara/items/620dd4de798a941099f5)　

:link: [Firebase を Vue.js で使ってみよう](https://qiita.com/kurararara/items/2eb5baeacf5ec83843d6)

急な方向転換で！
:link: [Nuxt.js を導入しよう](https://qiita.com/kurararara/items/9f2fb240a4310f0f562d)

:link:  [Firebase を Nuxt.js で使ってみよう](https://qiita.com/kurararara/items/844abc7b50c5795164df)

2019/1/18:追加！
~~[Sass を Nuxt.js で使ってみよう](https://qiita.com/kurararara/items/76d7e6a195ee6cd638dd)~~

2019/7/26:追加！
`Sass/SCSS` を使いたい場合はこちらの記事のほうがわかりやすいです
[Sass を Nuxt.js で使ってみよう（2019.07版）](https://qiita.com/kurararara/items/e58eb19b99210b655588)

### 実装編

:link: [Firebase の Google 認証を Vue.js（Nuxt.js） で実装してみよう](https://qiita.com/kurararara/items/2845de493e52421e1d7f)

2019/9/20:追加！
:link: [Firebase の Google 認証情報を Vuex で状態管理しよう](https://qiita.com/kurararara/items/dac8d5cd51cd5f1ae632)

:link: WYSIWYG エディターはどれがいい？WYSIWYG エディターを Vue.js で実装してみよう​　



（~~やばい…続き考えてない…~~）



## まとめ

仕事に追われているとなかなか新しいことに挑戦できないと思うんですよ。

自分もそうですし。



でも、まあ、こうやって世に公開して「やるぞ！」と言ってしまえばやれるかな、と。



興味のある方は見てもらえると嬉しいですし、似たように「なにかやってみようかな？」って方は一緒に作ってみましょう！
DNSキャッシュは何層にもわたって保存されている


## 名前解決の順番

1. chrome内キャッシュ
2. ローカルキャッシュ
3. DNSサーバ1
4. DNSサーバ2
5. ...

chromeのキャッシュをいくら消しても、ローカルマシンにキャッシュが残ってる限り、古いipにアクセスする。
ローカルマシンのキャッシュをいくら消しても、問い合わせ先のDNSサーバーがキャッシュを持ってる限り、古いipにアクセスする。

## chrome内キャッシュの消し方

chrome://net-internals/#dns

にアクセス。

"clear host cache" ボタンをクリックで消える。


## ローカルマシンのキャッシュの消し方

*Mac*の場合

```bash
$ sudo killall -HUP mDNSResponder
```

mDNSResponderにSIGHUPシグナルを送るとキャッシュをクリアしてくれる

## DNSキャッシュの残り時間の確認方法

```bash
$ dig hoge.com

...
;; ANSWER SECTION:
hoge.com.	1379	IN	A	42.42.42.42
...
```

digコマンドを打った時の、ANSWER SECTIONの２番目の項目。
上の例だと、残り1379秒。

もう一度digコマンド打つと残り時間が減っているのが確認できて楽しい。


## 応答サーバーの確認

```bash
$ dig hoge.com

...
;; SERVER: 10.7.128.252#53(10.7.128.252)
...
```

digコマンドの応答の、SERVERセクション。
この場合はローカルネット内のdnsに問い合わせしてる。


## Linuxではdnsレコードのローカルキャッシュを持たない。

デフォルトでは何も持たない仕様になってるみたい。
Docker基本まとめ

# Dockerとは

Dockerとは仮想化環境でアプリを管理・実行するためのオープンソースのプラットフォームのことです。

オンプレミスな環境だけでなく、AWSなどのクラウド環境でも動作します。

またDockerは、よく仮想マシンと比較されます。VirtualBoxなどの仮想マシンでは、ホストマシン上でハイパーバイザを利用しゲストOSを動かし、その上でミドルウェアなどを動かします。それに対し、コンテナはホストマシンのカーネルを利用し、プロセスやユーザなどを隔離することで、あたかも別のマシンが動いているかのように動かすことができます。そのため、軽量で高速に起動、停止などが可能です。

# Dockerの必要性

Dockerはどんなときに役に立つのでしょうか？

それは、アプリケーション開発において、複数人で同一アプリを管理したいときや、サービスによって異なるバージョンのライブラリやミドルウェアを用いるときです。

そもそも開発した業務アプリケーションを本番環境で可動させるには、次の要素が必要になります。

- 業務アプリケーションの実行モジュール（プログラム本体）
- ミドルウェアやライブラリ群
- OS / ネットワークなどのインフラ設定

Dockerはこれらの要素を**コンテナ**にまとめて管理します。

開発プロセスにおいて、開発環境やテスト環境で正しく動作しても、本番環境にデプロイすると正常に動かないことがあります。構成や設定が、環境によって異なる可能性があるためです。

Dockerを用いると、すべての環境においてDockerの**コンテナー**と呼ばれるものがアプリケーションの実行に必要なすべてをまとめてくれます。
コンテナーはDockerをインストールしている環境であれば、どこでも動作するため、開発・テスト環境・本番環境のギャップがない状態で動作させることが可能になります。

# Dockerの機能

Dockerには大きく分けて、次の3つの機能があります。

- Dockerイメージの作成
- Dockerコンテナの実行
- Dockerイメージの共有

順を追って説明していきます。

## Dockerイメージの作成
Dockerでは、アプリの実行に必要になるプログラム本体 / ライブラリ / ミドルウェアや、OS、ネットワーク設定などを1つにまとめて**Docker**イメージを作成します。イメージは、Dockerのコマンドを使って作成することもできますが、**Dockerfile**というコードから自動で作ることもできます。
完成したDockerイメージは、実行環境で動くコンテナのもとになります。Dockerイメージの正体は、アプリの実行に必要なファイル群が格納されたフォルダです。Dockerコマンドを使うとイメージをtarファイルに出力できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/121435/6caa6805-c6b1-a0fd-6c46-b11e65f5ea17.png)


## Dockerコンテナの実行
Dockerは、Linux上でコンテナ単位でサーバー機能を動かします。このコンテナのもとになるのが、Dockerイメージです。Dockerイメージさえ存在していれば、Linux上にDockerがインストールされている環境において、どこでもコンテナを動かすことができます。
また一つのDockerイメージから複数のコンテナを起動することもできます。
コンテナの起動 / 停止 / 破棄にはDockerコマンドを使います。

## Dockerイメージの共有
Dockerイメージは、Dockerレジストリで一元管理が可能です。例えば、Docker Hubでは、UbuntuやCentOSなどのLinuxディストリビューションの基本機能を提供するベースイメージが配布されています。これらのベースイメージにミドルウェアやライブラリ / デプロイするアプリなどを入れたイメージを積み重ねることによって、独自のDockerイメージを作っていきます。
【Laravel】Blade上で、配列をdump()するときは、dd()

blade上で配列を`@foreach`で回してその配列の中身の変数を確認したいときは、
foreach()する手前で、dd()で確認しましょう。

LaravelのBlade上で、```{{ dump(['a', 'b']) }}```とすると、
以下エラー発生します。

```
htmlspecialchars() expects parameter 1 to be string, array given (View:ファイル名) 
```

配列を頑張ってエスケープしようとしてるのでエラーになるみたいです。

頑張ってdump()しようとして

```php
@php
   dump(['a', 'b']);
@endphp
``` 

してました。

非常に恥ずかしい記事を書いてしまったが自分の知見になったので良しとする。。
書評：オープンソースデータベース標準教科書 -PostgreSQL-

技術書は気軽に持ち運ぶには分厚くて、気軽に読もうというモチベーションにはなかなかならない
ならデジタル書籍として読んでみるとどうなのか、**折角なので（？）Kindleアプリで**読んでみました

## きっかけ
日々特になんの感情もなくデータベースを触っていたのですが
レスポンスの遅いSQLのチューニングを実施し思っていた以上の成果が出た時に
自分はチューニングがこんなに楽しいと感じられる人だったのか！　と認識したことがありました

その流れで再度データベースについて学ぼうとしていた時に
<a href="http://oss-db.jp/" target="_blank">「オープンソースデータベース技術者認定資格（OSS-DB技術者認定資格）」</a>という資格を知り
そこで無償公開されていたのが
<a href="http://oss-db.jp/ossdbtext/text.shtml" target="_blank">「オープンソースデータベース標準教科書 -PostgreSQL-」</a>
でした

## 内容
PostgreSQLの基礎から各機能紹介、全体の設定やSQLやチューニングと幅広いです
初心者向けのようで、ある程度データベースの知識も必要な内容もあります
概要として説明するならば、ひとまずPostgreSQLを一通り説明している本、となります

## 感想
おまじない的に扱っているデータベース設定等を、きちんと学び直す、見返すという点でとても参考になりました
普段使っているデータベースの設定を確認して、この設定はこういう意図があるのかという発見ができたのも勉強になりました
標準教科書とタイトルにありつつも、内容は初心者向けというわけでもないのでターゲットとしては資格の受験を考えている人になるかと思います
PDF版は無償なので、気になったらとりあえずダウンロードして読んでみるというのでもいいかなと

## 技術書を電子書籍で読むメリット
- 場所を取らない
- 重たくない
- 気軽に読める
- 誤った表記は後々修正される
- 書籍内で文字列検索ができる
- 自由にハイライトが入れられて、いつでもハイライトのページへ遷移できる

気になった箇所を自由にハイライト
<img src="https://qiita-image-store.s3.amazonaws.com/0/45729/7ce57713-c993-d89f-79d2-903bc5ccd22f.jpeg" width="50%">

ハイライト入れるだけ入れて、どこをハイライトしたのか忘れがちなんですが
ハイライトのリストがあるのでとても便利でした
<img src="https://qiita-image-store.s3.amazonaws.com/0/45729/27c2fbae-0ad7-4763-1cf3-130f09b326f3.jpeg" width="50%">



## Kindle版を読んでみて
<img src="https://qiita-image-store.s3.amazonaws.com/0/45729/6c652fef-a47a-1040-6213-9ab38a1a817f.jpeg" width="50%">
iPhone 6S+ のKindleアプリで読み進めていたのですが
ご覧の通りレイアウトが窮屈でぱっと見で何が書かれているのか分かりにくいです
ここがデメリットかなと思いました

実際に読み進めながらデータベースを触ったりもしていたので
窮屈な状態で表示されたSQLを打ち込むのは少し苦労しました
（**なので表示領域の大きなデバイスで読めたらもっと捗ると思いました！**）
localStorage(ローカルストレージ)の保存・更新・削除をしたい

## localStorage概要

localStorage(ローカルストレージ)はブラウザにデータを保存する仕様。
似たようなものにCookieがあるが、文字数制限もなく使い勝手がいい。

色々なデータ型でも使えるように関数にまとめてみました。

```javascript
//Set to LocalStorage
function upDateLocalStorage(key, value, callback) {
  //ローカルストレージがない環境では何もしない
  if(typeof(Storage) === 'undefined'){ alert('Your Browser Not Supportd'); return; }

  var ls = localStorage;

  //登録するデータがオブジェクト(配列含む)なら文字列に変換
  if (Object.prototype.toString.call(value) === '[object Object]'||'[object Array]') {
    value = JSON.stringify(value);
  }

  ls.setItem(key, value);

  //データがlocalStorageに登録された時に発火するイベントを登録することもできる
  if(callback) {
    window.addEventListener('storage', function(e) {
      callback(e);
    });
  }
}

//Get from LocalStorage
function getDataLocalStorage(key) {
  //ローカルストレージがない環境では何もしない
  if(typeof(Storage) === 'undefined'){ alert('Your Browser Not Supportd'); return; }

  var ls = localStorage,
      value = ls.getItem(key);

  if(value === 'true'|| value === 'false') {
    value = !!value //文字列から真偽値に
  } else if (value.match(/[\[|{].*[\]|}]/)) {
    value = JSON.parse(value); //文字列からオブジェクトに
  }

  return value;
}

//clear LocalStorage
localStorage.clear(); //ローカルストレージを空にする
```

使い方↓

```javascript

upDateLocalStorage("student1", "tarou");
getDataLocalStorage("student1");
```
メモ：OpenCVやPillowでの画像読み込み時の注意点

# はじめに
我が家の愛犬の写真を読み込んだ際に、縦長画像の縦横が変わってしまう場合があったので、その原因のメモ。

# 【before】OpenCVとKerasで画像の読み込み

```python
from keras.preprocessing import image
import cv2
%matplotlib inline
import matplotlib.pyplot as plt

# OpenCVで画像読み込み
img_cv2 = cv2.imread('img/terrier.jpg')

# Kerasで画像読み込み
img_keras = image.load_img('img/terria.jpg')
# PIL形式からnumpy配列に変換
img_keras = image.img_to_array(img_keras)

# matplotlibで可視化
fig = plt.figure()
fig.subplots_adjust(left=0, right=1, bottom=0, top=0.5, hspace=0.05, wspace=0.05)

for i in range(2):
    ax = fig.add_subplot(1, 2, i + 1)
    if i == 0:
        # OpenCVのためBGRからRGBに
        ax.imshow(cv2.cvtColor(img_cv2, cv2.COLOR_BGR2RGB))
    elif i == 1:
        # img_to_arrayでfloatになっているためintに
        ax.imshow(img_keras / 255)
plt.show()
```

![qiita_01.png](https://qiita-image-store.s3.amazonaws.com/0/240903/8e74f0cf-d57d-62fe-1d40-08773d8faa76.png)

**あれ？？同じ画像なのに縦横が違う！！！**

# 【after】OpenCVとKerasで画像の読み込み

```python
from keras.preprocessing import image
import cv2
%matplotlib inline
import matplotlib.pyplot as plt

# OpenCVで画像読み込み
# ★変えたのはココ↓
img_cv2 = cv2.imread('img/terria.jpg', cv2.IMREAD_IGNORE_ORIENTATION | cv2.IMREAD_COLOR)

# Kerasで画像読み込み
img_keras = image.load_img('img/terria.jpg')
# PIL形式からnumpy配列に変換
img_keras = image.img_to_array(img_keras)

# matplotlibで可視化
fig = plt.figure()
fig.subplots_adjust(left=0, right=1, bottom=0, top=0.5, hspace=0.05, wspace=0.05)

for i in range(2):
    ax = fig.add_subplot(1, 2, i + 1)
    if i == 0:
        # OpenCVのためBGRからRGBに
        ax.imshow(cv2.cvtColor(img_cv2, cv2.COLOR_BGR2RGB))
    elif i == 1:
        # img_to_arrayでfloatになっているためintに
        ax.imshow(img_keras / 255)
plt.show()
```

![qiita_02.png](https://qiita-image-store.s3.amazonaws.com/0/240903/411271b5-62e4-5ea7-fb2c-17617680b6f9.png)

**おお！同じになった^^**

# 原因
この画像はiPhoneで撮影したもので、画像に埋め込まれている**Orientation属性**によるものでした

OpenCVの場合、当該情報を考慮するのがデフォルトのようで、
imreadに**cv2.IMREAD_IGNORE_ORIENTATION**を指定することで、
この情報を無視することが出来るようです。

撮影時、**iPhoneは縦だったけど、カメラとしては横であった**ということ、すなわちOrientation属性を考慮するか否かで、デフォルトの画像読み込みによって差が出る、ということです。これは、SNSへアップロードした際にも考慮するか否かにより、意図した向きと変わるということにも関係しています。そのあたりの詳細についてはここでは言及しません。
ちなみに、私が意図していたのは縦なので、撮影する際は注意ですね。

# さいごに
撮影した画像からデータセットを作成して機械学習する際、回転を考慮すべき学習データの場合、Orientation属性を考慮するか否かが大事な場面がありそうです。
が、回転を考慮すべき文字認識などで、学習データとなる手書き文字をカメラで撮影して。。。なんてことはしないと思うので、そこまで気にする必要はないかも。

＜参考＞
[stack overflow Image Orientation (python + openCV)](https://stackoverflow.com/questions/44537075/image-orientation-pythonopencv)
[OpenCV Image file reading and writing](https://docs.opencv.org/3.3.0/d4/da8/group__imgcodecs.html#gga61d9b0126a3e57d9277ac48327799c80a34f91a514cd95127d8ba900840af548e)
Azure Functionでproject.json のパッケージ読み込みが行わないときは、バージョンが違うかもしれない

# 状況
以前、作成したAzure functionを違うところでも使うために、新しいAzure functionを立ててソースをアップしました。
その際に、project.json で、パッケージの読み込みない問題が発生しました。

project.jsonをアップしてもパッケージが読み込がおこなわれず、project.lock.jsonも生成されません。
Azure functionを実行してもライブラリがないため失敗してしまいます。

# TL; DR;

* Azure functionバージョン2からは、project.jsonを使えないので、バージョン１を使用するか、2系に書き換える必要がある
* バージョン１への変更は、プラットフォーム機能 -> Function App の設定 -> ランタイム バージョン
* 登録関数を、一度全部消さないとバージョンの変更ができなさそう


# 動かない理由

https://blogs.msdn.microsoft.com/cjaliaga/2018/01/21/installing-nuget-packages-in-azure-functions-2-x-runtime-preview/

どうやら、2.0からproject.jsonが廃止されXML形式のfunction.projになるようです。

project.jsonを2.0に合うように変更する方法もあるようです。
https://docs.microsoft.com/ja-jp/dotnet/core/tools/project-json-to-csproj


# 実行したこと
今回はサーバの移植のため、TL; DR;にある流れでサーバを1系に変更して対応しました。


以上です。
EgretEngieのDisplayObjectの表示順番の変え方


こちらの記事[EgretEngineで超簡単なゲームを作ってみよう(4) 障害物の実装と各種カプセル化](https://qiita.com/motoyasu-yamada/items/6963428cb3ba5ffc7a64)では

```ts
const shape = new egret.Shape();
shape.graphics.beginFill(0xff0000);
shape.graphics.drawCircle(0, 0, GameWorld.meterToPixel(BALL_SIZE_METER / 2 ));
shape.graphics.endFill();

this.stage.addChild(shape);       
```

オブジェクトの表示にegret.DisplayObjectを使い、メイン画面(egret.DisplayObjectContainer)に`addChild`して表示をさせています。

表示順番は、追加した順に画面の背後から前面に積みあがっていきます。つまり最後にaddChildしたものが最上位に表示されます。

この表示順を変更するにはどうしたらいいのか？Egret EngineのDeveloper CenterのSampleを見てみます。

http://developer.egret.com/cn/example/egret2d/index.html#010-disp-basic

```ts
        /*** 以下代码三个按钮添加监听事件 ***/
        upBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            /*** 本示例关键代码段开始 ***/
            this.setChildIndex(upBird, this.numChildren - 1);
            /*** 本示例关键代码段结束 ***/
        }, this );      
```

もしオブジェクトを一番全面に表示したい場合は、`<親のDisplayObjectContainer>.setChildIndex(<対象となるDisplayObject>, <表示位置>);`となります。

APIドキュメントでいうと[こちら](http://developer.egret.com/cn/apidoc/index/name/egret.DisplayObjectContainer#setChildIndex)のページ


> ## setChildIndex () method
> `Public setChildIndex( child:egret.DisplayObject,index:number ):void`
> 対応バージョン:Egret 2.4
> 対応ランタイム:Web,Native
> DisplyObjectContainerに存在する子DisplayObjectの表示位置を変える。他の子オブジェクトの表示位置にも影響を与える。
> 
> ### パラメータ
> `Child:egret.DisplayObject` 表示順を変えたい子オブジェクト
> `Index` number 0より小さいか存在する子の数より大きい数を指定した場合は、最上位に表示されます。
>
> ### 関連メソッド
> - addChildAt()
> - getChildAt()
ファイル単位でシンタックスを変更したりスペースを変更する方法

# 概要
認識しない拡張子に出会ったり、スペースを4→2に変更した場合にどうするかの内容です。

# 一言で

```
<!-- vim:set ts=2 sw=2 ft=html: -->
```

モードラインを使う。

# 解決策
モードラインというファイルに設定を書ける機能があります。

```
<!-- vim:set ts=2 sw=2 ft=html: -->
```

コメント内に`vim:set`をスペース区切り[^1]で、設定を書いていきます。終わったら`:`で閉じます。



[^1]: `:`でも区切れたり、`set`を省略できたり色々方法はありますが割愛します。



# サンプル
```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

    </body>
</html>
<!-- vim:set ts=2 sw=2 ft=html: -->
```

# 詳しくは
`:h vim:`に書いてあります。紛らわしいことに、`:h :vim`もあるので注意してください。

## ヘルプにも書いています。
なにもかも忘れた場合は、ヘルプの下を見るといいです。

```
 vim:tw=78:ts=8:ft=help:norl:
```
[Laravel] リダイレクトしたときにエラーメッセージの表示とページ内リンクもする

```php:web.php内
if($users > 0) {
  return redirect()->route("company_detail", ["id" => $id, '#delete'])
          ->with('error', '削除されていない社員が存在するため、この企業は削除できません。');
}
```

```index.blade.php
<h3 id="delete">削除操作</h3>
...
@if (session('error'))
  <p class="text-danger mt-3">
    {{ session('error') }}
  </p>
@endif
```
RailsのControllerのActionでreturn render :hoge

Railsを習い始めてから、当初覚えた `render :hoge and return` で Double Renderrer 例外を出さない書き方をずっと使い続けていたが、PRのレビューで `return render :hoge` が簡潔で読みやすいのでは無いかという指摘をもらって、ふと気になったので挙動を調べてみる

## ActionController::Base
https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/base.rb

RailsのControllerで必ず継承される親クラスから

https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/base.rb#L159
コメント行で、「処理を中断させるなら `and return` を使いましょう」と書いてあるが、redirect_toの場合の例しかない

https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/base.rb#L206
renderに関するクラスをincludeするために列挙されている

## AbstractController::Rendering
https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/rendering.rb
render の処理は書いてあるが、Controller#Actionの返り値を判断するクラスではなさそう

ActionController::Baseに戻る

## またActionController::Base
https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/base.rb#L239
Callback関連がありそうなので見てみる

## ActionController::Callback
https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/callbacks.rb

around_actionあたりに期待したが、返り値に関する処理は特になかった

ActionController::Baseに戻る

## またまたActionController::Base
https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/base.rb#L166
ActionController::BaseはMetalを継承している

## ActionController::Metal
https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal.rb

https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal.rb#L191
processメソッドが怪しい
Metalクラスにはprocessメソッドが実装されていないので、親クラスを探る

## AbstractController::Base
https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/base.rb
このクラスは継承がないのでActionControllerの大元っぽい
https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/base.rb#L127
processメソッド発見

https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/base.rb#L136
process_actionが怪しい

https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/base.rb#L195
send_actionを呼んでいる

https://github.com/rails/rails/blob/master/actionpack/lib/abstract_controller/base.rb#L204
sendをsend_actionにaliasしているので、send_actionはsend

ってことはsend_actionの返り値を判断して処理を行なっているか確認すればいい

今までの流れを遡る

* AbstractController::Base#process_actionはsend_actionをそのまま返している
* AbstractController::Base#process は process_actionをそのまま返している
* ActionController::Metal#dispatch は process を呼んで、返り値を求めていない

## まとめ
render の返り値に応じたActionControllerの挙動は特に定義されていないことがわかった
`render :hoge and return` でも `return render :hoge` でも挙動に変化はない

ただ、`render` した結果を `return` するように見えるので、コードレビューをする際に挙動に変化がないことのコンセンサスが必要に感じた
[NUXT] 複数のURLで同じコンポーネントを表示させる

例として

- post/1
- post/2
- post/3

の3つともに同じコンポーネントを使いたい場合の方法。

### コンポーネントの作成
`pages/post/_id.vue` をつくる。

`_` をつけるのがミソ。
`_` のあとの名前（今回はid）は、あとで変数として取りたい時に使いたい名前にしておくとよい。

これだけで、 上記3つのURL全てで `pages/post/_id.vue` が表示されるようになる。

### URLで使用されているパラメータは $route.params.id で取れる。

```post/_id.vue
<template>
    <div>
        <div class="title">記事タイトル</div>
        <p>このページのidは{{$route.params.id}}です</p>
    </div>
</template>
```

ブラウザ↓
![Screen Shot 2018-10-09 at 17.05.35.png](https://qiita-image-store.s3.amazonaws.com/0/109241/03eef068-0e4a-80f7-3d18-9c23fbf7be18.png)
ファン・ダン・ラーン(FDL)ふりかえりボード

![17f8179eec49ae9d7583b1bf3be08414[1].jpg](https://qiita-image-store.s3.amazonaws.com/0/17131/2588f5dd-6c66-1c5c-0df6-b8be98752aac.jpeg)

ふりかえりで使える手法としてKPTやYWTなどがありますが、新しくファン・ダン・ラーン(Fun/Done/Learn)というアプローチを作ったので紹介します。チームがやったことを、Fun、Done(またはDeliver)、Learnという3つの軸とその重複で見直します。上の図のように、Fun、Done(Deliver)、Learnのを重ね合わせた図をボード上に書いて、そこに分類していきます。


この図を見れば、経験のあるファシリテーターやスクラムマスターなら自分なりのやり方が思いつくのではないでしょうか。ぜひ自由に使ってみてください。以下では、私たちが実際に試してみた方法を紹介します。

1. まずホワイトボードや模造紙に、上のFun/Done/Learnの図を描く。重なり合う領域が狭くなりすぎないよう気をつけること
2. メンバー1人ひとりで、やったことを付箋に書き出す
3. 付箋の内容を共有して会話しながら、図上の当てはまる領域に付箋を貼っていく。
    - 付箋を書いた人ではなく、他のメンバーが貼り付ける領域を選ぶようにすると面白いです
    - 例: 「みんなでゲームで遊んだ」→ 楽しかったのでFunの円の上半分(他と重ならない部分)に貼る
    - 例: 「モブプロでスキルを共有したが進みは遅かった」 → モブプロでモチベーションが上がったのでFun、スキル共有したのでLearn、Doneにはつながらなかったので、FunとLearnの重なる右中央の領域に貼る
    - 例: 「新たにVue.jsで機能を実現できた」→ やって楽しかったし、Vue.jsを学べたし、機能をリリース(提供)できたので、Fun/Deliver/Learnの重なる中央部分に貼る
4. 次にスプリントやプロジェクト全体としてどうだったか、当てはまると思う領域に1人ずつ選ぶ(シールを貼ったり、ペンで印をつけたりするとよい)。スプリントならスプリント全体、プロジェクトならプロジェクト全体についての評価をする
5. ボードを眺めながら、次のスプリントやプロジェクトではどの領域を狙いたいか話をする

進める中で、LearnやDeliverとはどういう意味なのか、疑問が出てきたり、人によって捉え方が違っていたりするかもしれません。チームとして議論して認識をそろえていくよいタイミングになります。逆に、それぞれの意味をあまり細かく定義したり、一方的に説明しない方が、ふりかえりとしての効果が高まるようです。

![](https://i.gyazo.com/thumb/1000/f3c228ea84b911ff9eecd7bedd3b9beb-jpg.jpg)
![](https://i.gyazo.com/thumb/1000/a2755d9b7203260ca53c461ae9166e14-jpg.jpg)

FDLは[Scrum Coaches Retreat in Okinawa](https://www.scrumalliance.org/courses-events/events/coaches-retreats/2018/scrum-coaching-retreat-okinawa/home)でのアウトプットとなります。一緒に開発したチームA(Team Almost Done)のみなさん、ありがとうございました！他の参加者のみなさんも(特に実験台になってくれたチームB)、ありがとうございます。

Team Almost Done(順不同)

- HIDE
- indare
- JB
- Tee
- yattom
- YesNo