非エンジニア向けMarkdown 勉強会

2017/08/09 社内向け非エンジニア向けのMarkdown勉強会のslide

hand on用の資料のリンク
https://yutachaos.gitbooks.io/markdown/content/

Transcript

1. Markdown 勉強会 20170809 木村 勇太 1
2. 今日の流れ( 予定) Markdown について Markdown の基本的な書き方について 実際にMarkdown を書いてみよう Markdown の活用事例 交流会 2
3. お前誰よ？ 3
4. 名前 木村 勇太 職種 サー バー サイドエンジニア 4
5. 言語 PHP,Java,Ruby,Javascript DB MySQL,PostgreSQL,Oracle,SQLServer,DB2 Framework Symfony,Spring,cakePHP, Ruby on Rails, Zend Framework 5
6. 何をやっていたか? java とphp を中心にweb アプリケー ションの改修・ 開発 BI ツー ルの導入、 レポー トの作成 最近はAWS とテストコー ド,Docker 勉強中 6
7. Favorite 音楽 音楽鑑賞, ベー ス演奏が趣味です。 社内で音楽サー クルやってます。 最近ちゃんと 活動できてない・・・orz 7
8. Markdown Markdown とは wiki 読( 略 https://ja.wikipedia.org/wiki/Markdown 元々 はプレー ンテキストをhtml に変換して装飾が 可能な記法 8
9. 利点 ファイル本体はテキストだけなので、 非常にサイ ズが小さくて済む。 Markdown のルー ルに合わせて書くだけで文章が見 た目に合わせて構造化されるので見やすい。 9
10. どこで使うの? github,gitlab README.md というrepository の一番上に置く説 明ファイルやそのコー ドの説明書類に活用。 https://github.com/ruby/ruby 情報・ 資料共有 簡単な資料作成、 情報共有に便利。Markdown を読むソフトが入っていない人にもpdf で出力し て渡すことも出来る。 10
11. 課題管理コミュニケー ションツー ル backlog,Qiita で利用することができる。 オンラインMarkdown エディター dillinger http://dillinger.io/ online でmarkdown を編集できるサー ビス、 ア カウント登録なしで利用できる。html,pdf( 日 本語非対応) 出力可能。 デー タを保存したい場 合はdropbox,github,gitbucket,one drive,google drive,Mediom とサー ビス連携し て保存できる。 11
12. スライド作成 Marp https://yhatt.github.io/marp/ 国産(speee の人が作った) のMarkdown スライ ド作成ツー ル。Markdown だけでスライドが 作成が出来て便利。electron で作成されてい るWin/Mac のクロスプラットフォー ム対応。 デザインテー マが少ないけど、CSS,SASS が使 えれば自分でカスタマイズが可能。 まだ stable ではないので今後に期待。 12
13. Markdown 活用実例 チー ム活用 書類を基本Markdown で作成、git で共有してい る。 git ホスティングサー ビス(gitlab や github,gitbucket) などから直接Web から参照で きる。 13
14. redmine やbacklog redmine やbacklog ではMarkdown 記法を利用す ることができる。 テキストだけで見栄えをよくしようとすると個 人によって書き方がぶれてしまうことが多い が、 共通した記述をすることで統一化。 14
15. Markdown の書き方 Markdown は記号とインデント( スペー ス4 つかタブ 1 つ） で文章の構造を表現する。 段落の間は空行を入れます。 改行はスペー ス4 つ( 環境依存) 15
16. 見出し 見出しは# の数で表現する 例 # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 16
17. 表示 見出し1 見出し2 見出し3 見出し4 見出し5 見出し6 17
18. リスト リストは - , * , + のどれかとインデントで表現す る。 例 - リスト1 - リスト2 - リスト3 - リスト4 - リスト5 - リスト6 - リスト7 18
19. 表示 リスト1 リスト2 リスト3 リスト4 リスト5 リスト6 リスト7 19
20. 数字リスト 数字を使ったリストを作成する場合は 数字.( ドッ ト) と記載する。 例 1. リスト1 2. リスト2 3. リスト3 4. リスト4 5. リスト5 6. リスト6 7. リスト7 20
21. 表示 1. リスト1 2. リスト2 3. リスト3 4. リスト4 5. リスト5 6. リスト6 7. リスト7 21
22. コー ド プログラムコー ド、html などはMarkdown 記法と 競合してしまう場合があるので ``` バッククオー ト 三つで囲んで表現する。 例 ``` def main(): print("Hello World") if name == 'main': main() ``` 22
23. 表示 def main(): print("Hello World") if __name__ == '__main__': main() 23
24. gitlab やqiita などの場合``` の後ろに言語名をつける とsyntax highlight されます。 ```python def main(): print("Hello World") if name == 'main': main() ``` 24
25. 引用 文字列の引用表示をすることができます。 引用表示したい列の前に> を書きます。 例 25
26. > ここが引用表示です。 > 二行目 26
27. 表示 ここが引用表示です。 二行目 “ “ 27
28. 強調 文字列を強調して表示することができます。 ボー ルド ** ** アスタリスク二つで囲む 例 ** ボー ルド** 表示 ボー ルド 28
29. コー ド ` ` バッククオー トで囲む 例 ` コー ド` 表示 コー ド 29
30. イタリック _ _ アンダー スコアで囲む 例 _ イタリック_ 表示 イタリック 30
31. 表 セル セルは縦線 | ( バー ティカルバー) を文字列で囲 んで表現 31
32. 揃え - と: ( コロン) で表現する。 左寄せ :-- 右寄せ -: 中央寄せ :-: 最低三文字で文章の見栄えによってハイフンの 数は自由。 32
33. 例 | 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
34. 表示 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
35. リンク 例 [ リンクテキスト]( リンクURL) 記述例 [ ゆめみホー ムペー ジ](https://www.yumemi.co.jp) 35
36. 表示 ゆめみホー ムペー ジ 36
37. 画像埋め込み 例  記述例  37
38. 表示 38
39. 画像埋め込み( 参照型) url を別の箇所にまとめて記載して参照させて表示 させることもできます。 例 ![ 代替テキスト][ 外部参照の名前] [ 参照名]: url 記述例 ![CTO][freeCTO] [freeCTO]: ./free_cto.png 39
40. 表示 40
41. hands on 下記の表示をMarkdown にしてみよう ハンズオン用URL https://yutachaos.gitbooks.io/markdown/con tent/ 41
42. Tips Markdown の仕組み Markdown はシンプルな非タグ形式のテキストを html に変換して表示する様になっています。 例えば見出しなどで言えば # 見出し1 html で表現す ると <h1> 見出し1</h1> と同じ状態になります。 Markdown ではhtml タグをそのまま使う事も出来 ます。Markdown の基本記法でうまく表現できない 時に便利!( なので、 個人的にWeb デザイナー の人の 方が使いこなせると思う。。。) 42
43. 見出し <h1> 見出し</h1> 見出し 43
44. テー ブル <table> <tr> <th> タイトル1</td><td> タイトル2</td> </tr> <tr> <td> せる1</td><td> せる2</td> </tr> </table> 44
45. タイトル1 タイトル2 せる1 せる2 45
46. Markdown の弱点 テキスト側が持っている情報はあくまで構造の情 報だけなので利用するサー ビスで表示される見た 目や正しく表示される書き方に方言がある。 46
47. 資料作成に使ったソフトウェア スライド作成 Marp https://yhatt.github.io/marp/ HANDS ON ペー ジ gitbook https://www.gitbook.com/ 47
48. ありがとうございました。 48