CSSのインデントを綺麗にするサービスSASSIENCEのコードをGitHubに公開してみた。
今回もHeroku+Sinatra+Slim+Sass
SASSIENCEのソースコードを公開しているリポジトリはこちら。
ruedap/sassience at master - GitHub
今回も過去の自作Webアプリと同じで、Heroku, Sinatra, Slim, Sassの組み合わせで作っている。というか、今回は今までで使っているライブラリが最も少なくて、上記プラス「rack-rewrite」だけ。メイン部分のapp.rbも200行に満たないくらい小さなWebアプリ。
独自ドメイン割り当てとパーシャル
今回のSASSIENCEで新しく挑戦したことは、実はあんまりなくて、Herokuアプリに独自ドメインを割り当てることと、Slimでパーシャルを使えるようにしたことくらい。
Herokuアプリに独自ドメインを割り当てる（バリュードメインの場合） Herokuアプリに独自ドメインを割り当てる（ムームードメインの場合） Herokuアプリでドメイン単位のリダイレクトをするには SinatraとSlimの組み合わせでPartialする
また、ソースコードのベースはハムカツを参考にさせてもらっているので、興味がある人はそちらも併せてご覧いただきたい。ハムカツからi18nやAPI機能などを除いて、HTML変換部分をCSS変換に差し替えた感じ。
ハムカツに比べて、SASSIENCEでの変換（Sass変換）ではエラー発生率がとても高くて結構悩んだ。対応策として、成功or失敗を表示することでユーザーに明示し、失敗した原因を推測（分岐）することで、ユーザー自身に手直ししてもらうようにした。当初こういう機能は付けるつもりがなく、成功率が高ければそもそも不要なので、出来れば無いほうが良かったんだけど、いろいろなサイトのCSSをコピペして変換してたら失敗しまくったので、仕方なく追加した。Sassは文法に厳しいのかな？
デザインファースト
今回は、最初に技術的検証をほとんどすること無く、いきなりデザインから作り始めた。面白いパロディを思いつけたことの嬉しさもあって、画面レイアウトとかロゴとかキャッチとかを作らずにはいられなかった。また、もうひとつには、元ネタであるハムカツという技術的に参考にできるコードが公開されていることによる安心感もあった。 結果的に37signalsが提唱する、プログラミングではなくデザインから作り始めるデザインファーストっぽくなったかも？
プログラミングを始める前にインターフェースをデザイン - Getting Real by 37signals
デザインを先に作り始めるメリットは、やっぱり自由度が高くなることだろうか。技術的に可能かどうかをあまり意識すること無く、良いと思えるデザインやレイアウトをそのまま作り始めることができる。技術的制約がはじめからわかっていると、デザインもそれに合わせようとしてしまうかもしれない。
ただ、デザインし終えて、それを実装する段階になって色々と技術的な問題や課題が出てくるので、それをちゃんと実装できるかどうかわからないという問題（自分の技術力の問題ではあるけど）は付きまとう。実際にSASSIENCEでも、仕様書段階で思いついていたアイデアでも、技術的に無理でボツにしたものはいくつかあった。でも作り終えて振り返ってみれば、デザインを先につくるという制作行程は結構良かったと思っている。
ruedap/sassience - GitHub CSSのインデントを綺麗にするサービス「SASSIENCE」を作ってみた SASSIENCEの仕様書（Evernoteのメモ）を公開してみる NekostagramとInustagramのソースコードをGitHubに公開してみた はてなスターカウンターのソースコードをGitHubに公開してみた