OmniAICreator/Qiita-1.07M huggingface dataset:
NuxtのESLintのエラー対応

Nuxt.jsのバージョン2が出たので早速使ってみましたが、公式のテンプレートでエラーが出るようになったので対応しました。

## 環境
Nuxt.js 2.1.0

## 作業

公式のスターターテンプレートを使います

```
$ vue init nuxt-community/starter-template my-site 
```

```
$ cd my-site
```

パッケージをインストール

```
$ yarn
```

サーバーを立ち上げ

```
$ yarn dev
```

```
 ERROR  Failed to compile with 1 errors                                                                                                             12:31:57 AM

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (/Users/m1ul24/projects/my-works/my-site/node_modules/eslint-loader/index.js:148:18)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
```

するとここでエラーになりました。
どうやらeslint周りでのエラーのようです。

下記のように設定を変えてサーバーを立ち上げ直したら動きました。
(ソースの記事わからなくなってしまいましたが感謝です...！)

```
$ vim nuxt.config.js
```

```js:nuxt.config.js
build: {
    /*
    ** Run ESLint on save
    */
    extend(config) {
      if (process.server && process.browser) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
```

```
$ yarn dev
```

## 追記

プルリクエストが上がっていました。こちらの方が良さそうです。
https://github.com/nuxt-community/starter-template/pull/83

```js:nuxt.config.js
// ここを
- extend (config, { isDev, isClient }) {
- if (isDev && isClient) {

// こう修正
+ extend (config, { isDev }) {
+   if (isDev && process.isClient) {
```

@okapon_pon さん教えていただいてありがとうございます。
Surface pro 5 について個人的まとめ

# はじめに
## 経緯
新しいオモチャを購入したので、触ってみた感じをまとめました。

## surface pro 5 とは
Microsoft社から発売されたタブレット端末。モバイル性を重視している為、キーボードやマウスといった標準デバイスは別売りとなっている。

