技術

    ニコニコ動画の生放送コミュニティを色付けするプラグイン作った

    PAYDAY2 Blacklist Assist

    最近更新中のPAYDAY2のBlacklist MODの補助ツール
    ※特に理由が無い場合は最新バージョンを使用してください。


    ━━━━━━━━━━━━━━━━━━━━━━━━━━━

    ニコニコ動画を今更見始めたが、お口が悪かったりする配信者のものは見ていて気持ちの良いものではないので、次回以降見ないように気を付けるのだが、そういうものを登録する機能があるのかないのか・・・とりあえず見つけられなかった。

    強調表示くらいできればよいかなと思いTempermonkyのスクリプトをばばばっと書いた。
    javascriptを書くのは半年に一回くらいなので毎回変数の扱いから要素へのアクセス方法などすべて1から調べるためとても非効率的。

    英語が怪しいのはいつも通り。

    ニコニコ動画の生放送検索画面の放送コミュニティの画像を左クリックするとお気に入り、右クリックするとブロック、中クリックするとお気に入り、ブロック解除する。

    設定してみた画像がこちら。(単純に上からお気に入り、ブロック、指定なしとしているだけで他意はない)

    screencapture-live-nicovideo-jp-search-1519983830676.jpg

    グローバル変数の
    is_block_hideを
    trueでそのコミュニティの表示自体を消す
    falseでそのコミュニティ名をブロック色表示

    colorの
    likeとblockのカラーコードを変更すると表示職の変更を変えられる。
    取りえず2色あればよいだろうと拡張性は考えていない。
    (右クリックメニューを任意に追加してラベル付けとか考えたが、難しそうだったのでやめた。)



    // ==UserScript==
    // @name NiconicoLiveCommunityChecker
    // @namespace http://rinatl.blog.fc2.com/
    // @version 0.1
    // @description try to take over the world!
    // @author rin_jugatla
    // @match http://live.nicovideo.jp/search*
    // @require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
    // @grant GM_setValue
    // @grant GM_getValue
    // @grant GM_listValues
    // @grant GM_deleteValue
    // ==/UserScript==

    // グローバル変数
    var debug = false;
    var is_block_hide = false;
    var color = {"like": "#7FFF00", "block": "#FF0000"};
    var like = LoadArray2GM("like");
    var block = LoadArray2GM("block");

    // selector
    var live_block = "#main-for-following-ad > ul:nth-child(4) > li";
    var live_img_block = "div.program-summary-area > div > img";
    var live_span_block = "div.program-summary-area > div > span";

    $(
    function () {
    AddEvent2Image();
    }
    );


    function AddEvent2Image()
    {
    // 各リスト初期化
    // community list 取得
    var communities = document.querySelectorAll(live_block);

    for (var i=0; i<communities.length; i++)
    {
    // コミュニティ番号の取得
    var community_no = communities[i].querySelector(live_img_block).currentSrc.match(/co\d+/);

    // console.log(communities[i].querySelector("img").currentSrc);
    // コミュニティ画像にクリックイベントの追加
    // コンテキストメニューを表示するイベント時のコールバック
    // http://tmlife.net/programming/javascript/javascript-right-click.html
    communities[i].querySelector(live_img_block).addEventListener("contextmenu", function(e){
    // デフォルトイベントをキャンセル
    // これを書くことでコンテキストメニューが表示されなくなります
    e.preventDefault();
    }, false);

    // エレメントをクリックした際に呼ばれる処理
    communities[i].querySelector(live_img_block).addEventListener("mousedown", function(e){
    // 押しているボタンに応じて処理を切り替える
    // ここで2の時に独自のコンテキストメニューを表示したりする
    var community_id = GetCommunityID($(this).attr("src"));
    switch (e.button) {
    case 0 :
    // Left Click
    if(jQuery.inArray(community_id, like) == -1)
    {
    like.push(community_id);
    if(block.indexOf(community_id) > -1)
    block.splice(block.indexOf(community_id), 1);
    console.log("%cadd to like", "color: green");
    }
    break;
    case 1 :
    // Middle Click
    if(like.indexOf(community_id) > -1)
    like.splice(like.indexOf(community_id), 1);
    if(block.indexOf(community_id) > -1)
    block.splice(block.indexOf(community_id), 1);
    console.log("%cdelete from like & block", "color: blue");
    break;
    case 2 :
    // Rrght Click
    if(jQuery.inArray(community_id, block) == -1)
    {
    block.push(community_id);
    if(like.indexOf(community_id) > -1)
    like.splice(like.indexOf(community_id), 1);
    console.log("%cadd to block", "color: red");
    }
    break;
    }

    // リストの保存
    SaveArray2GM("like", like);
    SaveArray2GM("block", block);
    // リストの情報に基づき色の変更
    CheckColor();
    // リストの内容を確認
    if(debug)
    ViewList();
    }, false);

    // コミュニティがリストに存在するか確認
    if(jQuery.inArray(community_no[0], like) > -1)
    {
    communities[i].querySelector(live_span_block).style.color = color.like;
    }
    else if(jQuery.inArray(community_no[0], block) > -1)
    {
    if(is_block_hide)
    communities[i].hide();
    else
    communities[i].querySelector(live_span_block).style.color = color.block;
    }
    else
    {
    communities[i].querySelector(live_span_block).style.color = "black";
    }
    }
    }

    function CheckColor()
    {
    var communities = document.querySelectorAll(live_block);

    for (var i=0; i<communities.length; i++)
    {
    // コミュニティ番号の取得
    var community_no = communities[i].querySelector(live_img_block).currentSrc.match(/co\d+/);

    // コミュニティがリストに存在するか確認
    if(jQuery.inArray(community_no[0], like) > -1)
    {
    communities[i].querySelector(live_span_block).style.color = color.like;
    }
    else if(jQuery.inArray(community_no[0], block) > -1)
    {
    if(is_block_hide)
    communities[i].hide();
    else
    communities[i].querySelector(live_span_block).style.color = color.block;
    }
    else
    {
    communities[i].querySelector(live_span_block).style.color = "black";
    }
    }
    }

    function GetCommunityID(src)
    {
    var temp = src.match(/co\d+/);
    return temp[0];
    }

    function ViewList()
    {
    console.log("%clike", "color: green");
    console.log(like);
    console.log("-----\r\n");
    console.log("%cblock", "color: red");
    console.log(block);
    console.log("-----\r\n");
    console.log("");
    }

    // 変数をローカルに保存
    function SaveArray2GM(key, arr)
    {
    var temp = "";
    for(var i=0; i<arr.length; i++)
    {
    if(i != arr.length - 1)
    {
    temp += arr[i] + ",";
    }
    else
    {
    temp += arr[i];
    }
    }
    GM_setValue(key, temp);
    }

    // ローカルから変数をロード
    function LoadArray2GM(key)
    {
    var temp = GM_getValue(key);
    if(temp != null)
    return temp.split(",");
    return [];
    }
    スポンサーサイト

    SourcePawn / Sourcemod プラグイン作成環境構築

    PAYDAY2 Blacklist Assist

    最近更新中のPAYDAY2のBlacklist MODの補助ツール
    ※特に理由が無い場合は最新バージョンを使用してください。


    ━━━━━━━━━━━━━━━━━━━━━━━━━━━

    17/08/04 - start_server.batの内容を修正しました。

    https://developer.valvesoftware.com/wiki/SteamCMD#Windows※このページの内容は以下2ページとほぼ同様です。
    非常に参考になるサイトです。
    SourcemodとはSource Engineで動くゲームの動作を拡張・修正・改造するためのMOD(以下plugin)作成環境です。
    Sourcemodで具体的にどのようなことができるのかですが、例えば
    1. マップのプレイ回数のカウント
    2. プレイヤーのキル・デスやスコアでランキング
    3. 味方の位置が壁透けて見えるようになる
    などなどいろいろなことができます。

    ゲームプレイ中に、「これがあれば・・・」のような悩みを解決するのに役立つかもしれません。
    そんなこんなで、開発環境を構築していきましょう。

    ここでは開発環境(エディタ)の都合上、Windowsのみを扱います。
    また、ゲームを実行しながらゲームサーバを実行するため若干コンピュータのスペックを必要とするかもしれません。(動かない環境で試したことがないのでどの程度が最低必要スペックかは書けません。)
    当方の環境は記事最下部に示します。


    開発環境構築目次

    1. ゲームクライアント実行環境構築(Team Fortress2など) 
    2. ゲームサーバ実行環境構築
    3. 開発環境構築
    4. 開発の流れ


    ゲームクライアント実行環境構築

    Source Engineで動いているゲームであれば大体動くと思いますが、今回はTeam Fortress2(以下TF2)を使用する。

    SteamのゲームストアからTF2をインストールする

    インストール先はデフォルトを使用しているものとして進める。


    ゲームサーバ実行環境構築

    SteamCMDのダウンロード

    上記サイトから「steamcmd.zip」をダウンロードする。

    SteamCMDの配置

    先ほどダウンロードしたzipファイルを解凍し、「steamcmd.exe」を「C:\srcds」に配置する。

    Create_server.batの配置

    create_server.batをダウンロードし、「C:\srcds」に配置する。
    ファイルの内容は以下の通りです。(TF2 Wikiより引用)
    なお、「set appid=232250」ここの数値を変えることにより、他のゲームサーバを構築可能である。
    appidはゲームのストアページの末尾の数値例えばARK「http://store.steampowered.com/app/346110/ARK_Survival_Evolved//」なら346110である。

    create_server.batファイルの内容
    :バッチファイルを実行したディレクトリ
    set runcmd=%~dp0
    :SteamCMDのログインユーザー
    set username=anonymous
    :SteamCMDのログインユーザーのパスワード
    set password=
    :アップデートするサーバーのゲームID
    :(Team Fortress 2 = 232250)
    set appid=232250
    :ディレクトリ移動
    cd %runcmd%
    :SteamCMDを実行
    start /wait steamcmd +login %username% %password% +force_install_dir %runcmd%server\ +app_update %appid% validate

    SteamCMDとCreate_server.batを用いたゲームサーバ構築

    先ほど配置した「create_server.bat」を実行する。
    サーバを構築するための基礎ファイル群をダウンロードする。
    改善環境によるが、5分程度で完了すると思う。

    srcds_01.jpg 

    このようなウィンドが表示され、最新行に「>Steam」と表示された後に「quit」または×ボタンでウィンドを閉じる。
    この状態での「C:\srcds」の様子は

    srcds_02.jpg 

    このようになっている。状態が異なる場合は手順を確認してほしい。

    さらに、もう一度「create_server.bat」を実行する。
    TF2サーバを構築するためのファイル群をダウンロードする。
    記事作成時点で7GB弱ある。

    srcds_03.jpg 

    このような画面でダウンロード状況が表示される。
    最新行に「>Steam」と表示された後に「quit」または×ボタンでウィンドを閉じる。

    なお、ゲームサーバにアップデートがあった場合は、「create_server.bat」を実行するとアップデートを適用することができる。
    また、ファイルが破損した、サーバを再構築したい場合は、「steamcmd.exe」と「create_server.bat」以外を削除し、上記作業を行えばよい。

    ゲームサーバの開始

    start_server.batをダウンロードし、「C:\srcds\server」に配置する。
    実行するとゲームサーバを開始する。

    start_server.batの内容
    srcds.exe -game tf -console -secure -port 27015 +map cp_dustbowl +maxplayers 20 +servercfgfile server_setting.cfg

    srcds_04.jpg 

    このようなウィンドが表示されれば成功である。
    なお、batファイルに使用できるオプションは多数あり下記を参考に用途に合わせて追記するとよい。

    ゲームサーバの設定

    server_setting.cfgをダウンロードし、「C:\srcds\server\tf\cfg」に配置する。
    plugin作成用の最低限の設定のみを記述した。
    • sv_lan 0 
    0だとサーバをウェブに公開する設定だが、ポート開放していなければ外部からは接続できない。
    今回はローカルでの運用を前提としているが、changelevel(マップ変更)コマンドを使用した際に、sv_lan 1にしているとサーバがクラッシュした経験があるため0を推奨する。
    • sm plugins load_unlock
    Pluginを読み込みやすくするための設定、本運用するサーバではこのコマンドを使用したのちにはsm plugins load_lockを使用するとよいだろう。

    server_setting.cfgの内容
    sv_lan 0 //1だと自分しか入れない、0だとウェブに公開
    mp_idlemaxtime "999"	//何分でAFKキックを発動させるか
    mp_timelimit "0"	//マップの有効時間(分)
    sm plugins load_unlock //プラグインロードロック解除
    

    なお、設定ファイルに使用できるオプションは多数あり下記を参考に用途に合わせて追記するとよい。

    Metamod導入

    pluginを動かすためのファイル群
    Metamod:Source - Newsこちらの左メニューの「Stable Builds」から最新BuildのWindowsバージョンをダウンロードする。
    解凍しフォルダ「addons」を「C:\srcds\server\tf」に配置する。

    Sourcemodの導入

    pluginを動かすためのファイル群
    SourceMod: Half-Life 2 Scriptingこちらの左メニューの「Stable Builds」から最新BuildのWindowsバージョンをダウンロードする。
    解凍しフォルダ「addons」と「cfg」を「C:\srcds\server\tf」に配置する。


    開発環境構築

    エディタの導入

    メモ帳などでも開発可能だが、関数名などをハイライトや入力を補完する機能を持つエディタが公開されているため、こちらを利用したほうが開発効率が良い。
    おすすめ順に列挙した。

    宣言関数一覧表示あり
    デバッガーあり
    Releases · Timocop/BasicPawn · GitHubダウンロードはこちらから

    ハイライトあり
    入力補完あり
    宣言関数一覧表示あり(行までジャンプあり)
    開発止まってる
    Pawn Studio download | SourceForge.netダウンロードはこちらから

    SPEditの導入

    上記リンクより最新のSPEditをダウンロードし「C:\spedit1.2.0.2」に配置したとして進める。

    Sourcemodの導入(オプション)

    SourceMod: Half-Life 2 Scriptingこちらの左メニューの「Stable Builds」から最新BuildのWindowsバージョンをダウンロードする。(サーバに導入したものと同じものでよいため、次指定フォルダをサーバフォルダ群からコピーしてもよい)

    「C:\spedit1.2.0.2\sourcepawn\configs」フォルダに、任意の名前のフォルダを作成する(ダウンロードしたSourcemodと同じバージョン名にしておくとわかりやすい。)
    例えば、ダウンロードしたファイルが「sourcemod-1.8.0-git6014-windows.zip」であれば、「1.8.0-git6014」とするとよい。

    sourcemod-1.8.0-git6014-windows.zipをダウンロード、解凍し
    addons => sourcemod => scripting => 「spcomp.exe」ファイルを先ほど作成した「1.8.0-git6014」フォルダに配置する。
    addons => sourcemod => scripting => 「include」フォルダを先ほど作成した「1.8.0-git6014」フォルダに配置する。

    導入したSourcemodを使用する設定(オプション)

    SPEditのメニュー Configuration => Edit Configuration => New
    • Name - 適当な名前(先ほど作成したフォルダ名「1.8.0-git6014」などとするとよい)。
    • Scription Directories - 先ほど作成した「1.8.0-git6014」フォルダを指定する。
    • Copy Directory - プログラムをコンパイルしてできたファイルをコピーする先 - 「C:\srcds\server\tf\addons\sourcemod\plugins」フォルダを指定する。
    • Server Executable - 「C:\srcds\server\start_server.bat」を指定する。

    上記赤文字はデフォルトの設定を変更しておくと作業効率が上がる。


    開発の流れ

    1. ゲームサーバ立ち上げ(ショートカットF9)
    2. ソースコード作成
    3. コンパイル(ショートカットF6)
    4. バグ取り、1に戻る
    5. コンパイルが通ればゲームサーバにpluginをアップロード(ショートカットF7)
    6. ゲームサーバに「sm plugins refresh」を入力しエンターで実行(プラグインファイルの再読み込み)


    コンパイルとファイルコピーがワンタッチで行えるので非常に効率よく動作確認が行える。
    コンパイルが正常に通っても、ゲーム内で動作確認中にバグが見つかる、意図したとおりに動作しないことは非常によくあるこのなので、必ずゲームサーバで動作を確認する必要がある。
    また、WindowsのゲームサーバとLinuxのゲームサーバでは若干挙動が異なり、Windowsゲームサーバで正しく動作している場合でも、Linuxで完全に同じ動作をするとは限らないことを知っておくとよいだろう。

    ーーーーーーーーーー

    当方PCスペック
    OS:Windows7 Home
    CPU:Intel Core i7 4790K
    RAM:16GB
    Storage:2TB程度
    Graphic:Radeon 7750HD

    SourcePawn / Sourcemodでsmlibを読み込んだ際のエラー回避

    PAYDAY2 Blacklist Assist

    最近更新中のPAYDAY2のBlacklist MODの補助ツール
    ※特に理由が無い場合は最新バージョンを使用してください。


    ━━━━━━━━━━━━━━━━━━━━━━━━━━━

    Sourcemodで書かれている複雑なpluginで何かと使われているsmlibだが、
    AlliedModdersからダウンロードしても、
    GitHubのリリースからダウンロードしても、

    const was specified twice」などのエラーが発生し、うまく動かない。
    (2017/06/29時点)

    回避方法は非常に簡単で、

    GitHub - bcserv/smlib: Function Stock Library for Sourcemod with over 350 new functions

    GitHubから最新のソースコード群をダウンロードし、導入する。

    GitHubリリースの最新バージョンでは上記バグが残った状態であるという落とし穴。

    Source Engine内臓のModelの見かた

    PAYDAY2 Blacklist Assist

    最近更新中のPAYDAY2のBlacklist MODの補助ツール
    ※特に理由が無い場合は最新バージョンを使用してください。


    ━━━━━━━━━━━━━━━━━━━━━━━━━━━

    Source Engine系のMAPやMODやらを作るときに使えるModelだが、その見かたが少しわかりづらかったので忘備録兼情報共有としてまとめる。

    まずは、Modelとはこういった人やらアイテムやらのこと。

    20170628103418_1.jpg 
    見かたは2通り(ほかにもあるかも?)あるが、おすすめ順で説明する。

    ツールを導入する

    SourceSDKは現状バグで使い勝手が悪いので今回は使わないこととする。

    TeamFortress2をインストールする

    無料なのでTeamFortress2を使用するが、Source Engineで動いているものであれば何でもよい。

    Hummer editor内臓のModel browserを使用する

    DirecyPlayを有効にする

    Hummer editorの正常動作に必要となるWindowsの機能、Win10ではデフォルトで無効になっているため、手動で有効にする必要がある。

    コントロールパネル => プログラムと機能 => (左側メニューの)Windowsの機能の有効化または無効化 => レガシーコンポーネント => DirectPlay

    sourcemod_winsetting.jpg 

    上記にチェックを入れ、OKで有効になる。
    再起動が必要となる可能性があるため、その旨が表示された場合は従うこと。

    Hummer editorを起動する

    Team Fortress 2\bin\hammer.exeを起動する。(地球?に緑のハンマーのようなアイコン)
    デフォルトのインストール場所を選択している場合は以下にある。
    C:\Program Files (x86)\Steam\steamapps\common\Team Fortress 2\bin

    Hummer editorでMapを開く

    Hummer editorの中央4パネルが真っ黒の場合は上記のDirectPlayを有効にする操作を行ってから再度Hummer editorを起動すること。

    左上メニュ File => New

    Entityを作成する

    左メニューのチェスのポーンのようなボタンを選択し、
    グリッド線の描かれている面いずれかで左クリック、
    緑色の四角を右クリックし、Create Object を選択する。

    成功すれば緑の人型のオブジェクトが作成される。

    sourcemod_hummer_create_entity.jpg 

    Entityのプロパティを表示する

    左メニューから矢印(先ほど選択したポーンの2つ上)を選択し、
    先ほど作成したオブジェクトを囲むようにドラッグアンドドロップで範囲を指定する。

    sourcemod_hummer_create_entity_edit.jpg 
     
    作成したオブジェクトを右クリックし、
    メニュー一番下の Properties を選択する。

    Entityのプロパティを変更する

    Classから prop_dynamic を選択し、
    右下の 適用(英語版であればApply) を選択する。

     sourcemod_hummer_create_entity_class.jpg

    Model browserを起動する

    「先ほどのEntityのプロパティを変更する」を実行すると Property Name などが変更されたと思う、
    その中の上から4番目の World Model をダブルクリックする。

    sourcemod_model_browser.jpg 
    こういう感じの画面が表示されれば成功。

    1. 赤枠はフォルダ一覧、
    2. 緑枠がフォルダ内のモデル(パス)一覧と、
    3. 青枠がモデルのプロパティ一覧
    • Render - 描写設定(あまり重要でない)
    • Sequences - 動き一覧
    • Activities - 動作一覧
    • Skins - スキン一覧
    • Info - Entityの種類
    • Screen Caps - スクリーンショット?

    Model viewerを使用する

    Model viewerを起動する

    Team Fortress 2\bin\hlmv.exeを起動する。(緑ぽい物体と黄色い球体のアイコン)
    デフォルトのインストール場所を選択している場合は以下にある。
    C:\Program Files (x86)\Steam\steamapps\common\Team Fortress 2\bin

    Modelを読み込む

    上メニュ File => (Steam) Load Model... => フォルダ群の中などからModelを選択する。
    (読み込めないフォルダが大量にあるので根気よく読み込めるフォルダとファイルを探す。)

    sourcemod_mode_viewer.jpg 

    読み込みに成功すると茶色っぽい中央にモデルが表示される。

    読み込めるファイルが少ない(バグ?)ので見るだけなら圧倒的にHummer editor内臓のModel browserがおすすめだが、もしかしてModel viewerでしかできないこともあるのかも。

    ーーーーーーーーーー
    参考にしたHP・ページ一覧
    Source SDK Wiki*
    http://wikiwiki.jp/sourcesdk/?FrontPage

    Prop Types Overview - Valve Developer Community
    https://developer.valvesoftware.com/wiki/Main_Page

    entities_list - Team Fortress 2 Wiki*
    Team Fortress 2 Wiki*
    http://tfortress2.wikiwiki.jp/

    Railsはちょっとお休みしてRubyを学んでいこう!

    PAYDAY2 Blacklist Assist

    最近更新中のPAYDAY2のBlacklist MODの補助ツール
    ※特に理由が無い場合は最新バージョンを使用してください。


    ━━━━━━━━━━━━━━━━━━━━━━━━━━━

    Rails難しくてあきたとかじゃな・・・ちょっとね。

    やはりRailsを学ぶにはRubyをおさえなくては!!(Rubyの本読んだだけで結局Rubyのプログラム書いてなかった)

    ということで、昔買った「Javaゲームプログラミングアルゴリズム」を引っ張り出してきた。

    中学生のころにこの本を買ってもらったものの、Javaのよく言われる「おまじない」に納得いかない、意味が分からなくて投げたことを思い出した。

    なのになぜC#をわりかしすんなり呑み込めたのだろうか・・・謎である。

    今思えばC#もおまじない系だと思うのだが・・・なぜか、そしていまJavaの本を読むとなぜ分からなかったのか分からない・・。

    何はともあれ、この本の最初に出てくるレースゲームもどきをRubyで書いてみた。

    一応できたものの、うーん。

    170408_Race1.png

    思っていたものと違う。

    そもそも、Rubyで書くべきではなかった。(今更)

    どうしても入力待ちが発生してしまう(スレッドはあきらめた)

    入力待ちになるため、考える時間がいくらでもあり、まー死なない。

    次はリアルタイム性の要求されない、ターン制のものを作ろう!

    初めてのRuby書いた学び!


    ・-- ++は使えない! += -=を使おう!
    ・偶数奇数の判定は % 2よりも even?を使うといいぽい!?(型の問題なのかな?%2だとうまくいかなかった)
    ・インスタンスメソッドとクラスメソッドの違いがよくわからないー


    一応ソースコードもあるよ。
    https://bitbucket.org/rinjugatla/race
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。