作ったもの – koneta https://koneta.click DIYとデジモノとプログラミングとライフハックをコネた...小ネタ Sun, 13 Mar 2022 14:22:50 +0000 ja hourly 1 https://wordpress.org/?v=6.1 https://koneta.click/wp-content/uploads/2020/02/cropped-icon-32x32.png 作ったもの – koneta https://koneta.click 32 32 HTMLとCSSでサムネイルジェネレータを作ってみました https://koneta.click/p/1028 https://koneta.click/p/1028#respond Sun, 13 Mar 2022 11:52:35 +0000 https://koneta.click/?p=1028 どうも、繁忙期をなんとか乗り越え本ブログを更新できる時間が戻ってきました。しかし、またいつ時間が取れなくなるかはわかりません。そこで、せめてブログの更新時間が減るようにサムネイルを簡単に作れる仕組みを作ってみました。色々作り方はあると思いますが、今回はHTMLとCSSでサムネイルのフォーマットを作り、それを画像化するという方針です。

どんなのができる？

本ブログでは主に2種類のフォーマットでサムネイルを作っているのですが、その中でも一番使っているものを生成できるようにしてみました。

やっていることは、背景画像を半透明の黒で暗くして、そこに半透明の文字抜きの白をのせています。

できたもの

というわけで、このような物ができました。

動作画面イメージ

背景画像の項目で端末内の画像を選択すると背景画像として表示され、その下のタイトルの欄に文字列を入力するとタイトルとして表示されます。基本的に誰にも公開する気はなかったので見た目としては全く手を入れてません。

ちょっとだけコード詳細

大したことはしていませんが、少しだけどんなコードかを書いておこうと思います。

コード全体
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>サムネイルジェネレータ</title>
  <link rel="stylesheet" href="./resource/ress.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>koneta.click サムネイルジェネレータ</h1>

    <div id="thumbnail-background" class="thumbnail">
      <div class="thumbnail__background-black__wrapper"></div>
      <!-- 半透明のテキストエリア テキストはエリアに高さを持たせるためのダミー -->
      <div class="thumbanail__title-dummy__area">
        <p id="p-title-dummy" class="thumbanail__title-dummy__text">タイトルサンプル</p>
      </div>
      <!-- タイトル文字に背景が透過しているように見せるための要素 -->
      <div id="thumbnail-background-dummy" class="thumbanail__title__area">
        <p id="p-title" class="thumbanail__title__text">タイトルサンプル</p>
      </div>
    </div>

    <div class="contoroler">
      <h2>操作</h2>
      <h3>背景画像</h3>
      <input type="file" id="form-thumbnail-background">
      <h3>タイトル(HTML記法でOK)</h3>
      <textarea id="form-text-title">タイトルサンプル</textarea>
      <h3>保存</h3>
      <button id="button-save">画像にする</button>
      <div class="controler__result-img__wrapper">
        <img id="result-image" />
      </div>
    </div>
  </div>

  <script>
    // 背景画像用処理
    const fileInput = document.getElementById('form-thumbnail-background')
    fileInput.addEventListener('change', () => {
      const reader = new FileReader()
      // ファイルが読み込まれたときに実行する
      reader.onload = function (e) {
        const imageUrl = e.target.result
        const thumbnailBackground = document.getElementById("thumbnail-background")
        thumbnailBackground.style.backgroundImage = `url(${imageUrl})`

        const thumbnailBackgroundDummy = document.getElementById("thumbnail-background-dummy")
        thumbnailBackgroundDummy.style.backgroundImage = `url(${imageUrl})`
      }
      reader.readAsDataURL(fileInput.files[0])
    })

    // タイトル用処理
    const textInput = document.getElementById('form-text-title')
    textInput.addEventListener('change', () => {
      // 高さ産出用と背景を見せる用の要素にテキストを設定する
      document.getElementById('p-title-dummy').innerHTML = textInput.value
      document.getElementById('p-title').innerHTML = textInput.value
    })

    // 画像化関係処理
    const saveButton = document.getElementById('button-save')
    saveButton.addEventListener('click', () => {
      const thumbnail = document.getElementById('thumbnail-background')
      htmlToImage.toJpeg(thumbnail)
        .then(function (dataUrl) {
          document.getElementById('result-image').src = dataUrl
        })
        .catch(function (error) {
          console.error('oops, something went wrong!', error);
        });
    })
  </script>
  <style>
    @font-face {
      font-family: 'NikumaruFont';
      src: url(./resource/nikumaru.otf);
    }
    .container {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }
    .thumbnail {
      width: 100%;
      aspect-ratio: 16 / 9;
      position: relative;
      background-color: #000000;
      background-size: cover;
      background-position: center;
    }
    .thumbnail__background-black__wrapper {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .thumbanail__title-dummy__area {
      width: 80%;
      padding: 3% 0;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 20;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.9);
      outline: 6px solid rgba(255, 255, 255, 0.9);
      outline-offset: 4px;
      text-align: center;
    }
    .thumbanail__title__area {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 30;
      background-size: cover;
      background-position: center;
      background-clip: text;
      -webkit-background-clip: text;
    }
    .thumbanail__title-dummy__text {
      font-size: 3rem;
      font-family: NikumaruFont;
      color: transparent;
    }
    .thumbanail__title__text {
      font-size: 3rem;
      font-family: NikumaruFont;
      color: rgba(0, 0, 0, 0.3);
    }
    .controler__result-img__wrapper {
      width: 100%;
    }
    .controler__result-img__wrapper img {
      width: 100%;
    }
  </style>
