【Discord StreamKit】複数のアイコン画像をまとめて差し替えるカスタムCSS



2023/3現在、執筆者環境で「@import url」がOBS上で機能せず本カスタムCSSが正しく動作しない状況を確認しています。
取り急ぎの解決方法としては「https://manten-do.net/tools/web_items/dsk02.css」へアクセスし、表示されたテキストを紹介している各カスタムCSS先頭に記載されている以下(1行目)と差し替える事で動作します。

詳細はこちらの記事もご参照ください。

@import url("https://manten-do.net/tools/web_items/dsk02.css?v20230228");

Discordの発話者を分かりやすくするボイスウィジェット「Discord Streamkit Overlay」のデザインを変更するカスタムCSSを紹介します。

過去に紹介した記事では通話参加者1人につき1つのブラウザソースを作る必要があり、配信・録画画面を作る際の細かい調整ができるメリットはありますが準備に手間がかかる側面がありました。

本記事で紹介するカスタムCSSの場合は、発話者ごとの細かい設定は出来ませんが、OBS上で用意するブラウザソースは1つで準備が完了します。用途によってはこちらの方が使い勝手がいいかもしれません。

1.アイコンを横並びにする

公式サイトより取得したDiscord Streamkit OverlayのURLでOBS上にブラウザソースを作成し、ベースとなる以下のカスタムCSSを設定してください。

@import url("https://manten-do.net/tools/web_items/dsk02.css?v20230228");

/* 変数 */
:root{
  --member:3;                    /* 参加する最大人数を指定します。立ち絵の横幅に影響します。 */
  --base-bottom:0px;             /* 画像の表示位置(高さ)を調整します。 */
  --silent-brightness:50%;       /* 非発話時の明るさを設定します。 */
  --speak-color:rgba(0,255,0,0); /* 発話時の縁取り色を設定します。rgba(赤,緑,青,透明度0~1) */
  --jump-bottom:10px;            /* 発話時のジャンプ距離を設定します。 */
  --floating-bottom:5px;         /* 浮遊アニメーションの移動距離を設定します。 */

  --icon-radius:100%;              /* アイコンの角を設定します。0(四角)~100%(丸) */
  --nametag-position:center;     /* ネームタグの表示位置を変更します。[left][center][right] */
  --nametag-view:unset;          /* ネームタグの表示・非表示を切り替えます。[unset][hidden] */

  /* アニメーションのキーフレーム指定(アニメーション無効可用) */
  --jump-anime:jump;
  --floating-anime:floating-;
  --floating-nametag-anime:floating-nametag-;
}

5行目の数字は横に表示できるアイコンの数です。この数分のアイコンがブラウザソースの横幅いっぱいに表示されるよう設定しているので、この数字を通話チャンネルの参加人数に合わせて適切な数に変更してください。

 --member:3;                    /* 参加する最大人数を指定します。立ち絵の横幅に影響します。 */

2.アイコン画像の形を丸から四角に変更する

「1.アイコンを横並びにする」で設定したカスタムCSSの12行目の数字「100%」を「0%」に変更すれば、丸く表示されていたアイコンが四角になります。

  --icon-radius:0%;              /* アイコンの角を設定します。0(四角)~100%(丸) */

3.アイコン画像を他の画像に差し替える

「2.アイコン画像の形を丸から四角に変更する」までで変更したカスタムCSSに画像を差し替える用のCSSを追記していきます。事前に以下の情報を取得して控えておいてください。

  1. 画像を差し替える発話者のID(Discord上でアイコンを右クリック⇒IDをコピー)
  2. 差し替える画像のURL

追記するCSSは以下です。

img[src*="画像を差し替える発話者のID"]{
  content:url("差し替える画像のURL");
}

事前に取得した2つの情報に置き換えた上記CSSを人数分カスタムCSSに追記(22行目以降)していきます。

@import url("https://manten-do.net/tools/web_items/dsk02.css?v20230228");

