記事
Mihoko Iijima · 2022年4月13日 14m read

Store Mindmaps using Globals(InterSystems Global コンテスト優勝作品紹介)

  

開発者の皆さん、こんにちは!

この記事では、InterSystems Global コンテストで見事優勝🏆された @Yuri Marx さんの作品をご紹介します!(ご本人が投稿された記事を使ってご紹介しますlaugh

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 グローバルに登録する部分のソースコード

 
ClassMethod StoreMindmapNode

^mindmap グローバルを作成しています。mindmap のプロパティについては、Global の添え字に設定しています。添え字のキーは mindmap の id プロパティの値を設定しています。 

 

^mindmap ノードを削除するサンプルコード: Global の kill (削除)

 
ClassMethod DeleteMindmapNode

このサンプルでは、minamap.id  を ^mindmap グローバルのキーとして利用しているので削除は簡単です。以下実行するだけです。

kill ^mindmap(<mindmap id>)

 

全格納情報を取得するコード例 - $ORDER()関数を使用してGlobal をループする

 
ClassMethod GetMindmap - return all mindmap global nodes

^mindmap グローバルの第1番目の添え字にある最初の情報(ルートノード)を取得するために、$Order(^mindmap("")) を実行しています(取得した内容は変数 Key に設定しています)。

^mindmap(Key, <property name>) を使用して、各プロパティ値を取得しています。次に登録されている Key を取得するため、While文の最後に  $Order(^mindmap(Key) を実行しています。

 

フロントエンド

MindMap のレンダリングと編集には Mind-elixir と React が使われ、IRIS で構築された API バックエンドを呼び出しています。詳細は、MindMap の react コンポーネントを参照してください。

 
Mindmap React component - consuming IRIS REST API

もし、このサンプルコードが気に入りましたら、InterSystems Global コンテストで私の作品に投票してください!

ありがとうございました。

@Yuri Marxさんが書いた元の記事へ
0
0 15
ディスカッション (0)1
続けるにはログインするか新規登録を行ってください