プレビュー画面全体の印刷ができない

[tsubolabo]

　投稿が長文で複雑になると、画面上だけで推敲を加えるのは困難になります。ときどき、全体を見渡せる状態に印刷出力したいのですが、Qiita のプレビューではほんの一部分しか印刷されず困っています。

　そこで現状の対応として、印刷が必要なほどの長文の投稿の場合には、Qiitaのエディタを使わず、ブラウザの拡張機能 Markdown Viewer を見ながら汎用エディタで原稿を作り、最終段階で Qiita のエディタにコピペして仕上げるという方法を採っています。しかし、Markdown Viewer と Qiitaエディタ では文法が完全には同一でないため、コピペ後の手直しにかなり時間を食います（特に、数式のエスケープ方法の違いが厳しい）。

　そこで、お願いです。Qiita のプレビュー画面から、一つの記事の全文の印刷ができるようにしていただけないでしょうか？（用紙やインキの無駄がでないように、広告等は印刷されないように最適化されると助かります）

[tanaka-asami415]

@tsubolabo
ありがとうございます🙏
恐れ入りますが、プレビューは印刷することを前提としていないため、
プレビュー画面の印刷状態を整える実装は現時点では考えておりません。

代替案として、一度、限定共有投稿したものを印刷していただければ、
推敲にご使用いただけるのではないかと思います。お試いただけますと幸いです🙇
限定共有投稿につきましては、こちらのヘルプをご参照ください。
https://help.qiita.com/ja/articles/qiita-private-article

[yoshinoyuya]

@tsubolabo

事情にお詳しいようですが、貴方はQiitaの方でしょうか？

ただのユーザーです。
A4で印刷する場合だと、自分が思いつく対策は「拡大率変更」か「CSS変更」の2つです。

拡大率変更

拡大率を100から下げて「サイズ69」の画像のように欠損がない拡大率を探します。

サイズ70	サイズ69

CSS変更

CSSを変更して、下図の画面下部に出てくる「いいね・ストック」等の部分を消します。

CSS変更前	CSS変更後

|

1. 該当ページにアクセスします
   
2. 右クリックをし、「開発者ツールで調査する」をクリックします。
   
3. 「コンソール」をクリックします。
   
   4.以下の文字列をコピー・ペーストします。

document.querySelector(`[id^='PersonalArticlePage-react-component'] > div:nth-child(2)`).style.display = "none"

5.「Enter」を押し、実行します。

6. A4で印刷します。

以上がユーザーとして出来ることかと思います。

改善案

ここからは、Qiita側が印刷機能を追加すべきかという点を話していきたいと思います。

個人的な意見としては、要望するユーザーが多けば実装すべきだと思います。
ですが、Qiita記事を印刷して何かに利用するユーザーは少ないと思います。

そのため、改善するとすれば、編集画面のプレビュー画面だと思います。
自身の案だと、プレビュー画面を別ウィンドウ(youtubeコメント欄ようなイメージ)で開けるようにするとかだと思います。
このような感じで、Qiitaエディタの改善案を上げるのが良いかと思います。

tsubolaboさんの場合ですと

　投稿が長文で複雑になると、画面上だけで推敲を加えるのは困難になります。ときどき、全体を見渡せる状態に印刷出力したいのですが、Qiita のプレビューではほんの一部分しか印刷されず困っています。

全体を見渡せる状態はどのような表示なら該当するか

　そこで現状の対応として、印刷が必要なほどの長文の投稿の場合には、Qiitaのエディタを使わず、ブラウザの拡張機能 Markdown Viewer を見ながら汎用エディタで原稿を作り、最終段階で Qiita のエディタにコピペして仕上げるという方法を採っています。

Markdown Viewerのどのような機能がQiitaエディタと違って書きやすいのかなど
を上げることで、Qiitaとしても動きやすいのかと思います。

[munierujp]

自身の案だと、プレビュー画面を別ウィンドウ(youtubeコメント欄ようなイメージ)で開けるようにするとかだと思います。

FYI: はてなブログには、Qiitaのようにエディタに横並びでリアルタイムプレビューを表示する機能もありますが、それとは別に実際の記事の見た目に近い形でプレビュー表示する機能がありますね。

