作者別: fujimoto

ギターを買ってPCと接続してみました。オーディオインターフェイスのすすめ


こんにちは。最近、中古の安っすいギターを購入したLQヒロシです。

20代の頃は少しギターをかじっていた私。

諸事情により愛機を手放して以来全く楽器を手にすることはなかったのですが、GWにゲームで知り合ったフレさんとオフ会をして、お酒の席でアツい音楽談義をしたら無性にギターを触りたくなって衝動買いをしてしまいましたwwww

購入したのはこちらのエピフォン Dotというセミアコースティックギターです。
安物なのにこの美しさwwww家にいるといつも眺めております(^o^)

新品なら販売価格4万7000円ぐらいのものが2万7000円で売っていました。

セミアコースティックギターなのでアンプがなくてもそれなりに音はでるのですが、やはり音を歪ませて爆音でザクザクギュンギュン言わせたくなるのが人情?

私がギターを弾いていた当時は、アンプを買ったりエフェクターを買ったりと音を出すまでにコストがかかったものです。しかし最近は、聞くところによると、それがなんとPCでアンプをシュミレートできるというではありませんか!!!


文明の利器よ! PCの発展よ!! ITの力よ、ありがとう(`;ω;´)


というわけで早速購入したギターとPCをつなげる憎いやつがこちら。

Steinberg(スタインバーグ) UR22mkII

オーディオインターフェイスといものらしいです。オーディオインターフェイスとはなんぞや?

オーディオインタフェイスとは、パソコンでオーディオを高音質で再生したり、楽器の録音やコンデンサーマイクの接続に必要となる機器です。パソコンにはオーディオインターフェイスを接続しなくても、もともとオーディオを再生・録音する機能は付いています。しかし、このもともと備わる「オンボード」とも呼ばれるオーディオ機能は、DTMで使用していく上では低品質過ぎるのです。そこで、DTMをパソコンで行っていく上で遅かれ早かれ必要となるのがオーディオインターフェイスです。

オーディオインターフェイスとは?使い方や活用シーンを解説!|moovoo(ムーブー)


とのこと。

こいつが1台あればアンプやエフェクターをシュミレートしながら録音ができたり、ループバックという機能でシュミレートした音をスピーカーから変換して出力することができるのです!!ライブ活動を予定してるわけでもなく、ただ家でシコシコ音を出して遊びたい私にはこれぐらいで十分なのですね。

若干、接続の方法に手間取ったので、現在のPC接続環境を図にしてみましたので、もしどこかにスタインバーグの接続でお困りの方の一助になれば幸いです。

ギターとスタインバーグの接続は通常のシールドで問題なく利用できます

スタインバーグで音をシュミレートするにはDAW(音楽制作)ソフトが必要になりますが、製品を購入するとCUBASE AIという簡易版のライセンスが一緒についてくるのでご心配なく。スタインバーグは2005年にヤマハの子会社になったので、そのあたりでも安心できそうな気がします。

動画を見たらサクッと設定できちゃいます

ソフトの設定がある程度必要ですがそれさえ完了すれば、ソフトを起動してギターをスタインバーグにぶっ刺し、PCの音声主力ラインを切り替えるだけでシュミレートしたギターの音がでます。ゲームなどをしたいときは通常のライン出力に切り替えるだけでおk

やっぱり歪んだギターの音はたまんないぜ(´﹃`)

っということで、最近はゲームしながらゲームのBGMをギターでギュンギュン言わせながらコピーしたりと最強のPC環境を堪能しておりますw

アマゾンなどでお求めやすい値段でお買い求めいただけますよ(^o^)
Steinberg スタインバーグ 2×2 USB2.0 24bit/192kHz オーディオインターフェース UR22mkII


ゲーム界隈とかが映像表現の最先端かもしれないと思う件


最近のプライベートはゲーム三昧なLQヒロシです。


eスポーツが2022年のアジアオリンピックに採用されることが発表された話題も記憶に新しいゲーム業界。私事になりますが、先日、オンラインゲーム FINAL FANTASY 14のファンフェスティバルに参加してきました。

