My First Blog

hello Movable Type

1. Movable Types等のコンテンツマネージメントへの記法の適用
2. だからこんな風なものになってしまった。
iroha
h2

△Movable Types等のコンテンツマネージメントへの記法の適用

Movable Typesは、PHP　CMSでSmarty templateエンジンが使われています。
以下の例は、スマーティプラグインとして動作させた例です。

ホームページも、ブログ等のコンテンツマネージメントが出てきて、手軽にかけるようになりました。ナビゲーションリンクを自動で追加してくれるプログラムのおかげで、画期的に便利にはなったものの、今でも、手間のかかる作業にヘキヘキすることがあります。
私たちは、更新するたびに、何個かhtmlエレメントを記述しなければなかったり、面倒な作業が完全になくなったわけではないのですから、、、
もしかすると、あなたは半角と全角の頻繁な切り替えが苦にならない。WEBのエキスパートだからなんでもないのかもしれませんが、少なくても私には、苦痛です。
自分が今やっている編集作業を、誰かに変わってやってもらおうとしたら、htmlのエキスパート以外には、説明できないのが普通でしょう。
このため、私は、自分のためにツールを作ることにしました。
wikiなどでは記法と呼ばれる。略記ルールです。
しかし、これもまた、覚えなければなりません。
ちょっとそれも苦痛でしょうが、とりあえず付き合ってみてください。

当たり前ですが、WEBは、公開するためだけでなく、インターネット上の記事などを、ちょっとメモするための備忘のために使うこともある。
私が、インターネットのドキュメントにもとめることは、

絵や動画を簡単に貼り付けられる。思い通りのサイズで、
音も鳴らせることが出来る。
参照がしやすい。文字だけでなく、絵も、、
例えば、トラックバックなんて、欲しいところに欲しいだけあればよくて、スパムが来たら、とってはずしてしまえばいい。
古くなっても、ちゃんと見ることが出来て、シンプル。
努力最小限

△だからこんな風なものになってしまった。

文字の参照は、コピペすれば、どんなブログでも出来る。でも参照は、画像の場合面倒なので、
相手の画像にリンクしつつーの、自分のイメージホルダに、サムネールを作成してーの、サムネールをイメージエレメントで表示できるようにタグをつけて、相手の画像にリンクをはりーの、、でどうよ。
という仕組みのものを作ったり、
ブログのリンクは、リンク先のタイトルを参照したり、好きなテキストにしたり、なんだったら画像を指定することも出来る世的なものにしてしまったり、

www.tenman.info

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
国章画像ファイル:Imperial Seal of Japan.svg 40px 国章（準）の菊花紋章ファイル:Goshichi no kiri.svg 40px 国章（準）の五七桐花紋
国章リンク=（国章（準）:菊花紋章（上）と、五七桐花紋（下））
標語なし
国歌君が代
位置画像 LocationMapJapan.png
公用語日本語（慣例上）
方言アイヌ語東日本方言西日本方言琉球語他の方言
首都東京都（事実上）
最大都市特別区東京特別区
元首等肩書=天皇
元首等氏名=明仁
首相等肩書=内閣総理大臣の一覧内閣総理大臣（首相）
首相等氏名=鳩山由紀夫（民主党 (日本 1998-) 民主党）
面積順位 60

xmlをパースする関数を作って、以下のように、郵便番号を送って、xmlを文字列に変換して表示することも出来ます。

宮城県仙台市太白区恵和町岩手県奥州市胆沢区小山

郵便番号>(9820823)

郵便番号>(0230402)

goo検索yahoo

qrcode>(正常に表示されました)

goo_search>(yahoo)

http://www.tenman.info/PDF

△定型的な置換。

100904
例えば現在時刻を
2010年09月04日

［日付］

［］は便宜上全角を利用。本来は半角です。

また、あまり、利用を薦めませんが、（エラーになると、変換が中止されるので）
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

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のタイトルを取得して、リンクを作成。
- www.tenman.info

http//www.tenman.info/(title)

指定したURLを指定したテキストでリンク
- 好きな名前でリンクする

