VSCode＋Markdownでプレゼン資料（PDF）

Markdown

1年間 書きかけで放って 温めていたネタ😅

最近 VSCode＋Markdownでプレゼン資料を作ったのでメモ。

Markdownいいよ、いいよ～

という話は前々からしていたけどMarkdownに慣れてしまうと、なんでもMarkdownにしたくなってくる（笑

もちろん得手不得手あるのでやり過ぎも良くはないことは重々承知。
自己満足だけどちょっとした資料であればさっとMarkdownで書けるに越したことはない。

使い捨てプレゼン

ところで、社会人になって15年。
数多のプレゼン資料が爆誕しては消えていくという現象を見続けてきた。

プレゼン資料は発表の為に作られた資料だから、終われば不要になるのは当然。
けれど慣れないプレゼンソフト使ってなんとか作ったものを捨てるのは忍びないものだ。

たまに

たまにチーム内でちょっとしたプレゼン（説明会）を行うことがある。
プロジェクターで伝えたいポイントが映せれば十分。

  • 数行/ページくらい
  • メインテーマやサブタイトルでプレゼンっぽく
  • 目次を付けたい
  • 箇条書きしたい
  • 表をちょっと出したい
  • 事前配布したい

こんなものはプレゼンソフト使わず

Markdownでぱっと作ってしまいたい

Markdown＋VSCode

VSCodeは以前少し触れたが、豊富な拡張機能によりテキストエディタにとどまらずコーディングにもできちゃうソフト。 izana1018.hateblo.jp

Linux版も用意されてて、これでフリーとは太っ腹ですわ。

そんなVSCodeでプレゼン資料（っぽい）ものを作ってみたのでメモ。

ところでMarpってご存知？

Marp - Markdown Presentation Writer

なかなか面白いソフトでまさに「Markdownでプレゼン」するソフト。
これでもいいけどMarp入ってないとだめなので今回はパスです。

そこで閃きました

PDFにして全画面表示すればそれっぽくね？

これです。

PDFでプレゼン資料っぽく？

と聞くと難しそうなことやってるなーと思う人いるかもだけど、超単純です。

要するに

改ページ条件を決めるだけ

1ページの定義ができたら、Markdownの文章を調整してVSCodeでPDF出力すればよいだけ。簡単でしょ？

やりかた

STEP1「VSCodeに Markdown PDF をインストール」

Ctrl+Shift+Xで拡張機能の管理を表示して「markdown pdf」とでも入れたらyzaneさんのやつが出てくるのでインストール。

STEP2「改ページCSSの作成」

Markdownの予約語なら何使ってもOK（多分

今回は分かりやすくMarkdown記法の「---」（水平線）で改ページするようにします。

水平線。
つまり、hrなので下記のようなCSSを用意して保存しておきます。
取り敢えず、”hr-page-break.css”とかにしときましょうか。

hr {
    border: none;
    page-break-after: always;
}

STEP3「Markdownの用意」

# main title
## sub title

- first
- body

---

## first

なんたらかんたら

---

## body

うんたらかんたら

“Markdownでプレゼン資料.md” とでも作っておきましょ。

VSCodeで見るとこんな感じです。 f:id:izana1018:20180420020758p:plain

STEP4「Markdown PDFのスタイルにCSSを指定」

Ctrl+commaで設定ファイルを開いて「markdown-pdf.styles」を設定します。
ユーザー設定 と ワークスペースの設定 があるけどお好みで。
プレゼン用の設定になるので、今回はワークスペースの設定に追加します。

// 既定の設定とユーザー設定を上書きするには、このファイル内に設定を挿入します
{
    "markdown-pdf.styles": ["hr-page-break.css"]
}
その他設定

PDFサイズ、用紙向き、ハイライトスタイルなどの設定を追加。 f:id:izana1018:20180420023113p:plain

STEP5「PDF出力」

Markdownを右クリックしてPDF出力してみる。 f:id:izana1018:20180420022557p:plain

こんな感じで出ます f:id:izana1018:20180420023259p:plain

全画面表示すればカーソルでページ送りとかも出来ます。

