Web Slice(ウェブ スライス)の書き方

あとで読む

IE8からついた機能の「WebSlice(ウェブ スライス)」を設置してみたくて、Yahoo!オークションを参考にして書いてみました。

このブログには更新する商品はないので、フィードの情報です。目的は、アクセスアップとアクセシビリティの向上です。

(ここに来られるヒトは、ほとんどFireFoxですけど・・・w)

 

※社内でIE8はまだダメって言われているので、ここではFireFoxの”Webchunks”で説明しています。一部の"WebSlice"は"Webchunks"に置きかえてお読みください。
もちろんキーワードの都合です。

 

Yahoo!オークションの商品ページに行くと、WebSliceが使えます。

商品のページでWeb Sliceのボタンを押すと・・・

090322_yahoo_auction.jpg

 

窓がでてウェブ スライスに登録されます。

090322_webchunk.jpg

 

これはFireFoxから、登録されたウェブスライスを見たところです。

090322_yahooauc_webslice.jpg

 

どこにWebSliceが書かれているのか見てみると、商品名の見出し部分にスライスな反応がありました。ここにソースがあります。

090322_yahoo_wslice_s.jpg

 

この見出しのソースを編集して、何がどうなっているのか調べながら完成しました。(たぶん)

 

 

Web Slice の基本な書き方

CSS素人な私がひとりでやってみたので、文章の最後に「たぶん」をつけてくださるとイイかも・・・w

 

Web Sliceを表示するページのソース

<div class="hslice" id="webslice">
<p class="entry-title">※表示したいタイトル※</p>
<a rel="feedurl" href="※WebSliceのURL※"></a>
</div>

 

  1. class="hslice"
    クラスは"hslice"です。他の名前にするとダメみたいです。
  2. id="webslice"
    何か入れておけばイイみたいです。ヤフオクは商品IDでした。
  3. ※表示したいタイトル※
    ブログのタイトルです。ヤフオクは商品の見出しでした。
  4. ※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>

 

  1. Webサイトの情報
    Webサイト(ブログ)のタイトルなど。
  2. 更新間隔(?)
    ヤフオクは"15"だったので分単位なんだと思います。
  3. ページの情報
    商品ページのタイトルなど。ここがよくわかりませんでした。
  4. 表示したい内容
    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

090322_mt4_pillcase.jpg

 

 

Web Slice の書き方 まとめ

ごぞんじでない方もおられると思いますので、イイワケをしておきますけどw、私はCSSMovableTypeにくわしくありません。

もし間違っていても責任はもてませんし、くわしい質問はたぶん答えられないと思います。

「もっとイイのつくったよ!」や「ココがおかしい」とか「WordPress用をつくってみた」などありましたら、コメントやトラックバックなどで、ぜひお知らせください。

 

ところで、Webスライスってハヤるんでしょうか?

ブラウザーのブックマークと今までのフィードをたして、2でわって0.5を引いたようなビミョウさを感じます・・・

 

| コメント(2) | トラックバック(1)

 

ついったーでこの記事を紹介するボタン

この記事が"検索マーケティング"に有益と思われたら"Sphinn Japan"へ投票してください


トラックバック(1)

トラックバックURL:

セルフSEOブログ ~素人でも出来るコンテンツ作成Tips - 超手軽に導入できる4つのユーザーへの気配りWordPressプラグイン (2009年3月30日 17:21)

ユーザビリティを意識してWordPressにページナビゲーションやパンくず等のプラグイン を導入するのはもはや当たり前。自分はもっとユーザーに気配り... 続きを読む

コメント(2)

( ゜▽゜)/コンバンハ
Yahooを見ながら作られたんですね!
すごいです感心して見てしまいましたw

うちでもホワイトペーパー見ながらWebSlice試してみたのでよかったら見てくださいな^^

#デザイン的にも機能的にもお粗末ですが・・・^^;;

WebSliceの解説サイトがあったらリンクして「MT4用つくってみました!」だけ書こうとしてたのですけど、なかったのでしかたなく です・・・w
arnieさんの解説わかりやすいです。つづきにも期待してます^^

あにずむ : ちょっとIE8のWebSlicesを実装してみた vol.1 - livedoor Blog(ブログ)
http://arnie-ism.livedoor.biz/archives/503073.html

SEO薬箱

 

 

SEO薬箱 mobile