Facebook対応と大規模サイト移転のトライ&エラー

4,452 views

Published on

DIGITAL STREAM FUKUOKA Vol.1福岡校 で話したスライド

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,452
On SlideShare
0
From Embeds
0
Number of Embeds
1,587
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Facebook対応と大規模サイト移転のトライ&エラー

  1. 1. FFaacceebbooookk対殴 �Βゼ&&ダΒ【 武雄市役所ヱ【�ヰ【バよFFaacceebbooookk遺行づァ 嬰用�めよヴΔ秘パ�【Γ【CGFM LLC. 金内 透 ¦ DIGITAL STREAM FUKUOKA Vol.1福岡校 ¦ 2012.1.19
  2. 2. 自己紹介@Garyuten
  3. 3. 金内 透 ( かねうち とおる ) • 1975年生 36才 福岡市在住 • Blog http://blog.cgfm.jp/garyu/ • 合同会社CGFM 代表社員@Garyuten • 職業:マークアップエンジニア • 相方デザイナー(カネウチカズコ) の2人 SOHOスタイルで仕事中
  4. 4. カネウチカズコ
  5. 5. アウトライン1. サイトの調査2. 制作体制3. Facebook対応4. サイト移転対応5. その他
  6. 6. 1.サイトの調査
  7. 7. 移転対象を明確にするため全てのリンクをチェック
  8. 8. ツールで自動収集 Website Exploer
  9. 9. Excelで まさかの3000行超 整理しても2000行超
  10. 10. A3印刷で 64ページ
  11. 11. Movable Type で動いてるサイトWordpressで動いているサイト 単独の静的サイト独自のPHPが書かれてるページ etc...
  12. 12. 2.制作体制
  13. 13. 武雄市 Facebook係 SIIIS 実制作部隊 CGFM Parachute・画面設計、デザイン ・ベースマークアップ・サイト設計 (技術検証) ・CSS設計・CMS移転対応 ・個別サイト移転対応
  14. 14. 制作・タスク管理は 全てBacklog上で wikiにFacebookアプリ関係のマニュアルを残す等
  15. 15. 2.Facebook対応
  16. 16. Facebook化はフレーム (iframe)との戦い
  17. 17. iframe
  18. 18. 武雄市iframe webサーバー
  19. 19. iframeのセキュリティ XSS・ブラウザの仕様
  20. 20. URLの参照すら 不可能 (変更も不可能)呼び出し元(Facebook) iframe iframeの枠の 大きさ変更は Facebook側の JSで可能 参照元も取得不可 (Facebook側の対策)
  21. 21. 高さ800px以上は スクロールバーが表示される iframe max800px
  22. 22. 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余白}
  23. 23. iframe or 単体表示? 表示内容を切替
  24. 24. iframe時のみ専用CSSで非表示に 単体表示では表示
  25. 25. 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" /> ); //その他独自の処理(スクロール非表示等)}
  26. 26. リダイレクト対策
  27. 27. どちらを選択したかはCookieに保持
  28. 28. 30秒後に自動でClose どちらを選択したかはCookieに保持
  29. 29. Facebookのアプリ登録 実際にブラウザの方でお見せします
  30. 30. 3.サイト移転対応
  31. 31. URLの保全(リンク切れ対策)
  32. 32. 武雄市webサーバー /www/ /www_fb/ =制作環境 個別サイト群 個別サイト群MovableType MovableType
  33. 33. 武雄市webサーバー /www/ /www_fb/ =制作環境 個別サイト群 個別サイト群MovableType MovableType
  34. 34. 武雄市webサーバー /www/ /www_fb/ =制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群MovableType MovableType
  35. 35. 武雄市webサーバー /www/ /www_fb/ =制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群MovableType MovableType
  36. 36. 武雄市webサーバー /www/ /www_fb/ =制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群MovableType MovableType ブログの複製 テンプレートの修正
  37. 37. 武雄市webサーバー /www/ /www_fb/ =制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群MovableType MovableType ブログの複製 テンプレートの修正
  38. 38. 武雄市webサーバー ディレクトリは全て維持 移転予定日に設定変更 /www/ /www_fb/ =制作環境 フォーマットの統一 個別サイト群 HTMLの修正 個別サイト群MovableType MovableType ブログの複製 テンプレートの修正
  39. 39. .htmlで PHPを動かす必要性
  40. 40. .httaccess で設定 ★超重要(地味に見えるけど) # 全PHPで共通のPHPファイルを読み込む php_value auto_prepend_file "/xxx/resource/lib/common.php" # .htmlをPHPとして動作せる AddType application/x-httpd-php .htm .html
  41. 41. PHPのinlude=外部ファイルの読込
  42. 42. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数
  43. 43. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head>
  44. 44. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー
  45. 45. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー gnav.phpグローバルナビ
  46. 46. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー gnav.phpグローバルナビ footer.php フッター
  47. 47. PHPのinlude=外部ファイルの読込 common.php 各種設定・共通関数 head.php <head> </head> header.php ページヘッダー gnav.phpグローバルナビ footer.php フッター banner_list.php バナー関係
  48. 48. 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
  49. 49. その他
  50. 50. 制作している最中にFacebookの仕様が変わる アプリ登録の画面とか手順が変わったり…
  51. 51. マニュアル準備中に画面デザインが変わる スクリーンショットを何度も撮り直す
  52. 52. 「いいね!」「コメント」の実験をうかつにできなかった サーチエンジンにクロールされない対策しつつ 開発環境にアクセス制限をかけない
  53. 53. 「一瞬だけなら…」シェアされてしまう 速攻で「消してください<(_ _)>」メッセージ
  54. 54. 公開3日前の記者発表サーバーが激重に ダメージ大 Yahoo!ニュースって凄いですね
  55. 55. 他にもいろいろありましたがこの辺で
  56. 56. ありがとうございました @Garyuten

×