hello Movable Type
△Movable Types等のコンテンツマネージメントへの記法の適用
Movable Typesは、PHP CMSでSmarty templateエンジンが使われています。
以下の例は、スマーティプラグインとして動作させた例です。
いつの時にでも、今が一番進歩していると思っている。
ホームページも、ブログ等のコンテンツマネージメントが出てきて、手軽にかけるようになりました。ナビゲーションリンクを自動で追加してくれるプログラムのおかげで、画期的に便利にはなったものの、今でも、手間のかかる作業にヘキヘキすることがあります。
私たちは、更新するたびに、何個かhtmlエレメントを記述しなければなかったり、面倒な作業が完全になくなったわけではないのですから、、、
もしかすると、あなたは半角と全角の頻繁な切り替えが苦にならない。WEBのエキスパートだからなんでもないのかもしれませんが、少なくても私には、苦痛です。
自分が今やっている編集作業を、誰かに変わってやってもらおうとしたら、htmlのエキスパート以外には、説明できないのが普通でしょう。
このため、私は、自分のためにツールを作ることにしました。
wikiなどでは記法と呼ばれる。略記ルールです。
しかし、これもまた、覚えなければなりません。
ちょっとそれも苦痛でしょうが、とりあえず付き合ってみてください。
自分のノートと鉛筆が欲しい。
当たり前ですが、WEBは、公開するためだけでなく、インターネット上の記事などを、ちょっとメモするための備忘のために使うこともある。
私が、インターネットのドキュメントにもとめることは、
- 絵や動画を簡単に貼り付けられる。思い通りのサイズで、
- 音も鳴らせることが出来る。
- 参照がしやすい。文字だけでなく、絵も、、
- 例えば、トラックバックなんて、欲しいところに欲しいだけあればよくて、スパムが来たら、とってはずしてしまえばいい。
- 古くなっても、ちゃんと見ることが出来て、シンプル。
- 努力最小限
△だからこんな風なものになってしまった。
文字の参照は、コピペすれば、どんなブログでも出来る。でも参照は、画像の場合面倒なので、
相手の画像にリンクしつつーの、自分のイメージホルダに、サムネールを作成してーの、サムネールをイメージエレメントで表示できるようにタグをつけて、相手の画像にリンクをはりーの、、でどうよ。
という仕組みのものを作ったり、
ブログのリンクは、リンク先のタイトルを参照したり、好きなテキストにしたり、なんだったら画像を指定することも出来る世的なものにしてしまったり、
Youtubeは、そのまんま張っちゃページの表示が大変になるので、サムネールでリンクを張るようにするとか、
普通に画像貼り付け
テキストを入力すると、指定したフォントで文字を画像化して、タグを生成して、画像化したファイルを、背景にセットしたスタイルを作成して、表示したら、スタイルを適用した時にも、そうでない時にも、ちゃんと意味の通じる文章になるから、それやっといて、と記述できる記法を作ったりしています。
ブログのエントリ内で、レイアウトを簡単に出来る仕組みを作るとか、
まだまだ、やることがいっぱいある。
さて、そのようなことは、wordPress専用です。movabletype専用です。Movable Types専用です。そのような、プログラムの下請け仕事をするんじゃなくて、僕自身は、よいものは、いろんなのを使いたいので、そのいろんなものの中で、使えるかどうかを、トライしているわけです。
というわけで、Movable TypeSで試してみました。
問題なく動作してくれるようです。たったこれだけしか打っていないけど。
△iroha
irohaは、wiki、markdown、textile 等と同様htmlの略記入力を行うためのスクリプトです。
このスクリプトを利用することで、入力作業を簡単にすることが出来ます。また、自分にあった記法にカスタマイズすることも出来ます。
△webサービス
GETリクエストを送って、レスポンスをパースして表示するサービスはたくさんあります。
記法を適用して、いつでも、簡単に利用することが出来ます。
WEBサービスは、ある日突然終了したりすることもあるので、自分で信頼できるサービスかどうか判断して使ってください。
△例えば、こんな感じです。
グラフなどは、URLに、クエリ文字列を追加してやることで、画像として表示します。
円グラフ>(text1=おはよう&value1=30&text2=こんにちは&value2=20&text0=こんばんは&value0=40)
設定は、このようにします。
"グラフ"=>array('charset'=>'UTF-8','type'=>'query',"response"=>"<img src=\"http://choigraph.minorapi.jp/line?d:data=+++E_KEYWORD+++\" alt=\"+++KEYWORD+++\" />\\n"),
注釈記法と、simpleapi を組み合わせることで、以下のような記述も出来ます。
仙台市について[0]
仙台市について≪wikipedia>(仙台)≫二重山括弧は、便宜上全角を使いますが、入力時には、半角です。
wikipedia記法だけを使ってみる。
日本国（にほんこく、にっぽんこく）は、東アジア（ユーラシア大陸）の東方にある島国である。通称は日本。
Wikipedia:ウィキポータル 日本も参照のこと。
略名 日本
日本語国名=日本国
公式国名
国旗画像 Flag of Japan.svg
国章画像 Image:Imperial Seal of Japan.svg 100px 準国章の菊花紋章
国章リンク=（準国章:菊花紋章）
標語 なし
位置画像 LocationMapJapan.png
公用語 日本語
首都 東京
最大都市 東京
元首等肩書=天皇
元首等氏名=明仁
xmlをパースする関数を作って、以下のように、郵便番号を送って、xmlを文字列に変換して表示することも出来ます。
郵便番号>(9820823)郵便番号>(0230402)
goo検索yahoo
http://www.tenman.info/PDFqrcode>(正常に表示されました)goo_search>(yahoo)
△定型的な置換。
080829
例えば現在時刻を
2008年08月29日
［日付］［］は便宜上全角を利用。本来は半角です。
また、あまり、利用を薦めませんが、（エラーになると、変換が中止されるので）
3X4/2=6
3X4/2=eval>[3*4/2]
3.1415926535898
eval>[M_PI]
という記述も可能です。
もちろん、通常のhtmlタグを記述することも出来ます。
記法は、使う人が、わかりやすくカスタマイズできないと、覚える手間がかかるのが難点です。
記法だけではなく、htmlも使えるので、どちらともなく始まり、使うほどに、効率よい編集が出来るツールを目指しています。
例えば、
- 画像記法を使用して、幅、高さを指定、alt属性も 記法で書くことが出来ます。
- 画像は、gif png jpg だけでなく、midや、swfファイルも自動リンクします。
- リストの階層制限はありません。
- YouTubeリンクの作成など、プラグイン関数を利用することが出来ます。
- htmlドキュメントの基本になる段落タグの扱いが、一般的な記法入力プログラムと異なります。[1]
- 拡張機能として、文字列から、画像を生成することが出来ます。
△サンプル
以下にサンプルを示します。
△画像
http://www.tenman.info/images/pen.jpg?w=120h=120alt=サンプルhttp://www.tenman.info/hatena/time.swf?w=160h=50
△ショートクエリ
ショートクエリは、自身で、設定するものと、組み込み済みのものがあります。
組み込み済みの機能を説明します。
△ライブイメージフォント
この機能は、入力した文字列に対応する画像をWEB上で生成して、imageディレクトリに保存します。
この文字列画像を、指定したタグの背景として、htmlを作成します。
文字列は、指定したタグの子エレメント<span>内に記述します。spanは、スタイルの指定で
display:none;としていますから、スタイル適用時は、画像として、スタイルを適用しない場合はテキストとして、表示します。
-
-
- ttf形式のフォントを別途用意する必要があります。
-
いろいろな文字を画像として、表現することが可能になります。
フォントファイルを用意して、字体も選べます
ABCDEFG
ABCDEF
ABCDEFGH
しかし、画像は、背景としてセットされるので、htmlは、画像の読めないブラウザにも対応しています。
自分らしい字体を使って、書きたいと思うことありませんか？
txt2img>(p:mikaP_15:いろいろな文字を画像として、表現することが可能になります。)txt2img>(p:mikaP_15:フォントファイルを用意して、字体も選べます)txt2img>(p:tahoma15:ABCDEFG)txt2img>(p:fontopo15:ABCDEF)txt2img>(p:Flemscrn15:ABCDEFGH)txt2img>(p:mikaP9:しかし、画像は、背景としてセットされるので、htmlは、画像の読めないブラウザにも対応しています。)txt2img>(p:mikaP9:自分らしい字体を使って、書きたいと思うことありませんか)
△画像リンクとサムネイルの自動作成
画像を参照する機会は、比較的多いと思います。WEB上の画像（コピーできれば）をコピーして、imageディレクトリにサムネイルを保存します。その上で、コピー元にリンクします。
コピー元を記述したコメントタグを追加して、サムネイルを表示します。
△trackback
Movable TypeS 文字コードEUCナノデ、ちょっと工夫必要そう。これは、サービスなどを表示する設定のサンプル事例になると思いますが、トラックバックを自由配置するための記法です。
トラックバックは、そのアイディアの良さを認めながら、汚染の問題から利用されないケースが多くあります。スローアウェイトラックバックなんちゃって。
trackback>(なんでも質問箱)
△h2-h6見出し記法
見出しを記述します。アスタリスクのいやな人は、クラス内を変更して、別のものに差し替えることも出来ます。
△h4
△h5
△h6
△h5
△h4
△h3
△h2
***h4****h5*****h6****h5***h4**h3*h2
△リンク記法
ハイパーリンクを簡単に作る記法です。
- 指定したURLのタイトルを取得して、リンクを作成。
http//www.tenman.info/(title)
- 指定したURLを指定したテキストでリンク
http://www.tenman.info/(好きな名前でリンクする)
- 指定したURLを新しいページで開く。
http//www.tenman.info/(b:title)
- 指定したURLを画像クリックで（新しいページとして）開く。
-
http//www.tenman.info/(b:http://www..../images/button.png?w=126h=44)
△ソースコード記法
先頭にcode:をつけると、エスケープして表示します。<pre><code>...</code></pre>
-
-
- ソースコード中の/は、記法の適用を避けるため"/"に置換します。
-
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'code: 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
code:
<html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>
code:
<head><meta http-equiv='content-type' content='text/html\; charset=utf-8' /><meta http-equiv='content-script-type' content='text/javascript' /><meta http-equiv='content-style-type' content='text/css' /><meta name='author' content='' /><meta name='keywords' content='' /><meta name='description' content='' /><link rev='made' href='mailto:' /><link rel='stylesheet' href='' media='' /><link rel='start' href='' /><link rel='prev' href='' /><link rel='next' href='' /><link rel='help' href='' /><title></title></head>
code:
<body>
code:
<br /><br />
</body>
code:
</html>
△ソースコードの記述方法
code: <\?xml version='1.0' encoding='utf-8'\?>code:code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'code: code: 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>code:code: <html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>code:code: <head>code: <meta http-equiv='content-type' content='text/html; charset=utf-8' />code: <meta http-equiv='content-script-type' content='text/javascript' />code: <meta http-equiv='content-style-type' content='text/css' />code: <meta name='author' content='' />code: <meta name='keywords' content='' />code: <meta name='description' content='' />code: <link rev='made' href='mailto:' />code: <link rel='stylesheet' href='' media='' />code: <link rel='start' href='' />code: <link rel='prev' href='' />code: <link rel='next' href='' />code: <link rel='help' href='' />code: <title></title>code: </head>code:code: <body>code:code:code:code: </body>code:code: </html>
△テーブル
行頭にtr:と書くと、テーブルタグで整形します。
| summary='廃止された市町村'玉造郡大崎村 | 1896年4月1日 | 玉造郡東大崎村、西大崎村に分割の為 |
| 桃生郡深谷村 | 1896年4月1日 | 桃生郡赤井村、大塩村、広淵村、須江村、北村に分割の為 |
| 玉造郡温泉村 | 1921年4月20日 | 玉造郡鳴子町、川渡村に分割の為 |
| 名取郡長町 | 1928年4月1日 | 仙台市に編入の為 |
| 宮城郡原町 | 1928年4月1日 | 仙台市に編入の為 |
| 名取郡西多賀村 | 1932年10月1日 | 仙台市に編入の為 |
| 名取郡中田村 | 1941年9月15日 | 仙台市に編入の為 |
| 名取郡六郷村 | 1941年9月15日 | 仙台市に編入の為 |
| 宮城郡七郷村 | 1941年9月15日 | 仙台市に編入の為 |
| 宮城郡岩切村 | 1941年9月15日 | 仙台市に編入の為 |
△テーブルの記述方法
tr:summary="廃止された市町村"玉造郡大崎村|1896年4月1日|玉造郡東大崎村、西大崎村に分割の為tr:桃生郡深谷村|1896年4月1日|桃生郡赤井村、大塩村、広淵村、須江村、北村に分割の為tr:玉造郡温泉村|1921年4月20日|玉造郡鳴子町、川渡村に分割の為tr:名取郡長町|1928年4月1日|仙台市に編入の為tr:宮城郡原町|1928年4月1日|仙台市に編入の為tr:名取郡西多賀村|1932年10月1日|仙台市に編入の為tr:名取郡中田村|1941年9月15日|仙台市に編入の為tr:名取郡六郷村|1941年9月15日|仙台市に編入の為tr:宮城郡七郷村|1941年9月15日|仙台市に編入の為tr:宮城郡岩切村|1941年9月15日|仙台市に編入の為tr:宮城郡高砂村|1941年9月15日|仙台市に編入の為tr:遠田郡（旧|涌谷町|1948年12月1日|遠田郡涌谷町新設の為tr:遠田郡元涌谷村|1948年12月1日|遠田郡涌谷町新設の為tr:宮城郡浦戸村|1950年4月1日|塩竈市に編入の為tr:志田郡古川町|1950年12月15日|古川市新設の為tr:志田郡荒雄村|1950年12月15日|古川市新設の為tr:志田郡志田村|1950年12月15日|古川市新設の為tr:栗原郡宮沢村|1950年12月15日|古川市新設の為tr:栗原郡長岡村|1950年12月16日|古川市に編入の為tr:遠田郡富永村|1950年12月16日|古川市に編入の為tr:玉造郡東大崎村|1950年12月16日|古川市に編入の為tr:本吉郡気仙沼町|1953年6月1日|気仙沼市新設の為tr:本吉郡鹿折町|1953年6月1日|気仙沼市新設の為tr:本吉郡松岩村|1953年6月1日|気仙沼市新設の為tr:刈田郡白石町|1954年4月1日|白石市新設の為tr:刈田郡越河村|1954年4月1日|白石市新設の為tr:刈田郡斎川村|1954年4月1日|白石市新設の為tr:刈田郡白川村|1954年4月1日|白石市新設の為tr:刈田郡大鷹沢村|1954年4月1日|白石市新設の為tr:刈田郡福岡村|1954年4月1日|白石市新設の為tr:刈田郡大平村|1954年4月1日|白石市新設の為tr:玉造郡（旧|岩出山町|1954年4月1日|玉造郡岩出山町新設の為tr:玉造郡西大崎村|1954年4月1日|玉造郡岩出山町新設の為tr:玉造郡一栗村|1954年4月1日|玉造郡岩出山町新設の為tr:玉造郡真山村|1954年4月1日|玉造郡岩出山町新設の為tr:玉造郡（旧|鳴子町|1954年4月1日|玉造郡鳴子町新設の為tr:玉造郡川渡村|1954年4月1日|玉造郡鳴子町新設の為tr:玉造郡鬼首村|1954年4月1日|玉造郡鳴子町新設の為tr:遠田郡（旧|小牛田町|1954年4月1日|遠田郡小牛田町新設の為tr:遠田郡不動堂町|1954年4月1日|遠田郡小牛田町新設の為tr:遠田郡中埣村|1954年4月1日|遠田郡小牛田町新設の為tr:遠田郡北浦村|1954年4月1日|遠田郡小牛田町新設の為tr:遠田郡（旧|田尻町|1954年5月3日|遠田郡田尻町新設の為tr:遠田郡沼部村|1954年5月3日|遠田郡田尻町新設の為tr:遠田郡大貫村|1954年5月3日|遠田郡田尻町新設の為tr:加美郡宮崎村|1954年7月1日|加美郡宮崎町新設の為tr:加美郡加美石村|1954年7月1日|加美郡宮崎町新設の為tr:黒川郡大谷村|1954年7月3日|黒川郡大郷村新設の為
△差し込み記法
差し込み記法は、複雑に入れ子になったhtmlソース等に、値を差し込むために使用します。
差し込み記法は、定型ドキュメントをテンプレートとして、html部分と、実ドキュメント部分を分離することが出来ますから、htmlソースに触れることがなく、高度なドキュメントが作成できます。
| Lorem | Ipsum | Dolar | |||||||||||||||
|
|||||||||||||||||
△差し込み記法の記述
<!--%置換部分%-->【置換部分】ここに書いた文字列で、<!--%置換部分%-->を部分を置き換えます。【/置換部分】
△実際のドキュメント
【氏名】山田太郎【/氏名】【住所】仙台市青葉区中央1丁目【/住所】【メール】yamada@sample.com【/メール】【電話】080-0000-0000【/電話】<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td style="background-color: #000000;text-align: center;color: #cccccc;">Lorem</td><td> </td><td style="background-color: #dedeca;text-align: center;"><a href="#">Ipsum</a></td><td> </td><td style="background-color: #dedeca;text-align: center;"><a href="#">Dolar</a></td><td width="100%"> </td></tr><tr><td colspan="6" style="background-color: #000000;"><table width="100%" border="0" ...><tr><td style="text-align: right;">•</td><td width="30%"style="text-align: left;width:12em;">氏名</td><td width="70%" style="text-align: left;"><!--%氏名%--></td></tr><tr><td style="text-align: right;">•</td><td>住所</td><td style="text-align: left;"><!--%住所%--></td></tr><tr><td style="text-align: right;">•</td><td>メールアドレス</td><td style="text-align: left;"><!--%メール%--></td></tr><tr><td style="text-align: right;">•</td><td>電話</td><td style="text-align: left;"><!--%電話%--></td></tr></table></td></tr></table>
-
Wikipedia:仙台
仙台（せんだい; 仙臺）とは、現在の仙台市を指す他、江戸時代から都市名および地域名としても利用されてきた地名。この記事では、地名としての仙台と関連するものを扱う。
「仙台」（仙臺）の範囲。小から大に列挙
”城下町・仙台” - 江戸時代の仙台藩・仙台城の城下町。「仙府」と呼ばれることもあった。明治時代に仙台区となり、のちに仙台市となって市域が拡大。
”仙台市・都心 都心部” - 城下町・仙台とほぼ同じ範囲。現在の青葉区_(仙台市) 青葉区東部を中心とした地域。仙台市以外の居住者が「仙台に行く」と言った場合はこの地域を指すことが多い。都心 中心業務地区や官庁街、繁華街の一番町_(宮城県) 一番町や仙台駅西口、歓楽街の国分町_(仙台市) 国分町などが含まれる。
-
[1]通常改行が2回入ると、段落タグで囲う形になっているケースが多いですが、そのために、編集時の行間が制限されましたが、htmlタグの記述や、記法マーカーの記述で段落を形成する扱いにしています。
最近のコメント