OmniAICreator/Qiita-1.07M huggingface dataset:
boxにgitリポジトリを作る

## はじめに
勤め先でbitbucketが使えるんですが、一人での作業も多いのでbitbucketにリポジトリを作るほどでもないプロジェクトもまあまああります。
それで、そのプロジェクトのバックアップをとろうとした時に社用のboxにプロジェクト丸ごとあげたらnode_modulesのサイズがでか過ぎてアップロード終わらねぇ！なんてことがありました。

色々模索した結果、[Dropboxにgitリポジトリを作成する方法](http://vdeep.net/git-dropbox)があったので、それを参考に社用のboxの同期フォルダーにgitリポジトリを作成するコマンドを作成してみました。
## 環境
- macOS High Sierra
- bash
- fish

Winの方は適宜読み替えてください🙇‍

## やり方
ローカルのリポジトリを作成してプロジェクトでリモートを追加するのは結構簡単で、

box側で

```bash
# /Users/<USER_NAME>/Box Sync/
mkdir -p git/<PROJECT_NAME>
cd git/<PROJECT_NAME>
git init --bare --shared
```

を実行し、プロジェクト側で

```bash
git remote add box "/Users/<USER_NAME>/Box Sync/git/<PROJECT_NAME>"
```

これで、boxをリポジトリとして使えるのですが、毎回これをやるのも面倒なんでコマンド化します

```bash
create-box-git () {

    echo "start"

    PROJECT_DIR=$PWD
    NAME=`basename $PWD`
    BOX_GIT_PATH="/Users/<USER_NAME>/Box Sync/git"
    GIT_PATH="$BOX_GIT_PATH/$NAME"

    cd $BOX_GIT_PATH
    mkdir $NAME
    cd $NAME
    git init --bare --shared
    cd $PROJECT_DIR

    if [ -d ./.git ]; then
        echo "git あるよ"
    else
        echo "git ないよ"
        git init
    fi

    git remote add box $GIT_PATH
    touch .gitignore
    echo "sucsess!"
}
```

これを`~/.bash_profile`に書き加えます。

<details><summary>fishの場合はこちら</summary><div>

```fish
function create-box-git
    echo "start"

    set project_dir $PWD
    set name (basename $PWD)
    set box_git_path "/Users/<USER_NAME>/Box Sync/git"
    set git_path "$box_git_path/$name"

    cd $box_git_path
    mkdir $name
    cd $name
    git init --bare --shared
    cd $project_dir

    if test -d ./.git
        echo "git あるよ"
    else
        echo "git ないよ"
        git init
    end

    git remote add box $git_path
    touch .gitignore
    echo "sucsess!"
end
```

これを`.config/fish/config.fish`に書き加えます

</div></details>


## まとめ

これでまめにプロジェクトのバックアップができるので、社用のmacがおかしくなっても安心して作業できます！

どっちかというと、gitの勉強というより、bashやfishのスクリプトの勉強の方が時間かかった気がしますが...😅

## 参考
- [DropboxにGitの共有リポジトリを作成する手順 | vdeep](http://vdeep.net/git-dropbox)
- [Dropboxを使ってGit環境を整えるススメ｜合同会社チームサンタ](http://teamsanta.info/web/722/)
- [fish shellチュートリアル](http://fish.rubikitch.com/tutorial/)
HomebrewにGTK+2用のGlade3を導入する

# 現状
* 2018.6.10 現在、Homebrewでインストールされる glade と pygtk は、以下のようにGTK+のバージョンが合わない。
    * glade 3.22.1  GTK+3
    * pygtk 2.24.0  GTK+2
* Glade2 + PyGTK2 で書かれた過去のソフトウェアをメンテナンスするために…
    * Glade2形式のファイルからGtkBuilderに移行して、Glade3で編集できるようにしたい。
    * コストを考慮してGTK+3への移行はしたくない。

# 獲得目標
* HomebrewでGTK+2対応のGlade3を使えるようにする。

# 方法
* GladeがGTK+2をターゲットにしていたのはバージョン3.8までなので、gladeのFormulaを参考に3.8系列の最新版（現時点で3.8.6）をインストールできるようにする。

# すんなりいかなかった点
* glade3-3.8.6のコードが、gtk-mac-integrationの最新版の変数名、関数名の変更をフォローしていなかったため、Formula内でinreplaceを用いて改変する必要があった。

# できあがったFormula
* 余計な記述などリファクタリングの余地はあると思われるが、取り敢えず動く。

``` glade38.rb
class Glade38 < Formula
  desc "RAD tool for the GTK+ and GNOME environment"
  homepage "https://glade.gnome.org/"
  url "http://ftp.gnome.org/pub/GNOME/sources/glade3/3.8/glade3-3.8.6.tar.xz"
  sha256 "aaeeebffaeb3068fb23757a2eede46adeb4c7cecc740feed7654e065491f5449"
  revision 1

  depends_on "pkg-config" => :build
  depends_on "intltool" => :build
  depends_on "itstool" => :build
  depends_on "docbook-xsl" => :build
  depends_on "gobject-introspection" => :build
  depends_on "gettext"
  depends_on "libxml2"
  depends_on "adwaita-icon-theme"
  depends_on "hicolor-icon-theme"
  depends_on "gtk+"
  depends_on "gtk-mac-integration"

  def install
    # Find our docbook catalog
    ENV["XML_CATALOG_FILES"] = "#{etc}/xml/catalog"

    system "./configure", "--disable-debug",
                          "--disable-dependency-tracking",
                          "--prefix=#{prefix}",
                          "--enable-gladeui",
                          "--enable-introspection"

    inreplace "src/glade-window.c" do |s|
      s.gsub! "GtkOSXApplication", "GtkosxApplication"
      s.gsub! "GTK_TYPE_OSX_APPLICATION", "GTKOSX_TYPE_APPLICATION"
      s.gsub! "gtk_osxapplication_", "gtkosx_application_"
    end

    system "make" # separate steps required
    system "make", "install"
  end

  test do
    system "false"
  end
end
```

# 簡単に利用するには
* 私のリポジトリをタップして使うこともできます :grinning:

``` Terminal.app
$ brew tap naito/ecell
$ brew install glade38
```
void Start()はprivateかpublicか？

# void Start()

いろんなUnityのサンプルソースを見ていると、
`void Start()`
と書いてあることがほとんどなんですが、たまに
`public void Start()`
とも書いてあったりします。publicを省略した場合はprivate扱いのはずなので、これらは違うメソッドです。…でも動く。

こういう時は親クラスを見れば済む話なので、MonoBehaviourをチェック。…ない。Behaviourにもない。ComponentにもObjectにもない。どこにも定義されてない！！どういうこっちゃ？？

ということで、正解はと言いますと、

**引数なしの"Start"という名前のメソッドであればUnity的にはどっちでもいい**

です。

どうやら、Unity内部から呼ばれるメソッドに関しては、public,private関係なく単純に名前解決しているだけのようで、AwakeやUpdateはもちろん、コマンドラインからメソッドを指定する場合も同様な挙動を示します。調べるまでは、MonoBehaviourのvirtualなStart()をオーバーライドしているのかと思ってました(定義されていないのでコード補完されないのも納得)。

でもこれ、Unityが裏技を使っているということではなく、C#の言語仕様(実装仕様？)的に許されておりまして、

```C#:クラス実装例
public class HogeClass
{
    private void HogeMethod()
    {
        Debug.Log("Hoge!!");
    }
}
```
```C#:呼び出し側
var instance = new HogeClass();
var method = instance.GetType().GetMethod("HogeMethod", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic);
method.Invoke(instance, null);
```

という感じにすると、publicでもprivateでも自由に呼び出すことが可能です。

**C#怖っ！！**

# おまけ
ついでに、privateなstaticメソッドはこんな感じで呼べます。

```C#:クラス実装側
public class HogeClass
{
    private static void StaticHogeMethod()
    {
        Debug.Log("Static Hoge!!");
    }
}
```
```C#:呼び出し側
var staticMethod = typeof(HogeClass).GetMethod("StaticHogeMethod", System.Reflection.BindingFlags.Static | System.Reflection.BindingFlags.NonPublic);
staticMethod.Invoke(null, null);
```

privateでもコマンドラインからは呼べてしまうため、同僚がうっかりprivateで書いてしまったメソッドを内部から呼ぶ場合は、本人が直してくれるまではこうして呼びましょう。(実話)
webcam とscreen recorderを一緒に使う方法

##simple screen recorderにない機能　
内側カメラを設定してもそれを映し出す機能がついていにので、その映し出す機能が付いている
ものもセットのソフトを探しています。
候補としては[こちら](https://askubuntu.com/questions/536563/how-to-record-the-screen-and-webcam-at-the-same-time?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)が考えられます。
kazamにには録画する機能と、内側カメラを使う機能が搭載されている模様です。
その他にも、ウィンドウズで使っていたアプリが、ブラウザ上で無料で使えるものがあったと思うので、それを使ってみようかと思います。
アポロなんとかだった思います。

##とりあず、kazmanをインストールしてみよう。

```
sudo add-apt-repository ppa:kazam-team/unstable-series
sudo apt-get update
sudo apt-get install kazam python3-cairo python3-xlib
```

まずはいつもどおり、リポジトリーを入れていきます。　これを反映させるために、アップデードが必要ですね。その後は、インストールしたものを入れていきます。インストールしている最中はこれで本当にいいのかと聞かれたりしますね。


どうやらここにも残念ならがデフォルトではこちらの映像をうちしだす機能がついていませんでした。
他のアイディアとしては、

```
sudo apt install vokoscreen
```

この組み合わせはまさかのうまくいったかもしれません。
結構スピードが出ている。
初級者がPythonの勉強を始めてcheckIOが役に立った話


エンジニアの仕事を始めて一年ほどの自分がpythonの勉強を始めて参考書の次に実践したのがcheckioだったが、実践してみると楽しかったのでその内容を記しておこうと思います

#これまでやったこと

この業界に入ったのもまだ1年足らずである。現在はｐｈｐを主に仕事では使用し、python自体は一ヶ月前ぐらいから勉強を始めた。主に書籍を利用し、以下の本を一通り読んだ

- 入門　Python3

#始めてよかった点
- 書籍を読んで理解しているつもりの箇所が問題をこなすうちに浮き彫りになった
- 問題を解いてどのように応用するのかという記載があり、ただこなすだけでなく解く意味も理解して勧められ、応用が効くようになる
- 徐々に難しくなるため始めて触れる人にはちょうど良い難しさ

#自分の回答コード
自身の後学のためにも、コードを記述しようと思う。
プログラミングの経験がそんなにない人や、回答に自身がない人が見てこのレベルで大丈夫なんだなと思ってくれればそれでいい


- **1問目**

丈夫なパスワード作成らしい。
初めての問題ということもあって何をすれば良いのか、どのように提出すれば良いのか分からずコードを書き始めるまでがまず長かった。

```Python:House_Password.py

import re

DIGIT_RE = re.compile('[0-9]]')
UPPER_RE = re.compile('[A-Z]')
LOWER_RE = re.compile('[a-z]')

def checkio(number):

    if len(number) < 10:
        return False

    if not DIGIT_RE.search(number):
        return False

    if not LOWER_RE.search(number):
        return False

    if not UPPER_RE.search(number):
        return False

    return print(True)
```

- **2問目**

最も頻出頻度の高い文字を返す処理。
リスト処理が使いなれておらず、色々調べつつ書いた。
本で読むのと、書くのではやっぱり違うなと実感

```Python:The_Most_Wanted_Letter.py
import string


CHARA_ST = string.ascii_lowercase
list = []

def checkio(sentence):
    sentence = sentence.replace(' ','')
    sentence = sentence.lower()
    numMax = 0

    for x in CHARA_ST:
        numIn = sentence.count(x)
        if numIn > numMax:
            numMax = numIn
            maxString = x

    print(maxString)
```

- **3問目**

今回は出現回数が一度のものを取り除く処理
これはデータ処理のノイズを取り除く処理の基本となるらしい。
この問題がどのように役立つのかを読んで、少しだけ問題を解くテンションが上がった。


```Python:Non_unique_Elements.py
def checkio(number):
    numList = list(number)
    outnum=[]
    for x in numList:
        count = numList.count(x)
        if  count>1:
            outnum.append(x)

    return(outnum)

```

#あとがき

**初めて**Qiitaに投稿してみた。
内容も支離滅裂で悲しくなる。

アウトプットの場として挑戦してみたが、文章を書き人にみてもらうというのは難しい。
技術も文章もまだまだすぎるので勉強します。

現在の目標はwebアプリを作成し、公開すること。
いつになるやら・・・・
getEqualSumSubstring 関数の問題を考える

> [!NOTE]
> この記事は 2013/06/30 に [momoto.github.io](http://momoto.github.io/) へ投稿した内容を Qiita へ移行してきたものです

　getEqualSumSubstring 関数の問題を考えてみます。この問題の出典についてはわかりませんが、[Stack Overflow](https://stackoverflow.com/questions/8469407/to-find-the-longest-substring-with-equal-sum-in-left-and-right-in-c) 等で少し話題になったようです。

### 問題

> Complete the function getEqualSumSubstring, which takes a single argument. The single argument is a string `s`, which contains only non-zero digits. This function should print the length of longest contiguous substring of `s`, such that the length of the substring is 2*N digits and the sum of the leftmost N digits is equal to the sum of the rightmost N digits. If there is no such string, your function should print 0.

- [To find the longest substring with equal sum in left and right in C++ - Stack Overflow](https://stackoverflow.com/questions/8469407/to-find-the-longest-substring-with-equal-sum-in-left-and-right-in-c)

**参考訳**

>　0 以外の数字だけを含む文字列 `s` を引数にとる getEqualSumSubstring 関数を定義します。
>　この関数は、文字列 `s` から次の条件に当てはまる最も長い部分列の長さを表示します。部分列は、長さが 2*N であり、左側 N 個の数字の合計と右側 N 個の数字の合計が等しくなることが条件です。適当な部分列がない場合には0と表示します。

　例１）入力された文字列が `123231` であるとき、連続する最も長い部分列は `123231` で、関数が出力する部分列の長さは `6` になります。

　例２）入力された文字列が `986561517416921217551395112859219257312` であるとき、連続する最も長い部分列は `656151741692121755139511285921925731` で、関数が出力する部分列の長さは `36` になります。

### 解答例

　まず、ナイーブに思いつくのは、長さが偶数になる部分列だけを `s` から抜き出して配列に格納しておいて、次に、部分列の左側半分の数字の合計と右側半分の数字の合計が等しくなるような部分列の最も長いものを配列から探すことです。

　仮に入力された文字列が `986561517416921217551395112859219257312` がであれば配列は `["98", "9865", "986561" ... "86", "8656", "865615" ...]` というようにします。以下は JavaScript による解答例です。

```javascript:JavaScriptによる解答例１
function getEqualSumSubstring(s) {
  var substrings = [], longest = "";

  for (var begin=0; begin<s.length; begin++)
    for (var end=begin+2; end<=s.length; end=end+2)
      substrings[substrings.length] = s.slice(begin, end);

  for (var i in substrings)
    if (substrings[i].length <= longest.length)
      continue;
    else if ((function (s) {
      var begin=0, end=s.length/2, left=0, right=0;
      for (begin; begin<end; begin++) {
        left  += parseInt(s[begin]);
        right += parseInt(s[end + begin]);
      }
      return (left === right);
    })(substrings[i]))
      longest = substrings[i];

  return longest.length;
}
```

**別解**

　上の解答例では、部分列の短い順に適当な部分列を探していましたが、部分列の長い順に探した方が効率的であることは問題文から明らかです。部分列の長い順に探索することで、左側半分と右側半分の数字の合計が等しい部分列を見つけ次第、処理を終了することができます。

```javascript:別解
function getEqualSumSubstring(s) {
  var substring="";

  for (var end=s.length-s.length%2; end>0; end=end-2)
    for (var begin=0; s.length>=(begin+end); begin++)
      if ((function (s) {
        var begin=0, end=s.length/2, left=0, right=0;
        for (begin; begin<end; begin++) {
          left  += parseInt(s[begin]);
          right += parseInt(s[end + begin]);
        }
        return (left === right);
      })(substring = s.slice(begin, (end+begin))))
        return substring.length;

  return 0;
}
```
TensorFlow学習メモ

#計算グラフとDefine by Run

TensorFlowはSessionをRunして、初めて処理が実行される。

runの前に、処理の定義が書かれているが(Define)
処理の流れを追っていくにはRunの部分から追っていくのが分かりやすい（と思う。）

例

XXXX = 何かの処理

sess = tf.Session()　　##### Sessionを作成する
sess.run(XXXX)　　　　 ##### xxxで処理を指定

参考書籍
TensorFlowで始めるDeepLearning実装入門

#TensorFlowのチュートリアル(M)
Step Functionsで前のStateの入力を次のStateに渡す

Stateの種類によって入出力の挙動が異なるので注意が必要。

## Task以外のState
デフォルトで前のStateからきた入力をそのまま出力するので問題ない。`OutputPath` を設定することで入力をフィルタリングして渡すことができる。また、Pass State ならば`Result`と`ResultPath`を指定することで、次のStateへの出力項目を追加することができる。

## Task
基本的には、Taskの出力がそのまま次のStateの入力となる。自身の入力を次のStateに渡したい場合は、次のいずれかの方法をとる。

- `ResultPath` でTaskの出力を値として定義した上で `OutputPath: "$"` を指定する
- Task の側で入力値を明示的に出力する。例えばLambdaの場合は`event`に入力値が入るので、それを返すようにすれば入力値を次のStateに渡すことができる

### 例

#### `ResultPath` で出力を拾うパターン

- Statement言語

```json
"exState1": {
  "Type": "Task",
  "Resource": "arn:...(略)..."
  "ResultPath": "$.Result"
  "OutputPath": "$"
  "Next": "exState2"
}
```

#### Taskの実装に任せるパターン

Lambdaを使う場合

- Statement言語
 
```json
"exState1": {
  "Type": "Task",
  "Resource": "arn:...(略)..."
  "Next": "exState2"
}
```

- Lambda内の処理(Python)

```python
def handler (event, content):

    ### ...(処理は省略)...

    return event  ### eventの値をそのまま返す
```

## 参考

[AWS Step Functions 開発者ガイド » Amazon ステートメント言語 » 入力および出力処理
](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/amazon-states-language-input-output-processing.html)
Django×PinaxでWebサービス入門⑤｜インターネット公開

## この記事の内容

[前回](https://qiita.com/mtitg/items/08fdf6c7462bb1dae038)は以前作ったTODOアプリを外部のVPSサーバーにデプロイするところまで行いました。
まだインターネット公開されていないので、今回はそのためのファイアーウォールやApacheの設定を行っていきます。

今回の対象は、全体像で見てみるとこの緑色で囲った部分です。

![Overall Structure_04.png](https://qiita-image-store.s3.amazonaws.com/0/113133/7854636c-4d79-ca74-1aef-25a5201f67ee.png)

- ファイアーウォールのセットアップ
- ApacheとWsgiのセットアップ
- npmでフロント周りの静的ファイルを生成

ということをしていきます。

## ファイアーウォールのセットアップ

ファイアーウォールの設定をしていきます。
http通信を許可します。

```terminal
# firewall-cmd --permanent --zone=public --add-service=http  
```

ファイアーウォールを再起動しておきます。

```terminal
# systemctl restart firewalld  
```

## ApacheとWsgiのセットアップ

`httpd.conf`ファイルを編集して、Apacheがアプリケーションを外部に公開できるようにします。

```terminal
# vim /etc/httpd/conf/httpd.conf   
```

`httpd.conf`を開いたら、下記をファイルの最下部に追加します。

```vim:/etc/httpd/conf/httpd.conf 
LoadModule wsgi_module /usr/lib64/python3.6/site-packages/mod_wsgi/server/mod_wsgi-py36.cpython-36m-x86_64-linux-gnu.so
WSGIScriptAlias / /var/www/cgi-bin/todo/todo/wsgi.py
WSGIPythonPath /var/www/cgi-bin/todo

Alias /site_media/static/ /var/www/cgi-bin/todo/static/dist/

<Directory /var/www/cgi-bin/todo/todo>
Order deny,allow
Allow from all
</Directory>
```

ここでは、

- wsgiモジュールの場所をApacheに伝える
- URL(今回の場合`http://150.95.139.172`)とアプリケーションのルートディレクトリをつなぐ
- 静的ファイル用のURL(今回の場合`http://150.95.139.172/site_media/static/`)とアプリケーション内の静的ファイルを格納しているディレクトリをつなぐ
- アプリケーションのルートディレクトリ以下を公開

ということをしています。

Apacheを再起動します。

```terminal
# systemctl restart httpd  
```

念の為PostgreSQLも再起動します。

```terminal
# systemctl restart postgresql
```

ここまでくるとブラウザから`http://150.95.139.172/`に接続できるはずです。

![FireShot Capture 40 - example.com [localhost] I pinax-project-account - http___150.95.139.172_.png](https://qiita-image-store.s3.amazonaws.com/0/113133/84b11c6b-02f8-c23f-a6aa-0518be10c67d.png)

接続できました。まだscssをコンパイルしてcssファイルを作成するという部分ができていないので、見た目が崩れてしまっています。

## npmでフロント周りの静的ファイルを生成

scssコンパイルのために、ローカル同様npmを使えるようにします。今回は簡易的にインストールしますが、実際にはnvmを使ってしっかりバージョン管理を行う必要があります。

nodejsをyumでインストールします。

```terminal
# yum install -y nodejs
```

npmが使えるようになっています。フロントにて必要なライブラリを取得します。

```terminal
# npm install
```

`watch`コマンドで静的ファイルを生成します。

```terminal
# npm run watch
```

先程と同様に`http://150.95.139.172/`に接続してみます。

![FireShot Capture 41 - example.com [localhost] I pinax-project-account - http___150.95.139.172_.png](https://qiita-image-store.s3.amazonaws.com/0/113133/774150e6-bb5f-6879-68a2-021c1d7653cd.png)

ちゃんとcssファイルが生成されているため、レイアウトが整いました。
これでようやくWebアプリケーションを本格的に開発するためのローカル・本番(VPSサーバー)の構築が整いました。

## 次回

次回は作成しているTODOアプリにTODOアプリとしての機能を追加し、Webサービスとして成立するようにしていきます。
dockerコマンドのzsh補完

docker for macのdockerコマンドのzsh補完

``` sh
$ ln -s /Applications/Docker.app/Contents/Resources/etc/docker.zsh-completion /usr/local/share/zsh/site-functions/_docker
$ ln -s /Applications/Docker.app/Contents/Resources/etc/docker-machine.zsh-completion /usr/local/share/zsh/site-functions/_docker-machine
$ ln -s /Applications/Docker.app/Contents/Resources/etc/docker-compose.zsh-completion /usr/local/share/zsh/site-functions/_docker-compose
```
Nuxt.jsでElementUIのテーマをカスタマイズする

## 概要
ElementUIをNuxt.jsに導入して開発を進めていると、テーマカラーの変更をおこないたくなった。
（参考： [Nuxt.jsとElementUIを組み合わせて使う](https://qiita.com/teriyakisan/items/9c2f479c30b8a829eb7c)）

ElementUIの設定まわりの手順は公式ドキュメントにまとまっているが、Nuxt.jsに組み込む場合の手順をまとめておく。
http://element-cn.eleme.io/#/en-US/component/custom-theme 

## 事前準備：Sassをコンパイルできるようにする

すでにSass/Scssを利用している場合は不要だが、まだの場合はinstallする

```bash
yarn add -D node-sass sass-loader
```

or

```bash
npm install --save-dev node-sass sass-loader
```

## カスタム設定の読み込み

`/css/element-ui.scss`　を配置し、

```scss
/* theme color */
$--color-primary: teal;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
```

`/nuxt.config.js` に読み込み設定を追加する

```js
module.exports = {
  build: {
    vendor: ['element-ui']
  },
  plugins: [
    '@/plugins/element-ui'
  ],
  css: [
    '@/css/element-ui.scss'
  ],
}
```

この際、`element-ui/lib/theme-chalk/index.css` の設定が残っている場合は不要になるので削除する。


あとは、`/css/element-ui.scss` を修正していけば、
自由にElementUIの設定をカスタマイズすることが可能 :thumbsup:
Node.jsでAWS Lambdaを始める前に知っておきたい事

## 実行ロール
Lambda関数で使用するawsサービスの設定です。
ロール自体の設定は、「IAM」で行います。
DynamoDBやS3を使用するLambda関数では、実行ロールに当該サービスを含めましょう。

![スクリーンショット 2018-06-10 15.05.29.png](https://qiita-image-store.s3.amazonaws.com/0/214534/90d28cbc-4cfb-8af4-f3d5-050fab04e7f3.png)

## ログ
Lambdaの実行ログは、CloudWatchで閲覧できます。

## タイムアウト時間

Lambda関数はデフォルトで３秒のタイムアウト時間が設定されています。
時間がかかる処理を実行する場合にはタイムアウト時間も気にしましょう。
![スクリーンショット 2018-06-10 14.58.03.png](https://qiita-image-store.s3.amazonaws.com/0/214534/c2f1dcc1-43b3-7dd3-1374-0a285994bcd5.png)

## node modulesを使用する場合
デフォルトで使用できるモジュールはhttpクライアントの"http"など少ないです。
モジュールを使用するためには、ローカルでデプロイパッケージを作成し、zip化してアップロードする手順が必要です。

![スクリーンショット 2018-06-10 15.22.57.png](https://qiita-image-store.s3.amazonaws.com/0/214534/33baa1cf-a352-7113-05b7-60e85e6d3a95.png)

参考
https://qiita.com/makopo/items/b738e32081f8cae75fe7

## バージョンと非同期処理

特別な事情がなければasync awaitが使用できる8.10を推奨します。

![スクリーンショット 2018-06-10 15.24.26.png](https://qiita-image-store.s3.amazonaws.com/0/214534/cab48ff7-2f5f-34dd-35e1-4f683edb4ca3.png)

使用するモジュールも、async awaitに対応したものを使用するようにしましょう。
例えば、Lambdaでデフォルトで使用可能な「http」モジュールはasync await非対応です。httpクライアントとしては、「node-fetch」がasync awaitに対応していることを確認しています。
https://www.npmjs.com/package/node-fetch

非同期処理/async awaitってなに？って方向けにざっくり説明します。
javascriptでは、実行速度を向上するために、db参照やhttpリクエスト等の時間がかかる処理の終了を待たずに次の処理を行います。
これは時に上から順番にコードが実行されないという実装者としては悩ましい事態も引き起こします。
関数をasync functionにして、呼び出し時にはawaitを付与することにより、関数の実行終了を待つことができます。
以下に簡単なサンプルコードを示します。

```js

async function jikanKakaruShori(){
  console.log("時間かかる処理")
}

async function suguOwaruShori(){
  console.log("すぐ終わる処理")
}

async function exec(){
  await jikanKakaruShori()
  await suguOwaruShori()
}

exec()


```
Dockerのコマンド備忘録

# 1. 概要
Dockerのコマンドについてよく忘れるので、備忘録として残します

# 2. コマンド

## DockerImageの検索
```docker
$ docker search [SEARCH NAME]
```
## DockerImageの取得
```docker
$ docker pull [IMAGE NAME]:[TAG NAME]
```
## DockerImageの確認
```docker
$ docker images
```
## DockerImageの詳細確認
```docker
$ docker inspect [IMAGE ID]
```
## Dockerコンテナ生成
```docker
$ docker create [IMAGE ID]
```
#### Dockerコンテナ起動
```docker
$ docker start [IMAGE ID]
```
#### Dockerコンテナ生成＆起動
生成から起動まで行う場合は以下コマンド

```docker
$ docker run [IMAGE ID]
```
## 起動済みコンテナへ入る
```docker
$ docker exec -it [CONTAINER ID] /bin/bash
```
## Dockerコンテナ停止
```docker
$ docker stop [IMAGE ID]
```
## Dockerコンテナ削除
```docker
$ docker rm [IMAGE ID]
```
## DockerImageの削除
```docker
$ docker rmi [IMAGE ID]
```
## 使っていないDockerImageをまとめて削除
docker image prune コマンドは、使っていないイメージをクリーンアップできます。デフォルトの docker image prune は、宙ぶらりんイメージ（dangling image）のみ削除します。宙ぶらりんイメージとは、タグを持たず、他のコンテナからも参照されないイメージです。

```docker
$ docker image prune
WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N] y
Deleted Images:
deleted: sha256:5cabbc41e6debbb4fbf0935ab90a15e450717ee7780545fe0de02b80210b9949
deleted: sha256:d8c024a34bab956f544814840f7e5b09779287f95c88a77a1d875e0f60ac389b
deleted: sha256:d9b5843bdd900077db5cc413a0826b6553f32e157daaad7b8a8dd1c6ed07d9e6

Total reclaimed space: 0B
```
## Data Volume
### 例：mysqlのデータの場合
```docker
# DataVolumeの作成
$ docker volume create --name mysql_data

# DataVolumeの確認
$ docker volume ls
DRIVER              VOLUME NAME
local               mysql_data

# DataVolumeの削除
$ docker volume rm mysql_data

# どのコンテナでも使われていないボリュームの削除
docker volume ls -f "dangling=true" -q | xargs docker volume rm

# ホストからDockerコンテナへファイルコピー
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
8e207408e15f        mysql               "docker-entrypoint.s…"   4 months ago        Up 15 hours         0.0.0.0:3306->3306/tcp   mysql
$ docker cp sampleData20180902.csv 8e207408e15f:/home/xxx/sampleData20180902.csv
```
PythonからSeleniumを使ってFirefoxを操作してみる

まず、Seleniumモジュールをイントールします。

```
pip install -U selenium
```

次にPythonからFirefoxを操作できるようにgeckodriverをダウンロードします。
[geckodriver](https://github.com/mozilla/geckodriver/releases)

ダウンロードしたファイルはパスが通る場所に置きます。
この場所に移動して、Pythonを起動します。

```python
from selenium import webdriver
browser = webdriver.Firefox()
browser.get('https://www.google.co.jp/')
browser.find_element_by_id("lst-ib").send_keys("Python")
browser.find_element_by_name("btnK").click()
```
これで"Python"と検索できます。
browser.getで、表示するサイトのURLを指定します。
"lst-ib"は、入力テキストボックスのIDです。
"btnK"は、検索ボタンです。
VSCodeからコピペした時に化ける時の対応

# VSCodeからコピペした時に化ける時の対応

- VSCodeで下書きしてgithub PRにコピペしたら何故か化ける時があった。
- 文字入力 -> 変換 -> 削除などを繰り返しているとBS（0x08）が残ってしまう時あるようだ。
    - https://github.com/Microsoft/vscode/issues/37114
    - Electron 2.0.xで対応済らしい

## 最新のVSCodeを入れればOK
https://code.visualstudio.com/insiders/
dockerが繋がらない時の対応方法

# dockerが繋がらない時の対応方法

Docker for Macをインストールして起動直後に繋がらない。

``` sh
$ docker ps
Cannot connect to the Docker daemon at tcp://192.168.59.103:2376. Is the docker daemon running?
```

- 一度dockerをアンインストールする

``` sh
$ git clone -depth 1 git@github.com:docker/toolbox.git
$ toolbox/osx/uninstall.sh
```

- env設定があれば消す。
 
``` sh
$ vim ~/.bashrc
- DOCKER_HOST=tcp://192.168.59.103:2376
```

- 再度dockerインストール
【A Tour of Go】Methods and interfaces/Exercise: Images (25/26)

A Tour of Go の Exercise を実施したときのメモ。

* 「自分の Image 型を定義し、 インタフェースを満たすのに必要なメソッド を実装し、〜」のインターフェイス

```go:
type Image interface {
        // ColorModel returns the Image's color model.
        ColorModel() color.Model
        // Bounds returns the domain for which At can return non-zero color.
        // The bounds do not necessarily contain the point (0, 0).
        Bounds() Rectangle
        // At returns the color of the pixel at (x, y).
        // At(Bounds().Min.X, Bounds().Min.Y) returns the upper-left pixel of the grid.
        // At(Bounds().Max.X-1, Bounds().Max.Y-1) returns the lower-right one.
        At(x, y int) color.Color
}
```

* 問題に記載してあるとおりに実装する(以下、問題から引用)
    * Bounds は、 `image.Rect(0, 0, w, h)` のようにして `image.Rectangle` を返すようにします。
        * →ここの`w`と`h`は`Image{}`で指定した値になるので、`type Image`に`w, h int`を追加
    * `ColorModel` は、 `color.RGBAModel` を返すようにします。
        * →これは、ほんとにそのまま。
    * `At` は、ひとつの色を返します。 生成する画像の色の値 v を `color.RGBA{v, v, 255, 255}` を利用して返すようにします。
        * →これもほぼそのままだが、`v`の定義(`uint8(x * y)`)が必要。

```exercise-images.go
package main

import "golang.org/x/tour/pic"
import (
	"image"
	"image/color"
)

type Image struct{
	w, h int
}

func (img Image) ColorModel() color.Model {
	return color.RGBAModel
}
func (img Image) Bounds() image.Rectangle {
	return image.Rect(0,0,img.w,img.h)
}
func (img Image) At(x, y int) color.Color {
	v := uint8(x * y)
	return color.RGBA{v, v, 255, 255}
}

func main() {
	m := Image{100, 100}
	pic.ShowImage(m)
}
```
Flutterでウィジェットが作成されたタイミングで処理をする

Flutterでウィジェットが作成されたタイミングで処理を行う方法について調べました。
Androidの`onCreate`やiOSの`viewDidLoad`的なタイミングのことです。

Flutterでは`State`のサブクラスを作成し、`initState`をオーバーライドすることでウィジェットの作成時に任意の処理を行うことができます。
`State`のサブクラスをしようするので必然的に`StatefulWidget`のサブクラスも使用することになります。

簡単なアプリの初期化スクリーンを例にすると次のようなコードになります。

```dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class Initialize extends StatefulWidget {
  @override
  State createState() {
    return InitializeState();
  }
}

class InitializeState extends State<Initialize> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  var isInitialized = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("Initializing..."),
            Container(
              margin: new EdgeInsets.all(10.0),
              child: CircularProgressIndicator(),
            )
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    print("initState");
    initializeUser();
  }

  void initializeUser() async {
    FirebaseUser user = await _auth.signInAnonymously();
    print("user created:${user.uid}");
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }
}
```

`initState`ではアニメーションの開始やデータのサブスクライブを行います。
Stateオブジェクトが不要になるときは`dispose`が呼び出されるので、オーバーライドして、タイマーの終了やデータのアンサブスクライブなどの終了処理を行います。

参考
https://flutter.io/widgets-intro/#responding-to-widget-lifecycle-events
Hanami + FuseBox + React.js

## About

React の練習をしたくなったので[前の記事](https://qiita.com/azzly/items/7d5e4d45f755a24c0d8d)の続きとして React.js を導入します。

## Setup

`hanami g app`で新しくアプリを作ります。（名前はなんでも良い）

```shell:shell
hanami g app react
```

[Assets不使用](https://qiita.com/azzly/items/7d5e4d45f755a24c0d8d#assets不使用)にして、[FuseBoxインストール](https://qiita.com/azzly/items/7d5e4d45f755a24c0d8d#fusebox-インストール設定)までやったら、表示するページを作ります。今回はTypeScriptで書かないので`fuse.js`の設定が少し変わります。

```js:apps/react/fuse.js
const path = require('path');
const publicPath = path.resolve(__dirname, '..', '..', 'public');

const { FuseBox } = require('fuse-box');
const fuse = FuseBox.init({
  homeDir : 'frontend',
  target  : 'browser@es6',
  output  : `${publicPath}/$name.js`,
  useTypescriptCompiler: true,
  plugins : [
  ],
  shim : {
  }
});
fuse.bundle('react-app').instructions('> application.js').watch('frontend/**');
fuse.run();

```

```shell:shell
hanami g action react page#index
```

```ruby:apps/react/config/routes.rb
root to: 'page#index'
```

```haml:apps/react/templates/page/index.html.haml
%h1 Index

%p Hello, with index!
```

```haml:apps/react/templates/application.html.haml
!!!
%html
  %head
    %title React
  %body
    = yield
  %script{ type: 'text/javascript', src: 'react-app.js' }
```

```js:apps/react/frontend/application.js
console.log('Hello FuseBox.');
```

`yarn build`後、`hanami s`にて`localhost:2300/react`にアクセスしてコンソールに表示があればOK。

## Babel setup

`apps/react`ディレクトリ内で以下を実行する。

```shell:shell
yarn add babel-core babel-preset-es2015 babel-plugin-transform-react-jsx -D
```

```diff:apps/react/fuse.js
- const { FuseBox } = require('fuse-box');
+ const { FuseBox, BabelPlugin } = require('fuse-box');
...
+ plugins : [
+     BabelPlugin({
+       presets : ["es2015"],
+       plugins : [
+         ["transform-react-jsx"]
+       ]
+     })
+   ],
...
- fuse.bundle('react-app').instructions('> application.js').watch('frontend/**');
+ fuse.bundle('react-app').instructions('> application.jsx').watch('frontend/**');
```

`application.js`を`application.jsx`に改名しておく。

## React.js setup

Babel setup と同様に`apps/react`ディレクトリ内で以下を実行する。

```shell:shell
yarn add react react-dom
```

```jsx:apps/react/frontend/application.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, React.js!</h1>,
  document.getElementById('hello')
);
```

```diff:apps/react/templates/page/index.html.haml
- %h1 Index
- 
- %p Hello, with index!
+ #hello
```

あとは`yarn build`と`hanami s`で確認してエラーなく表示されていれば成功。

![表示例](https://qiita-image-store.s3.amazonaws.com/0/150487/c4528447-1612-e580-5129-ff6045e10df6.png)

:thumbsup::thumbsup::thumbsup:

## おまけ

コードの参考は[こちら](https://github.com/assly/hanami-fusebox-test/tree/with-react)へどうぞ。

## 参考

- [React JSX transform - babel](https://babeljs.io/docs/plugins/transform-react-jsx)
- [Add React to an Existing Application](https://reactjs.org/docs/add-react-to-an-existing-app.html)
- [FuseBox - Babel Plugin](https://fuse-box.org/page/babel-plugin#description)
- [FuseBox - Start with JavaScript](https://fuse-box.org/page/getting-started#start-with-javascript)
【Pythonメモ 】例外を呼び出し元に送信する方法

・関数内のexcept内で、raiseを行うことで例外を呼び出し元に送信することができる。
　

呼び出し元に例外を送信するサンプル

```python:hoge.py
#!/usr/bin/python
# -*- Coding: utf-8 -*-


class Hoge(object):

    def huga():
        try:
            raise TypeError('TYPE ERROR!')
        except Exception as e:
            raise           # 呼び出し元に送信

    try:
        huga()
        
    except Exception as e:
        print(type(e))      # 1回目のエラー出力

``` 

・関数内でエラーを出力して、呼び出し元に例外を送信することも可能。

関数内でエラー出力後、呼び出し元に例外を送信するサンプル

```python:hoge.py
#!/usr/bin/python
# -*- Coding: utf-8 -*-


class Hoge(object):

    def huga():
        try:
            raise TypeError('TYPE ERROR!')
        except Exception as e:
            print(type(e))  # 1回目のエラー出力
            raise           # 呼び出し元に再送

    try:
        huga()
        
    except Exception as e:
        print(type(e))      # 2回目のエラー出力

``` 

上記のexcept内にloggingを使用すれば、関数内のローカル変数をログに出力を行い、呼び出し元で別のログ出力することができる。
eclipseでoracleに接続する！

eclipseでの開発が長かったので、これ以外のIDEは慣れていないのです。

というわけで復習も兼ねて、、

Mavenが好きだけど、jdbcは提供されていない(?)ので、
ここからjarをダウンロードして、外部jarに追加。
http://download.oracle.com/otn/utilities_drivers/jdbc/10205/ojdbc14.jar

oracleインストールの中でインスタンス生成までするので、
↓で接続文字列を確認。ポートは1521。

```sql:SQLコマンドラインから実行
SELECT DBID,NAME,DB_UNIQUE_NAME,CURRENT_SCN,LOG_MODE FROM V$DATABASE
```
DBID NAMEが接続文字列。

これを設定！

```java:main
Class.forName("oracle.jdbc.driver.OracleDriver");
// Oracle8iに接続
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE", "system", "password");
// ステートメントを作成
Statement stmt = conn.createStatement();
```
UE4でMirageSoloのアプリを作ってみる

スタンドアロンVRハッカソンにて
周り全部のチームがUnityの中で
僕たちのチームがUE4でOculusGoとMirageSolo両対応のアプリを作るという
チャレンジをしてみた（ΦωΦ）！！


UE4のエンジニアさんにゲームの作成はお願いして
僕はずっとMirageSoloへの移植できるように準備進めてたので
その時Soloへビルドできるまでの内容をざっくりと書いておきます。

英語読める人は下記の公式ページ読むとすぐにできます（ΦωΦ）
https://docs.unrealengine.com/en-us/Platforms/GoogleVR/Daydream
https://docs.unrealengine.com/en-us/Platforms/GoogleVR/HowTo/CameraSetup

UE4のバージョンは4.19.2です。

■AndroidSDK、NDK、Ant、Gradleとか

Code Works for Androidに入ってるGradleのバージョンは古いのとなんかビルドが失敗しまっくたので
AndroidStudioで最新のものを入れてから環境変数のパスを書き換えておいたほうが無難です。


#デフォルトのレベルで6Dofが確認できるようになるまで


##プラグインの設定変更

●Google VR
●Google VR Motion Controller
この２つを入れます
チェックを入れると再起動してねっとくるので再起動してね（ΦωΦ）


##プロジェクトの設定

基本的な設定はUE4でDaydreamのビルドをする流れでOKです
https://qiita.com/YuukiOgino/items/8a2cbdb9b9718f03c30c

変更点は１つ
Advanced APKPackagingの設定を
6Dofだけにしておいてください。

そして、以下の二点だけは注意です。

●Mobile Multi-View
僕の方で調整できてないせいなのかなと思いますが
Renderingの設定でこれチェックすると真っ暗のままでした

●Enable Gradle instead of Ant
こちらも調査してみてますが
チェック外すと起動しても真っ暗なままになるので
チェックは入れておいてます。

この状態で実機起動してデフォルトの板の上で自由に動けたらOKです。


#Daydreamのコントローラーを表示する

英語読める人はここで！！（ΦωΦ）
https://docs.unrealengine.com/en-us/Platforms/GoogleVR/HowTo/MotionController


##コントローラーの表示
こんな感じでカメラのPawn準備してその下に
GoogleVRMotionControllerを入れれば

![UE4test.JPG](https://qiita-image-store.s3.amazonaws.com/0/62400/56288a00-46c1-aea2-2352-515fef1b06f9.jpeg)


こんな感じにコントローラーが表示されますー
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">UE4からMirageSoloのビルド上手くいった(φωφ) <a href="https://t.co/fzHiEWs7gD">pic.twitter.com/fzHiEWs7gD</a></p>&mdash; IZUN∀@闇のXR狐 (@mizuki_izuna) <a href="https://twitter.com/mizuki_izuna/status/1005441627517698049?ref_src=twsrc%5Etfw">2018年6月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


こちらにGoogleVRMotionControllerを追加してそのしたに
MotionControllerをつけます。
Controllerからレイを飛ばしてたのですが
GoogleVRMotionControllerから位置を取ろうとするとうまく行かなったので
MotionControllerを子にして対応するとうまくいきました。
![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/62400/f8e7cb05-73ae-1df5-638a-41e6c37b93cf.jpeg)



これで完了でーす（ΦωΦ）
(備忘録)WSL Debianで日本語locale

# 経緯
Windows Subsystem for Linux から Debian をインストールしたが、日本語化に四苦八苦したのでメモ。

# やること

~~~ sh
sudo dpkg-reconfigure locales
sudo locale-gen ja_JP.UTF-8
sudo update-locale LANG=ja_JP.UTF-8
sudo aptitude install manpages-ja manpages-ja-dev
~~~
DockerComposeでWordpressを立ち上げる

#はじめに

```
$ docker run hello-world
```
前提として上記コマンドを無事に打てている状態とします。
[Dockerの大まかなイメージから自分が作成したものをDockerhubにあげて、インストールして実行まで](https://qiita.com/sachiko-kame/items/35e0cf07d117c3b92613)にDockerを始めるところまで書いたのでよかったらみてください。

#では早速
1、ファイルを作る

```
$ touch docker-compose.yml
```
---

2、作ったファイルを開く

```
$ open -e docker-compose.yml
```

---

3、開いたファイルに以下を記述する
この際Command+Sなどして保存をする。

```docker-compose.yml
version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
```
---

4、docker-composeを元にコンテナ達を作成、接続するためのコマンドをうつ

```
$ docker-compose up -d
```

---

5、マシンのipアドレスの確認を行う
今回マシン名はdefaultだったため、defaultと書いていますが使うマシンによってdefault2とかだったりすると思います。ちなみに`$ docker-machine ls`で*(アスタリスク)がついているのが自分が使っているマシンです。

```
$ docker-machine ip default
```

---

5、確認後グーグルクロムに以下のurl入れれば表示されるはず

http://<自分のipアドレス>:8000/
<img width="1271" alt="スクリーンショット 2018-06-10 14.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/fb5bf0aa-ba59-4818-9126-76fbbca6ed47.png">



#参考

http://docs.docker.jp/compose/wordpress.html
https://docs.docker.com/compose/wordpress/#define-the-project

#最後に
日本語バージョンのymlファイルで一生懸命解決策を探していたらかなり詰まっていましたが、公式にちゃんと行えるものが乗っていて、迷ったら英語読めなくても公式に行くべきだと痛感しました。まだまだ道のりは長くて…(o*｡_｡)o



#おまけ1
```
$ docker-compose up -d
```
を打った後に正常に起動しているか見るのに以下のコマンドを打ちます

```
$ docker ps
```
この時、以下の画像のようにPORTSが開いていればきっとみれるはずですが、
<img width="1081" alt="スクリーンショット 2018-06-10 14.55.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/85887ef0-db9f-a8ce-9592-9d477d8bdcb0.png">

以下の画像のように、PORTSに何も表示されていないと原因を探す必要があります。
<img width="1172" alt="スクリーンショット 2018-06-10 14.56.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/445e40f8-6e87-23fc-7c64-5d5b7dc25e5b.png">

どこでエラーになったかは、調べたいコンテナidを使い

```
$ docker logs 2a995a8ebb34
```
を打って見るとどこで詰まったかわかるので是非。

#おまけ2
終了させたいときは、起動しているコンテナを終了させる。
d8604d2e0b29の部分は終了するidを記述。今回2つあるはずなので2つ終了させる

```
$ docker stop d8604d2e0b29 
```


以下のコマンド(起動しているコンテナのみ表示)でなければOK

```
$ docker ps
```
又は実際にクロムでurlにアクセスできないようになっていればOK

#おまけ3
ymlの記述を勉強する旅にでる(github)
https://github.com/search?q=in%3Apath+docker-compose.yml+extension%3Ayml&type=Code
【Unity入門】Unity－OculusGo連携アプリ作成。。。VR：QueryChanとUnityChanと遊ぶ♬

<a href="http://www.youtube.com/watch?feature=player_embedded&v=WDqjxK7V39g
" target="_blank"><img src="http://img.youtube.com/vi/WDqjxK7V39g/0.jpg" 
 </a>
※画像をクリックするとYouTube動画につながります

昨日までで、基本的（面倒）なところは終わったので、
今日は、UnityではUnityChanも有名ということで、お顔拝見のアプリにしてみました。

技術的には、前回のアプリにおんぶ形式で乗っけただけです。
簡単にできたので、一挙に記載したいと思います。
※スクリプトレスなので。。。

###やったこと
（１）UnityChan　アセットを検索してFreeを探して、ダウンロード・インポート
（２）Prefabsの中から、キャラらしいUnityChanを見つけて、Hierarchyへ貼る
（３）最初選んだキャラはrigidbodyが張り付けてあるキャラだったので、どうしても重力の影響受けて落ちます。
※for locomotionのところにあるものでした。こちらがrigidbodyが含まれていて重力無しでも落ちてしまうので、その下にもう一個独立でunitychanがあると思います。そちらが正解でした。
（４）UnityChanのPosion調整：Query-Chanよりちょっと上にしました
![unity-Query.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/893e77bb-8cfc-6dbc-b412-053b5fec1e96.jpeg)
（５）▶で確認後、Build。。。apkファイル名（聞かれたとき変更）とPKG名（PlayerSettings-OtherSettings-真ん中Package name）を直しています
　　　※test9.apk, com.muauan.test9
（６）OculusGoで確認。許可を選んで、見る
（７）一旦やめて、OculusGo内で今動かしたtest9があるか確認
　　　「ナビゲーションーライブラリー発行元不明ーページをめくる」
     なかったら：出てくるのに少し時間がかかります。ほかの画面を見たりして１－２分待ってから再度見てください。
![com.oculus.vrshell-20180610-135031.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/ba411771-cbc7-6c85-a3fa-f655f5caf5fb.jpeg)
（８）上記を二度クリックすると動きだします。：なぜか一度目はフラッシュするだけ？
（９）一旦中断、シェアの準備をして、録画開始
（１０）今度は自動的に動き始めます。と同時に動画内に赤丸が表示されていて録画していることを示しています。
（１１）終了して、PCからOculusGo（VR-Headset）－内部共有ストレージーoculus-ScreenshotsまたはVideoShotsのフォルダあります
（１２）それぞれ静止画と録画が入っているので、それをPCの適当なフォルダにドラッグドロップします
。。。

ということで、QueryChanとUnityChanとめでたく楽しいひとときが過ごせました。
※なんか大したことないアプリですが、思ったように動いてくれないのでちゃんとUnityChanのお顔を拝見するのは苦労します^^;

以下、YouTubeリンクです。
[Unity-OculusGo連携：Query-ChanとUnity-Chanと遊ぶ♬](https://youtu.be/WDqjxK7V39g)

###まとめ
・QueryChanとUnitychanと遊べるアプリを作ってみた
・環境は引き継ぎ、import assetsやassets Storeで検索して手に入れる

・今回、YouTubeのMarkdownでの扱いを覚えた
つまり

```markdown
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
```
YOUTUBE_VIDEO_ID_HEREの意味は、
https://youtu.be/WDqjxK7V39g
のWDqjxK7V39gの部分
[Markdown Cheatsheet Adam Pritchard edited this page on May 29 2017 · 96 revisions](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)


・次回は、前回苦労したOculusGoのスティックについてまとめておこう
Create Image Classifier with CreateML

#Introductions
In WWDC 2018 event, Apple has introduced their brand new <b>Machine Learning Framework</b> call <b>CreateML</b>. It allow you to build machine learning model very quick and easy by using Xcode and Swift. It's designed for simplicity and performance. It was build based upon the <b>Metal</b> to run our training process on the <b>GPU</b> rather than <b>CPU</b>, so that we can train image classifier for 20000 images within an hour according to Apple.
# Basic System Requirements
* Beta of Xcode 10
* MacOS 10.14 (Mojave)

# Preparing the dataset
In this article, I will create an <b>Image Classifier</b> to classify between boy and girl. So let's go ahead and download images for boys and girls from Google and place it in two different folder as it's going to be the label of our Image Classifier.
<img width="242" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/c947ada2-8d89-d8fd-3c82-f8ddf13b5133.png">
#Data Traning
After get all the dataset, let's go ahead and create new Playground in Xcode for <b>macOS</b>.
<img width="1223" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/4693604b-6f0d-e7cd-5491-3e322869def0.png">
Let's go ahead and write some code.
I separate all of those dataset into two parts, 80% <b>TraningData</b> and 20% for <b>TestingData</b>.
<img width="228" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/5ad5d7a4-31cf-ef13-744e-7c3d2fdc5346.png">


```swift
import CreateMLUI

let builder = MLImageClassifierBuilder()
builder.showInLiveView()
```
then run this code. after that you should see something as shown in the picture below:
<img width="1223" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/0e82343d-10dd-de45-5f34-4a2be85f0e0c.png">
after that drag and drop your TraningData dataset into the <b>ImageClassifier</b> in Xcode. It took me a fews second to finish training the classifier. After that drag the TestingData dataset into the ImageClassifier for testing our model.
<img width="1228" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/219d3b2b-e2f9-fca4-a479-a22fd7f59f38.png">
Here we got 100% Training and 100% Evaluation. That's mean our model is ready.
** Note: The more image you give for training, the more accurate image classifier you will get.
You can also export your model as <i>.mlmodel</i> file.
<img width="296" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/36026989-e191-da07-bfcf-3cb89c4824a8.png">
You can use this model in your application with the help of <a href="https://developer.apple.com/documentation/coreml">CoreML</a> library.
TortoiseHgでbitbucket鍵認証

# 前口上

MicrosoftがGitHubを[買収](https://news.microsoft.com/2018/06/04/microsoft-to-acquire-github-for-7-5-billion/)しました。[GitLab](https://about.gitlab.com/)や[bitbucket](https://bitbucket.org/)への乗り換えの動きもあるようです。bitbucketの特徴は，[git](https://git-scm.com/)だけでなく[Mercurial](https://www.mercurial-scm.org/)（コマンドは`hg`）も選択できることです。

Mercurialもgitと同じ分散型バージョン管理システムで同じようなことができますが，考え方や使い勝手が異なるようです。

* [Mercurial 対 Git：なぜ Mercurial を選ぶのか？](https://japan.blogs.atlassian.com/2012/03/mercurial-vs-git-why-mercurial/)
* [Git 対 Mercurial: なぜ Git を選ぶのか？ ](https://japan.blogs.atlassian.com/2012/05/git-vs-mercurial-why-git/)

[CVS](http://www.nongnu.org/cvs/), [Subversion](https://subversion.apache.org/), gitと使ってきて，gitは仕事や[MacPorts](https://www.macports.org/)のお手伝いに欠かせないものとなっていますが，Subversionが長かったこともありなかなか馴染めないでいます。Mercurialだったら，subversionから乗り換えやすかったかもしれません。

Macなどからコマンド`hg`は違和感なく使うことができました。ほっとする感じです。一方TortoiseHgには少し戸惑いました。ここでは，TortoiseHgからbitbucketに接続する際に鍵認証する方法について紹介します。

# Mercurialの導入

Mac, Debian Linux (WSL), [MSYS2](https://www.msys2.org/)には，それぞれMacPorts (コマンドは`port`), apt, pacmanで導入しました。Windowsでは，[TortoiseHg](https://tortoisehg.bitbucket.io/)を導入しました。パスが通っていれば，コマンドプロンプトやPowerShellからも`hg`が使えます。

# bitbucketに公開鍵を登録

bitbucketの認証には設定が必要です。`ssh-keygen`で作った公開鍵（テキスト形式）の中身をコピーしてbitbucketに登録します。

人のアイコン > bitbucket設定で設定画面を表示し，「SSH鍵」をクリックします。「鍵を追加」ボタンをクリックして表示されるフィールドにペーストして「鍵を追加」ボタンをクリックします。

# 秘密鍵の変換と登録
## 変換

TortoiseHgに登録する秘密鍵はPuTTY形式です。`ssh-keygen`のものは変換する必要があります。それを`mercurial.ini`で指定すると文字化けのようなエラーメッセージが出ました。「mercurial」「文字化け」で検索すると，日本語ファイル名への対応などの結果が表示され遠回りをしました。Unixの常識はWindowsの非常識でした。

* [SSH秘密鍵 id_rsa -> putty形式&OpenSSH形式に変換](https://qiita.com/dskst/items/391fc55018fbf3cf795e)

パッケージのバージョン管理のしやすさからMSYS2を使っていますので，PuTTYはpacmanでインストールしました。

```bash
$ pacman -S mingw64/mingw-w64-x86_64-putty
$ puttygen.exe
```

`puttygen`のウインドウで秘密鍵（例えば`id_rsa`)を指定し，`id_rsa.ppk`を生成して保存します。

bitbucketのリポジトリに対して，`clone`，`incoming`，`push`，`pull`などが行えるようになるはずです。

```powershell
PS C:\Users\takeshi\foo> hg in
ssh://hg@bitbucket.org/yourid/foo と比較中
変更点を探索中
差分はありません
```

## 登録

タスクトレイを確認して`Pageant.exe`が起動していない場合は起動します。タスクトレイ
の`Pageant`を右クリックして起動し，`puttygen`で変換した`id_rsa.ppk`を選択します。

* [WindowsでTortoiseHg 2.xとbitbucketを使う](http://www.naturalsoftware.jp/entry/20110414/1302760765)

# VSCodeとTortoiseHg Workbench

[Visual Studio Code](https://code.visualstudio.com/)にはgitが統合されていますが，git専用ではありません。拡張機能HgをインストールすればMercurialでバージョン管理できます。TortoiseHg Workbenchは4.3.1を使っていたのですが，執筆時点最新版の4.6ではエディタにVSCodeが指定できるようになっています。
AWS IoT エンタープライズボタンを登録してSMSを送ってみるまで

何か自分なりのアレンジが必要かと思って書きながら進めようとしてましたが、
全て参考URLのまま進めればOKでした。

【参考URL】
■【国内販売開始】AWS IoT Enterprise Button試してみたらホンマに簡単にLambda関数を実行できた
https://dev.classmethod.jp/cloud/aws/aws-iot-enterprise-button/#toc-


それなら記事にする必要あるのか？ってとこもありますが、下記の観点から残しておくことにします。
>「僕が書いたことはみんな書いている、ハマっていることは共有しなくてもいい」という考えも浮かぶと思うが...
・情報鮮度の観点で出す価値あり

http://qiita.com/hinom77/items/dfa9e0c734e47271edb7
ラズパイでデュアルディスプレイ( Xineramaで )

[DisplayLinkのUSB2.0](http://amzn.asia/6ZvvjwM)と、ラズパイ本体のHDMI両方を使ってデュアルディスプレイしたくなった。
昨今はRandR（xrandr, Arandrなどのツール)を使ってセットアップするのが良さそう、と思いつつも、どうにもうまく動かなかったのでXineramaでデュアルディスプレイしてる。

環境としては
* 確認日: 2018/06/10
* Raspbianバージョン: 9.4( Stretchかな https://www.softantenna.com/wp/software/debian-9-4-release/ )
* カーネルのリコンパイルは不要
* i3wmで普通に使えてる

xorg.confで指定する方法はハードウェアの動的変更に対応できないので、あまりオススメはできない。老害ぽい。
( Xinerama自体が話題になったのって、そういえばいつぐらいだろうか... XFree86 4.0が出たあたり? 20年くらい前か )

```/etc/X11/xorg.conf
Section "Device"
  Identifier "Raspberry Pi RBDEV"
  Driver "fbturbo"
  Option "fbdev" "/dev/fb0"
  Option "SwapbuffersWait" "true"
  Option "ShadowFB" "off"
EndSection

Section "Device"
  Identifier "displaylink"
  Driver "fbturbo"
  Option "fbdev" "/dev/fb1"
  Option "ShadowFB" "off"
EndSection

Section "Monitor"
  Identifier "Monitor0"
EndSection

Section "Monitor"
  Identifier "Monitor1"
EndSection

Section "Screen"
  Identifier "Screen0"
  Device "Raspberry Pi RBDEV"
  Monitor "Monitor0"
EndSection

Section "Screen"
  Identifier "Screen1"
  Device "displaylink"
  Monitor "Monitor1"
  DefaultDepth            16
EndSection

Section "ServerLayout"
  Identifier "Default Layout"
  Screen 0 "Screen0" 0 0
  Screen 1 "Screen1" RightOf "Screen0"
  Option         "Xinerama" "1"
EndSection
```
hubotをデーモン化するだけならsystemdだけでよかった

[この前の記事](https://qiita.com/fruitriin/items/01bf71f1eb4b76350c7f)で、hubotでforeverから立ち上げたんですけど、
「それsingleプロセスで立ち上げるならRestart=alwaysにするだけでいいよ」とのコメントを頂いたのでやってみました。

>結論から言うと /etc/systemd/system/ に .service ファイルを作ればいいです。（ .serviceファイルをユニットというみたいです）

前回の記事で書いたのと同様、上記の場所に適当に .service ファイルを作りましょう。

```
[Unit]
Description=Hubot 

[Service]
Type = simple
Restart=always
WorkingDirectory=/root/hubot/
ExecStart=sh bin/hubot
ExecStop=/bin/kill $MAINPID
ExecReload=/bin/kill -HUP $MAINPID

[Install]
WantedBy=multi-user.target
```

```
systemctl start hogehoge
systemctl status hogehoge
systemctl restart hogehoge
systemctl stop hogehoge
```

めっちゃ簡単ですね(๑•̀ㅂ•́)و✧


書式についてはこちらが参考になりそうです。
- [Systemd入門\(4\) \- serviceタイプUnitの設定ファイル \- めもめも](http://enakai00.hatenablog.com/entry/20130917/1379374797)
- [Systemd メモ書き \- Qiita](https://qiita.com/a_yasui/items/f2d8b57aa616e523ede4)
Arduino Pro Micro でプルダウン抵抗を理解する

# Pro Micro で プルダウン抵抗を理解する
キーボードを自作するための勉強中です。
[Pro Micro](https://www.sparkfun.com/products/12640) クローンを使った簡単な回路を組むことで、プルダウン抵抗が何なのか、どうして必要なのかを勉強しました。

## プルダウン抵抗を使った回路を作る
スイッチが押されているか、押されていないのかを Pro Micro が読み取り、スイッチが押されていれば LED を光らせるというものを作ってみます。

### アイデア
A0 ピンを入力ピンとして設定します。入力ピンは入力されている電圧が 5V なら HIGH 、 0V なら LOW だと判断します。
スイッチが押されている間は入力ピンが 5V になり、押されていない間は 0V となるような回路を組めばよさそうです。

### Pro Micro へプログラムの書き込み
Pro Micro へプログラムを書き込みます。環境構築は [Pro Micro &amp; Fio V3 Hookup Guide - learn.sparkfun.com](https://learn.sparkfun.com/tutorials/pro-micro--fio-v3-hookup-guide) を参考に行ってください。

`ファイル > 新規ファイル` をクリックして新規ファイルを作成します。
プログラムは以下のものをコピペしてください。

```c
int RXLED = 17;
int inputPin = 18;

void setup()
{
 pinMode(RXLED, OUTPUT);
 pinMode(inputPin, INPUT);
}

void loop()
{
  TXLED0;
  if ( digitalRead( inputPin ) == HIGH ){
    digitalWrite(RXLED, LOW);
  } else {
    digitalWrite(RXLED, HIGH);
  }
}
```

Arduino 上でのピン番号は[ここ](https://learn.sparkfun.com/tutorials/pro-micro--fio-v3-hookup-guide#hardware-overview-pro-micro)の通りとなっています。

これを Pro Micro へ書き込んでおきます。

### 回路の作成
まず VCC から スイッチへつなぎ、スイッチからA0ピンへつなぎます。

![img1.png](https://qiita-image-store.s3.amazonaws.com/0/89977/1cd8e34c-dc7f-d91f-0baa-c37985c65989.png)

こうすると、スイッチが押されている間は VCC と A0ピンがつながり、A0ピンが 5V になり、 HIGH になります。
しかし、スイッチが押されていない間は A0ピンはどこともつながっていません。
このような状態を回路がオープンであると言います。
このオープンな状態は、静電気などの影響を受けるためどんな状態であるかが定まりません。
つまり、スイッチが押されていない間は A0ピンが LOW になるとは限らないような状態になっています。

### オープンを解決
そこで、スイッチが押されていない間は A0ピンが GND とつながるようにします。
スイッチと A0ピンの間から GND へ線をつなぎます。

![img2.png](https://qiita-image-store.s3.amazonaws.com/0/89977/3902bc53-62e5-e099-6a01-b6cbb38130db.png)

これでスイッチが押されていないとき、A0ピンと GND がつながり、A0ピンが 0V になり、LOW になることが保証されます。
しかし今度は、スイッチが押されているとき、A0ピンは VCC と GND のどちらにもつながっている状態になってしまいます。
これでは A0ピンが 5V となるか 0V となるかはっきりしません。

### 誘導する
そこで、電流は抵抗の低い方に流れるという特徴を利用して回路を修正します。
スイッチと GND の間に抵抗を挟みます。今回私は 4.7kΩ の抵抗を使用しました。

![img3.png](https://qiita-image-store.s3.amazonaws.com/0/89977/e0d8b31c-43b7-7d27-377e-a250fcefd247.png)

これにより、スイッチが押されている間、VCC からの電流が A0ピンへ流れ込むように誘導することができます。
この抵抗をプルダウン抵抗といいます。

# 参考にさせて頂いたサイト
- http://eucalyn.hatenadiary.jp/entry/original-keyboard-04
- https://www.wdic.org/w/SCI/プルダウン
ブラウザでスクロール時にタイトルを上に固定する

WEBページでながいリストなどを表示する際にテーブル構成で組むのはいいが、ページ下のほうにスクロールした際に
タイトル部分が上に残ってくれると嬉しいなということが多々ある。

簡単に実装できたので備忘録

jquery の plugin で tablesorter というもの。

http://tablesorter.com/docs/

実際は名前の通りソート機能を実装するのがメイン

PHPで作ってたのでこんな感じ



```
	<table id="item_list_header" class="item_list_header">
		<thead>
		<tr>
			<th class="title">ID</th>
			<th class="title">商品コード</th>
			<th class="tablesorter-header title">商品名</th>
			<th class="tablesorter-header title">料金</th>
		</tr>
		</thead>
		<tbody>
<?php foreach ($item_list as $item){ ?>
		<tr>
			<td><?php echo $item["id"]; ?></td>
			<td><?php echo $item["item_cd"]; ?></td>
			<td><?php echo $item["item_name"]; ?></td>
			<td><?php echo $item["item_price"]; ?></td>
<?php } ?>
		</tr>
		</tbody>
	</table>
	
	
	<script type="text/javascript">
	$(function() {
	  $('#item_list_header').tablesorter({headers: {
            0: { sorter: false },
            1: { sorter: false },
            2: { sorter: false },
            3: { sorter: false }
        }});
	});
	jQuery(function(){
	  jQuery('table.item_list_header').floatThead();
	});
</script>
```

基本ソートをするプラグインなので、ソートが表示されるが、
            0: { sorter: false }
といった形でソートをさせない列を指定することは可能。