docxファイルの中身を覗いてみよう
word
Word組版を実現するにあたって理解しておくといいことに、Wordのファイル形式を意識することです。
そこで本記事では、Word組版を始めるにあたって知ってほしいファイル形式について簡単に掘ってみましょう。
> Cheap Dive into docx1Cheap Dive into docx1
Wordのファイル形式『.docx』は、実際はOffice Open XML（OOXML）というXMLをベースとしたファイル形式を採用しています。実際に、docxファイルをzipファイルとして展開すると次のようなファイル群が現れます。
docxfile
├── [Content_Types].xml
├── _rels
├── docProps
│ ├── app.xml
│ ├── core.xml
│ └── custom.xml
└── word
├── _rels
│ ├── document.xml.rels
│ └── footnotes.xml.rels
├── comments.xml
├── document.xml
├── fontTable.xml
├── footer1.xml
├── footer2.xml
├── footnotes.xml
├── header1.xml
├── header2.xml
├── media
│ ├── rId33.png
│ └── rId62.png
├── numbering.xml
├── settings.xml
├── styles.xml
├── theme
│ └── theme1.xml
└── webSettings.xml
このようにWordは複数のxmlで情報を持っています。
代表的なxmlと内容の対応を示します。
- word/document.xml - ドキュメントの内容
- word/footer1.xml - フッターの情報
- word/media - メディア（画像等）の情報
- word/styles.xml - スタイル情報
重要なのはwordディレクトリ内にある、document.xmlとstyles.xmlです。各ファイルの一部を抜粋します。
document.xml
<w:p>
<w:pPr>
<w:pStyle w:val="2" />
</w:pPr>
<w:bookmarkStart w:id="44" w:name="spaで開発する根拠は何" />
<w:r>
<w:t xml:space="preserve">SPAで開発する根拠は何？</w:t>
</w:r>
<w:bookmarkEnd w:id="44" />
</w:p>
<w:p>
<w:pPr>
<w:pStyle w:val="FirstParagraph" />
</w:pPr>
<w:r>
<w:t xml:space="preserve">最近のウェブフロントエンド開発では、2章で扱うフレームワークの存在もありますが、SPAが採用されることが増えてきました。</w:t>
</w:r>
<w:r>
<w:br />
</w:r>
<w:r>
<w:t xml:space="preserve">技術を決定する際に、その決定理由を言語化できるかは重要です。開発者目線でSPAを採用すると何が嬉しいのか？を複数の観点から説明します。</w:t>
</w:r>
</w:p>
<w:p>
<w:pPr>
<w:pStyle w:val="3" />
</w:pPr>
<w:bookmarkStart w:id="45" w:name="npmエコシステムの利用" />
<w:r>
<w:t xml:space="preserve">npmエコシステムの利用</w:t>
</w:r>
<w:bookmarkEnd w:id="45" />
</w:p>
<w:p>
<w:pPr>
<w:pStyle w:val="FirstParagraph" />
</w:pPr>
<w:r>
<w:t xml:space="preserve">SPA以前のウェブでは、jQueryをベースにライブラリを大量に突っ込んで作るのが主流でした。</w:t>
</w:r>
<w:r>
<w:br />
</w:r>
<w:r>
<w:t xml:space="preserve">jQuery系のプラグインはパッケージマネージャで使えない場合があり、（CDNを利用しないのであれば）minfyされたJSファイルをプロジェクト中に置くことになるでしょう。</w:t>
</w:r>
<w:r>
<w:br />
</w:r>
</w:p>
<w:p>
styles.xml
<w:style w:type="paragraph" w:styleId="1">
<w:name w:val="heading 1" />
<w:basedOn w:val="a" />
<w:next w:val="a0" />
<w:uiPriority w:val="9" />
<w:qFormat />
<w:rsid w:val="00921183" />
<w:pPr>
<w:keepNext />
<w:keepLines />
<w:numPr>
<w:numId w:val="13" />
</w:numPr>
<w:spacing w:before="480" w:after="0" />
<w:outlineLvl w:val="0" />
</w:pPr>
<w:rPr>
<w:rFonts w:ascii="Arial" w:eastAsiaTheme="majorEastAsia" w:hAnsi="Arial" w:cstheme="majorBidi" />
<w:b />
<w:bCs />
<w:color w:val="262626" w:themeColor="text1" w:themeTint="D9" />
<w:sz w:val="32" />
<w:szCs w:val="32" />
</w:rPr>
</w:style>
<w:style w:type="paragraph" w:styleId="2">
<w:name w:val="heading 2" />
<w:basedOn w:val="a" />
<w:next w:val="a0" />
<w:uiPriority w:val="9" />
<w:unhideWhenUsed />
<w:qFormat />
<w:rsid w:val="00C011D5" />
<w:pPr>
<w:keepNext />
<w:keepLines />
<w:numPr>
<w:ilvl w:val="1" />
<w:numId w:val="13" />
</w:numPr>
<w:spacing w:before="200" w:after="0" />
<w:outlineLvl w:val="1" />
</w:pPr>
<w:rPr>
<w:rFonts w:asciiTheme="majorHAnsi" w:eastAsiaTheme="majorEastAsia" w:hAnsiTheme="majorHAnsi" w:cstheme="majorBidi" />
<w:b />
<w:bCs />
<w:color w:val="262626" w:themeColor="text1" w:themeTint="D9" />
<w:sz w:val="28" />
<w:szCs w:val="28" />
</w:rPr>
</w:style>
<w:style w:type="paragraph" w:styleId="3">
<w:name w:val="heading 3" />
<w:basedOn w:val="a" />
<w:next w:val="a0" />
<w:uiPriority w:val="9" />
<w:unhideWhenUsed />
<w:qFormat />
<w:rsid w:val="00D808E1" />
<w:pPr>
<w:keepNext />
<w:keepLines />
<w:numPr>
<w:ilvl w:val="2" />
<w:numId w:val="13" />
</w:numPr>
<w:spacing w:before="200" w:after="0" />
<w:outlineLvl w:val="2" />
</w:pPr>
<w:rPr>
<w:rFonts w:asciiTheme="majorHAnsi" w:eastAsiaTheme="majorEastAsia" w:hAnsiTheme="majorHAnsi" w:cstheme="majorBidi" />
<w:b />
<w:bCs />
<w:color w:val="262626" w:themeColor="text1" w:themeTint="D9" />
</w:rPr>
</w:style>
<w:style w:type="paragraph" w:customStyle="1" w:styleId="FirstParagraph">
<w:name w:val="First Paragraph" />
<w:basedOn w:val="a0" />
<w:next w:val="a0" />
<w:qFormat />
</w:style>
<w:style w:type="paragraph" w:styleId="a0">
<w:name w:val="Body Text" />
<w:basedOn w:val="a" />
<w:link w:val="a4" />
<w:qFormat />
<w:rsid w:val="000D2419" />
<w:pPr>
<w:spacing w:before="180" w:after="180" w:line="360" w:lineRule="auto" />
</w:pPr>
</w:style>
<w:style w:type="paragraph" w:default="1" w:styleId="a">
<w:name w:val="Normal" />
<w:qFormat />
<w:rsid w:val="00FA3EAF" />
<w:rPr>
<w:sz w:val="20" />
</w:rPr>
</w:style>
内容を見たところ、document.xmlには文章と<w:pStyle w:val="FirstParagraph" />といったタグが見れると思います。このFirstParagraphに対応するスタイルがstyles.xmlに存在します。
w:styleタグのw:styleId要素がw:pStyleのw:val要素に対応しています。
また、styles.xmlのスタイルを見てみましょう。
<w:style w:type="paragraph" w:styleId="a0">
<w:name w:val="Body Text" />
<w:basedOn w:val="a" />
<w:link w:val="a4" />
<w:qFormat />
<w:rsid w:val="000D2419" />
<w:pPr>
<w:spacing w:before="180" w:after="180" w:line="360" w:lineRule="auto" />
</w:pPr>
</w:style>
<w:style w:type="paragraph" w:default="1" w:styleId="a">
<w:name w:val="Normal" />
<w:qFormat />
<w:rsid w:val="00FA3EAF" />
<w:rPr>
<w:sz w:val="20" />
</w:rPr>
</w:style>
w:basedOnタグはその名の通り、スタイルの継承元を指定するタグです。
Wordのスタイルウィンドウからスタイルを見ると、『基準』の表示に対応しています。
> まとめまとめ
ここまででわかったことをあげます。これら事実を知るとスタイルが重要なことがわかると思います。
- WordファイルはXMLで構成されたファイルである。
- コンテンツとスタイルは分離されている。
- スタイルは継承することができる。
dev
ウェブ技術で縦書きを含む画像を生成したい
ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現
blog
Netlify Formsで問い合わせフォームを作ったら簡単だった
追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ
netlify
dev
翻訳でHacktoberfestに参加しました
毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数（4つ）の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