OmniAICreator/Qiita-1.07M huggingface dataset:
マッチしたn行下のみ表示する

聞かれたので自分メモ。

## お題
これの、`05`の2行下**のみ**表示する。
grepの`-A`オプションとちがって、**のみ**表示したい。

```
seq -w 01 10
01
02
03
04
05
06
07
08
09
10
```

## sedで
`05`の次の次の行だけ表示。

```
seq -w 01 10 | sed -n '/05/{n;n;p}'
07
```

捗れ〜。


## おまけ: 逆は？
その逆はどうやるの。超ダサい。

```
seq -w 01 10 | tac | sed -n '/05/{n;n;p}'
03
```

どうやるの。
WKWebView オフライン状態を取得する

#オフライン状態を取得#
WKWebViewでインターネット接続に失敗した（オフライン状態）時に自作のエラー画面を出したかったので調べました。
備忘録として書いておきます。


```ViewController.swift
import UIKit
import WebKit

    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        let error = error as NSError
        
        if error.code == -1009 {
            print("offline")
          //オフライン時の処理
        }
    }
```
codeの値が1009だった場合インターネット接続がないようです。

#実際に行った実装#

```ViewController.swift
import UIKit
import WebKit

class DetailOfArticleController: UIViewController {

    let detailOfArticleView = DetailOfArticleView.instance()
    let errorPageView = ErrorPageView.instance()
    var getUrl = ""
    var activityIndicatorView = UIActivityIndicatorView()
    override func viewDidLoad() {
        super.viewDidLoad()
        detailOfArticleView.frame = self.view.frame
        self.view.addSubview(detailOfArticleView)
        openUrl(urlsting: getUrl)

        detailOfArticleView.wkWebView.navigationDelegate = self
        activityIndicatorView.center = view.center
        activityIndicatorView.style = .whiteLarge
        activityIndicatorView.color = UIColor(hex: "660066")
        view.addSubview(activityIndicatorView)
    }

    func openUrl(urlsting: String) {
        let url = URL(string: urlsting)
        let urlRequest = URLRequest(url: url!)
        detailOfArticleView.wkWebView.load(urlRequest)
    }
    
}
extension DetailOfArticleController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        activityIndicatorView.alpha = 1
        activityIndicatorView.startAnimating()
    }
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        activityIndicatorView.alpha = 0
        activityIndicatorView.stopAnimating()
    }
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        let error = error as NSError
        
        if error.code == -1009 {
            print("offline")

//オフライン時の処理
            activityIndicatorView.alpha = 0
            activityIndicatorView.stopAnimating()
            errorPageView.frame = self.view.frame
            self.view.addSubview(errorPageView)
        }
    }
    
}

```
こちらはニュースアプリのように一覧ページから詳細ページ(WKWebViewを用いてwebページを表示)へ遷移させています。
getUrlは一覧ページからタップした際に取得しています。

#参考#

http://harumi.sakura.ne.jp/wordpress/2019/03/04/wkwebviewでインターネット接続エラーを取得する/
上記の記事を参考にさせていただきました。
ありがとうございます！
2021年版・爆速Reactプロジェクトの作り方(create-react-appを使用)

爆速でReact(React.js)のプロジェクトを作成し、とりあえず動かす方法を書きます。

## 環境
- macOS Big Sur 11.2.3

