言わせて

自分の活動(音楽、プログラミング、ゲーム)や考察、日誌などについてのブログです

HTML5のContentEditableでちょいリッチなテキストエディタを作った

テキストエディタを作った

HTML5には、Contenteditableという属性があります。

これは、divやbodyなどの要素に以下のように適用すると

<div contenteditable='true'>ここは自由に書ける</div>

この中身が通常のテキストエディタのようにクリックするとカーソルが出てきて中身を自由に変えられます。

Google Chromeなどのふつーの有名ブラウザなら、contenteditable内はctrl+Bで太字にしたり、ctrl+Uなどで下線を付けたりして文字を装飾することが可能です。

これをうまいこと使って自分好みのテキストエディタを作りたいなぁと思い、ちょっと前にemakinoteという名前のcontenteditableを使用したテキストエディタを作りました。

https://ry0um4.sakura.ne.jp/App/emakinote/index.html

推しポイントとしては
・書くまでの時間が短い
・終了に時間がかからない
・雑に書ける
・セクションを高速で作れる
・シンプル
という感じです。

書くまでの時間が短い

Atomなんかは書きかけで閉じて再起動しても残ってたりするんですが、プラグインとか入れてるとどうしても起動に時間がかかる。思考は速さが大事だからこれだと調子が下がるんですよ。

終了に時間がかからない

このツールが想定しているのは、競プロや授業中、あるいは考え事をしている時などに、頭だけではうまく整理できない事をこのエディタに書いておき思考を捉え直す、といった利用法です。

そのため、このエディタには保存機能が備わっていません。以前は付けて見たこともありましたがデバイス間での共有が難しいしそこまで使わなかったのであえて外しています。

考え事のためにしたメモとかって、フツーのエディタだと閉じる時にいちいち保存するか否か聞いてくるんですよね。メモ帳は保存する時にいちいち「保存しますか?」と聞いてきてうざったいと思っていた悩みが解消されました。

もし保存したい時はGoogleドライブやOffice 365などのクラウドでドキュメントやWordにコピペすればいいです。

雑に書ける

contenteditable様様なんですが、普通に Undo・Redo機能がついてるので安直に消したり書いたりできるのが嬉しいです。
また、雑に他サイトからコピペすると、スタイルなどがそのままコピペされるので見栄え的に遜色なくかけたりします。画像でスクショしてから書くよりも手間が少ないし、「紙のテキストに書き込んだ感」があって良くないですか?(ちなみに画像のコピペもできる)
この辺は本当にcontenteditableの許容の広さですよね。

セクションを高速で作れる

他では見ない機能として、ctrl+Enterで新しい区分け(横線と見出し代わりに作成した日付を表示する)を追加できるようにしていて、いちいち別のテキストエディタを起動してとっさに別の事を書いたりするときの手間を減らす事ができています。
セクションを追加するときにカーソルを自動で新セクションの部分に移すようにしたのですが、これの実装がなかなか曲者でした……。

シンプル

・ショートカットではなくマウスを使う人向けに、全消去、新区分けと言ったボタンをヘッダーに付けていたりと割と親切のつもりでデザインしていますが、それいがいに何か特別な機能を付けたりはしていません。
・競プロ用に等幅フォントのNoto Sans Mono Japaneseを使用しています。これは僕のHP全体に適用しています。
・灰色の地にかなり濃い灰色で書いているのでコントラスト差が少なく長時間書いても疲れにくいはず。
contenteditableでない所は背景が黒くなっているので、どのくらいの分量のものかも一目で分かったりしてサイコーです。
というわけでかなりシンプルです。


新バージョン

そんな感じで長い事自分でつかっていました。そのうちに勉強がてらPWA
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
にも対応させたりしました。(と言ってもほぼ検索して出てきたサイトのコピペですが……)

