drupal で多言語 - webgogo ·...

22
http://www.ostechnology.co.jp/ Drupal で多言語 株式会社アウトソーシングテクノロジー 西尾正博 2017 1 16 1 Drupal で簡単に作れる複数言語対応サイト Drupal is a registered trademark of Dries Buytaert .

Upload: others

Post on 05-Feb-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

http://www.ostechnology.co.jp/

Drupal で多言語

株式会社アウトソーシングテクノロジー

西尾正博

2017 年 1 月 16 日

1

Drupal で簡単に作れる複数言語対応サイト

Drupal is a registered trademark of Dries Buytaert.

Page 2: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

Drupal とは

オープンソースの Web CMS・Web アプリケーション フレームワーク。 2000 年にベルギーで誕生。現在は世界各国で開発・利用されている。大規模なシステムの構築に適しているため、多数の世界的な Web サイトで採用されている。

2

国連 米ホワイトハウス フランス政府 NASA

General Electric Tesla Motors SoftLayer(Bluemix) Box

ハーバード大学 ケンブリッジ大学 オックスフォード大学 ルーヴル美術館

Page 3: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

Drupal の普及率

現在、全世界の Web サイトのうち 2.2% が Drupal で稼働中。

Web サイト用コンテンツ マネージメント システムの利用傾向推移Historical trends in the usage of content management systems for websites

出典:W3Techs

3

20111 Jan

20121 Jan

20131 Jan

20141 Jan

20151 Jan

20161 Jan

20171 Jan

None 76.4% 71.0% 68.2% 64.8% 61.7% 56.6% 53.3%

Word-Press 13.1% 15.8% 17.4% 21.0% 23.3% 25.6% 27.3%

Joomla 2.6% 2.8% 2.8% 3.3% 3.3% 3.3% 3.4%

Drupal 1.4% 1.9% 2.3% 1.9% 2.0% 2.1% 2.2%

Page 4: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

Drupal の特徴

大衆向けではなく、ビジネス用に設計されている。

豊富な部品を LEGO ブロックのように組み合わせ、効率よくシステムを構築できる。

拡張性が高く、大規模システム、トラフィック量の多いサイトに適している。

標準インストールだけで多言語サイトを構築できる。

モバイル優先設計。標準で HTML5 を出力。

外部システムとの連携が得意。

セキュリティーが堅固。

4

Market position :W3Techs

Page 5: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

セキュリティー統計

5

感染した Web サイト プラットフォームの分布 (2016年 Q1~Q3)

出典:米 Sucuri 社

右の「感染」事例はほとんどの場合、各 CMS のコア自体とはほとんど関係なく、主にデプロイメント、設定および Web マスターによるメンテナンスが不適切だったことから来ているとのこと。

四半期ごとの調査でも、WordPress、Joomla!、Magento の順位と比率は変わっていない。

Page 6: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

Drupal の創始者

ドリース バイテルト(Dries Buytaert)氏1978 年 11 月 ベルギー、アントワープ生まれ。

2000 年、アントワープ大学在学中、学生寮を結んだBBS システムを開発。それがのちに「Drupal」となる。現在は米国在住。38 歳

Drupal アソシエーション 共同設立者 & 会長 Acquia 社 共同設立者 & CTO

2013 年、世界経済フォーラムの「若きグローバル リーダー」(70 カ国から 199 人が選出)に選ばれたほか、企業家・イノベーターとして数々の賞を授与される。http://www.weforum.org/agenda/authors/dries-buytaert

6

Page 7: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

お試しサイトでのインストール – 1/3

https://simplytest.me/

24 時間だけ無料でさまざまな Drupal バージョン、モジュール、テーマを試せる。24 時間が過ぎるとサイトは消失する。場合によっては、ここで試してから Azure 上にサイトを作ると効率的。

7

Page 8: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

お試しサイトでのインストール – 2/3

1. 入力欄に「d」とタイプすると「Drupal core」が表示されるので、それを選択する。

2. Drupal のバージョンを選択する欄が現れるので、通常はいちばん上の最新バージョンを選択する。

3. 選択できたら右側の「Launchsandbox」をクリックする。

8

Page 9: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

お試しサイトでのインストール – 3/3

4. 標準の Drupal 8 インストール開始画面になる。

5. あとは、すべてデフォルト設定のまま進んでいくと、標準のDrupal 8 サイトができあがる。

Drupal の標準インストール手順については検索サイトで「Drupal 8」と「インストール」の両方を使って検索すると、いくつもの解説が見つかる。

9

Page 10: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 1/5

翻訳用のモジュールをオンにする

1. (インストールが完了した状態から)画面上部にあるツールバーの「機能拡張」をクリック。

2. 「拡張」ページのいちばん下、「多言語」グループのモジュールをすべてチェックされた状態にして「インストール」ボタンをクリック。デフォルトでは下の2つは最初からチェックされているはず。

