OmniAICreator/Qiita-1.07M huggingface dataset:
(Go言語・WebAssembly)Webページで並列処理はできるのか？

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-165026621-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-165026621-1');
</script>

#前書き
Go言語を勉強する中でgoルーチンを使ってWebAsseblyにコンパイルした場合、
ブラウザ上で並列処理はきちんと行っているのか気になったので確認しました。

#結果
問題なく並列処理ができました。
画面サンプル
<img width="270" alt="click" border="5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436464/7e9a563b-b804-3b83-78d0-608ffec5aa0f.gif" >

以降はソースコードの記述です。
コンパイルの方法などは以前の記事を参照してください。
[(Go言語)WebAssemblyで簡単なWebサイトを作ってみた](https://qiita.com/daemonkimura/items/df58dd5e4843542b1389)

###実行環境
 OS:Windows 10 64bit
 言語環境：go version go1.14.1
 ブラウザ:Firefox バージョン: 74.0

###ソースコード
```:htmlファイル
該当部分のみ抜粋
<body>
  <button type="submit" id="button1" >START</button><br>
  <div id="time1" >時刻1:</div>
  <div id="time2" >時刻2:</div>
  <div id="time3" >時刻3:</div>
</body>
```

```:時刻を取得し文字列を返す
func Get_time() string {
	now := time.Now()
	str := strconv.Itoa(now.Hour()) + ":" + strconv.Itoa(now.Minute()) + ":" + strconv.Itoa(now.Second())
	return str
}
```

```:メイン関数
package main
import (
	"strconv"
	"syscall/js"
	"time"
)
func main() {
	//イベントの管理-
	get_three_time("button1", "time1", "time2", "time3")
	<-make(chan struct{}, 0)
}
```

```:実装処理
func get_three_time(id string, output1 string, output2 string, output3 string) {
	//idから対象のオブジェクトを取得
	object := js.Global().Get("document").Call("getElementById", id)
	out1 := js.Global().Get("document").Call("getElementById", output1)
	out2 := js.Global().Get("document").Call("getElementById", output2)
	out3 := js.Global().Get("document").Call("getElementById", output3)
	//ゴールーチンで実行し
	action := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		go func() {
			time.Sleep(time.Duration(0) * time.Second)//0秒待機
			out1.Set("innerText", "時刻1:"+Get_time())
		}()
		go func() {
			time.Sleep(time.Duration(2) * time.Second)//2秒待機
			out2.Set("innerText", "時刻2:"+Get_time())
		}()
		go func() {
			time.Sleep(time.Duration(4) * time.Second)//4秒待機
			out3.Set("innerText", "時刻3:"+Get_time())
		}()
		return nil
	})
	//アクションの呼び出し
	object.Call("addEventListener", "click", action)
}
```

###結果・感想
Go言語+WebassemblyでGoルーチンによる並列処理を実装してみました。
もともとJavascritpには同期/非同期処理があり、それらと動作の違いはないかもしれません。

CPU視点で見れば、マルチスレッドによる非同期処理が役に立つ場面が存在しますが、
はたしてブラウザ上のバイナリコードが、複数のコア上で動作するのか？
という疑問が残ります。

仮説ですが、
スクリプトの実行がブラウザの1プロセス上として動作するならマルチスレッドとはなりませんし、ブラウザやCPUアーキテクチャに依存する可能性があります。

しかしながら、ソースコードで並列処理を実装できることはGo言語のメリットです。
フロントエンドにJavascriptやPHPなくGo言語を採用する理由の一つになるのではないでしょうか。

次はGo言語でAPIサーバを構築して、それをもとにSPAなwebページの構築を目指しています。
できる限りGo言語でWEBシステムを構築してくために少しづつですが前に進んでいる実感があります。
これからも頑張っていこうと思います。

ここまで読んできただきありがとうございました。
MVCってなんやねん

#初めに
ちょっと前に書いたんだけど、簡単にしか書いてなかったので復習程度に綴っときます。
自分なりの理解の仕方なので、間違えてたりしたらすいません。

#MVCモデルとは？
**Model**,**View**,**Controller**のの頭文字
機能ごとに分けて、役割だったり内容をわかりやすくする考え方。

#MVC、それぞれ何の役割なの？
##Model
**ビジネスロジック**を担当します。

- データの検索
- データの変換
- データの検証
- データの関連

**Controller**から受け取った処理に基づいて、必要なデータをDBで参照します。
そして、そこから取得したデータを**Controller**へ渡します。
ただ**Model = Database**ではありません。
あくまでもModelは基本的に上記5つの処理担当です。

##View
表示、入力に関する処理担当

- リクエストを取得する
- リクエストを**Controller**へ渡す
- **Controller**から受け取ったデータをHTMLなどで出力する

##Controller
ここが一番ややこしい担当

- **View**からリクエストを受け取る
- 受け取ったリクエストに基づいて該当するアクションを実行して**Model**に伝える
- **Model**で処理したデータを受け取り、レスポンスを**View**に返す


#なんでそもそも分ける必要があるんや！
実際、LaravelなんかではControllerの中でModelの処理実行したりします。
簡単な処理とかならいいですけどそれが10行、20行、100行なんか行った際に・・・
**そんなController見たいか？**
となります。（というより研修課題で僕が完全にこれでした。急いで書き直した。）
なのでしっかりと役割を理解し、記述しましょう！

#まとめ
自分なりに理解して綴ってみましたがどうでしょうか？
ここまで読んでくださってありがとうございます！
最後に、MVCをしっかりと理解して効率的にWeb開発をしましょう！
じゃあね！
ストライピングまとめ

####ストライピング＝RAID0

Why 読み書きの処理速度向上
When　特になし？
Who　特になし？
What　複数のHDDを合体
Where　わからん
How　それぞれのハードディスクに別の内容を書き込む

####注意点
冗長化は行われないため信頼性が低い
台数が増えるほど故障率が上がる
MAMPを使ったWordpressでのWEB制作方法12　初心者向け

#MAMPを使ったWordpressでのWEB制作方法11　初心者向け

今回は詳細ページの作成です。
前回の記事はこちら
[MAMPを使ったWordpressでのWEB制作方法11　初心者向け](https://qiita.com/fumiya0414/items/d9ce0bb90d1ad9109c02)

##詳細ページの作成

詳細ページもレイアウトは統一されているのでまずは
ヘッダー、フッター、サイドバーと表示部分が空になった
フレームだけを用意します。

```php:single.php
<?php get_header(); ?>

    <div class="wrapper">
    <div id="conL">


    </div><!--conLend-->
    <?php get_sidebar(); ?>

  </div><!--wrapperend-->
  
<?php get_footer();
```

前回の投稿一覧ページ同様以下のif文を作成して
タイトルと中身を取得できるようにタグを設置します。

```php:single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

　<!--loopstart-->
　<?php if(have_posts()): while(have_posts()): the_post();?>
　　<h2><?php the_title(); ?></h2>
　　<!--loopcontent-->
　　<?php the_content(); ?>
　<!--loopend-->
　<?php endwhile; endif; ?>
　<a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();
```
一覧ページから詳細ページを開くと投稿の中身が表示されます。
[![Image from Gyazo](https://i.gyazo.com/ebf190b23d496508682c171d92eb00b3.gif)](https://gyazo.com/ebf190b23d496508682c171d92eb00b3)

中身は表示できましたが日付が入っていないので追加します。
タイトルの下にタグを入れましょう。

```php:single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

　<!--loopstart-->
　<?php if(have_posts()): while(have_posts()): the_post();?>
　　<h2><?php the_title(); ?></h2>
　　<p><?php the_time('Y/m/d'); ?></p>
　<!--loopcontent-->
　<?php the_content(); ?>
　<!--loopend-->
　<?php endwhile; endif; ?>
　<a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();
```

以上で投稿ページは完成です。

次はお問い合わせページを作成します。
[MAMPを使ったWordpressでのWEB制作方法13　初心者向け](https://qiita.com/fumiya0414/items/b6fd2999b00b892d4326)
Qiitaで画像をアップロードできなかった件（Safari）

一度投稿すると変わるだとかいう記事もあったので、仮投稿という名目で
ありとあらゆる方法で画像をアップロードしまくり、投稿していたものです。

というつもりでしたが解決したので、結局記事にしました。

編集画面で、画像を「ドラッグ・アンド・ドロップ」なり「添付する画像を選択」なりします。

最初はこう出ていますが、
\![uploading-0]()

しばらくすると、
\![Bad Request]()
になります。

~~色々調べすぎて、試しすぎて、もはやバグなのかと思い出しています。~~
→safari(13.1)だからでした。Chromeにしたら余裕でできました。
（「CloudAppとか画像共有サービス登録しまくった時間返せ...」）
↑
「って言っても実際返ってきたことなんてないんだから、今を生きようぜ」なんてぺこぱにツッコまれてしまいますね。。。

にしてもこの原因は何なんでしょうか？？
MacでRにlightGBMをインストールする

## 目的
クラス分類や回帰を行うタスクにおいて、勾配Boosting決定木(GBDT)ベースの手法は非常に有用である。
本稿では、macOS・Rを使ってGBDTの代表的な手法であるlightGBMおよびxgboostを動かすためにライブラリをインストールする方法を完結に記録する。

## 環境:
MacOS Catalina, 10.15.4
R version 3.6.3

## 準備:
gccのインストール

```{bash}
brew install gcc
```

インストールしたgccのバージョン確認
/usr/loca/bin/gcc-
の後にくる数字を見ておく。
### 1. lightGBMのインストール
CRANからはパッケージが提供されていないので、githubから直接入れる。
https://github.com/microsoft/LightGBM/tree/master/R-package#installation
を参考にインストールを行う。
ターミナルを開き、

```{bash}
git clone --recursive https://github.com/microsoft/LightGBM
cd LightGBM
#usr/loca/bin下にあるg++, gccのverを確認して数字を変更
export CXX=/usr/local/bin/g++-9 CC=/usr/local/bin/gcc-9
Rscript build_r.R
```

### 2. xgboostのインストール
CRANからパッケージが提供されているので、他のライブラリと同様の方法でOK。Rのコンソール上で、

```{r}
install.packages("xgboost")
```
とする。コンパイルエラーの対処に時間を取られたくないため、今回はbinary versionを使うこととした。
【エラー解決】SSH接続したにも関わらず push,pull するときに毎回passphraseを求められる問題

追記：200430
ご指摘いただきpassword→passphraseに訂正しました。

###【問題】
SSH接続したにも関わらず
push,pull するときに毎回~~password~~ passphraseを求められる問題

###【原因】
SSH接続を設定したとき
$ ssh-keygen
この後に表示される
Enter passphrase (empty for no passphrase):
でenterを押すべきところ、
~~password~~ passphraseを入力していた。

###【解決方法】

```
$ ssh-keygen

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/${user_name}/.ssh/id_rsa): 
/Users/${user_name}/.ssh/id_rsa already exists.
Overwrite (y/n)?$y
#enter×2 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
この後
enter×2回
$ cat ~/.ssh/id_rsa.pub
#SSH 鍵の公開鍵をコピー
#GitHubのPersonal settingsからSSH keysに情報を登録。
```

###参考にした記事(いつもありがとうございます)

https://backlog.com/ja/git-tutorial/reference/ssh/
FlutterでFileSystemException: Cannot open file, path =～のエラーが出たときの対処

日頃、FlutterをMac、Windows両方使って開発しています。
Macで作ったFlutterファイルをWindowsにNAS経由で転送して～という管理をしているのですが、異OS間でうまく開けなかったりビルド出来なかったりエラーが出たりして毎回ググってしまうため、同じような管理をしている方へ向けて半ば自分用に解決方法を書いてみます。



##FileSystemException: FileSystemException: Cannot open file, path ～～ .flutter-plugins' (OS Error: アクセスが拒否されました。 が出た場合

異OS間でFlutterプロジェクトを移動したらまずはSetting→Languages&Frameworks→Flutterにて、Flutter SDK pathを設定するかと思います。ここは大丈夫かと思います。

その後、flutter cleanなんかをするかと思いますが、この状態でPackages getをするとSending crash report to Googleみたいなエラーログが生成されてしまうことが多々あります。

その解決方法がこの記事の本題なのですが、
.flutter-plugins
.flutter-plugins-dependencies
.packages
をファイルごとそれぞれ削除して、
pubspec.yamlでPackages getをしてやればうまくいきます。

（Flutter 1.12.13+hotfix.9 stableの場合）
gzipファイルを解凍しないで中身を見たい

いつも忘れるので。

## コマンド

標準出力に出力されるのでパイプで```less```とか```grep```とかに渡して使う。

```
$ gzip -dc file_name.gz
```

## 参考

https://ksmzn.hatenablog.com/entry/2014/02/27/175743
Vue.jsについて　簡易まとめメモ

### Vue.jsとは
JavaScriptフレームワーク
MVVMパターン(Model-View-ViewModel)
ユーザーインターフェイスを構築するためのプログレッシブフレームワーク

###MVVMパターンとは

- Model：データ管理　ViewModelの担当外全てを担当
- View：ユーザインターフェース
- ViewModel：Model→Viewへの出力データを渡し、View→Modelへの入力データを渡す
                    
###プログレッシブフレームワークとは
どんなとき、どんな規模にも段階的に柔軟に使える思想
・コンポーネント設計・ライブラリの活用・小規模から大規模まで可能になる

###コンポーネント設計とは
コンポーネント（component）　部品、成分、構成要素などの意味を持つ
GUIのパーツをモジュール化したもの
簡単に言うと部品を作成して組み立てようという事

###アトミックデザイン(Atomic Design)とは

- atoms:原子
 - ボタン、テキスト、ボックスなど
- Molecule:分子
 - Atomsの組み合わせ　ログインフォームなど
- Organisms:有機体
 - MoleculesやAtomを組み合わせ　ヘッダーなど
- Template:テンプレート
 - Organismsを組み合わせ　ワイヤーフレーム
- Pages:ページ　 
 - 文言、画像、データなどの最終調整

ボタンなどの小さなコンポーネント（atoms）を作り
ログインフォームなどの中くらいのコンポーネント（Molecule）を作り
ヘッダーやページ全体（Organisms、Template、Pages）を作っていく考え方
2020年 価格監視ツール 6選

インターネットの開発は非常に急速です。 商品がネット上の商人によって購入され、引用されています。 したがって、企業が製品の価格を収集し、リアルタイム監視と比較を実行することは非常に重要です。

####価格監視とは？

価格監視とは、商品やサービスの価格の変化を追跡、収集、分析、予測、および公開する活動を指します。

####なぜ価格監視が必要なのですか？

1.価格設定の履歴を監視すると、市場動向を反映できます。 価格監視は、より良いマーケティング戦略の開発にも役立ちます。 決定をサポートするためのデータがあることを知って行動することができます。 実際、マージンを最大化し、オファーを拡大するための信頼できる情報に依存しているため、ビジネスが受けるリスクを軽減します。

2.価格監視は、競合製品に関する情報を取得するためにも使用できます。 収集されたデータに基づいて、現在の市場を理解できます。 また、ビジネスの位置を正確に把握し、一歩前進するための対策を講じることもできます。

この場合、価格の監視に役立つツールが必要です。

####ここにいくつかの推奨価格監視ツールがあります：

###1.Prisync
Prisyncは、世界中のeコマース企業向けの価格追跡および動的価格設定ソフトウェアです。
価格：59 $ /月から
無料試用：14日間利用可能
![prisync.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/5ceadb9b-1721-ad21-a819-f43988fbe633.png)
###2.Price2Spy
Price2Spyは、eコマースの専門家が競合他社や小売業者から目を離さないようにすることを目的としたオンラインの価格監視、価格比較、価格再設定ツールです。 価格データの取得と、そのデータの分析に使用される多数のレポートメカニズムの両方を提供します。
価格： 19.95$ /月から
無料試用：30日間利用可能
![Price2Spy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/db901f33-6043-3b44-83c8-9d4719401d0f.png)
###3.Data Crops
ataCropsは、競合するさまざまなWebソースから製品の価格情報を抽出、自動化、および配信するために使用される価格監視ソフトウェアです。 最高の価格監視サイトの構築に役立ちます。
価格：カスタマイズ
無料試用：利用不可
![datacrops.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/554a6da3-8c58-600c-8290-89847e4654ad.png)
上記のツールに加えて、Webスクレイピングツールも適しています。 価格をすばやく削ることができ、定期的に価格をスクレイピングして価格の変化に関するデータを取得することもできます。

####ここにいくつかのWebスクレイピングツールを推奨します。

###1.ScrapeStorm
ScrapeStormとは、強い機能を持つ、プログラミングが必要なく、使いやすく人工知能Webスクレイピングツールです。違う基盤のユーザーに二つのスクレイピングモードを提供し、1-Clickで99％のWebスクレイピングを満たします。ScrapeStormにより、大量のWebデータを素早く正確的に取得できます。手動でデータ抽出が直面するさまざまな問題を完全に解決し、情報取得のコストを削減し、作業効率を向上させます。
価格：49.99 $ /月から
無料トライアル：利用可能
価格監視ケース：[ScrapeStormで価格を監視する方法](https://jp.scrapestorm.com/tutorial/how-to-monitor-price-with-scrapestorm/)
![scrapestorm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/c93810f1-279e-4e3c-1bf1-1a48dc97f03f.png)
###2.Import.io
Import.ioは、Webページ内の半構造化情報を構造化データに変換するプラットフォームであり、Appや他のプラットフォームとの統合など、及びビジネス業務決定の促すに使用できます。
JSON RESTベースおよびストリーミングAPIによるリアルタイムのデータ取得、および多くの通用するプログラミング言語とデータ分析ツールとの統合を提供します。
価格：カスタマイズ
無料トライアル：利用可能
価格監視ケース：[Import.ioで価格を監視する方法。](https://www.scrapestorm.com/tutorial/how-to-monitor-price-with-scrapestorm/)
![Import.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/dda53cb9-e398-942a-9473-05f5cb939b7b.png)
###3.ScrapingHub
Scrapinghubとは、インターネットから構造化された情報を抽出するため、いくつかの便利なサービスを提供する、開発者向けのWebスクレイピングプラットフォームです。
価格：カスタマイズ
無料トライアル：利用可能
価格監視ケース：[価格監視ツールを構築する方法](https://medium.com/@ScrapingHub/how-to-build-your-own-price-monitoring-tool-b484fa0233f9)
![ScrapingHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/9368002a-5a80-3eee-96b8-0ab3dda278cc.png)
現在、価格監視は企業にとって非常に必要であるように思われます。ツールを選択し、その使用方法を学ぶことは間違いなく助けるでしょう。
Vim好きのためのJupyter Notebookの初期設定・jjで抜けるとか（jupyter-vim-binding）

# まえがき
タイトル通りのことをしたい．弊社の初期の開発環境は何も入っておらず，無意識にjjが表示されがちである（vimあるあるだと思っている）．Jupyterでも基本的なvimの環境が入っていることが個人的に望ましいため，これを設定する手順を記述する．なお，会社の環境はlinuxなのだが，クリーンインストールした自宅のPCで記事を書いているため，macOSについてである．ただし，大体同じなハズ．

# 環境・準備

- MacOS Catalina 10.15.4
- python 3.6.5 （pyenv等はお好みで）
- git

# 方法
## jupyter-vim-binding の導入
基本的に[これ](https://github.com/lambdalisue/jupyter-vim-binding)でいいと思っている．他にもあると思うが，今回はこれで書く．
まず，pipでjupyter notebookをインストールしておく．どうせ使うのでpandasも．

~~~
pip install jupyter
pip install pandas
~~~

脳死でgithubに書いてある手順をふむ．

~~~sh
mkdir -p $(jupyter --data-dir)/nbextensions
cd $(jupyter --data-dir)/nbextensions
git clone https://github.com/lambdalisue/jupyter-vim-binding vim_binding
jupyter nbextension enable vim_binding/vim_binding
~~~

とりあえず現時点でjupyterを開くと以下のようなものが出てくる．

~~~sh
cd
jupyter notebook
~~~

<img width="500" alt="スクリーンショット 2020-04-30 15.16.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170560/c162daeb-6ed1-fd0f-a917-9ab4d24dd249.png">

これはホームディレクトリだが，とりあえず右上のNewからpython3を選択して開くと，
<img width="500" alt="スクリーンショット 2020-04-30 15.18.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170560/24451ac1-e7b2-aff6-a174-592a93952bc2.png">

こんなのがでて，Untitled.ipynbが作成される．クリーム色のときnormalモードであり，iでインサートモードに入れる．詳細は本家ページをみるべし．[これ](https://github.com/lambdalisue/jupyter-vim-binding)．

設定をしないとjjでインサートモードを抜けられなくて腹が立つので，キーマッピングを編集する．

## キーマッピングの編集
本記事ではnvimで編集する（適当なエディタでどうぞ）．~/.jupyterにjupyterの設定がおかれるっぽい．その中のcustom以下にcustom.jsを作成または編集する．

~~~sh
mkdir -p ~/.juputer/custom/
nvim ~/.jupyter/custom/custom.js
~~~

エディターが開いたら，以下を保存する．これは公式に書いてあった設定のうち，jjでノーマルモードに戻る設定以外を削除したもの．

~~~javascript
// Configure CodeMirror Keymap
require([
  'nbextensions/vim_binding/vim_binding',   // depends your installation
], function() {
  CodeMirror.Vim.map("jj", "<Esc>", "insert"); // jj setting!
});

// Configure Jupyter Keymap
require([
  'nbextensions/vim_binding/vim_binding',
  'base/js/namespace',
], function(vim_binding, ns) {
  // Add post callback
  vim_binding.on_ready_callbacks.push(function(){
    var km = ns.keyboard_manager;
    // Allow Ctrl-2 to change the cell mode into Markdown in Vim normal mode
    km.edit_shortcuts.add_shortcut('ctrl-2', 'vim-binding:change-cell-to-markdown', true);
    // Update Help
    km.edit_shortcuts.events.trigger('rebuild.QuickHelp');
  });
});
~~~

これでかなり気持ちよく編集ができるようになる．使ってればわかってくるはず．
最後にGifアニメーションを貼っておきます．
![jupyter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170560/0965b3e5-6d97-9809-2cec-177cdd3026ff.gif)


# おわりに
会社の環境だと，セキュリティの関係で何かとインストールがしづらいが，gitは行けたのでなんとかなった．また別の環境になったときはとりあえずこの記事のようにやるようにする．vimmerにとっては少なくともjkhlの移動は死活問題なので，jupyter-vim-bindingだけでも設定するとよいと思う．
#Vue 初心者 – 1ファイル内で component を使うごく簡単な例 ( HTML )

- component の中に何を書けば良いかドキュメントから分からない
- export とか import の例とかに進むとさらによく分からない
- ごく簡単な例から確認してみよう

# 例

- `<li>foo</li>` と `<li>bar</li>` を component にして `<ul>` の中で使ってみる 
- script 部分で component を作っておくと、 HTML的なところでタグとして利用することができる

```vue
<!-- https://vuejs.org/v2/guide/components-registration.html -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<body>
  <div id="example">
    <ul>
      <list-item-foo></list-item-foo>
      <list-item-foo></list-item-foo>
      <list-item-foo></list-item-foo>
      <list-item-bar></list-item-bar>
      <list-item-bar></list-item-bar>
    </ul>
  </div>

  <script>

    Vue.component('list-item-foo', {
      template: '<li>foo</li>'
    })

    Vue.component('list-item-bar', {
      template: '<li>bar</li>'
    })

   new Vue({
      el: '#example',
    })
</script>
</body>
```

# 参考

Vue入門


# 表示の例

![image](https://user-images.githubusercontent.com/13635059/80562939-48058b00-8a24-11ea-88e1-acd394911c76.png)

# 一歩進む

Component を生成する時に変数名を付けておいて、それに別の名前をつけて Vue のインスタンスに与えるということが出来るみたいだ

```vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<body>
  <div id="example">
    <ul>
      <list-item-foo></list-item-foo>
      <list-item-foo></list-item-foo>
      <list-item-foo></list-item-foo>
      <list-item-bar></list-item-bar>
      <list-item-bar></list-item-bar>
    </ul>
  </div>

  <script>
    var ComponentFoo = Vue.component('list-item-foo', {
      template: '<li>foo</li>'
    })
    var ComponentBar = Vue.component('list-item-bar', {
      template: '<li>bar</li>'
    })

    new Vue({
      el: '#example',
      components: {
        'list-item-foo': ComponentFoo,
        'list-item-bar': ComponentBar
      }
    })
</script>
</body>
```

# 別ファイルから import するには？

script から import できるわけではないのだろうか...

まだよく分かっていない

```js
  <script>
    import ComponentFoo from './ComponentA'
```

エラー

```
component.html:16 Uncaught SyntaxError: Cannot use import statement outside a module
```

HTMLファイルや他のファイルだけでは動かなさそうなことが書いてある気もする

![image](https://user-images.githubusercontent.com/13635059/80563565-52288900-8a26-11ea-801d-1bd803d4fa93.png)

参考

>Vue.jsで単一ファイルコンポーネントを使いたい場合はWebpack等のモジュールバンドラでビルドするのが本来の方法です。しかし、学習コストや環境構築の手間がそれなりにかかります。

[【Vue.js】HTML importsを用いた擬似単一ファイルコンポーネント - Qiita](https://qiita.com/Kunikata/items/c4d2cafcddef608dde4f)

# Original by Github issue

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











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Address already in use - bind(2) for "0.0.0.0" port 3000 (Errno::EADDRINUSE) が出たとき

### エラー内容: Address already in use - bind(2) for "0.0.0.0" port 3000 (Errno::EADDRINUSE)

###解決策
3000portで繋いでいたのでそのプロセスをkillしたら直った。
割とよくあるエラーでいつもコマンドを忘れるのでメモ。。


```
$ kill -9 $(lsof -i tcp:3000 -t)
```

lsofコマンドを先にインストールしておいた方がいいかも。

```
$ apt-get install lsof
```
CMakeの最新バージョンをUbuntu18.04.4 LTSにインストール

#導入

CMakeの最新バージョンをUbuntuにインストールする方法について紹介する。

#環境

- Ubuntu 18.04.4 LTS
- gcc 7.5.0
- GNU Make 4.1
- OpenSSL 1.1.1
- libssl-dev 1.1.1

今回インストールを試みたCMakeのバージョン
- CMake 3.17.2

#最も簡単なインストール方法

最も簡単にCMakeをインストールするならば、apt-get(CentOSなどのRHEL系統はyum)で下記のようにインストールできる。

```
$ sudo apt-get install cmake
```

しかし、これで得られるCmakeのバージョンはいくらか古いものになる。
（自分が確認したcmakeのバージョンは3.10だったと思う）
これ以上の最新版（最新版に限らず別のバージョンも然り）を手に入れるには、直接サイトから手に入れるしかない。


#OpenSSL development package をインストールする

CMakeをインストールするために、OpenSSL development packageが必要になる。
これは、以下のコマンドでインストールすることができる。

```
$ sudo apt-get install libssl-dev
```

バージョンの確認は以下のようにしてできる。

```
$ dpkg -l | grep libssl
ii  libssl-dev:amd64                                1.1.1-1ubuntu2.1~18.04.5                         amd64        Secure Sockets Layer toolkit - development files
```

これを見るに、version 1.1.1ということらしい。
ちなみに、これに先駆けてOpneSSL自身も以下のようにしてアップデートした。

```
$ sudo apt-get install openssl
```

インストールが完了したら、以下のようにしてバージョンを確認しよう。

```
user@hyasuda:~$ openssl version
OpenSSL 1.1.1  11 Sep 2018
```


#CMakeをインストールする

CMakeのソースコードは以下のサイトから手に入れることができる。
https://cmake.org/download/

ここでは、当時の最新版である CMake 3.17 をインストールした。
インストールする際には、makeをあらかじめインストールする必要があることに注意すること。

ソースファイル(hogehoge.tar.gz)を上記サイトからダウンロードする。
ダウンロードして展開した後のファイルの中身はいかのようになっている。

```
$ ls /path/to/cmake-3.17.2
Auxiliary                   CMakeLists.txt     CTestCustom.cmake.in  Help       README.rst  Utilities                 doxygen.config
CMakeCPack.cmake            CMakeLogo.gif      CompileFlags.cmake    Licenses   Source      bootstrap
CMakeCPackOptions.cmake.in  CONTRIBUTING.rst   Copyright.txt         Modules    Templates   cmake_uninstall.cmake.in
CMakeGraphVizOptions.cmake  CTestConfig.cmake  DartConfig.cmake      Packaging  Tests       configure

```

この中にあるbootstrapを実行し、そのあとにmakeを行えば良い。詳しくは中にあるREADME.rstを読むと良い。
（というか、ここに書いてある内容はREADME.rstの中身をそのまま説明している）


```
$ cd /path/to/cmake-3.17.2
$ ./bootstrap && make && make install
```

これでインストールは完了する。
全て完了した後に、cmakeコマンドでバージョンを確認する。

```
$ cmake --version
cmake version 3.17.2
```

#まとめ

僕が試した時にはOpenSSLのdevelopment packageがないところで詰まりましたが、その後は問題なく動作することができました。
もしみなさんが詰まったところなどあれば参考までに教えていただけると嬉しいです。
VivadoでUART0を設定した際、SDKでprintが表示されなくなるのとその解決法

備忘録

## 環境

- Windows 10 Home
- Vivado & Xilinx SDK 2019.1
- Zybo(多分無印)
 
## 経緯

MIO用PmodからPSのUart0を用いて送受信をしたかったので，[Recustomize IP]>[Peripheral IO/Pins]でUART0をMIO10,11に設定し，[Generate Bitstream]し，[Export Hardware]して[Launch SDK]．
[File]>[new]>[Application Project]
[Project Name]を埋めて，デフォルトのまま\[Finish](Hello Worldテンプレートがでるので)

Run→Tera Termで見るも動かない

## 解決法

[使用しているbspを右クリック]>[Board Support Package Setting]
[OverView]>[standalone]
[stdin]と[stdout]の[Value]を[ps7_uart_0]から[ps7_uart_1]にする．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214706/ccbd0187-f7e6-34d9-7fc2-2fd2cb75a740.png)


## 所見

Vivadoの[Recustomize IP]でUART0を有効化した場合，デフォルトは[ps7_uart_1]になっている値が[ps7_uart_0]になっているっぽい．
デフォルトでTXD,RXD，つまりMIO48,49に接続されている[ps7_uart_1]がstdin/outから外れてるのだから，何も表示されない（当たり前）．
とりあえずBigQueryで、サンプルテーブル（emp/dept）が使いたい

# 概要
* 雑でもいいので、とりあえず
  * BQでサンプルテーブル（emp/dept）が使いたい。という人向けのDDLとDMLです。
* 注意点は、[備考](#備考)を参照

# SQL
```SQL
CREATE TABLE `<dataset_id>.dept`(
  dept_no NUMERIC,
  dept_name STRING,
  location STRING
);

CREATE TABLE `<dataset_id>.emp`(
  emp_no NUMERIC,
  emp_name STRING,
  job STRING,
  manager_no NUMERIC,
  hiring_date DATE,
  salary NUMERIC,
  commission NUMERIC,
  dept_no NUMERIC
);

INSERT INTO `<dataset_id>.dept` VALUES(10, 'ACCOUNTING', 'NEW YORK');
INSERT INTO `<dataset_id>.dept` VALUES(20, 'RESEARCH', 'DALLAS');
INSERT INTO `<dataset_id>.dept` VALUES(30, 'SALES', 'CHICAGO');
INSERT INTO `<dataset_id>.dept` VALUES(40, 'OPERATIONS', 'BOSTON');

INSERT INTO `<dataset_id>.emp` VALUES(7839, 'KING',   'PRESIDENT', null, DATE(1981,11,17), 5000, null, 10);
INSERT INTO `<dataset_id>.emp` VALUES(7698, 'BLAKE',  'MANAGER',   7839, DATE(1981,05,01), 2850, null, 30);
INSERT INTO `<dataset_id>.emp` VALUES(7782, 'CLARK',  'MANAGER',   7839, DATE(1981,06,09), 2450, null, 10);
INSERT INTO `<dataset_id>.emp` VALUES(7566, 'JONES',  'MANAGER',   7839, DATE(1981,04,02), 2975, null, 20);
INSERT INTO `<dataset_id>.emp` VALUES(7788, 'SCOTT',  'ANALYST',   7566, DATE(1987,06,13), 3000, null, 20);
INSERT INTO `<dataset_id>.emp` VALUES(7902, 'FORD',   'ANALYST',   7566, DATE(1981,12,03), 3000, null, 20);
INSERT INTO `<dataset_id>.emp` VALUES(7369, 'SMITH',  'CLERK',     7902, DATE(1980,12,17),  800, null, 20);
INSERT INTO `<dataset_id>.emp` VALUES(7499, 'ALLEN',  'SALESMAN',  7698, DATE(1981,02,20), 1600,  300, 30);
INSERT INTO `<dataset_id>.emp` VALUES(7521, 'WARD',   'SALESMAN',  7698, DATE(1981,02,22), 1250,  500, 30);
INSERT INTO `<dataset_id>.emp` VALUES(7654, 'MARTIN', 'SALESMAN',  7698, DATE(1981,09,28), 1250, 1400, 30);
INSERT INTO `<dataset_id>.emp` VALUES(7844, 'TURNER', 'SALESMAN',  7698, DATE(1981,09,08), 1500,    0, 30);
INSERT INTO `<dataset_id>.emp` VALUES(7876, 'ADAMS',  'CLERK',     7788, DATE(1987,06,13), 1100, null, 20);
INSERT INTO `<dataset_id>.emp` VALUES(7900, 'JAMES',  'CLERK',     7698, DATE(1981,12,03),  950, null, 30);
INSERT INTO `<dataset_id>.emp` VALUES(7934, 'MILLER', 'CLERK',     7782, DATE(1982,01,23), 1300, null, 10);
```

# 備考
* dataset_idを指定していますが、必要に応じ、project_idも指定して下さい。
* BQでは、INSERT文連発は推奨されていないです。
  * 環境によっては **too many table update operations for this table.** のエラーが出ます
  * 出たら、INSERT文のどこかで実行が止まっているはずなのでその行から再実行して下さい。
* SQL文も下記直しています。
  * データ型をBQでも実行できる型に変更（NUMERIC,STRING）
  * 列名を理解できる表記に変更（ename -> emp_name,comm -> commission等）
新作講座　Unity３Ｄゲーム　Standard講座を発売したって話　


　

この度、　Unity3Dゲーム　Ｓｔａｎｄａｒｄ講座を発売しましたー。


こちらは３年ぶりの新作講座なので　かなり久しぶりですね。


名前のとおり　３Ｄゲームに特化した内容で
Unityの基礎をマスターできる内容となっています。　

動画で約６時間のボリュームです。　

更には　作ったゲームを　アプリとしてリリースするまでの過程も全部
解説しています。　
【Androidでの解説だけです。iosはありませんので】




今年に入って　Unityを教えることなども多くなってきたので　

更に　第３弾の講座も予定しています。　

本当は、　勉強会などもやる予定だったんですけど。　
コロナの影響で　会場とかカラオケ店なども　使えなくなりましたからね。

なので、勉強会はしばらくあおずけです。　


今は皆さん　引きこもって　ゲームとかしている人も多いと思いますけど　

これを機に、　ゲーム作りなどをしてみてはどうでしょうか？　












ＰＳ

講座はＮｏｔｅにて　販売しています。　
https://note.com/zazizuzezo22334/n/n90340339a00c?magazine_key=m3f4ee59f0352



只今　緊急事態セールということで　７０％ＯＦＦで　購入できます。　

あと、　Ｃ＃プログラミングマスター講座も　好評発売中です。　
こちらも７０％ＯＦＦにしています。　

この２つをセットで　購入するお客さんが多いですね。

やはりＣ＃が分からないと　Unityも理解できないので　
Ｃ＃の勉強もちゃんとしたほうがいいかと思います。


NOTEでも　ちょいちょいUnityネタを投稿しています。

よかったら、フォローしてください。






![bandicam 2020-03-22 05-55-31-149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295760/edf44ec8-e80d-f926-2408-a4f6f922e044.png)
スタティックプロパティ って何？

##プロパティとは
classや構造体などの型が持つ値のことです。
##プロパティはそれを誰が保有するのかで分類できる

###インスタンスプロパティ
プロパティはデフォルトではこの形になります。ですので、後述するスタティックプロパティと見比べることをお勧めします。

```swift
class Man {
    var name = "Taro"
}

let man1 = Man()
let man2 = Man()

man2.name = "Jiro"

print("\(man1.name),\(man2.name)") //Taro.Jiro
```

`human1`と`human2`でそれぞれインスタンス化をしています。
同じHumanクラスをインスタンス化したものですが、プロパティであるnameはインスタンスごとに異なっていることがわかります。

###スタティックプロパティ
staticとはApple付属の辞書によれば「静止した状態にあるさま。静的。」という意味です。

```swift
class Man {
    static let sex = "male"
    var name = "Taro"
}
let man = Man()
print("\(man.name),\(Man.sex)")
```

インスタンスプロパティと異なり、インスタンスそのものが値を持つわけではないので元のクラスから呼び出すことになります。
デリゲートがいつまでたってもわからない

　とりあえずわかったことだけメモ。

＜基本構造＞
　デリゲート→デリゲート先＝親ビュー→子ビュー

＜基本の流れ＞
①デリゲートが親ビューに、デリゲートが持っているものを委譲する（譲り渡す）。
②親ビューがデリゲートの持ち物の具体的な中身を定義する（＊１）。しないと怒られる。
③子ビューのデリゲートに親ビューのデリゲートを指定する。（＊２）。
→上から委譲、下から引っ張るみたいなイメージ。

＊１：定義しなくてもいいやつがある（デリゲートでoption指定されているもの）。
＊２：childview.delegate = self みたいなやつ。

＜できること＞
・デリゲートの持ち物を子ビューも使えるようになる。
←何が嬉しい？

＜デリゲートを使う利点＞
・<a href="https://qiita.com/ika_tarou/items/8208153f30fdb4144c18">「猿がもがきまくって理解したSwiftのデリゲート（Delegate）という仕組み」</a>という記事では、デリゲートを使わないとできない、子ビューから親ビューへの連絡手段として紹介されている。なるほど……？
・<a href="https://qiita.com/st43/items/9f9990d76cefa1909ef4">「SwiftにおけるDelegateとは何か、なぜ使うのか」</a>という記事では、①イベントを検知する処理と②検知後にしたい処理を、コード上ですっぱり分けて書きたいから、と説明されている。なるほど。
JavaでDB接続をしてみる

### JavaでDBを操作するには
Javaで使うMySQLをドライバーを入手し、プロジェクトに追加する

#### SQLドライバーを入手
以下のURLにアクセスし、`Select Operating System:`の下にあるセレクトボックスを`Platform Independent`にして
zipをダウンロードし、解凍する。（ダウンロード先はどこでもOK）
[SQLドライバー](https://dev.mysql.com/downloads/connector/j/)
<img width="852" alt="スクリーンショット 2020-04-30 14.35.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/6a9118d9-cbc0-43ad-0eb2-38268538f6d6.png">

解凍したら`jarファイル`ができる。

#### プロジェクトに追加
解凍したSQLドライバーをプロジェクトに追加する。
`Eclipse`で作ったプロジェクトの`WebContent->WEB-INF->lib`にドラッグ＆ドロップ
以下のようになる。
<img width="288" alt="スクリーンショット 2020-04-30 14.34.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/ab200d98-7f87-e3f8-faa3-d229be20cdf4.png">

### ビルドパスの構成を設定
``プロジェクト右クリック->ビルド・パス->ビルド・パスの構成`を開き、ライブラリタブから`外部JARの追加`を選択し、先ほど`WebContent->WEB-INF->lib`に追加したjarファイルを選択し、追加させる。
追加させた時の画面が以下の通り。
<img width="819" alt="スクリーンショット 2020-04-30 14.45.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/825b1afa-eeaf-9bec-ab15-e631f05840c5.png">

### DBの接続確認

以下の実装でDB接続を図る

```DBConnect.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBManager {
    public static Connection getConnection(){
        Connection con = null; // 初期化
        try{
            Class.forName("com.mysql.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost:ポート番号/データベース名","ユーザー名","パスワード");
            System.out.println("DB接続成功!!!");
            return con;
        }catch(ClassNotFoundException e){
            throw new IllegalMonitorStateException(); // クラスがなかった時の例外処理
        } catch (SQLException e) {
            throw new IllegalMonitorStateException(); // SQLでエラーが起きた時の例外処理
        }
    }
}
```

```DBConnect.java
  Class.forName("com.mysql.jdbc.Driver");
  con = DriverManager.getConnection("jdbc:mysql://localhost:ポート番号/データベース名","ユーザー名","パスワード");
  System.out.println("DB接続成功!!!"); // 成功したら出力するようになっている なくてもOK
  return con; // 接続結果を返す
```


#### Class.forName("com.mysql.jdbc.Driver");
##### Classクラス
クラスクラス・・・ｗ
>すべてのクラスのスーパークラスである java.lang.Object クラスにgetClass()というメソッドが実装されており、サブクラスのインスタンス生成時に該当のサブクラスのClass情報をClassクラスのインスタンスとして生成し、保持します。

クラス読み込み用クラスみたいなイメージかな

#### forName("com.mysql.jdbc.Driver");
()内はクラス名　ここではSQLドライバーを指定している。
>forName()することにより、DBドライバクラスがロードされ、staticイニシャライザが実行されます。DBドライバクラスは全て、java.sql.Driverを実装しており、各DBドライバクラスでは、staticイニシャライザでDriverManagerクラスというドライバを管理するクラスにDBドライバクラス自身を登録しに行くという処理を実施しています。

`forName`でSQLドライバーを探しに行って勝手に登録してくれるみたい
[参考：知ってるようで知らないClassクラス(基本編)](https://qiita.com/SHOSI/items/ea713e6205257ab8617b)


以上でDBの接続は完了する。
QNAPの基本的な設定をする

QNAPの設定をできるだけコントロールパネルからでなくAnsibleからやりたい場合、どうしたらいいか。

# 基本設定
/etc/config の下にいろんな設定があるので、これを書き換える。
/etc/config だけは /mnt/HDA_ROOT の中にある。ここは再起動しても保存される。それ以外の/etcはいくらいじっても再起動すると消えてしまう。

なお、/etc/config/uLinux.conf にシステム設定がある。コントロールパネルの項目とだいたい対応しているので、なんとなくわかる。iniファイルなので、ansibleのini_fileモジュールで変更できる。または/sbin/getcfgと/sbin/setcfgを使う。

ただし、変更後は再起動すること。

# ユーザー、グループ、共有フォルダー
/etc/config の下をいじってもできそうだけど、qcli系のコマンドを使うのが一番面倒がなさそうだ。
ユーザーはqcli_users
グループはqcli_usergroups
共有フォルダーはqcli_sharedfolder
を使う。どれも、-hをつけると使い方の説明が出てくる。

# できてない設定
* QNAPcloud DDNS: 認証がからむので仕方ない気がする。
* Container Station: 最初の設定をするのに、コントロールパネルを使う方法以外見つからない。
Ruby on Rails チュートリアルの実施と概要

○この記事の要点
・Ruby on Rails チュートリアルを始める前に見ておきたい内容
Ruby on Rails チュートリアル：https://railstutorial.jp

○Ruby on Railsチュートリアル概要
・Ruby on Railsを利用し、Webサービスを創りながら学んでいく大型チュートリアル
・筑波大学や琉球大学などでも採用されているメジャーなチュートリアル
・Rubyの基礎、HTMLとCSS、データベース、バージョン管理、開発技法などWeb開発のすべてが網羅されている
・望ましい前提知識はあるが、必須の前提知識はない。このチュートリアルから始めるで全然OK
・3つのサンプルアプリケーションを作る
（１）helloアプリ
（２）もう少しだけ複雑なtoyアプリ
（３）実践的なsampleアプリ（「偶然にも」Twitterにとてもよく似ている）
・関連用語：HTML、データベース、CSS、MVC、REST、ジェネレータ、マイグレーション、ルーティング、ERBなど、Railsフレームワーク
・今回は、Webテキスト (第4版)（すべての章が無料）にトライ。無償版以外には、サポートレベルに応じた有償版がある

○各章（全14章）で実施すること
■第1章
・必要なソフトウェアのインストール
・開発環境の整備、Ruby on Railsを動かす準備
・最初のサンプル作成
・Gitを使ったバージョン管理、一般公開
■第2章
・おもちゃアプリの作成
・scaffoldを使った短時間でのコード自動生成
■第3章～14章
・大規模サンプルアプリケーション (sample_app )の開発
・「モックアップ」「テスト駆動開発 (TDD)」「統合テスト」の3つの手法を取り入れる
IQ Bot トラブルシューティング：PC→「困ったら再起動」IQ Bot→「困ったらRabbit MQの再起動」

こんにちは。

この記事はほぼタイトルのとおりなのですが……

IQ Botをスペック不足のマシンで動かしていると、たまに（よく？ 笑）固まります。
※20201222追記：最近はそんなに固まらなくなりました！ パフォーマンスも少しずつ改善しているもようです。

そんなとき、マシン自体を再起動しても症状が改善しないことが多いのですが、**Windowsのサービスから「Rabbit MQ」というサービスを再起動すると直ることが多い**です。

この説明でわかった人は、以下の説明は読み飛ばして大丈夫です。

##Rabbit MQとは？

オープンソースのミドルウェアで、IQ Botはこれの上で動いています。
詳細は[Wikipedia](https://ja.wikipedia.org/wiki/RabbitMQ)参照。

なので、Rabbit MQを再起動することにより、IQ Botの関連サービスをひととおり再起動することが可能というわけです。

##Rabbit MQ再起動の手順

###1.Windowsマークをクリック→「サービス」を起動

![01_サービス起動.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/83dcd92d-3a38-1071-ce8a-8acd127b64e8.jpeg)

###2.Rabbit MQを右クリックして再起動

![02_RM再起動.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/78d770b7-0cda-f45e-d63c-e44d58718a1f.jpeg)

###3.「はい」を選択

![03_関連サービスがひととおり再起動される.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/ca1133de-61f7-b417-351a-d35bbc1bd6a7.jpeg)

このポップアップで表示される「Automation Anywhere Cognitive ...」で始まるサービスが、IQ Botの関連サービスになります。

##ちなみに

IQ Botのパフォーマンスはバージョンを追うごとに改善してきているものの、やはりノートPC一台にCRもクライアントも全部同梱……という環境には無理がある模様。。。

推奨要件を満たしたサーバを使い始めたら、原因不明で固まる事象は見られなくなりました。

参考：IQ Botの推奨スペック[ベンダー公式サイト]
https://docs.automationanywhere.com/bundle/iq-bot-v6.5/page/iq-bot/topics/release-notes/iq-bot-hardware-and-software-requirements.html）
#Scala: vol2:  【akka-grpcでgoogle/protobuf/*.proto をimportする方法】

# #Scala: vol2:  【akka-grpcでgoogle/protobuf/*.proto をimportする方法】


## 問題

[akka-grpc](https://github.com/akka/akka-grpc)で開発時に、
`google/protobuf/*.proto` のimportができずに、

```:sbt-console
Import "google/protobuf/timestamp.proto" was not found or had errors
"google.protobuf.Timestamp" is not defined.
```

となってしまったので、その解決策についてご紹介します。


## 解決策

https://github.com/akka/akka-grpc/issues/681


> Find the ones you need in protocolbuffers/protobuf:src/google/protobuf@master , download and put them alongside your projects' .proto resources
>> ダウンロードして、プロジェクトの.protoリソースと並べて配置

と書いてありましたが、 もっと簡単に対応可能です。

build.sbt に以下を追加すれば解決です。


```
libraryDependencies ++= Seq(
  "com.google.protobuf" % "protobuf-java" % "3.6.1" % "protobuf"
)
```
rsyslogで複数マシンのログをリモートサーバに保存する

# rsyslogでリモートロギング
複数のLinuxマシンのログをまとめて保管しておきたい場合に、rsyslogを用いることで追加のミドルウェア導入なしにログの一元管理が可能になることを確認する。

## 環境
CentOS 8 * 2(rsyslog clientとrsyslog server)
rsyslog: OSインストール時に標準でインストール済み


## 概略図

![rsyslog_architecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94861/55ac9b54-06b9-e33c-e998-7542acec8895.png)




## rsyslogの動作確認

rsyslogが動作していることを確認(Activeの項目がactiveになっている)

```
[root@base ~]# systemctl status rsyslog
● rsyslog.service - System Logging Service
   Loaded: loaded (/usr/lib/systemd/system/rsyslog.service; enabled; vendor preset: enabled)
   Active: active (running) since Thu 2020-04-30 22:53:07 KST; 2min 54s ago
```



rsyslogが動作していればjournalctlコマンドでログが確認できる

```
journalctl --no-pager
```





## rsyslogの設定(rsyslogサーバ側 (ログ受信側))

rsyslogの設定ファイルを開きいくつか修正を加える

```
vi /etc/rsyslog.conf
```



TCPプロトコルで514ポートからログの入力を受け付ける設定が、コメントで記載されているのでコメントを外す

```
# Provides TCP syslog reception
# for parameters see http://www.rsyslog.com/doc/imtcp.html
module(load="imtcp") # needs to be done just once
input(type="imtcp" port="514"
```

接続元のCIDRを下記のように指定

```
AllowedSender TCP, 127.0.0.1, 192.168.1.0/24,10.240.0.0/24
```

設定を反映

```
systemctl restart rsyslog
```





nmapを用いて514ポートが空いたことを確認する

```
[root@base ~]# nmap localhost
PORT     STATE SERVICE
~略
514/tcp  open  shell
```



もちろんssやnetstatで確認してもいい

他サーバからリモートで確認することもあるため、nmapを利用している

```
[root@base ~]# ss -ln4 | grep 514
tcp   LISTEN  0       25                   0.0.0.0:514            0.0.0.0:*     
```



##  rsyslogの設定(rsyslogクライアント側 (ログ送信側))

rsyslogの設定ファイルを編集する

```
vi /etc/rsyslog.conf
```

試しにauthprivファシリティ関連のログを、rsyslogサーバに送付するよう編集する

もともと/var/log/secureに出力しているログが、rsyslogに送信されることになる(sshのログとか)

ここで、rsyslogサーバのIPは10.240.0.1としている

```
authpriv.*                                              @@10.240.0.1:514
```



設定を反映させる

```
systemctl restart rsyslog
```



## サーバ側でログを確認

tailコマンドなどで、サーバ側の/var/log/secureに出力されるログを監視してみます

```
[root@base ~]# tail -f /var/log/secure
```



クライアント側にて、authpriv関連の適当なコマンドを叩いてみます

とりあえず架空のユーザでsshアクセスを試行し、authpriv関連ログを出力させます。

```
[root@controller-0 ~]# ssh testuser@localhost
Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
```



サーバ側のterminalに戻り、ログが下記のように出力されていれば成功です

```
[root@base ~]# tail -f /var/log/secure
Apr 30 05:22:28 controller-0 sshd[5859]: Invalid user testuser from ::1 port 44604
Apr 30 05:22:28 controller-0 sshd[5859]: input_userauth_request: invalid user testuser [preauth]
Apr 30 05:22:28 controller-0 sshd[5859]: Connection closed by ::1 port 44604 [preauth]
```



もちろんjournalctlコマンドを用いると、より詳細な情報を確認できます

例えば、出力元のホスト名(ここではcontroller-0)なども出力されています。

```
Apr 30 05:22:28 controller-0 sshd[5859]: Invalid user testuser from ::1 port 44604
Apr 30 05:22:28 controller-0 sshd[5859]: input_userauth_request: invalid user testuser [preauth]
Apr 30 05:22:28 controller-0 sshd[5859]: Connection closed by ::1 port 44604 [preauth]
```
【Python】株価ドローダウンチャートの作成

指数データをもとにドローダウンチャートを作成するコードです。

#ライブラリの読み込み

```python:
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
from datetime import datetime
import seaborn as sns
sns.set()
```

#ETFデータの読み込み
NASDAQサイトで取得したcsvファイルを使ってますが、指数データであれば何でもよいです。

```python:
#あらかじめ以下のサイトから保存したCSVファイルの終値を一つにまとめる
#https://www.nasdaq.com/market-activity/funds-and-etfs/vti/historical
def make_df(etfs):
    df = pd.DataFrame()
    for etf in etfs:
        csvfile = etf +'.csv'
        csv_data = pd.read_csv(csvfile)
        csv_data.Date = pd.to_datetime(csv_data.Date)
        csv_data = csv_data.set_index('Date')
        csv_data= csv_data.rename(columns={' Close/Last': etf})
        df[etf] = csv_data[etf]
        df = df.sort_index().dropna()
    return df
```

#ドローダウンチャート作成

```python:
#ドローダウンチャート
def dd_chart(df):

    #全ファンドのドローダウンを計算したdfDD_allを作成
    dfDD_all = pd.DataFrame() 

    for i in range(0,df.shape[1]):
        dfDD = pd.DataFrame(df.iloc[:,i]) 
        dfDD['max']  = dfDD.iloc[:,0].cummax()
        dfDD[dfDD.columns[0]+'_DD'] = dfDD.iloc[:,0] / dfDD['max'] -1
        dfDD_all[dfDD.columns[0]+'_DD'] = dfDD[dfDD.columns[0]+'_DD']

    #チャートを作成
    fig = plt.figure()
    dfDD_all.plot(figsize = (15, round(dfDD_all.shape[1]/2+0.4,0)*5), subplots=True,
                  layout=(-1, 2),sharey=True, title ='Drawdown')
    plt.savefig('dd_plot.png',bbox_inches="tight")

```

#実行

```python:
etfs = ['VTI','SPXL']
df = make_df(etfs)
dd_chart(df)
```
このようなグラフが作成されます。
![dd_plot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341224/91369781-8470-56fd-43d8-713161a36352.png)
【Unity：C#】Attributeの定義をまとめる

VSで自動フォーマット適用した時にAttributeの定義が改行されて行が増えるのが地味に嫌だった

```c#:sample.before.cs
[SerializeField]
[Range(0, 1)]
private int sample;
```

カンマ区切りでいけたんだね

```c#:sample.after.cs
[SerializeField, Range(0, 1)]
private int sample;
```
[Rails]FullCalenderで投稿一覧も表示させつつ、マイページでは自分の投稿だけに絞ってカレンダーを表示する

## 目的
FullCalenderを使って、Twitter＋マイページでは自分の投稿をカレンダーで見る
ということを実装する

## 前提
フルカレンダーを実装し、カレンダーが表示できている
下記のサイトを参考に作りました。
https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4
https://qiita.com/imp555sti/items/ee9809768f6dc9439ab5


## やること
FullCalenderをまずは準備しておきます。
そして自分が一番詰まったのは、indexではフォローしている人全員を表示する。
しかし自分のマイページのカレンダーでは、自分の投稿のみに限定する。
ということです。

どうやらFullCalenderの使い方としてindexアクションで定めた@eventsをカレンダーで表示するようなので
indexでは投稿一覧を@eventsではなく、別の名前を与えて。
ユーザーの投稿一覧を@eventsとしてあげます。

```index.html.erb
def index
    @all_events = Event.all.includes(:user)
    @user = User.find(current_user.id)
    
   #フォローしているユーザーを取得
    @follow_users = @user.followings.map { |f| f[:id] }
    @follow_users << current_user.id
    
   #フォローユーザーの投稿のみ表示
    @events_onlyfollow = @all_events.where(user_id: @follow_users).order("created_at DESC")
    # 自分の投稿のみ
    @events = Event.where(user_id: current_user.id)
  end
```

まだまだ理解が浅くちゃんとできている訳ではないと思いますが。。。
とりあえずカレンダーが自分の投稿だけで絞れたのでひとまずOK
MAMPを使ったWordpressでのWEB制作方法10　初心者向け

#MAMPを使ったWordpressでのWEB制作方法10　初心者向け

前回の記事はこちら
[MAMPを使ったWordpressでのWEB制作方法9　初心者向け](https://qiita.com/fumiya0414/items/c6644e5a527a46521bf5)

前回設定したブログ一覧にサムネイルを設定します。

##ブログのサムネイル設定

wordpressの初期設定ではブログの投稿/編集画面には
サムネイル画像を設定する項目がありません。

[![Image from Gyazo](https://i.gyazo.com/f9ab2fd297270613f556000eecf6aa1a.png)](https://gyazo.com/f9ab2fd297270613f556000eecf6aa1a)

まずはfunction.phpファイルに機能を追加します。

```php:function.php
<?php
//カスタムメニュー
register_nav_menus( //メニュー機能をオンにする
array(
'place_global2' => 'グローバル', //“メニュー英語名” =>”メニュー名”,
'place_utility' => 'ユーティリティ',
'place_sidebar' => 'サイドメニュー',
'place_footer' => 'フッター',
)
);

//サムネイル機能追加
add_theme_support('post-thumbnails');
add_image_size('thumbside', 85, 85, true);
?>
```
サムネイル機能追加の下の２行をphpの閉じタグの中に追記します。

管理画面を再読込すると右のタブに画像投稿機能（アイキャッチ画像）が追加されます。

[![Image from Gyazo](https://i.gyazo.com/615b448841401d60c828d9e2348d8b80.png)](https://gyazo.com/615b448841401d60c828d9e2348d8b80)

ここにアイキャッチに使用する画像を設定して更新をしましょう。

[![Image from Gyazo](https://i.gyazo.com/391d3e022ca63c5325bf66849eccca82.png)](https://gyazo.com/391d3e022ca63c5325bf66849eccca82)

アイキャッチ画像を設定できました。
[![Image from Gyazo](https://i.gyazo.com/42c34c7f2471fdde034123604de23b04.png)](https://gyazo.com/42c34c7f2471fdde034123604de23b04)

index.phpのimgタグを以下に書き換えましょう。
このときthumbside部分はfunctions.phpの記述と
同じ名前に設定をしてください。

```php:index.php
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <!--書き換え前-->
                <img src="<?php echo get_template_directory_uri();?>/images/cat_3.jpeg">
　　　　　　　　　 <!--書き換え後-->
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>
```
投稿ごとのサムネイル画像が表示できました。
[![Image from Gyazo](https://i.gyazo.com/c158f5841dd149e4a039201bd555a6d9.png)](https://gyazo.com/c158f5841dd149e4a039201bd555a6d9)
やや横に伸びているので横幅を50pxに調整します。
function.phpに記述した数字部分が画像サイズです。
[![Image from Gyazo](https://i.gyazo.com/6a7e9a10b84877d255d4b6b9e2066a83.png)](https://gyazo.com/6a7e9a10b84877d255d4b6b9e2066a83)

次回は投稿一覧を表示できるようにファイル作成します。

次の記事はこちら
[MAMPを使ったWordpressでのWEB制作方法11　初心者向け](https://qiita.com/fumiya0414/items/d9ce0bb90d1ad9109c02)
注意！あなたのWordPressも狙われている！？侵入手口と挙動について

皆さんが当たり前のように使っているWordPressには，実は**脅威**が存在します。
乗っ取られると素人ではなかなか解析できないような複雑な改ざんが行われて，復元しないとページが見られなくなります。
今回はそのハッキングの一例を取り上げます。
「こっちはセキュリティ対策してるから大丈夫」ってわけにはいかないみたいですよ...

# まえがき
該当する事例が前にあったようです。
https://qiita.com/mikkame/items/eec33df6863ed81740c2

# 侵入経路
不明。
どこから入ってきたのかは分かりませんが，恐らくテーマやプラグインを脆弱性を突き**XSSを利用してPHPコードを実行させて環境を整えた**と見られます。

# 挙動
この例としては 

- /wp-load.php
- /wp-blog-header.php
- /index.php
- /wp-content/themes/twentyfifteen/inc/index.php
- /wp-content/themes/calliope/inc/index.php

が不正に書き換えられました。

# 何をされた？

/index.phpには，偽のサイトマップをGoogleなどに返す機能，ハッカー側がハッキングを完了したことを確認するために自らをGoogle検索してハッキングされているかを確かめる機能，botには普通のサイトのように見せかける機能などが追加されます。

一番危ないのが Twenty Fifteenのindex.phpです。
こちらをご覧ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196404/6c6861b7-567f-3835-a9f2-c3f1721c4738.png)
なんと，**ハッカーが使う隠しファイルマネージャー**が用意されていたのです。
このファイルマネージャーはやけに高機能で，パーミッションの変更，ファイルのアップロード，さらには**ローカルコンピューターへのアクセス**も可能になっています。
これは**非常に危ない**脆弱性であり，WordPressを使っている皆さんは注意が必要です。

# 侵入されないようにやっておくこと

まず大事なのは **WordPressのアップデート** です。
プラグインは定期的に更新する，評判の良くないものは使わない，テーマも定期的に更新する，そしてなにより，**WordPressのシステムを最新に保つ**ことが必要と言えます。

# おわりに
何かこの事に関して知っていることがあれば，ご教授ください。
コロナ休みで増えた家事を分担！LINEBotでスッキリ解決する

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/87) の 2日目の記事になります。

すごくなりたいがくせいぐるーぷ（ @inoue2002  ） | GWアドベントカレンダー

# はじめに
記事をご覧のみなさんStayHomeお疲れ様です。
一刻も早い収束を願い、みなさんで協力していきましょう！

さて、学校が休校になり、毎日お昼ご飯を作ったり、その他家事をしたりとそろそろ疲れてきたところではないでしょうか？
そんな皆さんのために、（僕はお母さんの為に）家族で各仕事の役割と分担をして発表してくれるLINEBotを作成したのでご紹介します。

#完成品
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">動作テスト <a href="https://t.co/sX9klkfsDJ">pic.twitter.com/sX9klkfsDJ</a></p>&mdash; ようかん (Yosuke Inoue) (@inoue2002) <a href="https://twitter.com/inoue2002/status/1255709376549015552?ref_src=twsrc%5Etfw">April 30, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#参考にした記事
[1時間でLINE BOTを作るハンズオン](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)
##構成
Node.js ＋ now

##画像&コード
ソースコードは[こちら](https://github.com/youkan2002/lunch-bot)
煮るなり焼くなりお好きなようにしちゃってください！


##使い方

１　リポジトリにある画像を適当にアップロードして画像URLを発行する
２　LINEBotのアクセストークンとシークレットキーを発行
３　index.jsを書き換えてデプロイ！

```index.js
//キーを設定する
const config = {
  channelAccessToken: "ここにアクセストークンを入れる",
  channelSecret: "ここにシークレットキーを入れる",
}

//画像URLを打ち込む
 url: "５箇所に画像URLを入れる",
 
```
##おわりに
日本中の家庭の助けになればいいなと思います(^^)
お疲れ様でした！
タグを指定するだけでRDSを自動起動・停止する

# はじめに

「[タグを指定するだけでEC2インスタンスを自動起動・停止する](https://qiita.com/uzresk/items/504d52bf1042c1067dde)」のRDS版です。

案件で必要になったためメモを残しておきます。

# やりたいこと

RDSタグにStartTime:8am、StopTime:9pmを設定すると朝8時に自動起動、夜9時に自動停止させます。

手順は前回と全く同じなのでドキュメントのコンテンツだけの記事です。

# 注意点

タグに対応するDB識別子が取得できない場合、SSMAutomationは失敗します。
つまりCloudWatchRulesに7amに起動するルールを設定したとしてもRDSにStartTime:7amに対応するルールがないと失敗してしまうのでその点だけご注意ください。

# RDSの自動起動

```yaml
description: StartRdsInstances Using Tags:StartTime
schemaVersion: "0.3"
assumeRole: "{{ AutomationAssumeRole }}"
parameters:
  StartTime:
    type: String
    default: 8am
    description: (Required) 7am,8am,9am
    allowedValues:
    - 7am
    - 8am
    - 9am
  AutomationAssumeRole:
    type: String
    description: (Optional) The ARN of the role that allows Automation to perform the actions on your behalf.
    default: ""
mainSteps:
  - name: StartRdsInstance
    action: aws:executeAwsApi
    inputs:
      Service: ssm
      Api: StartAutomationExecution
      DocumentName: AWS-StartRdsInstance
      TargetParameterName: "InstanceId"
      Targets:
        -
           Key: tag:StartTime
           Values: 
             - "{{ StartTime }}"
```

# RDSの自動停止

```yaml
description: StopRdsInstances Using Tags:StopTime
schemaVersion: "0.3"
assumeRole: "{{ AutomationAssumeRole }}"
parameters:
  StopTime:
    type: String
    default: 8pm
    description: (Required) 8pm,9pm,10pm,11pm
    allowedValues:
    - 8pm
    - 9pm
    - 10pm
    - 11pm
  AutomationAssumeRole:
    type: String
    description: (Optional) The ARN of the role that allows Automation to perform the actions on your behalf.
    default: ""
mainSteps:
  - name: StopRdsInstance
    action: aws:executeAwsApi
    inputs:
      Service: ssm
      Api: StartAutomationExecution
      DocumentName: AWS-StopRdsInstance
      TargetParameterName: "InstanceId"
      Targets:
        -
           Key: tag:StopTime
           Values: 
             - "{{ StopTime }}"
```
IQ Bot：マッピング設定のやりかた　フォームフィールド【応用編】ラベルのない項目や、ラベルの誤読が発生する帳票における項目の取得


##ラベルのない項目や、ラベルを誤読してしまう項目を取得したい場合

IQ Botは基本的には**ラベルと値の位置関係**をベースに取得項目のマッピングを設定していきますが、実際に業務で使う帳票の全項目に必ずラベルがあるとは限りません。

例えば請求書の請求元社名や住所などは、ラベルなしに書かれている場合がほとんどです。
また、画質の粗い帳票で、ラベル部分に背景色が濃く入っている場合など、ラベルの誤読が発生し、しかも誤読のパターンが予測できないという場合もあります。

このような項目をIQ Botで取得する方法は２通りあります。

###対処方法①：仮のラベルを指定する

対処方法その１は、**取得したい項目との位置関係が決まっている文字列を仮のラベルとして指定する**というやりかたです。

例えば以下の図は、「請求書」というタイトルの文字を社名をとるための仮のラベルとして指定している例です。

![仮のラベル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/b2c0f9b4-9738-8e19-2216-05f445d0c719.jpeg)

####仮のラベルを指定する場合の注意事項

仮のラベルを指定する場合、**とりたい項目との位置関係が決まっていて、かつ、安定的にとれる文字列をラベルとして選択する**ことが重要です。

たとえば上記の図で、「請求書」という文字から見て、社名の書かれてくる場所が必ず選択された範囲の中に入ってくるとわかっている場合は、「請求書」をラベルとしてOKです。

ですが、たとえば社名の上に書いてある住所の行数によって社名の位置が上下するような場合はどうでしょうか。
これはつまり、住所の行数によって「請求書」の文字と社名の**位置関係が変わってしまう**ということです。

そのような場合は、たとえば社名のすぐ上にある「TEL」の文字をラベルとして使う方が妥当です。

###対処方法②：固定座標的に指定する

対処方法その２は、項目を固定座標的に取得するやりかたです。

以下のように、**ラベルを指定せず単純に「フィールド値」の範囲だけを指定する**と、**指定した範囲を固定座標的に取得する**ことができます。

![固定座標.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/368cd5a5-f248-60ca-a85b-39123ac0ae12.gif)

……えっ？！　ラベルの指定って必須じゃないんですか？？？

じゃあ、他の項目もラベル指定しないで値の場所だけ指定すれば楽じゃん！！！

……と思った方は、下記の注意事項をよく読んでください。

####固定座標的に指定する場合の注意事項

上記の「ラベルを指定しない」やりかたで値の場所を選択すると、それはつまり「画像の中で、値として選択した範囲の場所を固定座標で取得する」という意味合いになります。

固定座標という言い方がわかりにくければ、「固定された場所」と言い換えてもいいです。

スキャンのときに位置がずれてしまったりしても、あくまで**画像上の固定の位置**から項目を取ってこようとするので、この点には注意が必要です。

個人的には、帳票上で位置が固定された項目であっても、**仮のラベルとして使える項目がある限りはラベルを指定する方がおすすめ**です。

##まとめ

- IQ Botでラベルのない項目を取得するには、２通りのやりかたがあります。
    - ①　仮のラベルを指定する
    - ②　固定座標で取得する
- よほどの理由がない限りは、①がおすすめです。
AndroidStudioで画像が表示されない場合の対処法

#AndroidStudioで画像が表示されない場合
imageViewをドラッグしてdrawableに保存してある画像を表示させようとしたところエラーが生じ、画像が表示されませんでした。エラーの文面は下の通りです。

```This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints  The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX). These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.  Issue id: MissingConstraints
```
ただ実際にhorizontal and vertical constraintsをいじっても依然として画像は表示されないので、画像そのものに問題があるのではないかと考え、保存してある名前の"○○○○○(1).png"から(1)を削ると画像が表示されるようになりました。
保存名の変更で治るという記事は見つからなかったのでメモとして残しておきます
Node.jsのrequest-promiseモジュールでresponseの内容が表示できずはまった件

##やりたかったこと  
Node-REDでリビングのGoogle homeにメッセージを喋らせるREST APIを作り、Node.jsでそのREST APIを呼び出すプログラムを作りたかった。REST APIの呼び出しにはrequest-promiseモジュールを利用。  

##はまったところ  
REST APIを以下のコードで呼び出したが、responseの内容を表示しようとしてもコンソールに`undefined`と表示されてしまう。  

```  
 var options = {  
        url: 'http://XXX.XXX.XXX.XXX:1880/sendtogh',  
        method: 'POST',  
        form: {"message": message},  //前段の処理でmessageにgoogle homeに喋らせたい内容をセット
      }  
    request(options)  
    .then(function(response){  
        console.log(response.statusCode);  //コンソールに「undefined」と表示される  
    })  
    .catch(function(err){  
    （省略）
```  

##解決方法  
request-promiseのドキュメントを見ると、optionsに`resolveWithFullResponse: true`を指定しないと、bodyの内容しか返却されないとのこと。
https://github.com/request/request-promise#get-the-full-response-instead-of-just-the-body