で、今回この記事を書いているのは、一つ機能を追加したものを作ったからです。
emakinoteには、色々あるけれど、これだけはどうしても譲れない不満が一つありました。
「思ったよりも装飾のショートカットを押すのがめんどくさい」って事です。
 同時押しとかかったるくてやってられないし、何より一部だけ太字にしたりするにはその前にShiftと矢印キーで選択しなくちゃならない。色変えたり字を大きくしたりするにはショートカットだけだとちょっと足りない。
 やりようはあるんですよ一応。他のサイトから好みのスタイルの字をコピペすると、その装飾で打てるようになったりします。面倒なんですけどね。

これを解決したのがこちらのemakidashtxtになります。
https://ry0um4.sakura.ne.jp/App/emakidashtxt/index.html


どう解決したかというと、個人的に欲しいと思った装飾をいくつかピックアップして、「ボタン一つで」スタイルを切り替えられるようにしました。
使うのはaltキーです。(まあ特殊文字なんてそんな使わんでしょ)
ヘッダーにスタイルボタンを追加して、今の文字装飾スタイルと、押すと次のスタイルに切り替えられる
ようにしてあります。
ポイントとしては、一定時間(これを書いてる時点では6秒程度)打ち込まずにいると、勝手に標準スタイルに装飾を戻してくれるという所です。
細かいポイントですが、altキーでそれを行なった場合は勝手に戻ってくれるのですが、ボタンをクリックして切り替えた場合は時間が経ってもスタイルは戻らないようにしてあります。こうする事でいちいちボタンを押すためにマウスやトラックパッドを押さずにすみますし、強調が終わったなら打ち込まずに待つか一巡するまで連打してやればいい、というシンプルな操作になります。
僕の思考の癖なんですが、勢いよく考えを書いた後、しばらく眺めてまた書く、というふうな繰り返しで行われるので、もし強調がついたまま続くと主張のイメージと装飾の強調度がうまいこと一致せず、もやっとしてしまいます。それを避けているんですね。
ね、便利でしょ?
いちいちショートカットなんて調べてられないと思ったのでこうしています。

思いの外実装は楽で、なんとWebAPIにはexecCommandというものがあるんですねぇ。これが本当に痒い所に手が届く機能で助かりました。
Document.execCommand() - Web API | MDN

実装もボタン用素材と数十行の追加ですみました。何より作るのに時間があまりかからなかったのが良いですね。よかった……
他の点はemakinoteと同様だったりします。



欲しい機能

・一行に書く分量が短い割に、画面いっぱいに広げていると、どうしても右側に何も書いていない空白のスペースが出来てしまいます。情報を一覧したい場合に不便なのでなんとかしたい。(分割表示的な?)
・音楽とかやってるので音を出せるようにしたりしたい。コード名を書いたらそのように音を鳴らせたりすると面白そう(これは別の形でやる可能性がある)
・execCommandをもっと活用したい。調べてみたら色々な機能があって、まだまだ活かせそうな事がある予感です。
markdownとかTeXの数式機能とかを、入力した後すぐに反映されるように実装できたらかなり楽が出来るのでやってみたい。



ぜひ使ってみてください。

物語についての考察

#19/3/2019 19:23:35 Tue
物語は、進行とともに絶えず変化するものである。その変化の仕方には以下の6パターンがあると思われる。下のものほど影響範囲が広くなり、上のものほど影響力が大きくなる。
・関係の変化
・創出による変化
・導入による変化
・周期の変化
・干渉に伴う変化
・経過に伴う変化
接続詞を分けたがこれは以降で述べる脚本論の3要素との対応を試みたものである。

 

それぞれの変化が何を指しているかは、次に示すプラレールを用いた例が如実に表してくれた。
・走ったり止まったりしている車両の位置関係
・レールを走る車両を組み替える
・新しい車両をレールで走らせる
・レールがループする
・レールを組み替えたり車両を止めたりする
・電池切れや劣化、色褪せなど

 

脚本とは
・物理法則にしたがえばキャラは(車両は)どう動くのかのシミュレート(周期、関係)
 ・世界観はこの物理法則や生態系などの科学的観点による知識体系をまとめたものであるといえる
 ・この部分は世界観を設定している場合はほぼ自動的に存在させられる。考えるべきはそれを作中でどう見せて、キャラにどう観測させるかという事である。
