OmniAICreator/Qiita-1.07M huggingface dataset:
ドロワーメニューを作ってみた

Webサイトでよく見る3本線の入ったメニューについて調べてみました。
ドロワーメニュー(もしくはハンバーガーメニュー)と呼ばれていることを知った。
今回はそれを実装してみた。

#ソース
では、いつものようにソースを載せます。

```drower_practice.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドロワーメニュー　練習</title>
    <link rel="stylesheet" type="text/css" href="./css/hamberger_menu.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="./js/hamberger_menu.js"></script>
</head>

<body>
    <div class="hamberger_menu">
        <!-- 三本線 -->
        <div class="hamberger_line">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <!-- クリックしたときのメニュー -->
        <nav class="hamberger_list">
            <ul>
                <li><a href="#">ドロワー1</a></li>
                <li><a href="#">ドロワー2</a></li>
                <li><a href="#">ドロワー3</a></li>
            </ul>
        </nav>
    </div>
</body>

</html>
```

```hamberger_menu.css
.hamberger_line {
    display: inline-block;
    width: 36px;
    height: 28px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    transform: translateX(0);
    transition: transform .5s;
}

.hamberger_line span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
    transition: all .5s;
}

.hamberger_line span:nth-of-type(1) {
    top: 0;
}

.hamberger_line.open span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
}

.hamberger_line span:nth-of-type(2) {
    top: 12px;
}

.hamberger_line.open span:nth-of-type(2) {
    opacity: 0;
}

.hamberger_line span:nth-of-type(3) {
    bottom: 0;
}

.hamberger_line.open span:nth-of-type(3) {
    transform: translateY(-12px) rotate(45deg);
}

.hamberger_list {
    width: 250px;
    height: 100%;
    padding-top: 100px;
    background-color: rgb(16, 69, 153, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    transform: translateX(250px);
    transition: all .5s;
}

.hamberger_list.open {
    transform: translateX(0);
}

.hamberger_list li {
    text-align: center;
    padding: 10px 0;
    list-style: none;
}

.hamberger_list a {
    color: #fff;
    text-decoration: none;
}
```

```hamberger_menu.js
$(function () {
    // クリック時の動作
    $('.hamberger_line').on('click', function() {
        // メニューを閉じる
        if($(this).hasClass('open')) {
            $(this).removeClass('open');
            $('.hamberger_list').removeClass('open');
        // メニューを開く
        } else {
            $(this).addClass('open');
            $('.hamberger_list').addClass('open');
        }
    });
});
```

#解説
ドロワーメニューをクリックしたときの開閉は、`jQuery`の`removeClass`と`addClass`を使って実装している。
これを使うことで、`HTML`のタグを操作している。


#参考資料
[【jQuery】ドロワーメニュー　横からスライド表示するメニュー](https://tivel.jp/archives/11037)
【Tensorflow】Object DetectionでDeep写輪眼

## はじめに
夏休みの自由研究でObject Detectionを使用して、Deep写輪眼を作成しました。
と言っても、単純にObjecet Detection APIをファインチューニングしただけですが。
※特別な実装はしていないため、ソースコードは本記事に出てきません。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Deep写輪眼👁<br>検出は25秒から👁👁<br><br>寅と未の誤認識が多い……🐤 <a href="https://t.co/wA2DfFttYg">pic.twitter.com/wA2DfFttYg</a></p>&mdash; 高橋かずひと@リベロ拝命🐤 (@KzhtTkhs) <a href="https://twitter.com/KzhtTkhs/status/1163054203717054464?ref_src=twsrc%5Etfw">August 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
一つ目の動画で「午」の印忘れてる。。。

## 利用ツール
数か月前までは、Tensorflowの生「Object Detection API」を苦労しながら触っていたのですが、最近はからあげさんの「Object Detection Tools」が楽ちんなので良く利用しています。

<TABLE ALIGN=CENTER>
  <TR>
    <TD WIDTH=400px>
      <A HREF="https://github.com/karaage0703/object_detection_tools" TARGET="_blank"><strong>karaage0703/object_detection_tools</strong></a>
      <BR>
      Object detection useful tools for TensorFlow Object Detection API - karaage0703/object_detection_tools
    </TD>
  </TR>
</TABLE>

詳しい使用方法は以下を参照お願いします。
[TensorFlowの「Object Detection API」で物体検出の自前データを学習する方法](https://qiita.com/karaage0703/items/76ef6b774e3cd69028bb)

## データ準備
　子・丑・寅・卯・辰・巳・午・未・申・酉・戌・亥の12パターンに対し、200枚(実写180枚、アニメ20枚)ずつぐらいアノテーションして学習データを用意しました。

　はじめはアニメ画像だけで頑張ってたのですが、さすがに少なすぎて性能出ず、、、

ちなみに、以下のグー・パー・指さしは1000枚ずつアノテーションしているため（一般的には1000枚くらい必要とか良く言われますし）、単純に200枚はデータが足りない感が強いです（まぎらわしい印もちょいちょいありますし、、、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">安定性がアップしたような気もしますが、こーいうのはちゃんとデータ取って比較しないと分からないですね。。。🐤 <a href="https://t.co/IvqpJ9Os2M">https://t.co/IvqpJ9Os2M</a> <a href="https://t.co/jbWHZwkOoW">pic.twitter.com/jbWHZwkOoW</a></p>&mdash; 高橋かずひと@リベロ拝命🐤 (@KzhtTkhs) <a href="https://twitter.com/KzhtTkhs/status/1163459464298524674?ref_src=twsrc%5Etfw">August 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## データ拡張
　上述の通り、学習データ数は少なかったのですが、ある程度の汎化性能は持って欲しかったので、以下のデータ拡張オプションを使用しました。
　　random_horizontal_flip：左右反転
　　　※上下反転をすると「巳」と「亥」を混同しそうだったためvertical_flipは未指定
　　random_adjust_brightness：明度変更
　　random_adjust_contrast：コントラスト変更
　　random_adjust_hue：色相変更
　　random_adjust_saturation：彩度変更
　　random_distort_color：明度、コントラスト、色相、彩度の変更をランダムに適用
　　random_black_patches：黒点付与
　　random_crop_image：画像切り抜き
　　random_absolute_pad_image：パディング付与

　最初は欲張って、以下も適用していたのですが、mAPとLossが上下を繰り返して、全く収束しなかったので外しました（ちなみに、グー・パー・指さしの場合は全適用して学習が出来ていました
　　random_rotation90：90度回転
　　random_rgb_to_gray：グレースケール化
　　random_jitter_boxes：バウンディングボックス座標ズラし
　　random_self_concat_image：自身の画像を並べる

## おわりに
　やっていることはObject Detection APIを用いてデータ用意して、ファインチューニングしただけなので、正直exampleに毛が生えた程度ですが、データセットを色々変えてやってみるだけでも気付きが多かったです。
やる前はそもそも印の識別なんて出来るのか半信半疑でしたが、意外と出来ましたし🐤
Twitterに投げたら色々な方からアドバイス貰えましたし🐤🐤
【ど素人が作る】Android+Kotlin入門 - Todoリスト作るよ 随時更新

# Android + Kotlinやってみる
Androidの勢いがあるらしいので触ってみる。
※ 筆者はJavaメインでWeb開発をしているので、Androidについてはど素人です。

Androidエミュレータ・実機でのHelloWorld確認はできていること前提で話を進めます。

## 環境
Windows10
Intellij IDEA

## 作るもの
Todoアプリ
**画面構成**

- Todo一覧画面
- Todo作成


## 完成品
[こちら](https://github.com/masamiShim/android-prac/tree/feature/todo-sample)

## 本記事の構成
1. Android開発の基本について
2. 複数画面を使う
3. 独自オブジェクトの情報を一覧表示する

### 1. Androidの基本について
Android開発の基本は2つ！

- 画面のレイアウトを作る
- 画面に関する処理を作る

#### 1.1. 画面のレイアウトを作る

やることは以下の3つ
  
- 「res/layout/activity_xxxxxx.xml」みたいなxmlファイルを作成する。 
- 使う部品にidを付与しておく
- アクティビティとxmlsファイルとの結び付けを行う(※1) 

※1の補足
↓ xmlファイルの書き出しの部分

```
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="employed.self.freitech.appfitness.TaskListActivity">
```

書き出し部分の以下の箇所が、この画面は○○Activityクラスと結びついていますよーって書いてあります。

```
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="employed.self.freitech.appfitness.TaskListActivity"
```

#### 1.2. 画面に関する処理を作る
やることは以下の2つ。

- 1.1.で部品に付与したidを使って部品を指定
- 指定した部品に必要なイベント処理を追加する。

#### 2. 複数画面を使う
複数画面を使う場合にやることは以下の3つ
- 画面ファイルを追加
- intentを取得してstartActivityに渡す(Intentを使う場合の話)
- 画面間でデータを共有する場合(※2)

※2 補足
遷移先へパラメータ等を渡す場合は、intentにputExtraで文字列、文字配列あたりまでは渡せそう。

#### 3. Todoの一覧を表示する
やったことは以下。
なお単純に単一の文字列を表示するだけの場合はデフォルトで準備されているらしいのでそれでできる。



## その他
### 調べたこと
- 画面とコードの結び付け
- レイアウトについて
    - 各レイアウトの特徴と、部品の配列方法。
- 画面遷移
    - Activityの登録
        - 新しい画面を登録したらAndroidManifest.xmlに登録する
    - 画面遷移時にデータ受け渡し
        - putExtraの使用
- ListViewの更新
    - LayoutInflater
        - 指定したxmlのレイアウトリソースを利用できる仕組み。
    - Adapter
        - 何個かテンプレート用意されているけど、ない場合はカスタムアダプター作らないといけない。
- 画面間データ保持
  - Activityに変数作る


### 詰まったとこ
- 独自クラスでのListView表示
- R
医療機器：血圧計データ転送　OMRON HEM7510C

医療機器は機器ごとに異なる通信方式、記録方式を用いる場合があった。

残念なお知らせです。

OMRON HEM7510Cで利用していたアプリのサービスが終了するとのこと。

【重要なお知らせ】「ＷＭ（わたしムーヴ）」アプリのサービス終了について
https://www.watashi-move.jp/pc/wm/info_f/2021030801.html

一つ前で利用していたアプリのサービスが終了して、今のアプリになって、便利なとこがあったので、不満はなかったのですが、、、。

ウェルネスリンク サービス終了のお知らせ
https://www.faq.healthcare.omron.co.jp/?site_domain=wellness

次のアプリは、Androidのバージョンが古くて導入できないらしい。
医療機器を発売する側は、これらのアプリくらい面倒みれなくてどうするんだろう。

仕様を公開して、オープンソースで作ってもらえばいいのに。
新型コロナウィルス 関連アプリで、Androidの版が古いので入れられないというオープンソースもあったらしいから、オープンソースにすれば解決するというものではない。利用できない人が、自力でなんとかする機会、窓口があるかどうかなのだろう。


# OMRON HEM7510C
https://www.healthcare.omron.co.jp/support/download/manual/pdf/HEM-7510C_B_m.pdf

http://wpl.jp

#共通

設定ボタン：測定時は測定・停止ボタンで電源が入る。通信時は設定ボタンで電源が入る。
通信エリアマーク(本体の右側面）

電源：AC電源、電池

からだグラフは2017年12月6日(水)終了
http://www.watashi-move.jp/pc/wm/service/07.html

|  | PC | iPhone | Android |
|:--|:--|:--|:--|
| 通信 | USB | bluetooth | Felica |

#PC
USB接続
オムロン USB 通信トレイ (HHX-IT4)」


#iPhone
bluettoth接続

WM（わたしムーヴ）を App Store で
https://itunes.apple.com/jp/app/wm-watashimuvu/id799323424



#Android
FeliCa接続

おさいふ携帯アプリで、おさいふ携帯の初期化をしないと通信できない。


WM（わたしムーヴ）アプリ - Google Play の Android アプリ
https://play.google.com/store/apps/details?id=jp.co.docomohealthcare.android.watashimove2




#利用経緯(personal history)考察(consideration)
1) アプリのサービス終了はつらい。せっかく慣れて使い勝手を工夫してもまた１からやり直し。
2) 機器が変わると通信方式が変わるのは御免。接続方法をやりなおすのは面倒。
3) 操作性は全部を知ればなんとかなる。
4) 機器、アプリの２つの変更で、乗り換えるのに経過した時間が２年。


