『Tumblr Tag Cloud Widget』でタグクラウドを高速表示化

を、試してみたので紹介です。【Tumblr Tag Cloud Widget】：http://post-theory.com/tumblr-tag-cloud-javascriptTumblrでお馴染み、＜Tumblr Tag Clouds＞の改良版です。（※開発者さんは別）Tumblr Tag Cloudsのロードが遅くなっていく原因は、毎回全てのポストを取得しているためでしたが、主にその点を改善している様子。タグのキャッシュ化スクリプトの軽量化（タグデータ込みで４KB）タグの表示数制御オプション【高速表示の大雑把な仕組み】 Tumblr APIを利用して全ポスト＆タグを抽出、キャッシュファイル化してサーバーへ保存し、要求があるとそこから呼び出して表示するというもの。※利用者、訪問者の個人情報を収集することはありません。　- プライバシーポリシーページ「Post-Theory.com Privacy Policy」より WordPressのキャッシュ系プラグインが想像しやすいんじゃないでしょうか。ということで、設定からコードの取得、簡単なカスタマイズまでを備忘録。【目次】 Tumblr Tag Cloud Widgetの設定とコードの取得 Tumblr Tag Cloud Widgetの仕様と注意点タグクラウドのカスタマイズトラブルシューティング 1．Tumblr Tag Cloud Widgetの設定とコードの取得 Use and Installationから順に進みます。「1. Register your Tumblr with Me First」で、まずは設置するTumblrのURLを入力。で、Submitボタンをクリック。すると簡単なクイズが出てきました。ちなみにこちら、クイズ部分は画像です。よくあるスパム対策のアレですね。複数パターン有り、大体足し段か引き算、選択式、yesかnoで答えられるものになってます。正解すると上のようなメッセージに切り替わり、タグの読み込みが開始されます。続いて「2.

http://chips-tips.tumblr.com/post/30584475666/tumblr-tag-cloud-widget