10

Page 11: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 2/5

言語を追加する

3. ツールバー「環境設定」 > 環境設定ページ「言語」をクリック。

「言語」ページが表示される。

4. 「言語を追加」ボタンをクリック。

言語選択リストが表示される。

11

Page 12: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 2/5

5. 希望する言語をリストから選択する。

6. 選択したら「言語を追加」ボタンをクリック。

必要に応じて他の言語も追加する。

日本語をデフォルトとして、英語とドイツ語を追加した状態。

7. 「設定を保存」ボタンをクリック。

12

Page 13: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 3/5

翻訳する要素を指定する

8. ツールバー メニュー「環境設定」 > 環境設定ページ「コンテンツの言語と翻訳」をクリック。

「コンテンツの言語」ページが表示される。

9. 翻訳したい要素を選択する。ここではコンテンツとカスタムメニューリンクを選択。

13

Page 14: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 3/5

10.コンテンツ タイプのなかで翻訳したいフィールドを選択する。

「作成・編集ページに言語セレクターを表示」がチェックされていることを確認。

この例ではすべての項目がチェックされた状態(デフォルト)で続行。

11.「設定を保存」ボタンをクリック。

14

Page 15: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 4/5

コンテンツを作る/翻訳する

12.コンテンツ ページ「コンテンツを追加」ボタンをクリック。

13.作成するコンテンツのタイプを選択する。「コンテンツを追加」ページ

記事:新着情報や告知など、新しい記事を次々と追加していくタイプ。

基本ページ:「About Us」などの静的(固定)なページ。いちど作ったらそのまま置いておくタイプ。ここでは基本ページを選択する。

15

Page 16: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 4/5

14.各欄を入力・設定する。「基本ページの作成」ページ

「リビジョン」を作ると編集セッションごとの変更内容が保存されるので必要に応じて前のバージョンに戻れる。

「メニューリンクを作成」をチェックすると、デフォルトではメイン メニュー(メインナビゲーション)に、その項目が作成される。

「URL エイリアス」を指定しないと、Drupal の標準単位である「ノード」の番号が URL に使用される。また、ページを翻訳すると、その URL にはデフォルトで言語のプレフィックスが付けられる(英語の場合「/en/」)。

15.編集と設定が完了したら「保存して掲載」ボタンをクリック。

16

Page 17: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 4/5

16.「翻訳」タブをクリック。

17.希望する言語の「追加」ボタンをクリック。

17

Page 18: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 4/5

18.日本語ページと同じ要領で各欄の入力・設定を行う。

19.完了したら保存・掲載用のボタンをクリック。

20.必要に応じて他の言語のページも作る。(必要に応じて URL の「/en/」を外してトップページに戻り)ツールバー メニュー「サイト構築」 > 「ブロックレイアウト」をクリック。

18

Page 19: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 5/5

言語スイッチャーをセットする21.「ブロックレイアウト」ページを下へスクロールし、「sidebar first」の行にある「ブロックを配置」をクリック。

22.リスト内「言語スイッチャー」の「ブロックを配置」ボタンをクリック。

別のウィンドウが表示される(次ページ)。

19

Page 20: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 5/5

23.「ディスプレイ・タイトル」ではタイトル(「言語スイッチャー」)を表示させるかどうかを指定する。

24.「言語」欄では言語スイッチャーに表示する言語を設定する。たとえば、Japanese と English だけ選択すれば、その2カ国語でだけ切り替え可能になる。

25.設定できたら「ブロックの保存」ボタンをクリック。

また「ブロックレイアウト」ページが表示される。

20

Page 21: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

簡単な多言語サイトを作る – 5/5

26.必要に応じてサイドバー内での順序をドラッグアンド ドロップで変更する。

27.設定が完了したら「ブロックの保存」ボタンをクリック。

トップページに戻ると、サイドバーに言語スイッチャーが表示されている。

言語スイッチャーをクリックすると、それぞれの言語のコンテンツが表示される。

21

Page 22: Drupal で多言語 - WebGoGo · 18.日本語ページと同じ要領で各欄の入力・設定を行う。 19.完了したら保存・掲載 用のボタンをクリック。 20.必要に応じて他の言語のページも作る。

出典一覧

W3TechsHistorical yearly trends in the usage of content management systems for websiteshttps://w3techs.com/technologies/history_overview/content_management/all/yMarket positionhttps://w3techs.com/technologies/details/cm-drupal/all/all

W3Techs:オーストリア・ウィーンにある Q-Success 社の提供するサービス。調査には米 Alexa 社のデータに基づくトップ 1000 万サイトを使用。Alexa はインターネットデータの計測・解析などを行う Amazon 傘下の会社。

SucuriInfected Websites Platform DistributionSucuri Hacked Websites Trend Report 2016 - Q3https://blog.sucuri.net/2017/01/hacked-website-report-2016q3.html

22