一部セクションの子文書への分離機能について。

しらぎくモバイルシステムFULLでは、第0.9100版(平成21年11月29日)より、PC向けに作成されたHTML文書を携帯端末向けに変換処理する際に、指定されたブロックを元の文書から切り離して子文書に分離する機能を用意しております。

一部セクションの子文書への分離機能の概要。

PC向けの作成したHTML文書内に、PCでの閲覧では問題がないものの、携帯端末では冗長過ぎると思われる箇所があるとします。

しらぎくモバイルシステムFULLでは、予め指定した箇所をモバイル向けには変換しないように指定する事も可能ですが、第0.9100版(平成21年11月29日)より、このような箇所をマークアップで指定する事に依り子文書に分離して参照出来るようにしました。

子文書として分離された箇所には、当該箇所を参照するためのアンカーが降ろされ、先を読みたい方はそのままスキップして行けば良いですし、詳細を知りたい方はそのアンカーを指定する事で分離された箇所を開く事が可能になります。

  • ページ分割機能と異なり、指定された箇所を閲覧者はスキップする事が可能になります。
  • 一部のモバイル変換サーヴィスでは、このような箇所を自動的に見付け出して省略出来るものもありますがしらぎくモバイルシステムFULLでは文書作成者側がタグで指定する事でこの機能を実現します。

一部セクションの子文書への分離機能を利用するには。(平成23年 3月20日 更新)

セクションの子文書への分離機能を利用するには、

  1. 予め対象となるブロックに対して与えるクラス名かIDを決めておき、それをしらぎくモバイルシステムFULLに対して設定しておく
  2. HTML文書の該当するセクションに予め決めておいたクラス名かIDを持つブロックレヴェル要素としてマークアップする

この二つのステップが必要となります。

設定方法。

しらぎくモバイルシステムFULLで、分離機能を設定するには、設定ファイル「KConfig.pl」内の末尾の } の直前に以下の文を付け加えます。

@subDocClass=qw( 指定したクラス名 );
			@subDocID=qw( 指定したID );
			$accesskey_parent='親文書へ戻るためのダイヤルボタン';

はじめの二行については、いずれも複数のクラス名またはIDを空白で区切って複数個指定する事が出来ます。

また、最後の一行は、子文書閲覧中に親文書に戻るためのダイヤルボタンを指定します。必須ではありませんが、可能な限り指定される事をお奨めします。

HTML文書側の指定方法。

HTML文書側では、子文書に分離したい箇所について、予め設定で指定したクラス名やIDを与えたブロックレヴェル要素(<div>要素, リスト要素など)で一括します。

  • インライン要素に指定した場合は無効になります。
  • <form>要素内及び子文書として分割指定が行われている要素内では子文書への分割は出来ません。

子文書の題名の決め方。(平成23年 3月20日 更新)

子文書に与えられる表題は原則として、「子文書 | 親文書名」と言うように、親文書の題名を継承しますが、任意の表題を与える事も可能です。

具体的には、以下の方法で子文書の表題を定める事が出来ます。

子文書として分離するブロックレヴェル要素に空でない値のdata-title属性またはtitle属性を与える (平成23年 3月20日更新)
空でない値のdata-title属性またはtitle属性を与える事で、その属性値がそのまま子文書の題名となります。
  • data-title属性はHTML 5で認められている私的属性です。title属性と違い、PCでの閲覧に影響を与えないようにする事が出来ます。
子文書内の要素内容の一番初めの要素が見出しの場合
子文書とされる要素の内容の一番初めの要素が<h○>要素の場合、その要素の内容が表題として流用されます。
  • この場合、マークアップされていない非空白文字もインライン要素と見なします。従って、マークアップされていない非空白の文字が見出しより前に現われている場合には、見出しを題名にはしません。

子文書へのアンカー。(平成23年 3月20日)

