Oba-eng commented 7 months ago

質問内容・実現したいこと Jsのライブラリ(Js-Mind)を導入できないライブラリを導入しブラウザに表示させたい。
現状発生している問題・エラーメッセージエラーメッセージは出ていません。
どの処理までうまく動いているのかルートディレクトリにjs-mindをgit cloneしました。 管理者ツールでエラーが表示されていたためエラーの解消。

該当のソースコード


views/mypage/tree/index.html.erb
<!DOCTYPE html>
<html>

Mypage Tree



- エラーから考えられる原因
jsのコードを```index.html.erb```に記載していることが間違い？
そもそもこのライブラリを使えたとして```@menu```をロジックツリーみたく 表示させることができるのかわからないためやりたくなくなってきてます。

- 試したこと
管理者ツールやログでエラーの確認
→解消済み

Tsuchiya2 commented 7 months ago

https://github.com/hizzgdev/jsmind/blob/master/docs/en/index.md

公式ドキュメントの↑とか見てますかね？こちらを読み解いて試行錯誤してみていただけますか。

Oba-eng commented 7 months ago

公式ドキュメントを見ながら進めていましたが読み解けませんでした。

app/views/mypage/tree/index.html.erb
<!DOCTYPE html>
<html>

<head>
    <title>Mypage Tree</title>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.8.1/style/jsmind.css" />
    <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.1/es6/jsmind.js"></script>
</head>

<body>
    <h1>Mypage Tree</h1>
    <div id="jsmind_container">
      <script type="text/javascript">
        var mind = {
            "meta":{
                "name":"jsMind remote",
                "author":"hizzgdev@163.com",
                "version":"0.2"
            },
            "format":"node_tree",
            "data":{"id":"root","topic":"jsMind","children":[
                {"id":"easy","topic":"Easy","direction":"left","children":[
                    {"id":"easy1","topic":"Easy to show"},
                    {"id":"easy2","topic":"Easy to edit"},
                    {"id":"easy3","topic":"Easy to store"},
                    {"id":"easy4","topic":"Easy to embed"}
                ]},
                {"id":"open","topic":"Open Source","direction":"right","children":[
                    {"id":"open1","topic":"on GitHub"},
                    {"id":"open2","topic":"BSD License"}
                ]},
                {"id":"powerful","topic":"Powerful","direction":"right","children":[
                    {"id":"powerful1","topic":"Base on Javascript"},
                    {"id":"powerful2","topic":"Base on HTML5"},
                    {"id":"powerful3","topic":"Depends on you"}
                ]},
                {"id":"other","topic":"test node","direction":"left","children":[
                    {"id":"other1","topic":"I'm from local variable"},
                    {"id":"other2","topic":"I can do everything"}
                ]}
            ]}
          };
      </script>
    </div>
</body>

</html>

上記のビューファイルを公式ドミュメントを参考にしながら作成しブラウザにツリーを表示させようとしましたが何も表示されません。管理者ツールのエラーもなく、どうして何も表示されないのかわからない状態です。考えられる原因として、index.html.erbにコードを書くこと自体が間違っているのではないか？と考えてます。それくらいしか思い当たりませんでした。

流れとしては 1.作成しているアプリのルートディレクトリにクローン 2.https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md を見ながらindex.htmlを編集 3.http://localhost:3000/mypage/treeにアクセスし表示させようとする 4.何も表示されない

こんな感じです。ブラウザ上にツリーを表示するためには何から手をつけたらいいでしょうか？

Tsuchiya2 commented 7 months ago

hoge.htmlファイルを用意して以下の記載を行ったら表示されたので、もう少し公式ドキュメントを読んだり、ChatGPTなどを活用したりしてみてください。

<html>
    <head>
      <link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.8.1/style/jsmind.css" />

      <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.1/es6/jsmind.js"></script>
      <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.1/es6/jsmind.draggable-node.js"></script>

    </head>
    <body>
        <div id="jsmind_container"></div>

        <script type="text/javascript">
          var mind = {
              "meta":{
                  "name":"demo",
                  "author":'',
              },
              "format":"node_array",
              "data":[
                  {"id":"root", "isroot":true, "topic":"jsMind"},
                  {"id":"sub1", "parentid":"root", "topic":"sub1"},
                  {"id":"sub2", "parentid":"root", "topic":"sub2"}
              ]
          };
          var options = {                     // for more detail at next chapter
              container:'jsmind_container',   // [required] id of container
              editable:true,                  // [required] whether allow edit or not
              theme:'orange'                  // [required] theme
          };
          var jm = new jsMind(options);
          jm.show(mind);
      </script>
    </body>
</html>

Oba-eng / curry_web

jsライブラリ(Js-Mind)が導入できない #18

Mypage Tree