#参考資料(reference)

スマホに血圧データを簡単転送＆アプリのグラフで記録もできるオムロンの「上腕式血圧計 HEM-7510C」を使ってみた
https://gigazine.net/news/20160709-omron-hem-7510c-review/

#文書履歴(document history)
ver. 0.01 初稿 20190818 午後
ver. 0.02 追記 20190818 夜
ver. 0.03 アプリサービス終了のお知らせ 20210509
aws-cliをpythonスクリプトで自動化する

## 前置き

gitにpushされたときにciで自動でAWS上リソースをバババッと作ってくれるスクリプトを書きたかった

最初はシェルでこのように書いていた

```bash
aws logs create-log-stream --log-group-name hoge-logs

aws ecs register-task-definition --family hogehoge-family ............
```

しかし、値を取得してパイプで渡したり一度処理してから他に渡したりした時に問題が発生

```bash

HOGE=$(aws ecs list-task-definitions --family-prefix hogehoge-family)

if [[ HOGE =~ arn:aws:ecs:us-west-2:123456789012:task-definition/hogehoge:1 ]]; then
# なんとかかんとか
```

原因はaws-cli側の出力がJSONなのでダブルクォーテーションが悪さをしてしまう。
↓例としてecsタスク定義を一覧取得するコマンドを実行時に返ってくる値

```bash

aws ecs list-task-definitions --family-prefix wordpress
{
    "taskDefinitionArns": [
        "arn:aws:ecs:us-west-2:123456789012:task-definition/wordpress:3",
        "arn:aws:ecs:us-west-2:123456789012:task-definition/wordpress:4",
        "arn:aws:ecs:us-west-2:123456789012:task-definition/wordpress:5",
        "arn:aws:ecs:us-west-2:123456789012:task-definition/wordpress:6"
    ]
}
```

このクォーテーションをエスケープしてなんとかするには？と調べてみたが、、

## シェルだけで全てやらなくて良い

結論から、シェルだけで解決する方法もなくはないと思うが、PythonやRubyとかに移したほうが楽
aws-cliのインストールにPythonが必要なので、今回はPythonを選択した

## Pythonでシェルコマンドの実行

```py

import subprocess

cmd = []
cmd.append("aws")
cmd.append("ecs")
cmd.append("list-task-definitions")
cmd.append("--family-prefix")
cmd.append("hogehoge-family")

subprocess.call(cmd)
```

パイプで渡すような処理の場合、以下のように書ける

```py

import subprocess

cmd = []
cmd.append("aws")
cmd.append("ecs")
cmd.append("list-task-definitions")
cmd.append("--family-prefix")
cmd.append("hogehoge-family")

push = subprocess.Popen(cmd, stdout = subprocess.PIPE)

if push.communicate() == hogehoge:
    # なんとかかんとか
```

全部Pythonでやってもいいし、シェル側から引数を取ってそれを処理して、ということもできるようになった

参照 https://qiita.com/caprest/items/0245a16825789b0263ad
マウスオン（hover）したら下位項目が出てくるメニューの作り方

制作物イメージ

<img width="963" alt="スクリーンショット 2019-08-18 22.16.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240838/5fbcf788-3590-fe42-fa3e-eff85a49c1c2.png">





```html
 <ul class="menu">
   <li class="menu__single">
     <a href="#" class="init-bottom">AAAAAAAAA</a>
   </li>
   <li class="menu__single">
     <a href="#" class="init-bottom">AAAAAAAAA</a>
     <ul class="menu__second-level">
        <li><a href="#">BBBBBB</a></li>
        <li><a href="#">BBBBBB</a></li>
        <li><a href="#">BBBBBB</a></li>
        <li><a href="#">BBBBBB</a></li>
     </ul>
   </li>
   <li class="menu__single">
      <a href="#" class="init-bottom">AAAAAAAAA</a>
   </li>
   <li class="menu__single">
      <a href="#" class="init-bottom">AAAAAAAAA</a>
   </li>
   <li class="menu__single">
      <a href="#" class="init-bottom">AAAAAAAAA</a>
   </li>
 </ul>   
```

