mt東京 ぱくたそ/pakutaso
TRANSCRIPT
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