Webデザインのギャラリーサービス「Web Design Bookmarks」をリリースしました

f:id:kami30k:20140721190520p:plain

本日、Webデザインのギャラリーサービス「Web Design Bookmarks」をリリースしました。サービスのランディングページを中心とした、Webサイトのデザインをまとめたサービスです。

なぜつくった

ひとことでいうと、Webデザインの勉強をしたかったけど、自分が好きなデザインが集まったサービスがなかったのでつくりました。

いくつか同様のサービスはありますが、どちらかというとコーポレートサイト中心で、Webサービスしかつくらないぼくにとっては十分ではありませんでした。

また、このサービスは「Webデザイン制作に関わるすべての人に、最高のインスピレーションを与えること」をミッションに制作しました。そのため、ページ上に余計な情報を表示せず、デザイン閲覧に集中できるようなデザインにしています。

今回は以下の技術を用いて開発しました。新しく使ってみたのはActive AdminとPaperclipです。

今回は管理画面にActive Adminを用いました。ローカルでスクリーンショットを作成し、Active Admin上でPaperclipを用いて写真をアップロードしています。

ページ上では、以下のようにサムネイルも表示するようにしています。この辺りはコードを数行書くだけで実装できるので、とても便利だと感じました。他のサービスでも積極的に使っていきたいです。

f:id:kami30k:20140721190600p:plain

開発は、Bitbucket上でひとりGitHub Flowで開発しました。寂しかったです。以下の流れで開発しました。

自分なりのレビュー時のチェックリストもつくり、努めて客観的にレビューしました。マージしたら自動でJenkinsでデプロイパイプライン（テスト→デプロイ）を回すようにしています。

少し手間はかかりましたが、コードの品質は上がったような気になれます。

本当は、以下の流れでスクリーンショットを撮りたかったです。

ただ、2のスクリーンショット自動取得の検証段階で、どうしても日本語が豆腐文字になる問題が解決しませんでした。試してみたのはPhantomJSやwkhtmltoimage、Pythonのwebkit2pngなどです。

仕方ないので、今はMacのGUIでポチポチ作業しています。もうすぐPhantomJSのv2.0が出て、そこで解決するようなissueも見た気がするので、もう一度トライしてみます。

ご想像のとおり、画像を多用しているため負荷がすごいです。画質を荒くするのも手なのですが、やはりデザインのクオリティは一番こだわるべきところだと思いました。

一応ImageAlphaで圧縮していますが、根本的な解決にはなっていません。この辺り、様子を見ながら対策をとります。

今回、規模が小さかったこともあり、制作期間は5日間でした。サービスは今回で5つ目ですが、初めて最初に引いたスケジュールどおりにリリースできました。

今は技術習得のために新しいサービスをどんどん作っていますが、10月あたりからは作ったサービスをしっかり運用する段階に入りたいです。そのために、10月までにあと5つのサービスを頑張って作ります！