私のポートフォリオ（栗山晃）
私が開発したものを紹介します。私のエンジニアとしてのパーソナリティなどをお伝えできれば幸いです。
Processing入門web
- URL
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
個人で作ったプログラミングの入門サイト
本サイトでは、コードがどのように動作するかを画面上で見ることできる。それが学習者の理解を促進することを期待している。
アニメーションのサンプルをp5.jsで作り、画面上で動くようにしていること。
大学の授業でこのサイトは役立ちました。大学を離れたので、役割を終えてしまったかもしれません。
p5.jsで作った作品(クリスマス)
- URL
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
詩的な雰囲気のあるアニメーション作品（ 画面をクリックすると雪だるまが飛ぶ）
数学的、技術的に凄い作品を作るのではなく、女性から「かわいー！」という反応をされる作品を作りたかった。詩的な雰囲気のあるものにしたかった。
空から振ってくる雪や、クリスマスツリーの飾りの光をそれらしく表現する技術。
本作品では、雪や光を「ポワワン」とした感じに表現している。光を表現する際には、円や点を中心から外側に向かって徐々に薄くしていく、という表現が用いられることが多いが、それだけではこのような「ポワワン」とした感じにはならない。
本作品においては、その「ポワワン」とした感じを表現するために、上記旧来の技術に加えて座標の拡大と縮小を用いている。
座標の拡大と縮小はかなり重たい処理であり、そのために画面全体が重たくなってしまっている。
p5.jsで作った作品(しなる木)
- URL
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
画面をドラッグすると木の枝がしなる。
本作品は、「recursive tree」の一種である。（再帰処理を用いて描いた木は、recursive treeと呼ばれることが多い）
本作品では、先行研究のコードを参考に再帰関数を用いて木を描いている。先行研究では木は動かず、枝がしなることが本作品の新規性のある点である。
「枝がしなる」ようにみえるために、いかなる制御を行うか？ （幹と、幹から枝分かれして伸びる枝をどのように連携して動かせばよいか？）ということが本作品を作る上での課題であった。
本作品では、指数関数を用いて枝の回転角度を制御することで、それを実現している。
指数関数は、ある水準の値を超えた際に爆発的に数値が向上するような状況を表現できる数式であり、ビジネスやテクノロジーの進歩に対して「指数関数的成長」という言葉が使われることが多い。
本作品では、画面をドラッグすると、わずかに木の幹が回転する。その回転角は、木の先端に向かうに従い爆発的に大きくなる。このような数値の制御に、指数関数を利用している。
計算処理が多く、画面が重くなってしまった。当初の構想では、パラメーターを変えて何本もの木を画面に配置することで風景を表現したかったが、それは断念せざるをえなかった。
p5.jsで作った作品(任意の点を中心に、画像の拡大や縮小をする)
- URL
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
任意の点を中心に、画像の拡大や縮小をする。
Prosessingやp5.js、javascriptなど主要な言語では、画像を表示し、その大きさを自由に設定することができる。（拡大率、縮小率を自由に設定できる）しかしながら、任意の一点を中心に画像を拡大したり、縮小したりといった操作をする方法は、提供されていない。本作品では、それに挑戦した。
画像の任意の点を中心に拡大、縮小する技術の例としては、googlemapがある。
基本的なアイデアは、画像を拡大（あるいは縮小）すると同時に、その画像の位置をずらすことで、任意の一点が拡大したり縮小したりするように見せることである。
それを実現する数式とアルゴリズムを作ることに苦労した。（結果はシンプルなものになったが）
任意の点を中心に画像を拡大させたり縮小させたりといった方法は、ググってもよい解説が見つからない。（私の検索方法がまずいのかもしれないが）
既存研究（解説サイトなど）について調査し、よい説明が見つからない場合は、私がそれを書くべきかもしれない。
p5.jsで作った作品(カエル)
- URL
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
詩的な雰囲気のあるアニメーション作品（ 画面をクリックするとカエルが飛ぶ）
数学的、技術的に凄い作品を作るのではなく、女性から「かわいー！」という反応をされるような作品を作りたかった。
水の波紋を表現するために乱数を用いている点が工夫した点である。水の波紋を数学的に表現すると複雑な数式となるが、乱数を利用することで簡単に書くことができる。
水の波紋を表現するために、円が広がる速さと円の大きさを乱数でばらつかせている。
「カエルっぽさ」を表現するために、ジャンプしたカエルがボテっと落ちる感じにする必要があった。そのために重力加速度を簡易的にシュミレーションしている。
みぞれの降る冬をイメージした作品であるため、カエルが登場することが季節的に矛盾していること。
gitlogの開発
- URL
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
githubの任意のプロジェクトに対して、その開発過程に関するデータを取得し、そのデータをグラフデータへ変換し、データベースに格納するプログラムである。
データベースにはneo4jを使用している。neo4jは、ノードとエッジから構成されるグラフデータを格納するグラフデータベースである。neo4jには、ノードからノードへのパスを検索する機能などがデフォルトで搭載されており、グラフ理論で扱われる問題（最小経路探索問題など）を容易に解くことができる。
属性付きグラフのレスポンシブ可視化の研究の一部で、本コードは私が納品した後、プロジェクトオーナーの手でgithubにアップされた。
DB周りの処理をpromiseやコールバック関数で書くことはネストが深くなるため、一般に難しいと言われるが、それに挑戦している。（システム全体がnode.jsで構成されているため、私の担当部分もnodejsで書く必要があった）
日本ではあまり普及していないneo4jを使用している。
node.jsからgithub-apiに接続するために用いたライブラリや、neo4jへの接続に関しては、日本語の説明が少なく、本家の英語リファレンスを読むことが必要となるなど、ノウハウが少ない中での開発となった。
javascriptを用いた非同期処理は、コールバック関数の中でデータを受け取るため、そのたびにネストが深くなり、非同期処理が連続するとコーディングが難しくなる。promiseを用いることで視覚的には改善されるが、非同期処理のたびにネストが深くなっていくという本質は変わらない。このプログラムは、promiseを用いて延々と非同期処理を連続するという難易度の高いコードとなっている。
今後、同様のシステムを作る場合は、コーディングの難易度をさげたい。
async, awaitを用いれば、非同期処理を同期処理のように書ける。本コードでは、ループ処理を再帰関数を利用して行っているが、async, awaitを利用すれば、そういった部分がforループで書けるようになり、コーディングの難易度が下がると予想される。
私が開発中のサービス（photomap share）
- URL(開発中のためなし)
- これはどんなものか？
- 既存技術との差異や工夫した点
- 技術や手法のキモはどこ？
- 課題や発展について
写真を地図上にアップロードしていくサービスである。
ユーザーが本サービスを使う動機として、以下のようなものを想定している。
（１）サークルや家族、友達と旅行に行った際に、撮った写真を地図上にアップすることで、あとで振り返った際に「ここでこんなものを見たよね！ こんな経験をしたよね！」と思い出を振り返ることが容易となる。
（２）絶景スポットなどで撮った素晴らしい写真をシェアし、他人から「いいね！」などをもらえることが嬉しい。
写真と地図を紐付けることは、googlemapがすでに実現している。SNSの概念を取り入れたことが、異なる点である。
写真を地図にアップしていくアプリは過去に存在する。しかしどれも、写真を直接地図に載せてしまうため、写真の数が多くなると、写真が地図を埋めてしまう。本サービスではその問題を解決するため、地図上に一定距離ごとにマーカーを置き、それに写真を紐付ける方法を取っている。
写真をアップした際に、位置情報から近くのマーカーを検索し、それに写真を紐付ける。近くにマーカーが存在しない場合は、新しくマーカーを作り、写真を紐付けるアルゴリズムなど。
スマホネイティブアプリからのアクセスを想定し、セッション管理を自作していることなど。
まだ開発途中であり、今後、解決すべき課題は多く出てくる。
勉強と趣味を兼ねて作っているものなので、サーバサイドはフレームワークなど入れず、自分でO-Rマッパを作るなど、なるべく自分で作るようにしている。
本サービスはスマホのネイティブアプリとしてリリースしたいが、ようやくwebでの試作品が完成した段階であり、開発のペースが順調とはいえない。当初は、react-nativeを用いる予定であったが、reactとgooglemapとの相性の悪さからそれを断念し、android studioで実装することにした。react,react-native,android studioと学ぶことが多く、開発に時間がかかっている。
サービスを開始した場合、サーバー維持コスト（有料サービスにした場合はgooglemapの使用料）をいかに回収するかが問題となる。