Web関連Tips
JavaScriptでのWEB拍手設置
この設置方法のメリットはいくつかあります。
- フレームを必要とせず、link要素でのJSへのリンクがあれば常時表示できる。
- ひとつのJSを設置するだけで、link要素からJSへリンクがあるhtmlは、全てこれが表示・変更される。
必要なのは多少のJSとHTMLの知識です。
まず、Snow MateriaさんからArekore RequestというJavaScriptを頂いてきます。任意の場所に以下のソースを貼り付けてください。
// Pati System
{
parent_id : 'footer', // inserted parent element-id.
parent_tag : 'DL', // if not parent-id, inserted parent element-tag-name.
position : -1, // inserted position. [-1:last, 0:first, 1:second, 2:third, ...]
timing : -1, // timing of causing window-event. [0:soon, 1:onload]
scr_syntax : 1, // syntax at IE or Opera. [0:`createElemnt`, 1:`write`]
tree : [
{'DL' : {
'id' : 'pati',
child : [
{'DT' : {
child : [
{'A' : {
'href' : base + 'prepare/pati/',
'title' : 'Web\u62CD\u624B',
child : ['Web Clap']
}}
]
}},
{'DD' : {
child : [
{'A' : {
'href' : 'http://www.gnbnet.com/patipati/',
'title' : 'GNB',
child : ['by PatiPati']
}}
]
}},
]
}}
]
},
parent_idとは、id属性の部分から任意の場所に表示されるという指定です。つまりこの場合footerと書かれているので、HTMLでのfooterとidが振られた部分の近くに表示されるということになります。更に、そのfooter部分のどこに表示するか、というのをpositionで指定します。
また、URIやtitle部分、構造などは自己責任で変更してください。
relmのbr2行でP要素を作る方法
おそらくrelmのバージョン3ではこれが既に付属した状態になるかと思いますが、それまでの移行状態として、作者である7さんにアドバイスを頂きここでは使用しています。
移行する手順は以下の通り。
relm.iniの拡張設定、コメントの改行に入れるタグに以下を記述します。
\nや\tなどはソース状態でも見やすいように独自設定しています。
$br = "\n\t\t\t\t\t";
$pr = "\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t";
そしてその後、relm1.plの838行目付近にコメント制御という部分があると思いますので、その部分に以下を記述します。
# コメント制御
$zcom =~ s/<br>/\n/ig;
while (($u,$v) = each %gyoutou){
$zcom =~ s/(^|\n)(\Q$u\E)([^\n]+)/$1<em class=\"$v\">$2$3<\/em>/g;
} # 引用符
if($pr){ $zcom =~ s/\n\n/\r/g; } # 改段1
if($br){ $zcom =~ s/\n/$br/g; }else{ $zcom =~ s/\n/<br>/g; } # 改行
if($pr){ $zcom =~ s/\r/$pr/g; } # 改段2
if($type eq 'edit' && $comcut && length $zcom > $comcut){
$zcom = '<'.(substr($zcom,0,$comcut)).' .. >';
$zcom =~ s/<([^\<]*)>/&a_quot($1)/eg; $zcom =~ s/^<|>$//ig;
}
そして変更したrelm.iniとrelm1.plをアップロードしてください。
念のためバックアップもとっておいたほうが無難です。
リダイレクト
リダイレクトアタックではなく、リダイレクトパーマネント。フォルダ移動やファイル移動の際、元々のページであった場所にここは跡地です。新URLはこちらなどと書きたくなかったり余計なファイルを増やしたくない自分としてはこれを利用してます。
もし以前のURLにリンクされそこにアクセスされたとしても、.htaccessがそのフォルダ内で最初に読み込まれることになるため瞬時に新URLへ移行されることになります。書き方としては以下のようになります。
Redirect permanent 以前のURI 新URI
Redirect permanent /20/20.html http://glas-gather.org/other/scene20/
これを一行で.htaccessファイルに書き込みます。ローカルで書き込むときに.htaccess.txtのようにファイルを作っておき、アップロードした後その.txtを名前から削除するとサーバ内で.htaccessというファイルが出来ます。これ以外で.htaccessファイルをつくるとサイトにアクセスした途端500エラーを返されますのでご注意。
続けて書いていくと以下のようになります。
Redirect permanent /20/20.html http://glas-gather.org/other/scene20/
Redirect permanent /20/dai.html http://glas-gather.org/other/scene20/
Redirect permanent /other/archives/cat_scene20.html http://glas-gather.org/other/scene20/
Redirect permanent /other/archives/cat_sm_skin.html http://glas-gather.org/other/sm_skin/
またフォルダ整理の際、バナーも移動することになりました。ですがまたしてもバナーアドレスを変えましたなどと書きたくはなく、余計な画像を増やしたくない自分としてはこれを利用します。
Redirect permanent /link/banner.png http://glas-gather.org/common/ban/banner.png
Redirect permanent /fate/banner.png http://glas-gather.org/common/ban/banner_fate.png
Redirect permanent /link/minibanner.png http://glas-gather.org/common/ban/banner_mini.png
Redirect permanent /link/haikei.png http://glas-gather.org/common/ban/scene.png
RSSフォーマット
RSSの利点としては、更新履歴表示と更新情報伝達が同時にできるということ。htmlに更新履歴を書いても多分ほとんどの閲覧者は見ることはないでしょうが、RSSとして配信することで最新情報をユーザー側に送り、ユーザーは更新情報として見ることが出来ます。更新情報として配信しているので、更新情報でないものが入りにくいことも利点としてあげられます。RSSを読み込めるブラウザやRSSリーダーを使用することで、ページにアクセスし何が更新されているか確かめることもなく、タイトルと要約がRSSにそのまま記述されるので、何が更新されたかの詳細が巡回する以前から分かり巡回が楽になります。
以上のように利点は多いのですが、RSSがHTMLほど普及していないこと、HTMLはルーズに書いても閲覧出来ることが多いもののXMLはそのルーズさが全くないことにより気楽に記述できない、配信できない一因となっているかと思います。
blogツールなどで徐々に普及していることはあるかもしれませんが、そのRSSというものが一体何なのか分からず、ただdefaultのテンプレートにあったからで使っていたり、何か分からなからという理由の為記述を消してしまう方もいるかもしれません。
一ユーザーとしては、できるだけどんなサイトでもRSSで更新情報を配信できる状態になったらいいなぁと夢見てます。
- RSS簡易作成エディタ
- RSSエディタ Headline-Editor
- RSSリーダー
- RSS Readerについて。
上記のサイトにて様々なRSSリーダーの比較検討が為されています。ブラウザ内蔵だと、firefoxやOperaがあります。firefoxはsageなどの拡張によって、より快適化されます。
Operaは紹介文も書いてたりするのであわせて考えてみてはいかがでしょう。RSSとブラウザ両方を兼ね備えているブラウザならfirefoxが一番便利かなとは思いますが。
firefoxまとめサイトはとても詳しく、自分もよくお世話になってたりします。拡張の紹介がわかりやすくダウンロードもしやすいのです。拡張はある意味firefoxには必需品なため、旅に出る前の装備を整えるような気分でダウンロードできます。RSSを整理して見ることが出来るsageが個人的には好きです。拡張製作者に感謝ですホント。
更新したら自動で作成されるようなツールを使ったり、仕掛けができたらいいんですが、それが難しいという場合RSSエディタを使うとよいかもです。
以下では、当サイトで使用しているものを汎用化したMTのRSSテンプレを紹介します。MTでのRSS1.0テンプレートです。かといってMTだけに特化しているわけではなく、RSSはほとんどが同一のフォーマットで作成されるので、MTだけの使用に限られるわけでは在りません。
また、独自に書くという場合はメタ情報とセマンティック・ウェブの記事がとても参考になります。
<!-- xml宣言 -->
<?xml version="1.0" encoding="utf-8" ?>
<!-- xml名前空間 -->
<rdf:RDF xmlns="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xml:lang="ja">
<!-- サイト情報 -->
<channel rdf:about="<$MTBlogURL$>rss">
<title><$MTBlogName encode_xml="1"$></title>
<link><$MTBlogURL$></link>
<description><$MTBlogDescription encode_xml="1"$></description>
<image rdf:resource="<$MTBlogURL$>common/ban/banner.png" />
<dc:language><$MTDefaultLanguage$></dc:language>
<dc:date><MTEntries lastn="1"><$MTEntryDate format="%Y-%m-%dT%H:%M:%S" language="en"$><$MTBlogTimezone$></MTEntries></dc:date>
<items>
<rdf:Seq>
<MTEntries lastn="15"><rdf:li rdf:resource="<$MTBlogURL$><MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>/<$MTEntryKeywords dirify="1"$>" />
</MTEntries>
</rdf:Seq>
</items>
</channel>
<!-- バナーアドレスなどを指定 -->
<image rdf:about="<$MTBlogURL$>common/ban/banner.png">
<title><$MTBlogName encode_xml="1"$></title>
<link><$MTBlogURL$></link>
<url><$MTBlogURL$>common/ban/banner.png</url>
</image>
<!-- 個別エントリー -->
<MTEntriesWithSubCategories lastn="15"><item rdf:about="<$MTBlogURL$><MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>/<$MTEntryKeywords dirify="1"$>">
<title><$MTEntryTitle encode_xml="1"$></title>
<link><$MTBlogURL$><MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>/<$MTEntryKeywords dirify="1"$></link>
<description><$MTEntryExcerpt$></description>
<dc:subject><$MTEntryCategory encode_xml="1"$></dc:subject>
<dc:date><$MTEntryDate format="%Y-%m-%dT%H:%M:%S" language="en"$><$MTBlogTimezone$></dc:date>
<MTIfIsDescendant parent="イラストに関連したカテゴリを指定"><foaf:topic>
<foaf:Image rdf:about="<$MTBlogURL$><MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>/<MTCollect tags="img" lastn="1"><MTCollectThis><$MTEntryBody$></MTCollectThis><MTIfCollected><MTCollected tags="img" lastn="1"><$MTCollectedAttr attr="src"$></MTCollected></MTIfCollected></MTCollect>">
<foaf:thumbnail rdf:resource="<MTCollect tags="img" lastn="1"><MTCollectThis><$MTEntryExcerpt$></MTCollectThis><MTIfCollected><MTCollected tags="img" lastn="1"><$MTCollectedAttr attr="src"$></MTCollected></MTIfCollected></MTCollect>" />
</foaf:Image>
</foaf:topic></MTIfIsDescendant>
</item></MTEntriesWithSubCategories>
</rdf:RDF>
イラストや写真メインのサイトだと、このfoaf:Image部分にイラスト情報が入ることになります。
また、このテンプレートにはfoaf:Imageを使用する場合に限りCollectプラグインが必要になります。
恐らくバージョン3.0以降だと、アップロードすると導入されたという印に、管理画面MENU下部にpluginが表示されるようになるので、これで導入は完了です。
ここではRSSをXSL変換して、HTMLでCSSデザインしてるかのように大体のブラウザでは表示できているかと思います。CSSを直接RSSにあててもいいんですが、IEではなかなか思い通りに表示されない、ブラウザによってかなり表示に幅ができてしまう、それ用のCSSをまた作るのも一仕事であるなどの面倒な事情により、変換してデザインを統一させようという。
- article_summary
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:rss="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xalan="http://xml.apache.org/xalan" exclude-result-prefixes="rss rdf dc sy xsl xalan"> <xsl:import href="common.xsl"/> <xsl:output method="xml" encoding="UTF-8" omit-xml-declaration="no" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" indent="yes" xalan:indent-amount="4" media-type="application/xhtml+xml"/> <xsl:template match="/rdf:RDF"> <html xml:lang="ja"> <head> <xsl:call-template name="head"/> <title>News headline - <xsl:value-of select="rss:image/rss:title"/></title> </head> <body id="summary"> <div class="section" id="main"> <h1><span class="site-title"><xsl:value-of select="rss:image/rss:title"/></span><span class="sign"> - </span><em class="page-title">News headline</em></h1> <div class="section" id="contents"> <div class="section" id="about-site" title="サイト情報とRSSTip"> <h2>About Site</h2> <p> <xsl:value-of select="rss:channel/rss:description"/> </p> <p> <a href="{rss:image/rss:link}" title="{rss:channel/rss:title}"><xsl:value-of select="rss:channel/rss:title"/></a> の更新情報です。最新のものが上にあります。 RSSリーダーやRSS情報が見れるブラウザなどを使用すると多分便利。 </p> <p class="site-banner"> <a href="{rss:image/rss:link}" title="{rss:channel/rss:title}"><img src="{rss:image/rss:url}" width="200" height="40" alt="{rss:channel/rss:title}" /></a> </p> <ul class="rss-item"> <li class="rss-times"> <a href="http://gorou.zapto.org/ruby/rsstimes/" title="RSS Times"><img src="http://gorou.zapto.org/ruby/rsstimes/rsstimes.rb?uri={rss:channel/@rdf:about}&month_str=true&fadeout=false&textcolor=%23708090&fillcolor=%234682B4&text=RSS%20TIMES&mode=rss&linecolor=%23D3D3D3&fadeoutcolor=%23D3D3D3&width=190&height=20" width="200" height="36" alt="RSS Times" /></a> </li> <li class="feed-meter"> <a href="http://feedmeter.net/detail.php?r={rss:channel/@rdf:about}" title="RSS feed meter"><img src="http://feedmeter.net/image.php?r={rss:channel/@rdf:about}" width="60" height="36" alt="RSS feed meter" /></a> </li> </ul> </div> <div class="section" id="article-summary" title="最新の記事"> <h2>Article Summary</h2> <dl> <xsl:for-each select="rss:item"> <dt> <span class="datetime"> <xsl:apply-templates select="dc:date"/> </span> - <a href="{rss:link}" title="{rss:title}"> <xsl:value-of select="rss:title"/> </a> </dt> <dd> <xsl:copy-of select="rss:description"/> </dd> </xsl:for-each> </dl> </div> </div> <div class="section" id="topic-path"> <h2>Breadcrumbs List</h2> <p class="navigation"> <a href="../" rel="home" class="home" accesskey="H" title="{rss:image/rss:title}"><xsl:value-of select="rss:image/rss:title"/></a> <span class="level">を辿ると更新情報である</span> <em class="visit">RSS</em> <span class="level">に着きます。</span> </p> </div> </div> <xsl:call-template name="footer"/> </body> </html> </xsl:template> </xsl:stylesheet>- rss_common
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:rss="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xalan="http://xml.apache.org/xalan" exclude-result-prefixes="rss rdf dc sy xsl xalan"> <xsl:output method="xml" encoding="UTF-8" omit-xml-declaration="no" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" indent="yes" xalan:indent-amount="4" media-type="application/xhtml+xml"/> <!-- ================ 基本設定 ================ --> <xsl:param name="baseURI">http://glas-gather.org/</xsl:param> <xsl:param name="siteName">glas-gather</xsl:param> <!-- ================ head要素内 ================ --> <xsl:template name="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" /> <link rel="author" rev="made" href="{$baseURI}prepare/mail/" title="Masiro Kaya" /> <link rel="shortcut icon" href="{$baseURI}common/nav/favicon.ico" title="favorite icon" /> <link rel="home" href="{$baseURI}" title="{$siteName}" /> <link rel="search" href="{$baseURI}mt/" title="site search" /> <link rel="help" href="{$baseURI}about/" title="help" /> <link rel="bookmark" href="{$baseURI}about/bokmark" title="bookmarks" /> <link rel="contents" href="{$baseURI}about/sitemap" title="site map" /> <link rel="foaf" type="application/rdf+xml" href="{$baseURI}about/foaf" title="foaf" /> <link rel="alternate" type="application/rss+xml" href="{$baseURI}rss" title="rss information" /> <link rel="chapter" href="{$baseURI}index/" title="index" /> <link rel="chapter" href="{$baseURI}novel/" title="novel" /> <link rel="chapter" href="{$baseURI}comic/" title="comic" /> <link rel="chapter" href="{$baseURI}other/" title="other" /> <link rel="chapter" href="{$baseURI}fate/" title="fate" /> <link rel="chapter" href="{$baseURI}p_bbs/" title="p-bbs" /> <link rel="stylesheet" type="text/css" media="screen,tv" href="{$baseURI}common/css/default/index.css" title="default" /> <script type="text/javascript" src="{$baseURI}common/js/index.js">//</script> <link rel="stylesheet" type="text/css" href="{$baseURI}common/js/popup/ArekorePopup.css" /> <script type="text/javascript" src="{$baseURI}common/js/popup/ArekorePopup.js"></script> </xsl:template> <!-- ================ フッター ================ --> <xsl:template name="footer"> <div class="section" id="footer"> <address> Last Update <xsl:value-of select="rss:channel/dc:date"/> © 2003-2005 <a href="../prepare/mail/" rel="author" title="Mail Form">Kaya Masiro</a> </address> </div> </xsl:template> </xsl:stylesheet>
直接、RSSのxml宣言の下あたりにxmlスタイルシートであるXSLを挿入します。
<!-- XSL変換 -->
<?xml-stylesheet type="text/xsl" href="common/xsl/article_summary.xsl"?>
そしてアドレスの場所に、上記のarticle_summaryのソースをarticle_summary.xsl、rss_commonのソースをcommon.xslというファイルに直したのを保存し、アップロードしてください。それぞれのxslはここでのマークアップをそのまま流用しているので、それぞれ改変してください。
<xsl:template match="/rdf:RDF">以下の基本はhtmlなので恐らくできると思います。ただし、マークアップの要素が一つでも間違ってたらエラーを起こして確認できなくなってしまいますのでご注意ください。IEだと何故か修正したものをアップロードしてからリロードしても変化しないというよく分からないブラウザなので確認する際のブラウザはfirefoxが一番安全かと思います。
以上の行程を経て仕上げたのがglas-gatherのRSSです。
サイトマップ
サイトが複雑化し内容が多くなってくると、遅かれ早かれサイトマップが役に立つようになります。全部自作してもいいのですが、ここは自分で使用しているMTテンプレを。
<ul>
<li><a href="http://glas-gather.org/">glas-gather</a>
<ul>
<li>main Contents
<ul>
<li>カテゴリ別
<MTSubCategories><MTSubCatIsFirst><ul></MTSubCatIsFirst>
<li><a href="<$MTBlogURL$><MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>/"><$MTCategoryLabel$></a>
<MTSubCatsRecurse>
<MTCollateCollect>
<MTEntries>
<MTCollateRecord>
<MTCollateSetField name="entry_url"><$MTBlogURL$><MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>/<$MTEntryKeywords dirify="1"$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
<MTCollateSetField name="entry_date"><span class="datetime"><$MTEntryDate format="%Y/%m/%d" language="en"$></span></MTCollateSetField>
</MTCollateRecord>
</MTEntries>
</MTCollateCollect>
<MTCollateList><MTCollateIfHeader><ul></MTCollateIfHeader>
<li><MTCollateField name="entry_date"> <a href="<MTCollateField name="entry_url">"><MTCollateField name="entry_title"></a></li>
<MTCollateIfFooter></ul></MTCollateIfFooter></MTCollateList>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast></MTSubCategories>
</li>
<li>時系列順
<ul>
<MTArchiveList><li><span class="datetime"><$MTEntryDate format="%Y/%m/%d" language="en"$></span> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>
</li>
</ul>
</li>
<li>Sub Contents
<ul>
<li><a href="http://glas-gather.org/about/">About</a>
<ul>
<li><a href="http://glas-gather.org/about/foaf">FOAF</a></li>
<li><a href="http://glas-gather.org/about/bookmark">Bookmark</a></li>
<li>Site Map</li>
</ul>
</li>
<li><a href="http://glas-gather.org/bbs/">BBS & Memo</a>
<ul>
<li><a href="http://glas-gather.org/bbs/rss">RSS</a></li>
<li><a href="http://glas-gather.org/bbs/relm.cgi?mode=howto">How to</a></li>
<li><a href="http://glas-gather.org/bbs/relm.cgi?mode=write">Write</a></li>
<li><a href="http://glas-gather.org/bbs/relm.cgi?view=catalog">Catalog</a></li>
<li><a href="http://glas-gather.org/bbs/relm.cgi?mode=search">Search</a></li>
</ul>
</li>
<li><a href="http://glas-gather.org/rss">RSS</a></li>
<li><a href="http://glas-gather.org/mt/">Site Search</a></li>
<li><a href="http://glas-gather.org/prepare/mail/">Mail Form</a></li>
<li><a href="http://glas-gather.org/common/css/">CSS Download</a></li>
</ul>
</li>
<li>Hidden Contents
<ul>
<li><a href="http://glas-gather.org/prepare/macgo/macgo.cgi?mode=macgo&skin=list">Macgo</a></li>
<li><a href="http://glas-gather.org/prepare/test/">Test</a></li>
</ul>
</li>
</ul>
</li>
</ul>
ULとLIの入れ子で階層構造を表現しています。
<MTSubCatsRecurse>を使用すると何故か個別entry部分のulまで再帰されてしまいソースが妙なことになってしまう為、ここはMTCollateプラグインでul部分をMTプラグインで覆う作戦にしました。他の方法もあるかもしれませんが、今のところ日時を重複させずHeaderとFooterとして表示させるタグはこれしか思いつかないので利用してます。
また、見易くするためにそれぞれのカテゴリーをMAINとSUBに分けたりもしてます。RSSと同じく絶対指定にしてあると、このサイトマップだけ持ち帰って閲覧できたりなど便利じゃないかと思います。そこまでして見る人はいないか、と思いながらとりあえず。
このテンプレートを使用して再構築したのがSite Mapです。
Reference URI
- トラックバックのURIはhttp://glas-gather.org/mt/mt-tb.cgi/95です。
- この記事のURIはhttp://glas-gather.org/index/web/web_tipsです。