```css
.menu {
    position: relative;
    width: 75%;/* メニュー全体の大きさ */
    text-align: right;
}
.menu > li {
    float: left;
    margin:0 3.6%;/* メニュー間の隙間 */
    letter-spacing: 0.2rem;
}
.menu > li a {
    display: block;
}
ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    margin:25px 0 0 0;
    padding:10px 2%;
    background:#333333;
}
.menu > li:hover {
    color: #333333;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.menu__second-level li a {
    margin:10px 0 0 0;
    text-align: center;
    font-size:0.8rem;
    color: #ffffff;
}
.menu__second-level li a:hover {
    text-decoration: underline!important;
}
.menu:before,
.menu:after {
    content: " ";
    display: table;
}
.menu:after {
    clear: both;
}
.menu > li.menu__single {
    position: relative;
}
li.menu__single ul.menu__second-level {
    position: absolute;
    width: 150%;/* ここが下位メニューを表示するボックスの大きさ */
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
li.menu__single:hover ul.menu__second-level {
    visibility: visible;
    opacity: 1;
}
.menu__second-level:before{
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid #333333;
}
```
【お盆休みの自由研究】Nuxt.js/TypeScriptでポートフォリオを拡散するサイトを作った。？

(履歴)
・2019/08/19
  詳細表示がバグってたので修正・・・

#1. 結論から
お盆休みの自由研究と称して、自分のポートフォリオやPR資料などを拡散するサイトを作りました。
https://public-engineer-excavation.firebaseapp.com/

自分のといいつつ会員登録さえすれば他の人の情報も見れます。
お盆の間で理想の半分程度できたので、公開することにします。(どん！)
上記の理由により、機能的にはまだまだ不足していることがありますのでご了承ください。

＜できていないこと一覧＞
・LINEのボタンがありますが、どれも飾りです！(笑)
・検索条件はききません！それもかざ(以下省略)
・ComingSoonは来るかどうかわかりません！

#2.作るに至った経緯
・会社員時代に営業の人が技術者のスキルがぱっとわかって、
　かつ検索できるようなサイトがあればなぁ～と相談されたことがきっかけ。
　その時、私は私でポートフォリオを作っていたので、
　自分のポートフォリオ作成とその話をうまく融合できないものかと考えました。

#3.技術的な構成
## <フロント>
###1 Firebase
・Hosting
・Autuhentification
・CloudFireStore

###2 Nuxt.js/TypeScript
・CSSはVuetifyを使用、すごい便利ですね。これ
・Nuxt.jsは公式の手順に沿ってTS化(進捗悪かったのは半分くらいこいつのせい)
　https://ja.nuxtjs.org/guide/typescript
・ほかに詰まったところはVuexの周りで”vuex-persistedstate”というライブラリを使用して
　SessionStorageに値を保管してましたが、
　SessionStorage<=>Vuex間での値の復帰は非同期に行われるみたいで思ったタイミングで値が取れなかったり。
　結局mounted内でsetTimeoutすることで回避しました。

## <サーバーサイド>
###1 GCP
・CloudFunctions
　Goを使う予定(予定なのである、今後のUpdateに期待)

#4.概要
###1. 会員登録
Top画面の新規会員登録はこちらを押すと出てくるモーダルに入力すればOK
※LINEの下りは無視でお願いします。( ´∀｀ )
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/385ddef7-93a6-bb60-a427-9ec99df6812d.png)

###2. マイページ
新規会員登録、ログインをするとマイページがしれっとでてきます。
ここで自分のことを書いてきます。右下の保存を押すとデータ更新する感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/e6aa675a-14bd-1688-537d-beddb300d4a2.png)

自分の自己紹介でもどうぞ
スキルは選択項目になっていて、選んだ物が下にチップとして表示されます。
チップは×を押すと消えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/ddd75d9f-441e-3cb2-0269-d211cf81b539.png)

拡散したいもののURLやそれが何なのかを書いてあげます。
私だとポートフォリオのURLやGithubのアカウントとかですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/d80852c0-2f6b-ede0-9cba-a2eba7bc3810.png)

###3. 技術者発掘
注意書きに沿って検索をいきなりどかっと押します(男らしい)
ログインしている場合は一覧に詳細表示と書かれたボタンが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/e60a84d6-43e5-6bd5-5a40-659af12f8268.png)

件のボタンを押すとカルーセルでその人の情報が出てきます。
もうちょっオシャレにすべきですね。。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/a66a6c7e-94b5-b4a8-8021-ef8d0a6c1d3e.png)

マイページに入力したものはこんな感じに出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/8ae5ade0-4c2d-0158-4cd3-4f0e3949d5a0.png)

#4.もっとやりたいこと
掲示板の部分とかなんか面白いことできないかなと思案中
サーバーサイドの処理をかしこく実装したい。

#5.終わりに
進捗については台風のせいにしときます。
Ubuntu 18.04 gdm3 で synergy を自動起動するメモ

## 背景

synergy でマウスとキーボード共有している.
クライアントの Ubuntu 18.04 でログインウィンドウ(greeter 画面)で synergyc を起動させて, synergy 経由でキーボードを受け付けログインできるようにしたい.
Ubuntu 16.04 では lightdm だったが, 18.04 では gdm3 になったようで設定方法がわからずつらい.

lightdm に切り替えて解決という手もありますが, なんかうまく lightdm に切り替えができなかなかったので gdm3 で設定できるようにしたい. 

## gdm3 での設定

gdm3 での設定例がありますが,

https://help.ubuntu.com/community/SynergyHowto
https://major.io/2008/07/30/automatically-starting-synergy-in-gdm-in-ubuntufedora/

しかし, howto などにあるように `/etc/gdm3/Init/Default` に記載してもうまくいきません.

じつは, Ubuntu 18.04 の gdm3 のバージョンではこのファイルを読んでくれないバグ(?)があります. 

https://github.com/symless/synergy-core/wiki/Startup

https://bugs.launchpad.net/ubuntu/+source/gdm3/+bug/1774081
(結局 gnome 側で, このバグ(?)は治らずに close になっているっぽい)

## 解決

`/usr/share/gdm/greeter/autostart`

に `.desktop` ファイルを作るように仕様が変わった(?)ようです.

https://askubuntu.com/questions/1055061/ubuntu-18-04-autostart-script-with-gdm

`/usr/share/gdm/greeter/autostart/synergyc.desktop` のファイルを作り,

```
[Desktop Entry]
Type=Application
Name=synergyc
Exec=/usr/bin/synergyc 192.168.100.10
NoDisplay=true
X-GNOME-AutoRestart=true
```

のような記述をするといけます(IP address は適宜変更ください)
あとは再起動なり, `sudo systemctl restart gdm3` とすると反映され, マウスとキーボードを greeter 画面で受け付けるようになります!

今回は client の設定を説明しましたが, server も同様にいけるはずです.

## 感想

Ubuntu + gdm/lightdm とかの設定ファイル, いろいろと散らばっていてどれを設定すればよいのか分からずつらい.
`/etc/rc.local` に指定しようにも, 最近の Ubuntu 18.04 だと `rc.local` ファイルが無くなったっぽい?
【Cocoapods】pod setupが失敗する.. bufferが足りなかった

## pod setupでErrorが出る

```
$ sudo gem install cocoapods
/* 成功 */


$ pod setup
/* 失敗 */
Setting up CocoaPods master repo
  $ /usr/local/bin/git clone https://github.com/CocoaPods/Specs.git --progress -- master
  Cloning into 'master'...
  remote: Enumerating objects: 93, done.        
  remote: Counting objects: 100% (93/93), done.        
  remote: Compressing objects: 100% (84/84), done.        
👉error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
  fatal: the remote end hung up unexpectedly
  fatal: early EOF
  fatal: index-pack failed
[!] /usr/local/bin/git clone https://github.com/CocoaPods/Specs.git --progress -- master

Cloning into 'master'...
remote: Enumerating objects: 93, done.        
remote: Counting objects: 100% (93/93), done.        
remote: Compressing objects: 100% (84/84), done.        
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

```

## 原因：bufferが足りていなかった
### .gitconfigを編集

