SVNで更新するWordPress開発環境を作る


個人的にwordpressをベースにしたサイトの開発をしたかったのですが、FTPでソースアップロードとかwordpress上での編集などが面倒で、かつバージョン管理もしたかった。

なので、ローカル上で編集したファイルをTortoiseSVNでバージョン管理しつつ閲覧用の環境へもコミット時に即反映される環境を作ってみた次第。

前提

Dockerコンテナ上にCentOS7を構築。
バージョンはそれぞれ以下の通り。

  • CentOS7 release 7.7.1908
  • Apache 2.4.6 (CentOS)
  • MariaDB 5.5.64
  • PHP 7.2.23
  • WordPress 5.2.3-ja

OS・DockerインストールはさくらVPSにて提供されているスタートアップスクリプトを使用したので割愛。

開発環境なのでデータベースも同じlocalhostへ設置。
負荷分散とかバックアップやらは本番環境ができてから考えます。

1.コンテナ作成

centos7のイメージを取得してコンテナ作成します。

作成時に8080番ポートへアクセスすればサイトへ接続されるように指定。
あと「privileged」オプションはコンテナ内で「systemctl」コマンドを実行できるようにするため。

①コンテナ作成
[root@DockerHOST ~]# docker pull centos:centos7
[root@DockerHOST ~]# docker run --privileged -d -p 8080:80 --name dev-wordpress centos:centos7 /sbin/init
[root@DockerHOST ~]# docker ps

②作成したコンテナへログインしてyumアップデート
[root@DockerHOST ~]# docker exec -it dev-wordpress /bin/bash
[root@dev-wordpress ~]# yum update

2.LAMP環境作成

Apache、MariaDB、PHPを導入していきます。

httpdインストール

[root@dev-wordpress ~]# yum install -y httpd httpd-devel

[root@dev-wordpress ~]# systemctl enable httpd
[root@dev-wordpress ~]# systemctl start httpd

mariadbインストール

[root@dev-wordpress ~]# yum install -y mariadb-server mariadb-client

[root@dev-wordpress ~]# systemctl enable mariadb
[root@dev-wordpress ~]# systemctl start mariadb

PHPインストール

特に制約なければ最新版をインストールしてもいいのですが、プラグインやベースにするテーマとの抱き合わせを考えたかったのでバージョン7.2でのインストールをします。

[root@dev-wordpress ~]# yum install epel-release
[root@dev-wordpress ~]# vi /etc/yum.repos.d/epel.repo
※各項目の「enabled=1」を「enabled=0」に変更。
[epel]
[epel-debuginfo]
[epel-source]

[root@dev-wordpress ~]# rpm --import http://rpms.famillecollet.com/RPM-GPG-KEY-remi
[root@dev-wordpress ~]# rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
[root@dev-wordpress ~]# yum install -y --enablerepo=epel,remi-php72 php php-mbstring php-pear php-fpm php-mcrypt php-mysql

[root@dev-wordpress ~]# php -v
PHP 7.2.23 (cli) (built: Sep 25 2019 07:38:48) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

[root@dev-wordpress ~]# systemctl start php-fpm
[root@dev-wordpress ~]# systemctl enable php-fpm

あと、URLで「index.php」を省略してアクセスできるようにする為に httpd.confを編集しておきます。
「AllowOverride」を「all」にしておかないとページにアクセスできなる (Not Found) 。

[root@dev-wordpress ~]# vi /etc/httpd/conf/httpd.conf
        :
<Directory "/var/www/html">
        :
    AllowOverride all(allへ変更)
        :
</Directory>
        :
<IfModule dir_module>
    DirectoryIndex index.html index.php(index.php追記)
</IfModule>
        :

SVN環境構築

[root@dev-wordpress ~]# yum -y install subversion mod_dav_svn
[root@dev-wordpress ~]# mkdir /var/www/svn

[root@dev-wordpress ~]# svnadmin create /var/www/svn/sample

[root@dev-wordpress ~]# svn mkdir file:///var/www/svn/sample/trunk file:///var/www/svn/sample/tags file:///var/www/svn/sample/branches -m 'Initial import.'
[root@dev-wordpress ~]# chown -R apache:apache /var/www/svn

Basic認証でアクセスするよう設定。
ここで設定するユーザ・パスワードを使ってTortoiseSVNとかRedmineによる管理を行います。