chips-tips: を、試してみたので紹介です。【Tumblr Tag Cloud Widget】：http://post-theory.com/tumblr-tag-cloud-javascriptTumblrでお馴染み、＜Tumblr Tag Clouds＞の改良版です。（※開発者さんは別）Tumblr Tag Cloudsのロードが遅くなっていく原因は、毎回全てのポストを取得しているためでしたが、主にその点を改善している様子。タグのキャッシュ化スクリプトの軽量化（タグデータ込みで４KB）タグの表示数制御オプション【高速表示の大雑把な仕組み】 Tumblr APIを利用して全ポスト＆タグを抽出、キャッシュファイル化してサーバーへ保存し、要求があるとそこから呼び出して表示するというもの。※利用者、訪問者の個人情報を収集することはありません。　- プライバシーポリシーページ「Post-Theory.com Privacy Policy」より WordPressのキャッシュ系プラグインが想像しやすいんじゃないでしょうか。ということで、設定からコードの取得、簡単なカスタマイズまでを備忘録。【目次】 Tumblr Tag Cloud Widgetの設定とコードの取得 Tumblr Tag Cloud Widgetの仕様と注意点タグクラウドのカスタマイズトラブルシューティング 1．Tumblr Tag Cloud Widgetの設定とコードの取得 Use and Installationから順に進みます。「1. Register your Tumblr with Me First」で、まずは設置するTumblrのURLを入力。で、Submitボタンをクリック。すると簡単なクイズが出てきました。ちなみにこちら、クイズ部分は画像です。よくあるスパム対策のアレですね。複数パターン有り、大体足し段か引き算、選択式、yesかnoで答えられるものになってます。正解すると上のようなメッセージに切り替わり、タグの読み込みが開始されます。続いて「2. Generate your Script with this Wizard」へ進みます。以下が初期状態。なかなかに圧巻です。ここで細かいオプションを設定。最下部にプレビューが表示されるので感覚でもいけます。 Tumblr Name ：デフォルトのままで問題ありません。 Sort Tags ：タグのソート順の設定。 time (default) ⇒最近使用したタグから順に表示。 frequency ⇒使用頻度の高いタグ＝ポスト数の多いタグから順に表示。 alphabetical ⇒アルファベット順に表示。日本語環境でも「lang=」を設定することで、同じような表示が出来ます。（後述） Max # Tags ：表示タグ数の最大値を設定。デフォルトは500。 Min Tag Freq. ：表示させたいタグが付与されている、該当ポスト数の最小値を指定。もちろん空欄でもOK。※例 ⇒ 「3」に設定すると、該当ポスト数が「2以下」のタグは表示されない。 Scale Tags? ：フォントサイズを統一するかどうかを選択。デフォルトはfrequency。 Max Font Size % ：タグをスケーリングする際の最大値を指定。デフォルトは240。公式では200 - 400推奨。※100未満や1000以上は無視されます。 Base Font Size ：ベースになるフォントサイズを指定できます。px、pt、%、em、exから選択可。 Use HTML <UL>? ：タグをリスト表示するかどうかの設定。本家さんで注意が出ますが、HTML、CSSをかじってる人向けの設定です。（後述） Comma b/w Tags? ：カンマで区切りを入れるかどうかを選択。その他も可。 Prevent Tag Wrap? ：単語の中途半端な折り返しを防ぐための指定。CSS3のword-wrapにあたります。公式では「Yes (soft)」推奨。 Text Case ：大文字小文字の区別がある言語環境で、タグの表示をちょっと変えます。 All Lower ⇒全て小文字表記 All Upper ⇒全て大文字表記 First-letter ⇒英単語の冒頭だけ大文字表記 Title Case ⇒下のような感じに変換。 “the cat in the hat is a book by dr seuss” ==> “The Cat in the Hat Is a Book by Dr Seuss” Language Code ：「Sort Tags」で「alphabetical」を選択した場合、設定推奨。日本語環境であいうえお順にソートできるよう、ISO（国名）コードで「ja」か「jpn」を入れておきます。 Exclude these tags ：見せたくない、除外したいタグがあるときに。カンマ区切りか、一行ずつ入力。設定が終わったら「Copy and Paste this Code」からコードを取得。あとは表示させたい場所へコピペしたら完成です。 2．Tumblr Tag Cloud Widgetの仕様と注意点高速表示のための仕様みたいなもの。公式の＜Frequently Asked Questions＞も参考にしてみてください。投稿してもタグクラウドはすぐに更新されません。2時間に1回、自動的にタグクラウドサーバーのほうでキャッシュが更新されます。関連：項目４．トラブルシューティング過去の投稿のタグを編集、削除した場合、新規投稿があるまでタグクラウドは更新されません。総合投稿数が5000以上になると、最新5000件分だけのタグを取得するようになります。 3．タグクラウドのカスタマイズ 3-1. カスタマイズ例 CSSでリンク色や表示領域など、ある程度タグクラウドをカスタマイズすることができます。以下は本家さんで紹介されている、カスタマイズ用CSSたち。ここでは何も調整せず、Tumblrテーマ＜New Theme＞を例にそのまま適用させてみます。【カスタマイズ例1 】 /* 1,2 Changing the color */ #tagCloud a, #tagCloud a:visited { color: ForestGreen } #tagCloud a:hover, #tagCloud a:active { color: LimeGreen } /* 3 Getting rid of the "underline" */ #tagCloud a { text-decoration: none } /* 4,5 Creating an "overlap" effect */ #tagCloud { font-size: 10pt; line-height: 125%; } /* 6 Adjusting the width of the cloud */ #tagCloud { width: 300px } /* 7 Containg your Cloud in a Fixed Box */ #tagCloud { width: 300px; height: 600px; overflow: hidden; } タグクラウドのリンク色：ForestGreen（緑）ホバー時のリンク色：LimeGreen（明るめの黄緑）リンクの下線を消去ベースになるフォントサイズ：10pt タグクラウドの行間：125% タグクラウドのボックス幅：300px タグクラウドのボックスサイズを幅300px×高さ600pxに固定 ※注⇒領域内に収まらない場合ははみ出します。参考：スタイルシート［CSS］/ボックス/ボックスからはみ出た部分の表示方法を指定する - TAG index Webサイトで、この指定で実際どうなるかというとタグクラウドのボックスサイズを指定したこともあってレイアウト的に微妙なんですが、取り敢えずイメージとして。【カスタマイズ例2 】ここで注目したいのは中央寄せでしょうか。行間（line-height）を調整してあげたい。 #tagCloud { font-size: 10pt; line-height: 125%; text-align: center; } #tagCloud span { position: relative; vertical-align: text-bottom; } #tagCloud a, #tagCloud a:visited { color: Black; text-decoration: none; } #tagCloud a:hover, #tagCloud a:active { color: Red; text-decoration: none; } ベースになるフォントサイズ：10pt タグクラウドの行間：125% タグを中央寄せにタグクラウドのリンク色：Black リンクの下線を消去ホバー時のリンク色：Red ホバー時の下線を消去以上、本家さんで挙げられているものでした。あくまで例なので、これらを参考に使用テーマや好みに合わせて調整するのがオススメです。そんなわけで例3、実際に＜New Theme＞にて、自分好みにカスタマイズ＆設置してみたもの。【カスタマイズ例3 】主な基本設定（他はデフォルト） Sort Tags： Alphabetical Max Font Size %： 200 Prevent Tag Wrap?： Yes (soft) Language Code： ja 【CSS】 #tagCloud { margin: 5px 0; padding: 0.6em 5px; font-size: 0.88em; } #tagCloud a, #tagCloud a:visited { text-decoration: none; color: #2F2F2F; border-bottom: 1px solid #eee; } #tagCloud a:hover, #tagCloud a:active { color: #9cbb1c; background-color: transparent; border: none; } ＜New Theme＞のオリジナルCSSを引き継ぎつつ、位置調整や色を変更。ついでにオリジナルはリンクのホバー時に背景色が変わるため、「background-color: transparent;」を指定し、タグクラウド上限定で無効にしました。 3-2. カスタマイズのためのヒントこのスクリプトではタグクラウドが以下のように出力されるので、CSSを記述する場合はそちらを参考にすると捗ります。注：公式で紹介している記述に、実際に確認できた部分を追加。 <div class="tc-loaded" id="tagCloud"> ... <a class="tc-link" title="N Posts" href="/tagged/TagName"> <span class="tc-tag" style="font-size: XXX%">TagName</span> </a> ... </div> なお、「2. Generate your Script with this Wizard」で「Use HTML <UL>?」をONにした場合はリスト表示用に変わるのでご注意。 <div class="tc-loaded" id="tagCloud"> <ul> ... <li class="tc-item"> <a class="tc-link" title="X Posts" href="/tagged/TagName"> <span class="tc-tag" style="font-size: XXX%">TagName</span> </a> </li> ... </ul> </div> 4．トラブルシューティング公式の「よくある質問集」13個の中から、気になる項目を抜粋してざっくり意訳。ナンバリングは公式に基づいてます。詳細と完全版は原文にて。原文：Frequently Asked Questions 1. TumblrのURL（http://○○○○.tumblr.com）を変えた後、タグクラウドが表示されないもう一度新しいURL名でスクリプトコードを取得。古いものと置き換えて完了。 2. 投稿後、タグクラウドが更新されない 2時間ごとにキャッシュが自動更新、タグクラウドに反映されます。すぐに反映させたい！という場合はrequest a complete refreshから手動で更新可能。ただしこちらも「2時間に1回」推奨です。 3. タグを編集/削除したが、タグクラウドで反映されないタグクラウドのキャッシュは「新しい投稿があった場合のみ、2時間に1回更新」されます。過去の投稿のタグを編集しても、新規投稿があるまでタグクラウドには反映されません。これもrequest a complete refreshから手動で更新可能。 4. ハイフンやダッシュ記号（ - ）を含むタグをクリックしても該当ポストが表示されない Tumblr側の仕様です。以下、同じようにオススメできない記号。「 + 」「 _ 」「 / 」 6. プライバシーポリシー Post-Theory.com Privacy Policy：http://post-theory.com/page/privacy 8. 広告について挿入する予定は一切無いとのこと。 11. タグクラウドを削除したい（Tumblrから取得したデータを削除してほしい） 30日間、サーバーへの要求（タグクラウドの表示や更新）がないと、自動的にTumblrに関するデータが削除されます。タグクラウド削除目的であればスクリプトも外しておきます。すぐにデータを削除してほしい場合は、開発者さんへ直接依頼。－－－－－－－－－－－－－－－そんなわけで大雑把に＜Tumblr Tag Cloud Widget＞の話でした。高速表示化のために削ってる部分はあるものの、使ってみた感じはとても快適です。ちなみにタグクラウドオプションは、コードの末尾のほうで「&」で区切って表記されているので、わざわざコードを一から取得し直さなくても、チョイチョイと書き換えor追記で楽々変更可能だったり。詳細：Detailed Tag Cloud Options なんやかんやで本家さんが一番参考になるので、困ったときはそちらを参照してみるのがオススメです。

Advertising