Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Facebook対応と大規模サイト移転のトライ＆エラー
Similaire à Facebook対応と大規模サイト移転のトライ＆エラー (20)
Plus de Garyuten
Plus de Garyuten (14)
Facebook対応と大規模サイト移転のトライ＆エラー
- 1. FFaacceebbooookk対殴 �Βゼ&&ダΒ【 武雄市役所ヱ【�ヰ【バよFFaacceebbooookk遺行づァ 嬰用�めよヴΔ秘パ�【Γ【 CGFM LLC. 金内 透 ¦ DIGITAL STREAM FUKUOKA Vol.1福岡校 ¦ 2012.1.19
- 3. 金内 透 ( かねうち とおる ） • 1975年生 36才 福岡市在住 • Blog http://blog.cgfm.jp/garyu/ • 合同会社CGFM 代表社員 @Garyuten • 職業：マークアップエンジニア • 相方デザイナー(カネウチカズコ) の2人 SOHOスタイルで仕事中
- 4. カネウチカズコ
- 5. アウトライン 1. サイトの調査 2. 制作体制 3. Facebook対応 4. サイト移転対応 5. その他
- 6. 1.サイトの調査
- 8. ツールで自動収集 Website Exploer
- 9. Excelで まさかの 3000行超 整理しても2000行超
- 10. A3印刷で 64ページ
- 11. Movable Type で動いてるサイト Wordpressで動いているサイト 単独の静的サイト 独自のPHPが書かれてるページ etc...
- 12. 2.制作体制
- 13. 武雄市 Facebook係 SIIIS 実制作部隊 CGFM Parachute ・画面設計、デザイン ・ベースマークアップ ・サイト設計 (技術検証） ・CSS設計 ・CMS移転対応 ・個別サイト移転対応
- 15. 2.Facebook対応
- 18. iframe
- 19. 武雄市 iframe webサーバー
- 20. iframeのセキュリティ XSS・ブラウザの仕様
- 21. URLの参照すら 不可能 (変更も不可能) 呼び出し元 (Facebook) iframe iframeの枠の 大きさ変更は Facebook側の JSで可能 参照元も取得不可 (Facebook側の対策)
- 22. 高さ800px以上は スクロールバーが表示される iframe max 800px
- 23. Facebook提供のJavaScript ▼iframeで呼び出すHTMLに記述 <script type="text/javascript" src="http:// connect.facebook.net/en_US/all.js"></script> ▼jQueryで記述 $(window).load(function(){ FB.Canvas.setAutoResize(); var pageHeight = $(document).height(); //ページの高さの取得 FB.Canvas.setSize({ //iframeのCanvasのサイズを調整 width: 520, height: pageHeight+200 }); //200px余白 }
- 24. iframe or 単体表示？ 表示内容を切替
- 25. iframe時のみ専用CSSで非表示に 単体表示では表示
- 26. JavaScriptで判別 //iframeで表示されているか判別 if( window.top.frames.length >= 1 && window.parent != window.self ){ //Facebook専用CSSを読み込む " document.write('<link rel="stylesheet" type="text/css" href="/resource/css/facebook.css" media="screen" charset="UTF-8" /> '); //その他独自の処理（スクロール非表示等） }
- 27. リダイレクト対策
- 29. 30秒後に自動でClose どちらを選択したかはCookieに保持
- 30. Facebookのアプリ登録 実際にブラウザの方でお見せします
- 31. 3.サイト移転対応
- 32. URLの保全 （リンク切れ対策）
- 33. 武雄市webサーバー /www/ /www_fb/ ＝制作環境 個別サイト群 個別サイト群 MovableType MovableType
- 34. 武雄市webサーバー /www/ /www_fb/ ＝制作環境 個別サイト群 個別サイト群 MovableType MovableType
- 35. 武雄市webサーバー /www/ /www_fb/ ＝制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群 MovableType MovableType
- 36. 武雄市webサーバー /www/ /www_fb/ ＝制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群 MovableType MovableType
- 37. 武雄市webサーバー /www/ /www_fb/ ＝制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群 MovableType MovableType ブログの複製 テンプレートの修正
- 38. 武雄市webサーバー /www/ /www_fb/ ＝制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群 MovableType MovableType ブログの複製 テンプレートの修正
- 39. 武雄市webサーバー ディレクトリは全て維持 移転予定日に設定変更 /www/ /www_fb/ ＝制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群 MovableType MovableType ブログの複製 テンプレートの修正
- 41. .httaccess で設定 ★超重要 (地味に見えるけど） # 全PHPで共通のPHPファイルを読み込む php_value auto_prepend_file "/xxx/resource/lib/common.php" # .htmlをPHPとして動作せる AddType application/x-httpd-php .htm .html
- 43. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数
- 44. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head>
- 45. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー
- 46. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー gnav.php グローバルナビ
- 47. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー gnav.php グローバルナビ footer.php フッター
- 48. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー gnav.php グローバルナビ footer.php フッター banner_list.php バナー関係
- 49. CMSにも共通ファイル MovableType 個別サイト群 静的HTMLを出力 PHP include 共通パーツ .html .html PHP include common.php (php) (php) head.php header.php PHPとして動作 .html gnav.php .html (php) 共通部分の修正で footer.php (php) 再構築が不要に banner_list.php
- 50. その他
- 51. 制作している最中に Facebookの仕様が変わる アプリ登録の画面とか手順が変わったり…
- 53. 「いいね！」「コメント」 の実験をうかつにできなかった サーチエンジンにクロールされない対策しつつ 開発環境にアクセス制限をかけない
- 55. 公開3日前の記者発表 サーバーが激重に ダメージ大 Yahoo!ニュースって凄いですね
- 57. ありがとうございました @Garyuten