cf. https://help.hatenablog.com/entry/editor/preview

[tanaka-asami415]

@yoshinoyuya
詳細にありがとうございます🙏

[tsubolabo]

yoshinoyuya さん
詳細なご指導をありがとうございました。
お教えいただいた方法での実行結果を報告させていただきます。私にとっては、拡大率変更が最適な方法のように感じます。

• 拡大率変更

　用紙サイズをA4に設定し、拡大率を100%から徐々に減らして行きます。70%までは三点リーダがフッター部にあるので一部の文字が隠れています。69%にすると三点リーダがページの左端に移動し、隠される部分はなくなります。さらに%を減らして行くと文字サイズは当然小さくなっていきます。54%まで小さくなりページ幅に余裕が出てくると、ページの右端に目次まで現れるようになります。
　目次は不要なので、文字サイズができるだけ大きい69%に設定しておき、インクジェットプリンタに直接出力して印刷しました。A3のpdfからA4に縮小プリントしたときに比べると、印刷結果はより鮮明になりました。
　また、これは微妙なサイズ誤差による偶然の結果かもしれませんが、A3のときの行の上下分断が４ヶ所（全18ページに対して）だったのに比べ、今回は１ヶ所に減っています。本来なら、A3とA4の幅の比は1.41なのが、今回は1/0.69=1.45と少々異なるからでしょうか。

• CSS変更

　この方法によれば、読みやすい文字サイズのままA4用紙に直接印刷できます（ページ数は当然増えます）。もちろん行の欠落はありませんが、行の上下分断も皆無で優秀です。しかし、数式に許される幅がかなり狭くなっているようで、本来は一行に収まるはずの数式が途中で強制的に折り返され、レイアウトがかなり乱れます。
　それに、開発者ツールに打ち込む document.querySelector(...).style.display = "none" の意味がまだ良く理解できておらず、私には少々敷居が高い気がします。

次に御下問の２点についての回答です

全体を見渡せる状態はどのような表示なら該当するか

　長文の画面上の編集では、行きつ戻りつ頻繁にスクロールして目的の場所を見つけ、次々に処理していくのが結構大変です。印刷したものをページを繰りながら、赤ペンで訂正・加筆する方が遥かに楽です。「全体を見渡せる」というのは適当な表現ではなかったかもしれません。「印刷したものを全ページが見渡せるように床に広げる」わけではありません。ホッチキスで閉じた状態で使用します。

Markdown Viewerのどのような機能がQiitaエディタと違って書きやすいのか

　Markdown Viewerは、書きやすいというよりも簡単に印刷できる点を買って利用していました。しかし、使ってみると書きやすさという点でも次のような良さを感じます。（Qiitaのエディタも、数式が無い短い記事であれば超便利だと思います。）

• 長文の場合には、一定量を打ち込んでから一気に変換する方が落ち着ける
• 数式の変換に癖がない。

しかし、Qiitaとは文法が若干異なる点に難はあります。Qiitaでも全文を印刷できることを知った今では、どちらが便利かを考え直してみる必要があります。
　

[tsubolabo]

もう、議論が尽くされた感もありますが、書き忘れたことがありますので追記します。

• 拡大率変更印刷
  　文章の一行が前後ページに分断して印刷される部分もあると書きましたが、図と表は、これとは少し様子が異なります。
  　図は、そのページの残りのスペースが狭いときには、分断されないようにページ送りされ、図の全体が次ページの頭から始まります。
  　表は分断されますが、分断された表の下半分の頭にはタイトル行が再挿入されます。

• Marldown viewer の使い易さ
  　使い慣れた汎用エディタで作業できるのも利点の一つです。Qiitaのエディタで作業しているとき、例えば、汎用エディタの「元に戻す」ボタンに相当するものがないので、勝手が違ってマウスカーソルの行き場に困ることがあります。（とは言っても、Qiitaのエディタの機能を増やして操作を複雑化して欲しいわけではありません。）
  　他にMarkdown Preview Plusという拡張機能も試しましたが、数式がQiitaのMathJax方式ではなくKaTex方式だったので避けました。

[tanaka-asami415]

プレビュー画面については他にも多数ご意見をいただいており、改善を重ねていきます💪