24APR.
みんなが見ている注目記事
カーソル位置にマーク文字を入力し「HTML表示」編集枠を開く / JavaScript
…選択・特定しますがJavaScriptでも以下の書式でセレクタを使って要素の取得が出来ます。document.querySelector(' ここにセレクタを記述 ').click();「HTML表示」のボタンは「 button[data-mode="source"] 」という属性セレクタで特定できるので、このボタンを押すコードは以下になります。document.querySelector('button[data-mode="source"]').click();マーク文字の入力から「HTML表示」を開く流れ「Ctrl + F8」を押し、カーソル位置にマーク文字を入力し、その次に「HTML表示」の編集枠を開く動作は、単に上記のコードを並べて追加するだけです。前ページのコードは、スクリプトの動作を調べるために「alert()」関数を置いて、ダイアログを表示して一旦停止していました。 そこで「alert()」を上記の「.click()」関数に置き換えると、一旦停止せずに「マーク文字の入力」→「HTML表示を開く」という流れが実現出来ます。下図は、ここまでのスクリプトの関数の構成を整理したものです。「OPEN SOURCE」が今回追加するコードです。最も基礎になっている関数は「catch_key」です。「catch_key」は最初の大枠で一度実行され、下の枠は「HTML表示」⇄「通常表示」の移動後にも再び「catch_key」が実行される様に「monitor」で呼び出す仕組みです。 これは、「HTML表示」→「通常表示」のスクリプトを全く別個に作るとすれば不要になりますが、それは先の問題で、とりあえず置いておきます。「catch_key」の内容は、常にショートカットキーを待機する「keydown」関数です。 この関数がショートカットを受け取ると「set_mark」関数を起動します。「set_mark」関数は、カーソル位置に「insert_node」でマーク文字を書き込みます。 それが終わると「OPEN SOURCE」の「click()」関数が実行され「HTML表示」編集枠を開きます。ここで「catch_key」関数は終了します。 上の構成では、再び「通常表示」に戻った所で再び実行され、ショーカットキーの待ち受け状態になります。マーク文字を入力し「HTML表示」を開くスクリプト下は「Tampermonkey」にここまでのコードを登録したものです。// ==UserScript==// @name Ameblo Writer Extension11// @namespace http://tampermonkey.net/// @version 0.1// @description マーク文字を入力し「HTML表示」を開く// @author PersonWritep// @match https://blog.ameba.jp/ucs/entry/srventry*// @grant none// ==/UserScript==( window.onload = function() {'use strict';var catch_key = function() {var editor_iframe = document.getElementsByClassName('cke_wysiwyg_frame');var iframe_doc = editor_iframe[0].contentWindow.document;var set_mark = function() { var selection = iframe_doc.getSelection(); var range = selection.getRangeAt(0); var insert_node = iframe_doc.createTextNode( "▋" );// U+258B range.insertNode( insert_node ) ; document.querySelector('button[data-mode="source"]').click();};iframe_doc.onkeydown = keydown;function keydown() { if (event.ctrlKey == true) { if (event.keyCode == 119) { set_mark(); }}};};catch_key();var target = document.getElementById('cke_1_contents');var monitor = new MutationObserver(catch_key);monitor.observe(target, {childList: true});})();「▋」のマーク文字は「普通には使わない文字」を選ぶべきと考えて、文字コード表から少し特殊なものを探しました。 横に伸びるバーに使う様な一連の矩形記号文字から「U+258B」（ユニコード）を選んでいます。 この文字なら、同じ文字が記事中に使われる可能性は少ないでしょう。 また、スクリプトの異常終了などで記事中に残った場合は、これなら発見し易いと考えました。太字のコードを追加しただけですが、無難に「HTML表示」の編集枠が開きました。次の目的のためにマーク文字を改善するその次に必要な事は、「HTML表示」の編集枠でマーク文字を探し、できればその位置までスクロールして表示する操作です。 それを実現出来そうな関数を調べて行くと、マーク文字にIDが必要な例が多数ありました。先の事は判りませんが、とにかく「▋」の文字だけではなくIDのあるタグ、あるいは中身の無い「IDだけの空タグ」でも良いのかも知れません。 これは先に考えるとして、マーク文字の代わりに「<i #mark>▋</i>」を入力するコードに改めることに。最初は「insertNode()」関数の部分を下の様に書換えましたが、みごとに失敗しました。var insert_node = iframe_doc.createTextNode( "<i #mark>▋</i>" );range.insertNode( insert_node ) ;ショートカットを押すと「HTML表示」へジャンプして下の様になります。 赤枠が入力したかったタグの部分ですが、通常表示で上の文字を記入した結果、「&」付きに変わってます。「 createTextNode( "<i #mark>▋</i>" )」で書き込むノードを作っていますが、これはテキストノードの書式。 「iタグ」は要素ノードで、これを書き込む方法が必要です。あれこれ試し、目的通りの「iタグ」が入力できたのは、地道に要素ノードを作る方法でした。(1)「 createElement("i")」で「i要素」の要素ノードを作成(2)「 createTextNode("▋") 」でテキストノードを作り「i要素」の子要素にする(3)「i要素」に「 setAttribute("id", "marker") 」でID属性を追加するこれを「 insertNode() 」でRangeに書き込むという手順で、まとめると以下です。var insert_node = iframe_doc.createElement("i");insert_node.appendChild( iframe_doc.createTextNode("▋") ); // U+258Binsert_node.setAttribute("id", "marker");range.insertNode( insert_node ) ;これで、首尾よく「 <i id="marker">▋</i>」が入力される様になりました。下は、「通常表示」で「Ctrl + F8」を押した直後の「HTML表示」編集枠です。「ID付きのマーク文字」をカーソル位置に入力するスクリプト以下のスクリプトが今回までの成果です。「Tampermonkey」に登録すると、カーソル位置に「i要素」が入力されて「HTML表示」編集枠が開きます。// ==UserScript==// @name Ameblo Writer Extension11_02// @namespace http://tampermonkey.net/// @version 0.2// @description ID付きマーク文字を入力し「HTML表示」を開く// @author PersonWritep// @match https://blog.ameba.jp/ucs/entry/srventry*// @grant none// ==/UserScript==( window.onload = function() {'use strict';var catch_key = function() {var editor_iframe = document.getElementsByClassName('cke_wysiwyg_frame');var iframe_doc = editor_iframe[0].contentWindow.document;var set_mark = function() { var selection = iframe_doc.getSelection(); var range = selection.getRangeAt(0); var insert_node = iframe_doc.createElement("i"); insert_node.appendChild( iframe_doc.createTextNode("▋") ); // U+258B insert_node.setAttribute("id", "marker"); range.insertNode( insert_node ) ; document.querySelector('button[data-mode="source"]').click();};iframe_doc.onkeydown = keydown;function keydown() { if (event.ctrlKey == true) { if (event.keyCode == 119) { set_mark(); }}};};catch_key();var target = document.getElementById('cke_1_contents');var monitor = new MutationObserver(catch_key);monitor.observe(target, {childList: true});})();「HTML表示」編集枠の方が難題かもしれないID付マーク文字を入力し、文字自体からでもIDからでも、マーク文字にアクセスが可能かと思ったのですが、これは大いなる間違いでした。「HTML表示」の編集枠は、見た目はソースコードが並んでいますが、ソースコードの通りの要素はそこにないのです。「通常表示」の編集枠には、書き込んだ「i要素」が本来の形で存在し、IDも意味を持ちます。「HTML表示」の側にあるのはソースコードという文字列で、実体は全て「テキスト化」されたコードの部品に過ぎず、書き入れたIDは、IDとして役にたちません。 下は「HTML表示」の編集枠を DevToolsで見たところです。書き込んだマーク文字の「i要素」は、徹底的に分解されて「span要素」の中に閉じ込められ、テキストノードだけが「"▋"」の様に織り込まれています。 ここで「marker」はIDではなく文字列でしかありません。「HTML表示」の編集枠は「textarea」であり、扱い易そうに思っていたのですが、かなり苦労しそうです。
PersonWriter's Room
出版イベント第一弾！「バイオリズム&オーラ診断を使った自分メディアチェックin奈良」のお
自分メディア 時々 宇宙
一般の方をお伝えする機会を見せる
週末、外部講師として講座してきました。 スタッフと２名で。 一般向け講座は滅多にやりませんので、その姿を見せるのは貴重な機会ということでした。 ところで、スクールで見せている姿と一般の方に見せている姿は違います。 「別人格ですか？」 と言われるくらいに全く変わります。 たまに勘違いされるのですが、スクールでの接し方そのままで一般の方にも接しているのではないかというもの。 そもそもスクールと一般の方向けは目的が違います。 目的が違うため、私の伝え方は変わります。 例えば、去る２月１０日の特別講習は伝え手に立つ側としての、そういう人のため、と位置付けた講習です。 その日も来て、今回も参加された方がいましたが、おそらく全く違う雰囲気に驚いたと思います。 ２月の特別講習では、伝え手として立つ側という意味合いがあったため、相当におっかなく、また突き放している印象を受けたと思います。 伝え手となる場合、伝え手はクライアントさんの支持点になりきれるかどうか？が大切であり、参加した方の気分などはどうでもよい話で、またモチベーションは自分でつくってきて当たり前で、私に乗せられなければできないというのは伝え手としての資質が０を意味します。だからこそその時は、私は参加された方を伝え手として扱い、伝え手としての立場で学びができるように全力を尽くします。 先日の講座は、自分自身に目を向ける、呼吸の素晴らしさ、奥深さ、そしてどれだけ自分に密接に関わり、どれだけ自分を活かす存在であるかを実感していただく事が目的です。だからこそその時は私のその世界に触れていただけるように、そのサポートができるように、できる限りの事をします。 前者の場合は、参加者を通した向こう側のクライアントさんを、その参加者がどのようにクライアントさんに接するのかをみています。 後者の場合は、クライアントさんを、クライアントさんが学んで家に帰った後どのようにそれを活かすのか？という姿をみています。 これが無理なく自然に出来るのが、私の資質の一つです。 そういうところがあるので、大体私に対しては「こわい」「やさしい」、「無礼な人」「礼儀正しい人」というな相反する評価がいつも同居しています。それは気分でそうしているのではなく、その目的に沿った姿に変わっているだけです。 ちなみに先日の講座では、講座後に参加された皆さんから、ありがたいことに一緒に写真を撮ってくださいと言われました。 こういうの、とっても嬉しいです。 この嬉しいという感情は個人的なもので、講座後だからこそできることですね。
学びの本質〜呼吸・整体〜
ブログを育てるのに、地方在住は関係ありません。
自分メディア 時々 宇宙
