<!doctype html>
<html lang="ja">
  <head>
    {{$include_head}}

    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>{{$title|escape}}◀えあ草紙</title>

    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png?v=3">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png?v=3">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png?v=3">
    <link rel="manifest" href="./site.webmanifest?v=3">
    <link rel="mask-icon" href="./safari-pinned-tab.svg?v=3" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <meta name="Description" content="青空文庫テキスト形式に準拠した縦書きテキストビューワーです。スマホでも動きます。" />
    <meta name="robots" content="index,follow"/>

    <meta name="google" value="notranslate">         
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
    <!-- WebFont.js -->
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <!-- ImageViewer
      http://ignitersworld.com/lab/imageViewer.html
    -->
    <link rel="stylesheet" href="css/imageviewer.css" />
    <script src="js/imageviewer.min.js"></script>
    <!-- md5.js -->
    <script src="js/md5.js"></script>

    <!-- easoshiplus -->
    <link rel="stylesheet" type="text/css" href="css/easoshi.css?v={{$time}}">
    <link rel="stylesheet" href="webfonts/webfonts.css?v=0.4" />

    <script src="js/URI.js"></script>
    <script src="myjs/linebreaker.js?v=0.1"></script>
    <script src="myjs/es2015.js?v=0.1"></script>
    <script src="myjs/utr50.js?v=0.1"></script>
    <script src="myjs/gaiji.js?v=0.1"></script>
    <script src="myjs/ete.js?v={{$time}}"></script>
    <script src="myjs/easoshi.js?v={{$time}}"></script>
  </head>
  <body oncontextmenu="return false;">
    {{$include_body}}

    <div id="loading"><img src="img/loading.gif"></div>
    <div id="wrapper">
      <canvas id="canvas"></canvas>
      <div id="leftShadow"></div>
      <div id="rightShadow"></div>
      <img id="menubutton" src="img/tb_menu.png" />
      <img id="searchbutton" src="img/tb_search.png" />
      <img id="shioributton" src="img/tb_shiori.png" />
      <img id="closebutton" src="img/sb_close.png" />
      <img id="backbutton" src="img/sb_back.png" />
      <img id="nextbutton" src="img/sb_next.png" />
      <img id="prevbutton" src="img/sb_prev.png" />
      <div id="readOutMarker" style="background-color: red; display: none;"></div>
      <ul id="menu" style="display: none;">
        <li onclick="app.book.showTableOfContents();">目次</li>
        <hr/>
        <li onclick="toggleFullScreen();">全画面切り替え</li>
        <li onclick="app.book.toggleYokogumi();">縦組／横組の切り替え</li>
        <li name="shift1page" onclick="app.book.toggleShift1Page();">奇数／偶数ページの反転</li>
        <li onclick="app.book.toggleSingle();">見開き／単ページの切り替え</li>
        <hr/>
        <li name="readout" onclick="app.book.startReadOut();">読み上げ開始</li>
        <li name="readout" onclick="app.book.stopReadOut();">読み上げ終了</li>
        <li name="readout" onclick="app.openReadOutSettingDialog();">読み上げ設定</li>
        <hr name="readout"/>
        <li onclick="app.openSettingDialog();">設定</li>
        <li onclick="app.openHelpDialog();">ヘルプ</li>
        <li onclick="app.openAboutDialog();">えあ草紙＋について</li>
      </ul>

      <div id="about" title="えあ草紙＋について" style="display: none;">
        <p>バージョン：{{$version}}</p>
        <p>
          © {{$copyrightyear}} MemeDesign Ltd.<br />
          © {{$copyrightyear}} Sato Kazuhiko
        </p>
        <p><a href="https://www.satokazzz.com/easoshi-plus" target="_blank">えあ草紙＋ホームページ</a></p>
      </div>

      <div id="help" title="ヘルプ" style="display: none;">
        <h2>ボタン操作</h2>
        <dl>
          <dt><img src="img/tb_menu.png" style="width:2em;"></dt>
          <dd>メニューを表示</dd>
          <dt><img src="img/tb_search.png" style="width:2em;"></dt>
          <dd>本文検索</dd>
          <dt><img src="img/tb_shiori.png" style="width:2em;"></dt>
          <dd>栞のオン／オフ</dd>
        </dl>
        <h2>マウス／タッチ操作</h2>
        <dl>
          <dt>ページ内のクリック／タップ／左右スワイプ</dt>
          <dd>ページをめくる</dd>
          <dt>上下スワイプ</dt>
          <dd>前方／後方の見出し、栞に移動</dd>
          <dt>二本指での左右スワイプ</dt>
          <dd>ページの早めくり</dd>
          <dt>マウスホイール</dt>
          <dd>連続したページめくり</dd>
          <dt>柱（ページ上部にある本の題名）のクリック／タップ</dt>
          <dd>本に関連付けられたホームページを開く</dd>
          <dt>リンク（青い文字）のクリック／タップ</dt>
          <dd>リンク先を別のタブで開く</dd>
          <dt>内部リンク（緑の文字）のクリック／タップ</dt>
          <dd>リンク先のページに移動する</dd>
          <dt>注記マーク（＊）のクリック／タップ</dt>
          <dd>注記ウインドウを開く</dd>
          <dt>文字の長押し</dt>
          <dd>テキストツールを表示（iOSでは表示内容が異なります）</dd>
          <dt>画像の長押し</dt>
          <dd>画像ビューワーを開く</dd>
        </dl>
        <h2>キーボード操作</h2>
        <dl>
          <dt>左右カーソルキー</dt>
          <dd>ページをめくる</dd>
          <dt>シフト＋左右カーソルキー</dt>
          <dd>前方／後方の見出し、栞に移動</dd>
          <dt>上下カーソルキー</dt>
          <dd>10ページ進める（戻す）</dd>
          <dt>Home</dt>
          <dd>最初のページに移動</dd>
          <dt>End</dt>
          <dd>最後のページに移動</dd>
        </dl>
        <p>※ 音声読み上げで、音声データによってはWeb Speech APIに正しく準拠していないものもあり、問題が発生する場合があります。</p>
      </div>

      <div id="setting" title="設定" style="display: none;">
        <table>
          <tr>
            <th><label for "fontsize">フォントサイズ</label></th>
            <td><input type="text" id="fontsize" readonly></td>
          </tr>
          <tr>
            <th><label for="fontcolor">文字の濃さ</label></th>
            <td>
              <select id="fontcolor">
                <option value="#000000">0（濃い）</option>
                <option value="#111111">1</option>
                <option value="#222222">2</option>
                <option value="#333333">3</option>
                <option value="#444444" selected>4</option>
                <option value="#555555">5</option>
                <option value="#666666">6</option>
                <option value="#777777">7</option>
                <option value="#888888">8（薄い）</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>行間隔</th>
            <td><input type="checkbox" id="widenlinespace" name="widenlinespace"><label for="widenlinespace">広く</label></td>
          </tr>
          <tr>
            <th>傍点の大きさ</th>
            <td><input type="checkbox" id="smallbouten" name="smallbouten"><label for="smallbouten">小</label></td>
          </tr>
          <tr>
            <th><label for "backpagealpha">裏面透過率</label></th>
            <td><input type="text" id="backpagealpha" readonly></td>
          </tr>
          <tr>
            <th><label for="rubycolor">ルビの色</label></th>
            <td>
              <select id="rubycolor">
                <option value="#444444" selected>黒</option>
                <option value="#ff0000">赤</option>
                <option value="#008800">緑</option>
                <option value="#0000ff">青</option>
                <option value="#b0b0b0">薄いグレー</option>
                <option value="#888888">濃いグレー</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>見開き表示の影</th>
            <td><input type="checkbox" id="pageshadow" name="pageshadow"><label for="pageshadow">表示</label></td>
          </tr>
          <tr>
            <th colspan="2" style="text-align: center; padding-top: 1em;">優先するフォント</th>
          </tr>
          <tr>
            <td colspan="2" style="text-align: center; font-size: 90%;">font-familyの文法で記述してください。<br/>例）"Times New Roman","Noto Serif CJK JP Medium"</td>
          </tr>
          <tr>
            <th>本文</th>
            <td><input type="text" id="minchofont" name="minchofont" style="width: 100%;"/></td>
          </tr>
          <tr>
            <th>太字</th>
            <td><input type="text" id="gothicfont" name="gothicfont" style="width: 100%;"/></td>
          </tr>
          <tr>
            <th>本文等幅</th>
            <td><input type="text" id="fixedminchofont" name="fixedminchofont" style="width: 100%;"/></td>
          </tr>
          <tr>
            <th>太字等幅</th>
            <td><input type="text" id="fixedgothicfont" name="fixedgothicfont" style="width: 100%;"/></td>
          </tr>
        </table>
      </div>

      <div id="search" title="本文内検索" style="display: none;">
        <div>検索文字列</div>
        <div><input type="search" id="searchtext" name="searchtext" value="" /></div>
      </div>

      <div id="searchinfo" style="display: none;"></div>

      <div id="readoutsetting" title="読み上げ設定" style="display: none;">
        <table style="width: 100%;">
          <tr>
            <th><label for="voicelist">声の種類</label></th>
            <td><select id="voicelist" style="width: 100%; height: 200px;"></select></td>
          </tr>
          <tr>
            <th><label for="voicerate">速さ</label></th>
            <td><div id="voicerate" style="width: 100%;"></div></td>
          </tr>
          <tr>
            <th><label for="voicepitch">高さ</label></th>
            <td><div id="voicepitch" style="width: 100%;"></div></td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function() {
        app = new Easoshi(
          '{{$bookpath|escape:'quotes'}}',
          '{{$dataurl|escape:'quotes'}}',
          '{{$baseurl|escape:'quotes'}}',
          '{{$home|escape:'quotes'}}',
          '{{$title|escape:'quotes'}}',
          '{{$charset|escape:'quotes'}}',
          '{{$filetype|escape:'quotes'}}',
          '{{$fragment|escape:'quotes'}}',
          {{$mobile}},
          {{$yoko}},
          '{{$license|escape:'quotes'}}'
        );

        WebFont.load({
          custom: {
            families: ['WebFontMincho', 'WebFontGothic', 'WebFontMonoMincho', 'WebFontMonoGothic'],
            urls: ['webfonts/webfonts.css']
          },
          loading: function() {
            app.fontLoaded = false;
            app.loading = true;
          },
          active: function() {
            app.fontLoaded = true;
            app.loading = false;
          },
          inactive: function() {
            app.fontLoaded = true;
            app.loading = false;
          },
        });
      });
    </script>

    {{$include_end}}
  </body>
</html>
