OmniAICreator/Qiita-1.07M huggingface dataset:
未定義のundefinedと定義済みのundefined

ことの発端はif文で二重否定（!!）で判定しているコードを見たときでした。
見慣れてなかったので調べてみるとどうやらundefinedやobjectをbool値に変換して判定しているらしい。
そもそも文字列の0やbool値が来たら値があるのに逆の判定されてしまうから個人的には嫌な書き方ですが。

とりあえずundefinedの二重否定時の動作を確認してみたところ

```js
typeof test === 'undefined' ? console.log('true') : console.log('false');
console.log(!!test);
```

```
true
Uncaught ReferenceError: test is not defined
```

```js
var test;
typeof test === 'undefined' ? console.log('true') : console.log('false');
console.log(!!test);
```

```
true
false
```

エラーが出てしまったので結局のところundefined判定(`typeof test === 'undefined'`など)は必要
そして、undefinedは未定義という意味だが未定義のundefinedと定義済みのundefinedがある?


# 未定義のundefined

```js
test ? console.log('true') : console.log('false');
```

```
Uncaught ReferenceError: 'test' is not defined
```

# 定義済みのundefined

```js
var test;
test ? console.log('true') : console.log('false');
```

```
false
```

# おまけ

### オブジェクト（未定義のプロパティはundefinedになる様子）

```js
var test = {};
test.prop ? console.log('true') : console.log('false');
```

```
false
```


```js
var test = [];
test[5] ? console.log('true') : console.log('false');
```

```
false
```

```js
var test = {};
test.prop.prop ? console.log('true') : console.log('false');
```

```
Uncaught TypeError: Cannot read property 'prop' of undefined

undefinedはプリミティブ値なのでエラーになる　階層毎にundefined判定は必要
```

```js
var test = [];
test[5][0] ? console.log('true') : console.log('false');
```

```
Uncaught TypeError: Cannot read property '0' of undefined

undefinedはプリミティブ値なのでエラーになる　階層毎にundefined判定は必要
```
jupyter notebookでvenvを使う

割と最近仮想環境の重要性に気づいて、venvを使うようになったんですが、jupyter notebookを起動してみたところ、venvが適用されてない！
適用方法を調べてみたら意外と簡単だったので、メモしておきます。
[こちらの記事](https://anbasile.github.io/programming/2017/06/25/jupyter-venv/)を参考にしました。  

# Jupyter notebook on venv!
まず仮想環境を作って、activateします。

```
$ python -m venv projectname
$ source projectname/bin/activate
```

次に仮想環境上でipykernelをインストールします。

```
(projectname)$ pip install ipykernel
```

その後jupyterにカーネルを追加します。

```
(projectname)$ ipython kernel install --user --name=projectname
```

これでjupyter notebookを開くと、KernelタブのChenge kernelメニューにprojectnameが追加されていると思うので、それを選択すればOKです！
[180804]Gitlab の Merge Request から学ぶ

やっぱりちゃんとコード理解してないと、MRだけおっかけても薄い内容の理解にとどまるな。

ちょっとやり方考える。

# [Resolve "Merge request e-mail link has full URL"
](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21000/diffs)

これは最近メールでリンクがうまく表示されてなかったところだな！

```diff
        - if @target_url
          - if @reply_by_email
-           = _('Reply to this email directly or %{view_it_on_gitlab}.') % { view_it_on_gitlab: link_to(_("view it on GitLab"), @target_url) }
+           = _('Reply to this email directly or %{view_it_on_gitlab}.').html_safe % { view_it_on_gitlab: link_to(_("view it on GitLab"), @target_url) }
          - else
            #{link_to _("View it on GitLab"), @target_url}.
```
VoiceOverで突く脆弱性

# はじめに
若干センセーショナルなタイトルになりましたが、VoiceOver時に問題になりそうな挙動をまとめてます。

# ニュースアプリ
例えばこんなニュースアプリがあるとします。
<img width="414" alt="IMG_3147.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/62305/a7a9faf9-9adf-dab6-c243-f9fe909b6d92.png">

ニュースのタイトルだけはみられるけど、
記事に関してはユーザーにログインをしてもらう、というアプリです。

当然アプリ開発者としては「ログイン」をしなければ記事を見られないようにする、
という意味合いで灰色のViewを置いて記事を覆っているのですが、
この場合VoiceOverをOnにすると、

<img width="414" alt="IMG_3146.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/62305/a120ae6b-b2cf-b830-4d4d-a770ee8aaaf8.png">
**普通に記事にフォーカスが当たり、ログインせずにニュースの内容が読み上げられます。**

この場合、ログインの有無によって記事の`isAccessibilityElement`の状態を切り替えるべきでしょう。

# 課金型アプリ
例えばこんな漫画アプリがあるとします。
<img width="414" alt="IMG_3150.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/62305/de68f1ff-76fe-c96a-dd9c-07a06061922e.png">

「次のページ」ボタンを押すと次のページへ進めるのですが、次のページへ進むにはポイントが必要で、
ユーザーに購入を促している状態ですね。
ポイントがない場合は画面全体をViewでガードして「次のボタン」を押せなくしてポイント購入を待っている状態です。
  
  
<img width="414" alt="IMG_3151.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/62305/0ca894c6-db35-0fec-c09f-72f1dc5cdcf1.png">
**VoiceOverをOnにすると「次のページ」ボタンにフォーカスが当たります。**
  
ただ、この例のように、ボタン上にViewがオーバーレイしている場合、
フォーカスを当てた状態でダブルタップしても、ボタンの処理は起こりません。
なので、**課金処理をスルーして次のページに遷移してしまうことは起こりません。**
（厳密にいうと、User Interaction Enabledの状態によってボタンの処理が起こるかが決まります）
  

ただVoiceOverユーザーにとっては、「次のページ」ボタンにフォーカスをしただけでは何故押せないか分からないので、
「次のボタン」の`accessibilityHint`に「ポイントの購入が必要です」などの情報付与が必要でしょう。

# まとめ
ということで、Viewをオーバーレイして見えなくしても、タップさせなくしても、オブジェクトがあることはVoiceOverで分かります。
一度開発中のアプリをvoiceOver ONで動作させてみることをお勧めします。
UbuntuにNode-REDを載せたときのメモ


node.jsとnpmを準備
sudo apt-get install nodejs-legacy
node -v
sudo apt-get install npm
npm -v


sudo npm install -g --unsafe-perm node-red node-red-admin


[bcrypt] Success: "/usr/lib/node_modules/node-red/node_modules/bcrypt/lib/binding/bcrypt_lib.node" is installed via remote
+ node-red-admin@0.1.3
+ node-red@0.18.7
added 421 packages in 27.315s

起動
node-red

ブラウザから以下にアクセス
http://127.0.0.1:1880/#flow/5ce51e23.3cc6b

場合によってポートを開けるなど
sudo ufw allow 1880


参考（そのまんままんま）
https://www.digitalocean.com/community/tutorials/how-to-connect-your-internet-of-things-with-node-red-on-ubuntu-16-04
Expressの静的サーバーで拡張子を省略する方法

Expressの静的サーバーでURL末尾の拡張子を省略する方法が見つからなくハマったのでメモ

# 方法

```js
app.use(express.static('public', { extensions: ['html', 'htm'] }))
```

express.staticの第二引数のオブジェクトのextensionsに拡張子の配列を渡すだけ

# 参考