</body>
</html>

今回のコードではサムネイルで使っているフォントやcssのリセットを読み込んでいますが、それらはライセンスの関係もありここでは載せていません。フォントはこちらのにくまるフォント、リセットにはress.cssを使っています。もし、そのまま当サイトと同じフォーマットのサムネイルを作りたい場合は上記の2つをresourseディレクトリに設置してからアクセスしてみてください。

ちなみにフォントやサムネイルの画像素材など、本サイトで使わせてもらっている素材たちはこちらのページにまとめていますので、気になった方はこちらをご覧ください。

要所としては入力された画像やタイトルをサムネイルに反映する部分だと思います。値が入力されたときそれを画面に反映しようと思ったとき、最近ではVueなどのフレームワークがうかぶかもしれませんが、今回のツールくらいであれば直書きで十分です。

まずは画像が選択されたときの処理です。

const fileInput = document.getElementById('form-thumbnail-background')
fileInput.addEventListener('change', () => {
  const reader = new FileReader()
  // ファイルが読み込まれたときに実行する
  reader.onload = function (e) {
    const imageUrl = e.target.result
    // 選択された画像を要素の背景に設定する
    const thumbnailBackground = document.getElementById("thumbnail-background")
    thumbnailBackground.style.backgroundImage = `url(${imageUrl})`
  }
  reader.readAsDataURL(fileInput.files[0])
})

これで画像読み込みはオッケーです。次にテキスト部分は以下のようになります。

const textInput = document.getElementById('form-text-title')
textInput.addEventListener('change', () => {
  document.getElementById('p-title').innerHTML = textInput.value
})

テキストに関してはこれだけです。これだけの記述量ですみ、環境構築も不要な点でもフレームワークは不要だと思います。これでサムネイル画像完成です。

もしこのコードから改造を行う場合は、サムネイルのフォーマットを作っているcssと上記のjsで変更する対象を調整すればいいと思います。

終わりに

もともとサムネイルを作る際はGIMPというフリーソフトを使っており、作業時間は30分ほどかかっていました。それがこのジェネレータを使うことで5分程度でサムネイルを作れるようになりました。また、webページとして作成したため、作業できる端末がGIMPをインストールしているデスクトップやMacBookに限られていたところを、主にブログ更新に使っているChromebookでもできるようになったのが大きいところです。

実はボタンを押すだけで画像を生成するところまで実装しようと思っていたのですが、どうやらいま出ているライブラリでは対応していないcssを使ってしまっているためうまく生成してくれませんでした。そのため今はフォーマット完成後スクリーンショットを撮るという微妙な形になっています。そのうち時間ができたらここらもどうにかしていきたいと思います。

あとは他のサムネイルもサクッと作れるように更新していこうと思います。

]]> https://koneta.click/p/1028/feed 0 VRoidStudioの髪型合成ツールを作りました！ https://koneta.click/p/661 https://koneta.click/p/661#respond Sat, 06 Mar 2021 13:25:35 +0000 https://koneta.click/?p=661 ※ベータ版時代に作成したツールです。現在の正式版では動作検証していませんのでご注意ください！

VRoid Studioという神ツールをご存知ですか？こちらは果てしなく簡単に3Dキャラクターを「描く」ことができるツールです。YouTubeやVRCなど、「Vのモノ」が流行っている昨今自分の分身となる3Dモデルが欲しくなるのは必然…私も色々と弄っては自分のモデルを作成しています (完成したとは…言ってない…)。

VRoid Studio | VRoid

VRoid Studioは、人型アバター（キャラクター）の3Dモデルを作成できるWindows・Mac用アプリケーションで、どなたでも無償でご利用いただけます。作成した3Dモデルは、VR/ARコンテンツ内でアバターとして利用するなど、商用・非商用を問わず、さまざまな用途に活用できます。

しかし、そんな神ツールのVRoid Studioにも微妙な点があります。それは「髪の毛の合成ができない」こと…。ツール内で作成した髪型はプリセットとして保存、他のモデルを作成するときに読み込むことで再利用することができます。しかし、読み込める髪型は1つのみ、他の髪型を読み込もうとすると追加はしてくれない仕様になっています。

VRoid Studioの髪型プリセットはBoothなどで購入することもできます。ここではケモミミやメガネだったり、自分で作成した髪型に”追加”したいのですがVRoid Studioだけでは実現することができません。

