TwitterやFacebookのような爆発的人気は出ていないものの、
少しずつ着実にユーザー数を増やしているTumblr。
- 無料で開設できる
- 広告がない
- 投稿が簡単
- 独自ドメイン使用も可能
- WordPressよりも構築が簡単
などといった側面から、
Webサイト（ブログではないサイト）のTumblr化が
じわじわと流行っているようです。
参考：
Tumblrで作られたスゴいWebサイトまとめ14個
Tumblrで作られた、一目ではTumblrと分からないWebサイトまとめ16個
そこで、HACKistのTumblr版を作ってみました。
今回はその制作の流れをご紹介いたします。
1. HACKist用テーマを作成
通常のWebサイトと同様にデザイン、コーディングをした後、
記事の内容や日付、ブログタイトルなどが動的にされるよう
Tumblr用の演算子へと適宜置き換えていきます。
Tumblr演算子には、大きく分けて2種類あります。
1. Variable【ブログのタイトルや説明文などのデータを挿入する演算子】
＜例＞（括弧内は今回挿入される値）
{Title} : ブログのタイトル（HACKist on Tumblr）
{PortraitURL-16} : ブログのプロフィール画像のURL（http://api.tumblr.com/v2/blog/hack-ist.tumblr.com/avatar/128）
2. Block【投稿内容やナビゲーションなどがレンダリングされるための演算子】
{block:◯◯}{/block:◯◯}で囲み何のブロックであるかを宣言すると、
ブロック内の{Body}や{Title}へ、ブロックに応じた内容や記事タイトルが挿入されます。
＜例＞文章の投稿用テンプレートの場合
{block:Posts} // 投稿ブロック宣言
{block:Text} // 文章記事ブロック宣言{block:Title} // タイトルブロック宣言
<h3><a href=”{Permalink}”>{Title}</a></h3> // 記事のリンクと記事タイトル挿入
{/block:Title}
{Body} // 記事内容挿入{/block:Text}
{/block:Posts}
トップページも各記事ページも共通した1つのHTMLファイルで構成されるため、
- トップページのみに表示したい内容の場合
{block:IndexPage}{/block:IndexPage}
- 記事ページのみに表示したい内容の場合
{block:PermalinkPage}{/block:PermalinkPage}
で囲みます。
テーマ編集画面下部にあるページ管理のところから、
Wordpressでいう固定ページのように
記事ではない「ページ」を作成することもできます。
その場合、固定の「ページ」のみに適用されるHTMLを入力できます。
また、Tumblrにはサイト全体のタグを一覧で出す演算子が用意されていないため、
jQueryプラグイン「Tanglr」を使用しました。
2. HACKist本サイトと連携
連携にはIFTTTというWebサービスを使用しました。
IFTTTは、一方のWebサービスのアクション（今回ではHACKist本サイトに記事が投稿）を引き金に
別のWebサービスに何かしらの作業（今回ではTumblrに投稿）をしてくれるWebサービスです。
参考：
記事の保存からお天気通知まで、59のウェブサービスを手軽に自動連携させられる「IFTTT」を使ってみた – GIGAZINE
Tumblr投稿の際に、本サイトでのタイトルや記事内容はもちろん、
引用元へのリンクやタグのデータも自動的に挿入することができます。
IFTTTは今回の使い方以外にも
TwitterからFacebookへの自動投稿などオーソドックスな使い方から、
翌日の天気予報が雨だったらGmailにメールが送られてくる、など少し面白い使い方まで
まだまだ使い方にはいろんな可能性がありそうです。
とてもざっくりとしていますが、HACKist on Tumblr制作時の流れをご紹介いたしました。
2010年のTwitter、2011年のFacebook、2012年のLINEに次いで、
果たして2013年はTumblrが日本で大流行する年になるのでしょうか。楽しみです。
Credit /
Markup / 小玉 千陽
