現在のDEMO

サンプル(1/28時点)

ポジトリはここ(1/28時点)

最終目標

(線を出したり単語をジョイントするのは技術的に難しいので)表示した単語を分類できるのが目指す完成形です。
もはやマインドマップと言えるかは怪しいですが致し方ない、私の技術不足です。

• （↓最低限の機能）
• 単語を分類できる
• 中央の単語を設定するポップアップを作る
• 画像として書き出すことができる
  
• （↓欲しい機能）
• テキストとして書き出し(リストタブで順番を変えられれば……)
• ページ内容の一時保存(LocalStorageで対応できるか検討)
  (たった一回の再読み込みで全消しは辛いので……)

目的

何に使いたくて作っているのかと言うと、小説やレポートを書く際のネームやプロットを組み立てるのに使いたいのです。
思いついた話題やストーリーを順序を気にせずに書き出して並べ替えたい、というのがそもそもの発端です。

(画像をインポートできるようになれば簡単に「フォロワー分類してみた」とかできそうなんですが、それはそれで託します)

機能の解説

ホーム画面

左側がキャンバス、右側がツールバーとなっています。
アイコンやタイトルはまだ何も考えていないので(仮)です。

偉そうにショートカットも書いてありますが現時点では一切機能しません。

ツールバー

上から

• メイン操作
• 保存(PNG書き出しに対応予定)
• 操作方法(まだ空白)
• 不具合報告(GitHubに遷移予定)
• 入力した単語の一覧

になっています。

大まかな進捗

本日は12月7日です

「単語をクリックで取り出して中身を書き換える」ってのがやりたかったのですが、「bindでクリックした値を取り出す」までしか理解できず断念。一体どうやって中身を書き換えれば……。
(indexを引っ張ってきてTextareaを繋ぐ…?)

「ドラッグアンドドロップで掴んで移動させる」の実装に移行。
ライブラリを使わずにコードを書くようにしてきたのですがdragイベントの概要がイマイチ掴めず外部ライブラリを使うことに。

interact.js

機能がシンプルそうなライブラリを発見したので導入。
(せっかくPreviewコンテナとか作ってクリックした単語を取り出せるようにしたのに機能しなくなりました……南無)
ドロップインなどのサンプルコードがあったのでそれを利用して分類を組み立てることに決定。
mouseupされた場所によって違う属性を追加して判別する、という実装イメージ(とてもふんわり)。

本日は12月14日です

ドロップインできるスペースを1~3の可変にしました。
要素を作って、スタイルを当てているだけです。
(作った要素を消すのに苦労した)

色はこれから彩度を落とした色になります。

本日は12月21日です

1.ドロップインした際に受け入れ先の色が若干変わるようにしました。

2.単語を消せるようになりました。

右クリックすると削除メニューが出ます。

3.Main Termのモーダルウィンドウを作りました。

現時点ではMain Termのみ反映可能です。

Sub Areaのテキストは背景の左端にグレーで表示を予定しています。
Term Listタブ内に各spaceごとのタイトルを表示できるように改良予定。
それが完了したら背景色の変更、PNG書き出し、操作方法のページを作って完成にしたいと思います。(不具合報告、ショートカットは削除します)

本日は12月22日です

1.背景色が選べるようになりました。
（HTMLのカラーピッカーを利用しています。）

2.その他軽微な修正

本日は12月27日です

背景に文字が出るようになりました。

これを元にTermにClass名を追加していくのですが、それがまた厄介そう……やれるところまでやります。

本日は1月8日です

一応エリアごとに別の場所に格納するという実装はしたものの、動作に不具合が多く出てしまい、修正するか葬り去るかの瀬戸際になりました……。
主にはエリア変更後の再代入がうまく行かないという状況です。
for文の動作に不慣れで原因すらよくわかっておらず、修正するにもかなり時間がかかりそうなので、一先ずこのまま。
先に画像書き出し、テキスト書き出しの実装を進めていきたいと思います。

本日は1月10日です

ロゴとファビコンを作りました！(ついでに命名した)

使い方の説明がイマイチだったので解説周りを整備しました。

本日は1月11日です

1.PNGで書き出せるようになりました。

html2canvas

こちらの外部ライブラリを使用させていただきました。

DOMを解釈してcanvasに描画しているらしいです。
CSSプロパティ一つ一つ描画に反映させるコードを書いているそうです(すごい)。

2.工数の都合によりLocalStorageの利用を諦めました。

これで最低限の機能が揃いました。
テキスト書き出しについては実現可能か試してみたいと思います。

本日は1月12日です

1/8に言っていたやつの修正が完了しました。
気合でなんとかしました。

テキスト書き出しのレイアウトと実装を急ぎます。

本日は1月14日です

結論から言うと完成しました。

ブログをしたためる気力もないくらいここ数日で消耗しました……条件分岐が難しかった……(余計なこだわり)。
もう３ヶ月くらい制作しているんじゃないかと思っていましたが、ひと月半しか経っていないんですね。非常に濃い時間を過ごしました。

本当にこんなことができるのか……？と思いながら制作を始めたあの日……(ひと月半前)。
始めた当初は開発が間に合わなそう(進級展に向けて作っていたのです)ならWPテンプレートでも作って誤魔化そうと思っていましたが、この世界にインターネットと優秀なブラウザと優秀なエンジニアとありがたい公式リファレンスの数々があったおかげで完成できました。映画ならスペシャルサンクスの欄に書いてます、感謝。

推しゲーの「刀剣乱舞-ONLINE-」も私が眼精疲労を蓄積させている間に6周年を迎えていました。頑張ったので日光一文字をください。

相変わらずGitHubのリンクから利用できますので、なにかのプロットを書く際に、いかがでしょうか(うっかりリロードしてしまっても責任は取れませんので、あしからず)。

[追記]遷移先ページに文字数と行数を表示できるようにしました。

本日は1月28日です

テキスト編集ページに利用していた「window.opener」が実機で利用できなくなってしまったので、ページの構成を変えました。

メインページの真下に編集ページを移動させ、ボタンのクリックにより移動できるようにしています。