• 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
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

MT東京 ぱくたそ/PAKUTASO

by regret-raym

on

Report

Category:

Services

Download: 0

Comment: 0

149,863

views

Comments

Description

Download 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
Fly UP