
## 作ったもの

https://github.com/mijime/markdown-editor

ダウンロードすればオフラインでも使えるマークダウンエディタを作りたかった

---

## 使ってよかったもの

## Rehype, Remark

- https://github.com/wooorm/rehype
- https://github.com/wooorm/remark

HTML や Markdown を AST に変換してくれる。

Marked が String を既にがっちゃんこ状態で投げてくるので
dangerouslySetInnerHTML を使わざるえない影響が出てくる。

そういうときは上の Rehype, Remark で AST に変換してから React コンポーネントにするアプローチが良さげ。

react-markdown ていうのもあったけど commonmark に準拠してるらしく、テーブルの変換ができなかったので諦めた。
あと commonmark が割と容量食ってたのもある。

remark-react を使わなかったのは highlight 系のライブラリをかます必要があったのと
`markdown -> html -> react` の流れのほうが拡張しやすく感じた。
絵文字対応もさくっといけたし。

なんかやるとき、もしくはデンジャラスなコードを強要されたときはまた使ってみたい。

ただ、 marked の方が軽量ではあったので、1 回きりの表示なら marked のほうが断然良さそう。

## Prism.js

- http://prismjs.com/

highlight.js を Minify すると中身が飛びでて辛いときに使ったやつ。

プロセッサも分かれてるのでそのまま rehype に流せた。

プラッガブルでなかなかに軽量なので、おすすめしていきたい。

## Preact

- https://preactjs.com/

React がでかすぎたので使って見た。

webpack-bundle-size-anlyzer をつかってサイズを比較した。

ReactDOM + React が 500+kb なのに対し、 Preact + Preact-compat が 35kb 前後？良い。

React-Redux は普通に使えたので、 問題はなかった。 React-helmet とか React-router 周りはまだ試していない。
ただ、Preact-helmet や Preact-router とかあるし、なんだかんだでまた使えそう。

dio.js とかも同様も簡単に乗り換えられるか試したけど、 Preact-compat はだいぶ頑張っているのが分かっただけだった。

Jest や StyleGuidist なんかが React を強要するので、 Webpack でビルド時のみ差し替える運用にした。

## milligram

- https://milligram.github.io/

マークダウンプレビューとしては綺麗に表示できるので、
みんな Github.css から乗り換えるべきだと思う。軽量ですし。

ただ、シンプルなコンポーネントしかないので
UI が複雑になってきたなら Material なんちゃら系の方が良さそう、とは思う

---

## 見送ったもの

## highlight.js

みんな言語絞って使ってるくさい。最初、何度圧縮してもクソでかくて不思議だった。
言語によっては圧縮時に飛び出る。 と思ったけど browserify 使った時は問題なさそう。. だった？

使うのやめた。

## CodeMirror

重量がなかなかあったので、採用を見送った。 vim mode 試したかった。

もっと軽量なエディタがあれば選択肢に入れたかったので、あとで探す。

---

## React.setState

React の setState は使わずに pure component だけで構成したかったので。

非同期に描画してコンポーネント内だけで完結するなら、 state を使って書いた方が切り出しやすかった。

## Flow

今回は頑張って Flowtype に立ち向かってみた。 Flow-jsdoc で JSDoc と同期をとりつつ、みたいなことを実現したかったが、
type 周りが対応してなかったので結局 flow-comment をちりばめながら書くはめになった。

あと、flow さんって commonjs スタイル読み取ってくれないのが一番のショックだった。
その他にも、他のライブラリの \*.flow にビンビン反応していくのもちょいちょい辛い。



## 作ったもの

https://github.com/mijime/markdown-editor

ダウンロードすればオフラインでも使えるマークダウンエディタを作りたかった

---

## 

ReactでMarkdownEditorを作ったかんそう


## AWS Lambda を管理するツール Lamma やってみた

Ruby で書かれた lammba というリポジトリが上がったので
ruby 勉強会に参加がてら触ってみた

### [lamma](https://github.com/ayemos/Lamma)

### 作業リポジトリ

