jqmMarkdown公式サイト

home next

jqmMarkdown公式サイト

Markdownで、とっても簡単に、素敵なスマホサイトが作れる、それがjqmMarkdownです!

jqmMarkdownは、iPhone、iPad、Androidなどスマートフォンやタブレット向けホームページ作成、コンテンツ変換のためのまったく新しいMarkdown実装です。

コンテンツ


jqmm outline

jqmMarkdownとは?

jqmMarkdown(以降jqmmと呼びます)は、スマホサイト製作のためのコンテンツ変換(コンバーター)です。

  • プレーンテキストを書くだけ
  • jqmmでは、メモ帳やEmacsなどのエディタだけでスマホサイトを記述できます。つまりお気に入りのテキストエディタもこれまでどおり使えます。そしてjqmmは、そのテキストをもとにjQuery Mobileのコード(HTML5+jQuery+jQueryMobile)を生成します。
  • でもjqmmのユーザーが、jQuery MobileやHTML5を覚える必要はありません。たとえばjQuery Mobileのdata-role="ほにゃらら"など、ありがちなタイプミスともバイバイです。
  • ちなみにこのサイト自身もjqmmで製作されています。
  • 利用は無償
  • jqmmはフリーソフトウェアです。ご利用にはライセンス料、保守料などは一切発生しませんし、コンテンツ変換のSaaSみたいな従量課金なんてのもないです。
  • 制作できるサイト
  • iPhone, iPad, Android向け
  • Chrome, Firefox, Opera, SafariなどHTML5対応の多くのPC用ブラウザ向け
  • その他のjQuery Mobileに対応したもの

Markdownって何?

Markdown(マークダウン)というのは、HTMLのページをプレーンテキストで記述するメジャーなシンタックス(記法)、またはそのコンバーターのことです。

  • Markdownの記述例
  • # This is H1 header #
    Hello world!
    
    ## This is H2 header ##
    - Konnichiwa
    - Guten tag
    - Bonjour
    
    goodbye!

もともとMarkdownはJohon GruberによってPHPで開発されました(以降、本家Markdownと呼ぶ)。しかし、彼のサイトを見た限り、開発は2004で止まっているようです。ですので、HTML5にもjQuery Mobileにも対応していません。

そこで私はスマホサイトに最適化できるjqmMarkdownを開発する決心をしたのです。jqmmでは、本家の文法に加えてアノテーションなど多くの拡張をしています。これについては後述します。

jqmmはどこで使うの?

  1. 個人や企業のモバイルサイト開発を自分自身ですばやく作成できます。
  2. 企業のWebサイトなどで使われているCMS(コンテンツ管理システム)にjqmmを組み込んでPCサイトは本家で、モバイルサイトはjqmmで製作することができます。たとえば毎晩の夜間バッチで、コマンドラインで動かすこともできます。
  3. アイデア次第でほかにも色々使えると思います。

Related links

jQuery Mobile official

Daring Fireball by Johon Gruber

dentakurou official

次ページでは、シンタックス(文法)について説明します。

© 2012 dentakurou

Syntax

prev next

Syntax

基本的には、jqmmの記法は本家Markdownの記法を踏襲しています。

ヘッダー

HTMLのWebサイトでヘッダがただ単に字を大きくするのと違い、日常の文書においては章や節などヘッダ(見出し)はとても重要です。

