OmniAICreator/Qiita-1.07M huggingface dataset:
G Suite（Google Apps Script）とVue.jsの連携


```ruby:vue.html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>  
  var app = new Vue({
    el: '#app',
    data: {
      email: '',
    },
    methods:{
      initEmail: function(sessionEmail){
        this.email = sessionEmail;
      },           
    },
    created: function(){
      google.script.run
        .withSuccessHandler(this.initEmail).getLoginID();
    },
  })
</script>
```

```ruby:コード.js
function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}

function getLoginID() {
  var email = Session.getActiveUser().getEmail();
  Logger.log(email);
  return email;
}

```

```ruby:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="app">
    {{ email }}
  </div>
  </body>
  <?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>
```
G Suite(Google Apps Script)で、HTMLページを開発

# GASでHTMLを表示させるアプリケーションを作成

### スクリプトエディタを開く
1.G Suiteにログインした状態で、[script.google.com](https://script.google.com "script editor") にアクセス
2.[新しいプロジェクト]をクリックして、スクリプトエディタを開く
3.プロジェクト名をつける

### コードを編集

1.ファイル[コード.gs]を開いて、以下のコードをコピーして上書きする。

```ruby:コード.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}
```



2.[ファイル]>[New]>[HTMLファイル]とクリックして、ファイル名を[index.html]として保存
3.<body>部分に<?!= Session.getActiveUser().getEmail();?>を追記する。

```ruby:完成イメージ[index.html]
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?!= Session.getActiveUser().getEmail();?>
  </body>
</html>
```

#### ウェブアプリケーションとして公開
1.[公開]>[ウェブアプリケーションとして導入]をクリックして、ファイル名を[index.html]として保存

Execute the app as:Me
Who has access to the app:Only myself

2.[Deply]ボタンをクリック[latest code]というリンクが表示されるのでそこをクリックすると最新のウェブアプリケーションを確認できます。

3.ログインしたユーザーのメールアドレスが表示されていれば成功


## 参考
- Google Apps Script
  - [リファレンス > Script Serveices > HTML > Class HtmlOutput](https://developers.google.com/apps-script/reference/html/html-output.html "Class HtmlOutput")
Java 7以降でのEnumの差別

１．中黒「.」(U+30FB)が使えなくなったため

　　例：
　　Java 7 以前の場合
　　　enum 学校 {
　　　　　 ...
　　　　　 保育園・幼児園
　　　}
　　Java 7　以後の場合
　　　enum 学校 {
　　　　　 ...
　　　　　 保育園幼児園
　　　}
【ACM CHI】簡易マーカートラッキングの実装

ドコモの箱田です．
普段はFinTechの研究に従事していますが，実は細々とHuman Computer Interaction（HCI）研究も行っています．

この記事では，僕が興味を持っているスマホを使ったインタラクション研究について，簡易マーカートラッキングを例にとってご紹介します．

## スマホインタラクション？
市販されているスマホにおける新たな操作手法を考えたり，スマホを使った〇〇をリッチにしたりする研究です．
最近は，スマホAR/VRにおける体験の質を向上させる研究をしています．

スマートフォンを使ったインタラクション研究には，生活を豊かにする大きな可能性があると個人的には思っています．
その理由は，スマホを誰もが携帯していること，汎用デバイスであること（Input/Outputが豊富），およびアップデートされ続けることにあります．

つまり，
誰もが持っているスマホだからこそ，少し工夫を行えば，高価なデバイスを購入しなくては味わえないリッチな体験を多くの方に提供できる可能性があります．
それがスマホインタラクション研究の魅力だと思っています．

## 研究例：簡易マーカートラッキング

スマホインタラクションの例として，ACM CHI2018のLBWで発表した，スマホVRにおける簡易マーカトラッキングを簡単にご紹介します．

#### モチベーション
偶然にも，僕の手元に[Jedi challenges](https://www.lenovo.com/jp/ja/jedichallenges/)という，スター・ウォーズの世界観を味わうことができるリッチなスマホARヘッドセットがありました．
ライトセーバーを模したコントローラとトラッキングビーコンも付属されており，ライトセーバーの位置や動きを精緻に検出できまして，これによってARアプリケーション上でジェダイになってライトセーバーで戦うことができるんですね．
これ自体非常にエキサイティングでしたが，僕はもっと手軽にジェダイになりたいと考えたわけです．

#### 要件
そこで，下記の要件を満たす仕組みを作ろうと考えました．

- スマホ＋身の回りのもので実現できる（低コスト）
- ライトセーバー（とみなすモノ）をトラッキングできる

#### アプローチ
上記の要件を満たすために，一般的な再帰性反射マーカを使ったモーションキャプチャを，スマホで簡易的に実装できないか考えてみました．

再帰性反射材というのは，よく自転車のペダルやランドセルに貼ってあるあの素材です．
照射光がそのまま返ってくる光学素子です．
これ自体は発光しませんが，例えば車のライトが当たるとそのままドライバーに強い光が反射しますので，衝突事故のような危険防止に大いに活用されています．
![retro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542815/d9d65b2d-597f-726d-570e-536a66dbaf2e.png)

この再帰性反射材は，いわゆるモーションキャプチャのマーカにも活用されています．
一般的なモーションキャプチャでは，目に見えない赤外線を再帰性反射マーカに当て，その反射を基にマーカの位置を認識します．
赤外線を使うことによって，マーカからの反射とそれ以外の背景とを分離をすることができるのですが，
一般的な多くのスマホには赤外線フラッシュライトおよびカメラは備えられていないので，従来の仕組みでは実現できません．

そこで，スマホが標準的に備えているカメラとフラッシュライトでも実現できるように，カメラのシャッタースピードを調節するという方法を考えました．
周りの背景よりも，スマホのフラッシュライトを反射している再帰性反射材のほうが強く光りますので，シャッタースピードを短くして，取り込む光量を抑えることによって，再帰性反射材からの反射光のみを撮影することができるのです．

例えば，(a)の場面に対して，それぞれシャッタースピードが（ｂ）
20ms，（ｃ）0.8ms，（ｄ）0.13msのときの画像です（2値化処理してます）．
（ｃ）の0.8msくらいのシャッタースピードの時が，安定してマーカを検出できるようですね．

![shuatter speed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542815/950441ca-5907-8ad0-9672-bf6647649570.png)

Androidであれば，Camera2 APIからシャッタースピードを変化させることができます（後々機会があれば，別途記事にします）．

ということで，下記の図のように，再帰性反射材を筒状のなにかに貼り付け，ユーザはスマホVRを被る．ただこれだけで，ジェダイになることができるようです．

![proposal2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542815/8bfcd696-2915-63cf-dbd0-7b2e485d9f33.png)


#### 応用
マーカーの位置を認識してVRアプリケーションに活用するだけでも良いのですが，認識したマーカの個数や位置関係を工夫することによって，操作を定義することもできます．

例えば，マーカの個数を増やすギミックを用意すれば，ライトセーバーを変化させたり，銃を撃つようなアプリケーションを作ることができます．
スマホVRアプリケーションとして実装してみましたが，なかなか楽しめます（Unity上でCamera2 APIを使うところで少し苦労したので，追々記事に）．
![sword_gun.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542815/6dbe775b-1df0-ca05-565a-db3ea2efcbc7.png)

## ACM CHIについて
最後に，この研究を発表させてもらったACM CHIという会議について簡単にご紹介を．

正式名称は「The ACM CHI Conference on Human Factors in Computing Systems」で，ACMが主催するHCIにおける最高峰の国際会議です．
UISTと並ぶトップカンファレンスであり，ヒューマンファクターに関連する分野すべてがそろうといっても過言ではないほど大きな会議です．
UISTと比較して評価寄りの論文が多い印象です（あくまで個人の感想です）．
毎年数百のペーパーが発表されるので，すべてを把握することは非常に困難ですが，
[CHI勉強会](https://sigchi.jp/seminar/chi2019/)が毎年開催されていますので，こういったイベントを活用して網羅的に研究を眺めてみることをおすすめします．

## おわりに
スマホインタラクションの一例，簡易マーカートラッキングを簡単にご紹介しました．
少し工夫すれば，リッチな体験をスマホで実現できたりしますので，
ぜひ皆さんもなにか作ってみてください．
【2019年12月版】MacのHomebrewでMongoDBが見つからない問題の解決法

QiitaでMacにMongoDBをインストールする記事を探すと、古く実行できない記事が多いので、2019年12月現在インストールできる方法を書いておこうと思います。

# 普通にHomebrewではインストールできない？
MongoDB を MacOSX にインストールしようと思い、以下のコマンドを実しました。

```:bash
$ brew install mongodb
```

しかし、以下のようなエラーが出てきました。

```
Warning: homebrew/core is shallow clone. To get complete history run:
  git -C "$(brew --repo homebrew/core)" fetch --unshallow

Error: No previously deleted formula found.
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
==> Searching taps...
==> Searching taps on GitHub...
Error: No formulae found in taps.
```

MongoDBが見つからないと出てきます。 
どうやら Homebrew の Core Repository からは、MongoDBは削除されたようです。
(Qiitaには、この方法で入れる記事がたくさんありますが...)

# 解決方法
MongoDB公式で、 `brew tap` を使ってMongoDBのリポジトリを参照して入れることが推奨されています。

```bash:bash
# MongoDBのリポジトリを参照
$ brew services start mongodb-community

# MongoDBをインストール
$ brew install mongodb-community

# MongoDBを実行
$ brew services start mongodb-community

# MongoDBのバージョンを確認
$ mongo -version
MongoDB shell version v4.2.1
...

```

以上でインストールと確認ができると思います。

### 詳細は、公式リファレンスをご確認ください。
__Mongo DB Official Reference__  "Install MongoDB Community Edition on macOS"
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/
[Oracle] DB内の特定のカラムを持つテーブルを検索する

特定のカラムを持つテーブルの一覧を出力するSQLです。
よく使うのでメモ。

```sql
SELECT   TABLE_NAME, COLUMN_NAME
FROM     USER_TAB_COLUMNS
WHERE    COLUMN_NAME='検索したいカラム名'
ORDER BY TABLE_NAME, COLUMN_NAME
;
```
Ruby on Railsで時間が溶けた凡ミス集

# はじめに
「Ruby on Rails 速習実践ガイド」をひととおり終え、自分でToDoアプリを作ってみたいと思い、下記の記事を参考に「Ruby on Rails 速習実践ガイド」で作成した Taskleafに機能を追加してみた。
https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4

#上手くいかなかった点

### ①イベントがカレンダーに表示されない
今回参考にしていたWebサイトのようにEventという名前でモデル・コントローラーを作成したのではなく、Taskをそのまま使っていたので、JSON形式で情報をカレンダーに渡す際、変数名に気をつけなければいけなかった。

### ②Datetimepickerを使ってカレンダーで選んだ日時が表示されない
slimの書き方が分かっておらず、Datetimepickerの実装の仕方に苦労した。
slim形式でHTMLを書く際、動的クラスの書き方には注意すべき。

### ③週表示・1日表示の際に時間が軸に表示されない
こちらはcssに書いていた.fc-time { display: none; }が原因だった。

#感想

改めて見返してみると「エラーの原因これ？」と拍子抜けするようなミスでたくさん悩んでいた…。今後はもっと気をつけていきたい。


### 参考Webサイト
ユーザーの新規登録をログイン画面からも可能にする
https://blog.kansolink.com/develop/ruby/how-to-build-user-signup/

jbuilderを使ったJSONの返し方
https://ruby-rails.hatenadiary.com/entry/20150108/1420675366

日付選択をカレンダー形式でやる方法
https://qiita.com/nozomi53motomachi/items/fef1b90e69b4a3b52bf7
https://qiita.com/akishin/items/ef197a312a3cb245c0b3
https://blog.hello-world.jp.net/javascript/1762/
https://eonasdan.github.io/bootstrap-datetimepicker/
https://github.com/pingcheng/bootstrap4-datetimepicker

Tempus Dominusの使い方
https://tempusdominus.github.io/bootstrap-4/Usage/
Mac に #Stripe CLI のコマンドをインストールするには brew install stripe/stripe-cli/stripe

[Using the Stripe CLI | Stripe](https://stripe.com/docs/stripe-cli)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2805








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
JavaScript の null と undefined の違い

nullもundefinedもどちらも値がないことを表すものだが、意味合いは異なる。
以下で、違いについてまとめる。

## null

- nullはNULLというシンボル
- 意図を持って変数にnullを代入して値がないことを示す

```javascript
var a = null;
console.log(a);    // null
```
※ 空文字を代入すると空文字という値が存在していることを示す

```javascript
var b = "";
console.log(b);
```

## undefined

- 変数を宣言し、値を代入する前の値（変数に値が代入されていない）

```javascript
var c;
console.log(c);    // undefined
```

- 存在しないオブジェクトのプロパティを読み出そうとしたときの値

```javascript
var object = {};
print(object.hoge);    // undefined
```

- 存在しない配列の要素を読み出したときの値

```javascript
var array = [1,2,3];
console.log(array[5]);    // undefined
```

## まとめ
nullは明示的に設定しなければ存在しない値のこと
undefinedは値の内容が存在しないときに暗黙的に設定される値のこと

### 参照
- [null と undefined の違い](https://qiita.com/shuhei/items/199281e07925d24059d5)
- [JavaScript - null と undefined](https://murashun.jp/blog/20190401-05.html)
- [JavaScriptでのnull（undefined）チェック](https://www.deep-rain.com/programming/javascript/646#JavaScriptnull)
- [【JavaScript入門】null・undefinedの代入・判定・変換まとめ！](https://www.sejuku.net/blog/23762)
react-hooks-workerの紹介

## はじめに

React Hooksを使うと、非同期処理を比較的簡単に書くことができます。つまり、async/awaitをhooks内に隠蔽することができます。Web Workerを手軽に利用する有名なライブラリとして[comlink](https://github.com/GoogleChromeLabs/comlink)がありますが、WebWorkerとの通信は非同期であるためawaitをつけなければいけません。そこで、より手軽に扱えるReact Hooks専用のWeb Workerラッパーを紹介します。

## react-hooks-worker

リポジトリはこちらです。

<https://github.com/dai-shi/react-hooks-worker>

このライブラリでは、Web Workerとの通信をstateを介して行うため、async/awaitをあまり意識する必要がないことが特徴です。

Web Workerを手軽に使うには、bundlerのサポートが重要です。各種プラグイン等がありますが、今回使用したのはwebpackの[worker-plugin](https://github.com/GoogleChromeLabs/worker-plugin)です。これにより、workerでも外部ライブラリが使えるようになります（本記事での使用例の紹介は無し）。

## 使用例

フィボナッチ数を計算する例を紹介します。まずは、workerの実装です。

```javascript
// slow_fib.worker.js:

import { exposeWorker } from 'react-hooks-worker';

const fib = i => (i <= 1 ? i : fib(i - 1) + fib(i - 2));

exposeWorker(fib);
```

次に、これを利用するReactコンポーネントの実装です。

```jsx
// app.js:

import React from 'react';
import { useWorker } from 'react-hooks-worker';

const createWorker = () => new Worker('./slow_fib.worker', { type: 'module' });

const CalcFib = ({ count }) => {
  const { result, error } = useWorker(createWorker, count);
  if (error) return <div>Error: {error}</div>;
  return <div>Result: {result}</div>;
};

const App = () => (
  <div>
    <CalcFib count={5} />
  </div>
);
```

これだけで、workerが使えるようになります。重い計算処理（かつ、結果が小さい場合）は、どんどんworkerにoffloadしましょう。

## 発展的な使い方

上記の例ではworkerの実装は単純な関数でしたが、実は、非同期関数やgeneratorでも動きます。列挙すると使えるパターンは下記になります。

- sync function
- async function
- sync generator function
- async generator function

参考までに、async generatorでフィボナッチ数の計算過程をゆっくりと出力するworker関数を載せます。

```javascript
// fib-steps.worker.js

import { exposeWorker } from 'react-hooks-worker';

async function* fib(x) {
  let x1 = 0;
  let x2 = 1;
  let i = 0;
  while (i < x) {
    yield `(calculating...) ${x1}`;
    await new Promise(r => setTimeout(r, 100));
    [x1, x2] = [x2, x1 + x2];
    i += 1;
  }
  yield x1;
}

exposeWorker(fib);
```

workerの処理をプログレッシブに表示する場合などにこのパターンが使えるのではないでしょうか。

## おわりに

本ライブラリではworkerは関数として表現されますが、comlinkは様々なオブジェクトをサポートしています。よく紹介されるのはworkerをclassとして実装する例ですが、このパターンを好む人がいることを知りました。react-hooks-workerでも様々なパターンをサポートすることが今後の改題の一つになりそうです。
【iPadOS13/Xcode11対応】画面が全画面で表示されなくなってしまったのでその対応を行った(Xcodeのキャプチャ付き)

# はじめに
iOSアプリ(iPad前提)開発中に、iOS12からiPadOS13(Xcode10から11)に上げたことで、**もともと全画面で表示されていた画面が、中央に小さく表示される**ようになってしまいました。


本記事ではその時の対応方法（「segueの設定による対応」と「コードによる対応方法」の2種類）を記載します。

# 前提
- Xcode Version 11.2 
- iPadOS13

# 対応前の画面表示
画面の遷移先がこのように中央に小さく表示されてしまいます。

![スクリーンショット 2019-12-04 8.51.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145054/c13a4f6e-64d5-6b1e-b176-54a5cce846c7.png)

# 対応方法
iOS12(Xcode10)の際にSegueで画面遷移を行っていた箇所は「**対応方法1:segueの設定による対応**」で、コードで画面遷移を行っていた箇所は「**対応方法2:コードによる対応**」で対応する必要があります。

## 対応方法1: segueの設定による対応
1. 画面遷移を行っているsegueを選択
![スクリーンショット 2019-12-04 8.54.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145054/66ae22e0-6965-9185-9790-286417230730.png)

2. Storyboard SegueのKindを**Present Modally** に変更
![スクリーンショット 2019-12-04 9.07.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145054/7c107fe5-758e-a6ba-ba7a-011458e733d9.png)


3. Storyboard SegueのPresentationを**Full Screen**に変更
![スクリーンショット 2019-12-04 9.05.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145054/10ff70e8-d5c3-81a1-e227-4804ae2259c7.png)


この設定で期待通り遷移先が全画面表示になる
![スクリーンショット 2019-12-04 9.08.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145054/f138b1c4-f094-c6c8-a1b6-a7ab6285b6d2.png)

## 対応方法2: コードによる対応
画面遷移前に、modalPresentationStyleを.fullScreenに変更すれば、期待通り全画面で表示される。

```swift
let vc = UIViewController()

// 下記を追加する
vc.modalPresentationStyle = .fullScreen

self.present(vc, animated: true, completion: nil)

```

# 参考
私は、下記記事を参考に対応しました。原因なども下記記事に記載あります。

- [爆速でiOS13に対応するためにやったこと](https://qiita.com/orimomo/items/840629f2c2bad7014a1d#%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E8%A1%A8%E7%A4%BA%E3%81%AE%E5%A4%89%E6%9B%B4)
- [Presenting modal in iOS 13 fullscreen](https://stackoverflow.com/questions/56435510/presenting-modal-in-ios-13-fullscreen)
RoboCup参加に向けて,自作Turtlebot bringupとGmappingの連携

# 始めてのアドカレ
ROS2 アドベントカレンダーの4日目です.
ROS2を使ってRoboCupで戦えるようにGmappingを使えるようにしたというお話です.

# RoboCup
言わずと知れた大会で,来年の3月に名古屋で,7月ぐらいにフランスはボルドーであります！
それらに私は参加します!
そして,その参加に向けてプログラムの作成を行なっています!
でも,Pythonはサポート終了だし,Ubuntu16もサポートはもう直ぐ切れるし...
そこで,チャレンジとして,ROS2でやってみようということを思いました.

## 苦難の道へようこそ
さて,RoboCup @Home educationの競技は今年同様なら,
1. Speech and Person Recognition (SPR)
2. Restaurant
3. Help me carry
4. final
以上の4つのはずです.
そして,現在できてるのは,SPRのみ！
さてさて,Japan Openまでに間に合うのやら？笑

## Restaurant競技
Restaurant競技はロボットをレストランで活用するために行っている競技です.
なので,まずは環境の地図の生成を行わないといけません.なので,私たちのチームはGmappingを利用して,地図の生成を行うことにしました.

## やったこと
自作した[Turtlebot bringup](https://github.com/ItoMasaki/turtlebot_bringup)でどうにかGmappingを使えるようにしないといけませんので,まずはTopic名をGmappingに合わせました.
しかし,base_linkがどうたらこうたらといってきたので,初めてTFに手を出します.
Gmappingは座標の変換を
map -> odom
としてくれます.なので,Turtlebot brinup側を
base_link -> odom
とするので,

```
odom_trans.header.stamp = get_clock()->now();
odom_trans.header.frame_id = "odom";
odom_trans.child_frame_id = "base_link";
odom_trans.transform.translation.x = N_position_x;
odom_trans.transform.translation.y = N_position_y;
odom_trans.transform.translation.z = 0;
odom_trans.transform.rotation = translateCoordinate(0.0, 0.0, N_orientation_theta);
odom_broadcaster->sendTransform(odom_trans);
```
と設定を行い,
うまく動作させることに成功しました.
(動画は後日追加します.)
でも,Gmappingの自己位置推定を可視化したいということもあり,Gmappingをごちゃごちゃいじって,[nav_msgs/msg/Odometry](http://docs.ros.org/melodic/api/nav_msgs/html/msg/Odometry.html)でパブリッシュするようにプログラムを一部書き換えました.
最終的にRviz2では以下のような感じに可視化することができました.
(動画は後日追加します.)

# RoboCupに向けて...
まだまだ問題は山積みですが,ROS2をRoboCupでも使われるチームが増えることを期待して,これからもTwitterやQiitaで情報を発信していこうと思います.
IoTの分野でもROS2は活躍できると思うので,私たちサークルは,その方面でもロボットと連携できるように模索していきます.
ありがとうございました!
(なんかRoboCupに参加することを主張しすぎた...しかもぐだった...)
BeagleBone Green/PocketBeagleのNode-REDを最新バージョンにする

BeagleBone Green/PocketBeagleのOS、bone-debianには、Node-REDがプレインストールされています。
このプレインストールされているNode-REDのアップグレードは、パッケージbb-node-red-installerをアップグレードするように[案内](https://nodered.jp/docs/getting-started/beaglebone)されていますが、あまりメンテナンスされていないようで、本家のNode-REDと比べてバージョンが古いままになっています。

Node-REDを最新バージョンにするために、bb-node-red-installerを使わずにNode-REDをアップグレードしてみましょう。

# PocketBeagleの場合：インターネットに接続する

PocketBeagleは、以下のいずれかの方法でインターネットに接続してください。

1. [PocketBeagleをUSB経由でインターネットに接続する](https://qiita.com/matsujirushi/items/a700137d7ea43e0569ef)
2. [PocketBeagleにUSB Wi-Fiを追加する](https://qiita.com/matsujirushi/items/6c572bb0511713d101b5)

# インストール済みパッケージを更新

念のため、リポジトリ一覧とパッケージを更新します。

```bash
debian@beaglebone:~$ sudo apt update
debian@beaglebone:~$ sudo apt upgrade
```

# Node.jsを更新

Node.jsを更新します。
現在、最新LTSはv12ですが、[諸般の事情](http://matsujirushi.hatenablog.jp/entry/2019/11/09/115539)があり、ここではNode.jsをv10にします。

```bash
debian@beaglebone:~$ node -v
v6.17.0
debian@beaglebone:~$ sudo sh -c 'curl -sL https://deb.nodesource.com/setup_10.x | bash -'
debian@beaglebone:~$ sudo apt-get install -y nodejs
debian@beaglebone:~$ node -v
v10.17.0
```

# node-red.socketを停止

node-red.socketがポート1880を監視していて、アクセスがあるとnode-red.serviceを起動する仕組みになっていますが、無い方がスッキリするのでnode-red.socketを停止します。

```bash
debian@beaglebone:~$ sudo systemctl stop node-red.socket
debian@beaglebone:~$ sudo systemctl disable node-red.socket
```

# node-red.serviceを停止

ポート1880にアクセスしていなければnode-red.serviceは停止していますが、念のため、node-red.serviceを停止します。

```bash
debian@beaglebone:~$ sudo systemctl stop node-red
```

# Node-REDをアップグレード

npmコマンドで、Node-REDをアップグレードします。

```bash
debian@beaglebone:~$ cd /usr/local/lib
debian@beaglebone:~$ sudo npm install --unsafe-perm node-red
```

# Node-REDのバージョンを確認

node-red.serviceを起動して、ポート1880にアクセスしてNode-REDのバージョンを確認します。

```bash
debian@beaglebone:~$ sudo systemctl start node-red
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/38b503c8-b4b0-7580-4004-bc5b489c9a78.png)
Linuxのシステム情報を表示するツール

教えていただいた便利ツールの備忘録です。  
次のようにインストールして使用します。  
  
``` bash: Debian/Ubuntu の場合
sudo apt install inxi
```
  
``` bash: CentOS の場合
yum config-manager --enable PowerTools
yum -y install inxi
```
  
``` bash: inxi の使用例
master@sv-debian:~$ sudo inxi -Fxxxz
System:    Host: sv-debian Kernel: 4.19.0-6-amd64 x86_64 bits: 64 compiler: gcc v: 8.3.0 Console: tty 0 dm: LightDM 1.26.0
           Distro: Debian GNU/Linux 10 (buster)
Machine:   Type: Vmware System: VMware product: VMware7,1 v: N/A serial: <filter> Chassis: No Enclosure type: 1 serial: N/A
           Mobo: Intel model: 440BX Desktop Reference Platform serial: N/A UEFI: VMware v: VMW71.00V.6997262.B64.1710270607
           date: 10/27/2017
CPU:       Topology: Quad Core model: Intel Core i7-6700 bits: 64 type: MCP arch: Skylake-S rev: 3 L2 cache: 8192 KiB
           flags: lm nx pae sse sse2 sse3 sse4_1 sse4_2 ssse3 bogomips: 27200
           Speed: 3400 MHz min/max: N/A Core speeds (MHz): 1: 3400 2: 3400 3: 3400 4: 3400
Graphics:  Device-1: VMware SVGA II Adapter driver: vmwgfx v: 2.15.0.0 bus ID: 00:0f.0 chip ID: 15ad:0405
           Display: server: X.org 1.20.4 driver: vmware unloaded: fbdev,modesetting,vesa tty: 200x50
           Message: Advanced graphics data unavailable in console for root.
Audio:     Device-1: Ensoniq ES1371/ES1373 / Creative Labs CT2518 driver: snd_ens1371 v: kernel bus ID: 02:01.0
           chip ID: 1274:1371
           Sound Server: ALSA v: k4.19.0-6-amd64
Network:   Device-1: Intel 82371AB/EB/MB PIIX4 ACPI vendor: VMware Virtual Machine type: network bridge driver: N/A port: 2150
           bus ID: 00:07.3 chip ID: 8086:7113
           Device-2: VMware VMXNET3 Ethernet driver: vmxnet3 v: 1.4.16.0-k port: 3000 bus ID: 03:00.0 chip ID: 15ad:07b0
           IF: ens160 state: up speed: 10000 Mbps duplex: full mac: <filter>
Drives:    Local Storage: total: 60.00 GiB used: 603.28 GiB (1005.5%)
           ID-1: /dev/sda vendor: VMware model: Virtual S size: 60.00 GiB serial: N/A rev: 1.0 scheme: GPT
Partition: ID-1: / size: 55.26 GiB used: 5.00 GiB (9.1%) fs: btrfs dev: /dev/dm-0
           ID-2: /boot size: 236.3 MiB used: 59.0 MiB (25.0%) fs: ext2 dev: /dev/sda2
           ID-3: swap-1 size: 4.00 GiB used: 0 KiB (0.0%) fs: swap dev: /dev/dm-1
Sensors:   Message: No sensors data was found. Is sensors configured?
Info:      Processes: 201 Uptime: 5m Memory: 3.83 GiB used: 492.0 MiB (12.5%) Init: systemd v: 241 runlevel: 5 Compilers:
           gcc: 8.3.0 alt: 8 Shell: nologin (sudo) running in: tty 0 (SSH) inxi: 3.0.32
master@sv-debian:~$
```
foliumを使ってみた

## はじめに
最近foliumという、データを地図上で表示するライブラリを使ってみたので、勉強しながら記事にまとめてみました。



## foliumとは
[Folium](https://python-visualization.github.io/folium/)はデータを[Leaflet.js](https://leafletjs.com/)のマップで可視化をするpythonのライブラリです。

pythonのデータ操作とleafletのマッピングの両方の強みが利用できます。

Github:https://github.com/python-visualization/folium
Documentation:https://python-visualization.github.io/folium/

## インストール
pip installでインストールできます。


```python:foliumのインストール
$ pip install folium
```

## 地図を表示してみよう！
まずはjupyterで東京駅([35.681167, 139.767052])を中心とした日本地図を表示。
`location`に緯度経度を入力すると、その位置を中心としたmapが表示できます。


```python:東京駅を中心とした日本地図をplot
import folium
map_ = folium.Map(location=[35.681167, 139.767052], zoom_start=7)
map_
```

<img width="972" alt="スクリーンショット 2019-12-03 14.31.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217571/783c6ed4-9c15-6f7f-ed72-1d18c3f7444e.png">

3行だけで地図が表示できました。

次は作成した日本地図に、百貨店の位置情報をマッピングしてみます。
百貨店の位置情報はHPで検索し、csvファイルとして保存しました。

csvファイルはこんな形式で保存しています。(`department_info.csv`)

|| store_name|	contry	|area	|prefecture	|city	|address	|latitude	|longitude	|depart|
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|0	|日本橋三越本店	|日本	|関東	|東京都	|中央区	|東京都中央区日本橋室町1-4-1|	35.685633|	139.773430|	三越|
|1	|銀座三越	|日本	|関東	|東京都	|中央区	|東京都中央区銀座4-6-16	|35.671370|	139.765738|	三越|
|・・・|
| 88 | ShinQs ビューティー パレット 町田店 | 日本 | 関東 | 東京都 | 町田市 | 東京都町田市原町田6-4-1 町田東急ツインズ WEST 3F | 35.542690 | 139.446409 | 東急百貨店 |
| 89 | ながの東急百貨店 | 日本 | 中部 | 長野県 | 長野市 | 長野県長野市南千歳1-1-1 | 36.645052 | 138.188676 | 東急百貨店 |


```python:先ほど表示したmapに百貨店のマーカーを追加する
import pandas as pd
data = pd.read_csv('department_info.csv')
color_list = {'三越':'red', '大丸':'blue', '西武・そごう':'green', 
              '高島屋':'purple', '阪急阪神':'orange', '東急百貨店':'darkred'}
for k, v in data.iterrows():
    folium.Marker([v.latitude, v.longitude], popup=v.store_name, icon=folium.Icon(color=color_list[v.depart])).add_to(map_)    

map_
```

<img width="971" alt="スクリーンショット 2019-12-03 15.13.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217571/e1dd436a-dbcb-5364-3793-4a1be0490d6a.png">

* `popup=xxx`
xxxにコメントを追加すると、ポップアップとして表示できます。


* `icon=folium.Icon(color=xxx1, icon=xxx2)`
マーカーiconの種類はxxx1とxxx2を指定すると変更できます。

 xxx1に使用できるカラー

```
[‘red’, ‘blue’, ‘green’, ‘purple’, ‘orange’, ‘darkred’,
’lightred’, ‘beige’, ‘darkblue’, ‘darkgreen’, ‘cadetblue’, 
‘darkpurple’, ‘white’, ‘pink’, ‘lightblue’, ‘lightgreen’, 
‘gray’, ‘black’, ‘lightgray’]
```

 xxx2に使用できるマーカー
https://glyphsearch.com/?library=font-awesome


次は表示した百貨店ごとに、半径20kmの円を表示してみます。

```python:百貨店から20km圏を円で表示
for k, v in data.iterrows():
  folium.Circle([v.latitude, v.longitude], radius=20 * 1000, tooltip='20km', popup=v.store_name
                              , color=color_list[v.depart], fill_color=None).add_to(map_)

map_
```

<img width="972" alt="スクリーンショット 2019-12-03 16.34.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217571/0dc12aaa-91d3-375f-6efa-5192cf031a28.png">


最後に作成したmapをhtml形式で保存しました。

```python:作成したmapを保存
map_.save('department_location.html')
```

## おわりに
思った以上に簡単に、綺麗な地図可視化することができました。
Rubyで書いたバックアップツールの紹介

# 目的
社内で色々なバックアップをしていましたが、個別にbashを書いていてメンテナンスしにくいと思ったので、Rubyでまとめてみました。

# 仕様
1. バックアップしたい対象はそれぞれのサーバーで事前に準備(pg_dump等)
2. バックアップを集約するサーバーで今回のプログラムを実行
3. scpかrsyncのコピーコマンドとバックアップサーバー内の古いバックアップの削除コマンドをサポート
4. コマンドの実行に失敗した場合はslackに通知
5. バックアップの設定はyamlファイルで管理
6. yamlファイルはERBを通して実行する

# プログラム
```ruby:Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'slack-ruby-client'
gem 'systemu'
gem 'hashie'
```

```ruby:backup.rb
require 'systemu'
require 'slack-ruby-client'
require 'hashie'
require 'erb'
require 'yaml'
require 'fileutils'

def notification(config, content)
  Slack.configure do |cfg|
    cfg.token = config.slack.token
  end
  client = Slack::Web::Client.new
  client.auth_test
  text = "#{config.name}\n#{content}"
  client.chat_postMessage(channel: config.slack.channel, text: text, as_user: true)
end

def read_config(path)
  Hashie::Mash.new(YAML.load(ERB.new(File.read(path)).result))
end

def scp(command)
  status, stdout, stderr = systemu "/usr/bin/scp #{command.from} #{command.to}"
  raise "fail scp" unless status.success?
end

def rsync(command)
  status, stdout, stderr = systemu "/usr/bin/rsync -azq --delete #{command.from} #{command.to}"
  raise "fail rsync" unless status.success?
end

def clean(command)
  ymd = (Date.today - command.days ).strftime("%Y%m%d")
  re = Regexp.new(command.name_match)
  Dir::entries(command.dir).each do |it|
    if re =~ it
      FileUtils.rm_rf(File.join(command.dir, it)) if $1 < ymd
    end
  end
end

config = read_config(ARGV[0])
begin
  config.commands.each do |command|
    case command.type
    when 'scp' then
      scp(command)
    when 'rsync' then
      rsync(command)
    when 'clean' then
      clean(command)
    end
  end
rescue Exception => e
  # エラーのfull_messageにtermcapが入るのを防いでいる
  $stderr = $stdout
  notification(config, e.full_message)
  #puts e.full_message
end
```

```ruby:webserver.yaml
name: webserver

slack:
  token: <%= ENV['SLACK_API_TOKEN'] %>
  channel: "#backup"

commands:
  - type: scp
    from: vps01:/home/me/backup/<%= Date.today.strftime("%Y%m%d") %>.tar.bz2
    to: /home/me/backup/webserver
  - type: clean
    name_match: ^(\d\d\d\d\d\d\d\d)\.
    dir: /home/me/backup/webserver
    days: 5
```

```ruby:git.yaml
name: git backup

slack:
  token: <%= ENV['SLACK_API_TOKEN'] %>
  channel: "#backup"

commands:
  - type: rsync
    from: vps01:/var/git/
    to: /home/me/backup/git/<%= Date.today.strftime("%Y%m%d") %>
  - type: clean
    name_match: ^(\d\d\d\d\d\d\d\d)$
    dir: /home/me/backup/git
    days: 40
```
```text
SLACK_API_TOKEN=xxxx bundle exec ruby backup.sh webserver.yaml
```
golangで楽々API作成

#はじめに
2019年に最も注目された言語といえば…
そうだね、golangだね！（私の中では）

ってことで今更感はあるが、golang触ってみました！

# やったこと
- golangの勉強がてら、TODOアプリを作ってみた
- [gin](https://github.com/gin-gonic/gin), [gorm](http://gorm.io/ja_JP/docs/index.html)を使ってRESTfulなWeb APIを作成

# RESTful APIを作成するにあたり
- CRUDを意識して！
- バージョン管理に対応した仕様で！

以上を踏まえてデザインした。

| CRUD                   | HTTPメソッド | エンドポイント        |
|:-----------------------|:-----------|:--------------------|
| Create(新規タスクの登録) | POST        | ~/api/v1/tasks      |
| Read(全タスクの参照)   　| GET         | ~/api/v1/tasks      |
| Read(一部タスクの参照)   | GET         | ~/api/v1/tasks/:id  |
| Update(一部タスクの更新) | PUT         | ~/api/v1/tasks/:id  |
| Delete(一部タスクの削除) | DELETE      | ~/api/v1/tasks/:id  |

# 構成考えてみた
[Gin と GORM で作るオレオレ構成 API](https://qiita.com/Asuforce/items/0bde8cabb30ac094fcb4)を参考にさせていただきました。

```
.
├── controller
│   └── task_controller.go
├── db
│   └── db.go
├── entity
│   └── task.go
├── router
│   └── router.go
└── main.go
```

| パッケージ名 | 処理内容                           |
|:-----------|:----------------------------------|
| controller | リクエストに対する処理、レスポンスの決定 |
| db         | DB接続等の処理を実装                 |
| entity     | エンティティを定義                   |
| router     | ルーティングの設定                   |

# エンティティ考えてみた
ToDoリストでは、タスクについて以下のことを管理するようにした。
- タスク名（やらないといけない事）
- 期限
- 重要度(重要か重要でないか）
- 完了状態(完了の有無）

# 作ってみた
ここに関しては他に多数記事が存在するので割愛
[github](https://github.com/seaka829/ToDoList_API)

# 所感
### ginが使いやすかった件
ただただ使いやすかったです。本当にありがとうございます。

### gormの自動マイグレーション機能が便利だった件
gormの[自動マイグレーション](http://gorm.io/ja_JP/docs/migration.html)は、未作成のテーブルやカラムを自動で追加してくれる機能
ちょっとした開発ならSQL書かなくていいし楽！

### SQLBoilerという選択肢も？
gormの代わりに、SQLBoilerというライブラリを使う選択肢もあるみたい。
機会があったら触ってみたいですね…

# 今後
API作成したので、次はクライアント側作ってみます。
How to use Bootstrap4 Sass in Django 3.0

# How to use Bootstrap4 Sass in Django 3.0

I set up Django 2.2 and Bootstrap4 Sass from the  
['How to use SCSS/SASS in your Django project (Python Way)'][dbs].

But can't work Django 3.0.  
This is one of resolution.

My testing environment is:  
macOS High Sierra Version 10.13.6


## prepare PyEnv Virtualenv

```shell
$ cd ~
$ pyenv virtualenv 3.7.5 dj3rpi375
$ cd your/django-rpi-tph-monitor/
$ pyenv local dj3rpi375
```

## install Django 3.0 and others

```shell
$ pip install --upgrade Django
$ pip install --upgrade pip
$ pip install --upgrade djangorestframework
$ pip install --upgrade markdown
$ pip install --upgrade django-filter
$ pip install --upgrade drf-yasg
$ pip install --upgrade django-bootstrap4
$ pip install -e git://github.com/django-compressor/django-compressor.git@a5bfd775450428e1a261b88e1e5424bfb4dde081#egg=django_compressor
$ pip install --upgrade django-libsass
```

about django-compressor [issue 963][dc963].

## test

```shell
$ ./manage.py test monitor
Creating test database for alias 'default'...
System check identified no issues (0 silenced).
........<BME280: BME280 object (None)>
<BME280: BME280 object (None)>
<BME280: BME280 object (None)>
<BME280: BME280 object (None)>
<BME280: BME280 object (None)>
.<BME280: BME280 object (None)>
.
----------------------------------------------------------------------
Ran 10 tests in 5.034s

OK
Destroying test database for alias 'default'...
```

But, can't display web page, because 'django_libsass.SassCompiler: command not found'.

resolution hint: from stackoverflow [Django Sass Compressor django_libsass.SassCompiler: command not found][so22515611]


## install part 2

### uninstall django-libsass

```shell
$ pip uninstall django-libsass
```

### install sassc

```shell
$ brew install sassc
```

### modified settings.py

```Python
COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'pysassc {infile} {outfile}'),
)
```

Success!

[Same as my Gist][mygist].
----
[dbs]: https://www.accordbox.com/blog/how-use-scss-sass-your-django-project-python-way/
[dc963]: https://github.com/django-compressor/django-compressor/issues/963
[so22515611]: https://stackoverflow.com/questions/22515611/django-sass-compressor-django-libsass-sasscompiler-command-not-found
[mygist]: https://gist.github.com/mitsuhisaT/1b5b78b380f44827fc37b6f7d5971a19
神情協「学生ITコンテスト　２０１９」に参加してきた話

# 初めまして

今年度から専門学校に入学して IT の何たるかを学んできた（はず）の salami です。
サークルの活動や、これから話すコンテストの内容上、web プログラミングを中心に学んでいます。
この記事が初投稿になるので、温かい目で見てもらえると助かります。

# そもそも学生 IT コンテストとは

* 大学・大学院・専門学校などの学生
* 18歳以上28歳以下

上記の二つに該当していれば応募をすることができる、神奈川県情報サービス産業協会が主催の学生限定の IT コンテストです。

作品を提出する形式のコンテストで、各々が考えた世の中を良くするサービスを形にし、提出します。書類審査に通れば、ファイナル最終選考会で企業の皆さんの前で発表をすることができる、といったように進められていきます。

募集されている部門には「ビジネス部門」と「IT プロダクツ部門」があり、私は 3 人のチームメンバーと共に IT プロダクツ部門に応募させて頂きました。

# 作品は何を提出したの？

私達のチームは、ゴミ箱を探索する web アプリケーション「PoiMap」を開発し、提出しました。
このアプリはゴミを捨てたいときにゴミを捨てる場所、つまりゴミ箱を見つけることができないときに使用するアプリケーションです。
自分の中では「画期的だな」と感じていました。

そしてこの案が見事に書類選考を通過し、ファイナル最終選考会へと進むことができました。

# ファイナル最終選考会

## とうとう本番

本番とも言えるファイナル最終選考会へ向かいます。
このようなコンテスト会場というのは出演するのも見るのも初めてだったので、会場についてからしばらくは新鮮さを楽しんでいました。

## 観戦

ですが、まさに「隣の芝生は青く見える」というのでしょうか。
参加チーム一覧を見たときの絶望ははかり知れませんでした。

出場していたチームの約半分の作品が ```AI``` や```ビックデータ```をテーマとして扱っていたのです。その時に流行りに乗ることの大事さに気が付きました。

発表したときのインパクトとしては、圧倒的に不利でした。
（だって、どうやってもwebサイトとAIを比べるなんて、文字の字ずらでも負けてるじゃん）

ただ、私のチームはあきらめずに優勝を一直線に見てました。
そして私自身は、メンバーが強豪たちと戦う姿を観戦していました。

私は文字も感情を入れすぎるため原稿すらまともに読めない足手まといなので、チームのメンバーに任せるしかなかったのです。（一応チームリーダーです）
チームメンバーの皆さん、本当にありがとうございました！

## プレゼン戦争

私たちのチームの発表順番はプロダクツ部門では最初だったのですが、その前にビジネス部門の発表があったため、しばらくは発表を見ることに。

どのチームの発表も素晴らしかったです。
頭の弱い私にとっては「よく思いつくなあ」と思ったものばかりでした。

そして事件が起こったのが、ビジネス部門最後の発表でした。

### 事件

ビジネス部門、最後の発表は「ゴミの写真を撮り、そのゴミが燃えるゴミか燃えないゴミか、などを判別するAI」というものでした。

……まさか、ゴミ関係で被るとは思っていませんでした。

さらに、実現した際の実用性は、私たちのチームの作品より高かったのです。

### チームの発表

ゴミ判別AIの次、それが私たちの発表です。
メンバーの彼らはとても頑張って、PoiMapの魅力を伝えてくれました。
本当にありがとうございます。
発表中のミスも何とか立て直し、私のチームのプレゼンが終了しました。

そして質疑応答。前日まで予想を固めていたはずでしたが、実際に質問されたのは予想できていなかった質問ばかりでした。
今考えると「どうしてそのような質問が来ることを予想していなかったのか」と思ってしまいます。

### そのあとのITプロダクツ部門

私達のチームが終わった後もプロダクツ部門では、そのあとも素晴らしい作品のオンパレードでした。
色々な作品を見て「そういう考え方もあるのか」とずっと思っていました。

冒頭でも言ったようなAIやビックデータの多くがこのITプロダクツ部門でプレゼンされ、私はそれに圧倒されていました。

どのプレゼンも作品に込めた気持ちがひしひしと伝わってきて、コンテストの空気というものを肌で感じた気がします。

## 結果発表

残念ながらPoiMapは優勝することはできませんでした。

悔しいです。
ですが、この作品を作成するにあたってどの部分に対しても詰めが甘かったことが大きな敗因であったと考えました。

それに、流行りに乗れていなかったのは企画段階でのミスだったのかなとも感じています。

## まとめ

色々ありましたが、楽しかったことに変わりはありません。
作品のどれもが作りこまれており、そのような色々な作品を見ることができて、とても刺激を受けた内容でしたし、コンテストが終わった後に開催された懇親会でも、滅多に会うことのできない様々な企業の社長の方々からの興味深いお話を聞くことができました。

この経験を無駄にせずに、勉強に励めればと考えています。
useStateとuseReducerの関係（どっちが強力？同じ？わずかな違い？決定的な違い？）

## はじめに

React HooksのuseStateとuseReducerに関する小ネタです。

## useStateはuseReducerで実装されている

内部実装ではuseStateはuseReducerで実装されていると、どこかに書いてありました。[こちらのブログ記事](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)にuserlandでの実装例が載っています。

```javascript
const stateReducer = (prevState, newState) =>
  typeof newState === 'function' ? newState(prevState) : newState;

const stateInitializer = initialValue =>
  typeof initialValue === 'function' ? initialValue() : initialValue;

const useState = initialValue =>
  useReducer(stateReducer, initialValue, stateInitializer);
```

こんな感じになります。

つまり、useStateでできることは全てuseReducerでもできるということです。では、useReducerだけでしかできないことはあるのでしょうか。

## useReducerはuseStateでも実装できる

実は、useReducerはuseStateでも実装できます。[こちらのブログ記事](https://blog.axlight.com/posts/react-hooks-usestate-and-usereducer-are-equivalent-in-theoretical-expressiveness/)にuserlandでの実装例があります。

```javascript
const useReducer = (reducer, initialArg, init) => {
  const [state, setState] = useState(
    init ? () => init(initialArg) : initialArg,
  );
  const dispatch = useCallback(
    action => setState(prev => reducer(prev, action)),
    [reducer],
  );
  return useMemo(() => [state, dispatch], [state, dispatch]);
};
```

こんな感じになります。つまり、機能的には同等ということになります。

## 実はわずかな違いがある

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">I just noticed, if we were to use lazy initialization using props with useState, it would be better to do it with useReducer which has initArg, because that could allow <a href="https://twitter.com/hashtag/JavaScript?src=hash&amp;ref_src=twsrc%5Etfw">#JavaScript</a> engine to optimize the inline function without closure.<a href="https://twitter.com/hashtag/ReactJS?src=hash&amp;ref_src=twsrc%5Etfw">#ReactJS</a> <a href="https://twitter.com/hashtag/React?src=hash&amp;ref_src=twsrc%5Etfw">#React</a> <a href="https://twitter.com/hashtag/ReactHooks?src=hash&amp;ref_src=twsrc%5Etfw">#ReactHooks</a> <a href="https://t.co/M0VsdhLXNd">pic.twitter.com/M0VsdhLXNd</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1194615038792699906?ref_src=twsrc%5Etfw">2019年11月13日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

こちらのツイートにあるように、useReducerではinitArgとinitが分離されているため、initをpropsに依存しないように書くことができます。これにより、hookの外側で関数定義することもできますし、inline関数で書いたとしてもJavaScriptのランタイムエンジンで最適化される可能性が高いです。

## 決定的な違いもあるにはある

お勧めしませんが、useReducerには非常に特殊な利用法もあります。それはreducerをコンポーネント内で定義できることです。reducerをコンポーネント内で定義すると未来のpropsを読み込めちゃいます。"cheat mode"と呼ばれたりします。

詳細は、[こちらのブログ記事のセクション](https://overreacted.io/a-complete-guide-to-useeffect/#why-usereducer-is-the-cheat-mode-of-hooks)をご参照ください。

#### 追記(12/4)

このcheat modeは上記のuserland実装では再現できていないですね。

## おわりに

小ネタにしようかと思っていましたが、書き始めたらマニアックなネタになってしまいました。楽しんでくれた方がいらしたら幸いです。
Googleデータポータルを使ってデータを可視化する (非エンジニア向けレクチャ) -その1

# これは何？

非エンジニア向けに行なった社内レクチャの資料です。

データ活用 とか データドリブン とか言われてますが、まずは「データを活用しやすい状態にする」ことを目指します。

「データの可視化」をものすごく簡単に言うと **表を元にグラフを作る** です。まずは算数の世界で十分です。

↓これはうちの子(小4)の算数の問題ですが、まずはこういうことです。特に非エンジニアのメンバーは「ツールを使って」というあたりに難しさを感じるのかもしれませんが、これはエンジニアかどうかに関係なくいわゆる「ITスキル」の範疇になってきてると思います。(エクセルやワードと同じ感じで使えるようにツールが充実してきてます)

![graph.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/f2b8de5b-c519-6ecd-3093-dcb0d3f804b2.jpeg)

レクチャの内容はGoogleスライドで作ったので、ほとんどそれのキャプチャで説明していきます。


# 想定読者

- 非エンジニアで
- 「何かのツールからダウンロードするとか、どこかからか送られてきたエクセルやCSVなど、外部からもらったモノを「生データ」としている
- それを元にグラフを作ってる

ような方を想定しています。

# 環境

- Googleスプレッドシートで表を作って、
- Googleデータポータル でグラフを作れる環境


# 本編

![1-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/d62136cc-6b48-eb73-6bd1-1418004c59e2.png)


エクセルやスプレッドシートで表を作り、それに対応するグラフを作る事はあると思いますが、例えばそれが月次のデータだとして、翌月分のデータが表に追加された時に、グラフ化する領域を再設定しないとグラフが最新の状態にならない、なんてことあると思います。それじゃダメなんです。

私の思う「最小工数」とは「翌月分のデータを表に追加するだけ」でグラフは最新状態になる、を目指します。(もちろん、表へのデータ追加も自動化できれば幸せだけれども、非エンジニアがそれをやれるかというときっと難しい)


# 例題やってみる

![1-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/d286cc7a-4e9c-8db5-6590-ffb33df0c330.png)


「お時間ある方」あるいは「やる気のある方」は上記の例題をやってみてください。スプレッドシートを一つ作って、その中に表とグラフを作ってみてください。

# データを追加してみる

例題ができた人は、「表に4月分のデータを追加する」をしてみてください。
このとき、グラフは自動で4月分も追加されますか？(されないことを想定してます)

| 案件名  | 4月の件数 |
|:-------|:-------|
| 案件A | 150 |
| 案件B | 320 |
| 案件C | 250 |


# グラフ化の前に知ってほしいこと


![1-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/bf4d0426-b069-1f31-23e9-102c8393c00f.png)

![1-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/f429295a-a0bb-7f1a-fef9-0cf650e6aebb.png)

![1-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/c0afd17a-031e-d7e7-9b36-36c9ea20c464.png)

![1-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/2580bec4-74cf-3c9b-4b76-9031c0ba39c0.png)


↑そゆこと。


# 大事なこと

![1-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/599bcf25-6b59-860f-bcdd-19e2895f5d1c.png)

![1-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/8fbc46a6-b76f-9e09-2742-3b36809b9dda.png)


本当は「整った生データ」の前に「**整っていない**生データ」が存在すると思います。そこはうまいこと頑張ってください。データを入力する人に依頼するとか、入力値をシステムで制限するとか、そゆ「泥臭い」領域になると思います。

![1-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/018fba3e-716a-14be-3f53-331d5a2104d6.png)


私は

**生データ**: 例えば何かのツールからダウンロードしたCSVそのままのもの。
**元データ**: 生データを加工してグラフ化しやすい形にしたもの。グラフの元になるデータ。

と区別しています。


# まとめ

データポータルができてないですね。。。次回から！

第二回はこちら→ [Googleデータポータルを使ってデータを可視化する (非エンジニア向けレクチャ) -その2](https://qiita.com/sakaimo/items/e64481813f238f30d373)
x86 命令セット

#フラグ

|フラグの種類|	呼び名|
|:--|:--|
|O|		オーバーフロー|
|D|		ディレクション|
|I|		インタラプトイネーブル|
|T|		トラップ|
|S|		サイン|
|Z|		ゼロ|
|A|		補助キャリー|
|P|		パリティ|
|C|		キャリー|

#命令セットのニーモニック

|命令の種類|	ニーモニック|	ニーモニックの意味	命令の意味|
|:--|:--|:--|:--|
|転送|	mov|	コピー|
|転送|mov|	ロード（メモリ等からレジスタへコピー）|
|転送|mov|	ストア（レジスタからメモリ等へコピー）|
|転送|	xchg|	入れ替え|
|算術|adc, add|	加算|
|算術|sbb, sub|	減算|
|算術|mul|	乗算|
|算術|div|	除算|
|算術|inc, dec|	1足す，1引く|
|論理演算・ビット操作|and, or, xor|	論理積・論理和・排他的論理和|
|論理演算・ビット操作|neg, not, test|	符号反転・反転・テスト|
|シフト|sal|	論理左シフト|
|シフト|sar|	論理右シフト|
|シフト|shl|	算術左シフト|
|シフト|shr|	算術右シフト(キャリーを含めてシフト)|
|ローテート|rol	|左ローテート|
|ローテート|ror	|右ローテート|
|ローテート|rcl	|キャリーを含めて左ローテート|
|ローテート|rcr	|キャリーを含めて右ローテー|
|条件分岐|JE	|前の結果が0なら分岐．ゼロフラグ=1なら分岐．|
|条件分岐|JNE	|前の結果が1ならば分岐．ゼロフラグ=0なら分岐．|
|条件分岐|JL	|前の結果が0より小さければ分岐|
|条件分岐|JG	|前の結果が0より大きければ分岐|
|条件分岐|JLE	|前の結果が0以下なら分岐|
|条件分岐|JGE	|前の結果が0以上なら分岐|
|条件分岐|jmp	|分岐，ジャンプ|
|条件分岐|JG	|前の結果が0より大きければ分岐|
|条件分岐|JLE	|前の結果が0以下なら分岐|
|条件分岐|JGE	|前の結果が0以上なら分岐|
|コール|call	|サブルーチンへ分岐|
|コール|ret	|サブルーチンから復帰|
|スタック|push	|スタックに積む|
|スタック|pop	|スタックから復帰|
|その他|	NOP	|何もしない|

ニーモニックの前後に付く文字の意味

|接尾辞の種類|	接尾辞の文字の意味|	意味|	命令の例|
|:--|:--|:--|:--|
|...B	|byte	|1バイト	|MOVB, ADDB, BRAB|
|...W	|word	|2バイト	|MOVW, ADDW, BRAW|
|...L	|long	|4バイト	|MOVL, DIVL, JMPL, PUSHL, JL, COMPL|
|...I，I...	|integer	|整数	|DIVSI, IMUL|
|...S	|singed	|符号付	|ADDSL, MULSI, SUBS|
|...C	|with carry	|キャリーやボローを考慮	|ADDC, SUBC|

#レジスタ名の表記

レジスタ名の前に%を付ける

|表記	|ビット数|	役割|
|:--|:--|:--|:--|
|eax,ecx,edx,ebx,esp,ebp,esi,edi|		32bit	|汎用レジスタ|
|AX, BX, CX, DX	| 	16bit	|汎用レジスタ(EAX, EBX, ..)の下位16bit|
|AH, AL	| 	8bit	|AXの上位8bit, 下位8bit|
|cs,ds,es,fs,gs,ss	| 	16bit	|セグメントレジスタ|
|SP	|	CPUのビット数|	スタックポインタ|
|PC	|	CPUのビット数|	プログラムカウンタ|

#アドレッシングモードの表記

数値の前に$を付ける
レジスタ間接アドレッシングは、(%esi)です。


以上。
EC-CUBE4 既存のルーティングを無効にする


EC-CUBE4では、ルーティングの設定は`@Routeアノテーション`でコントローラクラスに定義するのが標準ですが、yamlファイルで定義することもできます。

少しニッチな例ですが、問い合わせの機能を使わないので、問い合わせ画面のURLをNotFoundにしておきたい、といったような場合は、以下の設定を記述します。

`app/config/eccube/routes/disable.yaml`を作成します(ファイル名は.yamlであればなんでもかまいません)

```yaml
disable:
  path: /contact
```

ブラウザから、`/contact`にアクセスすると、`ページが見つかりません`の画面が表示されるはず。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/6f73e3ee-6951-bcc1-50f2-23fb94a9d28a.png)

複数設定したい場合は、少し冗長な記述ですが、

```yaml
disable1:
  path: /contact
disable2:
  path: /help/about
```

のように定義すればOKです。

わざわざコントローラを作ってルーティング定義するのが面倒だなあと感じたので、こういうやり方もありますよ、というTipsでした。

ルーティングの定義は上記の他にもいろいろできるので、詳細についてはSymfonyのドキュメントを参照してみるとよいかと思います。

https://symfony.com/doc/3.4/routing.html
検索機能を実装するンゴ ❏Rails❏

ransackを使わない簡易検索機能です。

#ルーティング

```ruby:routes.rb
Rails.application.routes.draw do
  resources :tweets do
    collection do
      get 'search'
    end
  end
end
```

実際生成されるルーティングがこちら。

```:ターミナル
       Prefix Verb     URI Pattern                  Controller#Action
search_tweets GET      /tweets/search(.:format)     tweets#search
```

#ビュー
検索フォームを好きなところへ配置。

```ruby:search.html.haml
= form_with(url: search_tweets_path, local: true, method: :get) do |form|
  = form.text_field :keyword
  = form.submit
```

#コントローラー

```ruby:app/controllers/tweets_controller.rb
def search
  @tweets = Tweet.where('text LIKE(?)', "%#{params[:keyword]}%").page(params[:page]).per(3)
end
```

ページネーションで３件ごとに取ってきています。
`.limit(3)`とかで上から３件取ってきてもいいですね。

whereの中身はあいまい検索といいます。
`where('カラム名 LIKE(?)', "検索したいワード")`
検索ワードに引っかかるものを取ってきます。

`%a%`とするとaを含むもの
`%b`とするとｂから始まるもの

今回はフォームに入力されたワードを含むツイートが表示されます。

<br>
ではまた！
Cloudera Manager Configuration 世代管理

Cloudera Managerで、設定変更したら、変更点は比較されたり、その後できり戻り（Rollback）は可能です。
<img width="1154" alt="Screen Shot 2019-12-04 at 8.20.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133516/de700c4a-48a1-4160-7c48-557803893d54.png">
<img width="1415" alt="Screen Shot 2019-12-04 at 8.21.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133516/498f4e8f-ed32-394c-4154-f5ddc9b663b8.png">


設定の切り戻しメニュー：
<img width="1428" alt="Screen Shot 2019-12-04 at 8.24.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133516/7da8c8b8-6ae8-e05f-d961-77a709374275.png">
<img width="1558" alt="Screen Shot 2019-12-04 at 8.25.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133516/9b6a09f4-192d-724a-d5aa-8fbdd2244611.png">
メソッドをオーバーライドする時にOverrideアノテーションをつけるべき理由

### Overrideアノテーション
Java1.5で追加されたアノテーションです。メソッド宣言だけに使えて、親クラスのメソッドをオーバーライドしていることを表現します。Overrideアノテーションをつけなくてもオーバーライドは可能です。では、なぜOverrideアノテーションをつけるべきなのか？というのが本記事になります。

### Overrideアノテーションをつけた方が良い理由
以下のような親クラスがあるとします。

```Parent.java
public class Parent {

    private String something;

    protected void setSomething(String something) {
        this.something = something;
    }
}
```

このクラスを継承しsetSomethingメソッドをオーバーライドする必要があったため以下のコードを書きました。

```Child.java
public class Child extends Parent {

    protected void setSomething(Integer something) {
        System.out.println(something);
    }
}
```

引数の型を間違えていますが、正常にコンパイルが通るためそのミスに気付くことができません。このまま気付かずにリリースを迎える、ということはさすがにないと思いますが、思わぬバグとして必ずテストでハマる可能性があります。そして、Overrideアノテーションをつける理由はココにあります。Overrideアノテーションをつけておけば、以下のようにIDEが検知してくれるためそのミスに気付くことができ、事前に問題解決に繋がります（もちろんjavacコマンドでのコンパイルもコンパイラが検知してくれます）
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23101/0715d9e2-33c8-882b-4c8c-9bb96583efdb.png)

また、IDEを使っていれば、設定次第でOverrideアノテーションがついていなくても親クラスのメソッドをオーバーライドしているメソッドがあれば警告を出すことが可能です。つまり、常にOverrideアノテーションを使えば、意図しないオーバーライドを検知することが可能となります。

## Overrideアノテーションをつけるべき理由まとめ
1. オーバーライドしたつもりができていなかった、といったうっかりミスを事前に防ぐことができ予期せぬバグの防止になります。
2. オーバーライドするつもりじゃなかったけどよく見たらオーバーライドしていた、ということに気付き予期せぬバグの防止になります。
 
以上です。

### 参考
* [Effective Java](https://www.amazon.co.jp/Effective-Java-%E7%AC%AC3%E7%89%88-Joshua-Bloch/dp/4621303252)
Rails+Vue.jsでバリデーションエラーを各項目の下に表示する

#はじめに
Rails側のモデルに定義したバリデーションを使いつつ、
バリデーションエラーを各項目の下に表示するのに苦労したのでまとめておこうと思います。
今回、バリデーション関連以外の説明は省略させていただきます。
ご了承ください。。

#やりたいこと
このように項目の下にバリデーションエラーを表示するようにします。(見た目は気にしないでください。。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201112/dad76f3c-3563-5beb-bad1-985e8cf06d98.png)

#実装してみる
###バリデーションを設定
ここでは必須のバリデーションだけ設定しておきます。

```ruby
class Company < ApplicationRecord
  validates :name,
    presence: true
end
```

###API側の実装
vue.js側で各項目ごとのエラーメッセージを取り出せるようにします。
具体的には下記のようなハッシュになるように加工します。
{項目名: 日本語化されたエラーメッセージ}

今回は下記のように実装しました。

```ruby
@company = Company.new(create_company_params)
if @company.save
  render json: @company, status: :ok
else
  render json: { errors: @company.errors.keys.map { |key| [key, @company.errors.full_messages_for(key)]}.to_h, render: 'show.json.jbuilder' }, status: :unprocessable_entity
end
```

ここでerrorsにエラーメッセージを設定しています。

```ruby
errors: @company.errors.keys.map { |key| [key, @company.errors.full_messages_for(key)]}.to_h
```

API側はこれで終わりです。

##vue.js側で項目の下にエラーが表示されるようにする
まずはtemplateから実装していきます。

```vue
<template>
  <form @submit.prevent="createCompany">
    <h2>企業情報</h2>
    <div>
      <label>企業名</label>
      <input v-model="company.name" type="text">
      <!-- これでバリデーションエラーがあるときだけ表示される -->
      <p v-if="!!errors['name']" class="error" style="color: red;">{{ errors['name'][0]}}</p>
    </div>
  </form>
</template>
```

errorsのkeyの中に表示する項目名が含まれているかどうかで、
表示/非表示を切り替えています。

次にscriptです。

```vue
<script>
  import axios from 'axios'
  import { csrfToken } from 'rails-ujs'
  axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()

  export default {
    data: function () {
      return {
        company:{
          name: ''
        },
        // バリデーションエラーがあった場合は、このerrorsにセットされます。
        errors: ''
      }
    },
    methods: {
      createCompany: function(){
        axios
          .post('api/v1/company.json', this.company)
            .then(response => {
              this.$router.push('/');
            })
            .catch(error => {
              if (error.response.data && error.response.data.errors) {
                this.errors = error.response.data.errors;
              }
            });
      }
  }
</script>
```

これでバリデーションエラーがあるときは各項目の下に表示されるようになるかと思います。

#まとめ
今回は各項目の下にエラーメッセージを表示する方法をまとめました。
もっといい感じの方法があれば、是非コメントで教えてください。。
DBからデータを取得する際に改行コードを削除する

# はじめに
Webアプリ開発で、**DBから取得したデータをCSV形式でエクスポートする機能**を実装したのですが、エクスポートしたCSVの形式が崩れていることがありました。
CSVの中身を確認したところ、予期せず改行されている場所が何箇所かあり、その原因が**DBの特定列の値に改行コードが含まれてしまっている**ことだと特定することができました。
上記に対して、「**SQLのSelect文でデータを取得する際に改行コードを削除する**」という方法で対応したので、そのSQL文を記載します。

# 改行コード削除を含めたSelect文
employeeテーブルからid, name, department列のデータを取得することを想定します。仮に、department列に入っている改行コードを削除したい場合は、下記のSelect文で対応可能です。

```sql

SELECT id, name, REPLACE(REPLACE(REPLACE(department, '\r', ''), '\r\n',''),'\n', '') AS depertment FROM employee;
```

# おわりに
正規表現を使って置換する方法などもあると思いますが、とりあえず私はこの方法で対応してみました。
【Python DataFrame】値が空のとき、別の列の値で埋める

# 想定データ

以下の人口統計データ。

市区町村名がNaNになっているところに、都道府県名を入れたい。

```
 団体コード 都道府県名      市区町村名 性別       総数    0～4歳     5～9   10～14   15～19  \
3      10006.0  北海道*        NaN  計  5339539  181591  201119  213206  231870   
4      10006.0  北海道*        NaN  男  2522526   93048  102850  108783  118414   
5      10006.0  北海道*        NaN  女  2817013   88543   98269  104423  113456   
6      11002.0   北海道        札幌市  計  1952348   71281   75025   76342   82644   
7      11002.0   北海道        札幌市  男   913077   36715   38250   38839   41729  

```


# コード


```python

df['市区町村名'].fillna(df['都道府県名'], inplace=True)

# こちらでも可能ですが、遅くなるようです。
df.loc[pd.isnull(df['市区町村名']), ['市区町村名']] = df['都道府県名']
```

### 失敗したコード


```py

for i, (prefecture, city) in enumerate(zip(df['都道府県名'], df['市区町村名'])):
    if pd.isnull(city):
        df['市区町村名'][i] = prefecture
```

結果

```bash

<ipython-input-59-8ff91f161741>:3: SettingWithCopyWarning: 
A value is trying to be set on a copy of a slice from a DataFrame

See the caveats in the documentation: http://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#returning-a-view-versus-a-copy
  df['市区町村名'][i] = prefecture
​
```

### 参考

* [DataFrameの値の更新 - pandas [いかたこのたこつぼ]](https://ikatakos.com/pot/programming/python/packages/pandas/update_multi_column)
    * Forループなど無邪気に実装するとSettingWithCopyWarningが出てしまう