[root@dev-wordpress ~]# htpasswd -c /etc/httpd/.htpasswd user
New password:pass
Re-type new password:pass
Adding password for user user

[root@dev-wordpress ~]# vi /etc/httpd/conf.d/subversion.conf
<Location /repos>
  DAV svn
  SVNParentPath /var/www/svn
#  <LimitExcept GET PROPFIND OPTIONS REPORT>
#  SSLRequireSSL
      AuthType Basic
      AuthName "Authorization"
      AuthUserFile /etc/httpd/.htpasswd
      Require valid-user
#  </LimitExcept>
</Location>

[root@dev-wordpress ~]# systemctl restart httpd

ここまでできたらTortoiseSVNを開発用端末へ導入して「http://[ドメイン]:8080/repos/sample」をチェックアウト。
作った「trunk」「tags」「branches」があればOKです。

更新するディレクトリを配置する用の「trunk/upload」フォルダだけ作っときます。

WordPressインストール

データベース作成

rootユーザのパスワードは「password」、wordpress用のDB情報は以下。
任意の値に書き直してください。

  • データベース名:wpdb
  • ユーザ名:wpadmin
  • パスワード:password
  • ホスト:localhost
[root@dev-wordpress ~]# mysqladmin -u root password 'password'
[root@dev-wordpress ~]# mysql -u root -ppassword
MariaDB [(none)]> create database wpdb default character set utf8;
MariaDB [(none)]> create user 'wpadmin'@'localhost' identified by 'password';
MariaDB [(none)]> grant all on wpdb.* to 'wpadmin'@'localhost';
MariaDB [(none)]> flush privileges;
MariaDB [(none)]> quit

WordPress取得

[root@dev-wordpress ~]# cd /var/www/html

[root@dev-wordpress html]# wget https://ja.wordpress.org/latest-ja.tar.gz
[root@dev-wordpress html]# tar -xzvf latest-ja.tar.gz 

[root@dev-wordpress html]# chown -R apache:apache /var/www

「http://XXXXXXXXX:8080/wordpress」へアクセス。
先ほど設定したデータベースの情報を入力してwordpressをインストール。

post-commitスクリプト作成

SVNのコミットと同時にリポジトリからデータをチェックアウトして閲覧環境へ反映させるスクリプトを作成します。

[root@dev-wordpress ~]# vi /var/www/svn/sample/hooks/post-commit
#!/bin/sh

DIR_HTDOCS='/var/www/html/wordpress/wp-content'
DIR_SVN='file:///var/www/svn/sample/trunk/upload/wp-content'

if [ -e $DIR_HTDOCS ];
then
        LANG=en_US.UTF-8 svn update $DIR_HTDOCS
else
        mkdir $DIR_HTDOCS
        LANG=en_US.UTF-8 svn checkout $DIR_SVN $DIR_HTDOCS
fi
[root@dev-wordpress ~]# chmod +x /var/www/svn/sample/hooks/post-commit
[root@dev-wordpress ~]# chown apache:apache /var/www/svn/sample/hooks/post-commit

SVNで管理する「wp-content」を「trunk/upload」へ配置して、あとはコミット時にエラーを吐かないか確認。
試しにテーマの「page.php」などに追記してみて、コミット後に該当のサイトが更新されてればこれでOKです。

最後に

注意として、wordpress側のダッシュボード上で編集したソースやインストールしたプラグイン・テンプレートはコミット時に無くなってしまいます。
(記事なんかはDBに登録されてるから問題なし)

基本的にこれらの作業はソースを弄ってコミットするという流れという点だけ覚悟しときましょう。
……まぁいい勉強になるのでヨシとします。

はい、ではサイト開発頑張ります。


Posted in サーバ関連


ゆとシート(DX3rd版) 設置時のソース修正まとめ


はじめに

今回はゆとシートの『ダブルクロス the 3rd Edition』版をさくらのレンタルサーバ(ライト)へ導入します。

「ゆとシート」とはゆとらいず工房様制作のTRPGキャラシート保管庫みたいなものです。
ソード・ワールド2.5発売時も迅速な導入をしてもらえてかなり重宝してます。

タイトルの通りですけど本記事は「2013/03/21 update」版のソースコード修正をメインに書いてます。

将来的には、今後リリースされていくであろうオンセツールのチャッパレ生成機能を付けたい所存。
改造・再配布は自由とありますのでめいっぱいいじくっていきます。

ゆとシート入手からセットアップ

