【あいこんくらぶ】サービス終了のお知らせ
ドット絵投稿・公開サービス「あいこんくらぶ」の提供を終了することにいたしました。
今後のスケジュール
- 2020/01/17 以降、会員登録の受付を終了します。
- 2020/3/1 中にサービスを完全に終了します。
アップロード済みのドット絵や会員情報は、サービス終了後にすべて削除いたしますので、ダウンロードを忘れないようにご注意ください。
サービス終了に至る経緯
あいこんくらぶは「ドット絵をブラウザで描いて公開できる」サービスとして、2015/06 ごろにサービスを開始しました。 いろいろな機能をリリースして楽しく開発を行っておりましたが、公開されているドット絵がなかなか増えないことや、 訪問者数の減少がお悩みポイントでした。このような状況に加え、公開からそろそろ5年経つということもあり、サービスを維持するよりもその労力をほかの開発に回したほうが よさそうと判断し、このように決めました。
（ウェブサービスはその性質上、開発したものをほったらかしておくことが難しいので、維持するための活動をしなければならないのです）
私はドット絵を描くのも見るのも好きなので、せっかくつくったこのようなサービスを閉じることは大変心苦しい気持ちもあるのですが、 「なかなか使ってもらえない～」というお悩みをずっと抱えるよりは、ほかにもっと面白いものをつくったほうがいいかも...と思っています。
繰り返しになりますが、あいこんくらぶに存在するデータはサービス終了とともにすべて削除しますので、お手元にデータがない場合はダウンロードをお忘れなきようお願いいたします。
いままであいこんくらぶをご利用いただき、ありがとうございました。
開発の記録（20200113）
新年初投稿をばをば。年末年始のお休みとかにはこんなことをしていました。
みんなでつくるダンジョンまわり
ワールドマップ
ワールドマップを公開しました。接続されているマップたちをグラフ構造で表示します。 https://dungeon.garakuta-toolbox.com/world
ワールドマップのオレンジ色の〇は「公開されているマップ」を表しています。クリックすることで、そのマップへ移動することもできます。 マップをつくってつなげるほど地図が大きくなるはずなので、つくったマップはぜひ他のマップとつなげてみてください。（いっぱいつながるとワールドマップも楽しい感じになりそう...と思っています）
画像素材の共有まわり
公開した画像素材をブログやSNSなどで共有できるようになりました。くわしくは以下のページをご覧ください。 garakuta-toolbox.com
素材がないとマップ作りの敷居が高い～ということがずっと課題なので、画像素材の公開まわりをすこし整備していきたいなと思ったのでした。
電子工作を再開しました
年末に「今年は電子工作を再開します」とブログに書いたので、さっそくはじめました。
上の画像は、圧電素子をつかった振動センサの試作のようすです。圧電素子を振動させたときに発生する電圧をオペアンプで増幅し、コンパレータにかけるところまでをお試ししているところ。
最終的にはワンチップマイコンと組み合わせて、おもちゃをつくろうとなんとなく思っています。
ところで、画像左端に映っているのは以下のURLで紹介されていた簡易オシロスコープです。これをやりたくなったときに、さすがに波形が見られないとつらぽん、ということで購入してみました。これくらいの用途なら概ね使えるかもという雰囲気です。とはいえ、やっぱり2チャンネルはほしいな～とか、いろいろ欲が出始めている...。
ではでは～。ことしもよろしくお願いします。
2019年の週末開発振り返り
いつも年末になるとこのような記事を書いていたのを思い出したので、今年もなんとなく書いてみます。
だいたい以下のようなことをしていました。
みんなでつくるダンジョンのリリース
みんなでつくるダンジョンは今年の4月末にリリースしたのでした（書いている本人もすっかり忘れていた...）
garakuta-toolbox.hatenablog.com
ゲーム素材サイトの素材をマップ形式で見られて、ついでに探検出来たら面白いかな～という気持ちでつくったサービスです。今年はだいぶこれに時間を割いていました。
リリース時にはなかった「サンプルマップのコピー機能」「チャット機能（これはちゃんとリリース出来ていない...）」「スマートフォンでの編集対応」「ワールドマップ」などなど、リリース後も継続的に開発をしていたりしました。
ずっとインターネット上のみで活動していましたが、ちょっとだけ現実世界にも登場したりしました。わたしの作ったものや活動を知ってもらわないことにはもったいないなあという気持ちになりつつあることもあり、こういう活動は今後もちょっとずつやっていきたいなとは思っているのですが、（いままで消極的だったこともあり）どうふるまったらいいのかよくわかっていない...という感じなのでした（来年への課題）。ウェブサービスなので同人誌即売会系のイベントにも出づらいし...。ということでお悩みがあります（よい情報をお持ちの方がいたらおしえてほしい...！）。
garakuta-toolbox.hatenablog.com
また、みんなでつくるダンジョンのソースコードから一部プロジェクトを切り離して、オープンソースライブラリとして公開する試みもしてみました。
今後は、オープンにできそうなソースコードは外に出すような開発をしていきたいなという気持ちです。（オープンソースは、「じぶんはこんなことができますよ～」ということを伝えるのに都合が良かったりするのです。というわけで出せる情報はなるべく出していきたいのでした）
今後は以下のようなことをしていけたらな～という気持ちです。
- チャット機能を何かの形でリリースしたい
- ユーザーが求めるものなのかな～という気持ちになり若干塩漬け状態にしていましたが、せっかくつくったので何らかの機能として提供したい...。
- ゲーム素材をお持ちの方に素材を登録していただきやすい環境づくり
- 実はいまでも画像素材は公開できます！お手持ちのゲーム素材をみんなでつくるダンジョンのマップ作りにつかってもらってもいいよ！という方は ヘルプ：画像の公開を見てみてください
- 素材がないとマップ作りの敷居が下がらない～ということがずっと課題なので、このへんをなんとか解決していきたい...。
マップをもっと作ってもらいたいし、ワールドマップを大きくしたいのでがんばるぞ...
がらくたツールボックスのウェブページをリニューアル
がらくたツールボックスのウェブページをリニューアルしました。
いままで公開していたページはなんと、このご時世にレスポンシブデザインではない！ということで、メンテしやすいページ構成にして作り直したのでした。ビルドツールとかは特に入れず、HTMLとCSSのみでつくりましたが、このへんはもうちょっと手を入れるかも。Github Pagesで公開しているので、ソースコードもちゃっかり見られます。
自作アバターのモデリング
そろそろじぶんのバーチャルな肉体があったほうがいろいろ便利そう...。ということで、アバターづくりをしていました。
garakuta-toolbox.hatenablog.com
一応それなりに動くところまで作りこんで、VRChatで動かしたりするところまでは出来ていたのでした。ただ、どうも等身がおかしかったり、服が若干突き抜けたり、、、と不満要素がけっこうあって、もう一度作り直そう...ということで作り直している最中です。
今年中に...。という気持ちで取り組んでいたのですが、趣味開発の優先順の問題や、そもそも開発に割ける時間が...。ということもあり、年内の完成は無理そうです。また、自分にとってはモデリング作業って結構難しく、作り上げるのに（または作って壊してを繰り返していて）結構時間がかかってしまう...ということで細々とつくっています。一応継続的につくっているので、なんとか2,3か月中には動かせるところまで行きたいぞ...！
来年はなにやるの？
来年はこんなことをやりたい！
- みんなでつくるダンジョンの継続開発
- （どこか現実世界でお披露目したい...。という気持ちがちょっとある）
- モデリングをおわらせてなにかする
- ここ最近の3Dの世界にはそこはかとないあこがれがあるので、なにかしたい...。
- 電子工作を再開するぞ～
- しばらくご無沙汰していたのですが、最近電子部品とのふれあいイベントがあり、なにかつくりたい欲が高まってきているのだ～
- とりあえずAVRマイコンであそんでみる準備をしている（手になじみがあるPICをつかうかもしれないけど..）
とりあえず書き下してみましたが、ボリューミーかも...。ということで、バランスよく取り組んでいきたいな～という気持ちでした。
この記事を書くために過去記事を見てみたりしていたのですが、それなりにいろいろやっていたかな～という気持ちになりました。
今年の更新はこれでおわり！来年もよろしくお願いします。ではでは～
みんなでつくるダンジョンのマップ作成のスマホ操作をまとめてみました
みんなでつくるダンジョンのマップ作成のスマートフォン対応を鋭意すすめておりますが、スマホで操作するときはこうするといいよ～という情報をヘルプページにまとめました（随時更新していきます）。
とにかくスマホの画面はマップ作成するには小さい！ということで、こうするとある程度編集できますよ～というお話を書いてみます。
アイテムの位置や大きさはこまめにロックする
アイテムの位置をこまめにロックするかどうかで編集の快適さが全く変わります。
アイテムの位置をロックしない場合、このように指などでアイテムに触れると移動できます。マップはアイテムを配置するととで作り上げていくので、アイテムがたくさんある状態でスクロールしようとするとアイテムが移動してしまう、みたいなことになりそうです。
アイテムの位置をロックした場合、このようにアイテムに触れた状態で指を移動しても、スクロールすることができます。あまり移動しないアイテムはロックしておくことで、ある程度快適にスクロールすることができます。
（アイテムをロックしても、実行時に位置が固定されるわけではありません。あくまで編集の補助ツールです）
位置だけでなく、大きさもロックできるので、気づかないうちに変更してしまった...という事故を防ぐためにも、こまめにロックしておくことをおすすめします。
メニューなどはこまめに閉じる
アイテムを選択するとメニューが表示されますが、スマートフォン操作対応に伴い閉じることができるようになりました。メニューもそれなりに画面領域をつかうので、こまめに閉じておくと便利です。
アイテムはコピペして増やすとべんり
同じアイテムはコピー＆ペーストで増やすと便利です。以下の動画のように、アイテムを選択すると右上にコピーボタンが表示されるので押します。つづいてメニューから貼り付けボタンを押すと複製されたアイテムが登場します。
まとめ
現在もスマートフォン最適化のための開発を進めておりますが、上記内容を参考に、みなさんもぜひスマートフォンでのマップ作成を試してみてください（ただし、不具合があるかもなのでこまめに保存してくださいね）。
そして、こうしたほうが使いやすそう～などあれば、Twitter( https://twitter.com/piyorinpa )などでぜひおしえてください。ではでは～
最近の開発報告など（マップ編集のスマホ対応）
最近、開発報告してないじゃん～と思ったので、ひさびさに書いてゆきます
みんなでつくるダンジョンのマップ編集のスマホ対応
いままで「みんなでつくるダンジョン」でのマップの編集はPCのみサポートとしていましたが、やっぱりスマホで編集できたほうが便利という気持ちになったので進めております。 （マップのたんけんについては以前よりスマホ対応しています。）
やったことはだいたい以下の通り。
- タッチ操作でマップをスクロールできるようにする
- いろいろな箇所の地道なレスポンシブ対応
スマホの小さい画面でマップを快適に編集できるようにするのは結構大変ですが、ちまちまと良くなってきています。だいたいの操作をタッチ操作対応できたので、 （快適かどうかはともかく）マップの編集をスマホで楽しめるようになってきました。
私も電車移動などのすき間時間をつかってマップをつくってみていますが、それなりにたのしいかもです。とはいえ、アニメーションを作ったり、絵を登録したり、などの操作は たぶん画面の大きなパソコンのほうが快適です。そういった作業はあらかじめパソコンで済ませておきつつ、出先で編集をするとよさそうです。一通り落ち着いたら、 もうちょっと工夫できないか検討したいところ。
まだ完ぺきではないので、引き続き快適な編集環境を目指して改善していきます。 （みなさんもたまにスマホで触ってみてください～。ただし、現在もいろいろと調整中なので、こまめな保存をお願いします）
ではでは～。
LitElementをつかってみている～
使い勝手のいいコンポーネントをあちらこちらで使えるようにしたくなり、WebComponentsの技術をつかってつくりたいなーどうしようかなーと思っています。 というのも、いまつくっているものたちのJavaScript開発環境は、概ねノンフレームワークもしくはVue.js製なのですが、特定のフレームワークに依存しない形でコンポーネントを定義して共通化して、 じぶんのサイトのいろいろなところで使いたいなという気持ちになっているのでした。
また、コンポーネントを仮に広く一般に公開するときも、WebComponentsの形になっていればどの環境でも基本的には使えそうなので便利そう～と思っています。
そんなこんなを考えているとき、LitElementというものがあることを知りました。
lit-element.polymer-project.org
WebComponentsをつくるには、Shadow Treeにつかいたい要素を放り込んだり、CSSを入れたり、イベントハンドリングは～...。といろいろやらないといけないことがありそうです。 それらを比較的簡単に、つくりやすくしてくれるのがLitElementです。ライブラリがコンパクトな点がよさそうかもと思っています。
とりあえずLitElementの開発環境を スタートガイド に従って準備します。
npm install -g polymer-cli
これをインストールしておけば、ビルド環境を用意しなくても開発ができます。ちゃんとコンポーネントとしてつかうときにはビルド環境はあったほうがいいかもですが、とりあえずパパっと試してみたい～というときには便利。
こんなかんじの雑プロジェクトを用意して、素振り実装をしてみました。
まずはHello Worldっぽいことをやってみる
基本的に、 LitElement クラスを継承する形でコンポーネントのクラスを定義し、最後に customElements.define でカスタム要素を登録すればよさそうです。
まずは適当にテキストを表示するコンポーネントをつくってみます。
// src/sample-element.js Import { LitElement, html } from 'lit-element'; class SampleElement extends LitElement { constructor() { super(); this.name = 'default name'; } static get properties() { return { name: { type: String }, }; } render(){ return html` <p>${this.name}</p> `; } } customElements.define('sample-element', SampleElement);
カスタム要素の属性は static get properties() が返すオブジェクトで定義できるようです。このカスタム要素は name というString型を受け取ります。
属性値は、ふつうのHTML要素と同じく基本的には文字列しか受け取れませんが、type に指定したコンバータによって LitElement側 で指定した型に変換されます。
render() でテンプレートを定義してコンポーネントのDOMを構築していきます。上記の場合は <p> タグで name 属性値を表示するだけの簡単なもの。
では、つくったカスタム要素を使ってみます。これをつかいたいHTMLで読み込めばよいので、以下のようにしてみます。
<!-- sample/index.html --> <!DOCTYPE html> <html> <head> <title>Sample page</title> <meta charset="utf-8"> </head> <body> <sample-element></sample-element> <sample-element name="hoge fuga"></sample-element> <script src="../src/sample-element.js" type="module"></script> </body> </html>
ここで、 polymer-cli をつかってサーバを立ち上げておきます。 polymer serve すると、開発サーバが立ち上がります。
私のプロジェクトはこんな感じのディレクトリ構成なので、lit-element-playground 上で polymer serve を実行すると、 http://localhost:8081/sample で上記HTMLにアクセスできます。
lit-element-playground
├── README.md
├── node_modules
├── package.json
├── sample
│ └── index.html
└── src
└── sample-element.js
表示してみるとこんなかんじ。 name 属性を設定したほうは hoge fuga とプリントされています。かんたん！
リストコンポーネントをつくってみる
こんどはリストコンポーネントをつくってみます。ここで、 list 属性値の type を Array にしているのがポイント。
// src/list-element.js import { LitElement, html } from 'lit-element'; class SampleElement extends LitElement { constructor() { super(); this.list = []; } static get properties() { return { list: { type: Array }, }; } render(){ return html` <ul> ${this.list.map(item => html`<li>${item}</li>`)} </ul> `; } } customElements.define('sample-list', SampleElement);
同じようにHTMLを書いて実行してみます。
<!-- sample/index.html --> <!DOCTYPE html> <html> <head> <title>Sample page</title> <meta charset="utf-8"> </head> <body> <sample-list list='["hoge","fuga","piyo"]'></sample-list> <script src="../src/sample-list.js" type="module"></script> </body> </html>
sample-list 要素の属性値 list に ["hoge","fuga","piyo"] という文字列を指定していますが、先ほど定義した list プロパティの type が Array なので、SampleElement クラスでは配列値として取り扱うことができます。ちなみに、['hoge','fuga','piyo'] のように、シングルクォートで属性値を書くとパースエラーとなってしまうようです。
表示してみるとこんなかんじ。
属性値の変更を監視することもできそうなので、たとえば list 属性を更新したら自動で表示を更新する、みたいなこともできそう（試していません）。
スタイルを当てつつテキスト入力要素をつくってみる
こんどはテキスト入力要素をつくってみます。指定した正規表現にマッチしなかったらメッセージを表示する機能もつけてみます。 また、そろそろスタイルもつけてみたい～ということで適当なスタイルを当ててみます。
// src/text-element.js import { LitElement, html, css } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; class SampleTextbox extends LitElement { constructor() { super(); this.regexp = ''; this.message = ''; this.messageClasses = { hidemsg: false } } static get properties() { return { regexp: { type: String }, message: { type: String }, }; } static get styles() { return css` input { border: 1px solid gainsboro; padding: 10px 20px; border-radius: 3px; } .hidemsg { display: none; } `; } isValid(value) { const re = new RegExp(this.regexp); return !!value.match(re); } validate(e) { if( !this.regexp ) return; this.messageClasses = { hidemsg: this.isValid(e.target.value.toString()) } this.requestUpdate(); } render(){ return html` <div> <input @input="${this.validate}" type="textbox"></input> <span class="${classMap(this.messageClasses)}">${this.message}</span> </div> `; } } customElements.define('sample-textbox', SampleTextbox);
スタイルは static get styles() で定義します。デフォルトでShadow TreeにCSS定義が入るので、基本的にはCSSのスコープは要素内で閉じています。つかうときは、クラス名を <input class="hoge"> のように指定してもいいですが、 classMap をつかえば、動的にスタイルを変更できます。ただし、classMap に指定するObjectのプロパティを変更したとき（たとえは this.messageClasses.hidemsg = true のように変更する）はスタイルが反映されず、Object全体を変更したとき（たとえば this.messageClasses = { hidemsg: true } ）にスタイルが反映されました。このへんの挙動はまだよく理解できてないかもですが、めちゃめちゃハマってしまった。。。今回はメッセージの表示・非表示切り替えに classMap をつかってみています。
render() で返すテンプレートの @input は oninput の意で、入力内容が変更されたら呼び出されるイベントです。イベント系は基本的に @hoge のように表記すればよいようです。（もちろん addEventListener とかもつかえる）
入力値を捕捉して、指定された正規表現 （ regexp 属性）を満たさない場合はメッセージ （ message 属性）を表示します。メッセージの表示・非表示は @input イベントを捕捉して hidemsg クラスをあてるかどうかで制御していますが、メッセージ表示のクラスの適用を管理している this.messageClasses は変更されても何も起きないので、じぶんで this.requestUpdate(); を呼び出して描画に反映させる必要があります。
<!-- sample/index.html --> <!DOCTYPE html> <html> <head> <title>Sample page</title> <meta charset="utf-8"> </head> <body> <sample-textbox regexp="^\d+$", message="数字をいれてね"></sample-textbox> <script src="../src/sample-textbox.js" type="module"></script> </body> </html>
こんなかんじにつくったカスタム要素をつかってみます。数字にマッチしないときは「数字を入れてね」と表示されるはず。
それっぽくなった！また、input text にも（わかりづらいですが）ちゃんとスタイルが当たっています。
まとめ
とりあえずいろいろさわってみたけど、もうちょっとさわってみたい～となっています。ではでは～。
JavaScriptで書いたあたり判定処理をnpmモジュールとして公開してみました
みんなでつくるダンジョンでつかわれているあたり判定処理は、実は自前で書いていたりします。 アルゴリズムは以下の記事を多分に参考にさせていただいています。
で、インターネットに公開されている記事を参考に作ったものだし、ソースコードもなるべく誰でも見られるようにしたいなという気持ちで、あたり判定処理まわりを切り出してGithubで公開することにしました。できたてほやほやのリポジトリですが、一応1年くらい手を入れながら使っているプログラムです。 （READMEとかは、英語できないのに無理して書いたふしがあるので、だいぶはちゃめちゃな感じになっていそうですが...）
動作サンプルは以下の通り。（これもとりあえず即席で作ったのでだいぶ雑感はありますが、なんとなくできることがわかるかな...という程度のつくりにはなっているとおもいます。なっていなかったらPull Requestください...）
切り離したライブラリについては、今後はGithubの公開リポジトリで管理しつつ、npmコマンドでインストールしたいなという気持ちになり、モジュールを公開してみることにしました。
以下のコマンドでお使いのプロジェクトにインストールできます。
npm install --save @piyoppi/colision-detector
こんなかんじで、公開できそうなものはなるべく自分のプロダクトから切り離して運用できたらいいなという気持ちなのでした。 ではでは～