・いつどのタイミングで創出したり関係を変化させるような行動をとらせたり新概念を導入したりすると、「脚本家の思い通りに事が進むのか」を描写(創出、導入)
 ・いつどのタイミングで車両を組み替えたりどのレールを走らせたり新しい車両を追加したりすると、「遊ぶ人の思い通りに事が進むのか」
・時間経過や干渉(飽きてきたり、二次創作をしたりなど)が起こる時に、どういう対応をする(シナリオにする)と「脚本家の思い通りに事を保つ事が出来るのか」(経過、干渉)
・飽きてきたり、意図的にレールを組み替えたり車両を止めたりするような遊ぶ人の干渉が起こる時に、どういう対応をすると「遊ぶ人の思い通りに事を保つ事が出来るのか」
を記述したものである。

 

脚本家は何をしたいのか
=作る脚本によって受け手にどうしてほしいのか
例えば、「このコンテンツを応援してほしい」とか「老人観なんてのは幻想にすぎないって気づいてほしい」とか「知らぬ間にヤバいものを食べる気持ち悪さを感じてほしい」とか「作者にお金を払ってほしい」とか「動物と仲良くしてほしい」とか「俺にお金を払ってほしい」とかね

 

「何をしてほしいのか」からキャラクターを作るには?
⇒「してほしいこと」の存在をキャラクターの存在によって物語らせよう
・「してほしいこと」をしているキャラクターを用意する
・「してほしいこと」をまだしていないキャラクターを用意する(主人公)
・「してほしいこと」に協力するキャラクターを用意する(主人公の仲間など)
・「してほしいこと」をしないキャラクターを用意する(敵?モブ?)
・「してほしいこと」を好まないキャラクターを用意する(敵?)
・「してほしいこと」に好ましいキャラクターを用意する
・「してほしいこと」を魅力的にするキャラクターを用意する
・「してほしいこと」をしていたキャラクターを用意する
・「してほしいこと」をしてほしがるキャラクターを用意する
・「してほしいこと」に関係のあるキャラクターを用意する
などなど。
これらは当然ながら、1人が複数を兼任している場合があるし、他にもいくらだって存在しうる。
あとはそれぞれの属性について、有効な視点や記録目標を保持するように決定し(これの決定の仕方がまだよくわかってない)、詳細や細部の情報を作り上げる事でキャラクターを作る事が出来よう。

 

キャラクターを形にする
・キャラクター=任意のモノについて視点と記録目標を保持する存在
 ・ある視点を持つこと、ある記録を持つことは別の視点を持たない、別の記録を持たないという事なので、それが原因で好みや苦手なもの弱点や癖、スタイルや身だしなみ、将来の夢、習慣や人間関係などが決定される。
 ・視点と記録によるキャラクターの決定は抽象的であるが故に様々な場面で(とくに未経験であるようなものに対して)一貫した行動をとる事が出来るというメリットがある反面、ある程度厳密に文章にした方が効果が高く、真価を発揮するには難易度が高い気がする。
 ・記録は経験量の差を示す事にもなる。人の差はセンスと経験であるとするなら、視点と記録を持つべきである。
・キャラクター性=視点と記録目標のキャラクター間での相違がどれくらい起こるか。起こりやすいほどキャラが「たっている」といえる。キャラが立っているほど覚えてもらいやすいし物語の変化において各人がどう行動するかという場面で多様性がもてる。
・キャラクターの挫折→視点や記録目標が適切でなかったため環境に適応できなくなり意気消沈してしまった状態。視点や記録目標を変えるきっかけを何かによって与える事で、視点や記録目標を変容させ、物語を進める。
 ・挫折といったが、キャラ同士の衝突や技能的な失敗、あるいは飽きてやる気を失う等、程度の違うものでも同様である
・キャラクターの行動や意思決定そのものは設定しない。そんなの決めたって意味がないし、描写する我々がその都度意思決定でもって行動させるのだから。また、性格などでキャラを語らずにいる事で、作者の思考や視点の癖が作中に色濃く出る事にもなると思われる。そこにこそオリジナリティがある。