子文書へのアンカーは、基本的に○○を読む (○○は子文書に与えた題名)と言う形式になりますが、第9.400版(平成23年 3月20日)より、○○の部分を題名とは異なった任意の文字列に変更出来るようになりました。

  • 但し、HTML 5以外の文書型では文法違反となります。

具体的には、子文書ブロックとなる要素に、data-anchor属性でアンカー文字列を記述します。

この場合、○○の部分にdata-anchor属性の値となる文字列が入るようになります。

  • を読むの部分は変更出来ません。

例えば、以下のようにしたとします。

<aside data-title="堀北真希ちゃんの最新情報(平成23年 3月20日)" data-anchor="堀北真希ちゃん最新情報" data-desc="平成23年 3月20日現在の、堀北真希ちゃんの最新情報をお知らせします。">
    (子文書に分離される内容)
    </aside>

この場合、この箇所は子文書に分離され、親文書の該当箇所には、data-anchor属性の値を用いて、

<ul>
    <li><a href="…"><cite>堀北真希ちゃん最新情報</cite>を読む</a><li>
    </ul>

が出力されます(出力対象により上記と異なったフォーマットとなる場合もあります)。

子文書の説明文。(平成23年 3月20日)

第9.400版(平成23年 3月20日)より、元の文書のマークアップ言語がHTML 5であれば、検索時に子文書が撰ばれた際に表される説明文を明確に決める事が出来るようになりました。

  • 文書全体の説明文は、<meta name="description">要素のcontent属性の値で表しますが、出力される子文書に対しての同要素を決めるものです。
  • 但し、検索エンジンの実装や検索状況に依り、子文書内のテキストが表示される場合もあります。
  • HTML 5以外でも使ってはいけないと言う訳ではありませんが、HTML 5以外の文書型では文法違反となります。

具体的には、子文書ブロックとなる要素に、data-desc属性で説明文を記述します。

例えば、以下のようにしたとします。

<aside data-title="堀北真希ちゃんの最新情報(平成23年 3月20日)" data-anchor="堀北真希ちゃん最新情報" data-desc="平成23年 3月20日現在の、堀北真希ちゃんの最新情報をお知らせします。">
    (子文書に分離される内容)
    </aside>

この場合、分離された子文書のヘッダには、

<meta name="description" content="平成23年 3月20日現在の、堀北真希ちゃんの最新情報をお知らせします。" />

が出力されます(出力対象により上記と異なったフォーマットとなる場合もあります)。

一部セクションの子文書への分離機能を利用する際の注意事項。

一部セクションを指定して分離する場合、以下の点にご留意ください。

子文書分離機能の制限。

フォーム内のブロックは分離出来ません
フォーム内の部分は切り離してしまうとフォームの機能に支障が出ますので、フォーム内での分離指定は全て無効とします。
子文書から孫文書への切り離しは出来ません
元の文書からの切り出しのみ可能となります。
  • 子文書で分離指定を行なった場合は無効とします。

子文書分離機能の利用に際し望ましい事。

長いセクションの切り出しはしない
子文書に対しても長くなり過ぎた場合には分割機能が発動します。

しかし、子文書で分離が発生すると閲覧者がサイトのどの位置にいるのかが把握し難くなり、ユーザビリティ上問題を生じさせる場合があります。

余り長いセクションを子文書として切り出すのは避けた方が良いでしょう。

子文書にも適切な題名を
上記の通り、分離を指定されたブロックレヴェル要素にtitle属性で与えた補助情報は、分離時に子文書の題名として利用され、また子文書を開くためのアンカーにも用いられます。

ですから、より分かり易い題名を与える事をお奨めします。

親文書へ戻るためのアクセスキー指定を
子文書を配信する際に、子文書の最上部(最終ページには最後尾にも)に元の親文書に戻るためのアンカーが設けられます。

子文書の何処を閲覧していても簡単に親文書に戻れるようにするために、アクセスキーの指定をされる事をお奨めします。