Gamepad APIであそんでみる

ウェブブラウザでゲームパッド(いわゆるゲームのコントローラ)が使えたらいいなと思っていたら、Gamepad APIなるものがあることを知りました。 developer.mozilla.org

ということでつかってみます。Gamepad APIの使い方は、上記の記事がわかりやすいです。

遊んでみた結果はこちら。ゲームパッドの操作の状態を表示します。また、ゲームパッドのボタンのマッピング(たとえば、Aボタンが押されたらジャンプする、のような関係)を変更したりできます。 garakuta-toolbox.com

ソースコードはこちら github.com

Gamepad API単体では、あるタイミングでのボタンやジョイスティックの状態を取得できます。しかし、ボタンの押下状態の変化(ボタンが押された→離された、など)を検知するには、別途実装が必要のようです。 また、(おそらく)ゲームパッドによってボタンの配置が異なったりすることから、実用的に使うにはボタンのマッピングが簡単にできる必要がありそうです(少なくとも、W3Cのドキュメントに記載があるSTANDARD GAMEPADと、私が持っているゲームパッドでは微妙にボタンの配置が異なりました)。

ということで、このあたりの実装をしてみたのでした。今回はお試し的に実装してみましたが、ライブラリとして公開できるように作ったつもりになっているので、今後はnpmで公開できるようにして、わたしの製作物のあれこれに使おうかなと思っています。みんなでつくるダンジョンでゲームパッドが使えるようになるかも~。

ではでは。

GitHub ActionsをつかってVuePress製ページを Github Pagesで公開してみる

GitHub Actions気になっていたけど使うチャンスがない...。と思っていたのですが、そういえばみんなでつくるダンジョンのドキュメントはVuePressでつくっていて、GitHubにPublic Repositoryとして存在していて、かつGitHub Pagesで公開していたのだった~ということを思い出しました。

今までは、VuePressのDeployingにある案内に倣って、お手元でシェルスクリプトを実行して公開する形をとっていたのですが、GitHub ActionsをつかってmasterブランチにPushされたときに自動でビルドし、公開されるようにしました。

今回作業したドキュメントのリポジトリはこちら。 github.com

このActionsをつかえばやりたいことができそう~ということで、これをつかいます。(ドキュメントが詳しく書いてあって分かりやすい!) github.com

概ね上記ページの Static Site Generators with Node.js の項のとおりのymlを置けばよさそうです。 VuePressのビルド済みページは ./docs/.vuepress/dist に生成されるので、 publish_dir の値は ./docs/.vuepress/dist になります。

GITHUB_TOKEN ってなんだろう...と思ったら、Action内でつかえる Personal Access Token みたいなものを自動的に生成してくれているのですね。(GitHubのドキュメントより

最終的に定義したワークフローはこちら。こんなかんじのymlを置くだけで、CIやCDがかんたんにセットアップできるのはとっても便利~。 minnade-dungeon-docs/publish.yml at master · piyoppi/minnade-dungeon-docs · GitHub

ということで、これでmasterブランチにPushされたらドキュメントが自動で更新されるようになりました。みんなでつくるダンジョンのドキュメントのここがおかしい!などがあれば、直接 @piyorinpa までご連絡いただいてもいいですし、Issueを立てていただいてもいいですし、マークダウン書けるぞ!という方はPull Requestをお待ちしております。

ではでは~。

【あいこんくらぶ】サービス終了のお知らせ

ドット絵投稿・公開サービス「あいこんくらぶ」の提供を終了することにいたしました。

今後のスケジュール

  • 2020/01/17 以降、会員登録の受付を終了します。
  • 2020/3/1 中にサービスを完全に終了します。

アップロード済みのドット絵や会員情報は、サービス終了後にすべて削除いたしますので、ダウンロードを忘れないようにご注意ください。

サービス終了に至る経緯

あいこんくらぶは「ドット絵をブラウザで描いて公開できる」サービスとして、2015/06 ごろにサービスを開始しました。 いろいろな機能をリリースして楽しく開発を行っておりましたが、公開されているドット絵がなかなか増えないことや、 訪問者数の減少がお悩みポイントでした。このような状況に加え、公開からそろそろ5年経つということもあり、サービスを維持するよりもその労力をほかの開発に回したほうが よさそうと判断し、このように決めました。

ウェブサービスはその性質上、開発したものをほったらかしておくことが難しいので、維持するための活動をしなければならないのです)

