【Works】【WordPress】【Webサービス】「タイケツ」というWebサービスをWordPressを使ってつくりました | Wood-Roots:blog

タイケツというWebサービスを作成しました。

対立し、いがみ合う2つのことがらについて、それぞれの立場から意見を投稿できるサービスです。
会員登録やソーシャルアカウントの関連付けなどは一切必要なく、匿名で意見を投稿することが可能です。主張したい、意見を言いたいことがあるけど表立っては言いづらいと悶々としている方がおられましたら、ぜひともご利用ください。

使い方

お題に意見を投稿する

既に用意されているお題の中で、「お、これは一言物申したい！」と思うものがあればご意見投稿フォームより投稿してみてください。

新しくお題を投稿する

用意されているお題にはないけど白黒つけたい2つのことがらがある場合は、お題そのものを投稿することができます。

言い過ぎたので取り消したい場合

ブラウザを閉じるまでなら、ご意見、お題どちらも削除することができます。
一旦ブラウザを閉じてしまった場合は投稿情報が削除されますので、問い合わせフォームで削除をご依頼ください。

作った動機など

Web業界に限らないとは思いますが、世の中職種や立場によって激しい対立がある場合があります。

この業界では、コーダーはデザイナーに対し

「コーディングのことを考えてデザインしてくれないと」
「レイヤーの整理をちゃんとしろって」

みたいなことを言い、デザイナーはエンジニアに対し

「センスなさすぎだろｊｋ」
「なんでボタンの色を0ffなんかにしちゃうの┐(´д｀)┌ﾔﾚﾔﾚ」

などと影でぼやき、Sublime Text使いは

「Dwｗｗｗｗｗｗ」
「夢でも紡いでろｗｗ」

と罵ったりしているかもしれません。

このようなお互いよく思っていない関係でも、本音をぶつけ合ったら意外と分かり合えるかもしれない…そんなことを考えて匿名で意見をぶつけ合えるサービスを目指してタイケツを作りました。

昔の漫画でありがちな、殴りあったあと芝生に寝転がって

みたいに分かり合うような世界が訪れるといいですね。

バックエンドの環境

・シックスコアの共有ホスティング
・WordPress

WordPressはフロントにフォームを用意してダッシュボードにログインしないで投稿する方法（つまりwp_insert_postの使い方）を覚えると、利用範囲が一気に広がります。
タイケツのようなユーザー投稿型サービスはもちろんですが、スクレイピングしてデータを集めたりCronで何かのログを取ったりと、アイデア次第でブログやCMSの枠を超えた使い方も実現可能です。

また、WordPressは大抵のホスティングで動くのでサーバーを最小構成で済ますことができるのもメリットです。
AWSなどのクラウドは運用が難しいし円安の影響でじわじわ値上がりしてますしね…。

開発ツールなど

・Foundation（CSSフレームワーク）
・Grunt（Sassのビルドとデプロイ）
・Ampps（ローカルサーバ）

CSSフレームワークが流行っているのでFoundationというものを試しに使ってみました。
大定番のBootstrapでない理由はありきたりすぎて面白くないかな、という程度なので、次回機会があればBootstrapも試してみたいと思います。

レスポンシブデザインがあっという間に実現できたのはありがたいですが、過剰なdivやクラスまみれなのはちょっと抵抗があります。このあたりHTMLへこだわりがある方はどう思っているのか、機会があれば聞いてみたいところです。

FoundationとGruntの利用については過去記事も参考にしてみてください。

Sass版FoundationをWindowsで使えるようにする
grunt-ftpushを使って変更されたファイルをFTPで自動でアップロードする

ローカルサーバと言うとXAMPPやVargrantのユーザーが多いと思いますが、Amppsはインストールして起動するだけでApache、MySQL、PHPの環境が出来上がっているのでものすごくお手軽です。WordPressなど有名どころのCMSがワンクリックでインストールできるのも魅力です。
WordPressの検証・開発用のローカル環境としては必要十分ではないかと思います。

制作の流れなど

0.アイデアを思いつく

Webサービスを作りたいけどアイデアが出てこない、という人は、どんなことでも「これはWebサービスに昇華できないか？」と考えるようにするといいでしょう。そういった視点ではてブのホッテントリやニュース記事、コラムなどを読んでいると、結構いろいろと思いつきます。

思いついたものの中から、法律や権利侵害にならないか、モラル的にどうか、自分の技術で実現できるか、などを考えてみて、仕事の合間の気晴らし程度の感覚で開発に入ります。

1.ローカルで作ってみる

Amppsを起動してローカルにWordPressをインストールし、ゆるゆると作っていきます。
ハッカソンのような短期集中型の開発が好きな人も多いと思いますが、私はきつい納期の仕事は大抵取っ散らかしてしまうので、特に期限も定めずのらりくらりとやっていくほうが好きです。
仕事ではない個人開発のいいところであり、いつまでも完成しない駄目なところでもあります。

2.ドメインを取って公開サーバーで続きを作る

ひと通り動くようになったら、ドメインの取得とサーバの契約をして本番環境で続きを作ります。
ゆるゆるとやっていきたいと言いつつも本当に制約がないと永遠に完成しませんので、ドメインやサーバー代が発生することで自分への追い込みとします。

3.デバッグ・脆弱性の検証

XSSやCSRFなど脆弱性が見つかり、炎上してクローズを余儀なくされたサービスはたくさんあります。
脆弱性の検証やデバッグは作業量としては全工程の1割以下ですが、重要度はコア機能の開発よりも高いと言ってもいいでしょう。

ただ、テキストを入力したり消したりphpMyAdminを見たりととにかく地味で地道な作業なので相当にめんどくさいです。
炎上してサービスのクローズどころかインターネットからの退場に追い込まれるケースもあるので、身を守るためと思ってがんばりましょう。

問題が見つかったら優しく教えて下さい…。

4.完成！

完成後は開発作業とは打って変わってプロモーションの仕事が待っています。
自信があればニュースサイトにプレスリリースを送ってみることをおすすめします。個人が作ったサービスでも結構掲載されますよ。

まとめ

考えてみると、WordPressでちゃんとリリースまで持ってこれたのは2013年の夏につくったラノベジャケットギャラリー以来でした。

個人レベルで投稿型サービスを流行らせるのはなかなか難しいのですが、なんとか盛り上がるように頑張りたいと思います。