Send to your Kindle ***マークアップのほうのエディター [#edcce2b5] 記法は括弧だけ。 それでマークアップ範囲作成。あとから範囲にスタイル付け。 括弧以外にカーソルで範囲選択をしても一時的な範囲を作れる。スタイル付けすると定着。スタイル付けしなければカーソル移動で消滅。 構造を崩さないようにするため、Rangeのstart-endは同じノードでなければならない。カーソルを使った範囲指定は構造を崩す可能性がある。 構造が崩れそうなときの対処… -崩させない。操作を拒否 -上書きして、矛盾するRangeを分割 一般的なWYSIWYGの挙動。同じスタイルが連続すると連結して1つになるようにして、やり直しをしやすくする。 -上書きされたほうのRangeを全て消滅させる HTMLレンダリングをする層と、テキストとRangeでできてる層の2層構造。 保存するのはテキストのほう。ただしテキストとRangeとスタイル選択で作ったページ/要素のパラメーターを送信、サーバー側でそれを復元して要素を保存。再編集時は要素からテキストを生成してそれを。 テーブルやリストを入れるなら、別の操作系になってもいい。 そういったものの呼び出しは右クリックやダブルクリックやショートカットキーで表示させた一覧から選ぶ。 1つの操作から1つの一覧表示。 →[[:i/テーブルはレイアウト用のテンプレート]] 他の方法で作られた複雑なページをこのエディターで編集するには？ ---- これをスタイル付け専用にして「スタイルエディター」という呼び方に。意味付けは使われないのでできなくていい。 RIGHT:[[:t/エディター]] [[:t/編集]] あとでまとめる。 ---- #contents *エディター [#u3a3ad48] // まとめ *[[:t/エディター]]より [#g02e3ef6] **未分類 [#z75d6578] あとで[[:t/エディター]]を追加。 // ***[[:i/]] ***全画面テキストエリア [#y02c1fa3] 全画面テキストエリアにフローティングなツールパレット。パレットは移動できなくてもいいが、移動できるならブラウザーに位置などの表示状態保存 広く見せる。 パレットを非表示にした上に全画面表示にすればテキストエディターっぽく。 ここでは明暗両方のスタイルテーマを選べるように ***FoldingElement [#z5a99e9c] 編集と閲覧を統合するなら、行や段落に属性を付けてフィルタリングできるように。 ・コメント/感想/スレッドモードよりの発言 ・見出し 見出しも属性の一つ とすると、ページ要素別のFoldingTextになる。 ---- FoldingElement ファセット・スイッチ化→選択してON/OFF→OFFになった要素が消える たくさんある要素ほど消したくなるので、スイッチは多い順に押しやすくする。 ***UI [#i03e8856] 3列 エディターの右にあと2列 左からエディター・メモとクリップ・関連情報プッシュ プッシュ用は自動更新・ユーザーにとっては読み取り専用 で、段落をドラッグドロップして列間を移動させたい。 3列目から拾い上げて、2列目に取っておく。 1列目からも2列目に退避しておいたり。 2列目から適宜1列目にドロップ。 この列は永続化される。利用者ページか、その下位に。 3列目にプッシュするときは最下行に。上にせり上がる。すると1列目と同じように下に伸びていくことになる。ユーザー視点だと1列目のあのあたりを考えていた時に見たのは…→思い出しやすい。 ***エディターと記法定義 [#f52c1f66] 記法を好きなだけ増やせるなら、括弧と選択のマークアップエディターとは相性が悪い →記法定義排除？リストから選んで利用。 →このエディターを使わない時のためにする？エディターと記法は両立可能だけど、「記法を排してシンプルにする」のには合わない。 ***書いてるときでも直近の見出しは常時表示 [#k127d4f6] ***%%編集ビューはシングルトン%% [#cf62bb1c] %%他の（Webブラウザー）タブで編集ビューを開くと既存のビューに統合、ページ2つ編集状態の同じビューが2つになる。%% %%横フリックで切り替え。%% ***隠し文字 [#gfec758b] つまりコメント 自分へのコメント、誰かへのコメント。 閲覧時に見えない・間隔も詰める。 ***括弧だけ記法 [#k888ecc5] に学習 括弧の中身→装飾の傾向を学習 自動判別。括弧を閉じたり括弧書きをタップしたときの選択作業を自動化 ***書けば伸びる [#v112c0b4] 縦に 画面いっぱいに伸び切ったら見えなくなった側をフェードアウト、端ではないことを示す ***再編集の仕方 [#e33d74ab] 体裁をつけたあとは編集しづらい キーボードは文字編集と括弧付けだけ。体裁パレットはあくまでタップ/クリックで表示/非表示 ***フルスクリーンになったら余計なものを隠す [#k7ed365d] → [[:i/参考に/Fullscreen API]] これとは別にブラウザーでのF11に対応するためScreen.WidthとWindow.innterWidthが一致しているかどうかも判定しないといけない？ ***テンプレート使用時はプレーンエディターでいい [#t5c9287c] リッチなほうを使えたらそれに越したことはないけど。体裁はテンプレートの方にあるのでこっちでは必須ではない。 ***見出しドラッグでFolding [#n110ebe8] [[†:TaskPaper]]のように。 ドロップすると展開。戻る。 RIGHT:[[:t/UI]] [[:t/Folding]] [[:t/編集]] ***スタイルギャラリー [#q9c5e1e0] 色を選ぶ・太字や斜体にする…ではなくいろいろな体裁を並べたプレビュー集にする。 †[[http://kachibito.net/web-design/css3-text-shadow-sample.html]] 一列に並べて。列を増やしたりも。新しい列には利用者が自分で配置。 ***参考に [#b90bc08f] [[range - DOM | MDN>https://developer.mozilla.org/ja/docs/DOM/range]] **マークアップエディターとクリーンエディター [#neab7dcf] 「スタイルエディター」と「マークアップエディター」のほうがいいかも知れない。 ***マークアップのほうのエディター [#edcce2b5] 記法は括弧だけ。 それでマークアップ範囲作成。あとから範囲にスタイル付け。 括弧以外にカーソルで範囲選択をしても一時的な範囲を作れる。スタイル付けすると定着。スタイル付けしなければカーソル移動で消滅。 構造を崩さないようにするため、Rangeのstart-endは同じノードでなければならない。カーソルを使った範囲指定は構造を崩す可能性がある。 構造が崩れそうなときの対処… -崩させない。操作を拒否 -上書きして、矛盾するRangeを分割 一般的なWYSIWYGの挙動。同じスタイルが連続すると連結して1つになるようにして、やり直しをしやすくする。 -上書きされたほうのRangeを全て消滅させる HTMLレンダリングをする層と、テキストとRangeでできてる層の2層構造。 保存するのはテキストのほう。ただしテキストとRangeとスタイル選択で作ったページ/要素のパラメーターを送信、サーバー側でそれを復元して要素を保存。再編集時は要素からテキストを生成してそれを。 テーブルやリストを入れるなら、別の操作系になってもいい。 そういったものの呼び出しは右クリックやダブルクリックやショートカットキーで表示させた一覧から選ぶ。 1つの操作から1つの一覧表示。 →[[:i/テーブルはレイアウト用のテンプレート]] 他の方法で作られた複雑なページをこのエディターで編集するには？ ---- これをスタイル付け専用にして「スタイルエディター」という呼び方に。意味付けは使われないのでできなくていい。 ***クリーンなほうのエディター [#ta4002d8] [[†:FoldingText]] こっちを「マークアップエディター」と呼ぶように。記法が有効になる。 **エディターの問題点 [#kdb04fee] ***記法や要素はネストしている [#g40f70c3] ネストしているので、全体を一度にHTML変換→全体を再描画しないといけない。 最上位の要素が中身を全て持っていることになる。それらのコンテキストを作るのも最上位。ネスト構造のコンテキストは連動する。 最上位要素だけは外して、エディター側で偽物を用意すれば部分的に描画できる。最上位要素は決まっているので用意する偽物は1つだけ。でも相変わらずネストしているものはまとめて描画。 *エディター/ [#l96d3772] #ls
