MarkdownでjQuery Mobileしましょっ!
Markdownというプレーンテキストの軽量な文法を知った。
たとえば見出し1、文、見出し2、文なら
# 見出し1
文
## 見出し2
文
と書くだけ。
これをHTMLに変換するPHPのプログラムが本家らしい。
実用化されている例を見ると、デベロッパーのためというよりも記事とかのライターさんと編集者の労力を軽減するためという感じ。
っで本題。これを見てください!
jQuery Mobileで作ったサイトです。
これ、Markdownで書いたんです。
こんな感じで書かれています。
# これはH1です
ふつうの文です。*強調*の文です。**強調**の文です。_強調_の文です。__強調__の文です。
## これはH2です #
あれやこれやあれやこれやあれやこれやあれやこれや
### これはH3です
あれやこれやあれやこれやあれやこれやあれやこれや
#### これはH4です
せつめいせつめいせつめいせつめいせつめいせつめい
##### これはH5です
MarkdownからjQuery Mobileへのパーサーは自作です。
本家PHPはまったく見ていません。
とりあえずjqmMarkdownと名付けました。(らしい名前でググっても出てこないのはこれぐらいなので ^o^)
略してjqmmとでも呼んでいただければ嬉しいです。
スマートフォンやタブレットにいらない何点かのシンタックスは実装を後回しにして、必要なものから実装しています。また、スマホならではの開閉ブロック、アコーディオンなどのUIをテキストの表記だけで記述できるように拡張もしました。
そして、とりあえずデモンストレーションサイトを用意しました。
jqmMarkdown demonstration site(フォーミュラ1に関する文章はwikipediaから引用しています)
※iPhone4、iPad、Chrome、Firfox、Operaで動きますがIE6,7,8はjQuery Mobileがうまく動きません。
100% jqmMarkdownで作られています。
もとのテキストはこちらjqmMarkdown text
※モバイル向けアノテーションなど一部Markdownを拡張しています
メリットとしてはjQuery Mobileが拡張しているdata-roleほにゃららとかタイプミスが無くなるのイイ!
他にも手応えがあります。こうご期待です。
追伸:ベクターに公開されました→コチラ
上はタイトルバーとリスト、下はアコーディオン、リスト内ヘッダ
this demonstration show My new parser "jqmMarkdown" convert Markdown text to jQuery Mobile codes.