そこで「VRoid Studio髪型合成ツール」をWebアプリとして作成しました。この記事では、技術的な面と合わせて簡単に紹介していきたいと思います。(※もちろん非公式ツールです)

基本機能紹介

VRoid Studio Hair Mixer

VRoid Studioの髪型プリセットをただただ合成してくれるWebツールです。

本ツールの機能は至極単純、髪型プリセットを合成するだけ…です。

下準備

まずは下準備です。まずは合成したい髪型を準備します。こちらは自分で作成してもインターネット上で入手しても大丈夫です。

VRoid Studioで髪型を作成/保存した場合は下記の場所に保存されています。

▼Windows
（”AppData”は隠しフォルダの為、フォルダーオプションにて「隠しファイル、隠しフォルダー、および隠しドライブを表示する」にチェックを入れることで表示されます。）
C:\Users\ユーザー名\AppData\LocalLow\pixiv\VRoidStudio\hair_presets
▼Mac
（”Library”はデフォルトでは非表示の為、「/Users/<ユーザ名>/」まで開いた状態で「command+shift+.（ドット）」を押すことで表示されます。）
/Users/<ユーザ名>/Library/Application Support/com.Company.ProductName/hair_presets
※Finder>移動>フォルダへ移動>「フォルダの場所を入力:」へ上記パスを入力してください。

作成したモデルや髪型のプリセットを削除する方法

引用した部分に書いてあるように、これらは隠しファイルになっているので閲覧には解除しておく必要があります。

上記のフォルダを見てもらうと、髪型プリセットの中身はpreset.jsonとテクスチャ画像(png形式)になっています。次の段階ではこれらのファイルをブラウゼで選択することで合成していきます。

合成

合成する髪型が決まったらいよいよ本ツールの出番です！画面上のお願い通りにファイルを選択してください。

この時、はじめにベースにしたい髪型を選択してください。1プリセット内にベースヘアは1つのみなので、2つ目に読み込まれるベースヘアは無視されます。

基本は画面の指示通りに….

合成が完了すると合成結果のzipファイルをダウンロードすることができます。

「ダウンロード！」が出たら合成完了！

これを解凍し、髪プリセットが保存されているフォルダに設置することでVRoid Studioから合成した髪型を使用することができます。

合成例

というわけで、上記の作業でこんな感じに合成できます！

闇渋！可愛い！ (ベース)
必要な部分だけにしたら悲しい感じに… (追加髪型)

デフォルトキャラ2名にご協力いただきました。

合成！可愛い！けどなんだか4つある…。

技術的な話

さて簡単にですがツール自体の説明をしたので技術的な部分も簡単にまとめておきます。

フロントエンド

Svelte • Cybernetically enhanced web apps

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

フロントエンドにはSvelteというJavaScriptフレームワークを使用しています。ここらのフレームワークとしてはReactやVueが主流のようですが、シンプルに実装できるという点ではこのSvelteに大きなアドバンテージがあります。

kognise/water.css

A drop-in collection of CSS styles to make simple websites just a little nicer – kognise/water.css

スタイル部分ではWater.cssというクラスレスのCSSフレームワーク(と言っていいのでしょうか?) を使ってみました。

こちらは1つのcssを読み込むだけでページの見た目を「それっぽく」整えてくれます。この領域ではBootstrapなどが多く使われていますが、それらはデザイン用のクラスを付与する必要があり、結果としてコード内に処理とは関係ないクラスを多く記述しなくてはいけなくなります。

一方クラスレスのwater.cssは読み込むだけ。導入するときも削除するときも簡単です。今回はそのまま使用していますが、本番のcssができるまでの仮置としても活用していけそうです。

バックエンド

このツールでしたらフロントエンドだけで作ることも可能だったのですが、fastAPIでツールと作ってみたかったのでバックエンドも実装してみました。

FastAPI

FastAPI framework, high performance, easy to learn, fast to code, ready for production

fastAPIはその名の通りAPIを簡単に作ることができるWebフレームワークです。Pyhonでのコーディングは慣れていましたが、Webサーバとして書いたのは初めてでしたが、fastAPIはドキュメントも分かりやすく簡単に実装することができました。

終わりに

さて簡単に書いてきました。何といってもVRoid Studioが神ツール過ぎて髪ツールを作った。それだけです。

]]> https://koneta.click/p/661/feed 0 3DプリンターでPC縦置きスタンドを作りました！ – 3Dプリンターのある生活 https://koneta.click/p/643 https://koneta.click/p/643#respond Mon, 01 Feb 2021 13:29:25 +0000 https://koneta.click/?p=643 最近では在宅業務が多く、会社のノートPCを自宅に持ち帰り作業しています。そんな中、困っているのがPCの置き場です。自宅には自分のノートPCやモバイルモニターもあるのですが、それらを重ねて置くしか置き場がないのです。

重ねて置いておくと下のものを取りたくなった際に上のものをどかす必要があり、それがどうにもめんどくさいです。というわけで今回はPC達を立てて置けるようPCスタンドを作っていきたいと思います。