jqmmにおいても、同様に文章構造をデザインするためにヘッダはとても重要な役割をはたします。

  • Level 1
  • 行がひとつの'#'で始まると、ヘッダレベル1を意味します。このヘッダレベルというのは、Wordで言うところの見出しレベルに相当します。
  • # my hedder 1
  • jqmmでは、レベル1はページひとつに対応させています。たとえばレベル1が3つあると3ページになります。各ページにはページをめくるためのボタンがついたバーが上に表示されます。スマートフォンのバーの文字列は点々で短縮されてしまうので、さらにヘッダーと同じ文字列をH1タグで表示しています。
  • # my hedder 1 #
  • このようにヘッダーの最後に'#'をつけるとH1タグによる表示はしません。タブレットのようなやや大きな画面を想定している時や前ページからの流れで不要な時に使ってください。
  • # my hedder ############
  • 本家と同様に、最後につける'#'の数は特に関係ありません。テキストエディタでわかりやすいように上記のようにしていただいても結構です。他のヘッダレベルも同じです。
  • ちなみに本家Markdownでは単純にH1に変換しますが、それではフンドシのように長いページになってしまい、スマートフォンには向いていません。とはいえjqmmでは、どうしてもH1タグをページの途中で使いたい場合は、文中に直接H1タグを記述することもできます。以降のヘッダレベルも同様です。
  • 本家では見出しの次の行に連続する=や連続する-でもレベル1を表記できますが罫線のシンタックスと紛らわしいのでjqmmではサポートしていません。
  • Level 2
  • 行がふたつの'#'で始まると、ヘッダレベル2を意味します。
  • ## my hedder 2
  • jqmmでは、レベル2は開閉ブロックひとつに対応しています。開閉ブロック(Expanding collapsible block)というのは、横長のボタン状の見出しで、それを押すとロールスクリーンを伸ばした時のような動きで中の文章を表示します。jqmmは隣接するレベル2をグルーピングして連続した開閉ブロックとして表示されるようになっています。
  • ## my hedder 2 ##
  • このようにヘッダーの最後に'#'をつけると開閉ブロックではなく、アコーディオンになります。開閉ブロックが複数のブロックを同時に開けることができるのに対して、アコーディオンの場合は選択されたひとつのブロックだけを開き他を自動的に閉じますます。
  • Level 3
  • jqmmでは、レベル3はリストディバイダ(List divider)ひとつに対応しています。リストディバイダとはリスト中の見出しのようなもので、強調された行になります。
  • ### my hedder 3
  • または
  • ### my hedder 3 ###
  • レベル3の次の行からは、1行がひとつのかたまりとして区画に分けられますので、あまり細切れに改行するのではなくパラグラフを続けて書くようにしてください。
  • Level 4
  • jqmmでは、レベル4はリスト内ヘッダーひとつに対応しています。リスト内ヘッダーとは、リストの1行の中の見出しで、後続する本文は見出しと区別されてリスト1行の中に表示されます。
  • #### my hedder 4
  • または
  • #### my hedder 4 ####
  • レベル4は、最後に'#'をつけても同じ結果になります。
  • ちなみにレベル3の中ではなく、レベル1やレベル2でレベル4をいきなり使うと、jqmmはただのH4タグに変換します。

リスト

リストの記述はとっても簡単です。記法や変換は本家とほぼ同じです。ただし、本家は行と行の間の空行も認めているため、下記のように複数のリストを隣接して並べることができません。これは不便なのであえて実装していません。

  • 普通のリスト
  • リストの各行の頭に -(ハイフン)にスペースひとつを書いて行の文、そしてリストの最後にリストが終わったことを示す空行を1行足すだけです。
  • - line 1
    - line 2
    - line 3
      ここは空行!
  • 番号付きののリスト
  • リストの各行の頭に数字にピリオドとスペースひとつを書いて、普通のリストと同じように最後に空行を1行足します。
  • 1. line 1
    2. line 2
    3. line 3
     ここは空行!
  • 本家と同じように数字は連番でなくても連番に変換されます。その他は普通のリストと同じルールです。
  • ネスト
  • 本家がサポートしているネストは今のところサポートしていません。
  • - - これはだめ> - 9. これもだめ

本家と違いヘッダレベル2でリストを書く時は、リストを終わりの空行は省略できます。

フォント

  • 強調
  • 文章でイタリック(斜体)やボールド(太字)など強調したい時があります。その時は強調したい文を * (アスタリスク)で挟んでください。
  • ひとつのアスタリスクで挟むと通常はイタリック(emタグ)になり、ふたつで挟むと強調(strongタグ)になります。
  • アスタリスクのかわり _ (アンダースコア)を使うことができます。
  • This is a single asterisk.
    This is a single underscore.
    There are double asterisks.
    There are double underscore.
    There are both emphasis.
  • 引用
  • 引用していることを示したい時は、その文の各行の頭を">"で開始してください。
  • > 引用の1行目です。
    > 引用の2行目です。
      ここは空行!
  • リストと似ていますが、最後に空行を足すのも同じですので、忘れないようにしてください。引用も、白い背景で囲まれるようにスタイルシートを変更しています。
  • 本家はbrタグや行末にスペースをふたつ入れないと改行をしない仕様になっていますが、jqmmではもとのテキストの行をそのまま反映するようにしています。アノテーション@legacyで本家と同じ仕様にすることもできます。アノテーションについては後で述べています。
  • コードブロック
  • プログラムのソースコードなど書いたままにしたい時に使います。その時は各行の先頭に4つのスペースを入れてください。
  •      こーどの1行目です。
         こーどの2行目です。

ハイパーリンク

jqmmは、ハイパーリンクをスマホならではの表示にできます。

[ボタン名](URL)