- [Express 4.x - API リファレンス](http://expressjs.com/ja/api.html#express.static)
Node.js版Kurento GroupCallを使ってみた

# はじめに

WebRTCのSFU/MCUである[Kurento](https://www.kurento.org/)には、公式のサンプルがいくつかあります。
その中に、複数人でビデオ会議を行う[Group Call](http://doc-kurento.readthedocs.io/en/stable/tutorials/java/tutorial-groupcall.html)というものがあるのですが、Javaで書かれたものしかなく、また、SFU版のサンプルしかありません。
先日、[kurento-group-call-node](https://github.com/chapin666/kurento-group-call-node)という有志の方が作ったサンプルを見つけたので使ってみたところ、あっさりと動いたので動かし方などを書こうと思います。

# 実行環境

* さくらのVPS
    * CPU2コア
    * メモリ1GB
* OS Ubuntu 16.04 LTS
* Firefox 59.0.1 64bit

# 使用ソフトウエア

* [kurento-media-server-6.0](https://github.com/Kurento/kurento-media-server)
* [kurento-group-call-node](https://github.com/chapin666/kurento-group-call-node)
* Node.js v8.10.0

Node.jsとnpmを使うので、事前にインストールしておいてください。

# Kurento Media Serverのインストール

以下のドキュメントにまとまっています。
[Kurento Installation Guide - Kurento 6.6.2 documentation](http://doc-kurento.readthedocs.io/en/stable/installation_guide.html)

```shell
REPO="xenial"
echo "deb http://ubuntu.kurento.org $REPO kms6" | sudo tee /etc/apt/sources.list.d/kurento.list
wget http://ubuntu.kurento.org/kurento.gpg.key -O - | sudo apt-key add -
sudo apt-get update
sudo apt-get install kurento-media-server-6.0
```

コマンドを順番に実行すればインストールできます。

# 設定ファイル修正

STUNサーバーの設定をします。

```ini:/etc/kurento/modules/kurento/WebRtcEndpoint.conf.ini
stunServerAddress=74.125.23.127
stunServerPort=19302
```

今回はGoogleが提供しているサーバーを設定しました。

# kurento-group-call-nodeのダウンロード

Githubからリポジトリをクローンします。

```shell
git clone https://github.com/chapin666/kurento-group-call-node.git
cd kurento-group-call-node
```

# SFU版とMCU版を選ぶ

`git checkout sfu`でSFU版になります。`git checkout mcu`でMCU版になります。
両方を使えるのは素晴らしいですね!

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

まず、bowerをグローバルインストールしてください。

```shell
sudo npm install -g bower
```

次に、以下のコマンドを実行してください。

```shell
npm install
cd ./server/static
bower install
```

# 接続するサーバーの設定

./server/index.jsを以下のように修正してください。

```js:./server/index.js 
const argv = minimst(process.argv.slice(2), {
    default: {
        as_uri: 'https://<server address>:3000',
        ws_uri: 'ws://<kurento address>:8888/kurento'
    }
});
```

ここは自分の環境に合わせてください。

# 実行

以下のコマンドでサーバーが起動します。

```shell
node index.js
```

もしもエラーなどが出る場合は、Kurentoを再起動してください。

```shell
sudo service kurento-media-server-6.0 restart
```

# 実行結果

SFU版では1:1の通信でCPU使用率が5%前後でした。50~60人くらいは通信出来そうな印象です。
一方、MCU版だと1:1の通信でCPU使用率は100%でした。映像ストリームを合成しているだけあって、負荷は結構大きいです。
受信ストリームを1本だけにしたい場合以外はSFUを使ったほうがよいかと思います。

# まとめ

Kurentoはサンプルが豊富で、ドキュメントが充実しているところが気に入っています。
[Janus](https://janus.conf.meetecho.com/)などと比べると、最近は開発が活発ではないようですが、[ふわっち](https://whowatch.tv/)など、結構いろいろな場所で使われているようなので、今後も頑張ってほしいです。

# おまけ

今回使用したkurento-group-call-nodeには、なんとモバイルクライアントがあります!(まだ使ってみていません)
[kurento-group-call-react-native](https://github.com/chapin666/kurento-group-call-react-native)
React Nativeで書かれているので、iOSでもAndroidでも動作するようです。
モバイルクライアントまで作っているのは、本当に素晴らしいと思います。
SourceTreeの'launch path not accessible' error



# 現象

ある日MacのSourceTreeでレポジトリを開こうとしたら急に
```'git status' failed with code -1:'launch path not accessible '```
```'git log' failed with code -1:'launch path not accessible '```
とか表示されて操作できなくなった。

TerminalからはCloneもPull/Push全てgitコマンドが動いたので最悪の事態ではなかったけども焦った。

# 原因
原因はTerminal用のgitを別途インストールした作業の過程でSourceTreeの設定として利用するgitがアクセス不能になっていたためっぽい。

# 解決方法
SourceTree->環境設定->Git　 
で`Gitのバージョン`でエラーメッセージが出ていたら同じ症状。 　
内臓のGitに戻すか、今回はシステムのGitを改めて選択しただけで復旧した。

# 余談
相変わらず検索スキルが足りないのか同じ症状の人が見つからなくて焦った。 

SourceTreeをアップデートしても治らず、
google先生に`launch path mac`とざっくりした依頼をかけてTopに出てきていただいた
https://ics.media/entry/4475
を参考にして権限の問題だろうと当たりをつけて調べ、
https://community.atlassian.com/t5/Sourcetree-questions/SourceTree-Custom-Action-on-Mac-returns-quot-launch-path-not/qaq-p/211631
この辺の議論を見て
「あ、そういえばGitを内臓のものを使うかどうかの設定があったよな」
と思いつくまでが長かった…
javascriptでJAN(EAN)のチェックデジット

javascriptでバーコードのチェックデジットの整合性を見るスクリプト。
計算があっていればtrueを返す。

参考
http://www.dsri.jp/jan/check_digit.html
https://qiita.com/cress_cc/items/3e820fe1695f13793df3

```javascript:code
    function eanCheckDigit(barcodeStr) { // 引数は文字列
        // 短縮用処理
        barcodeStr = ('00000' + barcodeStr).slice(-13);
        let evenNum = 0, oddNum = 0;
        for (var i = 0; i < barcodeStr.length - 1; i++) {
            if (i % 2 == 0) { // 「奇数」かどうか（0から始まるため、iの偶数と奇数が逆）
                oddNum += parseInt(barcodeStr[i]);
            } else {
                evenNum += parseInt(barcodeStr[i]);
            }
        }
        // 結果
        return 10 - parseInt((evenNum * 3 + oddNum).toString().slice(-1)) === parseInt(barcodeStr.slice(-1));
    }

    // example
    // 通常13桁
    if (eanCheckDigit("4569951116179")) console.log("true"); // true
    // 短縮版
    if (eanCheckDigit("49968712")) console.log("true"); // true
```
MSX Z80で乗算

参考
[掛け算様々](http://www.geocities.jp/new3room/multi2.html)

```mul.asm
; z88dk / WebMSX
; z80asm -b -l mul.asm
; appmake +msx -b mul.bin --org=0xd000

        org     $d000
start:
        push    hl
        pop     ix
        ld      e, (ix+2)
        ld      d, 0
        ld      a, (ix+3)

        ld      hl, 0
        ld      b, 8
.loop
        add     hl, hl
        add     a, a
        jr      nc, skip
        add     hl, de
.skip
        djnz    loop

        ld      (ix+2), l
        ld      (ix+3), h
        ret
```

```mul.bas
10 clear 100,&hcfff
20 defint a-z
30 def usr=&hd000
40 input "x,y";x,y
50 print usr(y*256+x)
60 goto 40
```

`mul.msx`と`mul.bas`をWebMSXの[Drive A]の[+FILES]にドロップする。
![WMSX Screen (1).png](https://qiita-image-store.s3.amazonaws.com/0/257554/b00adb26-c8f4-47f2-d66e-13deeef08beb.png)
BitcoinKitのinstall方法

## BitcoinKitってなに？
BitcoinCash/Bitcoinを使ったiOSアプリ開発を便利にしてくれるライブラリ。
Swiftで全て実装されていて、Bitcoinのウォレットを作ったり、トランザクションの送信/受信をサポートしてくれる。

リポジトリは[こちら](https://github.com/yenom/BitcoinKit)。

## CocoaPodsからのインストール

0. もしCocoaPodsがインストールされていなければ、コマンドラインで以下のコマンドからインストールする。

```bash
$ gem install cocoapods
```

> バージョンは1.5.0以上が必要

1. Xcodeのプロジェクトに移動し、`Podfile`を作成。以下のように書き換える。

```ruby
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'BitcoinKit'
end
```

2. コマンドラインで以下のコマンドからインストールする。

```bash
$ pod install
```

## Carthageからのインストール

0. もしCarthageがインストールされていなければ、以下のコマンドでインストールする。

```bash
$ brew update
$ brew install carthage
```

1. Xcodeのプロジェクトに移動し、`Cartfile`を作成。以下のように書き換える。

```ogdl
github "yenom/BitcoinKit"
```

2. コマンドラインで`carthage update`を実行し、`framework`を作成する。作成された`BitcoinKit.framework`を自分のXcodeのプロジェクトに配置する。

## ひとこと
経験的に、Carthageの方がインストールが早いです！
次回は、ライブラリの使い方を説明します。
bracketsをubuntuにインストールする

http://brackets.io/
からダウンロードしたdebパッケージをインストールしても
途中で中断されてしまうので・・・メモ

sudo add-apt-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets

アプリケーションを表示する＞検索キーワードに　brackets
右クリックで”お気に入りに追加”


以上！

あとでまとめておく

https://www.youtube.com/watch?v=N6TuH16s0nI

Keyboard Shortcut Cheat Sheet
https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#live-preview

Here are some keyboard shortcuts that are worth knowing. Also see the Brackets Shortcut wiki page for a more complete list of shortcuts and the User Key Bindings Wiki to learn how to setup Brackets to use your preferred keyboard shortcuts.

Windows	Mac	Description
Ctrl-E	Cmd-E	Open/close the inline editor (Quick Edit)
Alt-Up/Down	Alt-Up/Down	Switch between rules in the inline editor
Ctrl-K	Cmd-K	Open Quick Docs
Ctrl-Space	Ctrl-Space	Bring up code hints, if applicable
Ctrl-Shift-O	Cmd-Shift-O	Bring up the Quick Open prompt
Ctrl-G	Cmd-L	Go to a line in the current file
Ctrl-T	Cmd-T	Go to a method/selector in the current file (Quick Find)
Ctrl-Shift-H	Cmd-Shift-H	Show/hide the sidebar
Ctrl-Alt-P	Cmd-Alt-P	Live preview
中国に出張時、中国の書店でUML解説書を見て、UML用語の漢語に惚れ込んでしまったので記載する（衝動買い）


# 基本

日本語でよくある表記|中国語表記<br>(日本漢字化)|中国語表記<br>(簡体字)
---|---|---
構造に関する表記|静態図|静态图
振る舞いに関する表記|動態図|動态图
システム|系統|
ユーザー|用戸|
ファイル|文件|
フォルダ|文件夹|
ドキュメント|文檔|文档
ツール|工具|
プログラミング|程序設計|程序设计
アドイン|外接程序|

# 「構造に関する表記」＝静態図

日本語でよくある表記|中国語表記<br>(日本漢字化)|英語|表現したい対象
---|---|---|---
クラス図|類図|Class Diagram|クラス構造
オブジェクト図|対象図|Object Diagram|クラスをより具体化したオブジェクト
パッケージ図|包図|Package Diagram|クラスなどをグループ化し整理された関係
コンポジット構造図|組合結構図|Composite Structure Diagram|クラスやコンポーネントの内部構造
コンポーネント図|組件図|Component Diagram|コンポーネントの内部構造とコンポーネント間の依存関係
配置図|部署図|Deployment Diagram|システムの物理的な構成

# 「振る舞いに関する表記」＝動態図

日本語でよくある表記|中国語表記<br>(日本漢字化)|英語|表現したい対象
---|---|---|---
ユースケース図      |用例図    |Use Case Diagram            |ユーザなど外部からの要求に対するシステムの振る舞い
アクティビティ図    |活動図    |Activity Diagram            |システムの実行における処理の流れや状態遷移
状態マシン図        |状態機図  |State Machine Diagram       |イベントにより引き起こされるオブジェクトの状態遷移
シーケンス図        |順序図    |Sequence Diagram            |クラスやオブジェクト間の応答を時系列
コミュニケーション図|交互図    |Communication Diagram       |クラスやオブジェクト間の関連と応答を視覚化
相互作用概要図      |交互概覧図|Interaction Overview Diagram|相互作用図（ユースケース図やシーケンス図など）を構成要素として、より広域な処理の流れ
タイミング図        |定時図    |Timing Diagram              |クラスやオブジェクトの状態遷移を時系列化

# 蛇足
- 「フォルダ＝文件夹」の「夹」は挟（はさ）むの意味です。
- アクティビティ図→「活動図」ぐらいは日本でも普及してくれないかな。
3D可視化ライブラリ Mayavi をJupyterノートブックで使う

Pythonで3Dデータの可視化を行うため、 [Mayavi](http://docs.enthought.com/mayavi/mayavi/) の導入を行いました。

最終的には、以下のような 3D図をJupyterノートブック内に表示させることが目標です。
![Selection_013.png](https://qiita-image-store.s3.amazonaws.com/0/104970/909034b6-3104-0477-a699-fd7c36d8ea8d.png)


本記事の内容は、

+ Anaconda3によるPython環境
+ Linux オペレーティングシステム

のもとで行いました。

なお、以下の記事も参考にしています。
+ [Python3.6 で Mayaviを動かす](https://qiita.com/RyoNu/items/c5ba6fd27a3c8825f640)
+ [Jupyter notebookでMayaviを使う時の設定](https://qiita.com/2dod/items/9fbf1fc052d74bef12cd)


## Mayavi のインストール

Mayaviの導入には色々な周辺ライブラリのインストールが必要です。特に後述するvtkにはバージョン指定が必要だったりするので、他の作業環境を壊さないよう、専用の仮想環境内を整えることにします。

Anacondaでpython 3.6のための仮想環境を作成するには

```
conda create -n mayavi python=3.6
```
を行います。
ここでは *mayavi* という名前の仮想環境を作成しました。
仮想環境内に入るためには

```
source activate mayavi
```

を実行します。

必要なライブラリを *conda-forge* チャンネルからインストールします。

```
conda install -y -c conda-forge qt pyvtk pyside envisage mesalib
```

なお、[この記事](https://qiita.com/RyoNu/items/c5ba6fd27a3c8825f640) では vtk, mayavi も conda コマンドからインストールするよう書いてありますが、そのまま実行するとインストール自体は終了するものの

```
python -c "from mayavi import mlab"
```

のように mayavi をインポートしようとすると

```
ModuleNotFoundError: No module named 'vtkIOParallelPython'
```

と言われ、インストールがうまく行っていないことがわかります。
[どうも Anaconda にある vtk のバイナリパッケージに不具合があるらしく](https://github.com/conda-forge/vtk-feedstock/issues/46)、このままでは使うことができません。

そのため、今回は vtk と mayavi をpipからインストールすることにしました。
(その際にCythonも必要なのでAnacondaから入れておきます。)

```
conda install cython
pip install vtk mayavi
```

### インストールの確認

うまくインストールできているか確認するため、以下を実行します。

```python
from mayavi import mlab
mlab.test_plot3d()
mlab.show()
```

## JupyterでMayaviを使う

[参考](https://qiita.com/2dod/items/9fbf1fc052d74bef12cd)

Jupyterノートブック内でMayaviを表示させます。
まだこの環境には mayavi を動かす最低限のライブラリしかインストールできていないので、必要に応じてライブラリをインストールしましょう。
ここでは、numpy, scipy, jupyter をインストールします。

```
conda install numpy scipy jupyter
```

さらに、Jupyter内で mayavi を表示させるためには Jupyter の拡張機能が必要です。 [公式サイト](http://docs.enthought.com/mayavi/mayavi/tips.html) に従って、これについてもインストールします。

```
jupyter nbextension install --py mayavi --user
```

Jupyterノートブック内で、

```python
from mayavi import mlab
mlab.init_notebook()

mlab.test_plot3d()
```
とすると、ノートブック内に描画できます。

![Selection_013.png](https://qiita-image-store.s3.amazonaws.com/0/104970/909034b6-3104-0477-a699-fd7c36d8ea8d.png)
iBooksのファイルが消えた時

ある日、iBooksを開くとファイルが減っていました。
そういえば、前日にiOSのアップデートしてました！

結論から言うと、アップルのサポートが頑張ってファイルを復活させてくれました。
(ただ、最終的には、あまり感心しない対応でしたが)

以下はその顛末。

最初に、iPhoneのAppleサポートアプリを開いて、チャットで問い合わせ。
iBooksのPDFが無くなったと言うと、
ファイルアプリのブラウズから「最近削除した項目」の中にないか確認された。
(自分で消したのではないので当然ない)

次にパソコンでiCloudに接続して

設定＞詳細設定＞ファイルの復元

を試すように言われた。
これでもダメならスペシャリストの電話対応になるとのこと。

復活しないので、電話に出れる時間に改めてチャットする旨伝える。

日を改めてチャットして、電話対応に番号を伝えると、スペシャリストから折り返し電話が来る。

状況の確認の後、技術スタッフが調べんので明日に、また電話するとのこと。

次の日、電話が来た。
技術サポートによると、アップデート時にデータのエラーかなんかがあってファイルが、消えたとのこと。
ファイルは元に戻したとのこと。

ここまでは、技術サポートさん、ありがとう😊、なのですが、
この後が良くない。

どのファイルが復活できたとかは言えないとのこと。

こちらはiBooksに何個、どんなファイル名のものがあったかなんか記録していないので、正確に何個消えたかわからない。

なので、何が復活できた教えて欲しいのに、、、。
復活できなかったものがあったときにもめないために教えないのか？

なんかスッキリしません。

スペシャリストさんにはiTunesでちゃんとバックアップしてくださいって言われるし。
いやいや、バックアップは毎日はできないからクラウドに、データおくんでしょ。
(一応、サイズ増やして、少しはお金払ってるし)

ただ、OS更新前のバックアップの大切さは痛感しました。
(復活できたから良かったけど)

チャットのサポート自体は悪くないので、何が変なこと起きたら聞いてみるといいと思います。
Basic認証の先にあるファイルをDLしたい。

# 前提
ちょっとした作業で基本認証されているサイトからファイルをDLする必要があったのだが
手作業で何回もやるのがあまりにもめんどくさかったのでツールを試してみた。

後続処理との関連からとりあえずPythonで試してみることにする。
2系か3系かは気にしない。

## Pythonでやってみた
以下を参考にそのまま流用
https://qiita.com/fetaro/items/d095244d53be6192ef43

が、
`urllib2.URLError: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:661)>`
というようなエラー

これについては以下を参考に対応
https://shinespark.hatenablog.com/entry/2015/12/06/100000

で、
`urllib2.URLError: <urlopen error [Errno 10060] 接続済みの呼び出し先が一定の時間を過ぎても正しく応答しなかったため、接続 できませんでした。または接続済みのホストが応答しなかったため、確立された接続は失敗しました。>` 
というエラー

なんか時間がかかりそうだったので、一回C#で試してみることにする。

## C#でやってみた。


	using System;
	using System.IO;
	using System.Net.Http;
	using System.Text;
	
	namespace ConsoleApplication1
	{
	    class Program
	    {
	        static HttpRequestMessage CreateRequest(string url)
	        {
	            var id = "user_id";
	            var pass = "user_pass";
	
	            // リクエストの生成
	            var request = new HttpRequestMessage
	            {
	                Method = HttpMethod.Get,
	                RequestUri = new Uri(url)
	            };
	
	            // Basic認証ヘッダを付与する
	            request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue(
	                "Basic",
	                Convert.ToBase64String(Encoding.ASCII.GetBytes(string.Format("{0}:{1}", id, pass))));
	            return request;
	        }

	        static void Main(string[] args)
	        {
	            // 情報一覧取得
	            var url = "https://GET_LIST_URL";
	            var request = CreateRequest(url);
	
	            // リクエストの送信
	            using (var httpClient = new HttpClient())
	            {
	                var response = httpClient.SendAsync(request);
	                var res = response.Result.Content.ReadAsStringAsync().Result;
	                Console.WriteLine(res);
	            }
	
	            //TODO 一覧情報のJSONをパースしてtarget_idを引っ張り出す処理を入れる
				//仮で入れておく
	            var target_id = 20180803100000;
	
	            // 取得したデータに合わせてAPIでファイルをDLする
	            var file_url = "https://GET_INFO_URL?target_id=" + target_id;
	            DownloadFileAsync(file_url, @"C:\temp\"+target_id + ".zip");
	        }

	        static async void DownloadFileAsync(string url, string outputPath)
	        {
	            var request = CreateRequest(url);
	            var client = new HttpClient();
	
	            HttpResponseMessage res;
	            // リクエストの送信
	            using (var httpClient = new HttpClient())
	            {
	                var response = httpClient.SendAsync(request);
	                res = response.Result;
	            }
	
	            // ファイルのDL
	            using (var fileStream = File.Create(outputPath))
	            using (var httpStream = await res.Content.ReadAsStreamAsync())
	            {
	                httpStream.CopyTo(fileStream);
	                fileStream.Flush();
	            }
	
	        }
	    }
	}

これで取得はできた。
意外にあっさり。  

## 今回のまとめ
Pythonで上手くいかなかった理由はさておきとりあえずできたので満足しておく。
手作業の処理を自動化させようと思ったらもう少しいろいろと必要な気もするけど、そっちについてもいったん完了としておく。
ctrlp.vim で Vim のバッファ検索が楽になった

僕は Vim を使っていますが、バッファをあまり使っていませんでした。
しかし、<a href="https://github.com/ctrlpvim/ctrlp.vim" target="_blank" rel="nofollow noopener">ctrlp.vim</a>　というプラグインを使い始めてから、バッファの移動が簡単になったので、そのメモを書こうと思います。

### 課題

バッファを一覧・表示するには```:ls``` してから ```:b1``` や　```:b <tab>``` といったコマンドで探すと思います。
しかしたくさんバッファを開いていると、その中から開きたいバッファを目で探すのが大変だなと思っていました。

### ctrlp.vim

そんな中見つけたのが<a href="https://github.com/ctrlpvim/ctrlp.vim" target="_blank" rel="nofollow noopener">ctrlp.vim</a> です。

ctrlp.vim はあいまい検索で目的のファイルやバッファを探すことができる Vim プラグインです。
ctrlp.vim 全般の使い方については下記記事がよくまとまっています。

<a href="https://qiita.com/oahiroaki/items/d71337fb9d28303a54a8" target="_blank" rel="nofollow noopener">ctrlp.vimの使い方まとめ</a>

今回はバッファ検索の部分に絞って書きます。

### 使い方

#### ctrlp.vim インストール

ctrlp.vim をお気に入りのパッケージマネージャーでインストールします。
僕は dein.vim を使っているので、下記の書き方でインストールしました。

```vim
call dein#add('ctrlpvim/ctrlp.vim')
```

#### 起動手順

下記の手順で ctrlp.vim のバッファ検索を起動します。
画面下部に ctrlp.vim ウインドウが開きます。

* Vim 起動
* いくつか Vim 上でファイルを開く
* ```<c-p>``` で ctrlp.vim を起動
* ```<c-f>``` で検索対象をファイルからバッファに切り替える

#### 操作イメージ

実際使うとこのような感じになります。

例えば```<c-j>``` 、```<c-k>``` を使い、ハイライトありで上下にバッファを移動できたり、

![Aug-04-2018 10-38-04.gif](https://qiita-image-store.s3.amazonaws.com/0/222030/5b30e9cd-677b-8fae-9618-44ad6efc7d01.gif)

文字入力していくことであいまい検索でバッファを絞り込むことができます。

![Aug-04-2018 10-41-25-fuzzy.gif](https://qiita-image-store.s3.amazonaws.com/0/222030/1604b1bd-a4c8-1bb8-9c5b-e44c48b6bad1.gif)

より直感的にバッファを扱えるようになって便利ですね。

### 参考

* <a href="https://github.com/ctrlpvim/ctrlp.vim" target="_blank" rel="nofollow noopener">GitHub - ctrlpvim/ctrlp.vim: Active fork of kien/ctrlp.vim—Fuzzy file, buffer, mru, tag, etc finder.</a>
Android:「Cause: cannot find android.support.transition.R$id 2: android.support.transition.R$id found in android/support/transition/R$id 2.class」の対処方法


#はじめに
Android開発で遭遇した以下のエラー対応方法について備忘録を含め残したいと思います。

```Android:error
Cause: cannot find android.support.transition.R$id 2: android.support.transition.R$id found in android/support/transition/R$id 2.class
```

#①フォルダ内で`2.class`と検索し対象のファイルをプロジェクト外に避難することで解決。

<img width="626" alt="スクリーンショット 2018-08-04 10.38.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/226787/f15f8a1b-2dae-c804-e82a-da809a5b5b9e.png">

上記の対応で解決いたしました。
ですが、こちらの対応は引用元がなく、試行錯誤の末実施した対処方法となります。
もし何かご存知の方がいらっしゃいましたら、ご教授いただけますと幸いです。
徐々に覚えるPHPStormショートカットメモ

|Level|アクション名|説明|Mac|Windows|
|:----|:----|:----|:----|:----|
|1|Show Intention Action|空気を読む|Opt + Enter|Alt + Enter|
|1|Parameter Info|パラメータ表示|Cmd + P|Ctrl + P|
|2|Run Context Configuration|カーソル位置で実行|Shift + Ctrl + R|Shift + Ctrl + F10|
|2|Debug Context Configuration|カーソル位置でデバッグ|Shift + Ctrl + D||
|2|Run|実行|Ctrl + R|Shift + F10|
|2|Debug|デバッグ|Ctrl + D|Shift +F9|
|2|Step Orver|ステップオーバー|F8|TBS|
|2|Step Into|ステップイン|F7|TBS|
||||||
Goのインターフェースに対する誤解と理解

# はじめに

そろそろGo1.11が出そうという中、Go1.10のコードで「コンパイラを読んでGoを理解する」企画を遅々と進めているわけですが、読んでる中で以下のようなコードがありました（サンプルコードであり、コンパイラ中のコードそのものではありません）

```go
package main

import (
	"fmt"
	"io"
	"strings"
)

func read(r io.ByteReader) {
	for {
		if value, err := r.ReadByte(); err == nil {
			fmt.Println(value)
		} else {
			fmt.Println(err)
			break
		}
	}
}

func main() {
	s := "abc"
	// 型がわかるように書いているが普通は「reader := ...」でOK
	var reader *strings.Reader = strings.NewReader(s)
	read(reader)
}
```

思ったこと1：受け取り側の型違ってるけど…
→io.ByteReaderはインターフェースです。

思ったこと2：受け取り側ポインタ付けなくていいの？
→付ける必要はありません。それがインターフェースです。

というわけでこの仕組みについて説明していきます。

# Goのインターフェース

まずstrings.Readerの説明を見てみましょう。
https://golang.org/pkg/strings/#Reader

> A Reader implements the io.Reader, io.ReaderAt, io.Seeker, io.WriterTo, io.ByteScanner, and io.RuneScanner interfaces by reading from a string.

io.ByteReaderをimplementしてるとは書いていません。書き忘れでしょうか？
GoではJava等と異なり、インターフェースを明示的に宣言（という言葉が適切ではない気がするが「このインターフェース定義してるで」とコードに明示するという意味で）する必要はありません。インターフェースが要求する名前、引数、戻り値のメソッドが書いてあればインターフェースを満たします。

というわけでio.ByteReaderインターフェースを見てみましょう。
https://golang.org/pkg/io/#ByteReader

```go
type ByteReader interface {
        ReadByte() (byte, error)
}
```
確かにstrings.Readerにはこのメソッドが定義されています。というわけでstrings.Readerはio.ByteReaderインターフェースが要求される関数に渡すことができます。
https://golang.org/pkg/strings/#Reader.ReadByte

# Goのメソッド

次に、引数渡す側ポインタだけど受け取り側のインターフェースはポインタにしなくていいの？という件について。これはGoのメソッドについて理解する必要があります。

ReadByteメソッドは*strings.Reader型をレシーバとしています。つまり、ポインタ型に対してReadByteメソッドが定義されています。そのため、ポインタを渡すことにより、受け取り側は「実際の型はともかくio.ByteReaderは満たしてるな」とインターフェースを受け取ることができます。うーん、ここら辺の呼び出し処理の実装ややこしそう。コンパイラというよりランタイム部分になるのかな。

# まとめ

今回はコードを読んでいて見かけた、Goのインターフェースの使い方について理解があやふやだったところを確認しました。Goのインターフェースは以下の特徴があります。

- 明示的に書いていなくても（そもそもコード的に明示する方法はない）要求されるメソッドさえ書いてあればいい
- 渡す側がポインタであっても受け取り側はポインタで受け取る必要はない（メソッドがポインタレシーバである必要はある）

Goな人達がよく「標準ライブラリを読むのだ。そこにGoの書き方が詰まっている」とおっしゃっていますが本当ですね(笑)
色々な言語での連想配列の初期化方法


```javascript:JavaScript
var hash = {key1: 'value1', key2: 'value2'};
```

```typescript:TypeScript
var hash: {[key: string]: string} = { "key1": "value1", "key2": "value2" };
```

```python:Python
hash = {"key1": "value1", "key2": "value2"}
```

```ruby:Ruby
hash = {:key1 => "value1", :key2 => "value2"}
# Ruby 1.9以降
hash = {key1: "value1", key2: "value2"}
```

```perl:Perl
my %hash = ("key1" => "value1", "key2" => "value2");
```

```php:PHP
$hash = array('key1'=>'value1', 'key2'=>'value2');
// PHP5.4以降
$hash = ['key1'=>'value1', 'key2'=>'value2'];
```

```go:Go
hash := map[string]string {
    "key1": "value1",
    "key2": "value2",
}
```

```swift:Swift
var hash: Dictionary = ["key1": "value1", "key2": "value2"]
```

```java:Java
Map<String, String> hash = new HashMap<String, String>() {
    {
        put("key1", "value1");
        put("key2", "value2");
    }
};
```

```c#:C#
var hash = new Dictionary<string, string>()
    {
        {"key1", "value1"},
        {"key2", "value2"}
    };
```
【JS】ES2015(ES6) チートシート

#概要
今更ながらES2015(ES6)の文法の確認用メモです。

#`let`と`const`による変数宣言

`let`:再宣言が不可能な変数宣言です。

```javascript
let name = 'Mike'
name = 'John'

console.log(name) //=> John//再代入は可能

let name = 'John'

console.log(name)// 再宣言するとエラーになります。
```

`const`:再宣言と再代入が不可能な変数宣言です。

```javascript 
const name = 'Mike'
name = 'John' //constの場合は再代入もエラーになります。
const name = 'John'//letと同様に再宣言をするとエラーになります。
```

`const`と`let`はブロックによるスコープが設定されます。

```javascript 
var x = 10;
// ここではx = 10
{ 
    let x = 2;
    // ここではx = 2
}
// ここではx = 10
```

```javascript 
var x = 10;
// ここではx = 10
{ 
    const x = 2;
    // ここではx = 2
}
// ここではx = 10
```

#文字列の展開
以下の様に文字列を展開できる。

```javascript 
const name = 'Mike'

console.log(`Hello ${name}`) //=> Hello Mike
```

#アロー関数

__従来の関数__

```javascript
function greetings (name) {
 console.log('hello ' + name)
}

greetings('Mike')//=> hello Mike
```

__ES6による関数宣言__

```javascript
const greetings =(name) => {
  console.log(`Hello ${name}`)
}

greetings('John')
```

#関数のデフォルト引数

ES6では関数にデフォルト引数を設定できます。

```javascript
const multiply = (arg1, arg2 = 5) => {
  return arg1 * arg2
}

console.log(multiply(3)) //=> 15
```

#class構文

従来のJSよりも明瞭なクラス定義が可能です。

```javascript 
class Car {
  constructor(name){
  	this.name = name //initializer
  }
  
  display_info(){
  	console.log('Car Info')
  }
  
  getName(){
  	console.log(this.name);
  }
}

const car1 = new Car('Honda')

car1.display_info()//=> Car Info
car1.getName() //=> Honda
```

###`extends`によるクラス継承
`extends`を使用する事でクラスの継承が可能です。

```javascript 
class Car {
  constructor(name){
  	this.name = name //initializer
  }
  
  display_info(){
  	console.log('Car Info')
  }
  
  getName(){
  	console.log(this.name);
  }
}


class Track extends Car {
}

track1 = new Track
track1.display_info() //=> Car Info
```

#スプレッド演算子

`...`を利用する事で配列ライクなオブジェクトを個々の値に展開することができます。

###可変長引数

```javascript 
function1 = (...args) => {
  console.log(args)
}

function1(1, 2, 3, 4, 5); // => [1, 2, 3, 4, 5]                    
```

```javascript 
function1 = (arg, ...args) => {
  console.log(arg)
  console.log(args)
}

function1(1, 2, 3, 4, 5); 
// => 1
// => [2, 3, 4, 5]
```

###配列の展開

```javascript 
const arr = [1,2,3,4,5]

console.log(...arr) // => 1 2 3 4 5 
console.log(Math.min(...arr));// => 1
```

###配列の結合

従来は`concat`メソッドを利用して配列の結合を行いましたが、`...`を利用する事でより簡単に配列の結合を行うことが可能です。

__従来の構文__

```javascript 
var arr = [1];
var arr2 = arr.concat([2, 3, 4]);

console.log(arr2); // => [1, 2, 3, 4]
```

__ES6の構文__

```javascript 
const arr = [1];
const arr2 = [...arr, 2, 3, 4];

console.log(arr2); // => [1, 2, 3, 4]
```
[BetterDiscord]すべての機能翻訳

BetterDiscordを入れたは良いものの、機能の翻訳とかが無かったので自分でまとめる

# BetterDiscordについて
Discordに色々な便利機能を追加することができる

テーマを設定して好きな見た目にできたり
プラグインを適用させて機能拡張ができたり
CSSの書き換えができたり

結構便利

インストールについては
[【Discord】Zere’s Fork版BetterDiscordを導入する]
(https://tech.kunimaly.com/zeres-fork-better-discord-install/) 
↑こちら参考に

# 翻訳してみた
| 機能 | 説明 |
|:----:|:----:|
| **Core** | |
| Public Servers | 公式サーバー表示ボタンのON/OFF |
| Minimal Mode | 全体的に色々なUIが小さくなる |
| Voice Mode | テキストチャット欄が消える |
| Hide Channels | **最小モード時のみ**チャンネル一覧が消える<br>左下の設定ボタンとかも消える<br>ONにして泣いた |
| Dark Mode | 一部要素が暗くなる テーマでダークを適用している場合は関係ないかも？ |
| Voice Disconnect | Discordを閉じる時に自動で通話から落ちてくれるらしい？<br>ONにしても効果が分からなかった |
| 24 Hour Timestamps | 12時間TimeStampが24時間になるらしい<br>午前/午後の表示になっている日本では関係ない？ |
| Coloured Text | 発言者のテキストをサーバーの役割色と同じ色に変える<br>カラフルな設定にしてる場合は逆に読みにくくなる |
| Better Discord Blue | ボタンを選んだ時のエフェクトが見やすくなる<br>人によってはデフォルトが良いと思うかもしれない |
| Developer Mode | 開発者モードにできる<br>何が変わるのかは不明 |
| | |
| **Zere's Fork** | |
| Startup Error Modal | 起動時にプラグイン/テーマのエラーを表示できるようにする |
| Show Toasts | プラグイン/テーマの開始と停止に関する情報を表示 |
| Scroll To Settings | プラグイン設定ボタンが押された時に自動でスクロールする |
| Emote Modifier Tooltip | ツールチップに絵文字修飾子を表示する |
| Animate On Hover | アニメーション絵文字をマウスホバー時のみ動かすようにする |
| Copy Selector | 開発者モードの時にコンテキストメニューにコピーセレクター？を追加する |
| Download Emotes | 絵文字をダウンロードしてキャッシュする |
| Normalize Classes | 不明 テーマ関連のモノっぽい？ |
| | |
| **EMOTE SETTINGS** | |
| Twitch Emotes | ツイッチの絵文字 |
| FrankerFaceZ Emotes | FrankerFaceZの絵文字 |
| Better TTV Emotes | BetterTTVの絵文字 |
| Emote Menu | 絵文字のメニューが拡張される |
| Emoji Menu | デフォルトの絵文字機能の表示？ |
| Emote Auto Capitalization | 絵文字単体の時に自動で大きくする？<br>デフォルトでもう入ってるのでいらない |
| Show Names | 絵文字にマウスホバーした時に名前の表示<br>これもデフォルトで入っている |
| Show emote modifiers | 絵文字に色々な機能を追加する<br>ただしBetterDiscordのみにしか見えない絵文字のみ対応っぽい |

# 結論
Core以外は基本OFFでよさそうだ
特にEMOTE SETTINGSはBetterDiscordの人でないと見えない内容ばかりなのでOFFがおすすめ
【C#】TextFieldParserで郵便番号データを処理する【ほぼパクリ】

下記記事のコードの改変です。
[LINQは本当に強力だ (6)　TextFieldContext – kekyoの丼](https://www.kekyo.net/2012/11/17/227)

単純にTextFieldParserクラスを使ったコンテキストをそのまま使うだけのサンプルが欲しかったので自分で改変してみました。
実行には、Microsoft.VisualBasicの参照設定が必要です。

![参照設定.png](https://qiita-image-store.s3.amazonaws.com/0/269237/fe992764-8319-676e-6707-95fc2a4ab1df.png)

TextFieldクラスの部分はまるパクリで、呼び出すMainを簡略化しました。

```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using Microsoft.VisualBasic.FileIO;

namespace ContextTest
{
    class Program
    {
        static void Main(string[] args)
        {
            // 郵便番号データのコンテキストを生成
            IEnumerable<string[]> context = TextField.Context(
                @"C:\うんたらかんたら\KEN_ALL.CSV", ",", Encoding.GetEncoding(932));

            // 結果をコンソールに出す
            foreach (string[] result in context.AsParallel())
            {
                foreach (string field in result) 
                {
                    Console.Write(field);
                    Console.Write(" ");
                }
                Console.WriteLine("");
            }

            Console.WriteLine("Enterで終了");
            Console.ReadLine();

        }
    }

    public static class TextField
    {
        // 指定されたCSVファイルへのコンテキストを生成する
        public static IEnumerable<string[]> Context(
            string path, string separator = ",", Encoding encoding = null)
        {
            using (Stream stream =
                new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.Read))
            {
                using (TextFieldParser parser =
                    new TextFieldParser(stream, encoding ?? Encoding.UTF8, true, false))
                {
                    parser.TextFieldType = FieldType.Delimited;
                    parser.Delimiters = new[] { separator };
                    parser.HasFieldsEnclosedInQuotes = true;
                    parser.TrimWhiteSpace = true;
                    while (parser.EndOfData == false)
                    {
                        string[] fields = parser.ReadFields();
                        yield return fields;
                    }
                }
            }
        }
    }
}

```
vagrant:centos/7, win10, rsync でsynced_folderオプションが無視された件

### 結論
`centos/7` 以外のBOXを使って回避しました。具体的には `hashicorp/precise64` (Ubuntu) を使用しました。


### 現象
Vagrantfileに下記の記述を行っても反映されない。

```
config.vm.synced_folder "./", "/home/vagrant/sync", type: "rsync",
  rsync__exclude: [".git/", "node_modules/"]
```

具体的には、exclude設定が反映されず、共有パスも反映されない（デフォルトの `.` -> `/vagrant`となってしまう）。


### 原因
正確かはわからないが https://qiita.com/tenmyo/items/c2bb714117c98ae979de この記事から。


### 打ち手
「もしかしたらBOXがいけないのでは？」と思い、[公式ドキュメントで推奨されている](https://www.vagrantup.com/docs/boxes.html#official-boxes) `hashicorp/precise64`を使用。


### 結果
何事もなかったかのようにsynced_folderオプションが反映されました。良かった...
Androidの画面を録画したい


楽に撮影できる方法/ツールは無いものかと調べた。

## Android Studio

- たぶんこれが一番楽
- Logcatから録画ボタン押すだけ
- でもAndroid Studioを毎回起動しなきゃならん

![スクリーンショット 2018-08-03 15.42.22.png](https://qiita-image-store.s3.amazonaws.com/0/52227/5e183186-8dc8-dc9d-59da-e3f69f782a03.png "スクリーンショット 2018-08-03 15.42.22.png")

Android Studioさんいつもお世話になってます

## adbコマンド

- たぶんこれが一番最強
- 好きなサイズ、好きなフォーマットに変換できるなど自由にカスタマイズ可能
- 以下は自分がよく使うmp4で録画 => gifに変換するコマンド
```
adb shell screenrecord /sdcard/output.mp4 --size 540x960
adb pull /sdcard/output.mp4
adb shell rm /sdcard/output.mp4
ffmpeg -i output.mp4 -an -r 15 -pix_fmt rgb24 -s 540x960 -f gif output.gif
```

保存ファイル名にタイムスタンプで日付を付けとくといいかも

## flick
https://github.com/isonic1/flick

- CLIツール
- ruby製、QAツールと書いてある
- iOSのデバイスもスクショ/録画できるらしい（使わないけど）
- `flick video`みたいに使えるらしい
- mp4とgifで保存可能
- Androidエミュレータも録画可能


## androidtool-mac
https://github.com/mortenjust/androidtool-mac

- GUI、便利そう
- `brew cask`でインストール可能
- スクショ/録画はOK
- apkインストールしたり、shを動かすことも可能（使わないけど）
- 複数端末を繋げてスクショ/撮影が便利そう

![](https://raw.githubusercontent.com/mortenjust/androidtool-mac/master/Demos/plugging%20in.gif)
Rubyでなぜかスペースがデコードできない！？

#経緯
　仕事で、URLエンコードを保存して、デコード
するという処理を作ったのですが、
　なぜかスペース(%20)のみデコードされないURLエンコードがありがはまってしまいました。
　全ての%20がデコードされないというわけではなく、特定のURLのみデコードされませんでした。
　保存時の問題なのかもしれませんが・・・
　もし同じような境遇の方がいらしたら、お力になれれば幸いです。

#やった対策
以下のように強引にgsubで変換しました。

```ruby
対策前
decoded_url = URI.decode( Book.first.shop_url )
→"https://book/shop_url/アマゾン%20最安"

対策後
decoded_url= URI.decode(Book.first.shop_url).gsub("%20", " ")
→"https://book/shop_url/アマゾン 最安"
```


何かありましたらコメントください。

筆者は豆腐メンタルかつ文字ベースのコミュニケーションは苦手なので、顔文字多め&優しめの言い回しでお願いします。
vue + TypeScript のプロジェクトでvueを2.3から2.5にアップした話

vue + TypeScript のプロジェクトでvueを2.3から2.5にアップした話

最終的な差分[github](https://github.com/va034600/project-base3.1/compare/3.0...3.1)にアップしました。

修正としては以下の３点のみで更新できました。

- package.json
- tsconfig.json
- index.d.ts

結果的に変更としては少なかったのですが、結構ハマりました。、。
reveal.js 3.7.0でチャプターごとに見出しを用意する

## はい
使うのは`reveal.js`と`git`。
`reveal.js`のバージョンは`3.7.0`で、`git`のバージョンは`2.18.0`。
## やるぞ
とりあえず、[`reveal.js`のリポジトリ](https://github.com/hakimel/reveal.js)から`reveal.js`を持ってくる。

```
git clone https://github.com/hakimel/reveal.js
```

そしたら、クローンしてできた`reveal.js`ディレクトリの中にある`index.html`を開いて、スライドを作る。たとえばこんな感じ。ここで、`data-chapter`属性には各スライドで表示したいチャプター名を設定すること。

```HTML
<div class="reveal">
    <div class="slides">
        <section data-chapter="スライドかも">Slide 1</section>
        <section>
            <section data-chapter="スライドかな？(疑問編)">Slide 2-1</section>
            <section data-chapter="スライドかな？(解決編)">Slide 2-2</section>
        </section>
        <section data-chapter="スライドになりたい" data-markdown>
            <textarea data-template>
                ## Slide 3

                suraido ni naritai.
	        </textarea>
        </section>
    </div>
</div>
```

そしたら、下のソースコードを追記する。

```JavaScript
class ChapterHeader {
    constructor() {
        ChapterHeader.initHeader();
        ChapterHeader.updateChapter();
        document.addEventListener("slidechanged", () => {
            ChapterHeader.updateChapter();
        }, false);
    }

    static initHeader() {
        const header = document.createElement("header"),
            h2 = document.createElement("h2");
        header.setAttribute("id", "chapter-header");
        h2.setAttribute("id", "chapter-heading");
        header.appendChild(h2);
        document.querySelector(".reveal").insertBefore(header, document.querySelector(".slides"));
    }

    static updateChapter() {
        const currentSlide = Reveal.getCurrentSlide();
        document.getElementById("chapter-heading").textContent = currentSlide.getAttribute("data-chapter");
    }
}

window.addEventListener("load", () => {
    new ChapterHeader();
}, false);
```

あとは、ブラウザから`index.html`を開いてみれば、各スライドに設定したチャプター名がスライド上部に表示されるようになってる。もし実際に使うときは、適宜`h2要素`にスタイルを追加したりしてカスタマイズする。
CentOS7へLAMP環境をvagrant up一発で構築する

# はじめに
最近作成した[Ubuntuを立ち上げるVagrantファイル](https://qiita.com/t-o-z/items/6ca58e00d31e0ce8a784)のCentOS版を作成しました。

# 前提
* VirtualBox
    * https://www.virtualbox.org
* vagrant
    * https://www.vagrantup.com/downloads.html

# 構成
* Vagrantfile
    * 起動ファイル
    * 仮想環境の基本設定を記載
    * 内部でプロビジョンファイルを実行
* Vagrantfile.provision.sh
    * ミドルウェアをインストール
    * 設定の書き換えを実行
    * データベースの作成
* db/database.sql
    * 記載されたSQLをプロビジョン時に実行
* www/html/index.php
    * ドキュメントルート
    * 同階層以下はサーバと共有しているので、ローカルでここを更新すれば反映されます

# 環境
* OS
    * CentOS7
    * centos/7
* Web Server
    * Apache2.4
* PHP
    * PHP5.6
* Database
    * MySQL5.6
* クライアントマシン
    * Mac
* 構成管理
    * Shell

# Github
https://github.com/t-o-z/vagrant-centos

# 使い方

基本vagrant up 一発で起動します。

```
vagrant up
```

起動後は以下のURLでアクセス可能です。

http://192.168.33.101

サーバへ入りたい時は

```
vagrant ssh
```

でサーバへ接続が可能です。

# 手間取った点

構成はほぼUbuntuと変わらないのですが、一点だけSELinuxの設定で手間取りました。
手間取ったというより原因に気がつけなかった。

```
You don't have permission to access /index.html on this server.
```

http://totech.hateblo.jp/entry/2015/04/05/223714
参考URLの通り、今回はローカルで使用するので無効化の対応にしました。
Adobe Dimensionを使って平面デザインから立体プロダクトを作成してみた

##背景
- Adobe Dimensionで立体的なデザインをしてドヤりたかった

### 適当に環七沿いのゲンナリした空間で撮影した写真をおしゃれっぽく加工したデザインをDimensionに貼り付けてコーヒーカップにした

元画像
![Value_dot_half.jpg](https://qiita-image-store.s3.amazonaws.com/0/127520/dfc152b4-2ee7-411f-fd8a-4afb2ee2f55f.jpeg)


作業画面（チュートリアル通りカチカチやるだけです）
画像をドラッグアンドドロップするだけで勝手にカップに画像が貼り付いてくれます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/127520/51235d09-7acf-1671-b30f-d081e994533a.png)


出来たかも
イメージはパッションフルーツ系のフレーバーの入ったフルーティコーヒー的なやつです
![ValueCoffee.png](https://qiita-image-store.s3.amazonaws.com/0/127520/2c308032-4d01-55dc-8bd4-30d6a7bcd8ec.png)


プロダクトデザインの展開に良さそう(エンジニアにそんな時が来るのかはわからない)

影作ったはずなのにレンダリングされなかった。
もう少し勉強してまたやってみます。
初心者によるvuexまとめ

# 追記
もう少しまともに書いた記事は[こちら](https://qiita.com/raisannnnn/items/a6e62f44649cdf3517c1)

初心者なりにニュアンスだけ理解したvuexのまとめです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/277843/37306a47-0a8a-b6e4-efd0-f57e118c9143.png)


# vuexとは

vuexはfacebookが提唱しているFluxデータフローというデータの流れの理想？？的なののvue.jsバージョン。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/277843/2758b376-cf88-9e51-3bf2-9b4328b8bb35.png)

データの流れを単方向にする事で、大規模なWebアプリケーションを開発時でも、データの流れを見失いずらいってメリットがあるらしいです。

[公式ドキュメント](https://vuex.vuejs.org/ja/)もあります。

# 使い方

![image.png](https://qiita-image-store.s3.amazonaws.com/0/277843/cac40b78-1796-3ad0-17dd-8850b088e940.png)

例として以下のようなjsファイルがあったとします。

```index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

    const example = {
        state: {
            member: [
                {name: "Tom", old: "20"},
                {name: "John", old: "30"},
            ]
        },
        mutations: {
            updateMember (state, member) {
                state.member = member
            }
        },
        actions: {
            updateMember (context, member) {
                context.commit('updateMember', member)
            }
        },
        getters: {
            getMember (state) {
                return state.member
            }
        },
    }
 }
```

- **state** :　データを格納してある場所。
- **mutations** :　actionsから値を受け取って、stateを書き換える場所 (ここ以外でstateを書き換えてはいけません。)
- **actions** :　コンポーネントから値を受け取って、mutationsに受け渡す場所。
- **getters** :　stateのデータを取得するときに呼び出す。

実際の流れとしては

- storeのデータを使いたい時は ```$store.getters['getMember']``` でstateのmemberを取得
- コンポーネント等で書き換えたmemberをstateに反映させたい場合は、<br>```$store.dispatch('updateMember', member)```でActionsに値を渡す。
- コンポーネントからactionsに渡ってきたmemberを、mutationsのupdateMemberに渡して、stateのmemberを書き換える。
- memberが書き換わり、データが更新される。


こんな感じの流れで、データが一方向に流れていくって感じです。

とてもざっくり書きましたが、図を見ながら流れを追ってもらうとよりわかりやすいと思います。
AWS DMSについて

##AWS DMSとは？
AWS Database Migration Serviceの略。ECシステムでお買い物することで有名なAmazonのサービスです。AWS DMSを簡単に言えば、既存のデータベースからAWSへデータ移行するときに、「**簡単で安全で早いデータ移行を提供**」してくれるサービスのこと。

また、同種のデータベース間での移行も異種データベース間の移行も可能であるため、様々なケースに対応されている。

 以下のような移行が可能。

- Oracle Database ➡︎ Amazon Aurora
- Oracle Database ➡︎ RDS for Oracle Database 

##さいごに
一旦、AWS DMSって何？よくわからん。っていうところは抜けれたのでこれで終わります（眠い）。
ゼロから始める音ゲーノーツツール作成　その1/3（ツール作成思想）

#この記事の対象者
・Editor拡張による音ゲーのノーツツール作成を試みたい人
・あえてEditor拡張によるツールの作成を試みたい人
・Unity大好きって人
・EditorWindowを少しでも触ったことがあり、沼に入りたい人
・ツール作る上でどういう考えでもって、作成していくべきかの一つの考えを見たい人


#今回の内容
今回の記事はあくまでも、ツールの作成する上できおつけている内容です。

#目次
・前置き　ツール作成でノーツツール以外においてきおつけるべきこと。
・覚える事を最小限に。最初の一回のハードルを極限まで低くを目指す。
・最後に





#前置き　ノーツツールに関わらずツール作成においてきおつけるべきこと。
ツールを作る目的とは何でしょうか？
業務で使う場合、多くの場合は以下のような理由があげられます。
・業務改善（自分から思い、自分で作る）
・業務改善（要望による）
・利便化
・秘匿化



今回は主に、業務改善に含まれる
・業務改善（要望による）、利便化に注目した場合です。

要望による業務改善の場合、
・その要望を出す人が明確のツールを使うイメージを持っているか？
・どういった使い方が望ましい使い方かを持っている人か？
・そして使う側も明確な問題意識が存在するか？
の3点が重要かと思われます。これは作る側に共有されなければなりません。


ツールはあくまでも、
・仕組みの改善
・ミスの軽減
を補助する役割を目指す物です。


###これらの問題意識を如何にとらえていて
###どういった目的で、改善を要望するか？
###移行のタイミングの共有

を知っている上で、作成しなければ行けません。

問題意識（めんどくさいも含む）がなければ改善を望みません。
改善はいいことですが、多くの場合、人は保守的で、新しい事をするのには
多少なりとも、不安やこれまでのやり方を捨てるということをしなければいけません。
それは多くの場合ハードルになるので、この問題意識を持っているかどうかによって、作られたツールの見え方が違ってくるように思えます。（経験から見た感じの私の感想）
これを持っていないと、そもそも覚えるのがめんどくさいという理由で少しだけ触って、まるでなかったかのように気づいたら使われていないでしょう。

上記のようにならないために、それらの目的の共有（作成、使用の両者　できるなら実際にその工程を経験するまでがいいでしょう。）をした上で、この時期は移行するためにランニング期間ですと明確にもうけなければ移行はうまくい事がないでしょう（よほどの利便性を知らない限り）



それらの事はもちろん大事ですが、それらの移行するために必要なのは次の項目で記載していきます。


#覚える事を最小限に。最初の一回のハードルを極限まで低くを目指す。

移行に関して、もっとも大変なのは、
使う人が「ツールの使い方」を覚える事です。
なんでもそうですが、新しい事を始めるというのは、何せコストがかかるものです。
こと新しいやり方を行うことについてはそうです。

これはMAYA,Blender,MMDの使用していたものの移行と似ているかもしれません。
MAYAでなれている人が、無料で、似たような機能のBlenderを使った際にだいたい聞くのが、
「使い方がかなり違う」
「この機能がないから無理」
「UIがわかりづらい」

SE業界が未だにエクセルシートが大流行しているそれとも似ているかもしれません。


もちろん多くの場合は、触っていけばなれる事も多いですが
これらは少なくとも、移行の障害になります。
これまであったものを、明らかに利便性があるにも関わらず、移行しないのは、これらが障害としてつきまとってしまうからです。

これらの障害をなくすにはどうしたらよいか？

「やる事を限りなく減らす」
に限るかなと思っています。

例えば、
・前提条件を減らす。
　　特定の状態の時に使えない。
　　これらの時はこれらの行動の禁止等の禁止事項。やってはいけない手順が存在する状態
　　

・選択肢を減らす（簡易モードの実装など）
　　最初の画面に選択肢を極力減らす（Ex　ファイルを設定した段階で、項目が増えるの作りにする）


・究極的には説明なくてもなんとなく触れるもの。
　このボタンを押したら、どういう事が出来るか？とか、配置も含めてわかるとなお良いです。
　　ボタンのON/OFFのUIなど



#最後に
どんないいツールも導入時にはトラブルが起きやすいです。
・時間がない
　覚える余裕がない
　利便性がわからない
　魅力的に感じない


など使い手につたわらなければ、結局の所、作った側のスキルが上がってしまうだけになってしまうことになってしまいます。
黒い画面 学習感想　まとめ

Webデザイナーの為の「本当は怖くない」“黒い画面”入門 をやってみた。
http://fjord.jp/articles/548.html

##学習理由と概要

terminalこと、黒い画面についての学習を上記のURLのものを参考に進めたので、その報告ブログを書いてみる。

これまでにも前職にいるときにも仕事上頻繁に扱っており、必要に迫られて多くのコマンドを叩いて来たし、知らないこともその都度調べながら使用してはいたので、慣れと経験は最低限あった。

しかし部分部分的につまみ食いで知識を得てはきたものの、包括的に基礎的な部分をまとめて学習してはいなかったので、今回の学習は復習と知識の点と点を結ぶことに大きく役立ったと思う。

以下には、今回の学習で新たに学んだことをメモとして書いて行く。

##学習したこと

###1. 最初のコマンドのスペースのあとは引数

コマンドは関数みたいなもんというのは過去に学習したときに学んでおり、スペース以降の部分が引数というのは言われるとそう言えばそうだったと思い出した。
しかし、言われなければ思い出せていなかったことでもあった。
関数と何ら変わらないということを頭の隅に入れて置くことが、ターミナルを操作するときには大切だと思う。新たにコマンドを使うときに調べる際でも、それがどう動くのかは関数としての働きであることを意識するだけでも理解がしやすくなるから。



###2.ハイフン二つのロングネームオプション(long name option)はショートネームオプションと同じ機能をもち、名前を覚えやすくする。

これまで、疑問に持っていたが、ハイフン二つのオプションはシングルハイフンのオプションのものを覚えやすい名前に変えたものだった。
前々からオプションは覚えづらいと思っていたので、これからはオプションを見つけたら、その際に積極的にロングネームオプションが存在してるか確認しようと思う。

また、ロングネームオプションに文字を渡す場合=(イコール)を付ける必要があるようだ。

```
$ command -f /tmp/foo
$ command --file=/tmp/foo
```

###3. man コマンドのマニュアル

-hオプションについては知っていたので、コマンドを調べる際はググるか、こちらを使うことしか知らなかったが、man　コマンドなるものがあったとは思ってなかった。

###4. curl ダウンロードコマンド


引数に指定したURLからコンテンツを取得して表示。
```
$ curl http://example.com 
```
-o　オプションで、続けて書いたファイル名で保存可
```
$ curl http://example.com -o filename
```
このコマンドここに乗っている以外にも絶対にいろんな活用方法があるに違いないと思って、調べてみるとやはりたくさんあった。一例として下記URLをめも。
https://qiita.com/yasuhiroki/items/a569d3371a66e365316f
https://qiita.com/takayukioda/items/edf371b3566bea64d046

また、curlはmacで、linuxではwegtという似た用途のコマンドがあるらしい。
このコマンドもよく前職で他のエンジニアの方々が打っているところを見た記憶があるので、きっと使う機会が多いだろう。

###5. say / saykana 音声読み上げコマンド

saykanaは外部から取り入れたプログラムコマンド
引数の文字を読み上げてくれる。

直近での使い道は特に無いけどいつか使えそうな気がする。
saykanaは漢字が読めないから少し使いづらいけど、代用のソフトがきっとあるでしょう。

###6. homebrew
homebrew自体は会社で使っていたので、知っていたのだが、今回インストールする際に、エラーが出てしまった。
エラー自体はhomebrewのインストール時ではなく、 /usr/local/の権限を変更する際にrootでも変更できなかったことだ。
調べると、high sierraからはrootでも変更することができなくなったらしい。
なので、下記のURLにそって、homebrewのインストールを進めた。
https://coolestguidesontheplanet.com/installing-homebrew-on-macos-sierra-package-manager-for-unix-apps/


### 7. mkdir -p 階層を持ったディレクトリ作成
mkdirはよく使っていたが、こちらのオプション　-p　によって深い階層を持ったディレクトリを作れるというのは初めて知った。とても便利そうなので、ぜひ使っていきたい。

```
$ mkdir -p foo/bar/buz
```

###8. cp -r ディレクトリのコピー

-r　オプションでファイルだけでなく、ディレクトリのコピーも行うことができる。
そういえば、rmコマンドでもディレクトリを消すときは　-rをつけていた。
-rはディレクトリ系に関するオプションなのであろうか。

```
#fooはディレクトリ
$ cp -r foo /bar
```


###9. shabang 作業の自動化

 #!を先頭につけると２行目以降を全てそのあとのコマンドに渡す。
以下のコードは echo hello を/bin/sh に渡すことで、コマンドでこのファイルを呼び出すだけでこの動作をターミナルが自動で行ってくれるというもの。 

```:echo-hello
#! /bin/sh
echo hello
```
```
#ファイルを生成後以下を行う必要がある。
$ chmod u+x echo-hello
$ ./echo-hello
hello
```
渡す先はshやphpといったスクリプトを実行するプログラム（インタプリタ）である必要がある。

これを活用すれば、面倒な作業も、忘れてしまう複数のコマンド操作も一発で行う得ることができる。
とても便利だし、どんどん扱っていきたいと思う。

###10. export 環境変数の設定
環境変数と中身を＝で区切り渡す。

```
$ export PATH=$PATH:~/bin
```


#感想

基礎的な部分が多く知らなかったことが思っていたよりも多くあった。
まだターミナルコマンドの知らないけれども使い勝手のいいものもあるが(grepとか)それらについて一つ一つ学んで活用していくようにしたい。
ASK SDK V2 for Node.js - PersistenceAdapter の使い方

SDK V2では、Skillインスタンスを作成する2つのSkillBuilderが含まれています。

1. Custom Skill Builder
2. Standard Skill Builder

Standard Skill Builder を使いたい場合は、デフォルトでDynamoDBPersistentAdopterが利用できるが、ask-sdk-coreパッケージを使いたい場合や、Custom Skill Builderを使いたい場合は、別途ask-sdk-dynamodb-persistence-adapterパッケージをロードして、使用することになる。

ask-sdk-dynamodb-persistence-adapterパッケージは、AWS DynamoDBを使ってPersistenceAdapterを実装するものです。

#1. ask-sdk-dynamodb-persistence-adapterパッケージをダウンロードする

```shell
npm install --save ask-sdk-core
```

```shell
npm install --save ask-sdk-dynamodb-persistence-adapter
```

#2. DyanamoDBAdopterのインスタンスを生成する。

```javascript

const Adapter = require('ask-sdk-dynamodb-persistence-adapter');

const config = {tableName: 'hogehoge_table', // <= DynamoDBのテーブル名
                createTable: true}; // <= テーブルを自動生成する場合true (ただし権限が必要)
const DynamoDBAdapter = new Adapter.DynamoDbPersistenceAdapter(config);
```

#3. Custom Skill BuilderにAdopterを登録する

```javascript

const skillBuilder = Alexa.SkillBuilders.custom(); // <= Custom Skill Builder

exports.handler = skillBuilder
  .addRequestHandlers(
    LaunchRequestHandler,
    HelpIntentHandler,
    StopIntentHandler,
    SessionEndedRequestHandler
  )
  .withPersistenceAdapter(DynamoDBAdapter) // <= ここを追加
  .addErrorHandlers(ErrorHandler)
  .lambda();
```

これで、Standard Skill Builder と同様に属性の永続化処理が自動的に行われる。