```
/* ルートディレクトリに移動 */
$ cd ~

/* .gitconfigをviで編集 */
$ vi .gitconfig
```
ref: [vi/vimについて](#viの基本)

### .gitconfigに追記

.gitconfigのpostBufferをとりあえず大きく設定する

```
# This is Git's per-user configuration file.
[user]
        email = [address]@gmail.com
        name = [username]
[core]
        editor = vim

[http]
        postBuffer = 16M 👈(追記)
```

ref:[【Cocoapods】 pod setupにて error: RPC failed; curl 56 SSLRead() return error -36| 2.27 MiB/s](https://chuckwebtips.hatenablog.com/entry/2017/12/29/130911)

---
##### viの基本
viには入力モードとコマンドモードがあり、
`[i]` で入力モード <-> `[esc]` でコマンドモード
で２つのモードを切り替えることができます。

入力モードは一般的なテキスト入力で、
コマンドモードでは保存等の機能を扱うことができます。

| key       | 内容           |
|-----------|----------------|
| i | 挿入モード |
| [esc] | コマンドモード |
| ZZ | 上書き保存しvimを終了 |
| :w |  内容を保存 |
| :q! | 保存せずに終了 |
| h,j,k,l | ←,↓,↑,→(移動) |

[よく使う Vim のコマンドまとめ](https://qiita.com/hide/items/5bfe5b322872c61a6896)
Xcode 11 の Accessibility Inspector がとても便利

WWDC 2019 の [Accessibility Inspector](https://developer.apple.com/videos/play/wwdc2019/257/) の動画から、Xcode 11 のアクセシビリティインスペクターの機能について紹介します。

アクセシビリティ対応をしようと思ってもどこから手を付けていいかわからなかったり、そもそもどこがアクセシビリティ観点でマズイのかわからず困ったりすることもあったと思います。が、Xcode 11 のアクセシビリティインスペクターは普段のコードのデバッグと同じように問題点を見つけ、修正することができます。一度触って体感してみてください。

※ここに貼っている画像は、上記動画をスクショしたものです。

# Accessibility Inspector の起動方法

メニューバーから Xcode -> Open Developer Tool -> Accessibility Inspector で起動できます。
<img width="400" alt="スクリーンショット 2019-08-17 21.24.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/39dab3d0-dbcb-0353-0224-5be9b82a6805.png">
ターゲットを選択するとこのような画面になります。
<img width="500" alt="スクリーンショット 2019-08-17 21.26.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/e6410d0c-820d-a567-f13e-6ac48865f23b.png">

# 対応が必要な箇所を見つけるには

右上には3つのボタンがあります。
<img width="400" alt="スクリーンショット_2019-08-17_18_22_32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/0ab4b4dc-b17b-e87f-61c0-e5b49c73848f.png">
Audit（検査？）タブから「Run Audit」をクリックすると、アプリ内に存在するアクセシビリティ上の問題点が一覧で表示されます。
<img width="400" alt="スクリーンショット 2019-08-17 18.33.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/f2071a14-7ec0-1879-6a72-3afe35923009.png">
クリックするとアプリの対象箇所がハイライトされます。
<img width="500" alt="スクリーンショット 2019-08-17 18.36.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/eb3a351e-154b-8eb7-6f1c-b55bde21f4eb.png">
行の右端の「？」マークをクリックすると、修正方法のサジェスチョンが出てきます（この例ではaccessibilityLabelの設定を勧められています）。
<img width="500" alt="スクリーンショット 2019-08-17 19.20.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/2bcf40a1-c586-437c-322d-63603f2213a6.png">
右上インスペクタボタンをクリックし、さらに Start inspection follows point ボタンをクリックしてからシミュレータの画面要素をマウスオーバーすると、アクセシビリティに関連する様々な項目を見ることができます。また、Speak ボタンをタップすると VoiceOver を使っている時と同じように音声を再生してくれます。
<img width="600" alt="スクリーンショット 2019-08-17 19.25.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/b02f8a22-d300-0f2e-a682-a3f8fc29a5c9.png">

# アクセシビリティラベルを変更する場合

ここで、例えば画像のラベルが単なる画像ファイル名になってしまっていること、ボタンのラベルが機能を的確に表していないことなどが判明したとします。その場合はコードで適切なラベルを設定する必要があります。

```swift
button.accessibilityLabel = "Buy"
```

もしデフォルトでアクセシビリティ対応がされない要素を使っている場合は自分で対応させる必要があります。方法としてはフラグを立て、ラベルを付与するだけです。

```swift
view.isAccessibilityElemment = true
view.accessibilityLabel = "\(brandName)"
```

# コントラスト比を高めるには

コントラスト比が適切でなかった場合もちゃんと警告が出てくれます。
<img width="500" alt="スクリーンショット 2019-08-17 19.54.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/4c52afe0-9256-a58e-5c0f-fc637e66f6a3.png">
アクセシビリティインスペクタの Color Contrast Calculator を使うと、推奨値以上のコントラスト比を確保できる色がなんなのかを簡単に知ることができます。メニューバーの Window から Show Color Contrast Calculator を選択するとツールを表示することができます。スライダーをずらせば元の色合いを変えることなく、コントラスト比の高い色を探せます。
<img width="500" alt="スクリーンショット 2019-08-17 21.19.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/9f19870b-1d49-1419-bf9d-ec1c882a0460.png">
Hantek USB デジタル オシロスコープ 6022BL 

表題のオシロを使う用のソフトをいろいろ調べたときのメモ
しばらく使ってなかったのでうしろのボタンなんだ


ざっと調べると使えそうなソフトはこのぐらいある

- hantek純正
- sigrok
- OpenHantek
- BasicScope
- saleae

です。OpenHantekはビルドが面倒なので試してませんが他は試しました。

# オシロ用途
大差なし、無難に純正がおすすめ


# ロジアナ用途

saleaeがおすすめ。ロジアナは8chになりますがトリガも使えるしドライバ内蔵なので楽ちん。

sigrokもトリガを使えますが、ドライバが若干面倒

純正は16ch使えますがトリガがないので実用性が皆無

# 両方OK

今のとこよさそうなのなし。
Vue v-for

#v-for 使いかた

```html

        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
        <script>
            var app4 = new Vue({
                el: "#app-4",
                data: {
                    todos:[
                        {text: 'Learn JavaScript'},
                        {text: 'Learn Vue'},
                        {text: 'Build something awesome'},
                    ]
                }
            })
        </script>
```

コンソールで　app4.todos.push{text: 'New item' }) と入力すると、リストに新しいアイテムが追加される
【ど素人が作る】Android+Kotlin入門 - MVP

# MVP(Model + View + Presenter)

## なんでMVP？
- MVCで書いてるとActivityがViewとControllerの役割を担ってしまうためFatActivity(Activityに処理が集まってしまう)になってくらしい。  
- 実質Activity=ViewなのでControllerの機能だけでも引きはがしたい。  
- ○○Listenerでイベント受け取って処理しなければいけないのはどうしようもない。   
- なので「○○Listener」での処理の中身はActivity外に移そうよ(Presenter)って方針になったぽい。

[1.参考](https://medium.com/eureka-engineering/android-activity%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E3%82%92%E4%B8%8A%E6%89%8B%E3%81%8F%E6%9B%B8%E3%81%8F%E3%82%B3%E3%83%84-f14fa11224fe)

#### ひとまず結論
**簡単なTodoアプリで実装してみたけどあんまり恩恵は感じなかった**
**ちゃんとFatControllerに対して適用したらよい感じなんだろうなー...**

## 調べた
[2.googlesamples](https://github.com/googlesamples/android-architecture/tree/todo-mvp/todoapp/app/src/main/java/com/example/android/architecture/blueprints/todoapp)

- 上のやつはFragmentを使う場合ぽい  
`Fragment`は共通レイアウト用意して、コンテンツだけ差し替えるときとかに使うと良いらしい。  
- インターフェースでContractorなるものを作成して、ViewとPresenterでそれぞれ実装される機能を定義しておく。  
これはViewとPresenterが何やってるか分かりやすくするためだと思われ。
- Activityに定義されているものに関してはActivityに実装
- Fragmentの実装がまるっとContractor.Viewに寄せられるのでActivityの見通しは良くなりそう

```
interface HogeContractor{

  interface View {
    // ViewのimplementはFragmentと継承して実施
  }

  interface Presenter {
    // おそらく外部とのやり取り回りをまとめる
  }
}
```

## 実装してみた
先のTodoアプリをMVPに書き直してみた。
[ソースはこちら](https://github.com/masamiShim/android-prac/tree/feature/mvp-sample)

一旦、上記のgooglesamplesを参考にしてやったこと。

**Activity(onCreate)の処理なくなった**
Presenterの作成とPresenter.start()呼び出すだけ。これはいいのか？
**ディレクトリ構成変わった**
機能ごとにディレクトリ作るらしい
**PresenterとViewの役割がわけわからんことになった**
お互い呼び出せるのでちゃんと役割分担はっきりさせないとあっち行ったりこっち行ったりになりそう。

##※1.の参考で脳内実装してみた
上記のやつだとシンプルなMVPにならなそうだったので再度※1の参考から脳内で実装をシミュレーション。

やることはシンプルでListenerやonCreateなどのメソッド内部の処理をPresenterに実装する。

```
// ActivityではPresenterの初期化と画面のイベントリスナー回りを設定するだけ
// 実処理はPresenterに委譲する
class HogeActivity: AppCompatActivity() {
   private lateinit var presenter: HogePresenter;
   override fun onCreate(){
       super.onCreate(savedInstanceState)
       setContentView(R.layout.xxxxxxx)

       // presenterの初期化
       presenter = HogePresenter(getContext(), this)
       // presenterに初期化処理を委譲
       presenter.onCreate()
   }

   
}

// Activityでの処理の中身
class HogePresenter(val mContext: Context, val activity: HogeActivity){
   fun onCreate(){
   }
}
```

もうちょい設計について学ばないとなー
Arduino等の組み込みソフトウエアのデバックでシリアルデバックができない所にLED点灯を仕掛ける

###概要
ArduinoでシリアルデバックができないときにLEDを使って点灯条件で目に見えるようにする方法。
なお、#define LED_PIN 13　は、Arduino NANO上にあるLEDを指定しています。
他にも面白いものがあったら教えてください。
***
###LEDの長点灯・短点灯で数値等を確認
数値の情報を長・短の点灯で判断ができます。
LightMes(0xa0,4); と書くと、0xa0 → 二進数に変換し、1010 0000b より、
長光と単光を組み合わせて、ー・ー・ とLEDが点灯します。

```c++
#define LED_PIN 13 // LED(status LED) on/off pin
//-----------------------------------------------------
// LED を使って、メッセージを表示させる。
//上位ビットから吐き出す
// ex 0xa0,4 -> 1010 -> ー・ー・
//-----------------------------------------------------
void LightMes( char sig ,char set)
{
  char cnt;
  for( cnt = 0 ; cnt<set ; cnt++ ){
    if( sig & 0x80){
      digitalWrite(LED_PIN, HIGH); // 長光
      delay(1000);
      digitalWrite(LED_PIN, LOW);
      delay(200);
    } else {
      digitalWrite(LED_PIN, HIGH); // 短光
      delay(200);
      digitalWrite(LED_PIN, LOW);            
      delay(200);
    }
    sig = sig << 1;
  }
      delay(400);
}
```
***
###LEDの点灯判断１
LOOP内等に仕込む方法で、通過するたびに点灯と消灯を繰り返します。
ブール演算子の! (否定)を使用しているところが面白い処理です。
delayが入っていないので、時間がシビアな所に仕掛けるのに適しています。

```c++
#define LED_PIN 13 // RUN_LED(status LED) on/off pin
void LightMes()
{
   digitalWrite(LED_PIN, !digitalRead(LED_PIN));
}

```
***
###LEDの点灯判断２
単純に通ったらちょっと光らせる方法です。

```c++
#define LED_PIN 13 // RUN_LED(status LED) on/off pin
void pulse()
{
  digitalWrite(LED_PIN, HIGH); // 短光
  delay(100);
  digitalWrite(LED_PIN, LOW);
}
```
***
###LEDの点灯判断3
単純に通ったらちょっと光らせる方法です。
digitalwrite()の処理時間を嫌って、直接ポート処理する方法

```c++
#define LED_PIN 13 // RUN_LED(status LED) on/off pin
void pulse()
{
//digitalWrite(LED_PIN, HIGH); // 短光
  PORTB |= _BV(5);
  delay(100);
//digitalWrite(LED_PIN, LOW);
  PORTB |= ~_BV(5);
}
```
***
###Arduinoのポートと直接制御し処理の高速化
お行儀が悪いプログラムになりますが直接ポートを制御するには、PORTD,PORTBとBV（）を使用します。
※_BVのアンダーラインが表示されていない箇所がりますので、注意（Qiitaの仕様？！）

Arduino Port　,　ATmega Port　,　BIT_on　,　BIT_off
DIGITAL I/O 0pin　,　PD0　,　PORTD |= _BV(0);　,　PORTD &= ~_BV(0);
DIGITAL I/O 1pin　,　PD1　,　PORTD |= _BV(1);　,　PORTD &= ~_BV(1);
DIGITAL I/O 2pin　,　PD2　,　PORTD |= _BV(2);　,　PORTD &= ~_BV(2);
DIGITAL I/O 3pin　,　PD3　,　PORTD |= _BV(3);　,　PORTD &= ~_BV(3);
DIGITAL I/O 4pin　,　PD4　,　PORTD |= _BV(4);　,　PORTD &= ~_BV(4);
DIGITAL I/O 5pin　,　PD5　,　PORTD |= _BV(5);　,　PORTD &= ~_BV(5);
DIGITAL I/O 6pin　,　PD6　,　PORTD |= _BV(6);　,　PORTD &= ~_BV(6);
DIGITAL I/O 7pin　,　PD7　,　PORTD |= _BV(7);　,　PORTD &= ~_BV(7);
DIGITAL I/O 8pin　,　PB0　,　PORTB |= _BV(0);　,　PORTB &= ~_BV(0);
DIGITAL I/O 9pin　,　PB1　,　PORTB |= _BV(1);　,　PORTB &= ~_BV(1);
DIGITAL I/O 10pin　,　PB2　,　PORTB |= _BV(2);　,　PORTB &= ~_BV(2);
DIGITAL I/O 11pin　,　PB3　,　PORTB |= _BV(3);　,　PORTB &= ~_BV(3);
DIGITAL I/O 12pin　,　PB4　,　PORTB |= _BV(4);　,　PORTB &= ~_BV(4);
DIGITAL I/O 13pin　,　PB5　,　PORTB |= _BV(5);　,　PORTB &= ~_BV(5);
コレスキー分解をJavaScriptで実装する

# 1. 背景
> ※ この記事では実行列のみを対象としている。

行列 $A$ が対称かつ正定値のとき、下三角行列 $L$ とその転置によって $A$ を以下のように分解できることが知られており、そのような分解をコレスキー分解（Cholesky Decomposition, Cholesky Factorization）と呼ぶ。

$$
A = L L^T
$$

Pythonなら[numpy.linalg.cholesky](https://docs.scipy.org/doc/numpy-1.15.0/reference/generated/numpy.linalg.cholesky.html)によってコレスキー分解をすることが可能だが、JavaScriptのメジャーなライブラリには実装されていない。個人的にJavaScriptで行列計算を行いたい場合は[math.js](https://mathjs.org/)や[TensorFlow.js](https://www.tensorflow.org/js?hl=ja)をまず検討するのだが、前者にはLU分解やQR分解、後者にはQR分解が実装されているだけである。
コレスキー分解を提供しているJavaScriptのライブラリも無くはないのだが、今回は自分で実装することにした。

# 2. 実装
以下のページを参考に実装した。コード上のindex等はこの記事に合わせている。
https://rosettacode.org/wiki/Cholesky_decomposition

```javascript
function choleskyDecomposition(matrix) {
  // Argument "matrix" can be either math.matrix or standard 2D array
  const A = math.matrix(matrix);
  // Matrix A must be symmetric
  console.assert(math.deepEqual(A, math.transpose(A)));

  const n = A.size()[0];
  // Prepare 2D array with 0
  const L = new Array(n).fill(0).map(_ => new Array(n).fill(0));

  d3.range(n).forEach(i => {
    d3.range(i+1).forEach(k => {
      const s = d3.sum(d3.range(k).map(j => L[i][j]*L[k][j]));
      L[i][k] = i === k ? math.sqrt(A.get([k, k]) - s) : 1/L[k][k] * (A.get([i, k]) - s);
    })
  });
  return L;
}
```

d3.jsとmath.jsに依存している。d3の依存性を除きたければfor文等で容易に代替できるはず。

# 3. Usage
二次元配列またはmath.jsのmatrixを引数に与えると、二次元配列として行列 $L$ を返す。
以下のようにするとコレスキー分解の正しさを確かめることができる。

```javascript
const m1 = [[25, 15, -5],
            [15, 18,  0],
            [-5,  0, 11]];
const L1 = choleskyDecomposition(m1);

math.deepEqual(m1, math.multiply(L1, math.transpose(L1)))
// => true
```

# 4. Demo
JavaScriptでインタラクティブなノートブックを作成できるObservableというサービスがあり、そこに公開している。
https://observablehq.com/@sw1227/cholesky-decomposition
[HIG] アクセシビリティ - コンテンツ

この記事は Apple の Human Interface Guideline の Accessibility - [Content](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/content/) の部分を翻訳したものになります。正確な情報は公式ページを御覧ください。なお、言葉遣いには気をつけているつもりですが、不適切な部分がありましたら編集リクエストをください。

# コンテンツ

コピー文、画像、音声、動画はアプリに求められている情報を提供することができます。表現の簡素化に努めたり、代替情報を提供したりすることで、誰もがコンテンツにアクセスできるようにすることができます。

# コピー文と画像

**シンプルで明瞭になるようコピー文を編集しましょう。**コピー文が簡潔で、ミスがない状態であれば、すべてのユーザにとって良い状態になります。

**意味を持つ全ての画像に代替テキストを付けましょう。**意味のある画像に何の説明もないと、VoiceOver ユーザがアプリのすべてを体験することができなくなってしまいます。有用な説明にするためには、画像が見える人に画像自体が何であるかを述べてみるところから始めてみましょう。VoiceOver は画像やキャプションを囲むテキストを読み取るため、画像自体が表す情報に説明を集中させましょう。

**インフォグラフィックを完全にアクセシブルにしましょう。**説明的なインフォグラフィックに簡潔な説明を付けましょう。もしインフォグラフィックがあることでより多くの情報や異なる情報を得られるのなら、VoiceOver ユーザにもこれらが利用できる状態にする必要があります。アクセシビリティAPIは、アクセシビリティ支援技術が VoiceOver ユーザの助けとなるよう、カスタムインタラクションを表現する手段を提供しています。開発者向けのガイダンスは [UIKit Accessibility](https://developer.apple.com/documentation/uikit/accessibility)、[AppKit Accessibility](https://developer.apple.com/documentation/appkit/accessibility) を御覧ください。

**単なる装飾画像をアクセシビリティ支援技術から隠してください。**VoiceOver に単なる装飾画像まで説明させてしまうとユーザの時間を無駄にし、何のメリットもないまま認知的負荷だけ増やすことになってしまう可能性があります。

**各画面に一意のタイトルを付けたり、情報階層がわかるように見出しを付けたりしましょう。**ユーザが画面を開いたとき最初にアクセシビリティ支援技術から受け取る情報はタイトルです。ユーザがアプリの構造を理解できるよう、各画面にコンテンツや目的を簡潔に表した一意のタイトルを付けましょう。同様に各画面の情報階層の脳内マップを作成するために、正確なセクション見出しも必要です。

# オーディオとビデオ

**クローズドキャプションを提供しましょう。**クローズドキャプションはビデオの音声と同じ情報をテキストで提供します。クローズドキャプションは同じコンテンツに対して複数の翻訳を提供できたり、ユーザ設定にマッチしたバージョンを提供することができます。クローズドキャプションがいつでも利用できるとは限らないため、字幕の提供も大切になってきます。開発者向けガイダンスは [Adding Subtitles and Alternative Audio Tracks](https://developer.apple.com/documentation/avfoundation/media_assets_playback_and_editing/adding_subtitles_and_alternative_audio_tracks) を御覧ください。

**オーディオディスクリプションを提供しましょう。**オーディオディスクリプションを使用して、視覚情報のみで表されている重要な情報の音声ナレーションを提供しましょう。

**トランスクリプトの提供を検討してみてください。**ユーザが様々な方法でビデオを楽しむことができるよう、音声情報と視覚情報の両方がカバーできるテキストを提供すると良いです。
VisualStudioのincludeファイルパス設定について

VisualStudioにはincludeする際にコードを省略できる**インクルードディレクトリ**を設定することが出来ます。
# 場所
プロジェクト→右クリック→プロパティ
![pro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368850/496fab70-13f0-1ebe-8e76-49b3b95e0424.png)
→構成プロパティ→VC++ディレクトリ→インクルードディレクトリです。
![インクルードディレクトリ_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368850/f555a2ce-95ac-b89b-354b-98699e3ca60d.png)


# 使い方
例えばファイルの場所が下記の通りだと仮定します。
![zu5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368850/f3c1149d-255b-15be-df5d-902c82f10f61.png)

main.cppでEffectRender.hをincludeしたい場合

```:main.cpp
#include "Effect/EffectRender/EffectRender.h"
```
となりますよね。
でもインクルードディレクトリを設定すると

```:main.cpp
#include "EffectRender.h"
```
という風にコードを省略することが出来ます！
# 書き方
例えば、ファイルが下記の状態と仮定します。
![zu4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368850/151ba4fa-95d7-0ac4-1b3d-90be02cb0271.png)

main.cppからEffect.hをincludeしたい場合、インクルードディレクトリを

```
$(ProjectDir)/../;
```
や

```
$(SolutionDir)/;
```
という風に設定するといいでしょう。

ProjectDir・・・プロジェクトファイルのあるフォルダ
SolutionDir・・・ソリューションファイルのあるフォルダ
.. ・・・一つ上の階層のフォルダ
# メリット
一つはやはりコードが省略出来るということでしょう。

もう一つはファイルの移動による影響が少ないということです。
例えば
![zu3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368850/4ce5132f-0ba5-480c-6685-675bc75fc9e6.png)
のようにObject.hを複数のファイルでincludeしていた場合、Object.hが移動したら各ファイルのincludeのコードを変えなければいけませんよね？でもインクルードディレクトリを設定していたら、そこを変えるだけでよくなるのです。
An error occurred while installing cld3 (3.2.3), and Bundler cannot continue. Make sure that `gem install cld3 -v '3.2.3' --source 'https://rubygems.org/'` succeeds before bundling.

## mastodonのbundle installでエラー


```
An error occurred while installing cld3 (3.2.3), and Bundler cannot continue. Make sure that `gem install cld3 -v '3.2.3' --source 'https://rubygems.org/'` succeeds before bundling.
```

gem 'cld3 'が入らない。
ターミナルの出力を試すもエラー。

```
$ gem install cld3 -v '3.2.3' --source 'https://rubygems.org/'
Fetching cld3-3.2.3.gem
Fetching ffi-1.9.25.gem
Building native extensions. This could take a while...
Successfully installed ffi-1.9.25
Building native extensions. This could take a while...
ERROR:  Error installing cld3:
	ERROR: Failed to build gem native extension.
```

## An error occurred while installing cld3 (3.2.3), and Bundler cannot continue. Make sure that `gem install cld3 -v '3.2.3' --source 'https://rubygems.org/'` succeeds before bundling.の【解決コピペコード】

```
& brew install protobuf

==> Downloading https://homebrew.bintray.com/bottles/protobuf-3.7.1.mojave.bottle.1.tar.gz
==> Downloading from https://akamai.bintray.com/41/410f34fc3240dc94c16bf74e3317b56d987acddc361228c03e6b10e8373588fb?__gda__=exp=1566130248~hmac=642c7bdd88089e35b5a9443d7567bd783a
######################################################################## 100.0%
==> Pouring protobuf-3.7.1.mojave.bottle.1.tar.gz
🍺  /usr/local/Cellar/protobuf/3.7.1: 374 files, 21.3MB
MacBook-Pro-4:mastodon jun$ brew install protobuf-compiler
```

入った！！！

```
$ bundle install --path=vendor/bundle


Fetching cld3 3.2.3
Installing cld3 3.2.3 with native extensions
Fetching connection_pool 2.2.2
Installing connection_pool 2.2.2
Fetching safe_yaml 1.0.4
Installing safe_yaml 1.0.4
Fetching crack 0.4.3
Installing crack 0.4.3
Fetching css_parser 1.6.0
Installing css_parser 1.6.0
Fetching get_process_mem 0.2.3
Installing get_process_mem 0.2.3
```

キターーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー🎉🎉🎉🎉🎉

参考
http://31webcreation.hatenablog.com/entry/2018/03/26/223926
https://qiita.com/k-yamada-github/items/a748a5ea4aafdcd3cee2
MNCTF2018 穴埋防御★★★

#問題

http://mnctf.info/mnctf2018/tasks.php

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/6ef3b508-3127-d31c-592d-618b02e012de.png)

#解いてみた

不審なファイルを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/59454f0e-3321-8399-cc20-42f52f74dc93.png)

こんな感じのが延々続いている。
base64風ではあるけどよくわからない。

Yaraルールを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/436c6161-3de4-4c2d-77b4-a2fb9e1348e3.png)

とのこと。
とりあえず不振ファイルをbase64してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/218b2900-a70a-de1d-992f-6282f4118cd2.png)

いい感じで復元できました。
が、Mutexよくわかりません。
復号した最後にまだ復号できそうなものがありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/57435eb1-039a-181e-695b-fbf457b83e3f.png)

これも復号してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8f389c22-7d5c-96fd-ef7d-289e918c0621.png)

ZM？？？
MZなら実行ファイルですけど。。。
もしやXOR？
XOR Broute Forceしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b79f1d59-ba8c-c241-4e82-82a1ad42090a.png)

MZありました。
安定の「!This program cannot be」ありますし、これで間違いなさそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/3718ca07-fb8a-2e1d-0954-d608579050e9.png)

ファイルとして保存します。
中身を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/4bafdcc5-c7ee-3250-a3f2-7b5779eebcd0.png)