![4017541_ja_2.png](https://qiita-image-store.s3.amazonaws.com/0/184939/9a861185-f76f-cf79-b482-f708f7a63cc9.png)

## 評価したモデル
私が購入したのはm5よりちょっとだけ性能が高いi5モデルです。

||||
|:-:|:-:|:-:|
|CPU| Intel Core i5-7300 @2.60Ghz 2.7GHz  2コア|★★☆☆☆|
|RAM| 8.00GB|★★★☆☆|
|Storage| 128GB (実行容量 117.90 GB) |★★☆☆☆|
|GPU| Intel HD Graphics 620 |★★☆☆☆|
|価格| ￥129,380-|★★☆☆☆|

# 所感
いきなりまとめに入りますが...期待通りの投資効果を得るのは難しいと思われます。
コストパフォーマンスはあまりよくありません。

## Surfaceペン

![4036712_ja_2.png](https://qiita-image-store.s3.amazonaws.com/0/184939/1a022156-d6bc-18c2-60b8-144607acb547.png)

Windows Inkで制御されるためソフトウェアレイテンシーが激減しているが、CPUとGPUに描画性能が大きく左右される。Surface BookやSurface Studioなど、それなりに高性能なGPUが積まれたBTO+Wacomタブレットのほうがまだ軍配が上がるかもしれません。
比較対象にするべきか迷いましたが、ペンスタイラスを主とした使い方をしたいのであればiPad ProとApple Pencilの組み合わせのほうが良いと思います。

> 参考元
> http://ascii.jp/elem/000/001/227/1227535/

## Surfaceドック

![4017475_ja_2[1].png](https://qiita-image-store.s3.amazonaws.com/0/184939/d77beb88-2de0-5372-f1e5-26c6cdd11f4a.png)

Surface Proを拡張するデスクトップ オプション。持ち歩こうなんて考えてはいけない。
でかい。重い。
Surface Pro と接続するケーブル1本でSurface ドックのすべての拡張ポートが使用でき、電源まで提供してくれる優れもの...と思いきや、SurfaceConnectケーブルは1mもありません(仕様記載なし)。USBハブの凄い版程度の性能。USBタイプCにしなかったのはApple社を意識したのか？ケーブルは延長もできないため、USB3.0 Hubを使ったほうが適切な人もいるかもしれません。


# その他

## キーボードについて
主な利用は文書作成やコーディングなどに使用したいと思っている為、Lenovo社のトラックポイント付きキーボードを購入。純正のSurfaceタイプカバーの購入も検討したが、次のものがそこまでメリットに感じなかった為、採用しなかった。

1. Surface Proの下部コネクタと接続することでタイプカバーから文字入力、操作が出来る。
2. 値段が￥12,000とお高い
 
電車の中など。移動中にしっかりとしたキーボード操作を行えるデバイスを選定したいというユーザはSurface Bookのほうを選んだほうがいい。

![tp_compactbt_kb_0b47189_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/184939/e695ba65-809d-9ffa-e193-003113bad4b7.jpeg)

## マウスについて
キーボードにトラックポイントがついている為、マウスは購入しなかった。


# カスタマイズ


## Blueetoothデバイスが勝手に無応答にならないようにする

"デバイスマネージャー"にて、"Marvell AVASTAR Bluetooth Radio Adapter"の"電源の管理"を変更。
電力の節約のために、コンピューターでこのデバイスの電源をオフにできるようにするを無効にする

![SnapCrab_Marvell AVASTAR Bluetooth Radio Adapterのプロパティ_2018-10-10_20-47-41_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/184939/7beb95c7-f193-5244-b962-6e68b6b0b011.png)



# 参考

- Microsoft Surface Pro 4 紹介
https://support.microsoft.com/ja-jp/help/4023446/surface-surface-pro-4-features

- Surface penの使い方
https://support.microsoft.com/ja-jp/help/4036281/surface-how-to-use-your-surface-pen

- Lenovo ThinkPad Bluetooth trakpoint Keyboard
https://support.lenovo.com/jp/ja/solutions/pd026744

- Surface ドック
https://www.microsoft.com/ja-jp/p/surface-ドック/8qrh2npz0s0p?activetab=pivot%3aoverviewtab
javaの例外処理での疑問 throwとtry-catch

Javaをやっていて疑問に思ったので、記録としてメモ　( ..)φ

3階層で処理をするプログラムを考えるとき、

一番下の改装で発生したExceptionを一番上の階層でcatchするときは、

真ん中の階層で上の階層にthrowしないといけないと思っていたが、


![図1.png](https://qiita-image-store.s3.amazonaws.com/0/146328/978d38f9-110b-8073-e934-4670e9d74b65.png)


その必要はなかったみたい、、、、


実は下の図のようにしても行けるみたい


![図2.png](https://qiita-image-store.s3.amazonaws.com/0/146328/d8b4eaaa-4358-69ba-9289-2278d7e368ab.png)



誰でも知ってることだと思うが、、、へーとなったので


具体的には、3層クライアントシステムで、

プレゼンテーション層で色々なエラー処理をする場合、アプリケーション層はデータ層で発生したエラーを
throwしなくても良い？というものでした。
gitでファイルサイズが大きくてプッシュ出来なかったときのメモ

# きっかけ
とある日にこんな質問をされました
> gitでプッシュ出来ないんです・・・

コンソールに出たメッセージを見ると、どうやらファイルサイズが大きすぎるのが原因というのがわかった。
ちなみにローカルリポジトリにコミットが２０個くらい溜まってました:sweat_smile:

そのときに行った対策を記録として残そうと思った。

# 対策
最初に、自分の頭にはこの解決策が思い浮かびました。

## 分割してプッシュする

コミットの、ハッシュ値を利用してプッシュする方法です。下記のようなコマンドになります。

```
git push origin （ハッシュ値）:（ブランチ名）
```

これなら一つのコミットだけをプッシュ出来ます。これを使って細かくプッシュしていけば解決出来ると思っていました。
実際に、いくつかのコミット分はプッシュ出来たみたいです。

## 問題発生

> １コミットのファイルサイズが大きくて、プッシュ出来ません・・・

一体どんなファイルをそこでコミットしたのか問だたしたいですが、それは置いといて。
この場合、コミットををやり直して、もっと細かい単位でステージングしてコミットする必要があります。

## git reset で前の状態に一旦戻す

下記のようなコマンドで、一旦前の状態に戻します。

```
git reset (戻りたい位置のコミットハッシュ値)
```

オプションはつけていないので、デフォルトの`--mixed`が適用されます。
この場合、コミットとインデックスはその時の状態に戻りますが、ワーキングツリーはそのままです。
つまり、`git add`でステージングする前になる訳です。

ちなみに、`--hard`だとワーキングツリーも戻るので私が怒られます :innocent: 
`--soft`だとインデックスがもどらないので、ステージングをやり直すことが出来ません。
なので今回はデフォルトの`--mixed`を使用しました。

#　結果
なんとか細かい単位でステージング、コミットし直すことでプッシュ出来たようです。よかったです。:relaxed:

本当はもっとスマートがやり方があるのかも知れません。良い方法があれば、ご教授よろしくお願いいたします。:bow:
Tweepyで20万人のフォロワーに埋もれた友達をさがす

友だちがTwitterをはじめたというのでアカウントを訊いたら「フォロワーが20万人いる某アカウントをフォローした」というヒントしかもらえなかったのでPythonで探すついでの備忘録。

###スペック

- Windows10
- Python 3.6.5

#TwitterAPIとTweepyを準備
##TwitterAPIの準備
正直なところAPI使うのは初めてで合ってるのかわからないです。
[https://developer.twitter.com/](https://developer.twitter.com/)
ここから認証したりいろいろして、ようやく新しいアプリを作る段階に。
詳しいやり方は[<ここ>](http://dotnsf.blog.jp/archives/1044796238.html)みてください。
なんやかんやで

- API key
- API secret key
- Access token
- Access token secret

の4つを取得。

##tweepyの準備
どうも調べたところPythonのライブラリであるTweepyを使うとフォロワーを一気に取得出来たりできなかったりするらしい。
コマンドプロンプトから早速Tweepyをインストール

```
$ pip install tweepy
$ python
$ import tweepy
```

で、何もエラーが出ないのでインストールができた模様

#Pythonでプログラミング
フォロワーのID/名前/フォロー数/フォロワー数/登録日時/自己紹介をCSVで出力

```findMyFriend.py
import tweepy
import csv

target_id = "フォロワー数20万人の某アカウント"

CONSUMER_KEY = "取得したAPI key"
CONSUMER_SECRET = "取得したAPI secret key"
ACCESS_TOKEN = "取得したAccess token"
ACCESS_TOKEN_SECRET = "取得したAccess token secret"
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth.set_access_token(ACCESS_TOKEN, ACCESS_TOKEN_SECRET)
api = tweepy.API(auth ,wait_on_rate_limit = True)

followers_ids = tweepy.Cursor(api.followers_ids, id = target_id, cursor = -1).items()
followers_ids_list = []
for followers_id in followers_ids:
    followers_ids_list.append(followers_id)



with open('CSVファイル名', 'a', newline="", encoding='utf-8_sig') as f:
    writer = csv.writer(f)
    for followerId in followers_ids_list:
        followers_detail = []
        user = api.get_user(followerId)
        userid = user.screen_name
        username = user.name
        friend_num = str(user.friends_count)
        follower_num = str(user.followers_count)
        start_date = str(user.created_at)
        descript = user.description
        # recent_tweet = api.user_timeline(followerId)[0].text
        followers_detail.extend([userid, username, friend_num, follower_num, start_date, descript])
        writer.writerow(followers_detail)
```

ほぼコピペでいけると思います。
target_idのところにフォロワーを調べたいアカウントの@マーク以降を入れて、あとはAPI keyなどを入れればO.K.です。
CSVファイル名のところは

```
'C:\\Users\\hogehoge\\Desktop\\fuga.csv'
```

という感じになります。

コメントアウトされてるrecent_tweetは対象フォロワーが全員非鍵アカウントの場合のみ問題なく使えます。

##既知の、そして、どうしたらいいかわからない不具合
対話シェルでこれをコピペして実行する分には動くんですが、コマンドプロンプトからpyファイルを実行しようとするとimportがうまくいかないって怒られるんですよねぇ……

##既知の、そして、どうとでもなる不具合
凍結されたアカウントにぶち当たるとエラーで止まりました。
なんとでもなりそうなので放置します。
#結果
CSVファイルの登録日時の並べ替えで新しいほうから見ていったらあっさり見つかりました。
Laradock開発環境構築

Laradockを使って開発環境の構築を初めてしたので備忘。

#環境
・MacBook Pro
・macOS High Sierra
・apache2
・phpmyadmin
・mariadb

#Laradockクローン
ルートディレクトリにて、下記を実行。

```
$ git clone https://github.com/LaraDock/laradock.git
```

.envをenv-exampleからコピーして作成。

```
$ cd laradock
$ cp env-example .env
```

#プロジェクト作成
まずは、ワークスペースを起動。

```
$ cd laradock
$ docker-compose up -d workspace
```

ワークスペースに入る。

```
$ docker-compose exec workspace bash
```

Laravelのプロジェクトを作成

```
# composer create-project laravel/laravel new_project
```

dockerを一旦終了

```
# exit
$ docker-compose down
```

`laradock/.env`のpathを作成したプロジェクトに変更。
今回は`mariadb`を使用するので、phpmyadminの`PMA_DB_ENGINE`も変更。

```
# Point to the path of your applications code on your host
APP_CODE_PATH_HOST=../new_project

# Accepted values: mariadb - mysql
PMA_DB_ENGINE=mariadb
```

#apache2の設定変更
ハマったところ。

apache2を使用するので、`laradock/apache2/sites/default.apache.conf`を変更。

```
ServerName localhost
DocumentRoot /var/www/public/
Options Indexes FollowSymLinks

<Directory "/var/www/public/">
```
dockerにてコンテナを起動。

```
$ docker-compose up -d mariadb apache2 phpmyadmin
```

`localhost`にアクセス。

![screencapture-localhost-2018-10-05-00_21_24.png](https://qiita-image-store.s3.amazonaws.com/0/283300/1d09f19a-2b0a-25a5-d179-5656f7239d25.png)

phpmyadminは`localhost:8080`へ。
![screencapture-localhost-8080-sql-php-2018-10-05-00_25_20.png](https://qiita-image-store.s3.amazonaws.com/0/283300/b9e2fec0-c5fc-67af-332c-c3fa3f0faee1.png)


**Enjoy Laravel!!**

#DBの作成
※後日追記※
supervisorで複数のワーカが起動しないときに確認すること

supervisorで複数のワーカを起動させる場合`numprocs`を指定するかと思います。

```
[program:worker-example]
process_name=%(program_name)s_%(process_num)02d
command=php /path/to/artisan --env=production queue:work --sleep=5 --timeout=600 --tries=1 --daemon
autostart=true
autorestart=true
user=example
numprocs=8    # ★★★これ！
```

指定しているのにワーカが複数で起動しない、
並列なはずなのに並列じゃない、
そんな場合はsupervisorのバージョンが2系であることが原因である可能性が高いです。

yumでインストールする場合、epelからインストールするのですが、
epelのものはバージョンが2.1.9でした。
アンインストールして `easy_install supervisor` でインストールしたら3系のものがインストールされました。

世のsupervisorの記事がバージョンが3前提になっているものも多く、
もしsupervisor周りで思った動作をしないようであれば、「2系だから」というのを疑ってみたほうがいいかもしれません。
abc 056

B
シカのAtCoDeerくんは縦の長さ 1、横の長さ W の形をした長方形が二つ机に置いてあるのを見つけました。 机を二次元平面とみなすと、以下の図のように、一つ目の長方形は 縦は [0,1] の範囲を、横は [a,a+W] の範囲を占めており、二つ目の長方形は縦は [1,2] の範囲を、横は [b,b+W] の範囲を占めています。

AtCoDeerくんは二つ目の長方形を横に動かすことで、一つ目の長方形と連結にしようと考えました。 長方形を横に動かさないといけない距離の最小値を求めてください。

```
#include<iostream>
using namespace std;
int main() {
	int W, a, b;
	cin >> W >> a >> b;
	if (a + W < b)
		cout << b - a - W << endl;
	else if (b + W < a)
		cout << a - b - W << endl;
	else
		cout << 0 << endl;
	return 0;
}
```
たまにこういうアホみたいな問題あるよな

C
無限に左右に伸びている数直線上の 0 の地点に時刻 0 にカンガルーがいます。 カンガルーは時刻 i−1 から i にかけて、なにもしないか、もしくは長さがちょうど i のジャンプを、左右どちらかの方向を選んで行えます。 つまり、時刻 i−1 に座標 x にいたとすると、時刻 i には x−i, x, x+i のどれかに存在することが出来ます。 カンガルーの家は座標 X にあります。カンガルーはできるだけ早く座標 X まで移動しようとしています。 カンガルーが座標 X に到着する時刻の最小値を求めてください。
制約
X は整数
1≦X≦10

```
#include<iostream>
using namespace std;
int main() {
	long long X;
	cin >> X;
	long long sum = 0;
	for (long long i = 1; i <= X; ++i) {
		sum += i;
		if (sum >= X) {
			cout << i << endl;
			return 0;
		}
	}
}
```
AWS Loft Tokyo Developer Technology Night聴講メモ(2018/10/04 )

# 要旨
2018/10/04 に開催されたAWS Loftの公開セミナー「**[Developer Technology Night - Tokyo 201810](https://developertechnologynighttokyo2.splashthat.com/)**」を聴講したので内容のポイント、感想を書いてみたいと思います。

##### セミナー概要
- 日時：2018/10/04 19:00～21:00
- 場所：東京都目黒 AWS Loft Tokyo
- 内容：AWSの開発者向けサービスの紹介
- 参加者数：パッと見40～60名程度

##### アジェンダ
- セッション#1 AWSの開発者向けサービス全体像（講師：　AWS 塚田朗弘 氏）
- セッション#2 デモで見るAWS AppSync,AWS Amplify プログラミング（AWS 塚越啓介 氏）

# セッション#1 AWSの開発者向けサービス全体像
- （資料は公開されたらURL記載します）
- AWSの開発者サービスの体系及び注目サービスの紹介と、講師（塚田氏）が推しのAWSサービスの紹介
- 開発者サービスでは、**AppSync**と**Amplify**が今回の目玉

##### [AppSync](https://aws.amazon.com/jp/appsync/)
- **GraphQLベースのアプリを迅速に作るサービス**
- 選択できるバックエンドは柔軟 → Dynamo、ElasticSearch、Lambda、HTTP
- LambdaとHTTPが使えるので、やろうと思えばなんでもできる？
- CognitoやIAMと統合してアクセスコントロール可。

##### [Amplify](https://github.com/aws-amplify/amplify-js)
- **JavaScriptでクラウドの機能に触りに行くようなウェブやモバイルアプリを簡単に構築するための仕組み**
- 「認証」や「API呼び出し」などのユースケースを指定してクラウド上のリソースおよびフロント用のコードを生成してくれる
- 講師曰く「**開発技術の転換**」
- 実態はNode.js製の開発ツールで、コマンドやコンソールで操作する
- 裏でCloudFormation用のTemplateが作られて、それが実行されてリソースができるらしい

##### [Amazon Pinpoint](https://aws.amazon.com/jp/pinpoint/)
- 講師の推しサービス
- 顧客へのプッシュ通知と行動分析ツール
    - プッシュ通知は、属性で送信先をしぼったり、頻度などをコントロールした通知ができる
    - 行動分析は、ファンネル分析などをリアルタイムでできる（らしい）

#### [Chalice](https://github.com/aws/chalice)
- 講師推しのツール
- API Gateway＋LambdaのPythonアプリを簡単に構築できるフレームワーク
- 「非常に直感的」とのこと

# セッション#2 デモで見るAWS AppSync,AWS Amplify プログラミング
##### デモ内容
- [ここのQiitaの投稿に書かれているAmplifyによるアプリ構築](https://qiita.com/ktsukago/items/1fd66a95420b631595a3)をデモで実演
- 「認証制御付きのDynamoに対する入出力機能を持ったGraphQLベースのサーバレスアプリ」を**わずか40分程度**（それも口頭説明挟みながら）で構築！
- CLIで対話形式で数回コマンドをたたくだけで、目的に応じたクラウド上のDynamoとかAppSyncが作られた
- フロント側はコンソール上に出るコードをコピペ＆少し変更して作成

##### デモ所感
- デモがめまぐるしくて自分の理解があんまり追い付いていないところ多々あったので、今度Amplifyを触ってみようと思った
- CI/CDに成果物を組み込むなど、きちっとした開発をする場合はAmplifyだけでは難しいと思う。ただし、「**とりあえずたたき作る**」「**自己学習用に動くモノが一式ほしい**」というケースでは、有用である印象を受けた。
- フロント側の認証UIを機能として提供してくれるのはうれしい。Cognitoの認証回りはjavascriptで実装するとき煩雑なので。。。

# 全体的な所感
- ホットな技術情報をAWSエンジニアからタイムリーに聞けて有用だった
- 紹介されたサービスが自分の仕事で有用であるかは別にして、**新しい技術に触れるときのハードルを低くしてくれる印象**
- AWS Loftでは、今後も継続して[機械学習やAmazon Payなどで面白い＆ためになるセッション](https://aws.amazon.com/jp/start-ups/loft/tokyo/)を開催してくれるそうです。
- AWS Loftはオシャレでした。あと、夜景がキレイでした。

さいごに、本編とは関係ありませんが、本記事が人生初Qiitaなので、不作法や不備あればこそっと教えていただけるとありがたいです。。。

以上
さくらのレンタルサーバーにGit環境を構築してみる

## 前提条件

- アカウントがtestuser
- ウェブ公開ディレクトリ（ドキュメントルート）が/home/アカウント名/www/

とする。

また、最安のライトプランではssh接続できないので対象外となります。

サーバー情報の詳細はコチラ
https://help.sakura.ad.jp/hc/ja/articles/206053142--%E3%81%95%E3%81%8F%E3%82%89%E3%81%AE%E3%83%AC%E3%83%B3%E3%82%BF%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90-%E5%9F%BA%E6%9C%AC%E4%BB%95%E6%A7%98

## ローカルリポジトリの作成

任意のディレクトリでテストというフォルダを作成する

```
mkdir test
cd test
```

ローカルリポジトリの作成

```
git init
touch hello.php
vi hello.php
```

ファイル内容を編集する。

```
<?php
echo 'Hello Sakura Server!';
```

コミットする。

```
git add hello.php
git commit -m 'first commit'
```


## レンタルサーバーにSSHでアクセスする
```
ssh testuser@testuser.sakura.ne.jp
// パスワードが求められるので入力
testuser@testuser.sakura.ne.jp's password:＊＊＊＊＊＊＊＊＊
```

ユーザー名のフォルダの下にgitフォルダを作成

```
pwd
/home/testuser
mkdir git
cd git
```

リモートリポジトリの作成

```
git init --bare /home/junpeko/git/test.git
Initialized empty Git repository in /home/testuser/git/test.git/
```

## ローカル環境から、リモートの登録を行う

```
pwd
/任意のフォルダ/test

git remote add origin ssh://testuser@testuser.sakura.ne.jp/home/testuser/git/test.git
```

## リモートの確認
```
git remote
origin
```
OK!

## リモートにpushする

```
git push origin master
testuser@testuser.sakura.ne.jp's password: 
```

## リモートからさくらレンタルサーバーの公開用リポジトリを作成

```
cd www
pwd
/home/testuser/www
mkdir test
cd test
git init
Initialized empty Git repository in /home/testuser/www/test/.git/
```

## リモートリポジトリを登録する
```
% git remote add origin /home/testuser/git/test.git
% git remote
origin
```

## 登録したリモートリポジトリよりpullする。

```
% git pull origin master
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (3/3), done.
From /home/junpeko/git/test
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/master
```

## URLでアクセスして確認
<ドメイン>/test/hello.phpにアクセス
![hello_php-2-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/166768/fdb94c88-6b8e-aba1-2184-c337e36cba72.jpeg)



完了です:ok_hand:
UnrealEngineエディタで「LIGHTING NEEDS TO BE REBUILT」が表示された場合の対応

##原因
確認したところ、オブジェクトを移動して配置を変えたり、追加した時に
標題のメッセージが赤字でレベルのビューポート内に表示される模様。

##解決策
オブジェクトを移動した後の状態のレベルに対し、再度ライティング計算を
しないといけない。
作業は以下の通り。
（画像は私のローカル環境での再現です。アンリアルエディタのバージョンは4.20）

1. 以下のように、レベルにエラーメッセージが表示されていることを確認
<img width="586" alt="スクリーンショット 2018-10-04 21.41.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/98966/7551f9b8-6c37-cdec-720a-0741cdaba8f5.png">

2. ツールバーから「全レベルをビルド」を選択（表示されていない場合は＞＞を選択して表示）
<img width="291" alt="スクリーンショット 2018-10-04 21.49.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/98966/13b21573-ee40-da14-b0c0-87bb4ffd9668.png">

    または、「ビルドオプション」＞「ライティングのみをビルド」を選択
    <img width="526" alt="スクリーンショット 2018-10-04 21.50.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/98966/4bec1d0b-d336-f4d1-11c4-f9146c78c7a7.png">

3. 以下のように、「ライティングのビルドが完了しました」と表示されたらOK
<img width="440" alt="スクリーンショット 2018-10-04 21.50.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/98966/69ac021c-6943-7db0-59e5-847df5a308c7.png">

##参考元
https://answers.unrealengine.com/questions/441303/lighting-needs-to-be-rebuilt%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6.html
assets:precompileする対象のファイル名・パスを変更する方法

assets/配下のファイルを圧縮して１つのファイルにするとき、だいたいは `assets/stylesheets/application.css` とかにマニフェストファイル置きますよね。デフォルトでそうなっているはずです。

ただ、管理画面とフロント側で呼び出すスタイルを分けたいなんてことあると思います。自分がそうでした。イメージとしては以下のような感じです。

```:assets/
📂stylesheets
  📂admin_style
    📄admin.scss
  📂front_style
    📄front.scss
```

これを実現するには、いくつかassets:precompile周りの設定をいじらなくてはいけません。今回はその方法を紹介します。

# config/initializers/assets.rbに任意のファイル名を追記する

まずは、コンパイルしたいファイルパスをassets:precompile対象に追記します。このとき、追記するパスは、 `app/assets/stylesheets/` からの相対パスです。

```ruby:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(
  front_style/front.css # くれぐれも先頭に / をつけないでください。
  admin_style/admin.css # くれぐれも先頭に / をつけないでください。
  …
)
```

もし、パス名が合っているか不安な場合は、以下を実行して確認してみてください。

```ruby
pry(main)> Rails.application.assets.resolve("追加したいパス名")
# "/directory/app/assets/stylesheets/追加したいパス名"
```

なお、このとき指定するファイルの拡張子が.scssであっても、.cssと書いてください。これはコンパイル後に期待する拡張子（.css）を書くべきだからです。

※ [4.1 アセットをプリコンパイルする](https://railsguides.jp/asset_pipeline.html#%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%82%92%E3%83%97%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B) 参照
> プリコンパイル配列にSassやCoffeeScriptファイルなどを追加する場合にも、必ず.jsや.cssで終わるファイル名 (つまりコンパイル後のファイル名として期待されているファイル名) も指定してください。

# assets:precompileを実行する
config/environments/development.rbで、 `config.assets.debug = true` にしている場合は不要かもしれませんが、念のため、手元で実行してみてもいいと思います。

```ruby:config/environments/development.rb
Rails.application.configure do
  config.assets.debug = false
end
```

実行した結果、 `public/assets/` 以下にちゃんと配置されていればOKです。されていない場合はなにかパスとか間違っているかもしれません。

なお、プリコンしたファイルをview側で呼び出すときも、少し変更が必要です。 プロジェクトによりますが、 `application.html.erb(slim)` のheadタグ内でスタイルを呼び出しているところをいじります。

```slim:application.html.slim
= stylesheet_link_tag "application"
↓
= stylesheet_link_tag "front_style/front"
```

管理画面側も同じ変更をすればOKかと思います。
WordPress の画像を S3 にアップロードして、CloudFlare 経由で配信する

# やりたかったこと

-   EC2 + RDS を使って WordPress を構築する
-   EC2 は ALB 配下にいる
-   WordPress のメディア機能からアップロードした画像を S3 に配置する
-   CloudFlare を経由して S3 の画像を表示させ、キャッシュもさせる

# やったこと

[Cloudflare Setup for Amazon S3](https://deliciousbrains.com/wp-offload-media/doc/cloudflare-setup/) を見ながら設定

# 環境

-   ドメイン管理：お名前.com
-   ネームサーバ and CDN：CloudFlare（Plan: Free Website）
-   サーバ環境
    -   CentOS 7.5
    -   PHP 7.2 （[Packages - IUS](https://ius.io/)）
    -   WordPress 4.9.8
        -   プラグイン： [WP Offload Media Lite for Amazon S3 and DigitalOcean Spaces](https://ja.wordpress.org/plugins/amazon-s3-and-cloudfront/) バージョン 2.0


# やったこと

## 1.  CloudFlare のネームサーバにドメインの設定をする

-   Type: CNAME
    -   ALB の DNS 名を指定したいので、CloudFlare の [CNAME Flattening](https://support.cloudflare.com/hc/en-us/articles/200169056-CNAME-Flattening-RFC-compliant-support-for-CNAME-at-the-root) を使用
-   Name: 対象ドメイン名（xxx.com など)
-   Value: ALB の DNS 名（xxx-alb-xxx.ap-northeast-1.elb.amazonaws.com  など）
-   TTL: Automatic
-   Status: DNS and HTTP proxy

## 2.  サイト表示確認

ブラウザから xxx.com にアクセスして WordPress のトップページが表示されること

## 3.  AWS S3 バケット作成

-   バケット名は画像用の CMANE と同じ名前にすること
    -   例. image.xxx.com など
-   パブリックアクセスの読み取りが行えるようにしておくこと

## 4.  仮想ホスト形式の URL でバケットへのアクセス確認

https://バケット名.s3-ap-northeast-1.amazonaws.com

## 5.  CloudFlare のネームサーバに画像用のドメインの設定をする

-   Type: CNAME
-   Name: 画像用ドメイン名（バケット名)
-   Value: バケットの仮想ホスト形式の URL （バケット名.s3-ap-northeast-1.amazonaws.com）
-   TTL: Automatic
-   Status: DNS and HTTP proxy

## 6.  WP Offload Media 設定

-   Provider: Amazon S3
-   Bucket: 画像用ドメイン名（バケット名)
-   Copy Files to Bucket: ON
-   Path: 任意のディレクトリ
-   Year/Month: ON
-   Object Versioning: ON
-   Rewrite Media URLs: ON
-   CustomDomain(CNAME): 画像用ドメイン名（バケット名)
-   Force HTTPS: ON

## 7.  CloudFlare の SSL 設定
Crypto → SSL → Full

## 8.  キャッシュ確認
Chrome のデベロッパーツールなどで画像のレスポンスヘッダに「cf-cache-status: HIT」が出力されていれば OK
Zabbix 4.0をインストールしてみた(Cent7 + PostgreSQL)

ひとまずzabbix4を触ってみたかったので、最小限の設定で行いました。

※参考：公式ドキュメント
https://www.zabbix.com/documentation/4.0/manual/installation/install_from_packages/rhel_centos

#構成
OS : CentOS Linux release 7.5.1804
DB : psql (PostgreSQL) 9.2.24
Zabbix : zabbix 4.0.0

#OS設定
まずは最新化

```
yum update
```

適用させるために再起動

```
reboot
```

今回はセキュリティ面は全て無視するために、firewallとSELinuxをOFF

```
systemctl stop firewalld
systemctl disable firewalld
```

```
vi /etc/selinux/config
 SELINUX=enforcing ⇒ SELINUX=disable
```

設定を反映させるために再起動

```
reboot
```

#Zabbixインストール

リポジトリの登録

```
rpm -ivh https://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zabbix-release-4.0-1.el7.noarch.rpm
```
パッケージインストール

```
yum install zabbix-server-pgsql zabbix-web-japanese
```

#PostgreSQL
インストール

```
yum install postgresql-server 
```

データベースの初期化

```
postgresql-setup initdb
```

PostgreSQLの起動

```
systemctl start postgresql
systemctl enable postgresql
```

ZabbixからDBアクセスするためのユーザーを作成

```
sudo -u postgres createuser --pwprompt zabbix
```

DBを作成

```
sudo -u postgres createdb -O zabbix -E Unicode -T template0 zabbix
```

PostgreSQLへのアクセス設定を行う

```
vi /var/lib/pgsql/data/pg_hba.conf

コメントアウトされていない箇所のpeerとidentをtrustに修正し、以下のようにする

# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                    trust
# IPv4 local connections:
host    all             all             127.0.0.1/32           trust
# IPv6 local connections:
host    all             all             ::1/128                trust
# Allow replication connections from localhost, by a user with the
# replication privilege.
#local   replication     postgres                                peer
#host    replication     postgres        127.0.0.1/32            ident
#host    replication     postgres        ::1/128                 ident
```

設定反映のために再起動

```
systemctl restart postgresql
```

初期スキーマ、データをインポート

```
zcat /usr/share/doc/zabbix-server-pgsql*/create.sql.gz | sudo -u zabbix psql zabbix
```

#Zabbix設定ファイル更新

```
vi /etc/zabbix/zabbix_server.conf

以下2つを設定
DBPassword=password(DBユーザーのパスワード)
DBPort=5432
```

#PHP timezone設定
Zabbixインストール時に、timezoneが設定されていないとNGとなってしまうため、設定する

```
vi /etc/php.ini

;date.timezone =
⇒date.timezone = Asia/Tokyo
```

#起動設定されていないものを設定

```
systemctl start zabbix-server
systemctl enable zabbix-server
systemctl start httpd
systemctl enable httpd
```

#Webコンソールにアクセス

http://IPアドレス/zabbix/
にアクセス

設定項目は、上記で設定した内容を入力すればよい
Database port : 5432
Database name : zabbix
Database schema : 空欄
User : zabbix
Password : zabbixユーザーのパスワード

Admin/zabbixでログイン可能に
Laravel：カラムを追加する



すでにあるテーブル（migrationファイル）にカラムを追加して`php artisan migrate`しても良いが、そうするとロールバックする時に down()で テーブル自体がなくなってしまいます。

なので、新しいmigrationファイルを作って編集していきます。

##① migrationファイルを作る

```
php artisan make:migration add_user_id_to_posts_table --table=posts
```

補足

既存のテーブルに変更を加える場合には、`--create オプション`ではなく、`--table オプション`を使って、テーブル名を指定します。




##② migrationファイルを編集

up() にはカラムの追加を、
down() はこの処理を巻き戻す処理を書きます。

```diff:add_user_id_to_posts_table.php

    public function up()
    {
        Schema::table('posts', function (Blueprint $table) {
+            $table->string('summary');  //カラム追加
        });
    }


    public function down()
    {
        Schema::table('posts', function (Blueprint $table) {
+           $table->dropColumn('summary');  //カラムの削除
        });
    }
```


###③ migrationする

```
php artisan migrate
```


###★ 確認

現在適用されているmigrationファイルの確認

```
php artisan migrate:status
```

あと、MySQLでも確認する。

```sql
DESC posts;
```

もしこの変更を取り消したい場合はロールバック

```
php artisan migrate:rollback --step=1
```

もしロールバックでエラーが出たら

```
php composer.phar dump-autoload
```
Laravel：リレーション


リレーションの設定

記事とユーザーを紐付けます。

- 記事の一覧を表示した時に、投稿者を表示できる
- 投稿者のマイページで自分の投稿した記事だけを表示できる
- ユーザーが削除された時に紐付く記事を消すことができる

# Model にリレーションを追加する

##▶ User.php
```php:app/User.php

    /**
     * リレーション（1対多）
     *
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function posts() // 複数形
    {
        return $this->hasMany('App\Post');
    }
```

##▶ Post.php

```php:app/Post.php

    /**
     * リレーション (従属)
     *
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function user() // 単数形
    {
        return $this->belongsTo('App\User');
    }
```



# 外部キー制約をつける

ユーザーの情報が削除されたら、それに紐付くpostの情報も一緒に削除するようにします。

- postテーブルに user_id というカラムを追加する
ここに記事の作成者のidを格納するようにします。

- 追加カラムに外部キー制約をつける
外部キー制約とは、テーブルの特定カラムについて格納できる値を他のテーブルに格納されている値だけに限定するものです。

##▶ マイグレーションファイルを修正する

create_posts_table.php を修正します。

```diff:database/migrations/2017_05_22_041557_create_posts_table.php
     public function up()
     {
         Schema::create('posts', function (Blueprint $table) {
             (中略)
+            $table->integer('user_id')->unsigned(); //カラム追加
+            
+            $table->foreign('user_id') //外部キー制約
+                  ->references('id')->on('users') //ｕｓｅｒｓテーブルのidを参照する
+                  ->onDelete('cascade');  //ユーザーが削除されたら紐付くpostsも削除
         });
     }
```


##▶ Seederにuser_idを追加

すでにSeederを作ってあるので、これも修正します。

```diff:database/seeds/PostsTableSeeder.php
     DB::table('posts')->insert([
         (中略)
+        'user_id' => $faker->numberBetween(1, 20),
     ]);
```

##▶ マイグレーション実行

```
php artisan migrate:refresh --seed
```

うまくいったらMySQLも確認ね

```sql
SELECT * FROM posts;
```




# Viewを直す

##▶ posts側

```html:記事の一覧ページ（resources/views/posts/index.blade.php）
<a href="{{ url('users/' . $post->user->id) }}">
    {{ $post->user->name }}
</a>
```

```html:記事1件(resources/views/posts/show.blade.php)
<a href="{{ url('users/' . $post->user->id) }}">
    {{ $post->user->name }}
</a>
```

##▶ users側
Excelグラフの線だけをPowerPointに貼り付ける

1. Excelでグラフを作る。
2. PowerPointのホームタブの一番左の貼り付けをプルダウンして、形式を選択して貼り付けを選択する。
3. 図（拡張メタファイル）を選択して、"OK"
4. 貼り付けた図のグループ解除しようとすると、Microsoft Office 描画オブジェクトに変換するか問われるので、"はい"をクリックする。
5. もう一度、グループ解除する。
6. 必要な線を抽出して、残りは削除する。
Array.fromなど、一定のブラウザで動かない関数をサクッとwebpackでトランスパイルする

ちょっとしたjsを作って他所に提供する必要がある時って……まぁ、無くはないですよね。
そんな時、各種ブラウザ対応とか、polyfilしてしまうと提供先で中途半端に独自に実装していたりして機能がぶつかったらどうしようとか、考えなくてもいい心配があるので変換するものじゃないといけないなとか、色々とめんどくさいんですよッ！


こんなことで毎回頭を使っていられないので、備忘録もかねてサクッと実行できるwebpackを用意してみました。次からはこの記事をコピろう。

# 制作物ッ！
https://github.com/fumihiko-hidaka/babel-array-from

# トランスパイルしたいソースッ！

```index.js
const foo = () => {
  console.log(Array.from([1, 2, 3]));
};

foo();
```

とってもシンプルです！

# webpackによるトランスパイルの設定ッ！

```webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [
  {
    entry: {
      app: [
        './src/index.js',
      ],
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules\/.*/,
          loader: 'babel-loader',
          query: {
            'presets': [
              '@babel/preset-env'
            ],
            'plugins': [
              [
                '@babel/plugin-transform-runtime',
                {
                  'corejs': 2,
                  'helpers': true,
                  'regenerator': true,
                  'useESModules': false
                }
              ]
            ],
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: `${__dirname}/src/index.html`,
        hash: true,
      }),
    ],
  },
];
```

# いざ実行ッ！

```bash
# developmentとしてjsを生成
yarn build

# productionとしてjsを生成　jsがminify化されたりする
yarn build:production
```
アルゴリズムの練習と称していろいろな言語でフィボナッチ数列を表示してみる

pythonのコードを書き始めて半年くらいが経ち、アルゴリズムを考えるのにも慣れてきたのでフィボナッチ数列のコードを書いてTwitterで呟いたところ高校のOBの先輩から
「フィボナッチは研修とか試験によく出るからいろんな言語で書けるようにしておくと捗る。」
との助言をいただいたのでpython以外の言語でも表示してみようと思いその過程で言語ごとの特徴などを発見していこうと思いました。

**表示方法**
フィボナッチ数列に関しての説明は割愛　知らない人はググって（丸投げ
表示する数列は[1,1]から始まるものとし、数値を入力し、2以下なら[1,1]と表示。2以上なら入力された数値ぶんの数列[1,1,~~,n]を出力。

**python**

```python:001.py
l = [1,1]
i = int(input("数列の長さを入力してください"))
if i < 2:
    print(l)
else:
    for f in range(2,i):
        l.append(l[f-1]+l[f-2])
    print(l)
```

他の言語に比べても配列関係が書きやすい気がする。

***Java***

```java:001.java
import java.io.InputStreamReader;
import java.util.Scanner;

public class _main_ {
    public static void main(String[] args){
        int n1 =1;
        int n2 =1;
        int n3;
        System.out.print("求めたい数列の長さを入力してください\n");
        Scanner scanner = new Scanner(System.in);
        int a = scanner.nextInt();
        if (2 < a){
            System.out.print(n1+" "+n2+" ");
            for(int x=2;x<a;x++){
                n3= n1 + n2;
                System.out.print(n3+" ");
                n1 = n2;
                n2 = n3;
            }
        }
    }
}
```

javaに関しては勉強不足なので多分ガバガバです。
方法としてはn1とn2を足したn3を出力した後それぞれの数字を入れ替えてます。

***C++***

```c++:001.cpp
#include <stdio.h>
int main(void) {

	int x = 2;
	int  i[255] = { 1, 1 };
	printf("求めたい数列の数を入力してください");
	scanf_s("%d", &x);
	if (x < 3) {
		printf("%d %d", i[0], i[1]);
	}
	else if (255 < x)
		printf("規定以上の数値が入力されました");
	else
	{
		for (int n = 2; n < x; n++) {
			i[n] = i[n - 2] + i[n - 1];
		}
		for (int v = 0; v < (sizeof(i) / sizeof(i[0]))-1; v++) {

			if (i[v] != 0)
				printf("%d ", i[v]);
			else
				break;
		}
	}
	return 0;
}
```

こちらはpythonのやり方をベースに組んでみたのですがc++には配列の長さを最初から決めないといけない制約があるので結構悩まされました。
一応最大値を入力された数値に合わせる方法を試してみたのですがうまくいかなかったので断念しました。

***書いてみてわかったこと***
・pythonはほかの言語に比べるとやっぱ楽

・C++で変数で配列の最大値を決めれる方法がわかればもう少し楽に書ける気がする。

・今後はちょっと触り始めてみたjavascript juliaなど様々な言語でも書けるようにしていきたい。

・C++やjavaのコードはもっともっと楽に欠ける方法があると思うので勉強してコードの質を高めていきたい
macでLaravelでmysql8を使う (mysql8の認証プラグインの変更) 

Laravelでデフォルトのｍｙｓｑｌ８を使うと認証プラグインのパスワード暗号化の違いからマイグレーションでエラーになるらしい。

そうならないためにあらかじめ認証プラグインを変更しておこう。

### mysql8の認証プラグインの変更

Server version: 8.0.12 Homebrew

```bash
$ mysql -uroot -p

# 現状のプラグインを確認する

mysql> select user, host, plugin from mysql.user;

+------------------+-----------+-----------------------+
| user             | host      | plugin                |
+------------------+-----------+-----------------------+
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | caching_sha2_password |
+------------------+-----------+-----------------------+
4 rows in set (0.00 sec)

# プラグインを変更する
# caching_sha2_password から mysql_native_password に変更する

mysql> ALTER USER 'root'@'localhost' 
IDENTIFIED WITH mysql_native_password 
BY 'hogefugapiyoPassWord';
Query OK, 0 rows affected (0.20 sec)

# 変更できたかを確認する

mysql> select user, host, plugin from mysql.user;
+------------------+-----------+-----------------------+
| user             | host      | plugin                |
+------------------+-----------+-----------------------+
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | mysql_native_password |
+------------------+-----------+-----------------------+
4 rows in set (0.00 sec)

# デフォルトでプラグインをよしなにするためにmy.cnfを変更しておく
# my.cnfを探す

$ mysql --help | grep my.cnf
      order of preference, my.cnf, $MYSQL_TCP_PORT,
/etc/my.cnf /etc/mysql/my.cnf /usr/local/etc/my.cnf ~/.my.cnf

$ sudo vim /etc/my.cnf

# 以下を追記する

[mysqld]
default-authentication-plugin = mysql_native_password

# 再起動する
$ mysql.server restart
```

[MYSQL8.0におけるデフォルトの認証プラグインの変更]
(http://variable.jp/2018/02/23/mysql8-0%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E8%AA%8D%E8%A8%BC%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E5%A4%89%E6%9B%B4/)


[my.cnfの場所を調べる]
(https://qiita.com/is0me/items/12629e3602ebb27c26a4)


[Mac での MySQL セットアップ]
(https://qiita.com/itooww/items/13055c8bb1d226ee5844)

[MySQL8.0 認証方式を変更する]
(https://qiita.com/ucan-lab/items/3ae911b7e13287a5b917)
macにmysql8を入れる

```bash
$ brew install mysql

$ brew services start mysql

# パスを通す
$ echo 'export PATH="/usr/local/opt/mysql/bin:$PATH"' >> ~/.bashrc

# 設定反映
$ source ~/.bashrc
```

### mysql セキュリティ設定
```bash
$ mysql_secure_installation

# パスワードを設定しますか？
Would you like to setup VALIDATE PASSWORD component?

Press y|Y for Yes, any other key for No: y


# パスワードの強度はどうしますか？
There are three levels of password validation policy:

LOW    Length >= 8
MEDIUM Length >= 8, numeric, mixed case, and special characters
STRONG Length >= 8, numeric, mixed case, special characters and dictionary                  file

Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG: 0
Please set the password for root here.

New password:

Re-enter new password:

# パスワードの強度は50です
Estimated strength of the password: 50

# 提供されたパスワードを続行しますか？
Do you wish to continue with the password provided?(Press y|Y for Yes, any other key for No) : y
By default, a MySQL installation has an anonymous user,
allowing anyone to log into MySQL without having to have
a user account created for them. This is intended only for
testing, and to make the installation go a bit smoother.
You should remove them before moving into a production
environment.

# 　匿名ユーザを削除します？
匿名ユーザ ユーザ名なし、パスワードなしでログインできるユーザ、セキュリティ上好ましくない
Remove anonymous users? (Press y|Y for Yes, any other key for No) : y
Success.


Normally, root should only be allowed to connect from
'localhost'. This ensures that someone cannot guess at
the root password from the network.

# リモートからrootユーザのログインを不可にしますか？
Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y
Success.

By default, MySQL comes with a database named 'test' that
anyone can access. This is also intended only for testing,
and should be removed before moving into a production
environment.

# testDBを削除しますか？
Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y
 - Dropping test database...
Success.

 - Removing privileges on test database...
Success.

Reloading the privilege tables will ensure that all changes
made so far will take effect immediately.

# 今、変更を適用しますか？
Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y
Success.

All done!

$ mysql -uroot -p
# passwordを聞かれるので入力
# ログインできることを確認

$ mysql -uroot -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 12
Server version: 8.0.12 Homebrew

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>
```
Mac へ MySQL を Homebrew でインストールする手順
https://qiita.com/hkusu/items/cda3e8461e7a46ecf25d
macでPHP環境を作る

事前準備として、xcodeをappストアからインストールしておく。


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

### check
$ brew -v
```

[Homebrew]
(https://brew.sh/index_ja.html)

```bash
$ brew install composer

$ composer -v
```
																																																							
```bash
$ brew install php

$ brew services start php

# terminal restart
```
指につけるキーボードTap の仕組みと使用感


#Tapについて
下記サイトを見てもらうと大体わかると思います。
[Tapの公式ページ](https://www.tapwithus.com/)
[Tapの紹介ページ](https://bouncy.news/25261)

指につけてキーボードの代わりとして使うことのできる、次世代？キーボードデバイスです！
ついでにマウス機能も付いていて、マウスの代わりとしても使えます。    

指につけるとこんな感じに！
![B4C120C9-E994-4B11-8B3E-2AC6C4B4D285.jpeg](https://qiita-image-store.s3.amazonaws.com/0/285567/e8dbc35c-1257-8a2a-bba0-ab43f7e664cf.jpeg)



#諸注意
今のところ分かってることを書いています。まだまだ調べていないことだらけなので、変更などが多々あると思います。ご了承ください。

#どういう仕組みなのか
どの指が地面と接地したかというのは各指につけているセンサーで振動を感知しているらしい。
なので、指を接地したかどうかは取れるが、接地しているかどうかは取れない。

Unity、IOS、AndroidへのSDKが公式から出ている。
[公式SDK](https://www.tapwithus.com/developers-sdk/)
SDKの中身は見た感じはよくわからなかった...。

#Tapでできること
・約30種類くらいのコマンドを打てる。（アルファベットやスペース、！など）
![E0FF2BE4-4AED-4FA5-BDDA-0B5A328C32A5.jpeg](https://qiita-image-store.s3.amazonaws.com/0/285567/22d8a6d7-bc4d-0c9f-43d5-7532154aa386.jpeg)
中にはこのように普段しない指の組み合わせなどがあり、結構しんどいです。
![4187FC4F-A678-4979-BC9D-9ACD90384E24.jpeg](https://qiita-image-store.s3.amazonaws.com/0/285567/6e01e04d-c851-85b5-db6a-35f98fb3ca94.jpeg)

・UnityのInput.GetKeyDown(KeyCode.何か);のコマンドでTAPの入力を取れる。
・スマホのアプリで設定を変えれば、マウスとしても利用可能。マウス時は人差し指が左クリック、中指が右クリックなのを確認。
・同じく設定を変えれば、マウス＆キーボードも選べる。親指横のセンサーで地面を感知＆センサー下の部分に触れていたらマウス判定？

#何に使えるのか
・30種類のショートカットを利用することができる。
・どの指を使用しているかというのを取れる。
→人差し指でノックする、という動作をちゃんと人差し指でしているのを確認できる。

#使ってみて思ったこと
約30種類のアルファベットや記号を入力するのに、独自のパターンを使うため、覚えるのが一苦労・・・。しかし、専用アプリもあり、歌やアニメーションを交えて教えてくれるので結構面白かった。

今のところだと、キーボードとして使うのは無理があるので、補助的なツールとして使うのがいいかと思われる。
もしくは、何かのイベントを起こすための動作としてキーボード入力の代わりに使うなど。
間違ってマイグレーションしてしまった。やりなおしたい。

マイグレーションファイルを作って編集する前にマイグレーションしてしまった。

まずい。

やりおなしたい。

そんなときはこれをたたく。

直近でやったマイグレーションをなかったことにできる。

```bash
php artisan migrate:rollback
```

参考サイト

Laravel 5.5 データベース：マイグレーション
https://readouble.com/laravel/5.5/ja/migrations.html#rolling-back-migrations
Google謹製Chrome操作ライブラリPuppeteerを使ってみた

# Puppeteerとは

GoogleChromeが提供しているChrome操作できるNode.jsライブラリ。

[GoogleChrome/puppeteer: Headless Chrome Node API](https://github.com/GoogleChrome/puppeteer)

デフォルトはヘッドレスブラウザだが、設定で解除できる。

puppet(操り人形)のように、Chromeを操作。



# install

```bash
$ node -v
v10.11.0

$ npm i puppeteer

$ npm ls puppeteer
...
└── puppeteer@1.8.0
```

# screenshotを取得

```js
// screen_shot.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();
```
```bash
node screen_shot.js
```
## 結果
![screenshot_example.png](https://qiita-image-store.s3.amazonaws.com/0/210660/e1d0d2e1-2379-3f66-7397-da023b9badc0.png)


# ウェブ画面のPDFを生成

```js
// create_pdf.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'create_pdf_sample.pdf', format: 'A4'});

  await browser.close();
})();
```

```bash
node create_pdf.js
```

## 結果
<img width="1228" alt="Screen Shot 2018-10-04 at 23.13.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/210660/23b8863f-2b5d-f961-3939-5d3889b12d23.png">





# GitHubログイン

```js
// ログイン情報を書いたファイルを準備
// $ cat creds.js
module.exports = {
    username: 'USERNAME',
    password: 'PASSWORD'
}
```

```js
// ログイン処理本体
// $ cat github_login.js
const puppeteer = require('puppeteer');

(async () => {

  const browser = await puppeteer.launch({
    headless: false // 今回はあえてヘッドレスを解除して起動
  });
  const page = await browser.newPage();
  await page.goto('https://github.com/login');

  // github.com DOM要素セレクタ
  const USERNAME_SELECTOR = '#login_field';
  const PASSWORD_SELECTOR = '#password';
  const BUTTON_SELECTOR = '#login > form > div.auth-form-body.mt-3 > input.btn.btn-primary.btn-block';

  // ログイン情報の読み込み
  const CREDS = require('./creds');

  // セレクタをクリックして、ログイン情報をタイプ入力
  await page.click(USERNAME_SELECTOR);
  await page.keyboard.type(CREDS.username);

  await page.click(PASSWORD_SELECTOR);
  await page.keyboard.type(CREDS.password);

  // ログインボタンをクリック
  await page.click(BUTTON_SELECTOR);

  await page.waitForNavigation();

})();
```

```bash
// ファイルを実行するとChromeが起動して処理を実行。
node github_login.js
```

## コマンド実行後の画面動作
![Kapture 2018-10-04 at 23.04.24.gif](https://qiita-image-store.s3.amazonaws.com/0/210660/2f789039-c996-3c84-df48-3a3e76fde31b.gif)


# 参照
その他サンプルが多数以下に掲載されているので参考になる。
[checkly/puppeteer\-examples: Puppeteer example scripts for running Headless Chrome from Node\. Run them at https://puppeteersandbox\.com](https://github.com/checkly/puppeteer-examples)
Spring bootでCaffeineを使用してみる

## 経緯

- Spring-bootを使ったwebアプリケーションで、Cacheを使用する必要が出てきた際に調べたことを簡単にまとめる

## 調べたこと
Spring-bootの公式で紹介しているCacheの方法は複数ある模様。
その中でも、Caffeineが導入コストが低そうである。

## 検証
実際に使ってみないとパフォーマンスがわからなかったので動かしてみることにした。

### 用意したもの

- IntelliJ IDEA
- JAVA 1.8
- Spring-boot(2系)

### まずgradleに設定を追加してみる

```java:build.gradle
compile(org.springframework.boot:spring-boot-starter-cache)
compile(com.github.ben-manes.caffeine:caffeine)
```

### 次にconfigクラスを作る

```java:CacheConfig.java
import org.springframework.cache.annotation.EnableCaching;
import org.springframework.context.annotation.Configuration;


@Configuration
@EnableCaching
public class CacheConfig {
}
````

#### cacheをかけたいクラスに設定を追加する

````java:HistoryService.java
@Service
public class HistoryService {

    @Cacheable("HistoryCache")    
    public String getHistories(String name, OffsetDateTime date) {
        // 過去データの取得
    }

````

#### あとはymlで設定をいじる

````application.yml
spring:
  cache:
    cache-names: HistoryCache
    caffeine:
      spec: maximumSize=100, expireAfterWrite=60s

````

#### 上記の設定で動いているのかわからなかったので、、、

````java:HistoryService.java
@Service
public class HistoryService {

    @Cacheable("HistoryCache")
    @Slf4j
    public String getHistories(String name, OffsetDateTime date) {
        
        long start = System.currentTimeMillis();
        
        //処理内容は省略

        // ログをだす
        long end = System.currentTimeMillis();
        log.info("cache is not used. exec time was : " end - start  + "ms");
    }

````

#### 実行結果

- 1回目はログが吐かれたことを確認
- 1回目から30秒後に2回目を実行したところログが吐かれないことを確認
- 3回目は1回目から65秒後に実行したところログが吐かれたことを確認


#### ymlの設定を変えてみる
````application.yml
spring:
  cache:
    cache-names: HistoryCache
    caffeine:
      spec: maximumSize=100, expireAfterAccess=60s
````

#### 実行結果

- 1回目はログが吐かれたことを確認
- 1回目から30秒後に2回目を実行したところログが吐かれないことを確認
- 3回目は2回目から55秒後に実行したところログが吐かれないことを確認

#### 追記(2018/11/02)
- 　同一クラス内のメソッドを呼び出してる場合だと、キャッシュがそもそも効かないっぽいので、別のサービスとして切り出してあげる必要がありそう
- 　下記を参照してください

````java:HistoryService.java
@Service
public class HistoryService {

    public void hogehoge() {
    // 途中省略

        //ここで同一クラス内を呼び出してるんでキャッシュが効かないっぽい
        String hogehoge = getHistories("太郎","20181102");

} 

    @Cacheable("HistoryCache")
    @Slf4j
    public String getHistories(String name, OffsetDateTime date) {
        
        long start = System.currentTimeMillis();
        
        //処理内容は省略

        // ログをだす
        long end = System.currentTimeMillis();
        log.info("cache is not used. exec time was : " end - start  + "ms");
    }

````

###設定できる値について

ここ見ると書いてあります
http://static.javadoc.io/com.github.ben-manes.caffeine/caffeine/2.2.0/com/github/benmanes/caffeine/cache/Caffeine.html

ちなみに、この前まで時間を設定するところで秒数しか設定できないと思っていましたが、秒以上（すなわちms以下はダメ）であれば分・時・日あたりは設定できるっぽいです。

### まとめ

- キャッシュはメソッドの引数ごとに持っている模様
（引数の値が異なれば引数ごとにキャッシュが作られる）
- expireAfterAccessを設定すると、メソッドが最後に呼ばれた時から設定した時間でキャッシュが消える
- expireAfterWriteを設定すると、キャッシュが最初に作られた時から設定した時間でキャッシュが消える
- ローカルで実行する分にはほとんど差分は見られなかったが、開発環境だとアプリケーションの規模にもよるが、全体の実行時間で5秒前後短縮された
API情報など、知られたらまずい情報を隠す。git管理から外す。

## Githubに載せるべきでない情報を扱う時
APIのトークンとか、コードに書く必要があるが、Githubには公開しない方が良い情報の取り扱いについて。
環境変数という形で、git管理下の外から情報を取得すると良い。

## 具体的には
この二つを用意する。

- env.json (git管理しない)
- env.json.sample (git管理する)

env.jsonは、git管理せずローカルに置く。
ここに実際の情報を記載する。
例えばfirebaseの情報を書くとしたらこんな感じで、json形式で書く

```json:env.json
{
  "FIREBASE_API_KEY": "ここに実際の値を書く",
  "FIREBASE_AUTH_DOMAIN": "ここに実際の値を書く", 
  "FIREBASE_DB_URL": "ここに実際の値を書く",
  "FIREBASE_STORAGE": "ここに実際の値を書く",
  "FIREBASE_SENDER_ID": "ここに実際の値を書く",
}
```

一方、ecv.json.sampleの方は、Githubに公開する。
例えば、別のユーザーがあなたのリポジトリをクローンして作業する時。
あなたのfirebaseの情報はそのユーザーにバレないにするため。
でも、外部に変数置いてんだな、ってのを明示するために、sampleという形でgit管理下に置く。


```json:env.json.sample
{
  "FIREBASE_API_KEY": "",
  "FIREBASE_AUTH_DOMAIN": "", 
  "FIREBASE_DB_URL": "",
  "FIREBASE_STORAGE": "",
  "FIREBASE_SENDER_ID": "",
}
```

## 公開リポジトリは注意
Githubの無料アカウントは公開リポジトリのみなので、上の例みたいにfirebaseの情報を生書きしていると、全ユーザーが閲覧してしまう。
上記のようにちゃんと隠そう。
abc 055

B
すぬけくんはトレーニングが好きなので N 回だけトレーニングすることにしました。
すぬけくんのトレーニング開始前のパワーは 1 です。すぬけくんが i 回目のトレーニングを終えるとパワーが i 倍されます。
すぬけくんが N 回トレーニングをしたあとのパワーを求めなさい。ただし、答えの値は非常に大きな値になることがあるので 109+7 で割ったあまりを出力してください。

```
#include<iostream>
using namespace std;
int main() {
	long long N;
	cin >> N;
	long long ans = 1;
	for (int i = 1; i <= N; ++i) {
		ans =i*ans % (1000000007);
	}
	cout << ans << endl;
	return 0;
}
```
はい。

C
すぬけくんはパズルが好きです。
今日は S と c の形をしたピースを使ったパズルで遊んでいます。 このパズルでは図のように c 型のピースを 2 つ組み合わせて S 型のピースを 1 つ作ることができます。
すぬけくんは S 型のピースを 1 つ、c 型のピースを 2 つ組み合わせて Scc という組を可能な限り多く作ることにしました。
すぬけくんが N 個の S 型のピースと M 個の c 型のピースを持っているとき、Scc という組を最大でいくつ作ることが可能か求めなさい。

Sとc二個で作るかc4個で作るかのみだってことに気づけるか、

```
#include<iostream>
using namespace std;
int main() {
	long long N, M;
	cin >> N >> M;
	if (N * 2 >= M) {
		cout << M / 2 << endl;
	}
	else {
		cout << N +(M-2*N)/4 << endl;
	}
}
```
Rails エラーメッセージの表示

#エラーメッセージとは
form_forとかで入力フォームを作った時に、
空のまま入力したりすると表示されるやつ。
フラッシュメッセージとは別物。

modelのバリデーションとセットで設定する感じ。

以下が完成図画像。
![スクリーンショット 2018-10-04 22.37.42.png](https://qiita-image-store.s3.amazonaws.com/0/194967/973c93a9-63c5-1a7b-b5e1-2b0e7b204675.png)



#まずmodelにバリデーション

```message.rb
class Message < ApplicationRecord
  belongs_to :user
  validates :title, presence: true, length: { maximum: 50 }
  validates :content, presence: true, length: { maximum: 140 }
end
```
titleカラムと。contentカラムは空白では登録できんぞ！ってこと。

#エラーメッセージのファイルの作成

```layouts/_error_messages.html.erb
<% if model.errors.any? %>
  <div class="alert alert-warning">
    <ul>
      <% model.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>
```

***errors.full_messages***は
全てのエラーメッセージを配列で取得します。
複数のメッセージが格納されていることもあるので、全て表示するには each でループで回しましょう。


いろんな入力フォームで使い回しできるように、パーシャルとして作成。

#フォーム（form_for）の中に、renderで挿入

```messages/new.html.erb
<h2>メッセージの投稿</h2>

<%= form_for(@message) do |f|%>
<%= render 'layouts/error_messages', model: f.object %>
<div class="form-group">  
<%= f.label :title %>
<%= f.text_field :title %>
</div>

<div class="form-group">        
<%= f.label :content %>
<%= f.text_area :content %>
</div>

<%= f.submit "投稿する", class: "btn-primary" %>

<% end %>
```

```<%= render 'layouts/error_messages', model: f.object %>```この部分がエラーメッッセージに該当する部分です。

第二引数の```model: f.object```はパーシャルに対して変数を渡しています。
modelという変数名で、f.objectという値を渡しています。
こうすることでパーシャルの汎用性が増します(他のフォームでも使える)。

参考
http://blog.yuhiisk.com/archive/2018/05/22/rails-display-error-message.html
Androidのvideoタグでプレビューを簡単に表示する方法

以下、Vue.jsを前提にコード載せていますので、bindされている部分などは適宜読み替えてください。

# Safari,iPhoneの場合

## #t=〇〇を使う

こんな感じ。

```
<video controls="true" playsinline >
  <!-- t=0だとプレビュー画像が表示されないので0.1秒の部分をプレビューとして指定 -->
  <source v-if="src" :src="src+'#t=0.1'" />
     あなたのブラウザでは動画の再生がサポートされていません。
</video>
```

少し謎な部分としては、t=0にするとプレビューが表示されずに真っ黒でした。
理由わかる人いたら教えてください。

また、自動再生する場合には `autoplay="true" muted` を付け加えればOK
iOS11ではmutedを指定しなければ自動再生はされません。

# Androidの場合

上記と同じ指定だと、真っ黒なまま。たまにキャッシュが効いてか表示されることはあるものの、基本、表示されない。

## load()関数を使う

vue.jsを使っているのでライフサイクルのmountedでvideoタグのobjectを取得してload()を呼び出しています。Domが取得できるタイミングであれば、他のタイミングでも可能だと思います。

```
mounted() {
  const videoObj = document.getElementsByTagName("video");
  if (videoObj && videoObj[0]) {
    videoObj[0].load();
  }
}
```

# まとめ

とりあえず上記の二つで、iOSでもAndroidでもChromeでもSafariでもプレビューがでるvideoタグを書くことができました。何かの参考になれば幸いです。（IEは知りません。。。）