KUMA TYPE

猫、パソコン、プログラム、映画、ドラマ、アニメ、perl、etc.

【スタイルシート】はてなブックマークウィジェットのデザインをカスタマイズする。

はてなブックマークの人気記事を貼り付ける事が出来るブログパーツ、はてなブックマークウィジェットですが、デフォルトのデザインは下の青い色1択しかありません。ブログに貼り付けてみたけどうちのブログはピンク基調なのでどうもマッチしない。

ブログの人気記事を貼り付ける

20100579

そこでテーマをなしにしてみると下の様になる。

20100580 

そして実際に取得したタグをブログに貼り付けてみると下の様になる。これだとあまりにもそっけないので、ブラウザの機能を使って要素を調べながらデザインをカスタマイズしてみた。

20100581 

結果下の様にカスタマイズする事ができた。

20100582

実際に定義したスタイルシートを以下に示します。はてなブックマークウィジェットのデザインをカスタマイズする場合に参考にしてください。

hatena.css

/*外枠の定義*/
#hatena-bookmark-widget0{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    width:187px !important;
    background-color:#F27DB4 !important;
}

/*フッターとヘッダーの定義*/
div.hatena-bookmark-widget-footer,div.hatena-bookmark-widget-title{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    background-color:#F27DB4 !important;
    padding:10px;
}

/*フッターとヘッダーのリンクの定義1*/

div.hatena-bookmark-widget-footer a,div.hatena-bookmark-widget-title a{
    font-weight:bold;
    color:#FFFFFF;
}

/*フッターとヘッダーのリンクの定義2*/
div.hatena-bookmark-widget-footer a:link,   div.hatena-bookmark-widget-title a:link   { text-decoration:none;}
div.hatena-bookmark-widget-footer a:visited,div.hatena-bookmark-widget-title a:visited{ text-decoration:none;}
div.hatena-bookmark-widget-footer a:active, div.hatena-bookmark-widget-title a:active { text-decoration:none;}
div.hatena-bookmark-widget-footer a:hover,  div.hatena-bookmark-widget-title a:hover  { text-decoration:underline;}

/*リスト ULの定義*/
div.hatena-bookmark-widget-body ul{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    background-color:#ffccff !important;
    padding:10px;
    margin:2px;
}

/*リスト LIの定義*/
div.hatena-bookmark-widget-body li{
    list-style:none;
    margin:5px 0px 5px 0px;
}

/*リストのタイトル部分のリンクの定義*/

