OmniAICreator/Qiita-1.07M huggingface dataset:
SVGでoffsetの取得ができない(safari)

#はじめに
SVGのアニメーションを実装している時にひっかかったので、備忘録です。

##事象
下記のようにoffset().Topを取得して、位置判定に使用するつもりでした。
chrome,firefox,androidではきちんと取得できていたのに、safariだけ取得できず、値が0になっていました。

```index.html
<svg class="line" width="100%" height="73" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <line class="animationLine" x1="0" y1="2" x2="100%" y2="2" stroke="#a2bdd4" stroke-width="2"></line>
</svg>
```

```index.js
const $animationLine = $('.animationLine');
this.animationLineTop = $animationLine.offset().Top;
```


##解決策
jqueryを使うかどうかで要素の指定の仕方が少し変わりますが、'.offset().Top'のかわりに、'.getBoundingClientRect().top'を使うのはどちらでも一緒です。

```index.js
const $animationLine = $('.animationLine');
this.animationLineTop = $animationLine[0].getBoundingClientRect().top;
```
```index.js
const $animationLine = document.getElementsByClassName('animationLine');
this.animationLineTop = $animationLine.getBoundingClientRect().top;
```

##おわりに
この事象に出会うまで、SVGでoffsetの取得ができないと知りませんでした。
これ以外の解決法を知りたいのでご存知の方いらっしゃいましたら、教えてください。
リンク前に不必要なシンボルを削除する

StackOverflowで気になる質問を見つけたので調査した結果を共有します
https://stackoverflow.com/questions/43103922/remove-dead-code-before-linking

問題
----

```c:demo.c
int do_things(void);

int application_main(void) {
  return do_things();
}

int test_main(void) {
  return 42;
}

int main(void) {
  return test_main();
}
```

元の問題は、`application_main`と`test_main`を（おそらくはプリプロセッサで）切り替えたいのですが、ライブラリに関数`do_things`が実装されていないためリンクが失敗します。

```
/tmp/demo-d19626.o: 関数 `application_main' 内:
demo.c:(.text+0x5): `do_things' に対する定義されていない参照です
clang-6.0: error: linker command failed with exit code 1 (use -v to see invocation)
```

この`do_things`をリンク前に除けるかという問題です。

