concrete5で制作・運用する多言語ウェブサイト

4,911 views

Published on

関西オープンフォーラム2013で発表した資料です。

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

No Downloads
Views
Total views
4,911
On SlideShare
0
From Embeds
0
Number of Embeds
2,893
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

concrete5で制作・運用する多言語ウェブサイト

  1. 1. concrete5 ∼concrete5で制作・運用する多言語ウェブサイト∼ 関西オープンフォーラム2013 1
  2. 2. concrete5とは? 2
  3. 3. 直感的な操作が画期的な、いま注目のCMSです。 CMS(コンテンツ・マネジメント・システム)とは…HTMLやCSSなどの知識なしで、ウェブサイト(ホームページ)を 構成するページや、ページの中のテキストや画像などのコンテンツを管理するためのシステムです。 3
  4. 4. 直感的な操作 ブラウザからウェブページを見たまま クリックしてすぐ編集できます。 全ての機能を統一された操作感で扱えます。 4
  5. 5. 柔軟な ユーザー管理 ユーザーをグループで自在に管理。 サイトマップの各セクションに 自在に編集権限を設定できます。 上級権限モードではさらに詳細な 承認フローの設計が可能。 5
  6. 6. テーマの作成が カンタン 基本的なテーマの作り方は、HTMLの中に、 concrete5のブロックを配置するための <?php $a = new Area('Main'); $a->display($c); ?> 「エリア」を指定するだけ。 たくさんのテンプレートタグを 覚える必要はもうありません。 公式マーケットプレイスのたくさんの 高クオリティなデザインテーマから ダウンロードすることもできます。 有償テーマは買い切りで、 固定費は発生しません。 6
  7. 7. 無限の拡張性 MVC設計のPHPフレームワーク 業界標準の先進技術を採用 Bootstrap, from Twitter あらゆるウェブアプリケーションが 構築可能な汎用的な設計 動作検証済みのレビューされた 拡張機能を公式マーケットプレイスから 自在にインストールできます。 有償アドオンは買い切りで、 固定費は発生しません。 7
  8. 8. オープンソース The MIT License concrete5は完全なオープンソースです。 無料で利用でき、 あらゆるカスタマイズが可能です。 どんな開発者にでも依頼することができま すし、どこかの大企業によってライセンス された特別なコンサルタントを通さなけれ ばならない、ということもありません。 8
  9. 9. 歴史 • 2003 concrete CMS v.1 アメリカで産まれる • 2009 有志による日本語バージ ョン提供開始 当初は商用CMS • 2008 • 2013 バージョン5.6.2.1リリース concrete5 オープンソース化 9
  10. 10. 主な機能 • 公開承認フロー • ブログ • グループ権限管理 • 問い合わせフォーム • 期間指定公開 • アンケート / ゲストブック • 各ページごとのバージョン管理 • 新着情報 / ナビゲーション自動生成 • サイトマップ管理 • サイト内検索 • WYSIWYGエディタ(TinyMCE) • テーマのインストール / 切り替え • ファイルマネージャー • バックアップ&リストア • アクセス解析 • 会員制サイト構築 • RSS出力 • 多言語サイト構築 concrete5標準機能の一部です。公式マーケットプレイスからさらにたくさんの機能がダウンロードできます。 10
  11. 11. 多言語ウェブサイトとは? 11
  12. 12. 多言語ウェブサイト • ひとつのウェブサイトの中に複数の言語のコンテンツ があること • 「同一または類似の内容を複数の言語に翻訳したウェ ブサイトのこと。」Wikipedia 12
  13. 13. 多言語対応のパターン • 一部分のみ(サイドバーの連絡先だけ英語併記など) • 各言語併記(段落ごとに日英並べて書くなど) • 各言語別サイト(言語ごとにウェブサイトを作る) • 同一サイト言語切り替え 13
  14. 14. 多言語ウェブサイトの 管理・更新 14
  15. 15. コンテンツマッピング • サイト内に複数の言語のページを作成する • ある言語で書かれたページから同じ内容の別の言語の ページを関連づける→言語切り替え機能 • 関連づけなくても、URLのルールでよいのでは?→必 ずしもすべてのページですべての言語が っていない ことが多い 15
  16. 16. コンテンツの翻訳 • ある言語で書かれたページをもとに別の言語のページ を作成する • 自動翻訳ではまだまだ足りない(正確性の低さ、地域 ごとの表現の特性などは自動ではカバーできない) 16
  17. 17. インターフェースの翻訳 • 表示されるコンテンツの言語とインターフェースの言 語を合わせる • ナビゲーション、フォームのエラーメッセージetc. 17
  18. 18. ページの言語を明確に • lang属性の様なコードレベルでの自己申告では検索エン ジンに認識されない。 • 各ページのコンテンツとナビゲーションは1つの言語 を使用し、原文と訳文の併記は避ける • コンテンツの大部分が未翻訳だと重複コンテンツとみ なされる Google Webマスターヘルプ https://support.google.com/webmasters/answer/182192 18
  19. 19. 言語切り替え機能 • 別の言語で同じ内容のページが存在することを分かり やすくする • ユーザー環境によってリダイレクトを強制しない(他 の言語のコンテンツを見たい場合もある) Google Webマスターヘルプ https://support.google.com/webmasters/answer/182192 19
  20. 20. 多言語ウェブサイトの SEO 20
  21. 21. URL • サブドメインやサブディレクトリでgTLD(一般トップレベルド メイン)を使って言語を明示する http://ja.example.com/kof_2013.html http://www.example.com/ja/kof_2013.html ←楽で安価 • ccTLDs(国別コードトップレベルドメイン名)で分ける example.com example.co.jp example.co.uk • パラメーター式(?lang=jp)は非推奨 Google Webマスターヘルプ https://support.google.com/webmasters/answer/182192 21
  22. 22. メタタグで他言語ページを明示 • 各ページのメタタグで、対応する他の言語のページの 存在を明示する • 検索結果に表示されたページとユーザーの言語が違う 場合、検索エンジンがユーザーに適した言語のページ に誘導させることができる Google Webマスターヘルプ https://support.google.com/webmasters/answer/189077 22
  23. 23. 他言語メタタグの例 <link rel="alternate" hreflang="x-default" href="http:// www.example.com/" /> <link rel="alternate" hreflang="en-gb" href="http://engb.example.com/page.html" /> <link rel="alternate" hreflang="en-us" href="http://enus.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http:// en.example.com/page.html" /> <link rel="alternate" hreflang="ja" href="http:// ja.example.com/seite.html" /> Google Webマスターヘルプ https://support.google.com/webmasters/answer/189077 23
  24. 24. sitemap.xmlで他言語ページを明示 • 検索エンジンに、複数のページが言語違いの同じコン テンツであることを伝える • 多言語サイト内のページを効率的に検索エンジンにク ロールさせる Google Webマスターヘルプ https://support.google.com/webmasters/answer/2620865 24
  25. 25. アドオン “Internationalization” (無料) 25
  26. 26. 言語ツリーの作成 • サイトマップの一部を、言語のトップページとして指定 ( /ja/ を 日本語トップページとする など) 26
  27. 27. 言語ツリーのコピー • ある言語ツリー内のページを別の言語ツリーに複製す る • コピーしてから、コンテンツを翻訳していく 27
  28. 28. 規定の言語 • 主となる言語を選択 • ビジターがルートページ( /ja/ や /en/ ではなく / )にア クセスした時に規定の言語にリダイレクトする(しな い場合は入り口ページとして使える) 28
  29. 29. コンテンツマッピング • ページごとの言語マッピングの設定、解除 29
  30. 30. アドオン “Translation Manager” (30ドル) 30
  31. 31. 翻訳管理 • インターフェースの翻訳を管理画面から行なえる • コアの翻訳の調整、テーマ、アドオンの翻訳 31
  32. 32. テーマ制作のTips 32
  33. 33. 言語で分岐する • Internationalizationアドオンに付属の sectionヘルパーを使う $sh = Loader::helper('section', 'multilingual'); if ($sh->getLanguage() == "ja_JP") { // なんか処理 } else { // なんか処理 } 33
  34. 34. 言語ごとに自動でエリアを分ける • 英語だと「Global Nav」日本語だと「Global Nav Ja JP」 $a = new GlobalArea(‘Global Nav’); $a->display(); ↓ $mt = Loader::helper('multilingual_text'); $a = new GlobalArea( $mt->getMultilingualAreaName('Global Nav') ); $a->display(); multilingual_text helper のダウンロード: https://gist.github.com/hissy/7396557 34
  35. 35. テキストを翻訳可能にする • t()関数でテキストを囲むと、表示ページの言語に翻訳 可能になる echo t(‘Menu’); 35
  36. 36. 日付書式 • ニュース一覧など。なるべくローカライズ用の日付書 式設定を使おう(「2013-11-09」実は日本ぽい書式) $dh = Loader::helper('date'); $date = $dh->date(DATE_APP_GENERIC_MDY_FULL, strtotime($timestamp)); DATE_APP_GENERIC_MDYT_FULL (年月日時間) DATE_APP_GENERIC_MDYT_FULL_SECONDS (年月日時間秒) DATE_APP_GENERIC_MDYT (年月日時間簡易) DATE_APP_GENERIC_MDY (年月日) DATE_APP_GENERIC_T (時間) DATE_APP_GENERIC_TS (時間秒) 36
  37. 37. できれば実際に見てもらう • 色々技術情報はありますが、できるだけ最後は現地の ひとに見てもらいましょう! • 多言語サイト構築は、構築後の運用も重要です。ユー ザーの利益を最優先に考えたいですね。 37
  38. 38. 今後の課題 38
  39. 39. 技術的な課題 • lang属性値が変わらない (Googleは見ないと言っているがやはり仕様上は変わ ってほしい…) • 属性(タグ)やグループ名など、すべてのconcrete5で 管理する要素を翻訳表示できるようにしていく 39
  40. 40. どんどん開発に参加しよう! • Internationalizationアドオンの開発、concrete5の多言語対 応の改善は、GitHub上でオープンに行なわれている • 特に多言語分野はアメリカのコアチームより世界のコ ミュニティの発言力が強い • よりよい多言語対応のために、 どんどんプルリクエストを送ろう! 40
  41. 41. 多言語サイトは楽しい! 41

×