voxel.henteko07.com で使っている技術

今回は週1回月曜日に更新している自作の3Dモデルを公開するサイトである https://voxel.henteko07.com で使用している技術について自分のメモも兼ねてまとめてみる

f:id:henteko07:20180904204804p:plain

現在の技術

https://voxel.henteko07.com は1度リニューアルを行っており、最初のverとは構成が変わっている

現在は以下の構成で作成されている

また全てのビューは静的に置かれたjsonファイルを起点として、Reactによって生成されている
jsonファイルを書き換えることで、サイトの内容を更新するようにしている
https://voxel.henteko07.com/voxels.json

このjsonファイルはiOSアプリ(まだ公開してはいないが、個人的にずっと使用している)の方でもAPIとして使っている

f:id:henteko07:20180904204911p:plain

こうすることで、jsonファイルを書き換えるだけでWebとiOSどちらもコンテンツを更新できるようにしている

jsonファイルの更新方法

起点となっているjsonファイルの更新もある程度自動化を行っている
具体的には、以下のことを行うRubyスクリプトを作成し、npmのscriptsによってそれを起動している
Rubyを使っている理由はJavascriptよりも書き慣れているからなのでそこまで深い理由はない

  • 画像のCloudinaryへのUpload
    • 標準入力から画像のlocal pathを取得
  • CloudinaryへのUploadで得られたidをjsonファイルに追加
  • VoxelのTwitter, Instagram, Youtubeのurlをjsonファイルに追加
    • 各々標準入力より取得
{
   "name": "voxel",
   "version": "0.1.0",
   ...
   "scripts": {
     "add": "bundle exec ruby ./add_voxel.rb",
     "deploy": "npm run build && firebase deploy"
   }
 }

これによって、毎週月曜日はnpm run addnpm run deployを実行するだけで画像が追加されてFirebaseにデプロイされ公開される

本当はこのデプロイ処理自体もGoogle Cloud Buildで行いたいが、この環境をDocker移行しようとしたが一度失敗したので保留中である

運用のお金の話

現在のところかかっているお金は0円
独自ドメインでこれだけやってて0円っていい時代
Cloudinaryも今の所お金がかかるところまで使っていないので0円

ちょっと昔だったら500円のさくらのVPS借りて運用していたと思う

今後の方針

このサイトはまだまだ改善の余地があるので頻繁に更新していきたい
直近ではGoogle Cloud Buildでデプロイを完全自動化したいので、早めにDocker移行させたい

またGoogle Cloud Buildで自動化できたらソースコードGitHubに公開してもいいかもしれない(環境変数が切り出せるので安心という意味)

また、ReactからVueに移行を考えているので、それもやりたい
Vueを使ったことがないので試してみたい

iOSDC Japan 2018に参加してきた

先週末から日曜日までiOSDC Japan 2018にスピーカーとして参加してきました

自分の発表は以下

iOSでSwitchの複数ディスプレイ配置調整を実装してみた by へんてこ | プロポーザル | iOSDC Japan 2018 - fortee.jp

自分の発表の感想

結構聞きにきてくれた人がおり、すごく嬉しかった
発表後も面白かったですと感想を頂けて、やはり発表するのはいいなと改めて感じた

また、発表後のAsk the speakerに来てくれた人が、なんと発表内容と同じようなことを大学時代に研究しており、学会にて論文も発表していて驚いた
発表したらそれに伴って情報も自分のところに来て、世界はこのように回っているのだなと感じることができた

ちなみに発表資料は諸般の都合により公開する予定はないです

その他聞いたセッションの中で感想があるもの

macOSでもっとアプリを作ろう

macOSでもっとアプリを作ろう by malt03 | プロポーザル | iOSDC Japan 2018 - fortee.jp

macOSのネイティブアプリの情報が聞けてよかった

本当にmacOSのネイティブアプリ実装は情報がないのでありがたかった
またmacOSアプリを作ってみたいと思えた

海外展開を目指すアプリでセキュアで速い画像と動画の閲覧を実現した話

