OmniAICreator/Qiita-1.07M huggingface dataset:
Apache Rangerの Deny-条件と Excludes

# 1. Overview
[Source Wiki](https://cwiki.apache.org/confluence/display/RANGER/Deny-conditions+and+excludes+in+Ranger+policies)
[HDP 2.6まで、Excludeを有効化方法](https://community.hortonworks.com/articles/61208/how-to-enable-deny-conditions-and-excludes-in-rang.html)
Ranger 0.6から、例外とDenyを対応しました。
[RANGER-606](https://issues.apache.org/jira/browse/RANGER-606)で頑張りました。

# 2. Policy Model
RangerのPolicyは２つ主なパーツがある：

1. 適用するリソースに対してPolicyを指定

例：

* HDFSファイル、フォルダ
* Hive Database / Table / Column
* HBase Table / Column - Families, column
* Kafka Topic
* NiFi プロセッサー / Processor Group / Provenance
* など

2. 適用対象を指定

* User
* Group
* Access-type
* カスタマイズ条件

Ranger 0.6から、Part 1は変更しないですが、Part 2が拡張された：（現時点2018/10/24, Ranger最新版は1.2）

* Allow Conditions (Ranger 0.5までにあるもの)
* Deny Conditions
* Excludes from Allow conditions
* Excludes from Deny Conditions

## 2.2 Policyモデル
HDP 2.6.5まではデフォルトで下記表示：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/133516/6969594d-ab97-5539-dc8b-2742f789e2c0.png)
まずはRangerのDeny/Excludeの表示を有効にする。

```json
 {
  "name": "hdfs",
  "description": "HDFS Repository",
  "options": {
   "enableDenyAndExceptionsInPolicies": "true"
  }
}
```

有効化にした後はこんな感じ：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/133516/3ad98f3d-5716-d9d5-f170-58784926fc99.png)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/133516/1a20df61-73de-aa30-515c-3ee0bdef483f.png)

HDP 3.0にしたら、デフォルトでDenyとExcludeが表示される：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/133516/b93f7516-e077-65d5-aade-2269bb759263.png)

# 3. Policyの評価順番

* RangerのDenyが有効化されていない場合、（HDP 2.6.5のDenyはデフォルトでは無効化。HDP 3.0のDeny機能はデフォルトで有効化になりまいた）Policyの評価順番は結果に影響しない。基本的にはWhiteListの発想で、何かPolicyがあるリソース（あるいはTag)に対して権限を付与したらアクセス出来る、明確に付与しなかったら、アクセス拒否される

* Deny条件を使い始めると、評価の順番があります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/133516/00488b1a-77c4-46d6-4a2f-328e792c28a3.png)

 * 全てのDeny条件を評価
 * もしリクエストが一つDeny条件をヒットしたら
     * 該当PolicyがDeny-Exclude条件持っていない、あるいは該当リクエストはどのDeny-Exclude条件にもヒットしなかったら、アクセスは拒否される
     * ELSE、次のDeny条件を評価する
 * このアクセスがどのDENY条件にも拒否されなかったら、次はALLOW条件を評価
 * ALLOW条件を評価
     * もし該当リクエストが一つALLOW条件に該当する
       * 且つALLOW-EXCLUDEに該当しなかったら、アクセスは許可
* もし上記どれにも該当しなかったら、undeterminedとしてアクセス拒否
 * 但し、HDFS/YARNの場合はNative ACLを見て最終判断する
【Matter.js】剛体モデルの面積を求める備忘録

Matter.jsを率いて、
ある大枠の容量に応じて剛体が満ち満ちに溜まるようにしたい。
その際、
大枠の面積に対して、剛体の数がどれくらい入るのか求めるプログラムを組みたいため
Matter.js Bodiesで作成する剛体モデルの面積を求める式が必要になり
面積の割り出し方を改めてお勉強をし直しました。:innocent:

# 長方形
### Matter.js 剛体モデル定義方法
```
Bodies.rectangle(x, y, width, height);
// width = 横幅
// height = 高さ
```
### 長方形の面積
```
area = width * height;
// 面積 = 横幅 * 高さ
```

# 円
### Matter.js 剛体モデル定義方法
```
Matter.Bodies.circle(x, y, radius);
// radius = 半径
```
### 円の面積
```
area = radius * radius * Math.PI;
// 面積 = 半径 * 半径 * 円周率
```

# 正多角形
### Matter.js 剛体モデル定義方法
```
Matter.Bodies.polygon(x, y, sides, radius);
// sides = 辺の頂点の数
// radius = 辺の頂点から多角形の中点までの距離 
```
### 正多角形の面積
```
area = (radius * radius / 2 * Math.sin(Math.PI * 2 / sides)) * sides;
// 面積 =  (辺の頂点から多角形の中点までの距離 * 辺の頂点から多角形の中点までの距離 / 2 * sin(円周率 * 2 /辺の頂点の数)) * 辺の頂点の数
```

# 等脚台形
### Matter.js 剛体モデル定義方法
```
Matter.Bodies.trapezoid(x, y, width, height, slope);
// width = 横幅
// height = 高さ
// slope = 傾斜の割合(1で四角形 0で三角形)
```
### 等脚台形の面積
```
area = ((width * slope) + width) * height /2;
// 面積 = ((横幅 * 傾斜の割合) + 横幅) * 高さ / 2
```

# まとめ
今回、式を作るのにかなりggりました....。:sweat_smile:
(( 学生時代しっかり勉強して入ればこんなの簡単でしたでしょうね... ))
正直、正しく割り出せているのか自信はないので
間違っているなどあれば是非ともご指摘よろしくお願いします。
jsでファイルダウンロード関数

もっとちゃんと探せば npm パッケージありそうだけど取り急ぎ。

## コード

```js
function download(text, filename, mimeType = 'text/plain') {
  const href = `data:${mimeType};charset=utf-8,` + encodeURIComponent(text)
  const a = document.createElement('a')
  a.setAttribute('href', href)
  a.setAttribute('download', filename)
  document.body && document.body.appendChild(a)
  a.click()
  a.remove()
}
```

## Usage

```js
download('Hello', 'world.txt')
```

```js
const csvText = `a,b,c
10,20,30`
download(csvText, 'abc.csv', 'text/csv')
```

## デモ

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">I got Toshino <a href="https://t.co/qcWeXDf8cZ">pic.twitter.com/qcWeXDf8cZ</a></p>&mdash; あのぞん😎 (@anozon) <a href="https://twitter.com/anozon/status/1055003600315994112?ref_src=twsrc%5Etfw">2018年10月24日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【Linux】たまに使うコマンドをコマンド履歴の中から検索する方法

Linux上でたまにしか使わないコマンドは、なかなか覚えられないですよね。

しかも、開発中は[ビルド→デプロイ→ログ出力…]といった形で同じコマンドの繰り返しが延々と履歴に残ることがあります。

そんな時に履歴の中から使いたいコマンドを瞬時に見つけ出すコマンドです。

```sh
$ history | grep ***
```
※「***」には探したいコマンドを入力
Python(VISA経由)でKeysightの実験装置に接続する方法

初めての投稿です。
よろしくお願いします。

今回はKeysightの実験装置をPythonで接続するために必要なことをまとめます。
メモ程度なのでご了承ください。

# 必要なもの
- **Python**が動く環境
    - 私は**Anaconda3**で**Python**をインストールしました。簡単です。以下のサイトからdistributionはダウンロードできます。

https://www.anaconda.com/download/


- **VISA（Virtual Instrument Software Architecture）**
    - ここでは**pyVISA**を使います。


