Tumblrのカスタマイズで作るWebサイト～苦戦したポイントTOP5～

みかみ@skyguild

自己紹介

三上絵利菜

・日本電子専門学校 Webデザイン科 卒業・Web制作会社でフロントエンドエンジニア兼ディレクター・オープンソースプロジェクトSetucoCMSのリーダー

これまで

@skyguildフリーランスのWebエンジニア NEW！

今日お話すること

　TumblrをCMSとして使って

簡単にWebサイトを作ってみよう。

Tumblr？ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。要するにTwitterっぽい機能がついたブログ。

CMS？コンテンツマネージメントシステム。ブログやWebサイトを簡単に構築・運用するためのシステム。WordPress、MovableTypeなどが有名。

ブログとソーシャル機能を兼ね揃えるTumblrの

CMS = Webサイト運用 としての機能

を活用してみます。

Tumblrで作ったサイト

[g]ift ギフト

・金沢にあるギフトショップ

・北陸の魅力発掘と発信

・Instagramから投稿　FacebookとTumblrにポストされる

↓SNSに投稿する感覚で、Webサイトの更新ができちゃう！素敵！

http://www.gift-hokuriku.jp/

　TumblrをCMSとして使って

簡単にWebサイトを作ってみよう。

　TumblrをCMSとして使って

↓運用をする人にとって簡単に

↓（簡単に構築できるとは言っていない）

簡単にWebサイトを作ってみよう。

Tumblrカスタマイズの基本

LIGブログ

・LIGブログさん、　いつもお世話になってます！・Tumblrのカスタマイズの基礎をすごく　わかりやすく解説されている。

・最近、テーマ作成の連載もスタート。

http://liginc.co.jp/web/service/other-service/110898

Tumblr でもここまでデザインできる！オリジナルカスタマイズの実例解説

仕様要点（2014年9月時点）

・ 認証フォーム付の非公開設定ができる。・アップロードは1ファイル5MB＆1日15MBまでという制限付き。　ファイルを置く別サーバを用意したほうがよいでしょう。・Tumblr独自のテンプレートタグを使用してカスタマイズ。・テンプレートHTMLは1ソース。　テンプレートタグでトップ・詳細等で出力するタグを出し分け。・Tumblrには投稿タイプという概念があり、タイプ別の実装が必要。

今回は基本のカスタマイズの話

ではなく、

苦労したポイントTOP5と

解決方法について紹介します。

※基本はLIGブログさんを参照！

5位：テンプレートタグが少ない

テンプレートタグが少ない

・ Tags of Tumblrhttp://tagblr.tumblr.com/03-01

・ データを”表示する” ための機能がほとんど。　データを”加工する” 機能はあまりない。

・変数や条件分岐（if文）にあたるものがほぼない。　※ページ判別や検索関連の分岐はある。

こんなことがしたい・・・

・ 最近の記事にNewマークをつけたい。

⇒ MTだと変数と if文で実現可能。

・タイトルと説明文を特定の文字数で省

略したい。

⇒ WordPressならPHP関数で、

　 MTではモディファイアで。

解決「JavaScriptでなんとかしましょう」

■Newアイコンテンプレート側で出力してる日付を取得。現在の日付と比較して14日以内の場合にアイコンを表示。

■文字数で省略substrメソッドを使う。

4位：固定ページを判別できない

固定ページを判別できない

・Tumblrには記事とは別に固定ページを作成可能。

・しかし、

　{block:PermalinkPage}

　こういうタグで記事詳細の時のみ出し分けられる

　タグがあるが、固定ページも記事詳細の判定に

　含まれるため、判別できない。

こんなことがしたい・・・

・ 固定ページではいらない要素を出し分けたい。

・固定ページの時だけ、bodyタグに特定のclassをいれたい。

・ページごとに、bodyタグに特定のclassをいれたい。

⇒ CSSをページ別に整理したくて。。。

解決「JavaScriptでなんとかしましょう」

■HTML側固定ページでタグを書ける箇所のどこかに、「.pages」という固定ページ共有classと、idでページ別の識別名をつける。

■JS側「.pages」があればという条件分岐で、いらない要素をremoveし、必要なclassと idを追加する。

3位：フォーム機能がない

こんなことがしたい・・・

・お問い合わせフォームを作りたい。ただそれだけが私の望みです。・Tumblr自体はフォーム機能を提供してない。・Googleフォームを使ったり、フリーで提供されていてTumblrにも組み込みできるサービスなどはある。けど、もう少し自由度高くカスタマイズしたい。。。

解決「JavaScriptでなんとかしましょう」

正確にはJS + PHPで実現した。

PHPで受け取ったデータをバリデートしたり、

メールで管理者に送信するプログラムを作成。

JSからAjaxでフォームのデータを送信。

（PHPだけで作って、iframeにしてもよかったんじゃないか・・・？）

2位：「カテゴリ」の概念がない

「カテゴリ」の概念がない

・ お分かりいただけたろうか？

こんなことがしたい・・・

カテゴリ、サブカテゴリ、県名をつけたい。

カテゴリ：アイテム , 日誌 , お知らせ など

サブカテゴリ：アイテムの小分類

　使うもの , 食べるもの , その他 など

県名：石川県 ,福井県 ,富山県

解決「JavaScriptでなんとかしましょう」

■HTML側カテゴリもサブカテゴリもとにかく全部タグとして登録して、全部出力。

■JS側カテゴリ、サブカテゴリ、県名の配列を用意しておく。（増えない前提）HTMLからタグ一覧を取得して、配列と比較してあるべき場所へ割り振っていく。（エグい）

1位：「タイトル＆サムネイル」を組み合わせられる機能がない

「タイトル＆サムネイル」を組み合わせられる機能がない

・ テキスト投稿型には「サムネイル」を登録できない。

・画像投稿型には「記事タイトル」を登録できない。

こんなことがしたい・・・

つまり、、、

こういう構成にできない！！

したい！！！

さあ、どう解決するか。

わかりますよね？

解決「JavaScriptでなんとかしましょう」

■テキスト投稿型記事本文を出力して、「最初に登場する画像」をサムネイルとして挿入。

両タイプに対応するようにテンプレートタグで両方出力した上で、JavaScriptでリプレイスしていく。

■画像投稿型記事本文を出力して、「本文の最初の一行」をタイトルとして挿入。

まとめ

ちょっと無理くりですが、

JavaScript を使えば色々なんとかなる。

運用ルールで解決できればそれもOK

ご静聴ありがとうございました！