【MediaWiki】レンタルサーバーにWikiをインストールする


1.はじめに

MediaWiki(ウィキ)サイトを運用してみる試みです。

本サイトではCSSなどを中心にコードやツールを作成していますが、「記事」という形で更新するだけではなくコードをそのまま掲載しておく用途の簡易的な物置が欲しくなりました。そこで引っ張り出してきたのが今回紹介する「ウィキ」です。

自分がWikiを実際に使った場面はTRPGのロングキャンペーンの際。セッションごとの簡易的なトレイルや大量に登場していくキャラクター情報、ちょっとしたTIPSやハウスルールなどをカテゴリ分けして掲載しました。あとあと情報を見直す際に有用です。

Wikiなので当然のことですが情報をまとめることに特化しており、テンプレートからの記事作成やMarkdown記法などで更新が容易であるというメリットがあります。不特定多数の人間が編集できないような運用も可能で、自身の作成したコンテンツを掲載するためのブログのような使い方もできます。

実は創作・配信者クラスタの人間にとっては結構有用なのではと思っています。導入から運用までを簡単に解説していこうと思います。

1.1.Wikiについて

Wikiには種類があり、筆者が実際に設置したことのあるものは「Mediawiki」と「Pukiwiki」の2つです。

双方動作環境はPHP。「Pukiwiki」では不要ですが「Mediawiki」はデータベース(MySQLなど)が必要になります。ソーシャルゲームの攻略サイトなどでよく見るのは「Pukiwiki」の方かなと思います。

今回はタイトルにある通り「Mediawiki(バージョン1.39.1)」を導入していきます。

2.導入

