2014年5月23日のMT東京 ケーススタディ2で発表したぱくたそについてのセッションです。

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

5. ・ぱくたそとは？
・ぱくたその活動内容
・ぱくたその開発環境
・ぱくたそのシステム構成

17. CTR高い芸人

29. ハンドサイン写真素材
話題になってから5日以内にロ
ケハンして撮影しました。
仕事早すぎというツッコミが
あったら勝ち

30. 5000万円が鞄に入らない
話題になった翌日撮影して公
開。
誰が使うんだよというツッコミが
あったら勝ち

37. ぱくたそは
Movable Typeで作られています

38. ユーザーからの要望

39. ＿人人人人人人＿
＞再構築3時間＜
￣Y^Y^Y^Y^Y^Y￣

40. (‘A’)！

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

42. ぱくたその開発環境

43. 管理人 / 更新担当
・Windows
・黒い画面は使わない
・HTML＋CSSは書ける
制作者
・Windows / Mac
・黒い画面使う
・Web制作業務がメイン

44. ・HTMLやCSSが煩雑化する
・ファイルをうっかり上書きしてしまう
・CSS、jsの圧縮化が大変
新しいページを作って、
サイトを運用していると・・・

45. Sass（SCSS）
Sassのimport機能を
利用してレイアウト、
モジュールごとに管理
@import "module/*.*";
1. sudo gem install sass-globbing
2. config.rbに「require 'sass-globbing'」を追記
sass-globbing

46. 汎用スタイルを作成する
スタイルガイドで
汎用スタイルを一覧化

47. Markdownで作成
よく使用するタグには、
固定のスタイルを当てておき、
画像はMT側でアップロード
プラグイン「UploadDir」で
アップロードフォルダを指定

48. バージョン管理システム

49. 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の結合・圧縮
スタイルガイドの生成
画像の圧縮

50. grunt watch
Windowsで実行するためにバッチファイルを作成
start.bat

51. ぱくたそのシステム構成

52. ・Yahoo砲やソーシャル流入でサイトが重い
大量アクセスが・・・

53. 大量同時アクセス

54. PLESK管理によるnginx導入

55. http://www.pletk.com

56. ウェブサイト構成図
写真素材
ぱくたそ
モデル
運営
カメラマン
コラボ・企
画
人物関係 コラボ、LP向け素材関係
ウェブサイト
ブログ

57. ウェブサイト構成図
写真素材
ぱくたそ
モデル
運営
カメラマン
コラボ・企
画
・モジュール
・ウェブページ
人物関係 コラボ、LP向け素材関係
更新度が低い「サイトについて」や
各ブログで共有するテンプレートモジュールを管理
ウェブサイト
ブログ

58. ウェブサイト構成図
写真素材
ぱくたそ
モデル
運営
カメラマン
コラボ・企
画
人物関係 コラボ、LP向け素材関係
タグ タグ
各ブログ記事はタグでモデル名をヒモ付け
たとえば「大川竜弥」のタグで一覧化できるように

59. テンプレート・モジュール
「ページタイトル」「パンくず」などは
MTの条件分岐を利用してモジュール化
頻繁に更新を行うものに
関しては、SSI化で読み込み

60. 検索システム
flexibleSearchの導入
超高速な JavaScript 検索を実現する jQuery プラグイン
jsでjsonデータを読み込み、設定json形式でエントリー情報を出力

61. DEMO