0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Untangled_pasta_trees How_to_use

Last updated at Posted at 2021-12-21

Untangled_pasta_trees
Untangled_pasta_trees、仕様、技術、詳細

サイト概要

ツリー構造でカテゴリー分けできるマークダウン形式のノートです。

ユーザー登録すればツリーが作成できます。

メールアドレスは適当でも大丈夫です!

ただ、パスワードを忘れた場合にパスワードリセットメールが届きません!

登録しなくても公開されたツリーはAll_treesから閲覧することが出来ます。

ツリーの内容はデフォルトで非公開設定ですが、必要であれば公開することもできます。

# 用語解説

tree = 1画面に表示されたツリー構造のノート全体を指す言葉。

leaf = マークダウン入力ができる1要素。ツリー構造の葉っぱ1枚を指す。(用語の使い分けがめんどうだったのでnodeもleafって呼んでます。)

leaf_ID = leafの頭についている番号。

All_trees = 公開されたtreeが一覧表示されるページ。

parent_ID = leafの親になるleafのID。これを起点に相対座標で子leafが配置される。

My_page = ログインすると右上に表示されるUserから飛べるページ。自分の作ったtreeが表示される。

leafの生やし方

ボタンを押すと新しいleafが生えます。

leafの頭についている番号がleaf_IDです。

treetop(root)のIDは1番です。

Image from Gyazo

treeの移動

全てのleafをドラッグでtreeを一括で移動できます。

treeの座表はtreetopが管理してるので移動後はtreetopでsaveしてください。

画面右側はどんどんキャンバスが広がりますが、左側は広がっていきません。

左側のleafが画面外に出る時はtree全体を右側に移動してください。

Image from Gyazo

拡大縮小

ブラウザの機能をそのまま使います。

拡大するには、「option」「command」「=」(等号) の 3 つのキーを押します。

縮小するには、「option」「command」「-」(マイナス記号) の 3 つのキーを押します。

自分の環境では「command 」「 shift」 「 +」(プラス)で拡大

「command」「 -」(マイナス)で縮小になってます。

 
Image from Gyazo

leafの移動

leafをクリックして出た吹き出しは上からparent_leaf_ID、x座表、y座表になっています。

parent_IDは親になっているleafのタイトル上についている番号です。

そこから生えているleafということがわかります。

x座表、y座表はparent_leafの相対座標になっています。

x座標を0にするとparent_leafの直下に移動できます。

Image from Gyazo

x座標に -(マイナス)を入れると親の左側に移動します。

Image from Gyazo

parent_IDを入れかえると別のparent_leafの下に子要素ごと移動します。

Image from Gyazo

吹き出しを小さいままで操作する時はleaf要素を経由して吹き出しにマウスオーバーしてください。

(仕様に慣れないうちは吹き出しがパカパカしてイライラするかもしれません)

Image from Gyazo
 

マークダウン 入力

吹き出しにマウスオーバーすることでマークダウン 入力欄が開きます。

Image from Gyazo

最初に開いた時は空白に見えますが、入力欄をクリックすると入力された内容が見えます。

目のマークをクリックすることでエディターモードと表示モードが切り替わります。

拡大ボタンで全画面表示することもできます。

入力後は吹き出し下にあるsaveボタンでsaveしてください。

(現在バグで吹き出し左上の吹き出しを閉じるボタンでもsaveできます...)

またテキストのドラッグで選択する動作がウィンドウ表示だとできません。

(ツリーの移動判定になってしまいます、全画面表示だとドラッグ選択可能です。)

(でも、全画面だとsaveボタンがないので戻らないとsaveできない...)

5秒毎に自動でバックアップを取ってくれますが、DBに保存するためにちゃんとセーブしてください。

またバックアップの性質上、一度消したleafをもう一度作り直した際にバックアップから復元されることがあります。

文章を全て削除して5秒待つことでバックアップを削除できます。

画面上部のBODY SEARCHから検索できない文章はまだDBに保存できていません。

Image from Gyazo

マイページ

Userをクリックでマイページに入れます。

treeの編集、表示非表示、削除ができます。

Image from Gyazo

treeのEditを押すとtitle,descriptionが編集できます。

Image from Gyazo

deleteボタンでtreeを削除できます。

Image from Gyazo

privateなtreeをワンクリックで公開できます。

ワンクリックで非公開にすることもできます。

デフォルトは非公開になってます。

Image from Gyazo

検索機能

body search欄から本文をLike検索できます。

Image from Gyazo

すべてのleaf移動入力欄

左上の入力欄からすべてのleafを個別に移動できます。

最初にleaf-IDを入力します。

その後上からparent-ID、x座表、y座表となっている部分を変更することで移動できます。

Image from Gyazo

パスワードリセット

LoginページのForgot_password?をクリック

メールアドレスを入力するとメールが送られます。

Image from Gyazo

メールに記載されたリンクからパスワードをリセットできます。

Image from Gyazo

ユーザー編集、削除

My_treesからEdit_userをクリック

emailとpasswordが変更できます。

ユーザーを削除することもできますが、投稿した全てのtreeが削除されます。

注意して利用してください。

Image from Gyazo

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?