IE8からついた機能の「WebSlice(ウェブ スライス)」を設置してみたくて、Yahoo!オークションを参考にして書いてみました。
このブログには更新する商品はないので、フィードの情報です。目的は、アクセスアップとアクセシビリティの向上です。
(ここに来られるヒトは、ほとんどFireFoxですけど・・・w)
※社内でIE8はまだダメって言われているので、ここではFireFoxの”Webchunks”で説明しています。一部の"WebSlice"は"Webchunks"に置きかえてお読みください。
もちろんキーワードの都合です。
Yahoo!オークションの商品ページに行くと、WebSliceが使えます。
商品のページでWeb Sliceのボタンを押すと・・・
窓がでてウェブ スライスに登録されます。
これはFireFoxから、登録されたウェブスライスを見たところです。
どこにWebSliceが書かれているのか見てみると、商品名の見出し部分にスライスな反応がありました。ここにソースがあります。
この見出しのソースを編集して、何がどうなっているのか調べながら完成しました。(たぶん)
Web Slice の基本な書き方
CSS素人な私がひとりでやってみたので、文章の最後に「たぶん」をつけてくださるとイイかも・・・w
Web Sliceを表示するページのソース
<div class="hslice" id="webslice">
<p class="entry-title">※表示したいタイトル※</p>
<a rel="feedurl" href="※WebSliceのURL※"></a>
</div>
- class="hslice"
クラスは"hslice"です。他の名前にするとダメみたいです。 - id="webslice"
何か入れておけばイイみたいです。ヤフオクは商品IDでした。 - ※表示したいタイトル※
ブログのタイトルです。ヤフオクは商品の見出しでした。 - ※WebSliceのURL※
外部ファイル(xml)を呼びますけど、カラっぽになっているのはリンクになってしまうからのようです。
私は「タイトル」の文字を消して画像にしていますけど、ヤフオクみたいにたくさんは入っていませんが「style="display: none;"」を使っています。
はじめは「コレって隠し文字の検索エンジンスパム?」と思ったのですけど、SEOの教科書261ページに「正当な理由で使うなら問題ない」と書いてあるので大丈夫だと思います。※多すぎるとダメです
WebSlice用のファイルの中身(ファイル名:~.xml)
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" xmlns:mon="http://www.microsoft.com/schemas/rss/monitoring/2007">
<channel xmlns:cfi="http://www.microsoft.com/schemas/rss/core/2005/internal" cfi:lastdownloaderror="None">
<title cf:type="text">※Webサイトのタイトル※</title>
<link>※WebサイトのURL※</link>
<description cf:type="text">※Webサイトのdescription(説明文)※</description>
<ttl>※更新の間隔※</ttl>
<item>
<title xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" cf:type="text">※ページのタイトル※</title>
<link>※ページのURL※</link>
<description xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" cf:type="html">
<![CDATA[
<body>
※表示したい内容※
</body>
]]>
</description>
</item>
</channel>
</rss>
- Webサイトの情報
Webサイト(ブログ)のタイトルなど。 - 更新間隔(?)
ヤフオクは"15"だったので分単位なんだと思います。 - ページの情報
商品ページのタイトルなど。ここがよくわかりませんでした。 - 表示したい内容
htmlで書いた内容が、ウェブスライスの窓に表示されます。
ハッキリ言ってよくわからないのですけどw、ヤフオクはこうなっていたので書きかえたものです。灰色の文字は、RSSやAtomみたいに決まっている形式で情報が書かれています。
スタイルシートやJavascriptは呼び出せないようなので、タグに直接書くことになります。
GoogleAdsenseを入れてみたのですけど表示されませんでした・・・w
動作は、このブログの右にある画像から登録して頂いて、表示される情報の窓をごらんください。スクロールを出したくなかったので、幅と高さを指定しています。
実際に出力されるファイルはこちら(webslice.xml)です。
右クリックで保存してから、テキストエディターなどで開くとイイと思います。※FireFoxの場合はブックマークされてしまいます・・・
MovableTypeでウェブスライスを出力する方法
せっかく書いたので、ぜひぜひご利用下さいw
このブログのバージョンは、MovableType 4.23 です。
テンプレートモジュール(新規作成:Webslice)
<?xml version="1.0" encoding="<$MTPublishCharset$>" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" xmlns:mon="http://www.microsoft.com/schemas/rss/monitoring/2007">
<channel xmlns:cfi="http://www.microsoft.com/schemas/rss/core/2005/internal" cfi:lastdownloaderror="None">
<title cf:type="text"><$MTBlogName encode_xml="1"$></title>
<link><$MTBlogURL$></link>
<description cf:type="text"><$MTBlogDescription encode_xml="1"$></description>
<ttl>60</ttl>
<item>
<title xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" cf:type="text"><$MTBlogName encode_xml="1"$> Web Slice Feed</title>
<link><$MTBlogURL$></link>
<description xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" cf:type="html">
<![CDATA[
<body>
<div style="width:400px;height:247;padding:5px;top:0px; left:0px;position:absolute;">
<ul>
<strong><a href="<$MTBlogURL$>" style="color:#2f8100;"><$MTBlogName$></a></strong>
<MTEntries lastn="5">
<li style="background-image:url(http://pillcase.com/seo/imagep/li.gif);background-repeat:no-repeat;list-style-type:none;background-position:left center;padding-left:10px;line-height:1.0em;margin-bottom:5px;"><a href="<$MTEntryPermalink encode_xml="1"$>" style="font-size:12px;color:#56763a"><$MTEntryTitle encode_xml="1"$>
<br />(<$MTEntryDate format="%Y-%m-%d %H:%M" language="en"$>)</a>
</li>
</MTEntries>
</ul>
</div>
</body>
]]>
</description>
</item>
</channel>
</rss>
オレンジ色はテキトーにつけた名前で「ブログの名前 Web Slice Feed」になります。どこに表示されるのかはわかりませんw
緑色は、私のブログカラーにあわせたスタイルなので、ここは変更されることをおすすめします。中にある(http://pillcase.com/seo/imagep/li.gif)は画像を指定しているので、変更しないとリスト用の「・」が出ません。
インデックステンプレート(新規作成:Webslice)
<$MTInclude module="Webslice"$>
- テンプレートの設定
出力ファイル名:webslice.xml
公開:スタティック(既定)
これで、ブログの"index.html"と同じフォルダに"webslice.xml"が自動で出力されるようになります。このブログの場合はこうなります。
http://pillcase.com/seo/webslice.xml
Web Slice の書き方 まとめ
ごぞんじでない方もおられると思いますので、イイワケをしておきますけどw、私はCSSやMovableTypeにくわしくありません。
もし間違っていても責任はもてませんし、くわしい質問はたぶん答えられないと思います。
「もっとイイのつくったよ!」や「ココがおかしい」とか「WordPress用をつくってみた」などありましたら、コメントやトラックバックなどで、ぜひお知らせください。
ところで、Webスライスってハヤるんでしょうか?
ブラウザーのブックマークと今までのフィードをたして、2でわって0.5を引いたようなビミョウさを感じます・・・
( ゜▽゜)/コンバンハ
Yahooを見ながら作られたんですね!
すごいです感心して見てしまいましたw
うちでもホワイトペーパー見ながらWebSlice試してみたのでよかったら見てくださいな^^
#デザイン的にも機能的にもお粗末ですが・・・^^;;
WebSliceの解説サイトがあったらリンクして「MT4用つくってみました!」だけ書こうとしてたのですけど、なかったのでしかたなく です・・・w
arnieさんの解説わかりやすいです。つづきにも期待してます^^
あにずむ : ちょっとIE8のWebSlicesを実装してみた vol.1 - livedoor Blog(ブログ)
http://arnie-ism.livedoor.biz/archives/503073.html