・現代ではメディアミックスが前提にあるのでビジュアル的な細部も設定する事が望ましいとされる気がする

 

世界観はどうやって作ればいいのか?
「してほしいこと」は脚本家由来の世界観が引き起こした欲求、あるいはとある世界観に触れる事で生じた欲求である
だから、「してほしいこと」が決まったら、その欲求を引き起こした原因、および原因となった環境について調べてみるとよいだろう。
そして、仮に現実がその原因であるならば、欲求に関係のなかった現実の要素を排除しておけば完全にフィクションとして機能する。
排除した後の空洞は、描写を避けたり、よりその欲求を持つに好ましい環境や原因へと改変して描写したりすればよい。
また、直接的にその原因を作中で用いたくないのであれば、それと同等のことや比喩によって代弁してもらうという方法がとれる。
あるいは、空洞には個人的な趣味の入る余地もあるので、それによって個性的な世界観を表すことだってできるだろう。複合的な「してほしいこと」を持っていれば(たとえば「その土地の魅力を知ってほしい」など)、それを利用することもできる。

言い換えてみる

一つめ

脳には「外界と内界によって入力をもとに出力を適合させる」と言う側面と「入力と出力によって外界をもとに内界を適合させる」と言う側面があるのではないかと

この二つが必ず行われることによって人間は正常に動くことができるのではないかと

十分な睡眠をとる事は外側の適合させる対象を無くすことによって適合させようとする働きをやめさせることではないかと

一日の活動による適合させようとする働きをやめさせるには8時間程度の睡眠が必要なのではないかと(だから寝る前に端末を弄るのは余計に時間を掛けさせることになるのではないかと)

何かに適合しようとしている時の脳の方が何もない時の脳よりも、別のものに適合させようと言うときに余計に時間がかかるのではないかと

そこで時間がかかるために、睡眠に関する実験などで認知テストの成果を見て、効率が下がった、すなわち「認知能力がさがった」と言う判断が下されるのではないかと

早起きをするのは朝の予定に間に合うためで、早寝は健全に明日の予定を過ごすのに十分な睡眠時間を確保するためなのではないかと

二つめ

情報にも強さって尺度があると思うんですよ

強い情報ってのは認知に短い時間しか掛からないもの。例えばサイン波の音など。

弱い情報ってのは認知に長い時間を要するもの。極端な例はホワイトノイズなど。

強い情報は強いので非常に飽きやすいが情報として認知しやすい。弱い情報は弱いので飽きないものの情報として認知しづらい。

創作だと「作品内で情報をかせぐ」と言う言い回しがありまして、これってつまり強い情報を増やす(強い情報で情報量を増やす)ことなんじゃないかと

だから神は細部に宿るのではないかと

三つめ

何を知覚して・何を記憶したか、と言うことで物事に対しての立ち回りが作られるんじゃないかと

ネットや世間に蔓延る方法論をそのままやったって長続きしないのはただそれをやった・やり続けたからって、知覚するものや記憶するものが変容しないからではないかと

それで上手くいってるとすれば何処かでたまたまその両方がそれぞれ変容した・自力で変容させられたから(つまりまぐれ)なのではないかと

「ある知覚をしてあるものを記憶した結果」、「ある行動が生じある効果が認められる」のではないかと

これの後者ばかりが書かれているので方法論を論じる文章は大体そのままじゃ使えないのではないかと(「〇〇ができる人(ある効果が認められる人)は〇〇(ある生じた行動)をしている!」系の記事はそういう相関を取っている所に価値があるだけなのではないかと)

物質に頼ったり道具に頼ったりする場合は前者は必要ないので大体の場合方法論として使えるものになるのではないかと

本当は物質的なものでない場合は方法論よりも知覚や記憶に関しての道具が必要なのではないかと

 

 

2018年の活動

※HPに載せてたもののコピペです

2018年の活動報告

・4月ごろに第一回チュウニズム楽曲公募に「Overflowed Memory」を出すも落選。

・ゆいのあさん主催で企画されたにゃーんEPに楽曲「buttered paradox」を出す。コミケに曲を出したのは初。

