かしいさんのProgateでは教えてくれないコト

お笑いライブ検索サイト「ワラリー！」を運営しているフリーWEBエンジニアです。超ド初心者がミスりがちなあれこれを書いていきます。

ブログSNS『Tumblr』を無理やりユーザー投稿型メディアとして運営してた話

個人開発 サービス開発 Tumblr

この記事は、「個人開発サービスに用いられている技術 Advent Calendar 2018」11日目の記事です。
10日目の昨日はiotasさんの「創作支援ツール「WorldType」に使われている技術」でした！

はじめに

駆け出しエンジニアのかしい(@rubys8arks)です。 2017年10月〜2018年11月まで、お笑いライブの検索サービス「wArally!」（現ワラリー!）をTumblrのサブブログ*1サービスを使って運用していました。
Tumblrのいいところ、悪いところを紹介しつつ、WEBサービスとして使う場合の無理やり改変ポイントを解説します。 f:id:bitokosubcul:20181205042200p:plain

運営していたサイト

wArally! - お笑いライブ検索
データは更新されていませんが、無料ブログなので今でも閲覧はできます。
運営していたときはこのページに独自ドメインを設定していました。
f:id:bitokosubcul:20181205042200p:plain 「Esten」というTumblrのテーマをカスタマイズしているのですが、オリジナルはこちらから閲覧できます。
Esten theme blog
f:id:bitokosubcul:20181205042231p:plain 記事ヘッダーのLIKE数とコメント数、記事フッターの「VIEW｜LIKE｜REBLOG｜SHARE」の部分などを削除しています。

Tumblrのよいところ

広告なし、デザインがすっきりキレイ

Tumblrの特徴は、なんといってもおしゃれなテーマが無料で豊富にあることです。
特に写真をメインにしたタイル型のサイトデザインが映えます。（Esten、Elise、Indyなど）
サーバー依存の広告もないので、スタイリッシュなサイトを誰でもさっと作ることができます。

無料・かんたんに独自ドメイン＋SSLの設定が可能

Tumblrの設定画面から独自ドメインとSSLの設定ができます。
Cloudflareなどの外部サービスを使う必要はありません。（DNSレコードでCNAMEの設定は必要）
f:id:bitokosubcul:20181205042331p:plain

シングルページでフロントエンドのみ自由にカスタマイズできる

既存のテーマからHTMLやCSSをカスタマイズできるほか、JavascriptやjQueryも使用可能です。（その他のライブラリは試してないのでわかりません）
Tumblrの記事一覧ページ、記事詳細ページ、検索フォームなどの基本機能がそのまま使えます。
「ページを追加」ボタンから静的ページを99個まで追加することも可能です。
Tumblr独自のタグを使って環境変数を設定したり、記事ごとの変数を取得することもできます。
（参考：Tumblrで使えるタグ）
f:id:bitokosubcul:20181205042408p:plain

Tumblrの無理やり改変ポイント

「ゲスト投稿」機能を使ってユーザーからの投稿を受け付ける

Tumblrには「ゲスト投稿」という機能があり、ユーザーからブログへの投稿を受け付けることができます。
この機能を使って、「ユーザーからのライブ情報の登録を受け付ける」というかたちをとっていました。
f:id:bitokosubcul:20181205042930p:plain

  • 名前やメールアドレスの入力が必須
  • Tumblrにログインしていない場合、reCAPTCHAによる非ロボット認証が必須
  • ゲスト投稿後、管理者による投稿の承認が必須
  • ゲスト投稿の通知はないので、都度Tumblrにログインして投稿がないか確かめる必要がある（だいたい来てなくて落ち込む）

と制約は多くあったのですが、たまにライブ主催者の方やファンが登録してくれて、1ヶ月に50件程度はユーザーが記事を投稿してくれていました。
（首都圏で開催されるお笑いライブの全数は1ヶ月に約1000件くらいあり、手動で登録できていたのは300〜400件程度）
しかし、旅行で1ヶ月サービス運営をお休みした後から、如実にユーザーからの投稿数が減ってしまって悲しくなりました…。
休むことはお知らせはしていたのですが、ユーザーからするとせっかく投稿したのに放置される、投稿習慣がなくなるわけですから厳しかったです。
終盤はユーザーからの投稿が1ヶ月数件レベルにまで落ち込んでいたので、スクレイピングで自動登録できる現サービスに移行できてよかったです…。

「フォローする」ボタンを消す

