mt東京 ぱくたそ/pakutaso

Yuu ( Yuji Tsukaguchi )

1987年生まれの27歳。デザイナー / エンジニア都内でフリーランスをしながら嫁と1歳の子と暮らしてます。

@regret_raym

・ぱくたそとは？

・ぱくたその活動内容

・ぱくたその開発環境

・ぱくたそのシステム構成

CTR高い芸人

ハンドサイン写真素材

話題になってから5日以内にロケハンして撮影しました。

仕事早すぎというツッコミがあったら勝ち

5000万円が鞄に入らない

話題になった翌日撮影して公開。

誰が使うんだよというツッコミがあったら勝ち

ぱくたそは

Movable Typeで作られています

ユーザーからの要望

＿人人人人人人＿

＞再構築3時間＜ ￣Y^Y^Y^Y^Y^Y￣

(‘A’)！

来週リニューアルします（2014年5月下旬）

ぱくたその開発環境

管理人 / 更新担当

・Windows

・黒い画面は使わない

・HTML＋CSSは書ける

制作者

・Windows / Mac

・黒い画面使う

・Web制作業務がメイン

・HTMLやCSSが煩雑化する

・ファイルをうっかり上書きしてしまう

・CSS、jsの圧縮化が大変

新しいページを作って、サイトを運用していると・・・

Sass（SCSS）

Sassのimport機能を

利用してレイアウト、

モジュールごとに管理

@import "module/*.*";

1. sudo gem install sass-globbing

2. config.rbに「require 'sass-globbing'」を追記

sass-globbing

汎用スタイルを作成する

スタイルガイドで

汎用スタイルを一覧化

Markdownで作成

よく使用するタグには、

固定のスタイルを当てておき、

画像はMT側でアップロード

プラグイン「UploadDir」でアップロードフォルダを指定

バージョン管理システム

Gruntによる自動化

❖ grunt-bower-task❖ grunt-contrib-cssmin❖ grunt-contrib-compass❖ grunt-autoprefixer❖ grunt-contrib-jshint❖ grunt-contrib-concat❖ grunt-contrib-clean❖ grunt-contrib-uglify❖ grunt-contrib-watch❖ grunt-kss❖ grunt-csso❖ grunt-image

bowerによるパッケージ管理SassのコンパイルCSS・JSの結合・圧縮スタイルガイドの生成画像の圧縮

grunt watch

Windowsで実行するためにバッチファイルを作成

start.bat

ぱくたそのシステム構成

・Yahoo砲やソーシャル流入でサイトが重い

大量アクセスが・・・

大量同時アクセス

PLESK管理によるnginx導入

http://www.pletk.com

ウェブサイト構成図

写真素材

ぱくたそ

モデル

運営

カメラマン

コラボ・企

画

人物関係 コラボ、LP向け素材関係

ウェブサイト

ブログ

ウェブサイト構成図

写真素材

ぱくたそ

モデル

運営

カメラマン

コラボ・企

画

・モジュール

・ウェブページ

人物関係 コラボ、LP向け素材関係

更新度が低い「サイトについて」や

各ブログで共有するテンプレートモジュールを管理

ウェブサイト

ブログ

ウェブサイト構成図

写真素材

ぱくたそ

モデル

運営

カメラマン

コラボ・企

画

人物関係 コラボ、LP向け素材関係

タグ タグ

各ブログ記事はタグでモデル名をヒモ付け

たとえば「大川竜弥」のタグで一覧化できるように

テンプレート・モジュール

「ページタイトル」「パンくず」などは

MTの条件分岐を利用してモジュール化

頻繁に更新を行うものに

関しては、SSI化で読み込み

検索システム

flexibleSearchの導入超高速な JavaScript 検索を実現する jQuery プラグイン

jsでjsonデータを読み込み、設定json形式でエントリー情報を出力

DEMO