・G2R2018にチーム「都会大岡山」で参加した。おおやけのBMSイベントに参加したのは初めてになる。
個人戦スコア部門では23090点で370位/415人(エース補正ありだと377/415)、中央値部門では882点で366位/415人となった。
27人からインプレをもらい、6人の人が投票してくれた。(ありがとうございました)

・wauさん主催の一分楽曲企画「あみにゅーつ」に楽曲「Mingling with the sounds」を出した。チップチューン的音が好評だったらしい。

・その他、作成した曲も合わせると、去年は22曲をカタチにしたことになります。2019はよりスピードを上げていきたいですね。

G2R2018

BMSイベント「G2R2018」に 「Track The Magics」という作品で参加しました。

試聴用→ニコニコ Youtube Soundcloud

考察諸々のまとめ

#5/2/2019 16:58:58 Tue
 
・不要な道具は無害
 ・大学や仕事で創作に関連しないことをやっていても、創作に支障は出ないってこと


・意思決定はジレンマを解消する力(一時的な衝突を解消する力)
 ・断捨離、バランス変更、住み分けと言った対処法がある


・ダラダラと何かをやる→意思決定を迫られ続ける→辛い
 ・個人であればダラダラしても問題ない(個人の問題として置いておける)が、多人数の企画等では余計に辛い(社会的な問題になる)
 ・衝突を避ける方法の一つが「時間の助けを借りる」ということ(∵時間の前では論理的矛盾(衝突)は無効)(「住み分け」に該当)
・時間の助けを借りるならば、創作・生活共々を委ねなければならない


本来は、時間の助けを借りるというポジティブな名分でスケジュールを立てるのに、それが上手く回らないのはなんでかといえば、
時間の助けを借りる必要がなくなってしまうからなんだよな。スケジュールの最初に取りかかると、その時点で衝突がないのでスケジュールを守る必要がなくなる。
そして気がつくと今度は別のもの同士で衝突しジレンマが生まれる。
常に別の事を考えるために衝突が収まらない、結果的に意思決定しない方がコストを割かずに済む、意思決定を迫られまくる方がいちいち助けを借りて対処するよりも楽で簡便に済ませられる。
でも、いい加減迫られることが辛くなってきた
そういう風に考えるのは創作の時だけでいいから、なんとか日常生活は普通にスケジューリングによって達成されたい。せめて生活だけは
でも、生活だけは守るとか言ったって、結局そこには「創作活動」と「日常」のジレンマが現れる。

ホームページを変更しました

移行した時のことを記録する目的で記事を書きます

前のサイトは残しておきますが、おそらく何もしないでしょう

 

移行先はこちら

http://ry0um4.sakura.ne.jp/

 

移行前はこちら

http://kurokosmos.web.fc2.com/

 

移行した理由は次のようなもの

そろそろ独自ドメインのページを持ちたい

 書いてる段階ではまだドメインを取得していませんが、それはまだ短いことによるメリットがそれほど大きくないからです。短いと覚えやすい・パッと見て認識できるなどのメリットがありますが、それは多分、リアルイベントにて名刺交換をするときに役立つくらいだろう、という予想でいます。

 

CGIなどを使ってインタラクティブな・DBをもてるようなサイトにしたい→実験的なことをしたい

 Pythonをかじったのでなんらかの形で活用したい、というのがあります。

 

自分のポートフォリオ的な役割をもたせたい

 前のサイトでは一応なんらかの「組織」的な感じでいましたが、実態がわからない以上自分でも自分のことが分からなくなっていたのでやめたい、活動するのは現状自分一人だから、個人的なサイトとしてやっていくほうが締まりがいい。とか考えてます。

 

お金払えば更新とか多少は力入れるやろ

 まあもったいない精神です

 

ドメインは使われてなかった

 これは別に移行しなくてもいい理由ですね

 

サイトのデザインに飽きた。もっとわかりやすいものにしたい

 前のサイトはフッターにfc2のリンクがあり、無料スペース特有の制約のためにリンクを上に固めていましたが、流石に下半分を空白な状態では見栄えも悪く、アイコンもちょっと控えめだったんですね。

 