作りたいモノ

さて改めて、今回作るもののイメージを固めていきたいと思います。正直今回作るものはAmazonで調べればいくらでも出てきます。なので単純にPCを縦置きしたいだけであればこちらを購入すればいいわけです。

ただ、買うけでは面白くないので自分作ろうという話…だけでは無いです。

今回、私はノートPC2台とモバイルモニターを収納することが目的なのですが、調べてみると意外と3台を縦置きできるスタンドというのは、ほとんど販売されていません (執筆時点で1商品のみ)。

というわけで今回は3台を縦置きできるスタンドを自作していきたいとおみます。

モデリング

では早速作っていきましょう！

今回は使用するソフトはFusion360です。3DCADということで敷居が高く感じる方もいるかもですが、実際は範囲を決めて押し出して角を取るだけと簡単です。

作業工程

私はまだまだ初心者で簡単な機能しか使っていませんが、今回のモデリング時間は計測を含めて10分程度だったと思います。あとはstl形式で出力してスライスソフトで3Dプリンターで扱う形式に変換してあげるだけです。

スライス

スライスソフトは今回も使用するプリンターに合わせてFlashForgeさんのソフトを使っていきます。

さて、普段の私であれば何も考えずにスライスソフトにモデルを読み込んでサポートを自動挿入、デフォルトの設定でスライス…とやってしまうところですが、今回は「向き」をちゃんと考えてみようと思います。

この向きになります

聞いた話によると、層の向きにより印刷後の強度が変わってくるそうです。調べると色んな情報が出てきますので詳細は省きますが、下記の図のように層の向きと力がかかる向きが合ってしまうと、剥離の原因になります。

雑図！

そんなわけで今回は、上記のスライスソフトのスクリーンショットのように力がかかる向きに強くなるよう、モデル自体を立てて配置してみました。

ちなみに…この配置によって、ヘッドが宙に浮く部分がなくなり、糸引きの原因を回避できるという思わぬメリットもありました。

できた！

そんなこんなで完成したものがこちらです。

完成！

PC達を設置してもいい感じです！

造形精度はぼかす方針

今回使用した3Dプリンターの造形可能サイズ内に収めるため約13cmくらいしかサイズを取れなかったので、1台だけおいた際に倒れてしまうかなと思っていましたが、そんなことはなく、いい感じです。

1台でも大丈夫！

重ねて設置していたときと比べて、3台ともすぐに取り出すことができるので、PCスタンドとうのは便利！3Dプリンターとか関係なくぜひとも導入したいアイテムですね。

終わりに

今回は初の2桁時間の印刷となりましたが、なんとかうまくいってよかったです。写真を撮り忘れたので今回の記事では触れませんでしたが、印刷中に謎のでっぱりができ、ヘッドがそこに引っかかり層が思いっきりズレるという事件も起こっていました。

でっぱりをニッパーで切断することで何とか復帰することができましたが、実際に色々作ってみるといろんなアクシデントに遭遇して面白いですね。こちとら趣味なのでいろんなアクシデントに遭遇しつつ今後も楽しくやっていきたいと思います。

]]> https://koneta.click/p/643/feed 0 壁に穴をあけたくないそんな時に – 3Dプリンターのある生活 https://koneta.click/p/585 https://koneta.click/p/585#respond Sun, 29 Nov 2020 15:08:51 +0000 https://koneta.click/?p=585 室内用にすだれを買ってみたのですが、固定用に付属していたのがネジ式のものでした。しかし設置しようとしていた窓の上は長押(なげし:日本建築に見られる部材で、柱を水平方向につなぐもの。)で、ネジで固定するには薄い気がしました。そもそも穴が空くのも抵抗があるので、今回はすだれを固定する部品を3Dプリンターで作っていこうと思います。使用するのはいつも通りのFlashForgeさんのFinderを使い、今回は長押の木材に合わせて木質フィラメントを使ってみようと思います。

木質フィラメント?

木質フィラメントは熱積層の3Dプリンターで使われるフィラメントの一種で、基本は通常のフィラメントと変わらないのですが、フィラメントに木粉を混ぜ合わせることで、印刷物を木材で作ったような仕上がりにできるぞ! という代物です。こちらを活用することで通常の印刷物とは一味違った作品を作ることができます。しかし、木粉が含まれている分ノズルが詰まりやすいなどの注意点もあるので普段以上に気をつけて印刷する必要があります。

調べてみると木質フィラメントでも様々な商品が販売されているようです。そんな中でも、私は3Dプリンターと同じFlashForgeさんから販売されているものを選びました。理由としては同販売元なので互換性の安心感があることや、PLA素材と同じように使用できるという点が挙がります。

というのは建前で、以前キャンペーンで「公式サイトから購入者全員にプレゼント」という企画に釣られたというだけですが。

すだれ!

今回設置するすだれは、ローカルトキトキさんの楽天市場店で購入しました。実は別の窓用に以前にも購入したことがあったのですが、シンプルな中でもしっかりおしゃれなデザインが気に入ったので、リピート購入してしまいました。