1行にこのように記述するとハイパーリンクがボタンになります。これはjQuery Mobileでの実装をそのまま使っており、スマートフォンでは一般的な表現方法です。

文章[単語](URL)

[単語](URL)文章

文章[単語](URL)文章

など文中にハイパーリンクがある場合は、本家と同様にPCのブラウザで見慣れたリンクになります。

文章[単語 title="リンク名"](URL)

このようにリンクの吹き出しをつけることもできます。

本家にはこれ以外にもハイパーリンクを記述するシンタックスがありますが、jqmmでは今のところサポートしません。

上記はヘッダレベル2でのシンタックスです。jQuery Mobileの仕様で、ヘッダレベル3でハイパーリンクを含めるとリンクリストと呼ばれる行ボタンに自動的になります。ですのであえて最初に紹介した

[ボタン名](URL)

の記述をヘッダレベル3では使わないでください。

イメージ

まだ本家の記述に対応できていません。普通のhtmlで記述してください。

<img src="画像ファイル名" />

ちなみに本家のもそれほど使いやすいわけではなく、サイズ指定など細かいことしたい場合はimgタグを使うようにとのことです。

罫線

スマホではあまり活躍しませんが、本家にあわせて一応実装しています。

---

* * *

とか

- - - - 

など3つ以上のマイナス、アスタリスクで罫線を表します。3つ以上なら現実的な範囲でいくつでもいいです。

空行

リストで述べたようにMarkdownにおける空行は意味を持ちます。jqmmでは拡張し、空行の数でヘッダレベルを戻すことができます。

たとえば、ヘッダレベル3の本文を記述した後に、ヘッダレベル2の本文を書きたい場合は空行をひとつ入れるとヘッダレベル2の本文に戻せます。同様にヘッダレベル3の本文を記述した後に、ヘッダレベル1の本文を書きたい場合は空行をふたつ入れるとヘッダレベル1の本文に戻ります。

本家の仕様は単にHxタグに変換するだけで、このように文書構造を制御することはできません。

行コメント

これはjqmmオリジナルのシンタックスです。行の先頭が"//"で始まるとコメントと認識し、変換されません。

// コメントです

この行コメントを利用して、jqmmではアノテーションを実装しています。

// @css mystyle.css

アノテーションについては次ページで説明します。

© 2012 dentakurou

Annotation

prev next

Annotation

Annotation(アノテーション)は文章内容以外への効果を指定でき、jqmmではスマホサイト向けにもっと最適化できるようにたくさんのアノテーションを用意しています。

でもアノテーションは、すべて必須ではありません。jqmmは、アノテーションをまったく使わなくてもスマホ向けサイトはそれなりに制作できます。

アノテーションの基本的な記述はこんな感じです。

// @アノテーション名 引数

アノテーションは、一時的に無効にすることもできます。その場合はスラッシュを3つ以上書いてください。

//// @無効なアノテーション

文書全体への効果

全体に対するアノテーションは、できるだけ文章の最初のほうに記述してください。

  • タイトル
  • // @title タイトル名
  • jQuery Mobileでは全体のタイトルと各ページのタイトルは区別されます。このアノテーションで全体のタイトルを指定できます。iPhoneではブラウザの仕様上表示されません。
  • 本家との互換性
  • // @legacy
  • 本家の引用ではbrタグや行末にスペースふたつをいれないと改行しません。jqmmでは改行するようにしているのですが、本家と同じようにしたい時に使ってください。
  • キーワード
  • // @keywords キーワード
  • サイトに関係するキーワードをカンマで区切って指定できます。htmlのmetaタグ反映されます。
  • 概要
  • // @description 概要
  • サイトの概要を指定できます。htmlのmetaタグに反映されます。
  • jQuery Mobileのバージョン
  • // @jqm バージョン番号
  • jQuery Mobileは刻々とバージョンアップが行われています。新しいバージョンを指定したい時に使ってください。
  • jQueryのバージョン
  • // @jquery バージョン番号
  • jQuery MobileのベースになっているjQueryも刻々とバージョンアップが行われています。新しいバージョンを指定したい時に使ってください。
  • 独自のスタイルシート
  • // @css スタイルシート名
  • jQuery Mobile公式サイトでは、ThemeRollerというカスタムCSSを作るWebシステムを公開しています。このサイトもThemeRollerで作ったカスタムCSSを使っています。このCSSは、後述するテーマシステムのテーマ名の指定に作用します。スタイルシート名は、表示しているページからの相対URLでも通常のURLでもかまいません。

ThemeRoller

  • Google Analytics
  • // @analytics トラッキングID
  • Google AnalyticsのトラッキングIDを指定したい時に、トラッキングID、たとえばUA-xxxxxx-xxを指定します。