元サイトのコンセプトがはっきりしない

 なんだよクロコスモスって、となりあやふやな基盤で活動を続けることに自信がなくなりました。 現在の元サイトを見るとわかると思いますが、明らかに私用スペースになっていたところがあり、誰が見ても得をしない(自分でも得をしなかった。書いたのがかなり前で、そんな時のTODOリストは見た時に使えないから)状態でした。

 改めて定義すると、自分がしたいことは「自分を知る・知った人に気持ちよくなってもらう」ことでした。そこで、自分を前面に押し出したサイトデザインにして、その中で自分の好きな開放的で静寂感のある少しレトロな気持ちのいいコンテンツを出していこう、ということで進めることにしました。

 

というわけで、さくらインターネット様の一番安価に始められるプラン( https://www.sakura.ne.jp/lite.html )を申し込みました。(これを書いてる時はギリギ2週間の無料体験期間中だった)

大手だけあって、設定の仕方などの説明も十分にわかる形でされており、非常にやりやすかったです。

 

また、移行した現在、僕はサイトに以下のことを期待していますがこれは僕が確信をもたずにごまかして主張していることです。要約すると自己管理がなってないって話です。ええ。 

 

生活や活動がもっと円滑に進められるかもしれない・習慣も変わるかも(もっと規則正しくなる?)

 サイトの更新を別の仕事が増えたという風に認識することがないように生活することが求められているという話ですね。

 

ゲームとか技術的なこととか学習内容とか、サイトを通してそういうのを実生活上でも充実させたい

 ブログタイトルにもある通り、僕はゲームに関心があり、また自作して売ってみたいとも考えています。しかし現状色々な物を他のことに使っていて全く手がつかない状態です。これを変えられたらなと思います。

 

絵やデザインをやれるかもしれない

 現状ですら両立ができていないのにさらにやりたいことを増やそうとしています。このままでは破綻します。

 

統一感を出して一貫性のある表現ができるかもしれない

 統一感に必要なものは論理性です。サイトを移行したことと統一感がでることの間には論理的な繋がりはありませんが、コンセプトを考えたのをキッカケに、ここでの人称は何がいいか、漢数字を使うべきか否かなど、そういう細かいところから全体の方針まで決める習慣がつくといいなと思っています。能力的に色々なことができる以上、自分から切り捨ててデザインしていく練習が必要なのだと思います。

 

言葉にしておくと色々捗っていいですが、あまり抽象的な話をするとメタ思考の深みにはまって死ぬのでほどほどに具体的に書かなくてはなぁと思うこの頃であります。

 

コーダーの成長要素について考察および自分語り

最近、AtCoderのコンテストに参加するようになって、自分のコーディングの癖がどんなものなのかについて少し考えて見た。そして、次のような仮説を作るに至った。

コーダーとしての成長段階(および異性へのアプローチの方法):
⓪知覚-選定-(相手を見定める)

 ・問題の本質を理解できる。
①行動-実装-(相手にアプローチをする)

 ・問題を解決できる。
②学習-洗練-(自分がきれいになる、愛想よくする、はっきり喋る、リアクションを取るなど)

 ・実装に無駄がない、デバッグがしやすい、判断しやすい等の特徴を持ったコードがかける。
③知識-同調-(相手の好みに合わせる)

 ・アルゴリズム、言語やPCの好み・癖を知り尽くし、問題に対して最適な手法で取り組める。

 

・上の仮説を作った後で、『「自分の得意なものは………です」なんて言うけど、それって単なる順序の違いを表したまでで、一定レベルまで行く人はどれについてもレベル相応の能力があるんじゃないだろうか』と言う考えに至った。

 

・どうも自分は選定・洗練・同調せず、実装のみをするコミュ障らしい。(上の考えによれば、実装から始めがちであるという話だ)

選定しないから誤解される(する)し、洗練しないから避けられるし、同調しないから好まれない。

・パソコンはスペックが上がったことによって洗練と同調についてある程度目をつぶってくれるようになったから、実装でゴリ押しても生きていけてるんだろうなとも思う。