On Golden Pond

すみません。タイトル盛りました。

HTMLとCSSを手書きしてFTPでアップロードする個人ホームページを作っていて、さすがにこれは手作業、コピペするのは無駄、というところがあります。

ホームページで注力したいのはコンテンツで、「文字書き」のひとなら文章だし「絵描き」のひとならイラストや漫画でしょう。

今どきのサイトはコンテンツ以外(訪れたひとに見えない部分)も、いろいろ記述されています。訪れたひとに見えないわけですから、ぶっちゃけどうでもいいっちゃいいんですが、世間体ということもあるので、体裁を整えておくために静的サイトジェネレーターみたいなものを作りました。

以下、ページのヘッダーと言われるところです。

ブラウザでは表示しません＝訪れたひとには見えない部分です。

ブラウザのアドレスバーなんかで使われてたりして、ユーザーの利便性が向上することがあったり、プレビューカードとして使われたりするための呪文です。

• title / og:title
  ページのタイトル
• og:url
  ページのURL
• og:image
  ページのキービジュアル
• og:site_name
  ページの名前
• description / og:description
  ページの説明

「og:」なんちゃらを設定しておくと「ogp」というのに対応しているサイトにリンクを貼るとプレビューカードとして表示されます。

ページごとに記載する内容が変わるのでこのためにいちいちコピペして調整する必要があったりします。

最初はこのへんも手書き、コピペでやってたんですが、さすがに阿呆らしくなったので自動化しました。

ほかの部分、「meta」「link」なんちゃらの固定箇所もコピペでミスることがあるので、ついでに自動記載に組み入れました。

メニューやフッターも自動生成にしました。

全ページで共通部分で、これらも最初は手作業コピペしてたんですが、メニュー追加したりするとすべてのページを書きかえる必要があって面倒くさすぎました。

今日時点の個人ホームページの構成です。

オレオレMovableTypeは
「ヘッダー/メインコンテンツ/フッター」
の3つのコンテナと
メインコンテンツの中に「primary」と「secondary」
の2つのコンテナ、計5つの箱を用意するだけです。

ページ作成にあたって、やることは。
• 手作業作成エリアのHTMLファイルを作る。
• 新規にページを作ったらメニューなどにリンクを追加する。

homepage.zip
↑オレオレMovableTypeです。
perlでcgiが使えるレンタルサーバーなら動くと思います。(素人芸のコードなのでツッコミはご容赦ください)

テキトーなとこで解凍したら、とりあえず、そのディレクトリ構成ごとサーバーにアップ。

「homepage.cgi」とディレクトリはファイルの権限「755」(または705)に設定。

.
├── cache
│   └── index.html
├── css
│   ├── contents.css
│   ├── default.css
│   ├── mobile.css
│   ├── pc.css
│   └── reset.css
├── favicon.ico
├── homepage.pl
├── images
│   └── no-image.png
├── lib
│   └── ongoldenpond.pm
├── links.html
└── static
    ├── about.html
    ├── homepage.xml
    ├── images
    ├── index.html
    └── links.html
          

↑こんな構成です。

「static」というディレクトリの「homepage.xml」を編集します。

<?xml version="1.0" encoding="UTF-8"?>
<homepage>
  <title>ホームページタイトル</title>
  <url>https://example.com/</url>
  <description>ホームページ説明文</description>
  <image>https://example.com/images/no-image.png</image>
  <linkbanner>https://example.com/images/no-image.png</linkbanner>
  <email>admin@example.com</email>
  <copyright>COPY RIGHT</copyright>
  <footer>フッター1</footer>
  <footer>フッター2</footer>
  <cache>cache/index.html</cache>
  <errlog>_err.log</errlog>
  <additional>
    <header attr="meta">
        <key0>name</key0><val0>fediverse:creator</val0>
        <key1>content</key1><val1>@name@fediverse.com</val1>
    </header>
  </additional>
  <menu>
      <nhk type="rdf">
        <url>https://www3.nhk.or.jp/news/</url>
        <title>日本放送協会 NHKニュース</title>
        <info>https://www.nhk.or.jp/rss/news/cat0.xml</info>
        <icon>no-image.png</icon>
        <desc></desc>
        <count>3</count>
    </nhk>
  </menu>
  <menu>
      <bbc type="rdf">
        <url>https://news.yahoo.co.jp/media/bbc</url>
        <title>BBCニュース::Yahoo!ニュース</title>
        <info>https://news.yahoo.co.jp/rss/media/bbc/all.xml</info>
        <icon>no-image.png</icon>
        <desc></desc>
        <count>3</count>
    </bbc>
  </menu>

  <menu>
    <links>
        <url>https://example.com/links.html</url>
        <title>リンク集</title>
        <info>links.html</info>
        <icon>no-image.png</icon>
        <desc>リンク集です。</desc>
    </links>
  </menu>
  <menu>
    <about>
        <url>https://example.com/about.html</url>
        <title>当サイトについて</title>
        <info>about.html</info>
        <icon>no-image.png</icon>
        <desc></desc>
    </about>
  </menu>
</homepage>
        

「example.com」をhomepage.cgiのあるディレクトリのURLに修正してhomepage.cgiを実行
ex.)https://your-site.com/homepage.cgi

https://your-site.com/
にアクセスして表示を確認。

画像が見にくてすみません。こんな感じに表示されると思います。

メニューは仮で
• NHKニュース、BBCニュースのRSS
• ダミーのaboutページとリンクページ

「homepage.xml」の「menu」の部分です。

【HTMLを新規に作る】

「static」ディレクトリに「htmlファイル」を作ってhomepage.cgiを実行すると反映します。
ただ、これだけだとどこにもリンクがないので存在しないページとなります。メニューに追加するかトップページにリンクを記載することで公開となります。

(すべてのHTMLを更新するのは無駄なので、更新のあったHTMLファイルを反映。メニューが更新されていたら全ページ更新)

<menu>
    <new(新規ページ項目名)>
      <url>https://example.com/new.html(新規ページのURL)</url>
      <title>新規のページタイトル</title>
      <info>new.html(新規ページのhtmlファイル名)</info>
      <icon>アイコン画像</icon>
      <desc>ページの説明。</desc>
    </new>
</menu>
        

「static」に作る「htmlファイル」は「手作業エリア」に表示させるもので

<div id="links">
    ここにHTMLをガシガシ書きこむ
    idのlinksは判別しやすい名前なら何でもOK。
    また、このid指定でスタイルを作ると他に影響しない。
</div>
        

「idをつけたdivタグ」で挟んで、その中にHTMLとCSSを書いていきます。

上記したように、本スクリプトがやってることは、コンテンナを5つ用意するだけです。

要素とID
• section:header
• div:main-contents
  • section:primary
  • section:secondary
• section:footer

ここにスタイルを適用していけば見た目のカスタマイズは可能です。

• reset.cssとdefault.cssはこのまま。特になにかしてるということはありません
• contents.css
  PCをデフォルトとしたスタイル設定
• mobile.css
  モバイル用のスタイル設定

この程度のチープでプアなモノでも、ページを作る時に少しラクができるのでサイトの更新頻度が…あがればいいなあ、と思ってます。

お気に入りやイベント