WWA COLLECTIONを作ったお話

WWA COLLECTIONが配信されました。🎉🎉🎉🎉🎉

WWAとは

ここでは説明しないので、WWA公式サイトのこれとか、自分のサークルにある解説記事とか見てください。

WWA COLLECTIONとは

WWA作品45作品を集めた、Nintendo Switchのゲームソフトです(以降、WWA COLLECTIONのことを今作といいます)。

簡単に言うと、ニンテンドークラシックミニやPlayStation Classicとかの旧作品の詰め合わせを、それっぽく行った感じです。

しかし、専用のハードウェアを用意するのではなく、あくまでゲームソフトという形態を取っています。また、旧作品の詰め合わせかというと、ちょっと誤りがあって、2008年〜2018年で作られた旧作のアレンジと、その作品向けに用意した新作を詰めた形になっています。名作倉庫で出ているWWA作品は入っていないです。ごめんなさい。

www.wwafansq.com

Nintendo Switchで遊べるので、テレビに繋げて大画面で楽しんだり、外出先で楽しんだりできます。

パスワードセーブには対応していない分、各作品のプレイ時間は1時間以内に収めています。Quick Save、Quick Loadにはちゃんと対応しています。

開発について

開発はPLiCyに任せているため、どんな内容なのかは自分もはっきり分かっていないです。

自分はどうしたかというと、以下のように収録作品の制作や今作の企画の協力を行いました。

• 収録作品の1つ「食べ物を取り戻せ!!」の制作を担当しました。
  • 自分のWWA作品一覧には無い新作になります。
• 収録作品の制作メンバーに、今作の開発について説明の協力をしました。
• 収録作品の制作において、デバッグやアドバイスをしたりしていました。
  • しかし、デバッグやアドバイスは制作メンバーが積極的に行ったため、自分はあくまで補助的な立場だったと思います。
• 収録作品の1つ「Final Stock Game」(ヒラリラー氏作)の画像周りの修正を担当しました。
• 公式ページ の制作を担当しました。

食べ物を取り戻せ!! について

食べ物を取り戻せ!!のスクリーンショット

今作用のWWA作品です。悪い動物に食べ物を持っていかれた地域を救うために、旅行中の主人公が行動するゲームです。

「WWAにちょっと慣れてきた」方をターゲットとしています。最初はうろつくモンスターの中を歩くけど、ゲームを進むとダンジョンを探索するという設定になります。ただ、今作を始めたときは開放されておらず、チュートリアルとかの低い難易度のWWA作品をクリアしておくことで開放されると思います。

現代を舞台にしたWWA作品で、なるべく古い時代のアイテムは排除しています。例えば、攻撃力や防御力を上げるものはりんごやぶどうにしたり、武器や防具の概念をなくしたりしています*1。

グラフィックは一昨年や去年制作したWWA作品を利用していて、画像素材はすべて自分のもので調達しています。

制作にあたっては、変な行動をした際のメッセージ作成が楽しかった一方で、攻撃力と防御力のバランスや、メッセージ内容の矛盾の確認やその代替策で苦戦しました。

Aokashi Homeに公開する予定は今の所無いですが、それっぽいものを制作しようかなと思っています。

最後に

PLiCyスタッフや収録作品の制作を担当したメンバーの方々、ご協力いただきありがとうございました。🙇‍♂️🙇‍♂️🙇‍♂️

www.wwafansq.com

ということで、今日配信です。是非お買い求めください！

ec.nintendo.com

Nintendo SwitchのWWA風のドット絵をおいて終わりにします！ 任天堂の商品なので素材として使わず見るだけにしてください！

*1:しかし、宝箱は宝箱のままです。ダンボールでも良かったのかな...

WWAのアレ

お久しぶりです。前の投稿から半年以上経っていましたが、この間に

• エンジニアのバイトが見つからなくて絶望的になったり
• PCが6回も修理に出してもすぐに壊れて、最終的に修理に出せず放置したり
• そのせいで残りのPCが容量不足とかで不便を強いられたり
• エンジニアのバイトが見つかって働き始めたり
• ShufLarをプレイしてたり
• スマートフォンを4年ぶりに買い替えたり
• 北海道へ旅行に言ったり
• 学費を支払うときに所持金の少なさに親に怒られたり
• せっかく働いた金が全部学費に持っていかれてやる気を失ったり
• MinecraftのSnapshotで新しい村の建物が凝ってて生成される建物を調査したり

