Mautic Meetup Tokyo #3

データベース不要な CMS ： Grav の紹介 Mautic Meetup Tokyo #3

Kohei Nishikawa

Mautic Meetup Tokyo #3

自己紹介@kolinz

名刺情報 https://8card.net/p/knishikawa

西川 浩平 (Cloud Specialist)

IT 系資格で日本語化やったり、 Google 系資格取得支援、システム管理者、ハッカソンの技術アドバイザー、経営企画などいろいろやって、気づけばクラウドに関わること 10 年。

最近やってて楽しい言語は、 Python と Google Apps Script 。

Mautic Meetup Tokyo #3

Grav

データベース不要

Apache or nginx と PHP だけで動く

バックアップと復元が簡単

低 TCO 向け

レスポンシブル

小規模な Web サイトに向く。

https://getgrav.org/

Mautic Meetup Tokyo #3

Grav っていいなぁと思った理由Movable Type や WordPress は疲れるというのが最大の理由

プラグインが管理し切れない管理し切れないと事件が起きる。パナマ文書事件 / J-WAVE 個人情報 64 万件 / エイベックス 35 万件漏えい 等

ホームページ担当者が１人 2 人の会社であれば管理し易いMovable Type や WordPress は、コンテンツ管理、パフォーマンスチューニング、脆弱性対策等も行うことに。とはいえ、ホームページ運用だけが業務じゃない。運用管理を外注する予算さえないことも。

とはいえ、潤沢な予算が確保できれば、 Movable Type や WordPress はとても良いものであることは確か。

Mautic Meetup Tokyo #3

本日の環境お名前 .com VPS を使用。Ubuntu14.04 に、 Docker(※) 環境を構築しました。 Docker 上で稼働する Ubuntu 16.04 に Grav を入れます。

※Docker とは？詳しくは、公式の「 What is Docker?」を見てください。

普段 Docker を使っている理由は、• サーバー本体は、ほぼきれいなままなので、管理し易い• Docker 上で動くサーバーは、丸ごとバックアップできる• Docker 上で動くサーバーは、他の Docker が入っているサーバーでも動く。

つまり、検証環境 → 本番環境に移行しやすい。

たとえば、 Mautic の本番環境が Docker 上で稼働しているとして、本番環境に最小限の影響で最新版の検証が可能。① 本番環境をコピー② コピーした環境を起動し、最新版へのアップデートを検証。本番環境に影響が無い。③ 確認した手順を本番環境に適用し、アップデートを実施④ コピーしておいた前バージョンの本番環境は、 Zip ファイル等にエクスポートして残しておく。万が一に使用。

Mautic Meetup Tokyo #3

Grav Install# docker pull ubuntu:16.04# docker run -itd -p 80:80 ubuntu:16.04 /bin/bash# docker attach コンテナ ID 　 - コンテナ ID は、 docker run 実行で生成された英数字の冒頭 5 文字くらいで OK

# apt-get update -y# apt-get upgrade -y# echo "Asia/Tokyo" | tee /etc/timezone# dpkg-reconfigure --frontend noninteractive tzdata# apt-get install wget unzip nano software-properties-common curl# apt-get install apache2 php libapache2-mod-php php-mcrypt php-gd php-curl php-mbstring php-xml php-zip openssl

# cd /usr/local/src/# wget https://github.com/getgrav/grav/releases/download/1.0.10/grav-admin-v1.0.10.zip

wget で取得する Zip ファイルの URL は、 [Garv のホームページ ] → [DOWNLOARDS] → [GRAV CORE+ADMIN PLUGIN] ボタンを右クリックしてリンクの URL をコピーして取得。 wget の後に貼り付けて使用します。最新のベータ版を使用する場合は、 [GRAV BETA CORE+ADMIN BETA PLUGIN] ボタンから取得しましょう。

Mautic Meetup Tokyo #3

Grav Install前ページからの続き# unzip grav-admin-v1.0.10.zip# cp -r /usr/local/src/grav-admin /var/www/html/grav# nano /etc/apache2/sites-available/000-default.conf 　を実行

<virtual host> ～ </virtual host> 内にて下記を変更 & 追記     DocumentRoot /var/www/html → DocumentRoot /var/www/html/grav に変更

     <Directory "/var/www/html">     AllowOverride All     </Directory>

追記後、 Ctrl キー + x キーを押し、 y キーで保存

# chown -R www-data:www-data /var/www/html/grav# a2enmod rewrite# /etc/init.d/apache2 restart