私はドット絵を描くのも見るのも好きなので、せっかくつくったこのようなサービスを閉じることは大変心苦しい気持ちもあるのですが、 「なかなか使ってもらえない~」というお悩みをずっと抱えるよりは、ほかにもっと面白いものをつくったほうがいいかも...と思っています。

繰り返しになりますが、あいこんくらぶに存在するデータはサービス終了とともにすべて削除しますので、お手元にデータがない場合はダウンロードをお忘れなきようお願いいたします。

いままであいこんくらぶをご利用いただき、ありがとうございました。

開発の記録(20200113)

新年初投稿をばをば。年末年始のお休みとかにはこんなことをしていました。

みんなでつくるダンジョンまわり

ワールドマップ

ワールドマップを公開しました。接続されているマップたちをグラフ構造で表示します。 https://dungeon.garakuta-toolbox.com/world

f:id:piyorinpa:20200113213008p:plain
ワールドマップ

ワールドマップのオレンジ色の〇は「公開されているマップ」を表しています。クリックすることで、そのマップへ移動することもできます。 マップをつくってつなげるほど地図が大きくなるはずなので、つくったマップはぜひ他のマップとつなげてみてください。(いっぱいつながるとワールドマップも楽しい感じになりそう...と思っています)

画像素材の共有まわり

公開した画像素材をブログやSNSなどで共有できるようになりました。くわしくは以下のページをご覧ください。 garakuta-toolbox.com

素材がないとマップ作りの敷居が高い~ということがずっと課題なので、画像素材の公開まわりをすこし整備していきたいなと思ったのでした。

電子工作を再開しました

f:id:piyorinpa:20200113214529j:plain
なにかやっていそうな机の上

年末に「今年は電子工作を再開します」とブログに書いたので、さっそくはじめました。

上の画像は、圧電素子をつかった振動センサの試作のようすです。圧電素子を振動させたときに発生する電圧をオペアンプで増幅し、コンパレータにかけるところまでをお試ししているところ。

最終的にはワンチップマイコンと組み合わせて、おもちゃをつくろうとなんとなく思っています。

ところで、画像左端に映っているのは以下のURLで紹介されていた簡易オシロスコープです。これをやりたくなったときに、さすがに波形が見られないとつらぽん、ということで購入してみました。これくらいの用途なら概ね使えるかもという雰囲気です。とはいえ、やっぱり2チャンネルはほしいな~とか、いろいろ欲が出始めている...。

pc.watch.impress.co.jp

ではでは~。ことしもよろしくお願いします。

2019年の週末開発振り返り

いつも年末になるとこのような記事を書いていたのを思い出したので、今年もなんとなく書いてみます。

だいたい以下のようなことをしていました。

みんなでつくるダンジョンのリリース

みんなでつくるダンジョンは今年の4月末にリリースしたのでした(書いている本人もすっかり忘れていた...)

garakuta-toolbox.hatenablog.com

ゲーム素材サイトの素材をマップ形式で見られて、ついでに探検出来たら面白いかな~という気持ちでつくったサービスです。今年はだいぶこれに時間を割いていました。

リリース時にはなかった「サンプルマップのコピー機能」「チャット機能(これはちゃんとリリース出来ていない...)」「スマートフォンでの編集対応」「ワールドマップ」などなど、リリース後も継続的に開発をしていたりしました。

ずっとインターネット上のみで活動していましたが、ちょっとだけ現実世界にも登場したりしました。わたしの作ったものや活動を知ってもらわないことにはもったいないなあという気持ちになりつつあることもあり、こういう活動は今後もちょっとずつやっていきたいなとは思っているのですが、(いままで消極的だったこともあり)どうふるまったらいいのかよくわかっていない...という感じなのでした(来年への課題)。ウェブサービスなので同人誌即売会系のイベントにも出づらいし...。ということでお悩みがあります(よい情報をお持ちの方がいたらおしえてほしい...!)。