・・・してましたが、これらの記事を書く時間が無く、書こうとしても多分反発受けるんじゃないかとか、他の人がそれっぽく書いてあるからもう良いやとか、そう思って投稿しないまま下書きで放置してました。

ですが、WWA作品を集めたゲームソフトがなんとNintendo Switchソフトとして販売*1することになりましたので、とりあえず報告だけ書こうかなと思ってこの投稿を書きました。

明日配信日です。明日どんな感じで企画してたか、作ってたか報告したいなあと思います。ちなみに、下のページは公式ページです。自分が作りました。💪💪💪

www.wwafansq.com

・・・

と、来月が卒業研究の発表で、9月や10月がサボっていたのが原因で今どうしようかと慌てています。単位落ちて卒業できなかった、という事態にならなければいいけど。

*1:ダウンロード販売のみなので、正確には配信ですが。

WWASAVE.js のdocker対応とフロントエンドの修正を担当しました

WWASAVE.js を docker に対応したり、フロントエンド部分を修正したりしました。

github.com

• 現時点では develop ブランチにマージしてません。試してみたい方は fix-css ブランチからどうぞ。
• ちなみに docker 対応とフロントエンド部分修正は1つのブランチでやっちゃいました。ごめんなさい。

WWASAVE.js とは

WWASAVE.js は、WWA Wingのセーブデータを即時に保存できるWebアプリで、hirarira が開発しました。WWAがJavaアプレットだった時代に開発された WWASAVE CGI をWWA Wing向けに移植したものです。

これまでWWA Wingのゲームを中断したい時はセーブデータを保存するためのパスワードを取得し、一旦テキストファイルに置く必要があります(下図参照)。再開したい時もテキストファイルを読み込む必要があります。

WWASAVE.js はセーブデータの保存と読み込みを簡単にしてもらえます。中断したいときはゲーム画面にある「保存」ボタンを押すだけ。読み込みたいときは保存したデータをそのまま遊べばすぐに再開できます。

担当したところ

docker 対応

WWASAVE.js を docker-compose に対応しました。これまでWebアプリを動作するには

1. 実行環境の構築(apache, php, mysql)と設定
2. Webアプリのソースファイルのダウンロード
3. (必要に応じて) 1. の設定を元に 2. の設定ファイルを修正
4. アドレスを打ち込んで接続！

と手間が掛かりましたが、docker-compose だとソースファイルのダウンロードと設定ファイルの修正、コンテナの起動だけで済みます。

docker 自体の詳しい説明は割愛します。扱いにはコンテナやイメージについて知っておく必要がありますが、知っておくと便利です。

フロントエンドの修正

CSSがヘボいとのことでしたので修正しました。

ボタンやヘッダーなどのCSSコードは、全ては自分の手で入力せずCSSフレームワークの Bootstrap を使用しました。フロントエンドの修正の中で一番大変だったのは Bootstrap のCSSの配置方法でした。

CSSフレームワークをWebアプリ上で使うには様々な方法があります。

• CSSファイルを直接配置
  • 今後、CSSファイルのアップデートする際にまたダウンロードする、これは大変
• CDNでCSSファイルを持っていく
  • ネットワーク環境が乏しいと読み込みに時間が掛かる
• bower でCSSファイルをインストール
  • bower 自体アップデートが行っていないみたいで、Yarnやwebpackを使ったほうが良いと案内されている
  • つまり時代遅れ...?

以上のようなことから、アップデートを少ない操作で済ませられる方法として、Yarnとwebpackでjsファイルを作る方向で行きました。しかしながら、webpackの設定ファイルがうまく記述できなかったり、なぜCSSファイルもJavaScriptファイル1つにまとめるのか理解できなかったりして、躓いてました。YarnでインストールしたCSSファイルをコピーで持っていく方法もありましたが、あまり推奨するものではありません。

production ビルドだとビルドに時間が掛かったり、HTMLの出力が結構見辛かったりと、課題はまだまだありますが、なんとか形にすることが出来ました。現時点では雑に作った感じがしますが、またある程度勉強出来たら、もっと改良してみたいですね。

おまけ: webpack の設定項目名の疑問

ちなみに、CSSを読み込む際に使う css-loader や style-loader を設定する際に、style-loader の記事では対象のファイルを正規表現で指定する項目名が test になっていて、これが不自然に思ってたことがあります。

これについて聞いたところ、どうやら正規表現で指定するメソッド名の test から持ってきたそうです。

developer.mozilla.org

2017年が終わるので

2017年そろそろ終わりを迎えるのでいつも通り振り返ってみます。