http://www.tenman.info/(好きな名前でリンクする)

指定したURLを新しいページで開く。
- www.tenman.info

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: &lt;\?xml version='1.0' encoding='utf-8'\?&gt;

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

△差し込み記法の記述

<!--%置換部分%-->

【置換部分】

ここに書いた文字列で、<!--%置換部分%-->を部分を置き換えます。

【/置換部分】

△実際のドキュメント

【氏名】

山田太郎

【/氏名】

【住所】

仙台市青葉区中央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>&nbsp;</td>

<td style="background-color: #dedeca;text-align: center;"><a href="#">Ipsum</a></td>

<td>&nbsp;</td>

<td style="background-color: #dedeca;text-align: center;"><a href="#">Dolar</a></td>

<td width="100%">&nbsp;</td>

</tr>

<tr>

<td colspan="6" style="background-color: #000000;">

　<table width="100%" border="0" ...>

<tr>

<td style="text-align: right;">&#149;</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;">&#149;</td>

<td>住所</td>

<td style="text-align: left;"><!--%住所%--></td>

</tr>

<tr>

<td style="text-align: right;">&#149;</td>

<td>メールアドレス</td>

<td style="text-align: left;"><!--%メール%--></td>

</tr>

<tr>

<td style="text-align: right;">&#149;</td>

<td>電話</td>

<td style="text-align: left;"><!--%電話%--></td>

</tr>

</table></td>

</tr>

</table>

[0]
Wikipedia:仙台
仙台（せんだい）とは、江戸時代から都市名および地域名として使用されている地名。この記事では、地名としての仙台と関連するものを扱う。
地名の語源は諸説があり、
国分氏 (陸奥国) 国分氏が「仙台城千代城」と名付けたことが由来とする説。これは城の位置に千体仏があったためで、千体が転じて「千代」となった。転じた理由としては、城が千代（ちよ）に栄えるようにという願いからつけられたという説がある。その後、伊達政宗が「仙臺」（新字体で「仙台」）と改名した。
アイヌ語の「セプ・ナイ（広い・川）」が「せんだい」になったのであり、広瀬川 (宮城県) 広瀬川が仙台の名の由来という説。
仙台城のある川内地区を音読みで「せんだい」としたことが由来との説。
[1]通常改行が2回入ると、段落タグで囲う形になっているケースが多いですが、そのために、編集時の行間が制限されましたが、htmlタグの記述や、記法マーカーの記述で段落を形成する扱いにしています。

My First Blog

test

hello Movable Type

△Movable Types等のコンテンツマネージメントへの記法の適用

△だからこんな風なものになってしまった。

△iroha

△webサービス

△例えば、こんな感じです。

△定型的な置換。

△サンプル

△画像

△ショートクエリ

△ライブイメージフォント

△画像リンクとサムネイルの自動作成

△trackback

△h2-h6見出し記法

△h4

△h5

△h6

△h5

△h4

△h3

△h2

△リンク記法

△ソースコード記法

△ソースコードの記述方法

△テーブル

△テーブルの記述方法

△差し込み記法

△差し込み記法の記述

△実際のドキュメント

Movable Type 4 へようこそ！

カテゴリ

月別アーカイブ

ウェブページ

検索

最近のコメント

最近のブログ記事

My First Blog

test

hello Movable Type

△Movable Types等のコンテンツマネージメントへの記法の適用

△だからこんな風なものになってしまった。

△iroha

△webサービス

△例えば、こんな感じです。

△定型的な置換。

△サンプル

△画像

△ショートクエリ

△ライブイメージフォント

△画像リンクとサムネイルの自動作成

△trackback

△h2-h6見出し記法

△h4

△h5

△h6

△h5

△h4

△h3

△h2

△リンク記法

△ソースコード記法

△ソースコードの記述方法

△テーブル

△テーブルの記述方法

△差し込み記法

△差し込み記法の記述

△実際のドキュメント

Movable Type 4 へようこそ！

カテゴリ

月別 アーカイブ

ウェブページ

検索

最近のコメント

最近のブログ記事

タグクラウド

月別アーカイブ