logictktの落書き帳

記事の内容が古くなっている事があります。記事作成日にご注意ください。

SublimeText 3でMarkdownな文章をSlideshowする

目標

Pandocとreveal.jsを使い、Markdown書式で書かれているファイルをスライドショーさせる。 ついでにEvernoteにバックアップさせる。

使うもの

sublime text

Pandoc

reveal.js

Evernote

準備

Pandocを入れる

brew install pandoc

reveal.jsを落としてくる

githubから最新のリリースを落としてくる。 保存場所はどこでもいい。

僕は~/.pandoc/reveal.jsになるように保存してます。

SublimeTextにPandoc入れる

Package Control で pandoc で出てきます。

sublimeの設定

// Preferences → PackageSettings → Pandoc → Setting - User
{
  "default": {
    "pandoc-path": null,
    "transformations": {
      "revealjs": {
        "scope": {
          "text.html": "html",
          "text.html.markdown": "markdown_github",
        },
        "pandoc-arguments": [
          "-t", "revealjs", "-s", "--slide-level=1", "--self-contained", "-V", "revealjs-url:/Users/ユーザー名/.pandoc/reveal.js", "-o", "/Users/ユーザー名/Desktop/output.html"
        ]
      },
      "revealjs-2": {
        "scope": {
          "text.html": "html",
          "text.html.markdown": "markdown_github",
        },
        "pandoc-arguments": [
          "-t", "revealjs", "-s", "--slide-level=2", "--self-contained", "-V", "revealjs-url:/Users/ユーザー名/.pandoc/reveal.js", "-o", "/Users/ユーザー名/Desktop/output.html"
        ]
      }
    },
    "pandoc-format-file": ["docx", "epub", "pdf", "odt", "beamer"]
  }
}

デスクトップにoutput.htmlで出力されるようにしてます。

ファイル作成

適当にMarkdown書式で書く。
書き方によってスライドショーの構成が変わるが、いまいち仕様がわからない。。。

書き出す

sublimeでコマンドパレットで「pandoc」
選択候補はどちらでもいいです。
slide-levelを変えていますが、詳しくは上記のサイト見てください。
(よくわかってません)

ブラウザで見る

htmlファイルなので、ブラウザで見れます。

ショートカット

  • esc : 一覧
  • 矢印 : 移動
  • Enter : 一覧時に詳細表示
  • . : フェードアウト

などなど、他にもあります。

PDF

スライドをサイトにアップする時用にPDFで保存できます。

  • URLに?print-pdfをつける。
  • 印刷からPDFで保存

Evernoteに保存

SublimeTextにEvernote入れる

Package Control で everonte で出てきます。

初期設定

Command Palette > Evernote: Reconfigure
Evernoteが開くので DeveloperToken を作って設定してください。
Sublimeの下の方にしれっと入力欄がいます。

保存

Command Palette > Evernote: Send to Evernote
Sublimeの下の方にしれっと入力欄がいるので、タイトルなどを設定して保存します。

キーバインド

勝手に設定されないらしいんで、自分で設定してください。


おまけ

SublimeのおすすめMarkdown用Package

Evernoteの設定

{
  "code_friendly": true,
  "code_highlighting_style": "github",
  "enable_table_editor": true,
  "inline_css": {
        "pre": "color: #000000; font-family: monospace,monospace; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #cccccc; border-radius: 3px; overflow: auto; padding: 6px 10px; margin: 20px 0;",
        "code": "color: black; font-family: monospace,monospace; font-size: 0.9em; margin: 20px 0;",
        "inline-code": "color: #000000; font-family: monospace,monospace; padding: 0.1em 0.2em; margin: 0.1em; font-size: 85%; background-color: #F5F5F5; border-radius: 3px; border: 1px solid #cccccc;",
        "h1": "margin-bottom: 1em; margin-top: 1.2em;",
        "h2": "margin-bottom: 1em; margin-top: 1.2em;",
        "h3": "margin-bottom: 1em; margin-top: 1.2em;",
        "h4": "margin-bottom: 1em; margin-top: 1.2em;",
        "h5": "margin-bottom: 1em; margin-top: 1.2em;",
        "footnotes": "border-top: 1px solid #9AB39B; font-size: 80%;",
        "hr": "color: #ccc; height: 5px; background-color: #ccc; margin: 60px 10px; border: none;",
        "sup": "color:#6D6D6D;font-size:1ex",
        "blockquote": "border-left: .5ex solid #BFBFBF; margin-left: 0px; padding-left: 1em; margin-top: 1.4285em; margin-bottom: 1.4285em;",
  },
  "notes_order": "updated",
  "sort_notebooks": true,
  "md_syntax": "Markdown Extended.tmLanguage"
}

// evernote
{ "keys": ["ctrl+n", "ctrl+s"], "command": "send_to_evernote" },
{ "keys": ["ctrl+n", "ctrl+o"], "command": "open_evernote_note" },
{ "keys": ["ctrl+n", "ctrl+u"], "command": "save_evernote_note" },

あとがき

普段からメモをSublimeTextでMarkdownで書いて保存していたんですが、電車内などでPCが開けない時にメモを見たい時があり、SublimeEvernoteに保存する方法を調べました。

開発時に書いたコードの書き方や、ポエム的なメモをそのままスライドにしたら社内LT出来るんじゃないか。
と思いMarkdownからスライドを作る方法を調べました。

QiitaやGitpatchなどなど様々なネットサービスがありますが、メモをネットに上げる気にもなれず、、、
このような手順に落ち着きました。

