不撓不屈

戦国史同盟管理人・蛛賢(Shuken)のブログです。 サイト運営情報、技術情報、備忘録、作品公開等について投稿しています。

技術情報

背景2
九州南北朝時代のクイズゲームを制作してみました。
菊池武光公生誕700周年記念の私的なコラボ企画第一弾です。



propsgamesというWebサイト上でゲームが作れるサービスを使わせていただきました。
九州の南北朝時代は諸将の思惑で南朝、北朝どちらに付くのか複雑怪奇な状況でした。
そんな中でも菊池家は一貫して南朝方、ひいては懐良親王と共に九州に覇を唱えました。

もし興味を持たれましたら、クイズを初め、以下の菊池一族プロモーションサイト等をご参照ください。
菊池市菊池一族プロモーションサイト

クイズ内の画像素材は菊池市様から直接御提供いただきました!!
本当にありがとうございます

絵があるだけで全然違いますね。

なお、動きがおかしいといった指摘や、ご意見ご感想等ありましたら、お気兼ねなくお待ちしております。

--------------------

続いて、propsgamesでのクイズゲームの作り方について紹介します。
基本的には管理人さんのQiitaを参照いただければ十分だと思います。

この中でもクイズゲームの制作方法がありましたが、
私は「数あるクイズ集の中からランダムに10問出題する」というのをしたかったので、
以下のように出題を別の機能として呼び出すこととしました。

blog投稿用


あとpropsgamesには配列がありませんので、ダイスとの組合せで擬似的にランダムを実現しています。
イメージとしては、3つのダイスでそれぞれ「最初の数」「正負」「進数」を決めて該当する問題を出題しています。

<ダイス 代入先="int出題ID" 目="1,2,3,4,5,6,7,8,9,10" 速度="30" 遅延="3" 順番="裏実行"/>
<ダイス 代入先="int初期ダイス1_正負" 目="1,-1" 速度="30" 遅延="3" 順番="裏実行"/>
<ダイス 代入先="int初期ダイス2_進数" 目="1,2,3,4" 速度="30" 遅延="3" 順番="裏実行"/>
【例】
最初の数:3、正負:1、係数:2 なら
問題:3、5、7、9、11、13、15、17、19、21
とった感じです。
もちろん、ゼロ以下だったり最大問題番号を超えたらループするように加減します。


【出題に関するところ】
…略…

<ループ 条件="int出題カウント<int出題数+1" タイプ="数値" >
  <待機 時間="1000" />  
  <コード呼出 コード名="function問題" />
  <計算 結果="int出題カウント" 式="int出題カウント+1" />
  <待機 時間="1000" />  
  <画像表示 ID="51" 透明度="100" 時間="0" />
  <画像表示 ID="52" 透明度="0" 時間="0" />
  <画像表示 ID="53" 透明度="0" 時間="0" />
  <画像表示 ID="55" 透明度="0" 時間="0" />
</ループ>

…略…

「コード呼出」で「function問題」を呼出し、出題を行います。
繰り返して出題数が一定数となったら、ループを終了し、エンディングに移ります。
「画面表示」は、問題の正解/不正解表示の切り替えです。


【機能「function問題」の初めから途中までの一部】
//次の問題を選択します
<計算 結果="int出題ID" 式="int出題ID+(int初期ダイス1_正負*int初期ダイス2_進数)" />
<変数変更 変数="int問題ID" 値="1" />

//オーバーフローしたら戻します
<もしも 条件="int出題ID<1" タイプ="数値" >
  <計算 結果="int出題ID" 式="int出題ID+int問題ストック数" />
</もしも>
<もしくは 条件="int出題ID>int問題ストック数" タイプ="数値" >
  <計算 結果="int出題ID" 式="int出題ID-int問題ストック数" />
</もしくは>

<効果音 ファイル="drum-japanese2.mp3" 音量="80" />