配布CGIは以下より入手。
http://yutorize.2-d.jp/page/YtSheet-for-DX3rd

サーバへのアップロードとReadme通りのパーミッション設定を施します。
さくらのレンタルサーバの場合、ディレクトリへは「707」ではなく「705」を設定。

ここで本来は接続可能になるようなのですが、僕の場合は内部エラー……。
「index.cgi」と「color.cgi」の改行コードが「CR+LF」になっていたところをテキストエディタから「LF」へ変更したら接続できました。

※ SW2.5ゆとシⅡ設置の時に試したことですが、上記でも接続不可の場合はさくらのコンソールからpearlのバージョンをダウングレードしてみると行けるかも。

ソースコードの改造

そして本題。

アップロードした各種ファイルを以下のように修正します。
「★」付きの項目は修正しないと支障がでそうなもの。

lib/form.pl:62-64行目

僕の場合利用しなかったので、パスワード紛失時のメール送信機能を消します。

<a href="${set::cgi}?mode=form&m=change">パスワード変更</a> /
<a href="${set::cgi}?mode=form&m=remind">IDを忘れた</a> /
<a href="${set::cgi}?mode=form&m=forget">パスワード忘れた</a><br>
<a href="${set::cgi}?mode=form&m=change">パスワード変更</a><!-- /
<a href="${set::cgi}?mode=form&m=remind">IDを忘れた</a> /
<a href="${set::cgi}?mode=form&m=forget">パスワード忘れた</a>--><br>

lib/editform.pl:192行目

キャラシート作成時のメールアドレス入力を省略させます。

print ' mail:<input type="text" name="mail" style="width:180px;">';
print ' <input type="hidden" name="mail" style="width:180px;" value="trpg@example.com">';

lib/editform.pl:637行目

ロイスの関係で「Dロイス」と「固定」をプルダウン入力可にします。
手入力でもいいのですが、一覧上でDロイスの情報を引っ張ってくる項目があったので、半角全角の差異が出ないようにする目的。

<td class="inp"><input (省略) value="$pc{'lois'.$num.'_relation'}"></td>
<td class="inp"><input (省略) value="$pc{'lois'.$num.'_relation'}" list="limit_lois" autocomplete="off"><datalist id="lois_list"><option value="Dロイス"><option value="固定"></datalist></td>

lib/editform.pl:652行目(★)

メモリーで消費中の経験値表示要素追記。

※メモリーはデフォルトで経験値計算されてないのであとでjs弄ります。

<caption>メモリー</caption>
<caption>メモリー  (<span id="MemoryTotalExp"></span>)</caption>

lib/editform.pl:672行目(★)

メモリーの関係入力時に経験値計算実行。

<td class="inp"><input (省略) value="$pc{'memory'.$num.'_relation'}"></td>
<td class="inp"><input (省略) value="$pc{'memory'.$num.'_relation'}" onchange="calc()"></td>

lib/editform.pl:750行目

エフェクト制限に「Dロイス」と「自動」のプルダウン入力を追加。
「Dロイス」は半角”D”+全角”ロイス”で固定に。
自動は本来制限にはないけど、RBエフェクト等取得する際にあると便利なので。

※「自動」はデフォルトでは経験値免除されないので、あとでjs側を弄ります。

<td class="inp"><input (省略) onChange="calc()"></td>
<td class="inp"><input (省略) onChange="calc()" list="limit_list" autocomplete="off"><datalist id="limit_list"><option value="Dロイス"><option value="自動"></datalist></td>

lib/editform.pl:875行目(★)

100%未満コンボのC値が入力できない不具合修正。

<td class="inp num"><input (省略) value="$pc{'combo'.$num.'}_under_crit'}"></td>
<td class="inp num"><input (省略) value="$pc{'combo'.$num.'_under_crit'}"></td>

lib/editform.js:68行目(★)

能力値:社会の「その他の修正」が精神を参照している不具合修正。

var SttSocial = (省略) + SttAddSpirit;
var SttSocial = (省略) + SttAddSocial;

lib/editform.js:194行目(★)

エフェクト取得経験値を免除する制限を「Dロイス」「自動」に変更。

if(Limit === "Dロイス" || Limit === "Dロイス"){ EffectTotalExp -= 15; }
if(Limit === "Dロイス" || Limit === "自動"){ EffectTotalExp -= 15; }

lib/editform.js:203行目(★)