海外展開を目指すアプリでセキュアで速い画像と動画の閲覧を実現した話 by 酒井篤 | プロポーザル | iOSDC Japan 2018 - fortee.jp

AWSの構成図など出て来て単純にインフラをやる立場として楽しかった

物理的に離れた地への高速アクセスはやはりそれなりにキャッシュ戦略を持たないと難しい

とある端末の触覚技術 -フィードバック-

とある端末の触覚技術 -フィードバック- by cokaholic | プロポーザル | iOSDC Japan 2018 - fortee.jp

Taptic Engineは自分で触ったことなかったのでよかった

改めて他のアプリを見ると、意外なところでTaptic Engineを使っているので、そういったことに気づかせてくれた

Depth in Depth

Depth in Depth by 堤 修一 | プロポーザル | iOSDC Japan 2018 - fortee.jp

背景を瞬時に抜けるアプリ作ってみたくなった

iOS12からの精度がかなり高くなってるみたいで、この機能は画像加工アプリに絶対入ると思う

NoSQLの歴史にみる、Cloud Firestoreとの正しい付き合い方

NoSQLの歴史にみる、Cloud Firestoreとの正しい付き合い方 by Naomichi Okada | プロポーザル | iOSDC Japan 2018 - fortee.jp

最後まで聞きたい発表だった…

Cloud Firestoreと正しく付き合いたい

バイス・OSバージョンの依存が少なく、メンテナンスしやすいビューを作る

デバイス・OSバージョンの依存が少なく、メンテナンスしやすいビューを作る by Kishikawa Katsumi | プロポーザル | iOSDC Japan 2018 - fortee.jp

個人的にわかりみNo. 1な発表だった

全ての主張において自分と同じだったので安心した

AutoLayoutのコードは見辛すぎる

iOS アプリの開発速度を70%高速化したデバッグノウハウ

iOS アプリの開発速度を70%高速化したデバッグノウハウ by Kuniwak | プロポーザル | iOSDC Japan 2018 - fortee.jp

テストの導入に関しては常にテストに対して何を期待するかを考えたい
下手に導入するとそれが足かせになる場合もあるから

テストによって何を保証するかってその時のプロジェクトの状況によっても違って来そうだ

全体の感想

iOSDC Japan 2018は会場のインターネットがほぼ快適でよかった
欲を言うと、電源スペースはもっとあって欲しかった

運営のみなさん、スピーカーのみなさん、参加者のみなさん、お疲れ様でした
また来年も参加したいです

udemyで講座を購入してみた

先週の土曜日からudemyのmayaの講座を購入して受けてみてる
購入したのは以下の講座

www.udemy.com

全編通して英語での説明だけど、動画なのでマウスの動きや、自動で付く英語字幕を見て何とか理解できた
そして出来たのが以下のモデル

部屋だけだと寂しかったので、MagicaVoxelで作成した男の子と女の子のモデルにも登場してもらった

そろそろこの男の子と女の子にも名前付けたい

今はudemyで以下の講座を購入して受けてる

www.udemy.com

先ほどの講座で、ローポリゴンだけどとりあえず物が作れるようになったので、次はキャラクターを作ってみている
まだキャラクターの下絵を描いただけの状態だけど、自分なりに頑張って描いてみた

最近告知とか宣伝系以外のことでブログを書かなくなってしまったので、これからはちょっとずつこういう感じのブログ書いていきたい

「まるごとわかる3Dドットモデリング入門」が発売開始されました!

MagicaVoxel本こと「まるごとわかる3Dドットモデリング入門」が本日7/24より発売開始されました!

Amazonだけでなく、本屋さんにも並んでいますのでぜひお近くの本屋さんでもお買い求めください!
また各種サイトにて電子版も同時発売です。そちらも合わせてよろしくお願いします。

gihyo.jp

f:id:henteko07:20180705073824j:plain:w300

どんな本?

本書は3D"ドット"モデリングの入門書です。
具体的には「MagicaVoxel」という無料の3Dドットモデリングソフトを使って簡単な3Dモデルを作成していき、最終的にはUnityで簡単なゲーム開発をするまでをカバーしています。

ephtracy.github.io