今年は努力と失敗を重ねた年だったと思います。去年の2016年は積極的に勉強会に参加する傾向がありましたが、今年は作品を出したり、試しに動かしたりする傾向が多かったです。

得られたもの

今年制作した作品はこんな感じです。また、これによって得られたスキルも合わせて載せます。

技術的なもの

• Aokashi Home
  • VPS(サーバー)の設置スキル*1
  • git によるブランチの分け方
  • Hugoによるテンプレートの使い分け方
  • CI による自動化方法
• WWA Wingのクラシックモード
  • CSSによるテキストの扱い方
• インターンシップ
  • ソフトウェアの開発過程
  • テキストエディタで使えるショートカットキー*2
• Node.js(express) で動作するWiki
  • npm の扱い方
  • JavaScriptの非同期処理と同期処理の扱いについて*3
• 大学の研究室によるソフトウェア開発
  • オブジェクト指向によるソフトウェアの実装方法*4
• WWASAVE.js のDocker設定ファイル(未完成)
  • docker-compose.yml による複数コンテナの扱い方
• WWA Wing PE(現在製作中, 詳細は後述)
  • GitHub のフォーク元リポジトリからのマージ方法
  • JavaScript のCanvasによる実装方法

aokashi.hatenablog.jp

aokashi.hatenablog.jp

趣味

• (作品ではないが)PC
  • PC内部の配線の仕方
• WWA(とRPGツクールMV)の素材制作(去年に引き続き)
  • ドット絵の制作スキル*5
  • ゲームで扱いやすいサイズの決め方
• WWA FanSquare
  • CSSフレームワークの扱い方(ここでは Material Design Lite)
  • CSSのクラス命名規則の扱い方(BEMやSMACSS)
  • pixiv BOOTH による個人間での商品の販売方法
  • OGP によるSNS上でのイメージの表示方法

aokashi.hatenablog.jp

aokashi.hatenablog.jp

その他

• ArchLinux のインストールと大学での活用
  • Linuxの運用スキル、主にパッケージの扱い方
  • Linuxで利用できるソフトウェアの選定(これはスキル...か？)
• (作品はどうかは別として)大学のレポート
  • TeXの扱い方

aokashi.hatenablog.jp

aokashi.hatenablog.jp

まとめ

このように、去年と比べて外部に顔を出す機会が減ってしまったかと思います。また、幾つかトラブルもあって周りにご迷惑をおかけしてしまったこともありました。申し訳ありませんでした。

ちなみに、今年は自身で行動することが多かったです。実は3月辺りでプログラミングのバイトに入るつもりでした。しかしながら、うちの学部の性質上、授業講義で休みの曜日が全然取れず、バイトの参加は無理だと9月に諦めてしまいました。来年は授業に出席することはおそらく無い*6ので、なるべく迷惑を掛けない範囲で外部で行動していきたいです。

遊んでたもの

• みんなのA列車で行こうPC
• Minecraft
• ポケットモンスター銀
• WWA作品(主にPLiCyの投稿作品)
• その他色々

(作者さんにはつらい話ですけど)Real Train Mod が Minecraft 1.12 に対応したら何か動き出すつもりです。

WWA Wing PE

現在、WWA Wing の拡張機能である WWA Wing PE を開発しています。WWA Wing に WWAeval のイメージ表示機能を(完全移植ではないですが)追加する拡張機能です。

この WWA Wing PE を使うことによって、フィールドを暗くしたり、エフェクトで派手な攻撃を演出したりすることが簡単にできるようになります(多分)。

ある程度完成したら、 WWA Wing に機能追加していこうかと思います。

最後に

最近は関数型プログラミング言語の Haskell の学習を初めてみました。使う側も開発する側も扱いやすいソフトウェアを頑張って開発していきたいです。

それと、今年PCを組み立てたんですが、これからはノートPCをメインに使う傾向が多いです。プログラミングに使うソースファイルを毎回2つのPCの間で転送するのが面倒ですので...*7。

ということで、来年もよろしくお願いします。

*1:主に公開鍵認証によるSSH接続の辺り

*2:前からある程度は知っていたけど、知らなかったものもあって使っていて便利に感じました

*3:個人的にはまだ理解していないですが...

*4:主にステートパターンによる状態ごとの処理の分割

*5:主に光の当たり方による色の使い方

*6:仮に取得できない単位があっても、バイトの行動に支障は出ないはずです。

*7:余談ですが、ノートPCをメインにすると思い始めた頃にはノートPCの故障が頻発したことがありました。現在は落ち着いています。

