OmniAICreator/Qiita-1.07M huggingface dataset:
【HTML5】<strong>タグ、<b>タグの違いについてまとめ（どちらもレイアウトは太字になる）

# `<strong>`タグ、`<b>`タグの違い

HTML5の要素のうち、文字列が太字になるタグには、
`<strong>`タグ、`<b>`タグがあります。

下記のタグは、どちらも文字列を太字にするのですが、
太字にする対象の意味が異なります。

下記のどちらの意味合いもなく**太字**にしたい場合は、
CSSの[font-weightプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/font-weight)を使用して太字にします。

- [strongタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/strong)
重要性、重大性、または緊急性が高いテキストを表します。
他の箇所と比べて「より重要である」場合に使用します。

- [bタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/b)
要約に現れるキーワード、レビュー文内での製品名、または、その他の
表記上太字で記述される通例のある箇所 (但し、特別な重要性を持たない部分) に使用します。
要素の内容に読み手の注意を惹きたい場合で、
他の特別な重要性が与えられない場合に使用します。
他の箇所より重要度が高いような場合には、`<strong>`タグを使用します。


※詳しい使い方については下記の
**`<strong>`タグの使い方**と**`<b>`タグの使い方**を参照してください。

# HTML5で太字となるタグを使い分ける意味

HTML5は、各々のタグが持つ意味を正しく理解した上で使用することで、
ブラウザがタグ内の内容がどのような意味を持つのか理解することができ、
ひいてはSEO対策となります。

