Bootstrap4エディタのpingendoでpdfのマニュアルをHTML化してみた-後編

watanabeです。前回の記事ではBootstrap4のエディタを用いて、pdfのマニュアルを見た目の印象をあまり変えないようにHTML化しましたが今回は印刷時のレイアウトを元のマニュアルに近づけるためにどう調整したかを記録します。

また、HTML化してもマニュアルとしての操作性を落とさないようにするためのおすすめTipsも紹介します。

印刷用の調整-元のマニュアルに近づける
- 1.印刷用CSSを上書きする
- 2.CSSを調整する
その他マニュアルHTML化時の調整Tips
まとめ
採用情報

印刷用の調整-元のマニュアルに近づける

以下のような手順で調整していきます。

印刷用のCSSをBoorstrapのCSSに上書きする
CSSを調整する
改ページの指定

1.印刷用CSSを上書きする

Bootstrapは元々印刷用のスタイルが定義されていますが、 2カラム→1カラムに変わってしまったり、端の部分まで「用紙に合わせて縮小」しても収まらなかったりレイアウトを変更せず見たままで印刷することは厳しい状態です。

f:id:watanabe06:20190319153720p:plain

そこでBootstrapサイトの印刷に特化した便利なCSSを配布しているサイトがありましたのでこちらを今回拝借します。

GitHub - onocom/bootstrap-print: Print Bootstrap(version3).

紹介記事

onocom.net

CSSは別ファイルとして最後に読み込ませるか、BootstrapのCSSファイルの最後に追記します。（上記の紹介記事ではBootstrapで印刷用のスタイルを除外して～とありますが、背景色を印刷せず文字色を黒に統一するために今回は除外しないものを使用します）

2.CSSを調整する

レイアウトはPC画面の見たままに近づきましたが、キリの良い部分でA4サイズにうまく収めたり見出しやリストのスタイルを指定して可読性を上げるために追加したCSSに対して以下の調整をしていきます。

印刷する文字サイズ

デフォルトの文字サイズは「*」内で指定します。Bootstrapの文字サイズは相対指定のため「px」や「pt」等、固定の値にします。

* {
  -webkit-print-color-adjust: exact !important;
  background-attachment: initial !important;
  overflow-y: visible !important;
  font-size:18px; /*←ここの値を書き換える*/
}

全体の拡大縮小を指定

Chrome等「用紙に合わせて縮小」が行えないブラウザでデフォルトサイズで印刷する時にはみ出さないようにするために「body」に以下の指定をします。

body {
  zoom:0.87!important; /*←ここの値を書き換える*/
  min-width:1240px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

印刷用の見出しやリストの調整

追加したCSSの@media print 内で印刷用にだけ適用したいスタイルの指定をします。前回同様、レイアウトに影響が出てしまうのでmargin等パーツの間隔はあまり変更せず borderを追加したり文字色等を変更したりします。

調整にはブラウザの「media print」のエミュレータ機能を使用すると、印刷プレビュー画面を開かなくても確認しながら作業できます。

Firefoxの場合

Shift + F2 で開発ツールバーを表示
「media emulate print」を入力する

Chromeの場合

　F12をクリックしデベロッパーツールを表示する
メニューから「Rendering」を選ぶ
「Emulate CSS media」のプルダウンで「print」を選択する

実際に指定してみた例

印刷の設定で背景色を印刷しない設定の場合でも見やすくするために主に「borderで装飾しています。」 f:id:watanabe06:20190315173325p:plain

改ページの指定

最後に、章の区切り等任意の場所で改ページができるようにします。以下のスタイルが指定されているclassを用意し HTML編集時に改ページを入れたい箇所にclassを追加します。

CSS

.break{
 page-break-before: always;/*改ページ用*/
}

例として見出しの前で改ページをしたい場合はこのように指定

  <div class="section ">
    <div class="container">
      <div class="row break"><!--←見出しと本文を囲っているdivにclassを追加-->
        <div class="col-md-12">
          <h2 class="" id="menu-01-03">各種設定をする </h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">

f:id:watanabe06:20190315180755p:plain

その他マニュアルHTML化時の調整Tips

より操作性を上げるためのTipsを少しですがまとめました。

上に戻るボタン

スクロールした時にすぐに上に戻るボタンがあると便利です。以下のコードはある程度の位置までスクロールすると表示される、クリックで一番上までアニメーションで移動するボタンです。

jQueryを使用します。（見た目のCSS指定は一例です）

HTML

<div class="to-top">
    <span id="to-top-button" style="display: block;">▲</span>
</div>

CSS

.to-top #to-top-button {
    position: fixed; /*位置は固定*/
    display: none; /*デフォルトでは非表示のため*/
    bottom: 30px;
    right: 10px;
    cursor: pointer; /*クリックできるように見せる*/
    z-index: 10; /*重なり位置の調整*/

  /*以下見た目の指定*/
    background-color: #3db7e0;
    border-radius: 5px;
    color: #fff;
    height: 28px;
    margin: 5px;
    padding: 3px 5px;
    text-align: center;
    width: 36px;
    box-shadow: 1px 1px 5px #C1C1C1;
    font-size: 15px;
}