ちなみに私が購入したのは、こちらの商品のブラックです。商品ページを見たいただけると見えると思いますが、こちらのサイトは1cm単位でのオーダーができますので、ありがたい限りでした。お値段はソコソコして到着まで２週間程度かかりましたが、モノとしてはだいぶいい感じなのでおすすめです！

私のブログらしからぬおしゃっれっぽい写真

つくるよ！

ではいよいよ作っていきます！ はじめに書いたとおり3Dプリンターで印刷するのですが、私の家にフィットした3Dモデルがネットで公開されているわけがないので、まずはモデリングからになります。

Lv.1 のモデリング風景

というわけでモデリングは前回と同じようにFusion360というソフトを使いました。とはいえ私のCAD力はLv.1ですので調べながらやってみました。ただ、スケッチを作って押し出してスケッチを作って押し出してちょっと角を削っただけですので思っていたよりは簡単です。

1つはテスト印刷済み

モデリングができたら次は3Dプリントするための形式に変換していきます。使用したソフトは使うプリンターに合わせてFlashForgeさんの公式ソフトを使います。こちらも初心者ではありますが、並べて設定するだけで大丈夫です。

今回特別に設定した点としては、より頑丈に作りたかったのでフィラメントの充填率を普段の15%から50%に上げてみました。正直充填率がどのくらいでどの程度の耐荷重が得られるかの知見はないのですが、「良さそう」で設定しています。

できた〜〜！

というわけで完成したものがこちらです。そして実際に掛けてみると…

長押にもあってる感じ！

こんな感じです！写真だとちょっと色が浮いている感じですが実際にはもう少し自然に溶け込んでいる感じです。ただ寸法をちゃんと測っていなかったのでもうすこし幅を細くしても良かったですね。まぁ十分使えるので気にせせずでこのまま完成にしちゃいます。

終わりに

今回はすだれを掛けてみましたが、久しぶりに実用的な方向で3Dプリンターが使えて満足しております。ホームセンターに行けばもっといい固定部品を変えたと思いますが、作ってみて面白かったので後悔はしていません。今回はすだれ本体が軽めだったたので3Dプリンターで作れましたが、重いものはおそらく無理そう…ただ3Dプリンターで作れるものは今後もドンドン挑戦していきたいと思います。

]]> https://koneta.click/p/585/feed 0 水式空気清浄機をつくってみました。 https://koneta.click/p/373 https://koneta.click/p/373#respond Mon, 10 Aug 2020 04:30:50 +0000 https://koneta.click/?p=373 何年か前からSNSでとある空気清浄機が話題になっているのはご存知でしょうか？この空気清浄機は単純な仕組みで安価かつ簡単に自作することができ、効果は市販されている空気清浄機と比べても劣らない (むしろこっちの方が効果がある?) なんぞと言われているものです。

そんな世間を賑やかしている気がするのが「水式空気清浄機」です。これは扇風機の風を水面に当てることで、空気中の異物が水に取り込まれ空気はキレイになる…というものらしいです。その仕組は非常に簡単なもので、扇風機と水をためておく容器があれば大丈夫、必要な材料は100円ショップで揃えることができます。

確かに水面についたホコリが再び舞い上がるイメージはありませんが、本当に効果はあるのでしょうか？ これはとても気になるところで、実際に検証していきたいと思います。まずは実際に水式空気清浄機を作成してみようと思います (検証は次回！)。

構造

とても簡単な仕組みなのでわざわざ説明するほどのものではありませんが、一応改めて紹介しておきます。

雑図！

水式空気清浄機は水面に風を叩きつけることで空気中のホコリなどを水に吸着させることで集塵を行うものです。検索してみると水に叩きつけることで、物理的/化学的に不純物を集めてくれるそうです。

本当に効果があるのか調べたいと思いますが、残念ながら私はこの手の分野は疎いのです。せめて同じような製品が無いかを調べてみたところ、工業用の集塵装置でウェットスクラバーというものが見つかりました。こちらも液体にガスを叩きつけている形なので、やろうとしていることはこれにだいぶ近い気がします。ただこちらの会社さんの動作サンプル動画を見てみると、とてつもない勢いで水に叩きつけているようで、どれほど同じような効果が得られるかは未知という感じがしました。これは是非とも調べないとだめですね。

用意したもの

ほとんどだいそー

今回空気清浄機を作成するに当たり用意したものは以下の通りです。今回は工作不要で水の入れ替えを簡単にするという方針で材料を探してみました。

  • USBファン
  • 積み重ねBOX(水を入れておく容器)
  • お皿用ワイヤー棚(ファンを水上に固定する台)
  • 結束バンド

今回、USBファンはAmazonで購入しましたが、それ以外の3つはDAISOさんで購入しました。合計金額はおおよそ1,400円くらいでした。USBファンはDAISOさんでも販売しているため、やろうと思えば1店舗ですべての材料をそろえることもできます。今回はせっかくなので、より沢山風を送ってくれそうなこちらのファンを選んでみました。

