OmniAICreator/Qiita-1.07M huggingface dataset:
jsでシンプルじゃなく単純じゃない音楽プレイヤーを作った

# 結論

自分で作ったほうが楽しいし、こだわりの音楽プレイヤーが作れる。
__つ ま り 楽 し い 。__

# やりたかったこと

(難易度順(独断と偏見による))

- 曲のランダム再生
    - 曲の検索とかはいらない
- 曲名、アーティスト名、アルバム名の表示
- __特殊なクロスフェード__
    - 5秒かけてフェードアウト、フェードアウト2秒目で次の曲がカットイン
    - これで曲を送るといい感じに曲の終わりと初めが繋がりやすい(と筆者は思った)
- __8バンド以上、±24以上のカスタムイコライザ__
    - イコライザプリセットの保存

# やってみた

### **さっそく問題発生**

```javascript
$(function(){
    $('audio').get(0).play(); // プレイされない
});
```

デスクトップブラウザでも音付きの動画や音声が**jsから自動再生できない**ようになっていた！！
(audio要素のautoplay属性も効きませんでした)
[Safari, Chromeの自動再生ポリシー変更のまとめ](https://qiita.com/ktknest/items/e81b3a4caac540098fc8)

- **特定の条件**が満たされないと自動再生されない
    - 筆者のメインブラウザChromeでは独自にサイト毎のプレイバックレートで管理されている(**意図的に操作はできない**)
- ユーザの操作(クリック)発射の関数内の.load()や.play()は効く
    - onload()内などで.play()しても直後に.pause()される

なので、しぶしぶPLAYボタンを作るのであった。

## 曲のランダム再生

曲のファイルパスを配列にし、
配列の中身をランダムにaudioタグに放り込んだ。

## 曲名、アーティスト名、アルバム名の表示

PHPでgetID3()を利用することで曲情報を曲ファイルから抽出できた
[getID3()を使った音楽ファイルの情報取得](https://qiita.com/imos/items/43525b5ac5800787910c)
曲情報を入力したツールや、曲のエンコードに使ったツールによってID3v2のデータ構造が変わるっぽいので注意(よくわかっていない)
ただ連想配列のKeyは同じっぽいので、配列全部のKeyをチェックして(多次元になってるのも全部)、該当KeyのValueを集めた。
デバッグも含め、以下の情報を抽出した。

- title
- artist
- album
- album_artist
- replaygain_track_gain // <- 音量を均一化するための調整量
- sort_title // <- iTunes独自の、曲名の読み方
- playtime_seconds
- filesize
- encoding_tool
- encoding
- codec

その際、どうしても10進文字コードとして化けて出てくるファイルがあったので、ゴリ押しでデコードしました。(許してほしい)
[【&#5147;】 JSでHTML10進コードをデコードする記事が見つからなかった](https://qiita.com/super_amateur/items/f127982eb8ff69695bd5)

## 特殊なクロスフェード

まず、audioタグを**2つ**用意した。
プレイ中のaudioを5秒かけてフェードアウトしながら、フェードアウトの2秒目にもう片方のaudioを再生。
> 副産物として、Next Play が取得できるようになった(

## 8バンド以上、±24以上のカスタムイコライザ

ここから**Web Audio API**の出番ですよ

[Web Audio API の勉強 - グラフィックイコライザーを作る](http://izmiz.hateblo.jp/entry/2015/01/30/233537)
[イコライザー | エフェクター | WEB SOUNDER - Web Audio API 解説 -](https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-effectors/equalizer)

[概要]
`BiquadFilter`をイコライザのバンドの数だけ作り、audio要素の`MediaElementSource`から数珠つなぎにつなげていく。
BiquadFilterのフィルターにはピーキング(特定の周波数の周りを増減する)を指定。
各バンドの周波数やピーキングの影響幅をいれておく。(ようはBiquadFilter1つ1つがEQつまみみたいになってる)

Audio要素の[MediaElementSource]　←ここに音声ファイル
┗バンド1(125Hz)の[BiquadFilter]　←ここに `バンド1のボリューム + 全体のボリューム + 曲のリプレイゲイン`
　┗バンド2(250Hz)の[BiquadFilter]　←ここに `バンド2のボリューム + 全体のボリューム + 曲のリプレイゲイン`
　　┗バンド3(500Hz)の[BiquadFilter]　←ここに `バンド3のボリューム + 全体のボリューム + 曲のリプレイゲイン`
　　　┗バンド4(1kHz)の[BiquadFilter]　←ここに (以下略
　　　　┗バンド5(2kHz)の[BiquadFilter]
　　　　　┗バンド6(4kHz)の[BiquadFilter]
　　　　　　┗バンド7(8kHz)の[BiquadFilter]

**これで好きなだけ曲をドムドムシャカシャカさせることができるようになった！**

# これから実装したい

- SQLによる曲の管理
    - 曲の検索とかできるようになる
    - ID3v2タグにない情報も保持できる(再生回数やスキップ回数、いいね てきなものなど)
        - それら情報をもとに自分の好みにより近いランダムアルゴリズムが組みたい(超将来的に)
- 再生速度コントローラー
    - ちょっと1.2xとかで音楽聞くといつもよりアガれる(
- ビジュアルイコライザ
    - 波形見ながらイコライザ調整できたら楽だな…
- スマホでも使いたい
    - アプリ化しないと無理ということが今回わかった
AWS Account ID を知る方法

# はじめに

異なるAWSアカウント間でVPC Peering する場合などには接続先のAWS Account ID を指定する必要があります。しかし意外と取得する方法がわからなくて困ってたので共有します。もっと簡単に知る方法あれば教えてください。

# AWS Account ID を知る方法

## 1. AWS マネジメントコンソールから

AWS マネジメントコンソールに入ったときにロールの選択のところでアカウント名の横のカッコに記載されている数字列がAWS Account ID です。

https://signin.aws.amazon.com/saml

## 2. AWS CLI から

https://dev.classmethod.jp/cloud/aws/get-aws-account-id-with-get-caller-identity/ この記事で知りました。 `GetCallerIdentity` というのがあるらしい。

### 例

```
$ aws sts get-caller-identity
{
    "Account": "0123456789012",
    "UserId": "ABCD1234EFGHGELEGSL3",
    "Arn": "arn:aws:iam::012345678901234:user/ユーザ名"
}
```

クレデンシャルのプロフィール指定したいならこう。

```
$ aws sts get-caller-identity --profile mikaji
{
    "Account": "0123456789012",
    "UserId": "ABCD1234EFGHGELEGSL3",
    "Arn": "arn:aws:iam::012345678901234:user/ユーザ名"
}
```

# おわりに

AWS CLI イイネ
Object#methods が便利

# はじめに

Rubyにおいてオブジェクトに対して実行できるメソッドを知りたいときありませんか？そんなときに使える便利メソッドを紹介します。

# Object#methods

`Object#methods` はそのオブジェクトに対して呼び出せるメソッド名の一覧を返します。

詳しい使い方はこちら
https://docs.ruby-lang.org/ja/latest/method/Object/i/methods.html

### 例

```rb
> 'mikaji'.methods.grep /to_/
[
    [ 0]      psych_to_yaml(*options) String (Object)
    [ 1]               to_c()         String
    [ 2]            to_enum(*arg1)    String (Kernel)
    [ 3]               to_f()         String
    [ 4]               to_i(*arg1)    String
    [ 5]               to_r()         String
    [ 6]               to_s()         String
    [ 7]             to_str()         String
    [ 8]             to_sym()         String
    [ 9]            to_yaml(*options) String (Object)
    [10] to_yaml_properties()         String (Object)
]
```

このようにRailsコンソールからの場合は元から定義されているメソッドだけでなく新たに定義されたメソッドもすべて表示されます。

### おまけ

pryのlsも便利らしい

```rb
> ls 'mikaji'
Comparable#methods: <  <=  >  >=  between?  clamp
String#methods:
  %    ==           black       capitalize!  chop        crypt      dump            encode!         gray      hex       lines    next!         purple     rindex      scrub!       split        sub!       to_f    tr!                  unpack1          yellow
  *    ===          blue        casecmp      chop!       cyan       each_byte       encoding        grayish   include?  ljust    oct           purpleish  rjust       setbyte      squeeze      succ       to_i    tr_s                 upcase           yellowish
  +    =~           blueish     casecmp?     chr         cyanish    each_char       end_with?       green     index     lstrip   ord           red        rpartition  shellescape  squeeze!     succ!      to_r    tr_s!                upcase!
  +@   []           bytes       center       clear       delete     each_codepoint  eql?            greenish  insert    lstrip!  pale          redish     rstrip      shellsplit   start_with?  sum        to_s    unicode_normalize    upto
  -@   []=          bytesize    chars        codepoints  delete!    each_line       force_encoding  gsub      inspect   match    partition     replace    rstrip!     size         strip        swapcase   to_str  unicode_normalize!   valid_encoding?
  <<   ascii_only?  byteslice   chomp        concat      downcase   empty?          freeze          gsub!     intern    match?   prepend       reverse    scan        slice        strip!       swapcase!  to_sym  unicode_normalized?  white
  <=>  b            capitalize  chomp!       count       downcase!  encode          getbyte         hash      length    next     pretty_print  reverse!   scrub       slice!       sub          to_c       tr      unpack               whiteish
```
# おわりに

さくっとメソッド知りたいときも使えるし、こんなメソッドあったんだという発見にもなるのでおすすめです。
Qiitaのコードをクリックでコピーするアイコンを実装するJavaScriptを書いた




QiitaのことなのでブログじゃなくてQiitaに載せときます。

```js

// ==UserScript==
// @name         Show copy icon to copy code tags on Qiita
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       https://yuis-programming.com
// @match        https://qiita.com/*
// @grant        none
// ==/UserScript==


function copyTextToClipboard(text){var textArea=document.createElement("textarea");textArea.style.position='fixed';textArea.style.top=0;textArea.style.left=0;textArea.style.width='2em';textArea.style.height='2em';textArea.style.padding=0;textArea.style.border='none';textArea.style.outline='none';textArea.style.boxShadow='none';textArea.style.background='transparent';textArea.value=text;document.body.appendChild(textArea);textArea.focus();textArea.select();try{var successful=document.execCommand('copy');var msg=successful?'successful':'unsuccessful';console.log('Copying text command was '+msg)}catch(err){console.log('Oops, unable to copy')}document.body.removeChild(textArea)}

function addCSS(code){
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = code;
  document.body.appendChild(css);
}

// CSS .addCopyToCodeTags を追加
addCSS('.addCopyToCodeTags::before{ opacity: 0.7 ; content: "\\f0c5";    font-family: FontAwesome;    font-style: normal;    font-weight: normal;    text-decoration: inherit;    padding-right: 1em; }')

// 全てのpreタグにaddCopyToCodeTagsクラスを付与
var i ;
for (i=0 ;i < document.querySelectorAll('pre').length ; i++){
    document.querySelectorAll('pre')[i].classList.add('addCopyToCodeTags')
}

// addCopyToCodeTagsクラスをクリックしたら同要素のinnerTextがコピーされる
[].forEach.call(document.querySelectorAll('.addCopyToCodeTags'),function(x){
  x.addEventListener("click", function(e){
    copyTextToClipboard(e.target.innerText) ;
  });
});
```

## 使用感

![ShareX_ScreenShot_205d2009-0ba8-4cab-aa2d-eab3947a76bc.png (1226×697)](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_205d2009-0ba8-4cab-aa2d-eab3947a76bc.png)
php-master-changes 2018-08-01

今日だけ今日だけと言いながらどのくらい続けられるだろうか
今たまたま時間とれるけど、より根性試されるのあまりとれなくなってからな気はする

# 2018-08-01
## smalyshev: Clarify difference between security & regular bugfixes
- https://github.com/php/php-src/commit/201022c34791318034f37591d00a39fc00577654
- README.GIT-RULES のバグ修正の宛て方についての記述で、通常のバグ修正とセキュリティ修正の当たる先を区別
- PHP のバグ修正はサポート対象バージョンの中の下の方へ一旦適用し、そこから上のバージョンへマージしていくルール
- なおこの php-master-changes ではマージのコミットまでは見てない

## smalyshev: Ugh, whitespace
- https://github.com/php/php-src/commit/65167f1c7d5a087022270b8b8fe10a3b0c58b3a0
- 不要なホワイトスペースの除去

## smalyshev: Typo
- https://github.com/php/php-src/commit/3ea095ab00c6106755590ccd659e6e0de3e53a00
- スペルミスの修正

## laurence: Unused var
- https://github.com/php/php-src/commit/85145e509e6a779621d9fd8f99b0e16f3e26ca1f
- 不要な変数の除去
- 昨日の dmitory の[「Improved method visibility checks」](https://github.com/php/php-src/commit/3ccd98547828297e52f04885840facc4856dcb1f)でコード整理がされた際に不要となった変数なもよう
- この行自体は5年前からあった行で、何で急に laurence がこれに気付いて直したのか、と最初思った
    - PR 通さずに入る修正もなんとなく他の開発者が見てるみたいな

## weltling: Fix clang compilation
- https://github.com/php/php-src/commit/36857ab52b8cafc91650ccc55053abe6b517f092
- clang でのコンパイル問題修正
- [-fmodules オプション](http://clang.llvm.org/docs/Modules.html)付きでコンパイルすると、[intrinsics](http://koturn.hatenablog.com/entry/2016/07/18/090000) が全ロードされ、Visual Studio 由来のヘッダが読み込まれて宣言の衝突が起きるという話
- それで clang では intrin.h を読み込まないようにする、まではなんとなく話として分かったよーな気もするけれど、__zend_cpuid() が固定値詰めるだけの実装になるのは別によいのだろうか（よく分からず）
- -fmodules 自体は clang の Visual Studio 互換モードでのリンク問題を防ぐのに必要とか

# 2018-08-02
## cmb69: Remove needless version checks
- https://github.com/php/php-src/commit/3d4fbdade43c040293e6de4a1b9fb4781c5c1ee5
- ext/intl で ICU の 不要なバージョンチェックを削除
- PHP 5.5.3 から configure 段階で ICU バージョン 4.0 以上を要求するようになったため、3.X 系のチェックは不要とのこと

## weltling: Suppress more irrelevant clang warnings
- https://github.com/php/php-src/commit/d53978bd59d45c3e850418e91c2e9ebc11491bf3
- clang の警告を減らす用にコンパイルフラグの追加
curl の結果の JSON を jq で加工して指定文字を fzf で選択をしたい

# セットアップ

* Vagrant で環境を用意
  手っ取り早く Laravel Homestead の出来合いのものを利用
  https://laravel.com/docs/5.6/homestead

* 立ち上げてログイン

```shell:~/Homesteadにて
vagrant up
vagrant ssh
```

* jq コマンドインストール  
  https://stedolan.github.io/jq/download/

```shell
sudo apt-get install jq
```

* fzf インストール  
  https://github.com/junegunn/fzf

```shell
git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf
~/.fzf/install
```

# 実施

* JSON の結果を渡す

```shell
curl 'https://api.github.com/repos/stedolan/jq/commits?per_page=1
' | jq '.' | fzf
```

* こんな感じに

「`emai`」にて絞り込まれております。

![test.jpg](https://qiita-image-store.s3.amazonaws.com/0/116435/ac4f7733-f47c-b47a-09ba-43f9fe0e3398.jpeg)

# 最初は Windows (Git Bash) でやろうとしてました

当初は peco で、うまくいかず fzf、ff... と試しておりましたが
curl の結果がうまく渡らず挫折しました。

Vagrant でためしたところあっけなく完了・・・
slack_botをherokuにデプロイした時のメモ

# botkitでslackbotをつくってherokuにデプロイするまで

メモ、多分何か抜けている気がする

## 環境
- aws ec2
- node.js バージョンは忘れた

## 構成
こんな感じだった気がする
- bot.js
- herokbotapp
- package.json
- Procfile

### bot.js
- botに投げたメッセージがそのままslack_testに投げられる

```js:bot.js
const Botkit = require('botkit');
 
if(!process.env.token){
   console.log('error: specify token in enviroment');
   process.exit(1);
}
  
const controller = Botkit.slackbot({
   debug: false
});  

controller.spawn({
     token: process.env.token
   }).startRTM(function(err){
     if(err){
      throw new Error();
     }                                                                                                                        
   });
   
controller.hears('', ['direct_message', 'direct_mention', 'mention'], function(bot, message){
   console.log(message);
   bot.say({
     channel: 'bot_test',
     text: message.text,
     username: 'HOGEEEEE'
   });
});
```

### package.json

- botkitだけ

`$npm init`

```json:package.json
{    
 "name": "bot",
 "version": "1.0.0",
 "description": "",
 "main": "bot.js",
 "dependencies": {
 "botkit": "*"                                                                                                           
 },
 
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 }, 
 "author": "",
 "license": "ISC"
 }    
```      

### Procfile

- bot起動するコマンド

```text:Procfile
worker: node bot.js
```
### herokubotapp
- herokuアカウント作ったときのレポジトリ

`$ git init`
`$ heroku git:remote -a herokubotapp`
この辺りはうろ覚え
`$ heroku git:clone -a herokubotapp`
もどこかでうった気がする
うろ覚え

## herokuに環境変数設定
`$ heroku config:add token=slackのapiトークン(xoxo~)`
setだったかな
bot.jsのprocess.env.tokenがこれをみる

## deploy
`$ git add .`
`$ git commit -m 'first commit'`
`$ git push heroku master`

~デプロイ中のログが流れる~

デプロイできたっぽい
heroku⇨ダッシュボード⇨workerがonになってなかったのでonに

## 動作確認
HOGEEEEにメッセージ
bot_testに投稿された

できた
スクショは面倒だから取ってない

## ログ見てみる

`$ heroku logs -t`

botにメッセージ投げたらログにでた

できた
スクショは面倒だから取ってない

## 以上
適当だけどメモでした
もう一回最初からした方がいいね

## 参考
あとで書く
Leela Zero を Mac で動かす

Leela Zero は、Alpha GO Zero の論文を参考に開発されている、人間による知識を与えられないで作られた囲碁のプログラムです。
macOS で Leela Zero を動かすのに少しだけ手間取ったので、オープンソースにあまり慣れてない人のヒントになるように記してみます。(ターミナルとはなんぞや？レベルの方は、「macos ターミナル 使い方」あたりで Google 検索してみてください。）

ただし、この内容は2018年8月現在の記事なので、将来的にこの手順では動かなくなる可能性もあります。

#必要なプログラム

 - [*Leela Zero*](https://github.com/gcp/leela-zero)　囲碁AI本体
 - [*Sabaki*](https://sabaki.yichuanshen.de/) 豊富な機能を持つ棋譜ソフト。ここでは対戦用の UI として使う。
 - [*LeelaSabaki*](https://github.com/SabakiHQ/LeelaSabaki) Sabaki と Leela Zero を結びつけるためのプログラム

#手順
## Leela Zero のインストール
ターミナル.app を立ち上げ、[README.md](https://github.com/gcp/leela-zero#example-of-compiling-and-running---macos)にあるようにインストールすればいいです。

```
# github 上のリポジトリからソースコードを clone
git clone https://github.com/gcp/leela-zero
cd leela-zero/src
git submodule update --init --recursive

# boost と　cmake を　Homebrew 経由でインストール
brew install boost cmake

# コンパイル
make
cd ..

#　ネットワーク（AIの中身）をダウンロード
curl -O http://zero.sjeng.org/best-network
```

brew コマンドが入ってなくてエラーがでる人は、[こちら](https://brew.sh/index_ja.html)を参照してインストールしましょう。 xcrun が見つからないとか、言われる場合には

```
xcode-select --install

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

というふうに、xcode からインストールしないとだめかも。
ちなみに、LeelaSabaki を使う場合は autogtp はコンパイルしなくてもOK。

インストールができたら

```
src/leelaz --weights best-network
```

というコマンドで、なにやら動くのを確認できるはず。

##Sabaki のインストール
 https://sabaki.yichuanshen.de/　から、sabaki-v0.*.*-mac-x64.7z というような Mac 用のファイルをダウンロードします。
７ｚ　という圧縮フォーマットは少し特殊なので、手元のソフトウェアで伸長できないときは、

```
brew install p7zip
7z x sabaki-v0.*-mac-x64.7z
```
というように伸長。Sabakiは実行形式のアプリケーションで配布されているので、これだけでOKです。

##LeelaSabaki のインストール
```
cd ~
# npm コマンドのために、Homebrew で node.js をインストール
brew install node

# LeelaSabaki のダウンロード
git clone https://github.com/SabakiHQ/LeelaSabaki.git
cd LeelaSabaki

# LeelaSabaki のビルド
npm install
npm run build
```
インストールできたら

```
$ ./leelasabaki　--heatmap <path-to-leela> --weights=<path-to-network> --noponder --playouts 100
```

とかすると、なにか動くのが見えるはず。
path-to-leela は、上にインストールしたLeelaの実行ファイルへのパス。たとえば、上の手順をそのまま実行した場合、macOSのユーザー名が XXX だとすると、 \<path-to-leela\> は "/Users/XXX/leela-zero/src/leelaz"、 \<path-to-network\> は "/Users/XXX/leela-zero/best-network" になるはず。

# Sabaki の起動と設定
Sabaki を起動します。
Engines > Manage Engine...を選択し、新しい項目を Add します。

- (Unnamed Engine) → 名前なので、適当に Leela Zero とでも
- Path → /Users/XXX/leela-zero/src/leelaz
- No arguments → --weights=/Users/XXX/leela-zero/best-network --noponder --playouts=100

![sabaki.png](https://qiita-image-store.s3.amazonaws.com/0/64605/6bd54c17-70e8-5c46-bd19-3a1f07da933e.png)

設定を Close して、 File > New から、Black または White に Leela-Zero を選んで、対決開始。

Engine > Toggle GTP Console を入れると、Sabaki と　　Leela Zero の通信を見られます。

![runnning.png](https://qiita-image-store.s3.amazonaws.com/0/64605/f7307ca5-3577-9959-5545-e064330b0239.png)

playout の値を大きくすると、AIの計算量が増えて、強くなります。（その分、推論に時間がかかる。）

以上です。
slackとgithubを連携させる際に使用するスラッシュコマンド

## はじめに

個人レッスンでslackとgithubを連携させることになったので、その際に使用するスラッシュコマンドを備忘録としてまとめます。


## 連携手順

slackとGithubの連携方法については、以下のサイトを参考に設定して下さい。

https://tech.qookie.jp/posts/slack-notice-github/

## 通知を受けるリポジトリを指定する

```bash
/github subscribe ユーザーID/リポジトリ名
```

### example

```bash
/github subscribe yuta-ushijima/qiita_clone
```

## コメントがされたら通知する

```bash
/github subscribe ユーザーID/リポジトリ名 comments
```

### example

```bash
/github subscribe yuta-ushijima/qiita_clone comments
```

## レビューされたら通知する

```bash
/github subscribe ユーザーID/リポジトリ名 reviews
```

### example

```bash
/github subscribe yuta-ushijima/qiita_clone reviews
```

## まとめ

slackとgithubを連携すると、変更したらすぐに通知がくるので便利！
TypeScript Handbook の Advanced Types をちょっとだけ掘り下げる - その3 Type Aliases


# はじめに

本記事は [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/basic-types.html) の [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) に書かれているものをベースに、説明されている内容をこういう場合はどうなるのかといったことを付け加えて *ちょっとだけ* 掘り下げます。完全な翻訳ではなく、若干元の事例を改変しています。
今回は **Type Aliases** について掘り下げます。

その1 Type Guards and Differentiating Types は [こちら](https://qiita.com/kobanyan/items/7a38ed5abad71cb8e93d)
その2 Nullable types は [こちら](https://qiita.com/kobanyan/items/c574ef8a20cc0590f739)
その4 String Literal Types / Numeric Literal Types は [こちら](https://qiita.com/kobanyan/items/190b5bb926fbeeeaebe3)
その5 Discriminated Unions は [こちら](https://qiita.com/kobanyan/items/ca56df27de50ec267995)
その6 Index types は [こちら](https://qiita.com/kobanyan/items/dcdf12bbd8b793fe5bd7)
その7 Mapped types は [こちら](https://qiita.com/kobanyan/items/2fdd6b0ed7411ff9980e)

# Type Aliases

型にエイリアスをつけることができます。どの型に対しても使えます。

```typescript
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
  if (typeof n === 'string') {
    return n;
  } else {
    return n();
  }
}
```

エイリアスをつけることで新しい型が作られるわけではなく、その型を参照する新しい名前が作成されます。 primitive に対してエイリアスをつけることでとりわけ便利になることはないですが、ドキュメントの一種として使用することができます。

interface と同様にエイリアスにもジェネリクスが使えます。

```typescript
type Container<T> = { value: T };
```

エイリアスは自身のプロパティ内でも利用することができます。

```typescript
type Tree<T> = {
  value: T;
  left: Tree<T>;
  right: Tree<T>;
}
```

交差型と共に利用することで、面白い型を作ることができます。

```typescript
type LinkedList<T> = T & { next: LinkedList<T> };

interface Person {
  name: string;
}

var people: LinkedList<Person>;
var s = people.name;
var s = people.next.name;
var s = people.next.next.name;
var s = people.next.next.next.name;
```

ただし、エイリアスの宣言の右側に直接用いることはできません。

```typescript
type Yikes = Array<Yikes>; // コンパイルエラー
```

## Interfaces vs. Type Aliases

エイリアスとインターフェイスは似ていますが、若干異なります。

その差異について、 [Handbook](https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases) に三つその違いが記載されているのですが、その内二つが **間違っています** 。

間違いの詳細については [Interface vs Type alias in TypeScript 2.7
](https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c) という記事に詳しく書かれているので省きますが、簡単にまとめると、

- エラーメッセージにエイリアスは表示されないし、エディタのポップアップにも表示されない -> エイリアスが表示される
- エイリアスを継承したり実装することはできない -> エイリアスを実装したインターフェイスやクラスの作成は可能
- ユニオンやタプルにはエイリアスを使います -> その通り

になります。

詳細な違いについては、 [TypeScriptのInterfaceとType aliasの比較
](https://qiita.com/tkrkt/items/d01b96363e58a7df830e) という記事が参考になります。

## まとめ

インターフェイスとエイリアスの違いについて正しく理解し、エイリアスを上手に使うと色々捗りそう。

Handbook は結構いい加減... ドキュメントってやっぱりメンテされない...
Firebase Functions で Node.js 8 使えるようになったぞ〜〜〜！！！

https://dev.to/jgs/firebase-functions--nodejs-8--23lk からクロスポストです。

---

# tldr

* `firebase-tools` をアップグレードする
* `functions/package.json` に `"engines": { "node": "8" }` を追加する
* `firebase deploy`

# 経緯

https://cloud.google.com/functions/docs/concepts/nodejs-8-runtime でしれっと（？） Cloud Functions で Node.js 8 が使えることが書いてあって(あと Python)小躍りしながら試しました。

じゃあ Firebase Functions でも使えるんじゃね...?と調べてみても、全く情報が出てきませんでした。ウェブのコンソールからランタイムを変更できる、と書いてる記事もあったのですが自分のプロジェクトにはそういう項目はなく...。

firebase-tools のリポジトリを `runtime` で検索すると対応しているっぽい雰囲気がありました。しばらくコード追ったりした後に、最初に気付けばよかったんですが、リリースノートにちゃんと書いてありました。

https://github.com/firebase/firebase-tools/releases/tag/v4.0.0

まずはちゃんとリリースノートを読もうな！

# 余談

しばらく見ない間に TypeScript にもオフィシャルに対応していて `firebase init` で対話的にプロジェクトを作成する際に TS でスキャッフォルドを作ってくれるのでお手軽に型を付けられるようになっていた。かなりマトモな環境の Node.js 8 で動かすものを TS で書けるとなるとだいぶ選択肢に入ってくるのでは...?というカンジがした。まだ beta っぽいけどガンバッテほしい...!
windowsでRailsアプリケーション作成

# 前提環境
- windows 10 Home
- Visual Studio Code 1.25.0
- git version 2.18.0.windows.1
- ruby 2.4.4p296 (2018-03-28 revision 63013) [x64-mingw32]
- Rails 5.2.0
- DB：sqlite3

# Gitのセットアップ
 1. Gitのクライアントアプリをインストール。自分はデフォルトのまま進めました。  
 [自分用 Git For Windowsのインストール手順](https://qiita.com/toshi-click/items/dcf3dd48fdc74c91b409)
<br><br>
 1. Gitのリモートサーバーを用意。今回はGitHubを登録。
 代表的なリモートサーバーは下記の3つ
   - **[GitHub](https://github.com/)**・・・基本は公開リポジトリとして作成されるので、技術力アピールやオープンな共同開発に向いている。パスワードや個人情報を公開しないように注意。プライベートリポジトリが有償な点も注意。<br><br>
   - **[GitLab](https://about.gitlab.com/)**・・・プライベートリポジトリが無償のため、個人的な開発に向いている。機能的にはGitHubに劣るが、初心者にはGitLabがおすすめ。<br><br>
   - **[GitBucket](https://gitbucket.github.io/)**・・・こちらもプライベートリポジトリが無償。少し動作が重かった気がする。<br><br>

 1. git config等を設定
リモートに登録したユーザーIDとメールアドレスを設定。
`C:\Users\xxxx\.gitconfig` を直接編集してもOK

```git:GitBash
$ git config —global user.name ユーザー名
$ git config —global user.email メールアドレス
```

GitHubにてリポジトリを作成し、ローカルでリモートリポジトリを登録

```git:GitBash
$ git remote add origin https://github.com/xxxx/xxxxxx.git
```


# Ruby on Railsのインストール
webサイトを作成するならRubyだけでなくRailsもインストールした方が早いです。
下記を参考にインストール

 1. [Rubyの実行環境構築 on Windows](https://qiita.com/3no3_tw/items/8c0bcf258370d91bf6e0) 
 1. [RubyInstaller2でWindows環境にRuby 2.4 + Rails 5.0.2をインストールする](https://qiita.com/jnchito/items/08b5be458134073c60e3) 

自分は1のRubyを入れてから2の続きでRailsをセットアップをしました。
環境変数にRubyのPathを通すように注意

 ```:path
 C:\Ruby24-x64\bin
 ```

# Railsアプリケーションの作成
下記を参考にチャットアプリを作成
[Rails 5 + ActionCableで作る！シンプルなチャットアプリ（DHH氏のデモ動画より）](https://qiita.com/jnchito/items/aec75fab42804287d71b)
Redisをインストールしなくてもチャット機能は確認できました

# DBを確認
DBを確認しようと `rails dbconsole` をしたところ、下記エラー

```:コマンドプロンプト
C:\prog\project\chachee>rails dbconsole
Couldn't find database client: sqlite3.exe. Check your $PATH and try again.
```

[SQLite Download Page](https://sqlite.org/download.html) で `sqlite-tools-win32-x86-3240000.zip` をダウンロードして解凍。  
解凍したフォルダ内にある `sqlite3.exe` を Rubyのbinフォルダに移動

```:
C:\Ruby24-x64\bin
```

再度 `rails dbconsole`をしたところ確認できました。

```:コマンドプロンプト
C:\prog\project\chachee>rails dbconsole
SQLite version 3.24.0 2018-06-04 19:24:41
Enter ".help" for usage hints.
sqlite>
```

# デバッグ環境構築
下記を参考にデバッグ環境構築
[WindowsでVSCodeを使ってrailsのデバッグを行う](https://qiita.com/naoto_koyama/items/313e45a0f26e1e641728)
VSCodeの設定と、launch.jsonの設定はなくても確認できました。
以降は下記のコマンドを実行してVSCodeのデバッグ起動でRails起動＆デバッグOK！

```:コマンドプロンプト
$ rdebug-ide --host 0.0.0.0 --port 1234 -- ./bin/rails s -b 0.0.0.0 -p 3000
-e development
```

たまにRailsを起動した際に動かなくなった場合

```:コマンドプロンプト
$ rails s
A server is already running. Check C:/prog/project/chachee/tmp/pids/server.pid.
=> Booting Puma
=> Rails 5.2.0 application starting in development
=> Run `rails server -h` for more startup options
Exiting
```
対象のpidファイルを削除して再度デバッグ起動してください。
`C:/prog/project/chachee/tmp/pids/server.pid`

# おわりに
ほどんど参考サイトを元に作成させていただきました。
チャットアプリはこれから拡張していきたいと思います。
GitHubにて公開しています！
[okdyy75/chachee](https://github.com/okdyy75/chachee)
Linuxのファイル詳細情報の表示について②

#▼Linuxでのファイル詳細情報について
昨日の、こちらの記事にて「[Linuxのファイル詳細情報の表示について](https://qiita.com/shotah1215/items/f2d70a15e72453928bfe)」Linuxでのファイル修正時刻について３種類あることを記載しました。これらの情報は毎回`ls`コマンドで確認するのも面倒なので、何か便利なコマンドがないかと思い、調べたら案の上ありました。

##◆statコマンド
ファイルの修正時刻だけではなく、そのファイルのユーザ名やグループ名、パーミッションさらにinodeなど、ファイルに関して様々な情報を一度に表示してくれる便利コマンドです。

```shell:
[shota@hostname ~]$ stat personal_information.csv
  File: `personal_information.csv'
  Size: 17807     	Blocks: 40         IO Block: 4096   通常ファイル
Device: xxxxx/xxxxxx	Inode: 131084      Links: 1
Access: (0644/-rw-r--r--)  Uid: (  500/  shota)   Gid: (  500/  shota)
Access: 2018-05-19 20:18:17.817200687 +0900
Modify: 2017-12-14 21:02:13.262927923 +0900
Change: 2017-12-14 21:02:13.263927912 +0900
```

※実行環境は以下の通りです（maxOSからSSHでリモートへ接続してコマンド実施）
ローカル：maxOS High Sierra バージョン 10.13.4
リモート：CentOS release 6.9 (Final)
【Rails】category_id = 1 の sub_category を持つ items を取得したい。(サブクエリ)

![Diagram](https://qiita-image-store.s3.amazonaws.com/0/225997/0297c51d-31f4-ba6f-7950-03511db14c2f.png)

**category_id = 1 の sub_category を持つ items を取得したい。**

:point_down: SQL

```sql:SQL
-- サブクエリ(副問合せ)を使います。
SELECT * FROM items WHERE sub_category_id IN
(SELECT * FROM sub_categories WHERE category_id = 1);
```
:point_down: Rails

```ruby:Rails
sub_categories = SubCategory.where(category_id: 1)
@items = Item.where(sub_category: sub_categories)

# => #<ActiveRecord::Relation [#<Item id: 1, name: "apple juice", sub_category_id: 1>, #<Item id: 2, name: "orange juice", sub_category_id: 1>, #<Item id: 3, name: "coca cola", sub_category_id: 2>, ...]>
```

``.where(category_id: 1)`` のところは、``.where(category: @category)`` でもOK。

これでできました。:thumbsup:

まさか``.where()``でActiveRecordの問合せ結果を渡すことができるとは知らなかったですね...
かなり基礎的なことですが、Rails/SQL初心者の自分は、これを探し出すのに地味に苦労しました。
これが誰かのお役立てできれば幸いです。
Javaのファイル入出力はNIOで書こう

# 概要

FileInputStreamやらBufferedReaderStreamやらInputStreamReaderやら色々習ったが，結局どれを使うのがよいかわからなかったので調べた．
NIOおよびNIO2を利用すると簡単に書ける．

Oracleチュートリアル：ファイルI/O
［英語］https://docs.oracle.com/javase/tutorial/essential/io/fileio.html
［日本語］https://docs.oracle.com/cd/E26537_01/tutorial/essential/io/fileio.html

# NIO (New I/O) API

PathのファクトリクラスPathsとストリームのファクトリクラスFilesが重要．
JDK1.4でNIOが，JDK1.7でNIO2が追加された．

## テキスト入力

### 1. 行ごとのストリームを取得したい場合

```java
try (Stream<String> ss = Files.lines(Paths.get(filename))) {
    ss.forEach(System.out::println);
} catch (IOException e) {
}
```

### 2. 1行ずつ読み込んで処理したい場合

```java
try (BufferedReader br = Files.newBufferedReader(Paths.get(filename))) {
    String line = null;
    while ((line = br.readLine()) != null) {
        System.out.println(line);
    }
} catch (IOException e) {
}
```

## テキスト出力

```java
try (BufferedWriter bw = Files.newBufferedWriter(Paths.get(filename));
    PrintWriter pw = new PrintWriter(bw, true)) {
    pw.println(str);
} catch (IOException e) {
}
```

# 備考

* Buffered系以外の入力ストリームは１行読み込みができない．
【Unity】カオスな4重振り子～出来た♬

ちょっとネットでカオス、連成振り子でググってみると、YouTubeで人気な参考の動画があった。しかもかなり見事にカオスな様子が再現されている。
ただ、なんか特別な物理エンジン使っているように読めたので、普通のUnityで実現できるか試してみた。

【参考】
・[【物理エンジン】4重振り子で突然やって来るカオス現象](https://www.youtube.com/watch?v=CJVNKrXVAQA)
###やったこと
（１）設計と具体化
（２）大量に作ること
（３）OculusGoで動かしてみる
###（１）設計と具体化
このところ振り子は作っていたので以下の方針でやった。
####①とにかく４重振り子を作ってみる
ここが一番苦労した。。
つなげる部分のつなげ方が当初わからず、画像見てくっつける作業
しかし、これだと角度を変えると思った以上に離れていることしばしば
ということで最初の棒を作ったら、その下に棒をつける。。。つまり以下のように実施した。
![bar_pen.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/a694d65c-3f22-816f-e977-6c0f6018ac4f.jpeg)
上の状態から、最初の棒をDuplicateしてもう一本棒を作る
次に、作った棒を最初の棒の下に移動する（画面でなくHierarchyで）
すると座標が相対座標になって位置決めし易くなるから、ローテーション０度で縦に並べてつながる位置に配置する。
そして、一度配下からCameraの配下に移動して長さを変えると、下のような状況になってさえいれば自動的に最初の棒の下にきっちりつながる。
これは棒の長さをいろいろ変えてもつながるようになる。
![2bar_pen.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/6947fe40-6f69-0242-7383-22dee1beb044.jpeg)
ということで、以下のように４連結して４重振り子にする。
長さと重さはまずは適当に決める。
####②角度をつける
この辺りが今回の作業で一番気を使うところ。調整が思うようにできない。
![bar4_pen.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/d6f3f79e-6325-04e9-a8cb-f2df9536aeb9.jpeg)
実際、きちんと動くためには以下二点気を付けないといけない。
①振り子の連結点をきちんと指定する
②振り子が回る時他の振り子にぶつかる可能性があるので、半径分ずらした
####③適当にゆらして様子を見る
４つの振り子の調整をここでやる。
今回は、
振り子の重さ　＝　5e7：2e6：1e5：1
振り子の長さ　＝　７：５：４：２．５
とした。重さはちょっと大きすぎないかだけど、思惑は以下二つ
①振り子が安定して振れて、かつすぐには止まらないように
②末端の振り子でカオスな現象を見たいため小さくする
あたりです。参考のものも一段目の振り子があまり乱れないので、もっと大きいと思われる。

####④たくさん作って動かしてみる
これは、
①４つの振り子をまとめて指定して、一括してDuplicateする
②等間隔になるように移動位置をまとめて指定する（一括をまとめたままZを入力）
③４つの振り子がぶつからないように4つの振り子のZ位置をここにずらして指定
以上を繰り返して３０個作った。
###（３）OculusGoで動かしてみる
Unityできちんと動くことを確認していつものようにOculusGoで動かしてみよう。
ということで、参考のように綺麗に動かすにはまだまだ調整が必要だけど、まあカオスな４重振り子のカオスな振動は見えました。
ここでは、角度を少しづつずらすとか面倒なことはしていません。
単純に、計算誤差が発生するので自然に振動が乱れてきます。
ということで、以下のような動画が得られました。
[【Unity】４重振り子のカオスな運動をやってみた♬](https://youtu.be/Y3L6R6LD_rw)
<a href="http://www.youtube.com/watch?feature=player_embedded&v=Y3L6R6LD_rw" target="_blank"><img src="http://img.youtube.com/vi/Y3L6R6LD_rw/0.jpg" 
 </a>
※画像をクリックするとYouTube動画につながります
###まとめ
・カオスな4重振り子の運動をUnityで実現できた
・初期値は特に考慮せず、カオス状態になる
・OculusGoでVRできた

・パラメータを変更すればもっといろいろ試せそうである
・角度をその場で変更して観察したい
ボット開発用 LINE クライアントシミュレーターで開発スピードを上げる


以前、[こちらの記事](https://qiita.com/kenakamu/items/803b6c7a81b78648d2d2) でボット開発用 LINE クライアントシミュレーターの紹介をしました。個人的に、なかなか良いとは思っていましたが、Web アプリであることに不満があったので、今回 Electron を使ってアプリケーション化してみました。

# 何が良くなったのか

アプリ版になったことで、画面が見やすくなりました。またシミュレータを常に画面の手前に出すことも出来、デバッグがはかどります。

![Screen Shot 2018-08-01 at 8.24.24 AM.png](https://qiita-image-store.s3.amazonaws.com/0/214116/9521eefa-9831-3264-e0a4-9f2b8c2b16a4.png)

またタスクバーにもアプリらしい感じで表示が出来ます。

# どこから入手するか

[こちらの GitHub レポジトリ](https://github.com/kenakamu/LINESimulator/releases) から Mac 用または　Windows 用をダウンロードして使って見てください。

使い方は[こちらの Readme](https://github.com/kenakamu/LINESimulator/blob/native-app/README.md) 参照。

フィードバックお待ちしております。
jQuery基礎

# jQuery書き方1
```javascript

jQuery(document).ready(function($){
 処理
});
```

JavaScriptと同じで、DOMが生成されてから処理を実行するという意味。
実はもっと短く書ける。

```javascript

$(document).ready(function($){
 処理
});
```
もっと！

```javascript

$(function($){
 処理
});
```

#jQuery書き方2
```javascript

$('セレクター').メソッド(引数);
```
セレクター＝要素の選択
メソッド(引数)＝実際に行う処理

#jQueryメソッド
###要素にクラスを追加する
```javascript

$(function(){
$('p').addClass('color');
});
```
###属性を取得、書き換える
```javascript

$(function(){
$('a').attr('href','http://hoge.com/');
});
```
###要素の内容が変わったら処理実行
```javascript

$(function(){
$('input').change(function(){
alert('なかみがかわった');
});
});
```
###クリックされたら処理実行
```javascript

$(function(){
$('p').click(functin(){
alert('クリックされた');
});
});
```

#まとめ
jQyeryはJSを簡単にかけるようにしたキット
使うには、ファイルを読み込むか、ネットから読み込む
外部ファイルにjQuery書く場合、jQueryファイルを読み込んでから外部ファイル読み込む
jQueryもJSと同じで、要素を選択→実際に行う処理という書き方です

>[ウェブカツ！！](https://webukatu.com/?afid=p5lxu1kvh03rayd2ctjsw4e9bgzq8nom)
Ubuntu 18.04 LTSとWindows10のデュアルブート環境をノートPCに構築する

メモ程度ですが、参考になれば

# なぜ構築しようと思ったか
AmazonのセールでノートPCを購入したが、
1. キーボードで入力した文字が表示されるまで5秒ほどかかる
2. youtubeを見ようとブラウザを起動してページを開くまでに10分ほどかかる
と低スペックすぎてあまりにも重いため、軽いUbuntuを入れてデュアルブート環境を
構築しようと思った。

# 参考URL

## デュアルブート環境手順用
[Windows10とUbuntu16.04のデュアルブート環境構築](https://qiita.com/medalotte/items/4bb5cfa709e93d044f1c)
[windows10 PCでUbuntuをデュアルブート](https://qiita.com/MTwitteJ/items/e6131a351f664df002b9)
[UbuntuとWindowsのDualboot環境を構築する](https://www.ttlglab.com/dualboot-ubuntu-windows/)

## トラブル解決用
[Windows 10/8/7でCドライブを縮小できないことを解決！](https://www.disk-partition.com/jp/articles/unable-to-shrink-c-drive.html)
[対処法：Windows 10/8/7で「ボリュームを縮小することはできません」エラー](https://jp.easeus.com/partition-manager/windows-cant-shrink-volume-partition.html)
[「Ubuntu をインストールしたのに画面が真っ黒で起動しないよ」という場合の操作手順例](https://www.kunihikokaneko.com/free/linuxtoolchain/ubuntuboot.html)

# PCスペック
詳しくは見てないためわからないが、Amazonでは下記のように書かれていた。

Dell ノートパソコン Inspiron 15 Celeronモデル　3552　17Q31
/Windows10/15.6インチ/4GB/500GB

# やったこと
UbuntuのダウンロードからUSBのブートまでは[Windows10とUbuntu16.04のデュアルブート環境構築](https://qiita.com/medalotte/items/4bb5cfa709e93d044f1c)の手順に沿って行った。
Ubuntuはこの時点で最新の[Ubuntu 18.04 LTS](https://www.ubuntulinux.jp/download/ja-remix)に変更
Ubuntuのインストールは[UbuntuとWindowsのDualboot環境を構築する](https://www.ttlglab.com/dualboot-ubuntu-windows/)の手順に沿った。

しかし、上記の手順どおりに行ってもうまく行かないことが2点あった。

# トラブル１．Cドライブが縮小できない
[Windows 10/8/7でCドライブを縮小できないことを解決！](https://www.disk-partition.com/jp/articles/unable-to-shrink-c-drive.html)によると、
Windows10では見た目どおりの空き容量ではなく、移動できない箇所に
ファイルを散りばめられているらしい。
そのため、解決策2のAOMEI Partition Assistantを使用してCドライブを縮小した。
サイトのURLから行くと、メールアドレスを登録しろとか言われる。
登録したくないため、[対処法：Windows 10/8/7で「ボリュームを縮小することはできません」エラー](https://jp.easeus.com/partition-manager/windows-cant-shrink-volume-partition.html)にある
「無料ダウンロードWindows向け」と書かれたボタンを押すことで、
メールアドレスを登録せずにダウンロードすることができた。

あとは手順に沿って、Cドライブを縮小する。私の場合はだいたい230GB分を
Ubuntu用に空けた。

# トラブル２．Ubuntuが起動しない
特にBIOSで起動順番を変えず、DELLのロゴが出てる間にF12を連打し、USBを選択
Ubuntuの選択画面で「try ubuntu without install」を選択。
しかし、その後長時間待っても黒画のまま動作しなかった。

[「Ubuntu をインストールしたのに画面が真っ黒で起動しないよ」という場合の操作手順例](https://www.kunihikokaneko.com/free/linuxtoolchain/ubuntuboot.html)によると、
どうやら起動オプションがデフォルトのままだと動かないらしい。

「try ubuntu without install」にカーソルを合わせて「e」を押下し、
「boot=casper...」のようになっている部分を 「root=/dev/ほにゃらら」に変更する。
私の環境では1番目にマウス、2番目にUSBフラッシュメモリを挿していた。
そのため、とりあえず「sda1」とあたりをつけて「root=/dev/sda1」と入力し、起動。
すると、無事Ubuntuが起動した。

# Ubuntuの操作感
Ubuntuの動作を確認。
1. キーボードの入力文字が遅延なく表示される(むしろそれが当然)
2. ブラウザ起動後youtubeのページを開くまで、10秒以内(むしろそれが当然)
たまにラグがある気がするが、許容できる範囲
満足！！
Railsアプリ作成の最初の準備（cloud9）②Gemfile編集～

#「教師用Railsアプリ」②　Gemfile編集～

前回：プロジェクト「lessonplan」を作成
　　　rails, jQuery Bootstrapをインストール　まで

###１）（今の時点で）使いたいgemをインストールする
デバッグのためのもの、画像アップロードまわりのもの、
PDF化するためのものを中心に、Gemfileに記述。

```rb:Gemfile
gem 'pry-rails'　　#binding.pryを使うため
gem 'better_errors'　　#エラー画面を便利にする
gem 'binding_of_caller'　　#better_errorsと合わせてREPL(対話型評価環境)を構築する

gem 'bcrypt', '3.1.11'  #has_secure_passwordメソッドを使うため
gem 'carrierwave'  #画像アップロード
gem 'mini_magick'  #画像サイズ調整
gem 'pdfkit'       # wkhtmtopdfのラッパー
gem 'wkhtmltopdf'  # HTMLをPDFに変換するツール
```

```shell-session
$ bundle install
```

※cloud9ではbetter_errors設定が必要なので、それも設定。

```config/environments/development.rb
Rails.application.configure do
(省略)
  BetterErrors::Middleware.allow_ip! "0.0.0.0/0"  
end
```

これみたいな、もうすでにいっぱい書いてある中に追記するような時は、
どのあたりに書けばいいか、いつも迷うけど、
とりあえず、今回はendの中に入っていればいいと考えて、一番上に追記してみた。


###２）コントローラー・モデル・ビューを作成
授業案を作成・保存するアプリなので、名前は以下のように設定。

コントローラー名　plans
モデル名　Plan

```shell-session
$ rails g controller plans
$ rails g model plan
```
ルーティングを設定

```config/routes.rb
Rails.application.routes.draw do
  resources :plans
end
```
コントローラーは
ひとまず、indexアクションだけ定義しておく。

```rb:app/controllers/plans_contoroller
class PlansController < ApplicationController
 def index
 end
end
```

viewsのplans配下にnew fileを作成して、indexだけ暫定的に作成。

```erb:app/views/index.html.erb
<h2>hello</h2>
```
マイグレーションも忘れずに

```shell-session
$ rails db:migrate
```

サーバーを立ち上げて、確認。

```shell-session
$ rails s -b $IP -p $PORT
```

⇒　ちゃんと、indexのviewは呼び出せている。



###３）gem 'devise'でログイン機能を実装する準備

```:Gemfile
gem 'devise'
```
```shell-session
$ bundle install
```

```shell-session
$ rails generate devise:install
Running via Spring preloader in process 20488
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
==================================================================
Some setup you must do manually if you haven't yet:
(省略）
```
しばらく触ってなかったので、postgresqlを起動させて

```shell-session
$ sudo service postgresql start
 * Starting PostgreSQL 9.3 database server
   ...done.
```
DBを作成

```shell-session
 $ rails db:create
Created database 'lessonplan_development'
Created database 'lessonplan_test'
```
Userモデルを作成

```shell-session
$ rails generate devise user
Running via Spring preloader in process 21837
      invoke  active_record
      create    db/migrate/20180801110545_devise_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      insert    app/models/user.rb
       route  devise_for :users
```
マイグレーションも忘れずに

```shell-session
$ rails db:migrate
== 20180801110545 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0262s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0121s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0073s
== 20180801110545 DeviseCreateUsers: migrated (0.0460s) =======================
```

今日はここまで。
また明日、続きをやります。
[Mac] ログイン時に~/.ssh直下の秘密鍵をSSH-Agentに登録する方法

# こんな時に便利です！

* 複数のRSA鍵を使用しており、Macにログインした時に、それらの秘密鍵をSSH-Agentに自動的に登録したい

## 本記事で使用している環境

* macOS High Sierra 10.13.6
* OpenSSH 7.6p1

# 1. `~/.ssh`直下の秘密鍵をSSH-Agentに登録するシェルスクリプト

```bash
$ find ~/.ssh -maxdepth 1 -type f | grep -E "\.pub$" | sed -E "s/\.pub$//g" | xargs ssh-add -K
```

1. `find`コマンドで、`~/.ssh`直下のファイルパス名を取得します。
2. `grep`コマンドで、`.pub`拡張子が付いたファイル名（公開鍵のファイル名）に絞り込みます。
3. `sed`コマンドで、末尾の`.pub`を取り除きます。（公開鍵に対応する秘密鍵ファイルのパス名に変換）
4. `xargs`と`ssh-add`コマンドで、秘密鍵をSSH-Agentに登録します。（`-K`オプションで、Macのキーチェーンにパスフレーズを保存することができます）

例えば、以下のようなディレクトリ構成の場合、`~/.ssh/ssh_foo`と`~/.ssh/ssh_bar.pem`がSSH-Agentに登録されます。

```bash
$ pwd
/Users/nia_tn1012

$ ls
config known_hosts ssh_bar.pem ssh_bar.pem.pub ssh_foo ssh_foo.pub

$ find ~/.ssh -maxdepth 1 -type f | grep -E "\.pub$" | sed -E "s/\.pub$//g" | xargs ssh-add -K
Identity added: /Users/nia_tn1012/.ssh/ssh_bar.pem (/Users/nia_tn1012/.ssh/ssh_bar.pem)
Identity added: /Users/nia_tn1012/.ssh/ssh_foo (/Users/nia_tn1012/.ssh/ssh_foo)
```

# 2. Automatorでシェルスクリプトを実行するappファイルを作成

次に**Automator**アプリを使って、先ほどのシェルスクリプトを実行するappファイルを作成します。

Automatorを起動して**新規書類**を作成します。書類の種類は**アプリケーション**を選択し、アクションから**シェルスクリプトを実行**を選択します。（検索窓に「シェル」と入力すると探しやすいですよ）
シェルスクリプトの入力欄に、先ほどのシェルスクリプトコードを入力し、アプリケーションを保存します。

![Automator](https://qiita-image-store.s3.amazonaws.com/0/78881/e81cb359-d575-86f5-073c-fc5447ac3053.png)

> 本記事では`run_on_login.app`として保存しています。


# 3. ログイン項目に先ほど作成したappファイルを追加

システム環境設定を開き、**ユーザーとグループ**を選択します。

ログインユーザーを選択し、**ログイン項目**のタブから項目の追加ボタンを推して、先ほど作成したappファイルを選択します。非表示のチェックボックスはオフでOKです。

![ログイン項目の追加](https://qiita-image-store.s3.amazonaws.com/0/78881/6e630206-0aa6-0f08-14df-10e854bde8cf.png)


これで、ユーザーがMacにログインした時にappファイルが呼び出され、`~/.ssh`直下の秘密鍵ファイルがSSH-Agentに登録するシェルスクリプトが自動的に実行されます。

```bash:以下のコマンドを実行して、鍵が正しく登録されていれば成功です！
$ ssh-add -l
```

# 参考サイト

* [ssh agentをパスフレーズ省略に応用する方法まとめ](https://qiita.com/onokatio/items/397a5899a0ec16c7e60a)
* [Mac OSXで起動時にスクリプトを実行する方法](https://qiita.com/kagerou_ts/items/2606703e70c5eb18fb37)
PhpStormからDocker for Windows上のコンテナでXdebugのリモートデバッグをする

# はじめに

ブレークポイントが使いたいだけの人生だった。

## Xdebug入りのコンテナイメージ準備

公式の`php:7.1-apache` をベースに下記のDockerfileを用意

```dockerfile:Dockerfile
FROM php:7.1-apache
RUN pecl install xdebug-2.7.0alpha1
RUN docker-php-ext-enable xdebug
RUN echo 'xdebug.remote_enable = 1\n\
xdebug.idekey = "PHPSTORM"\n\
xdebug.remote_host = [ローカルPCのIP]\n\
xdebug.remote_autostart = 1\n\
xdebug.remote_connect_back = 0' >> /usr/local/etc/php/php.ini
```

## Docker Composer向けのYAML準備

無くても問題無いがDockerfileを用意したので合わせて用意

```yml:docker-compose.yml
version: '3'
services:
  app:
    build: .
    volumes:
      - "./../:/var/www/html"
    ports:
      - "8080:80"
```

## ディレクトリ構成

こんなイメージ

<img src="https://qiita-image-store.s3.amazonaws.com/0/165884/36f52836-0706-8923-eace-65d4dc9657ad.png" width="50%">

`docker-compose up -d` でコンテナを起動する。

## PhpStormの設定

下記のXdebugとDBGp Proxyのポートを9000に設定し、IDE Keyはphp.iniで設定した物を指定する。

![2018-08-01_23h34_08.png](https://qiita-image-store.s3.amazonaws.com/0/165884/4e30a241-c9de-100a-1880-e92d3047a73e.png)

![2018-08-01_23h34_44.png](https://qiita-image-store.s3.amazonaws.com/0/165884/0c370929-5cc1-bd19-5e9c-f3fee38734dc.png)

## ブレークポイントを設定してブラウザからアクセス

![2018-08-01_23h41_08.png](https://qiita-image-store.s3.amazonaws.com/0/165884/a63361a5-5eb4-88f8-54a5-1c4a07881529.png)


ブレークポイントが使える人生になった。
jQueryメソッド集メモ

jQueryのいろんなメソッドをためていく
### 配列をソートして重複削除

```javascript
$.unique(arr);
```
### クッキー設定

```javascript
// secureはhttps接続の場合のみcookieを送信
$.cookie(keyName, value, {expires : 365, path: ‘/’, domain: ‘example.com’, ‘secure’: true});
```
### display:noneになっている要素を表示

```javascript
$(selector).show();
```
### 要素の親要素を指定

```javascript
$(selector).parent();
// 親要素を削除(自分の削除される)
$(selector).parent().remove();
```
### 配列内に指定した要素が存在するか

```javascript
$.inArray(needle, arr);
```

### フォームを指定

```javascript
document.forms['myform'] // name=myformのフォーム
document.forms[0] // 最初のフォーム
```

### セレクタ指定

```javascript
element.querySelector('input[name=name]')
element.querySelector('input[name=name]').value // 指定した要素の値
```

### 要素の次の要素(兄弟要素全て)を取得

```javascript
element.next()
element.next('.message1') // 次の要素の中でclass=message1の要素のみ取得
```

### 要素をフェードイン・フェードアウト

```javascript
element.fadeIn()
element.fadeOut()
element.delay(1000).fadeOut() // 遅延実行
```

### フォーム操作イベント

```javascript
// キー操作イベント (全キー操作)
$('.target').on('keyup', function () {
     provision = $(this).val();
});

// checkeボックス等の変更イベント
$('.target').on('change', function () {
     provision = $(this).val();
});

// キーが押された時 (日本語入力や、文字の削除は検知できない)
$('.target').on('keypress', function () {
     provision = $(this).val();
});
```

### 後から追加された要素にイベント付与

```javascript
// 親要素にonメソッドで付与したいイベントとターゲット要素を指定する
$('.parent').on('keyup', '.target', function () {
     provision = $(this).val();
});
```

### DOM要素作成

```javascript
// 要素作成
let textarea = $("<textarea class=\"text\">テキストエリアですわ</textarea>");

// カスタムデータ属性追加
textarea.attr('data-name', 'Yorinton');
```

### フォーム要素にフォーカス

```javascript
// テキストエリアにフォーカス
$('textarea').focus();

//　フォーカスを外す
$('textarea').blur();
```

### 選択された部分を取得(Javascript)

```javascript
selection = document.getSelection();
```

### 文字列に変換

```javascript
Object.toString()
```
Azure Resource RateCard API を叩く

# Azure Resource RateCard API を叩く

備忘録として.

1. Auzre AD に`Web アプリ/API`型のアプリケーションを登録し、サブスクリプションの IAM から`所有者`の権限を付けておく.

2. トークンを取得する.

```sh
curl -X POST https://login.microsoftonline.com/{TenantID}/oauth2/token \
   -F grant_type=client_credentials \
   -F resource=https://management.core.windows.net/ \
   -F client_id={Application ID} \
   -F client_secret={Key} \
```

3. 実際に API を叩く.

```sh
curl -L \
   "https://management.azure.com/subscriptions/{SubscriptionID}/providers/Microsoft.Commerce/RateCard?api-version=2016-08-31-preview&%24filter=OfferDurableId+eq+'MS-AZR-0003p'+and+Currency+eq+'USD'+and+Locale+eq+'en-US'+and+RegionInfo+eq+'US'" \
   -H 'ContentType: application/json' \
   -H 'Authorization: Bearer {Token}'
```
【Unity】Live2DモデルをAnimationウィンドウで編集したいとき

# 確認した実行環境

- Unity
    - 2017.4.3f1
    - 2018.1.6f1
- Cubism SDK for Unity
    - Cubism 3 SDK for Unity R8

# 起きた問題

Live2DモデルをAnimationウィンドウでプレビューしようとした際、CubismModelコンポーネントの処理が干渉して編集やプレビューが出来ない問題が発生しました。

![gif1.gif](https://qiita-image-store.s3.amazonaws.com/0/126970/538acc91-a740-1722-5c67-15ae24990455.gif)

# 解決方法

[CubismModel.cs](https://github.com/Live2D/CubismUnityComponents/blob/master/Assets/Live2D/Cubism/Core/CubismModel.cs#L307)の下記の処理をエディタ停止中は処理しないように修正します。

```csharp:Before
// Sync parameters back.
TaskableModel.TryReadParameters(Parameters);
```

```csharp:After
#if !UNITY_EDITOR
            // Sync parameters back.
            TaskableModel.TryReadParameters(Parameters);
#else
            if (Application.isPlaying)
            {
                // Sync parameters back.
                TaskableModel.TryReadParameters(Parameters);
            }
#endif
```

![gif2.gif](https://qiita-image-store.s3.amazonaws.com/0/126970/798f7f86-93f1-6a2e-7535-bbe1f4c91e03.gif)
AmazonEchoSpot(画面付きAlexaデバイス)向けに、話しかけた言葉に応じた画像を表示させるスキルを作ってみた話

Amazon Echo Spotが2018/7/26より発送、ということで、Alexa向けの画面対応スキルを作ってみました。

~~Alexaスキルストアに「かおもじ」スキル公開しています。~~
**開発に時間を取れなくなったので停止しました。
停止は、開発者コンソールのスキル一覧に「停止」があり、数分で止まりました。（2時間以内に停止、と表示されました。）**

githubにソース公開しています。スキルストアに公開しているものとは一部異なります。
https://github.com/hal1999/kaomoji

スキル開発の知識と環境があることが前提ですが、設定ファイルを修正してご自分で配置することで、お好きな言葉や画像への変更にも対応できるはずです。

# スキル概要
スキルストア を参照ください。

# 作るために用意したもの
* Node.js 開発環境 : Node(npm), VisualStudioCode など
* Amazon開発者アカウント : Skillを作るために必須
* AWSアカウント : Skillのバックグラウンド処理のためのLambdaの他、画像ホストにS3を使用しました。データ保存のためにDynamoDBもこれから使用するかも。

# 開発手順
既に画面付きSkillの記事を書かれている方もいらっしゃいますし、今は公式の日本語ドキュメントもありますので、書かないことにします。
ask-sdkはドキュメントが足りないかもしれませんが、一部（全部？　見つからなかっただけかも）ソースとテストコードが公開されているので、追えば仕組みも使い方もだいたい分かります。

# 今後やるかも
* 「かおもじ」スキルの言葉と画像を増やす。
* 言葉に対して、どの画像を提示するのが望ましいのか、ユーザのフィードバックを受け取って学習できるようにする。（これでDynamoDB使いそうです。）
* ↑の学習のリセット
* 言葉ごとに学習するのも非効率なので似たものはまとめて学習とか。。。
* 受け付ける言葉もユーザごとに。。。できないか。。。？
* 任意の言葉をユーザから登録できるように。（Alexaのモデルの仕様上、基本的には想定される単語のリストを事前に登録しておく仕様なので、これは難しそうな気がしている。）

# 余談
* 私は実機を持っておりませんが、開発者コンソールのテスト画面でSpot(Showも)の画面プレビューが出ますし、続けて対話することでセッション状態もだいたい分かりますので、表示するだけならなんとかなりました。画面タップに対応するのは実機が無いと厳しいと思っています。音声認識精度のチェックも、Alexaアプリでできます（画面無しで）。
* 7/26に間に合わせるつもりで7/24に作成して申請していたのですが、公開前審査の指摘対応で手間取って、結局7/30公開になってしまいました。。。審査は結構細かいです。
pythonで簡単におみくじを作ってみよう！【入門者向け】

身近にpythonを始めたけどよくわからない！！という人がいたので簡単なおみくじコードを書かせた時の話。
pythonはいろんな書き方ができるので、書き方に宗教チックな物を感じますね。そこでとりあえず理解しやすそうな3種類のコードを紹介します！

#分岐構文の場合
まずは、入門中の入門から！**分岐構文**です！

```python
import random

num = random.randint(0,60)

if num < 2:
    print("大吉")
elif 2 <= num < 10:
    print("中吉")
elif 10 <= num < 20:
    print("小吉")
elif 20 <= num < 40:
    print("吉")
elif 40 <= num < 50:
    print("末吉")
elif 50 <= num < 55:
    print("凶")
elif 55 <= num < 58:
    print("中凶")
else:
    print("大凶")
```

まず`num = random.randint(0,60)`で乱数を生成し、変数`num`に格納します。その数値がマッチする条件式の`if文`の中身が実行されることで、おみくじを成立させています。
それぞれの結果の確率を変えたい場合は、条件式の値を変更するだけで大丈夫です！

#配列(リスト)を用いた場合
[内包表記](https://qiita.com/y__sama/items/a2c458de97c4aa5a98e7)を存分に使用していますが、条件式や出力したい値を綺麗に並べて書くことができるので、できればチャレンジしてみるといいです！

```python
import random

omikuzi = [
            "大吉"   if i < 2 else
            "中吉"   if 2 <= i < 10 else
            "小吉"   if 10 <= i < 20 else
            "吉"     if 20 <= i < 40 else
            "末吉"   if 40 <= i < 50 else
            "凶"     if 50 <= i < 55 else
            "中凶"   if 55 <= i < 59 else
            "大凶"   for i in range(61)]

print(omikuzi[random.randrange(len(omikuzi))])
```

#乱数生成の一手間を省きたい時
pythonには生成した配列（リスト）の中から1つをランダムに取り出す関数が用意されているようです！用意されているなら使うしかないですね！

```python
import random

omikuzi = [
            "大吉"   if i < 2 else
            "中吉"   if 2 <= i < 10 else
            "小吉"   if 10 <= i < 20 else
            "吉"     if 20 <= i < 40 else
            "末吉"   if 40 <= i < 50 else
            "凶"     if 50 <= i < 55 else
            "中凶"   if 55 <= i < 59 else
            "大凶"   for i in range(61)]

print(random.choice(omikuzi))
```

さらに簡単に書くことができました！

#ちょっとした雑談
今回はpythonの入門としておみくじを行うコードを紹介してみました。特に内包表記や乱数などは、コーディングを続けて行くなら必須な知識なので、ぜひ押さえておきましょう！

#参考にした記事
[pythonの内包表記を少し詳しく](https://qiita.com/y__sama/items/a2c458de97c4aa5a98e7)
Boostnoteはいいぞ

# Boostnoteはいいぞ
最近会社＆プライベートでBoostnoteというメモアプリを使い始めたのですが、これがなかなかいい感じなのでおすすめする記事です

# Boostnoteとは
プログラマ向けのMarkdownノートアプリですが、別にプログラマじゃなくても全然使えるいいノートアプリだと思います。
公式サイトでDLできるよ：https://boostnote.io/
GitHubで公開しているよ：https://github.com/BoostIO/Boostnote
これがOSSとかすごすぎ。。

一応日本人が作っているのですが、あえて日本色は消しているようです（どっかの記事でみた）

# いいところ
## 日々のTodo管理が便利すぎ
とにかくチェックリスト機能が便利すぎます。

```- [ ] aaa```のように入力するとチェックボックスが表示されるのですが、なんと上部に進捗率まで出してくれるのです！

こんな感じで簡単にチェックリストが作成できて進捗が確認できるので便利です。
（Mymyというのは自分が趣味で作っているWebアプリです。プロダクト名だと思ってください）
![Boostnote_1.png](https://qiita-image-store.s3.amazonaws.com/0/120823/0521c894-26e1-f850-65a9-8da4851c5a36.png)

こんな感じに日ごとにノート作成するようにすると、昨日やりたかったけどやれなかったこととかも次の日すぐにわかるので、昨日どこまでいったっけ？なんか忘れているような…的なことが起こりません。
いやーこれほんと便利。好き

## 設計とかパターン洗い出しとかに便利すぎ
結局Todo管理と同じなのですが、チェックリストがぽんぽん作成できるので洗い出しからのデータ作成、みたいな一連の流れがさくさくできます。
あっこれも追加だ！ってなった時に漏れないのがいい。
ほんと好き。

## フォルダ分けとタグ付けができて便利
メモ管理で一番大変なのは、あとからあれどこに保存したっけ？？ってなることですよね。
Boostnoteはフォルダ管理とタグ付けができます！もちろん検索も！

後からよくみる情報は重要フォルダで管理、毎日の記録は日別メモに保存…といった使い分けもできます。
さらにタグ付けをしっかりしておけば、フォルダをまたいだ検索も可能！！

すばらしいですねー

## とにかく設定がいらなくてさくさく使える
これが大きいです。基本新規はMarkdownを指定すればいきなり使えるし、ビューワは横に表示されているし。（表示切替もできます）
初期設定が優秀というか、とくにこちらが何か設定をしたり拡張機能をいれなくてもすぐ使えるのがいいです。

~~VSCodeも便利だよ？と言われますが、いまいち使い方がわかりにくいのと拡張機能ありきなのかなと思ったり。。~~
VSCodeも便利なのですが、VSCodeと違ってファイルの保存先とか名前とか気にしなくていいのも好きです。
とにかくMarkdownメモに特化したスーパーメモ帳としてはBoostnoteがおすすめです！

自分用にごりごりカスタマイズしたい！という強烈なこだわりがない、ライトユーザ向けなのかも。
もちろんBoostnoteもアドインとかカスタマイズとかできますけどね、OSSだし。
でもそれ以上に、標準機能が必要十分すぎて何も言えない。便利すぎ。神かよ

## あとは何より、ローカルで動く
Evernoteとかクラウドサービスは使っちゃダメ！情シスの許可必要です！とかうるさく言ってくる会社を黙らせることができます。
インストールは必要なので、許可下りなかったらどんまいですが。
実はこれが一番大きいのかもしれない。。。
あ、もちろんVSCodeもローカルで動くけどね。

## まとめ
まぁ本当にインストールしたら即使えるし、使い方とか悩むところがほぼないので本当におすすめです。
ちょっと試したら人によってはどはまりすると思いますので、ちょっとだけでも触ってみてはいかがでしょうか！

今日はそんなところです
rubyでの配列同士の比較

#配列同士での比較

rubyで配列1と配列2を付き合わせて同じ値が入っているかどうかを調べる時

array1 = [1,2,3,4,5]
array2 = [5,6,7,8,9]

```
(array1 & array2).present?
```

これでtrueが返ってくる。


#参考記事
https://qiita.com/tomomomo1217/items/c8a2db5bbcdccdb20690
「Messaging API」の新機能、「クイックリプライ」を使ってみました

2018年7月31日にリリースされた「Messaging API」の新機能、「クイックリプライ」を使ってみました。最初だけちょっと分かりづらいところがあったのでメモしておきます。

# 「クイックリプライ」とは
「クイックリプライ」とは、トーク画面で「クイックリプライボタン」を表示させる新機能です。
詳しくは[こちら](https://developers.line.me/ja/docs/messaging-api/using-quick-reply/)でご確認ください。

# ちょっと悩んだ実装方法
最初、どうやったらトーク画面にクイックリプライボタンを表示できるのか、ちょっと悩みました。
やり方としては、LINE BOTからメッセージをsendするときに、メッセージにクイックリプライの情報を付加するとボタンが表示されるようになります。


``` python:
body = {
  'replyToken': event['replyToken'],
  'messages': [
    {
# ここがメインのメッセージ情報
      'type': 'text',
      'text': 'あなたは犬ですか？',
# クイックリプライボタンを表示させる情報（この例では2つのボタンを表示）を付加して一緒にsendする
      'quickReply': {
        'items': [
          {
            'type': 'action',
            'action': {
              'type': 'message',
              'label': 'はい',
              'text': 'はい'
            }
          },
          {
            'type': 'action',
            'action': {
              'type': 'message',
              'label': 'ワン',
              'text': 'ワン'
            }
          }
        ]
      }
    }
  ]
}
```