幕張メッセで2日間行われた大規模イベントには1万5000ものユーザーが参加。イベント内では「光のお父さん」という FINAL FANTASY 14のユーザーを題材にした物語の実写映画化が発表され、有名な俳優さんを壇上で拝見することができ幸せな時間を過ごさせていただきました。

そういった話題性だけでなく、最近のゲームはクオリティの進歩が著しく、映像表現といえば映画やインタラクティブアートなどが評価の対象となっているイメージですが、なんでゲームが注目を浴びないのかが不思議になります。本記事では私的注目のゲーム界隈にまつわるお話をさせていただきます。

まるでフライトシュミレーターのようなプレイ体験


2019年2月にエースコンバットという現実の戦闘機が活躍するシューティングゲームシリーズの最新作がリリースされました。お試し版をダウンロードして会社のPSVRでプレイ!

本作は実際に戦闘機に乗っているのでは?フライトシュミレーターなんじゃない!!?と思うぐらいのクオリティで、Vertigoという天地がわからなくなる現実さながらの現象を体験することができたりします。(実際にプレイしてVertigoになり墜落しましたw)

参照)エースコンバット7
©BANDAI NAMCO Entertainment Inc.


航空自衛隊でフライト経験がある方もブログ記事で絶賛しており、「リアルすぎて(仕事みたいで)面白くない」というブラックジョークな評価をしております。詳しくはこちら

『エースコンバット7』はもはや面白くないフライトゲームへと成り果てた|MY GAME LIFE


3DCGのクオリティの高さをこれでもかと見せつけられる


2018年の作品ではありますが、GOD OF WARという北欧神話を元にしたアクションアドベンチャーゲームではレンダリングの美しさを体験することができます。驚くべきは、その実写のようなクオリティがプレイ画面であるということ。イベントで挿入されるムービーと遜色がなく、かつシームレスに移行するので、始めた当初は少し戸惑うぐらい衝撃を受けました。The Game Awards 2018ではゲーム・オブ・ザ・イヤー、ベストゲームディレクションを受賞しているようです。


下記のトレイラーを見比べていただくとわかりやすいかなと思います。神話を元にしたストーリーをしっかり感じさせる美しいビジュアルと抜群の操作感、爽快感を見事に両立させた非常にやり応えのある作品でした。

©2018 Sony Interactive Entertainment LLC


こちらはバトル紹介のトレイラー

©2018 Sony Interactive Entertainment LLC

参照)プレイステーション公式|ゴッド・オブ・ウォー


アニメーション3DCGの世界と練に練られた最高峰のUI


元々は2016年にプレイステーション3でリリースされた作品がプレイステーション4に移植されたもの。2018年3月31日現在で全世界累計出荷本数は220万本を突破しているヒット作。GOD OF WARと同じ3Dのグラフィックですが、キャラクターがアニメーションのようなテクスチャーで作られたRPGゲームになっています。

©ATLUS ©SEGA All rights reserved.

参照)ペルソナ5


アニメ原画を活かしたキャラクター達がコミカルにシリアスに活き活きと活躍し、実写的な3Dとはまた違う独特な世界観を構築しています。


本作品は多岐にわたる育成要素や攻略要素があり、ゲームシステム的には割と複雑な無類だと思います。そんな複雑なシステムでありながら、いかにユーザーの無駄な作業を限りなく減らすかを考え抜かれていているところが面白く、細部まで練られたUIやゲーム設計は、非常にテンポが良くオリジナリティ溢れるプレイ体験に昇華できているのも見どころです。

『ペルソナ5』のカッコよすぎるUIの制作工程を紹介! アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC+KYUSHU 2017】|ファミ通.com


こういったアニメーションテクスチャーのCG表現は、WEBでも活用されていて、Vtuberやスマートフォンゲームやキャラクター作成で見かけることができます。※LIVE2D、SPINEといったソフトウェアが利用されているようです。

©BANDAI NAMCO Entertainment Inc.

参照)アイドルマスター シャイニーカラーズ(シャニマス)


ゲーム「界隈」ではなく、インタラクティブなアート表現として評価される日も近いのでは