他の方の「作ってみた」系の投稿を見てみると網にファンを固定したモノを容器の上に載せるだけの方が多いように見えました。しかし、それらは載せているだけなので、とても倒れやすそうでした。また、今回はファンに水がかかってしまった場合の対策は考慮していないため、なるべく倒れにくいようにワイヤー棚で挟み込むことで固定するようにしてみました (偶然ですがこの組み合わせがなかなか丁度いいサイズ感でお勧めしちゃいます)。

手順

材料の用意ができたらあとは組み合わせるだけなので手順というほどのものはありませんが…一応書きます。まずはワイヤー棚にUSBファンを結束バンドで固定します。この時、固定した結束バンドが下に飛び出していると水入り容器を出し入れ時に引っかかってしまうので、下には出ないように固定します。

回転部分にも気を付けてね

あとはファンを固定した棚に水を入れた容器を挟み込むだけで完成です。

完成！！！

ちょっとだけ使ってみた

簡単にできてしまったので、ついでに1時間ほど動かしてみました。その結果がこちらです。テストした部屋は寝室です。おそらく寝具から出ているホコリが気になっているのでテストにはちょうどいい部屋だと思います。キレイな画像ではないので一応閲覧ご注意を…。

ホコリの塊魂！

画像があまり鮮明ではないため、だいぶ見にくいですが、画像の真ん中上部にホコリの塊ができていました。それ以外にも水面には細かいホコリや糸くずのようなものが漂っていていました。少なくとも空気中のこれらのものは取り込むことができたようです。思っていた以上にホコリが浮いていて正直びっくりはしました。

終わりに

というわけで今回は、水式空気清浄機なるものを作ってみました。SNSでたくさんの人が作っているだけあって、簡単に作ることができました。また試運転では、思っていた以上にホコリを収集してくたので思っていた以上には効果がありそうです。

しかし、目の前の結果1つで「効果がある」とは言い切れません。というわけで次は、今回作成した試作機で「水式空気清浄機」はどのくらい効果があるかを検証していきたいと思います。少なくとも、ファン有り無しでの比較実験、温度、湿度の変化くらいは確認したいですね。ほかの項目は…どうやって確認すればいいんだろう…。というわけで検証方法が未知な段階なので結果が出るまでは時間がかかると思いますが、検証結果は本サイトで報告したいと思います。

]]> https://koneta.click/p/373/feed 0 3DプリンターでSIRENのマナ字架を作ってみた話 https://koneta.click/p/357 https://koneta.click/p/357#respond Sun, 02 Aug 2020 15:00:00 +0000 https://koneta.click/?p=357 SIRENというゲームをご存知ですか？SIRENはPS2で発売されたホラーゲームで「どうあがいても絶望」というキャッチコピーそのままに、ストーリーだけではなく、完全クリアには超絶な理不尽難易度という登場人物にとってもプレイヤーにとっても絶望的なゲームです。しかしSIRENは、そのゲームシステムからストーリー、登場人物などかなりの異色を放つ作品で、その異色感から、多くのファンがいる作品でもあります。かくゆう私もファンの1人を自負しており、普段グッズ集めなど全くしない私でも、設定資料集や缶バッチなどを集めてしまうほどハマってしまいました。

アーカイブ集め！

SIRENのストーリーは8月3日からおおよそ3日間がメインになるのですが、その期間中SNS上では「#異界入り」というお祭り騒ぎが今でも開催されます。このハッシュタグを見ると、いろいろなファンアートやコスプレなどがアップされており、今でも愛されている作品なんだなぁと感じます。

私もこの時期になると「今年も来たなぁ」としみじみ思いを馳せます。できることなら私もファンアートなんぞを作って一緒に盛り上げていきたいなとずっと考えはいるのですが、私には絵を描く能力は備わっていませんし、不器用なので工作なんぞも全くできません。というわけで毎年悶々としていたわけです。そんな私が、今年は3Dプリンターという武器を手に入れました。そうなればやることは1つです。ファンアート…とまではいきませんが、ゲーム内に登場する宗教-眞魚教-のアイコンでゲームパッケージにも描かれている「マナ字架」のキーホルダーを作ってみました！ (本当はもっと別のものも作りたいのですがモデリング能力を考えるとどうあがいても絶望だったので今年はマナ字架を終了条件1とします。)

というわけでこの記事では、マナ字架のモデリングから3Dプリントしてキーホルダーにするまでのアーカイブをまとめてみようと思います。

モデリングまで

作るものが決まったので、まずはプリントするための3Dモデルを作る必要があります。今回作るマナ字架は「生」という字を逆さまにしたものなのですが、ゲーム内で登場するほとんどのマナ字架は村人が手作りしたもので、それぞれ角度や太さが異なります。おそらく「生」の形を持っていれば後は信仰でどうにでもなるということだと思います。というわけで私も信仰心に任せてテキトーに…とはせずにパッケージのマナ字架をトレースして作っていきたいと思います (本当は自分で作ってみたけど不格好にしかならなかったので諦めたというのは秘密)。

