些末巻

さまつまき スマホで見るとレイアウト終わるのでできればPCで読んでください

定期ゲを作るのは大変 という話

この記事は、定期ゲ・松 Advent Calendar 2020 1日目の記事です。
adventar.org

こんにちは、25氏です。
という挨拶も随分久しい気がします。お久しぶりです。

ありがたい事に今年もまたアドカレを開催できることになったので、トリばっかの去年とは打って変わり
今年は1発目に登録させていただきました。よろしくね。
ごあいさつが含まれるので、不要な場合はいい感じに読み飛ばしてください。



ごあいさつ

今年は4面!?

ということではじめましての方ははじめまして。25氏です。
自称魔法少女とかほうろう系天使とか動かす傍らで、
キャラプロフィールの一環で存在しないアニメのサイトを作ったりしています。

去年、やるぜ~とカレンダーを建てて即1面が埋まり、慌ててりぐに裏と鶏の2面を用意してもらい
なんとその2面とも埋まる大盛況ぶりでした。本当にありがとうございました。
じゃあ今年はというと……
f:id:shapa:20201120020335p:plain
いや多いな。1面あたり25記事はいるので、この時点で3面が確定しているとはこれ如何に。
とか言ってたら第4面ができたし。樅(もみ)です
本当にありがとうございます。

ということで、今年のトップバッターとして"定期ゲってどうやって(動いて)んのよ"的な、
技術的のようであんまり技術的じゃない、ふんわりした内容をお送りしたいと思います。
去年はゆうさんがゲームの作り方(マインド編)をお送りしてたし……
こうやって定期は制作・運営されてるんだな~なんて思ってもらえれば、幸いでございます。


はじめに:定期ゲは技術の結晶

大前提:定期ゲームってな~に

去年の記事でほぼほぼ答えが出ているので、丸投げします。
note.com
tyaunen.hatenablog.com
ですが、それだけだと流石によくないので……ちゃんと自分の言葉で説明もしますとも。

定期ゲームとは、ブラウザ上で展開されるゲームです。
会員登録やWebアンケートを答えるときをご想像ください。たくさんの質問に入力欄、そしてボタンに選択肢……
それらの質問がもし「あなたの考えたキャラクターについて」だったり、「そのキャラの戦術について」だったら?

f:id:shapa:20201128082454p:plain
百合鏡の宣言画面。まるで通販の注文ペーパーみた~い

プレイヤーであるあなたが答えた結果……あなたの考えたキャラクターが、あなたの考えた戦術で、敵と戦います
敵と戦うだけではありません。他のキャラクターと出会い、物資を売買し、世界を冒険します。
そんな冒険譚が、結果という形であなたの元へ届くのです。
定期ゲームとは、そんなゲームです。

f:id:shapa:20201128082712p:plain
あなたの考えたキャラクターが、ドカンと一発大ダメージを出したりして。

以前までは、皆せーので同じタイミングに結果が届くのが当たり前でしたが、
最近は、"AP"というリソースによって、結果を呼び出すタイミングを各自に委ねる"AP制ゲーム"も出てきています。
時代の進歩ですね。でも、本質は一緒です。

……ということで、そんな定期ゲームが如何様にして作られているのか、
解体新書ほどではないが、ふんわりと道しるべになるような雰囲気の、"定期ゲームってどうやって作るの?"な記事。
はじまりはじまり……


アウトプットはたいへん

素晴らしいゲームのコンセプト!
画期的なゲームシステムのアイデア
ぼくのかんがえたさいきょうの定期ゲーム!


気持ちと準備の面では完璧でも、それらを表現する力がなければゲームは生まれません。
脳内にうちよそエモエモイベントスチルが浮かんでいても、描かなければ伝わらないものです。

よしじゃあ技術を学んでゲーム制作だ!
それで、定期ゲームってどうやって作られているんですか? う~ん……
……そうならないように、この記事が技術のしおりになれれば幸いです。
肝心の技術の解説は?長くなるから各自で学んで頂く形で……


そもそもWebページってどういう仕組みなのよ

その前に、まず定期ゲームのプラットフォームであるWebページの仕組みを認識する必要があります。

例えば、お手持ちのスマホやパソコンで大好きな定期ゲームやツイッターなどの"Webページ"を開くとします。
その時どのような処理が生じて、我々の見るブラウザ(IEとかクロームとかのこと)にページが表示されているのでしょうか?
もちろん、ブラウザ君が頑張って0から生み出している訳ではあるまいし……

その実態は、ネットの大海原へWebページという"データ"をブラウザが取りに行っているということにあります。
一般的に、ページを取りに行くブラウザやユーザーは"クライアント"と、
ページのデータが置いてある場所のことを"サーバー"と呼称することが多いです。

