owned this note
owned this note
Published
Linked with GitHub
---
lang: ja
---
機能紹介
===
**[English version](/features)**
**[中文版](/features-tw)**
**[日本語版](/features-jp)**
**[:arrow_right: Check the source of this note :arrow_left:](/features-jp?both)**
**[Read the complete tutorial](https://hackmd.io/c/tutorials)**
もし通訳した日本語が間違って、変な表現等ありましたら
[@hackmdio](https://twitter.com/hackmdio) にメールしてください!
> 皆さん、通訳お手伝い本当にありがとうございます
> @jackymaxj @kl0809449 @nomuken @encry1024 @Schwarz_Sardine @K_atc @mic_psm
HackMDについて
===
<i class="fa fa-file-text"></i> **HackMD** はMarkdownで編集できるクロスプラットフォームのオンラインコラボレーションノートです。
**パソコン、タブレット、携帯など様々なプラットフォーム**からリアルタイムに共同で編集を行うことが出来ます。
HackMDはまだ開発中のため、問題が発生するかもしれません。
その際は、[GitHub](https://github.com/hackmdio/hackmd-io-issues/issues/new) からissueを報告してください。
もし、すぐに助けが欲しいのであれば [Facebook message](https://www.messenger.com/t/hackmdio) からでも構いません。
**利用して頂き、ありがとうございます!**
ワークスペース
===
## Modeについて
**Desktop & Tablet**
<i class="fa fa-pencil fa-fw"></i> Edit: 編集画面のみを表示します。
<i class="fa fa-eye fa-fw"></i> View: プレビュー画面のみを表示します。
<i class="fa fa-columns fa-fw"></i> Both: 編集画面とプレビュー画面の両方を表示します。
**Mobile**
<i class="fa fa-eye fa-fw"></i> View: 編集画面のみを表示します。
<i class="fa fa-pencil fa-fw"></i> Edit: プレビュー画面のみを表示します。
## 画像ファイルのアップロード
画像ファイルのアップロードは、カメラのアイコン<i class="fa fa-camera"></i> をクリックするか,
画像ファイルをエディタの画面に **ドラッグ・アンド・ドロップ** することで、記事に貼ることができます。
画像は自動的に HackMD にアップロードされるので心配する必要はありません。:tada:
:::info
:bulb: 無料ユーザーは1 MBまでの画像をアップロードできます。有料ユーザーは20 MBまでの画像をアップロードできます。
:::
## ノートの共有について
**編集可能**ノートとして共有したい場合は、URLをそのままコピーするだけです。
**読み込み専用**ノートとして共有したい場合は、<i class="fa fa-share-alt"></i> をクリックしてURLをコピーしてください。
## 保存方法
現在、**Dropbox** <i class="fa fa-dropbox"></i> への保存、拡張子 **.md** <i class="fa fa-file-text"></i> としてローカルへの保存が可能です。
## インポート方法
保存先と同様に、 HackMDでは **.md** <i class="fa fa-file-text"></i> のファイルと **Dropbox** <i class="fa fa-dropbox"></i> からのインポートに対応しています。
または、**クリップボード** <i class="fa fa-clipboard"></i> からもインポートできます。
インポートされた内容はプレビュー画面で**HTML**として解釈され、便利です :smiley:
## 権限
表示画面の上部右側に小さなボタンがあります。
このボタンから、ノートに対する権限を変えることが出来ます。
以下の中から一つを選択します。
| |オーナー<br>閲覧・編集|サインインしている<br>閲覧|サインインしている<br>編集|ゲスト<br>閲覧|ゲスト<br>編集|
|:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:|
|<span class="text-nowrap"><i class="fa fa-leaf fa-fw"></i> **Freely**</span> |✔|✔|✔|✔|✔|
|<span class="text-nowrap"><i class="fa fa-pencil fa-fw"></i> **Editable**</span> |✔|✔|✔|✔|✖|
|<span class="text-nowrap"><i class="fa fa-id-card fa-fw"></i> **Limited**</span> |✔|✔|✔|✖|✖|
|<span class="text-nowrap"><i class="fa fa-lock fa-fw"></i> **Locked**</span> |✔|✔|✖|✔|✖|
|<span class="text-nowrap"><i class="fa fa-umbrella fa-fw"></i> **Protected**</span> |✔|✔|✖|✖|✖|
|<span class="text-nowrap"><i class="fa fa-hand-stop-o fa-fw"></i> **Private**</span> |✔|✖|✖|✖|✖|
**ノートのオーナーのみが権限を変更可能なことに注意してください。**
## iframeの埋め込み
以下のようなコードを入力してください。
```xml
<iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe>
```
## [スライドモード](/slide-example):
特殊な構文を使うことによって、ノートをスライドとしてまとめることができます。`---`や`----`でノートを区切ることで、ページを切り替える境界線を定めることができます。そのあとは、**SlideMode** <i class="fa fa-tv"></i> をクリックしてスライドを生成してください。詳しい方法については上のリンクをクリックしてください。
## [ブックモード](/book-example):
特殊な構文を使うことによって、ノートを一冊の本としてまとめることができます。本のページにしたいノートを順番に並べたり、入れ子構造にしたりしてみてください。そのあとは、**BookMode** <i class="fa fa-book"></i> をクリックして本を生成してください。詳しい方法については上のリンクをクリックしてください。
ビュー
===
## 目次 (TOC; table of content)
TOCボタン <i class="fa fa-bars"></i> は画面右下にあります。
クリックすると現在の目次(TOC)が表示され、現在表示されているセクションは強調されます。
見出しレベル3 (h3) まで対応しています。
## パーマリンク
各見出しには自動的にパーマリンクが追加されます。
マーク <i class="fa fa-chain"></i> は、見出しにカーソルを合わせた時に見出しの右側に現れます。
クリックしてそこにアンカーを固定できます。
編集
===
## ショートカット
Sublime Textのような小気味よい動作と便利さがあります。
> 詳しくは[こちら](https://codemirror.net/demo/sublime.html)
## 自動補完
エディタはMarkdownの自動補完のヒントを与えます。
- 絵文字:`:`を打ってください
- コードブロック:` ``` ` と打った後に続けて文字入力してください <i style="display: none;">```</i>
- 見出し: `#` を打ってください
- リンク: `[]`を打ってください
- 外部コンテンツの埋め込み:`{}`を打ってください。詳細は[こちら](#externals)
- 画像:`!`を打ってください
## 題名
始めに現れた**最上位ヘッダ** (h1) が文書の題名として扱われます。
## タグ
タグを利用するには以下のように書いてください。
これらのタグは、トップページにあるあなたの **history画面** に表示されます.
###### tags: `機能紹介` `素敵` `更新`
## [YAML metadata](/yaml-metadata)
閲覧時の動作を定義するための情報を記述してください。詳細は上記リンクを参照してください。
- title: set note title
- description: set note description
- image: set note default image (for link preview)
- tags: set note tags
- robots: クローラに対するmeta情報
- lang: ノートの言語設定(日本語:`ja-jp`。デフォルトは`en`として動作)
- dir: 左揃え・右揃え
- breaks: 改行をハードブレイクにするかどうか(true/false)
- GA: set to use Google Analytics
- disqus: set to use Disqus
- slideOptions: setup slide mode options
## 絵文字
このように入力してください: :smile: :smiley: :cry: :wink:
> 全絵文字の一覧は[こちら](https://github.com/ikatyang/emoji-cheat-sheet)
## TODOリスト
- [ ] Todos
- [x] サラダを買う
- [ ] 歯を磨く
- [x] 何か飲む
## Code block
HackMDは非常に多くの言語をサポートしており、その言語のリストは自動補完で確認できます。
```javascript=
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
' class=""';
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
}
```
> **行番号** を表示するには、コードブロックで使われる言語を明示した後に `=` を入力してください。
> また,行番号のスタートを明示することも出来ます。
> 以下の例では101行目からスタートします。
```javascript=101
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
' class=""';
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
}
```
> `=+`を用いることで、一つ前のコードブロックに続けて行番号を振ることができます。
```javascript=+
var s = "JavaScript syntax highlighting";
alert(s);
```
> Sometimes you have a super long text without breaks. It's time to use `!` to wrap your code.
```!
When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back.
```
### Blockquotes タグ
> 以下のように、**氏名、日時、色**を明記することで、他の引用と区別して使用できます。
> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
> > また,入れ子も対応しています!
> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]
## Externals
### Youtube
{%youtube 1G4isv_Fylg %}
### Vimeo
{%vimeo 124148255 %}
### Gist
{%gist schacon/4277 %}
### SlideShare
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
### Speakerdeck
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}
### PDF
**Caution: this might be blocked by your browser if not using https url.**
{%pdf https://hackmd.io/pdf-sample.pdf %}
## MathJax
$\LaTeX$ 形式の数式を **MathJax** を利用して描画することが出来ます。詳しくは次のサイトを参考にしてください: [math.stackexchange.com](http://math.stackexchange.com/)。
**ガンマ関数** は $\Gamma(n) = (n-1)!$ を満たします。 $\quad\forall n\in\mathbb N$ はオイラー積分から定義されます。
For block level math, please give `$$` and a line break before and after your math formula:
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
> より多くの **LaTeX** の数式に関する情報は [ここ](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) をご覧ください。
## UML図
### シーケンス図
以下のようにシーケンス図を表示できます。
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?
```
### フローチャート
フローチャートもこのように表示できます。
```flow
st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?
st->op->op2->cond
cond(yes)->e
cond(no)->op2
```
### Graphviz
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Headteacher->{Deputy1 Deputy2 BusinessManager}
Deputy1->{Teacher1 Teacher2}
BusinessManager->ITManager
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}
```
### Mermaid
```mermaid
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d
```
### Abc
```abc
X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```
### Vega-Lite
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
}
```
> **シーケンス図** 構文の詳細は [こちら](http://bramp.github.io/js-sequence-diagrams/).
> **フローチャート** 構文の詳細は [こちら](http://adrai.github.io/flowchart.js/).
> **graphviz** 構文の詳細は [こちら](http://www.tonyballantyne.com/graphs.html)
> **mermaid** 構文の詳細は [こちら](http://mermaid-js.github.io/mermaid)
> **abc** 構文の詳細は [こちら](http://abcnotation.com/learn)
> **vega** 構文の詳細は [こちら](https://vega.github.io/vega-lite/docs)
Alert area
---
:::success
Yes :tada:
:::
:::info
This is a message :mega:
:::
:::warning
Watch out :zap:
:::
:::danger
Oh No :fire:
:::
:::spoiler Click to show details
You found me :stuck_out_tongue_winking_eye:
:::
:::spoiler {state="open"} Expand the spoiler container by default
You found me :stuck_out_tongue_winking_eye:
:::
## 書式
### 見出し
```
# h1 見出し
## h2 見出し
### h3 見出し
#### h4 見出し
##### h5 見出し
###### h6 見出し
```
### 水平線
___
- - -
***
### 特殊文字
特殊文字は以下を確認してください。
**囲み文字など**:(c) (C) (r) (R) (tm) (TM) (p) (P) +-
**三点リーダー**:test.. test... test..... test?..... test!....
**エスケープ?**:!!!!!! ???? ,,
**ダッシュ**:Remarkable -- awesome
"Smartypantsにより,**二重引用符**は[実体参照](https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7)に変換されます"
'Smartypantsにより,**引用符**は実体参照に変換されます'
### 強調
**これは太文字です**
__これは太文字です__
*これはイタリック体の文字です*
_これはイタリック体の文字です_
~~取り消し線~~
うー~にゃー~
上付き文字: 19^th^
下付き文字: H~2~O
++挿入文++
==マーカー==
{ruby base|rubytext}
### 引用
> 大なり記号「\>」をその直後か……
>> ……スペースを挟んで追加することで……
> > > ……引用部分をネストできます。
### リスト
#### 箇条書き
+ リストを作るには `+` か `-` もしくは`*` を行頭に入れます。
+ サブリストは2つのスペースで表されるインデントを追加します。
- ハイフン(`-`)は強制的に新しいリストを作成します。
* いろはにほへと
+ ちりぬるを
- わかよたれそ
+ ね、簡単でしょう?
#### 順番付きの箇条書き
1. つねならむ
2. うゐのおくやま
3. けふこえて
1. 連続的な数字を使うことも出来ます……
---
1. ……もしくは、全ての番号を `1.` にしても結果は変わりません
1. feafw
2. 332
3. 242
4. 2552
1. e2
オフセットを指定して番号を振る:
57. foo
1. bar
### Code
インラインコード `code`
インデントで表されたコード
// Some comments
line 1 of code
line 2 of code
line 3 of code
ブロックで囲まれたコード(プレーンテキスト)
```
Sample code/text here...
```
シンタックスハイライト
```javascript
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
### 表
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
**右揃え**
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
**左揃え**
| Option | Description |
|:------ |:----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
**中央揃え**
| Option | Description |
|:------:|:-----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
### リンク
[リンク](http://dev.nodeca.com)
[タイトル付きリンク](http://nodeca.github.io/pica/demo/ "タイトル")
自動リンク https://github.com/nodeca/pica
### 画像
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
リンクのような記法だけでなく、脚注スタイルで書くことも出来ます。
![Alt text][id]
文書中のこれ以降に現れる参照により、URLのロケーションを決定します。
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
![Minion](https://octodex.github.com/images/minion.png =200x200)
Show image with given size
### 脚注
脚注1[^first]
脚注2[^second]
文中の脚注^[インライン文章] 定義
複数の脚注参照[^second]
[^first]: 脚注 脚注内で**マークアップすることができます**
複数の段落にも対応します。
[^second]: 脚注 文章
### 定義リスト
用語 1
: 定義 1
以下略
インラインマークアップされた単語
: 定義 2
{ いくつかのコード、定義2の一部 }
定義2の第三段落。
__省略形:__
用語 1
~ 定義 1
用語 2
~ 定義 2a
~ 定義 2b
### 短縮表記
ここに HTML の短縮表記の例を示します。
文中に現れる "HTML" にこの機能が適用されます。
"xxxHTMLyyy"のような表記には対応してません。
(つまり単語の前後にスペースを必要とします)
*[HTML]: Hyper Text Markup Language