書いてみたものの使わなかった設計図

今回モデリングで使用したソフトはFusion360という3DCADソフトです。高性能多機能すぎてほとんど使いこなしていないのですが、今回のためだけにトレースする機能を調べて頑張りました。全く操作方法がチンプンカンプンでしたが、SIRENのクリア難易度と比べると超絶簡単に思えました。

クラウドベースの製品設計用 3D CAD/CAM ソフトウェア | Fusion 360

CAD/CAM ソフトウェアの Fusion 360 を使用すれば、製品の設計・開発プロセス全体を連携させることができます。

一応手順を書いておくと、まずはトレースするための画像を用意してFusion360に読み込み、次にスケッチモードからマナ字架の形に合わせて直線・曲線ツールをなぞっていく、最後に押し出しで厚みを持たせて完成という流れでした。マナ字架が単純な構造ということもあり、慣れている方であれば5分くらいでできる作業だったと思います。今回はキーホルダーに仕上げたかったので、最後にキーホルダー金具を取り付けるための穴を作ってモデリングは完成しました。

作業中撮り忘れてこれは再現です。

印刷からキーホルダーまで

次に印刷の作業ですが、上記で作成したモデルを印刷用の形式に変換してあげる必要があります。私が使用しているプリンターはFlashforgeさんのFinderという商品で、印刷用変換には付属のソフトを使っていきます (購入時の記事はこちら)。変換した後はプリンターにデータを持っていって印刷するだけです。

印刷しました！

印刷できたものがこちらになります。もうこれだけで3Dプリンターを購入してよかったなと実感してしまいます。後はこれにキーホルダー用の金具を取り付けて完成です。

完成！！

実際にマナ字架を作ってみて、意外と簡単だったなというのが素直な感想です。しかしまだまだできる事はたくさんあります。今回はフィラメント(3Dプリンターの素材)の色そのままですし、後処理をしていないため印刷痕が残っている状態です。このままでは完全クリアとは言えないのでもっと力をつけ、来年の異界入りには完璧な形でマナ字架を作ってみたいと思います。

終わりに

このような流れでとうとう私はSIRENファンとして1歩進むことができました。SIRENはとてもいいゲームなのでまだプレイしたことがないという方は是非ともプレイしてみてください！そしてSIRENの沼 (きっと赤いよ) にどっぷり浸かってください。

今回はマナ字架を作りましたがSIRENには他にも作れそうなアイテムがいくつかあるのでそれらも作っていきたいですね。ピュア・ゴールド・王将とか宇里炎とか火かき棒とか。というわけで次回があったらよろしくお願いします！

]]> https://koneta.click/p/357/feed 0 MagicalVoxelで3Dアバターが簡単にできてしまった話 VRMファイル作成まで https://koneta.click/p/267 https://koneta.click/p/267#respond Wed, 24 Jun 2020 15:10:08 +0000 https://koneta.click/?p=267 前回の記事では、MagicaVoxelという無料で簡単にボクセルアートが作れるソフトを紹介しました。今回は作成したモデルを活用するという方針で、MagicaVoxelを使って作成したキャラクターにMixamoで骨を入れて、最終的には汎用性のあるVRＭ形式ファイルを作ってみたいと思います。

MagicalVoxelでキャラクターを作る

さて、まずは今回のメインとなるキャラクターを作らないといけません。しかしこれはMagicalVoxelを使っていれば簡単に「それっぽい」ものが作れます。というわけで今回私が作成したのが以下のようなキャラクターです。

今回の主役！

私でも1,2時間くらいで作れたので、何回かMagicalVoxelでモデリングをしたことがある方であれば、1時間もかからずにこのくらいのキャラクターを作れると思います。とは言え流石に全く方針もない状態では作るのが難しいと思いますので、私が参考にさせてもらったサイトさんを紹介しておきます。

オリジナルアバターを簡単に作りたい人向けチュートリアル　モデリング編

それでははじめていきましょう。 ドット絵感覚で3DCGモデルを作れるMagicaVoxelを使用します。 こんな感じになります。 まずは MagicaVoxel のダウンロードをしてください。…

こちらの解説は、キャラクターのモデリングだけではなく、MagicaVoxel自体の使い方もとても分かりやすくまとまっていて、とても参考になりました。こちらのサイトさんでは、モデリング後にBlenderを用いてボーン入れなどを行っていますが、今回はより簡単な方法でお手軽にやってみようと思います。

キャラクターのモデリングをする際は、Tポーズと呼ばれる形で作成する必要があります。これは上記の画像のように腕を横に伸ばして足は揃えている形です。これは後の作業で重要になってきます。また、モデリングをする際は髪の毛先と体など、分かれていて欲しいところは1ブロック分話しておく必要があります。もしくっついていると、モデルを動かした際に、体に髪の毛がくっついて動いてしまいます。