//問題IDごとに分岐
//-----------------------------------------------------------------
<もしも 条件="int出題ID=int問題ID" タイプ="数値" >
<選択>
<会話 名前="" 速度="80" >
第<変数表示 変数="int出題カウント" />問!<改行 />
菊池家は北朝方?南朝方?
</会話>
<選択肢 メッセージ="一貫して北朝方" >
<効果音 ファイル="incorrect1.mp3" 音量="80" />
<画像表示 ID="53" 透明度="100" 時間="5" />
</選択肢>
<選択肢 メッセージ="一貫して南朝方" >
<効果音 ファイル="correct1.mp3" 音量="80" />
<画像表示 ID="52" 透明度="100" 時間="5" />
<計算 結果="int正解数" 式="int正解数+1" />
</選択肢>
<選択肢 メッセージ="初め北朝方、後に南朝方" >
<効果音 ファイル="incorrect1.mp3" 音量="80" />
<画像表示 ID="53" 透明度="100" 時間="5" />
</選択肢>
<選択肢 メッセージ="初め南朝方、後に北朝方" >
<効果音 ファイル="incorrect1.mp3" 音量="80" />
<画像表示 ID="53" 透明度="100" 時間="5" />
</選択肢>
</選択>
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="0" >
≪解説≫<改行 />
正解は「一貫して南朝方」<改行 /><クリック />
<改行 />
菊池家は、後醍醐天皇の建武の新政を受け第12代武時が挙兵し、武功として第13代武重が肥後守を任じられて以降、南北朝時代は第17代武朝が北朝方と和睦するまで一貫して南朝方でした。<改行 />
<クリック />
</小説>

</もしも>
<計算 結果="int問題ID" 式="int問題ID+1" />

//-----------------------------------------------------------------
<もしも 条件="int出題ID=int問題ID" タイプ="数値" >
<選択>
<会話 名前="" 速度="80" >
第<変数表示 変数="int出題カウント" />問!<改行 />
観応の擾乱において<改行 />少弐家はどちらについた?
</会話>
<選択肢 メッセージ="探題方(尊氏方)" >
<効果音 ファイル="incorrect1.mp3" 音量="80" />
<画像表示 ID="53" 透明度="100" 時間="5" />
</選択肢>
<選択肢 メッセージ="佐殿方(直冬方)" >
<計算 結果="int正解数" 式="int正解数+1" />
<効果音 ファイル="correct1.mp3" 音量="80" />
<画像表示 ID="52" 透明度="100" 時間="5" />
</選択肢>
<選択肢 メッセージ="宮方(南朝方)" >
<効果音 ファイル="incorrect1.mp3" 音量="80" />
<画像表示 ID="53" 透明度="100" 時間="5" />
</選択肢>
</選択>
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="0" >
≪解説≫<改行 />
正解は「佐殿方(直冬方)」<改行 /><クリック />
<改行 />
少弐家は、足利尊氏の建武の新政からの離反以降、北朝方として行動していましたが、多々良浜の戦い以降一色範氏が九州探題とされると、太宰少弐として面白くない第6代頼尚は九州に逃れてきた足利直冬を擁立し、佐殿方の中心として行動しました。<改行 />
<クリック />
</小説>
</もしも>
<計算 結果="int問題ID" 式="int問題ID+1" />

…以下略

「//」を先頭に付けているのはコメントの明示で、特に意味はありません。
※propsgamesでは、命令タグ外の文字は読み込まれないそうです。(結果的にコメントアウト)

「もしも」を使って、出題IDの値と同じ問題IDのものが出題されます。
問題IDは数値をハードコーディングした方が可読性は高いかと思いますが、並び替えだの差し替えだのが発生しているためこのような記述にしています。

このようにランダム部分だけ抜き出すと色々な場面に応用できると思います。

御参考になれば幸いです。

菊池武光公の盛り立て企画は今後も何かしら進めていきたいと考えています。


このエントリーをはてなブックマークに追加 mixiチェック

livedoorBlogがHTTPSに対応したようです。

ブログの設定→基本設定→HTTPS→利用する→設定する