a.hatena-bookmark-entrytitle { color: #0044CC; text-decoration:none;}
div.hatena-bookmark-widget-body a:hover  { color: #0044CC; text-decoration:underline;}

/*リストのブックマーク数部分のリンクの定義*/
span.hatena-bookmark-count a:link    { color: #FF0000; text-decoration:none;}
span.hatena-bookmark-count a:visited { color: #FF0000; text-decoration:none;}
span.hatena-bookmark-count a:active  { color: #FF0000; text-decoration:none;}
span.hatena-bookmark-count a:hover   { color: #FF0000; text-decoration:underline;}

タグ : ,

【アニメ】『天才バカボン』第50話・第52話をみて思った事。

天才バカボン DVD-BOX

天才バカボン|無料動画 GyaO![ギャオ]|アニメ

GyaO!で視聴した無印『天才バカボン』の第50話と第52話の感想というか思ったこと。いつもモロに当時の時代背景が感じられて面白い無印の『天才バカボン』なんだけど今週配信されて物はまた特に時代背景が感じられて面白い。しかし、天才バカボン見ていると放送禁止用語なのか音声が消されている部分が結構あって残念。DVD買えってこと?さすがにDVD中は消されてないよね?どうも「キチガイ」とか「気が狂ってる」とか言う言葉は消されるようですね。そんな言葉無いことにしても世の中がよくなるとも思えないんだけどね。違和感あってその消えた言葉をかえってアピールしているようなもんだし。


第50話 バカボンの旅行はハワイなのだ

ハワイアンダッシュボードフラガール DX フラワーレイ

バカボンが、ふくびきでハワイ旅行を当てる話なんだけど、時代背景を感じる話で面白い。ハワイに着いたらフラガールにレイを掛けてもらってほっぺにチュウをしてもらえるとか、昔はたしかにそういうイメージだった。円が安い時代だったでハワイ旅行って一種のステータスだったし子供の頃の自分には海外旅行など夢の様な話だった。言葉がわからないし大丈夫かなとか、迷子になったらどうしようとかおもいっきり日本人が考えそうなことが作中に反映されていて感慨深い。


第52話 パパは男のなかの男なのだ

バカボンのパパがのど自慢大会で電子レンジをゲットしてママにプレゼントする話なんだけど、ママが「こんな時に電子レンジがあると便利なんけど、高いし」みたいな話をするシーンがあるんだけど、これも時代背景を感じられて面白い。掃除機の話の時もそうだったけどデザインとか当時のデザインの家電でダサい。値段が8万だったけど当時の8万はべらぼうな値段だよね。うちにもナショナルの電子レンジがあったけど、とてつもなくでかくて一人で持てるような大きさと重さじゃなかったのを覚えている。その上消費電力がとてつもなく当時の電力事情や実家のアンペア数からしてブレーカーが飛びまくった記憶がある。電子レンジとクーラー(エアコンじゃない)はブレーカーが飛ぶのであっても気軽に使える家電ではなかった。ナショナルのエレックさんだったと思う。ちゃんと製本された電子レンジでの調理本が付いていて太めのアース線が本体から伸びていて先に太い金属製の杭が付いていた地面にさしてアースしろということなんだろうけど、どこにそんなの刺すんだよと思った記憶がある。 多分下の製品だったのではないかと思う。

752px-Electronic-range_National_NE6100_open
ファイル:Electronic-range National NE6100 open.jpg – Wikipedia

夏は普段は扇風機オンリーでクーラーは、夏のとても暑い日に限っておやじの気が向いたら座敷のクーラーがある部屋に家族全員で入って普段は抜いてあるエアコンのコンセントをさして厳かにエアコンのスイッチを入れるという感じだったw。世の中の父親達に威厳があった時代の話w。

天才バカボン (アニメ) – Wikipedia

電子レンジ – Wikipedia

YAHOO 代BID ナショナル 電子レンジ NE-6100 レトロ コレクションに-jpware– 日本YAHOO 代拍,代BID/購物網

タグ : , , , ,

【Movable Type】PostTweetプラグインを使ってブログの更新をTwitterに投稿する。

遅ればせながらTwitter(ツイッター)を導入。とは言ってもメインの利用はブログの更新通知用。まだあんまりTwitterの使い方が良くわらないがとりあえずグロブパーツは付けてみた。

twitterwigget02 

PostTweetプラグインは下記のページからダウンロード出来ます。

エムロジック放課後プロジェクト: PostTweet アーカイブ

設置方法は下記のドキュメントを見ながらやれば簡単です。

PostTweetプラグイン

簡単に説明すると

上記からダウンロードしたPostTweet-1.0.3.zipを展開すると中に[plugins]フォルダがあってその中に[PostTweet]があるのでこのフォルダを丸ごとFTPで[mt/plugins]の中にアップロードします。

MovableType(MT)のダッシュボード(設定画面)からメニューでツール>プラグインと開きます。うまくPostTweetがアップロードされていれば以下の様になっているはずです。

20100565

プラグイン名をクリックすると下のように展開するので

 20100567

[ドキュメント]をクリックすると上記でも説明したPostTweetプラグインの設置方法のページが開きます。[M-Logic,Inc.]をクリックすると、エムロジック株式会社のホームページが開きます。ここでは[設定]をクリックします。

20100568

PostTweetプラグインによってブログの更新をTwitterに投稿するにはOAuthによる認証が必要なので[OAuthによる認証]のリンクをクリックします。

20100569

[OAuthによる認証]の画面が開くので暗証番号(PIN番号)を取得する為に[PIN番号を取得する]のリンクをクリックする。

20100570

ブラウザであらかじめTwitterにログインしていれば下のように認証のページが表示されるので[許可する]をクリックする。

20100558

「PostTweetにアクセス出来るようになりました!」と表示されて暗証番号が表示されます。

20100559b

OAuthによる認証の画面で上で取得した暗証番号(PIN番号)を入力して[実行]をクリック。

20100560

これで設定はおしまい。実際にブログを更新するとTwitterに更新が投稿されます。投稿時のフォーマットは[記事のタイトル] – [エントリへの短縮URL]という感じになります。


応用

デフォルトは短縮URLでの投稿になります。短縮URLというのは下のように本来のURLを短くする為の技術で下のような[短縮URLサイトのドメイン/記号]で表されてそのURLにアクセスすると本来のURLにリダイレクトされます。

短縮URL:http://tinyurl.com/2a8zy3p

実際のURL:https://blog.kumacchi.com/2010/11/post_613.html

Twitterの様に投稿文字数に厳しい制限のあるツールでは重宝するツールですが、短縮URLはスパム行為でもよく使われるのでイメージはあまりよくなかったですがTwitterのおかげで多少は汚名返上したような気もします。

それでも、短縮URLはやっぱり嫌だという人や実際のURLが見えないのでリンクをクリックするのが不安という人もいると思われるしSEO的にもどうたらこうたらという人もいると思います。

でも、見たところPostTweetの設定画面では短縮URLを無効にはできないみたいですね。どこの短縮URLサイトを使うかしか選択肢がないようです。

でもPostTweetのテンプレートをいじると生のURLでTwitterに投稿出来るようになります。

mt/plugins/PostTweet/tmplのディレクトリにあるmessage_format.tmplというテンプレートファイルがあります。中身は以下のようになっています。

message_format.tmpl

<mt:setvar name="title_len" value="140" />
<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>
<mt:setvarblock name="link"> – <mt:entryshortenedpermalink /></mt:setvarblock>
<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>
<mt:setvar name="title_len" op="-" value="$link_len" />
<mt:var name="title" trim_to="$title_len" /><mt:var name="link" />

これを下のように書き換えます。

<mt:setvar name="title_len" value="140" />
<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>
<mt:setvarblock name="link"> – <mt:EntryPermalink /></mt:setvarblock>
<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>
<mt:setvar name="title_len" op="-" value="$link_len" />
<mt:var name="title" trim_to="$title_len" /><mt:var name="link" />

書き換えて元の場所に上書きアップロードします。

すると下のように生のURLで投稿されるようになります。

20100571

 

Twitter / ホーム

タグ : , ,

何十年かぶりに『伊藤つかさ』さんの曲を聞いてみる。

何故俺が『京(けい)』を『きょう』と読んでしまうのか、原因が判明 – KUMA TYPE

上のさっきのエントリーのながれで『伊藤つかさ』さんの歌を久々に聞いてみたくなったのでYoutube等でちょと聞いてみた。昔の歌なのと厨房(中坊)の頃の感覚で好きだったものなので今聞くと黒歴史なんじゃないかと思ったが聞いてみると普通に良くて泣いたw。

今の若い人が聞くとどんな感じなんだろうね?

昔のTV出演時の動画などがYoutubeで色々見ることができるけど昔の映像は懐かしいけど時代背景などもあって全体的に今見るとこっちが恥ずかしくなってくるw。

さっきのエントリーでも書いたけどファーストアルバムは買ってしまった人なのでアルバム中の曲も何曲か聞いてみた。あのファーストアルバムは結構力入っていたようで、有名どころが作詞作曲とかしていてほとんどの曲が良作でハズレがない良いアルバムだったと記憶している。

生田スタジオなつかしい。大人になってから近所に10年くらい住んでたことがある。中に入ったことはないけどよく行ってたパブスナックに生田スタジオの大道具さんとか来ててたまにお店で会うと話をしたりした。ちなみにそのお店のスナックのママの家の門柱にビートたけしの車が突っ込んだことがあるらしい。多分生田スタジオへの移動で通った時なのだろう。運転していたのは軍団の誰かで本人ではないと思われるが後ほど本人らしき人がお詫びに来たとか来なかったとかで感じのいい人だったみたいな話だったと思うが、どこまで本当の話かは知らない。

アルバムからじゃないけど好きな曲。

伊藤つかさ – Wikipedia

 

#いろんな意味でタイムリープしたいw。

タグ : , ,

何故俺が『京(けい)』を『きょう』と読んでしまうのか、原因が判明

夕べ、『すきすきソング』を聞いたら『アクビ娘』も聞きたくなったので聞いていたのだが、

唄ってるの堀江美都子さんだよなー思って改めてWikipediaを見てみると、「声優・俳優業」の所に「宇宙鉄人キョーダイン」と書いてあった。内容はあんまり覚えていないが子供の頃よく見ていたのは覚えている、ボードゲームも持っていた。画像は下記のサイトにあったのをお借りした。

20100901_1807510
【昭和レトロ】宇宙鉄人 キョーダイン タンクーダーげきめつ作戦 | ★☆ USED BASEの倉庫 ★☆[http://usedbase.jugem.jp/?eid=90]

で、ピン!と来たんだけど、キョーダインには変な挿入歌があって『くだものやさいへんちくりん』という歌らしいけど子供の頃はこれを覚えて歌っていた記憶があるけど、これを作中でよく歌ってるお姉さんがもしかして堀江美都子さんなのかとおもったらやっぱりそうだった。しらなかった。

そんなこんなで、宇宙鉄人キョーダインのwikipediaのページを見ていると、伊藤つかさとかも出ていて「ヘーそうなんだ知らなかった。」とか思ったりしてたわけだ。wikipedia見ると色々出演作品が判るわけだけど「ここは惑星0番地」あたりが有名だったと思う。ブレイクしたのは少女人形からだから番組出演当時知らないのは仕方が無いのだか、ブレイクしたあとは「ここは惑星0番地」をまた見てみたいと思ったのだが、今のようにYoutube等で気軽に昔の動画を見れるような時代ではなかったのでそれはかなわなかった。今探してみたけどYoutubeには見当たらない。DVDとかも一切発売されてない様なのでだからだろう。ちなみにファーストアルバム(LPレコード版)は持っていたりするw。既にレコードプレーヤーがないので聞く方法がないがw。

ゴールデン☆ベスト

そして、「宇宙鉄人キョーダイン」のwikipediaを見ていて衝撃的な文を発見w。

「キョーダイン」はもちろん「きょうだい」から来ているのであるが、原作者の石ノ森によれば「1京ダインの力」という意味も掛けてあるとのこと。「京」の読みは「けい」が正しいのであるが、あえて「きょう」と読ませている。エンディングテーマで「一、十、百、千、万、億、兆、『強』」と歌われているのもこれに由来し、幼年向け雑誌などでも「1京(きょう)パワー」などと描かれていた。そのため、この番組を子供の頃に見た世代には数の単位である京を「きょう」と読むと誤解している人もいる。

宇宙鉄人キョーダイン – Wikipedia

な、なんという俺・・・。

なるほど、キョーダインの所為だったのか、謝罪と賠償を要求するwww。


参考リンク

タグ : , , ,

【アニソン】『すきすきソング』

すきすきソング すきすきソング すきすきソング

最近GyaO!で天才バカボン見てるが、赤塚不二夫先生といえばひみつのアッコちゃんの原作者でもあるわけで、あのアニメのエンディングは電波ソングだけれどもたまに聞きたくなってしまう。それでもって久々に聞きたくなったので聞いてみた。作曲は小林亜星氏なんですね。amazonでMP3ダウンロードが始まっているのでちょっと検索してみたら上記の3つが見つかった。試聴できるので視聴してみたがひどかったやっぱりオリジナルが一番脳汁が出る。是非amazonにもオリジナル版を置いてもらいたい。

作詞:山本護久・井上ひさし
作曲:小林亜星
唄:水森亜土

って、歌ってるのあどたんだったんだ。今の今までしらなかったw。

すきすきソングス (CCCD)

タグ :

[Windows XP]自動ログインする方法

環境はWindows XP Home Edition。

自動ログインするように設定するには、[スタート] > [ファイル名を指定して実行]で[名前]の欄に
[rundll32 netplwiz.dll,UsersRunDll]又は
[control userpasswords2]と入力して[OK]をクリック。

20100552

ユーザーアカウントの画面で自動ログインしたいユーザー名を選択状態にする。

20100556

ユーザーアカウントの画面で[ユーザーがこのコンピュータを使うには、ユーザー名とパスワードの入力が必要]のチェックを外して[OK]をクリック。

20100554

自動ログオンの画面で[ユーザー名](上記で自動ログインしたいユーザーを選択していれば自動でそのユーザー名が入力される)[パスワード][パスワードの確認入力]を正確に入力し[OK]をクリックする。
※当然ながら入力した情報に間違いがあると自動ログインに失敗する。

20100555

後は実際にパソコンの再起動して自動ログインされることを確認する。

タグ : ,

【解決】Windows Live WriterからだとAAの貼付けがうまくできない件。

AA再テスト

             (ヽ三/) ))
         __  ( i)))
        /⌒  ⌒\ \
      /( ●)  (●)\ )
    ./:::::: ⌒(__人__)⌒::::\
    |    (⌒)|r┬-|     |       やる夫で!
    ,┌、-、!.~〈`ー´/    _/
    | | | |  __ヽ、    /
    レレ'、ノ‐´   ̄〉  |
    `ー---‐一' ̄

   ∩___∩         |
   | ノ\     ヽ        |
  /  ●゛  ● |        |
  | ∪  ( _●_) ミ       j
 彡、   |∪|   |        J
/     ∩ノ ⊃  ヽ
(  \ / _ノ |  |
.\ “  /__|  |
  \ /___ /

        *'``・* 。
        |     `*。
       ,。∩      *    もうどうにでもな~れ
      + (´・ω・`) *。+゚
      `*。 ヽ、  つ *゚*
       `・+。*・' ゚⊃ +゚
       ☆   ∪~ 。*゚
        `・+。*・ ゚

 

 Windows Live WriterからだとAAの貼付けがうまくできない件。 – KUMA TYPE

前回上の記事でWindows Live Wrinter(WLW)だとAAの貼付けがうまくできないと諦めていたが、FirefoxでもChromeでもIEでもうまく表示出来るようになった。

前回、大きな間違いをおかしていた。フォントファミリーの指定を間違っていた。

誤:『MS Pゴシック』

正:『MS Pゴシック』

結果スタイルシートは下のようになった。

.AA PRE,.AA{

font-family: "MS Pゴシック";

font-weight:normal;

font-style:normal;

font-size: 16px;

background-color:#eeeeee;

border:none;

line-height:100%;

}

そして、下の様にWLWのソース編集画面で書いてあげることでこのページの一番上の様にAAを三大ブラウザでちゃんと表示出来るようになった。ついでにOperaとSafariでも試したけど大丈夫だった。

<div class="AA">

<pre>

AAの文字列

</pre>

</div>

実際の記述例。preは全角スペースがWLWによって半角スペースに置換されてしまわない為に必須。

下は実際の記述例。

<div class="AA">

<pre>

             (ヽ三/) ))
         __  ( i)))
        /⌒  ⌒\ \
      /( ●)  (●)\ )
    ./:::::: ⌒(__人__)⌒::::\
    |    (⌒)|r┬-|     |       やる夫で!
    ,┌、-、!.~〈`ー´/    _/
    | | | |  __ヽ、    /
    レレ'、ノ‐´   ̄〉  |
    `ー---‐一' ̄

</pre>

</div>

タグ : , , , ,

【フリーソフト】タイトルバー(キャプション)の書き換えソフト『タイとる君』の使いどころ

20100538


レビュー記事

Vector: タイとる君 – 新着ソフトレビュー


ダウンロード

実行中アプリケーションの表示名を設定 タイとる君の詳細情報 : Vector ソフトを探す!


作者サイト

沌珍館企画


類似ソフト

captain
1 Hour Software by Skrommel – DonationCoder.com


このソフトの使いどころ

ウィンドウタイトルとかタイトルバーとかキャプションとか色々呼び方が有りますが、この部分を書き換えることが出来るソフトが色々有りますが、どういう場合につかうと便利かを解説します。

例えばホームページを作成する場合FFFTPを使ったりしますが、FFFTPの場合タブ機能がないのでいちいち別のフォルダに移動するのがとても面倒なのですが、そういう場合にフォルダをそれぞれひらいておきたい分FFFTPを立ち上げておいたりします。これだと開きたいフォルダを開いているFFFTPを選ぶだけでいいのでとても効率がいいです。[ALT]+[TAB]キーでタスクを切り替えて使うことが多いです。

CGIを作ったりしているとCGIとスタイルシートを交互に修正してそれぞれアップロードなどという作業を頻繁におこなったりするのです。

しかし、FFFTPの場合タイトルバーに開いているフォルダの情報が表示されないのでどのタスクがどのフォルダを開いているFFFTPなのか見分けがつきません。その為、起動しているFFFTPの数が多いと一つずつ確認して結局最後に見たのが目的のFFFTPだということも多く、どれが確認したものでどれがまだ確認していないものかも分かりにくいので目的のFFFTPを開くのにとても手間取ったりします。下の画像が見分けがつかない例です。

20100540

そこで、タイとる君などのタイトルバー書き換えソフトの出番です。

[アプリケーションタイトル一覧]からタイトルバーを書き換えたいタスクを選択します。選択すると[設定する文字列]の所に現在のタイトルバーの値が表示されます。

20100541

[設定する文字列]の所を好みの文字に書き換えます。この例では現在開いているフォルダが判るように最後をiniと書き換えます。書き換えたら[反映]をクリックすると画面に反映されます。

20100545

タイトとる君上の値と実際のFFFTPのタイトルバーが書き換えられたのが確認できます。

20100547

20100544

上記の要領でFFFTPそれぞれのタイトルバーの内容を書き換えます。

結果、下の画像で判るようにタスクバーでもタスクの切り替えでもFFFTPの見分けが付くようになってとても作業効率がよくなります。

20100549

task

タグ :

【perlメモ】Text::MicroTemplateモジュールを使ってみる。

テンプレート機能を実現する為のCPANモジュールのText::MicroTemplateを使ってみた。用途としては、プログラムとテンプレートを分離するのに使う。他のモジュールに依存していないので気軽に使えて便利。

個人的に使ってみた感じの長所と短所

長所

  • テンプレートモジュールの中では軽量高速。
  • 自動でエスケープしてくれるのでXSS等脆弱性対策が出来る。セキュリティー的にちょっと安心。
  • ページデザインする人とプログラミングをする人が別の場合には便利。
  • ページデザインが分離できるのでデザイン修正時にプログラムソースを弄る必要がなく安全。
  • ページデザインを分離するとページ生成部分をソース上から探す手間が無くて便利。
  • テンプレート中にコードがかけるので色々できる。
  • テンプレート中からプログラム中のサブルーチンも呼べるので便利。

短所

  • 勝手にエスケープしてくれるのは便利だが大抵の場合内部で自分でやっているのでかえって無駄になる場合も多い。
  • わざわざ分ける手間が面倒。
  • デザインする人とプログラムをする人がわかれていない場合逆に面倒で手間がかかる。
  • 分離してモジュールを読み込む分遅くなるだろう。
  • 下手にテンプレート中にコードを埋め込むとかえって複雑になってしまう可能性がある。

個人で作るプログラム程度であれば別に無くても困らないモジュールではある。仕事などではデザイナーとプログラマが分かれている場合も多いのでそういう場合は重宝すると思う。

Text::MicroTemplate – search.cpan.org

use Text::MicroTemplate qw(:all);

# compile template, and render
$renderer = build_mt(‘hello, <?= $_[0] ?>’);
$html = $renderer->(‘John’)->as_string;

# or in one line
$html = render_mt(‘hello, <?= $_[0] ?>’, ‘John’)->as_string;

# complex form
$mt = Text::MicroTemplate->new(
    template => ‘hello, <?= $query->param(‘user’) ?>’,
);
$code = $mt->code;
$renderer = eval << "…" or die $@;
sub {
    my \$query = shift;
    $code->();
}

$html = $renderer->(CGI->new)->as_string

cpanのサンプルは上の通り。

テンプレートの文法は下のようになっている

# output the result of expression with automatic escape
<?= $expr ?>             (tag style) 行中に埋め込むとき
?= $expr                 (per-line) 一行丸々の時

# execute perl code (tag style)
普通にプログラム中で書いたサブルーチンをテンプレート中で呼べる
<? foo() ?>
? foo()

# comment (tag style)
<?# comment ?>
?# comment
自分で試した限りでは上は
? # comment
にしないとエラーになる。

# loops
<ul>
? for my $item (@list) {
<li><?= $item ?></li>
? }
</ul>

 

Text::MicroTemplate::File – search.cpan.org

use Text::MicroTemplate::File;

our $mtf = Text::MicroTemplate::File->new(
    include_path => [ $path1, $path2, … ],
    use_cache    => 1,
);

# render
$mtf->render_file(‘template.file’, $arg1, $arg2, …);

ファイルからテンプレートを読み込んで使う場合はText::MicroTemplate::Fileを使う。cpanのサンプルは上の通り。

 

実際にText::MicroTemplate使って作成中のプログラムの抜粋。

search.cgi

use strict;
use warnings;
use utf8;
use Text::MicroTemplate qw(:all);
use Text::MicroTemplate::File;

#ページ表示
my $mtf = Text::MicroTemplate::File->new(include_path => [ ‘mt’ ],use_cache => 1);
my %para = (
    ‘eKeyword’      => $eKeyword,
    ‘keyword’       => $keyword,
    ‘TITLE’         => "${KCFG::DESCRIPTION} – ${KCFG::SITENAME}",
    ‘SITENAME’      => $KCFG::SITENAME,
    ‘SITEURL’       => $KCFG::SITEURL,
    ‘DESCRIPTION’   => $KCFG::DESCRIPTION,
    ‘pankuzu’       => $pankuzu,
    ‘sort_link’     => $sort_link,
    ‘result’        => $result,
    ‘out’           => $out,
    ‘gParent’       => $gParent,
    ‘gCurrent’      => $gCurrent,
    ‘glist’         => $glist,
    ‘page’          => $page,
    ‘copyright’     => $KCFG::copyright,
    ‘webservice’    => $KCFG::webservice,
    ‘analytics’     => $KCFG::analytics,
);
my $html = $mtf->render_file(‘search.mt’, {%para});

binmode STDOUT,’:utf8′;
print "Content-type: text/html; charset=utf-8\n\n";
print $html;

search.mt

? # search.mt
? my $r=shift;
? my $skeyword = $r->{keyword};
? # $skeyword =~ / +/,/g;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta name="description" content="<?= $r->{keyword} ?>の検索結果。<?= $r->{TITLE} ?>">
<meta name="keywords" content="<?= $skeyword ?>,<?= $r->{SITENAME} ?>">
<title><?= $r->{keyword} ?>の検索結果。<?= $r->{TITLE} ?></title>
<link rel="stylesheet" type="text/css" href="/css/search.css">
</head>
<body>
<div id="header_wrapper">
    <div id="header_menu">
        楽ツール&nbsp;::
    </div>
</div>
<div id="wrapper">
    <div id="title"><h1><a href="/"><img src="/img/rakutool.gif" alt="<?= $r->{DESCRIPTION} ?> – <?= $r->{SITENAME} ?>" title="<?= $r->{DESCRIPTION} ?> – <?= $r->{SITENAME} ?>"></a></h1></div>

    <div class="panlist"><?= encoded_string($r->{pankuzu}) ?></div>

    <div id="sort_link"><?= encoded_string($r->{sort_link}) ?></div>

    <div id="bd_L">
        <div id="search"><?= encoded_string(form()) ?></div>
        <div id="result1"><?= $r->{result} ?></div>
        <div id="result2"><?= encoded_string($r->{out}) ?></div>
    </div>

(以下略)

エスケープされていない生(raw)データを表示したい場合は、encoded_string関数を使う。

デフォルトをrawデータ表示にするには下のようにexcape_funcにundefを渡してあげると出来る。

#ページ表示
my $mtf = Text::MicroTemplate::File->new(include_path => [ ‘mt’ ],use_cache => 1);
$mtf->escape_func(undef);

タグ : , ,

 
© KUMA TYPE