CSSのインデントを綺麗にするサービス「SASSIENCE」を作ってみた

2011/05/26

今回のWebアプリは、制作はいつもどおり1人でしたが、完成後に数人の方に見ていただいて感想やツッコミをもらい、公開前にブラッシュアップするということをはじめて行いました。協力していただいた方々へのお礼も兼ねて、サービスの概要や公開に至るまでの過程を紹介します。

SASSIENCEとは

SASSIENCEは、簡単に言えばCSSのインデントやネストを綺麗に整形するサービスです。簡単に言わなくても、それだけの機能しかありません。トップページの画面中央の入力フォームに、綺麗にしたいCSSのデータをペーストして、好みの2タイプ（括弧の綴じ方の違い）を選ぶと、インデントとネストが綺麗に整形されます。また、入力データがCSSの記法として正しくない場合は変換に失敗し、その原因予想を提示するので、簡易的なバリデータとしても利用できます。ただし、変換失敗時の原因予想はあくまでも予想なので、的外れなこともあります。この変換技術には、CSSを簡潔に記述できるSassというRubyのライブラリを利用しています。

Ham Cutlet

SASSIENCE内の紹介文でも触れていますが、このサービスは、HTMLのインデントを綺麗にするサービスHam Cutlet（通称ハムカツ）を参考にして作りました。ぶっちゃけ参考にしたというレベルではなく、パクリという名のオマージュです。 ©日常第5話

以前の記事でも触れていますが、このハムカツを作ったフィヨルドという会社は自社開発のWebアプリをオープンソースにしていて、今回参考にさせてもらったハムカツも例外ではなくソースコードが公開されています。このソースコードを読ませてもらって、どういう仕組みで動いているのかを知ることで、今回のSASSIENCEを思いつき、制作してみました。

また完成前には、ハムカツ作者の@machidaさん、@komagataさんのお二人に「こんなにパクッちゃいましたけど大丈夫ですか？」的なニュアンスでSASSIENCEを見て頂きましたが、とても好意的な感想をいただけて本当に嬉しかったです。というわけで、SASSIENCEはハムカツおよびフィヨルドのオープンソース無くしては生まれなかったサービスです。この場を借りてお礼申し上げます。

フィヨルドはインデントに困った女子大生を救います - FJORD, LLC（合同会社フィヨルド）

自分もフィヨルドを見習って、近いうちにSASSIENCEのソースコードをGitHubに公開しようと思っています。

公開直前のブラッシュアップ

さらに今回は、公開前（1週間前くらい）に数人の方にWebアプリを実際に触ってみてもらって、感想やツッコミなどのフィードバックをもらうということを初めて行いました。

今までのWebアプリ（Nekostagramやはてなスターカウンター等）では、実際に公開するまで誰にも見せずに作っていたので、公開してみてから「ああすればよかった、こうすればよかった」というのが結構あったのですが、今回は事前に見てもらって率直な感想をもらうことで、また、自分の中で不安だった部分を質問させてもらってどう思ったかを教えてもらうことで、迷っていたところを明確にすることができました。

前述の@machidaさん、@komagataさんに加え、@func09さん、@jishihaさん、@monoookiさん、@milk1000ccさん、@deeekiさんに見ていただきました。お忙しい中で時間を割いていただきましてありがとうございました。

個人的に不安だったポイントとして、*このSASSIENCEのサイトを見て、某花の王様が販売するアジア風シャンプーが元ネタだと伝わるかどうか？*というのがありました。今回質問した方々の多くはすぐ元ネタをわかってもらえて楽しんでもらえたようでした。また、わからなかった場合でも化粧品的なコンセプトに感じて美しいサイトとの感想をいただいたので、デザインはそのままで行こうという自信に繋がりました。

公開後のIEでの不具合

公開前に発見はしていたものの原因がよくわからずに困っていたIE7での不具合が1つあって、それについてSASSIENCE公開後にTwitterで質問ツイートしました。それに対して、@uupaaさんと@mongorian_chopさんがレスポンスをくださって、予想される原因や場所などを教えてもらうことができました。ありがとうございます。

まとめ

今回は多くの人に助けられて公開できたWebアプリとなりました。また、実際に利用していただいた方々のツイートやブックマークコメントを見ていると、ネタとして笑ってもらえて、そこそこ便利なツールとしても使ってもらえてそうなので、嬉しい限りです。ありがとうございます。

SASSIENCE ～世界が嫉妬するCSSへ HTMLのインデントを綺麗にするサービス - Ham Cutlet フィヨルドはインデントに困った女子大生を救います - FJORD, LLC（合同会社フィヨルド）