Web Design Articles

  • 1810

M1MaxでUnityはまだもっさり！？かもしれぬ話

メインPCをAppleシリコン搭載の最新PCであるMacBookPro16に置き換えましたUnityを使ってみた感想です。定量的なレビューじゃなくて、感想です。 比較対象は2021年に組み立てた自作PC(30万円くらい) 比較PC Macスペック CPU: M1Max 10コアCPUGPU: 32コアのGPUメモリ: 最大64GBのユニファイドメモリ価格は50万円ほど。価格なら間違いなくこちらが勝ってる！ 組んだデスクトップPC CPU: 第三世代 Ryzen9 3950 GPU: Radeon RX6700XT メモリ: DDR4 64GBメモリ本体で30万円ほど ディスプレイやキーボードを含めたら40万円ほど。 それでもM1Maxの方が高いです。 Unityスペック UnityのAppleシリコン対応版の最新は、記事作成時点で 2021.2.16f1 結果 問題点 Unity Visual Effect Graph を使おうとすると M1の方はビジュアルエディタがちょっともっさりしてるエフェクトのプレビューがカクついたり安定性や、重い処理はやっぱりデクストップPCの方が快適ですね。本格的にやるときはデスクトップで、技術検証とは軽く作るときはM1Maxで みたいな使い方になりそう 通常の3D作成 [...]

  • 1855

babylon.js ステップ2　いろいろなプリミティブを表示

早速いきますBABYLON.MeshBuilderを使っていろいろ作っていきますThree.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。 球体 // Add and manipulate meshes in the scene var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameterX: 1, diameterY: 0.75, diameterZ: 0.25}, [...]

  • 1857

Three.jsに物理法則を導入できるPhysijs を入れてみたいけど、、

前回の記事で、Three.jsはゲームに使えない的なことを言ってしまったのですが。。 実は、物理法則を簡単にいれる方法があったっぽい。それが、外部ライブラリPhysijsだ！！ 特徴はこうだ！ オブジェクトが重力の影響を受け、お互いに衝突するようになる シーン内の物体の摩擦係数と反発係数を触れる！ Physijs がサポートしているさまざまな形状がある 単純な形状を組み合わせた合成形状もある ハイトフィールドを使用した複雑な形状もできる オブジェクトの動きの制限する点制約、ヒンジ制約、スライダー制約、コーンツイスト制 約、自由度制約 左右の音量がカメラの位置に基づいて決定される音源 何と盛り沢山な！！ いこう と思ったらいろいろメンテされてないらしい qiita.comふむふむ。３年くらいメンテされてないとな、、、Three.jsは結構頻繁にバージョンアップするので、これは厳しいのかなぁ 比較的に新しいのはOimo.js(お芋ドットジェイエス)。お芋かぁ... とりあえず、次回！

Arduinoで映像を超絶劣化させるマシンを作った話 | さいぞうのArduino初心者日記7

ごぶさたしております。 さいぞうです。 　 　 　 前回更新は昨年のクリスマス。 hollywis.hatenablog.com 面倒くさくて最近更新してませんでしたが、気づいたら年があけていました。今年もよろしくお願いします。 　 　 　 次のチュートリアルはLEDを複数つなげるというだけの回で、つまらないのでやる気がでなかったのですが、 簡単にできるネタを思いついたので書きます。 　　　 　　　 　 　　 　　 Arduinoで映像を超絶劣化させるマシン この動画がArduinoで映像を超絶劣化させるマシンを動かしたところです。 www.youtube.com 　 　 　 こういうことです。 つまり、Macのカメラに写った映像を赤緑青に分解し、比率をみて多かった色のLEDを光らせます。 ただし、青色LEDはキットに入ってなかったので、青が多い時は白LEDを光らせます。 　 　 　 一応、映像を左右に分けて、それぞれのエリアごとに色を判定することにしました。 　 　 　 PCのディスプレイでも、LEDでも、幾つかの光の点を集めてで画像を表しているという点では同じです。 私の使っているmacbook pro 15inchのカメラは720pらしいので、92万1600の画素で映像を表しています。 それを3色ずつのLED2組、つまり2画素で表すので、46万800分の1に劣化させています！ 　　 　　 　　 　　 　　 　　 […]

nodeでクエリストリングを取得する