エクスポートしてMixamoでオートリグ

モデルが完成したら、obj形式でエクスポートします。エクスポートするにはウインドウの右下にあるボタンから形式を選んで保存先を決めるだけです。今回はobj形式で出力したいため、左上のobjと書かれているボタンから保存しました。保存が完了すると、指定したフォルダ内にobj,mtl,pngの3形式で指定した名前のファイルが出力されます。これらは後ほどの手順でしようするためしっかり置いておいてください。

次にMixamoというサービスを使用して作成したモデルに骨を入れていきます。MixamoはAdobeが買収して運営している3Dキャラクターのカスタマイズやアニメーション付けができるWebサービスです。

Mixamo

Upload your custom character to Mixamo and get an automatically rigged full human skeleton, custom fit to your model and ready to animate. Customize your rigging options with optimizations for mobile performance. Motion Captured …

Mixamoにアクセスして、AdobeやGoogleのアカウントでログインします。もし該当のアカウントがなければ無料でする作成することもできます。

ログインするとアニメーションを選択する画面になりますが、それらは無視して画面右にある「UPLOAD CHARACTER」から先ほどエクスポートしたobjファイルを選択します。アップロードが完了するとモデルが灰色の状態になりますが、それは気にせずNEXTを押して進んでください。

次にマーカーをモデルの体に合わせて設置する作業になりますが、ページ内の図の通りに設置するだけで大丈夫です。私の場合は以下のようになりました。

マーカーを置かれた主役

マーカーが置けましたら、ウインドウ下の「Skeleton LOD」から「No Fingers」を選択してNEXTを押します。たったこれだけで、体に合わせた骨をモデルに入れてくれます。便利ですね。

もしエラーが発生した場合は設置したマーカーが体の表面すれすれになっていないか確認してみてください。気持ち中心の方にマーカーを設置することで解決することがありますのでエラーが出る場合は確認してください。

処理が完了すると先ほどのアニメーションを選択する画面に戻ります。ここで左のアニメーション欄から選択することでモデルが動き出します。しばらく動いている様子に感動したのち、「Download」から骨入りモデルをダウンロードします(ダウンロード前に選択したアニメーションを削除するため、「Download」ボタンの3つくらい下にあるアニメーションの設定項目右上のバツボタンを押してください)。ダウンロードする際の「Format」は「FBX for Unity(.fbx)」、「Pose」は「T-Pose」を選択してください。

UnityでVRMファイルに変換

最後にこれまでの手順で作成したファイルを汎用性の高いvrmファイルに変換しておきたいと思います。この作業にはUnityを使用するため、Unityが入っていない場合は個人/小規模であれば無料で使用できるのでインストールしておいてください。

… インストールしておいてくださいと言いつつ、参考にさせてもらったサイトさんで完ぺきな解説がされていたので、ここではリンクの紹介だけさせていただきます。

【Unity】人型アバターのFBXファイルをVRMファイルに変換する

FBXの人型アバターをVRMに変換する流れをご紹介します！

1つだけ注意点ですが、MagicaVoxelで作成したモデルは世間的にはとても小さいです。そのため、上記のサイト内では「モデルのスケール→XYZが全部1.0になっているか」という確認手順がありますが、ここだけ、指示を無視して35倍程度にしておくとちょうどいい大きさで出力してもらえます。

VroidHubに登録してみる

おまけに、VroidHubというプラットフォームに作成したvrmファイルをアップロードすることで、モデルを活用しやすくしておこうと思います。

VRoid Hub

VRoid Hubは、3Dキャラクターのための投稿・共有プラットフォームです。モデルデータをアップロードするだけでキャラクターが活き活きとアニメーションするプロフィールページを作成でき、利用条件と共にモデルデータを配布することもできます。登録した3Dモデルは、VRoid Hubと連携した各種VR/ARプラットフォームや3Dコンテンツ上で利用可能です

上記の手順でvrmファイルまで完成しているためアップロードは簡単です。上記のリンクからサイトにアクセスしていただき、pixivアカウントでログインしてください。ログインができると画面上部に「キャラクターを登録」というボタンが出てきますので、あとは画面の指示通りにファイルをアップロードするだけです。

アップロード完了

というわけでこれで作業完了です！あとはVroidHubに対応したアプリで読み込むだけで使いたい放題です。お疲れさまでした！

ちなみに…vrmファイルを作成する際にそのままの大きさで出力するとこんな感じにアリエッティになります。

借りぐらししてたの…

終わりに

という感じで、今回はMagicaVoxelでモデリングしたキャラクターをVRMファイルへの変換するところまでをやってみました。ちょっと前ではこんな簡単に動くモデルを作成することは難しかったと思いますが、いい時代になりましたね。

さらには使うときも様々なアプリで統一のフォーマットやプラットフォームからのダウンロードに対応していて便利になりました…これからもっと進化していってほしいものです。

]]> https://koneta.click/p/267/feed 0