1. esaのアカウントを作成してMarkdownを体験してみる
Updated
2021/8/8 8:32
Author
Jumpei Ikegamiあなたは社内ドキュメントを書くときにどのようなツールを使っているでしょうか？たとえばWordやGoogleドキュメントなどのリッチテキストエディタを使うと、見出しや表などを使ってキレイにフォーマットを整えたり、画像やリンクを埋め込んだりすることができます。ただし、フォーマットを整えること自体にコストがかかってしまい、ドキュメントを書くのが億劫になってしまうこともあるでしょう。逆に、プレーンテキストでメモを残すことができるツールであれば、フォーマットを気にせずにラフなメモを残すことができます。しかし、単なるプレーンテキストの場合、見出しを大きく表示したり、画像を挿入したりすることはできません。
本当であれば、プレーンテキストを書くような気軽さで、ドキュメントのフォーマットを整えたり画像やリンクを埋め込んだりできたら一番便利ではないでしょうか？そんな良いとこ取りをするためのものが、Markdownです。次の画像は、Markdownツールの1つであるesaというサービスのドキュメント編集画面です。左でMarkdownと呼ばれる記法を使ってプレーンテキストを入力すると、右にキレイにフォーマットされたドキュメントが表示されます。画像やリンクにも対応しています。
今回のチュートリアルでは、Markdownを使ったドキュメント管理ツールであるesaのフリートライアルに登録して、Markdownの便利さを体験してみましょう。
前提知識
特に必要な前提知識はありません。
なお、esaの登録にはGoogleアカウントが必要になります。
作るもの
esa.ioのフリートライアルに登録し、Markdown記法を使ってドキュメントを作成してみます。
体験すること
このチュートリアルによって、以下を体験します。
- esaのフリートライアルに登録する
- Markdownで見出しや箇条書きを表現する
- Markdownで引用やコードブロックを表現する
- Markdownでリンクや画像を表現する
- Markdownで表を表現する
- プレーンテキストエディタとリッチテキストエディタの違いを理解する
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
esaのフリートライアルに登録する
ここまでの説明で、「Markdownって何？」とか「リッチテキストとプレーンテキストの違いは？」などといった疑問が湧いたかもしれません。しかし、まずはMarkdownを使って何ができるのかをとにかく体験してみましょう。これらの用語の詳しい（そしてときに退屈な）解説は最後にまわしましょう。
Markdownを体験できるツールはたくさんありますが、今回は私が個人的に推しているドキュメント管理ツールであるesaを使ってみましょう。esaは有料サービスですが、フリートライアル期間が60日間設けられています。Markdownを体験するだけであれば、60日もあれば十分でしょう。（もちろん、そのまま使いたい場合は料金を払って使い続けるのもおすすめです。）
画面の"Create your new team"と書いてある箇所に、使いたいサブドメイン名を適当に半角英数で入力し、フリートライアルボタンを押しましょう。なお、esaへの登録にはGoogleアカウントが必要になります。画面の案内にしたがって操作していくと、フリートライアルを開始することができます。
Markdownでドキュメントを書いてみる
esaにログインできたら、さっそく新しいドキュメントを書いてみましょう。左にあるナビゲーションの一番上の[NEW POST]ボタンを押すと、次の画像にあるようなドキュメント編集画面に移動します。タイトルを1行で入力する場所とドキュメントのコンテンツを入力する広いテキストエリアが見えます。今回は、このテキストエリアに実際にMarkdownを書いてみながら、右側でどのように表示されるのかを確認していきましょう。
まずは、次のMarkdownを書いてみてください。コピペで構いません。
Markdown
見出しと箇条書きは、ドキュメントを書くときに頻繁に使われます。Markdownを使うと、#や-と半角スペースを行頭に付けるだけで、簡単に書くことができます。実際には、次の画像の右側のようにフォーマットされて表示されます。便利ですね。
ここまでできたら、いったんドキュメントを保存してみましょう。保存するには、右下の[Ship It!]ボタンを押します。ちなみに、[Save as WIP]を押すと下書き状態で保存できます。
保存すると、ドキュメント閲覧画面が表示されます。エディタ画面の右側に表示されていたのと同じように、見出しや箇条書きが見やすく表示されていることがわかります。このように、中身は単純なテキスト情報ですが、Markdownのルールにそって書くことによって、閲覧時は見やすい表示に整えてくれます。これが、Markdownを使って得られる体験です。
Markdownでできるさらに複雑な表現を体験する
Markdownを使うと、プレーンテキストだけではできないさらに複雑な表現も可能です。よく使う記法について、いくつか体験してみましょう。
esaのドキュメント閲覧画面から編集画面に戻るには、タイトルの右にある鉛筆マークをクリックします。
引用やコードブロック
先ほどの続きで、次のMarkdownを入力してみましょう。
Markdown
地の文とは区別したい文章がある場合は、引用やコードブロックを使って表示します。なお、コードブロックは本来プログラムのコードを見やすく表示するためのものです。
リンクや画像を表示する
続いて、次のMarkdownを入力してみましょう。
Markdown
このように、Webページへのリンクを書きたい場合も、アドレスを見せずに実際のリンクとして機能させることができます。
画像の場合も、画像URLがすでに発行されている場合は次のように書くことで表示させることができます。
Markdown
しかし、一般的には手元のPCに保存された画像をドキュメントでそのまま直接使えた方が便利です。そのため、esaには画像アップロード機能があります。左下の[Attach Files]という領域をクリックし、esaのサーバーにアップロードしたい画像を選択することで、画像URLが発行されMarkdown中にも画像が挿入されます。
なお、Markdownには一部のHTMLを直接記述することができます。esaの画像アップロード機能を使った場合も、デフォルトではHTMLのimgタグが挿入されます。
表を表示する
なんと、Markdownでは簡単な表も書くことができます。次のMarkdownを入力してみましょう。
Markdown
少し複雑ですが、正しく表の形式でMarkdownが記述できると、次の画像のように表として表示されます。
プレーンテキストエディタとリッチテキストエディタ
ここまでが、よく使われるMarkdown記法の紹介でした。細かいものを挙げればもっとたくさんありますが、一通りMarkdownで何ができるかが体感できたのではないでしょうか。
ここで改めて、世の中のテキストエディタの分類と、その中でのMarkdownの位置付けについて簡単に説明します。
ドキュメントなどのテキストを書くソフトウェアのことを、テキストエディタと呼びます。テキストエディタには、大きく分けると「プレーンテキストエディタ」と「リッチテキストエディタ」の2種類があります。
プレーンテキストエディタとは、たとえばWindowsのメモ帳アプリです。プレーンテキストの名前の通り、シンプルにただ文字と改行だけで文章を書くようなエディタです。文字を装飾したり、文章の構造を表示スタイルで示したりといったことは基本的にはできません。シンプルな分、あるプレーンテキストエディタで書いた文章を別のプレーンテキストエディタに移すのも、コピペで簡単にできます。
一方、リッチテキストエディタとは、たとえばWordやGoogleドキュメントです。リッチというだけあって、プレーンテキストではできなかったような文字装飾、リンク、画像の挿入などが可能です。しかし、たとえばWebページでコピーした文章をリッチテキストエディタにペーストすると意図と違う表示になるなど、ツール間でのテキストの移動が難しいという難点があります。また、文章の装飾やレイアウトに凝り始めると時間がかかってしまい面倒である、というデメリットもあります。
今回のチュートリアルで触ったesaのエディタは、プレーンテキストエディタとリッチテキストエディタの、どちらでしょうか？キレイにフォーマットされるのでリッチテキストエディタと答えたいところですが、実際に文章を編集する部分はプレーンテキストで記述しているので、プレーンテキストエディタに分類されます。
esaのようなMarkdownが使えるエディタは、入力と表示を分けることで、プレーンテキストエディタの欠点であった「文字を装飾したり文章の構造を表示スタイルで示したりができない」という弱点を克服しました。いわば、プレーンテキストエディタとリッチテキストエディタの良いところを融合したような存在なのです。もちろん、一般的なリッチテキストエディタに比べると、Markdownで表現できる範囲はかなり狭いです。ただし、簡単なドキュメントを見やすく書くだけであれば、Markdownで十分であることがほとんどです。逆に機能が制限されている分、レイアウトに悩まずにスラスラ書くことができます。
もしもドキュメント管理に悩んでいて、Markdownが使えるドキュメント管理ツールを使っていない場合は、ぜひ仕事でも使ってみてください。esa以外のMarkdownが使えるドキュメント管理ツールについては、「Markdown ドキュメント管理ツール」などで調べてみてください。
以上で、今回のチュートリアルは終了です。お疲れさまでした。