nodeもう少し進めてみます。 今回はhttpのgetリクエストにあるクエリを取得してみたいと思います。 クエリストリングというのは、次のようなURLにあるidやarticleのことです。 http://hollywis.com?id=1&type=article この例では次のデータが格納されています。 id:1 type:article やってみる var http = require('http'); var PORT = 8080; var url = require('url') var pages = [ {id:'1' ,route:'',output:'HelloWorld!\n'}, {id:'2' ,route:'foo',output:'fooのページです\n'}, {id:'3' ,route:'var',output:'varのページです\n'}, {id:'4' ,route:'another page',output: function(){ return 'これが'+this.route+'ページです\n'}} ]; http.createServer(function (request,response){ var id = url.parse(decodeURI(request.url),true).query.id; if(id){ pages.forEach(function(page){ if(id === page.id){ response.writeHead(200,{'Content-Type':'text/html'}); response.end(typeof [...]

Airbnbで外国人と話がしたいので英語を勉強します

こんにちは、のすけです。 全然技術ネタじゃないんですけど。 最近Airbnbのホストをかなりやられている方にお会いして、Airbnbで結構面白い外国人が来るという話を聞きました。 なんでも、ある程度高額な部屋には日本にビジネスをしにくる外国人が多く宿泊することが多く。 なかなか面白い話が聞けるとのこと。 「例：僕はTEDで話すために日本に来たんだよ！」 それを聞いて、「俺も話ししたい！」と思ってしまいました。 しかし、、、僕は英語はできません。そしてAirbnbのホストもしていません。 まぁAirbnbのホストはお金とやる気で解決する話なので問題ないですが、英語力はそうはいきません。 そんなわけで、英語を勉強することにします。 DMM英会話とかやろうかと思っていましたが、もっと鍛えてからやらないと洗礼で挫折するとか言われているので、まずは英語の勉強から入ります。 確かに大学の時にはブラジル人と英会話してましたが、結局まともに喋れるようにならなかったので、いきなり英会話するより２ヶ月くらい座学した方が良いと考えました。 まずは、うちの本棚に眠ってた↓をやります。 英語を話す力が一気に身につく!! 瞬間英作文ドリル (AC MOOK)作者: 森沢洋介出版社/メーカー: アスコム発売日: 2008/11/14メディア: ムック購入: 1人 クリック: 19回この商品を含むブログ (3件) を見る これは、英語の文章を反射的に作る訓練をするもので、中学英語だけで話したいことが話せるようになるというやつです。 なんで眠らせてたかというと、ちょっとやってみて効果が出たのですが、他の事が忙しく放置しそのままになっていたためです。何度も本棚整理でいらない本を捨ててきましたが、この英語本だけはとってありました。 瞬間英作文と言います。あらためてネットで調べてみたら、とにかくこの本を10周やるだけでも違うらしいので10周を当面の目標にしましょう。 さて、英語がスラスラと言えるようになるのか。。。 ちなみに瞬間英作文だとこの本の方が売れているみたい。 どんどん話すための瞬間英作文トレーニング (CD BOOK)作者: 森沢洋介出版社/メーカー: ベレ出版発売日: 2006/10/25メディア: 単行本購入: 80人 クリック: 383回この商品を含むブログ (173件) を見る でも、せっかく眠らせていたのでドリルの方で頑張ってみます。

実は簡単だった。nodeを使ってみる