そして、我々クライアントがサーバーへ「この場所にあるこのページを見せてくれや」と"リクエスト"することで、
サーバーはそのページをデータとして我々に返し……晴れてページの閲覧ができる!(これを、"レスポンス"といいます)
そういう感じで、この世界は成り立っています。すごいね~

f:id:shapa:20201127070816p:plain
データのキャッチボール


しかしてもちろん、データがポンと飛んできただけでは閲覧してもグチャグチャです。
せっかくの美麗サイトも、HTMLをそのまま開くと……ウォオオォォオオォオォ~~~~(文字列がたくさん並んで死ぬ)

f:id:shapa:20201122180559p:plain
ウォオオォォオオォオォ~~~~


こうならないために、HTMLやCSSといったデータを翻訳する存在……そう、"ブラウザ"が必要なわけです。
Chromeとか、Safariとか、EDGEみたいなね!

f:id:shapa:20201122184934p:plain
こうしてサイトは我々の食卓に届けられます


まずはこの、ユーザーへ届けられるデータこと……"フロントエンド"について、紹介していきましょう。


ガワを形作る、フロントエンドという概念

フタハナのプロフィールで作れるやつ

です。(解説終了)

……という説明だと多分あんまり伝わらないので、ちゃんと説明します。

フロントエンドとは、一般にWebサイトやWebサービスでユーザーが見たり操作したりできる部分を指します。
つまり、ガワのことです。"外側"のガワ。
定期ゲームで言えば結果画面宣言画面、あるいはチャット画面も含まれます。
画面、つまりは見えて操作できる部分(GUI)なわけですし。

これらに必要な技術は大まかに分けて3つ。
HTMLと、CSSと、そしてJavaScriptです。

f:id:shapa:20201125221148p:plain
「Web制作三銃士を連れてきたよ。」「Web制作三銃士!?」

書き方までは紹介できずとも、どんな概念かだけでも軽く紹介できればと思います。


フロントエンド 紹介編

これがなければ始まらない 全ての基盤HTML

「俺……HTMLかもしれん……」
HTMLというのはHyperText Markup Languageのことで……という難しい話は省きます。
早い話が"超すごい文書ファイル"です。
だいたいほぼ全てのWebサイトが、このHTMLによって作られています。スゲ~
先程の物凄い文字列も、HTMLの原文です。(これを、ソースといいます)

f:id:shapa:20201128061545p:plain
これははなアンのソース

HTMLの魅力というのは大きく分けて2つあり……まず、"ハイパーリンク"を埋め込める点。
ハイパーリンクと言うと聞き慣れないですが、いわゆるリンクのことです。上の画像の青文字下線のURLがそうですね
他のページへの導線や、画像のような色々なデータを紐付けする概念、それがハイパーリンクです。

そして……"要素"という形で、目印(タグ)を置くことができる点。
タグ、ご存知でしょう? <B></B>みたいなやつのことです。<なんらかの文字>で始まって、</ なんらかの文字>で終わるやつ。
定期の装飾タグの数とは比べ物にならないぐらい、あれがたくさんあります。
挟むだけで太字になるものや、箇条書きにしてくれるもの、あんまり意味のないものまで多種多様……!

と、語り始めれば無限に続いてしまうので、続きはMDNに丸投げします。
HTML を始めよう - ウェブ開発を学ぶ | MDN


ページを華麗に彩る 装飾のCSS

HTMLを書いた!表示! といきたい所ですが、このまま表示すると……00年代のサイトになってしまいます。
なぜなら……CSSでページのスタイルが弄られていないから!

CSS(Cascading Style Sheets)は、HTMLで指定したタグや要素を"装飾"することができます。
この装飾というのは、単に色をつけたり大きくしたりに囚われません。
位置や縁取りを整えたり、回転させたり、動かしたり……そういった"見栄え"を司るのが、CSSという言語です。

f:id:shapa:20201126042028p:plain
信じて送り出したHTMLがCSSでゴテゴテにデコられている様子


便利で強いCSSくんですが、もちろん何も考えずに全部乗せをすると大変なことになるのも世の常。
この辺りの出来はデザイン力が問われるかもしれません。

f:id:shapa:20201126000318g:plain
フルに使った例(提供:芹香の夫)

これ以外にも解説したいことは多いですが、長くなるのでこれまたMDNさんに丸投げします。
便利~
CSSとは何か? - ウェブ開発を学ぶ | MDN


動的サイトの鍵 動作のJavaScript

構築ヨシ!見栄えも完璧!!完成~~~~!!!やった~~~~~~!!!!
そこの若造……そのページ、更に便利に動作させたせたくはないか……? なんだァこのジジイは……?