/* 変数 */
:root{
  --member:3;                    /* 参加する最大人数を指定します。立ち絵の横幅に影響します。 */
  --base-bottom:0px;             /* 画像の表示位置(高さ)を調整します。 */
  --silent-brightness:50%;       /* 非発話時の明るさを設定します。 */
  --speak-color:rgba(0,255,0,0); /* 発話時の縁取り色を設定します。rgba(赤,緑,青,透明度0~1) */
  --jump-bottom:10px;            /* 発話時のジャンプ距離を設定します。 */
  --floating-bottom:5px;         /* 浮遊アニメーションの移動距離を設定します。 */

  --icon-radius:0%;              /* アイコンの角を設定します。0(四角)~100%(丸) */
  --nametag-position:center;     /* ネームタグの表示位置を変更します。[left][center][right] */
  --nametag-view:unset;          /* ネームタグの表示・非表示を切り替えます。[unset][hidden] */

  /* アニメーションのキーフレーム指定(アニメーション無効可用) */
  --jump-anime:jump;
  --floating-anime:floating-;
  --floating-nametag-anime:floating-nametag-;
}

/* アイコンを立ち絵画像に差し替える(人数分設定する) */
img[src*="画像を差し替える発話者のID①"]{
  content:url("差し替える画像のURL①");
}

img[src*="画像を差し替える発話者のID②"]{
  content:url("差し替える画像のURL②");
}

img[src*="画像を差し替える発話者のID③"]{
  content:url("差し替える画像のURL③");
}

4.その他の設定

基本的な設定は1~3までの設定を行えば完了しますが、カスタムCSSの3~20行目までの設定値を変更することで他にも細かい設定を行うことができます。

4-1.立ち絵の表示位置を調整

6行目の数字を変更することで表示される画像の高さを変更できます。
デフォルトは0pxで、これは画像下部が画面の下から0pxの位置にあることを意味します。

  --base-bottom:0px;             /* 画像の表示位置(高さ)を調整します。 */

差し替えた全身立ち絵をバストアップにしたい場合などは「-〇〇px」というように数字を低くすれば画像の表示される高さを低くすることができます。

4-2.非発話時の明るさを設定

7行目の数字「50%」は非発話時に明るさが50%まで暗くなる設定となっています。画像の明滅を抑えたい場合、調整したい場合はこの数字を0~100%の間で変更することで対応できます。

  --silent-brightness:50%;       /* 非発話時の明るさを設定します。 */

4-3.発話時に色で縁取りする

8行目の設定で発話時に色付きの影を画像に落とすことができます。
「rgba(0,255,0,0);」に「rgba(赤,緑,青,透明度0~1)」と対応する数字を入力することで色・透明度を設定できます。

  --speak-color:rgba(0,255,0,0); /* 発話時の縁取り色を設定します。rgba(赤,緑,青,透明度0~1) */

4-4.発話時に跳ねる距離を設定

9行目の数字を変更することで、発話時に跳ねているアニメーションで動くpx距離を調整できます。
この数字を0にした場合、発話者が動くアニメーションを抑制することができます。

  --jump-bottom:10px;            /* 発話時のジャンプ距離を設定します。 */

4-5.ネームタグ関連

13・14行目の設定を変更することで、ネームタグの表示・非表示の切り替えや、表示位置の変更ができます。

  --nametag-position:center;     /* ネームタグの表示位置を変更します。[left][center][right] */
  --nametag-view:unset;          /* ネームタグの表示・非表示を切り替えます。[unset][hidden] */

13行目の「center」は中央表示、「left」は左寄せ、「right」は右寄せ表示となります。
14行目の「unset」を「hidden」とすると、ネームタグを非表示とすることができます。

5.さいごに

4の項目で紹介したもの以外にも立ち絵をフワフワと常に動かす待機アニメーションも設定が可能なのですが、こちらの機能は長時間再生していると全体的に動きがカクついてしまうのでここでの紹介は省略します。(GPU使用の設定ONにしてるけどそれでも重たい……)

あと余談ではありますが、本記事でデモ画像に使用していた立ち絵は最近作り始めたBOOTH販売フリー配布用の立ち絵素材になります。可愛いなと思っていただけたら是非ご利用、ないしお友達なんかに紹介お願いします。。。

今回作成したカスタムCSSが好評であれば、過去に作成したようなWebツール化も視野に入れようかと思います。

本ツールがTRPGの録画や配信者さん方の支援となれば幸いです。

Posted in カスタムCSS


【フリー立ち絵04】ギターケースを背負った少女