2.1.事前準備

  • ホスティングサービス:さくらのレンタルサーバ(スタンダード 月額425円~)
  • MediaWikiインストーラ(ダウンロード

Linux、Apache、PHP、MySQLと必要なものが揃っているのでさくらのレンタルサーバさんを借りてインストールします。データベースの利用ができるため、プランはスタンダード以上です。余裕があればドメインを取得しておくと導入するサイトごとにサブドメインなど使い分けもできて便利になります。

また、Wikiは不特定多数の人間が情報を掲載するためのツールなので、「何を記載するWikiなのか」「誰が更新するWikiなのか」をハッキリ定めておきましょう。

Mediawikiのインストーラはzip圧縮されているので解凍しておきましょう。
また、解凍したフォルダ内の「images」ディレクトリ内の「.htaccess」ファイルをテキストエディタで開き、「Options +FollowSymLinks」とある行頭に「#」を加えコメントアウトしてください(もしくは行ごと消す)。
※Wiki内で画像を表示させるために必要な作業(さくらのレンタルサーバでは必須)

2.2.データベース作成

さくらのレンタルサーバを契約後、スタンダードプラン以上であればMySQLの利用ができます。Mediawikiのインストールを始める前にwiki用のデータベースを作成しましょう。

  • 会員メニュー:契約中のサービス一覧 > 対象サービスの「コントロールパネルを開く」
  • コントロールパネル:Webサイト/データ > データベース > 新規追加

データベース新規作成画面で「データベース名」を入力。バージョンは最新、文字コードはUTF-8(utfmb4)が選択済みであることを確認。作成についての注意事項を確認し、「同意する」にチェックをしてデータベースを作成します。

作成されたデータベースは名前の頭に契約時に指定しているドメイン名が付与された状態で作成されます。データベースが作成されていることを確認したら以下の4点を控えておきましょう。

  • データベース名
  • データベースサーバURL
  • データベースユーザ名
  • データベースパスワード

2.3.インストールディレクトリ作成

インストール場所を決定します。契約時のドメイン直下(Webルート)に配置はせず、ディレクトリを作成してそこへダウンロードしたMediawikiを配置します。配置はレンタルサーバのコントロールパネルから行えますが、それがない場合はWinSCP、FTPなどのファイル配置が可能なツールを利用してください。

さくらのレンタルサーバのコントロールパネルで行う場合は以下の通り。

  • コントロールパネル:Webサイト/データ > ファイルマネージャー
  • ファイルマネージャー:表示アドレスへの操作 > フォルダ作成 > 作成したフォルダへ移動し、「アップロード」

ここで事前準備で解凍しておいたインストーラの中身をアップロードしてください。また、アップロード後に対象のディレクトリでアクセス制限の設定も行いましょう。

  • ファイルマネージャー:表示アドレスへの操作 > アクセス設定 > 接続元アクセス制限 > 「公開して一部のアクセスを拒否」を選択して「OK」

この設定を行うと、インストールディレクトリに「.htaccess」ファイルが生成されます。生成されたファイルを開き、下記の内容を追記してください。

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?title=$1 [L,QSA]

2.4.インストール

インストーラを設置した場所へWebブラウザからアクセスし、Mediawikiをインストールします。

  • http://レンタルしているサービスのドメイン名/インストールディレクトリ
  • もしくは https://レンタルしているサービスのドメイン名/インストールディレクトリ

※可能であれば利用するドメインでSSL(https://~)を利用できるようにしておきましょう。(公式ブログ

URLへアクセスしたら「set up wiki」のリンクへアクセスし、インストールマネージャにしたがって設定を入力していきます。

①言語

言語は2つとも「ja – 日本語」を選択し「続行→」。

②MediaWikiへようこそ

著作権および規約を確認し「続行→」。

データベースに接続

データベースの種類を「MariaDB、MySQLまたは互換製品」にし、以下の通りDB情報を入力して「続行→」。

  • データベースのホスト:【データベース作成】で控えたホスト名
  • データベース名:【データベース作成】で控えたデータベース名
  • データベースのテーブルの接頭辞:任意の英数字
  • データベースのユーザー名:【データベース作成】で控えたユーザ名
  • データベースのパスワード:【データベース作成】で控えたパスワード
データベースの設定

「インストール作業と同じアカウントを使用する」にチェックが入っていることを確認し「続行→」。

名前

「ウィキ名」「利用者名(ウィキ内のアカウント)」「パスワード」「パスワードの再入力」「メールアドレス」を入力して「続行→」。

オプション

適宜必要な設定を有効化して「続行→」。尚、本記事ではオプションでは下記の拡張機能をインストールするよう設定します。

  • InputBox
  • CodeEditor
  • WikiEditor
インストール

メッセージに表示されている通り、不備が無ければ「続行→」。移管後の画面で正常にインストールが完了したら再び「続行→」。

完了!

「LocalSetting.phpをダウンロード」からLocalSetting.phpファイルをダウンロードします。取得したファイルに下記内容を追記して、Mediawikiのインストールディレクトリにアップロードします。「.htaccess」に追記した内容と合わせて、Wikiへアクセスした際のURLから「/index.php」を省略できるようになります。

$wgScript           = "$wgScriptPath/index.php";
$wgRedirectScript   = "$wgScriptPath/redirect.php";
$wgArticlePath      = "$wgScriptPath/$1";

LocalSetting.phpのアップロードが完了したら、改めてインストールディレクトリへWebアクセス。

Wikiのメインページが表示されていればインストールは完了です。画面右上の「ログイン」へアクセスし、設定したIDを使ってログインすれば運用開始となります。

3.運用

今回は仮で「人物」を登録するWikiの運用を想定してみます。
メインページを下記のように編集します。

*一覧ページ:[[:Category:キャラクター]]
*[[テンプレート:人物]]を呼び出して記事を作成します。

<inputbox>
type=create
break=no
buttonlabel=人物記事作成
default=
preload=テンプレート:人物
</inputbox>

更新後、記事内の「テンプレート:人物」がリンクになっているのでそこにアクセスし、表示された編集画面へ下記の内容を入力し更新します。

{|class="wikitable" style="float:right; margin-left: 10px;" width="350"
| colspan="2"style="text-align: center;" | [[file:noimage.png|250px]]
|-
| '''名前''' || xxxxx
|-
| '''性別''' || 男・女・他
|-
| '''年齢''' || xx歳
|-
|}

概要、台詞など。 

== プロフィール ==
概要

性格

== 設定・TIPS ==

== 外部リンク ==

== 関連項目 ==
* [[特別:リンク元/記事タイトル|関連リンク]]
* 参考文献、インスパイア元などなど

{{DEFAULTSORT:0読み仮名}}
[[category:キャラクター(下書き)]]

これでテンプレートと、それを呼び出す入力フォームが出来ました。
メインページのフォームに記事のタイトルを入力して「人物記事作成」のボタンを押せば、テンプレートを呼び出して新規記事の作成ができます。

4.さいごに

Markdownエディタの記法は独特ですが、慣れてしまえばHTMLコードを手入力するよりはるかに素早く見栄えの良い記事を作成することができます。

マメに記録を残すのが好き・得意という方、是非お試しください。

Posted in サーバ関連


Discordで喋ってる人を分かり易くするカスタムCSS(2023年最新)


1.はじめに

2022年12月頃、Discordのアイコンをストリームソフトへ表示するStreamKitのDOMが変更され、元々作っていた当サイトのツールが稼働しなくなりました。ツール側は既に修正済みであり、本記事はその修正版になります。

2.変更内容

旧版記事で紹介していた際のCSSは以下になります。公式StreamKit側で<li>、<img>周りの構造が変更されており、<li>のクラス、他属性を指定するセレクタが利かなくなってしまいました。

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; }

本当は:has()を使ってまとめて処理をしたい個所があったのですが、コードに不備があるのかOBSのブラウザでは上手く動かないのか動作せず、回りくどい書き方になってしまったかもしれません。

2-1.指定のユーザ以外のアイコン・ネームタグを非表示にする

前回と同様、<li>に画像を差し込みたかったのですが、ユーザIDが<img>のsrc属性でしか指定出来なかったため画像を差し替える形になっています。

/* 選択したユーザ以外の画像を非表示にする */
img:not([src*="ユーザID"]){ display:none; }
img:not([src*="ユーザID"])+div{ display:none; }
li{ position:fixed;top:15px;width:100%; }

/* アイコンを立ち絵画像に差し替える */
img[class*="Voice_avatar_"]{
  content:url("画像URL");
  height:auto !important;
  width:100% !important;
  border-radius:0 !important;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

2-2.発話時のアニメーション

元々「.speaking」クラスの指定で何とかなっていた個所ですが、2023年1月現在は「.Voice_avatarSpeaking__lE+4m」というクラス名になっています。おそらく変わることのないであろう「.Voice_avatarSpeaking」の部分で部分一致するようセレクタを変更しています。

/* 発話状態の設定 */
img[class*="Voice_avatarSpeaking"]{
  border-color:rgba(0,0,0,0) !important;
  position:relative;
}

3.新機能

元々、最上位の<li>に跳ねる・明滅するなどのアニメーションを設定していたところ、今回の更新で<li>内の<img>に発話時のアニメーションを指定するという形になりました。

(当時の筆者のCSS習熟度の都合もあり)変更前の構造の時に出来たのかはもうわかりませんが、今回から<li>にもアニメーションを指定することで非発話時でも再生される待機モーションという要素を追加しました。

第一弾として「浮遊アニメーション」を実装しています。これは差し替えた画像が常にふわふわと上下にゆっくり動き続けるというものです。多くの場合立ち絵に差し替えられるので、喋っている時以外静止しているよりは動きのある配信画面が出来るのではと思われます。

複数アニメーションは普通にできるらしい(「,」区切りで指定)ので当時の僕は勉強不足でしたね……。

4.さいごに

まず最初に、今回の仕様変更から修正までの間にツールを使えない状態に陥ってしまった方々、申しわけありませんでした。そしていつも使ってくださりありがとうございます。修正するまでの間、多くの方が代替案の作成や情報の拡散を行ってくださりとても助かりました。

また、以前作ったものと比較して「この書き方変だな」というところも見えてきましたので、機能に影響が出ない程度にスリムでカッコいいコードになるようサイレント修正入るかもしれません。バグなど出ないよう注意します。

引き続き本ツールをより良いものに出来るよう努めていきますので、今後も何卒宜しくお願いします。

以上

Posted in カスタムCSS


【Minecraft】プレイヤースキンから村人スキンを生成する


環境

  • Minecraft(JE)バージョン1.14

詳細

掲題の通り、マインクラフトにおけるプレイヤースキンを村人(villager)スキンに変換するツールを作成しました。JE版1.14での動作を確認済みです。

プレイヤースキンはクラシック・スリム両方に対応しています。

  • アップロード …… ファイルを選択しアップロードします。
  • タイプ …… アップロードしたプレイヤースキンのタイプを選択します。
  • 帽子 …… 帽子パーツの表示方法を選択します。
  • 上着・ズボン …… 上着・ズボンパーツの表示方法を選択します。
  • 四肢ベース …… 村人スキンの四肢を左右どちらの手足パーツから生成するか選択します。

画像枠をクリックすることで村人スキンのダウンロードが完了します。
ツールは下記に掲載されているので気になった方は試してみてください。

リソースパックなどで「assets\minecraft\textures\entity\villager\villager.png」へ配置することで村人のスキンに適用できます。配置方法を理解できていれば、バイオームごとに村人スキンを変えることも可能です。
リソースパックの作成方法については別途、公開されている方が多数いますのでそれらを参考にしていただければと思います。需要というか、反響があればまとめようかなと思います。

ツール側にも掲載していますが、変換元のプレイヤースキンが元々配布物であった場合は改変などに当たる場合もあるので、提供元の利用規約を確認の上使用してください。

以上、よきマイクラライフを!

Posted in Minecraft


一枚の画像からパラパラ漫画を生成する



今回作ったものは以下。ブックマークするならこちらをどうぞ。
CSSパラパラ漫画メーカー


はじめに

世の中には頭のいい人がたくさんいるもので、先日「CSSスプライト」と呼ばれる技術を知りました。

Webページ上でたくさんの画像を参照する処理を減らすべく、事前に必要な画像を一枚にまとめて、ブラウザ上では「その一枚の画像の特定の領域のみCSSで制御して表示させる」というもの。
確かに画像を読み込む回数が減る……なるほどって感じ。

今回はこの技術を用いて以下のような「複数のコマを横につなげた画像」からパラパラ漫画を作るツールを作ってみました。透過画像も利用可能。画像の種別はWebページに利用可能なものであれば行けるはず。
(※GIF画像作ってるわけじゃないよ)

何が起きるか説明するより見た方が早いので デモページ を見て。
……まぁ上記画像が一枚ずつコマ送りにされるだけです。

ツールの実態はPHPで作られたページでして、画像やらアニメーションの情報はURLから変数で渡してあげます。僕一人が使うだけならこのままでもいいのですが、利便性向上と他の人に使ってもらいたいなぁって時の為に必要な情報からURLを生成するフォームを作りました。

利用場面は正直分かんないですが、生成されたURLをOBSのブラウザソースに渡してあげれば配信画面なんかでも表示できたりするので、画面のにぎやかしくらいにはなるかもです。(元となる画像の用意は手間ですが……)

ではツールの簡単な説明だけ。

使い方

フォームは以下のような具合です。

各項目の解説は以下の通り。(そこまで説明することない)

  • 画像URL:利用する画像のURL
  • 1コマの横幅:画像全体ではなく、1コマあたりの横幅。(画像全体の横幅をコマ数で割った長さ)
  • 縦幅:画像の縦幅。めっちゃ長くしても元画像の縦幅以上にはならない
  • コマ数:何コマ分再生するかの指定
  • 1周/秒:全コマ分再生し終えるまでの時間
  • ループしない:これをチェックすると最後のコマで停止する。デフォルトはループする

「生成」ボタンを押したらURLが出てきます。
後はこのURLを好きに使ってくださいまし。

さいごに

今回参考にさせて頂いたのは以下のサイト。欲しい情報がピンポイントで見つかった。嬉しい。(粉蜜柑)

本記事はツールの紹介が出来ればそれでいいので、PHPやstyle要素の解説はせんでおきます。前述の通り作った本人でさえ使い道はよくわかりません故、ちょっとしたオモチャだと思ってくださいまし。

それでは、以上。

Posted in カスタムCSS


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 順風日記