Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27

7,883 views

Published on

第27回 Creators MeetUpの登壇資料です!
http://cmu.connpass.com/event/13354/

Tumblrをフルカスタマイズしたサイト制作に挑戦してみました。 Tumblr本来の機能で出来ること、各投稿タイプの特性、JSで何とか工夫したこと...などなど。
バッドノウハウだなーと思われる部分は、お手柔らかにご指摘ください><

武井絵利菜@skyguild
http://skyguild.jp

Published in: Technology
  • Be the first to comment

Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27

  1. 1. Tumblrのカスタマイズで作るWebサイト ∼苦戦したポイントTOP5∼ みかみ@skyguild
  2. 2. 自己紹介 三上絵利菜 ・日本電子専門学校 Web デザイン科 卒業 ・Web 制作会社でフロントエンドエンジニア兼ディレクター ・オープンソースプロジェクト SetucoCMS のリーダー これまで @skyguild フリーランスの Webエンジニア NEW!
  3. 3. 今日お話すること
  4. 4.  TumblrをCMSとして使って 簡単にWebサイトを作ってみよう。
  5. 5. Tumblr? ブログとミニブログ、そしてソーシャルブックマークを統合したマ イクロブログサービスである。 要するにTwitterっぽい機能がついたブログ。 CMS? コンテンツマネージメントシステム。 ブログや Web サイトを簡単に構築・運用するためのシステム。 WordPress、MovableType などが有名。
  6. 6. ブログとソーシャル機能を兼ね揃える Tumblrの CMS = Webサイト運用 としての機能 を活用してみます。
  7. 7. Tumblrで作ったサイト
  8. 8. [g]ift ギフト ・金沢にあるギフトショップ ・北陸の魅力発掘と発信 ・Instagram から投稿  FacebookとTumblr にポストされる ↓ SNS に投稿する感覚で、 Web サイトの更新ができちゃう!素敵! http://www.gift-hokuriku.jp/
  9. 9.  TumblrをCMSとして使って 簡単にWebサイトを作ってみよう。
  10. 10.  TumblrをCMSとして使って ↓ 運用をする人にとって簡単に ↓ (簡単に構築できるとは言っていない) 簡単にWebサイトを作ってみよう。
  11. 11. Tumblrカスタマイズの基本
  12. 12. LIG ブログ ・LIG ブログさん、  いつもお世話になってます! ・Tumblr のカスタマイズの基礎をすごく  わかりやすく解説されている。 ・最近、テーマ作成の連載もスタート。 http://liginc.co.jp/web/service/ other-service/110898 Tumblr でもここまでデザインできる! オリジナルカスタマイズの実例解説
  13. 13. 仕様要点(2014 年9月時点) ・認証フォーム付の非公開設定ができる。 ・アップロードは 1ファイル 5MB&1日15MB までという制限付き。  ファイルを置く別サーバを用意したほうがよいでしょう。 ・Tumblr 独自のテンプレートタグを使用してカスタマイズ。 ・テンプレート HTML は 1 ソース。  テンプレートタグでトップ・詳細等で出力するタグを出し分け。 ・Tumblr には投稿タイプという概念があり、タイプ別の実装が必要。
  14. 14. 今回は基本のカスタマイズの話 ではなく、 苦労したポイント TOP5 と 解決方法について紹介します。 ※基本は LIG ブログさんを参照!
  15. 15. 5 位:テンプレートタグが少ない
  16. 16. テンプレートタグが少ない ・Tags of Tumblr http://tagblr.tumblr.com/03-01 ・データを 表示する ための機能がほとんど。  データを 加工する 機能はあまりない。 ・変数や条件分岐(if文)にあたるものがほぼない。  ※ページ判別や検索関連の分岐はある。
  17. 17. こんなことがしたい・・・ ・最近の記事に New マークをつけたい。 MT だと変数と if 文で実現可能。 ・タイトルと説明文を特定の文字数で省 略したい。 WordPress なら PHP 関数で、   MT ではモディファイアで。
  18. 18. 解決 「JavaScript でなんとかしましょう」 ■New アイコン テンプレート側で出力してる日付を取得。 現在の日付と比較して 14 日以内の場合に アイコンを表示。 ■文字数で省略 substr メソッドを使う。
  19. 19. 4 位:固定ページを判別できない
  20. 20. 固定ページを判別できない ・Tumblr には記事とは別に固定ページを作成可能。 ・しかし、  {block:PermalinkPage}  こういうタグで記事詳細の時のみ出し分けられる  タグがあるが、固定ページも記事詳細の判定に  含まれるため、判別できない。
  21. 21. こんなことがしたい・・・ ・固定ページではいらない要素を出し分けたい。 ・固定ページの時だけ、body タグに特定の class をいれたい。 ・ページごとに、body タグに特定の class をいれたい。 CSS をページ別に整理したくて。。。
  22. 22. 解決 「JavaScript でなんとかしましょう」 ■HTML 側 固定ページでタグを書ける箇所のどこか に、「.pages」という固定ページ共有 class と、id でページ別の識別名をつける。 ■JS 側 「.pages」があればという条件分岐で、い らない要素を remove し、必要な class と id を追加する。
  23. 23. 3 位:フォーム機能がない
  24. 24. こんなことがしたい・・・ ・お問い合わせフォームを作りたい。ただそれだけが私の望みです。 ・Tumblr 自体はフォーム機能を提供してない。 ・Google フォームを使ったり、フリーで提供されていて Tumblr にも組み込みできるサービスなどはある。 けど、もう少し自由度高くカスタマイズしたい。。。
  25. 25. 解決 「JavaScript でなんとかしましょう」 正確には JS + PHP で実現した。 PHP で受け取ったデータをバリデートしたり、 メールで管理者に送信するプログラムを作成。 JS から Ajax でフォームのデータを送信。 (PHP だけで作って、iframe にしてもよかったんじゃないか・・・?)
  26. 26. 2 位:「カテゴリ」の概念がない
  27. 27. 「カテゴリ」の概念がない ・お分かりいただけたろうか?
  28. 28. こんなことがしたい・・・ カテゴリ、サブカテゴリ、県名をつけたい。 カテゴリ:アイテム , 日誌 , お知らせ など サブカテゴリ:アイテムの小分類  使うもの , 食べるもの , その他 など 県名:石川県 , 福井県 , 富山県
  29. 29. 解決 「JavaScript でなんとかしましょう」 ■HTML 側 カテゴリもサブカテゴリもとにかく全 部タグとして登録して、全部出力。 ■JS 側 カテゴリ、サブカテゴリ、県名の配列 を用意しておく。(増えない前提) HTML からタグ一覧を取得して、 配列と比較してあるべき場所へ割り 振っていく。(エグい)
  30. 30. 1 位: 「タイトル&サムネイル」を 組み合わせられる機能がない
  31. 31. 「タイトル&サムネイル」を組み合わせられる機能がない ・テキスト投稿型には「サムネイル」 を登録できない。 ・画像投稿型には「記事タイトル」 を登録できない。
  32. 32. こんなことがしたい・・・ つまり、、、 こういう構成にできない!! したい!!! さあ、どう解決するか。 わかりますよね?
  33. 33. 解決 「JavaScript でなんとかしましょう」 ■テキスト投稿型 記事本文を出力して、「最初に登場する画像」をサムネイルとして挿入。 両タイプに対応するようにテンプレートタグで両方出力した上で、 JavaScript でリプレイスしていく。 ■画像投稿型 記事本文を出力して、「本文の最初の一行」をタイトルとして挿入。
  34. 34. まとめ
  35. 35. ちょっと無理くりですが、 JavaScript を使えば色々なんとかなる。 運用ルールで解決できればそれも OK
  36. 36. ご静聴 ありがとうございました!

×