イージーエフェクトのレベル上昇分が計算されない不具合修正。

if(Lv > 0) { EffectEzTotalExp += 2; }
if(Lv > 0) { EffectEzTotalExp += Lv*2; }

lib/editform.js:207行目(★)

メモリーの関係を入力した際の経験点消費処理。
加えてメモリーで使用した経験点を全体の利用経験点に計上。

var ExpUse = SttTotalExp + EffectTotalExp + EffectEzTotalExp + SkillTotalExp + ItemTotalExp;
var MemoryTotalExp = 0;
if(document.forms.chr.memory1_relation.value != ''){ MemoryTotalExp += 15; }
if(document.forms.chr.memory2_relation.value != ''){ MemoryTotalExp += 15; }
if(document.forms.chr.memory3_relation.value != ''){ MemoryTotalExp += 15; }
document.getElementById("MemoryTotalExp").innerHTML = MemoryTotalExp;

var ExpUse = SttTotalExp + EffectTotalExp + EffectEzTotalExp + SkillTotalExp + ItemTotalExp + MemoryTotalExp;

lib/editform.js:288行目 (元282行目)(★)

イージーエフェクト追加行の不正なname属性を修正。

※フォーム側でボタン押下時に渡される引数を修正するのもアリ。

if(Ez){ CountEffectEz++; }
if(Ez){ CountEffectEz++; Ez = '_ez';}

lib/editform.js:355行目 (元349行目)

追加行のエフェクトレベル項目にクラスを追加。
数字が中央ぞろえになるだけ。

cell3.setAttribute("class","inp");
cell3.setAttribute("class","inp lv");

lib/editform.js:370-379行目 (元364-373行目)(★)

エフェクト・イージーエフェクトの追加行がシート更新後でないと入力反映されない不具合修正。

cell2.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_name">';
cell3.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_lv">';
cell4.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_timing">';
cell5.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_skill">';
cell6.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_diffi">';
cell7.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_target">';
cell8.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_range">';
cell9.innerHTML = '<input type="text" name="effect'+ Ez + CountEffect + '_point">';
cell10.innerHTML= '<input type="text" name="effect'+ Ez + CountEffect + '_limit">';
cell11.innerHTML= '<input type="text" name="effect'+ Ez + CountEffect + '_note">';
cell2.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_name">';
cell3.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_lv" value onchange="calc()">';
cell4.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_timing">';
cell5.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_skill">';
cell6.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_diffi">';
cell7.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_target">';
cell8.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_range">';
cell9.innerHTML = '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_point">';
cell10.innerHTML= '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_limit">';
cell11.innerHTML= '<input type="text" name="effect'+ Ez + cell1.innerHTML + '_note">';

(2019/10/14追記)
データアップロード時のPerlスクリプトも修正しないと閲覧画面上で経験点が反映されない事に気付いたので以下も修正として実施します。
※既に登録したデータはスクリプト修正後にキャラシ更新をすると直るはず。

lib/dataupdate.pl:123行目(★)

    if($pc{'effect'.$_.'_limit'} eq 'Dロイス' || $pc{'effect'.$_.'_limit'} eq 'Dロイス'){ $exp_use -= 15; }
    if($pc{'effect'.$_.'_limit'} eq 'Dロイス' || $pc{'effect'.$_.'_limit'} eq '自動'){ $exp_use -= 15; }

lib/dataupdate.pl:125行目(★)

  foreach(1..$pc{'count_effect_ez'}){ $exp_use += ($pc{'effect_ez'.$_.'_lv'}) ? 2 : 0; }
  foreach(1..$pc{'count_effect_ez'}){ $exp_use += ($pc{'effect_ez'.$_.'_lv'}) ? 2*($pc{'effect_ez'.$_.'_lv'}) : 0; }

おわりに

「ゆとシートⅡ for DX3」なんてものが出来ればお役御免の記事ですが、備忘録としてはこんな具合。

上記でとりあえず機能的には問題なくなる……と思いたい。
素人の拙いコードであれですが、あわよくばご本家様のゆとシ更新やこれからご利用を検討されている方のお役に立てればなぁと。


不具合見つけたら随時更新します。

/以上

Posted in ゆとシート


Discordで喋ってる人を分かり易くするカスタムCSS



(2019/09/01追記)本記事の内容はこちらにてツール化してます。画像URL・DiscordのユーザID取得、配信ツールへの設定方法が理解できた方はツールの方をブックマークした方が楽になるかもしれません。