garakuta-toolbox.hatenablog.com

また、みんなでつくるダンジョンのソースコードから一部プロジェクトを切り離して、オープンソースライブラリとして公開する試みもしてみました。

github.com

今後は、オープンにできそうなソースコードは外に出すような開発をしていきたいなという気持ちです。(オープンソースは、「じぶんはこんなことができますよ~」ということを伝えるのに都合が良かったりするのです。というわけで出せる情報はなるべく出していきたいのでした)

今後は以下のようなことをしていけたらな~という気持ちです。

  • チャット機能を何かの形でリリースしたい
    • ユーザーが求めるものなのかな~という気持ちになり若干塩漬け状態にしていましたが、せっかくつくったので何らかの機能として提供したい...。
  • ゲーム素材をお持ちの方に素材を登録していただきやすい環境づくり
    • 実はいまでも画像素材は公開できます!お手持ちのゲーム素材をみんなでつくるダンジョンのマップ作りにつかってもらってもいいよ!という方は ヘルプ:画像の公開を見てみてください
    • 素材がないとマップ作りの敷居が下がらない~ということがずっと課題なので、このへんをなんとか解決していきたい...。

マップをもっと作ってもらいたいし、ワールドマップを大きくしたいのでがんばるぞ...

がらくたツールボックスのウェブページをリニューアル

がらくたツールボックスのウェブページをリニューアルしました。

garakuta-toolbox.com

いままで公開していたページはなんと、このご時世にレスポンシブデザインではない!ということで、メンテしやすいページ構成にして作り直したのでした。ビルドツールとかは特に入れず、HTMLとCSSのみでつくりましたが、このへんはもうちょっと手を入れるかも。Github Pagesで公開しているので、ソースコードもちゃっかり見られます

自作アバターモデリング

そろそろじぶんのバーチャルな肉体があったほうがいろいろ便利そう...。ということで、アバターづくりをしていました。

garakuta-toolbox.hatenablog.com

一応それなりに動くところまで作りこんで、VRChatで動かしたりするところまでは出来ていたのでした。ただ、どうも等身がおかしかったり、服が若干突き抜けたり、、、と不満要素がけっこうあって、もう一度作り直そう...ということで作り直している最中です。

今年中に...。という気持ちで取り組んでいたのですが、趣味開発の優先順の問題や、そもそも開発に割ける時間が...。ということもあり、年内の完成は無理そうです。また、自分にとってはモデリング作業って結構難しく、作り上げるのに(または作って壊してを繰り返していて)結構時間がかかってしまう...ということで細々とつくっています。一応継続的につくっているので、なんとか2,3か月中には動かせるところまで行きたいぞ...!

来年はなにやるの?

来年はこんなことをやりたい!

  • みんなでつくるダンジョンの継続開発
    • (どこか現実世界でお披露目したい...。という気持ちがちょっとある)
  • モデリングをおわらせてなにかする
    • ここ最近の3Dの世界にはそこはかとないあこがれがあるので、なにかしたい...。
  • 電子工作を再開するぞ~
    • しばらくご無沙汰していたのですが、最近電子部品とのふれあいイベントがあり、なにかつくりたい欲が高まってきているのだ~
    • とりあえずAVRマイコンであそんでみる準備をしている(手になじみがあるPICをつかうかもしれないけど..)

とりあえず書き下してみましたが、ボリューミーかも...。ということで、バランスよく取り組んでいきたいな~という気持ちでした。

この記事を書くために過去記事を見てみたりしていたのですが、それなりにいろいろやっていたかな~という気持ちになりました。

今年の更新はこれでおわり!来年もよろしくお願いします。ではでは~

みんなでつくるダンジョンのマップ作成のスマホ操作をまとめてみました

みんなでつくるダンジョンのマップ作成のスマートフォン対応を鋭意すすめておりますが、スマホで操作するときはこうするといいよ~という情報をヘルプページにまとめました(随時更新していきます)。

garakuta-toolbox.com

