DrupalのサイトをHugoに移植するまでの手順 メール投稿システムの解説

1. Drupal補完計画
あるいは
脆弱性虐殺器官
Static Site Generator
2017-03-17 at Drupal Cafe Osaka 55
刀祢邦芳(Tone, Kuniyoshi)

2. 自己紹介
● 仕事でつかうもの
○ Tableau
○ Power BI
○ Pentaho (Spoon)
○ システム監視ツール
■ SolarWinds, Veeam ONE, Zabbix, PRTG, OpManager etc.
○ PHPRunner
○ WinAutomation
● 言語/フレームワーク（順不同）
○ Powershell
○ JavaScript(Node.js)
○ Meteor, React, Riot
○ COBOL, FORTRAN, PL/1
○ マクロ・アセンブラ（6502, System/370）
● これから勉強したい
○ Azure ML Studio
○ Xamarin
○ Python for Machine Learning
○ Elixir + Phoenix
2

3. CMS遍歴
● HTML editor + FTP
● Zope (Plone)
● Nucleus
● Xoops
● WordPress
● Drupal
● Gatsby
● Pulse CMS
● Hugo
3

4. Drupalは最強！
● 多言語対応
● マルチユーザ対応
● 自在で多様なレイアウト
● ViewsとDisplay Suite使えば怖いものなし
● 全文検索
● タクソノミー
● 大抵のことはモジュールでできる
4

5. 頑張ってDrupalで掲示板を作った
● 多言語対応
○ 日本語のみ
● マルチユーザ対応
○ 殆どの人がゲストアカウントで閲覧のみ
● 自在で多様なレイアウト
○ シンプルなレイアウトのみ使った
● ViewsとDisplay Suite使えば怖いものなし
○ メンバー名簿は頑張ってViewsで作った
■ でもGoogle Spreadsheetでもいいかも・・・
● 大抵のことはモジュールでできる
○ OG Mailinglistはちょっと大変だった
● タクソノミー＆全文検索
○ あまり使っていない 5

6. でも、管理が大変
● セキュリティアップデートやらなきゃ・・
● バックアップもきっちりと
● yum updateも忘れずに
● LinuxのVPS
○ 万一の時は誰にも引き継げないかも！！
● 頑張って導入したOG Mailinglistだけど
○ なかなかバージョンアップしない
○ Gmail使ってないので、文字化けや不達多発
■ 無料のGmailは沢山送信すると叱られるかも
6

7. シンプルでいいから
安全性の高いサイトを
お手軽に開発・運用したい
7

8. ● 初心に帰ろう
○ 1コンテンツ1ファイルで作成
○ フォルダ階層＝コンテンツ階層
● テーマやテンプレートが使える
● 目次やサイトマップ、RSSは自動生成
● 開発用フォルダから公開用フォルダにコンテンツ
を生成
● DB不要
● Server Side Programming不要
○ 開発時はDBやコンテンツクエリー言語を使ってもよいのでは？
Static Site Generator登場
8

9. ● DB不要なのでインストール簡単
○ 使用リソースが少ない
○ 公開サーバはWebサーバだけあればよい
● テキストファイルなのでGitで管理できる
● サイトの構成変更・移行が簡単
○ フォルダ構造を自在に変更
○ コンテンツの再配置＝ファイルの移動
○ コンテンツの自動生成も簡単(grepでもできる？)
● 並行テストが簡単
● 強固なセキュリティ
○ 侵入経路はWebサーバやOSのバックドアのみ？
● CDN使わなくても早いが使えば爆速！
○ https://www.fastly.com や
○ https://www.akamai.com は高いけど
○ https://www.aerobatic.com/ なら使えるかも
Static Site Generatorの利点
9

10. ● 全文検索やフォーム入力が難しい
○ 基本的に対話処理が苦手
○ しかし、対話処理が脆弱性を生む
● スキルが必要
○ 多くはコマンドライン＋エディタで開発
■ Pulse CMSはWeb管理画面あり
○ HTML/CSS/JavaScriptの知識
● 公開サイトビルドに時間がかかる
○ Hugoの場合1記事1ms程度といわれる
■ 記事の数に関わらず最低1～3秒のオーバーヘッドあり
○ Gatsbyは爆速らしい
○ ビルド中に公開サイトアクセスがあると一時的に不整合が
発生し得る
Static Site Generatorの欠点
10

