しろログ

日々巡り会ったものの感想・レビュー

Category: プロジェクト (page 1 of 10)

箱庭リバーシ

リバーシ(オセロ)で遊べる箱庭リバーシを作ってみました。

対NPC戦・対人戦、どちらもできます。

もともとリアルタイムDBを使った対人戦ゲームの勉強がてら作っていたのですが、ついでにオセロAIとかも少し調べて実装してみました。
自分がオセロ素人なのでアレですが、NPCの中でも箱庭娘は地味に強くなった気がしますので、遊んでみてください。

以下、技術談義。

もうずっとアプリばかり作っていて、Web技術が完全におろそか&時代遅れな感じになっていたので、少しでも取り戻そうと勉強。
SPAとかPWAとか、そんな感じです。
(service workerは調整してもキャッシュがきつくて、思うように更新できず、いったん外してあるので、正確にはPWAにはなっていないのですが・・)

フロンドエンドはVue.js。laravelいじってた時の名残で、laravel-mixかませつつ、webpack使ってる感じです。

バックエンドはFirebase。基本無料なのと、リアルタイムDBに惹かれて使ってみました。
実験的なサービスのためにいちいち実費でサーバー(VM)借りて、環境設定してソフト入れてSSLも・・とかやらずに済むのでとても楽。
ホスティングのdeployやロールバックもとても簡単。

Firestoreも取り扱いがめっちゃ楽で、1時間経たずにリアルタイムな動きができてテンション上がったんですけど、だんだんとセキュリティ的に面倒なことに気付いてテンション下がり気味に・・

なんかこう、サーバー使ってる時のクセで、うちのドメインから以外はAPI接続禁止すればOKだよね、みたいのイメージしてたんですけど、いやいやこれJavaScriptでクライアントがダイレクトにつないでるやんけ・・どうするの・・的な。

で、これについてはFirestore側でJavaScript風コードでセキュリティルール策定するんですけど、微妙に手間がかかるのがネック。
NoSQLとかドキュメントベースのDBに慣れてないせいもあるのかもですが・・

結局コレクションごとのスキーマ的なものを書き、
createやupdateのパターンごとにバリデータ的なものを書き・・
ってこれなら、フィールドと型をあらかじめ設定できるほうが楽なんじゃ、と思いつつ。
テストもしづらいし。

セキュリティルールはとりあえず、

allow write: if request.auth.uid != null

とか、一応

allow write:
    if request.auth.uid != null
    && request.resource.data.title is string
    && request.resource.data.title.size() <= 100

みたいのでいいかなー、とか意外と軽く考えるかもですが、例えばこのルールだと確かにtitleは100文字以下の文字列に絞れるんですけど、逆にtitleが100文字以内であれば、fooとかいうフィールドに1万文字入れたリクエストなんかも通っちゃうんですよね。
なので

allow write:
    if request.auth.uid != null
    && request.resource.data.keys().hasOnly(['title'])
    && request.resource.data.title is string
    && request.resource.data.title.size() <= 100

みたいにしてゴリゴリ限定していく方向で・・。
これを全コレクション全フィールドでやるんだよ、おらぁ。

ちなみにrequest.resource.dataってのは、やってきたデータだけじゃなくて、更新後のresource.dataのイメージなので、更新するドキュメントにtitle以外のフィールドがあったりすると、hasOnlyにならなくて弾かれるぞ。ハマりポイント。

だからね、最初にね、全フィールド計画的にしようね。

サービスイン後にフィールドいじりたくなったら、メンテかけるか、止めたくなければ、バージョンフィールド作って、その値を元にバージョン別のセキュリティルール適用すればいいんじゃないかと思います。

あと他にも、Authenticationとか、許可済みコールバックにlocalhostが入ってたりするの、リリース時に消しておこうねっていう。

なんというか、今までと勝手が違う環境で、罠が多い・・

