カレンダー

04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

最近の記事

月別アーカイブ

カテゴリー

ユーザータグ

最近のコメント

プロフィール

run800m

Author:run800m
元・陸上競技の800m選手。
好きな食べ物はねぎともやし。

専門は機械工学・ロボティクス
興味は経済・経営・生産・心理
・地理・プログラミング・性

QLOOKアクセス解析
フィードメーター - 他人の日記を見るのか? ver.BLOG

QRコード

QR

RSS

はてなRSSに追加
livedoor Readerに追加
My Yahoo!に追加
Googleに追加
goo RSSリーダーに追加
Bloglinesに追加
Technoratiに追加
newsgatorに追加
Powered by SEO対策 RSSプラス

ブログ内検索

リンク

このブログをリンクに追加する

気まぐれ広告

ブログ内容を反映するらしい。
ホントか!?

他人の日記を見るのか? ver.BLOG
デジモノ好きのたわいもない記録 デジタルライフ
スポンサーサイト
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


カテゴリ:スポンサー広告

ブログのカテゴリ分けを使いこなす
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
ブログを始めた頃から各記事のカテゴリの分類の仕方に困っていました。

FC2ブログでは記事投稿時のカテゴリの選択は必須ですしね。

そんなこんなで記事数も増えてきましたし、ここらで一度カテゴリ分けを整理しようと検索していると、参考になる記事を見つけました↓
『ブロガーがやって損はない7つのカテゴリ分けTips - WebとPCのメモ帳』

さらに同じブログでFC2の親子カテゴリ機能というものも知りました↓
『FC2ブログの親子カテゴリの使い方 - WebとPCのメモ帳』

今回はこれの情報を参考にブログ記事のカテゴリ分類について書いていきたいと思います。


1.カテゴリの分類の仕方


『ブロガーがやって損はない7つのカテゴリ分けTips - WebとPCのメモ帳』では7つの指針が示されていますが、結局肝心なことは訪問者から見て意味の分かる(価値のある)分類を行うことのようです。

ほとんどの訪問者は検索エンジンから何かしらの検索ワードにヒットしたページに偶然やってきます。

そうしてそのページを見たときに「何か他にも関連記事がないか」とか「これはシリーズ化されてるから、他の記事も読みたい」という時にカテゴリを利用すると思います。

ここでカテゴリ名・分類の仕方が不適切だったりカテゴリへのリンクが分かりにくいところにあると、せっかくの訪問者が目的の記事にたどり着けなくなる訳です。

上の記事にある7つの注意点の
3. 訪問者が読んで意味がわかるカテゴリ名にする
5. カテゴリリストはきちんと目に付きやすい場所に配置する
これらはユーザービリティーの問題ですね。

自分のためのカテゴリ分けというのではなく、他人が見て分かる機能になるようにカテゴリを使わなければなりません。

カテゴリのページも検索にヒットしますし、SEO的にもヒットしてほしいキーワードをカテゴリ名に使うことは必要かもしれません。
1. カテゴリ分けをする
2. Blog自体のジャンルと同じカテゴリは作らない
4. カテゴリだけを先に作らない
6. カテゴリ内のエントリが増えすぎたら分割を考える
7. 人気エントリをカテゴリとして独立させる
これらは分類時の指針です。

手間を惜しまず記事が増えるたびにカテゴリの構成を考える必要性を説いてます。

記事の少ないうちはブログの方向性も定まってないですし、ある程度記事が増えてからカテゴリについて考えるのが良さそうです。

そして一つのカテゴリに記事が増えすぎると「似た記事が読みたい」という訪問者の目的が果たせなくなるので、上の2,6,7のようなルールが必要です。

過去の記事についても必要であれば登録カテゴリを見直し、極力細かく分類を行うことが重要なようです。


2.親子カテゴリの使い方


上で述べたように細かいカテゴリ分けを行うと、今度はカテゴリが雑多に増えすぎて見た目が悪くなります。

そんな時に使えるのが親子カテゴリ機能です。

ようは
  • みかん
  • りんご
  • 電化製品
となっているのを
  • 食物
    • みかん
    • りんご
  • 電化製品
というように、カテゴリの階層化行うものです。

これによりカテゴリをグループ化でき、そのカテゴリがどういうカテゴリなのかが親子2つのカテゴリ名を見ることで、さらに分かり易くなります。

それに上の例だと「みかんやりんごが服や電化製品と分類の大きさとして同位ってのは少し変かも」という考えの時にも使えます。


それではうちのブログで親子カテゴリを実際に使っていきながら、使い方を説明していきます。

「管理ページ」の「環境設定」にある「カテゴリの編集」のページを開きます。

これが親子カテゴリを使う前の状態です。

分類名はどれも抽象的というか意味が広く、カテゴリ内の記事も多いです。

ここでアクセス解析QLOOKに関する記事を、一つのカテゴリとして独立させてみたいと思います。

