Download as PDF, PPTX
![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](https://image.slidesharecdn.com/drupal-170318142713/85/Drupal-17-320.jpg)
![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](https://image.slidesharecdn.com/drupal-170318142713/85/Drupal-18-320.jpg)
![[大図解]ピグライフはこう動いている](https://cdn.slidesharecdn.com/ss_thumbnails/pigglifegreexca-110817005057-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[社内勉強会]ELBとALBと数万スパイク負荷テスト](https://cdn.slidesharecdn.com/ss_thumbnails/elbalb-160822022623-thumbnail.jpg?width=640&height=640&fit=bounds)
Drupal補完計画
- 1. Drupal補完計画 あるいは 脆弱性虐殺器官 Static Site Generator 2017-03-17at 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.
- 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-0522:43:00" title = "効いた！" +++ ## 福沢諭吉です 以下はHTMLで書きます 昨日、Druaplってのを腰椎の関節に注射してもらったことを報告しましたが、本日スポーツクラブ 行って踊ったんだけど、効果抜群！ <br /> いつもなら、動き出して 5分もすれば脚が痛くなっててさぼりさぼりだったんだけど、本日は、ほとん ど痛みなく（ちょっと痛くなったけど） 60分を完了。<br /> よかった～～ <strong>坂本龍馬さん</strong>ありがとう</p> <pre> さて、次の課題？は、どれだけの期間、効果を発揮するかってことですね。 もう一つは、これをずっと続けなければならないのか、それとも、何度か注射するうちに回復して離脱 できるかってことですね。 </pre> 19
- 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. サーバー環境 ● 開発サーバー ○ WindowsServer 2012 ■ メモリー 12GB CPU 4コアの海外VPS ○ WebStormまたはVSCodeで開発 ○ IISを特別なポートで公開してテスト ● 公開サーバー ○ Windows Server 2012 ■ メモリー 768MB CPU 1コアのさくらVPS ○ VSCodeはぎりぎり動く ○ IIS+Basic認証+SSL ● どちらもWindowsなのでPCが操作できる人ならばリモート デスクトップで何とか運用できるはず 22
- 23.
- 24. メールによる投稿システム ● OG MailingListと同じことを実現 ●https://github.com/kunichan2013/MailBlog ● 定期的にGmailの未読をチェック ● 未読があれば最初の1件だけを処理 ○ メールのReturn-PathのアドレスをCSVの名簿とチェック ○ 存在しないアドレスならば管理者にメールして終了 ○ メールソースをファイルに書き出す ○ コンテンツのMDファイルに変換 ■ 配信したコンテンツメールの返信ならば本文にコメントとし て追加 ○ 同じ内容を掲示板メンバーに送信 ■ 送信メール数が多いときはGmailの無料アカウントでは送 信一時停止になる。 ■ G Suite契約にすれば１日１万通まで可能 24
- 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.