[source](https://github.com/mijime/mijime.github.io/tree/content/source/study/kanazawa.rb/2016-06-18)

### 作業雑感

シンプルな Lambda 管理ツール

#### Pros

- 1 dir, 1 func なのでわかりやすいね
- 勝手に zip してくれるね
- Ruby なので今後拡張しやすい、のかな？

#### Cons

- nodejs, python2.7 のみ対応
- 消したりするのめんどくさそう ... まぁ関数だけだからいいんだけども ...
- node_modules 入ってない？

### 作業ログ

まずは環境作成

```ruby
source "https://rubygems.org"

gem "lamma"
```

```
FROM ruby

COPY Gemfile /var/app/Gemfile
WORKDIR /var/app
RUN bundle install
```

```
---
version: '2'
services:
  app:
    build: .
    command: sleep 3600
    environment:
      AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
      AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
    volumes:
      - ./scripts:/var/app/scripts
```

とりあえずインストールして実行してみる

AWS 関連の情報を渡して ...

```
eval $(cat ~/.aws/credentials | awk -v FS=" = " '$1~/^aws/{print "export",toupper($1)"="$2}')
```

関数を作成してみる

```
lamma create scripts/my-function-1 --runtime python2.7

Creating function at directory ./scripts/my-function-1.
bundler: failed to load command: lamma (/usr/local/bundle/bin/lamma)
NoMethodError: undefined method `match' for nil:NilClass
Did you mean?  catch
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:67:in `block in partition_matching_region'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:66:in `each'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:66:in `find'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:66:in `partition_matching_region'
...
```

うーん ... なぜに nil ...

AWS_REGION を渡す

```diff
diff --git a/source/study/kanazawa.rb/2016-06-18/docker-compose.yml b/source/study/kanazawa.rb/2016-06-18/docker-compose.yml
index e03b010..2784d3c 100644
--- a/source/study/kanazawa.rb/2016-06-18/docker-compose.yml
+++ b/source/study/kanazawa.rb/2016-06-18/docker-compose.yml
@@ -7,5 +7,6 @@ services:
     environment:
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+      AWS_REGION: ap-northeast-1
     volumes:
       - ./scripts:/var/app/scripts
```

```
$ lamma create my-function --runtime python2.7

Creating function at directory ./my-function.
Done.
```

```
$ tree .

my-function
  ├── lambda_function.py
  └── lamma.conf

1 directory, 2 files
```

まだこの時点で関数は作られていないみたい ... なんで AWS 認証求められたんだ

deploy してみる。

```
$ lamma deploy test

Loading configuration.
Done.
bundler: failed to load command: lamma (/usr/local/bundle/bin/lamma)
Aws::Lambda::Errors::BadRequest:
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/seahorse/client/plugins/raise_response_errors.rb:15:in `call'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/plugins/param_converter.rb:20:in `call'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/seahorse/client/plugins/response_target.rb:21:in `call'
```

うーん ... ?

よくわからないので JS で作り直す

```
$ lamma create my-function-js --runtime nodejs

Creating function at directory ./my-function-js.
Done.
```

```
$ lamma deploy test

Loading configuration.
Done.
Function 'my-function-js' doesn't seem to be exists.
Do you want to create new function 'my-function-js' ? (y/n) y
Creating function 'my-function-js' ...
bundler: failed to load command: lamma (/usr/local/bundle/bin/lamma)
Errno::ENOENT: No such file or directory @ rb_sysopen - /tmp/d20160618-92-1fppw7/lambda.zip
  /usr/local/bundle/gems/lamma-0.1.1/lib/lamma/function.rb:57:in `initialize'
...
```

zip ...

```diff
diff --git a/source/study/kanazawa.rb/2016-06-18/Dockerfile b/source/study/kanazawa.rb/2016-06-18/Dockerfile
index f9e4aff..0595f36 100644
--- a/source/study/kanazawa.rb/2016-06-18/Dockerfile
+++ b/source/study/kanazawa.rb/2016-06-18/Dockerfile
@@ -3,3 +3,4 @@ FROM ruby
COPY Gemfile /var/app/Gemfile
WORKDIR /var/app
RUN bundle install
+RUN apt-get update && apt-get install -y zip
```

```
$ lamma deploy test

Loading configuration.
Done.
Function 'my-function-js' doesn't seem to be exists.
Do you want to create new function 'my-function-js' ? (y/n) y
Creating function 'my-function-js' ...
adding: lamma.conf (deflated 17%)
adding: index.js (deflated 45%)
ArgumentError occured. You might need to specify role arn you want to pass to your function via 'lamma.conf' file or ENV['AWS_LAMBDA_IAM_ROLE'].
Done.
```

ほむほむ ... あんましロールを書きたくないので env で

```
export AWS_LAMBDA_IAM_ROLE=arn:aws:iam::000000000000:role/lambda_basic_execution
```

```
$ lamma deploy test

Loading configuration.
Done.
Function 'my-function-js' doesn't seem to be exists.
Do you want to create new function 'my-function-js' ? (y/n) y
Creating function 'my-function-js' ...
adding: lamma.conf (deflated 17%)
adding: index.js (deflated 45%)
Done.
Setting aliases.
Done.
```

```
$ lamma list-functions

my-function-js
```

できた。

## LT 感想

### シェルチェックを使おう

- 文法がバラバラなので統一する
- 各環境でパッケージとして提供されている

確かにシェルは動かすの簡単だけど、 他の環境で動かないことが多い ...

### shUnit2 を使おう

- 対応シェルも幅広い
- ダウンロードするだけで使える！

bats 派だけど、 msys でも早いなら乗り換えたいかも

### Dokku

- Heroku like
- 前面に nginx があって、 コンテナにルーティング
- heroku の build packs も利用できるので良い！
- 運用メンテナンスが気になるところ

スケーリングしないとかで敬遠してたけども、 開発環境で利用するなら楽だよなぁ

だいぶバージョンアップされているとのことなので、触ってみたい

もっと利用されるという話なので、その話を聞いてからかな？

dokku-alt との違いもあとで調べておこう ...

### AWSSummit

SIer が完全に淘汰されちゃう感じ

PaaS, SaaS の流行には全然触れてなかったので、 今回の話を機会に調べてみよう ...

### Iot

書き込むのに結構ツールが必要なんですね ...

IOT 超絶敷居高い。



## AWS Lambda を管理するツール Lamma やってみた

Ruby で書かれた lammba というリポジトリが上がったので
ruby 勉強会に参加がてら触ってみた

### [lam

 kanazawa.rb meetup 46に参加した


code.language-mermaid を変換するスクリプトを噛ませただけだけど。

```mermaid
  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```mermaid
  gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task: done,   des1,       2014-01-06, 2014-01-08
    Active task:    active, des2,       2014-01-09, 3d
    Future task:    des3,   after des2, 5d
    Future task2:   des4,   after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06, 24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
```

```mermaid
  sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
    John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
```



code.language-mermaid を変換するスクリプトを噛ませただけだけど。

```mermaid
  graph TD;
    A-->B;
    A-->C;
    B-->D

mermaidに対応した


他のブログを参考にすると関連記事というのを最後に表示しているらしい。

まだ記事の数は少ないけど、ある程度近い記事を探すことができるようにする。

### 類似度の取得

"MeCab" + "類似" でググったら、コサイン類似度なるものがあるとのこと。

- [コサイン類似度](http://www.cse.kyoto-su.ac.jp/~g0846020/keywords/cosinSimilarity.html)
- [TF-IDF Cos 類似度推定法](http://qiita.com/nmbakfm/items/6bb91b89571dd68fcea6)

このブログは js + hugo で書いているので、
[kuromoji](https://www.npmjs.com/package/kuromoji) のラッパー
[kuromojin](https://www.npmjs.com/package/kuromojin) を使って形態素解析する。

### コード解説

[コード全体](https://github.com/mijime/mijime.github.io/blob/content/source/js/similarity/index.js)

テキストを分解して、 単語と出現回数を記録する。

```javascript
async function parseVector(text) {
  const tokens = await tokenize(text)
  return tokens.reduce((acc, next) => {
    if (!isTargetToken(next)) {
      return acc
    }

    if (acc[next.surface_form]) {
      acc[next.surface_form]++
    } else {
      acc[next.surface_form] = 1
    }

    return acc
  }, {})
}
```

出現回数を数えるのは名詞で 3 文字以上の単語のみ。

```javascript
function isTargetToken(token) {
  return (
    token.pos === '名詞' &&
    token.surface_form.length >= 3 &&
    (token.basic_form !== '*' || token.surface_form.match(/^[\wA-Z]+$/))
  )
}
```

あとは計算しておしまい。

```javascript
function cosineSimilarity(curr, next) {
  const currKeys = Object.keys(curr)
  const nextKeys = Object.keys(next)
  const keys = currKeys
    .concat(nextKeys)
    .filter((v, i, self) => self.indexOf(v) === i)

  const baseScore = keys
    .map(k => (curr[k] || 0) * (next[k] || 0))
    .reduce((acc, c) => acc + c, 0)

  const currScore = keys
    .map(k => (curr[k] ? Math.pow(curr[k], 2) : 0))
    .reduce((acc, c) => acc + c, 0)

  const nextScore = keys
    .map(k => (next[k] ? Math.pow(next[k], 2) : 0))
    .reduce((acc, c) => acc + c, 0)

  const score = baseScore
    ? baseScore / (Math.sqrt(currScore) * Math.sqrt(nextScore))
    : 0
  const words = keys.filter(k => curr[k] && next[k])
  return { score, words }
}
```

### 実行結果

うーん、全然関係ない単語でしか一致しない。その通りではあるんだけど。

```
babel-node source/js/similarity "content/posts/js/cosine-similarity.md" "content"

25.26%  content\posts\2016-05-23\github-cli.md  com, https, mijime, github
0%      content\posts\2016-05-26\border-implement.md
0%      content\posts\2016-05-26\ci-is-difficult.md
0%      content\posts\blog\first-blogged.md
0%      content\posts\hugo\code-mermaid.md
20.9%   content\posts\hugo\hugo-deploy.md       branch, content
100%    content\posts\js\cosine-similarity.md   100, 2016, 89571, MeCab, コサイン
9.93%   content\posts\blog\blog-of-policy.md    branch, posts, slides
1.98%   content\posts\hugo\hugo-pagination.md   html, pagination
3.52%   content\slides\2016-05-27\my-first-slide.md     html
```



他のブログを参考にすると関連記事というのを最後に表示しているらしい。

まだ記事の数は少ないけど、ある程度近い記事を探すことができるようにする。

### 類似度の取得

"MeCab" + "類似

My snippets

ReactでMarkdownEditorを作ったかんそう

kanazawa.rb meetup 46に参加した

mermaidに対応した

関連記事を探す

ブログの方針