サイトの技術情報
このサイトの構造解説
当サイトは意地になって既成の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
CotEditor- Graphic
-
Illustrator CC -
Pixelmator - FTP Client
Transmit
採用技術
- markup
- XHTML5.1
- style
- CSS 3
- graphic
- SVG1.1
- program
- PHP5.3
- database
- -
plug-ins
現在当サイトで利用している自作ではないもの、および外部サービスとの連携API
- Ajax libraries
- jQuery latest
- Google Maps API Libraries > InfoBox v1.1.12
- APIs
- Google Maps API v3
- Google Web Fonts
- はてなブックマーク件数取得API
- はてなブックマーク人気エントリー取得API (private API)
hosting service
サーバは借りてます
- server
- VALUE-SERVER.com eco
- registrar
- Value-Domain
構造
当サイトは、ヘッダーやサイドバーなどのサイト共通のレイアウト部分を生成する
- Coreエンジン
を基軸に、更に
- Blogエンジン
- サイト内検索エンジン
が組み込まれ、この3エンジンで成り立っています。
いずれも当サイトのためにサイト管理者1024jpが独自に開発したものです。PHPで書かれています。
Coreエンジン
各ページから呼び出すかたちでサイト共通部分を自動生成するのが主な役割です。また、ページやサイト全体のメタ情報も管理しています。
Blogエンジン v2
text/以下のみCoreエンジンに加えてこのBlogエンジンが動いています。
データベースを一切使わず、テキストファイルでデータを保持することを特色としています。また、管理者用の記事の書き込みインターフェイスを持たず、直接FTPでアップロードした本文HTMLファイルを読みにいきます。本文はローカルでテキストエディタで書いています。
version history
- v1 original ver
- v2 コードを書き直しOOPに
サイト内検索エンジン
サイト全体を横断的に検索します。いわゆるgrep
型です。
補足
当サイトの詳細な仕組みについては、折に触れてBlog内で解説をしています。以下に、過去の主要なBlog記事をリストアップしておくので、興味がある方は参考にして下さい(ただし、記載時から既に仕様が変わっているモノもあります。
マークアップ
XHTML5.1を採用しています。当サイトでは現状このようにマークアップしています。
CSSでの指定はrel
属性や文脈セレクタを指定するようにし、極力無駄なid/classは振らない方針でやってみています。詳しくはソースを直接見てください。当サイトでは、美しいコーディングにも情熱をかけています。