Pandoc、reveal.js共に仕様がわかっておらず中途半端な記事ですが、ココまで来るのにネットに情報が少なかったので、このレベルで記事を上げることにしました。

終わり

Macで使いやすいようにWindows用外付けキーボードをカスタマイズする(Sierra)

先日、新しいキーボードを買おうと思いたち、Realforceを買いました。
そちらをMacの標準キーボードの用に使うためにした設定を紹介します。

やりたいこと

などなど

使うアプリ

以前のOSだとKarabinerやSeilというアプリで設定したのですが、Sierraから下記のアプリにまとまりました。

karabiner-Elements

github.com

方法

方法というより設定画面を晒します。 f:id:LogicTkt:20170403143037p:plain

ちょっと並び順が醜いですが、これでだいたいMacと同じキー配列でWindowsキーを使うことができます。
※ 2017/04/03 設定を追加

備考

他にも切り替えたいキーが有る場合、karabiner-Elementsといっしょにインストールされる、「Karabiner-EventVewer」というアプリを使えばそれがどういう名前で認識されているキーなのかを調べることができます。

また、アンダーバー、@などが打てない(違う文字が出力される)という場合は、日本語キーボードとして認識されていない場合があります。
その場合は、「システム環境設定」から「キーボード」を開き、左下にある「キーボードの種類を変更」から日本語キーボードを設定してください。

Mac-SierraのFinderで隠しファイルを表示する方法

MacOSのSierraからFinderのショートカットで隠しファイルの表示・非表示をトグルさせることができます。

command + shift + .

エディターとかIDEとかでコードをコメントにするショートカットと同じですね。

MacのFinderで新規ファイルを作る方法

Finderって新規フォルダは作れますけど、新規ファイルは作れないんです。

ボクは新規ファイルが作りたいんです。

色々調べてたら Automator を使えばできることがわかりました。

こんな風にFinderのツールバーにアプリを置いて対応します。

f:id:LogicTkt:20170316203407p:plain

Automatorでのアプリの作りかた。

まず「Automator」を開き、書類の種類は「アプリケーション」を指定します。

f:id:LogicTkt:20170316203540p:plain

そして、左側のツリーから「AppleScriptを実行」を選びます。

実行するコードを下記に置き換えます。

tell application "Finder" to make new file at (the target of the front window) as alias

f:id:LogicTkt:20170316203700p:plain

できたらアプリを保存します。
「アプリケーション」のフォルダとかに保存すると良いと思います。


Finderに設定する

まずFinder2窓開きます。
片方の窓は、先程作ったアプリがあるディレクトリを開いておきます。
f:id:LogicTkt:20170316203945p:plain

そして、もう一つの窓でツールバー上で右クリックして、「ツールバーのカスタマイズ」をクリックします。 f:id:LogicTkt:20170316204049p:plain

そしたらこんな画面になります。 f:id:LogicTkt:20170316204111p:plain

この画面の状態で、先程作ったアプリをツールバーの開いているスペースにドラッグ&ドロップします。 f:id:LogicTkt:20170316204815g:plain

完成。

これで、Finderで追加したアイコンをクリックすると、開いているディレクトリに新規ファイルが作成されます。

Mac-SierraでFinderの並び順でフォルダを先頭に表示する

MacのFinderで並べ替えを行う時に、フォルダとファイルを分けたいことってあると思います。

標準の並び順変更で「種類」を選べば「画像」とか「動画」とか「フォルダ」とかでジャンル分けできるんですが、
思ったジャンル分けをしてくれない。

f:id:LogicTkt:20170316194122p:plain

wmvは「ムービー」になって欲しい。

El Capitan 以前は XtraFinder でできたんですが、OS が上がって対応しなくなったので乗り換えを探してました。
そうしたら Sierra から標準でできるようになってました。

フォルダを先頭に表示する方法

Finderの環境設定に「名前で並べ替える時にフォルダを丈夫に表示」という項目が増えています。

Finderの環境設定はここから開けます。 f:id:LogicTkt:20170316194419p:plain

環境設定の画面の、「設定」タブの一番下に「名前で並べ替えるときにフォルダを上部に表示」というチェックボックスがあるのでコレをチェック。


自分のお気に入りは『フォルダを先頭にして上で、並び順を「なし」にする』です。 f:id:LogicTkt:20170316194651p:plain

なぜ並び順が「なし」なのかというと、折りたたみができるようになるからです。
折りたたみが使えると、キーボードの矢印キーのみでフォルダ階層を上下に潜ることができるようになります。
f:id:LogicTkt:20170316195305p:plain

なぜ「なし」以外はできないのかは知りません。誰か教えてください。

似ているサイトを見つけることができるChrome拡張機能

Google Similar Pages

chrome.google.com

Google Similar Pagesという拡張機能があります。
これはGoogle自身が提供している拡張機能で、開いているサイトと似ているサイトを紹介してくれます。

試しにYahooでやってみると

f:id:LogicTkt:20170307200626p:plain

こんな結果になりました。
あながち間違いでもないようなサイトがリストされています。


お気に入りのサイトと似たようなサイトを探したり。
競合他社のサイトを見つけたり。

地味に便利なので、入れておいてもいいかもしれないです。

Macで絵文字を打つ

Macで絵文字を打つためには

Macで絵文字を打つためのポップアップを出すショートカットがあります。

「ctrl + command + space」

です。

このショートカットを打つと、カーソルのある部分に絵文字のポップアップが出てきます。
あとは打ちたい絵文字を選んでクリックすると、カーソルの箇所に文字が挿入されます。

f:id:LogicTkt:20170307171853p:plain


f:id:LogicTkt:20170307171858p:plain