とにかくスマホの画面はマップ作成するには小さい!ということで、こうするとある程度編集できますよ~というお話を書いてみます。

アイテムの位置や大きさはこまめにロックする

アイテムの位置をこまめにロックするかどうかで編集の快適さが全く変わります。

アイテムの位置をロックしない場合、このように指などでアイテムに触れると移動できます。マップはアイテムを配置するととで作り上げていくので、アイテムがたくさんある状態でスクロールしようとするとアイテムが移動してしまう、みたいなことになりそうです。

f:id:piyorinpa:20191219001148g:plain:w320
アイテムの位置をロックしない場合はアイテムが動く

アイテムの位置をロックした場合、このようにアイテムに触れた状態で指を移動しても、スクロールすることができます。あまり移動しないアイテムはロックしておくことで、ある程度快適にスクロールすることができます。

(アイテムをロックしても、実行時に位置が固定されるわけではありません。あくまで編集の補助ツールです)

f:id:piyorinpa:20191219001350g:plain:w320
アイテム位置をロックするとアイテムに触れてもスクロールできる

位置だけでなく、大きさもロックできるので、気づかないうちに変更してしまった...という事故を防ぐためにも、こまめにロックしておくことをおすすめします。

f:id:piyorinpa:20191219001854p:plain
位置やサイズのロック

メニューなどはこまめに閉じる

アイテムを選択するとメニューが表示されますが、スマートフォン操作対応に伴い閉じることができるようになりました。メニューもそれなりに画面領域をつかうので、こまめに閉じておくと便利です。

f:id:piyorinpa:20191219002101g:plain:w320
メニューは閉じることができます

アイテムはコピペして増やすとべんり

同じアイテムはコピー&ペーストで増やすと便利です。以下の動画のように、アイテムを選択すると右上にコピーボタンが表示されるので押します。つづいてメニューから貼り付けボタンを押すと複製されたアイテムが登場します。

f:id:piyorinpa:20191219002912g:plain
コピペできます

まとめ

現在もスマートフォン最適化のための開発を進めておりますが、上記内容を参考に、みなさんもぜひスマートフォンでのマップ作成を試してみてください(ただし、不具合があるかもなのでこまめに保存してくださいね)。

そして、こうしたほうが使いやすそう~などあれば、Twitter( https://twitter.com/piyorinpa )などでぜひおしえてください。ではでは~

最近の開発報告など(マップ編集のスマホ対応)

最近、開発報告してないじゃん~と思ったので、ひさびさに書いてゆきます

みんなでつくるダンジョンのマップ編集のスマホ対応

いままで「みんなでつくるダンジョン」でのマップの編集はPCのみサポートとしていましたが、やっぱりスマホで編集できたほうが便利という気持ちになったので進めております。 (マップのたんけんについては以前よりスマホ対応しています。)

f:id:piyorinpa:20191211235913p:plain:w300
タッチ操作でマップ編集できるようにしているよ

やったことはだいたい以下の通り。

  • タッチ操作でマップをスクロールできるようにする
  • いろいろな箇所の地道なレスポンシブ対応

スマホの小さい画面でマップを快適に編集できるようにするのは結構大変ですが、ちまちまと良くなってきています。だいたいの操作をタッチ操作対応できたので、 (快適かどうかはともかく)マップの編集をスマホで楽しめるようになってきました。

f:id:piyorinpa:20191212000344p:plain
画面が狭いのでアニメーション編集はちょっと大変かも

私も電車移動などのすき間時間をつかってマップをつくってみていますが、それなりにたのしいかもです。とはいえ、アニメーションを作ったり、絵を登録したり、などの操作は たぶん画面の大きなパソコンのほうが快適です。そういった作業はあらかじめパソコンで済ませておきつつ、出先で編集をするとよさそうです。一通り落ち着いたら、 もうちょっと工夫できないか検討したいところ。

まだ完ぺきではないので、引き続き快適な編集環境を目指して改善していきます。 (みなさんもたまにスマホで触ってみてください~。ただし、現在もいろいろと調整中なので、こまめな保存をお願いします)

ではでは~。