OmniAICreator/Qiita-1.07M huggingface dataset:
bookmarks（20180301-20180315）

# HTML/CSS

■background-clip プロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/background-clip
久々に使ったので復習がてら。

■flexbox レイアウトで内容がはみ出す理由
http://nanto.asablo.jp/blog/2016/04/03/8063943
IE11で崩れた。

■SVG上のテキストの反転表示
http://javascript-demo.w3c.tokyo/js/status/630

■px, %, em, rem, vw, vhなど、CSSの異なる単位が互いにどのように変換されているかが分かる便利ツール
https://codepen.io/netsi1964/full/NyzmeQ

# Javascript

■2018年に見直した現代的なJavaScriptの記法を紹介するぜ
https://ics.media/entry/17262
・文字数カウントには配列用のスプレッド演算子（...）
・オブジェクトのコピーにもスプレッド演算子（...）
スプレッド演算子便利すぎる

# 広告/SEO/マーケティングなど

■Google、モバイルの画像検索に「商品」タグによるフィルタ機能を実装
https://www.suzukikenichi.com/blog/google-image-search-adds-filter-for-products-by-tag/

■話題の「ads.txt」っていったい何？ 広告主なら必ず知っておきたい広告不正の手口と基礎知識
https://webtan.impress.co.jp/e/2018/02/08/28001
広告について詳しくないのでDSPって？SSPって？など調べながら読んだのですが、広告表示の仕組みってこうなってるんだなるほどな～と
仕組みは理解できた気になりました！

■STP分析を正しく行うために欠かせない！マーケティング初心者必見の「6R」とは
https://ferret-plus.com/9619?utm_campaign=https%3A%2F%2Fferret-plus.com%2F9619&utm_medium=RSS&utm_source=top_rss
特にターゲティングを行うときに有効とのこと。へー！

# UI/UX

■webサイトのモックアップで意気揚々とユーザーテストした結果、白目を剥きました。テスト結果と考察、改善方法
https://note.mu/ayana_guarana/n/n65d307c24611

■個人開発者でもできる、アプリ内課金ユーザーの簡易ペルソナ作成
http://uxmilk.jp/71206

余談ですがこのサービスを提供してる会社のブログにあるこの記事もすごい。
→【廃課金者100人に聞きました】アプリの収益を支える高額課金ユーザーの実態とは？
　http://blog.item-store.net/entry/2018/02/28/150036?utm_source=uxmilk&utm_medium=paid_publicity&utm_campaign=20180301_link_blog

# サービス

■内線不要で使える、iPad無人受付システム
https://receptionist.jp/
・電話係を介さず、チャットツールで担当者全員のスマホに直接通知→チャットワーク対応
・Googleカレンダー連携で会議室の空き状況確認・予約も可能

# ニュース

■CSSで縦書きのサイトを表彰、「たてよこWebアワード 2017」の受賞作発表
https://internet.watch.impress.co.jp/docs/news/1109073.html

■アパレル業界が挑む新たな変革 – 消費者がブランドに求める“透明性”とは？
http://blog.btrax.com/jp/2018/03/08/fashionindustry-transparency/
> 今自分が買おうとしている商品は、誰がどんな環境で作ったのか？どんな原材料が使用されているか、それは地球環境に優しいものか？販売している企業は、社会に対して貢献をしようしているか？
> ニールセンの調査結果や#whomademyclothesキャンペーンの盛り上がりから見受けられるように、サプライチェーンや企業のビジネスのあり方に対する透明性を求める声が高まってきている。

■読み込み速度改善が売上に与える影響と競合とのスピードを比較するツールをGoogleが公開
https://www.suzukikenichi.com/blog/%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E9%80%9F%E5%BA%A6%E6%94%B9%E5%96%84%E3%81%8C%E5%A3%B2%E4%B8%8A%E3%81%AB%E4%B8%8E%E3%81%88%E3%82%8B%E5%BD%B1%E9%9F%BF%E3%81%A8%E7%AB%B6%E5%90%88%E3%81%A8%E3%81%AE/

■フェイクニュース撲滅を目指す、「インターネットメディア協会」設立準備会が発足　業界を超えた連携を視野　ネット媒体、新聞社、出版社など
https://internet.watch.impress.co.jp/docs/news/1108481.html
xampp+NetBeansでtinyMCEのテストをするとアイコンが表示されない件

xampp+NetBeansのPHPプロジェクトにて、tinyMCEを使用した時にテストをしたらアイコンが表示されなかったりする件について。
小一時間ハマったので原因を書き記しておきます。

tinymce.min.jsの呼び出しコードで、ローカルIPからのパスにすると表示されなくなるようです。

これはダメ
× &lt;script src="http://192.168.**.**/js/tinymce/tinymce.min.js"&gt;&lt;/script&gt;

localhost指定ならOK
○ &lt;script src="http://localhost/js/tinymce/tinymce.min.js"&gt;&lt;/script&gt;

相対パスでもOK
○ &lt;script src="./js/tinymce/tinymce.min.js"&gt;&lt;/script&gt;

共通設定PHPファイルなどで ディレクトリをdefineしている方はそちらもご注意ください。
has_one関係のあるモデルをbuildするときは注意

```ruby:User.rb
has_one :user_password
```

```ruby:UserPassword.rb
belongs_to : user
```

このとき、

```ruby:User_controller.rb
@user = User.new
@user.user_password.build
```

こうすると、`undefined method `build' for nil:NilClass`というエラーがでる。
このやり方は、has_many(１対多)の関係にあるモデルにのみ使用可能。

has_one(１対１)の関係にある場合の`build`は、

```ruby:User_controller.rb
@user = User.new
@user.build_user_password
```
となる。
`インスタンス名.build_アソシエーション名`が正しい、has_one関係にあるbuildのやり方

ずっと、`@user.user_password.build`でエラーにはまっていたので、目から鱗でした。
(チラ裏) VPSの通信料金比較

コンテナなら、Arukas 128MBが無料でおすすめ。

* CPU: Xeon(R) CPU E5-2650 v3 @ 2.30GHz (8 cpu)
* DISK: 30GB
* mem: 23g?

## 料金

* DigitalOcean, IDCF, AWS Lightsailが安い気がする

