(実行例とダウンロードは ↓ 下の方 ↓ にあります)
1.概要
短歌を表示するHTMLです。
縦書き表示と横書き表示を選択できます。
また、1ページに表示する短歌の数を選択できます。
短歌データは、HTMLファイルの中に直接埋め込む必要があります。
(現状、外部のファイルを読み込むことはできません)
2.使い方
tankashow.html を ブラウザで開くと起動します。
表示方向のコンボボックスでは、縦書き表示と横書き表示を選択できます。
「縦」か「縦2」を選択すると、縦書き表示で短歌を表示します。
また、「横」を選択すると、横書き表示で短歌を表示します。
「縦」と「縦2」では、短歌を並べる向きが変わります。
「縦」を選択した場合には、右から左に短歌を並べます。
「縦2」を選択した場合には、左から右に短歌を並べます。
(現状、「上から下に短歌を並べつつ、横に複数列表示する」ことはできません)
また、表示数のコンボボックスでは、1ページに表示する短歌の数を選択できます。
数値(1-100)を選択すると、選択した数だけ短歌を1ページに表示します。
また、「全部」を選択すると、すべての短歌を1ページに表示します。
表示数の選択により複数ページ表示になった場合には、ページ選択のボタン等が
表示されます。これによってページ間を移動することができます。
またこのとき、キーボードの[z][x]キーまたは[<][>]キーによっても
ページ間を移動することができます。
3.短歌データの編集
短歌データを編集する場合、
tankashow.html を メモ帳等で開いて、
<script type="text/plain">
という行の下のテキストを編集します。
改行1個が、短歌の改行になります。
改行2個連続が、短歌1首の終了になります。
(￥記号でも改行します。もし￥記号自身を表示したい場合には、#￥と記述します)
</script> という行でデータは終わりになります。
(それ以降の行は表示用のプログラムになります)
また、<title>短歌</title>
という行の<title>と</title>の間の文字を変更すると、
タイトル表示を変更できます。
4.コマンド
短歌データの部分にコマンドを記述して、見た目をカスタマイズすることができます。
コマンドは、#( で始まり ) で終わります。
行の途中にコマンドを挿入する場合には、#( で始まり )$ で終わるようにします。
また、##と書くと、行末までコメント扱いになり、その部分は無視されます。
#を単に文字として表示したい場合には、\# と記述してください。
使用可能なコマンドを以下に示します。
(コマンドについては、アルファベット、数字、各種記号等はすべて半角です)
#(back-color 色コード)
背景色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(fore-color 色コード)
文字色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(back-image 画像のURL)
背景画像を設定します。
#(back-image-size サイズ設定)
背景画像のサイズを設定します。
サイズ設定には、contain, cover, auto, 100px 等を指定します。
contain を指定すると、画像が背景に収まるように拡大縮小します。
cover を指定すると、画像が背景を覆い隠すように拡大縮小します。
auto を指定すると、画像のサイズそのままで表示します。
#(back-image-repeat 繰り返し設定)
背景画像の繰り返し表示を設定します。
繰り返し設定には、repeat, repeat-x, repeat-y, no-repeat のいずれかを指定します。
repeat を指定すると、画像を縦横に繰り返して表示します。
repeat-x を指定すると、画像を横方向にのみ繰り返して表示します。
repeat-y を指定すると、画像を縦方向にのみ繰り返して表示します。
no-repeat を指定すると、画像を繰り返さずに表示します。
#(title-text 'タイトル文字列')
タイトル文字列を設定します。
#(title-font-color 色コード)
タイトル文字列のフォントの色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(title-font-family 'フォント名')
タイトル文字列のフォントを設定します。
フォント名には 'MS Mincho' のようにフォントの名前を指定します。
#(title-font-size サイズ)
タイトル文字列のフォントのサイズを設定します。
サイズは 32px のように指定します。
#(title-font-weight 太さ)
タイトル文字列のフォントの太さを設定します。
太さは bold または normal のように指定します。
#(title-shadow-color 色コード)
タイトル文字列の影の色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(title-margin-top サイズ)
タイトル文字列の上側の余白のサイズを設定します。
サイズは 10px のように指定します。
#(title-margin-bottom サイズ)
タイトル文字列の下側の余白のサイズを設定します。
サイズは 10px のように指定します。
#(setting-font-color 色コード)
設定用文字列(「表示方向」「表示数」等)のフォントの色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(setting-font-family 'フォント名')
設定用文字列(「表示方向」「表示数」等)のフォントを設定します。
フォント名には 'MS Mincho' のようにフォントの名前を指定します。
#(setting-font-size サイズ)
設定用文字列(「表示方向」「表示数」等)のフォントのサイズを設定します。
サイズは 32px のように指定します。
#(setting-font-weight 太さ)
設定用文字列(「表示方向」「表示数」等)のフォントの太さを設定します。
太さは bold または normal のように指定します。
#(setting-shadow-color 色コード)
設定用文字列(「表示方向」「表示数」等)の影の色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(setting-display 表示設定)
設定用文字列(「表示方向」「表示数」等)の表示/非表示を設定します。
表示設定に none を指定すると非表示になります(none 以外を指定した場合には表示します)。
#(init-direction 表示モード)
初期表示の 表示方向を設定します。
表示モードには 0,1,2,3 のいずれかの数値を指定します。
0を指定すると、縦書き表示(右→左に並べる)になります(v1.29以前とは逆向きになりました)。
1を指定すると、横書き表示(上→下に並べる)になります。
2を指定すると、縦書き表示2(左→右に並べる)になります(v1.29以前とは逆向きになりました)。
#(init-jump ページ番号 表示数)
初期表示の ページ番号と表示数を設定します。
ページ番号は、先頭ページが1になります。
表示数に0を指定した場合、全データを表示します。
#(box-size 幅 高さ)
短歌の枠のサイズを設定します。
幅と高さは 250px 250px のように指定します。
#(box-back-color 色コード)
短歌の枠の背景色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(box-back-color2 赤 緑 青 透明度)
短歌の枠の背景色を透明度つきで設定します。
赤 緑 青にはそれぞれ 0-255 までの整数を指定します。
透明度には 0-1 までの小数値を指定します。値が小さいほど透明になります。
(※)box-back-color2の背景色は、box-back-colorとbox-back-imageの表示の
上にかぶさる形で表示されます。
(※)本設定を解除する場合には、引数を省略して #(box-back-color2) と記述してください。
(※)ブラウザがCSSのrgba()に対応していない場合には、不透明になります。
#(box-border-color 色コード)
短歌の枠線の色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(box-border-style スタイル)
短歌の枠線のスタイルを設定します。
スタイルは solid または dashed のように指定します。
#(box-border-width 幅)
短歌の枠線の幅を設定します。
幅は 1px のように指定します。
#(box-margin サイズ)
短歌の枠の外側の余白のサイズを設定します。
サイズは 10px のように指定します。
また、サイズには、以下の例のように複数の値を指定することもできます。
例1.
#(box-margin 10px 5px)
上下の余白を10pxに 左右の余白を5pxに 設定します。
例2.
#(box-margin 10px 5px 20px 15px)
上側の余白を10pxに 右側の余白を5pxに 下側の余白を20pxに 左側の余白を15pxに 設定します。
#(box-back-image 画像のURL)
短歌の枠の背景画像を設定します。
横書き表示の場合には無効です(ただし#(write-yoko 1)で一時的に横書き表示にした場合には有効)。
(※)本設定を解除する場合には、引数を省略して #(box-back-image) と記述してください。
#(box-back-image-size サイズ設定)
短歌の枠の背景画像のサイズを設定します。
サイズ設定には、contain, cover, auto, 100px 等を指定します。
contain を指定すると、画像が背景に収まるように拡大縮小します。
cover を指定すると、画像が背景を覆い隠すように拡大縮小します。
auto を指定すると、画像のサイズそのままで表示します。
#(box-back-image-repeat 繰り返し設定)
短歌の枠の背景画像の繰り返し表示を設定します。
繰り返し設定には、repeat, repeat-x, repeat-y, no-repeat のいずれかを指定します。
repeat を指定すると、画像を縦横に繰り返して表示します。
repeat-x を指定すると、画像を横方向にのみ繰り返して表示します。
repeat-y を指定すると、画像を縦方向にのみ繰り返して表示します。
no-repeat を指定すると、画像を繰り返さずに表示します。
#(box-fore-image 画像のURL)
短歌の枠の前景画像を設定します。
本命令で画像を表示すると、短歌の文字は表示されません。
横書き表示の場合には無効です(ただし#(write-yoko 1)で一時的に横書き表示にした場合には有効)。
画像は短歌の枠のサイズに合わせて拡大縮小されます。
画像はマウスの右クリック操作で保存等が行えます(ブラウザの機能によります)。
#(box-display 表示設定)
短歌の表示/非表示を設定します。(短歌の枠ごと消去します)
表示設定に none を指定すると非表示になります(none 以外を指定した場合には表示します)。
#(box-line-break 1)
短歌の枠の改行を行います。(次の短歌の枠を横に並べずに、下に並べます)
#(font-color 色コード)
短歌のフォントの色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(font-color-hover 色コード)
短歌の枠内にマウスを移動したときの 短歌のフォントの色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(font-family 'フォント名')
短歌のフォントを設定します。
フォント名には 'MS Mincho' のようにフォントの名前を指定します。
#(font-size サイズ)
短歌のフォントのサイズを設定します。
サイズは 20px のように指定します。
#(font-weight 太さ)
短歌のフォントの太さを設定します。
太さは bold または normal のように指定します。
#(font-orientation 方向設定)
短歌の半角フォントの表示方向を設定します。
方向設定には、フォントを縦向きで表示する場合に upright を指定します。
(デフォルトでは、半角の英数字や記号等は、フォントが横向きで表示されます)
(※)ブラウザがCSSの text-orientation に対応していない場合には、本設定は無効です。
#(height 文字数)
短歌の表示上の高さ(=1行の文字数)を設定します。
文字数は 10em のように指定します。
(※)#(write-yoko 1)で一時的に横書き表示にした場合には、
横書き表示の表示上の高さ(例えば3emであれば3行分の高さ)の設定になります。
#(line-width 文字数)
このコマンドは#(height 文字数)と同じ動作をします。
互換性のために残されています。
#(line-height 文字数)
短歌の行間の文字数を設定します。
文字数は 1.5em のように指定します。
#(padding-left サイズ)
短歌の左側の余白のサイズを設定します。
サイズは 10px のように指定します。
#(padding-right サイズ)
短歌の右側の余白のサイズを設定します。
サイズは 10px のように指定します。
#(padding-top サイズ)
短歌の上側の余白のサイズを設定します。
サイズは 10px のように指定します。
#(shadow-color 色コード)
短歌の文字列の影の色を設定します。
色コードは #ffffff のように指定します(#に続けてRGB各8ビット、合計24ビットの16進数で色を指定)。
#(write-yoko 1)
縦書き表示時に 短歌を一時的に横書き表示に設定します。
この場合、余白やフォントは縦書きの設定がそのまま使われます。
( #(y- で始まる横書き用のコマンドの設定は使われません)
縦書き表示に戻す場合には、引数を省略して #(write-yoko) と記述します。
#(y-box-margin サイズ)
横書き表示時の 短歌の枠の外側の余白のサイズを設定します。
サイズは 10px のように指定します。
また、サイズには、以下の例のように複数の値を指定することもできます。
例1.
#(y-box-margin 10px 5px)
上下の余白を10pxに 左右の余白を5pxに 設定します。
例2.
#(y-box-margin 10px 5px 20px 15px)
上側の余白を10pxに 右側の余白を5pxに 下側の余白を20pxに 左側の余白を15pxに 設定します。
#(y-font-size サイズ)
横書き表示時の 短歌のフォントのサイズを設定します。
サイズは 16px のように指定します。
#(y-line-height 文字数)
横書き表示時の 短歌の行間の文字数を設定します。
文字数は 1.5em のように指定します。
#(y-padding サイズ)
横書き表示時の 短歌の四方の余白のサイズを設定します。
サイズは 10px のように指定します。
また、サイズには、以下の例のように複数の値を指定することもできます。
例1.
#(y-padding 10px 5px)
上下の余白を10pxに 左右の余白を5pxに 設定します。
例2.
#(y-padding 10px 5px 20px 15px)
上側の余白を10pxに 右側の余白を5pxに 下側の余白を20pxに 左側の余白を15pxに 設定します。
#(jump ページ番号 表示数)
短歌をクリックした場合にジャンプする ページ番号と表示数を設定します。
ページ番号は、先頭ページが1になります。
表示数に0を指定した場合、全データを表示します。
#(key-jump ページ番号 表示数 キーダウンコード1 キーダウンコード2 キーダウンコード3)
キー入力時にジャンプする ページ番号と表示数を設定します。
ページ番号は、先頭ページが1になります。
表示数に0を指定した場合、全データを表示します。
キーは、キーダウンコードにより最大3個まで指定可能です。
(いずれかのキーを押した場合にジャンプします)
キーダウンコード2, 3は省略可能です。
キーダウンコードは、キーごとの数値がブラウザによって決まっています。
例えば以下のページを参照ください。
http://www.programming-magic.com/file/20080205232140/keycode_table.html
(※)本コマンドは記述したページでのみ有効です。
(※)本コマンドは1行に1個だけ記述してください。
#(global-key-jump ページ番号 表示数 キーダウンコード1 キーダウンコード2 キーダウンコード3)
本コマンドはkey-jumpと同様の動作を行います。
ただし、本コマンドの設定は、全てのページで有効になります。
引数はkey-jumpと同様です。
(※)本コマンドは1行に1個だけ記述してください。
#(key-and-jump ページ番号 表示数 キーダウンコード1 キーダウンコード2 キーダウンコード3)
jumpとkey-jumpの両方の機能を実行するコマンドです。
引数はkey-jumpと同様です。
(※)本コマンドは1行に1個だけ記述してください。
#(ruby 文字 ルビ)$
文字にルビを振って表示します。
(※)行の途中に本コマンドを挿入する場合には、#( で始まり )$ で終わるようにしてください。
#(preload-image 画像のURL)
先読みしておく画像を設定します。
(※)本コマンドは1行に1個だけ記述してください。
#(keyboard-disabled 1)
キーボードによるページ移動([z][x]および[<][>])を無効にします。
(※)key-jumpで設定したキーは無効になりません。
#(print-title-margin-top サイズ)
印刷時のタイトル文字列の上側の余白の 追加サイズを設定します。
(印刷時にtitle-margin-topの設定にプラスされます)
サイズは 10px のように指定します。
#(print-title-margin-bottom サイズ)
印刷時のタイトル文字列の下側の余白の 追加サイズを設定します。
(印刷時にtitle-margin-bottomの設定にプラスされます)
サイズは 10px のように指定します。
#(print-page-break 改ページ設定)
印刷時の改ページを設定します。
改ページ設定には、改ページを行う短歌の番号を指定します。
短歌の番号は、先頭が1になります。
また、番号に+を付けると、その個数ごとに改ページします。
また、改ページ設定には、以下の例のように複数の値を指定することもできます。
(※)本コマンドは表示数の選択で「全部」を選択したときのみ有効です。
(※)本コマンドはデータ全体で1個だけ記述してください。
例1.
#(print-page-break +6)
6個ごとに改ページします。
例2.
#(print-page-break 4 10 16)
4,10,16番目の短歌データ(の直後)で改ページします。
例3.
#(print-page-break 4 +6)
4番目の短歌データで改ページし、以後6個ごとに改ページします。
例4.
#(print-page-break 4 +6 100)
4番目の短歌データで改ページし、以後6個ごとに100番目まで改ページします。
例5.
#(print-page-break 4 +6 +8)
4番目の短歌データで改ページし、続いて6個目で改ページし、以後8個ごとに改ページします。
#(print-page-margin-top サイズ)
印刷時の改ページの次のページの 上側の余白のサイズを設定します。
サイズは 15mm のように指定します。
(※)本コマンドは表示数の選択で「全部」を選択したときのみ有効です。
(※)本コマンドはprint-page-breakで改ページしたときのみ有効です。
#(print-last-margin サイズ)
印刷時の最終ページの 下側の余白のサイズを設定します。
サイズは 15mm のように指定します。
(Google Chromeで最終ページの背景画像の印刷が途切れるため追加)
#(y-print-page-break 改ページ設定)
#(y-print-page-margin-top サイズ)
#(y-print-last-margin サイズ)
横書き表示時の print-page-break, print-page-margin-top,
print-last-margin の設定を行うコマンドです。
5.環境
OS : Windows 8.1 (64bit)
ブラウザ : Chrome v67
でのみ動作確認。
6.履歴
2013-6-17 v1.00 (初版)
2013-6-18 v1.01 一部書き直し
2013-6-18 v1.02 CSS一部変更
2013-6-18 v1.03 CSS一部変更
2013-6-19 v1.04 一部書き直し
2013-6-19 v1.05 一部書き直し
2013-6-22 v1.06 一部修正([z][x]または[,][.]でページ移動)
2013-6-23 v1.07 一部修正(表示調整等)
2013-6-24 v1.08 一部修正(IE10で縦書き表示ずれの対策(仮))
2013-6-26 v1.09 一部書き直し
2013-7-31 v1.10 コマンド対応
2013-7-31 v1.11 コマンド追加(title-margin-top,title-margin-bottom)
2013-8-1 v1.12 一部書き直し
2013-8-11 v1.13 一部書き直し
2013-8-21 v1.14 コマンド追加(setting-display,init-direction,
init-jump,font-color-hover,box-display,font-orientation,
padding-left,write-yoko,jump,ruby)
2013-8-25 v1.15 コマンド追加(padding-right,height,box-line-break)
2013-8-25 v1.16 コマンド追加(preload-image)
2013-8-26 v1.17 コマンド追加(keyboard-disabled)
2013-8-30 v1.18 一部修正(Tankashow名前空間を導入)
コマンド追加(key-jump)
2013-8-30 v1.19 一部修正(key-jumpの引数変更)
コマンド追加(key-and-jump)
2013-8-31 v1.20 一部書き直し
2013-9-2 v1.21 コマンド追加(back-image-size,back-image-repeat)
2013-9-3 v1.22 コマンド追加(setting-font-family,setting-font-size,setting-font-weight)
2013-9-6 v1.23 一部書き直し
2013-9-8 v1.24 ページ選択のコンボボックスを追加
2013-9-10 v1.25 表示方向に縦3を追加
コマンド追加(box-back-image-size,box-back-image-repeat,box-fore-image)
2013-9-10 v1.26 一部書き直し
2013-9-11 v1.27 表示方向の縦3を削除(IE10で表示ずれるため)
2013-9-12 v1.28 コマンド追加(print-height)
2013-9-12 v1.29 コマンド追加(print-title-margin-top,print-title-margin-bottom)
2013-9-14 v1.30 表示方向の縦と縦2の意味を交換
コマンド削除(print-height)
コマンド追加(print-page-break,print-page-margin-top,print-last-margin)
2013-9-15 v1.31 コマンド追加(y-print-page-break,y-print-page-margin-top,y-print-last-margin)
コマンド変更(box-margin,y-box-margin,y-paddingの複数引数対応)
2013-9-25 v1.32 短歌データ中の￥記号で改行する機能を追加
2013-9-30 v1.33 コマンド追加(global-key-jump)
2013-10-13 v1.34 一部書き直し
2013-11-26 v1.35 フォントサイズ等のデフォルト設定見直し
2013-11-28 v1.36 色設定一部見直し
2013-12-1 v1.37 フォントサイズのデフォルト設定もれ修正
2014-1-4 v1.38 「￥#」→「#」の変換追加
2014-1-21 v1.39 一部書き直し
2014-2-1 v1.40 一部修正(全角の「￥#」は変換しない)
2014-2-8 v1.41 一部書き直し
2014-2-18 v1.42 一部修正(ブラウザ判定処理修正)
2015-1-20 v1.43 一部修正(エラーチェック追加等)
2016-8-20 v1.44 一部修正(縦書き表示のセンタリング処理見直し等)
2016-8-21 v1.45 一部修正(文字列の解析処理見直し)
2017-4-9 v1.46 一部修正(複合代入演算子の使用等)
2017-4-18 v1.47 一部修正(文字列の解析処理見直し等)
2017-4-19 v1.48 一部修正(v1.47の変更ミスを修正)
2017-4-26 v1.49 一部修正(文字列の解析処理修正)
2017-7-17 v1.50 一部修正(書式修正等)
2017-7-20 v1.51 一部修正(書式修正等)
2018-4-12 v1.52 一部修正(コメント修正のみ)
2018-4-29 v1.53 一部修正(キーボード処理見直し)
2018-6-29 v1.54 一部修正(HTML見直し)
2018-6-30 v1.55 一部修正(HTML見直し)
＜実行例＞
https://hamayapp.appspot.com/static/tankashow.html
＜ダウンロード＞
tankashow.zip (2018-6-30)