実際に以下のような3Dドットモデルを本書では作成することができます。

f:id:henteko07:20180705162034p:plain

ゲーム素材が用意できないエンジニアに読んでもらいたい!

本書は3Dモデリングを行うことが初めて、もしくは過去にやったことはあるが挫折してしまった人に向けた本です。
3Dのゲームを作りたいが素材となる3Dモデルを作るのに躊躇している人に、少しでも「もしかしたらこれなら自分でもできるかも?」と思ってもらえたらすごい嬉しいです。

そしてその結果面白いゲームが世の中に溢れたら僕が幸せになれますのでよろしくお願いします!

3Dモデルの活用範囲はとても広い

3Dモデルが自分で作れるようになると、そのスキルはとても便利になります。

MgicaVoxelでは主要モデルファイル形式としてエクスポートすることに対応していますので、ゲーム以外にも様々な用途に使うことができます。

例えばiOSAndroidアプリの開発者の場合、ARKitやARCoreで自作モデルを表示することができます。
また去年くらいから流行り始めているVRChatなどでオリジナルアバターとして使うこともできます。
更に3Dプリンターなどで印刷すれば、オリジナルフィギュアだって作れてしまいます。(本書ではおまけの章でDMM.makeによる3Dプリントをする方法も書いてあります)

このようにエンジニア自身が3Dモデルを作れるだけでやれることの範囲がグッと広がります。
みなさんにも是非、本書を読んで自分の出来ることが増える喜びを感じてほしいです。

おわりに

本日発売の「まるごとわかる3Dドットモデリング入門」のご紹介でした。
少しでも面白そうだなと思ったら是非お手に取ってみてください!

3Dドットモデリング本が新宿や池袋、秋葉原で先行販売してます!

こんにちは!暑くて死にそうなへんてこです。

先日お知らせして来週7/24に発売する「まるごとわかる3Dドットモデリング入門 ~MagicaVoxelでつくる! Unityで動かす!~」が現在、新宿紀伊国屋書店、池袋ジュンク堂秋葉原書泉ブックタワーにて先行販売が行われています!

いち早く本が手に入るチャンスですので、気になる方で近くにこれらの店舗がある方は是非手に取って見てみてください!

献本が届きました!

先行販売と同時に、著者である僕の元にも献本が届きました!

f:id:henteko07:20180721004936j:plain

記念に表紙にいる、ひよこにわとりのフィギュアとも撮ってみました。

f:id:henteko07:20180721005023j:plain

ちなみにこのフィギュアの作り方も本の中に書いてありますので気になる方は是非読んでください!

Amazonの新着ランキングで1位になりました!

皆様のおかげで、Amazonのゲームプログラミングカテゴリの新着ランキングで1位を取ることができました!ありがとうございます!

f:id:henteko07:20180721005712p:plain

引き続きAmazonでは予約受付中です!

それでは先行販売中の「まるごとわかる3Dドットモデリング入門 ~MagicaVoxelでつくる! Unityで動かす!~」をよろしくお願いします!

「まるごとわかる3Dドットモデリング入門」という本を出版します

本を書きました!

f:id:henteko07:20180705073824j:plain:w300

こんにちは、ボクセル大好きっ子のへんてこです。
この度「まるごとわかる3Dドットモデリング入門 ~MagicaVoxelでつくる! Unityで動かす!~」という本を書かせていただきました。

gihyo.jp

どんな本?

本書は3D"ドット"モデリングの入門書です。
具体的には「MagicaVoxel」という無料の3Dドットモデリングソフトを使って簡単な3Dモデルを作成していき、最終的にはUnityで簡単なゲーム開発をするまでをカバーしています。

ephtracy.github.io

本書は特に、3Dモデリングを行うことが初めてもしくは過去にやったことはあるが挫折してしまった人向けに書きました。
これは僕もそうなのですが、「自作ゲームを開発してみたいがキャラクターなどの3Dモデルを用意するのがとても大変で挫折してしまった…」という経験をしたことがある方は多いのではないでしょうか?