ThinkPad Yoga 260で起こるプチフリ現象を探ってた

去年の6月に購入したThinkPad Yoga 260ですが、一瞬画面の動きが止まる「プチフリ」の現象に悩んでいました。現在は問題を見つけたため、落ち着いていますが、もしかしたらまた起こるかもしれません。ただ、参考になるかもしれないので記録しておきます。

症状

• 一旦カーソル操作が止まったりする(3秒程度？)
• 時には一切応答せずフリーズしてしまう場合がある
  • この場合はPCを閉じてスリープ状態にすればフリーズは解消される
• ただし、動画再生中やキーボード入力中は発生しない
  • 逆に、ブラウジングの際は頻発する傾向がある
• プチフリ発生中に何か操作を行った場合、その操作は反映される
• 音声が再生されている場合、音声は再生されたままで止まらない

下記で対策を施した時点では、上記の症状をすべて知っているとは限りません。特に音声再生の問題についてはかなり後で知りました。

まず初めに

動作がおかしいと疑い始めた時に、ソフトウェアのアップデート(Windows UpdateやLenovo Companionとか)を行いましたが、直りませんでした。

また、プチフリが発生したときにイベントビューアのログを見ましたが、プチフリらしきログは見当たらず...。

Creators UpdateとSSDを疑う

この症状は Windows 10 の Creators Update を適用したときに疑い始めたので、Creators Updateが悪いと思ってインターネットで記事を探しました。ニュースに取り上げられるような記事がなく、解決策も少なかったのですが、SSDのLPM機能が働いていると聞きました。ちょうどSSDが不調かなと思ったところでこのLPM機能をオフにしました。また、システムがうまく動かないと言われている高速スタートアップもオフにしました。

が、両方行っても直りませんでした*1。

SSDを交換してみる

ここまで行ってだめならハードウェアが悪い、と思いSSDを交換することにしました。プチフリが起こりやすそうなSATA接続のSSDを避けてPCIe接続(NVMe規格)のSSDを購入すれば何とかなる、と思っていましたが、まだ高価なため、SATA接続のSSDで我慢しました。

結果、WD Blue SATA SSD (3D NAND 512GB) を購入して、交換しましたが、症状はそのままでした。

【国内正規代理店扱い】WD 内蔵SSD M.2-2280 / 500GB / WD Blue 3D / SATA3.0 / 5年保証 / WDS500G2B0B

じゃあPCIe接続のSSDに切り替えるか...と思ったところでPCが不調になり、起動に時間がかかったり、スリープから復帰できなかったりしました。修理に出しましたが、このプチフリの件をサポート側に伝えるのを忘れてしまったのか、修理後でもプチフリはそのままでした。

発生条件を確かめる

このプチフリは、前述の通りタスクマネージャーを起動したままだとほぼ発生しませんでした。タスクマネージャーはプロセッサをよく利用することから、常駐するソフトウェアでもインストールすればいいのかと思い、セキュリティソフトを導入しました。そして、カーソルが動かないことは、ポインティングデバイスに問題があると思い、タッチパッドの無効化を解除しました。

が、どれも症状は直りませんでした。

グラフィックが悪かった

もうLenovoサポートに連絡でもしようかと思っていたんですが、ここでIntelのグラフィック設定があることに気付き、デスクトップのコンテキストメニューからIntel Graphicsの設定画面を開きました。

いろいろ項目を見て確認したところ「パネル・セルフリフレッシュ」の項目が怪しいと思い無効にしました。

この後プチフリらしき症状は見当たらず、ちゃんと動いています。

何が起きているのか

「パネル・セルフリフレッシュ」は「画面がずっと同じのままで表示されている場合はGPUを停止して、省電力化を図る」ものでした*2。なので、画面がずっと静止状態にならなければ、この症状は起こらないのでは、と思います。なので

• タスクマネージャーを開きっぱなしにして、タスクバーのアイコンを常に表示するようにする
• タスクバーの時計で秒を表示するようにする*3
• タスクバーに常にモーションを加えるツールバーを入れる*4

のようにすれば、症状は直るのではないかと。でも、上記のグラフィック設定をすればそこまでする必要はないですよね。

また、この設定はLinuxでも変更できるみたいですので、Linuxでもおかしいと思ったら修正はできます*5。

ちなみに、購入したSSDはデスクトップPCにも装着できるので、無駄な買い物にはなってないかなと思います。

*1:ただ、発生頻度は落ちたかなー、と思ってました