CreateMutexはありますが、肝心の何がMutexかわかりません。
IDAのfreeを使って中身を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b8702dfb-4cb1-ec1b-1164-5577322ec4df.png)

Mutexを使っているところにどうやって飛べばいいのか？
たぶんできると思うけどよくわからず。
地道にFunctionを上から見ていきます。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/93ecd0e8-186e-b87e-343b-24d720673c78.png)

幸運にも2つ目に出てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/c5acbde9-b53b-f9b0-8257-d60ad1919c51.png)

IDAをもっと使えるようになりたいですね。
自作Eventクラスに入力補完を適用させる

# はじめに
**TypeScript** を使って、Node.jsのアプリケーションを開発しているときに、 *入力補完* は活用していることでしょう。
この記事は、 **引数が特定の条件である場合の入力補完を効かせる方法** を、 `EventEmitter` の拡張を題材として執筆しました。

# コーディング
作成したコードは [walk8243/TypeScript-EventEmitter](https://github.com/walk8243/TypeScript-EventEmitter) にあります。

目的の *引数が特定の条件である場合の入力補完を効かせる方法* を実現するために重要となる技術は、 **オーバーロード** です。
ということで、オーバーロードについて書いていきます。

## オーバーロード
詳しく知りたい方は、 [TypeScript Deep Dive](https://typescript-jp.gitbook.io/deep-dive/type-system/functions#brdo) をご一読ください。

まず、普通にクラスを作成してみます。

```.ts
class Power {
  get(type: string, index: number) {
    if(type == 'square') {
      return index ^ 2;
    } else {
      throw new Error('type is `square` only.');
    }
  }
}
```

次に、これにオーバーロードしてみます。

```.ts
class Power {
  get(type: 'square', index: number): number;
  get(type: string, index: number) {
    if(type == 'square') {
      return index ^ 2;
    } else {
      throw new Error('type is `square` only.');
    }
  }
}
```

このようにすることで、入力補完として第一引数に `square` が表示されるようになります。
また、次のように書くこともできます。

```.ts
class Power {
  get(type: 'square', index: number) {
    if(type == 'square') {
      return index ^ 2;
    } else {
      throw new Error('type is `square` only.');
    }
  }
}
```

オーバーロードするときのポイントとしては、必ず *処理を行う関数・メソッドを書くこと* です。
例え、クラスで親クラスのメソッドをそのまま使う場合であっても、メソッドを書く必要があります。
次に実際にEventEmitterを継承したクラスでもって試してみたいと思います。

## EventEmitterの継承
イベントとして、 `keyboard`, `enter`, `escape`, `mouse` の4つ作成しました。

```.ts
import { EventEmitter } from 'events';
export class Event extends EventEmitter {
  on(event: 'keyboard', listener: () => void): this; // listenerに引数無しのパターンを作成
  // on(event: 'keyboard', listener: () => void): this; // すべての引数が同じパターンを記述することはできない
  on(event: 'enter' | 'escape', listener: () => void): this; // listenerの引数のパターンが同じなのでまとめる
  on(event: 'mouse', listener: (mouseX: number, mouseY: number) => void): this; // listenerに引数を追加
  on(event: string, listener: (...args: any[]) => void) {
    return super.on(event, listener); // 継承元を呼び出すだけでも処理を書く
  }

  emit(event: 'keyboard' | 'enter' | 'escape'): boolean; // 引数のパターンが同じなのでまとめる
  emit(event: 'mouse', x: number, y: number): boolean; // 引数のパターンが違うので分ける
  emit(event: string, ...args: any[]) {
    return super.emit(event, ...args); // 処理を書く
  }
}
```

これで以下のように入力補完を使うことができるようになりました。

![入力補完1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183540/b0dc530d-f9d9-682f-17d9-56ae87312040.jpeg)
![入力補完2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183540/a1f15a60-3d48-69b8-39c0-bc1e5d2dc5fb.jpeg)


# おわりに
基本的に入力補完の効くエディタで開発をしていることと思います。
複数人で開発している場合、誰かが開発したコードを違う人が使うようなケースがあることと思います。
そのような場合、ドキュメントだったり口頭だったりで使い方を伝えてもいいですが、簡単な部分に関しては入力補完で事足りることでしょう。
また、TypeScriptの型定義は、入力補完だけでなく、コンパイルにチェックしてくれるので、デプロイ前にエラーを発見することにも繋がります。
積極的に型定義を行っていきましょう！

## オーバーロードのまとめ
型定義をしていく上で、オーバーロードを使う機会は出てくると思うので、最後に使い方をまとめておきます。

1. 必ず処理を書く。
2. 型を詳細化するようにオーバーロードする
3. 全く同じ引数の型パターンでは記述できない
Mac mini 2018 で初期設定時にApple wireless keyboardが認識しない（未解決）

# Mac mini 2018初期設定時  
## 使用入力機器  
  1. **Apple Wireless Keyboard**
  2. **Microsoft Wireless Mobile Mouse 3500**

## 電源投入時の状況
  マウスまたは**Magic Track Pad**の電源ONを促すアニメーションは表示されるも、キーボードはに対しては何も表示されず。マウスを接続するとカーソルを動かすことが可能となり、初期設定を進めることができる。

## 初期設定で文字入力は求められる
　初期設定時、Apple ID入力時にキー入力を求められる。これはスキップできるが、**初期アカウント作成時はスキップできない。**結果、入力することができず、初期設定は完了できなかった。 

## USB有線キーボード接続にて対応
　結局解決方法は見つけられず、家にあったUSB有線キーボード接続にて対応した。これで初期設定は完了することができた。（当然か）
　当然のことながら初期設定は最初の一回だけであるので、この問題の解決方法はわからずじまい。旧型のApple Wireless Keyboardだと認識しないという情報もあるが、詳細はわかっていない。

## 初期設定完了後だと認識させることは可能  
  初期設定完了をすると、Apple Wireless Keyboardを認識させることができた。ただし、これも通常ではないようだ。初期設定完了直後、キーボードを認識させるための画面が表示されたが、この画面上ではApple Wireless Keyboardを認識させることはできなかった。（指定のキーを押しても認識しない）
　「システム環境設定」の「Bluetooth」（「キーボード」ではないことに注意）から、デバイスを見ると、ペアリング待ち状態の機器が一つ現れる。（MACアドレスのような番号が表示されていた）　この機器をペアリングさせることで認識させることができた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132084/5e86af86-a086-bd6c-2b19-1f1759186cfd.png)

　一度認識させれば、普段の操作には問題ないだろう。

## Magic Track Pad2 は必要？
　Macbook Proを持っていることもあり、Track Padでの操作に慣れてしまったためか、マウスでは操作できないことがたくさんあると感じた。やはり、マルチタッチの操作は優秀だ。今後のためにも、購入を検討したい。
PowerAppsのキャンバスアプリでラベルのTextの動的変更

#概要
PowerAppsのキャンバスアプリでラベルコントロールで表示する値をボタン押下によって変更するアプリを作成する。

##キャンバスアプリの作成
#####操作：「作成」「キャンバスアプリを一から作成」の順でクリックする。
![TestApp01_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/8be34573-8252-c248-057f-155827843ed0.png)

##キャンバスアプリで変数を作成する
PowerAppsで変数を初期化するにはアプリケーションの起動時または画面の表示時のイベント処理で変数の初期化を行う式を設定する。
アプリケーション全体で使用できる変数を初期化する場合はAppのOnStartインベントの式にSet関数を使って変数を初期化する。
画面内で使用するローカル変数を初期化する場合は、Screen1のOnVisibleイベントでUpdateContextを使って変数を初期化する。
ここでは画面の表示時に初期化する。
#####操作：「Screen1」を選択して、「OnVisible」イベントの式に描きを入力する。
```
UpdateContext({MyName:""})
```
![TestApp01_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/5d34b1b8-dad3-a7e4-fa14-18c36bcb36f3.png)

※UpdateContextはローカル変数をJSON式で設定するPowerAppsの関数

##変数を確認する
#####操作：メニューの「ビュー」「変数」の順にクリックする。
![TestApp01_03b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/e28b0de3-03ba-eedf-e8cf-9f7b81c57855.png)
#####操作：「Screen1」をクリックする。
Screen1のローカル変数が表示される。
ここでは「MyName」が変数として認識されていることが確認できる。
![TestApp01_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/718738d0-442b-25c8-5b15-1db20de0a3b0.png)

##テスト用の画面を作成する
Screen1にラベルコントロール１つとボタンコントロールを２つ貼り付ける。
ボタンコントロールのテキストをそれぞれ「ボタン１」「ボタン２」にする。
![TestApp01_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/2d93a803-8cee-1a64-c7c7-2135cf862bb9.png)

##ラベルコントロールに変数を割り当てる
ラベルコントロールを選択しTextプロパティに変数「MyName」を割り当てる
画面上部の*fx*欄に設定する必要がある。
![TestApp01_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/f49ee055-1500-3e4c-c648-64eba60a14ae.png)
※「"MyName"」とならないように注意する。

##ボタンの押下ときにラベルの表示値を変更する式を設定する
#####操作：ボタン１の「OnSelect」に次の式を設定する。
```
UpdateContext({MyName:"ボタン1"})
```
UpdateContext関数によって変数「MyName」の値を「ボタン１」に更新している。
#####操作：ボタン２の「OnSelect」に次の式を設定する。
```
UpdateContext({MyName:"ボタン2"})
```
UpdateContext関数によって変数「MyName」の値を「ボタン２」に更新している。
![TestApp01_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/3aa85bb3-b593-a38f-6351-e2389799c61c.png)

MyName変数の値を書き換えることによりラベルコントロールの値の書き換えができる。

##動作確認
動作確認はPowerAppsのアプリ一覧の「再生」から実行する。
PowerAppsの開発画面のテスト実行から起動した場合はScreen1のOnVisibleが動作しないため注意が必要。
![TestApp01_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/e150da76-8baf-a090-0a64-071150962e3b.png)
左がボタン１押下時、右がボタン２押下時
![TestApp01_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197947/b3c4c04e-60f3-8451-65ce-67534caae72c.png)



##環境
|アプリ|バージョン|
|---|---|
|powerapps|3.19081.20|
MNCTF2018 盗難情報★★☆

#問題

http://mnctf.info/mnctf2018/tasks.php

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/468c049d-17c2-b270-8291-b288d354d41e.png)

