---
title: サンドボックス　自由に編集できるページ
tags: Templates
---

# サンドボックス　自由に編集できるページ

## このサイトの編集について
誰もでも編集できるようにしていますが、ユーザーアカウントを作成しての編集を推奨します。基本的にはmarkdownの記法が使えます。詳細は[機能紹介のテンプレート](https://hackmd.io/features-jp)や[チュートリアル](https://hackmd.io/c/tutorials/)を参照。

## 編集する

## 表組について
> 表はatomかvscodeのmarkdownの表に対応したプラグインを使うと編集が楽かと思います。エクセルからのコピペや、カンマ区切りのテキストをmarkdownの表に変換してくれるものがあります。
> [Excelからmarkdown形式に変換してくれるサイト](http://www.tablesgenerator.com/markdown_tables)

## 保存できるの？

## ここから練習スペース

markdownの文法のチェックや、その他何でも確認用に自由に編集できるページです。

フローチャート2

graph LR
    A{"酸素が必要か？"} 
    A -->|Yes| B["酸素吸入,CPAP,NIV"]
    A -->|No| D[Result two]
    
    B --> C{"侵襲的機械換気（人工呼吸器）</br>が必要か？"}
    
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

## Vega-Liteによる表現　感染者数と致死率の散布図

hackmdではVega-Liteを使用でき、インタラクティブなグラフをcsvやjsonのデータから生成することができる。ここではCOVID-19の感染者数と致死率をグラフにしてみた。国名をマウスオーバまたはタップすると元のjsonファイルから個々の数値を参照出来る。感染者数は比較のため対数スケールとした。リファレンスとして中国の致死率（CFR）3.8%ラインを表示。データのソースは例によってテンセントの統計ページから。100人以上の感染者、死者の出ているイギリスまでをピックアップ。

Vega-Lite　Overview
https://vega.github.io/vega-lite/docs/
Vega Editor
https://vega.github.io/editor/

{
  "title": {"text": "COVID-19感染者数と致死率の散布図　2020/3/8", "fontSize": 20},
  "width": 600,
  "height": 650,
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/kenmomd/covid19/master/test/deathrate_jpn.json"
  },
  "transform": [{"calculate": "100*datum.death_rate", "as": "death rate (%)"}],
  "layer": [
    {
      "mark": "rule",
      "data": {"values": {"y": 3.8}},
      "encoding": {
        "y": {"field": ""},
        "color": {"value": "red"},
        "size": {"value": 2}
      }
    },
    {
      "mark": {"type": "text", "fontSize": 16, "angle": 0, "tooltip": {"content": "data"}},
      "encoding": {
        "x": {
          "field": "cases",
          "type": "quantitative",
          "scale": {"type": "log"},
          "axis": {"title": "感染者数", "titleFontSize": 18, "labelFontSize": 14}
        },
        "y": {
          "field": "death rate (%)",
          "type": "quantitative",
          "axis": {"title": "致死率（％）", "titleFontSize": 18, "labelFontSize": 15}
        },
        "text": {"field": "country", "type": "nominal"}
      }
    }
  ]
}

---
円グラフサンプル

pie title プロダクトへのコミット数
  "Jumeaux": 946
  "Miroir": 661
  "OwlMixin": 504
  "Owlora": 428
  "owcli": 161
  "Gowl": 104
  "togowl": 85
  "Slackego": 32

---
シーケンス図

Note right of 時間軸: 未来形
Note left of 時間軸: 過去形
Note over 時間軸: 現在進行形

---
フローチャート

st=>start:  |flow-terminal
e=>end:  |flow-terminal
op1=>operation: 入力値の
サニタイズ|flow-ope1
op2=>operation: データベース
の値を更新|flow-ope2
sub1=>subroutine: エラー処理|flow-err
cond=>condition: 不正な入力値
がないか？|flow-cond1
c2=>condition: 入力値のnが
1であるか？|flow-cond2
io=>inputoutput: ログファイルに
入力値を追記|flow-io

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

---

---

https://qiita.com/rubytomato@github/items/51779135bc4b77c8c20d

digraph node_sample {
  //graph settings
  graph [
    charset = "UTF-8";
    label = "node simple",
    labelloc = "t",
    labeljust = "c",
    bgcolor = "#343434",
    fontcolor = white,
    fontsize = 18,
    style = "filled",
    rankdir = TB,
    margin = 0.2,
    nodesep = 0.5,
    ranksep = 0.8,
    compound = true
  ];
  // node common settings
  node [
    colorscheme = rdylgn11,
    fontname = "Migu 1M",
    color = 7,
    fontsize = 12,
    fontcolor = 6,
    fillcolor = 11,
    margin = 0.05,
    style = "solid,filled"
  ];
  edge [
    color = white
  ];

  subgraph cluster_0 {
    label = "clu0";
    labelloc = "t";
    labeljust = "l";
    fillcolor = "#ababab";

    alpha [label = "alpha", shape = box];
    beta [label = "beta", shape = box];
    gamma [label = "gamma", shape = box];
    eta [label = "eta", shape = box];

    alpha -> beta;
    alpha -> gamma;
    alpha -> eta;
  };

  subgraph cluster_1 {
    label = "clu1";
    labelloc = "t";
    labeljust = "l";
    fillcolor = "#ababab";

    delta [label = "delta"];
    epsilon [label = "epsilon"];
    zeta [label = "zeta"];
    theta [label = "theta"];

    delta -> epsilon;
    delta -> zeta;
    delta -> theta;
  };

  subgraph cluster_2 {
    label = "clu2";
    labelloc = "t";
    labeljust = "l";
    fillcolor = "#888888";

    lambda [label = "lambda", shape = "octagon"];
    mu [label = "mu", shape = "octagon"];

    lambda -> mu;
  };

 subgraph cluster_3 {
    label = "clu3";
    labelloc = "t";
    labeljust = "l";
    fillcolor = "#888888";

    nu [label = "nu", shape = "trapezium"];
    xi [label = "xi", shape = "trapezium"];

    nu -> xi;
  }

  subgraph sg {
    iota [label = "iota", shape = "Mdiamond" ];
    kappa [label = "kappa", shape = "Mdiamond"];
    iota -> kappa;
  };

  alpha -> delta;
  beta -> lambda [weight = 3];
  gamma -> lambda;
  epsilon -> nu;
  eta -> mu;
}

これはすごい！

## mermaidの他の例

graph TD
    1(開始) --> 2{A or B or C?}
    2 --> A
    2 --> B
    2 --> C
    C -.->|振り出しに戻る| 1

sequenceDiagram
    会社A->>  元受け: 見積りしてください
    元受け->> 下請け: 見積りしてください
    下請け-->>元受け: 要件ください
    元受け->> 下請け: 多分こんな感じ
    下請け-->>元受け: 分かった！見積りつくります！
    会社A->>  元受け: 要件はこれです！
    元受け->> 下請け: やっぱり要件はこれで！
    Note right of　下請け: マジか！！！
    下請け-->>元受け: 見積りです
    Note over 元受け: ちょっと上乗せして
    元受け-->>会社A: 見積りです

## pdfのインライン表示

{%pdf https://www.megabank.tohoku.ac.jp/cms/wp-content/uploads/2020/03/ID38723.pdf %}

## 他のページのインライン表示

インラインというか、見出しまでシームレスに繋いでくれる。使えそう。

{%hackmd @covid19-kenmo/glossary %}

---
<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide

---

We have a collaborative session

please prepare laptop or smartphone to join!

---

## Who am I?

- Front-end developer
- VSCode :heart:
- I use tabs. :cat:

---

### 70% of our users are developers. Developers :heart: GitHub.

---

{%youtube E8Nj7RwXf0s %}

---

### Usage flow

---

digraph {
  compound=true
  rankdir=RL

  graph [ fontname="Source Sans Pro", fontsize=20 ];
  node [ fontname="Source Sans Pro", fontsize=18];
  edge [ fontname="Source Sans Pro", fontsize=12 ];


  subgraph core {
    c [label="Hackmd-it \ncore"] [shape=box]
  }
  
  c -> sync [ltail=session lhead=session]

  subgraph cluster1 {
     concentrate=true
    a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
    b [label="HackMD Editor"] [shape=box]
    sync [label="sync" shape=plaintext ]
    b -> sync  [dir="both"]
    sync -> a [dir="both"]
    label="An edit session"
  }
}

---

### Architecture of extension

---


---

## Content script

- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things

---

# :fork_and_knife:

---

<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>

- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event

---

# :bulb:

---

- Dead simple API
- Only cares about application logic

---

import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()

---

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

<br>

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

---

# :100: :muscle: :tada:

---

### Wrap up

- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:

---

### Thank you! :sheep:

You can find me on

- GitHub
- Twitter
- or email me

---
グローバルダイニング系列店

2020年12月26日にモンスーンカフェお台場において、害虫の混入した料理をお客様へ提供してしまう異物混入事故が発生しました。
https://archive.ph/tFhOJ