「QLOOK」の記事は「ネット関連」の記事なので、「ネット関連」を親カテゴリとして子カテゴリに「QLOOK」を作ります。

親カテゴリにしたいカテゴリの下に新たにカテゴリを作ります。

上の画像だと「ネット関連」が3番なので、「QLOOK」の挿入位置は4です。

既にあるカテゴリを子カテゴリにしたい場合も、親カテゴリの下にそのカテゴリを持ってきます。

↑このように親の下に子がくる状態にします。

では、実際にQLOOKを子カテゴリに変更します。

「子」というチェック欄にチェックを入れて「修正」を押します。

リロードはされるものの「変更しました」とかは表示されないので、ちゃんとできたか確認していきましょう。


今はまだ「QLOOK」カテゴリに何も記事がないので、記事数が0になっています。

「ネット関連」カテゴリは「ネット関連(18)」と記事が18個あることが分かります。

では、「ネット関連」に分類されていたQLOOKに関する記事を一つだけ、「QLOOK」カテゴリに変更してみます。

「QLOOK(1)」となり「QLOOK」カテゴリに記事が入ったことが分かります。

さらに親カテゴリである「ネット関連」カテゴリは「ネット関連(18)」と、記事数の合計が減っていません。

子カテゴリの記事数も含めた合計数がカウントされて、ちゃんと親子関係が設定できていることが分かります。

このようにして親子カテゴリを利用することができます。


3.カテゴリ一覧の表記方法


上記の方法で親子カテゴリは機能的に使えるようになりました。

しかし、視覚的にはまだ親子関係が示されていません。

記事の上下にパンくずリストを置いたり、カテゴリ表記を工夫する必要があります。

ここでは簡単に親子カテゴリをインデント表示する方法を説明したいと思います。

「プラグインの編集」のページを開き、「カテゴリー」(なければ「公式プラグインの追加」から「カテゴリー」のプラグインを追加しておきます。)の「詳細」をクリック。

「プラグインの改造」で【HTMLの編集】を行います。

まず最も基本的なカテゴリの表記方法は
<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
カテゴリーに関する変数を使い、各カテゴリーへのリンクと名前を列挙しています。

変数については公式の「テンプレート変数一覧」の「サイドバーメニュー関連の変数」にあります。

テンプレート変数一覧」によると条件分岐で使えるのは、
<!--category_parent--> ~ <!--/category_parent-->
・親カテゴリ(子カテゴリがある場合)に表示する
<!--category_nosub--> ~ <!--/category_nosub-->
・子カテゴリを持たないカテゴリで表示する
<!--category_sub_begin--> ~ <!--/category_sub_begin-->
・各親カテゴリ下にある、先頭の子カテゴリのみで表示する
<!--category_sub_hasnext--> ~ <!--/category_sub_hasnext-->
・各親カテゴリ下にある、最後尾の子カテゴリ以外で表示する
<!--category_sub_end--> ~ <!--/category_sub_end-->
・各親カテゴリ下にある、最後尾の子カテゴリのみで表示する
になります。

これらをうまく利用して、箇条書きに使う<UL>タグをもう1段仕込みます。

実際にはこんな感じ
<ul>
<!--category-->
<!--category_nosub-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category_nosub-->
<!--category_parent-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
<!--/category_parent-->
<!--category_sub_begin--><ul><!--/category_sub_begin-->
<!--category_sub_hasnext--><li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li><!--/category_sub_hasnext-->
<!--category_sub_end--><li ><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li></ul></li><!--/category_sub_end-->
<!--/category-->
</ul>
まず子のいないカテゴリは<!--category_nosub-->内でカテゴリへのリンクを表示。

親カテゴリも<!--category_parent-->内でカテゴリへのリンクを表示します。

そして子カテゴリの始まりに<!--category_sub_begin-->内で箇条書きの始まり<UL>を出力。

<!--category_sub_end-->内で終わりの</UL>を出力します。

色々と試してみたところ子カテゴリが一つしかない場合<!--category_sub_hasnext-->内は表示されないようなので、<!--category_sub_end-->内にカテゴリへのリンクを記入。

子カテゴリが複数個の時のために<!--category_sub_hasnext-->内にも同じように記入します。

このようにした結果が、

↑のようになります。

複数個にすると、

こんな感じ。

子カテゴリだけがインデントされているのが分かります。


ただ、じっくりとみないとあまり見た目に違いはなく、正直まだまだ分かりにくいです。

これはデザイン的な問題なのでテンプレートとの兼ね合いもありますし、CSSの仕事になります。

インデントをさらに大きくしてもいいですが、今回はカテゴリ名の前にある画像を変えてみたいと思います。