#解いてみた

```
XOR（シングルバイトキー）→ Base64 → ROT13
```

ということなので、その逆をやれば復号できますよね。
XORのシングルバイトキーはわかりませんが。

とりあえずROT13とbase64

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/4ae31db5-2704-e1c6-c0c4-1c42b798f30b.png)

XORどうしようかなと思ったらXOR Brute Forceとかいうのがあることに気づいた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/85928e6b-9aeb-dce2-f759-8989862ead48.png)

これを使ってみるといろいろなキーでXORやってくれるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/39807262-14de-6c66-d112-d592e0acfb9e.png)

この中からうまく復号できてそうなものを見つける。

01からffまで確認したもののうまく復号できてそうなものが見当たらない。。。
とか思ってるとkey=15のときがPNGになってることに気づく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8da329a6-fcef-7158-697d-e947db286d25.png)

これは画像ファイルなんでしょうか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/08547188-8aec-6fee-280d-09aba1b5d6af.png)

画像ファイルっぽいです。
これをファイルとして保存して中身を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/d0fad00c-dd91-64a8-fdaf-d1af18f1e8e7.png)

ちゃんと画像として表示されて製品名もしっかり書かれていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/3d364736-3333-138f-175e-b089155f122c.png)
【Nuxt.js】CircleCIでビルドログが出ない時の対処

 Nuxt.jsをCircleCiで`yarn build`したけど、ビルドファイルがうまく生成されないことがあった。