利用規約https://manten-do.net/freeillust/illust_terms
ダウンロードhttps://manten-do.net/wp-content/uploads/2023/02/04.zip
BOOTH販売ページhttps://manten-do.booth.pm/items/4572147
内容■無料版
・全身立ち絵(表情差分2枚)
・形 式:背景透過PNG
・サイズ:横813×縦1150px
・解像度:350dpi

■有料版(BOOTH限定)
・全身立ち絵(表情差分7枚)
・形 式:背景透過PNG
・サイズ:横1626×縦2300px
・解像度:350dpi
Continue reading “【フリー立ち絵04】ギターケースを背負った少女”
Posted in イラスト


【フリー立ち絵03】シスター服の女性


利用規約https://manten-do.net/freeillust/illust_terms
ダウンロードhttps://manten-do.net/wp-content/uploads/2023/02/03.zip
BOOTH販売ページhttps://manten-do.booth.pm/items/4559965
内容■無料版
・全身立ち絵(表情差分3枚)
・形 式:背景透過PNG
・サイズ:横813×縦1150px
・解像度:350dpi

■有料版(BOOTH限定)
・全身立ち絵(表情差分6枚)
・形 式:背景透過PNG
・サイズ:横1626×縦2300px
・解像度:350dpi
Continue reading “【フリー立ち絵03】シスター服の女性”
Posted in イラスト


【フリー立ち絵02】中華風の女性


利用規約https://manten-do.net/freeillust/illust_terms
ダウンロードhttps://manten-do.net/wp-content/uploads/2023/02/02.zip
BOOTH販売ページhttps://manten-do.booth.pm/items/4552106
内容■無料版
・全身立ち絵(表情差分3枚)
・形 式:背景透過PNG
・サイズ:横813×縦1150px
・解像度:350dpi

■有料版(BOOTH限定)
・全身立ち絵(表情差分3枚)+色差分1セット
・形 式:背景透過PNG
・サイズ:横1626×縦2300px
・解像度:350dpi
Continue reading “【フリー立ち絵02】中華風の女性”
Posted in イラスト


【フリー立ち絵01】エルフの少女


利用規約https://manten-do.net/freeillust/illust_terms
ダウンロードhttps://manten-do.net/wp-content/uploads/2023/02/01.zip
BOOTH販売ページhttps://manten-do.booth.pm/items/4528464
内容■無料版
・全身立ち絵(表情差分3枚)
・形 式:背景透過PNG
・サイズ:横742×縦1050px
・解像度:350dpi

■有料版(BOOTH限定)
・全身立ち絵(表情差分3枚) + ダークエルフ色差分1セット
・形 式:背景透過PNG
・サイズ:横1626×縦2300px
・解像度:350dpi
Continue reading “【フリー立ち絵01】エルフの少女”
Posted in イラスト


【Discord StreamKit】差し替えた立ち絵にまばたきをさせるカスタムCSS


本サイトではDiscordのStreamKitで取得できる発話者アイコンをOBS上で立ち絵に差し替えるカスタムCSSを紹介してきました。本記事ではこの差し替えた画像にアニメーションを設定し、まばたきをさせる方法を紹介します。

過去の紹介記事は以下になります。まばたきアニメーションは不要なのでとりあえず立ち絵を差し替えたいという場合はこちらも見てみてください。

事前準備

使用する立ち絵画像

今回、まばたきをするアニメーションを設定するために、以下の画像素材が必要となります。

  • 立ち絵画像①:通常
  • 立ち絵画像②:目閉じ差分
  • 立ち絵画像③:半目差分(※)

※半目差分についてはアニメーションを滑らかにする場合に必要ですが、妥協する場合はなくても問題ありません。

上記の用意した画像は「①②③①」の順番で横に4つ並べて結合し1枚の画像にします。用意する差分は横幅がバラバラにならないよう注意してください。画像の結合に関してはお手元のペイントソフトツール(背景透過に対応したもの)を利用するか、以下のようなオンライン上で可能なツールを使用して合成しましょう。

合成の終わった画像はDiscordの個人サーバーなどにアップロードし、URLを控えておきましょう。

必要な情報の取得

StreamKitをOBSに取り込むために必要な情報を取得します。
必要な情報は事前に取得した画像URLに加え、「ボイスウィジェットのURL」「画像を差し替えるDiscordユーザのID」です。これらの情報の取得方法については過去の記事に掲載していますのでそちらを参照してください。