うちのブログで使っている共有テンプレートではサイドバーには、
.side_txt ul{
margin : 0;
padding : 0;
list-style-image:url(http://templates.blog.fc2.com/template/pop-k17/050524_04_icon.gif);
list-style-position : inside;
}
こんな形で画像(親カテゴリアイコン画像)が指定されています。

この画像(親カテゴリアイコン画像)をペイントでちょこっといじりまして、中抜きにしてみました(子カテゴリアイコン画像)。

これを「管理ページ」の「ファイルアップロード」でアップロードしておき、子カテゴリの前ではこちらを表示するようにCSSで指定します。

具体的には先ほどのカテゴリープラグインのソースの子カテゴリの<li>に、
<ul>
<!--category-->
<!--category_nosub-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category_nosub-->
<!--category_parent-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
<!--/category_parent-->
<!--category_sub_begin--><ul><!--/category_sub_begin-->
<!--category_sub_hasnext--><li class="sub_category"><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li><!--/category_sub_hasnext-->
<!--category_sub_end--><li class="sub_category"><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li></ul></li><!--/category_sub_end-->
<!--/category-->
</ul>
「class="sub_category"」と新たなクラスを付与します。

そして、そのクラスの内容は、
.sub_category{
margin : 0;
padding : 0;
list-style-image:url(http://blog-imgs-27.fc2.com/r/u/n/run800m/sub_cate_icon.gif);
list-style-position : inside;
}
先ほどと同じですが、画像URLだけが変わりました。

この結果、現在のうちのカテゴリ分類および表記は以下のようになっています。



4つの子カテゴリを追加することで、詳細に記事を分類することができました。

見た目に関しては共有テンプレートを簡単に改造しただけなので、正直なところまだまだですね。

将来的にはテンプレートそのものを自作したいと考えています。

【追記】

現在の公式プラグインのカテゴリーは以下のようになっているようです。
<div>
<!--category-->
<div &align>
<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->
<!--category_sub_end-->┗<!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
</div>
<!--/category-->
</div>

デフォルトで親子カテゴリーの表記が可能です。

┗と┣で親と子の見た目の違いも分かります。

今回興味を持ったもの

すごい! 整理術 (PHPビジネス新書 50)すごい! 整理術 (PHPビジネス新書 50)
坂戸 健司

PHP研究所 2008-02-19
売り上げランキング : 37566
おすすめ平均

Amazonで詳しく見る
by G-Tools

スポンサーサイト

関連した記事を見る(タグ検索)
FC2ブログ HTML CSS カテゴリー
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

カテゴリ:ネット関連

Buzzurlを導入してみた
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
SBMシリーズ第5弾!

今回はBuzzurl(バザール)です。

名前からしても今までと違う印象を受けますが、果たして!

【SBMシリーズ】
はてなブックマークを導入してみた
FC2ブックマークを導入してみた
livedoorクリップを導入してみた
Yahoo!ブックマークを導入してみた

1.登録
さてさて、まずはサービスに登録するところから始まります。

ここから今までのSBMとは一味違います。

もともとBuzzurlの運営はECナビという価格情報サイトが母体のようです。

ECナビの口コミ機能からBuzzurlというサービスに繋がったのでしょうかね。

とにかくこのECナビの会員となって、Buzzurlが使えるようになる訳です。

そして他のSBMと違うところは、Yahoo! JapanのIDでもBuzzurlを利用することができます。

という訳で『Yahoo!ブックマークを導入してみた』の時に作成したr_run800mというIDで登録してみましたが、IDはYahoo! Japanのものと違う名前でも設定できます。

違いがわかりにくいですが、Yahoo! JapanのIDである「r_run800m」ではなく「run800m」で登録しました。

なお、Yahoo! JapanのIDで利用しているユーザーのBuzzurlでのユーザー名は「yj/【ユーザー名】」となります。

私の場合は「yj/run800m」となっています。


2.ブログパーツ
恒例の「ブックマークする」アイコンとブックマーク数の表示方法です。

ログイン後、右上の「ヘルプ(FAQ)」→最下段の「【ブックマークアイコンの取り付け 】」→「自分のブログやサイトにも取り付けたい」の中に説明があります。

説明の中で「取り付け方法はこちら」とあり、以下のアイコンジェネレーターなるものが使えます。
http://buzzurl.jp/icongenerator/

14種類の画像と、6種類のブログサービスまたはURLを選択・入力することで、ブログパーツが生成されます。

FC2だとこんな感じ。(BuzzurlにブックマークBuzzurlにブックマーク
<a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_big_01.gif" alt="Buzzurlにブックマーク" style="border:0"></a><a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://api.buzzurl.jp/api/counter/<%topentry_link>" alt="Buzzurlにブックマーク" style="border:0"></a>

ブログサービスごとなので、FC2のテンプレート専用変数でローカライズがしっかりされています。

ブックマーク数の表示もセットでコードが生成されています。


3.使い勝手
まずサイトの見た目ですが、かなりごちゃごちゃとしています。

まさにバザールといった感じ。

情報量が多いことの裏返しですが、少し見難さも感じます。

ニュースに特化しているようで、大手や人気のあるニュースサイトへのリンクがあったりします。

ブックマークに対するコメントや評価など、ソーシャル部分にも力を入れているようです。

このコメント、返信、グーされたといった機能があるため、ログイン後のページも多機能で理解するのに時間がかかります。

トップページと同じく、ごちゃごちゃとしています。

ヘルプなども、もう少し見た目に配慮してくれると使いやすいかなと思いました。

ただ、多機能ということで「ブックマーク整理ツール」なるものがあります。

登録した全てのブックマークに対して、キーワードの追加・置換・除去や公開レベルの設定が一括でできます。

あまり使うことはないでしょうが、そういった必要にかられた場合にいちいち一つずつ変更しなくて済むのは便利ですね。

あとは他のSBMとの違いとして、登録の仕方が少し面倒です。

普通はブックマークアイコンを押すと登録フォームに飛ぶのですが、Buzzurlの場合はBuzzurlの紹介のようなページが表示され、そこで「ブックマークする」という画像をクリックして、初めて登録フォームに飛びます。

【追記】 ↑これに関しては直接フォームへ飛ぶように改善されました。この記事がECナビの社長にBuzzurlでブクマされて「こういう声ってありがたいです。」って言われたからかもしれません。驚きです。)


登録項目はタイトル、コメント(半角1000文字以内)、キーワード(タグ)があり、おすすめキーワードと今までに使ったキーワードの入力補助もついています。

しかし、タグが8個までと他のSBMの10個と比べると少なく、また最大の違いが入力するテキストボックスが個々のキーワードごとなので入力が面倒です。

普通はタグ(キーワード)の入力に使うテキストボックスは一つで、一つのタグごとにスペース区切りだったり、はてなだったら角括弧で囲んだりして入力しますが、Buzzurlはタグごとに個別に入力します。

これだと複数のSBMを使っている場合には、タグをコピペして一発で入力できないので面倒です。

そういう人の方が少数派なんで、あまり問題はないのでしょうが。

あとデータのインポート、エクスポートですがログイン後ページの左のサイドバーにある「基本情報の設定変更」→「インポート」「エクスポート」からできます。

インポート形式はRSS形式とNETSCAPE-Bookmark-file-1形式。

エクスポート形式はRSS1.0とブックマーク形式だそうです。


あと使っていて気付いたこととして、Buzzurlのブックマークがみんなの知恵蔵に連動しています。

みんなの知恵蔵では検索した語句に関するニュースをasahi.comから、ブックマークされたサイトをBuzzurlから入手しているので、Buzzurlに登録されたサイトが表示されます。

例えばIEEE1394で調べると、Buzzurlにブックマークしてある『IEEE1394 Firewire i.LINK DV [他人の日記を見るのか? ver.BLOG]』が表示されます。

これはBuzzurlのヘルプなどには載っていないですし使って初めて気がつきましたが、ちょっとしたアクセスアップに繋がるかもしれないですね。



そんなこんなでBuzzurlはちょっと他とは違ったSBMでした。

今までのYahoo!、live door、はてな、FC2といった元々多くのユーザーを抱えて手広く事業を展開している大手ネットサービスではないので、SBMを盛り上げるためには独自性を出す必要があったのかもしれません。


さて、次回はどのSBMを使ってみようかな。


今回興味を持ったもの

バザールでござーる はがきイラスト2004 プリント機能付きバザールでござーる はがきイラスト2004 プリント機能付き

インターチャネル・ホロン 2003-10-17
売り上げランキング : 18230

Amazonで詳しく見る
by G-Tools



関連した記事を見る(タグ検索)
HTML CSS 設定 FC2ブログ ブックマーク Buzzurl
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:SEO対策 - ジャンル:コンピュータ

メインカテゴリ:ネット関連  カテゴリ:SBM

ブログやサイトにソースコードを乗せる時に便利なツール
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
自分好みのが欲しかったんで、簡単なの作りました。

汎用的な特殊文字の置換、任意フレーズの置換、タブの削除・置換、改行の削除ができます↓


使い方は単純明快。

上の「◎入力欄◎」に変換したいソースを貼って「置換開始」のボタンを押すと、下の「◎出力欄◎」に変換されたソースが表示されます。

変換する内容についてはその上にあるチェックボックスやテキストエリアで入力・選択します。

よく使うであろう「< > & "」の変換がデフォルトで選択できるようになっています。

それ以外の置換は「その他」の欄の左側のテキストボックスに置換前の文字列、右側のテキストボックスに置換後の文字列を記入します。

FC2ブログで書いていると、コードの改行が実際に反映されてしまったりするので、改行削除機能もついています。

またタブの削除・置換もできます。

デフォルトではタブを空白(&nbsp;)4つに置換するようになっていますが、任意のフレーズに置換できます。



最近SBMの記事を書いていて、コードを貼り付けることが多かったので作りました。

プログラムやHTMLソースを載せる際に、簡単に変換が行えます。

今まではメモ帳でいちいち「&gt;」とか打ってたので、多少楽になりました。

セミコロンとコロンを打ち間違えたり、『QLOOKの高度な解析を使いこなす その2』の記事で&を変換し忘れたりもしていましたが、このツールを使うことで変換ミスがなくせます。


一応FirefoxとIEで動作確認をしたんですが、最初IEで改行削除がうまくいきませんでした。

調べてみたところ改行がFFは「\n」、IEは「\r\n」のようです。

改行コードがOSによってCRだったりLFだったりってのは知っていましたが、ブラウザでもそんな違いがあるのは初耳でした。

あまりWebプログラミングは経験がなく、「使えればいいや」と場当たり的にやってきましたが、これからはブラウザ上でなんでもやる時代になるでしょうし、もうちょっと勉強した方がいいのかもしれません。


ちなみにうちでは↓の2つの本を使っています。
JavaScript辞典 第3版 改訂新版 JavaScript 例文活用辞典
どちらも使いたい機能の実際の例文が載っているので、何も考えずにコピペするだけで使えます。

ただ、私の使っているのは古い版なので、表示例がIEとNNだったり、今ほど多様な使い方は載ってなかったりしますが……

今出ている最新の版ではAjaxなどについても言及されています。

買いなおそうか悩みましたが、もう少し教科書的な本を今度は買おうと思っています。

日曜プログラマーで今までどれも独学でやってきたので、一度ちゃんと学び直しておきたいところです。

今回興味を持ったもの

JavaScript辞典 第3版JavaScript辞典 第3版
株式会社アンク

翔泳社 2008-01-11
売り上げランキング : 212477

Amazonで詳しく見る
by G-Tools

改訂新版 JavaScript 例文活用辞典改訂新版 JavaScript 例文活用辞典
古籏 一浩

技術評論社 2006-10-20
売り上げランキング : 352584
おすすめ平均

Amazonで詳しく見る
by G-Tools



関連した記事を見る(タグ検索)
FC2ブログ HTML CSS プログラミング JavaScript
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:HP作成 - ジャンル:コンピュータ

カテゴリ:ネット関連

Yahoo!ブックマークを導入してみた
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
SBMシリーズ第4弾。

今回はYahoo!ブックマークを導入してみました。

【SBMシリーズ】
はてなブックマークを導入してみた
FC2ブックマークを導入してみた
livedoorクリップを導入してみた

はてなブックマークを試してた頃は、こんなシリーズ化する予定なんて全くなかったのに。

試せるだけ試していくつもりです!

ただ、毎回文章が意図せず長くなってしまうので、今回からは簡潔に終わらせよう。


まずはお決まり、ブログに「登録ボタン」「人数表示」を貼るためのソースです。

ログイン後の画面の右上「設定・ツール」⇒中ほどの「便利ツール」の中の「ブログパーツ」です。

登録ボタンのみ、人数表示のみ、両方(組み合わせ)の中から選ぶことができます。

特にオススメは組み合わせ。

ラジオボタンで人数表示と登録ボタンの種類が選べ、選らんだ組み合わせのソースが出力されます。

実際にどんな見た目になるのか選びながらプレビューすることができます。

これは見やすしい、使いやすくてとても親切なつくりです。

さすがは大手のYahoo!だけあって、洗練されています。

で、実際にうちに採用したタイプがこれ。
<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(location.href)+'&ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;"></a><script src="http://num.bookmarks.yahoo.co.jp/numimage.js?disptype=small"></script>

FC2と同じ、JavascriptでタイトルとURLを取得するタイプですね。

汎用的に使えるのが利点です。

ただ、これだとブログのトップページ(http://run800m.blog23.fc2.com/)なんかで複数の記事が載っている場合に困ります。

その個々の記事をブックマークしたいのに、ブログのURLで登録されてしまうからです。

まあ、それが目的の場合もありますが、そういう時はブックマークレットを使えばいい訳ですし。

そんな訳でFC2ブログ用にローカライズしました。

ようは、ここを変換するだけ。
encodeURIComponent(document.title) ⇒ <%topentry_enc_title>
encodeURIComponent(location.href) ⇒ <%topentry_enc_link>

エンコードしたURLとタイトルですね。

あ、あとシングルクオテーション(')を消すのも忘れずに。

私はうっかり忘れてしまいました。

そんな訳でFC2ブログ用にローカライズしたYahoo!ブックマークのソースがこちら。
<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=+<%topentry_enc_title>+&u=+<%topentry_enc_link>+&ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" title="Yahoo!ブックマークに登録" alt="Yahoo!ブックマークに登録" style="border:none;"></a><script src="http://num.bookmarks.yahoo.co.jp/numimage.js?disptype=small"></script>

そのうち、<NOSCRIPT>もできるならやってみよう。

とか思って少し検索してみたらスタッフブログなるものを発見。

FC2ブログに人数表示ブログパーツを設置する

上で私がやった以上にローカライズがなされてます。

そもそも人数表示がJavascriptでなくてもできるようになっているのが魅力的です。

さっそくスタイルなんかもいじって、うちのブログ用にさらにローカライズしたものがこちらです。
<a href="http://bookmarks.yahoo.co.jp/action/bookmark?t=<%topentry_enc_utftitle>&u=<%topentry_enc_link>" title="Yahoo!ブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;" /></a> <a href="http://bookmarks.yahoo.co.jp/url/<%topentry_link>" title="Yahoo!ブックマークに登録しているユーザー" target="_blank"><img class="yahoob_num" src="http://num.bookmarks.yahoo.co.jp/image/small/<%topentry_link>"></a>

ちなみに同じくエンコードしたURLとタイトルをJavascriptで取得しているFC2ブックマークなんですが、同じようにローカライズしてみてもうまくいきませんでした。

URLはいいんですが、タイトルがEUCでもUTF-8でもエンコードしなくても文字化けしてしまいます。

一体どんな文字コード使ってるんだか。

おんなじFC2のブログなのに、不思議なもんです。

どうにもFC2ブックマークは曲者だな。


さて、続いてはYahoo!ブックマークの機能について。

まず登録方法。

URL、タイトル、タグ、コメントです。

タイトルが編集できてしまうタイプですね。

タグは1つにつき全角で約20文字、合計で全角で約300文字だそうです。

他のユーザーの使ったタグのクリックによる入力はありますが、既存の今までに自分が入力したタグを選ぶという機能はありません

また一つ大きな違いとして入力時に別枠表示式のボタンまたはブックマークレットを使うと、小さな別ウィンドウが出てくるスタイルになっています。

さらに、ブックマークをフォルダ管理することができます。

ブックマークの一覧表示は、詳細表示、タイトル表示、画像表示から選べます。

表示する数についても設定から20、50、100件と選べます。

インターフェイスはなかなか軽快で、複数のブックマークの編集・移動なんかも選択性でやり易いです。


続いてインポート・エクスポートについて。

こちらもヘルプに詳しく記載がありますし、非常にわかりやすいつくりになっていました。

まずインポート。

IE、FF、その他のブラウザブックマーク、そしてdel.icio.us、RSSの5種類から選ぶことができます。

インポートできるRSSとしてはMy Web、はてな、nifty、livedoorが載っていました。

私ははてなからRSSでインポートを行ったのですが、インポートしたブックマークは「RSS」というフォルダにインポートされました。

もちろんインポート後にフォルダ間を移動させることは可能です。

エクスポートはIE、FF、safariのブラウザブックマークとXMLの4種類から選ぶことができます。

またエクスポートするデータは全てのデータ以外にフォルダ単位、タグ単位で抽出することも可能です。



SBMを4社見てきた中で、全体として「さすがはYahoo!」と思わせるSBMでした。

ユーザーも多い大手であり経験も豊富なため、ヘルプも充実しており、ユーザービリティについては申し分ない作りです。

特徴としてエクスポート・インポートなどを見るに、他のSBM以上に従来のWebブラウザとの親和性が重視されています。

SBMの説明書きによくある「万が一の時のためにブラウザのブックマークのバックアップ」という点に関して、Yahoo!ブックマークは実際にそういう使い方をしてもいいかなと思わせるだけの作りです。

インポート・エクスポートに関して今までで一番安定感を感じましたし、親切な設計になっているところも安心感を与えます。

集客効果についてもYahoo!ブックマークはSBMとしてはてなほど話題にはあがりませんが、「Yahoo!」というそれ自身が既に大きなコミュニティであり、相当数のユーザーを抱えているようです。

日本ではいまだにYahoo!がトップページで検索はYahoo!って人も多いですし。

入っておいて損はないSBMだと思います。


さあ、次回のSBMはどこだ!

今回興味を持ったもの

ヤフー・ジャパンはなぜトップを走り続けるのかヤフー・ジャパンはなぜトップを走り続けるのか
吉村 克己

ソフトバンククリエイティブ 2006-07-20
売り上げランキング : 98440
おすすめ平均

Amazonで詳しく見る
by G-Tools



関連した記事を見る(タグ検索)
HTML CSS 設定 FC2ブログ ブックマーク Yahoo!
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:SEO対策 - ジャンル:コンピュータ

メインカテゴリ:ネット関連  カテゴリ:SBM

livedoorクリップを導入してみた
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
『はてなブックマークを導入してみた』『FC2ブックマークを導入してみた』とSBM(ソーシャルブックマーク)の導入記事を書きましたが、今回もSBMの記事です。

もうなんか、この際全部試してやろうとなったからです。

ただ、次有名どころとなるとdel.icio.usとかか……

英語はちょっとなぁ……


さて今回はlivedoorクリップを導入してみました。

今までと違って、名前が「ブックマーク」ではなく「クリップ」。

Firefox(Firebird時代から)使って長いんで忘れてましたが、よく考えたらIEって「ブックマーク」じゃなく「お気に入り」なんですよね。

英語版だと「favorite」。

wikipedia調べてみると、IEよりネスケより古いMosaicでは「ホットリスト」だったようです。
『ブックマーク - Wikipedia』
http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF

どれが一番しっくりくるかっていうと、やっぱブックマークかな。

気に入らないページでも「お気に入り」にするし、ホットじゃないページも「ホットリスト」に入れるし。

「ブックマーク」、つまり「しおり」のイメージが使い方とかから考えても、一番実用に即した名前だと思います。

livedoorクリップは紙とかをまとめるあの針金をクルクルっと巻いたクリップがテーマ画像になってますが、気軽にまとめておけということでしょうか?

クリップの使い方って、あまりブックマークの使い方とは似てないように思うんですが。

付箋とかポストイットの方がまだ近いように感じます。

まあ、名前なんかどうでもいいですね。

機能の話をしましょう。



まずは今回もブログへの「登録ボタン」と「人数表示」の導入の仕方から。

前回のFC2ブックマークの件で、だいぶユーザビリティを見る目が厳しくなっていますが、果たしてlivedoorクリップは?

とりあえずブックマーク登録ボタンについては「使い方」⇒「ブログに「clip!」ボタンを設置しよう!」の中にありました。

4種類の画像と、それらのHTMLソースが記述してありました。

ただし、これlivedoorブログ限定のソースです。
<a href="http://clip.livedoor.com/redirect?link=<$ArticlePermalink$>&title=<$BlogTitle URIESCAPE$>%20-%20<$ArticleTitle URIESCAPE$>&ie=euc" class="ldclip-redirect" title="この記事をクリップ!"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_b.gif" width="16" height="16" alt="この記事をクリップ!" style="border: none;vertical-align: middle;" /></a>


<$ArticlePermalink$>って、おそらくlivedoorブログのテンプレート変数だと思います。

「livedoor Blogの場合」っていう項目しかなくて、はてなブックマークみたいに色んなブログサービスごとの貼り方は書いてありません。

FC2ブックマークのようにJavascriptを使って、汎用的に使えるようなソースでもないですし。

タグとテンプレート変数を理解しているレベルの人でないと導入が難しいと思います。

まあ、そんな人でなければテンプレートを思いっきりいじったりっていうこと自体しないと思うので、問題ないのかもしれませんが。

それに今の時代はググれば誰かがやり方書いてくれてるでしょうしね。

その誰かに私もなろうと思います。
<a href="http://clip.livedoor.com/redirect?link=<%topentry_link>&title=<%blog_name>%20-%20<%topentry_title>&ie=euc" class="ldclip-redirect" title="この記事をクリップ!"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_b.gif" width="16" height="16" alt="この記事をクリップ!" style="border: none;vertical-align: middle;" /></a>

見たまんま何も考えずにやりましたが、うまくいっているようです。

livedoor側の仕様は見てないので、なんとなくでFC2ブログのテンプレート変数に置き換えたんですが、
<$ArticlePermalink$> ⇒ <%topentry_link>
<$BlogTitle URIESCAPE$ ⇒ <%blog_name>
<$ArticleTitle URIESCAPE$> ⇒ <%topentry_title>

各記事のURL、タイトルとブログのタイトルですね。

URIESCAPEっていうのがエンコードを意味している気がしたので、最初はエンコードしたのを当てはめてみたんですが、どうも文字化けしてしまいました。

最後に「&ie=euc」ってあるし、FC2ブログは文字コードがEUCなんで、エンコードなしでいいのかも。


続いてブックマークしている人数を表示する方法です。

これについては「使い方」⇒「livedoorクリップAPIについて」から行ける、「livedoor クリップの Wiki」に載っていました。

APIとか意味が分かっていればどうってことはないですが、やはり右も左も分からない素人には敷居が高い感じがします。

で、ここの「クリップ数を画像で取得する API」にやり方が載っていて、実に簡単です。
<img src="http://image.clip.livedoor.com/counter/ページのURL">

これを貼るだけです。

そんな訳でFC2ブログで使う場合には、
<img src="http://image.clip.livedoor.com/counter/<%topentry_link>">

ですかね。

クリックした時に、そのURLのブックマークページへと飛ぶようにするには
<a href="http://clip.livedoor.com/page/<%topentry_link>" target="_blank" title="livedoorクリップの<%topentry_link>のページを見る"><img class="livedoor_clip_num" src="http://image.clip.livedoor.com/counter/<%topentry_link>"></a>



ブログへの導入の話が終わったところで使い勝手の話。

登録後に初めて見た初期画面に、「インポート」の文字を発見。

他のSBMのデータをインポート、そしてlivedoorクリップのデータをエクスポートできるとのこと。

SBMにそんな仕組みがあったとは。

改めて見てみると、はてなにもFC2にもありました。

よく見てない私が悪いんですが、一番最初に見る画面に「インポート」の話を載せてくれるのは親切ですね。

実際、はてなとFC2ではせっかくある機能に気付かなかった訳ですし。

使い方はそれぞれログイン後のブックマーク一覧の出る初期画面から、
  • livedoor
  • 「設定」画面⇒下の方にある「インポート・エクスポート」
  • はてな
  • 「設定」画面⇒右上にある「データのエクスポート」
  • FC2
  • 右側の「メニュー」の「インポート/エクスポート」

で、使えます。

そしてエクスポートできる形式ですが、
  • livedoor
  • RSS(2.0)
  • はてな
  • Atom, RSS(1.0), ブックマーク形式(HTML)
  • FC2
  • HTML, OPML

となっています。

FC2の出すファイルだけ少し特殊で、試していませんがSBM間で互換性があるのか疑問です。

インポート形式については、どこも記述がないんですよね。

さすがに自分のところでエクスポートしたデータはインポートできると思いますが……

livedoorのヘルプにある画像によると、はてなの全形式がインポートできるように見えますが、詳細は不明です。

インポート(データ移行)
http://helpguide.livedoor.com/help/clip/guide/grp193

とりあえずはてなのRSS版から、livedoorクリップへのインポートはうまくいきました。

インポートの反映には結構時間がかかるので、気長に待ちましょう。

なお、はてなにはインポート機能がありません。

ずいぶん前から要望があっても取り入れ無いようです。

ユーザーの囲い込み策なんですかねぇ。

検索しても「インポートは手動かツールを使うしかない」って話しかありませんでした。

その中で見つけたものです。

ソーシャルブックマーク管理ツール
http://watcher.moe-nifty.com/memo/2005/10/bookey.html

複数のSBMの登録・削除ができ、SBM間のデータを同期したりもできるようです。

確かに3つも4つも使ってると管理が大変でしょうしね。

いや、普通はSBMをそんな何社も使わないでしょうけど。

便利に使うためのSBMが面倒になっては本末転倒ですし。

SEOとか考えてる人向けのツールですね。

これで同期すればFC2ブックマークのタグの登録できない問題も解決できるんでしょうか?...


そんな登録方法に関して。

livedoorクリップの登録できるデータは、レート、タグ、コメントです。

レートは☆で5段階で評価をつけられるものです。

URLとタイトルは編集できないというのがはてなやFC2と違い、ユーザーよりもサイトオーナー側に配慮した形になっています。

サイトオーナーの知らないところで勝手に変な名前で登録されてしまう可能性を考えれば、livedoorのシステムの方が正しいようには感じます。

タイトルをちゃんとつけてないページも編集できない訳ですが、それはサイト側の不手際ですし。

あえて無題というポリシーの方もいるかもしれませんしね。


FC2の時は酷い目にあったタグはどうでしょう。

タグ入力はスペースを空けて、半角30文字、全角10文字で10個までです。

FC2ブックマークと違って、ちゃんと使い方に書いてありました。

というか、それが当たり前。

オーバーした時にどうなるかまで詳しく書いてありました。

はてなにも負けないくらい、ユーザービリティにしっかり配慮されていて好感触です。

FC2も見習ってください。

livedoorクリップもタグ表示にはタグクラウドを使用しています。

タグ表示のデファクトスタンダードですね。

入力時に既に使ったことのあるタグをクリック入力する機能も、3社ともありました。


クリップしたページの一覧は、FC2のように画像付きの一覧、文字だけの一覧、画像だけの一覧ができます。

画像だけの一覧ってのはちょっと新しいかも。

イメージ検索みたいな感じになります。

でも、サムネイルは各社とも導入していますが、実用上サムネイルを見て「あ~!このページこのページ!」って、なることはそんなにあるのだろうか。


全体的的な感想ですが、はてなほどじゃないにしろ、FC2よりもユーザー数が多く、コミュニティ・情報量がしっかりしています。

情報が多いほうがSBMの共有の部分に魅力が生まれます。

またユーザー数が多いからか、ユーザービリティもしっかりとしていると感じました。

さらに、ユーザー数が多くても重くなったりということはありません。

読み込み速度以外も全体的に機動性がいい印象を受けました。

実はlivedoorのサービスを使うのは今回が初めてです。

2,3年ほど前、知人のlivedoorブログが「読み込めないほど重かった」ので、livedoorには「人は多いがとにかく重い」というイメージを抱いていたんですが。

ホリエモンがいなくなって、見た目だけでなく実のあるサービスを提供するようになったのかもしれません。


さて、次はどのSBMを使ってみようか……

今回興味を持ったもの

ヒルズ黙示録―検証・ライブドアヒルズ黙示録―検証・ライブドア
大鹿 靖明

朝日新聞社 2006-04
売り上げランキング : 55208
おすすめ平均

Amazonで詳しく見る
by G-Tools



関連した記事を見る(タグ検索)
HTML CSS 設定 FC2ブログ ブックマーク livedoor
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:SEO対策 - ジャンル:コンピュータ

メインカテゴリ:ネット関連  カテゴリ:SBM



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。