## Node.jsのインストール
[公式サイト](https://nodejs.org/ja/)からダウンロードしたインストーラを実行してください。
本記事ではversion 14.16.1を入れました。

## Yarnのインストール
[公式サイト](https://yarnpkg.com/ja/)もしくは

```
# npm 経由でyarnをインストール
npm install -g yarn
# yarnのバージョンを確認
yarn -v
```

## create-react-appでReactプロジェクトの作成

プロジェクトを作りたいディレクトリに移動し、ターミナルで以下のコマンドを実行します。my-appは作成するプロジェクト名です。

```bash
yarn create react-app my-app
#プロジェクトディレクトリへ移動
cd my-app
```
こんな感じのファイルが出来てるかと思います。
<img width="195" alt="スクリーンショット 2019-05-13 16.34.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214076/15124b8e-0ca1-5105-ede8-9bba510b3c02.png">


## ローカルサーバー起動
プロジェクトディレクトリで以下のコマンドを実行します。

```bash
yarn start
```
`yarn start`でローカルサーバーが起動し、ブラウザで自動的にページが表示されるかと思います。もし表示されなければ、ブラウザから
http://localhost:3000/
にアクセスしてください。

### ローカルサーバー停止
ターミナルから`Ctrl+C`でサーバーを終了します。

## ビルド
`yarn build`で公開用のファイル群がbuildディレクトリ直下に作成されます。

```bash
yarn build
```

## 補足
### yarnって何？
こちらの記事参照。
https://ics.media/entry/19384/
基本的にはnpmと似たようなNodeのパッケージ管理ツールですが、インストールが高速だったりします。コマンドはほとんどnpmと変わりません。

ソース：
https://create-react-app.dev/docs/getting-started
https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app
UnityでWindowsMR開発する方法

開発環境
-
   - UnityHub1.6.2
   - Unity2019.1.0f2
   - VisualStudio2019

開発手順
-
 Unity Hubから新規プロジェクトを作成する。
![スクリーンショット (6)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274979/a42629b6-18be-0bab-37bd-feddfbadead0.jpeg)
[File]>[Build Setting]>[Universal Windows Platform]を選択し[Switch Platform]をクリックする。
![スクリーンショット (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274979/35420391-604c-36d0-3ab8-3062969c0dc5.png)
[Player Setting]>[XR Setting]>[Virtual Reality Supported]にチェックを入れる。![スクリーンショット (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274979/5b95a753-da3b-7e28-5269-1613acbe0193.png)
[File]>[Build Setting]>[Build]をクリックし、適当なファイルを選択する。（このプロジェクトの下のファイル以外）
Build configurationを何にしたか覚えておく。(今回はRelease)
先ほどビルドした中にある、[プロジェクト名].slnをVisualStudioで開く。今回はWindowsMR.sln
このとき、インストールしてないものがあれば、インストールする。
ソリューション構成をBuild configurationと同じものにする。(今回はRelease)
ソリューションプラットフォームをx64にする。![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274979/30efcb87-822d-c00c-878d-64721a0b9012.png)
[デバッグ]>[デバッグの開始]をクリック

完成
React基礎②

##React コンポーネント
コンポーネントはJavaScriptでいう関数みたいなもの。
propsと呼ばれる引数を受け取り、指定した動作をさせ
画面上に表示するためのReact要素を返す。

##コンポーネントの定義
コンポーネントの定義としては関数コンポーネントと
クラスコンポーネントがある。

* 関数コンポーネント<br>
JavaScriptの関数を書くことにより定義する。

```jsx
//コード１
function Hello(props) {
  return <h1>Hello,{props.name}</h1>;
}
```

この関数（コード１）はpropsというデータの入ったオブジェクトを引数として受け取り
React要素を返している。

* クラスコンポーネント

```jsx

//コード2
class Hello extends React.Component{
    render(){
        return <h1>Hello,{this.props.name}</h1>;
    }
}
```

この上記の2つのコードの意味は等価である。

##コンポーネントの基本利用方法

```jsx
function Hello(props) {
  return <h1>Hello,{props.name}</h1>;
}
const element =<Hello name="Taro"/>;
ReactDOM.render(
    element,
    document.getElementById('root')
);
```

1. `<Hello name="Taro" />`を引数としてReactDOM.render()を呼び出す。
2. ReactはHelloコンポーネントを呼び出しpropsの中に｛name:'Taro'｝という属性を含んでおり、このpropsを渡す。
3. Helloコンポーネントは`<h1>Hello, Taro</h1>`要素を返す。
4. DOMでは作業をより軽量化するために、DOMの差分を調べ差分のみをrenderする。

注意１：コンポーネント名は常に大文字で始める。
上記のプログラムでは`<Hello />`はコンポーネントを表しており、スコープ内にHelloが存在する必要がある。
　ある要素の型が小文字から始まっているような場合、`<div>`や`<session>`などのコンポーネントを参照する。その後'div'や'session'という文字列に変換されReact.createElementに渡される。
　`<Hello/>`のような大文字から始まる型はReact.createElement（Hello）にコンパイルされ、スコープ内で定義されたもしくは、importされたコンポーネントを参照する。
XXEとActiveScript

# XXEとActiveScript

## XXEとは

XXE(XML External Entity)とは、XMLの外部参照機能を利用して、サーバ内部のファイル内容を取得(漏えい)したり、内部ネットワーク上のファイルにアクセスしたりする不正行為

XXEは、XMLを扱うアプリケーションで発現する可能性があるので、XML文書を取り扱う際には注意する必要がある。

## ActiveScriptとXML

ActiveScript(VBScript/JScript)&amp;WSH/ASPでXMLを扱うには、MS-XMLの利用が考えられる。

よって、以降は、MS-XML を使って、再現させたり、対策を考えてみたりしよう。

## テスト環境

Windows10+WSH5.8+VBScript

## 結論

とりあえず、MS-XML では、外部参照は無効化されているので心配しなくてよいのかもしれない。
→私の環境だけの話かもしれないという点は留意してほしい

## MS-XMLでXMLを読む

loadするファイルを普通の[in.xml](https://qiita.com/tomoki0sanaki/items/015b6e8b807ed256a6e4#xml%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB--inxml)にすると、こんな感じ。

![077.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/dc07d257-c788-25a6-d46d-4904585a51bd.png)

読めた。

## MS-XMLで外部参照のあるXMLを読む

loadするファイルを普通の[in1.xml](https://qiita.com/tomoki0sanaki/items/015b6e8b807ed256a6e4#xml%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB--in1xml)にすると、こんな感じ。

![078.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/b97c3d0c-58ff-088c-b4b0-ceef3d00a69a.png)

読めない。エラーになった。

## resolveExternals プロパティ

[外部参照を読む/読まないを制御するフラグ](https://docs.microsoft.com/en-us/previous-versions/windows/desktop/ms762283(v=vs.85))があるようなのだけど、どうも私の環境では有効に機能しないようだ。

## IE XXE

[IE XXE](https://www.blackhat.com/docs/us-15/materials/us-15-Wang-FileCry-The-New-Age-Of-XXE-ie-wp.pdf)という話もあるようなので、WSH/ASPでもXXEには注意した方がいいような気がするのだけど、自分の環境で動作しないとなると、どうにもならない orz

# ソースコード(testvbs.vbs)

```vb:testvbs.vbs
Option Explicit

Dim objDOM
Dim rtResult
Dim argObj
Dim xmlFile

Set argObj = WScript.Arguments
If 0 < argObj.Count Then
 xmlFile = argObj(0)
 Set argObj = Nothing
Else
 Set argObj = Nothing
 WScript.Quit
End If

Set objDom = WScript.CreateObject("MSXML2.DOMDocument.3.0")

objDom.resolveExternals = True

If objDom.load(xmlFile) = True Then
rem WScript.Echo "isResolving is " & CStr(objDom.isResolving)
 DispData objDom.childNodes, ""
Else
 WScript.Echo "load Error"
End If
Set objDom = Nothing

WScript.Quit

Sub DispData(objNode, header)
 Dim obj
 For Each obj In objNode
  WScript.Echo header & obj.nodeName & " - " & obj.nodeValue
  If obj.hasChildNodes = True Then
   DispData obj.childNodes, header & " "
  End If
 Next
End Sub
```

## 戻る

[XXE基本編へ戻る](https://qiita.com/tomoki0sanaki/items/015b6e8b807ed256a6e4)
viで行末のスペースやタブを削除する方法


エクセルとかコピーしたりWEBページコピーとかでよく文末についてくるニクイやつ
そうスペース、タブ。

そいつらとお別れする呪文です

<b>:%s/\s*$//</b>


いつも忘れるので俺得として。
cURL + jq でGithub IssuesをCSV出力する (v3 API)

## はじめに

Github Issuesでチケット管理している場合、CSVファイルとして出力したい場合がよくあります。例えば、セールスチームや、CSチームへどんなチケットがあるのかを共有したい時など。

## やり方

#### 要件

1. openのissueを取得する。
2. エクセル or Numbersで確認できるCSVであること
3. メンバーが簡単に実行環境を整えられること

### CSV出力

```
curl -u ":github_username" https://api.github.com/repos/:repository/issues\?per_page\=1000\&page\=1\&state\=open |\
 jq -r '["id","title"], (.[] | [.id,.title]) | @csv' > latest_issues.csv
```

`:github_usernam` => Githubのユーザー名
`:repository` => 対象のリポジトリ

|パラメータ|説明|
|:---|:---|
|`per_page`|１ページあたりのデータ量|
|`page `|何ページ目なのか|
|`state`|ステータスです。`open` / `closed` / `all` で指定します。デフォルト `open` です。|

公式ドキュメント：
Issues: <https://developer.github.com/v3/issues/#parameters>
Pagination: <https://developer.github.com/v3/#pagination>

## サンプル

[ruby](https://github.com/ruby/ruby) のissuesを取得して、CSV出力してみようと思います。

```bash
curl -u "fukmaru" https://api.github.com/repos/ruby/ruby/issues\?state\=open | jq -r '["id","title"], (.[] | [.id,.title]) | @csv' > latest_issues.csv
```

*-u "fukmaru" は、私個人の物ですので、適切に変えてみてください。 [fukmaru](https://github.com/fukmaru)*

こんなCSVができます。

```csv:./latest_issues.csv
"id","title"
443172349,"Harden fstr against multi-level shared strings"
443170985,"String#b: Don't depend on dependent string"
443141205,"Optimize CGI.escape and CGI.unescape"
443133755,"Optimize make URI::Util.make_components_hash"
443060039,"`Module#deprecate_constant` with message"
442414692,"Add object packing strategies for compaction"
441982364,"Write barrier should execute on target array when it is shared"
441266631,"Make Module#name and Symbol#to_s return their internal fstrings"
441245077,"Support XDG_*"
441174010,"Add an optional `inherit` argument to Module#autoload? (Feature #15777)"
440489120,"Add `Array#extract!`, `Hash#extract!`, and `ENV::extract!`"
440442248,"My wish for today is to fix the worst line of documentation in the pr…"
440324730,"Add Hash#except ENV#except"
439855458,"Add details about parameters to define_method doc"
439145969,"Add `exception` option to OpenStruct#initialize"
438126001,"Modify `ISeq#disasm` to provide the location as well as the default argument part."
437429354,"Reduce the minimum string buffer size from 127 to 63 bytes"
436227147,"NetBSD native support of explicit_bzero's like feature"
436081560,"IRB is improved with Reline and RDoc, take 2"
435970820,"New attribute trace_equivalent"
435923295,"Let memory sizes of the various IMEMO object types be reflected correctly"
435511039,"Fix release post output for tool/format-release"
434087025,"Replace use of _id2ref with WeakMap."
433831467,"Proposal: Add Time#ceil"
433581320,"Feature #15771: Add `String#split` option to set split_type string when a single space separator"
433577719,"Bugfix 15360: release mutex before checking for interrupts"
432866629,"Explicitly initialise encodings on init to remove branches on encoding lookup"
432809509,"Allow immediate objects to be used as WeakMap values"
431651217,"Split to smaller commits"
431614115,"Add compactor"
```

(2019/5/13 現在)
Cloud Dataflowを使ってBigQueryのデータロードを高速に処理する

BigQueryへデータロードはデータサイズによっては処理時間が長くかかることがあります。
Cloud DataflowでBigQueryへのデータロードを行うと短時間で高速に処理することができます。

今回はGoogleから提供されている [Cloud Storage Text to BigQuery](https://cloud.google.com/dataflow/docs/guides/templates/provided-templates?hl=ja#gcstexttobigquery) を利用してBigQueryへのロードを行います。


## 前提

- Google Cloud SDKがインストールされていること


## ロードするデータ

CSV形式。文字列内のカンマに対応するためにダブルクォーテーションで括ります。
ロードするファイルはGoogle StrageにGZIP形式でアップロードします。

```
"A000001","***************","2019-01-01 00:00:00"
"A000002","***************","2019-01-01 00:00:00"
"A000003","***************","2019-01-01 00:00:00"
```

##  JSONファイル

スキーマの情報を記述したJSONファイルを以下のように作成します。
作成したファイルはGoogle Strageにアップロードします。

```
{
	"BigQuery Schema": [
		{
			"mode": "NULLABLE",
			"name": "id",
			"type": "STRING"
		},
		{
			"mode": "NULLABLE",
			"name": "title",
			"type": "STRING"
		},
		{
			"mode": "NULLABLE",
			"name": "stamp",
			"type": "TIMESTAMP"
		}
	]
}
```

## UDFファイル

文字列内のカンマやダブルクォーテーションに対応させています。
作成したファイルはGoogle Strageにアップロードします。

```
function transform(line) {
  var values = line.match(/"(\\["ntr\\]|[^"])*"|[^,]+/g);
  var obj = new Object();
  obj.id = unescape(String(values[0]).slice(1,-1))
  obj.name = unescape(String(values[1]).slice(1,-1))
  obj.stamp = unescape(String(values[2]).slice(1,-1))
  var jsonString = JSON.stringify(obj);
  return jsonString;
}
```

## CREATE TABLE

データロード先のテーブルを事前に作成します。

CREATE TABLEで利用するスキーマファイルを作成します。

```
[
	{
		"mode": "NULLABLE",
		"name": "id",
		"type": "STRING"
	},
	{
		"mode": "NULLABLE",
		"name": "title",
		"type": "STRING"
	},
	{
		"mode": "NULLABLE",
		"name": "stamp",
		"type": "TIMESTAMP"
	}
]
```

テーブル作成

```
bq mk --table --schema book.schema %{project}:%{dataset}.book
```

## Cloud Dataflow実行

gcloud dataflowコマンドを以下のように実行します。

```
gcloud dataflow jobs run bqload-book \
--gcs-location gs://dataflow-templates/latest/GCS_Text_to_BigQuery \
--max-workers=10 \
--parameters \
javascriptTextTransformFunctionName=transform,\
JSONPath=gs://bqload-bucket/schema/book.schema,\
javascriptTextTransformGcsPath=gs://bqload-bucket/udf/book.js,\
inputFilePattern=gs://bqload-bucket/load/book/*.gz,\
outputTable=%{project}:%{dataset}.book,\
bigQueryLoadingTemporaryDirectory=gs://bqload-bucket/tmp/
```


## 結果

Dataflowがこのように実行されbookテーブルデータをロードできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413429/9ac66ba2-e12f-3627-4998-1104344cc9d2.png)


## 最後に

- 文字列内にカンマやダブルクォーテーションがあった時のエラー対応は手間取りました。
- データサイズが大きければ大きいほどDataflow実行時のワーカー数を増やし効率アップが期待できます。
go言語でPDFファイルの分割【pdfcpu】

# はじめに
深い理由はないのですが、PDFファイルの分割をローカルでしたくなったため書きました。
以下のライブラリを使用させていただいてます。

https://github.com/hhrutter/pdfcpu

非常に多くのPDF操作が出来そうですが、
今回は分割のみの紹介です。

## 免責など
・本記事上のコマンド、コードについて使用したことによる問題については一切責任を負いません。

# go get
```bash
go get github.com/hhrutter/pdfcpu/cmd/...
```

# コード
```go:test.go
package main

import (
	"github.com/hhrutter/pdfcpu/pkg/pdfcpu"
	"github.com/hhrutter/pdfcpu/pkg/api"
	"flag"
)
func main() {
	var pdfname = flag.String("n","test.pdf","file name")
	var dirname = flag.String("d","output","directory name")
	var splitnum = flag.Int("s",1,"split span")

    flag.Parse()
	config := pdfcpu.NewDefaultConfiguration()
	_, err := api.Process(api.SplitCommand(*pdfname, *dirname, *splitnum, config))
	if err != nil {
		return
	}
}
```
api.SplitCommandは第一引数に処理するPDFファイル名、第二引数に出力先フォルダ名、
第三引数に分割するPDFのページ間隔を指定します。(1なら1ページずつ、2なら2ページずつ)

## 実行

```bash
go run test.go -n a.pdf -d output_dir -s 1
```

outputフォルダに、
a_1.pdf、a_2.pdf...
とページずつ出力されます。

第三引数に2を設定すると
a_1-2.pdf、a_3-4.pdf...
と出力されます。

# 終わりに
このライブラリですが執筆時点(2019年5月13日)でアルファ版とのことですので、
ご利用を検討されている方はご留意ください。
日本語のダミーテキストを生成するモジュールを作った

[Lorem ipsum](https://ja.wikipedia.org/wiki/Lorem_ipsum)っていうやつがあるじゃないですか。あるんですよ。
日本語では言語としての諸々の特性からこういった「一見それっぽい」ダミーテキストを用意するのが難しいですよね。大抵の場合、青空文庫とかから著作権フリーの文章をもらってくるか、「あああ……」みたいな単純な繰り返しでお茶を濁すことが多いと思います。

というわけで、日本語のダミーテキストを生成するモジュールを作ってみました。node.jsで。
**[dummy-jp](https://github.com/stsysd/dummy-jp)**と言います。デフォルトでは以下のような文章を生成します。

> これと同じような訳になります。私がこうやっていないのであります。一般の慣例として偉へ手伝いに行ったというのがあるが、あなたがたは正しく妨害し得る至極重宝なものでしょう。

## 使い方
### インストール
npmにはアップロードしていないので、githubのレポジトリからインストールしてください。

```
> npm install stsysd/dummy-jp.git
# モジュールとして使う場合

> npm install -g stsysd/dummy-jp.git
# コマンドとして利用する場合
```

### モジュールとして使う
```javascript
const Dummy = require('dummy-jp');

// 設定なしで使えます
let dummy = new Dummy();
console.log(dummy.generate());

// モデルを指定して読み込む
// 下の場合、"./model-name.json"、"./model/model-name.json"、このパッケージの"model/model-name.json"の順にファイルを探して読み込みます。
Dummy.load("model-name").then(dummy => {
  console.log(dummy.generate());
});

// サンプルテキストから動的にモデルを生成する
Dummy.fromText("/path/to/text/file").then(dummy => {
  console.log(dummy.generate());
  
  // モデルの生成には時間がかかる場合があるので、事前に保存しておくことをおすすめします。
  fromTextFile.save("/path/to/model.json");
});
```

### コマンドとして使う
```console
> dummy-jp --repeat 3 --copy
# ３つの文章を生成してクリップボードにコピーする

> dummy-jp build --src source.txt --out out.json
# source.txtを元にモデルを生成し、out.jsonに保存する

> dummy-jp --model out
# out.jsonに保存したモデルを使って文章を生成する
```

## 仕組み
実態は単純な[マルコフ連鎖](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%AB%E3%82%B3%E3%83%95%E9%80%A3%E9%8E%96)を使った文章生成です。もう何番煎じかわかりませんね。
必ず元となる文章が必要になるので、デフォルトでは「私の個人主義」を使っています。他に同梱しているものでは「蜘蛛の糸」や「走れメロス」が使えます。

**「蜘蛛の糸」**
> こちらは地獄の底に当って居ります。何気なくカンダタの無慈悲な心が、そうしてそれだけの善い事をした報には、出来るなら、この一部始終をじっと見ていらっしゃいました。

**「走れメロス」**
> 「待て。その頃には、いまに、磔になった。一団の旅人と颯っとすれちがった。立ち上る事が出来たのだ。身代りの男を、三日目に殺して、説き伏せた。結婚式は、あれは夢だ。忘れている。もう、駄目でございます。」

もちろん他の文章も利用可能です。例えば[mstdn.jp](https://mstdn.jp/)のローカルタイムラインを使うと次のような文字列が出力されます。

**mstdn.jp**
> 交通費でない感じしててってどこにも出たくはまらない(´・ω・｀)そう考えると、はぁ？ってどこにも当てはまるがそれをぶら下げるための突っ張り棒が欲しい

なんとなく元の文章の雰囲気が出ていますね。
よかったら使ってみてください。


# その他雑多なこと
- マルコフ連鎖を使っている関係上、出力される文章の長さのコントロールは難しいです
- 文章の長さは大体幾何分布に従っていて、平均は元の文章の平均と一致するっぽいです
- 元と文章と同じ文章を生成してしまうことが結構あります
- マストドンのトゥートから生成したダミーテキストを眺めてるだけでも結構楽しかったので[botにしました](https://mstdn.jp/@markovchain)
- TwitterじゃなくてマストドンなのはTwitterのAPIキーの取得が大変そうだからです
Redshiftでのビュー定義の確認方法

#はじめに

Amazon Redshift や PostgreSQLで、このビューってどんなSQLで定義されていたっけ？
と調べる際に、<del>もはや惰性的に</del>

```sql
select * from pg_views where viewname = 'ビュー名';
```

と打ち込んでいましたが、簡単に参照する方法がありました。

#結論

```
\d+ ビュー名
```
これだけ、、、作業時間が少し短縮された気がします。。。

#確認

```sql
--テーブル１
CREATE TABLE book (
 bookid SMALLINT
,shopid SMALLINT
,bookname VARCHAR(32)
)
;

--テーブル２
CREATE TABLE bookshop (
 shopid SMALLINT
,shopname VARCHAR(32)
)
;

--ビュー
CREATE VIEW bookview as 
select
a.bookid,a.shopid,a.bookname,b.shopname
from
book a,bookshop b where a.shopid = b.shopid
;

=> \d+ bookview
                  ビュー "public.bookview"
    列    |          型           | 修飾語 | ストレージ | 説明
----------+-----------------------+--------+------------+------
 bookid   | smallint              |        | plain      |
 shopid   | smallint              |        | plain      |
 bookname | character varying(32) |        | extended   |
 shopname | character varying(32) |        | extended   |
ビュー定義:
 SELECT a.bookid, a.shopid, a.bookname, b.shopname
   FROM book a, bookshop b
  WHERE a.shopid = b.shopid;
```
React hooksでレンダリングをキャンセル(bail out)するテクニック

## はじめに
多少マニアックですが、useState/useReducerでのbail outに関するメモです。少し前の話になりますが、 https://github.com/facebook/react/pull/14569 のプルリクで入ったものです。

## どういうことか
```javascript
const MyComponent = () => {
  const [person, setPerson] = useState({
    name: 'qiita',
    age: 8,
  });
  // ...
};
```
というようなコンポーネントがあるときに、`useState(person)`として同じオブジェクトを渡した場合に再レンダリングされないということになります。当たり前といえば、当たり前なので、別に困ることはないですね。

ちなみに「キャンセル」というのは多少語弊があって、そのuseStateに起因するレンダリングが止まるだけであって、他のuseStateやuseContextがあってそれがレンダリングの起因となったり、そもそも親コンポーネントからレンダリングされる場合は止まりません。逆に、止まったら困ることになります。

## どういうときに便利か
useStateの場合は利用シーンがあまりないかもしれませんので、useReducerの場合で考えます。ステートを変更しようと思ったけど実は変更がなかったという場合にレンダリングをしないようにできます。
例えば、ageを加算する例は次のようになります。

```javascript
const personReducer = (state, action) => {
  if (action.type === 'SET_NAME') {
    return { ...state, name: action.name };
  } else if (action.type === 'ADD_AGE') {
    const newAge = state.age + action.age;
    if (newAge === state.age) {
      // bail out
      return state;
    }
    return { ...state, age: newAge };
  } else {
    throw new Error('no action type found');
  }
};

const MyComponent = () => {
  const [person, dispatch] = useReducer(personReducer, {
    name: 'qiita',
    age: 8,
  });
  // ...
};
```

人工的な例なので便利さは伝わりにくいかもしれませんが、できることは伝わるのではないでしょうか。

## おわりに
"bail out"という用語の理解には苦労しました。React内部の話なので、利用者向けのドキュメントにはどこにも載っておらず。React hooksの知見やベストプラクティスはこれから溜まっていくのではないかと期待しています。
IBM Cloud Community Summit 2019 資料まとめ

# 初めに
この記事は2019/4/26に開催された[IBM Cloud Community Summit 2019](https://bmxug.connpass.com/event/120823/)のまとめ記事となります。(Twitterから拾っています)

# Kubernetes関連
## Kubernetesをマスターする方法を伝授します。
### 概要
@MahoTakara さんによるKubernetesの機能や役割を擬人化(?)して、とても分かり易く纏めたセッションです。資料に対して、非常にこだわりを感じます。Kubernetesを利用すると、何が嬉しいのかが分かりました。
[資料](https://speakerdeck.com/takara9/kuberneteswomasuta-su-rufang-fa-wochuan-shou)

## Kubernetesアプリケーション運用基礎
### 概要
@capsmalt さんと @sotoiwa さんによるKubernetesを運用する上での、CI/CDに関するノウハウが詰まった資料。
GitOpsというアプリコードとマニフェストを分離して管理する考え方は新鮮でした。
[資料](https://speakerdeck.com/capsmalt/gitops-kubernetes)

## 初心者でもKubernetesを体験してみよう
### 概要
IBMが公開しているCode Patternを使って、まずはKubernetesを動かしてみましょう、という話。
基本的には公開されている手順に従って作業する事で、Kubernetes上で稼働するCMSを構築出来ます。
[資料](https://speakerdeck.com/motuo1201/chu-xin-zhe-demokuberneteswoti-yan-siyou)

# ブロックチェーン関連
## VS CodeとHyperledger Fabricでブロックチェーンを始めてみる
### 概要
ブロックチェーンに触れてみたいという方を対象とした、Hyperledgerを使ったサンプルアプリの作り方を説明した資料。
私自身今までブロックチェーンには触れてきませんでしたが、利用方法や考え方が簡潔に記述されており、参考になります。
VS Codeで実装できるようなので、トライするハードルも低そうに思えます。
[資料](https://speakerdeck.com/taijihagino/vs-codetohyperledger-fabricdeburotukutienwoshi-metemiru)

# サーバレス・IoT関連
## IBM Cloud にも「ボタンの欲望」を！ボタンの活用事例と動かし方 
### 概要
@ma2shita さんによる本イベントでのベストスピーカー受賞セッション。通称**白いボタン**と呼ばれている、[LTE-M Button](https://soracom.jp/products/gadgets/)を使って、IBM Cloud Functionsと連携。
ボタン一つで、様々なアクションを自在に起こす実装例が分かります。
**名言：ボタンの可能性は無限大**
[資料](https://www.slideshare.net/SORACOM/ibm-cloud-ibm-cloud-community-summit-201904)

# Watson関連
## Watson StudioでTweetデータを可視化しよう!
### 概要
Twitterのつぶやきを、watson studioを使ってワードクラウドとして可視化してみよう！というお話。
TweetをNatural Language Understanding(NLU)を使って分類する方法が分かります。
[資料](https://speakerdeck.com/kyokonishito/visualize-tweets-with-watson-studio)

# その他
## LINEで手書きした絵を送ってみよう(ハンズオン)
### 概要
スマホ上で簡単に手書きで書いた絵を、LINEのスタンプの様にメッセージに貼り付ける方法。
簡単な手書き地図などを共有するのにも便利。
[資料](https://www.slideshare.net/dotnsf/line-20190426)

## Call for Code 傾向と対策 / Call for Code 2019
### 概要
@ayatokura さんによるセッション。
様々な技術を用いて、自然災害による被害の軽減や早期復興を支援するハッカソン企画について。
全世界が相手ですがとても面白そう。最優秀賞には高額賞金もあります。
Node-REDとドローンを連携させたデモもあった様です。
[資料](https://speakerdeck.com/ayatokura/call-for-code-2019)

# 最後に
懇親会まで参加しましたが、LTやビンゴ大会など、最後まで参加者の方が笑顔で参加できるイベントでした:+1:
運営の方々、本当にありがとうございました。お疲れ様でした。
MAML:Model Agnostic Meta-Learning for Fast Adaption

#概要

MAMLの論文を読んだので日本語での軽いまとめを載せておきます。
知識が足りないので間違っている部分もあるかと思いますが優しい目で見てください。
MAMLの論文
https://arxiv.org/pdf/1703.03400.pdf
MAMLのコード
https://github.com/cbfinn/maml

#MAMLとは
メタ学習（学習方法を学習すること）のアルゴリズムの一つ。
勾配を用いてパラメータを更新していくことによって学習規則などを学ばなくてもメタ学習が可能となる。
イメージとしては深層学習における初期値をいい感じにすることですぐに新しいタスクに対しての学習が収束するみたいな感じ。

#アルゴリズム
######問題設定

損失関数をL、
episode lengthをH、
observationを$\boldsymbol{x}$
outputを$\boldsymbol{a}$
事前確率を$q(x_t)$
遷移確率を$q(x_{t+1}|x_{t},a_{t})$で定義する。
この時タスクTを$(L(x_1,a_1,.....,x_H,a_H),q(x_t),q(x_{t+1}|x_{t},a_{t}),H)$で表す。
タスク全体の分布は$p(T)$で表される。
モデルのパラメータは$\theta$、それによって表されるモデルは$f_{\theta}$である。

######アルゴリズム
ランダムに$\theta$を初期化する。
$p(T)$を用いてタスクTをいくつか選ぶ。
個々のタスクは$T_i$と表される。
さらに$T_i$の事前確率、遷移確率に従い、サンプルをいくつか選びそれを用いて$T_i$の損失、それの$\theta$に対する勾配を計算しそれを用いて$\theta$を更新する。
$$\theta_i'=\theta-\alpha\nabla_{\theta}L_{T_i}(f(\theta))$$
$\alpha$はステップサイズであり、固定もしくは調整が行われる。
全てのタスクについて勾配調整が終わったのち、タスク全体の損失に関しての勾配を求めて$\theta$を更新する。
$$\theta=\theta-\beta\nabla_{\theta}\sum_{T_i\sim p(T)}L_{T_i}(f(\theta'_{i}))$$
これを一回、もしくは複数回行うことにより$\theta$を最適化していくのがMAMLのアルゴリズムである。

######各モデルへの対応
MAMLの特徴の一つは簡単に色々なモデルに対応できることである、
サンプルデータ、損失関数の選び方でその対応がなされる。
例えば、画像認識などの教師付き学習は
episode length H=1として、入力と出力のサンプルがセットのデータとして与えられる。
損失関数は、二乗誤差やクロスエントロピーを用いられる。

強化学習の場合は、サンプルとしてそれぞれのタスクにおけるtrajectoryを選ぶ。
損失関数としては負の報酬期待値$L_{T_i}(f_\phi)=-E_{x_t,a_t \sim f_\phi,q_{T_i}}\sum_{t=1}^{H}R_i (x_t,a_t)$を用いる。
期待値は常に微分可能とは限らないので、勾配には政策勾配法を用いる。

#MAMLのadvantage
・MAMLは学習規則を学ぶのではなく勾配を用いるのでパラメータを増やさずにすむ
・様々なモデルに簡単に適応できる。
・メタ学習において最先端のもの（この論文が発表された時）と同等の成果を発揮する。

#evaluation
sinusoid,classification,reinforcement trainingにおいて先ほどのadvantageを確認した。

以上が論文の概要となります。

#最後に
コードを使うとsinusoid,classificationのtrain,testができる。
数ステップでのadapt,結果のプロットには対応していないので自分で作らないといけません。

https://recruit.gmo.jp/engineer/jisedai/blog/meta-learning/
こちらのサイトに天気のデータを予測したサンプルコードが載っているので参考にしていただけると思います
IBM Q Qiskit Terra サンプル プログラムに日本語コメントつけてみた

#はじめに
[IBM-Q](https://www.research.ibm.com/ibm-q/)をWeb上の[IBM Q Experience Composer](https://quantumexperience.ng.bluemix.net/qx/editor)で触り始めてみたところ、線形代数や量子力学の知識が十分でなくとも、ComposerのWeb GUIである程度の量子コンピュータのふるまいと処理が簡単に実験、観察できるのが面白くて、本格的なSDKの[Qiskit](https://qiita.com/search?q=QISKIT)を触り始めました。
当初、Qiskit SDKの膨大なクラスライブラリを避けて量子アセンブリ言語とも言える[QASM](https://qiita.com/yjmtsmt/items/da4ff0740f4fb1902dce)でゴリゴリいじろうかと思っていたのですが、IBM-Q のバックエンド(実機)のカップリングマップトポロジー(量子ビット回路同士を接続する組み合わせの仕様)がバックエンドごとに異なることを知り、そのままでは世界各国にある実機ごとにQASMを書き直さなければならないため、トポロジーを自動的に変換してくれる機能を探してQiskit Terraにたどり着きました。
サンプルプログラムがSDKに添付されていて眺めてみたのですが、(・・・よくわからない・・・)ため、自分の勉強用に日本語コメントを付けまくって、Gistに公開してみました。
(あと、Qiitaに登録して初投稿なので、ついでに練習用の記事だったりします・・・)
何か間違い等ありましたら、ご指摘くださると助かります。

#Qiskit Terraモジュールとは

[こちらの記事](https://qiita.com/kannkyo/items/c76b7748e9288445fe64)では、以下のように紹介されています。
>Qiskit Terraは「ソフトウェア・スタックのためのプラットフォーム」である。Terraには、「回路及びパルスのレベルで量子プログラムを構成し、特定の物理的な量子プロセッサの制約に合わせて量子プログラムを最適化し、リモートで実験のバッチ実行を管理するための一連のツール」がある。また、Terraは「モジュールで構成されているため、回路最適化とバックエンドの機能拡張は容易」である。

・・・説明が抽象的で、私のスキルでは原文、日本語訳ともによくわかりませんでした・・・
ですが、プログラミングのスキルがある方なら、下記サンプルプログラムをレベル0～レベル2まで追いかけて、実際に実行することで、何を手伝ってくれるプラットフォームであるか、より理解が深まると思います。

#オリジナルソースと、日本語コメント版のリンク
##レベル0(初級)
オリジナル: https://github.com/Qiskit/qiskit-terra/blob/master/examples/python/using_qiskit_terra_level_0.py
日本語コメント版: ---> https://gist.github.com/Chirimen-Jako/a5c4ca675f7c58bedc530fea329a1275

> レベル0（初心者）でQiskit-Terraを使用する方法を示す例。
>
この例は、ユーザーTerraの最も基本的な方法を示しています。 いくつかの回路を構築し、
BasicAer（ローカルQiskitプロバイダー）またはIBMQ（リモートIBMQプロバイダー）の両方でそれらを実行します。
コンパイルパラメータを制御するためには、中級ユーザが使用できるtranspile関数を提供しています。

---
##レベル1(中級)
オリジナル: https://github.com/Qiskit/qiskit-terra/blob/master/examples/python/using_qiskit_terra_level_1.py
日本語コメント版: ---> https://gist.github.com/Chirimen-Jako/36625749902913388468c1d3bfc7058c

>レベル1でQiskitを使用する方法を示す例（中級）。
>
この例は、中級ユーザーがTerraと対話する方法を示しています。
それはいくつかの回路を構築し、それらをtranspileオプションでトランスパイルします。
それはバックエンドで実行される単なるコンテナであるqobjオブジェクトを作成します。
同じqobjを（示されているように）多くのバックエンドに送信することができます。
それが実行できることを確認することはユーザの責任です
（すなわち、もしいずれかのバックエンドに何らかの制限があれば、それに従います）。
これは、回路全体を再コンパイルせずに異なるバックエンドで同じ回路を比較したい
場合、または単にランタイムパラメータを変更したい場合に便利です。
>
>回線を変換するパスを制御するためには、上級ユーザー向けのパスマネージャがあります。

---
##レベル2(上級)
オリジナル: https://github.com/Qiskit/qiskit-terra/blob/master/examples/python/using_qiskit_terra_level_2.py
日本語コメント版: ---> https://gist.github.com/Chirimen-Jako/d4c112dab2c4d7fe13929ed94917c43a

>レベル2（上級）でQiskitを使用する方法を示す例。
>
この例では、上級ユーザーがTerraと対話する方法を示します。
いくつかの回路を構築し、それらをパスマネージャーで書き換えます。

---
#おわりに
比較用に英文コメントやメッセージコードも残してあります。お好みでどんどん削除して、自分が見やすい形にしてみてください。

仕事ではもっぱらWindowsとC++,C#を使っておりました。LinuxやPythonに不慣れなため、環境構築に手間取りました。
特にPythonはLinuxでは大変人気があり、パッケージやモジュールも充実していますが、Python2とPython3の非互換性を克服するためにpyenv, Mkvirtualenvwrapper, Anaconda, Minicondaなどの本質的でない部分で相当時間を使った感があります。
これからPythonに手を付ける方はPythonの複数Versionを同居させるために、どんな方法が自分にとってベストプラクティスなのか、あらかじめ研究されることをおすすめしたいと思います。
Power BI 集合&積み上げ棒グラフ

これは特にすごいテクニックというわけではないけれど、
何度か質問を見かけたので検索などで探しやすいよう記事に残しておきます。
#集合&積み上げ棒グラフ
下記のように 集合グラフ の棒1本ずつを 積上げグラフ にした棒グラフです。
![集合積上げ棒グラフ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/6ffae5d2-a83f-9360-7184-6cc04004aac6.png)
![集合積上げ棒グラフ_横.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/e28f7765-797a-5248-c3d2-7f3ae591b42d.png)
元データ

|年|月|区分|売上|
|:---|:---|:---|---:|
|2012予|4月|飲料|25,795|
|2012実|5月|加工食品|8,624|
|2011実|6月|菓子類|13,300|
|･･･|･･･|･･･|･･･|

標準の集合グラフや積み上げグラフで表現するのは難しいのですが
カスタムビジュアルの [Stacked Column Chart by Akvelon](https://appsource.microsoft.com/ja/product/power-bi-visuals/WA104381825) や [Stacked Bar Chart by Akvelon](https://appsource.microsoft.com/ja/product/power-bi-visuals/WA104381824) を使えば作成できます。

**追記：2020年12月のアップデートにより標準グラフでも表現できそうです**
https://powerbi.microsoft.com/ja-jp/blog/power-bi-december-2020-feature-summary/#_Toc58831297

よかったら試してみてください。
以上です。
Azure DevOpsでTeamにメンバーを追加したら警告が出てRepoがみれない

### 概要

Azure DevOpsでプロジェクトのチームにメンバーを追加した時に以下のような警告がでて、Repo等のサービスが利用できないメンバーができてしまった。

> The user `xxxx@yyyy.com` has access to limited functionality as a Stakeholder. Basic access level is required for access to version control and Agile tools.

Google翻訳した感じでは、Stakeholderのアクセス権限を与えられた状態であり、アジャイルツールやバージョン管理(repo)のアクセスはBasicのアクセス権限が必要とのこと。

### 対処

なので、Basicのアクセス権限を与える必要があります

- `https://dev.azure.com/{組織名}/_settings/users`にアクセスし、Access Levelを確認する
    - この画面は`https://dev.azure.com/{組織名}/`→Organization Settings→Usersで移動できます
- アカウントの毎のアクセスレベルが表示されるので確認する
- アカウントを右クリック→`Change Access Level`を選び、`Basic`に変更する
    - Basicは組織毎に5枠まで無料なので、それ以上は購入する必要がある。5人まで無料というのはここのこと。
    - 無料枠で使いまわしたいなら他の人を削除するなりアクセス権限をBasic以外にするなりして5人を超えないようにする

画面イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/314c8043-05fe-d32d-2758-241eab78ed33.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/33df5bd4-16c7-90eb-8456-e3edcbd57c73.png)


### メモ

組織＞プロジェクト＞チーム＞メンバー という階層になっているらしい。

組織毎にメンバーの管理をしているようで、プロジェクトのチームのメンバーに入れた時に組織で管理していなければ新規で追加される。
単純に組織に入れておくだけであれば手順があった。ただ、プロジェクトのチームには属さない状態になるので、チームのメンバーに追加する手順は別途必要。

https://docs.microsoft.com/ja-jp/azure/devops/organizations/accounts/add-organization-users?view=azure-devops
Railsで多階層カテゴリーの表示方法



## categoriesテーブル

|Column|Type|Options|
|------|----|-------|
|name|string||
|pre_category_id|integer||
|pre_precategory_id|integer||

### Assosiation
- belongs_to :parent, class_name: :Category
- belongs_to :grand_children, class_name: :Category
- has_many :children,class_name: :Category, foreign_key: :pre_category_id
- has_many :grand_children,class_name: :Category, foreign_key: :pre_precategory_id

pre_categoy_idには2段階目が使うように1段階目のidを入れる、それ以外はnil
pre_precategory_idには3段階目が使うように2段階目のidを入れる、それ以外はnil

コンソールコマンドなどで確認

   
    @category =  Category.find(1)
    @category.children.grand_children

できちんとnameが取れているか。

controllerにはこれ

    @main_categories = Category.eager_load(children: {children: :grand_children}).where('第一階層を取るための検索')

viewにはこう書いた

    - @main_categories.each do |main_category|
         工程１
        　- main_category.children.each_with_index do |sub_category,i|
        　　 　工程２
        　　　-　main_category.children[i].grand_children.each do |sub_subcategory|
                - if sub_subcategory.id == sub_category.id

被ると困るところに条件分岐
ブロックはeachには使わない。

一つ一つviewにwhere検索で条件分岐を書いたら昭和のpentiamコンピューターになった。
このやり方ならなんとか見れるレベルの速さに落ち着いた。
headerのカテゴリー分岐にもつかえる、変数はappilication_controllerにbefore_actionで定義する。

書きなぐり
アスペクト比　計算


#アスペクト比に関しての計算
ちょっと特殊な編集があるので、思い出しながらメモしておきます。

##まずはアスペクト比の計算方法
```jsx
var width = 120;
var height = 112;

//最大公約数を求める
function gcd(x, y){
  if(y === 0) return x
  return gcd(y, x % y)
 }

var num = gcd (width,height);
$.writeln("最大公約数:"+num)
$.writeln("アスペクト比:"+width/num+":"+height/num)
```

```console
//結果
最大公約数:8
アスペクト比:15:14
```

##アスペクト比で計算する方法
###幅のみ決まっている場合

```jsx
//15:14の比率として
var width = 120;
var hiritsu1 = 15;
var hiritsu2 = 14;

$.writeln("高さ:"+(width*hiritsu2)/hiritsu1)
```

```console
//結果
高さ:112
```

###高さのみ決まっている場合

```jsx
//15:14の比率として
var height = 112;
var hiritsu1 = 15;
var hiritsu2 = 14;

$.writeln("幅:"+(height*hiritsu1)/hiritsu2)
```

```console
//結果
幅:120
```
Nuxt.js ルーティングの設定方法

初めてNuxt.jsを触り、どこにルーティングが書かれているのかがわからなかったのでメモ

nuxtはvue routerを利用してルーティングを作成している。

ほぼ[公式サイトのルーティング](https://ja.nuxtjs.org/guide/routing/)の記述通りなのでそちらがよければそちらを

## ルーティングの決め方

公式サイトより、

> Nuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します

と書かれている。なのでRailsにおけるroutes.rbは存在しない

## 静的ルーティング

ではpagesのディレクトリ構成を元にどういったルーティングが構成されているのかを見てみる。

```
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
```

の場合、

```
router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
```

rootはpages直下のindex.vue, それ以外のルーティングはディレクトリとファイル名に応じてルーティングが作成される。

ちなみにnameはrouter-linkなどでリンクを作るときにnameで指定したりできるもの


## 動的ルーティング

```
/users/34/
```

のようにid名などで動的にリンクを作成する場合ファイル名、ディレクトリ名に**アンダースコア**をつけることで可能になる。

```
pages/
--| users/
-----| _id.vue
```

の場合、

```
router: {
  routes: [
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    }
  ]
}
```

となる。

## まとめ

pagesのディレクトリ構成をみることでrouteがわかる。

ということはわかったのだが、~~一覧でみる方法はないのか、、、~~

### 追記
下記コメントでkeita06さんからrouting一覧は.nuxt/router.jsでみることが可能とのコメントをいただいた

そちらで確認することが可能

```
 {
      path: "/",
      component: _e707290e,
      name: "index"
    }],
```

ただし、buildする影響からかcomponentが定数化されている。
ファイル上部に宣言されているのでそこを確認するとわかる



## 参考文献

[公式サイト](https://ja.nuxtjs.org/guide/routing)
Slack の特定のチャンネルのメッセージ一覧をスプレッドシートにエクスポートするツールを作ってみた

## なにこれ

![about.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/02b15b72-ace1-a6b0-ea62-5b6f03581fab.jpeg)
Slack の特定のチャンネルのメッセージ一覧（厳密にはスレッド一覧）をスプレッドシートに出力するやつです。

## 概要

Slack にはメッセージのエクスポート機能があります（ [ワークスペースのデータをエクスポートする - Slack](https://get.slack.help/hc/ja/articles/201658943) ）が、ワークスペースの全てのメッセージをエクスポートするとかなり時間がかかるので、特定のチャンネルのメッセージ一覧をスプレッドシートにエクスポートするツールを作りました。

## 使用技術

### [Google Apps Script](https://qiita.com/tanabee/items/e51f107f1e95a42cc636#google-apps-script-%E3%81%A8%E3%81%AF)

スプレッドシートに出力したかったため、 Google Apps Script を採用しました。

### [Slack API](https://api.slack.com/)

Slack の API を叩いて、メッセージ一覧を取得しました。

## 実装

Google Apps Script で、 50 行くらいで書けました。

```javascript
var TOKEN   = PropertiesService.getScriptProperties().getProperty("TOKEN");
var CHANNEL = PropertiesService.getScriptProperties().getProperty("CHANNEL");

function main() {
  const baseUrl = 'https://slack.com/api/channels.history';
  const baseParameters = [
    'token=' + TOKEN,
    'channel=' + CHANNEL,
    'count=1000',
  ];

  var messages = [];
  var latestMessage = '';
  do {
    var parameters = baseParameters.concat([latestMessage]).join('&');
    var res = fetchSlackChannelMessages(baseUrl + '?' + parameters);
    var newMessages = res.messages
      .filter(function (v) {
        return !('thread_ts' in v) || v.ts === v.thread_ts;
      }).map(function (v) {
        return [
          v.client_msg_id,
          v.type,
          v.text,
          v.user,
          v.ts,
          v.reply_count || 0,
          v.reply_users_count || 0,
        ];
      });
    messages = messages.concat(newMessages);
    latestMessage = 'latest=' + res.messages[res.messages.length-1].ts;
  } while (res.has_more);

  SpreadsheetApp
    .getActiveSheet()
    .getRange('A2:G' + (messages.length+1))
    .setValues(messages);
}

function fetchSlackChannelMessages(url) {
	const res = UrlFetchApp.fetch(url, {
		method: 'GET',
		headers: { "Content-Type": 'application/json' }
	});
  return JSON.parse(res);
}
```

## 導入方法

導入方法は GitHub の [tanabee/slack-channel-exporter](https://github.com/tanabee/slack-channel-exporter) リポジトリの [README](https://github.com/tanabee/slack-channel-exporter/blob/master/README.ja.md#installation) にまとめています。


## 関連記事

- [スプレッドシートに OKR を書くとツリー構造で可視化されるツールを作ってみた](https://qiita.com/tanabee/items/3c17dcdbb8efb7afe212)
- [GitHub の特定のラベルが付いた issue の登録時に Slack に通知するツールを作ってみた](https://qiita.com/tanabee/items/9c074741418a1789dfde)
- [3 分で作る無料の翻訳 API with Google Apps Script](https://qiita.com/tanabee/items/c79c5c28ba0537112922)
- [社内メンバーの Qiita 新着投稿を Slack で共有するスクリプトを GAS で作った話](https://qiita.com/tanabee/items/665917d9ab976661115c)
JavaScript(Electron)でCSVファイルの読み込み、CSV→JSONの変換をスマートに行う

## #1 tl;dr
- ElectronにてCSVのparseを行う時にcsv-parseモジュールを用いる
- 使う機会はあまりないかもしれないが、CSVからJSONにいい感じにしてくれる

## #2 install package
csv-parseモジュールはcsvモジュールに含まれる一つのモジュールであるため、
ただparseを行うだけであれば
`$ npm install --save csv-parse`
[参考：csv.js.org](https://csv.js.org/parse/)


他のCSVファイルの操作(書き込みなど)も行いたい場合は以下をする
`$ npm install --save csv`

## #3 読み込むCSV

今回はヘッダー付きのCSVファイルを用いる。
ヘッダー無しでも可能。

```CS:move_log.csv
time,x0,y0,x1,y1,x2,y2
0:00:00,0,0,10,20,20,40
0:00:01,0,0.1,10,20.1,20,39
0:00:02,0,0.2,10,20.2,20,38
0:00:03,0,0.3,10,20.3,20,37
```

## #4 変換
- 2行目のモジュールでerrorが出る場合(昔のversionを使う環境の場合)はrequireの部分をrequire("csv-parse")または"csv-parse"をimportしてください(2行目を消して3行目のコメントアウトを外してみて下さい)

```Javascript
const fs = require("fs");
const csv = require("csv-parse");
//const csv = require("csv-parse/lib/es5");

fs.createReadStream(__dirname + '/move_log.csv')
	.pipe(csv({
		columns: true //header無しのCSV fileはfalse
	}, function (err, data) {
		data = JSON.stringify(data);
		data = JSON.parse(data);

	console.log(data);

	}));

```


`$ npm install --save csv`
を行った人は以下となる

```Javascript
const fs = require("fs");
const csv = require("csv");

fs.createReadStream(__dirname + '/move_log.csv')
	.pipe(csv.parse({
		columns: true //header無しのCSV fileはfalse
	}, function (err, data) {
		data = JSON.stringify(data);
		data = JSON.parse(data);

	console.log(data);

	}));

```

## #5 出力
```
[ { 'time': '0:00:00',
    x0: '0',
    y0: '0',
    x1: '10',
    y1: '20',
    x2: '20',
    y2: '40' },
  { 'time': '0:00:01',
    x0: '0',
    y0: '0.1',
    x1: '10',
    y1: '20.1',
    x2: '20',
    y2: '39' },
  { 'time': '0:00:02',
    x0: '0',
    y0: '0.2',
    x1: '10',
    y1: '20.2',
    x2: '20',
    y2: '38' },
  { 'time': '0:00:03',
    x0: '0',
    y0: '0.3',
    x1: '10',
    y1: '20.3',
    x2: '20',
    y2: '37' }]
```

## #6 補足

- Node.js
    - v10.11.0
- npm
    - 5.2.0
- electron
    - v4.1.4
Chromeの文字化けに困った時


デベロッパーツールのconsoleが文字化けしていたので、
その対処方法をまとめます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88533/4ca677cd-e7b0-738b-fa68-e06bbdd77e3a.png)


## 1. 拡張機能を追加
[ここ](https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae?utm_source=chrome-app-launcher-info-dialog)から、
テキストエンコーディングをダウンロード。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88533/95f57663-7f95-726a-a994-748fe856c373.png)


## 2. 該当ページで右クリックしてテキストエンコーディングを変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88533/3e931861-c8c4-0afd-5cea-29161611fb8c.png)

## 3.ページを更新

Control + Shit +R　でキャッシュ削除でページを更新すると、
日本語が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88533/c83073cb-ccb4-5fb5-80ce-03292d3f975a.png)
VBS(VBA)のExcel操作でセルをコピーした時に表示形式が勝手に変わる現象


自分が困ったのでメモ

##動作環境
Windows7 Professional
Excel2013
VBScript 5.8

##ブックのコピーをしてみる
シートごとコピーする場合

```Copy1.vbs
Option Explicit
Dim xl
Dim NewBook
Set xl = CreateObject("Excel.Application")

With xl.WorkBooks.Open("C:\test\コピー元.xlsx")
    'ブックをコピーする
    .Sheets.Copy
End With

'表示する
xl.Application.Visible = true
'参照の削除
Set xl = Nothing
```

8,9,13,14行目の書式が変わってる...
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340597/23d11d05-31c3-95cb-6193-5de88b9683c8.png)

どうやらマイナス表記が括弧付きかつ桁区切りの場合が勝手に変わってしまう模様。




###Copyメソッド以外でコピーしてみる
セルの値を張り直してみる

```Copy2.vbs
Option Explicit
Dim xl
Dim NewBook
Set xl = CreateObject("Excel.Application")

With xl.WorkBooks.Open("C:\test\コピー元.xlsx")
    'ブックをコピーする
    .Sheets.Copy

    'シートの値をコピーする
    Set NewBook = xl.Workbooks(2)
    'シートの追加
    Call NewBook.Sheets.Add
    '使用しているセルをコピー
    .Sheets(1).UsedRange.Copy
    '書式、値すべて貼り付け
    NewBook.Sheets(1).Range("A1").PasteSpecial(-4104)

End With

'コピー中状態を解除
xl.CutCopyMode = false
'表示する
xl.Application.Visible = true
'参照の削除
Set xl = Nothing
```

セルの値を張り直しても結果は同じでした。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340597/23d11d05-31c3-95cb-6193-5de88b9683c8.png)


##解決策1
マイクロソフトが解決策を提示してました。
VBAでも発生するようです。
https://support.microsoft.com/ja-jp/help/956331

書式をユーザー定義にして、「#,##0;[赤]\(#,##0)」のように設定すればコピー時に不備は発生しないみたいです。

##解決策2
Excel側の書式を触ることが出来ない場合、NumberFormatLocalをコピー元から1セルずつ移植することで、一応対応できます。
但し、滅茶苦茶重いです。

```Copy3.vbs
Option Explicit
Dim xl
Dim NewBook
Set xl = CreateObject("Excel.Application")

With xl.WorkBooks.Open("C:\test\コピー元.xlsx")
    'ブックをコピーする
    .Sheets.Copy

    'シートの値をコピーする
    Set NewBook = xl.Workbooks(2)

    Dim copySheet
    Dim copyRange
    '使用しているセルをコピー
    For Each copySheet In .Sheets
        For Each copyRange In copySheet.UsedRange
            '書式を貼り付け
            NewBook.Sheets(copySheet.Name).Range(copyRange.Address).NumberFormatLocal = copyRange.NumberFormatLocal
        Next
    Next
End With

'コピー中状態を解除
xl.CutCopyMode = false
'表示する
xl.Application.Visible = true
'参照の削除
Set xl = Nothing
```

うまくいきました
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340597/5d48c10a-4d37-25c7-3375-ae409bfadd38.png)

##まとめ
基本的にはマイクロソフトの出している解決策で対応しましょう。
どうしてもExcelの書式を触れない場合は、無理やり書式だけ移していく方法が取れますが、滅茶苦茶重いのでお勧めはできないです。
macOS にns3.28.1をインスール（./waf）する方法について

# インスールするとエラーが発生
今回はmacにns3をインストールしてみたいと思います
環境はmacos10.14.1にns3.28.1をinstallしますがエラーたくさんでてきます。
なので対策方法をここに記載しますので、よかったらみてください。

```
./waf configure
./waf
と実行するとなにかエラーがでてくる可能性がある。
```
エラーだったり、warningだったりたくさんでます。

##解決方法1
[公式HP](https://www.nsnam.org/wiki/Ns-3.29-errata)のissueに解答が載っていた
なのでconfigureのパラメータを変更

```
./waf configure --disable-werror --enable-examples --enable-tests
./waf
```
warningがたくさん出ると思いますがインストールできるので試してみてください。
##解決方法2
解決方法1でもgccのコンパイラの違いによってエラーがおきます。なのでこっちの方法を試すのが一番安心だし安全だと思います。
環境壊したくないよ不安だよって人は解決方法1で我慢してください笑

macではc＋＋のコンパイラに特殊なものを使うみたいでbrewで別にgccをインストールしそっちを使うとエラーなどはでてきません。

##手順
1. homebrewでgccをインストール
2. ./waf configure

###homebrewでgccをインストール

```bash
#gccインストール
brew install gcc
#gccのバージョン確認
brew info gcc
gcc: stable 9.1.0 (bottled), HEAD //stable 9.1.0がバージョンを示す
```

###./waf configure
バージョンに合わせて-xの数字の値を変更

```bash
CXX=g++-9 CC=gcc-9 CFLAGS="-g" ./waf configure  --enable-tests --enable-examples --disable-python
./waf
```



#おまけ
ns3に関する記事はたくさん書く予定なのでよろしくおねがします。

ns3のプログラミングをするにはデバックも必要になってくると思います。自分で書いた内容ではありませんが
『[macOS Mojave+Eclipse+gdbでハングする現象を解消](http://asamomiji.jp/contents/fix-the-phenomenon-that-hangs-in-macos-mojave-eclipse-gdb)』を参考にインストールすれば動くと思いますのでよかったらどうぞ

私はns3の開発には、vscodeを使っています。
コードを補完してくれるので控えめに言って最高です。よかったら試してみてください


#参考にしたサイト
https://qiita.com/wawawa/items/50c2c612b0937f28d92b
https://stackoverflow.com/questions/52141274/install-ns-3-on-mac-problems
eslint-plugin-importでTypeScriptのimport問題を解決する

JavaScript→TypeScript化してる中で詰まったのでメモ。
（JavaScriptとTypeScriptが混在してるプロジェクト）

## 事象
こういうやつ :point_down: 

```zsh
$ eslint app/javascript/components

/path/to/app/javascript/components/Container/Foo/index.js
  5:25  error  Unable to resolve path to module '../../../Bar'  import/no-unresolved
  5:25  error  Missing file extension for "../../../Bar"        import/extensions

✖ 2 problems (2 errors, 0 warnings)
```

## 解決

- `import/no-unresolved`はwebpackを使ってるので [eslint\-import\-resolver\-webpack](https://www.npmjs.com/package/eslint-import-resolver-webpack) を使う。
- `import/extensions`は、設定を修正する。

プラグインを追加して、

```sh
yarn add -D eslint-import-resolver-webpack
```

設定ファイルに追記します。

```diff:.eslintrc
{
  "rules": {
+    "import/extensions": [".js", ".jsx", ".json", ".ts", ".tsx"],

...

+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  }
} 
```

以上です :hugging: 

## 参考
- [TypeScript \+ eslint で import/no\-unresolved が出る場合の2つの対処法 \- Qiita](https://qiita.com/euxn23/items/e2b9226ab1e02a9b1f20)
- [import/resolver webpack typescript missing extension error · Issue \#1116 · benmosher/eslint\-plugin\-import](https://github.com/benmosher/eslint-plugin-import/issues/1116)
ApacheでAliasを切ったパス配下で、特定のエンドポイントだけを例外的に任意ローカルフォルダへマッピングする

#ApacheでAliasを切ったパス配下で、特定のエンドポイントだけを例外的に任意ローカルフォルダへマッピングする

Aliasのネスト的なアプローチがあるのかしらと思ったけど、できずに手こずったのでメモ。

調べたところ、RewriteRuleのリダイレクト記法において、ローカルファイル・ディクトリを指定し、かつそれが存在する場合は、HTTPリダイレクトでなくファイルマッピング的動作をする模様。
Aliasを既に使用している場合はRewriteに頼るほかないらしい。

##要件例

1. サイトのコンテンツの置き場所は基本的に/var/www/site1
2. /special以下のURLのみ、/var/www/site2にコンテンツ配置
3. 上記に加えて更に/special/randing.htmlのみ/var/www/randing.htmlを参照


##設定例
```apache:/etc/httpd/conf/httpd.conf
#大元の設定
DocumentRoot /var/www/site1
Alias /special /var/www/site2

#追記
RewriteEngine on
RewriteCond %{REQUEST_URI} ^/special/randing.html$
RewriteRule ^(.*)$ /var/www/randing.html [L]

#他の設定と干渉してしまう場合等あれば下記も追記
<Files /var/www/randing.html>
    Require all granted
</Files>
```

上記で/var/www/site2/randing.htmlではなく、/var/www/randing.htmlに配置されたコンテンツがレスポンスされる。
【CSS】nth-of-type(), nth-child()の順番指定でのハマりポイント

```pug
.p-top
.p-sec
.p-sec
.p-sec
```

上記のような状況で、 `p-sec`という連続の要素を順番指定したいとき、

同階層に違う要素が `p-top`があった場合、`.p-top`をカウントしてしまい、最初の`p-sec`が 2番目、という扱いになってしまう。


これを防ぐためには

```pug
.p-top
.p-secWrap
	.p-sec
	.p-sec
```

というように、カウントしたい要素のみが同階層になるように、wrapしてあげる。
WordPressで記事のカテゴリーごとに投稿を表示する

# 前置き
最近話題のWordPressですが何故か自分も触れる機会が増えてきたので備忘録として

## 環境
- macOS Mojave
- Docker for Mac
- WordPress 5.2
- PHP7.3

## 表示したい内容

```
Hogeカテゴリーの投稿一覧
・Hoge1
・Hoge2
・Hoge3
Fugaカテゴリーの投稿一覧
・Fuga1
・Fuga2
・Fuga3
```


## コード

適当なテンプレートに以下のコードを記述してテンプレートを適用する。

```php
<?php 
$categories = get_categories();
foreach ($categories as $category) {
    $wpb_all_query = new WP_Query(
      array(
        'cat' => $category->cat_ID,
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => -1)
    );
    ?>
    <section class="xxx">
      <div class="yyy">
        <?php echo $category->cat_name; ?>カテゴリーの投稿一覧
    	<?php while ($wpb_all_query->have_posts()): $wpb_all_query->the_post();?>
        <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>
	    <?php endwhile;?>
	  </div>
	</section>
<?php } ?>
```

## その他

WordPressだとarrayを省略して書かないことが多いのは何故...?
Firebaseの認証情報をHeroku環境変数に登録してNodeアプリで使う

#Heroku環境変数を登録する
GitHubのプロジェクトをHerokuでbuildして運用する場合、firebaseの認証情報はGitHubに上げられないので、Heroku環境変数に登録して使う。
事前にfirebaseで秘密鍵を生成してダウンロードしておく（プロジェクト -> プロジェクトの設定 -> サービスアカウント -> 新しい秘密鍵の生成）
Heroku環境変数への登録が必要なのは以下の3つ

- projectId
- clientEmail
- privateKey

```
heroku config:set PROJECT_ID="<PROJECT_ID>" --app アプリ名
heroku config:set CLIENT_EMAIL="foo@<PROJECT_ID>.iam.gserviceaccount.com" --app アプリ名
heroku config:set PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n<KEY>\n-----END PRIVATE KEY-----\n --app アプリ名
```

# NodeアプリからHeroku環境変数を呼び出す
Firebase SDKの初期化の際、下記のようにして呼び出す。
このときprivateKeyの改行を置換しないと、Herokuのbuildが通らないので注意。

```
admin.initializeApp({
  credential: admin.credential.cert({
    projectId: process.env.FIREBASE_PROJECT_ID,
    clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
    privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n')
  }),
  databaseURL: `https://${process.env.FIREBASE_PROJECT_ID}.firebaseio.com`
});
```