# 手順
ここでは、Pythonがすでにインストールされていることを仮定
１．pyVISAのインストール
　　　－実験装置とPCのソフトウェアをcommunicateできるようにするためのもの
　　　　詳しくは[こちら](https://pyvisa.readthedocs.io/en/master/getting.html)を参照

pyVISAはAnacondaのAnaconda prompt上で以下を打ち込めば手にいられます。
```shell:Anaconda prompt
$ pip install -U pyvisa
```

２．Backendのインストール
これだけでは動きません。Backendが必要みたいです。後にスクリプトを回そうとすると**pyvisa-py**というパッケージか**National Instruments’s VISA**が必要と怒られます。

ここでは**pyvisa-py**を選択。
理由は**National Instruments’s VISA**はwindows10に対応していないみたいなので。（2018.10.24現在）


インストールは簡単です。
Anaconda promptで以下を実行するのみ。
```shell:Anaconda prompt
$ pip install -U pyvisa-py
```


３．インストールの確認
Pythonのテスト用scriptを以下のように作って動かしてエラーが出なければpyVISAの準備は終わりです。

```python:python
import visa
rm = visa.ResourceManager()
print(rm.list_resources())
```

接続のサンプルコードはKeysightのサイトで公開されています。
参考になります。


短いですが、以上になります。
ありがとうございました。
C++ Builder XE4 > TeeChart > メモリエラー 「モジュール 'Tee9180.bpl'のアドレスXXXXでアドレスYYYYに対する読み取り違反がおきました。」 > Series1にデータ点がない時にXValues->Last()をコールするとエラー

```txt:動作環境
C++ Builder XE4
TeeChart Lite v2013.08.130414 32bit VCL
```

### メモリエラー

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include <DateUtils.hpp>
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TDateTime dt;

	dt = Series1->XValues->Last();

	int nop=1; // for breakpoint
}
//---------------------------------------------------------------------------
```

![2018-10-24_16h09_55.png](https://qiita-image-store.s3.amazonaws.com/0/32870/46aaf4ae-3200-24e3-50ab-7cb95d7bcfb4.png)

> モジュール 'Tee9180.bpl'のアドレスXXXXでアドレスYYYYに対する読み取り違反がおきました。

### 発生条件と対処案

- Series1に点がない
- XValues->Last()をコール

`XValues->Last()`をコールする前に`XValues->Count`が0でないかのチェックなどが必要。
My thoughts on why AI x IoT is a killer combination.

## Iteration 1

It seems trivial that AI x IoT are always together for the conferences like AI/IoT or IoT M2M treat them as friends. But with a little bit of closer look at these things, we can understand they're actually competing technologies each with their own drawbacks.

### How are they even competing technologies?

Let's start with Authentication by Apple. Apple used IoT (fingerprint sensor) until iPhone X for authentication. But from iPhone X, it is using AI (face recognition) for authentication. See how AI took over IoT's project.

Not yet convincing?

Now let's take the case of indoor navigation. They're infinite number of use cases of this application. 3 years ago, everyone's thoughts were to solve this problem using extra sensors to track people. But today's solution (used in retails shops) uses computer vision to track people and what they have picked ([Video Link](https://www.youtube.com/watch?v=yeS8TJwBAFs)).

Or consider self driving cars. While google already solved it with extra sensors and camera, Elon Musk through Tesla said, they're trying to solve the same problem just with computer vision 3 years ago.

Or consider battery life on phone, there are two approaches, IoT way i.e., adding a Thing (battery) or using AI i.e., AI to save power. Google through Pixel 3 is using AI to save battery consumption.

### Competing Right?

Let's have another iteration of thought.

## Iteration 2

Now let's understand one thing, 
### Why did it almost every time start with IoT and later got taken over by AI?
It got taken by AI because IoT uses extra sensors which are in general **expensive**. But AI (Computer Vision) just uses camera and a GPU to understand. But AI models taken time to be developed for these models needs to be trained on **large amounts of data**.

### Can AI & IoT be together for a more automated world?

#### Yes, IoT can solve the problems faced by AI and take have it's own position.

Yeah, IoT knows the solution but is expensive. So, if IoT can teach AI, AI becomes better. For example take this,

Every day at Uhuru Kamiyacho Office, every one swipes RFID card while going in and going out. Now, if we take a photo and add the tag from the RFID, and train an AI model, and use this trained AI model for door opening or authentication, we get costs saved for RFID card reader and so on and get the problem solved.

Or consider, Yamamoto san, Katsu san, Nishimura san, Akama san's fun project of finding if chair is occupied or not using enebular (IoT)? Can AI solve it? Yes, but requires data. Use the same techniques. Tag pictures using IoT project's sensors and train AI using it, to use the model elsewhere. What will we achieve? Save IoT infrastructure costs and AI data collection costs.

## IoT can be a teacher for AI. But IoT like all teachers shouldn't be jealous of it's student AI. Together for a better future.
EC-CUBE4 カスタマイズ開発 Plugin Twig拡張

自作のTwig関数やTwigフィルターは、以下の通りにファイルを設置するだけで有効になりました。

```php:app/Plugin/プラグインコード/Twig/Extension/XXXExtension.php
namespace Plugin\プラグインコード\Twig\Extension;


use Twig\Extension\AbstractExtension;

class XXXExtension extends AbstractExtension
{
    public function getFilters()
    {
        return [
            new \Twig_Filter('my_filter', [$this, 'my_filter'])
        ];
    }

    public function my_filter()
    {
        return true;
    }
}
```

なお、関数やフィルター内で HttpRequest を扱いたい場合は、コンストラクタを以下のようにすることで AutoWiring されました。

```php
    public function __construct(RequestStack $requestStack)
    {
        $this->requestStack = $requestStack;
    }
```
---

EC-CUBE4では、サイト全体の多言語化は実装されているが、個人レベルでの多言語化は実装されていないので
独自翻訳フィルターを使って、ブラウザ言語設定またはクッキーを見て翻訳するフィルターを考えてみました。

```php
class SampleExtension extends AbstractExtension
{
    /** @var RequestStack */
    protected $requestStack;

    /**
     * Sample constructor.
     *
     * @param RequestStack $requestStack
     */
    public function __construct(RequestStack $requestStack)
    {
        $this->requestStack = $requestStack;
    }

    /**
     * @return array|\Twig_Filter[]
     */
    public function getFilters()
    {
        return [
            new \Twig_Filter('sample_trans', [$this, 'trans'])
        ];
    }

    /**
     * @param $id
     * @param array $parameters
     * @param string $domain
     * @param null $locale
     *
     * @return mixed
     */
    public function trans($id, array $parameters = [], $domain = 'messages', $locale = null)
    {
        $lang = null;

        $request = $this->requestStack->getCurrentRequest();

        $headers = $request->headers;
        $accept_lang = $headers->get('Accept-Language'); // "ja,en-US;q=0.7,en;q=0.3"
        if ( ! empty($accept_lang)) {
            $accept_langs = explode(',', $accept_lang);
            if ( ! empty($accept_langs) && $accept_langs[0] !== 'ja') {
                $lang = 'en';
            }
        }

        if ($lang === null) {
            $cookies = $request->cookies;
            $cookie_lang = $cookies->get('lang');
            if ( ! empty($cookie_lang) && $cookie_lang !== 'ja') {
                $lang = 'en';
            }
        }

        if ($lang !== null) {
            $locale = $lang;
        }

        $app = \Eccube\Application::getInstance();
        if (isset($app['translator'])) {
            return $app['translator']->trans($id, $parameters, $domain, $locale);
        }
    }
}
```
[基礎] python + openCV で動画を扱う

pythonで動画に対して何らかの処理をしたいときに見るページです．

非常にざっくりと動画処理系のフローをまとめると次のようになります．

![zu.png](https://qiita-image-store.s3.amazonaws.com/0/303209/bbe45e65-8a5e-4d96-3027-5a6943b92e6d.png)

以下に，フローの部分だけを記載したコードを用意します．
処理の部分を適当な形に記述することで，動画の処理や加工ができます．

```TreatVideo.py
import numpy as np
import cv2

#動画を取得
#端末に接続されたデバイスでストリームしたければ0などのデバイス割り当て番号
#既にある動画を使いたければ動画のパスを引数に与える
video = cv2.VideoCapture("your/video.avi")

# VideoCaptureに失敗したら無視してプログラムを終了
while.video.isOpened():
    
    # フレームの読み込み
    ret, frame = video.read()

    # フレームを読めなかった(動画を最後まで読み切った)ら終了
    if not ret:
        break

    # 画面サイズを取得
    # フローには書いてないけど大抵使うので書いておきます
    (height, width) = frame.shape[:2]

    # ---------------
    # やりたい処理はこのあたりで記述する
    # ---------------

    # 現在読んでいるフレームを描画
    # 処理結果見えなくていいから軽量化したい場合はここをコメントアウト
    cv2.imshow("frame", frame)

    # qを押せば処理を中止できるようにしておく
    key = cv2.waitKey(1) & 0xFF
    if key == ord("q"): break

