relativez (企画=大原由, 開発=水野翔司)

2021

Webアプリケーション

relativez

web application

relativez は文献の引用ネットワークを可視化するWebアプリケーションです。

プロジェクトの基本情報

relativez が想像する理想的なシーンは、複数の独立したアーティストが集まる場所において、個々人の持つ問題意識について、お互いがお互いにその複雑さを理解しつつ共通点を見出せる環境です。このWebアプリケーションが会話や勉強会など様々な場面で制作の一助になることを願っています。

主要な機能であるネットワークグラフの描画はJSライブラリのD3.jsを導入して実装しました。フロントエンドのみで動作するクライアントサイドWebアプリケーションです。バックエンドはなく、外部データ取得も行いません。

ユーザーが作成した文献データと引用関係データを基にしたネットワークグラフを表示できます。
下記のデータ作成用テンプレートをコピーまたはダウンロードしてからデータを作成してください。
- データ作成用テンプレート – relativez_data_template.v01
データ作成方法については、シート「データ作成マニュアル」を参照してください。

データソースを作成して提供していただくと、relativez にアクセスした他のユーザーが閲覧可能なネットワークグラフとして表示します。「データソース選択」から提供していただいたデータが選択可能になります。relativez にデータを提供していただける方は TwitterのDMでご連絡ください。

relativez は今後の運営や開発等の費用を募っています。関心を持っていただいた方や、ご利用者の皆様からのご支援をお待ちしております。何卒よろしくお願い申し上げます。

バグを見つけた場合は下記のどちらかで問題を報告していただけるとありがたいです。プルリクエストも受け付けています。

MIT

グラフ作成にD3.jsを利用していますがpackage.jsonでは管理されていません。

ロゴと基調となるカラーパレットのみ依頼主の方に作成していただき、詳細な画面設計はこちらで行いました。工数削減のため詳細なデザインカンプは作成せずブラウザ上でデザインする手法で行いました。（インブラウザデザイン）

UI、グラフ描画、データバリデーション、データ加工など必要になる処理の実装をすべて行いました。DOM Based XSSの対策を意識したコーディングを行いました。テスト仕様書を作成し主にバリデーション、XSS対策などのテストを実施しました。

また、Node.js環境でのフロントエンドプロジェクトの開発経験はなかったため、下記のようなフロントエンド開発技術を学習し取り入れることを目指して開発を行いました。

Node.js環境でパッケージ管理を行う。
gitによるソースコードのバージョン管理を行う。
git flowを参考にしたブランチ管理・運用を行う。
browserify、Babel、Terserを導入し、JSファイルのバンドル、トランスパイル、ミニファイを行う。
ESLint、Prettierを導入し、JSコードの構文チェックと自動フォーマット行う。
モジュールの仕組みをつかってJSファイル分割を行う。
jsdocを導入し、ドキュメンテーションコメントからAPI仕様書を自動生成できるようにする。
- API仕様書：https://shojimizuno.com///docs/relativez/out/index.html

CC BY 4.0 ライセンスの下で利用可能です。