設定画面の下方に色々と留意点が記載されていましたが、私は特段問題なくスムーズに移行できました。

また、独自ドメイン利用者ですが、今のところ支障ありません。良かったです。




このエントリーをはてなブックマークに追加 mixiチェック

Dokuwikiのbootstrap3スタイルは、その名の通り便利なスタイルなのですが、標準だとタイトルが小さかったり、スマホで見ると以下のようにタイトルが上に食い込んで変な表示になります。

dokuwiki_smapho_css


そこで、次のサイトを参考にcssを修正してみました。(感謝!)




なお、Wikiのタイトル画像に合わせて「.navbar-brand」を次のとおり変更。
(リサイズしても height、margin-topの値が同じ値としたのはご愛嬌…)

.navbar-brand{
height: 80px;
margin-top: 0px;
}
@media (min-width: 768px){
.navbar-brand{
height: 80px;
margin-top: 0px;
}
#dw__logo.dw-logo-tagline{
margin-bottom: 0;
}
}
スマホの表示も改善されたかと思います。
いかがでしょうか。よろしくお願いします。


【参考】

このエントリーをはてなブックマークに追加 mixiチェック

Twitterと連携して、匿名メッセージを受信できるサービス、マシュマロとPeingを始めてみました。

マシュマロは、AIがネガティブなメッセージを除外して、
ポジティブな内容のみを匿名で相手に送るサービス。



Peingも類似したサービスですね。というかコチラが先発のようです。
こちらはメッセージというか基本は質問箱です。



どこまで需要があるか分かりませんが、いわゆる「わさもん」なので始めてみました。
何でも構いません。メッセージお待ちしています。
時間を見つけて回答します。
このエントリーをはてなブックマークに追加 mixiチェック

備忘のため投稿します。

使える文字、使えない文字色々あるようですが、PHPでは次の正規表現で抽出できると思います。
(2020年6月6日現在の内容です。ちょいちょい変わるようです。)

この例ではハッシュタグを抽出したら、その文字列をaリンクタグで囲むように置換しています。
オプションのUnicode「/u」は必須です。例の「rel = "noopener"」も追加しています。
$full_text = preg_replace('/(?:^|[^\w\x{05be}\x{05f3}\x{05f4}&_\/]+)
[##]([\w\x{05be}\x{05f3}\x{05f4}]*[\p{L}_\x{30FB}]+[\w\x{05be}\x{05f3}\x{05f4}]*)/u', '<a href="https://twitter.com/hashtag/$1" target="_blank" rel="noopener">#$1</a>', $full_text);
ただし、これの場合、直前の改行も置換する場合があるので、
文中のハッシュタグでない「#」の可能性を考慮せず、割り切ってしまえば、
$full_text = preg_replace('/[##]([\w\x{05be}\x{05f3}\x{05f4}]*[\p{L}_\x{30FB}]+[\w\x{05be}\x{05f3}\x{05f4}]*)/u', '<a href="https://twitter.com/hashtag/$1" target="_blank" rel="noopener">#$1</a>', $full_text);
でも良いかと思います。(良い方法あればご教示ください……)

なお、Twitter APIで本文を取得する際には、デフォルトだと115文字程度で省略されますので、
クエリオプションに「"tweet_mode" => "extended"」を追加するようにしましょう。
その際、本文の格納先が「text」から「full_text」になるので留意ください。

また、クエリ結果をデータベースに格納する場合は、
本文中の特殊絵文字が扱えるようにテーブルの文字コードを「UTF8MB4」にしてください。

いろいろ独特なAPIと感じています。
日々勉強していますが、ある程度の妥協も必要かと思いました。

【参考】
参考URLには中黒「・」対応(おそらく途中から使えるようになった?)と、
文中に出現した場合のハッシュ直前の抽出について追加しています。


追加したバージョンのテスト結果。
(.NET用なのでUnicodeが/u~となっています。PHPでは/x{~}となります。)
.NET Regex Tester - Regex Storm

このエントリーをはてなブックマークに追加 mixiチェック

↑このページのトップヘ