<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tags &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/tags/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Fri, 15 Oct 2010 05:02:28 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>Tumblrでタグリスト/新規投稿リストを出力してみる</title>
		<link>https://blog.mach3.jp/2010/10/15/js-tumblrposts.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Fri, 15 Oct 2010 05:02:28 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[CMS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Tags]]></category>
		<category><![CDATA[Tumblr]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=882</guid>

					<description><![CDATA[この記事の情報は古い為、次の記事をあわせて御覧ください。 » TumblrPosts.jsが新しくなりました Tumblrを弄る案件に初めて参加させて頂きましたが、 このサービスは他のブログサービスと異なり、 「最新の投 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="caution">
  この記事の情報は古い為、次の記事をあわせて御覧ください。<br /> » <a href="/2012/11/tumblrposts-js-1-3.html">TumblrPosts.jsが新しくなりました</a>
</p>



<p>Tumblrを弄る案件に初めて参加させて頂きましたが、<br />
このサービスは他のブログサービスと異なり、<br />
「最新の投稿」「タグ一覧」の出力機能を備えていない様子。<br />
同機能を実現する為にはAPIへのアクセスを（複数回）行わなければならないのですが、<br />
大変不便なので、それを代行するライブラリを書いてみました。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/TLff5hpTJ3I/AAAAAAAABDs/okRSs8lEXPM/201010151358.png" alt="Tumblrでタグリスト/新規投稿リストを出力してみる"/></figure>



<p></p>



<span id="more-882"></span>



<h2 class="wp-block-heading">TumblrPosts</h2>



<p><a href="http://github.com/mach3/js-tumblrposts.js">mach3&#8217;s js-tumblrposts.js at master &#8211; GitHub</a></p>



<p>Tumblrの記事を、API(/api/read/json/）を通して取得するクラスです。</p>



<h2 class="wp-block-heading">簡単な使い方</h2>



<h3 class="wp-block-heading">ライブラリのロード</h3>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.class.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"tumblrposts.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></span></pre>


<p>先ず、必要なライブラリをロードします。<br />
jQueryと、jquery.class.jsが必要です。<br />
cf) <a href="/2010/09/jquery-class-js.html">jQueryでPrototype.js風のクラス定義をしてみる</a></p>



<h3 class="wp-block-heading">初期化</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> posts = <span class="hljs-keyword">new</span> TumblrPost({
    <span class="hljs-attr">domain</span>:<span class="hljs-string">"example.tumblr.com"</span>,
    <span class="hljs-attr">maxNum</span>:<span class="hljs-number">300</span>
});
</code></span></pre>


<p>初期化します。<br />
引数のオブジェクトリテラルには、domain（対象となるTumblrのドメイン）と<br />
maxNum（取得する最大記事数）を渡す事が出来ます。<br />
両方共省略しても大抵問題は生じません。詳しくは後述。</p>



<h3 class="wp-block-heading">イベント</h3>



<p>次にイベントハンドラを設定します。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">posts.bind( posts.EVENT_COMPLETE, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-keyword">var</span> s = <span class="hljs-keyword">this</span>;
    <span class="hljs-comment">// getPosts() で投稿リストを取得</span>
    <span class="hljs-comment">// getTitleByPost() で投稿タイトルを取得</span>
    $.each( <span class="hljs-keyword">this</span>.getPosts(), <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> i, post </span>)</span>{
        <span class="hljs-keyword">var</span> title = s.getTitleByPost(post, <span class="hljs-number">100</span>),
            html = <span class="hljs-string">'&lt;li&gt;&lt;a href="{{url}}"&gt;{{title}}&lt;/a&gt;&lt;/li&gt;'</span>
            .replace( <span class="hljs-regexp">/{{url}}/</span>, post.url )
            .replace( <span class="hljs-regexp">/{{title}}/</span>, title );
        $(html).appendTo( $(<span class="hljs-string">"ul#updated"</span>) );
    });
    <span class="hljs-comment">// getTags() でタグリストを取得</span>
    $.each( <span class="hljs-keyword">this</span>.getTags(), <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> i, tag </span>)</span>{
        <span class="hljs-keyword">var</span> html = <span class="hljs-string">'&lt;li&gt;&lt;a href="/tagged/{{url}}"&gt;{{tagname}} ({{count}})&lt;/a&gt;&lt;/li&gt;'</span>
            .replace( <span class="hljs-regexp">/{{tagname}}/</span>, tag.name )
            .replace( <span class="hljs-regexp">/{{count}}/</span>, tag.count );
        $(html).appendTo( $(<span class="hljs-string">"ul#tags"</span>) );
    });
});
</code></span></pre>


