ヴォルフロッシュ

サイトの技術情報

このサイトの構造解説

当サイトは意地になって既成のCMSもフレームワークもテンプレートも使わず、フルスクラッチで1ページずつガリガリとテキストエディタにHTMLで書いたものに自作のPHPテンプレートを噛ませて表示させています。Blog、検索システムも独自に作ってます(配布はしていません

スクリプト・HTML/CSS等コーディングから細部のデザイン・パーツ画像に至るまで自前でまかなう、手作り感を大切にするサイトです。

制作環境

hardware

Computer
MacBook Pro 13" with Touch Bar Early 2017
OS: macOS High Sierra
Processor: 3.3GHz Intel Core i7
Memory: 16GB

software

Text Editor
[site]
CotEditor
Graphic
[site]
Illustrator CC
[site]
Pixelmator
FTP Client
[site]
Transmit

採用技術

markup
XHTML5.1
style
CSS 3
graphic
SVG1.1
program
PHP5.3
database
-

plug-ins

現在当サイトで利用している自作ではないもの、および外部サービスとの連携API

Ajax libraries
APIs

hosting service

サーバは借りてます

server
VALUE-SERVER.com eco
registrar
Value-Domain

構造

当サイトは、ヘッダーやサイドバーなどのサイト共通のレイアウト部分を生成する

を基軸に、更に

が組み込まれ、この3エンジンで成り立っています。

いずれも当サイトのためにサイト管理者1024jpが独自に開発したものです。PHPで書かれています。

Coreエンジン

各ページから呼び出すかたちでサイト共通部分を自動生成するのが主な役割です。また、ページやサイト全体のメタ情報も管理しています。

ex. [file] /alfee/almanga/index.php
ページ内の本文のみがページファイル直書きで他の部分は自動生成
<?php
    // メタ情報の設定
    $pagetitle = 'アルマンガ';
    $share     = true;
    ...
    // テンプレート前半呼び出し
    include_once 'path to script';
?>

<!-- ページにHTML直書き -->

Blogエンジン v2

text/以下のみCoreエンジンに加えてこのBlogエンジンが動いています。

データベースを一切使わず、テキストファイルでデータを保持することを特色としています。また、管理者用の記事の書き込みインターフェイスを持たず、直接FTPでアップロードした本文HTMLファイルを読みにいきます。本文はローカルでテキストエディタで書いています。

version history

  • v1 original ver
  • v2 コードを書き直しOOP

サイト内検索エンジン

サイト全体を横断的に検索します。いわゆるgrep型です。

補足

当サイトの詳細な仕組みについては、折に触れてBlog内で解説をしています。以下に、過去の主要なBlog記事をリストアップしておくので、興味がある方は参考にして下さい(ただし、記載時から既に仕様が変わっているモノもあります

マークアップ

XHTML5.1を採用しています。当サイトでは現状このようにマークアップしています。

ヴォルフロッシュのページのHTML5構造

CSSでの指定はrel属性や文脈セレクタを指定するようにし、極力無駄なid/classは振らない方針でやってみています。詳しくはソースを直接見てください。当サイトでは、美しいコーディングにも情熱をかけています。