# メモリ開放
video.release()
cv2.destroyAllWindows()
```

#動画を保存したいんだけど
映像のエンコードがうまくいっていないらしく，本記事の記述当時は成功していません．
うまくいったら追記します
SSH Keyを生成してGithubに登録

## 前提

- macOS Sierra

## 作業

### SSH Keyを生成

```
$ ssh-keygen -t rsa -b 4096 -C "hoge@example.com"
```

`~/.ssh`の中に`id_rsa`と`id_rsa.pub`が生成されます。

`id_rsa` → 秘密鍵
`id_rsa.pub` → 公開鍵

### Githubに公開鍵を登録

下記のURLにアクセス
https://github.com/settings/keys

![github.com_settings_ssh_new(Laptop with HiDPI screen).png](https://qiita-image-store.s3.amazonaws.com/0/261245/285a52e3-390b-5a04-b0a4-55a75a5b2015.png)

Keyのところに公開鍵を丸々貼り付けて、Add SSH Keyをクリックします。
pbcopyを使うとクリップボードにコピーできて楽です。

```
$ pbcopy < ~/.ssh/id_rsa.pub
```

### 確認

```
$ ssh -T git@github.com
Hi m1ul24! You've successfully authenticated, but GitHub does not provide shell access.
```

successfullyみたいなメッセージがでればOKです

参考URL
https://qiita.com/suthio/items/2760e4cff0e185fe2db9
https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/
EC-CUBE4 カスタマイズ開発 Plugin

プラグインの雛形は以下コマンドで生成。

```bash
bin/console eccube:plugin:generate
bin/console eccube:plugin:install --code=プラグインコード
bin/console eccube:plugin:enable --code=プラグインコード
```

`eccube:plugin:generate` 実行結果のサンプル

```txt
EC-CUBE Plugin Generator Interactive Wizard
===========================================

 name [EC-CUBE Sample Plugin]:
 > プラグイン名

 code [Sample]:
 > プラグインコード

 ver [1.0.0]:
 > 1.0.0