|クラウド|料金|公式URL|
|:--|:--|:--|
| DigitalOcean | 1TBまで無料 | [url](https://www.digitalocean.com/pricing/) | 
| NIFTY | 10TBまで無料 | [url](https://cloud.nifty.com/price/) | 
| IDCF | 3,240GB/月まで無料 | [url](https://www.idcf.jp/cloud/spec/internet.html) |
| sakura | プランごとに定額。 | [url](https://cloud.sakura.ad.jp/specification/network/) |
| GMO | 無料? | [url](https://www.gmocloud.com/rs/price/) |
| Azure | in無料。out 5GBまで無料。$0.12/GB | [url](https://azure.microsoft.com/ja-jp/pricing/details/bandwidth/) |
| gcp | in無料。out $0.12/GB | [url](https://cloud.google.com/compute/pricing?hl=ja) |
| AWS EC2 | in無料。out 最初の1GBは無料。超えたら$0.09/GB | [url](https://aws.amazon.com/jp/ec2/pricing/on-demand/) |
| AWS Lightsail | in無料。out 最初の1TBは無料 | [url](https://aws.amazon.com/jp/lightsail/) |

$0.12 = およそ13円


* [データ転送料金が高すぎたので、AWSからさくらクラウドに移行しました | moimoiの毎年家族で海外旅行するためには？](https://moimoi.xyz/2016/08/05/2467)

* 仮想マシン
    * DigitalOcean : $0.007/時 [url](https://www.digitalocean.com/pricing/) 1cpu,ssd25gb,1tb
    * NIFTY : (起動中)4円/時,(停止中)3円/時 or 2,210円/月 (1vCPU・512MB)
    * IDCF : 1円/時、1ヵ月500円から。[url](https://www.idcf.jp/cloud/price.html)
    * sakura : 7円/時 [url](https://cloud.sakura.ad.jp/specification/server-disk/)
    * GMO : 9円/時 [url](https://cloud.gmo.jp/price/)

## LightsailとEC2の違い

https://dev.classmethod.jp/cloud/aws/lightsail-ssh-ip-filter/

> Amazon Lightsailの機能では通信元IPアドレスで制限をすることができません。(略)iptablesを使う
GoogleSpreadSheetで、指定した範囲の、データが含まれている最終行を取得する方法。

#やりたいこと
下記のようなデータがあります。

| #       |       動物 | 
|:-----------------|:-----------------|
| 1             |              パンダ | 
| 2           |            うさぎ |
| 3           |            コアラ |
| 4           |             |
| 5           |             |

**A列「#」を除いて、**データが含まれる最終行（上記の場合は4）を取得したいと思います。
※1列目の"#"も、データに含まれているものとします。

#結論

該当列の値を配列で取得し、その数を取得することで最終行数に代替します。

```javascript
function getLastRowWithValue() {
  const sheet = SpreadsheetApp.getActiveSheet(); 
  const columnBVals = sheet.getRange('B:B').getValues(); // B列「動物」の値を配列で取得
  const LastRow = columnBVals.filter(String).length;  //空白を除き、配列の数を取得

  Logger.log(LastRow); //4.0
}
```


- [google apps script - Determining the last row in a single column - Stack Overflow](https://stackoverflow.com/questions/17632165/determining-the-last-row-in-a-single-column)

#上手くいきそうでいかない方法

##[Sheet.getLastRow()](https://developers.google.com/apps-script/reference/spreadsheet/sheet#getLastRow())を使う

```javascript
function getLastRowWithValue() {
  const sheet = SpreadsheetApp.getActiveSheet(); 
  const LastRow = sheet.getLastRow();

  Logger.log(LastRow); //6.0
}
```

データが含まれる最終行を返却するメソッドですが、今回はA列に値が入っているので期待値は返ってきません。

##[Range.getLastRow()](https://developers.google.com/apps-script/reference/spreadsheet/range#getLastRow())を使う


```javascript
function getLastRowWithValue() {
  const sheet = SpreadsheetApp.getActiveSheet(); 
  const range = sheet.getRange('B:B'); //B列を指定
  const LastRow = range.getLastRow();

  Logger.log(LastRow); //6.0
}
```
データ有無に関係なく、指定範囲の最終行が返却されてしまいます。

#参考サイト

- [google apps script - Determining the last row in a single column - Stack Overflow](https://stackoverflow.com/questions/17632165/determining-the-last-row-in-a-single-column)
- [最終行を取得するGASスクリプト:Googleスプレッドシートの使い方](最終行を取得するGASスクリプト:Googleスプレッドシートの使い方)
Python3で通信内容確認する方法メモ

```
import requests
import logging


import http.client as http_client
http_client.HTTPConnection.debuglevel = 1
logging.basicConfig()
logging.getLogger().setLevel(logging.DEBUG)
requests_log = logging.getLogger("requests.packages.urllib3")
requests_log.setLevel(logging.DEBUG)
requests_log.propagate = True
[sakura vps] さくらのvps（nginx）でサブドメインを設定する

## 概要
さくらのvps（nginx）でサブドメインを設定する方法です。

例
hogehoge.com
stagint.hogehoge.com

## ネームサーバーにドメインを設定
1. 下記のURLへアクセスする
https://secure.sakura.ad.jp/menu/dns/

2. 「ゾーンの設定」をクリックする
3. 「変更」をクリックする
4. 下記の項目を追加する

|用語  |記述  |
|---|---|
|エントリ名  |staging  |
|種別  |別名（CNAME）  |
|値  |@  |
|DNSチェック  |する  |
|TTLの指定|なし|

5. 上記項目を追加したら「新規登録」をクリックする

## サーバーのバーチャルホストを追加

1. SFTPで「/etc/nginx/conf.d/」にアクセスします。
2. 「default.conf」をダウンロードし、ファイル名を「stagint.hogehoge.com.conf」へ変更します。
3. ファイルを開き、内容を下記のように変更します。

```
server {
  server_name stagint.hogehoge.com;
  location / {
    root   /usr/share/nginx/html/staging;
    index  index.php index.html index.htm;
  }
}
```
4. ファイルをアップロードします。
5. ターミナルからサーバーへログインし、下記のコマンドを入力しサーバーを再起動します。

```
$ sudo nginx -s reload
```

## まとめ
ネームサーバーにドメインを設定し、サーバーのバーチャルホストを追加、再起動することでサブドメインを設定できます。




## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

- Qiita　プログラミングに関する情報はこちら
http://qiita.com/nadonado


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
CloudFrontとOAuth認証が必要なElasticBeanstalkの連携



ElasticBeanstalkで作ったWebアプリ環境（Devise+omniauth入）をELBで受けるのではなく一旦CloudFrontで受けるためにどんなとこに苦労したかの記事です。

Webアプリケーションの環境
---

* rails
	* 認証系にはDeviseを利用
		* Googleアカウントと紐付けている(重要)
	* cookieを使ってる（重要）
	* ElasticBeanstalkをつかっている
	* あるパスへのアクセスはAPI Gatewayに流す


苦労した点１：CloudFrontとELBの証明書の違い
---

SSL Certificateには`*.yasai.com`で設定されていたとします。

![スクリーンショット 2018-03-22 14.29.31.png](https://qiita-image-store.s3.amazonaws.com/0/18331/89f418ae-dd1b-0e45-2489-aeff357118ce.png "スクリーンショット 2018-03-22 14.29.31.png")

Create OriginでWebアプリ環境への設定を施します。


#### 間違い

ここで、使われているELBが選択肢現れるからといって、そのまま選んではいけません。

なぜなら、CloudFront -> ELBで参照するのは`hogehoge.ap-southeast-1.elb.amazonaws.com`なので、全くドメインが合っていません。


![スクリーンショット 2018-03-22 14.34.56.png](https://qiita-image-store.s3.amazonaws.com/0/18331/ae80d615-d1a3-ead4-1ae5-b4aeb80cae2e.png "スクリーンショット 2018-03-22 14.34.56.png")

#### 正解

ここはちゃんとRoute53でELBのエンドポイントに対し、 `tomato.yasai.com` の名前でとってあげて、下記のように設定すべきです。

![スクリーンショット 2018-03-22 14.58.23.png](https://qiita-image-store.s3.amazonaws.com/0/18331/e73ff14f-0391-3815-2523-e4cabb8c4a8d.png "スクリーンショット 2018-03-22 14.58.23.png")


苦労した点２：GoogleへのOAuthの失敗、ユーザーが全然ログインできない
---

結論からいうと、CloudFrontのキャッシュはちゃんとしようということになります。

* なぜユーザーがログインできなかったか？
	* CloudFrontはCookie情報をWebアプリに送っていなかった
* GoogleのOAuth認証が失敗した
	* ここは詳しく調べれてないのですが、callbackでWebアプリに戻ってくるときに失敗が発生していました。queryやHeaderなどのキャッシュが原因と見ていますが断定はできません。


なので、どのheader,query,cookieならWebアプリに送っていいか、なにをキャッシュすべきか適切に設定しましょう。
私は今回CloudFrontの役割はキャッシュではなかったので、 ~~ちょこちょこ設定するのはさすがにめんどくさすぎたので~~ ほぼキャッシュさせないようにしました。


![スクリーンショット 2018-03-22 15.07.29.png](https://qiita-image-store.s3.amazonaws.com/0/18331/6276cb46-525b-33a6-5c27-3940193aa5ba.png "スクリーンショット 2018-03-22 15.07.29.png")


![スクリーンショット 2018-03-22 15.07.23.png](https://qiita-image-store.s3.amazonaws.com/0/18331/19486a2b-c784-68fc-1483-c86a0e3f4652.png "スクリーンショット 2018-03-22 15.07.23.png")


苦労した点３：API GatewayとCloudFrontとの連携は気をつけるべし
---

これは前述のWebアプリにCookie情報やheader情報を送っていたのに対して、API Gatewayに対してはなんでもかんでも送ってはいけません。



[この記事](https://dev.classmethod.jp/cloud/cache-api-gateway-by-cloudfront/)にもある通り、Host情報をCloudFrontからAPI Gatewayに送っていたために正常な動作をしませんでした。
クロスオリジン対応メモ

1つでも欠けていると容赦なくエラーで正しくデータ取得ができず数時間ハマってしまうのでメモ。

# モデルケース
- サービスURL
 - `https://sample-service.com`（本番）
 - `http://localhost:9000`（開発）
- API URL
  - `https://special-api.com`（本番）
  - `http://localhost:3000`（開発）

## アクセス経路
- `https://sample-service.com`の画面から `https://special-api.com/api/users` を呼び出す
- `http://localhost:9000`の画面から `http://localhost:3000/api/users` を呼び出す

# URL送信元（サービス）
## 開発中
- レスポンスヘッダーを書き換えている設定があれば取り除く（サーバー側で設定しているレスポンスヘッダーが正しく受信できず、接続エラー扱いになる）
- 基本的にサーバー側で設定するので、サービス側であれこれやらなくていい（余計なことはしない）

## 本番対応
- サービスがSSLで暗号化されている場合、外部APIで呼び出すURLが「http」だとやはりエラーになってしまう。
- SSLで暗号化されているサービスの場合、外部API呼出時のベースURLも「https://〜」に設定する必要がある。

# URL送信先（サーバー）
## 開発中
- Railsの場合、[rack-cors](https://github.com/cyu/rack-cors)を使うのが一番手軽。
  - [Railsとvue.jsなどのJSフレームワークで、クロスドメイン通信（CORS）の設定をしたい！](https://qiita.com/tanshio/items/f35efa7321066d60fc62)
  - これを設定した上で、サービス側で受信したレスポンスヘッダーにクロスオリジン許可設定が入っていない場合、サービス側の設定を疑う。

## 本番対応
- SSLで暗号化されてるサービスから呼び出したい場合、こちらもSSL対応して「https〜」のURLで正しく呼び出せるように整えておく必要がある。
Let'sEncrypt の自動更新に失敗して期限が切れてた

## 環境
* OS: CentOS 6.9
* Apache 2.2系

## Let'sEncrypt のステータス
* version: 0.20
* 導入日: 2017年9月中旬
* 期限切れ日: 2018年3月中旬
* 12月の自動更新はうまくいってたらしい

## ログの確認

```エラーログ
/opt/eff.org/certbot/venv/lib/python2.6/site-packages/cryptography/__init__.py:26: DeprecationWarning: Python 2.6 is no longer supported by the Python core team, please upgrade your Python. A future version of cryptography will drop support for Python 2.6
```

とりあえずこのキーワードでググる。
公式サイトが引っかかる。
[DeprecationWarning について](https://letsencrypt.jp/usage/centos6-error.html#DeprecationWarning)
バグっぽいのでアップデートすれば治るらしい。

## certbot をアップデートする
といっても、 CentOS6 だと yum のリポジトリに登録されていないので以下の手順で。

### certbot-auto の位置を確認する
`which certbot-auto`
CentOS6 だとそれぞれ置いてある位置が違う。
自分の場合は `/user/bin/certbot-auto` にあった。

### 最新版をダウンロードして設置
```prompt
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
mv certbot-auto /user/bin/
```
`/user/bin/` はさっき調べた時のディレクトリ。
上書きするか聞かれるので `y` を押す。

## 証明書の更新してみよう
`/usr/bin/certbot-auto certonly --no-self-upgrade --post-hook "service httpd graceful"`
cron に書いてある記述をそのまま実行。
先ほどのエラーは出なくなった！
が、違うエラーが出てきた。

```ログ
All renewal attempts failed. The following certs could not be renewed:                                                                               
  /etc/letsencrypt/live/xxxx.com/fullchain.pem (failure)
```

保存に失敗した系？

## 新しく申請する

### 証明書フォルダ削除
削除と書いたが、やっぱり削除は怖いので移動(チキン)。

```prompt
mkdir /etc/letsencrypt/live/_backup
mv /etc/letsencrypt/live/xxxx.com /etc/letsencrypt/live/_backup
```

### 新規登録
```prompt
/usr/bin/certbot-auto certonly --standalone -d xxxx.com
```

### 再びエラー

```ログ
certbot.errors.StandaloneBindError: Problem binding to port 443: Could not bind to IPv4 or IPv6.
```

443 のポート開いてると駄目らしい。

### Apache 閉じて再実行
```prompt
servce httpd stop
/usr/bin/certbot-auto certonly --standalone -d xxxx.com
```
すると。

```ログ
Your cert will expire on 2018-06-00. To obtain a new or tweaked version of this certificate in the future, simply run certbot-auto again. To non-interactively renew *all* of your certificates, run "certbot-auto renew"
```
成功したっぽい。

### Apache を起動
```prompt
service httpd start
```

### Apache でエラー
ログは喪失したが、要約すると「証明書の指定間違ってるよ」とのこと。
なんで？って思い証明書の位置を見にいったら、ディレクトリが変わっていた。
`/etc/letsencrypt/live/xxxx.com-0001`
なんで？

```prompt
vim /etc/httpd/conf.d/ssl.conf
```
該当する行をバシバシ `-0001` を追加。

### Apache をもう一度起動
```prompt
service httpd start
```

今度こそ起動。
サイトも SSL になっていた。

## ちゃんとメンテしよう
監視もしよう。
WRF | WPS | GFS > link: Analysis, reanalysis, forecast—what’s the difference? | 抜粋 > What’s the difference between FNL and GFS?

WRF(Weather Research and Forecasting Model)とその前処理であるWPS、およびWRFの後続処理のF***T関連。

これまで使ってきたFNLというデータがサーバー不調により取得できない状況が続いている。
指示されたリンク先の情報を見ているが、「どのファイルをどのように使えばよいか」が見えてこない。

### link: Analysis,	reanalysis,	forecast—what’s	the	difference?

ファイルの種類の１つとしてAnalysisという用語が出てくる。自分が聞いたことがあるのは「再解析(Renalaysis)」データ。

これらの用語についての資料を下記に見つけた。
[pdf: Analysis,	reanalysis,	forecast—what’s	the	difference?](https://rda.ucar.edu/datasets/ds083.2/docs/Analysis.pdf)

### 抜粋: What’s the difference between FNL and GFS?

上記pdfの冒頭には、「FNLvGSS.pdfという資料を見てから読んでください」という記載がある。
[What’s	the	difference	between	FNL	and	GFS?](https://rda.ucar.edu/datasets/ds083.2/docs/FNLvGFS.pdf)

この資料を抜粋してみた。
誤訳の恐れはあるが、下記記載しておく。

- underlying model and data assimilationは同じ
- 初期条件にassimilateされる"real"データがわずかに異なる
- GFSが先に処理開始される
- FNLはGFSより遅れて処理開始される
    - 利用可能な観測データすべてを含めるため
        - FNLはGFSより10%ほど観測データが増える
- 6時間刻みのFNLデータに基づくforecastは次のGFS data assimilationに使用される
- ... balloons関連以降の訳は未実施

### AnalysisとReanalysisの違い

再度、下記の資料に戻って読んでみた。
[pdf: Analysis,	reanalysis, forecast—what’s the difference?](https://rda.ucar.edu/datasets/ds083.2/docs/Analysis.pdf)

要点がつかみにくい。書いた人は頭の良い人なのだろう。

必要としている情報として「AnalysisとReanalysisの違い」について着目してみた。

> Reanalyses are a special type of analysis done with a fixed software system. Both the data assimilation and the forecast model software are “frozen” for the time span of a reanalysis. 

ReanalysisはAnalysisの一種であり、softwareを固定化した状態で処理されるようだ。

> Both analyses and reanalyses experience shifts due to changes in observation systems (e.g. when a new satellite comes on-line or an old one is decommissioned). Researchers using reanalysis time series should carefully check times of observed shifts with times of observation system shifts

Observation systemsの変更によるshiftsはReanalysis(Analysisの一種)にも起きうる。
DockerのPostgreSQLからCSVファイルを出力する

- Dockerのexecコマンドでできる
- psqlのpagerをoffにしないとmoreが起動してしまう
- 末尾に `(196 rows)` みたいなのが出る

以上の問題を解決した結果。

```
docker exec -it my-db-name psql -P pager=off -U postgres -d n_coin -c "select * from users order by \"userId\";" -A -F, | sed '$d' > users.csv
```

こんな感じ。

備忘録として。
LANポートが4つあるサーバーで冗長化したい

LANポートが4つあるサーバーで冗長化したいと思ってまして
ネットワーク管理会社に
使えるか？と問い合わせたのですが

何か過去使えると言われたような気がします……

http://www.atmarkit.co.jp/ait/articles/1402/06/news129.html
とか

NIC チーミング モード 
802.1ad チーミング スイッチ

とか
調査するためメモ失礼します。
[Swift4]アラートを表示 Display Alert

Swift初心者ですが、どんどん発信していこうと思います。

今回は、「アラートを表示」させてみました。

#まず、ボタンをMain.storyboardに作ります。
(Xcodeの右下で"button"と検索すれば、すぐ見つかります。)

![Screen Shot 2018-03-22 at 14.28.06.png](https://qiita-image-store.s3.amazonaws.com/0/216701/c7bb560e-a53f-45ad-dbff-88f843cd2fa2.png)

「アラートを表示」という名前にしてみました。
次に、Xcode右上の○が2つ重なっているボタン
#"Show the assistant editor"をクリック
ViewControllerの一番下らへんにコネクトします。
(「アラートを表示」からcontrolを押しながらドラッグ&ドロップです。)

![Screen Shot 2018-03-22 at 14.26.15.png](https://qiita-image-store.s3.amazonaws.com/0/216701/1a2074f8-4c03-648e-f1f9-5fab783ad2e7.png)

Connection: Action
Name: displayAlert
Type: UIButton
Event: Touch Up Inside
Arguments: None
に設定します。
#次に、その中身を編集していきます。

```ViewController.swift
import UIKit

class ViewController: UIViewController {
    //@IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    // 今回の「アラートを表示」はここから
    @IBAction func displayAlert() {
        let title = "アラートテスト"
        let message = "タップしてくれてサンクス."
        let okText = "ok"

        let alert = UIAlertController(title: title, message: message, preferredStyle: UIAlertControllerStyle.alert)
        let okayButton = UIAlertAction(title: okText, style: UIAlertActionStyle.cancel, handler: nil)
        alert.addAction(okayButton)
        
        present(alert, animated: true, completion: nil)
    }
    // 今回の「アラートを表示」はここまで
}

```

#最後に、Xcodeの左上の実行ボタンでビルドしてみましょう。

<img width="258" alt="Screen Shot 2018-03-22 at 14.29.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/216701/2b607fd5-7c19-d0c5-4800-6ded187c3e74.png">

しっかり、アラートは表示されましたか？^_^
「FizzBuzzを書いてください」「まずTensorFlowをインポートして・・・」を自分も書いてみた

下のツイートとかで有名になったFizzBuzz-TensorFlowネタ。今日もちょっと見かけたので思いつきで書いてみた。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">IT会社面接官：「数字を列挙し、3の倍数ならfizz、5の倍数ならbuzz、15の倍数ならfizzbuzzを出力するプログラムを書いてください。」<br>面接を受けている人：「では、まずTensorFlowをインポートします…」<a href="https://t.co/UNk2jH5rfn">https://t.co/UNk2jH5rfn</a></p>&mdash; Graham Neubig (@neubig) <a href="https://twitter.com/neubig/status/734946340292067328?ref_src=twsrc%5Etfw">2016年5月24日</a></blockquote>

実装はたくさんあって「FizzBuzz TensorFlow」でウェブ検索すればたくさん出てきます。最適化器で機械学習として解くのが多いけれどTensorFlowは「数値微分による最適化可能な実行可能な計算グラフを作成するフレームワーク」であり、かつ論理演算のオペレーションも文字列操作のオペレーションも備えているため素直に実装できます。

__「そこらへんのディープラーニングしかできないフレームワークとは違うのだよ！！！」__

API調べながら思い出しながら10分位で書けました。素直なバージョンもウェブ検索で結構見つかりますが```tf.case```とか```tf.control_dependencies```あたりでイロイロ凝ったことできるというのは覚えておいてください。

```python
import tensorflow as tf

a = tf.Variable(0, name='counter')

with tf.control_dependencies([tf.assign_add(a, 1)]):
    b = tf.case({
        tf.equal(tf.mod(a, 15), 0): lambda: tf.constant("FizzBuzz"),
        tf.equal(tf.mod(a, 3), 0): lambda: tf.constant("Fizz"),
        tf.equal(tf.mod(a, 5), 0): lambda: tf.constant("Buzz"),
        }, default=lambda: tf.as_string(a))

sess = tf.Session()
sess.run(tf.global_variables_initializer())

for i in range(100):
    print(sess.run(b).decode())
```
Windowsで無料でRubyの補完を効かせたい場合は、VSCodeを使おう

# TL;DR
Rubyの開発は基本的にUNIX(Linux)系のOSで行ったほうがスムーズだけど
会社の方針でRailsをVagrant + Windowsで開発されているなんて方もいるはず。
その場合、おおよそRubyMineが最適解なんだろうけど、お金の関係で使えないというのも多い。
EclipseとかのIDEも補完できそうだけど、軽いエディタを使いたい

# Windowsにおける補完用Gemの現状
テキストエディタで補完する場合、補完用のGemを入れる

## Solargraph
Windowsで動く。開発も結構積極的みたい。

## rcodetools
Windowsで動かない。
開発はメンテされてるけど、Solargraphほど活発じゃない

## rsense
Windowsで動かない。
開発が止まったり、再開したりでよくわからない。

# 設定手順
ぶっちゃけSolargraphに対応しているプラグインがあるエディタならなんでもいいけど
VSCodeはプラグイン一個入れてGem入れれば環境が揃うので良さげ
（正確にはSolargraphに関しては別にプラグインがあるんだけど、Ruby用のプラグインを入れるとSolargraphのプラグインも自動で入る）

1. Rubyを入れる。
ruby2.4以上からインストーラーが変わってDevKitがいらなくなった。
DevKitの代わりにMsys2を使ってGemを入れればいいことになった。
別の方が書いた記事だけど、詳しくは以下の記事を参照するといいと思う
> https://qiita.com/ibarakids/items/ad04ba4ae80f2f144d9c

2. VSCodeをインストールする
以下のURLからダウンロード
> https://code.visualstudio.com/Download

3. Ruby用の拡張をインストールする。
VSCodeの拡張でRubyって検索して出てきた名前が「Ruby」ってなってるやつを入れる
コマンドで入れる場合は、以下のURLのものを入れる
> https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby

4. Gemを入れる
3で入れた拡張に必要なGemを入れる。インストールはMsys2から。

```bash
# 補完用
gem install solargraph

# 文法チェック
gem install ruby-lint

# デバッグ用
gem install ruby-debug-ide -v 0.6.0
gem install debase -v 0.2.2.beta10
```

# 終わりに
他のエディタもいろいろ試してみたけど、現状ではVSCodeが一番シンプルだと思う。
VSCodeには他にもRubyとかRails用の拡張がいろいろあるので、入れてみてもいいかも
Twitterクライアントを作ろうとして認証で詰まった話

 ちょっとしたツイッタークライアントをJavaで作ろうと思い立って、Twitter4jというライブラリを導入して開発を進めたところ、認証がうまく行かずエラーが出たので、その時の解決方法のメモ書きを残しておきます。また、同様のエラーがC#のライブラリCoreTweetでも発生し、同様の解決方法で解消できたので書いておきます。

## エラー発生時
 Twitter4j・CoreTweetどちらにおいてもOAuth認証時にエラーが発生。
Consumer KeyとConsumer Secretはソース内で指定し、PINコードを入力し認証する方式で記述していました。

# 解決方法

[Twitter Application Management](https://apps.twitter.com/)
から認証のうまく行っていないアプリケーションを選択。

Keys and Access Tokensのタブを開くとConsumer KeyやConsumer Secretが表示されている画面が表示されます。

![keysAndAccessTokens.PNG](https://qiita-image-store.s3.amazonaws.com/0/236980/f9264f95-2aab-1575-614c-f6374e579f39.png)

下の方に表示されているRegenerate Consumer Key and Secretを選択し（画像内青矢印)、Consumer KeyとConsumer Secretを再生成します。
このとき再生成したKeyがきちんと動いているか（おそらく）確認するための、右上に存在するTest OAuth（画像内緑矢印）をクリックしたほうが良いかもしれません。

その後アプリケーション内で用いていた古いConsumer KeyとConsumer Secretを新たに生成したものに書き換えたところ、認証に成功しツイートの投稿やツイートの取得をすることができるようになりました。

---
ソース内を見直しても他のサイトと同様の書き方をしているし、なぜ認証できないんだと思ったらTwitter側のConsumer KeyとConsumer Secretがちゃんと動いていなかった、という結果でした。（もしかしたら違うのかもしれないけど、自分の感覚的にはそう。）
Twitterクライアント開発については沢山わかりやすい記事が転がっているのでそちらのほうで。
同様の問題で困っている人の少しでも参考になれば幸いです。
Raspberry Piで有線・無線のどちらでネットにつなぐかを設定する（Raspberry Pi以外でも可？）

# 背景
Raspberry Pi3（以下 ラズパイ）の有線・無線LANをそれぞれ異なるルータに接続した。
しかし、有線LAN側のルータは外部のネットワークにつないでいない。
この状態で外部のネットワークに接続しようとすると、有線LANの方に接続を試みようとしてしまい、結果的に接続ができない。
どうにかして無線LANの方を通してインターネットに接続させたい。

この設定は私の環境でしか試していないため、他の環境で正しく動作するかはわからない。
また、もっと良い設定方法があるのかもしれない。

**【追記】**
この設定を行ってから、一部のアクセス（SSLを用いている？）ができなくなった。設定のせいなのか、ルータ等の設定が悪いのかはわからない。
試す場合はそのことを頭に入れておいて下さい。

<img src="https://qiita-image-store.s3.amazonaws.com/0/145051/51edd213-5791-c334-2beb-485a172faaca.jpeg" width=50%>

# 環境
- Raspberry Pi3 model B
- Raspbian 8.0(jessie)
- 有線も無線もDHCP設定

# 解決策
メトリックとか優先順位とかいろいろあってよく分からなかったが、とりあえず以下の方法を見つけた。

有線LAN側のデフォルトゲートウェイを設定させなければ、無線LANのデフォルトゲートウェイが使用されるらしい。
`/etc/dhcpcd.conf`の設定を書き換える（追記する）。

``` sh
# root権限で編集する。vimの部分はお好きなエディタを（nanoとか）
$ sudo vim /etc/dhcpcd.conf
```

``` sh
# 有線LANのデフォルトゲートウェイを無効にするための設定
# static routers：デフォルトゲートウェイ
# static domain_name_servers：NDSサーバ
# 全てを無効(0.0.0.0)にする
interface eth0
static routers=0.0.0.0
static domain_name_servers=0.0.0.0
```

ラズパイを再起動する。インタフェースの再起動では無理(?)。

``` sh
$ sudo reboot
```

# おわりに
固定IPを使用している場合については試していないが、おそらく期待した動作をしてくれると思う。
Raspberry Pi以外の環境でも設定手順は異なるだろうが、同じ設定でいけると思う。

また、Windowsでも同様に有線・無線LANが接続されている状態で、有線LANのデフォルトゲートウェイを設定しなければ、無線LANの方でインターネットに接続してくれる。
`npm@5.7.[01]` で `npm pack` や `npm publish` して作成されるtgzのタイムスタンプがおかしいのでご注意ください


# 概要
`npm@5.7.[01]` で `npm pack` や `npm publish` して作成されるtgzの中のファイルのタイムスタンプがおかしいのでご注意ください

https://github.com/npm/npm/issues/19968

# `npm@5.7.1`
`npm@5.7.0` も同様です。

```
% npm -v
5.7.1
% npm pack
nroonga-0.3.1.tgz
% tar -ztvf nroonga-0.3.1.tgz
-rw-r--r-- 0/0            1035 1970-01-01 09:00 package/package.json
-rw-r--r-- 0/0             561 1970-01-01 09:00 package/binding.gyp
-rw-r--r-- 0/0           60927 1970-01-01 09:00 package/npm-shrinkwrap.json
-rw-r--r-- 0/0            2380 1970-01-01 09:00 package/README.md
-rw-r--r-- 0/0             488 1970-01-01 09:00 package/examples/prompt.coffee
-rw-r--r-- 0/0             283 1970-01-01 09:00 package/examples/test.js
-rw-r--r-- 0/0              80 1970-01-01 09:00 package/lib/nroonga.js
-rw-r--r-- 0/0           26530 1970-01-01 09:00 package/license/lgpl-2.1.txt
-rw-r--r-- 0/0            7935 1970-01-01 09:00 package/src/nroonga.cc
-rw-r--r-- 0/0            1394 1970-01-01 09:00 package/src/nroonga.h
-rw-r--r-- 0/0            6954 1970-01-01 09:00 package/test/database.test.js
```

# `npm@5.6.0`
```
% npm -v
5.6.0
% npm pack
nroonga-0.3.1.tgz
% tar -ztvf nroonga-0.3.1.tgz
-rw-r--r-- 0/0            1035 2018-03-20 10:31 package/package.json
-rw-r--r-- 0/0             561 2017-09-22 14:51 package/binding.gyp
-rw-r--r-- 0/0           60927 2018-03-20 10:31 package/npm-shrinkwrap.json
-rw-r--r-- 0/0            2380 2017-10-04 09:48 package/README.md
-rw-r--r-- 0/0             488 2017-08-14 11:03 package/examples/prompt.coffee
-rw-r--r-- 0/0             283 2017-09-22 14:12 package/examples/test.js
-rw-r--r-- 0/0              80 2017-09-25 10:19 package/lib/nroonga.js
-rw-r--r-- 0/0           26530 2017-08-14 11:03 package/license/lgpl-2.1.txt
-rw-r--r-- 0/0            7935 2018-03-22 13:54 package/src/nroonga.cc
-rw-r--r-- 0/0            1394 2018-03-22 13:54 package/src/nroonga.h
-rw-r--r-- 0/0            6954 2017-10-02 14:42 package/test/database.test.js
```

# まとめ
`npm publish` するときは `npm@5.6.0` などで行うのが良さそう

**追記: 2018-08-30** 最新のnpmではこの問題は解決済なので最新のnpmを使うのが一番良いです

**追記2: 2018-08-30** [こちらのコメントもご参照ください]( https://qiita.com/abetomo/items/46568c6db3169da49c78#comment-4c173c4162b97415358c)
Concourseのハマリポイント

## 概要
Concourseを四半期運用し、ある程度運用できるようになりました。
ここではパイプラインの設定と運用していてことについて説明します。

もしGKEで起動する場合にはこちらの「[GKEでConcourseを使うには](https://qiita.com/watawuwu/items/04d4c8c9cf68b3442355)」も是非どうぞ。

## 環境
- Kubernetes(GKE): v1.9.2
- Concourse: v3.9.0
- COS: v4.4.86+

## ハマリポイント

### ~~resource-typeのtagを変更しても更新されない~~
==============================================================
**v3.10で解決したみたいです**
https://concourse-ci.org/download.html#v3100
> Previously, tags on a resource type didn’t get no respect. They are now respected.

==============================================================


~~以下の`resource-type`のタグを`v1`から`v2`に変更してもDockerイメージは更新されません。
これはタグが更新されても`docker pull`が実行されないためのようです。~~

``` yaml
resource_types:
- name: dummy
  type: docker-image
  source:
    repository: watawuwu/test-dummy-resource
    tag: v1
resources:
- name: dummy
  type: dummy
```

#### ~~Workaround~~
~~`resource-type.name`の名前を変更しちゃいます。~~
~~`resource.type`の修正も必要ですが、`resource.name`の修正は不要なので変更箇所は少なくて済みます。~~

``` yaml
resource_types:
- name: dummy-v2
  type: docker-image
  source:
    repository: watawuwu/test-dummy-resource
    tag: v2

resources:
- name: dummy
  type: dumm-v2
```

### web hook使うresourceの定期checkを無効化できない
Resourceのcheck間隔（`resource.check_every`）はデフォルト値が1mです。
`webhook_token`を利用する場合は定期的なcheckは不要ですが、定期チェックを無効化する方法が見つかりません。

#### Workaround
- `resource.check_every`を長時間にする設定する

#### 関連Issue
- [Allow disabling `check_every` entirely for resources · Issue #575 · concourse/concourse · GitHub](https://github.com/concourse/concourse/issues/575)
    - このIssueでは解決できてない気がする

### Jobのパラメーターを動的変更できない
`task.config.params`で定義した値を実行時ごとに変更できません。
ドキュメントにも以下のように記載されています。
> they do not support interpolation

`fly execute`で実行する`one-off`形式のタスクでであれば、以下のように環境変数経由で変更することができます。

```
FOO=test fly execute
```

### ~~workerを再起動すると自動的に復帰できない~~
v3.6.0時に遭遇した事象だったのでv3.9.0で改めて動作確認をしました。
様々なエラーが出力され一時的にJobも失敗しますが、時間経過するとJobを実行できるようになりました。

Resourceで使われているdockerイメージの再取得などを実行しているようですが、VolumeのPermissionエラーなども発生するのでそっ閉じしました。
error: unknown switch `v' とか出てブランチを切り替えられないときの対処法

# ブランチを切り替えられない
SourceTree（ver 2.3.5.0）でブランチを切り替えようとしたが、以下のconsoleが出力されて切り替えできない。
`git -c diff.mnemonicprefix=false -c core.quotepath=false checkout -v --ブランチ名
error: unknown switch 'v'
usage: git checkout [<options>] <branch>
・・・`

# ツール > オプション > Gitの設定で解決
ツール > オプション > Gitタブの`Enable verbose console output`のチェックを外すとこれまでどおりブランチをい正常に切り替えられるように。
ここらへんイジった覚えないですが、アップデートでなにか変わったりした・・・？

######**追記**
ver 2.4.8が降ってきていたのでアップデートしたら直っていたのかもしれません。
金盾の内側から GCP を使う

中国大陸から `gcloud` ツールを使うための方法。

# 準備

- shadowsocks サーバー (壁の外に立てる)
- ShadowsocksX
  - `127.0.0.1:1080` に SOCKS5 Proxy が立ち上がるようにする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/2108/3ebef4f7-21e5-e3f9-0a6f-0dd1bc62df54.png)


# gcloud コマンドを使えるようにする

`gcloud config set proxy/**` というコマンドがある。

Socks5 プロクシを通すので専用の設定を作成する。(プロクシなし設定と併用したいのであれば)

```
% gcloud config configurations create socks5
Created [socks5].
Activated [socks5].
```

gcloud init をする前に、プロクシ設定をする。

```
% gcloud config set proxy/address 127.0.0.1
Updated property [proxy/address].

% gcloud config set proxy/port 1080
Updated property [proxy/port].

% gcloud config set proxy/type socks5
Updated property [proxy/type].
```

プロクシ設定が終わったので、 init してみる。

```
% gcloud init
Welcome! This command will take you through the configuration of gcloud.

Settings from your current configuration [socks5] are:
core:
  disable_usage_reporting: 'False'
proxy:
  address: 127.0.0.1
  port: '1080'
  type: socks5

Pick configuration to use:
 [1] Re-initialize this configuration [socks5] with new settings
 [2] Create a new configuration
 [3] Switch to and re-initialize existing configuration: [default]
Please enter your numeric choice:  1

Your current configuration has been set to: [socks5]

You can skip diagnostics next time by using the following flag:
  gcloud init --skip-diagnostics

Network diagnostic detects and fixes local network connection issues.
Checking network connection...done.
Reachability Check passed.
Network diagnostic (1/1 checks) passed.

Choose the account you would like to use to perform operations for
this configuration:
 [1] xxxxxx@gmail.com
 [2] Log in with a new account
Please enter your numeric choice:  1
```

ログインできた。あとはいつも通り設定すれば OK

```
% gcloud compute --configuration socks5 ssh my-instance
Welcome to Ubuntu 16.04.3 LTS (GNU/Linux 4.13.0-1006-gcp x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  Get cloud support with Ubuntu Advantage Cloud Guest:
    http://www.ubuntu.com/business/services/cloud

57 packages can be updated.
0 updates are security updates.


*** System restart required ***
Last login: Mon Mar  5 10:40:43 2018 from 203.212.41.213
shao@my-instance:~$
```

SSH もいける。

# kubectl も使えるようにする

```
gcloud container clusters get-credentials --configuration socks5 --zone us-central1-a my-cluster
```

socks5 設定をしたプロファイルで kubectl の credential をとってくると、プロクシ設定もいっしょに引っ張ってくる模様。
シリアルコンソールが文字化けしたら、まずはボーレートを確認しよう

# 発端

仕事でデバッグ用機器をUSBケーブルで繋いで、
シリアルコンソールでログを見張る事になった。
この文字化け(？)に関して3日程ハマったので備忘録として記載する。

```Bash
# Macのシリアルコンソールはsudo権限が必要なので一旦ログインしておく
$ sudo su

# シリアルコンソールの一覧を確認
$ ls -l /dev/tty.*
crw-rw-rw-  1 root  wheel   34,   0  3  2 11:46 /dev/tty.Bluetooth-Incoming-Port
crw-rw-rw-  1 root  wheel   34,  24  3 22 12:55 /dev/tty.usbserial-AH01KQU5

$ screen /dev/tty.usbserial-AH01KQU5
��kBJNKm�kBC"�Orc&�+��n_��+BCo�߭kBC��o��K�+L����C=RJJJJJJJJJ(BBbCsbCcrG�bCc�������JJJJJJJJJ
```

例えばUTF-8を使う場合、ASCII文字に限ってはShift-JISやEUC-JPと入れ替えても正常に認識する。
しかし、この機器が吐き出すメッセージは全てが見事に文字化けしている。

通常シリアルコンソールで文字列を送受信する場合は、
ASCII文字を中心にすることが多く、全ての文字列でASCII文字以外を使っているとは考えにくい。
念の為、様々な文字コードの変換を試してみたが無駄だった。

それもそのはず、今回の文字化けは**文字コードが原因ではなかった**。

# 解決方法: ボーレート値の見直し

シリアル通信には**ボーレート**(BaudRate)という設定が存在する。
辞書サイト等では「一秒あたりに転送するビット数（bps）を単位とした通信速度のこと。」等と記載されており、「数値が高いほうが帯域広くて余裕を持って文字列送信できるんでしょ？」くらいに思ってスルーしていたがとんでもない！

双方のボーレートが一致していなければ、まともに文字列の送受信もできないのだ。
それを証拠に、正しいボーレートを指定しただけで文字化けが解消される。
（今回の機器は少々特殊なケースで、38400を利用していたようだ）

```Bash
$ screen /dev/tty.usbserial-AH01KQU5 38400
Booting...
init_ram
```

Tera Term等のツールではボーレートの候補一覧が表示されるが、
Macではscreenやcuを利用することになるので、ボーレートの候補は知っておく必要がある。

ボーレートの候補は下記。

- 110
- 300
- 600
- 1200
- 2400
- 4800
- 9600
- 14400
- 19200
- 38400
- 57600
- 115200
- 230400
- 460800
- 921600

何故この数値が候補になるのか調べたところ、
どうやらシリアル通信の規格であるRS232のボーレートの項目の値が基準となっている。
(RS232以外にもいくつか規約はあるものの、RS232を尊重しているよう見受けられた)

機器は接続相手に対してシリアル接続を行っているわけで、
パソコンのUSB接続だからといってボーレート値を勝手に変更・同期しない。
マイペースに機器に設定されているボーレート値を使って文字列を飛ばし続けるのみである。

なのでパソコンでUSB接続して見張る場合は、
シリアル通信(RS232)のボーレート一覧を参考に何度か切り替えながら試行すれば、
文字化けしないボーレート値の設定がヒットするだろう。

# 終わりに

きっとシリアル通信を行っていた方の間では常識だったのだろう。
たまたま私が畑違いのジャンルにハマって、
「シリアルコンソール 文字化け」等といくらググっても答えが出なかったに過ぎないのかもしれない。

私なりの対策としてタイトルが「シリアルコンソールが文字化けしたら、まずはボーレートを確認しよう」という記事を作成したことで、
「シリアルコンソール 文字化け」でQiitaの本記事がヒットするようになった。

後のシリアル通信初心者の助けになれば幸いだ。

# 参考サイト

- [Mac OSのターミナルでシリアルコンソールを使う方法 - 黄緑総研](http://www.kimidorisoken.com/article/443205615.html)
- [設定可能なボーレートについて - I-O DATA FAQ](http://www.iodata.jp/support/qanda/answer/s9260.htm)
- [ボーレート - IT用語辞典](https://www.weblio.jp/content/%E3%83%9C%E3%83%BC%E3%83%AC%E3%83%BC%E3%83%88)
- [～ シンプル通信（Rs-232c）のリファレンス ～](http://aoyama.posttips.net/rs232c/ref.htm)
【Laravel(Lumen)】異なるモデルで共通する処理はなるべくtraitを使っていきたい

なるべくtraitを使っていってファットモデルをなくしていきたい

## traitを作るべきタイミング
- 異なるモデルに同じ処理を書くことになったとき

## traitの例
例）データを登録するメソッド

``` php
<?php

namespace App;

use Illuminate\Support\Facades\DB;

trait Register 
{
    /**
     * DB登録処理
     * 
     * @param array $attributes
     * @return bool
     */
    public function register(array $attributes)
    {
        DB::beginTransaction();
        try {
            $this->create($attributes);
            DB::commit();
            return true;
        } catch (\PDOException $e) {
            DB::rollBack();
            return false;
        } catch (\Exception $e) {
            return false;
        }

    }
}

```

## traitの使い方

``` php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\DB;

class Example extends Model
{
    use \App\Register; // このクラス内で使うtraitをuseする

    public function store($attributes)
    {
        return $this->register($attributes); // あたかもこのクラスにあるメソッドのように扱える
    }

    // 以下略

}

```

## traitのテスト

例）traitを使うことができるかのテスト(PHPUnit)

``` php
<?php

use App\Register;

class RegisterTest extends TestCase
{
    public function test_Registerのtraitを使うことができる()
    {
        $mock = $this->getMockForTrait(Register::class);
        $this->assertInternalType('object', $mock);
    }
}

```

## おわり
- traitのテストって↑以外のテストしなくていいんですかねぇ・・・？
- traitを作るべきタイミングって他にもあるんですかね？
- むやみやたらに作るもんでもないので厳選していきたい

## 参考（にしたかも）
- [PHPのトレイトが怖くて使えない - Qiita](https://qiita.com/khsk/items/086ca7a0c9e06b46d0c5)
- [PHPのトレイトを使うならおさえておきたい５つのこと - Qiita](https://qiita.com/sasakure-kei@github/items/212637b2f32197441a3a)
Cloud9上でのRuby on rails サーバ起動/ページ表示方法(Ruby on rails Tutorial 1.3.2)

[Ruby on rails Tutorial 1.3.2](https://railstutorial.jp/chapters/beginning?version=5.1#sec-rails_server)でサーバ起動後のページ表示に躓いたのでメモ
【開発環境】cloud9(Windows上)

Ruby on rails Tutorial 1.3.2で
```$ rails server```
を入力すると以下のようにTutorialと違う結果が出力された。

```terminal
$ rails server
=> Booting Puma
=> Rails 5.1.4 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.9.1 (ruby 2.4.1-p111), codename: Private Caller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
```


httpのアドレスが表示されずページが開けない。
これはcloud9というクラウド上でサーバを起動しておりlocalhostが使用できないためらしい。

ページの表示方法は以下
1. $ rails serverでサーバを起動する(上記の結果でOK)
2. 画面上部Preview → Preview Running Application をクリック
3. cloud9上にブラウザが表示されるので、アドレスバーの右にあるボタンをクリック
4. ページが表示される。
ハードウェアウォレットファームウェアのソースコード

ハードウェアウォレットファームウェアのソースコードを調べてみました。

# trezor
* 全てのソースコードが公開されている。
* ライセンス GPL
* https://github.com/trezor/trezor-mcu
* libopencm3 を使っている。
* STM32
* USB HID


# digitalbitbox
* ほぼ全てのソースコードが公開されている。（チップベンダ提供のバイナリライブラリはソースコードが無い。）
* ライセンス AS IS
* https://github.com/digitalbitbox/mcu
* ATMEL SAM4S
* USB HID
* sdcard fatfsを使っている。

# Ledger
* non secureなソースコードのみ公開されている。

## Ledger Blue
* https://github.com/LedgerHQ/blue-nonsecure-firmware
* STM32L476

##  Ledger Nano S
* https://github.com/LedgerHQ/nanos-nonsecure-firmware
* STM32F042

# todo
secure elementをつかっている部分を確認する。 使っていないかも？
Datadogでアカウントをまたいでdashboardをcopyする

メトリクスの混在を防ぐために、本番用のDatadogアカウントに加えてテスト用のdatadogアカウントを作ったのですが、
本番にあるdashboardをテストアカウントに持って行こうとした時に、地味に面倒だったのでその時のメモ。

# tl;dr
- datadogのdashboardをアカウントを跨いでcopyする時は↓が便利。ただ、fieldが欠けていたりするかもしれないので、適宜スクリプトの修正が必要かも。   
https://github.com/ouyi/dashjson

# 問題点
dashboardをjsonでexportする機能は提供されているので、それをベースにそのままimportしようとするが、
```{"errors": ["The parameter 'title' is required"]}
```
というエラーになってしまい、上手くいかない。。

色々ググっていくと、↓のgistを発見。
https://gist.github.com/lrascao/f57312ff33b799c4c0db56b10e80fe26
微妙にexportしたjsonの構造をいじらないといけないということを知る。。

# 解決策
github上に↓のスクリプトを発見。
https://github.com/ouyi/dashjson
こんな感じで、直接値を取り出しているので、
https://github.com/ouyi/dashjson/blob/6ae736f66dd6fc1b2cc540c247d38cd78f1fbea4/dashjson.py#L29-L30
READMEの通りにやって、とりあえず動いた。

```bash
# export-credential は本番用。
$ python dashjson.py -e DASHBOARD_NAME.json -d DASHBOARD_ID -c export-credential.json
# import-credential はテストアカウント用。 -nをつけないと、updateになるので今回のケースでは指定が必要。
$ python dashjson.py -t t -i DASHBOARD_NAME.json -c import-credential.json -n
```


が、微妙に上手くコピーできていないのもあり、スクリプトに手を入れた。
https://github.com/ouyi/dashjson/pull/1
Rubyで呼び出し元での変数名を取得する

## TracePointを使う

```rb
def greet(greetings, time)
  unless greetings.key?(time)
    raise "[ERROR] #{time} is not in #{$var}"
  end

  puts greetings[time]
end

TracePoint.trace(:line) do |tp|
  $b = tp.binding
end

TracePoint.trace(:call) do |tp|
  return unless tp.method_id == :greet
  greetings = tp.binding.local_variable_get(:greetings)
  $var = $b.local_variables.detect {|v| $b.local_variable_get(v) == greetings }
end

english_greetings = {
  morning: 'Good morning!'
}

greet(english_greetings, :night)
```

## binding_of_callerを使う

```rb
require 'binding_of_caller'

def greet(greetings, time)
  unless greetings.key?(time)
    b = binding.of_caller(1)
    var = b.local_variables.detect {|v| b.local_variable_get(v) == greetings }
    raise "[ERROR] #{time} is not in #{var}"
  end

  puts greetings[time]
end

english_greetings = {
  morning: 'Good morning!'
}

greet(english_greetings, :night)
```

## binding_ninjaを使う

```rb
require 'binding_ninja'

self.class.extend BindingNinja

def greet(b, greetings, time)
  unless greetings.key?(time)
    var = b.local_variables.detect {|v| b.local_variable_get(v) == greetings }
    raise "[ERROR] #{time} is not in #{var}"
  end

  puts greetings[time]
end

self.class.class_eval { auto_inject_binding :greet }

english_greetings = {
  morning: 'Good morning!'
}

greet(english_greetings, :night)
```
CSSで包含する要素内で一番最後かつ特定のセレクタにスタイルをあてる

CSSで最後の要素かつ特定にセレクタのときにスタイルをあてたいといったことは稀かもしれないですがそんなとき便利です

```css
.container > *:last-child.target-item {
 color: red; 
}
```

codepenにサンプル作りました

<p data-height="265" data-theme-id="0" data-slug-hash="xWdjZj" data-default-tab="html,result" data-user="kwkm_0802" data-embed-version="2" data-pen-title="CSSで任意の包含する要素内で一番最後かつ任意のセレクタにスタイルをあてる" class="codepen">See the Pen <a href="https://codepen.io/kwkm_0802/pen/xWdjZj/">CSSで任意の包含する要素内で一番最後かつ任意のセレクタにスタイルをあてる</a> by kwkm_0802 (<a href="https://codepen.io/kwkm_0802">@kwkm_0802</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
zsh環境で引数を持ったコマンドを作る

## やりたいこと

自分で作ったコマンドに引数を持たせて汎用的に使えるコマンドを作りたい。

## 環境

* zsh
* mac

## 1. aliasの作り方

まずは基本となるaliasの作り方
zshの場合設定ファイルは`.zshrc`なので、vimとかで`.zshrc`を開く

以下が基本文法

```
alias コマンド名='実行したいコマンド'
```

`.zshrc`を変更したら、`source .zshrc`として設定を反映させることを忘れないように。

## 2. コマンドを作ってみる

例えば、`hoge`と入力したら、文字列で`hello world`がechoされるコマンドを作るとしたら、以下のようになる。

`.zshrc`を開き最終行に以下を入れる

```
alias hoge='echo hello world'
```

`source .zshrc`を実行して反映

ターミナルで`hoge`と入力すると、以下のように表示されればOKです。

```
hello world
```

## 3. 引数を設定したコマンドを作る

先ほど作ったコマンドに引数を持たせて、`hello world 引数の値`と返ってくるようにしたいと思います。

`.zshrc`を開き、以下のように修正しましょう。

> この時にシングルクウォーテーションで囲まないとエラーとなってしまうようです。

基本文法は以下
「$1」が引数で与えられたものに置きかわります。

```
alias コマンド='(){処理 $1}'
```

では実際に`hello world 引数`というコマンドを作っていきます。

```
alias hoge='(){echo hello world $1 !!}'
```

`source .zshrc`として設定を反映して、以下のようなコマンドを実行します。

```
$ hoge Tom
```

と実行すると、以下のように返ってくることが確認出来るかと思います。

```
hello world Tom !!
```

## 4. 引数を複数設定する

当然引数は複数設定することが可能です。

引数を複数設定する場合は、以下のように書き換えます。
`$2`が第二引数に当たるということです。
なので、3つの引数を設定したい場合は、`$3`を追記してあげればいいということになります。

```
alias hoge='(){echo hello world $1 $2 !!}'
```

`source .zshrc`として、以下を実行

```
$ hoge Tom July
```

上記を実行して、以下のように返ってくることを確認しましょう。

```
hello world Tom July !!
```

## 5. 使用例

ここまで来ればなんとなく、使い所がイメージできるかと思いますが、例を書いておきます。

長ったらしい`docker`コマンドの一例を出しておきます。

```
$ docker exec -it コンテナID /bin/bash
```

aliasを作りましょう。
`.zshrc`を開き

```
alias de='(){docker exec -it $1 /bin/bash}'
```

設定を反映して、

```
$ de コンテナID
```

無事にコンテナにbash接続が出来ているかと思います。


## 追記

@termoshtt さんよりコメントをいただき、以下のやり方の方が一般的とのことなので、追記しておきます。

```
hoge () { echo "hello world $1 $2 !!" }
```

自分が紹介した方法だと関数定義したものをaliasにしていただけだったので、こちらのやり方の方を行うのがいいかと思います。
@termoshtt さんコメントいただきありがとうございます！
【RPA】非エンジニアによるUiPathロボット開発 Episode01 - UiPathインストール＆初期設定

#UiPathのインストール
UiPathをインストールしましょう。

- 公式サイトに説明があります　→　https://uipath.info/download/
- UiPathStudio(開発環境), UiRobotTray（実行環境）を一度にインストールできます。

#インストールの後は、追加機能をインストールしましょう
初期状態で使える機能が少ないため、以下の手順で追加機能をインストールします。
1.UiPathを起動して「←」をクリックする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243922/db60f5df-e7ab-ac13-4528-cf3057d19b29.png)
2.Javaをアップデートする
 
- SETUP → Setup Extensions　→ Java をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243922/34bdc394-381f-0916-2981-7fa7fbe3a2e7.png)

3.インストールが完了すると、下記のメッセージが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243922/e492f9f8-8aee-4a3e-758c-924b4c69b78b.png)

4.Activitiesの下の、赤枠で囲っているアイコンをクリックする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243922/b0bbb295-0166-96e4-023b-88a2aebb1cf5.png)

5.アクティビティの追加インストール、アップデートをする

- Available の All, Local, Gallery でインストール可能項目があれば Install をクリックする。
- Update の All, Local, Gallery でアップデート可能項目があれば、全てUpdateをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243922/d1a74086-2176-27e5-dec0-57c22ab36a94.png)

初期設定は以上です。

#ライセンス認証しなくても60日間は無料で使えます

- 60日間経過すると、UiPathStudio起動時に認証エラーになります。その際は再度 https://uipath.info/download/ でライセンス認証します。
DatabindingでLambdaを渡したい！

こんにちは。[kettsun0123](https://github.com/kettsun0123)です。
今回はタイトルの通り「Databindingでラムダ式渡したい！ってなったときにどうするか」っていう話です。

ラムダ式をdatabindingで渡したいってなったときに困ったのでメモがてら。

## シチュエーション
- TextViewの一部がリンク
- リンクをクリックしたらurlを返り値としたい
- urlはChromeCustomTabsで開きたい
- ラムダ式でonLinkClick渡せたら気持ちよさそう

と、今回はこんなシチュでした。

## ChromeCustomTabs
```ChromeUtil.kt
object ChromeUtil {
    fun showCustomTabs(activity: FragmentActivity, url: String) {
        val packageName = CustomTabsHelper.getPackageNameToUse(activity)
        val customTabsIntent = CustomTabsIntent.Builder().setShowTitle(true)
            .setToolbarColor(ContextCompat.getColor(activity, R.color.colorPrimaryDark))
            .build()
        customTabsIntent.intent.`package` = packageName
        customTabsIntent.launchUrl(activity, Uri.parse(url))
    }
}
```

## Activity側

```HogeActivity.kt
...
private val onLinkClick: (String) -> Unit = {
    ChromeUtil.showCustomTabs(activity!!, it)
}
...
```

## Layoutファイル
さて、定義したラムダ式を渡します。
使うのは `kotlin.jvm.functions.Function1` です。

```
<?xml version="1.0" encoding="utf-8"?>
<layout>
  <data>
    <variable
      name="onLinkClick"
      type="kotlin.jvm.functions.Function1"
    />
  </data>
  ...
</layout>
```

上記のように定義すれば`onLinkClick`でラムダ式を受けることができます。

## Activity側からラムダ式渡す

```HogeActivity.kt
private val onLinkClick: (String) -> Unit = {
    ChromeUtil.showCustomTabs(activity!!, it)
}

...

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    activityHogeBinding.?.let {
        it.onLinkClick = onLinkClick
    }
}
```
これで無事ラムダ式を渡せました :clap: 

## おまけ
今回の本題ではなかったのでおまけで。
ラムダ式はこんな感じで使いました↓↓

```TextBindingAdapters.kt
@JvmStatic
@BindingAdapter("link_click", "link_text", "link_url")
fun bindLinkLambda(view: TextView, body: (String) -> Unit, text: String, url: String) {
    val ss = SpannableString(view.text)
    var start = 0
    var end = 0
    val matcher = Pattern.compile(text).matcher(view.text)
    while (matcher.find()) {
        start = matcher.start()
        end = matcher.end()
        break
    }

    ss.setSpan(object : ClickableSpan() {

        override fun updateDrawState(ds: TextPaint?) {
            super.updateDrawState(ds)
            ds?.let {
                it.isUnderlineText = true
                it.isFakeBoldText = true
            }
        }

        override fun onClick(v: View) {
            body(url)
        }
    }, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
    view.text = ss
    view.movementMethod = LinkMovementMethod.getInstance()
}

```
PhpStormでgit clone

体験版での実施手順を記載。

##１.起動してGitの画面まで
<img width="474" alt="スクリーンショット 2018-03-22 11.09.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/228538/2f896dc7-5e71-897f-02d8-b1de6b2049e5.png">

1. 「Check out from Version Control」を選択
2. 「Git」を選択（「Git hub」がある場合は、それを選択）

##2.Git Hubへログイン
<img width="482" alt="スクリーンショット 2018-03-22 11.13.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/228538/78f999ba-359c-a03f-38f1-2a9af94e7f44.png">1. 「Log in GitHub」を選択
<img width="624" alt="スクリーンショット 2018-03-22 11.22.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/228538/5139af3f-ce22-d3f6-9367-af159d4aa548.png">2. Auth Typeで「password」を選択
<img width="482" alt="スクリーンショット 2018-03-22 11.25.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/228538/2a85dc70-2172-7744-4acb-a99e5b56f6c1.png">　ログイン完了

##3.Clone実施
<img width="482" alt="スクリーンショット 2018-03-22 11.57.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/228538/d67c4fc9-e317-32ef-63ed-9359c7a0828a.png">
1. 「URL」へGit hubのリポジトリURLを入力し、「Test」を押下。「Successful」がでれば問題なし。
2. 「Directory」へプロジェクトのディレクトを入力し、「Clone」を押下。

以上。
英語が必要なもう一つのタイミング 〜 その文章、英訳できますか？

プログラマーは英語力が必要とよく言われます：

- **英語のドキュメントを読むとき**はもちろん英語が必須です。
- **クラスや関数に名前をつけるとき**も英語が必須です[^1]。

でも、もう一つ、英語を活用してほしいタイミングがあります。
それは**コメントやドキュメントで日本語の文章を書く時**です。

[^1]: 最近はUTF-8で名前をつけられる言語も多いですが、大抵は英語でつけていると思います。

# その文章、英訳できますか？

我々は日本語が母語なので [^2] 、かなり日本語を自由に操れます。コードコメントでダジャレを飛ばすなんて高度なこともできるんでござんす。

[^2]: 日本語以外が母語の人はごめんなさい。でもこの記事に書いた方法は、他の言語でも有効なのではないかと思います。

一方、大抵のプログラマーは、英語は中学・高校でベーシックな部分を習った程度なので、高度な文章は英訳しにくいかもしれません。でもそれがいいのです。

自分で書いた文章を英訳してみてくだい。もし英訳できないようなら：

1. **長い**
2. **文法的に複雑すぎる**
  - 英訳すると関係代名詞が２回も３回も出現する
  - 指示代名詞を使いすぎている
3. **訳しにくい言葉づかいをしている**
  - 意味が曖昧な単語（「よく考えるとこの『操作』は何をさすのか分からないぞ」）
  - 普通の言い回しをしていない（「継承し」と書けばいいものを「元クラスを extends して定義し」と書いている）

といった、悪文である可能性があります。

逆に、**簡単に英訳できるなら「短い」「文法的に単純な」「基本的な単語だけを使った」文章であることを保証できます。**

文章が判りにくいと言われる人は、コメントやドキュメントを書く時は**一度英訳できるかを検討してみてください**。また、新人研修で、実際に英訳させてみてもいいかもしれません。
darkflowでAssertionErrorが出た場合の対処

tensorflow版のyolov2：[https://github.com/thtrieu/darkflow](https://github.com/thtrieu/darkflow)にて
本家のYOLOで学習させたmodeとcfgを用いて、predictをやろうとすると以下のエラーが出た。

```
AssertionError: expect 202314760 bytes, found 202314764
```
↑4byteだけ違う。
4byteどころではなく明らかに数値が違った場合はおそらくtrain時のcfgとpredict時のcfgが異なっている

対処方法は、`darkflow/darkflow/utils/loader.py`の121行目

```python:loader.py(121行目)
self.offset = 16
```
となっているところを

```
self.offset = 20
```
に書き換えれば直る。

[参考](https://github.com/thtrieu/darkflow/issues/107#issuecomment-320208287)
DBから指定カラム名を持つテーブルを部分一致検索するSQL文


#指定カラム名からテーブルを部分一致検索をできるSQL

```sql:SearchTableByColumnName.sql
SELECT TABLE_NAME,COLUMN_NAME
FROM USER_TAB_COLUMNS
WHERE COLUMN_NAME LIKE '%COLUMN_NAME%'
ORDER BY TABLE_NAME,COLUMN_NAME;
```


# 補足
```sql:
'%COLUMN_NAME%'
```
に指定したカラム名で検索ができます。
%などを使えば部分一致検索ができます。
position: sticky;を使った時にa要素のタップの位置がズレる

stickyは、特定の位置から要素を固定し、要素の指定位置まで達すると相対位置に配置される便利なCSSです。
iOS 6.0、Android 5以上とスマートフォンサイトで使える場が増えていますが、バグに遭遇したのでご紹介します。

# iOS 11でa要素のタップの位置がズレる

iOS 10では問題なかったのですが、iOS 11で発生しました。
viewportを固定した状態で、stickyを使った要素の子にa要素があると、相対位置に配置されるまでスクロールした時に、そのa要素のタップの位置がズレます。

![sticky.gif](https://qiita-image-store.s3.amazonaws.com/0/75375/635b8938-2eec-ec35-9cc1-451b43a19802.gif)


```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=320">
  <title>Document</title>
</head>
<body>
  <div class="box">
    コンテンツ
  </div>
  <div class="sticky">
    <a href="/">Sticky</a> 
  </div>
  <div class="footer">
    footer
  </div>
</body>
</html>
```

```css
.box {
  height: 800px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
}
.sticky a {
  display: block;
}
.footer {
  padding: 16px 0;
}
```

## 解決方法 1

viewportの固定をやめる。

```html
<meta name="viewport" content="width=320">
```

`320px`でviewportを固定している箇所を`device-width`に変更します。

```html
<meta name="viewport" content="width=device-width">
```

## 解決方法 2

デザインの都合上、viewportを固定をする必要がある場合は、stickyの下の要素を高さを大きくしてみる
例では`.footer`は`padding: 16px 0;`の宣言が指定されていましたが、`padding: 54px 0;`にすると、直りました。
なぜ直るのか、よくわかりません。
そして、viewportを固定する時は、基本的に枠にとらわれない大らかなデザインを厳密に再現する場合なので、使えません。

## 解決方法 3

html要素をスクロールさせないようにして、bodyの要素をスクロールさせる。
viewportを固定しつつ、stickyでおかしな挙動がでたら、スマートフォン限定でこちらを使うといいかもしれません。

```css
html {
  overflow: hidden;
  height: 100%;
}
body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow-y: auto;
  height: 100%;
}
```