読者です 読者をやめる 読者になる 読者になる

kamiのサービス制作ログ

ひとりでサービスを制作している人の作業ログ的なブログ

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

f:id:kami30k:20140721190520p:plain

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

なぜつくった

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

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

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

技術

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

開発メモ

ブックマークはActive Adminで管理

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

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

f:id:kami30k:20140721190600p:plain

ひとりGitHub Flowで開発

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

  1. branchを切る
  2. ファイルを編集する
  3. branchをpush
  4. Bitbucket上でプルリクエストを作成する
  5. レビューする
  6. OKならマージ、NGなら修正&再度commit
  7. ローカルでmasterをpull&マージ済みbranchを削除する

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

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

課題

スクリーンショットの自動化

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

  1. はてなブックマークで「デザイン」タグをつける
  2. 1の対象サイトを自動でスクリーンショット取得&ステータスをdraft状態にする
  3. Active Admin上でステータスをpublishにすると、サービスに反映される

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

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

負荷

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

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

おわりに

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

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