powercmsでつくるマルチデバイス対応サイト ·...
TRANSCRIPT
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential
SINAP 株式会社シナップ 〒150-0001 東京都渋谷区神宮前3-32-5 TEL(03)-3796-2370 FAX(020)-4623-4140
confidential
PowerCMSでつくるマルチデバイス対応サイト 2013/06/21
© SINAP,inc. all rights reserved.! 1!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
はじめに
アルファサードさん!10周年おめでとうございます!! シナップはこれからもアルファサードさんに付いていきます!!
© SINAP,inc. all rights reserved.! 2!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
今日のお話
PowerCMSでつくるマルチデバイス対応サイト
・自己紹介
・マルチデバイス対応サイトを作成する背景
・PowerCMSを利用してワンソース・マルチユース
・シナップのマルチデバイス対応の手法
・事例紹介
-Anifav
-ジセダイ
・まとめ
© SINAP,inc. all rights reserved.! 3!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
会社紹介
株式会社 シナップ -インターネットを中心としたコミュニケーションプランと
その実現に必要なコミュニケーションツール、コンテンツを作る会社
-ペルソナ/シナリオ法の利用したソリューション提案、ソーシャルメ ディアを活用したコミュニケーション全体のコンサルティングが得意
-PowerCMS Partner Pro会員
-Six Apart ProNet会員
http://sinap.jp @sinapinc https://www.facebook.com/sinapinc
© SINAP,inc. all rights reserved.! 4!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
自己紹介
柿内暢昌(かきうち のぶあき)
-エンジニアリング全般やってます
-MT,PowerCMSでのサイト構築はたくさんやりました
-SocialGood活動のリーダーです。
-趣味は釣りです。
© SINAP,inc. all rights reserved.! 5!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
私のよこ
村山貴裕(むらやま たかひろ)
-フロントエンドエンジニア
-最近シナップに入りました
-MT,PowerCMSでのサイト構築の経験豊富
-JSCafeとか、MTCafeとか参加してます
-でもコーヒー飲むとお腹が痛くなる系です
© SINAP,inc. all rights reserved.! 6!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 7!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
ユーザーの閲覧環境の変化 ほとんどPC( + フィーチャーフォン )
© SINAP,inc. all rights reserved.! 8!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
ユーザーの閲覧環境の変化
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 9!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
ユーザーの閲覧環境の変化
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 10!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
ユーザーの閲覧環境の変化
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 11!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
ユーザーの閲覧環境の変化
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 12!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
ユーザーの閲覧環境の変化 様々な解像度を持った端末の登場
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 13!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 14!
いや、、、字、、、 ちっさ!!!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
ユーザーの閲覧環境の変化 操作方法の違うデバイス
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 15!
マウス操作 タッチデバイス
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
© SINAP,inc. all rights reserved.! 16!
いや、、、 押せませんよね!!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
やっぱり対応すべきですね。。
© SINAP,inc. all rights reserved.! 17!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
でも、、費用対効果が、、
© SINAP,inc. all rights reserved.! 18!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
アクセス解析をみると
© SINAP,inc. all rights reserved.! 19!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
アクセス解析の数字
blog.sinap.jp(シナップのブログ)
の例
© SINAP,inc. all rights reserved.! 20!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
スマートフォンからのトラフィック増大
2010/09 ‒ 2011/09
© SINAP,inc. all rights reserved.! 21!
6%
93%
7%
PC
タッチデバイス
その他
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
スマートフォンからのトラフィック増大
2012/06 ‒ 2013/06
© SINAP,inc. all rights reserved.! 22!
6%
82%
17%
1%
PC
タッチデバイス
その他
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
アクセス解析の数字
弊社管理のとあるコンテンツ配信
サービスサイトの場合
© SINAP,inc. all rights reserved.! 23!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
スマートフォンからのトラフィック増大
2010/09 ‒ 2011/09
© SINAP,inc. all rights reserved.! 24!
6%
91%
6%
3%
PC
タッチデバイス
その他
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
スマートフォンからのトラフィック増大
2012/06 ‒ 2013/06
© SINAP,inc. all rights reserved.! 25!
6%
41%
57%
2%
PC
タッチデバイス
その他
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
スマートフォンからのトラフィック増大
2012/06 ‒ 2013/06 (Twitterからの流入)
© SINAP,inc. all rights reserved.! 26!
6%
25%
74%
1%
PC
タッチデバイス
その他
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
半分超えてます!!!
© SINAP,inc. all rights reserved.! 27!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
Twitterなどの流入に限ってはこのサイト 7割超え!!!
© SINAP,inc. all rights reserved.! 28!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
マルチデバイス対応の背景
事実
昨年以降シナップの新規案件は スマートフォン対応
全部してます
© SINAP,inc. all rights reserved.! 29!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
PowerCMSを利用して ワンソース・マルチユース
© SINAP,inc. all rights reserved.! 30!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
レスポンシブデザインと言う選択
CSS3のメディアクエリという技術を利用し、同じHTMLに解像度ごとに別のスタイルをあてて、マルチデバイス対応。
© SINAP,inc. all rights reserved.! 31!
ブレイクポイント ブレイクポイント
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
© SINAP,inc. all rights reserved.! 32!
一つのHTMLで複数デバイス対応 -運用コスト削減 -開発コストも削減
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
でも。。。実際には
© SINAP,inc. all rights reserved.! 33!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
レスポンシブデザインと言う選択
各ブレイクポイントで、独自のCSSやJSを読み込む
© SINAP,inc. all rights reserved.! 34!
ブレイクポイント ブレイクポイント
tablet.js
tablet.css sp.js
sp.css
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
増えていく個別CSS,JavaScript
-PCと同じHTMLで見た目を整えるため、CSSが複雑に
-HTML最適化用のJS
-大きな画像や表示しない画像を読み込んでたり
-本当はやりたいけど、技術的に出来なかったり
思ったほどコスト削減できなかったり、やりたいことが出来ないこともある。
© SINAP,inc. all rights reserved.! 35!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
ならCMSを使って。。。
© SINAP,inc. all rights reserved.! 36!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
CMS内のデータを利用して、PC,タッチデバイス用のHTMLを別々に書きだす。
PowerCMSを利用してワンソース・マルチユース
© SINAP,inc. all rights reserved.! 37!
PC用のHTML タッチデバイス用のHTML
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
こうすると
-コンテンツはCMSのデータとして一元管理できる
-個別のHTMLなので、それぞれのデバイスに最適化できる
-余計なJSや複雑なCSSは必要ない
PowerCMSを利用してワンソース・マルチユース
© SINAP,inc. all rights reserved.! 38!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
その中でもPowerCMSは
© SINAP,inc. all rights reserved.! 39!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
PCとタッチデバイスなど複数のデバイスに向けて表示わけをする機能を予め持ってます!
© SINAP,inc. all rights reserved.! 40!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
© SINAP,inc. all rights reserved.! 41!
その他にも
-GoogleAnalyticsと連携して人気コンテンツを表示したり -CSVを使ってコンテンツを一括投入したり
-会員専用サイトの機能があったり
-カスタムフィールドを拡張してあったり
-バナーを管理して、コンバージョンを計算したり
-運用側の管理画面も使いやすかったり
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
PowerCMSを利用してワンソース・マルチユース
© SINAP,inc. all rights reserved.! 42!
そして更に!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
© SINAP,inc. all rights reserved.! 43!
ものすごく提案しやすい価格!!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
シナップのマルチデバイス対応の手法
シナップのマルチデバイス対応の手法
© SINAP,inc. all rights reserved.! 44!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
シナップのマルチデバイス対応の手法
l DynamicMTML を使った方法
l 静的 + mod_rewrite を使った方法
© SINAP,inc. all rights reserved.! 45!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
シナップのマルチデバイス対応の手法
どちらの方法でも
l MovableType/PowerCMSによるコンテンツの一元管理
l デバイスに最適化されたコンテンツを提供
l どのデバイスでもURLに差がないスマートなアクセス
が大前提!
© SINAP,inc. all rights reserved.! 46!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
シナップのマルチデバイス対応の手法
どちらの方法にも特徴があり、お客様のサイトの性格に合わせて柔軟にご提案させて頂いています。
© SINAP,inc. all rights reserved.! 47!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
シナップのマルチデバイス対応の手法
それぞれの対応方法の比較
© SINAP,inc. all rights reserved.! 48!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTML と 静的+mod_rewriteの比較
DynamicMTML 静的 + mod_rewrite ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
© SINAP,inc. all rights reserved.! 49!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTML と 静的+mod_rewriteの比較
DynamicMTMLを使った方法について
© SINAP,inc. all rights reserved.! 50!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTMLとは
© SINAP,inc. all rights reserved.! 51!
DB 記事データ
再構築時に 書き出し
l テンプレートの更新時に静的なMTMLテンプレートを出力
l コンテンツ更新時はデータベースのみを更新
l サイトアクセス時にMTMLテンプレートを解析し、必要なデータを最新の状態でデータベースから取得してユーザーに最新状態のコンテンツを提供する
MTML テンプレート
アクセス時にユーザに 最適なコンテンツを生成
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTML使用の場合の特徴 ページ生成のタイミング
l ページアクセス時に生成される ユーザがウェブサイトにアクセスした時に、MTMLテンプレートファイルとコンテンツデータを組み合わせてページを生成してユーザに返します。
© SINAP,inc. all rights reserved.! 52!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
DB 記事データ
再構築時に 書き出し
MTML テンプレート
アクセス時にユーザに 最適なコンテンツを生成
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTML使用の場合の特徴 ユーザエージェント判別
l コンディションタグで行う DynamicMTMLに用意されているコンディションタグを使い判別を行います。このタグはユーザエージェントを判別し、その結果で処理を変える事ができます。
© SINAP,inc. all rights reserved.! 53!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
<MTDynamicMTML> <MTIfUserAgent wants=“SmartPhone”> SP用の記述 <MTElse> PC用の記述 <MTIfUserAgent> </MTDynamicMTML>
DB 記事データ
再構築時に 書き出し
アクセス時にユーザに 最適なコンテンツを生成
MTML テンプレート
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTML使用の場合の特徴 アクセス時のサーバー負荷
l 負荷が高く表示に時間がかかる アクセス時にデータベースからデータを取得するなどの処理があるため、どうしてもサーバーに負荷が発生し、表示に時間がかかる場合もあります。
© SINAP,inc. all rights reserved.! 54!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
DB 記事データ
再構築時に 書き出し
MTML テンプレート
アクセス時にユーザに 最適なコンテンツを生成
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
アクセス時にユーザに 最適なコンテンツを生成
DynamicMTML使用の場合の特徴 更新の反映
l 即座に反映される DynamicMTMLはアクセス時にページ生成を行うので、データベース上のコンテンツ情報が更新された段階でサイトに反映されています。
© SINAP,inc. all rights reserved.! 55!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
DB
再構築時に 書き出し
MTML テンプレート
記事データ
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
アクセス時にユーザに 最適なコンテンツを生成
DynamicMTML使用の場合の特徴 再構築のタイミング
l テンプレート更新時 テンプレートデータ更新時に静的ファイルとなるMTMLテンプレートファイルの更新を行う必要があります。
© SINAP,inc. all rights reserved.! 56!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
DB 記事データ
再構築時に 書き出し
MTML テンプレート
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
アクセス時にユーザに 最適なコンテンツを生成
DynamicMTML使用の場合の特徴 再構築時間
l 短い DynamicMTMLではMTMLテンプレートファイルのみを出力するので、再構築に必要な時間は短いです。コンテンツの量は再構築時間に殆ど影響を与えません。
© SINAP,inc. all rights reserved.! 57!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
DB 記事データ
再構築時に 書き出し
MTML テンプレート
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
DynamicMTML と 静的+mod_rewriteの比較
静的+mod_rewrite使った方法について
© SINAP,inc. all rights reserved.! 58!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
補足:mod_rewriteって?
l mod_rewrite
WebサーバApacheのモジュール、URLリダイレクトを行うモジュール。
© SINAP,inc. all rights reserved.! 59!
mod_rewrite
移転コンテンツだったので、移転先piyo.htmlにリダイレクト
/hoge.htmlへアクセス
URLリダイレクト
/piyo.htmlへ移転したことを通知
/piyo.htmlへアクセス
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
補足:mod_rewriteって?
l mod_rewrite
WebサーバApacheのモジュール、URLリダイレクトを行うモジュール。
© SINAP,inc. all rights reserved.! 60!
パソコンからのアクセス /hoge.htmlを表示
/sp/hoge.htmlの内容を 表示
mod_rewrite
/hoge.htmlへアクセス
UAによる表示わけ
ブラウザから見たURLは同じだが、内部的にリダイレクト
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的 + mod_rewrite
l 予めマルチデバイスに最適化されたコンテンツを出力する
l サイト閲覧時にmod_rewriteを使ってユーザエージェントから端末を判別し、それぞれの端末に最適化されたコンテンツをユーザーに提供する
© SINAP,inc. all rights reserved.! 61!
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォン用 コンテンツ
PC用コンテンツ
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
予めマルチデバイスに 最適化されたコンテンツを出力
パソコンからのアクセスであれば、 要求どおりのファイルを返す
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的+mod_rewriteの場合の特徴 ページ生成のタイミング
l 再構築時に生成される ユーザがウェブサイトにアクセスした時に、MTMLテンプレートファイルとコンテンツデータを組み合わせてページを生成してユーザに返します。
© SINAP,inc. all rights reserved.! 62!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォン用 コンテンツ
PC用コンテンツ
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
パソコンからのアクセスであれば、 要求どおりのファイルを返す
予めマルチデバイスに 最適化された コンテンツを出力
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的+mod_rewriteの場合の特徴 ユーザエージェントの判別
l mod_rewrite ユーザがウェブサイトにアクセスした時に、Webサーバ上のmod_rewriteによってユーザエージェントを判別します。
© SINAP,inc. all rights reserved.! 63!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
スマートフォン用 コンテンツ
PC用コンテンツ 予めマルチデバイスに 最適化された コンテンツを出力
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
パソコンからのアクセスであれば、 要求どおりのファイルを返す
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的+mod_rewriteの場合の特徴 アクセス時のサーバ負荷
l 負荷なくスムーズに表示 予め用意されているHTMLファイルを返すだけなのでサーバの負荷は低く、スムーズにサイトを表示することができます。
© SINAP,inc. all rights reserved.! 64!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
スマートフォン用 コンテンツ
PC用コンテンツ 予めマルチデバイスに 最適化された コンテンツを出力
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
パソコンからのアクセスであれば、 要求どおりのファイルを返す
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的+mod_rewriteの場合の特徴 更新時の反映
l 再構築が必要 静的出力の場合は再構築をしてようやく出力ファイルが更新されますので、コンテンツ等を更新した際には再構築を行うまではサイトに更新が反映されません。
© SINAP,inc. all rights reserved.! 65!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォン用 コンテンツ
PC用コンテンツ
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
パソコンからのアクセスであれば、 要求どおりのファイルを返す
予めマルチデバイスに 最適化された コンテンツを出力
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的+mod_rewriteの場合の特徴 再構築のタイミング
l コンテンツ更新時 静的出力の場合はコンテンツの更新を行う度に再構築を行う必要があります。
© SINAP,inc. all rights reserved.! 66!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォン用 コンテンツ
PC用コンテンツ
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
パソコンからのアクセスであれば、 要求どおりのファイルを返す
予めマルチデバイスに 最適化された コンテンツを出力
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
静的+mod_rewriteの場合の特徴 再構築時間
l 長い サイトの規模、コンテンツの量、対応するデバイス種の数に比例して再構築にかかる時間が伸びます。
© SINAP,inc. all rights reserved.! 67!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
Webサーバ
UAを見てアクセス端末を判別
mod_rewrite
スマートフォン用 コンテンツ
PC用コンテンツ
スマートフォンからの アクセスであれば、 サーバ内部でリダイレクト
パソコンからのアクセスであれば、 要求どおりのファイルを返す
予めマルチデバイスに 最適化された コンテンツを出力
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
気になる所
DynamicMTML 静的 + mod_rewrite ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
© SINAP,inc. all rights reserved.! 68!
イケてない所を良くするのも私達のお仕事!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
シナップでは併せてこんな事もしてます (一例)
l 野田さんが公開しているキャッシュプラグインを導入して負荷を軽減し、サイト表示を早くする
l 再構築トリガーを利用し更新時に必要な部分の更新を一気に再構築するようにする
l 再利用性の高いパーツをインクルード用のファイルに切り分ける
© SINAP,inc. all rights reserved.! 69!
DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介
事例紹介
© SINAP,inc. all rights reserved.! 70!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-Anifav
© SINAP,inc. all rights reserved.! 71!
Anifav
(http://anifav.com) DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要
再構築のタイミング テンプレート更新時 コンテンツ更新時
再構築時間 短い 長い
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential © SINAP,inc. all rights reserved.! 72!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential © SINAP,inc. all rights reserved.! 73!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-Anifav
© SINAP,inc. all rights reserved.! 74!
月に150本アニメのレビューや、最新情報を更新
DynamicMTML 静的 + mod_rewrite ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-Anifav
© SINAP,inc. all rights reserved.! 75!
独自のユーザー投票による、ランキング表示。
DynamicMTML 静的 + mod_rewrite ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-Anifav
© SINAP,inc. all rights reserved.! 76!
バナー出稿によるビジネスモデル
→PowerCMSの「Campaign」プラグインを利用
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-ジセダイ
© SINAP,inc. all rights reserved.! 77!
ジセダイ
(http://ji-sedai.jp) DynamicMTML 静的 + mod_rewrite
ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要
再構築のタイミング テンプレート更新時 コンテンツ更新時
再構築時間 短い 長い
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential © SINAP,inc. all rights reserved.! 78!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential © SINAP,inc. all rights reserved.! 79!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-ジセダイ
© SINAP,inc. all rights reserved.! 80!
ジセダイジェネレーションズ U-25 25才以下ジセダイの才能へのインタビュー。若い世代へ刺激を与える
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-ジセダイ
© SINAP,inc. all rights reserved.! 81!
ザ・ジセダイ教官 知は最高学府にある ジセダイの大学教官へのインタビュー記事。知の最前線に触れることできる。
DynamicMTML 静的 + mod_rewrite ページ生成の タイミング アクセス時 再構築時
UA判別 DynamicMTMLの コンディションタグ mod_rewrite
アクセス時の サーバー負荷 高い 低い
更新時の反映 即時に反映 再構築が必要 再構築のタイミング テンプレート更新時 コンテンツ更新時 再構築時間 短い 長い
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
事例紹介-ジセダイ
© SINAP,inc. all rights reserved.! 82!
イベント開催 毎月、ジセダイへむけたリアルイベントを開催
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
まとめ
© SINAP,inc. all rights reserved.! 83!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
複雑なコンテンツには、 CMSを利用して各デバイスごとにHTMLを書き出すほうがいい。
© SINAP,inc. all rights reserved.! 84!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
PowerCMSは機能的にも、価格的にも採用しやすい。
© SINAP,inc. all rights reserved.! 85!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
アルファサードさん。 これからもよろしくおねがいします。
© SINAP,inc. all rights reserved.! 86!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
次は20周年ですね!!! シナップも頑張ります!!!
© SINAP,inc. all rights reserved.! 87!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
ご静聴ありがとうございました!!
© SINAP,inc. all rights reserved.! 88!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
最後に
© SINAP,inc. all rights reserved.! 89!
あ、あの最後にいいですか、、、
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
最後に
© SINAP,inc. all rights reserved.! 90!
SINAPではWebアプリケーションエンジニアを募集しています
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
最後に
© SINAP,inc. all rights reserved.! 91!
募集要項
l 現在プログラマーだけどインフラ構築・運用も勉強してみたい方
l インフラもプログラムも出来る方
-CMSの導入、カスタマイズ
-MovableTypeのプラグイン作成
-iPhone、Androidアプリ開発
を僕達と一緒にやりましょう!!!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
© SINAP,inc. all rights reserved.! 92!
応募は
-SINAPオフィシャルサイト
http://sinap.jp/
-Wantedly
https://www.wantedly.com/ -僕に直接とか!!!
グリーエンターテインメントプロダクツ様 コーポレートサイト構築 ご提案資料
confidential confidential
まとめ
本当に終わりです!!
ご静聴ありがとうございました。
© SINAP,inc. all rights reserved.! 93!