参考URL：[MDN | HTMLでのSemantics(セマンティクス)
](https://developer.mozilla.org/ja/docs/Glossary/Semantics#HTML_でのセマンティクス)

# `<strong>`タグの使い方

特に重要な情報を`<strong>`タグで囲みます。
`<strong>`タグを入れ子にすることで、強調を強めることができます。

## 使用例1

```
カラスは空を飛ぶことができます。しかし、
ペンギンは<strong>空を飛ぶことができない</strong>鳥なのです。
```
カラスは空を飛ぶことができます。しかし、
ペンギンは<strong>空を飛ぶことができない</strong>鳥なのです。

## 使用例2（入れ子）

入れ子にすると、内容がより強調されます。

```
実は、ペンギンの祖先は<strong><strong>空を飛べていた</strong></strong>ようです。
```
実は、ペンギンの祖先は<strong><strong>空を飛べていた</strong></strong>ようです。

# `<b>`タグの使い方
要約に現れるキーワード、レビュー文内での製品名、または、その他の
表記上太字で記述される通例のある箇所 (但し、特別な重要性を持たない部分) に使用します。

## 使用例

```
私はペンギンです。ペンギンの仲間には、<b>皇帝ペンギン</b>がいます。
```
私はペンギンです。ペンギンの仲間には、<b>皇帝ペンギン</b>がいます。

# 参照URL
- [MDN | font-weightプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/font-weight)
- [MDN | strongタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/strong)
- [MDN | bタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/b)
- [MDN | HTMLでのSemantics(セマンティクス)
](https://developer.mozilla.org/ja/docs/Glossary/Semantics#HTML_でのセマンティクス)
tkinter で表示した画像の切り替えをする

#概要
tkinter で画像を表示させ，ボタンによってその切り替えを行う．

#環境
- ubuntu 18.04 LTS
- python 2.7

#問題
ボタンを押して画像が切り替わるプログラムを書いても，画像が消え黒いキャンバスだけが残る．

#解決方法

- imgをグローバル変数として宣言する.
- コールバック関数の中でもimgをグローバル変数として宣言する.

#プログラム例
以下のプログラムは`img`をグローバル変数として宣言する箇所を抜粋し，キャンバスを描く等その他のプログラムは省略されている．

```python:change_img
# -*- coding: utf-8-*-


import Tkinter as tk
from PIL import Image, ImageTk
import os
import time

global img #imgをグローバル変数とする


def btn1_click():
    print("スタート")


def btn2_click():
    global img #imgをグローバル変数とする
    print("リセット")

    path = ''
    img = Image.open(path)
    img = ImageTk.PhotoImage(img)

    canvas.create_image(0, 0, image=img, anchor=tk.NW, tag='photo')


def btn3_click():
    global img #imgをグローバル変数とする
    print("撮影")

    path = ''
    img = Image.open(path)
    img = ImageTk.PhotoImage(img)

    # キャンバスに画像を表示する。第一引数と第二引数は、x, yの座標
    canvas.create_image(0, 0, image=img, anchor=tk.NW, tag='photo')


def btn4_click():
    print("シャットダウン")

```
#実行例
![Peek 2019-09-14 00-50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192626/02d9b41f-5c27-e9d6-8db6-59baf90f007e.gif)

#参考文献
- https://qiita.com/iCyP/items/e76ab6f584851c39f077
Safari 12 で発生する「Content Security Policy」バグのメモ

#はじめに

Qiitaに初めて投稿します「Saguzi」と申します。
普段はHTML/CSSをベタ打ちで趣味程度にWebデザインを嗜んでいます。
初回は遭遇したバグの記録とか。


##遭遇したエラー

私はMacでPHPの開発を行っていたのですが、
Googleの**reCAPTCHA v3**を導入している際にSafariで下記のようなエラー文に遭遇しました。
`The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.`
私の環境では3つ、エラーとして出力されていました。
これは一体何なんでしょうか。

###コンテンツセキュリティポリシー
*以下はMozillaが提供するMDN Web Docsからの引用です。*
>コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。
>[MDN Web Docs - https://developer.mozilla.org/ja/docs/Web/HTTP/CSP](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)

要するに勝手にHTMLやJavaSciptを書き換えてサーバにダメージを与えるような攻撃から守ってくれるものです。
しかし当該ソースには**'script-src'の記述はありません**。何故エラーが出るんでしょうか…？

##Safari 12から発生しているバグ

こちらはGitHubのIssueです。
>Safari bug, The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
>https://github.com/szchenghuang/react-google-invisible-recaptcha/issues/23
>https://github.com/google/google-api-javascript-client/issues/397

これによると、**12.0 (13606.2.11)**でバグの再現を確認していると言う事でした。
私の環境（現時点での最新版）は**12.1.2 (14607.3.9)**です。

つまり、Version 12.0から発生したバグは現在も残っています。
詳しく掘り下げていませんが、どうやらGoogleのreCAPTCHA絡みのバグのようです。
上掲のIssueにも書かれていますが、**(CSPを使用していなければ)無視しても構いません**。

最後に、Issueのコメントを引用して締めくくりたいと思います。

>This is extremely painful for users using Safari.
>(これは、Safariを使用しているユーザーにとって非常に苦痛です。)
>https://github.com/google/google-api-javascript-client/issues/397#issuecomment-471679235
rails s バックグラウンドで起動と停止


##バッググラウンドでサーバを起動する方法##

```
$ rails s -d
```

- オプションで`-d`を付けてあげよう！


```
=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options
```

- こんな感じになればOK!

##バッググラウンドで起動したサーバを停止する方法##

```
$ cat tmp/pids/server.pid
```
```

18248uchidanoMBP:Myapp uchida$ 
```
- `18248`切ってあげれば良い！

 ```
$ kill -9 18248
```

エラーがでなければOKだ！
【ExcelVBA】IIF関数は三項演算子の代わりに使えるか？

# はじめに

「VBAで三項演算子はどうやって書くんだろう？」と思って探していると、IIF関数というものを見つけました。
パッと見だと便利に使えるように感じましたが、IIF関数を実際に使ってみると不思議な動きをしていることが分かりました。

# IIF関数とは

* 引数`expr`の式の結果に応じて、`truepart`もしくは`falsepart`を返す関数です。
* 関数のインターフェースだけ見ると、三項演算子と同じ動きをしそうな気がしますが...

> IIf(expr, truepart, falsepart)

|引数|説明|
|---|---|
|expr|評価する式|
|truepart|exprがtrueの時に返す値、もしくはtrueの時に評価する式|
|falsepart|exprがfalseの時に返す値、もしくはfalseの時に評価する式|

# サンプルコード

## Rubyを使った三項演算子の例

* `txt.empty?`の結果がfalseなので、barメソッドが実行されます。
* 「条件式の結果がfalseなので、false時の式が評価される」という流れです。
 * これが三項演算子の「普通の処理の流れ」だと思います。

```rb:TernaryOperator.rb
def foo
  puts "foo"
end
​
def bar
  puts "bar"
end
​
txt = "abc"
txt.empty? ? foo : bar
```

```text:実行結果
bar
```

## IIF関数の例

* `txt = ""`の結果がfalseなので、Bar関数が実行されますが...
* 実際にはBar関数が呼ばれる前に、Foo関数が実行されています。
* **「条件式の結果がfalseの時は、true時の式が評価された後、false時の式が評価される」**という流れになっており、普通の三項演算子の処理の流れとは異なっています。
 * 最終的な結果（MsgBoxに表示される文言）は「bar」となります。

```vb:Module1
Option Explicit
​
Function Foo() As String
    Dim txt As String: txt = "foo"
    Debug.Print txt
    Foo = txt
End Function
​
Function Bar() As String
    Dim txt As String: txt = "bar"
    Debug.Print txt
    Bar = txt
End Function
​
Sub Main()
    Dim txt As String: txt = "abc"
    MsgBox IIf(txt = "", Foo(), Bar())
End Sub
```

```text:実行結果（イミディエイトウィンドウ）
foo
bar
```

# まとめ

* IIF関数は表面上は三項演算子っぽいですが、実際には異なる動きをするので注意が必要です。
 * 将来的にコードを引き継ぐ際のことなどを考慮すると、私は三項演算子の代わりとしてIIF関数を使わない方が良いと思います。
* [Microsoftの公式API](https://docs.microsoft.com/ja-jp/office/vba/language/reference/user-interface-help/iif-function)には以下のように注意喚起する解説が書かれており、どうやら「仕様通り」の動作のようです。
 * 仕様通りと言われても、何だかモヤっとした気持ちになります...

> IIf では、 truepart または falsepart のいずれか一方だけが返されますが、評価は両方の引数に対して行われます。 このため、予期しない結果が起きることがあります。
Vue.js と Anime.js で数値の合計をアニメーション

# はじめに
[公式ドキュメント](https://jp.vuejs.org/v2/guide/transitioning-state.html)で紹介されている TweenMax を使用した方法はライセンスの関係で使用できず
こちらの記事に辿り着いた。
https://qiita.com/y___k/items/22e135b8b8c57ed26fbe

数値A と数値B の合計に対してアニメーションを設定したかったが、ウォッチャ童貞で苦労したので
備忘として残します。

アニメーション処理、使用させていただきました。ありがとうございます。

# 結果

数値A と数値B への入力時にウォッチャへ登録された関数を実行させる為に keyup で updateSum メソッドを
実行させることで、表面上は実現できた。
（ベストプラクティスがあれば教えていただきたいです）

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div id="app">
        <form>
            <div class="form-group">
                <label>input1</label>
                <input type="text" class="form-control" v-model.number="input1" v-on:keyup="updateSum">
            </div>
            <div class="form-group">
                <label>input2</label>
                <input type="text" class="form-control" v-model.number="input2" v-on:keyup="updateSum">
            </div>
            <div class="form-group">
                <label>sum</label>
                <input type="text" class="form-control" v-model.number="sumForDisplay" disabled>
            </div>
        </form>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return this.initialState()
        },
        methods: {
            initialState: function () {
                return {
                    input1: 0,
                    input2: 0,
                    sum: 0,
                    sumForDisplay: 0
                }
            },
            updateSum: function () {
                this.sum = this.input1 + this.input2;
            },
            setCount(val) {
                const obj = {n: this.sumForDisplay};
                anime({
                    targets: obj,
                    n: val,
                    round: 1,
                    duration: 500,
                    easing: 'linear',
                    update: () => {
                        this.sumForDisplay = obj.n
                    }
                })
            }
        },
        watch: {
            sum (newSum, oldSum) {
                this.setCount(newSum);
            }
        }
    });
</script>
</body>
</html>
```
GitHub Package RegistryにDocker Imageを公開する

GitHub Package Registryに、Dockerイメージを作成する。
今回は[Jib](https://github.com/GoogleContainerTools/jib)でJavaアプリケーションのイメージを作成し、プッシュすることを目標にする。

[公式](https://help.github.com/en/articles/configuring-docker-for-use-with-github-package-registry)
[GitHub Package RegistryにGradleでJARを公開する](https://qiita.com/minebreaker/items/a6120485316a642c5607)


## Gradleの設定

```build.gradle
plugins {
    id 'com.google.cloud.tools.jib' version '1.5.1'
}

jib {
    to {
        image = "docker.pkg.github.com/minebreaker/abukuma/abukuma-example:0.0.0.2-EXPLORING_GITHUB_REGISTRY"
        auth {
            username = project.hasProperty("GITHUB_USER") ? GITHUB_USER : ''
            password = project.hasProperty("GITHUB_TOKEN") ? GITHUB_TOKEN : ''
        }
    }
}
```

注意すべきなのは、ユーザー名やリポジトリが大文字であっても、小文字に変換して記述しなければいけないこと。

早速`jib`タスクでビルド&公開。

```
* What went wrong:
Execution failed for task ':abukuma-example:jib'.
> com.google.cloud.tools.jib.plugins.common.BuildStepsExecutionException: Tried to check BLOB exists for docker.pkg.github.com/minebreaker/abukuma/abukuma-example with digest sha256:e8d8785a314f385d3675a017f4e2df1707c528c06e7a7989663fdab4900bd8ff but failed because: Did not receive Content-Length header | If this is a bug, please file an issue at https://github.com/GoogleContainerTools/jib/issues/new
```

これは怪しい。。。
Content-Lengthが見えないという事は大抵、リクエストに応答していない場合が多いように思う。


## ビルド

仕方がないので、`jibDockerBuild`でイメージだけを作成。

```
Built image to Docker daemon as docker.pkg.github.com/minebreaker/abukuma/abukuma-example:0.0.0.2-EXPLORING_GITHUB_REGISTRY
Executing tasks:
[==============================] 100.0% complete

> Task :abukuma-example:jibDockerBuild

BUILD SUCCESSFUL in 10s
```

ドキュメントに従えば、問題なくプッシュできた。

```
docker login docker.pkg.github.com -u minebreaker -p [[TOKEN]]
docker push docker.pkg.github.com/minebreaker/abukuma/abukuma-example:0.0.0.2-EXPLORING_GITHUB_REGISTRY
```

プル。

```
docker pull docker.pkg.github.com/minebreaker/abukuma/abukuma-example:0.0.0.2-exploring_github_registry
```

## まとめ

Jibで完結させたいが...。
Nuxtでgenerateした時にアスキーアートを埋め込みたい

## やったこと

Nuxt.jsでレンダリング時とジェネレート時に`doctype`の下にHTMLを埋め込む。

## Hooksを使う

nuxt.config.jsにhooksという機能があるのでそれを使った。

https://ja.nuxtjs.org/api/configuration-hooks/

```src/plugins/createAsciiArt.js
module.exports = (html) => { 
   const asciiArt = '''アスキーアートを書く'''
   // replaceでdoctype htmlの下に挿入する
   html = html.replace(
     /<!doctype html>/,
     `<!doctype html>\n<!--\n${asciiArt}-->`
   )

   return html
 }
```

```nuxt.config.js
import createAsciiArt.js

export default {
  ...
  hooks: {
    'generate:page': (page) => {
        page.html = createAsciiArt(page.html)
    }
    'render:route': (url, page, { req, res }) => {
        page.html = createAsciiArt(page.html)
    } 
  }
}
```

これだけで簡単にアスキーアートをページに埋め込むことができます！
hooksの機能を使えば他にも色々と応用できそうですね！
スパコンで開発するときに知っておいたほうがよいツール

昔に大学でスパコンを使って研究していたときに、「教えてもらえなかったけど知っておくと便利だったツール」をリストアップしておく。

# ターゲット
* スパコンなどの共有SSHサーバを使って研究する学生
* 主に非情報系（スタッフ陣にあまり最新技術を教えてもらえなさそうな学生）

# 言語
多分fortranやCでMPIのコードを書くことになると思うが、それ以外に知っておくと便利なもの。

## Python
非常に多用途な言語。自分は研究では主にグラフ描画に使っていた。アカデミア用途だと、gnuplotの代わりになるもの。

* 特にnumpy、matplotlib。
* gnuplotより機能がはるかによい。gnuplotは前処理を別の手段でやらないといけないが、Pythonはワンストップでできる。
* ほんまになんでもできるので、他のことがやりたくなってもつぶしが効く。ディープラーニング、webサーバ、etc

## bash
* CUIで操作するときはまずこれなので。
* シェルスクリプトをちゃちゃっと書けると便利。
* プログラムを回すときに```./restart.sh```って唱えてる人、エディタで開いてみましょう。

# 開発環境
## Emacs
* 宗教戦争の火種になりがちなので、他宗教の人は改宗する必要はないです。
* ```emacs -nw```でコマンドラインで使える。
* lispエイリアンになるほど使い込む必要はないけど、```C-x C-s```とか```M-;```（コメントアウト）とかは知っておきたい。

## VSCode
なんでもできるエディタ

* WinSCPでもデフォルトで開くエディタを指定することができる。
* それどころかVSCode自身がリモートのソースを編集するプラグインを持っていたはず（使ったことはない）

## Git
バージョン管理ソフト

* 大規模コードでディレクトリを切って管理するのは著しく非効率的であることに気づこう。
* 企業で開発するなら必須。
* テキストファイルなら何でも扱えるので、論文のバージョン管理にも最適。

## markdown
テキストの記法

* 文法はわざわざ覚えるもんですらない
* pandocでpdfやhtmlに変換できる
* readmeなどちょっとしたテキストに便利。
Rails+Ransack redirect時の検索クエリを引き継ぐ方法

この記事では、redirect時に前のページの検索クエリを引き継いで、同じ検索結果を表示する方法について書きます。

######アプリの構造
細かく書きませんが、scaffoldで生成されるような
index=>edit=>update=>indexのフローとします。
ここで、update=>indexのredirect時に最初のindexの検索結果を保持してくれたら嬉しいなと考えました。


```Ruby:sample_controller.rb
def index
 (データの一覧表示、データの検索機能)
end

def edit
 (データの編集）
end

def update
　(データを更新してindexにredirect)
end
```

#######解決策

```Ruby:sample_controller.rb

def index
・・・
end

def edit
・・・
 　@@request_referer = request.referer
・・・
end

def update
・・・
respond_to do |format|
if @sample.update(sample_params)
  format.html { redirect_to @@request_referer, notice: '更新が完了しました。' }
else
  format.html { redirect_to @@request_referer, notice: '更新が失敗しました。' }
end
・・・
end
```

request.refererは、前画面のURLを呼び出すメソッドです。
editで前画面のindexのURL(検索クエリを含む)をグローバル変数@@request_refererとして格納します。
updateは、成功しても失敗しても@@request_refererにredirectさせます。
updateに失敗した後に、もう一度edit画面に遷移すると、グローバル変数が上書きされてしまいますのでご注意下さい。
Windows7 で GitLab から git clone したときに remote: HTTP Basic: Access denied が発生する

# 前略
GitLab から git clone したときに remote: HTTP Basic: Access denied が発生し、git cloneできませんでした。

```bash
> git clone https://gitlab.xxxxxxxxxxxxxx.jp/yyyyyyy/zzzzzzz.git
Cloning into 'zzzzzzzzz'...
remote: HTTP Basic: Access denied
fatal: Authentication failed for 'https://gitlab.xxxxxxxxxxxxxx.jp/yyyyyyy/zzzzzzz.git'
```

Windowsの資格情報マネージャーがgitの認証情報を記憶しているためにエラーが発生したようです。

## 手順

Windowsスタートメニューから「プログラムとファイルの検索」で「資格情報マネージャー」で検索。
汎用資格情報に`git:`から始まる資格情報があるので、「資格情報コンテナーから削除」をクリックして削除する。

もう一度`git clone`すれば通ります。

## 草々
同件：<https://www.backyrd.net/entry/20190110/1547101414>
ローカルのsqlite3から、herokuのpostgresqlにデータ移行（Amazon S3とか使わず）

# 何の記事ですか
色んな意味で初心者の私がflask + sqlite3でwebアプリ作りたい！ってやってたら、
<b>「えっ、herokuってsqlite使えないんですか・・・」</b>と絶望したので、
sqliteからherokuのpostgresqlにデータを移行する手順を書いてみる。

既存でいっぱいあるけど、初心者には難しかったです。はい。
このやり方なら、たぶん誰でもできる。はず。

# sqliteからCSVに書き出す
sqlite3で作成したhoge.dbを、hoge.csvに出力。

```python:create_csv.py
import sqlite3
import pandas as pd

db = sqlite3.connect("hoge.db") 　#「hoge」を変更 
df = pd.read_sql_query("SELECT*FROM table", db)　#「table」を変更 
db.close()
df.to_csv("hoge.csv", index=None)
```

# herokuで空のappとpostgresqlを作る。
空のapp作る　→　postgresql作るの順。
こちらの記事を参考にさせていただきました。

●Heroku初心者がHello, Herokuをしてみる
https://qiita.com/Arashi/items/b2f2e01259238235e187
●いちばん簡単にPostgreSQLを使う ～HerokuPosgresに繋いでみよう
https://qiita.com/rzl5/items/09f61d308080bf801a8b


# herokuで空のテーブルを作る
herokuのpostgresql側で空のテーブルを作る。
コマンドラインとか使っちゃう。コマンドラインって「ぽい」ですよね。ふふふ。

```
heroku pg:psql -a [APP NAME]
[APP NAME]::DATABASE=> create [TABLE NAME] 
[APP NAME]::DATABASE-> (
[APP NAME]::DATABASE(> [COLMUN_NAME1] text,
[APP NAME]::DATABASE(> [COLMUN_NAME2] text,
[APP NAME]::DATABASE(> );
```
# CSVを読み込む
こちらもコマンドラインで。「\copy」はメタコマンドというらしいです。

```
[APP NAME]::DATABASE=> \copy [TABLE NAME] from 'hoge.csv' CSV header;
```
# できた！
ということで、この記事を書きながら、
<b>「『コマンドライン』って使い方あってるかな・・・」</b>
と調べるレベルの私でも、ローカルのsqlite3から、herokuのpostgresqlにデータ移行ができました。

herokuの公式ドキュメントだと、dumpファイルを作って、HTTPからアクセスできるところ（Amazon S3とかレンタルサーバーとか？）に置いたらできるよ、みたいな感じだったけど、Amazon S3に登録するのに若干の躊躇があり（たぶんまだ使いこなせない）、別のやり方を調べていたら2日くらいかけてしまった。

heroku schedulerとかで定期的にスクレイピングかけて、db保存したやつをなんやかんやするwebアプリを作りたいなぁ。
Rails Ransackで絞り込んだ後の合計値があわない

この記事では、RailsのGemのRansackを使ってデータの絞り込みを行った後、コラムの合計値を計算したら結果があわなくて困った話を書きます。

```ruby:sample_controller.rb
sample = Sample.all
@q = sample.ransack(params[:q])
@sample = @q.result(distinct: true)

@total_a = @sample.sum(:a)
@total_b = @sample.sum(:b)
@total_c = @sample.sum(:c)
```

のようにcontrollerを書いて、viewで適当なテーブルに出力すると、
下のテーブルのようになります。

id|a  |b  |c  |
---|---|---|---|
1|100  |100  |100  |
2|100  |100  |100  |
3|100  |100  |100  |
合計|100  |100  |100  |

(distinct: true)としたので、重複データを同じものとみなしています。
コラムaは100のデータが1つだから、合計は100という風に処理されてしまいます。

```ruby:sample_controller.rb
@sample = @q.result(distinct: false)
```

とすれば、重複データを別々のデータとして識別してくれます。
コラムaは100のデータと100のデータと100のデータがあるから、合計300と正しく処理してくれます。

id|a  |b  |c  |
---|---|---|---|
1|100  |100  |100  |
2|100  |100  |100  |
3|100  |100  |100  |
合計|300  |300  |300  |
HTML,PHPを使った簡単なゲーム感想投稿サイト　コード

他の学習と平行に進めていたのが遂に完成。初めてのポートフォリオ。これをもう少し改良して自分のホームページに載せたい。

```
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content ="text/html"  charset="utf-8"/>
  <title>ゲーム作品感想フォーム</title>
</head>

<body>
  <h2>好きなゲーム作品感想投稿サイト</h2>
  <form action ="formTest1.php" method ="post">


  ハンドルネーム:<br />
  <input type ="text" name ="name" size ="30" value=""/><br />

  メールアドレス:<br />
  <input type ="text" name ="mail" size ="40" value=""/><br />

  性別:<br />
  <input type ="radio" name ="sex" size="20" value="男性"/>男性<br />
  <input type ="radio" name ="sex" size="20" value="女性"/>女性<br />


 ハード:<br />

 <select name ="checkbox" row ="40">

   <option value ="ps4">PS4</option>
   <option value ="ps3">PS3</option>
   <option value ="switch">switch</option>
   <option value ="vita">Vita</option>
   <option value ="3ds">3ds</option>
   <option value ="その他">その他</option>

 </select> <br />

作品名:<br />
<input type ="text" name ="title" value=""><br />

ゲームの感想:<br />
<textarea  type = "text" name ="review" value =""/></textarea><br />

<input type ="submit" value="送信"/>
```


続いてPHPでの処理

```

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content ="text/html"  charset="utf-8"/>
  <title>ゲーム作品感想フォーム</title>
</head>

<body>
  <h2>好きなゲーム作品感想投稿サイト</h2>
  <form action ="formTest2.php" method ="post">


<table border ='1'>
  <tr>
    <td>名前</td>
 <td><?php echo $_POST['name'] ?></td>
</tr>
<tr>
  <td>メールアドレス</td>
 <td><?php echo $_POST['mail']?></td>
</tr>
<tr>
  <td>性別</td>
 <td><?php echo $_POST['sex']?></td>
</tr>
<tr>
  <td>ハード</td>
  <td><?php echo $_POST['checkbox']?></td>
</tr>
<tr>
  <td>作品名</td>
 <td><?php echo $_POST['title']?></td>
</tr>
<tr>
  <td>ゲームの感想</td>
 <td><?php echo $_POST['review']?></td>
</tr>
</table>

<input type ="submit" value ="送信">
</form>
</body>
</html>
```

表示結果

![Screenshot_2019-09-13 ゲーム作品感想フォーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440408/63a4baab-7c6b-315d-22b9-a32c2a17708d.png)
LINE Bot「コンパスパンダ(ver0.1)」

# はじめに
[とあるLINE Bot](https://github.com/ufoo68/compassPanda)をアップデートしたので、そのことについて書きます。Botの機能の説明についてはGitHubのREADMEを見てください。

---

# ソフトウェア構造
以下のような構造でBotを実装をした。
![コンパスパンダの構造１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/4ba27734-38e2-defb-f331-7a8eda832288.jpeg)

---
1. Messaging Server(LINE Bot用のサーバー)はユーザーとの会話のみを実装
2. コンパス・地図表示・書き込みの各機能をLIFFで実装してリッチメニューの中にURLを格納
3. 位置情報と書き込み情報は別で立てたREST APIで保存・取り出しを実行

各機能を独立させることで機能の拡張が用意になった

---

# 位置情報とつぶやきの同時取得

---


## 今まで
トーク画面上に一旦発行したタイムスタンプをフォームにコピペしてもらう仕様

<img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F209689%2Ff529ff06-2287-9d0b-9b50-696b7deafa0d.jpeg?ixlib=rb-1.2.2&auto=compress%2Cformat&fit=max&s=9b3430614b6013224e56d55e88ed2dd2" width=70%>

---

## 今回
テキストデータ（Tweet）送信時にWEB API（[Geolocation API](http://www.htmq.com/geolocation/)）を使って位置情報（Location）を取得
![つぶやき.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/70610f7a-f4a3-5d8f-25c0-789bb9f0eec3.jpeg)

---

# 他に追加した機能

---

## コンパス
[DeviceOrientation](https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation)を使ってデバイスの方向を検知

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/e9b998b3-706b-241d-8c12-1b15ac5705f5.gif" width=50%>


---

## QRコードシェア機能
その場でLINE BotをオススメするためにQRコードをすぐに表示する機能を追加。

---

# これからやりたいこと

---

## LINE Thingsとの連携
[歩数計](https://qiita.com/ufoo68/items/5009a2d87843430ed545)と組み合わせたサービス

- ある歩数以上を歩くとBotが褒めてくれる
- 目標の歩数設定
- 歩いた軌跡を地図へプロット

など

---

## つぶやきの感情判定
コンパスパンダ用のREST APIを拡張してつぶやき内容からネガポジ判定をする

- 自然言語処理的なことをしてみる
- つぶやき内容に応じて地図マーカーが変わる

など

---

# さいごに
- 各単機能をLIFFで実装して、リッチメニューで管理するとシステムが疎結合になるので拡張しやすい
- LIFFのブラウザでもそこそこWEB APIが使える
- LINEを使うとメインのUIを実装する必要がない
- QRコードを表示する機能を入れておくと、その場で誰かにBotをすぐにオススメできて使ってもらうことができる
GitHub Package RegistryにGradleでJARを公開する

# GitHub Package Registry

GitHubのアーティファクト公開サービスPackage Registryのベータにようやくサインアップできたので、MavenリポジトリからJARの公開を試みる。
実験に使ったリポジトリは[こちら](https://github.com/minebreaker/Abukuma)。
[公式](https://help.github.com/en/articles/configuring-apache-maven-for-use-with-github-package-registry)

## トークンの作成

Packageの権限はリポジトリとは別になっているので、既存のトークンがある人でも再発行/設定しなおしが必要になると思われる。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231669/dd9e47c5-4f25-d991-a8ff-93c1308c6273.png)

今回は`gradle.properties`に、ユーザー名とトークンを設定しておく。この辺は環境変数などお好みで。

```gradle.properties
GITHUB_USER = minebreaker
GITHUB_TOKEN = [[token]]
```


## `build.gradle`

普通のMaven Publishプラグインを使用。

```
plugins {
    id 'maven-publish'
}

publishing {
    repositories {
        maven {
            name = "github"
            url = 'https://maven.pkg.github.com/minebreaker/Abukuma'
            credentials {
                username = project.hasProperty("GITHUB_USER") ? GITHUB_USER : ''
                password = project.hasProperty("GITHUB_TOKEN") ? GITHUB_TOKEN : ''
            }
        }
    }

    publications {
        maven(MavenPublication) {
            version '0.0.0.1-EXPLORING_GITHUB_REGISTRY'  // バージョンを指定したい場合

            pom {
                url = 'https://github.com/minebreaker/Abukuma'
                licenses {
                    license {
                        name = 'MIT'
                    }
                }
            }

            from components.java
            artifact sourcesJar
            artifact javadocJar
        }
    }
}
```

`repositories {}`で、GitHubをパッケージの公開先に指定。`pom`は適当に。ここでURLのminebreakerとAbukumaを、各自のユーザー名とリポジトリに置き換えること。

グループ、アーティファクト、バージョンは、デフォルトではプロジェクトの設定からそのまま利用される。上記ではversionを、実験用であることを明示するため変えてある(基本的に削除はできないので注意)。


### アップロード

`publishMavenPublicationToGithubRepository`タスクを実行する。上記のリポジトリ設定の`name = github`から自動でタスクを設定してくれる模様。

これで実行すると、残念なことにタスクは中途半端に失敗し、クラスファイルのJARだけ公開され、Javadocとソースはアップロードに失敗した。設定が悪いのか、Gradleを使っているのが悪いのか、GitHubが悪いのかは不明。知見求む。


## ライブラリーを使う

公式ではURLが`https://maven.pkg.github.com/OWNER`となっていたが、**リポジトリ名を含めないと失敗した**。仕様なのかバグなのかドキュメントのミスなのかは不明。
また、レジストリをパブリックにする設定が見つからず、ダウンロードにも認証情報を与えなければならない(ソースはパブリックなのに...)。
したがって設定は以下のようになる。

```
repositories {
    maven {
        url = 'https://maven.pkg.github.com/minebreaker/Abukuma'
        credentials {
            username = project.hasProperty("GITHUB_USER") ? GITHUB_USER : ''
            password = project.hasProperty("GITHUB_TOKEN") ? GITHUB_TOKEN : ''
        }
    }
}

dependencies {
    implementation 'rip.deadcode.abukuma3:abukuma-jetty:0.0.0.2-EXPLORING_GITHUB_REGISTRY'
}
```


## まとめ

まだベータ版という印象(ベータ版だけど)。
次回はDockerを試したい。 -> [GitHub Package RegistryにDocker Imageを公開する](https://qiita.com/minebreaker/items/0a031e201829e68e4f21)
Let's Encrypt + Rails + Debian + PassengerでHTTPS有効化

この記事ではLet's Encryptを利用してRailsアプリのWEBサーバにHTTPS接続する手順についてまとめます。

######前提
・Debian + Passenger + Rails でHTTP通信ができている。
・ドメインを取得し、DNSできている。

######VMインスタンスのHTTPSトラフィックを許可する。
GCPのVMインスタンス画面で、HTTPSトラフィックを許可するにチェックを入れる。（説明省略）

######backportsの設定

```Bash:/etc/apt/sources.list
deb http://ftp.debian.org/debian stretch-backports main
```

アップデート

```Bash:ターミナル
sudo apt -y update
```

######certbotのinstall

```Bash:ターミナル
sudo apt -y -t stretch-backports install certbot
```

######apache2の停止

```Bash:ターミナル
sudo apache2ctl stop
```

######鍵の生成(example.comはドメイン名)

```Bash:ターミナル
sudo certbot certonly --standalone -d example.com
```

```Bash:installメッセージ
IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/example.com/privkey.pem
   Your cert will expire on yyyy-mm-dd. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:
   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le
```

######default-ssl.confの編集(example.comはドメイン名、userはユーザー名)
installメッセージを参照してそれぞれの鍵のパスを設定する。

```Bash:/etc/apache2/sites-available/default-ssl.conf
<IfModule mod_ssl.c>
        <VirtualHost _default_:443>
                ServerAdmin webmaster@localhost
                DocumentRoot /home/user/example-app/public/
                RailsEnv development
                <Directory /home/user/example-app/public/>
                Options Indexes FollowSymLinks
                AllowOverride All
                Require all granted
                </Directory>
                
                ErrorLog ${APACHE_LOG_DIR}/error.log
                CustomLog ${APACHE_LOG_DIR}/access.log combined
                SSLEngine on
                SSLCertificateFile "/etc/letsencrypt/live/example.com/cert.pem"
                SSLCertificateKeyFile "/etc/letsencrypt/live/example.com/privkey.pem"
                SSLCertificateChainFile "/etc/letsencrypt/live/example.com/fullchain.pem"
                
                <FilesMatch "\.(cgi|shtml|phtml|php)$">
                                SSLOptions +StdEnvVars
                </FilesMatch>
                <Directory /usr/lib/cgi-bin>
                                SSLOptions +StdEnvVars
                </Directory>
                
        </VirtualHost>
</IfModule>
```

######設定の有効化とapache2の再起動

```Bash:ターミナル
sudo a2ensite default-ssl
sudo a2enmod ssl
sudo a2enmod passenger
sudo /etc/init.d/apache2 restart
```

再起動後、https通信が可能になったことを確認する。

######参考

・https://qiita.com/Yuya_Nishizaki/items/4a2413fc2c07aca5d193
・https://qiita.com/shikibum/items/ed0179fd1108c71a5b5c
PHP入門　try、throw、catch(例外処理) まとめ

①例外処理とは..何らかのプログラムを書いて、予期しない処理するが発生したときに適切な処理を行う方法

②例外処理のする理由
  1..意図的に例外処理を発生させて、自分なりの処理を行うときに必須。
　2..例外が発生して適切な処理を行わないと、プログラムがそこで異常終了してしまう。それを防ぐために、例外に応じた処理を行う為。

③必須知識
・tryは例外を発生させたい処理を書く。
・throwはtryで処理を書いた例外を投げる。
・Exceptionクラスは日本語で例外。
・catchはthrowで投げた処理を捕捉するのに用いる。
・例外が発生することを別名、例外が投げられると言う



例

```
<?php

function div($a, $b) {
  echo $a / $b;
 }


div(7,2);
div(5,0);
 ?>
```

この出力結果の場合、5を0で割るとログで0で割ってはいけないというWarningが出る。

```
<?php

function div($a, $b){
   try {      
     if($b === 0){
       throw new Exception("3.50で割り切れませんよ!");  
     }
    echo $a / $b;
 
 } catch(Exception $e){
    echo $e->getMessage();
 }
}

div(7,2);
div(5,0);
 ?>
```
例外発生させたい場所をtryブロックで囲む。Warningが発生しない様にif条件分岐を書く。ここではbが0の場合の例外処置を書いて、throwという命令形を使って例外メッセージを投げる。

例外メッセージをcatchで取得して、getMassageメソッドで"0で割り切れませんよ!"の文字列を表示させる。

表示結果

```
3.50で割り切れませんよ!
```

感想
例外処理って応用っぽくて初心者の自分ではまだ扱えなさそう。取り敢えずは異常終了を避けるためにtry,catchがあることを覚えておけば今回の学習に意味はあったかな。
Cloud Storage Transfer Service (S3 to GCS) をweb Consoleで挙動確認してみる

S3 to GCS をするには、S3 -> ローカル -> GCS の方法と、
Cloud Storage Transfer Serviceを利用する方法があるみたいです。[^over] [^pionner]
Cloud Storage Transfer Serviceはローカルを介さずなので、実行環境の整備の手間が少なそうなことや速度的なメリットがありそうなので使ってみました。

# コスト
https://cloud.google.com/storage-transfer/pricing
驚く様な費用請求がされることは無さそう :ok_hand: 

# 権限の設定
- roles/storagetransfer.user を与えれば、コンソールが活性化され、後の工程でジョブの設定が可能です。 [^role]
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/5dccd011-c8d8-d998-2f23-03d6385e7467.png)


ソース (転送元)とシンク(転送先)を設定して使用するには[追加のアクセス許可](https://cloud.google.com/storage-transfer/docs/iam-transfer#source-permissions)が必要です。
詳しいことは[データソースとデータシンクへのアクセスの構成](https://cloud.google.com/storage-transfer/docs/configure-access)を読む。[^issue]

# 転送設定とジョブの実行
- ソースの選択
    - S3を選択する
    - ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/d926dece-c5c7-5a30-907e-3ac63eaaa8e5.png)

    - ソースに関しては転送パスを指定できる [^select]
        - `input/20190906`を指定すると、S3の`input/20190906`のフォルダを転送できる
        - 何も指定しないとバケット内の全てが転送される
- 転送先の選択
    - GCSのバケットを選択する
         - パスは指定できないようだ...:angel:
         - ![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/a7a6fabf-aaab-1ea6-3750-bbe7fe3d9610.png)
- 転送の設定
    - 1回切りのジョブなのか、定期ジョブなのかを選択して`作成`を押下
    - ![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/25d4ddd6-1cea-2978-3754-c87183e45ac1.png)
- 転送ジョブの確認
     - 転送の設定時に入力した`説明`の名称でジョブが作成し、実行される
     - <img width="1136" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/5aa1d247-c69d-3140-b1f0-2bf9e8951e45.png">

     - ジョブをクリックするとジョブの設定を確認することができる
         - ![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/d3789c6b-5e85-4d7d-ecc4-dffb05157586.png)

- 転送結果
     - 転送先のバケットに`input/20190906`のパスで転送される
     - ![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/5f22ee50-051f-f826-dafb-a24b312c48af.png)


# 所感
- 再マッピングはサポートされていない[^remap]のが何とも使いづらい :innocent: 
- web Consoleから操作できるので、エンジニア以外でも簡単に設定できそうなところが良い :+1: 
- 1回切りのジョブの場合、すぐに転送が始まるため小さなファイルの転送でも問題無さそう:+1: 
- 転送データが大きな際はS3 -> ローカル -> GCSより早そう(未検証) :+1: 

# gsutil と Storage Transfer Service のどちらを使うべきか

公式に記載がありました [^official]


[^over]: https://cloud.google.com/storage-transfer/docs/overview
[^role]: https://cloud.google.com/storage-transfer/docs/access-control
[^pionner]: https://qiita.com/bya/items/422fa3c2a74138fd750b
[^issue]: よくわからないけれど、web consoleからjobを動かした限りだとサービスアカウントを作成しなくても動いた :thinking: 
[^select]: https://cloud.google.com/storage-transfer/docs/create-manage-transfer-console#select
[^remap]: https://cloud.google.com/storage-transfer/docs/create-manage-transfer-console#select
[^official]: https://cloud.google.com/storage-transfer/docs/overview#should_you_use_gsutil_or
Ethereumで秘密鍵を取得する方法

# はじめに
署名付きのトランザクションを作成するのに少しハマってしまったのでメモとして残します。

署名付きトランザクションを送信するために秘密鍵を使用し署名します。
署名の方法は色々と纏められている記事を目にしましたが、秘密鍵の取得方法まで纏められている記事を目にしなかったので残しておきます。

# 環境
- geth:1.8.27
- go:1.12.7
- web3:1.2.1
- ethereumjs-tx:1.3.7
- keythereum:1.0.4

# 実装
## 1.ライブラリの読み込み 

``` sample.js
// Transactionの生成に使用する
const EthereumTx = require('ethereumjs-tx');
// Ethereumとの接続、トランザクションの送信に使用する
const Web3 = require('web3');
// 秘密鍵の取得に使用する
const keythereum = require("keythereum");
```

## 2.秘密鍵の取得

``` sample.js
// 第一引数：ユーザーアカウントのアドレス
// 第二引数：key-storeディレクトリのパス
var keyObject = keythereum.importFromFile("address","key-storeへのパス")

// 第一引数：↑で指定したユーザーアカウントのパスワード　第二引数：↑で作成したkeyObject
var privateKey = keythereum.recover('password', keyObject)
```

**keythereum.importFromFile**
第一引数には署名するユーザーアカウントのアドレスを設定すればよいです。
第二引数はアカウントを作成すると「UTC・・・」という名前のファイルが「key-store」ディレクトリに作成されます。
この「key-store」の上位ディレクトリを設定します。

/ethereum/data/key-store であれば /ethereum/data　を設定します。

## 3.トランザクションの生成

``` sample.js
// 送信するトランザクションの内容
// sendTransactionと違い、TOのみの指定、Fromは署名したアカウントになる
const txData = {
  nonce: '0x0100',
  gasLimit:'0x20000000',
  gas:'0x200000',
  gasPrice: '0x10',
  to: '0x9ee8bde2484bfa8c63fbd25e6059db0fd230a164', 
  value: '0x86f26fc10000',  // 0.01
  data: null,
  chainId: '任意のchainId'
}

// Transactionを作成する
const tx = new EthereumTx(txData);
```

# 4.トランザクションに署名する

``` sample.js
// Transactionに署名する
Buffer.from(privateKey.toString('hex'), 'hex');
tx.sign(privateKey);

const serializedTx = tx.serialize();
const signedTx = '0x' + serializedTx.toString('hex');

console.log(signedTx);
```

``` 実行結果
0xf86a8201001083200000949ee8bde2484bfa8c63fbd25e6059db0fd230a1648686f26fc100008082aae8a023ae5379f1348492f2ba60644d4625147840ee410fc697c9f3821758ca5f5262a07439bcddebd87f688b9cd1dbb763db60d0264fa320e75d24dc4eabf1cc2ea6d2
```
# 5.トランザクションの送信

``` sample.js
const web3 = new Web3(Web3.givenProvider || 'ws://127.0.0.1:16458');
web3.eth.sendSignedTransaction(signedTx).on('transactionHash', function(hash){
   console.log(hash);
 })
```

``` 実行結果
0x756a43dc189da57e7e2d26eb491cff7fe09b7c32432b83e5ac9b2474d4aa536f
```

# 最後に
基本的なことなのかもしれませんが、調べるのにかなり時間がかかってしまいました。
英語の公式ドキュメントを読むのがしんどくて日本語の記事に逃げてしまいがちですが、頑張って公式ドキュメントを読むのが一番の近道ですね。
【Swift】Debug時のみ、ログ出力を行うprint,dump

## Debug時のみ、ログ出力を行うprint,dump

```Swift:
    static func dump<T>(_ value: T, name: String? = nil, indent: Int = 0, maxDepth: Int = Int.max, maxItems: Int = Int.max) {
        #if DEBUG
        Swift.dump(value, name: name, indent: indent, maxDepth: maxDepth, maxItems: maxItems)
        #endif
    }
    
    static func print(_ items: Any...) {
        #if DEBUG
        Swift.print(items)
        #endif
    }
```

## Build Settings > Other Swift Flags に　「-D DEBUG」を忘れずに！

![Screen Shot 2019-09-13 at 10.15.17 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/677c79a2-cf37-1bb1-02c9-f7382ce5f112.png)
AWS Cloud9 で Vue.js を使う

## 1. Environmentを作成

いつも通り、AWS Cloud9上で`Create environment`をクリックして作成する

## 2. node.jsをインストール

Vue.js では node.js が必要になるが、AWS Cloud9 では既にインストールされている。以下のコマンドで確認。

```
node --version
```

## 3. Vue CLIをインストール


```
npm install -g @vue/cli
npm install -g @vue/cli-service-global
```

## 4. プロジェクトを作成

```
vue create <project_name>
```

## 5. 設定ファイルを追加

プロジェクト直下に、下記のファイルを作成する。

```js:vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}
```

これをしておかないと、`npm run serve` しても `invalid hedder error` が出て動かせない。

## 6. プロジェクトを実行

```
cd <project_name>
npm run serve
```

あとは、AWS Cloud9 上で「Preview」をクリックすれば表示される。
生産現場で役に立つかもしれない最適化手法2【GLPK】(工数の平準化)

[<--目次へ](https://qiita.com/ki073/items/508b3c20eb03078703dd)
## はじめに
工数の平準化についてGLPKを用いたプログラムを作ってみました。GLPKのインストールや使い方は上の目次リンクからたどってください。

まずは非常に単純化した例です。
## 最適化の条件1
* 製品ごとに必要な工数が与えられており、日ごとの最大総工数以内になるように生産計画を立てたい。
* 各製品の生産は1日で終了する。
* 製品の製造できる期間は決まっているが、生産する順は任意


## プログラム1
GLPKで動くプログラムです。
data;
より後の変更で多くの条件に対応できるようになっています。

```GLPK:manufacuring21.mod
# version 0.1
set WorkingDay; # 工場稼働日付を読み込む
set ProductName; # 製品名を読み込む
param manHourByProduct{ProductName}; # 製品を作るために必要な工数
set ManufacturablePeriod  dimen 2; # 生産可能日を読み込む
param manHourByDay{WorkingDay} default 100; # 1日の標準的な工数上限

var assign{ManufacturablePeriod} binary; # 生産日を割り当てるための変数
# 各製品の生産は1日だけ
s.t. product1{p in ProductName}: sum{(d,p) in ManufacturablePeriod}assign[d,p]==1;
# 1日の総工数を超えない
s.t. limitWorkerHour{d in WorkingDay}: sum{(d,p) in ManufacturablePeriod}assign[d,p]*manHourByProduct[p]<=manHourByDay[d];

solve;

# 結果を出力
for{d in WorkingDay}{
    printf "%s   総工数 %10.2f\n", d, sum{(d,p) in ManufacturablePeriod}assign[d,p]*manHourByProduct[p];
    printf "  製品名　工数\n";
    printf{(d,p) in ManufacturablePeriod: assign[d,p]==1} "  %s   %d\n", p, manHourByProduct[p];
}

data;
# 工場稼働日付
set WorkingDay := 1 2 4;
# 製品名と製造に必要な工数
param : ProductName : manHourByProduct:=
"製品1"  100
"製品2"   50
"製品3"   20
"製品4"   80
"製品5"   40
;
# 製品名と生産可能日
set ManufacturablePeriod :=
(*, "製品1") 1 2  # 製品1を1 2 日に限定
(*, "製品2") 2 4
(*, "製品3") 1 2
(*, "製品4") 2 4
(*, "製品5") 1 2 4
;
# 1日の工数上限を特別に変えたい場合
param manHourByDay[2] := 110;
end;
```

MathProgはかなり癖のある言語ですが、慣れると結構便利なのです。
簡単に補足しておきます。
data;
より上がプログラムの領域で、下がデータを書く領域です。それぞれ書き方が違いますので注意してください。
デバッグをするには、
display ManufacturablePeriod;
のようなdispaly文を追加することで、中身を表示することができます。
(ただし、varで宣言している変数はsolveの後でないと表示されません)

ManufacturablePeriodには製品ごとの生産が可能な日付が読み込まれています。

var assign{ManufacturablePeriod} binary; 
バイナリ(0か1)が入る変数を宣言しています。生産を割り当てる場合は1,割り当てない時は0になります。
{}の中は添え字の集合を示しますが、ManufacturablePeriodが二次元ですので、C言語などの二次元配列変数に相当します。C言語などでは3日で製品が5つありますので、要素数は3x5=15個になりますが、ここではManufacturablePeriodで宣言した11個しかありません。添え字(4, "製品1")の要素は存在しません。

s.t. product1{p in ProductName}: sum{(d,p) in ManufacturablePeriod}assign[d,p]==1;
制約条件(s.t.)です。二重のループに相当します。{p in ProductName}が外側のループで、pに"製品1","製品2"...と順に値がpに入ります。
{(d,p) in ManufacturablePeriod}が内側のループで、ここのpは外側のp値で拘束されます。
p=="製品1"の時には、ManufacturablePeriodには(1,"製品1"),(2,"製品1")しかありませんので、内側のループはd=1と2だけ繰り返されassign[d,p]の合計が計算されます。assign[1,"製品1"]+assign[2,"製品1"]の合計が1になるようにassignに値が設定されます。
p=="製品2"....も同様です。

printf{(d,p) in ManufacturablePeriod: assign[d,p]==1}....
{}内の条件が満たされた時だけに印刷されます。: assign[d,p]==1はこの条件が満たされた時、すすなわちassignの要素が1(生産を割り当てる)時だけ印刷されます。


上のプログラムに条件を追加することで、複数の日に渡って生産したり、ロット分割など簡単(?)に機能を追加できますので、徐々に公開していきたいと思います。

質問、要望などがありましたらコメントしてください。



あまり良い例とは言えないように思いますが、以前作った関連したプログラムをリンクしておきます。
かなりのことができるはずですが、だいぶ前に作ったもので、思い出せない部分もあります。今後整理して公開していきたいと思います。

[GLPKプログラムA](http://pastebin.com/FnG8sQfy)
複数のロットに分割して、生産日を分けることができる。

[GLPKプログラムB](http://pastebin.com/3mq3cQgv)
結構複雑なことができることをだけは感じられると思います。(汗)
Git コマンド 備忘録

# Git コマンド 備忘録

自分で覚えておきたいGitコマンドを溜めておきます。
※随時更新予定

## リモートリポジトリ
ブランチを指定してクローンする

```
git clone -b {ブランチ名}　{リポジトリURL}
```

## コミットのログの確認
変更したファイルを確認

```
git log --name-status
```

ログを1行に省略して表示

```
git log --oneline
```
ファイルの変更箇所を具体的に確認

```
git log -p
```
どのファイルが何ヶ所変わったか確認

```
git log --stat
```



## ファイルの差分を確認

ステージングする前に差分確認

```
git diff
```

ステージングする前に特定のファイルの差分確認

```
git diff　-- {ファイルのパス}
```

ステージングした後に差分確認

```
git diff --cached
```

リモートブランチとの差分を確認

```
git diff remotes/origin/{ブランチ名}
```

特定のファイルの差分を確認

```
git diff remotes/origin/{ブランチ名} -- {ファイルのパス}
```

ファイルAとファイルBの差分を確認

```
git diff --　{ファイルAのパス}　{ファイルBのパス}
```

## インデックスの管理

カレントディレクトリの追跡対象外ファイルを削除

```
git clean -f
```

追跡対象外ディレクトリも削除

```
git clean -df
```


## コミットの管理

git add と　git commit を一緒に行う

```
git commit -am "コミットコメント"
```

コミット内容を確認する

```
git show {コミットID or 名前}
```

コミットを上書きする

```
git commit --amend
```
直前のコミットを取り消す(個人開発向き)

```
git reset --hard HEAD^
```
※`--hard` はコミット取り消した上でワークディレクトリの内容も書き換えたい場合に使用。
※`--soft` はワークディレクトリの内容はそのままでコミットだけを取り消したい場合に使用。
※`HEAD^` 直前のコミットを意味する。
※`HEAD~{n}` n個前のコミットを意味する
※「`HEAD`」のエイリアスとして「`@`」も使える（gitのv1.8.5から）
※コミットIDを指定しての取り消しも可能

直前の`git reset`を取り消す

```
git reset ORIG_HEAD
```
※「ORIG_HEAD」に前回取り消されたHEADの情報が1個だけ入っています。

直前のコミットを取り消すコミットを作成(複数人開発向き)

```
git revert HEAD^
```

最新をふくめ、過去4つ分のコミットを打ち消す

```
git revert HEAD~3
```
新しいコミットを作らずにコミットをインデックスに戻す

```
git revert HEAD^ --no-commit
```

別ブランチのコミットを取り込む

```
git cherry-pick {取り込むコミットID}
```

直前のコミットにタグ（別名）をつける

```
git tag {名前}
```
特定のコミットにタグ（別名）をつける

```
git tag {名前} {コミットID}
```
タグ（別名）を削除

```
git tag -d {名前}
```
## 変更ファイルの退避

ファイルを一時退避させる

```
git stash
```

ファイルの変更をメッセージをつけて一時退避させる

```
git stash save "メッセージ"
```

一時退避したファイルを戻す(stash@{0}の場合)

```
git stash apply stash@{0}
```

一時退避したファイルを戻して削除(stash@{0}の場合)

```
git stash pop stash@{0}
```

一時退避のファイル一覧を確認

```
git stash list
```

一時退避ファイルを削除(stash@{0}の場合)

```
git stash drop stash@{0}
```

変更されたファイル名だけを表示する

```
git stash show stash@{N}
```

変更されたファイルの内容まで表示する

```
git stash show -p stash@{N}
```

## gitコマンドのエイリアス作成

gitコマンドのエイリアス作成

```
git config --global alias.{新しい名前} {コマンド}
```


gitコマンドのエイリアス一覧

```
git config -l
```
Google Tech Dev Guide学習内容メモ#2

Googleが提供している学習用教材Google Tech Dev Guideについて学習した内容のメモ。
今回取り組んだのは以下：

■タイトル
Implementing a key value store in a hash table

■リンク
http://codecapsule.com/2013/05/13/implementing-a-key-value-store-part-5-hash-table-implementations/

素人なので英語で読みながら理解するのはきついので和訳メモ。

#リンク先の和訳
##ハッシュテーブルの実装
この記事ではボトルネックとなるのはどこなのか理解するため、C++での実際のハッシュテーブルの実装について調査する。ハッシュはCPU-intensiveであり、それに最適化されている必要がある。しかし、ほとんどのハッシュテーブルの内部メカニズムは効率的なメモリとI/Oアクセスに関するものであり、その点がこの記事のメインポイントとなる。この記事では3つのC++でのハッシュテーブルの実装について、メモリ内部およびディスク上での動作について調査し、データがどのように構造化されアクセスされるか見ていく。この記事の内容は以下：

1. Hash tables
    1. Quick introduction to hash tables
    1. Hash functions
2. Implementations
    2. unordered_map from TR1
    2. dense_hash_map from SparseHash
    2. HashDB from Kyoto Cabinet
3. Conclusion
4. References

##1.Hash tables
###1.1 Quick introduction to hash tables
ハッシュテーブルにより連続的なデータに効率的にアクセスできる。各エントリはkeyとvalueのペアであり、keyがわかってさえいれば素早く読出しと割り当てができる。この機能の実現のためkeyはハッシュ関数を用いて元の値から整数にハッシュ変換される。次にこの整数は元の値にアクセスできるバケット配列のバケットを特定するインデックスとして使われる。たくさんのkeyが同じ値にハッシュ変換される可能性があり、その場合これらのkeyはバケット配列内で衝突(collision)する。この衝突を解決するために分離連鎖法、連結リスト、自己平衡木、または一次か二次探索の開番地法などの方法を適用することができる。

以降ハッシュテーブルが何かを理解している物として進める。もう少し理解が必要と考えるならWikipediaのハッシュテーブルのページ[[1]](http://en.wikipedia.org/wiki/Hash_table)、“Introduction to Algorithms” by Cormen et. al [[2]](http://www.amazon.com/Introduction-Algorithms-Thomas-H-Cormen/dp/0262033844/)のハッシュテーブルの章を参照するとよい。

###1.2 Hash functions
ハッシュ関数の選択は非常に重要である。よいハッシュ関数の基本的な要件はそのハッシュ値が一様に分布する事である。こうすることで衝突するバケットへのエントリの数の平均値とともに衝突する可能性が抑えられる。

多くのハッシュ関数があり、データがどのようになるかわからない限りは平均してランダムなデータを一様に出力し、可能であればアバランシェ効果に対応できるものを選択することだ[[3]](http://en.wikipedia.org/wiki/Avalanche_effect)。何人かの人が既にハッシュ関数の比較に取り組んでおり[[4]](http://blog.reverberate.org/2012/01/state-of-hash-functions-2012.html)[[5]](http://www.strchr.com/hash_functions)[[6]](http://programmers.stackexchange.com/questions/49550/which-hashing-algorithm-is-best-for-uniqueness-and-speed/145633#145633)[[7]](http://blog.aggregateknowledge.com/2012/02/02/choosing-a-good-hash-function-part-3/)、彼らの結論からMurmurHash3[[8]](https://sites.google.com/site/murmurhash/)とCityHashが[[9]](http://google-opensource.blogspot.fr/2011/04/introducing-cityhash.html)現時点でハッシュテーブルに最適であることは明らかだ。

#2. Implementations
ハッシュ関数の比較と同様に、すでにC++メモリ内ハッシュテーブルライブラリの性能を比較しているブログ記事がいくつかある。遭遇した中で最も注目したのは“Hash Table Benchmarks” by Nick Welch [[10]](http://incise.org/hash-table-benchmarks.html) と “Hash Table Performance Tests” by Jeff Preshing [[11]](http://incise.org/hash-table-benchmarks.html)だが、他にもいくつか注目すべき記事があった[[12]](http://attractivechaos.wordpress.com/2008/08/28/comparison-of-hash-table-libraries/)[[13]](http://attractivechaos.wordpress.com/2008/10/07/another-look-at-my-old-benchmark/)[[14]](http://blog.aggregateknowledge.com/2011/11/27/big-memory-part-3-5-google-sparsehash/)。
OpenShift Meetup Tokyo #6 参加メモ

Qiitaは前から登録していたのですが、今回初投稿になります(今更)
OpenShift Meetup Tokyo #6に参加してきました

自分メモ的な感じになってしまった…(読みづらいところは改善していきたい)
→まずはアップすることに意義があると願って…

# 筆者について
どこまで書いてよいかわからないのですが、挙げてみる

* インフラエンジニア
* AWSを利用していることが多い(EC2/VPC/ALB/RDS/Cloudwatch/S3/CloudFormation/Fargate)
* AWSソリューションアーキテクト アソシエイトを保持(プロフェッショナル合格目指してる)
* Azure(Virtual Machine)やGCP(GKE)は個人的に多少触っている
* CI/CD周りもやっている(Jenkins/CircleCIなど)
* 監視系もやっている(Mackerel/Datadogなど)

→元々はオンプレ中心でしたが、クラウドを触るようになってCodeでごにょごにょする毎日
 (CloudFormation/Fabric/Ansible)
→コンテナ勉強中(Docker/k8s)

# 参加の動機
ざっくりと参加したいと思った動機

* Fargateは触っているが、インフラ屋ならk8sを触っておいたほうが良さそう(仕組みとか概念を理解しておきたい)
* GKEを触った時にk8sの奥深さを感じたが、なかなか深くやるタイミングない…
* いっそのことk8sやるならエンタープライズ向けのOpenShiftも含めてやったら面白そう！？


# 調査メモ
* https://access.redhat.com/documentation/ja-jp/openshift_container_platform/3.11/html/release_notes/release-notes-ocp-3-11-release-notes
* https://kabukawa.hatenablog.jp/entry/2018/10/05/092205


# OpenShift Meet up Tokyo #6
https://openshift.connpass.com/event/139787/

遅れての参加となってしまったので途中からのメモになりますorz

## CSIとRook-Ceph, NooBaaに見るCloud-native Storageの可能性(仮)
@utuboさん

* Cloud Native Storageという考え方
* Open Container Storage 4は2019年11月GA予定
* Rook / Ceph / NooBaaの連携がOpen Container Storage 4
* NooBaaはオブジェクトストレージのゲートウェイとして動作する
* NooBaa配下でS3がオブジェクティブストレージとして利用することが可能


## DRBDとLINSTOR CSI plugin
@hkuroki845さん

* LINSTORの話
* DRBDは32ノードまで同期が出来るようになってる(昔は2ノードまでだったのですごい)
* DRBD10の目玉機能はリソースチェーン対応

## KubernetesのストレージチョイスとOpenSDS(SODA)ご紹介
@kusunokiさん

* k8sのストレージチョイス: Rook / SDS / ストレージアプライアンス

* OpenSDSの話
 →Storage抽象化レイヤー
 OpenStorage Controllerが間に入る

* OpenSDS
  →Linux Foundation 傘下
  OpenSDSやってみるが出来なかった…

→これからに期待!?
→OpenSDSからSODAに名称が変わる

## コンテナ環境におけるSDSの考慮点
@c_takedaさん

* Hybrid multicloud is the platform.
 * Business Transformation
 * Application Modernization
 * IT Optimization …
　 → 様々な考慮点がある
* IBM Storage for Redhat for OpenShift
 　→ IBMのストレージ可用性は 99.999999999999 % (9×14)!? 
* アプリの可搬性だけでなく、これからはデータの可搬性も意識する必要がある

# 雑感
* ストレージのレイヤはより考えることが多いなーという印象。それだけやりがいはあるが、障害時のインパクトは計り知れない
* NooBaa使ってみたい。マルチクラウドとかにした場合、レイテンシーとかどれくらいか気になる
* 大事なことは自分たちの提供するサービスのSLAに適した構成になっているか。どこまで自分たちが責任を持つかによって、プラットフォームを選定するべき
* 参加者が多く、OpenShiftの流れが来ているように感じた

以上！！
【Swift】defer文

##defer文
defer文は遅延実行を行う構文です。
この文を使うことで、defer{}内部で記述された処理がスコープの退出時に行われるようになります。

```
var count = 0

func someFunction() -> Int {
  defer {
    count += 1
  }
  return count
}

someFunction()
someFunction()

//１回目結果
0
//２回目結果
1
```
上記のコードのようにdefer文を使用すると1回目の関数処理時には、遅延処理の影響で0が出力され、
2回目の関数処理時には前回の遅延した処理が行われた関数が出力され、１を出します。
このように遅れて処理をしてくれるのがdefer文の特徴です。
【jQuery編】 disabled、visibleの判定について

# disabledの判定方法
jQueryはある要素がdisabledかどうかを判定する場合、皆さんのご存じの通り下記の2つ方法が提供されています。

- is(':disabled')
- prop('disabled')

ネット上にいろいろな情報を探しまして、主に下記の二つ結論になっています。
1. disabled属性の状態を設定するには`prop()`メソッドを利用する。
2. disabled属性の状態を取得して判定するには`prop()`若しくは`is()`メソッドを利用する。

ただし、場合によっては、`$('#item').prop('disabled')`の判定結果と`$('#item').is(':disabled')`の判定結果が違うことがあります。

HTML上にアイコンを利用する場合、アイコンを表示・制御をしやすい為、大体`<span>`を利用して実現する。
この場合は、`<span>`をその2つの方法で判定結果は下記となります。
`$('#item').prop('disabled')`　常に true になる
`$('#item').is(':disabled')`　 常に false になる
※`<span>` に対して、`disabled="disabled"`追加しても判定結果が変わらない
※Chromeで検証済み

ここまで辿り着いた皆さんは、この点をぜひご注意ください。
もしすこしお役に立つようになれば、幸いと思います。

# visibleの判定方法
`is(':disabled')`と同じように、表示・非表示の判定方法について、jQueryより`is(':visibled')`部品が提供されています。
`is(':visibled')`について、もう少し深くまで見ましょう。

- jQuery 1.3.2より古いバージョン
　`$(':visible')`
　visibility:hidden または、opacity:0は可視状態とみなされます。

- jQuery 1.3.2以降
   HTMLDocに一定的なスペースを有する要素については、可視状態と見なされます。
   その要素は0より大きい幅と高さを持っています。
   jQueryはその要素のoffsetWidthもしくはoffsetHeightの値は0より大きい場合、`$(':visible')`はtrueになります。
　※参照：[jQuery( ":visible" )](https://api.jquery.com/visible-selector/#visible1)

なぜこういう判定方法に切り替えるかというと、性能面の改善です。
Chromeの場合は、処理時間は10%以下に早くなる。
詳しいレポートは、下記のサイトをご参照ください。
[:visible/:hidden](https://blog.jquery.com/2009/02/20/jquery-1-3-2-released/)

# Appendix　※個人感想
**【常識を考えず問題本質を掘る】の意識は技術者にとって、とても大切なことと思います。**
その意識を持ちながら、技術の世界に楽しんでいきましょう。
TensorFlow Lite のiOS GPU対応チュートリアルやってみた

## 画像分類デモの取得と実行
### 準備
 - Device: iOS 12.0以上
 - Xcode 10.0以上
 - Apple Developer ID
 - Xcode command line tools

```
xcode-select --install
```
 - CocoaPods

```
sudo gem install cocoapods
```

### Build and Run
 - デモのclone

```
git clone https://github.com/tensorflow/examples.git
```

 - ワークスペースファイルの生成

```
cd examples/lite/examples/image_classification/ios
pod update
pod install
```
これにより、`ImageClassification.xcworkspace`が作成される

 - ワークスペースを開く

```
open ImageClassification.xcworkspace
```

 - ビルドと実行

1, Xcode 内で、`ImageClassification`を選択し、プロジェクト構成を開、[genenral]タブの[Signing]で開発チームを選択
2, Identity section内、そしてすべてのXcodeプロジェクトで一意になるようにBundle Identifierを変更
3,iOSデバイスを接続し、ビルド、実行

## TensorFLow Liteの導入
 - Swiftに追加
`Podfile`内に以下を追加し`pod install`し直す。

```
use_frameworks!
pod 'TensorFlowLiteSwift'
```

 - ライブラリのインポート

SwiftファイルにTensorFlow Liteモジュールをインポート
```
import TensorFlowLite
```

## TensorFLow Lite GPUの導入
 - Swiftに追加
`Podfile`内に以下を追加し`pod install`し直す。

```
# pod 'TensorFlowLite'
pod 'TensorFlowLiteGpuExperimental'
```
 - GPU Delegateを有効にする
`CameraExampleViewController.h`において、

```
#define TFLITE_USE_GPU_DELEGATE 1
```

 - リリースモードに変更

1, `Product > Scheme > Edit Scheme...`に進み、`Run`を選択、`Info`タブの`Build Configuration`を`Debug`から`Release`に変更。`Debug executable`のチェックを外す。
2, `Options`タブをクリックす、`GPU Frame Capture`を`Disabled`に`Metal API Validation`を`Disabled`に変更。
3, `Project navigator -> tflite_camera_example -> PROJECT -> tflite_camera_example -> Build Settings`の`Build Active Architecture Only > Release`を`Yes`に設定

 - ビルドし実行

デバイスを接続しXcodeからビルド、実行

## 参照
[TensorFlow Lite image classification iOS example application](https://github.com/tensorflow/examples/blob/master/lite/examples/image_classification/ios/README.md)
[Tensor Flow Lite iOS quickstart](https://www.tensorflow.org/lite/guide/ios)
[TensorFlow Lite GPU delegate](https://tensorflow.org/lite/performance/gpu)
KVM VMをクローンして別のホストで作成する方法

#KVM VMをクローンして別のホストで作成する方法
やりたいこと
ホストA に作成したVMをクローンして別のホストBで立ち上げる
（ホストBでも適当にVMを作成しておく）

参考
https://www.agilegroup.co.jp/technote/kvm-guest-clone.html

```
sudo virt-clone --original <コピー元仮想マシン名> --name <コピー先仮想マシン名> --file /var/lib/libvirt/images/<イメージファイル名>
```

コピーして作成した
VM.xml ファイル
VM.qcow2
を写したいホストにコピーする.

＊uuidが変更されていることを確認する
＊macアドレスが変更されていることを確認する
＊xmlファイルに記載されているインターフェース名が移動先のホストで使用されているものか確認する

```
virsh define [コピーしてきたvm.xmlファイルのディレクトリ]
```

```
virsh edit [コピーしてきたVM名]
```

移動先のホストBで適当に作成したVMのxml設定ファイルを見て
コピーしてきたVMのxml設定ファイルと比較する.

私の場合
osのmachineが変わっていてVMを起動することができなかった
![スクリーンショット 2019-09-13 20.55.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391570/a4d191d3-747a-f5b0-e2c1-cac25dda51ef.png)
 
ちゃんとした設定に直して

```
virsh start [VM名]
```

起動を確認する