#ぱくダー2015.12.14開発・技術情報ツイートシェアポケットこんにちは、気がつけばブログリリースしてから2回目の記事というぱくたそブログ実装担当のYuuです。2015」の14日目の記事です。「ぱくたその裏側で何をやってきたか」についてご紹介します。そで何をやっているのか「テクニカル・ディレクター」という役割で、主にサイト開発実装や運用時のトラブル・技術相談などやっています。Typeとnginxに関わる実装コラボ企画のディレクションといったところです。たそとの出会い(2012年3月)ぱくたそがリリースされて半年くらいの時に、すしぱくさんと知り合いました。Typeのイベントに参加して、たまたま近くにいたのがすしぱくさんで、実装で困っているところがあるということだったので、相談に乗ってたのが始まりでした。1年後の2013年4月に僕がフリーランスとして独立することになったので、そのタイミングで正式にぱくたその開発担当になりました。開発は、すしぱくさんと僕の2名体制で行っています。作業は基本的にはリモートで、平日はお互いに仕事があるので、夜に開発作業をしています。僕らはこれを「ハッカソン」ならぬ「ぱくたそん」と呼んでます。そん最中はやたらテンションが高く、翼も生やせそうです。検索機能の改善デザインとフロントエンドの改善スマートフォン対応ブログメディア作成MovableTypeの最適化まずは運用面で更新・拡張しやすいシステム作り、ということで、CMSから着手しました。従来すしぱくさんが作っていたものを整理しつつ、機能面としてはテンプレート構成を分かりやすく、連携させやすいようにしています。次に標準の検索機能が500エラー連発したため、Ajax形式の検索にしました。「flexibleSearch」というJavaScriptプラグインを利用しています。Typeで記事のjsonを作って出力→JavaScriptでフィルタリングするもの。JavaScriptなのでCMSに依存しない点がとても使いやすいです。Typeで記事を出力する際には、htmlを吐き出すための再構築という処理が必要ですが、これが記事が増えるごとに時間がかかる。全体記事を再構築しようとすると5時間とかかってしまう。新着写真を追加するにも1記事で5分以上かかる、、となかなか厳しい状況になってきたので、少しでも軽くすべくPSGIに対応しました。PSGIをすごいざっくりで書くと、MovableTypeはPerlで作られているPerlはnginxに対応していないため、nginxで動かない。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の世界は新しいことがどんどん出てきて、それを試行錯誤しながら実施できるというのはとても楽しいことだと思うので、まさに「楽しければいいのです」精神で頑張ろうと思います。ツイートシェアポケットYuuぱくたそのテクニカル・ディレクター。フリーランスのWebデザイナー/エンジニア。キーワードから探る未来像」や「現場のプロが教えるWeb制作の最新常識」など。あわせて読みたい2017年にぱくたそが行った開発と改善2017.12.29開発・技術情報Yuuこんにちは、ぱくたそ開発担当のYuu(@regret_raym)です。たそは個人サービスですが、月に1、2回ほど開発日を設けています。他のサービスに...劣化させずに高品質のまま画像のファイルサイズを圧縮するなら、Photoshopの書き出しの設定をしよう2017.12.23開発・技術情報すしぱくぱくたそで配布しているフリー素材は、「JPEG」形式の画像データです。Yuuさんと機能の追加、改善を定期的に行っています。今回は、改善して欲しいとリクエストが多い検索まわり、以前よりア...検索時のタグ表示や最適化など、機能向上について2017.02.21開発・技術情報すしぱくぱくたそでは、毎月定期的にテクニカルディレクターのYuuさんと開発会議「ぱくたそん」を行っています。内容は、・ユーザー様からの要望を改善・新しい機能を追加・今後...画像(静止画)の透過加工について、背景色の種類と簡単に抜く方法2017.02.15開発・技術情報すしぱく透過素材(png)のご要望にお応えしたいPhotoshop大好きすしぱくです。たそでは、背景が緑や白など、単色の写真素材を多く取り扱っています...ブログ投稿時に使うタグにスタイルを反映する2015.07.01開発・技術情報Yuuこんにちは、ぱくたそで技術的な担当しているYuuです。プリセット配布サイト!写真を手軽に加工しよう。無料版(フリー)もあります。今年も「ぱくたそ」をよろしくおねがいします2019.12.282019年もありがとうございました。協賛・スポンサー広告を募集中です。新着のシーンやロケーションコラボレーション可愛ければいいのです。写真を無料でダウンロードできるウェブサービスです。©フリー素材のぱくたそ。