MT東京 ぱくたそ/PAKUTASO

Services

regret-raym
of 61
Description
Text
  • 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
Comments
Top