MT東京 ぱくたそ/PAKUTASO
-
Upload
regret-raym -
Category
Services
-
view
149.895 -
download
1
Transcript of MT東京 ぱくたそ/PAKUTASO
![Page 1: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/1.jpg)
![Page 2: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/2.jpg)
Yuu ( Yuji Tsukaguchi )
1987年生まれの27歳。デザイナー / エンジニア都内でフリーランスをしながら嫁と1歳の子と暮らしてます。
@regret_raym
![Page 3: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/3.jpg)
![Page 4: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/4.jpg)
![Page 5: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/5.jpg)
・ぱくたそとは?
・ぱくたその活動内容
・ぱくたその開発環境
・ぱくたそのシステム構成
![Page 6: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/6.jpg)
![Page 7: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/7.jpg)
![Page 8: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/8.jpg)
![Page 9: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/9.jpg)
![Page 10: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/10.jpg)
![Page 11: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/11.jpg)
![Page 12: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/12.jpg)
![Page 13: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/13.jpg)
![Page 14: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/14.jpg)
![Page 15: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/15.jpg)
![Page 16: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/16.jpg)
![Page 17: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/17.jpg)
CTR高い芸人
![Page 18: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/18.jpg)
![Page 19: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/19.jpg)
![Page 20: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/20.jpg)
![Page 21: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/21.jpg)
![Page 22: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/22.jpg)
![Page 23: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/23.jpg)
![Page 24: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/24.jpg)
![Page 25: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/25.jpg)
![Page 26: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/26.jpg)
![Page 27: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/27.jpg)
![Page 28: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/28.jpg)
![Page 29: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/29.jpg)
ハンドサイン写真素材
話題になってから5日以内にロケハンして撮影しました。
仕事早すぎというツッコミがあったら勝ち
![Page 30: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/30.jpg)
5000万円が鞄に入らない
話題になった翌日撮影して公開。
誰が使うんだよというツッコミがあったら勝ち
![Page 31: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/31.jpg)
![Page 32: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/32.jpg)
![Page 33: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/33.jpg)
![Page 34: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/34.jpg)
![Page 35: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/35.jpg)
![Page 36: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/36.jpg)
![Page 37: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/37.jpg)
ぱくたそは
Movable Typeで作られています
![Page 38: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/38.jpg)
ユーザーからの要望
![Page 39: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/39.jpg)
_人人人人人人_
>再構築3時間<  ̄Y^Y^Y^Y^Y^Y ̄
![Page 40: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/40.jpg)
(‘A’)!
![Page 41: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/41.jpg)
来週リニューアルします(2014年5月下旬)
![Page 42: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/42.jpg)
ぱくたその開発環境
![Page 43: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/43.jpg)
管理人 / 更新担当
・Windows
・黒い画面は使わない
・HTML+CSSは書ける
制作者
・Windows / Mac
・黒い画面使う
・Web制作業務がメイン
![Page 44: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/44.jpg)
・HTMLやCSSが煩雑化する
・ファイルをうっかり上書きしてしまう
・CSS、jsの圧縮化が大変
新しいページを作って、サイトを運用していると・・・
![Page 45: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/45.jpg)
Sass(SCSS)
Sassのimport機能を
利用してレイアウト、
モジュールごとに管理
@import "module/*.*";
1. sudo gem install sass-globbing
2. config.rbに「require 'sass-globbing'」を追記
sass-globbing
![Page 46: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/46.jpg)
汎用スタイルを作成する
スタイルガイドで
汎用スタイルを一覧化
![Page 47: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/47.jpg)
Markdownで作成
よく使用するタグには、
固定のスタイルを当てておき、
画像はMT側でアップロード
プラグイン「UploadDir」でアップロードフォルダを指定
![Page 48: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/48.jpg)
バージョン管理システム
![Page 49: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/49.jpg)
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の結合・圧縮スタイルガイドの生成画像の圧縮
![Page 50: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/50.jpg)
grunt watch
Windowsで実行するためにバッチファイルを作成
start.bat
![Page 51: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/51.jpg)
ぱくたそのシステム構成
![Page 52: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/52.jpg)
・Yahoo砲やソーシャル流入でサイトが重い
大量アクセスが・・・
![Page 53: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/53.jpg)
大量同時アクセス
![Page 54: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/54.jpg)
PLESK管理によるnginx導入
![Page 55: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/55.jpg)
http://www.pletk.com
![Page 56: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/56.jpg)
ウェブサイト構成図
写真素材
ぱくたそ
モデル
運営
カメラマン
コラボ・企
画
人物関係 コラボ、LP向け素材関係
ウェブサイト
ブログ
![Page 57: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/57.jpg)
ウェブサイト構成図
写真素材
ぱくたそ
モデル
運営
カメラマン
コラボ・企
画
・モジュール
・ウェブページ
人物関係 コラボ、LP向け素材関係
更新度が低い「サイトについて」や
各ブログで共有するテンプレートモジュールを管理
ウェブサイト
ブログ
![Page 58: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/58.jpg)
ウェブサイト構成図
写真素材
ぱくたそ
モデル
運営
カメラマン
コラボ・企
画
人物関係 コラボ、LP向け素材関係
タグ タグ
各ブログ記事はタグでモデル名をヒモ付け
たとえば「大川竜弥」のタグで一覧化できるように
![Page 59: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/59.jpg)
テンプレート・モジュール
「ページタイトル」「パンくず」などは
MTの条件分岐を利用してモジュール化
頻繁に更新を行うものに
関しては、SSI化で読み込み
![Page 60: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/60.jpg)
検索システム
flexibleSearchの導入超高速な JavaScript 検索を実現する jQuery プラグイン
jsでjsonデータを読み込み、設定json形式でエントリー情報を出力
![Page 61: MT東京 ぱくたそ/PAKUTASO](https://reader036.fdocument.pub/reader036/viewer/2022081720/55a060e11a28ab372e8b4787/html5/thumbnails/61.jpg)
DEMO