ものづくり好きのためのSNSを一人で作ってみた．

ものづくり好きのためのSNS　Raiqoo.com　を4ヶ月ほどかけて作ってみました．

プログラミングや電子工作．動画制作やハンドクラフトなどものづくりを趣味にしている人たちが交流できるようなサービスです．
消費者開発者の垣根をぶちこわしたものづくりのプラットフォームを目指します．時代はSocial Developmentですようん．ハードウェア(?)版githubといえば分かりやすいかも．

http://raiqoo.com

画像は開発中のものです．

開発は全て一人で行いました．大変でしたが学ぶ事がたくさんありましたのでそのステップを公開したいと思います．

個人でwebサービスを作りたい．プログラミングはちょっとは経験がある．でもここから先どうすればいいのか分からない．といったような人を想定して文章を書いています．そのためプログラミングの説明というよりも設計プロセスの説明になっています．
では，ご覧ください．これはRaiqooの開発の実際のステップです．

なお，途中，幾つか図やスプレッドシートを書いていますが最低限にしています．
文書はこれはあくまでもメモです．アイディアや考えをメモして安心して忘れるためのものです．

ステップ0　ストーリー作り

まず最初にしたこと．それはどのようなサービスかをまとめることです．いわゆる「企画」といえるかもしれません．
今回はストーリー法というものを使いました．参考にした本はこちら．

ユーザエクスペリエンスのためのストーリーテリング -よりよいデザインを生み出すストーリーの作り方と伝え方 -

ストーリー法を乱暴に説明してしまうと「ターゲットの属性とユースケースを物語にしたもの」と言えそうです．堅苦しいことは抜きにして実物を見てください．今回実際に使ったストーリーの一つがこれです．

ものづくりを通して交流する．

Bさんは工業系の大学に通う20歳の学生．学校では電気電子工学を学んでおり，趣味で電子工作とマイ
コンプログラミングを楽しんでいる．
友人から創作活動SNS Raiqooのことを聞き，しばらく前から作ったものを展示したり，作業工程を動
画や画像で公開していた．
あるとき別のユーザからコメントをもらった．それは分からない部分があるので教えてほしいという依
頼だった．
頼られたことで嬉しく思ったBさんはOKした．相手ユーザとは相互にフォローし合うことにした．
相手ユーザの名前を検索するとユーザ名と画像，自己紹介文，フォローボタンなどが表示されたのでフ
ォローボタンを押す．自己紹介文からはBさんと相手ユーザは同年代であることが読み取れた．Bさんは
親近感を抱いた．
フォローしているユーザ一覧に相手ユーザが追加された．
相手ユーザとはダイレクトメッセージを使ってやり取りすることにした．
ナビゲーションバーにあるメッセージボタンを押すと新しいメッセージの作成メッセージボックスが表
示された．
メッセージボックスにはタイトルと本文を入力することができ，送信ボタンとキャンセルボタンがつい
ている．
相手ユーザの抱える問題が無事解決したあともBさんと相手ユーザのやりとりは続き，今度出版社が主
催しているDIYイベントに共同で出展することになった．
Bさんと相手ユーザは何を出展するか相談を始めた．

人間の脳は物語を理解するようにできているという説があるとか．その真偽はともかくストーリーを作る事で自分が何を作りたいかをはっきりさせる事ができます．自分が何をしたいかが一番わからないものですからね．
実際にはもう幾つかストーリーを作りました．登場人物がBさんになっているのはそのためです．登場人物の属性，年齢や興味対象，そして感情をストーリーには記述します．

ステップ1　機能一覧

次のステップはストーリーを元に機能を取り出す事です．例えばBさんはストーリー中でメッセージのやり取りをしています．ということはこのシステムには何らかのメッセージング機能が備わっているはず．
こんな調子で機能を取り出して行きます．ではその基準は？個人的には「ファイルとしてふさわしいか」を基準にする事を強くお勧めします．例えばユーザはプロフィールをもつことが出来るとしましょう．するとこういいあらわせます．

ユーザはプロフィールを新規作成，アップデート，保存，削除する事ができる．

新規作成とアップデートが同一の機能なの？という人もいるかもしれませんが一つの機能として扱うことをお勧めします．
コンピュータは原則ファイルを　新規作成(Create)，読み込み(Read)，更新(Update)，削除(Delete)　することが出来ます．この頭文字をとってCRUDと呼びます．このCRUDに無理矢理にでも当てはめて機能を取り出すと後々ぐっと楽になります．

これが作った機能一覧の実物です．

創作活動SNSだったりMakerSNSだったりものづくりSNSだったりするのはご愛嬌．もし多人数で作業をする場合は名前を統一したほうがいいでしょうね．

ステップ2　ページ構成

かなり迷ったのですがページ構成を整理することにしました．ページ構成とは？これはどのページからどのページに飛ぶかを記述したものです．しかし全てを網羅することはなかなか難しいと思います．とりあえずはざっくりしたもので大丈夫でしょう．
これがRaiqooのページ構成図です．

ステップ3　デザイン

どんなページが必要かがステップ2ではっきりしたので外観のデザインに取りかかることにしました．
本来ならデザイナさんに依頼してあがってきたデザインをPhotoshopでスライスして…となるようなのですが今回は色付きのワイヤーフレーム程度に考えてデザインを進めました．フォトショのガイド超便利高いだけあるわー．
ちなみにデザインはTwitterBootstrapを利用しました．定番ですね．

