この記事は、「個人開発サービスに用いられている技術 Advent Calendar 2018」11日目の記事です。
10日目の昨日はiotasさんの「創作支援ツール「WorldType」に使われている技術」でした！
はじめに
駆け出しエンジニアのかしい(@rubys8arks)です。
2017年10月〜2018年11月まで、お笑いライブの検索サービス「wArally!」（現ワラリー!）をTumblrのサブブログ*1サービスを使って運用していました。 wArally! - お笑いライブ検索 Tumblrの特徴は、なんといってもおしゃれなテーマが無料で豊富にあることです。 Tumblrの設定画面から独自ドメインとSSLの設定ができます。 既存のテーマからHTMLやCSSをカスタマイズできるほか、JavascriptやjQueryも使用可能です。（その他のライブラリは試してないのでわかりません） Tumblrには「ゲスト投稿」という機能があり、ユーザーからブログへの投稿を受け付けることができます。 と制約は多くあったのですが、たまにライブ主催者の方やファンが登録してくれて、1ヶ月に50件程度はユーザーが記事を投稿してくれていました。 TumblrをSNSではなく静的サイトとして運用する場合、Tumblr固有の「フォローする」ボタン（右上）は邪魔になります。 「フォロー」ボタンと同様、Tumblrユーザー向けの「スキ!」（Twitterでのいいね)と「リブログ」(TwitterでのRT)ボタンも不要です。 Tumblrには、Gitやはてなブログのようにファイルをブラウザ上でバージョン管理してくれるなんて便利な機能は存在しません。 もともとTumblrはサービス内で交流を完結させるという思想のため、GoogleのSEOは強くありません。 上述のほかにもTumblrには固有の制約がかなり多くあり、サービスの実運用で使うのは全くおすすめできません！！ *1:Tumblrにはメインブログとサブブログの2種類のブログがある。メインブログは自分のタイムライン用という感じなので、静的サイトを作りたいのであればサブブログ推奨。Tumblrのメインブログとサブブログの違いについては公式ヘルプページを参照 メインブログとサブブログ
Tumblrのいいところ、悪いところを紹介しつつ、WEBサービスとして使う場合の無理やり改変ポイントを解説します。
運営していたサイト
データは更新されていませんが、無料ブログなので今でも閲覧はできます。
運営していたときはこのページに独自ドメインを設定していました。
「Esten」というTumblrのテーマをカスタマイズしているのですが、オリジナルはこちらから閲覧できます。
Esten theme blog
記事ヘッダーのLIKE数とコメント数、記事フッターの「VIEW｜LIKE｜REBLOG｜SHARE」の部分などを削除しています。Tumblrのよいところ
広告なし、デザインがすっきりキレイ
特に写真をメインにしたタイル型のサイトデザインが映えます。（Esten、Elise、Indyなど）
サーバー依存の広告もないので、スタイリッシュなサイトを誰でもさっと作ることができます。無料・かんたんに独自ドメイン＋SSLの設定が可能
Cloudflareなどの外部サービスを使う必要はありません。（DNSレコードでCNAMEの設定は必要）
シングルページでフロントエンドのみ自由にカスタマイズできる
Tumblrの記事一覧ページ、記事詳細ページ、検索フォームなどの基本機能がそのまま使えます。
「ページを追加」ボタンから静的ページを99個まで追加することも可能です。
Tumblr独自のタグを使って環境変数を設定したり、記事ごとの変数を取得することもできます。
（参考：Tumblrで使えるタグ）
Tumblrの無理やり改変ポイント
「ゲスト投稿」機能を使ってユーザーからの投稿を受け付ける
この機能を使って、「ユーザーからのライブ情報の登録を受け付ける」というかたちをとっていました。
（首都圏で開催されるお笑いライブの全数は1ヶ月に約1000件くらいあり、手動で登録できていたのは300〜400件程度）
しかし、旅行で1ヶ月サービス運営をお休みした後から、如実にユーザーからの投稿数が減ってしまって悲しくなりました…。
休むことはお知らせはしていたのですが、ユーザーからするとせっかく投稿したのに放置される、投稿習慣がなくなるわけですから厳しかったです。
終盤はユーザーからの投稿が1ヶ月数件レベルにまで落ち込んでいたので、スクレイピングで自動登録できる現サービスに移行できてよかったです…。「フォローする」ボタンを消す
PCでは表示を消せないようなのですが、モバイルではCSSで表示を消せるのでひょいっと消しちゃいましょう。 iframe#tumblr_controls {
display:none;
}
「スキ!」「リブログ」ボタンを消す
サイトのターゲットにもよりますが、日本では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のサブブログは無料で10個まで作成できるため、本番用のブログとは別に、同じテーマのブログを作っておくとオリジナルテーマと自分がカスタマイズしたテーマの差分を確認することができます。SEOが弱い
設定で「検索から除外する」のチェックボックスを入れなければ一応クローリングの対象にはなるのですが、あまり検索結果の上位に表示されることはないようです。
TwitterなどSNSで集客する場合はよいですが、GoogleのSEOで集客したい場合はかなりのウィークポイントとなります…。
まとめ：TumblrでWEBサービス運営は無理がある、素直にポートフォリオサイトとして使おう
ログインなしで記事投稿しようとするとreCAPTCHAの画像認証が入るため、プログラムで記事を一括自動登録、ということができず個人的につらかったです…。
結局6000記事以上を手動でぽちぽち登録するはめになり、途方もなさすぎて1年間運営している途中で何度もくじけそうになりました…。（実際放置気味の月もあった。しかしデータがたくさん入ってても入ってなくてもアクセス数はそんなに変わらず、それも徒労感を増してた（逆に言えば毎日とりあえず見る、というリピーターがついてくれてたのですが））
Tumblrは素直にポートフォリオとして使いましょう！！
それか、さっと作れるので、細かいCSSを気にせずになんとなくの個人開発プロダクトのイメージ（モックアップ）を作ってみるのにはいいと思います。
結局ほしいものは自分の手でつくるしかないんや！！がんばれ個人開発者！！！！！！！！！！！！！！！