カスタムCSSの作成

今回はまばたきアニメーションの他に、待機中にふわふわと浮遊するアニメーション発話時にぴょんと跳ねるアニメーションの2つを追加で設定します。

事前準備の段階で控えた情報を以下カスタムCSSのコード内で差し替えて控えてください。

  • ①DiscordユーザのID
  • ②画像URL
/* 各種アニメーション用変数 */
:root{
  --step-cnt:4;
  --step-sec:10s;
  --step-anime:step var(--step-sec) steps(var(--step-cnt)) infinite;
  --speak-anime:speak-now 300ms ease-in-out forwards;
  --floating-anime:floating-now 4500ms ease-in-out forwards infinite;
}

/* 選択したユーザ以外の画像を非表示にする */
img:not([src*="①DiscordユーザのID"]){ display:none; }  /* <------- 変更箇所1 */
img:not([src*="①DiscordユーザのID"])+div{ display:none; }  /* <------- 変更箇所2 */
li{ position:fixed;top:15px;left:0;right:0;width:100%; }

/* アイコンを立ち絵画像に差し替える */
img[class*="Voice_avatar_"]{
  content:url("②画像URL");  /* <------- 変更箇所3 */
  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%);
  width:calc( 100% * var(--step-cnt) ) !important;
  left:calc( 100% * ( ( var(--step-cnt) / 2 ) - 0 ) );
  object-fit:cover;
  animation: var(--step-anime);
}
@keyframes step {
  97% { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - 0 ) ); }
  to { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - var(--step-cnt) ) ); }
}

/* 浮遊アニメーション */
li[class*="Voice_voiceState"]{
  border-color:rgba(0,0,0,0) !important;
  animation:var(--floating-anime);
}
@keyframes floating-now {
  0% { top:15px; } 50% { top:10px; } 100% { top:15px; }
}

/* 発話状態の設定 */
img[class*="Voice_avatarSpeaking"]{
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation:var(--speak-anime),var(--step-anime);
}
@keyframes speak-now {
  0% { bottom:0px; } 50% { bottom:10px; } 100% { bottom:0px; }
}

/* ネームタグ表示位置調整 */
div[class*='Voice_user']{text-align:center; position:fixed; bottom: 10px; left:0;right:0;margin:auto; }
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }

補足

事前準備の段階で、まばたき画像を「立ち絵画像①:通常」「立ち絵画像②:目閉じ差分」の2枚しか用意できていない場合、合成する画像は「①①②①」としてください。

差分を細かくする場合(4枚以上になる場合)、CSS3行目の「–step-cnt:4;」の数字を横に並べた画像の枚数に合わせることで対応可能です。ただし画像の枚数は100の公約数(2、4、5、10など)にしないとアニメーション時にイラストの位置が微妙にずれてしまうので注意してください。

  --step-cnt:4;

まばたき以外のアニメーションに対応させたい場合は31行目以降のキーフレームの項目からアニメーションのタイミングを調整してください。

@keyframes step {
  97% { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - 0 ) ); }
  to { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - var(--step-cnt) ) ); }
}

OBSへの設定

準備した情報を元にOBSのソースを作成します。OBSのブラウザソースを作成し、URLにはボイスウィジェットのURL、カスタムCSSには先程作成したCSSのコードを入力します。

設定したボイスチャットへ入室し、設定した立ち絵が表示されたら設定は完了です。今回のカスタムCSSでは10秒に1回のペースで表示された画像がまばたきをします。

ツール紹介

まばたき無し版は既に公開済みですが、今回その機能拡張版としてこちらの記事の内容に対応した立ち絵変換ツールを公開しています。

必要な情報をフォームに入力すればコードを出力するようにしていますので、繰り返し使用したいという方はそちらをブックマークしておくと便利かもしれません。

本記事の紹介内容は以上になります。
配信や録画の場で活用する機会があれば是非お役立てください。

Posted in カスタムCSS


【ブルーアーカイブ】慣れるまでに気にした事メモ


ブルーアーカイブ2周年直前にデビューした新米先生です。

