Vue.jsでsimpleMDE
使う機会があったのでメモ。
Simple Mark Down Editor … Mark と Down で分かれるのが個人的に納得いかない。
simpleMDE公式はこちら。
simplemde.com
必要最小限の実装はこんな感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sample</title> <!-- simpleMDE --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> <!-- Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <textarea ref="editor"></textarea> </div> <script> document.addEventListener("DOMContentLoaded", function (event) { var app = new Vue({ el: '#app', data: { simplemde: null }, mounted: function(){ this.simplemde = new SimpleMDE({ element: this.$refs.editor }); } }) }); </script> </body> </html>
Vue.jsでの実装なので、textareaにはidの代わりにrefを設定。
ただしこのままだとデフォルトでスペルチェックが有効になっており、全角文字はエラーにされてしまう。
また、公式ページのデモでプレビュー確認すると見出し(# で書いた部分)に下線がつくが、これではつかない。
ということで解消したのがこちら。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sample</title> <!-- simpleMDE --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> <!-- Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <textarea ref="editor"></textarea> </div> <script> document.addEventListener("DOMContentLoaded", function (event) { var app = new Vue({ el: '#app', data: { simplemde: null }, mounted: function(){ this.simplemde = new SimpleMDE({ element: this.$refs.editor, spellChecker: false // スペルチェックを無効にする }); } }) }); </script> <style> /* 見出しに下線をつける */ .editor-preview h1 { border-bottom :1px solid #eee; } /* プレビューの背景を白にする */ .editor-preview { background-color :white; } </style> </body> </html>
スペルチェック自体が不要なので無効にし、プレビュー時のスタイルを追加。あとついでに、個人的にプレビューも背景白のほうが見やすいと思うので変更。
公式のデモがスタイル設定を追加していたというのがちょっと厄介。プレビューの表示形式が異なる理由がわからず結構悩んでしまった…。
テキストの取得・設定はvalue()メソッドで。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sample</title> <!-- simpleMDE --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> <!-- Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div> <textarea ref="editor"></textarea> </div> <div> <button type="button" v-on:click="getText()">テキスト取得</button> </div> </div> <script> document.addEventListener("DOMContentLoaded", function (event) { var app = new Vue({ el: '#app', data: { simplemde: null }, mounted: function(){ this.simplemde = new SimpleMDE({ element: this.$refs.editor, spellChecker: false // スペルチェックを無効にする }); this.simplemde.value('# value()で設定\n1. ズン\n1. ズンズン\n1. ズンドコ\n \n**キ・ヨ・シ**') }, methods: { /** * テキスト取得ボタン押下時 */ getText(){ alert(this.simplemde.value()); } } }) }); </script> <style> /* 見出しに下線をつける */ .editor-preview h1 { border-bottom :1px solid #eee; } /* プレビューの背景を白にする */ .editor-preview { background-color :white; } </style> </body> </html>
ズンドコキヨシで関数実装の勉強、みたいなネタをツイッターで見かけて楽しそうだったのでサンプルに採用。深い意味はない。
とにかくこれさえできれば、入力内容をファイルに保存したりなんなりと作れる！
スタァライト舞台#2 revival 13日昼公演
(注)ネタバレ含む
物販がスムーズになった気がする？けれど8:30から待機した結果かも知れない。
30分前倒しの9:30物販開始で、私が買えたのが10:40くらい。この時点では新商品の売り切れなし。買いたい物が買えたので満足！
で、本編。ちなみにEブロックで鑑賞。
脚本は変わっていないんだけれども、演出が変わるとこんなに変わるのか！というのが衝撃。
冒頭のスタァライト上演シーンで、女神たちがセリから登場してきて、回る舞台上で演技が始まるところでもう感動した。アンフィシアターすごい。
舞台を横から見た状態なので、全員でポーズをとる場面なんかで背中を見ることに…という場面はちらほらあるけれど、全方位に満遍なく役者さんが配置されるので、全体的にはあまり気にならなかった。
香子の出欠の歌の前、双葉と純那が「知らない人と組めるかなー」「絶対無理でしょ」的な会話をしてそうな演技をしていたのとか初めて知った。
あと、とにかく表情までよく見える。私に笑顔向けてくれた！とか勘違いオタクになってしまってもしょうがない。最高。
日替わり？メモ
・三大悲劇は、コンタクトレンズをつけるのが怖い私
・カーテンコールの挨拶で観客にエルボー加えるあいあいさん
下手〜上手まで走って客席にエルボーをし、観客はダメージを受けた演技を求められる
皆様ノリが良くとても楽しかった。観客の雰囲気も大事
目標達成のための駄文
週1更新を目標にしたから…。すでに先月守れていないけれど。
ちょっと自律神経やられ気味かも？と思い平日帰宅後のPC・スマホ使用を控え、休日は遊びやら用事やらで外出が多く、ブログ更新する暇がないじゃんよ。習慣化って難しい。
一応WSL使った話とか、メーラソフト作りたい話とかネタはある。
けれど文章を書くにはそれなりに時間がかかってしまう。
作業しながら下書きとか書いておけばよかったなーと反省。
技術主体で書きたい気持ちはあるけれど、何かしらアウトプットの練習をしたくて始めたブログなので、三連休は開き直って趣味について書くか！
ちょうどスタァライト#2revivalを3回見に行く（千秋楽含む）といういい感じのネタがあるし。
ハイドロカルチャー経過観察 20190703
ミューレンベッキア
じわじわ伸びている。
梅雨時なので、水の量は器の5分の1位を意識して長期間水が残らないように注意。
大体5日～1週間くらいで水がなくなるので、そうしたら水をあげている。
乙女心
下の方の葉っぱが２つ、変色して柔らかくなっていたので取った。こんな感じになっていた。
成長するにつれ下の葉っぱが取れる品種のようなので、こういうものなのだと思いたい。他の葉はしっかりしているし、新しい葉っぱも出てきているし！
秋麗
上への成長はほとんどなし。なんだか葉っぱが肉厚になった。どういうことなんだろうか。
乙女心と秋麗は、水に浸けて１０日くらいで根が増えたのでハイドロボールに植え替えた。
ちょうどいい器が見つからなくて100均で買ったそうめん用の器に植え付けてみた。
底がすぼまっている形なので、水が溜まらないよう注意しやすくて思いのほか良い感じ。
水のやり方は、底の方にじわっと水が染みたのが見えたらストップするくらい少量を週1で。
ハイドロボールに植えつけたというだけで、ハイドロカルチャー感はあまりない。
むしろこんなに水が少なくて、せっかく生やした根は生きているんだろうかと少し不安。
かといって、乾燥地帯の植物なので水やりの量を増やすのも不安。
さて夏が来ているけれども、無事に乗り越えられるのか…！
WSL導入その２ インストールでつまずいた話
WSLにubuntuを導入した直後につまずいた。
やったことは解決方法をググって参考サイトに書いてある通りにしただけだけれども、丸一日悩んでしまったので備忘のため残しておく。
同じところでつまずいた初心者の助けになれれば幸い。
OS：Windows10 Home（バージョン1809）
WSL：ubuntu 18.04
事象１
javaをインストールしようと思ったらエラーになった。
入力したコマンド
sudo apt install default-jre
発生したエラー
E: Failed to fetch http://220.152.35.178:80/data/065bbb4bbf4b729a/archive.ubuntu.com/ubuntu/pool/main/n/nspr/libnspr4_4.18-1ubuntu1_amd64.deb Redirection loop encountered E: Failed to fetch http://220.152.35.178:80/data/065b924b4e4d31cf/archive.ubuntu.com/ubuntu/pool/main/a/alsa-lib/libasound2-data_1.1.3-5ubuntu0.2_all.deb Redirection loop encountered E: Failed to fetch http://220.152.35.178:80/data/065b934bcc612faa/archive.ubuntu.com/ubuntu/pool/main/libg/libglvnd/libglvnd0_1.0.0-2ubuntu2.3_amd64.deb Redirection loop encountered E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
やったこと
１．apt-get update
エラーメッセージに素直に従って、以下の順に実行してみたが変わらず。
sudo apt upgrade sudo apt install default-jre
２．--fix-missing
エラーメッセージに素直に従って、こちらも試してみたが変わらず。
sudo apt install default-jre --fix-missing
３．upgrade
ubuntuインストール後、いきなりJavaをインストールしようとしたのが間違いなのでは？と考え、先にupgradeしてみることに。
sudo apt update sudo apt upgrade
javaのときと同じエラーが発生した。よくわからないけれど対象のURLがイケてなさそう。
解消方法
参考になったのはこちらのフォーラムと、相談者さんが参考にしたというQiitaの記事。
forums.ubuntulinux.jp
qiita.com
/etc/apt/sources.list に設定されているURLをjaistのものに変更。やり方は上記参照。
ちなみに、私の環境ではデフォルトのURLはhttp://archive.ubuntu.com/だった。参考まで。
事象２
先にupgradeしてみたところ成功。
続いてjavaをインストールしようとしたところ、別のエラーになった。
sudo apt install default-jre
発生したエラー
The following packages have unmet dependencies:
default-jre : Depends: default-jre-headless (= 2:1.11-68ubuntu1~18.04.1) but it is not going to be installed
Depends: openjdk-11-jre but it is not going to be installed
E: Unable to correct problems, you have held broken packages.1回目のインストールで何かやらかしたみたい。
解消方法
参考にしたのはこちら。不整合が起きたファイルをもろもろ削除してやり直せ、ということらしい。
askubuntu.com
apt-getのところはaptにして実行してみた。
sudo apt --fix-broken install sudo apt clean sudo apt autoclean sudo apt autoremove sudo dpkg --configure -a sudo apt update
設定画面を開いてチェックを外せ、的な手順はスルー。
今度こそjavaインストール
色々解消方法を探している間にインストール手順を見つけた。
www.ubuntu18.com
default-jreをインストール → JDKをインストール の手順でやろうとしていたけれども、openjdk-11-jdk-headless をインストールするだけで良かったみたい。
ということで、書いてある通りにopenjdk-11-jdk-headless をインストールして、JAVA_HOMEとPATHを設定。
他のバージョンのjavaは入っていないのでデフォルトの設定は不要。今インストールしたjava11がデフォルトに設定されている。
動作確認ということで、HelloWorld.javaを作成し、C:\Users\※ユーザー名\Documents に保存。
class HelloWorld { public static void main(String[] args){ System.out.println("Hello, World!"); } }
Windows Subsystem for Linuxを導入
PCを買い替えて、ついにWindows10ユーザーになった。
ということで、Windows Subsystem for Linuxを導入してみた。
ちなみにLinuxは超初心者。自信をもって使えるのはcdとlsくらい。
環境：Windows10 Home
Ubuntuをインストール
MicrosoftStoreを開きUbuntuを検索。
『18.04 LTS』と『16.04 LTS』は書いてある通り、そのバージョンのものがインストールできる。
無印のものだと新しいバージョンが出たらアップデート可能、ということらしい。
ということで、無印のUbuntuをインストール。
Windows Subsystem for Linuxを使用可能にする
インストールできたら起動…するとエラーになる。
しかし手順を示してくれるのはありがたい。URLを載せてくれるなんて。
docs.microsoft.com
書いてある通りにPowerShellを右クリック→管理者として実行する で起動し、コマンドをコピペ。
再起動するか聞かれるので、yで再起動。
Ubuntuの設定
再起動が完了したらUbuntuを起動。
今度はエラーではなくインストール中ですよ、というメッセージが表示されるので少し待つ。（1行目）
インストールが完了するとユーザー名入力を求められるので適当に入力。（２～４行目）
次にパスワード入力を求められるので入力。ちなみにパスワード系の入力は画面に何も表示されないので注意。(5行目)
次にパスワードの再入力を求められるので、先ほどと同じパスワードを入力。(6行目)
成功するともろもろメッセージが表示されて、ユーザー名@ホスト名が表示されるようになる。
ユーザー名は入力したもの、ホスト名はおそらくWindows端末に設定しているPC名になる。
ちなみに私はユーザー名をuserにしてしまったが、システムからのメッセージに出てくるuserは何を表しているんだっけ…？と混乱してしまいすぐにuser01に変更した。
適当といっても程度があるので気を付けよう。
で、どこにインストールされている？
好奇心で調べてみたらすごいところにいた。参考にしたのはこちら。
www.howtogeek.com
ubuntuターミナルのホームディレクトリは、フルパスだと『C:\Users\【※windowsのログインユーザー名】\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home』である。
あえてフルパスで指定することもないだろうけれどとても長くて驚く。
参考元にも書いてあるけれど念のため、ubuntuからwindowsのファイルを操作するのはOKだけれど、windowsからubuntuのファイルを操作するのはNG。
エクスプローラーでubuntuのフォルダに移動して、ファイル追加したり削除したりするのはやめよう。
ハイドロカルチャー始めました
唐突に観葉植物が欲しくなり、色々調べた結果ハイドロカルチャーをやってみることに。
始めたのは1週間前だけれど、何となく１週間経過で一山超えた感があるので記録しておく。
ミューレンベッキア
ハイドロカルチャー用の苗を買って植え替え。
上に向かってわさーっとしているところが気に入った。
育てやすい品種みたいなので初心者でも安心！
乙女心
秋麗（？）
乙女心として２株セットで売られていたけれど雰囲気が全然違う。
図鑑など見てみた感じ、秋麗が一番近そうなのでそういうことにしておく。
こちらは土植えで売られていたので、ハイドロカルチャー用の根を生やすために根を1/3だけ残して切って水につけている。
水は腐らないように毎日入れ替え。水量は根全体が浸かってしまわないように調整。
で、1週間経過した結果がこちら。乙女心の方。
茶色いのが元からある根、白いのが新しく生えてきた根。
適応してくれたようで一安心。植物の生命力すごい。
根を切るときは、もっと根元ギリギリで切っても良かった気がしてきた。
1/3残す方法は鉢の植え替え時のものを参考にしたから…。
