![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKljN-BqO7ZgNen9cxd12Rl48WAFvKJhubPNGY-sYR5IWrgDuPPzo2MuEgupQeJZCydNoPDUsD_3Z8YloXDBBv41o-Mlg9uj6TawLfwsSeudbh94IYLlxpZuCfdw7m70Ml-RF3GEK9vg/s120/Automator+Resized.png)
わたしの環境
- macOS Mojave (version 10.14.1)
- Automator.app (version 2.9)
- Homebrew (version 1.7.7)
- Node.js (version 10.12.0)
- npm (version 6.4.1)
- md-to-pdf (version 2.1.5)
おおまかな手順
- Homebrewのインストール
- Node.jsのインストール
- md-to-pdfのインストール
- Automatorでクイックアクションを作成
- 動作確認
1. Homebrewのインストール
Homebrewのインストール方法は公式サイトを参照ください.
Homebrew The missing package manager for macOS
一応ここにも記して置きます. まずはTerminal.app(ターミナル)を立ち上げます. そして,次のコマンドを入力しReturnでインストールは自動的に行われます.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
簡単ですね!
2. Node.jsのインストール
先程インストールしたHomebrewを使って,Node.jsをインストールします.
brew install node
これで最新のNode.jsとそのパッケージマネージャーであるnpmがインストールされます. どんどん行きましょう!
3. md-to-pdfのインストール
Node.jsを利用したツールのインストールや管理はそのパッケージマネージャーであるnpmで行います. npmを使ってmd-to-pdfをインストールしましょう.
npm install md-to-pdf -g
オプション-gの付与を忘れずに. これを忘れるとインストールされたツールが作業ディレクトリ内でしか利用出来なくなります. gはGlobal(グローバル)の略で,このオプションを付与することでどのディレクトリからでもインストールしたツールを利用することが出来るようになります. 詳細はnpmの公式ドキュメントをご覧ください.
md-to-pdfを使ってみる
ここでmd-to-pdfを使ってみましょう. 使い方は簡単. Markdownファイル名を第一引数に,出力ファイル名を第二引数に渡すだけです.
md-to-pdf input.md output.pdf
変換には少々時間がかかります. 文法の誤りなどが無く,無事変換が完了されると出力ファイル名のPDFファイルが生成されます. ちなみに,md-to-pdfの代わりにmd2pdfというコマンド名からも利用出来ます. こちらの方が楽なので以後,こちらで書いて行きます.
md2pdf input.md output.pdf
(↑ これでもOK! ↑)
4. Automatorでクイックアクションを作成
さて,ここからが本題です. Automator.appを立ち上げましょう. 立ち上げたら,ウィンドウ左下にある“新規書類(New Document)”をクリックします.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhydNr4vnhJrb14RXVTLVhkxDPhXwnTE-q57ibNFMgKI9umPcSqUBphyALg-xQTD7cZqUBqdHIAJNqkOSn9KS9I83K_agihuqqSP79p9KCa8SA_6cE5x6lJGOdG1_wiW2VplGe_G0aX4Q/s1600/5.png)
その後“クイックアクション(Quick Action)”をクリックし(Mojave以前のmacOSの場合は“サービス”をクリック!),“選択(Choose)”ボタンをクリックします.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ATZS8EyObQfylUhrpSs1zR_LnzjhKItQsKwpbCExtpSWnhei523wLeC1SEavMCE4VEp5Sjr8qR0Ly7uWyH_F8GTZGa2tH4xeSUrZOSW3IVeOlr-3gpB9tUaF3SZken6d0D8OFEAGKQ/s1600/6.png)
これでワークスペース画面が現れます.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPJQZT6BHhyphenhyphen48YgSKJxrIHjdH8bbBGabJvSHLMsMV9jdG5idg0r5Ey5a_Qcyd48mO93YH0sxSjecIC20bIWGpPcxjEzPvV8WOIX7xC21V-hhCpiU1nmkgRygx9AGT-z1kZxq_Jj-URA/s1600/7.png)
まず始めに,ターゲットとなる入力ファイルを決めます. ターゲットは.mdファイルですが,Automatorではターゲットファイルを拡張子で指定することが出来ないので(Appleデベロッパーの方々,どうか拡張子ごとにクイックアクションを作成出来るようにしてください🙏)下画像赤枠内のように“自動(テキスト)(Automatic (text))”を“ファイルまたはフォルダ(files or folders)”へ,“検索対象(in)”を“Finder(.app)”へ変更しましょう. これで,Finderでファイルかフォルダを選択した時のみ,このクイックアクションが利用出来るようになります.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrf5LuRUJLVgjitnLeuTlsA1Uj5M7aMWHSZId5QnBhrgfLA78m-_L9YhD8psxT97c4aKVaQKyrV6bP5QQ1b9YYBRUY3oCLAFEYGzCBIFYRNBvP4dgjFgTYp-8lanTDT_VPG04pZGgjXg/s1600/01.png)
ウィンドウ左側のアクションライブラリから“選択されたFinder項目を取得(Get Selected Finder Items)”アクションを探して“ワークフローを作成するには…”と書かれたワークスペース内へドラッグ’nドロップしましょう. 検索窓に“選択さ(get selected)”と入力すると簡単に見つけることが出来ます.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXavZONFH6_ujeJFQG7oHcqso2ETWm1SY4-rkk8gDAgCkntdC6TWO1IMt9y07EJ11V3lAlSp9-UfGCBE8Yl70raSxjomUP4QufyEUaDBvALQtW5rqz8TxJpl08XSRxxiwGwa2vqRJgQ/s1600/02.png)
続けて,アクションライブラリから“シェルスクリプトを実行(Run Shell Script)”アクションをドラッグ’nドロップして先程のアクションにつなげましょう.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhFVxzXi0sLT1r8lAEAvoQI41OuH0DPxgH8hk3-DIPcYZlJAueLDfkD1nEM5AqfhCEBozQszpiqavYUlhmZ5x2P04QYQwvcQhmr2yF3PDRyZH3X2z0zo5gfhv9lYO9gRmEnJnM_zBDg/s1600/03.png)
後は入力されたファイルを元に,md-to-pdfを使ったシェルスクリプトを実行し,MarkdownをPDFへ変換すれば完成です!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41w2wZhYMq12VAJaM_o3Nfw93wupMJijAYNuGhOfDWhofUdL09BhyphenhyphenGWsWJGtSEuT7_mXY3grnkOlc3_pgBczDr09YO6PO1iYTB33eNW__LxfmyyePUSsks3tE4auKVm1kDfr8nlO5tQ/s1600/04.png)
下画像赤枠のように“シェルスクリプトを実行”アクションの“入力の引き渡し方法(Pass input:)”を“stdinへ(to stdin)”から“引数として(as arguments)”へ変更しましょう.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpVJRZCwz-3nfgVPB7UYXtlihMXIePJRW3q1YboAPMKYCsKzY5TfnxAs_RYmXLQFJQZ5FNlDTVq1ym0IpcemWIKWvO0hptJ7_3jmHCdzpA9NIT7XWMn_xGHOdU9vlca7vIWPrRuf9Lw/s1600/05.png)
すると,シェルスクリプトを入力するテキストエリアにfor文が現れます(上画像のように!). これを次のように書き換えましょう!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQF6M_ik3DnOMSDxbhTqanNQVY25EnjvQMzB89brekG_0IrgwE4D9-DNODI1i3mHfiBR7NSejXzSVQFbRu54xeP4ixhfto7LomP3oKJipYrxMauKRFToRzrrxjIoyABS9chQcjQO8-8g/s1600/06.png)
それでは完成したクイックアクションを保存しましょう!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLk3RY_niAHxRccDMmJuBpkvcHL-pGtXgpUUNKeOVG2BKlVyhPCoiH9FXC3ZLSgIUe_GmpeDPLif5UaLvCc4hcevToYwk8crywGOq3q-9L333ZOpvgMvRw2SVta-4qUw6s0QoY8OqYg/s1600/07.png)
今回は“Markdown to PDF”という名前で保存してみました. さぁ動作確認です!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhydNr4vnhJrb14RXVTLVhkxDPhXwnTE-q57ibNFMgKI9umPcSqUBphyALg-xQTD7cZqUBqdHIAJNqkOSn9KS9I83K_agihuqqSP79p9KCa8SA_6cE5x6lJGOdG1_wiW2VplGe_G0aX4Q/s1600/5.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ATZS8EyObQfylUhrpSs1zR_LnzjhKItQsKwpbCExtpSWnhei523wLeC1SEavMCE4VEp5Sjr8qR0Ly7uWyH_F8GTZGa2tH4xeSUrZOSW3IVeOlr-3gpB9tUaF3SZken6d0D8OFEAGKQ/s1600/6.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPJQZT6BHhyphenhyphen48YgSKJxrIHjdH8bbBGabJvSHLMsMV9jdG5idg0r5Ey5a_Qcyd48mO93YH0sxSjecIC20bIWGpPcxjEzPvV8WOIX7xC21V-hhCpiU1nmkgRygx9AGT-z1kZxq_Jj-URA/s1600/7.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrf5LuRUJLVgjitnLeuTlsA1Uj5M7aMWHSZId5QnBhrgfLA78m-_L9YhD8psxT97c4aKVaQKyrV6bP5QQ1b9YYBRUY3oCLAFEYGzCBIFYRNBvP4dgjFgTYp-8lanTDT_VPG04pZGgjXg/s1600/01.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXavZONFH6_ujeJFQG7oHcqso2ETWm1SY4-rkk8gDAgCkntdC6TWO1IMt9y07EJ11V3lAlSp9-UfGCBE8Yl70raSxjomUP4QufyEUaDBvALQtW5rqz8TxJpl08XSRxxiwGwa2vqRJgQ/s1600/02.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhFVxzXi0sLT1r8lAEAvoQI41OuH0DPxgH8hk3-DIPcYZlJAueLDfkD1nEM5AqfhCEBozQszpiqavYUlhmZ5x2P04QYQwvcQhmr2yF3PDRyZH3X2z0zo5gfhv9lYO9gRmEnJnM_zBDg/s1600/03.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41w2wZhYMq12VAJaM_o3Nfw93wupMJijAYNuGhOfDWhofUdL09BhyphenhyphenGWsWJGtSEuT7_mXY3grnkOlc3_pgBczDr09YO6PO1iYTB33eNW__LxfmyyePUSsks3tE4auKVm1kDfr8nlO5tQ/s1600/04.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpVJRZCwz-3nfgVPB7UYXtlihMXIePJRW3q1YboAPMKYCsKzY5TfnxAs_RYmXLQFJQZ5FNlDTVq1ym0IpcemWIKWvO0hptJ7_3jmHCdzpA9NIT7XWMn_xGHOdU9vlca7vIWPrRuf9Lw/s1600/05.png)
export PATH=/usr/local/bin
for f in "$@"
do
out=$(echo ${f} | sed -r "s/(.md)$/.pdf/g")
md2pdf "${f}" "${out}"
done
1行目export…の部分でコマンドラインツールを利用出来るようにしています. for文内1行目は“ファイル名.md”という文字列を“ファイル名.pdf”という文字列へ,正規表現とsedを使って変換し,変数outへ代入しています. そしてfor文内2行目でmd2pdfコマンドを呼び出しているのが見えると思います. ここで入力された.mdファイルがPDFファイルへと変換されます. ちなみに${f}というのがFinderで選択されたファイルまたはフォルダ名になります. つまりfor文内2行目ではmd2pdf 選択されたファイル名.md 選択されたファイル名.pdfが実行されているということになります. pandocを利用している方はfor文内2行目の部分を適宜書き換えてみてください.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQF6M_ik3DnOMSDxbhTqanNQVY25EnjvQMzB89brekG_0IrgwE4D9-DNODI1i3mHfiBR7NSejXzSVQFbRu54xeP4ixhfto7LomP3oKJipYrxMauKRFToRzrrxjIoyABS9chQcjQO8-8g/s1600/06.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLk3RY_niAHxRccDMmJuBpkvcHL-pGtXgpUUNKeOVG2BKlVyhPCoiH9FXC3ZLSgIUe_GmpeDPLif5UaLvCc4hcevToYwk8crywGOq3q-9L333ZOpvgMvRw2SVta-4qUw6s0QoY8OqYg/s1600/07.png)
5. 動作確認
.mdファイルを右クリックすると右クリックメニューの“クイックアクション”に“Markdown to PDF”が現れます. もしくは右クリックメニュー下部に“Markdown to PDF”が表示されるはずなので,それをクリックします. Finderウィンドウのプレビューペインからクイックアクションとして実行しても良いでしょう. Mojave便利!
3. Finderプレビューペインのクイックアクションからでも実行できちゃう!
クイックアクションを実行するとメニューバーにクイックアクションのアイコンが表示されます. これは処理中という意味です. しばしお待ちを…
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4VTo_3b5TOcr-JxsCOmif8zG257c7oxw9Lz52bHWpU8DHcpS8FRzc9cKWihWLwhG26CNhwBnl3zeZzAnWr-jGZN3UcXS3hqjckO2NOC0dq-CxRTjAvPrJiSm5ZWE14GP9VXUSToRSQ/s1600/processing.png)
少し待つとクイックアクションの処理が完了しPDFが生成されます! やったね🚀
今回テスト用に使った.mdファイルはGitHubからダウンロードできます
Markdownについて少し補足: ローカルの画像を挿入したい場合は同じディレクトリに挿入したい画像を用意して,ファイル名を指定しましょう. こんな風に…
最後に,今回テストに使用した.mdファイルおよびAutomatorのアイコン画像と生成されたPDFファイルをGitHubに置いておきます. MarkdownToPDF | GitHub.com Happy Markdown Life!!🖖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1gXZAy8P1eLAJzAHI5VqbyD2S4veErlPk6uaJCfvNMaIWudKbg2jGn24PlwZ9jL0-7_muS_pAwumfSkSEUDSw2ezueepFnV9UJ87Ca0kPlSva7R4SJ4u0LgFZPRgp681IsmsIlxl78w/s1600/Quick+Action+in+Finder+Preview+Pane.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4VTo_3b5TOcr-JxsCOmif8zG257c7oxw9Lz52bHWpU8DHcpS8FRzc9cKWihWLwhG26CNhwBnl3zeZzAnWr-jGZN3UcXS3hqjckO2NOC0dq-CxRTjAvPrJiSm5ZWE14GP9VXUSToRSQ/s1600/processing.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVYlJN8p5bvBB3rnDDyIKgdRvJFvllZoRBJg_RC0Cgy42FlBqT5Edomuc9U4KqE47iWReDWNfzGbIHWAC7qH3ndPbiQDmGdDsqhdnIfMx1onMoKgYMVPWazP4dfbD5Pmm_IPzvN2ErA/s1600/hello.png)
![Alt text](image.png "Image Title")
今回使用したmd-to-pdfはMarked.jsで.mdファイルをHTMLへと変換した後,そのHTMLをPuppeteer(いわゆるヘッドレスChromium)でPDFへ変換しています. 出力されたPDFのスタイルなどをカスタマイズしたい場合はmd-to-pdfの公式のドキュメントを一読すると良いかもしれません.
最後に,今回テストに使用した.mdファイルおよびAutomatorのアイコン画像と生成されたPDFファイルをGitHubに置いておきます. MarkdownToPDF | GitHub.com Happy Markdown Life!!🖖
![](http://img2.blogblog.com/img/icon18_edit_allbkg.gif)
1946986581191757288
https://www.storange.jp/2018/11/markdownpdf.html
https://www.storange.jp/2018/11/markdownpdf.html
MarkdownをPDFに変換するクイックアクションを作成する
2018-11-25T21:08:00+09:00
https://www.storange.jp/2018/11/markdownpdf.html
Hideyuki Tabata
Hideyuki Tabata
200
200
72
72
![](https://lh6.googleusercontent.com/-aatwVu6vLek/UK-rk-jfWzI/AAAAAAAAB4k/6gO6IQURbGY/s200-c/seeker5084-R_iOSicon.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKljN-BqO7ZgNen9cxd12Rl48WAFvKJhubPNGY-sYR5IWrgDuPPzo2MuEgupQeJZCydNoPDUsD_3Z8YloXDBBv41o-Mlg9uj6TawLfwsSeudbh94IYLlxpZuCfdw7m70Ml-RF3GEK9vg/s72-c/Automator+Resized.png)