Web ブラウザで、 IP アドレス もしくは、 FQDN にアクセスする。 Grav の初期セットアップ画面が表示される。

Mautic Meetup Tokyo #3

Grav 初期設定Web ブラウザで、 IP アドレス もしくは、 FQDN にアクセスする。 Grav の初期セットアップ画面が表示されます。

Password は、英数字 8 文字以上、 1 文字は大文字、それと数字を含める必要があります。Password以外の項目は、特別気をつける必要はないでしょう。全ての項目を入力後、画面右下の「 Create User 」ボタンをクリックします。

Mautic Meetup Tokyo #3

Grav 管理画面Grav の初期セットアップ後に、管理画面が表示されます。URL は、 http://IP アドレス or FQDN/admin

画面中央付近に表示されている「 Update 」ボタンをクリックすると、最新の状態に更新されます。また、「 Backup 」ボタンをクリックすると、現在のサイトをZip形式でダウンロードすることができます。

次のページでは、管理画面を日本語化する手順を紹介します。

Mautic Meetup Tokyo #3

Grav 管理画面 日本語化管理画面の左上に表示されている、ユーザー名をクリックしますと、ユーザー情報の編集画面が表示されます。「 Language 」で、 English → 日本語 に変更し、画面右上の「 Save 」ボタンをクリックすると、画面が日本語になります。

Mautic Meetup Tokyo #3

2 人目以降のユーザーを追加する方法Tera Term でサーバーに SSH接続。#cd /var/www/html/grav → Grav のホームディレクトリに移動。

[2 人目以降のユーザー追加方法 ]

下記ユーザー追加のコマンドを実行すると、ガイドに従って追加。# bin/plugin login newuser

実際のユーザー追加画面は、右図をご覧ください。枠の部分が、実際に入力する箇所になります。

プラグインやテーマの導入も、この画面です。

Mautic Meetup Tokyo #3

Grav 初期ホームページ初期セットアップ完了後、 Web ブラウザで、 IP アドレス もしくは、 FQDN にアクセスします。初期セットアップ後に表示された画面は、管理画面で、 /admin を付けるとアクセスできます。

このページをカスタマイズしたり、ページの編集画面でページ作成の参考にすると良いでしょう。

Grav は HTML を書くのではなく、 Markdown でページを作成します。つまり、 HTML と記法が異なります。Markfdown の書き方について参考資料

日本 Markdownユーザー会http://www.markdown.jp/what-is-markdown/Qiita Markdown 書き方まとめhttp://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1

Mautic Meetup Tokyo #3

Grav ページ作成方法ページの作成は、管理画面左側の「ページ」→ 画面右上の「ページの追加」をクリックすることで、左図のように追加画面が表示されます。

左図のように、 * が付いている項目に入力し、「続ける」ボタンをクリックすることで、ページ作成画面が表示されます。

Mautic Meetup Tokyo #3

Grav ページ作成方法

ページの作成 /編集画面では、 Markdown で書いていきます。たとえば、 HTML の <h1> タグなら、 Markdown では、 # を先頭につけます。

Mautic Meetup Tokyo #3

プラグインやテーマの追加

プラグイン名をクリックすると設定画面へ

Tera Term でサーバーに SSH接続。#cd /var/www/html/grav 　→ Grav のホームディレクトリに移動

[ プラグインの追加例 ]

Mautic連携プラグインを追加する場合#bin/gpm install mautic

プラグイン一覧 https://getgrav.org/downloads/plugins

[ テーマの追加例 ]

テーマはレイアウトや見た目を変更することができます。プラグインと同じやり方です。# bin/gpm install striped

テーマ一覧 https://getgrav.org/downloads/themes

Mautic Meetup Tokyo #3

Mautic プラグインの設定Mautic連携プラグインをインストールした前提で、設定は、

1.前ページを参考に、 Mautic連携プラグインを導入

2.画面左側の「プラグイン」をクリック

3.画面中央付近に表示される「 Mautic 」の文字をクリック

4.左図が表示される。

5.Plugin Status は、「 Enabled 」を選択した状態として、

6.Mautic base URL に、 Mautic の URL を挿入

7.画面右上の「保存」ボタンをクリックして設定を保存。

8.何度かサイトを閲覧し、その後 Mautic にアクセスします。

閲覧端末の IP アドレスでリードが作成されているはずで

す。

Mautic Meetup Tokyo #3

End Of the Document運用中 ： Mautic 使い方情報 - NAVER まとめhttp://matome.naver.jp/odai/2145863826223235201

連載中： CHANGE-MAKERShttps://www.change-makers.jp/