WordPressで「ダメ系ライブカレンダー」を制作&リリースしてました

ブログをなかなか書けてなかったんですが、今月の初めに「ダメ系ライブカレンダー(http://dame-live.info/)」というwebサービスをWordPressで制作し、リリースしてました。
「ダメ系」というのは、アニメやゲーム、ボカロ、同人などのいわゆる「ヲタク系」のこと。
「ダメ系ライブカレンダー」はそんな楽曲のコピーやアレンジを演奏するライブイベントや演奏会の情報をまとめたサイトです。


だらだらと長くなるので、お好きな項目をご覧ください。

目次

  1. ダメ系ライブカレンダー 概要
  2. 作ろうと思ったきっかけ
  3. 使用しているプラグイン&参考ページ
  4. イベント系サイトにあったら便利「Googleカレンダーに追加ボタン」
  5. 現在つまずいているコトと今後の実装予定

ダメ系ライブカレンダー 概要

アニメやゲーム、ボカロ、同人などのいわゆる「ヲタク系」な楽曲のコピーやアレンジを演奏するライブイベント・演奏会の情報をまとめるためのサイトです。
Twitter IDがあればだれでもライブ情報を登録、編集することができます。
詳細ページは固有のURLが生成されるので、Twitterなどで情報を共有するのに便利です。
イベントサイトを作れない、まだ作成していないけど告知はしたい、といった時に利用していただけたらと思っています。
認知度はまだ低く、情報数も少ないですが、ちょっとずつでも知ってもらい、色んな人に利用していただけたら嬉しいです

http://dame-live.info/

作ろうと思ったきっかけ

最初に作りたいな、と思ったのは2010年くらいの頃。
ダメ系ライブにハマって、結構な頻度で観に行っていました。
mixiでやってるセッションオフに時々参加してたのもあって、ライブに出る人は友人であることが多かったです。
仕事が仕事なので、友人達にライブイベントのサイト作成やフライヤー作成を頼まれることも。
友人達は練習や楽器のメンテナンスで基本金欠なので、制作料は「趣味全開で作る」「修正は基本的になし」「文章は考えてもらう」といった条件付きで桁を1つ2つ減らした額を頂いてました。
なかにはお金もないしサイトを作るスキルもないからイベントサイトはありません、というライブイベントもありました。

そんな状況をみていて、基本的な文章を入力するだけでライブイベントの宣伝が出来るwebサイトがあったら、便利なのかな?とふと思いついてしまったのです。

そこで友人達に相談してサイト内容を考えたりしていたんですが、当時の私のスキルでは到底作れそうもない!と思い、mixiでスキルのある方々を募集。
集まった人達とmixiコミュを利用して内容の精査やどういった機能がいるか議論したり、実際に制作を進めました。
それを始めたのが2011年の2月頃。
よしやるぞー!と勢いづいてたまさにその時に大震災が発生。
世間は色々と自粛モードで、ライブイベントが中止になったり、メンバーも精神的にやられて勢いは急降下。
なんとか作業を少しずつ進めるものの、進捗は思わしくなく1年経過。
メンバーの、特に私のプライベートがそれどころではなくなってきた2012年、サーバやドメインを用意するとこまできてはいましたが、同じようなサービスを別の方が制作&リリース。
情報がバラバラになってしまうし、言い出しっぺの私が作業を続けられるか不明なので、制作を放棄しました。

それから数ヶ月。
無事に出産し、育児の傍らWordPressの勉強をしていて、プラグインを駆使すれば作れそうだなぁと思い始め、ダメ系ライブ情報を集めるのではなく、別のイベント情報まとめサイトを作りたいな、というのもあって、ひとまず作ってみることに。
ローカルで作っていると、別の方が運営していたサイトの更新状況が思わしくない感じに。
このまま更新がされないのならば、いっそダメ系ライブカレンダーを作ってしまうか、と一人WordPressで制作し、リリースに至りました。
(その後、別の方が運営していたサイトはリニューアル中だったそうで。以前情報がバラバラになるから辞めようと思ったのと同様の理由で閉鎖されてしまいました。先に相談すべきだったなぁと反省しています…)

使用しているプラグイン&参考ページ

そんなこんなで制作した「ダメ系ライブカレンダー」
現在までで使用しているプラグインと、制作にあたって参考にした記事をまとめてみました。

Gianism

TwitterやfbなどでWPにログインすることが出来るようになるプラグイン。
WPでどうやったら色んな人に書き込んでもらうことができるようになるか?を考えて、色々と模索していた時に出会ったのがこのプラグイン。
このプラグインを見つけて、制作意欲が一気にあがりましたね。
WordPress › Gianism « WordPress Plugins
WordPress使ってても巨人の肩に乗れ | 高橋文樹.com

WP Admin UI Customize

WPにだれでもログインできるようになると、次に困るのは管理画面での表示。
適用する権限を設定でき、管理画面用CSSの設定、管理バーのコンテンツ編集・追加・削除、ログイン画面の設定などなど。
管理者以外の人が管理画面を使用する場合は絶対に入れておきたいプラグイン。
WordPress › WP Admin UI Customize « WordPress Plugins
wordpress プラグイン WP Admin UI Customize | gqevu6bsizのwordpress plugins

Advanced Custom Fields

カスタムフィールドを作成する場合、色んなプラグインを試しましたがこれが一番色々できて便利でした。
WordPress › Advanced Custom Fields « WordPress Plugins
Advanced Custom Fields | WordPress 編

WP to Twitter

新規投稿や編集などをしたらツイートさせるプラグイン。
細かい設定が色々出来て便利です。カスタムフィールドの値も取得してツイート出来るとあるんですが、何故か出来ません…。なんでだろ。
WordPress › WP to Twitter « WordPress Plugins

Custom Post Type Permalinks

メインとなるライブ情報はカスタム投稿タイプで作成しているので、生成されるページの設定用に導入。
パーマリンク設定ページに追加され、カスタムタクソノミーの設定等も指定出来ます。べんり。
WordPress › Custom Post Type Permalinks « WordPress Plugins
カスタム投稿タイプのパーマリンクをカスタム設定できるWordPressプラグイン・Custom Post Type Permalinks – かちびと.net

Search Everything

メインとなるライブ情報をカスタム投稿タイプで設定し、コンテンツの内容は殆どカスタムフィールド。
そうするとデフォルトのままじゃWPの検索機能で検索してもらえない!
ということで、カスタムフィールドの値を検索できるように追加したプラグイン。
WordPress › Search Everything « WordPress Plugins

その他制作にあたって参考にした記事

WordPressのカスタム投稿タイプでイベント情報ページを作ってみる | webOpixel
WordPressのサイト内検索の検索条件をカスタマイズする | webOpixel
WordPress でカスタムフィールドの日付から年別アーカイブリストを作成する  |  wpxtreme
meta_query-カスタムフィールドによる複雑なポストの抽出 | WordPress 編

イベント系サイトにあったら超便利「Googleカレンダーに追加ボタン」

詳細ページのソーシャルボタン、最初はTwitter、fb、はてぶ、mixiチェックだけだったんですが、サイトを見てくれたフォロワーさんに「googleカレンダーに予定を追加するボタンがあったらすごく便利だと思う!」と言われ、そうかもしれない!と早速追加。
設置の仕方が最初分からず、調べた結果こんな感じで設定することが出来ました。

<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=タイトル
&dates=日付(yyyymmdd)/指定した日付の次の日(yyyymmdd)
&details=イベントの詳細&location=場所&trp=true&sprop=サイトURL&sprop=name:サイト名" target="_blank">
<img src="//www.google.com/calendar/images/ext/gc_button1.gif" border="0" alt="googleカレンダーに追加">
</a>

例えば、こんな感じで指定すると

<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=タイトル
&dates=20130222/20130223
&details=イベントの詳細が入ります&location=場所が入ります&trp=true
&sprop=http://memo.ark-under.net/&sprop=name:くろひつじのメモ帳" target="_blank">
<img src="//www.google.com/calendar/images/ext/gc_button1.gif" border="0" alt="googleカレンダーに追加">
</a>

↓のようなボタンが生成され、
googleカレンダーに追加

実際にクリックするとこのように登録画面が表示されます。
(※Googleにログインしていない場合はログイン画面が表示され、ログインすると以下のようになります)

このボタンを作成する際に注意したいのが日付です。
例えば、2013年2月22日にイベント登録をしたい場合、

&dates=20130222/20130223

としておかなければいけません。
この設定で「終日」にチェックの入った予定が追加されるようになります。

細かく時間を指定したい場合やボタンの種類を変更したい場合は、以下のジェネレーターを使用してHTMLタグを生成してください。
予定公開ガイド – Google カレンダー ヘルプ

今後の実装予定と現在つまずいているコト

今後の予定としては、

  • カレンダー表示機能を追加
  • 日付で検索できるようにする
  • 地域別で検索できるようにする
  • 登録方法の解説ページを作成する
  • リンクページを作成する
  • 登録されているイベントの前日、当日に告知ツイートをする

これらを実装したいなーと思っています。
カレンダー表示機能はローカルではほぼ出来上がってて、あとはデザインだけ、という状態なので、数日中に実装されると思います。

現在つまずいてるコトとしては、プラグイン紹介の部分でも書きましたが、WP to Twitterでカスタムフィールドの値を取得してツイート出来るとあるんですが、何故か出来ません。
うーん何故でしょう?
他によいプラグインがあれば、それを利用したいですね。

そんなこんなで

今までは「個人で楽しむ」のがメインのwebサービスを作ってきましたが、今回は「色んな人が便利に使う」webサービス。
今までと使い方も違うので、なかなか難しかったです。
もう少し使う人の立場で考えたり、意見を聞いたりしてどんどん改良できたらなぁと思います。

個人的には色々と挑戦したサービスなので、頑張って育てたいと思います。
ダメ系ライブカレンダー、よろしくお願いします@`・ェ・´@

ダメ系ライブカレンダー:http://dame-live.info/

UPDATE : 2017/11/12 / Tags

関連記事

新着記事

コメントを残す