BuddyPressとTwitConnectでのWebサービス構築

· by · in

先日下記のサイトを個人的趣味でリリースしました。

http://pso.gamecluster.net/

BuddyPress（以後BP）のtwitterライクなアクティビティ機能を主軸とした、ニッチなジャンルのコミュニケーションプラットフォームです。

WP側の設定でアカウント自由登録を許可するだけでも開けたサイトになると言えますが、新規にアカウントを作るという負担を無くし、ユーザの間口を徹底的に広げたかったので、twitterサインオンを実現できるTwitConnect（以後TC）を導入しました。

ちなみに製作期間は実作業時間にして3時間x5日の15時間くらい。工数にして2人日強。
出来合いのテーマファイルをベースにカスタマイズし、使い勝手や表現を重視してたのでデザインは最後にちょろっと乗っけたレベル。

自分一人で判断・作業を行なっているので、案件でやったらコミュニティサイトだし色々デリケートに考えないといけない点も多いだろうから、もっとエラい時間かかるだろうなー。

利用プラグイン

  • Akismet
  • All in One SEO Pack
  • BP Group Management
  • BP Show activity liked names
  • BuddyPress
  • BuddyPress Album
  • BuddyPress Mobile
  • BuddyPress No Mentions
  • DB Cache Reloaded Fix
  • Executable PHP widget
  • Head Cleaner
  • MO Cache
  • RS Buddypress Activity Refresh
  • SeoPress
  • Twit Connect
  • WordPress Twitter Bootstrap CSS
  • WP-DBManager
  • WP File Cache
  • WP Minify
  • WP Multibyte Patch

BP系以外は割とメジャーなものを使っていると思うので説明は省きます。

BuddyPressの設定

導入は普通のプラグインと同じレベルで簡単です。
プラグインインストールして有効化、あとは初期設定を行いBP用テーマを適用させればハイ完了。

細かいところで自分は下記の調整を行いました。

  • 各固定ページの日本語名化
  • フロントページをタイムライン（アクティビティ）に
  • Account Settingを不許可（不可視）にし、ユーザにtwitter以外での設定を意識させない
  • フォーラムは遷移が意味不明でめちゃくちゃ使いにくいので外した

TwitConnectの設定

twitter連動お決まりの、Twitter Developersでのアプリ作成から始まります。

  • 名前、説明は適当に
  • Website、CallbackはサイトURLに
  • 「Read and Write」に

アプリを作ったらTwitConnect側の設定

  • コンシューマキー、コンシューマシークレットを設定
  • キー入力欄のすぐ上にある「Self-Hosted Application」にもチェック
  • General Setting の「Twitter Login Suffix」 を空に
    ※これはtwitterサインオン時にユーザ名に勝手に付く識別子です。ここが「_twit」で、サインオンするtwitterアカウント名が「KaBuKi」だった場合、WP側で生成されBuddyPress内で扱われるIDが「KaBuKi_twit」となる。　twitterと同じID名で利用させたい場合は空にする。
  • ほか好みで調整

テーマカスタマイズ

一番時間がかかったところですが、ここからは一般的なWPテーマカスタマイズの話になってくるので細かいこと書きませんが、以下のようなことをしました。

  • 全体的にスタイル調整
  • Bootstrapが好きなのでボタンをある程度Bootstrap対応
  • サイドバーのログインフォームを出さず、twitterサインオンのみ表示させるようにした
  • BP Mobileによるスマホ表示でも同上カスタマイズ
  • ログイン後すぐにプロフィール編集に意識を向けられるようリンクを設置
  • BP Albumを投稿しやすくするためTL投稿フォームにアルバム投稿のリンク設置
  • BP Albumの日本語訳を調整

サイトUIのコンセプトとして、本当に使われる機能に絞り、それ以外の迷いを生む機能・リンクを極力省いて最適化する。かつ、ユーザ間のコミュニケーションが発生しやすい要素を取り入れる、という方針でやってます。

注意として、BP用テーマはBPプラグインフォルダ内にありますが、これをベースにカスタマイズする場合でも、必ずコピーしてWP標準のテーマフォルダへ移動させましょう。BPをアップグレードする場合に丸ごと消されてしまうためです。

なお画像投稿などには「BP Activity Plus」という、facebookの機能にだいぶ近いものがあるのですが、UIがひどすぎてカスタマイズもしづらく、画像投稿さえできれば良く、設定も充実しているBP Albumのみ使ってます。

日本語化

Webを探すとBPの日本語化ファイルが転がってますが、バージョンが古く中途半端なため、ユーザビリティを考慮し独自に翻訳されることを勧めます。

直訳では表現も分かりにくいので、サイト内容に合わせた表現にすると良いと思います。
なにしろバージョンアップで翻訳ファイルの原本がコロコロ変わるようですし、翻訳できる体制を作っておいた方がいいです。

あとテーマファイル同様、翻訳ファイルもバックアップしておかないとバージョンアップ時に消されます。

ちなみにボクの翻訳ファイルはあげません（ ＾ω＾）　※サイト特化してるし

負荷対策

BPベースのサイトはWPの使い方として最大級に負荷のかかる形態と考えられるので、負荷対策の先手を取っておく必要があります。

定番のコチラやFirefoxのYSlowでで測定しつつ対応。

まずコチラを参考にhtaccessレベルで各種ファイルのgzip圧縮やキャッシュ設定のほかWPの転送制御を設定。
http://dogmap.jp/2010/04/20/wordpress-htaccess/
※WPによるページ自体をgzip圧縮したらTCが動かなくなるので注意

ほか前述のプラグインのうち負荷対策系は下記

  • DB Cache Reloaded Fix
  • Head Cleaner
  • MO Cache
  • WP File Cache
  • WP Minify

「HeadCleaner」でJSの圧縮、フッタ移動などをやるとBP・TCが正常に動作しなくなる場合があるので、明らかにに不要なタグを削除する程度で。

対策前は総ロード549KBあったのが350KBまで圧縮成功。
HTTPリクエストは減らせる施策じゃないけど、もともと必要最低限にしてるつもり。
以後も様子を見つつ調整は継続していく。

動的表示のキャッシュは行わない

リアルタイム性がウリのBPと、静的ページのようにキャッシュを取る類のプラグイン（WP Super Cache等）は、Webサービスのコンセプトとして根本的に相性が良くありません。タイムラインが更新されても古いキャッシュを見せちゃうんじゃ意味が無い。そのため組み込まないことを勧めます。

入れているキャッシュ系プラグインは、ページ(HTML)以外の静的ファイルをキャッシュするものです。

twitterから取得するサムネイルが重い

TCはサインオン時にサムネイルを自動で引っ張ってきてくれるナイスガイですが、そのサムネイルが重い。
48×48のjpgで圧縮率も微妙なのに1個50KB前後もある。
twitter側で設定されている小さいサムネイルをダイレクトに読み込むため、twitter側に依存しているのでどうしようもない。現状コイツが不可避なボトルネック。

今後の課題

BPのつぶやきをtwitter側と連動したい

TCには「ブログ記事にコメントしたらtwitterと連動する」という機能はあるが、BPのつぶやき投稿とは異なる。TC自体がBPのことを考慮したプラグインでもないので、今後に期待するほか無さそう。

投稿経過日時を直したい

つぶやき投稿後の「2 days ago」といった表記を「2日前」などにしたい。

集客

こればかりは地道にやるしかない…

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: , ,