こんにちは、のすけです。 JavaScriptでサーバサイドとか面倒そう！ということで今まで敬遠していたのですが 実は手軽に利用出来るようです。 面倒そうと考えた理由としては、JavaScriptはクライアントサイドが普通ですので、何でわざわざJavascriptでサーバサイドまで作らにゃいけないのさ！ もっとWebで使いやすい専用言語とかFrameworkとかあるじゃん！ と思っていたのですが、、、書籍をサラッと見た感じだと、どうやらシンプルなHTTP通信ならnodeいいんじゃね？ という認識に変わりました。 僕はサーバサイドは今までサーブレッット(Java)や.NetFramework(C#)、Rails(Ruby)を使ってきました。 最近はWebでのライブラリの豊富さからRailsばかり触っていましたが、ついにNodeを使ってみることにしました。 なお下記の書籍を購入してしまったので、これを参考に実装しながら学習していこうかと思います。 Nodeクックブック作者: David Mark Clements,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/02/23メディア: 大型本購入: 2人 クリック: 4回この商品を含むブログ (5件) を見る Nodeの特徴 NodeはどうやらWebサーバとアプリケーションサーバが分離していないようです。 また、Webサーバ機能はプログラミングで作ってしまうことができるため、極めて手軽にWebを始めることができるとのこと。 プログラミング言語はJavaScriptです。 クライアントサイドのプログラミング言語として最近は使われまくっているので、言語の敷居は低いですね。 パッケージ管理システムとしてRailsでしたらbundlerがありますが、Nodeではnpmというものがあるようです。安心ですね。 また、個々のリクエストは非同期で処理されI/Oをブロックしません。そのため、多くの同時接続を処理することができます。 シングルスレッドであるため、リクエスト毎にプロセスを生成＆メモリ割当をするということもないようです。 実はNodeを使おうとした理由としてチャットシステムを作ろうとしたというのがあります。 従来のサーバサイドプログラムと比較して、同時接続という部分では一番パフォーマンスが良いのではないかと勝手に期待しています。 環境 Macにあらかじめ入れていたNodeを利用していきます。いつ入れたんだろう？ $ node -v v5.0.0 $ npm -v 3.3.9 $node -p process.versions.v8 4.6.85.28 nodeを起動 有名なFrameworkとしてexpress.jsというのがあるようですが、Nodeを基本から理解するためフレームワークなしでnodeに触れてみたいと思います。 どうやらNodeではかなりシンプルにWeb機能が実装できるようですので。 server.jsというファイルを作る [...]

クリスマスソングにあわせてLEDを光らせる話 | さいぞうのArduino初心者日記6

こんばんは。 さいぞうです。 この記事は、Arduino入門連載の6回目。 前回は、LEDを使ってモールス信号練習機を作った。 本来のチュートリアルからはかなり脱線してきたが、まあ面白かった。 hollywis.hatenablog.com 今回も脱線して、クリスマスなので、Soundcloudからクリスマスソングを取得し再生してそれに合わせてLEDをチカらせてみようと思う。 要はArduinoで簡単なオーディオビジュアライザを作る。 　 　 […]

SORACOM Air の契約の仕方

こんにちは、のすけです。 IoTの通信として最適なSIMであるSORACOM Air と契約しました。 手順などをご紹介。 SORACOM Air とは 小容量通信の常時接続に最適な契約ができるのがSORACOM Airです。 通常のサービスが100Mbpsで月額1GBの通信っで1000円のような感じですが SORACOM Airは, 基本料金は1日 10 円、データ通信量は 1MB あたり 0.2 円からの従量課金になります。 つまり月額(31日計算)310円から利用できるものになります。 従量課金の価格表はこちら IoTなら安い・・・と思う。 もうお判りかもしれませんが、スマホなどに刺して普通に使うなら遅いし高いです。 しかし、IoTなら状況は違ってきます。 IoTで利用する通信は、文字データが中心ですので転送サイズは多くても数キロバイトと、たかが知れています。 そのため、低速で少容量でも十分実用的だと考えられます。 コンソールから設定を変えられる! なんと、SORACOM Airはコンソールから通信設定を変えることができます。 利用が多い時は即座に上のプランに移行できるというのです。 たぶん便利なのでしょう。まだ使ってないのでわかりませんが。 まずはアカウントを作成 メールアドレスとパスワードを入れます。 メールでアクティベイト用URLがきますのでクリックすると作成完了です。 SIMを登録する ログインすると、SIMを登録してほしいと言われます。 クリックするとクレジットカードも登録してください。と言われるので登録します。 SIMはあらかじめAmazonで購入しておきました。888円です。 なお、コンソールから買うこともできますが10枚単位です。(1枚300円) SORACOM Air SIMカード（データ通信のみ） (ナノ)出版社/メーカー: 株式会社ソラコムメディア: エレクトロニクスこの商品を含むブログを見る SIM登録にはIMSIとパスコードを登録するようです。 SIM の台紙の裏面に貼ってあるので、それを入力して登録します。名前、グループは空欄のままでもOKです。 登録後、速度クラスを変更します。初期状態では「s1.standard」になっています。 [...]

Nuxt.js環境でGSAPプラグインを登録する方法

Nuxt.jsにてGSAPのプラグインを使おうとする場合Docs - GreenSock このページの通りにやってもUnexpected token {とか色々出て動きません。 色々調べた結果、このようにgsap/dist/のパス指定してあげると動きます！ import { gsap } from "gsap"; import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin);参考： Problem with Razzle and GSAP - GSAP - GreenSock

Nuxt.js のエラー 「Failed to execute 'appendChild' on 'Node': This node type does not support this method」

nuxt-linkで遷移した場合には問題ないのですが リロードやURLを直接叩いた場合に以下のようなエラーが発生します DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。 特にv-ifを利用するとほぼ発生するように思います その場合、v-ifの前後や、場合によってはコード全てを <client-only></client-only>で囲えば発生しなくなります ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますのでその辺りはご注意ください 参考：【Vuetify】NuxtのSSRでVuetifyのDatePickerを使用したら「The client-side rendered virtual DOM tree is not matching server-rendered content. 」というエラー発生 - Qiita

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.