3Dモデルの作り方を書いている書籍などを買ってみたはいいものの、本に載っている物を作るのも精一杯、もしくは本自体を完遂できなくて積んでしまうという経験は多くの方があると思います。
というのも、そういった書籍の大体は絵を描くことが出来るなどの基礎部分がある人を前提に書かれていることが多いと僕は感じました。

そこで本書では、初心者の人でもとっつき易く途中で挫折しづらい3Dドットモデリングを題材にし、誰でも見たままを真似るだけで簡単に3Dモデルを作れるようになるというゴールを目指しました。

3Dドットモデリングとは?

3DドットモデリングとはレゴやMinecraftなどのように箱を積み上げていき3Dモデルを作っていくことです。
一般的かどうかは分かりませんが、ボクセルモデリングとも呼ばれています。

最近ですとSwitch/iOS/Android向けにリリースされたポケモンエストというゲームがボクセル調のキャラクターデザインで話題になりました。

www.pokemon.co.jp

本書を読めばこのようなカクカクしたキャラクターなどを作成することができるようになります。

このような3Dドットモデルを作成します

本書では以下のようなモデルを作成していきます。 また全部のモデルサンプルファイルが付属しているので、手元でじっくり確認することもできます。

f:id:henteko07:20180705162034p:plain

ゲーム素材が用意できないエンジニアに絶対読んでもらいたい!

冒頭でも触れましたが、本書は3Dモデリングを行うことが初めて、もしくは過去にやったことはあるが挫折してしまった人に向けた本です。
3Dのゲームを作りたいが素材となる3Dモデルを作るのに躊躇している人に、少しでも「もしかしたらこれなら自分でもできるかも?」と思ってもらえたらすごい嬉しいです。

そしてその結果面白いゲームが世の中に溢れたら僕が幸せになれますのでよろしくお願いします!

3Dモデルの活用範囲はとても広い

更に3Dモデルが自分で作れるようになると、そのスキルはとても便利になります。

MgicaVoxelでは主要モデルファイル形式としてエクスポートすることに対応していますので、ゲーム以外にも様々な用途に使うことができます。

例えばiOSAndroidアプリの開発者の場合、ARKitやARCoreで自作モデルを表示することができます。
また去年くらいから流行り始めているVRChatなどでオリジナルアバターとして使うこともできます。
更に3Dプリンターなどで印刷すれば、オリジナルフィギュアだって作れてしまいます。(本書ではおまけの章でDMM.makeによる3Dプリントをする方法も書いてあります)

このようにエンジニア自身が3Dモデルを作れるだけでやれることの範囲がグッと広がります。
みなさんにも是非、本書を読んで自分の出来ることが増える喜びを感じてほしいです。

フルカラー256ページ!

本書は全篇フルカラーで構成されており、MgicaVoxelの使い方から3Dモデルの作成方法、作成したモデルをUnityにインポートしてアニメーションさせる方法を1から丁寧に解説しています。

また最後の章にC#のコードが少し出てくるのですが、編集さんに無理を言ってコードハイライトとGitHubライクなdiff表示を行ってもらいました!
これによってソースコードも普段GitHubで見ているような感覚で読むことができ見やすいかと思います。

Amazonにて予約受付中!

発売日は7/24ですが既にAmazonにて予約受付中です!

少しでも面白そうだなと思ったら是非お手に取ってみてください!

おわりに

実はこの本の元となる本(同人誌)が存在していまして、去年開催された技術書典2にて頒布した「3Dドットで遊ぼう!〜はじめてのモデリング編〜」です。

henteko07.hatenablog.com

本書はこの同人誌を技術評論社に持ち込んで出版させてくれとお願いした結果、企画が立ち上がった本です。
この同人誌のテーマも「3Dモデルが作れないエンジニアに向けて」だったので、商業になっても大元のテーマはブレずに出版することができて嬉しいです。

それでは「まるごとわかる3Dドットモデリング入門 ~MagicaVoxelでつくる! Unityで動かす!~」を何卒よろしくお願いします。

#技術書典 サークル参加の感想など

技術書典4にサークル参加して来た感想などを雑に列挙していきます

サークル参加して来たよってのは以下の記事に書いたのでそちらも見てください henteko07.hatenablog.com