しかもCircleCiでこけない....


## 解決法
`nuxt.config.js`で以下の設定をすれば良い

```javascript
build: {
+  quiet: false,
}
```

公式ドキュメントに書いてあった 
https://ja.nuxtjs.org/api/configuration-build/#quiet

> ビルド出力ログの大半を抑制します

> 型: Boolean
> デフォルト: std-env によって CI または test 環境で検出された際に有効になります

これでエラーが出力されるのでCIでコケる

CIで動かした時にコケないのは困ったもんだ
Google Bigqueryでのテーブル作成方法(CSVインポート/カラムのtypeを変更したい場合）


CSVファイルをbigqueryにインポートする場合で、カラムのtypeを変更して取り込みたい場合のメモ

## やりたい事
・CSVファイルをbigqueryにインポートする時にtypeを明示的に変更したい
・CSVファイルの1行目にヘッダーが入っている為、スキップしたい

## 取り込み対象のCSV例
```
prefecture_code,prefecture_name,general_name,Japanese_calendar_year,year,note,population_total,population_male,population_woman
"00","全国","大正",9,1920,"",55963053,28044185,27918868
"01","北海道","大正",9,1920,"",2359183,1244322,1114861
"02","青森県","大正",9,1920,"",756454,381293,375161
"03","岩手県","大正",9,1920,"",845540,421069,424471
"04","宮城県","大正",9,1920,"",961768,485309,476459
～　省略
```

## 取り込み手順
#####1. bigqueryのコンソールからテーブルを作成したいプロジェクトとDBを選択して、CREATE TABLEを選択する。 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/7a5767df-4229-c5c0-49a5-857c3874f7b6.png" width=100% ALT="bigqueryへのCSV→テーブル作成方法2_1">

#####2. テーブル作成用コンソールが出現する為、以下のようにアップロードしたいファイル名と拡張子、bigquery上に作成するテーブル名を指定する 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/09e310b9-482e-6ec3-f9a3-3c26cbfd36e3.png" width=80% alt="bigqueryへのCSV→テーブル作成方法2_2">
#####3. 1行目のヘッダー項目を残すと取り込みエラーが出る為、1行目をスキップ指定する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/64837294-c7d3-b22b-a393-fdb038eec072.png" width=80% alt="bigqueryへのCSV→テーブル作成方法2_3">


#####4. 項目指定した通りにCSVが取り込まれる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/26aa3545-b86c-5884-2fd6-956a7f2c4b46.png" width=60% alt="bigqueryへのCSV→テーブル作成方法3_1">
Jetson NanoでTensorRTのメモ

####リポジトリのclone
```
$ git clone https://github.com/tensorflow/models
```

####Protocol Bufferをインストール
```
cd ./models/research
wget -O protobuf.zip https://github.com/protocolbuffers/protobuf/releases/download/v3.7.0/protoc-3.7.0-linux-aarch_64.zip
unzip protobuf.zip
./bin/protoc object_detection/protos/*.proto --python_out=.
```

####テスト
```
export PYTHONPATH=$PYTHONPATH:`pwd`:`pwd`/slim
python3 object_detection/builders/model_builder_test.py
```

####モデルのダウンロード
```
cd
git clone https://github.com/karaage0703/object_detection_tools
~/object_detection_tools/models
./get_ssd_mobilenet_v1_coco_model.sh
```

####TensorRT
```
cd
git clone https://github.com/NVIDIA-AI-IOT/tf_trt_models
cd tf_trt_models
```

####convert
```
cp ../object_detection_tools/scripts/convert_rt_model.py .
python3 convert_rt_model.py -c='../models/research/object_detection/samples/configs/ssd_mobilenet_v1_coco.config' -m='../object_detection_tools/models/ssd_mobilenet_v1_coco_2018_01_28/model.ckpt' -o='./frozen_inference_graph_trt.pb'

python3 convert_rt_model.py -c='../models/research/object_detection/samples/configs/ssd_inception_v2_coco.config' -m='../object_detection_tools/models/ssd_inception_v2_coco_2018_01_28/model.ckpt' -o='./frozen_inference_graph_trt.pb'
```
####importの追加
```python:object_detection.py
import tensorflow as tf
import tensorflow.contrib.tensorrt as trt # <-- add
```

####物体検出
```
cd ./object_detection_tools
python3 scripts/object_detection.py -l='models/coco-labels-paper.txt' -m='../tf_trt_models/frozen_inference_graph_trt.pb' -d='jetson_nano_raspi_cam'
```

####お世話になった情報
https://qiita.com/karaage0703/items/67050f2418aa6bb3851a