ページ単位の効果

ページ遷移を指定することにより複数のhtmlでサイトを構成することができます。

  • 先頭ページから戻るページ
  • // @prev URL
  • デフォルトでは1ページ目にはPrevボタンはつきませんが、1ページ目から戻るページを指定できます。
  • 先頭ページからホームページへ戻る
  • // @home URL
  • 別にホームページがある時に、1ページ目から戻ることができます。ボタンのアイコンや表記も"home"になります。
  • (バージョン0.8.1以降)
  • 最終ページの次のページ
  • // @next URL
  • デフォルトでは最終ページにはNextボタンはつきませんが、最終ページ目の次ページを指定できます。
  • 最終ページから1ページ目へ戻る
  • // @top
  • 最終ページから1ページ目に戻ることができます。ボタンの表記は"top"にアイコンは"back"になります。指定する時は、最終ページのヘッダレベル1前で指定してください。
  • (バージョン0.8.2以降)

各ページへの効果

ページ単位に指定できます。できるだけヘッダレベル1の直前に記述してください。

  • バーの固定
  • // @fixedbar
  • デフォルトではページ名や次ページ切り替えのボタンを表示しているバーはスクロールすると画面から消えますが、このアノテーションを指定するとスクロールしても画面の上に留まるようにできます。
  • フルスクリーン表示
  • // @fullscreen
  • バーが自動的に消えるフルスクリーン表示にできます。消えたバーは画面をタップすると現れます。
  • ページ切り替え効果
  • // @fade
    // @pop
    // @flip
    // @turn
    // @flow
    // @slidefade
    // @slide
    // @slideup
    // @slidedown
  • 他のページに移るときの効果を指定できます。デフォルトは@fadeです。他の効果はスマホの機種(ブラウザ)によってはうまく動かなかったり、フルスクリーンモードとの相性が悪いことがありますので試してみてください。
  • フッター
  • // @footer フッターの文です。
  • 画面の下に表示するフッターです。ツイッターのいいねボタンなどを設置できますが、必ず1行にまとめてください。

各部品への効果

ヘッダ、開閉ブロック、リストディバイダなどの部品単位に指定できます。指定したい部品の直前で指定してください。

  • テーマ
  • jQuery Mobileのテーマシステムのテーマ名を指定します。通常はa、b、c、dのどれかです。
  • // @a
  • 一度指定すると、以降の部品はそのテーマが使われますので、元に戻したい時は再度指定する必要があります。
  • jQuery Mobileのバージョンによっては、部品によって効果が反映されないことがあります。
© 2012 dentakurou

Demo

prev next

Demo

ヘッダレベル1の本文です。下に罫線を引いています。


フォントの制御例

ふつうの文です。強調の文です。強調の文です。強調の文です。強調の文です。

ヘッダのサンプル

ヘッダレベル2の本文です。

  • ヘッダレベル3です。
  • ヘッダレベル3の本文です。
  • ヘッダレベル4です。

    ヘッダレベル4の本文です。

    ヘッダレベル5です。

  • ヘッダレベル4です。

    ヘッダレベル4の本文です。

    ヘッダレベル5です。

ヘッダレベル2の本文です。

リストのサンプル

ここはヘッダレベル2の本文です。

  • これはリストです
  • これはリストです
  • これはリストです

ここはヘッダレベル2の本文です。

番号付きリストのサンプル

ここはヘッダレベル2の本文です。

  1. これは番号付きリストです。
  2. これは番号付きリストです。
  3. これは番号付きリストです。

ここはヘッダレベル2の本文です。

引用のサンプル

ここはヘッダレベル2の本文です。

ヘッダレベル2での引用は複数行の時は自分でbrタグをいれます。

これは引用です。
これは引用です。
これは引用です。

ここはヘッダレベル2の本文です。

コードブロックのサンプル

ここはヘッダレベル2の本文です。

これはコードブロックです。
これはコードブロックです。
これはコードブロックです。

ここはヘッダレベル2の本文です。

これはボタン

ボタンじゃないリンクです。

ここはヘッダレベル1の本文です。

フッターの文です。

Download

prev top

Download

jqmMarkdownはフリーソフトです。

Windows版を下記からダウンロードできます。

Download jqmMarkdown

Windowsのインストーラ(msi)になっています。

アンインストールも通常のWindowsアプリケーションと同様に、コントロールパネルからアンインストールできます。

ブログ、ツイッター、雑誌等でのご紹介は大歓迎です。ご自由にしていただいて結構です。

© 2012 dentakurou