フォーラムに投稿する前に投稿内容をプレビュー画面で確認したい
-
Kuroさん、こんにちは。
今回はHaijin Boys Onlineのフォーラムに関して要望があります。
フォーラムに投稿するとき、名前と本文を入力して（新しく質問するときは件名も入力）、「投稿」ボタンをクリックすると投稿することができます。
ですが、投稿後に投稿した内容を確認すると、文章の内容が誤っていたり、もっと分かりやすい書き方を発見したりと、色々気づくことがあります。しかし、下記URLを参照すると、投稿された内容は修正できないため、投稿後に気づいても後の祭りです。
https://www.haijin-boys.com/discussion-guidelines#12
こんなとき、とあるサービスのお問い合わせフォームやWikipediaみたいに、入力した内容をプレビュー画面で確認できれば、投稿する前に間違いに気づいて修正することができます。
よって、Haijin Boys Onlineのフォーラムに投稿する前に投稿内容をプレビュー画面で確認ができるようにしてもらえないでしょうか？
| MSY-07 | 返信 -
こんにちは、ご意見ありがとうございます。
フォーラムの投稿画面にプレビュー機能がない件についてですが、このフォーラムシステムは私が趣味で開発したもので、以前にプレビュー機能の実装に挑戦したこともありましたが、難易度が高く挫折してしまいました。
レンタルのフォーラムシステムを利用すれば、プレビュー機能も利用できるかもしれませんが、そのシステムの選定や構築、データ移行にはかなりの労力がかかると思います。
お手数をおかけしますが、投稿内容は直接フォームに入力するのではなく、別のエディターなどで事前に記入し、内容に問題がないかをご確認の上でご投稿いただきますようご協力をお願いします。
時間に余裕ができた際にはプレビュー機能の追加についても検討してみますが、現在は Mery の開発とサポートに追われており、ほとんど余暇がない状況ですので、今のところ対応が難しい状況です。
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> フォーラムの投稿画面にプレビュー機能がない件についてですが、このフォーラムシステムは私が趣味で開発したもので、以前にプレビュー機能の実装に挑戦したこともありましたが、難易度が高く挫折してしまいました。
そうでしたか。
簡単なことではないとは思っていましたが、それほど実装が難しいとは思っていませんでした。
> レンタルのフォーラムシステムを利用すれば、プレビュー機能も利用できるかもしれませんが、そのシステムの選定や構築、データ移行にはかなりの労力がかかると思います。
かなりの労力をかけてプレビュー機能は利用できるようにするのであれば、Meryの開発とサポートに時間を割いた方が良いですよね。
> お手数をおかけしますが、投稿内容は直接フォームに入力するのではなく、別のエディターなどで事前に記入し、内容に問題がないかをご確認の上でご投稿いただきますようご協力をお願いします。
実はフォーラムに投稿する文章は毎回Meryで書いています。
ですが、Meryで文章を何度推敲しても、フォーラムに投稿した文章を見ると何か印象が変わるんですよね。
それで今思ったのですが、普段Meryでフォーラムの文章を書くときは折り返し方法が「ウィンドウの右端で折り返し」を選択しています。
しかし、これだとテキスト画面がフォーラムの画面よりかなり幅が広くなって文章の行数が増えるので、文章の読みやすさが変わってくるんですよね。
今後は、折り返し方法の「指定文字数で折り返し」を選択して、行の文字数を指定してフォーラムの画面の幅になるべく合わせた上で、投稿前の文章を確認してみますね。
ただ、Markdownで書いていると、他人の文章を引用するときに3行目以降に色がつかなくなって見づらくなるのが難点ですが、下記のURLに仕様と書いているので、そういうものだと思って割り切ります。
https://www.haijin-boys.com/wiki/よくある質問#改行および折り返しをまたぐ検索で強調表示されません
> 時間に余裕ができた際にはプレビュー機能の追加についても検討してみますが、現在は Mery の開発とサポートに追われており、ほとんど余暇がない状況ですので、今のところ対応が難しい状況です。
Meryの開発とサポートだけでも相当忙しいのに、ご無理を言ってすいませんでした。
プレビュー機能の追加については、時間に余裕ができたときに検討してもらえると嬉しいです。
| MSY-07 | 返信 -
ご返信ありがとうございます。
> 簡単なことではないとは思っていましたが、それほど実装が難しいとは思っていませんでした。
以前に開発に挑戦したときは、Markdown 対応も考えていたので、その時は特に難しかったんですよね。仕様の面でもいくつか問題があったのを思い出しました。
たとえば、よく使われる方法としては、PHP でプレビュー画面を作って、サーバー側で処理するやり方があります。
この方法だと、今のフォーラムの画面をそのまま使えるので、シンプルなプレビュー画面を作るのはそこまで難しくないと思います。
でも、このやり方にはいくつか問題があるんですよね。
サーバーへの負担:
サーバーでプレビュー処理をすると、リクエストが増えるたびにサーバーへの負荷も高くなります。
特に、投稿前に何度もプレビューを表示するユーザーさんがいると、サーバーが重くなるかもしれません。
スパムや悪意あるリクエストのリスク:
プレビュー機能を誰でも使える状態にすると、スパムや悪意のあるリクエストが大量に送られるリスクもあります。
これでサーバーがさらに負荷を受けることになります。
レンタルのフォーラムを含め、多くのフォーラムでは、会員制にして特定のユーザーだけが使えるようにして、こういう問題を避けていますよね。
でも、Mery は昔ながらのフリーソフトのスタイルでオープンなフォーラムを続けているので、こうした問題に対処するのがなかなか難しいんです。
> それで今思ったのですが、普段Meryでフォーラムの文章を書くときは折り返し方法が「ウィンドウの右端で折り返し」を選択しています。
フォーラムの折り返し位置はブラウザの幅に依存するので、そこまで気にしなくても良いかなとは思いますが…
> ただ、Markdownで書いていると、他人の文章を引用するときに3行目以降に色がつかなくなって見づらくなるのが難点ですが、下記のURLに仕様と書いているので、そういうものだと思って割り切ります。
そうなんですよね、これは仕様なんです。
「重くなっても良いので、もっとたくさんの行をまたいで色分けできるようにしてほしい」というご要望もいただいたことがありますが、行数を増やすと本当に重くなってしまうので、あまりおすすめできないんです。
> プレビュー機能の追加については、時間に余裕ができたときに検討してもらえると嬉しいです。
最近は、JavaScript でもいろいろな処理ができるようになっているので、クライアントサイドでプレビュー機能を実装できれば、サーバーへの負担も軽く、セキュリティリスクも抑えられるかもしれませんね。
さすがに、Markdown 対応はセキュリティ面でも難しいと思いますが、折り返し位置を確認できるくらいのシンプルなプレビュー機能なら、なんとか実装できるかもしれません。
また時間ができたら、改めて挑戦してみたいと思います。
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> 以前に開発に挑戦したときは、Markdown 対応も考えていたので、その時は特に難しかったんですよね。仕様の面でもいくつか問題があったのを思い出しました。
Markdown対応を考えていたのは気になりますね。
> サーバーでプレビュー処理をすると、リクエストが増えるたびにサーバーへの負荷も高くなります。
>
> 特に、投稿前に何度もプレビューを表示するユーザーさんがいると、サーバーが重くなるかもしれません。私は他のサービスだと投稿前に何度もプレビューを確認して文章を修正しているので、この仕様だとサーバーを重くしてしまいますね。
> プレビュー機能を誰でも使える状態にすると、スパムや悪意のあるリクエストが大量に送られるリスクもあります。
>
> これでサーバーがさらに負荷を受けることになります。これは問題ですよね。
> 最近は、JavaScript でもいろいろな処理ができるようになっているので、クライアントサイドでプレビュー機能を実装できれば、サーバーへの負担も軽く、セキュリティリスクも抑えられるかもしれませんね。
>
> さすがに、Markdown 対応はセキュリティ面でも難しいと思いますが、折り返し位置を確認できるくらいのシンプルなプレビュー機能なら、なんとか実装できるかもしれません。折り返し位置を確認できれば十分です。
できれば、引用マークがついた文章に色がついていると助かります。> また時間ができたら、改めて挑戦してみたいと思います。
はい、よろしくお願いします。
| MSY-07 | 返信 -
ご返信ありがとうございます。
> Markdown対応を考えていたのは気になりますね。
それについては、あまり気にしないでくださいね。
> 私は他のサービスだと投稿前に何度もプレビューを確認して文章を修正しているので、この仕様だとサーバーを重くしてしまいますね。
MeryWiki がときどき落ちてるのもご存じだと思いますし😅
MeryWiki やフォーラムの場合、サーバーのスペックは普通のデスクトップ PC よりも少し低いくらいなので、大手企業のサービスとは違ってちょっと限界があります。
(それでも、一番下のスペックよりは少し良いものを使っているんですよ。私のポケットマネーも限界です…)
> 折り返し位置を確認できれば十分です。
> できれば、引用マークがついた文章に色がついていると助かります。[投稿] ボタンの隣に [プレビュー] ボタンを追加してみました。
Wiki のプレビュー機能を参考にして作ったつもりですが、急いで作ったので、使い勝手にはご理解いただけると嬉しいです。
ちなみに、Chrome、Edge、Firefox での動作確認はしてありますが、古いブラウザーではうまく動かないかもしれません。
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> [投稿] ボタンの隣に [プレビュー] ボタンを追加してみました。
>
> Wiki のプレビュー機能を参考にして作ったつもりですが、急いで作ったので、使い勝手にはご理解いただけると嬉しいです。
>
> ちなみに、Chrome、Edge、Firefox での動作確認はしてありますが、古いブラウザーではうまく動かないかもしれません。素早いご対応ありがとうございます。
まさにこの機能がほしかったんですよ。
また、Wikiのプレビュー機能に準拠していて使いやすいです。Chrome、Edge、Firefoxで下記の動作確認を行いましたが、問題ありませんでした。
・行の右端での折り返し
・引用マーク「>」「>>」が先頭についた文章を色分けして表示
・URLをクリックするとリンク先に移動
・<pre>タグで囲んだソースコードを整形済みテキストとして表示これで投稿前にプレビューで投稿内容を確認して問題がないか確認することができます。
それで、1つ気になったことがあります。
投稿前にプレビューを表示をしたとき、<pre>タグで囲んだソースコードが色付けして表示されませんが、何か理由があるのでしょうか？| MSY-07 | 返信 -
ご確認いただきありがとうございます。
> ・行の右端での折り返し
> ・引用マーク「>」「>>」が先頭についた文章を色分けして表示
> ・URLをクリックするとリンク先に移動
> ・<pre>タグで囲んだソースコードを整形済みテキストとして表示このあたり、PHP で書いていた部分を JavaScript に書き直したので、正直自信はなかったのですが、うまく動いているようで安心しました。
> 投稿前にプレビューを表示をしたとき、<pre>タグで囲んだソースコードが色付けして表示されませんが、何か理由があるのでしょうか？
気付かれてしまいましたね。
実は、最初は色分けするようにしてたのですが、今のフォーラムは言語を自動判別して色分けする仕様なんですよね。
でも、短いコードだとうまく判別できなくて、変な色分けになることが多くて…。
それが投稿前に見えると「ちゃんと判別させなきゃ！」と無駄に気を使わせちゃうかなと思って、プレビューではあえて色分けしないようにしました。
投稿後に変な色分けがされても、「まぁ、仕方ないか～」って納得できるかと思って。
もし、プレビューでも色分けが必要でしたら、そういう風にもできます。
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> 実は、最初は色分けするようにしてたのですが、今のフォーラムは言語を自動判別して色分けする仕様なんですよね。
>
> でも、短いコードだとうまく判別できなくて、変な色分けになることが多くて…。
>
> それが投稿前に見えると「ちゃんと判別させなきゃ！」と無駄に気を使わせちゃうかなと思って、プレビューではあえて色分けしないようにしました。
>
> 投稿後に変な色分けがされても、「まぁ、仕方ないか～」って納得できるかと思って。逆に、私はプレビューで色分けされてないと、投稿後のソースコードの色分けがどうなるかが心配になります。
それで、実際に投稿してみたら、思っていた色分けと違っていて「やっちまった！！」と思う姿が見えます。
> もし、プレビューでも色分けが必要でしたら、そういう風にもできます。
個人的には、プレビューでも<pre>タグで囲んだソースコードが色分けされている方が分かりやすいです。
というのも、プレビューと投稿後の画面の差異は可能な限り少ない方が投稿内容を修正しやすいからです。
| MSY-07 | 返信 -
ご返信ありがとうございます。
> 個人的には、プレビューでも<pre>タグで囲んだソースコードが色分けされている方が分かりやすいです。
プレビューでもソースコードが色分けされるように対応しておきました。
ただ、言語が自動判別だと、意図しない色分けになることもあるので、以下のように class 属性で言語を指定できる機能を追加してみました。
<pre class="language-javascript"> var x = 0; </pre>(従来どおり、class 属性を省略すると自動判別されます)
対応している言語は以下のとおりです。
- bash
- c
- cpp
- csharp
- css
- delphi
- diff
- go
- graphql
- hsp
- ini
- java
- javascript
- json
- kotlin
- less
- lua
- makefile
- markdown
- objectivec
- perl
- php
- php-template
- plaintext
- python
- python-repl
- r
- ruby
- rust
- scss
- shell
- sql
- swift
- typescript
- vbnet
- wasm
- xml
- yaml
さらに、Markdown にも対応してみました。
[マークダウンを有効にする] をオンにすると、Markdown 記法が使えるようになります。
Markdown の仕様は、markdown-it のデフォルトモード、その他、以下の機能にも対応しています。
- 改行で <br>
- 自動でリンク
- タイポグラファー
- ハイライト (==)
- 絵文字
- 脚注
セキュリティの関係で、HTML タグや Markdown の画像埋め込みは使えません。
ちなみに、Markdown を有効にしても、このフォーラム独自の記法「>> 名前」や「> 引用」はそのまま使えます。
ただし、<pre> タグは使えなくなるので、Markdown のコードブロック (```) を使ってくださいね。
なお、Markdown 記法の引用 (> や >>) は上記の記法が優先されるので、ネストされた引用などは使えません。
Markdown 機能は試験的な運用ということで、実用性やセキュリティ面で問題が出たら、廃止するかもしれません。
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> プレビューでもソースコードが色分けされるように対応しておきました。
>
> ただ、言語が自動判別だと、意図しない色分けになることもあるので、以下のように class 属性で言語を指定できる機能を追加してみました。おおーー、ご対応ありがとうございます。
これでプレビューでソースコードの確認がしやすくなります。あと、投稿後のフォーラムとプレビューでハイパーリンクをクリックすると、リンク色が青から紫に変わるようになったのは分かりやすくていいですね。
> さらに、Markdown にも対応してみました。
>
> [マークダウンを有効にする] をオンにすると、Markdown 記法が使えるようになります。まさか、Markdownまで対応するとは予想していませんでした。
いやー、Markdown記法でプレビューを表示できるのは便利ですね。
特に、文章中にハイパーリンクを埋め込めるのは便利ですね。それで、Markdown記法で動作確認をしていたら、2つ気になったことがあります。
1つ目は、「マークダウンを有効にする」をオン・オフの状態で、ハイパーリンクをクリックしたときの動作が変わります。
・「マークダウンを有効にする」をオフ：ハイパーリンクをクリックすると、別タブでリンク先のページが開く
・「マークダウンを有効にする」をオン：ハイパーリンクをクリックすると、同じタブ内でリンク先のページに移動するよって、「マークダウンを有効にする」をオンにした状態でハイパーリンクをクリックした場合も、別タブでリンク先のページが開く仕様に変更できないでしょうか？
2つ目は、文章中に<br>タグを挿入しても、プレビューで文章中に<br>タグがそのまま表示されてしまい改行されません。
| MSY-07 | 返信 -
Markdown対応！！ちょちょいと対応したの、すごすぎます！😮
Markdownプレビュープラグインお馴染みの markdown-it ということで、もしかして
```bashのようにコードブロックの言語指定も対応かな？と思って試してみたところ、対応している様子… これは便利…！| yuko | 返信 -
>> MSY-07 さん、yuko さん
Markdown 対応、そう言ってもらえると嬉しいです😳
> よって、「マークダウンを有効にする」をオンにした状態でハイパーリンクをクリックした場合も、別タブでリンク先のページが開く仕様に変更できないでしょうか？
そうですね。これは markdown-it の仕様によるものですが、確かに別タブで開いた方が便利なので、無理やり対応しておきました。
> 2つ目は、文章中に<br>タグを挿入しても、プレビューで文章中に<br>タグがそのまま表示されてしまい改行されません。
HTML タグはセキュリティ上の理由で使用禁止にしています。
Markdown 記法での改行、「\」を使っていただきたいのですが… <br> ぐらいなら使えても良いかなと思ったので、これも無理やり対応してみました。
ただし、markdown-it にはこうした部分的な制限解除の機能がないので、他の HTML タグについては対応できません。その点はご容赦ください🙏
> Markdown対応！！ちょちょいと対応したの、すごすぎます！😮
いえいえ、実は数年前にフォーラムで「Markdown 書けないの？」という質問をもらったときに一度挑戦したのですが、知識不足で挫折してしまったんですよね😅
> Markdownプレビュープラグインお馴染みの markdown-it ということで、もしかして ```bash のようにコードブロックの言語指定も対応かな？と思って試してみたところ、対応している様子… これは便利…！
クライアント側では markdown-it の JS を使っているので、基本的には問題なく動作します。ただ、サーバー側がちょっと問題ですね。
本来ならサーバー側で node.js などを使って markdown-it.js を動かすべきだと思うのですが、レンタルサーバーでは node.js が使えないんです…。
さすがにクライアント側で Markdown → HTML 変換して投稿するのはセキュリティ的にリスクが大きすぎるので、従来どおり、プレーンテキストを投稿してサーバー側で Markdown を解析するかたちにしています。
そのため、ローカルでのプレビューと投稿後の表示が異なる場合があるかもしれませんが、ご了承ください😱
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> そうですね。これは markdown-it の仕様によるものですが、確かに別タブで開いた方が便利なので、無理やり対応しておきました。
ご対応ありがとうございます。
おかげでリンクを開く動作が快適になりました。> HTML タグはセキュリティ上の理由で使用禁止にしています。
>
> Markdown 記法での改行、「\」を使っていただきたいのですが… <br> ぐらいなら使えても良いかなと思ったので、これも無理やり対応してみました。
>
> ただし、markdown-it にはこうした部分的な制限解除の機能がないので、他の HTML タグについては対応できません。その点はご容赦ください🙏Markdownの仕様に「改行で <br>」と書いてあったので、<br>タグを挿入することで改行することができるのかと勘違いしていました。
すいませんでした。でも、<br>タグは使えた方が便利だと思うので、ご対応ありがとうございます。
それで、動作確認をしていたら、「マークダウンを有効にする」をオフの状態でプレビューすると、引用マーク「>」「>>」が先頭についた文章が色分けして表示されないことがあります。
https://imgur.com/gallery/F58hRuY
https://imgur.com/gallery/0PwOhjv申し訳ないですが、ご確認をお願いします。
| MSY-07 | 返信 -
ご報告ありがとうございます。
> Markdownの仕様に「改行で <br>」と書いてあったので、<br>タグを挿入することで改行することができるのかと勘違いしていました。
あぁ、なるほどです。「改行で <br>」というのは、Markdown では半角スペース 2 つや「\」で改行する必要があるのですが、それを通常の改行で自動的に <br> タグに変える機能ですね。
> でも、<br>タグは使えた方が便利だと思うので、ご対応ありがとうございます。
最近流行りの Zenn でも、<br> タグのみ、無理やり使えるようにしているみたいなので、そういうのもアリなんだなぁと思いまして。
> それで、動作確認をしていたら、「マークダウンを有効にする」をオフの状態でプレビューすると、引用マーク「>」「>>」が先頭についた文章が色分けして表示されないことがあります。
おっと、そこは気づいていませんでした。Markdown 対応で色々と調整していたときに、通常モードにも影響が出てたみたいです。さっそく修正しておきました。
| Kuro | 返信 -
Kuroさん、ご返信ありがとうございます。
> おっと、そこは気づいていませんでした。Markdown 対応で色々と調整していたときに、通常モードにも影響が出てたみたいです。さっそく修正しておきました。
ご対応ありがとうございます。
動作確認を色々しましたが、今のところはこれ以上の要望や不具合はありません。
これまでお付き合いいただきありがとうございました。| MSY-07 | 返信
![ファンタスティック・ビーストとダンブルドアの秘密 [DVD]](https://m.media-amazon.com/images/I/513cukjsCvL._SL160_.jpg)
![ファンタスティック・ビーストとダンブルドアの秘密 [Blu-ray]](https://m.media-amazon.com/images/I/51PiRHLePDL._SL160_.jpg)