11. ● Jekyl(since 2008)：Ruby環境で動作
● Hugo(since 2013)：次ページ以降で解説
● Hexo：Node.jsベース
<以上が御三家>
● Gatsby：最先端のCMS?
○ 開発環境はReactのヘビーな環境
○ 1.0ではコンテンツのクエリーにGraph QL使用
=========
● Pulse CMS(有償 1ドメイン$10/月)
○ 厳密にはフラットファイルCMS
○ 公開コンテンツはファイルからPHPが動的に生成
○ DBなし＆自由なフォルダ構造という点でSSGライク
○ コアメンバーの1人が関西在住でMeetup開催中
様々なSSG
11

12. ● https://gohugo.io
● https://github.com/spf13/hugo
● 本体はGo言語
○ バイナリインストール時にはGo環境は不要
● コンテンツ記述はMarkdown
○ Front MatterにメタデータをTOML/YAML/JSONで記述
● hugoコマンド
○ 開発用Liveサーバー起動
○ コンテンツを生成
＜以降はhttp://wdkk.co.jp/note/2015/0714-hugo/ を参考に解説＞
What is Hugo(ヒューゴー)
12

13. ● archetypes/
○ default.md (記事の素になるmarkdown)
● config.toml (サイト全体の設定)
● content/ (サイトのMarkdownファイル置き場)
○ ~~~.md (記事)
○ +++.md (記事)
● layouts/ (サイトのレイアウトデザイン)
○ _default/ (サイトの基本レイアウト)
■ single.html (基本レイアウト)
○ partials/ (部品レイアウト）
○ index.html (サイトのホームページレイアウト)
● static/ (サイトにそのままコピーするファイル群)
● themes/
○ 各テーマフォルダ/ 構造はlayoutsフォルダと同じ
● テーマ名＝サブフォルダ名
● layoutsフォルダにない要素はここの内容が用いられる
○ theme.toml
フォルダ構成
13

14. フォルダ・ファイルの役割
14
● config.toml (config.yaml)
TOML形式(あるいはYAML,JSON)でサイト全体の設定情報を記述
サイトのBaseURL、タイトルなどサイト全体を通して使う情報を入力
● contentフォルダ
サイトの具体的な記事をmarkdownで記述し格納
サブフォルダで記事を分類可能
● archetypesフォルダ
記事を作成する際に基本となるmarkdownのファイルを置く。
コマンドで、
hugo new 記事のファイルパス/記事タイトル.md
を入力すると記事の.mdファイルがcontentフォルダ内に生成される。
このときdefault.mdにTOML(YAML) Front Matterを記述しておくと、生成された
記事にあらかじめメタデータが入力される。

15. フォルダ・ファイルの役割（続き）
15
● layoutsフォルダ
HTMLのレイアウトを格納
layouts内の_defaultフォルダの single.htmlファイルが基本レイアウトデザイン
ビルドでcontentフォルダ内の.mdの内容がlayoutsに挿入されHTMLが生成される
● layouts > partialsフォルダ
layouts内のHTML内に埋め込みが可能な部品
● staticフォルダ
加工せずそのままサイトに使う素材を格納
ビルド時にpublicフォルダ内に直接コピーされる
● themesフォルダとtheme.toml
複数のレイアウトテーマを格納するフォルダ
ビルドで指定するテーマはこのフォルダ内に入れておく必要がある
theme.tomlにはテーマの設定値やメタデータを記述する

16. 私の掲示板の構造
16
site
├─archetypes
├─content
│ ├─info
│ ├─post
│ └─secretdata
├─data
├─layouts
│ ├─info
│ ├─partials
│ │ └─widgets
│ ├─post
│ ├─section
│ └─_default
├─public
│ ├─attached
│ ├─css
│ ├─img
│ ├─info
│ │ ├─2016-dosoukai
│ │ └─page
│ │ └─1
│ ├─js
│ ├─post
│ │ ├─500
・・・・
│ │ ├─509
│ │ └─page
│ │ ├─1
│ │ └─2
│ └─secretdata
│ ├─MailAddr
│ └─page
│ └─1
├─static
│ ├─attached
│ └─img
└─themes
└─mainroad
├─archetypes
├─exampleSite
│ ├─content
│ │ └─post
│ ├─data
│ └─static
├─images
├─layouts
│ ├─partials
│ │ └─widgets
│ └─_default
└─static
├─css
├─img
└─js

17. config.toml
baseurl = "/"
title = "みんなの掲示板"
languageCode = "ja-jp"
paginate = "5" # Number of posts per page
theme = "mainroad"
disqusShortname = "" # Enable comments by entering your Disqus shortname
googleAnalytics = "" # Enable Google Analytics by entering your tracking
id
[Author]
name = "管理人"
[Params]
subtitle = " 同期生の交流の輪を拡げよう " # Subtitle of your site
description = " 交流サイト" # Description of your site
opengraph = true
leftsidebar = false # Move sidebar to the left side if true
authorbox = true
post_navigation = true
17

18. config.toml（続き）
[Params.widgets]
search = false # Enable "Search" widget
recent_articles = true # Enable "Recent arcticles" widget
sections = true # Enable "Sections" widget
categories = false # Enable "Categories" widget
tags = false # Enable "Tags" widget
[[menu.main]]
name = "掲示板"
weight = 1
identifier = "post"
url = "/post/"
[[menu.main]]
name = "お知らせ"
weight = 5
url = "/info/"
18

19. 記事のmdファイル
+++
date = "2017-02-05 22:43:00"
title = "効いた！"
+++
## 福沢諭吉です
以下はHTMLで書きます
昨日、Druaplってのを腰椎の関節に注射してもらったことを報告しましたが、本日スポーツクラブ
行って踊ったんだけど、効果抜群！ <br />
いつもなら、動き出して 5分もすれば脚が痛くなっててさぼりさぼりだったんだけど、本日は、ほとん
ど痛みなく（ちょっと痛くなったけど） 60分を完了。<br />
よかった～～ <strong>坂本龍馬さん</strong>ありがとう</p>
<pre>
さて、次の課題？は、どれだけの期間、効果を発揮するかってことですね。
もう一つは、これをずっと続けなければならないのか、それとも、何度か注射するうちに回復して離脱
できるかってことですね。
</pre>
19

20. 記事の表示
20

21. layoutsフォルダ
LAYOUTS
│ index.html 全体のindex.html
│ postindex.html その他任意の HTMLを置ける
│
├─info
│ single.html Infoフォルダの1コンテンツ表示用
│
├─partials
│ │ footer.html
│ │ pagination.html ページ操作用のパーツ
│ │ sidebar.html
│ │
│ └─widgets
│ recent.html 近着表示ブロック
│
├─post
│ single.html Postフォルダの1コンテンツ表示用
│
├─section サブフォルダのコンテンツリスト用
│ info.html
│ post.html
│
└─_default
list.html デフォルトのリスト表示
single.html デフォルトのコンテンツ
21

22. サーバー環境
● 開発サーバー
○ Windows Server 2012
■ メモリー 12GB CPU 4コアの海外VPS
○ WebStormまたはVSCodeで開発
○ IISを特別なポートで公開してテスト
● 公開サーバー
○ Windows Server 2012
■ メモリー 768MB CPU 1コアのさくらVPS
○ VSCodeはぎりぎり動く
○ IIS+Basic認証+SSL
● どちらもWindowsなのでPCが操作できる人ならばリモート
デスクトップで何とか運用できるはず
22

23. コンテンツ編集デモ
23

24. メールによる投稿システム
● OG MailingListと同じことを実現
● https://github.com/kunichan2013/MailBlog
● 定期的にGmailの未読をチェック
● 未読があれば最初の1件だけを処理
○ メールのReturn-PathのアドレスをCSVの名簿とチェック
○ 存在しないアドレスならば管理者にメールして終了
○ メールソースをファイルに書き出す
○ コンテンツのMDファイルに変換
■ 配信したコンテンツメールの返信ならば本文にコメントとし
て追加
○ 同じ内容を掲示板メンバーに送信
■ 送信メール数が多いときはGmailの無料アカウントでは送
信一時停止になる。
■ G Suite契約にすれば１日１万通まで可能
24

25. メールによる投稿のデモ
・公開環境にて実行
25

26. さてDrupalからの移行をどうするか
● 一応ツールはある
○ github.com/danapsimer/drupal2hugo
○ Go環境で実行したが必要なテーブルがないということで
エラー
● 本文とコメントを1ページに表示したいのでScreen Scraping
方式にした
○ Node.jsに色々ツールがあるが手間がかかりそう
○ WinAutomation 評価版でScraping
● DrupalサイトのテーブルからNode番号NNNを抽出して
http://サイト/drupal/node/NNN
を巡回した
● 一応完了
チラッとデモします
26

27. ● 人気番付
○ https://www.staticgen.com
● 主要ツール比較
○ http://qiita.com/tamano/items/d3be25027c9b80bbfb7a
● Hugo関連
○ http://qiita.com/spiegel-im-spiegel/items/4c5859f7cac877068742
○ http://system.blog.uuum.jp/entry/2016/02/16/120000
○ 力作の連載
■ http://wdkk.co.jp/note/2015/0714-hugo/
Static Site Generator関連リンク
27

28. END
28