ぱくたそというWebサービスの開発と改善 #ぱくダー

ぱくたそで何をやっているのか

「テクニカル・ディレクター」という役割で、主にサイト開発実装や運用時のトラブル・技術相談などやっています。

具体的なものとしては、

• デザインの改修
• フロントエンドのコーディング改修・実装
• バックエンドのMovable Typeとnginxに関わる実装
• コラボ企画のディレクション

といったところです。

ぱくたそとの出会い（2012年3月）

ぱくたそがリリースされて半年くらいの時に、すしぱくさんと知り合いました。 Movable Typeのイベントに参加して、たまたま近くにいたのがすしぱくさんで、実装で困っているところがあるということだったので、相談に乗ってたのが始まりでした。

1年後の2013年4月に僕がフリーランスとして独立することになったので、そのタイミングで正式にぱくたその開発担当になりました。

開発体制

開発は、すしぱくさんと僕の2名体制で行っています。 作業は基本的にはリモートで、平日はお互いに仕事があるので、夜に開発作業をしています。

僕らはこれを「ハッカソン」ならぬ「ぱくたそん」と呼んでます。

ぱくたそん最中はやたらテンションが高く、翼も生やせそうです。

何を改善してきたか

開発担当になってから、2年間で段階的に改修・機能開発作業をしています。

• Movable Typeの最適化
• サーバの最適化
• 検索機能の改善
• デザインとフロントエンドの改善
• スマートフォン対応
• ブログメディア作成

MovableTypeの最適化

まずは運用面で更新・拡張しやすいシステム作り、ということで、CMSから着手しました。

従来すしぱくさんが作っていたものを整理しつつ、機能面としてはテンプレート構成を分かりやすく、連携させやすいようにしています。

http://www.slideshare.net/regret_raym/mt-35064388

検索機能

次に標準の検索機能が500エラー連発したため、Ajax形式の検索にしました。 「flexibleSearch」というJavaScriptプラグインを利用しています。

仕組みとしては、Movable Typeで記事のjsonを作って出力→JavaScriptでフィルタリングするもの。 JavaScriptなのでCMSに依存しない点がとても使いやすいです。

サーバの最適化

Movable Typeで記事を出力する際には、htmlを吐き出すための再構築という処理が必要ですが、これが記事が増えるごとに時間がかかる。 全体記事を再構築しようとすると5時間とかかってしまう。 新着写真を追加するにも1記事で5分以上かかる、、となかなか厳しい状況になってきたので、少しでも軽くすべくPSGIに対応しました。

PSGIをすごいざっくりで書くと、

• MovableTypeはPerlで作られている
• Perlはnginxに対応していないため、nginxで動かない。
• PSGIを通すと、perlでもPSGIに対応したものであれば動く！
• Movable TypeはPSGI対応されたのでnginxでも動く！
• 再構築が早くなるといいな！

そんな、ぱくたそのサーバ構成例はこちら

これに合わせて、サーバのスペックを「さくらVPS SSD16G」に移転しました。

デザイン

2014年7月に、今のデザインにリニューアルしました。

デザインとしては大きく変えていません。
写真以外にアイコンなど画像要素を排除して、7割型フラット系に移行させました。

リニューアル前後で、全体的にレイアウトを変えてない理由としては、「いつもあると思っていた位置に目的のものがない」というのが、自分も困ることがあるので開設当初からのレイアウトは維持しつつ、ブラッシュアップを行ってます。

フロントエンド

リニューアル前のぱくたそでは、画像と広告の表示もあり、3000ms~5000msくらいロードに時間がかかっていました。 これは単純に、アイコン画像やjQueryプラグインなど複数読み込んでいるせいだったので、リクエスト数を減らしてあげるだけで、300msくらいになりました。

コーディングには、BEMの記述方式を参考に導入しています。 それとスタイルガイドを用意することで、class名をどう追加すれば良いのかなど、すしぱくさんでも簡単に追加改修できるようにしています。

基本的にはお互いの認識合わせのルール決めをしておくのと、 忘れた頃にコードを見てもすぐ分かるという、わかりやすさ優先で。

スマートフォン対応

ぱくたそは写真素材サイトなので、PCユーザーが圧倒的に多いのですが、スマートフォンユーザーもいます。

特に企画リリース時はモバイルアクセスが多いため、写真の見やすさ優先でレスポンシブでスマートフォン対応を行いました。

こちらはすでにHTMLとシステムが組み上がっているものなので、モバイル用にCSSで最適化しただけだったので、わりとさっくりできました。

ブログメディア「ぱくたそブログ」作成

「ぱくたそってメディア作らないんですか？」と聞かれることが多くなってきたこともあり、そもそも企画とか個々のお知らせなど告知する場所がないよねってことで、このブログを開設しました。 いろいろ試行錯誤しながらなので、これから拡張していければいいなと思ってます。

施策結果として

開設当初からのPV推移が下記です。

ぱくたそ広報資料（https://www.pakutaso.com/pakutaso_pr.pdf）

この表では、2015年時点で250万PVとなっていますが、現在（2015年12月）では300万PVになっています。
リニューアルしたらPV下がったんだけどってパターンは恐ろしいので、今のところは大丈夫のようです。

2016年のぱくたそ

リニューアルしてから1年経ち、コラボも毎月3回以上行われ、コンテンツボリュームが圧倒的に増えました。
そのうえでデザインの見直し、機能追加などいくつか上がってる要件に対して、ぱくたそんをやっていく予定です。

Webの世界は新しいことがどんどん出てきて、それを試行錯誤しながら実施できるというのはとても楽しいことだと思うので、まさに「楽しければいいのです」精神で頑張ろうと思います。