<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}]"}