Favicon3D：Sinatra＋Herokuではじめてのウェブサービス

ウェブサービスではないような気もするけど。。
ウェブサービスってなんだろう。

つくったもの


ファビコンを3Dっぽくします。
3DにしたいFaviconのURLを入れてぽちっとしてください。
Sinatraのエラー処理がよくわかってないのでFavicon以外のURLを入れるとエラーになります。

id:secondlifeさんが数年前にやっていたサービスのオマージュというかほとんどそのままなので気が引けるのだけど、公開しないでおくのももったいないので公開。

id:secondlifeさんはさっくり作ったような書き方をされていたけど、
実際やってみるとFaviconを3D風にするのが大変だたよ。。

faviconを3D風にすると、楽しいです。かわいい。ずいぶん見え方が違う。
わたしはmixiのfaviconを3Dにしたのがお気に入り。

つくるまで

ちょっと前に、Bijostagramのアルゴリズムに興味があって調べていたら、id:ruedap さんのNekostagramにたどり着いて、さらにコードがGithubで公開されていた！ので読んでみたらすごいシンプル！なにこれステキ！とSinatraにたどり着いて、でもサーバ準備するの面倒だなぁ、と思ったらHerokuでホスティングもできる、ということでSinatra＋Herokuをいじりはじめました。

Faviconを3Dにするのは、Androidアプリを作るときに他のアプリのアイコンを見たらみんななんとなく3D風だったので昔id:secondlifeさんがそんなつくってたような・・・と思って調べたらもうサービスやってない！だったら自分でつくろうぞ！ということで作ったものです。

Sinatra自体はとても使いやすくて、習作にTwitterのBotをサクっとつくってHerokuのデプロイのやり方がわかるようになったので、以前Androidアプリのアイコンを作るときに使いたかったFaviconを3Dにするサービスを作ってみた。
Twitter Botぐらいだったらいじりはじめて1時間でできちゃう。
Sinatraすごい。

iphoneアプリとAndroidアプリを作るときにも感じましたが、個人でものづくりをしようとすると多能工にならざるを得なくて、デザイン、サーバやHTMLやらDBやらのうち、ひとつでも減るのはずいぶん敷居が下がったな、と感じました。

HTMLとCSSも、Haml や Slim,Sassを使えばだいぶわかりやすくなるし、書きやすくなるのでベタにHTMLを書くことはもうなさそう。というか書けない。

スマートフォンアプリやウェブサービスをひとりで作るときのネックはデザインかな。ロジックは作っても、ロジックを作ったあとのUIやアイコンのデザインに時間がかかる。Illustrator　とかの講座でも受ければマシになるのかな。

次はなんかのマッシュアップでもしてみよう。トレンドとしてはmixiアプリとかFacebookアプリなのかな。iphoneアプリをTitaniumで作ってウェブサービスを組み合わせた何かも楽しそう。Sinatra使えばサーバ側もできそうだし。わくわく。


SinatraもFaviconかわいい。

技術的なメモ

使ったフレームワークとライブラリ

Rmagickはローカルに入れたRmagickと透明度の扱いがHerokuのRmagickと異なっていてハマりました。。

サーバとか

全部無料！のつもりだったんですが転送量があると微妙に課金されそうな。。。課金体系がよくわかってないのでちょっと不安。

S3とSDBは、Herokuはデータを保存できないのでなんらかの手段で保存しないといけないし、
せっかくだからということでAWS。HerokuもAWSにあるので相性がいいそうな。


参考にしたサイト・本

WEB+DB PRESS Vol.62

WEB+DB PRESS Vol.62

  • 作者: cho45（さとう）,染田貴志,浜本階生,おにたま,中島聡,角田直行,はまちや2,山本竜三,尾藤正人,石橋利真,ミック,みやけん,個々一番,広木大地,原悠,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2011/04/23
  • メディア: 大型本
  • 購入: 16人 クリック: 1,368回
  • この商品を含むブログ (23件) を見る

id:cho45さんのHTML/CSS入門がとても参考になりました。

これを読んで、HamlとSassでなんとなく作れるようになります。
HamlとSassでさえ書いておけばきれいなHTMLとCSSを吐いてくれる。

これがなかったら作れませんでした。。ありがとうございます。
コードが公開されているのもすばらしいです。

HTMLのテンプレートをHamlにするのに使いました。
Hamlにしてしまえばいじりやすいので便利。

こちらも同じく。Sassの方がいじりやすい。というかCSSわかりづらい。