Store Mindmaps using Globals(InterSystems Global コンテスト優勝作品紹介)
開発者の皆さん、こんにちは!
この記事では、InterSystems Global コンテストで見事優勝🏆された @Yuri Marx さんの作品をご紹介します!(ご本人が投稿された記事を使ってご紹介します)
InterSystems IRIS の「Global」はデータベースに格納される変数で、キーバリュー形式でアクセスできます。キーが複数ある場合は、配列の添え字を利用して階層のようなイメージで格納することもできます。
ここでご紹介する優勝作品は、配列をうまく利用した作品で、MindMapで書いた情報そのまま(見たまま)をグローバルに登録しています。
MindMapの表示部分については、オープンソースの Mind-elixir を使用されているようです。
ソースコードは OpenExchange で公開中で、git clone 後、 docker-compose up -d --build したらすぐ動きます!(docker 🐳ほんとに便利ですね!)
また、ご本人の解説ビデオも YouTube で絶賛公開中です!お手元で動かさなくてもどんな感じで Global が使われているか、どんな感じで Web アプリを作成されているのかを確認できますので、ぜひご覧ください!
Global の登録内容は 2:26秒辺りから、フロントエンドの解説は 3:11 辺りから
以下、Yuri さんが投稿された記事の内容です。
Global は、データを永続化する InterSystems IRIS のコアとなるものです。柔軟性があり、JSON ドキュメント、リレーショナル・データ、オブジェクト指向データ、OLAP キューブ、および Mindmaps のようなカスタム・データ・モデルを保存できます。
グローバルを使用してMindMp データを保存、削除、取得する方法については、以下の手順をご参照ください。
docker/docker-compose/git がインストールされている環境でお試しください。
1. サンプルコードをローカルに clone/pull する手順は以下の通りです。
$ git clone https://github.com/yurimarx/global-mindmap.git
2. clone後、作成されたディレクトリに移動し、ターミナルで以下実行し、イメージをビルドします。
$ docker-compose build
3. 以下のコマンドを実行し、コンテナを開始します。
$ docker-compose up -d
4. Mindmap フロントエンドを開き、👆に貼っているGIFアニメのように動かす場合は http://localhost:3000 にアクセスします(または、http://localhost:52773/mindmap/index.html を開きます)。
ソースコードについての解説
保存するデータの構造は以下の通りです (詳細はこちらをご覧ください: https://www.npmjs.com/package/mind-elixir):
{
topic: 'node topic',
id: 'bd1c24420cd2c2f5',
style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
parent: null,
tags: ['Tag'],
icons: ['😀'],
hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
}
parent プロパティは、MindMap のノード間に親子関係を構築するために使用されます。
^mindmap グローバルに登録する部分のソースコード
^mindmap グローバルを作成しています。mindmap のプロパティについては、Global の添え字に設定しています。添え字のキーは mindmap の id プロパティの値を設定しています。
^mindmap ノードを削除するサンプルコード: Global の kill (削除)
このサンプルでは、minamap.id を ^mindmap グローバルのキーとして利用しているので削除は簡単です。以下実行するだけです。
kill ^mindmap(<mindmap id>)
全格納情報を取得するコード例 - $ORDER()関数を使用してGlobal をループする
^mindmap グローバルの第1番目の添え字にある最初の情報(ルートノード)を取得するために、$Order(^mindmap("")) を実行しています(取得した内容は変数 Key に設定しています)。
^mindmap(Key, <property name>) を使用して、各プロパティ値を取得しています。次に登録されている Key を取得するため、While文の最後に $Order(^mindmap(Key) を実行しています。
フロントエンド
MindMap のレンダリングと編集には Mind-elixir と React が使われ、IRIS で構築された API バックエンドを呼び出しています。詳細は、MindMap の react コンポーネントを参照してください。
もし、このサンプルコードが気に入りましたら、InterSystems Global コンテストで私の作品に投票してください!
ありがとうございました。