*2:参考: 「新しいThinkPad X1 Carbon」開発チームに聞く、“あのキーボード”に込めた意図 (1/4) - ITmedia PC USER の3ページ目

*3:表示の仕方はここでは割愛します。

*4:TTClockでもありですね。私がWindows XPを使っていた時は愛用してました。

*5:参考: Intel Graphics - ArchWiki

Node.js(Express)で動くWikiを作ってました。

11月1日～7日の7日間は大学の休講日でした。この7日間を利用してWikiのシステムを作ってみました。

github.com

現在はページの閲覧と編集、ページの一覧表示が出来ます。ページは名前(ファイル名)と内容からなり、タイトルは内容の見出しで代わりに使う形になります。

検索機能は見た目だけ出来ていますが、まだ完成していません。今後は、以下の機能を実装する予定ですが、自身のWebサイトのリニューアルもあるのですぐには難しいと思います。

• 検索機能の実装
• ページのバージョン管理
• メニュー(サイドバー)の実装
• markdownの書式にちゃんと対応できるようにする
  • 上の図では、リスト1, 2, 3 と2つ連続していますが、そのうち片方は 1., 2., 3. と出すつもりでした。

仕様

• プログラミング言語: JavaScript(Node.js)
• アプリケーションフレームワーク: Express
• テンプレートエンジン: ejs
• 実行環境
  • Windows 10 64bit*1
  • Node.js v8.9.0 LTS (Nodist 0.8.8)

リポジトリ名の「express-test」は仮称です。今後変更する予定があります。

作成の経緯

こちらはWebサイトで記事が完成した後に移転する予定です。

Wikiのシステムを作りたい理由はいくつかあって、インターネットにあった様々なWikiのシステムには惜しいところがそれぞれありました。

• Pukiwiki(現在自分のサイトの資料集で使用中): markdown記法に正式に対応していない
• dokuwiki: 同上
• gollum: タイトルが日本語だと取り扱いに難がある*2
• crowi(まだ使った経験が無いです): チーム内でしか見ることが出来ない(はず)

また、GitHubのWikiも使っていましたが、ページ名が最初からサイドバーに付いていることとリポジトリ1つ作らなくてはならない制約から、資料集のような形で使うつもりはありませんでした*3。

つまり、 日本語がちゃんと扱えて、markdownも使えて、周りから見える、たくさんページを持つことに適したWikiシステム を求めていたのです。

自分で作ろうと思ってはいたものの、なかなか動き出せませんでした。後になって色々な事情で悪いことがあって自信を失ったことから、技術力を上げるためにWikiシステムを短期間で作成することにしました。

動作環境はWebブラウザで動くアプリケーションをメインに開発しているため、JavaScriptで使えるNode.jsを選びました。

1人単独の開発のため、意見を出し合う時間が無くマイペースで開発を進めることが出来ましたが、決めた目標の定義が曖昧で「これでいいか」と思って中途半端に切り上げたことや、実装の仕方に悩むこともありました。しかしながら、今後npmで新しいパッケージが出てきたときに、短時間で組み込んで確かめられる機会が出来ました。

現在はQiitaのような情報共有サービスが進んだことから、自身がWikiを設立して備忘録の代わりに使うケースは減りました。私の場合は世界観の資料を扱うこともあって、Wikipediaのような百科事典のサイトが適していることから、開発を続けていくつもりです。

最後に

もしかしたら、実装の仕方に誤りがあるかもしれません。GitHubでIssue投稿やPull Requestをお待ちしております。あと早いうちに名前を決めます。

*1:2台の実行環境があって、片方がHome、片方がProのエディションを持っています

*2:ただしあくまで自分からの経験によるものです。

*3:開発関連の資料をまとめるのであれば、GitHubのWiki機能は大変便利だと思います。

Speaker Deckのスライド公開取りやめについて

先月の8月27日、私のSpeaker Deckのスライドを、一部を除き公開を取りやめました。

Speaker Deckにはライトニングトーク(LT)で発表したスライドが含まれていて、発表後では内容を調整して公開していました。しかし、自分自身無理してスライドの制作、発表を行っていたため、公に出せるようなものではないと思い、公開を取りやめることになりました。決して、高頻度でLTのスライド制作と発表を行うことに悪いことはありません。

今後、公開を取りやめたスライドの公開を再開する予定はありません。それでも必要でしたら、私までご連絡ください。また、この後も現在公開しているコンテンツの公開を終了する場合もあります。

スライドの公開の取りやめでご迷惑をおかけしたこと、そして報告が遅れたこと、お詫び申し上げます。申し訳ございませんでした。