ツイートを装飾できるサービス Ritwee（リッツィー）を14時間ぐらいで作った話
前に投稿したnoteは中途半端な状況になっていたので削除して、この記事は再投稿になります。
前回の投稿ではすごく時間掛かった難産なシステム開発でしたが、打って変わって突貫でサービスを作った＋どうなったかという話です。
新しいサービスを作りました
サービス概要
ツイッターの投稿を装飾したり、たくさんの文字や画像を一度に投稿できるサービスです。
こういう投稿をウェブサービス上でできるようなものを作りました。
開発のきっかけ
以下3点
・前回の投稿で作ったサービスで、JavaScriptのリッチテキストエディタライブラリであるQuilljsを知り「これでなんかできるんじゃないか？」という思いつき
・PWAを作ってみたいな、という思い
・どれだけハイスピードで開発ができるか、という挑戦
画面設計
XDで作る。作・・・・
こいつぁひでぇ。雑ってレベルじゃねーぞ！！！
そして、画面設計があまりにずさんであったために、これで後々痛い目をみたのだった（死亡フラグ）
開発作業
主要な使用ライブラリなどは以下
準備
【フロントエンド】
・Riot.js - コンポーネント用
・Quilljs - リッチテキストエディタ
・jQuery - これがないと僕何も出来ない
【バックエンド】
・node.js express - apache用意するのが面倒だったのでexpressにしたけど、修正の都度再起動を伴うのでWebサーバとして使うのは大失敗だった…
・passport-twitter ＋ twitter - TwitterのAPIラッパーライブラリ。
ていうかTwitterのAPI使いづらすぎない？？？
バックエンド開発
パラメータを受け取ってAPIに投げる以上のことを特にしていないので、あまり特筆することはない。TwitterのAPI、別の物理名で同じ意味をさすもの（OauthTokenとAccessToken）などが多々ありつまづく。
ほんと直してほしい。TwitterのAPIは年々微妙になっていく。
フロント開発
大したUIでもないしデザインコーディングでいけるのでは？と思ったけどもこれがまぁとんでもなく見通しが甘かった。
画面設計で立てた死亡フラグをバリバリ回収することになる。
まずそもそもデザインコーディングとはなにかというと、自分の理解では、マークアップを行いながらデザインを調整する、という作業手法である。違ったらゴメン。
で、そのデザインコーディング。その字面だけでみると楽そうに見えるけれども、実際そんなに場当たりでデザイン＋コーディングを兼ね備えたものとか作れなかった。
やれるとすれば相当なデザインとマークアップの経験値を積んでいる賢者みたいな人がやっているか、それなりにデザインを作り込んだものの微調整のことをそう呼んでいるか、そもそも元々のプロダクトがあり、追加や修正するものの調整をしているとか、そういうことじゃないだろうか。
あるいは、Bootstrapなどのデザインフレームワークなどを使っての作業をそう呼んでいるのかも知れない。
何となく形と体裁を整えることというのは出来たのだけれども、スマートフォンで見ると破綻していたり、とんでもなく使いづらい事になっていたり、文字列が意図しないところからバキバキに改行される状況になっており、ガタガタだった。これについては単純に確認が甘いといえばそのとおりではあるのだけども…。
相当の自信がない限り、UIについては一旦設計してから作業してからのほうがケガをしないし、結局早い、というのは確かだと思った。
デザインコーディング中の「俺は今何を作っているんだ」感との戦い
これも設計作業を怠った結果の話。
「アイデアを思いついたぜ！！！！形にできるぜ！！！！」って思っていても、例えば細かいことであればボタンのホバー時エフェクトや、要素のアニメーションなど、大きなところであれば説明の画面とか規約の画面をどうするのかとかが「思いついた」の中では都合よく省略されている要素が沢山ある。
そして、なぜなのか不思議なことに超重要な要素というのは往々にして都合よく忘れていたりする。
そうやって、「アレも足りなかった」「これも必要だった」とやっているうちにデザインコーディングは破綻する。
たかだか１ページしか無いこんなサービスでさえである。
この記事のタイトルは１４時間ぐらいで作った話、としてあるし、きっかけとしてどれだけのスピードで作ることが出来るか、ということを出したが、結局最後に言いたいこととして残ったのは、「ちゃんと然るべき時間かけて設計しないと痛い目を見るぞ」という話である。
ちなみに、１４時間の内訳のうち、フロントエンドの手戻りと調整が８時間ぐらい掛かっている。
ビジュアル的なデザイン
何も語れるようなことはなく、適当…。
ロゴ３０分ぐらい＋画面パーツ３０分ぐらいの時間で作る。下手の横好きでやっているデザイン作業なので、そこまで細かいことを頑張りきらない。
そして出来上がったのはまともなデザイナーに見せたら卒倒しそうなレベルの汚い状況のアートボードである。
そしてリリースした
そしたら直後に大阪に震度６の地震が来た…。
なんというかめちゃめちゃ気まずかったが、西にいる友達はみんな無事で良かった。
PWA化は・・・
実はまだ対応していない。
なんか設定書くだけかと思っていたら意外とそうではなかったということを作りきった後から知ったからである。仕事では下調べをきちんとしよう、こんなことがないようにしよう。僕はまた失敗からひとつ学んだのだ。
言いたいことのまとめ
まとめ、というか、文章が相変わらず下手で語っている内容があっちにこっちにフラフラして散文的になってしまったけれども・・・
・タイムアタックを敢行しているとしても、焦って作るよりちゃんと設計したほうが良い。ハッカソンみたいなシーンでは思い出して欲しい。
・デザインコーディングは軽い気持ちで口にしていい言葉でもやっていい作業でもない。
・サービス出したんでよろしくおねがいします。
以上です。ここまでお付き合いくださりありがとうございました。