始めて2週間ほどですが現時点でレベルは47。友人からは「早い方」と評価頂きました。
まだ慣れきってない人間目線で、これ覚えてたら効率的に出来たかなぁっていうのをちょっと日記がてら書いていきます。始めからランカーを目指している方向けではありませんが、ライトに楽しみたいと思っている先生の参考になれば嬉しいです。

1.リセマラについて

ブルアカにもユーザ評価の範疇ですが生徒のTier(キャラランク)のようなものが当然あったりします。それらの情報は各種攻略サイトなどでまとめられてますが、読むべきポイントとしては「任務(クエスト)向けかどうか」と「攻撃タイプ」かなと思います。

1.1.任務向けかどうか

ブルアカにおけるクエストは総じて「お仕事」と呼ばれています。その中の「任務」という項目が最もベーシックなブルアカの戦闘コンテンツのようです。

この任務の進捗に応じて他のお仕事や施設などが解放されていくため、対人戦をするつもりのない人であれば任務を攻略することが主な目標になると思います。

※ついこの間までは任務の進捗に応じてメインストーリーが解放されるというシステムだったこともあり、そのせいで人に勧めずらい(シナリオを読むまでの労力が見合わない)コンテンツだったらしいですが、今はその条件もなくなっているので「始めるなら今から!!」とみんな湧き上がっているわけですな。

そして各種攻略サイトの評価を読む際、同じ評価ランクでもこの「任務向け」「対人戦向け」「(他お仕事)向け」など異なる評価がされていることがあるかと思います。対人戦に力を入れるつもりのなかった筆者的には、任務攻略を優先したい気持ちが強かったので、リセマラするなら任務に連れていける強い子を粘るのがいいと感じました。

1.2.生徒の「攻撃タイプ」は「貫通」「爆発」「神秘」

生徒にはざっくり4つ、役割クラス攻撃タイプ防御タイプという属性があります(ホントはもう少し細かいですが)。中でも主に注目したのは攻撃タイプでした。

攻撃タイプ、防御タイプの2つには有利不利の相性があり、戦闘では出てくる敵の防御タイプにあった部隊を編成して攻略を行います。「貫通」「爆発」はある程度ガチャをしていれば層が厚くなってきますが、「神秘」の攻撃タイプを持つ生徒は不足しがちです。ただ、序盤の任務では「神秘」タイプはあまり必要とされないので不要といえば不要だなとは思います。

役割についてはフィールドに登場して戦う「STRIKER」と後方支援を行う「SPECIAL」の2種類です。
上記を踏まえて、強力なアタッカーを確保したいなら「STRIKER」のキャラクターから引きたいキャラを選ぶのがいいかなと思います。

また、所感ですが「爆発」属性の生徒はレアリティの低い生徒で何とかなる場合が多いので、個人的には「貫通」攻撃ができる強力な生徒を粘るのが楽だったのかなぁと思います。

あと変わり種ですが、筆者は「T.S(タクティカルサポート)」と呼ばれるクラスのキャラが好きで、偶然引いていた「イロハ」というキャラに結構助けられました。
この辺の強みはwikiなど見てみてくださいませ。

1.3.ぶっちゃけ

見た目(絵師さん)とか声優さんとかプロフィールとか、解放されてるストーリー見て好きな子選ぶのが一番ストレスない(早口)。

僕はリセマラしてなかったですが最初のガチャできた「アル」「ヒフミ」がストーリーでも活躍してくれてモチベーション滅茶苦茶上がりました。

2.生徒を育てるには

このゲームにおいて、生徒には常にレベル上限が設定されており、それはプレイヤーレベル……つまり先生Lvまでとなっています。

キャラを強くするためにはこの先生レベルを上げなければならず、そして先生レベルは「AP(スタミナ)の消費量がそのまま経験値」なので、日々のAP回収方法を把握していくことでレベリングを効率化することができます。

※APは自然回復し、また「カフェ」という施設でも時間経過で蓄積したAPを回収することができます。最大効率を目指す場合、このAPの回収漏れがないようにするのが肝要です。