Markdownで作るメリット

正直プレゼンソフトのほうが「プレゼンやってる感」がある（笑

Markdownで作るメリットはなんだろうか

  • 継続的にメンテしやすい
    Markdown記法という縛りがあることで、誰でもメンテしやすい。
    プレゼンソフトで作られたものは作者の思いが強すぎて、メンテしたくない（気持ち的に）
  • git管理で世代管理が楽ちん テキストファイルなので差分が取りやすい。
  • 検索がしやすい これもテキストファイルが故にgrep検索などがしやすい。

まぁ適材適所ってことで。

.md.txt

Markdown 開発

f:id:izana1018:20160825013723p:plain:w400

.mdといえば

前回（お薦め、定番、気になる Markdown対応ソフト for Windows - izana1018's diary）に続き Markdown のお話し。

Markdownはテキストデータ

なので保存するときの拡張子は.txtで全然問題なし。

でも、Markdownで記述しているよ っとわかりやすくするために拡張子は.mdとか.markdownで保存するのが多い。
GitHubなんかは.mdが主流かな。

しかーし！

拡張子.mdだとMarkdown知らない人は分からないので、メールで送る前には

README.mdをREADME.txt

に拡張子変換してから送付している。

面倒くさい

正直どころか、完全に面倒です。

どうすっぺかなー

  • 諦めて.md→.txtで頑張る ヽ(｀Д´#)ﾉ
  • Markdownで書いても.txtで保存する (´・ω・｀)
  • Markdownで書いたこともわかり、メモ帳でも編集できる新拡張子を作り出す ( ﾟдﾟ)ﾊｯ!

・・・完全に3つ目「新拡張子」です

サクラエディタの新拡張子.md.txt設定

ということで、サクラエディタで見出し、強調表示、引用、コード のカラー設定と、アウトライン対応をしてみる。

アウトライン解析プラグインの導入

  1. 下記よりプラグインをダウンロードして好きな場所に配置。
    github.com

  2. 「設定＞共通設定」のプラグインで、登録しておく。

拡張子.md.txtの登録

  1. 「設定＞タイプ別設定一覧」で新規タイプを追加。
    markdownとか名前は適当
    f:id:izana1018:20160825013727p:plain

  2. ファイル拡張子にはmd, *.md.txtを設定。
    アウトライン解析方法には先に導入した解析プラグインの Markdown を登録。
    f:id:izana1018:20160825014533p:plain

  3. カラー設定その１
    コメントスタイルのブロック型というものがあるのでここに「```」（ グレイヴ・アクセント - Wikipediaと呼ぶらしいを3つ）を開始～終了に指定する。
    f:id:izana1018:20160825015633p:plain

  4. 正規表現キーワードの設定
    世の中にはMarkdown用の正規表現設定を公開してくれている素晴らしい人がいるので、ありがたく利用させていただきインポートする。
    seashowwww.hatenablog.jp

    こんな感じ
    f:id:izana1018:20160825020859p:plain

  5. カラー設定その２
    これはお好みだけどサクラエディタのMarkdown正規表現とカラー - 人とか機械とかさんのダーク系カラーがいいという人はカラー設定もインポートしてください。

確認してみる

同じMarkdown（元ネタ）ファイルをAtomとサクラエディタでそれぞれ開いたところ。
上がAtom、下がサクラエディタ。

まずはAtom

f:id:izana1018:20160825023835p:plain

サクラエディタ

f:id:izana1018:20160825023838p:plain

Atomより見やすいくらいかも！

さくさく走り書きするときはサクラエディタで、
最後にMarkdownに整形するのはAtom。

といった使い分けするのがよいかなー
ではでは。

お薦め、定番、気になる Markdown対応ソフト for Windows

Markdown 流行 開発

Markdownとは

まずはココを見るがよろし izana1018.hateblo.jp

Markdownエディタ紹介

最近はいろいろとエディタも充実してきている。
オンラインのWEB上で編集出来るもの、UML対応のものなどなど。

2年ほど前からMarkdown記法を取り入れて様々なソフトを使ってきた個人的な感想。

仕事で使うことが多いので以下を重要視している。

ポイント
  • オフラインで利用可能であること。
  • ネット接続設定ではプロキシ設定も出来ること。
  • Markdown以外もテキスト編集機能が充実していること。
  • カスタマイズ性が高いこと。
  • 軽量であること。
  • プレビュー画面は必要なときだけ見れればOK。
  • 文字コード気にせず（ShiftJISやUTF8）ファイルを開いて編集、保存が可能。
  • 改行コードはCrLf

お薦め３つ

後述するような専用エディタでなく、普段使いのテキストエディタでMarkdownも扱いたいという欲張りさん向け。

専用エディタ

「エディタ部」と「プレビュー画面」の2画面分割表示構成が多く、スクロール同期、補完機能、スニペット機能、CSS切替え、HTML保存などの基本機能は標準装備。

なおMarkdown以外では無能。

  • MarkdownPad - The Markdown Editor for Windows
    専用エディタではあるが、痒いところ（Markdown ExtraやGitHub Markdownとか）は有料。
    またMarkdown記法に厳格なのか知らないが、他のソフトで表示できる表組みもグチャグチャ表示になる。

  • MarkDown#Editor | HiBARA Software
    国産専用エディタで標準機能は一通り揃っている。
    ただし、ファイル保存すると改行コードがLfに変換されてしまうのでメモ帳で開くと残念なことになる。
    改行コード以外はいいソフト。

  • Haroopad - The Next Document processor based on Markdown
    なかなかいいエディタ。
    あえて言うなら起動の度にネット接続（更新チェック）が行われる。
    また、たまに寄付のメッセージが表示されるのでちょっと鬱陶しい。

  • StackEdit – Editor
    オンラインのエディタ。
    仕事では情報漏えい懸念があるので使えないが、まさかのUML（シーケンス図、フロー図）対応ｗ
    Markdownでここまでやるか！？と思ってしまう男気を感じるエディタ。

  • Markdown Editor
    こちらもオンラインエディタ。
    Markdownをちょっと触ってみたい人には結構いいかも。

  • CuteMarkEd - The open source, cross-platform Markdown editor
    Markdwonエディタ部側もMarkdown記法によってフォントサイズまで変えてくれるので、プレビュー画面見なくてもある程度の見た目が分かる。
    ただし、カスタマイズ性があまり良くなかったような（忘

気になる

【悲報】Z4でMSC接続できなくなった模様【Android6.0】

Xperia スマートフォン ハック

以前

Z4でMSC接続できると書いてた時期がありました。

izana1018.hateblo.jp

この前

SOV31にAndroid6.0のアップデート通知が来てました。

うっひょーZ4更新ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

とか、はしゃいじゃいました。

即アップデートしました。

「うわー・・・Google検索使いにくなったなー」

とか思ってたくらいで、昨日まで使ってました。

罠でした。。。

f:id:izana1018:20160704222329j:plain

USB設定画面起動できないやん！

もうこの手は使えないらしい(´;ω;｀)

（はぁ諦め

エアブラシ。イイヨー、イイヨー。

プラモデル

完全なる

衝動買い。

寒すぎて

最近はサイクリングもジョギングも凍死しちゃうから行けてない。。

部屋の中で出来ることと言えば～

プラモやっ！

ってな感じでF-2Aという航空自衛隊のヒコーキを作った。
プラモデルなんて小学生くらいの時、無謀にも戦艦大和にチャレンジして途中で断念した依頼な気がする。

はい。失敗ｗ

主脚が折れ、水平尾翼も折れ、塗装（筆塗り）は失敗、クリアパーツが接着剤でザラザラとまぁ黒歴史がまた一つ増えた。

そもそも

プラモデルって塗装前提なんだね！

ガンプラのイメージが強くて着色してあるものだとばかり。

しかも、缶スプレーとか塗装技術が無いせいかすぐ無くなるし・・・

エアブラシ買うっきゃない！（使命感

後輩が

会社の後輩と話してたら「最近流行ってるみたいですよー」ってた。 まぁテキトーなこと言うヤツなのでホントか分からないけど、10体以上塗装するなら買って損しないと思う。

現在

リベンジ中。前回、黒歴史となったF-2A再チャレンジ。

2代目

それにしても

エアブラシ買うと小物を全部塗装したくなってしまう罠。

SEKAI NO CAMERA

ハック セキュリティ

Yahooニュースに

こんな記事が載っていた。

headlines.yahoo.co.jp

うわー、大変だなー。怖いなー。
ということで、ちょこっと調べてみたら、

やっぱり見れた！

ちょっと見ただけでも

  • ファミレスっぽいところ
  • カレー屋
  • コインランドリー
  • 駐車場
  • ペットショップっぽいところ
  • フェリー乗り場
  • 旅館

とかとか。

屋外が多い印象だが、店内のカメラだと人の顔も精細に映ってたりもしていた。

実は1年以上前から

今回話題になっているサイト。
とあるニュースサイトでが紹介されたのが2014年10月31日。

もう1年以上も前だ。

motherboard.vice.com

見れるだけじゃない！？

中にはズームや向きを変えれたりとか出来たりしそうな操作パネルも出てきたところもあった。
実際に操作してないが、好きな方向にカメラ向けれるとか犯罪者バンザイだねー（汗

国別 無防備 防犯カメラ数

さて、該当サイトではアクセス可能なカメラが国別に別れており、数も分かるようになっている。

世界全体では 27,458 ものカメラが外部からアクセス可能になっている。

日本は第2位！

国 公開カメラ数 全体に対する割合
United States 7,561 27.54%
Japan 5,540 20.18%
Italy 1,592 5.80%
France 1,400 5.10%
Netherlands 1,184 4.31%
Russian Federation 720 2.62%
Germany 696 2.53%
United Kingdom 612 2.23%
Korea, Republic Of 545 1.98%
Canada 483 1.76%

3位イタリアを圧倒的に引き離しての上位です。

ただ、この結果が セキュリティ意識が低い からなのか、 ネット接続している防犯カメラの数が多い のか調べてないので、これがナニを意味しているのかは単純には測れない。

気づかない恐怖

ネットへの情報流出って「あっ！流出してる！」とか気付けず、外部からの指摘で判明することが殆どな気がする。

自分もある程度気をつけているが、実際のところその設定が正解なのかわかないので困る。
Googleのアカウント設定とか、できるだけ非公開にしているが本当に非公開なのかよく分からないので不安。

世界のWEBカメラ

今回Yahooニュースで取り上げられているのは防犯カメラだが、実はWEBカメラも似たような状態。
Googleでinurl:ViewerFrameとか検索すると見ることが出来る。

お気をつけあそばせ～

Xperia Z4がok googleを認識しない

Xperia テメーはダメだ

召喚呪文

ちょっと前にGoogle検索がアンドロイドのどこの画面からでも呼び出せるようになった。

例のあれです、あれ

OK Google

簡単に音声検索を召喚できるようになる魔法の言葉。

Xperia Z4ではダメ！？

比較的新しいZ4もちゃんと対応してるようなので、早速やってみたけど

あれ？認識しない？！

OK Google 3回唱えろとか言われて、ちゃんと唱えているのになかなか反応しない。

普通なら

唱える度に↓のように進んでいくはずなんだけど、反応しない
f:id:izana1018:20151219161731j:plain

原因

か、分からないけど

ユーザー補助が怪しい

やっぱり他にも似た現象の人がいて、ユーザー補助をOFFにしたら行けたとのこと。

ユーザー補助で心当たりあるのは 静かに暮らしたい っていうアプリ。
LINEで連続して通知が来たりした時に、五分間は通知しないようにする的なアプリ

ダメもとで

f:id:izana1018:20151219153759j:plain

ユーザー補助の画面からOFFにしてみたら、

ビンゴ！

コレをオフにすると認識するようになった。

  • Googleアプリのキャッシュを消してもなんかいまいち反応しない。

ただし、静かに暮らしたい アプリを消すってことは、静かに暮らせないってことなんだよなー(泣)