(2023/01/28追記)StreamKit側の仕様変更に伴い、最新版に合わせた仕様に変更しています。変更内容については下記記事に掲載していますので、改変などされる場合はこちら参考にしてみてください。


Discordのストリームキットで配信ツール上に表示される発言者を分かり易くするという手法はメジャーなものかと思いますが、それをさらにカスタムCSSで「アイコン」から「立ち絵」に改造できたのでご紹介。

以下の右側(発言毎に跳ねる魔理沙ちゃん)のような動きをするカスタムCSSを例に設定手順を掲載します。

目次

  1. ボイスウィジェット取得
  2. 立ち絵・ユーザ情報取得
  3. カスタムCSS作成
  4. 配信ツールへ取り込み(OBSの場合)

ボイスウィジェット取得

① [Discord Streamkit Overlay]へアクセス。

② お使いの環境に合わせて[OBS]か[XSplit]を選択

③ [VOICE WIDGET]>[該当のサーバ]>[該当のボイスチャンネル]選択してウィジェットのURL取得(URL控え)

立ち絵・ユーザ情報取得

④ ディスコードのチャットに、使用したい立ち絵画像をD&Dでアップロード
※URL参照できる場所であればディスコード外でも可

⑤ 「」でアップロードした画像を右クリックして[リンクをコピー]選択(URL控え)

⑥ ディスコードサーバーのメンバーから立ち絵を適用するユーザを右クリックして[IDをコピー]選択(ID控え)


(2019/11/11追記)IDのコピーはDiscordで「開発者モード」を有効にしていないと実行できません。開発者モードは[ユーザー設定]>[アプリの設定]>[テーマ]で有効にできます。
教えてくれた鎌足さん( @kamatari_san )、ありがとうございます!


カスタムCSS作成

⑦ 以下のソースを編集([⑥で控えたID]、[⑤で控えた画像URL]の二か所修正)

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:10px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

配信ツールへ取り込み(OBSの場合)

⑧ ソースから[ブラウザソース]選択(ソース名は任意)

⑨ URLに「」で控えたURLを指定

⑩ カスタムCSSに「」で編集したソースを貼り付け


手順は以上。

対象のユーザがDiscord通話に参加していれば動く立ち絵が表示されるはずです。
ちょっと手間ですがコラボなんかの際は上記手順を人数分実施します。

因みに最初に紹介した動画の左側(発言毎に明るくなる霊夢ちゃん)のような挙動をさせる場合は⑦で編集するCSSを以下に差し替えればできます。

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(50%);
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

明るさ変わる方が分かり易そうだけど、雑音とか拾って発話状態繰り返したら画面チカチカしないか心配。。。


なんとなく想像つくかもしれませんが、「.avatar」が通常時の立ち絵に関する設定で「.speaking」がしゃべってる最中の表示に関する設定です。

細かい解説は本記事では省きますが、弄る場所さえ分かっていればあとは使えるCSSを増やすだけ。
もっと上手な書き方ある気がしますが、取り合えずこれで動作するのでヨシとします。

演出のバリエーションが増えたら使いやすい形で配布とか生成ツールの作成をしたいと考えてます故、気長にお待ちくださいまし。

是非お試しいただき、配信活動にお役立てください。

それでは、以上。

Posted in カスタムCSS


Webページ開設~!!


ホームページ作っちゃいました!

……とはいっても、まだいろいろ設定したい項目があります。
細かいデザインとか目次とか他プラグインとかね。

あれこれ情報掲載したいと思ったらここにじゃんじゃん入れてゆきたいと思います。
基本は僕の為の備忘録として使いますけど、これが誰かの役に立てば嬉しいなぁ。

現状書きたいと思ってるのはこんな感じ。

・ユドナリウム関連(絶賛CSSいじり中なので)
・Minecraft関連(たまに遊びたいから)
・プログラミング関連(はよやりたい)

こっちで書いたものがたまってきたら、動画なんかもどひゃ~っと作ってみたいところ。
見栄えのいいブログの書き方とかは数やって覚えます。
(いっぱい書いた後にこの記事見たらきっと頭を抱えるんでしょう。。。)

では、この記事はこの辺で以上としませう。
皆々様、よきインターネッツライフを。

追々、いい記事書けましたらいっぱいシェアしていただけると嬉しいです!

Posted in 順風日記