ClickanはWebメディア myd(マイド) を運営していて、主に京都在住のライターさんやイラストレーターさんに記事を書いてもらっている。
mydを始めたころはメンバーが少なかったから、記事やそのレビューのやりとり、記事代金の請求なんかはSlackとGoogle Drive、その他諸々のツールを使ってなんとかなっていた。
だけれど人が増えてくるにつれてバラバラのツールチェインでやりくりしていくことがど〜〜〜にも大変になってきた(´༎ຶོρ༎ຶོ`)
そんなわけで、Webメディアとライターさん向けのコラボレーションサービスを作りました！Matesと名付けました。
Matesってどんなサービス？
記事の執筆、レビュー、記事の進捗確認、文字数のカウント、請求を1サービスでやれます。
これまで、記事を書く→Google DriveにファイルアップしてSlackで連絡してもらっていたのだけれど、人によってファイル形式が違ったり、人が増えてSlackの連絡が混線状態になっちゃったりしていた。あと記事ごとに今どんな状態か（執筆中か、レビュー中か、公開済みなのか）も把握しづらかった。
そんなような諸々は運用でカバーできるんだけれど、せっかくなので1プラットフォームで全部解決できるサービスを作ってみた次第。チーム管理みたいなことも出来ます。
自分で自分の課題を解決するサービスを作るのはサイコーにテンションあがる。
現在はmydでPrivate βとして運用している。
Matesの構成
フロントエンドはVue.js by ES6、APIはRails5をAPIモードで使っていて、両方ともHerokuで運用している。
今はPrivate βだからあまり肩の凝らないつくりだけれど、今後他社さんにも使ってもらったり、スマホアプリから使えるようにしたりする中でスケールアップ+Serverless化をする予定。
開発Tips
一番お手軽にVueする方法
今回は1週間でサクっと作ってサクッとPrivate βに持って行きたかった。だけれどみなさん知っての通り最近のWeb開発ときたら真面目にやると環境構築だけで消耗してしまう。
そこで意識の低いご提案。VueのUIテンプレートを見つけてきて、それを元に開発すればいいのだ。
というのも、そうしたUIテンプレートはDemo用にビルドが出来るようになっているから、環境構築をすっ飛ばせて楽なのだ。
Vue UI あたりで調べると色々出てくるから、権利関係が大丈夫なもの(大抵、GitHubリポジトリのRead meに書いてる)を持ってきてそれベースで開発を進めよう。
Vueの実装に慣れていない場合ならなおさらこの方法がオススメ。先人の実装を参考に出来るからだ。
VueをHerokuにデプロイする方法
まだあんまり知見がない？ようでちょっと困った。だけど、WebpackでVueをビルドするためのボイラープレートをGithubで公開しているSagar Jauhariさんの以下の記事がそのものズバリな内容だった。
Quick-n-clean way to deploy Vue + Webpack apps on Heroku
この記事をまとめるとデプロイ手順は以下のとおり
- Vueをビルド (npm run build → 成果物はdistディレクトリへ)
- ビルド成果物をheroku上で動かすための処理を用意する (dist/server.js)
- server.jsを動かすためにexpressをインストールする処理を用意する (dist/package.json)
- ビルド成果物をherokuにdeploy (git subtree push –prefix dist heroku master)
各々のプロジェクトでdistが違ったり色々差異はあるけれど、大まかには上記のとおり。4番までうまくいけば、後はherokuが自動でexpressをインストールし、server.jsを走らせてくれる。
Matesの今後
そんなこんなでPrivate βが動き出したMatesは使い勝手の向上や機能追加なんかのタスクが大量に控えている。記事の執筆から請求まで一貫して出来るようになったらLPこさえてPublic βにしようと思っている。現状は記事執筆とチーム管理、記事レビューまでが出来る。Private βに参加してくださる方はどしどしご連絡ください→ Contact
ところでこれぐらいの規模の開発でもShellコマンドを色々駆使するもの。何回も使うものはMicrosoftのOneNoteにメモしているけれど、プロジェクトごとに管理できたらなあと思うから、ElectronでマルチプラットフォームなShellコマンド管理アプリ作ろうかな。Todoistライクなやつ。