<p>記事のロードが完了すると<em>&#8220;complete&#8221;</em>（EVENT_COMPLETE）イベントが着火されます。<br />
イベントハンドラ内で<em>getPosts()</em>や<em>getTags()</em>を呼ぶと、投稿/タグのリストを取得する事が出来ます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">posts.bind( posts.EVENT_PROGRESS, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-built_in">console</span>.log( <span class="hljs-keyword">this</span>.getLoadedRate() + <span class="hljs-string">"% Loaded"</span> );
});
</code></span></pre>


<p>こちらは使う事は少ないかもしれませんが、<br />
記事のロードが進むごとに<em>&#8220;progress&#8221;</em>(EVENT_PROGRESS)イベントが着火されます。<br />
getLoadedRate()で進捗をパーセントで取得する事が出来ます。</p>



<h3 class="wp-block-heading">ロードスタート</h3>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">posts</span><span class="hljs-selector-class">.run</span>();
</code></span></pre>


<p><em>run()</em>メソッドをコールすると、APIへのアクセスが開始されます。</p>



<h2 class="wp-block-heading">APIとか</h2>



<dl>
<dt>TumblrPost( config )</dt>
<dd>コンストラクタ。引数に設定用のオブジェクトを渡せます。<br />
<em>config</em><br />
&#8211; <em>domain</em> (String) : Tumblrのドメイン。外部Tumblrにアクセスする時に指定。<br />
&#8211; <em>maxNum</em> (Number) : 読み込む最大記事数。投稿数が多い場合はこれを指定する事で負荷を軽減出来ます。<br />
（maxNumを指定した場合、タグの取得はあまり正確でなくなります）</dd>
<dt>run() : void</dt>
<dd>APIへのアクセスを開始します。<br />
全ての投稿をロードするか、config.maxNumに達するまでアクセスを繰り返し行ないます。</dd>
<dt>getTags() : Array</dt>
<dd>タグリストを取得します。返されるArrayの子要素はシンプルなオブジェクトです。<br />
<em>Array</em><br />
&#8211; <em>name</em> (String) : タグの名前<br />
&#8211; <em>count</em> (Number) : ポスト数</dd>
<dt>getPosts( offset, count ) : Array</dt>
<dd>記事リストを取得します。<br />
&#8211; offset (Number) : 開始位置<br />
&#8211; count (Number) : 取得する記事数 返されるArrayの子要素はTumblrAPIのpostオブジェクトです<br />
c) <a href="http://www.tumblr.com/docs/en/api#api_read">API | Tumblr</a></dd>
<dt>getTitleByPost( post ) : String</dt>
<dd>postオブジェクトから記事タイトルを抽出します。（試験的に実装）</dd>
<dt>getLoadedRate() : Number</dt>
<dd>ロードの進捗をパーセントで返します。</dd>
</dl>



<h2 class="wp-block-heading">まとめ</h2>



<p>仕方がないとは言え、<br />
この手法は場合によっては複数回JSONPのアクセスを繰り返すことになり、<br />
パフォーマンスが正直あまりよろしくない為、必要がなければ避けるべきでしょう。<br />
（一度に取得できるポストの最大数が50なので…）</p>



<p>最新の投稿の取得は、はっきり言ってオマケでつけています。<br />
タグ抽出時にどうせ投稿情報取得するので、ついでに格納しとけ～的な。<br />
新規投稿だけならJSONPのコールバックで直接処理したほうが明らかに効率がいいので、<br />
タグリストに用がないならそうすべきですね。</p>



<p>そんなわけで、<br />
TumblrのAPIがタグの抽出に対応してくれれば不要なライブラリです。<br />
まとめ書きながらなんかへこんできました…</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