私もそこまでどっぷりゲーム沼に浸かっているわけではありませんが、ちょっと覗くだけでこれだけの表現で溢れているのが驚きです。ビジュアル単体としてのアイデンティティは、アート作品のような特別なコンセプトやアイデンティティがあるわけではありませんが、ゲーム作品としての狙いや表現、技術は目を見張るものがあります。もっと幅広い評価があってしかるべきではないかと個人的には思っています。


最近では、VR上でコミュニケーションを行うプラットフォームなどでもLIVE2Dモデリングのようなアバターが利用されているなどの新しい流れが生まれています。海外で制作されたゲームのローカライズ対応も当たり前になり、クオリティの高い作品がどんどんリリースされています。


ゲームって時間をかなり取られてしまいますが、この流れを完全にスルーするのもちょっともったいないように思います。たまには息抜きがてらゲームをしてみて界隈の動きに注目しても良いのではないでしょうか。








デザインの進捗とバージョン管理のススメ

 

こんにちは。デザイン担当のLQヒロシです。

 

WEB開発ではGitというアプリケーションを用いてプログラムファイルなどの更新状況管理をしているのですが、ファイルの更新状況を上書き時に業務ログも残しています。
この業務ログは、ひとつのプロジェクトを複数人で作業することの多いエンジニアさんにとって、他のメンバーがどのような進行状況なのか、どういったところで詰まっているのかを知る目安になっています。
プロジェクトの管理担当者も作業者を評価する指標として活用しているケースもあるかと思います。

 

もちろんデザイナーもコーディング作業であればGitを使ってファイルの進行状況を管理したり業務ログを残しますが、デザイン、特にビジュアル作成フェーズの業務ログを残すのってなかなか大変で、デザイナーの管理が難しいと言われる要因の一つかもしれません。

 

弊社ではデザインデータのバージョン管理アプリを利用して業務ログを残すようにしています。今回はその取り組みについて少しご紹介したいと思います。
Gitの仕組みを利用したものになるのでバージョン管理もできるのでおすすめです。

 

デザインデータの管理アプリについて

 

よく利用されているアプリケーションは以下の2種類になるようです。

 

Kactus(カクタス)

 

Githubベースのアプリで弊社ではこちらを利用しています。
基本的にはSource treeみたいな感じで使えます。詳しくは後ほどご紹介します。

【概要】

  • 標準のバージョン管理方法はGit。
  • 対応データ形式はSketchファイルを推奨。aiファイルやpsdファイルも利用できます。Sketchファイルの場合は、png画像を自動で書き出し差分が確認できます。

 

 

Abstract(アブストラクト)

 

デザインデータのバージョン管理アプリではこちらの方が新しく評価も高いです。

【概要】

  • Gitを介さずにできるのでスムーズな導入が可能(Git連携可能)。
  • UIが特に使いやすく、Sketchとの親和性が高い。
  • Kactusよりストレスフリーで使い勝手は良いのですが、Sketchファイルにしか対応していないのが残念。

Abstractの最大の利点はデータを保存するだけででてくるコミット入力ウィジットです。Sketch限定ですがすべての作業がSketch上で完結します。これが非常に便利!!Sketch主体で業務を行っているならこちらの方が良いと思います。

 

 

弊社ではUIデザイン以外にもロゴやイラスト作成などSketch以外で作成する業務もありますのでKactusを選びました。

 

そもそもなぜデザイン業務はログが残りにくいのか?

デザイン業務、ビジュアル作成のフェーズではIllustratorなどのソフトを使ってレイアウトを組み立てていきます。

 

手書きラフなどを先に作成する場合もありますが、基本的には画面上でオブジェクトを動かしながら組み立てていくことが多いです。
色の設定から少しづつ整っていくこともありますし、漫然とした状態からアイデアがカチッとはまって次の瞬間には出来上がることもあります。
このようなところが業務ログを残すことが難しいと感じるのではないでしょうか。

 