global DCE (dead code elimination)
----------------------------------
今回はLLVMの最適化ツールoptによって削除する作戦で行きましょう。optは入力されたIRを変換するPassに通すためのコマンドです。Passについては例えば[大学院生のためのLLVM](https://postd.cc/llvm-for-grad-students/)などに詳しく解説してあります。

まずLLVM IRに変換します

```
clang demo.c -c -emit-llvm -o demo.bc # OK
```

これには当然`do_things`のシンボルが定義されています

```
$ llvm-nm demo.bc
---------------- T application_main
                 U do_things
---------------- T main
---------------- T test_main
```

次に`opt`を適用していきましょう。ここでは[globaldce](https://llvm.org/docs/Passes.html#globaldce-dead-global-elimination) Passを使用しましょう。これは使っていない内部関数を削除するためのPassです。しかし、`do_things`は内部関数ではないので内部関数にする必要があります。それには`internalize` Passを使います

```
$ opt -o stripped.bc -internalize -globaldce demo.bc
$ llvm-nm stripped.bc # 何も出力されない
```

残念全部消えてしまいました(´・ω・｀)
どうやら`main`まで内部関数に指定されてしまったようです。`main`を内部関数にしないためには`internalize-public-api-list`を使用するようです

```
$ opt -o stripped.bc -internalize -internalize-public-api-list=main -globaldce demo.bc
$ llvm-nm stripped.bc
---------------- T main
---------------- t test_main
```

これで無事目的が達成できました(*'▽')

```
$ clang stripped.bc # OK
```
ChromeでWeb開発するなら入れておきたい拡張機能（随時更新）

Web開発でよく使うChromeの拡張機能を、
目的別に整理しました。

#誰向け
・ChromeでWeb開発している人
#1.Google検索をより速くしたい
Google検索キーボードショートカット
https://chrome.google.com/webstore/detail/google-search-results-sho/dchaandmcifgjemlhiekookpgjmkcelg
##主な機能
・Googleの検索結果を`↑`と`↓`で選べる。
・`/`で検索窓にフォーカスできる。
全世界でまだ1000ユーザーほどしかいない。
隠れた名拡張機能。
#2.Webページをスマホ実機で素早く開きたい
The QR Code Extension
https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb
##主な機能
・現在タブのURLをQRコード化する
#3.複数のURLを一気に開きたい
Open Multiple URLs
https://chrome.google.com/webstore/detail/open-multiple-urls/oifijhaokejakekmnjmphonojcfkpbbh?hl=ja
##主な機能
・入力したURLを別タブで一気に開く
#4.Proxyを刺したい
Falcon Proxy
https://chrome.google.com/webstore/detail/falcon-proxy/gchhimlnjdafdlkojbffdkogjhhkdepf?hl=ja
##主な機能
・Proxyを設定できる
・PACファイルも利用できる
・Bypass（特定ドメインのみProxyを刺さない）もできる

#5.Cookieを自在に変更したい
EditThisCookie
https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja
##主な機能
・Cookieを手動で変更できる
#6.JSONを整形したい
##主な機能
・.jsonで終わるURLを、JSON整形する。
#7.JSをオフりたい
Quick Javascript Switcher
https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=ja
##主な機能
・開いてるタブのJSをオフにする
・サイトごとにオンオフ設定できる
#8.リダイレクトするときのページ遷移を追いたい
Redirect Path
https://chrome.google.com/webstore/detail/redirect-path/aomidfkchockcldhbkggjokdkkebmdll?hl=ja
##主な機能
・どのようにページ遷移したかを表示する
　・URL
　・ステータスコード
#おわりに
他にも便利な拡張機能があったら、
随時更新していきます。
ksnctf write up ~2 Easy Cipher ~

ksnctf 解法メモ

##問題

```
EBG KVVV vf n fvzcyr yrggre fhofgvghgvba pvcure gung ercynprf n yrggre jvgu gur yrggre KVVV yrggref nsgre vg va gur nycunorg. EBG KVVV vf na rknzcyr bs gur Pnrfne pvcure, qrirybcrq va napvrag Ebzr. Synt vf SYNTFjmtkOWFNZdjkkNH. Vafreg na haqrefpber vzzrqvngryl nsgre SYNT.
```

##解法

- アルファベットしか使われていない
- なんとなく英文っぽい

あたりの情報から、換字式暗号を疑う。
となると、一文字のnはaだろうなとか、2文字のvfとかbsとかnaとかのどれかがisなんだろうな、とか考える。
一つずつ当てはめて推測しても良いが、換字式暗号ではシーザー暗号が有名なので、とりあえず試してみる。
拾い物のシーザー暗号のpythonスクリプトに、暗号文を埋め込む。

```caesor.py
#! /usr/bin/env python

import sys

def rot_n(c, n):
    if 'a' <= c and c <= 'z':
        return chr((ord(c) - ord('a') + int(n)) % 26 + ord('a'))

    if 'A' <= c and c <= 'Z':
        return chr((ord(c) - ord('A') + int(n)) % 26 + ord('A'))

    return c

def rot(s, n):
    c = (rot_n(c, n) for c in s)
    print(''.join(c))

if __name__ == '__main__':
    param = sys.argv
    s = 'EBG KVVV vf n fvzcyr yrggre fhofgvghgvba pvcure gung ercynprf n yrggre jvgu gur yrggre KVVV yrggref nsgre vg va gur nycunorg. EBG KVVV vf na rknzcyr bs gur Pnrfne pvcure, qrirybcrq va napvrag Ebzr. Synt vf SYNTFjmtkOWFNZdjkkNH. Vafreg na haqrefpber vzzrqvngryl nsgre SYNT.'
    r = param[1]
    rot(s, r)
```

このスクリプトに、0~25の引数を与えるシェルスクリプトを書いて、実行

```q2.sh
#!/bin/sh
for((i=0;i<26;i++))
do
	echo "$i"
	./caesar.py $i
done
```

結果

```
0
EBG KVVV vf n fvzcyr yrggre fhofgvghgvba pvcure gung ercynprf n yrggre jvgu gur yrggre KVVV yrggref nsgre vg va gur nycunorg. EBG KVVV vf na rknzcyr bs gur Pnrfne pvcure, qrirybcrq va napvrag Ebzr. Synt vf SYNTFjmtkOWFNZdjkkNH. Vafreg na haqrefpber vzzrqvngryl nsgre SYNT.
1
FCH LWWW wg o gwadzs zshhsf gipghwhihwcb qwdvsf hvoh fsdzoqsg o zshhsf kwhv hvs zshhsf LWWW zshhsfg othsf wh wb hvs ozdvopsh. FCH LWWW wg ob sloadzs ct hvs Qosgof qwdvsf, rsjszcdsr wb obqwsbh Fcas. Tzou wg TZOUGknulPXGOAekllOI. Wbgsfh ob ibrsfgqcfs waasrwohszm othsf TZOU.
2
GDI MXXX xh p hxbeat atiitg hjqhixijixdc rxewtg iwpi gteaprth p atiitg lxiw iwt atiitg MXXX atiitgh puitg xi xc iwt paewpqti. GDI MXXX xh pc tmpbeat du iwt Rpthpg rxewtg, stktadets xc pcrxtci Gdbt. Uapv xh UAPVHlovmQYHPBflmmPJ. Xchtgi pc jcstghrdgt xbbtsxpitan puitg UAPV.
3
HEJ NYYY yi q iycfbu bujjuh ikrijyjkjyed syfxuh jxqj hufbqsui q bujjuh myjx jxu bujjuh NYYY bujjuhi qvjuh yj yd jxu qbfxqruj. HEJ NYYY yi qd unqcfbu ev jxu Squiqh syfxuh, tulubefut yd qdsyudj Hecu. Vbqw yi VBQWImpwnRZIQCgmnnQK. Ydiuhj qd kdtuhisehu yccutyqjubo qvjuh VBQW.

.
.
.
(以下略)

```

13文字ずらした時に、意味の通じる文章になるので、Flagゲット。
java stream 本当によく使う中間・終端操作の備忘録1

前回の投稿でStreamの基本、中間操作→終端操作という流れまで書いた。
本当に備忘録的な感じになるが、今まで使ってきたものや使用頻度の高そうな中間・終端操作を書いていく。

まずは個人的に一番使用頻度が高いと思っている、map()とCollectors.toList()から。
例えばnameやid等をもつStaffクラスのリストがあったとする。

```java

public class Staff {

    private String name;
    private Long id;
    private int age;
   ・
   ・
   ・
//getter/setter等
   ・
   ・

```
IDには1から連番で数字が入っている(重複なし)と仮定し、処理上の理由でIDのみを抽出したリストが欲しい場合
以下のようにmap()とCollectors.toList()を使用することで抽出することができる。

```java
    //staffListは6要素
 
        List<Long> idList = staffList.stream().map(staff -> staff.getId()).collect(Collectors.toList());
        idList.stream().forEach((id) -> {
            System.out.println(id.toString());
        });

```
出力結果

```java
1
2
3
4
5
6
7
8
9
10
11
12
```
上記で行われている処理としては、
***map(staff -> staff.getId())***
の部分でstaffListから取り出した1要素であるstaffを、staff.getId()に変換している。
その後、
***collect(Collectors.toList())***
で全要素のstaffから取り出したstaff.getId()群をリスト化。
結果として、IDのみ抽出したリストが取得出来ている。
(IntStreamを使用して12人のスタッフ君を用意してますが、IntStreamの説明についてはいずれ…今回はコードだけ載せておきます)

```java
// IntStreamで用意した12人のスタッフ君、1ﾐﾘでもどこかで参考になれば
List<Staff> staffList = IntStream.rangeClosed(1, 12).boxed()
				.map(i -> new Staff(String.valueOf(i) + "君", Long.valueOf(i), i)).collect(Collectors.toList());
```




ここで使用したmap(変換)は本当に様々な所で使えるので忘れないようにしたい。

次に良く出てきそうなものとして、filterがあります。
mapは変換でしたが、filterは検索です。
ここではIDを指定してスタッフの名前を求めています。
各スタッフの名前は、IDの数字に君を付けたものを入力しました。

```java
//　引数searchID = 1L
        Staff target = staffList.stream().filter(staff -> staff.getId() == searchID).findFirst().orElse(null);
        System.out.println(target.getName());
```
出力結果

```console
1君
```

***filter(staff -> staff.getId() == searchID)***
上記のfilterメソッドで絞り出す条件を指定。

***findFirst().orElse(null)***
で最初に条件にfilterにマッチしたStaffを取得し、もし見つからなければnullを返却しています。

他にも色々よく使うものがあるので時間を見つけて追記していきます。
正規表現で数字の桁数を検索置換で増やしたメモ


```
id=1
id=2
id=11
id=12
```

こんな感じのIDを後から1000001からにしてくれ！って言われた。
()の中身を$1でそのまま持ってこれるのに今日気がついたから悔しいからここにメモっとく。

まずは2桁を1000000万台へ

```
検索　id=(\d{2})
置換 id=10000$1
```

そして1桁を1000000万台へ

```
検索　id=(\d{1})
置換 id=100000$1
```

できた！わーい。
Rails 5.2.0におけるCircle CI  run testでのエラー

# あらまし
Rails5.2.0でCircle CIを走らせると以下のようなエラーが…

```
Could not find rake-12.3.1 in any of the sources
Run `bundle install` to install missing gems.
```

# 解決策

circle ciのテストの部分のコマンドを以下に変更

```
DISABLE_SPRING=true bin/rails test
```

以下に同じ症例があった．
springの問題とのこと

https://github.com/rails/rails/issues/32587
https://github.com/rails/spring/pull/546#issuecomment-382582174
Slackで匿名で会話できるチャンネルを作りました

# 💡作ったもの
![demo_ja.gif](https://qiita-image-store.s3.amazonaws.com/0/130874/700a8409-1eb3-5bf1-5ed4-eb438d17572e.gif)

　投稿を BOT が強制的に削除して、再投稿することで匿名化します。キャッシュや通知などにより、削除前の投稿がたまに見えることがありますので、完全匿名ではなく半匿名な感じです。BOTユーザにDMで話しかけて、それをパブリックチャンネルに流すような仕組みでもよかったのですが、インタラクティブ感が薄れるのでこの仕様になりました。

　無用なトラブル防止のため、join時にログ取得している旨を DM で送るようにしています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/5ee4bc7a-e1a8-2c5a-3753-e25509a308ef.png)



# :octocat: 成果物＆導入手順
Sererless Frameworkです、README みてください。
[saitota/SlackAnonymousChannel](https://github.com/saitota/SlackAnonymousChannel)

# 📝あとがき

　しばらく 自分の所属する雑談Slackにて動かしてみたところ、 `#tsurai` チャンネルにも書けないようなドロドロしたつらみが書かれたり、小学生のような下ネタが続いたりと、とってもカオスな雰囲気になって面白いです。簡単にデプロイできるので、あなたの TEAM にも入れてみてください！

# 参考にしたかも
- [Slackにより断片化した集中タイムを取り戻すための、Bot開発 - Qiita](https://qiita.com/icoxfog417/items/0f9f1f6855ed17ceed4b)
- [超簡単にSlackで匿名の意見を投稿できるようにする - Qiita](https://qiita.com/shibukk/items/8675e7684dba0476906c)
Rails iosでピンチインを無くす

#目的
開発中のアプリで、iosで文字入力をおこなおうとすると画面全体がピンチインを行うのがうざいし、
他の弊害が出たりして困ったのでその辺の対処

参考↓
https://qiita.com/volkuwabara/items/b285cc312587c73a4812
http://shanabrian.com/web/html-css-js-technics/css-ios-bug-fixed-position-breaks-keyboard-opened.php


#ソースコード

```scss:

 textarea {
    font-size: 16px;
    transform: scale(0.8);
  }
```


```erb:
 <%= f.text_area :body, id:'no-pinch' , class:'frame-none text-white submit-form px-4', placeholder:"入力してください" %>

、
、
、
<script>
$(document).ready(function(){
 inputElem = document.querySelector('#no-pinch')
  inputElem.addEventListener('focus', function() {
   scrollTop = $(window).scrollTop();
   $('#bottom-nav').hide();
  });
  inputElem.addEventListener('blur', function() {
    setTimeout(function() {
     $('#bottom-nav').show(); 
    }, 200);
  });
});
  </script>
```

iosでは16px以下で設定しているとピンチインしてしまうのでこのCSSとjsで対応
脆弱性情報を柔軟に取得する方法

#脆弱性情報まとめサイト JVN(Japan Vulnerability Notes)
MITRE社が公開しているCVE(Common Vulnerabilities and Exposures)に対応した脆弱性通知サイトです。
CVEが英語で書かれているのに対し、日本語で書かれていることが特徴の１つです。

#MyJVN API
JVNの情報をHTTPリクエストで取得するためのWeb APIです。
参考:　https://jvndb.jvn.jp/apis/index.html


##API例 dockerの脆弱性一覧表示
dockerの製品IDであるpidを取得

```
curl -S https://jvndb.jvn.jp/myjvn -X POST --data "method=getProductList&feed=hnd&keyword=docker"
```

pid 20566(docker)の脆弱性情報を取得

```
curl -S https://jvndb.jvn.jp/myjvn -X POST --data "method=getVulnOverviewList" -d "feed=hnd" -d "productId=20566&rangeDatePublic=n&rangeDatePublished=n&rangeDateFirstPublished=n"
```
rubyの配列の結合


- push
 
```
a = [1, 2, 3]
b = [4, 5, 6]
a.push(b)
p a # => [1, 2, 3, [4, 5, 6]]
a.flatten!
p a # => [1, 2, 3, 4, 5, 6]
```

  - `*`で配列の展開ができる
   
  ```
  a = [1, 2, 3]
  b = [4, 5, 6]
  a.push(*b)
  p a # => [1, 2, 3, 4, 5, 6]
  ```

- <<

```
a = [1, 2, 3]
b = [4, 5, 6]
a << b
p a # => [1, 2, 3, [4, 5, 6]]
a.flatten!
p a # => [1, 2, 3, 4, 5, 6]
```

- +

```
a = [1, 2, 3]
b = [4, 5, 6]
c = a + b
p c # => [1, 2, 3, 4, 5, 6]
```

- concat

```
a = [1, 2, 3]
b = [4, 5, 6]
a.concat(b)
p a # => [1, 2, 3, 4, 5, 6]
```

- `|`(パイプ)で結合+重複除去ができる

```
a = [1, 2, 3]
b = [1, 4, 5]
p a + b = [1, 2, 3, 1, 4, 5]
p a | b = [1, 2, 3, 4, 5]
```
Goalng  の【...】について

## 使い方１：引数無限
```go
func x(args ...int){
}//任意数のint引数
```

## 使い方2：sliceを分散する
```go
m := make([]int, 3)
x(m...)// slice mの３つint型元素をxの引数として使う
```


## そして：便利な書き方

```go
var a, b []int
for _, v := range a {
	b = append(b, v)
}  //やめましょう！
```
```go
var a, b []int
b = append(b, a...)//これを使おう
```
Raspberry Piのlocale settingsでWarningが出るのを解消してnodebrewを使う


Raspiにnodebrewを使ってNode.jsを入れようとしたときの内容です。

perlのlocaleエラーらしいですね。前に調べたことがある気がしたけど取り急ぎまとめてみます。

## 環境

* Raspberry Pi 3

```
$ uname -a
Linux raspberry 4.14.34-v7+ #1110 SMP Mon Apr 16 15:18:51 BST 2018 armv7l GNU/Linux
```

```
$ lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 9.4 (stretch)
Release:	9.4
Codename:	stretch
```

## 症状

nodebrewを使うと毎回以下の警告が出ます。

```
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
#export GCC_COLORS='error=01;31:warning=01;35:note=01;36:caret=01;32:locus=01  	LC_CTYPE = "ja_JP.UTF-8",
	LANG = "en_GB.UTF-8"
```

以下の手順でv10.1.0を利用しようとしても

```
$ nodebrew install-binary 10.1.0
$ nodebrew use 10.1.0
```

デフォルトで入っているv4.8.2が表示されてしまいます。

```
$ node -v
v4.8.2
```

もともと入ってたnodeコマンドを削除

```
$ sudo rm rf /usr/bin/node
```

パスも通したけどうまくいかず

## 対処

> [Ubuntuのlocaleが正しく設定されていない時の対処メモ](http://blog.masasuzu.net/entry/20120512/1336824001)

を参考に

```
$ sudo locale-gen ja_JP.UTF-8
```

```
$ sudo dpkg-reconfigure locales

perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
	LC_CTYPE = "ja_JP.UTF-8",
	LANG = "en_GB.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to a fallback locale ("en_GB.UTF-8").
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
/usr/bin/locale: Cannot set LC_CTYPE to default locale: No such file or directory
/usr/bin/locale: Cannot set LC_ALL to default locale: No such file or directory

Generating locales (this might take a while)...
  en_GB.UTF-8... done
  ja_JP.UTF-8... done
Generation complete.
```

ここで`ja_JP.UTF-8 UTF-8`にチェックを入れてOKで完了です。

![](https://i.gyazo.com/e33f0eddc771878c2764822c543a3310.png)

最後も同様です。

![](https://i.gyazo.com/27c2cc71d23ef9b33fc48b9ed6342681.png)

これで警告が消えました。

```
$ sorce .bashrc
```

```
$ which node
/home/pi/.nodebrew/current/bin/node
```

```
$ node -v
v10.1.0
```

これで完了です。
LoLで高レートの試合情報を取得する方法 

一見難しそうですが、高レートのチャレンジャーやマスターの
試合データであればRiot Games APIを使用することで、簡単に取得できます。

手順の概要は以下の通りです。
1. 高レートのサモナーIDを取得する
2. 各サモナーIDを基に、アカウントIDを取得する
3. 各アカウントIDを基に、試合IDを取得する
4. 各試合IDを基に、試合情報を取得する

**※1 手順2以降からレート制限に引っ掛からないように注意して下さい。**
**※2 Riot Games APIを使用するための準備については割愛します。**

###1. 高レートのサモナーIDを取得する
以下のAPIを実行し、entriesの中にあるplayerOrTeamIdを取得する。
これはサモナーIDにあたる。
/lol/league/v3/challengerleagues/by-queue/{queue}
/lol/league/v3/masterleagues/by-queue/{queue}
    
###2. 各サモナーIDを基に、アカウントIDを取得する
以下のAPIを実行し、accountIdを取得する。
/lol/summoner/v3/summoners/{summonerId}  

  
###3. 各アカウントIDを基に、試合IDを取得する
以下のAPIを実行し、matchesの中にあるgameIdを取得する。
/lol/match/v3/matchlists/by-account/{accountId}

###4. 各試合IDを基に、試合情報を取得する
以下のAPIを実行し、試合情報を取得する
/lol/match/v3/matches/{matchId}
/lol/match/v3/timelines/by-match/{matchId}

**timelinesでは以下の情報などを取得できますが、
各プレイヤーの使用チャンピオンやサモナースペルを知るために
matchesのAPIを使用する必要があります。**
・各ドラゴンやヘラルド、バロンを倒した時の試合経過時間
・各プレイヤーが購入したアイテムのID, 購入した時の試合経過時間

参考サイト

Riot Games API
https://developer.riotgames.com/

Riot Games APIドキュメント
https://developer.riotgames.com/api-methods/
LocalStorageの参照エラー

LocalStorageを使う際、特定のディレクトリへのアクセス権がないとアクセスが拒否され、参照エラーになってしまう。

[IE11でLocalStorageが使えない時の対処法](https://qiita.com/hida/items/5570e390781b6f118a4f)

これ以外にプライベートブラウズで起きる場合もあるよう。
そのため、LocalStorageを使う場合は`try...catch`を用いて事前に判定する必要がある。

```js
function hasLocalStorage() {
  var checkKey = 'haslocalstorage';
  try {
    window.localStorage.setItem(checkKey, 1);
    window.localStorage.getItem(checkKey);
    return true;
  } catch(e) {
    return false;
  }
}
```
プログラミングガチ初心者がゲーム作りを始めようと思ったら、まず何から始めることができるのか

#**はじめに**

今からゲーム制作しようとしても、
わたしみたいなガチ初心者は、何から始めてよいか
しばしばわからなくなります。作りたいジャンルにもよるのですが
難しい内容だと続かないことも良くある話だと思います。
今回は検索して出てくる簡単そうなゲーム制作の手段を3つ紹介したいと思います。

## **この記事の対象者**
・ゲームを作ったことが無い
・プログラミングをやったことがない
・習得したい言語が選択できていない
・人から色々お勧めされすぎて何から手を出せばいいか分からない


### **ビットゲームメイカー**
### 事前準備
1.スマホからアプリをインストール
https://play.google.com/store/apps/details?id=com.dh3d.bitgamemaker&hl=ja

<やった感想>
まずスマホでRBGツクールみたいなのができるという点が
優れています。
ただソースコードを書いたりということは
全くないのでプログラミングの勉強がしたい人向きではありません。
尚、インストールに512MB以上の空き容量が必要なので注意が必要です。


### **Unity**

#### 事前準備
1.Unityインストール
下記のリンク(Unity Store)から無料のコース「Personal」をダウンロードしました。
条件に同意のチェックボックスにチェックを付け、「Windows用のインストーラをダウンロードする」をクリックします。
https://store.unity.com/ja/download?ref=personal
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234065/2291ff8a-13aa-7c4d-6c14-05538e150e60.png)

はじめてでしたがセットアップの手順については下記のリンクに従って行ったら問題ありませんでした。
https://mono-pro.net/unity-setup2017



2.チュートリアル 玉転がし
初学者なので今回は「玉転がし」のチュートリアルを進めました。
https://unity3d.com/jp/learn/tutorials/projects/hajiuni-jp

<やった感想>
手順がていねいに作られていたのでC#を知らなくても
その通りのものがつくれました。
ただ、ここからの応用がまだできないので
これだけやればすぐゲームの仕事に就けるという感じではなかったです。
チュートリアルを終えた後に初心者向けの関連書籍を読むといいみたいです。


### **Unreal Engine4**
これについてはこの記事を書きながら
調べていた過程で初めて知りました。
Unityより凄そうなのでこっちのチュートリアルをやってみたいと思います。
#### 調べた情報
2015年3月3日から無料で誰でも使えるゲームエンジンですが、
4半期ごとに一定の売り上げを上げているユーザはロイヤリティ(ライセンス契約に基づき支払う料金のこと)を
支払う必要があるとのことです。(私のようなド素人には関係のない話だとは思いますが)

大きな特徴としてはコードを一切書かずに組み立てることができる**「BluePrint」**と
呼ばれる**「ビジュアルスクリプティングシステム」**が搭載されており、
コードの記述でロジックを組むのではなく、グラフィカルにロジックを組むことで
ゲームが作成できてしまう点です。

・導入の詳細記事
https://qiita.com/ozin/items/772e4de002e7aae9bdb6
・UnrealEngine4のドキュメント
http://api.unrealengine.com/latest/JPN/GettingStarted/index.html
・BluePrintについての詳細は下記リンクが参考になりました。
https://www.slideshare.net/masahikonakamura50/50-40986508

#**あとがたり**
今回はゲーム業界で1ミリも働いたことが無い私が
ゲーム制作について記事を書きました。

私自身なかなか気づくことができなかったのですが
ゲームで遊ぶことと、ゲームを作成するという行為は
質が全く異なります。
したがって、ゲーム制作で得られる楽しみは
ゲームで遊んで得られる楽しみと異なる為、
両方ともハマらない方はすぐに飽きてしまうものだということです。

大切なのは好き嫌いの感情に左右され反射的に行動を起こすのではなく、
決めた目標に対して、ちゃんと行動が伴っているかどうかです。

今何か始めようと思っている方については、欲求やその時の感情から行動を起こすのではなく、
近い将来なりたい自分の姿や状態を整理しなければいけません。

それに対して必要なことは何か、何をすべきか、どうなりたいのか分析した後に
行動したほうが、失敗しない確率が高くなるのではないでしょうか。
bitnami Redmineでテーマをインストールする

1. スタートメニューから、『Bitnami Redmine Stack を使用する』を選んでコマンドプロンプトを出す。
2. テーマが保存されているディレクトリへ移動する。  
    cd C:\Bitnami\apps\redmine\htdocs\public\themes
3. farend fancy をcloneする。
    git clone https://github.com/farend/redmine_theme_farend_fancy.git
    ![無題.png](https://qiita-image-store.s3.amazonaws.com/0/13972/eccbb68c-a116-96e4-6c3d-396f38301083.png)

4. 設定 -> 表示 -> テーマ を変える。
    ![無題.png](https://qiita-image-store.s3.amazonaws.com/0/13972/796f84f8-a7a7-f0eb-fbc2-59b5fa09f453.png)

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/13972/ec12e75f-9d32-36b7-5988-ae1edf89ad50.png)
[RubyOnRails]Bootstrapを適用するには

RailsアプリにBootstrapを適用させる方法は、簡単に言うとgemのインストールとアセットファイルの編集。

gemのインストールはGemfileを編集してbundle install

```Gemfile
gem 'bootstrap-sass', '3.2.0.0'
```


アセットファイルの編集は、application.cssに下記２行を追記する

```application.css
@import "bootstrap-sprockets";
@import "bootstrap";
```
Rails　link_toを文言ではなく範囲で指定する

#目的

ブラウザで文字に対してのリンクではなくある程度大きな範囲全体に`do`をつかってlink_toを掛ける
今回は試合（Gameモデル）を一覧表するページ（index）や詳細ページ（show）でその試合に応じたゲームカードとして表示したいのでパーシャルで組立ている。
そのカード内の何処をクリックしてもその詳細ページにとばしたい処理

#ソースコード

before

```erb:_game_card.html.erb
<% if games.empty? %>
  <p class="text-center my-3">試合がありません</p>
<% else %><!-- 条件１-->
  <% games.each do |game| %>
    <div class="card my-3">
      <div class="row m-2">
        <%= link_to game, class: "row col-12 pb-2 pt-1" do  %>
          <div class="col-6 "><%= game.fight_time.try(:strftime, "%Y年%-m月%-d日(#{%w(日 月 火 水 木 金 土)[game.created_at.wday]}) %H:%M") %></div>  
          <div class="mx-auto text-center col-6  text5"><%= game.tennis_court.prefecture %></div>
        <% end %>
      </div>
    </div>
<% else %><!--　条件２-->
<!-- 条件２にあわせて少し変更した、上と似たようなコード-->
<% end %>

```

この状態だとlink_to, do -- end で囲った、日付、場所にか関する領域しかリンクになっていないので
この試合カード全て(qiitaには載せられませんが試合のスコア、対戦選手名、そのステイタス等)を対象にリンクにしたいけど大きくはまった。




after

```erb:
<% if games.empty? %>
  <p class="text-center my-3">試合がありません</p>
<% else %>
  <% games.each do |game| %>
    <%= link_to game, class:"card my-3" do %>
      <div class="row m-2">
        <div class="row col-12 pb-2 pt-1">
          <div class="col-6 "><%= game.fight_time.try(:strftime, "%Y年%-m月%-d日(#{%w(日 月 火 水 木 金 土)[game.created_at.wday]}) %H:%M") %></div>
          <div class="mx-auto text-center col-6  text5"><%=game.tennis_court.prefecture %></div>
       </div>
      </div>
   <% end %>
<% else %><!--　条件２-->
<!-- 条件２にあわせて少し変更した、上と似たようなコード-->
<% end %>

```


##はまったところ


```erb:_game_card.html.erb
<% if games.empty? %>
  <p class="text-center my-3">試合がありません</p>
<% else %><!-- 条件１-->
  <% games.each do |game| %>
   <%= link_to game, class: "row col-12 pb-2 pt-1" do  %>
    <div class="card my-3">
      <div class="row m-2">
          <div class="col-6 "><%= game.fight_time.try(:strftime, "%Y年%-m月%-d日(#{%w(日 月 火 水 木 金 土)[game.created_at.wday]}) %H:%M") %></div>  
          <div class="mx-auto text-center col-6  text5"><%= game.tennis_court.prefecture %></div>
        <% end %>
      </div>
    </div>
<% else %><!--　条件２-->
<!-- 条件２にあわせて少し変更した、上と似たようなコード-->
<% end %>

```

こんな様に、単にlink_toを該当の場所へ外に出して終わりだろうとおもって引き受けたタスクでした。
結果CSS が鬼の様に崩れ、そのほかいくつも思い付く限りの変更を行って完成せず。
一日寝て起きたらlink_to　に領域のクラスを持たせることを思い付き実行、完成となった。
ひらめきってそんな物なんですね。
railsでなぜredirect_toにインスタンス変数が使われて、どう処理されているのか。

## railsで **redirect_to(@user)** と書かれていて、
redirectでインスタンス変数ってどゆこと？と混乱した。


```ruby:user_controller.rb
  def create
    @user = User.new(user_params)
    if @user.save
      log_in @user
      flash[:success] = "Welcome to the Sample App!"

      # この部分！！
      redirect_to @user
      # この部分！！

    else
      render 'new'
    end
  end
```

新しいユーザをcreateして、最後に画面の描画をどこにするのか指定する部分。

**どこに行くって指定されてないじゃん！**
と思い調べた所、以下のようになっていました。

まずroutes.rbにて

```ruby:routes.rb
resources :users
```
が指定されており、
その結果ルーティングは以下のようになります。
(ターミナルにで rake routesで調べられます。)


```terminal:terminal
                    users GET    /users(.:format)               users#index
                          POST   /users(.:format)               users#create
                 new_user GET    /users/new(.:format)           users#new
                edit_user GET    /users/:id/edit(.:format)      users#edit
                     user GET    /users/:id(.:format)           users#show
                          PATCH  /users/:id(.:format)           users#update
                          PUT    /users/:id(.:format)           users#update
                          DELETE /users/:id(.:format)           users#destroy
```

@userで指定した場合はuser GETの部分のルート、showの部分が使われることになります。

```terminal:terminal

                     user GET    /users/:id(.:format)           users#show
```

結果として、
redirect_to @user
は
userのshowアクション（user#show）
を呼び出すことになります。

## 参考

[redirect_toになんでインスタンス変数？？](http://bryankawa.hatenablog.com/entry/2017/03/14/224602)
SQLServer: 各DB上で同一の処理を実行させる方法

全DBに対して同一のクエリを実行させたいときに少しハマったので、その内容と解決方法について書いておきます。
実現のために考えた手順は以下の通りです。

1. データベース名リストを取得
2. ループで回しつつ、use [DB名]を実行してDB切り替え後に実行したいクエリを発行

というシンプルなものですが、最初に考えたコードだとうまくいきませんでした。

# うまくいかなかった例
```sql
DECLARE
	 @Database sysname
	,@sql nvarchar(2000)

DECLARE
	CMyCursor CURSOR FAST_FORWARD FOR
		SELECT
			name
		FROM
			master.sys.databases WITH(NOLOCK)
		WHERE
		-- システムDBおよびディストリビューションDB除外、かつオンラインのDBに限定
			Cast(CASE WHEN name IN ('master', 'model', 'msdb', 'tempdb') THEN 1 ELSE is_distributor END As bit) = 0
		AND state = 0

OPEN CMyCursor
FETCH NEXT FROM CMyCursor INTO
	@Database

-- DB単位のループ
WHILE @@fetch_status = 0
BEGIN

	set @sql = 'USE ' + CAST(@Database AS NVARCHAR(100)) + ';'

	execute sp_executesql @sql

        --DBごとに関数やストアドリストを出力したい
	SELECT
	    ROUTINE_NAME,
	    ROUTINE_TYPE,
	    OBJECT_DEFINITION(object_id(ROUTINE_NAME)) as FullDefinition
	FROM
	    INFORMATION_SCHEMA.ROUTINES

FETCH NEXT FROM CMyCursor INTO
	@Database
END

CLOSE CMyCursor
DEALLOCATE CMyCursor
```
これだと、USEが効きませんでした。
正確にいうと、sp_executesqlは実行完了後にコンテキストが元に戻るため、USE [DB名]自体はちゃんと実行されるのですが、実行完了後に現在選択中のDBに戻ってからクエリを発行するので、結局同じDBに対してループの数だけ同じクエリを発行し続けることになります。

# 改良後のクエリ
```sql
DECLARE
	 @Database sysname
	,@sql nvarchar(2000)

DECLARE
	CMyCursor CURSOR FAST_FORWARD FOR
		SELECT
			name
		FROM
			master.sys.databases WITH(NOLOCK)
		WHERE
		-- システムDBおよびディストリビューションDB除外、かつオンラインのDBに限定
			Cast(CASE WHEN name IN ('master', 'model', 'msdb', 'tempdb') THEN 1 ELSE is_distributor END As bit) = 0
		AND state = 0

OPEN CMyCursor
FETCH NEXT FROM CMyCursor INTO
	@Database

-- DB単位のループ
WHILE @@fetch_status = 0
BEGIN

	set @sql = ''
						-- useを使う必要があるが、use単体でexecuteすると実行後にコンテキストが現在のDBに戻ってしまう。そのため丸ごと動的SQLで実行する
	set @sql = @sql + ' USE ' + CAST(@Database AS NVARCHAR(100)) + ';'
						-- ここにDBごとに実行したい処理を書く
	set @sql = @sql + '	SELECT '
	set @sql = @sql + '	    ROUTINE_NAME, '
	set @sql = @sql + '	    ROUTINE_TYPE, '
	set @sql = @sql + '	    OBJECT_DEFINITION(object_id(ROUTINE_NAME)) as FullDefinition '
	set @sql = @sql + '	FROM '
	set @sql = @sql + '	    INFORMATION_SCHEMA.ROUTINES '

	-- useと実行したい処理を同一コンテキスト内で実行
	execute sp_executesql @sql

FETCH NEXT FROM CMyCursor INTO
	@Database
END

CLOSE CMyCursor
DEALLOCATE CMyCursor
```
動的SQLの中に、USEと実行したいクエリとを含めることで、同一コンテキスト内での実行が可能となり、各DBに対してのクエリ発行という意図した結果を得ることができました。

参考：
[How can I get a list of all of the user databases via t-sql?]
https://stackoverflow.com/questions/463118/how-can-i-get-a-list-of-all-of-the-user-databases-via-t-sql?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

[Database USE issues with dynamic SQL]
https://ask.sqlservercentral.com/questions/5108/database-use-issues-with-dynamic-sql.html
Docker環境のRails 5にVue.jsを導入した手順

# 検証環境

* 検証日: 2018/05/14
* macOS: High Sierra 10.13.4
* Docker: version 18.03.1-ce
* Rails: 5.1.5

# Node.jsとYarnのインストール

```Dockerfile:Dockerfile
...

# Node.js
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
    apt-get install -y nodejs

# Yarn
# 1行目は外部パッケージをインストールするために、HTTPSに対応したapt methodsをインストールする処理
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
    apt-get update && apt-get install yarn

...
```

## コンテナの起動

```
docker-compose build
docker-compose up -d
```

## 参考

* [パッケージマネージャを利用した Node.js のインストール](https://nodejs.org/ja/download/package-manager/#debian-and-ubuntu-based-linux-distributions-debian-ubuntu-linux) 
* [インストール | Yarn](https://yarnpkg.com/lang/ja/docs/install/#debian-stable)

# Webpackerの導入

[rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails](https://github.com/rails/webpacker)

```rb:Gemfile
...

# 現在の最新を使う場合
gem 'webpacker', '~> 3.5'

# または、masterを使う場合
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

# または、プレリリース版を使う場合
gem 'webpacker', '>= 4.0.x'

...
```

## インストール

```
docker-compose run web bundle install
docker-compose run web bundle exec rails webpacker:install
```

## 生成ファイル

| ファイル名 | 概要 |
|:--|:--|
| .babelrc | babel設定ファイル |
| .postcssrc.yml | PostCSS設定ファイル |
| app/javascript/packs/application.js | エントリーポイントファイル |
| bin/webpack | webpackのビルドスクリプト |
| bin/webpack-dev-server | ビルドサーバーの起動スクリプト |
| config/webpack/development.js | 開発環境設定ファイル |
| config/webpack/environment.js | 共通環境設定ファイル |
| config/webpack/production.js | プロダクション環境設定ファイル |
| config/webpack/test.js | テスト環境設定ファイル |
| config/webpacker.yml | webpacker設定ファイル |


## ヘルパーの修正

```rb:/app/views/layouts/application.html.erb
-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

## ビルド

ここで一旦ビルド

```
# webpack dev server
docker-compose exec web ./bin/webpack-dev-server

# watcher
docker-compose exec web ./bin/webpack --watch --colors --progress

# standalone build
docker-compose exec web ./bin/webpack
```

# Vue.jsの導入

```
docker-compose run web bundle exec rails webpacker:install:vue
```

## 生成ファイル

| ファイル名 | 概要 |
|:--|:--|
| app/javascript/app.vue | Vueコンポーネントファイル |
| app/javascript/packs/hello_vue.js | エントリーポイントファイル |
| config/webpack/loaders/vue.js | Vue.jsの環境設定ファイル |

## ヘルパーの修正

```rb:/app/views/layouts/application.html.erb
-  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= stylesheet_pack_tag 'hello_vue', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_pack_tag 'hello_vue', 'data-turbolinks-track': 'reload' %>
```

## ビルド

```
docker-compose exec web ./bin/webpack
```
watson-developer-cloudを利用してWatson Visual Recognitionのカスタムモデルにアクセスする


この記事の概要です。

・画像ファイルを添付する画面をexpressで開発する
・expressからWatson Visual Recognition(VR)に画像ファイルを送付する
・IBM RPAからexpressの画面を操作する

【背景】
IBM RPAからWatson VRを呼び出したかったのですが、IBM RPAのREST Web Serviceコマンドから画像ファイルをストリームでWatson VRに送信することができません。
そこで、Watson VRに画像ファイルを送信する画面を開発し、IBM RPAからその画面を操作するシナリオを考えました。


事前準備です。

```

npm install -g express-generator
express vr
cd vr
mkdir upload

npm install multer
npm install watson-developer-cloud
npm install express
npm install http-errors
npm install cookie-parser
npm install morgan
npm install debug
npm install jade
```

routesフォルダのindex.js を以下のように修正します。

```javascript
"use strict";

var express = require('express');
var router = express.Router();

var fs = require('fs');
var watson_vr = require('watson-developer-cloud/visual-recognition/v3');
var multer = require('multer');

var storage = multer.diskStorage({
	destination: function(req,file,cb){
		cb(null,'./upload');
	},
	filename: function(req,file,cb){
		cb(null, Date.now() + '.png');
	}		
});

var upload = multer({storage:storage}).single('image');

var visual_recognition = new watson_vr({
	api_key: 'your api key',
	version: '2018-03-19'
});

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Hello Visual Recognition' });
});

router.post('/api/classify',function(req,res){
	upload(req,res,function(err){
		if(err){
			console.log(err);
			res.send("error");
		}else{
			console.log("uploaded " + req.file.path);
			
			var classifier_ids = ["your classifier id"];
			var threshold = 0.5;

			var params = {
				images_file : fs.createReadStream('./upload/' + req.file.filename),
				classifier_ids: classifier_ids,
				threshold: threshold
			};
		
			visual_recognition.classify(params,function(err,response){

				console.log(req.file.path);
				fs.unlink(req.file.path);

				if(err){
					console.log(err);
					res.send(err);
				}else{
					console.log(JSON.stringify(response, null, 2));
					// res.send(JSON.stringify(response,null,2));
					// 特定のクラスにヒットした場合、クラス名と確度を表示する
					if(response.images[0].classifiers[0].classes.length>0){
						res.send(response.images[0].classifiers[0].classes[0].class + "<br>" +
						response.images[0].classifiers[0].classes[0].score);
					}else{
						res.send("該当なし");
					}
				}
			});
		}
	});
});

module.exports = router;
```

viewsフォルダのindex.jadeを以下のように修正します。

```html
extends layout

block content
	h1= title
	form(method="post",enctype="multipart/form-data",action="/api/classify")
		input(type="file",name="image")
		br
		input(type="submit")
```

expressアプリケーションを起動し、http://localhost:3000/にアクセスします。

```csh
npm start
```
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/228422/5c499328-5cf1-0995-8a43-faf2b45a41b7.png)

IBM RPAからexpressの画面を操作する例
![rpa.PNG](https://qiita-image-store.s3.amazonaws.com/0/228422/012b8431-89ca-2b2c-5c80-88312ea95747.png)

【リンク】
https://qiita.com/smatsui@github/items/8e9d8a16d9e9635cebf5
https://www.ibm.com/watson/developercloud/visual-recognition/api/v3/node.html?node
Javascript トリビア（ムダ知識）



## can write how like this.

```js
for(var [key, val] of Object.entries(obj)){
  console.log(key, val)
}
```






---
全然必要ないかも

## 即時実行関数を作るための最低限の条件

> 逆に言えば、文の先頭にfunctionが来ない式を作れば良いのです。

-  [ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由 - hogehoge @teramako](http://d.hatena.ne.jp/teramako/20130622/p1)
HTMLをPHP変数に入れたいときにはOutput bufferingすると良いらしい

PHPの変数にHTMLを入れたい。入れたくない？

PHPの構文内でHTMLを出力するときにはphpの閉じタグ ```?>``` と開始タグ ```<?php```の間でHTMLを書けば良い。

```php
<?php
$array = ['あ～', 'いいっすね～'];
foreach ($array as $value) {
?>
    <p><?php echo $value; ?></p>
<?php
}
```

結果
```<p>あ～</p><p>いいっすね～</p>```

出力したい場所にPHPコードの埋め込みができるなら問題ないが、
ワードプレスのフィルターフックで本文(the_content)にHTMLを追加したい場合など、HTMLの出力を変数に格納するにはどうすればいいのか分からなかった。

文字列としてHTMLをくっ付けるでもいいんだけれど、追加したいHTMLが複雑になると文字列だとキツくなってくる。

```php
<?php
add_filter('the_content', function ($content) {
    $array = ['あ～', 'いいっすね～'];
    $additional = '';
    foreach ($array as $value) {
        $additional .= '<p>'.$value.'</p>';
    }
    return $content .$additional;
});
```

こういうときにはOutput bufferingを使って解決できるらしい。

```php
<?php
add_filter('the_content', function ($content) {
    $array = ['あ～', 'いいっすね～'];
    ob_start(); //出力のバッファを開始する
    foreach ($array as $value) {
//ここからHTML
?>
    <p><?php echo $value; ?></p>
<?php
//HTMLここまで
    }
    $additional = ob_get_contents(); //バッファされた出力を取得する
    ob_end_clean(); //バッファを削除する
    return $content .$additional;
});
```

```ob_start()``` と ```ob_get_contents()``` の間で別のPHPファイルを ```include``` し、その出力をバッファして変数に格納することもできるので便利。


参考 : [PHP: ob_start - Manual](http://php.net/manual/ja/function.ob-start.php)
git push でロリポップサーバへファイルをリリースするHowTo

## 前提条件

- ロリポップのレンタルサーバを使用できること
- スタンダードプラン以上であること


まずロリポップサーバにsshします。
以降サーバ上で叩くコマンド

``` sh
cd ~
mkdir git
cd git
mkdir web.git
cd web.git
git init --bare
cd hooks
vi post-receive
```

post-receiveの内容

[続きはこちらへ移転しました!](https://se-taisei.com/items/git/lolipop)
TaskRunner note


## ES6（クラス, アロー構文）で書くには:

- babelifyを活用
  - man: https://github.com/babel/babelify
  - ref: http://akabeko.me/blog/2015/04/babelify-es6/

## モジュール化
複数のファイルに分けて、それをひとつにバンドルするまで。

### 基礎知識:

- #くそわかりやすい [[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita](https://qiita.com/chuck0523/items/1868a4c04ab4d8cdfb23)
- #くそわかりやすい [[意訳]初学者のためのJavaScriptモジュール講座 Part2 - Qiita](https://qiita.com/chuck0523/items/c88abe4fac828b7b5f4e)

### rollupの場合

>複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など... [続き](https://qiita.com/cognitom/items/e3ac0da00241f427dad6)

### browserifyの場合

```
1. tsc index.ts
  - このコマンドはindex.tsだけでなく依存しているファイルも含めすべてをjsファイルに変換する
2. browserify index.js -o bundle.js
  - bundle.jsとしてひとつのファイルにバンドルしてくれる
```

（いろんなオプションがあるんだなあ）
`tsc -t es6 -m commonjs index.ts`
【Azure】ASP.net MVC5で画像ファイルをAzureBLOBStorageに保存する方法【BLOB】

# Edgeとchrome

input type="file"を使用してfullpathを取得しようとすると、Edgeは表示されるが、chromeでは表示されない為、fullPathを使用するやり方はできません。

MVC5に関して説明している資料は大体が、表示されているfullpathを使用するものがほとんどだったので、ほかのやり方を紹介します。


# 事前準備

AzureStorageのConnectStringとContainerNamewが必要です。

#コード

View

```html:index.html
@using (Html.BeginForm("Add", "Photo", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" id="file" name="uploadFile" multiple/>
    <input type="submit" value="アップロード" />
}
```

Controller

```csharp:PhotoController.cs

public class EventPhotoInfoController : Controller
{
    private static readonly string ConnectString = ConfigurationManager.AppSettings.Get("Storage_ConnectString");
    private static readonly string PhotoContainerName = ConfigurationManager.AppSettings.Get("Storage_Container_Photo");

        [HttpPost]
        public ActionResult Add(HttpPostedFileWrapper uploadFile)
        {
            CloudStorageAccount account = CloudStorageAccount.Parse(ConnectString);
            CloudBlobClient blobClient = account.CreateCloudBlobClient();
            CloudBlobContainer container = blobClient.GetContainerReference(PhotoContainerName);
            container.CreateIfNotExistsAsync().Wait();

            var blobName = Guid.NewGuid().ToString("D") + System.IO.Path.GetExtension(uploadFile.FileName);
            CloudBlockBlob blob = container.GetBlockBlobReference(blobName);
            blob.Properties.ContentType = uploadFile.ContentType;
            blob.UploadFromStreamAsync(uploadFile.InputStream);
            return View();
        }
}
```


#参考
[Upload Image In Azure Blob Storage With ASP.NET MVC](https://www.c-sharpcorner.com/UploadFile/8a67c0/upload-image-in-azure-blob-storage-with-Asp-Net-mvc/)
Javascript suggestion（提案）

## 関数の定義の仕方: 役割をひとつに絞る

依存性が高い:

```js
  function appendElRightArrow() {
    var el;
    el = document.createElement('div');
    el.setAttribute('class', 'arrow-right');
    document.querySelectorAll('selector to be appended')[0].appendChild(el);
  }
```

依存性が高い理由: `selector to be appended`が変わると関数内部を修正する必要がある。

依存性が低い:

```js
  function getElRightArrow() {
    var el;
    el = document.createElement('div');
    el.setAttribute('class', 'arrow-right');
    return el;
  }
```


## 命名規則

- 変数: 名詞 (例外: 'is'で始まるものは除く)
- 関数: 動詞

変数:

- 赤い要素: red element
- 挿入される要素: element to be inserted
- Aを走らせる要素: element which make A run.
- 背景が青い要素: element that background is blue.

1. 形容詞を用いる: サフィックスになる
2. 関係代名詞等を用いる: プレフィックスになる

プログラムでは2の関係代名詞等をよく使うので
プレフィックスがいいのかなと個人的に思ってる( ¨̮ )

```
まとめ
- 関数, メソッド名は必ず動詞でつける
- 型をprefixとしてつける。例:
    - jQuery object: $phone
    - element: elPhone
        - 説明: 値がDOMObject -> 変数に'el'というプレフィックスをつける   例: elToDisplayDate
          - 理由: セレクター(文字列)やその他変数などとの判別のため
    - string: strPhone
    - int: iPhone
```
Raspberry Pi 3B+ でROSをつかう

# 追記（2019/04/15）

いつの間にやら3B+向けのubuntuのオフィシャルイメージが出たようです．
[こちら](https://wiki.ubuntu.com/ARM/RaspberryPi)
これを書き込んで[ROS公式](http://wiki.ros.org/melodic/Installation/Ubuntu)を見ながらやる方が手間が少なくて良さそう．



# 注意
現在（2019/04/15）では普通に手に入る3B+のほとんどが技適マーク付きだと思います．
~~現在（2018/05/14）element14のRaspberry pi 3B+は認証テストが終わっていません．~~
~~電波が出る状態で使用しないでください．~~
この方法は実験的です．すべて動作確認されていません．自己責任でお願いします．


# いるもの
- Raspberry Pi 3B+
- Raspberry Pi 3B
- microSD

# 概要
上述の通り，本方法ではRaspberry pi 3Bが必要になります．
Raspberry Pi 3B用のイメージを焼き，Raspberry Pi 3B上で中身をゴソゴソ入れ替えます．
現在3B+用のイメージを作ってるところだそうなので急いでない人はそれを待つと良いでしょう．

# 手順

## sdの作成

[Ubiquity Robotics Downloads
](https://downloads.ubiquityrobotics.com/pi.html)
からRos入りのubuntuイメージをDLし，microsdに書き込んでください．
書き込み方は普通のraspiと同じなのでddとかで書き込んでください．

## 3B+向けに変更

作成したsdを3Bに挿入，起動してください．
3Bの```/etc/apt/sources.list.d/ubiquity-latest.list```の中身を以下のように変更してください．

```
deb https://packages.ubiquityrobotics.com/ubuntu/ubiquity xenial main
deb https://packages.ubiquityrobotics.com/ubuntu/ubiquity-testing xenial pi
```

その後，```apt update; apt upgrade```すると3B+で起動できる状態にしてくれます．

## wifi bluetoothをオフにする

```/boot/config.txt``` に以下を追記してください．

```/boot/config.txt
dtoverlay=pi3-disable-wifi
dtoverlay=pi3-disable-bt
```

## wifiドライバをインストールする

来るべき日に向けてドライバをインストールしておきましょう．

```
mkdir wifi-firmware
cd wifi-firmware
wget https://github.com/RPi-Distro/firmware-nonfree/raw/master/brcm/brcmfmac43455-sdio.bin
wget https://github.com/RPi-Distro/firmware-nonfree/raw/master/brcm/brcmfmac43455-sdio.clm_blob
wget https://github.com/RPi-Distro/firmware-nonfree/raw/master/brcm/brcmfmac43455-sdio.txt 
sudo cp *sdio* /lib/firmware/brcm/
```

## 3B+で起動してみる

以上で作成したmicroSDを3B+に挿入して起動してください．
正常に起動すると思います．
rosも動作してます．
wifiに関しては現在（2018/05/14）国内では確認できません．

# 後記

もっと簡単な方法をご存知の方はぜひ教えてください……


# 参考
[UbiquityRobotics/ubiquity_main](https://github.com/UbiquityRobotics/ubiquity_main/issues/111#issuecomment-381408892)
[ubuntu wiki](https://wiki.ubuntu.com/ARM/RaspberryPi#WiFi)
jQuery's note

## jQueryやtransit.jsを'$','jQuery'以外の変数に閉じ込める

- [JavaScript - #jQuery global領域に'$'や'jQuery'をおかずに読み込む方法(117783)｜teratail](https://teratail.com/questions/117783)
- 上記回答1番目の説でいくと、transit.jsは

コード1行目の

```js
(function(root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else if (typeof exports === 'object') { module.exports = factory(require('jquery')); } else { factory(root.jQuery); } }(this, function($) {
```
これ
`factory(root.jQuery)`
を↓こうで良い
`factory(root.xxxxx)`

## jQueryにはテンプレートエンジンがある

- [jQueryのテンプレートプラグイン「jquery-tmpl」を使ってみた (多分)その1 - 黒羊工房はてな版](http://d.hatena.ne.jp/bsheep/20110326/1301122903)
    - あれ...? もともとjQueryに備わってなかったっけ？？

## jQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグイン

- [jQuery Migrate](http://bashalog.c-brains.jp/13/11/14-142300.php)
atomのsync-settingsによる同期が切れたときの再設定方法

#atomのsync-settingsの設定が消えたときの対処法
## personal access tokenとGist Idが消えたので再取得をした
※一度バックアップが終わっていることを前提としています。
1.gistページ(https://gist.github.com/ )に行ってバックアップがあるページに行く
2.次のようなurlの英数字羅列のところをatomのGist Idに入力する。
　　https://gist.github.com/(ユーザー名)/(英数字の羅列)
3.githubページ(https://github.com/ )に戻り自分のアイコンのところからsettingsを選ぶ。
4.左のメニューの一番下のDeveloper settingsをクリックして移動したページのメニューからPersonal access tokensを選ぶ。(最終的に行くページのurlは https://github.com/settings/tokens )
5.その中からバックアップに使ったものを選択してRegenerate tokenを選択するとpersonal access tokenが新しく手に入るのでこれをatomのPersonal Access Tokenに入力する。
6.再起動すればバックアップするかどうかの選択が出るのでBackUpを選べばバックアップができる。

###突然設定が消える現象
atom自体の設定が突然リセットされる(latexの設定とかもなくなる)現象がたまに起きているが原因がわからない。
とりあえず再設定の方法を明記したかった。
Laravel5 で追加バリデーション


`Request::withValidator()` と `Validator::after()` を使ってバリデーションを追加する。


```
class BaseRequest extends Request
{
    /**
     * 追加バリデーション
     */
    public function withValidator($validator)
    {
        $validator->after(function ($validator) {
            $data = [
                'firebaseToken' => $this->getFirebaseToken(),
                'deviceType' => $this->getDeviceTypeNo(),
            ];

            $headerValidator = \Validator::make($data, [
                'firebaseToken' => 'required',
                'deviceType' => 'in:'.sprintf("%s,%s", OS::$IOS->no, OS::$ANDROID->no),
            ]);

            if ($headerValidator->fails()) {
                $validator->errors()->merge($headerValidator);
                $this->failedValidation($validator);
            }
        });

        return $validator;
    }
}
```
Rails 5.1系からRails 5.2系へのアップデート

基本的には公式に書いてある手順にのっとる。テストをしっかり書いてあれば割とすんなりといく。

https://railsguides.jp/upgrading_ruby_on_rails.html#rails-5-1%E3%81%8B%E3%82%89rails-5-2%E3%81%B8%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%89

# 事前にgemをアップデートしておく

Rubocopアップデートに伴って少し直したくらい。

# config/credentials.yml.encへの移行

Rails 5.1にあげた時にやらなかったからそのツケが…w

この変更に伴い、 `config/master.key` をデプロイ対象にした。
Circle CIとかは `ENV['RAILS_MASTER_KEY']` に設定。

# rspec流したら鬼のようなDEPRECATION WARNING

https://qiita.com/taka0125/items/0e32ce241e0c78df9870

の設定を入れて一個ずつ直した。

2種類だけだった。

## Arel.sqlでくくる

`order('hoge desc')` みたいに書いてた所を `order(Arel.sql('hoge desc'))` にした

## DEPRECATION WARNING: The success?…

`be_success` を `be_successful` にかえる
Unity C# 超初歩３ uGUI

# Hierarchy→Create→UI　で色々作れる。

カンタンにいうとUI（ユーザーインターフェイス）の部品作る。  

「Canvas」の中に部品を置く感じ。このCanvasは画面真正面からみた特別な独立したカメラと考えればいい。カメラがどれだけぐるぐる動こうとこの位置は変わらない。  
なのでCanvasは超ドデカい白枠がドスンと置かれるので、ヒエラルキーのCanvasをダブルクリックして、さらにギズモの下のハンバーガーメニュー？みたいなのをクリックして遠近法を変えて、真正面から見るようにして配置確認する。インスペクターで大きさやフォントサイズや配置を制御できる。

Hierarchy→Create→UIで作ったパーツはCanvasの中にある。

> **重要！**
> **<font color="#ff0000">using UnityEngine.UI</font>**は必須なので忘れない事！

# uGUIでテキスト表示させてみる

これをHierarchy→Create→UI→textでできたtextに貼る。文字はUIの中で見やすいように位置調整しておくこと。

```txtdisplay1.CS
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class txtdisplay1 : MonoBehaviour {

	// Use this for initialization
	void Start () {
	}
	
	// Update is called once per frame
	void Update () {
        this.GetComponent<Text>().text = "ここに文字が表示されます。";

    }
}
```
PLAYすると「ここに文字が表示されます。」とコンソールに表示される。

>  **<font color=#ff0000>this.GetComponent＜Text＞().text</font>**  = ほにゃらら
> ※＜＞は表示上わざと全角にしてあります。

「  **これの＜Text＞()タイプのtextデータを<font color="#ff0000">ゲットコンポーネントする</font>**  」的な意味。thisはそのスクリプトが貼られているオブジェクト。

# uGUIで文字表示　カンタンな計算とToString()

```txtdisplay2.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class txtdisplay2 : MonoBehaviour {

    int x = 4;
    int y = 5;

    // Use this for initialization
    void Start () {
	}
	
	// Update is called once per frame
	void Update () {
        int sum = x + y;
        this.GetComponent<Text>().text = "x + y =" + sum.ToString();
    }
}
```

 > this.GetComponent＜Text＞().text = "x + y =" + **sum.<font color="#ff0000">ToString()</font>**  ;
> ※＜＞は表示上わざと全角にしてあります。

「ToString()」は文字型（string型）ではない型の変数、intとかをstring型へ変換する時に使う。
Backend の S3 や DynamoDB 自体を terraform で管理するセットアップ方法

terraform の state 保存先として S3 backend は大変便利ですが、初期設定のやり方のまとまった情報を意外と見つけられなかったので備忘までにメモ。

# この手順の特徴

- tfstate を格納する S3 バケットや DynamoDB 自体を terraform で管理できる
  - 例えばバケットへのアクセスをポリシーで制限したり開放したりする際、ポリシーで指定するユーザー名や IP アドレスといった値は terraform で管理したい
- terraform 以外のツールでの手作業なども最小限

# Step 1 : Bucket を作成する

state を入れるバケット自体は手動で作る必要があります。

ただし、バージョニングなどの設定はこの段階では必須ではないです。この後のステップを経ることで terraform 管理できるので、terraform で記述する方が良いでしょう。

# Step 2 : .tf を書く

S3 backend や、S3 バケットと Lock 用の resource 定義を書きます。

例:

```hcl
terraform {
  backend "s3" {
    region = "ap-northeast-1"
    bucket = "ほげほげ"
    key    = "tfstate-dev"

    dynamodb_table = "ほげほげ"
  }
}
```

```hcl
resource "aws_s3_bucket" "tfstate" {
  bucket = "ほげほげ"

  acl = "private"

  # tfstate はバージョニングすることが公式に推奨されている
  versioning {
    enabled = true
  }

  # 特に公式に推奨されてはいないが、古いバージョンは消したほうが良いはず
  lifecycle_rule {
    enabled                                = true
    abort_incomplete_multipart_upload_days = 7

    noncurrent_version_expiration {
      days = 32
    }
  }

  # SSE で暗号化しておく
  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }

  tags = {  # terraform 0.11 までは = 不要です
    Name = "ほげほげ-dev"
  }

  lifecycle {
    # bucket は空でないと消せないが、一応制限しておく
    prevent_destroy = true
  }
}
```

```hcl
resource "aws_dynamodb_table" "tfstate_lock" {
  name           = "ほげほげ"
  billing_mode   = "PAY_PER_REQUEST"
  hash_key       = "LockID"

  attribute {
    name = "LockID"
    type = "S"      # S = String
  }
}
```

Update: 手動で bucket を作成する際に有効になっていることが多いはずですが、一応 `aws_s3_bucket_public_access_block` も設定しておくとなお安心です:

```hcl
resource "aws_s3_bucket_public_access_block" "tfstate" {
  bucket = aws_s3_bucket.tfstate.bucket  # terraform 0.11 以下では "${...}" で囲む必要あり

  block_public_acls = true
  block_public_policy = true
  ignore_public_acls = true
  restrict_public_buckets = true
}
```


# Step 3 : init, import, 初回 apply

以下の順に実行します:

- `terraform init`
- `terraform import -lock=false aws_s3_bucket.tfstate バケット名`
  - すでに作成済みのバケットを tfstate に追加して認識させます
- `terraform apply -lock=false`
  - これを実行することで S3 bucket の設定のアップデートや Lock 用の DynamoDB の作成が走ります
  - ここまでは `-lock=false` 指定が必要

# Done

ここまで終われば、あとは普通に `terraform plan` や `terraform apply` が可能です。

また、S3 や DynamoDB の設定自体が terraform 管理されているので、例えば `aws_s3_bucket_policy` を追加で設定してセキュリティを強化したり他のアカウントへ tfstate のアクセス権を与えたり、 `aws_dynamodb_table` の capacity を設定変更したり、といった設定を terraform の管理下で行うことができます。
[Emacs] smartparensとelectric-pair-modeが競合する話

#　便利パッケージ「smartparens」
括弧やら何かしら囲みたい範囲を選択して、括弧の先頭を入力すると選択範囲を対応する括弧で括ってくれる地味だけど便利なパッケージ
知らない人は[githubのリポジトリ](https://github.com/Fuco1/smartparens)のREADMEに色々あるから参考に

# 困っていたこと
smartparensパッケージを導入したのだが、ダブルクォーテーションを入力したときの挙動がよくわからないことになる

```
hogefuga # この文字列を選択してダブルクォーテーションを入力すると、、、
"ga" # こうなる
```

# 解決策
electric-pair-modeが作用してんのかなと思ったらそうだったって話
とりあえずオフにする
下のようなコードが何処かに書いてあるだろうから消す

```lisp
(electric-pair-mode t)
```

「あぁ、electric-pair-mode使えないじゃん」って思った方ご安心
smartparensを導入しておけば、electric-pair-modeと同じ機能が使えます

***smartparensの開発者の方ありがとう***
[保存版]LAMP環境関連のバージョン確認コマンド一式

### Linuxのバージョン確認
```
cat /etc/redhat-release
// 実行結果
CentOS Linux release 7.2.1511 (Core)
```
### Linuxのカーネルのbit数の確認
```
getconf LONG_BIT
// 実行結果
64
```
### アパッチのバージョン確認
```
httpd -v
// 実行結果
Server version: Apache/2.4.6 (CentOS)
```
### Laravelのバージョン確認
```
php artisan -V
// 実行結果
Laravel Framework 5.5.40
```
### PHPのバージョン確認
```
php -v
// 実行結果
PHP 7.2.4 (cli) (built: Mar 27 2018 17:23:35) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
```
### MariaDBのバージョン確認
```
mysql -e "select @@version"
または
rpm -qa | grep -i mariadb
// 実行結果
mariadb-libs-5.5.44-2.el7.centos.x86_64
```
### 全部
```
//一気に実行
php artisan -V
php -v
httpd -v
cat /etc/redhat-release
getconf LONG_BIT
mysql -e "select @@version"
rpm -qa | grep -i mariadb
```
　
その他追記したいコマンドがあればコメント欄にお願いします

---
エラーサーチという、働くエンジニアのためのメモ帳サービスを運営しています!

自分用の情報をパパッとメモ書きしたり、役立つ情報は整理して他の人にもシェアしたり！
[エラーサーチ] (https://error-search.com/)

[Twitterはこちら] (https://twitter.com/error_search)


---