紹介
+ +DAISYナレッジベースはとてもシンプルで構造化されたHTMLページを使用しており、貢献者は新しいページを書くのに集中できます。書式設定やメニューバーなどの追加コンテンツは、スクリプトによって自動的に挿入されます。
+ +このページでは、新しいページを作成し、それを登録申請するプロセスについて説明します。
+作成する場所
+ +新しいページを作成する方法は、GitHubのナレッジベースリポジトリへのアクセス権によって異なります。
+ +リポジトリへの書き込みアクセス権を持つ信頼できる貢献者は、作業するための新しいブランチを作成できます。貢献が完了したら、新しいプル リクエストを開いてブランチをマージするだけです。
+ +その他のすべての貢献者は、まずGitHubアカウントを作成する必要があります。次に、ナレッジベースリポジトリのコピーをフォークし、 それをデスクトップにクローンして作業する必要があります。貢献となる作業が完了したら、GitHubでフォークしたリポジトリに移動し、変更をDAISYリポジトリに追加するためのプルリクエストの操作を行ってください。
+ページテンプレート
+ +ナレッジベースの新しいページを開始する最もクリーンな方法は、このリポジトリのテンプレートディレクトリにある空のテンプレートファイルを使用することです。このファイルには、ページの作成に必要な最小限のマークアップが含まれています。
+ +ページの作成を開始するには、このテンプレートファイルを、説明するトピックに最も適したディレクトリ (たとえば、HTMLマークアップ手法を説明するページは /publishing/docs/html に配置します)にコピーし、短くて意味のある新しいファイル名を付けます
+ +ファイル名にスペースを使用しないでください。複数の用語を結合するにはハイフンを使用します。
+ページメタデータ
+ +テンプレートファイルをコピーして名前を変更した後、HTML編集プログラムで開きます。新しいページの記述を開始する前に、ドキュメントヘッダーに必要なメタデータを設定してください。
+ +ページエンコーディング
+ +HTMLのhead
要素内の最初のタグで、ページの文字エンコーディングを宣言します。
<meta charset="utf-8">+ +
このタグを変更したり削除したりしないでください。
+ページタイトル
+ +最初に設定する必要がある項目はページタイトルです。 <title>...</title>
タグの間に新しいタイトルを入力します。
ページ本文にページタイトルを挿入しないでください。 title
タグに入力したタイトルは、レンダリングされたページに自動的に挿入されます。
ビューポートメタデータ
+ +ナレッジベースがモバイルデバイス上で正しく拡大縮小されるようにするには、ページタイトルの後にビューポート宣言を続けます。
+ +<meta name="viewport" content="width=device-width, initial-scale=1">+ +
ページのエンコーディングと同様に、このタグを変更したり削除したりしないでください。
+ページの説明
+ +唯一、メタタグの中で記入が必須なのがページ説明です。
+ +<meta name="description" content="">+ +
content
属性にこのページの目的について簡単な説明を入力してください。このタグは検索エンジンの最適化に使用されます。
ページ情報
+ +次のステップは、ページのコンテキスト情報を設定することです。ページヘッダーで次のスクリプトタグを捜します。
+ +<script> +var page_info = { + 'category': '...', + 'appliesTo': ['EPUB3'] +}; +</script>+ +
category
フィールドは、ページを作成するディレクトリを大文字で指定しなければなりません。たとえば、html ディレクトリに新しいページを追加する場合は、フィールドを次のように設定します。
'category': 'HTML',+ +
新たなページのために新たなサブディレクトリを作成するならば、その値を配列の形で指定します。例えば、html/dpub-aria
のディレクトリにページを設けるならば、次のように指定します。
'category': ['html', 'dpub-aria'],+ +
配列の順序はディレクトリの順序と一致する必要があります (つまり、親が兄弟より前)。ページが動的に生成される場合、このフィールドはヘッダーにパンくずリストを提供します (他の用途もあります)。
+ +appliesTo
フィールドは、このページに適用される出版技術を識別する値の配列です。現在、このフィールドで使用できる値は三つだけです。
-
+
- EPUB3 +
- EPUB2 +
- Audiobooks +
EPUB2と3の両方で有効な手法の場合、フィールドは次のようになります。
+ +'appliesTo': ['EPUB3', 'EPUB2'],+ +
技術は関連性順にリストしてください (例: EPUB3は標準の最新バージョンであるため、EPUB2の前にリストします)。
+ +追加のテクノロジーが必要な場合は、追加をリクエストしてください。
+ページコンテンツ
+ +ページのメタデータを構成した後、最後のステップとしてページの実際のコンテンツを記述します。
+ +ナレッジベースページは、ユーザーにできるだけ早く情報を提供できるように構成しています。ほとんどのユーザーは詳細な説明をじっくりと読むことはないので、ページはページの目的に関する簡単な概要から始めます。次に、関連する技術を列挙し、その後に技術の実際の例を続けます。ページの最後には、問題のより詳しい説明と関連リソースへのリンクを記載します。
+ +このセクションでは、各セクションを記載する方法について説明します。
+ +投稿されたページは、サイトの他の部分との一貫性を保つために、デフォルトのテンプレートに従う必要があることに注意してください。問題の説明がこの構造に合わない場合もありますが、逸脱する前に事前に確認してください。あまりにも異常な投稿は書き直されるか、拒否されるかもしれません。
+ +要約
+ +要約のセクションでは、ページの重要なポイントを簡単にまとめる必要があります。たとえば、注意すべき重要な問題は何なのか、どのような技術に従う必要があるのかなどです。概要は、ユーザーにできるだけ簡潔に重要なポイントを伝えることを目的としているため、一文または二文以内に収める必要があります。
+ +以下に説明する「解説」のセクションでは、問題と解決策について詳しく説明します。
+技術
+ +技術セクションでは、ページで取り上げられている問題を解決または回避するための一般的な対策を列挙します。
+ +各リスト項目では、簡単な言葉で実践方法を説明し、該当する場合は、末尾の括弧内に関連する WCAG達成基準へのリンクを記載します。
+ +ユーザーが従うことができる特定のWCAGの技術がある場合は、それらをサブリストに加えます。
+ +たとえば、代替テキストの付加について説明する技術は、次のように構成します。
+ +<li> + <p>Provide alternative text in the <code>alt</code> attribute + if the image is not described in the surrounding text. + <span class="wcag-level">[<a + href="https://www.w3.org/TR/WCAG2/#non-text-content">WCAG + 1.1.1</a>]</span></p> + <ul> + <li><a + href="https://www.w3.org/WAI/WCAG22/Techniques/html/H37">Using + alt attributes on img elements</a></li> + … + </ul> +</li>+
例
+ +各ページでは、マークアップまたは機能を実際に実装する方法の例を少なくとも一つユーザーに提供する必要があります。
+ +例は、HTMLfigure
タグを使用して構造化されています。
最初の子要素は、 figcaption
でなければなりません。この要素はさらに、タイトルと説明に分割されます。タイトルは、 class
属性値がlabel
であるdiv
要素内に配置されます。説明は、タイトルの後の一つ以上の段落に記述されます。
次の例は、サンプルキャプションの典型的な構造を示しています。
+ +<figcaption> + <div class="label">Example 1 — Complex Images</div> + <p>This example uses the details element to …</p> +</figcaption>+ +
この例のマークアップは、 pre
要素とcode
要素のペアの内側に記述されます。
<pre id="ex-01-src" class="prettyprint linenums"><code>…</code></pre>+ +
id
属性とclass
属性が必須であることに注意してください。これらは、生成された例に構文のハイライトと行番号を追加するために使用されます。
よくある質問
+ +よくある質問(FAQ)のセクションでは、よく発生する特定の問題を質疑応答形式で取り上げます。このアプローチは、長い説明を読むよりもユーザーにとってずっと理解しやすいでしょう。また、問題の一般的な説明に負担をかけずに、とても限定的な問題にも対処できます。
+ +FAQは、HTML定義リスト(dl
要素)を使用して構造化します。質問ごとにdt
要素を使用し、回答ごとにdd
要素を使用します。
解説
+ +解説のセクションでは、ユーザーが知っておく必要のある実践と問題について詳しく説明します。
+ +解説については、できるだけ詳細に、できるだけ簡単な言葉で説明する以外に、特別な要件はありません。ナレッジベースの読者は、必ずしも技術の専門家ではありません。
+ +情報を整理するのに役立つ場合は、説明をサブセクションに分割できます。
+関連リンク
+ +関連リンクのセクションには、関連する標準へのリンクが含まれており、ユーザーは詳細情報をすばやく検索できます。
+ +たとえば、EPUB 構造、HTML 要素、または ARIA 属性がページから参照されている場合は、参照が本文にリンクされている場合でも、このセクションでそれらの定義へのリンクを提供します。
+その他のセクション
+ +追加のセクションが必要な場合は、解説の後、最後の関連リンクセクションの前に追加する必要があります。
+インデックスの更新
+ +新しいページを追加するときは、トピックインデックスとサイトインデックスの両方を更新して、ページへのリンクを加えてください。
+ +トピックインデックスは、 index.html
ファイル内のページと同じフォルダーにあります。このファイルには、通常アルファベット順のページリストが含まれています(ただし、概要または紹介ページが最初にリストされる場合もあります)。リストにページの新しいエントリを追加します。
サイトインデックスは/docs
ディレクトリにあります。これはすべてのトピックインデックスの集合体なので、作成したエントリをドキュメントにコピーできます。ページはこのインデックスと同じディレクトリにないため、必要な変更はリンクにファイルへのパスを追加するだけです。
ページの表示
+ +ファイルシステムからダブルクリックしてブラウザーで新しいページを開くと、スタイルが設定されていない元のHTMLのみが表示されます。
+ +サイトに表示されるページを表示する方法は、二つあります。
+ +-
+
-
+
一つ目は、コンピュータ上で実行されているローカルWebサーバー(IISやApacheなど)からページを読み込むことです。ファイルを表示するには、リポジトリのルートがサーバーのルートWebサイトであることを確認するだけです。その後、任意のブラウザーでページを読み込むと、動的にレンダリングされたバージョンが表示されます。コンテンツフォルダーのURLは通常、
+http://localhost/publishing/docs/
です。
+ -
+
二番目の方法は、ページをGitHubにコミットしてオンラインで表示することです。ここでも、二つのアプローチがあります。
+-
+
-
+
ナレッジベースをローカルアカウントにクローンした場合は、GitHubページをオンにしてコンテンツを表示できます。GitHubでは、ページをオンにする方法を説明しています。この場合、コンテンツフォルダーのURLは次のようになります:
+https://youraccountname.github.io/kb/publishing/docs/
+ -
+
ページは、statically.io などのサードパーティ コンテンツ サーバーを通じて表示できます。GitHub では、まずページがある場所 (例: https://www.github.com/youraccountname/kb/publishing/docs/html/mynewpage.html) に移動します。次に、その URL をコピーして変換ツールに貼り付けるて、ページをライブで表示できる新しいリンクを入手します。
+
+
+ -
+