マークダウン(markdown)とは? 書き方、記法

最近になって、markdownが注目されている。

いろいろなテキスト処理のソフトがあったが、WEBと連携する時代になって、結局は、原点に回帰したようである。何でも出来る、WORDやwysywigエディタよりも、シンプルなものが、最高であったという話である。

Evernote や リッチテキストエディタすらも、美しくなかった。重要なのは、テキストの長年の保存性、覚えることの少ない簡潔さ、どのOSやWEBアプリにも適用できる普遍性であろう。タイプパッドやタイプライターに近いほど、実は優れた書式だったということであろう。

ウィキペディアでは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グルーバー(英語版)により作成された。アーロン・スワーツも大きな貢献をしている。Markdown の記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

とある。

難解な文章ですね。
要するに、キーボードを打ってテキストファイル(.txt)の文章を作れます。これをホームページに掲載し見やすく表示できるように、工夫された書き方のことです。出来上がったmarkdown ファイル(.md)を保管して置くと便利です。
いつでも軽快にスマホやパッドでも扱えます。

重要なことは、スマホアプリのテキストエディタで書いたり、閲覧できますので、何十年も仕様変更なく安心して保存し使用できる簡素さでしょうか。

ワード文書やノート文章は、ソフトの進化とともに、覚えることが増え過ぎてアップデートも多く大変でした。

実際に、見ればすぐにわかります。

下記の画像は、私がiPadで使っているEDHITAという名のアプリで書いて表示したものです。

もう一つ重要なことは、簡単なWEBアプリでホールページが作れることでしょうか。
img_0149
画像や動画も扱えます。

img_0128
テキストエディタで普通に読めるし、表示も直感的にわかりやすい。

WEBで使えるmarkdown エディタ

Markdown: Dingus

http://daringfireball.net/projects/markdown/dingus
Markdownの提唱元が提供しているオンライン変換サービス
基本的にオンラインでのみ動作します。
ライブプレビュー、エディタの補助もありません。

Online Markdown Editor by CtrlShift
http://www.ctrlshift.net/project/markdowneditor/
非常にシンプルで、軽快に。 ライブプレビューあり。
オフラインでの動作機能はありません。
textareaそのままなので、編集時の補助機能などもありません。

Markdown Viewer

http://www.markdownviewer.com/
シンプルなエディタ。 ライブビューがある。
上と同じようにオフラインを正式にはサポートしていません。編集時の補助はありません。

Markable.in

http://markable.in/
オンラインにアカウントを作ると、サーバ側で編集内容を保持してくれるエディタ。 ライブビューもあります。
エディタもリスト記号を自動的に付加してくれたり、タブが入力できたりと、補助もあります。

Online Markdown Editor by Werner

http://slhck.info/markdown/
これもシンプルなエディタです。
ライブビューがあって、エディタの編集補助もあります。

Markdown Live Preview

http://markdownlivepreview.com/
ライブビューはなくて、Previewボタンを押すとプレビューができます。
エディタの横幅が固定。

Minimalist Online Markdown Editor

http://markdown.pioul.fr/
画面上にコンテンツ以外ほとんど何も表示されない、非常にシンプルなエディタ。 ライブビューもある。

InstantMark

http://jrham.es/instantmark/
これもシンプルなエディタ。 ライブビューもある。 編集補助はない。 ファイルへの保存機能が付いています。

Markdown Editor by Jon

http://joncom.be/experiments/markdown-editor/edit/
シンプルなエディタ。ライブビューあり。 編集補助はありません。
レイアウトを自由に変更できるので、画面が狭くても使いやすいです。

Markdown Edit

http://georgeosddev.github.io/markdown-edit/
機能豊富なエディタ。 ライブビューもあります。
HTML5のアプリケーションキャッシュを使って、自動保存をしてくれます。
Markdownのハイライトもしてくれて、 タブキーは利用できるように多少の編集補助もあります。
画面の幅が狭いと、プレビューが下に移動するレスポンシブデザイン。
イメージまわりにバグがあるらしく、編集中らしい

Backpager

http://backpager.amasan.co.uk/
シンプルなエディタ。ライブビューあり。 ベースはWMDなので、Online Markdown Editor by Wernerとほぼ同等です。
キーボードショートカットが使える編集補助、タブは使えません。

wri.pe

https://wri.pe/
ライブビューのあるシンプルなエディタで、編集補助あり。
キーボードショートカットでノートの新規作成などを行うことができます。
将来的にはオフラインで動作します。
基本的にMarkdownで書いたノートはサーバ側に自動的に保存されて、 カレンダーのビューなどから参照することができます。
また、ノートをアーカイブする機能もあります。
lDropboxやEvernoteと連携して、ノートをそちらに保存する こともできます。
今のところオフライン時には保存ができない。Markdownの編集に加えて、自動保存、検索までできてしまう 。高機能、かぎをかけておかないと、WEB上に置くのは心配か

