iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

Win & Mac 対応!マークダウンの表組みをHTMLで取得する方法があった!

この記事のURLとタイトルをコピーする

先日ご紹介した通り、マークダウン記法を使えば、簡単に表組みHTMLを作成することができます。

ただこれには、「マークダウン記法に対応したアプリ」が必要であり、そのアプリが「HTMLとしてエキスポートできる」というのが条件でした。

Macであれば、アプリ「Byword」を使用すれば簡単に達成できる条件です。しかし、Windowsでは対応したアプリが見つからない。また、Macの「Byword」も価格が結構な高額なので、なかなか手の出しにくいアプリです。

そこで今回は、Chromeの無料ウェブアプリを使用して、マークダウン記法の表組みをHTMLとして取得する方法をご紹介します。少し手間はかかりますが、頭の片隅に置いておくことをオススメします。

マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 001

使用するウェブアプリ

今回使用するのは、Chromeのウェブアプリ「Writebox」です。非常にシンプルなテキストエディタで、マークダウン記法に対応しています。

マークダウンで作成した表組みをHTMLで取得する方法 Chrome版
ダウンロードはこちらから

記述した内容をプレビューできたり、プレーンテキスト・HTMLでのダウンロードができるのは便利。なかなか他にはない気配りです。

さて、このアプリを使用すれば、マークダウンで作成した表組みをHTMLとして取得できます。次の項目で、その方法についてご説明します。

Writeboxを使ってHTMLコードを取得する方法

①アプリを起動したら、マークダウン記法で作る表組みを記述します。記述の法則については、参考記事を参照してください。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 1
▷参考:HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ | あなたのスイッチを押すブログ

②右上のアイコンがプレビュー。これを押すと、ちゃんとHTML上で表組みになっているのが分かります。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 3
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 4

③そうしたらこれをHTML形式でダウンロードします。右上のメニューアイコンから「Download(HTML)」を選択します。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 5

④すると、HTMLファイルがダウンロードされます。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 6

⑤今度はこれを、Chromeで表示させます。ファイルをドラッグして、タブの部分にドロップします。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 7

⑥すると表組みがページ上に表示されます。ここで右クリックをし、「ページのソースを表示」を選択します。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 8

⑦表示されたHTMLコードの中から、「< table>」から「< /table>」までをコピーします。
マークダウンで作成した表組みをHTMLで取得する方法 Chrome版 9

これで表組みのHTMLが完成です。これをブログの記事本文中に挿入すれば、そのまま表組みが完成します。

ちょっと手間ではありますが、WindowsやMacに関係なく、Chromeさえ利用できる環境なら使える技ですので、覚えておいて損はないでしょう。

あとがき

このアプリを紹介してくださったのは@Asfia320yさんでした。私も言われるまで、こんな便利なウェブアプリがあるとは知りませんでした。

この場を借りてお礼させてください。本当にありがとうございました!

ウェブアプリということで、今回の方法は「インターネットに繋がっている」というのが条件になります。ですが、WindowsでもMacでも使える、マシンに依存しない方法なのは便利です。

私も、会社のWindows環境で使っていくことになりそうです。

それでは、今日はこのあたりで。

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。
管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。
各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です