TumblrをSNSではなく静的サイトとして運用する場合、Tumblr固有の「フォローする」ボタン（右上）は邪魔になります。
f:id:bitokosubcul:20181205042512p:plain
PCでは表示を消せないようなのですが、モバイルではCSSで表示を消せるのでひょいっと消しちゃいましょう。

    iframe#tumblr_controls {  
      display:none;  
    }

「スキ!」「リブログ」ボタンを消す

「フォロー」ボタンと同様、Tumblrユーザー向けの「スキ!」（Twitterでのいいね)と「リブログ」(TwitterでのRT)ボタンも不要です。
サイトのターゲットにもよりますが、日本ではTumblr利用者が少ないため、SNSとしてTumblrを利用するメリットはあまりありません。
テーマの中から「LIKE」「REBLOG」に関連する部分のhtmlを削除します。

LIKE数、コメント数を表示する部分を削除

<div class="post-counts">
    {block:IfShowPostNotesCount}
    <span class="notes-number">{NoteCount}</span>
    <span class="icon-heart icon"></span>
    {/block:IfShowPostNotesCount}
    {block:IfDisqusShortname}{block:IfShowPostCommentsCount}
    <span class="dsq-comment-count"><a href="{Permalink}#disqus_thread">0</a></span>
    <span class="icon-comment icon"></span>
    {/block:IfShowPostCommentsCount}{/block:IfDisqusShortname}
</div>

LIKEボタンとREBLOGボタンを削除

<div class="like-button">
    {LikeButton}
    <div class="like-btn">{text:Like label}</div>
    <div class="unlike-btn">{text:Unlike label}</div>
</div>
<div>
  <a href="{ReblogURL}">{text:Reblog label}</a>
</div>

Tumblrでサービス運営する際の注意点

コードのバックアップは必須

Tumblrには、Gitやはてなブログのようにファイルをブラウザ上でバージョン管理してくれるなんて便利な機能は存在しません。
変更を加えた都度、自分でテキストエディタに保存してバックアップする必要があります。
プレビュー機能もあるのですが、いかんせん挙動が安定せず、結局「保存」ボタンを押して一度管理画面を閉じないと変更が反映されません。
そしてなぜか「保存できとらんやん！！」という事態も発生します。
ブラウザ上で保存したはずのコードは戻ってこないので、管理画面を閉じる前に必ずローカルのテキストエディタにバックアップを取ることを推奨いたします…。
Tumblrのサブブログは無料で10個まで作成できるため、本番用のブログとは別に、同じテーマのブログを作っておくとオリジナルテーマと自分がカスタマイズしたテーマの差分を確認することができます。

SEOが弱い

もともとTumblrはサービス内で交流を完結させるという思想のため、GoogleのSEOは強くありません。
設定で「検索から除外する」のチェックボックスを入れなければ一応クローリングの対象にはなるのですが、あまり検索結果の上位に表示されることはないようです。
TwitterなどSNSで集客する場合はよいですが、GoogleのSEOで集客したい場合はかなりのウィークポイントとなります…。
f:id:bitokosubcul:20181205042628p:plain

まとめ：TumblrでWEBサービス運営は無理がある、素直にポートフォリオサイトとして使おう

上述のほかにもTumblrには固有の制約がかなり多くあり、サービスの実運用で使うのは全くおすすめできません！！
ログインなしで記事投稿しようとするとreCAPTCHAの画像認証が入るため、プログラムで記事を一括自動登録、ということができず個人的につらかったです…。
結局6000記事以上を手動でぽちぽち登録するはめになり、途方もなさすぎて1年間運営している途中で何度もくじけそうになりました…。（実際放置気味の月もあった。しかしデータがたくさん入ってても入ってなくてもアクセス数はそんなに変わらず、それも徒労感を増してた（逆に言えば毎日とりあえず見る、というリピーターがついてくれてたのですが））
Tumblrは素直にポートフォリオとして使いましょう！！
それか、さっと作れるので、細かいCSSを気にせずになんとなくの個人開発プロダクトのイメージ（モックアップ）を作ってみるのにはいいと思います。
結局ほしいものは自分の手でつくるしかないんや！！がんばれ個人開発者！！！！！！！！！！！！！！！

*1:Tumblrにはメインブログとサブブログの2種類のブログがある。メインブログは自分のタイムライン用という感じなので、静的サイトを作りたいのであればサブブログ推奨。Tumblrのメインブログとサブブログの違いについては公式ヘルプページを参照 メインブログとサブブログ