サイトデザインを新しく作り直した話

記事作成日:2020-12-25

トップページのスクリーンショット

ずーっとほったらかしていたこのサイトを新しく作り直しました。と言っても、元のがどうだったか知っている人はほとんどいないと思われますが…(笑)

まぁ、このように好き勝手にやれるのが自作サイトのメリットです。(ただ、通常はいきなり大幅な変更をするのは良くないと言われています。)

目的は僕の作業量の削減

ウェブ作成においてめんどくさい作業の1つが、作成したファイルへの「リンク貼り」です。ウェブサイトを自作したことがある人はわかってもらえると思います。

今回はそこをなんとかしたかったのです。見た目うんぬんよりも、僕の作業量の削減。申し訳ないけれどそこがほんとの目的だと書きながら思っています。ですが、これはけっこう重要な部分で、めんどくさい作業が減ればサイトの更新頻度が上がる!・・・かもしれません。

PHPを使ってリンク貼りを自動化

ウェブ作成で使えるプログラム言語のひとつに「PHP」という言語があります。今回はこれを使って僕のサイトシステムを作ることにしました。

いつも同じような作業をやっているなぁと感じたら、その作業はだいたいプログラムに任せることができます。リンク貼りの作業もまさにそうです。

まずは、フォトギャラリー用のプログラム。ここでは「JavaScript」という言語も使用しています。流れとしてはざっくりこんな感じ。

  1. 指定したフォルダ内の画像ファイル情報を取得(PHP)
  2. 取得したファイル情報を元にHTML用のタグ作成(PHP)
  3. サムネイル画像をクリックで大きな画像を表示(JavaScript)

あとは、1ページに表示させるサムネイルの枚数を指定し、それを越える場合は次のページに表示させるページング処理も自動的に行われます。

ブログ用のプログラムは、基本的にはフォトギャラリーの「画像ファイル情報」の部分が「記事のファイル情報」に置き換わるだけですが、もう少し複雑な処理をしています。

  • 指定したフォルダからindex.phpファイル以外の記事のファイルだけをピックアップ
  • 記事のファイルからタイトル部分、作成日などの情報を抜き出す
  • ファイル情報を元に記事一覧のタグ作成

上記の機能を追加。これで、写真のファイルと記事を書いたファイルをアップロードするだけでフォトギャラリーページ、記事一覧ページが出来上がる仕組みが完成!

エラーとの戦いの日々

とまぁ、簡単に書いていますが、僕はプログラマーでもなければウェブ作成会社で働いているわけでもないので、かなり苦労しました。エラーとの戦いの日々。でも、その作業が自作する楽しみでもあります。問題を一つ一つ解決し、最後に自分の思った通りの動きになったときは最高に気持ちいいです。

あとは、めんどくさがりな僕がどれだけちゃんと更新していけるか…これが一番の問題かもしれません。