Firebase自体はまだベータな雰囲気がいろいろあるので、これからに期待したいです。

目標達成タイマー – 勉強管理アプリ

アラーム & タイマーを応用して、毎日の勉強やトレーニングの時間管理のためのアプリ、目標達成タイマーをiOS向けにリリースしました。

科目と目標時間を登録し、タイマーを稼働させることで時間を記録できます。
同じ科目で「普段用」「試験用」等、複数のタイマーを保存しておいたり、逆に科目を設定しない汎用的なタイマーを保存しておくことができます。

一つのタイマーに予鈴を50個まで設定できるので、工夫次第でポモドーロタイマー的な使い方もできるかと思います。

iOS – App Store

アラーム & タイマー

時計・アラーム・タイマー・ストップウォッチが一体となったアプリをiOS向けにリリースしました。

アラーム音はイヤホンに対応しており、音楽再生機能も搭載していますので、電車の乗り過ごし防止や静かな場所での勉強などにも使えます。
PUSH通知設定をしておくと、画面が消えても通知が来ます。

もともとiPhoneユーザーではないので知らなかったのですが、公式アプリだとイヤホンを付けているのに本体からアラーム音が鳴る、というのに驚いた勢いで作りました。
Androidには公式でもかなり優秀な時計アプリが提供されているんですけどね。

機能的にありふれてるせいか、見た目やデザインにこだわったアプリも多いので、逆にひたすらシンプルなものを目指しました。

iOS – App Store

ロボラインズ

新作ゲーム、ロボラインズをリリースしました。
Android – Google Play
iOS – App Store
PC – Web (音量注意)

ブロックを縦か横に5つ以上揃えて消していく、というシンプルなパズルゲームです。
今回もCocos2d-JSで作っていて、Web版(音量注意)も公開しています。

もともと作ってみたいゲームではあったのですが、前作、ロボバトルのコード資産、素材を利用して、一週間ほどで組みあがりました。

ブロックを越えての移動ができないHardモードもあります。
ブロックの色の判別がしづらい・分かりにくい、という方は、種類ごとに柄の違うブロックに着せ替えできるのでお試しください。

ロボバトル

新作ゲーム、ロボバトルをリリースしました。
Android – Google Play
iOS – App Store

マシンをカスタム、ロボをトレーニング、自動でバトル!という感じです。

内容紹介動画も作ってみました。

今までCocos2d-xのC++でやってきましたが、バージョン3.7よりJavaScriptが正式に統合されたことで移行してみました。
Cocos2d-JSを利用することでHTML5でのパブリッシュが可能になり、Android/iOS/Web版を同時進行で作成できます。
Web版は帯域の都合上、おおっぴらに公開していませんが、ネイティブと同様の動きをそのまま試してもらえるので、プロトタイピング&フィードバックにとても役立ちました。

あと基本的にはメモリ系をあまり気にしなくてよかったのが嬉しいところ。
C++は、ほんと熟練しないと適切なコードにならない気がします・・

ちなみにゲームを作ってると、一見簡単そうなのにちゃんとやると面倒な、アルゴリズム的なハマりどころがあるもので、今回の場合は回転する矩形の当たり判定。
Cocosに実装されてるんじゃないかと思ったけど、ぱっと見なさげなので、結局自前で実装することに。
文系プログラマにベクトルの内積を計算する日が来ようとは思いませんでした・・

全体としては、シンプルでコンパクトな小品という印象ですが、
企画から、グラフィック、コーディング、効果音とBGMの選定など、制作期間はコミコミで2か月半ほど。
よくよく考えたら、サウンドまで入ったゲーム作りは初めてかもしれないですね。

ちなみに本作はツイッターのフォロワーの方のリクエストだったのですが、その真髄を理解するまでに少し時間がかかってしまって、似て非なるものができあがった気がします。すみません!

Android – Google Play
iOS – App Store

Older posts

© 2018 しろログ

Theme by Anders NorenUp ↑