完璧なログを残すのではなく、保存のタイミングなどで簡単な状況説明をする、もっと砕いて言えばボヤキぐらいでもいいのでアプリを活用してちょっとしたメモを残す。「誰がどんな感じで業務にタッチしているのかがわかる」ことが重要なのではと思います。
Sketchであればpng画像として自動的に残すこともできるので尚良しですね!

 

それではKactusの利用方法について

 

KactusもAbstructも使い方は検索すれば割と見つかると思います。いくつかピックアップしましたので参照ください。

Kactus – 変更点が見て分かるデザイナーのためのバージョン管理ツール
デザインデータのバージョン管理ができるAbstractを試してみた

 

書かれている内容は概ね、新規にディレクトリを作成して対象リポジトリにするという感じですので、本記事ではKactusで実際のプロジェクトとの紐付方について少しご紹介できればと思います。

 

弊社の場合はプロジェクト毎にgithubリポジトリに紐付いているため(Web開発であれば大抵そうじゃないのかなと思います)、gitクローンするところから始めます。

 

左上メニューの File > Clone Repository を選択

こちらのダイアログが表示されるので  URLタブ内、A欄に Clone 対象リポジトリーURLを B欄にClone先のディレクトリパスを入力して Cloneボタンで完了です。
※クローンするとコーディングファイルなども落ちてくるので管理には注意してください。

 

  1. 管理ディレクトリ内でデザインファイルを作成、または更新すると、ファイル変更情報が A に表示されます。
  2. A をクリックすると ※Sketch 利用時のみ B に画像が表示されます。
  3. まずはCの Fetch origin からリモートの最新バージョンを取得します。
  4. Dの Summary欄にコミットメッセージを入力。弊社の場合はRedmineと連動しているので最低限チケット番号を入力。
  5. 細かいメモはEのDescriptionに残せば良いと思います。
  6.  Commit to master をクリックすればコミット完了。

 

最後に右上の Push origin からリモートを更新して完了です。
余談ですがhtmlなどのファイルの管理もこちらからできたりします。
※プライベートリポジトリを利用するには有料の登録が必要です。

 

 

他にもHistoryからコミットログのテキストやSketchであれば差分画像を確認できます。
Redmineと連携していればそちらでもリポジトリの履歴確認が可能になります。
ブランチの作成もできますので複数人で管理することもできます。

 

 

以上、最後が駆け足になってしまいましたが、今後もKactusのナレッジなどより良い使い方をご紹介していければとおもいます。

 

 


canvasで ”うにょうにょ動く円” を ”複数” 作ってみました

 

こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。

業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装!理想の「うにょうにょ動く円」を求めて…

 

ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。

https://jsfiddle.net/39we73t1/

 

完成はこちら

See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.

 

script全文はこちら

 

さっそく作り方を

 

うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、

 

・10個のアンカーポイントをサークル上に2次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす

 

という感じでしょうか。実際のコードを見ながら説明していきたいと思います。

 

アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。

 

次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX(ポイントの数)分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。

 

円の配列については最初に定義(circles)していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。

 

そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。

 

描画について

 

draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数(実際の描画処理を行う関数)を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。

https://jsfiddle.net/39we73t1/

 

drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して2次元ベジェ曲線を描画し塗りつぶしています。最後にonloadcanvasお決まりの構文を書いてinitすれば完了です。

 

 

これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた!

 

以下、scriptの全文になります。


Webスクレイピングをはじめてみました(1)

 

こんにちは、長年Webデザインに携わってきましたがプログラミングがなかなか覚えられないLQヒロシです。

今回は一念発起して、流行りのPythonWebスクレイピングをしながらプログラミングを勉強していこうという試みです。

なぜWebスクレイピングなのか?

 

PHPのちょっとした修正や、jQueryを使ったクリックやリサイズの簡単なイベントぐらいはできるけど、そこから先になかなか進めない・・。デザイナーなんだしJavaScriptUI周りのエフェクトとかを実装できるようになりたいと思ってはいるのですが、UI周りってイベント同士が絡んだりすると途端に難しくなってなかなか続かないのが目下の課題だったりします。

簡単なアウトプットを段階的にこなしていって、ファンクションのまとめ方だったり、データのやり取りなどプログラミングの勘所を掴んでいけるのが理想的ですよね。