JavaScriptというのはWeb上で動くプログラミング言語です。
(実は、HTMLもCSSプログラミング言語ではないんです)
「サイトを動的に更新するための言語です」という説明ではおそらく伝わらないので、かいつまむと……

「クリックしたら」「アクセスしたら」「スクロールしたら」のような条件付けから、
「HTMLを書き換える」「要素を表示させる」「別のリンクへ飛ぶ」といった動作を発生させる……
といった、プログラム的な動きによってHTMLやCSSに介入するのがJavaScriptの役割となります。

スマホサイトでボタンを押すと出てくるメニュー一瞬でページトップへ戻れるボタンといった便利な彼らは、
JavaScriptによって作られ、動作してることが多いです。
例えばこういうやつ。
gyazo.com
正直なところ25氏も全ては理解してないので、詳しくはMDNさんに丸投げします。
MDN大好き!一番好きなリファレンス集です。
JavaScript とは - ウェブ開発を学ぶ | MDN


ここまでで半分

HTMLの書き方を覚えて、CSSの扱い方を理解し、そしてJavaScriptを使いこなし……
既に大変な感じになってきました。既に3言語あります。
もちろん、これらを華麗に使いこなすには、Webサイトのデザインも適切に行わなければいけません。
やることが……やることが多い……っ!!

でも、これで定期ゲームの"ガワ"の部分は作ることができますね。
もちろん登録も継続も交流もできませんが、ハリボテなら作れるようになりました。
これは大きな進歩です。機能はまだないですが、それはこれから作ればいいのです。

ところで、フロントエンドというぐらいですからね。もちろん、バックエンドもあります。
前があるんだから後ろもあるわけです。
まだ覚えることあるんですか? あります。


サイトに機能をもたせる、バックエンドという概念

そのまえに

25氏理解してせん
なのでこの記事のために(そしていずれ自分で定期ゲを作るために)調べながら書いています。
間違ってたらすみません。


見えないものを見ようとして サーバーを覗き込んだ

"サーバーサイド"という概念

フロントエンド編ではユーザーが見る部分を紹介してきましたが、それだけでは定期ゲームは成り立ちません。
書いた日記を送る時、戦闘設定を弄る時、ロールの返事を返す時……
その時必ずサーバーにデータを送るのですが……HTMLとCSSではそれができません。JavaScriptはできます。(後述)
なのでサーバーに干渉するための言語、"サーバーサイド言語"が必要になるんですね~。

f:id:shapa:20201128071637p:plain
フロントエンドよりずっと広い(カバー範囲)

とはいえ、幸いフロントエンド編で紹介した時と異なり全ての言語をマスターする必要はないので、
気になったものをProgateやらで触ってみて、気に入ったもので作ってみるのがいいかもしれません。
それだけいろいろ種類がある、という意味でもあるわけですが。

今回は定期やAP制ゲームで使われてるのを見たものを中心に紹介します。


バックエンド 紹介編

古から伝わるブラウザゲーム向け技術 Perl

CGIゲームって知ってますか? 25氏はあんまり知りません。
今から20年ほど前の90年代後半から00年代初頭、MMORPGが生まれる前に流行っていたネットゲーム群のことです。
知ってそうな人に「エンドレスバトルって何?」とか「箱庭諸島って何?」って聞くと教えてくれるかも。

f:id:shapa:20201127111837p:plain
最近突然再開したCGIゲーム「Gladiators Station」の様子


当時これらを動かしてたのがPerl言語というプログラミング言語だったわけです。
霧の人のゲームも当時はPerlで動いてたらしいです。今は知らないけど
定期ゲーってどうやって作るの?|霧の残像領域

生まれたのが1987年という脅威の古参であるPerlには、それだけ安定性後方互換(※)の高さが売りな言語です。
後方互換性……新たに出たバージョンが、それより前のバージョンにも対応できること。
後述のPHPなど多数のサーバーサイド言語に影響を与えており、Perlから別の言語を学ぶ時に役立つことも……

とはいえ、今からPerlを学んで新たに定期を作るのはやや時代錯誤な感じもあります。
今はPerlより読みやすくて分かりやすい言語がたくさんあるので……


枯れた技術にして現代のスタンダード PHP

そんなPerlからうって変わって、PHP現代のスタンダードとも言える言語。
なんでもWordPressというPHPを使ったホームページ制作ツールは、世界の1/4のホームページを担ってるとか……
おそらく定期界隈でも一番使われているであろう言語だと思われます。多分。
知る人ぞ知る定期更新型ナマズくんゲームの作者、ゆき氏も解説してるくらいですし。
定期更新ゲームの作り方(目次) – ゆき工房


