<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> /* specific design */ .reveal h2 { padding: 0 1.5vw; margin: 0.0vw 0 2.0vw -2.0vw; border-left: solid 1.2vw #2980b9; border-bottom: solid 0.8vw #d7d7d7; } </style> <!-- --------------------------------------------------------------------------------------- --> #### MIERUNE勉強会210326 <br> <br> <br> # ~~あなたの知らないHackMDの世界~~ # HackMDなかなか良い --- ## はじめに * <span> HackMD(も)なかなか良いって話 <!-- .element: class="fragment" data-fragment-index="0" --></span> * <span> オンラインエディタ宗教戦争に参戦か! <!-- .element: class="fragment" data-fragment-index="1" --></span> * <span> 個人の感想ですので罵倒🪓 は無しの方向でw<!-- .element: class="fragment" data-fragment-index="2" --></span> --- ## わたしとHackMD * HackPadを以前使っていた * DropboxPaperはメンドクセ * メモ・LT・推敲に利用 * 仕事用はGoogledocs/GitHubとか * -15分程度の発表ならこれでもよい --- # HackMDって? --- ## HackMDって? - 2017に台湾カンファレンスでガンガン使ってた - なんだこりゃ ![](https://i.imgur.com/wnp3Ulz.png) --- ## HackMDって? - [G0v・Code for Japan界隈ではデフォ](https://g0v.hackmd.io/@summit2020/book/https%3A%2F%2Fsummit.g0v.tw) ![](https://i.imgur.com/9HsQFX1.png =600x) --- ## HackMDって? - 台湾製オープンソース😍 - ★6900〜 - ダブルバイトハラスメントにも強い - わりと対応早い方らしい ![](https://i.imgur.com/UjbZsV9.png =600x) --- ## HackMDって? - 軽いの良い - Confluenceよりも軽快 - 同時シェアリングOK - オンラインノート --- # 多彩な表現 --- ## pdf引用がかっこいい(そこ) ``` {%pdf https://hoge.jp/sample.pdf %} ``` --- {%pdf https://eprints.lib.hokudai.ac.jp/dspace/bitstream/2115/61467/1/Current%20situation%20and%20challenges%20of%20open%20science%20in%20biodiversity%20information%20fields_furukawa.pdf %} --- ## YouTube ```{%youtube [video_id] %}``` --- {%youtube XDPVzXw_Fac %} --- ## SlideShare / Speakerdeck --- {%slideshare yasutofurukawa/gis-117470447 =400x %} --- ### コードブロック ```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; } } ``` --- ### Gist {%gist schacon/4277%} --- # プレゼンが楽 --- ## プレゼンが楽 - [reveal.js](https://revealjs.com)の機能を利用 - HackMDでは全部使えない --- ## プレゼンが楽 - 直前までなおせるの最高♥ - 見出しメモだけで最速15分でLT完成 - 顧客の目の前で修正もしたことある --- ## プレゼンが楽 - 運営には共有リンク送るだけ - PDF2Slideshareしなくてもよい - PDFで欲しい方にも対応可 - プレゼンモードの下部にプリンターアイコン --- ## プレゼンが楽 - mdからこさえるので構造的なプレゼンにうってつけ > [プレゼン作成でいきなりPPT開くなヴォケ(意訳)](https://www.amazon.co.jp/dp/462106603X) ![](https://i.imgur.com/ff1mgWJ.png =200x) --- ## 構造的プレゼン遍愛歴 - xls→pptx(-2014) - md→md2key→key→pptx(-2017) - HackMD(2017-) --- # ほかには? --- ## 一歩進んだ整理 - [book機能による構造化](https://hackmd.io/@geopythonjp/HkZOmNpqL/%2FN6n7rDSUSs6OPFOUbbPSZg) ![](https://i.imgur.com/XFmKWMc.png=600x) --- ## こんなことも - [CodiMDによるオンプレ化](https://qiita.com/k-waragai/items/63cbab2584c0299288be) - [AtlassianアカウントでCodiMDを使える?](https://yusukeiwaki.hatenablog.com/entry/2019/12/30/codimd-with-bitbucket-for-me) ![](https://i.imgur.com/w6LAtar.png =400x) --- ## こんなことも - VSCodeにプラグインで連携 ![](https://i.imgur.com/zGzGN1Y.png) --- ## こんなことも - [CSSでさらにかっこよく](https://hackmd.io/@HN0xG8gRSMC_LDsCbB5Flg/Bk-a3fO1N?type=slide) - だれかMIERUNEオリジナルCSS作って! - (先日雛形こさえといてなんですが😅) ![](https://i.imgur.com/ZHLON1c.png =600x) --- # 課題 --- ## セキュリティ課題 - [結構セキュアでない]( https://note.com/note_s/n/nf697bdd0a91f) - リンク共有説明が雑 - スクショはimgurにUP - 公開リスク - 時々落ちる - オンプレCodiMD版? --- ## 表現課題 - 凝った図形描画どうするか - draw.io経由でimgタグでもってくるとかかな - httpsだとpdfプレビューできないことがある - 政府系とくに --- ## 表現課題 - Markdown仕様ですが何か - HTML/css等で殴る必要あり - 画像サイズ - センタリング - 図番入れたいためにPandocとかもなあ --- ## 機能課題 - 置換が苦手 - できなくはない - VSCodeでやるほうが良い - スペース「・」表示されない() --- ## 機能課題 - [TEXTサーチができない](https://github.com/hackmdio/hackmd-io-issues/issues/153)事に最近気づいた - それぐらい気にしてなかった() - 2021には対応するかも、とのこと --- ## 個人的課題 - ワイのppt資源の活用問題 - 10000ページくらいある件 - めんどくさいのでPNG化で貼ってる - pandocでmd2pptxできるらしい --- ## 個人的課題 - フォント芸使えない - ![](https://i.imgur.com/G2Tj949.png =400x) --- ## 個人的課題 - 次のスライドプレビューがない - 40分講演は辛い - ネタ構造の抜本的見直し - タイマーもない --- # まとめ --- ## まとめ - HackMDまあ便利😺 - ちょっとしたメモ・ドラフトとかに👍 - 刺さるLTには超おすすめ👍👍 - セキュアのリスクもある👻 - 画像はちょっと怖いなー - 誰かオンプレCodiMD立てて😭 --- ## まとめ - 良いプレゼンつくれるのは間違いない - ppt/keyはツールでしかない - 構造がしっかりする - 例:絵がアレもネームで十分面白いマンガ --- ## 参考 - [HackMDドキュメント](https://hackmd.io/s/features-jp ) - [まだPowerPointで消耗してるの? on Qiita](https://qiita.com/suzuki_/items/08cbd75599bd78dcaca2) ## コメント - 画像はりつけいいすね - スクショコピペでOK - ローカルのjpegもimgurにUPされるので注意 - 結構スライド作るの手間なので今度使ってみますー - 複数編集もできますか? - 共有時に指定したらOK - TOC/YAMLも使える - https://hackmd.io/s/features-jp#%E3%83%93%E3%83%A5%E3%83%BC - https://hackmd.io/s/features-jp#YAML-metadata -
{"metaMigratedAt":"2023-06-15T21:29:03.296Z","metaMigratedFrom":"YAML","title":"MIERUNE semminer 20210326","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"none\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"d61e1226-0844-4aac-9aac-87350a5a025b\",\"add\":13428,\"del\":5943}]"}
    540 views