Stock Artist: 為替データをアートにする
今回はCIIDのWeek11-12で実施された、”Intro to Programming”のコース内容についてお伝えしたいと思います。このコースは後続で行う”Physical Computing”や”Tangible User Interface”の基礎となっているため、今後の自分のプロジェクトの質を上げるためにも、重要なコースとなります。
最初の1週間は、学生のほとんどがプログラミング初心者であることを考慮して、基礎的な学習となりましたが、後半は二人一組でプロジェクトを行いました。その一環でAPIを活用しながら、為替データをアートに変えるウェブサイトを作ってみました。実際のデザインプロセスを分かりやすくまとめてみたので、是非ご覧ください。
p5.jsの基礎学習
最初の1週間は、主に基礎的なプログラミング学習を実施しました。活用していた言語はJavaScriptのライブラリーであるp5.jsです。前回の授業でも活用した言語ですが、この言語では簡単にクリエイティブコーディングを実装することが可能です。
実際のアウトプットのイメージは、下記の”Generative Design”というウェブサイトがよく表していると思います。
この1週間では多くの課題をこなすことで、p5.jsで描くことができるスケッチのイメージをつけることができました。例えばですが、自分がトレーダーとしての仕事をしていることを踏まえて、普段見ている為替チャートを可視化してみたスケッチがこちらです。
このp5.jsを実際に使ってみて感じたことは、簡単なコードでも複雑なスケッチを描くことができるということです。自分が作成した動的なスケッチをウェブサイトのトップ画面に置くこともイメージできました。いわゆる”Generative Design”や”Creative Coding”の領域と思いますが、日本で有名なTeam Labが主催しているteamLab Planetsはこの領域に該当します。
今回のプロジェクト概要紹介
後半の1週間は、実際に二人一組でプロジェクトを行いました。お題は、コロナウイルスが蔓延している状況で、外の世界と繋がることができる新たなプロダクト・サービスを作成せよ、というものでした。
この他にサービスの種類として、「マルチプレイ」「API のデータ連携」「ツール」がありましたが、自分たちは「API のデータ連携」を活用したクリエイティブコーディングを実装しようとなりました。
具体的なテーマですが、自分がトレーダー業にも関わっていることも踏まえて、トレーダーの方々のために、為替の変動をアートに変えることができたら面白そうだよね、とグループメンバーと盛り上がり、「Stock Artist: 為替データをアートに変える」ことにしようと決めました。
この自粛環境下の中で、副業でトレードしている人が、為替チャートに向き合う時間は増えていると思います。そして自分が買ったら価格が下がる、売ったら上がるというような、為替チャートに惑わされてストレスを抱えている方は多いのではないでしょうか。そんな経験をポジティブに変えるため、為替データをアート的に表示することは、的を外していないと思います。
Step0: MVPを定義する
「為替データをアートに変える」となると、様々な方法や機能を思いつくことができるのですが、自分の知識に限りがあること、時間的な制約が大きいことを踏まえて、MVP (Minimum Viable Product) を定義することから始めました。その結果、最初は以下3つのことを実現することから始めました。
1. 為替データをリアルタイムに連携することができる
2. 取得した為替データを作成したデザインに組み込む
3. 誰でもアクセスできるようにウェブサイトを開設する
MVPというとかっこいいですが、要するに、最低限のコンセプトを実現するために、できることから始めようという意図が強いです。一方でデザインの過程は、小さくてもいいので、できることから始めようという精神は非常に重要だと思います。まずは何らかの形にしてみないと、コンセプトが成り立つか分からない、大きなことはその後に実装できるからです。
参考までにForbesのMVPに関する記事を載せておきます。
Step1: APIを経由してリアルタイム為替データを取得する
今回リアルタイムの為替データを取得するために、Forexが提供しているAPIサービスを活用しました。最初の2週間は無料なので、為替データを使って何らかの分析をしたい時には役立つAPIだと思います。一方でヒストリカルなデータはないようですね。
自分はポンド系の通貨ペアでトレードすることが多いので、今回アートにする通貨ぺアは日本円とポンドの、GBP/JPYとしました。
Step2: Generative Design Modelを考える
このパートはチームメイトが担当していた領域ではあるのですが、彼が初心者であることを踏まえて既存のモデルを少し改修して、自分たちのデザインにすることにしました。活用したモデルは、”Generative System”というもので、このチュートリアルから学習することが可能です。分かりやすくp5.jsの基礎も解説されています。
Step3: リアルタイム為替データをモデルに組み込む
次のステップとしては、取得した為替データを作成したGenerative Systemに組み込むことです。先程のデザインはランダムネスを活用して、予測不可能なデザインを作成していたのですが、そのランダムネスを為替変動に変換して組み込むことで、為替に連動したアートを作成することにしました。
分かりやすく言えば、変数でRandom()としていた部分を、毎秒APIを経由して取得される為替データの変動率に変換しただけです。単純なステップですが、上の動画にあるようなリアルタイムの複雑なデザインを実現できます。
余談となりますが、為替データを完全にアート化する”Artist Mode”と、為替データの変動をオブジェクトの形や大小で視覚化する”Classic Mode”に分けて開発しています。
Step4: Stock Artistのウェブサイトを開設する
最終的にはHTML/CSSを活用して、実際のUIを作成しました。その後にGithubを使ってウェブページ をホストしています。Githubを使ってウェブページを開設する方法は、こちらに分かりやすく掲載されています。また、API Keyが表示されてしまうので、ウェブサイトリンクは公開していません...。
最終的にはそれっぽいウェブページができたわけですが、実はこのアートは為替変動が大きくなると、ランダムな形状になり、為替変動が小さくなると、美しいデザインをみれることができるように設計されています。将来はBloombergやReuterの金融ページトップに掲載されるような時が来ることを期待して、個人的なプロジェクトとしてこれからも開発を続けていきたいと思います。
最後に: ビジネスマンがITの実装を体験することはマスト
自分はこれまでビジネスコンサルティングに携わってきたので、システム開発のプロジェクトに携わることも多かったのですが、その時にITサイドの人と対等に会話できないことを少しコンプレックスに感じていました。何かを作ることになった時にITを駆使することはマストなので、何が難しいのか、できるのか、といったことを実感を持って語れるか否かは、ビジネスマンとして大きな差になると思います。
今回の経験だけで、それができるようになったとは思いませんが、プログラミングをする過程で得た小さな成功や如何なるミスも、必ずビジネスマン
としての自分に影響を与えると思いますので、今後もプログラミングには携わり続けたいと思います。
町田
この記事が気に入ったらサポートをしてみませんか？