本執筆の感想

  • 今回の本のリポジトリが出来たのが2/5だった
    • f:id:henteko07:20180424204838p:plain
    • そこから大体全体が完成したのが3月末くらい
    • 印刷所に入稿したのが4/4らへん
    • 実質2ヶ月の期間今回の本を作成していた
  • 今回は新メンバーである @kuniwak を含めた5人で執筆予定だった
    • 2名が原稿締め切り近辺で原稿が落ちるということだったので急遽3名での執筆になった
    • 結果今回の3名の著者全員同じ大学出身という面白い感じになった
      • これは本当に最後の最後気づいた
      • なので実質電気通信大学合同技術同人誌と言っても良さそう(良くはなさそう)
  • @kuniwak の書く内容がキャッチーな感じでウケが良さそうなので単著として出す案があった
    • しかし複数本出してしまうと原稿管理や表紙などのコストが単純に2倍になるのでとりあえず一緒の本に押し込めることになった
    • @henteko07 の商業出版の原稿締め切りと被っていたなどのスケジュール厳しい要因もある
    • 次はまた別の新メンバーも入れる予定なので、次こそは複数新刊にチャレンジしたい
  • 今回作成した表紙などは完全に前回の冬コミなどと同じフォーマットで作成できたのでコスト削減ができた
    • 楽だったが、あまりにも表紙が似ており技術書典4当日にブースで見本誌を既刊と新刊で並べていたらどっちがどっちか分からなくなってしまっていたのでこれは要改善
    • お品書きやダウンロードカードについても完全に流用できて楽だった
      • ダウンロードカードに関してはこれで必要十分なので今後もこれでいきたい
  • 前回できなかった本の背表紙に文字を入れることができてよかった
    • これは本当に満足度が高い
    • 厚い同人誌を作る人は絶対に背表紙に文字を入れたほうがいいです、おすすめです
  • 今回も前回、前々回同様に本の印刷具合が最高だった
    • ポプルスさんありがとうございます
    • もし味噌煮研究所が出している同人誌と同じ感じで印刷したい場合は、以下の構成で発注すると同じ感じになります
      • 印刷所: ポプルス
      • 紙の質: 白上質90k
      • 表紙加工: マットPP

事前の宣伝についての感想

  • 今回も前回同様Twitterの広告を使って宣伝をしてみた
    • 合計2ツイートを宣伝に流した
    • どちらもほぼ同じだけファボとRTがついた
      • インプレッションはGitの方が約23000、D言語の方が約16000になった
      • 拡散力に乏しいようなアカウントには有用な気がした
    • 全部で16000円ほどお金をかけた
      • 費用対効果のほどは正直正確には分からない
        • @kuniwak や他のメンバーも同様に宣伝活動をしてるため計測が不可能に近い
    • チェック数は最終的に174になって、実売の188と似た感じになった
      • 推移はこんな感じ
      • f:id:henteko07:20180424212005p:plain

サークル参加に関しての感想

  • とにかく物理本が完売してよかった
    • 初めて100部も印刷して怖かった
    • ダウンボール2個も来ていて震えた
    • これ全部本当に捌けるのか…持って帰るのダルすぎる…ってなったけど本当に完売してよかった
  • 初めて壁サークルというものを体験した
    • 体験したが技術書典の壁サークルはコミケのそれとは違うというのもわかった
    • 特に壁サークルだからという利点は感じない
    • 壁際よりも、トイレ側の後ろにスペースがあるようなサークル配置の方がスペースに余裕がありうらやましかった
    • 全体的にスペースが狭めだったため窮屈だった
  • 16時の時点でまだ人が多くて驚いた
    • 全然空く気配がなかった
    • コミケならもう人がまばらになっているのに…なんでこんなに人が多いんだ…と思った
    • 6000人来たならしょうがなさそう
    • 運営さんお疲れ様でした
    • 次も少しでも会場や運営費の足しになるようにサークル参加費は多めに払いたい

全体

  • やはり参加してよかった
  • 次も新メンバーを加えてもっと新しいことをしていきたい