Enviar búsqueda
Cargar
MT東京 ぱくたそ/PAKUTASO
•
24 recomendaciones
•
676,492 vistas
regret raym
Seguir
2014年5月23日のMT東京 ケーススタディ2で発表したぱくたそについてのセッションです。
Leer menos
Leer más
Servicios
Denunciar
Compartir
Denunciar
Compartir
1 de 61
Descargar ahora
Descargar para leer sin conexión
Recomendados
Gws 20140117 lt
Gws 20140117 lt
Nobuhiro Sue
第2回UE4勉強会 in 大阪 - 201709 ue4界隈ニュース
第2回UE4勉強会 in 大阪 - 201709 ue4界隈ニュース
com044
SUPER MAOU RUN の作り方
SUPER MAOU RUN の作り方
kagematya
LT動画を作ってみたLT(動画)
LT動画を作ってみたLT(動画)
silpheed
同人活動の継続運用にかかる一考察
同人活動の継続運用にかかる一考察
silpheed
テーマ別Git tips
テーマ別Git tips
Ikuo Degawa
第4回UE4勉強会 in 大阪 201801 UE4界隈ニュース
第4回UE4勉強会 in 大阪 201801 UE4界隈ニュース
com044
第3回ue4勉強会 in 大阪 201711 ue4界隈ニュース
第3回ue4勉強会 in 大阪 201711 ue4界隈ニュース
com044
Recomendados
Gws 20140117 lt
Gws 20140117 lt
Nobuhiro Sue
第2回UE4勉強会 in 大阪 - 201709 ue4界隈ニュース
第2回UE4勉強会 in 大阪 - 201709 ue4界隈ニュース
com044
SUPER MAOU RUN の作り方
SUPER MAOU RUN の作り方
kagematya
LT動画を作ってみたLT(動画)
LT動画を作ってみたLT(動画)
silpheed
同人活動の継続運用にかかる一考察
同人活動の継続運用にかかる一考察
silpheed
テーマ別Git tips
テーマ別Git tips
Ikuo Degawa
第4回UE4勉強会 in 大阪 201801 UE4界隈ニュース
第4回UE4勉強会 in 大阪 201801 UE4界隈ニュース
com044
第3回ue4勉強会 in 大阪 201711 ue4界隈ニュース
第3回ue4勉強会 in 大阪 201711 ue4界隈ニュース
com044
1年間で100万PV増やしたコンテンツ運用と最適化|写真素材サイトぱくたそ
1年間で100万PV増やしたコンテンツ運用と最適化|写真素材サイトぱくたそ
regret raym
英語教育改革とEq
英語教育改革とEq
HugCome,Inc.
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Taichi Hirano
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
regret raym
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
初期研修医のための学会スライドのキホン
初期研修医のための学会スライドのキホン
k-kajiwara
【Draft】サービス説明資料2017.03.01
【Draft】サービス説明資料2017.03.01
Kohta Wada
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
swwwitch inc.
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
Web制作のアレコレ
Web制作のアレコレ
regret raym
Movable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイト
regret raym
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
regret raym
FluentdとGrothForecastをインストールする
FluentdとGrothForecastをインストールする
regret raym
SlackにHubotを設定して対話する
SlackにHubotを設定して対話する
regret raym
CreateJSを使ったアニメーション表現の基礎
CreateJSを使ったアニメーション表現の基礎
regret raym
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
Chefで作る開発環境
Chefで作る開発環境
regret raym
Dockerの導入
Dockerの導入
regret raym
Más contenido relacionado
Destacado
1年間で100万PV増やしたコンテンツ運用と最適化|写真素材サイトぱくたそ
1年間で100万PV増やしたコンテンツ運用と最適化|写真素材サイトぱくたそ
regret raym
英語教育改革とEq
英語教育改革とEq
HugCome,Inc.
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Taichi Hirano
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
regret raym
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
初期研修医のための学会スライドのキホン
初期研修医のための学会スライドのキホン
k-kajiwara
【Draft】サービス説明資料2017.03.01
【Draft】サービス説明資料2017.03.01
Kohta Wada
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
swwwitch inc.
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
Web制作のアレコレ
Web制作のアレコレ
regret raym
Movable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイト
regret raym
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
regret raym
FluentdとGrothForecastをインストールする
FluentdとGrothForecastをインストールする
regret raym
SlackにHubotを設定して対話する
SlackにHubotを設定して対話する
regret raym
CreateJSを使ったアニメーション表現の基礎
CreateJSを使ったアニメーション表現の基礎
regret raym
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
Destacado
(20)
1年間で100万PV増やしたコンテンツ運用と最適化|写真素材サイトぱくたそ
1年間で100万PV増やしたコンテンツ運用と最適化|写真素材サイトぱくたそ
英語教育改革とEq
英語教育改革とEq
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
色彩センスのいらない配色講座
色彩センスのいらない配色講座
初期研修医のための学会スライドのキホン
初期研修医のための学会スライドのキホン
【Draft】サービス説明資料2017.03.01
【Draft】サービス説明資料2017.03.01
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
人と向き合うプロトタイピング
人と向き合うプロトタイピング
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Web制作のアレコレ
Web制作のアレコレ
Movable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイト
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
FluentdとGrothForecastをインストールする
FluentdとGrothForecastをインストールする
SlackにHubotを設定して対話する
SlackにHubotを設定して対話する
CreateJSを使ったアニメーション表現の基礎
CreateJSを使ったアニメーション表現の基礎
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
Más de regret raym
Chefで作る開発環境
Chefで作る開発環境
regret raym
Dockerの導入
Dockerの導入
regret raym
Jenkinsの導入 vol.02 Bitbucketと連携する
Jenkinsの導入 vol.02 Bitbucketと連携する
regret raym
Jenkinsの導入 Vol.01
Jenkinsの導入 Vol.01
regret raym
Yurufuwa007
Yurufuwa007
regret raym
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
WordCamp Tokyo2012 Session
WordCamp Tokyo2012 Session
regret raym
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
Wp html5
Wp html5
regret raym
Más de regret raym
(10)
Chefで作る開発環境
Chefで作る開発環境
Dockerの導入
Dockerの導入
Jenkinsの導入 vol.02 Bitbucketと連携する
Jenkinsの導入 vol.02 Bitbucketと連携する
Jenkinsの導入 Vol.01
Jenkinsの導入 Vol.01
Yurufuwa007
Yurufuwa007
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 Session
WordCamp Tokyo2012 Session
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
Wp html5
Wp html5
MT東京 ぱくたそ/PAKUTASO
1.
2.
Yuu ( Yuji
Tsukaguchi ) 1987年生まれの27歳。 デザイナー / エンジニア 都内でフリーランスをしながら 嫁と1歳の子と暮らしてます。 @regret_raym
3.
4.
5.
・ぱくたそとは? ・ぱくたその活動内容 ・ぱくたその開発環境 ・ぱくたそのシステム構成
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
CTR高い芸人
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
ハンドサイン写真素材 話題になってから5日以内にロ ケハンして撮影しました。 仕事早すぎというツッコミが あったら勝ち
30.
5000万円が鞄に入らない 話題になった翌日撮影して公 開。 誰が使うんだよというツッコミが あったら勝ち
31.
32.
33.
34.
35.
36.
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
Descargar ahora