Share Memo

http://www.sharememo.net/
作成したメモを共有するためのサービス。 ノート1つずつにURLが割り当てられて、共有できます。Gistと違って編集履歴などは残らない。
FacebookアカウントやTwitterアカウントだけで 手軽にメモを共有できるのが良い感じです。
正式にはオフラインには対応していませんが、新規作成ページがキャッシュされていれば プレビューも含めて基本的なメモの作成はできます。

Markdown Live Editor by Jaime

http://jrmoran.com/playground/markdown-live-editor/
WMDを使ったシンプルなエディタ。 HTML5のローカルストレージを使って、編集中のコンテンツをブラウザ内に保存しておいてくれます。 オフライン状態でも動作します。

Dillinger

http://dillinger.io/
Showdownを使った、機能豊富なエディタ。
エディタ部分にACEが使われていて、編集補助があります。
プレビュー自体はJavaScriptでできていますが、 オフラインキャッシュでは動かないようです。
テーブルも表示できません。行番号が表示されたり、プレビューが連動スクロールしたりと細かい使い勝手が良い感じ。 バックエンドはnode.jsでできてますが、ソースも公開されています。
プラグインで、ファイルを[Dropbox]やGoogle Driveに 保存できるようになっています。

Editor

http://lab.lepture.com/editor/
プレビューはしませんが、Markdownの記号の自動挿入や、 自動リンク、ボールド表示などをしてくれます。 ソースも公開されています。オフラインでもキャッシュされていれば動きます。
コンテンツを何処かに保存したりする 機能はありません。

GitHub Flavored Markdown Live Preview

http://tmpvar.com/markdown.html

こシンプルにプレビューをするためだけに 特化したエディタです。 編集補助なし。
GitHub Flavoredとありますが、エンジンはShowdownなので テーブルの表示などもできません。

Hallo.js

http://hallojs.org/demo/markdown/
Showdownを使ったプレビュー付きのエディタですが、 プレビューを編集してMarkdownに反映することもできる 。

One thought on “マークダウン(markdown)とは? 書き方、記法

  1. tokyoblog Post author

    静的ページとは、作成したページがそのまま表示されるようなページのことです。

    テキストファイルにHTMLやCSSをタグ打ちしてページを作成した場合は一旦サーバーにページをアップロードすると、修正したものを再度アップロードし直したり悪意のある攻撃によって改ざんされたりしない限りは、いつ誰が見ても同じ内容が表示されます。このようなページのことを静的ページと呼びます。
    静的ページは最初から用意されているページを表示するだけなので、ユーザーがアクセスしてきたときに高速で表示させることができるというメリットがあります。

    静的ページとは反対に、表示するタイミングで作成されるページのことです。
    例えば、ショッピングサイトの会員情報のページには氏名や住所などが表示されるようになっていますが、そこで表示される内容はサイトにログインしている人によって異なります。こういったサイトではページのテンプレートが用意されており、データーベースから引っ張ってきた氏名や住所などを使ってページを作成しているため、人によって表示される内容が異なるのです。

    wordPressを使って作成していますが、いまあなたが見ているこのページも実は動的ページです。URL欄は「http://ドメイン名//?p=XXXX」となっていますが、xxxxの数値を元にMySQLというデータベースから引っ張り出してきた記事をテンプレートに当てはめて表示しているのです。

    WordPress のレイアウトと構造には 4 つのモデルがあり、そのうち 3 つが静的フロントページを利用できます。

    ブログ: 伝統的なフロントページ形式で、投稿を日付の逆順に並べたものです。
    静的フロントページ: 伝統的な「静的 HTML サイト」モデルです。固定されたフロントページがあり、コンテンツは固定ページで見せます。投稿、カテゴリー、タグを使うことはほとんどありません。
    静的フロントページとブログ: このモデルはサイトの紹介や「ようこそ」としてフロントページがあり、さらに投稿を管理するブログがあります。固定ページは時間にかかわらない連絡先や自己紹介などのコンテンツを表示します。
    動的フロントページ: 統合モデルともよばれるダイナミックなサイトデザインです。静的フロントページとブログを持ちますが、フロントページの内容が動的に変わります。静的コンテンツとブログ(固定ページと投稿)のコンビネーションで作られることもあります。この例として、WordPress の Twenty-Eleven テーマに Showcase ページテンプレートがあります。これは、先頭に最新の投稿(ひとつ)の全文または抜粋があり、次に新しい投稿(複数)のタイトルが続きます。さらに先頭固定表示にセットされた投稿のスライダーを最新投稿の上に表示するオプションがあり、コンテンツを動的にミックスしたフロントページを表示します。

コメントを残す