PHPの強みといえば、HTMLに埋め込む形で書けることにあります。
例えば<style>タグや<script>タグのように、<?PHP?>で挟むだけでphpを書くことができるわけです。
もちろんソースは長くなりますが、1つのファイルで収まるのは本当に便利。

f:id:shapa:20201128052153p:plain
phpとhtmlがくんずほぐれつ入り乱れる(そんなに入り乱れてない)様子


それと、(これはPerlにも言えるけど)すでに開発され尽くした概念なので、リファレンスが豊富という点もかなり強いです。
WordPressが普及してる昨今、フロントエンド言語ばりにカジュアルな解説サイトが多いので調べやすさはダントツ。
まあいかがでしたかブログも多いわけなんですが。
定期でも非常によく使われているので、定期GMに分からない所を聞けばきっと教えてくれること間違いなし。
多分。


サーバーでも戦えるJavaScript Node.js

サーバーサイドのさわりで触れたように、HTMLとCSSにはサーバーへ干渉する力はありません。
じゃあJavaScriptは? ……実は、できます。

Node.jsとは、早い話がサーバー上で動くJavaScriptです。
既存のフロントエンドでしか動かないJavaScriptをサーバーサイドでも動かせるように。
そしてサーバーを制御できるようにしたもの、それがNode.jsです。

なので、JavaScriptが書ければ書けるという大きなメリットを持っています。
フロントエンドをマスターする上で身につけたJavaScriptが、バックエンドで使えるならこれ以上なく便利ですよね。

f:id:shapa:20201128064153p:plain
便利ですよね。(25氏は全然書けないんですけど……)

ただし、Node.js用の環境構築が必要な点に注意。
一般的な共用レンタルサーバーではなく"VPS"という少し変わったレンタルサーバー契約が必要など、
コストや環境構築の複雑さは、定期ゲーム開発にNode.jsを用いるにはやや高いハードルになっているかもしれません。
レンタル料高いし……

詳しいことは、( 'ω'  )<)さんが全部書いてるので読めばわかる!!!!!!
メチャクチャボリュームが多いですが、これに全て従えばゲームができます。
Node.jsで作る定期・APゲーム|( 'ω' )<)|note


それ以外にも

もちろん、サーバーサイド言語は上記だけではありません。

PHPの発展型である"Ruby"、とにかく読みやすく分かりやすく深層学習もできる"Python"
30億のデバイスで走るとも言われるほどのマルチプラットフォームである"Java"や、Javaとの連携ができる"Scala"……
調べれば調べるほど言語自体はたくさん出てきます。どれを選ぶかはあなた次第……

ちなみに、サーバー内のデータベースを操作・参照するための"SQL言語"というのもあります。
これも必要に応じて(と言ってもPHPで作る時ぐらいでしょうが)習得しましょうね。
覚えることが多すぎる


おわりに

もちろん、定期はコードだけではない

フロントエンドとバックエンドの紹介、できていたでしょうか。できてないかも。
正直なところどの言語をとっても複雑で難しいですが、段階を踏んで学べば多分大丈夫だと思います。多分……
最近は無料有料問わず学習環境が増えてきたので、学びやすい土壌はあるはずです。はず。

おすすめはまずHTMLとCSSでサイトを作れるようになってから、JavaScriptに触るのが一般的でしょうか。
バックエンドに関しては、PHPから触れてみるのが一番とっつきやすいかもしれません。
Node.jsは環境構築が大変なので……

とはいえフロントエンドもバックエンドもコードはあくまでWebアプリケーションの骨子。
ここに注力しすぎて肝心の中身(コンテンツ)がおざなりにならないようにしましょうね。
何より、個人制作ゲームはGMの熱意が第一なので。


あとがき

いかがでしたか?(慣例)
正直なところ定期の制作に関する資料は結構多く、幾度となく「これいる?」になっていました。今もなってます。
しかし、"定期ゲームを作る"というコンセプトにありつつも"じゃあ定期ゲってどうやって作られてるの?"
技術屋以外の人向けにフィーチャーされた記事はあまり多くなかったので、今回はそういう気持ちで書いてみました。
いわばこの記事は遠足のしおりのような、そういう"さわり"の存在として役立てていただければと思います。

昨今の定期ゲーム、本来ならチームを組んで制作するような規模なのに
それらを1人やごく少人数で運営まで遂げてしまうGMが多く、非常に恐ろしいなと思っています。
個人制作ゲームとはかくも恐ろしい。

アドカレもまだ始まったばかりなので、今年も1ヶ月よろしくね。

25sec