ステップ4　データベース設計

次にデータベースの設計を行います．なにやら難しそうな響きですが何のことはありません．機能一覧を見てください．
機能一覧のUserやProfileといったものがデータベースのエンティティに一対一対応します．
そしてデータベースのテーブルとカラムを決めて行きました．テーブルもカラムも後でいくらでも修正できるので最初は気楽に決めましょう．ただし，修正の内容はスプレッドシートかなにかに残しておくべきです．どんなに小規模なプロジェクトであっても記憶だけでデータベース設計を管理する事は不可能です(自戒)．

セキュリティの関係上内容を詳しく見せる事はできませんが最初に作ったデータベース設計書とリレーション設計書がこれ，開発最初期のものです．
データベースを設計するときはこの二つは必ず作りましょう(自戒)．さらっと整理しておくだけでもあとあと凄く楽になります(自戒)．

ステップ5　URI設計
設計の最後にURIを設計しました．これについて説明する前にREST，あるいはRESTfulアーキテクチャについて説明させてください．
前述の通りコンピュータは(というよりアプリケーションは)ファイルをCRUDします．当然webアプリケーションも同様にユーザから受け取った情報をCRUDするのですがここで問題が発生します．それはそもそもwebはwebページのためのものであることです．これも当然のことですね．
それによって発生する様々な問題を解決するためにRESTが考案されました．
RESTを乱暴に説明してしまうとURLをコマンドとして扱うことでスマートにwebアプリケーションでCRUDをするためのプロトコルです．
まあ下記の例を見てください．簡単ですよ．

例）
　http://www.hogeblog.com/entry/new -> hogeblog.comのentryを新規作成（Create）
　http://www.hogeblog.com/entry/10/show -> hogeblog.comの10番目のentryを読み込み（Read）
　http://www.hogeblog.com/entry/10/update -> hogeblog.comの10番目のentryを更新（Update）
　http://www.hogeblog.com/entry/10/delete -> hogeblog.comの10番目のentryを削除（Delete）

entryがファイルの種類に相当します．RESTではリソースと呼びます．そしてURIとはリソースの識別子として利用できるようにURLを拡張したものです．
いうなればURLにアクセスすることがwordの新規ドキュメントボタンをクリックしたり上書き保存ボタンをクリックしたりすることに相当するわけです．
ステップ2で無理矢理にでもCRUDに当てはめてくださいと言った理由がこれです．CRUDニアイコールRESTといえるのでURIの設計は何も考えなくても機械的にできちゃうわけです．
機能一覧にURIを付け足したものがこれ．開発終盤のものです

抜けている部分は実装していません．（Twitterのツイートは更新出来ませんよね？それと似たようなものです．）

これで設計プロセスは終了です．MVCアーキテクチャについて知識のある人はもしかしたらにやりとしているかもしれません．
RailsをはじめとするモダンなwebアプリケーションフレームワークはMVCアーキテクチャを採用しています．ステップ4でModelを，ステップ3でViewを，ステップ2でControllerを設計しています．

ステップ6　プログラミング

おまちかねのプログラミングの時間です．今回はRailsで実装しました．
こころ苦しいのですがこればっかりは説明出来ません．
その代わりと言っては何ですが気をつけたことを幾つか挙げたいと思います．

* 機能を一つ一つ実装していく．インクリメンタル開発．
* コーディング規約を入手しておく．
* 変な自前主義は捨てる．いいライブラリがあったら活用する．
* ジェネレータを活用する．
* バージョン管理システムを活用する．バグだらけで嫌になったらロールバック
* リファクタリングは積極的に．

Railsを学ぶ上で最も参考になった本がこれ．

RailsによるアジャイルWebアプリケーション開発 第4版

一人で開発する場合インクリメンタル開発が最も現実的でしょう．これは機能を一つ一つ実装して行く方法でアジャイル開発でよく用いられている手法の一つです．
私は機能一覧を参考にしながら一つ一つ実装して行く手法をとりました．具体的には

1. テストを書く．
2. 実装する．
3. テストに通ったら機能一覧のセルを緑にする．
* 何か理由があって実装を保留した場合はセルを黄色に．1or2に戻る．
* バグが見つかった場合はセルを赤に．1or2に戻る．
4. 1に戻る

をくり返して実装を続けました．

ステップ7　公開

今回は勉強を兼ねてさくらVPSを選択しました．そのうちさくらクラウドに乗り換えるかもしれません．ドメインはお名前.comで取得．参考にした本はこれ．どこの本屋にも置いてあるんじゃないかってくらいよく見るこの本．

CentOS 6で作るネットワークサーバ構築ガイド (Network Server Construction Guide S)

これまで「ものづくり」は「製造業」とほぼ同義でした．しかし3DプリンタやArduinoに象徴されるように個人や有志の団体でもものづくりを行える環境が整いつつあります．
Raiqooはものづくりを楽しむ個人やチーム，もちろん企業も一緒になってわいわいがやがやとものづくりと交流を楽しむプラットフォームになりたいと考えています．

「ものづくり」を再定義する．Raiqooをよろしくお願いします．

実は自分が使いたいサービスを作っただけなんですけどね．
さーて何を作ろっかなー？