Tweet
Tweet

Slide 1

Slide 1 text

Markdown 勉強会 20170809 木村 勇太 1

Slide 2

Slide 2 text

今日の流れ( 予定) Markdown について Markdown の基本的な書き方について 実際にMarkdown を書いてみよう Markdown の活用事例 交流会 2

Slide 3

Slide 3 text

お前誰よ？ 3

Slide 4

Slide 4 text

名前 木村 勇太 職種 サー バー サイドエンジニア 4

Slide 5

Slide 5 text

言語 PHP,Java,Ruby,Javascript DB MySQL,PostgreSQL,Oracle,SQLServer,DB2 Framework Symfony,Spring,cakePHP, Ruby on Rails, Zend Framework 5

Slide 6

Slide 6 text

何をやっていたか? java とphp を中心にweb アプリケー ションの改修・ 開発 BI ツー ルの導入、 レポー トの作成 最近はAWS とテストコー ド,Docker 勉強中 6

Slide 7

Slide 7 text

Favorite 音楽 音楽鑑賞, ベー ス演奏が趣味です。 社内で音楽サー クルやってます。 最近ちゃんと 活動できてない・・・orz 7

Slide 8

Slide 8 text

Markdown Markdown とは wiki 読( 略 https://ja.wikipedia.org/wiki/Markdown 元々 はプレー ンテキストをhtml に変換して装飾が 可能な記法 8

Slide 9

Slide 9 text

利点 ファイル本体はテキストだけなので、 非常にサイ ズが小さくて済む。 Markdown のルー ルに合わせて書くだけで文章が見 た目に合わせて構造化されるので見やすい。 9

Slide 10

Slide 10 text

どこで使うの? github,gitlab README.md というrepository の一番上に置く説 明ファイルやそのコー ドの説明書類に活用。 https://github.com/ruby/ruby 情報・ 資料共有 簡単な資料作成、 情報共有に便利。Markdown を読むソフトが入っていない人にもpdf で出力し て渡すことも出来る。 10

Slide 11

Slide 11 text

課題管理コミュニケー ションツー ル backlog,Qiita で利用することができる。 オンラインMarkdown エディター dillinger http://dillinger.io/ online でmarkdown を編集できるサー ビス、 ア カウント登録なしで利用できる。html,pdf( 日 本語非対応) 出力可能。 デー タを保存したい場 合はdropbox,github,gitbucket,one drive,google drive,Mediom とサー ビス連携し て保存できる。 11

Slide 12

Slide 12 text

スライド作成 Marp https://yhatt.github.io/marp/ 国産(speee の人が作った) のMarkdown スライ ド作成ツー ル。Markdown だけでスライドが 作成が出来て便利。electron で作成されてい るWin/Mac のクロスプラットフォー ム対応。 デザインテー マが少ないけど、CSS,SASS が使 えれば自分でカスタマイズが可能。 まだ stable ではないので今後に期待。 12

Slide 13

Slide 13 text

Markdown 活用実例 チー ム活用 書類を基本Markdown で作成、git で共有してい る。 git ホスティングサー ビス(gitlab や github,gitbucket) などから直接Web から参照で きる。 13

Slide 14

Slide 14 text

redmine やbacklog redmine やbacklog ではMarkdown 記法を利用す ることができる。 テキストだけで見栄えをよくしようとすると個 人によって書き方がぶれてしまうことが多い が、 共通した記述をすることで統一化。 14

Slide 15

Slide 15 text

Markdown の書き方 Markdown は記号とインデント( スペー ス4 つかタブ 1 つ） で文章の構造を表現する。 段落の間は空行を入れます。 改行はスペー ス4 つ( 環境依存) 15

Slide 16

Slide 16 text

見出し 見出しは# の数で表現する 例 # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 16

Slide 17

Slide 17 text

表示 見出し1 見出し2 見出し3 見出し4 見出し5 見出し6 17

Slide 18

Slide 18 text

リスト リストは - , * , + のどれかとインデントで表現す る。 例 - リスト1 - リスト2 - リスト3 - リスト4 - リスト5 - リスト6 - リスト7 18

Slide 19

Slide 19 text

表示 リスト1 リスト2 リスト3 リスト4 リスト5 リスト6 リスト7 19

Slide 20

Slide 20 text

数字リスト 数字を使ったリストを作成する場合は 数字.( ドッ ト) と記載する。 例 1. リスト1 2. リスト2 3. リスト3 4. リスト4 5. リスト5 6. リスト6 7. リスト7 20

Slide 21

Slide 21 text

表示 1. リスト1 2. リスト2 3. リスト3 4. リスト4 5. リスト5 6. リスト6 7. リスト7 21

Slide 22

Slide 22 text

コー ド プログラムコー ド、html などはMarkdown 記法と 競合してしまう場合があるので ``` バッククオー ト 三つで囲んで表現する。 例 ``` def main(): print("Hello World") if name == 'main': main() ``` 22

Slide 23

Slide 23 text

表示 def main(): print("Hello World") if __name__ == '__main__': main() 23

Slide 24

Slide 24 text

gitlab やqiita などの場合``` の後ろに言語名をつける とsyntax highlight されます。 ```python def main(): print("Hello World") if name == 'main': main() ``` 24

Slide 25

Slide 25 text

引用 文字列の引用表示をすることができます。 引用表示したい列の前に> を書きます。 例 25

Slide 26

Slide 26 text

> ここが引用表示です。 > 二行目 26

Slide 27

Slide 27 text

表示 ここが引用表示です。 二行目 “ “ 27

Slide 28

Slide 28 text

強調 文字列を強調して表示することができます。 ボー ルド ** ** アスタリスク二つで囲む 例 ** ボー ルド** 表示 ボー ルド 28

Slide 29

Slide 29 text

コー ド ` ` バッククオー トで囲む 例 ` コー ド` 表示 コー ド 29

Slide 30

Slide 30 text

イタリック _ _ アンダー スコアで囲む 例 _ イタリック_ 表示 イタリック 30

Slide 31

Slide 31 text

表 セル セルは縦線 | ( バー ティカルバー) を文字列で囲 んで表現 31

Slide 32

Slide 32 text

揃え - と: ( コロン) で表現する。 左寄せ :-- 右寄せ -: 中央寄せ :-: 最低三文字で文章の見栄えによってハイフンの 数は自由。 32

Slide 33

Slide 33 text

例 | Left align | Right align | Center align | |:-----------|------------:|:------------:| | This | This | This | | column | column | column | | will | will | will | | be | be | be | | left | right | center | | aligned | aligned | aligned | 33

Slide 34

Slide 34 text

表示 Left align Right align Center align This This This column column column will will will be be be left right center aligned aligned aligned 34

Slide 35

Slide 35 text

リンク 例 [ リンクテキスト]( リンクURL) 記述例 [ ゆめみホー ムペー ジ](https://www.yumemi.co.jp) 35

Slide 36

Slide 36 text

表示 ゆめみホー ムペー ジ 36

Slide 37

Slide 37 text

画像埋め込み 例 ![ 代替テキスト]( 画像のURL) 記述例 ![CTO](./free_cto.jpg) 37

Slide 38

Slide 38 text

表示 38

Slide 39

Slide 39 text

画像埋め込み( 参照型) url を別の箇所にまとめて記載して参照させて表示 させることもできます。 例 ![ 代替テキスト][ 外部参照の名前] [ 参照名]: url 記述例 ![CTO][freeCTO] [freeCTO]: ./free_cto.png 39

Slide 40

Slide 40 text

表示 40

Slide 41

Slide 41 text

hands on 下記の表示をMarkdown にしてみよう ハンズオン用URL https://yutachaos.gitbooks.io/markdown/con tent/ 41

Slide 42

Slide 42 text

Tips Markdown の仕組み Markdown はシンプルな非タグ形式のテキストを html に変換して表示する様になっています。 例えば見出しなどで言えば # 見出し1 html で表現す ると

見出し1

と同じ状態になります。 Markdown ではhtml タグをそのまま使う事も出来 ます。Markdown の基本記法でうまく表現できない 時に便利!( なので、 個人的にWeb デザイナー の人の 方が使いこなせると思う。。。) 42

Slide 43

Slide 43 text

見出し

見出し

見出し 43

Slide 44

Slide 44 text

テー ブル タイトル1 タイトル2 せる1 せる2 44

Slide 45

Slide 45 text

タイトル1 タイトル2 せる1 せる2 45

Slide 46

Slide 46 text

Markdown の弱点 テキスト側が持っている情報はあくまで構造の情 報だけなので利用するサー ビスで表示される見た 目や正しく表示される書き方に方言がある。 46

Slide 47

Slide 47 text

資料作成に使ったソフトウェア スライド作成 Marp https://yhatt.github.io/marp/ HANDS ON ペー ジ gitbook https://www.gitbook.com/ 47

Slide 48

Slide 48 text

ありがとうございました。 48