APの回収方法は以下の通りです。この辺をこなしていたら、現時点の最大レベルである85レベルまでは無課金の状態でも半年強で到達できます。

  • 自然回復(1AP/6分)※1日240AP
  • カフェ収入(3.83~/1時間)※任務の進捗でランクアップ
  • ショップ購入(1日90AP
  • サークル報酬(1日10AP
  • 青輝石消費(1回120AP・1日20回迄)※
  • デイリーミッション(150AP
  • ウィークリーミッション(350AP

※青輝石消費、つまりガチャ用の石を割る事でスタミナを得ます。これは3回ごとに青輝石の消費量が増加していき、最初の3回は1回30個、次の3回は1回60個、次の3回は1回100個とどんどん上がります。現実的なラインは30消費を3回、60消費を1~2回くらいまでだと思います。ガチャと合わせて月々の石収支をちゃんと管理できるなら1日何回石を割るか考えてみるのも良いかなと思います。

APの消費については1クエストあたり10~20AP消費。青輝石は120個につきガチャ1回(1200個で10連1回)というレートです。ご利用は計画的に。

2.1.ストーリーを一気に読むために

メインストーリーは基本的に話を読むだけで進行でき、たまにある戦闘も選出はストーリーに登場した生徒が選出されているため自前の生徒を育成している必要はないです。ただ、(※具体的にどことは言えませんが)要所で自分の育てた生徒を編成して戦闘をする必要が出てきます。

現在難易度調整が入ったことでクリアは容易になっていますが、それでもレベル35~40ほどの生徒を揃えていなければクリアは難しいです。「神秘」属性のアタッカー2人、タンク1人、ヒーラー1人くらいを集中して育てておくことをお勧めします。インストール後、1週間くらい育成に集中すればレベル自体はそこまで到達しているはずです。

★3のオススメ生徒を挙げるなら、筆者の場合は「イロハ(当時Lv36)」がいたことでクリア出来ました。

2.2.キャンペーンについて

ブルアカでは報酬アップ、経験値アップなど、何かしらのキャンペーンが定期的に実施されており、前述したAPの消費先はこのキャンペーン対象のお仕事を選ぶのがオススメです。

本記事執筆時点で予定されてるキャンペーンで特筆するのは「先生レベル経験値2倍キャンペーン」です。ブルアカでは長期間APを貯めておく手段(FGOの林檎みたいなもの)がなく、ウィークリーの報酬やメールから受け取る報酬のAPはこのキャンペーンに合わせて受け取るとちょっとお得かもしれません。

※溢れたAPをメールボックスに送る保管方法があるので、気になった方は「ブルアカ AP貯蓄」でしたべてみるといいかも。

3.さいごに

ここまでを1日のルーティンとしてこなして30レベルを越えだしたころには、かなり1日の行動が最適化されてるのではと思います。

ストーリーの一気読みも出来て、2周年キャンペーンの期間中で、今がまさにブルアカの始め時です。
メインストーリー読んでドはまりしてしまったので遊んでくれる人増えたらいいなと思ってこんな記事書くくらいには好きなゲームになりました。不覚。。。

当然人によって好みは千差万別ですが、「タイムラインでたまに見るブルアカの可愛い子気になるなぁ」とかそんな興味関心レベルの方でも全然楽しめると思います。

なお、キサキちゃんはまだ未実装です。。。

麻枝准氏や庵野秀明氏の書くシナリオで育った世代ならかなりしっくりくる文章を摂取できる……はず。好きなPV貼っておきますのでこれ見て「お?」ってなったらパヴァーヌ編ってストーリーまででも見て欲しい。あわよくばそのままエデン条約編もやってほしい。そして全部やってほしい。

そんなこんなでブルアカ始めたて先生の所感多めな備忘録兼日記でした。

以上。よきブルアカライフを。

Posted in 順風日記


【MediaWiki】URLからindex.phpを省略する


MediaWikiを導入する際、そのままだとURLは「https://ドメイン/index.php/ページ名」となります。見栄え的にもSEO的にもindex.phpを省略した状態でアクセスしたいため、その設定方法を紹介します。

本記事で紹介する手順を含めた、インストールまでの全工程をまとめている記事もありますので「これからインストールする」という方はそちらもご覧ください。

修正箇所

編集するファイルはルートディレクトリに配置されている「.htaccess」と「LocalSetting.php」の2つです。

「.htaccess」の編集

以下の内容を追記します。

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

「LocalSetting.php」の編集

以下の内容を追記します。

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

編集したファイル2点をアップロードしてブラウザへアクセスし、index.phpを省略した状態でアクセスできていることが確認できれば作業は完了です。

Posted in サーバ関連