<style> /* basic design */ .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p { font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic'; text-align: left; line-height: 1.6; letter-spacing: normal; text-shadow: none; word-wrap: break-word; color: #444; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;} .reveal h1, .reveal h2, .reveal h3 {color: #2980b9;} .reveal th {background: #DDD;} .reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;} .reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;} .reveal table {margin: 1.0vw auto;} .reveal code {line-height: 1.2;} .reveal p, .reveal li {padding: 0vw; margin: 0vw;} .reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;} /* table design */ .reveal table {background: #f5f5f5;} .reveal th {background: #444; color: #fff;} .reveal td {position: relative; transition: all 300ms;} .reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;} .reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;} /* blockquote design */ .reveal blockquote { width: 90%; padding: 0.5vw 0 0.5vw 6.0vw; font-style: italic; background: #f5f5f5; } .reveal blockquote:before{ position: absolute; top: 0.1vw; left: 1vw; content: "\f10d"; font-family: FontAwesome; color: #2980b9; font-size: 3.0vw; } /* font size */ .reveal h1 {font-size: 5.0vw;} .reveal h2 {font-size: 4.0vw;} .reveal h3 {font-size: 2.8vw;} .reveal h4 {font-size: 2.6vw;} .reveal h5 {font-size: 2.4vw;} .reveal h6 {font-size: 2.2vw;} .reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;} .reveal code {font-size: 1.6vw;} /* new color */ .red {color: #EE6557;} .blue {color: #16A6B6;} /* split slide */ #right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;} #left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;} </style> <style> /* backgroud design */ .reveal { background-image: url("https://i.imgur.com/ALypCxI.png"), /* copy right */ url("https://i.imgur.com/kNd1W6K.png"); /* header */ background-repeat: no-repeat, no-repeat; background-position: center 99%, center 2%; background-size: 30% auto, 90% auto; } .reveal h1 {padding: 3.0vw 0vw;} @media screen and (max-width: 1024px) { .reveal h2 {margin: -2.0vw 0 0 0; padding: 0.0vw 0vw 3.0vw 2.0vw; } } @media screen and (min-width: 1025px) and (max-width: 1920px) { .reveal h2 {margin: -1.5vw 0 0 0; padding: 0.0vw 0vw 3.0vw 2.0vw; } } @media screen and (min-width: 1921px) and (max-width: 100000px) { .reveal h2 {margin: -1.0vw 0 0 0; padding: 0.0vw 0vw 3.0vw 2.0vw; } } </style> <!-- --------------------------------------------------------------------------------------- --> #### Slide Sample 3 # HackMD<br>スライドモードのすすめ <br> <br> #### 2018.12.08 ### @suzuki_ --- ## はじめに <div class="box"> **[HackMD (CodiMD)](https://hackmd.io/) のスライドモード**の解説です． **PowerPointよりも手軽にプレゼン資料を作成したい方**に向けた記事です． <br> 本資料の本文は，[HackMD 機能紹介 日本語版](https://hackmd.io/b_l4reliTdWOSn9SiCmbJQ?both)を再構成したものです． </div> --- ## スライドデザイン - デザイン1：[本文](https://hackmd.io/JnjYISVgQHGWODhrwYMUIg?both)，[スライド](https://hackmd.io/p/BJa_Fz_JV#/) - デザイン2：[本文](https://hackmd.io/mJ6dr_haQWmAchJEq4truw?both)，[スライド](https://hackmd.io/p/Bk-a3fO1N#/) - デザイン3：[本文](https://hackmd.io/jzMkQUUYR7SH6stOSsQZfQ?both)，[スライド](https://hackmd.io/p/rk-UTf_JN#/) --- ## スライドデザイン ファイルの先頭にオプションを設定できる． ```html slideOptions: theme: white slideNumber: 'c/t' center: false transition: 'none' keyboard: true width: '93%' height: '100%' --- ``` > 詳しくは次のサイトを参照：**[Reveal.js ReadMe](https://github.com/hakimel/reveal.js/#configuration)** --- ## スライドデザイン 本スライドのデザインは，以下の行をコピペすればよい． CSSの基本は1時間で学べる．（例．https://prog-8.com/languages/html ） ```html <style> ... </style> ``` --- ## スライドデザイン ### new colors ```html= /* new color */ .red {color: #EE6557;} .blue {color: #16A6B6;} ``` --- ## スライドデザイン ### font size ```html= /* font size */ .reveal h1 {font-size: 5.0vw;} .reveal h2 {font-size: 4.0vw;} .reveal h3 {font-size: 2.8vw;} .reveal h4 {font-size: 2.6vw;} .reveal h5 {font-size: 2.4vw;} .reveal h6 {font-size: 2.2vw;} .reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;} .reveal code {font-size: 1.6vw;} ``` --- ## 概要 ### HackMD <i class="fa fa-file-text"></i> **HackMD** はMarkdownで編集可能なクロスプラットフォームのオンラインコラボレーションノート． **パソコン、タブレット、携帯など様々なプラットフォーム**からリアルタイムに共同で編集を行うことが可能． > 詳しくは次のサイトを参照：**[日本語版 ReadMe](https://hackmd.io/b_l4reliTdWOSn9SiCmbJQ?both)** ### 共有 **編集可能**ノートとして共有したい場合は，URLをそのままコピーするだけ． **読み込み専用**ノートとして共有したい場合は，<i class="fa fa-share-alt"></i> をクリックしてURLをコピー． --- ## 概要 ### Mode **Desktop & Tablet** <i class="fa fa-edit 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-toggle-on fa-fw"></i> View: 編集画面のみを表示． <i class="fa fa-toggle-off fa-fw"></i> Edit: プレビュー画面のみを表示． --- ## 概要 ### 権限 <i class="fa fa-leaf fa-fw"></i> Freely: 誰でも編集可能． <i class="fa fa-pencil fa-fw"></i> Editable: サインイン中のユーザのみ編集可能． <i class="fa fa-lock fa-fw"></i> Locked: ノートのオーナーのみ編集可能． <i class="fa fa-hand-stop-o fa-fw"></i> Private: ノートのオーナーのみが閲覧・編集可能． --- ## スライドモード 特殊な構文を使うことによって，ノートをスライドとしてまとめることができる． `---`や`----`でノートを区切ることで、ページを切り替える境界線を定める． **SlideMode** <i class="fa fa-tv"></i> をクリックしてスライドを生成． 基本的なHTMLの文法が有効．`<br>`など． --- ## 自動補完 エディタはMarkdownを自動補完するためのヒントを与える． - 絵文字：`:`を入力． - コードブロック：` ``` ` と打った後に続けて文字を入力． - 見出し： `#` を入力． - リンク： `[]`を入力． - 外部コンテンツの埋め込み：`{}`を入力．詳細は[こちら](#externals) - 画像：`!`を入力． --- ## 画像ファイルのアップロード 画像ファイルのアップロードは、カメラのアイコン<i class="fa fa-camera"></i> をクリックする． または．画像ファイルをエディタの画面に **ドラッグ・アンド・ドロップ** する． デフォルト設定だと，画像は自動的に **[imgur](http://imgur.com)** にアップロードされる．  --- ## 書式 ### 見出し ``` # h1 見出し ## h2 見出し ### h3 見出し #### h4 見出し ##### h5 見出し ###### h6 見出し ``` --- ## 書式 ### 水平線 ___ - - - *** --- ## 書式 ### 特殊文字 **囲み文字など**：(c) (C) (r) (R) (tm) (TM) (p) (P) +- **三点リーダー**：test.. test... test..... test?..... test!.... **エスケープ?**：!!!!!! ???? ,, **ダッシュ**：Remarkable -- awesome --- ## 書式 ### 強調 **これは太文字です** __これは太文字です__ *これはイタリック体の文字です* _これはイタリック体の文字です_ ~~取り消し線~~ うー~にゃー~ 上付き文字: 19^th^ 下付き文字: H~2~O ++挿入文++ ==マーカー== --- ## 書式 ### 色 <font color="red">red</font> <font color="blue">blue</font> <span class="red">自作のred</span> <span class="blue">自作のblue</span> <font color="teal">teal</font> <font color="#2980b9">#2980b9</font> > 詳しくは次のサイトを参照：**[原色大辞典](https://www.colordic.org/)** --- ## 書式 ### 引用 > 大なり記号「\>」をその直後か…… >> ……スペースを挟んで追加することで…… > > > ……引用部分をネストできます。 --- ## 書式 ### リスト #### 箇条書き - リストを作るには `+` か `-` もしくは`*` を行頭に入力． - サブリストは2つのスペースで表されるインデントを追加． - ハイフン(`-`)は強制的に新しいリストを作成． * いろはにほへと + ちりぬるを - わかよたれそ - ね、簡単でしょう？ --- ## 書式 ### リスト #### 順番付きの箇条書き 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... ``` シンタックスハイライト ``` js var foo = function (bar) { return bar++; }; console.log(foo(5)); ``` --- ## 書式 ### 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; } } ``` --- ## 書式 ### Code block **行番号** を表示するには、コードブロックで使われる言語を明示した後に `=` を入力． また，行番号のスタートを明示することも出来ます． 以下の例では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; } } ``` --- ## 書式 ### 表 **通常** | 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. **右揃え** | 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. | --- ## 書式 ### 表 **左揃え** | 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. | **中央揃え** | 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. | --- ## 書式 ### リンク [リンク](http://dev.nodeca.com) [タイトル付きリンク](http://nodeca.github.io/pica/demo/ "タイトル") 自動リンク https://github.com/nodeca/pica --- ## 書式 ### 画像  --- ## 書式 ### 画像  Show image with given size --- ## 書式 ### 絵文字 このように入力してください： :smile: :smiley: :cry: :wink: > 全絵文字の一覧は[こちら](http://www.emoji-cheat-sheet.com/) --- ## TODOリスト - [ ] Todos - [x] サラダを買う - [ ] 歯を磨く - [x] 何か飲む --- ## Externals ### Youtube {%youtube 1G4isv_Fylg %} --- ## Externals ### Vimeo {%vimeo 124148255 %} --- ## Externals ### Gist {%gist schacon/4277%} --- ## Externals ### SlideShare {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} --- ## Externals ### Speakerdeck {%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} --- ## Externals ### PDF **Caution: this might be blocked by your browser if not using https url.** {%pdf https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf %} --- ## MathJax $\LaTeX$ 形式の数式を **MathJax** を利用して描画することが出来ます。 > 詳しくは次のサイトを参考にしてください： [math.stackexchange.com](http://math.stackexchange.com/)。 **ガンマ関数** は $\Gamma(n) = (n-1)!$ を満たします。 $\forall n\in\mathbb N$ はオイラー積分から定義されます。 $$ 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? ``` --- ## UML図 ### フローチャート フローチャートもこのように表示できます。 ```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 ``` --- ## UML図 ### 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 } ``` --- ## UML図 ### 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 ``` --- ## UML図 ### 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:| ``` --- ## UML図 ### 参考 **シーケンス図** 構文の詳細は [こちら](http://bramp.github.io/js-sequence-diagrams/). **フローチャート** 構文の詳細は [こちら](http://adrai.github.io/flowchart.js/). **Graphviz** 構文の詳細は [こちら](http://www.tonyballantyne.com/graphs.html) **Mermaid** 構文の詳細は [こちら](http://knsv.github.io/mermaid) **Abc** 構文の詳細は [こちら](http://abcnotation.com/learn) --- ## Alert area :::success Yes :tada: ::: :::info This is a message :mega: ::: :::warning Watch out :zap: ::: :::danger Oh No :fire: ::: --- ## PDF化 URLの#の前に，"?print-pdf"を追加． --- ## 分割 - このようにスライドを分割することは可能ですが，分割方法を事前にcssで定義する必要があります． <div id="left"> <br> ### left <iframe src="https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf" height="300px" width="100%" frameBorder="0"></iframe> </div> <div id="right"> <br> ### right - a - hogehoge - aaa - ... </div> --- ## iframe 例 - Web Page <iframe src="https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf" height="250px" width="100%" frameBorder="0"></iframe> --- ## iframe 例 - Slideshare <center> <iframe src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen></iframe> </center> --- ## iframe 例 - Google スプレッドシート <center><iframe width="570" height="330" src="https://docs.google.com/spreadsheets/d/1wZtnlYqkMsoLr9ykiHo5PFf0t36jr4OYr8BQZcq1uNA/pubhtml?gid=1673223265&amp;single=true&amp;widget=true&amp;range=A1%3AN13&#038;"></iframe></center> --- ## iframe 例 - codepen <iframe height='400' scrolling='no' title='Interactive email tutorial' src='//codepen.io/avigoldman/embed/PjxEbj/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/avigoldman/pen/PjxEbj/'>Interactive email tutorial</a> by Avi Goldman (<a href='https://codepen.io/avigoldman'>@avigoldman</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>