スタティックなHTML
サスティナブル・アーカイブ・ギャラリーひまわり において、地域資料デジタル化研究会が取り組むデジタルアーカイブは、特定のWeb+DBシステムに依存せず、特定のデジタルアーカイブシステムに依存せず、移転も可能なレガシーなウェブのスタイルをとっています。
- 静的なHTMLファイル（スタティックなHTML）
- CSS
- JavaScript
- サムネイル画像
現在のスタート時点においては、静的HTMLファイルとCSSの組み合わせで作成しています。
- テキストエディタ（Visual Studio Codeなど）を用いて、基本となるHTMLファイルを作成します。
- 基本となるHTMLファイルの中で、デジタルアーカイブとしての資料毎に変化する場所を決めます。
- <html><head></head><body></body></html>の大きなくくりを把握
- <head></head>の記述で、すべてのファイルで同じ部分と、個々のファイルで違う部分とに分けます。
- <body></body>の記述の中では、<header></header><mail></main><footer></footer>を意識しながら、すべてのファイルで同じ記述と、個々のファイルで異なる記述の場所を把握します。
こうして、すべてのファイルで共通部分と、個々の資料で目録情報を元にして異なる記述部分とを把握して、次の自動生成型静的HTMLのためのプログラミングづくりに取り組みます。
プログラミングによる生成型静的HTML
資料一覧、保存袋一覧の目録データを、基本となるHTMLファイルに差し込みながらHTMLをひとつひとつ書き出す方法で、数件〜数千件の各資料アイテムのページを生成するプログラムを作成します。
- FileMaker Pro
- MS-Excel + VBA
- Googleスプレッドシート + GAS
- Python
現在のところ、FileMaker Proを用いた自動生成型静的ウェブを構築しています。すべてのファイルに共通する部分はテキストフィールドとしてグルーバル変数（すべてのレコードで共通）として入力、目録情報のExcelファイルを読み込み、関数フィールドを作成して、共通部分と個別部分の文字列を繋ぎ合わせて新しいフィールドを作成します。
最終的には、個々の静的HTMLファイルになる計算フィールドにまとめ、資料一覧IDや保存袋IDなどから生成するファイル名を用いて、自動的にHTMLファイルを書き出させます。
一度、このプログラムができてしまうと、数百件、数千件の自動生成型静的ウェブページの作成は、数秒で書き出すことが可能になります。
組織化ページ（目次・索引としてのHTMLページ）
組織化ページ（保存袋一覧、地名順、時間順など）は、上記の静的ウェブの中でも<main></main>のパートの中に、自動で書き出したリストタグのHTMLコードを、テキストエディタを用いて組み込むことで作成できます。
- すべての保存袋
- 場所順
- 時間順
- 50音順
は、それそれ１つのHTMLファイルなので、あえて自動化する必要はないのですが、最終的なバージョンではこのあたりも自動生成でファイルを書き出せるようにすることも検討しています。
マスターメディアデータからのサムネイル(JPEG)の生成
生成型静的ウェブのページに用いるサムネイル画像は、次のように作成します。
- マスターとなるメディアデータ（画像）を確定（TIFF形式）
- デジタルカメラのRAW形式での撮影は同時にJPEG形式での保存も可能であるので、それを用いで同じ解像度のJPEGファイルを作成
- Adobe Photoshopのイメージプロセッシング…機能を用いて、特定のフォルダ（サブフォルダを含むを指定すると作業が早い）の画像を、指定したフォルダに、指定した解像度で変換し新規で保存することができます。
- オリジナルサイズのJPEGファイルを出力
- Lサイズ（長辺1280px）、Mサイズ（長辺640px）、Sサイズ（長辺320px）を、それぞれLサイズのフォルダ、Mサイズのフォルダ、Sサイズのフォルダに変換保存します。
- この時のサムネイルを保存したファイルへのパスは、上記の自動生成プログラムでサムネイル画像の埋め込みを指示するために用います。
基本的なツリー構造
public_htmlフォルダ内に作成は、関本家資料の場合は次のようになります（途中省略）
├── JPEG
│ ├── L
│ │ ├── digiken_skmtd_0001.jpg
│ │ │ （Lサイズ画像）
│ │ └── digiken_skmtp_0248.jpg
│ ├── M
│ │ ├── digiken_skmtd_0001.jpg
│ │ │ （Mサイズ画像）
│ │ └── digiken_skmtp_0248.jpg
│ ├── O
│ │ ├── digiken_skmtd_0001.jpg
│ │ │ （オリジナルサイズ画像）
│ │ └── digiken_skmtp_0248.jpg
│ └── S
│ ├── digiken_skmtd_0001.jpg
│ │ （sサイズ画像）
│ └── digiken_skmtp_0248.jpg
├── artmuseum.html (山梨県立美術館への寄贈資料一覧）
├── digiken_skmtd_0001.html
│ （各資料の静的HTML）
├── digiken_skmtp_0248.html
├── images
│ ├── apple-touch-icon.png
│ ├── digi-ken_logo-300x94.png
│ ├── digiken_skmtd_1819.jpg
│ └── favicon.png
├── index.html （トップページ）
├── kaijium.html （山梨県立博物館への寄贈資料一覧）
├── literarymuseum.html （山梨県立文学館への寄贈資料一覧）
├── set_skmt_001.html
│ （保存袋の静的HTML）
├── set_skmt_272.html
├── skmt_aiueo.html （50音順一覧）
├── skmt_location.html （場所順一覧）
├── skmt_outline.html （デジタルアーカイブ概要）
├── skmt_set_all.html （保存袋一覧）
├── skmt_timeline.html （年代順一覧）
├── skmt_use.html （利用にあたって）
└── style.css （スタイルシート）
主なソフトウェア
HTML生成： FileMaker Pro, MS-Excel, Googleスプレッドシート, Pythonなど
Claris FileMaker Pro (日本語)
現代そして将来のビジネス課題を解決するカスタム App を迅速に構築しましょう。Claris FileMaker Pro の詳細についてご案内します。
テキスト編集：Visual Studio Code
サムネイル作成： Adobe Photoshop のイメージプロセッサ機能
Adobe Photoshop公式アプリ - 最先端のAI写真＆デザインソフトウェア
画像の結合、レタッチ、リミックス。Photoshopを使えば、あなたにもできます。Photoshopの生成AIを使用して、高品質でユニークなコンテンツの作成方法を変革しましょう。…
メディアデータへのメタデータ書き込み： Adobe Bridge
※ 追記
Microsoft Wordの差し込み印刷機能を使ったことはありますか？
ワードで作成したテンプレート文章の中に、エクセルシートで作成した一覧表の各行からのデータを逐次埋め込みながら、１つのテンプレートで変数部分の異なる複数の印刷ができる機能です。
生成型静的HTMLの出力は、基本的に差し込み印刷するように、ひとつひとつのHTMLファイルを書き出すようなものだと思ってください。
実際には、ワード＋エクセルによる差し込み印刷や、Googleドキュメント＋Googleスプレッドシートによる差し込み印刷機能でHTMLファイルを作成することはできませんが、一覧表になったデータをテンプレートの {{変数部分}} に代入しながら一件一件のファイルを書き出すようなものとなります。
関本家資料デジタルアーカイブの場合
関本家資料デジタルアーカイブでは、次のようなページを作成しました。
トップページ
トップページにおいては、基本的なページデザインも含めて、テキストエディタ（Visual Studio Code）にて作成しています。
このページをつくりながら、関本家資料デジタルアーカイブのページ全体にかかわるデザインをHTMLで作成します。
デザイン上のページ全体の構成、ヘッダーとなる部分、メニューの配置、ボディーとして表示する部分、ページの下部、フッターとなる部分などのパーツを意識しながら、ページを作成しています。
また、特定のサーバにアップロードすることで、関本家資料アーカイブのURLが確定するので、Googleサイト内検索のコードを作成し、こちらも手入力にて組み込んでいます。
資料保存袋 (リスト部自動生成後、テンプレートに手動組み込み）
資料保存袋、編年順一覧、場所順一覧においては、基本的なページ構成からヘッダー部分、メイン部分、フッター部分とわけて、メイン部分となるリストのみを自動生成し、テンプレートとなるHTMLのメイン部分に組み込んでいます。
保存袋一覧のリスト部分は、
<li>（自動書き出し）</li>
にて作成しています。
編年順一覧 (リスト部自動生成後、テンプレートに手動組み込み）
資料保存袋、編年順一覧、場所順一覧においては、基本的なページ構成からヘッダー部分、メイン部分、フッター部分とわけて、メイン部分となるリストのみを自動生成し、テンプレートとなるHTMLのメイン部分に組み込んでいます。
保存袋一覧のリスト部分は、テーブルタグの要素として
<tr><td>（自動書き出し）</td></tr>
にて作成しています。
場所順一覧 (リスト部自動生成後、テンプレートに手動組み込み）
資料保存袋、編年順一覧、場所順一覧においては、基本的なページ構成からヘッダー部分、メイン部分、フッター部分とわけて、メイン部分となるリストのみを自動生成し、テンプレートとなるHTMLのメイン部分に組み込んでいます。
保存袋一覧のリスト部分は、テーブルタグの要素として
<tr><td>（自動書き出し）</td></tr>
にて作成しています。
50順一覧 (リスト部自動生成後、テンプレートに手動組み込み）
トップページにおいては、基本的なページデザインも含めて、テキストエディタ（Visual Studio Code）にて作成しています。
保存袋一覧のリスト部分は、テーブルタグの要素として
<li>（自動書き出し）</li>
にて作成し、見出しとしてあ行、か行〜わ・を・ん をあらかじめテンプレートのメイン部分に作成し、書き出したリストのテキストファイルから、手動でカット＆ペーストして作成しています。
保存袋ページ (全ページ自動生成)
保存袋ページにおいては、CSSによるFlexbox(フレックスボックス）を基本にサムネイル表示のページを作成しています。
このページの表現においては、Flexboxの記述によって大きく変化します。
Flexbox内の記述をどのように自動化させ、保存袋ページの全ページをいかに自動化してHTMLファイルとして書き出すかがポイントとなります。関本家資料においては、211個の静的HTMLファイルを自動生成しています。
資料詳細ページ (全ページ自動生成)
資料詳細ページにおいては、基本となるテンプレートを作成し、サムネイル表示部分と目録情報となるテーブル部分を作成してHTML記述を作成。資料番号に基づきそれぞれのレコードをファイル名フィールドの名前で自動生成しています。
関本家資料デジタルアーカイブにおいては、1717件の静的HTMLファイルを自動生成しています。
style.css - スタイルシートについて
関本家資料デジタルアーカイブを第一弾とする サスティナブル・アーカイブ・ギャラリーあまのがわ では、上記のようなスタイルでのデジタルアーカイブ構築に取り組んでいきます。その際、HTMLの自動生成だけでなく、Flexboxなどを含めてスタイルシートの存在はとてもおおきなものです。HTMLファイルを変更せずに全体のデザインを変更することも可能です。
今回は、スタイルシートの中において変数を用いた 配色パートを作成しています。基本的に３色の配色＋白・黒の５色によってこのスタイルを作っています。
以下の参考図書から、３色の配列による色指定部分を変数とし、スタイルシートの中の色指定部分を変数にすることで、３色のみを入れ替えるだけで、カラーバリエーションをつくることができます。
/* カスタムプロパティの設定*/
:root{
--base-color: #40220f; /* ベースとなる色 ページの地の色*/
--accent-color: #c9bc9c; /* 表題表示エリア、FlexBoxアイテムの色 */
--sub-color: #a19587; /* メインエリアの色 */
}参考図書をもとに、FileMaker Proで作成した配色用のデータベース
配色バリエーション
--base-color: #889e85;
--accent-color: #d5c097;
--sub-color: #694364;
--base-color: #eeefd8;
--accent-color: #2f2c2f;
--sub-color: #b8a8b6;
--base-color: #ef8bb6;
--accent-color: #ffda2a;
--sub-color: #31b6a0;
【参考図書】
- 『見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色』 ingectar-e (著)／インプレス
- 『見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2』 ingectar-e (著)／インプレス