Q&A
試しに書いてみたりはしていないのですか？
前提・実現したいこと
プログラミング初学者です。
javascriptを使い、ページ内にフローチャートを作成したい。
この際、javascriptのライブラリーである、「flowy」を使用しようとしています。
発生している問題・エラーメッセージ
下記のページを参考に、フローチャートを導入したいと思っていますが、実装方法が分からず、困っております。
リンク内容
このページに
「スクリプトを初期化し、サイズなどを定義して実行します。」
と書いてありますが、こちらはどこに書くべきなのでしょうか？
js
1var spacing_x = 40; 2var spacing_y = 100; 3// Initialize Flowy 4flowy($("#canvas"), onGrab, onRelease, onSnap, spacing_x, spacing_y); 5function onGrab(block){ 6 // When the user grabs a block 7} 8function onRelease(){ 9 // When the user releases a block 10} 11function onSnap(block, first, parent){ 12 // When a block snaps with another one 13}
該当のソースコード
ライブラリーで作成されたコード（下記、githubのリンク先より、ご確認いただけますでしょうか。）
リンク内容
flowy.min.js
js
1文字数の都合により省略。
flowy.js
js
1文字数の都合により省略。
試したこと
ライブラリーにあった既存の、
flowy.jsやflowy.min.jsのコードを
js
1var spacing_x = 40; 2var spacing_y = 100; 3// Initialize Flowy 4flowy($("#canvas"), onGrab, onRelease, onSnap, spacing_x, spacing_y); 5function onGrab(block){ 6 // When the user grabs a block 7} 8function onRelease(){ 9 // When the user releases a block 10} 11function onSnap(block, first, parent){ 12 // When a block snaps with another one 13}
に差し替えてみましたが、ダメでした。
補足情報（FW/ツールのバージョンなど）
不足している点がありましたら、補足します。
プラグインのドキュメントからは何も得られませんか？
個人記事より確実で最新の情報です。
>>maisumakunさん
ご回答に基づき、修正を行わせていただきました。
>>m.ts10806さん
申し訳ありません・・・。プラグインのドキュメントとはどのようなものなのでしょうか・・・。
ドキュメントはこちらですね。ちょっと初心者には荷が重そう…。→ https://github.com/alyssaxuu/flowy
やりたいことはご自分のページ上でフローチャートを編集することですか？ または表示だけで良かったりしますか？
管理者一人が、ドラッグ＆ドロップでフローチャートを自由に作れるようになればいいのですが・・・。
「編集」というのがどこまでかはわかりませんが、最低限、表示だけできればあとは何らかの形で工夫はできる気はします。
回答2件
0
ベストアンサー
通常は別ファイルに記載しますが、html上にスクリプトを書くと以下のようにするのが最小構成かと思います。
※flowy($("#canvas")⇒flowy(document.getElementById('canvas')に変更しております。現時点ではjQueryを利用するとうまく動作しなかったため、このように修正する必要があるようです。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <title>Page Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 <link 9 rel="stylesheet" 10 href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css" 11 /> 12 <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> 13 </head> 14 <body> 15 <div class="create-flowy">The block to be dragged</div> 16 <div id="canvas"></div> 17 18 <script> 19 var spacing_x = 40; 20 var spacing_y = 100; 21 // Initialize Flowy 22 flowy(document.getElementById('canvas'), onGrab, onRelease, onSnap, spacing_x,spacing_y); 23 function onGrab(block) { 24 // When the user grabs a block 25 } 26 function onRelease() { 27 // When the user releases a block 28 } 29 function onSnap(block, first, parent) { 30 // When a block snaps with another one 31 } 32 </script> 33 </body> 34</html> 35
投稿2021/07/20 09:00
総合スコア155
ご回答ありがとうございます。
ただ、実装を行ったところ、「The block to be dragged」の文字を移動することはできましたが、フローチャートにならず、文字の変更もできないようでした。
> ただ、実装を行ったところ、「The block to be dragged」の文字を移動することはできましたが、フローチャートにならず、文字の変更もできないようでした。
記載いただいた内容でできる実装は移動までしかできない実装かと思います。
（function onGrab や function onRelease 、 function onSnapに何も実装していないですし・・・）
実際にフローチャートのように動作させるには
公式GitHubやでもサイトを参考にして作りこむしかないかと思います。
GitHub
https://github.com/alyssaxuu/flowy
デモサイト
https://alyssax.com/x/flowy/
0
ライブラリーにあった既存の、flowy.jsやflowy.min.jsのコードを（中略）差し替えてみましたが
どうしてそのような発想になったのでしょうか。
まずはGitHubにあるセットアップ方法から始めてみましょう。
投稿2021/07/20 08:04
総合スコア146063
公式ではflowy.min.jsはjsdelivrからの参照となっており、ファイルを用意する必要すらありません。
当初、そのように考え、HTMLの例といて挙げられている、
<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>
を記載しましたが、動きませんでした。
この理由として、
Javascript
var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
// When the user grabs a block
}
function onRelease(){
// When the user releases a block
}
function onSnap(block, first, parent){
// When a block snaps with another one
}
function onRearrange(block, parent){
// When a block is rearranged
}
の記述が必要だと考えたのですが、この記述はどこに記載すれば良いのでしょうか。
あなたの回答
tips
プレビュー