head部分に記述するJavaScript

  <script> // グローバル変数
    var syncerTimeout = null ;
    var contentsopen = 'false';
    var contentsheight =null;
    var contentsminheight=null;
       $(function(){
     
    // スクロールイベントの設定
        $( window ).scroll( function()
        {
            // 1秒ごとに処理
            if( syncerTimeout == null )
            {
                // セットタイムアウトを設定
                syncerTimeout = setTimeout( function(){
    
                    // 対象のエレメント
                    var element = $( '#to-top-button' ) ;
    
                    // 現在、表示されているか？
                    var visible = element.is( ':visible' ) ;
    
                    // 最上部から現在位置までの距離を取得して、変数[now]に格納
                    var now = $( window ).scrollTop() ;
    
                    // 最下部から現在位置までの距離を計算して、変数[under]に格納
                    var under = $( 'body' ).height() - ( now + $(window).height() ) ;
    
                    // 最上部から現在位置までの距離(now)が500以上
                    if( now > 500)
                    {
                        // 非表示状態だったら
                        if( !visible )
                        {
                            // [#page-top]をゆっくりフェードインする
                            element.fadeIn( 'slow' ) ;
                        }
                    }
    
                    // 600px以下かつ
                    // 表示状態だったら
                    else if( visible )
                    {
                        // [#page-top]をゆっくりフェードアウトする
                        element.fadeOut( 'slow' ) ;
                    }
    
                    // フラグを削除
                    syncerTimeout = null ;
                } , 1000 ) ;
            }
        } ) ;
     /*上に戻る動作*/
          $( '#to-top-button' ).click(
           function()
            {  
             $( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ;
                }
              ) ;
        });

  </script>

ボタンの見た目の例（上記CSSで指定)

f:id:watanabe06:20190322145654p:plain

印刷するボタン

ブラウザの印刷ボタンを押さずにすぐに印刷メニューを読み出せるボタンです。（見た目のCSS指定は省略します）

<form id="print-link">
  <span onclick="window.print();">このページを印刷する</span>
</form>

使用の例

f:id:watanabe06:20190319150257p:plain

目次の作成

Bootstrapの部品「Navbar」で目次を作成するとページ間の移動に便利です。またスマホ版の狭い画面では自動的にしまわれるので場所を取りません。 Pindengoでは「NAVS」のメニューから部品を追加できます。

f:id:watanabe06:20190319163115p:plain

まとめ

最後に印刷したものとHTML化したものとマニュアルの比較です。

f:id:watanabe06:20190319164324p:plain

このように、ブラウザで見た時、印刷した時両方に1種類のHTMLで対応できるようになりました。

今回のようにPDFで作成したマニュアルをオンライン化（HTML化）する際に、「以前のように印刷して閲覧したい」というユーザからの需要もあると思います。「どのような手段でもそれに適した形で同じ情報を見られるようにする」事はユーザの満足度にも関わるので実現できて良かったです。

採用情報

朝日ネットでは新卒採用・キャリア採用を行っております。

朝日ネット　技術者ブログ

朝日ネットのエンジニアによるリレーブログ。今、自分が一番気になるテーマで書きます。