```

なお、プラグインの最小構成は以下の通りです。

```json:app/Plugin/プラグインコード/composer.json
{
  "name": "ec-cube/プラグインコード",
  "version": "1.0.0",
  "description": "プラグイン名",
  "type": "eccube-plugin",
  "require": {
    "ec-cube/plugin-installer": "~0.0.6"
  },
  "extra": {
    "code": "プラグインコード"
  }
}
```

---

## 公式のプラグインサンプル

[サンプルプラグイン](https://github.com/EC-CUBE/sample-payment-plugin)
[商品レビュープラグイン](https://github.com/EC-CUBE/ProductReview-plugin/tree/4.0)
Storybook Addon Knobs使って数値などを動的に変更して確認する方法

## 前提条件
下記がインストール済
* Vue.js
* Storybook
* Storybook Addon Knobs
https://github.com/storybooks/storybook/tree/master/addons/knobs


## 手順

ストーリーのimportでnumberも呼び出す。

```
import { withKnobs, number } from '@storybook/addon-knobs';
```

sample-listコンポーネントでは、itemをpropで数字を受け取って、一覧の個数を受け取ると仮定しています。

```
.add('サンプル表示', withNotes(`サンプル一覧です`)(() => ({
  components: { Sample-list },
  template: '<sample-list :item="number"/>',
  data() {
    return {
      number: number('number', 1, { min:1, max:6 }),
    };
  },
}))
```

これ以外にも、テキスト入力、チェックボックス、色などブラウザから入力したものを動的にコンポーネントに送って状態確認などできます。



## 参考文献
https://blog.spacemarket.com/code/storybook-addon/
https://github.com/storybooks/storybook/tree/master/addons/knobs#number
Google Mapsを英語で埋め込みたい

今サイトに埋め込んでいるGoogleマップの地図を英語にしたいということで、
いろいろ調べて私がつまずいたところを残しておきます。

## 参考

### ほとんどはこちらのページで解決しました。
[Google MapsをWebページに英語で埋め込む](http://mugichoko.hatenablog.com/entry/2018/07/21/061920)

### その他
[Google Maps Embed APIを使ってマップを表示する方法](https://qiita.com/junara/items/bcfb9c1c5737c6d2fed9)
[GoogleMapの埋め込み表示はどうするべき？](https://qiita.com/aquagre_en/items/ccc25cdd475bfc7dfa1c)
[サイト埋め込みGoogleマップが7月16日からAPIキー必須で有料に、ただし対応不要の場合も多いので慌てずに](https://webtan.impress.co.jp/e/2018/06/26/29696)


## Googleマップについて

いろいろ調べてわかったことは、

- 最近仕様が変わったらしい
- Googleマップから「地図を埋め込む」では英語に変更することはできなさそう
- 「Maps Embed API」というものを使えばできるらしい
- マップを表示するだけだったら無料らしい

普段、地図を埋め込む機会がなかったので、そもそもどうやって埋め込むのか埋め込み方法から探りました。
普通の時は、Googleマップのページから地図を埋め込むで問題ないそうです。

## Maps Embed API

これがなんなのか、深くは理解していないが、まあ、Googleが定めた仕様なので、それにそって行えば良いと。

上記のサイトを参考に、APIキーを作成。
これ自体はそんなに難しくない。

## つまずいたこと：埋め込みコードの書き方

理由1：私はGoogleマップの埋め込み作業に慣れていなかった
理由2：英語が読めない

これに該当しない人は多分つまずかないと思います・・・

こちらが公式のガイドです。
[Maps Embed API Developer Guide](https://developers.google.com/maps/documentation/embed/guide)

英語・・・翻訳してもなんとなくしかつかめなかった・・・

多分読めばわかるんだと思います。

こちらがサイトに載っている例です。

```html
<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
```

`YOUR_API_KEY`は、わかりましたが、
ん？表示したい住所はどうすればいいの・・・？

と、そこの部分がわからなくて調べていました。

結論から言うと、`&q=`から続く部分に表示したいものを表記すれば良いのです。
例えば、

```html
<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=東京駅" allowfullscreen>
</iframe>
```

しかし、場所の名称から正確な地図が表示できない場合どうすればよいのか、私はそれが知りたかったのですが、そのまま住所を入れたら、私が欲しいものになりました。

```html
<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=東京都千代田区丸の内１丁目９" allowfullscreen>
</iframe>
```

そして最後に、英語の表記に変更する場合、`src`の末尾に`&language=en`を追加すれば完了です。

```html
<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=東京都千代田区丸の内１丁目９&language=en" allowfullscreen>
</iframe>
```

お気づきだと思いますが、`en`の部分を変更すれば、他の言語にも対応できるそうです。

## まとめ

もともとGoogleマップについての知識があれば、つまずかないようなところに私は引っかかってしまいました。。。

でもまあこれで、日本語が読めない人も安心して来られますね！
EC-CUBE4 カスタマイズ開発 始める前に・・・

Symfony初心者、EC-CUBE3未経験の自分が
現時点で、[公式ガイド](http://doc4.ec-cube.net/) に記載がなく困り、解決したことを残していきます。

開発に入る前に、環境変数を開発モードに変更します。

```php:~/.env
###> symfony/framework-bundle ###
APP_ENV=dev
APP_DEBUG=1
```

次に、 `vendor` 配下には開発に必要な依存ライブラリが入っていないらしいので
次のコマンドでダウンロードします。

```bash
composer install --dev
```

---

## 関連記事

[EC-CUBE4 カスタマイズ開発 Plugin](https://qiita.com/applexco/items/615c74755f5f5887c643)
[EC-CUBE4 カスタマイズ開発 Plugin Twig拡張](https://qiita.com/applexco/items/f59b93643d3f3eeee4b7)
Vue で functional component を JSX で書く場合に className が期待通りに反映されない問題について

Vue.js において Conditional に rendering したい場合、どうしても functional component を使わないといけない場合がある。
その場合、JSX と組みわせて使用することが推奨されているが、JSX の中で className を使った場合に、うまく class にならない。

この問題は、私の環境特有のものかもしれないし、設定次第でなおるのかもしれない。正しい運用方法ご存知の方は、ぜひコメントで教えていただけると助かります。

## 現状の問題

以下のように書くと、class="myClass" にはならない。単に className="myClass" になってしまう。
これだと CSS を当てれない。

```jsx
const FunctionalJSXComponent = ({ data, props }) => {
  return <h2 className="myClass">functionalJSXComponent</h2>
}
```

## さしあたっての解決法

以下のようにするしかない。ただし WebStorm からはワーニングのアラートがでる。JSX のシンタックスにあっていないため。

```jsx
const FunctionalJSXComponent2 = ({ data, props }) => {
  return <h2 class="my-class">functionalJSXComponent</h2>
}
```

自分は 親コンポーネントで以下のように設定して、BEM like な書き方で運用することにした。

```vue
<style scoped lang="scss">
.test {
  background: red;
}
.my-class {
  background: blue;
}
</style>
```
intra-mart システム管理者 ユーザーコード変更

初期設定にミスってシステム管理者ユーザーコードが変なのになってしまったため、方法を模索しました。

テーブル **im_administrator**にユーザーコードが書いてあるので手動で変更します。
変更後のユーザーコードでシステム管理者としてログイン可能です。
パスワードは変更前のものをそのまま使えます。
強引な方法だけど、とりあえず問題なく動いてます。
良い子はマネしないでくださいね。
デザインについて

#良いデザインとは

良いデザインとは美しいレイアウトや表現などよりも先に、ユーザーにデザイナーの意図が伝わるかが重要である。芸術などと違って人によって受け取り方が違うということはあってはならず、万人に同じことが伝えられなければならない。
そのためにレイアウトや色を駆使して見やすいようにしたり、UIを強化していかなければならない。
EgretEngineで超簡単なゲームを作ってみよう (1) プロジェクト作成＆ビルド

# 連載記事「EgretEngineで超簡単なゲームを作ってみよう」

[(1) プロジェクト作成＆ビルド] (https://qiita.com/motoyasu-yamada/items/584c46ea7e05601e96fa)
[(2) 物理エンジン エクステンションの導入](https://qiita.com/motoyasu-yamada/items/c5facea39b0102d7a365)
[(3) タップでの操作の実装](https://qiita.com/motoyasu-yamada/items/2ff3762015daccd4ebd3)
[(4) 障害物の実装と各種カプセル化](https://qiita.com/motoyasu-yamada/items/6963428cb3ba5ffc7a64)
[(5) 書き出し編](https://qiita.com/motoyasu-yamada/items/013909a29e65f1f4ec1d)

---
# (1) プロジェクト作成＆ビルド
EgretEngineはAmazonで書籍を探しても、ネットで情報を探しても、日本語のものはまったく出てきません

ということで、EgretEngineの理解をすすめるために、超簡単なゲームを作ってみようと思っています。

昔から新しいプラットフォームやエンジンなどを試すときは「糸通し」的なゲームをつくるようにしています。

今回は、「糸を針穴に通す」のではなく、今時な「ボールをバスケットに入れる」ゲームにしてみます。

# 超簡単なこんなゲームを作ります
![BasketBallBoy.png](https://qiita-image-store.s3.amazonaws.com/0/302078/f821492e-be0b-e668-ce22-fa125b4666b5.png)


# はじめかた

## Egret Launcherを起動する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/67924370-3e73-8880-8f14-6a91b04d9ae3.png)


## Projectsタブを選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/440c9859-577a-fd38-5535-aca4b8b0c049.png)

## 新規プロジェクトを作成する

上記の画面の左端の「+ New Project」を押す

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/226b09d2-469c-3c9d-63d3-edc2239c6504.png)

## プロジェクトの基本情報を入力する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/42864b7c-3f17-77f0-4cd5-c6e3fc4041d6.png)

- ProjectNameに、自分のプロジェクト名を入力する。今回は「BasketBallBoy」
- ProjectTypeを、Egret Game Projectに切り替える。
- Rotationを、「Portrait」にする

それ以外は特にいじらずに「Create」ボタンを押してプロジェクトを生成する

## プロジェクトが作成されて統合開発環境「Egret Wing」が開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/e8281bca-aed1-c045-06ff-7fd7dd907e3e.png)

## 空のプロジェクトがビルドされて実行できることを確認する

- メインメニューのProjectを押下
- 開いたProjetメニューのDebugを選択

正しくビルドが終わりエミュレータが起動すると以下の画面が表示されます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/39ada43e-39c4-888e-8ba5-965b762e0439.png)

## ポートレート画面に切り替える
- 基本メニューの`横竖屏`を選択
- 開いたメニュー`垂直视图`(Portrait)を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/76a7847f-e298-da70-604d-569d0f775264.png)


# 単語集

|中国語|英語|
|----|----|
|视图| View|
|横竖屏|Horizontal & Vertical Screen|
|竖|Vertical|
|屏|Screen|
Swiftで画像のExifデータを書き換える

※ ここではSwiftをMac上でCLIプログラムとして書いています。iOS向けは一部読み替えが必要かもしれません。
※ Swift4です。
※ 一部うまく行ってなくて、困っています。

# やること

1. 画像を読み込む
2. Exifデータを書き換える
3. 保存する

# 手順

## 1. 画像を読み込む

CIImageを使います。
[こっち](https://qiita.com/kojiro_ueda/items/e03ed67d85a838706052)に少しだけ多めに書いています。

```swift
let image = CIImage(contentsOf: url);
```

## 2. Exifデータを書き換える

ExifデータはDictionary型なので、正確には、コピーを変更することになります。

```swift
var properties = image.properties;
var exif = properties["{Exif}"] as! [String: Any];
exif["DateTimeOriginal"] = "2000:01:01 12:30:00";
// 書き換えたexifをpropertiesに持たせる。
properties["{Exif}"] = exif;
```

## 3. 保存する

CIImageを保存するには、CGImageを経由する必要があります(他に方法ないのか？)
保存すると、なぜだかよくわからないのですが、画像のデータサイズが半分くらいになります(なので、Exifの書き換え"だけ"はできていません)

```swift
// CGImageを保存するための枠を用意する
if let dst = CGImageDestinationCreateWithURL(URL(fileURLWithPath: url, kUTTypeJPEG, 1, nil) {
  // CIImageをCGImageに変換するために必要
  let ctx = CIContext();
  // 画像とメタデータを枠にセットする
  CGImageDestinationAddImage(dst, ctx.createCGImage(image, from: image.extent)!, properties as CFDictionary);
  // 保存する
  CGImageDestinationFinalize(dst);
}
```

# まとめ
* CGImageを保存するときに、Exifデータなどのメタデータを渡すことができ、書き換えることもできる
* なぜか知らないけど、データサイズが半分くらいになる(見た目からはわからなかった)
    * `kUTTypeJPEG`ではない値を指定するのではないかとにらんでいます。

以上です。何かご存知の方いらっしゃいましたら教えてください。
[C#].Net Coreでexeを呼出す

# .NetCoreでexeを呼出す

## 環境
* .Net Core 2.1

## 呼出方法
.Net Frameworkと同様に「[System.Diagnostics.Process](https://docs.microsoft.com/ja-jp/dotnet/api/system.diagnostics.process?view=netcore-2.1)」クラスが利用できる

```C#:sample.cs
var proc = new System.Diagnostics.Process();
// exeファイルパス設定
proc.StartInfo.FileName = "exeへのフルパス";
// 引数設定
proc.StartInfo.ArgumentList.Add("引数");
// exe呼出
proc.Start();
// exeの終了を待つ
proc.WaitForExit();
```

## 参考
https://araramistudio.jimdo.com/2017/05/09/c-%E3%81%A7%E5%A4%96%E9%83%A8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B/
【覚書】WSLをリセットしたらネットワーク周りがリセットされる

pipでwikipedia-apiをインストールしようとした時にネットワークエラーになったので調査した時の覚書。

#前提
・WSLでUbuntuを使用。
・WSLのリセットしたらpipがエラー吐くようになり、pingが通らなくなっていた。
・nslookupで名前解決はできる。

#原因
リセットを行うとネットワーク周りの設定もクリアされていた。


##resolv.confの確認
```
$sudo vi /etc/resolv.conf
```
「イーサネット」のDNSになっていた。
リセット前はwifi側のDNSを使うように設定していたので変更。

```resolv.conf
nameserver 192.168.XXX.1
```


##interfacesの確認

```
$sudo vi /etc/network/interfaces
```

こちらは何も設定されていなかったので同様に下記を追加。

```
# ifupdown has been replaced by netplan(5) on this system.  See
# /etc/netplan for current configuration.
# To re-enable ifupdown on this system, you can run:
#    sudo apt install ifupdown
dns-servers 192.168.XXX.1
```


##hosts.confの確認

```
$ sudo vi /etc/host.conf
```

```host.conf
# The "order" line is only used by old versions of the C library.
order hosts,bind
multi on
```

order順にdnsが追加されていなかったので追加

```
order hosts,dns,bind
```


##nsswitch.confの確認

ついでに

```
$ cat /etc/nsswitch.conf
```

も確認しておく。

```nsswitch.conf
  :
hosts:          files dns
  :
```

ここはDNSを使用する設定になっていた。

設定の確認が終わったらpingの確認。
wikipedia-apiをインストールしようとすると

```
error: invalid command 'bdist_wheel'
```

と怒られるので、事前にwheelも入れておく。


#まとめ
・WSLのリセット後はネットワーク周りの確認を行うこと。
・頻繁にリセットするなら再設定用のバッチを作っておくと良いかも。


###参考
[WSL を使って Windows10 上で Linux を動かす](https://glodia.jp/2017/12/28/WSL/)
[ubuntuでapt-getが名前解決できなかった](http://kyuri.hatenablog.jp/entry/2017/06/27/110143)
Swiftで画像のExifデータから作成日時の情報を得る

※ ここではSwiftをMac上でCLIプログラムとして書いています。iOS向けは一部読み替えが必要かもしれません。
※ Swift4です。

# やること
1. 画像を読み込み、Exifデータを得る。
2. Exifデータから作成日時を取り出す。
3. 作成日時をDateオブジェクトに変換する。

# 手順

## 1. 画像を読み込み、Exifデータを得る。

画像の読み込みには、CIImageを使います。
また、Exifデータは `properties` プロパティの `{Exif}` という謎のキーに入っています。(`kCGImagePropertyExifDictionary`という定数が用意されているようです。)
けっこうキャストが必要で面倒です。

```swift
// load image.
let path = "/foo/bar";
let url = URL(fileURLWithPath: path);
let image = CIImage(contentsOf: url);

// get exif
let properties: [String: Any] = image.properties;
let exif = properties["{Exif}"] as! [String: Any];
```

## 2. Exifデータから作成日時を取り出す。

`exif` から作成日時を取り出します。
CGImage用の定数文字列が定義されているので、使います。

```swift
let dateTimeOriginal = exif[kCGImagePropertyExifDateTimeOriginal as String] as! String; // -> 2018:10:31 10:21:36
```

## 3. 作成日時をDateオブジェクトに変換する。

テキストが得られましたが、これではまだ「いつ」なのかをプログラムで知ることが難しいため、Dateオブジェクトに変換します。
変換については[【Swift】Dateの王道 【日付】](https://qiita.com/rinov/items/bff12e9ea1251e895306)というQiitaの記事が大変詳しいですが、一部引っかかるところがあると思うので、そこだけ書いておきます。

日時の文字列からDateオブジェクトを得るには、DateFormatterを使います。
DateFormatterはDateオブジェクトからTimeZone, Locale, フォーマットなどをもとに日時文字列を出力したり、逆に任意のフォーマットの日時文字列からDateオブジェクトを得たりできるクラスです。

なお、いろいろ試してみた結果として、どうやらタイムゾーンは考慮されないようなので、指定しても意味ないっぽいです。
出力にだけ関係あるのかな。

```swift
let formatter = DateFormatter();
formatter.locale = Locale(identifier: "en_US_POSIX"); // うまく説明できないのですが、これを指定することで、Exifの作成日時から変換できるようになります。
formatter.dateFormat = "yyyy:MM:dd HH:mm:ss"; // Exifに記載される作成日時のフォーマットを指定します。時間は24時間表記のため、"HH"を指定する必要があります。

let date = formatter.date(string: dateTimeOriginal)!;
```

# まとめ

* `CIImage`で画像を読み出す
* Exif情報は`CIImage#properties`の`"{Exif}"`というキーに入っている
* 作成日時はExif情報から`"DateTimeOriginal"`キーで得られる
* 作成日時のフォーマットは`yyyy:MM:dd HH:mm:ss`

以上です。よろしくお願いいたします。
ChefとAnsibleでのxml操作

ChefとAnsibleにおけるxml操作の例を示す。

#Chef

```ruby

require 'nokogiri'

file '/tmp/test.xml' do
  content lazy {
    x = File.open(path) { |f| Nokogiri::XML(f, &:noblanks) }

    x.at_xpath('/foo/bar').content = 'new_val'               # 値の設定
    x.at_xpath('/foo') << Nokogiri::XML::Node.new("bar2", x) # 子供の追加
    x.at_xpath('/foo/bar2'). content = 'val2'                # 値の設定

    x.to_xml
  }
end
```
Rubyのnokogiriライブラリーを使用する。
xmlファイルをNokogiri::XML::Documentクラスのオブジェクトとして読み込む。noblanksオプションは、読み込み時にxmlを読みやすくする為のブランクや改行を削除する。ブランクや改行が削除されていれば、最後のto_xml時に適切に整形される。
作成したオブジェクトに.at_xpathなどのメソッドを用いて、xmlのディレクトリーに相当するNokogiri::XML::Nodeオブジェクトを取り出し、そこに対して編集などの操作を行う。
.contentにより値を変更する。値としてnilを指定すると、値は削除される。
<<もしくは.add_child()により子供を追加する。ここで追加する内容は、Nokogiri::XML::Node.newにより作成されたもの。事前に値やその下位の構造を設定しておいてから追加しても良いが、ここでは追加後に値を設定している。
to_xmlにてxmlの文字列を構成する。戻された文字列がこのブロックの戻りとなり、fileリソースの内容となる。


##参考

- contentや<<(add_child)などの編集機能は以下におけるInstance Methodを参照
[Class: Nokogiri::XML::Node](https://www.rubydoc.info/github/sparklemotion/nokogiri/Nokogiri/XML/Node)

- at_xpathは以下のNodeとNodeSetの検索メソッドを参照
[Ruby製の構文解析ツール、Nokogiriの使い方 with Xpath](https://blog.takuros.net/entry/2014/04/15/070434)

#Ansible

```yaml
...

- name: python-lxmlのインストール
  yum:
    name: python-lxml

- name: 値の設定
  xml:
    path:  /tmp/test.xml
    xpath: /foo/bar
    value: new_val
    pretty_print: yes

- name: 子供と値の追加
  xml:
    path:  "/tmp/test.xml"
    xpath: "/foo"
    add_children:
      - bar2: val2
    pretty_print: yes
```

xmlモジュールを使用するには、前提としてlxmlが導入されていることが必要。
ここでは対象にCentOSを使用しているので、yumモジュールにてpython-lxmlを導入している。


##参考
[xml - Manage bits and pieces of XML files or strings](https://docs.ansible.com/ansible/latest/modules/xml_module.html#xml-module)


#例

##元xmlファイル

```xml:/tmp/test.xml
<?xml version="1.1" encoding="UTF-8"?>
<foo>
  <bar>val</bar>
</foo>
```

##更新後xmlファイル

```xml:/tmp/test.xml
<?xml version="1.1" encoding="UTF-8"?>
<foo>
  <bar>new_val</bar>
  <bar2>val2</bar2>
</foo>
```


##Chefのログ出力例

```
  * file[/tmp/test.xml] action create
    - update content in file /tmp/test.xml from c2d9db to 9215b3
    --- /tmp/test.xml	2018-10-24 04:44:49.442544000 +0000
    +++ /tmp/.chef-test20181024-46716-1rk4gup.xml	2018-10-24 04:44:49.452544000 +0000
    @@ -1,5 +1,6 @@
     <?xml version="1.1" encoding="UTF-8"?>
     <foo>
    -  <bar>val</bar>
    +  <bar>new_val</bar>
    +  <bar2>val2</bar2>
     </foo>

```


##Ansibleのログ出力例

```
TASK [python-lxmlのインストール] ****************************************************************
changed: [ansible-xml-centos-7]

TASK [値の設定] ******************************************************************************
changed: [ansible-xml-centos-7]

TASK [子供と値の追加] ***************************************************************************
changed: [ansible-xml-centos-7]
```
emacsでjsのシンタックスハイライト(syntax highlight)を効かせる

ELPA追加

パッケージリストからjs2-mode選択してインストール

init.elに下記追加

;; js2-modeの設定
(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
(add-to-list 'auto-mode-alist '("\\.es6\\'" . js2-mode))

※拡張子がes6のため
camelcase-keys で snake_case 等を camelCase に変換する

バックエンドからのレスポンスはスネークケースの場合が多い。
しかし、フロント側では通常キャメルケースで扱うことを前提としている。
そこで camelcase-keys を使ってレスポンスを変換する。

https://github.com/sindresorhus/camelcase-keys

```shell
$ npm install camelcase-keys
```

以下の例では元データがケバブケースしかないが、もちろんスネークケースもキャメルにできる。

```js
import camelcaseKeys from 'camelcase-keys'

// Convert an object
camelcaseKeys({'foo-bar': true});
//=> {fooBar: true}

// Convert an array of objects
camelcaseKeys([{'foo-bar': true}, {'bar-foo': false}]);
//=> [{fooBar: true}, {barFoo: false}]

camelcaseKeys({'foo-bar': true, nested: {unicorn_rainbow: true}}, {deep: true});
//=> {fooBar: true, nested: {unicornRainbow: true}}
```
PHPは事前に型を検査する(こともある)

動的型付け[^1]とか静的型付き[^2]とか私には正直わかりません[^3]が、[PHPは実行前にコンパイルフェイズがある](https://qiita.com/tadsan/items/f037095e7f07b54d3fea)[^4]ので、動作させる前に型をチェックすることも、実はあります。

```php
<?php

echo "Foo";

if (false) {
    1 + [];
}

echo "Bar";
```

**3v4lでの実行結果**: https://3v4l.org/k6vLn

このコードはPHP5以前では`FooBar`と出力されますが、PHP7では`Fatal error: Unsupported operand types`とエラーが出ます。これは先の記事で紹介したコンパイル時のエラーといふことです。

注意されたいのは、`if (false) array_merge(1);`のような文はこれと違って何の警告も出ません。飽くまで[演算子](http://php.net/manual/ja/language.operators.php)式のみです。

つまり、このような関数はPHPのコンパイル時には警告されません。

```php
function foo(array $a, int $b): bool
{
    return $a + $b;
}
```

まとめると、「PHPは実行しないと型検査されない」は正確には誤りで、「PHP(7以降)はリテラルの二項演算に限って型検査し、コンパイルエラーにする」となります。ただしPHPは実行時にその都度ファイルを読み込むので、コンパイルエラーは実行時エラーと大差ないように見えるのが難しいところです。

## PHPの静的検査について

### `php -l`

PHPの一番単純な静的検査は`php -l`です。プロジェクトをGit管理してる場合は、このようなシェルコマンドで全ファイルについてチェックすることができます。

```
git ls-files '*.php' | xargs -I{} php -l {}
```

例ですが、全ファイルの検査に時間がかかる場合はこのようにすることで`origin/master`との差分があるファイルだけを検査できます。

```
git fetch && git diff origin/master HEAD --name-only --diff-filter=ACMR | (grep -E '.php$' || true) | xargs -I{} php -l {}
```

上記の通り繰り返しますが、PHPは実行時にその都度ファイルを読み込むので、コンパイルエラーは実行時エラーとして現れます。そのためデプロイ時に差分だけでも検査することは大変重要です。ユーザーのブラウザにまっしろな画面や壊れたHTMLを見せるのは超カッコワルイですからね。

### Phan, PHPStan

表現は異なりますが、どちらでも検出できます。

```Phanの出力
src/functions.php:5 PhanTypeInvalidRightOperand Invalid operator: left operand is array and right is not
```

```PHPStanの出力
 ------ -----------------------------------------------------------------
  Line   functions.php
 ------ -----------------------------------------------------------------
  5      Binary operation "+" between array and int results in an error.
 ------ -----------------------------------------------------------------
```

PhanやPHPStanについては過去にいろいろ書きました。

 * [PHP 5分でわかる静的解析入門 / 黒點 さん - ニコナレ](https://niconare.nicovideo.jp/watch/kn1624)
 * [はじめてのPHPDocと型 / 黒點 さん - ニコナレ](https://niconare.nicovideo.jp/watch/kn1774)
 * [Phan静的解析がもたらす大PHP型検査時代 - pixiv inside [archive]](https://devpixiv.hatenablog.com/entry/2016/11/11/202656)
 * [PhanでPHPコード静的解析2018 #phpstudy / 黒點 さん - ニコナレ](https://niconare.nicovideo.jp/watch/kn3096)
 * [PHPで開発が捗るリアルタイムエラーチェック - Qiita](https://qiita.com/tadsan/items/16aaaaaf4e99d0a994c9)

PHPStanについてはあんまり触れてないですね。まあ上記のように`git`で最終リリースからの差分だけとってプルリクエストのコミットごとに検査するなど比較的高速にCI回せて便利です。あとVimとかEmacsのバックエンドとしてインラインエラーチェックができるのですこぶる便利です。

## まとめ

 * PHPの処理系(7以降)は、リテラルの二項演算に限ってFatal Errorを発生させます
    * この種類のエラーは `php -l` で検査することが可能です
 * PHPの処理系は型に関して詳細な静的解析はしません
    * 代りにPhanやPHPStanを適宜利用することで事前に型チェックができます
    * 擬陰性はありますが、それぞれ発展途上なのでバージョンアップごとに改善があります

PHPは弱い動的型付け？ 知らんなあ[^5]。静的解析しよう[^6]。

[^1]: dynamic typing, 実行時型検査, 動かしながら型を調べるイメージ
[^2]: statically typed, 実行前型検査, 動かす前に変数や関数の型を決めてしまうイメージ
[^3]: ある程度わかるし説明できるつもりですが、わからなくなりました
[^4]: この表現はかなり語弊があるのですが、あるPHP入門書にこの記事を誤読したかのようなコラムが掲載されて、私はかなり落ち込みました
[^5]: @tadsanは実行時型チェックが大好きです
[^6]: 実際には静的型解析によってあらゆる問題を解決できるわけではなく、実際の用途と異なる擬陰性が報告されることも多くあるなど難しいところがあります
emacsでパッケージ管理について調べたことのメモ

https://www-he.scphys.kyoto-u.ac.jp/member/shotakaha/dokuwiki/doku.php?id=toolbox:emacs:package:start
https://www.wagavulin.jp/entry/2016/07/04/211631
https://github.com/yasuyk/helm-git-grep
https://kiririmode.hatenablog.jp/entry/20171224/1514069984
補数と負数について

# 1の補数と2の補数

日常でよく使う10進数ならば

* 足しても桁が上がらない最大値が`9の補数`
* 足して桁が上がる最小値が`10の補数`

`1234`を例とすると、

* 9の補数は`8765`（`1234 + 8765 = 9999`）
* 10の補数は`8766`（`1234 + 8766 = 10000`）

2進数ならば

* 足しても桁が上がらない最大値が`1`の補数
* 足して桁が上がる最小値が`2`の補数

`1011`を例とすると

* 1の補数は`0100`（`1011 + 0100 = 1111`）
* 2の補数は`0101`（`1011 + 0101 = 10000`）

# 負数を含む計算

どうして負数を含む計算が補数を使ってできるのか。まず10進数の計算で考えてみる。
`23 - 538` を例とする。（結果は`-515`）
`23`の方が小さいので、こちらに対して補数を設定する。

```
x = 023 - 538
x = (1000 - 977) - 538
x = 1000 - 977 - 538
x = 1000 - (977 + 538)
x = 1000 - 1515
x = -515
```

2進数も同じように考えられる。
`11 - 1010`を例とする。（結果は`-111`）
`11`の方が小さいので、こちらに対して補数を設定する。

```
x = 0011 - 1010
x = (10000 - 1101) - 1010
x = 10000 - 1101 - 1010
x = 10000 - (1101 + 1010)
x = 10000 - 10111
x = -0111
```
【Unity】Addressable Assets Systemについて調べてみた

# はじめに
きっかけになったのはこちらの記事です
[Unity2018時代におけるAssetBundle問題への対処法について](https://qiita.com/k7a/items/7c20ae8a7e8b881f3b56)
記事によると、Unity2018からAddressable Assets SystemというAssetBundleを扱う新しい仕組みが追加されたのと、またAssetBundleManagerは非推奨となるため今後の開発をどうするかという内容でした。

# Addressable Assets Systemとは
[【Unite 2018 Tokyo】そろそろ楽がしたい！新アセットバンドルワークフロー&リソースマネージャー詳細解説](https://www.slideshare.net/UnityTechnologiesJapan/unite-2018-tokyo-96499382/UnityTechnologiesJapan/unite-2018-tokyo-96499382)
> • Resourcesのシンプルさとアセットバンドルの自由度を実現 
> • ロードの依存関係や非同期処理を、複雑なコードを書かずに実現 
> • (Scriptable Build Pipelineで) ビルドやプレイモード時の動作もカスタマイズ可能に 
> • 開発を助けるツール類の提供 

今までAssetBundleを導入するときに自前で実装していた、Assetのダウンロード処理やパスの管理、実行環境によってローカルもしくはサーバからファイルを取得するか切り替えたりする処理を、Unity公式から提供してもらえる感じでしょうか。

# 移行するべきか
こちらは今までAssetBundleを全く使ったことがなく、一から導入する場合には使ってもいいかもしれないですが、無理して移行はしなくてもいいかと思いました。
理由としては
・まだプレビュー版のため頻繁に更新されており、いま対応しても正式リリースされたときには仕様が変わっている可能性がある
・iOSでエラーが起きるなどのバグもあるらしく、自前で実装したときのようにコードを追えないので修正が困難
・コンテンツカタログ（今までファイルごとに分けられていたAssetBundlePathのようなもの）が一つにまとめられているため、グループで開発するときに競合が発生する可能性がある
・内部的にはResources、StreamingAssets、AssetBundleを使っているので、今までより動作が軽くなったりするわけではない

以上、Addressable Assets Systemについて調べてみた結果でした


参考記事
[今更誰も教えてくれない、Unityにおけるリソース読み込みについての基礎知識](https://qiita.com/k7a/items/df6dd8ea66cbc5a1e21d)
Homebrew で openjdk8 インストールの巻

# 手順

次の記事を参考にしてインストールを試みるも失敗
<img width="522" alt="スクリーンショット 2018-10-24 14.36.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/158071/7176b027-74b2-a1f0-1450-74b7311870bc.png">
reference: [How to install openjdk with brew - Homebrew](https://discourse.brew.sh/t/how-to-install-openjdk-with-brew/712/4)

```bash
brew tap AdoptOpenJDK/openjdk
brew install adoptopenjdk-openjdk8
```

> 2020/07/05 削除
> brew の Formula に、Ver.10 しかないのが原因らしい。そもそも Homebrew に詳しくないので Formula が必要なことしか分からず。
> https://github.com/AdoptOpenJDK/homebrew-openjdk/tree/master/Formula
>
> JDK14をインストールをしたときに、Formulaというディレクトリ自体がなくなっていることに気が付きました。
> https://github.com/AdoptOpenJDK/homebrew-openjdk


別の名称でインストールするとエラーメッセージに、実行が必要なコマンドが表示されていた。順を追って実行して、Formula ファイルを作成することで、無事にインストールができました。

```bash
brew install adoptopenjdk/openjdk/adoptopenjdk-openjdk8

# 表示されたコマンド① - 過去の履歴を見るため
Warning: adoptopenjdk/openjdk is shallow clone. To get complete history run:
  git -C "$(brew --repo adoptopenjdk/openjdk)" fetch --unshallow

# 表示されたコマンド② - 削除された Formula を見るため
To show the formula before removal run:
  git -C "$(brew --repo adoptopenjdk/openjdk)" show c193c3f^:Formula/adoptopenjdk-openjdk8.rb

# Formula の場所探し
sudo find /usr/local -name Formula | grep openjdk

# Formula ディレクトリに移動
cd /usr/local/Homebrew/Library/Taps/adoptopenjdk/homebrew-openjdk/Formula

# ver8 の Formulaファイル作成
git -C "$(brew --repo adoptopenjdk/openjdk)" show c193c3f^:Formula/adoptopenjdk-openjdk8.rb > adoptopenjdk-openjdk8.rb

# インストール再挑戦
brew install adoptopenjdk/openjdk/adoptopenjdk-openjdk8
```

# 正式な(?)インストール方法

上記の方法でインストールしてから、githubに正式なインストール方法の記載を発見。

```bash
brew tap homebrew/cask-versions
brew cask install adoptopenjdk8
```
<img width="632" alt="スクリーンショット 2018-10-24 14.55.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/158071/db5be5b2-b9ba-49f9-87c3-dad6376eb36b.png">

### 2019/01/07 追記

新しいメンバーからOpenJDKがインストールできないと問い合わせを受けました。前回、追記した方法でもインストールできそうだけど別のコマンドによるインストール方法を発見。明日、試してもらおう。

```java
brew tap AdoptOpenJDK/openjdk
brew cask install <version>
```

<img width="573" alt="スクリーンショット 2019-01-07 23.55.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/158071/d055fbce-9505-7ab7-91f1-bed3e17dc414.png">

### OpenJDKのインストールディレクトリ（2019/01/14 追記）

```bash
/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk
```

# 参考サイト
- [How to install openjdk with brew - Homebrew](https://discourse.brew.sh/t/how-to-install-openjdk-with-brew/712/4)
- [AdoptOpenJDK/homebrew-openjdk: AdoptOpenJDK HomeBrew Tap](https://github.com/AdoptOpenJDK/homebrew-openjdk)
- [HomeBrew で AdoptOpenJDK をインストールしてみた（訂正版）](https://qiita.com/gishi_yama/items/9cdb3d95ee7f25b8018f)
- [AdoptOpenJDK - HomeBrew TAP](https://github.com/AdoptOpenJDK/homebrew-openjdk)
嫌いな言語として、Javaが対象となった理由

# はじめに

猫は、好きな言語としてC#、嫌いな言語としてJavaをプロフィールに書いています。別に、Microsoftに愛着を持っているかというとそうでもないです。C#を触る前は、C言語のポインタの苦痛に苛まれ、逃げた先のJavaは以下の通りの理由で嫌いになり、Delphiには感銘を受けていたので、この言語が好きになったという理由の1つに上がるかもしれません。このQiitaにはたくさんの経験豊富なプログラマーさんもいるので、もしかすると同調してくれる方や嫌らしく貶してくれるくれる方もいると思うので、嫌いになった理由を書かせていただきます。

## バイト配列という基本操作に苦慮する

バイト配列、1byte(8bit)のデータをいくつも並べたデータ列のことです。通常、バイトは0～255までの数値を扱います。
当然のごとく、C言語をはじめほとんどの言語ではバイト配列を簡単に扱える...はずです（経験ある言語では大体できる）

```c
unsigned char color[3];
```

であったり

```c#
byte[] color = new byte[3];
```

であったり、

```php
$color = [ 255, 255, 255 ]; // (ん？なんか違うきがする）
```

であったり、書き方は変わったりするかもしれません。でも、ちゃんと0-255までを扱ってくれる配列を作れるものです。

ところが、嫌いになった言語で、C#言語のように

```c#
byte[] color = { 126, 127, 235 };
```

と書きたいと思っても、Javaでは思った通りの結果は得られません。
Javaはunsigned型の定義（通称、符号無し）ができません。クラスを使うか、shortやintを使う必要があるとのことで、変換やらでいろいろ苦労し、使いたくない！って思ったわけです。
ただ、最近のJavaはもしかすると出来るようになってるよ！という反応があるかもしれません。かれこれ、10年以上触れていないので...どうなのでしょうか。

ということで、嫌いになった原因の一つであります。（まだある...）

## 階層＋クラス＝ファイル

1つのファイルに定義できるクラスは基本1つであるということ。サブクラス的なものは、たしか内蔵できたと思うのですが、基本は1つでした。クラスを作ればファイルが増える。ろくなこともしない、ただのインターフェイス的なクラスを作っても、試作クラスを作るときも....ファイル量産です。そして、階層も影響することもあって、苦痛でした（※10年前の話です）。
今もそうなのかな...。

## インストールとIDEが苦痛

当時は開発にEclipseを使っていました。今はもはや主流ではないのかもしれませんが、これまたWindows殺しで、コンパイル動かすたびに死ぬという。コンソールでしなさいと言わんばかりの嫌がらせ。その前に、JDK入れるまでに死んでいた気がする...。

この頃に、Microsoft .NET Framework 1.0 がリリースされ、同時期に触っていたのですが、やはりその結果、VS最強だなぁという結論に至り、結局Java使うことなくC#のWindowsFormで遊ぶようになり、そのままDelphiのWindowsアプリ開発楽ちんすぎるスタイルやPHP、D言語等ふらつきながら言語そのものを楽しんでいたら、Javaを使うことは数年なくなりました。

## Android のJava

お仕事でJavaを使うことが数年前にありました。
そう、再び byte 配列で悩まされ、Android Studio がまだなかったので、Eclipseで泣かされ、結局大っ嫌いになりましたとさ...。

## まとめ

Oracleに買収され、有償化され、振り回されてるJava言語。そして様々な言語の良い点を取り入れ発展しまくる C# に...追いつこうとしてよくわからない言語仕様になってるJava...。もし、Androidでのネイティブ開発を依頼されたら、KotlinかXamarin(C#)押しでいきます。Javaはもう、お腹いっぱいです、ということで、嫌いになった原因でした。
VMware ConverterでCentOS7をV2V後にNICが認識されない時の対処法

# 結論
Converterのオプション設定で NICのController typeを「Auto」→「E1000」とする
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/306217/18e08198-067e-c45f-5b3f-81b2a1776939.png)

# 環境
- vmware converter 6.2.0 build-8466193
- ホスト（Source）：ESXi6.0.0
- ホスト（Destination)：ESXi4.1.0
- 移行対象: CentOS7.2

# 現象
NICのController typeをデフォルトの「Auto」のままConvertすると
Convert完了後に物理ネットワークデバイスが認識されない

```
[root@xxx] nmcli d
DEVICE   TYPE       STATE      CONNECTION
lo       loopback   unmanaged  --
```
→ループバックのみ表示される状態

# 対処後
```
[root@xxx] nmcli d
DEVICE       TYPE       STATE         CONNECTION
eno33554960  ethernet   disconnected  --
eno16777736  ethernet   disconnected  --
lo           loopback   unmanaged     --
```
→NICがenoXXXとして表示された

上記の状態では /etc/sysconfig/network-scripts/ifcfg-xxx は作成されていない。
nmtuiコマンドで設定すると「ifcfg-設定したプロファイル名」でファイルが作成される。

```
[root@xxx] nmtui
適宜設定（プロファイル名はデバイス名とした）

[root@xxx] ls /etc/sysconfig/network-scripts | grep ifcfg-*
ifcfg-eno33554960　←作成される
ifcfg-lo

[root@xxx] ifup eno33554960
```

→無事起動

# TIPS
ESXi付属のブラウザコンソール（VMware ESXi Host Clientの仮想マシンコンソール）でファイル編集する際、「:」が打てない事象が発生した。以下で対処。

- [クラウドコンソールでviを開いたときに『:』（コロン）が打てなくて困った時のこと](https://qiita.com/kitaji0306/items/ccd856195902c4b1df88)


# 参考
- [VMware上でcloneしたCentOSのNICが認識されない時の対処法](https://qiita.com/asahi0301/items/2bcc92afa131eab5519a)
- [【環境構築】VMwareでCentOS7のNICが刺さらなくて困った]
(http://mikaduki.info/development/1428/)
Amazon DynamoDB ハンズオン

簡単なテーブルを作成、データを追加、データをスキャンしてクエリを実行するまでの手順を紹介します。

---
###1.NoSQL テーブルを作成する###
Amazon DynamoDBを開き、「テーブルの作成」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/00e92c77-16b5-949e-8012-5c979d1dcc20.png)

以下のとおり入力し「作成」をクリックします。
・テーブル名：music
・プライマリキー：artist　
*キーは、複数のパーティション間でのデータの分散により、スケーラビリティを確保するために使用されます。*
*広範囲の値を持つ属性を選択するとともに、アクセスパターンが均等に分散されるようにすることが重要です。*
・ソートキー：SongTitle
・「デフォルト設定の使用」：OFF
*DynamoDB Auto Scaling を有効にすると、リクエストボリュームに応じてテーブルの読み取りおよび書き込みのキャパシティーが変更されます。*
*DynamoDB は DynamoDBAutoscaleRole という IAMロールを使用して、ユーザーに代わって Auto Scaling プロセスを管理します。*
*このロールは、アカウントで初めて Auto Scaling を有効にしたときに DynamoDB により作成されます。*
・そのほかの項目はデフォルトのままにする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/1daedd92-2035-7d31-9e65-3f32cc15972d.png)


###2.NoSQL テーブルにデータを追加する###
「項目」 タブで、「項目の作成」 を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/e4b1b2dd-db1c-590e-a7b1-9c9181b163c6.png)

以下のとおり入力し、「保存」します。
・Artist：namieamuro
・SongTitle：hero
上記、Artist、SongTitleをいくつか作成してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/be62d17d-0516-9878-1a66-826faaa0381b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/7e5d4b39-292c-22cb-003b-d52a68da58f9.png)


###3.NoSQL テーブルでクエリを実行する###
クエリオペレーションを使用してテーブル内のデータを検索します。
DynamoDB では、クエリオペレーションは効率が高く、キーを使用してデータを検索します。
スキャンオペレーションでは、テーブル全体を走査します。

「クエリ」から、パーティションキー：namieamuro で検索し、「開始」をクリックすると結果が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/0203b8ad-928e-4911-b7b4-01fdce492c55.png)

いろいろ試してみましょう。
nuxtプロジェクトにESLint導入

#前提
 - 動作確認環境
   - Windows10, VSCode
   - Node v8.11.3
 - 参考
  -  [Nuxt公式　ガイド>開発ツール＞ESLint](https://ja.nuxtjs.org/guide/development-tools/#eslint)
  - [[Qiita] Nuxt.js + TypeScript + Sass + ESLint 事始め](https://qiita.com/ryota-yamamoto/items/4b06ef51926df1bdbae8#eslint) 
 
# Install and Set up 

## install Package
```bash
yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
```
## .eslintrc.jsの作成
プロジェクトのルートに追加

```javascript:.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    mocha:true,
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    "eslint:recommended",
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  // *.vue ファイルを lint にかけるために必要
  plugins: [
    'vue'
  ],
  // ここにカスタムルールを追加します。
  rules: {
    "semi": [2, "never"],
    "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "prettier/prettier": ["error", { "semi": false }]
  }
}
```
## package.jsonにコマンドを追加
```javascript:package.json
"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}
```

## lint , lintfix実行テスト
> \>yarn run lint
![image.png](https://qiita-image-store.s3.amazonaws.com/0/158724/8deb75a2-659a-8704-d4d4-98cdae24652e.png)

1501 problemsが発見されたらしい

> \>yarn run lintfix
![image.png](https://qiita-image-store.s3.amazonaws.com/0/158724/2262fabf-145e-775a-eafe-eb7bbdc95d4c.png)

ソースが沢山修正されて、83 problemsだけ残った

# チェックを無効にする方法
https://qiita.com/blajir/items/82127aaa57e4d73a8389

一行だけ無効にする

```
 // eslint-disable-line
```

複数行の無効

```
 /* eslint-disable */

 /* eslint-enable */
```
React(Redux)のディバッグ環境を整える


デバッグ環境の整え方のメモ。

## React

いくつかやり方がありますが、ChromeのExtension使うのが一般的。

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

特に何も難しいことはない。インストールして、Reactが使われてるサイトを見れば、stateとの中身とか見れます。

## Redux + Redux

こちらもいくつかのツールが存在しますが、[React DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)を利用するのが一般的な感じ。但し、Chromeにツールを入れただけでは何も見えず、コードの中に必要な記述を行う必要がある。

コードはcreateStore()に埋め込むが、middlewareを利用するかによって記述が異なる。
以下はミドルウエアを利用する場合の記述。

>どちらも覚えるのめんどいので、私は下記で統一しています。

私はcreateStoreってファイル作ることが多いのですが、下記のように記述しています。

```js
import { createStore as reduxCreateStore, applyMiddleware, combineReducers, compose } from "redux";
import { todoReducer } from "./reducers/Todo";

//for Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function createStore() {
    const store = reduxCreateStore(
        combineReducers({
            todo: todoReducer,
        }),
        composeEnhancers(applyMiddleware(
            //thunk,
        ))
    );

    return store;
}
```


## ReactNative + Redux

次にRactNativeの環境。これもいくつかの方法があるようだが、[remoteデバッグ専用のツール](https://github.com/zalmoxisus/remote-redux-devtools)（コード側）を利用する。

まず、デバッグしたいプロジェクトにツールをインストールする。

```bash
npm install --save-dev remote-redux-devtools
```

Reactのときと同様にcreateStore()内に利用のための記述を追加する。
こちらもMiddlewareがあるかないかで記述が異なる。


```js
import { createStore as reduxCreateStore, combineReducers, compose, applyMiddleware } from "redux";
import navReducer from "./reducers/navReducer";
import userReducer from "./reducers/userReducer";

import composeWithDevTools from 'remote-redux-devtools';

export default function createStore(){
    const store = reduxCreateStore(
        combineReducers({
            nav: navReducer,
            user: userReducer
        }),
        composeWithDevTools(applyMiddleware(
            //thunk
        ))
    );
    return store;
}
```

デバッグツールはChrome Extensionがそのまま利用できるが、Open Remote DevToolを選択する必要がある。
開発環境だけ有効にするとか対応が必要なようだけど、とりあえず以上です。
Windows 10でTail -f を利用する

手順
1.WSLを有効化
Windowsの機能の有効かまたは無効化より
Windows　Subsystem for Linux
を有効化する
2.Microsoft StoreからUbuntuをインストール
3.Ubuntu初期起動時の設定
username:lin
password:lin
・最新化
sudo apt update
・nkfインストール
sudo -i apt-get install nkf
4.Tail -fを利用
tail -f XXXX.log | nkf -u -u