がらくたツールボックスのウェブログスマートフォン用の表示で見るがらくたツールボックスのウェブログ2020-01-17【あいこんくらぶ】サービス終了のお知らせドット絵投稿・公開サービス「あいこんくらぶ」の提供を終了することにいたしました。以降、会員登録の受付を終了します。中にサービスを完全に終了します。アップロード済みのドット絵や会員情報は、サービス終了後にすべて削除いたしますので、ダウンロードを忘れないようにご注意ください。ごろにサービスを開始しました。訪問者数の減少がお悩みポイントでした。よさそうと判断し、このように決めました。「なかなか使ってもらえない~」というお悩みをずっと抱えるよりは、ほかにもっと面白いものをつくったほうがいいかも...と思っています。繰り返しになりますが、あいこんくらぶに存在するデータはサービス終了とともにすべて削除しますので、お手元にデータがない場合はダウンロードをお忘れなきようお願いいたします。いままであいこんくらぶをご利用いただき、ありがとうございました。みんなでつくるダンジョン新年初投稿をばをば。年末年始のお休みとかにはこんなことをしていました。みんなでつくるダンジョンまわりワールドマップワールドマップを公開しました。接続されているマップたちをグラフ構造で表示します。https://dungeon.garakuta-toolbox.com/worldワールドマップワールドマップのオレンジ色の〇は「公開されているマップ」を表しています。クリックすることで、そのマップへ移動することもできます。マップをつくってつなげるほど地図が大きくなるはずなので、つくったマップはぜひ他のマップとつなげてみてください。(いっぱいつながるとワールドマップも楽しい感じになりそう...と思っています)画像素材の共有まわり公開した画像素材をブログやSNSなどで共有できるようになりました。くわしくは以下のページをご覧ください。garakuta-toolbox.com素材がないとマップ作りの敷居が高い~ということがずっと課題なので、画像素材の公開まわりをすこし整備していきたいなと思ったのでした。年末に「今年は電子工作を再開します」とブログに書いたので、さっそくはじめました。上の画像は、圧電素子をつかった振動センサの試作のようすです。圧電素子を振動させたときに発生する電圧をオペアンプで増幅し、コンパレータにかけるところまでをお試ししているところ。最終的にはワンチップマイコンと組み合わせて、おもちゃをつくろうとなんとなく思っています。ところで、画像左端に映っているのは以下のURLで紹介されていた簡易オシロスコープです。これをやりたくなったときに、さすがに波形が見られないとつらぽん、ということで購入してみました。これくらいの用途なら概ね使えるかもという雰囲気です。いえ、やっぱり2チャンネルはほしいな~とか、いろいろ欲が出始めている...。pc.watch.impress.co.jpではでは~。ことしもよろしくお願いします。22:03開発の記録(20200113)Tweet広告を非表示にするもっと読むコメントを書く2019-12-302019年の週末開発振り返り雑記いつも年末になるとこのような記事を書いていたのを思い出したので、今年もなんとなく書いてみます。2017年の週末開発ふりかえり2018年の週末開発ふりかえりだいたい以下のようなことをしていました。みんなでつくるダンジョンのリリースがらくたツールボックスのウェブサイトのリニューアル自作アバターのモデリングみんなでつくるダンジョンのリリースみんなでつくるダンジョンは今年の4月末にリリースしたのでした(書いている本人もすっかり忘れていた...)garakuta-toolbox.hatenablog.comゲーム素材サイトの素材をマップ形式で見られて、ついでに探検出来たら面白いかな~という気持ちでつくったサービスです。今年はだいぶこれに時間を割いていました。リリース時にはなかった「サンプルマップのコピー機能」「チャット機能(これはちゃんとリリース出来ていない...)」「スマートフォンでの編集対応」「ワールドマップ」などなど、リリース後も継続的に開発をしていたりしました。インターネット上のみで活動していましたが、ちょっとだけ現実世界にも登場したりしました。わたしの作ったものや活動を知ってもらわないことにはもったいないなあという気持ちになりつつあることもあり、こういう活動は今後もちょっとずつやっていきたいなとは思っているのですが、(いままで消極的だったこともあり)どうふるまったらいいのかよくわかっていない...という感じなのでした(来年への課題)。ウェブサービスなので同人誌即売会系のイベントにも出づらいし...。いうことでお悩みがあります(よい情報をお持ちの方がいたらおしえてほしい...!)。garakuta-toolbox.hatenablog.comまた、みんなでつくるダンジョンのソースコードから一部プロジェクトを切り離して、オープンソースライブラリとして公開する試みもしてみました。github.com今後は、オープンにできそうなソースコードは外に出すような開発をしていきたいなという気持ちです。(オープンソースは、「じぶんはこんなことができますよ~」ということを伝えるのに都合が良かったりするのです。いうわけで出せる情報はなるべく出していきたいのでした)今後は以下のようなことをしていけたらな~という気持ちです。チャット機能を何かの形でリリースしたいユーザーが求めるものなのかな~という気持ちになり若干塩漬け状態にしていましたが、せっかくつくったので何らかの機能として提供したい...。ヘルプ:画像の公開を見てみてください素材がないとマップ作りの敷居が下がらない~ということがずっと課題なので、このへんをなんとか解決していきたい...。マップをもっと作ってもらいたいし、ワールドマップを大きくしたいのでがんばるぞ...がらくたツールボックスのウェブページをリニューアルがらくたツールボックスのウェブページをリニューアルしました。garakuta-toolbox.comいままで公開していたページはなんと、このご時世にレスポンシブデザインではない!ということで、メンテしやすいページ構成にして作り直したのでした。ビルドツールとかは特に入れず、HTMLとCSSのみでつくりましたが、このへんはもうちょっと手を入れるかも。Pagesで公開しているので、ソースコードもちゃっかり見られます。自作アバターのモデリングそろそろじぶんのバーチャルな肉体があったほうがいろいろ便利そう...。いうことで、アバターづくりをしていました。garakuta-toolbox.hatenablog.com一応それなりに動くところまで作りこんで、VRChatで動かしたりするところまでは出来ていたのでした。等身がおかしかったり、服が若干突き抜けたり、、、と不満要素がけっこうあって、もう一度作り直そう...ということで作り直している最中です。いう気持ちで取り組んでいたのですが、趣味開発の優先順の問題や、そもそも開発に割ける時間が...。いうこともあり、年内の完成は無理そうです。自分にとってはモデリング作業って結構難しく、作り上げるのに(または作って壊してを繰り返していて)結構時間がかかってしまう...ということで細々とつくっています。一応継続的につくっているので、なんとか2,3か月中には動かせるところまで行きたいぞ...!来年はなにやるの?来年はこんなことをやりたい!みんなでつくるダンジョンの継続開発(どこか現実世界でお披露目したい...。いう気持ちがちょっとある)モデリングをおわらせてなにかするここ最近の3Dの世界にはそこはかとないあこがれがあるので、なにかしたい...。電子工作を再開するぞ~しばらくご無沙汰していたのですが、最近電子部品とのふれあいイベントがあり、なにかつくりたい欲が高まってきているのだ~とりあえずAVRマイコンであそんでみる準備をしている(手になじみがあるPICをつかうかもしれないけど..)とりあえず書き下してみましたが、ボリューミーかも...。いうことで、バランスよく取り組んでいきたいな~という気持ちでした。この記事を書くために過去記事を見てみたりしていたのですが、それなりにいろいろやっていたかな~という気持ちになりました。今年の更新はこれでおわり!来年もよろしくお願いします。12:582019年の週末開発振り返りTweet広告を非表示にするもっと読むコメントを書く2019-12-19みんなでつくるダンジョンのマップ作成のスマホ操作をまとめてみましたみんなでつくるダンジョンみんなでつくるダンジョンのマップ作成のスマートフォン対応を鋭意すすめておりますが、スマホで操作するときはこうするといいよ~という情報をヘルプページにまとめました(随時更新していきます)。garakuta-toolbox.comとにかくスマホの画面はマップ作成するには小さい!ということで、こうするとある程度編集できますよ~というお話を書いてみます。アイテムの位置や大きさはこまめにロックするアイテムの位置をこまめにロックするかどうかで編集の快適さが全く変わります。アイテムの位置をロックしない場合、このように指などでアイテムに触れると移動できます。マップはアイテムを配置するととで作り上げていくので、アイテムがたくさんある状態でスクロールしようとするとアイテムが移動してしまう、みたいなことになりそうです。アイテムの位置をロックしない場合はアイテムが動くアイテムの位置をロックした場合、このようにアイテムに触れた状態で指を移動しても、スクロールすることができます。移動しないアイテムはロックしておくことで、ある程度快適にスクロールすることができます。(アイテムをロックしても、実行時に位置が固定されるわけではありません。編集の補助ツールです)アイテム位置をロックするとアイテムに触れてもスクロールできる位置だけでなく、大きさもロックできるので、気づかないうちに変更してしまった...という事故を防ぐためにも、こまめにロックしておくことをおすすめします。位置やサイズのロックメニューなどはこまめに閉じるアイテムを選択するとメニューが表示されますが、スマートフォン操作対応に伴い閉じることができるようになりました。メニューもそれなりに画面領域をつかうので、こまめに閉じておくと便利です。メニューは閉じることができますアイテムはコピペして増やすとべんり同じアイテムはコピー&ペーストで増やすと便利です。以下の動画のように、アイテムを選択すると右上にコピーボタンが表示されるので押します。つづいてメニューから貼り付けボタンを押すと複製されたアイテムが登場します。コピペできますまとめ現在もスマートフォン最適化のための開発を進めておりますが、上記内容を参考に、みなさんもぜひスマートフォンでのマップ作成を試してみてください(ただし、不具合があるかもなのでこまめに保存してくださいね)。)などでぜひおしえてください。してないじゃん~と思ったので、ひさびさに書いてゆきますみんなでつくるダンジョンのマップ編集のスマホ対応いままで「みんなでつくるダンジョン」でのマップの編集はPCのみサポートとしていましたが、やっぱりスマホで編集できたほうが便利という気持ちになったので進めております。(マップのたんけんについては以前よりスマホ対応しています。)タッチ操作でマップ編集できるようにしているよやったことはだいたい以下の通り。タッチ操作でマップをスクロールできるようにするいろいろな箇所の地道なレスポンシブ対応スマホの小さい画面でマップを快適に編集できるようにするのは結構大変ですが、ちまちまと良くなってきています。(快適かどうかはともかく)マップの編集をスマホで楽しめるようになってきました。画面が狭いのでアニメーション編集はちょっと大変かも私も電車移動などのすき間時間をつかってマップをつくってみていますが、それなりにたのしいかもです。画面の大きなパソコンのほうが快適です。いった作業はあらかじめパソコンで済ませておきつつ、出先で編集をするとよさそうです。工夫できないか検討したいところ。完ぺきではないので、引き続き快適な編集環境を目指して改善していきます。(みなさんもたまにスマホで触ってみてください~。現在もいろいろと調整中なので、こまめな保存をお願いします)ではでは~。プログラミング使い勝手のいいコンポーネントをあちらこちらで使えるようにしたくなり、WebComponentsの技術をつかってつくりたいなーどうしようかなーと思っています。じぶんのサイトのいろいろなところで使いたいなという気持ちになっているのでした。コンポーネントを仮に広く一般に公開するときも、WebComponentsの形になっていればどの環境でも基本的には使えそうなので便利そう~と思っています。そんなこんなを考えているとき、LitElementというものがあることを知りました。Treeにつかいたい要素を放り込んだり、CSSを入れたり、イベントハンドリングは~...。やらないといけないことがありそうです。それらを比較的簡単に、つくりやすくしてくれるのがLitElementです。ライブラリがコンパクトな点がよさそうかもと思っています。polymer-cliこれをインストールしておけば、ビルド環境を用意しなくても開発ができます。コンポーネントとしてつかうときにはビルド環境はあったほうがいいかもですが、とりあえずパパっと試してみたい~というときには便利。こんなかんじの雑プロジェクトを用意して、素振り実装をしてみました。カスタム要素を登録すればよさそうです。適当にテキストを表示するコンポーネントをつくってみます。返すオブジェクトで定義できるようです。いうString型を受け取ります。指定した型に変換されます。テンプレートを定義してコンポーネントのDOMを構築していきます。属性値を表示するだけの簡単なもの。つくったカスタム要素を使ってみます。これをつかいたいHTMLで読み込めばよいので、以下のようにしてみます。つかってサーバを立ち上げておきます。すると、開発サーバが立ち上がります。上記HTMLにアクセスできます。sample-element.js表示してみるとこんなかんじ。とプリントされています。かんたん!はじめてのLitElementリストコンポーネントをつくってみるこんどはリストコンポーネントをつくってみます。しているのがポイント。SampleElement);同じようにHTMLを書いて実行してみます。クラスでは配列値として取り扱うことができます。ように、シングルクォートで属性値を書くとパースエラーとなってしまうようです。表示してみるとこんなかんじ。属性を更新したら自動で表示を更新する、みたいなこともできそう(試していません)。スタイルを当てつつテキスト入力要素をつくってみるこんどはテキスト入力要素をつくってみます。指定した正規表現にマッチしなかったらメッセージを表示する機能もつけてみます。スタイルもつけてみたい~ということで適当なスタイルを当ててみます。TreeにCSS定義が入るので、基本的にはCSSのスコープは要素内で閉じています。つかえば、動的にスタイルを変更できます。)にスタイルが反映されました。このへんの挙動はまだよく理解できてないかもですが、めちゃめちゃハマってしまった。意で、入力内容が変更されたら呼び出されるイベントです。ように表記すればよいようです。呼び出して描画に反映させる必要があります。</body></html>こんなかんじにつくったカスタム要素をつかってみます。数字にマッチしないときは「数字を入れてね」と表示されるはず。(わかりづらいですが)ちゃんとスタイルが当たっています。まとめとりあえずいろいろさわってみたけど、もうちょっとさわってみたい~となっています。JavaScriptみんなでつくるダンジョンでつかわれているあたり判定処理は、実は自前で書いていたりします。アルゴリズムは以下の記事を多分に参考にさせていただいています。marupeke296.comで、インターネットに公開されている記事を参考に作ったものだし、ソースコードもなるべく誰でも見られるようにしたいなという気持ちで、あたり判定処理まわりを切り出してGithubで公開することにしました。できたてほやほやのリポジトリですが、一応1年くらい手を入れながら使っているプログラムです。(READMEとかは、英語できないのに無理して書いたふしがあるので、だいぶはちゃめちゃな感じになっていそうですが...)github.com動作サンプルは以下の通り。(これもとりあえず即席で作ったのでだいぶ雑感はありますが、なんとなくできることがわかるかな...という程度のつくりにはなっているとおもいます。sample切り離したライブラリについては、今後はGithubの公開リポジトリで管理しつつ、npmコマンドでインストールしたいなという気持ちになり、モジュールを公開してみることにしました。www.npmjs.com以下のコマンドでお使いのプロジェクトにインストールできます。@piyoppi/colision-detectorこんなかんじで、公開できそうなものはなるべく自分のプロダクトから切り離して運用できたらいいなという気持ちなのでした。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。