Webスクレイピングであれば、WebサービスのAPI活用・クローリングでのデータの収集、データベースへの保存や取り出し、データの加工の作成という一連の流れが小規模なカタチで勉強できるので、体系的にポイントを抑えた勉強ができそうです。データを加工するのに正規表現も使うことになりそうだし。

 

プログラミング言語はpythonを使用し、ツイッターと連携して画像を収集しギャラリーサイト作成を最終的な目標としたいと思います。

 

第一回目は、スクレイピングとPythonについてご紹介できればと思います。

そもそもWebスクレイピングとは?

 

厳密にはクローリングとスクレイピングに分けることができます。

・クローリング
WebサイトのハイパーリンクをたどってWebページを探す作業

・スクレイピング
Webページから必要な情報を抜き出し、整形し直す作業

例えば、電子書籍の販売サイトから書籍情報を抜き出して価格を比較、最安値の情報のみをまとめるなど、要するに複数のWebサイトから任意の情報だけを抜き出し、雑多なデータを整理して有益な情報にすることでしょうか。

Pythonって何?おいしいの?

 

GoogleFacebookで採用されていて、機械学習やIoTの事例も多い現在最も旬な言語とも言われていますので、おいしいです。他のプログラミング言語同様、WindowsMacOSLinuxなどのプラットフォームで動作でき、環境構築・Webシステムの開発~データ解析までひとつの言語で実現できることから世界中で広く使われています。

Pythonの特徴

 

文法が読みやすい

 

プログラムは一度書かれた後も他の人に読まれるもの。pythonでは「シンプルで読みやすいコードが書けること」という設計思想があり、コード上の装飾が極力少なくなるような記述方法になっています。少し文例を見てみましょう

実行結果:hogeです

 

このように文の終わりに閉じタグが必要なく、制御構文では影響する範囲を括弧で囲む代わりにインデントで定義。変数は代入するだけで宣言されたことになるのでとてもすっきりとして読みやすいコードになります。

Pythonってなんだか難しそうなイメージがありましたが、PHPなどと比べても別段特殊な書き方をしているわけでもなく、文法が見やすいので非常に馴染みやすく感じました。教育の現場でも採用されていたりするそうで、プログラミング初心者にも学びやすい言語だと思います。

 

・導入が簡単!

 

MacならHomebrewでインストールするだけですぐに使えました。コンパイルする必要もないので、ぶっちゃけ笑ってしまうぐらい早いですwww

(以前PHPを導入した際は、php.iniファイルの設定を調整したり、事前にDBを用意したりと面倒だった思い出があります。)

 

・豊富なライブラリ

 

Pythonには正規表現、数学関数、通信プロコトルなどの標準ライブラリが非常に豊富でインストールするだけで利用が可能です。さらにサードパーティ製のライブラリも豊富に提供されています。最近ではディープラーニング用のTensorFlowなどが有名ですね。データ解析のライブラリも強力で、スクレイピングしたデータをインフォグラフィックとして表現できたりもします。

 

それではPythonの導入方法を見てみましょう

 

Pythonは2系と3系があり、現在は3系が主流になりつつあります。2系と3系の間には互換性がありません。Macではデフォルトでインストールされていますが2系だったりするので、Homebrewで3系をインストールします。

 

 

バージョンを確認してみましょう

 

Homebrewでインストールしたものが参照されているか確認します。

と表示されれば準備は完了です。

 

では、対話方式でプログラム実行できる「インタラクティブシェル」でPythonを動かしてみます。やり方はターミナル上で「python3」と入力するだけですw

立ち上がったら上記のようなメッセージが表示され、コマンド受付状態になります。では、構文を入力してみましょう。

はい、これだけですw簡単ですw

 

終了する時は

または

これでbashに戻ることができます。

 

第一回目は以上になります。説明や導入を中心に駆け足でご紹介してきました。
まだまだ勉強中の身のため、上手く伝えられず分かりにくい部分が多々あると思いますが、次回からは実際にPythonを利用して少しでも魅力をお伝えできればと思います!